/* ==========================================================================
   GOURDE SAUGE — feuille de style
   Sommaire :
   1.  Variables (couleurs, polices, espacements)
   2.  Reset & base
   3.  Utilitaires (wrap, eyebrow, boutons, visually-hidden)
   4.  HERO (fond, voile, barre, menu, gourde, textes)
   5.  Espace de scroll + recouvrement par le site
   6.  Sections : bénéfices, specs, coloris/avis, achat, FAQ, footer
   7.  Responsive
   8.  Fallbacks : prefers-reduced-motion / pas de JS / pas de GSAP
   ========================================================================== */

/* ============================ 1. VARIABLES ============================== */
:root {
  /* --- Palette (ajustez ici) --- */
  --sage:        #9DAA92;   /* vert sauge */
  --forest:      #3A4A3A;   /* vert forêt profond */
  --cream:       #F2ECE0;   /* crème / blanc cassé */
  --terracotta:  #C98A6A;   /* accent doux */

  /* Accent « vivant » : modifié par le nuancier de coloris (JS) */
  --accent:      var(--sage);

  /* Dérivés */
  --ink:         #23301F;   /* texte principal sur fond clair */
  --ink-soft:    #5C6857;   /* texte secondaire */
  --line:        rgba(58, 74, 58, .16);
  --on-dark:     #F7F3EA;   /* texte sur photo / fond sombre */

  /* --- Typographie (changez les familles ici) --- */
  --font-title: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body:  "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Polices du hero : indexées sur la hauteur, car toute la chorégraphie est
     exprimée en % de la hauteur du hero (voir section 4). */
  /* Chaque taille est bornée par DEUX contraintes :
       - vh : la valeur de la maquette (toute la chorégraphie est en % de hauteur) ;
       - vw : la largeur maxi pour que le texte tienne dans sa boîte (44 %, 25 %…)
              sans ligne en trop. Mesurée sur la police réelle.
     Sur un écran aussi large que le cadre Figma (ratio 1.94), c'est le vh qui
     l'emporte : le rendu reste celui de la maquette. Sur un écran plus « carré »,
     le vw prend le relais et évite les débordements. */
  --fs-hero:      clamp(1.1rem, min(7.83vh, 4.75vw), 6.5rem);   /* titre A     */
  --fs-hero-sub:  clamp(.55rem, min(2.21vh, 1.35vw), 1.3rem);   /* sous-titre  */
  --fs-hero-2:    clamp(1.1rem, min(7.83vh, 4.60vw), 6.5rem);   /* titre B     */
  --fs-hero-para: clamp(.5rem, min(2.21vh, 1.24vw), 1.3rem);    /* paragraphe  */
  --fs-h2:      clamp(1.9rem, 3.6vw, 3.2rem);
  --fs-h3:      clamp(1.05rem, 1.5vw, 1.25rem);
  --fs-body:    clamp(1rem, 1.15vw, 1.075rem);
  --fs-small:   .875rem;

  /* --- Espacements --- */
  --sp-1: .5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2.5rem;
  --sp-5: 4rem;
  --sp-6: 6rem;
  --section-y: clamp(4.5rem, 9vw, 8.5rem);
  --gutter:    clamp(1.25rem, 5vw, 4rem);

  /* --- Divers --- */
  --maxw:   1180px;
  --radius: 18px;
  --radius-lg: 34px;
  --shadow: 0 24px 60px -28px rgba(35, 48, 31, .45);

  /* Longueur de scroll pilotant l'animation du hero (spec : ~350–400vh) */
  --hero-scroll: 400vh;
}

/* ============================ 2. RESET & BASE =========================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* Le smooth scroll natif reste utile si Lenis n'est pas chargé */
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

h1, h2, h3 { margin: 0; font-family: var(--font-title); font-weight: 500; line-height: 1.08; letter-spacing: -.01em; }
p  { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--forest); color: var(--cream);
  padding: .75rem 1.25rem; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* ============================ 3. UTILITAIRES =========================== */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 820px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.eyebrow {
  font-size: var(--fs-small);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--sp-2);
}

.section__title { font-size: var(--fs-h2); margin-bottom: var(--sp-3); }
.lead { color: var(--ink-soft); max-width: 46ch; }

