/* ============================================================================
   GOOD ALLURE — v6 « blanc »
   ----------------------------------------------------------------------------
   Refonte façon MUGO DEPARTMENT, version CLAIRE. La page est BLANCHE ; les
   packshots produits sont shootés sur un gris clair (#efefef) = la couleur des
   tuiles : posés dessus, le vêtement flotte, sans bord de carte visible.

   Règles héritées des deux références (mugo + Jacquemus), inchangées :
   typo neutre et PETITE (Jost, variable 300-700), images en grand, angles droits,
   zéro décoration criarde. AUCUNE couleur : blanc, noir, gris. Pas de jaune.
   L'accent (badge, étiquette, focus, séparateur) est l'encre elle-même.

   MOUVEMENT : l'état par défaut est TOUJOURS l'état visible. Tout ce qui pose un
   opacity:0 est enfermé dans @supports (animation-timeline) + prefers-reduced-
   motion:no-preference. Firefox ne sait pas encore animer au scroll : un
   opacity:0 posé dehors y resterait invisible pour de bon. (piège vérifié)
   ========================================================================== */

/* Le corps est un GROTESQUE NEUTRE (Archivo), pas une géométrique. C'est ce qui
   sépare une boutique de mode d'un site de marque : les capitales sont étroites,
   les terminaisons horizontales, l'ensemble se lit sans se faire remarquer.
   Jost est conservé en repli pour les pages héritées qui partagent ce fichier. */
