/* ============================================================
   MOYAA — Design system
   Typographie calquée sur nike.com :
   UI  : Helvetica Now Text > Helvetica Neue > Helvetica > Arial
   Titres campagne : Jost (équivalent libre de Nike Futura ND)
   ============================================================ */

/* Polices auto-hébergées (ex-Google Fonts) : le site ne charge plus aucun
   script ni ressource tierce, ce qui évite tout transfert d'IP vers Google
   et tient la promesse "aucun cookie, aucun script tiers" de la page
   confidentialité. Sous-jeu latin uniquement, suffisant pour le français. */
@font-face{
  font-family:'Archivo';font-style:normal;font-weight:400 900;font-stretch:75% 100%;
  font-display:swap;src:url('../assets/fonts/archivo-variable.woff2') format('woff2');
}
@font-face{
  font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;
  src:url('../assets/fonts/jost.woff2') format('woff2');
}
@font-face{
  font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/jost.woff2') format('woff2');
}
@font-face{
  font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;
  src:url('../assets/fonts/jost.woff2') format('woff2');
}

:root{
  /* Encres et surfaces */
  --ink:#111111;
  --ink-hover:#757575;
  --grey:#707072;
  --grey-strong:#4a4a4d;
  --grey-light:#8d8d8f;
  --line:#e5e5e5;
  --line-strong:#cacaca;
  --sand:#f5f5f5;
  --sand-2:#efefef;
  --creme:#eddac0;
  --paper:#ffffff;

  /* Accent unique : l'or de la carte de Mayotte */
  --or:#b8892b;
  --or-deep:#8f6a1f;
  --or-wash:#f6efe1;

  /* Couleurs produit (jamais utilisées comme couleur d'interface) */
  --c-lagon:#4bb3c1;
  --c-heritage:#e7e7e7;
  --c-prestige:#161616;

  /* Typographie */
  --f-ui:"Helvetica Now Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-display:"Archivo","Helvetica Now Display","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-word:"Jost","Futura",Helvetica,Arial,sans-serif;
  --h-header:5.4rem;

  --t-hero:clamp(2.25rem,5.4vw,3.8rem);
  --t-display:clamp(2rem,4.6vw,3.6rem);
  --t-h2:clamp(1.35rem,2.2vw,1.75rem);

  /* Rythme */
  --gutter:clamp(1.25rem,4vw,3rem);
  --page:1440px;
  --section:clamp(2rem,3.6vw,3.25rem);

  --ease:cubic-bezier(.16,1,.3,1);
  --topo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='680' height='680' viewBox='0 0 680 680'%3E%3Cg fill='none' stroke='%23111' stroke-opacity='.5' stroke-width='1.1'%3E%3Cpath d='M70 110c72-60 194-48 230 12s-24 133-109 133S-2 170 70 110Z'/%3E%3Cpath d='M100 128c54-46 145-36 173 10s-18 100-82 100-145-64-91-110Z'/%3E%3Cpath d='M132 148c36-31 96-24 116 6s-12 68-56 68-96-43-60-74Z'/%3E%3Cpath d='M470 380c84-72 180-24 180 60s-72 144-156 120-108-114-24-180Z'/%3E%3Cpath d='M494 410c62-54 134-18 134 44s-54 108-116 90-80-85-18-134Z'/%3E%3Cpath d='M520 442c43-36 91-12 91 30s-36 73-79 61-55-55-12-91Z'/%3E%3Cpath d='M392 44c48-36 132-12 132 48s-60 96-120 72-60-84-12-120Z'/%3E%3Cpath d='M418 68c34-25 92-8 92 34s-42 67-84 50-42-59-8-84Z'/%3E%3Cpath d='M44 486c60-48 168-36 180 36s-72 132-144 96-96-84-36-132Z'/%3E%3Cpath d='M72 508c46-36 126-26 134 26s-54 98-108 72-72-62-26-98Z'/%3E%3Cpath d='M300 590c36-30 108-18 108 30s-48 78-96 60-48-60-12-90Z'/%3E%3C/g%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,ul,ol,dl,dd,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,video{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
[hidden]{display:none !important}
a{color:inherit;text-decoration:none}

html{scroll-behavior:smooth;scroll-padding-top:120px}
body{
  font-family:var(--f-ui);
  font-size:1rem;
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}

::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}

.skip{
  position:absolute;left:1rem;top:-4rem;z-index:200;
  background:var(--ink);color:var(--paper);padding:.75rem 1.25rem;border-radius:2rem;
  transition:top .2s var(--ease);
}
.skip:focus{top:1rem}

.wrap{max-width:var(--page);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Typographie ---------- */
.display{
  font-family:var(--f-display);
  font-weight:800;
  font-stretch:84%;
  text-transform:uppercase;
  line-height:1.06;
  letter-spacing:-.012em;
}
.h-display{font-weight:700}
.h-hero{font-size:var(--t-hero)}
.h-display{font-size:var(--t-display)}
.h-section{font-size:var(--t-h2);font-weight:500;letter-spacing:-.01em;line-height:1.2}
.eyebrow{
  font-size:.6875rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--grey);
}
.eyebrow--or{color:var(--or)}
.lede{font-size:clamp(1rem,1.3vw,1.125rem);color:var(--grey);max-width:44ch}
.muted{color:var(--grey)}
.mono-num{font-variant-numeric:tabular-nums}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:3.25rem;padding:0 1.6rem;border-radius:2rem;
  font-size:1rem;font-weight:500;line-height:1;white-space:nowrap;
  transition:background-color .25s var(--ease),color .25s var(--ease),
             border-color .25s var(--ease),transform .12s var(--ease);
}
.btn:active{transform:scale(.975)}
.btn--dark{background:var(--ink);color:var(--paper)}
.btn--dark:hover{background:var(--ink-hover)}
.btn--light{background:var(--paper);color:var(--ink)}
.btn--light:hover{background:#e2e2e2}
.btn--ghost{border:1px solid var(--line-strong);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink)}
.btn--ghost-light{border:1px solid rgba(255,255,255,.55);color:#fff}
.btn--ghost-light:hover{border-color:#fff;background:rgba(255,255,255,.12)}
.btn--block{width:100%}
.btn--sm{min-height:2.75rem;padding:0 1.35rem;font-size:.9375rem}
.btn--tall{min-height:3.75rem}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.btn[disabled]:active{transform:none}

.link-u{position:relative;font-weight:500}
.link-u::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
.link-u:hover::after{transform:scaleX(1)}

.pill-tag{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.6875rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  padding:.4rem .7rem;border:1px solid currentColor;border-radius:2rem;
}

/* ---------- Marque ---------- */
.brand{display:inline-flex;flex-direction:column;align-items:center;gap:.15rem;color:var(--ink)}
.brand__mark{
  width:2.9rem;aspect-ratio:2.868;background:currentColor;
  -webkit-mask:url("../assets/brand/moyaa-mark.svg") no-repeat center/contain;
          mask:url("../assets/brand/moyaa-mark.svg") no-repeat center/contain;
}
.brand__word{
  font-family:var(--f-word);font-weight:300;font-size:.7rem;
  letter-spacing:.42em;text-indent:.42em;text-transform:uppercase;line-height:1;
}
.brand--lg .brand__mark{width:6.5rem}
.brand--lg .brand__word{font-size:1.05rem}

/* ---------- Barre d'annonce ---------- */
.announce{background:var(--ink);color:rgba(255,255,255,.92);text-align:center}
.announce p{
  max-width:var(--page);margin-inline:auto;padding:.6rem var(--gutter);
  font-size:.75rem;letter-spacing:.01em;
}

/* ---------- En-tête flottant ---------- */
.header{position:sticky;top:0;z-index:60;background:transparent}
.header__inner{max-width:min(1720px,100%);margin-inline:auto;padding:1rem .75rem}

/* Au repos : trois pastilles séparées. Au défilement : elles se fondent
   dans une seule barre blanche, sans changer de position. */
.header__bar{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;
  padding-inline:.5rem;border-radius:2rem;
  transition:background-color .4s var(--ease),box-shadow .4s var(--ease);
}
.header--float .header__bar{
  background:var(--paper);
  box-shadow:0 4px 22px -10px rgba(17,17,17,.45);
}

.pill{
  display:flex;align-items:center;height:3.4rem;background:var(--paper);
  border-radius:2rem;box-shadow:0 2px 12px -5px rgba(17,17,17,.35);
  transition:box-shadow .3s var(--ease);
}
.header--float .pill{box-shadow:none}
.pill--brand{
  justify-self:start;background:none;box-shadow:none;padding-inline:0;color:var(--ink);
}
.pill--brand .brand__mark{width:3.6rem}
/* Le logo n'est pas colle au bord sur grand ecran, contrairement aux icones. */
@media (min-width:601px){ .pill--brand{margin-left:1.25rem} }
.pill--nav{justify-self:center;padding-inline:.5rem;gap:.2rem}
.pill--nav a{
  padding:.6rem .95rem;border-radius:2rem;font-weight:500;font-size:1rem;line-height:1;
  transition:background-color .25s var(--ease),color .25s var(--ease);
}
.pill--nav a:hover{background:var(--sand)}
.pill--nav a[aria-current="page"]{background:var(--ink);color:var(--paper)}
.pill--tools{justify-self:end;padding-inline:.45rem;gap:.15rem}
.pill--tools .icon-btn{width:2.7rem;height:2.7rem}
.pill--tools .icon-btn svg{width:1.4rem;height:1.4rem}
.pill--tools .icon-btn__count{top:.25rem;right:.15rem}

.icon-btn{
  width:2.4rem;height:2.4rem;border-radius:50%;
  display:grid;place-items:center;position:relative;
  transition:background-color .25s var(--ease);
}
.icon-btn:hover{background:var(--sand)}
.icon-btn svg{width:1.3rem;height:1.3rem;stroke:var(--ink);stroke-width:1.6;fill:none}
.icon-btn__count{
  position:absolute;top:-.05rem;right:-.05rem;min-width:1.05rem;height:1.05rem;padding:0 .2rem;
  border-radius:1rem;background:var(--or);color:#fff;
  font-size:.625rem;font-weight:700;display:grid;place-items:center;line-height:1;
}
.icon-btn__count[hidden]{display:none}

.burger{display:none}

/* ---------- Menu mobile ---------- */
/* Panneau lateral : il laisse voir la page derriere lui, assombrie par le
   meme voile que le panier. */
.mobile-nav{
  position:fixed;top:0;right:0;bottom:0;left:auto;z-index:100;
  width:min(21rem,84%);background:var(--paper);
  box-shadow:-24px 0 60px -30px rgba(17,17,17,.45);
  transform:translateX(101%);
  display:flex;flex-direction:column;padding:1rem 1.5rem 2rem;
  overflow-y:auto;
  visibility:hidden;transition:transform .45s var(--ease),visibility 0s linear .45s;
}
.mobile-nav[data-open="true"]{
  transform:none;visibility:visible;
  transition:transform .45s var(--ease),visibility 0s;
}
.mobile-nav__top{display:flex;justify-content:flex-end;padding-bottom:1.25rem}
.mobile-nav__list{display:flex;flex-direction:column}
.mobile-nav__list a{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font-size:1.5rem;font-weight:500;line-height:1.2;padding:.7rem 0;
}
.mobile-nav__list a[aria-current="page"]{color:var(--or)}
.mobile-nav__list svg{
  width:1.15rem;height:1.15rem;stroke:var(--ink);stroke-width:1.6;fill:none;flex:none;
}
.mobile-nav__list a[aria-current="page"] svg{stroke:var(--or)}
.mobile-nav__foot{margin-top:auto;padding-top:2rem;display:grid;gap:.75rem}

/* ---------- Bandeau défilant ---------- */
.marquee{
  background:var(--ink);color:var(--paper);overflow:hidden;
  padding-block:.85rem;white-space:nowrap;
}
.marquee__track{display:inline-flex;gap:3rem;animation:slide 42s linear infinite;will-change:transform}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee span{
  font-family:var(--f-display);font-weight:700;font-stretch:88%;text-transform:uppercase;
  font-size:.8125rem;letter-spacing:.22em;display:inline-flex;align-items:center;gap:3rem;
}
.marquee span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--or)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Héros ---------- */
/* svh et non dvh : avec dvh, la hauteur du hero change quand la barre
   d'adresse du navigateur mobile se retracte au defilement, ce qui fait
   sauter l'image en plein scroll. */
.hero{position:relative;min-height:min(94svh,940px);display:flex;align-items:flex-end;overflow:hidden;background:var(--creme)}
body.home .hero{margin-top:calc(var(--h-header) * -1)}
.hero__media{position:absolute;inset:0}
.hero__media picture{display:block;width:100%;height:100%}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero__scrim{
  position:absolute;inset:0;
  background:linear-gradient(to right,rgba(237,218,192,.7) 0%,rgba(237,218,192,.22) 34%,rgba(237,218,192,0) 55%);
}
.hero__inner{
  position:relative;width:100%;max-width:var(--page);margin-inline:auto;
  padding:0 var(--gutter) clamp(2.5rem,6vw,4.5rem);color:var(--ink);
}
.hero h1{max-width:15ch;color:var(--ink)}
.hero__sub{margin:1rem 0 1.5rem;color:var(--grey-strong);max-width:46ch;font-size:.9375rem}

/* Titre force sur une seule ligne : le corps se cale sur la largeur
   disponible plutot que de passer a la ligne. */
.h-display--une-ligne{
  white-space:nowrap;
  /* Le diviseur vient de la largeur mesuree du titre : a 32 px il occupe
     407 px, soit 12,7 fois le corps. On garde une marge de securite. */
  font-size:min(var(--t-display), calc((100vw - 2.6rem) / 13.2));
}

/* ---------- Titre de section ---------- */
.sec-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;
  margin-bottom:1.75rem;flex-wrap:wrap;
}
.sec-head__nav{display:flex;gap:.5rem;align-items:center}