/* --- Boutons --- */
.btn {
  --btn-bg: transparent;
  --btn-fg: currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 1.6rem;
  border: 1px solid currentColor;
  border-radius: 100px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease, transform .3s ease, border-color .3s ease;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--solid { --btn-bg: var(--forest); --btn-fg: var(--cream); border-color: var(--forest); }
.btn--solid:hover { --btn-bg: var(--accent); border-color: var(--accent); color: #1d2a1b; }

.btn--full { width: 100%; padding-block: 1.05rem; }

/* ============================ 4. HERO ================================== */
.hero {
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh;
  z-index: 1;
  overflow: hidden;
  background: var(--forest);
  color: var(--on-dark);
  transform-origin: 50% 40%;
}
.hero.is-hidden { visibility: hidden; }

/* [1] Fond cascade — géométrie relevée sur les frames Figma :
   rect 2909 × 5187 sur un cadre 2657 × 1367, posé en (−85.5, −170.5). */
.hero__bg {
  position: absolute; z-index: 0;
  left: -3.22%; top: -12.47%;
  width: 109.48%; height: 379.44%;
  transform-origin: 0 0;
  will-change: transform;
}
.hero__bg-img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* Voile dégradé solidaire de l'image (transparent en haut → noir en bas),
   présent aux étapes 1-2 puis effacé aux étapes 3-4. */
.hero__bg-veil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
}

/* Placeholder si l'image manque */
.hero__bg.is-missing { background: linear-gradient(170deg, #6E7F68 0%, #3A4A3A 55%, #26301F 100%); }
.hero__bg.is-missing .hero__bg-img { display: none; }

/* --- Pilules « J'adopte la mienne » : noir 40 % + filet blanc, 8.92 % × 5.63 % --- */
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box;
  width: 8.92%; height: 5.63%;
  border: 1.5px solid rgba(255, 255, 255, .92);
  border-radius: 100px;
  background: rgba(0, 0, 0, .4);
  color: var(--on-dark);
  font-family: var(--font-body);
  font-size: clamp(.5rem, 1.42vh, .95rem);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.pill:hover { background: rgba(247, 243, 234, .95); color: var(--forest); border-color: transparent; }

/* [8] Barre du haut — traits menu à 2.45 %, bouton à 87.37 % */
.menu-btn {
  position: absolute; z-index: 6;
  left: 2.45%; top: 4.65%;
  display: block;
  /* La largeur se mesurait en % de la LARGEUR et la hauteur en % de la
     HAUTEUR : en portrait les deux divergent et les traits devenaient des
     moignons (8.8 px de large étalés sur 19 px de haut). On garde la taille
     exacte de la maquette sur grand écran (43.4 × 24.4 px à 1920) via des vw,
     avec un plancher qui préserve la proportion sur écran étroit. */
  width:  clamp(26px, 2.26vw, 44px);
  height: clamp(15px, 1.27vw, 25px);
  padding: 0;
  border: 0; background: transparent; cursor: pointer;
}
/* Cible tactile confortable, sans toucher à la position des traits. */
.menu-btn::before {
  content: ''; position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: max(44px, 100%); height: 44px;
}
.menu-btn span {
  display: block; position: absolute; left: 0;
  width: 100%; height: 1.5px; border-radius: 2px;
  background: var(--on-dark);
  transition: transform .35s ease, opacity .25s ease, top .35s ease;
}
/* Les trois traits tiennent DANS la boîte : le dernier était calé à top 100 %,
   donc entièrement sous le bouton (1.5 px de débord). */
.menu-btn span:nth-child(1) { top: 0; }
.menu-btn span:nth-child(2) { top: calc(50% - .75px); }
.menu-btn span:nth-child(3) { top: calc(100% - 1.5px); }
/* À l'ouverture, les deux traits extérieurs REJOIGNENT le centre avant de
   pivoter : sans ce déplacement, translateY(50%) ne valait que 50 % de la
   hauteur d'un trait (0.75 px), les branches restaient écartées de 13.5 px et
   la croix n'en était pas une. */
.menu-btn[aria-expanded="true"] span:nth-child(1) { top: calc(50% - .75px); transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { top: calc(50% - .75px); transform: rotate(-45deg); }

.hero__topcta { position: absolute; left: 87.37%; top: 4.79%; z-index: 6; }

/* Menu déroulant */
.nav-panel {
  position: absolute; z-index: 6;
  top: 12%; left: 2.45%;
  background: rgba(35, 48, 31, .82);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(247, 243, 234, .18);
  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3);
  min-width: 220px;
  animation: navIn .3s ease both;
}
.nav-panel[hidden] { display: none; }
.nav-panel a { display: block; padding: .5rem 0; text-decoration: none; font-size: .95rem; opacity: .9; }
.nav-panel a:hover { opacity: 1; color: var(--accent); }
@keyframes navIn { from { opacity: 0; transform: translateY(-8px); } }

/* [5] La gourde — TAILLE CONSTANTE 35.30 % × 91.88 % sur toute la séquence.
   Les matrices Figma valent matrix(-0.960362 -0.278755 -0.278755 0.960362 …)
   à l'étape 3 et matrix(-1 0 0 1 …) à l'étape 4 : déterminant −1 donc miroir
   horizontal, et échelle 1 dans les deux cas. L'« agrandissement » de la spec
   écrite (47.1 % × 107.4 %) n'était que la boîte englobante d'une rotation
   de 16.19°. Reproduit ici par translate() rotate() scaleX(-1) depuis 0 0,
   ce qui redonne exactement la matrice de la maquette. */
.hero__bottle {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 35.30%;
  height: 91.88%;
  transform-origin: 0 0;
  opacity: 0;               /* étape 1 : opacité 0 */
  will-change: transform, opacity;
}
.hero__bottle img { width: 100%; height: 100%; object-fit: fill; }

/* Placeholder gourde (affiché seulement si bottle.png manque) */
.bottle-ph { display: none; }
.hero__bottle.is-missing img { display: none; }
.hero__bottle.is-missing .bottle-ph {
  display: block;
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 58%; height: 82%;
  background: var(--sage);
  border-radius: 46px 46px 30px 30px;
}
.hero__bottle.is-missing .bottle-ph::before {
  content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  width: 42%; height: 9%;
  background: var(--forest);
  border-radius: 10px 10px 4px 4px;
}

/* Éléments animés du hero.
   Origine = coin haut-gauche : chacun est calé en left:0/top:0 et positionné
   par un translate en pixels calculé à partir des % de la spec (js/main.js).
   Les largeurs sont celles de la spec (% de la largeur du hero). */
.hero__el {
  position: absolute; left: 0; top: 0; z-index: 3;
  margin: 0;
  will-change: transform, opacity;
}

/* Tailles de police : indexées sur la HAUTEUR du hero, et calées pour
   retrouver les boîtes de texte relevées sur les frames Figma (en % du hero) :
     titre A     2 lignes centrées      x 31.22→69.01   y 29.38→44.90
     sous-titre  3 lignes centrées      x 37.93→62.02   y 48.42→55.41
     titre B     2 lignes à droite      x 56.63→96.26   y 23.67→38.22
     paragraphe  5 lignes à droite      x 63.55→96.03   y 46.16→58.06          */

/* [2] Titre A — conteneur 44 %, texte centré */
.hero__titleA {
  width: 44%;
  text-align: center;
  font-size: var(--fs-hero);
  line-height: 1.157;
  text-shadow: 0 2px 30px rgba(15, 24, 13, .35);
}

/* [3] Sous-titre — conteneur 25 %, texte centré */
.hero__subtitle {
  width: 25%;
  text-align: center;
  font-size: var(--fs-hero-sub);
  line-height: 1.128;
  font-weight: 400;
  color: var(--on-dark);
}

/* [4] CTA du hero — pilule identique à celle de la barre du haut */
.hero__cta { z-index: 4; }

/* Masqués tant que GSAP ne les a pas positionnés. Sans cela, entre l'affichage
   du HTML et l'exécution du script, les trois textes s'empilent dans le coin
   haut-gauche (.hero__el est calé en left:0/top:0), par-dessus le bouton de
   menu, puis sautent à leur place : c'est le à-coup visible au chargement.
   L'intro les révèle ; les replis .no-js / .no-gsap / .is-static les passent
   de toute façon en display:none. */
.hero__titleA, .hero__subtitle, .hero__cta { opacity: 0; visibility: hidden; }

/* [6] Titre B — conteneur 45 %, texte ALIGNÉ À DROITE */
.hero__titleB {
  width: 45%;
  text-align: right;
  font-size: var(--fs-hero-2);
  line-height: 1.157;
  text-shadow: 0 2px 30px rgba(15, 24, 13, .35);
  opacity: 0; visibility: hidden;      /* étapes 1 à 3 */
}

/* [7] Paragraphe — conteneur 34 %, texte ALIGNÉ À DROITE */
.hero__para {
  width: 34%;
  text-align: right;
  font-size: var(--fs-hero-para);
  line-height: 1.128;
  font-weight: 400;
  color: var(--on-dark);
  text-shadow: 0 1px 18px rgba(15, 24, 13, .5);
  opacity: 0; visibility: hidden;      /* étapes 1 à 3 */
}

/* ================= 5. ESPACE DE SCROLL + RECOUVREMENT ================== */
/* --hero-scroll = longueur d'animation (p : 0 → 1).
   Les 100vh ajoutés servent au recouvrement, APRÈS p = 1. */
.hero-space { height: calc(var(--hero-scroll) + 100vh); }

.site {
  position: relative;
  z-index: 5;                       /* passe par-dessus le hero fixé */
  background: var(--cream);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: 0 -30px 70px -20px rgba(20, 30, 18, .55);
  overflow: hidden;                 /* conserve les coins arrondis */
}

.section { padding-block: var(--section-y); }
.section--specs { background: #EAE3D5; }
.section--buy   { background: var(--forest); color: var(--cream); }
.section--buy .eyebrow { color: rgba(242, 236, 224, .7); }

/* ============================ 6. SECTIONS ============================== */

/* --- Bénéfices --- */
.benefits {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: var(--sp-5);
}

/* Carte : la photo occupe toute la surface, le texte est posé dessus.
   Tout ce qui bouge au survol est en transform / opacity (pas de reflow). */
.benefit {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: flex-end;
  isolation: isolate;                 /* garde les calques dans la carte */
  background: var(--forest);          /* fond si la photo manque */
  transition: transform .5s cubic-bezier(.2, .6, .2, 1),
              box-shadow .5s cubic-bezier(.2, .6, .2, 1);
}
.benefit__img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2, .6, .2, 1);
  will-change: transform;
}
/* Voile dégradé : assure la lisibilité du texte quelle que soit la photo. */
.benefit::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
              rgba(20, 28, 18, .10) 0%,
              rgba(20, 28, 18, .40) 45%,
              rgba(20, 28, 18, .86) 100%);
  transition: opacity .5s ease;
}

