/* ==========================================================
   Mas de l'Écriture — feuille de styles
   ========================================================== */

:root {
  --encre:    #12100E;
  --papier:   #E8E3D6;
  --lie:      #5E2131;
  --calcaire: #A79E8B;
  --vigne:    #3D4A34;

  --serif: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --sans:  "Poppins", "Helvetica Neue", Arial, sans-serif;

  --marge: clamp(1.25rem, 5vw, 5rem);
  --rythme: clamp(5rem, 12vw, 11rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--lie);
  outline-offset: 3px;
}

.lisible-uniquement {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* ---------- Éléments typographiques récurrents ---------- */

.eyebrow {
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  margin: 0 0 1.4rem;
}

.folio {
  font-family: var(--sans);
  font-size: .7rem;
  letter-spacing: .2em;
  color: var(--calcaire);
  margin-right: 1.2rem;
}

.lien-fleche {
  display: inline-block;
  font-family: var(--sans);
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: .35rem;
  border-bottom: 1px solid currentColor;
  transition: opacity .25s ease;
}

.lien-fleche:hover { opacity: .55; }

/* ---------- Page de garde ---------- */

.garde {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--encre);
  color: var(--papier);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 2rem 1.5rem;
  transition: opacity .6s ease;
}

.garde[hidden] { display: none; }
.garde.sortie { opacity: 0; pointer-events: none; }

.garde-marque {
  font-family: var(--serif);
  font-size: clamp(2rem, 7vw, 3.6rem);
  font-weight: 400;
  line-height: 1.04;
  margin: 0 0 3.5rem;
}

.garde-question {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 2.4vw, 1.4rem);
  margin: 0 0 2.2rem;
}

.garde-choix {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.garde-choix button {
  font-family: var(--sans);
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 1rem 2.2rem;
  background: transparent;
  color: var(--papier);
  border: 1px solid rgba(232,227,214,.4);
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.garde-choix button:hover,
.garde-choix button:focus-visible {
  background: var(--papier);
  color: var(--encre);
  border-color: var(--papier);
}

.garde-mention {
  position: absolute;
  bottom: 1.6rem;
  left: 1.5rem; right: 1.5rem;
  font-size: .68rem;
  letter-spacing: .05em;
  opacity: .55;
  margin: 0;
}

/* ---------- En-tête ---------- */

.entete {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem var(--marge);
  color: var(--papier);
  mix-blend-mode: difference;
}

.entete a, .entete button {
  font-family: var(--sans);
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

.entete-droite { display: flex; gap: 1.6rem; align-items: center; }

/* ---------- Menu plein écran ---------- */

.menu {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--encre);
  color: var(--papier);
  padding: 1.4rem var(--marge) var(--marge);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: translateY(-100%);
  transition: transform .6s cubic-bezier(.7,0,.2,1);
}

.menu.ouvert { transform: translateY(0); }

.menu-haut {
  display: flex;
  justify-content: space-between;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.menu-haut button {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
}

.menu-liste {
  list-style: none;
  margin: 0; padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .2rem;
}

.menu-liste a {
  font-family: var(--serif);
  font-size: clamp(2rem, 7vw, 4.4rem);
  font-weight: 400;
  line-height: 1.12;
  text-decoration: none;
  display: flex;
  align-items: baseline;
  transition: color .25s ease;
}

.menu-liste a:hover { color: var(--calcaire); }

.menu-bas {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: .74rem;
  letter-spacing: .12em;
}

.menu-bas a { text-decoration: none; margin-left: 1.4rem; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--papier);
  background: var(--encre);
}

.hero-video {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--encre);
}

.hero-video iframe {
  position: absolute;
  top: 50%; left: 50%;
  width: 100vw;
  height: 56.25vw;
  min-height: 100svh;
  min-width: 177.78svh;
  transform: translate(-50%, -50%);
  border: 0;
}

.hero-voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(18,16,14,.58) 0%,
    rgba(18,16,14,.16) 38%,
    rgba(18,16,14,.72) 100%);
}

.hero-contenu { position: relative; padding: 0 var(--marge); }

.hero h1 {
  font-family: var(--serif);
  font-size: clamp(3rem, 12vw, 9rem);
  font-weight: 300;
  line-height: .9;
  letter-spacing: -.025em;
  margin: 0;
}

.hero h1 em { font-style: italic; font-weight: 400; }

.citation {
  font-family: var(--serif);
  max-width: 44rem;
  margin: 2.4rem auto 0;
  font-size: clamp(1.15rem, 2.1vw, 1.75rem);
  font-style: italic;
  line-height: 1.45;
  opacity: .92;
}

.citation .signature {
  display: block;
  margin-top: .9rem;
  font-family: var(--sans);
  font-style: normal;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .75;
}

.hero-defiler {
  position: absolute;
  bottom: 2rem; left: 50%;
  transform: translateX(-50%);
  font-size: .68rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  opacity: .8;
}

/* ---------- Bandeau des cuvées ---------- */

.bandeau {
  background: var(--encre);
  color: var(--papier);
  padding: 1.6rem 0;
  overflow: hidden;
  white-space: nowrap;
}

.bandeau-piste {
  display: inline-block;
  animation: defile 38s linear infinite;
}

.bandeau-piste span {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.4rem, 3.4vw, 2.4rem);
  padding: 0 1.6rem;
}

.bandeau-piste span::after {
  content: "·";
  margin-left: 3.2rem;
  color: var(--lie);
  font-style: normal;
}

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

/* ---------- Sections ---------- */

.section { padding: var(--rythme) var(--marge); }

.section-sombre { background: var(--encre); color: var(--papier); }

.intro p {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.8vw, 2.1rem);
  line-height: 1.42;
  max-width: 46rem;
  margin: 0;
}

/* ---------- Cuvées ---------- */

.cuvees-entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 3rem;
}

.cuvees-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2.5rem 1.5rem;
}

.cuvee {
  text-decoration: none;
  display: flex;
  flex-direction: column;
}