@font-face{font-family:"Archivo";font-style:normal;font-weight:300 700;font-display:swap;src:url("assets/fonts/archivo-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Archivo";font-style:normal;font-weight:300 700;font-display:swap;src:url("assets/fonts/archivo-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Jost";font-style:normal;font-weight:300 700;font-display:swap;src:url("assets/fonts/jost-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Jost";font-style:normal;font-weight:300 700;font-display:swap;src:url("assets/fonts/jost-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"GA Mono";font-style:normal;font-weight:400 500;font-display:swap;src:url("assets/fonts/ibm-plex-mono-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"GA Mono";font-style:normal;font-weight:400 500;font-display:swap;src:url("assets/fonts/ibm-plex-mono-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
/* La police du LOGO good allure : Open Sans italique (variable 300-800), grasse et
   arrondie. On l'oppose au Jost bâton du corps. C'est le contraste de la page. */
@font-face{font-family:"GA Display";font-style:italic;font-weight:300 800;font-display:swap;src:url("assets/fonts/open-sans-italic-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"GA Display";font-style:italic;font-weight:300 800;font-display:swap;src:url("assets/fonts/open-sans-italic-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root{
  --bg:#ffffff;                   /* la page, blanc */
  --paper:#ffffff;                /* la couleur qui contraste avec un élément plein */
  --tile:#efefef;                 /* les tuiles produit = fond des packshots (gris clair) */
  --raise:#f6f6f6;                /* une surface à peine soulevée (newsletter) */
  --ink:rgba(0,0,0,.84);          /* le noir de Mugo : 84 %, pas 100 */
  --ink-full:#000000;
  --ink-60:rgba(0,0,0,.58);
  --ink-40:rgba(0,0,0,.56);
  --line:rgba(0,0,0,.12);
  --line-2:rgba(0,0,0,.20);
  --pop:#000000;                  /* plus de jaune : l'accent est l'encre elle-même */
  /* Alias de compat pour les pages pro/événements qui partagent ce fichier. */
  --ink-50:rgba(0,0,0,.56);
  --ink-35:rgba(0,0,0,.42);

  --mono:"GA Mono","SFMono-Regular",Menlo,Consolas,monospace;
  --sans:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;

  --t-xs:11px; --t-s:12px; --t-m:14px; --t-l:16px; --t-xl:20px;
  --t-disp:clamp(28px,5vw,52px);  /* les rares grands titres éditoriaux */

  /* L'INTERFACE parle en capitales serrées : nav, boutons, prix, labels,
     onglets. Les grands énoncés, eux, restent en police-logo italique. C'est
     tout l'arbitrage de la DA : la rigueur d'un côté, la signature de l'autre. */
  --ui-track:.09em;
  --ui-track-l:.14em;

  --gap:20px;
  --pad:clamp(10px,2vw,22px);
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--sans);font-weight:400;font-size:var(--t-m);line-height:1.6;
  color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
::selection{background:var(--pop);color:var(--paper)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:10px;top:10px;z-index:999;background:var(--pop);color:var(--paper);padding:10px 16px}
:focus-visible{outline:2px solid var(--pop);outline-offset:2px}
.hp{position:absolute;left:-9999px}

/* ── Typographie ─────────────────────────────────────────────────────────── */
.t{font-size:var(--t-xl);font-weight:400;text-transform:uppercase;letter-spacing:.02em;line-height:1.25}
.t--s{font-size:var(--t-m);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
/* La voix « display » = la police du logo (Open Sans italique 800, arrondie). */
.disp{font-family:"GA Display","Jost",sans-serif;font-style:italic;font-weight:800;font-size:var(--t-disp);line-height:1;letter-spacing:-.02em;text-transform:lowercase}
.disp em{font-style:italic;font-weight:800}
/* Les titres de rubrique. Ils étaient dans la police du logo : à seize
   occurrences par site, celle-ci ne signalait plus rien et devenait un motif.
   Elle est désormais réservée aux grands énoncés (.disp), rares et forts. Ici,
   l'interface parle sa propre langue : grotesque, capitales, serré. */
.gad{
  font-family:var(--sans);
  font-style:normal;
  font-weight:500;
  font-size:var(--t-l);
  text-transform:uppercase;
  letter-spacing:.02em;
  line-height:1.15;
}
.lead{font-size:var(--t-l);font-weight:300;line-height:1.5;max-width:44ch;color:var(--ink)}
.p{color:var(--ink-60);max-width:60ch}
.mini{font-size:var(--t-s);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-40)}

/* ── Boutons : rectangle plein, inversé pour le fond sombre ──────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:50px;padding:16px 26px;
  font-size:var(--t-s);font-weight:500;letter-spacing:var(--ui-track-l);text-transform:uppercase;
  background:var(--ink-full);color:var(--paper);border:1px solid var(--ink-full);
  border-radius:0;transition:background .3s var(--ease),color .3s var(--ease);
}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.34;pointer-events:none}
.btn:hover{background:transparent;color:var(--ink-full)}
.btn--ghost{background:transparent;color:var(--ink-full)}
.btn--ghost:hover{background:var(--ink-full);color:var(--paper)}
.btn--block{width:100%}

/* Lien souligné au survol */
.lnk{position:relative;display:inline-flex;align-items:center;min-height:44px;font-size:var(--t-m);text-transform:uppercase;letter-spacing:.03em}
.lnk::after{content:"";position:absolute;left:0;right:0;bottom:12px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform .4s var(--ease)}
.lnk:hover::after{transform:scaleX(1);transform-origin:0 50%}

/* ── Bandeau ticker : les phrases running qui défilent ──────────────────── */
.ticker{overflow:hidden;background:var(--bg);border-bottom:1px solid var(--line)}
.ticker__in{display:flex;width:max-content;will-change:transform}
.ticker__g{display:flex;flex:0 0 auto}
.ticker__g span{
  display:inline-flex;align-items:center;padding:9px 0;white-space:nowrap;
  font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.16em;color:var(--ink-60);
}
.ticker__g span::after{content:"";display:inline-block;width:4px;height:4px;margin:0 30px;border-radius:50%;background:var(--pop)}
@media (prefers-reduced-motion:no-preference){
  .ticker__in{animation:ticker 38s linear infinite}
  @keyframes ticker{to{transform:translateX(-50%)}}
}

/* ── En-tête ─────────────────────────────────────────────────────────────── */
.bar{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.72);
  backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s;
}
.bar.is-solid{border-bottom-color:var(--line);background:rgba(255,255,255,.92)}
.bar__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;height:58px;padding:0 var(--pad)}
.bar__nav{display:flex;gap:22px;min-width:0}
.bar__nav a,.bar__act a,.bar__act button{
  font-size:var(--t-xs);font-weight:500;letter-spacing:var(--ui-track-l);text-transform:uppercase;color:var(--ink);
  white-space:nowrap;transition:opacity .25s;
}
.bar__nav a:hover,.bar__act a:hover{opacity:.55}
.bar__logo{justify-self:center;display:inline-flex;align-items:center;min-height:44px}
.bar__logo img{height:20px;width:auto;max-width:100%}
@media (max-width:460px){.bar__logo img{height:17px}}
.bar__act{justify-self:end;display:flex;align-items:center;gap:18px;min-width:0}
.bar__act a{display:inline-flex;align-items:center;min-height:44px}
.bar__cart{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
.bar__count{
  position:absolute;top:7px;right:0;min-width:15px;height:15px;padding:0 4px;
  display:grid;place-items:center;border-radius:50%;background:var(--pop);color:var(--paper);
  font-size:9px;font-weight:600;line-height:1;
}
@media (max-width:820px){.bar__nav a:nth-child(n+3){display:none}}
@media (max-width:460px){.bar__nav a:nth-child(n+2){display:none}}

.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:70;transform-origin:0 50%;transform:scaleX(0);background:var(--pop)}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero{position:relative;height:calc(100svh - 58px);min-height:460px;overflow:hidden;background:var(--tile)}
.hero img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.hero__veil{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.66) 0%,rgba(0,0,0,.22) 30%,rgba(0,0,0,0) 55%),
             linear-gradient(to bottom,rgba(0,0,0,.34) 0%,rgba(0,0,0,0) 24%);
}
.hero__cap{
  position:absolute;inset:auto 0 0 0;z-index:2;
  padding:0 var(--pad) clamp(26px,5vh,60px);color:#fff;
  display:flex;flex-direction:column;gap:14px;
}
.hero__kick{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.22em;color:rgba(255,255,255,.8)}
.hero__cap .disp{color:#fff;max-width:16ch}
.hero__cta{display:inline-flex;align-items:center;gap:10px;margin-top:6px;font-size:var(--t-s);text-transform:uppercase;letter-spacing:.08em;color:#fff}
.hero__cta span{position:relative;padding-bottom:4px}
.hero__cta span::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:#fff;transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--ease)}
.hero__cta:hover span::after{transform:scaleX(1)}
.hero__cta svg{width:14px;height:14px}

/* ── Rythme de page ──────────────────────────────────────────────────────── */
.wrap{padding:0 var(--pad)}
.sec{padding-block:clamp(56px,7vw,104px)}
.head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:24px}
.head .t{position:relative;padding-left:18px}
.head .t::before{content:"";position:absolute;left:0;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--pop)}
.rule{height:1px;background:var(--line);border:0}

/* ── Grille produit ──────────────────────────────────────────────────────── */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap)}
@media (min-width:680px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1080px){.grid--4{grid-template-columns:repeat(4,1fr)}}
.card{display:block}
.card__m{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--tile)}
.card__m img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.card:hover .card__m img{transform:scale(1.045)}
.card__tag{
  position:absolute;left:0;top:0;padding:5px 10px;background:var(--pop);color:var(--paper);
  font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;z-index:2;
}
/* Le bouton « voir » qui monte au survol */
.card__peek{
  position:absolute;left:10px;right:10px;bottom:10px;z-index:2;
  display:flex;align-items:center;justify-content:center;min-height:40px;
  background:rgba(22,22,24,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  color:#fff;font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.1em;
  opacity:0;transform:translateY(8px);transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.card:hover .card__peek,.card:focus-visible .card__peek{opacity:1;transform:none}
@media (hover:none){.card__peek{display:none}}
.card__b{display:flex;justify-content:space-between;gap:12px;margin-top:13px;font-size:var(--t-xs)}
.card__n{text-transform:uppercase;font-weight:500;letter-spacing:var(--ui-track);color:var(--ink);line-height:1.35}
.card__p{white-space:nowrap;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:var(--ui-track)}
.card__s{margin-top:4px;font-size:var(--t-xs);color:var(--ink-40);text-transform:uppercase;letter-spacing:var(--ui-track)}
/* Une pièce pas encore en vente ne se déguise pas en pièce en vente. */
.card--soon .card__m img{filter:grayscale(1) contrast(.96);opacity:.72}
.card--soon .card__tag{background:transparent;color:var(--ink);border:1px solid var(--line-2)}

/* ── Bandes d'image pleine largeur ──────────────────────────────────────── */
.band{position:relative;overflow:hidden;background:var(--tile)}
.band--tall{height:min(90svh,940px);min-height:400px}
.band--wide{aspect-ratio:16/7}
@media (max-width:760px){
  .band--wide{aspect-ratio:4/5}
  .band--wide::after{height:70%}
}
.band img{width:100%;height:100%;object-fit:cover}
.band::after{
  content:"";position:absolute;inset:auto 0 0 0;height:60%;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.80) 0%,rgba(0,0,0,.50) 35%,rgba(0,0,0,.18) 70%,rgba(0,0,0,0) 100%);
}
.band__c{position:absolute;inset:auto 0 0 0;z-index:1;padding:0 var(--pad) clamp(26px,4vw,44px);color:#fff}
.band__c .disp{color:#fff;max-width:18ch}
.band__c p{font-size:var(--t-xl);text-transform:lowercase;letter-spacing:.01em;max-width:24ch;line-height:1.3}

/* ── Deux colonnes ───────────────────────────────────────────────────────── */
.duo{display:grid;grid-template-columns:1fr;gap:var(--gap)}
@media (min-width:900px){
  .duo{grid-template-columns:1fr 1fr;align-items:center}
  .duo--rev>.duo__t{order:-1}
  .duo__t{padding:0 clamp(16px,3vw,56px)}
}
.duo__m{aspect-ratio:3/4;overflow:hidden;background:var(--tile)}
.duo__m--wide{aspect-ratio:4/3}
.duo__m img{width:100%;height:100%;object-fit:cover}
.duo__t .p{margin-top:16px}
.duo__t .btn,.duo__t .lnk{margin-top:22px}

/* ── Colonnes de texte (le manifeste) ───────────────────────────────────── */
.cols{display:grid;grid-template-columns:1fr;gap:var(--gap)}
@media (min-width:760px){.cols{grid-template-columns:repeat(3,1fr)}}
.col{border-top:1px solid var(--line);padding-top:16px}
.col h3{font-size:var(--t-m);font-weight:600;text-transform:uppercase;letter-spacing:.03em;margin-bottom:8px}
.col h3.gad{font-size:clamp(23px,2.6vw,32px);font-weight:800;text-transform:lowercase;letter-spacing:-.01em;margin-bottom:10px}
.col .p{color:var(--ink-60)}

/* ── La maison : le manifeste ──────────────────────────────────────────────
   Un grand énoncé en police-logo (cascadé au scroll), puis trois principes
   numérotés dont le filet du haut se dessine à l'entrée. Contraste maintenu :
   énoncé + intertitres arrondis / corps en Jost bâton. */
.maison__intro{margin-bottom:clamp(48px,8vw,112px)}
@media (min-width:900px){.maison__intro{display:grid;grid-template-columns:1.4fr .8fr;gap:clamp(32px,5vw,72px);align-items:end}}
.maison__label{display:block;margin-bottom:clamp(16px,2.4vw,26px)}
.maison__stmt{font-size:clamp(32px,6vw,74px);max-width:15ch}
.maison__stmt span{display:block}
.maison__lead{align-self:end}
@media (max-width:899px){.maison__lead{margin-top:26px}}

.pillars{display:grid;grid-template-columns:1fr;gap:0;list-style:none;padding:0;counter-reset:pr}
@media (min-width:760px){.pillars{grid-template-columns:repeat(3,1fr);gap:var(--gap)}}
.pillar{position:relative;padding-top:22px;border-top:1px solid var(--line)}
@media (max-width:759px){.pillar{padding-block:24px}.pillar:first-child{border-top:0;padding-top:0}}
/* Le filet noir qui se dessine par-dessus le filet gris, à l'entrée. */
.pillar::after{content:"";position:absolute;left:0;top:-1px;right:0;height:1px;background:var(--ink-full);transform:scaleX(0);transform-origin:0 50%}
@media (max-width:759px){.pillar:first-child::after{display:none}}
.pillar__n{display:block;color:var(--ink-40);margin-bottom:14px}   /* la forme est donnée plus bas, en chasse fixe */
.pillar h3.gad{font-size:clamp(23px,2.6vw,32px);margin-bottom:10px}
.pillar .p{color:var(--ink-60)}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    /* L'énoncé monte ligne par ligne. */
    .maison__stmt span{opacity:0;transform:translateY(22px);animation:rise .8s var(--ease) forwards;animation-timeline:view();animation-range:entry 0% cover 26%}
    .maison__stmt span:nth-child(2){animation-range:entry 5% cover 30%}
    .maison__stmt span:nth-child(3){animation-range:entry 10% cover 34%}
    /* Le filet noir se dessine, puis le contenu du principe monte. */
    .pillar::after{animation:draw .95s var(--ease) forwards;animation-timeline:view();animation-range:entry 0% cover 14%}
    @keyframes draw{to{transform:scaleX(1)}}
    .pillar__n,.pillar h3,.pillar .p{opacity:0;transform:translateY(16px);animation:rise .75s var(--ease) forwards;animation-timeline:view();animation-range:entry 4% cover 24%}
    .pillar h3{animation-range:entry 7% cover 27%}
    .pillar .p{animation-range:entry 10% cover 30%}
  }
}

/* ── Newsletter + pied + wordmark ───────────────────────────────────────── */
.foot-block,.dark{background:var(--bg);border-top:1px solid var(--line)}
.dark{color:var(--ink)}
.mail{display:grid;grid-template-columns:1fr;gap:24px;padding-block:clamp(48px,6vw,84px)}
@media (min-width:900px){.mail{grid-template-columns:1fr 1fr;align-items:start;gap:48px}}
.mail .p{color:var(--ink-60)}
.f{display:flex;border:1px solid var(--line-2);background:var(--raise)}
.f input{flex:1 1 auto;min-width:0;min-height:54px;padding:14px 16px;font:inherit;background:transparent;color:var(--ink-full);border:0}
.f input::placeholder{color:var(--ink-40)}
.f input:focus{outline:none}
.f button{flex:0 0 auto;min-height:54px;padding:14px 24px;background:var(--ink-full);color:var(--paper);font-size:var(--t-s);text-transform:uppercase;letter-spacing:.06em;transition:background .25s,color .25s}
.f button:hover{background:var(--pop);color:var(--paper)}
.f__note{margin-top:10px;font-size:var(--t-s);color:var(--ink-40)}
.f__note.is-ok{color:var(--pop)}

.foot{padding-block:clamp(40px,5vw,64px) 24px}
.foot__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
@media (min-width:900px){.foot__grid{grid-template-columns:repeat(4,1fr)}}
.foot__grid>*{min-width:0}
.foot h4{font-size:var(--t-s);text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px;color:var(--ink)}
.foot li{margin-bottom:9px}
.foot a,.foot li{color:var(--ink-60);font-size:var(--t-m)}
.foot a{overflow-wrap:anywhere}
.foot a:hover{color:var(--ink-full)}
.foot__bot{margin-top:36px;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:var(--t-s);color:var(--ink-40)}
/* Le wordmark en GROS dans le pied, façon mugo — rendu en TEXTE (la police du
   logo), donc net à n'importe quelle taille (le PNG d'origine pixellisait). */
.mark{padding:clamp(40px,7vw,96px) var(--pad) clamp(40px,6vw,72px);overflow:hidden}
.mark__word{display:block;text-align:center;font-family:"GA Display","Jost",sans-serif;font-style:italic;font-weight:800;text-transform:lowercase;letter-spacing:-.03em;line-height:.84;font-size:clamp(54px,14.5vw,230px);color:var(--ink-full);white-space:nowrap}
.mark img{width:min(360px,74vw);height:auto;opacity:.92}

/* ── Page produit (PDP) ─────────────────────────────────────────────────── */
.pdp__grid{display:grid;grid-template-columns:1fr;gap:var(--gap);padding-top:clamp(20px,3vw,40px)}
@media (min-width:900px){.pdp__grid{grid-template-columns:1.35fr 1fr;gap:clamp(24px,3vw,56px);align-items:start}}
.pdp__media{display:grid;grid-template-columns:1fr;gap:var(--gap)}
@media (min-width:560px){.pdp__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}}
.pdp__f{margin:0;aspect-ratio:4/5;overflow:hidden;background:var(--tile)}
.pdp__f img{width:100%;height:100%;object-fit:cover}
.pdp__info{position:static}
@media (min-width:900px){.pdp__info{position:sticky;top:82px}}
.pdp__price{font-size:var(--t-l);margin-top:10px;color:var(--ink)}
.pdp__soon{margin-top:18px;font-size:var(--t-s);text-transform:uppercase;letter-spacing:.06em;color:var(--pop)}
.sizes{border:0;margin-top:22px}
.sizes legend{font-size:var(--t-s);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-40);margin-bottom:10px}
.sizes .set{display:flex;flex-wrap:wrap;gap:8px}
.size{position:relative}
.size input{position:absolute;opacity:0;inset:0;cursor:pointer}
.size span{display:grid;place-items:center;min-width:48px;height:44px;padding:0 12px;border:1px solid var(--line-2);font-size:var(--t-s);letter-spacing:.04em;transition:.2s}
.size input:checked+span{background:var(--ink-full);color:var(--paper);border-color:var(--ink-full)}
.size input:focus-visible+span{outline:2px solid var(--pop);outline-offset:2px}
.f--light{margin-top:16px}
.pdp__note{margin-top:10px;font-size:var(--t-s);color:var(--ink-40)}
.pdp__note.is-ok{color:var(--pop)}
.pdp__note.is-bad{color:var(--ink-full);border-left:2px solid var(--pop);padding-left:10px}
.size:hover span{border-color:var(--line-2)}
.specs{margin-top:28px;border-top:1px solid var(--line)}
.specs div{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line);font-size:var(--t-s)}
.specs dt{color:var(--ink-40);text-transform:uppercase;letter-spacing:.05em}
.specs dd{color:var(--ink);text-align:right}