/* --- Survol : la photo zoome, la carte se soulève, le voile s'allège --- */
.benefit:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.benefit:hover .benefit__img { transform: scale(1.08); }
.benefit:hover::after { opacity: .82; }
.benefit:hover .benefit__icon { transform: translateY(-4px) scale(1.06); background: var(--cream); }
.benefit:hover .benefit__text p { opacity: 1; transform: translateY(0); }

/* Pastille d'icône, en haut à gauche de la photo */
.benefit__icon {
  position: absolute; top: var(--sp-2); left: var(--sp-2); z-index: 1;
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(247, 243, 234, .9);
  backdrop-filter: blur(4px);
  color: var(--forest);
  transition: transform .5s cubic-bezier(.2, .6, .2, 1), background-color .4s ease;
}
.benefit__icon svg { width: 23px; height: 23px; }

/* Texte sur la photo */
.benefit__text { position: relative; padding: var(--sp-3); color: var(--cream); }
.benefit__text h3 {
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  margin-bottom: .35rem;
  text-shadow: 0 2px 18px rgba(12, 20, 10, .5);
}
.benefit__text p {
  margin: 0;
  font-size: .95rem;
  color: rgba(242, 236, 224, .92);
  text-shadow: 0 1px 14px rgba(12, 20, 10, .6);
  /* Au repos le texte est légèrement en retrait ; il s'affirme au survol. */
  opacity: .85;
  transform: translateY(4px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.2, .6, .2, 1);
}

