/* QualiteAndCo — Shop family page (editorial catalog by prestation).
   Layered on top of homepage.css which provides the :root tokens and
   the shared header/footer styles (both files share the .qco-site
   wrapper, so cascade order doesn't matter). */

.qco-site .famille-hero{
    padding:80px 0 56px;
    text-align:center;
}
.qco-site .famille-hero .breadcrumb{
    display:inline-flex;align-items:center;gap:10px;
    font-family:var(--font-sub);font-size:11px;letter-spacing:.28em;text-transform:uppercase;
    color:var(--ink-soft);margin-bottom:28px;
}
.qco-site .famille-hero .breadcrumb a{
    color:inherit;text-decoration:none;
    border-bottom:1px solid transparent;
    transition:border-color .3s, color .3s;
}
.qco-site .famille-hero .breadcrumb a:hover{color:var(--gold-deep);border-color:var(--gold)}
.qco-site .famille-hero h1{
    font-family:var(--font-title);font-weight:400;
    font-size:clamp(40px,5.2vw,80px);line-height:1;letter-spacing:.04em;
    text-transform:uppercase;
    margin-bottom:24px;
}
.qco-site .famille-hero h1 .italic{font-style:normal;color:var(--ink);font-weight:400}
.qco-site .famille-hero .lede{
    font-family:var(--font-body);font-style:italic;
    font-size:clamp(16px,1.3vw,19px);color:var(--ink-soft);
    max-width:60ch;margin:0 auto;line-height:1.65;
}
.qco-site .famille-hero .ornament{
    display:flex;align-items:center;justify-content:center;gap:14px;
    margin:40px auto 0;
}
.qco-site .famille-hero .ornament .line{width:48px;height:1px;background:var(--gold);opacity:.8}
.qco-site .famille-hero .ornament .dot{width:5px;height:5px;border-radius:50%;background:var(--gold)}

.qco-site .produits-section{padding:32px 0 96px}
.qco-site .produits-section .wrap{max-width:1320px;margin:0 auto}
.qco-site .produits-grid{
    display:grid;grid-template-columns:repeat(2,minmax(0,560px));
    gap:40px 110px;justify-content:center;
}
.qco-site .produit{
    display:grid;grid-template-columns:300px 1fr;gap:28px;align-items:start;
    text-decoration:none;color:inherit;
}
.qco-site .produit .photo{
    position:relative;width:300px;aspect-ratio:1/1;overflow:hidden;
    background:var(--beige);
    border-radius:2px;flex-shrink:0;
}
.qco-site .produit .photo img{
    width:100%;height:100%;object-fit:cover;display:block;
    transition:transform .8s cubic-bezier(.2,.8,.2,1);
}
.qco-site .produit:hover .photo img{transform:scale(1.04)}
.qco-site .produit .meta{padding:0;text-align:left;min-width:0}
.qco-site .produit .num{
    font-family:var(--font-sub);font-size:10px;letter-spacing:.32em;text-transform:uppercase;
    color:var(--gold-deep);margin-bottom:8px;display:block;
}
.qco-site .produit h3{
    font-family:var(--font-title);font-weight:500;
    font-size:20px;line-height:1.2;letter-spacing:-.005em;
    color:var(--ink);margin-bottom:8px;
}
.qco-site .produit h3 .italic{font-style:normal;color:var(--ink);font-weight:500}
.qco-site .produit .card-sous-titre{
    font-family:var(--font-body);font-weight:300;font-size:14px;
    color:var(--ink-soft);margin:-4px 0 4px;
}
.qco-site .produit .card-prix{
    font-family:var(--font-title);font-weight:500;font-size:19px;
    color:var(--ink);margin:0 0 8px;
}
.qco-site .produit .card-prix .card-prix-mention{
    font-family:var(--font-title);font-weight:700;font-size:13px;
    color:var(--ink-soft);margin-left:3px;
}
.qco-site .produit .desc{
    font-family:var(--font-body);font-style:italic;font-weight:300;
    font-size:14px;line-height:1.6;color:var(--ink-soft);
    white-space:pre-line;margin-bottom:8px;
}
.qco-site .produit .card-detail{
    font-family:var(--font-body);font-weight:400;font-size:13px;
    line-height:1.45;color:var(--ink-soft);margin:3px 0;
}
.qco-site ul.desc.desc-list{
    list-style:none;margin:0;padding:0;font-style:normal;
    display:flex;flex-direction:column;gap:4px;
}
.qco-site ul.desc.desc-list li{
    position:relative;padding-left:16px;
    font-family:var(--font-body);font-weight:300;font-size:12px;line-height:1.4;color:var(--ink-soft);
}
.qco-site ul.desc.desc-list li::before{
    content:"";position:absolute;left:1px;top:.55em;
    width:4px;height:4px;border-radius:50%;background:var(--gold);
}
.qco-site .produit .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.qco-site .produit .tag{
    font-family:var(--font-sub);font-size:9px;letter-spacing:.22em;text-transform:uppercase;
    color:var(--ink-soft);border:1px solid var(--line);
    padding:4px 9px;border-radius:999px;
}
.qco-site .produit .tag.veg{color:#4a6b3a;border-color:rgba(74,107,58,.35)}
.qco-site .produit .tag.gold{color:var(--gold-deep);border-color:rgba(169,138,93,.4)}
.qco-site .produit .tag.vaisselle{
    display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
    color:var(--gold-deep);border-color:rgba(169,138,93,.45);
    background:rgba(200,169,126,.08);padding:4px 10px 4px 8px;
}
.qco-site .produit .tag.vaisselle svg{width:19px;height:19px;flex-shrink:0}

/* Placeholder card — products with no photo show a monogram letter */
.qco-site .produit .photo.placeholder{
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg, var(--beige) 0%, var(--beige-deep) 100%);
}
.qco-site .produit .photo.placeholder::before{
    content:'';position:absolute;inset:14px;border:1px solid rgba(169,138,93,.3);
}
.qco-site .produit .photo.placeholder span{
    font-family:var(--font-title);font-style:italic;font-weight:400;
    font-size:42px;color:var(--gold-deep);opacity:.6;
    position:relative;z-index:1;line-height:1;
}

