/* =====================================================================
   25e Salon du Vin de Thionville : feuille de style (refonte du 24/10/2026)
   Registre : l'étiquette de vin. Coins coupés, filets d'or doublés, papier vergé,
   la typo de l'affiche (Abril Fatface) et ses trois couleurs : grenat, or, crème.
   Pages larges et denses, fonds vidéo sous chaque en-tête.
   Sans JS ou en animations réduites (html.doux) : tout est visible et immobile.
   ===================================================================== */

:root {
  --lie: #170A0D;
  --lie-2: #210E12;
  --bordeaux: #3A0F17;
  --bordeaux-2: #2A0B11;
  --grenat: #AF1D35;
  --grenat-clair: #C9374D;
  --or: #D2A24C;
  --or-clair: #EDD886;
  --or-sombre: #8A6220;
  --creme: #F4EADB;
  --creme-2: #EADCC6;
  --papier: #FBF5EB;
  --encre: #2A0F14;
  --encre-2: #5B2A31;
  --gris: #6D5A57;
  --filet: rgba(210, 162, 76, .38);
  --filet-sombre: rgba(42, 15, 20, .16);
  --clair: #F6EEE2;
  --clair-2: rgba(246, 238, 226, .8);
  --clair-3: rgba(246, 238, 226, .6);

  /* compatibilité avec salle.css (plan de salle) */
  --nuit: var(--lie); --encre-2-plan: var(--encre-2); --texte: #4A3B3C; --texte-doux: var(--gris);
  --or-moyen: #DDB25E; --or-texte: var(--or-sombre); --or-filet: var(--filet); --filet-clair: #E3D3BC;
  --rouge: var(--grenat); --creme-3: var(--creme-2);

  --f-affiche: 'Abril Fatface', 'Playfair Display', Georgia, serif;
  --f-titre: 'Abril Fatface', 'Playfair Display', Georgia, serif;
  --f-italique: 'Playfair Display', Georgia, serif;
  --f-texte: 'Hanken Grotesk', 'Segoe UI', system-ui, sans-serif;

  --largeur: 1560px;
  --marge: max(clamp(16px, 3.6vw, 56px), env(safe-area-inset-left), env(safe-area-inset-right));
  --h-entete: 76px;
  --rythme: clamp(48px, 5.2vw, 76px);
  --gouttiere: clamp(14px, 1.6vw, 24px);
  --coin: 14px;

  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-quint: cubic-bezier(.22, 1, .36, 1);
  --e-out: var(--ease-expo);
  --d-survol: 220ms;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  /* papier vergé des étiquettes : lignes serrées + fils de chaîne */
  --verge: repeating-linear-gradient(0deg, rgba(90, 50, 30, .016) 0 1px, transparent 1px 4px),
           repeating-linear-gradient(90deg, rgba(90, 50, 30, .014) 0 1px, transparent 1px 34px);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--h-entete) + 12px); overflow-x: clip; }
body { margin: 0; overflow-x: clip; background: var(--lie); color: var(--encre); font: 400 16px/1.6 var(--f-texte); -webkit-font-smoothing: antialiased; font-feature-settings: "kern", "liga"; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { list-style: none; padding: 0; }
sup { font-size: .55em; line-height: 0; vertical-align: .9em; }
::selection { background: var(--grenat); color: var(--clair); }
:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; border-radius: 2px; }
.sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.afournir { color: #E04A5F; font-weight: 600; font-size: .92em; }
.entree-carte .afournir, .solid .afournir, .chiffre--grenat .afournir { color: var(--or-clair); }
.aller { position: fixed; left: 12px; top: -60px; z-index: 300; padding: 10px 16px; background: var(--or); color: var(--lie); font-weight: 700; border-radius: 4px; transition: top .2s; }
.aller:focus { top: 12px; }
.conteneur { width: min(100%, calc(var(--largeur) + 2 * var(--marge))); margin-inline: auto; padding-inline: var(--marge); }

/* ---------- Typographie ---------- */
.surtitre { display: inline-flex; align-items: center; gap: 12px; font: 700 12px/1.2 var(--f-texte); letter-spacing: .22em; text-transform: uppercase; color: var(--or-sombre); }
.surtitre::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.sombre .surtitre, .surtitre--clair { color: var(--or); }
.titre { font: 400 clamp(34px, 4.2vw, 64px)/1 var(--f-titre); letter-spacing: -.005em; color: var(--encre); text-wrap: balance; }
.titre em, .titre-page em { font-style: normal; color: var(--grenat); }
.sombre .titre { color: var(--clair); }
.sombre .titre em, .titre-page em { color: var(--or-clair); }
.titre--moyen { font-size: clamp(28px, 2.6vw, 40px); }
.texte { max-width: 62ch; color: var(--encre-2); font-size: 16.5px; }
.sombre .texte { color: var(--clair-2); }
.texte + .texte { margin-top: 12px; }
.chapo { max-width: 56ch; font-size: clamp(16px, 1.2vw, 18.5px); line-height: 1.55; }
.num { font-variant-numeric: tabular-nums lining-nums; }

/* ---------- Boutons ---------- */
.btn { --bg: var(--grenat); --fg: var(--clair); position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 24px; background: var(--bg); color: var(--fg); font: 700 14px/1 var(--f-texte); letter-spacing: .06em; text-transform: uppercase;
  border-radius: 2px;
  transition: transform var(--d-survol) var(--ease-quint), background-color var(--d-survol) ease, color var(--d-survol) ease; }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, rgba(255, 240, 200, .38) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s var(--ease-expo); }
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: scale(.97); }
.btn .ic { font-size: 17px; transition: transform var(--d-survol) var(--ease-quint); }
.btn:hover .ic--fleche, .btn:hover .ic--chevron { transform: translateX(4px); }
.btn--or { --bg: linear-gradient(180deg, var(--or-clair), var(--or)); --fg: var(--lie); background: linear-gradient(180deg, var(--or-clair), var(--or)); }
.btn--grenat:hover { --bg: var(--grenat-clair); }
.btn--trait { --bg: transparent; --fg: currentColor; box-shadow: inset 0 0 0 1px currentColor; }
.btn--trait:hover { --bg: var(--encre); --fg: var(--clair); }
.sombre .btn--trait:hover, .btn--trait-clair:hover { --bg: var(--clair); --fg: var(--lie); }
.btn--petit { min-height: 42px; padding: 0 18px; font-size: 12.5px; }
.lien-fleche { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; letter-spacing: .02em; color: var(--grenat); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 3px; transition: background-size .35s var(--ease-expo); }
.lien-fleche:hover { background-size: 0 1px; background-position: 100% 100%; }
.lien-fleche .ic { transition: transform var(--d-survol) var(--ease-quint); }
.lien-fleche:hover .ic { transform: translateX(4px); }
.sombre .lien-fleche { color: var(--or-clair); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- Barre de lecture, en-tête, menu ---------- */
.progression { position: fixed; inset: 0 0 auto; z-index: 120; height: 2px; pointer-events: none; }
.progression span { display: block; height: 100%; background: linear-gradient(90deg, var(--or), var(--or-clair)); transform: scaleX(0); transform-origin: 0 50%; }
.entete { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--h-entete); color: var(--clair); transition: background-color .4s ease, backdrop-filter .4s ease, box-shadow .4s ease, transform .5s var(--ease-expo); }
.entete::before { content: ""; position: absolute; inset: 0 0 -40px; z-index: -1; background: linear-gradient(180deg, rgba(23, 10, 13, .72), transparent); pointer-events: none; transition: opacity .4s; }
.entete--flou { background: rgba(23, 10, 13, .72); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); box-shadow: 0 1px 0 var(--filet); }
.entete--flou::before { opacity: 0; }
.entete__in { height: 100%; display: flex; align-items: center; gap: clamp(14px, 2vw, 32px); }
.marque { display: flex; align-items: center; gap: 14px; flex: none; }
.marque__logo { width: auto; height: 44px; }
.marque__filet { width: 1px; height: 30px; background: var(--filet); }
.marque__rotary { height: 30px; width: auto; opacity: .92; }
.menu { margin-left: auto; }
.menu ul { display: flex; gap: clamp(4px, .9vw, 14px); }
.menu a { position: relative; display: block; padding: 10px 8px; font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--clair-2); transition: color var(--d-survol); }
.menu a::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 4px; height: 1px; background: var(--or); transform: scaleX(0); transform-origin: 100% 50%; transition: transform .4s var(--ease-expo); }
.menu a:hover { color: var(--clair); }
.menu a:hover::after, .menu a[aria-current="page"]::after { transform: scaleX(1); transform-origin: 0 50%; }
.menu a[aria-current="page"] { color: var(--or-clair); }
.entete__cta { flex: none; }
.burger { display: none; width: 46px; height: 46px; margin-left: auto; place-items: center; border: 1px solid var(--filet); }
.burger__traits { position: relative; width: 20px; height: 10px; }
.burger__traits span { position: absolute; left: 0; right: 0; height: 1.6px; background: var(--clair); transition: transform .35s var(--ease-expo); }
.burger__traits span:first-child { top: 0; }
.burger__traits span:last-child { bottom: 0; }
html.tiroir-ouvert .burger__traits span:first-child { transform: translateY(4.2px) rotate(45deg); }
html.tiroir-ouvert .burger__traits span:last-child { transform: translateY(-4.2px) rotate(-45deg); }

.tiroir { position: fixed; inset: 0; z-index: 200; }
.tiroir[hidden] { display: none; }
.tiroir__fond { position: absolute; inset: 0; background: rgba(10, 4, 6, .6); opacity: 0; transition: opacity .4s ease; }
.tiroir__panneau { position: absolute; inset: 0 0 0 auto; width: min(420px, 100%); height: 100%; height: 100dvh; display: flex; flex-direction: column; padding: 20px 24px max(24px, env(safe-area-inset-bottom)); background: var(--lie); background-image: radial-gradient(120% 60% at 100% 0, rgba(175, 29, 53, .28), transparent 60%); color: var(--clair); transform: translateX(100%); transition: transform .5s var(--ease-expo); overflow-y: auto; }
.tiroir.ouvert .tiroir__fond { opacity: 1; }
.tiroir.ouvert .tiroir__panneau { transform: none; }
.tiroir__haut { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid var(--filet); }
.tiroir__haut img { height: 52px; width: auto; }
.tiroir__fermer { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--filet); }
.croix { position: relative; width: 18px; height: 18px; }
.croix::before, .croix::after { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1.6px; background: currentColor; }
.croix::before { transform: rotate(45deg); }
.croix::after { transform: rotate(-45deg); }
.tiroir__liens { padding: 10px 0; }
.tiroir__liens li { border-bottom: 1px solid rgba(210, 162, 76, .14); opacity: 0; transform: translateX(24px); transition: opacity .5s ease, transform .6s var(--ease-expo); transition-delay: calc(.08s + var(--i) * .045s); }
.tiroir.ouvert .tiroir__liens li { opacity: 1; transform: none; }
.tiroir__liens a { display: flex; align-items: baseline; gap: 14px; padding: 15px 0; font: 400 26px/1.1 var(--f-affiche); }
.tiroir__liens a span { font: 700 11px/1 var(--f-texte); letter-spacing: .18em; color: var(--or); }
.tiroir__liens a[aria-current="page"] { color: var(--or-clair); }
.tiroir__bas { margin-top: auto; display: grid; gap: 16px; padding-top: 18px; }
.tiroir__date { font-size: 14px; color: var(--clair-3); }
.tiroir__bas .btn { justify-content: center; }

/* ---------- Écran de démarrage ----------
   L'emblème du 25e se compose comme sur la presse : « Salon » et « du » montent de leur fente, « Vin » est tracé
   à l'or puis se remplit de rouge comme un verre, le « 25 » se pose, un reflet le traverse ; la signature Rotary
   s'ouvre dessous. 2 s au plus en tout, joué une fois par session, sautable, jamais en mouvement réduit. */
.intro { display: none; }
html.js.anime .intro { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; background: var(--lie); overflow: hidden; }
html.reduit .intro { display: none; }
.intro__fond { position: absolute; inset: 0; background: radial-gradient(60% 55% at 50% 48%, #4A1220 0%, #24090F 55%, #12070A 100%); }
.intro__fond::before { content: ""; position: absolute; left: 50%; top: 40%; width: min(90vw, 900px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(232, 178, 74, .16), transparent 70%); opacity: 0; scale: .7; }
.intro__fond::after { content: ""; position: absolute; inset: 0; opacity: .07; background-image: var(--grain); }
.intro__cadre { position: relative; display: grid; justify-items: center; gap: clamp(22px, 4vh, 40px); }
.intro__embleme { position: relative; width: min(70vw, 46vh, 500px); aspect-ratio: 1296 / 1066; }
.intro__c, .intro__fente { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro__c { opacity: 0; }
.intro__fente { display: block; }
.intro__fente .intro__c { opacity: 1; transform: translateY(var(--monte)); }
.intro__fente--salon { clip-path: inset(40.5% 0 27% 0); --monte: 33%; }
.intro__fente--du { clip-path: inset(72.6% 0 0 0); --monte: 28%; }
.intro__c--vingtcinq { transform-origin: 39% 21%; }
.intro__reflet { position: absolute; inset: 0; pointer-events: none; -webkit-mask: url(../img/embleme/emb-25.webp) center / 100% 100% no-repeat; mask: url(../img/embleme/emb-25.webp) center / 100% 100% no-repeat; background: linear-gradient(105deg, transparent 38%, rgba(255, 250, 225, .95) 50%, transparent 62%) -160% 0 / 250% 100% no-repeat; opacity: 0; }
.intro__signature { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 26px); }
.intro__filet { width: clamp(36px, 8vw, 96px); height: 1px; background: linear-gradient(90deg, transparent, var(--or)); transform: scaleX(0); transform-origin: right; }
.intro__filet:last-child { background: linear-gradient(90deg, var(--or), transparent); transform-origin: left; }
.intro__rotary { height: clamp(40px, 6.4vh, 60px); width: auto; opacity: 0; }
.intro__bas { position: absolute; left: var(--marge); right: var(--marge); bottom: max(26px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: clamp(14px, 2vw, 24px); font: 700 11px/1 var(--f-texte); letter-spacing: .24em; text-transform: uppercase; color: var(--clair-3); opacity: 0; }
.intro__barre { position: relative; flex: 1; height: 1px; background: rgba(255, 244, 228, .14); overflow: hidden; }
.intro__barre i { position: absolute; inset: 0; background: var(--or); transform: scaleX(0); transform-origin: left; }
@media (max-width: 620px) { .intro__lieu { display: none; } .intro__bas { font-size: 10px; letter-spacing: .18em; } }

.intro--go .intro__fond::before { animation: introHalo 1.2s var(--ease-quint) .06s both; }
.intro--go .intro__fente--salon .intro__c { animation: introMonte .62s var(--ease-expo) .04s both; }
.intro--go .intro__fente--du .intro__c { animation: introMonte .58s var(--ease-expo) .13s both; }
.intro--go .intro__c--contour { animation: introTrace .42s cubic-bezier(.45, 0, .25, 1) .18s both, introEfface .3s ease .72s forwards; }
.intro--go .intro__c--vin { animation: introRemplit .48s var(--ease-quint) .42s both; }
.intro--go .intro__c--vingtcinq { animation: introPose .7s var(--ease-expo) .3s both; }
.intro--go .intro__reflet { animation: introReflet .7s var(--ease-quint) .68s both; }
.intro--go .intro__filet { animation: introFilet .6s var(--ease-expo) .58s both; }
.intro--go .intro__rotary { animation: introRotary .6s var(--ease-expo) .5s both; }
.intro--go .intro__bas { animation: introFonduHaut .5s var(--ease-expo) .08s both; }
.intro--go .intro__barre i { animation: introFilet 1.15s cubic-bezier(.4, 0, .2, 1) .08s both; }
@keyframes introFonduHaut { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.intro--sortie { animation: introSortie .6s cubic-bezier(.77, 0, .175, 1) both; pointer-events: none; }
.intro--sortie .intro__cadre { animation: introCadre .6s cubic-bezier(.77, 0, .175, 1) both; }
@keyframes introHalo { to { opacity: 1; scale: 1; } }
@keyframes introMonte { to { transform: none; } }
@keyframes introTrace { from { opacity: 1; clip-path: inset(72% 59% 0 41%); } to { opacity: 1; clip-path: inset(72% 0 0 41%); } }
@keyframes introEfface { from { opacity: 1; clip-path: inset(72% 0 0 41%); } to { opacity: 0; clip-path: inset(72% 0 0 41%); } }
@keyframes introRemplit { from { opacity: 1; clip-path: inset(100% 0 0 0); } 99% { opacity: 1; clip-path: inset(72.4% 0 0 0); } to { opacity: 1; clip-path: none; } }
@keyframes introPose { from { opacity: 0; transform: scale(1.16); filter: blur(16px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes introReflet { 0% { opacity: 1; background-position: -160% 0; } 100% { opacity: 1; background-position: 260% 0; } }
@keyframes introFilet { to { transform: scaleX(1); } }
@keyframes introRotary { from { opacity: 0; transform: translateY(12px); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes introSortie { to { clip-path: inset(0 0 100% 0); } }
@keyframes introCadre { to { transform: translateY(-70px) scale(.97); opacity: 0; } }

/* ---------- Accueil : le hero ---------- */
.accueil { position: relative; isolation: isolate; min-height: clamp(640px, 100svh, 1000px); display: flex; flex-direction: column; color: var(--clair); overflow: hidden; background: var(--lie); }
.scene { position: absolute; inset: 0 0 0 30%; z-index: -3; -webkit-mask: linear-gradient(90deg, transparent, #000 28%); mask: linear-gradient(90deg, transparent, #000 28%); }
.scene img, .scene video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.scene__video { opacity: 0; transition: opacity .8s ease; }
.scene__video.est-lue { opacity: 1; }
html.anime .scene { animation: derive 26s ease-in-out infinite alternate; }
@keyframes derive { from { transform: scale(1.03); } to { transform: scale(1.12); } }
.accueil__voile { position: absolute; inset: 0; z-index: -2; background:
  radial-gradient(70% 90% at 12% 40%, rgba(90, 18, 32, .55), transparent 70%),
  linear-gradient(0deg, rgba(23, 10, 13, .9) 0%, transparent 30%); }
.accueil__voile::after { content: ""; position: absolute; inset: 0; opacity: .05; background-image: var(--grain); }
.accueil__corps { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); align-items: center; gap: var(--gouttiere); padding-top: calc(var(--h-entete) + clamp(12px, 3vh, 40px)); padding-bottom: clamp(18px, 3vh, 36px); }
.accueil__gauche { display: grid; gap: clamp(18px, 3vh, 34px); justify-items: start; }
.accueil__logo { width: min(100%, clamp(300px, 34vw, 560px), 52vh); filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .45)); }
.accueil__logo img { width: 100%; }
.accueil__mention { position: absolute; right: calc(var(--marge) + 52px); bottom: 84px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--clair-3); }

/* L'étiquette : coins coupés, double filet d'or */
.etiquette { position: relative; --c: var(--coin); clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c)); }
.etiquette::before, .etiquette::after { content: ""; position: absolute; pointer-events: none; border: 1px solid var(--filet); clip-path: inherit; }
.etiquette::before { inset: 6px; --c: calc(var(--coin) - 4px); clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c)); }
.etiquette::after { display: none; }
.etiquette--papier { background: var(--papier); background-image: var(--verge); color: var(--encre); }
.etiquette--papier::before { border-color: rgba(138, 98, 32, .45); }
.etiquette--nuit { background: rgba(23, 10, 13, .84); }
.contre.etiquette--nuit { background: rgba(23, 10, 13, .62); backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(14px) saturate(130%); }

.contre { width: min(100%, 720px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.contre__jour { padding: 18px 18px 16px; border-right: 1px solid var(--filet); }
.contre__jour:nth-child(3) { border-right: 0; }
.contre__nom { font: 700 11px/1 var(--f-texte); letter-spacing: .22em; text-transform: uppercase; color: var(--or); }
.contre__date { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; }
.contre__date b { font: 400 clamp(40px, 3.6vw, 56px)/.9 var(--f-affiche); color: var(--clair); }
.contre__date span { font-size: 13px; color: var(--clair-3); }
.contre__h { margin-top: 8px; font-weight: 700; font-size: 15px; color: var(--clair); font-variant-numeric: tabular-nums; }
.contre__pied { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; padding: 14px 18px; border-top: 1px solid var(--filet); }
.contre__info { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--clair-2); }
.contre__info .ic { font-size: 18px; color: var(--or); }
.contre__info b { color: var(--clair); }
.contre__pied .btn { margin-left: auto; }

/* Défilé des domaines (vrais exposants) */
.defile { position: relative; overflow: hidden; border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); background: rgba(23, 10, 13, .78); -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.defile ul { display: flex; width: max-content; animation: defile 70s linear infinite; }
.defile:hover ul { animation-play-state: paused; }
.defile li { display: flex; align-items: center; gap: 18px; padding: 15px 0 15px 18px; white-space: nowrap; font: 400 19px/1 var(--f-affiche); color: var(--clair-2); }
.defile li::after { content: ""; width: 7px; height: 7px; transform: rotate(45deg); background: var(--or); opacity: .7; }
.defile li span { font: 700 11px/1 var(--f-texte); letter-spacing: .16em; text-transform: uppercase; color: var(--or); }
@keyframes defile { to { transform: translateX(-50%); } }
html.doux .defile ul { animation: none; }
html.videos-pause .defile ul { animation-play-state: paused; }

/* ---------- Sections ---------- */
.zone { position: relative; isolation: isolate; padding-block: var(--rythme); }
.zone--papier { background: var(--creme); background-image: var(--verge); color: var(--encre); }
.zone--sombre { background: var(--lie); color: var(--clair-2); }
.zone--sombre::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 80% at 85% 10%, rgba(175, 29, 53, .22), transparent 60%), radial-gradient(50% 70% at 0% 100%, rgba(210, 162, 76, .08), transparent 60%); }
.zone--sombre::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .045; background-image: var(--grain); pointer-events: none; }
.zone--grenat { background: var(--bordeaux); color: var(--clair-2); }
.tete-bloc { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 40px; margin-bottom: clamp(24px, 3vw, 40px); }
.tete-bloc > div { display: grid; gap: 14px; }
.tete-bloc .texte { max-width: 48ch; }

/* Le salon en bref : texte | chiffres | image */
.bref { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 4fr); gap: var(--gouttiere); align-items: stretch; }
.bref__texte { display: grid; align-content: start; gap: 18px; padding-right: clamp(0px, 2vw, 30px); }
.chiffres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--filet-sombre); border: 1px solid var(--filet-sombre); }
.chiffre { display: grid; align-content: space-between; gap: 18px; padding: clamp(16px, 1.6vw, 24px); background: var(--papier); background-image: var(--verge); min-height: 150px; }
.chiffre b { font: 400 clamp(44px, 4.4vw, 72px)/.9 var(--f-affiche); color: var(--encre); font-variant-numeric: lining-nums; }
.chiffre b small { font-size: .42em; }
.chiffre > span { font-size: 14px; line-height: 1.4; color: var(--encre-2); }
.chiffre--grenat { background: var(--grenat); background-image: none; }
.chiffre--grenat b, .chiffre--grenat > span { color: var(--clair); }
.photo { position: relative; overflow: hidden; margin: 0; background: var(--bordeaux); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo figcaption { position: absolute; left: 12px; bottom: 12px; padding: 6px 10px; background: rgba(23, 10, 13, .72); color: var(--clair-2); font: 700 10px/1.2 var(--f-texte); letter-spacing: .16em; text-transform: uppercase; }
.photo figcaption.photo__ia { left: auto; right: 10px; bottom: 10px; padding: 4px 8px; border-radius: 4px; background: rgba(23, 10, 13, .55); font: 600 12px/1.2 var(--f-texte); letter-spacing: .02em; text-transform: none; }
.bref__photo { min-height: 360px; }
.mention-ia { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); margin-top: 10px; }
.sombre .mention-ia { color: var(--clair-3); }

/* La carte des vins : régions à gauche, visuel à droite */
.carte { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(20px, 3vw, 48px); align-items: start; }
.carte__liste { columns: 2; column-gap: clamp(20px, 2.6vw, 40px); }
.carte__liste li { break-inside: avoid; }
.carte__item { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 0 10px; padding: 11px 4px; border-bottom: 1px solid rgba(210, 162, 76, .18); transition: color var(--d-survol), padding var(--d-survol) var(--ease-quint); }
.carte__nom { font: 400 clamp(20px, 1.8vw, 27px)/1.1 var(--f-affiche); color: var(--clair); transition: color var(--d-survol); }
.carte__pts { align-self: end; height: 1px; margin-bottom: 7px; background: radial-gradient(circle, var(--clair-3) 1px, transparent 1.4px) 0 0 / 7px 1px repeat-x; opacity: .7; }
.carte__app { grid-column: 1 / -1; margin-top: 2px; font-size: 12.5px; line-height: 1.35; color: var(--clair-3); }
.carte__nb { font: 700 13px/1 var(--f-texte); color: var(--or); letter-spacing: .06em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.carte__item:hover, .carte__item[aria-current="true"] { padding-left: 12px; }
.carte__item:hover .carte__nom, .carte__item[aria-current="true"] .carte__nom { color: var(--or-clair); }
.carte__visuel { position: sticky; top: calc(var(--h-entete) + 20px); aspect-ratio: 4 / 5; max-height: min(70vh, 520px); width: 100%; }
.carte__visuel .carte__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .7s ease, transform 1.4s var(--ease-expo); }
.carte__visuel .carte__img.actif { opacity: 1; transform: none; }
.carte__legende { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 40px 18px 16px; background: linear-gradient(0deg, rgba(23, 10, 13, .85), transparent); font: 700 11px/1.3 var(--f-texte); letter-spacing: .16em; text-transform: uppercase; color: var(--clair-2); }
.carte__pied { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 22px; }