/* Pas d'animation si l'utilisateur a demandé à les réduire */
@media (prefers-reduced-motion: reduce) {
  .benefit, .benefit__img, .benefit__icon, .benefit__text p { transition: none; }
  .benefit:hover { transform: none; }
  .benefit:hover .benefit__img { transform: none; }
  .benefit__text p { opacity: 1; transform: none; }
}

/* --- Specs : piste horizontale (pin GSAP) — voir js/main.js --- */
/* Repli (sans pin) : la SECTION est le conteneur de défilement horizontal. */
.section--specs {
  /* Largeur d'un panneau de caractéristique. 100vw = plein écran (un panneau
     à la fois) ; en dessous, on aperçoit le panneau suivant, ce qui donne du
     rythme et montre qu'il y a une suite. Seule valeur à changer pour régler. */
  --spec-card-w: 64vw;

  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent) 60%, transparent) transparent;
}
.specs-track {
  display: flex;
  align-items: stretch;
  width: max-content;
  counter-reset: spec;
  will-change: transform;
}

/* Mode épinglé : la section fait 100vh, ne défile plus (GSAP déplace la piste). */
.section--specs.is-pinned { height: 100vh; overflow: hidden; }
.section--specs.is-pinned .specs-track { height: 100vh; padding-block: 0; }

.specs-intro {
  flex: 0 0 auto;
  width: 100vw;
  min-height: 62vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--section-y) var(--gutter);
}
.specs-intro > * { max-width: min(560px, 84vw); }
.specs-intro .section__title { margin-bottom: var(--sp-3); }

/* Panneau : une caractéristique = un bloc bord à bord, de largeur --spec-card-w.
   (Vaut aussi en repli manuel, où la piste défile à la main.) */
.spec-card {
  --pad-y: var(--section-y);          /* marge haut/bas, reprise par le numéro */
  position: relative;
  flex: 0 0 auto;
  width: var(--spec-card-w);
  min-height: 62vh;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: clamp(.6rem, 1.6vh, 1.1rem);
  padding: var(--pad-y) var(--gutter);
  overflow: hidden;
  isolation: isolate;
  background: var(--forest);          /* fond si la photo manque */
  color: var(--cream);
}

/* La photo occupe tout le panneau ; le texte est posé dessus. */
.spec-card__img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s cubic-bezier(.2, .6, .2, 1);
  will-change: transform;
}