.cuvee .plaque { aspect-ratio: 3 / 4; margin-bottom: 1rem; }

.cuvee-nom {
  font-family: var(--serif);
  font-size: 1.15rem;
  margin: 0 0 .3rem;
}

.cuvee-detail {
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--vigne);
  margin: 0 0 .5rem;
}

.cuvee-pied {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-size: .82rem;
}

.etiquette {
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .25rem .6rem;
  border: 1px solid currentColor;
}

.etiquette-nouveau { color: var(--vigne); }
.etiquette-rupture { color: var(--lie); }

/* ---------- Plaques d'image (emplacements à remplir) ---------- */

.plaque {
  position: relative;
  background: repeating-linear-gradient(
    45deg,
    rgba(167,158,139,.16) 0 10px,
    rgba(167,158,139,.06) 10px 20px);
  border: 1px solid rgba(167,158,139,.5);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1.5rem;
}

.plaque span {
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vigne);
  line-height: 1.7;
}

.section-sombre .plaque { border-color: rgba(232,227,214,.35); }
.section-sombre .plaque span { color: var(--calcaire); }

/* ---------- Blocs illustrés ---------- */

.bloc { display: grid; gap: 2.5rem; align-items: end; }

@media (min-width: 900px) {
  .bloc { grid-template-columns: 1.15fr 1fr; gap: 4rem; }
}

.bloc .plaque { aspect-ratio: 4 / 3; }

.bloc h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.35rem);
  line-height: 1.24;
  margin: 0 0 2rem;
}

/* ---------- Cercle ---------- */

.cercle { text-align: center; }

.cercle h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.4rem, 8vw, 6rem);
  line-height: 1;
  margin: 0 0 1.6rem;
}

.cercle h2 em { font-style: italic; }

.cercle p {
  max-width: 34rem;
  margin: 0 auto 2.4rem;
  font-size: 1.02rem;
}

/* ---------- Toujours ---------- */

.toujours-liste {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.toujours-liste li {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.3rem, 3.4vw, 2.4rem);
  padding: .2rem 1.2rem .2rem 0;
}

.toujours-liste li::after {
  content: "—";
  margin-left: 1.2rem;
  font-style: normal;
  color: var(--calcaire);
}

.toujours-liste li:last-child::after { content: ""; }

/* ---------- Presse ---------- */

.presse-grille {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 3rem;
}

.presse blockquote {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.45;
  border-top: 1px solid rgba(232,227,214,.28);
  padding-top: 1.4rem;
}

.presse cite {
  display: block;
  margin-top: 1.2rem;
  font-family: var(--sans);
  font-style: normal;
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--calcaire);
}

/* ---------- Pied de page ---------- */

.pied {
  background: var(--encre);
  color: var(--papier);
  padding: var(--rythme) var(--marge) 2rem;
}

.pied-colonnes {
  display: grid;
  gap: 2.6rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.pied h3 {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--calcaire);
  margin: 0 0 1.2rem;
}

.pied p, .pied a { font-size: .9rem; }

.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: .5rem; }
.pied a { text-decoration: none; }
.pied a:hover { color: var(--calcaire); }

.newsletter {
  display: flex;
  border-bottom: 1px solid rgba(232,227,214,.4);
  margin-top: 1rem;
}

.newsletter input {
  flex: 1;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  padding: .5rem 0;
}

.newsletter input::placeholder { color: rgba(232,227,214,.45); }

.newsletter button {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font-size: 1.1rem;
  padding: 0 .4rem;
}

.pied-bas {
  margin-top: 4rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(232,227,214,.2);
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  justify-content: space-between;
  font-size: .7rem;
  letter-spacing: .06em;
  color: var(--calcaire);
}

.mention-legale {
  background: var(--encre);
  color: var(--calcaire);
  text-align: center;
  font-size: .68rem;
  letter-spacing: .08em;
  padding: 0 var(--marge) 1.6rem;
  margin: 0;
}

/* ---------- Mouvement réduit ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bandeau-piste { animation: none; }
  .garde, .menu { transition: none; }
}

/* ==========================================================
   Photographies
   ========================================================== */

.cuvee img { width:100%; aspect-ratio:3/4; object-fit:cover; margin-bottom:1rem; background:rgba(167,158,139,.14); }
.bloc img  { width:100%; aspect-ratio:4/3; object-fit:cover; }

.plaque {
  background: rgba(167,158,139,.14);
  border: 1px solid rgba(167,158,139,.4);
}

.entete { transition: color .3s ease, background .3s ease; }
.entete.sur-clair {
  color: var(--encre);
  background: rgba(232,227,214,.93);
  backdrop-filter: blur(6px);
}

.sans-js .garde { display:none; }

/* ---------- Bannière de page intérieure ---------- */

.banniere {
  position: relative;
  min-height: 62svh;
  display: grid;
  align-items: end;
  padding: var(--rythme) var(--marge) 3.5rem;
  color: var(--papier);
  background: var(--encre);
  overflow: hidden;
}

.banniere-fond {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}

.banniere-fond::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18,16,14,.55) 0%, rgba(18,16,14,.25) 45%, rgba(18,16,14,.8) 100%);
}

.banniere-corps { position: relative; max-width: 44rem; }

.banniere h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.6rem, 8vw, 6rem);
  line-height: .96;
  letter-spacing: -.02em;
  margin: 0;
}

.banniere h1 em { font-style: italic; }

.banniere p.chapeau {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  line-height: 1.5;
  margin: 1.6rem 0 0;
  opacity: .92;
}

/* ---------- Texte courant ---------- */

.prose { max-width: 44rem; }
.prose p { font-size: 1.02rem; line-height: 1.75; margin: 0 0 1.4rem; }
.prose p.exergue {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.6vw, 1.9rem);
  line-height: 1.42;
  margin-bottom: 2rem;
}
.prose h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  line-height: 1.24;
  margin: 3rem 0 1.2rem;
}

.a-completer {
  background: rgba(94,33,49,.1);
  border-bottom: 1px dashed var(--lie);
  padding: 0 .2em;
}

