/* ==========================================================================
   Foire aux Fromages et aux Vins de Coulommiers — feuille de style du site
   Design system : voir /readme.md du projet. Couleurs, typo et rythmes
   reprennent le logo officiel (rose #E84090, turquoise #00A898).
   ========================================================================== */

/* --------------------------------------------------------------- 1. Tokens */
:root {
  /* Marque */
  --rose: #e84090;
  --rose-fonce: #cc2f78;
  --rose-encre: #a3245f;
  --rose-pale: #fdf1f7;
  --rose-bord: #f7b8d6;

  --turquoise: #00a898;
  --turquoise-fonce: #00897c;
  --turquoise-encre: #006a60;
  --turquoise-clair: #55c9bc;
  --turquoise-pale: #eaf8f6;
  --turquoise-bord: #92ded4;
  --turquoise-nuit: #04463f;

  /* Neutres */
  --encre: #1d1819;
  --texte: #3d3536;
  --texte-doux: #5b514f;
  --gris: #7d716d;
  --creme: #fdfaf5;
  --sable: #f8f2e8;
  --sable-bord: #efe6d7;
  --sable-fonce: #ded2c0;
  --blanc: #ffffff;
  --or: #d4af37;
  --or-clair: #e8c96a;

  /* Typographie */
  --titre: 'Abril Fatface', Georgia, 'Times New Roman', serif;
  --accent: 'Lobster Two', 'Brush Script MT', cursive;
  --texte-police: 'Fira Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Rythme */
  --page: 1240px;
  --gout: 40px;             /* gouttière horizontale */
  --r-s: 14px;
  --r-m: 18px;
  --r-l: 22px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* Ombres */
  --ombre-s: 0 8px 22px rgba(29, 24, 25, 0.06);
  --ombre-m: 0 18px 44px rgba(29, 24, 25, 0.12);
  --ombre-l: 0 32px 72px rgba(29, 24, 25, 0.16);
  --ombre-rose: 0 10px 26px rgba(232, 64, 144, 0.28);

  /* Mouvement */
  --sortie: cubic-bezier(0.22, 0.8, 0.28, 1);
  --vite: 150ms;
  --moyen: 240ms;
  --lent: 620ms;
}

/* ------------------------------------------------------------ 2. Réglages */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { max-width: 100%; }
/* Les conteneurs décoratifs rognent eux-mêmes leur débordement : le clip ne peut
   pas être posé sur html/body, où Safari iOS casse sticky et les rails tactiles. */
.heros, .affiche-page, .guide-tete, .bloc, .ruban, .ruban-fete, .pied, .pied__rdv,
.compteur-bande, .defilant, main > section,
.visionneuse, .affiche-soiree { overflow-x: clip; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--texte);
  font-family: var(--texte-police);
  font-size: 16px;
  line-height: 1.6;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
img { border-style: none; }
/* width/height posés dans le HTML : le navigateur réserve la place (aucun saut de mise en page),
   mais la taille affichée reste celle définie par les styles, comme avant */
:where(img[width]) { width: auto; height: auto; }

a { color: var(--rose-fonce); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--rose-encre); }

h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible { outline: 3px solid var(--turquoise); outline-offset: 3px; border-radius: 4px; }

.saut-lien {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  padding: 14px 22px; background: var(--encre); color: #fff;
  font-weight: 700; text-decoration: none; border-radius: 0 0 var(--r-s) 0;
}
.saut-lien:focus { left: 0; color: #fff; }

/* --------------------------------------------------- 3. Titres et libellés */
.titre-xxl, .titre-xl, .titre-l, .titre-m, .titre-s {
  font-family: var(--titre); font-weight: 400; letter-spacing: -0.012em; color: var(--encre);
}
.titre-xxl { font-size: clamp(38px, 6.2vw, 58px); line-height: 1.04; }
.titre-xl  { font-size: clamp(34px, 5.4vw, 50px); line-height: 1.05; }
.titre-l   { font-size: clamp(28px, 4.2vw, 40px); line-height: 1.08; }
.titre-m   { font-size: clamp(24px, 3.2vw, 32px); line-height: 1.12; }
.titre-s   { font-size: clamp(20px, 2.4vw, 26px); line-height: 1.18; }
.sur-blanc, .sur-fonce { color: #fff; }

.accent { font-family: var(--accent); font-style: italic; font-weight: 700; }

.chapeau { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.65; max-width: 56ch; }

.oeil {
  font-size: 13px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--turquoise-fonce);
}
.oeil--rose { color: var(--rose-fonce); }
.oeil--clair { color: var(--turquoise-clair); }
.oeil--creme { color: var(--creme); }

.filet { height: 8px; width: 96px; margin-top: 16px; background-image: repeating-linear-gradient(90deg, var(--rose) 0 6px, transparent 6px 14px); }
.filet--turquoise { background-image: repeating-linear-gradient(90deg, var(--turquoise) 0 6px, transparent 6px 14px); }
.bande-pointillee { height: 8px; background-image: repeating-linear-gradient(90deg, var(--rose) 0 6px, transparent 6px 14px); }
.bande-pointillee--encre { background-image: repeating-linear-gradient(90deg, var(--encre) 0 6px, transparent 6px 14px); }

.note { font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--gris); }

/* ------------------------------------------------------------- 4. Gabarit */
.page { width: 100%; max-width: var(--page); margin: 0 auto; padding: 0 var(--gout); }

.bloc { padding: clamp(44px, 6vw, 66px) 0; position: relative; overflow: clip; }
.bloc > .page { position: relative; z-index: 1; }
.bloc > .rond, .heros > .rond { z-index: 0; }
.bloc--serre { padding: clamp(32px, 4vw, 46px) 0; }
.bloc--creme { background: var(--creme); }
/* première section de l'accueil, sous le héros : un crème un peu plus soutenu */
#actus.bloc--creme { background: #f6efe3; padding-top: clamp(34px, 4.2vw, 48px); padding-bottom: clamp(34px, 4.2vw, 48px); }
.bloc--sable { background: var(--sable); }
.bloc--encre { background: var(--encre); color: rgba(255, 255, 255, 0.86); }
.bloc--turquoise { background: var(--turquoise); color: #fff; }
.bloc--rose { background: var(--rose); color: rgba(255, 255, 255, 0.94); }
.bloc--rose .titre-xl, .bloc--rose .titre-l, .bloc--rose .titre-m { color: #fff; }
.bloc--turquoise .chiffre__num--rose { color: var(--creme); }
.bloc--turquoise .chiffre__num--turquoise { color: var(--encre); }
.bloc--turquoise .chiffre__lib { color: rgba(255, 255, 255, 0.88); }
.bloc--encre .titre-xl, .bloc--encre .titre-l, .bloc--encre .titre-m { color: #fff; }
.bloc--rose-pastel { background: #fbe3ee; }
.bloc--turquoise-pastel { background: #d9f1ee; }
.bloc--rose-poudre { background: #f6d6e4; }
/* bouton vert du logo avec son liseré blanc, sur fond sombre */
.btn.btn--vert-liseré { background: var(--turquoise); border-color: #fff; color: #fff; }
.btn.btn--vert-liseré:hover, .btn.btn--vert-liseré:focus-visible { background: var(--turquoise-fonce); border-color: #fff; color: #fff; }
.btn.btn--vert-liseré:active { background: var(--turquoise-encre); border-color: #fff; }
/* son pendant rose : le rose soutenu de la marque, qui tranche sur le bandeau
   plus clair, avec le même liseré blanc */
.btn.btn--rose-liseré { background: var(--rose-fonce); border: 2px solid #fff; color: #fff; }
.btn.btn--rose-liseré:hover, .btn.btn--rose-liseré:focus-visible { background: #a3245f; border-color: #fff; color: #fff; }
.btn.btn--rose-liseré:active { background: #86194d; border-color: #fff; }
/* dans le bandeau, les deux boutons portent leur contour et une ombre colorée */
.pied__rdv .btn.btn--vert-liseré { border: 2px solid #fff; box-shadow: 0 8px 20px rgba(0, 106, 96, 0.28); }
.pied__rdv .btn.btn--rose-liseré { box-shadow: 0 8px 20px rgba(134, 25, 77, 0.3); }
.pied__rdv .btn.btn--vert-liseré:hover { box-shadow: 0 14px 28px rgba(0, 106, 96, 0.36); }
.pied__rdv .btn.btn--rose-liseré:hover { box-shadow: 0 14px 28px rgba(134, 25, 77, 0.4); }
.bloc--menthe { background: #e6f5f0; }
.bloc--blanc { background: var(--blanc); }

.entete-bloc { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 30px; }

.grille { display: grid; gap: 20px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-2-1 { grid-template-columns: 1.1fr 0.9fr; }
.g-1-2 { grid-template-columns: 0.9fr 1.1fr; }
.g-1-1-1 { grid-template-columns: 1.2fr 1fr 1fr; }
.g-video { grid-template-columns: 0.66fr 1.34fr; }
.g-texte-prix { grid-template-columns: 1fr auto; }
.pile { display: flex; flex-direction: column; gap: 20px; }
.rangee { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* ------------------------------------------------------------- 5. Boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 28px; border-radius: var(--r-pill);
  font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap;
  transition: transform var(--moyen) var(--sortie), background var(--vite) ease, color var(--vite) ease, border-color var(--vite) ease;
}
.btn:hover { transform: translateY(-3px); }
.btn--grand { min-height: 56px; padding: 0 32px; font-size: 16px; }
.btn--petit { min-height: 44px; padding: 0 22px; font-size: 14px; }

.btn--rose { background: var(--rose); color: #fff; box-shadow: var(--ombre-rose); }
.btn--rose:hover { background: var(--rose-fonce); color: #fff; }
.btn--encre { background: var(--encre); color: #fff; }
.btn--encre:hover { background: #3d3336; color: #fff; box-shadow: 0 12px 28px rgba(29, 24, 25, 0.3); }
.btn--creme { background: var(--creme); color: var(--encre); }
.btn--creme:hover { background: var(--encre); color: #fff; }
.btn--contour { border: 2px solid var(--rose); color: var(--rose-fonce); background: transparent; }
.btn--contour:hover, .btn--contour:focus-visible { background: var(--rose); color: #fff; }
.btn--contour:active { background: var(--rose-fonce); border-color: var(--rose-fonce); color: #fff; }
.btn--fantome { border: 2px solid rgba(255, 255, 255, 0.85); color: #fff; background: transparent; }
.btn--fantome:hover, .btn--fantome:focus-visible { background: var(--creme); border-color: var(--creme); color: var(--rose-fonce); }
.btn--fantome:active { background: #fff; border-color: #fff; color: var(--rose-fonce); }
.btn:active { transform: translateY(0) scale(0.97); }

.lien-fleche { font-size: 13px; font-weight: 700; color: var(--rose-fonce); text-decoration: none; }
.lien-fleche:hover { text-decoration: underline; }

/* ------------------------------------------------------------ 6. Étiquettes */
.etiq {
  display: inline-flex; align-items: center; min-height: 28px; padding: 4px 14px;
  border-radius: var(--r-pill); font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
  background: var(--sable); border: 1px solid var(--sable-bord); color: var(--texte-doux);
}
.etiq--rose { background: var(--rose-pale); border-color: var(--rose-bord); color: var(--rose-encre); }
.etiq--turquoise { background: var(--turquoise-pale); border-color: var(--turquoise-bord); color: var(--turquoise-encre); }
.etiq--encre { background: var(--encre); border-color: var(--encre); color: #fff; }
.etiq--creme { background: var(--creme); border-color: var(--creme); color: var(--encre); }
.etiq--grande { min-height: 32px; padding: 6px 16px; font-size: 12px; letter-spacing: 0.14em; }

/* pied du tiroir mobile : reprend les informations de la barre haute masquée */
.tiroir__infos { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--sable-bord); }
.tiroir__date { font-family: var(--titre); font-size: 16px; color: var(--encre); }
.tiroir__gratuit { align-self: flex-start; padding: 5px 13px; border-radius: var(--r-pill); background: var(--turquoise-pale); border: 1px solid var(--turquoise-bord); font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--turquoise-encre); }
.tiroir__tel { font-family: var(--titre); font-size: 20px; color: var(--rose) !important; text-decoration: none; }

/* ---------------------------------------------------------- 7. Barre haute */
.barre-haute {
  position: relative; background: var(--encre); color: rgba(255, 255, 255, 0.82); font-size: 13px;
  overflow: hidden;
}
/* fil lumineux qui traverse lentement le bandeau */
.barre-haute::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--turquoise) 18%, var(--turquoise-clair) 42%, var(--turquoise) 66%, transparent);
  background-size: 220% 100%; animation: filLumineux 12s linear infinite;
}
@keyframes filLumineux { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.barre-haute .page {
  display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap;
  min-height: 54px; padding-top: 9px; padding-bottom: 9px;
}
@media (min-width: 761px) {
  .barre-haute .page { flex-wrap: nowrap; justify-content: space-between; gap: 0 14px; }
  .barre-haute__soirees { margin-left: 0; }
  .barre-haute .pro::before { display: none; }
}

/* compte à rebours vivant, à gauche */
.barre-haute__jauge { display: inline-flex; align-items: baseline; gap: 9px; }
.barre-haute__jauge b {
  font-family: var(--titre); font-weight: 400; font-size: 25px; line-height: 1; color: #fff;
  letter-spacing: 0.01em;
}
.barre-haute__jauge b i { font-style: normal; color: var(--turquoise-clair); font-variant-numeric: tabular-nums; }
.barre-haute__jauge > span { font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }

.barre-haute__date {
  font-family: var(--titre); font-size: 18px; letter-spacing: 0.02em; color: #fff; white-space: nowrap;
  padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, 0.2);
}
.barre-haute__sep { width: 5px; height: 5px; border-radius: 50%; flex: 0 0 auto; background: rgba(255, 255, 255, 0.28); }
.barre-haute .gratuit {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px;
  border-radius: var(--r-pill); background: rgba(0, 168, 152, 0.18);
  border: 1px solid rgba(0, 168, 152, 0.4); color: var(--turquoise-clair);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
}
.barre-haute .gratuit { font-size: 12px; padding: 6px 15px; }
.barre-haute .gratuit i { width: 7px; height: 7px; border-radius: 50%; background: var(--turquoise-clair); box-shadow: 0 0 0 0 rgba(0, 168, 152, 0.6); animation: pointPulse 2.6s ease-out infinite; }
.barre-haute a { color: rgba(255, 255, 255, 0.82); text-decoration: none; transition: color var(--vite) ease; }
.barre-haute a:hover { color: #fff; }
.barre-haute .pro { display: flex; gap: 16px; align-items: center; }
.barre-haute .pro::before {
  content: ''; width: 1px; height: 18px; background: rgba(255, 255, 255, 0.2);
}
.barre-haute .pro > a:first-child { position: relative; }

.barre-haute .pro a span { display: inline-block; transition: transform var(--moyen) var(--sortie); }
.barre-haute .pro a:hover span { transform: translateX(4px); }
/* téléphone : petite pastille rose, l'appel est l'action principale du bandeau */
.barre-haute__tel::before {
  content: 'Renseignements';
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5); margin-right: 3px;
}
.barre-haute__tel { transition: color var(--vite) ease; }

.barre-haute__tel:hover::before { color: rgba(255, 255, 255, 0.72); }
@media (max-width: 1240px) { .barre-haute__tel::before { display: none; } }
.barre-haute__tel {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 11px; border-radius: var(--r-pill);
  background: var(--turquoise-encre); color: #fff !important; font-family: var(--titre); font-size: 15px;
  transition: background var(--vite) ease, transform var(--vite) var(--sortie);
}
.barre-haute__tel-icone { flex: 0 0 auto; display: block; color: #fff; }
.barre-haute__tel:hover { background: #00544c; transform: translateY(-1px); }
@keyframes pointPulse {
  0% { transform: scale(1); opacity: 0.9; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* ------------------------------------------------------- 8. En-tête et nav */
/* jauge de lecture : même barre sous le menu sur toutes les pages */
.entete__jauge {
  position: absolute; left: 0; bottom: -1px; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--rose), var(--turquoise));
  border-radius: 0 3px 3px 0; pointer-events: none;
  transition: width 120ms linear;
}
.entete {
  position: sticky; top: 0; z-index: 40;
  background: rgba(253, 250, 245, 0.985);
  border-bottom: 1px solid var(--sable-bord);
}
.entete .page { display: flex; align-items: center; gap: 26px; min-height: 118px; }
.marque { display: flex; align-items: center; flex: 0 0 auto; }
.marque img { height: 88px; width: auto; display: block; }

.menu { display: flex; gap: 17px; margin-left: auto; align-items: center; }
.menu a {
  position: relative; font-size: 14.5px; font-weight: 600; color: var(--encre);
  text-decoration: none; white-space: nowrap; padding: 9px 2px;
  transition: color var(--vite) ease, transform var(--moyen) var(--sortie);
}
.menu a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background-image: repeating-linear-gradient(90deg, var(--rose) 0 5px, transparent 5px 11px);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--moyen) var(--sortie);
}
.menu a:hover { color: var(--rose-fonce); transform: translateY(-2px); }
.menu a:hover::after { transform: scaleX(1); }
.menu a.actif { color: var(--rose-fonce); font-weight: 700; }
.menu a.actif::after {
  transform: scaleX(1);
  background-image: repeating-linear-gradient(90deg, var(--turquoise) 0 5px, transparent 5px 11px);
}
.menu .btn { padding: 0 22px; }
.menu .btn::after { display: none; }
/* le survol du menu ne doit pas repeindre le texte des boutons pleins */
.menu a.btn--rose, .menu a.btn--rose:hover, .menu a.btn--rose:focus { color: #fff; }
.menu a.btn--rose:hover { background: var(--rose-fonce); transform: translateY(-2px); }
.menu a.btn--rose:active { transform: translateY(0) scale(0.97); }

.burger { display: none; margin-left: auto; width: 48px; height: 48px; border-radius: var(--r-s); border: 1px solid var(--sable-bord); background: var(--blanc); align-items: center; justify-content: center; }
.burger span { display: block; width: 22px; height: 2px; background: var(--encre); position: relative; }
.burger span::before, .burger span::after { content: ''; position: absolute; left: 0; width: 22px; height: 2px; background: var(--encre); }
.burger span::before { top: -7px; }
.burger span::after { top: 7px; }

/* Tiroir mobile : panneau fixe au-dessus de la page, voile derrière.
   Il ne défile jamais avec le contenu et s'ouvre depuis n'importe quelle hauteur. */
.tiroir {
  position: fixed; inset: 0; z-index: 70;
  visibility: hidden; pointer-events: none;
  /* le panneau attend hors écran : on le rogne pour qu'il n'élargisse pas la page */
  overflow: clip;
}
.tiroir::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(16, 15, 24, 0.5); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity 280ms ease;
}
.tiroir .page {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(87vw, 392px); max-width: none; margin: 0;
  display: flex; flex-direction: column; gap: 2px;
  padding: 18px 22px calc(26px + env(safe-area-inset-bottom));
  background: var(--creme); box-shadow: -18px 0 50px rgba(16, 15, 24, 0.3);
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  transform: translateX(100%); transition: transform 320ms var(--sortie);
}
.tiroir.ouvert { visibility: visible; pointer-events: auto; }
.tiroir.ouvert::before { opacity: 1; }
.tiroir.ouvert .page { transform: none; }

.tiroir__tete { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 12px; }
.tiroir__tete img { height: 46px; width: auto; }
.tiroir__fermer {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--sable-bord); background: var(--blanc);
  display: flex; align-items: center; justify-content: center;
  font-size: 21px; line-height: 1; color: var(--encre); cursor: pointer;
  transition: background var(--vite) ease, transform var(--vite) var(--sortie);
}
.tiroir__fermer:hover { background: var(--rose); border-color: var(--rose); color: #fff; transform: rotate(90deg); }

.tiroir a {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 15px 14px; border-radius: var(--r-s);
  font-size: 17px; font-weight: 600; color: var(--encre); text-decoration: none;
  border-bottom: 1px solid var(--sable-bord);
  transition: background var(--vite) ease, color var(--vite) ease, padding-left var(--vite) var(--sortie);
}
.tiroir a::after {
  content: "→"; margin-left: auto; font-size: 15px;
  color: var(--gris); opacity: 0; transform: translateX(-6px);
  transition: opacity var(--moyen) ease, transform var(--moyen) var(--sortie);
}
.tiroir a:hover, .tiroir a:focus-visible {
  background: var(--rose-pale); color: var(--rose-encre); padding-left: 20px;
}
.tiroir a:hover::after, .tiroir a:focus-visible::after {
  opacity: 1; transform: none; color: var(--rose);
}
.tiroir a:active { background: var(--rose); color: #fff; transform: scale(0.985); }
.tiroir a:active::after { color: #fff; opacity: 1; transform: none; }
/* page courante : pastille rose pleine, impossible à manquer */
.tiroir a.actif {
  background: var(--rose); border-bottom-color: transparent; color: #fff;
  box-shadow: var(--ombre-rose);
}
.tiroir a.actif::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; flex: 0 0 auto;
}
.tiroir .btn { margin-top: 16px; justify-content: center; }
.tiroir .btn.actif { color: #fff; }
.tiroir .btn::before, .tiroir .btn::after, .tiroir a.actif::after,
.tiroir__infos a::after { content: none; }
/* le téléphone du pied de tiroir n'est pas une ligne de navigation */
.tiroir__infos a { padding: 0; border-bottom: 0; }
.tiroir__infos a:hover, .tiroir__infos a:focus-visible { background: transparent; padding-left: 0; color: var(--rose-fonce); }
.tiroir__infos a:active { background: transparent; color: var(--rose-fonce); transform: none; }
.tiroir a.actif:hover { background: var(--rose-fonce); color: #fff; padding-left: 14px; }

/* croix animée à la place du hamburger quand le tiroir est ouvert */
.burger.ouvert span { background: transparent; }
.burger.ouvert span::before { top: 0; transform: rotate(45deg); }
.burger.ouvert span::after { top: 0; transform: rotate(-45deg); }
/* la page ne bouge plus derrière le panneau */
html.menu-ouvert, html.menu-ouvert body { overflow: hidden; }

/* ---------------------------------------------------------------- 9. Héros */
.heros { position: relative; overflow: hidden; padding: clamp(40px, 5vw, 58px) 0; }
.heros--rose { background: var(--rose); color: #fff; }
/* Héros de l'accueil : un rose plus profond que l'aplat d'origine, en dégradé
   diagonal — moins uniformément saturé, et assez soutenu pour que les textes
   reviennent en blanc (contraste mesuré 4,5 à 5,6 contre 1). */
.heros--rose-profond {
  /* dégradé vertical : rose clair en haut, qui s'approfondit vers le bas, avec
     un léger halo lumineux en haut à gauche pour donner du relief */
  background:
    radial-gradient(120% 70% at 18% 0%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, #e891ba 0%, #dc75a7 38%, #cd5a95 72%, #b8437f 100%);
  color: #fff;
}
.heros--rose-profond .rond--hd { background: rgba(255, 255, 255, 0.34); }
.heros--rose-profond .rond--bg { background: rgba(255, 255, 255, 0.13); }
.heros--rose-profond .heros__titre { color: #fff; }
.heros--rose-profond .medaillon-dates .quand { color: #fff; }
.heros--rose-profond .heros__chapeau,
.heros--rose-profond .slogan { color: #fff; }
/* texte courant en blanc sur rose clair : on le porte en corps large et gras,
   seule façon de garder ce parti pris tout en restant lisible */
.heros--rose-profond .slogan { font-size: 19px; font-weight: 700; line-height: 1.62; }
/* ── Le billet d'entrée qui porte la date ──────────────────────────────────
   Les encoches latérales sont de véritables découpes, obtenues par masque :
   le fond du héros apparaît au travers, il n'y a donc plus de pastille d'une
   autre couleur qui trahisse la coupure. Le bord haut est dentelé comme une
   ligne de perforation, et un liseré turquoise cerne le papier crème. */
.heros--rose-profond .medaillon-dates {
  position: relative; padding: 24px clamp(24px, 3vw, 40px) 26px; rotate: 2.4deg;
  margin-left: clamp(6px, 1.3vw, 18px);
  border-radius: 18px;
  background:
    radial-gradient(120% 90% at 18% 0%, #fffdf8 0%, var(--creme) 46%, #f6eee0 100%);
  filter: drop-shadow(0 16px 30px rgba(84, 12, 48, 0.3));
  /* deux encoches rondes percées dans les flancs */
  -webkit-mask-image:
    radial-gradient(circle 11px at 0 50%, transparent 97%, #000 100%),
    radial-gradient(circle 11px at 100% 50%, transparent 97%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(circle 11px at 0 50%, transparent 97%, #000 100%),
    radial-gradient(circle 11px at 100% 50%, transparent 97%, #000 100%);
  mask-composite: intersect;
}
/* liseré intérieur turquoise, tracé en pointillé fin comme sur un vrai billet */
.heros--rose-profond .medaillon-dates::before {
  content: ''; position: absolute; inset: 6px; border-radius: 12px;
  border: 1.5px dashed rgba(0, 168, 152, 0.34); pointer-events: none;
}
.heros--rose-profond .medaillon-dates .quand {
  position: relative; color: var(--rose-fonce); padding-bottom: 14px;
}
/* filet de séparation, ponctué d'un losange rose au centre */
.heros--rose-profond .medaillon-dates .quand::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 5px; height: 1.5px;
  background:
    linear-gradient(90deg, transparent, rgba(232, 64, 144, 0.32) 12%, rgba(232, 64, 144, 0.32) 88%, transparent);
}
.heros--rose-profond .medaillon-dates .ou {
  display: block; margin-top: 12px; padding: 0; background: none; box-shadow: none;
  color: var(--turquoise); line-height: 1.12; text-align: center;
}
/* le losange qui ponctue le filet, posé au-dessus du lieu */
.heros--rose-profond .medaillon-dates .ou::before {
  content: ''; position: absolute; left: 50%; margin-top: -21px; translate: -50% 0;
  width: 7px; height: 7px; rotate: 45deg; background: var(--rose);
  box-shadow: 0 0 0 4px var(--creme);
}
.heros--rose-profond .slogan-points button::before { background: rgba(255, 255, 255, 0.42); }
.heros--rose-profond .slogan-points button:hover::before { background: rgba(255, 255, 255, 0.78); }
.heros--rose-profond .slogan-points button.actif::before { background: #fff; }
.heros--rose-profond .etiq--creme { background: var(--blanc); color: var(--rose-encre); border-color: var(--blanc); }
.heros--rose-profond .medaillon { box-shadow: 0 16px 36px rgba(84, 12, 48, 0.22); }
.heros--rose-profond .halo--tirets { border-color: rgba(255, 255, 255, 0.85); }
.heros--rose-profond .halo--onde { border-color: rgba(255, 255, 255, 0.62); }
/* la carte de la commune : tracé et libellés en encre rose sur ce fond clair */
.heros--encre { background: var(--encre); color: rgba(255, 255, 255, 0.86); }
.heros--turquoise { background: var(--turquoise); color: #fff; }
.heros--sable { background: var(--sable); color: var(--texte); }
.heros .page { position: relative; z-index: 1; }
.rond { position: absolute; border-radius: 50%; pointer-events: none; will-change: transform; contain: strict; }
.rond--flotte { animation: rondFlotte 10s ease-in-out infinite; }
.rond--flotte2 { animation: rondFlotte2 10s ease-in-out infinite; }
@keyframes rondFlotte {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(10px, -18px); }
}
@keyframes rondFlotte2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-12px, 14px) scale(1.06); }
}
.rond--respire { animation: rondRespire 8s ease-in-out infinite; }
/* rond vivant : il dérive, grossit et rétrécit en même temps */
.rond--vie { animation: rondVie 12s ease-in-out infinite; }
@keyframes rondVie {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.9; }
  25%  { transform: translate(14px, -22px) scale(1.35); opacity: 1; }
  50%  { transform: translate(-8px, -34px) scale(0.8); opacity: 0.65; }
  75%  { transform: translate(-18px, -12px) scale(1.2); opacity: 1; }
  100% { transform: translate(0, 0) scale(1); opacity: 0.9; }
}
@keyframes rondRespire {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.55; }
}
.rond--hg { top: -70px; left: -60px; width: 300px; height: 300px; background: rgba(255, 255, 255, 0.10); }
.rond--hd { top: -70px; right: -70px; width: 340px; height: 340px; background: rgba(255, 255, 255, 0.09); }
.rond--bg { bottom: -90px; left: -60px; width: 260px; height: 260px; background: rgba(29, 24, 25, 0.08); }
.rond--bd { bottom: -90px; right: -50px; width: 300px; height: 300px; background: rgba(0, 168, 152, 0.16); }

.heros-accueil { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.heros__titre { font-family: var(--titre); font-size: clamp(30px, 4.3vw, 48px); line-height: 1.06; color: #fff; margin: 37px 0 0; letter-spacing: -0.015em; text-wrap: balance; }
.heros__chapeau { font-size: clamp(16px, 1.6vw, 18px); line-height: 1.6; color: rgba(255, 255, 255, 0.95); margin: 12px 0 0; max-width: 46ch; }
/* trois accroches qui se relaient, même corps que le chapeau */
.heros__chapeau--defile { display: grid; }
.heros__chapeau--defile { max-width: 50ch; }
.heros__chapeau--defile .slogan {
  grid-area: 1 / 1; margin: 0; text-wrap: pretty; hyphens: none;
  opacity: 0; transform: translateY(10px); transition: opacity 700ms ease, transform 700ms var(--sortie);
}
.heros__chapeau--defile .slogan.actif { opacity: 1; transform: none; }
.heros__chapeau--defile .slogan.sortant { opacity: 0; transform: translateY(-10px); }
@media (prefers-reduced-motion: reduce) { .heros__chapeau--defile .slogan { transition: opacity 400ms ease; transform: none; } }

.heros__etiquettes { position: relative; top: -14px; }
.medaillon-bloc {
  display: flex; align-items: center; justify-content: center; gap: 26px;
  margin-top: 27px; margin-bottom: 4px; flex-wrap: nowrap;
}
.medaillon-dates { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.medaillon {
  flex: 0 0 auto; width: 220px; height: 220px; border-radius: 50%;
  background: var(--creme); box-shadow: 0 26px 60px rgba(29, 24, 25, 0.30);
  display: flex; align-items: center; justify-content: center; position: relative;
  overflow: hidden;
}
.medaillon::after {
  content: ''; position: absolute; inset: 11px; border-radius: 50%;
  border: 2px dashed var(--turquoise-bord); z-index: 2; pointer-events: none;
  animation: haloTourne 60s linear infinite;
}

/* Halo animé autour du médaillon : tirets qui tournent, ondes, deux billes en orbite */
.medaillon-halo { position: relative; flex: 0 0 auto; width: 220px; height: 220px; }
.medaillon-halo .medaillon { position: absolute; inset: 0; }
.halo { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; will-change: transform; }
.halo--tirets { inset: -10px; border: 2px dashed rgba(255, 255, 255, 0.7); animation: haloTourne 38s linear infinite reverse; }
.halo--onde { inset: -2px; border: 2px solid rgba(255, 255, 255, 0.5); animation: haloOnde 4.8s ease-out infinite; }
.halo--onde-2 { animation-delay: 2.4s; }
.halo--orbite { inset: -10px; animation: haloTourne 14s linear infinite; }
.halo--orbite i {
  position: absolute; left: 50%; top: 0; width: 16px; height: 16px; border-radius: 50%;
  transform: translate(-50%, -50%); background: var(--turquoise);
  box-shadow: 0 0 0 4px rgba(253, 250, 245, 0.9), 0 6px 14px rgba(0, 0, 0, 0.25);
}
.halo--orbite-2 { animation-duration: 22s; animation-direction: reverse; }
.halo--orbite-2 i { width: 11px; height: 11px; background: var(--creme); }
@keyframes haloTourne { to { transform: rotate(360deg); } }
@keyframes haloOnde { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(1.1); opacity: 0; } }

/* Points de navigation des accroches */
.slogan-points { display: flex; align-items: center; gap: 4px; margin-top: 14px; }
.slogan-points button {
  position: relative; width: 34px; height: 24px; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; background: transparent;
}
.slogan-points button::before {
  content: ''; width: 22px; height: 5px; border-radius: 3px;
  background: rgba(255, 255, 255, 0.45); transition: width var(--moyen) var(--sortie), background var(--vite) ease;
}
.slogan-points button:hover::before { background: rgba(255, 255, 255, 0.85); }
.slogan-points button.actif::before { background: #fff; width: 34px; }
@media (max-width: 560px) { .medaillon-bloc { flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { .halo, .medaillon::after { animation: none; } .halo--onde { display: none; } }
.medaillon img { width: 100%; height: auto; display: block; }

/* Zoom sur la tête + clin d'œil, toutes les 9 secondes */
.vache-zoom {
  position: relative; width: 76%;
  transform: rotate(-4deg); transform-origin: 70% 12%;
  animation: vacheZoom 9s ease-in-out infinite;
}
@keyframes vacheZoom {
  0%, 70% { transform: rotate(-4deg) scale(1); }
  76%, 88% { transform: rotate(0deg) scale(1.55); }
  94%, 100% { transform: rotate(-4deg) scale(1); }
}
.vache-clin {
  position: absolute; inset: 0; opacity: 0;
  animation: vacheClin 9s linear infinite;
}
@keyframes vacheClin {
  0%, 79.5% { opacity: 0; }
  80%, 84.5% { opacity: 1; }
  85%, 100% { opacity: 0; }
}
.medaillon-dates { min-width: 0; }
.medaillon-dates { text-align: center; }
/* la date tient sur les deux lignes prévues par son retour : pas de coupure */
.medaillon-dates .quand { font-family: var(--titre); font-size: clamp(24px, 2.85vw, 34px); line-height: 1.2; color: rgba(255, 255, 255, 0.95); white-space: nowrap; }
.medaillon-dates .ou { font-family: var(--accent); font-style: italic; font-weight: 700; font-size: clamp(40px, 4.95vw, 56px); line-height: 1; color: var(--encre); margin-top: 14px; }

.cadre-photo { background: var(--creme); border-radius: var(--r-xl); padding: 12px; box-shadow: var(--ombre-l); }
.cadre-photo img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-m); }
.diapo { position: relative; aspect-ratio: 3 / 4; border-radius: var(--r-m); overflow: hidden; }
.diapo img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; border-radius: 0; opacity: 0; transition: opacity 1100ms ease; }
.diapo img.visible { opacity: 1; }

/* Pile de cartes du héros : des cartes de terroir qui tombent sur le tas.
   Même mécanique que les tirages instantanés, habillage plus soigné :
   photo pleine, coins arrondis, bandeau crème et cachet de cire rose. */
.pile-polas { position: relative; width: 100%; max-width: 640px; margin-left: auto; aspect-ratio: 1; }

.pile-polas:not(.pile-polas--prete) .pola {
  opacity: 0 !important; transform: translate(-50%, -160%) rotate(-14deg) !important;
  transition: none !important; animation: none !important;
}
.pile-polas:not(.pile-polas--prete) .pola::before,
.pile-polas:not(.pile-polas--prete) .pola figcaption,
.pile-polas:not(.pile-polas--prete) .pola__onde { opacity: 0 !important; animation: none !important; }
.pola {
  position: absolute; left: 50%; top: 50%; width: 67%; margin: 0; padding: 0;
  border-radius: 18px; overflow: hidden; background: var(--creme);
  box-shadow:
    0 0 0 1px rgba(163, 36, 95, 0.12),
    0 26px 54px rgba(16, 15, 24, 0.34),
    0 4px 12px rgba(16, 15, 24, 0.14);
  transform: translate(-50%, -50%) rotate(var(--r, 0deg));
  transition: transform 980ms cubic-bezier(.16, .92, .24, 1.22), opacity 500ms ease,
    box-shadow 700ms ease;
  will-change: transform;
}
/* la carte du dessus se détache du tas : ombre plus franche, puis appel au survol */
.pola--dessus {
  box-shadow:
    0 0 0 1px rgba(163, 36, 95, 0.14),
    0 34px 66px rgba(16, 15, 24, 0.4),
    0 6px 16px rgba(16, 15, 24, 0.18);
}
.pola--dessus:hover {
  transform: translate(-50%, -50%) rotate(var(--r, 0deg)) translateY(-7px) scale(1.012);
}
/* cachet de cire : un petit médaillon rose sur l'angle haut droit */
.pola::before {
  content: ''; position: absolute; z-index: 3; top: 14px; right: 14px;
  width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(60% 60% at 38% 32%, #f2589f, var(--rose) 58%, var(--rose-fonce));
  box-shadow: 0 4px 10px rgba(29, 16, 24, 0.34), inset 0 0 0 2px rgba(255, 255, 255, 0.5);
  opacity: 0; transform: scale(0.5) rotate(-22deg);
  transition: opacity 360ms ease 420ms, transform 560ms cubic-bezier(.2, 1.2, .3, 1) 420ms;
}
.pola::before, .pola__onde { display: none; }
/* onde qui s'échappe du cachet au moment où il se pose */
.pola__onde {
  position: absolute; z-index: 2; top: 14px; right: 14px; width: 30px; height: 30px;
  border-radius: 50%; border: 2px solid var(--rose); opacity: 0; pointer-events: none;
}

@keyframes cachetOnde {
  0% { opacity: 0.6; transform: scale(1); }
  55% { opacity: 0; transform: scale(2.3); }
  100% { opacity: 0; transform: scale(2.3); }
}
@keyframes cachetBat {
  0%, 82%, 100% { transform: scale(1) rotate(0deg); }
  88% { transform: scale(1.14) rotate(-6deg); }
  94% { transform: scale(0.97) rotate(3deg); }
}

/* voile de lumière très doux sur la carte */
.pola::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: 18px; z-index: 2;
  background: linear-gradient(104deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 32%);
}
/* la photo occupe toute la carte, en portrait */
.pola__fenetre {
  position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: #e6d9ca;
}
.pola__fenetre img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pola__fenetre::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 42%; pointer-events: none;
  background: linear-gradient(0deg, rgba(20, 10, 16, 0.42), rgba(20, 10, 16, 0));
}

/* bandeau crème : la légende, précédée d'une pastille rose */
.pola figcaption {
  position: relative; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  padding: 15px 18px 17px; min-height: 60px;
  font-family: var(--accent); font-style: italic; font-weight: 700;
  font-size: clamp(14px, 1.35vw, 17.5px); line-height: 1.22; color: var(--encre);
  opacity: 0; transform: translateY(7px);
  transition: opacity 420ms ease 460ms, transform 520ms var(--sortie) 460ms;
}
.pola figcaption::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--rose);
  transform: scale(0); transition: transform 460ms var(--sortie) 620ms;
}
.pola--dessus figcaption { transform: none; }
.pola--dessus figcaption::before { transform: scale(1); }
/* les cartes paysage s'élargissent, les portraits se resserrent :
   l'image n'est jamais rognée sur son grand côté */
.pola--paysage { width: 78%; }
.pola--portrait { width: 62%; }
.pola--dessus figcaption { opacity: 1; }
.pola--sous1 {
  transform: translate(calc(-50% - 16px), calc(-50% + 12px)) rotate(var(--r, 0deg)) scale(0.955);
  filter: brightness(0.97);
}
.pola--sous2 {
  transform: translate(calc(-50% - 31px), calc(-50% + 23px)) rotate(var(--r, 0deg)) scale(0.915);
  filter: brightness(0.94);
}
.pola--arrive { transform: translate(-50%, -160%) rotate(-14deg); opacity: 0; transition: none; }
.pola--efface { opacity: 0; transform: translate(-50%, -38%) rotate(var(--r, 0deg)) scale(.92); transition: transform 1200ms ease, opacity 1200ms ease; }
@media (prefers-reduced-motion: reduce) {
  .pola { transition: opacity 500ms ease; }
  .pola figcaption, .pola::before { transition: opacity 300ms ease; transform: none; }
}
.legende--centre { text-align: center; margin-top: 16px; transition: opacity 350ms ease, transform 350ms ease; }
.legende--change { opacity: 0; transform: translateY(6px); }
.legende { font-family: var(--mono); font-size: 11px; color: rgba(255, 255, 255, 0.8); margin-top: 12px; text-align: right; }

/* -------------------------------------------------- 10. Compte à rebours */
.rebours { background: var(--encre); }
.rebours .page {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 30px; padding-top: 24px; padding-bottom: 24px;
}
.rebours__titre {
  font-family: var(--accent); font-style: italic; font-weight: 700;
  font-size: clamp(22px, 2.6vw, 28px); line-height: 1.15; color: var(--turquoise-clair);
  max-width: 7ch;
}
/* les quatre cases partagent exactement la même largeur : plus de décalage
   entre « jours » et « secondes » */
.rebours__cases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rebours__cell {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 2px 8px; border-left: 1px solid rgba(255, 255, 255, 0.14);
}
.rebours__cell:first-child { border-left: 0; }
.rebours__num {
  font-family: var(--titre); font-size: clamp(34px, 3.6vw, 46px); line-height: 1;
  color: #fff; font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
}
.rebours__num--vert { color: var(--turquoise-clair); }
.rebours__unite {
  font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

/* ------------------------------------------------------------ 11. Chiffres */
.chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.chiffre__num { font-family: var(--titre); font-size: clamp(38px, 5vw, 60px); line-height: 1; white-space: nowrap; }
.chiffre__num sup, .chiffre__num .plus { font-size: 0.5em; }
.chiffre__num--rose { color: var(--rose); }
.chiffre__num--turquoise { color: var(--turquoise); }
.chiffre__lib { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gris); margin-top: 10px; }

/* -------------------------------------------------------------- 12. Cartes */
.carte {
  background: var(--blanc); border: 1px solid var(--sable-bord); border-radius: var(--r-l);
  overflow: hidden; transition: transform var(--moyen) var(--sortie), box-shadow var(--moyen) ease;
}
.carte--survol:hover { transform: translateY(-4px); box-shadow: var(--ombre-m); }
.carte__corps { padding: 24px; }
.carte__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.carte__img--large { aspect-ratio: 16 / 9; }
.carte__img--haute { height: 300px; aspect-ratio: auto; object-fit: cover; }
.carte--sable { background: var(--sable); }
.carte--rose { background: var(--rose); color: #fff; border-color: var(--rose); }
.carte--turquoise { background: var(--turquoise); color: #fff; border-color: var(--turquoise); }
.carte--encre { background: var(--encre); color: rgba(255, 255, 255, 0.86); border-color: var(--encre); }
.carte--rose .titre-m, .carte--rose .titre-s, .carte--turquoise .titre-m, .carte--turquoise .titre-s,
.carte--encre .titre-m, .carte--encre .titre-s { color: #fff; }
.carte--pale { background: var(--turquoise-pale); border-color: var(--turquoise-bord); }
.carte--pale .titre-m, .carte--pale .titre-s { color: var(--turquoise-nuit); }
.carte-lien { display: block; text-decoration: none; color: inherit; }
.carte-lien .zoom { height: 300px; overflow: hidden; }
.carte-lien .zoom img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--lent) var(--sortie); }
.carte-lien:hover .zoom img { transform: scale(1.06); }

.etape { border-radius: var(--r-l); padding: 26px; display: flex; flex-direction: column; gap: 10px; transition: transform var(--moyen) var(--sortie), box-shadow var(--moyen) ease; }
.etape:hover { transform: translateY(-4px); box-shadow: var(--ombre-m); }
.etape__num { font-family: var(--titre); font-size: 38px; line-height: 1; opacity: 0.5; }
.etape__meta { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.72; }
.etape__titre { font-family: var(--titre); font-size: 28px; line-height: 1.1; }
.etape__texte { font-size: 14px; line-height: 1.6; opacity: 0.88; }
.etape--rose { background: var(--rose); color: #fff; }
.etape--turquoise { background: var(--turquoise); color: #fff; }
.etape--encre { background: var(--encre); color: #fff; }
.etape--sable { background: var(--sable); border: 1px solid var(--sable-bord); color: var(--encre); }

/* --------------------------------------------------------- 13. Jour / heure */
.jour-carte .jour-entete { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.jour-carte .jour-nom { font-family: var(--titre); font-size: 24px; color: var(--encre); }
.jour-carte .jour-horaire { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rose-fonce); }
.jour-liste { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; font-size: 14px; color: var(--texte); }
.jour-liste li { display: flex; gap: 8px; }
.jour-liste b { color: var(--turquoise-fonce); flex: 0 0 58px; }

.onglets { display: flex; gap: 12px; flex-wrap: wrap; }
.onglet {
  display: flex; flex-direction: column; gap: 4px; min-width: 176px;
  padding: 18px 22px; border-radius: var(--r-m); text-align: left;
  background: var(--blanc); border: 1px solid var(--sable-bord);
  transition: transform var(--moyen) var(--sortie), background var(--vite) ease;
}
.onglet:hover { transform: translateY(-3px); }
.onglet .j { font-family: var(--titre); font-size: 26px; line-height: 1.1; color: var(--encre); }
.onglet .h { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gris); }
.onglet[aria-selected="true"] { background: var(--rose); border-color: var(--rose); }
.onglet[aria-selected="true"] .j { color: #fff; }
.onglet[aria-selected="true"] .h { color: rgba(255, 255, 255, 0.82); }

.agenda { background: var(--blanc); border: 1px solid var(--sable-bord); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--ombre-s); }
.agenda__ligne { display: grid; grid-template-columns: 132px 1fr 240px; gap: 24px; align-items: center; padding: 22px 28px; border-bottom: 1px solid var(--sable); }
.agenda__ligne:hover { background: var(--creme); }
.agenda__heure { font-family: var(--titre); font-size: 25px; color: var(--encre); white-space: nowrap; }
.agenda__titre { font-size: 19px; font-weight: 700; color: var(--encre); }
.agenda__lieu { font-size: 14px; color: var(--gris); margin-top: 3px; }
.agenda__etiq { display: flex; justify-content: flex-end; }
.agenda__pied { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 22px 28px; background: var(--sable); }

.liste-numerotee { display: flex; flex-direction: column; gap: 12px; }
.liste-numerotee li { display: flex; align-items: center; gap: 16px; padding: 16px 20px; background: var(--blanc); border: 1px solid var(--sable-bord); border-radius: var(--r-m); }
.liste-numerotee .n { font-family: var(--titre); font-size: 22px; color: var(--rose); min-width: 34px; }
.liste-numerotee .quoi { font-size: 16px; font-weight: 600; color: var(--encre); }
.liste-numerotee .quand { margin-left: auto; font-size: 13px; color: var(--gris); white-space: nowrap; }

.texte-justi { text-wrap: pretty; }
.souligne {
  background: linear-gradient(180deg, transparent 62%, var(--rose-pale) 62%);
  color: inherit; font-weight: 600; padding: 0 1px; border-radius: 2px;
}
.souligne--turquoise { background: linear-gradient(180deg, transparent 62%, var(--turquoise-pale) 62%); }

/* ------------------------------------------------ 13 bis. Ouverture À propos */
.apropos { display: grid; grid-template-columns: 1fr 0.92fr; gap: 26px; align-items: center; }
.apropos__lead {
  font-size: clamp(19px, 1.9vw, 22px); line-height: 1.6; color: var(--texte);
  padding-left: 26px; border-left: 4px solid var(--rose); text-wrap: pretty;
}
.apropos__lead::first-letter {
  float: left; font-family: var(--titre); font-size: 62px; line-height: 0.82;
  color: var(--rose); padding: 6px 12px 0 0;
}
.apropos__colonnes { columns: 2; column-gap: 22px; margin-top: 22px; }
.apropos__colonnes p { font-size: 15.5px; line-height: 1.75; color: var(--texte-doux); text-wrap: pretty; }
.apropos__colonnes p + p { margin-top: 16px; }
.apropos__cles { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.apropos__cles span {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 18px;
  background: var(--blanc); border: 1px solid var(--sable-bord); border-radius: var(--r-m);
  font-size: 12px; color: var(--gris); letter-spacing: 0.02em; white-space: nowrap;
}
.apropos__cles b { font-family: var(--titre); font-weight: 400; font-size: 26px; line-height: 1; color: var(--turquoise); }
.apropos__cles span:nth-child(even) b { color: var(--rose); }

/* ----------------------- À propos : défilé vertical de photos, piloté aux flèches */
.defile { display: flex; flex-direction: column; gap: 12px; }
.defile__barre { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.defile__barre--bas { align-items: center; }
.defile__fenetre {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-l); overflow: hidden; background: var(--sable);
  box-shadow: 0 30px 68px rgba(16, 15, 24, 0.22), inset 0 0 0 1px rgba(16, 15, 24, 0.05);
}
.defile__piste {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  transition: transform 760ms cubic-bezier(.3, 0, .2, 1); will-change: transform;
}
.defile__vue { position: relative; flex: 0 0 100%; height: 100%; margin: 0; }
/* photo au format du cadre : aucune bande, jamais de vide sur les côtés */
.defile__vue img { width: 100%; height: 100%; object-fit: cover; display: block; }
.defile__vue figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 20px 18px;
  color: #fff; font-size: 14px; line-height: 1.4;
  background: linear-gradient(to top, rgba(16, 15, 24, 0.82), transparent);
}
/* étiquette posée au-dessus du cadre : elle ne mord plus sur la photo */
.defile__etiquette {
  display: inline-flex; align-items: baseline; gap: 10px; padding: 9px 18px;
  background: var(--rose); color: rgba(255, 255, 255, 0.88); border-radius: var(--r-pill);
  box-shadow: 0 10px 24px rgba(232, 64, 144, 0.32); font-size: 12.5px; white-space: nowrap;
}
.defile__etiquette b { font-family: var(--titre); font-weight: 400; font-size: 22px; line-height: 1; color: #fff; }
/* flèches hors du cadre, au-dessus et en dessous */
.defile__fleche {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; font-size: 14px; line-height: 1;
  background: var(--blanc); border: 1px solid var(--sable-bord); color: var(--encre); cursor: pointer;
  box-shadow: 0 8px 20px rgba(16, 15, 24, 0.10);
  transition: transform var(--vite) var(--sortie), background var(--vite) ease, color var(--vite) ease;
}
.defile__fleche:hover { background: var(--rose); border-color: var(--rose); color: #fff; }
.defile__barre .defile__fleche:hover { transform: translateY(-2px); }
.defile__compte {
  display: inline-flex; align-items: baseline; gap: 5px;
  font-family: var(--mono); font-size: 12px; color: var(--gris);
}
.defile__compte b { font-family: var(--titre); font-weight: 400; font-size: 20px; color: var(--rose); line-height: 1; }
.defile__vue figcaption { padding: 40px 20px 18px; }
@media (max-width: 640px) { .defile__fleche { width: 42px; height: 42px; } }
@media (prefers-reduced-motion: reduce) { .defile__piste { transition: none; } }

@media (prefers-reduced-motion: reduce) {
  .galerie__piece--anime { opacity: 0; transform: none; }
  .galerie__piece--pose { transition: opacity 400ms ease var(--d); }
}

@media (max-width: 1040px) {
  .apropos { grid-template-columns: 1fr; gap: 36px; }
  .apropos__colonnes { columns: 2; }
  .patchwork { max-width: 680px; margin: 0 auto; }
}
@media (max-width: 720px) {
  .apropos__colonnes { columns: 1; }
  .apropos__lead { padding-left: 18px; }
  .patchwork { gap: 7px; }
  .patchwork__vignette { left: 8px; bottom: 8px; padding: 9px 13px; }
  .patchwork__vignette b { font-size: 18px; }
}

/* ------------------------------------------------- 14. Frise chronologique */
.frise { display: flex; flex-direction: column; }
.frise__etape { display: grid; grid-template-columns: 152px 44px 1fr; align-items: stretch; }
.frise__an {
  font-family: var(--titre); font-size: clamp(24px, 2.2vw, 30px); line-height: 1;
  color: var(--rose); text-align: right; padding: 24px 8px 0 0;
  transition: transform var(--moyen) var(--sortie);
}
.frise__an--long { font-size: clamp(19px, 1.7vw, 23px); padding-top: 26px; }
.frise__etape--turquoise .frise__an { color: var(--turquoise); }
.frise__rail { position: relative; }
.frise__rail::before {
  content: ''; position: absolute; left: 50%; margin-left: -1px; width: 2px; top: 0; bottom: 0;
  background: repeating-linear-gradient(180deg, var(--rose-bord) 0 7px, transparent 7px 15px);
}
.frise__etape:first-child .frise__rail::before { top: 32px; }
.frise__etape:last-child .frise__rail::before { bottom: calc(100% - 32px); }
.frise__etape--turquoise .frise__rail::before { background-image: repeating-linear-gradient(180deg, var(--turquoise-bord) 0 7px, transparent 7px 15px); }
.frise__pastille {
  position: absolute; left: 50%; top: 24px; margin-left: -9px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--creme); border: 3px solid var(--rose); box-shadow: 0 0 0 5px var(--creme);
  transition: transform var(--moyen) var(--sortie), background var(--vite) ease;
}
.frise__etape--turquoise .frise__pastille { border-color: var(--turquoise); }
.frise__carte {
  background: var(--blanc); border: 1px solid var(--sable-bord); border-radius: var(--r-l);
  padding: 22px 28px 24px; margin: 4px 0 22px;
  transition: transform var(--moyen) var(--sortie), box-shadow var(--moyen) ease, border-color var(--vite) ease;
}
.frise__etape:hover .frise__carte { transform: translateY(-3px); box-shadow: var(--ombre-m); border-color: var(--rose-bord); }
.frise__etape--turquoise:hover .frise__carte { border-color: var(--turquoise-bord); }
.frise__etape:hover .frise__pastille { transform: scale(1.25); background: var(--rose); }
.frise__etape--turquoise:hover .frise__pastille { background: var(--turquoise); }
.frise__etape:hover .frise__an { transform: translateX(-3px); }
.frise__titre { font-size: 20px; font-weight: 700; color: var(--encre); text-wrap: pretty; }
.frise__texte { font-size: 15px; line-height: 1.7; color: var(--texte-doux); margin-top: 8px; text-wrap: pretty; }
.frise__jalon {
  display: inline-flex; margin-top: 16px; padding: 5px 13px; border-radius: var(--r-pill);
  background: var(--sable); border: 1px solid var(--sable-bord);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--texte-doux); white-space: nowrap;
}
@media (max-width: 760px) {
  .frise__etape { grid-template-columns: 30px 1fr; grid-template-areas: 'rail an' 'rail carte'; }
  .frise__an { grid-area: an; text-align: left; padding-top: 18px; }
  .frise__rail { grid-area: rail; }
  .frise__carte { grid-area: carte; padding: 18px 20px 20px; }
  .frise__pastille { top: 18px; box-shadow: 0 0 0 4px var(--creme); }
  .frise__etape:first-child .frise__rail::before { top: 26px; }
  .frise__etape:last-child .frise__rail::before { bottom: calc(100% - 26px); }
}

/* -------------------------------- 14 bis. La ronde des bénévoles */
/* Une seule échelle pour toute la scène : la géométrie validée à 1040 px est
   réduite d'un bloc quand la fenêtre se resserre. Rayons, portraits, étiquettes
   et écarts gardent ainsi exactement les mêmes proportions à toute largeur. */
.ronde { margin-top: 30px; display: flex; justify-content: center; }
/* Toute la scène est exprimée en unités de conteneur (cqw) : rayons, portraits,
   étiquettes et textes se réduisent ensemble quand la fenêtre se resserre, donc
   les écarts validés restent identiques à n'importe quelle largeur. */
.ronde__scene {
  container-type: inline-size;
  width: min(1040px, calc(100vw - 96px)); aspect-ratio: 1; position: relative;
  --r-ext: 46.3cqw; --r-int: 26.9cqw;
}
.ronde__anneau {
  position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%);
  pointer-events: none;
}
.ronde__anneau--interne {
  width: calc(var(--r-int) * 2); height: calc(var(--r-int) * 2);
  border: 2px dashed var(--rose-bord);
}
.ronde__anneau--externe {
  width: calc(var(--r-ext) * 2); height: calc(var(--r-ext) * 2);
  border: 2px dotted var(--turquoise-bord); opacity: 0.75;
}

/* Marguerite au centre */
.ronde__coeur {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: block; width: max-content; text-align: center; z-index: 3;
}
/* nom et rôle suspendus sous le disque, hors du flux */
.marguerite__legende {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: 12px; display: grid; gap: 2px; justify-items: center; width: max-content;
}
.marguerite {
  position: relative; width: 21.9cqw; height: 21.9cqw; border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #fff 0%, #fff 58%, var(--rose-pale) 100%); display: block;
  box-shadow: 0 0 0 5px var(--creme), 0 0 0 8px var(--rose), var(--ombre-l);
}
.marguerite::before {
  content: ''; position: absolute; inset: -1.9cqw; border-radius: 50%;
  border: 2px solid var(--rose-bord); animation: margueriteHalo 3.6s ease-out infinite;
}
@keyframes margueriteHalo {
  0% { transform: scale(0.95); opacity: 0.85; }
  70%, 100% { transform: scale(1.16); opacity: 0; }
}
.marguerite::after {
  content: ''; position: absolute; inset: 13px; border-radius: 50%;
  border: 2px dashed rgba(0, 168, 152, 0.85);
  animation: margueriteRonde 30s linear infinite;
}
@keyframes margueriteRonde { to { transform: rotate(360deg); } }
.marguerite__vache {
  position: absolute; inset: 2.9cqw; margin: auto; max-width: 76%; max-height: 76%;
  width: auto; height: auto; object-fit: contain;
  animation: margueriteVie 5s ease-in-out infinite;
}
.marguerite__vache--clin { opacity: 0; animation: margueriteVie 5s ease-in-out infinite, margueriteClin 5s linear infinite; }
@keyframes margueriteVie {
  0%, 100% { transform: translateY(0) rotate(-4deg) scale(1); }
  35% { transform: translateY(-9px) rotate(4deg) scale(1.03); }
  70% { transform: translateY(-2px) rotate(-1deg) scale(1); }
}
@keyframes margueriteClin {
  0%, 58% { opacity: 0; }
  62%, 70% { opacity: 1; }
  74%, 100% { opacity: 0; }
}
.marguerite__nom { font-family: var(--titre); font-weight: 400; font-size: 3.65cqw; line-height: 1; color: var(--rose-fonce); }
.marguerite__role {
  display: inline-flex; padding: 5px 14px; border-radius: var(--r-pill);
  background: var(--rose-pale); border: 1px solid var(--rose-bord);
  font-size: 12px; color: var(--rose-encre);
}
.marguerite__bulle {
  position: absolute; right: calc(50% + 118px); bottom: 46px; z-index: 4;
  padding: 11px 17px; max-width: 156px;
  border-radius: 16px 16px 3px 16px; background: var(--creme);
  border: 2px solid var(--rose-bord); box-shadow: var(--ombre-m);
  font-family: var(--accent); font-style: italic; font-weight: 700; font-size: 16px;
  line-height: 1.25; color: var(--rose-fonce); text-align: left;
  animation: margueriteBulle 5s ease-in-out infinite;
}
.marguerite__bulle::after {
  content: ''; position: absolute; right: -8px; bottom: 10px; width: 12px; height: 12px;
  background: var(--creme); border-right: 2px solid var(--rose-bord); border-bottom: 2px solid var(--rose-bord);
  transform: rotate(-45deg);
}
@keyframes margueriteBulle {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-5px) rotate(1.5deg); }
}

/* Seuls les membres du bureau tournent, sur l'anneau extérieur */
.ronde__orbite--ext { position: absolute; inset: 0; transform-origin: 50% 50%; z-index: 1; }
.ronde__orbite--ext { animation: rondeTourne 150s linear infinite; }
.astre__contenu { position: relative; display: grid; justify-items: center; transform-origin: 50% 50%; }
.ronde__orbite--ext .astre__contenu { animation: rondeTourne 150s linear infinite reverse; }
@keyframes rondeTourne { to { transform: rotate(360deg); } }
.ronde__scene:hover .ronde__orbite--ext,
.ronde__scene:hover .ronde__orbite--ext .astre__contenu,
.ronde__scene:focus-within .ronde__orbite--ext,
.ronde__scene:focus-within .ronde__orbite--ext .astre__contenu,
.ronde__scene--pause .ronde__orbite--ext,
.ronde__scene--pause .ronde__orbite--ext .astre__contenu { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .ronde__orbite--ext, .ronde__orbite--ext .astre__contenu { animation: none !important; }
}

/* Les bénévoles en orbite */
.astre {
  position: absolute; left: 50%; top: 50%;
  width: 14.4cqw; height: 14.4cqw; margin: -7.2cqw 0 0 -7.2cqw;
  display: grid; place-content: center; justify-items: center; text-align: center;
  /* le portrait est le seul élément dans le flux : il occupe le centre exact */
  --r: var(--r-int); --d: 0ms;
  transform: rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a)));
  opacity: 0; animation: astreEntre 600ms ease forwards; animation-delay: var(--d);
}
@keyframes astreEntre { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .astre { animation: none; opacity: 1; } }
.astre--externe { --r: var(--r-ext); }
.astre__medaille {
  position: relative; width: 10cqw; height: 10cqw; border-radius: 50%; overflow: hidden;
  background: var(--sable); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 3px var(--creme), 0 0 0 4px var(--rose-bord);
  transition: transform var(--moyen) var(--sortie), box-shadow var(--moyen) ease;
}
.astre--externe .astre__medaille { box-shadow: 0 0 0 3px var(--creme), 0 0 0 4px var(--turquoise-bord); }
.astre--elu .astre__medaille {
  width: 11.9cqw; height: 11.9cqw;
  box-shadow: 0 0 0 4px var(--creme), 0 0 0 5px var(--rose), var(--ombre-s);
}
.astre--elu figcaption b { font-size: 1.49cqw; }
.astre--elu figcaption span {
  display: inline-flex; padding: 0.29cqw 0.96cqw; border-radius: var(--r-pill);
  background: var(--rose-pale); border: 1px solid var(--rose-bord);
  font-size: 1.06cqw; font-weight: 600; color: var(--rose-encre);
}
.astre--externe .astre__medaille { width: 8.85cqw; height: 8.85cqw; }
.astre--externe figcaption b { font-size: 1.25cqw; }
.astre--externe figcaption { max-width: 12cqw; }
.astre { z-index: 4; }
.astre--elu { z-index: 5; position: absolute; }
.astre:hover { z-index: 6; }
.astre:hover .astre__medaille {
  transform: scale(1.12);
  box-shadow: 0 0 0 3px var(--creme), 0 0 0 4px var(--turquoise), var(--ombre-m);
}
.astre__medaille i { font-family: var(--titre); font-style: normal; font-size: 3cqw; color: var(--rose); }
.astre__medaille img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%;
  transition: transform 700ms var(--sortie);
}
.astre:hover .astre__medaille img { transform: scale(1.08); }
.astre figcaption {
  display: grid; row-gap: 4px; justify-items: center;
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 0.87cqw;
  width: max-content; max-width: 12.3cqw;
}
.astre--elu > figcaption, .astre--externe > figcaption { top: calc(50% + 50%); }
.astre figcaption b { font-size: 1.35cqw; font-weight: 700; line-height: 1.25; color: var(--encre); text-wrap: balance; }
.astre figcaption span { font-size: 1.06cqw; line-height: 1.3; color: var(--gris); text-wrap: balance; }

@media (max-width: 1100px) {
  .marguerite__bulle { right: calc(50% + 100px); max-width: 144px; }
}
@media (max-width: 900px) {
  .marguerite__bulle { right: calc(50% + 82px); bottom: 34px; font-size: 14px; max-width: 122px; padding: 8px 13px; }
}
@media (max-width: 1140px) {
  .ronde__scene {
    container-type: normal; aspect-ratio: auto;
    width: 100%; height: auto; display: grid; gap: 26px 12px;
    grid-template-columns: repeat(auto-fill, minmax(122px, 1fr));
  }
  .ronde__anneau { display: none; }
  /* en grille, la légende revient dans le flux sous le portrait : elle n'a plus
     de bloc conteneur à elle et se retrouverait sinon au bas de toute la grille */
  .ronde__coeur { position: static; transform: none; grid-column: 1 / -1; display: grid; justify-items: center; width: auto; }
  .marguerite__legende { position: static; transform: none; margin-top: 12px; }
  .marguerite { width: 152px; height: 152px; }
  .marguerite__nom { font-size: 27px; }
  .astre figcaption { position: static; transform: none; max-width: none; margin-top: 8px; }
  .astre figcaption b, .astre--elu figcaption b { font-size: 12.5px; }
  .astre figcaption span, .astre--elu figcaption span { font-size: 11px; padding: 3px 10px; }
  .astre__medaille, .astre--elu .astre__medaille, .astre--externe .astre__medaille { width: 92px; height: 92px; }
  .astre__medaille i { font-size: 28px; }
  .marguerite__vache { inset: 22px; }
  .marguerite__bulle { right: calc(50% + 70px); bottom: 28px; }
  .ronde__orbite--ext { position: static; display: contents; animation: none !important; }
  .ronde__orbite--ext .astre__contenu { animation: none !important; }
  .astre, .astre--elu { position: static; width: auto; height: auto; margin: 0; transform: none; }
  .astre figcaption { position: static; transform: none; margin-top: 8px; max-width: none; }
  .astre--elu .astre__medaille { width: 92px; height: 92px; }
  .astre--externe .astre__medaille { width: 78px; height: 78px; }
  .astre--elu { order: -1; }
}
@media (prefers-reduced-motion: reduce) {
  .marguerite::before, .marguerite::after, .marguerite__vache, .marguerite__bulle { animation: none; }
  .marguerite__vache--clin { opacity: 0; }
}

.appel { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.appel__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ------------------------------------------------------------- 15. Filtres */
.filtres { display: flex; gap: 10px; flex-wrap: wrap; }
.puce {
  display: inline-flex; align-items: center; min-height: 42px; padding: 0 20px;
  border-radius: var(--r-pill); font-size: 13px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--blanc); border: 1px solid var(--sable-bord); color: var(--texte-doux);
  transition: transform var(--vite) ease, background var(--vite) ease, color var(--vite) ease;
}
.puce:hover { transform: translateY(-2px); }
.puce[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: #fff; }

.compteur { display: flex; align-items: baseline; gap: 12px; margin: 26px 0 20px; }
.compteur .n { font-family: var(--titre); font-size: 30px; color: var(--encre); }
.compteur .l { font-size: 14px; color: var(--gris); }

.expo { display: flex; flex-direction: column; gap: 10px; padding: 26px; }
.expo__nom { font-size: 20px; font-weight: 700; color: var(--encre); line-height: 1.25; }
.expo__lieu { font-size: 14px; color: var(--gris); }
.expo__texte { font-size: 15px; line-height: 1.6; color: var(--texte-doux); }
.expo__stand { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--turquoise-fonce); margin-top: auto; }
.expo[hidden] { display: none; }

/* ------------------------------------------------------------ 16. Galerie */
.galerie { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; grid-auto-flow: row dense; gap: 14px; }
/* chaque case porte le format des photos : la rangée s'y ajuste d'elle-même,
   quel que soit le nombre de colonnes */
.galerie button { aspect-ratio: 3 / 2; }
.galerie button { padding: 0; overflow: hidden; border-radius: var(--r-m); cursor: zoom-in; display: block; }
.galerie img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--lent) var(--sortie); }
.galerie button:hover img { transform: scale(1.05); }
.gal--haute { grid-row: span 2; aspect-ratio: auto; }
.gal--large { grid-column: span 2; aspect-ratio: auto; }
/* grande vignette : deux colonnes et deux rangées — le rapport obtenu reste
   celui des photos puisque la rangée vaut la hauteur d'une case simple */
.gal--grande { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }

.visionneuse { position: fixed; inset: 0; z-index: 90; background: rgba(29, 24, 25, 0.92); display: none; align-items: center; justify-content: center; padding: 48px; cursor: zoom-out; }
.visionneuse.ouverte { display: flex; }
.visionneuse figure { margin: 0; display: flex; flex-direction: column; gap: 14px; align-items: center; max-width: 1100px; }
.visionneuse img { max-width: 100%; max-height: 74vh; border-radius: var(--r-m); box-shadow: 0 32px 72px rgba(0, 0, 0, 0.5); }
.visionneuse figcaption { font-size: 15px; color: rgba(255, 255, 255, 0.86); text-align: center; }
.visionneuse .aide { font-size: 13px; color: rgba(255, 255, 255, 0.5); }
/* barre d'outils de la visionneuse : pivoter et fermer */
.visionneuse__outils {
  position: fixed; top: 12px; right: 12px; z-index: 2; display: flex; gap: 8px; cursor: auto;
}
.visionneuse__bouton {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, 0.35); border-radius: var(--r-pill);
  background: rgba(29, 24, 25, 0.68); color: #fff;
  font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background var(--moyen) ease, border-color var(--moyen) ease, transform var(--vite) var(--sortie);
}
.visionneuse__bouton:hover, .visionneuse__bouton:focus-visible {
  background: var(--creme); border-color: var(--creme); color: var(--rose-fonce); transform: translateY(-1px);
}
.visionneuse__bouton:active { background: #fff; border-color: #fff; color: var(--rose-fonce); transform: scale(0.97); }
.visionneuse__bouton svg { width: 18px; height: 18px; }

/* --- Sur mobile, les plans s'ouvrent en plein écran, pivotés si besoin --- */
@media (max-width: 860px) {
  .visionneuse { padding: 0; }
  .visionneuse figure {
    position: relative; width: 100%; height: 100%; height: 100dvh; max-width: none; gap: 0;
    justify-content: center;
  }
  .visionneuse img {
    width: 100%; height: 100%; max-width: none; max-height: none;
    object-fit: contain; border-radius: 0; box-shadow: none;
  }
  /* le plan pivote d'un quart de tour : il occupe alors toute la hauteur de l'écran */
  .visionneuse--tourne img {
    position: absolute; left: 50%; top: 50%;
    width: 100dvh; height: 100dvw;
    transform: translate(-50%, -50%) rotate(90deg);
  }
  .visionneuse figcaption {
    position: absolute; left: 0; right: 0; bottom: 0; margin: 0; z-index: 1;
    padding: 46px 16px 16px; font-size: 13.5px; text-align: left; pointer-events: none;
    background: linear-gradient(0deg, rgba(20, 16, 17, 0.92), rgba(20, 16, 17, 0));
  }
  .visionneuse .aide { display: none; }
}

/* ---------------------------------------------------------- 17. Actualités */
.actus__ligne { display: flex; gap: 20px; padding: 18px 0; border-top: 1px solid var(--sable-bord); }
.actus__ligne:last-child { border-bottom: 1px solid var(--sable-bord); }
.actus__date { font-family: var(--mono); font-size: 12px; color: var(--gris); min-width: 96px; }
.actus__titre { font-size: 18px; font-weight: 700; color: var(--encre); }
.actus__texte { font-size: 14px; color: var(--gris); margin-top: 4px; }

.faq details { border-bottom: 1px solid var(--sable-bord); }
.faq details:last-child { border-bottom: 0; }
.faq summary { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 14px 0; font-size: 15px; font-weight: 600; color: var(--encre); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--rose-fonce); font-weight: 700; font-size: 20px; line-height: 1; }
.faq details[open] summary::after { content: '−'; }
.faq p { font-size: 15px; line-height: 1.65; color: var(--texte-doux); padding: 0 0 16px; }

/* ------------------------------------------------------------ 18. Défilant */
.defilant { position: relative; overflow: hidden; }
.defilant__piste { display: flex; gap: 14px; width: max-content; animation: defile 52s linear infinite; will-change: transform; }
.defilant--inverse .defilant__piste { animation-duration: 64s; animation-direction: reverse; }
.defilant:hover .defilant__piste { animation-play-state: paused; }
.defilant__item {
  flex: 0 0 auto; min-width: 210px; height: 104px; padding: 5px 9px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--blanc); border: 1px solid var(--sable-bord); border-radius: var(--r-s);
  font-size: 12px; font-weight: 600; color: var(--texte-doux); line-height: 1.35;
}
.defilant__item img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.defilant__item--petit { min-width: 178px; height: 88px; padding: 4px 8px; }
.defilant__item--sombre { background: var(--encre); border-color: var(--encre); }
.defilant__voile { position: absolute; top: 0; bottom: 0; width: 90px; pointer-events: none; }
.defilant__voile--g { left: 0; background: linear-gradient(to right, var(--sable), rgba(248, 242, 232, 0)); }
.defilant__voile--d { right: 0; background: linear-gradient(to left, var(--sable), rgba(248, 242, 232, 0)); }
@keyframes defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ------------------------------------------------------- 19. Formulaires */
.formulaire { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.champ { display: flex; flex-direction: column; gap: 8px; }
.champ--large { grid-column: 1 / -1; }
.champ > span { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--encre); }
.champ input, .champ select, .champ textarea {
  min-height: 48px; padding: 12px 16px; background: var(--creme);
  border: 2px solid var(--sable-fonce); border-radius: var(--r-s);
  font-family: var(--texte-police); font-size: 15px; color: var(--encre);
  transition: border-color var(--vite) ease, box-shadow var(--vite) ease;
}
.champ textarea { min-height: 120px; line-height: 1.5; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none; border-color: var(--rose); box-shadow: 0 0 0 4px rgba(232, 64, 144, 0.14);
}
.champ input::placeholder, .champ textarea::placeholder { color: var(--gris); }
.case { display: flex; gap: 12px; align-items: flex-start; grid-column: 1 / -1; cursor: pointer; }
.case input { width: 22px; height: 22px; min-height: 0; margin-top: 1px; accent-color: var(--rose); flex: 0 0 auto; padding: 0; }
.case span { font-size: 14px; line-height: 1.5; color: var(--texte); font-weight: 400; letter-spacing: 0; text-transform: none; }
.confirmation { display: none; margin-top: 18px; padding: 16px 20px; background: var(--turquoise-pale); border: 1px solid var(--turquoise-bord); border-radius: var(--r-s); font-size: 15px; color: var(--turquoise-nuit); }
.confirmation.visible { display: block; }

.infolettre { display: flex; gap: 10px; background: var(--blanc); border-radius: var(--r-pill); padding: 6px; align-items: center; }
.infolettre input { flex: 1; min-width: 0; min-height: 42px; padding: 0 16px; border: 0; background: transparent; font-family: var(--texte-police); font-size: 14px; color: var(--encre); }
.infolettre input:focus { outline: none; }
.infolettre button { display: inline-flex; align-items: center; min-height: 42px; padding: 0 20px; border-radius: var(--r-pill); background: var(--encre); color: #fff; font-size: 13px; font-weight: 700; }
.infolettre button:hover { background: var(--rose-fonce); }

/* ------------------------------------------------------------- 20. Divers */
.plan-cible { margin-top: 18px; height: 170px; border-radius: var(--r-m); background: repeating-linear-gradient(135deg, var(--sable-bord) 0 8px, var(--sable) 8px 16px); display: flex; align-items: center; justify-content: center; }
.duo { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--sable); font-size: 15px; }
.duo:last-child { border-bottom: 0; padding-bottom: 0; }
.duo b { font-weight: 700; color: var(--encre); }
.duo span { color: var(--gris); white-space: nowrap; }
.puces-rose li { display: flex; gap: 12px; align-items: baseline; font-size: 15px; color: var(--texte); }
.puces-rose li::before { content: '·'; color: var(--rose); font-weight: 700; }
.prix { font-family: var(--titre); font-size: clamp(28px, 3.4vw, 34px); color: var(--rose); }
.prix--geant { font-size: clamp(38px, 5vw, 56px); color: #fff; line-height: 1; }
.menu-soiree { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; padding: 16px 18px; background: var(--sable); border-radius: var(--r-s); font-size: 14px; color: var(--texte); }

/* ------------------------------------------------- 20 bis. Soutien européen */
.soutien {
  display: grid; grid-template-columns: auto 1fr auto; gap: 26px; align-items: center;
  padding: 20px 24px; border-radius: var(--r-m);
  background: transparent; border: 1px solid var(--sable-fonce);
}
.soutien__drapeau { flex: 0 0 auto; width: 84px; display: flex; align-items: center; justify-content: center; }
.soutien__drapeau img { max-width: 100%; height: auto; display: block; }
.soutien__chiffres { display: flex; gap: 24px; margin: 0; padding-left: 24px; border-left: 1px solid var(--sable-fonce); }
.soutien__chiffres dt { font-size: 15px; font-weight: 700; color: var(--texte); white-space: nowrap; }
.soutien__chiffres dd { margin: 2px 0 0; font-size: 12px; color: var(--gris); }

/* -------------------------------------------------------- 21. Pied de page */
.pied { background: var(--encre); color: rgba(255, 255, 255, 0.82); }

.pied__rdv {
  /* exactement le dégradé du héros de l'accueil */
  background: linear-gradient(168deg, #e287b2 0%, #d2629a 45%, #be4886 100%);
  overflow: hidden; position: relative;
}
.pied__rdv > .rond { z-index: 0; }
.pied__rdv .page {
  position: relative; z-index: 1;
}
.pied__rdv .page { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; padding-top: 26px; padding-bottom: 26px; }
.pied__vache {
  flex: 0 0 auto; width: 108px; height: 108px; border-radius: 50%; background: var(--creme);
  display: flex; align-items: center; justify-content: center; position: relative;
  box-shadow: 0 14px 32px rgba(29, 24, 25, 0.24);
}
.pied__vache::after { content: ''; position: absolute; inset: 7px; border-radius: 50%; border: 2px dashed var(--turquoise-bord); }
.pied__vache img { width: 74%; height: auto; transform: rotate(-4deg); }
.pied__rdv-texte { min-width: 0; }
.pied__rdv-quand { font-family: var(--titre); font-size: clamp(22px, 2.8vw, 32px); line-height: 1.14; color: #fff; }
.pied__rdv-ou { font-family: var(--accent); font-style: italic; font-weight: 700; font-size: clamp(24px, 3vw, 34px); line-height: 1.1; color: var(--encre); margin-top: 6px; }
.pied__rdv-actions { margin-left: auto; display: flex; gap: 12px; flex-wrap: wrap; }

.pied__grille { display: grid; grid-template-columns: 1.2fr 0.9fr 0.9fr 1fr; gap: 40px; padding: 52px 0 40px; }
.pied__logo { background: var(--creme); border-radius: var(--r-m); padding: 14px; width: 240px; max-width: 100%; }
.pied__logo img { width: 100%; display: block; }
.pied__adresse { font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, 0.78); margin-top: 18px; }
.pied__comite { font-size: 14px; line-height: 1.7; color: rgba(255, 255, 255, 0.55); margin-top: 10px; }
.pied__titre { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--turquoise-clair); padding-bottom: 12px; border-bottom: 2px dotted rgba(85, 201, 188, 0.42); }
.pied__liens { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.pied__liens a { font-size: 15px; color: rgba(255, 255, 255, 0.86); text-decoration: none; transition: color var(--vite) ease, transform var(--vite) ease; }
.pied__liens a:hover { color: var(--turquoise-clair); transform: translateX(3px); }
.pied__oto { font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.58); }
.pied__gratuit {
  display: inline-flex; align-items: center; margin-top: 18px; padding: 8px 18px;
  border-radius: var(--r-pill); background: var(--turquoise); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.pied__tel { font-family: var(--titre); font-size: 26px; color: #fff; text-decoration: none; }
.pied__tel:hover { color: var(--turquoise-clair); }
.reseaux { display: flex; gap: 12px; margin-top: 16px; }
.reseaux a { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.28); display: flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; font-size: 13px; font-weight: 700; transition: background var(--vite) ease, border-color var(--vite) ease; }
.reseaux a:hover { background: var(--rose); border-color: var(--rose); color: #fff; }
.barre-haute__reseaux { display: inline-flex; gap: 7px; margin-left: 4px; }
.barre-haute__reseau {
  position: relative; overflow: hidden; width: 27px; height: 27px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.26); color: #fff; text-decoration: none;
  transition: transform var(--moyen) var(--sortie), border-color var(--moyen) ease;
}
.barre-haute__reseau svg { position: relative; z-index: 1; }
.barre-haute__reseau::before { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity var(--moyen) ease; }
.barre-haute__reseau--fb::before { background: #1877f2; }
.barre-haute__reseau--ig::before { background: radial-gradient(circle at 28% 100%, #fdd35c 0%, #fb8027 24%, #e0316d 52%, #c32aa3 72%, #6f35c9 100%); }
.barre-haute__reseau:hover, .barre-haute__reseau:focus-visible { transform: translateY(-1px) scale(1.06); border-color: rgba(255, 255, 255, 0.55); }
.barre-haute__reseau:hover::before, .barre-haute__reseau:focus-visible::before { opacity: 1; }

.reseaux__lien { position: relative; overflow: hidden; }
.reseaux__lien svg { position: relative; z-index: 1; transition: transform var(--moyen) var(--sortie); }
.reseaux__lien::before {
  content: ""; position: absolute; inset: 0; opacity: 0;
  transition: opacity var(--moyen) ease;
}
.reseaux__lien--fb::before { background: #1877f2; }
.reseaux__lien--ig::before {
  background: radial-gradient(circle at 28% 100%, #fdd35c 0%, #fb8027 24%, #e0316d 52%, #c32aa3 72%, #6f35c9 100%);
}
.reseaux__lien:hover, .reseaux__lien:focus-visible {
  background: transparent; border-color: rgba(255, 255, 255, 0.55);
  transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}
.reseaux__lien:hover::before, .reseaux__lien:focus-visible::before { opacity: 1; }
.reseaux__lien:hover svg { transform: scale(1.08); }
.pied__bas {
  display: flex; align-items: center; justify-content: center; gap: 30px; flex-wrap: nowrap;
  width: 100%; padding: 20px var(--gout) 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 13px; color: rgba(255, 255, 255, 0.55);
}
.pied__bas-copy, .pied__bas-legal { flex: 0 1 auto; text-align: center; }
.pied__signature {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 20px; border-radius: var(--r-pill);
  border: 1px solid rgba(212, 175, 55, 0.55); background: rgba(212, 175, 55, 0.08);
  color: var(--or); font-size: 13px; white-space: nowrap; text-decoration: none;
  transition: background var(--vite) ease, border-color var(--vite) ease, color var(--vite) ease, transform var(--moyen) var(--sortie);
}
.pied__signature:hover { background: var(--or); border-color: var(--or); color: var(--encre); transform: translateY(-2px); }
.pied__chevrons { font-family: var(--mono); font-size: 14px; font-weight: 700; letter-spacing: -0.04em; }
.pied__signature strong { font-weight: 700; }
.pied__bas a { color: rgba(255, 255, 255, 0.55); text-decoration: none; }
.pied__bas a:hover { color: #fff; }

/* ------------------------------------ 20 quater. Barre d'ancres et ruban */
.ancres--accueil { transition: box-shadow var(--moyen) ease; }
.ancres--accueil.collee { box-shadow: 0 10px 30px rgba(16, 15, 24, 0.10); }
.ancres {
  position: sticky; top: 118px; z-index: 30;
  background: rgba(253, 250, 245, 0.985);
  border-bottom: 1px solid var(--sable-bord);
}
.ancres__jauge { display: none; }
.ancres__jauge--off {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--rose), var(--turquoise));
  transition: width 120ms linear;
}
.ancres__piste {
  display: flex; gap: 8px; padding: 12px 0;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; touch-action: pan-x;
  overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-left: 4px;
}
.ancres__piste > a { scroll-snap-align: start; }
.ancres__piste.glisse { cursor: grabbing; scroll-snap-type: none; }
.ancres__piste::-webkit-scrollbar { display: none; }
.ancres__piste a {
  flex: 0 0 auto; padding: 8px 16px; border-radius: var(--r-pill);
  border: 1px solid var(--sable-bord); background: var(--blanc);
  font-size: 13.5px; font-weight: 600; color: var(--texte-doux); text-decoration: none; white-space: nowrap;
  transition: background var(--vite) ease, color var(--vite) ease, border-color var(--vite) ease, transform var(--vite) var(--sortie);
}
.ancres__piste a:hover { transform: translateY(-2px); border-color: var(--turquoise-bord); color: var(--turquoise-encre); }
.ancres__piste a[aria-current="true"] { background: var(--rose); border-color: var(--rose); color: #fff; }
.bloc[id], .ruban { scroll-margin-top: 180px; }

.ruban { background: var(--rose); padding: 16px 0; }
.ruban__piste { align-items: center; gap: 0; }
.ruban__mot {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-family: var(--titre); font-size: clamp(22px, 2.4vw, 30px); line-height: 1;
  color: var(--creme); padding: 0 26px;
}
.ruban .ruban__mot::after {
  content: ''; width: 9px; height: 9px; border-radius: 50%;
  background: var(--turquoise); margin-left: 26px;
}
@media (max-width: 1024px) { .ancres { top: 84px; } }
@media (max-width: 1024px) {
  /* voile de débordement : on voit qu'il reste des sections à droite */
  .ancres { position: sticky; }
  .ancres .page { position: relative; }
  .ancres .page::after {
    content: ""; position: absolute; top: 0; right: 0; width: 34px; height: 100%;
    pointer-events: none; opacity: 0; transition: opacity var(--moyen) ease;
    background: linear-gradient(90deg, rgba(253, 250, 245, 0), rgba(253, 250, 245, 0.97));
  }
  .ancres .page[data-deborde="1"]::after { opacity: 1; }
  .page-compacte .ancres .page::after { background: linear-gradient(90deg, rgba(230, 245, 240, 0), rgba(230, 245, 240, 0.97)); }
}
@media (max-width: 720px) {
  .ancres { top: 76px; }
  .ancres__piste { padding: 10px 0; }
  .ancres__piste a { padding: 9px 15px; }
}
@media print { .ancres, .ruban { display: none; } }

/* ------------------------------------------------------ 20 bis. Plans */
.jetons { display: flex; flex-wrap: wrap; gap: 7px; }
.jeton {
  display: inline-flex; align-items: center; padding: 5px 11px; border-radius: var(--r-pill);
  background: var(--sable); border: 1px solid var(--sable-bord);
  font-size: 12.5px; font-weight: 600; color: var(--texte-doux);
  transition: background var(--vite) ease, color var(--vite) ease, border-color var(--vite) ease;
}
.jeton:hover { background: var(--turquoise-pale); border-color: var(--turquoise-bord); color: var(--turquoise-encre); }
.plan-vue {
  display: block; width: 100%; position: relative; overflow: hidden;
  padding: 0; border: 0; background: var(--blanc); cursor: zoom-in; line-height: 0;
}
.plan-vue img { width: 100%; height: auto; display: block; transition: transform var(--moyen) var(--sortie); }
.plan-vue:hover img { transform: scale(1.03); }
/* schéma animé du retrait des cartons : jamais agrandi, ni au survol ni au clic (les repères sont calés dessus) */
.plan-vue--fixe { cursor: default; }
.plan-vue--fixe:hover img { transform: none; }
.plan-vue__loupe {
  position: absolute; right: 14px; bottom: 14px; padding: 7px 15px; border-radius: var(--r-pill);
  background: var(--encre); color: #fff; font-size: 12px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.4;
  opacity: 0; transform: translateY(6px); transition: opacity var(--vite) ease, transform var(--vite) var(--sortie);
}
.plan-vue:hover .plan-vue__loupe, .plan-vue:focus-visible .plan-vue__loupe { opacity: 1; transform: none; }
.plan-vue--large { height: 100%; }
.plan-vue--large img { height: 100%; object-fit: cover; }
@media (max-width: 860px) { .plan-vue--large img { height: auto; } }
/* les deux plans de navette occupent la même boîte, quel que soit leur format */
.plans-navette { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; margin-top: 36px; align-items: start; }
.plans-navette > .carte { display: flex; flex-direction: column; }
.plans-navette .plan-vue { aspect-ratio: 4 / 3; background: #fff; }
.plans-navette .plan-vue img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* le plan officiel, très large, garde son format d'origine sans écraser la page */
.plan-officiel .plan-vue--paysage { aspect-ratio: 16 / 9; background: #fff; }
.plan-officiel .plan-vue--paysage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 900px) {
  .plans-navette { grid-template-columns: 1fr; }
  .plan-officiel .plan-vue--paysage { aspect-ratio: 4 / 3; }
}

/* ------------------------------------------- 19 bis 0. Filtres de filières */
.filieres {
  position: relative; display: flex; flex-wrap: wrap; gap: 6px; padding: 6px;
  background: var(--sable); border: 1px solid var(--sable-bord); border-radius: 22px;
}
.filieres__curseur {
  position: absolute; top: 0; left: 0; width: 0; height: 0; border-radius: var(--r-pill);
  background: var(--rose); box-shadow: var(--ombre-rose); pointer-events: none;
  transition: transform 420ms var(--sortie), width 420ms var(--sortie), height 420ms var(--sortie), opacity var(--vite) ease;
}
.filieres button {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: var(--r-pill);
  font-size: 14px; font-weight: 600; color: var(--texte-doux); background: transparent;
  transition: color var(--moyen) ease, transform var(--vite) var(--sortie);
}
.filieres button:hover { color: var(--encre); transform: translateY(-1px); }
.filieres button.actif { color: #fff; }
.filieres button i {
  font-style: normal; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--blanc); border: 1px solid var(--sable-bord);
  font-family: var(--mono); font-size: 11px; color: var(--gris);
  transition: background var(--moyen) ease, color var(--moyen) ease, border-color var(--moyen) ease;
}
.filieres button.actif i { background: rgba(255, 255, 255, 0.22); border-color: transparent; color: #fff; }
.filieres button:disabled { opacity: 0.45; cursor: not-allowed; }
.filieres button:disabled:hover { transform: none; color: var(--texte-doux); }

.entretien { animation: entretienEntre 520ms var(--sortie) both; animation-delay: var(--d, 0ms); }
@keyframes entretienEntre {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .filieres__curseur { transition: none; }
  .entretien { animation: none; }
}

/* -------------------------------------------------- 19 bis. Les entretiens */
.entretiens {
  display: grid; gap: 20px; margin-top: 34px; align-items: stretch;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.entretiens__vide {
  grid-column: 1 / -1; justify-self: center;
  padding: 44px 34px; border-radius: var(--r-l); text-align: center;
  background: var(--sable); border: 2px dashed var(--sable-fonce);
  font-size: 16.5px; line-height: 1.7; color: var(--texte-doux);
  max-width: 62ch; margin: 0 auto;
}
.entretien {
  display: flex; flex-direction: column;
  background: var(--blanc); border: 1px solid var(--sable-bord);
  border-radius: var(--r-l); overflow: hidden;
  transition: transform var(--moyen) var(--sortie), box-shadow var(--moyen) ease, border-color var(--vite) ease;
}
.entretien:hover { transform: translateY(-4px); box-shadow: var(--ombre-m); border-color: var(--rose-bord); }
.entretien__photo { position: relative; aspect-ratio: 4 / 3; background: var(--sable); overflow: hidden; }
.entretien__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 800ms var(--sortie); }
.entretien__photo--portrait { aspect-ratio: 4 / 3; }
.entretien__photo--attente {
  background: var(--sable); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  border-bottom: 1px solid var(--sable-bord);
}
.entretien__photo--attente img { position: static; width: 64px; height: auto; object-fit: contain; opacity: 0.45; transform: rotate(-4deg); }
.entretien:hover .entretien__photo--attente img { transform: rotate(-4deg); }
.entretien__photo--attente span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gris); }
.entretien__photo--entiere { background: var(--creme); border-bottom: 1px solid var(--sable-bord); }
.entretien__photo--entiere img { object-fit: contain; }
.entretien:hover .entretien__photo--entiere img { transform: none; }
.entretien:hover .entretien__photo img { transform: scale(1.05); }
.entretien__corps { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1 1 auto; }
.entretien__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; row-gap: 6px; min-height: 28px; }
.entretien__meta .etiq { flex: 0 0 auto; }
.entretien__date {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--gris); white-space: nowrap;
}
.entretien__nom {
  font-size: 21px; font-weight: 800; line-height: 1.2; color: var(--encre); margin-top: 13px; text-wrap: balance;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(21px * 1.2 * 2);
}
.entretien__lieu {
  font-size: 13.5px; line-height: 1.45; color: var(--gris); margin-top: 5px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(13.5px * 1.45 * 2);
}
.entretien__cite {
  margin-top: 15px; padding-left: 16px; border-left: 3px solid var(--rose);
  font-family: var(--accent); font-style: italic; font-weight: 700;
  font-size: 16.5px; line-height: 1.4; color: var(--rose-fonce); text-wrap: pretty;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(16.5px * 1.4 * 3);
}
.btn--video { display: inline-flex; align-items: center; gap: 8px; }
.btn--video::before {
  content: ''; width: 0; height: 0; flex: 0 0 auto;
  border-left: 9px solid currentColor; border-top: 5.5px solid transparent; border-bottom: 5.5px solid transparent;
}
.entretien__resume {
  font-size: 14.5px; line-height: 1.7; color: var(--texte-doux); margin-top: 15px; text-wrap: pretty;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(14.5px * 1.7 * 4);
}
.entretien__texte { margin-top: 15px; }
.entretien__texte p { font-size: 14.5px; line-height: 1.7; color: var(--texte-doux); text-wrap: pretty; }
.entretien__texte p + p { margin-top: 11px; }
.entretien__texte b { color: var(--encre); }
.entretien__pied {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: auto; padding-top: 18px; border-top: 1px solid var(--sable);
}
.entretien--masque { display: none; }
.entretien--lien { text-decoration: none; color: inherit; }
.entretien--lien .entretien__pied { border-top-color: var(--sable); }
.entretien--lien:hover .lien-fleche { color: var(--rose); }
@media (max-width: 1080px) { .entretiens { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .entretiens { grid-template-columns: 1fr; gap: 22px; }
  .entretien__corps { padding: 22px 22px 24px; }
}

/* ----------------------------------------- 19 ter. Lecture d'un entretien */
.lecture { position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center; padding: 28px 20px; }
.lecture[hidden] { display: none !important; }
.lecture__fond { position: absolute; inset: 0; background: rgba(29, 24, 25, 0.72); backdrop-filter: blur(3px); }
.lecture__feuille {
  position: relative; z-index: 1; width: min(940px, 100%); max-height: 92vh; overflow-y: auto;
  background: var(--creme); border-radius: var(--r-xl); box-shadow: var(--ombre-l);
}
.lecture__fermer {
  position: absolute; right: 14px; top: 14px; z-index: 3;
  width: 42px; height: 42px; border-radius: 50%; background: var(--encre); color: #fff;
  font-size: 26px; line-height: 1; transition: background var(--vite) ease;
}
.lecture__fermer:hover { background: var(--rose); }
.lecture__image { aspect-ratio: 16 / 9; background: var(--sable); overflow: hidden; }
.lecture__image--entiere { aspect-ratio: 3 / 2; background: var(--creme); border-bottom: 1px solid var(--sable-bord); }
.lecture__image.lecture__image--entiere img { object-fit: contain; }
.lecture__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lecture__corps { padding: 34px 40px 40px; }
.lecture__titre { font-size: clamp(26px, 3vw, 34px); font-weight: 800; line-height: 1.15; color: var(--encre); margin-top: 14px; text-wrap: balance; }
.lecture__corps .entretien__cite { font-size: clamp(18px, 1.9vw, 21px); display: block; -webkit-line-clamp: none; min-height: 0; }
.lecture__corps .entretien__lieu { display: block; -webkit-line-clamp: none; min-height: 0; }
.lecture__corps .entretien__meta { min-height: 0; }
.lecture__corps .entretien__date { font-size: 11.5px; }
.lecture__corps .entretien__texte p { font-size: 16px; }
.lecture__video { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--sable-bord); }
.lecture__video-cadre {
  position: relative; width: 100%; margin: 16px auto 0;
  border-radius: var(--r-l); overflow: hidden;
  background: var(--encre); box-shadow: var(--ombre-l);
}
.lecture__video-cadre--vertical { aspect-ratio: 9 / 16; max-width: 480px; }
.lecture__video-cadre--horizontal { aspect-ratio: 16 / 9; max-width: 100%; }
.lecture__video-cadre iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 700px) {
  .lecture { padding: 0; }
  .lecture__feuille { max-height: 100vh; border-radius: 0; width: 100%; }
  .lecture__corps { padding: 26px 22px 34px; }
}
@media print { .lecture { display: none !important; } }

/* --------------------------------------------- 20 bis 1. Plan interactif */
.plan-outils {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-top: 30px;
}
.plan-outils__etat {
  display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px;
  border-radius: var(--r-pill); background: var(--turquoise-pale);
  border: 1px solid var(--turquoise-bord);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--turquoise-encre);
}
.plan-outils__etat::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--turquoise);
}
.plan-outils__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.plan-cadre {
  margin-top: 16px; border-radius: var(--r-l); overflow: hidden;
  border: 1px solid var(--sable-bord); background: var(--blanc); box-shadow: var(--ombre-m);
}
.plan-cadre iframe { display: block; width: 100%; height: min(860px, 88vh); border: 0; }
@media (max-width: 860px) {
  .plan-cadre iframe { height: min(720px, 82vh); }
  .plan-outils { justify-content: flex-start; }
}
@media print { .plan-cadre, .plan-outils { display: none; } }

.plan-couche { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; background: var(--encre); }
.plan-couche[hidden] { display: none !important; }
.plan-couche__barre {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 18px; background: var(--encre); border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.plan-couche__titre {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.78);
}
.plan-couche__fermer {
  padding: 9px 18px; border-radius: var(--r-pill); background: var(--rose); color: #fff;
  font-size: 13px; font-weight: 700; transition: background var(--vite) ease;
}
.plan-couche__fermer:hover { background: var(--rose-fonce); }
.plan-couche iframe { flex: 1 1 auto; width: 100%; border: 0; background: var(--blanc); }

/* ------------------------------------- 20 bis 2. Fiche retrait des cartons */
.fiche { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); grid-template-rows: max-content 1fr; gap: 10px 26px; align-items: start; }
.fiche__legende { grid-column: 1; }
.fiche__sous .fiche__legende { grid-column: auto; margin: 0; }
.fiche__etapes { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; grid-template-rows: 1fr 1fr; }
@media (max-width: 900px) { .fiche__etapes { grid-column: 1; grid-row: auto; } }
.fiche__plan {
  position: relative; border-radius: var(--r-l); overflow: hidden;
  border: 1px solid var(--sable-bord); background: var(--sable);
}
.fiche__plan .plan-vue { border-radius: 0; }
.fiche__svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; font-family: var(--texte-police); }
.fiche__jeton {
  position: absolute; transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%; border: 4px solid #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--titre); font-size: 24px; color: #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3); pointer-events: none;
}
.fiche__jeton--rose { left: 54.7%; top: 85%; background: var(--rose); }
.fiche__jeton--turquoise { left: 50.7%; top: 26.7%; background: var(--turquoise); }
.fiche__legende { position: static; margin: 10px 0 0; padding: 0; background: transparent; box-shadow: none; border: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 12.5px; color: var(--texte-doux); }
.fiche__legende i {
  flex: 0 0 auto; width: 38px; height: 7px; border-radius: 4px;
  background: repeating-linear-gradient(90deg, var(--rose) 0 9px, transparent 9px 14px);
}
.fiche__etapes { display: grid; grid-template-columns: 1fr; gap: 16px; }
.fiche__etape { display: flex; gap: 18px; padding: 26px 28px; border-radius: var(--r-l); }
.fiche__etape--rose { background: var(--rose-pale); }
.fiche__etape--turquoise { background: var(--turquoise-pale); }
.fiche__num {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--titre); font-size: 22px; color: #fff;
}
.fiche__etape--rose .fiche__num { background: var(--rose); }
.fiche__etape--turquoise .fiche__num { background: var(--turquoise); }
.fiche__phrase { font-size: 19px; line-height: 1.35; font-weight: 600; color: var(--encre); margin-top: 8px; text-wrap: pretty; }
.fiche__detail { font-size: 14.5px; line-height: 1.65; color: var(--texte-doux); margin-top: 10px; text-wrap: pretty; }
@media (max-width: 860px) {
  .fiche__etapes { grid-template-columns: 1fr; }
  .fiche__jeton { width: 34px; height: 34px; border-width: 3px; font-size: 18px; }
  .fiche__legende { font-size: 12px; padding: 7px 11px; left: 10px; bottom: 10px; }
  .fiche__legende i { width: 26px; height: 5px; }
  .fiche__phrase { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .fiche__svg animate, .fiche__svg animateMotion { display: none; } }

/* ------------------------------------------------------ 20 ter. Vidéo */
.video-scene { position: relative; }
.video-scene .rond { z-index: 0; }
.video-scene .grille { position: relative; z-index: 1; }
.video-cadre {
  background: var(--creme); border-radius: var(--r-xl); padding: 12px;
  box-shadow: var(--ombre-l); position: relative;
}
.video-cadre::before {
  content: ''; position: absolute; inset: -14px; border-radius: calc(var(--r-xl) + 12px);
  border: 2px dashed var(--rose-bord); pointer-events: none;
}
.video-ratio { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-m); overflow: hidden; background: var(--encre); }
.video-ratio iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.titre-orne { position: relative; }
.titre-orne > .rond { position: absolute; z-index: -1; pointer-events: none; }
/* le décalage suit la gouttière et la respiration grandit vers la droite :
   l'ornement ne peut plus toucher le bord de sa section, à aucune largeur */
.titre-orne .rond--grand {
  width: 54px; height: 54px; top: -22px;
  left: calc(var(--gout) * -0.34); transform-origin: 85% 50%;
}
.titre-orne .rond--petit { width: 16px; height: 16px; top: -30px; left: 34px; }
@media (max-width: 720px) { .titre-orne .rond--grand { left: -2px; } }

.js-anime [data-revele] { opacity: 0; transform: translateY(30px) scale(0.97); transition: opacity 700ms ease, transform 700ms var(--sortie); }
.js-anime .revele--visible { opacity: 1; transform: none; }

/* ------------------------------------------------- 21 bis. Marguerite (chat) */
.vache { position: fixed; right: 22px; bottom: 22px; z-index: 80; font-family: var(--texte-police); }
.vache__bouton {
  position: relative; width: 76px; height: 76px; border-radius: 50%;
  background: var(--creme); border: 3px solid var(--rose);
  box-shadow: 0 10px 26px rgba(29, 24, 25, 0.22);
  display: flex; align-items: center; justify-content: center;
  animation: vachePulse 2.6s var(--sortie) infinite;
  transition: transform var(--moyen) var(--sortie), border-color var(--vite) ease;
}
.vache__bouton::before {
  content: ''; position: absolute; inset: 4px; border-radius: 50%;
  border: 1.5px dashed var(--turquoise-bord); pointer-events: none;
}
.vache__bouton:hover { transform: translateY(-3px) scale(1.05); border-color: var(--rose-fonce); }
.vache__bouton img { width: 72%; height: auto; transform: rotate(-4deg); pointer-events: none; }
.vache--ouverte .vache__bouton { animation: none; }
@keyframes vachePulse {
  0% { box-shadow: 0 10px 26px rgba(29, 24, 25, 0.22), 0 0 0 0 rgba(232, 64, 144, 0.42); }
  65% { box-shadow: 0 10px 26px rgba(29, 24, 25, 0.22), 0 0 0 18px rgba(232, 64, 144, 0); }
  100% { box-shadow: 0 10px 26px rgba(29, 24, 25, 0.22), 0 0 0 0 rgba(232, 64, 144, 0); }
}
.vache__bulle {
  position: absolute; top: -14px; right: 62px; padding: 5px 12px; border-radius: 14px 14px 2px 14px;
  background: var(--creme); border: 1px solid var(--sable-bord); box-shadow: var(--ombre-s);
  font-family: var(--accent); font-style: italic; font-weight: 700; font-size: 15px; color: var(--rose-fonce);
  white-space: nowrap; pointer-events: none;
}
.vache--ouverte .vache__bulle { display: none; }
.vache__panneau {
  position: absolute; right: 0; bottom: 84px; width: min(390px, calc(100vw - 32px));
  max-height: calc(100vh - 130px); max-height: calc(100dvh - 130px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--creme); border: 1px solid var(--sable-bord); border-radius: var(--r-xl);
  box-shadow: var(--ombre-l);
}
.vache__panneau[hidden] { display: none !important; }
.vache__tete { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--rose); }
.vache__medaillon {
  width: 46px; height: 46px; border-radius: 50%; background: var(--creme); position: relative;
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.vache__medaillon::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; border: 1.5px dashed var(--turquoise-bord); }
.vache__medaillon img { width: 68%; transform: rotate(-4deg); }
.vache__qui { display: flex; flex-direction: column; min-width: 0; color: #fff; }
.vache__qui strong { font-family: var(--titre); font-weight: 400; font-size: 20px; line-height: 1.1; }
.vache__qui em { font-family: var(--accent); font-style: italic; font-weight: 700; font-size: 14px; opacity: 0.92; }
.vache__fermer { margin-left: auto; width: 40px; height: 40px; border-radius: 50%; color: #fff; font-size: 26px; line-height: 1; transition: background var(--vite) ease; }
.vache__fermer:hover { background: rgba(29, 24, 25, 0.22); }
.vache__fil { position: relative; height: 320px; flex: 1 1 auto; min-height: 140px; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--sable); }
.vache__msg { max-width: 85%; padding: 10px 14px; font-size: 14px; line-height: 1.55; border-radius: var(--r-m); }
.vache__msg--vache { align-self: flex-start; background: var(--blanc); border: 1px solid var(--sable-bord); color: var(--texte); border-bottom-left-radius: 4px; }
.vache__msg--moi { align-self: flex-end; background: var(--rose); color: #fff; border-bottom-right-radius: 4px; }
.vache__msg--attente { color: var(--gris); letter-spacing: 3px; }
.vache__chips { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 14px 4px; background: var(--creme); }
.vache__chip {
  padding: 7px 14px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 600;
  background: var(--blanc); border: 1px solid var(--sable-bord); color: var(--texte-doux);
  transition: background var(--vite) ease, color var(--vite) ease, border-color var(--vite) ease;
}
.vache__chip:hover { background: var(--turquoise); border-color: var(--turquoise); color: #fff; }
.vache__saisie { display: flex; gap: 8px; padding: 12px 14px 14px; background: var(--creme); }
.vache__saisie input {
  flex: 1; min-width: 0; min-height: 46px; padding: 0 16px;
  background: var(--blanc); border: 2px solid var(--sable-fonce); border-radius: var(--r-pill);
  font-family: var(--texte-police); font-size: 14px; color: var(--encre);
}
.vache__saisie input:focus { outline: none; border-color: var(--rose); box-shadow: 0 0 0 4px rgba(232, 64, 144, 0.14); }
.vache__saisie button {
  width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto;
  background: var(--turquoise); color: #fff; font-size: 17px;
  transition: background var(--vite) ease, transform var(--vite) ease;
}
.vache__saisie button:hover { background: var(--turquoise-fonce); transform: translateY(-2px); }
.vache__saisie--attente { opacity: 0.55; pointer-events: none; }
@media (max-width: 720px) {
  .vache { right: 14px; bottom: 14px; }
  .vache__panneau { bottom: 78px; }
  .vache__fil { height: min(300px, 44vh); }
  .vache__bulle { display: none; }
}
@media print { .vache { display: none !important; } }

/* -------------------------------------------------------- 22. Adaptations */
@media (max-width: 1180px) {
  .heros-accueil { grid-template-columns: 1fr; }
  .cadre-photo { max-width: 460px; }
  .agenda__ligne { grid-template-columns: 110px 1fr; }
  .agenda__etiq { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ------------------------------------------------------ Héros sur tablette
   Entre 761 et 1180 px le héros passe en une colonne : sans réglage propre,
   tout restait aligné à gauche, la vachette se retrouvait isolée et le bloc
   dépassait 1000 px de haut. On le recompose en affiche centrée. */
@media (min-width: 761px) and (max-width: 1180px) {
  .heros { padding-top: 46px; padding-bottom: 46px; }
  .heros-accueil { gap: 30px; justify-items: center; text-align: center; }
  .heros-accueil > div { width: 100%; max-width: 680px; }
  .heros__etiquettes { position: static; top: auto; justify-content: center; margin: 0 0 24px; }
  /* la vachette et les dates forment un ensemble centré, dates à droite */
  .medaillon-bloc { justify-content: center; gap: 26px; margin: 0 0 6px; text-align: left; }
  .medaillon-halo, .medaillon { width: 168px; height: 168px; }
  .medaillon-dates { flex: 0 1 auto; }
  .medaillon-dates .quand { font-size: 26px; }
  .medaillon-dates .ou { font-size: 50px; margin-top: 12px; }
  .heros__titre { text-align: center; font-size: 42px; margin-top: 18px; }
  .heros__chapeau, .heros__chapeau--defile { margin-left: auto; margin-right: auto; max-width: 58ch; }
  .heros__chapeau--defile .slogan { text-align: center; }
  .slogan-points { justify-content: center; }
  /* les tirages reviennent à une taille d'affiche, centrés sous le texte */
  .pile-bloc { width: 100%; display: flex; justify-content: center; }
  .pile-polas { max-width: 500px; margin: 0 auto; }
}

@media (max-width: 1200px) {
  .entete .page { gap: 18px; }
  .marque img { height: 64px; }
  .menu { gap: 10px; }
  .menu a { font-size: 13.5px; padding: 8px 1px; }
  .menu .btn { min-height: 42px; padding: 0 16px; font-size: 13px; }
}

@media (max-width: 1024px) {
  :root { --gout: 28px; }
  .entete .page { min-height: 96px; }
  .marque img { height: 68px; }
  .menu { display: none; }
  .burger { display: flex; }
  .g4, .g3, .g-1-1-1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-2-1, .g-1-2, .g-texte-prix, .g-video { grid-template-columns: 1fr; }
  .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pied__grille { grid-template-columns: 1fr 1fr; gap: 32px; }
  .pied__bas { flex-wrap: wrap; gap: 20px; }
  .soutien { grid-template-columns: auto 1fr; }
  .soutien__chiffres { grid-column: 1 / -1; padding-left: 0; border-left: 0; padding-top: 18px; border-top: 1px solid var(--sable-fonce); }
  .barre-haute .cache-tablette { display: none; }
}

@media (max-width: 720px) {
  :root { --gout: 20px; }
  /* sur smartphone, la barre haute (dates, gratuité, espace pro, téléphone) disparaît :
     l'information est reprise dans le tiroir de menu et dans les en-têtes de page */
  .barre-haute { display: none; }
  /* héros de l'accueil sur smartphone : médaillon intact et éléments centrés */
  .medaillon-halo { width: 176px; height: 176px; }
  .medaillon { width: 176px; height: 176px; }
  .medaillon-bloc { flex-direction: column; align-items: center; text-align: center; gap: 18px; flex-wrap: wrap; }
  .medaillon-dates { flex: 0 0 auto; }
  /* sur smartphone la date doit dominer le titre qui la suit */
  .medaillon-dates .quand { font-size: 25px; line-height: 1.18; }
  .medaillon-dates .ou { font-size: 44px; margin-top: 10px; }
  /* les étiquettes se placent à mi-hauteur entre le haut du héros et le médaillon :
     autant d'air au-dessus (padding du héros) qu'en dessous */
  .heros__etiquettes { position: static; top: auto; justify-content: center; margin: 0 0 40px; }
  .medaillon-bloc { margin-top: 0; }
  /* titre, accroches et points centrés */
  .heros__titre, .heros__chapeau, .heros__chapeau--defile .slogan { text-align: center; }
  .heros__chapeau, .heros__chapeau--defile { margin-left: auto; margin-right: auto; }
  .slogan-points { justify-content: center; }
  .g2, .g3, .g4, .g-1-1-1 { grid-template-columns: 1fr; }
  .g-texte-prix > div:last-child { text-align: left !important; }
  .chiffres { grid-template-columns: 1fr 1fr; gap: 20px; }
  .medaillon-bloc { gap: 20px; }
  .onglets { display: grid; grid-template-columns: 1fr 1fr; }
  .onglet { min-width: 0; padding: 14px 16px; }
  .agenda__ligne { grid-template-columns: 1fr; gap: 6px; padding: 18px 20px; }
  .agenda__pied { padding: 18px 20px; }
  .chrono__ligne { grid-template-columns: 1fr; gap: 8px; }
  .galerie { grid-template-columns: 1fr 1fr; }
  .formulaire { grid-template-columns: 1fr; }
  .actus__ligne { flex-direction: column; gap: 6px; }
  .liste-numerotee li { flex-wrap: wrap; }
  .liste-numerotee .quand { margin-left: 0; width: 100%; }
  .rebours .page { grid-template-columns: 1fr; gap: 18px; text-align: center; justify-items: center; }
  .rebours__titre { max-width: none; }
  .rebours__cases { width: 100%; }
  .rebours__cell { padding: 2px 4px; }
  .rebours__num { font-size: 30px; }
  .rebours__unite { font-size: 10px; letter-spacing: 0.08em; }
  .rebours .btn { width: 100%; }
  .pied__grille { grid-template-columns: 1fr; }
  .pied__bas { flex-direction: column; align-items: center; gap: 16px; text-align: center; }
  .pied__signature { white-space: normal; text-align: left; }
  .soutien { grid-template-columns: 1fr; gap: 18px; padding: 20px; }
  .soutien__chiffres { flex-direction: column; gap: 12px; }
  .pied__rdv .page { gap: 20px; }
  .pied__rdv-actions { margin-left: 0; width: 100%; }
  .pied__rdv-actions .btn { flex: 1; }
  .pied__vache { width: 84px; height: 84px; }
  .carte-lien .zoom, .carte__img--haute { height: 230px; }
  .entete-bloc { margin-bottom: 22px; }
  .duo { flex-direction: column; gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

@media print {
  .barre-haute, .entete, .tiroir, .rebours, .defilant, .visionneuse, .burger { display: none !important; }
  body { background: #fff; }
  .bloc, .heros { padding: 18px 0; }
  a { color: #000; text-decoration: none; }
}


/* --------------------------------------------- Bandeau soirée « En Passant » */
.affiche-soiree {
  position: relative; display: block; border-radius: var(--r-l); overflow: hidden;
  background: #000; text-decoration: none; box-shadow: var(--ombre-l);
  transition: transform var(--moyen) var(--sortie), box-shadow var(--moyen) ease;
}
.affiche-soiree:hover { transform: translateY(-3px); box-shadow: 0 26px 60px rgba(16, 15, 24, 0.28); }
.affiche-soiree img { display: block; width: 100%; height: auto; }
.affiche-soiree__texte {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 30px;
  display: flex; flex-direction: column; gap: 6px; color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0));
}
.affiche-soiree__oeil {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: #d8a13f;
}
.affiche-soiree__texte strong { font-family: var(--titre); font-size: clamp(20px, 2.4vw, 30px); font-weight: 400; }
.affiche-soiree__cta { font-size: 14px; font-weight: 600; color: #fff; }
.affiche-soiree:hover .affiche-soiree__cta { color: #d8a13f; }
@media (max-width: 640px) {
  .affiche-soiree__texte { padding: 16px 18px; }
}


/* ------------------------------------------ Soirée : affiche + présentation */
.soiree-duo { display: grid; grid-template-columns: 0.78fr 1.22fr; gap: 34px; align-items: start; }
.soiree-duo__affiche {
  border-radius: var(--r-l); overflow: hidden; background: #5d1512;
  box-shadow: var(--ombre-l); line-height: 0;
}
.soiree-duo__affiche img { display: block; width: 100%; height: auto; }
.soiree-duo__texte { display: flex; flex-direction: column; }
@media (max-width: 900px) {
  .soiree-duo { grid-template-columns: 1fr; gap: 26px; }
  .soiree-duo__affiche { max-width: 420px; }
}


/* ------------------------------------------------- Photos de scène En Passant */
.scene-bande {
  margin: 26px 0 0; border-radius: var(--r-l); overflow: hidden;
  background: #0d0b16; position: relative; line-height: 0;
}
.scene-bande img { display: block; width: 100%; height: auto; }
.scene-bande figcaption {
  position: absolute; right: 14px; bottom: 12px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86); background: rgba(0, 0, 0, 0.6);
  padding: 4px 10px; border-radius: var(--r-pill); line-height: 1.4;
}
/* rangée « justifiée » : les largeurs suivent les proportions, donc aucune photo n'est rognée */
.scene-photos { display: flex; gap: 16px; margin-top: 16px; }
.scene-photos figure { margin: 0; border-radius: var(--r-l); overflow: hidden; background: #0d0b16; min-width: 0; }
.scene-photos figure:first-child { flex: 1.516 1 0; }
.scene-photos figure:last-child { flex: 0.716 1 0; }
.scene-photos img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) {
  .scene-photos { flex-direction: column; }
  .scene-photos img { height: auto; }
}

.soiree-infos {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  margin-top: 30px; background: var(--sable-bord);
  border: 1px solid var(--sable-bord); border-radius: var(--r-l); overflow: hidden;
}
.soiree-infos div { background: var(--blanc); padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; }
.soiree-infos span {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gris);
}
.soiree-infos strong { font-family: var(--titre); font-size: 22px; font-weight: 400; color: var(--encre); line-height: 1.2; }
@media (max-width: 760px) { .soiree-infos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.menu-soiree--grand li { font-size: 16px; line-height: 1.6; }
.rappel-gratuit {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px;
  border-radius: var(--r-pill); background: var(--turquoise); color: #fff;
  font-size: 14px; font-weight: 700; letter-spacing: 0.02em;
}
.rappel-gratuit i { width: 8px; height: 8px; border-radius: 50%; background: #fff; flex: 0 0 auto; }


/* -------------------------------------------------- Titres du concert Goldman */
.titres-goldman { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.titres-goldman span {
  padding: 8px 16px; border-radius: var(--r-pill);
  background: var(--blanc); border: 1px solid var(--turquoise-bord);
  font-size: 14.5px; font-weight: 600; color: var(--turquoise-nuit);
}


/* --------------------------------------------------- Itinéraire en voiture */
.route { display: flex; flex-direction: column; gap: 22px; margin-top: 30px; }
.route__carte {
  position: relative; border-radius: var(--r-l); overflow: hidden;
  border: 1px solid var(--sable-bord); background: var(--sable); aspect-ratio: 21 / 9; min-height: 340px;
}
#carte-itineraire { position: absolute; inset: 0; }
.route__legende {
  position: absolute; left: 14px; bottom: 14px; z-index: 500;
  display: flex; gap: 16px;
  background: rgba(255, 255, 255, 0.94); border-radius: 12px; padding: 10px 14px;
  box-shadow: 0 6px 20px rgba(16, 15, 24, 0.16);
}
.route__legende span { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--encre); }
.pastille { width: 14px; height: 4px; border-radius: 2px; flex: 0 0 auto; }
.pastille--rose { background: var(--rose); }
.pastille--turquoise { background: var(--turquoise); }

.route__panneau {
  background: var(--blanc); border: 1px solid var(--sable-bord); border-radius: var(--r-l);
  padding: 22px 26px; display: flex; flex-direction: column; gap: 0;
}
.route__pied:first-child { padding-top: 0; border-top: 0; }
.route__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; position: relative; }
.route__liste::before { content: ''; position: absolute; left: 8%; right: 8%; top: 15px; border-top: 2px dashed var(--rose-bord); }
.route__etape { position: relative; display: flex; flex-direction: column; gap: 8px; }
.route__num {
  width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--rose); color: #fff; box-shadow: 0 0 0 6px var(--blanc);
  font-family: var(--mono); font-size: 12px;
}
.route__etape:last-child .route__num { background: var(--turquoise); }
.route__titre { font-family: var(--titre); font-size: 18px; color: var(--encre); line-height: 1.25; margin-top: 4px; }
.route__texte { font-size: 14px; line-height: 1.6; color: var(--texte-doux); margin: 0; text-wrap: pretty; }
.route__km { font-family: var(--mono); font-size: 11.5px; color: var(--gris); order: -1; position: absolute; right: 0; top: 6px; }
.route__pied {
  padding-top: 22px; border-top: 1px solid var(--sable-bord);
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between;
}
@media (max-width: 960px) {
  .route__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .route__liste::before { display: none; }
  .route__carte { aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) { .route__liste { grid-template-columns: 1fr; } }

/* ------------------------------------------------- Vignettes des deux soirées */
.soiree-vignette {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--blanc); border: 1px solid var(--sable-bord); border-radius: var(--r-l);
  box-shadow: var(--ombre-m); transition: transform var(--moyen) var(--sortie), box-shadow var(--moyen) ease;
}
.soiree-vignette:hover { transform: translateY(-4px); box-shadow: 0 26px 60px rgba(16, 15, 24, 0.18); }
.soiree-vignette__image { display: block; aspect-ratio: 16 / 9; background: #0d0b16; }
.soiree-vignette__image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.soiree-vignette__corps {
  flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 28px 30px 30px; gap: 10px;
}
.soiree-vignette__jour {
  display: inline-flex; padding: 6px 16px; border-radius: var(--r-pill);
  background: var(--rose-pale); border: 1px solid var(--rose-bord);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--rose-encre);
}
.soiree-vignette--samedi .soiree-vignette__jour { background: var(--turquoise-pale); border-color: var(--turquoise-bord); color: var(--turquoise-encre); }
.soiree-vignette__titre { font-family: var(--titre); font-size: 30px; font-weight: 400; color: var(--encre); line-height: 1.15; margin: 4px 0 0; }
.soiree-vignette__lieu { font-size: 13.5px; font-weight: 600; color: var(--gris); }
.soiree-vignette__texte { font-size: 15.5px; line-height: 1.7; color: var(--texte-doux); margin: 6px 0 0; max-width: 44ch; text-wrap: pretty; }
.soiree-vignette__pied {
  margin-top: auto; padding-top: 22px; width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.soiree-vignette__prix { font-family: var(--titre); font-size: 40px; color: var(--encre); line-height: 1; }
@media (max-width: 560px) { .soiree-vignette__titre { font-size: 25px; } }


/* ------------------------------------------------------ Compteur « À propos » */
.compteur-bande {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px;
  background: var(--sable-bord); border: 1px solid var(--sable-bord);
  border-radius: var(--r-l); overflow: hidden; box-shadow: var(--ombre-m);
}
.compteur-bande__case {
  position: relative; background: var(--blanc); padding: 34px 28px 30px; text-align: center;
  opacity: 0; transform: translateY(18px);
  transition: opacity 600ms var(--sortie), transform 600ms var(--sortie);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.compteur-bande.visible .compteur-bande__case { opacity: 1; transform: none; }
.compteur-bande__case::before {
  content: ''; position: absolute; left: 50%; top: 0; width: 44px; height: 4px; transform: translateX(-50%);
  border-radius: 0 0 4px 4px; background: var(--rose);
}
.compteur-bande__case--turquoise::before { background: var(--turquoise); }
.compteur-bande__num {
  font-family: var(--titre); font-size: clamp(34px, 3.9vw, 54px); line-height: 1;
  color: var(--rose); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.compteur-bande__case--turquoise .compteur-bande__num { color: var(--turquoise); }
.compteur-bande__num sup { font-size: 0.45em; vertical-align: top; position: relative; top: 0.15em; margin-left: 2px; }
.compteur-bande__lib {
  margin-top: 12px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--encre);
}
.compteur-bande__note { margin-top: 6px; font-size: 13.5px; color: var(--gris); line-height: 1.45; }
/* 5 cases : à largeur moyenne, 3 + 2 sur une grille de 6 pistes (aucune cellule vide) */
@media (max-width: 1100px) {
  .compteur-bande { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .compteur-bande__case { grid-column: span 2; }
  .compteur-bande__case:nth-child(4), .compteur-bande__case:nth-child(5) { grid-column: span 3; }
}
/* Sur smartphone, la bande devient une liste : chiffre à gauche dans une colonne
   de largeur fixe, libellé et note à droite — hauteurs et alignements réguliers. */
@media (max-width: 720px) {
  .compteur-bande { grid-template-columns: 1fr; }
  .compteur-bande__case {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: 104px minmax(0, 1fr);
    align-items: center; gap: 18px;
    padding: 17px 20px 17px 22px; text-align: left;
  }
  .compteur-bande__case::before {
    left: 0; top: 50%; transform: translateY(-50%);
    width: 4px; height: 58%; border-radius: 0 4px 4px 0;
  }
  .compteur-bande__case { min-height: 96px; }
  .compteur-bande__num { font-size: 34px; text-align: right; }
  .compteur-bande__num sup { font-size: 0.42em; }
  .compteur-bande__lib { margin-top: 0; font-size: 12px; letter-spacing: 0.08em; }
  /* note limitée à deux lignes : toutes les lignes gardent la même hauteur */
  .compteur-bande__note {
    margin-top: 3px; font-size: 12.5px; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
}
@media (prefers-reduced-motion: reduce) {
  .compteur-bande__case { opacity: 1; transform: none; transition: none; }
}


/* ------------------------------------------------ Billet « entrée gratuite » */
/* l'ombre vit sur un conteneur non masqué : le masque du ticket la couperait */
.billet-cadre { position: relative; margin-top: 30px; }
.billet-cadre::before {
  content: ''; position: absolute; inset: 10px 6px -8px 6px; border-radius: var(--r-l);
  background: rgba(29, 24, 25, 0.18); filter: blur(20px); z-index: 0;
}
.billet {
  display: grid; grid-template-columns: 220px 1fr;
  background: var(--blanc); border-radius: var(--r-l);
  box-shadow: inset 0 0 0 1.5px #cdbfa8;
  overflow: hidden; position: relative; z-index: 1;
  /* deux encoches percées sur la ligne de perforation, à 220 px du bord */
  -webkit-mask-image:
    radial-gradient(circle 15px at 220px 0, transparent 97%, #000 100%),
    radial-gradient(circle 15px at 220px 100%, transparent 97%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(circle 15px at 220px 0, transparent 97%, #000 100%),
    radial-gradient(circle 15px at 220px 100%, transparent 97%, #000 100%);
  mask-composite: intersect;
}
.billet__souche {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 34px 22px; background: var(--turquoise); color: #fff; text-align: center;
  border-right: 0;
}
/* la ligne de perforation, tracée en pointillé fin entre souche et corps */
.billet__souche::after {
  content: ''; position: absolute; top: 18px; bottom: 18px; right: -1px; width: 2px;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0 6px, transparent 6px 12px);
}
.billet__gratuit { font-family: var(--titre); font-size: clamp(40px, 4.5vw, 56px); line-height: 1; letter-spacing: -0.01em; }
.billet__mention { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.9; }
.billet__corps { padding: 30px 34px 30px 38px; display: flex; flex-direction: column; gap: 14px; }
.billet__titre { font-family: var(--titre); font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; color: var(--encre); margin: 0; }
.billet__texte { font-size: 16px; line-height: 1.7; color: var(--texte-doux); margin: 0; max-width: none; text-wrap: pretty; }
.billet__horaires {
  list-style: none; margin: 6px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
}
.billet__horaires li {
  display: flex; flex-direction: column; gap: 4px; padding: 12px 14px;
  background: var(--sable); border: 1px solid var(--sable-bord); border-radius: var(--r-s);
}
.billet__horaires b { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rose-encre); }
.billet__horaires span { font-family: var(--titre); font-size: 20px; color: var(--encre); white-space: nowrap; }
.billet__pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--sable-bord); }
.billet__lieu { font-size: 14px; color: var(--gris); }
@media (max-width: 860px) {
  .billet { grid-template-columns: 1fr; }
  .billet { -webkit-mask-image: none; mask-image: none; }
  .billet__souche { border-right: 0; border-bottom: 2px dashed rgba(255, 255, 255, 0.55); padding: 26px; }
  .billet__souche::after { display: none; }
  .billet__horaires { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* Sections hors écran : leurs animations s'arrêtent (économie de calcul au défilement) */
.anim-pause *, .anim-pause *::before, .anim-pause *::after { animation-play-state: paused !important; }


/* Cartes des 4 jours : sous-titre à la place de l'horaire (les horaires vivent dans le billet) */
.jour-entete { flex-direction: column; align-items: flex-start; gap: 2px; }
.jour-sous { font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--gris); }
.billet__sous { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--turquoise-encre); margin-top: 6px; }
.billet__horaires { margin-top: 0 !important; }


/* --------------------------------------------- Exposants : devenir exposant */
.candidature { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
.candidature__texte { font-size: 17px; line-height: 1.7; color: var(--texte-doux); margin-top: 22px; max-width: 58ch; text-wrap: pretty; }
.candidature__atouts { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.candidature__atouts li {
  display: grid; grid-template-columns: 170px 1fr; gap: 14px; align-items: baseline;
  padding: 12px 16px; background: var(--blanc); border: 1px solid var(--sable-bord); border-radius: var(--r-s);
}
.candidature__atouts b { font-size: 14px; color: var(--rose-encre); }
.candidature__atouts span { font-size: 14.5px; line-height: 1.55; color: var(--texte-doux); }

/* trois photos en éventail, légères dérives au survol */
.candidature__visuel { position: relative; aspect-ratio: 1 / 1; max-width: 520px; margin-left: auto; width: 100%; }
.candidature__photo {
  position: absolute; border-radius: var(--r-m); overflow: hidden; background: var(--sable);
  box-shadow: 0 22px 50px rgba(16, 15, 24, 0.22); border: 6px solid var(--blanc);
  transition: transform 700ms var(--sortie);
}
.candidature__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.candidature__photo--a { left: 0; top: 6%; width: 62%; height: 58%; transform: rotate(-4deg); z-index: 1; }
.candidature__photo--b { right: 0; top: 0; width: 46%; height: 42%; transform: rotate(5deg); z-index: 2; }
.candidature__photo--c { right: 6%; bottom: 0; width: 56%; height: 48%; transform: rotate(-2deg); z-index: 3; }
.candidature__visuel:hover .candidature__photo--a { transform: rotate(-6deg) translate(-6px, -4px); }
.candidature__visuel:hover .candidature__photo--b { transform: rotate(7deg) translate(6px, -6px); }
.candidature__visuel:hover .candidature__photo--c { transform: rotate(0deg) translate(4px, 6px); }
.candidature__pastille {
  position: absolute; left: 4%; bottom: 8%; z-index: 4; width: 108px; height: 108px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--turquoise); color: #fff; box-shadow: 0 14px 30px rgba(0, 106, 96, 0.35);
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; transform: rotate(-8deg);
  animation: pastilleFlotte 6s ease-in-out infinite;
}
.candidature__pastille b { font-family: var(--titre); font-size: 34px; line-height: 1; letter-spacing: 0; text-transform: none; }
@keyframes pastilleFlotte { 0%, 100% { transform: rotate(-8deg) translateY(0); } 50% { transform: rotate(-5deg) translateY(-8px); } }

/* frise des quatre étapes, reliées par un trait pointillé */
.etapes-candidature {
  list-style: none; margin: 46px 0 0; padding: 0; position: relative;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px;
}
.etapes-candidature::before {
  content: ''; position: absolute; left: 6%; right: 6%; top: 27px; height: 0;
  border-top: 2px dashed var(--rose-bord); z-index: 0;
}
.etape-c {
  position: relative; z-index: 1; padding: 0 6px;
  opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--sortie), transform 600ms var(--sortie);
  transition-delay: var(--d, 0ms);
}
.etapes-candidature.visible .etape-c { opacity: 1; transform: none; }
.etape-c__num {
  display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%;
  background: var(--rose); color: #fff; font-family: var(--titre); font-size: 20px;
  box-shadow: 0 0 0 8px var(--creme), var(--ombre-rose);
}
.etape-c--fin .etape-c__num { background: var(--turquoise); box-shadow: 0 0 0 8px var(--creme), 0 12px 24px rgba(0, 106, 96, 0.3); }
.etape-c__titre { font-family: var(--titre); font-size: 20px; color: var(--encre); margin-top: 16px; }
.etape-c__texte { font-size: 14.5px; line-height: 1.6; color: var(--texte-doux); margin: 8px 0 0; text-wrap: pretty; }
@media (max-width: 960px) {
  .candidature { grid-template-columns: 1fr; }
  .candidature__visuel { margin: 0 auto; }
  .etapes-candidature { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .etapes-candidature::before { display: none; }
}
@media (max-width: 560px) { .candidature__atouts li { grid-template-columns: 1fr; gap: 4px; } }
@media (prefers-reduced-motion: reduce) {
  .candidature__pastille { animation: none; }
  .etape-c { opacity: 1; transform: none; transition: none; }
}




/* --------------------- Ruban de fête incliné entre deux sections (accueil) */
/* le ruban déborde sur les deux sections voisines : aucun coin vide, aucune coupe latérale */
/* clip + marge de rognage : le ruban garde son débordement vertical sur les deux
   sections voisines, mais ne rend plus la page défilable latéralement */
.ruban-fete {
  position: relative; height: 176px; margin: -70px 0; z-index: 5; background: transparent;
  overflow-x: clip; overflow-y: visible;
}
.ruban-fete__bande {
  position: absolute; left: -12vw; right: -12vw; top: 50%; width: auto;
  transform: translateY(-50%) rotate(-1.6deg);
  background: linear-gradient(100deg, var(--rose-fonce) 0%, var(--rose) 38%, #f05aa3 70%, var(--rose) 100%);
  box-shadow: 0 14px 34px rgba(232, 64, 144, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -2px 0 rgba(140, 26, 78, 0.28);
  overflow: hidden; padding: 15px 0;
}
/* liserés crème en haut et en bas, comme un galon */
.ruban-fete__bande::before, .ruban-fete__bande::after {
  content: ''; position: absolute; left: 0; right: 0; height: 3px; background: rgba(255, 255, 255, 0.55);
}
.ruban-fete__bande::before { top: 5px; }
.ruban-fete__bande::after { bottom: 5px; }
.ruban-fete__piste { display: flex; align-items: center; width: max-content; animation: rubanDefile 52s linear infinite; will-change: transform; }
.ruban-fete:hover .ruban-fete__piste { animation-play-state: paused; }
.ruban__mot {
  font-family: var(--titre); font-size: 26px; line-height: 1; color: #fff; white-space: nowrap; padding: 0 6px;
  text-shadow: 0 2px 6px rgba(120, 20, 66, 0.35);
}
/* la vache dans un médaillon crème, comme un sceau cousu sur le ruban */
.ruban__vache {
  position: relative; width: 52px; height: 52px; margin: 0 26px; flex: 0 0 auto; border-radius: 50%;
  background: var(--creme) url('../img/logo-mark-vache.webp') center / 74% no-repeat;
  box-shadow: 0 4px 12px rgba(120, 20, 66, 0.35), inset 0 0 0 1px rgba(16, 15, 24, 0.08);
  animation: rubanVache 7s ease-in-out infinite;
}
.ruban__vache::after {
  content: ''; position: absolute; inset: -5px; border-radius: 50%;
  border: 2px dotted rgba(255, 255, 255, 0.8);
}
@keyframes rubanDefile { to { transform: translate3d(-50%, 0, 0); } }
@keyframes rubanVache {
  0%, 100% { transform: rotate(-6deg) translateY(0); }
  50% { transform: rotate(6deg) translateY(-3px); }
}
@media (max-width: 700px) {
  .ruban-fete { height: 146px; margin: -59px 0; }
  .ruban-fete__bande { left: -18vw; right: -18vw; }
  .ruban__mot { font-size: 21px; }
  .ruban__vache { width: 42px; height: 42px; margin: 0 18px; }
}
@media (prefers-reduced-motion: reduce) { .ruban-fete__piste, .ruban__vache { animation: none; } }


/* ------------------------------------- Les deux soirées : cartes « affiche » */
.affiches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; margin-top: 34px; }
.affiche {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--blanc); border: 1px solid var(--sable-bord); border-radius: var(--r-l);
  box-shadow: 0 18px 44px rgba(16, 15, 24, 0.12);
  transition: transform var(--moyen) var(--sortie), box-shadow var(--moyen) ease;
}
.affiche:hover { transform: translateY(-4px); box-shadow: 0 28px 62px rgba(16, 15, 24, 0.2); }

/* photo recadrée à l'identique sur les deux cartes */
.affiche__scene { position: relative; aspect-ratio: 16 / 9; flex: 0 0 auto; min-height: 0; overflow: hidden; }
.affiche__photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 800ms var(--sortie);
}
.affiche:hover .affiche__photo { transform: scale(1.05); }
/* voile bas pour asseoir les étiquettes + guirlande de fête en haut */
.affiche__scene::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(16, 15, 24, 0.62) 0%, rgba(16, 15, 24, 0.12) 34%, rgba(16, 15, 24, 0) 60%);
}
.affiche__scene::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 8px; z-index: 2;
  background: repeating-linear-gradient(90deg, var(--rose) 0 16px, var(--creme) 16px 32px, var(--turquoise) 32px 48px, var(--creme) 48px 64px);
}
.affiche__jour {
  position: absolute; left: 18px; bottom: 16px; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 9px 15px; border-radius: var(--r-s);
  background: var(--creme); color: var(--encre);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
}
.affiche__jour b { font-family: var(--titre); font-size: 20px; letter-spacing: 0; text-transform: none; line-height: 1; }
.affiche--samedi .affiche__jour { background: var(--turquoise); color: #fff; }
.affiche__heure {
  position: absolute; right: 18px; bottom: 16px; z-index: 3;
  padding: 8px 16px; border-radius: var(--r-pill);
  background: var(--encre); border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
  color: #fff; font-family: var(--titre); font-size: 19px; line-height: 1;
}

.affiche__corps { flex: 1; display: flex; flex-direction: column; padding: 24px 30px 28px; }
.affiche__sur {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose-encre);
}
.affiche--samedi .affiche__sur { color: var(--turquoise-encre); }
.affiche__titre {
  font-family: var(--titre); font-size: clamp(28px, 2.6vw, 34px); line-height: 1.05; color: var(--encre);
  margin: 8px 0 0; display: flex; flex-direction: column; gap: 4px;
}
.affiche__sous { font-family: var(--accent); font-style: italic; font-weight: 700; font-size: 0.62em; color: var(--rose); }
.affiche--samedi .affiche__sous { color: var(--turquoise); }
.affiche__sous i { font-style: italic; }
.affiche__texte { font-size: 15.5px; line-height: 1.7; color: var(--texte-doux); margin: 14px 0 0; text-wrap: pretty; }
.affiche__pied {
  margin-top: auto; padding-top: 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-top: 1px dashed var(--sable-bord);
}
.affiche__prix { font-family: var(--titre); font-size: 34px; line-height: 1; color: var(--encre); white-space: nowrap; }
.affiche__prix span { font-family: var(--accent); font-style: italic; font-weight: 700; font-size: 0.62em; color: var(--gris); }
@media (max-width: 860px) { .affiches { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .affiche, .affiche__photo { transition: none; } }


/* ------------------------------------------- Se restaurer : les deux tables */
.restos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; margin-top: 34px; }
.resto {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--blanc); border: 1px solid var(--sable-bord); border-radius: var(--r-l);
  box-shadow: 0 18px 44px rgba(16, 15, 24, 0.10);
  transition: transform var(--moyen) var(--sortie), box-shadow var(--moyen) ease;
}
.resto:hover { transform: translateY(-4px); box-shadow: 0 28px 62px rgba(16, 15, 24, 0.16); }
.resto__photo { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--sable); }
.resto__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 800ms var(--sortie); }
.resto:hover .resto__photo img { transform: scale(1.05); }
.resto__service {
  position: absolute; left: 16px; bottom: 16px; z-index: 2;
  padding: 7px 15px; border-radius: var(--r-pill);
  background: var(--creme); color: var(--encre);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
}
.resto__corps { flex: 1; display: flex; flex-direction: column; padding: 24px 28px 26px; }
.resto__sur { font-family: var(--mono); font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--turquoise-encre); }
.resto__nom { font-family: var(--titre); font-size: clamp(24px, 2.3vw, 29px); line-height: 1.1; color: var(--encre); margin: 8px 0 0; }
.resto__texte { font-size: 15.5px; line-height: 1.7; color: var(--texte-doux); margin: 12px 0 0; text-wrap: pretty; }
.resto__carte {
  list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px;
}
.resto__carte li {
  padding: 7px 14px; border-radius: var(--r-pill);
  background: var(--rose-pale); border: 1px solid var(--rose-bord);
  font-size: 13.5px; font-weight: 600; color: var(--rose-encre);
}
.resto__pied {
  margin-top: auto; padding-top: 20px; display: flex; flex-wrap: wrap; gap: 26px;
  border-top: 1px dashed var(--sable-bord);
}
.resto__info { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; color: var(--gris); }
.resto__info b { font-size: 14px; color: var(--encre); }

/* ------------------------------------------------------ Manger sur le pouce */
.pouce {
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 34px; margin-top: 26px;
  background: var(--blanc); border: 1px solid var(--sable-bord); border-radius: var(--r-l);
  padding: 32px 34px;
}
.pouce__texte { font-size: 15.5px; line-height: 1.7; color: var(--texte-doux); margin: 14px 0 0; text-wrap: pretty; }
.pouce__note { font-size: 13px; font-weight: 700; color: var(--turquoise-encre); margin: 14px 0 0; }
.pouce__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; }
.pouce__liste li { display: flex; flex-direction: column; gap: 3px; padding-left: 16px; position: relative; }
.pouce__liste li::before {
  content: ''; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--rose);
}
.pouce__liste b { font-size: 15px; color: var(--encre); }
.pouce__liste span { font-size: 14px; line-height: 1.55; color: var(--texte-doux); }
@media (max-width: 900px) {
  .restos { grid-template-columns: 1fr; }
  .pouce { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 560px) { .pouce__liste { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .resto, .resto__photo img { transition: none; } }


/* ----------------------------- Infos pratiques : une page plus dense, plus calme */
.page-compacte .bloc { padding: clamp(34px, 4.6vw, 50px) 0; }
.page-compacte .bloc--serre { padding: clamp(26px, 3.4vw, 36px) 0; }
.page-compacte .titre-xl { font-size: clamp(26px, 3.1vw, 36px); }
.page-compacte .titre-l { font-size: clamp(22px, 2.6vw, 28px); }
.page-compacte .titre-m { font-size: clamp(19px, 2vw, 23px); }
.page-compacte .titre-s { font-size: 18px; }
.page-compacte .filet { margin-top: 12px; }
/* chapeaux de section : corps de texte courant, deux colonnes sur grand écran */
.page-compacte .bloc > .page > p[style*="font-size:17px"] {
  font-size: 15.5px !important; line-height: 1.65 !important; margin-top: 16px !important;
  text-wrap: pretty;
}
.page-compacte .chapeau-colonnes { columns: 2; column-gap: 34px; }
.page-compacte .bloc > .page > p[style*="font-size:17px"] b { color: var(--encre); }
/* cartes et fiches resserrées */
.page-compacte .carte__corps[style*="padding:28px"], .page-compacte .carte__corps[style*="padding:30px"],
.page-compacte .carte__corps[style*="padding:32px"], .page-compacte .carte__corps[style*="padding:36px"] { padding: 22px 24px !important; }
.page-compacte .carte__corps p[style*="font-size:15px"] { font-size: 14.5px !important; line-height: 1.6 !important; }
.page-compacte .duo { font-size: 13.5px; }
.page-compacte .plans-navette { gap: 20px; margin-top: 26px; }
.page-compacte .plans-navette .plan-vue { aspect-ratio: 16 / 10; }
.page-compacte .plan-officiel .plan-vue--paysage { aspect-ratio: 21 / 9; }
/* itinéraire */
.page-compacte .route { gap: 16px; margin-top: 22px; }
.page-compacte .route__carte { aspect-ratio: 21 / 8; min-height: 300px; }
.page-compacte .route__panneau { padding: 22px 24px; gap: 18px; }
.page-compacte .route__titre { font-size: 16px; }
.page-compacte .route__texte { font-size: 13.5px; }
/* fiche cartons */
.page-compacte .fiche { gap: 20px; }
@media (max-width: 900px) { .fiche { grid-template-columns: 1fr; } }
.page-compacte .fiche__etape { padding: 20px 22px; gap: 14px; }
.page-compacte .fiche__num { width: 36px; height: 36px; font-size: 18px; }
.page-compacte .fiche__phrase { font-size: 16px; }
.page-compacte .fiche__detail { font-size: 13.5px; }
/* restaurants */
.page-compacte .restos { gap: 20px; margin-top: 26px; }
.page-compacte .resto__photo { aspect-ratio: 16 / 8; }
.page-compacte .resto__corps { padding: 20px 24px 22px; }
.page-compacte .resto__nom { font-size: clamp(21px, 2vw, 25px); }
.page-compacte .resto__texte { font-size: 14.5px; line-height: 1.6; }
.page-compacte .resto__carte li { padding: 5px 12px; font-size: 12.5px; }
.page-compacte .pouce { padding: 24px 26px; gap: 26px; margin-top: 20px; }
.page-compacte .pouce__texte { font-size: 14.5px; }
.page-compacte .pouce__liste { gap: 10px 20px; }
.page-compacte .pouce__liste b { font-size: 14px; }
.page-compacte .pouce__liste span { font-size: 13px; }
/* dépliant */
.depliant summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--rose-encre);
}
.depliant summary::-webkit-details-marker { display: none; }
.depliant summary::before { content: '+'; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--rose-pale); border: 1px solid var(--rose-bord); font-size: 14px; line-height: 1; }
.depliant[open] summary::before { content: '–'; }
@media (max-width: 760px) { .page-compacte .chapeau-colonnes { columns: 1; } }


/* ============================================ Infos pratiques : mise en page « guide » */
.guide-tete { background: var(--encre); padding: 40px 0 34px; }
.guide-tete--rose { background: var(--rose); padding: 44px 0 0; position: relative; }
/* disque décoratif rogné par lui-même, le bandeau ne coupe plus les cartes qui débordent */
.guide-tete--rose::after {
  content: ''; position: absolute; right: 0; top: 0; width: 300px; height: 280px; pointer-events: none;
  background: radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.12) 0 260px, transparent 261px);
}
.guide-tete--rose .page { position: relative; z-index: 1; }
/* quatre repères posés à cheval sur le bord du bandeau */
.reperes {
  list-style: none; margin: 28px 0 -30px; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
}
.reperes li {
  display: flex; flex-direction: column; gap: 4px; padding: 16px 18px;
  background: var(--creme); border-radius: var(--r-m); box-shadow: 0 14px 34px rgba(120, 20, 66, 0.22);
}
.reperes__cle { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rose-encre); }
.reperes__val { font-family: var(--titre); font-size: 17px; line-height: 1.25; color: var(--encre); }
.guide-tete--rose + .guide { padding-top: 62px; }

/* variante claire : texte à gauche, photo à droite, repères en colonne clé/valeur */
.guide-tete--photo { background: var(--creme); padding: 40px 0 8px; }
.guide-tete__deux { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 44px; align-items: center; }
.cles { margin: 24px 0 0; display: flex; flex-direction: column; border-top: 1px solid var(--sable-bord); }
.cles > div { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--sable-bord); align-items: baseline; }
.cles dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rose-encre); }
.cles dd { margin: 0; font-family: var(--titre); font-size: 18px; color: var(--encre); line-height: 1.25; }
.guide-tete__photo { position: relative; margin: 0; aspect-ratio: 5 / 4; border-radius: var(--r-l); overflow: hidden; box-shadow: 0 24px 54px rgba(16, 15, 24, 0.16); }
.guide-tete__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.guide-tete__photo figcaption {
  position: absolute; left: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 2px;
  padding: 12px 18px; border-radius: var(--r-m); background: var(--turquoise); color: #fff;
  font-size: 12.5px; letter-spacing: 0.02em; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}
.guide-tete__photo figcaption b { font-family: var(--titre); font-size: 26px; line-height: 1; }
.guide-tete--photo + .guide, .ancres + .guide { padding-top: 26px; }
@media (max-width: 900px) {
  .guide-tete__deux { grid-template-columns: 1fr; gap: 24px; }
  .guide-tete__photo { aspect-ratio: 16 / 9; }
}
@media (max-width: 900px) { .reperes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .reperes { grid-template-columns: 1fr; } }
.guide-tete__grille { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; align-items: end; }
.bref { margin: 0; display: grid; gap: 0; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--r-m); overflow: hidden; }
.bref > div { display: grid; grid-template-columns: 92px 1fr; gap: 14px; padding: 10px 16px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.bref > div:first-child { border-top: 0; }
.bref dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--turquoise-clair); padding-top: 3px; }
.bref dd { margin: 0; font-size: 14px; line-height: 1.45; color: #fff; }
.bref dd a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.4); }

.guide { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 40px; align-items: start; padding-top: 34px; padding-bottom: 60px; }
.guide__rail { position: sticky; top: 132px; display: flex; flex-direction: column; gap: 16px; }
.guide__nav { background: var(--blanc); border: 1px solid var(--sable-bord); border-radius: var(--r-m); padding: 8px; }
.guide__nav .ancres__piste { display: flex; flex-direction: column; gap: 2px; overflow: visible; }
.guide__nav .ancres__piste a {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-s);
  font-size: 14px; font-weight: 600; color: var(--texte-doux); background: transparent; border: 0; box-shadow: none;
  transition: background var(--vite) ease, color var(--vite) ease;
}
.guide__nav .ancres__piste a span { font-family: var(--mono); font-size: 11px; color: var(--gris); min-width: 20px; }
.guide__nav .ancres__piste a:hover { background: var(--sable); color: var(--encre); transform: none; }
.guide__nav .ancres__piste a.actif, .guide__nav .ancres__piste a[aria-current] { background: var(--rose-pale); color: var(--rose-encre); }
.guide__nav .ancres__piste a.actif span, .guide__nav .ancres__piste a[aria-current] span { color: var(--rose); }

/* chaque section devient une fiche : plus de fond alterné, un en-tête léger */
.guide__contenu { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.guide__contenu .bloc, .guide__contenu .bloc--serre {
  padding: 26px 28px 30px !important; background: var(--blanc) !important;
  border: 1px solid var(--sable-bord); border-radius: var(--r-l); overflow: visible;
}
.guide__contenu .bloc > .page { max-width: none; padding: 0; }
.guide__contenu .oeil, .guide__contenu .filet { display: none; }
.guide__contenu .carte__corps .oeil, .guide__contenu .resto .oeil, .guide__contenu .pouce .oeil, .guide__contenu .route .oeil, .guide__contenu .fiche .oeil,
.guide__contenu .dormir .oeil, .guide__contenu .savoir .oeil { display: block; }
.guide__contenu .fiche-num { position: relative; z-index: 2; }
.fiche-num {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--rose); color: #fff; font-family: var(--mono); font-size: 12px; margin-bottom: 8px;
}
.guide__contenu .titre-xl, .guide__contenu .titre-l { font-size: clamp(22px, 2.3vw, 27px) !important; margin-top: 0 !important; margin-bottom: 0 !important; line-height: 1.15; }
.guide__contenu .bloc > .page > p[style*="font-size:17px"] { margin-top: 12px !important; color: var(--texte-doux); }
.guide__contenu .chapeau-colonnes { columns: 1; }
/* les grilles internes respirent moins */
.guide__contenu .grille[style*="margin-top:34px"], .guide__contenu .restos, .guide__contenu .plans-navette { margin-top: 20px !important; }
.guide__contenu .route { margin-top: 18px; }
.guide__contenu .fiche[style*="margin-top:32px"] { margin-top: 18px !important; }
.guide__contenu #horaires .grille { margin-top: 16px; }
.guide__contenu #horaires .titre-l { margin-bottom: 0 !important; }
/* section hébergements : la grande carte encre garde son fond */
.guide__contenu #hebergements .grille { margin-top: 18px; }

/* variante pleine largeur : plus de rail latéral, les fiches s'alignent sur la page */
.guide--large { grid-template-columns: minmax(0, 1fr); padding-top: 26px; }
.page-compacte main { background: linear-gradient(180deg, #e6f5f0 0%, #eef7f3 60%, #f6f2ea 100%); }
.page-compacte .guide-tete--photo { background: var(--creme); }
.page-compacte .ancres { background: rgba(230, 245, 240, 0.97); }
@media (max-width: 980px) {
  .guide { grid-template-columns: 1fr; gap: 20px; }
  .guide__rail { position: sticky; top: 118px; z-index: 20; background: var(--creme); padding: 8px 0; }
  .guide__rail .btn { display: none; }
  .guide__nav .ancres__piste { flex-direction: row; flex-wrap: wrap; }
  .guide__nav .ancres__piste a span { display: none; }
  .guide-tete__grille { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 560px) { .guide__contenu .bloc { padding: 20px 18px 24px !important; } }


/* ------------------------------------------------ Rester dormir + bon à savoir */
.dormir { display: grid; grid-template-columns: 1.35fr 0.65fr; gap: 22px; margin-top: 18px; align-items: stretch; }
.dormir__carte {
  display: grid; grid-template-columns: 0.9fr 1.1fr; overflow: hidden;
  background: var(--blanc); border: 1px solid var(--sable-bord); border-radius: var(--r-l);
}
.dormir__photo { display: block; min-height: 100%; background: var(--sable); }
.dormir__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 800ms var(--sortie); }
.dormir__carte:hover .dormir__photo img { transform: scale(1.04); }
.dormir__corps { padding: 26px 28px 28px; display: flex; flex-direction: column; }
.dormir__texte { font-size: 14.5px; line-height: 1.7; color: var(--texte-doux); margin: 12px 0 0; text-wrap: pretty; }
.dormir__conseil {
  margin: 16px 0 0; padding: 12px 14px; border-radius: var(--r-s);
  background: var(--rose-pale); border: 1px solid var(--rose-bord); font-size: 13.5px; line-height: 1.55; color: var(--rose-encre);
}
.dormir__conseil b { color: var(--rose-encre); }
.savoir { background: var(--sable); border: 1px solid var(--sable-bord); border-radius: var(--r-l); padding: 24px 26px; }
.savoir__liste { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; }
.savoir__liste li { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-top: 1px dashed var(--sable-bord); }
.savoir__liste li:first-child { border-top: 0; padding-top: 0; }
.savoir__liste li > b { font-size: 14px; color: var(--encre); }
.savoir__liste li > span { font-size: 13.5px; line-height: 1.6; color: var(--texte-doux); }
.savoir__liste li > span b { color: var(--rose-encre); }
@media (max-width: 980px) { .dormir { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .dormir__carte { grid-template-columns: 1fr; } .dormir__photo { aspect-ratio: 16 / 9; min-height: 0; } }


/* ====================================== En-tête de page « affiche de foire » */
.affiche-page {
  position: relative; color: #fff; padding: 44px 0 58px; overflow: hidden;
  /* toutes les pages ouvrent sur une affiche de hauteur identique */
  min-height: 470px; display: flex; flex-direction: column; justify-content: center;
  /* larges bandes diagonales dans plusieurs tons de rose, façon toile de fête */
  background-color: var(--rose);
  background-image: repeating-linear-gradient(-55deg, #e84090 0 56px, #f05aa2 56px 112px);
}
.affiche-page__grille { position: relative; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; }
.affiche-page__rosette {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: var(--r-pill);
  background: var(--creme); color: var(--rose-encre); font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase;
  box-shadow: 0 8px 20px rgba(120, 20, 66, 0.25); transform: rotate(-2deg);
}
.affiche-page__rosette img { width: 30px; height: 30px; border-radius: 50%; background: #fff; padding: 3px; object-fit: contain; }
.affiche-page__titre { font-family: var(--titre); font-size: clamp(32px, 4.4vw, 54px); line-height: 1.04; letter-spacing: -0.01em; margin: 22px 0 0; text-wrap: balance; }
.affiche-page__chapeau { font-size: 16.5px; line-height: 1.65; margin: 18px 0 0; max-width: 54ch; color: rgba(255, 255, 255, 0.94); text-wrap: pretty; }
.affiche-page__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.affiche-page__tag {
  display: inline-flex; align-items: center;
  padding: 8px 14px; border-radius: var(--r-pill); font-size: 13px; font-weight: 600;
  border: 1.5px solid rgba(255, 255, 255, 0.55); color: #fff;
  background: rgba(255, 255, 255, 0.12); text-decoration: none;
  transition: background var(--moyen) ease, border-color var(--moyen) ease,
    color var(--moyen) ease, transform var(--vite) var(--sortie);
}
a.affiche-page__tag:hover, a.affiche-page__tag:focus-visible {
  background: var(--creme); border-color: var(--creme); color: var(--rose-fonce);
  transform: translateY(-2px);
}
a.affiche-page__tag:active {
  background: var(--creme); border-color: var(--creme); color: var(--rose-fonce);
  transform: translateY(0) scale(0.97);
}
a.affiche-page__tag:focus-visible { outline: 2px solid var(--creme); outline-offset: 3px; }
.affiche-page__tag--plein { background: var(--turquoise); border-color: var(--turquoise); }
/* à droite : un grand billet graphique, incliné, qui porte le chiffre-clé de la page */
.affiche-page__billet { justify-self: end; width: 100%; max-width: 520px; perspective: 1200px; }
.billet-graphique {
  display: grid; grid-template-columns: 132px 1fr; border-radius: 18px; overflow: hidden;
  background: var(--creme); color: var(--encre); transform: rotate(-2.5deg);
  box-shadow: 0 44px 80px rgba(120, 20, 66, 0.45), 0 10px 22px rgba(120, 20, 66, 0.25);
  animation: billetFlotte 9s ease-in-out infinite;
  /* encoches semi-circulaires aux deux extrémités du ticket, sur la ligne de perforation */
  -webkit-mask: radial-gradient(circle at 132px 0, transparent 0 13px, #000 13.5px) top / 100% 51% no-repeat,
                radial-gradient(circle at 132px 100%, transparent 0 13px, #000 13.5px) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle at 132px 0, transparent 0 13px, #000 13.5px) top / 100% 51% no-repeat,
                radial-gradient(circle at 132px 100%, transparent 0 13px, #000 13.5px) bottom / 100% 51% no-repeat;
}
/* ombre portée séparée, car le masque coupe aussi l'ombre du ticket */
.affiche-page__billet { position: relative; }
.affiche-page__billet::before {
  content: ''; position: absolute; inset: 8% 4% -6% 4%; border-radius: 40%;
  background: rgba(120, 20, 66, 0.35); filter: blur(28px); z-index: -1;
  animation: ombreFlotte 9s ease-in-out infinite;
}
@keyframes ombreFlotte {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  60% { transform: scale(0.92) translateY(10px); opacity: 0.55; }
}
.billet-graphique__souche {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 26px 16px; background: var(--turquoise); color: #fff;
}
.billet-graphique__souche::after, .billet-graphique__souche::before { display: none; }
.billet-graphique__corps::before {
  content: ''; position: absolute; left: -1px; top: 16px; bottom: 16px; width: 2px;
  background: repeating-linear-gradient(180deg, rgba(16, 15, 24, 0.28) 0 6px, transparent 6px 12px);
}
.billet-graphique__souche::before, .billet-graphique__souche::after {
  content: ''; position: absolute; right: -13px; width: 24px; height: 24px; border-radius: 50%; background: var(--rose);
}
.billet-graphique__souche::before { top: -12px; } .billet-graphique__souche::after { bottom: -12px; }
.billet-graphique__souche img { width: 72px; height: 72px; border-radius: 50%; background: var(--creme); padding: 8px; object-fit: contain; }
.billet-graphique__souche span { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); }
.billet-graphique__corps { position: relative; display: flex; flex-direction: column; padding: 26px 28px 24px; gap: 4px; }
.billet-graphique__sur { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose-encre); }
.billet-graphique__corps::after {
  content: 'Entrée · Admit one'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  writing-mode: vertical-rl; text-orientation: mixed;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(16, 15, 24, 0.32); white-space: nowrap;
}
.billet-graphique__corps { padding-right: 38px !important; }
.billet-graphique__grand { font-family: var(--titre); font-size: clamp(48px, 5.4vw, 66px); line-height: 0.95; color: var(--rose); letter-spacing: -0.01em; margin-top: 6px; }
.billet-graphique__grand--mot { font-size: clamp(38px, 4.2vw, 50px); }
.billet-graphique__sous { font-family: var(--accent); font-style: italic; font-weight: 700; font-size: 19px; color: var(--encre); }
.billet-graphique__ligne { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; padding: 12px 0 0; border-top: 1px solid var(--sable-bord); }
.billet-graphique__ligne b { font-size: 12.5px; font-weight: 600; color: var(--texte-doux); }
/* faux code-barres */
.billet-graphique__code {
  position: absolute; right: 22px; bottom: 22px; width: 74px; height: 30px; opacity: 0.85;
  background: repeating-linear-gradient(90deg, var(--encre) 0 2px, transparent 2px 4px, var(--encre) 4px 5px, transparent 5px 8px, var(--encre) 8px 11px, transparent 11px 13px);
}
@keyframes billetFlotte {
  0%   { transform: rotate(-3deg) translate(0, 0); }
  30%  { transform: rotate(-1.2deg) translate(6px, -14px); }
  60%  { transform: rotate(-3.6deg) translate(-4px, -20px); }
  100% { transform: rotate(-3deg) translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) { .billet-graphique { animation: none; } }
/* bord inférieur perforé, comme un talon de billet */
.affiche-page__dents {
  position: absolute; left: 0; right: 0; bottom: -11px; height: 22px;
  background: radial-gradient(circle at 50% 50%, var(--creme) 0 8px, transparent 9px) 0 0 / 30px 22px repeat-x;
}
@media (max-width: 900px) {
  .affiche-page { min-height: 0; }
  .affiche-page__grille { grid-template-columns: 1fr; gap: 28px; }
  .affiche-page__billet { max-width: 420px; justify-self: start; }
  .billet-graphique { transform: none; animation: none; grid-template-columns: 96px 1fr; }
}


/* billets d'en-tête sur smartphone : mêmes proportions, à l'échelle (placé après le bloc 900px) */
@media (max-width: 620px) {
  .affiche-page { padding: 28px 0 42px; min-height: 0; }
  .affiche-page__billet { max-width: none; }
  .billet-graphique { grid-template-columns: 68px 1fr; border-radius: 14px;
    -webkit-mask: radial-gradient(circle at 68px 0, transparent 0 10px, #000 10.5px) top / 100% 51% no-repeat,
                  radial-gradient(circle at 68px 100%, transparent 0 10px, #000 10.5px) bottom / 100% 51% no-repeat;
            mask: radial-gradient(circle at 68px 0, transparent 0 10px, #000 10.5px) top / 100% 51% no-repeat,
                  radial-gradient(circle at 68px 100%, transparent 0 10px, #000 10.5px) bottom / 100% 51% no-repeat; }
  .billet-graphique__corps::after { display: none; }
  .billet-graphique__corps { padding-right: 18px !important; }
  .billet-graphique__souche { padding: 16px 8px; gap: 8px; }
  .billet-graphique__souche img { width: 44px; height: 44px; padding: 5px; }
  .billet-graphique__souche span { font-size: 9px; letter-spacing: 0.08em; }
  .billet-graphique__corps { padding: 16px 18px 16px; gap: 2px; }
  .billet-graphique__sur { font-size: 9.5px; }
  .billet-graphique__grand { font-size: 38px; margin-top: 2px; }
  .billet-graphique__grand--mot { font-size: 28px; }
  .billet-graphique__sous { font-size: 15px; line-height: 1.25; }
  .billet-graphique__ligne { margin-top: 10px; padding-top: 8px; }
  .billet-graphique__ligne b { font-size: 11.5px; }
}


/* ----------------------------------- À propos : comité d'honneur et soutiens */
.honneur { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 55px; align-items: stretch; }
/* diplôme : cadre double, coins ornés, liste numérotée en deux colonnes */
.honneur__cadre {
  position: relative; padding: 26px 28px 26px; background: var(--creme);
  border: 1px solid var(--rose-bord); border-radius: var(--r-l);
  box-shadow: 0 18px 44px rgba(16, 15, 24, 0.08);
  display: flex; flex-direction: column;
}
/* second filet intérieur arrondi, à la place de l'outline carré */
.honneur__cadre::before { content: ''; position: absolute; inset: 6px; border: 1px dashed var(--rose-bord); border-radius: calc(var(--r-l) - 6px); pointer-events: none; }
.honneur__tete { text-align: left; }
.honneur__tete img { width: 64px; height: 64px; border-radius: 50%; background: #fff; padding: 8px; object-fit: contain; box-shadow: 0 0 0 1px var(--rose-bord), 0 8px 18px rgba(232, 64, 144, 0.18); margin-bottom: 14px; }
.honneur__texte { font-size: 14.5px; line-height: 1.65; color: var(--texte-doux); margin: 12px auto 0; max-width: 52ch; text-wrap: pretty; }
.honneur__liste {
  list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px dashed var(--rose-bord);
  display: flex; flex-direction: column; justify-content: space-between; gap: 6px; flex: 1;
}
.honneur__liste li {
  display: flex; align-items: baseline; gap: 10px; font-size: 13.5px; line-height: 1.4; color: var(--encre);
  opacity: 0; transform: translateY(8px); transition: opacity 500ms var(--sortie), transform 500ms var(--sortie);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.honneur__liste.visible li { opacity: 1; transform: none; }
.honneur__num { font-family: var(--mono); font-size: 10px; color: var(--rose); flex: 0 0 auto; min-width: 16px; }
/* soutiens : mur de logos sur fond turquoise très pâle */
.soutiens { background: var(--turquoise-pale); border: 1px solid var(--turquoise-bord); border-radius: var(--r-l); padding: 24px 26px 22px; display: flex; flex-direction: column; }
.soutiens__texte { font-size: 13.5px; line-height: 1.6; color: var(--turquoise-nuit); margin: 10px 0 0; text-wrap: pretty; }
.soutiens__grille { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.soutiens__grille li {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; padding: 10px;
  background: #fff; border-radius: var(--r-s); border: 1px solid var(--turquoise-bord);
  transition: transform var(--vite) var(--sortie), box-shadow var(--vite) ease;
}
.soutiens__grille li:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0, 106, 96, 0.14); }
.soutiens__grille img { max-width: 100%; max-height: 100%; object-fit: contain; }
.soutiens__mot { font-size: 12px; font-weight: 700; line-height: 1.3; text-align: center; color: var(--turquoise-encre); }
.soutiens__ue { margin: auto 0 0; padding-top: 12px; border-top: 1px dashed var(--turquoise-bord); font-size: 11.5px; line-height: 1.55; color: var(--turquoise-encre); }
@media (max-width: 960px) { .honneur { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .honneur__liste { grid-template-columns: 1fr; } .honneur__cadre { padding: 28px 22px; } .soutiens__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .honneur__liste li { opacity: 1; transform: none; transition: none; } }


/* --------------------------------- Plan des chapiteaux : deux grandes actions */
.plan-barre--deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 26px 0 18px; }
.plan-action {
  display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: var(--r-m); text-decoration: none; text-align: left;
  border: 2px solid transparent; cursor: pointer; font: inherit;
  transition: transform var(--vite) var(--sortie), box-shadow var(--vite) ease, border-color var(--vite) ease, background var(--vite) ease;
}
.plan-action:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(16, 15, 24, 0.14); }
.plan-action--aide { background: var(--turquoise-pale); border-color: var(--turquoise-bord); color: var(--turquoise-nuit); }
.plan-action--aide:hover { border-color: var(--turquoise); }
.plan-action--plein { background: var(--rose); border-color: var(--rose); color: #fff; }
.plan-action--plein:hover { background: var(--rose-fonce); border-color: var(--rose-fonce); }
.plan-action__ico {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--titre); font-size: 24px; line-height: 1;
}
.plan-action--aide .plan-action__ico { background: var(--turquoise); color: #fff; }
.plan-action--plein .plan-action__ico { background: rgba(255, 255, 255, 0.2); color: #fff; }
.plan-action__txt { display: flex; flex-direction: column; gap: 2px; }
.plan-action__txt b { font-size: 16px; }
.plan-action__txt small { font-size: 12.5px; opacity: 0.85; }
@media (max-width: 640px) { .plan-barre--deux { grid-template-columns: 1fr; } }


/* ==================================================== Page contact */
.contact-grille { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: 26px; align-items: start; }
.champ--antispam input { max-width: 320px; }
.contact-infos { display: flex; flex-direction: column; gap: 16px; }
.fiche-contact { background: var(--blanc); border: 1px solid var(--sable-bord); border-radius: var(--r-l); padding: 24px 26px; }
.fiche-contact--rose { background: var(--rose-pale); border-color: var(--rose-bord); }
.fiche-contact__oeil { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose-encre); }
.fiche-contact__oeil--turquoise { color: var(--turquoise-encre); }
.fiche-contact__nom { font-family: var(--titre); font-size: 21px; line-height: 1.2; color: var(--encre); margin: 10px 0 0; }
.fiche-contact__liste { margin: 16px 0 0; display: flex; flex-direction: column; }
.fiche-contact__liste > div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 9px 0; border-top: 1px dashed var(--rose-bord); align-items: baseline; }
.fiche-contact__liste > div:first-child { border-top: 0; padding-top: 0; }
.fiche-contact__liste dt { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gris); }
.fiche-contact__liste dd { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--encre); }
.fiche-contact__liste dd a { color: var(--rose-encre); }
.fiche-contact__tel { display: inline-block; margin-top: 10px; font-family: var(--titre); font-size: 26px; color: var(--turquoise-encre) !important; text-decoration: none; }
.fiche-contact__note { font-size: 13.5px; line-height: 1.6; color: var(--texte-doux); margin: 10px 0 0; }

/* carte pleine largeur */
.carte-large { position: relative; margin-top: 26px; height: clamp(320px, 42vw, 460px); }
.carte-large__cadre { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.carte-large__bouton {
  position: absolute; right: 18px; bottom: 22px; z-index: 500;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: var(--r-pill);
  background: var(--rose); color: #fff !important; font-size: 14px; font-weight: 600; text-decoration: none;
  box-shadow: 0 12px 28px rgba(120, 20, 66, 0.35);
}
.carte-large__bouton:hover { background: var(--rose-fonce); }
@media (max-width: 980px) { .contact-grille { grid-template-columns: 1fr; } }


/* fiches d'appel de la page contact */
.fiche-gaie {
  display: flex; gap: 16px; align-items: flex-start; padding: 22px 24px; border-radius: var(--r-l);
  transition: transform var(--vite) var(--sortie), box-shadow var(--vite) ease;
}
.fiche-gaie:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(16, 15, 24, 0.12); }
.fiche-gaie--turquoise { background: var(--turquoise-pale); border: 1px solid var(--turquoise-bord); }
.fiche-gaie--rose { background: var(--rose-pale); border: 1px solid var(--rose-bord); }
.fiche-gaie__pastille {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--turquoise); color: #fff; font-family: var(--mono); font-size: 12px;
  box-shadow: 0 6px 16px rgba(0, 106, 96, 0.22);
}
.fiche-gaie--rose .fiche-gaie__pastille { background: var(--rose); box-shadow: 0 6px 16px rgba(232, 64, 144, 0.28); }
.fiche-gaie__oeil { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--turquoise-encre); }
.fiche-gaie--rose .fiche-gaie__oeil { color: var(--rose-encre); }
.fiche-gaie__titre { font-family: var(--titre); font-size: 20px; line-height: 1.2; color: var(--encre); margin: 8px 0 0; }
.fiche-gaie__note { font-size: 13.5px; line-height: 1.6; color: var(--texte-doux); margin: 8px 0 0; }
.fiche-gaie__tel { display: inline-block; margin-top: 10px; font-family: var(--titre); font-size: 24px; color: var(--turquoise-encre) !important; text-decoration: none; }
.fiche-gaie__tel:hover { color: var(--turquoise) !important; }


/* repère de la foire sur la carte */
.repere-foire { display: flex; align-items: flex-end; gap: 10px; }
/* variante discrète (carte d'itinéraire) : petite goutte, étiquette décalée en haut à droite hors du tracé */
.repere-foire--discret { position: relative; display: block; width: 44px; height: 44px; }
.repere-foire--discret .repere-foire__goutte { width: 40px; height: 40px; border-width: 2px; animation: none; }
.repere-foire--discret .repere-foire__goutte img { width: 22px; height: 22px; }
.repere-foire--discret .repere-foire__texte { position: absolute; left: 30px; bottom: 52px; margin: 0; width: 176px; padding: 7px 11px; font-size: 10.5px; white-space: nowrap; }
.repere-foire--discret .repere-foire__texte b { font-size: 13px; }
.repere-foire--discret .repere-foire__texte::after { content: ''; position: absolute; left: 6px; bottom: -10px; width: 2px; height: 12px; background: var(--rose); }
.repere-foire__goutte {
  position: relative; flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50% 50% 50% 4px;
  transform: rotate(-45deg); background: var(--rose); border: 3px solid #fff;
  box-shadow: 0 10px 24px rgba(120, 20, 66, 0.45); display: flex; align-items: center; justify-content: center;
}
.repere-foire__goutte { animation: repereBat 3.6s ease-in-out infinite; }
.repere-foire__goutte img { width: 34px; height: 34px; object-fit: contain; transform: rotate(45deg); filter: brightness(0) invert(1); }
@keyframes repereBat { 0%, 100% { transform: rotate(-45deg) translate(0, 0); } 50% { transform: rotate(-45deg) translate(3px, -3px); } }
@media (prefers-reduced-motion: reduce) { .repere-foire__goutte { animation: none; } }
.repere-foire__texte {
  display: flex; flex-direction: column; gap: 2px; max-width: 196px; padding: 9px 14px; margin-bottom: 6px;
  background: var(--creme); border-radius: var(--r-s); box-shadow: 0 10px 24px rgba(16, 15, 24, 0.28);
  font-size: 11.5px; line-height: 1.35; color: var(--gris); white-space: normal;
}
.repere-foire__texte b { font-family: var(--titre); font-weight: 400; font-size: 15px; color: var(--encre); }
@media (max-width: 560px) { .repere-foire__texte { display: none; } }






/* plan officiel : image à gauche, texte à droite */
.plan-officiel--deux { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; overflow: hidden; }
.plan-officiel--deux .plan-vue--paysage { aspect-ratio: 2400 / 1369 !important; height: auto; min-height: 0; border-radius: 0; align-self: stretch; }
.plan-officiel--deux .plan-vue--paysage img { object-fit: cover; }
.plan-officiel__texte { padding: 22px 26px !important; display: flex; flex-direction: column; }
.plan-officiel__texte .titre-m { font-size: 19px !important; }
.plan-officiel__texte p[style*="font-size:14.5px"] { font-size: 13.5px !important; line-height: 1.55 !important; margin-top: 8px !important; }
.plan-officiel__chiffres { margin-top: 12px !important; }
.plan-officiel__chiffres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; margin-top: 18px; }
@media (max-width: 900px) { .plan-officiel--deux { grid-template-columns: 1fr; } .plan-officiel--deux .plan-vue--paysage { min-height: 0; aspect-ratio: 4 / 3 !important; } }

/* cartons : sous le plan */
.fiche__sous { grid-column: 1; display: flex; flex-direction: column; gap: 14px; }
.fiche__memo { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fiche__etape { align-self: stretch; }
.fiche__memo li { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; background: var(--blanc); border: 1px solid var(--sable-bord); border-radius: var(--r-s); }
.fiche__memo b { font-size: 13.5px; color: var(--encre); }
.fiche__memo span { font-size: 12.5px; line-height: 1.5; color: var(--texte-doux); }
@media (max-width: 560px) { .fiche__memo { grid-template-columns: 1fr; } }


main { position: relative; }
.page-compacte .guide { position: relative; z-index: 1; }
.page-compacte .ancres { position: sticky; }



/* ------------------------------------------- Programme : sélecteur des jours */
.jours {
  position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
  padding: 10px; border-radius: 26px; background: var(--sable); border: 1px solid var(--sable-bord);
}
.jours__curseur {
  position: absolute; top: 10px; left: 10px; height: calc(100% - 20px); width: 0; border-radius: 18px;
  background: var(--rose); box-shadow: 0 16px 34px rgba(232, 64, 144, 0.35);
  transition: transform 460ms var(--sortie), width 460ms var(--sortie); pointer-events: none;
}
.jour {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 20px 14px 18px; border-radius: 18px; background: transparent; border: 0; cursor: pointer; font: inherit;
  transition: transform var(--vite) var(--sortie), color var(--moyen) ease;
}
.jour:hover { transform: translateY(-3px); }
.jour__nom { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris); }
.jour__num { font-family: var(--titre); font-size: 64px; line-height: 0.95; color: var(--encre); margin: 6px 0 4px; }
.jour__theme { font-size: 14px; font-weight: 600; color: var(--texte-doux); text-align: center; text-wrap: balance; }
.jour__h { margin-top: 10px; font-family: var(--mono); font-size: 11.5px; color: var(--gris); padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.7); }
.jour[aria-selected="true"] .jour__nom, .jour[aria-selected="true"] .jour__theme { color: rgba(255, 255, 255, 0.9); }
.jour[aria-selected="true"] .jour__num { color: #fff; }
.jour[aria-selected="true"] .jour__h { color: #fff; background: rgba(255, 255, 255, 0.2); }
.jour[aria-selected="true"] .jour__nom, .jour[aria-selected="true"] .jour__theme, .jour[aria-selected="true"] .jour__num, .jour[aria-selected="true"] .jour__h { transition: color var(--moyen) ease, background var(--moyen) ease; }

.jours__nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 18px 0 26px; }
.jours__etat { font-family: var(--titre); font-size: 24px; color: var(--encre); }
.jours__fleche {
  font: inherit; font-size: 13.5px; font-weight: 700; color: var(--rose-encre); background: var(--rose-pale);
  border: 1px solid var(--rose-bord); border-radius: 999px; padding: 9px 16px; cursor: pointer;
  transition: transform var(--vite) var(--sortie), background var(--vite) ease;
}
.jours__fleche:hover { transform: translateY(-2px); background: var(--rose); color: #fff; border-color: var(--rose); }
.jours__fleche:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }

.agenda[data-panneau] { animation: agendaEntre 420ms var(--sortie) both; }
@keyframes agendaEntre { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .jours { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jour__num { font-size: 48px; }
}
@media (max-width: 480px) {
  .jours__etat { font-size: 19px; }
  .jours__fleche { padding: 8px 12px; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) { .jours__curseur { transition: none; } .agenda[data-panneau] { animation: none; } }


/* ---------------------------------- Programme : sélecteur de jours coloré */
.jours { background: linear-gradient(135deg, var(--rose-pale), var(--turquoise-pale)); border-color: transparent; }
.jour__nom { color: var(--rose-encre); }
.jour__num { color: var(--encre); }
.jour__theme { color: var(--texte); }
.jour__h { background: rgba(255, 255, 255, 0.85); color: var(--turquoise-encre); }
.jour:nth-child(3) .jour__nom, .jour:nth-child(5) .jour__nom { color: var(--turquoise-encre); }
.jours__etat { color: var(--rose); }

/* ---------------------------------- Programme : filtres par type d'activité */
.activites { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 22px; }
.activites__lib { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gris); margin-right: 6px; }
.activite {
  --c: var(--encre); --cp: var(--sable);
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 999px;
  font: inherit; font-size: 13.5px; font-weight: 700; color: var(--c); background: var(--blanc);
  border: 1.5px solid var(--sable-bord); cursor: pointer;
  transition: transform var(--vite) var(--sortie), background var(--vite) ease, border-color var(--vite) ease, color var(--vite) ease;
}
.activite i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: 0 0 auto; }
.activite em { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--gris); }
.activite:hover { transform: translateY(-2px); border-color: var(--c); }
.activite.actif { background: var(--c); border-color: var(--c); color: #fff; }
.activite.actif i { background: rgba(255, 255, 255, 0.85); }
.activite.actif em { color: rgba(255, 255, 255, 0.85); }
.activite--concours { --c: var(--turquoise); }
.activite--animation { --c: var(--rose); }
.activite--degustation { --c: #b8860b; }
.activite--soiree { --c: var(--encre); }
.activite--foire { --c: #7a5c3a; }
.activite:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

/* ---------------------------------- Programme : agenda aux couleurs de la foire */
.agenda { border: 0; box-shadow: var(--ombre-m); }
.agenda__ligne { position: relative; padding-left: 34px; border-bottom: 1px solid var(--sable); transition: background var(--vite) ease, transform var(--vite) var(--sortie); }
.agenda__ligne::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--sable-bord); }
.agenda__ligne[data-type="concours"]::before { background: var(--turquoise); }
.agenda__ligne[data-type="animation"]::before { background: var(--rose); }
.agenda__ligne[data-type="degustation"]::before { background: #d4a017; }
.agenda__ligne[data-type="soiree"]::before { background: var(--encre); }
.agenda__ligne[data-type="foire"]::before { background: #a67c52; }
.agenda__ligne:hover { background: var(--creme); transform: translateX(4px); }
.agenda__heure { display: inline-flex; align-items: center; justify-content: center; min-width: 96px; padding: 8px 12px; border-radius: 12px; font-size: 20px; background: var(--sable); color: var(--encre); }
.agenda__ligne[data-type="concours"] .agenda__heure { background: var(--turquoise-pale); color: var(--turquoise-encre); }
.agenda__ligne[data-type="animation"] .agenda__heure { background: var(--rose-pale); color: var(--rose-encre); }
.agenda__ligne[data-type="degustation"] .agenda__heure { background: #fbf1d3; color: #7a5a00; }
.agenda__ligne[data-type="soiree"] .agenda__heure { background: var(--encre); color: #fff; }
.agenda__ligne[data-type="soiree"] { background: linear-gradient(90deg, var(--rose-pale), transparent 60%); }
.agenda__ligne.masque { display: none; }
.agenda__vide { margin: 0; padding: 26px 28px; font-size: 15px; color: var(--texte-doux); background: var(--creme); }
.agenda__pied { background: linear-gradient(90deg, var(--rose-pale), var(--turquoise-pale)); }
@media (max-width: 700px) { .agenda__heure { min-width: 0; font-size: 17px; } .activites__lib { width: 100%; margin: 0 0 2px; } }


/* agenda compact sous 1180 px : l'étiquette s'aligne à droite de l'heure, sur la même rangée */
@media (max-width: 1180px) {
  .agenda__ligne { grid-template-columns: auto 1fr auto; gap: 6px 16px; align-items: center; }
  .agenda__etiq { grid-column: auto; justify-content: flex-end; }
}
@media (max-width: 700px) {
  .agenda__ligne { grid-template-columns: auto 1fr; gap: 6px 12px; }
  .agenda__etiq { display: none; }
}


/* --------------------------------------------- Programme : les concours */
.konk-tete { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 34px; align-items: end; }
.konk-tete__texte { font-size: 16.5px; line-height: 1.7; color: var(--texte-doux); margin: 0; text-wrap: pretty; }
/* rangées centrées : une dernière rangée incomplète se place au milieu */
.konk-grille { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-top: 34px; }
.konk-grille > .konk { flex: 0 0 calc((100% - 3 * 18px) / 4); min-width: 0; }
.konk {
  position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-l);
  background: var(--blanc); box-shadow: var(--ombre-s); border-top: 5px solid var(--turquoise);
  transition: transform var(--moyen) var(--sortie), box-shadow var(--moyen) ease;
}
.konk--produit { border-top-color: var(--rose); }
.konk:hover { transform: translateY(-5px); box-shadow: var(--ombre-m); }
.konk__photo { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.konk__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.konk__corps { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.konk__quand { display: flex; align-items: baseline; gap: 8px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.konk__quand b { color: var(--turquoise-encre); }
.konk--produit .konk__quand b { color: var(--rose-encre); }
.konk__quand span { font-family: var(--mono); font-size: 11.5px; color: var(--gris); text-transform: none; letter-spacing: 0; }
.konk__titre { font-family: var(--titre); font-size: 20px; font-weight: 400; line-height: 1.2; color: var(--encre); margin: 0; }
.konk__lieu { font-size: 13px; color: var(--gris); margin: auto 0 0; }
.konk-pied { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; margin-top: 24px; font-size: 13.5px; color: var(--texte-doux); }
.konk-pied__item { display: inline-flex; align-items: center; gap: 8px; }
.konk-pied__pt { width: 12px; height: 12px; border-radius: 50%; background: var(--turquoise); }
.konk-pied__pt--produit { background: var(--rose); }
.konk-pied__item--prix { margin-left: auto; font-weight: 700; color: var(--encre); padding: 8px 14px; border-radius: 999px; background: var(--blanc); box-shadow: var(--ombre-s); }
@media (max-width: 1100px) { .konk-grille > .konk { flex-basis: calc((100% - 18px) / 2); } .konk-tete { grid-template-columns: 1fr; gap: 16px; } }
@media (max-width: 520px) { .konk-grille > .konk { flex-basis: 100%; } .konk-pied__item--prix { margin-left: 0; } }


/* ===========================================================================
   Héros « village illustré » — page de test index-2
   Un seul héros : l'illustration occupe tout le cadre. Le texte n'utilise que
   les deux zones sans détail — le ciel en haut, la rivière en bas — dégradées
   comme une ombre de nuage et un reflet d'eau. Le centre (panneaux, église,
   massifs, pont) n'est jamais couvert.
   ======================================================================== */
.heros--village { position: relative; isolation: isolate; overflow: clip; padding: 0; background: var(--rose); }
.heros--village > .rond { display: none; }
.heros-village__fond { position: absolute; inset: 0; z-index: -3; display: block; }
.heros-village__fond img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 56%; display: block; }
/* ombre de ciel et reflet d'eau : deux dégradés, aucune carte opaque */
.heros-village__ciel {
  position: absolute; inset: -10% -22% auto; height: 78%; z-index: -2; pointer-events: none;
  background: radial-gradient(48% 58% at 50% 32%, rgba(11, 22, 42, 0.62) 0%,
    rgba(12, 24, 44, 0.55) 24%, rgba(13, 26, 47, 0.42) 44%, rgba(15, 29, 51, 0.26) 62%,
    rgba(16, 31, 54, 0.12) 78%, rgba(18, 34, 58, 0.04) 90%, rgba(18, 34, 58, 0) 100%);
}
.heros-village__riviere {
  position: absolute; inset: auto -22% -12%; height: 66%; z-index: -2; pointer-events: none;
  background: radial-gradient(50% 56% at 50% 70%, rgba(76, 10, 42, 0.64) 0%,
    rgba(84, 12, 48, 0.57) 24%, rgba(98, 15, 55, 0.44) 44%, rgba(118, 19, 65, 0.28) 62%,
    rgba(134, 22, 74, 0.13) 78%, rgba(150, 26, 80, 0.04) 90%, rgba(150, 26, 80, 0) 100%);
}
.heros--village .heros-village__scene {
  position: relative; z-index: 1;
  display: grid; grid-template-rows: auto 1fr auto;
  min-height: clamp(580px, 54vw, 842px);
  padding-top: clamp(22px, 3vw, 40px); padding-bottom: clamp(18px, 2.2vw, 30px);
}
/* la vachette se détache du texte : posée dans le ciel, à droite */
.heros-village__vachette {
  position: relative; z-index: 2; margin: clamp(22px, 2.6vw, 36px) auto 0;
  width: clamp(118px, 9.4vw, 148px);
  animation: vachetteFlotte 9s ease-in-out infinite;
}
.heros-village__vachette .halo--tirets { inset: -6px; }
@keyframes vachetteFlotte {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
@media (prefers-reduced-motion: reduce) { .heros-village__vachette { animation: none; } }
/* --- arc de médaillons photo autour de la vachette ---
   Quatre vues apparaissent l'une après l'autre sur un arc sous la vachette,
   restent visibles, s'effacent, puis reviennent avec d'autres photos. */
.vues-arc {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 1;
  pointer-events: none;
}
.vue {
  --rayon: clamp(152px, 15.2vw, 240px);
  --taille: clamp(120px, 11.6vw, 178px);
  position: absolute; margin: 0; left: 0; top: 0;
  width: var(--taille); height: var(--taille); margin-left: calc(var(--taille) / -2); margin-top: calc(var(--taille) / -2);
  border-radius: 50%; overflow: hidden;
  background: var(--creme); border: 4px solid rgba(253, 250, 245, 0.95);
  box-shadow: 0 16px 34px rgba(10, 20, 38, 0.36);
  transform: rotate(var(--angle)) translate(var(--rayon)) rotate(calc(var(--angle) * -1)) scale(0.7);
  opacity: 0;
  transition: opacity 700ms var(--sortie), transform 700ms var(--sortie);
}
.vue img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vue.visible {
  opacity: 1;
  transform: rotate(var(--angle)) translate(var(--rayon)) rotate(calc(var(--angle) * -1)) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .vue { transition: opacity 400ms ease, transform 400ms ease; }
}
@media (max-width: 1100px) { .vue { --rayon: clamp(132px, 14vw, 190px); --taille: clamp(104px, 10.6vw, 140px); } }
@media (max-width: 760px) { .vues-arc { display: none; } }

/* --- ciel : étiquettes, titre, dates --- */
.heros-village__haut {
  position: relative; grid-row: 1; justify-self: center; text-align: center; width: min(100%, 700px);
}
/* halo sombre diffus, sans bord visible : il porte le texte sans faire de carte */
.heros-village__haut::before {
  content: ""; position: absolute; inset: -110px -60% -120px; z-index: -1; pointer-events: none;
  background: radial-gradient(38% 42% at 50% 50%, rgba(10, 20, 40, 0.42) 0%,
    rgba(10, 20, 40, 0.33) 30%, rgba(11, 22, 42, 0.2) 52%, rgba(12, 24, 44, 0.09) 72%,
    rgba(12, 24, 44, 0.025) 86%, rgba(12, 24, 44, 0) 100%);
}
.heros--village .heros__etiquettes { position: static; top: auto; justify-content: center; margin: 0 0 14px; }
.heros--village .heros__titre {
  margin: 0; color: #fff; font-size: clamp(31px, 4.1vw, 58px); line-height: 1.03;
  text-shadow: 0 2px 14px rgba(10, 20, 38, 0.5);
}
.heros-village__dates {
  margin: 16px 0 0; display: flex; flex-direction: column; gap: 2px; align-items: center; color: #fff;
}
.heros-village__dates b { font-family: var(--titre); font-weight: 400; font-size: clamp(19px, 1.7vw, 26px); }
.heros-village__dates span { font-size: 13.5px; letter-spacing: 0.07em; text-transform: uppercase; color: rgba(255, 255, 255, 0.95); }
/* --- rivière : vachette et accroches, alignés sur la largeur de la page --- */
.heros-village__bas { position: relative; grid-row: 3; }
.heros-village__bas::before {
  content: ""; position: absolute; inset: -100px -56% -110px; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 44% at 50% 50%, rgba(76, 10, 42, 0.44) 0%,
    rgba(84, 12, 48, 0.35) 30%, rgba(98, 15, 55, 0.22) 52%, rgba(118, 19, 65, 0.1) 72%,
    rgba(134, 22, 74, 0.025) 86%, rgba(150, 26, 80, 0) 100%);
}
.heros--village .medaillon-halo, .heros--village .medaillon { width: clamp(118px, 9.4vw, 148px); height: clamp(118px, 9.4vw, 148px); }
.heros--village .medaillon { box-shadow: 0 16px 34px rgba(10, 20, 38, 0.34); }
.heros-village__accroches { display: flex; flex-direction: column; align-items: center; }
.heros--village .heros__chapeau, .heros--village .heros__chapeau--defile {
  margin: 0 auto; max-width: 62ch; text-align: center;
}
.heros--village .slogan {
  color: #fff; font-size: clamp(16px, 1.32vw, 19px); line-height: 1.62;
  text-align: center; text-wrap: pretty;
}
/* pastilles allongées, centrées : la sélectionnée s'étire */
.heros--village .slogan-points { justify-content: center; gap: 9px; margin-top: 20px; }
.heros--village .slogan-points button {
  width: 26px; height: 6px; border-radius: 3px; border: 0; padding: 0; cursor: pointer;
  background: rgba(255, 255, 255, 0.42);
  transition: width 320ms var(--sortie), background 220ms ease;
}
.heros--village .slogan-points button:hover { background: rgba(255, 255, 255, 0.7); }
.heros--village .slogan-points button.actif { width: 52px; background: #fff; }

@media (max-width: 1100px) {
  .heros-village__fond img { object-position: 52% 58%; }
  .heros-village__haut { width: min(100%, 520px); }
  .heros-village__vachette { margin-top: clamp(18px, 2.2vw, 28px); }
}
/* --- smartphone : l'illustration entière en haut, le texte sur l'aplat rosé --- */
@media (max-width: 760px) {
  .heros-village__fond { inset: 0 0 auto 0; height: clamp(215px, 57vw, 320px); }
  .heros-village__fond img { object-position: 50% 62%; }
  .heros-village__ciel {
    inset: 0 0 auto 0; height: clamp(215px, 57vw, 320px);
    background: linear-gradient(180deg, rgba(14, 26, 48, 0.4) 0%, rgba(14, 26, 48, 0) 62%);
  }
  .heros-village__riviere {
    inset: clamp(215px, 57vw, 320px) 0 0 0; height: auto;
    background: linear-gradient(180deg, rgba(150, 26, 80, 0.98), rgba(199, 40, 113, 0.97));
  }
  .heros--village .heros-village__scene {
    display: flex; flex-direction: column; gap: 20px; min-height: 0;
    padding-top: calc(clamp(215px, 57vw, 320px) + 22px); padding-bottom: 30px;
  }
  .heros-village__haut { width: 100%; }
  .heros--village .heros__titre { font-size: 28px; text-shadow: none; }
  .heros-village__haut::before, .heros-village__bas::before { display: none; }
  .heros-village__vachette { margin: 18px auto 0; animation: none; }
  .heros-village__bas { display: flex; flex-direction: column; align-items: center; gap: 16px; }
  .heros--village .slogan { text-align: center; font-size: 15px; }
  .heros--village .slogan-points { justify-content: center; }
}


/* ===========================================================================
   Héros « panneau à lamelles » — page de test index-3
   Un grand tableau d'affichage : la photo bascule par lattes, comme les
   anciens panneaux de gare. Les images restent entières et lisibles.
   ======================================================================== */
.heros--tableau {
  position: relative; overflow: clip; color: #fff;
  padding: clamp(40px, 4.4vw, 74px) 0 clamp(42px, 4.6vw, 78px);
  background: linear-gradient(126deg, var(--rose-fonce) 0%, var(--rose) 46%, #f0559b 100%);
}
.heros--tableau > .roue-bandes, .heros--tableau > .rond { clip-path: inset(0); }
.roue-bandes {
  position: absolute; inset: -20% -10%; pointer-events: none; opacity: 0.5;
  background: repeating-linear-gradient(118deg, rgba(255, 255, 255, 0.075) 0 22px, rgba(255, 255, 255, 0) 22px 66px);
}
.heros-tableau {
  position: relative; display: grid; grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  align-items: center; gap: clamp(24px, 3vw, 48px);
}
/* la date, seule sur sa ligne sous le titre */
.heros-tableau__quand {
  display: flex; flex-direction: column; gap: 6px; margin: clamp(20px, 2.2vw, 30px) 0 0;
  padding-left: 16px; border-left: 3px solid var(--creme);
}
.heros-tableau__quand b {
  font-family: var(--titre); font-weight: 400; color: #fff;
  font-size: clamp(20px, 1.9vw, 28px); line-height: 1.2; text-wrap: balance;
}
.heros-tableau__quand .ou { font-size: 12.5px; letter-spacing: 0.07em; text-transform: uppercase; color: rgba(255, 255, 255, 0.88); }
/* la vachette à gauche des accroches */
.heros-tableau__bas { display: flex; align-items: center; gap: clamp(18px, 2vw, 28px); margin-top: clamp(26px, 3vw, 40px); }
.heros-tableau__bas .medaillon-halo,
.heros-tableau__bas .medaillon { width: clamp(130px, 11.6vw, 172px); height: clamp(130px, 11.6vw, 172px); flex: none; }
.heros-tableau__accroches { min-width: 0; flex: 1 1 auto; }
.heros--tableau .heros__etiquettes { gap: 8px; }
.heros--tableau .heros__etiquettes { position: static; top: auto; margin: 0 0 16px; }
.heros--tableau .heros__titre {
  margin: clamp(18px, 2vw, 28px) 0 0; color: #fff;
  font-size: clamp(30px, 3.2vw, 48px); line-height: 1.06; text-wrap: balance;
}
.heros--tableau .heros__chapeau--defile { margin: 0; }
.heros--tableau .slogan { font-size: 15.5px; line-height: 1.6; }
.heros--tableau .slogan-points { margin-top: 10px; }

/* ---- le bloc images : une carte crème, vignettes intégrées ---- */
.tableau { display: flex; flex-direction: column; gap: 14px; min-width: 0; justify-self: stretch; width: 100%; }
.poste {
  position: relative; padding: 10px; border-radius: 22px;
  background: var(--creme);
  box-shadow: 0 28px 58px rgba(29, 16, 24, 0.36), inset 0 0 0 1px rgba(163, 36, 95, 0.1);
}

.tableau__cadre {
  position: relative; aspect-ratio: 3 / 2; border-radius: 13px; overflow: hidden;
  background: #241019; isolation: isolate;
  box-shadow: inset 0 0 0 1px rgba(29, 16, 24, 0.5), inset 0 2px 14px rgba(0, 0, 0, 0.45);
}
/* deux couches d'image qui se croisent : fondu et léger recul, uniquement en GPU */
.couche {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0; transform: scale(1.045); will-change: opacity, transform;
  transition: opacity 900ms ease, transform 6200ms linear;
}
.couche.vue-active { opacity: 1; transform: scale(1); }

.tableau__jauge {
  position: absolute; left: 0; top: 0; z-index: 4; height: 3px; width: 0;
  background: linear-gradient(90deg, rgba(253, 250, 245, 0.5), #fff);
  border-radius: 0 3px 3px 0;
}
.tableau__jauge.court { width: 100%; transition: width 6000ms linear; }
/* le bandeau de légende, posé en bas de la dalle */
.tableau__bandeau {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end;
  gap: clamp(12px, 1.4vw, 20px); padding: clamp(14px, 1.6vw, 22px) clamp(15px, 1.7vw, 24px);
  background: linear-gradient(0deg, rgba(20, 10, 16, 0.92) 0%, rgba(20, 10, 16, 0.7) 60%, rgba(20, 10, 16, 0) 100%);
}
.tableau__num {
  font-family: var(--mono); font-size: 12px; line-height: 1; letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.72); display: block; margin-bottom: 7px;
}
.tableau__num i { font-style: normal; color: rgba(255, 255, 255, 0.42); }
.tableau__nom {
  margin: 0; font-family: var(--titre); font-weight: 400; color: #fff;
  font-size: clamp(19px, 1.9vw, 27px); line-height: 1.12;
}
.tableau__meta { margin: 4px 0 0; font-size: clamp(12px, 1vw, 14px); color: rgba(255, 255, 255, 0.8); }
.tableau__lien {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  padding: 10px 16px; border-radius: var(--r-pill);
  background: var(--creme); color: var(--encre); text-decoration: none;
  font-size: 14px; font-weight: 600;
  transition: transform var(--vite) var(--sortie), background var(--moyen) ease;
}
.tableau__lien:hover { transform: translateX(3px); background: #fff; }
.tableau__nom, .tableau__meta { transition: opacity 320ms ease, transform 320ms ease; }
.tableau.bascule .tableau__nom, .tableau.bascule .tableau__meta { opacity: 0; transform: translateY(7px); }

@media (prefers-reduced-motion: reduce) {
  .couche { transition: opacity 260ms ease; transform: none; }
  .couche.vue-active { transform: none; }
}

/* ---- le rail d'onglets ---- */
.tableau__rail {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(5px, 0.6vw, 8px); padding: 10px 2px 2px;
}
.rail__onglet {
  display: flex; flex-direction: column; gap: 5px; padding: 0; border: 0; cursor: pointer;
  background: none; color: var(--texte-doux); text-align: left; min-width: 0;
  transition: color var(--moyen) ease, transform var(--vite) var(--sortie);
}
.rail__vignette {
  display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: 8px;
  background-size: cover; background-position: center; will-change: filter;
  box-shadow: inset 0 0 0 1px rgba(29, 16, 24, 0.12);
  filter: saturate(0.6) brightness(0.94) contrast(0.96); opacity: 0.68;
  transition: filter var(--moyen) ease, box-shadow var(--moyen) ease, opacity var(--moyen) ease;
}
.rail__nom {
  font-size: clamp(10px, 0.78vw, 11.5px); font-weight: 600; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rail__onglet:hover { transform: translateY(-2px); color: var(--encre); }
.rail__onglet:hover .rail__vignette { filter: none; opacity: 0.9; }
.rail__onglet.actif { color: var(--encre); }
.rail__onglet.actif .rail__vignette {
  filter: none; opacity: 1;
  box-shadow: 0 0 0 2px var(--rose), 0 6px 14px rgba(29, 16, 24, 0.22);
}

@media (prefers-reduced-motion: reduce) {
  .volet { transition-duration: 240ms; transition-delay: 0ms; }
}
@media (max-width: 980px) {
  .heros-tableau { grid-template-columns: 1fr; }
  .heros-tableau__bas { flex-wrap: wrap; }
  .heros--tableau .heros__etiquettes { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .tableau__cadre { aspect-ratio: 4 / 3; }
  .tableau__bandeau { grid-template-columns: auto minmax(0, 1fr); row-gap: 10px; }
  .tableau__lien { grid-column: 2; justify-self: start; }
  .tableau__rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* index-3 : le bloc images occupe davantage de place que la colonne de texte */
.heros-accueil:has(.tableau) { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; }
@media (max-width: 980px) { .heros-accueil:has(.tableau) { grid-template-columns: 1fr; } }


/* Aperçu du plan : tout le cadre est cliquable pour passer en plein écran ---- */
.plan-cadre--apercu { position: relative; }
.plan-cadre--apercu iframe { pointer-events: none; }
.plan-voile {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
  width: 100%; border: 0; padding: 0; cursor: zoom-in; border-radius: inherit;
  background: linear-gradient(180deg, rgba(29, 24, 25, 0.06), rgba(29, 24, 25, 0.34));
  transition: background var(--moyen) ease;
}
.plan-voile:hover, .plan-voile:focus-visible { background: linear-gradient(180deg, rgba(29, 24, 25, 0.12), rgba(29, 24, 25, 0.46)); }
.plan-voile__pastille {
  display: grid; justify-items: center; gap: 4px; text-align: center;
  padding: 22px 34px; border-radius: var(--r-l);
  background: var(--blanc); box-shadow: 0 22px 52px rgba(29, 24, 25, 0.34);
  transition: transform var(--moyen) var(--sortie);
  animation: planAppel 3.4s ease-in-out infinite;
}
.plan-voile:hover .plan-voile__pastille, .plan-voile:focus-visible .plan-voile__pastille { transform: scale(1.04); animation: none; }
.plan-voile__ico {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--rose); color: #fff; font-size: 24px; box-shadow: var(--ombre-rose);
}
.plan-voile__pastille b { font-family: var(--titre); font-weight: 400; font-size: 21px; color: var(--encre); }
.plan-voile__pastille small { font-size: 13.5px; color: var(--texte-doux); }
@keyframes planAppel {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}
@media (prefers-reduced-motion: reduce) { .plan-voile__pastille { animation: none; } }
@media (max-width: 700px) {
  .plan-voile__pastille { padding: 18px 22px; }
  .plan-voile__pastille b { font-size: 18px; }
  .plan-voile__pastille small { display: none; }
}


/* Carte de Coulommiers, à la place des photos du héros. Elle se dessine seule
   au chargement, puis s'efface pour laisser venir le diaporama. ---------- */
.pile-bloc { position: relative; }
@keyframes communeTrace { to { stroke-dashoffset: 0; } }
@keyframes communeParait { from { opacity: 0; } to { opacity: 1; } }

/* ══ Carte de Seine-et-Marne en ouverture du héros ═══════════════════════════
   À la place du diaporama, pleine taille : le département se dessine, puis
   Coulommiers, puis chaque ville repère avec sa distance, l'une après l'autre.
   Puis la carte s'efface et les tirages tombent. */
.pile-bloc { position: relative; }
.pile-bloc { display: flex; align-items: center; justify-content: flex-end; height: 100%; padding-top: 34px; }
.commune {
  position: relative; z-index: 4; flex: 0 0 auto; width: 160%; max-width: none;
  margin-left: auto; margin-right: -46%;
  aspect-ratio: 1180 / 960; pointer-events: none;
  animation: c77Respire 16s ease-in-out infinite 2.2s;
}
@media (max-width: 1449px) { .commune { width: 138%; margin-right: -28%; } }
@media (max-width: 1180px) { .commune { width: 100%; margin-right: 0; } }
@keyframes c77Respire {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(-0.5deg); }
}
.pile-polas[hidden] { display: none; }
.commune__svg { display: block; width: 100%; height: 100%; overflow: visible;
  filter: drop-shadow(0 20px 40px rgba(84, 12, 48, 0.28)); }
.c77__ombre {
  fill: rgba(84, 12, 48, 0.3); opacity: 0;
  transform: translate(12px, 18px); filter: blur(10px);
  animation: communeParait 600ms ease 420ms forwards;
}
.c77__dep { fill: url(#c77Fond); opacity: 0; animation: communeParait 520ms ease 380ms forwards; }
.c77__hachure { fill: url(#c77Hachure); opacity: 0; animation: communeParait 900ms ease 760ms forwards; }
.c77__trace {
  fill: none; stroke: var(--turquoise); stroke-width: 4.4; stroke-linejoin: round; stroke-linecap: round;
  filter: drop-shadow(0 0 7px rgba(0, 168, 152, 0.45));
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: communeTrace 0.95s linear 120ms forwards;
}
/* chaque liaison se trace depuis Coulommiers vers sa ville */
.c77__lien {
  stroke: rgba(232, 64, 144, 0.5); stroke-width: 2.6; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0;
  animation: c77Trait 620ms var(--sortie) var(--d, 0s) forwards;
}
.c77__lien--trace {
  stroke: #fff; stroke-width: 1.8; stroke-linecap: round; fill: none;
  stroke-dasharray: 0.04 0.035; opacity: 0;
  animation: communeParait 400ms ease var(--d, 0s) forwards, c77Defile 2.6s linear var(--d, 0s) infinite;
}
.c77__lien--t-paris   { --d: 2.1s; }
.c77__lien--t-meaux   { --d: 2.62s; }
.c77__lien--t-provins { --d: 3.14s; }
.c77__lien--t-sezanne { --d: 3.66s; }
.c77__lien--t-melun   { --d: 4.18s; }
@keyframes c77Defile { to { stroke-dashoffset: -0.075; } }
@keyframes c77Trait { 0% { opacity: 1; stroke-dashoffset: 1; } 100% { opacity: 1; stroke-dashoffset: 0; } }
.c77__pt { fill: var(--turquoise-encre); stroke: #fff; stroke-width: 4.5; opacity: 0; animation: c77Pop 480ms var(--sortie) var(--d, 0s) forwards; }
@keyframes c77Pop { 0% { opacity: 0; r: 2; } 60% { opacity: 1; r: 11; } 100% { opacity: 1; r: 8; } }
.c77__onde { fill: none; stroke: var(--turquoise); stroke-width: 3; opacity: 0; }
.c77__onde--paris   { animation: c77Cercle 3.6s ease-out infinite 2.6s; }
.c77__onde--meaux   { animation: c77Cercle 3.6s ease-out infinite 3.0s; }
.c77__onde--provins { animation: c77Cercle 3.6s ease-out infinite 3.4s; }
.c77__onde--sezanne { animation: c77Cercle 3.6s ease-out infinite 3.8s; }
.c77__onde--melun   { animation: c77Cercle 3.6s ease-out infinite 4.2s; }
@keyframes c77Cercle {
  0% { opacity: 0.65; r: 10; stroke-width: 3; }
  75% { opacity: 0; r: 34; stroke-width: 0.8; }
  100% { opacity: 0; r: 34; }
}
.c77__halo { fill: var(--rose); opacity: 0; animation: c77Bat 3s ease-out infinite 4.6s; }
.c77__hachure { animation: communeParait 900ms ease 760ms forwards, c77Derive 26s linear 1.6s infinite; }
@keyframes c77Derive { to { transform: translate(16px, 16px); } }
.c77__pt { transform-box: fill-box; transform-origin: center; }
.c77__pt--paris, .c77__pt--meaux, .c77__pt--provins,
.c77__pt--sezanne, .c77__pt--melun, .c77__pt--fontainebleau {
  animation: c77Pop 480ms var(--sortie) var(--d, 0s) forwards,
    c77Pulse 4s ease-in-out calc(var(--d, 0s) + 600ms) infinite;
}
@keyframes c77Pulse { 0%, 100% { r: 8; } 50% { r: 10.5; } }
.c77__chef { fill: var(--rose); stroke: #fff; stroke-width: 5; opacity: 0; animation: c77Pop 500ms var(--sortie) 4.2s forwards; }
@keyframes c77Bat { 0% { opacity: 0.4; r: 24; } 70% { opacity: 0; r: 64; } 100% { opacity: 0; r: 64; } }
/* Ordre d'entrée : les villes voisines l'une après l'autre, de Meaux à
   Sézanne, et Coulommiers en dernier — c'est lui le point d'arrivée. */
.c77__lien--meaux   { --d: 1.1s; }  .c77__pt--meaux   { --d: 1.36s; } .c77__cap--meaux   { --d: 1.46s; }
.c77__lien--paris   { --d: 1.5s; }  .c77__pt--paris   { --d: 1.76s; } .c77__cap--paris   { --d: 1.86s; }
.c77__lien--melun   { --d: 1.9s; }  .c77__pt--melun   { --d: 2.16s; } .c77__cap--melun   { --d: 2.26s; }
.c77__lien--fontainebleau { --d: 2.3s; } .c77__pt--fontainebleau { --d: 2.56s; } .c77__cap--fontainebleau { --d: 2.66s; }
.c77__lien--provins { --d: 2.7s; }  .c77__pt--provins { --d: 2.96s; } .c77__cap--provins { --d: 3.06s; }
.c77__lien--sezanne { --d: 3.1s; }  .c77__pt--sezanne { --d: 3.36s; } .c77__cap--sezanne { --d: 3.46s; }
.c77__lien--chessy  { --d: 3.5s; }  .c77__pt--chessy  { --d: 3.76s; } .c77__cap--chessy  { --d: 3.86s; }
.c77__lien--t-fontainebleau { --d: 4.7s; }
.c77__onde--fontainebleau { animation: c77Cercle 3.6s ease-out infinite 4.6s; }
/* le nom du département, au cœur de la silhouette */
/* deux médaillons ronds : les photos reviennent sans encombrer la carte */
.c77__vue {
  position: absolute; z-index: 2; display: block; border-radius: 50%; overflow: hidden;
  width: clamp(124px, 27%, 224px); aspect-ratio: 1;
  background: var(--creme);
  box-shadow: 0 12px 26px rgba(84, 12, 48, 0.3), 0 0 0 4px var(--creme), 0 0 0 5px rgba(0, 168, 152, 0.35);
  opacity: 0; animation: c77Vue 620ms var(--sortie) var(--d, 0s) forwards;
}
.c77__vue img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; animation: c77Defilement 13.5s ease-in-out infinite;
}
.c77__vue img { animation-duration: 10s; }
.c77__vue img:nth-child(2) { animation-delay: 5s; }
@keyframes c77Defilement3 { 0%, 28% { opacity: 1; } 33%, 95% { opacity: 0; } 100% { opacity: 1; } }
.c77__vue--a img, .c77__vue--b img, .c77__vue--c img { animation-name: c77Defilement3; animation-duration: 15s; }
.c77__vue--c img:nth-child(1) { animation-delay: 3.2s; }
.c77__vue--c img:nth-child(2) { animation-delay: 8.2s; }
.c77__vue--c img:nth-child(3) { animation-delay: 13.2s; }
.c77__vue--a img:nth-child(1) { animation-delay: 0s; }
.c77__vue--a img:nth-child(2) { animation-delay: 5s; }
.c77__vue--a img:nth-child(3) { animation-delay: 10s; }
.c77__vue--b img:nth-child(1) { animation-delay: 1.6s; }
.c77__vue--b img:nth-child(2) { animation-delay: 6.6s; }
.c77__vue--b img:nth-child(3) { animation-delay: 11.6s; }
.c77__vue--b img:nth-child(1) { animation-delay: 1.2s; }
.c77__vue--b img:nth-child(2) { animation-delay: 6.2s; }
.c77__vue--c img:nth-child(1) { animation-delay: 2.4s; }
.c77__vue--c img:nth-child(2) { animation-delay: 7.4s; }
.c77__vue--e img:nth-child(1) { animation-delay: 3.6s; }
.c77__vue--e img:nth-child(2) { animation-delay: 8.6s; }
@keyframes c77Defilement { 0%, 42% { opacity: 1; } 50%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes c77Vue { 0% { opacity: 0; scale: 0.82; } 100% { opacity: 1; scale: 1; } }
.c77__vue--petit { width: clamp(88px, 16%, 132px); }
.c77__vue--a { left: 0; top: 1%; --d: 1.9s; }
.c77__vue--e { right: 0; top: -15%; width: clamp(126px, 28%, 208px); --d: 2.3s; }
/* sur les écrans moyens la carte déborde davantage du héros : la sphère se
   rapproche pour ne pas être rognée par son bord */
@media (min-width: 1181px) and (max-width: 1449px) { .c77__vue--e { right: 5%; top: -21%; } }
.c77__vue--c { left: -11%; bottom: 10.5%; width: clamp(126px, 28%, 208px); --d: 2.7s; }
.c77__vue--b { right: 1.5%; bottom: -3%; width: clamp(138px, 31%, 256px); --d: 3.1s; }
@media (max-width: 860px) { .c77__vue { display: none; } }
/* en grand écran le conteneur des villes est transparent : chaque puce reste
   ancrée à son point */
.c77__villes { display: contents; }

.c77__planche {
  /* centré sur le département (21,5 % → 79,7 % du dessin), pas sur le cadre */
  position: absolute; left: calc(50.6% - 20px); top: -26px; translate: -50% 0; z-index: 3;
  display: inline-flex; align-items: baseline; gap: 12px; white-space: nowrap;
  padding: 7px 18px; border-radius: var(--r-pill);
  background: var(--creme); box-shadow: 0 8px 22px rgba(84, 12, 48, 0.24), inset 0 0 0 1px rgba(0, 168, 152, 0.3);
  font-family: var(--titre); font-weight: 400; font-size: clamp(17px, 1.5vw, 22px);
  letter-spacing: 0.06em; color: var(--turquoise-encre);
  opacity: 0; animation: communeParait 560ms ease 900ms forwards;
}
.c77__planche b {
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--rose-fonce);
}
/* Coulommiers : sa plaque crème, la plus lisible de la carte */
.c77__chef-nom {
  position: absolute; z-index: 4; translate: calc(-26% + 60px) -100%; margin-top: -19px;
  display: grid; gap: 1px; white-space: nowrap;
  padding: 7px 14px 8px; border-radius: 12px;
  background: var(--creme);
  box-shadow: 0 8px 22px rgba(84, 12, 48, 0.28), inset 0 0 0 2px var(--rose);
  font-family: var(--titre); font-weight: 400; font-size: clamp(22px, 1.95vw, 28px); line-height: 1.02;
  color: var(--rose-fonce); text-shadow: none;
  opacity: 0; animation: c77Cartouche 500ms var(--sortie) 4.45s forwards;
}
/* Trait droit entre la plaque et le point de Coulommiers.
   Sa longueur et son inclinaison sont calculées par le script à partir des
   positions réellement rendues : il relie donc toujours exactement les deux,
   quelle que soit la largeur de l'écran ou la taille du texte. */
.c77__fil {
  position: absolute; z-index: 2; height: 2.5px; border-radius: 0 2px 2px 0;
  background: var(--rose); transform-origin: 0 50%;
  width: var(--fil-l, 0px); left: var(--fil-x, 0px); top: var(--fil-y, 0px);
  rotate: var(--fil-a, 0deg);
  opacity: 0; animation: communeParait 380ms ease 4.5s forwards;
}
.c77__chef-nom i {
  font-family: var(--mono); font-style: normal; font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--rose-fonce); text-shadow: none;
}
@keyframes c77Cartouche {
  0% { opacity: 0; translate: calc(-26% + 60px) calc(-100% + 8px); }
  100% { opacity: 1; translate: calc(-26% + 60px) -100%; }
}
/* villes repères : pastille blanche, nom et distance */
.c77__cap {
  position: absolute; translate: -100% -50%; z-index: 2;
  display: grid; justify-items: end; gap: 0; white-space: nowrap;
  margin-left: -13px; padding: 4px 9px 5px; border-radius: 9px;
  background: var(--creme); box-shadow: 0 3px 10px rgba(84, 12, 48, 0.2), inset 0 0 0 1px rgba(0, 168, 152, 0.28);
  font-family: var(--titre); font-weight: 400; font-size: 15px; line-height: 1.08;
  color: var(--encre); text-shadow: none;
  opacity: 0; animation: c77CapG 460ms var(--sortie) var(--d, 0s) forwards;
}
.c77__cap--d { translate: 0 -50%; margin-left: 13px; justify-items: start; animation-name: c77CapD; }
/* puce posée sous le point : plus compacte, elle ne mord pas sur les bords */
.c77__cap--bas {
  translate: -50% 0; margin-left: 0; margin-top: 12px; justify-items: center;
  animation-name: c77CapB;
}
@keyframes c77CapB {
  0% { opacity: 0; translate: -50% -8px; }
  100% { opacity: 1; translate: -50% 0; }
}
.c77__cap i {
  font-family: var(--mono); font-style: normal; font-size: 11px; font-weight: 700;
  letter-spacing: 0.02em; color: var(--rose-fonce);
}

@keyframes c77CapG { 0% { opacity: 0; translate: calc(-100% + 10px) -50%; } 100% { opacity: 1; translate: -100% -50%; } }
@keyframes c77CapD { 0% { opacity: 0; translate: -10px -50%; } 100% { opacity: 1; translate: 0 -50%; } }
/* fin : la carte glisse à droite, reste visible, et les tirages arrivent à sa gauche */
@media (max-width: 760px) { .commune { width: 100%; } }
/* Sur smartphone les villes restent sur la carte, mais réduites au strict
   nécessaire : nom seul, sans distance, sur une puce minuscule. */
@media (max-width: 700px) {
  .c77__villes { display: contents; }
  .c77__cap {
    font-size: 10.5px; padding: 2px 6px 3px; border-radius: 6px;
    margin-left: -8px; box-shadow: 0 2px 7px rgba(84, 12, 48, 0.24), inset 0 0 0 1px rgba(0, 168, 152, 0.22);
  }
  .c77__cap--d { margin-left: 8px; }
  .c77__cap--bas { margin: 7px 0 0; }
  /* Sézanne remonte pour ne pas toucher Provins sur les petits écrans */
  .c77__cap--sezanne { margin-top: -14px; }
  .c77__cap i { display: none; }
  .c77__chef-nom {
    font-size: 13px; padding: 3px 8px 4px; gap: 0;
    translate: calc(-26% + 16px) -100%; margin-top: -11px;
    animation-name: c77CartoucheB;
  }
  .c77__chef-nom i { font-size: 8.5px; letter-spacing: 0.08em; }

  @keyframes c77CartoucheB {
    0% { opacity: 0; translate: calc(-26% + 16px) calc(-100% + 6px); }
    100% { opacity: 1; translate: calc(-26% + 16px) -100%; }
  }
  .c77__planche { font-size: 14px; padding: 4px 11px; gap: 8px; }
  .c77__planche b { font-size: 9.5px; letter-spacing: 0.1em; }
  .pile-bloc { padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .c77__dep, .c77__hachure, .c77__ombre, .c77__lien, .c77__lien--trace,
  .c77__pt, .c77__chef, .c77__cap, .c77__chef-nom, .c77__planche, .c77__vue {
    animation: none !important; opacity: 1 !important;
  }
  .c77__trace, .c77__lien, .c77__lien--trace { stroke-dashoffset: 0 !important; }
  .c77__trace { animation: none !important; }
  .c77__halo { animation: none !important; opacity: 0.28 !important; }
  .c77__vue img:nth-child(n + 2) { opacity: 0 !important; }
  .c77__vue img:first-child { opacity: 1 !important; }
  .commune { animation: none !important; }
}
html.acces-calme .c77__dep, html.acces-calme .c77__hachure, html.acces-calme .c77__ombre,
html.acces-calme .c77__lien, html.acces-calme .c77__lien--trace, html.acces-calme .c77__pt,
html.acces-calme .c77__chef, html.acces-calme .c77__cap, html.acces-calme .c77__chef-nom,
html.acces-calme .c77__planche, html.acces-calme .c77__vue { opacity: 1 !important; }
html.acces-calme .c77__trace, html.acces-calme .c77__lien,
html.acces-calme .c77__lien--trace { stroke-dashoffset: 0 !important; }
html.acces-calme .c77__halo { opacity: 0.28 !important; }
html.acces-calme .c77__vue img:nth-child(n + 2) { opacity: 0 !important; }
html.acces-calme .c77__vue img:first-child { opacity: 1 !important; }



/* ------------------------------------------------- La fête foraine (programme)
   Un encart en deux temps : le texte à gauche, une mosaïque de trois vues à
   droite (une haute, deux carrées). Les emplacements en attente reprennent le
   traitement des fiches d'entretien. */
.foraine { display: grid; grid-template-columns: 1fr 0.92fr; gap: 42px; align-items: center; }
.foraine__mot .texte-l { margin-top: 16px; }
.foraine__mot p + p { margin-top: 12px; }
.foraine__cles { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.foraine__cles li {
  display: grid; gap: 2px; padding: 11px 16px;
  background: var(--blanc); border: 1px solid var(--rose-bord); border-radius: var(--r-m);
}
.foraine__cles b { font-family: var(--titre); font-weight: 400; font-size: 17px; color: var(--rose-encre); }
.foraine__cles span { font-size: 13.5px; color: var(--texte-doux); }
.foraine__vues {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start;
}
.foraine__vue {
  position: relative; margin: 0; overflow: hidden; border-radius: var(--r-l);
  background: var(--creme); border: 1px solid var(--sable-bord); box-shadow: var(--ombre-s);
}
.foraine__vue { aspect-ratio: 1600 / 1064; }
.foraine__vue--haute { grid-column: 1; grid-row: span 2; aspect-ratio: 980 / 1232; }
.foraine__vue--large { grid-column: 1 / -1; }
.foraine__vue img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 800ms var(--sortie); }
.foraine__vue:hover img { transform: scale(1.05); }
.foraine__vue--attente {
  display: grid; place-items: center; gap: 8px; align-content: center;
  border-style: dashed; border-color: var(--rose-bord); box-shadow: none;
}
.foraine__vue--attente img { width: 54px; height: auto; opacity: 0.55; }
.foraine__vue--attente:hover img { transform: none; }
.foraine__vue--attente figcaption {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gris);
}
/* version resserrée : titre et repères centrés, trois photos alignées dessous */
.foraine--centre { grid-template-columns: 1fr; gap: 30px; justify-items: center; }
.foraine--centre .foraine__mot { text-align: center; display: grid; justify-items: center; }
.foraine--centre .filet { margin-left: auto; margin-right: auto; }
.foraine--centre .foraine__cles { grid-auto-flow: column; justify-content: center; gap: 12px; }
.foraine--centre .foraine__cles li { text-align: center; padding: 12px 22px; align-content: center; }
.foraine--centre .foraine__vues { width: 100%; max-width: 1100px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 760px) {
  .foraine--centre .foraine__vues { grid-template-columns: 1fr 1fr; }
  .foraine--centre .foraine__vues .foraine__vue:last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - 8px); }
}
@media (max-width: 480px) {
  .foraine--centre .foraine__cles { grid-auto-flow: row; }
  .foraine--centre .foraine__vues { grid-template-columns: 1fr; }
  .foraine--centre .foraine__vues .foraine__vue:last-child { width: 100%; }
}
@media (max-width: 980px) {
  .foraine { grid-template-columns: 1fr; gap: 28px; }

}
@media (max-width: 520px) {
  .foraine__vues { grid-template-columns: 1fr; }
  .foraine__vue--haute { grid-row: auto; }
}


/* --- Héros de l'accueil sur tablette : ajustements finaux (priorité d'ordre) --- */
@media (min-width: 761px) and (max-width: 1180px) {
  /* la carte de Coulommiers n'a pas de bande libre en une colonne : elle est
     la carte occupe seule la colonne, à sa mesure */
  .commune { width: 100%; margin-right: 0; }
  .pile-bloc { padding-top: 0; }
  .heros-accueil { gap: 26px; }
  .heros__chapeau, .heros__chapeau--defile { margin-top: 14px; }
  .slogan-points { margin-top: 12px; }
}


/* ------------------------------------------------ Barre haute sur tablette
   Entre 761 et 1024 px les quatre groupes ne tenaient plus sur une ligne :
   le bandeau passait à deux niveaux et « espace pro » venait se superposer au
   badge d'entrée gratuite. On compacte pour tenir sur une seule ligne. */
@media (min-width: 761px) and (max-width: 1024px) {
  .barre-haute .page {
    flex-wrap: nowrap; gap: 14px; min-height: 50px; padding-top: 7px; padding-bottom: 7px;
  }
  /* le compte à rebours se réduit à son chiffre : le libellé est redondant */
  .barre-haute__jauge > span { display: none; }
  .barre-haute__jauge b { font-size: 22px; }
  .barre-haute__date { font-size: 16px; padding-left: 14px; }
  .barre-haute .gratuit { font-size: 11px; padding: 5px 12px; letter-spacing: 0.04em; }
  .barre-haute .pro { gap: 10px; flex: 0 0 auto; }
  .barre-haute__tel { font-size: 14px; padding: 4px 12px 4px 10px; }
  .barre-haute__reseau { width: 25px; height: 25px; }
}
/* tablette étroite : le badge d'entrée gratuite cède la place, il est repris
   dans l'en-tête de chaque page */
@media (min-width: 761px) and (max-width: 880px) {
  .barre-haute .gratuit { display: none; }
}


/* ==========================================================================
   Consentement aux cookies et outils d'accessibilité
   ========================================================================== */

/* --- écran d'attente à la place d'une vidéo tierce non autorisée --- */
.tiers-attente {
  display: grid; gap: 14px; place-items: center; text-align: center;
  padding: 30px 24px; border-radius: var(--r-l);
  background: var(--sable); border: 1px dashed var(--sable-fonce);
}
.tiers-attente p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--texte-doux); max-width: 46ch; }
.tiers-attente__actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* --- bandeau de premier passage --- */
.cookies-bandeau {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 95;
  background: var(--creme); border: 1px solid var(--sable-bord); border-radius: var(--r-xl);
  box-shadow: 0 24px 60px rgba(29, 24, 25, 0.28);
  animation: cookiesEntre 420ms var(--sortie) both;
}
@keyframes cookiesEntre { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.cookies-bandeau__corps {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  max-width: var(--page); margin: 0 auto; padding: 18px 22px;
}
.cookies-bandeau__vache {
  flex: 0 0 auto; width: 54px; height: 54px; border-radius: 50%; background: var(--rose-pale);
  display: grid; place-items: center; position: relative;
}
.cookies-bandeau__vache::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; border: 1.5px dashed var(--rose-bord); }
.cookies-bandeau__vache img { width: 66%; transform: rotate(-4deg); }
.cookies-bandeau__texte { flex: 1 1 320px; min-width: 0; }
.cookies-bandeau__texte b { font-size: 16px; color: var(--encre); }
.cookies-bandeau__texte p { margin: 5px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--texte-doux); }
.cookies-bandeau__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; }
@media (max-width: 700px) {
  .cookies-bandeau { left: 10px; right: 10px; bottom: 10px; }
  .cookies-bandeau__corps { padding: 16px; gap: 14px; }
  .cookies-bandeau__vache { display: none; }
  .cookies-bandeau__actions { width: 100%; }
  .cookies-bandeau__actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* --- panneau de préférences --- */
.reglages {
  position: fixed; inset: 0; z-index: 96; display: grid; place-items: center; padding: 20px;
  background: rgba(29, 24, 25, 0.62);
}
.reglages__boite {
  position: relative; width: min(600px, 100%); max-height: 88vh; overflow: auto;
  padding: 30px; border-radius: var(--r-xl);
  background: var(--creme); box-shadow: 0 30px 70px rgba(29, 24, 25, 0.4);
}
.reglages__fermer {
  position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%;
  font-size: 20px; color: var(--texte-doux); background: transparent; cursor: pointer; border: 0;
  transition: background var(--vite) ease, color var(--vite) ease;
}
.reglages__fermer:hover { background: var(--sable); color: var(--encre); }
.reglages__ligne {
  display: flex; align-items: center; gap: 22px; padding: 20px 0;
  border-bottom: 1px solid var(--sable-bord);
}
.reglages__ligne:first-of-type { margin-top: 14px; border-top: 1px solid var(--sable-bord); }
.reglages__ligne b { font-size: 16px; color: var(--encre); }
.reglages__ligne p { margin: 5px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--texte-doux); }
.reglages__fige {
  flex: 0 0 auto; padding: 6px 13px; border-radius: var(--r-pill);
  background: var(--turquoise-pale); border: 1px solid var(--turquoise-bord);
  font-size: 12px; font-weight: 700; color: var(--turquoise-encre); white-space: nowrap;
}
.reglages__pied { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; flex-wrap: wrap; }

/* --- interrupteur partagé --- */
.bascule { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; flex: 0 0 auto; }
.bascule input, .acces__opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.bascule__piste {
  position: relative; width: 52px; height: 30px; border-radius: 15px; flex: 0 0 auto;
  background: var(--sable-fonce); transition: background var(--moyen) ease;
}
.bascule__pion {
  position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 6px rgba(29, 24, 25, 0.28);
  transition: transform var(--moyen) var(--sortie);
}
.bascule input:checked + .bascule__piste,
.acces__opt input:checked + .bascule__piste { background: var(--rose); }
.bascule input:checked + .bascule__piste .bascule__pion,
.acces__opt input:checked + .bascule__piste .bascule__pion { transform: translateX(22px); }
.bascule input:focus-visible + .bascule__piste,
.acces__opt input:focus-visible + .bascule__piste { outline: 2px solid var(--rose); outline-offset: 3px; }
.bascule__etat { font-size: 13px; font-weight: 600; color: var(--texte-doux); min-width: 76px; }

/* --- bouton et panneau d'accessibilité --- */
.acces { position: fixed; left: 18px; bottom: 18px; z-index: 94; }
.acces__bouton {
  display: inline-flex; align-items: center; gap: 9px; min-height: 52px; padding: 0 18px 0 15px;
  border: 0; border-radius: var(--r-pill); cursor: pointer;
  background: var(--turquoise); color: #fff; font-family: inherit; font-size: 14.5px; font-weight: 700;
  box-shadow: 0 12px 28px rgba(0, 168, 152, 0.34);
  transition: background var(--moyen) ease, transform var(--vite) var(--sortie);
}
.acces__bouton:hover, .acces__bouton:focus-visible { background: var(--turquoise-encre); transform: translateY(-2px); }
.acces__bouton:active { transform: scale(0.97); }
.acces__panneau {
  position: absolute; left: 0; bottom: 64px; width: min(340px, calc(100vw - 36px));
  max-height: calc(100dvh - 140px); overflow: auto;
  background: var(--creme); border: 1px solid var(--sable-bord); border-radius: var(--r-xl);
  box-shadow: var(--ombre-l);
}
.acces__panneau[hidden] { display: none; }
.acces__tete {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 12px 14px 18px; background: var(--turquoise); color: #fff;
}
.acces__tete b { font-family: var(--titre); font-weight: 400; font-size: 19px; }
.acces__fermer {
  width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent;
  color: #fff; font-size: 20px; cursor: pointer; transition: background var(--vite) ease;
}
.acces__fermer:hover { background: rgba(29, 24, 25, 0.2); }
.acces__corps { display: grid; gap: 4px; padding: 14px; }
.acces__taille {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border-radius: var(--r-m); background: var(--sable);
}
.acces__taille > span { font-size: 14.5px; font-weight: 600; color: var(--encre); }
.acces__pas { display: flex; align-items: center; gap: 8px; }
.acces__pas button {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--sable-fonce);
  background: #fff; color: var(--encre); font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  transition: background var(--vite) ease, border-color var(--vite) ease;
}
.acces__pas button:hover { background: var(--rose); border-color: var(--rose); color: #fff; }
.acces__pas b { font-family: var(--mono); font-size: 12.5px; min-width: 48px; text-align: center; color: var(--texte-doux); }
.acces__opt {
  display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--r-m); cursor: pointer;
  transition: background var(--vite) ease;
}
.acces__opt:hover { background: var(--sable); }
.acces__opt-texte { display: grid; }
.acces__opt-texte b { font-size: 14.5px; font-weight: 600; color: var(--encre); }
.acces__opt-texte i { font-style: normal; font-size: 12.5px; color: var(--gris); }
.acces__reset {
  margin-top: 6px; min-height: 44px; border-radius: var(--r-pill); cursor: pointer;
  border: 1px solid var(--sable-fonce); background: #fff; color: var(--encre);
  font-family: inherit; font-size: 14px; font-weight: 600;
  transition: background var(--vite) ease, color var(--vite) ease;
}
.acces__reset:hover { background: var(--encre); border-color: var(--encre); color: #fff; }
.acces__lien { display: block; text-align: center; padding: 8px 0 2px; font-size: 13.5px; }
@media (max-width: 700px) {
  .acces { left: 12px; bottom: 12px; }
  .acces__libelle { display: none; }
  .acces__bouton { padding: 0 15px; }
}
@media print { .acces, .cookies-bandeau, .reglages { display: none !important; } }

/* --- effets des réglages d'accessibilité ---
   Le site est dessiné en pixels : agrandir la racine n'aurait aucun effet.
   On agrandit donc les conteneurs de contenu eux-mêmes, en laissant hors zoom
   les outils flottants (accessibilité, bandeau, chatbot). */
.barre-haute, .entete, .tiroir, main, .pied { zoom: var(--zoom-texte, 100%); }
html.acces-lisible body,
html.acces-lisible .titre-xl, html.acces-lisible .titre-l, html.acces-lisible .titre-m,
html.acces-lisible h1, html.acces-lisible h2, html.acces-lisible h3,
html.acces-lisible .heros__titre, html.acces-lisible .affiche-page__titre {
  font-family: "Fira Sans", system-ui, sans-serif !important; font-style: normal !important;
  letter-spacing: 0.01em; word-spacing: 0.08em;
}
html.acces-lisible p, html.acces-lisible li { line-height: 1.85 !important; }
html.acces-liens a:not(.btn):not(.etiq) { text-decoration: underline !important; text-underline-offset: 3px; }
html.acces-calme *, html.acces-calme *::before, html.acces-calme *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
}
html.acces-contraste { --texte-doux: #241f20; --gris: #3a3234; --sable-bord: #1a1617; --sable-fonce: #1a1617; }
html.acces-contraste body { background: #fff; }
html.acces-contraste .bloc--creme, html.acces-contraste .bloc--sable, html.acces-contraste .bloc--blanc { background: #fff !important; }
html.acces-contraste p, html.acces-contraste li, html.acces-contraste .note, html.acces-contraste .chapeau { color: #1a1617 !important; }
html.acces-contraste .carte, html.acces-contraste .fiche, html.acces-contraste .encart {
  background: #fff !important; border: 2px solid #1a1617 !important; box-shadow: none !important;
}
html.acces-contraste .btn { border: 2px solid currentColor; }
html.acces-contraste .rond, html.acces-contraste .bulle-titre { display: none !important; }
/* fonds rosés : une seule teinte soutenue, texte blanc pur */
html.acces-contraste .heros, html.acces-contraste .affiche-page,
html.acces-contraste .bloc--rose, html.acces-contraste .pied__rdv,
html.acces-contraste .guide-tete, html.acces-contraste .compteur-bande {
  background: #8d1a51 !important; background-image: none !important;
}
/* fonds sombres et turquoise : noir franc, tous les textes en blanc */
html.acces-contraste .bloc--encre, html.acces-contraste .bloc--sombre,
html.acces-contraste .bloc--turquoise, html.acces-contraste .pied,
html.acces-contraste .barre-haute, html.acces-contraste .tiroir,
html.acces-contraste .visionneuse, html.acces-contraste .fiche--sombre {
  background: #100d0e !important; background-image: none !important;
}
html.acces-contraste .heros *, html.acces-contraste .affiche-page *,
html.acces-contraste .bloc--rose *, html.acces-contraste .pied__rdv *,
html.acces-contraste .guide-tete *, html.acces-contraste .compteur-bande *,
html.acces-contraste .bloc--encre *, html.acces-contraste .bloc--sombre *,
html.acces-contraste .bloc--turquoise *, html.acces-contraste .pied *,
html.acces-contraste .barre-haute *, html.acces-contraste .tiroir *,
html.acces-contraste .fiche--sombre * {
  color: #fff !important; text-shadow: none !important;
}
/* les cartes claires posées sur ces fonds gardent leur encre noire */
html.acces-contraste .heros .carte, html.acces-contraste .heros .carte *,
html.acces-contraste .pied .carte, html.acces-contraste .pied .carte *,
html.acces-contraste .bloc--encre .carte, html.acces-contraste .bloc--encre .carte *,
html.acces-contraste .bloc--turquoise .carte, html.acces-contraste .bloc--turquoise .carte * {
  color: #1a1617 !important;
}
/* boutons et étiquettes : deux paires franches, jamais de texte translucide */
html.acces-contraste .btn--rose, html.acces-contraste .btn--turquoise,
html.acces-contraste .btn--encre, html.acces-contraste .etiq--rose,
html.acces-contraste .etiq--turquoise, html.acces-contraste .etiq--encre {
  background: #1a1617 !important; color: #fff !important; border-color: #fff !important;
}
html.acces-contraste .btn--creme, html.acces-contraste .btn--fantome,
html.acces-contraste .btn--contour, html.acces-contraste .etiq--creme,
html.acces-contraste .affiche-page__tag {
  background: #fff !important; color: #1a1617 !important; border-color: #1a1617 !important;
}
html.acces-contraste .heros .btn--creme, html.acces-contraste .affiche-page__tag { border-color: #fff !important; }
/* images de fond décoratives retirées : elles écrasaient le texte */
html.acces-contraste .heros::before, html.acces-contraste .heros::after,
html.acces-contraste .affiche-page::before, html.acces-contraste .affiche-page::after,
html.acces-contraste .commune, html.acces-contraste .ruban-fete { display: none !important; }
.acces-regle {
  position: fixed; left: 0; right: 0; height: 44px; z-index: 93; pointer-events: none;
  background: rgba(253, 250, 245, 0.16);
  border-top: 2px solid rgba(232, 64, 144, 0.75); border-bottom: 2px solid rgba(232, 64, 144, 0.75);
  box-shadow: 0 -100vh 0 rgba(29, 24, 25, 0.28), 0 100vh 0 rgba(29, 24, 25, 0.28);
}


/* barre haute : au-delà de 100 % de zoom, la largeur utile diminue sans que
   les media queries le sachent — on rend le repli propre plutôt que serré */
@media (min-width: 761px) and (max-width: 1240px) {
  .barre-haute .page { gap: 0 12px; }
  .barre-haute__jauge b { white-space: nowrap; }
  .barre-haute .gratuit { font-size: 11px; padding: 5px 12px; }
  .barre-haute__soirees { font-size: 12px; padding: 5px 13px; }
  .barre-haute .pro { gap: 13px; }
}


/* le bandeau cookies ne doit jamais couvrir le bouton d'accessibilité :
   tant qu'il est affiché, le bouton remonte au-dessus de lui */
body.cookies-visible .acces { bottom: calc(var(--h-cookies, 120px) + 26px); }
/* pendant droit : le chatbot remonte de la même manière, et son panneau se
   raccourcit d'autant pour rester entièrement dans l'écran */
body.cookies-visible .vache { bottom: calc(var(--h-cookies, 120px) + 26px); }
body.cookies-visible .vache__panneau { max-height: calc(100dvh - 130px - var(--h-cookies, 120px)); }
@media (max-width: 700px) {
  body.cookies-visible .acces { bottom: calc(var(--h-cookies, 150px) + 18px); }
  body.cookies-visible .vache { bottom: calc(var(--h-cookies, 150px) + 18px); }
}


/* sur smartphone, les deux boutons flottants ne se montrent que pendant le
   défilement : au repos, l'écran reste dégagé */
/* la classe n'est posée que sur écran tactile : la règle vaut partout */
.acces, .vache { transition: opacity 260ms ease, transform 260ms var(--sortie), visibility 0s; }
body.flottants-caches .acces, body.flottants-caches .vache {
  opacity: 0 !important; transform: translateY(18px); pointer-events: none;
  visibility: hidden; transition: opacity 260ms ease, transform 260ms var(--sortie), visibility 0s 260ms;
}
@media (prefers-reduced-motion: reduce) {
  .acces, .vache { transition: opacity 200ms ease; }
  body.flottants-caches .acces, body.flottants-caches .vache { transform: none; }
}


/* ==========================================================================
   Accueil — Zoom dernière minute et flux Facebook, côte à côte
   ========================================================================== */
.deux-colonnes {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(22px, 2.6vw, 38px); align-items: stretch;
}
@media (max-width: 900px) { .deux-colonnes { grid-template-columns: minmax(0, 1fr); } }

/* ── colonne de gauche : les informations de dernière minute ── */
.zoom, .fb {
  display: flex; flex-direction: column; height: 100%;
  background: var(--blanc); border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--ombre-m); border: 1px solid var(--sable-bord);
}
/* un bandeau de couleur coiffe chaque colonne */
.zoom__tete, .fb__tete {
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px clamp(18px, 2vw, 26px) 20px;
  border-bottom: 1px solid var(--sable-bord);
}
/* pastille et surtitre, groupés à gauche */
.tete-ligne { display: flex; align-items: center; gap: 12px; min-width: 0; }
/* le titre occupe sa propre ligne, centré */
.tete-titre { text-align: center; margin: 0; }
.zoom__tete { background: linear-gradient(120deg, var(--rose-pale), #fff 70%); }
.fb__tete { background: linear-gradient(120deg, #e8f0fe, #fff 70%); }
.zoom__tete .oeil, .fb__tete .oeil { margin: 0; }
.zoom__tete .titre-l, .fb__tete .titre-l {
  line-height: 1.12; font-size: clamp(22px, 1.9vw, 28px); text-wrap: balance;
}
.zoom__tete .oeil, .fb__tete .oeil { font-size: 10.5px; }
/* le corps de chaque colonne */
.zoom > :not(.zoom__tete), .fb > :not(.fb__tete) {
  margin-left: clamp(22px, 2.4vw, 30px); margin-right: clamp(22px, 2.4vw, 30px);
}
.zoom > .note:first-of-type, .fb > .note:first-of-type { margin-top: 18px; }
.zoom > .note:last-of-type { margin-bottom: 22px; }
.zoom__pastille {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  background: var(--rose); position: relative;
  box-shadow: 0 6px 16px rgba(232, 64, 144, 0.32);
}
.zoom__pastille::before, .zoom__pastille::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--rose); animation: zoomOnde 2.8s ease-out infinite;
}
.zoom__pastille::after { animation-delay: 1.4s; }
@keyframes zoomOnde {
  0% { opacity: 0.7; transform: scale(1); }
  100% { opacity: 0; transform: scale(2); }
}
/* ── « la une » : une actualité mise en image ── */
.une {
  margin-top: 16px; border-radius: var(--r-l); overflow: hidden;
  background: var(--creme); border: 1px solid var(--rose-bord);
  box-shadow: 0 6px 18px rgba(163, 36, 95, 0.1);
}
.une__image { position: relative; display: block; aspect-ratio: 40 / 9; overflow: hidden; background: var(--sable); }
.une__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.une__image::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(29, 24, 25, 0.28) 0%, rgba(29, 24, 25, 0) 46%);
}
.une__etiq {
  position: absolute; left: 14px; top: 13px; z-index: 1;
  padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--rose); color: #fff;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(163, 36, 95, 0.35);
}
.une__corps { padding: 11px 18px 12px; }
.une__date {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--rose-encre);
}
.une__titre {
  margin: 7px 0 0; font-family: var(--titre); font-weight: 400;
  font-size: clamp(17.5px, 1.5vw, 21px); line-height: 1.18; color: var(--encre); text-wrap: pretty;
}
.une__texte { margin: 6px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--texte-doux); }
.une__pied { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 11px; }

/* ── les brèves : une ligne par information, date en pastille ── */
.breves { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 1px; }
/* un filet sépare les brèves, comme les lignes d'un fil d'actualité */
.breve + .breve { border-top: 1px dashed var(--sable-bord); }
.breve a {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 8px 10px; border-radius: var(--r-m); text-decoration: none;
  transition: background var(--vite) ease;
}
.breve a:hover, .breve a:focus-visible { background: var(--sable); }
.breve a:focus-visible { outline: 2px solid var(--turquoise); outline-offset: 1px; }
.breve__jour {
  flex: 0 0 auto; display: grid; justify-items: center; align-content: center;
  width: 40px; height: 40px; border-radius: 11px;
  background: var(--turquoise-pale); border: 1px solid var(--turquoise-bord);
}
.breve__jour b { font-family: var(--titre); font-weight: 400; font-size: 17px; line-height: 1; color: var(--turquoise-encre); }
.breve__jour i {
  font-style: normal; font-family: var(--mono); font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--turquoise-encre); opacity: 0.8;
}
.breve__texte { display: grid; gap: 2px; min-width: 0; }
.breve__texte b { font-size: 14.5px; font-weight: 700; color: var(--encre); line-height: 1.28; }
.breve__texte i { font-style: normal; font-size: 12.5px; line-height: 1.45; color: var(--texte-doux); }
.breve a:hover .breve__texte b { color: var(--rose-encre); }
.zoom__pied-note { margin-top: auto; padding-top: 14px; }

/* ── colonne de droite : la page Facebook ── */
/* ── colonne de droite : la page Facebook ── */
.fb__logo {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: #1877f2; color: #fff;
  box-shadow: 0 6px 16px rgba(24, 119, 242, 0.34);
}
/* Flux Facebook : les publications réelles, dans leur ordre chronologique
   (la plus récente en premier), dans un cadre borné qui laisse défiler. */
.fb__flux {
  flex: 1 1 auto; margin-top: 16px; border-radius: var(--r-l);
  background: var(--sable); border: 1px solid var(--sable-bord);
  overflow: hidden;
}
.fb__flux::-webkit-scrollbar { width: 6px; }
.fb__flux::-webkit-scrollbar-thumb { background: var(--sable-fonce); border-radius: 3px; }
.fb__flux { display: flex; justify-content: center; }
.fb__flux iframe { width: 100%; max-width: 500px; height: 100%; min-height: 460px; border: 0; display: block; margin: 0 auto; }
.fb__flux .tiers-attente { border: 0; background: transparent; align-content: center; min-height: 460px; }
.fb__lien { margin: 16px clamp(22px, 2.4vw, 30px) clamp(22px, 2.4vw, 28px); justify-content: center; }
.zoom__info:last-of-type { margin-bottom: 4px; }
@media (max-width: 900px) {
  .fb__flux, .fb__flux iframe { min-height: 520px; }
  .zoom, .fb { height: auto; }
  /* le cadre prend toute la largeur de la carte, le flux s'y centre */
  .fb > .fb__flux { margin-left: 14px; margin-right: 14px; }
}
@media (max-width: 480px) {
  .fb > .fb__flux { margin-left: 10px; margin-right: 10px; }
  .fb__flux, .fb__flux iframe { min-height: 560px; }
}


/* Coupure entre deux sections : un filet ponctué d'un losange, discret */
.coupure {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  max-width: var(--page); margin: 0 auto; padding: 0 var(--gout);
}
.coupure span {
  flex: 1 1 auto; height: 1px; max-width: 220px;
  background: linear-gradient(90deg, transparent, var(--sable-fonce));
}
.coupure span:last-child { background: linear-gradient(90deg, var(--sable-fonce), transparent); }
.coupure i {
  flex: 0 0 auto; width: 9px; height: 9px; rotate: 45deg;
  background: var(--rose); border-radius: 2px;
}
@media (max-width: 700px) { .coupure span { max-width: 90px; } }


/* Informations du bandeau : horaire d'ouverture et lieu, entre l'entrée
   gratuite et le bouton — elles occupent la largeur restante. */
.barre-haute__info, .barre-haute__lieu {
  display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap;
  padding-left: 18px; border-left: 1px solid rgba(255, 255, 255, 0.18);
  text-decoration: none; line-height: 1.2;
}
.barre-haute__info b, .barre-haute__lieu b {
  font-family: var(--titre); font-weight: 400; font-size: 16px; line-height: 1.2; color: #fff;
}
.barre-haute__info > span, .barre-haute__lieu > span {
  font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.barre-haute a.barre-haute__lieu { color: inherit; }
.barre-haute__lieu { transition: border-color var(--moyen) ease; }
.barre-haute__lieu:hover { border-left-color: var(--turquoise); }
.barre-haute__lieu:hover b { color: #fff; }
.barre-haute__lieu:hover > span { color: rgba(255, 255, 255, 0.78); }
@media (max-width: 1080px) { .barre-haute__info { display: none; } }

/* Bouton des soirées : il ouvre le groupe de droite du bandeau, ce qui referme
   le vide qui séparait auparavant les deux blocs. */
.barre-haute__soirees {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 15px; border-radius: var(--r-pill);
  background: var(--turquoise-encre); color: #fff !important; text-decoration: none;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0, 106, 96, 0.4);
  transition: background var(--moyen) ease, box-shadow var(--moyen) ease, transform var(--vite) var(--sortie);
}
.barre-haute__soirees::after {
  content: '→'; font-size: 13px; line-height: 1;
  transition: transform var(--moyen) var(--sortie);
}
.barre-haute__soirees:hover, .barre-haute__soirees:focus-visible {
  background: #00544c; box-shadow: 0 5px 16px rgba(0, 106, 96, 0.55);
}
.barre-haute__soirees:hover::after, .barre-haute__soirees:focus-visible::after { transform: translateX(3px); }
.barre-haute__soirees:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.barre-haute__soirees:active { transform: scale(0.97); }
@media (max-width: 760px) { .barre-haute__soirees { display: none; } }


/* Les bulles du héros restent dans les marges : sous 1560 px la colonne de
   texte occupe toute la largeur utile, celles de gauche s'effacent donc pour
   ne pas passer sous les mots. */
@media (max-width: 1560px) {
  .heros--rose-profond > .rond[style*="left:6.5%"],
  .heros--rose-profond > .rond[style*="left:8.5%"],
  .heros--rose-profond > .rond[style*="left:7.5%"],
  .heros--rose-profond > .rond[style*="left:5%"] { display: none; }
}
@media (max-width: 1240px) {
  .heros--rose-profond > .rond[style*="right:6%"],
  .heros--rose-profond > .rond[style*="right:7%"],
  .heros--rose-profond > .rond[style*="left:2%"],
  .heros--rose-profond > .rond[style*="left:1.5%"],
  .heros--rose-profond > .rond[style*="left:1%"] { display: none; }
}


/* Smartphone : le dessin (1180 de large) laisse beaucoup de vide autour du
   département, qui n'en occupe que 52 %. La carte est donc élargie au-delà de
   la colonne, calée pour que ses libellés (12 % → 97 % de sa largeur) tiennent
   pile dans l'écran avec 8 px de marge. Le héros rogne le vide qui déborde. */
@media (max-width: 700px) {
  .pile-bloc { justify-content: flex-start; }
  .commune {
    flex: none; width: calc((100vw - 16px) / 0.85); max-width: none;
    margin-left: calc(-12px - 0.12 * (100vw - 16px) / 0.85); margin-right: 0;
  }
}

/* Tablette : même principe. Libellés et médaillons occupent 15,6 % → 88,7 % de
   la largeur de la carte ; on la dimensionne pour que cette emprise remplisse
   l'écran à 16 px des bords, la colonne étant centrée dans la page. */
@media (min-width: 701px) and (max-width: 1180px) {
  .pile-bloc { justify-content: flex-start; flex-direction: column; align-items: flex-start; }
  .commune {
    --dw: calc(100vw * 0.62);
    flex: none; width: calc(var(--dw) / 0.523); max-width: none; margin-right: 0;
    margin-left: calc(50% - var(--dw) / 2 - 0.215 * var(--dw) / 0.523);
  }
  /* les photos des médaillons deviennent une bande qui défile sous la carte */
  .c77__vue { display: none; }
}

/* La carte, plus large que sa colonne, élargissait la piste de la grille
   (1fr = min-content) : tout le texte du héros se décentrait. La piste est
   bornée à la largeur de l'écran, la carte déborde sans rien pousser. */
@media (max-width: 1180px) {
  .heros-accueil { grid-template-columns: minmax(0, 1fr); }
  .heros-accueil > *, .pile-bloc { min-width: 0; }
}


/* ==========================================================================
   À propos — héros : texte resserré, trois repères en pastilles
   ========================================================================== */
.apropos__texte { align-self: center; }
.apropos .apropos__lead {
  font-family: var(--titre); font-weight: 400; font-size: clamp(21px, 2vw, 27px);
  line-height: 1.35; color: var(--encre); text-wrap: pretty; margin: 0;
}
.apropos__suite {
  margin: 16px 0 0; font-size: 16.5px; line-height: 1.7; color: var(--texte-doux);
  text-wrap: pretty; max-width: none;
}
.apropos__reperes { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.apropos__reperes li {
  display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 14px; align-items: center;
  padding: 13px 18px; border-radius: var(--r-l);
  background: var(--blanc); border: 1px solid var(--sable-bord);
  box-shadow: 0 6px 16px rgba(29, 24, 25, 0.05);
  transition: transform var(--moyen) var(--sortie), box-shadow var(--moyen) ease, border-color var(--moyen) ease;
}
.apropos__reperes li:hover { transform: translateX(4px); border-color: var(--rose-bord); box-shadow: var(--ombre-m); }
.apropos__pastille {
  grid-row: span 2; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; font-size: 15px; color: #fff; background: var(--rose);
  box-shadow: 0 5px 12px rgba(232, 64, 144, 0.3);
}
.apropos__pastille--vert { background: var(--turquoise); box-shadow: 0 5px 12px rgba(0, 168, 152, 0.3); }
.apropos__reperes b { font-size: 16px; font-weight: 700; color: var(--encre); line-height: 1.3; }
.apropos__reperes i { font-style: normal; font-size: 14px; line-height: 1.45; color: var(--texte-doux); }
@media (prefers-reduced-motion: reduce) { .apropos__reperes li { transition: none; } }

/* légende de la frise : rose pour le centre-ville, vert pour le Foirail */
.frise__legende { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 26px; }
.frise__legende span {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13.5px; font-weight: 600; color: var(--texte-doux);
}
.frise__puce { width: 12px; height: 12px; border-radius: 50%; background: var(--rose); }
.frise__puce--vert { background: var(--turquoise); }

/* bandeau haut : accès direct à l'espace exposant, bien visible, à côté des
   soirées — contour blanc sur le fond sombre, rempli au survol */
.barre-haute__exposant {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 7px 16px; border-radius: var(--r-pill);
  border: 1.5px solid #fff; color: #fff !important; text-decoration: none;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em;
  transition: background var(--vite) ease, color var(--vite) ease, transform var(--vite) var(--sortie);
}
.barre-haute__exposant::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--rose);
}
.barre-haute__exposant:hover, .barre-haute__exposant:focus-visible {
  background: #fff; color: var(--encre) !important; transform: translateY(-1px);
}
@media (max-width: 760px) { .barre-haute__exposant { display: none; } }
/* deux groupes : les infos à gauche, les accès (exposant, soirées, réseaux)
   regroupés à droite — plus de grand vide au milieu */
@media (min-width: 761px) {
  .barre-haute .page { justify-content: flex-start; gap: 0 14px; }
  .barre-haute .barre-haute__exposant { margin-left: auto; }
  .barre-haute .barre-haute__soirees { margin-left: 0; }
}

/* piège à robots : invisible pour les visiteurs, rempli par les automates */
.champ--piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }


/* ==========================================================================
   Espace exposant — calendrier en frise et encart « une question ? »
   ========================================================================== */
.calendrier-ex {
  background: var(--blanc); border: 1px solid var(--sable-bord); border-radius: var(--r-xl);
  padding: 26px 28px 22px; box-shadow: var(--ombre-m);
}
.calendrier-ex__tete { display: flex; align-items: center; gap: 14px; }
.calendrier-ex__icone {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center; background: var(--rose-pale); color: var(--rose-fonce);
}
.calendrier-ex__liste { list-style: none; margin: 22px 0 0; padding: 0; position: relative; }
/* le fil de la frise, du rose au vert */
.calendrier-ex__liste::before {
  content: ''; position: absolute; left: 8px; top: 10px; bottom: 10px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--rose), var(--turquoise));
}
.calendrier-ex__jalon {
  position: relative; display: grid; gap: 2px; padding: 0 0 18px 34px;
}
.calendrier-ex__jalon:last-child { padding-bottom: 0; }
.calendrier-ex__point {
  position: absolute; left: 1px; top: 4px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--blanc); border: 3px solid var(--rose); box-sizing: border-box;
}
.calendrier-ex__jalon--ouvert .calendrier-ex__point { background: var(--rose); box-shadow: 0 0 0 5px var(--rose-pale); }
.calendrier-ex__jalon--fin .calendrier-ex__point { border-color: var(--turquoise); background: var(--turquoise); box-shadow: 0 0 0 5px var(--turquoise-pale); }
.calendrier-ex__quand {
  font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--rose-fonce);
}
.calendrier-ex__jalon--fin .calendrier-ex__quand { color: var(--turquoise-encre); }
.calendrier-ex__jalon b { font-size: 15.5px; font-weight: 700; color: var(--encre); line-height: 1.3; }
.calendrier-ex__note {
  margin: 18px 0 0; padding-top: 14px; border-top: 1px dashed var(--sable-bord);
  font-size: 13px; color: var(--gris);
}

.question-ex {
  position: relative; overflow: hidden; margin-top: 20px;
  padding: 26px 28px 24px; border-radius: var(--r-xl); color: #fff;
  background: linear-gradient(150deg, var(--turquoise) 0%, var(--turquoise-fonce) 100%);
  box-shadow: 0 16px 34px rgba(0, 106, 96, 0.28);
}
/* la vachette en filigrane dans l'angle */
.question-ex__vache {
  position: absolute; right: -22px; bottom: -26px; width: 128px; height: 128px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.14); display: grid; place-items: center; pointer-events: none;
}
.question-ex__vache img { width: 70%; opacity: 0.9; rotate: -8deg; }
.question-ex__texte { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.94); max-width: 32ch; position: relative; }
.question-ex__actions { display: grid; gap: 10px; margin-top: 18px; position: relative; }
.question-ex__lien {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px;
  border-radius: var(--r-l); text-decoration: none; color: #fff;
  background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.28);
  transition: background var(--vite) ease, transform var(--moyen) var(--sortie);
}
.question-ex__lien:hover, .question-ex__lien:focus-visible { background: rgba(255, 255, 255, 0.24); transform: translateX(4px); color: #fff; }
.question-ex__pastille {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; background: #fff; color: var(--turquoise-encre);
}
.question-ex__lien > span:last-child { display: grid; gap: 1px; min-width: 0; }
.question-ex__lien i { font-style: normal; font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255, 255, 255, 0.82); }
.question-ex__lien b { font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .question-ex__lien { transition: none; } }


/* ==========================================================================
   Menu mobile — trois accès en boutons, puis les réseaux (panneau crème)
   ========================================================================== */
.tiroir__actions {
  display: grid; gap: 10px; margin-top: 18px; padding-top: 20px;
  border-top: 1px dashed var(--sable-bord);
}
.tiroir a.tiroir__action {
  justify-content: center; gap: 10px; min-height: 52px; padding: 0 20px;
  border-radius: var(--r-pill); border: 2px solid #fff;
  font-size: 16px; font-weight: 700; color: #fff; text-decoration: none;
  transition: transform var(--moyen) var(--sortie), background var(--vite) ease, box-shadow var(--moyen) ease;
}
.tiroir a.tiroir__action::after, .tiroir a.tiroir__action::before { display: none; }
.tiroir a.tiroir__action span { font-size: 14px; line-height: 1; }
.tiroir a.tiroir__action--plan { background: var(--rose); box-shadow: 0 10px 22px rgba(232, 64, 144, 0.3); }
.tiroir a.tiroir__action--soiree { background: var(--turquoise); box-shadow: 0 10px 22px rgba(0, 168, 152, 0.28); }
.tiroir a.tiroir__action--exposant { background: var(--blanc); color: var(--rose-fonce); border-color: var(--rose); }
.tiroir a.tiroir__action:hover, .tiroir a.tiroir__action:focus-visible { transform: translateY(-2px); padding-left: 20px; }
.tiroir a.tiroir__action--plan:hover, .tiroir a.tiroir__action--plan:focus-visible { background: var(--rose-fonce); color: #fff; }
.tiroir a.tiroir__action--soiree:hover, .tiroir a.tiroir__action--soiree:focus-visible { background: var(--turquoise-fonce); color: #fff; }
.tiroir a.tiroir__action--exposant:hover, .tiroir a.tiroir__action--exposant:focus-visible { background: var(--rose-pale); color: var(--rose-fonce); }
.tiroir a.tiroir__action:active { transform: scale(0.98); }
.tiroir__reseaux {
  display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 20px;
}
.tiroir__reseaux span {
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--texte-doux); margin-right: 4px;
}
.tiroir a.tiroir__reseau {
  width: 44px; height: 44px; padding: 0; border-radius: 50%; justify-content: center;
  color: var(--encre); background: var(--blanc); border: 1px solid var(--sable-bord);
  transition: background var(--vite) ease, color var(--vite) ease, transform var(--moyen) var(--sortie);
}
.tiroir a.tiroir__reseau::after { display: none; }
.tiroir a.tiroir__reseau:hover, .tiroir a.tiroir__reseau:focus-visible {
  background: var(--rose); border-color: var(--rose); color: #fff; transform: translateY(-2px); padding-left: 0;
}
@media (prefers-reduced-motion: reduce) { .tiroir a.tiroir__action, .tiroir a.tiroir__reseau { transition: none; } }


/* ==========================================================================
   Infos pratiques — horaires en bande, accès voiture / train distincts
   ========================================================================== */
.horaires-bande {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--blanc); border: 1px solid var(--sable-bord); border-radius: var(--r-xl);
  box-shadow: var(--ombre-m); overflow: hidden;
}
.horaires-bande li { display: grid; gap: 4px; padding: 18px 20px; text-align: center; position: relative; }
.horaires-bande li + li::before {
  content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; border-left: 1px dashed var(--sable-bord);
}
.horaires-bande__jour { font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rose-fonce); }
.horaires-bande b { font-family: var(--titre); font-weight: 400; font-size: clamp(20px, 2vw, 26px); color: var(--encre); }
.horaires-bande__note { margin: 12px 0 0; font-size: 14px; color: var(--texte-doux); }
@media (max-width: 700px) {
  .horaires-bande { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .horaires-bande li:nth-child(3)::before { display: none; }
  .horaires-bande li:nth-child(n + 3) { border-top: 1px dashed var(--sable-bord); }
}

.acces-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 26px; }
@media (max-width: 860px) { .acces-duo { grid-template-columns: minmax(0, 1fr); } }
/* deux cartes claires, teintées chacune de leur couleur, sans panneaux routiers */
.acces-mode {
  display: flex; flex-direction: column; gap: 18px; padding: 26px 28px;
  border-radius: 24px; position: relative; overflow: hidden;
  background: linear-gradient(160deg, #fff 0%, #fff 55%, var(--rose-pale) 100%);
  border: 1px solid var(--rose-bord); box-shadow: 0 14px 34px rgba(163, 36, 95, 0.1);
  transition: transform var(--moyen) var(--sortie), box-shadow var(--moyen) ease;
}
.acces-mode--train {
  background: linear-gradient(160deg, #fff 0%, #fff 55%, var(--turquoise-pale) 100%);
  border-color: var(--turquoise-bord); box-shadow: 0 14px 34px rgba(0, 106, 96, 0.1);
}
.acces-mode:hover { transform: translateY(-3px); box-shadow: 0 20px 42px rgba(29, 24, 25, 0.12); }
.acces-mode__tete { display: flex; align-items: center; gap: 14px; }
.acces-mode__ico {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
  color: #fff; background: linear-gradient(135deg, var(--rose), var(--rose-fonce));
  box-shadow: 0 8px 18px rgba(232, 64, 144, 0.32);
}
.acces-mode--train .acces-mode__ico { background: linear-gradient(135deg, var(--turquoise), var(--turquoise-fonce)); box-shadow: 0 8px 18px rgba(0, 168, 152, 0.3); }
.acces-mode__titre { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--titre); font-weight: 400; font-size: 26px; line-height: 1.1; color: var(--encre); }
.acces-mode__duree { display: block; margin-top: 3px; font-size: 13.5px; font-weight: 600; color: var(--texte-doux); }
.ligne-p {
  width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center;
  background: #f0b400; color: var(--encre); font: 800 15px/1 Arial, sans-serif;
}
/* le trajet en fil : une ligne verticale, une puce par étape */
.acces-fil { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; position: relative; }
.acces-fil::before {
  content: ''; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--rose-bord), var(--rose));
}
.acces-mode--train .acces-fil::before { background: linear-gradient(180deg, var(--turquoise-bord), var(--turquoise)); }
.acces-fil li { position: relative; display: flex; align-items: center; gap: 12px; padding-left: 24px; font-size: 15px; line-height: 1.4; color: var(--encre); }
.acces-fil li::before {
  content: ''; position: absolute; left: 0; top: 50%; translate: 0 -50%;
  width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2.5px solid var(--rose); box-sizing: border-box;
}
.acces-mode--train .acces-fil li::before { border-color: var(--turquoise); }
.acces-fil li.acces-fil__fin::before { background: var(--rose); box-shadow: 0 0 0 4px var(--rose-pale); }
.acces-mode--train .acces-fil li.acces-fil__fin::before { background: var(--turquoise); box-shadow: 0 0 0 4px var(--turquoise-pale); }
.acces-puce {
  flex: 0 0 auto; min-width: 74px; padding: 5px 10px; border-radius: var(--r-pill); text-align: center;
  font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: var(--rose-fonce); background: var(--rose-pale);
}
.acces-mode--train .acces-puce { color: var(--turquoise-encre); background: var(--turquoise-pale); }
.acces-gps { display: grid; gap: 3px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.8); border: 1px dashed var(--rose-bord); }
.acces-gps span { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gris); }
.acces-gps b { font-size: 14.5px; font-weight: 700; color: var(--encre); line-height: 1.4; }
.acces-mode .btn { align-self: flex-start; margin-top: auto; }
@media (prefers-reduced-motion: reduce) { .acces-mode { transition: none; } .acces-mode:hover { transform: none; } }
/* la carte d'itinéraire prend désormais toute la largeur */
.route:not(:has(.route__panneau)) { grid-template-columns: minmax(0, 1fr); margin-top: 22px; }

/* plan officiel de la Ville : même écriture que les cartes voiture / train */
.plan-officiel--moderne {
  border-radius: 24px; overflow: hidden; border: 1px solid var(--rose-bord);
  background: linear-gradient(160deg, #fff 0%, #fff 55%, var(--rose-pale) 100%);
  box-shadow: 0 14px 34px rgba(163, 36, 95, 0.1);
  transition: transform var(--moyen) var(--sortie), box-shadow var(--moyen) ease;
}
.plan-officiel--moderne:hover { transform: translateY(-3px); box-shadow: 0 20px 42px rgba(29, 24, 25, 0.12); }
.plan-officiel--moderne .plan-vue { border-radius: 18px; margin: 14px; width: calc(100% - 28px); overflow: hidden; background: #fff; box-shadow: 0 6px 18px rgba(29, 24, 25, 0.1); }
.plan-officiel--moderne .plan-vue__loupe {
  border-radius: var(--r-pill); background: linear-gradient(135deg, var(--rose), var(--rose-fonce));
  color: #fff; box-shadow: 0 6px 14px rgba(232, 64, 144, 0.34);
}
.plan-officiel--moderne .plan-officiel__texte { background: transparent; }
.plan-officiel--moderne .titre-m { font-size: clamp(22px, 2vw, 26px); }
.plan-officiel--moderne .plan-officiel__chiffres { gap: 10px; }
.plan-officiel--moderne .plan-officiel__chiffres > div {
  padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--rose-bord); text-align: center;
}
.plan-officiel--moderne .plan-officiel__chiffres > div:nth-child(2) { border-color: var(--turquoise-bord); }
@media (prefers-reduced-motion: reduce) { .plan-officiel--moderne { transition: none; } .plan-officiel--moderne:hover { transform: none; } }

/* navettes : mêmes cartes arrondies et teintées que les accès voiture / train */
.navette-carte {
  border-radius: 24px; overflow: hidden; border: 1px solid var(--rose-bord);
  background: linear-gradient(170deg, #fff 0%, #fff 60%, var(--rose-pale) 100%);
  box-shadow: 0 14px 34px rgba(163, 36, 95, 0.1);
  transition: transform var(--moyen) var(--sortie), box-shadow var(--moyen) ease;
}
.navette-carte--vert {
  border-color: var(--turquoise-bord);
  background: linear-gradient(170deg, #fff 0%, #fff 60%, var(--turquoise-pale) 100%);
  box-shadow: 0 14px 34px rgba(0, 106, 96, 0.1);
}
.navette-carte:hover { transform: translateY(-3px); box-shadow: 0 20px 42px rgba(29, 24, 25, 0.12); }
.navette-carte .plan-vue { margin: 14px 14px 0; width: calc(100% - 28px); border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 6px 18px rgba(29, 24, 25, 0.1); }
.navette-carte .plan-vue__loupe {
  border-radius: var(--r-pill); color: #fff;
  background: linear-gradient(135deg, var(--rose), var(--rose-fonce)); box-shadow: 0 6px 14px rgba(232, 64, 144, 0.34);
}
.navette-carte--vert .plan-vue__loupe { background: linear-gradient(135deg, var(--turquoise), var(--turquoise-fonce)); box-shadow: 0 6px 14px rgba(0, 168, 152, 0.3); }
.navette-carte .titre-m { font-size: clamp(22px, 2vw, 26px); }
/* les lignes d'information deviennent de petites cases blanches */
.navette-carte .duo {
  padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--rose-bord);
}
.navette-carte--vert .duo { border-color: var(--turquoise-bord); }
.navette-carte .depliant summary { border-radius: var(--r-pill); }
@media (prefers-reduced-motion: reduce) { .navette-carte { transition: none; } .navette-carte:hover { transform: none; } }

/* retrait des cartons : mêmes cartes que les accès et les navettes */
.fiche__etapes { gap: 20px; }
.fiche__etape {
  border-radius: 24px; padding: 24px 26px; border: 1px solid var(--rose-bord);
  background: linear-gradient(160deg, #fff 0%, #fff 55%, var(--rose-pale) 100%);
  box-shadow: 0 14px 34px rgba(163, 36, 95, 0.1);
  transition: transform var(--moyen) var(--sortie), box-shadow var(--moyen) ease;
}
.fiche__etape--turquoise {
  border-color: var(--turquoise-bord);
  background: linear-gradient(160deg, #fff 0%, #fff 55%, var(--turquoise-pale) 100%);
  box-shadow: 0 14px 34px rgba(0, 106, 96, 0.1);
}
.fiche__etape:hover { transform: translateY(-3px); box-shadow: 0 20px 42px rgba(29, 24, 25, 0.12); }
.fiche__etape .fiche__num {
  width: 52px; height: 52px; border-radius: 16px; font-size: 22px; color: #fff; border: 0;
  background: linear-gradient(135deg, var(--rose), var(--rose-fonce)); box-shadow: 0 8px 18px rgba(232, 64, 144, 0.32);
}
.fiche__etape--turquoise .fiche__num { background: linear-gradient(135deg, var(--turquoise), var(--turquoise-fonce)); box-shadow: 0 8px 18px rgba(0, 168, 152, 0.3); }
.fiche__etape .fiche__phrase { font-size: 16px; line-height: 1.55; }
.fiche__etape .fiche__detail {
  margin-top: 12px; padding: 11px 14px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.85); border: 1px dashed var(--rose-bord);
}
.fiche__etape--turquoise .fiche__detail { border-color: var(--turquoise-bord); }
/* les quatre repères deviennent de petites cartes blanches */
.fiche__memo { gap: 10px; }
.fiche__memo li {
  padding: 12px 14px; border-radius: 16px; background: var(--blanc);
  border: 1px solid var(--sable-bord); box-shadow: 0 6px 16px rgba(29, 24, 25, 0.05);
  transition: transform var(--moyen) var(--sortie), border-color var(--moyen) ease;
}
.fiche__memo li:hover { transform: translateY(-2px); border-color: var(--rose-bord); }
.fiche__memo li b { color: var(--rose-fonce); }
.fiche__memo li:nth-child(even) b { color: var(--turquoise-encre); }
@media (prefers-reduced-motion: reduce) {
  .fiche__etape, .fiche__memo li { transition: none; }
  .fiche__etape:hover, .fiche__memo li:hover { transform: none; }
}


/* ==========================================================================
   Billetterie — concert et menu, mêmes cartes que les Infos pratiques
   ========================================================================== */
.soiree-paire { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 24px; align-items: stretch; }
@media (max-width: 860px) { .soiree-paire { grid-template-columns: minmax(0, 1fr); } }
.soiree-carte {
  display: flex; flex-direction: column; gap: 18px; padding: 28px 30px;
  border-radius: 24px; border: 1px solid var(--rose-bord);
  background: linear-gradient(160deg, #fff 0%, #fff 55%, var(--rose-pale) 100%);
  box-shadow: 0 14px 34px rgba(163, 36, 95, 0.1);
  transition: transform var(--moyen) var(--sortie), box-shadow var(--moyen) ease;
}
.soiree-carte--vert {
  border-color: var(--turquoise-bord);
  background: linear-gradient(160deg, #fff 0%, #fff 55%, var(--turquoise-pale) 100%);
  box-shadow: 0 14px 34px rgba(0, 106, 96, 0.1);
}
.soiree-carte:hover { transform: translateY(-3px); box-shadow: 0 20px 42px rgba(29, 24, 25, 0.12); }
.soiree-carte__tete { display: flex; align-items: center; gap: 14px; }
.soiree-carte__ico {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
  font-size: 24px; color: #fff;
  background: linear-gradient(135deg, var(--rose), var(--rose-fonce)); box-shadow: 0 8px 18px rgba(232, 64, 144, 0.32);
}
.soiree-carte--vert .soiree-carte__ico { background: linear-gradient(135deg, var(--turquoise), var(--turquoise-fonce)); box-shadow: 0 8px 18px rgba(0, 168, 152, 0.3); }
.soiree-carte__sur { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rose-fonce); }
.soiree-carte--vert .soiree-carte__sur { color: var(--turquoise-encre); }
.soiree-carte__titre { margin: 3px 0 0; font-family: var(--titre); font-weight: 400; font-size: clamp(23px, 2.1vw, 28px); line-height: 1.12; color: var(--encre); }
.soiree-carte__texte { margin: 0; font-size: 16px; line-height: 1.65; color: var(--texte-doux); }
.soiree-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.soiree-points li {
  display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.85); border: 1px solid var(--turquoise-bord);
}
.soiree-points b { font-size: 15px; color: var(--turquoise-encre); }
.soiree-points span { font-size: 14px; color: var(--texte-doux); }
/* le menu : une ligne par service, intitulé à gauche, plat à droite */
.menu-net { list-style: none; margin: 0; padding: 0; display: grid; }
.menu-net li {
  display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: baseline;
  padding: 11px 0; border-bottom: 1px dashed var(--rose-bord);
}
.menu-net li:last-child { border-bottom: 0; }
.menu-net span { font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rose-fonce); }
.menu-net b { font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--encre); }
.soiree-prix {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 18px; border-radius: 16px; background: rgba(255, 255, 255, 0.85); border: 1px solid var(--rose-bord);
}
.soiree-prix__montant { font-family: var(--titre); font-size: 44px; line-height: 1; color: var(--rose-fonce); }
.soiree-prix__detail { font-size: 14px; line-height: 1.35; color: var(--texte-doux); }
.soiree-prix__places {
  margin-left: auto; padding: 6px 12px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 700; color: #fff; background: var(--encre);
}
.soiree-carte__cta { align-self: center; margin-top: auto; }
@media (prefers-reduced-motion: reduce) { .soiree-carte { transition: none; } .soiree-carte:hover { transform: none; } }


/* ==========================================================================
   Contact — cartes modernes, même esprit que les Infos pratiques
   ========================================================================== */
.contact-form, .contact-carte {
  border-radius: 24px; border: 1px solid var(--rose-bord); padding: 30px 32px;
  background: linear-gradient(160deg, #fff 0%, #fff 60%, var(--rose-pale) 100%);
  box-shadow: 0 14px 34px rgba(163, 36, 95, 0.1);
}
.contact-form__tete, .contact-carte__tete { display: flex; align-items: center; gap: 14px; }
.contact-ico {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
  color: #fff; background: linear-gradient(135deg, var(--rose), var(--rose-fonce));
  box-shadow: 0 8px 18px rgba(232, 64, 144, 0.3);
}
.contact-ico img { width: 66%; }
.contact-sur { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rose-fonce); }
.contact-titre { margin: 3px 0 0; font-family: var(--titre); font-weight: 400; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.12; color: var(--encre); }
.contact-titre--s { font-size: clamp(18px, 1.5vw, 21px); }
.contact-form__aide { margin: 16px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--texte-doux); }
/* champs plus doux, focus rosé */
.contact-form .champ input, .contact-form .champ select, .contact-form .champ textarea {
  border-radius: 14px; border-color: var(--sable-bord); background: #fff;
  transition: border-color var(--vite) ease, box-shadow var(--vite) ease;
}
.contact-form .champ input:focus, .contact-form .champ select:focus, .contact-form .champ textarea:focus {
  outline: none; border-color: var(--rose); box-shadow: 0 0 0 4px var(--rose-pale);
}

.contact-infos { display: grid; gap: 16px; align-content: start; }
.contact-liens { display: grid; gap: 10px; margin-top: 20px; }
.contact-lien {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 16px;
  background: rgba(255, 255, 255, 0.9); border: 1px solid var(--rose-bord); text-decoration: none; color: var(--encre);
  transition: transform var(--moyen) var(--sortie), border-color var(--vite) ease;
}
.contact-lien:hover, .contact-lien:focus-visible { transform: translateX(4px); border-color: var(--rose); color: var(--encre); }
.contact-lien__ico {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: var(--rose-pale); color: var(--rose-fonce);
}
.contact-lien > span:last-child { display: grid; gap: 1px; min-width: 0; }
.contact-lien i { font-style: normal; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gris); }
.contact-lien b { font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.contact-adresses { display: grid; gap: 12px; margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--rose-bord); }
.contact-adresses > div { display: flex; gap: 12px; align-items: flex-start; }
.contact-adresses__ico { flex: 0 0 auto; color: var(--rose); margin-top: 2px; }
.contact-adresses p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--texte-doux); }
.contact-adresses i { display: block; font-style: normal; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--encre); }
.contact-carte__note { margin: 14px 0 0; font-size: 13px; color: var(--gris); }

/* les deux raccourcis : une ligne, une icône, une flèche */
.contact-raccourci {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 20px; text-decoration: none;
  background: #fff; border: 1px solid var(--rose-bord); box-shadow: 0 10px 24px rgba(163, 36, 95, 0.08);
  transition: transform var(--moyen) var(--sortie), box-shadow var(--moyen) ease;
}
.contact-raccourci:hover, .contact-raccourci:focus-visible { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(29, 24, 25, 0.12); }
.contact-raccourci--vert { border-color: var(--turquoise-bord); box-shadow: 0 10px 24px rgba(0, 106, 96, 0.08); }
.contact-raccourci--vert .contact-ico { background: linear-gradient(135deg, var(--turquoise), var(--turquoise-fonce)); box-shadow: 0 8px 18px rgba(0, 168, 152, 0.3); }
.contact-raccourci__texte { flex: 1 1 auto; display: grid; gap: 2px; min-width: 0; }
.contact-raccourci__texte i { font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rose-fonce); }
.contact-raccourci--vert .contact-raccourci__texte i { color: var(--turquoise-encre); }
.contact-raccourci__texte b { font-size: 16px; color: var(--encre); overflow-wrap: anywhere; }
.contact-raccourci__fleche { font-size: 20px; color: var(--rose); transition: transform var(--moyen) var(--sortie); }
.contact-raccourci--vert .contact-raccourci__fleche { color: var(--turquoise); }
.contact-raccourci:hover .contact-raccourci__fleche { transform: translateX(4px); }
@media (max-width: 600px) { .contact-form, .contact-carte { padding: 24px 20px; } }
@media (prefers-reduced-motion: reduce) {
  .contact-lien, .contact-raccourci, .contact-raccourci__fleche { transition: none; }
}


/* ==========================================================================
   Bouton Accessibilité — médaillon aux deux profils, vivant et bien visible
   ========================================================================== */
.acces__bouton {
  position: relative; gap: 12px; min-height: 70px; padding: 6px 24px 6px 6px; font-size: 16px;
  background: linear-gradient(135deg, var(--turquoise), var(--turquoise-fonce));
  box-shadow: 0 12px 28px rgba(0, 106, 96, 0.36), inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}
.acces__medaille {
  position: relative; flex: 0 0 auto; width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center; background: var(--rose); color: #fff;
  box-shadow: 0 0 0 3px #fff, 0 6px 14px rgba(163, 36, 95, 0.4);
  transition: transform 420ms var(--sortie);
}
/* deux ondes qui rappellent sa présence, sans insister */
.acces__medaille::before, .acces__medaille::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid var(--rose); pointer-events: none;
  animation: accesOnde 3.4s ease-out infinite;
}
.acces__medaille::after { animation-delay: 1.7s; }
@keyframes accesOnde {
  0% { opacity: 0.85; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(1.75); }
}
.acces__tete { fill: #fff; }
.acces__tete--arriere { fill: var(--turquoise-encre); opacity: 1; }
.acces__bouton:hover .acces__medaille, .acces__bouton:focus-visible .acces__medaille { transform: rotate(-12deg) scale(1.08); }
.acces__bouton:hover, .acces__bouton:focus-visible {
  background: linear-gradient(135deg, var(--turquoise-fonce), var(--turquoise-encre));
  box-shadow: 0 16px 34px rgba(0, 106, 96, 0.44), inset 0 0 0 2px #fff;
}
.acces__bouton:focus-visible { outline: 3px solid var(--rose); outline-offset: 4px; }
.acces--ouvert .acces__medaille { transform: rotate(0) scale(1); background: var(--rose-fonce); }
.acces--ouvert .acces__medaille::before, .acces--ouvert .acces__medaille::after { animation: none; opacity: 0; }

/* la bulle d'accueil, au premier passage uniquement */
.acces__bulle {
  position: absolute; left: 6px; bottom: calc(100% + 12px); white-space: nowrap;
  padding: 7px 13px; border-radius: 12px; background: var(--encre); color: #fff;
  font-size: 13px; font-weight: 600; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  opacity: 0; translate: 0 6px; pointer-events: none;
  transition: opacity 320ms ease, translate 320ms var(--sortie);
}
.acces__bulle::after {
  content: ''; position: absolute; left: 18px; top: 100%;
  border: 7px solid transparent; border-top-color: var(--encre); border-bottom: 0;
}
.acces--salut .acces__bulle,
.acces__bouton:hover .acces__bulle, .acces__bouton:focus-visible .acces__bulle { opacity: 1; translate: 0 0; }
.acces--ouvert .acces__bulle { opacity: 0 !important; }
.acces--salut .acces__medaille { animation: accesSalut 900ms var(--sortie) 2; }
@keyframes accesSalut {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-16deg) scale(1.1); }
  60% { transform: rotate(10deg) scale(1.05); }
}
@media (max-width: 700px) {
  .acces__bouton { padding: 5px; min-height: 64px; }
  .acces__medaille { width: 54px; height: 54px; }
  .acces__bulle { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .acces__medaille::before, .acces__medaille::after, .acces--salut .acces__medaille { animation: none; }
  .acces__medaille { transition: none; }
}
html.acces-calme .acces__medaille::before, html.acces-calme .acces__medaille::after { animation: none; opacity: 0; }

/* le pictogramme officiel, redessiné en blanc dans le rond vert du site */
/* rond rose sur le bouton vert : les visages blancs ressortent nettement */
.acces__medaille { background: var(--rose); padding: 0; border-radius: 50%; }
.acces__medaille img { position: relative; z-index: 1; width: 100%; height: 100%; display: block; object-fit: contain; border-radius: 50%; }
.acces__bouton:hover .acces__medaille, .acces--ouvert .acces__medaille { background: var(--rose-fonce); }

/* message d'erreur d'envoi d'un formulaire */
.confirmation.confirmation--erreur {
  background: #fdeef0; border-color: #f2b8c2; color: #9c1f3c;
}
button[type="submit"]:disabled { opacity: 0.7; cursor: progress; }


/* ==========================================================================
   Page 404 — la vachette fait le zéro
   ========================================================================== */
.p404 {
  position: relative; overflow: hidden; isolation: isolate; color: #fff;
  background: linear-gradient(172deg, #f07bb0 0%, #e8559e 48%, #cf3f86 100%);
  padding: clamp(40px, 6vw, 72px) 0 clamp(70px, 8vw, 96px);
}
.p404__fond { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.p404__bulle {
  position: absolute; border-radius: 50%;
  animation: p404Bulle 12s ease-in-out infinite;
}
@keyframes p404Bulle {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(14px, -22px) scale(1.08); }
  66% { transform: translate(-12px, 12px) scale(0.94); }
}
.p404__page {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; gap: clamp(28px, 5vw, 70px);
}

/* le « 4 · vachette · 4 » */
.p404__code {
  margin: 0; display: flex; align-items: center; gap: clamp(6px, 1vw, 14px);
  font-family: var(--titre); font-weight: 400; line-height: 0.8;
}
.p404__chiffre {
  font-size: clamp(120px, 15vw, 210px); color: #fff;
  text-shadow: 0 10px 0 rgba(163, 36, 95, 0.28), 0 22px 40px rgba(120, 12, 62, 0.28);
  animation: p404Chiffre 5s ease-in-out infinite;
}
.p404__chiffre:last-child { animation-delay: -2.5s; }
@keyframes p404Chiffre {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-10px) rotate(2deg); }
}
.p404__rond {
  position: relative; flex: 0 0 auto; margin: 0 clamp(22px, 2.6vw, 38px);
  width: clamp(120px, 14vw, 196px); aspect-ratio: 1;
}
.p404__disque {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  background: var(--creme); display: grid; place-items: center;
  box-shadow: 0 18px 40px rgba(120, 12, 62, 0.34), inset 0 0 0 6px #fff;
  animation: p404Balance 6s ease-in-out infinite;
}
.p404__disque img { width: 74%; height: auto; }
@keyframes p404Balance {
  0%, 100% { rotate: -6deg; } 50% { rotate: 6deg; }
}
.p404__anneau {
  position: absolute; inset: -14px; border-radius: 50%;
  border: 2.5px dashed rgba(255, 255, 255, 0.85);
  animation: p404Tourne 18s linear infinite;
}
.p404__anneau--2 {
  inset: -30px; border: 2px dotted rgba(0, 168, 152, 0.75);
  animation-duration: 26s; animation-direction: reverse;
}
@keyframes p404Tourne { to { rotate: 360deg; } }
/* deux petites billes en orbite */
.p404__point {
  position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; background: var(--turquoise); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.5);
  animation: p404Orbite 7s linear infinite;
}
.p404__point--b { background: #fff; width: 10px; height: 10px; margin: -5px 0 0 -5px; animation-duration: 11s; animation-direction: reverse; }
@keyframes p404Orbite {
  from { transform: rotate(0deg) translateX(calc(clamp(120px, 14vw, 196px) / 2 + 30px)); }
  to { transform: rotate(360deg) translateX(calc(clamp(120px, 14vw, 196px) / 2 + 30px)); }
}

.p404__texte { max-width: 560px; }
.p404__etiq {
  display: inline-flex; padding: 7px 14px; border-radius: var(--r-pill); white-space: nowrap;
  background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.4);
  font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: #fff;
}
.p404__titre {
  margin: 16px 0 0; font-family: var(--titre); font-weight: 400;
  font-size: clamp(32px, 3.6vw, 50px); line-height: 1.08; color: #fff; text-wrap: balance;
}
.p404__chapeau {
  margin: 16px 0 0; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.7;
  color: rgba(255, 255, 255, 0.95); text-wrap: pretty;
}
.p404__actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 28px; }
.p404__retour {
  color: #fff; font-weight: 700; font-size: 15px; text-decoration: none;
  border-bottom: 2px solid rgba(255, 255, 255, 0.5); padding-bottom: 2px;
  transition: border-color var(--vite) ease;
}
.p404__retour:hover, .p404__retour:focus-visible { color: #fff; border-color: #fff; }

/* les raccourcis */
.p404__liens {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
  margin-top: 28px;
}
.p404__lien {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px;
  background: var(--blanc); border: 1px solid var(--sable-bord); border-radius: var(--r-l);
  text-decoration: none; color: var(--encre); box-shadow: 0 6px 16px rgba(29, 24, 25, 0.05);
  transition: transform var(--moyen) var(--sortie), box-shadow var(--moyen) ease, border-color var(--moyen) ease;
}
.p404__lien:hover, .p404__lien:focus-visible {
  transform: translateY(-3px); border-color: var(--rose-bord);
  box-shadow: 0 14px 28px rgba(232, 64, 144, 0.14); color: var(--encre);
}
.p404__ico {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 14px;
  display: grid; place-items: center; background: var(--rose-pale); color: var(--rose-fonce);
  transition: background var(--moyen) ease, color var(--moyen) ease;
}
.p404__lien:nth-child(even) .p404__ico { background: var(--turquoise-pale); color: var(--turquoise-encre); }
.p404__lien:hover .p404__ico { background: var(--rose); color: #fff; }
.p404__lien:nth-child(even):hover .p404__ico { background: var(--turquoise); }
.p404__lien > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; flex: 1; }
.p404__lien b { font-size: 16px; }
.p404__lien i { font-style: normal; font-size: 13px; color: var(--gris); }
.p404__fleche { color: var(--rose); font-weight: 700; transition: transform var(--moyen) var(--sortie); }
.p404__lien:hover .p404__fleche { transform: translateX(4px); }

@media (max-width: 900px) {
  .p404__page { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .p404__actions { justify-content: center; }
  .p404__liens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .p404__liens { grid-template-columns: minmax(0, 1fr); }
  .p404__rond { margin: 0 16px; }
  .p404__chiffre { font-size: 104px; }
  .p404__rond { width: 106px; }
  .p404__anneau--2, .p404__point { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .p404__bulle, .p404__chiffre, .p404__disque, .p404__anneau, .p404__point { animation: none; }
}

/* bouton vert du logo, cerclé de blanc */
.btn--vert-logo {
  background: var(--turquoise); color: #fff; border: 2px solid #fff;
  box-shadow: 0 10px 24px rgba(0, 106, 96, 0.3);
}
.btn--vert-logo:hover, .btn--vert-logo:focus-visible { background: var(--turquoise-fonce); color: #fff; }
.btn--vert-logo:active { background: var(--turquoise-encre); color: #fff; transform: translateY(0) scale(0.97); }


/* ==========================================================================
   Page Contact — version modernisée
   ========================================================================== */
/* colonnes rééquilibrées : la colonne de droite a la place de ses numéros */
.contact-grille { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 28px; align-items: stretch; }
@media (max-width: 1080px) { .contact-grille { grid-template-columns: minmax(0, 1fr); } }

/* un numéro de téléphone ne se coupe jamais */
.contact-page .tel, .contact-lien .tel, .contact-raccourci .tel { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* formulaire : carte blanche, liseré dégradé en tête */
.contact-form {
  position: relative; overflow: hidden;
  background: var(--blanc); border: 1px solid var(--sable-bord); border-radius: 26px;
  padding: clamp(24px, 3vw, 38px); box-shadow: 0 20px 50px rgba(120, 12, 62, 0.08);
}
.contact-form::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px;
  background: linear-gradient(90deg, var(--rose), #f07bb0 50%, var(--turquoise));
}
.contact-form__tete { display: flex; align-items: center; gap: 14px; }
.contact-form .contact-ico { background: var(--rose-pale); color: var(--rose-fonce); }

/* colonne de droite */
.contact-infos { display: flex; flex-direction: column; gap: 16px; }

/* la fiche du comité : en-tête rosé dégradé, vachette dans son médaillon */
.contact-carte--comite {
  position: relative; overflow: hidden; padding: 0;
  background: var(--blanc); border: 1px solid var(--sable-bord); border-radius: 26px;
  box-shadow: 0 20px 50px rgba(120, 12, 62, 0.08);
}
.contact-carte--comite .contact-carte__tete {
  display: flex; align-items: center; gap: 16px; padding: 22px 24px 24px;
  background: linear-gradient(150deg, #f07bb0 0%, var(--rose) 60%, #cf3f86 100%); color: #fff;
}
.contact-carte--comite .contact-carte__tete .contact-ico {
  flex: 0 0 auto; width: 62px; height: 62px; border-radius: 50%;
  background: var(--creme); display: grid; place-items: center;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.45), 0 10px 22px rgba(120, 12, 62, 0.28);
}
.contact-carte--comite .contact-carte__tete .contact-ico img { width: 74%; rotate: -6deg; }
.contact-carte--comite .contact-sur { color: rgba(255, 255, 255, 0.9); }
.contact-carte--comite .contact-titre--s { color: #fff; margin: 4px 0 0; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.2; }

/* téléphone et courriel : deux tuiles côte à côte */
.contact-liens {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px;
  padding: 18px 20px 0;
}
.contact-lien {
  display: grid; gap: 10px; align-content: start; padding: 14px 16px 16px;
  border-radius: 18px; text-decoration: none; color: var(--encre);
  background: var(--creme); border: 1px solid var(--sable-bord);
  transition: transform var(--moyen) var(--sortie), box-shadow var(--moyen) ease, border-color var(--moyen) ease;
}
.contact-lien:hover, .contact-lien:focus-visible {
  transform: translateY(-3px); border-color: var(--rose-bord); color: var(--encre);
  box-shadow: 0 14px 28px rgba(232, 64, 144, 0.14);
}
.contact-lien__ico {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: var(--rose); color: #fff; transition: rotate var(--moyen) var(--sortie);
}
.contact-lien:nth-child(2) .contact-lien__ico { background: var(--turquoise); }
.contact-lien:hover .contact-lien__ico { rotate: -8deg; }
.contact-lien > span:last-child { display: grid; gap: 2px; min-width: 0; }
.contact-lien i {
  font-style: normal; font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--gris);
}
.contact-lien b { font-family: var(--titre); font-weight: 400; font-size: clamp(17px, 1.45vw, 20px); line-height: 1.2; color: var(--encre); }
/* le courriel est long : il peut passer à la ligne après l'arobase, pas le numéro */
.contact-lien:nth-child(2) b { font-size: 15px; font-family: inherit; font-weight: 700; overflow-wrap: anywhere; }

/* les deux adresses */
.contact-adresses { display: grid; gap: 10px; padding: 16px 20px 0; }
.contact-adresses > div {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px;
  border-radius: 16px; background: var(--sable);
}
.contact-adresses__ico {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--blanc); color: var(--rose-fonce);
}
.contact-adresses p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--encre); }
.contact-adresses i {
  display: block; font-style: normal; font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--rose-fonce); margin-bottom: 2px;
}
.contact-carte__note {
  display: flex; align-items: center; gap: 9px; margin: 16px 20px 20px;
  font-size: 13.5px; font-weight: 600; color: var(--turquoise-encre);
}
.contact-carte__puce {
  width: 9px; height: 9px; border-radius: 50%; background: var(--turquoise); flex: 0 0 auto;
  box-shadow: 0 0 0 0 rgba(0, 168, 152, 0.5); animation: contactPuce 2.4s ease-out infinite;
}
@keyframes contactPuce { 0% { box-shadow: 0 0 0 0 rgba(0, 168, 152, 0.5); } 70%, 100% { box-shadow: 0 0 0 9px rgba(0, 168, 152, 0); } }

/* raccourcis : tuiles colorées pleines */
.contact-raccourci {
  display: flex; align-items: center; gap: 14px; padding: 16px 20px;
  border-radius: 22px; text-decoration: none; color: #fff;
  background: linear-gradient(135deg, #f07bb0, var(--rose)); border: 0;
  box-shadow: 0 14px 30px rgba(232, 64, 144, 0.26);
  transition: transform var(--moyen) var(--sortie), box-shadow var(--moyen) ease;
}
.contact-raccourci--vert { background: linear-gradient(135deg, #1fbfad, var(--turquoise-fonce)); box-shadow: 0 14px 30px rgba(0, 106, 96, 0.26); }
.contact-raccourci:hover, .contact-raccourci:focus-visible { transform: translateY(-3px); color: #fff; }
.contact-raccourci .contact-ico {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.95); color: var(--rose-fonce);
}
.contact-raccourci--vert .contact-ico { color: var(--turquoise-encre); }
.contact-raccourci__texte { display: grid; gap: 2px; min-width: 0; flex: 1; }
.contact-raccourci__texte i,
.contact-raccourci--vert .contact-raccourci__texte i { font-style: normal; font-size: 13px; color: rgba(255, 255, 255, 0.92); }
.contact-raccourci--vert .contact-raccourci__texte b { color: #fff; }
.contact-raccourci__texte b { font-family: var(--titre); font-weight: 400; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.15; color: #fff; }
.contact-raccourci__fleche {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.2); font-weight: 700; transition: transform var(--moyen) var(--sortie);
}
.contact-raccourci:hover .contact-raccourci__fleche { transform: translateX(4px); }

@media (max-width: 460px) {
  .contact-liens { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .contact-carte__puce { animation: none; }
  .contact-lien, .contact-raccourci, .contact-lien__ico, .contact-raccourci__fleche { transition: none; }
}

/* Tablette et smartphone : tout le contenu des affiches de page est centré,
   texte comme ticket, sur toute la largeur de l'écran. */
@media (max-width: 1180px) {
  .affiche-page { min-height: 0; }
  .billet-graphique { transform: none; animation: none; }
  .affiche-page__grille { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .affiche-page__texte { display: flex; flex-direction: column; align-items: center; width: 100%; }
  .affiche-page__titre, .affiche-page__chapeau { margin-left: auto; margin-right: auto; }
  .affiche-page__chapeau { max-width: 60ch; }
  .affiche-page__tags { justify-content: center; }
  .affiche-page__billet { justify-self: center; width: 100%; max-width: 460px; margin: 0 auto; }
  .billet-graphique { text-align: left; }
}
@media (max-width: 620px) {
  .affiche-page__billet { max-width: 100%; }
}

/* Infos pratiques : fonds légèrement plus soutenus, pour que les cartes
   blanches, les plans et les fiches se détachent nettement */
.page-compacte main { background: linear-gradient(180deg, #d4ebe3 0%, #deeee7 55%, #ece3d2 100%); }
.page-compacte .ancres { background: rgba(212, 235, 227, 0.97); }
.page-compacte .ancres .page::after { background: linear-gradient(90deg, rgba(212, 235, 227, 0), rgba(212, 235, 227, 0.97)); }
.page-compacte .bloc--creme { background: #efe6d6; }
.page-compacte .bloc--sable { background: #dcebe4; }

/* Infos pratiques : les perforations du bas de l'affiche prennent la teinte
   du fond de page qui suit, au lieu du crème des autres pages */
.page-compacte .affiche-page__dents {
  background: radial-gradient(circle at 50% 50%, #d4ebe3 0 8px, transparent 9px) 0 0 / 30px 22px repeat-x;
}

/* bulles du héros : même cycle de 20 s (4 photos × 5 s) pour les trois, afin
   que les photos d'inauguration se relaient d'une bulle à l'autre :
   séquence 1 dans la grande bulle, 2 dans la deuxième, 3 et 4 dans la petite */
@keyframes c77Defilement4 { 0%, 21% { opacity: 1; } 25%, 96% { opacity: 0; } 100% { opacity: 1; } }
.c77__vue--b img, .c77__vue--c img, .c77__vue--e img { animation-name: c77Defilement4; animation-duration: 20s; }
.c77__vue--b img:nth-child(1) { animation-delay: 0s; }
.c77__vue--b img:nth-child(2) { animation-delay: 5s; }
.c77__vue--b img:nth-child(3) { animation-delay: 10s; }
.c77__vue--b img:nth-child(4) { animation-delay: 15s; }
.c77__vue--c img:nth-child(1) { animation-delay: 0.6s; }
.c77__vue--c img:nth-child(2) { animation-delay: 5.6s; }
.c77__vue--c img:nth-child(3) { animation-delay: 10.6s; }
.c77__vue--c img:nth-child(4) { animation-delay: 15.6s; }
.c77__vue--e img:nth-child(1) { animation-delay: 1.2s; }
.c77__vue--e img:nth-child(2) { animation-delay: 6.2s; }
.c77__vue--e img:nth-child(3) { animation-delay: 11.2s; }
.c77__vue--e img:nth-child(4) { animation-delay: 16.2s; }

/* Actualités Facebook en pavés hébergés sur le site (plus de module tiers) */
.fb-paves { display: grid; gap: 12px; margin: 18px clamp(22px, 2.4vw, 30px) 0; }
.fb-pave {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center;
  padding: 10px; border-radius: 18px; text-decoration: none; color: var(--encre);
  background: var(--creme); border: 1px solid var(--sable-bord);
  transition: transform var(--moyen) var(--sortie), box-shadow var(--moyen) ease, border-color var(--moyen) ease;
}
.fb-pave:hover, .fb-pave:focus-visible {
  transform: translateY(-2px); color: var(--encre); border-color: #bcd3f7;
  box-shadow: 0 12px 26px rgba(24, 119, 242, 0.14);
}
.fb-pave__img { display: block; width: 96px; height: 80px; border-radius: 12px; overflow: hidden; background: var(--sable); }
.fb-pave__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: scale 500ms var(--sortie); }
.fb-pave:hover .fb-pave__img img { scale: 1.06; }
.fb-pave__corps { display: grid; gap: 3px; min-width: 0; }
.fb-pave__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fb-pave__etiq {
  padding: 2px 8px; border-radius: var(--r-pill); background: #e7f0fe; color: #1452b8;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.fb-pave__meta time { font-family: var(--mono); font-size: 11px; color: var(--gris); }
.fb-pave__titre { font-family: var(--titre); font-weight: 400; font-size: 17px; line-height: 1.2; }
.fb-pave__texte {
  font-size: 13.5px; line-height: 1.45; color: var(--texte-doux);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fb > .fb__lien { align-self: center; margin-top: 16px; margin-bottom: clamp(22px, 2.4vw, 28px); }
@media (max-width: 480px) {
  .fb-paves { margin-left: 14px; margin-right: 14px; }
  .fb-pave { grid-template-columns: 76px minmax(0, 1fr); gap: 11px; }
  .fb-pave__img { width: 76px; height: 70px; }
}
@media (prefers-reduced-motion: reduce) { .fb-pave, .fb-pave__img img { transition: none; } }

/* ============ Accueil — actualités en carrousel ============ */
.actus { position: relative; }
.actus__piste {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 20px) / 4);
  gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 6px 0 18px; scrollbar-width: none; overscroll-behavior-x: contain;
}
.actus__piste::-webkit-scrollbar { display: none; }
.actus__piste:focus-visible { outline: 2px solid var(--rose); outline-offset: 4px; border-radius: var(--r-l); }
@media (max-width: 1240px) { .actus__piste { grid-auto-columns: calc((100% - 2 * 20px) / 3); } }
@media (max-width: 900px) { .actus__piste { grid-auto-columns: calc((100% - 20px) / 2); } }
@media (max-width: 700px) { .actus__piste { grid-auto-columns: 84%; gap: 14px; } }
.actu {
  scroll-snap-align: start; display: flex; flex-direction: column; overflow: hidden;
  background: var(--blanc); border-radius: var(--r-xl); border: 1px solid var(--sable-bord);
  box-shadow: var(--ombre-m); transition: transform var(--moyen) var(--sortie), box-shadow var(--moyen) ease;
}
.actu:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(84, 12, 48, 0.16); }
.actu__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--sable); }
.actu__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: scale 600ms var(--sortie); }
.actu:hover .actu__img img { scale: 1.05; }
.actu__corps { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; flex: 1 1 auto; }
.actu__meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.actu__cat {
  padding: 4px 10px; border-radius: var(--r-pill); background: var(--rose-pale); color: var(--rose-fonce);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.actu__date { font-family: var(--mono); font-size: 11.5px; font-weight: 700; color: var(--gris); text-transform: uppercase; }
.actu__titre { margin: 4px 0 0; font-family: var(--titre); font-weight: 400; font-size: 20px; line-height: 1.2; color: var(--encre); }
.actu__texte { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--texte-doux); flex: 1 1 auto; }
.actu__suivre {
  align-self: flex-start; margin-top: 6px; display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: var(--r-pill); background: var(--turquoise); color: #fff;
  font-size: 14px; font-weight: 700; text-decoration: none;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
  transition: background var(--vite) ease, transform var(--moyen) var(--sortie);
}
.actu__suivre span { transition: translate var(--moyen) var(--sortie); }
.actu__suivre:hover, .actu__suivre:focus-visible { background: var(--turquoise-encre); color: #fff; transform: translateY(-1px); }
.actu__suivre:hover span { translate: 4px 0; }
.actus__nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 8px; }
.actus__fleche {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--sable-bord); cursor: pointer;
  background: var(--blanc); color: var(--encre); font-size: 18px; box-shadow: var(--ombre-s, 0 4px 10px rgba(0,0,0,.08));
  transition: background var(--vite) ease, color var(--vite) ease, opacity var(--vite) ease;
}
.actus__fleche:hover:not(:disabled) { background: var(--rose); color: #fff; border-color: var(--rose); }
.actus__fleche:disabled { opacity: 0.35; cursor: default; }
.actus__points { display: flex; gap: 7px; }
.actus__points i {
  width: 22px; height: 6px; border-radius: 3px; background: var(--sable-fonce);
  transition: width var(--moyen) var(--sortie), background var(--vite) ease;
}
.actus__points i.actif { width: 42px; background: var(--rose); }
@media (prefers-reduced-motion: reduce) {
  .actus__piste { scroll-behavior: auto; }
  .actu, .actu__img img, .actu__suivre, .actu__suivre span { transition: none; }
}

/* actualité d'hommage : ton sobre, sans couleur de fête */
.actu--hommage .actu__cat { background: #ece7e2; color: #3b3132; }
.actu--hommage .actu__img img { filter: grayscale(0.35); }
.actu--hommage .actu__suivre { background: var(--encre); }
.actu--hommage .actu__suivre:hover, .actu--hommage .actu__suivre:focus-visible { background: #3b3132; }

/* flèches sur les côtés du carrousel, à mi-hauteur des cartes */
.actus { padding: 0 34px; }
.actus__nav { margin-top: 10px; }
.actus__nav .actus__fleche {
  position: absolute; top: calc(50% - 26px); translate: 0 -50%; z-index: 2;
  width: 52px; height: 52px; font-size: 20px;
  background: var(--rose); color: #fff; border-color: var(--rose);
  box-shadow: 0 10px 24px rgba(232, 64, 144, 0.34);
}
.actus__nav [data-actus-prec] { left: -8px; }
.actus__nav [data-actus-suiv] { right: -8px; }
.actus__nav .actus__fleche:hover:not(:disabled) { background: var(--rose-fonce); border-color: var(--rose-fonce); scale: 1.06; }
.actus__nav .actus__fleche:disabled { opacity: 0.3; }
.actu__titre { font-size: 18px; }
.actu__texte { font-size: 14px; }
@media (max-width: 700px) {
  .actus { padding: 0; }
  .actus__nav .actus__fleche { position: static; translate: none; width: 44px; height: 44px; }
}

/* ============ Actualités : filtres, carrousel à translation, 3 colonnes ============ */
.nouv { --par: 3; --ecart: 20px; }
@media (max-width: 1000px) { .nouv { --par: 2; } }
@media (max-width: 640px) { .nouv { --par: 1; } }
.nouv__filtres { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 22px; }
.nouv__filtre {
  padding: 8px 16px; border-radius: var(--r-pill); cursor: pointer;
  border: 1.5px solid var(--sable-bord); background: var(--blanc); color: var(--texte-doux);
  font-family: inherit; font-size: 14px; font-weight: 600;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.nouv__filtre:hover { border-color: var(--rose); color: var(--rose-fonce); transform: translateY(-1px); }
.nouv__filtre[aria-selected="true"] { background: var(--rose); border-color: var(--rose); color: #fff; }
.nouv__filtre i { font-style: normal; font-size: 12px; opacity: 0.75; margin-left: 5px; }
/* les flèches vivent dans leurs propres colonnes, jamais sur les cartes */
.nouv__cadre { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; gap: 14px; align-items: center; }
.nouv__fenetre { overflow: hidden; padding: 6px 0 14px; }
.nouv__piste {
  display: flex; gap: var(--ecart);
  transition: transform 420ms cubic-bezier(.22, .8, .24, 1);
  will-change: transform;
}
.nouv__piste > .actu { flex: 0 0 calc((100% - (var(--par) - 1) * var(--ecart)) / var(--par)); }
.nouv__piste > .actu.entre { animation: nouvEntre 340ms ease both; }
@keyframes nouvEntre { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
.nouv__fleche {
  width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; background: var(--rose); color: #fff;
  box-shadow: 0 10px 22px rgba(232, 64, 144, 0.3);
  transition: background 140ms ease, transform 140ms ease, opacity 140ms ease;
}
.nouv__fleche:hover:not(:disabled) { background: var(--rose-fonce); transform: scale(1.08); }
.nouv__fleche:active:not(:disabled) { transform: scale(0.94); }
.nouv__fleche:disabled { opacity: 0.28; cursor: default; box-shadow: none; }
.nouv__points { display: flex; justify-content: center; gap: 7px; margin-top: 6px; }
.nouv__points button {
  width: 22px; height: 6px; padding: 0; border: 0; border-radius: 3px; cursor: pointer;
  background: var(--sable-fonce); transition: width 260ms ease, background 160ms ease;
}
.nouv__points button.actif { width: 42px; background: var(--rose); }
.nouv__vide { padding: 40px 0; text-align: center; color: var(--gris); width: 100%; }
@media (max-width: 640px) {
  .nouv__cadre { grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 8px; }
  .nouv__fleche { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .nouv__piste { transition: none; } .nouv__piste > .actu.entre { animation: none; } }

/* ---- Actualités : ombre non tronquée et cartes affinées ----
   overflow:hidden coupait l'ombre des cartes en rectangle. La fenêtre coupe
   désormais uniquement sur les côtés (clip-path), l'ombre déborde librement
   en haut et en bas. */
/* la fenêtre laisse aussi l'ombre déborder sur les côtés ; les cartes hors
   champ sont masquées pour ne pas apparaître dans cette marge */
.nouv__fenetre { overflow: visible; clip-path: inset(-24px -40px -56px -40px); padding: 4px 0 10px; }
.nouv__piste > .actu { transition: transform 260ms cubic-bezier(.22, .8, .24, 1), box-shadow 260ms ease, opacity 300ms ease; }
/* l'animation d'entrée (fill both) imposait opacity 1 : on la neutralise ici */
.nouv__piste > .actu.hors { animation: none; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 300ms ease, visibility 0s linear 300ms; }
.nouv__piste > .actu:not(.hors) { visibility: visible; }
.nouv__piste { align-items: stretch; }
.nouv .actu {
  position: relative; border-radius: 22px; border: 0;
  background: var(--blanc);
  box-shadow: 0 1px 0 rgba(84, 12, 48, 0.06), 0 16px 30px -14px rgba(84, 12, 48, 0.28);
  transition: transform 260ms cubic-bezier(.22, .8, .24, 1), box-shadow 260ms ease;
}
.nouv .actu:hover { transform: translateY(-6px); box-shadow: 0 1px 0 rgba(84, 12, 48, 0.06), 0 26px 40px -16px rgba(84, 12, 48, 0.36); }
/* image plus haute, dégradé en pied, catégorie posée dessus */
.nouv .actu__img { position: relative; aspect-ratio: 4 / 3; border-radius: 22px 22px 0 0; }
.nouv .actu__img::after {
  content: ''; position: absolute; inset: auto 0 0; height: 45%;
  background: linear-gradient(180deg, rgba(29, 24, 25, 0), rgba(29, 24, 25, 0.42));
  pointer-events: none;
}
.nouv .actu__corps { padding: 16px 20px 20px; gap: 7px; }
.nouv .actu__meta { position: absolute; left: 14px; right: 14px; top: 14px; z-index: 1; }
.nouv .actu__cat {
  background: rgba(255, 255, 255, 0.94); color: var(--rose-fonce);
  box-shadow: 0 4px 12px rgba(29, 24, 25, 0.18); backdrop-filter: blur(4px);
}
.nouv .actu__date {
  padding: 4px 9px; border-radius: var(--r-pill);
  background: rgba(29, 24, 25, 0.55); color: #fff; font-size: 11px;
}
.nouv .actu__titre { margin: 2px 0 0; font-size: 19px; line-height: 1.22; }
.nouv .actu__texte {
  font-size: 14.5px; line-height: 1.6; text-wrap: pretty;
  min-height: calc(14.5px * 1.6 * 6);
}
.nouv .actu__suivre { margin-top: auto; padding: 9px 16px 9px 18px; }
.nouv .actu__corps > .actu__suivre { margin-top: 10px; }
.nouv .actu--hommage .actu__cat { color: #3b3132; }
@media (prefers-reduced-motion: reduce) { .nouv .actu { transition: none; } }

/* publication issue de la page Facebook : badge sur la photo, bouton bleu */
.actu__source {
  position: absolute; left: 14px; bottom: 12px; z-index: 1;
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 7px;
  border-radius: var(--r-pill); background: #1877f2; color: #fff;
  font-size: 12px; font-weight: 700; box-shadow: 0 6px 14px rgba(24, 119, 242, 0.4);
}
.nouv .actu__suivre--fb, .nouv .actu--hommage .actu__suivre--fb { background: #1877f2; }
.nouv .actu__suivre--fb:hover, .nouv .actu__suivre--fb:focus-visible,
.nouv .actu--hommage .actu__suivre--fb:hover { background: #0c5fcc; }

/* Le sous-menu collant se cale sous la hauteur réelle du menu, mesurée par le
   script : les valeurs fixes (118 / 84 / 76 px) ne correspondaient pas au
   menu sur tablette et téléphone, qui le recouvrait à moitié. */
.ancres { top: var(--h-entete, 118px); }
@media (max-width: 980px) { .guide__rail { top: var(--h-entete, 118px); } }

/* aperçu du plan : image statique, l'application n'est chargée qu'à l'ouverture */
.plan-cadre--apercu > img[data-plan-cadre] {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 40%;
}

/* Actualités sur smartphone : la carte prend toute la largeur, les flèches
   passent dessous, de part et d'autre des points */
@media (max-width: 640px) {
  .nouv__cadre { grid-template-columns: 1fr 1fr; gap: 12px 10px; }
  .nouv__fenetre { grid-column: 1 / -1; grid-row: 1; clip-path: inset(-24px -10px -56px -10px); }
  .nouv__fleche[data-nouv-prec] { grid-row: 2; grid-column: 1; justify-self: start; }
  .nouv__fleche[data-nouv-suiv] { grid-row: 2; grid-column: 2; justify-self: end; }
  .nouv__fleche { width: 46px; height: 46px; }
  .nouv__points { margin-top: -40px; min-height: 46px; align-items: center; pointer-events: none; }
  .nouv__points button { pointer-events: auto; }
  .nouv__filtres { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto;
    margin-left: calc(var(--gout) * -1); margin-right: calc(var(--gout) * -1);
    padding: 2px var(--gout) 6px; scrollbar-width: none; }
  .nouv__filtres::-webkit-scrollbar { display: none; }
  .nouv__filtre { flex: 0 0 auto; }
}
/* sur écran tactile, l'effet de survol ne doit pas rester accroché après un toucher */
@media (hover: none) { .nouv .actu:hover { transform: none; } }

/* Producteurs sur tablette et smartphone : les reportages défilent de gauche à
   droite au lieu de s'empiler — la page y gagne toute leur hauteur */
.defile-prod__points { display: none; }
@media (max-width: 1000px) {
  .entretiens--defile {
    display: flex; gap: calc(var(--gout) * 2); grid-template-columns: none;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    margin-left: calc(var(--gout) * -1); margin-right: calc(var(--gout) * -1);
    padding: 6px var(--gout) 18px; scroll-padding-left: var(--gout);
    scrollbar-width: none;
  }
  .entretiens--defile::-webkit-scrollbar { display: none; }
  .entretiens--defile > .entretien {
    flex: 0 0 calc((100% - var(--gout) * 2) / 2); scroll-snap-align: start; min-width: 0;
  }
  .defile-prod__points { display: flex; justify-content: center; gap: 7px; margin-top: 4px; }
  .defile-prod__points button {
    width: 22px; height: 6px; padding: 0; border: 0; border-radius: 3px; cursor: pointer;
    background: var(--sable-fonce); transition: width 260ms ease, background 160ms ease;
  }
  .defile-prod__points button.actif { width: 42px; background: var(--rose); }
}
@media (max-width: 640px) {
  .entretiens--defile > .entretien { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { .entretiens--defile { scroll-behavior: auto; } }

/* Tablette : bande de photos rectangulaires sous la carte, en défilement continu */
.c77__bande { display: none; }
@media (min-width: 701px) and (max-width: 1180px) {
  .c77__bande {
    display: block; width: 100%; margin-top: 18px; overflow: hidden; container-type: inline-size;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
  .c77__bande-rail {
    display: flex; gap: 2.4cqw; width: max-content;
    animation: c77Bande 28s linear infinite;
  }
  .c77__bande:hover .c77__bande-rail { animation-play-state: paused; }
  .c77__bande figure {
    flex: 0 0 auto; width: 27cqw; aspect-ratio: 4 / 3; margin: 0; overflow: hidden;
    border-radius: 14px; border: 3px solid rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 22px rgba(84, 12, 48, 0.24);
  }
  .c77__bande img { width: 100%; height: 100%; object-fit: cover; display: block; }
}
@keyframes c77Bande { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .c77__bande-rail { animation: none; } }
html.acces-calme .c77__bande-rail { animation: none !important; }

/* Smartphone : même bande de photos sous la carte, deux images à la fois */
@media (max-width: 700px) {
  .pile-bloc { flex-direction: column; align-items: flex-start; }
  .c77__bande {
    display: block; width: 100%; margin-top: 14px; overflow: hidden; container-type: inline-size;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  }
  .c77__bande-rail { display: flex; gap: 3cqw; width: max-content; animation: c77Bande 22s linear infinite; }
  .c77__bande figure {
    flex: 0 0 auto; width: 47cqw; aspect-ratio: 4 / 3; margin: 0; overflow: hidden;
    border-radius: 12px; border: 3px solid rgba(255, 255, 255, 0.92);
    box-shadow: 0 8px 18px rgba(84, 12, 48, 0.22);
  }
  .c77__bande img { width: 100%; height: 100%; object-fit: cover; display: block; }
}


/* ==========================================================================
   Exposants — lanceur du plan 2027 (remplace l'image d'aperçu)
   ========================================================================== */
.plan-lanceur {
  margin-top: 26px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(22px, 3vw, 44px); align-items: center;
  padding: clamp(24px, 3vw, 40px); border-radius: var(--r-xl);
  background: linear-gradient(140deg, var(--rose-pale) 0%, #fff 55%, var(--turquoise-pale) 100%);
  border: 1px solid var(--sable-bord); box-shadow: var(--ombre-m);
}
.plan-lanceur__badge {
  display: inline-flex; padding: 6px 13px; border-radius: var(--r-pill);
  background: var(--turquoise); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.plan-lanceur__titre {
  margin: 14px 0 0; font-family: var(--titre); font-weight: 400;
  font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; color: var(--encre);
}
.plan-lanceur__atouts { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.plan-lanceur__atouts li { display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--texte); }
.plan-lanceur__atouts i {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-style: normal; font-size: 15px;
  background: #fff; color: var(--rose-fonce); box-shadow: inset 0 0 0 1px var(--rose-bord);
}
.plan-lanceur__ouvrir {
  margin-top: 24px; display: inline-flex; align-items: center; gap: 11px;
  min-height: 54px; padding: 0 28px; border: 0; border-radius: var(--r-pill); cursor: pointer;
  background: var(--rose); color: #fff; font-family: inherit; font-size: 17px; font-weight: 700;
  box-shadow: 0 12px 26px rgba(232, 64, 144, 0.34);
  transition: background var(--vite) ease, transform var(--moyen) var(--sortie), box-shadow var(--moyen) ease;
}
.plan-lanceur__ouvrir span { font-size: 20px; line-height: 1; }
.plan-lanceur__ouvrir:hover, .plan-lanceur__ouvrir:focus-visible {
  background: var(--rose-fonce); transform: translateY(-2px); box-shadow: 0 16px 32px rgba(232, 64, 144, 0.4);
}
.plan-lanceur__ouvrir:focus-visible { outline: 3px solid var(--turquoise); outline-offset: 3px; }
.plan-lanceur__versions {
  margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 14px; color: var(--gris);
}
.plan-lanceur__versions a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: var(--r-pill);
  background: #fff; border: 1px solid var(--sable-bord); color: var(--turquoise-encre);
  font-weight: 600; text-decoration: none; transition: border-color var(--vite) ease, background var(--vite) ease;
}
.plan-lanceur__versions a:hover, .plan-lanceur__versions a:focus-visible { border-color: var(--turquoise); background: var(--turquoise-pale); }

/* le mini-plan : un schéma vivant, cliquable, qui donne envie d'ouvrir le vrai */
.plan-lanceur__visuel {
  position: relative; display: grid; gap: 12px; justify-items: center;
  padding: 0; border: 0; background: none; cursor: pointer; font-family: inherit;
}
.plan-mini {
  position: relative; width: 100%; aspect-ratio: 16 / 10;
  display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(4, 1fr);
  gap: 9px; padding: 16px; border-radius: 18px;
  background: #fff; box-shadow: 0 18px 40px rgba(84, 12, 48, 0.16), inset 0 0 0 1px var(--sable-bord);
  transition: transform var(--moyen) var(--sortie), box-shadow var(--moyen) ease;
}
.plan-lanceur__visuel:hover .plan-mini, .plan-lanceur__visuel:focus-visible .plan-mini {
  transform: translateY(-3px) rotate(-0.4deg); box-shadow: 0 24px 48px rgba(84, 12, 48, 0.22), inset 0 0 0 1px var(--rose-bord);
}
.plan-lanceur__visuel:focus-visible { outline: none; }
.plan-mini__stand { border-radius: 6px; background: var(--sable); box-shadow: inset 0 0 0 1px rgba(29, 24, 25, 0.06); }
.plan-mini__stand--fav { background: var(--rose-pale); box-shadow: inset 0 0 0 1.5px var(--rose-bord); }
.plan-mini__stand--vise { background: var(--turquoise); animation: planVise 2.2s ease-in-out infinite; }
@keyframes planVise {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 168, 152, 0.45); }
  50% { box-shadow: 0 0 0 9px rgba(0, 168, 152, 0); }
}
/* deux allées qui se croisent, en pointillés qui avancent */
.plan-mini__allee { position: absolute; background-size: 14px 3px; animation: planAllee 1.4s linear infinite; }
.plan-mini__allee--h { left: 16px; right: 16px; top: 50%; height: 3px; margin-top: -1.5px;
  background-image: linear-gradient(90deg, var(--rose) 55%, transparent 0); }
.plan-mini__allee--v { top: 16px; bottom: 16px; left: 50%; width: 3px; margin-left: -1.5px;
  background-image: linear-gradient(180deg, var(--rose) 55%, transparent 0); background-size: 3px 14px; }
@keyframes planAllee { to { background-position: 14px 0, 0 14px; } }
.plan-mini__repere {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  padding: 5px 11px; border-radius: var(--r-pill); background: var(--encre); color: #fff;
  font-size: 11.5px; font-weight: 700; white-space: nowrap; box-shadow: 0 6px 14px rgba(29, 24, 25, 0.3);
}
.plan-lanceur__invite {
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rose-fonce);
}
@media (max-width: 860px) {
  .plan-lanceur { grid-template-columns: minmax(0, 1fr); }
  .plan-lanceur__visuel { order: -1; }
}
@media (prefers-reduced-motion: reduce) {
  .plan-mini__stand--vise, .plan-mini__allee { animation: none; }
}
html.acces-calme .plan-mini__stand--vise, html.acces-calme .plan-mini__allee { animation: none !important; }

/* Exposants — choix entre les deux plans 2027 */
.plan-choix { margin-top: 22px; display: grid; gap: 12px; }
.plan-choix__carte {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
  width: 100%; padding: 14px 18px; border-radius: 16px; cursor: pointer; text-align: left;
  font-family: inherit; color: #fff; border: 0;
  box-shadow: 0 10px 24px rgba(16, 15, 24, 0.12);
  transition: transform var(--vite) var(--sortie), box-shadow var(--vite) ease, filter var(--vite) ease;
}
.plan-choix__carte--chapiteau { background: linear-gradient(135deg, var(--rose), var(--rose-fonce)); }
.plan-choix__carte--exterieur { background: linear-gradient(135deg, var(--turquoise), var(--turquoise-encre)); }
.plan-choix__carte:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(16, 15, 24, 0.18); filter: brightness(1.04); }
.plan-choix__carte:active { transform: translateY(0) scale(0.99); }
.plan-choix__carte:focus-visible { outline: 3px solid var(--encre); outline-offset: 3px; }
.plan-choix__ico {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); font-size: 20px;
}
.plan-choix__txt { display: grid; gap: 2px; }
.plan-choix__txt b { font-size: 16.5px; font-weight: 700; }
.plan-choix__txt small { font-size: 13px; color: rgba(255, 255, 255, 0.92); }
.plan-choix__fleche { font-size: 20px; transition: transform var(--vite) var(--sortie); }
.plan-choix__carte:hover .plan-choix__fleche { transform: translateX(4px); }

/* ==========================================================================
   Exposants — deux tuiles illustrées : dedans / dehors
   ========================================================================== */
.plan-duo { margin-top: 26px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 26px); }
.plan-tuile {
  position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden;
  padding: 0; border: 0; border-radius: 26px; cursor: pointer; text-align: left;
  font-family: inherit; color: #fff; isolation: isolate;
  box-shadow: 0 18px 40px rgba(16, 15, 24, 0.14);
  transition: transform 320ms var(--sortie), box-shadow 320ms ease;
}
.plan-tuile--dedans { background: linear-gradient(160deg, #f05a9e 0%, var(--rose) 45%, var(--rose-fonce) 100%); }
.plan-tuile--dehors { background: linear-gradient(160deg, #22bfae 0%, var(--turquoise) 45%, var(--turquoise-encre) 100%); }
.plan-tuile:hover { transform: translateY(-4px); box-shadow: 0 26px 54px rgba(16, 15, 24, 0.22); }
.plan-tuile:active { transform: translateY(-1px) scale(0.995); }
.plan-tuile:focus-visible { outline: 3px solid var(--encre); outline-offset: 4px; }

/* la scène illustrée */
.plan-tuile__scene { position: relative; display: block; height: clamp(170px, 17vw, 220px); margin: 18px 18px 0; border-radius: 18px; overflow: hidden; }
.plan-tuile--dedans .plan-tuile__scene { background: rgba(255, 255, 255, 0.12); }
.plan-tuile--dehors .plan-tuile__scene { background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0 38%, rgba(255, 255, 255, 0.08) 38%); }

/* chapiteau : toit festonné + sol quadrillé de stands */
.plan-tuile__toit {
  position: absolute; left: 8%; right: 8%; top: 12%; height: 30%;
  background: repeating-linear-gradient(90deg, #fff 0 12.5%, rgba(255, 255, 255, 0.78) 12.5% 25%);
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
  filter: drop-shadow(0 6px 10px rgba(120, 12, 62, 0.25));
  transition: transform 420ms var(--sortie);
}
/* lambrequin festonné sous le toit : une rangée de demi-disques */
.plan-tuile__feston {
  position: absolute; left: 8%; right: 8%; top: 42%; height: 12px; z-index: 2;
  background: radial-gradient(circle at 50% 0, #fff 0 9px, transparent 9.5px) 0 0 / 18px 12px repeat-x;
  filter: drop-shadow(0 3px 3px rgba(120, 12, 62, 0.18));
}
.plan-tuile__sol {
  position: absolute; left: 8%; right: 8%; top: 42%; bottom: 10%;
  border-radius: 0 0 10px 10px; background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 22px rgba(120, 12, 62, 0.22);
}
.plan-tuile__stands {
  position: absolute; inset: 18px 14px 10px; display: grid;
  grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(3, 1fr); gap: 5px;
}
.plan-tuile__stands i { border-radius: 3px; background: #f7c5dc; transition: background 300ms ease; }
.plan-tuile__stands i:nth-child(5n+2) { background: var(--rose); }
.plan-tuile__stands i:nth-child(7n+4) { background: #fbe0ec; }
.plan-tuile__allee { display: none; }

/* plein air : ciel, soleil, pré, chemin, tentes et arbres */
.plan-tuile__soleil {
  position: absolute; right: 12%; top: 11%; width: 38px; height: 38px; border-radius: 50%;
  background: #fff3b8; box-shadow: 0 0 0 8px rgba(255, 243, 184, 0.28), 0 0 0 18px rgba(255, 243, 184, 0.12);
  transition: transform 520ms var(--sortie);
}
.plan-tuile__pre { position: absolute; left: 0; right: 0; bottom: 0; top: 38%; }
.plan-tuile__chemin {
  position: absolute; left: -5%; right: -5%; top: 48%; height: 14px; border-radius: 7px;
  background: rgba(255, 255, 255, 0.55); transform: rotate(-4deg);
}
.plan-tuile__tentes {
  position: absolute; left: 10%; right: 26%; top: 12%; bottom: 14%;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 8px 14px;
}
.plan-tuile__tentes i {
  background: #fff; border-radius: 3px 3px 2px 2px;
  clip-path: polygon(0 38%, 50% 0, 100% 38%, 100% 100%, 0 100%);
  box-shadow: 0 4px 8px rgba(0, 70, 64, 0.2);
}
.plan-tuile__tentes i:nth-child(4n+2) { background: #c9f0ea; }
.plan-tuile__tentes i:nth-child(3) { background: #ffe6a8; }
.plan-tuile__arbre { position: absolute; width: 26px; height: 26px; border-radius: 50%; background: #0b7d71; box-shadow: inset -5px -5px 0 rgba(0, 0, 0, 0.12); }
.plan-tuile__arbre--1 { right: 10%; top: 14%; }
.plan-tuile__arbre--2 { right: 16%; bottom: 12%; width: 20px; height: 20px; }
.plan-tuile__arbre--3 { right: 4%; bottom: 28%; width: 18px; height: 18px; }

.plan-tuile:hover .plan-tuile__toit { transform: translateY(-4px); }
.plan-tuile:hover .plan-tuile__soleil { transform: translate(-6px, 4px) scale(1.08); }

/* texte */
.plan-tuile__corps { display: grid; align-content: start; gap: 6px; padding: 18px 24px 22px; }
.plan-tuile__lieu { display: grid; gap: 2px; font-family: var(--titre); font-size: clamp(24px, 2.3vw, 32px); line-height: 1.05; }
.plan-tuile__lieu em {
  font-style: normal; font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}
.plan-tuile__info { font-size: 14.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.94); }
.plan-tuile__cta {
  justify-self: start; margin-top: 10px; display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 20px; border-radius: var(--r-pill);
  background: #fff; font-weight: 700; font-size: 15px;
  box-shadow: 0 8px 18px rgba(16, 15, 24, 0.14);
}
.plan-tuile--dedans .plan-tuile__cta { color: var(--rose-fonce); }
.plan-tuile--dehors .plan-tuile__cta { color: var(--turquoise-encre); }
.plan-tuile__cta b { font-weight: 400; transition: transform 260ms var(--sortie); }
.plan-tuile:hover .plan-tuile__cta b { transform: translateX(5px); }

@media (max-width: 720px) {
  .plan-duo { grid-template-columns: 1fr; }
  .plan-tuile__scene { height: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .plan-tuile, .plan-tuile__toit, .plan-tuile__soleil, .plan-tuile__cta b { transition: none; }
}

/* Exposants — scène « plein air » : barnums sous une guirlande de fanions */
.plan-tuile--dehors .plan-tuile__scene {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.1) 70%);
}
.plan-tuile__fanions {
  position: absolute; left: 4%; right: 4%; top: 12%; height: 22px;
  display: flex; justify-content: space-between; border-top: 2px solid rgba(255, 255, 255, 0.8);
}
.plan-tuile__fanions i {
  width: 7%; height: 18px; background: #fff; clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: 50% 0; animation: fanionVent 3.4s ease-in-out infinite;
}
.plan-tuile__fanions i:nth-child(3n+2) { background: #ffe39a; animation-delay: -0.8s; }
.plan-tuile__fanions i:nth-child(3n) { background: #f7a8cb; animation-delay: -1.6s; }
@keyframes fanionVent { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }

.plan-tuile__barnums {
  position: absolute; left: 7%; right: 7%; bottom: 17%; top: 32%;
  display: flex; align-items: flex-end; gap: 6%;
}
.barnum { position: relative; display: flex; flex-direction: column; filter: drop-shadow(0 8px 10px rgba(0, 60, 54, 0.25)); }
.barnum--g { flex: 1.25; height: 100%; }
.barnum--m { flex: 1; height: 86%; }
.barnum--p { flex: 0.8; height: 72%; }
.barnum__toit {
  flex: 0 0 34%;
  background: repeating-linear-gradient(90deg, #fff 0 16.66%, #c9f0ea 16.66% 33.33%);
  clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%);
}
.barnum__lambrequin {
  flex: 0 0 9px;
  background: radial-gradient(circle at 50% 0, #fff 0 6px, transparent 6.5px) 0 0 / 12px 9px repeat-x;
}
.barnum__corps {
  flex: 1; position: relative;
  background:
    linear-gradient(90deg, #fff 0 4px, transparent 4px calc(100% - 4px), #fff calc(100% - 4px));
}
/* le comptoir */
.barnum__corps::after {
  content: ""; position: absolute; left: 10%; right: 10%; bottom: 0; height: 38%;
  border-radius: 3px 3px 0 0; background: rgba(255, 255, 255, 0.92);
}
.barnum--m .barnum__toit { background: repeating-linear-gradient(90deg, #fff 0 16.66%, #ffe39a 16.66% 33.33%); }
.plan-tuile__herbe {
  position: absolute; left: 0; right: 0; bottom: 0; height: 18%;
  background: rgba(255, 255, 255, 0.2); border-radius: 50% 50% 0 0 / 30% 30% 0 0;
}
.plan-tuile--dehors:hover .barnum { transform: translateY(-3px); transition: transform 320ms var(--sortie); }
.plan-tuile--dehors .barnum { transition: transform 320ms var(--sortie); }
.plan-tuile--dehors:hover .barnum--m { transition-delay: 60ms; }
.plan-tuile--dehors:hover .barnum--p { transition-delay: 120ms; }

/* bande d'outils sous les tuiles */
.plan-outils {
  margin-top: 22px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: 20px; padding: 18px 20px 18px 24px; border-radius: 22px;
  background: var(--blanc); border: 1px solid var(--sable-bord); box-shadow: var(--ombre-s, 0 6px 18px rgba(16,15,24,.06));
}
.plan-outils__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.plan-outils__liste li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; }
.plan-outils__liste b { display: block; font-size: 15px; color: var(--encre); }
.plan-outils__liste small { display: block; font-size: 13px; line-height: 1.45; color: var(--texte-doux); margin-top: 2px; }
.plan-outils__ico {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; color: #fff;
}
.plan-outils__ico--rose { background: var(--rose); }
.plan-outils__ico--turquoise { background: var(--turquoise); }
.plan-outils__aide {
  display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 22px 0 10px;
  border-radius: var(--r-pill); border: 0; cursor: pointer; font-family: inherit; text-align: left;
  background: var(--encre); color: #fff;
  transition: transform var(--vite) var(--sortie), box-shadow var(--vite) ease, background var(--vite) ease;
}
.plan-outils__aide:hover { transform: translateY(-2px); background: #2c2527; box-shadow: 0 12px 26px rgba(16, 15, 24, 0.22); }
.plan-outils__aide:focus-visible { outline: 3px solid var(--rose); outline-offset: 3px; }
.plan-outils__aide b { display: block; font-size: 15px; }
.plan-outils__aide small { display: block; font-size: 12.5px; color: rgba(255, 255, 255, 0.78); }
.plan-outils__aide-ico {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--rose); font-weight: 700; font-size: 17px;
}
@media (max-width: 980px) {
  .plan-outils { grid-template-columns: 1fr; }
  .plan-outils__aide { justify-self: start; }
}
@media (max-width: 720px) {
  .plan-outils__liste { grid-template-columns: 1fr; gap: 14px; }
  .plan-outils { padding: 18px; }
  .plan-outils__aide { justify-self: stretch; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .plan-tuile__fanions i { animation: none; } }

/* Marguerite : suggestions repliables pour laisser la place à la réponse */
.vache__chips-bascule {
  display: none; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill);
  font-size: 12.5px; font-weight: 600; color: var(--turquoise-encre);
  background: transparent; border: 1px dashed var(--turquoise-bord, #9fd8d1); cursor: pointer;
}
.vache__chips-bascule::after { content: "▴"; font-size: 11px; }
.vache__chips--repli .vache__chips-bascule::after { content: "▾"; }
.vache__chips--repli .vache__chip { display: none; }
.vache__chips--repli .vache__chips-bascule, .vache__fil:not(:empty) ~ .vache__chips .vache__chips-bascule { display: inline-flex; }
.vache__chips--repli { padding: 8px 14px 2px; }

/* ── Accueil : encart des accroches du héros ───────────────────────────────
   Une carte vitrée, une étiquette numérotée par accroche, un texte qui se
   dévoile ligne par ligne et une jauge qui file dans la pastille active. */
.encart-accroche {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: 18px; max-width: 56ch; padding: 20px 24px 16px;
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.08));
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 18px 40px rgba(120, 16, 66, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  animation: encartEntre 900ms var(--sortie) 300ms both;
}
/* liseré lumineux qui balaie le haut de la carte */
.encart-accroche::before {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  background: linear-gradient(90deg, transparent, #fff 45%, #fff 55%, transparent);
  opacity: 0.85; transform: translateX(-100%);
  animation: encartBalaye 9.5s ease-in-out infinite;
}
.encart-accroche__lueur {
  position: absolute; z-index: -1; right: -60px; top: -70px; width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 70%);
  animation: encartLueur 9s ease-in-out infinite;
}
.encart-accroche .heros__chapeau--defile { margin: 0; max-width: none; }
.encart-accroche .slogan { font-size: 17.5px; line-height: 1.58; font-weight: 600; color: #fff; }
.slogan__oeil {
  display: flex; align-items: center; gap: 10px; margin-bottom: 9px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff;
}
.slogan__oeil i {
  font-style: normal; display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px;
  border-radius: 10px; background: #fff; color: var(--rose-encre); letter-spacing: 0.04em; font-size: 12px;
  box-shadow: 0 6px 14px rgba(120, 16, 66, 0.22);
}
/* l'accroche active : étiquette puis texte, en léger décalé */
.encart-accroche .slogan.actif .slogan__oeil { animation: accrocheOeil 560ms var(--sortie) both; }
.encart-accroche .slogan.actif .slogan__oeil i { animation: accrochePastille 620ms cubic-bezier(.34, 1.56, .64, 1) both; }
.encart-accroche .slogan.actif { animation: accrocheTexte 700ms var(--sortie) 90ms both; }

/* pastilles : la pastille active se remplit pendant la durée de l'accroche */
.encart-accroche .slogan-points {
  margin-top: 14px; padding-top: 12px; gap: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.32);
}
.encart-accroche .slogan-points button { width: auto; height: 24px; }
.encart-accroche .slogan-points button::before {
  width: 26px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.38);
}
.encart-accroche .slogan-points button.actif::before {
  width: 60px; background: rgba(255, 255, 255, 0.38);
}
.encart-accroche .slogan-points button::after {
  content: ""; position: absolute; left: 50%; top: 50%; height: 6px; width: 60px; margin: -3px 0 0 -30px;
  border-radius: 3px; background: #fff; transform-origin: 0 50%; transform: scaleX(0); opacity: 0;
}
.encart-accroche .slogan-points button.actif::after { opacity: 1; animation: accrocheJauge 9.5s linear both; }
.encart-accroche--pause .slogan-points button.actif::after,
.encart-accroche--pause::before { animation-play-state: paused; }

@keyframes encartEntre { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes encartBalaye { 0%, 12% { transform: translateX(-100%); } 46%, 100% { transform: translateX(100%); } }
@keyframes encartLueur { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-26px, 18px) scale(1.12); } }
@keyframes accrocheOeil { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes accrochePastille { from { transform: scale(0.4) rotate(-14deg); } to { transform: none; } }
@keyframes accrocheTexte { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes accrocheJauge { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* tablette et téléphone : carte centrée, texte centré */
@media (max-width: 1024px) {
  .encart-accroche { margin-left: auto; margin-right: auto; margin-bottom: 28px; text-align: center; }
  .encart-accroche .slogan__oeil { justify-content: center; }
  .encart-accroche .slogan-points { justify-content: center; }
}
@media (max-width: 560px) {
  .encart-accroche { padding: 16px 16px 12px; border-radius: 18px; }
  .encart-accroche .slogan { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .encart-accroche, .encart-accroche::before, .encart-accroche__lueur,
  .encart-accroche .slogan.actif, .encart-accroche .slogan.actif .slogan__oeil,
  .encart-accroche .slogan.actif .slogan__oeil i { animation: none; }
  .encart-accroche .slogan-points button.actif::after { animation: none; transform: scaleX(1); }
}

/* ── Programme : les deux soirées mises en relief en tête de page ──
   Fond clair et chaud, cadre fin, titre surmonté d'une rangée d'ampoules
   façon marquise de théâtre ; les affiches flottent avec une ombre douce. */
.soirees-relief {
  position: relative; isolation: isolate;
  background:
    radial-gradient(70% 90% at 50% 0%, #ffffff 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #faf5ec 0%, #f3ead9 100%);
  border-top: 1px solid var(--sable-bord); border-bottom: 1px solid var(--sable-bord);
}
.soirees-relief__tete { text-align: center; max-width: 720px; margin: 0 auto 32px; }
.soirees-relief__tete .titre-xl { margin-top: 10px; }
.soirees-relief__tete .filet { margin-left: auto; margin-right: auto; }
.soirees-relief__chapeau { margin: 14px auto 0; font-size: 16.5px; line-height: 1.6; color: var(--texte-doux); text-wrap: pretty; }
/* rangée d'ampoules qui scintillent l'une après l'autre */
.marquise { display: flex; justify-content: center; margin-bottom: 16px; }
.marquise span {
  display: block; width: 230px; height: 10px;
  background: radial-gradient(circle, #e8b33a 0 3.2px, rgba(232, 179, 58, 0.25) 3.6px 4.6px, transparent 5px) 0 50% / 23px 10px repeat-x;
  filter: drop-shadow(0 0 4px rgba(232, 179, 58, 0.55));
  animation: marquiseScintille 1.8s steps(2, jump-none) infinite;
}
@keyframes marquiseScintille { 0% { opacity: 1; } 50% { opacity: 0.55; } 100% { opacity: 1; } }
.soirees-relief .affiches { gap: 30px; }
.soirees-relief .affiche {
  border-color: var(--sable-bord);
  box-shadow: 0 2px 0 rgba(255, 255, 255, 0.8) inset, 0 22px 50px rgba(70, 48, 22, 0.14);
  transition: transform 320ms var(--sortie), box-shadow 320ms var(--sortie);
}
.soirees-relief .affiche:hover { transform: translateY(-6px); box-shadow: 0 30px 64px rgba(70, 48, 22, 0.2); }
@media (prefers-reduced-motion: reduce) { .marquise span { animation: none; } }

/* bouton « Infos et billetterie » posé en haut de l'image */
.affiche__billet {
  position: absolute; top: 16px; right: 16px; z-index: 4;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 18px; border-radius: var(--r-pill);
  background: var(--rose); color: #fff; text-decoration: none;
  font-size: 15px; font-weight: 700; letter-spacing: 0.01em;
  box-shadow: 0 10px 26px rgba(150, 24, 84, 0.45), 0 0 0 3px rgba(255, 255, 255, 0.9);
  transition: transform 220ms var(--sortie), box-shadow 220ms var(--sortie), background 220ms ease;
}
.affiche--samedi .affiche__billet { background: var(--turquoise-encre, #007f73); box-shadow: 0 10px 26px rgba(0, 90, 82, 0.45), 0 0 0 3px rgba(255, 255, 255, 0.9); }
.affiche__billet span { font-size: 13px; }
.affiche__billet i { font-style: normal; transition: transform 220ms var(--sortie); }
.affiche__billet:hover, .affiche__billet:focus-visible { color: #fff; transform: translateY(-2px); }
.affiche__billet:hover i, .affiche__billet:focus-visible i { transform: translateX(4px); }
.affiche__billet:active { transform: translateY(0) scale(0.98); }
.affiche__mention { font-size: 13.5px; color: var(--texte-doux); text-align: right; }
@media (max-width: 560px) {
  .affiche__billet { top: 12px; right: 12px; padding: 9px 14px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .soirees-relief .affiche:hover, .affiche__billet:hover { transform: none; } }


/* -------------- Annonce billetterie : cartouche au-dessus du compte à rebours */
.rebours__annonce {
  grid-column: 1 / -1; justify-self: center; order: -1;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 20px 10px 15px; border-radius: 999px;
  font-size: 15.5px; color: var(--encre); text-decoration: none; background: #fff;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32), 0 0 0 3px rgba(232, 64, 144, 0.55);
  transition: transform var(--vite) var(--sortie), box-shadow var(--vite) ease;
}
.rebours__annonce b { color: var(--rose-encre, #b51f68); font-weight: 800; margin-right: 4px; }
.rebours__annonce i {
  width: 10px; height: 10px; border-radius: 50%; background: var(--rose); flex: none;
  animation: annoncePouls 1.8s ease-out infinite;
}
@keyframes annoncePouls {
  from { box-shadow: 0 0 0 0 rgba(232, 64, 144, 0.6); }
  to { box-shadow: 0 0 0 10px rgba(232, 64, 144, 0); }
}
.rebours__annonce-fleche {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--turquoise); color: #fff; font-weight: 700;
  transition: transform var(--vite) var(--sortie);
}
.rebours__annonce:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4), 0 0 0 4px rgba(232, 64, 144, 0.75); }
.rebours__annonce:hover .rebours__annonce-fleche { transform: translateX(3px); }
.rebours__annonce--ouverte { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32), 0 0 0 3px rgba(0, 168, 152, 0.6); }
.rebours__annonce--ouverte i { background: var(--turquoise); animation-name: annoncePoulsVert; }
.rebours__annonce--ouverte b { color: var(--turquoise-encre, #00756a); }
@keyframes annoncePoulsVert {
  from { box-shadow: 0 0 0 0 rgba(0, 168, 152, 0.6); }
  to { box-shadow: 0 0 0 10px rgba(0, 168, 152, 0); }
}
@media (max-width: 760px) {
  .rebours__annonce { font-size: 14px; border-radius: 18px; padding: 10px 14px; text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .rebours__annonce i { animation: none; } }

/* ------------------------------------------ Dépôt de fichier (extrait Kbis) */
.depot {
  position: relative; display: grid; justify-items: center; gap: 6px; margin-top: 8px;
  padding: 22px 18px; border-radius: 14px; text-align: center; cursor: pointer;
  border: 2px dashed var(--turquoise-bord, #9fd8d1); background: #f4fbfa;
  transition: border-color var(--vite) ease, background var(--vite) ease, transform var(--vite) var(--sortie);
}
.depot:hover, .depot--survol { border-color: var(--turquoise); background: #e8f7f5; }
.depot--survol { transform: scale(1.01); }
.depot:focus-within { outline: 3px solid rgba(0, 168, 152, 0.35); outline-offset: 2px; }
.depot__fichier { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.depot__icone {
  width: 40px; height: 40px; border-radius: 50%; background: var(--turquoise);
  -webkit-mask: none; position: relative;
}
.depot__icone::before {
  content: ""; position: absolute; inset: 0; background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V5M7 10l5-5 5 5M5 19h14'/%3E%3C/svg%3E") center / 20px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V5M7 10l5-5 5 5M5 19h14'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.depot__texte { font-size: 15px; color: var(--texte); }
.depot__texte b { color: var(--turquoise-encre, #00756a); }
.depot__aide { font-size: 13px; color: var(--texte-doux); }
.depot--plein { border-style: solid; border-color: var(--turquoise); background: #e8f7f5; }
.depot--plein .depot__icone::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
}
.depot--erreur { border-color: var(--rose); background: #fdf1f6; }
.depot--erreur .depot__icone { background: var(--rose); }

/* ------------------------ Espace exposant : colonne « Où exposer » + contact */
.espaces-ex__colonne { position: sticky; top: 130px; }
.espaces-ex__colonne .question-ex { margin-top: 0; }
.espaces-ex {
  padding: 28px 28px 10px; border-radius: var(--r-xl); background: #fff;
  border: 1px solid var(--sable-bord); box-shadow: 0 18px 40px rgba(16, 15, 24, 0.07);
}
.espaces-ex__liste { list-style: none; margin: 20px 0 0; padding: 0; display: grid; }
.espaces-ex__item {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start;
  padding: 16px 0 18px; border-top: 1px solid var(--sable-bord);
}
.espaces-ex__puce {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px;
  color: #fff; transition: transform var(--vite) var(--sortie);
}
.espaces-ex__item:hover .espaces-ex__puce { transform: rotate(-6deg) scale(1.06); }
.espaces-ex__item--rose .espaces-ex__puce { background: var(--rose); }
.espaces-ex__item--encre .espaces-ex__puce { background: var(--encre); }
.espaces-ex__item--turquoise .espaces-ex__puce { background: var(--turquoise); }
.espaces-ex__lieu {
  display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.espaces-ex__item--rose .espaces-ex__lieu { color: var(--rose-encre, #b51f68); }
.espaces-ex__item--encre .espaces-ex__lieu { color: var(--texte-doux); }
.espaces-ex__item--turquoise .espaces-ex__lieu { color: var(--turquoise-encre, #00756a); }
.espaces-ex__titre { display: block; margin-top: 3px; font-family: var(--titre); font-size: 19px; font-weight: 400; color: var(--encre); }
.espaces-ex__texte { margin: 6px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--texte-doux); }
@media (max-width: 1100px) { .espaces-ex__colonne { position: static; } }

/* --------------------- En-tête de page : la vache en médaillon à la place du billet */
.affiche-page__vache {
  position: relative; justify-self: end; width: clamp(200px, 22vw, 290px); aspect-ratio: 1;
  margin-right: clamp(0px, 4vw, 60px); animation: vacheFlotte 7s ease-in-out infinite;
}
.affiche-page__vache-anneau {
  position: absolute; inset: -14px; border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, 0.85); animation: vacheAnneau 40s linear infinite;
}
.affiche-page__vache-disque {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%;
  background: #fff; box-shadow: 0 26px 50px rgba(120, 12, 62, 0.28), inset 0 0 0 6px rgba(232, 64, 144, 0.12);
}
.affiche-page__vache-disque img { width: 74%; height: auto; transform: rotate(-4deg); }
@keyframes vacheFlotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes vacheAnneau { to { transform: rotate(360deg); } }
@media (max-width: 1100px) { .affiche-page__vache { justify-self: center; margin: 14px auto 0; width: 200px; } }
@media (max-width: 620px) { .affiche-page__vache { width: 160px; } }
@media (prefers-reduced-motion: reduce) { .affiche-page__vache, .affiche-page__vache-anneau { animation: none; } }

/* ----------------------- Retrait des cartons : plan + parcours en deux temps */
.fiche--compacte { grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.75fr); grid-template-rows: auto; gap: 24px; align-items: center; }
.fiche--compacte .fiche__plan { grid-column: 1; grid-row: 1; }
.fiche--compacte .fiche__etapes {
  grid-column: 2; grid-row: 1; align-self: center; grid-template-rows: none; gap: 0;
  padding: 26px 26px 20px; border-radius: 24px; background: #fff;
  border: 1px solid var(--sable-bord); box-shadow: 0 18px 40px rgba(16, 15, 24, 0.07);
}
.fiche--compacte .fiche__etape {
  position: relative; padding: 0 0 26px; border: 0; border-radius: 0; background: none; box-shadow: none;
}
.fiche--compacte .fiche__etape:hover { transform: none; box-shadow: none; }
.fiche--compacte .fiche__etape .fiche__num { width: 48px; height: 48px; border-radius: 50%; font-size: 21px; }
.fiche--compacte .fiche__etape + .fiche__etape { padding-bottom: 18px; }
/* fil pointillé entre les deux étapes */
.fiche--compacte .fiche__etape:first-child::after {
  content: ''; position: absolute; left: 23px; top: 56px; bottom: 6px;
  border-left: 2px dashed var(--rose-bord);
}
.fiche--compacte .fiche__phrase { margin-top: 6px; font-size: 17px; line-height: 1.45; }
.fiche--compacte .fiche__legende {
  margin: 0; padding-top: 16px; border-top: 1px solid var(--sable-bord);
  font-size: 12.5px; line-height: 1.5; align-items: center;
}
@media (max-width: 900px) {
  .fiche--compacte { grid-template-columns: 1fr; }
  .fiche--compacte .fiche__etapes { grid-column: 1; grid-row: auto; }
}

.pouce--simple { display: block; text-align: center; }
.pouce--simple .pouce__intro { max-width: 640px; margin: 0 auto; }
.pouce--simple .pouce__texte { margin-left: auto; margin-right: auto; }

/* ------------------------------ Où dormir : bandeau photo + « Bon à savoir » */
.nuit {
  position: relative; overflow: hidden; margin-top: 22px; border-radius: 28px;
  min-height: 340px; display: grid; align-items: center; isolation: isolate;
  box-shadow: 0 24px 50px rgba(29, 24, 25, 0.16);
}
.nuit__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--sortie); }
.nuit:hover .nuit__photo { transform: scale(1.04); }
.nuit__voile {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(29, 16, 34, 0.86) 0%, rgba(29, 16, 34, 0.62) 42%, rgba(29, 16, 34, 0.08) 75%);
}
.nuit__corps { max-width: 470px; padding: 40px 44px; color: #fff; }
.nuit__lune {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.14); color: #ffd98a; border: 1px solid rgba(255, 255, 255, 0.28);
  animation: nuitLune 6s ease-in-out infinite;
}
@keyframes nuitLune { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(8deg) translateY(-3px); } }
.nuit__titre { margin: 16px 0 0; font-family: var(--titre); font-weight: 400; font-size: clamp(28px, 3vw, 38px); line-height: 1.1; color: #fff; }
.nuit__texte { margin: 12px 0 0; font-size: 16.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.92); text-wrap: pretty; }
.nuit__bouton { margin-top: 22px; }
.savoir2 { margin-top: 34px; }
.savoir2__titre { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose-encre, #b51f68); }
.nuit__bouton { gap: 8px; }
.savoir2__grille { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.savoir2__item {
  display: flex; flex-direction: column; gap: 6px; padding: 20px 20px 22px; border-radius: 20px;
  background: #fff; border: 1px solid var(--sable-bord); box-shadow: 0 10px 24px rgba(29, 24, 25, 0.05);
  transition: transform var(--moyen) var(--sortie), box-shadow var(--moyen) ease;
}
.savoir2__item:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(29, 24, 25, 0.1); }
.savoir2__icone { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: #fff; margin-bottom: 6px; }
.savoir2__item--turquoise .savoir2__icone { background: var(--turquoise); }
.savoir2__item--rose .savoir2__icone { background: var(--rose); }
.savoir2__item--encre .savoir2__icone { background: var(--encre); }
.savoir2__item b { font-size: 15.5px; color: var(--encre); }
.savoir2__item > span:last-child { font-size: 14px; line-height: 1.55; color: var(--texte-doux); text-wrap: pretty; }
@media (max-width: 980px) { .savoir2__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .nuit { min-height: 0; }
  .nuit__voile { background: linear-gradient(180deg, rgba(29, 16, 34, 0.55) 0%, rgba(29, 16, 34, 0.88) 100%); }
  .nuit__corps { padding: 120px 24px 28px; }
  .savoir2__grille { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .nuit__lune { animation: none; } .nuit__photo { transition: none; } }

/* ------------------------------- En-tête Contact : une grosse enveloppe */
.enveloppe {
  --l: min(440px, 100%); position: relative; display: block; justify-self: end;
  width: var(--l); aspect-ratio: 1.55; margin-top: 70px; text-decoration: none;
  animation: envFlotte 7s ease-in-out infinite;
}
@keyframes envFlotte { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(-1.5deg); } }
.enveloppe__dos { position: absolute; inset: 0; border-radius: 14px; background: #f3e4d4; }
/* la lettre dépasse et monte au survol */
.enveloppe__lettre {
  position: absolute; left: 7%; right: 7%; top: -24%; height: 92%;
  padding: 22px 26px; border-radius: 8px; background: #fffdf9;
  box-shadow: 0 6px 18px rgba(29, 24, 25, 0.12);
  display: flex; flex-direction: column; gap: 11px;
  transition: transform 600ms var(--sortie);
}
.enveloppe:hover .enveloppe__lettre, .enveloppe:focus-visible .enveloppe__lettre { transform: translateY(-44px); }
.enveloppe__entete { font-family: var(--titre); font-size: 22px; color: var(--rose-encre, #b51f68); }
.enveloppe__trait { height: 7px; border-radius: 4px; background: #efe3e8; }
.enveloppe__trait--court { width: 60%; }
.enveloppe__signe { margin-top: 2px; align-self: flex-end; font-family: var(--titre); font-size: 15px; color: var(--turquoise-encre, #00756a); }
/* face avant en V */
.enveloppe__face {
  position: absolute; inset: 0; border-radius: 14px; overflow: hidden;
  background: linear-gradient(160deg, #fff7ee, #f6e6d6);
  clip-path: polygon(0 0, 50% 52%, 100% 0, 100% 100%, 0 100%);
  box-shadow: 0 26px 50px rgba(120, 12, 62, 0.3);
}
.enveloppe__face::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top right, transparent 49.6%, rgba(160, 110, 80, 0.16) 50%, transparent 50.6%),
              linear-gradient(to top left, transparent 49.6%, rgba(160, 110, 80, 0.16) 50%, transparent 50.6%);
}
.enveloppe__rabat {
  position: absolute; left: 0; right: 0; top: 0; height: 56%;
  background: linear-gradient(180deg, #f0dcc6, #ead2ba); border-radius: 14px 14px 0 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top;
  filter: drop-shadow(0 4px 6px rgba(29, 24, 25, 0.12));
  transition: transform 600ms var(--sortie);
}
.enveloppe:hover .enveloppe__rabat, .enveloppe:focus-visible .enveloppe__rabat { transform: rotateX(180deg) translateY(2px); opacity: 0.0; }
.enveloppe__sceau {
  position: absolute; left: 50%; top: 52%; width: 58px; height: 58px; margin: -29px 0 0 -29px;
  display: grid; place-items: center; transform: rotate(-8deg);
  border-radius: 46% 54% 50% 50% / 52% 48% 54% 46%;
  background: radial-gradient(circle at 34% 28%, #3fd1c1, var(--turquoise) 52%, #007a6e);
  box-shadow: 0 6px 14px rgba(0, 106, 96, 0.4), inset 0 0 0 5px rgba(255, 255, 255, 0.14), inset 0 -3px 6px rgba(0, 60, 54, 0.35);
  transition: transform 500ms var(--sortie), opacity 300ms ease;
}
.enveloppe:hover .enveloppe__sceau, .enveloppe:focus-visible .enveloppe__sceau { transform: rotate(-20deg) scale(0.6) translateY(-40px); opacity: 0; }
.enveloppe__sceau img { width: 36px; height: 36px; object-fit: contain; padding: 4px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px rgba(0, 106, 96, 0.25); }
.enveloppe__timbre {
  position: absolute; right: 18px; bottom: 18px; width: 76px; height: 90px;
  transform: rotate(5deg); filter: drop-shadow(0 2px 4px rgba(29, 24, 25, 0.22));
}
/* dentelure : seul le fond blanc est perforé, sur son pourtour */
.enveloppe__timbre::before {
  content: ""; position: absolute; inset: 0; background: #fff;
  -webkit-mask: radial-gradient(circle 3.5px, transparent 97%, #000) -5px -5px / 10px 10px;
          mask: radial-gradient(circle 3.5px, transparent 97%, #000) -5px -5px / 10px 10px;
}
.enveloppe__timbre-cadre {
  position: absolute; inset: 7px; display: block; border-radius: 2px; overflow: hidden;
  background: linear-gradient(180deg, #e9f7f4, #c9ece6); box-shadow: inset 0 0 0 1.5px rgba(0, 117, 106, 0.35);
}
.enveloppe__timbre img { position: absolute; left: 10%; right: 10%; top: 22%; width: 80%; height: 54%; object-fit: contain; }
.enveloppe__timbre em {
  position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font-style: normal;
  font-size: 7.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--turquoise-encre, #00756a);
}
.enveloppe__timbre i { position: absolute; z-index: 1; right: 5px; top: 4px; left: auto; font-style: normal; font-weight: 800; font-size: 12px; color: var(--turquoise-encre, #00756a); }
.enveloppe__cachet {
  position: absolute; right: 108px; bottom: 30px; width: 82px; height: 82px; border-radius: 50%;
  display: grid; place-items: center; text-align: center; transform: rotate(-14deg);
  border: 2px solid rgba(181, 31, 104, 0.45); color: rgba(181, 31, 104, 0.6);
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em; line-height: 1.3; text-transform: uppercase;
}
.enveloppe__adresse { position: absolute; left: 24px; bottom: 22px; display: grid; gap: 3px; }
.enveloppe__adresse b { font-family: var(--titre); font-weight: 400; font-size: 22px; color: var(--encre); }
.enveloppe__adresse span { font-size: 13.5px; color: var(--texte-doux); }
@media (max-width: 1100px) { .enveloppe { justify-self: center; --l: min(400px, 100%); margin-top: 60px; } }
@media (max-width: 620px) {
  .enveloppe { --l: min(330px, 100%); margin-top: 50px; }
  .enveloppe__adresse b { font-size: 18px; }
  .enveloppe__timbre { width: 60px; height: 72px; }
  .enveloppe__cachet { display: none; }
}
@media (prefers-reduced-motion: reduce) { .enveloppe { animation: none; } }

/* Contact : la carte descend jusqu'au pied de page, un peu plus haute */
#acces { padding-bottom: 0; }
#acces .carte-large { height: clamp(380px, 50vw, 580px); margin-bottom: 0; }

/* ------------------- En-tête Infos pratiques : le carnet de visite qui se coche */
.carnet {
  position: relative; justify-self: end; width: min(400px, 100%); margin-right: clamp(0px, 3vw, 40px);
  transform: rotate(3deg); animation: carnetFlotte 8s ease-in-out infinite;
}
@keyframes carnetFlotte { 0%, 100% { transform: rotate(3deg) translateY(0); } 50% { transform: rotate(2deg) translateY(-8px); } }
.carnet__page {
  position: relative; padding: 34px 30px 26px 30px; border-radius: 6px 18px 18px 6px;
  background:
    linear-gradient(90deg, transparent 52px, rgba(232, 64, 144, 0.35) 52px 54px, transparent 54px),
    repeating-linear-gradient(180deg, #fffdf8 0 37px, #e9eef3 37px 38px);
  box-shadow: 0 26px 50px rgba(120, 12, 62, 0.28), 6px 6px 0 -2px #f7ede4, 12px 12px 0 -4px #efe2d6;
}
.carnet__spirale {
  position: absolute; top: 14px; left: 22px; right: 22px; height: 22px; z-index: 2;
  background: radial-gradient(circle at 50% 70%, #fff 0 4px, transparent 4.5px) 0 0 / 26px 22px repeat-x,
              radial-gradient(ellipse 5px 11px at 50% 40%, #9aa3ad 0 3px, transparent 3.5px) 0 -10px / 26px 22px repeat-x;
}
.carnet__titre { display: block; margin-top: 4px; padding-left: 34px; font-family: var(--titre); font-size: 25px; line-height: 1.2; color: var(--rose-encre, #b51f68); }
.carnet__date { display: block; padding-left: 34px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--turquoise-encre, #00756a); }
.carnet__liste { list-style: none; margin: 12px 0 0; padding: 0; counter-reset: c; }
.carnet__liste li { height: 38px; display: flex; align-items: center; }
.carnet__liste a {
  display: flex; align-items: center; gap: 14px; width: 100%; height: 100%;
  font-size: 16.5px; color: var(--encre); text-decoration: none; position: relative;
}
.carnet__mot { position: relative; }
.carnet__mot::after {
  content: ""; position: absolute; left: -2px; top: 55%; height: 2px; width: 0; background: rgba(29, 24, 25, 0.4);
  animation: carnetBarre 15s ease-in-out infinite; animation-delay: calc(var(--i) * 1.6s + 1s);
}
.carnet__case {
  position: relative; flex: none; width: 22px; height: 22px; border-radius: 6px;
  border: 2px solid var(--turquoise); background: #fff;
}
.carnet__case::after {
  content: ""; position: absolute; left: 5px; top: 1px; width: 7px; height: 13px;
  border: solid var(--rose); border-width: 0 3px 3px 0; transform: rotate(45deg) scale(0); transform-origin: 60% 60%;
  animation: carnetCoche 15s ease-in-out infinite; animation-delay: calc(var(--i) * 1.6s + 1s);
}
@keyframes carnetCoche { 0% { transform: rotate(45deg) scale(0); } 3% { transform: rotate(45deg) scale(1.3); } 5%, 78% { transform: rotate(45deg) scale(1); } 84%, 100% { transform: rotate(45deg) scale(0); } }
@keyframes carnetBarre { 0%, 3% { width: 0; } 7%, 78% { width: calc(100% + 4px); } 84%, 100% { width: 0; } }
.carnet__liste a:hover { color: var(--rose-encre, #b51f68); }
.carnet__liste a:hover .carnet__case { border-color: var(--rose); }
.carnet__crayon {
  position: absolute; right: -18px; bottom: 34px; width: 128px; height: 14px; border-radius: 3px; transform: rotate(-38deg);
  background: linear-gradient(90deg, #f6c94d 0 74%, #e9d9c3 74% 84%, #ef7ab0 84% 100%);
  box-shadow: 0 6px 12px rgba(29, 24, 25, 0.25);
}
.carnet__crayon::before {
  content: ""; position: absolute; left: -16px; top: 0; border: 7px solid transparent; border-right: 16px solid #f0d7b6; border-left: 0;
}
.carnet__crayon::after { content: ""; position: absolute; left: -16px; top: 5px; border: 2px solid transparent; border-right: 5px solid #3b3132; border-left: 0; }
@media (max-width: 1100px) { .carnet { justify-self: center; margin: 22px auto 0; transform: none; animation: none; } }
@media (max-width: 620px) { .carnet__crayon { display: none; } .carnet__page { padding: 30px 20px 20px; } }
@media (prefers-reduced-motion: reduce) {
  .carnet { animation: none; }
  .carnet__case::after { animation: none; transform: rotate(45deg) scale(1); }
  .carnet__mot::after { animation: none; }
}

/* --------------------- En-tête Reportages : un clap de tournage qui claque */
.clap { position: relative; justify-self: end; width: min(420px, 100%); margin: 70px clamp(0px, 3vw, 40px) 0 0; transform: rotate(-4deg); }
.clap__rec {
  position: absolute; right: 6px; top: -38px; display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: 999px; background: rgba(29, 24, 25, 0.82); color: #fff;
  font-size: 12px; font-weight: 800; letter-spacing: 0.14em;
}
.clap__rec i { width: 9px; height: 9px; border-radius: 50%; background: #ff3b3b; animation: clapRec 1.2s steps(1) infinite; }
@keyframes clapRec { 50% { opacity: 0.15; } }
.clap__barre { position: relative; height: 46px; }
.clap__socle, .clap__bras {
  position: absolute; left: 0; right: 0; height: 40px; border-radius: 6px 6px 2px 2px;
  background: repeating-linear-gradient(-55deg, #1d1819 0 26px, #fff 26px 52px);
  box-shadow: inset 0 0 0 3px #1d1819;
}
.clap__socle { bottom: 0; border-radius: 2px; }
.clap__bras { bottom: 6px; transform-origin: 6px 100%; animation: clapClaque 4.5s ease-in infinite; z-index: 1;
  background: repeating-linear-gradient(55deg, #1d1819 0 26px, #fff 26px 52px); }
@keyframes clapClaque {
  0%, 62% { transform: rotate(-11deg); }
  70% { transform: rotate(0deg); }
  73% { transform: rotate(-2deg); }
  76%, 86% { transform: rotate(0deg); }
  100% { transform: rotate(-11deg); }
}
.clap__ardoise {
  padding: 20px 22px 22px; border-radius: 4px 4px 14px 14px; background: #262022; color: #fff;
  box-shadow: 0 26px 50px rgba(120, 12, 62, 0.32), inset 0 0 0 3px #1d1819;
  animation: clapSecousse 4.5s ease-in infinite;
}
@keyframes clapSecousse { 0%, 69% { transform: none; } 71% { transform: translateY(2px); } 74%, 100% { transform: none; } }
.clap__ardoise i { display: block; font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.clap__ardoise b { display: block; margin-top: 3px; font-family: var(--titre); font-weight: 400; color: #fff; }
.clap__ligne--titre { display: block; padding-bottom: 14px; border-bottom: 2px solid rgba(255, 255, 255, 0.18); }
.clap__ligne--titre b { font-size: 26px; line-height: 1.15; color: #ffd0e5; }
.clap__grille { display: grid; grid-template-columns: 1fr 1fr; }
.clap__grille > span { padding: 12px 0 0; }
.clap__grille > span:nth-child(odd) { padding-right: 14px; border-right: 2px solid rgba(255, 255, 255, 0.18); }
.clap__grille > span:nth-child(even) { padding-left: 16px; }
.clap__grille b { font-size: 18px; }
.clap__prise { color: #7fe3d8 !important; font-size: 26px !important; line-height: 1; }
@media (max-width: 1100px) { .clap { justify-self: center; margin: 110px auto 0; transform: none; } }
@media (max-width: 620px) { .clap { margin-top: 78px; } .clap__ligne--titre b { font-size: 21px; } }
@media (prefers-reduced-motion: reduce) { .clap__bras, .clap__ardoise, .clap__rec i { animation: none; } .clap__bras { transform: rotate(-8deg); } }


/* --------------- En-tête Exposants : un étal de marché qui s'installe */
.etal { position: relative; justify-self: end; width: min(420px, 100%); margin: 30px clamp(0px, 3vw, 40px) 0 0; }
.etal__enseigne {
  position: absolute; left: 50%; top: -30px; z-index: 3; transform: translateX(-50%) rotate(-3deg);
  padding: 6px 18px; border-radius: 10px; background: #fffdf8; color: var(--encre);
  font-family: var(--titre); font-size: 18px; white-space: nowrap; box-shadow: 0 8px 18px rgba(29, 24, 25, 0.25);
  transform-origin: 50% -40px; animation: etalBalance 4s ease-in-out infinite;
}
.etal__enseigne b { font-weight: 400; color: var(--rose); font-size: 24px; }
.etal__enseigne::before, .etal__enseigne::after { content: ""; position: absolute; top: -26px; width: 2px; height: 26px; background: #6b4228; }
.etal__enseigne::before { left: 22%; } .etal__enseigne::after { right: 22%; }
@keyframes etalBalance { 0%, 100% { transform: translateX(-50%) rotate(-3deg); } 50% { transform: translateX(-50%) rotate(3deg); } }
.etal__auvent {
  position: relative; z-index: 2; display: block; height: 78px; border-radius: 14px 14px 0 0;
  background: repeating-linear-gradient(90deg, #e84090 0 38px, #fff 38px 76px);
  -webkit-mask: radial-gradient(19px 15px at 50% 100%, transparent 98%, #000) 0 0 / 38px 100% repeat-x;
          mask: radial-gradient(19px 15px at 50% 100%, transparent 98%, #000) 0 0 / 38px 100% repeat-x;
  filter: drop-shadow(0 6px 6px rgba(120, 12, 62, 0.3));
  transform-origin: top; animation: etalAuvent 1.1s var(--sortie) both;
}
@keyframes etalAuvent { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.etal__vitrine {
  position: relative; height: 128px; margin: -14px 10px 0; padding: 0 18px 8px;
  /* bâche crème tendue au fond du stand : les produits se détachent nettement */
  background:
    repeating-linear-gradient(90deg, rgba(120, 90, 50, 0.07) 0 1px, transparent 1px 34px),
    linear-gradient(180deg, #f7efe0 0%, #fbf6ec 55%, #f3e8d4 100%);
  box-shadow: inset 0 14px 18px -10px rgba(90, 60, 30, 0.28), inset 0 -6px 10px -6px rgba(90, 60, 30, 0.18);
  border-left: 8px solid #8a5a35; border-right: 8px solid #8a5a35;
  display: flex; align-items: flex-end; justify-content: space-around;
}
.etal__produit { display: block; opacity: 0; animation: etalPose 600ms var(--sortie) both, etalSautille 5s ease-in-out infinite;
  animation-delay: calc(1s + var(--i) * 0.22s), calc(2.6s + var(--i) * 0.4s); }
@keyframes etalPose { from { opacity: 0; transform: translateY(-40px); } 70% { transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes etalSautille { 0%, 88%, 100% { transform: none; } 93% { transform: translateY(-6px); } }
.etal__produit--meule { width: 70px; height: 30px; border-radius: 50% / 40%;
  background: radial-gradient(ellipse at 50% 30%, #fffaf0 0 45%, #f3e7cf 46%), #f3e7cf; box-shadow: inset 0 -8px 0 #e9d9b8; }
.etal__produit--petite { width: 48px; height: 24px; }
.etal__produit--bouteille { position: relative; width: 20px; height: 74px; border-radius: 6px 6px 4px 4px; background: linear-gradient(90deg, #1f5e3a, #2f8a55 45%, #1f5e3a); }
.etal__produit--bouteille::before { content: ""; position: absolute; left: 6px; top: -18px; width: 8px; height: 20px; border-radius: 3px 3px 0 0; background: #1f5e3a; }
.etal__produit--bouteille::after { content: ""; position: absolute; left: 2px; right: 2px; top: 28px; height: 18px; border-radius: 2px; background: #fffdf8; }
.etal__produit--rose { background: linear-gradient(90deg, #a81d5c, #e84090 45%, #a81d5c); }
.etal__produit--rose::before { background: #a81d5c; }
.etal__produit--pain { width: 62px; height: 26px; border-radius: 50%; background: radial-gradient(ellipse at 40% 30%, #e6a95c, #b8742f); box-shadow: inset 0 0 0 0 transparent; }
.etal__produit--pot { position: relative; width: 30px; height: 36px; border-radius: 6px; background: linear-gradient(180deg, #f6c94d, #e2a92b); }
.etal__produit--pot::before { content: ""; position: absolute; left: -2px; right: -2px; top: -8px; height: 9px; border-radius: 3px; background: var(--turquoise); }
.etal__comptoir {
  display: grid; place-items: center; height: 48px; border-radius: 6px;
  background: repeating-linear-gradient(90deg, #a06a3e 0 46px, #8a5a35 46px 48px);
  box-shadow: 0 22px 40px rgba(120, 12, 62, 0.3), inset 0 4px 0 rgba(255, 255, 255, 0.18);
}
.etal__comptoir i { font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #fff4e3; }
.etal__pieds { display: block; height: 26px; margin: 0 28px; border-left: 10px solid #6b4228; border-right: 10px solid #6b4228; }
@media (max-width: 1100px) { .etal { justify-self: center; margin: 52px auto 0; } }
@media (max-width: 620px) { .etal__produit--pot, .etal__produit--petite { display: none; } }
@media (prefers-reduced-motion: reduce) { .etal__enseigne, .etal__auvent, .etal__produit { animation: none; opacity: 1; } }

/* ------------------------- Pop-up d'accueil : billetterie du dîner Goldman */
.pop-goldman { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 20px; }
.pop-goldman[hidden] { display: none; }
/* fond : teinte seule, sans flou animé (le flou faisait saccader l'ouverture) */
.pop-goldman__fond {
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 40%, rgba(60, 18, 40, 0.55), rgba(20, 12, 16, 0.78));
  opacity: 0; transition: opacity 420ms ease;
}
.pop-goldman__boite {
  position: relative; width: min(860px, 100%); max-height: calc(100dvh - 40px); overflow: auto; overscroll-behavior: contain;
  display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  background: linear-gradient(180deg, #fffaf3 0%, #fdf3e7 100%);
  border-radius: 28px; outline: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6) inset, 0 40px 90px rgba(10, 4, 8, 0.45);
  opacity: 0; transform: translateY(18px) scale(0.975);
  transition: opacity 460ms cubic-bezier(.2, .8, .2, 1), transform 560ms cubic-bezier(.2, .8, .2, 1);
  will-change: opacity, transform;
}
.pop-goldman--vu .pop-goldman__fond { opacity: 1; }
.pop-goldman--vu .pop-goldman__boite { opacity: 1; transform: none; }
.pop-goldman--sort .pop-goldman__fond { opacity: 0; transition-duration: 260ms; }
.pop-goldman--sort .pop-goldman__boite { opacity: 0; transform: translateY(10px) scale(0.985); transition-duration: 240ms; }
.pop-goldman__fermer {
  position: absolute; top: 14px; right: 14px; z-index: 3; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; border: 0; background: rgba(255, 255, 255, 0.92); color: var(--encre);
  font-size: 22px; line-height: 1; cursor: pointer; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  transition: transform 220ms var(--sortie), background 200ms ease, color 200ms ease;
}
.pop-goldman__fermer:hover { transform: rotate(90deg); background: var(--encre); color: #fff; }
.pop-goldman__fermer:focus-visible { outline: 3px solid var(--turquoise); outline-offset: 2px; }
/* visuel : dimensions fixées dès le départ, l'image ne change plus la taille de la boîte */
.pop-goldman__visuel { position: relative; overflow: hidden; background: #1d1819; min-height: 420px; }
.pop-goldman__visuel img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.06); transition: transform 1600ms cubic-bezier(.2, .8, .2, 1);
}
.pop-goldman--vu .pop-goldman__visuel img { transform: scale(1); }
.pop-goldman__visuel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(29, 24, 25, 0) 45%, rgba(29, 24, 25, 0.55) 100%);
}
.pop-goldman__date {
  position: absolute; left: 20px; bottom: 20px; z-index: 2; width: 108px; height: 108px; border-radius: 50%;
  display: grid; place-content: center; text-align: center; color: #fff;
  background: radial-gradient(circle at 35% 30%, #f065a8, var(--rose) 60%, #c72a76);
  box-shadow: 0 0 0 4px #fff, 0 0 0 7px rgba(232, 64, 144, 0.35), 0 14px 30px rgba(0, 0, 0, 0.35);
  opacity: 0; transform: scale(0.7) rotate(-20deg);
  transition: opacity 360ms ease 260ms, transform 620ms cubic-bezier(.3, 1.4, .5, 1) 260ms;
}
.pop-goldman--vu .pop-goldman__date { opacity: 1; transform: rotate(-8deg); }
.pop-goldman__date b { font-family: var(--titre); font-weight: 400; font-size: 40px; line-height: 0.95; }
.pop-goldman__date small, .pop-goldman__date span { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.25; }
.pop-goldman__corps { position: relative; padding: 38px 36px 30px; display: grid; align-content: center; gap: 13px; }
.pop-goldman__corps > * {
  opacity: 0; transform: translateY(8px);
  transition: opacity 420ms ease, transform 520ms cubic-bezier(.2, .8, .2, 1);
}
.pop-goldman--vu .pop-goldman__corps > * { opacity: 1; transform: none; }
.pop-goldman--vu .pop-goldman__corps > :nth-child(1) { transition-delay: 140ms; }
.pop-goldman--vu .pop-goldman__corps > :nth-child(2) { transition-delay: 200ms; }
.pop-goldman--vu .pop-goldman__corps > :nth-child(3) { transition-delay: 260ms; }
.pop-goldman--vu .pop-goldman__corps > :nth-child(4) { transition-delay: 320ms; }
.pop-goldman--vu .pop-goldman__corps > :nth-child(5) { transition-delay: 380ms; }
.pop-goldman--vu .pop-goldman__corps > :nth-child(6) { transition-delay: 430ms; }
.pop-goldman__etiquette {
  justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px;
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--rose-encre, #b51f68); background: #fff; box-shadow: 0 0 0 1.5px rgba(232, 64, 144, 0.35);
}
.pop-goldman__etiquette::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rose); animation: annoncePouls 1.8s ease-out infinite; }
.pop-goldman--ouverte .pop-goldman__etiquette { color: var(--turquoise-encre, #00756a); box-shadow: 0 0 0 1.5px rgba(0, 168, 152, 0.4); }
.pop-goldman--ouverte .pop-goldman__etiquette::before { background: var(--turquoise); animation-name: annoncePoulsVert; }
.pop-goldman__titre { margin: 2px 0 0; font-family: var(--titre); font-weight: 400; font-size: clamp(32px, 4vw, 46px); line-height: 1; color: var(--encre); text-wrap: balance; }
.pop-goldman__titre em { font-style: normal; color: var(--rose); }
.pop-goldman__quand {
  margin: 0; display: inline-flex; flex-wrap: wrap; gap: 6px 10px; font-size: 14.5px; font-weight: 700; color: var(--encre);
}
.pop-goldman__liste { list-style: none; margin: 4px 0 0; padding: 14px 16px; display: grid; gap: 8px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--sable-bord); }
.pop-goldman__liste li { position: relative; padding-left: 22px; font-size: 14.5px; line-height: 1.45; color: var(--texte-doux); }
.pop-goldman__liste li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--turquoise); box-shadow: 0 0 0 3px rgba(0, 168, 152, 0.16); }
.pop-goldman__liste b { color: var(--encre); }
.pop-goldman__pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 6px; }
.pop-goldman__prix { font-size: 14px; color: var(--texte-doux); }
.pop-goldman__prix b { font-family: var(--titre); font-weight: 400; font-size: 32px; color: var(--encre); margin-right: 4px; }
.pop-goldman__bouton {
  display: inline-flex; align-items: center; gap: 9px; padding: 14px 24px; border-radius: 999px;
  font-weight: 700; font-size: 15.5px; color: #fff; text-decoration: none; background: var(--turquoise);
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--turquoise), 0 14px 26px rgba(0, 168, 152, 0.32);
  transition: transform 200ms var(--sortie), background 200ms ease, box-shadow 200ms ease;
}
.pop-goldman__bouton::after { content: "→"; transition: transform 200ms var(--sortie); }
.pop-goldman__bouton:hover { transform: translateY(-2px); background: var(--turquoise-encre, #00756a); color: #fff; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--turquoise-encre, #00756a), 0 18px 30px rgba(0, 117, 106, 0.34); }
.pop-goldman__bouton:hover::after { transform: translateX(3px); }
.pop-goldman__note { margin: 0; font-size: 13px; color: var(--gris); }
@media (max-width: 700px) {
  .pop-goldman { align-items: end; padding: 10px; }
  .pop-goldman__boite { grid-template-columns: 1fr; border-radius: 24px; max-height: calc(100dvh - 20px); transform: translateY(40px); }
  .pop-goldman__visuel { min-height: 0; height: 200px; }
  .pop-goldman__date { width: 88px; height: 88px; left: 14px; bottom: 14px; }
  .pop-goldman__date b { font-size: 32px; }
  .pop-goldman__corps { padding: 22px 20px 20px; gap: 10px; }
  .pop-goldman__liste { padding: 12px 14px; }
  .pop-goldman__pied { flex-direction: column; align-items: stretch; text-align: center; }
  .pop-goldman__bouton { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .pop-goldman__fond, .pop-goldman__boite, .pop-goldman__date, .pop-goldman__corps > *, .pop-goldman__visuel img { transition: opacity 200ms ease; transform: none !important; }
}

/* ---- étal : charcuterie suspendue et nouveaux produits ---- */
.etal__vitrine { height: 150px; padding-top: 0; }
.etal__tringle {
  position: absolute; left: 6px; right: 6px; top: 10px; height: 4px; border-radius: 2px;
  background: linear-gradient(180deg, #b08354, #7d5129); box-shadow: 0 2px 3px rgba(60, 35, 16, 0.3);
  display: flex; justify-content: space-around; align-items: flex-start;
}
.etal__saucisson, .etal__jambon {
  position: relative; display: block; margin-top: 4px; transform-origin: 50% -6px;
  opacity: 0; animation: etalPend 700ms var(--sortie) both, etalOscille 4.6s ease-in-out infinite;
  animation-delay: calc(0.7s + var(--i) * 0.16s), calc(1.6s + var(--i) * 0.5s);
}
.etal__saucisson::before, .etal__jambon::before {
  content: ""; position: absolute; left: 50%; top: -6px; width: 1px; height: 7px; background: #6b4228;
}
.etal__saucisson {
  width: 13px; height: var(--l, 36px); border-radius: 7px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.55) 0 1.5px, transparent 2px) 0 0 / 6px 7px,
    linear-gradient(90deg, #6e2a24, #9c3d33 45%, #6e2a24);
}
.etal__saucisson--fin { width: 9px; }
.etal__jambon {
  width: 26px; height: 40px; border-radius: 40% 40% 50% 50% / 30% 30% 70% 70%;
  background: radial-gradient(ellipse at 50% 72%, #e9a7a0 0 34%, #f4ddd0 35% 42%, #b86545 43%), #b86545;
}
@keyframes etalPend { from { opacity: 0; transform: translateY(-14px) rotate(8deg); } to { opacity: 1; transform: none; } }
@keyframes etalOscille { 0%, 100% { transform: rotate(0deg); } 30% { transform: rotate(3deg); } 70% { transform: rotate(-3deg); } }

.etal__produit--champagne {
  position: relative; width: 22px; height: 80px; border-radius: 7px 7px 4px 4px;
  background: linear-gradient(90deg, #10231a, #24402f 45%, #10231a);
}
.etal__produit--champagne::before {
  content: ""; position: absolute; left: 5px; top: -22px; width: 12px; height: 24px; border-radius: 4px 4px 1px 1px;
  background: linear-gradient(180deg, #e7c25a, #b8902b);
}
.etal__produit--champagne::after {
  content: ""; position: absolute; left: 2px; right: 2px; top: 34px; height: 16px; border-radius: 2px;
  background: linear-gradient(180deg, #f4e1a6, #e4c56c); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4);
}
.etal__produit--brie {
  position: relative; width: 60px; height: 30px; border-radius: 5px 5px 3px 3px;
  background: linear-gradient(180deg, #fff6d9 0%, #f3d98f 100%);
  clip-path: polygon(0 100%, 0 26%, 100% 0, 100% 100%);
  filter: drop-shadow(0 2px 0 #c9a24e);
}
.etal__produit--brie::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px;
  background: #fffefb; box-shadow: inset 0 -2px 0 #d8c7a3;
}
.etal__produit--raisin {
  position: relative; width: 26px; height: 32px;
  background:
    radial-gradient(circle, #6b2f6b 0 5px, transparent 5.5px) 3px 0 / 10px 10px,
    radial-gradient(circle, #8a3f8a 0 5px, transparent 5.5px) 8px 5px / 10px 10px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.etal__produit--raisin::before {
  content: ""; position: absolute; left: 11px; top: -7px; width: 3px; height: 9px; border-radius: 2px; background: #4f7a2c;
}
@media (max-width: 760px) {
  .etal__produit--raisin, .etal__produit--pot { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .etal__saucisson, .etal__jambon { animation: none; opacity: 1; }
}