/* Voile TEINTÉ : c'est lui qui porte désormais l'alternance sauge / sable.
   Deux teintes seulement, réparties de façon irrégulière (pas de cycle
   mécanique) — ici, sur 3 panneaux : sauge, sable, sable.
   Assez dense en bas pour que le texte clair reste lisible sur n'importe
   quelle photo. Pour changer la répartition, déplacez un numéro ci-dessous. */
.spec-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
              rgba(58, 47, 32, .28) 0%,
              rgba(45, 37, 26, .60) 45%,
              rgba(28, 23, 16, .95) 100%);          /* sable (défaut) */
  transition: opacity .6s ease;
}
.spec-card:nth-of-type(1)::after,
.spec-card:nth-of-type(4)::after,
.spec-card:nth-of-type(6)::after {                   /* sauge */
  background: linear-gradient(180deg,
              rgba(32, 46, 30, .28) 0%,
              rgba(26, 40, 24, .60) 45%,
              rgba(15, 26, 15, .95) 100%);
}

/* Survol : la photo respire, le voile s'allège légèrement. */
.spec-card:hover .spec-card__img { transform: scale(1.05); }
.spec-card:hover::after { opacity: .88; }

/* Filet de séparation : plusieurs panneaux étant visibles en même temps, deux
   voisins de même teinte se fondraient sinon en un seul bloc. */
.spec-card + .spec-card { box-shadow: inset 1px 0 0 rgba(247, 243, 234, .14); }

.spec-card__body { position: relative; display: grid; gap: clamp(.4rem, 1.2vh, .8rem); }

/* Numéro auto 01, 02, 03… */
.spec-card::before {
  counter-increment: spec;
  content: counter(spec, decimal-leading-zero);
  position: absolute; top: var(--pad-y); left: var(--gutter);
  font-family: var(--font-title);
  font-size: clamp(.85rem, 1.1vw, 1rem);
  color: rgba(247, 243, 234, .72);
  letter-spacing: .08em;
}
.spec-card__label {
  margin: 0;
  font-size: var(--fs-small); letter-spacing: .18em; text-transform: uppercase;
  color: rgba(242, 236, 224, .78);
  text-shadow: 0 1px 12px rgba(12, 20, 10, .5);
}
.spec-card__value {
  margin: 0;
  max-width: 15ch;
  font-family: var(--font-title); font-weight: 500;
  font-size: clamp(1.8rem, 5vw, 4.2rem); line-height: 1.05; letter-spacing: -.015em;
  color: var(--cream);
  text-shadow: 0 2px 24px rgba(12, 20, 10, .55);
}

@media (prefers-reduced-motion: reduce) {
  .spec-card__img { transition: none; }
  .spec-card:hover .spec-card__img { transform: none; }
}

/* En mode épinglé, chaque panneau occupe la hauteur entière de l'écran.
   Le texte étant aligné en bas, on garde une marge verticale : sans elle il
   viendrait coller au bord de l'écran. */
.section--specs.is-pinned .spec-card,
.section--specs.is-pinned .specs-intro { height: 100vh; min-height: 0; }
.section--specs.is-pinned .spec-card { --pad-y: clamp(2.5rem, 9vh, 6rem); }
.section--specs.is-pinned .specs-intro { padding-block: 0; }

/* En portrait, la section est épinglée : un panneau à 86 vw laissait le texte
   du suivant coupé net par le bord de l'écran. Un panneau = un écran entier,
   ce qui donne une lecture nette, une caractéristique à la fois. */
@media (max-width: 640px) {
  .section--specs { --spec-card-w: 100vw; }
}

/* --- Coloris --- */
.swatches {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--sp-5);
  align-items: center;
  margin: var(--sp-5) 0 var(--sp-6);
}
/* Scène : flèche ← | gourde | flèche → */
.swatches__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.5rem, 2vw, 1.25rem);
}
.swatch-arrow {
  flex: 0 0 auto;
  width: clamp(40px, 5vh, 52px); height: clamp(40px, 5vh, 52px);
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #FFFDF8;
  color: var(--forest);
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease, transform .3s ease, border-color .3s ease;
}
.swatch-arrow:hover { background: var(--forest); color: var(--cream); border-color: var(--forest); transform: scale(1.06); }
.swatch-arrow:active { transform: scale(.96); }
.swatch-arrow svg { width: 44%; height: 44%; }

