/* ============================================================================
   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;}
/* 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);

  --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}
/* Décliné petit pour les intertitres, à opposer au corps en Jost bâton. */
.gad{font-family:"GA Display","Jost",sans-serif;font-style:italic;font-weight:800;text-transform:lowercase;letter-spacing:-.01em;line-height:1.02}
.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;font-family:"GA Display","Jost",sans-serif;font-style:italic;font-weight:800;font-size:var(--t-l);color:var(--ink-40);margin-bottom:14px}
.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)}}
  }
}