/* Programme : les trois billets sur fond vidéo */
.fond { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: var(--lie); }
.fond img, .fond .fond-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fond .fond-video { opacity: 0; transition: opacity 1s ease; }
.fond .fond-video.est-lue { opacity: 1; }
html.anime .fond img, html.anime .fond .fond-video { animation: derive 26s ease-in-out infinite alternate; }
.fond::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23, 10, 13, .82), rgba(23, 10, 13, .62) 40%, rgba(23, 10, 13, .9)); }
.zone > .fond::after { background: linear-gradient(180deg, rgba(23, 10, 13, .86), rgba(23, 10, 13, .62) 45%, rgba(23, 10, 13, .9)); }
.solid > .fond { z-index: -2; }
.solid > .fond::after { background: linear-gradient(120deg, rgba(175, 29, 53, .9), rgba(120, 16, 34, .82)); }
.prog { display: grid; grid-template-columns: minmax(0, 3.2fr) minmax(0, 9fr); gap: clamp(20px, 3vw, 48px); align-items: stretch; }
.prog__intro { display: grid; align-content: space-between; gap: 22px; }
.billets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gouttiere); }
.billet { position: relative; display: grid; grid-template-rows: auto auto 1fr; padding: 22px 22px 20px; color: var(--clair-2); }
.billet::before { border-color: rgba(210, 162, 76, .5); }
.billet__haut { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 14px; border-bottom: 1px dashed rgba(210, 162, 76, .45); }
.billet__nom { font: 700 12px/1 var(--f-texte); letter-spacing: .22em; text-transform: uppercase; color: var(--or); }
.billet__h { font-weight: 700; color: var(--clair); font-variant-numeric: tabular-nums; }
.billet__date { margin: 14px 0 12px; font: 400 clamp(60px, 6vw, 96px)/.85 var(--f-affiche); color: var(--clair); }
.billet__date span { display: block; margin-top: 8px; font: 500 13px/1 var(--f-texte); letter-spacing: .08em; color: var(--clair-3); }
.billet ul { display: grid; gap: 8px; align-content: start; font-size: 14.5px; }
.billet li { display: flex; gap: 10px; align-items: baseline; }
.billet li .ic { position: relative; top: 2px; color: var(--or); font-size: 16px; }
/* trous de poinçon du billet */
.billet__trou { position: absolute; top: 58px; width: 16px; height: 16px; border-radius: 50%; background: var(--lie); }
.billet__trou--g { left: -8px; } .billet__trou--d { right: -8px; }

/* Mosaïque « au fil des stands » */
.stands { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(0, auto); gap: var(--gouttiere); }
.tuile { position: relative; overflow: hidden; display: grid; align-content: end; min-height: 300px; padding: 20px; color: var(--clair); isolation: isolate; }
.tuile > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-expo); }
.tuile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(23, 10, 13, .9), rgba(23, 10, 13, .1) 60%); }
.tuile:hover > img { transform: scale(1.05); }
.tuile h3 { font: 400 clamp(24px, 2.2vw, 34px)/1 var(--f-affiche); }
.tuile p { margin-top: 8px; max-width: 42ch; font-size: 14.5px; color: var(--clair-2); }
.tuile__no { position: absolute; top: 16px; left: 18px; font: 700 11px/1 var(--f-texte); letter-spacing: .2em; color: var(--or-clair); }
.tuile--a { grid-column: span 6; grid-row: span 2; min-height: 520px; }
.tuile--b { grid-column: span 3; }
.tuile--c { grid-column: span 3; }
.tuile--texte { grid-column: span 6; align-content: center; gap: 14px; background: var(--papier); background-image: var(--verge); color: var(--encre); min-height: 0; padding: clamp(20px, 2.4vw, 34px); }
.tuile--texte::after { display: none; }
.tuile--texte .texte { color: var(--encre-2); }
.tuile--texte .titre { color: var(--encre); }
.sombre .tuile--texte .surtitre { color: var(--or-sombre); }

/* Solidarité + infos pratiques */
.duo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.solid { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(20px, 2.4vw, 36px); padding: clamp(28px, 4vw, 64px) clamp(20px, 3vw, 56px) clamp(28px, 4vw, 64px) max(var(--marge), calc((100vw - var(--largeur)) / 2)); background: var(--grenat); color: var(--clair); }
.solid::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .08; background-image: var(--grain); }
.solid__grand { font: 400 clamp(52px, 5vw, 88px)/.9 var(--f-affiche); letter-spacing: -.01em; color: var(--clair); white-space: nowrap; }
.solid__grand small { font-size: .45em; }
.solid .surtitre { color: var(--or-clair); }
.solid .texte { color: rgba(246, 238, 226, .88); }
.solid__club { display: flex; align-items: center; gap: 16px; margin-top: 8px; padding-top: 16px; border-top: 1px solid rgba(246, 238, 226, .25); font-size: 14px; color: rgba(246, 238, 226, .86); }
.infos { padding: clamp(28px, 4vw, 64px) max(var(--marge), calc((100vw - var(--largeur)) / 2)) clamp(28px, 4vw, 64px) clamp(20px, 3vw, 56px); background: var(--papier); background-image: var(--verge); display: grid; align-content: start; gap: 18px; }
.infos__liste { display: grid; gap: 0; border-top: 1px solid var(--filet-sombre); }
.infos__liste li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--filet-sombre); font-size: 15px; color: var(--encre-2); }
.infos__liste .ic { font-size: 20px; color: var(--grenat); margin-top: 2px; }
.infos__liste b { display: block; color: var(--encre); }

/* ---------- Pages intérieures : en-tête vidéo compact ---------- */
.tete-page { position: relative; isolation: isolate; min-height: clamp(320px, 42vh, 400px); display: grid; align-content: end; padding-top: calc(var(--h-entete) + 30px); color: var(--clair); overflow: hidden; }
.tete-page .fond::after { background: linear-gradient(90deg, rgba(23, 10, 13, .9) 0%, rgba(23, 10, 13, .55) 55%, rgba(23, 10, 13, .3) 100%), linear-gradient(0deg, rgba(23, 10, 13, .9), transparent 50%); }
.tete-page__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 20px 40px; padding-bottom: clamp(22px, 3vw, 40px); }
.fil { display: flex; gap: 10px; font-size: 13px; color: var(--clair-3); margin-bottom: 16px; }
.fil a:hover { color: var(--or-clair); }
.titre-page { font: 400 clamp(46px, 6.8vw, 100px)/.9 var(--f-affiche); letter-spacing: -.01em; text-transform: uppercase; color: var(--clair); }
.titre-page em { text-transform: none; }
.tete-page .chapo { margin-top: 18px; color: var(--clair-2); }
.tete-page .pause-video { top: calc(var(--h-entete) + 16px); bottom: auto; }
.faits { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(120px, auto); border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); background: rgba(23, 10, 13, .72); }
.faits li { padding: 14px 22px; border-right: 1px solid var(--filet); }
.faits li:last-child { border-right: 0; }
.faits b { display: block; font: 400 30px/1 var(--f-affiche); color: var(--or-clair); }
.faits span { display: block; margin-top: 6px; font: 700 10.5px/1.2 var(--f-texte); letter-spacing: .16em; text-transform: uppercase; color: var(--clair-3); }
.pause-video { position: absolute; right: var(--marge); bottom: 20px; z-index: 3; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--filet); color: var(--clair-2); background: rgba(23, 10, 13, .5); transition: background-color var(--d-survol), color var(--d-survol); }
.pause-video:hover { background: var(--or); color: var(--lie); }
.pause-video .ic { font-size: 16px; }
.pause-video .ic--lecture, html.videos-pause .pause-video .ic--pause { display: none; }
html.videos-pause .pause-video .ic--lecture { display: block; }
.accueil .pause-video { bottom: 72px; }

/* ---------- Composants des pages intérieures ---------- */
.grille-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); align-items: start; }
.grille-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gouttiere); }
.grille-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gouttiere); }
/* Téléphone et tablette : les colonnes posées en ligne (span 7 / span 5) passent l'une sous l'autre. */
@media (max-width: 860px) {
  .grille-12 > * { grid-column: 1 / -1 !important; }
  .grille-12 > figure.photo { min-height: 0 !important; aspect-ratio: 4 / 3; }
}
.carte-bloc { position: relative; display: grid; align-content: start; gap: 12px; padding: clamp(20px, 2vw, 28px); }
.carte-bloc h3 { font: 400 clamp(22px, 1.9vw, 28px)/1.05 var(--f-affiche); color: var(--encre); }
.carte-bloc p, .carte-bloc li { font-size: 15px; color: var(--encre-2); }
.carte-bloc .ic--tete { font-size: 26px; color: var(--grenat); }
.sombre .carte-bloc h3, .carte-bloc.etiquette--nuit h3 { color: var(--clair); }
.carte-bloc.etiquette--nuit p { color: var(--clair-2); }
.note { margin-top: 18px; font-size: 13.5px; color: var(--gris); }
.sombre .note { color: var(--clair-3); }
.prose { display: grid; gap: 14px; max-width: 70ch; }
.prose p, .prose li { color: var(--encre-2); }
.prose h2 { font: 400 clamp(24px, 2.2vw, 32px)/1.1 var(--f-affiche); color: var(--encre); margin-top: 10px; }
.prose a { color: var(--grenat); text-decoration: underline; text-underline-offset: 3px; }

/* horaires : trois colonnes, une ligne par jour */
.horaires { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--filet-sombre); border: 1px solid var(--filet-sombre); }
.horaire { display: grid; gap: 6px; padding: clamp(16px, 1.8vw, 26px); background: var(--papier); background-image: var(--verge); }
.horaire__jour { font: 700 12px/1 var(--f-texte); letter-spacing: .22em; text-transform: uppercase; color: var(--grenat); }
.horaire__date { font: 400 clamp(22px, 1.75vw, 30px)/1.05 var(--f-affiche); white-space: nowrap; color: var(--encre); }
.horaire__h { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 18px; color: var(--encre); font-variant-numeric: tabular-nums; }
.horaire__h .ic { color: var(--or-sombre); }

.entree-carte { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; padding: clamp(20px, 2vw, 30px); color: var(--clair); background: var(--grenat); }
.entree-carte::before { border-color: rgba(246, 238, 226, .4); }
.entree-carte b { font: 400 clamp(64px, 6vw, 96px)/.85 var(--f-affiche); }
.entree-carte p { color: rgba(246, 238, 226, .9); font-size: 15px; }
.entree-carte h3 { font: 400 26px/1 var(--f-affiche); margin-bottom: 6px; }
.adresse { font-style: normal; font-size: 16px; line-height: 1.55; color: var(--encre-2); }
.adresse b { color: var(--encre); }
.moderation { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding: 16px 18px; border: 1px solid var(--filet-sombre); background: rgba(255, 255, 255, .4); font-size: 14px; color: var(--encre-2); }
.moderation .ic { font-size: 20px; color: var(--grenat); }
.moderation b { color: var(--encre); }
.carte-plan { position: relative; min-height: 300px; overflow: hidden; background: var(--bordeaux); }
.carte-plan iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.35) sepia(.25) contrast(1.05); }

/* FAQ en deux colonnes */
.faq { columns: 2; column-gap: var(--gouttiere); }
.faq details { break-inside: avoid; margin-bottom: 10px; background: var(--papier); background-image: var(--verge); border: 1px solid var(--filet-sombre); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; cursor: pointer; list-style: none; font-weight: 700; font-size: 15.5px; color: var(--encre); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { flex: none; color: var(--grenat); transition: transform .35s var(--ease-expo); }
.faq details[open] summary .ic { transform: rotate(90deg); }
.faq summary:hover { color: var(--grenat); }
.faq details p { padding: 0 18px 16px; font-size: 15px; color: var(--encre-2); }

/* programme (page) : les jours en grand */
.jours { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gouttiere); }
.jour { padding: clamp(20px, 2vw, 30px); }
.jour .billet__date { color: var(--encre); }
.jour .billet__date span { color: var(--gris); }
.jour .billet__haut { border-bottom-color: rgba(138, 98, 32, .45); }
.jour .billet__nom { color: var(--grenat); }
.jour .billet__h { color: var(--encre); }
.jour ul { display: grid; gap: 9px; font-size: 15px; color: var(--encre-2); }
.jour li { display: flex; gap: 10px; align-items: baseline; }
.jour li .ic { position: relative; top: 2px; color: var(--grenat); font-size: 17px; }

/* solidarité (page) */
.chiffres-bande { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--filet); border: 1px solid var(--filet); }
.chiffres-bande li { display: grid; gap: 10px; padding: clamp(18px, 2vw, 28px); background: var(--lie-2); }
.chiffres-bande b { font: 400 clamp(40px, 4.4vw, 70px)/.9 var(--f-affiche); color: var(--or-clair); white-space: nowrap; }
.chiffres-bande b small { font-size: .5em; }
.chiffres-bande li > span { font-size: 14.5px; line-height: 1.45; color: var(--clair-2); }
.chiffres-bande b span { font: inherit; color: inherit; }
.frise { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gouttiere); counter-reset: f; }
.frise li { position: relative; padding-top: 22px; border-top: 2px solid var(--grenat); }
.frise li::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; transform: rotate(45deg); background: var(--grenat); }
.frise b { display: block; font: 400 34px/1 var(--f-affiche); color: var(--encre); }
.frise p { margin-top: 8px; font-size: 14.5px; color: var(--encre-2); }

