/* ★ CHOISIE le 08/11/2026 (G2 · 1.0) ★
   Portfolio gastronomie G2 « Service du soir » (07/11/2026) : sombre, accent vin, Gloock + Jost. */
:root {
  --nuit: #0f0e0e;
  --nuit-2: #151313;
  --nuit-3: #1b1919;
  --ligne: #2c2828;
  --ivoire: #ece8e4;
  --gris: #a39b96;
  --gris-2: #6e6763;
  --vin: #6b1d29;
  --vin-vif: #93303e;
  --vin-clair: #cc5d68;
  --titre: 'Gloock', 'Bodoni Moda', Georgia, serif;
  --sans: 'Jost', system-ui, sans-serif;
  --gouttiere: clamp(16px, 4vw, 56px);
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* emplacements photo */
  --emp-fond: #1a1818; --emp-lueur: #242121; --emp-trait: #2f2b2b;
  --emp-texte: #8a837e; --emp-titre: #ece8e4; --emp-accent: #cc5d68; --emp-etiquette: #a39b96;
  --emp-n: 400 26px/1 var(--titre); --emp-t: 400 22px/1.15 var(--titre); --emp-sans: var(--sans);
  --lb-fond: rgba(10, 9, 9, .97);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--nuit); }
body {
  margin: 0; background: var(--nuit); color: var(--ivoire);
  font: 300 16px/1.8 var(--sans); letter-spacing: .01em;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--titre); font-weight: 400; margin: 0; letter-spacing: -.01em; }
em { font-style: normal; color: var(--vin-clair); }
p { margin: 0; }

.cadre { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--gouttiere); }
.cadre--large { max-width: 1520px; }
.section { padding: clamp(100px, 13vw, 190px) 0; }

.kicker {
  display: inline-flex; align-items: center; gap: 14px;
  font: 400 11px/1 var(--sans); letter-spacing: .34em; text-transform: uppercase; color: var(--gris);
}
.kicker::before { content: ''; width: 7px; height: 7px; background: var(--vin-vif); transform: rotate(45deg); flex: none; }

/* ---------- NAV ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 22px var(--gouttiere); color: var(--ivoire);
  border-bottom: 1px solid rgba(236, 232, 228, .14);
  transition: background .5s ease, padding .5s var(--ease), border-color .5s ease;
}
.nav.is-plein { background: rgba(15, 14, 14, .94); padding-top: 14px; padding-bottom: 14px; border-color: var(--ligne); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.nav__gauche, .nav__droite { display: flex; align-items: center; gap: 34px; font: 400 11px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; }
.nav__droite { justify-content: flex-end; }
.nav__gauche a, .nav__lien { position: relative; padding: 6px 0; color: rgba(236,232,228,.82); transition: color .3s; }
.nav__gauche a:hover, .nav__lien:hover { color: var(--ivoire); }
.nav__gauche a::after, .nav__lien::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--vin-clair); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.nav__gauche a:hover::after, .nav__lien:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__marque { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; }
.nav__nom { font: 400 25px/1 var(--titre); letter-spacing: .02em; white-space: nowrap; }
.nav__sous { font: 400 9px/1 var(--sans); letter-spacing: .36em; text-transform: uppercase; color: var(--gris); }
.nav__rdv { background: var(--vin); color: var(--ivoire); padding: 13px 20px; transition: background .35s; }
.nav__rdv:hover { background: var(--vin-vif); }
.nav__burger { display: none; width: 40px; height: 40px; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; position: relative; }
.nav__burger span { position: absolute; left: 9px; right: 9px; height: 1px; background: currentColor; transition: transform .35s; }
.nav__burger span:first-child { top: 16px; } .nav__burger span:last-child { top: 23px; }
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.panneau { position: fixed; inset: 0; z-index: 40; padding-top: 80px; background: var(--nuit); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 22px; }
.panneau[hidden] { display: none; }
.panneau a { font: 400 34px/1.1 var(--titre); }
.panneau__rdv { margin-top: 18px; font: 400 11px/1 var(--sans) !important; letter-spacing: .26em; text-transform: uppercase; background: var(--vin); padding: 17px 26px; }

/* ---------- HERO ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hero__fond { position: absolute; inset: 0; width: 100%; height: 100%; animation: zoom 16s var(--ease) both; }
.hero .emp {
  --emp-etiquette-haut: 128px;
  background-color: var(--nuit);
  background-image: radial-gradient(ellipse 55% 45% at 50% 42%, #2b1c1e 0%, #171313 48%, var(--nuit) 78%);
}
@keyframes zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
/* ★ 08/11 (1.9) : burger (photo 8) en accueil, test « G2·8 » adopté : l'ombre ovale derrière le titre revient
   (la même que la 1.2, qu'il avait validée ; version téléphone plus bas). Historique : 1.4 = voile seul, sans photo. */
