/* ═══════════ YLB CONCEPT — DESIGN SYSTEM v3 ═══════════
   80% premium e-commerce · 20% editorial. Le produit gagne toujours.
   Display Anton : moments forts uniquement (hero, éditorial, 404).
   Sections commerce : grotesk system, compactes, denses en produits.
   Sneakers (JPG fond blanc) UNIQUEMENT sur surfaces claires en multiply. */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/anton.woff2') format('woff2')}

/* `hidden` DOIT GAGNER. Un `display` pose par une CLASSE (.btn, .card…) bat la
   regle par defaut du navigateur sur `[hidden]`, qui n a qu une specificite
   d attribut. Mesure du 21.08.2026 sur le bouton « Charger plus » a la fin de
   la page Vetements : attribut hidden pose, `display: inline-flex` calcule,
   44 px de hauteur — masque au sens du DOM et visible a l ecran. Le client
   arrivait au bout, voyait encore le bouton et cliquait dans le vide.
   Cette feuille portait deja cinq correctifs ponctuels du meme bug
   (.badge-n[hidden], .qa[hidden], .favs-empty[hidden], .errbox[hidden],
   .ferr[hidden]) : ils deviennent redondants, on les laisse sans effet.
   `!important` est justifie ici : `hidden` veut dire « pas rendu », point. */
[hidden] { display: none !important; }

:root{
  /* Gouttiere horizontale unique. Les rails s'en servent AUSSI en marge
     negative pour aller jusqu'au bord : une seule source, sinon ils se
     decalent du contenu des qu'on la change. Elargie le 17.08.2026
     (16-56 px -> 18-72 px) : 44 px de marge a 1280 faisaient dense. */
  --gutter:clamp(18px,4.4vw,72px);
  /* surfaces */
  --surface-main:#fbfaf8; --surface-soft:#f3f2ef; --surface-panel:#f0efec; --surface-dark:#131316;
  --ink:#101012; --graphite:#2a2a2e; --line:#e6e5e1; --line-dark:#26262b;
  --muted:#71717a; --muted-dark:#a3a3ab;
  --accent:#d6001c; --ok:#0a7d43; --warn:#8a5a00; --danger:#c02626;
  --ok-soft:rgba(10,125,67,.1); --warn-soft:rgba(138,90,0,.12);
  --maxw:1480px; --tap:44px; --r:4px;
  --shadow-card:0 1px 2px rgba(16,16,18,.05);
  --shadow-pop:0 16px 40px rgba(16,16,18,.10);
  --fast:.16s cubic-bezier(.4,0,.2,1); --med:.28s cubic-bezier(.4,0,.2,1);
  --disp:'Anton',Impact,'Arial Narrow',sans-serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-main);color:var(--ink);font:15px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit}