/* ---------- Galerie ---------- */

.galerie { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.galerie img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.galerie img.large { aspect-ratio: 3/2; grid-column: span 2; }

@media (max-width: 640px) { .galerie img.large { grid-column: span 1; aspect-ratio: 3/4; } }

/* ---------- Père & fille ---------- */

.duo-grille { display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:2.5rem; }
.duo-grille figure { margin:0; }
.duo-grille img { width:100%; aspect-ratio:3/2; object-fit:cover; }
.duo-grille figcaption { margin-top:.9rem; font-size:.78rem; letter-spacing:.06em; color:var(--vigne); }

/* ---------- Cercle ---------- */

.cercle { position:relative; overflow:hidden; }
.cercle-fond { position:absolute; inset:0; background-size:cover; background-position:center; opacity:.3; }
.cercle-corps { position:relative; }

/* ---------- Fiches (visites, journal) ---------- */

.fiches { display:grid; gap:2.5rem 1.5rem; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }

.fiche img { width:100%; aspect-ratio:4/3; object-fit:cover; margin-bottom:1.2rem; }
.fiche h3 { font-family:var(--serif); font-weight:400; font-size:1.35rem; margin:0 0 .5rem; }
.fiche .meta { font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--vigne); margin:0 0 .8rem; }
.fiche p { font-size:.95rem; line-height:1.65; margin:0 0 1rem; }

.article { border-top:1px solid rgba(18,16,14,.16); padding-top:1.6rem; }

/* ---------- Tableau des formules ---------- */

.formules { width:100%; border-collapse:collapse; margin-top:2rem; }
.formules th, .formules td { text-align:left; padding:1.1rem .8rem; border-bottom:1px solid rgba(18,16,14,.16); vertical-align:top; }
.formules th { font-family:var(--sans); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--vigne); font-weight:500; }
.formules td:first-child { font-family:var(--serif); font-size:1.1rem; }

/* ---------- Contact ---------- */

.contact-grille { display:grid; gap:3rem; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }

.champ { display:block; margin-bottom:1.6rem; }
.champ span { display:block; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--vigne); margin-bottom:.5rem; }
.champ input, .champ textarea, .champ select {
  width:100%; font:inherit; font-size:.95rem; padding:.7rem 0;
  background:none; border:0; border-bottom:1px solid rgba(18,16,14,.3); color:var(--encre);
}
.champ textarea { min-height:7rem; resize:vertical; }

.bouton {
  font-family:var(--sans); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
  padding:1rem 2.4rem; background:var(--encre); color:var(--papier);
  border:1px solid var(--encre); cursor:pointer; transition:background .25s ease, color .25s ease;
}
.bouton:hover { background:transparent; color:var(--encre); }

/* ==========================================================
   WhatsApp et assistant
   ========================================================== */

.flottants {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  align-items: flex-end;
}

.pastille {
  width: 54px; height: 54px;
  border-radius: 50%;
  display: grid; place-items: center;
  border: 0; cursor: pointer;
  box-shadow: 0 6px 20px rgba(18,16,14,.28);
  transition: transform .2s ease;
}

.pastille:hover { transform: translateY(-2px); }
.pastille svg { width: 26px; height: 26px; }

