/* ============================================================================
   GOOD ALLURE — v4
   ----------------------------------------------------------------------------
   Écrit à partir de l'analyse des deux références, pas d'une impression.

   MUGO (valeurs relevées sur leur site) : fond #fff, texte noir à 81 % — pas du
   noir pur —, Arial 14 px interligne 1,6, titres de section à 20 px en capitales
   de graisse NORMALE, boutons rectangulaires noirs pleins (radius 0, padding
   16/24), images produit en 3:4 avec 20 px de gouttière, et surtout : le contenu
   touche le bord de l'écran, il n'y a quasiment pas de marge latérale.

   JACQUEMUS : leur site est en maintenance (403), mais leur page d'erreur charge
   encore leur fonte — c'est Futura PT. Une géométrique. Ici : Jost, qui en est le
   substitut libre (41 ko contre 166 pour l'Open Sans qu'on traînait).

   Ce que les deux partagent, et qui devient la règle : page blanche, typo neutre
   et PETITE, images en grand, zéro décoration, zéro couleur, angles droits. Rien
   ne « crie » — c'est l'image qui parle et le vide qui donne le luxe.

   ANIMATIONS : l'état par défaut est toujours l'état VISIBLE. Le mouvement n'est
   ajouté que dans @supports (animation-timeline). Firefox ne sait pas encore
   animer au scroll : un opacity:0 posé dehors y resterait invisible pour de bon.
   ========================================================================== */

@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;}

:root{
  --paper:#fff;
  --tile:#efefef;                 /* le gris des tuiles produit */
  --ink:rgba(0,0,0,.81);          /* le noir de Mugo : 81 %, pas 100 */
  --ink-full:#000;
  --ink-50:rgba(0,0,0,.5);
  --ink-35:rgba(0,0,0,.35);
  --line:rgba(0,0,0,.12);

  --sans:"Jost","Futura","Century Gothic",Helvetica,Arial,sans-serif;

  /* L'échelle entière. Il n'y a rien au-dessus de 20 px, sauf le wordmark du
     pied de page — et c'est justement ce qui le rend fort. */
  --t-xs:11px;
  --t-s:12px;
  --t-m:14px;                     /* la base */
  --t-l:16px;
  --t-xl:20px;                    /* le plus gros texte courant de la page */

  --gap:20px;                     /* la gouttière de Mugo */
  --pad:10px;                     /* la marge latérale : presque rien */
  --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(--paper);
  -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(--ink-full);color:var(--paper)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:10px;top:10px;z-index:999;background:#000;color:#fff;padding:10px 16px}
:focus-visible{outline:2px solid var(--ink-full);outline-offset:2px}
.hp{position:absolute;left:-9999px}

/* ── Typographie : trois niveaux, et c'est tout ─────────────────────────── */
.t{font-size:var(--t-xl);font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:1.25}
.t--s{font-size:var(--t-m);font-weight:700;text-transform:uppercase;letter-spacing:.02em}
.lead{font-size:var(--t-l);font-weight:300;line-height:1.5;max-width:44ch;color:var(--ink)}
.p{color:var(--ink-50);max-width:60ch}
.mini{font-size:var(--t-s);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-35)}

/* ── Boutons : le rectangle noir plein de Mugo ──────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:16px 24px;
  font-size:var(--t-m);font-weight:400;letter-spacing:.02em;
  background:var(--ink-full);color:var(--paper);border:1px solid var(--ink-full);
  border-radius:0;transition:background .3s,color .3s;
}
.btn:hover{background:var(--paper);color:var(--ink-full)}
.btn--ghost{background:transparent;color:var(--ink-full)}
.btn--ghost:hover{background:var(--ink-full);color:var(--paper)}
.btn--light{background:var(--paper);color:var(--ink-full);border-color:var(--paper)}
.btn--light:hover{background:transparent;color:var(--paper)}

/* Un lien simple : souligné au survol, rien de plus */
.lnk{position:relative;display:inline-flex;align-items:center;min-height:44px;font-size:var(--t-m)}
.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%}