.qco-site .produits-empty{
    text-align:center;color:var(--ink-mute);font-style:italic;
    padding:64px 0;font-size:15px;
}

/* ─── Side filter (parent/child tag facets) ─── */
.qco-site .produits-section-inner.has-filters{
    display:grid;grid-template-columns:220px 1fr;gap:48px;align-items:start;
}
.qco-site .filters{position:sticky;top:96px;padding:0 18px 0 0;border-right:1px solid var(--line)}
.qco-site .filters .filter-group{margin-bottom:28px}
.qco-site .filters h4{
    font-family:var(--font-sub);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
    color:var(--ink-soft);font-weight:700;margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--line);
}
.qco-site .filters label{
    display:flex;align-items:center;gap:10px;padding:7px 0;cursor:pointer;
    font-family:var(--font-body);font-size:13px;color:var(--ink);transition:color .2s;
}
.qco-site .filters label:hover{color:var(--gold-deep)}
.qco-site .filters input[type=checkbox]{
    appearance:none;-webkit-appearance:none;width:14px;height:14px;
    border:1px solid var(--line-strong);background:transparent;flex-shrink:0;cursor:pointer;
    position:relative;transition:border-color .2s, background .2s;margin:0;
}
.qco-site .filters input[type=checkbox]:hover{border-color:var(--gold)}
.qco-site .filters input[type=checkbox]:checked{background:var(--gold);border-color:var(--gold)}
.qco-site .filters input[type=checkbox]:checked::after{
    content:"";position:absolute;left:3px;top:0;width:4px;height:8px;
    border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);
}
.qco-site .filters .filter-apply{
    margin-top:4px;width:100%;padding:11px 12px;background:var(--ink);border:1px solid var(--ink);color:#fff;
    cursor:pointer;font-family:var(--font-sub);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
    font-weight:700;transition:background .25s, border-color .25s;
}
.qco-site .filters .filter-apply:hover{background:var(--gold-deep);border-color:var(--gold-deep)}
.qco-site .filters .filter-reset{
    display:block;text-align:center;margin-top:8px;width:100%;padding:9px 12px;
    background:transparent;border:1px solid var(--line);color:var(--ink-soft);text-decoration:none;cursor:pointer;
    font-family:var(--font-sub);font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;
    transition:border-color .2s, color .2s;
}
.qco-site .filters .filter-reset:hover{border-color:var(--ink);color:var(--ink)}
@media (max-width:980px){
    .qco-site .produits-section-inner.has-filters{grid-template-columns:1fr;gap:24px}
    .qco-site .filters{position:static;border-right:0;border-bottom:1px solid var(--line);padding:0 0 18px 0}
}