.pastille-whatsapp { background:#25D366; }
.pastille-whatsapp svg { fill:#fff; }

.pastille-assistant { background:var(--encre); color:var(--papier); font-family:var(--serif); font-size:1.5rem; }

/* ---------- Panneau de l'assistant ---------- */

.assistant {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: calc(clamp(1rem, 3vw, 2rem) + 130px);
  z-index: 121;
  width: min(360px, calc(100vw - 2rem));
  max-height: min(560px, 70svh);
  background: var(--papier);
  border: 1px solid rgba(18,16,14,.2);
  box-shadow: 0 14px 44px rgba(18,16,14,.26);
  display: none;
  flex-direction: column;
}

.assistant.ouvert { display: flex; }

.assistant-haut {
  background: var(--encre); color: var(--papier);
  padding: 1rem 1.2rem;
  display: flex; justify-content: space-between; align-items: center;
}

.assistant-haut strong { font-family:var(--serif); font-weight:400; font-size:1.05rem; }
.assistant-haut button { background:none; border:0; color:inherit; font-size:1.3rem; cursor:pointer; line-height:1; }

.assistant-fil { flex:1; overflow-y:auto; padding:1.2rem; display:flex; flex-direction:column; gap:.8rem; }

.bulle { max-width:85%; padding:.7rem .9rem; font-size:.9rem; line-height:1.55; }
.bulle-assistant { background:rgba(167,158,139,.22); align-self:flex-start; }
.bulle-visiteur { background:var(--encre); color:var(--papier); align-self:flex-end; }
.bulle a { color:inherit; }

.assistant-suggestions { display:flex; flex-wrap:wrap; gap:.5rem; padding:0 1.2rem 1rem; }

.assistant-suggestions button {
  font-family:var(--sans); font-size:.74rem;
  padding:.45rem .8rem; background:none; color:var(--encre);
  border:1px solid rgba(18,16,14,.3); cursor:pointer;
}

.assistant-suggestions button:hover { background:var(--encre); color:var(--papier); }

.assistant-saisie { display:flex; border-top:1px solid rgba(18,16,14,.2); }
.assistant-saisie input { flex:1; font:inherit; font-size:.9rem; padding:.9rem 1.2rem; border:0; background:none; color:var(--encre); }
.assistant-saisie button { background:none; border:0; padding:0 1.2rem; cursor:pointer; font-size:1.1rem; }

@media (max-width: 480px) {
  .assistant { bottom: calc(clamp(1rem,3vw,2rem) + 124px); }
}

/* ==========================================================
   Barre de navigation visible
   ========================================================== */

.entete { gap: 1.5rem; }

.entete-marque { font-family: var(--serif) !important; font-size: 1rem !important; letter-spacing: .02em !important; text-transform: none !important; }

.entete-nav { display: none; gap: 1.5rem; align-items: center; }

.entete-nav a {
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: .25rem;
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, opacity .25s ease;
}

.entete-nav a:hover { opacity: .6; }
.entete-nav a[aria-current="page"] { border-bottom-color: currentColor; }

@media (min-width: 1040px) {
  .entete-nav { display: flex; }
  #ouvrir-menu { display: none; }
}


/* ==========================================================
   Ajustements propres à Poppins
   ========================================================== */

.hero h1, .banniere h1, .cercle h2 { font-weight: 200; letter-spacing: -.035em; }
.hero h1 em, .banniere h1 em, .cercle h2 em { font-weight: 300; }
.menu-liste a { font-weight: 300; letter-spacing: -.02em; }
.garde-marque { font-weight: 300; letter-spacing: -.02em; }
.bloc h2, .prose h2, .fiche h3, .cuvee-nom { font-weight: 500; letter-spacing: -.01em; }
.citation, .presse blockquote, .prose p.exergue, .intro p { font-weight: 300; }
.formules td:first-child { font-weight: 500; }

/* ==========================================================
   Curseur plume
   ========================================================== */

body {
  cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAABmJLR0QA/wD/AP+gvaeTAAAEPklEQVRIieXVW0wcVRjA8W9mdqmVdpydZbksLGwLrRSiLXdaKxDrpVp7oS1K0BCNSDSVhrZpoAXl0ibaKKmJUmspamy00cZoiZe0YqCp2lCwUJbZXbpcZmd2d5bWBKNJwZ3L50NTY10QFqovfm/n4Zxf/ufhHID/eIh/62A/71yClFYEGubLirxcH6b/OMaSWqe77ZCHe0CV1XqgtPvlQEC72NNLJC9PggiT8W4AgNsGXvVyaQFZexuQWOMaHlVaW09Ax7nz5PXrE9D2xUnZaDSOAwCQ84U4jguTRK5BUaHb7Rayd1TshadLy3WRkSaYmJgEkiQhwRJLkkAMzRu8KtqX0XeqlzQNa4+++x61dXupru+yDd4/3gy5uZkAAGBNiAd9WBgFADaAeVypJDoKZFX53C+Nhe/as4+0O66A2RwNLUffBM4xCDU1BwARITsrDRBBpRYSF+Zc5hcdJZIwIJ/+7IRijY9FlqExK30l9nV3YtOhBoxgGWQZGlmGxk8+alE9o/3zxTj1WPMbWlQEiyxDY0HeanT0/4gv79/9J8QyNFotZvTyNtXvsVfOCZM8XJEkcOqxI03azYotG9fjsLMHy5596haMZWjcuaMMJcGuXBOc5tDLPPZcn3vg9w+Ov6WZjAZkGRoLNz2Kw84efGLbpiAsgmXw4g9nZcnNnQoZ8/m4eA9vu3b2q1NKdKQJWYbGzY8/gsPOHizaujEIYxkaS4oL0S/acczrWBMShtih84zaui73dMrLEq2zwiIjDNh1/ozs4fu/DblO8tgbvfyAtq5g7awwlqGxsqIcJYHTfG5HRkiYX+RyJIFTa6t33cA2PIwjgz/hti0bpsVSkpOQd11SJI/9SEgYYodOHOm3nWtvk01GAxbkrcYhZzeWFBdOi5mMBvy67aTiHe2Xxkd7mZDAMcGx2+ce0PLW5mB2xip02i7gC8+XTouxDI2Nr1ShJHCqJDryQ8JEkWM9vO23w00HMSU5Cfu6O7Fqz0v/iFVWlKNftKMk2qtCwgAAJNHxunuoV8nOXIld35/BVw/WTAsZDXdh9d4KlAQOx0T7oZnODvrxx0ZsUSpFCC2tH4bl5mQCzwuwv/bGQ/z3WRQeDvX11fjY+ocAAQ/EWFLrZgKDfgtNT76oBAKU1RoPsqJAXcNrU2L5efdBY/0+hWUNMhL4TExc6qczYUGFLpdrwUL9pHfwistIL14MxSXPwfj4L7dsyEhfBTsrytWszHRK1dR2Qk+Vmc0p7tlgQYWLFgRKgKDY+LhYePIvWExMFDy4rgCKtm9WkhKX6mRFcQJiTWzCPadnC01Z6OVtHCCkNL/TCgE5AIlLrZCZkSZbLLF6RE3RNPySpKiW6LgV3xAEEXzPoYB+3rkEKG3k5lpVtUlE1amjwrqQ1NoDqvpdQsK943NBpgQBAHy8bQVFQkDT3/FrdHTSz3Ot+H/PH+66dM26I6d1AAAAAElFTkSuQmCC") 4 24, auto;
}

a, button, summary, [role="button"], .cuvee, .assistant-suggestions button, .pastille {
  cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAABmJLR0QA/wD/AP+gvaeTAAAEPklEQVRIieXVW0wcVRjA8W9mdqmVdpydZbksLGwLrRSiLXdaKxDrpVp7oS1K0BCNSDSVhrZpoAXl0ibaKKmJUmspamy00cZoiZe0YqCp2lCwUJbZXbpcZmd2d5bWBKNJwZ3L50NTY10QFqovfm/n4Zxf/ufhHID/eIh/62A/71yClFYEGubLirxcH6b/OMaSWqe77ZCHe0CV1XqgtPvlQEC72NNLJC9PggiT8W4AgNsGXvVyaQFZexuQWOMaHlVaW09Ax7nz5PXrE9D2xUnZaDSOAwCQ84U4jguTRK5BUaHb7Rayd1TshadLy3WRkSaYmJgEkiQhwRJLkkAMzRu8KtqX0XeqlzQNa4+++x61dXupru+yDd4/3gy5uZkAAGBNiAd9WBgFADaAeVypJDoKZFX53C+Nhe/as4+0O66A2RwNLUffBM4xCDU1BwARITsrDRBBpRYSF+Zc5hcdJZIwIJ/+7IRijY9FlqExK30l9nV3YtOhBoxgGWQZGlmGxk8+alE9o/3zxTj1WPMbWlQEiyxDY0HeanT0/4gv79/9J8QyNFotZvTyNtXvsVfOCZM8XJEkcOqxI03azYotG9fjsLMHy5596haMZWjcuaMMJcGuXBOc5tDLPPZcn3vg9w+Ov6WZjAZkGRoLNz2Kw84efGLbpiAsgmXw4g9nZcnNnQoZ8/m4eA9vu3b2q1NKdKQJWYbGzY8/gsPOHizaujEIYxkaS4oL0S/acczrWBMShtih84zaui73dMrLEq2zwiIjDNh1/ozs4fu/DblO8tgbvfyAtq5g7awwlqGxsqIcJYHTfG5HRkiYX+RyJIFTa6t33cA2PIwjgz/hti0bpsVSkpOQd11SJI/9SEgYYodOHOm3nWtvk01GAxbkrcYhZzeWFBdOi5mMBvy67aTiHe2Xxkd7mZDAMcGx2+ce0PLW5mB2xip02i7gC8+XTouxDI2Nr1ShJHCqJDryQ8JEkWM9vO23w00HMSU5Cfu6O7Fqz0v/iFVWlKNftKMk2qtCwgAAJNHxunuoV8nOXIld35/BVw/WTAsZDXdh9d4KlAQOx0T7oZnODvrxx0ZsUSpFCC2tH4bl5mQCzwuwv/bGQ/z3WRQeDvX11fjY+ocAAQ/EWFLrZgKDfgtNT76oBAKU1RoPsqJAXcNrU2L5efdBY/0+hWUNMhL4TExc6qczYUGFLpdrwUL9pHfwistIL14MxSXPwfj4L7dsyEhfBTsrytWszHRK1dR2Qk+Vmc0p7tlgQYWLFgRKgKDY+LhYePIvWExMFDy4rgCKtm9WkhKX6mRFcQJiTWzCPadnC01Z6OVtHCCkNL/TCgE5AIlLrZCZkSZbLLF6RE3RNPySpKiW6LgV3xAEEXzPoYB+3rkEKG3k5lpVtUlE1amjwrqQ1NoDqvpdQsK943NBpgQBAHy8bQVFQkDT3/FrdHTSz3Ot+H/PH+66dM26I6d1AAAAAElFTkSuQmCC") 4 24, pointer;
}

input, textarea, select { cursor: text; }

@media (hover: none) { body, a, button { cursor: auto; } }

/* ==========================================================
   Le parcours « Toujours »
   ========================================================== */

.parcours { list-style: none; margin: 3rem 0 0; padding: 0; counter-reset: etape; }

.parcours li {
  counter-increment: etape;
  position: relative;
  padding: 0 0 2.4rem 3.6rem;
  border-left: 1px solid rgba(18,16,14,.18);
}

.parcours li:last-child { border-left-color: transparent; padding-bottom: 0; }

.parcours li::before {
  content: counter(etape, decimal-leading-zero);
  position: absolute;
  left: 0; top: -.15rem;
  transform: translateX(-50%);
  width: 2.4rem; height: 2.4rem;
  display: grid; place-items: center;
  background: var(--papier);
  border: 1px solid rgba(18,16,14,.28);
  border-radius: 50%;
  font-size: .66rem; letter-spacing: .06em;
  color: var(--vigne);
  transition: background .35s ease, color .35s ease, border-color .35s ease;
}

.parcours li:hover::before,
.parcours li:focus-within::before { background: var(--lie); border-color: var(--lie); color: var(--papier); }

.parcours h3 {
  font-size: clamp(1.5rem, 3.6vw, 2.4rem);
  font-weight: 300;
  font-style: italic;
  letter-spacing: -.02em;
  margin: 0 0 .4rem;
  transition: color .35s ease;
}

.parcours li:hover h3 { color: var(--lie); }

.parcours p { margin: 0; font-size: .92rem; line-height: 1.6; max-width: 34rem; color: var(--vigne); }

@media (min-width: 900px) {
  .parcours { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 2.5rem; }
  .parcours li { padding-bottom: 3rem; }
}

/* ==========================================================
   Fiches de hauteur égale — boutique et journal
   ========================================================== */

.fiches { grid-auto-rows: 1fr; }

.fiche { display: flex; flex-direction: column; height: 100%; }
.fiche p { margin-bottom: 1rem; }
.fiche .texte { min-height: calc(1.65em * 4); }
.fiche .cuvee-pied, .fiche .lien-fleche { margin-top: auto; }
.fiche .lien-fleche { align-self: flex-start; }

@media (max-width: 640px) { .fiche .texte { min-height: 0; } }

/* ==========================================================
   Apparitions au défilement
   ========================================================== */

.reveler { opacity: 0; transform: translateY(20px); }

.reveler.vu {
  opacity: 1; transform: none;
  transition: opacity .8s cubic-bezier(.2,.6,.2,1), transform .8s cubic-bezier(.2,.6,.2,1);
}

.reveler-lent.vu { transition-duration: 1.1s; }

.bloc img, .galerie img, .fiche img {
  transition: transform 1.2s cubic-bezier(.2,.6,.2,1);
}

.bloc:hover img, .galerie img:hover, .fiche:hover img { transform: scale(1.02); }

.bloc, .galerie img, .fiche img { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .reveler { opacity: 1; transform: none; transition: none; }
  .bloc img, .galerie img, .fiche img { transition: none; }
  .bloc:hover img, .galerie img:hover, .fiche:hover img { transform: none; }
}

/* ---------- Bande photographique ---------- */

.bande { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem; }
.bande img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }

/* ==========================================================
   Paires texte / image
   ========================================================== */

.paire { display: grid; gap: 2.5rem; align-items: start; }

@media (min-width: 900px) {
  .paire { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
  .paire.inverse .paire-image { order: 2; }
  .paire.inverse .paire-texte { order: 1; }
}

.paire-image { margin: 0; }

.paire-image img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }
.paire-image.paysage img { aspect-ratio: 4/3; }

.paire-image figcaption {
  margin-top: .9rem;
  font-size: .74rem;
  letter-spacing: .08em;
  color: var(--vigne);
}

.section-sombre .paire-image figcaption { color: var(--calcaire); }

.paire-texte h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  line-height: 1.24;
  letter-spacing: -.01em;
  margin: 0 0 1.2rem;
}