img{max-width:100%}
h1,h2,h3{margin:0;line-height:1.08}
.disp{font-family:var(--disp);font-weight:400;letter-spacing:.01em;text-transform:uppercase}
/* titres de section = grotesk premium, PAS display */
.sec-title{font-size:clamp(19px,1.9vw,25px);font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:100}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.muted{color:var(--muted)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ── Boutons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);padding:12px 24px;border-radius:var(--r);font-weight:700;font-size:13px;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;border:1px solid var(--ink);transition:transform var(--fast),background var(--fast),color var(--fast);text-align:center}
.btn:active{transform:translateY(0) scale(.99)}
.btn-big:hover:not(:disabled){transform:translateY(-1px)}
.btn-arrow{transition:transform var(--fast)}
.btn-ghost:hover .btn-arrow{transform:translateX(3px)}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover:not(:disabled){background:var(--graphite)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover:not(:disabled){background:var(--ink);color:#fff}
.btn-invert{background:#fff;color:var(--ink);border-color:#fff}
.btn-invert:hover{background:transparent;color:#fff}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-big{padding:14px 30px;font-size:14px}
.btn-xl{width:100%;padding:16px 24px;font-size:14px}

/* ── Header ── */
.hdr{position:sticky;top:0;z-index:50;background:rgba(251,250,248,.95);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;gap:24px;height:60px}
.brand{display:flex;align-items:center;gap:8px;font-family:var(--disp);font-size:20px;letter-spacing:.04em;white-space:nowrap;line-height:1}
/* L'emblème du site live, à hauteur de la typo. width/height en attributs :
   aucune reprise de mise en page pendant que le fichier arrive. */
.brand-mark{display:block;width:30px;height:24px}
/* L'emblème ajoute ~38px à la marque : à 412px il reste 24px d'air avant les
   icônes, donc à 375 (iPhone mini/SE) ça toucherait. Sous 400px, marque et
   emblème se resserrent ensemble — mesuré, pas au jugé. */
@media (max-width:400px){
  .brand{font-size:17px;gap:6px}
  .brand-mark{width:26px;height:21px}
}
.hdr-step{font-size:12.5px;color:var(--muted);letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.hdr-nav{display:flex;gap:2px}
.hdr-link{padding:10px 13px;font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);background:none;border:0;cursor:pointer;border-bottom:2px solid transparent;transition:border-color var(--fast)}
.hdr-link:hover{border-bottom-color:var(--ink)}
.hdr-actions{margin-left:auto;display:flex;align-items:center;gap:0}
.icon-btn{position:relative;display:inline-flex;align-items:center;gap:8px;min-width:var(--tap);min-height:var(--tap);padding:0 10px;justify-content:center;background:none;border:0;cursor:pointer;font-size:13px;font-weight:600;color:var(--ink);transition:opacity var(--fast)}
.icon-btn:hover{opacity:.6}
.icon-lbl{color:var(--muted);font-weight:500}
/* Le script masque le badge avec l attribut hidden quand le compteur est a 0,
   mais display:inline-flex d une CLASSE bat le [hidden] du navigateur : le rond
   noir restait donc affiche, vide, en permanence sur le panier et les favoris.
   Troisieme occurrence de ce meme piege dans ce projet (etat vide des favoris,
   puis srcset du viewer 360) : une regle de classe qui pose display annule
   toujours hidden. */
.badge-n{position:absolute;top:3px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--ink);color:#fff;font-size:10.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;line-height:16px;text-align:center}
.badge-n[hidden]{display:none}
.hdr-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:var(--tap);height:var(--tap);background:none;border:0;cursor:pointer}
.hdr-burger span{display:block;width:20px;height:2px;background:var(--ink);margin-left:11px}

/* ── Mega menu ── */
.mega{position:absolute;left:0;right:0;top:100%;background:var(--surface-main);border-bottom:1px solid var(--line);box-shadow:var(--shadow-pop)}
.mega-in{display:grid;grid-template-columns:1fr 1fr 1fr 300px;gap:36px;padding-block:28px}
.mega-col h4{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.mega-col a{display:block;padding:5px 0;font-size:14px;font-weight:600}
.mega-col a:hover{color:var(--accent)}
.mega-all{color:var(--muted);font-size:12.5px!important;margin-top:6px}
.mega-tile{position:relative;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:200px}
.mega-tile img{width:80%;mix-blend-mode:darken;transition:transform var(--med)}
.mega-tile:hover img{transform:scale(1.05)}
.mega-tile span{position:absolute;left:14px;bottom:12px;font-size:12px;color:var(--muted)}
.mega-tile span b{display:block;color:var(--ink);font-size:14px}

/* ── Drawers / overlays ── */
.nav-drawer,.search-ovl,.minicart{position:fixed;inset:0;z-index:80;background:rgba(16,16,18,.44)}
.drawer-panel{position:absolute;top:0;left:0;bottom:0;width:min(330px,88vw);background:var(--surface-main);padding:24px;display:flex;flex-direction:column;animation:slideIn var(--med)}
@keyframes slideIn{from{transform:translateX(-24px);opacity:0}}
.drawer-panel nav{display:flex;flex-direction:column;margin-top:40px}
.drawer-panel nav a{padding:14px 6px;font-size:17px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--line)}
.drawer-foot{margin-top:auto;font-size:12px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.drawer-close{position:absolute;top:10px;right:10px;width:var(--tap);height:var(--tap);border:0;background:none;font-size:16px;cursor:pointer}
.drawer-close:hover{opacity:.5}
.search-box{max-width:660px;margin:6vh auto 0;background:var(--surface-main);overflow:hidden;animation:pop var(--med);border:1px solid var(--line)}
@keyframes pop{from{transform:translateY(-10px);opacity:0}}
.search-row{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.search-row svg{flex:0 0 auto;opacity:.5}
.search-row input{flex:1;border:0;outline:0;font-size:17px;background:none;color:var(--ink);min-height:32px}
.search-close{border:1px solid var(--line);background:var(--surface-soft);padding:5px 10px;font-size:11px;color:var(--muted);cursor:pointer;letter-spacing:.06em}
.search-results{max-height:min(58vh,500px);overflow-y:auto}
.search-pop{padding:16px 18px}
.search-pop h4{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.search-pop-list{display:flex;flex-wrap:wrap;gap:8px}
.search-pop-list button{border:1px solid var(--line);background:#fff;padding:9px 15px;font-size:13px;font-weight:600;cursor:pointer;transition:all var(--fast)}
.search-pop-list button:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.search-item{display:flex;align-items:center;gap:13px;padding:10px 18px;cursor:pointer;border:0;background:none;width:100%;text-align:left}
.search-item.sel,.search-item:hover{background:var(--surface-soft)}
.search-item img{width:52px;height:52px;object-fit:contain;background:#fff;mix-blend-mode:multiply;flex:0 0 auto}
.search-item .si-n{font-weight:700;font-size:14px;line-height:1.25}
.search-item .si-b{font-size:12px;color:var(--muted)}
.search-item .si-p{margin-left:auto;font-weight:800;font-size:13px;white-space:nowrap}
.search-grp{border-top:1px solid var(--line)}
.search-grp:first-child{border-top:0}
.search-grp h4{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0;padding:11px 18px 6px}
.search-nav{display:flex;align-items:baseline;gap:10px;padding:9px 18px;font-size:14.5px;font-weight:700}
.search-nav:hover,.search-nav:focus-visible{background:var(--surface-soft)}
.search-nav small{color:var(--muted);font-weight:500;font-size:12px}
.search-all{display:block;width:100%;padding:13px;text-align:center;font-weight:700;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;border:0;border-top:1px solid var(--line);background:var(--surface-soft);cursor:pointer}
.search-all:hover{background:var(--ink);color:#fff}
.search-empty{padding:28px 18px;text-align:center;color:var(--muted);font-size:14px}
.search-empty .se-t{display:block;color:var(--ink);font-size:17px;font-weight:800;letter-spacing:.05em;margin-bottom:8px}
.search-empty a,.search-empty button{color:var(--ink);text-decoration:underline;background:none;border:0;font-size:14px;cursor:pointer;padding:2px 4px}

/* ── Mini-cart ── */
.minicart-panel{position:absolute;top:0;right:0;bottom:0;width:min(410px,94vw);background:var(--surface-main);display:flex;flex-direction:column;animation:slideR var(--med)}
@keyframes slideR{from{transform:translateX(24px);opacity:0}}
.minicart-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line);font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.minicart-head .drawer-close{position:static}
.minicart-body{flex:1;overflow-y:auto;padding:4px 20px}
.minicart-foot{border-top:1px solid var(--line);padding:16px 20px calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:9px}
.mc-added{display:flex;align-items:center;gap:8px;color:var(--ok);font-weight:700;font-size:13px;padding:13px 0 3px;letter-spacing:.04em;text-transform:uppercase}
.mc-row{display:flex;gap:13px;padding-block:13px;border-bottom:1px solid var(--line);align-items:center}
.mc-row img{width:66px;height:66px;object-fit:contain;background:#fff;mix-blend-mode:multiply;flex:0 0 auto}
.mc-row .n{font-weight:700;font-size:13.5px;line-height:1.25}
.mc-row .s{font-size:12px;color:var(--muted);margin-top:2px}
.mc-row .p{margin-left:auto;font-weight:800;font-size:13.5px;white-space:nowrap}
.mc-total{display:flex;justify-content:space-between;font-weight:800;font-size:15.5px}

/* ── Hero v3 : 1 sneaker dominante, compact, premium ── */
.hero{overflow:hidden;border-bottom:1px solid var(--line);background:#fff}
/* Hauteur calee pour laisser apparaitre le haut de Trending Now sous la
   barre noire (mesure : ~180px de la section suivante restent visibles en
   1366x768). Le padding superieur est reduit : l espace mort sous le header
   passe de ~64 a ~34px en desktop. */
.hero-grid{display:grid;grid-template-columns:38fr 62fr;gap:clamp(16px,3vw,44px);align-items:center;padding-block:clamp(18px,2.4vw,34px) clamp(20px,2.6vw,38px);min-height:min(54vh,520px)}
.kicker{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:0 0 16px}
.hero h1{font-size:clamp(40px,4.8vw,76px);line-height:.98}
.hero h1 span{display:block}
.hero h1 .hl{color:var(--accent)}
.hero-sub{font-size:clamp(14.5px,1.3vw,16.5px);line-height:1.62;color:var(--muted);margin:16px 0 24px;max-width:34ch}
.hero-cta{display:flex;gap:11px;flex-wrap:wrap}
/* ═══ SCENE HERO — diagonale editoriale ═══
   Contrainte materielle mesuree : les assets sont des JPEG OPAQUES (aucun
   canal alpha). Le detourage visuel vient de mix-blend-mode:darken sur fond
   clair — filter:drop-shadow est donc INTERDIT (il suivrait le rectangle,
   pas la silhouette) et il n y a AUCUN z-index (un stacking context isolerait
   le blend et le fond blanc redeviendrait un rectangle opaque).
   UNE SEULE ombre par paire : l ellipse ::before, peinte derriere l image.

   Lecture voulue : argentee haute et proche du texte, rose plus bas a
   droite -> diagonale, jamais deux chaussures alignees. Rotations tres
   faibles (3-4 deg) : assez pour casser l effet catalogue, pas assez pour
   donner l impression qu elles tombent. */
.hero-comp{position:relative;height:clamp(300px,46vh,440px)}
.hc{position:absolute;display:block;--flip:1}
.hc img{width:100%;height:auto;object-fit:contain;mix-blend-mode:darken;transform:rotate(var(--rot)) scaleX(var(--flip));transition:transform var(--med);animation:heroDrop .8s cubic-bezier(.22,.61,.36,1) backwards}
.hc::before{content:"";position:absolute;left:16%;right:16%;bottom:var(--sh-y,7%);height:8%;background:radial-gradient(ellipse at center,rgba(16,16,18,var(--shade,.10)),transparent 70%);animation:heroFade .8s backwards}
/* argentee : plus grande (+7%), haute, avancee vers le titre */
.hc-1{left:0;top:4%;width:47%;--rot:-3deg;--shade:.09;--sh-y:5%}
/* rose : la plus grande (+14%), calee en bas a droite -> diagonale */
.hc-2{right:0;bottom:2%;width:50%;--rot:3deg;--flip:-1;--shade:.11}
.hc-2 img,.hc-2::before{animation-delay:.12s}
.hc:hover img{transform:rotate(var(--rot)) scaleX(var(--flip)) scale(1.02)}
@keyframes heroDrop{from{opacity:0;transform:translateY(-14px) rotate(calc(var(--rot) - 2deg)) scaleX(var(--flip))}to{opacity:1;transform:translateY(0) rotate(var(--rot)) scaleX(var(--flip))}}
@keyframes heroFade{from{opacity:0}to{opacity:1}}
/* levitation permanente : 3px, periodes differentes, jamais synchrones */
@media (prefers-reduced-motion:no-preference){
  .hc-1 img{animation:heroDrop .8s cubic-bezier(.22,.61,.36,1) backwards, float1 6.5s 1s ease-in-out infinite}
  .hc-2 img{animation:heroDrop .8s .12s cubic-bezier(.22,.61,.36,1) backwards, float2 7.4s 1.3s ease-in-out infinite}
  @keyframes float1{0%,100%{transform:rotate(var(--rot)) scaleX(var(--flip)) translateY(0)}50%{transform:rotate(var(--rot)) scaleX(var(--flip)) translateY(-3px)}}
  @keyframes float2{0%,100%{transform:rotate(var(--rot)) scaleX(var(--flip)) translateY(0)}50%{transform:rotate(var(--rot)) scaleX(var(--flip)) translateY(-4px)}}
}
/* entree du bloc texte, decalee des produits */
.hero-copy>*{animation:heroText .7s cubic-bezier(.22,.61,.36,1) backwards}
.hero-copy>:nth-child(2){animation-delay:.06s}
.hero-copy>:nth-child(3){animation-delay:.12s}
.hero-copy>:nth-child(4){animation-delay:.18s}
@keyframes heroText{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}


/* ── GARANTIE ANTI-DÉFORMATION ──
   Toute image de produit conserve son rapport largeur/hauteur d'origine. */
.hero-comp img,.camp-comp img,.card-media img,.mt-media img,.bt-media img,
.pt-media img,.pdp-media img,.pstory-in img,.dhero-img,.mega-tile img,
.mw-list img,.cart-row .ct img,.mc-row img,.search-item img{object-fit:contain}

/* ── Trust ── */
.trust{background:var(--surface-dark);color:#fff}
/* transition Hero -> Trending, pas une section autonome : barre fine */
/* Defilement continu sur toutes les largeurs (40 px/s). QUATRE sequences :
   la piste translate d'un quart, et il faut que (copies-1) x largeur d'une
   sequence couvre le viewport le plus large servi (1920), sinon un vide
   apparait en fin de boucle. Le nowrap sur les items est OBLIGATOIRE : sans
   lui la largeur intrinseque de la piste est sous-evaluee et le raccord
   saute (bug vecu, mesure 1270 px pour 1788 px de contenu). */
.trust-in{overflow:hidden;padding-block:11px;padding-inline:0;max-width:none;font-size:11px;letter-spacing:.15em;text-transform:uppercase;font-weight:500}
.trust-track{display:flex;width:max-content;animation:trustRun 34s linear infinite}
.trust-seq{display:flex;flex:0 0 auto;white-space:nowrap;gap:clamp(28px,3.4vw,48px);padding-right:clamp(28px,3.4vw,48px)}
.trust-in span{display:inline-flex;align-items:center;gap:9px;color:rgba(255,255,255,.58);white-space:nowrap}
.trust-in b{color:#fff;font-weight:700}
.trust-in svg{width:13px;height:13px;flex:0 0 auto;color:var(--accent);opacity:.95}
@keyframes trustRun{to{transform:translateX(-25%)}}
/* Mouvement reduit : couper AVANT la regle globale ligne 35, qui figerait la
   piste sur son etat final decale. La barre redevient statique et centree. */
@media (prefers-reduced-motion:reduce){
  .trust-track{animation:none!important;transform:none!important;width:auto;flex-wrap:wrap;justify-content:center}
  .trust-seq{flex-wrap:wrap;justify-content:center}
  .trust-seq[aria-hidden]{display:none!important}
  .trust-in{padding-inline:var(--gutter)}
}

/* ── Sections (compactes, commerce) ── */
.sec{padding-block:clamp(34px,4vw,60px)}
.sec-soft{background:var(--surface-soft);border-block:1px solid var(--line)}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:6px}
.sec-sub{color:var(--muted);margin:0 0 18px;font-size:14px}
.sec-head+.hscroll,.sec-head+.grid,.sec-head+.model-tiles,.sec-head+.price-tiles,.sec-head+.brand-tiles,.sec-head+.mw-list{margin-top:18px}
.sec-more{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.sec-more:hover{color:var(--ink)}

/* ── Rail horizontal : plus de produits visibles, moins de scroll vertical ── */
/* scroll-padding : sans lui le snapport commence au bord de la BOITE et non a
   la gouttiere. Avec scroll-snap mandatory, le navigateur aligne alors la
   premiere carte sur x=0 en mangeant la marge — le titre reste en retrait et la
   carte touche le bord. C'etait le seul scroller a qui il manquait. */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(190px,1fr);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:6px;scrollbar-width:none;margin-inline:calc(-1*var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
.rail::-webkit-scrollbar{display:none}
.rail>.card{scroll-snap-align:start}
.rail-nav{display:flex;align-items:center;gap:8px}
.rail-btn{width:34px;height:34px;border:1px solid var(--line);background:#fff;border-radius:50%;cursor:pointer;font-size:17px;line-height:1;color:var(--ink);transition:all var(--fast)}
.rail-btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ── Cards produit ── */
.grid-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:box-shadow var(--fast),border-color var(--fast)}
.card:hover{border-color:#d5d4cf;box-shadow:var(--shadow-pop)}
.card-media{position:relative;display:block;background:#fff;aspect-ratio:1/1;overflow:hidden;border-bottom:1px solid var(--line)}
.card-media img{width:100%;height:100%;object-fit:contain;padding:9%;mix-blend-mode:multiply;transition:transform var(--med)}
.card:hover .card-media img{transform:scale(1.05)}
.ph{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;height:100%;padding:14px;text-align:center}
.ph b{color:var(--ink);font-size:13px;font-weight:800;letter-spacing:.02em;line-height:1.3}
.ph i{font-style:normal;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700}
/* ── Ajout rapide sur carte ──
   Tactile : pastille 44 px toujours visible, en bas a droite du media.
   Souris : barre pleine largeur qui apparait au survol (et au focus clavier).
   Le conteneur hauteur 0 suit le flux : il s'ancre au bas du media sans
   dependre du ratio d'image ni de la hauteur du texte dessous. */
.card-quick{position:relative;height:0;z-index:2}
/* white-space:nowrap est le point important : « Ajouter au panier » passait a
   la ligne dans les cartes etroites et le bouton doublait de hauteur. */
/* Au TOUCHER, la pastille peinte et la zone tactile sont dissociees : le bouton
   garde ses 44x44 px pour le pouce, mais ce qu'on VOIT n'est qu'un rond de
   34 px pose par ::before. Mesure du 17.08.2026 : le carre plein de 44 px
   occupait 29 % de la largeur d'une carte de 150 px et ecrasait « Ajouter au
   panier » en 9,5 px illisibles — d'ou l'impression de bouton trop gros. Le
   rond de 34 px pese moins de la moitie en surface (908 px² contre 1936) sans
   rien retirer au confort de frappe, et le libelle part en aria-label plutot
   que d'etre comprime a une taille qu'on ne lit pas.
   Le chemin d'achat rapide est CONSERVE sur telephone : c'est la ou il sert le
   plus, et le supprimer annulerait la reduction du tunnel demandee. */
/* ⚠ AUCUNE media query `hover` ici, et c'est deliberé.
   Mesure du 17.08.2026 : le navigateur de Danilo repond `hover: none` sur un
   ecran large AVEC une souris — le panneau de previsualisation aussi. Batir la
   revelation sur `@media (hover:hover)` affichait donc la pastille en permanence
   chez lui, et la version `@media (hover:none)` l'aurait rendue INVISIBLE et
   inatteignable a la souris, puisqu'elle attendait un `touchmove`. La capacite de
   survol declaree par le navigateur n'est pas fiable : on ne s'y fie plus.

   Un seul visuel — la pastille ronde de 34 px peinte par ::before dans une zone
   tactile de 44 px — et TROIS declencheurs independants :
     .card:hover        la souris, qui fonctionne meme quand `hover: none` est
                        declare, parce que :hover est une pseudo-classe et non une
                        media query ;
     .card.touche       le doigt, classe posee par app.js sur `touchmove` ;
     :focus-visible     le clavier.
   La zone reste neutralisee tant qu'elle est invisible : sans pointer-events:none,
   un pouce effleurant le coin d'une carte pendant un defilement ouvrirait la
   feuille des pointures. */
.card-add{position:absolute;right:8px;bottom:8px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:none;color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;
  opacity:0;transform:scale(.86);pointer-events:none;transition:opacity var(--fast),transform var(--fast)}
.card-add::before{content:"";position:absolute;inset:5px;border-radius:999px;background:var(--ink);opacity:.92;transition:background var(--fast)}
.card-add svg{position:relative;width:15px;height:15px}
/* Le libelle vit dans l'aria-label du bouton : jamais affiche, toujours annonce. */
.card-add span{display:none}
.card:hover .card-add,.card.touche .card-add,.card-add:focus-visible{opacity:1;transform:none;pointer-events:auto}
.card-add:hover::before{background:var(--accent);opacity:1}

/* ── Feuille d'ajout rapide : pointures + prix, puis panier ── */
.qa[hidden]{display:none}
.qa{position:fixed;inset:0;z-index:95}
.qa-back{position:absolute;inset:0;background:rgba(16,16,18,.44)}
.qa-panel{position:absolute;left:0;right:0;bottom:0;background:var(--surface-main);border-radius:12px 12px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom));max-height:76vh;overflow:auto;animation:sheetUp var(--med)}
@media (min-width:641px){.qa-panel{left:50%;right:auto;bottom:auto;top:50%;transform:translate(-50%,-50%);width:min(440px,92vw);border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--shadow-pop)}}
.qa-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.qa-brand{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
.qa-name{font-size:15.5px;line-height:1.3}
.qa-sizes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.qa-size{display:flex;flex-direction:column;gap:2px;align-items:center;justify-content:center;min-height:54px;border:1px solid var(--line);background:#fff;border-radius:var(--r);cursor:pointer;transition:border-color var(--fast)}
.qa-size b{font-size:14px}
.qa-size small{font-size:11.5px;color:var(--muted)}
.qa-size:hover:not([disabled]){border-color:var(--ink)}
.qa-size[disabled]{opacity:.4;cursor:not-allowed}
.qa-note{font-size:12px;color:var(--muted);margin:14px 0 8px}
.qa-link{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.tag{position:absolute;top:8px;left:8px;z-index:2;font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:5px 9px;background:var(--ink);color:#fff;border-radius:2px}
.tag-stock{background:var(--ok)}
.card-fav{position:absolute;top:7px;right:7px;z-index:2;width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.92);border:0;border-radius:50%;cursor:pointer;color:var(--muted);transition:color var(--fast),transform var(--fast)}
.card-fav:hover{color:var(--ink);transform:scale(1.08)}
.card-fav[aria-pressed="true"]{color:var(--accent)}
.card-fav[aria-pressed="true"] svg{fill:currentColor}
.card-body{padding:12px 13px 13px;display:flex;flex-direction:column;gap:2px}
.card-brand{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
.card-name{font-size:13.5px;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.card-name a:hover{text-decoration:underline}
.card-price{margin-top:5px;font-size:14.5px;font-weight:800}
.card-price small{font-size:11px;color:var(--muted);font-weight:600;margin-right:3px}

/* ── Éditorial compact (THE ROTATION) ── */
.camp{background:#fff;border-block:1px solid var(--line);overflow:hidden}
.camp-in{display:grid;grid-template-columns:32fr 68fr;gap:clamp(16px,3vw,44px);align-items:center;padding-block:clamp(30px,3.6vw,52px)}
.camp-title{font-size:clamp(30px,3.4vw,50px);line-height:.96}
.camp-copy p{color:var(--muted);font-size:14px;margin:12px 0 20px;max-width:36ch}
.favs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.favs-empty{grid-column:1/-1;background:#fff;border:1px dashed #d8d7d2;border-radius:var(--r);padding:clamp(20px,3vw,40px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;min-height:220px}
.favs-empty p{color:var(--muted);font-size:14px;max-width:44ch;margin:0}
/* l attribut hidden pose par le script perdait contre display:flex de la classe :
   l invitation « touche le coeur » restait peinte a cote des vrais favoris */
.favs-empty[hidden]{display:none}

/* Consentement favoris : demandé au premier cœur, jamais de bannière bloquante */
.consent{position:fixed;left:16px;bottom:16px;z-index:90;background:var(--surface-main);border:1px solid var(--ink);border-radius:var(--r);padding:16px 18px;max-width:380px;box-shadow:var(--shadow-pop);animation:pop var(--med)}
.consent p{margin:0 0 12px;font-size:13.5px;color:var(--muted);line-height:1.5}
.consent b{color:var(--ink)}
.consent-btns{display:flex;gap:8px;flex-wrap:wrap}
.consent .btn{padding:9px 14px;font-size:11.5px;min-height:38px}

/* ── Tiles modèles ── */
.model-row{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.model-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.model-tile{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:box-shadow var(--fast),border-color var(--fast)}
.model-tile:hover{border-color:#d5d4cf;box-shadow:var(--shadow-pop)}
.mt-media{background:#fff;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden}
.mt-media img{width:88%;height:88%;object-fit:contain;mix-blend-mode:darken;transition:transform var(--med)}
.model-tile:hover .mt-media img{transform:scale(1.06)}
.mt-body{display:flex;flex-direction:column;gap:1px;padding:9px 10px;border-top:1px solid var(--line)}
.mt-name{font-size:12.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mt-meta{font-size:11px;color:var(--muted);white-space:nowrap}
.model-tiles-page{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}

/* ── Tiles marques (surfaces claires) ── */
.brand-row{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.brand-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.brand-tile{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:box-shadow var(--fast),border-color var(--fast)}
.brand-tile:hover{border-color:#d5d4cf;box-shadow:var(--shadow-pop)}
.bt-media{background:#fff;aspect-ratio:4/2.6;display:flex;align-items:center;justify-content:center;overflow:hidden}
.bt-media img{width:80%;height:80%;object-fit:contain;mix-blend-mode:darken;transition:transform var(--med)}
.brand-tile:hover .bt-media img{transform:scale(1.06)}
.bt-body{display:flex;align-items:center;justify-content:center;gap:7px;padding:9px 10px;border-top:1px solid var(--line)}
.bt-name{font-size:12.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bt-cta{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.brand-tile:hover .bt-cta{color:var(--ink)}
.brand-tiles-page{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
/* tuile typographique volontaire (fallback catégorie sans image) */
.tile-typo .bt-media,.tile-typo .mt-media{background:var(--surface-dark)}
.tile-typo .bt-media span,.tile-typo .mt-media span{font-family:var(--disp);color:#fff;font-size:clamp(26px,3vw,40px);letter-spacing:.03em;text-transform:uppercase}

/* ── Tiles prix (image et texte SÉPARÉS) ── */
.price-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.price-tile{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:box-shadow var(--fast),border-color var(--fast)}
.price-tile:hover{border-color:#d5d4cf;box-shadow:var(--shadow-pop)}
.pt-media{background:#fff;aspect-ratio:1/.72;display:flex;align-items:center;justify-content:center;overflow:hidden}
.pt-media img{width:84%;height:84%;object-fit:contain;mix-blend-mode:darken;transition:transform var(--med)}
.price-tile:hover .pt-media img{transform:scale(1.06)}
.pt-body{padding:12px 15px;border-top:1px solid var(--line);display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.pt-label{font-size:14.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.pt-count{font-size:12px;color:var(--muted);white-space:nowrap}

/* ── Heat under 200 : tile édito + produits ── */
.heat-layout{display:grid;grid-template-columns:35fr 65fr;gap:12px;align-items:stretch}
.heat-tile{position:relative;background:var(--surface-dark);color:#fff;border-radius:var(--r);padding:clamp(20px,2.4vw,34px);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;min-height:300px}
.heat-tile .disp{font-size:clamp(30px,3vw,46px);line-height:.96}
.heat-tile p{color:var(--muted-dark);font-size:13.5px;margin:10px 0 16px;max-width:30ch}
.heat-tile .btn{align-self:flex-start}
.heat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}

/* ── Most wanted ── */
.mw-list{list-style:none;margin:0;padding:0}
.mw-list li{border-bottom:1px solid var(--line)}
.mw-list li:first-child{border-top:1px solid var(--line)}
.mw-list a{display:flex;align-items:center;gap:clamp(12px,2.4vw,28px);padding:8px clamp(2px,1vw,8px);transition:background var(--fast)}
.mw-list a:hover{background:var(--surface-soft)}
.mw-n{font-family:var(--disp);font-size:clamp(20px,2.2vw,30px);color:var(--muted);min-width:2ch}
.mw-list img{width:clamp(74px,7.4vw,104px);height:clamp(74px,7.4vw,104px);object-fit:contain;mix-blend-mode:multiply}
.mw-info b{display:block;font-size:clamp(14px,1.4vw,16.5px);line-height:1.25;font-weight:700}
.mw-info small{color:var(--muted);font-size:12.5px}
.mw-go{margin-left:auto;font-size:clamp(17px,1.9vw,24px);color:var(--muted)}
.mw-list a:hover .mw-go{color:var(--ink)}


/* ── Story (moment fort sombre, sans produit) ── */
.story{background:var(--surface-dark);color:#fff}
.story-in{display:grid;grid-template-columns:3fr 2fr;gap:clamp(24px,4.4vw,72px);padding-block:clamp(38px,4.6vw,68px);align-items:center}
.story-title{font-size:clamp(30px,3.8vw,58px);line-height:.98}
.story-title span{display:block}
.story-title span:last-child{color:var(--accent)}
.story-in p{color:var(--muted-dark);max-width:52ch;margin:16px 0 0;font-size:14.5px}
.story-loc{letter-spacing:.16em;text-transform:uppercase;font-size:11px!important;font-weight:700;color:#fff!important}
.story-points{display:flex;flex-direction:column}
.story-points div{padding:15px 0;border-bottom:1px solid var(--line-dark)}
.story-points div:first-child{border-top:1px solid var(--line-dark)}
.story-points b{display:block;font-size:14.5px;margin-bottom:2px;color:#fff}
.story-points span{font-size:13px;color:var(--muted-dark)}

/* ── Sourcing ── */
.sourcing{border-top:1px solid var(--line)}
.sourcing-in{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-block:clamp(26px,3vw,44px)}
.sourcing-in h2{font-size:clamp(18px,2vw,24px);font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.sourcing-in p{color:var(--muted);margin:4px 0 0;font-size:14px}

/* ── Horizontal scroll mobile ── */
.hscroll{scrollbar-width:none}
.hscroll::-webkit-scrollbar{display:none}

/* ── Catalogue ── */
.cat-head{padding-block:clamp(18px,2.4vw,30px) 0}
.cat-head h1{font-size:clamp(26px,3vw,40px);font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.cat-intro{color:var(--muted);margin:8px 0 0;font-size:14px;max-width:60ch}
.crumbs{display:flex;gap:8px;font-size:12px;color:var(--muted);flex-wrap:wrap;letter-spacing:.04em;margin-bottom:6px}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.cat{padding-block:14px 64px}
.cat-bar{display:flex;align-items:center;gap:12px;padding-block:12px;border-bottom:1px solid var(--ink);position:sticky;top:60px;background:var(--surface-main);z-index:10}
.btn-filters{position:relative;padding:9px 18px;min-height:40px}
.btn-filters .badge-n{top:-6px;right:-6px;background:var(--accent)}
.cat-sort{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}
.cat-sort select{border:1px solid var(--line);padding:8px 10px;font-size:13px;background:#fff;color:var(--ink);cursor:pointer;min-height:40px;font-weight:600;border-radius:var(--r)}
.cat-count{margin-left:auto;font-size:12.5px;color:var(--muted);white-space:nowrap;letter-spacing:.04em}
.cat-active{display:flex;gap:8px;flex-wrap:wrap;padding-block:10px}
.cat-active:empty{display:none}
.pill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--ink);background:var(--ink);color:#fff;padding:6px 12px;font-size:12px;font-weight:600;cursor:pointer;letter-spacing:.03em;border-radius:var(--r)}
.pill::after{content:"✕";font-size:10px;opacity:.7}
.pill:hover{background:var(--accent);border-color:var(--accent)}
.cat-layout{display:grid;grid-template-columns:248px 1fr;gap:clamp(18px,2.6vw,40px);padding-top:20px}
/* position:sticky SANS hauteur maximale : des que le panneau depasse la
   hauteur de l ecran — et avec des dizaines de pointures c est systematique —
   son bas devient inatteignable, la page defilant sous un element colle.
   On le rend donc defilant lui-meme. overscroll-behavior:contain evite que le
   defilement se propage a la page quand on arrive en butee. */
.filters{align-self:start;position:sticky;top:122px}
/* Restreint au desktop A DESSEIN. En mode tiroir (<=960 px) le panneau est
   deja un flex vertical a hauteur bornee dont SEUL .filters-body defile, et le
   pied reste colle en bas. Y ajouter overflow sur le parent decale ce pied hors
   de l ecran — regression mesuree : bouton « Voir les resultats » a 30 px sous
   le bord. */
@media (min-width:961px){
  .filters{max-height:calc(100dvh - 140px);overflow-y:auto;overscroll-behavior:contain;padding-right:4px}
}
.filters-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px}
.filters-head h2{font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.filters .drawer-close{display:none}
.filters-foot{display:none}
.fgroup{border-bottom:1px solid var(--line);padding-block:13px}
.fgroup>button{display:flex;justify-content:space-between;align-items:center;width:100%;background:none;border:0;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;padding:4px 0;min-height:34px}
.fgroup>button::after{content:"+";color:var(--muted);font-size:16px}
.fgroup.open>button::after{content:"–"}
.fgroup .fbody{display:none;padding-top:11px}
.fgroup.open .fbody{display:block}
.fopt{display:flex;align-items:center;gap:10px;padding:7px 2px;font-size:13.5px;cursor:pointer}
.fopt:hover{background:var(--surface-soft)}
.fopt input{width:16px;height:16px;accent-color:var(--ink)}
.fopt .fn{color:var(--muted);margin-left:auto;font-size:11.5px}
.fsizes{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.fsize{border:1px solid var(--line);background:#fff;min-height:40px;font-size:13px;font-weight:700;cursor:pointer;border-radius:var(--r);transition:all var(--fast)}
.fsize:hover{border-color:var(--ink)}
.fsize.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.fprice{display:flex;align-items:center;gap:8px;font-size:13px}
.fprice input{width:100%;border:1px solid var(--line);padding:9px;font-size:14px;min-height:40px;border-radius:var(--r)}
.cat-more{text-align:center;padding-top:26px}
.state{text-align:center;padding:56px 20px;color:var(--muted)}
.state h3{color:var(--ink);font-size:clamp(20px,2.4vw,30px);margin-bottom:8px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.state-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:18px}

/* ── PDP ── */
.pdp{padding-block:clamp(14px,2vw,26px) 0}
.pdp-grid{display:grid;grid-template-columns:55fr 45fr;gap:clamp(22px,3.4vw,56px);align-items:start;margin-top:12px}
.pdp-left{position:sticky;top:74px}
.pdp-media{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:pan-y}
.pdp-media img{width:100%;height:100%;object-fit:contain;padding:5%;mix-blend-mode:multiply;user-select:none;-webkit-user-drag:none}
.pdp-media.spinning{cursor:grab}
.pdp-media.spinning:active{cursor:grabbing}
.media-ctl{display:none}
.mc-btn{background:var(--surface-main);border:0;padding:9px 16px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;min-height:38px}
.mc-btn.on{background:var(--ink);color:#fff}
/* Plus d'indice « glisse pour faire tourner » : le tour est charge d'emblee,
   donc la chaussure tourne au premier contact sans qu'il faille l'annoncer.
   L'affordance restante : le curseur grab ci-dessus, et la barre sous la
   chaussure qui se remplit puis suit la rotation. */
.pdp-media:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* Barre de rotation, sous la chaussure. Deux couches superposees : la claire
   dit ce qui est charge, la sombre ou l on en est dans le tour. Pleine = on a
   atteint la derniere vue, et la rotation s arrete la (elle ne boucle pas). */
.spin-bar{position:absolute;inset:auto 0 10px 0;margin-inline:auto;width:min(220px,52%);height:4px;background:var(--line);border-radius:2px;overflow:hidden;pointer-events:none}
.spin-bar i{position:absolute;inset:0;display:block;transform:scaleX(0);transform-origin:left;border-radius:2px}
.spin-bar .sb-charge{background:#d8d7d2;transition:transform .25s}
.spin-bar .sb-pos{background:var(--ink);transition:transform .06s linear}
.pdp-brand{display:flex;align-items:center;gap:10px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700}
.pdp-brand .tag{position:static}
.pdp-info h1{font-size:clamp(21px,2.3vw,30px);font-weight:800;letter-spacing:-.01em;margin-top:8px;line-height:1.12}
.pdp-cw{color:var(--muted);font-size:13.5px;margin:6px 0 0}
.pdp-price{display:flex;align-items:baseline;gap:12px;margin:16px 0 4px;flex-wrap:wrap}
.pdp-price .pp{font-size:clamp(22px,2.3vw,30px);font-weight:800;transition:opacity var(--fast)}
.pdp-price .pp.flash{animation:priceFlash .35s}
@keyframes priceFlash{from{opacity:.15}}
.pdp-price-note{font-size:12px;color:var(--muted)}
.pdp-sizes{margin-top:18px}
.pdp-sizes-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}
.pdp-sizes-head h2{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase}
.unit-toggle{display:flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.ut{background:#fff;border:0;padding:6px 13px;font-size:11.5px;font-weight:700;cursor:pointer;min-height:32px}
.ut.on{background:var(--ink);color:#fff}
.size-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:7px}
/* ── Pointures en feuille sur telephone ──────────────────────────────────────
   Un acheteur ne compare pas trente pointures, il cherche la sienne. Deployee,
   la grille repoussait le prix et le bouton d achat tres bas sur un ecran de
   telephone. On la replie donc derriere un declencheur qui porte l information
   utile — combien de pointures, a partir de quel prix — et elle ne s ouvre que
   sur demande. Au-dela de 960 px la grille reste en place : la colonne a la
   place de l afficher sans rien repousser, et c est le meme seuil que le CTA
   colle en bas, donc un seul comportement mobile a retenir.
   ⚠ Pilote par une CLASSE sur <body>, jamais par l attribut `hidden` : une
   media query pose deja `display` sur ces blocs et aurait ecrase `hidden`.
   Ce piege s est deja paye trois fois sur ce projet (.favs-empty, .badge-n,
   le srcset du 360). Ici l ouverture joue sur transform + visibility, donc
   la transition existe et rien ne depend d une bagarre de specificite. */
.size-open,.pdp-sizes-back,.size-close{display:none}
@media (max-width:960px){
  .size-open{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;
    min-height:var(--tap);padding:12px 16px;margin-top:18px;border:1px solid var(--ink);background:#fff;
    border-radius:var(--r);cursor:pointer;font:inherit;color:inherit;text-align:left}
  .size-open .so-l{font-weight:800;font-size:14px}
  .size-open .so-r{font-size:12.5px;color:var(--muted);white-space:nowrap}
  /* Une fois la pointure choisie le declencheur devient un etat, pas un appel :
     il affiche ce que le client a retenu et son prix. */
  .size-open.chosen{background:var(--ink);border-color:var(--ink);color:#fff}
  .size-open.chosen .so-r{color:rgba(255,255,255,.74)}

  .pdp-sizes{position:fixed;left:0;right:0;bottom:0;z-index:96;margin:0;max-width:560px;margin-inline:auto;
    background:var(--surface-main);border-radius:12px 12px 0 0;box-shadow:0 -8px 40px rgba(16,16,18,.18);
    padding:16px 16px calc(16px + env(safe-area-inset-bottom));max-height:78dvh;overflow-y:auto;
    transform:translateY(101%);visibility:hidden;
    /* visibility n'est PAS interpolee comme le reste : elle attend la fin du
       glissement a la FERMETURE (delai = duree) et bascule instantanement a
       l'OUVERTURE. Sans ce decoupage, la feuille restait invisible pendant les
       premieres frames et focus() refusait d'y entrer — un navigateur ne donne
       pas le focus dans un sous-arbre `visibility:hidden`. Ainsi l'ouverture ne
       depend plus d'une frame ni d'un requestAnimationFrame. */
    transition:transform var(--med),visibility 0s linear var(--med)}
  body.sizes-open .pdp-sizes{transform:none;visibility:visible;transition:transform var(--med),visibility 0s}
  .pdp-sizes-back{display:block;position:fixed;inset:0;z-index:95;background:rgba(16,16,18,.44);
    opacity:0;visibility:hidden;transition:opacity var(--med),visibility var(--med)}
  body.sizes-open .pdp-sizes-back{opacity:1;visibility:visible}
  body.sizes-open{overflow:hidden}
  /* L en-tete reste atteignable quand la liste est longue : la croix ne doit
     jamais partir hors de portee du pouce apres un defilement. */
  .pdp-sizes-head{position:sticky;top:0;background:var(--surface-main);padding:6px 0 10px;margin:0;z-index:1}
  .size-close{display:grid;place-items:center;position:static;width:var(--tap);height:var(--tap);margin:-6px -6px -6px 0}
}
@media (prefers-reduced-motion:reduce){.pdp-sizes,.pdp-sizes-back{transition:none}}
.size{display:flex;flex-direction:column;gap:1px;align-items:center;border:1px solid var(--line);background:#fff;padding:10px 6px;min-height:56px;cursor:pointer;border-radius:var(--r);transition:all var(--fast)}
.size:hover:not(:disabled){border-color:var(--ink)}
.size .size-main{font-weight:800;font-size:13.5px}
.size .size-price{font-size:11px;color:var(--muted);font-weight:600}
.size[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.size[aria-pressed="true"] .size-price{color:#c9c9cd}
.size:disabled{opacity:.35;cursor:not-allowed}
.size:disabled .size-main{text-decoration:line-through}
.pdp-buy{margin-top:20px;display:flex;flex-direction:column;gap:13px}
.pdp-trust{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px;font-size:12px;color:var(--muted)}
.pdp-trust li::before{content:"✓ ";color:var(--ok)}
.acc{margin-top:22px;border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{padding:14px 2px;font-weight:700;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:var(--tap)}
.acc summary::after{content:"+";font-size:18px;color:var(--muted)}
.acc details[open] summary::after{content:"–"}
.acc details p{margin:0 0 15px;color:var(--muted);font-size:13.5px;max-width:64ch}
.acc a{text-decoration:underline}
.pdp-dl{margin:0 0 15px;display:flex;flex-direction:column;gap:7px}
.pdp-dl div{display:flex;justify-content:space-between;gap:14px;font-size:13.5px}
.pdp-dl dt{color:var(--muted)}
.pdp-dl dd{margin:0;font-weight:600;text-align:right}
.pdp-sticky{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--surface-main);border-top:1px solid var(--ink);padding:9px clamp(14px,4vw,30px) calc(9px + env(safe-area-inset-bottom));display:none;align-items:center;gap:12px}
.pdp-sticky .ps-price{font-size:15px;font-weight:800;white-space:nowrap}
.pdp-sticky .btn{flex:1}
/* story panel produit : clair, sobre */
.pstory{background:#fff;border-block:1px solid var(--line);overflow:hidden;margin-top:clamp(28px,3.6vw,48px)}
.pstory-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,48px);align-items:center;padding-block:clamp(30px,3.6vw,52px)}
.pstory-in img{width:100%;max-width:440px;mix-blend-mode:multiply;justify-self:center}
.pstory-brand{font-size:11px;letter-spacing:.24em;color:var(--muted);font-weight:700;text-transform:uppercase}
.pstory-txt h2{font-family:var(--disp);font-size:clamp(24px,3vw,44px);line-height:.98;margin:10px 0;text-transform:uppercase}
.pstory-txt p{color:var(--muted);margin:5px 0;font-size:14px}
.pstory-sku{font-family:ui-monospace,Consolas,monospace;letter-spacing:.08em;font-size:12.5px!important}

/* ── Détail hero (marque/modèle) : compact ── */
.dhero{border-bottom:1px solid var(--line);background:#fff;overflow:hidden}
.dhero-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,44px);align-items:center;padding-block:clamp(20px,2.6vw,40px)}
.dhero-copy h1{font-size:clamp(30px,3.6vw,52px);font-weight:800;letter-spacing:.03em;text-transform:uppercase;margin:10px 0 6px}
.dhero-copy p{color:var(--muted);margin:0 0 16px;font-size:14px}
.dhero-img{width:100%;max-width:440px;mix-blend-mode:multiply;justify-self:center}
.dhero-subnav{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.dhero-subnav a{border:1px solid var(--line);background:#fff;padding:8px 14px;font-size:12.5px;font-weight:700;letter-spacing:.04em;border-radius:var(--r);transition:all var(--fast)}
.dhero-subnav a:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ── Pages / panier / commande ── */
.page{padding-block:clamp(16px,2.4vw,32px) 64px}
.page h1{font-size:clamp(26px,3vw,40px);font-weight:800;letter-spacing:.04em;text-transform:uppercase;margin:8px 0 20px}
.page .lead{font-size:16px;color:var(--muted);max-width:60ch}
.page h2{font-size:15px;letter-spacing:.06em;text-transform:uppercase;margin:24px 0 6px}
.page p,.page li{color:var(--muted);font-size:14.5px;max-width:70ch}
.callout{background:var(--surface-soft);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;font-size:13.5px;color:var(--muted);margin-block:14px}
.p404{text-align:center;padding-block:clamp(44px,7vw,100px)}
.p404 h1{font-family:var(--disp);font-size:clamp(44px,7vw,104px);line-height:.95;font-weight:400}
.p404 .lead{margin:16px auto 6px}
.p404 .state-cta{margin-top:24px}
.cart-root{min-height:30vh}
.cart-layout{display:grid;grid-template-columns:1fr 390px;gap:clamp(20px,3.4vw,48px);align-items:start}
.cart-row{display:flex;gap:15px;padding-block:18px;border-bottom:1px solid var(--line);align-items:center}
.cart-row .ct{width:90px;height:90px;background:#fff;border:1px solid var(--line);border-radius:var(--r);display:flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 auto}
.cart-row .ct img{width:100%;height:100%;object-fit:contain;padding:8px;mix-blend-mode:multiply}
.cart-row .info{flex:1;min-width:0}
.cart-row .info .n{font-weight:700;font-size:14.5px;line-height:1.25}
.cart-row .info .s{font-size:12.5px;color:var(--muted);margin-top:3px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:9px}
.qty button{width:36px;height:36px;border:0;background:#fff;cursor:pointer;font-size:16px}
.qty button:hover{background:var(--surface-soft)}
.qty span{min-width:32px;text-align:center;font-weight:700;font-size:13.5px}
.cart-row .rp{text-align:right;display:flex;flex-direction:column;gap:9px;align-items:flex-end}
.cart-row .rp b{font-size:15px;font-weight:800}
.rm{background:none;border:0;color:var(--muted);font-size:12px;cursor:pointer;text-decoration:underline;min-height:30px}
.rm:hover{color:var(--danger)}
.summary{background:var(--surface-soft);border:1px solid var(--line);border-radius:var(--r);padding:24px;position:sticky;top:82px}
.summary h2{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 14px}
.sline{display:flex;justify-content:space-between;gap:12px;font-size:14px;margin-block:8px;color:var(--muted)}
.sline b{color:var(--ink)}
.sline.total{color:var(--ink);font-weight:800;font-size:16px;border-top:1px solid var(--ink);padding-top:13px;margin-top:13px}
.sline.total span:last-child{font-size:19px}
.snote{font-size:11.5px;color:var(--muted);margin-top:11px}
/* Le bloc `.modes` / `.mode` d'avant la refonte du tunnel a ete SUPPRIME ici le
   17.08.2026. C'etait du code mort — le seul markup .mode du projet est celui
   du tunnel v2, rendu par src/app.js — mais un code mort qui nuisait : son
   `.mode.sel{background:var(--ink);color:#fff}` avait la MEME specificite
   (0,2,0) que celui du v2 plus bas. Le v2, etant apres, gagnait sur `background`
   (fond clair --surface-soft) mais ne declarait aucun `color` : le `#fff` de
   l'ancien survivait au fond sombre qui le justifiait. Resultat mesure :
   #ffffff sur #f3f2ef = 1,12:1, le titre de l'option choisie et le prix de
   l'envoi etaient invisibles. Desormais `.mode.sel` herite de body → --ink sur
   --surface-soft = 17,1:1.
   Supprimer valait mieux que reposer une couleur par-dessus : la ligne
   `.mode.sel small{color:#c9c9cd}` etait une mine dormante, de specificite
   identique a `.mode .mt small` et ne perdant que par l'ordre du fichier. */
.form{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.form .full{grid-column:1/-1}
.field label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.field input,.field textarea{width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:var(--r);font-size:16px;color:var(--ink);background:#fff;outline:none;font-family:inherit;min-height:var(--tap)}
.field input:focus,.field textarea:focus{border-color:var(--ink)}
.field input.err,.field textarea.err{border-color:var(--danger)}
.cgv{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;padding-block:4px}
.cgv input{margin-top:2px;width:18px;height:18px;flex:0 0 auto;accent-color:var(--ink)}
.cgv.err{color:var(--danger)}
.cgv a{text-decoration:underline}
.clause{font-size:12.5px;color:var(--muted);background:var(--surface-soft);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.errbox{background:rgba(192,38,38,.07);border:1px solid rgba(192,38,38,.35);border-radius:var(--r);color:var(--danger);padding:13px 15px;font-size:13.5px;margin-bottom:15px;white-space:pre-line}
.errbox[hidden]{display:none}
.btn-loading{position:relative;pointer-events:none}
.btn-loading::after{content:"";width:15px;height:15px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;margin-left:4px}
@keyframes spin{to{transform:rotate(360deg)}}
.steps{display:flex;gap:6px;align-items:center;margin:0 0 20px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
.steps b{color:var(--ink)}
.steps i{font-style:normal;opacity:.4}

/* ── Pages de confiance : etapes numerotees ── */
.steps-list{list-style:none;margin:26px 0 0;padding:0;counter-reset:st}
.steps-list li{display:flex;gap:clamp(14px,2.4vw,30px);padding:20px 0;border-top:1px solid var(--line)}
.steps-list li:last-child{border-bottom:1px solid var(--line)}
.steps-list .sn{font-family:var(--disp);font-size:clamp(20px,2.2vw,28px);color:var(--accent);line-height:1;min-width:2.2ch;padding-top:2px}
.steps-list h2{font-size:15px;letter-spacing:.06em;text-transform:uppercase;margin:0 0 5px}
.steps-list p{margin:0;max-width:62ch}
.page-two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,36px);margin-top:22px}
.page-two h2{margin-top:0}
.page-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
/* PDP : le sourcing ne doit jamais etre une impasse */
.pdp-sourcing{font-size:12.5px;color:var(--muted);margin:2px 0 0;text-align:center}
.pdp-sourcing a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.pdp-sourcing a:hover{color:var(--accent)}

/* ── Confirmation ── */
.confirm{text-align:center;max-width:600px;margin:0 auto;padding-block:20px}
.confirm .cmark{font-family:var(--disp);font-size:clamp(34px,5vw,58px);line-height:1;text-transform:uppercase}
.confirm .cmark.ok{color:var(--ok)}
.confirm .cmark.warn{color:var(--warn)}
.confirm h1{font-size:clamp(24px,3.4vw,40px);font-weight:800;letter-spacing:.04em;text-transform:uppercase;margin:8px 0 10px}
.confirm .lead{margin:0 auto 6px;font-size:15px}
.confirm .ono{font-family:ui-monospace,Consolas,monospace;font-weight:800;font-size:17px;background:var(--surface-soft);border:1px solid var(--line);border-radius:var(--r);padding:9px 16px;display:inline-block;margin:14px 0 4px;letter-spacing:.06em}
.confirm .rc{text-align:left;background:var(--surface-soft);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;margin:22px 0}
.confirm .next{font-size:13.5px;color:var(--muted)}

/* ── Footer ── */
.ftr{background:var(--surface-dark);color:var(--muted-dark);margin-top:20px}
.ftr-brand-row{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;padding-block:clamp(30px,3.6vw,48px) 22px;border-bottom:1px solid var(--line-dark)}
.ftr-logo{font-family:var(--disp);font-size:clamp(24px,2.8vw,36px);color:#fff;letter-spacing:.03em}
.ftr-tag{font-size:12px;color:#7c7c84;letter-spacing:.08em;text-transform:uppercase}
.ftr-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-block:26px}
.ftr-cols h4{color:#fff;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;margin:0 0 12px}
.ftr-cols div{display:flex;flex-direction:column;gap:8px}
.ftr-cols a,.ftr-cols span{font-size:13.5px;color:var(--muted-dark)}
.ftr-cols a:hover{color:#fff}
.ftr-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line-dark);padding-block:16px 24px;font-size:11.5px;color:#7c7c84;letter-spacing:.03em}
/* Le credit du bas de pied. Discret par defaut, lisible au survol : il informe
   sans concurrencer le contenu legal a cote. `white-space:nowrap` pour qu il ne
   se coupe pas en deux lignes sur telephone, ou le flex passe a la ligne. */
.ftr-credit{white-space:nowrap}
.ftr-credit a{color:inherit;text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--line-dark);transition:color .18s,text-decoration-color .18s}
.ftr-credit a:hover,.ftr-credit a:focus-visible{color:#fff;text-decoration-color:currentColor}

/* ═══════════ RESPONSIVE ═══════════ */
@media (min-width:1700px){
  .grid-cards{grid-template-columns:repeat(5,1fr)}
}
@media (max-width:1180px){
  .grid-cards{grid-template-columns:repeat(3,1fr)}
  .mega-in{grid-template-columns:1fr 1fr 1fr;gap:26px}
  .mega-tile{display:none}
  .heat-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:960px){
  .hdr-nav{display:none}
  .hdr-burger{display:flex}
  .icon-lbl{display:none}
  /* Les fleches des carrousels ne servent a rien au doigt : on fait glisser le
     rail. Elles ne faisaient que 34 px de haut, donc sous le seuil tactile de
     44 px, et encombraient l en-tete de section. On masque les BOUTONS
     seulement, pas .rail-nav, qui porte aussi le lien « Tout voir → ». */
  .rail-btn{display:none}
  .hero-grid{grid-template-columns:1fr;min-height:0;padding-block:26px 8px;gap:6px}
  .hero-comp{max-width:560px;margin:0 auto 10px;width:100%;height:clamp(280px,52vw,380px)}
  .camp-in,.story-in,.dhero-in,.pstory-in{grid-template-columns:1fr}
  .camp-comp{max-width:480px;margin:0 auto;width:100%}
  .dhero-img{max-width:340px;order:-1}
  .pstory-in img{max-width:340px}
  .model-tiles,.brand-tiles{grid-template-columns:repeat(2,1fr)}
  .model-row,.brand-row{grid-template-columns:repeat(3,1fr)}
  .price-tiles{grid-template-columns:repeat(2,1fr)}
  .heat-layout{grid-template-columns:1fr}
  .heat-tile{min-height:200px}
  .cat-layout{grid-template-columns:1fr}
  .filters{position:fixed;inset:auto 0 0 0;top:auto;z-index:85;background:var(--surface-main);box-shadow:0 -12px 40px rgba(0,0,0,.2);max-height:84vh;display:none;flex-direction:column;padding:18px 18px 0;border-radius:10px 10px 0 0}
  .filters.open{display:flex;animation:sheetUp var(--med)}
  .filters .drawer-close{display:block}
  .filters-body{overflow-y:auto;flex:1;padding-bottom:10px}
  .filters-foot{display:flex;gap:10px;padding:13px 0 calc(13px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
  .filters-foot .btn{flex:1}
  .pdp-grid{grid-template-columns:1fr}
  .pdp-left{position:relative;top:0}
  .pdp-sticky{display:flex}
  .cart-layout{grid-template-columns:1fr}
  .summary{position:relative;top:0}
  .cat-bar{top:59px}
}
@media (max-width:640px){
  body{font-size:14.5px}
  /* L'en-tete tenait sur 375 px dans un ecran de 360 (mesure du 18.08.2026 :
     burger 43 + marque 90 + 4 icones de 44 + gap 24) : TOUTES les pages
     defilaient lateralement de 15 px. Les icones perdent en largeur seulement —
     la cible verticale reste a 44 px. */
  .hdr-in{gap:12px}
  .icon-btn{min-width:40px;padding:0 6px}
  /* Barre catalogue : « Trier » devient un libelle de lecteur d'ecran (le
     select se comprend seul a cote de « Filtres ») et le compteur retrecit —
     il depassait de 16 px a 360. min-width:0 + ellipsis : quoi qu'il arrive,
     le compteur cede avant de pousser la page. */
  .cat-bar{gap:10px}
  .cat-sort label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .cat-count{font-size:11.5px;min-width:0;overflow:hidden;text-overflow:ellipsis}
  /* Pied de page : 4 colonnes fixes n'avaient AUCUNE regle responsive —
     « Confidentialité » ne peut pas se couper, la colonne 1fr ne descend pas
     sous son mot le plus long, et la page debordait de 29 px a 320. */
  .ftr-cols{grid-template-columns:1fr 1fr;gap:22px 16px}
  /* scroll-padding : sans lui le snapport commence au bord de la boite, le
     navigateur aligne la premiere carte sur x=0 et mange la gouttiere
     (mesure : scrollLeft 16, carte a 0 — le rail Trending, lui, tombait juste) */
  .hscroll{display:flex;overflow-x:auto;gap:10px;scroll-snap-type:x mandatory;padding-bottom:6px;margin-inline:calc(-1*var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
  .hscroll .card{min-width:58vw;scroll-snap-align:start}
  .grid:not(.hscroll).grid-cards,.heat-grid{grid-template-columns:repeat(2,1fr);gap:9px}
  .model-tiles{grid-template-columns:1fr}
  /* ── Navigation : une ligne qui glisse, plus une grille qui empile ──
     Empilees a deux colonnes, modeles + marques + prix coutaient huit ecrans
     de defilement pour seize tuiles de categorie — soit huit ecrans avant le
     premier produit. En rail, chaque famille tient sur une ligne. */
  .model-row,.brand-row,.price-tiles{
    display:grid;grid-auto-flow:column;grid-template-columns:none;
    overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding-bottom:4px;
    margin-inline:calc(-1*var(--gutter));padding-inline:var(--gutter);
    scroll-padding-inline:var(--gutter)}
  .model-row::-webkit-scrollbar,.brand-row::-webkit-scrollbar,.price-tiles::-webkit-scrollbar{display:none}
  .model-row>*,.brand-row>*,.price-tiles>*{scroll-snap-align:start}
  /* largeurs choisies pour qu une tuile soit toujours coupee au bord droit :
     sans ce debord, rien n indique que la ligne continue */
  .model-row,.brand-row{grid-auto-columns:40vw;gap:8px}
  .price-tiles{grid-auto-columns:57vw;gap:9px}
  /* favoris : l etat vide est le cas normal a la premiere visite, il n a pas a
     coûter un demi-ecran */
  .hscroll .favs-empty{min-width:86vw;min-height:0;padding:20px 18px}
  .camp-in{padding-block:26px}
  .camp-copy p{margin:9px 0 14px}
  .consent{left:10px;right:10px;max-width:none}
  .rail{grid-auto-columns:minmax(150px,1fr)}
  /* TELEPHONE : UNE SEULE PAIRE. Mesure du 17.08.2026 a 390 px de large : la
     diagonale a deux chaussures donnait deux vignettes de 169 px cote a cote —
     on ne voyait bien ni l'une ni l'autre, et le hero n'avait plus de sujet.
     La premiere prend donc toute la largeur (88 %), legerement inclinee, et la
     seconde disparait. La diagonale reste au-dessus de 640 px, ou il y a la
     place de la lire. L'image cachee n'est PAS telechargee : elle porte
     loading="lazy" (voir build.mjs) et une image sans boite de rendu n'entre
     jamais dans le champ, donc le navigateur ne la demande pas. */
  /* La scene absolue redevient un bloc simple, donc sa hauteur SUIT l'image au
     lieu d'etre fixee : c'est ce qui supprime le grand vide sous la chaussure.
     .hc-1 passe en position:relative et non static — l'ombre .hc::before est
     absolue et doit rester ancree sur la chaussure. */
  .hero-comp{height:auto;max-width:400px;margin:0 auto 12px}
  .hc-1{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:100%;--rot:-2deg;--shade:.12}
  .hc-2,.hc-3{display:none}
  .brand-tiles{grid-template-columns:repeat(2,1fr)}
  .form{grid-template-columns:1fr}
  /* zones tactiles : 44px minimum sur les cibles reellement utilisees au pouce
     (mesure : coeur 34px, filtres/tri/pointures 40px avant correction) */
  .card-fav{width:44px;height:44px;top:2px;right:2px}
  .btn-filters,.cat-sort select{min-height:44px}
  .fsize{min-height:44px}
  .qty button{width:44px;height:44px}
  .rm{min-height:44px;display:inline-flex;align-items:center}
  .page-two{grid-template-columns:1fr;gap:0}
  .search-box{margin:0;height:100dvh;max-width:none;display:flex;flex-direction:column}
  .search-results{max-height:none;flex:1}
  .trust-in{justify-content:flex-start;gap:13px;font-size:10px}
  .pdp-trust{grid-template-columns:1fr}
  .size-grid{grid-template-columns:repeat(3,1fr)}
  .fsizes{grid-template-columns:repeat(4,1fr)}
  .mw-list img{width:64px;height:64px}
  .hero h1{font-size:clamp(34px,10.4vw,48px)}
  .hero-sub{margin:12px 0 18px}
  /* Deux boutons cote a cote font 172 px chacun a 390 px de large ; « Decouvrir
     les sneakers » en capitales espacees en reclame ~200 px, donc les deux
     passaient a la ligne et montaient a 73 px de haut. Mesure du 17.08.2026.
     Empiles, ils tiennent sur une ligne chacun et donnent deux cibles pleine
     largeur, plus faciles au pouce. */
  .hero-cta{flex-direction:column;gap:9px}
  .hero-cta .btn{width:100%}
  .minicart-panel{width:100vw}
  .card-name{font-size:12.5px}
  .card-body{padding:10px 11px 11px}
  .mt-body,.bt-body,.pt-body{padding:11px 12px}
}
@media (max-width:400px){
  /* Sous 400 px, l'en-tete reduit encore : la marque a 15 px et des icones de
     36 px de large (hauteur tactile toujours 44) font tenir le tout dans 320. */
  .hdr-in{gap:8px}
  .brand{font-size:15px}
  .icon-btn{min-width:36px;padding:0 4px}
}
@media (max-width:360px){
  .grid:not(.hscroll).grid-cards{gap:8px}
  .size-grid{grid-template-columns:repeat(2,1fr)}
}
@keyframes sheetUp{from{transform:translateY(30px);opacity:0}}


/* ══════════ Tunnel de commande v2 (checkout + confirmation) ══════════
   Namespaces co- et cf- : rien ici ne fuit vers le reste du site. */

/* header épuré */
.hdr-secure{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--muted);margin-left:auto}
.hdr-secure svg{color:var(--ok)}
.hdr-back{font-size:12px;color:var(--muted);white-space:nowrap;margin-left:18px}
.hdr-back:hover{color:var(--ink)}
[data-page="checkout"] .hdr-burger{display:none}

/* la page commande respire dans une colonne plus étroite que le site */
[data-page="checkout"] .page.wrap,[data-page="confirmation"] .page.wrap{max-width:1120px}

/* stepper minimaliste */
.stp{list-style:none;display:flex;align-items:center;gap:clamp(10px,2.4vw,26px);margin:0 0 26px;padding:0;font-size:11px;letter-spacing:.11em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.stp li{display:flex;align-items:center;gap:8px}
.stp li:not(:first-child)::before{content:"";width:clamp(14px,3vw,34px);height:1px;background:var(--line);margin-right:clamp(10px,2.4vw,26px)}
.stp i{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border:1px solid var(--line);border-radius:50%;font-size:10px;font-style:normal;flex:0 0 auto;background:#fff}
.stp li.fait i{background:var(--ink);border-color:var(--ink);color:#fff}
.stp li.ici{color:var(--ink)}
.stp li.ici i{border-color:var(--ink);color:var(--ink)}

/* colonnes : ~64/36, résumé sticky */
.co-layout{display:grid;grid-template-columns:1fr 368px;gap:clamp(22px,3.4vw,52px);align-items:start}
.co-sec{margin-bottom:26px}
.co-h{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 12px}
.co-note{font-size:12.5px;color:var(--muted);margin:0 0 12px}
.co-secnote{margin-top:10px;text-align:center}
.co-form{display:block}
.co-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.co-grid .full{grid-column:1/-1}
.field label em{font-style:normal;text-transform:none;letter-spacing:0;font-weight:500;color:var(--muted)}
.ferr{margin:5px 0 0;font-size:12px;color:var(--danger)}
.ferr[hidden]{display:none}
.co-cta{width:100%;margin-top:16px}
.co-form .clause{margin-block:6px 14px}
.co-form .cgv{margin-block:2px}

/* ═══ Page « La boutique » — la preuve physique ═══
   Trois photos, une adresse, un itineraire. Les cadres imposent leur ratio
   (aspect-ratio + object-fit cover) : aucune reprise de mise en page au
   chargement, et la photo de salle, presque carree, se recadre proprement. */
.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.shop-grid figure{margin:0;aspect-ratio:3/4;overflow:hidden;border-radius:var(--r);background:var(--surface-soft)}
.shop-grid img{width:100%;height:100%;object-fit:cover;display:block}
.shop-addr{font-style:normal;font-size:15px;line-height:1.65;margin:0 0 14px}
.shop-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.shop-list li{position:relative;padding-left:24px;font-size:14.5px;line-height:1.5}
.shop-list li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:800}
@media (max-width:640px){
  /* le mur en pleine largeur d'abord — c'est lui qui fait « wow » — puis les
     deux autres cote a cote */
  .shop-grid{grid-template-columns:1fr 1fr}
  .shop-grid figure:first-child{grid-column:1/-1;aspect-ratio:4/5}
}

.lang-suggest{display:flex;align-items:center;justify-content:center;gap:14px;background:var(--ink);color:#fff;padding:10px 16px;font-size:13.5px;font-weight:600}
.lang-suggest a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.lang-suggest button{background:none;border:0;color:#fff;opacity:.7;cursor:pointer;font-size:15px;line-height:1;padding:4px}
.lang-suggest button:hover{opacity:1}

/* Bandeau langue sur les pages de prose non traduites */
.lang-note{background:var(--surface-soft);border:1px solid var(--line);border-radius:var(--r);padding:10px 14px;margin:0 0 20px;font-size:13px;color:var(--muted)}

/* ── Sélecteur de langue ── */
.lang-sw{display:inline-flex;align-items:center;gap:2px;font-size:12px;font-weight:700;letter-spacing:.04em}
.lang-sw a,.lang-sw .ls-cur{padding:6px 6px;border-radius:var(--r);color:var(--muted);text-decoration:none;line-height:1}
.lang-sw a:hover{color:var(--ink)}
.lang-sw .ls-cur{color:var(--ink)}
.lang-hdr{margin-right:4px}
.lang-drawer{margin:18px 0 6px;font-size:14px}
.lang-drawer a,.lang-drawer .ls-cur{padding:8px 10px;min-height:var(--tap);display:inline-flex;align-items:center}
@media (max-width:960px){.lang-hdr{display:none}}

/* options de réception */
.modes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0}
.mode{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;text-align:left;border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:14px 15px;cursor:pointer;min-height:64px;transition:border-color var(--fast),background var(--fast),box-shadow var(--fast)}
.mode .mi{width:17px;height:17px;color:var(--muted);flex:0 0 auto;transition:color var(--fast)}
.mode .mt{font-size:13.5px;font-weight:700;line-height:1.25}
.mode .mt small{display:block;font-weight:500;font-size:11.5px;color:var(--muted);margin-top:2px}
.mode .mp{font-size:13px;font-weight:800;white-space:nowrap}
.mode .mp.gratuit{color:var(--ok)}
.mode:hover{border-color:#c9c8c3}
.mode:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* `color` est declare EXPRESSEMENT alors que l'heritage suffirait : c'est
   l'omission de cette propriete qui a laissé un `color:#fff` d'un autre bloc
   survivre ici. L'ecrire rend l'etat selectionne lisible par construction —
   fond clair ET texte encre dans la meme regle — donc une future regle
   « selection inversee » ne peut plus le casser en silence. */
.mode.sel{border-color:var(--ink);background:var(--surface-soft);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.mode.sel .mi{color:var(--ink)}
/* --muted sur --surface-soft ne fait que 4,32:1, sous le seuil AA de 4,5 pour
   du 11,5 px ; --graphite donne 13,3:1 sur le meme fond. */
.mode.sel .mt small{color:var(--graphite)}

/* résumé : lignes produits avec photo, total dominant */
.co-sum h2{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 14px}
.co-items{margin-bottom:14px}
.co-it{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;padding-block:10px;border-bottom:1px solid var(--line)}
.co-it:last-child{border-bottom:0}
.co-img{display:block;width:56px;height:56px;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.co-img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:darken}
.co-in b{display:block;font-size:13px;line-height:1.3}
.co-in span{font-size:12px;color:var(--muted)}
.co-ip{font-size:13.5px;font-weight:800;white-space:nowrap}
.co-tva{font-size:11.5px;color:var(--muted);margin:8px 0 0}
.co-trust{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--line)}
.co-trust li{display:flex;gap:9px;align-items:flex-start;font-size:12px;color:var(--muted);margin-block:7px;line-height:1.45}
.co-trust svg{flex:0 0 auto;margin-top:3px;color:var(--ok)}

/* ── confirmation ── */
.cf{max-width:660px;margin:0 auto;padding-block:8px}
.cf-hero{text-align:center;margin-bottom:26px}
.cf-badge{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;margin-bottom:14px;font-weight:800;font-size:20px}
.cf-badge.ok{background:var(--ok-soft);color:var(--ok)}
.cf-badge.ok svg{width:18px;height:18px}
.cf-badge.warn{background:var(--warn-soft);color:var(--warn)}
.cf-hero h1{font-size:clamp(22px,3.2vw,32px);font-weight:800;letter-spacing:.05em;text-transform:uppercase;margin:0 0 8px}
.cf-lead{color:var(--muted);font-size:14.5px;margin:0 auto;max-width:44ch}
.cf-num{display:inline-flex;align-items:center;gap:12px;margin-top:16px;background:var(--surface-soft);border:1px solid var(--line);border-radius:var(--r);padding:9px 9px 9px 16px}
.cf-num span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.cf-num b{font-family:ui-monospace,Consolas,monospace;font-size:14.5px;letter-spacing:.04em}
.cf-copy{border:1px solid var(--line);background:#fff;border-radius:var(--r);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:7px 11px;cursor:pointer;transition:all var(--fast);min-height:32px}
.cf-copy:hover{border-color:var(--ink)}
.cf-copy.ok{color:var(--ok);border-color:var(--ok)}
.cf-tl{list-style:none;display:flex;justify-content:center;gap:clamp(12px,4vw,34px);margin:0 0 26px;padding:0;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.cf-tl li{display:flex;align-items:center;gap:8px}
.cf-tl li:not(:first-child)::before{content:"";width:clamp(16px,4vw,40px);height:1px;background:var(--line);margin-right:clamp(12px,4vw,34px)}
.cf-tl i{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border:1px solid var(--line);border-radius:50%;background:#fff;flex:0 0 auto}
.cf-tl li.done{color:var(--ink)}
.cf-tl li.done i{background:var(--ok);border-color:var(--ok);color:#fff}
.cf-card{text-align:left;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;margin-bottom:14px}
.cf-card h2{font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 12px}
.cf-card p{margin:0 0 6px;font-size:14px;line-height:1.55}
.cf-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cf-actions{text-align:center;margin-top:26px}
.cf-actions .btn{min-width:min(320px,100%)}
.cf-help{display:block;margin-top:14px;font-size:12.5px;color:var(--muted);text-decoration:underline}
.cf-help:hover{color:var(--ink)}

@media (max-width:960px){
  .co-layout{grid-template-columns:1fr}
  /* le résumé passe AVANT le formulaire : on vérifie ce qu'on achète, puis on
     remplit — c'est l'ordre de lecture naturel sur téléphone */
  .co-sum{order:-1;position:static}
  .cf-two{grid-template-columns:1fr}
  .hdr-back{display:none}
}
@media (max-width:640px){
  .modes{grid-template-columns:1fr}
  .co-grid{grid-template-columns:1fr}
  .co-grid .field:has(#f-npa){grid-column:auto}
  .stp li span{display:none}
  .stp li.ici span{display:inline}
  /* La frise d'etapes debordait de 22 px a 360 (mesure du 18.08.2026) : en
     ligne, trois libelles + connecteurs ne tiendront jamais dans 360 px.
     Passage au motif mobile classique — le libelle SOUS la pastille, trois
     colonnes egales, le connecteur en absolu entre les pastilles. Tient a
     280 px, et « Prete au retrait » peut passer sur deux lignes sans casser. */
  .cf-tl{display:grid;grid-template-columns:repeat(3,1fr);gap:0 4px}
  .cf-tl li{flex-direction:column;gap:7px;text-align:center;position:relative}
  .cf-tl li span{font-size:10px}
  .cf-tl li:not(:first-child)::before{position:absolute;top:9px;left:calc(-50% + 14px);right:calc(50% + 14px);width:auto;margin:0}
}
@media (max-width:400px){
  /* Stepper du checkout : 4 pastilles + « INFORMATIONS » debordaient de 37 px
     a 320. Pastilles, connecteurs et corps reduits d'un cran.
     CE BLOC DOIT RESTER APRES les regles de base .stp : places avant (pres du
     bloc 400px de l'en-tete), il perdait la cascade a specificite egale et
     le navigateur l'ignorait — mesure, pas conjecture. */
  .stp{gap:7px;font-size:10px}
  .stp i{width:18px;height:18px}
  .stp li:not(:first-child)::before{width:8px;margin-right:7px}
}
@media (prefers-reduced-motion:reduce){
  .mode,.cf-copy{transition:none}
}

/* ═══════════════ Espace compte (ac-) ═══════════════
   Deux ecrans : l'entree (panneau de marque + carte de connexion) et le tableau
   de bord (identite, trois chiffres, commandes repliables, colonne d'appoint).
   Tout est bati sur les jetons du site — encre, lignes fines, Anton pour le
   titre — pour que le compte semble etre NE avec le site, pas ajoute. */
/* tete pleine dans l en-tete quand une session existe */
.icon-btn.on svg{fill:currentColor}
.ac{max-width:1060px;margin-inline:auto}
/* Le fil d'Ariane doublonne avec les onglets de la carte sur une page outil
   noindex : ~180px de meuble avant le premier champ a 390px. */
[data-page="compte"] .crumbs{display:none}
/* Le chemin de secours n1 (mot de passe oublie) avait une cible de ~19px ;
   le rendu ne change pas, la zone passe a 44px. */
.co-secnote .cf-help{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 12px}
.ac-note-carte{margin:10px 0 0;text-align:center;font-size:12px}
.ac-cmd-in .cf-tl{margin:2px 0 16px}

/* ── L'entree ── */
.ac-auth{display:grid;grid-template-columns:1fr minmax(360px,430px);gap:clamp(26px,5vw,72px);align-items:center;padding-block:clamp(6px,3vh,34px)}
.ac-seul{grid-template-columns:minmax(320px,430px);justify-content:center}
.ac-brand .disp{font-size:clamp(34px,4.4vw,58px);line-height:.98;margin:10px 0 20px}
.ac-brand .hl{color:var(--accent)}
.ac-points{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.ac-points li{position:relative;padding-left:27px;font-size:14px;color:var(--graphite)}
.ac-points li::before{content:"✓";position:absolute;left:0;top:1px;width:17px;height:17px;border-radius:50%;background:var(--ink);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center}
.ac-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px}
.ac-form{padding:clamp(20px,3vw,28px);box-shadow:var(--shadow-pop)}
.ac-titre{font-size:19px;line-height:1.25;margin:6px 0 16px}
.ac-tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line);margin-bottom:16px}
.ac-tabs [role=tab]{border:0;background:none;padding:12px 4px;min-height:var(--tap);font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--fast)}
.ac-tabs [role=tab].on{color:var(--ink);border-bottom-color:var(--ink)}
.ac-tabs [role=tab]:hover{color:var(--ink)}
/* L'oeil vit DANS le champ : position absolue sur un conteneur dedie, jamais sur
   .field, pour ne pas se battre avec le label. */
.ac-mdp{position:relative}
.ac-mdp input{padding-right:46px;width:100%}
.ac-oeil{position:absolute;right:2px;top:2px;bottom:2px;width:42px;border:0;background:none;cursor:pointer;color:var(--muted);display:grid;place-items:center;border-radius:var(--r)}
.ac-oeil:hover,.ac-oeil.on{color:var(--ink)}
.ac-sep{display:flex;align-items:center;gap:12px;margin:16px 0 14px;color:var(--muted);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}
.ac-sep::before,.ac-sep::after{content:"";flex:1;height:1px;background:var(--line)}
.ac-invite{width:100%}

/* ── Le tableau de bord ── */
.ac-head{display:flex;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.ac-ava{width:52px;height:52px;flex:0 0 auto;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:800;font-size:16px;letter-spacing:.05em}
.ac-qui{display:grid;min-width:0}
.ac-qui b{font-size:15.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-qui span{font-size:12px;color:var(--muted)}
.ac-out{margin-left:auto}
.ac-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:22px}
.ac-stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:13px 16px}
.ac-stat b{display:block;font-size:22px;line-height:1.15}
.ac-stat span{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.ac-cols{display:grid;grid-template-columns:1fr 312px;gap:24px;align-items:start}
.ac-h{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 12px}
.ac-side{display:grid;gap:12px;position:sticky;top:86px}
.ac-adr{margin:0 0 10px;line-height:1.62;font-size:14px}

/* La commande repliee : une ligne dense, le detail au clic. <details> natif =
   clavier et lecteur d'ecran sans une ligne de JS. */
.ac-cmd{background:#fff;border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px}
.ac-cmd summary{list-style:none;display:flex;align-items:center;gap:13px;padding:13px 16px;min-height:var(--tap);cursor:pointer;-webkit-tap-highlight-color:transparent}
.ac-cmd summary::-webkit-details-marker{display:none}
.ac-cmd summary:hover{background:var(--surface-soft)}
.ac-cmd[open]{box-shadow:var(--shadow-pop)}
.ac-cmd[open] summary:hover{background:none}
.ac-minis{display:flex;flex:0 0 auto}
.ac-minis img{width:44px;height:44px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:var(--r)}
.ac-minis img+img{margin-left:-15px}
.ac-cmd-t{display:grid;min-width:0;flex:1}
.ac-cmd-t b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-cmd-t b small{color:var(--muted);font-weight:700}
.ac-cmd-t>small{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-pill{flex:0 0 auto;font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:5px 9px;border-radius:999px;white-space:nowrap}
.ac-pill.ok{background:var(--ok-soft);color:var(--ok)}
.ac-pill.warn{background:var(--warn-soft);color:var(--warn)}
.ac-cmd-p{flex:0 0 auto;font-size:13.5px;font-weight:800;white-space:nowrap}
.ac-chev{flex:0 0 auto;color:var(--muted);transition:transform var(--fast)}
.ac-cmd[open] .ac-chev{transform:rotate(180deg)}
.ac-cmd-in{border-top:1px solid var(--line);padding:14px 16px 16px}
.ac-cmd-cta{margin-top:12px}
.ac-vide{text-align:center;padding:34px 0 10px}
.ac-vide .disp{font-size:clamp(30px,5vw,46px);line-height:.98;margin-bottom:10px}
.ac-vide .hl{color:var(--accent)}
.ac-vide .co-note{margin:0 0 18px}

@media (max-width:960px){
  /* La carte de connexion passe DEVANT l'argumentaire : c'est elle qu'on vient
     chercher. Le panneau de marque suit, en pied. */
  .ac-auth{grid-template-columns:1fr;gap:26px;align-items:start}
  .ac-brand{order:2}
  .ac-brand .disp{font-size:clamp(30px,8vw,40px)}
  .ac-cols{grid-template-columns:1fr}
  .ac-side{position:static}
}
@media (max-width:640px){
  [data-page="compte"] h1{margin-bottom:10px}
  .ac-auth{padding-block:2px 26px}
  .ac-stats{gap:8px}
  .ac-stat{padding:11px 12px}
  .ac-stat b{font-size:19px}
  /* La ligne de commande passe sur deux rangs : produit en haut, statut et prix
     en bas — rien ne deborde, rien ne se tronque a l'aveugle. */
  .ac-cmd summary{flex-wrap:wrap;row-gap:6px}
  .ac-cmd-t{flex:1 1 55%}
  .ac-pill{order:3;margin-left:0}
  .ac-cmd-p{order:4;margin-left:auto}
  .ac-chev{order:5}
  .ac-out{order:9;margin-left:0}
}