.hero__voile { position: absolute; inset: 0; background:
  radial-gradient(ellipse 60% 46% at 50% 50%, rgba(15,14,14,.66) 0%, rgba(15,14,14,.48) 45%, rgba(15,14,14,0) 100%),
  linear-gradient(180deg, rgba(15,14,14,.7) 0%, rgba(15,14,14,.15) 32%, rgba(15,14,14,.2) 62%, rgba(15,14,14,.88) 100%); }
.hero__contenu { position: relative; max-width: 1180px; padding: 140px var(--gouttiere) 160px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 30px; }
.hero__lieu { font: 400 11px/1 var(--sans); letter-spacing: .38em; text-transform: uppercase; color: var(--gris); }
.hero h1 { font-size: clamp(50px, 8.2vw, 126px); line-height: .98; text-wrap: balance; }
.hero h1 em { display: block; }
/* 09/11 (1.29) : titre « L’émotion commence / bien avant la première bouchée. » sur 2 lignes à sa demande (« Réduire à 2 lignes »).
   Taille calculée pour que la ligne rose tienne dans la largeur du bloc (ligne rose ≈ 14,25 × la taille de police, marge comprise : 14,6).
   ≥ 800 px seulement ; au-dessous, le titre garde l'ancienne règle et passe sur plusieurs lignes. Ancienne taille : clamp(50px, 8.2vw, 126px). */
@media (min-width: 800px) {
  .hero h1 { font-size: min(73px, calc((min(1180px, 100vw) - 2 * var(--gouttiere)) / 14.6)); }
}
.hero__contenu p { max-width: 500px; color: rgba(236,232,228,.78); }
.hero__contenu > * { animation: monte 1.5s var(--ease) both; }
.hero__contenu > :nth-child(2) { animation-delay: .2s; }
.hero__contenu > :nth-child(3) { animation-delay: .45s; }
@keyframes monte { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.hero__defiler { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 14px; font: 400 10px/1 var(--sans); letter-spacing: .34em; text-transform: uppercase; color: var(--gris); }
.hero__defiler i { width: 1px; height: 48px; background: linear-gradient(transparent, var(--vin-clair)); animation: descend 2.6s ease-in-out infinite; transform-origin: top; }
@keyframes descend { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.hero__pause { position: absolute; left: var(--gouttiere); bottom: 30px; z-index: 2; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; background: rgba(15,14,14,.5); border: 1px solid var(--ligne); color: var(--ivoire); font: 400 10px/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; cursor: pointer; }
.hero__pause-ico { width: 10px; height: 11px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.hero__pause.en-pause .hero__pause-ico { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }

/* ---------- À PROPOS ---------- */
.apropos { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(48px, 8vw, 140px); align-items: center; }
.apropos__portrait { margin: 0; position: relative; }
.apropos__portrait .emp { position: relative; z-index: 1; }
.apropos__portrait::before { content: ''; position: absolute; top: 22px; left: -22px; right: 22px; bottom: 46px; border: 1px solid var(--vin-vif); }
.apropos__portrait .emp > img { filter: grayscale(1) contrast(1.04); }
.apropos__portrait figcaption { position: relative; margin-top: 18px; font: 400 10px/1.6 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--gris-2); }
.apropos__texte { display: flex; flex-direction: column; gap: 22px; }
.apropos__texte h2, .entete h2 { font-size: clamp(42px, 5.4vw, 82px); line-height: 1.02; }
.apropos__texte h2 { margin: 8px 0 2px; }
.h2-sous { display: block; margin-top: 12px; font: 300 clamp(20px, 1.8vw, 24px)/1.4 var(--sans); letter-spacing: .01em; color: var(--ivoire); }
.chapo { font: 400 clamp(21px, 1.9vw, 26px)/1.35 var(--titre); color: var(--vin-clair); }
.apropos__texte p:not(.chapo) { color: var(--gris); max-width: 580px; }
.valeurs { list-style: none; margin: 14px 0 0; padding: 24px 0 0; border-top: 1px solid var(--ligne); display: flex; flex-wrap: wrap; gap: 12px 0; font: 400 11px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--ivoire); }
.valeurs li { display: flex; align-items: center; }
.valeurs li + li::before { content: ''; width: 5px; height: 5px; background: var(--vin-vif); transform: rotate(45deg); margin: 0 18px; }

/* ---------- MANIFESTE ---------- */
.manifeste { background: var(--nuit-2); padding: clamp(110px, 14vw, 200px) var(--gouttiere); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 38px; border-top: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne); }
.ornement { display: flex; align-items: center; gap: 16px; }
.ornement::before, .ornement::after { content: ''; width: 56px; height: 1px; background: var(--vin-vif); }
.ornement i { width: 8px; height: 8px; background: var(--vin-vif); transform: rotate(45deg); }
.manifeste blockquote { margin: 0; max-width: 1060px; font: 400 clamp(28px, 3.7vw, 54px)/1.22 var(--titre); text-wrap: balance; }
.signature { font: 400 11px/1 var(--sans); letter-spacing: .34em; text-transform: uppercase; color: var(--gris); }