/* ── En-tête : la barre ne doit jamais concurrencer l'image ─────────────── */
.bar{
  position:sticky;top:0;z-index:50;background:var(--paper);
  border-bottom:1px solid transparent;transition:border-color .3s;
}
.bar.is-solid{border-bottom-color:var(--line)}
.bar__in{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  height:56px;padding:0 var(--pad);
}
.bar__nav{display:flex;gap:20px;min-width:0}
.bar__nav a,.bar__act a,.bar__act button{
  font-size:var(--t-m);letter-spacing:.02em;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}
/* Le vrai logo good allure. 20 px de haut : net, discret, il ne concurrence pas
   l'image — c'est la règle de la barre. */
.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:6px;right:2px;min-width:15px;height:15px;padding:0 4px;
  display:grid;place-items:center;border-radius:50%;background:var(--ink-full);color:var(--paper);
  font-size:9px;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(--ink-full)}

/* ── Hero : l'image, en plein, et rien d'écrit dessus ───────────────────── */
.hero{position:relative;height:calc(100svh - 56px);min-height:420px;overflow:hidden;background:var(--tile)}
.hero img{width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.hero__veil{
  position:absolute;inset:0;pointer-events:none;
  /* Juste de quoi détacher le lien, en bas, là où la photo est déjà sombre. */
  background:linear-gradient(to top,rgba(0,0,0,.62) 0%,rgba(0,0,0,.28) 16%,rgba(0,0,0,0) 44%);
}
.hero__link{
  position:absolute;inset:auto 0 26px 0;display:grid;place-items:center;min-height:44px;
  color:#fff;font-size:var(--t-m);text-transform:uppercase;letter-spacing:.06em;
}
.hero__link span{position:relative;padding-bottom:5px}
.hero__link span::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:#fff;transform:scaleX(0);transition:transform .4s var(--ease)}
.hero__link:hover span::after{transform:scaleX(1)}

/* ── Rythme de page ────────────────────────────────────────────────────── */
.wrap{padding:0 var(--pad)}
.sec{padding-block:clamp(56px,7vw,96px)}
.head{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  margin-bottom:20px;
}

/* ── Grille produit : 3:4, gouttière 20, bord à bord ────────────────────── */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap)}
@media (min-width:760px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1200px){.grid--4{grid-template-columns:repeat(4,1fr)}}
.card__m{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--tile)}
.card__m img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.card:hover .card__m img{transform:scale(1.03)}
.card__tag{
  position:absolute;left:0;top:0;padding:5px 9px;background:var(--ink-full);color:var(--paper);
  font-size:10px;text-transform:uppercase;letter-spacing:.06em;
}
.card__b{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font-size:var(--t-m)}
.card__n{text-transform:uppercase;letter-spacing:.02em;color:var(--ink)}
.card__p{white-space:nowrap;color:var(--ink)}
.card__s{margin-top:2px;font-size:var(--t-s);color:var(--ink-35)}

/* ── Bandes d'image pleine largeur ─────────────────────────────────────── */
.band{position:relative;overflow:hidden;background:var(--tile)}
.band--tall{height:min(88svh,900px);min-height:380px}
.band--wide{aspect-ratio:16/7}
@media (max-width:760px){
  /* En 16/7, sur un téléphone, la bande ne fait que ~170 px : le texte remplit
     presque toute la hauteur et retombe sur le ciel clair. On l'allonge et on
     assombrit davantage. */
  .band--wide{aspect-ratio:4/5}
  .band--wide::after{height:70%;background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.55) 40%,rgba(0,0,0,.2) 75%,rgba(0,0,0,0) 100%)}
}
.band img{width:100%;height:100%;object-fit:cover}
/* Le voile appartient à l'IMAGE, pas à la légende. Posé sur la légende, il ne
   couvre que la hauteur du texte : les lettres tombent alors dans sa partie
   transparente et se retrouvent sur un ciel blanc — mesuré à 1,00:1, invisible.
   Ici il couvre les 55 % bas de la photo, donc le texte est toujours dans sa
   partie dense. */