/* CTA "Une réception à imaginer ?" */
.qco-site .famille-cta{
    padding:88px 0 96px;
    border-top:1px solid var(--line);
    text-align:center;
}
.qco-site .famille-cta .eyebrow{margin-bottom:18px;display:inline-block}
.qco-site .famille-cta h2{
    font-family:var(--font-title);font-weight:400;
    font-size:clamp(28px,3.2vw,48px);line-height:1.05;letter-spacing:.04em;
    text-transform:uppercase;
    max-width:22ch;margin:0 auto 16px;
}
.qco-site .famille-cta h2 .italic{font-style:normal;color:var(--ink);font-weight:400}
.qco-site .famille-cta p{
    font-family:var(--font-body);font-style:italic;
    font-size:16px;color:var(--ink-soft);max-width:46ch;margin:0 auto 36px;line-height:1.7;
}
.qco-site .famille-cta .btn-row{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.qco-site .famille-cta .btn-primary{
    display:inline-flex;align-items:center;gap:14px;
    background:var(--ink);color:#fff;text-decoration:none;
    padding:16px 32px;font-family:var(--font-sub);font-size:11px;letter-spacing:.3em;text-transform:uppercase;font-weight:700;
    transition:background .3s, color .3s;
}
.qco-site .famille-cta .btn-primary:hover{background:var(--gold-deep)}
.qco-site .famille-cta .btn-ghost{
    display:inline-flex;align-items:center;gap:14px;
    background:transparent;color:var(--ink);text-decoration:none;
    padding:16px 32px;font-family:var(--font-sub);font-size:11px;letter-spacing:.3em;text-transform:uppercase;font-weight:700;
    border:1px solid var(--line-strong);
    transition:background .3s, color .3s, border-color .3s;
}
.qco-site .famille-cta .btn-ghost:hover{border-color:var(--gold);color:var(--gold-deep)}

/* Prev/next family navigation */
.qco-site .famille-nav{
    padding:64px 56px 80px;border-top:1px solid var(--line);
    display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px;
    max-width:1320px;margin:0 auto;
}
.qco-site .famille-nav .link{
    display:inline-flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--ink);
    transition:color .3s;
}
.qco-site .famille-nav .link:hover{color:var(--gold-deep)}
.qco-site .famille-nav .link .lbl{font-family:var(--font-sub);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-soft)}
.qco-site .famille-nav .link .name{font-family:var(--font-title);font-style:italic;font-weight:500;font-size:22px}
.qco-site .famille-nav .link.next{text-align:right;align-items:flex-end}

/* ─── Product detail (editorial) ─── */
.qco-site .produit-detail{padding:56px 56px 96px}
.qco-site .produit-detail .wrap{max-width:1180px;margin:0 auto}
.qco-site .produit-detail .breadcrumb{
    display:inline-flex;align-items:center;gap:10px;
    font-family:var(--font-sub);font-size:11px;letter-spacing:.28em;text-transform:uppercase;
    color:var(--ink-soft);margin-bottom:36px;
}
.qco-site .produit-detail .breadcrumb a{
    color:inherit;text-decoration:none;
    border-bottom:1px solid transparent;transition:border-color .3s, color .3s;
}
.qco-site .produit-detail .breadcrumb a:hover{color:var(--gold-deep);border-color:var(--gold)}
.qco-site .produit-detail .breadcrumb .sep{color:var(--gold)}

.qco-site .pd-grid{
    display:grid;grid-template-columns:minmax(0,0.92fr) 1fr;
    gap:64px;align-items:start;
}
.qco-site .pd-media{
    position:relative;aspect-ratio:1/1;overflow:hidden;
    background:var(--beige);border-radius:4px;border:1px solid var(--line);
}
.qco-site .pd-media img{width:100%;height:100%;object-fit:cover;display:block}
.qco-site .pd-placeholder{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg, var(--beige) 0%, var(--beige-deep) 100%);
}
.qco-site .pd-placeholder::before{content:'';position:absolute;inset:22px;border:1px solid rgba(169,138,93,.3)}
.qco-site .pd-placeholder span{
    font-family:var(--font-title);font-style:italic;font-weight:400;
    font-size:96px;color:var(--gold-deep);opacity:.55;position:relative;z-index:1;line-height:1;
}