/* ---------- EN-TÊTES ---------- */
.entete { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 60px; align-items: end; margin-bottom: clamp(56px, 7vw, 100px); }
.entete .kicker { grid-column: 1 / -1; }
.entete p { justify-self: end; max-width: 440px; color: var(--gris); }
.entete--centre { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.entete--centre .kicker { justify-self: center; }
.entete--centre p { justify-self: center; }

/* ---------- FILM ---------- */
.section--film { background: linear-gradient(180deg, var(--nuit) 0%, #120f10 100%); }
.film video { background: #000; }
.film .emp { --emp-n: 400 26px/1 var(--titre); }

/* ---------- AU FIL DU SERVICE ---------- */
.moment { padding: clamp(48px, 6vw, 90px) 0; border-top: 1px solid var(--ligne); }
.moment:last-child { padding-bottom: 0; }
/* 08/11 : à sa demande, les heures (17 h…23 h), titres et descriptions des 4 moments sont retirés ; les photos occupent toute la largeur, centrées.
   Sauvegardes : _sauvegardes/g2-index-20261108-avant-retrait-heures.html et g2-style-20261108-avant-retrait-heures.css */
.moment__grille { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(10px, 1.2vw, 18px); }
.m-a { grid-column: span 4; }
.m-b { grid-column: span 2; }
.m-c, .m-d { grid-column: span 3; }
.moment--inverse .m-b { order: -1; }
/* 08/11 (1.5) : bloc de 3 photos = une panoramique sur toute la largeur, puis deux côte à côte */
.m-e { grid-column: span 6; }
/* 1.6 : le canard (photo centrée) a remplacé les pâtes en panoramique : cadrage centré, l'ancien réglage 50% 70% est retiré */

/* ---------- LA CARTE ---------- */
.section--carte { background: var(--nuit-2); border-top: 1px solid var(--ligne); }
.carte { position: relative; max-width: 900px; margin: 0 auto; padding: clamp(56px, 7vw, 96px) clamp(24px, 6vw, 88px); border: 1px solid var(--vin-vif); background: var(--nuit); }
.carte::before { content: ''; position: absolute; inset: 9px; border: 1px solid var(--vin); pointer-events: none; }
.carte__tete { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px; margin-bottom: clamp(44px, 5vw, 70px); }
.carte__tete h2 { font-size: clamp(54px, 7vw, 96px); line-height: 1; }
.carte__tete p { max-width: 460px; color: var(--gris); }
.carte__cours { margin-top: clamp(40px, 5vw, 60px); }
.carte__titre { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 30px; font: 400 11px/1 var(--sans); letter-spacing: .36em; text-transform: uppercase; color: var(--vin-clair); }
.carte__titre::before, .carte__titre::after { content: ''; width: 40px; height: 1px; background: var(--vin-vif); }
.carte ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 28px; }
.carte__ligne { display: flex; align-items: baseline; gap: 14px; }
.carte__nom { font: 400 clamp(21px, 2.2vw, 28px)/1.2 var(--titre); }
.carte__points { flex: 1; min-width: 24px; border-bottom: 1px dotted var(--gris-2); transform: translateY(-5px); }
.carte__type { font: 400 10px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--gris); white-space: nowrap; }
.carte li p { margin-top: 8px; max-width: 600px; color: var(--gris); font-size: 15px; line-height: 1.7; }
.carte__pied { margin-top: clamp(48px, 6vw, 70px); padding-top: 30px; border-top: 1px solid var(--ligne); text-align: center; font: 400 19px/1.4 var(--titre); color: var(--ivoire); }

/* ---------- CONTACT ---------- */
.contact { position: relative; min-height: 90vh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
.contact__fond { position: absolute; inset: 0; width: 100%; height: 100%; }
.contact .emp { --emp-etiquette-haut: 44px; background-color: var(--nuit); background-image: radial-gradient(ellipse 60% 50% at 50% 55%, #261a1c 0%, var(--nuit) 75%); }
/* 08/11 (1.2) : centre assombri derrière le texte (l'assiette blanche gênait la lecture). Avant : rgba(15,14,14,.6) uni. */
.contact__voile { position: absolute; inset: 0; background:
  radial-gradient(ellipse 50% 52% at 50% 50%, rgba(15,14,14,.62) 0%, rgba(15,14,14,.42) 50%, rgba(15,14,14,0) 100%),
  rgba(15,14,14,.6); }
.contact__contenu { position: relative; max-width: 1000px; padding: 120px var(--gouttiere); display: flex; flex-direction: column; align-items: center; gap: 28px; }
.contact h2 { font-size: clamp(44px, 6vw, 92px); line-height: 1.02; text-wrap: balance; }
.contact h2 em { display: block; }
.contact p { max-width: 500px; color: rgba(236,232,228,.8); }
.bouton { margin-top: 12px; display: inline-flex; align-items: center; gap: 14px; padding: 21px 34px; background: var(--vin); color: var(--ivoire); font: 400 11px/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; transition: background .35s; }
.bouton::after { content: ''; width: 28px; height: 1px; background: currentColor; transition: width .4s var(--ease); }
.bouton:hover { background: var(--vin-vif); }
.bouton:hover::after { width: 42px; }

/* ---------- PIED ---------- */
.pied { background: var(--nuit); padding: clamp(80px, 10vw, 130px) 0 34px; border-top: 1px solid var(--ligne); }
.pied__marque { font: 400 clamp(40px, 7vw, 104px)/1 var(--titre); text-align: center; padding-bottom: clamp(56px, 7vw, 90px); border-bottom: 1px solid var(--ligne); }
.pied__grille { display: grid; grid-template-columns: 1fr auto 1fr 1fr; gap: 30px; padding: 44px 0; border-bottom: 1px solid var(--ligne); } /* 08/11 : colonne de l'email à sa largeur, l'email tient sur une ligne */
.pied__grille div { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pied__grille span { font: 400 10px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--gris-2); }
.pied__grille a { font: 400 19px/1.3 var(--titre); overflow-wrap: anywhere; transition: color .3s; }
.pied__grille a:hover { color: var(--vin-clair); }
.pied__grille a[href^="mailto"] { white-space: nowrap; overflow-wrap: normal; }
.pied__bas { display: flex; justify-content: space-between; padding-top: 26px; font: 400 10px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--gris-2); }

.version { position: fixed; right: 10px; bottom: 8px; z-index: 60; font: 400 10px/1 var(--sans); letter-spacing: .1em; color: var(--gris-2); }
a:focus-visible, button:focus-visible, [data-zoom]:focus-visible { outline: 2px solid var(--vin-clair); outline-offset: 3px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 980px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav__gauche, .nav__lien, .nav__rdv { display: none; }
  .nav__marque { align-items: flex-start; text-align: left; }
  .nav__burger { display: block; }
  .apropos { grid-template-columns: 1fr; }
  .apropos__portrait { max-width: 440px; margin-left: 22px; }
  .entete { grid-template-columns: 1fr; }
  .entete p { justify-self: start; }
  .entete--centre p { justify-self: center; }
  .pied__grille { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .nav { padding: 16px 16px 16px 18px; }
  .nav.is-plein { padding-top: 12px; padding-bottom: 12px; }
  .nav__nom { font-size: 21px; }
  .nav__sous { font-size: 8px; letter-spacing: .28em; }
  .hero__contenu { padding-bottom: 130px; }
  .moment__grille { grid-template-columns: 1fr 1fr; }
  .m-a, .m-d { grid-column: span 2; }
  .m-b, .m-c { grid-column: span 1; aspect-ratio: 4 / 5; }
  .moment--inverse .m-b { order: 0; }
  /* bloc de 3 au téléphone : les 3 photos l'une sous l'autre, en 3:2 (pas de case vide) */
  .m-e, .moment--trio .m-c, .moment--trio .m-d { grid-column: span 2; aspect-ratio: 3 / 2; }
  .carte { padding-left: 20px; padding-right: 20px; }
  .carte__ligne { flex-wrap: wrap; row-gap: 6px; }
  .carte__points { display: none; }
  .carte__type { flex-basis: 100%; order: -1; color: var(--vin-clair); }
  .pied__grille { grid-template-columns: 1fr; }
  .pied__grille a { display: inline-flex; align-items: center; min-height: 44px; }
  .pied__bas { flex-direction: column; gap: 12px; }
  .hero__pause-txt { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
/* 08/11 (1.2) : au téléphone la photo est agrandie, l'ombre derrière les titres est renforcée.
   (1.4 : version téléphone de l'accueil retirée ; ★ 1.9 : remise, le burger est en accueil) */
@media (max-width: 720px) {
  .hero__voile { background:
    radial-gradient(ellipse 75% 42% at 50% 52%, rgba(15,14,14,.74) 0%, rgba(15,14,14,.58) 50%, rgba(15,14,14,0) 100%),
    linear-gradient(180deg, rgba(15,14,14,.7) 0%, rgba(15,14,14,.15) 32%, rgba(15,14,14,.2) 62%, rgba(15,14,14,.88) 100%); }
  .contact__voile { background:
    radial-gradient(ellipse 80% 48% at 50% 50%, rgba(15,14,14,.66) 0%, rgba(15,14,14,.5) 50%, rgba(15,14,14,0) 100%),
    rgba(15,14,14,.6); }
}
/* 08/11 (1.11) : numéros des photos RETIRÉS à sa demande (« tu pourras supprimer les numéros des photos »).
   Le bloc des pastilles est dans _sauvegardes/g2-style-20261108-avant-retrait-numeros.css */
/* 08/11 (1.12) : bouton de langue FR / EN en haut à droite (à sa demande). Même typographie que les liens du menu :
   la langue active en ivoire, soulignée de vin ; l'autre en gris. */
.langue { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; background: none; border: 0; cursor: pointer; color: var(--gris); font: 400 11px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; }
.langue span { position: relative; padding: 6px 0; transition: color .3s; }
.langue i { font-style: normal; color: var(--gris-2); letter-spacing: 0; }
.langue span.est-active { color: var(--ivoire); }
.langue span.est-active::after { content: ''; position: absolute; left: 0; right: .24em; bottom: 0; height: 1px; background: var(--vin-clair); }
.langue:hover span:not(.est-active) { color: rgba(236,232,228,.82); }
@media (max-width: 980px) { .nav__droite { gap: 18px; } }
/* 08/11 (1.12) : le menu du haut manquait de place entre 980 et 1400 px (chevauchement déjà présent avant le bouton FR / EN,
   aggravé par lui). Au-dessus de 1400 px : rien ne change. 1240-1400 px : mots un peu moins espacés.
   Sous 1240 px : menu en bouton ☰ comme au téléphone (data-burger="1240" sur .nav pour portfolio.js ; le français tient à partir de 1200 px). */
@media (max-width: 1400px) {
  .nav__gauche, .nav__droite { gap: 22px; letter-spacing: .18em; }
  .langue { letter-spacing: .18em; }
  .nav__rdv { padding: 12px 16px; }
}
@media (max-width: 1240px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav__gauche, .nav__lien, .nav__rdv { display: none; }
  .nav__marque { align-items: flex-start; text-align: left; }
  .nav__burger { display: block; }
  .nav__droite { gap: 18px; }
}
/* 08/11 (1.15) : citation sur UNE seule ligne, à sa demande (« mets-la sur la même ligne »).
   Sur ordinateur (> 980 px) : pas de retour à la ligne, taille calculée pour tenir dans la largeur
   (le français fait 42,3 em de long ; 45 = petite marge), au plus 54 px comme avant.
   Au téléphone et sur tablette : une seule ligne serait illisible, la citation passe à la ligne comme avant.
   Avant : 3 lignes à 53 px (sauvegarde _sauvegardes/g2-style-20261108-avant-citation-une-ligne.css). */
@media (min-width: 981px) {
  .manifeste blockquote { max-width: none; white-space: nowrap; text-wrap: nowrap; font-size: min(54px, calc((100vw - 2 * var(--gouttiere)) / 45)); }
}
/* 08/11 (1.16) : les 5 valeurs (Sens du détail · Transparent · Flexible · Honnête · Passionné) sur UNE ligne, à sa demande.
   Au-dessus de 720 px : pas de retour à la ligne, lettres un peu moins espacées (.24em → .18em), losanges resserrés,
   et la taille s'ajuste à la largeur de la colonne (11 px au plus ; la version anglaise fait 50,3 em de long, 51 = marge).
   Au téléphone (≤ 720 px) : une ligne serait illisible, deux lignes comme avant. */
.apropos__texte { container-type: inline-size; }
@media (min-width: 721px) {
  .valeurs { flex-wrap: nowrap; white-space: nowrap; letter-spacing: .18em; font-size: min(11px, calc(100cqi / 51)); }
  .valeurs li + li::before { width: .45em; height: .45em; margin: 0 1.1em; }
}
/* ================= ANIMATION D'ARRIVÉE (08/11, 1.17) =================
   « B · Mot à mot » choisie parmi 4 propositions (test : _sauvegardes/g2-test-animations-CHOISI-B-20261108/)
   + arrivée du menu du haut, à sa demande (« ajoute une animation sur le header »). Logique dans anim.js.
   Rien n'est caché en dur : tout part d'une image-clé `from` ; sans anim.js, l'apparition d'origine (monte) reste. */
.mot { display: inline-block; white-space: nowrap; vertical-align: top; }
.mot__in { display: inline-block; }
body.prepare .hero__contenu, body.prepare .hero__fond, body.prepare .nav-entree { visibility: hidden; }
body.joue .hero__contenu > * { animation: none; }
body.joue .hero__fond { animation: arrivee-photo 2.4s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes arrivee-photo { from { filter: brightness(.12); transform: scale(1.06); } to { filter: none; transform: none; } }
body.joue .hero h1 .mot__in { animation: arrivee-mot 1.2s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(.5s + var(--i) * 110ms); }
@keyframes arrivee-mot { from { opacity: 0; filter: blur(14px); transform: translateY(.25em); } to { opacity: 1; filter: none; transform: none; } }
body.joue .hero__lieu { animation: arrivee-fondu 1.2s cubic-bezier(.16, 1, .3, 1) .2s both; }
body.joue .hero__contenu > p { animation: arrivee-fondu 1.2s cubic-bezier(.16, 1, .3, 1) 1.5s both; }
@keyframes arrivee-fondu { from { opacity: 0; filter: blur(8px); } to { opacity: 1; filter: none; } }
/* menu du haut : chaque élément descend légèrement en sortant du flou, de gauche à droite */
body.joue .nav-entree { animation: arrivee-menu 1s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(.35s + var(--n) * 80ms); }
@keyframes arrivee-menu { from { opacity: 0; filter: blur(8px); transform: translateY(-12px); } to { opacity: 1; filter: none; transform: none; } }
/* 08/11 (1.19) : photos « en volet » RETIRÉES à sa demande (« supprime le défilement des photos (animation) »).
   Le code est gardé dans _sauvegardes/g2-style-20261108-avec-volet.css et g2-anim-20261108-avec-volet.js */
/* 08/11 (1.23) : menus de production (À la carte, Dégustation, Grand cru) d'après sa capture :
   numéro devant le nom, sous-titre de rubrique, liste du contenu (petit trait vin), ligne « Idéal pour ». */
.carte__sous { margin: -14px 0 30px; text-align: center; font: 400 10px/1.4 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--gris); }
.carte__num { display: inline-block; margin-right: 14px; font: 400 11px/1 var(--sans); letter-spacing: .2em; color: var(--vin-clair); vertical-align: .35em; }
.carte .carte__contenu { gap: 4px; margin-top: 12px; }
.carte__contenu li { position: relative; padding-left: 20px; font-size: 15px; line-height: 1.6; color: var(--ivoire); }
.carte__contenu li::before { content: ''; position: absolute; left: 0; top: .8em; width: 9px; height: 1px; background: var(--vin-clair); }
.carte li p.carte__ideal { margin-top: 10px; font-size: 14px; }
.carte__ideal span { color: var(--ivoire); }