/* Aperçu : la gourde flotte sur un halo teinté par l'accent (pas de rectangle) */
.swatches__preview {
  position: relative;
  flex: 1 1 auto;
  height: 360px;
  display: grid;
  place-items: center;
}
.swatches__glow {
  position: absolute;
  width: 78%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent) 0%, transparent 68%);
  opacity: .5;
  filter: blur(6px);
  transition: background .5s ease;
}
.swatches__bottle {
  position: absolute;
  height: 100%; width: auto;
  object-fit: contain;
  opacity: 0;
  filter: drop-shadow(0 24px 30px rgba(12, 20, 10, .35));
  transition: opacity .7s cubic-bezier(.55, 0, .35, 1), transform .7s cubic-bezier(.55, 0, .35, 1);
  will-change: opacity, transform;
}
.swatches__bottle.is-active { opacity: 1; }
.swatches__list { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.swatch {
  width: 44px; height: 44px; padding: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  outline-offset: 3px;
  background: var(--swatch);
  box-shadow: inset 0 0 0 1px rgba(35, 48, 31, .18);
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}
.swatch:hover { transform: scale(1.08); }
.swatch.is-active { box-shadow: 0 0 0 2px var(--cream), 0 0 0 4px var(--forest); }
.swatches__name { margin-bottom: .25rem; }
.swatches__note { color: var(--ink-soft); font-size: var(--fs-small); margin: 0; }

/* --- Avis --- */
.reviews__title { font-size: var(--fs-h2); margin-bottom: var(--sp-4); }

/* --- Marquee : défilement horizontal infini des avis --- */
.reviews-marquee {
  /* Pleine largeur (sort de la .wrap centrée) */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  /* Fondu des bords gauche/droite */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.reviews-track {
  display: flex;
  width: max-content;
  padding: var(--sp-2) 0;
  /* La piste contient 2× (ou plus) le jeu d'avis → −50 % boucle sans couture.
     La durée est calculée en JS pour garder une VITESSE constante quel que
     soit le nombre de cartes (voir --marquee-dur dans js/main.js). */
  animation: reviews-scroll var(--marquee-dur, 20s) linear infinite;
  will-change: transform;
}
/* L'espacement est porté par CHAQUE carte (et non par `gap`) : `gap` ne
   s'applique pas après la dernière, les deux moitiés de piste n'étaient donc
   pas identiques et la boucle sautait d'un demi-écart à chaque tour — d'où les
   cartes qui semblaient coupées. */
.reviews-track > .review { margin-right: var(--sp-3); }
/* Le défilement ne s'arrête PAS au survol de la souris.
   Il ne se met en pause que si un élément reçoit le focus clavier (sinon on ne
   pourrait pas lire/atteindre un avis en tabulant) — et il est désactivé
   entièrement par « réduire les animations ». */
.reviews-marquee:focus-within .reviews-track { animation-play-state: paused; }

@keyframes reviews-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.review {
  flex: 0 0 auto;
  width: min(340px, 78vw);
  background: #FFFDF8;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-3);
}
.stars { color: var(--accent); letter-spacing: .12em; margin-bottom: .5rem; filter: saturate(1.3) brightness(.9); }
.review blockquote { margin: 0 0 var(--sp-2); }
.review blockquote p { margin: 0; font-size: 1.02rem; }
.review__author { margin: 0; font-size: var(--fs-small); color: var(--ink-soft); }
.review__author span { opacity: .75; }

/* --- Achat --- */
.buy {
  display: grid;
  grid-template-columns: 1fr minmax(300px, 380px);
  gap: var(--sp-5);
  align-items: center;
}
.buy__list { margin-top: var(--sp-3); display: grid; gap: .55rem; }
.buy__list li { padding-left: 1.6rem; position: relative; color: rgba(242, 236, 224, .85); font-size: .975rem; }
.buy__list li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
}
.buy__card {
  background: var(--cream);
  color: var(--ink);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  box-shadow: var(--shadow);
}
.buy__price { display: flex; align-items: baseline; gap: .75rem; margin-bottom: .25rem; }
.buy__amount { font-family: var(--font-title); font-size: clamp(2.4rem, 4vw, 3.2rem); line-height: 1; }
.buy__old { color: var(--ink-soft); text-decoration: line-through; }
.buy__meta { color: var(--ink-soft); font-size: var(--fs-small); margin-bottom: var(--sp-3); }

/* --- FAQ (accordéon) --- */
.faq { margin-top: var(--sp-4); border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item h3 { margin: 0; font-family: var(--font-body); }
.faq__q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: 1.25rem 0;
  border: 0; background: none;
  font: inherit; font-size: 1.05rem; font-weight: 500; text-align: left;
  color: var(--ink);
  cursor: pointer;
}
.faq__q:hover { color: var(--ink-soft); }
.faq__sign { position: relative; flex: 0 0 auto; width: 16px; height: 16px; }
.faq__sign::before, .faq__sign::after {
  content: ""; position: absolute; inset: 50% 0 auto 0;
  height: 1.5px; background: currentColor; border-radius: 2px;
  transition: transform .35s ease;
}
.faq__sign::after { transform: rotate(90deg); }
.faq__q[aria-expanded="true"] .faq__sign::after { transform: rotate(0deg); }

/* Animation d'ouverture sans propriété coûteuse (grid-template-rows) */
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s ease;
}
.faq__a > div { overflow: hidden; }
.faq__a > div > p { margin: 0 0 1.35rem; color: var(--ink-soft); max-width: 62ch; }
.faq__a.is-open { grid-template-rows: 1fr; }