/* ---------- Rail horizontal ---------- */
.rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(78vw,1fr);
  gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding-bottom:.5rem;
}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start}
.rail--bleed{margin-right:calc(var(--gutter) * -1);padding-right:var(--gutter)}

/* ---------- Carte produit ---------- */
.card{display:block;position:relative}
.card__media{
  position:relative;aspect-ratio:4/5;background:var(--paper);overflow:hidden;
}
.card__media img{
  width:100%;height:100%;object-fit:cover;
  transition:opacity .5s var(--ease),transform .9s var(--ease);
}
.card__media img+img{position:absolute;inset:0;opacity:0}
.card:hover .card__media img+img{opacity:1}
.card:hover .card__media img{transform:scale(1.035)}
.card__flag{
  position:absolute;top:.85rem;left:.85rem;z-index:2;
  background:var(--paper);color:var(--or-deep);
  font-size:.625rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:.35rem .6rem;
}
.card__body{padding-top:1rem;display:grid;gap:.1rem}
.card__name{font-weight:500;font-size:1rem}
.card__sub{color:var(--grey);font-size:1rem}
.card__price{margin-top:.5rem;font-weight:500}
.card__price s{color:var(--grey);font-weight:400;margin-right:.5rem}
.card__swatches{display:flex;gap:.3rem;margin-top:.6rem}
.card__swatches i{width:.9rem;height:.9rem;border-radius:50%;border:1px solid rgba(17,17,17,.15)}
.card--soon .card__media{filter:grayscale(.25)}

/* ---------- Grille collection ---------- */
.grid-products{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:2.5rem 1rem}