.qco-site .pd-info{padding-top:6px}
.qco-site .pd-info .eyebrow{display:block;margin-bottom:14px}
.qco-site .pd-info h1{
    font-family:var(--font-title);font-weight:400;
    font-size:clamp(30px,3.4vw,52px);line-height:1.06;letter-spacing:.005em;
    color:var(--ink);margin-bottom:18px;
}
.qco-site .pd-price{
    font-family:var(--font-title);font-weight:500;font-size:26px;
    color:var(--ink);margin:14px 0 24px;
}
.qco-site .pd-price .pd-price-mention{
    font-family:var(--font-title);font-weight:700;font-size:13px;
    color:var(--ink-soft);margin-left:4px;
}
.qco-site .pd-sous-titre{
    font-family:var(--font-body);font-weight:300;
    font-size:15px;color:var(--ink-soft);margin:-4px 0 12px;
}
.qco-site .pd-desc{
    font-family:var(--font-body);font-style:italic;
    font-size:16px;color:var(--ink-soft);line-height:1.7;max-width:52ch;
    margin-bottom:10px;white-space:pre-line;
}
.qco-site .pd-detail{
    font-family:var(--font-body);font-weight:400;font-size:14px;
    line-height:1.5;color:var(--ink-soft);margin:4px 0;
}
.qco-site .produit-detail .ornament{
    display:flex;align-items:center;gap:14px;margin:28px 0;
}
.qco-site .produit-detail .ornament .line{width:48px;height:1px;background:var(--gold);opacity:.8}
.qco-site .produit-detail .ornament .dot{width:5px;height:5px;border-radius:50%;background:var(--gold)}

.qco-site .pd-cart{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:28px 0 8px}
.qco-site .pd-qty{display:inline-flex;align-items:center;border:1px solid var(--line-strong)}
.qco-site .pd-qty button{
    width:42px;height:48px;background:transparent;border:0;cursor:pointer;
    font-size:18px;color:var(--ink);transition:color .25s;
}
.qco-site .pd-qty button:hover{color:var(--gold-deep)}
.qco-site .pd-qty input{
    width:54px;height:48px;text-align:center;background:transparent;
    border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);
    font-family:var(--font-body);font-size:15px;color:var(--ink);
    -moz-appearance:textfield;
}
.qco-site .pd-qty input::-webkit-outer-spin-button,
.qco-site .pd-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qco-site .pd-add{
    display:inline-flex;align-items:center;gap:14px;
    background:var(--ink);color:#fff;border:0;cursor:pointer;
    padding:16px 34px;font-family:var(--font-sub);font-size:11px;letter-spacing:.3em;
    text-transform:uppercase;font-weight:700;transition:background .3s;
}
.qco-site .pd-add:hover{background:var(--gold-deep)}

.qco-site .pd-login{margin:28px 0 8px}
.qco-site .pd-login p{
    font-family:var(--font-body);font-style:italic;font-size:15px;
    color:var(--ink-soft);margin-bottom:16px;
}

