/* Feuille de style de la boutique. Extraite de la page pour être
   partagée par l'accueil, les pages de marque et le catalogue. */

:root{
    --bg:#ffffff;
    --ink:#111111;
    --accent:#1151ff;
    --surface:#28282a;
    --gray:#f5f5f5;
    --line:#cacacb;
    --line-soft:#e5e5e5;
    --muted:#707072;
    --radius:8px;
    --radius-pill:30px;
    --border-w:1px;
    --font:Inter, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  /* Barrière contre le glissement latéral. Trois causes ont été trouvées et
     corrigées une à une — le lien d'évitement, la cible du cœur, le panier
     garé hors cadre — et la page glissait encore sur iPhone. `clip` ferme la
     question pour toutes les suivantes : il coupe ce qui dépasse sans créer
     de conteneur de défilement, donc sans casser l'en-tête qui reste collé
     en haut. Les carrousels gardent leur propre défilement, qui leur est
     interne. `hidden` prend le relais sur les Safari d'avant 2022. */
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
  body{overflow-x:clip}
  @supports not (overflow:clip){
    body{overflow-x:hidden}
  }
  body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
  img{max-width:100%;display:block}
  a{color:inherit;text-decoration:none}
  button{font-family:inherit;cursor:pointer}
  ul{list-style:none}
  .wrap{max-width:1320px;margin:0 auto;padding:0 24px}

  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
    border-radius:var(--radius);font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;
    padding:16px 32px;min-height:48px;border:1px solid transparent;
    transition:transform .18s ease,background-color .18s ease,border-color .18s ease,color .18s ease;
  }
  .btn:active{transform:scale(.98)}
  .btn:disabled{opacity:.45;cursor:not-allowed}
  .btn-primary{background:var(--accent);color:var(--bg)}
  .btn-primary:hover{background:var(--surface)}
  .btn-light{background:var(--bg);color:var(--ink)}
  .btn-light:hover{background:var(--gray)}
  .btn-ghost{background:transparent;color:var(--bg);border-color:color-mix(in srgb,var(--bg) 55%,transparent)}
  .btn-ghost:hover{background:var(--bg);color:var(--ink)}
  .btn-ghost-dark{background:transparent;color:var(--ink);border-color:var(--ink)}
  .btn-ghost-dark:hover{background:var(--ink);color:var(--bg)}
  .btn-full{width:100%}

  .announce{background:var(--ink);color:var(--bg);text-align:center;font-size:12px;font-weight:600;letter-spacing:.1em;padding:10px 16px}
  .announce strong{font-weight:900}

  /* Réserve la place de la coque avant son injection JavaScript. Sans cette
     hauteur, le catalogue descendait après son premier affichage et créait
     un fort décalage visuel (CLS). */
  .shell-reserve{height:112px;background:var(--bg)}

  .nav{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:var(--border-w) solid var(--line)}
  .nav-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:14px 24px;max-width:1320px;margin:0 auto}
  .nav-left,.nav-right{display:flex;align-items:center;gap:8px;min-width:0}
  .nav-left{justify-self:start}
  .nav-right{justify-self:end}
  .logo{font-weight:900;font-size:20px;letter-spacing:.16em;text-transform:uppercase;line-height:1;white-space:nowrap;min-width:0;max-width:100%;min-height:44px;display:flex;flex-direction:column;justify-content:center}
  .logo span{display:block;font-size:9px;font-weight:700;letter-spacing:.42em;color:var(--muted);margin-top:3px}
  .nav-links{display:flex;gap:26px}
  .nav-links a{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);padding:6px 0;min-height:44px;display:inline-flex;align-items:center;position:relative;background:none;border:none}
  .nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--accent);transition:width .22s ease}
  .nav-links a:hover::after{width:100%}
  .icon-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--radius);border:var(--border-w) solid transparent;background:transparent;color:var(--ink);position:relative}
  .icon-btn:hover{background:var(--gray);border-color:var(--line)}
  .icon-btn svg{width:22px;height:22px}
  .cart-count{position:absolute;top:4px;right:4px;min-width:18px;height:18px;padding:0 5px;background:var(--accent);color:var(--bg);border-radius:var(--radius);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
  .cart-count[data-hidden="true"]{display:none}
  .burger{display:none}
  .mobile-menu{display:none;border-top:var(--border-w) solid var(--line);padding:8px 24px 20px;background:var(--bg)}
  .mobile-menu a{display:block;padding:14px 4px;font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-bottom:var(--border-w) solid var(--line);background:none;border-top:none;border-left:none;border-right:none}
  .mobile-menu a:last-of-type{border-bottom:none}
  .mobile-menu[data-open="true"]{display:block}

  .hero{position:relative;min-height:88vh;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink)}
  .hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--ink) 0%,color-mix(in srgb,var(--ink) 45%,transparent) 40%,transparent 78%)}
  .hero-content{position:relative;z-index:2;width:100%;padding:64px 0 72px}
  .hero-kicker{display:inline-flex;align-items:center;gap:10px;color:var(--bg);font-size:12px;font-weight:700;letter-spacing:.34em;text-transform:uppercase;margin-bottom:20px}
  .hero-kicker::before{content:"";width:34px;height:1px;background:var(--bg);opacity:.7}
  .hero h1{color:var(--bg);font-size:clamp(2.6rem,8.2vw,7rem);font-weight:900;line-height:.98;text-transform:uppercase;letter-spacing:-.01em;max-width:14ch}
  .hero-sub{color:color-mix(in srgb,var(--bg) 82%,transparent);font-size:clamp(1rem,1.6vw,1.2rem);max-width:44ch;margin:24px 0 32px;font-weight:400}
  .hero-actions{display:flex;flex-wrap:wrap;gap:12px}
  .hero-badge{position:absolute;top:24px;right:24px;z-index:2;background:color-mix(in srgb,var(--ink) 72%,transparent);backdrop-filter:blur(8px);color:var(--bg);border:var(--border-w) solid color-mix(in srgb,var(--bg) 30%,transparent);border-radius:var(--radius);padding:10px 14px;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase}

  .marquee{background:var(--ink);color:var(--bg);overflow:hidden;padding:14px 0;border-top:1px solid var(--surface)}
  .marquee-track{display:flex;gap:48px;white-space:nowrap;animation:scroll 28s linear infinite;width:max-content}
  .marquee-track span{font-size:13px;font-weight:700;letter-spacing:.3em;text-transform:uppercase}
  .marquee-track em{font-style:normal;color:var(--muted)}
  @keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  .section{padding:96px 0}
  .sec-head{margin-bottom:48px}
  .sec-kicker{font-size:12px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:12px;margin-bottom:16px}
  .sec-kicker::before{content:"";width:28px;height:1px;background:var(--ink)}
  .sec-title{font-size:clamp(1.9rem,4.2vw,3.2rem);font-weight:900;text-transform:uppercase;letter-spacing:-.01em;line-height:1.04}
  .sec-sub{color:var(--muted);max-width:52ch;margin-top:14px;font-size:1.05rem}

  .cats{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
  .cat-card{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--gray);aspect-ratio:4/3;min-height:0;display:block;border:none}
  .cat-card.brand-card{background:var(--ink)}
  .cat-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease;filter:grayscale(1)}
  .cat-card:hover img{transform:scale(1.05)}
  .cat-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--ink) 4%,transparent 55%)}
  .cat-body{position:absolute;left:20px;bottom:18px;right:20px;z-index:2;color:var(--bg)}
  .cat-body .cat-label{font-size:18px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
  .cat-body .cat-link{display:inline-flex;align-items:center;gap:8px;margin-top:6px;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
  .cat-body .cat-link svg{width:14px;height:14px;transition:transform .2s ease}
  .cat-card:hover .cat-link svg{transform:translateX(4px)}
  .cat-card.brand-card{background:#fff;border:var(--border-w) solid var(--line)}
  .cat-card.brand-card::after{background:linear-gradient(to top,rgba(255,255,255,.98) 0%,rgba(255,255,255,.72) 38%,transparent 62%)}
  .cat-card.brand-card img.brand-logo{inset:20% 12% auto;width:76%;height:34%;object-fit:contain;filter:none;transform:none}
  .cat-card.brand-card:hover img.brand-logo{transform:scale(1.03)}
  .cat-card.brand-card .cat-body{color:var(--ink)}
  /* Même principe que les bandes : un bord et un lien à la couleur de la
     maison. Douze vignettes blanches alignées ne se distinguaient que par
     leur logo, trop petit pour être vu au défilement. */
  .cat-card.brand-card{border-top:3px solid var(--accent-marque,var(--line))}
  .cat-card.brand-card img.brand-cover{object-position:right center;filter:none}
  .cat-card.brand-card .cat-link{color:var(--accent-marque,var(--ink))}
  .cat-card.brand-card::before{content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(to top,color-mix(in srgb,var(--accent-marque,#ffffff) 12%,transparent) 0%,transparent 55%)}
  .brand-wordmark{position:absolute;left:10%;right:10%;top:34%;text-align:center;color:var(--ink);font-size:clamp(1.3rem,3vw,2.2rem);font-weight:900;letter-spacing:.08em;text-transform:uppercase}

  /* Bandeau de marque. Une vignette qui dit « Louis Vuitton » ne dit pas ce
     qu'il y a derrière : deux paires ou vingt ? Le bandeau annonce la marque,
     la rangée en dessous montre les modèles. Le même composant carte est
     réutilisé tel quel — aucune seconde définition à maintenir. */
  .mband{margin-bottom:52px}
  /* Rangée des modèles dont la marque n'a pas de bandeau : un simple titre
     suffit à les rattacher, sans couverture ni identité de maison — elles
     n'en ont pas assez pour porter une section entière. */
  .mband-simple-titre{font-size:15px;font-weight:800;letter-spacing:.16em;
    text-transform:uppercase;color:var(--muted);margin:0 0 14px;padding-top:4px;
    border-top:var(--border-w) solid var(--line)}
  .mband-top{position:relative;display:block;overflow:hidden;
    border-radius:var(--radius);background:var(--ink);aspect-ratio:16/5;
    text-decoration:none;color:var(--bg)}
  .mband-top img{position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;filter:grayscale(1);transition:transform .5s ease}
  .mband-top:hover img{transform:scale(1.04)}
  .mband-top{background:#fff;color:var(--ink);border:var(--border-w) solid var(--line)}
  .mband-top img.brand-logo{inset:20% auto auto 28px;width:42%;height:34%;object-fit:contain;object-position:left center;filter:none;transform:none}
  .mband-top:hover img.brand-logo{transform:scale(1.02)}
  .mband-top>.brand-wordmark{left:28px;right:auto;top:28%;text-align:left}
  /* Dégradé latéral : le texte reste lisible quelle que soit la photo, sans
     avoir à imposer au commerçant une image « avec du vide à gauche ». */
  .mband-top::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(90deg,rgba(0,0,0,.76) 0%,rgba(0,0,0,.5) 38%,rgba(0,0,0,.08) 66%,transparent 78%)}
  /* Filet vertical aux couleurs de la maison : à hauteur d'œil dans une
     liste, c'est ce qui distingue une bande d'une autre avant même le nom. */
  .mband-top{border-left:4px solid var(--accent-marque,var(--line))}
  /* Le motif de la maison occupe le fond de la bande. Il n'imite aucun logo :
     il reprend le geste graphique — damier, chevrons, rayures — dans la
     couleur de la marque, pour que l'œil distingue deux bandes de loin. */
  .mband-cover,.brand-cover{position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:right center;filter:none;transform:none;z-index:0}
  .mband-top img.mband-cover{filter:none}
  .mband-top:hover .mband-cover,.brand-card:hover .brand-cover{transform:none}
  .mband-name{color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.25)}
  .mband-go{color:#fff;border-bottom:2px solid var(--accent-marque,#fff)}
  .mband-in{position:relative;z-index:2;height:100%;padding:24px 28px;
    display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
  .mband-tag{display:block;font-size:11.5px;font-weight:800;letter-spacing:.2em;
    text-transform:uppercase;color:rgba(255,255,255,.86);margin-bottom:8px;padding-top:7px;
    border-top:2px solid var(--accent-marque,#fff);
    width:fit-content;max-width:100%;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mband-name{font-size:32px;font-weight:900;letter-spacing:-.02em;line-height:1.05}
  .mband-go{flex:none;display:inline-flex;align-items:center;gap:8px;
    font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
    padding-bottom:4px}
  .mband-go svg{width:15px;height:15px;transition:transform .2s ease}
  .mband-top:hover .mband-go svg{transform:translateX(4px)}
  /* Rangée horizontale : montrer quatre modèles sans pousser la marque
     suivante trois écrans plus bas. */
  .mrow{display:grid;grid-auto-flow:column;grid-auto-columns:236px;
    gap:16px;margin-top:18px;overflow-x:auto;scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px}
  .mrow::-webkit-scrollbar{display:none}
  .mrow>*{scroll-snap-align:start}
  .mrow-fixe{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));
    grid-auto-columns:auto;overflow:visible}
  /* La carte de continuité est masquée sur ordinateur : le bandeau porte déjà
     son appel à l'action. Sur téléphone elle prolonge naturellement le geste
     de défilement, sans ajouter une pilule sous la rangée. */
  .mrow-more-card{display:none}
  /* Les marques restantes gardent la grille de vignettes : mettre onze
     bandeaux bout à bout ferait une page interminable. */
  .marques-reste{margin-top:8px}
  .marques-reste .sec-kicker{display:block;margin-bottom:16px}

  /* Page répertoire des marques : grille réelle, jamais carrousel. Deux
     colonnes restent visibles sur téléphone pour que toutes les maisons se
     découvrent en quelques gestes verticaux. */
  .brands-page{padding-bottom:48px}
  .brands-page-head{margin-bottom:32px}
  .brands-directory{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .home-brands{margin-top:0}
  .home-brands-actions{display:flex;justify-content:center;margin-top:28px}
  .brand-directory-card{position:relative;display:block;overflow:hidden;aspect-ratio:4/3;
    border-radius:var(--radius);background:var(--ink);color:#fff;text-decoration:none;
    border-top:3px solid var(--accent-marque,var(--line))}
  .brand-directory-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    object-position:right center;transition:transform .45s ease}
  .brand-directory-card:hover img{transform:scale(1.035)}
  .brand-directory-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.82),rgba(0,0,0,.04) 72%)}
  .brand-directory-copy{position:absolute;z-index:2;left:18px;right:48px;bottom:16px}
  .brand-directory-copy>span{display:block;font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.76);margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .brand-directory-copy strong{display:block;font-size:clamp(17px,2vw,24px);line-height:1.04;text-transform:uppercase;letter-spacing:-.01em}
  .brand-directory-card>svg{position:absolute;z-index:2;right:18px;bottom:18px;width:18px;height:18px;transition:transform .2s ease}
  .brand-directory-card:hover>svg{transform:translateX(4px)}

  /* Logos uniquement sur la page Toutes les marques. Les cartes photo de
     l'accueil restent intactes. */
  .brands-page .brands-directory{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  .brand-logo-card{position:relative;display:flex;min-width:0;aspect-ratio:5/3;
    flex-direction:column;align-items:center;justify-content:center;gap:15px;
    overflow:hidden;padding:20px 16px 15px;border:1px solid #e3e1dd;
    border-radius:var(--radius);background:#faf9f7;color:var(--ink);
    transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
  .brand-logo-card:hover{transform:translateY(-2px);border-color:#aaa59d;
    box-shadow:0 10px 30px rgba(17,17,17,.07)}
  .brand-logo-card:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
  #brandsDirectory:empty{min-height:max(560px,75vh)}
  .brand-logo-visual{position:relative;display:flex;align-items:center;justify-content:center;
    width:100%;height:54px;overflow:hidden;padding:4px 8px}
  .brand-logo-img{position:static;display:block;width:auto;max-width:88%;height:auto;max-height:46px;
    object-fit:contain;object-position:center;mix-blend-mode:multiply}
  .brand-logo-fallback{font-size:clamp(16px,1.7vw,22px);line-height:1;text-align:center;
    text-transform:uppercase;letter-spacing:-.02em}
  .brand-logo-action{font-size:10.5px;font-weight:800;line-height:1;letter-spacing:.16em;
    text-transform:uppercase;color:#77736d}
  .brand-logo-card[data-brand="hermes"] .brand-logo-img{max-width:88%;max-height:44px}
  .brand-logo-card[data-brand="louis-vuitton"] .brand-logo-img,
  .brand-logo-card[data-brand="givenchy"] .brand-logo-img{max-width:82%}
  .brand-logo-card[data-brand="dior"] .brand-logo-img{max-width:54%;max-height:40px}
  .brand-logo-card[data-brand="hugo"] .brand-logo-img{max-width:58%;max-height:46px}
  .brand-logo-card[data-brand="tommy-jeans"] .brand-logo-img{max-width:88%;max-height:38px}
  /* Les fichiers raster ont été débarrassés uniquement de leur marge blanche.
     Ils restent tous en `contain` : aucun bord du logo ne peut disparaître
     quand la largeur de la carte change. */
  .brand-logo-card[data-brand="balenciaga"] .brand-logo-img,
  .brand-logo-card[data-brand="moncler"] .brand-logo-img,
  .brand-logo-card[data-brand="ea7"] .brand-logo-img{position:static;width:auto;height:auto;
    max-width:92%;max-height:44px;object-fit:contain}
  .catalogue-gateway-section{padding-top:16px}
  .catalogue-gateway{position:relative;display:block;overflow:hidden;min-height:360px;border-radius:var(--radius);color:#fff;text-decoration:none;background:var(--ink)}
  .catalogue-gateway>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .5s ease}
  .catalogue-gateway:hover>img{transform:scale(1.025)}
  .catalogue-gateway-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.82),rgba(0,0,0,.38) 56%,rgba(0,0,0,.08))}
  .catalogue-gateway-content{position:absolute;z-index:2;inset:0;padding:34px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
  .catalogue-gateway-copy{display:block;max-width:560px}
  .catalogue-gateway-copy .sec-kicker{color:rgba(255,255,255,.78);margin-bottom:12px}
  .catalogue-gateway-copy strong{display:block;font-size:clamp(30px,5vw,54px);line-height:1;text-transform:uppercase}
  .catalogue-gateway-copy>span:last-child{display:block;margin-top:12px;color:rgba(255,255,255,.82)}
  .catalogue-gateway-action{flex:none;display:inline-flex;align-items:center;gap:9px;padding-bottom:5px;border-bottom:2px solid #fff;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
  .catalogue-gateway-action svg{width:17px;height:17px;transition:transform .2s ease}
  .catalogue-gateway:hover .catalogue-gateway-action svg{transform:translateX(4px)}

  @media (max-width:760px){
    .brands-page{padding-top:52px;padding-bottom:32px}
    .brands-page-head{margin-bottom:24px}
    .brands-directory{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
    .brands-page .brands-directory{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
    .brand-logo-card{aspect-ratio:5/3;padding:15px 10px 12px;gap:10px}
    .brand-logo-visual{height:44px}
    .brand-logo-img{max-height:34px;max-width:88%}
    .brand-logo-card[data-brand="hermes"] .brand-logo-img,
    .brand-logo-card[data-brand="dior"] .brand-logo-img,
    .brand-logo-card[data-brand="hugo"] .brand-logo-img,
    .brand-logo-card[data-brand="balenciaga"] .brand-logo-img,
    .brand-logo-card[data-brand="moncler"] .brand-logo-img,
    .brand-logo-card[data-brand="ea7"] .brand-logo-img,
    .brand-logo-card[data-brand="tommy-jeans"] .brand-logo-img{max-width:92%;max-height:34px}
    .brand-logo-action{font-size:10px;letter-spacing:.12em}
    .brand-directory-card{aspect-ratio:4/3}
    .brand-directory-copy{left:12px;right:30px;bottom:11px}
    .brand-directory-copy>span{display:none}
    .brand-directory-copy strong{font-size:13px;letter-spacing:0}
    .brand-directory-card>svg{right:10px;bottom:11px;width:14px;height:14px}
    .catalogue-gateway-section{padding-top:8px}
    .catalogue-gateway{min-height:310px}
    .catalogue-gateway-content{padding:22px;display:block}
    .catalogue-gateway-action{position:absolute;left:22px;bottom:22px}
    .catalogue-gateway-copy strong{font-size:34px}
    .catalogue-gateway-copy>span:last-child{font-size:14px;max-width:28ch}
    /* Une marque forme un bloc lisible : la pause après le CTA évite que la
       bannière suivante ait l'air de lui appartenir. */
    .mband{margin-bottom:48px}
    .mband-top{aspect-ratio:16/9}
    .mband-in{padding:18px 18px;align-items:flex-end}
    .mband-name{font-size:24px}
    /* Le libellé « Voir les 4 modèles » passerait à la ligne : la bannière
       entière est déjà cliquable, la flèche suffit à le dire. */
    .mband-go span{display:none}
    /* La bannière, ses cartes et son CTA partagent exactement les mêmes
       gouttières. On garde le swipe, mais plus le faux décalage vers le bord. */
    .mrow{grid-auto-columns:168px;gap:12px;margin-top:16px;
      margin-left:0;margin-right:0;padding-left:0;padding-right:0;
      scroll-padding-inline:0;overscroll-behavior-inline:contain}
    /* Sur téléphone, quatre colonnes donneraient des cartes illisibles :
       la rangée redevient un défilement au doigt. */
    .mrow-fixe{grid-auto-flow:column;grid-template-columns:none;
      grid-auto-columns:168px;overflow-x:auto}
    /* La dernière carte est une destination, pas un bouton ajouté sous la
       marque. Même largeur que les produits, cible intégrale et léger contraste
       pour annoncer la suite sans voler leur rôle aux chaussures. */
    .mrow-more-card{display:flex;grid-column:auto;align-self:stretch;min-height:100%;
      flex-direction:column;align-items:center;justify-content:center;gap:12px;
      padding:20px 14px;border:1px solid #dfddd8;border-radius:var(--radius);
      background:#faf9f7;color:var(--ink);text-align:center;font-size:11px;
      font-weight:800;letter-spacing:.07em;line-height:1.45;text-transform:uppercase;
      transition:background .18s ease,color .18s ease,border-color .18s ease}
    .mrow-more-card:active{background:var(--ink);border-color:var(--ink);color:var(--bg)}
    .mrow-more-card strong{font-size:14px}
    .mrow-more-icon{width:48px;height:48px;display:flex;align-items:center;
      justify-content:center;border:1px solid currentColor;border-radius:50%}
    .mrow-more-icon svg{width:21px;height:21px}
  }

  .tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px}
  .tab{min-height:44px;padding:10px 18px;border-radius:var(--radius);border:var(--border-w) solid var(--line);background:var(--bg);color:var(--ink);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;transition:all .16s ease}
  .tab:hover{border-color:var(--ink)}
  .tab.active{background:var(--ink);border-color:var(--ink);color:var(--bg)}
  /* Repli sans JavaScript. Toute la boutique est construite par le script :
     sur un navigateur en mode économie de données — courant à Bamako — la
     page ne montrerait qu'un squelette muet. Ce bloc dit quoi faire, et
     laisse un chemin de commande qui n'a besoin de rien. */
  .noscript-msg{max-width:560px;margin:64px auto;padding:0 20px;text-align:center}
  .noscript-msg h1{font-size:24px;font-weight:900;margin-bottom:16px}
  .noscript-msg p{font-size:15px;line-height:1.6;color:var(--muted);margin-bottom:14px}
  .noscript-cta{display:inline-block;min-height:48px;padding:14px 26px;
    background:var(--ink);color:var(--bg);border-radius:var(--radius);
    font-weight:800;letter-spacing:.06em;text-decoration:none}

  /* Barre des pointures. Plus discrète que les onglets de catégorie — c'est
     un affinage, pas une navigation — mais assez grande pour le pouce :
     44 px de haut, jamais moins. */
  .sizebar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:-18px 0 30px}
  .sizebar-label{font-size:11.5px;font-weight:800;letter-spacing:.14em;
    text-transform:uppercase;color:var(--muted);margin-right:4px}
  .size-chip{min-height:44px;min-width:44px;padding:8px 14px;border-radius:var(--radius);
    border:var(--border-w) solid var(--line);background:var(--bg);color:var(--ink);
    font-size:13px;font-weight:700;transition:all .16s ease}
  .size-chip:hover{border-color:var(--ink)}
  .size-chip.active{background:var(--ink);border-color:var(--ink);color:var(--bg)}
  /* Barre de tri du catalogue. Une boutique de chaussures se parcourt par
     pointure d'abord : la question n'est pas « qu'avez-vous » mais « qu'avez-
     vous à ma taille ». Les critères vivent donc ensemble dans un panneau
     unique — pointure, marque, coloris, prix — au lieu d'être éparpillés
     entre la page et une rangée isolée. */
  .cat-tools{margin:-14px 0 26px;display:flex;flex-direction:column;gap:12px}
  body[data-page="catalogue"] #audienceTabs:empty{min-height:54px}
  body[data-page="catalogue"] #catTools[hidden]{display:block;min-height:70px;visibility:hidden;pointer-events:none}
  body[data-page="catalogue"] #grid:empty{min-height:max(720px,100vh)}
  .cat-tools-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
  .cat-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;
    border:var(--border-w) solid var(--line);border-radius:var(--radius);background:var(--bg);
    color:var(--ink);font-size:13.5px;font-weight:800;letter-spacing:.02em}
  .cat-btn svg{width:18px;height:18px}
  .cat-btn:hover{border-color:var(--ink)}
  .cat-btn[aria-expanded="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
  .cat-count{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--accent);
    color:#fff;font-size:11.5px;font-weight:800;display:inline-grid;place-items:center}
  /* Sans cette ligne, le fond gris du compteur reste affiché avec un zéro :
     l'attribut hidden ne pèse rien face à un display explicite. */
  .cat-count[hidden]{display:none}
  .cat-btn[aria-expanded="true"] .cat-count{background:var(--bg);color:var(--ink)}
  .cat-sort{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 6px 0 14px;
    border:var(--border-w) solid var(--line);border-radius:var(--radius);background:var(--bg)}
  .cat-sort>span{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .cat-sort select{border:0;background:transparent;color:var(--ink);font:inherit;font-size:13.5px;
    font-weight:700;padding:10px 8px;min-height:44px}
  .cat-sort select:focus{outline:2px solid var(--ink);outline-offset:2px;border-radius:8px}
  .cat-total{margin:0 0 0 auto;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
  /* Le panneau se replie en hauteur plutôt que de disparaître d'un coup :
     l'œil suit le mouvement et comprend d'où viennent les critères. Une
     grille à une seule rangée passe de 0fr à 1fr — la seule façon d'animer
     une hauteur qu'on ne connaît pas d'avance. */
  .cat-panel-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease}
  .cat-panel-wrap>.cat-panel{overflow:hidden;min-height:0;border-width:0;padding-top:0;padding-bottom:0;
    opacity:0;transition:opacity .2s ease,padding .28s ease,border-width .28s ease}
  .cat-panel-wrap[data-open="true"]{grid-template-rows:1fr}
  .cat-panel-wrap[data-open="true"]>.cat-panel{border-width:var(--border-w);padding-top:18px;padding-bottom:18px;opacity:1}
  .cat-panel{border:0 solid var(--line);border-radius:var(--radius);padding:0 18px;
    display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));align-content:start}
  .cat-done{grid-column:1/-1;justify-self:start;min-height:44px;padding:10px 20px;border-radius:var(--radius);
    background:var(--ink);color:var(--bg);font-size:13.5px;font-weight:800}
  .cat-done:hover{opacity:.88}
  .cat-group h4{margin:0 0 10px;font-size:11.5px;font-weight:800;letter-spacing:.14em;
    text-transform:uppercase;color:var(--muted)}
  .cat-opts{display:flex;flex-wrap:wrap;gap:8px}
  .cat-opt{min-height:44px;padding:9px 14px;border-radius:var(--radius);
    border:var(--border-w) solid var(--line);background:var(--bg);color:var(--ink);
    font-size:13px;font-weight:700}
  .cat-opt:hover{border-color:var(--ink)}
  .cat-opt[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
  .cat-opt .cat-n{opacity:.55;font-weight:600;margin-left:6px;font-variant-numeric:tabular-nums}
  .cat-opt .cat-n::before{content:"("}
  .cat-opt .cat-n::after{content:")"}
  .cat-actives{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
  .cat-tag{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:7px 14px;
    border-radius:999px;background:var(--gray);color:var(--ink);font-size:12.5px;font-weight:700}
  .cat-tag b{font-weight:800}
  .cat-tag span{font-size:15px;line-height:1;opacity:.6}
  .cat-tag:hover span{opacity:1}
  .cat-clear{min-height:40px;padding:7px 14px;border-radius:999px;background:transparent;
    border:var(--border-w) solid var(--line);color:var(--muted);font-size:12.5px;font-weight:700}
  .cat-clear:hover{border-color:var(--ink);color:var(--ink)}
  .pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .grid-more{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;
    gap:8px;padding:24px 0 8px}
  .grid-more button{min-height:48px;padding:12px 26px;border:var(--border-w) solid var(--ink);
    border-radius:999px;background:var(--bg);color:var(--ink);font-size:13px;font-weight:800;
    letter-spacing:.08em;text-transform:uppercase}
  .grid-more button:hover,.grid-more button:focus-visible{background:var(--ink);color:var(--bg)}
  .grid-more span{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
  /* Trois rangées nommées : le bouton occupe la zone « media » sur
     ordinateur (survol) et sa propre rangée sur écran tactile. */
  .pcard{position:relative;display:grid;grid-template-areas:"media" "info";
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto 1fr;min-width:0}
  .pmedia{grid-area:media;position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:var(--radius);background:var(--gray)}
  .pmedia img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
    transition:opacity .22s ease,transform .5s ease}
  .pmedia img.is-loaded{opacity:1}
  .pmedia::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(105deg,transparent 36%,rgba(255,255,255,.72) 48%,transparent 60%);
    background-size:220% 100%;animation:photo-load 1.15s linear infinite}
  .pmedia:has(img.is-loaded)::after{display:none}
  @keyframes photo-load{to{background-position:-220% 0}}
  body:not(.product-visuals-ready) .pmedia::before,
  body:not(.product-visuals-ready) .pv-media::before{
    content:"Photo produit bientôt";position:absolute;inset:0;display:flex;
    align-items:center;justify-content:center;padding:24px;text-align:center;
    color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.16em;
    text-transform:uppercase;background:var(--gray)}
  body:not(.product-visuals-ready) .pmedia img,
  body:not(.product-visuals-ready) .pv-media img,
  body:not(.product-visuals-ready) .cart-item img,
  body:not(.product-visuals-ready) .xsell-item img,
  body:not(.product-visuals-ready) .s-thumb{visibility:hidden}
  body:not(.product-visuals-ready) .pv-media{position:relative}
  body:not(.product-visuals-ready) .pv-media::before{z-index:1}
  body:not(.product-visuals-ready) .pv-thumbs{display:none}
  .pcard:hover .pmedia img{transform:scale(1.04)}
  /* La réserve laissée au bouton favori était calée au pixel près sur la
     police Inter. Chargée depuis un service externe, elle arrive en retard
     ou pas du tout sur un réseau lent : le texte de secours, plus large,
     transformait « Nouveau » en « Nouve… ». */
  .badge{position:absolute;top:12px;left:12px;z-index:2;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:var(--accent);color:var(--bg);border-radius:var(--radius);padding:6px 12px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
  .badge-sale{background:var(--ink)}
  /* Paire épuisée : la photo pâlit et un bandeau barre le bas de l'image.
     Le voile fait le travail avant la lecture — la carte se lit comme
     éteinte en balayant la grille — et le bandeau nomme la raison. Les deux
     laissent passer le clic : la fiche reste ouvrable, et le bouton
     « Me prévenir » vaut mieux qu'un client qui repart. */
  .pout-voile{position:absolute;inset:0;z-index:2;pointer-events:none;background:rgba(255,255,255,.45)}
  .pout{position:absolute;left:0;right:0;bottom:0;z-index:3;pointer-events:none;
    background:var(--ink);color:var(--bg);text-align:center;padding:7px 0;
    font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
  .pcard.is-out .pmedia img{filter:grayscale(.6)}
  /* Le cœur suit la ligne de la marque au lieu de flotter sur la photo :
     il ne masque plus la chaussure, et sa cible reste franche au pouce. */
  /* « Louis Vuitton » s'affichait « Louis Vuit… » : le cœur prenait
     quarante-quatre pixels de large à la marque la plus désirable du
     catalogue. Il n'en occupe plus que trente ; sa cible tactile garde ses
     quarante-quatre pixels par un débordement invisible. */
  .wish{flex:none;width:30px;height:44px;margin:-11px -6px -11px 0;border-radius:var(--radius);
    position:relative;background:transparent;border:0;display:inline-flex;
    align-items:center;justify-content:center}
  /* La cible débordait de sept pixels à droite, donc du bord de la carte la
     plus à droite de la grille. Elle s'étend vers l'intérieur : quarante-
     quatre pixels de large sans dépasser de la carte. */
  .wish::after{content:"";position:absolute;top:0;bottom:0;left:-14px;right:0}
  .wish svg{width:18px;height:18px;color:var(--ink)}
  .wish:hover svg{color:var(--muted)}
  /* Aimé : le cœur se remplit. Plus de pastille ni de cadre — dans une
     ligne de texte, un bouton encadré pèse plus lourd que la marque. */
  .wish[data-on="true"] svg{color:var(--ink);fill:var(--ink)}
  .pinfo{grid-area:info;padding:14px 2px 0;display:flex;flex-direction:column;gap:4px}
  .pinfo-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:18px}
  .pinfo-head .pbrand{flex:1;min-width:0}
  /* Deux lignes réservées en permanence : c'est ce qui aligne la grille.
     Sans cela, neuf noms sur vingt passent à la ligne sur téléphone et
     produisent quatre hauteurs de carte différentes. */
  /* La marque, au-dessus du nom. Une seule ligne coupée à la largeur de la
     carte : « EA7 Emporio Armani » ne doit pas rajouter une hauteur que les
     autres cartes n'ont pas. */
  .pbrand{font-size:11.5px;font-weight:800;letter-spacing:.14em;
    text-transform:uppercase;color:var(--ink);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:1.4em}
  /* Deux lignes, jamais trois : la troisième était coupée en son milieu et
     laissait une bande de lettres tronquées sous le titre. La hauteur est
     bornée en plus du découpage, pour les navigateurs qui l'ignorent. */
  /* Deux lignes de texte au maximum, mais une zone de touche d'au moins
     44 px : le titre est un lien, et deux lignes serrées n'en font que 39. */
  /* Le nom n'est plus affiché mais reste dans la page : les moteurs de
     recherche le lisent dans le lien, les lecteurs d'écran l'annoncent. Il
     est retiré du parcours de tabulation — un lien qu'on atteint au clavier
     sans jamais le voir est un piège, et la photo juste au-dessus mène déjà
     à la même fiche. */
  .pname-sr{position:absolute;top:0;left:0;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  /* Le délai de livraison remplace la catégorie : un argument à la place
     d'une redite. Le texte vient des réglages de la boutique. */
  .pdelivery{font-size:11.5px;color:var(--muted);text-transform:uppercase;
    letter-spacing:.12em;font-weight:700;min-height:2.8em;line-height:1.4}
  /* Apercus reels des coloris : assez grands pour reconnaitre la matiere,
     assez legers pour ne pas transformer la grille en galerie complete. */
  .pcolors{display:flex;align-items:center;justify-content:space-between;gap:8px;
    min-height:38px;margin-top:3px}
  .pcolors-count{font-size:10.5px;font-weight:800;letter-spacing:.1em;
    text-transform:uppercase;color:var(--muted);white-space:nowrap}
  .pcolors-list{display:flex;align-items:center;justify-content:flex-end;min-width:0}
  .pcolor-photo{display:block;width:31px;height:36px;overflow:hidden;background:var(--bg);
    border:1px solid var(--line);border-radius:3px;margin-left:-5px}
  .pcolor-photo:first-child{margin-left:0}
  .pcolor-photo img{display:block;width:100%;height:100%;object-fit:cover}
  .pcolor-more{display:flex;align-items:center;justify-content:center;min-width:24px;height:36px;
    padding-left:5px;font-size:10px;font-weight:800;color:var(--muted)}
  /* Le prix tient la ligne, le cœur en occupe le bout : plus rien ne
     dispute sa largeur au nom de la marque. */
  /* Le prix se cale en bas de carte : sans le bouton qui l'y tenait, une
     carte sans coloris remontait son prix de quarante-cinq pixels et le
     désalignait de sa voisine. */
  .pprix{display:flex;align-items:center;justify-content:space-between;gap:8px;
    margin-top:auto;padding-top:4px}
  .pprix .price{margin-top:0;flex:1;min-width:0}
  .price{display:flex;align-items:baseline;gap:8px;margin-top:4px;font-weight:800;font-size:15px}
  .price .old{color:var(--muted);font-weight:400;text-decoration:line-through;font-size:13px;white-space:nowrap}
  .price .sale{color:var(--ink);white-space:nowrap}
  .none-msg{grid-column:1/-1;text-align:center;color:var(--muted);padding:40px 8px;font-size:14px}

  .cbanner{position:relative;min-height:520px;display:flex;align-items:center;overflow:hidden;background:var(--ink)}
  .cbanner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .cbanner::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ink) 0%,color-mix(in srgb,var(--ink) 55%,transparent) 48%,transparent 78%)}
  .cbanner-content{position:relative;z-index:2;max-width:520px}
  .cbanner .sec-kicker{color:color-mix(in srgb,var(--bg) 72%,transparent)}
  /* Couleur de marque, bornée au filet du sur-titre. */
  .sec-kicker.has-accent::before{background:var(--accent-coll, var(--ink));width:44px;height:2px}
  .cbanner .sec-kicker::before{background:var(--bg)}
  .cbanner h1,.cbanner h2{color:var(--bg);font-size:clamp(2rem,5vw,3.6rem);font-weight:900;text-transform:uppercase;line-height:1;letter-spacing:-.01em}
  .cbanner p{color:color-mix(in srgb,var(--bg) 80%,transparent);margin:18px 0 30px;max-width:40ch}
  .cbanner-actions{display:flex;gap:12px;flex-wrap:wrap}
  .cbanner.has-brand-logo{background:#fff;border-bottom:var(--border-w) solid var(--line)}
  .cbanner.has-brand-logo::after{background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.94) 48%,rgba(255,255,255,.5) 78%,transparent 100%)}
  .cbanner.has-brand-logo img.brand-logo{inset:18% 6% 18% auto;width:42%;height:64%;object-fit:contain;filter:none}
  .cbanner.has-brand-logo .sec-kicker,.cbanner.has-brand-logo h1,.cbanner.has-brand-logo h2,.cbanner.has-brand-logo p{color:var(--ink)}
  .cbanner.has-brand-logo .sec-kicker::before{background:var(--ink)}
  .cbanner.has-brand-cover img{object-position:right center}
  .brand-status{font-size:11px!important;letter-spacing:.12em;text-transform:uppercase;opacity:.82;margin:-18px 0 28px!important}

  .about{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
  .about-media{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--gray);aspect-ratio:4/5}
  .about-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .about-num{font-size:12px;font-weight:800;letter-spacing:.2em;color:var(--muted);margin-bottom:8px}
  .pillar{display:flex;gap:18px;padding:20px 0;border-top:var(--border-w) solid var(--line)}
  .pillar:last-of-type{border-bottom:var(--border-w) solid var(--line)}
  .pillar .idx{font-weight:900;font-size:14px;color:var(--muted);min-width:28px}
  .pillar h3{font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
  .pillar p{color:var(--muted);font-size:14px;margin-top:4px}
  .about-link{margin-top:28px;min-height:44px;display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:13px;letter-spacing:.18em;text-transform:uppercase;background:none;border:none;color:var(--ink);padding:0}
  .about-link svg{width:15px;height:15px;transition:transform .2s ease}
  .about-link:hover svg{transform:translateX(4px)}

  .news{background:var(--ink);color:var(--bg);text-align:center;padding:96px 0}
  .news h2{font-size:clamp(1.9rem,4.5vw,3.4rem);font-weight:900;text-transform:uppercase;letter-spacing:-.01em;line-height:1}
  .news p{color:color-mix(in srgb,var(--bg) 75%,transparent);margin:16px auto 36px;max-width:46ch}
  .news-form{display:flex;gap:10px;max-width:520px;margin:0 auto}
  .news-form input{flex:1;min-width:0;padding:16px 18px;border-radius:var(--radius);border:1px solid color-mix(in srgb,var(--bg) 25%,transparent);background:transparent;color:var(--bg);font-family:inherit;font-size:15px;min-height:52px}
  .news-form input::placeholder{color:color-mix(in srgb,var(--bg) 55%,transparent)}
  .news-form input:focus{outline:none;border-color:var(--bg)}
  .news-note{font-size:12px;color:color-mix(in srgb,var(--bg) 50%,transparent);margin-top:14px;letter-spacing:.06em}
  .news-success{display:none;color:var(--bg);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:14px}
  .news-success[data-visible="true"]{display:block}
  .news-form[data-hidden="true"]{display:none}

  .footer{background:var(--bg);border-top:var(--border-w) solid var(--line)}
  .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding:64px 0 48px}
  .footer-brand p{color:var(--muted);max-width:34ch;margin-top:14px;font-size:14px}
  .footer-brand .footer-contact{margin-top:8px;color:var(--ink);font-size:13px;font-weight:700}
  .footer-independent{margin-top:8px!important;font-size:11px!important;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)!important}
  .social{display:flex;gap:8px;margin-top:20px}
  .social a{width:42px;height:42px;border-radius:var(--radius);border:var(--border-w) solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink);transition:all .16s ease}
  .social a:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
  .social svg{width:18px;height:18px}
  .fcol h2{font-size:12px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);margin-bottom:18px}
  .fcol li{margin-bottom:10px}
  .fcol a{font-size:14px;color:var(--muted);transition:color .16s ease;
    display:inline-flex;align-items:center;min-height:24px}
  .fcol a:hover{color:var(--ink)}
  .footer-bottom{border-top:var(--border-w) solid var(--line);padding:22px 0;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
  .footer-bottom p{font-size:13px;color:var(--muted)}
  .footer-bottom nav{display:flex;gap:22px;flex-wrap:wrap}
  .footer-bottom a{font-size:13px;color:var(--muted);background:none;border:none;padding:0;
    display:inline-flex;align-items:center;min-height:24px}
  .footer-bottom a:hover{color:var(--ink)}

  .overlay{position:fixed;inset:0;background:color-mix(in srgb,var(--ink) 55%,transparent);z-index:90;opacity:0;pointer-events:none;transition:opacity .25s ease}
  .overlay[data-open="true"]{opacity:1;pointer-events:auto}
  /* Le panier attend garé juste après le bord droit de l'écran. Chrome et
     Firefox ignorent ce qui est ainsi déplacé hors cadre ; Safari sur
     iPhone l'ajoute à la zone défilable — un glissement du doigt emportait
     le site sur le côté et découvrait la largeur du panier en blanc.
     `visibility` le retire vraiment du rendu tant qu'il est fermé, et ne
     revient qu'à l'ouverture pour ne pas couper l'animation. */
  .drawer{position:fixed;top:0;right:0;height:100%;width:min(440px,100%);background:var(--bg);z-index:100;display:flex;flex-direction:column;transform:translateX(100%);visibility:hidden;transition:transform .3s ease,visibility 0s linear .3s;box-shadow:-8px 0 30px color-mix(in srgb,var(--ink) 18%,transparent)}
  .drawer[data-open="true"]{transform:none;visibility:visible;transition:transform .3s ease,visibility 0s}
  .drawer-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:var(--border-w) solid var(--line)}
  .drawer-head h3{font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.12em}
  .drawer-body{flex:1;overflow-y:auto;padding:24px}
  .cart-item{display:grid;grid-template-columns:76px 1fr auto;gap:16px;padding:16px 0;border-bottom:var(--border-w) solid var(--line)}
  .cart-item img{width:76px;height:96px;object-fit:cover;border-radius:var(--radius);background:var(--gray)}
  .ci-name{font-size:14px;font-weight:700;line-height:1.3}
  .ci-cat{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;margin-top:2px}
  .ci-size{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;margin-top:2px}
  .ci-price{font-size:13px;font-weight:800;margin-top:6px}
  .ci-qty{display:inline-flex;align-items:center;gap:12px;border:var(--border-w) solid var(--line);border-radius:var(--radius);padding:4px 6px;margin-top:10px}
  .ci-qty button{width:44px;height:44px;border:none;background:transparent;font-size:16px;font-weight:800;color:var(--ink)}
  .ci-right{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between}
  .ci-remove{border:none;background:none;color:var(--muted);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;min-height:44px;padding:8px 0}
  .ci-remove:hover{color:var(--ink)}
  .drawer-foot{padding:24px;border-top:var(--border-w) solid var(--line)}
  .subtotal-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
  .subtotal-row span:first-child{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.14em}
  .subtotal-row strong{font-size:22px;font-weight:900}
  .drawer-foot .btn + .btn{margin-top:10px}
  .delivery-note{font-size:12px;color:var(--muted);margin-bottom:18px}
  .cart-empty{text-align:center;padding:48px 8px;color:var(--muted)}
  .cart-empty svg{width:40px;height:40px;margin:0 auto 16px;color:var(--line)}
  .cart-empty p{font-size:14px}
  .cart-empty .btn{margin-top:20px}

  .m-overlay{position:fixed;inset:0;background:color-mix(in srgb,var(--ink) 60%,transparent);z-index:130;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .25s ease}
  .m-overlay[data-open="true"]{opacity:1;pointer-events:auto}
  .modal{background:var(--bg);border-radius:var(--radius);width:min(920px,100%);max-height:92vh;overflow:auto;transform:translateY(12px);transition:transform .25s ease}
  .m-overlay[data-open="true"] .modal{transform:none}
  .modal.s-modal{width:min(560px,100%)}
  .photo-zoom{background:rgba(0,0,0,.92);padding:0}
  .photo-zoom .zoom-modal{position:relative;width:100%;height:100%;max-height:none;border-radius:0;
    background:#000;display:grid;place-items:center;overflow:hidden}
  .photo-zoom img{width:100%;height:100%;object-fit:contain}
  .zoom-close{position:absolute;top:max(12px,env(safe-area-inset-top));right:12px;z-index:2;
    background:rgba(255,255,255,.92);color:#111}
  .zoom-counter{position:absolute;left:50%;bottom:max(18px,env(safe-area-inset-bottom));z-index:2;
    transform:translateX(-50%);color:#fff;font-size:12px;font-weight:800;letter-spacing:.12em}
  .m-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:var(--border-w) solid var(--line)}
  .m-head h3{font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.12em}
  .m-body{padding:24px}

  .pv-grid{display:grid;grid-template-columns:1fr 1fr}
  .pv-media{background:var(--gray);min-height:320px;display:flex;flex-direction:column}
  .pv-main-wrap{position:relative;background:var(--gray);overflow:hidden;touch-action:pan-y}
  .pv-main{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}
  .pv-zoom-hit{position:absolute;inset:0;z-index:1;border:0;background:transparent;cursor:zoom-in}
  .pv-counter{position:absolute;right:12px;bottom:12px;z-index:2;padding:5px 8px;
    border-radius:999px;background:rgba(17,17,17,.72);color:#fff;font-size:11px;
    font-weight:800;letter-spacing:.08em;pointer-events:none}
  .pv-thumbs{display:flex;gap:8px;padding:12px;overflow-x:auto}
  .pv-thumbs button{flex-shrink:0;width:56px;height:70px;border:var(--border-w) solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--bg);padding:0;opacity:.65;transition:all .16s ease}
  .pv-thumbs button:hover{opacity:1}
  .pv-thumbs button.active{border-color:var(--ink);opacity:1}
  .pv-thumbs img{width:100%;height:100%;object-fit:cover}
  .pv-info{padding:32px;display:flex;flex-direction:column;gap:14px}
  .pv-info .pcat{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.14em}
  .pv-info h3{font-size:clamp(1.4rem,3vw,2rem);font-weight:900;letter-spacing:-.01em;line-height:1.1}
  .pv-desc{color:var(--muted);font-size:14px}
  .size-label{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
  /* Un bloc par axe : « Taille », « Pointure », « Couleur »… Le libellé vient
     des réglages, jamais du code. */
  .axe-bloc + .axe-bloc{margin-top:14px}
  .axe-bloc .size-label{margin-bottom:8px}
  .size-row{display:flex;flex-wrap:wrap;gap:8px}
  .size-btn.has-photo{width:68px;height:76px;padding:0;overflow:hidden;background:#fff;border-color:var(--line);position:relative}
  .size-btn.has-photo .choice-photo{width:100%;height:100%;display:block;object-fit:cover}
  .size-btn.has-photo.selected{background:#fff;color:var(--ink);border:2px solid var(--ink);box-shadow:0 0 0 2px #fff inset}
  .size-btn.has-photo.soldout{opacity:1;text-decoration:none}
  .size-btn.has-photo.soldout .choice-photo{opacity:.36;filter:grayscale(.35)}
  .choice-soldout{position:absolute;left:3px;right:3px;bottom:3px;z-index:2;
    padding:3px 2px;border-radius:3px;background:rgba(17,17,17,.9);color:#fff;
    font-size:8px;font-weight:900;line-height:1;letter-spacing:.08em;text-transform:uppercase}
  .size-btn.has-photo.soldout.selected .choice-soldout{background:#111;color:#fff}
  /* Libellé long : cette taille seule reprend une largeur naturelle. */
  .size-btn.size-tu{width:auto;padding:0 16px}
  .size-btn{width:56px;height:44px;padding:0;flex:0 0 auto;border:var(--border-w) solid var(--line);background:var(--bg);color:var(--ink);border-radius:var(--radius);font-weight:800;font-size:13px;letter-spacing:.04em}
  .size-btn:hover{border-color:var(--ink)}
  .size-btn.selected{background:var(--ink);border-color:var(--ink);color:var(--bg)}
  .size-btn:disabled{opacity:.4;cursor:not-allowed;text-decoration:line-through;background:var(--gray)}
  /* Taille epuisee : lisible comme indisponible, mais cliquable — c'est
     par elle qu'on accede a la liste d'attente. */
  .size-btn.soldout{color:var(--muted);background:var(--gray);text-decoration:line-through}
  .size-btn.soldout.selected{background:var(--muted);border-color:var(--muted);color:var(--bg)}
  .stock-line{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
  .stock-line strong{color:var(--ink)}
  .qty-stepper{display:inline-flex;align-items:center;gap:8px;border:var(--border-w) solid var(--line);border-radius:var(--radius);padding:2px 6px;align-self:flex-start}
  .qty-stepper button{width:44px;height:44px;border:none;background:transparent;font-size:18px;font-weight:800;color:var(--ink)}
  .qty-stepper span{font-size:14px;font-weight:800;min-width:16px;text-align:center}
  .qty-stepper button:disabled{opacity:.4;cursor:not-allowed}

  @keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.4)}100%{transform:scale(1)}}
  .cart-count[data-pop="true"]{animation:pop .38s ease}

  .co-sum{border:var(--border-w) solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:20px}
  .co-item{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:var(--border-w) solid var(--gray);font-size:14px}
  .co-item:last-child{border-bottom:none}
  .co-item small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
  .co-line{display:flex;justify-content:space-between;align-items:baseline;padding:8px 0;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.1em}
  .co-line strong{font-size:15px}
  .co-total{display:flex;justify-content:space-between;align-items:baseline;padding-top:12px;margin-top:4px;border-top:var(--border-w) solid var(--line)}
  .co-total span{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.14em}
  .co-total strong{font-size:22px;font-weight:900}
  .field{margin-bottom:14px}
  .field label{display:block;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px}
  .field input{width:100%;padding:14px 16px;border:var(--border-w) solid var(--line);border-radius:var(--radius);font-family:inherit;font-size:15px;min-height:48px;color:var(--ink)}
  .field input:focus{outline:none;border-color:var(--ink)}
  .field .hint{font-size:12px;color:var(--muted);margin-top:6px}
  .err{display:none;font-size:12px;font-weight:700;color:var(--ink);margin-top:6px}
  .err[data-show="true"]{display:block}
  .wa-note{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--muted);background:var(--gray);border-radius:var(--radius);padding:12px 14px;margin:18px 0;line-height:1.4}

  .wa-success{text-align:center;padding:6px 4px}
  .wa-success .ok{width:56px;height:56px;border-radius:var(--radius);background:var(--ink);color:var(--bg);display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
  .wa-success .ok svg{width:28px;height:28px}
  .wa-success h3{font-size:22px;font-weight:900;text-transform:uppercase;letter-spacing:.01em}
  .wa-success .ref-line{display:inline-block;margin-top:10px;font-size:13px;font-weight:800;letter-spacing:.1em;background:var(--gray);border-radius:var(--radius);padding:8px 14px}
  .wa-success p{color:var(--muted);font-size:14px;margin-top:14px}
  .wa-buttons{display:flex;flex-direction:column;gap:10px;margin-top:26px}
  .wa-msg{width:100%;border:var(--border-w) solid var(--line);border-radius:var(--radius);background:var(--gray);color:var(--ink);font-family:inherit;font-size:12px;line-height:1.5;padding:12px;margin-top:16px;resize:none;min-height:120px}

  .search-in{width:100%;padding:14px 16px;border:var(--border-w) solid var(--line);border-radius:var(--radius);font-family:inherit;font-size:15px;min-height:48px;color:var(--ink)}
  .search-in:focus{outline:none;border-color:var(--ink)}
  .search-results{margin-top:10px}
  .search-results li{border-bottom:var(--border-w) solid var(--gray)}
  .search-results li:last-child{border-bottom:none}
  .search-results button{display:flex;align-items:center;gap:14px;width:100%;padding:12px 6px;background:none;border:none;text-align:left}
  .search-results button:hover .s-name{color:var(--ink)}
  .s-thumb{width:48px;height:60px;border-radius:var(--radius);background:var(--gray);object-fit:cover;flex-shrink:0}
  .s-name{font-size:14px;font-weight:700}
  .s-cat{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;margin-top:2px}
  .s-price{margin-left:auto;font-size:13px;font-weight:800;color:var(--ink)}

  .toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(16px);background:var(--ink);color:var(--bg);border-radius:var(--radius);padding:14px 22px;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;z-index:160;opacity:0;pointer-events:none;transition:all .25s ease;box-shadow:0 8px 26px color-mix(in srgb,var(--ink) 35%,transparent);max-width:calc(100vw - 32px);text-align:center}
  .toast[data-visible="true"]{opacity:1;transform:translateX(-50%) translateY(0)}

  @media (max-width:640px){
    /* Deux prix côte à côte ne tiennent pas à 168 px de large. L'ancien prix
       est l'information secondaire : c'est lui qui rétrécit. */
    .price{font-size:14px;gap:6px}
    .price .old{font-size:11px}
    /* L'interlettrage large coûte une lettre et demie sur « EA7 Emporio
       Armani » ou « Tommy Jeans » : dans une carte de 168 px, il décide
       seul de la coupure du nom de marque. */
    .pbrand{font-size:11px;letter-spacing:.07em}
    /* Filtrer et Trier tiennent sur une ligne : empilés, ils repoussaient la
       première photo à près de sept cents pixels du haut de la page. */
    .cat-tools-row{align-items:stretch;gap:8px}
    .cat-tools-row .cat-btn{flex:0 0 auto}
    .cat-tools-row .cat-sort{flex:1 1 150px;min-width:0;padding-left:12px;gap:6px}
    .cat-tools-row .cat-sort>span{flex:none}
    /* Un select ne sait pas couper son texte : « Sélection de la boutique »
       sortait du cadre. Il rétrécit avec la police plutôt qu'en débordant. */
    .cat-tools-row .cat-sort select{flex:1 1 auto;width:100%;min-width:0;
      padding:10px 2px;font-size:12.5px}
    .cat-tools-row .cat-sort>span{font-size:10.5px;letter-spacing:.1em}
    /* Le compte passe sous les deux commandes : sur la même ligne il les
       écrasait au point de réduire « Trier » à sa bordure. */
    .cat-total{flex:1 0 100%;margin:2px 0 0;text-align:left}
    /* Deux boutons de même force se disputaient le doigt alors qu'ils
       mènent presque au même endroit. Le second redevient ce qu'il est :
       une porte de service, pas une invitation. */
    .hero-actions .btn-ghost{border-color:transparent;background:transparent;
      text-decoration:underline;text-underline-offset:5px;padding-inline:0}
  }

  @media (hover:none){
    /* Le bouton ayant quitté la photo, plus rien ne le rattachait au produit :
       un aplat gris referme la carte en un bloc lisible d'un coup d'œil. */
    .pcard{background:var(--gray);border-radius:var(--radius);padding:8px 8px 10px}
    .pinfo{padding:12px 4px 0}
    .pmedia{border-radius:calc(var(--radius) - 2px)}

    /* Zone cliquable étendue autour des liens, sans toucher à la typographie. */
    .fcol li{margin-bottom:4px}
    .fcol a{min-height:44px}
    .footer-bottom a{min-width:44px;min-height:44px;justify-content:center}
    .badge{font-size:10px;padding:5px 9px;letter-spacing:.1em}
    .pout{font-size:10px;padding:6px 0;letter-spacing:.12em}
  }
  @media (max-width:960px){
    .wrap{padding:0 20px}
    .nav-inner{grid-template-columns:auto 1fr auto;padding:12px 20px}
    .nav-links{display:none}
    .burger{display:inline-flex}
    .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .about{grid-template-columns:1fr;gap:40px}
    .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
    .pv-grid{grid-template-columns:1fr}
    .pv-media{min-height:240px}
  }
  /* --- Allègement mobile ------------------------------------------------
     Le hero et le bandeau de réassurance portaient les mêmes trois
     promesses. Sur téléphone elles se suivaient immédiatement : le bandeau
     garde le détail, le hero se tait. */
  @media (max-width:760px){
    body[data-page="catalogue"] #catTools[hidden]{min-height:106px}
    /* Les catégories défilent au doigt au lieu d'empiler quatre pavés
       pleine largeur avant d'atteindre les produits. */
    .cats{
      display:flex;
      gap:12px;
      overflow-x:auto;
      scroll-snap-type:x mandatory;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
      margin:0 -16px;
      padding:0 16px 4px;
    }
    .cats::-webkit-scrollbar{display:none}
    .cat-card{
      flex:0 0 68%;
      scroll-snap-align:start;
      aspect-ratio:3/4;
    }
    /* Sur téléphone, le nombre de résultats passe sous les commandes plutôt
       que d'écraser le bouton « Filtrer » contre le bord de l'écran. */
    .cat-total{margin:2px 0 0;width:100%}
    .cat-tools{position:sticky;top:65px;z-index:45;margin:-14px -16px 26px;padding:8px 16px;
      background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
    /* `backdrop-filter` crée un bloc de référence pour les descendants en
       position fixed, notamment dans Safari. Le panneau se retrouvait donc
       fixé dans les 105 px de la barre sticky au lieu de couvrir l'écran :
       son contenu débordait vers le haut pendant que le body restait bloqué.
       Le flou n'a aucune utilité sous l'overlay et doit disparaître tant que
       celui-ci est ouvert. */
    .cat-tools:has(.cat-panel-wrap[data-open="true"]){
      -webkit-backdrop-filter:none;backdrop-filter:none}
    .cat-panel-wrap{position:fixed;inset:0;z-index:120;display:flex;align-items:flex-end;
      grid-template-rows:none;background:rgba(17,17,17,.56);opacity:0;visibility:hidden;
      pointer-events:none;transition:opacity .2s ease,visibility 0s linear .2s}
    .cat-panel-wrap[data-open="true"]{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .2s ease}
    .cat-panel-wrap>.cat-panel,.cat-panel-wrap[data-open="true"]>.cat-panel{
      width:100%;max-height:min(84dvh,720px);overflow-y:auto;overscroll-behavior:contain;
      -webkit-overflow-scrolling:touch;touch-action:pan-y;
      grid-template-columns:1fr;gap:18px;padding:22px 16px max(16px,env(safe-area-inset-bottom));
      border:0;border-radius:16px 16px 0 0;background:var(--bg);opacity:1}
    .cat-done{position:sticky;bottom:0;width:100%;justify-self:stretch;z-index:1;
      box-shadow:0 -12px 18px -14px rgba(0,0,0,.55)}

    /* Fenêtre produit sur téléphone. Le bouton s'appelle « Choisir la
       taille » : les pointures doivent donc être visibles à l'ouverture. La
       photo en occupait plus de la moitié et repoussait les tailles à sept
       cents pixels de défilement — le client ne voyait pas ce qu'il venait
       demander. La photo garde son rôle d'identification, pas d'affiche. */
    #pvOverlay .pv-main{aspect-ratio:auto;height:30vh;max-height:250px;object-fit:contain;background:var(--gray)}
    #pvOverlay .pv-media{min-height:0}
    /* Les miniatures et la description repoussaient les pointures d'une
       centaine de pixels. Les coloris ont déjà leurs propres photos plus
       bas, et le texte descriptif attend sur la fiche complète : dans cette
       fenêtre, le client vient choisir une taille. */
    #pvOverlay .pv-thumbs{display:none}
    #pvOverlay .pv-desc{display:none}
    /* Le bouton d'ajout reste au bord de l'écran : la taille se choisit en
       haut, l'ajout se fait sans avoir à retrouver le bouton plus bas. */
    #pvOverlay #pvAdd{position:sticky;bottom:0;z-index:3;
      box-shadow:0 -10px 16px -12px color-mix(in srgb,var(--ink) 45%,transparent)}
    /* Collé au bas de la fenêtre, le bouton recouvrait les vignettes de
       coloris : les trois passaient dessous, à moitié visibles. On ne
       choisit pas ce qu'on ne voit pas. Le contenu se termine désormais
       au-dessus du bouton. */
    #pvOverlay .pv-info{padding-bottom:64px}
  }

  @media (max-width:640px){
    .wrap{padding:0 16px}
    .nav-inner{padding:10px 16px}
    .section{padding:56px 0}
    .sec-head{margin-bottom:32px}
    /* Un lien ou un retour vers les marques ne doit jamais coller le titre
       sous l'en-tête fixe. Cette marge n'agit qu'au défilement d'ancre. */
    #categories{scroll-margin-top:112px}
    .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
    .hero{min-height:82vh}
    .hero-content{min-height:388px;padding:44px 0 52px}
    .hero-sub{margin:20px 0 24px}
    .hero-actions{gap:10px}
    .btn{min-height:44px;padding:12px 16px;font-size:12px}
    .hero-actions .btn{flex:1 1 auto;justify-content:center}
    .tab{min-height:44px;padding:10px 14px;font-size:12px}
    .cbanner{min-height:460px}
    .cbanner-content{padding:40px 0}
    .news-form{flex-direction:column;gap:10px}
    .news-form input{min-height:48px}
    .news-form .btn{min-height:48px;width:100%}
    .footer-grid{grid-template-columns:1fr;gap:28px;padding:48px 0 36px}
    .pv-info{padding:20px}
    .m-head{padding:16px}
    .m-body{padding:16px}
    .drawer-head{padding:16px}
    .drawer-body{padding:16px}
    .drawer-foot{padding:16px}
    .size-btn{width:50px;height:44px;padding:0;font-size:12px}
    .qty-stepper{padding:2px 6px}
    .announce{font-size:11px;padding:8px 12px;letter-spacing:.08em}
    .mobile-menu{padding:8px 16px 16px}
    .hero-badge{top:14px;right:14px;min-width:225px;min-height:34px;padding:8px 12px;font-size:10px}
  }
  @media (max-width:370px){.hero-content{min-height:436px}}
  @media (max-width:340px){.hero-content{min-height:484px}}
  /* Ce lien était caché à neuf mille pixels sur la gauche. Safari sur
     iPhone compte cette distance dans la zone défilable : la page glissait
     latéralement et laissait un grand vide blanc à côté du site. Il est
     maintenant réduit à un pixel découpé — invisible de la même façon, sans
     rien étendre — et reprend sa taille dès qu'on l'atteint au clavier. */
  .skip-link{position:absolute;top:0;left:0;z-index:200;width:1px;height:1px;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap;
    background:var(--ink);color:var(--bg);padding:0;font-size:13px;font-weight:700;
    letter-spacing:.08em;text-transform:uppercase}
  .skip-link:focus{width:auto;height:auto;clip-path:none;padding:12px 18px}
  :focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  .m-overlay :focus-visible,.drawer :focus-visible,.news :focus-visible{outline-color:currentColor}
  .wish[data-on="true"] svg{fill:var(--ink);stroke:var(--ink)}
  @media (max-width:400px){
    .pgrid{gap:8px}
    .pcolors{gap:5px}
    .pcolors-count{font-size:11px;letter-spacing:.04em}
    .pcolor-photo{width:27px;height:32px}
    .pcolor-more{height:32px;min-width:18px;padding-left:3px}
    .cat-body{left:14px;bottom:12px;right:14px}
    .cart-item{grid-template-columns:64px 1fr auto;gap:12px}
    .hero-sub{font-size:.95rem}
  }

  /* --- Bandeau de reassurance ---------------------------------------
     Prend la place du marquee : meme bande, meme hauteur, meme registre
     typographique, mais il porte enfin une information utile. Rien n'est
     ajoute a la page, du decoratif devient commercial. */
  .trust{border-bottom:var(--border-w) solid var(--line);background:var(--bg)}
  .trust-grid{display:grid;grid-template-columns:repeat(3,1fr)}
  .trust-item{padding:18px 20px;text-align:center;border-left:var(--border-w) solid var(--line)}
  .trust-item:first-child{border-left:0}
  .trust-item b{display:block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
  .trust-item span{display:block;font-size:12px;color:var(--muted);margin-top:4px;line-height:1.4}
  @media (max-width:760px){
    .trust-grid{grid-template-columns:1fr}
    .trust-item{border-left:0;border-top:var(--border-w) solid var(--line);padding:13px 20px;
      display:flex;align-items:baseline;justify-content:center;gap:8px;text-align:center}
    .trust-item:first-child{border-top:0}
    .trust-item b{display:inline}
    .trust-item span{display:inline;margin:0}
  }

  /* Arguments dans le hero : micro-typo, meme graisse que le kicker. */
  .hero-points{display:flex;flex-wrap:wrap;gap:6px 14px;margin:20px 0 30px;padding:0;list-style:none}
  .hero-points li{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
    color:color-mix(in srgb,var(--bg) 74%,transparent)}
  .hero-points li + li{padding-left:14px;border-left:1px solid color-mix(in srgb,var(--bg) 26%,transparent)}
  @media (max-width:520px){
    .hero-points li + li{padding-left:0;border-left:0}
    .hero-points{gap:4px 12px}
  }

  /* Le hero et le bandeau de réassurance portaient les mêmes trois
     promesses. Sur téléphone elles se suivaient immédiatement : le bandeau
     garde le détail, le hero se tait. Règle placée après la définition de
     base, sinon elle serait écrasée à spécificité égale. */
  @media (max-width:760px){
    .hero-points{display:none}
  }

  /* Stock reel, seuil bas (<= 3) pour rester credible et rare.
     Gris du systeme, pas de rouge : la rarete se dit, elle ne crie pas. */
  .stock-hint{display:block;margin-top:6px;font-size:10.5px;font-weight:700;
    letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* Progression vers la livraison offerte : filet de 2px, encre sur gris. */
  .freeship{margin:0 0 16px}
  .freeship p{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin:0 0 8px}
  .freeship .bar{height:2px;background:var(--line-soft)}
  .freeship .bar i{display:block;height:100%;background:var(--ink);
    transition:width .5s cubic-bezier(.22,1,.36,1)}
  .freeship.done p{color:var(--ink)}

  /* Vente croisee : lignes nues, aucune boite ajoutee. */
  .xsell{margin-top:20px;padding-top:18px;border-top:var(--border-w) solid var(--line)}
  .xsell h4{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin:0 0 14px}
  .xsell-item{display:grid;grid-template-columns:48px 1fr auto;gap:12px;align-items:center}
  .xsell-item + .xsell-item{margin-top:12px}
  .xsell-item img{width:48px;height:60px;object-fit:cover;background:var(--gray)}
  .xsell-name{font-size:12.5px;font-weight:700;line-height:1.3}
  .xsell-price{font-size:12px;color:var(--muted);margin-top:2px}
  .xsell-add{border:var(--border-w) solid var(--ink);background:transparent;color:var(--ink);
    border-radius:var(--radius-pill);min-height:44px;padding:7px 14px;font:inherit;font-size:11px;font-weight:700;
    letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
  .xsell-add:hover{background:var(--ink);color:var(--bg)}

  /* WhatsApp permanent : pilule noire du systeme, pas de vert de marque. */
  .wa-float{position:fixed;right:20px;bottom:20px;z-index:60;display:inline-flex;align-items:center;gap:9px;
    background:var(--ink);color:var(--bg);border-radius:var(--radius-pill);padding:13px 18px;
    font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
  .wa-float svg{width:18px;height:18px;fill:currentColor;flex-shrink:0}
  .wa-float:hover{background:var(--surface)}
  /* Le bouton s'efface quand une modale ou le panier est ouvert : il ne doit
     jamais concurrencer le bouton d'action principal. */
  body:has(.drawer[data-open="true"]) .wa-float,
  body:has(.m-overlay[data-open="true"]) .wa-float,
  body:has(.mobile-menu[data-open="true"]) .wa-float,
  body:has(.cat-panel-wrap[data-open="true"]) .wa-float{opacity:0;pointer-events:none;visibility:hidden}
  /* Le bouton flotte au-dessus de tout : il se posait sur le texte de la
     réassurance, sur une carte produit, sur « Voir les 5 autres modèles ».
     Il s'efface dès qu'on descend la page — on lit alors sans rien qui
     recouvre — et revient dès qu'on remonte ou qu'on s'arrête, c'est-à-dire
     au moment où l'on cherche à joindre la boutique. */
  .wa-float{transition:opacity .25s ease, transform .25s ease}
  .wa-float[data-recule="true"]{opacity:0;pointer-events:none;transform:translateY(12px) scale(.9)}
  @media (prefers-reduced-motion:reduce){ .wa-float{transition:none} }
  @media (max-width:640px){
    .wa-float{right:14px;bottom:14px;width:48px;height:48px;min-width:48px;min-height:48px;padding:0;justify-content:center;gap:0}
    body[data-page="produit"] .wa-float{bottom:82px}
    .wa-float span{display:none}
  }

  /* Liste d'attente sur taille epuisee : reprend les champs du checkout. */
  .waitlist{margin-top:14px;padding-top:14px;border-top:var(--border-w) solid var(--line)}
  .waitlist p{font-size:12px;color:var(--muted);margin:0 0 10px;line-height:1.45}
  .waitlist-row{display:flex;gap:8px}
  .waitlist-row input{flex:1;min-width:0;height:44px;border:var(--border-w) solid var(--line);
    border-radius:var(--radius);padding:0 12px;font:inherit;font-size:14px;background:var(--bg);color:var(--ink)}
  .waitlist-row input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  .waitlist-row button{white-space:nowrap;flex-shrink:0}
  .waitlist .ok{font-weight:700;color:var(--ink);margin:0}

  /* --- Avis clients ---------------------------------------------------
     Registre editorial du kit : filets 1px, aucun aplat colore, aucune
     ombre. La note se lit en carres pleins/vides, pas en etoiles dorees. */
  .reviews{border-top:var(--border-w) solid var(--line)}
  .rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:44px}
  .rev-item{padding:0 32px;border-left:var(--border-w) solid var(--line)}
  .rev-item:first-child{border-left:0;padding-left:0}
  .rev-item:last-child{padding-right:0}
  .rev-note{display:flex;gap:3px;margin-bottom:16px}
  .rev-note i{width:7px;height:7px;background:var(--ink);display:block}
  .rev-note i[data-off]{background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
  .rev-text{font-size:15px;line-height:1.65;margin:0 0 18px}
  .rev-who{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
  .rev-meta{font-size:12px;color:var(--muted);margin-top:3px}
  .rev-count{font-size:12px;color:var(--muted);margin-top:36px;padding-top:20px;
    border-top:var(--border-w) solid var(--line)}
  @media (max-width:900px){
    .rev-grid{grid-template-columns:1fr;gap:0}
    .rev-item{padding:26px 0;border-left:0;border-top:var(--border-w) solid var(--line)}
    .rev-item:first-child{padding-top:0;border-top:0}
    .rev-item:last-child{padding-bottom:0}
  }

  /* ══════════════════════════════════════════════════════════════════
     Fiche produit en pleine page
     ══════════════════════════════════════════════════════════════════
     Même charte que le reste du site : noir, blanc, filets nets, aucun
     dégradé. La fiche ne dépayse pas, elle donne simplement la place
     qu'une modale ne peut pas donner. */
  .fiche-fil{border-bottom:var(--border-w) solid var(--line);padding:14px 0;
    font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
  .fiche-fil a{color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
  .fiche-fil a:hover{color:var(--ink)}
  .fiche-fil span{color:var(--muted)}

  .fiche{padding:34px 0 10px}
  .fiche-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:start}
  .fiche .pv-info h1{font-size:30px;font-weight:900;line-height:1.1;margin:6px 0 10px}
  .fiche-independent{margin:0 0 18px;padding:10px 0;border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);font-size:10.5px;font-weight:800;
    letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

  /* Le lien du nom ne doit pas se signaler comme un lien : la carte entière
     est cliquable, un soulignement bleu la salirait. */
  /* Lien de carte en surimpression : toute la photo mene a la fiche, le
     bouton favori reste au-dessus et cliquable. */
  .pmedia-link{position:absolute;inset:0;z-index:1}

  .fiche-guide{border-top:var(--border-w) solid var(--line);margin-top:22px;padding-top:16px}
  .fiche-guide summary{cursor:pointer;font-size:12px;font-weight:800;letter-spacing:.12em;
    text-transform:uppercase;list-style:none}
  .fiche-guide summary::-webkit-details-marker{display:none}
  .fiche-guide summary::after{content:"+";float:right;font-weight:700}
  .fiche-guide[open] summary::after{content:"−"}
  .guide-table{width:100%;border-collapse:collapse;margin-top:14px;font-size:13.5px}
  .guide-table th,.guide-table td{text-align:left;padding:9px 0;
    border-bottom:1px solid var(--line);font-weight:400}
  .guide-table th{font-weight:700}
  .guide-table td{text-align:right;color:var(--muted)}
  .guide-note{font-size:12.5px;line-height:1.6;color:var(--muted);margin-top:12px}

  .fiche-specs{display:grid;gap:2px;margin-top:24px;
    border-top:var(--border-w) solid var(--line)}
  .fiche-specs .trust-item{padding:14px 0;border-bottom:1px solid var(--line)}
  .fiche-specs b{display:block;font-size:12.5px;font-weight:800;
    letter-spacing:.08em;text-transform:uppercase}
  .fiche-specs span{display:block;font-size:13px;line-height:1.55;color:var(--muted);margin-top:3px}

  .fiche-sugg{padding-top:20px}
  .fiche-trust{border-top:var(--border-w) solid var(--line);padding:0 0 90px}

  /* Barre d'achat fixe. Réservée au téléphone : sur ordinateur le bouton
     reste visible sans elle, et une barre inutile mange l'écran. */
  .buybar{display:none}
  @media (max-width:900px){
    .fiche-grid{grid-template-columns:minmax(0,1fr);gap:12px}
    .fiche{padding:12px 0 6px}
    /* La photo 3/4 occupait 571 px avec ses miniatures : les choix ne
       commençaient qu'à 1093 px sur un écran de 844 px. Une fenêtre plus
       basse rogne uniquement le vide studio grâce à object-fit:cover ; le
       produit reste large, tandis que pointure et coloris entrent dans le
       premier écran. */
    .fiche .pv-media{min-height:0}
    .fiche .pv-main{aspect-ratio:auto;height:clamp(300px,38svh,360px);object-fit:cover}
    .fiche .pv-thumbs{padding:8px;gap:8px}
    .fiche .pv-thumbs button{width:48px;height:60px}
    .fiche .pv-info{padding-top:14px}
    .fiche-fil{padding:4px 0}
    .fiche .pv-info h1{font-size:24px}
    .buybar{display:flex;align-items:center;gap:14px;
      position:fixed;left:0;right:0;bottom:0;z-index:60;
      padding:10px 16px calc(10px + env(safe-area-inset-bottom));
      background:var(--bg);border-top:var(--border-w) solid var(--ink)}
    .buybar-info{display:flex;flex-direction:column;min-width:0}
    .buybar-variant{font-size:10.5px;font-weight:800;letter-spacing:.12em;
      text-transform:uppercase;color:var(--muted);
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .buybar-price{font-size:16px;font-weight:900;white-space:nowrap}
    .buybar .btn{flex:1;min-height:48px}
    .fiche-trust{padding-bottom:0}
    body:has(.drawer[data-open="true"]) .buybar,
    body:has(.m-overlay[data-open="true"]) .buybar,
    body:has(.mobile-menu[data-open="true"]) .buybar,
    body:has(.cat-panel-wrap[data-open="true"]) .buybar{opacity:0;pointer-events:none;visibility:hidden}
  }

  /* ══════════════════════════════════════════════════════════════════
     Mouvement
     ══════════════════════════════════════════════════════════════════
     Palette Nike inchangée : noir, blanc, filets nets. Le mouvement
     remplace la couleur comme signal — il guide l'œil sans rien salir.
     Trois règles tenues partout : rien ne bouge plus de 320 ms, rien ne
     se déplace de plus de 14 px, et tout s'arrête si le visiteur a
     demandé moins d'animations. Une boutique qui gigote fait perdre
     confiance ; une boutique qui répond donne envie. */

  /* Apparition à l'arrivée dans l'écran. Décalée de quelques dizaines de
     millisecondes d'une carte à l'autre pour que la grille se pose au
     lieu de surgir d'un bloc. */
  /* L'état masqué est posé en ligne par le script, jamais par une règle de
     feuille de style. Une règle peut être battue par une autre plus
     spécifique — c'est arrivé, et la page d'accueil est restée invisible en
     production. Un style en ligne ne peut pas perdre, et seul le script qui
     l'a posé peut le retirer : si le script ne tourne pas, rien n'est
     masqué. */
  [data-reveal]{transition:opacity .38s ease,transform .38s cubic-bezier(.22,.61,.36,1)}

  /* Carte produit : la photo respire, le bouton se remplit. Sur mobile
     le survol n'existe pas — l'effet est réservé aux appareils qui
     pointent, sinon il reste collé après le doigt. */
  @media (hover:hover){
    .pcard .pmedia img{transition:transform .5s cubic-bezier(.22,.61,.36,1)}
    .pcard:hover .pmedia img{transform:scale(1.04)}
    .mband-link svg{transition:transform .22s ease}
    .mband-link:hover svg{transform:translateX(5px)}
  }

  /* Retour au doigt : sur écran tactile, seul l'enfoncement fait signe. */
  .buybar .btn:active{transform:scale(.985)}
  .tab{transition:background-color .18s ease,color .18s ease,border-color .18s ease}
  .size-chip{transition:background-color .16s ease,color .16s ease,border-color .16s ease}

  /* Tiroir panier et modales : elles glissent au lieu d'apparaître. Le
     sens du mouvement dit d'où elles viennent et où le retour les
     renverra. */
  .cart-drawer{transition:transform .3s cubic-bezier(.22,.61,.36,1)}
  .m-overlay .modal{transition:transform .28s cubic-bezier(.22,.61,.36,1),opacity .2s ease}
  .m-overlay[data-open="false"] .modal{transform:translateY(10px);opacity:0}
  .m-overlay[data-open="true"] .modal{transform:none;opacity:1}

  /* Compteur du panier : une pulsation courte quand il change, sinon
     l'ajout se fait sans que rien ne le signale. */
  @keyframes pastille{0%{transform:scale(1)}45%{transform:scale(1.32)}100%{transform:scale(1)}}
  .cart-count[data-bump="true"]{animation:pastille .34s ease}

  /* Mobile d'abord : cibles tactiles d'au moins 44 px, et défilement
     horizontal qui s'aligne sur les cartes au lieu de s'arrêter
     n'importe où. */
  @media (max-width:900px){
    .mband-rail,.pv-thumbs{scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
    .mband-rail > *,.pv-thumbs > *{scroll-snap-align:start}
    .tabs{scroll-snap-type:x proximity}
    .tab{scroll-snap-align:start;min-height:44px}
    .icon-btn,.qty-stepper button{min-width:44px;min-height:44px}
  }

  @media (prefers-reduced-motion:reduce){
    [data-reveal]{transition:none}
    .pcard:hover .pmedia img,.mband-link:hover svg{transform:none}
    .cart-drawer,.m-overlay .modal{transition:none}
    .cart-count[data-bump="true"]{animation:none}
    .cat-panel-wrap,.cat-panel-wrap>.cat-panel{transition:none}
    .pmedia::after{animation:none}
  }


  /* ---------------- Porte d'entrée ----------------
     Premier écran de la boutique : deux portes, rien d'autre. Pas de
     navigation, pas de panier, pas de bandeau — tout ce qui n'aide pas à
     choisir retarde le choix. */
  body[data-page="choix"]{min-height:100vh;min-height:100svh;
    display:flex;flex-direction:column;background:var(--bg)}
  .choix{flex:1;display:flex;flex-direction:column;gap:26px;
    max-width:1320px;width:100%;margin:0 auto;padding:38px 24px 34px}
  .choix-head{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
  .choix-logo{font-size:26px;font-weight:900;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);
    display:inline-flex;align-items:baseline;gap:10px}
  .choix-logo span{font-size:11px;font-weight:700;letter-spacing:.4em;color:var(--muted)}
  .choix-logo-img{max-width:190px;max-height:52px;width:auto;height:auto;object-fit:contain}
  .choix-kicker{font-size:11px;font-weight:800;letter-spacing:.32em;text-transform:uppercase;color:var(--muted)}
  .choix-titre{text-align:center;font-size:clamp(26px,5vw,44px);font-weight:900;letter-spacing:-.03em;
    line-height:1.05;text-wrap:balance;margin:2px 0 0}
  .choix-portes{flex:1;display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr));min-height:0}
  body[data-portes="1"] .choix-portes{grid-template-columns:minmax(0,1fr)}
  .choix-note{text-align:center;font-size:12px;font-weight:700;letter-spacing:.12em;
    text-transform:uppercase;color:var(--muted)}
  /* La page d'entrée n'injecte pas la coque : ses liens obligatoires vivent
     donc dans la page elle-même. */
  .choix-legal{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px}
  .choix-legal a{display:inline-flex;align-items:center;min-height:44px;
    font-size:12.5px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
  .choix-legal a:hover{color:var(--ink)}

  .porte{position:relative;display:block;overflow:hidden;border-radius:var(--radius);
    background:var(--gray);min-height:min(62vh,560px);min-height:min(62svh,560px);
    text-decoration:none;color:#fff}
  .porte-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    transition:transform .5s ease}
  .porte:hover .porte-img{transform:scale(1.03)}
  .porte-voile{position:absolute;inset:0;
    background:linear-gradient(to top,rgba(17,17,17,.82) 0%,rgba(17,17,17,.34) 46%,rgba(17,17,17,.06) 100%)}
  .porte-in{position:absolute;inset:auto 0 0 0;z-index:2;display:flex;flex-direction:column;
    align-items:flex-start;gap:8px;padding:26px 28px}
  .porte-nom{font-size:clamp(28px,4vw,42px);font-weight:900;letter-spacing:-.02em;line-height:1}
  .porte-n{font-size:11.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
    color:rgba(255,255,255,.76)}
  .porte-go{margin-top:6px;display:inline-flex;align-items:center;min-height:44px;padding:11px 26px;
    border-radius:var(--radius-pill);background:#fff;color:var(--ink);
    font-size:12.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
  .porte:hover .porte-go{background:var(--gray)}
  .porte:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

  @media (max-width:760px){
    /* Les deux portes tiennent dans l'écran sans défilement : une porte qu'il
       faut aller chercher plus bas n'est pas un choix, c'est un défaut. Elles
       se partagent la hauteur restante, avec un plancher pour rester lisibles
       sur les petits téléphones. */
    .choix{gap:14px;padding:22px 14px 18px}
    .choix-portes{grid-template-columns:minmax(0,1fr);
      grid-auto-rows:minmax(150px,1fr);gap:10px}
    .porte{min-height:0}
    .porte-in{padding:18px 18px;gap:6px}
    .porte-nom{font-size:clamp(24px,7vw,32px)}
    .porte-go{margin-top:2px;padding:10px 20px}
    .choix-titre{font-size:clamp(32px,11vw,44px)}
    .choix-logo{font-size:21px}
    .choix-logo-img{max-width:150px;max-height:42px}
    .choix-note{font-size:11px;letter-spacing:.08em}
    .choix-legal{gap:0 16px}
    .choix-legal a{min-height:44px;font-size:12px}
  }

  /* Très petits écrans : le titre repasserait sur deux lignes et pousserait
     la seconde porte sous le pli. Il rétrécit plutôt que de voler la place
     des portes — c'est le choix du rayon qui doit rester entier. */
  @media (max-width:359px){
    .choix{gap:12px;padding:18px 12px 14px}
    .choix-titre{font-size:clamp(24px,8vw,30px)}
    .choix-portes{grid-auto-rows:minmax(130px,1fr)}
    .choix-logo-img{max-width:130px;max-height:36px}
  }
  @media (prefers-reduced-motion:reduce){
    .porte:hover .porte-img{transform:none}
  }

  .store-logo{display:block;width:clamp(104px,12vw,150px);max-width:100%;height:42px;max-height:42px;object-fit:contain;object-position:left center}
  .store-logo-foot{max-width:180px;max-height:54px}
  .preview-bar{position:sticky;z-index:9999;left:0;right:0;top:0;min-height:44px;background:#0759ea;color:#fff;display:flex;align-items:center;justify-content:center;gap:18px;padding:8px 12px;text-align:center;font:800 12px/1.25 Inter,system-ui,sans-serif;letter-spacing:.03em}
  .preview-bar a{color:#fff;text-decoration:underline;text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center;white-space:nowrap}
@media(max-width:520px){.preview-bar{justify-content:space-between;text-align:left}.preview-bar span{max-width:24ch}}
@media(max-width:960px){
  .nav-inner{gap:8px}
  .nav-left{gap:3px}
  .nav-right{gap:0}
  .nav-left .store-logo{width:clamp(88px,27vw,118px);height:38px;max-width:none}
}
@media(max-width:960px){.shell-reserve{height:108px}}
@media(max-width:640px){.shell-reserve{height:99px}}
@media(max-width:340px){body[data-page="catalogue"] #filterTabs{min-height:96px}}
@media(max-width:359px){
  .shell-reserve{height:116px}
  .nav-inner{padding-left:10px;padding-right:10px;gap:4px}
  .nav-left .store-logo{width:86px;height:36px}
}

/* ============================================================
   UNIVERS HOMME / FEMME
   L'accueil reste commun et calme ; chaque univers porte ensuite ses
   produits, marques et catégories sans changer l'identité T&K.
   ============================================================ */
.audience-tabs{display:flex;gap:6px;margin:0 0 20px;padding:5px;background:#f1f1f1;border-radius:999px;width:max-content;max-width:100%}
.audience-tab{border:0;background:transparent;min-height:44px;padding:0 24px;border-radius:999px;font:800 12px/1 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#666;cursor:pointer}
.audience-tab.active{background:#111;color:#fff}
.audience-hero{position:relative;min-height:min(76vh,760px);display:flex;align-items:flex-end;background:#111;overflow:hidden}
.audience-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.audience-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.84),rgba(0,0,0,.06) 70%)}
.audience-hero-copy{position:relative;z-index:1;color:#fff;padding:72px 0;width:100%}
.audience-hero-copy h1{font-size:clamp(2.8rem,8vw,7rem);line-height:.92;text-transform:uppercase;letter-spacing:-.045em;max-width:12ch}
.audience-hero-copy p{max-width:48ch;margin:22px 0 30px;color:rgba(255,255,255,.82);font-size:clamp(1rem,1.6vw,1.2rem)}
.audience-hero-actions{display:flex;flex-wrap:wrap;gap:10px}
.audience-categories{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.audience-category{position:relative;min-height:280px;overflow:hidden;border-radius:var(--radius);background:#111;color:#fff}
.audience-category img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.audience-category:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.78),transparent 70%)}
.audience-category span{position:absolute;z-index:1;left:24px;right:24px;bottom:22px;display:flex;justify-content:space-between;align-items:end;gap:16px}
.audience-category strong{font-size:clamp(1.4rem,3vw,2.4rem);text-transform:uppercase}
.audience-category small{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.13em}
.audience-unavailable{min-height:60vh;display:grid;place-items:center;text-align:center;padding:70px 24px}
.audience-unavailable[hidden]{display:none}
.audience-unavailable div{max-width:540px}
.audience-unavailable h1{font-size:clamp(2.2rem,7vw,5rem);line-height:.95;text-transform:uppercase;margin-bottom:18px}
.audience-unavailable p{color:var(--muted);margin-bottom:28px}
@media(max-width:700px){
  .audience-hero{min-height:72vh}.audience-hero-copy{padding:48px 0}
  .audience-categories{grid-template-columns:1fr}.audience-category{min-height:220px}
  .audience-tabs{width:100%}.audience-tab{flex:1;padding:0 12px}
}

/* Le champ de recherche descendait de 239 px des la premiere frappe. La
   fenetre modale est centree verticalement : chaque resultat qui
   disparaissait la faisait retrecir, donc se recentrer, et le champ
   partait vers le bas — sous le doigt du visiteur, en pleine saisie.
   Mesure sur mobile 375 x 812 : haut du champ a 137 px avec neuf
   resultats, 376 px avec zero. La fenetre de recherche est desormais
   ancree en haut : le champ garde sa place quoi qu'affiche la liste. */
#soOverlay{align-items:flex-start}
#soOverlay .modal{margin-top:min(9vh,72px)}