.band::after{
  content:"";position:absolute;inset:auto 0 0 0;height:55%;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.78) 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) 26px;color:#fff;
}
.band__c p{font-size:var(--t-xl);text-transform:uppercase;letter-spacing:.02em;max-width:24ch;line-height:1.3}

/* ── Deux colonnes : image / texte ─────────────────────────────────────── */
.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:14px}
.duo__t .btn,.duo__t .lnk{margin-top:20px}

/* ── Colonnes de texte ─────────────────────────────────────────────────── */
.cols{display:grid;grid-template-columns:1fr;gap:var(--gap)}
@media (min-width:760px){.cols{grid-template-columns:repeat(3,1fr)}}
.col h3{font-size:var(--t-m);font-weight:700;text-transform:uppercase;letter-spacing:.02em;margin-bottom:8px}
.col{border-top:1px solid var(--line);padding-top:14px}
.col .p{color:var(--ink-50)}

/* ── Le bloc noir : newsletter + pied + wordmark, d'un seul tenant ──────── */
.dark{background:var(--ink-full);color:var(--paper)}
.mail{display:grid;grid-template-columns:1fr;gap:24px;padding-block:clamp(48px,6vw,80px)}
@media (min-width:900px){.mail{grid-template-columns:1fr 1fr;align-items:start}}
.mail .p{color:rgba(255,255,255,.62)}
.f{display:flex;border:1px solid rgba(255,255,255,.4)}
.f input{
  flex:1 1 auto;min-width:0;min-height:52px;padding:14px 16px;font:inherit;
  background:transparent;color:#fff;border:0;
}
.f input::placeholder{color:rgba(255,255,255,.45)}
.f input:focus{outline:none}
.f button{
  flex:0 0 auto;min-height:52px;padding:14px 22px;
  background:var(--paper);color:var(--ink-full);
  font-size:var(--t-m);letter-spacing:.02em;transition:opacity .25s;
}
.f button:hover{opacity:.78}
.f__note{margin-top:10px;font-size:var(--t-s);color:rgba(255,255,255,.45)}
.f__note.is-ok{color:#fff}

.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:.06em;margin-bottom:12px;color:#fff}
.foot li{margin-bottom:8px}
.foot a,.foot li{color:rgba(255,255,255,.6);font-size:var(--t-m)}
.foot a{overflow-wrap:anywhere}
.foot a:hover{color:#fff}
.foot__bot{
  margin-top:36px;padding-top:18px;border-top:1px solid rgba(255,255,255,.18);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-size:var(--t-s);color:rgba(255,255,255,.45);
}

/* Le logo, en grand, une dernière fois — en blanc sur le noir. C'est LE logo de
   la marque qui signe la page. Le fichier est en basse définition (228 px), donc
   on le borne à ~340 px : au-delà il se pixellise. */
.mark{display:grid;place-items:center;padding:clamp(28px,4vw,56px) var(--pad)}
.mark img{width:min(340px,72vw);height:auto}

/* ============================================================================
   MOUVEMENT — discret, et facultatif par construction.
   Mugo et Jacquemus n'animent presque rien : ce qui bouge, c'est l'image quand
   on scrolle. On s'en tient là.
   ========================================================================== */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rv{
      opacity:0;transform:translateY(18px);
      animation:rise .8s var(--ease) forwards;
      animation-timeline:view();
      animation-range:entry 4% cover 22%;
    }
    .rv[data-d="1"]{animation-range:entry 6% cover 26%}
    .rv[data-d="2"]{animation-range:entry 8% cover 30%}
    @keyframes rise{to{opacity:1;transform:none}}

    /* L'image glisse dans son cadre. C'est la seule vraie animation du site. */
    .band img,.duo__m img{
      scale:1.1;
      animation:drift linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 100%;
    }
    @keyframes drift{from{translate:0 -3.5%}to{translate:0 3.5%}}

    .hero img{
      animation:heroOut linear both;
      animation-timeline:view();
      animation-range:exit-crossing 0% exit 100%;
    }
    @keyframes heroOut{from{transform:scale(1.03)}to{transform:scale(1.1)}}

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