/* --- Footer --- */
.footer { background: #2C3A2C; color: rgba(242, 236, 224, .82); padding-block: var(--sp-5) var(--sp-3); }
.footer__grid { display: grid; gap: var(--sp-4); grid-template-columns: 1.4fr repeat(3, 1fr); }
.footer__logo { font-family: var(--font-title); font-size: 1.5rem; color: var(--cream); margin-bottom: .4rem; }
.footer__brand p:last-child { max-width: 30ch; font-size: .95rem; }
.footer__head { font-family: var(--font-body); font-size: var(--fs-small); letter-spacing: .16em; text-transform: uppercase; color: var(--cream); margin-bottom: var(--sp-2); }
.footer__list { display: grid; gap: .5rem; font-size: .95rem; }
.footer__list a { text-decoration: none; }
.footer__list a:hover { color: var(--accent); text-decoration: underline; }
.footer__bottom {
  max-width: var(--maxw); margin: var(--sp-4) auto 0; padding: var(--sp-3) var(--gutter) 0;
  border-top: 1px solid rgba(242, 236, 224, .14);
  font-size: .8rem;
  display: flex; flex-wrap: wrap; gap: .4rem var(--sp-3);
  align-items: baseline; justify-content: space-between;
}
.footer__bottom p { margin: 0; opacity: .7; }
.footer__credit a {
  color: inherit; opacity: 1;
  border-bottom: 1px solid rgba(242, 236, 224, .35);
  padding-bottom: 1px; transition: border-color .25s, opacity .25s;
}
.footer__credit a:hover, .footer__credit a:focus-visible { border-bottom-color: currentColor; }

/* ============================ 7. RESPONSIVE ============================ */
@media (max-width: 1024px) {
  .buy { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

/* --- Hero ---
   Les positions/tailles du hero viennent de la spec de mouvement et sont
   exprimées en % du hero : elles s'appliquent donc à TOUTES les tailles
   d'écran, sans point de rupture. Seules les tailles de police sont
   ajustées ici pour que les textes tiennent dans les largeurs imposées. */
/* ==================== HERO EN PORTRAIT (≤ 640 px) =======================
   La maquette est calée sur un cadre PAYSAGE (2657 × 1367, ratio 1.94).
   Transposées telles quelles en portrait, ses valeurs cassent trois choses :
     • le fond, haut de 379 %, donne un conteneur au ratio 0.15 → `cover`
       zoomait l'image ~3.8× ;
     • la boîte de la gourde (35 % × 92 %) ne respecte plus le ratio du PNG,
       et `object-fit: fill` l'écrasait à 62 % de sa largeur ;
     • les blocs de texte, placés en % de largeur, se tassent et le CTA se
       retrouve décentré.
   Le portrait a donc son propre jeu de règles. Le JS suit automatiquement :
   le pan du fond est calculé en fraction de la course réelle, et la taille de
   la gourde est mesurée (voir bgPan / bottleW dans js/main.js). */
@media (max-width: 640px) {
  /* Fond : hauteur réduite → plus de zoom excessif, et il reste de la course
     pour le mouvement de remontée. */
  .hero__bg { left: 0; width: 100%; height: 190%; }

  /* Gourde : la boîte adopte le ratio réel du PNG (900 × 1205) et l'image
     n'est plus étirée. */
  /* 54 % : inclinée de 16°, son encombrement horizontal atteint ~105 % de la
     largeur de l'écran — au-delà elle serait franchement coupée. */
  .hero__bottle { width: auto; height: 54%; aspect-ratio: 900 / 1205; }
  .hero__bottle img { object-fit: contain; }

  /* Barre du haut : le 87.37 % de la maquette ne laisse que 50 px au bouton,
     qui se retrouvait coupé par le bord. On l'ancre à droite. */
  .hero__topcta { left: auto; right: var(--gutter); }
  /* Le burger était à 2.45 % (9.6 px sur un écran de 390) alors que le bouton
     est à --gutter (20 px) : les deux coins n'étaient pas symétriques. */
  /* Même repère vertical que le bouton, décalé d'une demi-hauteur pour que
     les deux centres coïncident (le bouton est plus haut que les traits). */
  .menu-btn { left: var(--gutter); top: calc(4.79% + .5rem); }

  /* Textes : pleine largeur, centrés (le JS met alors x = 0). */
  .hero__titleA, .hero__subtitle, .hero__titleB, .hero__para {
    width: 100%;
    padding-inline: var(--gutter);
    text-align: center;
  }
  /* Le CTA reste une pilule à la taille de son texte : il est centré par le JS
     (x = (largeur hero − largeur pilule) / 2), car lui donner width:100%
     étirerait son fond et sa bordure sur toute la largeur. */

  .hero__titleA   { font-size: clamp(1.5rem, 8.5vw, 2.6rem); line-height: 1.1; }
  .hero__subtitle { font-size: clamp(.85rem, 3.9vw, 1.05rem); line-height: 1.45; }
  .hero__titleB   { font-size: clamp(1.35rem, 7.4vw, 2.3rem); line-height: 1.15; }
  .hero__para     { font-size: clamp(.82rem, 3.6vw, 1rem); line-height: 1.5; }
}

@media (max-width: 760px) {
  /* La pilule fait 8.92 % × 5.63 % du cadre Figma : en portrait ça donne un
     cercle plus haut que large. On la laisse prendre la taille de son texte. */
  .pill {
    width: auto; height: auto;
    padding: .55rem .95rem;
    font-size: clamp(.62rem, 3vw, .8rem);
    border-width: 1px;
  }

  .swatches { grid-template-columns: 1fr; }
  .swatches__stage { width: 100%; }
  .swatches__preview { height: 300px; }
  .footer__grid { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .hero__para { font-size: .8rem; line-height: 1.45; }
}

/* ==================== 8. FALLBACKS (état final direct) ================= */
/*
   Cas couverts :
   - l'utilisateur a demandé « réduire les animations » ;
   - JS désactivé (.no-js) ;
   - GSAP n'a pas pu être chargé (.no-gsap, ajoutée par main.js).
   Dans tous ces cas : le hero n'est plus fixé, il occupe simplement 100vh
   avec son état final, et la page défile normalement.
*/
.no-js .hero,
.no-gsap .hero,
.is-static .hero {
  position: relative;
  height: 100vh;
  height: 100dvh;
}
.no-js .hero-space,
.no-gsap .hero-space,
.is-static .hero-space { display: none; }

.no-js .site,
.no-gsap .site,
.is-static .site { box-shadow: none; }

/* État final = ÉTAPE 4, posé en left/top (% du hero, donc exact) plutôt
   qu'en transform, puisque GSAP ne tourne pas dans ces cas-là.
   La gourde garde son miroir : scaleX(-1) depuis l'origine 0 0 place sa
   boîte visible en [38.88 − 35.30 ; 38.88] %, soit 3.58 % → 38.88 %. */
.no-js .hero__bg,
.no-gsap .hero__bg,
.is-static .hero__bg { top: -177.87%; transform: none; }

.no-js .hero__bg-veil,
.no-gsap .hero__bg-veil,
.is-static .hero__bg-veil { opacity: 0; }

.no-js .hero__bottle,
.no-gsap .hero__bottle,
.is-static .hero__bottle { left: 38.88%; top: 15.72%; transform: scaleX(-1); opacity: 1; }

/* Étape 4 : titre A, sous-titre et CTA sont à opacité 0 */
.no-js .hero__titleA,   .no-gsap .hero__titleA,   .is-static .hero__titleA,
.no-js .hero__subtitle, .no-gsap .hero__subtitle, .is-static .hero__subtitle,
.no-js .hero__cta,      .no-gsap .hero__cta,      .is-static .hero__cta { display: none; }

.no-js .hero__titleB,
.no-gsap .hero__titleB,
.is-static .hero__titleB { left: 51.6%; top: 22.4%; transform: none; opacity: 1; visibility: visible; }

.no-js .hero__para,
.no-gsap .hero__para,
.is-static .hero__para { left: 62.5%; top: 45.7%; transform: none; opacity: 1; visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .hero { position: relative; height: 100vh; height: 100dvh; }
  .hero-space { display: none; }
  .site { box-shadow: none; }

  .hero__bg      { top: -177.87%; transform: none; }
  .hero__bg-veil { opacity: 0; }
  .hero__bottle  { left: 38.88%; top: 15.72%; transform: scaleX(-1); opacity: 1; }
  .hero__titleA, .hero__subtitle, .hero__cta { display: none; }
  .hero__titleB { left: 51.6%; top: 22.4%; transform: none; opacity: 1; visibility: visible; }
  .hero__para   { left: 62.5%; top: 45.7%; transform: none; opacity: 1; visibility: visible; }

  /* Avis : pas de défilement auto → liste horizontale scrollable à la main. */
  .reviews-track { animation: none; transform: none; }
  .reviews-marquee {
    overflow-x: auto;
    -webkit-mask-image: none; mask-image: none;
  }
}