.paire-texte p { font-size: 1.02rem; line-height: 1.75; margin: 0 0 1.2rem; }
.paire-texte p:last-child { margin-bottom: 0; }

/* ==========================================================
   Les mots qui voyagent
   ========================================================== */

.mots { padding: var(--rythme) 0; overflow: hidden; }

.mots p {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 200;
  font-size: clamp(2.2rem, 9vw, 6rem);
  line-height: 1;
  letter-spacing: -.04em;
  margin: 0 0 .1em;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(var(--depart, -40px));
}

.mots p.vu {
  opacity: 1;
  transform: translateX(var(--arrivee, 0));
  transition: opacity 1s ease, transform 1.2s cubic-bezier(.2,.6,.2,1);
}

.mots p:nth-child(1) { --depart: -60px; padding-left: var(--marge); }
.mots p:nth-child(2) { --depart:  70px; padding-left: calc(var(--marge) + 12vw); color: var(--lie); }
.mots p:nth-child(3) { --depart: -50px; padding-left: calc(var(--marge) + 4vw); }
.mots p:nth-child(4) { --depart:  80px; padding-left: calc(var(--marge) + 18vw); color: var(--calcaire); }
.mots p:nth-child(5) { --depart: -70px; padding-left: calc(var(--marge) + 8vw); }