/* ---------- Squelettes ---------- */
.skeleton{background:var(--sand);position:relative;overflow:hidden}
.skeleton::after{
  content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
  animation:shimmer 1.4s infinite;
}
@keyframes shimmer{to{transform:translateX(100%)}}
.skeleton--media{aspect-ratio:4/5}
.skeleton--line{height:.85rem;margin-top:.6rem;border-radius:2px}
.skeleton--line.is-short{width:45%}

/* ---------- Éditorial asymétrique ---------- */
.editorial{
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,5vw,5rem);align-items:center;
}
.editorial--flip{grid-template-columns:.85fr 1.15fr}
.editorial__media{position:relative;background:var(--paper)}
.editorial__media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.editorial__media--pano img{aspect-ratio:16/9}
.editorial__body{display:grid;gap:1.25rem;align-content:center}
.editorial__body p{color:var(--grey)}
.editorial--bleed-l{margin-left:calc(var(--gutter) * -1)}
/* Texte a gauche, boutons a droite, cales sur la derniere ligne du texte. */
.cta-ligne{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:1.5rem;
}
.cta-ligne__actions{display:flex;gap:.6rem;flex-wrap:wrap}
/* Le trait passe sous l'ensemble, pas seulement sous les chiffres. */
.cta-ligne--trait{border-bottom:1px solid var(--line);padding-bottom:1.25rem}

/* Trait au-dessus, chiffres en dessous, alignes a droite. Sur la page A propos
   le bloc est repris dans .cta-ligne--trait, qui neutralise ce cadre. */
.editorial__stats{
  display:grid;grid-template-columns:repeat(3,auto);gap:2rem;justify-content:end;
  border-top:1px solid var(--line);padding-top:1.25rem;margin-top:.5rem;
}
.editorial__stats dt{font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}
.editorial__stats dd{font-family:var(--f-display);font-size:1.9rem;font-weight:700;font-stretch:88%;line-height:1.1}

.topo-bg{position:relative;isolation:isolate}
.topo-bg::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background-image:var(--topo);background-size:680px;opacity:.05;
}

/* ---------- Tuiles duo ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.tile{position:relative;overflow:hidden;background:var(--ink)}
.tile img{width:100%;height:100%;object-fit:cover;aspect-ratio:20/21}
.tile__scrim{
  position:absolute;inset:0;
  /* Voile un peu plus dense depuis la tuile Lagon sur fond de mer : sur une
     image claire le sur-titre tombait a 4,49:1, sous le seuil de 4,5:1. */
  background:linear-gradient(to top,rgba(6,8,10,.86) 0%,rgba(6,8,10,.5) 22%,rgba(6,8,10,.12) 44%,rgba(6,8,10,0) 62%);
}
.tile__body{
  position:absolute;left:0;right:0;bottom:0;
  padding:clamp(1.25rem,2.2vw,2rem);color:#fff;
  display:grid;gap:.5rem;justify-items:start;
}
.tile__eyebrow{font-size:.875rem;color:rgba(255,255,255,.9);max-width:34ch}
.tile__title{
  font-size:clamp(1.25rem,1.7vw,1.5rem);font-weight:500;line-height:1.25;letter-spacing:-.01em;
}
.tile__actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.45rem}

/* ---------- Avis clients ---------- */
/* Fin de page resserrée : tuiles, avis, #MOYAA et réassurance s'enchaînent
   sur un demi-retrait au lieu du rythme plein. */
.avis.section{padding-block:max(1.75rem,calc(var(--section) * .55)) calc(var(--section) * .5)}
.social.section{padding-block:calc(var(--section) * .5)}
.reassure.section{padding-block:calc(var(--section) * .5) var(--section)}


.avis__head{text-align:center;display:grid;gap:.65rem;justify-items:center;margin-bottom:2.5rem}
.avis__title{
  font-family:var(--f-ui);font-weight:700;letter-spacing:-.02em;line-height:1.15;
  font-size:clamp(1.6rem,3vw,2.25rem);
}
.avis__sub{color:var(--grey);font-size:1rem}

.avis__piste{
  overflow:hidden;padding-block:.5rem 1.25rem;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
}
.avis__track{
  display:flex;width:max-content;padding-left:var(--gutter);
  animation:avisDefile 40s linear infinite;
  will-change:transform;
}
.avis__piste:hover .avis__track,
.avis__piste:focus-within .avis__track{animation-play-state:paused}
@keyframes avisDefile{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(calc(var(--avis-decalage,50%) * -1),0,0)}
}

/* Repli sans animation : le visiteur fait glisser lui-même. */
.avis__piste--statique{overflow-x:auto;scrollbar-width:none}
.avis__piste--statique::-webkit-scrollbar{display:none}
.avis__piste--statique .avis__track{animation:none}

.avis-carte{
  flex:none;width:clamp(15.5rem,25vw,21rem);margin-right:1rem;
  background:var(--paper);border:1px solid var(--line);border-radius:.9rem;
  padding:1.25rem;display:grid;gap:.7rem;align-content:start;
  box-shadow:0 10px 26px -20px rgba(17,17,17,.5);
}
.avis-carte--exemple{color:var(--grey)}
.avis-carte__tete{display:flex;align-items:center;gap:.7rem}
.avis-carte__pastille{
  width:2.25rem;height:2.25rem;border-radius:50%;flex:none;
  background:var(--ink);color:var(--paper);
  display:grid;place-items:center;font-size:.8125rem;font-weight:500;
}
.avis-carte__nom{font-size:.9375rem;font-weight:500;color:var(--ink);line-height:1.3}
.avis-carte__lieu{font-size:.8125rem;color:var(--grey);line-height:1.3}
.avis-carte__texte{font-size:.875rem;line-height:1.55;color:var(--grey-strong)}

.avis__stars{display:flex;gap:.1rem}
.avis__stars svg{width:1.05rem;height:1.05rem;fill:var(--or);stroke:none}
.avis__stars svg.is-off{fill:var(--line-strong)}

/* ---------- TikTok ----------
   Section centree : pastille, titre, six vignettes verticales, appel a l'action.
   Une video sans image de couverture reste une carte sombre cliquable. */
.social__head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:1.5rem;margin-bottom:clamp(1.5rem,3vw,2.5rem);
}
.social__eyebrow{
  font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);margin-bottom:.25rem;
}
.social__tag{
  font-family:var(--f-ui);font-weight:500;letter-spacing:-.02em;line-height:1.1;
  font-size:clamp(1.5rem,2.6vw,1.9rem);text-transform:uppercase;
}
.social__compte{
  flex:none;border:1px solid var(--line-strong);border-radius:.85rem;
  padding:.7rem .85rem .55rem;display:grid;gap:.35rem;justify-items:center;text-align:center;
  transition:border-color .25s var(--ease),background-color .25s var(--ease);
}
.social__compte:hover{border-color:var(--ink);background:var(--sand)}
.social__compte svg{width:1.5rem;height:1.5rem;fill:currentColor;stroke:none}
.social__handle{font-size:.5625rem;color:var(--grey);line-height:1.1;white-space:nowrap}

/* Rangee centree plutot qu'une grille de six colonnes fixes : avec une seule
   video, six colonnes laissaient un timbre-poste a gauche et cinq colonnes
   vides. La carte grandit jusqu'a 15rem puis s'arrete, donc une video seule
   reste a une taille credible au lieu de couvrir toute la largeur. */
.social__grid{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(.5rem,1.2vw,1rem);width:100%;
}
.social__card{
  position:relative;display:grid;place-items:center;
  flex:1 1 9rem;min-width:0;max-width:15rem;
  aspect-ratio:9/16;background:var(--ink);border-radius:.75rem;overflow:hidden;
}
.social__card img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
a.social__card:hover img{transform:scale(1.05)}
.social__card svg{
  width:1.9rem;height:1.9rem;
  stroke:rgba(255,255,255,.5);stroke-width:1.4;fill:none;
}
a.social__card svg{
  position:absolute;stroke:none;fill:rgba(255,255,255,.92);
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.55));
}
.social__card--video video{width:100%;height:100%;object-fit:cover;display:block;background:var(--ink)}
/* Publication en carrousel : une piste qui se fait glisser dans la carte,
   avec ses pastilles. Meme principe que la galerie produit. */