/* ============================================================================
   MOUVEMENT — scroll-driven, facultatif par construction (jamais bloquant).
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  /* Ken-burns lent du hero : marche partout, ne cache rien. */
  .hero img{animation:kenburns 26s var(--ease) infinite alternate}
  @keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.13)}}
}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .rv{opacity:0;transform:translateY(20px);animation:rise .85s var(--ease) forwards;animation-timeline:view();animation-range:entry 2% cover 20%}
    .rv[data-d="1"]{animation-range:entry 5% cover 24%}
    .rv[data-d="2"]{animation-range:entry 8% cover 28%}
    .rv[data-d="3"]{animation-range:entry 11% cover 32%}
    @keyframes rise{to{opacity:1;transform:none}}

    /* Les cartes montent en cascade dans leur grille. */
    .grid .card{opacity:0;transform:translateY(24px);animation:rise .8s var(--ease) forwards;animation-timeline:view();animation-range:entry 0% cover 16%}

    /* L'image dérive dans son cadre (parallax léger). */
    .band img,.duo__m img{scale:1.12;animation:drift linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    @keyframes drift{from{translate:0 -4%}to{translate:0 4%}}

    /* Révélation par volet des grandes images. */
    .band,.duo__m{clip-path:inset(0 0 0 0);animation:wipe .9s var(--ease) both;animation-timeline:view();animation-range:entry 0% entry 60%}
    @keyframes wipe{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}

    .progress{animation:barfill linear both;animation-timeline:scroll(root block)}
    @keyframes barfill{to{transform:scaleX(1)}}
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   LA LISTE DE DÉPART
   ----------------------------------------------------------------------------
   Dans le monde qu'on habille, les chiffres ont déjà une forme : un dossard, un
   temps de passage, une feuille de résultats. On lui donne sa langue.

   Le monospace ne touche QUE la donnée et l'étiquette technique : prix, tailles,
   quantités, références, numéros d'étape, labels de champ. Jamais un titre,
   jamais de la prose, jamais un bouton d'action. C'est cette discipline qui fait
   qu'il reste lisible comme une information, et non comme un effet.

   Un monospace est déjà large : partout où il remplace un texte tracké, on
   RETIRE le tracking, sinon les capitales se désolidarisent et deviennent
   illisibles en petit corps.
   ════════════════════════════════════════════════════════════════════════════ */

/* Micro-étiquettes : ce sont des repères, pas des phrases */
.mini,
.hero__kick,
.card__tag,
.foot__bot,
.maison__label{
  font-family:var(--mono);
  letter-spacing:.02em;
  font-weight:400;
}
.hero__kick{letter-spacing:.06em}

/* Les prix et tous les nombres : chasse fixe, chiffres alignés en colonne */
.card__p,
.num{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:0;
}

/* Les numéros d'étape. Ils étaient en italique display, comme le wordmark :
   un numéro n'est pas un énoncé de marque, c'est un repère de lecture. */
.pillar__n{
  font-family:var(--mono);
  font-style:normal;
  font-weight:500;
  font-size:var(--t-s);
  letter-spacing:.04em;
}

/* Le bandeau devient une bande de résultats qui défile */
.ticker__g span{
  font-family:var(--mono);
  letter-spacing:.02em;
}