.mots p span {
  font-style: normal;
  font-size: .18em;
  letter-spacing: .24em;
  text-transform: uppercase;
  vertical-align: middle;
  margin-left: 1.2em;
  color: var(--vigne);
}

.section-sombre .mots p span { color: var(--calcaire); }

@media (prefers-reduced-motion: reduce) {
  .mots p { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================
   Ouverture : la plume écrit, les noms défilent, le site paraît
   ========================================================== */

.ouverture {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: var(--papier);
  overflow: hidden;
  display: none;
  cursor: none;
  transition: background 1s ease, opacity 1s ease;
}

.ouverture.active { display: block; }
.ouverture.noir   { background: var(--encre); }
.ouverture.sortie { opacity: 0; }

.ouverture video {
  position: absolute;
  top: 50%; left: 50%;
  min-width: 100%; min-height: 100%;
  width: auto; height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  transition: opacity .9s ease;
}

.ouverture.noir video { opacity: 0; }

/* ---- Le défilé des noms ---- */

.defile {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 var(--marge);
  pointer-events: none;
}

.defile span {
  grid-area: 1 / 1;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 200;
  font-size: clamp(2rem, 7.5vw, 5rem);
  letter-spacing: -.035em;
  line-height: 1;
  color: var(--papier);
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s ease, transform .9s cubic-bezier(.2,.6,.2,1);
}

.defile span.present { opacity: 1; transform: none; }
.defile span.passe   { opacity: 0; transform: translateY(-16px); }

/* ---- Passer ---- */

.ouverture-passer {
  position: absolute;
  right: clamp(1rem, 3vw, 2.5rem);
  bottom: clamp(1rem, 3vw, 2.5rem);
  z-index: 2;
  font-family: var(--sans);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: .8rem 1.6rem;
  background: rgba(18,16,14,.72);
  color: var(--papier);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease;
}

.ouverture-passer:hover { background: var(--encre); }
.ouverture.noir .ouverture-passer { background: transparent; border-color: rgba(232,227,214,.35); }
.ouverture.noir .ouverture-passer:hover { background: rgba(232,227,214,.12); }

@media (prefers-reduced-motion: reduce) {
  .ouverture { display: none !important; }
}


/* ==========================================================
   La citation du hero tient sur une seule ligne
   ========================================================== */

.hero .citation { max-width: none; }

.citation-ligne {
  display: block;
  white-space: nowrap;
  /* Taille de repli : le script affine ensuite au pixel près */
  font-size: clamp(.66rem, 3.05vw, 1.75rem);
}

/* Sur très petit écran, le hero rend sa marge à la citation */
@media (max-width: 480px) {
  .hero-contenu { padding-left: .6rem; padding-right: .6rem; }
}

/* ==========================================================
   Sélecteur de langue
   ========================================================== */

.langues { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }

.langues a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 21px;
  border: 1px solid rgba(232,227,214,.28);
  overflow: hidden;
  opacity: .55;
  transition: opacity .25s ease, border-color .25s ease, transform .25s ease;
}

.langues a:hover { opacity: 1; transform: translateY(-2px); }
.langues a[aria-current="true"] { opacity: 1; border-color: var(--papier); }

.langues svg { width: 100%; height: 100%; display: block; }

.langue-mot {
  font-family: var(--sans);
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--calcaire);
  margin-inline-end: .4rem;
}

/* ==========================================================
   Arabe : sens de lecture inversé
   ========================================================== */

[dir="rtl"] .parcours li {
  border-left: 0;
  border-right: 1px solid rgba(18,16,14,.18);
  padding: 0 3.6rem 2.4rem 0;
}

[dir="rtl"] .parcours li:last-child { border-right-color: transparent; }

[dir="rtl"] .parcours li::before {
  left: auto; right: 0;
  transform: translateX(50%);
}

[dir="rtl"] .mots p { padding-left: 0 !important; padding-right: var(--marge); text-align: right; }
[dir="rtl"] .mots p:nth-child(2) { padding-right: calc(var(--marge) + 12vw); }
[dir="rtl"] .mots p:nth-child(3) { padding-right: calc(var(--marge) + 4vw); }
[dir="rtl"] .mots p:nth-child(4) { padding-right: calc(var(--marge) + 18vw); }
[dir="rtl"] .mots p:nth-child(5) { padding-right: calc(var(--marge) + 8vw); }