.qco-site .pd-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.qco-site .pd-tags .tag{
    font-family:var(--font-sub);font-size:9px;letter-spacing:.22em;text-transform:uppercase;
    color:var(--ink-soft);border:1px solid var(--line);padding:4px 9px;border-radius:999px;
}
.qco-site .pd-tags .tag.veg{color:#4a6b3a;border-color:rgba(74,107,58,.35)}

/* ─── Page Sur mesure : approche + steps + formulaire de brief ─── */
.qco-site .brief-intro{
    display:grid;grid-template-columns:1fr 1fr;gap:80px;
    padding:40px 56px 64px;align-items:start;max-width:1320px;margin:0 auto;
}
.qco-site .brief-intro .col h3{
    font-family:var(--font-title);font-weight:500;
    font-size:20px;letter-spacing:.04em;text-transform:uppercase;
    margin-bottom:14px;color:var(--ink);
}
.qco-site .brief-intro .col p{
    font-family:var(--font-body);font-size:15px;line-height:1.7;color:var(--ink-soft);margin-bottom:14px;
}
.qco-site .brief-intro .steps{display:flex;flex-direction:column;gap:18px}
.qco-site .brief-intro .step{display:flex;gap:16px;align-items:flex-start}
.qco-site .brief-intro .step .num{
    font-family:var(--font-title);font-style:italic;font-weight:500;font-size:32px;color:var(--gold-deep);
    flex-shrink:0;width:48px;line-height:1;
}
.qco-site .brief-intro .step .body{padding-top:4px}
.qco-site .brief-intro .step .body strong{
    font-family:var(--font-title);font-weight:500;font-size:15px;letter-spacing:.04em;text-transform:uppercase;
    display:block;margin-bottom:4px;color:var(--ink);
}
.qco-site .brief-intro .step .body span{font-family:var(--font-body);font-style:italic;font-size:14px;color:var(--ink-soft);line-height:1.55}

.qco-site .brief-form{padding:64px 56px 96px;border-top:1px solid var(--line)}
.qco-site .brief-form .form-head{text-align:center;margin-bottom:48px}
.qco-site .brief-form .form-head .eyebrow{display:inline-block;margin-bottom:14px}
.qco-site .brief-form .form-head h2{
    font-family:var(--font-title);font-weight:400;
    font-size:clamp(28px,3.2vw,44px);letter-spacing:.04em;text-transform:uppercase;line-height:1.05;
}
.qco-site .brief-form form{
    display:grid;grid-template-columns:1fr 1fr;gap:32px 36px;max-width:880px;margin:0 auto;
}
.qco-site .brief-form .field{display:flex;flex-direction:column;gap:8px;position:relative}
.qco-site .brief-form .field.full{grid-column:1 / -1}
.qco-site .brief-form .field label{
    font-family:var(--font-sub);font-size:10px;letter-spacing:.28em;text-transform:uppercase;
    color:var(--ink-soft);font-weight:700;
}
.qco-site .brief-form .field input[type=text],
.qco-site .brief-form .field input[type=email],
.qco-site .brief-form .field input[type=tel],
.qco-site .brief-form .field input[type=date],
.qco-site .brief-form .field input[type=number],
.qco-site .brief-form .field textarea{
    font-family:var(--font-body);font-size:15px;color:var(--ink);
    background:transparent;border:0;border-bottom:1px solid var(--line-strong);
    padding:10px 0;outline:0;transition:border-color .3s;width:100%;
}
.qco-site .brief-form .field input:focus,
.qco-site .brief-form .field textarea:focus{border-bottom-color:var(--gold)}
.qco-site .brief-form .field textarea{min-height:120px;resize:vertical;line-height:1.6}
.qco-site .brief-form .field-chips{display:flex;flex-wrap:wrap;gap:8px}
.qco-site .brief-form .chip{
    display:inline-flex;align-items:center;
    font-family:var(--font-sub);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
    padding:9px 16px;border:1px solid var(--line-strong);border-radius:999px;
    cursor:pointer;transition:background .3s, border-color .3s, color .3s;
    color:var(--ink-soft);font-weight:700;user-select:none;
}
.qco-site .brief-form .chip input{position:absolute;opacity:0;pointer-events:none}
.qco-site .brief-form .chip:hover{border-color:var(--gold);color:var(--ink)}
.qco-site .brief-form .chip:has(input:checked){background:var(--ink);color:#fff;border-color:var(--ink)}
.qco-site .brief-form .form-actions{grid-column:1 / -1;display:flex;justify-content:center;margin-top:24px}
.qco-site .brief-form .form-submit{
    display:inline-flex;align-items:center;gap:14px;
    background:var(--ink);color:#fff;border:0;cursor:pointer;padding:18px 40px;
    font-family:var(--font-sub);font-size:11px;letter-spacing:.3em;text-transform:uppercase;font-weight:700;
    transition:background .3s;
}
.qco-site .brief-form .form-submit:hover{background:var(--gold-deep)}
.qco-site .brief-form .form-success{
    display:none;text-align:center;padding:48px 24px;
    background:linear-gradient(135deg, var(--beige) 0%, var(--beige-deep) 100%);
    max-width:760px;margin:0 auto;
}
.qco-site .brief-form .form-success.shown{display:block}
.qco-site .brief-form .form-success h3{font-family:var(--font-title);font-weight:500;font-size:28px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:12px}
.qco-site .brief-form .form-success p{font-family:var(--font-body);font-style:italic;color:var(--ink-soft);font-size:16px;line-height:1.6}

@media (max-width:980px){
    .qco-site .produits-grid{grid-template-columns:1fr;gap:32px}
    .qco-site .produits-section{padding:32px 22px 96px}
    .qco-site .famille-cta{padding:80px 22px}
    .qco-site .famille-nav{padding:64px 22px}
    .qco-site .produit-detail{padding:40px 22px 80px}
    .qco-site .pd-grid{grid-template-columns:1fr;gap:32px}
    .qco-site .pd-media{max-width:420px}
}
@media (max-width:760px){
    .qco-site .brief-intro{grid-template-columns:1fr;gap:48px;padding:32px 22px 48px}
    .qco-site .brief-form{padding:56px 22px 80px}
    .qco-site .brief-form form{grid-template-columns:1fr;gap:28px}
}
@media (max-width:520px){
    .qco-site .produit{grid-template-columns:150px 1fr;gap:18px}
    .qco-site .produits-grid > .produit:nth-child(-n+2){grid-template-columns:150px 1fr}
    .qco-site .produit .photo,
    .qco-site .produits-grid > .produit:nth-child(-n+2) .photo{width:150px}
    .qco-site .famille-hero{padding:56px 22px 40px}
}