/* contact */
.contacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gouttiere); }
.contacts a:not(.lien-fleche) { color: var(--grenat); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.club-carte { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: center; padding: clamp(22px, 3vw, 40px); color: var(--clair-2); }
.club-carte img { height: clamp(70px, 8vw, 110px); width: auto; }
.club-carte h2 { font: 400 clamp(26px, 2.6vw, 38px)/1.05 var(--f-affiche); color: var(--clair); margin-bottom: 10px; }
.club-carte b { color: var(--clair); }

/* exposants : surcharge légère de salle.css pour le registre étiquette */
.exposants-section { background: var(--creme); background-image: var(--verge); }
.exposant { border-radius: 0 !important; background: var(--papier) !important; }
.filtre-regions { display: flex; flex-wrap: wrap; gap: 8px; }
.filtre-regions a { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border: 1px solid var(--filet-sombre); background: var(--papier); font-size: 13.5px; font-weight: 700; color: var(--encre); transition: background-color var(--d-survol), color var(--d-survol), border-color var(--d-survol); }
.filtre-regions a span { font-weight: 500; color: var(--gris); }
.filtre-regions a:hover, .filtre-regions a.actif { background: var(--encre); border-color: var(--encre); color: var(--clair); }
.filtre-regions a:hover span, .filtre-regions a.actif span { color: var(--clair-3); }
.salle .titre { color: var(--clair); }
.entete-bloc { display: grid; gap: 14px; margin-bottom: 20px; }
.salle .texte { color: var(--clair-2); }

/* ---------- Pied de page ---------- */
.pied { position: relative; isolation: isolate; overflow: hidden; color: var(--clair-2); }
.pied .fond::after { background: linear-gradient(180deg, rgba(23, 10, 13, .78), rgba(23, 10, 13, .94)); }
.pied__haut { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 48px); padding-block: clamp(44px, 5vw, 72px) clamp(30px, 3vw, 44px); }
.pied__marque { display: grid; gap: 18px; align-content: start; justify-items: start; }
.pied__marque > img { width: clamp(160px, 14vw, 220px); }
.pied__marque p { max-width: 34ch; font-size: 14.5px; }
.pied h2 { font: 700 11px/1 var(--f-texte); letter-spacing: .22em; text-transform: uppercase; color: var(--or); margin-bottom: 14px; }
.pied__col ul { display: grid; gap: 8px; font-size: 14.5px; }
.pied__col a { transition: color var(--d-survol); }
.pied__col a:hover { color: var(--or-clair); }
.pied__col p { font-size: 14.5px; }
.reseaux { display: flex; gap: 8px; margin-top: 14px; }
.reseau { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--filet); transition: background-color var(--d-survol), color var(--d-survol); }
a.reseau:hover { background: var(--or); color: var(--lie); }
.reseau .ic { font-size: 17px; }
.pied__bas { border-top: 1px solid var(--filet); }
.pied__bas-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 30px; padding-block: 18px; font-size: 12.5px; color: var(--clair-3); }
.pied__sante { font-weight: 700; color: var(--clair-2); }
.pied__liens { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.pied__liens a:hover { color: var(--or-clair); }

/* ---------- Révélations (états posés seulement si le mouvement est permis) ---------- */
html.anime [data-revele] { opacity: 0; transform: translateY(30px) scale(.985); filter: blur(10px); transition: opacity .9s var(--ease-expo), transform .9s var(--ease-expo), filter .9s var(--ease-expo); transition-delay: calc(var(--i, 0) * .08s); }
html.anime [data-revele].est-vu { opacity: 1; transform: none; filter: none; }
html.anime [data-revele].vu-fini { transition-delay: 0s; }
html.anime [data-devoile] { clip-path: inset(12% 8% 12% 8%); transition: clip-path 1.05s var(--ease-expo); }
html.anime [data-devoile].est-vu { clip-path: inset(0); }
html.anime [data-devoile] img { transform: scale(1.12); transition: transform 1.4s var(--ease-expo); }
html.anime [data-devoile].est-vu img { transform: none; }
/* entrée du hero, ligne par ligne */
@keyframes riseIn { from { opacity: 0; transform: translateY(38px); filter: blur(14px); } to { opacity: 1; transform: none; filter: blur(0); } }
html.anime [data-entree] { opacity: 0; }
html.anime.pret [data-entree] { animation: riseIn .95s var(--ease-expo) both; animation-delay: calc(.12s + var(--d, 0) * .13s); }
/* filet de sécurité : le haut de page s'affiche quoi qu'il arrive ; le reste se révèle au défilement (sdv.js révèle ce qui est déjà à l'écran) */
html.settled [data-entree] { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; }
html.doux *, html.doux *::before, html.doux *::after { animation: none !important; transition: none !important; }
html.doux .fond .fond-video.est-lue, html.doux .scene__video.est-lue { opacity: 1; }
html.reduit .scene, html.reduit .fond img, html.reduit .fond .fond-video { animation: none !important; }
html.reduit [data-revele], html.reduit [data-entree] { filter: none !important; }
html.reduit.pret [data-entree] { animation-name: fondu; }
@keyframes fondu { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Passage d'une page à l'autre : voir « Transition entre les pages : le volet », en fin de fichier ---------- */

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
  .menu a { padding-inline: 6px; font-size: 13.5px; }
  .marque__rotary, .marque__filet { display: none; }
}
@media (max-width: 1100px) {
  .menu, .entete__cta { display: none; }
  .burger { display: grid; }
  .accueil__corps { grid-template-columns: 1fr; align-content: center; }
  .scene { inset: 0; -webkit-mask: none; mask: none; }
  .accueil__voile { background: linear-gradient(90deg, rgba(23, 10, 13, .85), rgba(23, 10, 13, .35)), linear-gradient(0deg, rgba(23, 10, 13, .95), transparent 50%); }
  .bref { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bref__texte { grid-column: 1 / -1; }
  .prog { grid-template-columns: 1fr; }
  .prog__intro { grid-template-columns: 1fr auto; align-items: end; }
  .duo { grid-template-columns: 1fr; }
  .solid { padding-inline: var(--marge); }
  .infos { padding-inline: var(--marge); }
  .pied__haut { grid-template-columns: 1fr 1fr; }
  .chiffres-bande { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .frise { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 30px; }
}
@media (max-width: 860px) {
  :root { --h-entete: 66px; }
  .marque__logo { height: 38px; }
  .carte { grid-template-columns: 1fr; }
  .carte__visuel { position: relative; top: 0; aspect-ratio: 16 / 10; order: -1; }
  .billets, .jours, .grille-3, .contacts, .horaires { grid-template-columns: 1fr; }
  .billet__date { font-size: 64px; }
  .stands { grid-template-columns: 1fr 1fr; }
  .tuile--a, .tuile--texte { grid-column: 1 / -1; grid-row: auto; min-height: 340px; }
  .tuile--texte { min-height: 0; }
  .tuile--b, .tuile--c { grid-column: span 1; min-height: 240px; }
  .solid { grid-template-columns: 1fr; }
  .grille-2 { grid-template-columns: 1fr; }
  .tete-page__in { grid-template-columns: 1fr; }
  .faits { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faits li:nth-child(2n) { border-right: 0; }
  .faits li:nth-child(n+3) { border-top: 1px solid var(--filet); }
  .faq { columns: 1; }
}
@media (max-width: 620px) {
  .accueil { min-height: 100svh; }
  .accueil__corps { padding-top: calc(var(--h-entete) + 16px); }
  .scene img, .scene video { object-position: 62% 50%; }
  .accueil__logo { width: min(86vw, 400px); }
  .contre { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contre__jour { padding: 14px 10px 12px; }
  .contre__date { flex-direction: column; gap: 2px; }
  .contre__date b { font-size: 38px; }
  .contre__nom { font-size: 10px; letter-spacing: .14em; }
  .contre__h { font-size: 13px; }
  .contre__pied { padding: 12px; }
  .contre__pied .btn { margin-left: 0; width: 100%; justify-content: center; }
  .bref { grid-template-columns: 1fr; }
  .bref__photo { min-height: 260px; }
  .carte__liste { columns: 1; }
  .chiffre { min-height: 124px; }
  .pied__haut { grid-template-columns: 1fr; }
  .chiffres-bande, .frise { grid-template-columns: 1fr; }
  .entree-carte { grid-template-columns: 1fr; }
  .club-carte { grid-template-columns: 1fr; }
  .titre-page { font-size: clamp(44px, 13vw, 64px); }
  .tete-page { min-height: 0; padding-top: calc(var(--h-entete) + 56px); }
  .accueil__mention { bottom: 66px; right: 12px; }
}
@media (max-width: 480px) {
  .stands { grid-template-columns: 1fr; }
  .tuile--b, .tuile--c { grid-column: 1 / -1; }
  .btn { padding: 0 18px; }
  .defile li { font-size: 16px; padding-block: 12px; }
}

/* exposants sans logo publié : médaillon grenat à l'initiale dorée (en attendant leur vrai logo) */
.exposant__logo:has(.exposant__mono) { background: radial-gradient(circle at 50% 40%, #B8273D, #6E1222 70%); border-color: rgba(210, 162, 76, .6); box-shadow: inset 0 0 0 3px rgba(23, 10, 13, .15), inset 0 0 0 4px rgba(237, 216, 134, .45); }
.exposant__mono { font: 400 26px/1 var(--f-affiche) !important; color: var(--or-clair) !important; text-shadow: 0 1px 0 rgba(0, 0, 0, .3); }
.pstand--sans-logo .pstand__in { background: linear-gradient(180deg, #F7EEDD, #EADBC0); }
.pstand--sans-logo .pstand__nom { font-family: var(--f-affiche); font-weight: 400; color: var(--grenat); }

/* plan de salle : logos tenus dans leur cadre (hauteurs en px, les % sont ignorés dans une grille centrée) ; pas de faux gras sur Abril */
html { font-synthesis: none; }
.fiche__logo { overflow: hidden; padding: 12px; }
.fiche__logo img { max-width: 82%; max-height: 92px; width: auto; height: auto; object-fit: contain; }
.fiche__nom { font-family: var(--f-affiche); font-weight: 400; font-size: 26px; line-height: 1.1; overflow-wrap: anywhere; }
.exposant__logo { overflow: hidden; }
.exposant__logo-img { max-height: 40px; }
@media (max-width: 1100px) { .fiche__logo img { max-height: 72px; } .exposant__logo-img { max-height: 32px; } }

/* ---------- La tombola : le vrai billet, en carte qui se retourne ---------- */
.tombola { overflow: hidden; }
.tombola__grille { display: grid; grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.tombola__texte { display: grid; gap: 16px; align-content: center; }
.tombola__etapes { display: grid; gap: 0; margin-top: 4px; border-top: 1px solid var(--filet-sombre); }
.tombola__etapes li { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--filet-sombre); font-size: 15px; color: var(--encre-2); }
.tombola__etapes b { font: 400 28px/1 var(--f-affiche); color: var(--grenat); }
.billet3d-scene { display: grid; justify-items: center; gap: 14px; perspective: 1800px; }
.billet3d { --rx: 0deg; --ry: 0deg; --tourne: 0deg; position: relative; display: block; width: 100%; max-width: 980px; aspect-ratio: 200 / 70; cursor: pointer; border-radius: 6px; transform-style: preserve-3d; }
.billet3d:focus-visible { outline-offset: 8px; }
.billet3d__in { position: absolute; inset: 0; display: block; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(calc(var(--ry) + var(--tourne))); transition: transform .9s var(--ease-expo); }
.billet3d.suit .billet3d__in { transition: transform .9s var(--ease-expo), rotate 0s; }
.billet3d[aria-pressed="true"] { --tourne: 180deg; }
.billet3d__face { position: absolute; inset: 0; display: block; overflow: hidden; border-radius: 6px; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 30px 60px -20px rgba(42, 15, 20, .55), 0 10px 22px -10px rgba(42, 15, 20, .35); }
.billet3d__face img { width: 100%; height: 100%; object-fit: cover; }
.billet3d__face--verso { transform: rotateY(180deg); }
.billet3d__reflet { position: absolute; inset: 0; border-radius: 6px; pointer-events: none; mix-blend-mode: soft-light; opacity: 0; transition: opacity .4s ease; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 245, 210, .75), transparent 55%); transform: translateZ(1px); }
.billet3d:hover .billet3d__reflet { opacity: 1; }
.billet3d[aria-pressed="true"] .billet3d__reflet { transform: rotateY(180deg) translateZ(1px); }
html.anime .billet3d-scene.est-vu .billet3d { animation: flotte 7s ease-in-out 1.2s infinite alternate; }
@keyframes flotte { from { translate: 0 0; } to { translate: 0 -10px; } }
html.reduit .billet3d { animation: none !important; }
.billet3d__aide { display: flex; align-items: center; gap: 8px; font: 700 11px/1 var(--f-texte); letter-spacing: .18em; text-transform: uppercase; color: var(--or-sombre); }
.billet3d__aide .ic { transform: rotate(180deg); }
.tuile__lien { position: absolute; inset: 0; z-index: 2; }

/* ---------- Galerie du salon 2025 : deux rubans qui défilent doucement ---------- */
.galerie-zone { padding-bottom: calc(var(--rythme) - 10px); }
.galerie { display: grid; gap: 12px; }
.galerie__rang { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.galerie__piste { display: flex; gap: 12px; width: max-content; animation: defile 110s linear infinite; }
.galerie__rang--retour .galerie__piste { animation-duration: 130s; animation-direction: reverse; }
.galerie__rang:hover .galerie__piste, .galerie__rang:focus-within .galerie__piste, html.videos-pause .galerie__piste { animation-play-state: paused; }
.galerie__item { position: relative; display: block; height: clamp(180px, 22vw, 290px); aspect-ratio: var(--r); overflow: hidden; border-radius: 3px; background: var(--bordeaux); cursor: zoom-in; isolation: isolate; }
.galerie__rang--retour .galerie__item { height: clamp(150px, 17vw, 230px); }
.galerie__item img, .galerie__item video { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-expo), filter .5s ease; filter: saturate(.92) contrast(1.02); }
.galerie__item:hover img, .galerie__item:focus-visible img { transform: scale(1.06); filter: saturate(1.05); }
.galerie__item--video { cursor: default; }
.galerie__legende { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 10px; background: linear-gradient(0deg, rgba(23, 10, 13, .85), transparent); font: 700 10.5px/1.25 var(--f-texte); letter-spacing: .12em; text-transform: uppercase; color: var(--clair); text-align: left; opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .5s var(--ease-expo); }
.galerie__item:hover .galerie__legende, .galerie__item:focus-visible .galerie__legende, .galerie__item--video .galerie__legende { opacity: 1; transform: none; }
html.doux .galerie__rang { overflow-x: auto; }
html.doux .galerie__piste { animation: none; }

.visionneuse { width: min(92vw, 1400px); max-width: none; max-height: 92vh; padding: 0; border: 0; background: transparent; color: var(--clair); overflow: visible; }
.visionneuse::backdrop { background: rgba(15, 6, 8, .9); backdrop-filter: blur(6px); }
.visionneuse[open] { animation: visEntre .45s var(--ease-expo); }
@keyframes visEntre { from { opacity: 0; transform: scale(.96); } }
.visionneuse__fig { display: grid; justify-items: center; gap: 12px; }
.visionneuse__fig img { max-width: 100%; max-height: 82vh; width: auto; height: auto; border-radius: 3px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.visionneuse__fig figcaption { font: 700 11px/1.3 var(--f-texte); letter-spacing: .16em; text-transform: uppercase; color: var(--or-clair); }
.visionneuse__btn, .visionneuse__fermer { position: fixed; z-index: 2; width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid var(--filet); background: rgba(23, 10, 13, .7); color: var(--clair); transition: background-color var(--d-survol), color var(--d-survol); }
.visionneuse__btn:hover, .visionneuse__fermer:hover { background: var(--or); color: var(--lie); }
.visionneuse__btn { top: 50%; translate: 0 -50%; }
.visionneuse__btn .ic { font-size: 22px; }
.visionneuse__btn--prec { left: max(12px, 2vw); }
.visionneuse__btn--prec .ic { transform: rotate(180deg); }
.visionneuse__btn--suiv { right: max(12px, 2vw); }
.visionneuse__fermer { top: max(12px, 2vw); right: max(12px, 2vw); }

@media (max-width: 860px) {
  .tombola__grille { grid-template-columns: 1fr; }
  .billet3d-scene { order: -1; }
  .visionneuse__btn { top: auto; bottom: 14px; translate: none; }
}

/* ---------- Immersion : titres mot par mot, lueur, parallaxe ---------- */
.mot { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.mot > span { display: inline-block; }
html.anime .mot > span { transform: translateY(108%); transition: transform 1.05s var(--ease-expo); transition-delay: calc(.08s + var(--m, 0) * 55ms); }
html.anime .est-vu .mot > span, html.anime.pret .tete-page .mot > span, html.settled .tete-page .mot > span { transform: none; }
html.reduit .mot > span { transition-duration: .5s; }


.lueur { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .8s ease; background: radial-gradient(520px circle at var(--gx, 50%) var(--gy, 50%), rgba(237, 196, 110, .13), transparent 62%); }
.a-lueur:hover > .lueur { opacity: 1; }

.tuile > img[data-parallaxe] { inset: -9% 0 auto; height: 118%; }
.bref__photo { position: relative; }
.bref__photo img[data-parallaxe] { position: absolute; inset: -8% 0 auto; height: 116%; }
.accueil__corps, .accueil .scene { will-change: transform; }

/* ---------- Partenaires : grande section (accueil, solidarité) et bandeau au-dessus du pied ---------- */
.partenaires__appel { display: grid; gap: 12px; justify-items: start; max-width: 46ch; }
.partenaires__grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 14px; }
.partenaire { position: relative; display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: center; gap: 10px; min-height: 148px; padding: 20px 14px 14px; background: #FFFDF9; border: 1px solid rgba(138, 98, 32, .22); transition: transform .5s var(--ease-expo), box-shadow .5s var(--ease-expo), border-color .3s ease; }
.partenaire::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(210, 162, 76, .28); pointer-events: none; transition: border-color .3s ease; }
.partenaire img { max-width: 86%; max-height: 72px; width: auto; height: auto; object-fit: contain; transition: transform .6s var(--ease-expo); }
.partenaire__nom { font: 700 10.5px/1.3 var(--f-texte); letter-spacing: .16em; text-transform: uppercase; color: var(--gris); text-align: center; }
.partenaire:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -24px rgba(42, 15, 20, .45); border-color: var(--or); }
.partenaire:hover::before { border-color: var(--or); }
.partenaire:hover img { transform: scale(1.05); }

.bande-partenaires { position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(14px, 2.4vw, 36px); padding: 18px var(--marge); background: #FFFDF9; border-top: 1px solid rgba(138, 98, 32, .25); }
.bande-partenaires__titre, .bande-partenaires__lien { font: 700 11px/1.2 var(--f-texte); letter-spacing: .2em; text-transform: uppercase; color: var(--or-sombre); white-space: nowrap; }
.bande-partenaires__lien { color: var(--grenat); }
.bande-partenaires__lien:hover { text-decoration: underline; text-underline-offset: 4px; }
.bande-partenaires__rang { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.bande-partenaires ul { display: flex; align-items: center; gap: clamp(36px, 5vw, 72px); width: max-content; padding-right: clamp(36px, 5vw, 72px); animation: defile 40s linear infinite; }
.bande-partenaires:hover ul { animation-play-state: paused; }
.bande-partenaires img { height: 48px; width: auto; max-width: 170px; object-fit: contain; filter: grayscale(1) contrast(1.1); opacity: .75; transition: filter .3s ease, opacity .3s ease; }
.bande-partenaires li:hover img { filter: none; opacity: 1; }
html.doux .bande-partenaires ul { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
html.doux .bande-partenaires__rang { -webkit-mask: none; mask: none; }
@media (max-width: 860px) {
  .bande-partenaires { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .partenaire { min-height: 150px; }
}
@media (max-width: 620px) {
  .partenaires__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .partenaire { min-height: 128px; padding: 18px 12px 12px; }
  .partenaire img { max-height: 64px; }
  .partenaire__nom { font-size: 9.5px; letter-spacing: .1em; }
}

/* ---------- Retours de Codex (24/10/2026) : respiration claire, grande photo, billet plus grand ---------- */
.carte-zone .carte__nom { color: var(--encre); }
.carte-zone .carte__item { border-bottom-color: var(--filet-sombre); }
.carte-zone .carte__pts { background-image: radial-gradient(circle, rgba(42, 15, 20, .45) 1px, transparent 1.4px); }
.carte-zone .carte__nb { color: var(--grenat); }
.carte-zone .carte__app { color: var(--gris); }
.carte-zone .carte__item:hover .carte__nom, .carte-zone .carte__item[aria-current="true"] .carte__nom { color: var(--grenat); }
.carte-zone .carte__visuel { box-shadow: 0 30px 60px -30px rgba(42, 15, 20, .5); }
.galerie-une { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 3vw, 48px); align-items: end; margin-bottom: clamp(26px, 3vw, 40px); }
.galerie-une__photo { aspect-ratio: 16 / 8.5; }
.galerie-une__texte { display: grid; gap: 16px; padding-bottom: 8px; }
@media (min-width: 861px) { .tombola__grille { grid-template-columns: minmax(0, 3.6fr) minmax(0, 8.4fr); } }
html.anime .billet3d-scene.est-vu .billet3d { animation: none; }
.billet3d__bouton { --fg: var(--encre); }   /* la couleur passe par --fg : au survol (fond encre), le texte repasse en clair */
.lueur { background: radial-gradient(520px circle at var(--gx, 50%) var(--gy, 50%), rgba(237, 196, 110, .08), transparent 62%); }
@media (max-width: 860px) { .galerie-une { grid-template-columns: 1fr; } }

/* ---------- Page « 2025 en images » : récit jour par jour ---------- */
.sommaire-jours { display: flex; flex-wrap: wrap; gap: 8px; }
.sommaire-jours a { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border: 1px solid var(--filet-sombre); background: var(--papier); font-size: 13.5px; font-weight: 700; color: var(--encre); transition: background-color var(--d-survol), color var(--d-survol), border-color var(--d-survol); }
.sommaire-jours a:hover { background: var(--encre); border-color: var(--encre); color: var(--clair); }
.chapitre { display: grid; grid-template-columns: minmax(0, 3.4fr) minmax(0, 8.6fr); gap: clamp(20px, 3vw, 48px); padding-block: clamp(28px, 3.4vw, 48px); border-top: 1px solid var(--filet-sombre); scroll-margin-top: calc(var(--h-entete) + 16px); }
.chapitre__tete { position: sticky; top: calc(var(--h-entete) + 24px); align-self: start; display: grid; gap: 10px; }
.chapitre__num { font: 400 clamp(84px, 9vw, 150px)/.78 var(--f-affiche); color: var(--grenat); letter-spacing: -.02em; }
.chapitre__date { font: 700 12px/1.2 var(--f-texte); letter-spacing: .2em; text-transform: uppercase; color: var(--or-sombre); }
.chapitre__titre { font: 400 clamp(26px, 2.4vw, 36px)/1.05 var(--f-affiche); color: var(--encre); }
.chapitre__texte { max-width: 38ch; font-size: 15.5px; color: var(--encre-2); }
.chapitre__compte { font-size: 13px; color: var(--gris); }
.chapitre__photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); grid-auto-rows: 190px; grid-auto-flow: dense; gap: 10px; }
.chapitre__photo .galerie__item { width: 100%; height: 100%; aspect-ratio: auto; }
.chapitre__photo--large { grid-column: span 2; }
.chapitre__photo--haute { grid-row: span 2; }
.duo--2025 .infos .titre sup { font-size: .5em; }
/* le papillon d'Eux pour Eux (journée du samedi 2025) : quatre calques superposés ; les ailes pivotent sur le corps */
.papillon { position: relative; width: min(250px, 78%); aspect-ratio: 560 / 448; margin-top: clamp(14px, 2.4vw, 30px); perspective: 700px; }
.papillon img { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
.papillon__aile--g { transform-origin: 42% 40%; }
.papillon__aile--d { transform-origin: 60% 40%; }
/* mode animé : quand la journée entre à l'écran, les ailes se déplient autour du corps « pour », puis deux battements
   et une pause, en boucle, pendant que le papillon flotte. Hors de l'écran, tout s'arrête (classe posée par sdv.js).
   En mode doux ou réduit : le logo immobile. */
html.anime .papillon img { opacity: 0; }
html.anime .est-vu .papillon__aile--g { animation: epe-deplie-g 1.3s var(--ease-expo) .35s both, epe-bat-g 3.4s ease-in-out 2.1s infinite; }
html.anime .est-vu .papillon__aile--d { animation: epe-deplie-d 1.3s var(--ease-expo) .35s both, epe-bat-d 3.4s ease-in-out 2.1s infinite; }
html.anime .est-vu .papillon__corps { animation: epe-monte .8s var(--ease-expo) .2s both; }
html.anime .est-vu .papillon__nom { animation: epe-monte .8s var(--ease-expo) .75s both; }
html.anime .est-vu .papillon { animation: epe-flotte 2.8s ease-in-out 2.1s infinite alternate; }
.papillon--repos, .papillon--repos img { animation-play-state: paused !important; }
html.reduit .papillon, html.reduit .papillon img { animation: none !important; opacity: 1 !important; transform: none !important; }
@keyframes epe-deplie-g { from { opacity: 0; transform: rotateY(84deg); } to { opacity: 1; transform: none; } }
@keyframes epe-deplie-d { from { opacity: 0; transform: rotateY(-84deg); } to { opacity: 1; transform: none; } }
@keyframes epe-bat-g { 0%, 54%, 100% { transform: none; } 13%, 40% { transform: rotateY(38deg); } 27% { transform: rotateY(4deg); } }
@keyframes epe-bat-d { 0%, 54%, 100% { transform: none; } 13%, 40% { transform: rotateY(-38deg); } 27% { transform: rotateY(-4deg); } }
@keyframes epe-monte { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes epe-flotte { from { transform: none; } to { transform: translateY(-6px); } }
@media (max-width: 860px) {
  .chapitre { grid-template-columns: 1fr; }
  .chapitre__tete { position: static; grid-template-columns: auto 1fr; column-gap: 18px; align-items: end; }
  .chapitre__num { grid-row: span 3; font-size: 84px; }
  .chapitre__texte, .chapitre__compte, .papillon { grid-column: 1 / -1; }
  .papillon { width: 170px; margin-top: 6px; }
  .chapitre__photos { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; }
}

/* ---------- Passe de finesse (24/10/2026) ---------- */
/* la fiche technique, comme au dos d'une bouteille */
.fiche-tech { display: grid; justify-items: center; align-content: center; gap: 6px; padding: clamp(26px, 2.6vw, 38px) clamp(22px, 2.4vw, 34px); text-align: center; }
.fiche-tech__haut { font: 700 10.5px/1.2 var(--f-texte); letter-spacing: .26em; text-transform: uppercase; color: var(--or-sombre); }
.fiche-tech__cuvee { margin-top: 6px; font: 400 clamp(44px, 4.2vw, 64px)/.95 var(--f-affiche); color: var(--grenat); }
.fiche-tech__cuvee sup { font-size: .42em; vertical-align: 1.15em; }
.fiche-tech__millesime { display: flex; align-items: center; gap: 12px; font: italic 500 17px/1 var(--f-italique); color: var(--encre-2); }
.fiche-tech__millesime::before, .fiche-tech__millesime::after { content: ""; width: 26px; height: 1px; background: var(--or); }
.fiche-tech__lignes { width: 100%; margin: 16px 0 10px; border-top: 1px solid rgba(138, 98, 32, .35); border-bottom: 1px solid rgba(138, 98, 32, .35); padding: 8px 0; }
.fiche-tech__lignes div { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 10px; padding: 7px 0; }
.fiche-tech__lignes div::after { content: ""; order: 1; height: 1px; align-self: end; margin-bottom: 6px; background: radial-gradient(circle, rgba(42, 15, 20, .4) 1px, transparent 1.4px) 0 0 / 6px 1px repeat-x; }
.fiche-tech__lignes dt { order: 0; font-size: 14.5px; color: var(--encre-2); text-align: left; }
.fiche-tech__lignes dd { order: 2; margin: 0; font: 400 26px/1 var(--f-affiche); color: var(--encre); font-variant-numeric: lining-nums tabular-nums; }
.fiche-tech__bas { font-size: 12.5px; line-height: 1.5; color: var(--gris); }

/* contact : une ligne par profil, plutôt que trois cartes identiques */
.contact-grille { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.contact-grille__intro { position: sticky; top: calc(var(--h-entete) + 24px); display: grid; gap: 14px; }
.contacts-liste { border-top: 1px solid var(--filet-sombre); }
.contacts-liste li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 12px 32px; padding: 26px 0; border-bottom: 1px solid var(--filet-sombre); }
.contacts-liste__qui { font: 400 clamp(22px, 2vw, 30px)/1.1 var(--f-affiche); color: var(--encre); }
.contacts-liste__quoi { display: grid; gap: 10px; font-size: 15.5px; color: var(--encre-2); }
.contacts-liste__quoi a { color: var(--grenat); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.contacts-liste__noms { display: grid; grid-template-columns: auto 1fr; gap: 4px 18px; padding-top: 4px; }
.contacts-liste__noms span { font-weight: 700; color: var(--encre); }

/* détails de lecture */
.titre, .titre-page, .chapitre__titre, .contacts-liste__qui { text-wrap: balance; }
.texte, .chapo, .prose p, .tuile p, .faq details p { text-wrap: pretty; }
.tete-bloc > div { gap: 0; }
.bref__texte { gap: 16px; }

@media (max-width: 860px) {
  .contact-grille { grid-template-columns: 1fr; }
  .contact-grille__intro { position: static; }
  .contacts-liste li { grid-template-columns: 1fr; }
  .frise { grid-template-columns: 1fr; }
}
/* exposants (25e, 24e) dans les libellés espacés : collés au chiffre, en minuscule */
.surtitre sup, .fiche-tech__haut sup, .faits sup, .billet__date sup { letter-spacing: 0; text-transform: none; margin-left: .05em; }

/* ---------- Espace presse ---------- */
.presse-grille { display: grid; grid-template-columns: minmax(0, 7.6fr) minmax(0, 4.4fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.presse-intro .texte a { color: var(--grenat); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.presse-colonne { display: grid; gap: var(--gouttiere); align-content: start; }
/* les trois blocs à copier (fiche pratique, texte court, texte de présentation) : une étiquette papier chacun */
.reprise { display: grid; gap: 14px; padding: clamp(20px, 2.2vw, 28px); }
.reprise__tete { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.reprise__tete > div { display: grid; gap: 3px; margin-right: auto; }
.reprise__titre { font: 400 clamp(21px, 1.8vw, 26px)/1.1 var(--f-affiche); color: var(--encre); }
.reprise__pour { font-size: 13.5px; line-height: 1.4; color: var(--gris); }
.reprise__corps { display: grid; gap: 10px; max-width: 70ch; font-size: 15.5px; line-height: 1.6; color: var(--encre-2); }
.btn.est-copie { --bg: var(--encre); --fg: var(--clair); }
.presse-fiche__liste { border-top: 1px solid var(--encre); }
.presse-fiche__liste div { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(0, 3.4fr); gap: 4px 20px; padding: 9px 0; border-bottom: 1px solid var(--filet-sombre); }
.presse-fiche__liste dt { font: 700 12px/1.5 var(--f-texte); letter-spacing: .08em; text-transform: uppercase; color: var(--grenat); }
.presse-fiche__liste dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--encre); }
.presse-cote { position: sticky; top: calc(var(--h-entete) + 24px); display: grid; gap: var(--gouttiere); }
/* collante seulement si elle tient sous l'en-tête (≈ 920 px de haut) : sinon ses derniers liens resteraient hors écran pendant tout le défilement */
@media (max-height: 1040px) { .presse-cote { position: static; } }
.presse-contact { display: grid; gap: 8px; padding: clamp(22px, 2.2vw, 30px); }
.presse-contact__titre { font: 400 26px/1.1 var(--f-affiche); color: var(--grenat); margin-bottom: 6px; }
.presse-contact__nom { font-weight: 700; font-size: 17px; color: var(--encre); }
.presse-contact__role { font-size: 14px; color: var(--gris); }
.presse-contact__lignes { display: grid; gap: 4px; margin-top: 6px; font-size: 15px; color: var(--encre-2); }
.presse-contact__lignes a { color: var(--grenat); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.presse-liens { display: grid; border-top: 1px solid var(--filet-sombre); }
.presse-liens a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 2px; border-bottom: 1px solid var(--filet-sombre); font-weight: 600; font-size: 15px; color: var(--encre); transition: color var(--d-survol), padding var(--d-survol) var(--ease-quint); }
.presse-liens a:hover { color: var(--grenat); padding-left: 8px; }
.presse-liens .ic { color: var(--grenat); flex: none; }
/* le kit de diffusion (cartes de téléchargement) : bloc « Espace presse, kit de diffusion » en fin de fichier */
@media (max-width: 860px) {
  .presse-grille { grid-template-columns: 1fr; }
  .presse-cote { position: static; }
  .presse-fiche__liste div { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- Retours de Codex Astra (24/10/2026) ---------- */
/* lien lisible sur la tuile crème d'une section sombre */
.tuile--texte .lien-fleche { color: var(--grenat); }
/* exposants : trois colonnes lisibles, noms entiers */
@media (min-width: 1101px) { .exposants { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 14px !important; } }
.exposant__nom { font-size: 17px !important; line-height: 1.2 !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
.exposant__region { white-space: nowrap; overflow: visible; }
/* fiche du plan : hauteur liée au contenu */
.fiche { align-self: start; }
/* pied de page plus lisible */
.pied__bas-in { font-size: 13px; color: rgba(246, 238, 226, .78); }
/* respiration entre deux sections crème consécutives */
.zone--papier + .zone--papier { padding-top: clamp(24px, 3vw, 44px); }
.tete-bloc { margin-bottom: clamp(20px, 2.4vw, 32px); }
@media (max-width: 1100px) and (min-width: 621px) { .partenaires__grille { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* bandeau partenaires immobile (animations coupées) : une seule ligne centrée sous son titre */
html.doux .bande-partenaires { grid-template-columns: 1fr; justify-items: center; gap: 12px; text-align: center; }
html.doux .bande-partenaires ul { gap: clamp(20px, 2.6vw, 40px); padding-right: 0; }
html.doux .bande-partenaires img { height: 40px; max-width: 140px; }

/* logo du Rotary Club Thionville Rive Droite bien visible dans l'en-tête (demandes du 24 et du 26/10/2026) */
.marque { gap: 18px; }
.marque__filet { height: 48px; }
.marque__rotary { height: 60px; opacity: 1; }
@media (max-width: 1280px) { .marque__rotary, .marque__filet { display: block; } .marque__rotary { height: 54px; } }
@media (max-width: 860px) { .marque { gap: 12px; } .marque__rotary { height: 46px; } .marque__filet { height: 36px; } }
@media (max-width: 360px) { .marque__rotary { height: 38px; } }
/* pied de page : le logo du club en grand */
.pied__rotary { display: block; height: 72px; width: auto; }
@media (max-width: 620px) { .pied__rotary { height: 62px; } }

/* partenaires avec site : toute la carte est cliquable */
.partenaire--lien { padding: 0; }
.partenaire--lien a { display: grid; grid-template-rows: 1fr auto auto; justify-items: center; align-items: center; gap: 8px; width: 100%; height: 100%; padding: 20px 14px 12px; }
.partenaire__site { display: inline-flex; align-items: center; gap: 5px; font: 700 10.5px/1 var(--f-texte); letter-spacing: .08em; text-transform: uppercase; color: var(--grenat); opacity: .55; transition: opacity var(--d-survol); }
.partenaire__site .ic { font-size: 12px; }
.partenaire--lien:hover .partenaire__site, .partenaire--lien a:focus-visible .partenaire__site { opacity: 1; }
.bande-partenaires a { display: block; }
.bande-partenaires a:hover img, .bande-partenaires a:focus-visible img { filter: none; opacity: 1; }

/* ---------- Devenir partenaire ---------- */
.formules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gouttiere); align-items: stretch; }
.formule { display: grid; grid-template-rows: auto auto 1fr auto; gap: 16px; padding: clamp(24px, 2.6vw, 38px); }
.formule__tete { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid rgba(138, 98, 32, .4); }
.formule__nom { font: 400 clamp(30px, 2.6vw, 40px)/1 var(--f-affiche); color: var(--encre); }
.formule__prix { font: 400 clamp(46px, 4.4vw, 68px)/.9 var(--f-affiche); color: var(--encre); white-space: nowrap; }
.formule__net { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font: italic 500 16px/1.3 var(--f-italique); color: var(--encre-2); }
.formule__net b { font: 400 26px/1 var(--f-affiche); font-style: normal; color: var(--grenat); white-space: nowrap; }
.formule__liste { display: grid; gap: 14px; align-content: start; }
.formule__liste li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 15px; line-height: 1.4; color: var(--encre-2); }
.formule__liste .ic { font-size: 20px; color: var(--or-sombre); margin-top: 2px; }
.formule__liste b { display: block; font-weight: 700; color: var(--grenat); }
.formule__choix { justify-self: start; margin-top: 6px; }
.formule--premium { background: linear-gradient(160deg, #4A1220, var(--bordeaux) 55%, #26090F); color: var(--clair-2); }
.formule--premium::before { border-color: rgba(237, 216, 134, .45); }
.formule--premium .formule__tete { border-bottom-color: rgba(237, 216, 134, .3); }
.formule--premium .formule__nom { color: var(--clair); }
.formule--premium .formule__prix, .formule--premium .formule__net b { color: var(--or-clair); }
.formule--premium .formule__net { color: var(--clair-2); }
.formule--premium .formule__liste li { color: var(--clair-2); }
.formule--premium .formule__liste b { color: var(--or-clair); }
.formule--premium .formule__liste .ic { color: var(--or); }

.pourquoi { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 60px); align-items: center; }
.pourquoi > div { display: grid; gap: 16px; justify-items: start; }

.inscription { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.inscription__cote { position: sticky; top: calc(var(--h-entete) + 24px); display: grid; gap: 18px; justify-items: start; }
.inscription__contacts { display: grid; gap: 8px; width: 100%; padding: 16px 0; border-top: 1px solid var(--filet-sombre); border-bottom: 1px solid var(--filet-sombre); font-size: 15px; }
.inscription__contacts p { display: grid; gap: 1px; color: var(--encre-2); }
.inscription__contacts b { color: var(--encre); }
.inscription__contacts a { color: var(--grenat); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.inscription__label { font: 700 12px/1.4 var(--f-texte); letter-spacing: .06em; text-transform: uppercase; color: var(--or-sombre); }

.formulaire { display: grid; gap: 22px; padding: clamp(22px, 2.6vw, 38px); background: #FFFDF9; border: 1px solid rgba(138, 98, 32, .25); }
.formulaire fieldset { margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.formulaire legend { grid-column: 1 / -1; margin-bottom: 10px; font-weight: 700; font-size: 15px; color: var(--encre); }
.choix-formule { position: relative; display: block; cursor: pointer; }
.choix-formule input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choix-formule > span { display: grid; gap: 4px; height: 100%; padding: 16px 16px 16px 46px; border: 1px solid var(--filet-sombre); background: var(--papier); font-size: 14px; line-height: 1.4; color: var(--encre-2); transition: border-color var(--d-survol), background-color var(--d-survol), box-shadow var(--d-survol); }
.choix-formule > span::before { content: ""; position: absolute; left: 16px; top: 18px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--encre-2); background: #fff; box-shadow: inset 0 0 0 4px #fff; transition: background-color var(--d-survol), border-color var(--d-survol); }
.choix-formule b { font: 400 22px/1.1 var(--f-affiche); color: var(--encre); }
.choix-formule:hover > span { border-color: var(--or); }
.choix-formule input:checked + span { border-color: var(--grenat); background: #FBF0EF; box-shadow: inset 0 0 0 1px var(--grenat); }
.choix-formule input:checked + span::before { border-color: var(--grenat); background: var(--grenat); }
.choix-formule input:focus-visible + span { outline: 2px solid var(--or); outline-offset: 3px; }
.formulaire__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.champ { display: grid; gap: 6px; margin: 0; }
.champ--large { grid-column: 1 / -1; }
.champ label { font-weight: 700; font-size: 14px; color: var(--encre); }
.champ label span, .formulaire legend span, .formulaire__accord > span > span, .formulaire__obligatoire span { color: var(--grenat); }
.champ input, .champ textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid #CDBCA6; border-radius: 2px; background: #fff; font: 400 16px/1.4 var(--f-texte); color: var(--encre); transition: border-color var(--d-survol), box-shadow var(--d-survol); }
.champ textarea { resize: vertical; min-height: 110px; }
.champ input:hover, .champ textarea:hover { border-color: var(--encre-2); }
.champ input:focus, .champ textarea:focus { outline: none; border-color: var(--grenat); box-shadow: 0 0 0 3px rgba(175, 29, 53, .16); }
.champ--erreur input, .champ--erreur textarea { border-color: #C0263E; box-shadow: 0 0 0 3px rgba(192, 38, 62, .14); }
fieldset.champ--erreur .choix-formule > span, label.champ--erreur > span { border-color: #C0263E; }
.champ--piege { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulaire__logo { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; font-size: 14px; color: var(--encre-2); }
.formulaire__logo .ic { font-size: 18px; color: var(--or-sombre); margin-top: 1px; }
.formulaire__accord { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14px; line-height: 1.5; color: var(--encre-2); cursor: pointer; }
.formulaire__accord input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--grenat); }
.formulaire__accord a { color: var(--grenat); text-decoration: underline; text-underline-offset: 3px; }
.formulaire__accord.champ--erreur { color: #A21F33; }
.formulaire__envoi { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.formulaire__obligatoire { font-size: 13px; color: var(--gris); }
.formulaire[aria-busy="true"] button[type="submit"] { opacity: .7; pointer-events: none; }
.formulaire__retour { font-size: 15px; font-weight: 600; }
.formulaire__retour:empty { display: none; }
.formulaire__retour--ok { padding: 14px 16px; background: #EEF5EC; border: 1px solid #9DBF94; color: #2E5A25; }
.formulaire__retour--erreur { padding: 14px 16px; background: #FBEDEF; border: 1px solid #E3A3AE; color: #8E1B2E; }
.formulaire__retour--info { padding: 14px 16px; background: #FBF4E6; border: 1px solid #E2C68C; color: #6A4B12; }

@media (max-width: 860px) {
  .formules, .pourquoi, .inscription { grid-template-columns: 1fr; }
  .inscription__cote { position: static; }
  .formulaire fieldset, .formulaire__grille { grid-template-columns: 1fr; }
  .formule__tete { flex-wrap: wrap; }
}

/* formulaire partenaire : blocs, SIREN, adresse, logo */
.formulaire__bloc { margin: 0; padding: 18px 0 0; border: 0; border-top: 1px solid var(--filet-sombre); }
.formulaire__bloc legend { padding: 0 0 12px; font: 400 22px/1.1 var(--f-affiche); color: var(--encre); }
.formulaire__grille { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.formulaire__grille > .champ { grid-column: span 3; }
.formulaire__grille > .champ--large { grid-column: 1 / -1; }
.formulaire__grille > .champ--court { grid-column: span 2; }
.formulaire__grille > .champ--long { grid-column: span 4; }
.champ__ligne { display: flex; gap: 10px; align-items: stretch; }
.champ__ligne input { flex: 1; min-width: 0; }
.champ__ligne .btn { flex: none; min-height: 48px; }
.champ__aide { font-size: 13.5px; line-height: 1.45; color: var(--gris); }
.champ__aide--ok { color: #2E6A25; font-weight: 600; }
.champ__aide--erreur { color: #A21F33; font-weight: 600; }
.champ__facultatif { font-weight: 500; font-size: 12.5px; color: var(--gris) !important; margin-left: 4px; }
.depot { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 14px; border: 1px dashed #BFA98C; background: var(--papier); cursor: pointer; transition: border-color var(--d-survol), background-color var(--d-survol); }
.depot:hover, .depot:focus-within { border-color: var(--grenat); background: #FBF3EE; }
.depot input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.depot__vignette { display: grid; place-items: center; width: 64px; height: 64px; background: #fff; border: 1px solid var(--filet-sombre); overflow: hidden; color: var(--grenat); }
.depot__vignette .ic { font-size: 22px; transform: rotate(180deg); }
.depot__vignette img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.depot__texte { display: grid; gap: 2px; font-size: 13.5px; color: var(--encre-2); }
.depot__texte b { font-size: 14.5px; color: var(--grenat); word-break: break-all; }
@media (max-width: 860px) {
  .formulaire__grille > .champ, .formulaire__grille > .champ--court, .formulaire__grille > .champ--long { grid-column: 1 / -1; }
  .champ__ligne { flex-direction: column; }
}

/* appel à candidature au bas de la liste des exposants */
.candidater { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 18px; padding: 18px 20px; background: var(--papier); border: 1px solid var(--filet-sombre); }
.candidater > span { font: 400 20px/1.2 var(--f-affiche); color: var(--encre); }
.formulaire fieldset.formulaire__bloc { display: block; }
.formulaire__bloc .formulaire__grille { width: 100%; }

/* verso du billet en texte (le verso imprimé portait un slogan incompatible avec la loi Évin) */
.billet3d__dos { display: grid; place-content: center; gap: 10px; padding: 5% 8%; text-align: center; background: var(--papier); background-image: var(--verge); color: var(--encre); }
.billet3d__dos b { font: 400 clamp(20px, 2.6vw, 34px)/1.05 var(--f-affiche); }
.billet3d__dos span { font-size: clamp(13px, 1.3vw, 16px); line-height: 1.45; color: var(--encre-2); max-width: 46ch; margin: 0 auto; }
.billet3d__dos small { font-size: clamp(11px, 1vw, 13px); color: var(--gris); }
.billet3d__dos strong { font-size: clamp(11px, 1vw, 13px); font-weight: 800; color: var(--grenat); }

.texte--note { font-size: 13.5px; line-height: 1.55; color: var(--gris); max-width: 72ch; }

/* ---------- Revue visuelle du 25/10/2026 ---------- */
/* chiffres de « Votre soutien se voit » : ils débordaient de leurs cases */
.pourquoi .chiffres-bande b { font-size: clamp(32px, 2.7vw, 50px); }
@media (min-width: 861px) and (max-width: 1500px) { .pourquoi .chiffres-bande { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* menu sur une ligne entre 1101 et 1250 px (portables 13 pouces, écrans zoomés) */
.menu a { white-space: nowrap; }
@media (min-width: 1101px) and (max-width: 1250px) { .marque__rotary, .marque__filet { display: none; } }
/* titre de la tuile texte du programme : un vrai titre, pas une légende */
.tuile.tuile--texte .titre { font-size: clamp(26px, 2.4vw, 36px); line-height: 1.05; margin: 0; max-width: 18ch; }
/* mention IA de l'accueil : lisible et jamais sous le bouton pause */
.accueil__mention { font-size: 12px; letter-spacing: .06em; }
@media (max-width: 620px) { .accueil__mention { left: var(--marge); right: auto; bottom: 84px; } }
/* « 25e » du surtitre : l'exposant reste collé au chiffre */
.surtitre sup { margin-left: -.2em; }
/* moins d'animations demandé par le système : plus rien ne défile tout seul */
html.reduit .defile ul, html.reduit .galerie__piste, html.reduit .bande-partenaires ul { animation: none; }
html.reduit .bande-partenaires ul { flex-wrap: wrap; width: auto; justify-content: center; padding-right: 0; }
html.reduit .bande-partenaires__rang { -webkit-mask: none; mask: none; }
html.reduit .galerie__rang { overflow-x: auto; }
/* logos des exposants : plus de boîtes blanches sur les cartes crème */
.exposant:not(.exposant--sombre) .exposant__logo:not(:has(.exposant__mono)) { background: transparent; border-color: transparent; }
.exposant:not(.exposant--sombre) .exposant__logo-img { mix-blend-mode: multiply; }
.exposant__mono { font-size: 24px !important; }
/* bandeau des partenaires : logos à leur couleur, poids plus égal */
.bande-partenaires img { height: 40px; max-width: 150px; filter: none; opacity: .88; mix-blend-mode: multiply; }
/* fiche d'attente du plan : une légende plutôt qu'un grand bloc vide */
.fiche__reperes { display: grid; gap: 16px; margin: 24px 0 6px; padding: 0; list-style: none; }
.fiche__reperes li { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: baseline; padding-top: 14px; border-top: 1px solid rgba(237, 216, 134, .18); }
.fiche__reperes b { font: 400 34px/1 var(--f-affiche); color: var(--or-clair); }
.fiche__reperes span { font-size: 14.5px; line-height: 1.5; color: var(--clair-2); }
/* deux photos larges + une normale sur téléphone : plus de case vide */
@media (max-width: 860px) { .chapitre__photo:first-child:nth-last-child(3) { grid-column: span 2; } }
/* cibles tactiles confortables au doigt */
@media (max-width: 860px) {
  .pied__col a { display: inline-block; padding-block: 6px; }
  .lien-fleche { min-height: 40px; }
  .fil a { display: inline-block; padding-block: 10px; }
  .bande-partenaires__lien { display: inline-block; padding-block: 12px; }
  .exposant__voir { min-width: 40px; min-height: 40px; }
}
/* focus visible aussi sur les boutons or */
.btn--or:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--lie), 0 0 0 4px var(--or-clair); }
/* lien du dossier de mécénat sur une ligne */
@media (min-width: 861px) and (max-width: 1180px) { .inscription__cote .btn span { white-space: nowrap; } }
@media (max-width: 860px) { .pied__liens a { display: inline-block; padding-block: 6px; } }

/* Accueil, panneau solidarité : mots clés en clair */
.solid__fort { color: var(--clair); font-weight: 700; }

/* =====================================================================
   Passe responsive et finitions du 25/10/2026 (téléphone et ordinateur)
   ===================================================================== */
/* B1. Billet de tombola retourné : sur téléphone et tablette, le verso s'agrandit, plus rien n'est coupé */
.billet3d__dos::before { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(138, 98, 32, .45); border-radius: 3px; pointer-events: none; }
@media (max-width: 860px) {
  @supports (height: 1cqi) {
    .billet3d-scene { container-type: inline-size; }
    .billet3d { aspect-ratio: auto; height: 35cqi; transition: height .7s var(--ease-expo); }   /* 35cqi = 70/200 : le format du billet */
    .billet3d[aria-pressed='true'] { height: max(35cqi, 272px, calc(560px - 100cqi)); }
    .billet3d__face--recto { inset: 0; height: 35cqi; margin-block: auto; }
    .billet3d__dos { gap: 8px; padding: 22px 20px; }
    .billet3d__dos b { font-size: 22px; }
    .billet3d__dos > span { font-size: 14px; line-height: 1.45; }
    .billet3d__dos small { font-size: 12px; line-height: 1.45; }
    .billet3d__dos strong { font-size: 12px; line-height: 1.4; }
  }
}
@media (max-width: 620px) {
  @supports not (height: 1cqi) {
    .billet3d__dos { gap: 6px; padding: clamp(8px, 2.6vw, 14px) clamp(12px, 4vw, 24px); }
    .billet3d__dos::before { display: none; }
    .billet3d__dos b { font-size: clamp(15px, 4.4vw, 24px); line-height: 1.05; }
    .billet3d__dos > span { font-size: clamp(11px, 3vw, 13px); line-height: 1.35; max-width: 44ch; }
    .billet3d__dos small { font-size: 11px; line-height: 1.35; }
    .billet3d__dos strong { font-size: clamp(10px, 2.7vw, 12px); line-height: 1.3; }
  }
}
@media (max-width: 540px) { @supports not (height: 1cqi) { .billet3d__dos small { display: none; } } }
@media (min-width: 861px) {
  .billet3d__dos b { position: relative; padding-bottom: 10px; }
  .billet3d__dos b::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 44px; height: 1px; margin-left: -22px; background: var(--or); }
}

/* B2. Moins d'animations : plus de logos ni de photos en double, rubans immobiles soignés */
html.reduit [data-defile] > li[aria-hidden='true'], html.reduit [data-galerie-piste] > li[aria-hidden='true'] { display: none; }
html.reduit .bande-partenaires { grid-template-columns: 1fr; justify-items: center; gap: 12px; text-align: center; }
html.reduit .bande-partenaires ul { gap: clamp(20px, 2.6vw, 40px); }
html.reduit .bande-partenaires img { height: 40px; max-width: 140px; }
html.reduit .galerie__rang, html.doux .galerie__rang { -webkit-mask: none; mask: none; padding-bottom: 8px; scroll-snap-type: x proximity; scroll-padding-inline: var(--marge); scrollbar-width: thin; scrollbar-color: rgba(210, 162, 76, .55) transparent; }
html.reduit .galerie__piste, html.doux .galerie__piste { padding-inline: var(--marge); }
html.reduit .galerie__piste > li, html.doux .galerie__piste > li { scroll-snap-align: start; }

/* B3. Bouton pause du fond vidéo : il ne mord plus sur la dernière carte */
.zone:has(> .pause-video) { padding-bottom: max(var(--rythme), 76px); }

/* B4. Fil d'Ariane aligné et lisible (surtitre d'étiquette) */
.fil { flex-wrap: wrap; align-items: center; gap: 4px 12px; font: 700 11px/1.2 var(--f-texte); letter-spacing: .18em; text-transform: uppercase; color: var(--clair-3); }
.fil a { color: var(--clair-2); text-decoration: underline; text-decoration-color: rgba(210, 162, 76, .55); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color var(--d-survol), text-decoration-color var(--d-survol); }
.fil a:hover { color: var(--or-clair); text-decoration-color: currentColor; }
.fil span[aria-hidden] { color: var(--or); opacity: .7; }
.fil [aria-current='page'] { color: var(--or-clair); }
@media (max-width: 860px) { .fil { margin-bottom: 6px; } }

/* B5. Liens fléchés au doigt : zone tactile invisible, soulignement collé au texte */
@media (max-width: 860px) {
  .lien-fleche { min-height: 0; position: relative; }
  .lien-fleche::before { content: ''; position: absolute; inset: -11px -6px; }
}

/* B6. Lien e-mail visible dans la carte du club */
.club-carte p a { color: var(--or-clair); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--d-survol); }
.club-carte p a:hover { color: var(--clair); text-decoration-thickness: 2px; }

/* B7. Focus clavier lisible sur les fonds crème (grenat), or clair sur les blocs sombres posés dessus */
.zone--papier :focus-visible, .exposants-section :focus-visible, .infos :focus-visible, .etiquette--papier :focus-visible, .tuile--texte :focus-visible, .bande-partenaires :focus-visible, .formulaire :focus-visible { outline-color: var(--grenat); }
.choix-formule input:focus-visible + span { outline-color: var(--grenat); }
.zone--papier .sombre :focus-visible, .zone--papier .etiquette--nuit :focus-visible, .zone--papier .formule--premium :focus-visible { outline-color: var(--or-clair); }
.galerie__rang .galerie__item:focus-visible { outline-offset: -3px; }
/* (les boutons or gardent leur anneau en box-shadow : ces règles ne changent que la couleur, leur outline:none reste) */

/* B8. FAQ : deux colonnes stables, une question ouverte ne fait plus sauter les autres */
.faq { columns: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px var(--gouttiere); align-items: start; }
.faq__col { display: grid; gap: 10px; align-content: start; }
.faq details { margin-bottom: 0; }
@media (max-width: 860px) { .faq { grid-template-columns: 1fr; } }

/* B9. Dépôt du logo : texte d'aide en encre normale, seul « Choisir un fichier » en grenat */
.depot .depot__texte { color: var(--encre-2); font-weight: 400; }
.depot .depot__texte b { color: var(--grenat); font-weight: 700; }

/* B10. Fiche du stand : lien masqué quand il n'a pas de cible, pastille et lien chacun sur sa ligne */
.fiche__region { display: flex; width: fit-content; }
.fiche__lien { display: flex; width: fit-content; margin-top: 16px; color: var(--or-clair); }
.fiche__lien[hidden] { display: none; }

/* B11. Exposants : la ligne « Stand · région » peut passer à la ligne */
.exposant__haut { flex-wrap: wrap; row-gap: 1px; }

/* B12. Le rail des partenaires reste dans la largeur de l'écran */
.bande-partenaires__rang { justify-self: stretch; min-width: 0; }

/* B13. Bouton Facebook du pied : icône recentrée sur mobile */
@media (max-width: 860px) { .pied__col a.reseau { display: grid; padding-block: 0; } }

/* B14. Programme de l'accueil : titre pleine largeur sur téléphone, liens à la largeur de leur texte */
@media (max-width: 620px) { .prog__intro { grid-template-columns: 1fr; align-items: start; gap: 16px; } }
.prog__intro .lien-fleche, .solid .btn { justify-self: start; }

/* B15. Noms des domaines sans logo lisibles sur les stands sombres */
.pstand--sombre .pstand__nom { color: var(--or-clair); }

/* I1. Tombola : titre d'abord sur téléphone ; billet en grand sous un texte en 2 colonnes entre 861 et 1180 px */
@media (max-width: 860px) { .billet3d-scene { order: 0; margin-top: 8px; } }
@media (min-width: 861px) and (max-width: 1180px) {
  .tombola__grille { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .tombola__texte { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(28px, 4vw, 56px); align-items: start; }
  .tombola__texte > .titre, .tombola__texte > .texte { grid-column: 1; }
  .tombola__etapes { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
  .tombola__texte > .note { grid-column: 2; margin-top: 0; }
  .billet3d__dos b { font-size: clamp(28px, 3vw, 34px); }
  .billet3d__dos > span { font-size: 15.5px; }
  .billet3d__dos small, .billet3d__dos strong { font-size: 12.5px; }
}

/* I2. Partenaires : noms alignés, rangées équilibrées, « Voir le site » lisible */
.partenaire--lien { grid-template-rows: 1fr; gap: 0; }
.partenaire:not(.partenaire--lien) { grid-template-rows: 1fr auto auto; gap: 8px; padding: 20px 14px 12px; }
.partenaire:not(.partenaire--lien)::after { content: ''; height: 12px; }   /* place de « Voir le site » */
.partenaire__site { opacity: .85; }
@media (min-width: 1101px) { .partenaires__grille { grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); } }
@media (min-width: 621px) and (max-width: 1100px) {
  .partenaires__grille { display: flex; flex-wrap: wrap; justify-content: center; }
  .partenaires__grille > .partenaire { flex: 0 1 calc((100% - 3 * 14px) / 4); }
}
@media (max-width: 620px) { .partenaires__grille > li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 5px); } }

/* I3. Chiffres des en-têtes : plus de case orpheline */
@media (min-width: 621px) and (max-width: 860px) {
  .faits { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(0, 1fr); }
  .faits li:nth-child(2n) { border-right: 1px solid var(--filet); }
  .faits li:nth-child(n+3) { border-top: 0; }
  .faits li:last-child { border-right: 0; }
}
@media (max-width: 620px) { .faits li:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* I4. Titres de section plus présents sur tablette */
@media (max-width: 860px) { .titre:not(.titre--moyen) { font-size: clamp(36px, calc(24px + 3vw), 46px); } }

/* I5. Pied mobile en 2 colonnes, cibles de 43 px au doigt (téléphone et tablette tactile) */
@media (max-width: 620px) {
  .pied__haut { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 20px; }
  .pied__marque, .pied__col:last-child { grid-column: 1 / -1; }
}
@media (max-width: 860px), (pointer: coarse) {
  .pied__col li a, .pied__col p a, .pied__liens a { display: inline-block; padding-block: 10px; }
  .pied__col ul { gap: 0; }
  .fil a { display: inline-block; padding-block: 10px; }
  .bande-partenaires__lien { display: inline-block; padding-block: 12px; }
}

/* I7. Panneaux solidarité et infos empilés : même respiration que les autres sections */
@media (max-width: 1100px) { .solid, .infos { padding-block: var(--rythme); } }

/* I8. Légende de la carte : dégradé pleine largeur ; légendes des photos un cran plus lisibles */
.carte__visuel .carte__legende { left: 0; right: 0; bottom: 0; padding: 40px 18px 16px; background: linear-gradient(0deg, rgba(23, 10, 13, .85), transparent); font: 700 11px/1.3 var(--f-texte); letter-spacing: .16em; }
.photo figcaption { font-size: 11px; letter-spacing: .14em; }

/* I9. Consigne de la carte adaptée au tactile */
.si-doigt { display: none; }
@media (hover: none) { .si-souris { display: none; } .si-doigt { display: inline; } }

/* I10. Billets du programme (accueil) en ticket horizontal sur tablette et téléphone (.billet > … : les cartes .jour du programme ne sont pas touchées) */
@media (min-width: 360px) and (max-width: 860px) {
  .billet { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: clamp(18px, 5vw, 48px); align-items: center; }
  .billet > .billet__haut { grid-column: 1 / -1; }
  .billet > .billet__date { margin: 16px 0 4px; }
  .billet > ul { align-self: stretch; align-content: center; padding: 16px 0 0 clamp(16px, 4vw, 40px); border-left: 1px dashed rgba(210, 162, 76, .35); }
}
@media (max-width: 480px) {
  .billet { padding: 20px 18px 18px; }
  .billet > .billet__date { font-size: 56px; }
  .billet > ul { font-size: 14px; gap: 7px; }
}

/* I11. Plan de salle : plus de place au plan sur les portables */
@media (min-width: 1101px) and (max-width: 1320px) {
  .salle__grille { grid-template-columns: minmax(0, 1fr) 250px; }
  .fiche { padding: 22px 20px 20px; }
}

/* I12. Plan au téléphone : numéros lisibles, pastilles au doigt, défilement des régions signalé */
@media (max-width: 700px) {
  .pstand:has(.pstand__nom) .pstand__nom { display: none; }
  .pstand:has(.pstand__nom) .pstand__num { position: static; font-size: calc(var(--u) * 3.6); }
  .pstand--clair:has(.pstand__nom) .pstand__num { color: var(--grenat); }
  .pstand--association .pstand__in::after, .pstand--libre .pstand__in::after { display: none; }
  .plan__porte--issue { font-size: max(9px, calc(var(--u) * 1.6)); }
  .salle__filtres { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
}
@media (max-width: 600px) {
  .exposants__tete .filtre-regions { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
}
@media (max-width: 860px) { .filtre, .filtre-regions a { height: 40px; } }
@media (max-width: 380px) { .salle__cadre { width: min(100%, calc((92svh - var(--h-entete) - 16px) * .5671)); } }

/* I13. Feuille du stand compacte et opaque */
@media (max-width: 1100px) {
  .fiche.ouverte { padding: 18px 18px 16px; background: linear-gradient(180deg, #4A1420, #1C070B); }
  .fiche.ouverte .fiche__stand { padding-right: 48px; }
}
@media (max-width: 700px) {
  .fiche.ouverte .fiche__plein:not([hidden]) { display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 14px; align-items: start; }
  .fiche.ouverte .fiche__plein > * { grid-column: 2; }
  .fiche.ouverte .fiche__stand { grid-column: 1 / -1; }
  .fiche.ouverte .fiche__logo { grid-column: 1; grid-row: 2 / span 4; height: 84px; margin-top: 12px; padding: 8px; }
  .fiche.ouverte .fiche__logo img { max-width: 100%; max-height: 64px; }
  .fiche.ouverte .fiche__plein:has(> .fiche__logo:empty) > * { grid-column: 1 / -1; }
  .fiche.ouverte .fiche__nom { margin-top: 10px; font-size: 22px; }
  .fiche.ouverte .fiche__app { margin-top: 4px; font-size: 14px; line-height: 1.45; }
  .fiche.ouverte .fiche__region, .fiche.ouverte .fiche__lien { justify-self: start; }
}

/* I14. Mot en couleur lisible sur le fond lie-de-vin du plan */
.salle .titre em { color: var(--or-clair); }

/* I15. Tuile « Les lots » : la souche en haut, le texte à l'encre dessous */
.tuile--c { align-content: stretch; grid-template-rows: minmax(0, 1fr) auto auto; padding: 0; background: var(--papier); background-image: var(--verge); color: var(--encre); }
.tuile--c::after { display: none; }
.tuile--c > img { position: relative; inset: auto; z-index: 0; height: 0; min-height: 100%; object-fit: cover; border-bottom: 1px dashed rgba(138, 98, 32, .45); }
.tuile--c:hover > img { transform: none; }   /* l'image en flux ne doit pas grossir sur le texte */
.tuile--c h3 { padding: 14px 20px 0; color: var(--grenat); }
.tuile--c p { margin-top: 6px; padding: 0 20px 18px; color: var(--encre-2); }

/* I16. Récit 2025 : mosaïque sans trou (tablette et ordinateur), rubans à glisser (téléphone) */
@media (min-width: 621px) {
  .chapitre__photos { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(130px, 13.2vw, 200px); }
  #jeudi .chapitre__photo:first-child { grid-column: span 2; grid-row: span 2; }
  #vendredi .chapitre__photo--large { grid-column: 1 / -1; grid-row: span 2; }
  #samedi .chapitre__photo:nth-child(16) { grid-row: span 2; }
  #samedi .chapitre__photo:last-child { grid-column: 1 / -1; grid-row: span 2; }
}
@media (max-width: 620px) {
  .chapitre__photos { display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--marge); margin-inline: calc(-1 * var(--marge)); padding: 0 var(--marge) 6px; scrollbar-width: none; }
  .chapitre__photos::-webkit-scrollbar { display: none; }
  .chapitre__photo { flex: 0 0 auto; width: 74vw; height: 230px; scroll-snap-align: start; }
  .chapitre__photo--large { width: 86vw; }
  .chapitre__photo--haute { width: 52vw; }
  html.anime .chapitre__photos > [data-revele] { opacity: 1; transform: none; filter: none; }   /* pas de révélation floue hors écran */
}

/* I17. Écrans tactiles : légendes des photos toujours visibles */
@media (hover: none) { .galerie__legende { opacity: 1; transform: none; padding: 22px 10px 8px; } }

/* I18. Sommaire des jours : cibles de 44 px, retour à l'appui */
.sommaire-jours a { height: auto; min-height: 44px; transition: background-color var(--d-survol), color var(--d-survol), border-color var(--d-survol), transform var(--d-survol) var(--ease-quint); }
.sommaire-jours a:active { transform: scale(.97); }

/* I19. Infos pratiques : horaires compacts, boutons alignés, adresse et modération lisibles */
@media (min-width: 621px) and (max-width: 860px) { .horaires { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .horaire { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 16px 18px; }
  .horaire__jour, .horaire__date { grid-column: 1; }
  .horaire__h { grid-column: 2; grid-row: 1 / span 2; font-size: 17px; }
  .club-carte .actions .btn { flex: 1 1 auto; justify-content: center; }
}
#entree .actions .btn { flex: 1 1 auto; justify-content: center; }   /* toutes largeurs : deux lignes qui finissent au même bord, plus d'escalier */
@media (max-width: 380px) { .horaire__date { font-size: 20px; } .horaire__h { font-size: 16px; gap: 6px; } }
@media (min-width: 861px) and (max-width: 1280px) { #entree .grille-2 { grid-template-columns: 1fr; } }
@media (min-width: 861px) and (max-width: 1100px) { .horaire__date { font-size: 19px; } }

/* I20. Listes contact / histoire : lignes de lecture confortables, e-mails propres, liens qui réagissent */
.contacts-liste__quoi { max-width: 64ch; }
@media (min-width: 861px) and (max-width: 1100px) { .contacts-liste li { grid-template-columns: 1fr; gap: 8px; } }
@media (min-width: 621px) { .club-carte { grid-template-columns: auto minmax(0, 64ch); justify-content: center; } }
.contacts-liste__noms a { justify-self: start; }
@media (max-width: 480px) {
  .contacts-liste__noms { grid-template-columns: 1fr; gap: 0; }
  .contacts-liste__noms a { padding: 6px 0 12px; overflow-wrap: anywhere; }
}
.contacts-liste__quoi a { transition: color var(--d-survol), text-decoration-color var(--d-survol); }
.contacts-liste__quoi a:hover { color: var(--encre); text-decoration-color: var(--or); text-decoration-thickness: 2px; }

/* I21. Chiffres de la solidarité : « 350 000 € » tient dans sa case (.pourquoi .chiffres-bande b, plus spécifique, n'est pas touché) */
@media (min-width: 1101px) { .chiffres-bande b { font-size: clamp(44px, 3.7vw, 64px); } }

/* I22. Frise de la solidarité : plus d'année orpheline */
@media (min-width: 621px) and (max-width: 860px) { .frise { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 861px) and (max-width: 1100px) {
  .frise { grid-template-columns: 1fr; row-gap: 18px; }
  .frise li { display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 16px; align-items: baseline; padding-top: 16px; }
  .frise p { margin-top: 0; }
}


/* I24. Devenir partenaire : note fiscale sous les offres, offres et formulaire mieux répartis */
.formules__note { margin-top: clamp(22px, 2.6vw, 36px); padding-top: 18px; border-top: 1px solid var(--filet-sombre); max-width: 88ch; }
@media (min-width: 1101px) { .formules__note { max-width: none; columns: 2; column-gap: clamp(32px, 4vw, 64px); } }
@media (min-width: 700px) and (max-width: 860px) {
  .formules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .formule { padding: 22px; }
  .formule__tete { flex-wrap: nowrap; }
}
@media (max-width: 860px) {
  .formule__choix { justify-self: stretch; justify-content: space-between; font-size: 13px; letter-spacing: .04em; padding-inline: 18px; }
  .champ__ligne .btn { justify-content: center; }
}
@media (min-width: 621px) and (max-width: 860px) {
  .formulaire__grille > .champ { grid-column: span 3; }
  .formulaire__grille > .champ--large { grid-column: 1 / -1; }
  .formulaire__grille > .champ--court { grid-column: span 2; }
  .formulaire__grille > .champ--long { grid-column: span 4; }
  .champ__ligne { flex-direction: row; }
  .formulaire .formulaire__formules { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* .formulaire en tête : il faut battre .formulaire fieldset */
}
@media (min-width: 360px) and (max-width: 620px) {
  .formulaire__grille { column-gap: 12px; }
  .formulaire__grille > .champ--court { grid-column: span 2; }
  .formulaire__grille > .champ--long { grid-column: span 4; }
}
@media (max-width: 620px) {
  .formulaire { padding: 20px 16px; }
  .formulaire__envoi .btn { width: 100%; justify-content: center; }
  .formulaire__obligatoire { width: 100%; text-align: center; }
}

/* I25. Mentions légales : sommaire, chapitres marqués, message sanitaire mis en avant */
.tete-page:not(:has(.chapo)) { align-content: start; }   /* en-tête sans chapô (mentions légales) : fil d'Ariane à la même hauteur qu'ailleurs */
.legal-grille { display: grid; grid-template-columns: minmax(0, 70ch) minmax(220px, 300px); justify-content: space-between; gap: clamp(32px, 6vw, 110px); align-items: start; }
.legal__sommaire { order: 2; position: sticky; top: calc(var(--h-entete) + 24px); padding: 22px 24px; background: var(--papier); background-image: var(--verge); border: 1px solid var(--filet-sombre); }
.legal__sommaire-titre { margin-bottom: 8px; font: 700 12px/1.4 var(--f-texte); letter-spacing: .14em; text-transform: uppercase; color: var(--or-sombre); }
.legal__sommaire ol { display: grid; counter-reset: s; }
.legal__sommaire li { counter-increment: s; }
.legal__sommaire a { display: grid; grid-template-columns: 30px 1fr; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--filet-sombre); font-size: 14.5px; font-weight: 600; color: var(--encre-2); transition: color var(--d-survol), padding-left var(--d-survol); }
.legal__sommaire a::before { content: counter(s, decimal-leading-zero); font: 400 15px/1 var(--f-affiche); color: var(--grenat); }
.legal__sommaire a:hover { color: var(--grenat); padding-left: 4px; }
@media (max-width: 1100px) {
  .legal-grille { grid-template-columns: minmax(0, 1fr); }
  .legal__sommaire { order: 0; position: static; }
  .legal__sommaire ol { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); column-gap: 24px; }
}
.legal h2 { margin-top: clamp(26px, 3vw, 40px); padding-top: clamp(18px, 2vw, 24px); border-top: 1px solid var(--filet-sombre); }
.legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { margin-top: 8px; font: 700 12.5px/1.4 var(--f-texte); letter-spacing: .14em; text-transform: uppercase; color: var(--grenat); }
.prose .sante { padding: 14px 18px; border-left: 3px solid var(--grenat); background: rgba(175, 29, 53, .06); color: var(--encre); }

/* I26. Page introuvable : plein écran, grand 404 au filet d'or */
.tete-page--404 { min-height: clamp(560px, 100svh, 980px); align-content: center; padding-bottom: clamp(24px, 4vw, 56px); }
.erreur__code { font: 400 clamp(150px, 21vw, 330px)/.78 var(--f-affiche); letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1.5px rgba(237, 216, 134, .6); align-self: center; pointer-events: none; user-select: none; }
@media (max-width: 860px) { .erreur__code { order: -1; font-size: clamp(112px, 36vw, 220px); margin-bottom: 4px; } }
@media (max-width: 480px) { .tete-page--404 .actions { display: grid; grid-template-columns: 1fr; gap: 10px; } .tete-page--404 .actions .btn { justify-content: center; } }

/* I27. Tiroir : croix sur le burger, écrans courts, page bloquée derrière */
.tiroir__panneau { padding: 0 var(--marge) max(24px, env(safe-area-inset-bottom)); overscroll-behavior: contain; }
.tiroir__haut { flex: none; height: var(--h-entete); padding-bottom: 0; }
.tiroir__haut img { height: 44px; }
@media (max-width: 860px) { .tiroir__haut img { height: 38px; } }
/* 8 liens (Devenir partenaire) : sur les téléphones peu hauts (iPhone SE…), liens resserrés pour que tout tienne sans défiler. */
@media (max-height: 760px) { .tiroir__liens a { padding: 11px 0; font-size: 23px; } }
@media (max-height: 640px) { .tiroir__liens a { padding: 10px 0; font-size: 22px; } .tiroir__date { display: none; } }
html.tiroir-ouvert:not(.lenis) { overflow: hidden; }

/* I28. Bouton d'action visible dès que la place le permet */
@media (min-width: 480px) and (max-width: 1100px) {
  .entete__cta { display: inline-flex; margin-left: auto; }
  .entete__cta ~ .burger { margin-left: 0; }
}

/* I29. Défilé des partenaires : s'arrête avec le bouton pause et au clavier */
html.videos-pause .bande-partenaires ul, .bande-partenaires:focus-within ul { animation-play-state: paused; }

/* I30. Survol réservé aux cartes partenaires cliquables */
.partenaire:not(.partenaire--lien):hover { transform: none; box-shadow: none; border-color: rgba(138, 98, 32, .22); }
.partenaire:not(.partenaire--lien):hover::before { border-color: rgba(210, 162, 76, .28); }
.partenaire:not(.partenaire--lien):hover img { transform: none; }

/* E1. Respiration des sections */
:root { --rythme: clamp(56px, 7vw, 112px); }

/* E2. Solidarité + infos : deux panneaux qui finissent ensemble, bloc Rotary aéré */
@media (min-width: 1101px) {
  .infos { grid-template-rows: auto auto 1fr; }
  .infos__liste li { padding-block: 18px; font-size: 15.5px; }
  .infos__liste .ic { font-size: 22px; }
  .infos .actions { align-self: start; margin-top: clamp(24px, 2.6vw, 40px); }   /* remontés sous la liste (27/10/2026) */
  .solid__club { display: grid; justify-items: start; gap: 12px; }
}

/* E3. Tuiles du programme : mention IA lisible, tuile texte affirmée */
.tuile__no { padding: 5px 8px; background: rgba(23, 10, 13, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-radius: 2px; line-height: 1; }
.tuile--texte { gap: 16px; }
.tuile--texte .texte { font-size: 16.5px; max-width: 44ch; }
.tuile--texte .lien-fleche { justify-self: start; }

/* E4. Jours du programme compacts sur tablette et téléphone */
@media (max-width: 860px) { .jours { gap: 12px; } }
@media (min-width: 481px) and (max-width: 860px) {
  .jour { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(18px, 5vw, 44px); align-items: start; }
  .jour .billet__haut { grid-column: 1 / -1; }
  .jour .billet__date { margin: 16px 0 0; }
  .jour ul { margin-top: 18px; }
}
@media (max-width: 480px) {
  .jour .billet__date { display: flex; align-items: baseline; gap: 12px; margin: 16px 0 14px; font-size: 58px; }
  .jour .billet__date span { margin: 0; }
}

/* E5. Histoire et contact : titre en deux temps, lignes numérotées, e-mail du club en grand */
#titre-histoire em { display: block; }
.contacts-liste { counter-reset: ligne; }
.contacts-liste li { counter-increment: ligne; position: relative; }
.contacts-liste__qui::before { content: counter(ligne, decimal-leading-zero) ' —'; display: block; margin-bottom: 10px; font: 700 12px/1 var(--f-texte); letter-spacing: .22em; color: var(--or-sombre); }
.contacts-liste li::after { content: ''; position: absolute; left: 0; top: -1px; width: 64px; height: 2px; background: var(--grenat); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease-expo); }
.contacts-liste li:hover::after { transform: scaleX(1); }
.contacts-liste__qui { transition: color var(--d-survol); }
.contacts-liste li:hover .contacts-liste__qui { color: var(--grenat); }
.contact-mail { display: grid; gap: 8px; margin-top: 8px; padding: 18px 0; border-block: 1px solid var(--filet-sombre); font: 400 clamp(22px, 1.9vw, 30px)/1.1 var(--f-affiche); color: var(--grenat); overflow-wrap: anywhere; transition: color var(--d-survol); }
.contact-mail span:not(.courriel) { font: 700 11px/1 var(--f-texte); letter-spacing: .22em; text-transform: uppercase; color: var(--or-sombre); }
.contact-mail:hover { color: var(--encre); }

/* E6. FAQ : ouverture douce, question ouverte marquée */
.faq { interpolate-size: allow-keywords; }
.faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .45s var(--ease-expo), content-visibility .45s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }
.faq details { transition: border-color var(--d-survol); }
.faq details:hover, .faq details[open] { border-color: var(--or); }
.faq details[open] summary { color: var(--grenat); }

/* E7. Photos : 16/9 sur tablette, colonne d'#entree fermée sur ordinateur (!important : bat l'aspect-ratio écrit dans le HTML) */
@media (min-width: 621px) and (max-width: 860px) { .grille-12 > figure.photo, #entree figure.photo { aspect-ratio: 16 / 9 !important; } }
@media (min-width: 861px) {
  #entree .grille-12 > div:last-child { grid-template-rows: auto 1fr; }
  #entree .grille-12 > div:last-child > .photo { aspect-ratio: auto !important; min-height: 240px; }
  #entree .grille-12 > div:last-child > .photo img { position: absolute; inset: 0; }
}

/* E8. Partenaire et presse : finitions */
.formulaire__formules legend { margin-bottom: 12px; font: 400 22px/1.1 var(--f-affiche); color: var(--encre); }
.formule::before { transition: border-color .3s ease; }
@media (hover: hover) { .formule:hover::before { border-color: var(--or); } .formule--premium:hover::before { border-color: var(--or-clair); } }
.formule--premium .formule__liste { align-content: center; }
.formulaire.etiquette { border: 0; }
.inscription__contacts a, .presse-contact__lignes a { padding-block: 8px; margin-block: -6px; }
@media (min-width: 561px) and (max-width: 860px) { .presse-fiche__liste div { grid-template-columns: minmax(120px, 1fr) minmax(0, 3fr); gap: 6px 20px; } }
@media (max-width: 620px) { .pourquoi .chiffres-bande b { font-size: 46px; } .pourquoi .chiffres-bande li { padding: 18px 20px; } }
.presse-fiche__liste dd a { color: var(--grenat); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }   /* l'adresse du fichier agenda tient sur les petits écrans */

/* E9. Navigation : états de survol, bouton or en relief, bandeau papier, détails */
.burger, .tiroir__fermer { transition: background-color var(--d-survol), border-color var(--d-survol), transform var(--d-survol) var(--ease-quint); }
.burger:hover, .tiroir__fermer:hover { background: rgba(210, 162, 76, .14); border-color: var(--or); }
.burger:active, .tiroir__fermer:active { transform: scale(.94); }
.tiroir__liens a { transition: color var(--d-survol), transform .4s var(--ease-expo); }
.tiroir__liens a:hover { color: var(--or-clair); transform: translateX(6px); }
.tiroir__liens a[aria-current='page']::after { content: ''; width: 7px; height: 7px; margin-left: auto; align-self: center; transform: rotate(45deg); background: var(--or); }
.tiroir__fond { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.btn--or { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 24px -16px rgba(210, 162, 76, .8); transition: transform var(--d-survol) var(--ease-quint), box-shadow .35s var(--ease-expo); }
.btn--or:hover:not(:focus-visible) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 16px 34px -14px rgba(210, 162, 76, .85); }
.pied__col li a, .pied__col p a, .pied__liens a { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 5px; transition: color var(--d-survol), text-decoration-color var(--d-survol); }
.pied__col li a:hover, .pied__col p a:hover, .pied__liens a:hover { text-decoration-color: var(--or); }
.bande-partenaires { padding-block: clamp(22px, 2.6vw, 34px); background: var(--papier); background-image: var(--verge); border-top: 0; box-shadow: inset 0 1px 0 rgba(138, 98, 32, .3), inset 0 4px 0 var(--papier), inset 0 5px 0 rgba(138, 98, 32, .18); }
@media (max-width: 1280px) { .menu a::after { left: 6px; right: 6px; } }
.progression { height: 3px; }
.progression span { box-shadow: 0 0 10px rgba(237, 216, 134, .55); }
.pied__bas-in { padding-bottom: max(18px, env(safe-area-inset-bottom)); }
.entete--flou { background: rgba(23, 10, 13, .86); }

/* E10. Pied de page : un titre de fin, comme une dernière étiquette */
.pied__appel { display: grid; gap: 14px; padding-block: clamp(52px, 6vw, 96px) clamp(28px, 3vw, 44px); border-bottom: 1px solid var(--filet); }
/* titre de fin à l'échelle des titres de section (27/10/2026) : casse normale, deux lignes équilibrées, le lieu sous un filet d'or */
.pied__titre { font: 400 clamp(32px, 4.2vw, 62px)/1.04 var(--f-affiche); letter-spacing: -.005em; color: var(--clair); text-wrap: balance; }
.pied__titre em { font-style: normal; color: var(--or-clair); }
.pied__lieu { display: inline-flex; align-items: center; gap: 14px; font: 700 12px/1.5 var(--f-texte); letter-spacing: .2em; text-transform: uppercase; color: var(--or); }
.pied__lieu::before { content: ""; width: 36px; height: 1px; background: currentColor; opacity: .8; }
.pied__haut { padding-top: clamp(32px, 3.6vw, 52px); }

/* E11. Vignerons : pastilles et fiche en étiquette, monogrammes, appel à exposer, carte cliquable */
.filtre { border-radius: 2px; }
@media (hover: hover) and (pointer: fine) {
  .filtre:not(.actif):hover { background: rgba(237, 216, 134, .12); border-color: var(--or-clair); color: #FFF8E6; }
  .filtre:not(.actif):hover span { color: var(--or-clair); }
}
.fiche { border-radius: 2px; }
.fiche::before { content: ''; position: absolute; inset: 6px; border: 1px solid rgba(237, 216, 134, .18); pointer-events: none; }
.exposant__mono { letter-spacing: .02em; }
.candidater { justify-content: space-between; margin-top: clamp(22px, 2.6vw, 34px); padding: clamp(20px, 2.4vw, 30px) clamp(20px, 2.6vw, 36px); background: linear-gradient(160deg, #4A1220, var(--bordeaux) 60%, #26090F); border: 0; color: var(--clair); }
.candidater > span { color: var(--clair); font-size: clamp(20px, 2vw, 28px); }
.candidater .btn--trait { color: var(--or-clair); }
.candidater .btn--trait:hover { --bg: var(--or-clair); color: var(--lie); }
.exposants-section .candidater :focus-visible { outline-color: var(--or-clair); }   /* panneau lie-de-vin : anneau or clair (bat la règle grenat de B7) */
.exposant__voir::before { content: ''; position: absolute; inset: 0; }
.exposant { cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .exposant:hover .exposant__voir { background: var(--encre); color: var(--or-clair); border-color: var(--encre); } }
@supports selector(:has(*)) {
  .exposant:has(.exposant__voir:focus-visible) { outline: 2px solid var(--grenat); outline-offset: 2px; }
  .exposant__voir:focus-visible { outline: none; }
}

/* E12. Visionneuse : glisser du doigt */
.visionneuse { touch-action: pan-y pinch-zoom; }

/* R1. Reprise 1 : horaires qui ne se coupent plus au tiret, hero des téléphones courts */
.insecable { white-space: nowrap; }
@media (max-width: 620px) { .accueil__corps { padding-bottom: 76px; } }   /* la mention IA et le bouton pause ne recouvrent plus « Venir au salon » */

/* R2. Derniers points de la vérification croisée (25/10/2026) */
/* Galerie 2025 : consigne adaptée aux rubans immobiles (animations réduites) */
.si-fixe { display: none; }
html.reduit .si-anime, html.doux .si-anime { display: none; }
html.reduit .si-fixe, html.doux .si-fixe { display: inline; }
/* Visionneuse : un clic sur le fond sombre, à côté de la photo, ferme bien */
.visionneuse__fig { pointer-events: none; }
.visionneuse__fig > * { pointer-events: auto; }
/* Infos pratiques, 861 à 1100 px : l'horaire du samedi ne se coupe plus en deux */
@media (min-width: 861px) and (max-width: 1100px) { .horaire__h { font-size: 16px; gap: 6px; white-space: nowrap; } }
/* Bandeau partenaires au clavier : l'anneau de focus n'est plus rogné, et le défilé se range
   en lignes fixes tant qu'un logo a le focus (le logo ciblé n'est jamais hors champ) */
.bande-partenaires__rang { padding-block: 6px; }
.bande-partenaires:has(a:focus-visible) ul { animation: none; flex-wrap: wrap; width: auto; justify-content: center; padding-right: 0; }
.bande-partenaires:has(a:focus-visible) ul > li[aria-hidden="true"] { display: none; }
.bande-partenaires:has(a:focus-visible) .bande-partenaires__rang { -webkit-mask: none; mask: none; }


/* ---------- Associations soutenues (25/10/2026) : 2026 Les P'tits Doudous de Thionville, 2025 Eux pour Eux ---------- */
.asso-annee { overflow: hidden; }
.asso-annee::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 90% at 14% 50%, rgba(237, 216, 134, .12), transparent 62%), radial-gradient(45% 75% at 100% 0%, rgba(175, 29, 53, .38), transparent 60%); }
.asso-annee::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .045; background-image: var(--grain); pointer-events: none; }
.asso-annee__grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 84px); align-items: center; }
.asso-annee__logo { margin: 0; justify-self: center; width: min(100%, 440px); }
.asso-annee__ombre { filter: drop-shadow(0 26px 30px rgba(10, 3, 5, .5)); transform: rotate(-2.5deg); transition: transform .9s var(--ease-expo); }
.asso-annee__logo:hover .asso-annee__ombre { transform: rotate(0deg) scale(1.02); }
.asso-annee__ombre .etiquette { display: grid; place-items: center; padding: clamp(26px, 3.4vw, 50px); }
.asso-annee__ombre img { width: 100%; height: auto; }
.asso-annee__texte { display: grid; gap: 18px; align-content: center; max-width: 64ch; }
.asso-annee__fort { color: var(--clair); font-weight: 700; }
.asso-annee__rdv { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border: 1px solid var(--filet); font-weight: 600; color: var(--clair); }
.asso-annee__rdv .ic { flex: none; font-size: 20px; color: var(--or); }
.asso-annee .lien-fleche { justify-self: start; }
html.doux .asso-annee__ombre { transition: none; }
@media (max-width: 860px) {
  .asso-annee__grille { grid-template-columns: 1fr; }
  .asso-annee__logo { width: min(80%, 360px); }
}

/* 2025 : la remise du chèque à Eux pour Eux */
.don { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gouttiere); margin-top: clamp(36px, 4.4vw, 64px); align-items: stretch; }
.don__photo { margin: 0; display: grid; gap: 12px; align-content: start; }
.don__cadre { overflow: hidden; background: var(--bordeaux); aspect-ratio: 1400 / 879; }
.don__cadre img { width: 100%; height: 100%; object-fit: cover; }
.don__photo figcaption { font-size: 13.5px; line-height: 1.5; color: var(--encre-2); max-width: 78ch; }
.don__fiche { display: grid; align-content: center; gap: 14px; padding: clamp(26px, 3vw, 44px); }
.don__logo { width: clamp(120px, 11vw, 160px); height: auto; }
.don__quand { font: 700 11px/1 var(--f-texte); letter-spacing: .2em; text-transform: uppercase; color: var(--grenat); }
.don__fiche p:not(.don__quand) { font-size: 15.5px; line-height: 1.55; color: var(--encre-2); }
.don__fiche .lien-fleche { justify-self: start; margin-top: 4px; }
@media (max-width: 860px) { .don { grid-template-columns: 1fr; } }

/* Espace presse : l'association soutenue en 2026 */
.presse-asso { display: grid; gap: 12px; padding: clamp(22px, 2.2vw, 30px); }
.presse-asso__titre { font: 700 11px/1 var(--f-texte); letter-spacing: .2em; text-transform: uppercase; color: var(--grenat); }
.presse-asso img { width: min(100%, 210px); height: auto; }
.presse-asso p { font-size: 14.5px; line-height: 1.5; color: var(--encre-2); }
.presse-asso p b { color: var(--encre); }
.presse-asso .lien-fleche { justify-self: start; }

/* Programme (25/10/2026) : une photo du salon 2025 en tête de chaque jour ; mosaïque à trois tuiles */
.jour__photo { position: relative; margin: 0 0 18px; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bordeaux); border: 1px solid rgba(138, 98, 32, .35); }
.jour__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-expo); }
.jour:hover .jour__photo img { transform: scale(1.04); }
.jour__photo figcaption { position: absolute; left: 8px; bottom: 8px; padding: 4px 8px; background: rgba(23, 10, 13, .72); color: var(--clair-2); font: 700 10px/1.2 var(--f-texte); letter-spacing: .14em; text-transform: uppercase; }
html.doux .jour__photo img, html.reduit .jour__photo img { transition: none; }
@media (min-width: 481px) and (max-width: 860px) { .jour__photo { grid-column: 1 / -1; aspect-ratio: 21 / 9; } }
@media (max-width: 480px) { .jour__photo { aspect-ratio: 16 / 9; margin-bottom: 14px; } }
.stands .tuile--b { grid-column: span 6; }
@media (max-width: 860px) { .stands .tuile--b { grid-column: 1 / -1; min-height: 260px; } }

/* Devenir partenaire (25/10/2026) : sceau bronze (Partenaire) et or (Premium) dans le vide à droite de chaque formule.
   Le corps de la carte est un conteneur : le sceau suit la largeur réelle de la carte, pas celle de l'écran. */
.sceau { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 10px 18px rgba(42, 15, 20, .35)); }
.sceau__anneau { font: 700 10px/1 var(--f-texte); }
.sceau__ed { font: 400 22px/1 var(--f-affiche); }
.sceau__nom { font: 400 16.5px/1 var(--f-affiche); }
.formule__corps { container-type: inline-size; min-width: 0; }
.formule__duo { display: grid; grid-template-columns: minmax(0, 1fr) clamp(140px, 34cqi, 214px); gap: clamp(16px, 5cqi, 40px); align-items: center; height: 100%; }
.formule__sceau { margin: 0; justify-self: center; width: 100%; max-width: 214px; }
.formule__sceau .sceau { transform: rotate(-6deg); transition: transform .9s var(--ease-expo), opacity .5s ease; }
.formule:hover .formule__sceau .sceau { transform: rotate(0deg) scale(1.03); }
html.anime .formule:not(.est-vu) .formule__sceau .sceau { opacity: 0; transform: scale(1.25) rotate(-16deg); }
html.anime .formule.est-vu .formule__sceau .sceau { transition-delay: .3s; }
html.anime .formule.vu-fini .formule__sceau .sceau { transition-delay: 0s; }
html.doux .formule__sceau .sceau { transition: none; }
.formule__net sup, .faits b sup { font-size: .55em; vertical-align: super; line-height: 0; }
@container (max-width: 440px) {
  .formule__duo { grid-template-columns: 1fr; gap: 18px; }
  .formule__sceau { width: 118px; }
}



/* Devenir partenaire (25/10/2026) : la note fiscale en bloc « Bon à savoir », trois points côte à côte */
.savoir { margin-top: clamp(26px, 3vw, 44px); padding: clamp(22px, 2.6vw, 38px); }
.savoir__titre { display: flex; align-items: baseline; gap: 8px; margin: 0 0 clamp(16px, 2vw, 24px); font: 400 clamp(24px, 2.2vw, 32px)/1.1 var(--f-affiche); color: var(--encre); }
.savoir__titre span { color: var(--grenat); }
.savoir__liste { display: grid; grid-template-columns: 1.5fr 1fr 1.25fr; gap: clamp(18px, 3vw, 44px); margin: 0; padding: 0; list-style: none; }
.savoir__liste li { display: grid; align-content: start; gap: 10px; padding-top: 14px; border-top: 1px solid rgba(138, 98, 32, .45); }
.savoir__chiffre { font: 400 clamp(26px, 2.4vw, 34px)/1 var(--f-affiche); color: var(--grenat); letter-spacing: -.01em; }
.savoir__liste p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--encre-2); max-width: 62ch; }
.savoir__liste p b { color: var(--encre); }
@media (max-width: 1100px) { .savoir__liste { grid-template-columns: 1fr 1fr; } .savoir__liste li:first-child { grid-column: 1 / -1; } }
@media (max-width: 620px) { .savoir__liste { grid-template-columns: 1fr; } }

/* ---------- Espace presse, kit de diffusion (26/10/2026) : cartes compactes, étiquettes papier posées sur la zone sombre ---------- */
.kit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gouttiere); }
.kit__carte { display: grid; grid-template-rows: auto 1fr auto; height: 100%; background: var(--papier); background-image: var(--verge); color: var(--encre); border: 1px solid rgba(210, 162, 76, .34); transition: transform .45s var(--ease-expo), border-color .3s ease, box-shadow .45s var(--ease-expo); }
.kit__carte:hover, .kit__carte:focus-within { transform: translateY(-3px); border-color: var(--or); box-shadow: 0 26px 44px -26px rgba(0, 0, 0, .75); }
.kit__visuel { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; height: clamp(130px, 11vw, 170px); padding: 12px; overflow: hidden; background: var(--bordeaux); border-bottom: 1px solid var(--filet-sombre); }
.kit__visuel img { width: 100%; height: 100%; object-fit: contain; }
.kit__visuel--sombre { background: radial-gradient(80% 90% at 50% 40%, #4A1420, var(--bordeaux-2)); }
.kit__visuel--sombre img, .kit__visuel--page img { filter: drop-shadow(0 6px 14px rgba(23, 10, 13, .35)); }
.kit__visuel--page { background: var(--creme-2); }
.kit__visuel--papier { padding: 16px; background: var(--papier); background-image: var(--verge); }
.kit__visuel--nuit { padding: 16px; background: var(--lie-2); }
.kit__visuel--photo { padding: 0; }
.kit__visuel--photo img { object-fit: cover; }
.kit__corps { display: grid; align-content: start; gap: 4px; padding: 14px 16px 10px; }
.kit__usage { font-size: 13px; font-weight: 700; color: var(--grenat); }
.kit__titre { font: 400 clamp(19px, 1.4vw, 22px)/1.15 var(--f-affiche); color: var(--encre); text-wrap: balance; }
.kit__desc { font-size: 13.5px; line-height: 1.45; color: var(--encre-2); }
.kit__credit { margin-top: 2px; font-size: 12.5px; color: var(--gris); }
/* un bouton par fichier ; type, dimensions et poids à côté, ou dessous quand la carte est étroite */
.kit__fichiers { display: grid; gap: 8px; padding: 6px 16px 16px; }
.kit__fichier { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.kit__fichier .btn { flex: none; }
.kit__meta { flex: 1 1 150px; min-width: 0; font-size: 12.5px; line-height: 1.35; color: var(--encre-2); font-variant-numeric: tabular-nums lining-nums; }
.kit__dl span { white-space: nowrap; }
.kit__dl:hover .ic { transform: translateY(3px); }
.kit__carte :focus-visible { outline-color: var(--grenat); }
.kit__groupe { margin: clamp(26px, 3vw, 40px) 0 14px; font: 400 clamp(22px, 2vw, 30px)/1.1 var(--f-affiche); color: var(--clair); }
.kit--photos { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.kit--photos .kit__visuel { height: 140px; }
.kit--photos .kit__titre { font: 700 14.5px/1.35 var(--f-texte); }
.kit__credits { margin-top: clamp(18px, 2vw, 26px); font-size: 13.5px; color: var(--clair-2); }
.kit__tout { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: clamp(22px, 2.6vw, 34px); font-size: 14px; color: var(--clair-2); }
@media (max-width: 860px) {
  .kit { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .kit__visuel { height: 140px; }
}
@media (max-width: 620px) {
  /* une carte par ligne, vignette à gauche et boutons dessous : une liste de téléchargement */
  .kit { grid-template-columns: 1fr; gap: 10px; }
  .kit__carte { grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: auto auto; }
  .kit__visuel { height: auto; min-height: 112px; padding: 8px; border-bottom: 0; border-right: 1px solid var(--filet-sombre); }
  .kit__visuel--papier, .kit__visuel--nuit { padding: 12px; }
  .kit__visuel img { height: auto; max-height: 150px; }
  .kit__corps { padding: 10px 12px 8px; gap: 3px; }
  .kit__titre { font-size: 17px; }
  .kit__desc { font-size: 12.5px; }
  .kit__fichiers { grid-column: 1 / -1; padding: 10px 12px 12px; border-top: 1px solid var(--filet-sombre); }
}
@media (max-width: 480px) {
  .reprise { padding: 20px 18px; }
  .reprise__tete .btn { width: 100%; justify-content: center; }
}
.presse-asso .lien-fleche:hover .ic { transform: translateY(3px); }


/* ---------- « Pourquoi ce salon existe » (27/10/2026) : une entrée qui raconte ----------
   Le panneau grenat se remplit de bas en haut, comme un verre qu'on sert ; le filet d'or du surtitre se trace ;
   les lignes montent l'une après l'autre (colonne de gauche, puis de droite) pendant que le chiffre défile ;
   côté infos pratiques, chaque ligne glisse à son tour et son icône se pose. États de départ seulement en mode animé ;
   sans script, en mode doux ou réduit : la section telle quelle. */
/* c'est le fond qui se remplit, pas le bloc : un bloc entièrement découpé ne serait jamais « vu » par le navigateur */
html.anime .duo .solid[data-revele] { opacity: 1; transform: none; filter: none; background: transparent; }
html.anime .duo .solid > .fond { clip-path: inset(100% 0 0 0); transition: clip-path 1.5s var(--ease-expo); }
html.anime .duo .solid.est-vu > .fond { clip-path: inset(0); }
html.anime .duo .solid > div:not(.fond) > * { opacity: 0; transform: translateY(26px); filter: blur(8px); transition: opacity .9s var(--ease-expo), transform .9s var(--ease-expo), filter .9s var(--ease-expo); }
html.anime .duo .solid.est-vu > div:not(.fond) > * { opacity: 1; transform: none; filter: none; }
/* le fond (premier div) n'est pas compté : colonne de gauche = 2e div, colonne de droite = 3e div */
html.anime .duo .solid.est-vu > div:not(.fond):nth-of-type(2) > * { transition-delay: calc(.45s + var(--n, 0) * .12s); }
html.anime .duo .solid.est-vu > div:not(.fond):nth-of-type(3) > * { transition-delay: calc(.8s + var(--n, 0) * .12s); }
html.anime .duo .solid > div:not(.fond) > :nth-child(2) { --n: 1; }
html.anime .duo .solid > div:not(.fond) > :nth-child(3) { --n: 2; }
html.anime .duo .solid > div:not(.fond) > :nth-child(4) { --n: 3; }
html.anime .duo .solid > div:not(.fond) > :nth-child(5) { --n: 4; }
html.anime .duo .solid .surtitre::before { transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease-expo) .55s; }
html.anime .duo .solid.est-vu .surtitre::before { transform: none; }
html.anime .duo .infos .infos__liste li { opacity: 0; transform: translateX(28px); transition: opacity .8s var(--ease-expo), transform .8s var(--ease-expo); }
html.anime .duo .infos.est-vu .infos__liste li { opacity: 1; transform: none; }
html.anime .duo .infos.est-vu .infos__liste li:nth-child(1) { transition-delay: .35s; }
html.anime .duo .infos.est-vu .infos__liste li:nth-child(2) { transition-delay: .5s; }
html.anime .duo .infos.est-vu .infos__liste li:nth-child(3) { transition-delay: .65s; }
html.anime .duo .infos .infos__liste .ic { transform: scale(.4) rotate(-20deg); transition: transform .7s var(--ease-expo); }
html.anime .duo .infos.est-vu .infos__liste li:nth-child(1) .ic { transition-delay: .55s; }
html.anime .duo .infos.est-vu .infos__liste li:nth-child(2) .ic { transition-delay: .7s; }
html.anime .duo .infos.est-vu .infos__liste li:nth-child(3) .ic { transition-delay: .85s; }
html.anime .duo .infos.est-vu .infos__liste .ic { transform: none; }
/* une fois l'entrée jouée, plus aucun délai : les survols restent instantanés */
html.anime .duo .vu-fini > div:not(.fond) > *, html.anime .duo .vu-fini .infos__liste li, html.anime .duo .vu-fini .infos__liste .ic, html.anime .duo .vu-fini .surtitre::before { transition-delay: 0s !important; }
/* filet de sécurité et animations réduites : tout est visible */
html.reduit .duo .solid > .fond { clip-path: none; }
html.reduit .duo .solid > div:not(.fond) > * { filter: none; }

/* Transition hero → « Pourquoi ce salon existe » : la houle (27/10/2026). Le bloc arrive sous le défilé des domaines par une
   vague qui ondule lentement (motif répété, décalé d'une période en 16 s), sans filet ; une ombre douce descend
   dans le panneau grenat et sur le papier des infos pratiques. Le hero garde la hauteur de la vague sous le défilé (mention et
   bouton pause remontent d'autant). La houle s'arrête hors de l'écran (sdv.js, .houle--repos) et en animations réduites. */
:root { --houle: 60vw; }
@media (max-width: 860px) { :root { --houle: 120vw; } }
#contenu > .accueil { padding-bottom: var(--vague); min-height: calc(100svh + var(--vague)); }   /* hero en pleine page : le défilé tombe en bas de l'écran, la houle juste en dessous */
/* le hero tient dans l'écran à toutes les hauteurs : le logo prend la hauteur qui reste une fois posés l'en-tête, le cartouche
   des dates et le défilé (--hero-fixe, mesuré) ; sur les écrans peu hauts, le cartouche se resserre */
:root { --hero-fixe: 460px; }
.accueil__logo { width: min(100%, clamp(300px, 34vw, 560px), 52vh, max(200px, calc((100svh - var(--hero-fixe)) * 1.21))); }
@media (min-width: 861px) and (max-height: 780px) {
  :root { --hero-fixe: 398px; }
  .accueil__corps { padding-top: calc(var(--h-entete) + 8px); padding-bottom: 12px; }
  .accueil__gauche { gap: 12px; }
  .contre__jour { padding: 12px 16px 10px; }
  .contre__date { margin-top: 4px; }
  .contre__date b { font-size: clamp(34px, 3vw, 44px); }
  .contre__h { margin-top: 4px; font-size: 14px; }
  .contre__pied { padding: 10px 16px; gap: 8px 18px; }
  .contre__pied .btn { padding-block: 10px; }
}
/* téléphones : la mention IA et le bouton pause occupent le bas du hero ; sur les écrans peu hauts, le cartouche se resserre */
@media (max-width: 620px) { :root { --hero-fixe: 505px; } }
@media (max-width: 620px) and (max-height: 760px) {
  :root { --hero-fixe: 440px; }
  .accueil__corps { padding-top: calc(var(--h-entete) + 8px); padding-bottom: 70px; }
  .accueil__gauche { gap: 12px; }
  .contre__jour { padding: 10px 12px 8px; }
  .contre__date { margin-top: 2px; }
  .contre__date b { font-size: 34px; }
  .contre__h { margin-top: 4px; font-size: 13.5px; }
  .contre__pied { padding: 10px 12px; gap: 6px 14px; }
  .contre__pied .btn { padding-block: 10px; }
}
#contenu > .accueil .pause-video, #contenu > .accueil .accueil__mention { translate: 0 calc(-1 * var(--vague)); }
.accueil .defile { border-bottom-color: transparent; }
.accueil + .duo { position: relative; margin-top: calc(-1 * var(--vague)); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60V30C120 10 240 10 360 30S600 50 720 30V60z'/%3E%3C/svg%3E") 0 0 / var(--houle) var(--vague) repeat-x, linear-gradient(#000, #000) 0 calc(var(--vague) - 1px) / 100% calc(100% - var(--vague) + 1px) no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60V30C120 10 240 10 360 30S600 50 720 30V60z'/%3E%3C/svg%3E") 0 0 / var(--houle) var(--vague) repeat-x, linear-gradient(#000, #000) 0 calc(var(--vague) - 1px) / 100% calc(100% - var(--vague) + 1px) no-repeat; animation: houle-masque 16s linear infinite; }
@keyframes houle-masque { to { -webkit-mask-position: calc(-1 * var(--houle)) 0, 0 calc(var(--vague) - 1px); mask-position: calc(-1 * var(--houle)) 0, 0 calc(var(--vague) - 1px); } }
.accueil + .duo.houle--repos { animation-play-state: paused; }
#contenu:has(> .accueil) > section:not(.accueil):not(.duo) { z-index: 1; }
body:has(#contenu > .accueil) .pied { z-index: 2; }   /* le pied garde sa vague au-dessus de la dernière section */   /* les sections à vague passent toutes au-dessus du bloc masqué (Safari compris) ; entre elles, l'ordre du document joue */
html.doux .accueil + .duo, html.reduit .accueil + .duo { animation: none; }
.accueil + .duo .solid, .accueil + .duo .infos { padding-top: calc(clamp(72px, 7.5vw, 120px) + var(--vague)); }
.accueil + .duo .solid::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: clamp(120px, 12vw, 190px); z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(23, 10, 13, .96) 0%, rgba(23, 10, 13, .55) 45%, rgba(23, 10, 13, 0) 100%); }
.accueil + .duo .infos { position: relative; }
.accueil + .duo .infos::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: clamp(120px, 12vw, 190px); pointer-events: none;
  background: linear-gradient(180deg, rgba(23, 10, 13, .55) 0%, rgba(23, 10, 13, .12) 45%, rgba(23, 10, 13, 0) 100%); }
@media (max-width: 860px) { .accueil + .duo .solid, .accueil + .duo .infos { padding-top: calc(clamp(56px, 12vw, 80px) + var(--vague)); } }

/* ---------- Accueil : les sections arrivent en vagues, avec une ombre (27/10/2026) ----------
   Chaque section remonte de la hauteur de la vague sous la précédente : celle-ci se voit dans le creux, sans aucun jour.
   Deux formes de vague alternent ; l'ombre que la section du dessus projette épouse la courbe (le masque la découpe)
   et s'estompe vers le bas. La transition hero → « Pourquoi ce salon existe » garde son fondu. */
:root { --vague: clamp(34px, 3.6vw, 56px); }
#contenu:has(> .accueil) > section:not(.accueil):not(.duo), body:has(#contenu > .accueil) .pied { position: relative; isolation: isolate; margin-top: calc(-1 * var(--vague)); padding-top: calc(var(--rythme) + var(--vague)); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60V34C180 12 360 2 540 10S900 46 1080 44 1350 22 1440 14V60z'/%3E%3C/svg%3E") top / 100% var(--vague) no-repeat, linear-gradient(#000, #000) 0 calc(var(--vague) - 1px) / 100% calc(100% - var(--vague) + 1px) no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60V34C180 12 360 2 540 10S900 46 1080 44 1350 22 1440 14V60z'/%3E%3C/svg%3E") top / 100% var(--vague) no-repeat, linear-gradient(#000, #000) 0 calc(var(--vague) - 1px) / 100% calc(100% - var(--vague) + 1px) no-repeat; }
#contenu:has(> .accueil) > section:not(.accueil):not(.duo):nth-of-type(odd) { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60V14C120 24 330 46 540 42S900 6 1080 6 1320 26 1440 36V60z'/%3E%3C/svg%3E") top / 100% var(--vague) no-repeat, linear-gradient(#000, #000) 0 calc(var(--vague) - 1px) / 100% calc(100% - var(--vague) + 1px) no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60V14C120 24 330 46 540 42S900 6 1080 6 1320 26 1440 36V60z'/%3E%3C/svg%3E") top / 100% var(--vague) no-repeat, linear-gradient(#000, #000) 0 calc(var(--vague) - 1px) / 100% calc(100% - var(--vague) + 1px) no-repeat; }
#contenu:has(> .accueil) > section:not(.accueil):not(.duo):not(.asso-annee)::before, body:has(#contenu > .accueil) .pied::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: clamp(140px, 14vw, 220px); z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 3, 5, .6) 0%, rgba(8, 3, 5, .4) 18%, rgba(8, 3, 5, .14) 45%, rgba(8, 3, 5, 0) 80%); }
@media (max-width: 860px) { #contenu:has(> .accueil) > section:not(.accueil):not(.duo):not(.asso-annee)::before, body:has(#contenu > .accueil) .pied::before { height: 120px; } }
/* entre deux sections claires, la vague révèle un changement de ton : « Le vigneron derrière chaque verre » passe en crème profond */
#contenu:has(> .accueil) > #le-salon { background-color: #E8D7BC; }
/* pied de page de l'accueil : moins de vide entre la vague et le titre de fin */
body:has(#contenu > .accueil) .pied { padding-top: calc(var(--vague) + 4px); }

/* ---------- Page Vignerons : en-tête plus bas, plan qui remonte, vagues de l'accueil (27/10/2026) ---------- */
body:has(#plan.salle) .tete-page { min-height: 0; padding-top: calc(var(--h-entete) + 14px); }
body:has(#plan.salle) .tete-page__in { padding-bottom: calc(clamp(18px, 2.2vw, 30px) + var(--vague)); }
body:has(#plan.salle) .titre-page { font-size: clamp(42px, 5.6vw, 84px); }
.tete-page + .salle { padding-top: clamp(30px, 3.4vw, 52px); }
@media (min-width: 1101px) {
  .salle__tete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 44ch); align-items: end; column-gap: clamp(32px, 5vw, 80px); margin-bottom: 22px; }
  .salle__tete .surtitre { grid-column: 1 / -1; }
  .salle__tete .titre, .salle__tete .texte { margin-bottom: 0; }
}
/* les sections arrivent en vagues, comme sur l'accueil : le plan sous le hero, la liste sous le plan, le pied sous la bande des partenaires */
#plan.salle, body:has(#plan.salle) #exposants, body:has(#plan.salle) .pied { position: relative; isolation: isolate; margin-top: calc(-1 * var(--vague)); padding-top: calc(var(--rythme) + var(--vague));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60V34C180 12 360 2 540 10S900 46 1080 44 1350 22 1440 14V60z'/%3E%3C/svg%3E") top / 100% var(--vague) no-repeat, linear-gradient(#000, #000) 0 calc(var(--vague) - 1px) / 100% calc(100% - var(--vague) + 1px) no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60V34C180 12 360 2 540 10S900 46 1080 44 1350 22 1440 14V60z'/%3E%3C/svg%3E") top / 100% var(--vague) no-repeat, linear-gradient(#000, #000) 0 calc(var(--vague) - 1px) / 100% calc(100% - var(--vague) + 1px) no-repeat; }
body:has(#plan.salle) #exposants { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60V14C120 24 330 46 540 42S900 6 1080 6 1320 26 1440 36V60z'/%3E%3C/svg%3E") top / 100% var(--vague) no-repeat, linear-gradient(#000, #000) 0 calc(var(--vague) - 1px) / 100% calc(100% - var(--vague) + 1px) no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60V14C120 24 330 46 540 42S900 6 1080 6 1320 26 1440 36V60z'/%3E%3C/svg%3E") top / 100% var(--vague) no-repeat, linear-gradient(#000, #000) 0 calc(var(--vague) - 1px) / 100% calc(100% - var(--vague) + 1px) no-repeat; }
.tete-page + #plan.salle { padding-top: calc(clamp(30px, 3.4vw, 52px) + var(--vague)); }
/* sombre sur sombre, la vague se lirait mal : un filet d'or la suit, comme le filet qui ferme le hero de l'accueil */
.tete-page + #plan.salle { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 35.5C180 13.5 360 3.5 540 11.5S900 47.5 1080 45.5 1350 23.5 1440 15.5' fill='none' stroke='%23D2A24C' stroke-opacity='.6' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") top / 100% var(--vague) no-repeat, radial-gradient(70% 90% at 50% 40%, #4A111C 0%, #2C090C 55%, #1A060A 100%); }
body:has(#plan.salle) .bande-partenaires { padding-bottom: calc(clamp(22px, 2.6vw, 34px) + var(--vague)); }
body:has(#plan.salle) .pied { padding-top: calc(var(--vague) + 4px); z-index: 2; }   /* au-dessus de la bande des partenaires (z-index 1), que la vague recouvre */
/* l'ombre que la section du dessus projette dans le creux de la vague (::after sur le plan, dont le ::before porte le grain) */
#plan.salle::after, body:has(#plan.salle) #exposants::before, body:has(#plan.salle) .pied::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: clamp(140px, 14vw, 220px); z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 3, 5, .6) 0%, rgba(8, 3, 5, .4) 18%, rgba(8, 3, 5, .14) 45%, rgba(8, 3, 5, 0) 80%); }
@media (max-width: 860px) { #plan.salle::after, body:has(#plan.salle) #exposants::before, body:has(#plan.salle) .pied::before { height: 120px; } }
/* mobile : les trois chiffres de l'en-tête des Vignerons tiennent sur une seule rangée (plus de case orpheline, hero plus court) */
@media (max-width: 620px) {
  body:has(#plan.salle) .faits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body:has(#plan.salle) .faits li { padding: 12px 14px; border-top: 0; border-right: 1px solid var(--filet); }
  body:has(#plan.salle) .faits li:last-child { border-right: 0; grid-column: auto; }
  body:has(#plan.salle) .faits span { letter-spacing: .12em; }
}

/* ---------- Accueil : billets du programme en feuille d'or (27/10/2026) ----------
   Partout : un léger fond doré dans chaque billet et un halo d'or derrière les trois. Avec une souris (classe posée par sdv.js,
   jamais en animations réduites) : le halo glisse vers le curseur, le billet survolé s'incline, un reflet d'or changeant le suit
   et des paillettes montent du curseur (canvas .billet__poudre). */
@property --ax { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@property --ay { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
.billets { position: relative; isolation: isolate; transition: --ax 1s var(--ease-expo), --ay 1s var(--ease-expo); }
.billets::before { content: ""; position: absolute; inset: -16% -8%; z-index: -1; pointer-events: none; filter: blur(26px);
  background: radial-gradient(36% 58% at var(--ax) var(--ay), rgba(210, 162, 76, .26), rgba(210, 162, 76, .07) 55%, transparent 76%); }
.billets .billet { isolation: isolate; background: linear-gradient(180deg, rgba(210, 162, 76, .13), rgba(210, 162, 76, .02) 58%), rgba(23, 10, 13, .86); }
.billets--or .billet.vu-fini { transition: transform .55s var(--ease-expo), opacity .9s var(--ease-expo), filter .9s var(--ease-expo); }
.billets--or .billet.est-vu:hover { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1.03); transition: transform .22s ease-out; }
.billets--or .billet::after { display: block; inset: 0; border: 0; z-index: -1; clip-path: none; opacity: 0; transition: opacity .45s ease; mix-blend-mode: color-dodge;
  background: radial-gradient(200px circle at var(--mx, 50%) var(--my, 30%), rgba(255, 240, 200, .42), transparent 70%),
              conic-gradient(from var(--ang, 0deg) at var(--mx, 50%) var(--my, 30%), rgba(237, 216, 134, 0), rgba(237, 216, 134, .4), rgba(210, 162, 76, .04), rgba(255, 232, 160, .42), rgba(237, 216, 134, 0)); }
.billets--or .billet:hover::after { opacity: .62; }
.billets--or .billet::before, .billets--or .billet__date { transition: border-color .45s ease, color .45s ease; }
.billets--or .billet:hover::before { border-color: rgba(237, 216, 134, .95); }
.billets--or .billet:hover .billet__date { color: var(--or-clair); }
.billet__poudre { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }

/* ---------- Transition entre les pages : le volet (27/10/2026) ----------
   Transition native du navigateur entre deux pages du site (Chrome, Edge, Safari récents ; ailleurs, la page change comme avant).
   L'en-tête ne bouge pas ; l'ancienne page remonte en s'effaçant, la nouvelle monte du bas en volet, sur un fond lie-de-vin.
   Sans glissement ni zoom si le visiteur a demandé moins d'animations ; aucune en html.doux (sdv.js). */
@view-transition { navigation: auto; }
.entete { view-transition-name: bandeau-haut; }
::view-transition { background: var(--lie); }
::view-transition-old(root) { animation: volet-sortie .5s cubic-bezier(.77, 0, .175, 1) both; }
::view-transition-new(root) { animation: volet-entree .62s cubic-bezier(.77, 0, .175, 1) both; }
::view-transition-group(bandeau-haut), ::view-transition-old(bandeau-haut), ::view-transition-new(bandeau-haut) { animation: none; }   /* l'en-tête ne saute pas */
@keyframes volet-sortie { to { opacity: .35; transform: translateY(-7vh) scale(.97); } }
@keyframes volet-entree { from { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); transform: translateY(12vh); } to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transform: none; } }
/* « moins d'animations » (comme partout sur le site : ni glissement ni zoom) : le volet se lève sur place, l'ancienne page s'efface */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root) { animation-name: volet-sortie-doux; }
  ::view-transition-new(root) { animation-name: volet-entree-doux; }
  @keyframes volet-sortie-doux { to { opacity: .35; } }
  @keyframes volet-entree-doux { from { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); } to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } }
}

/* ---------- Pages intérieures : les sections arrivent en vagues, avec une ombre, comme sur l'accueil (27/10/2026) ----------
   Toutes les pages sauf l'accueil et les Vignerons (règles à part). Même mécanique : chaque section remonte de la hauteur de la
   vague sous la précédente et prend sa forme (deux formes alternent) ; l'ombre que projette la section du dessus est posée selon
   ce que la section a déjà : ::before (papier), un calque de fond (sombre ou grenat sans photo, dont les pseudo-éléments portent
   halo et grain), ::before du .fond (sections à photo, pied). Sombre sur sombre, un filet d'or suit la vague. Deux sections papier
   qui se suivent : la seconde passe en crème profond. */
:root { --ombre-h: clamp(140px, 14vw, 220px); }
@media (max-width: 860px) { :root { --ombre-h: 120px; } }
body:not(:has(#contenu > .accueil)):not(:has(#plan.salle)) #contenu > section:not(:first-child), body:not(:has(#contenu > .accueil)):not(:has(#plan.salle)) .pied { position: relative; isolation: isolate; margin-top: calc(-1 * var(--vague)); padding-top: calc(var(--rythme) + var(--vague)); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60V34C180 12 360 2 540 10S900 46 1080 44 1350 22 1440 14V60z'/%3E%3C/svg%3E") top / 100% var(--vague) no-repeat, linear-gradient(#000, #000) 0 calc(var(--vague) - 1px) / 100% calc(100% - var(--vague) + 1px) no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60V34C180 12 360 2 540 10S900 46 1080 44 1350 22 1440 14V60z'/%3E%3C/svg%3E") top / 100% var(--vague) no-repeat, linear-gradient(#000, #000) 0 calc(var(--vague) - 1px) / 100% calc(100% - var(--vague) + 1px) no-repeat; }
body:not(:has(#contenu > .accueil)):not(:has(#plan.salle)) #contenu > section:not(:first-child):nth-of-type(odd) { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60V14C120 24 330 46 540 42S900 6 1080 6 1320 26 1440 36V60z'/%3E%3C/svg%3E") top / 100% var(--vague) no-repeat, linear-gradient(#000, #000) 0 calc(var(--vague) - 1px) / 100% calc(100% - var(--vague) + 1px) no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60V14C120 24 330 46 540 42S900 6 1080 6 1320 26 1440 36V60z'/%3E%3C/svg%3E") top / 100% var(--vague) no-repeat, linear-gradient(#000, #000) 0 calc(var(--vague) - 1px) / 100% calc(100% - var(--vague) + 1px) no-repeat; }
body:not(:has(#contenu > .accueil)):not(:has(#plan.salle)) .pied { z-index: 2; padding-top: calc(var(--vague) + 4px); }   /* au-dessus de la bande des partenaires (z-index 1), que la vague recouvre */
body:not(:has(#contenu > .accueil)):not(:has(#plan.salle)) .bande-partenaires { padding-bottom: calc(clamp(22px, 2.6vw, 34px) + var(--vague)); }
body:not(:has(#contenu > .accueil)):not(:has(#plan.salle)) #contenu > .tete-page:first-child .tete-page__in { padding-bottom: calc(clamp(22px, 3vw, 40px) + var(--vague)); }
body:not(:has(#contenu > .accueil)):not(:has(#plan.salle)) .tete-page--404 { padding-bottom: calc(clamp(24px, 4vw, 56px) + var(--vague)); }
/* le bouton pause d'une vidéo de fond reste au-dessus de la vague qui mord le bas de sa section */
body:not(:has(#contenu > .accueil)):not(:has(#plan.salle)) #contenu > section:has(+ section) > .pause-video, body:not(:has(#contenu > .accueil)):not(:has(#plan.salle)):not(:has(.bande-partenaires)) #contenu > section:last-child > .pause-video { bottom: calc(20px + var(--vague)); }
/* deux tons de papier */
body:not(:has(#contenu > .accueil)):not(:has(#plan.salle)) #contenu > .zone--papier + .zone--papier { background-color: #E8D7BC; }

/* l'ombre : sections papier */
body:not(:has(#contenu > .accueil)):not(:has(#plan.salle)) #contenu > section:not(:first-child).zone--papier::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--ombre-h); z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(8, 3, 5, .6) 0%, rgba(8, 3, 5, .4) 18%, rgba(8, 3, 5, .14) 45%, rgba(8, 3, 5, 0) 80%); }
/* sections sombres ou grenat sans photo : un calque de fond (sous le halo et le grain) */
body:not(:has(#contenu > .accueil)):not(:has(#plan.salle)) #contenu > section:not(:first-child).zone--sombre:not(:has(> .fond)) { background: linear-gradient(180deg, rgba(8, 3, 5, .6) 0%, rgba(8, 3, 5, .4) 18%, rgba(8, 3, 5, .14) 45%, rgba(8, 3, 5, 0) 80%) top / 100% var(--ombre-h) no-repeat, var(--lie); }
body:not(:has(#contenu > .accueil)):not(:has(#plan.salle)) #contenu > section:not(:first-child).zone--grenat:not(:has(> .fond)) { background: linear-gradient(180deg, rgba(8, 3, 5, .6) 0%, rgba(8, 3, 5, .4) 18%, rgba(8, 3, 5, .14) 45%, rgba(8, 3, 5, 0) 80%) top / 100% var(--ombre-h) no-repeat, var(--bordeaux); }
/* sections à photo de fond et pied : au-dessus du voile du .fond */
body:not(:has(#contenu > .accueil)):not(:has(#plan.salle)) #contenu > section:not(:first-child) > .fond::before, body:not(:has(#contenu > .accueil)):not(:has(#plan.salle)) .pied > .fond::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--ombre-h); z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(8, 3, 5, .6) 0%, rgba(8, 3, 5, .4) 18%, rgba(8, 3, 5, .14) 45%, rgba(8, 3, 5, 0) 80%); }
/* bloc duo (édition 2025) : ses deux moitiés portent leur fond ; la vague les coupe, l'ombre passe au-dessus, courte */
body:not(:has(#contenu > .accueil)):not(:has(#plan.salle)) #contenu > section:not(:first-child).duo { padding-top: 0; }
body:not(:has(#contenu > .accueil)):not(:has(#plan.salle)) #contenu > section:not(:first-child).duo > .solid, body:not(:has(#contenu > .accueil)):not(:has(#plan.salle)) #contenu > section:not(:first-child).duo > .infos { padding-top: calc(clamp(28px, 4vw, 64px) + var(--vague)); }
body:not(:has(#contenu > .accueil)):not(:has(#plan.salle)) #contenu > section:not(:first-child).duo::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--vague) + 90px); z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(8, 3, 5, .6) 0%, rgba(8, 3, 5, .4) 18%, rgba(8, 3, 5, .14) 45%, rgba(8, 3, 5, 0) 80%); }

/* sombre sur sombre : un filet d'or suit la vague (forme A sur les sections paires et le pied, B sur les impaires) */
body:not(:has(#contenu > .accueil)):not(:has(#plan.salle)) #contenu > :is(.sombre, .tete-page) + .zone--sombre:not(:has(> .fond)):nth-of-type(even) { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 35.5C180 13.5 360 3.5 540 11.5S900 47.5 1080 45.5 1350 23.5 1440 15.5' fill='none' stroke='%23D2A24C' stroke-opacity='.6' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") top / 100% var(--vague) no-repeat, linear-gradient(180deg, rgba(8, 3, 5, .6) 0%, rgba(8, 3, 5, .4) 18%, rgba(8, 3, 5, .14) 45%, rgba(8, 3, 5, 0) 80%) top / 100% var(--ombre-h) no-repeat, var(--lie); }
body:not(:has(#contenu > .accueil)):not(:has(#plan.salle)) #contenu > :is(.sombre, .tete-page) + .zone--sombre:not(:has(> .fond)):nth-of-type(odd) { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 15.5C120 25.5 330 47.5 540 43.5S900 7.5 1080 7.5 1320 27.5 1440 37.5' fill='none' stroke='%23D2A24C' stroke-opacity='.6' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") top / 100% var(--vague) no-repeat, linear-gradient(180deg, rgba(8, 3, 5, .6) 0%, rgba(8, 3, 5, .4) 18%, rgba(8, 3, 5, .14) 45%, rgba(8, 3, 5, 0) 80%) top / 100% var(--ombre-h) no-repeat, var(--lie); }
body:not(:has(#contenu > .accueil)):not(:has(#plan.salle)) #contenu > :is(.sombre, .tete-page) + .zone--sombre:nth-of-type(even) > .fond::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 35.5C180 13.5 360 3.5 540 11.5S900 47.5 1080 45.5 1350 23.5 1440 15.5' fill='none' stroke='%23D2A24C' stroke-opacity='.6' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") top / 100% var(--vague) no-repeat, linear-gradient(180deg, rgba(8, 3, 5, .6) 0%, rgba(8, 3, 5, .4) 18%, rgba(8, 3, 5, .14) 45%, rgba(8, 3, 5, 0) 80%); }
body:not(:has(#contenu > .accueil)):not(:has(#plan.salle)) #contenu > :is(.sombre, .tete-page) + .zone--sombre:nth-of-type(odd) > .fond::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 15.5C120 25.5 330 47.5 540 43.5S900 7.5 1080 7.5 1320 27.5 1440 37.5' fill='none' stroke='%23D2A24C' stroke-opacity='.6' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") top / 100% var(--vague) no-repeat, linear-gradient(180deg, rgba(8, 3, 5, .6) 0%, rgba(8, 3, 5, .4) 18%, rgba(8, 3, 5, .14) 45%, rgba(8, 3, 5, 0) 80%); }
body:not(:has(#contenu > .accueil)):not(:has(#plan.salle)):not(:has(.bande-partenaires)) .pied > .fond::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 35.5C180 13.5 360 3.5 540 11.5S900 47.5 1080 45.5 1350 23.5 1440 15.5' fill='none' stroke='%23D2A24C' stroke-opacity='.6' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") top / 100% var(--vague) no-repeat, linear-gradient(180deg, rgba(8, 3, 5, .6) 0%, rgba(8, 3, 5, .4) 18%, rgba(8, 3, 5, .14) 45%, rgba(8, 3, 5, 0) 80%); }

/* ---------- Cartes des pages : lueur d'or et relief au survol (27/10/2026) ----------
   Même famille que les billets de l'accueil, en plus sobre : avec une souris (classe .carte-or posée par sdv.js, jamais en
   animations réduites), la carte se soulève et s'incline à peine vers le curseur, une lueur d'or le suit, son filet passe en or.
   La lueur (.carte-or__lueur) est un calque sous le contenu ; sur fond sombre (.carte-or--nuit), elle éclaire en mode screen. */
.carte-or { position: relative; isolation: isolate; }
.carte-or__lueur { position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .45s ease;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(210, 162, 76, .24), rgba(210, 162, 76, .06) 45%, transparent 72%); }
.carte-or--nuit .carte-or__lueur { mix-blend-mode: screen;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(237, 216, 134, .22), rgba(237, 216, 134, .05) 45%, transparent 72%); }
.carte-or:hover .carte-or__lueur { opacity: 1; }
.carte-or:not([data-revele]), .carte-or.vu-fini { transition: transform .55s var(--ease-expo), box-shadow .55s var(--ease-expo), border-color .4s ease, opacity .9s var(--ease-expo), filter .9s var(--ease-expo); }
html .carte-or.carte-or.carte-or:hover { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px);
  transition: transform .2s ease-out, box-shadow .55s var(--ease-expo), border-color .4s ease; box-shadow: 0 28px 50px -28px rgba(42, 15, 20, .55); border-color: var(--or); }
html .carte-or--nuit.carte-or.carte-or:hover { box-shadow: 0 30px 56px -26px rgba(0, 0, 0, .75); }
.carte-or::before { transition: border-color .4s ease; }
.carte-or:hover::before { border-color: var(--or); }

/* ---------- Solidarité, « Né d'une idée. Porté par des bénévoles. » : les mains et le cœur (27/10/2026) ----------
   Image fondue dans le papier (bords transparents), posée en bas à gauche et coupée par la vague suivante ; chargée sans
   attendre, elle apparaît en fondu. Sur téléphone, elle passe sous le texte, en pleine largeur. */
#histoire > .conteneur { position: relative; z-index: 1; }
#histoire .contact-grille__intro { position: static; }   /* le titre ne colle plus à l'écran : il ne glisse plus sur l'image */
.histoire__mains { position: absolute; left: 0; bottom: 0; z-index: 0; width: min(54vw, 1010px); pointer-events: none; }
.histoire__mains img { display: block; width: 100%; height: auto; }
html.anime .histoire__mains { animation: fondu 1.1s ease-out .15s both; }   /* chargée tout de suite, elle apparaît en fondu dès l'arrivée sur la page */
@media (max-width: 860px) {
  .histoire__mains { position: static; width: 100%; margin: clamp(8px, 4vw, 24px) 0 calc(-1 * var(--rythme)); }
}

/* ---------- Bande des partenaires (pages intérieures et Vignerons) : elle arrive aussi en vague, avec une ombre (27/10/2026) ----------
   Forme B (le pied qui suit a la forme A) ; les filets droits du haut disparaissent, la vague les remplace. Elle passe au-dessus
   de la section du dessus (z-index 1), sous le pied (z-index 2). Le bouton pause d'une vidéo en bas de section remonte d'autant. */
body:not(:has(#contenu > .accueil)) .bande-partenaires { margin-top: calc(-1 * var(--vague)); padding-top: calc(clamp(22px, 2.6vw, 34px) + var(--vague)); box-shadow: none;
  background-image: linear-gradient(180deg, rgba(8, 3, 5, .5) 0%, rgba(8, 3, 5, .3) 22%, rgba(8, 3, 5, .1) 50%, rgba(8, 3, 5, 0) 85%), var(--verge); background-size: 100% clamp(90px, 9vw, 140px), auto, auto; background-repeat: no-repeat, repeat, repeat; background-position: top, 0 0, 0 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60V14C120 24 330 46 540 42S900 6 1080 6 1320 26 1440 36V60z'/%3E%3C/svg%3E") top / 100% var(--vague) no-repeat, linear-gradient(#000, #000) 0 calc(var(--vague) - 1px) / 100% calc(100% - var(--vague) + 1px) no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60V14C120 24 330 46 540 42S900 6 1080 6 1320 26 1440 36V60z'/%3E%3C/svg%3E") top / 100% var(--vague) no-repeat, linear-gradient(#000, #000) 0 calc(var(--vague) - 1px) / 100% calc(100% - var(--vague) + 1px) no-repeat; }
body:not(:has(#contenu > .accueil)) #contenu > section:last-child:not(.tete-page) > .pause-video { bottom: calc(20px + var(--vague)); }

/* ---------- Bloc du club (Solidarité, Contact) : le bandeau en carte (27/10/2026) ----------
   Une carte aux coins arrondis (fini l'étiquette à coins coupés) : logo, texte, puis boutons, séparés par deux traits d'or qui
   se tracent à l'apparition ; une lueur dorée respire derrière le logo. Le logo du club reste tel quel. Sous 1100 px, les
   boutons passent sous le texte ; sur téléphone, tout s'empile. */
.club-carte.etiquette { clip-path: none; border-radius: clamp(20px, 2vw, 28px); overflow: hidden; border: 1px solid rgba(210, 162, 76, .32);
  grid-template-columns: auto minmax(0, 1fr); justify-content: stretch; padding: clamp(28px, 3.2vw, 48px) clamp(28px, 3.6vw, 56px);
  background: radial-gradient(42% 120% at 12% 50%, rgba(210, 162, 76, .16), transparent 70%), linear-gradient(115deg, rgba(23, 10, 13, .94) 0%, rgba(44, 9, 12, .92) 55%, rgba(74, 17, 28, .9) 100%);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(237, 216, 134, .14); }
@media (min-width: 621px) { .club-carte.etiquette { grid-template-columns: auto minmax(0, 1fr); justify-content: stretch; } }
.club-carte.etiquette::before { inset: 7px; border-color: rgba(210, 162, 76, .18); border-radius: clamp(14px, 1.6vw, 22px); clip-path: none; }
.club-carte.etiquette::after { display: block; content: ""; position: absolute; left: clamp(28px, 3.6vw, 56px); top: 50%; width: clamp(200px, 20vw, 300px); aspect-ratio: 1; border: 0; clip-path: none;
  z-index: -1; pointer-events: none; border-radius: 50%; translate: -18% -50%; background: radial-gradient(closest-side, rgba(210, 162, 76, .22), rgba(210, 162, 76, .06) 60%, transparent 76%); }
.club-carte > img { height: clamp(78px, 7.4vw, 108px); }
.club-carte h2 { font-size: clamp(26px, 2.4vw, 36px); text-wrap: balance; }
.club-carte > div { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(24px, 3vw, 48px); align-items: center; padding-left: clamp(24px, 3vw, 44px); }
.club-carte > div > * { grid-column: 1; }
.club-carte > div > .actions { grid-column: 2; grid-row: 1 / span 4; margin: 0 !important; position: relative; padding-left: clamp(24px, 3vw, 48px); flex-direction: column; align-items: stretch; }
.club-carte > div::before, .club-carte > div > .actions::before { content: ""; position: absolute; left: 0; top: 6%; bottom: 6%; width: 1px; background: linear-gradient(180deg, transparent, rgba(210, 162, 76, .8), transparent); }
@keyframes club-souffle { 0%, 100% { opacity: .55; scale: .94; } 50% { opacity: 1; scale: 1.06; } }
@keyframes club-monte { from { opacity: 0; transform: translateY(16px); filter: blur(6px); } }
@keyframes club-trait { from { transform: scaleY(0); } }
html.anime .club-carte.etiquette::after { animation: club-souffle 8s ease-in-out infinite; }
html.anime .club-carte.est-vu > img { animation: club-monte 1s var(--ease-expo) .05s both; }
html.anime .club-carte.est-vu > div > :not(.actions) { animation: club-monte 1s var(--ease-expo) .2s both; }
html.anime .club-carte.est-vu > div > :nth-child(2) { animation-delay: .32s; }
html.anime .club-carte.est-vu > div > :nth-child(3) { animation-delay: .44s; }
html.anime .club-carte.est-vu > div > .actions { animation: club-monte 1s var(--ease-expo) .56s both; }
html.anime .club-carte.est-vu > div::before { animation: club-trait 1.3s var(--ease-expo) .3s both; }
html.anime .club-carte.est-vu > div > .actions::before { animation: club-trait 1.3s var(--ease-expo) .65s both; }
html.reduit .club-carte.etiquette::after { animation: none; }
@media (max-width: 1100px) {
  .club-carte > div { grid-template-columns: 1fr; }
  .club-carte > div > .actions { grid-column: 1; grid-row: auto; padding-left: 0; margin-top: 18px !important; flex-direction: row; align-items: center; }
  .club-carte > div > .actions::before { display: none; }
}
@media (max-width: 620px) {
  .club-carte.etiquette { grid-template-columns: 1fr; padding: 28px 22px; }
  .club-carte > div { padding-left: 0; }
  .club-carte > div::before { display: none; }
  .club-carte.etiquette::after { left: 50%; top: 70px; translate: -50% -50%; }
}

/* Carte du club : le portrait du président, fondu dans le fond côté droit (27/10/2026), et un cadre sans liseré (plus doux).
   Le texte et les boutons s'arrêtent avant le portrait ; la signature (nom, fonction) se pose en bas à droite, sur la photo. */
.club-carte.etiquette { border: 0; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8); isolation: isolate; }   /* calques (halo, portrait) au-dessus du fond, même sans l'effet de survol */
.club-carte.etiquette::before { display: none; }
.club-carte__portrait { position: absolute; top: 0; right: 0; bottom: 0; width: 36%; z-index: -1; pointer-events: none;
  -webkit-mask: linear-gradient(90deg, transparent, #000 55%); mask: linear-gradient(90deg, transparent, #000 55%); }
.club-carte__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 20%; opacity: .5; }
.club-carte > div { grid-template-columns: 1fr; padding-right: 30%; }
.club-carte > div > .actions { grid-column: 1; grid-row: auto; padding-left: 0; margin-top: 18px !important; flex-direction: row; align-items: center; }
.club-carte > div > .actions::before { display: none; }
.club-carte__signature { position: absolute; right: clamp(22px, 3vw, 40px); bottom: 18px; margin: 0; text-align: right; }
.club-carte__signature b { display: block; font: 400 15px/1.15 var(--f-affiche); color: var(--clair); }
.club-carte__signature span { display: block; margin-top: 3px; font: 700 10.5px/1.2 var(--f-texte); letter-spacing: .16em; text-transform: uppercase; color: var(--or); }
@keyframes club-portrait { from { opacity: 0; transform: scale(1.06); } }
html.anime .club-carte.est-vu .club-carte__portrait { animation: club-portrait 1.6s var(--ease-expo) .3s both; }
html.anime .club-carte.est-vu .club-carte__signature { animation: club-monte 1s var(--ease-expo) .8s both; }
@media (max-width: 860px) {
  .club-carte > div { padding-right: 0; }
  .club-carte__portrait { top: auto; left: auto; width: min(68%, 300px); height: auto; aspect-ratio: 1;
    -webkit-mask: radial-gradient(70% 70% at 62% 48%, #000 35%, transparent 72%); mask: radial-gradient(70% 70% at 62% 48%, #000 35%, transparent 72%); }
  .club-carte__portrait img { object-position: 50% 20%; opacity: .6; }
  .club-carte.etiquette:has(.club-carte__portrait) { padding-bottom: min(56vw, 230px); }
}
/* la carte du club, en fin du kit presse */
.club-carte--presse { margin-top: clamp(48px, 6vw, 88px); }
/* Contact : sans portrait, le texte reprend toute la largeur */
.club-carte:not(:has(.club-carte__portrait)) > div { padding-right: 0; }
/* pied de page : le vrai logo Facebook (bleu), sans cadre ; il grandit un peu au survol */
.reseau.reseau--facebook { width: auto; height: auto; border: 0; background: none; border-radius: 50%; transition: transform .3s var(--ease-expo), box-shadow .3s ease; }
a.reseau.reseau--facebook:hover { background: none; transform: scale(1.1); box-shadow: 0 0 0 4px rgba(8, 102, 255, .22); }
.reseau--facebook svg { display: block; }
/* pied de page : le lien vers la page contact remplace l'adresse e-mail */
.pied .lien-fleche { display: inline-flex; align-items: center; color: var(--or-clair); }   /* le texte peut passer à la ligne, la flèche reste accolée */

/* ---------- Infos pratiques : le plan d'accès animé (27/10/2026) ----------
   Carte tracée d'après OpenStreetMap (_source/outils/plan_acces.py) : routes en tons de papier, l'A31 à l'encre, les deux
   itinéraires (Luxembourg en grenat, Metz en or) qui se tracent à l'apparition, puis un point qui les parcourt en boucle ;
   l'épingle de la salle tombe et une onde bat autour. Tout est visible et immobile sans animation (html.doux, html.reduit). */
.plan-acces { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 3.4vw, 56px); align-items: center; margin-top: clamp(44px, 5vw, 80px); }
.plan-acces__tete { display: grid; gap: 16px; align-content: start; }
.plan-acces__legende { display: grid; gap: 14px; margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--encre-2); }
.plan-acces__legende li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; }
.plan-acces__legende b { display: block; color: var(--encre); }
.pa-pastille { width: 30px; height: 5px; margin-top: 9px; border-radius: 3px; }
.pa-pastille--nord { background: var(--grenat); } .pa-pastille--sud { background: #C08A2E; }
.plan-acces__cadre { position: relative; margin: 0; border-radius: clamp(18px, 2vw, 26px); overflow: hidden; background: #F7EFE1; box-shadow: 0 34px 70px -40px rgba(42, 15, 20, .55), 0 0 0 1px rgba(138, 98, 32, .14); }
.plan-acces__carte { display: block; width: 100%; height: auto; }
.plan-acces__cadre figcaption { padding: 4px 14px 8px; text-align: right; font-size: 11px; color: var(--gris); }
.plan-acces__carte path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pa-rue { stroke: #E4D9C3; stroke-width: 1.4; }
.pa-route { stroke: #D2C2A2; stroke-width: 2.6; }
.pa-grande { stroke: #BDA77F; stroke-width: 3.6; }
.pa-bretelle { stroke: #8E7B62; stroke-width: 2.6; }
.pa-auto { stroke: #4A3A2E; stroke-width: 7; }
.pa-fer { stroke: #CFC5B3; stroke-width: 1.6; stroke-dasharray: 7 6; }
.pa-itineraire { stroke-width: 7; stroke-dasharray: 1; stroke-dashoffset: 0; }
.pa-itineraire--nord { stroke: var(--grenat); } .pa-itineraire--sud { stroke: #C08A2E; }
.pa-voiture { fill: #FFF8EC; stroke-width: 3.5; opacity: 0; } .pa-voiture--nord { stroke: var(--grenat); } .pa-voiture--sud { stroke: #C08A2E; }
.pa-lieu { font: 700 15px/1 var(--f-texte); letter-spacing: .22em; fill: #A08B69; }
.pa-sortie { font: 700 17px/1 var(--f-texte); fill: var(--encre); paint-order: stroke; stroke: #F7EFE1; stroke-width: 5px; }
.pa-vers { font: 700 15px/1 var(--f-texte); letter-spacing: .06em; fill: var(--grenat); }
.pa-salle__epingle { fill: var(--grenat) !important; stroke: #FFF8EC !important; stroke-width: 2.5; }
.pa-salle__point { fill: #FFF8EC; }
.pa-salle__onde { fill: rgba(175, 29, 53, .22); opacity: 0; transform-box: fill-box; transform-origin: center; }
.pa-salle__nom { font: 400 27px/1 var(--f-affiche); fill: var(--encre); paint-order: stroke; stroke: #F7EFE1; stroke-width: 6px; }
.pa-salle__adresse { font: 600 15px/1 var(--f-texte); fill: var(--encre-2); paint-order: stroke; stroke: #F7EFE1; stroke-width: 5px; }
@keyframes pa-onde { from { opacity: .7; transform: scale(.5); } to { opacity: 0; transform: scale(3.2); } }
@keyframes pa-tombe { from { opacity: 0; transform: translateY(-46px); } 70% { opacity: 1; } }
@keyframes pa-fondu { from { opacity: 0; } }
html.anime .plan-acces .pa-itineraire { stroke-dashoffset: 1; transition: stroke-dashoffset 2.8s cubic-bezier(.65, 0, .35, 1); }
html.anime .plan-acces.est-vu .pa-itineraire { stroke-dashoffset: 0; }
html.anime .plan-acces.est-vu .pa-itineraire--sud { transition-delay: 1.1s; }
html.anime .plan-acces .pa-textes, html.anime .plan-acces .pa-vers { opacity: 0; transition: opacity 1s ease .3s; }
html.anime .plan-acces.est-vu .pa-textes, html.anime .plan-acces.est-vu .pa-vers { opacity: 1; }
html.anime .plan-acces.est-vu .pa-salle__epingle, html.anime .plan-acces.est-vu .pa-salle__point { animation: pa-tombe .9s var(--ease-expo) 1.6s both; }
html.anime .plan-acces.est-vu .pa-salle__nom, html.anime .plan-acces.est-vu .pa-salle__adresse { animation: pa-fondu .9s ease 2s both; }
html.anime:not(.reduit) .plan-acces.est-vu .pa-salle__onde { animation: pa-onde 2.6s ease-out 2.4s infinite; }
html.anime:not(.reduit) .plan-acces.est-vu .pa-salle__onde--2 { animation-delay: 3.7s; }
html.anime:not(.reduit) .plan-acces.est-vu .pa-voiture { animation: pa-fondu .6s ease 3.2s both; opacity: 1; }
@media (max-width: 1100px) { .plan-acces { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
  .pa-lieu { font-size: 26px; } .pa-sortie { font-size: 30px; stroke-width: 8px; } .pa-vers { font-size: 26px; }
  .pa-salle__nom { font-size: 40px; stroke-width: 9px; } .pa-salle__adresse { font-size: 24px; stroke-width: 7px; }
  .pa-itineraire { stroke-width: 10; } .pa-auto { stroke-width: 9; }
}
/* plan d'accès : repères connus (OpenStreetMap, nom en texte) et lien de la licence */
.pa-repere circle { fill: #FFF8EC; stroke: var(--encre-2); stroke-width: 2.5; }
.pa-repere text { font: 600 italic 14px/1 var(--f-texte); fill: var(--encre-2); paint-order: stroke; stroke: #F7EFE1; stroke-width: 5px; }
html.anime .plan-acces .pa-reperes { opacity: 0; transition: opacity 1s ease .8s; } html.anime .plan-acces.est-vu .pa-reperes { opacity: 1; }
.plan-acces__cadre figcaption a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 620px) { .pa-repere text { font-size: 24px; stroke-width: 7px; } .pa-repere circle { r: 7; } .pa-repere--pres text { display: none; } }
/* plan d'accès : un tap ouvre l'application de GPS (Google Maps, Waze, Plans d'Apple) */
.plan-acces__gps { display: grid; gap: 10px; margin-top: 8px; padding-top: 18px; border-top: 1px solid rgba(138, 98, 32, .22); }
.plan-acces__gps p { font: 700 11px/1.2 var(--f-texte); letter-spacing: .16em; text-transform: uppercase; color: var(--or-sombre); }
.plan-acces__gps .actions { gap: 8px; }

/* ---------- Les « étiquettes » deviennent des cartes lumineuses (27/10/2026) ----------
   Fini les coins coupés et le double filet : coins arrondis, un liseré de lumière en haut, une ombre légèrement dorée ;
   sur fond sombre, un halo d'or discret. Les photos intérieures s'arrondissent aussi. La carte du club garde son propre style. */
.etiquette:not(.club-carte) { clip-path: none; overflow: hidden; border-radius: clamp(20px, 2vw, 28px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 1px 0 rgba(138, 98, 32, .12), 0 28px 60px -32px rgba(138, 98, 32, .55); }
.etiquette:not(.club-carte)::before { display: none; }
.etiquette--nuit:not(.club-carte), .etiquette.formule--premium { box-shadow: inset 0 1px 0 rgba(237, 216, 134, .18), 0 0 0 1px rgba(210, 162, 76, .14), 0 30px 70px -30px rgba(0, 0, 0, .8), 0 0 60px -20px rgba(210, 162, 76, .22); }
.etiquette:not(.club-carte) .jour__photo, .etiquette:not(.club-carte) figure { border-radius: 12px; overflow: hidden; }
.billet__trou { z-index: 2; }

/* ---------- Infos pratiques, section Accès : « le billet et la carte », compact (27/10/2026) ----------
   À gauche, une carte lumineuse qui rassemble horaires, prix, adresse, GPS, agenda et mention santé ; à droite, le plan
   et sa légende. Un seul jeu de liens d'accès. */
.acces { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
.acces__billet { display: grid; gap: 14px; padding: clamp(22px, 2.2vw, 32px); border-radius: clamp(20px, 2vw, 28px); background: var(--papier); background-image: var(--verge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 1px 0 rgba(138, 98, 32, .12), 0 28px 60px -32px rgba(138, 98, 32, .55); }
.acces .titre { font-size: clamp(30px, 2.7vw, 42px); }
.acces .horaires { grid-template-columns: 1fr; border-radius: 14px; overflow: hidden; }
.acces .horaire { grid-template-columns: 96px minmax(0, 1fr) auto; align-items: baseline; gap: 10px; padding: 11px 16px; }
.acces .horaire__date { font-size: clamp(19px, 1.5vw, 22px); }
.acces .horaire__h { font-size: 16px; }
.acces .entree-carte { grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding: 14px 20px; }
.acces .entree-carte b { font-size: clamp(46px, 4vw, 60px); }
.acces .entree-carte h3 { font-size: 21px; margin-bottom: 4px; } .acces .entree-carte p { font-size: 14px; line-height: 1.45; }
.acces__lieu { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.acces__lieu .adresse { font-size: 15px; line-height: 1.5; }
.acces .plan-acces__gps { margin-top: 0; padding-top: 14px; }
.acces .moderation { padding: 12px 14px; font-size: 13px; line-height: 1.5; border-radius: 12px; }
.plan-acces.acces__plan { grid-column: auto; grid-template-columns: 1fr; gap: 14px; margin-top: 0; align-items: start; }
.acces__plan-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; }
.acces__plan-tete .texte { font-size: 15px; max-width: 34ch; }
.acces .plan-acces__legende { grid-template-columns: 1fr 1fr; gap: 10px 24px; margin-top: 0; font-size: 14px; }
@media (max-width: 1100px) { .acces { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
  .acces .plan-acces__legende { grid-template-columns: 1fr; }
  .acces .horaire { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .acces .horaire__jour { grid-column: 1; grid-row: 1; } .acces .horaire__date { grid-column: 1; grid-row: 2; }
  .acces .horaire__h { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}
/* carte du club : une longue adresse e-mail se coupe au lieu d'élargir la carte (petits téléphones) */
.club-carte > div { min-width: 0; }
.club-carte p a { overflow-wrap: anywhere; }

/* Accueil, bloc « Pourquoi ce salon existe » empilé (tablette, téléphone) : les infos pratiques arrivent sous le panneau
   bordeaux par une vague, comme partout ailleurs (l'ombre de .infos::before épouse la courbe) */
@media (max-width: 1100px) {
  .accueil + .duo .infos { position: relative; z-index: 1; margin-top: calc(-1 * var(--vague)); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60V14C120 24 330 46 540 42S900 6 1080 6 1320 26 1440 36V60z'/%3E%3C/svg%3E") top / 100% var(--vague) no-repeat, linear-gradient(#000, #000) 0 calc(var(--vague) - 1px) / 100% calc(100% - var(--vague) + 1px) no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60V14C120 24 330 46 540 42S900 6 1080 6 1320 26 1440 36V60z'/%3E%3C/svg%3E") top / 100% var(--vague) no-repeat, linear-gradient(#000, #000) 0 calc(var(--vague) - 1px) / 100% calc(100% - var(--vague) + 1px) no-repeat; }
}

/* ---------- Infos pratiques : trouver la salle quoi qu'il arrive (27/10/2026) ----------
   Nom de la salle sur Google Maps, entrée du parking et coordonnées GPS à copier, sous les boutons d'itinéraire. */
.repere-salle { display: grid; gap: 8px; margin-top: 6px; padding: 14px 16px; border-radius: 14px; background: rgba(138, 98, 32, .07); font-size: 14px; line-height: 1.5; color: var(--encre-2); }
.repere-salle li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; }
.repere-salle .ic { width: 18px; height: 18px; margin-top: 2px; color: var(--grenat); }
.repere-salle b { color: var(--encre); font-weight: 600; }
.repere-salle__gps { grid-template-columns: 18px minmax(0, 1fr) auto !important; align-items: center !important; }
.repere-salle__gps .ic { margin-top: 0; }
.repere-salle__gps #gps-salle { font-variant-numeric: tabular-nums; white-space: nowrap; }
.repere-salle__gps .btn .ic { color: currentColor; margin: 0; }
.pied .pied__gps { margin-top: 6px; font-size: 13px; opacity: .75; }
@media (max-width: 480px) { .repere-salle__gps { grid-template-columns: 18px minmax(0, 1fr) !important; } .repere-salle__gps .btn { grid-column: 2; justify-self: start; } }

/* ---------- Carte du club sur téléphone et tablette : le portrait d'Arnaud Houbin centré et mis en valeur (27/10/2026) ----------
   Plus de demi-portrait calé dans le coin : un grand portrait centré sous le texte, plus lumineux, posé sur un halo d'or,
   qui se fond dans la carte par le haut et les côtés ; la signature est centrée sur son bas. */
@media (max-width: 860px) {
  .club-carte.etiquette:has(.club-carte__portrait) { padding-bottom: min(100vw, 430px); }
  .club-carte__portrait { left: 50%; right: auto; bottom: 0; width: min(100%, 420px); translate: -50% 0;
    background: radial-gradient(46% 44% at 50% 46%, rgba(210, 162, 76, .26), transparent 75%);
    -webkit-mask: radial-gradient(58% 62% at 50% 44%, #000 52%, transparent 100%); mask: radial-gradient(58% 62% at 50% 44%, #000 52%, transparent 100%); }
  .club-carte__portrait img { object-position: 50% 18%; opacity: .92; filter: contrast(1.06) brightness(1.04); }
  .club-carte__signature { left: 0; right: 0; bottom: 22px; text-align: center; }
  .club-carte__signature b { font-size: 22px; text-shadow: 0 2px 18px rgba(0, 0, 0, .85); }
  .club-carte__signature span { margin-top: 5px; font-size: 11px; letter-spacing: .2em; }
}

/* ---------- Vignerons : la page s'arrondit comme le reste du site (28/10/2026) ----------
   Les pastilles, la fiche du stand (à côté du plan comme dans la feuille du téléphone), les cartes de la liste, les cadres
   des logos et l'appel à exposer reprennent les arrondis des cartes du site ; les stands du plan s'arrondissent un peu plus,
   à leur échelle. Les murs de la salle restent droits : c'est un plan. */
.filtre, .filtre-regions a { border-radius: 10px; }
.fiche { border-radius: 18px; }
.fiche::before { border-radius: 12px; }
.fiche__logo { border-radius: 12px; }
.exposant { border-radius: 14px !important; }
.exposant__logo, .stand__logo-cadre { border-radius: 10px; }
.candidater { border-radius: clamp(20px, 2vw, 28px); }
.pstand { border-radius: calc(var(--u) * 1.4); }

/* ---------- Salon 2025, bloc rouge : photo de la remise du chèque et logo du club dont la roue tourne (28/10/2026) ----------
   À gauche, sous les 10 000 €, la photo de la remise du chèque à Eux pour Eux ; à droite, au-dessus du texte, le logo du
   Rotary Club de Thionville Rive Droite, le SVG d'origine sans retouche, inséré dans la page par le générateur : seule la
   roue tourne, sur son centre. Forme et couleurs inchangées. La roue reste immobile en « moins d'animations », sans JS, et s'arrête avec le bouton pause. */
.solid__col { display: grid; gap: 16px; }
.solid__col--photo { grid-template-rows: auto auto 1fr; }
.solid__col--rotary { grid-template-rows: 1fr auto auto; }
.solid__photo { align-self: end; margin: 0; overflow: hidden; aspect-ratio: 1400 / 879; border-radius: clamp(12px, 1.3vw, 18px); background: var(--bordeaux); box-shadow: 0 0 0 1px rgba(246, 238, 226, .16), 0 28px 50px -30px rgba(10, 3, 5, .8); }
.solid__photo img { width: 100%; height: 100%; object-fit: cover; }
.solid__rotary { position: relative; align-self: start; justify-self: start; height: clamp(72px, 6.4vw, 96px); aspect-ratio: 537 / 216; }
.solid__rotary img { position: absolute; inset: 0; width: 100%; height: 100%; }
.solid__rotary-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.solid__rotary-roue { transform-box: fill-box; transform-origin: center; }   /* logo en SVG dans la page (28/10/2026) : la roue est redessinée à chaque image, nette à tout angle */
/* La petite roue (demande du 28/10/2026) : posée droite, elle repart lentement, tourne, puis ralentit très
   doucement et s'arrête droite ; un tour par cycle. */
html.anime:not(.reduit) .solid__rotary-roue { animation: roue-rotary-pause 14s infinite; }
@keyframes roue-rotary-pause { 0%, 20% { rotate: 0deg; animation-timing-function: cubic-bezier(.5, 0, .12, 1); } 100% { rotate: 360deg; } }
html.anime.videos-pause .solid__rotary-roue { animation-play-state: paused; }
@keyframes roue-rotary { from { rotate: 0deg; } to { rotate: 360deg; } }
@media (max-width: 860px) { .solid__photo { margin-top: 8px; } .solid__rotary { margin-top: 20px; } }
/* Sur ordinateur (28/10/2026) : le logo grandit et se centre dans l'espace libre au-dessus du texte ; la même roue, en grand
   et très atténuée, tourne derrière le bloc sur le même centre que la roue du logo, coupée par les bords du panneau.
   Seule l'opacité change. */
.solid__roue-geante { display: none; }
@media (min-width: 1101px) {
  .solid__rotary { align-self: center; justify-self: center; height: clamp(104px, 9vw, 136px); }
  .solid__rotary .solid__roue-geante { --d: clamp(560px, 52vw, 820px); display: block; z-index: -1; inset: auto; left: 79.62%; top: 50%; height: var(--d); width: auto; max-width: none; aspect-ratio: 537 / 216; translate: -79.62% -50%; opacity: .13; pointer-events: none; clip-path: circle(26.5% at 79.62% 50%); transform-origin: 79.62% 50%; }
  html.anime:not(.reduit) .solid__rotary .solid__roue-geante { animation: roue-rotary 40s linear infinite; }
  html.anime.videos-pause .solid__rotary .solid__roue-geante { animation-play-state: paused; }
}

/* ---------- Accueil, « Pourquoi ce salon existe » : le logo animé de la page Salon 2025, plus gros, et sa grande roue en fond (31/10/2026) ----------
   Le logo (SVG d'origine sans retouche, seule la roue tourne) prend le vide en bas de la colonne de gauche ; la grande roue
   tourne derrière le panneau, sur le même centre, coupée par ses bords et ses vagues. Téléphone et tablette compris.
   L'image de la grande roue est recadrée en carré sur la roue (99,5 % = centre de la roue au milieu du carré) : une couche
   large de 2,5 diamètres serait découpée en tuiles par Safari sur iPhone. Le cercle ne coupe aucune dent (mesuré).
   À l'entrée, le conteneur du logo ne bouge pas : s'il bougeait, la roue passerait devant les textes puis derrière, d'un coup. */
.solid__col--logo { grid-template-rows: repeat(4, auto) 1fr; }
.solid__col--logo .solid__rotary { align-self: end; justify-self: start; height: clamp(96px, 28vw, 130px); margin-top: 8px; }
.solid__col--club { grid-template-rows: repeat(3, auto) 1fr; }
.solid__col--club .solid__club { align-self: end; }
.solid__col--logo .solid__roue-geante { --d: clamp(440px, 140vw, 760px); display: block; z-index: -1; inset: auto; left: 79.62%; top: 50%; width: var(--d); height: var(--d); max-width: none; aspect-ratio: auto; translate: -50% -50%; object-fit: cover; object-position: 99.5% 50%; border-radius: 50%; clip-path: none; transform-origin: 50% 50%; opacity: .13; pointer-events: none; }
@media (min-width: 1101px) {
  .solid__col--logo .solid__rotary { height: clamp(104px, 9vw, 136px); }
  .solid__col--logo .solid__roue-geante { --d: clamp(560px, 52vw, 820px); }
}
html.anime:not(.reduit) .solid__col--logo .solid__roue-geante { animation: roue-rotary 40s linear infinite; }
html.anime.videos-pause .solid__col--logo .solid__roue-geante, html.anime .duo.houle--repos .solid__col--logo .solid__roue-geante, html.anime .duo.houle--repos .solid__col--logo .solid__rotary-roue { animation-play-state: paused; }
html.anime .duo .solid > .solid__col--logo > .solid__rotary { opacity: 1; transform: none; filter: none; transition: none; }
html.anime .solid__col--logo .solid__rotary-svg { opacity: 0; translate: 0 26px; filter: blur(8px); transition: opacity .9s var(--ease-expo), translate .9s var(--ease-expo), filter .9s var(--ease-expo); }
html.anime .solid.est-vu .solid__col--logo .solid__rotary-svg { opacity: 1; translate: none; filter: none; transition-delay: .93s; }
html.reduit .solid__col--logo .solid__rotary-svg { filter: none; }
html.anime .solid__col--logo .solid__roue-geante { opacity: 0; transition: opacity 1.6s ease; }
html.anime .solid.est-vu .solid__col--logo .solid__roue-geante { opacity: .13; transition-delay: .5s; }

/* Galerie 2025 sur iPhone (29/10/2026) : les rubans ne défilaient pas ou ne montraient qu'une photo.
   1. Plus de masque sur les rubans : sous un masque, dans une section qui porte déjà celui de la vague, Safari fige
      ou ne redessine pas une animation. Le fondu des bords est fait par deux dégradés posés par-dessus.
   2. Sur écran tactile, toucher une photo laisse le focus dessus (et un survol « collant ») : la pause au survol / au
      focus arrêtait le ruban pour de bon. Elle ne vaut plus que pour une souris ; le bouton pause des vidéos reste.
   3. Le ruban a sa propre couche graphique (animation fluide sur Safari). Le chargement des vignettes est forcé à
      l'approche de la galerie (sdv.js). */
.galerie__rang { position: relative; -webkit-mask: none; mask: none; }
.galerie__rang::before, .galerie__rang::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 2; width: 6%; pointer-events: none; }
.galerie__rang::before { left: 0; background: linear-gradient(90deg, var(--lie), rgba(23, 10, 13, 0)); }
.galerie__rang::after { right: 0; background: linear-gradient(270deg, var(--lie), rgba(23, 10, 13, 0)); }
.galerie__piste { will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
html.reduit .galerie__rang::before, html.reduit .galerie__rang::after, html.doux .galerie__rang::before, html.doux .galerie__rang::after { display: none; }
@media (hover: none) {
  html:not(.videos-pause) .galerie__rang:hover .galerie__piste,
  html:not(.videos-pause) .galerie__rang:focus-within .galerie__piste { animation-play-state: running; }
}
/* Galerie 2025 sur écran tactile (sdv.js ajoute html.galerie-tactile) : bande à défilement natif avancée par le script,
   plus d'animation CSS ni de couche géante ; les fondus des bords, qui défileraient avec la bande, sont retirés. */
html.galerie-tactile .galerie__rang { overflow-x: auto; overflow-y: hidden; scroll-behavior: auto; scroll-snap-type: none; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
html.galerie-tactile .galerie__rang::-webkit-scrollbar { display: none; }
html.galerie-tactile .galerie__rang::before, html.galerie-tactile .galerie__rang::after { display: none; }
html.galerie-tactile .galerie__piste { animation: none !important; will-change: auto; transform: none; }
/* Galerie 2025, iPhone (29/10/2026) : Safari n'applique pas aspect-ratio à un <button> pour réserver sa place dans le
   ruban (il garde la largeur d'origine de l'image, 747 px) : des vides énormes entre les photos. Largeur explicite :
   hauteur × proportion (--r), sans aspect-ratio ; la case du ruban prend exactement la largeur de la photo. */
.galerie__rang .galerie__item { --h: clamp(180px, 22vw, 290px); height: var(--h); width: calc(var(--h) * var(--r)); aspect-ratio: auto; padding: 0; }
.galerie__rang--retour .galerie__item { --h: clamp(150px, 17vw, 230px); }
.galerie__piste > li { flex: none; display: block; width: max-content; min-width: 0; }
/* Espace final égal au gap : la moitié de la piste doublée = exactement un tour (ordinateur : plus de saut de 6 px). */
.galerie__piste { padding-right: 12px; }