/* ===== 01-reglages.css ===== */
/* =============================================================================
   Réglages : polices et variables de design (version 2)

   Direction « Art déco de cave » :
   - Poiret One pour les titres : sa géométrie reprend le lettrage du logo ;
   - Lora pour le texte (comme sur les fiches techniques), Poppins pour les
     petits éléments d'interface (menu, boutons, formulaires) ;
   - couleurs tirées du logo (encre, bordeaux) et du terroir : granite rose
     de Fleurie et Chiroubles pour le fond clair, schiste du Morgon pour les
     sections sombres, or des levers de soleil et du whisky MADDAM.
   ========================================================================== */

@font-face {
  font-family: "Poiret One";
  src: url("/assets/fonts/poiret-one-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("/assets/fonts/lora-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("/assets/fonts/lora-latin-wght-italic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/poppins-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/poppins-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

/* Propriété animable pour l'apparition des images à travers les lignes du logo */
@property --rideau {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

:root {
  /* Couleurs */
  --encre: #1a1919;            /* fond du logo */
  --encre-2: #242221;
  --schiste: #262b2f;          /* schiste du Morgon */
  --bordeaux: #921b22;         /* disque du monogramme */
  --bordeaux-fonce: #73141a;
  --bordeaux-vif: #b9303a;     /* filet rouge lisible sur photo */
  --granite: #ece6e0;          /* granite rose pâle : fond général */
  --granite-2: #e1d8d0;
  --blanc: #fbf9f7;
  --or: #c9a86a;               /* lever de soleil, whisky MADDAM */
  --vin-blanc: #d8bf7f;        /* crème doré des vins blancs (pastilles, disques) */
  --pierre: #a99d94;
  --texte: #262221;
  --texte-doux: #675d57;
  --texte-clair: #e9e2db;
  --ligne: rgba(26, 25, 25, 0.14);
  --ligne-claire: rgba(255, 255, 255, 0.14);

  /* Typographie */
  --police-deco: "Poiret One", "Lora", Georgia, serif;
  --police-texte: "Lora", Georgia, "Times New Roman", serif;
  --police-ui: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --taille-h1: clamp(2.7rem, 1.4rem + 5.4vw, 6.6rem);
  --taille-h2: clamp(2.2rem, 1.45rem + 2.8vw, 3.9rem);
  --taille-lead: clamp(1.3rem, 1.05rem + 0.95vw, 1.95rem);

  /* Mise en page */
  --gouttiere: clamp(16px, 4.5vw, 64px);
  --largeur: 1280px;
  --espace-section: clamp(5rem, 3.5rem + 6vw, 10rem);
  --hauteur-entete: 76px;
  --arche: 10000px 10000px 0 0;   /* rayon qui donne toujours un demi-cercle parfait */

  /* Mouvement */
  --doux: cubic-bezier(0.16, 1, 0.3, 1);
  --souple: cubic-bezier(0.65, 0, 0.35, 1);
}


/* ===== 02-base.css ===== */
/* =============================================================================
   Base : remise à zéro, typographie, boutons, liens, ornements du logo
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--hauteur-entete) + 1rem);
}

body {
  margin: 0;
  background: var(--granite);
  color: var(--texte);
  font-family: var(--police-texte);
  font-size: clamp(1.02rem, 0.98rem + 0.2vw, 1.12rem);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
address { font-style: normal; }
button, input, textarea, select { font: inherit; color: inherit; }
strong, b { font-weight: 600; }

h1, h2 {
  font-family: var(--police-deco);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0.005em;
  color: var(--encre);
  margin: 0 0 0.55em;
  text-wrap: balance;
  -webkit-text-stroke: 0.012em currentColor;     /* épaissit légèrement le trait fin de Poiret One */
}
h3, h4 {
  font-family: var(--police-texte);
  font-weight: 500;
  line-height: 1.25;
  color: var(--encre);
  margin: 0 0 0.6em;
  text-wrap: balance;
}
p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--bordeaux); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { color: var(--bordeaux-fonce); }

:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: 4px; }
.section--encre :focus-visible, .galerie :focus-visible, .entete :focus-visible, .pied :focus-visible,
.hero :focus-visible, .age :focus-visible, .bandeau :focus-visible { outline-color: var(--or); }

::selection { background: var(--bordeaux); color: #fff; }

/* Accessibilité ---------------------------------------------------------- */
.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.lien-evitement {
  position: fixed; top: 0.75rem; left: 0.75rem; z-index: 200;
  padding: 0.75rem 1.25rem; background: var(--blanc); color: var(--encre); font-family: var(--police-ui);
  transform: translateY(-200%); transition: transform 0.3s var(--doux);
}
.lien-evitement:focus { transform: none; }
main:focus { outline: none; }

/* Mise en page ----------------------------------------------------------- */
.conteneur { width: 100%; max-width: calc(var(--largeur) + 2 * var(--gouttiere)); margin-inline: auto; padding-inline: var(--gouttiere); }
.conteneur--moyen { max-width: calc(980px + 2 * var(--gouttiere)); }
.conteneur--etroit { max-width: calc(800px + 2 * var(--gouttiere)); }
.centre { text-align: center; }

.section { position: relative; padding-block: var(--espace-section); }
.section--granite { background: var(--granite-2); }
.section--encre { background: var(--encre); color: var(--texte-clair); overflow: hidden; isolation: isolate; }
.section--encre h2, .section--encre h3 { color: #fff; }
.section--encre a:not(.bouton) { color: var(--or); }
/* Grain très léger sur les fonds sombres, comme un papier d'étiquette */
.section--encre::before, .galerie::before, .pied::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* Textes ----------------------------------------------------------------- */
.surtitre { font-style: italic; font-size: 1.12rem; color: var(--bordeaux); margin-bottom: 1rem; }
.section--encre .surtitre { color: var(--or); }
.titre-section { font-size: var(--taille-h2); }
.sous-titre { font-size: 1.15rem; font-style: italic; color: var(--texte-doux); }
.section--encre .sous-titre, .galerie .sous-titre { color: var(--pierre); }
.titre-bloc {
  display: flex; align-items: center; gap: 1rem;
  font-family: var(--police-deco); font-weight: 400; font-size: 1.9rem; -webkit-text-stroke: 0.012em currentColor;
  margin: 0 0 1.25rem;
}
.titre-bloc::after { content: ""; flex: 1; height: 1px; background: var(--ligne); }
* + .titre-bloc { margin-top: 2.5rem; }

.entete-section { text-align: center; max-width: 820px; margin: 0 auto 4rem; }
.entete-section .lignes, .entete-section .rayures { margin-inline: auto; }

.citation { margin: 0 0 2rem; font-style: italic; font-size: var(--taille-lead); line-height: 1.5; color: var(--encre); }
.citation p::before { content: "“"; }
.citation p::after { content: "”"; }
:lang(fr) .citation p::before { content: "«\202F"; }
:lang(fr) .citation p::after { content: "\202F»"; }
.citation--grande { font-size: clamp(1.7rem, 1.2rem + 2.2vw, 3rem); line-height: 1.38; color: #fff; margin: 0; }
.citation--grande p::before, .citation--grande p::after { color: var(--or); }

mark.a-confirmer {
  background: #ffe68f; color: var(--encre); padding: 0.05em 0.35em; border-radius: 2px;
  font-weight: 600; box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* Ornements du logo ------------------------------------------------------ */
/* Petit motif : lignes verticales traversées par le filet rouge */
.lignes {
  display: block; width: 76px; height: 34px; margin-bottom: 1.8rem; color: var(--encre);
  background:
    linear-gradient(var(--bordeaux), var(--bordeaux)) center / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 8px) center / 57px 100% no-repeat;
  opacity: 0.75;
}
.section--encre .lignes, .lignes--or { color: var(--or); }
.lignes--or { background:
    linear-gradient(var(--or), var(--or)) center / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 8px) center / 57px 100% no-repeat; }
.centre .lignes { margin-inline: auto; }

/* Faisceau de lignes verticales (comme au-dessus et sous le monogramme) */
.rayures { display: flex; justify-content: center; gap: 7px; height: 56px; margin: 0 auto 1.8rem; }
.rayures i { display: block; width: 1px; height: 100%; background: currentColor; opacity: 0.55; transform-origin: top; }
.rayures--fond {
  position: absolute; inset: 0; z-index: -1; height: auto; margin: 0; gap: clamp(14px, 2.2vw, 34px);
  color: #fff; pointer-events: none;
  -webkit-mask-image: linear-gradient(transparent, #000 25%, #000 75%, transparent);
          mask-image: linear-gradient(transparent, #000 25%, #000 75%, transparent);
}
.rayures--fond i { opacity: 0.045; }
.rayures--or { color: var(--or); }
.rayures--or i { opacity: 0.09; }

/* Pastille : le disque du monogramme, teinté comme le vin */
.pastille {
  display: inline-block; width: 0.62em; height: 0.62em; margin-right: 0.5em; border-radius: 50%;
  vertical-align: 0.02em; background: var(--bordeaux); flex: none;
}
.pastille--blanc { background: var(--vin-blanc); }
.pastille--rose { background: #d99aa0; }

/* Boutons : un aplat glisse depuis la gauche au survol -------------------- */
.boutons { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.25rem; }
.boutons--centre { justify-content: center; }

.bouton {
  position: relative; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; isolation: isolate;
  min-height: 3.25rem; padding: 0.85rem 2rem;
  font-family: var(--police-ui); font-weight: 500; font-size: 0.92rem; line-height: 1.3; letter-spacing: 0.01em;
  text-decoration: none; text-align: center;
  border: 1px solid transparent; border-radius: 999px; cursor: pointer;
  transition: color 0.5s var(--doux), border-color 0.5s var(--doux);
}
.bouton::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  transform: translateX(-101%); transition: transform 0.6s var(--doux);
}
.bouton:hover::before, .bouton:focus-visible::before { transform: none; }
.bouton small { font-size: 0.78rem; font-weight: 400; opacity: 0.75; margin-left: 0.35em; }
.bouton--plein { background: var(--bordeaux); border-color: var(--bordeaux); color: #fff; }
.bouton--plein::before { background: var(--encre); }
.bouton--plein:hover { color: #fff; border-color: var(--encre); }
.section--encre .bouton--plein::before, .galerie .bouton--plein::before, .hero .bouton--plein::before,
.age .bouton--plein::before, .bandeau .bouton--plein::before { background: var(--bordeaux-fonce); }
.section--encre .bouton--plein:hover, .galerie .bouton--plein:hover, .hero .bouton--plein:hover,
.age .bouton--plein:hover, .bandeau .bouton--plein:hover { border-color: var(--bordeaux-fonce); }
.bouton--clair { background: transparent; border-color: rgba(255, 255, 255, 0.6); color: #fff; }
.bouton--clair::before { background: #fff; }
.bouton--clair:hover { color: var(--encre); border-color: #fff; }
.bouton--contour { background: transparent; border-color: var(--encre); color: var(--encre); }
.bouton--contour::before { background: var(--encre); }
.bouton--contour:hover { color: #fff; }
.bouton--pdf > span::before {
  content: ""; display: inline-block; width: 0.85em; height: 1.05em; margin-right: 0.6em; vertical-align: -0.12em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 22'%3E%3Cpath d='M2 0h9l7 7v13a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm8 1.5V8h6.5M5 13h8M5 16.5h8' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 22'%3E%3Cpath d='M2 0h9l7 7v13a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm8 1.5V8h6.5M5 13h8M5 16.5h8' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Lien secondaire : précédé du filet rouge du logo, qui s'allonge au survol */
.lien-filet {
  display: inline-flex; align-items: center; gap: 0.9rem; margin-top: 1.4rem;
  font-family: var(--police-ui); font-weight: 500; font-size: 0.92rem; text-decoration: none; color: var(--encre);
}
.lien-filet::before { content: ""; width: 2.2rem; height: 1px; background: var(--bordeaux); transition: width 0.5s var(--doux); }
.lien-filet:hover { color: var(--bordeaux); }
.lien-filet:hover::before { width: 3.6rem; }
.section--encre .lien-filet, .pied .lien-filet { color: var(--texte-clair); }
.section--encre .lien-filet::before, .pied .lien-filet::before { background: var(--or); }
.section--encre .lien-filet:hover, .pied .lien-filet:hover { color: var(--or); }

.lien-bouton {
  padding: 0; border: 0; background: none; cursor: pointer;
  text-decoration: underline; text-underline-offset: 0.22em; text-decoration-thickness: 1px;
}

.badge {
  display: inline-block; margin-top: 0.7rem; padding: 0.15rem 0.8rem;
  border: 1px solid currentColor; border-radius: 999px; color: var(--bordeaux);
  font-family: var(--police-ui); font-size: 0.76rem; font-weight: 500; line-height: 1.7;
}

/* Cadres photo : rectangle ou arche (voûte de cave, fenêtre de chapelle) -- */
.cadre { position: relative; overflow: hidden; background: var(--granite-2); }
.cadre img { width: 100%; height: 100%; object-fit: cover; }
/* <picture> (recadrage selon l'écran) ne doit pas changer la mise en page : l'image reste l'enfant du cadre */
picture { display: contents; }
.cadre--arche { border-radius: var(--arche); }


/* ===== 03-entete-pied.css ===== */
/* =============================================================================
   En-tête (logo + menu) et pied de page
   L'en-tête se retire quand on descend dans la page et revient dès qu'on remonte.
   ========================================================================== */

.entete {
  position: fixed; inset: 0 0 auto; z-index: 50; color: #fff;
  transition: transform 0.6s var(--doux), background-color 0.4s ease, box-shadow 0.4s ease;
}
.entete::before {
  content: ""; position: absolute; inset: 0 0 -50px; z-index: -1; pointer-events: none;
  background: linear-gradient(rgba(26, 25, 25, 0.55), transparent);
  transition: opacity 0.4s ease;
}
.entete--plein, .entete--defile { background: var(--encre); box-shadow: 0 1px 0 var(--ligne-claire); }
.entete--plein::before, .entete--defile::before { opacity: 0; }
.entete--cache { transform: translateY(calc(-100% - 70px)); }

.entete__barre {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem;
  max-width: calc(1440px + 2 * var(--gouttiere)); height: var(--hauteur-entete);
  margin-inline: auto; padding-inline: var(--gouttiere);
}

/* Le logo est une plaque carrée qui descend sous la barre en haut de page */
.entete__logo {
  display: block; flex: none; width: 124px; position: relative; z-index: 2;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
  transition: width 0.6s var(--doux), box-shadow 0.4s ease;
}
.entete__logo img { width: 100%; height: auto; }
.entete--plein .entete__logo, .entete--defile .entete__logo { width: var(--hauteur-entete); box-shadow: none; }

.nav { display: flex; align-items: center; gap: 2.4rem; height: 100%; }
.nav__liste { display: flex; gap: clamp(1.2rem, 2.2vw, 2.4rem); margin: 0; padding: 0; list-style: none; }
.nav__liste a {
  position: relative; display: inline-block; padding-block: 0.4rem; color: #fff; text-decoration: none;
  font-family: var(--police-ui); font-size: 0.9rem; letter-spacing: 0.01em; white-space: nowrap;
}
/* Trait qui s'ouvre depuis le centre, et petit disque rouge sous la page en cours */
.nav__liste a::after {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: 0; height: 1px; background: var(--or);
  transition: left 0.45s var(--doux), right 0.45s var(--doux);
}
.nav__liste a:hover::after { left: 0; right: 0; }
.nav__liste a[aria-current="page"]::before {
  content: ""; position: absolute; left: 50%; bottom: -0.65rem; width: 6px; height: 6px; margin-left: -3px;
  border-radius: 50%; background: var(--bordeaux-vif);
}
.nav__liste a:hover { color: #fff; }
.nav__langue {
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.45); color: #fff; text-decoration: none;
  font-family: var(--police-ui); font-size: 0.78rem; font-weight: 500;
  transition: background-color 0.4s var(--doux), color 0.4s var(--doux);
}
.nav__langue:hover { background: #fff; color: var(--encre); }

.entete__burger { display: none; }

/* Menu mobile : plein écran, liens en lettres Art déco ------------------- */
@media (max-width: 1100px) {
  .entete__logo { width: 96px; }
  .entete__burger {
    display: grid; place-items: center; width: 52px; height: 52px; margin-top: 12px; margin-right: -10px;
    border: 0; background: none; cursor: pointer; position: relative; z-index: 3;
  }
  .burger, .burger::before, .burger::after {
    display: block; width: 28px; height: 1.5px; background: #fff; border-radius: 2px;
    transition: transform 0.5s var(--doux), background-color 0.3s ease, width 0.5s var(--doux);
  }
  .burger { position: relative; width: 20px; margin-left: 8px; }
  .burger::before, .burger::after { content: ""; position: absolute; right: 0; }
  .burger::before { top: -8px; }
  .burger::after { top: 8px; }
  [aria-expanded="true"] .burger { background: transparent; }
  [aria-expanded="true"] .burger::before { transform: translateY(8px) rotate(45deg); }
  [aria-expanded="true"] .burger::after { transform: translateY(-8px) rotate(-45deg); }

  .nav {
    position: fixed; inset: 0; z-index: 1; height: 100dvh;
    flex-direction: column; justify-content: center; gap: 2.75rem;
    background:
      repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 28px) center / 60% 100% no-repeat,
      var(--encre);
    clip-path: circle(0 at calc(100% - 44px) 38px);
    visibility: hidden;
    transition: clip-path 0.8s var(--souple), visibility 0s linear 0.8s;
  }
  .nav--ouverte { clip-path: circle(150% at calc(100% - 44px) 38px); visibility: visible; transition: clip-path 0.8s var(--souple), visibility 0s; }
  .nav__liste { flex-direction: column; align-items: center; gap: 1.1rem; }
  .nav__liste li { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.6s var(--doux); }
  .nav--ouverte .nav__liste li { opacity: 1; transform: none; }
  .nav--ouverte .nav__liste li:nth-child(1) { transition-delay: 0.25s; }
  .nav--ouverte .nav__liste li:nth-child(2) { transition-delay: 0.3s; }
  .nav--ouverte .nav__liste li:nth-child(3) { transition-delay: 0.35s; }
  .nav--ouverte .nav__liste li:nth-child(4) { transition-delay: 0.4s; }
  .nav--ouverte .nav__liste li:nth-child(5) { transition-delay: 0.45s; }
  .nav--ouverte .nav__liste li:nth-child(6) { transition-delay: 0.5s; }
  .nav__liste a { font-family: var(--police-deco); font-size: clamp(2rem, 8vw, 2.8rem); -webkit-text-stroke: 0.01em currentColor; letter-spacing: 0; }
  .nav__liste a[aria-current="page"]::before { bottom: auto; top: 50%; left: -1.1rem; margin: -3px 0 0; }
  body.menu-ouvert { overflow: hidden; }
}

/* Pied de page ----------------------------------------------------------- */
.pied { position: relative; isolation: isolate; background: var(--encre); color: var(--pierre); font-size: 0.98rem; }
.pied a { color: var(--texte-clair); text-decoration: none; }
.pied a:hover { color: #fff; text-decoration: underline; }

/* Le logo au centre, prolongé de part et d'autre par ses lignes et son filet rouge */
.pied__haut { display: flex; align-items: center; padding-top: 5rem; }
.pied__faisceau {
  flex: 1; height: 120px;
  background:
    linear-gradient(var(--bordeaux), var(--bordeaux)) center / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.13) 0 1px, transparent 1px 12px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%);
          mask-image: linear-gradient(90deg, transparent, #000 70%);
}
.pied__faisceau:last-child { -webkit-mask-image: linear-gradient(270deg, transparent, #000 70%); mask-image: linear-gradient(270deg, transparent, #000 70%); }
.pied__logo { flex: none; width: 150px; }
.pied__logo img { width: 100%; }
.pied__logo:hover { text-decoration: none; }
.pied__accroche { text-align: center; font-style: italic; font-size: 1.2rem; color: var(--texte-clair); margin: 2rem auto 0; padding-inline: var(--gouttiere); max-width: 52ch; }

.pied__grille {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem;
  padding-block: 4rem 3.5rem; text-align: center;
}
.pied__titre {
  font-family: var(--police-deco); font-weight: 400; font-size: 1.45rem; color: var(--or);
  -webkit-text-stroke: 0.01em currentColor; margin-bottom: 0.9rem;
}
.pied__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.pied .lien-filet { margin-top: 0.75rem; }
.pied__bas {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 2rem;
  padding-block: 1.6rem; border-top: 1px solid var(--ligne-claire);
  font-family: var(--police-ui); font-size: 0.82rem;
}
.pied__bas p { margin: 0; }
.pied__legal { display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; margin: 0; padding: 0; list-style: none; }
.pied__legal .lien-bouton { color: var(--texte-clair); text-decoration: none; font-size: inherit; font-family: inherit; }
.pied__legal .lien-bouton:hover { text-decoration: underline; }
.pied__note { opacity: 0.7; }
.pied__evin {
  margin: 0; padding: 1.2rem var(--gouttiere) 1.7rem; text-align: center; border-top: 1px solid var(--ligne-claire);
  font-family: var(--police-ui); font-size: 0.8rem; color: #8f877d;
}

@media (max-width: 800px) {
  .pied__grille { grid-template-columns: 1fr; gap: 2.5rem; }
  .pied__logo { width: 120px; }
  .pied__bas { justify-content: center; text-align: center; }
  .pied__legal { justify-content: center; }
}


/* ===== 04-sections.css ===== */
/* =============================================================================
   Sections : ouverture (hero), introduction, chiffres, colonnes, piliers,
   galerie horizontale, bandeau des crus, frise, portraits, saisons, bandeau
   ========================================================================== */

/* Ouverture -------------------------------------------------------------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-items: center; min-height: 80vh; min-height: 80svh;
  background: var(--encre); color: #fff; text-align: center;
}
.hero--grand { min-height: 100vh; min-height: 100svh; }
.hero--petit { min-height: 64vh; min-height: 64svh; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__image { position: absolute; inset: 0; opacity: 0; transition: opacity 2.2s ease; }
.hero__image.est-active { opacity: 1; }
.hero__image img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); }
/* la photo sortante garde son zoom pendant le fondu */
.hero__image.est-active img, .hero__image.est-precedente img { animation: zoom-lent 11s linear both; }
@keyframes zoom-lent { from { transform: scale(1.1); } to { transform: scale(1); } }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(26, 25, 25, 0.28), rgba(26, 25, 25, 0.6)),
    linear-gradient(180deg, rgba(26, 25, 25, 0.55) 0%, rgba(26, 25, 25, 0.08) 40%, rgba(26, 25, 25, 0.7) 100%);
}
.hero__contenu { padding-block: calc(var(--hauteur-entete) + 6rem) clamp(4rem, 9vh, 7rem); max-width: 1180px; }
.hero__rayures { height: 70px; color: #fff; margin-bottom: 2rem; }
.hero__surtitre { font-style: italic; font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem); color: #f1e9df; margin-bottom: 1.2rem; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5); }
.hero__titre {
  color: #fff; font-size: var(--taille-h1); line-height: 1.02; margin: 0 auto;
  -webkit-text-stroke: 0.016em currentColor; text-shadow: 0 2px 40px rgba(0, 0, 0, 0.35);
}
.hero--petit .hero__titre, .hero--moyen .hero__titre { font-size: clamp(2.6rem, 1.4rem + 4.6vw, 5.6rem); }
.hero__filet { display: block; width: min(220px, 40vw); height: 2px; margin: 2.2rem auto 0; background: var(--bordeaux-vif); transform-origin: center; }
.hero__texte { font-style: italic; font-size: var(--taille-lead); line-height: 1.45; color: #f3ece4; max-width: 44ch; margin: 1.6rem auto 0; }
.hero__boutons { margin-top: 2.6rem; }
/* Le lien fait 44 px de large pour le doigt ; seule la ligne centrale de 1 px est dessinée */
.hero__defiler {
  position: absolute; left: 50%; bottom: 2rem; width: 44px; height: 72px; margin-left: -22px; overflow: hidden;
  background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)) center / 1px 100% no-repeat;
}
.hero__defiler::after {
  content: ""; position: absolute; left: calc(50% - 0.5px); top: -6px; width: 1px; height: 5px; background: #fff;
  animation: descendre 2.6s var(--souple) infinite;
}
@keyframes descendre { to { top: 100%; } }

/* Introduction et chiffres clés ------------------------------------------ */
.intro__grille { display: grid; grid-template-columns: 1.45fr 1fr; gap: clamp(3rem, 8vw, 9rem); align-items: center; }
.intro__texte { font-size: var(--taille-lead); line-height: 1.55; color: var(--encre); margin: 0; }
.intro--centre { text-align: center; }
.intro--centre .lignes { margin-inline: auto; }
.intro--centre .intro__texte { margin-top: 2.5rem; }
.intro__tagline { font-style: italic; color: var(--bordeaux); margin: 0; }

.chiffres { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.4rem; }
.chiffres li { display: grid; gap: 0.2rem; }
.chiffres__valeur {
  font-family: var(--police-deco); font-size: clamp(3.4rem, 2.4rem + 3.4vw, 5.8rem); line-height: 0.95;
  color: var(--bordeaux); white-space: nowrap; -webkit-text-stroke: 0.014em currentColor;
}
.chiffres__libelle { font-style: italic; color: var(--texte-doux); }
.chiffres--ligne { grid-template-columns: repeat(3, 1fr); text-align: center; gap: 3rem; }
.section--encre .chiffres__valeur { color: var(--or); }
.section--encre .chiffres__libelle { color: var(--texte-clair); }

/* Deux colonnes : image + texte ----------------------------------------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 7vw, 8rem); align-items: center; }
.duo--inverse .duo__image { order: 2; }
.duo__image { aspect-ratio: 4 / 5; }
.duo__image--haute { aspect-ratio: 3 / 4; }
/* Produit détouré sur fond blanc, posé en bas d'une arche */
.duo__image--produit { aspect-ratio: 3 / 4; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; background: #fff; padding: 0 clamp(1rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem); }
.duo__image--produit img { width: 100%; height: auto; max-height: 82%; object-fit: contain; }
.duo__texte { max-width: 560px; }
.duo__texte .citation { font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.3rem); }
.section--encre .duo__image--produit { box-shadow: 0 40px 80px rgba(0, 0, 0, 0.45); }

/* Piliers (accueil) : trois arches de hauteurs différentes ---------------- */
.piliers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3.5vw, 3.5rem); align-items: start; }
.pilier .cadre { aspect-ratio: 3 / 4; margin-bottom: 2rem; }
.pilier:nth-child(2) { margin-top: 7rem; }
.pilier:nth-child(3) { margin-top: 2.5rem; }
.pilier__titre { font-size: clamp(1.9rem, 1.5rem + 1vw, 2.5rem); margin-bottom: 0.6rem; }
.pilier p { color: var(--texte-doux); }

/* Galerie horizontale des vins (accueil) ---------------------------------- */
.galerie { position: relative; isolation: isolate; background: var(--schiste); color: var(--texte-clair); }
.galerie__collant { position: relative; }
.galerie__piste { display: flex; align-items: center; gap: clamp(2rem, 4vw, 5rem); padding: var(--espace-section) var(--gouttiere); }
.galerie__intro { flex: 0 0 min(30rem, 34vw); }
.galerie__intro .rayures { margin-inline: 0; color: var(--or); justify-content: flex-start; }
.galerie__intro h2 { color: #fff; }
.galerie__liste { display: flex; gap: clamp(1.25rem, 2.2vw, 2.5rem); list-style: none; margin: 0; padding: 0; }
.galerie__liste .carte-vin { flex: 0 0 clamp(230px, 21vw, 330px); }
/* Sur ordinateur, le script fige la galerie et la fait défiler horizontalement */
.galerie.est-epinglee .galerie__collant { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; align-items: center; }
.galerie.est-epinglee .galerie__piste { padding-block: 0; will-change: transform; transform: translate3d(var(--x, 0px), 0, 0); }

/* Bandeau défilant des crus ---------------------------------------------- */
.crus { overflow: hidden; background: var(--encre); padding: clamp(1.6rem, 3vw, 2.6rem) 0; border-top: 1px solid var(--ligne-claire); }
.crus__piste { display: flex; align-items: center; gap: clamp(1.6rem, 3vw, 3rem); width: max-content; animation: defiler-crus 70s linear infinite; }
.crus:hover .crus__piste { animation-play-state: paused; }
.crus span {
  font-family: var(--police-deco); font-size: clamp(2.4rem, 1.6rem + 3.6vw, 5.4rem); line-height: 1; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(233, 226, 219, 0.6);
}
.crus span:nth-of-type(3n + 1) { color: var(--texte-clair); -webkit-text-stroke: 0.014em var(--texte-clair); }
.crus i { flex: none; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--bordeaux-vif); }
@keyframes defiler-crus { to { transform: translateX(-50%); } }

/* Frise chronologique (le domaine) --------------------------------------- */
.frise { position: relative; }
.frise__ligne { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--ligne); }
.frise__trace { position: absolute; left: 0; top: 0; width: 1px; height: calc(var(--progression, 0) * 100%); background: var(--bordeaux); }
.chapitres { list-style: none; margin: 0; padding: 0; }
.chapitre { position: relative; }
.chapitre + .chapitre { margin-top: clamp(5rem, 10vw, 9rem); }
.chapitre::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px;
  border-radius: 50%; background: var(--granite-2); border: 1px solid var(--bordeaux);
  transition: background-color 0.5s ease, transform 0.6s var(--doux);
}
.chapitre.est-atteint::after { background: var(--bordeaux); transform: scale(1.25); }
.chapitre .duo__image { aspect-ratio: 4 / 5; }

/* Portraits (nous vignerons) -------------------------------------------- */
.portraits { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 7vw, 8rem); align-items: start; }
.portrait:nth-child(2) { margin-top: 9rem; }
.portrait__image { aspect-ratio: 3 / 4; margin-bottom: 2.25rem; }
.portrait__nom { font-size: clamp(2.2rem, 1.6rem + 1.6vw, 3.2rem); }
.portrait__texte p:first-child { font-style: italic; font-size: 1.3rem; line-height: 1.6; color: var(--encre); }

/* Saisons : les cartes s'empilent au fil du défilement -------------------- */
.saisons { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.5rem; }
.saison { position: sticky; top: calc(var(--hauteur-entete) + 1.5rem + var(--rang) * 14px); }
.saison__carte {
  display: grid; grid-template-columns: 1.15fr 1fr; min-height: min(62vh, 560px); overflow: hidden;
  background: var(--blanc); border-radius: 6px; box-shadow: 0 -12px 50px rgba(26, 25, 25, 0.1);
}
.saison__image { overflow: hidden; }
.saison__image img { width: 100%; height: 100%; object-fit: cover; }
.saison__texte { align-self: center; padding: clamp(2rem, 5vw, 4.5rem); }
.saison__titre { font-family: var(--police-deco); font-weight: 400; font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem); -webkit-text-stroke: 0.012em currentColor; }
.saison p { color: var(--texte-doux); font-size: 1.1rem; }

/* Bloc citation ---------------------------------------------------------- */
.citation-bloc { padding-block: clamp(6rem, 12vw, 11rem); }

/* Bandeau de contact (photo en mouvement + appel) ------------------------ */
.bandeau { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; min-height: 78vh; color: #fff; text-align: center; }
.bandeau__media { position: absolute; inset: -12% 0; z-index: -2; }
.bandeau__media img { width: 100%; height: 100%; object-fit: cover; transform: translate3d(0, var(--decalage, 0px), 0); }
.bandeau::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at center, rgba(26, 25, 25, 0.45), rgba(26, 25, 25, 0.78)); }
.bandeau__contenu { padding-block: var(--espace-section); max-width: 900px; }
.bandeau .rayures { color: var(--or); }
.bandeau__titre { color: #fff; font-size: clamp(2.6rem, 1.6rem + 4vw, 5.4rem); }
.bandeau__texte { font-style: italic; font-size: 1.3rem; color: #eee6dc; }
.bandeau .boutons { margin-top: 2.5rem; }

/* Fil d'Ariane ----------------------------------------------------------- */
.fil-ariane { position: relative; z-index: 2; padding-top: calc(var(--hauteur-entete) + 1.6rem); font-family: var(--police-ui); font-size: 0.84rem; color: var(--texte-doux); }
.fil-ariane ol { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.fil-ariane li + li::before { content: "/"; margin-right: 0.4rem; opacity: 0.5; }
.fil-ariane a { color: var(--texte-doux); text-decoration: none; }
.fil-ariane a:hover { color: var(--bordeaux); text-decoration: underline; }

/* Pages de texte (mentions légales, confidentialité) -------------------- */
.page-texte { padding-block: calc(var(--hauteur-entete) + 5rem) var(--espace-section); }
.page-texte .rayures { color: var(--encre); margin-inline: 0; justify-content: flex-start; height: 44px; }
.page-texte__titre { font-size: var(--taille-h2); margin-bottom: 3rem; }
.page-texte h2 { font-family: var(--police-texte); font-weight: 500; -webkit-text-stroke: 0; font-size: 1.45rem; margin-top: 3rem; letter-spacing: 0; }
.page-texte p { font-size: 1.02rem; }
.page-texte a { word-break: break-word; }

/* Adaptations ------------------------------------------------------------ */
@media (max-width: 960px) {
  .intro__grille, .duo, .portraits { grid-template-columns: 1fr; }
  .duo--inverse .duo__image { order: 0; }
  .duo__image, .duo__image--haute, .chapitre .duo__image { aspect-ratio: 4 / 3; }
  .duo__image.cadre--arche { aspect-ratio: 4 / 5; max-width: 520px; width: 100%; margin-inline: auto; }
  .duo__image--produit { max-width: 440px; width: 100%; margin-inline: auto; }
  .duo__texte { max-width: none; }
  .piliers { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; gap: 4rem; }
  .pilier:nth-child(2), .pilier:nth-child(3) { margin-top: 0; }
  .portrait:nth-child(2) { margin-top: 0; }
  .portrait__image { max-width: 520px; }
  .chiffres--ligne { grid-template-columns: 1fr; }
  /* Galerie : défilement horizontal au doigt */
  .galerie__piste { flex-direction: column; align-items: stretch; padding-inline: 0; }
  .galerie__intro { flex: none; padding-inline: var(--gouttiere); }
  .galerie__liste { overflow-x: auto; scroll-snap-type: x mandatory; padding: 0.5rem var(--gouttiere) 1rem; scroll-padding-inline: var(--gouttiere); -webkit-overflow-scrolling: touch; }
  .galerie__liste .carte-vin { flex-basis: 64vw; scroll-snap-align: start; }
  /* Frise : la ligne passe à gauche */
  .frise__ligne { left: 6px; }
  .chapitre { padding-left: 2.2rem; }
  .chapitre::after { left: 6px; top: 1.2rem; }
  /* Saisons : simple pile */
  .saison { position: relative; top: auto; }
  .saison__carte { grid-template-columns: 1fr; min-height: 0; }
  .saison__image { aspect-ratio: 3 / 2; }
}
@media (max-width: 600px) {
  .hero__contenu { padding-top: calc(var(--hauteur-entete) + 5rem); }
  .hero__rayures { height: 48px; }
}


/* ===== 05-vins.css ===== */
/* =============================================================================
   Vins : vignettes en arche, catalogue et filtres, fiche d'un vin,
   tableau des fiches techniques, whisky
   ========================================================================== */

/* Vignette d'un vin ------------------------------------------------------ */
.grille-vins {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 3.5rem 2rem;
}
.grille-vins--quatre { grid-template-columns: repeat(4, 1fr); }

.carte-vin__lien { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.carte-vin__visuel {
  position: relative; aspect-ratio: 3 / 4; overflow: hidden; isolation: isolate;
  border-radius: var(--arche);
  background: radial-gradient(ellipse 75% 60% at 50% 46%, #fbf8f5 0%, #e9e1d9 100%);
}
.section--granite .carte-vin__visuel { background: radial-gradient(ellipse 75% 60% at 50% 46%, #fdfbf9 0%, #efe8e1 100%); }
.galerie .carte-vin__visuel { background: radial-gradient(ellipse 75% 60% at 50% 46%, #f6f1ec 0%, #ddd3ca 100%); }
/* Fines lignes Art déco en arrière-plan */
.carte-vin__visuel::before {
  content: ""; position: absolute; inset: 0 30%; z-index: -2;
  background: repeating-linear-gradient(90deg, rgba(26, 25, 25, 0.05) 0 1px, transparent 1px 10px);
}
/* Le disque rouge du monogramme se lève derrière la bouteille au survol */
.carte-vin__disque {
  position: absolute; left: 50%; top: 47%; z-index: -1; width: 66%; aspect-ratio: 1; border-radius: 50%;
  background: var(--bordeaux); transform: translate(-50%, -50%) scale(0);
  transition: transform 0.8s var(--doux);
}
.carte-vin__lien:hover .carte-vin__disque, .carte-vin__lien:focus-visible .carte-vin__disque { transform: translate(-50%, -50%) scale(1); }
.carte-vin[data-couleur="blanc"] .carte-vin__disque { background: var(--vin-blanc); }
/* La bouteille entière (capsule, collerette, étiquette), toujours centrée */
.bouteille {
  position: absolute; z-index: 1; left: 0; right: 0; top: 9%; bottom: 6%;
  width: 100%; height: 85%; object-fit: contain; object-position: center bottom;
  filter: drop-shadow(0 14px 14px rgba(26, 25, 25, 0.18));
  transition: transform 0.8s var(--doux);
}
.carte-vin__lien:hover .bouteille { transform: translateY(-10px) scale(1.035); }
.carte-vin__texte { padding-top: 1.4rem; text-align: center; }
.carte-vin__titre { margin: 0 0 0.35rem; line-height: 1.15; }
.carte-vin__titre .appellation {
  display: block; font-family: var(--police-deco); font-weight: 400; font-size: 1.85rem; -webkit-text-stroke: 0.012em currentColor;
  transition: color 0.4s ease;
}
.carte-vin__titre .cuvee { display: block; font-style: italic; font-weight: 400; font-size: 1rem; color: var(--texte-doux); margin-top: 0.15rem; }
.carte-vin__lien:hover .appellation { color: var(--bordeaux); }
.carte-vin__meta { margin: 0; font-family: var(--police-ui); font-size: 0.8rem; color: var(--texte-doux); }
.galerie .carte-vin__titre { color: #fff; }
.galerie .carte-vin__titre .cuvee, .galerie .carte-vin__meta { color: var(--pierre); }
.galerie .carte-vin__lien:hover .appellation { color: var(--or); }
.galerie .badge { color: var(--or); }

/* Silhouette quand la photo de bouteille n'existe pas encore */
.bouteille--vide { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.9rem; height: 100%; color: var(--texte-doux); font-family: var(--police-ui); font-size: 0.8rem; text-align: center; }
.bouteille--vide svg { height: 66%; width: auto; fill: rgba(26, 25, 25, 0.1); }

/* Catalogue et filtres --------------------------------------------------- */
.filtres { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
.filtre {
  display: inline-flex; align-items: center; padding: 0.6rem 1.25rem; border: 1px solid var(--ligne); border-radius: 999px;
  background: transparent; cursor: pointer; font-family: var(--police-ui); font-size: 0.88rem;
  transition: background-color 0.4s var(--doux), color 0.4s var(--doux), border-color 0.4s var(--doux);
}
.filtre:hover { border-color: var(--encre); }
.filtre[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: #fff; }
.filtres__compte { text-align: center; margin: 1.2rem 0 0; font-style: italic; color: var(--texte-doux); }
.catalogue__groupe { margin-top: 5rem; }
.titre-region { display: flex; align-items: baseline; gap: 1.5rem; font-family: var(--police-deco); font-weight: 400; font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem); -webkit-text-stroke: 0.012em currentColor; margin-bottom: 2.5rem; }
.titre-region::after { content: ""; flex: 1; height: 1px; background: var(--ligne); align-self: center; }
.catalogue__vide { text-align: center; font-style: italic; color: var(--texte-doux); margin-top: 3rem; }
.carte-vin[hidden], .catalogue__groupe[hidden] { display: none; }
.titre-region__texte { display: block; }
.titre-region .pastille { width: 0.42em; height: 0.42em; margin-right: 0.6em; vertical-align: 0.14em; }
.filtre:target { box-shadow: 0 0 0 3px rgba(146, 27, 34, 0.18); }

/* Fiche d'un vin --------------------------------------------------------- */
.vin__scene { position: relative; overflow: hidden; }
/* Le nom de l'appellation en très grand, en filigrane derrière la bouteille */
.vin__filigrane {
  position: absolute; left: 50%; top: 52%; z-index: 0; margin: 0; pointer-events: none;
  transform: translate(-50%, -50%); white-space: nowrap;
  font-family: var(--police-deco); font-size: clamp(6rem, 21vw, 24rem); line-height: 0.8;
  color: transparent; -webkit-text-stroke: 1px rgba(26, 25, 25, 0.09);
}
.vin__tete {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 5fr 6fr; gap: clamp(3rem, 7vw, 8rem); align-items: center;
  padding-block: 2.5rem clamp(4rem, 8vw, 7rem);
}
.vin__visuel {
  position: relative; isolation: isolate; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--arche);
  background: radial-gradient(ellipse 70% 60% at 50% 48%, #fdfbf9 0%, #e4dbd2 100%);
}
.vin__rayures { position: absolute; inset: 0 22%; z-index: -2; height: auto; margin: 0; gap: 12px; color: var(--encre); }
.vin__rayures i { opacity: 0.08; }
.vin__disque {
  position: absolute; left: 50%; top: 47%; z-index: -1; width: 64%; aspect-ratio: 1; border-radius: 50%;
  background: var(--bordeaux); transform: translate(-50%, -50%);
}
.vin--blanc .vin__disque { background: var(--vin-blanc); }
.vin__bouteille {
  position: absolute; z-index: 1; left: 0; right: 0; top: 8%; bottom: 5%;
  width: 100%; height: 87%; object-fit: contain; object-position: center bottom;
  filter: drop-shadow(0 22px 22px rgba(26, 25, 25, 0.22));
}
.vin__region { font-style: italic; font-size: 1.12rem; color: var(--bordeaux); margin-bottom: 0.8rem; }
.vin__titre { margin-bottom: 0.4rem; }
.vin__titre .appellation { display: block; font-family: var(--police-deco); font-weight: 400; font-size: clamp(3rem, 1.8rem + 4.6vw, 6.4rem); line-height: 1; -webkit-text-stroke: 0.014em currentColor; }
.vin__titre .cuvee { display: block; font-family: var(--police-texte); font-style: italic; font-weight: 400; font-size: clamp(1.4rem, 1.1rem + 1vw, 2.1rem); color: var(--texte-doux); margin-top: 0.6rem; -webkit-text-stroke: 0; }

/* Repères : même présentation que sur les fiches techniques (barre bordeaux) */
.vin__reperes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; margin: 2.4rem 0 0; }
.vin__reperes div { background: var(--blanc); border-left: 3px solid var(--bordeaux); padding: 1rem 1.15rem; }
.vin__reperes dt { font-family: var(--police-ui); font-size: 0.78rem; color: var(--texte-doux); }
.vin__reperes dd { margin: 0.25rem 0 0; font-family: var(--police-deco); font-size: 1.75rem; line-height: 1.15; color: var(--encre); -webkit-text-stroke: 0.012em currentColor; }
.vin__fiches { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.2rem; margin-top: 2.4rem; }
.vin__fiches .lien-filet { margin-top: 0; }
.vin__fiche-vide { margin: 0; padding: 0.9rem 1.4rem; border: 1px dashed rgba(26, 25, 25, 0.3); border-radius: 999px; font-style: italic; color: var(--texte-doux); }

.vin__corps { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 7vw, 8rem); padding-bottom: var(--espace-section); }
.caracteristiques { margin: 0; }
.caracteristiques div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; padding: 0.9rem 0; border-top: 1px solid var(--ligne); }
.caracteristiques div:last-child { border-bottom: 1px solid var(--ligne); }
.caracteristiques dt { padding-top: 0.2rem; font-family: var(--police-ui); font-size: 0.82rem; color: var(--texte-doux); }
.caracteristiques dd { margin: 0; }
.vin__degustation { font-size: 1.22rem; line-height: 1.7; color: var(--encre); }
.vin__degustation--detail { margin: 0; }
.vin__degustation--detail div + div { margin-top: 0.75rem; }
.vin__degustation--detail dt { display: inline; margin-right: 0.5em; font-family: var(--police-ui); font-size: 0.95rem; font-weight: 500; color: var(--bordeaux); }
.vin__degustation--detail dd { display: inline; margin: 0; }
.vin__degustation-remarque { margin: 1.4rem 0 0; font-size: 1.05rem; line-height: 1.7; font-style: italic; color: var(--texte-doux); }

/* Tableau des fiches techniques ----------------------------------------- */
.tableau-defilant { overflow-x: auto; margin-bottom: 4.5rem; -webkit-overflow-scrolling: touch; }
.tableau-fiches { width: 100%; border-collapse: collapse; }
.tableau-fiches th, .tableau-fiches td { padding: 1.15rem 0.75rem; border-bottom: 1px solid var(--ligne); text-align: left; vertical-align: middle; }
.tableau-fiches thead th { font-family: var(--police-ui); font-weight: 400; font-size: 0.82rem; color: var(--texte-doux); border-bottom-color: var(--encre); }
.tableau-fiches tbody tr { transition: background-color 0.3s ease; }
.tableau-fiches tbody tr:hover { background: rgba(255, 255, 255, 0.45); }
.tableau-fiches tbody th { font-weight: 500; font-size: 1.1rem; }
.tableau-fiches tbody th a { color: var(--encre); text-decoration: none; }
.tableau-fiches tbody th a:hover { color: var(--bordeaux); }
.tableau-fiches__meta { display: block; font-family: var(--police-ui); font-weight: 400; font-size: 0.8rem; color: var(--texte-doux); }
.tableau-fiches__vide { font-style: italic; color: var(--texte-doux); }
.lien-pdf {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 1rem; white-space: nowrap;
  border: 1px solid var(--bordeaux); border-radius: 999px; text-decoration: none;
  font-family: var(--police-ui); font-size: 0.82rem; font-weight: 500;
  transition: background-color 0.4s var(--doux), color 0.4s var(--doux);
}
.lien-pdf small { font-size: 0.76rem; font-weight: 400; opacity: 0.75; }
.lien-pdf:hover { background: var(--bordeaux); color: #fff; }

/* Whisky ----------------------------------------------------------------- */
/* La photo de studio garde la bouteille entière, bouchon compris */
.duo__image.cadre--whisky { aspect-ratio: 3 / 4; background: #e9e9e8; }
.cadre--whisky img { object-position: 50% 0%; }
.faits { list-style: none; margin: 0 0 1rem; padding: 0; }
.faits li { position: relative; padding: 1.1rem 0 1.1rem 2.5rem; border-top: 1px solid var(--ligne-claire); font-size: 1.1rem; }
.faits li:last-child { border-bottom: 1px solid var(--ligne-claire); }
.faits li::before { content: ""; position: absolute; left: 0; top: 1.95rem; width: 1.4rem; height: 1px; background: var(--or); }

/* Adaptations ------------------------------------------------------------ */
@media (max-width: 1100px) {
  .grille-vins--quatre { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
  .vin__tete, .vin__corps { grid-template-columns: 1fr; }
  .vin__visuel { max-width: 460px; width: 100%; margin-inline: auto; }
  .vin__filigrane { top: 30%; }
}
@media (max-width: 640px) {
  .grille-vins { grid-template-columns: 1fr 1fr; gap: 2.5rem 1rem; }
  .carte-vin__titre .appellation { font-size: 1.45rem; }
  /* Repères en lignes : libellé à gauche, valeur à droite, rien ne se coupe */
  .vin__reperes { grid-template-columns: 1fr; gap: 0.5rem; }
  .vin__reperes div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.7rem 1rem; }
  .vin__reperes dd { margin: 0; font-size: 1.45rem; white-space: nowrap; }
  .caracteristiques div { grid-template-columns: 1fr; gap: 0.15rem; }
  .tableau-fiches th, .tableau-fiches td { padding-inline: 0.4rem; }
}


/* ===== 06-formulaire.css ===== */
/* =============================================================================
   Page contact : formulaire (libellés qui flottent au-dessus de la saisie)
   ========================================================================== */

.contact { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(3rem, 7vw, 8rem); align-items: start; }
.contact__formulaire .sous-titre { margin-bottom: 3rem; }

.formulaire__groupe { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.formulaire__groupe--trois { grid-template-columns: 1.4fr 1fr 0.8fr; }
.formulaire__groupe legend { grid-column: 1 / -1; padding: 0; margin-bottom: 0.2rem; font-family: var(--police-deco); font-size: 1.5rem; -webkit-text-stroke: 0.01em currentColor; color: var(--encre); }

.champ { position: relative; margin-bottom: 1.4rem; }
.champ input:not([type="checkbox"]), .champ textarea {
  width: 100%; padding: 1.55rem 0 0.55rem; background: transparent;
  border: 0; border-bottom: 1px solid rgba(26, 25, 25, 0.3); border-radius: 0;
  font-family: var(--police-texte); font-size: 1.08rem; line-height: 1.5;
  background-image: linear-gradient(var(--bordeaux), var(--bordeaux));
  background-size: 0 2px; background-position: left bottom; background-repeat: no-repeat;
  transition: background-size 0.6s var(--doux), border-color 0.3s ease;
}
.champ textarea { resize: vertical; min-height: 9rem; }
.champ input:focus, .champ textarea:focus { outline: none; background-size: 100% 2px; }
.champ input:not([type="checkbox"]) + label, .champ textarea + label {
  position: absolute; left: 0; top: 1.5rem; pointer-events: none; transform-origin: left top;
  font-family: var(--police-ui); font-size: 0.95rem; color: var(--texte-doux);
  transition: transform 0.4s var(--doux), color 0.3s ease;
}
.champ input:not([type="checkbox"]):focus + label, .champ input:not([type="checkbox"]):not(:placeholder-shown) + label,
.champ textarea:focus + label, .champ textarea:not(:placeholder-shown) + label {
  transform: translateY(-1.3rem) scale(0.82); color: var(--bordeaux);
}
.champ [aria-invalid="true"] { border-bottom-color: var(--bordeaux); background-color: rgba(146, 27, 34, 0.04); }
.obligatoire { color: var(--bordeaux); }

.champ--case { display: flex; align-items: flex-start; gap: 0.9rem; margin-top: 1rem; }
.champ--case input { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.3rem; accent-color: var(--bordeaux); }
.champ--case label { font-size: 0.95rem; color: var(--texte); line-height: 1.65; }

/* Champ invisible anti-robots */
.champ--piege { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.formulaire__pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: 1.5rem; }
.formulaire__note { margin: 0; font-family: var(--police-ui); font-size: 0.82rem; color: var(--texte-doux); }
.formulaire__statut { margin-top: 1.5rem; }
.formulaire__statut:empty { display: none; }
.formulaire__statut.est-succes { padding: 1.1rem 1.4rem; background: #eaf1e8; border-left: 3px solid #3d7a46; color: #24502b; }
.formulaire__statut.est-erreur { padding: 1.1rem 1.4rem; background: #f7ebe9; border-left: 3px solid var(--bordeaux); color: var(--bordeaux-fonce); }
.formulaire [type="submit"][disabled] { opacity: 0.6; cursor: wait; }

.contact__infos { position: sticky; top: calc(var(--hauteur-entete) + 2rem); }
.contact__image { aspect-ratio: 4 / 5; margin-bottom: 2.5rem; }
.contact__infos address { font-size: 1.12rem; margin-bottom: 1.25rem; }
.contact__liste { list-style: none; margin: 0 0 0.5rem; padding: 0; display: grid; gap: 0.45rem; }
.contact__liste span { display: inline-block; min-width: 4.8rem; font-family: var(--police-ui); font-size: 0.82rem; color: var(--texte-doux); }

@media (max-width: 960px) {
  .contact { grid-template-columns: 1fr; }
  .contact__infos { position: static; }
  .contact__image { max-width: 420px; }
}
@media (max-width: 640px) {
  .formulaire__groupe, .formulaire__groupe--trois { grid-template-columns: 1fr; }
}


/* ===== 07-fenetres.css ===== */
/* =============================================================================
   Fenêtre « âge légal » (à l'arrivée) et bandeau de consentement aux cookies
   ========================================================================== */

/* Âge légal : composition du logo (lignes, monogramme, question) --------- */
.age { display: none; }
.age-a-verifier .age {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; padding: var(--gouttiere); overflow-y: auto;
  color: var(--texte-clair); text-align: center; background: var(--encre);
}
.age-a-verifier body { overflow: hidden; }
.age.est-sortante { opacity: 0; transition: opacity 0.7s ease; pointer-events: none; }
.age__fond { position: absolute; inset: 0; z-index: 0; }
.age__fond img { width: 100%; height: 100%; object-fit: cover; filter: blur(4px) brightness(0.42) saturate(0.9); transform: scale(1.08); animation: zoom-lent 14s linear both; }
.age__boite { position: relative; z-index: 1; width: 100%; max-width: 620px; padding-block: 2rem; }
.age__rayures { height: 76px; color: #fff; margin-bottom: 1.6rem; }
.age__rayures i { transform: scaleY(0); animation: tracer 1s var(--doux) forwards; }
.age__rayures i:nth-child(1) { animation-delay: 0.05s; } .age__rayures i:nth-child(2) { animation-delay: 0.1s; }
.age__rayures i:nth-child(3) { animation-delay: 0.15s; } .age__rayures i:nth-child(4) { animation-delay: 0.2s; }
.age__rayures i:nth-child(5) { animation-delay: 0.25s; } .age__rayures i:nth-child(6) { animation-delay: 0.3s; }
.age__rayures i:nth-child(7) { animation-delay: 0.35s; } .age__rayures i:nth-child(8) { animation-delay: 0.4s; }
.age__rayures i:nth-child(9) { animation-delay: 0.45s; } .age__rayures i:nth-child(10) { animation-delay: 0.5s; }
.age__rayures i:nth-child(11) { animation-delay: 0.55s; }
@keyframes tracer { to { transform: scaleY(1); } }
.age__logo { width: 120px; margin: 0 auto 2rem; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); animation: apparaitre 1.2s var(--doux) 0.4s both; }
.age__titre { font-family: var(--police-texte); font-style: italic; font-weight: 400; font-size: 1.15rem; color: var(--or); -webkit-text-stroke: 0; margin-bottom: 1rem; animation: apparaitre 1s var(--doux) 0.7s both; }
.age__question { font-family: var(--police-deco); font-size: clamp(2rem, 1.5rem + 2.4vw, 3.4rem); line-height: 1.12; color: #fff; -webkit-text-stroke: 0.014em currentColor; margin-bottom: 1rem; text-wrap: balance; animation: apparaitre 1s var(--doux) 0.85s both; }
.age__detail { color: var(--pierre); animation: apparaitre 1s var(--doux) 1s both; }
.age__boutons { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem; margin: 2.2rem 0 1.5rem; animation: apparaitre 1s var(--doux) 1.15s both; }
.age__refus { padding: 0.9rem 1.2rem; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 6px; color: #f5d2cf; }
.age__evin { font-family: var(--police-ui); font-size: 0.8rem; color: #8f877d; margin-top: 1.6rem; }
.age__langue { display: inline-block; margin-top: 0.4rem; font-family: var(--police-ui); font-size: 0.85rem; color: var(--or); }
.age__langue:hover { color: #fff; }
@keyframes apparaitre { from { opacity: 0; transform: translateY(18px); } }

/* Bandeau cookies -------------------------------------------------------- */
.cookies {
  position: fixed; left: var(--gouttiere); bottom: var(--gouttiere); z-index: 90;
  width: min(480px, calc(100% - 2 * var(--gouttiere)));
}
.cookies[hidden] { display: none; }
.cookies__boite {
  max-height: calc(100vh - 2 * var(--gouttiere)); overflow-y: auto;
  padding: 1.6rem 1.6rem 1.4rem; background: var(--blanc); color: var(--texte); border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3); border-top: 3px solid var(--bordeaux);
  animation: monter 0.7s var(--doux) both;
}
@keyframes monter { from { opacity: 0; transform: translateY(30px); } }
.cookies__titre { font-size: 1.8rem; margin-bottom: 0.5rem; }
.cookies__texte, .cookies__details p { font-size: 0.9rem; line-height: 1.6; color: var(--texte-doux); }
.cookies__details { margin-top: 1rem; }
.cookies__categorie { padding: 0.85rem 0; border-top: 1px solid var(--ligne); }
.cookies__tete { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 0 0 0.35rem; cursor: pointer; font-family: var(--police-ui); font-size: 0.92rem; }
.cookies__tete strong { font-weight: 500; }
.cookies__toujours { font-size: 0.8rem; color: #3d7a46; }
.cookies__boutons { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.25rem; }
.cookies__boutons .bouton { min-height: 2.8rem; padding: 0.6rem 1.2rem; font-size: 0.86rem; flex: 1 1 auto; }
.cookies__plus { margin: 0.9rem 0 0; font-family: var(--police-ui); font-size: 0.82rem; }

.interrupteur {
  appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 2.75rem; height: 1.5rem; margin: 0;
  border-radius: 999px; background: #cfc7bc; cursor: pointer; transition: background-color 0.3s ease;
}
.interrupteur::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: calc(1.5rem - 6px); height: calc(1.5rem - 6px);
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.4s var(--doux);
}
.interrupteur:checked { background: var(--bordeaux); }
.interrupteur:checked::after { transform: translateX(1.25rem); }


/* ===== 08-animations.css ===== */
/* =============================================================================
   Mouvements
   - Ouverture : les lignes du logo se tracent, le titre monte mot à mot,
     le filet rouge s'étire (une seule séquence orchestrée par page).
   - Défilement : images révélées à travers les lignes du logo, titres mot à
     mot, texte d'introduction qui se remplit, parallaxe douce.
   - Transitions entre pages : fondu, et la bouteille glisse de la vignette
     vers la fiche du vin (navigateurs récents).
   Toutes ces animations sont désactivées si le visiteur a demandé à réduire
   les mouvements dans les réglages de son appareil.
   La classe .js n'est posée que si le script s'est chargé : sans lui, tout reste visible.
   ========================================================================== */

/* Ouverture -------------------------------------------------------------- */
.js .hero__rayures i { transform: scaleY(0); transition: transform 1.1s var(--doux); }
.js .hero__rayures i:nth-child(2) { transition-delay: 0.05s; } .js .hero__rayures i:nth-child(3) { transition-delay: 0.1s; }
.js .hero__rayures i:nth-child(4) { transition-delay: 0.15s; } .js .hero__rayures i:nth-child(5) { transition-delay: 0.2s; }
.js .hero__rayures i:nth-child(6) { transition-delay: 0.25s; } .js .hero__rayures i:nth-child(7) { transition-delay: 0.3s; }
.js .hero__rayures i:nth-child(8) { transition-delay: 0.35s; } .js .hero__rayures i:nth-child(9) { transition-delay: 0.4s; }
.js .hero__surtitre, .js .hero__texte, .js .hero__boutons { opacity: 0; transform: translateY(16px); transition: opacity 1s ease, transform 1.1s var(--doux); }
.js .hero__filet { transform: scaleX(0); transition: transform 1.4s var(--doux) 0.9s; }
.js .hero__defiler { opacity: 0; transition: opacity 1s ease 1.8s; }
.hero.est-lance .hero__rayures i { transform: scaleY(1); }
.hero.est-lance .hero__surtitre { opacity: 1; transform: none; transition-delay: 0.35s; }
.hero.est-lance .hero__filet { transform: scaleX(1); }
.hero.est-lance .hero__texte { opacity: 1; transform: none; transition-delay: 1.1s; }
.hero.est-lance .hero__boutons { opacity: 1; transform: none; transition-delay: 1.3s; }
.hero.est-lance .hero__defiler { opacity: 1; }

/* Titres mot à mot ------------------------------------------------------- */
.js [data-mots] .mot { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.1em 0.02em 0.16em; margin: -0.1em -0.02em -0.16em; }
.js [data-mots] .mot__in { display: inline-block; transform: translateY(112%); transition: transform 1.15s var(--doux); transition-delay: calc(var(--i, 0) * 55ms); }
.js [data-mots].est-visible .mot__in { transform: none; }
.js .hero [data-mots] .mot__in { transition-delay: calc(0.45s + var(--i, 0) * 70ms); transition-duration: 1.3s; }
.js .citation[data-mots] p::before, .js .citation[data-mots] p::after { opacity: 0; transition: opacity 1s ease 0.6s; }
.js .citation[data-mots].est-visible p::before, .js .citation[data-mots].est-visible p::after { opacity: 1; }

/* Introduction qui se remplit mot à mot au fil du défilement ------------- */
.js [data-remplissage] .remplir { color: rgba(38, 34, 33, 0.16); transition: color 0.35s ease; }
.js [data-remplissage] .remplir.est-rempli { color: inherit; }

/* Images révélées à travers les lignes verticales du logo ---------------- */
.js [data-revele]:not(.est-revele-fini) {
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 var(--rideau), transparent var(--rideau) 8.3333%);
          mask-image: repeating-linear-gradient(90deg, #000 0 var(--rideau), transparent var(--rideau) 8.3333%);
  transition: --rideau 1.5s var(--souple);
}
.js [data-revele].est-visible { --rideau: 8.34%; }
.js [data-revele] img { transition: transform 1.8s var(--doux); }
.js [data-revele]:not(.est-visible) img { transform: scale(1.12); }

/* Parallaxe : l'image glisse doucement dans son cadre -------------------- */
.js [data-parallaxe].est-visible img, .js .bandeau__media[data-parallaxe] img {
  transform: translate3d(0, var(--decalage, 0px), 0) scale(1.1);
  transition: none;
}

/* Produits qui flottent (whisky) ----------------------------------------- */
.flotte img { animation: flotter 7s ease-in-out infinite; }
@keyframes flotter { 50% { transform: translateY(-12px); } }

/* Fiche d'un vin : entrée de la bouteille et du disque ------------------- */
.vin__disque { animation: disque 1.3s var(--doux) 0.15s both; }
@keyframes disque { from { transform: translate(-50%, -50%) scale(0); } }
.vin__filigrane { animation: filigrane 1.8s var(--doux) both; }
@keyframes filigrane { from { opacity: 0; letter-spacing: 0.12em; } }

/* Transitions entre les pages (navigateurs récents) --------------------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 0.45s ease both page-sortie; }
::view-transition-new(root) { animation: 0.7s var(--doux) both page-entree; }
::view-transition-group(*) { animation-duration: 0.75s; animation-timing-function: var(--doux); }
@keyframes page-sortie { to { opacity: 0; } }
@keyframes page-entree { from { opacity: 0; transform: translateY(14px); } }

/* Mouvement réduit ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  .js .hero__rayures i, .js .hero__filet { transform: none; }
  .js .hero__surtitre, .js .hero__texte, .js .hero__boutons, .js .hero__defiler { opacity: 1; transform: none; }
  .js [data-mots] .mot__in { transform: none; }
  .js [data-remplissage] .remplir { color: inherit; }
  .js [data-revele] { -webkit-mask-image: none !important; mask-image: none !important; }
  .js [data-revele] img, .js [data-parallaxe] img { transform: none !important; }
  .crus__piste { animation: none; }
}

@media print {
  .entete, .pied, .age, .cookies, .hero__defiler, .boutons, .filtres, .crus { display: none !important; }
  .hero { min-height: 0; color: #000; background: none; }
  .hero__media, .hero::after { display: none; }
  .hero__titre, .hero__texte { color: #000; text-shadow: none; }
  body { background: #fff; }
}