[dir="rtl"] .mots p span { margin-left: 0; margin-right: 1.2em; }

[dir="rtl"] .flottants { right: auto; left: clamp(1rem, 3vw, 2rem); align-items: flex-start; }
[dir="rtl"] .assistant { right: auto; left: clamp(1rem, 3vw, 2rem); }
[dir="rtl"] .ouverture-passer { right: auto; left: clamp(1rem, 3vw, 2.5rem); }

[dir="rtl"] .toujours-liste li::after { margin-left: 0; margin-right: 1.2rem; }
[dir="rtl"] .cuvee-pied, [dir="rtl"] .fiche .lien-fleche { align-self: flex-end; }
[dir="rtl"] .formules th, [dir="rtl"] .formules td { text-align: right; }
[dir="rtl"] .menu-bas a { margin-left: 0; margin-right: 1.4rem; }

/* La citation du hero reste centrée quel que soit le sens */
[dir="rtl"] .hero-contenu, [dir="rtl"] .cercle { text-align: center; }

/* ==========================================================
   Écritures non latines
   ========================================================== */

html[lang="ar"] {
  --serif: "Noto Kufi Arabic", "Poppins", sans-serif;
  --sans:  "Noto Kufi Arabic", "Poppins", sans-serif;
}

html[lang="ar"] .hero h1,
html[lang="ar"] .banniere h1,
html[lang="ar"] .cercle h2 { font-weight: 300; letter-spacing: 0; }

/* L'italique n'existe pas en arabe : on ne la simule pas */
html[lang="ar"] em,
html[lang="ar"] .citation,
html[lang="ar"] .parcours h3,
html[lang="ar"] .mots p,
html[lang="ar"] .defile span { font-style: normal; }

html[lang="zh"] {
  --serif: "Noto Sans SC", "Poppins", sans-serif;
  --sans:  "Noto Sans SC", "Poppins", sans-serif;
}

html[lang="zh"] .hero h1,
html[lang="zh"] .banniere h1 { font-weight: 300; letter-spacing: .02em; }
html[lang="zh"] em, html[lang="zh"] .citation { font-style: normal; }

/* ==========================================================
   Drapeaux dans la barre d'en-tête
   ========================================================== */

.entete-langues { display: none; gap: .45rem; align-items: center; }

@media (min-width: 1040px) { .entete-langues { display: flex; } }

.entete-langues a {
  display: inline-flex;
  width: 26px; height: 18px;
  border: 1px solid currentColor;
  overflow: hidden;
  opacity: .45;
  transition: opacity .25s ease, transform .25s ease;
}

.entete-langues a:hover { opacity: 1; transform: translateY(-2px); }
.entete-langues a[aria-current="true"] { opacity: 1; }
.entete-langues svg { width: 100%; height: 100%; display: block; }

/* Dans le menu plein écran, les drapeaux gardent leur intitulé */
.menu-langues { display: flex; align-items: center; margin-bottom: 1.4rem; }

@media (min-width: 1040px) { .menu-langues { display: none; } }

/* ==========================================================
   Page de garde : devise et choix de la langue
   ========================================================== */

.garde-devise {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 200;
  font-size: clamp(.92rem, 2.4vw, 1.35rem);
  letter-spacing: .01em;
  line-height: 1.4;
  color: var(--calcaire);
  margin: -2.4rem 0 3.2rem;
  max-width: 32rem;
  margin-inline: auto;
}

.garde-langues {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .55rem;
  margin-top: 3rem;
}

.garde-langues a {
  display: inline-flex;
  width: 32px; height: 22px;
  border: 1px solid rgba(232,227,214,.3);
  overflow: hidden;
  opacity: .5;
  transition: opacity .25s ease, transform .25s ease, border-color .25s ease;
}

.garde-langues a:hover { opacity: 1; transform: translateY(-2px); }
.garde-langues a[aria-current="true"] { opacity: 1; border-color: var(--papier); }
.garde-langues svg { width: 100%; height: 100%; display: block; }

/* L'anglais de la devise ne bascule pas en écriture arabe */
html[lang="ar"] .garde-devise,
html[lang="zh"] .garde-devise { font-family: "Poppins", sans-serif; font-style: italic; }

/* ==========================================================
   Le seuil : choisir sa langue avant tout
   ========================================================== */

.seuil {
  position: fixed;
  inset: 0;
  z-index: 210;
  background: var(--encre);
  color: var(--papier);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 2rem 1.5rem;
  transition: opacity .7s ease;
}

.seuil[hidden] { display: none; }
.seuil.sortie  { opacity: 0; pointer-events: none; }
.sans-js .seuil { display: none; }

.seuil-marque {
  font-family: "Great Vibes", "Pinyon Script", cursive;
  font-weight: 400;
  font-size: clamp(1.8rem, 7vw, 4.4rem);
  line-height: 1.25;
  letter-spacing: .01em;
  white-space: nowrap;
  margin: 0 0 3rem;
}

/* La plume du logo, posée après le nom */
.seuil-marque img {
  display: inline-block;
  height: .62em;
  width: auto;
  margin-inline-start: .3em;
  vertical-align: .18em;
}

/* La punchline, qui passe d'une langue à l'autre */
.seuil-devise {
  display: grid;
  place-items: center;
  min-height: 4.6em;
  margin-bottom: 3.5rem;
  width: 100%;
}

.seuil-devise p {
  grid-area: 1 / 1;
  margin: 0;
  max-width: 30rem;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 200;
  font-size: clamp(1.15rem, 3.4vw, 2.1rem);
  line-height: 1.35;
  letter-spacing: -.02em;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s ease, transform .9s cubic-bezier(.2,.6,.2,1);
}

.seuil-devise p.present { opacity: 1; transform: none; }
.seuil-devise p.passe   { opacity: 0; transform: translateY(-10px); }

.seuil-devise p[lang="ar"] { font-family: "Noto Kufi Arabic", "Poppins", sans-serif; font-style: normal; }
.seuil-devise p[lang="zh"] { font-family: "Noto Sans SC", "Poppins", sans-serif; font-style: normal; }

