/* Ajustements multi-pages — additionnels. Ne modifient pas style.css. */
/* Ancres non masquées par l'en-tête fixe */
section[id]{ scroll-margin-top:88px; }
/* Lien de navigation actif (réutilise la teinte or existante) */
.nav-links a[aria-current="page"],
.overlay a[aria-current="page"]{ color:var(--or-clair); }
/* Crédits regroupés et centrés en bas de page */
.foot-bottom{ justify-content:center; text-align:center; gap:.35rem 1.4rem; }

/* Bandeau d'accès rapides (sous le hero, page d'accueil) — inspiré des tuiles Dog Point */
.parcours{ display:grid; grid-template-columns:repeat(4,1fr); }
.parcours > a{ position:relative; display:block; height:clamp(300px,34vw,460px); overflow:hidden; }
.parcours img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .9s cubic-bezier(.22,1,.36,1); }
.parcours > a:hover img,
.parcours > a:focus-visible img{ transform:scale(1.06); }
.parcours .veil{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,17,13,.35),rgba(20,17,13,.62)); transition:background .5s ease; }
.parcours > a:hover .veil,
.parcours > a:focus-visible .veil{ background:linear-gradient(180deg,rgba(20,17,13,.15),rgba(20,17,13,.45)); }
.parcours .p-label{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.7rem;
  font-family:'Cormorant Garamond',serif; font-weight:500; font-size:clamp(1.4rem,2.2vw,2rem); letter-spacing:.2em; text-transform:uppercase;
  color:var(--blanc,#FBF8F1); text-shadow:0 2px 20px rgba(0,0,0,.45); }
.parcours .p-ln{ width:34px; height:1px; background:var(--or,#C2A35C); transition:width .5s cubic-bezier(.22,1,.36,1); }
.parcours > a:hover .p-ln,
.parcours > a:focus-visible .p-ln{ width:66px; }
.parcours > a:focus-visible{ outline:2px solid var(--or-clair,#DCC183); outline-offset:-4px; }
@media(max-width:980px){ .parcours{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .parcours{ grid-template-columns:1fr; } .parcours > a{ height:52vw; min-height:220px; } }

/* Sélecteur de langue (en-tête) */
.lang{ display:inline-flex; align-items:center; gap:.45rem; margin-right:.9rem; }
.lang-btn{ display:inline-flex; width:26px; height:17px; border-radius:2px; overflow:hidden; opacity:.5; transition:opacity .3s ease; box-shadow:0 0 0 1px rgba(255,255,255,.18); }
.lang-btn svg{ width:100%; height:100%; display:block; }
.lang-btn:hover{ opacity:1; }
.lang-btn.is-active{ opacity:1; box-shadow:0 0 0 1px var(--or,#C2A35C); }
.lang-btn[aria-disabled="true"]{ opacity:.4; cursor:default; }
.lang-btn[aria-disabled="true"]:hover{ opacity:.6; }

/* Bouton « Télécharger au format .pdf » dans la fiche cuvée */
#m-pdf{ margin-top:1.5rem; }
#m-pdf[aria-disabled="true"]{ opacity:.5; cursor:default; pointer-events:none; }

/* ===== Carrousel 3D des cuvées (page Nos cuvées) ===== */
/* ============================================================
   GRILLE DES CUVÉES — parcours vertical simple, carte cliquable
   ============================================================ */
.cuv-grid{ display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.2vw,28px); max-width:1180px; margin:0 auto; }
.cuv-card{ position:relative; display:grid; grid-template-rows:minmax(0,1fr) auto;
  border-radius:18px; overflow:hidden; cursor:pointer; text-align:left;
  background:linear-gradient(180deg,var(--blanc,#FBF8F1),var(--creme,#F3EADA));
  border:1px solid rgba(154,123,48,.26);
  box-shadow:0 24px 48px -26px rgba(0,0,0,.6);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s;
  outline:none; }
.cuv-card:hover, .cuv-card:focus-visible{ transform:translateY(-5px);
  border-color:rgba(194,163,92,.6);
  box-shadow:0 34px 66px -26px rgba(0,0,0,.7), 0 0 0 1px rgba(194,163,92,.4); }
.cuv-card:focus-visible{ outline:2px solid var(--or,#C2A35C); outline-offset:3px; }

.cuv-media{ position:relative; aspect-ratio:4/5; overflow:hidden;
  background:linear-gradient(165deg,#211a12,#14100b); }
.cuv-media img{ position:absolute; inset:6% 0 4%; width:100%; height:90%;
  object-fit:contain; filter:drop-shadow(0 16px 22px rgba(0,0,0,.5));
  transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.cuv-card:hover .cuv-media img{ transform:scale(1.04); }
.cuv-card.is-epuise .cuv-media img{ filter:drop-shadow(0 14px 20px rgba(0,0,0,.5)) grayscale(.3) opacity(.85); }

.cuv-tag{ position:absolute; top:12px; left:12px; z-index:2; font-family:'Jost',sans-serif;
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--or-clair,#DCC183);
  background:rgba(20,16,11,.6); border:1px solid rgba(194,163,92,.4); border-radius:999px; padding:4px 11px; }
.cuv-stamp{ position:absolute; top:12px; right:12px; z-index:3; font-family:'Jost',sans-serif;
  font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:#e7d6bf;
  background:rgba(20,16,11,.72); border:1px solid rgba(231,214,191,.5); border-radius:999px; padding:4px 10px; }
.cuv-stamp.cuv-soon{ color:var(--or-clair,#DCC183); border-color:rgba(220,193,131,.6); }
.cuv-award{ position:absolute; bottom:12px; left:12px; right:12px; z-index:3; text-align:center;
  font-family:'Jost',sans-serif; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--or-clair,#DCC183); background:rgba(20,16,11,.55); border:1px solid rgba(194,163,92,.4);
  border-radius:8px; padding:5px 8px; }

.cuv-body{ padding:18px 20px 20px; display:flex; flex-direction:column; color:var(--txt-sombre,#2a241b); }
.cuv-name{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:26px; line-height:1.08;
  margin:0; color:var(--txt-sombre,#2a241b); }
.cuv-sub{ font-family:'Jost',sans-serif; font-size:12.5px; line-height:1.5; color:var(--txt-sombre-dim,#6a6152); margin:7px 0 0; }
.cuv-dosage{ font-family:'Jost',sans-serif; font-size:12.5px; color:var(--txt-sombre-dim,#6a6152); margin:3px 0 0; }
.cuv-cta{ display:inline-flex; align-items:center; gap:8px; margin-top:16px; padding-top:14px;
  border-top:1px solid rgba(154,123,48,.25); font-family:'Jost',sans-serif; font-size:11.5px;
  font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--or-fonce,#9a7b30);
  transition:color .25s,gap .25s; }
.cuv-cta svg{ width:16px; height:16px; transition:transform .3s; }
.cuv-card:hover .cuv-cta{ color:var(--or,#C2A35C); gap:11px; }
.cuv-card:hover .cuv-cta svg{ transform:translateX(3px); }

@media(max-width:860px){ .cuv-grid{ grid-template-columns:repeat(2,1fr); gap:16px; } }
@media(max-width:540px){ .cuv-grid{ grid-template-columns:1fr; max-width:400px; } .cuv-name{ font-size:24px; } }
@media(prefers-reduced-motion:reduce){ .cuv-card,.cuv-media img,.cuv-cta,.cuv-cta svg{ transition:none !important; } }

/* ===== Hero — parallaxe à deux plans + relief 3D à la souris (page d'accueil) =====
   Au scroll  : .hp-sky (0.72) et .hp-front (-0.05) — voir index.html.
   À la souris : main.js pose --mx / --my (de -1 à 1) sur .hero, et chaque plan
                 s'en sert avec une amplitude différente : c'est l'écart entre les deux
                 qui donne le relief. Tout se règle ci-dessous, sans toucher au JS. */
.hp{ position:absolute; pointer-events:none; }
.hp img{ display:block; }
.hp-in{ position:absolute; inset:0; will-change:transform; }

/* — plan lointain : le ciel — */
.hp-sky{ left:0; right:0; top:-11%; height:124%; z-index:0; will-change:transform; }
.hp-sky .hp-in{ transform:scale(1.025) translate3d(calc(var(--mx,0) * 7px),calc(var(--my,0) * 4px),0); }
.hp-sky img{ width:100%; height:100%; object-fit:cover; object-position:center 62%;
  animation:hpSkyIn 2.6s cubic-bezier(.22,1,.36,1) both; }

/* — voile sur le ciel : lisibilité de l'en-tête, unification des tons — */
.hp-tint{ inset:0; z-index:0;
  background:linear-gradient(180deg,rgba(20,17,13,.40) 0%,rgba(20,17,13,.08) 26%,rgba(28,24,18,.02) 50%,rgba(20,17,13,.12) 100%); }

/* — premier plan : le sujet, d'un bord à l'autre —
   width:100% + height:auto = l'image occupe toute la largeur, sans recadrage latéral.
   bottom:-7% = réserve de débattement en bas, pour que la parallaxe ne découvre jamais de liseré.
   Le scale(1.04) est la marge qui absorbe le déplacement et la rotation à la souris. */
.hp-front{ inset:0; z-index:1; perspective:1400px; will-change:transform; }
.hp-front .hp-in{ transform:scale(1.04)
  translate3d(calc(var(--mx,0) * -16px),calc(var(--my,0) * -9px),0)
  rotateY(calc(var(--mx,0) * -0.8deg)) rotateX(calc(var(--my,0) * 0.6deg)); }
.hp-front img{ position:absolute; left:50%; bottom:-7%; width:100%; height:auto; max-width:none;
  filter:drop-shadow(0 26px 54px rgba(12,10,7,.42));
  transform:translateX(-50%); animation:hpFrontIn 1.7s cubic-bezier(.22,1,.36,1) .1s both; }

/* — halo chaud qui suit le curseur : la lumière semble venir de la souris — */
.hp-glow{ inset:0; z-index:2; opacity:0; transition:opacity .7s ease; mix-blend-mode:soft-light;
  background:radial-gradient(46% 52% at var(--px,50%) var(--py,45%),rgba(255,240,208,.20),transparent 70%); }
.hero.is-hovered .hp-glow{ opacity:1; }

/* — assombrissement au-dessus de la scène : le texte du hero se détache —
   Deux dégradés superposés : un latéral (côté gauche, là où se trouve le texte)
   et un vertical (bas de l'image). Baissez ou montez les valeurs d'opacité
   (le dernier nombre de chaque rgba) pour doser. */
.hp-shade{ inset:0; z-index:2;
  background:
    linear-gradient(96deg,rgba(20,17,13,.48) 0%,rgba(20,17,13,.24) 30%,rgba(20,17,13,.05) 52%,rgba(20,17,13,0) 68%),
    linear-gradient(180deg,rgba(20,17,13,.06) 0%,rgba(20,17,13,0) 18%,rgba(20,17,13,.24) 52%,rgba(20,17,13,.66) 80%,rgba(20,17,13,.88) 100%); }

@keyframes hpSkyIn{ from{ transform:scale(1.07); opacity:0 } to{ transform:scale(1); opacity:1 } }
@keyframes hpFrontIn{ from{ transform:translateX(-50%) translateY(34px); opacity:0 }
                        to{ transform:translateX(-50%) translateY(0); opacity:1 } }

/* Écrans étroits : on déborde un peu pour que le sujet reste à bonne taille */
@media(max-width:1100px){ .hp-front img{ width:118%; } }
@media(max-width:820px){
  .hp-front img{ width:142%; filter:drop-shadow(0 16px 32px rgba(12,10,7,.4)); }
  .hp-shade{ background:
    linear-gradient(180deg,rgba(20,17,13,.34) 0%,rgba(20,17,13,.30) 22%,rgba(20,17,13,.48) 48%,rgba(20,17,13,.80) 78%,rgba(20,17,13,.95) 100%); }
}
@media(prefers-reduced-motion:reduce){
  .hp-sky img,.hp-front img{ animation:none; }
  .hp-sky .hp-in,.hp-front .hp-in{ transform:none; }
  .hp-glow{ display:none; }
}

/* ===== Harmonisation des textes (v18) =====
   Chapeau (.lead) et paragraphe courant rapprochés en taille, interlignes resserrés,
   un vrai espace entre les deux, et une graisse un peu plus soutenue sur fond crème. */
.lead{ font-size:clamp(1.1rem,1.3vw,1.24rem); line-height:1.6; }
.lead + p{ margin-top:1.15rem; }
.split .lead + p, .sf-head .lead + p{ font-size:1.06rem; line-height:1.72; }
.split .lead, .split .lead + p{ max-width:60ch; }
.light p, .light .lead{ font-weight:400; }
.light .lead{ color:var(--txt-sombre,#2a241b); }
h2 + .lead{ margin-top:1.1rem; }
.facts .k{ line-height:1.2; }
.facts .t{ line-height:1.65; }

/* Back-office : les repères éditables du titre hero (data-cms) sont des <span>
   imbriqués dans .l ; sans cela ils héritent du display:block de l'animation
   de ligne et « Rousseaux. » passe à la ligne. On les remet en ligne. */
.hero h1 .l span span{ display:inline; transform:none; animation:none; }

/* Affichage par langue : blocs réservés à une langue (page Mentions légales, etc.) */
[data-lang="fr"] [data-only="en"],
[data-lang="en"] [data-only="fr"]{ display:none !important; }

/* Drapeaux de langue sur l'écran de bienvenue (age-gate) */
.agegate-lang{ display:flex; justify-content:center; gap:.7rem; margin:0 0 1.4rem; }
.agegate-lang .lang-btn{ width:30px; height:20px; }

/* Crédit « Fait par Studio Krêm » (pied de page) */
.foot-bottom .credit-link{ color:var(--or-clair,#DCC183); text-decoration:none; transition:color .3s; }
.foot-bottom .credit-link:hover{ color:var(--or,#C2A35C); text-decoration:underline; text-underline-offset:2px; }