.social__piste{
  display:flex;width:100%;height:100%;overflow-x:auto;
  scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.social__piste::-webkit-scrollbar{display:none}
.social__piste img{
  flex:none;width:100%;height:100%;object-fit:cover;scroll-snap-align:start;
}
.social__puces{
  position:absolute;bottom:.5rem;left:0;right:0;z-index:1;
  display:flex;justify-content:center;gap:.28rem;pointer-events:none;
}
.social__puces span{
  width:.3rem;height:.3rem;border-radius:999px;background:rgba(255,255,255,.45);
  transition:background .25s var(--ease),transform .25s var(--ease);
}
.social__puces span[data-actif]{background:#fff;transform:scale(1.25)}
.social__card--video figcaption,.social__card--carrousel figcaption{position:absolute;top:.5rem;right:.5rem;z-index:1}
.social__card--video figcaption a,.social__card--carrousel figcaption a{
  font-size:.625rem;color:rgba(255,255,255,.85);background:rgba(0,0,0,.5);
  padding:.25rem .55rem;border-radius:999px;text-decoration:none;white-space:nowrap;
}
.social__cta{display:flex;width:max-content;margin:1.75rem auto 0}
.social__cta svg{width:1.05rem;height:1.05rem;stroke:currentColor;stroke-width:1.6;fill:none}

/* ---------- Bande de réassurance ---------- */
.reassure__grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(2rem,4vw,3rem) 1.5rem;
}
.reassure__item{display:grid;gap:.35rem;justify-items:center;text-align:center}
.reassure__item svg{width:2.5rem;height:2.5rem;color:var(--ink);margin-bottom:.6rem}
.reassure__item h3{font-size:.8125rem;font-weight:700;letter-spacing:-.005em;line-height:1.3}
.reassure__item p{font-size:.75rem;color:var(--grey);line-height:1.45}

/* ---------- Instagram ---------- */
.ig-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}
.ig-grid figure{position:relative;overflow:hidden;background:var(--sand)}
.ig-grid img{aspect-ratio:1;object-fit:cover;width:100%;transition:transform .7s var(--ease)}
.ig-grid figure:hover img{transform:scale(1.06)}
.ig-grid figure:nth-child(1){grid-row:span 2;grid-column:span 2}
.ig-grid figure:nth-child(1) img{aspect-ratio:1}