/* Les drapeaux */
.seuil-langues {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .9rem;
  flex-wrap: wrap;
}

.seuil-langues a {
  display: grid;
  justify-items: center;
  gap: .5rem;
  text-decoration: none;
  color: inherit;
  opacity: .6;
  transition: opacity .25s ease, transform .25s ease;
}

.seuil-langues a:hover,
.seuil-langues a:focus-visible { opacity: 1; transform: translateY(-3px); }

.seuil-langues span.vignette {
  display: inline-flex;
  width: 46px; height: 32px;
  border: 1px solid rgba(232,227,214,.3);
  overflow: hidden;
}

.seuil-langues svg { width: 100%; height: 100%; display: block; }

.seuil-langues span.nom {
  font-family: var(--sans);
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--calcaire);
}

@media (prefers-reduced-motion: reduce) {
  .seuil, .seuil-devise p { transition: none; }
}


/* ==========================================================
   Les plumes qui tombent sur le seuil
   ========================================================== */

.plumes {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.plumes img {
  position: absolute;
  top: -18vh;
  width: var(--taille, 54px);
  height: auto;
  opacity: 0;
  will-change: transform, opacity;
  animation: chute var(--duree, 18s) linear var(--retard, 0s) infinite;
}

@keyframes chute {
  0%   { transform: translate3d(0, 0, 0) rotate(var(--depart, -20deg)); opacity: 0; }
  8%   { opacity: var(--force, .22); }
  25%  { transform: translate3d(var(--derive1, 40px), 30vh, 0) rotate(calc(var(--depart, -20deg) + 34deg)); }
  50%  { transform: translate3d(var(--derive2, -30px), 60vh, 0) rotate(calc(var(--depart, -20deg) - 18deg)); }
  75%  { transform: translate3d(var(--derive1, 40px), 90vh, 0) rotate(calc(var(--depart, -20deg) + 26deg)); }
  92%  { opacity: var(--force, .22); }
  100% { transform: translate3d(var(--derive2, -30px), 125vh, 0) rotate(calc(var(--depart, -20deg) + 8deg)); opacity: 0; }
}

/* Le contenu du seuil passe devant les plumes */
.seuil > div { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) { .plumes { display: none; } }

/* ==========================================================
   Les fonds devenus images
   ========================================================== */

.banniere-fond img, .cercle-fond img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.cercle-fond img { opacity: 1; }

/* ==========================================================
   Téléphone : ajustements
   ========================================================== */

html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }

@media (max-width: 760px) {

  /* Les images verticales mangeaient tout l'écran */
  .paire-image img { aspect-ratio: 4 / 3; }
  .cuvee img { aspect-ratio: 4 / 5; }
  .galerie img, .galerie img.large { aspect-ratio: 4 / 3; }
  .bande img { aspect-ratio: 3 / 2; }

  /* Un peu moins d'air : sur un écran étroit, le vide devient de la marche */
  :root { --rythme: 3.6rem; }
  .banniere { min-height: 54svh; padding-bottom: 2.4rem; }
  .hero { min-height: 440px; }

  /* Le tableau des formules se lit en fiches, pas en colonnes */
  .formules, .formules thead, .formules tbody,
  .formules tr, .formules th, .formules td { display: block; width: 100%; }

  .formules thead { display: none; }

  .formules tr {
    border: 1px solid rgba(18,16,14,.18);
    padding: 1.1rem 1rem;
    margin-bottom: 1rem;
  }

  .formules td { border: 0; padding: .35rem 0; }
  .formules td:first-child { font-size: 1.15rem; padding-bottom: .6rem; }

  .formules td:not(:first-child)::before {
    content: attr(data-intitule) " · ";
    font-size: .68rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--vigne);
  }

  /* Zone de frappe : au-dessous de 16 px, iOS zoome tout seul au clic */
  .champ input, .champ textarea, .champ select,
  .newsletter input, .assistant-saisie input { font-size: 16px; }

  /* Cibles tactiles */
  .entete a, .entete button { padding: .35rem 0; }
  .lien-fleche { padding-bottom: .5rem; }
  .pied li { margin-bottom: .8rem; }
  .langues a, .seuil-langues a { min-height: 32px; }

  /* Les mots qui voyagent ne doivent pas se faire couper */
  .mots p { font-size: clamp(1.6rem, 8vw, 3rem); }
  .mots p:nth-child(2), .mots p:nth-child(4) { padding-left: calc(var(--marge) + 6vw); }

  /* Le bandeau défilant, plus discret */
  .bandeau-piste span { font-size: 1.3rem; }

  /* L'assistant occupe la largeur utile */
  .assistant { width: calc(100vw - 1.6rem); right: .8rem; max-height: 66svh; }
  [dir="rtl"] .assistant { left: .8rem; right: auto; }

  /* Le seuil : drapeaux plus serrés, punchline plus compacte */
  .seuil-langues { gap: .7rem; }
  .seuil-langues span.vignette { width: 40px; height: 28px; }
  .seuil-devise { min-height: 5.6em; margin-bottom: 2.6rem; }
  .seuil-marque { margin-bottom: 2.2rem; }

  /* Le parcours en une colonne serrée */
  .parcours li { padding-left: 2.8rem; padding-bottom: 2rem; }
  .parcours h3 { font-size: 1.45rem; }
}

@media (max-width: 420px) {
  .cuvees-grille { grid-template-columns: 1fr 1fr; gap: 1.6rem .8rem; }
  .cuvee-nom { font-size: 1rem; }
  .cuvee-detail, .cuvee-pied { font-size: .74rem; }
  .plumes img { width: calc(var(--taille, 54px) * .7); }
}

/* Écran tactile : pas de survol, donc pas d'effet suspendu */
@media (hover: none) {
  .bloc:hover img, .galerie img:hover, .fiche:hover img { transform: none; }
  .langues a:hover, .entete-langues a:hover, .seuil-langues a:hover { transform: none; }
}