/* ---------- Newsletter ---------- */
.news{background:var(--ink);color:#fff}
.news__inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:end}
.news h2{color:#fff}
.news p{color:rgba(255,255,255,.66)}
.form-row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:flex-end}
.field{display:grid;gap:.4rem;flex:1 1 16rem}
.field label{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.66)}
.field input{
  background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.35);
  padding:.7rem 0;outline:none;color:#fff;
}
.field input::placeholder{color:rgba(255,255,255,.4)}
.field input:focus{border-color:#fff}
.field--dark label{color:var(--grey)}
.field--dark input{border-color:var(--line-strong);color:var(--ink)}
.field-error{font-size:.8125rem;color:#e5484d;display:none}
.field.has-error input{border-color:#e5484d}
.field.has-error .field-error{display:block}
.form-note{font-size:.8125rem;color:rgba(255,255,255,.5);margin-top:1rem}
.form-ok{font-size:.9375rem;color:var(--or);margin-top:1rem}

/* ---------- Pied de page ---------- */
.footer{background:var(--ink);color:#fff;padding-block:clamp(3rem,6vw,5rem) 2rem}
.footer__grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:clamp(2rem,4vw,3.5rem)}
.footer h3{
  font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin-bottom:1rem;font-weight:500;
}
.footer ul{display:grid;gap:.6rem}
.footer a{color:rgba(255,255,255,.82);font-size:.9375rem}
.footer a:hover{color:#fff}
.footer__brand{color:#fff}
.footer .brand{color:#fff}
.footer__brand p{color:rgba(255,255,255,.55);font-size:.9375rem;max-width:32ch;margin-top:1.25rem}
.footer__socials{display:flex;gap:.75rem;margin-top:1.5rem}
.footer__socials a{
  width:2.5rem;height:2.5rem;border:1px solid rgba(255,255,255,.22);border-radius:50%;
  display:grid;place-items:center;transition:border-color .25s var(--ease),background-color .25s var(--ease);
}
.footer__socials a:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.footer__socials svg{width:1.05rem;height:1.05rem;stroke:currentColor;fill:none;stroke-width:1.5}
.footer__legal{
  margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-items:center;
  font-size:.8125rem;color:rgba(255,255,255,.5);
}
.footer__legal a{font-size:.8125rem;color:rgba(255,255,255,.5)}

/* ---------- Tiroir panier ---------- */
.overlay{
  position:fixed;inset:0;z-index:95;background:rgba(17,17,17,.45);
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s;
  backdrop-filter:blur(2px);
}
.overlay[data-open="true"]{opacity:1;visibility:visible}
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:100;width:min(27rem,100%);
  background:var(--paper);display:flex;flex-direction:column;
  transform:translateX(101%);
  box-shadow:-24px 0 60px -30px rgba(17,17,17,.45);
  /* visibility, sinon l'ombre portee du panneau ferme deborde sur le bord
     droit de la page et ses liens restent atteignables au clavier. */
  visibility:hidden;transition:transform .45s var(--ease),visibility 0s linear .45s;
}
.drawer[data-open="true"]{
  transform:none;visibility:visible;
  transition:transform .45s var(--ease),visibility 0s;
}
.drawer__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.25rem 1.5rem;border-bottom:1px solid var(--line);
}
.drawer__title{font-weight:500;font-size:1.125rem}
.drawer__body{flex:1;overflow-y:auto;padding:1.5rem;display:grid;gap:1.5rem;align-content:start}
.drawer__foot{border-top:1px solid var(--line);padding:1.25rem 1.5rem 1.75rem;display:grid;gap:1rem}
.drawer__total{display:flex;justify-content:space-between;font-weight:500}
/* La destination est demandee avant le paiement : sans elle, un client
   d'outre-mer pourrait choisir le tarif metropole dans le tunnel Stripe. */
.drawer__zone{display:grid;gap:.35rem;margin-bottom:.25rem}
.drawer__zone label{font-size:.8125rem;color:var(--grey)}
.drawer__zone select{width:100%}
.drawer__ship{display:flex;justify-content:space-between;font-size:.875rem;color:var(--grey)}

.line-item{display:grid;grid-template-columns:5.5rem 1fr;gap:1rem}
.line-item img{aspect-ratio:4/5;object-fit:cover;background:var(--paper);width:100%}
.line-item__top{display:flex;justify-content:space-between;gap:1rem}
.line-item__name{font-weight:500}
.line-item__meta{color:var(--grey);font-size:.875rem}
.line-item__tools{display:flex;align-items:center;gap:1rem;margin-top:.6rem}
.qty{display:flex;align-items:center;border:1px solid var(--line-strong);border-radius:2rem}
.qty button{width:2rem;height:2rem;display:grid;place-items:center;color:var(--grey)}
.qty button:hover{color:var(--ink)}
.qty span{min-width:1.5rem;text-align:center;font-size:.875rem}
.line-item__remove{font-size:.8125rem;color:var(--grey);text-decoration:underline}
.line-item__remove:hover{color:var(--ink)}

.empty{display:grid;gap:1rem;justify-items:start;padding:2rem 0}

/* ---------- Confirmation d'ajout au panier ----------
   Feuille qui monte du bas, sur telephone seulement. Sur un grand ecran le
   tiroir du panier reste le bon geste, il montre tout le panier d'un coup. */
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:101;
  background:var(--paper);border-radius:1.25rem 1.25rem 0 0;
  box-shadow:0 -8px 40px -12px rgba(17,17,17,.35);
  padding:1.25rem var(--gutter) calc(1.25rem + env(safe-area-inset-bottom));
  display:grid;gap:1.1rem;
  visibility:hidden;transform:translateY(101%);
  transition:transform .4s var(--ease),visibility 0s linear .4s;
}
.sheet[data-open="true"]{
  visibility:visible;transform:none;
  transition:transform .4s var(--ease),visibility 0s;
}
.sheet__tete{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.sheet__titre{display:flex;align-items:center;gap:.6rem;font-size:1.0625rem;font-weight:500}
.sheet__titre svg{width:1.4rem;height:1.4rem;flex:none}
.sheet__ligne{display:grid;grid-template-columns:4.5rem 1fr;gap:.9rem;align-items:start}
.sheet__ligne img{aspect-ratio:4/5;object-fit:cover;background:var(--sand);width:100%;border-radius:.35rem}
.sheet__nom{font-weight:500;font-size:.9375rem;line-height:1.3}
.sheet__meta{color:var(--grey);font-size:.8125rem;margin-top:.2rem}
.sheet__prix{font-weight:500;font-size:.9375rem;margin-top:.35rem}
.sheet__actions{display:grid;gap:.6rem}
.sheet:focus{outline:none}

/* ---------- Barre d'achat au defilement ----------
   Elle double le bouton principal une fois celui-ci sorti de l'ecran, et
   s'efface des qu'un panneau s'ouvre par-dessus (panier, guide des tailles). */
/* Bandeau d'information, en bas a gauche. Il informe qu'il n'y a pas de
   cookie, il ne demande rien : pas de bouton refuser, il n'y aurait rien a
   refuser. Pose au-dessus de la barre d'achat (z 90) mais sous le tiroir. */
.bandeau{
  position:fixed;z-index:95;
  left:var(--gutter);bottom:calc(var(--gutter) + env(safe-area-inset-bottom));
  width:min(23rem,calc(100vw - var(--gutter) * 2));
  background:#fff;border:1px solid var(--line);border-radius:.85rem;
  padding:1.05rem 1.15rem 1.15rem;
  box-shadow:0 18px 50px -18px rgba(6,8,10,.35);
  transform:translateY(calc(100% + 2rem));opacity:0;visibility:hidden;
  transition:transform .5s var(--ease),opacity .4s var(--ease),
             visibility 0s linear .5s, bottom .35s var(--ease);
}
.bandeau[data-ouvert]{
  transform:none;opacity:1;visibility:visible;
  transition:transform .5s var(--ease),opacity .4s var(--ease),
             visibility 0s, bottom .35s var(--ease);
}
.bandeau__texte{
  font-size:.8125rem;line-height:1.6;color:rgba(17,17,17,.68);
  margin:0 0 .9rem;
}
.bandeau__texte strong{color:var(--ink);font-weight:600}
.bandeau__ok{width:100%}

/* La barre d'achat sort par le bas sur les fiches produit : le bandeau
   monte au-dessus plutot que de passer dessous. L'attribut est pose par le
   meme code qui ouvre la barre, voir majBarre dans app.js. */
.bandeau[data-releve="true"]{bottom:calc(var(--gutter) + 5.5rem)}

.sticky-buy{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:rgba(255,255,255,.94);border-top:1px solid var(--line);
  box-shadow:0 -10px 30px -22px rgba(17,17,17,.6);
  padding-bottom:env(safe-area-inset-bottom);
  visibility:hidden;transform:translateY(101%);
  transition:transform .35s var(--ease),visibility 0s linear .35s;
}
.sticky-buy[data-open="true"]{
  visibility:visible;transform:none;
  transition:transform .35s var(--ease),visibility 0s;
}
.is-locked .sticky-buy{transform:translateY(101%)}
/* En bas de page la barre est sortie : on lui reserve sa hauteur sous le pied
   de page, sinon elle recouvre la derniere ligne. */
.page-produit .footer__legal{padding-bottom:6.5rem}
@supports (backdrop-filter:blur(10px)){
  .sticky-buy{background:rgba(255,255,255,.82);backdrop-filter:blur(12px)}
}
.sticky-buy__inner{
  max-width:var(--page);margin-inline:auto;
  padding:.7rem var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:1.25rem;
}
/* min-width:0 sinon un libelle en nowrap pousse la mise en page hors de l'ecran. */
.sticky-buy .btn{min-height:3.25rem;padding-inline:1.4rem;min-width:0}
.sticky-buy__actions{display:flex;gap:.6rem;flex:none}

.sticky-buy__produit{display:flex;align-items:center;gap:.9rem;min-width:0}
.sticky-buy__produit img{
  width:3.4rem;aspect-ratio:4/5;object-fit:cover;background:var(--sand);
  border-radius:.25rem;flex:none;
}
.sticky-buy__texte{min-width:0}
.sticky-buy__nom{font-weight:500;font-size:.9375rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky-buy__taille{font-size:.8125rem;color:var(--grey);margin-top:.1rem}
.sticky-buy__prix{font-weight:500;font-size:.9375rem;white-space:nowrap;margin-top:.15rem}

.sticky-buy svg{width:1.15rem;height:1.15rem;stroke:currentColor;stroke-width:1.5;fill:none;flex:none}

/* ---------- Page contact ---------- */
.contact__voies{display:grid;gap:.6rem}
.contact__voie{
  display:grid;grid-template-columns:1.5rem 1fr;gap:.85rem;align-items:center;
  border:1px solid var(--line);border-radius:.5rem;padding:.85rem;
  transition:border-color .2s var(--ease),background-color .2s var(--ease);
}
.contact__voie:hover{border-color:var(--ink);background:var(--sand)}
.contact__voie svg{width:1.5rem;height:1.5rem;stroke:var(--ink);stroke-width:1.5;fill:none}
.contact__voie span{display:grid;gap:.1rem;font-size:.8125rem;color:var(--grey);min-width:0}
.contact__voie strong{font-size:.9375rem;font-weight:500;color:var(--ink);overflow-wrap:anywhere}
.contact__liens{display:grid;gap:.6rem;font-size:.9375rem}

/* ---------- Pages de texte ---------- */
/* Une page légale n'a pas d'image : la colonne est mesurée pour rester
   lisible, autour de soixante-quinze signes par ligne. */
.page-texte{max-width:72ch;padding-bottom:var(--section)}
.page-texte .h-section{margin-bottom:.5rem}

/* ---------- Textes légaux ---------- */
.legal{display:grid;gap:.85rem;margin-top:1rem;color:var(--grey);line-height:1.6}
.legal h3{color:var(--ink);font-size:1rem;font-weight:500;margin-top:.85rem}
.legal h3:first-child{margin-top:0}
.legal ul{display:grid;gap:.5rem;padding-left:1.1rem;list-style:disc}
.legal strong{color:var(--ink);font-weight:500}
.legal__maj{font-size:.8125rem;color:var(--grey);margin-top:.75rem}
/* Ce qui manque encore est signalé, jamais comblé par une valeur inventée. */
.legal__attente{
  border-left:2px solid var(--or);padding:.6rem 0 .6rem .9rem;
  background:var(--sand);color:var(--ink);font-size:.9375rem;
}
.legal__formulaire{
  display:grid;gap:.6rem;border:1px solid var(--line);border-radius:.5rem;
  padding:1.25rem 1.5rem;font-size:.9375rem;
}
.legal__formulaire p{margin:0}

/* ---------- Page de confirmation ---------- */
.merci{display:grid;gap:1rem;max-width:46rem;padding-block:clamp(1rem,4vw,3rem)}
.merci__actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem}

/* ---------- Page commande ----------
   Formulaire de livraison a gauche, recapitulatif a droite. Aucune donnee
   n'est envoyee a un serveur : la commande part par le client mail du
   visiteur, tant qu'il n'y a pas d'encaissement en ligne. */
.co{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);gap:clamp(1.75rem,4vw,4rem);align-items:start}
.co__form{display:grid;gap:clamp(1.5rem,3vw,2.25rem)}
.co__bloc{display:grid;gap:.9rem}
.co__titre{font-size:1.0625rem;font-weight:500}
.co__champ{display:grid;gap:.35rem}
.co__champ label{font-size:.8125rem;color:var(--grey)}
.co__champ abbr{text-decoration:none;color:var(--or-deep)}
.co__champ input,.co__champ textarea,.co__select{
  border:1px solid var(--line-strong);border-radius:.4rem;
  padding:.85rem 1rem;background:var(--paper);color:var(--ink);
  font-size:1rem;width:100%;
  transition:border-color .2s var(--ease);
}
.co__champ textarea{resize:vertical;min-height:5rem;line-height:1.5}
.co__champ input:focus,.co__champ textarea:focus,.co__select:focus{border-color:var(--ink);outline:none}
.co__champ input::placeholder,.co__champ textarea::placeholder{color:var(--grey)}
.co__duo{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.co__champ--court{max-width:11rem}
.co__erreur{font-size:.8125rem;color:#e5484d;display:none}
.co__champ.has-error input{border-color:#e5484d}
.co__champ.has-error .co__erreur{display:block}
.co__legal{font-size:.8125rem;color:var(--grey);line-height:1.5;margin-top:-.5rem}

.co__recap{position:sticky;top:6.5rem}
.co__recap-boite{border:1px solid var(--line);border-radius:.6rem;padding:1.35rem;display:grid;gap:1.1rem}
.co__recap-tete{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.co__ligne{display:grid;grid-template-columns:4.25rem 1fr;gap:.9rem;padding-block:.85rem;border-top:1px solid var(--line)}
.co__ligne img{aspect-ratio:4/5;object-fit:cover;background:var(--sand);width:100%;border-radius:.3rem}
.co__ligne-nom{font-weight:500;font-size:.9375rem}
.co__ligne-meta{color:var(--grey);font-size:.8125rem;margin-top:.15rem}
.co__ligne-prix{font-weight:500;font-size:.9375rem;margin-top:.35rem}
.co__totaux{display:grid;gap:.5rem;border-top:1px solid var(--line);padding-top:1rem}
.co__totaux>div{display:flex;justify-content:space-between;gap:1rem;font-size:.9375rem;color:var(--grey)}
.co__totaux .co__total{color:var(--ink);font-weight:500;font-size:1.0625rem;padding-top:.35rem}

/* ---------- Guide des tailles ----------
   Meme panneau que le panier : lateral sur ordinateur, plein ecran sur mobile,
   ou .drawer fait deja width:min(27rem,100%). */
.guide__bloc{display:grid;gap:.85rem;min-width:0}
.guide__h{font-size:1rem;font-weight:500}

.guide__unites{
  display:inline-flex;justify-self:start;
  border:1px solid var(--line-strong);border-radius:.3rem;overflow:hidden;
}
.guide__unite{
  padding:.6rem 1.5rem;font-size:.9375rem;color:var(--grey);
  border-right:1px solid var(--line-strong);
  transition:color .2s var(--ease),box-shadow .2s var(--ease);
}
.guide__unite:last-child{border-right:0}
.guide__unite[aria-pressed="true"]{color:var(--ink);font-weight:500;box-shadow:inset 0 -2px 0 var(--ink)}

.guide__scroll{overflow-x:auto;min-width:0;-webkit-overflow-scrolling:touch}
.guide__table{border-collapse:collapse;font-size:.875rem;white-space:nowrap;width:100%}
.guide__table th,.guide__table td{padding:.85rem 1rem;text-align:center}
.guide__table thead th{background:var(--ink);color:var(--paper);font-weight:500}
/* La colonne des intitules reste visible pendant le defilement lateral. */
.guide__table thead th:first-child,
.guide__table tbody th{position:sticky;left:0;z-index:1}
.guide__table tbody th{
  background:var(--paper);text-align:left;font-weight:500;
  white-space:normal;min-width:9rem;
}
.guide__table tbody tr:nth-child(odd) td{background:var(--sand)}
.guide__table td{color:var(--grey)}

.guide__note{font-size:.8125rem;color:var(--grey)}
.guide__attente{font-size:.875rem;color:var(--grey);line-height:1.5}
.guide__conseils{display:grid;gap:.6rem;color:var(--grey);font-size:.9375rem}
.guide__conseils li{display:grid;grid-template-columns:.4rem 1fr;gap:.75rem;align-items:baseline}
.guide__conseils li::before{content:"";width:.35rem;height:.35rem;border-radius:50%;background:var(--or)}

.guide__etapes{display:grid;gap:.9rem;counter-reset:etape}
.guide__etapes li{
  display:grid;grid-template-columns:1.6rem 1fr;gap:.8rem;align-items:start;
  color:var(--grey);font-size:.9375rem;line-height:1.5;
}
.guide__etapes li::before{
  counter-increment:etape;content:counter(etape);
  width:1.6rem;height:1.6rem;border-radius:50%;background:var(--ink);color:var(--paper);
  display:grid;place-items:center;font-size:.75rem;font-weight:500;
}
.empty svg{width:2.5rem;height:2.5rem;stroke:var(--line-strong);stroke-width:1.2;fill:none}
.empty h3{font-size:1.125rem;font-weight:500}
.empty p{color:var(--grey);font-size:.9375rem}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:1.5rem;z-index:120;transform:translate(-50%,180%);
  background:var(--ink);color:#fff;padding:.9rem 1.4rem;border-radius:2rem;
  font-size:.9375rem;display:flex;align-items:center;gap:.6rem;
  transition:transform .5s var(--ease);box-shadow:0 18px 40px -20px rgba(0,0,0,.6);
}
.toast[data-open="true"]{transform:translate(-50%,0)}
.toast svg{width:1.1rem;height:1.1rem;stroke:var(--or);stroke-width:2;fill:none}

/* ---------- Fil d'ariane ---------- */
.crumbs{display:flex;gap:.5rem;font-size:.8125rem;color:var(--grey);padding-block:1rem;flex-wrap:wrap}
.crumbs a:hover{color:var(--ink);text-decoration:underline}

/* ---------- Fiche produit ---------- */
.pdp{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  column-gap:clamp(1.5rem,4vw,4rem);row-gap:1.5rem;align-items:start;
}

.pdp__gallery{display:grid;grid-template-columns:5rem 1fr;gap:.75rem;position:sticky;top:6.5rem}
.pdp__gallery{grid-column:1;grid-row:1/span 2}
.pdp__thumbs{display:grid;gap:.5rem;align-content:start}
.pdp__thumbs button{
  border:1px solid transparent;border-radius:.4rem;background:var(--sand);overflow:hidden;
  transition:border-color .2s var(--ease);
}
.pdp__thumbs button img{aspect-ratio:4/5;object-fit:cover;width:100%;height:auto}
.pdp__thumbs button:hover{border-color:var(--line-strong)}
.pdp__thumbs button[aria-selected="true"]{border-color:var(--ink)}

.pdp__stage{position:relative;background:var(--sand);border-radius:.4rem;overflow:hidden}

/* Rail de photos : une seule visible a la fois, calee par scroll-snap.
   Sur mobile cela donne le glissement au doigt sans une ligne de JS de geste ;
   ailleurs ce sont les fleches et les vignettes qui pilotent le defilement. */
.pdp__track{
  display:grid;grid-auto-flow:column;grid-auto-columns:100%;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none;
}
.pdp__track::-webkit-scrollbar{display:none}
.pdp__track img{
  scroll-snap-align:center;scroll-snap-stop:always;
  width:100%;aspect-ratio:4/5;max-height:min(80vh,780px);object-fit:cover;
}

/* Pastilles de position, affichees uniquement sur mobile. */
.pdp__dots{
  position:absolute;left:50%;bottom:1rem;transform:translateX(-50%);
  display:none;align-items:center;gap:.4rem;
  padding:.5rem .7rem;border-radius:2rem;background:rgba(255,255,255,.85);
  box-shadow:0 2px 10px -4px rgba(17,17,17,.35);
}
.pdp__dots button{
  width:.4rem;height:.4rem;border-radius:2rem;background:rgba(17,17,17,.3);
  transition:width .35s var(--ease),background-color .35s var(--ease);
}
.pdp__dots button[aria-current="true"]{width:1.4rem;background:var(--ink)}
.pdp__arrows{
  position:absolute;right:1rem;bottom:1rem;display:flex;gap:.65rem;
}
.pdp__arrows button{
  width:2.9rem;height:2.9rem;border-radius:50%;background:var(--paper);
  display:grid;place-items:center;box-shadow:0 3px 12px -5px rgba(17,17,17,.45);
  transition:background-color .25s var(--ease),transform .12s var(--ease);
}
.pdp__arrows button:hover{background:var(--sand-2)}
.pdp__arrows button:active{transform:scale(.93)}
.pdp__arrows svg{width:1.05rem;height:1.05rem;stroke:var(--ink);stroke-width:1.8;fill:none}

/* ---------- Nom et prix ---------- */
.pdp__head{grid-column:2;grid-row:1;display:grid;gap:.35rem;align-content:start}
.pdp__head h1{font-size:clamp(1.375rem,2vw,1.625rem);font-weight:500;line-height:1.3}
.buy__flag{color:var(--or);font-size:.9375rem;font-weight:500}
.buy__sub{color:var(--grey);line-height:1.45}
.buy__accroche{color:var(--grey);font-style:italic;font-size:.9375rem;margin-top:.15rem}
.buy__price{font-weight:500;font-size:1.0625rem;margin-top:.75rem}
.buy__price small{display:block;color:var(--grey);font-weight:400;font-size:.8125rem;margin-top:.3rem}

/* ---------- Colonne d'achat ---------- */
.buy{grid-column:2;grid-row:2;display:grid;gap:1.75rem}
.buy__bloc{display:grid;gap:.75rem}
.buy__label-row{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.buy__label{font-weight:500;font-size:1rem}
.buy__guide{display:inline-flex;align-items:center;gap:.45rem;font-weight:500;font-size:.9375rem}
.buy__guide:hover{text-decoration:underline;text-underline-offset:3px}
.buy__guide svg{width:1.25rem;height:1.25rem;stroke:var(--ink);stroke-width:1.4;fill:none}

.buy__actions{display:grid;gap:.75rem}
.buy__note{text-align:center;font-size:.875rem;color:var(--grey);margin-top:-.75rem}
.buy__retrait{display:grid;gap:.35rem;justify-items:start}
.buy__retrait-titre{font-weight:500;font-size:.9375rem}
.btn__coeur{width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:1.6}
#pdp-fav[aria-pressed="true"] .btn__coeur{fill:currentColor}

.swatch-row{display:flex;gap:.5rem;flex-wrap:wrap}
.swatch{
  width:4rem;border:1px solid var(--line);border-radius:.4rem;background:var(--sand);overflow:hidden;
  transition:border-color .2s var(--ease);
}
.swatch img{aspect-ratio:4/5;object-fit:cover;width:100%;height:auto}
.swatch:hover{border-color:var(--line-strong)}
.swatch[aria-current="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}

/* auto-fit : la grille suit le nombre de tailles du catalogue, sans laisser
   de case vide le jour ou une taille est ajoutee ou retiree. */
.size-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(3.25rem,1fr));gap:.5rem}
.size-grid button{
  border:1px solid var(--line-strong);border-radius:.35rem;min-height:3.5rem;
  font-size:.9375rem;background:var(--paper);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.size-grid button:hover:not([disabled]){border-color:var(--ink)}
.size-grid button[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.size-grid button[disabled]{
  color:var(--line-strong);border-color:var(--line);background:var(--sand);
  cursor:not-allowed;text-decoration:line-through;
}
.size-error{color:#e5484d;font-size:.8125rem;display:none}
.buy.has-error .size-error{display:block}
.buy.has-error .size-grid button:not([disabled]){border-color:#e5484d}
.buy.has-error .size-grid button[aria-pressed="true"]{border-color:var(--ink)}

.acc{border-top:1px solid var(--line)}
.acc__item{border-bottom:1px solid var(--line)}
.acc__btn{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1.15rem 0;font-weight:500;text-align:left;
}
.acc__btn svg{width:1rem;height:1rem;stroke:var(--ink);stroke-width:1.6;fill:none;transition:transform .3s var(--ease);flex:none}
.acc__btn[aria-expanded="true"] svg{transform:rotate(45deg)}
.acc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}
.acc__panel>div{overflow:hidden}
.acc__item[data-open="true"] .acc__panel{grid-template-rows:1fr}
.acc__panel p,.acc__panel li{color:var(--grey);font-size:.9375rem}
.acc__panel ul{display:grid;gap:.4rem;padding-bottom:1.25rem}
.acc__panel p{padding-bottom:1.25rem}

.spec-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
/* align-content:start, sinon les cellules les plus courtes etirent leurs lignes
   et les trois descriptions ne demarrent plus a la meme hauteur. */
.spec-strip>div{background:var(--paper);padding:2rem 1.5rem;display:grid;gap:.6rem;align-content:start;justify-items:center;text-align:center}
.spec-strip svg{width:2rem;height:2rem;stroke:var(--ink);stroke-width:1.2;fill:none}
.spec-strip h3{font-size:.9375rem;font-weight:500}
.spec-strip p{font-size:.875rem;color:var(--grey);max-width:26ch}

.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.feature-grid figure{display:grid;gap:.85rem}
.feature-grid img{aspect-ratio:1;object-fit:cover;background:var(--sand);width:100%}
.feature-grid figcaption{font-size:.9375rem;color:var(--grey)}
.feature-grid strong{display:block;color:var(--ink);font-weight:500;margin-bottom:.15rem}

/* Images gardées dans leurs proportions d'origine : archive, pas de recadrage. */
.genese__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;margin-top:2.5rem}
.genese__grid figure{display:grid;gap:.6rem}
.genese__grid img{width:100%;height:auto;border-radius:.5rem;background:var(--sand)}
.genese__grid figcaption{font-size:.8125rem;color:var(--grey)}

/* ---------- Barre de filtres ---------- */
.filters{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding-block:1rem;flex-wrap:wrap;
}
.chips{display:flex;gap:.5rem;flex-wrap:wrap}
.chip{
  border:1px solid var(--line-strong);border-radius:2rem;padding:.5rem 1rem;
  font-size:.875rem;transition:border-color .2s var(--ease),background-color .2s var(--ease);
}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.select{border:1px solid var(--line-strong);border-radius:2rem;padding:.5rem 1rem;background:var(--paper);font-size:.875rem}

/* ---------- Révélations au défilement ---------- */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i,0) * 80ms)}
[data-reveal].is-in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:1240px) and (min-width:601px){
  .hero__media img{object-position:70% center}
}
@media (max-width:1080px){
  .pill--nav{display:none}
  .burger{display:grid}
  /* Deux colonnes seulement : la navigation est masquee, une troisieme piste
     laissait un vide de la largeur d'une gouttiere a droite des icones. */
  .header__bar{grid-template-columns:auto 1fr}
  .co{grid-template-columns:1fr}
  /* Le recapitulatif passe au-dessus du formulaire : on veut savoir ce qu'on
     paie avant de saisir son adresse. */
  .co__recap{position:static;order:-1}
  .pdp{grid-template-columns:1fr}
  .pdp__head,.pdp__gallery,.buy{grid-column:1;grid-row:auto}
  .pdp__gallery{position:static}
  .news__inner{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
  .ig-grid{grid-template-columns:repeat(3,1fr)}
  .ig-grid figure:nth-child(1){grid-row:span 1;grid-column:span 1}
}
@media (max-width:860px){
  .editorial,.editorial--flip{grid-template-columns:1fr}
  .editorial--bleed-l{margin-left:0}
  .duo{grid-template-columns:1fr}
  .tile img{aspect-ratio:4/3}
  .reassure__grid{grid-template-columns:1fr 1fr}
  /* Sous 860 px la section retombe a deux photos : la troisieme allongerait
     la page sans rien apprendre de plus. */
  .feature-grid{grid-template-columns:1fr}
  .feature-grid figure:nth-child(3){display:none}
  .spec-strip>div{padding:1.5rem .85rem}
  .spec-strip p{font-size:.8125rem}
  .rail{grid-auto-columns:minmax(72vw,1fr)}
}
@media (max-width:600px){
  :root{--h-header:4.15rem}
  .genese__grid{grid-template-columns:1fr}
  /* Titre ramene sur une seule ligne : le saut manuel saute, le corps se cale
     sur la largeur disponible. */
  .h-display--mobile-une-ligne{
    white-space:nowrap;
    font-size:min(var(--t-display), calc((100vw - 2.6rem) / 12.6));
  }
  .h-display--mobile-une-ligne br{display:none}

  /* Les chiffres reviennent a gauche sur telephone. */
  .editorial__stats{justify-content:start}

  /* Bouton plus discret : en pleine taille il pesait autant que les vignettes. */
  .social__cta{min-height:2.9rem;padding-inline:1.25rem;font-size:.9375rem;margin-top:1.25rem}

  /* Telephone : une rangee qui defile, sinon six cartes 9:16 sur deux colonnes
     donneraient une section trois fois plus haute que le reste de la page. */
  .social__grid{
    display:flex;overflow-x:auto;scrollbar-width:none;
    /* On reprend la main sur la rangee centree du bureau : ici la bande
       defile, donc pas de retour a la ligne et pas de centrage global,
       qui decalerait la piste et ferait deborder la page. */
    flex-wrap:nowrap;justify-content:flex-start;
    scroll-snap-type:x mandatory;
    margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);
  }
  .social__grid::-webkit-scrollbar{display:none}
  .social__card{flex:none;width:42vw;max-width:none;scroll-snap-align:start}
  /* Une seule video : il n'y a rien a faire defiler, donc on annule le
     debordement de la bande, qui decalait le centre de la largeur d'une
     gouttiere vers la gauche. La carte se centre alors sur l'ecran. */
  .social__grid:has(> :only-child){
    overflow-x:visible;margin-inline:0;padding-inline:0;justify-content:center;
  }
  .social__card:only-child{margin-inline:auto;width:62vw}
  /* Logo cale a gauche, icones calees a droite : on rend les retraits. */
  .header__inner{padding:.6rem .75rem}
  .header__bar{padding-inline:.5rem}
  .pill{height:2.95rem}
  .pill--brand{padding-inline:1.05rem}
  .pill--brand .brand__mark{width:3rem}
  /* Icones espacees, comme sur les barres mobiles des grandes boutiques :
     elles se touchaient presque avec un ecart de .15rem. */
  .pill--tools{gap:.55rem;padding-inline:.8rem}
  .pill--tools .icon-btn{width:2.45rem;height:2.45rem}
  /* Sous 360 px on resserre l'ecart entre icones, pas les retraits de la barre. */
  @media (max-width:360px){
    .pill--tools{gap:.35rem;padding-inline:.55rem}
  }
  .announce p{font-size:.6875rem;padding-block:.5rem}
  .footer__grid{grid-template-columns:1fr}
  .ig-grid{grid-template-columns:repeat(2,1fr)}
  .pdp{row-gap:1.15rem}
  .pdp__gallery{grid-template-columns:1fr;gap:.6rem}
  /* Le visuel sort des gouttieres et va d'un bord a l'autre de l'ecran.
     Les vignettes disparaissent : elles faisaient doublon avec les coloris
     juste en dessous, et le rail se parcourt au doigt. */
  .pdp__stage{margin-inline:calc(var(--gutter) * -1);border-radius:0}
  .pdp__track img{max-height:none}
  .pdp__thumbs,.pdp__arrows{display:none}
  .pdp__dots{display:flex}
  /* Les trois chiffres tiennent sur une seule ligne : ecart resserre et
     corps reduit, sinon « XS - XL » fait passer le bloc a la ligne. */
  /* Mobile : meme barre que sur ordinateur, rappel produit et un seul bouton.
     Tout est resserre d'un cran pour tenir sur une largeur de telephone. */
  .sticky-buy__inner{padding-inline:.9rem;gap:.6rem}
  .sticky-buy__produit{gap:.6rem;min-width:0}
  .sticky-buy__produit img{width:2.6rem;border-radius:.35rem}
  .sticky-buy__nom{font-size:.8125rem}
  .sticky-buy__taille{font-size:.6875rem}
  .sticky-buy__prix{font-size:.8125rem;margin-top:.1rem}
  .sticky-buy .btn{min-height:2.9rem;padding-inline:.9rem;font-size:.875rem}
  /* Deux maillots par ligne, comme sur les grandes boutiques mobiles. Les
     libelles descendent d'un cran pour rester lisibles sur une demi-largeur. */
  .grid-products{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.75rem .5rem}
  .card__body{padding-top:.7rem}
  .card__name,.card__sub{font-size:.875rem}
  .card__price{font-size:.9375rem;margin-top:.4rem}
  .card__flag{top:.5rem;left:.5rem;font-size:.5625rem;padding:.3rem .45rem}

  /* Les filtres tiennent sur une seule ligne qui defile, plutot que de passer
     a la ligne. Ils debordent des gouttieres comme les autres rails du site. */
  .chips{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    flex:1 1 100%;min-width:0;
    margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);
  }
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:none}
  .co__duo{grid-template-columns:1fr}
  .co__champ--court{max-width:none}
  .editorial__stats{grid-template-columns:repeat(3,auto);gap:1.1rem}
  .editorial__stats dt{font-size:.625rem;letter-spacing:.1em}
  .editorial__stats dd{font-size:1.4rem}
  /* Trois colonnes tres etroites : on resserre tout pour tenir sur une ligne,
     et les traits de separation disparaissent pour alleger la bande. */
  .spec-strip{gap:0;background:none}
  .spec-strip>div{padding:1.15rem .5rem;gap:.4rem}
  .spec-strip svg{width:1.5rem;height:1.5rem}
  /* Deux lignes reservees au titre : les trois descriptions demarrent a la meme hauteur. */
  .spec-strip h3{font-size:.8125rem;line-height:1.25;min-height:2.5em}
  .spec-strip p{font-size:.625rem;line-height:1.45}
}
@media (min-width:861px){
  .rail{grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;overflow-x:auto}
  .rail--3{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Mobile et tablette : visuel vertical complet, cadré par le bas pour que les
   maillots restent hauts et que le tiers vide du bas accueille le texte.
   Ce seuil doit rester aligné sur le media du <source> dans index.html. */
@media (max-width:900px){
  /* Héros plus haut : sur une largeur de tablette, un cadre trop court
     obligerait le recadrage à manger le haut des maillots. */
  .hero{min-height:min(96svh,1150px)}
  .hero__media img{object-position:center bottom}
  /* Le bloc titre descend, mais pas au point de pousser le bouton sous la
     ligne de flottaison : marge basse reduite, interlignes du bloc resserres. */
  .hero__inner{padding-bottom:clamp(1.25rem,4vw,1.75rem)}
  .hero__sub{margin:.65rem 0 1rem}
  .hero__scrim{background:linear-gradient(to top,rgba(237,218,192,.92) 0%,rgba(237,218,192,.7) 22%,rgba(237,218,192,.2) 38%,rgba(237,218,192,0) 52%)}
}

/* Telephone : plus d'apparition au defilement. Les blocs sont la d'emblee,
   ce qui evite le clignotement des cartes qui montent une a une. */
@media (max-width:600px){
  [data-reveal]{opacity:1;transform:none;transition:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1;transform:none}
}