/* Golf du Pays de Sarrebourg — feuille commune (jetons + socle) et styles du site vitrine.
   Direction artistique « Lisière » (design/02-DA.md) : forêt, ligne bleue des Vosges, tuile de la ferme.
   1. Jetons (contrat § 2.3.1, partagés avec la gestion du site)   2. Socle (§ 2.4, seul utilisable par la gestion)
   3. Site vitrine (classes réservées au site, portée html.site)   4. Impression   5. Bandeau d'information
   6. Gestion du site : état du terrain, pro-shop, équipe, galerie, NetGolf
   Polices du système, aucune ressource externe. Texte courant à 18 px (21 px avec « Agrandir le texte »). */

/* ============================================================ 1. Jetons */
:root {
  color-scheme: light;
  font-size: 112.5%;                 /* 18 px */

  /* Fonds */
  --lin-50: #FAF7F0;                 /* fond de page */
  --lin-100: #F2ECDF;                /* sections chaudes, rails des segmentées */
  --sable-200: #E6D9BC;              /* filets chauds */
  --blanc: #FFFFFF;                  /* cartes, champs */
  /* Encre */
  --encre-900: #17221B;              /* texte courant */
  --encre-600: #4D5A52;              /* texte secondaire (≥ 6,2:1 sur nos fonds clairs) */
  --trait-400: #8E978F;              /* bordures de champs (3:1) */
  --trait-200: #E2DFD5;              /* filets décoratifs */
  /* Forêt */
  --foret-950: #0E261A;              /* surfaces sombres */
  --foret-800: #16402B;              /* titres, survol */
  --foret-700: #1D5A3A;              /* boutons, liens */
  --gazon-500: #4C9A5C;              /* JAMAIS DE TEXTE : pictos ≥ 24 px, jauges, places */
  --gazon-300: #8CCB8F;              /* pictos et surtitres sur fond sombre */
  --gazon-100: #E7F0E2;              /* sections vertes, survols */
  --brume: #B9CBBE;                  /* texte secondaire sur fond sombre (9,4:1 sur foret-950) */
  /* Vosges */
  --vosges-700: #2D4A6E;
  --vosges-300: #9FB3CC;
  --vosges-100: #E8EEF6;
  /* Tuile */
  --tuile-700: #923B1B;
  --tuile-600: #B04A24;
  --tuile-100: #F8E7DD;
  /* Cerf (marque, erreurs) */
  --cerf-700: #A11F24;
  --cerf-600: #C0282D;
  --cerf-100: #FBE7E6;
  /* Miel */
  --miel-400: #F2C14E;               /* focus sur sombre, heure du ticket, « maintenant » */
  /* États */
  --ok-700: #1A6236;  --ok-100: #E3F1E4;
  --ko-700: #A11F24;  --ko-100: #FBE7E6;
  --att-700: #7A4E00; --att-100: #FFF1D2;
  /* Accent (forêt côté joueur et site ; tuile en zone gestion) */
  --accent: var(--foret-700);
  --accent-fonce: var(--foret-800);
  --accent-pale: var(--gazon-100);
  --lien: var(--foret-700);
  /* Ciel et voiles */
  --ciel-haut: #C9DBEE;
  --ciel-milieu: #E3ECF4;
  --ciel-bas: #F4F1E8;
  --ciel: linear-gradient(180deg, var(--ciel-haut) 0%, var(--ciel-milieu) 45%, var(--ciel-bas) 70%, var(--lin-50) 100%);
  --voile-photo: linear-gradient(180deg, rgba(14,38,26,.10) 0%, rgba(14,38,26,.55) 55%, rgba(14,38,26,.88) 100%);

  /* Typographie */
  --f-titre: "Sitka Heading", "Sitka Display", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --f-affiche: "Sitka Banner", "Sitka Display", "Iowan Old Style", Georgia, serif;
  --f-texte: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --f-ui: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-chiffres: "Bahnschrift", "Segoe UI Variable Display", "DIN Alternate", system-ui, sans-serif;
  --t-affiche: clamp(2.6rem, 1.6rem + 4.6vw, 5.4rem);
  --t-h1: clamp(2rem, 1.5rem + 2.2vw, 3.2rem);
  --t-h2: clamp(1.55rem, 1.3rem + 1.1vw, 2.2rem);
  --t-h3: clamp(1.2rem, 1.12rem + .35vw, 1.4rem);
  --t-chapo: clamp(1.1rem, 1.05rem + .3vw, 1.3rem);
  --t-texte: 1rem;                   /* 18 px, minimum pour toute phrase */
  --t-petit: .889rem;                /* 16 px : surtitres, badges, en-têtes de colonne, libellés d'onglets ; jamais une phrase */
  --t-chiffre-xl: clamp(2.6rem, 2rem + 3vw, 4.5rem);
  --t-chiffre-l: 1.5rem;

  /* Espaces, gabarit */
  --e-1: .25rem; --e-2: .5rem; --e-3: .75rem; --e-4: 1rem; --e-5: 1.5rem; --e-6: 2rem; --e-7: 3rem; --e-8: 4.5rem;
  --section: clamp(3rem, 2rem + 5vw, 7rem);
  --gouttiere: clamp(1rem, .6rem + 2vw, 2rem);
  --largeur: 1240px;
  --etroit: 760px;
  --cible: 48px;
  --cible-confort: 56px;
  --entete-site: 80px;
  --entete-gestion: 64px;
  --barre-bas: 72px;                 /* barre collée du site, hors zone de sécurité */

  /* Rayons, ombres */
  --r-s: 10px; --r-m: 16px; --r-l: 24px; --r-xl: 32px; --r-champ: 12px; --r-pilule: 999px;
  --ombre-1: 0 1px 2px rgba(14,38,26,.06), 0 2px 8px -2px rgba(14,38,26,.08);
  --ombre-2: 0 2px 4px rgba(14,38,26,.06), 0 16px 32px -16px rgba(14,38,26,.28);
  --ombre-3: 0 4px 8px rgba(14,38,26,.08), 0 32px 64px -24px rgba(14,38,26,.40);

  /* Mouvement */
  --duree-micro: 120ms; --duree-petit: 200ms; --duree-moyen: 280ms;
  --ease-sortie: cubic-bezier(.2,.8,.2,1);
  --ease-entree: cubic-bezier(.4,0,1,1);
  --ease-balle: cubic-bezier(.3,0,.2,1);

  /* Plans */
  --z-entete: 50; --z-barre-bas: 60; --z-menu: 80; --z-dialogue: 100;

  /* Alias de compatibilité (anciens noms, gardés jusqu'à la fin du lot ; ne plus les utiliser dans du code neuf) */
  --police: var(--f-texte); --titres: var(--f-titre);
  --vert-fonce: var(--foret-800); --vert: var(--foret-700); --vert-survol: var(--foret-800); --vert-vif: var(--gazon-500);
  --gazon: var(--gazon-100); --gazon-trait: #CFE2C3; --sable: var(--lin-100); --sable-trait: var(--sable-200);
  --fanion: var(--cerf-600); --fond: var(--lin-50); --carte: var(--blanc); --texte: var(--encre-900);
  --doux: var(--encre-600); --trait: var(--trait-200); --rayon: var(--r-m); --ombre: var(--ombre-2);
}

html.texte-grand {
  font-size: 131.25%;                /* 21 px : tout ce qui est en rem grandit */
  --entete-site: 88px;
  --entete-gestion: 72px;
  --barre-bas: 80px;
}
/* Téléphone (design/04-TELEPHONE.md § 8.1) : racine du SITE à 16 px (1 rem = 16 px pour les champs), petit texte à
   15 px, texte courant du site à 17 px. La gestion garde sa racine de 18 px (ses employés lisent sur téléphone).
   « Agrandir le texte » passe la racine à 21 px (html.texte-grand l'emporte) et fait grandir toute l'échelle. */
@media (max-width: 599px) {
  html.site:not(.texte-grand) { font-size: 100%; }
  :root {
    --t-affiche: 1.875rem;
    --t-h1: 1.625rem;
    --t-h2: 1.375rem;
    --t-h3: 1.125rem;
    --t-chapo: 1.0625rem;
    --t-petit: .9375rem;
    --t-chiffre-xl: 2rem;
    --section: 2rem;
  }
  html.site { --t-texte: 1.0625rem; }
  input, select, textarea { font-size: max(16px, 1rem); }
  /* Titre des pages de la gestion du site (sélecteur renforcé pour passer devant gestion.css, chargée après) */
  html.gestion .ges-tete h1, html.gestion .ges-connexion-titre { font-size: 1.6rem; }

  /* Densité sur téléphone : hauteurs et marges resserrées (cibles tactiles gardées à 44 px minimum, la norme Apple).
     Hors « Agrandir le texte », qui garde la version large. */
  html:not(.texte-grand) {
    --cible-confort: 48px; --entete-gestion: 56px;
    --e-5: 1.25rem; --e-6: 1.5rem; --e-7: 2.25rem; --gouttiere: 1rem;
  }
  html.site { --gouttiere: 16px; }
  html:not(.texte-grand) .bouton { min-height: 46px; }
  html.site:not(.texte-grand) .bouton { min-height: 48px; }
  html.site:not(.texte-grand) .bouton-plein { min-height: 52px; }
  html.site:not(.texte-grand) .nav-lien, html.site:not(.texte-grand) .calc-case { min-height: 48px; }
}
/* Barre du bas : 64 px (80 px en texte agrandi) partout où elle existe (sous 1 100 px) */
@media (max-width: 1099px) { html:not(.texte-grand) { --barre-bas: 64px; } }

/* ============================================================ 2. Socle (garanti à la gestion du site) */
*, *::before, *::after { box-sizing: border-box; }
img, svg { max-width: 100%; }
img { height: auto; display: block; }
body { margin: 0; font-family: var(--f-texte); font-size: var(--t-texte); line-height: 1.6; color: var(--encre-900);
  background: var(--lin-50); }
a { color: var(--lien); text-underline-offset: .18em; }
a:hover { color: var(--foret-800); }
h1, h2, h3, h4 { font-family: var(--f-titre); color: var(--foret-800); line-height: 1.12; text-wrap: balance;
  margin: 0 0 .5em; font-weight: 600; }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: 1.1rem; }
p { margin: 0 0 1em; }
button, input, select, textarea { font: inherit; color: inherit; }

input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]):not([type=submit]):not([type=button]),
select, textarea {
  min-height: var(--cible-confort); border: 2px solid var(--trait-400); border-radius: var(--r-champ);
  background-color: var(--blanc); color: var(--encre-900); padding: .5rem .9rem; max-width: 100%;
}
input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]):not([type=submit]):not([type=button]):focus,
select:focus, textarea:focus { border-color: var(--foret-700); }
select {
  appearance: none; -webkit-appearance: none; padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D5A3A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .85rem center; background-size: 1.2rem;
}
[aria-invalid=true] { border-color: var(--cerf-700) !important; }

:focus-visible { outline: 3px solid var(--foret-950); outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--lin-50), 0 0 0 7px var(--foret-950); }
.sur-sombre :focus-visible, .sur-sombre:focus-visible { outline-color: var(--miel-400);
  box-shadow: 0 0 0 2px var(--foret-950), 0 0 0 7px var(--miel-400); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.conteneur { width: min(var(--largeur), 100% - 2 * var(--gouttiere)); margin-inline: auto; }
.etroit { max-width: var(--etroit); }
.ic { width: 1.2em; height: 1.2em; flex: none; vertical-align: -.2em; }
.doux { color: var(--encre-600); font-size: 1rem; }
.surtitre { font-family: var(--f-ui); font-size: var(--t-petit); font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; color: var(--foret-700); margin: 0 0 .6em; line-height: 1.4; }
.sur-sombre .surtitre { color: var(--gazon-300); }
.num { font-family: var(--f-chiffres); font-variant-numeric: tabular-nums lining-nums; }
.visuellement-masque { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.evitement { position: absolute; left: 16px; top: -100px; z-index: 200; background: var(--foret-950); color: var(--lin-50);
  padding: .75rem 1.25rem; border-radius: var(--r-s); font-weight: 600; text-decoration: none; }
.evitement:focus { top: 12px; color: var(--lin-50); outline-color: var(--miel-400);
  box-shadow: 0 0 0 2px var(--foret-950), 0 0 0 7px var(--miel-400); }
.sur-sombre { color: var(--lin-100); }
:where(.sur-sombre) a:where(:not(.bouton)) { color: var(--lin-100); text-decoration: underline; }
:where(.sur-sombre) a:where(:not(.bouton)):hover { color: var(--blanc); }

.bouton { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 52px;
  padding: .75rem 1.5rem; border-radius: var(--r-pilule); border: 2px solid var(--accent); background: transparent;
  color: var(--accent); font-family: var(--f-ui); font-weight: 600; font-size: 1rem; line-height: 1.2;
  text-decoration: none; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--duree-micro), color var(--duree-micro), border-color var(--duree-micro),
    transform var(--duree-micro); }
.bouton .ic { width: 1.35em; height: 1.35em; }
.bouton:active { transform: scale(.98); }
.bouton[disabled], .bouton[aria-disabled=true] { background: var(--trait-200); color: var(--encre-600);
  border-color: var(--trait-200); cursor: not-allowed; transform: none; }
.bouton-plein { background: var(--accent); border-color: var(--accent); color: var(--blanc); }
.bouton-plein:hover { background: var(--accent-fonce); border-color: var(--accent-fonce); color: var(--blanc); }
.bouton-contour { background: transparent; border-color: var(--accent); color: var(--accent); }
.bouton-contour:hover { background: var(--accent-pale); color: var(--accent-fonce); }
.bouton-clair { background: var(--lin-50); border-color: var(--lin-50); color: var(--foret-950); }
.bouton-clair:hover { background: var(--blanc); border-color: var(--blanc); color: var(--foret-950); }
.bouton-fantome { background: transparent; border-color: transparent; color: var(--accent); min-height: 48px;
  padding-inline: .75rem; }
.bouton-fantome:hover { text-decoration: underline; color: var(--accent-fonce); }
.bouton-danger { background: var(--blanc); border-color: var(--cerf-700); color: var(--cerf-700); }
.bouton-danger:hover { background: var(--cerf-100); color: var(--cerf-700); }
.bouton-grand { min-height: 60px; font-size: 1.1rem; padding: 1rem 2rem; }

.badge { display: inline-flex; align-items: center; gap: .35em; min-height: 32px; padding: .2rem .75rem;
  border-radius: var(--r-pilule); font-family: var(--f-ui); font-size: var(--t-petit); font-weight: 600;
  line-height: 1.2; text-transform: none; white-space: nowrap; }
.badge .ic { width: 1.1em; height: 1.1em; }
.badge-ok { background: var(--ok-100); color: var(--ok-700); }
.badge-ko { background: var(--ko-100); color: var(--ko-700); }
.badge-info { background: var(--vosges-100); color: var(--vosges-700); }
.badge-encaisser { background: var(--tuile-100); color: var(--tuile-700); }
.badge-abonnement { background: var(--gazon-100); color: var(--foret-700); }
.badge-maintenant { background: var(--miel-400); color: var(--encre-900); }
.badge-simule { background: var(--att-100); color: var(--att-700); border: 2px dashed var(--att-700); }

.marque { display: inline-flex; align-items: center; gap: .75rem; min-height: 48px; text-decoration: none;
  color: var(--foret-800); flex: none; }
.marque:hover { color: var(--foret-800); }
.marque-logo { flex: none; display: grid; place-items: center; width: var(--marque-taille, 56px);
  height: var(--marque-taille, 56px); }
.marque-logo img { width: 100%; height: 100%; object-fit: contain; }
.marque-nom { display: flex; flex-direction: column; line-height: 1.15; }
.marque-l1 { font-family: var(--f-ui); font-size: max(15px, .889rem); color: var(--encre-600); }
.marque-l2 { font-family: var(--f-titre); font-size: 1.1rem; font-weight: 600; color: var(--foret-800); }
.marque.sur-sombre .marque-logo { background: var(--blanc); border-radius: 50%;
  padding: calc(var(--marque-taille, 56px) * .08); box-shadow: 0 0 0 3px rgba(255,255,255,.18); }
.marque.sur-sombre .marque-l1 { color: var(--brume); }
/* Même pastille que la gestion dans l'en-tête du site (sur le ciel ou le lin) : disque blanc, liseré trait-200, logo rogné en cercle */
html.site .marque:not(.sur-sombre) .marque-logo { background: var(--blanc); border-radius: 50%;
  padding: calc(var(--marque-taille, 56px) * .08); box-shadow: 0 0 0 1px var(--trait-200), var(--ombre-1); }
html.site .marque .marque-logo img { border-radius: 50%; clip-path: circle(50%); }
.marque.sur-sombre .marque-l2 { color: var(--lin-100); }

.crete { display: block; width: 100%; height: auto; }

/* ============================================================ 3. Site vitrine */
html.site { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--entete-site) + 16px); }
html.site.menu-ouvert { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) { html.site { scroll-behavior: smooth; } }

.site .ic-24 { width: 24px; height: 24px; }
.crete-loin { fill: var(--vosges-300); opacity: .6; }
.crete-pres { fill: var(--crete-fond, var(--lin-50)); }

/* ---------- Barre d'infos (ordinateur) ---------- */
.infos-haut { display: none; background: var(--foret-950); color: var(--lin-100); font-size: 1rem; }
.infos-ligne { display: flex; align-items: center; gap: 2rem; min-height: 48px; }
.infos-ligne > a, .infos-ligne > span { display: inline-flex; align-items: center; gap: .5rem; min-height: 48px;
  color: var(--lin-100); text-decoration: none; }
.infos-ligne > a:hover { text-decoration: underline; color: var(--blanc); }
.infos-ligne .ic { color: var(--gazon-300); }
.infos-espace { margin-left: auto; font-weight: 600; }
.bouton-a-plus { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px;
  min-width: 48px; padding: 0 1rem; border-radius: var(--r-pilule); border: 2px solid rgba(242,236,223,.55);
  background: transparent; color: var(--lin-100); font-family: var(--f-ui); font-weight: 600; cursor: pointer; }
.bouton-a-plus .ic { width: 1.35em; height: 1.35em; }
.bouton-a-plus[aria-pressed=true] { background: var(--lin-100); color: var(--foret-950); border-color: var(--lin-100); }

/* ---------- En-tête ---------- */
.tete { position: sticky; top: 0; z-index: var(--z-entete); background: rgba(250,247,240,.94);
  border-bottom: 1px solid var(--trait-200); transition: background-color var(--duree-petit), border-color var(--duree-petit); }
@supports (backdrop-filter: blur(12px)) { .tete { backdrop-filter: blur(12px) saturate(1.2); background: rgba(250,247,240,.86); } }
html.js .tete-sur-heros:not(.est-opaque) { background: transparent; border-bottom-color: transparent; backdrop-filter: none; }
.tete-ligne { display: flex; align-items: center; gap: 1rem; min-height: 64px; }
.tete .marque { --marque-taille: 44px; }
.nav-principale, .tete-reserver { display: none; }
.tete-mobile { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
/* « A+ Texte » : un mot visible à côté de l'icône ; « Texte normal » quand le texte est agrandi. Taille en px : l'en-tête
   tient à 360 px même en texte agrandi (16 px reste au-dessus du minimum de 15 px). */
.bouton-a-plus-court { gap: 6px; min-height: 48px; min-width: 96px; padding: 0 10px 0 8px; color: var(--foret-800);
  border-color: var(--foret-700); font-size: 16px; line-height: 1.1; white-space: nowrap; }
.bouton-a-plus-court .ic { width: 22px; height: 22px; }
.bouton-a-plus-court:hover { background: var(--gazon-100); }
html.texte-grand .bouton-a-plus-court { background: var(--foret-700); border-color: var(--foret-700); color: var(--blanc); }
.atc-on, html.texte-grand .atc-off { display: none; }
html.texte-grand .atc-on { display: inline; }
.bouton-menu { display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; padding: 0 1.1rem 0 .9rem;
  border-radius: var(--r-pilule); background: var(--foret-800); color: var(--lin-50); font-family: var(--f-ui);
  font-weight: 600; text-decoration: none; }
.bouton-menu:hover { background: var(--foret-950); color: var(--lin-50); }
.bouton-menu .ic { width: 1.35em; height: 1.35em; }
@media (max-width: 1099px) {
  .bouton-menu { gap: 6px; padding: 0 12px 0 10px; font-size: 16px; }
  .tete-ligne { gap: 12px; }
  .tete-mobile { gap: 6px; }
  .bouton-menu .ic { width: 22px; height: 22px; }
}

@media (min-width: 1100px) {
  .infos-haut { display: block; }
  .tete-ligne { min-height: var(--entete-site); gap: 1.25rem; }
  .tete .marque { --marque-taille: 56px; }
  .nav-principale { display: block; margin-left: auto; }
  .tete-reserver { display: inline-flex; padding-inline: 1.25rem; }
  .tete-mobile { display: none; }
}
@media (min-width: 1100px) and (max-width: 1279px) {
  html.texte-grand .infos-haut, html.texte-grand .nav-principale, html.texte-grand .tete-reserver { display: none; }
  html.texte-grand .tete-mobile { display: flex; }
  html.texte-grand .tete-ligne { min-height: 72px; }
}
@media (min-width: 1100px) and (max-width: 1200px) { .tete .marque-nom { display: none; } }
@media (max-width: 459px) { .tete .marque-nom { display: none; } }
@media (max-width: 599px) { html.texte-grand .tete .marque-nom { display: none; } }

.nav-racine { display: flex; align-items: center; gap: .15rem; list-style: none; margin: 0; padding: 0; position: relative; }
.nav-racine > li { position: relative; }
.nav-racine > li.nav-item:has(.deroulant-mega) { position: static; }
.nav-haut { display: flex; align-items: center; gap: .3em; min-height: 48px; padding: .5rem .8rem; border-radius: var(--r-s);
  font-family: var(--f-ui); font-weight: 600; font-size: 1rem; color: var(--encre-900); text-decoration: none;
  cursor: pointer; list-style: none; position: relative; white-space: nowrap; user-select: none; }
.nav-haut::-webkit-details-marker { display: none; }
.nav-haut:hover { background: var(--gazon-100); color: var(--foret-800); }
/* Entrée « Gestion » (comptes autorisés connectés seulement) : couleur tuile, celle de la gestion. */
.nav-haut.nav-gestion { color: var(--tuile-700); }
.nav-haut.nav-gestion:hover { background: var(--tuile-100); color: var(--tuile-700); }
.nav-haut.est-actif::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: 4px; height: 3px;
  border-radius: 3px; background: var(--foret-700); }
.nav-haut .chevron { width: 1em; height: 1em; transition: transform var(--duree-petit) var(--ease-sortie); }
.deroulant[open] > .nav-haut { background: var(--gazon-100); color: var(--foret-800); }
.deroulant[open] > .nav-haut .chevron { transform: rotate(180deg); }
.deroulant-panneau { position: absolute; top: calc(100% + 14px); left: 0; width: 360px; z-index: var(--z-menu);
  background: var(--blanc); border-radius: var(--r-l); box-shadow: var(--ombre-3); border-top: 3px solid var(--foret-700);
  padding: .75rem; }
.deroulant-panneau::before { content: ""; position: absolute; top: -9px; left: 2rem; width: 14px; height: 14px;
  background: var(--foret-700); transform: rotate(45deg); border-radius: 3px 0 0 0; z-index: -1; }
.nav-racine > li:last-child .deroulant-panneau { left: auto; right: 0; }
.nav-racine > li:last-child .deroulant-panneau::before { left: auto; right: 2rem; }
.deroulant[open] .deroulant-panneau { animation: deroule var(--duree-petit) var(--ease-sortie); }
@keyframes deroule { from { opacity: 0; transform: translateY(-6px); } }
.deroulant-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.deroulant-mega .deroulant-panneau { width: min(800px, calc(100vw - 2 * var(--gouttiere))); display: grid;
  grid-template-columns: 1fr 1fr 230px; gap: .5rem; left: 0; }
.deroulant-mega .deroulant-panneau::before { left: 2.5rem; }
.deroulant-mega .deroulant-liste { grid-column: 1 / 3; grid-template-columns: 1fr 1fr; align-content: start; }
.nav-lien { display: flex; align-items: center; gap: .75rem; min-height: 56px; padding: .45rem .7rem;
  border-radius: var(--r-m); text-decoration: none; color: var(--encre-900); position: relative; }
.nav-lien:hover { background: var(--gazon-100); color: var(--encre-900); }
.nav-pastille { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gazon-100); color: var(--foret-700); transition: background-color var(--duree-micro); }
.nav-pastille .ic { width: 24px; height: 24px; }
.nav-lien:hover .nav-pastille { background: var(--blanc); }
.nav-texte { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.nav-libelle { font-weight: 600; font-size: 1rem; }
.nav-precision { font-size: var(--t-petit); color: var(--encre-600); }
.nav-lien[aria-current=page] .nav-libelle { color: var(--foret-700); text-decoration: underline; text-underline-offset: .2em; }
.mega-carte { position: relative; display: flex; align-items: flex-end; border-radius: var(--r-m); overflow: hidden;
  min-height: 300px; text-decoration: none; color: var(--blanc); isolation: isolate; }
.mega-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 80%;
  z-index: -2; transition: transform var(--duree-moyen) var(--ease-sortie); }
.mega-voile { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(14,38,26,0) 30%, rgba(14,38,26,.7) 55%, rgba(14,38,26,.92) 100%); }
.mega-texte { display: grid; gap: .15rem; padding: 1rem 1.1rem 1.1rem; width: 100%; }
.mega-titre { font-family: var(--f-titre); font-size: 1.3rem; font-weight: 600; line-height: 1.15; }
.mega-prix { color: var(--lin-100); font-size: 1rem; }
.mega-fleche { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--lin-50); color: var(--foret-950); margin-top: .4rem; }
.mega-carte:hover { color: var(--blanc); }
.mega-carte:hover .mega-photo { transform: scale(1.04); }

/* ---------- Menu plein écran (téléphone et tablette) : une liste, un seul niveau (04-TELEPHONE.md § 2.2, A9) ---------- */
.menu-plein { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0;
  padding: 0; border: 0; background: var(--lin-50); color: var(--encre-900); overflow-y: auto; overscroll-behavior: contain; }
.menu-plein[open] { display: flex; flex-direction: column; animation: glisse var(--duree-moyen) var(--ease-sortie); }
html:not(.js) .menu-plein:target { display: flex; flex-direction: column; z-index: var(--z-menu); }
.menu-plein::backdrop { background: rgba(14,38,26,.6); }
@keyframes glisse { from { transform: translateX(24px); opacity: 0; } }
.mm-haut { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: .5rem; min-height: 64px;
  padding: .5rem max(var(--gouttiere), calc((100% - 640px) / 2)); background: var(--lin-50); border-bottom: 1px solid var(--trait-200); }
.mm-titre { margin: 0 auto 0 0; font-size: 1.375rem; }
.mm-fermer { display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; padding: 0 .9rem 0 1.1rem;
  border-radius: var(--r-pilule); border: 2px solid var(--foret-700); background: var(--blanc); color: var(--foret-800);
  font-family: var(--f-ui); font-weight: 600; cursor: pointer; }
.mm-fermer:hover { background: var(--gazon-100); }
.mm-fermer .ic { width: 1.35em; height: 1.35em; }
.mm-nav { width: min(640px, 100%); margin-inline: auto; padding: 0 var(--gouttiere) 1.5rem; }
.mm-nav > .liste-titre:first-child { margin-top: 1rem; }
.mm-accueil { margin-top: 1rem; }
.mm-texte { margin: .75rem 0 0; }
.mm-a-plus { display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 56px; padding: .5rem 1rem;
  border: 2px solid var(--foret-700); border-radius: var(--r-m); background: var(--blanc); color: var(--foret-800);
  font-family: var(--f-ui); font-size: 1.0625rem; font-weight: 600; text-align: left; cursor: pointer; }
.mm-a-plus .ic { flex: none; width: 24px; height: 24px; }
.mm-a-plus:hover { background: var(--gazon-100); }
html.texte-grand .mm-a-plus { background: var(--foret-700); color: var(--blanc); }

/* ---------- Ligne de liste « réglages de téléphone » (menu, « Aussi au club », dernières nouvelles) ---------- */
.liste-titre { font-family: var(--f-ui); font-size: .9375rem; font-weight: 700; line-height: 1.3; color: var(--foret-800);
  margin: 1.5rem 0 .5rem; letter-spacing: 0; text-transform: none; }
.liste-app { list-style: none; margin: 0; padding: 0; background: var(--blanc); border: 1px solid var(--trait-200);
  border-radius: var(--r-m); overflow: hidden; }
.liste-app > li { position: relative; }
.liste-app > li + li::before { content: ""; position: absolute; top: 0; left: 52px; right: 0; height: 1px; background: var(--trait-200); }
.ligne { display: flex; align-items: center; gap: .75rem; min-height: 56px; padding: .5rem 1rem; text-decoration: none;
  color: var(--encre-900); -webkit-tap-highlight-color: transparent; }
.ligne:hover, .ligne:active { background: var(--gazon-100); color: var(--encre-900); }
.ligne > .ic:first-child { width: 24px; height: 24px; color: var(--foret-700); }
.ligne-vignette { flex: none; width: 56px; height: 56px; border-radius: var(--r-s); object-fit: cover; margin-left: -.25rem; }
.ligne:has(.ligne-vignette) { min-height: 72px; }
.ligne-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ligne-libelle { font-family: var(--f-ui); font-size: 1.0625rem; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.ligne-precision { font-family: var(--f-ui); font-size: var(--t-petit); line-height: 1.4; color: var(--encre-600); }
.ligne-fin { flex: none; width: 20px; height: 20px; color: var(--encre-600); }
.chevron-droite { transform: rotate(-90deg); }
.ligne[aria-current=page] { background: var(--gazon-100); box-shadow: inset 4px 0 0 var(--foret-700); }
.ligne[aria-current=page] .ligne-libelle { color: var(--foret-800); font-weight: 700; }
.ligne[aria-current=page] .ligne-libelle::after { content: " · vous êtes ici"; font-weight: 400; font-size: var(--t-petit);
  color: var(--encre-600); }

/* ---------- Barre d'actions collée (mobile) ---------- */
.barre-actions { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-barre-bas); display: grid;
  grid-template-columns: 1fr 1fr 2fr; height: calc(var(--barre-bas) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom); background: var(--lin-50); border-top: 1px solid var(--trait-200);
  box-shadow: 0 -8px 24px -16px rgba(14,38,26,.35); }
.ba-lien, .ba-principal { display: flex; align-items: center; justify-content: center; text-decoration: none;
  font-family: var(--f-ui); font-weight: 600; min-height: 48px; }
.ba-lien { flex-direction: column; gap: 2px; font-size: var(--t-petit); color: var(--foret-800); }
.ba-lien .ic { width: 24px; height: 24px; color: var(--foret-700); }
.ba-lien:hover { background: var(--gazon-100); color: var(--foret-800); }
.ba-principal { gap: .5rem; background: var(--foret-700); color: var(--blanc); font-size: 1rem; padding: 0 .75rem; text-align: center; line-height: 1.2; }
.ba-principal .ic { width: 24px; height: 24px; }
.ba-principal:hover { background: var(--foret-800); color: var(--blanc); }
@media (max-width: 1099px) {
  html.site body { padding-bottom: calc(var(--barre-bas) + env(safe-area-inset-bottom)); }
  html.site { scroll-padding-top: 80px; scroll-padding-bottom: calc(var(--barre-bas) + 16px); }
}
@media (min-width: 1100px) { .barre-actions { display: none; } }
@media (min-width: 1100px) and (max-width: 1279px) {
  html.texte-grand .barre-actions { display: grid; }
  html.site.texte-grand body { padding-bottom: calc(var(--barre-bas) + env(safe-area-inset-bottom)); }
}

/* ---------- Sections, titres, liens ---------- */
.section { padding-block: var(--section); }
.section-lin { background: var(--lin-100); }
.section-foret { background: var(--foret-950); color: var(--lin-100); }
.section-foret h2, .section-foret h3 { color: var(--blanc); }
.tete-section { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: .75rem 2rem;
  margin-bottom: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); }
.tete-section h2 { margin: 0; }
.chapo-section { font-size: var(--t-chapo); line-height: 1.5; color: var(--encre-600); max-width: 68ch; }
.sur-sombre .chapo-section { color: var(--lin-100); }
.lien-suite { display: inline-flex; align-items: center; gap: .45em; min-height: 48px; font-family: var(--f-ui);
  font-weight: 600; color: var(--foret-700); text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: .25em; }
.lien-suite .ic { transition: transform var(--duree-petit) var(--ease-sortie); }
.lien-suite:hover .ic:last-of-type { transform: translateX(4px); }
.centre { text-align: center; }
.boutons-ligne { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.texte { max-width: 68ch; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.cadre-photo { margin: 0; }
.cadre-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-l); box-shadow: var(--ombre-2); }
.cadre-carre { aspect-ratio: 1; }
.cadre-45 { aspect-ratio: 4 / 5; }
.passe-partout { background: var(--lin-100); padding: 12px; border-radius: calc(var(--r-l) + 12px); }
.passe-partout .cadre-img { aspect-ratio: 4 / 5; box-shadow: none; }
.bandeau-info { display: flex; gap: .75rem; align-items: flex-start; background: var(--vosges-100); color: var(--vosges-700);
  border-radius: var(--r-m); padding: 1rem 1.25rem; margin: 1.5rem 0 0; }
.bandeau-info .ic { width: 24px; height: 24px; flex: none; margin-top: .1em; }
.bandeau-info a { color: var(--vosges-700); }
.coches { list-style: none; padding: 0; margin: 0 0 1em; }
.coches li { position: relative; padding-left: 34px; margin-bottom: .55em; }
.coches li::before { content: ""; position: absolute; left: 0; top: .2em; width: 24px; height: 24px; border-radius: 50%;
  background: var(--gazon-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 12.5 3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / 16px no-repeat; }
.prix-lignes { list-style: none; margin: 0 0 1rem; padding: 0; }
.prix-lignes li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; min-height: 48px;
  padding: .6rem 0; border-bottom: 2px dotted var(--sable-200); }
.prix-lignes .num { font-weight: 600; color: var(--foret-800); white-space: nowrap; font-size: 1.1rem; }
.etape-num { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; flex: none;
  background: var(--foret-700); color: var(--blanc); font-size: 1.3rem; font-weight: 600; }

/* ---------- Bandeaux des pages internes ---------- */
.bandeau { --hc: clamp(36px, 8.33vw, 120px); position: relative; isolation: isolate; display: flex; flex-direction: column;
  justify-content: flex-end; min-height: 44vh; min-height: 44svh; background: var(--foret-950); color: var(--lin-100);
  overflow: hidden; }
.bandeau-media { position: absolute; inset: 0; z-index: -2; display: flex; justify-content: center; }
.bandeau-img { width: min(100%, var(--img-max, 100%)); height: 100%; object-fit: cover;
  --bord: clamp(0px, 100vw - var(--img-max, 100vw), 160px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--bord), #000 calc(100% - var(--bord)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--bord), #000 calc(100% - var(--bord)), transparent 100%); }
.bandeau-voile { position: absolute; inset: 0; z-index: -1;
  background: var(--voile-photo), linear-gradient(90deg, rgba(14,38,26,.74) 0%, rgba(14,38,26,.56) 45%, rgba(14,38,26,0) 80%); }
.bandeau-texte { padding-top: 3rem; padding-bottom: calc(var(--hc) + 1rem); }
.bandeau h1 { color: var(--blanc); margin-bottom: .25em; max-width: 22ch; text-shadow: 0 1px 24px rgba(14,38,26,.35); }
.bandeau-chapo { font-size: var(--t-chapo); line-height: 1.5; color: var(--lin-100); max-width: 52ch; margin: 0; }
.fil { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .4rem; font-size: 1rem; margin: 0 0 .5rem; color: var(--lin-100); }
.fil a { display: inline-flex; align-items: center; min-height: 48px; color: var(--lin-100); }
.bandeau-crete { position: absolute; left: 0; right: 0; bottom: -1px; height: var(--hc); --crete-fond: var(--lin-50); }
.bandeau-graphique { background:
    radial-gradient(120% 90% at 85% 0%, rgba(76,154,92,.28), transparent 60%),
    radial-gradient(80% 70% at 0% 100%, rgba(45,74,110,.45), transparent 65%), var(--foret-950); }
.bandeau-courbes { position: absolute; inset: 0; z-index: -1; opacity: .55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 300' fill='none' stroke='%239FB3CC' stroke-opacity='.35' stroke-width='1.2'%3E%3Cpath d='M-20 260c80-30 140-90 230-80s120 70 210 50 120-80 200-70'/%3E%3Cpath d='M-20 230c90-40 150-100 240-90s110 60 200 40 130-90 200-80'/%3E%3Cpath d='M-20 200c100-50 160-110 250-100s100 50 190 30 140-100 200-90'/%3E%3Cpath d='M-20 170c110-60 170-120 260-110s90 40 180 20 150-110 200-100'/%3E%3Cpath d='M-20 140c120-70 180-130 270-120s80 30 170 10 160-120 200-110'/%3E%3Cpath d='M-20 110c130-80 190-140 280-130s70 20 160 0 170-130 200-120'/%3E%3Cpath d='M380 80c30-30 70-40 100-30s40 40 10 55-90 10-110-25z'/%3E%3Cpath d='M400 75c20-18 50-24 70-17s25 25 5 35-60 5-75-18z'/%3E%3C/svg%3E");
  background-size: 900px auto; background-position: right -120px center; }
.bandeau-graphique .bandeau-trait { position: absolute; left: 0; right: 0; bottom: calc(var(--hc) * .55); height: var(--hc);
  color: var(--gazon-300); opacity: .45; }
.bandeau-graphique .bandeau-voile { display: none; }
@media (max-width: 759px) { .bandeau { min-height: 34vh; min-height: 34svh; } .bandeau-texte { padding-top: 2rem; }
  .bandeau-voile { background: linear-gradient(180deg, rgba(14,38,26,.62) 0%, rgba(14,38,26,.76) 40%, rgba(14,38,26,.9) 100%); } }

/* ---------- Accueil : héros ---------- */
.heros { position: relative; isolation: isolate; overflow: hidden; background: var(--ciel);
  margin-top: calc(-1 * var(--entete-site)); padding-top: var(--entete-site); }
.heros-ciel { position: absolute; inset: 0; z-index: -3;
  background: radial-gradient(70% 55% at 22% 18%, rgba(255,255,255,.55), transparent 70%),
    radial-gradient(55% 75% at 88% 0%, rgba(98,146,222,.55), rgba(140,178,232,.25) 55%, transparent 80%); }
.heros-photo { position: absolute; z-index: -1; }
.heros-img { width: 100%; height: 100%; object-fit: cover; }
.heros-titre { font-family: var(--f-affiche); font-size: var(--t-affiche); line-height: 1.02; letter-spacing: -.01em;
  color: var(--foret-800); margin: 0 0 .35em; font-weight: 600; }
.heros-surtitre { color: var(--foret-700); }
.heros-chapo { font-size: var(--t-chapo); line-height: 1.5; color: var(--encre-900); max-width: 34rem; margin: 0; }
.heros-boutons { display: flex; flex-wrap: wrap; gap: .75rem; }
.bouton-heros-second { background: rgba(250,247,240,.9); border-color: var(--foret-700); color: var(--foret-800); }
.bouton-heros-second:hover { background: var(--blanc); color: var(--foret-800); }
.heros-crete { position: absolute; left: 0; right: 0; bottom: 0; z-index: -2; display: flex; flex-direction: column; }
.heros-crete::after { content: ""; display: block; background: var(--lin-50); height: var(--sol, 0px); }
.heros-crete .crete { height: var(--hcrete, 120px); }
.heros-crete-pleine { --crete-fond: var(--lin-50); }
.heros-crete-trait { position: absolute; left: 0; right: 0; top: 0; color: var(--vosges-700); opacity: .85; }

/* Mobile et tablette portrait : la photo plein cadre, le titre foncé posé dans le ciel sur un voile lin. */
@media (max-width: 959px) {
  .heros { min-height: 88vh; min-height: 88svh; display: flex; flex-direction: column; }
  .heros-photo { inset: 0; }
  .heros-img { object-position: 50% 75%; }
  .heros-crete { display: none; }
  .heros-contenu { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
    padding-block: 1.25rem 1.5rem; }
  .heros-texte { position: relative; }
  .heros-texte::before { content: ""; position: absolute; z-index: -1; left: -50vw; right: -50vw; top: -240px; bottom: -2.5rem;
    background: linear-gradient(180deg, rgba(250,247,240,.55) 0, rgba(250,247,240,.55) calc(100% - 2.5rem), rgba(250,247,240,0) 100%); }
  .heros-boutons .bouton { flex: 1 1 15rem; }
}
/* Ordinateur : ciel CSS pleine largeur, photo à fond perdu à droite, crête qui traverse l'écran. */
/* Option B (arbitrage § 6-4) : le héros et sa bande d'infos tiennent dans l'écran (100svh moins la barre d'infos) ;
   le sol sous la crête est réduit à la hauteur de .heros-infos, qui vient s'y poser ; les boutons restent 1 rem
   au-dessus du sommet de la crête (point le plus haut du tracé : 2/3 de la hauteur du SVG). */
@media (min-width: 960px) {
  .heros { --w-photo: min(50vw, 760px); --hcrete: clamp(80px, 8.33vw, 140px); --barre-infos: 0px;
    --sol: 64px;              /* = hauteur de .heros-infos posée dessus */
    min-height: max(560px, min(100vh - var(--barre-infos) - 1px, 1000px)); min-height: max(560px, min(100svh - var(--barre-infos) - 1px, 1000px)); }
  .heros-photo { right: 0; bottom: 0; top: 0; width: var(--w-photo); }
  .heros-img { object-position: 50% 100%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 20%), linear-gradient(90deg, transparent 0, #000 18%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(180deg, transparent 0, #000 20%), linear-gradient(90deg, transparent 0, #000 18%);
    mask-composite: intersect; }
  .heros-contenu { min-height: max(480px, min(100vh - var(--barre-infos) - var(--entete-site) - 1px, 920px));
    min-height: max(480px, min(100svh - var(--barre-infos) - var(--entete-site) - 1px, 920px));
    display: flex; flex-direction: column; justify-content: center; gap: clamp(1rem, 3vh, 1.75rem);
    padding-block: 1rem calc(var(--sol) + var(--hcrete) * .667 + 1rem); }
  /* Écrans bas (1280 × 720) : le titre suit aussi la hauteur, pour que tout tienne au-dessus de la crête */
  .heros-titre { font-size: min(var(--t-affiche), 10.5vh); font-size: min(var(--t-affiche), 10.5svh); }
  .heros-texte { max-width: min(640px, calc(100% - var(--w-photo) + 2rem)); }
  .heros-boutons { max-width: calc(100% - var(--w-photo) + 12rem); }  /* les boutons peuvent mordre sur le fondu de la photo */
  /* La bande d'infos se pose sur le sol de la crête, à gauche de la photo */
  .heros + .heros-infos { position: relative; z-index: 1; margin-top: -64px; background: transparent; border-bottom: 0; }
  .heros + .heros-infos .heros-infos-ligne { justify-content: flex-start; min-height: 64px; padding-block: 0; gap: .25rem 2rem; }
}
@media (min-width: 1100px) {
  .heros { --barre-infos: 48px; }
  .heros-infos .hi-horaires { display: none; }  /* déjà dans la barre d'infos du haut */
}
@media (min-width: 1100px) and (max-width: 1279px) {
  html.texte-grand .heros { --barre-infos: 0px; }
  html.texte-grand .heros-infos .hi-horaires { display: inline-flex; }
}
.hs-court { display: none; }
@media (max-width: 459px) { .hs-large { display: none; } .hs-court { display: inline; } }
.heros-infos { background: var(--lin-50); border-bottom: 1px solid var(--trait-200); }
.heros-infos-ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .25rem 2.5rem;
  min-height: 64px; padding-block: .5rem; }
.heros-infos-ligne > * { display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; color: var(--foret-800); }
.heros-infos-ligne a { font-weight: 600; color: var(--foret-700); }
.heros-infos-ligne .ic { color: var(--foret-700); }
/* État du terrain dans la bande d'infos (Gestion → État du terrain) : vert ouvert, rouge si quelque chose est fermé. */
.heros-infos-ligne .hi-terrain { font-weight: 600; }
.heros-infos-ligne .hi-terrain.hi-ok .ic { color: var(--ok-700); }
.heros-infos-ligne .hi-terrain.hi-ko { color: var(--ko-700); }
.heros-infos-ligne .hi-terrain.hi-ko .ic { color: var(--ko-700); }

/* ---------- Chiffres clés ---------- */
.chiffres-cles { background: var(--lin-100); padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); position: relative; isolation: isolate; overflow: hidden; }
.chiffres-cles::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 300' fill='none' stroke='%232D4A6E' stroke-opacity='.08' stroke-width='1.2'%3E%3Cpath d='M-20 260c80-30 140-90 230-80s120 70 210 50 120-80 200-70'/%3E%3Cpath d='M-20 230c90-40 150-100 240-90s110 60 200 40 130-90 200-80'/%3E%3Cpath d='M-20 200c100-50 160-110 250-100s100 50 190 30 140-100 200-90'/%3E%3Cpath d='M-20 170c110-60 170-120 260-110s90 40 180 20 150-110 200-100'/%3E%3Cpath d='M-20 140c120-70 180-130 270-120s80 30 170 10 160-120 200-110'/%3E%3Cpath d='M380 80c30-30 70-40 100-30s40 40 10 55-90 10-110-25z'/%3E%3C/svg%3E");
  background-size: 1000px auto; background-position: center; }
.cc-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.cc-liste li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem; padding: .5rem 1rem; }
.cc-liste li + li { border-left: 1px solid var(--sable-200); }
.cc-valeur { font-size: var(--t-chiffre-xl); line-height: 1; color: var(--foret-800); font-weight: 600; white-space: nowrap; }
.cc-unite { font-size: .45em; font-weight: 600; color: var(--foret-700); letter-spacing: .02em; }
.cc-texte { font-family: var(--f-titre); font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); white-space: normal; line-height: 1.15; }
.cc-libelle { color: var(--encre-600); font-size: 1rem; line-height: 1.35; }
.cc-phrase { text-align: center; max-width: 60ch; margin: 1.75rem auto 0; color: var(--encre-900); font-size: var(--t-chapo); line-height: 1.5; }
@media (max-width: 759px) {
  .cc-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.25rem; }
  .cc-liste li { padding-inline: .5rem; min-width: 0; }
  html.texte-grand .cc-valeur { font-size: clamp(2rem, 1.2rem + 5vw, 3rem); }
  .cc-liste li + li { border-left: 0; }
  .cc-liste li:nth-child(even) { border-left: 1px solid var(--sable-200); }
}

/* ---------- « Que venez-vous faire ? » ---------- */
.portes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.75rem, .5rem + 1vw, 1.5rem); }
.porte-lien { position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 4 / 5;
  border-radius: var(--r-l); overflow: hidden; color: var(--blanc); text-decoration: none; isolation: isolate;
  box-shadow: var(--ombre-2); transition: transform var(--duree-petit) var(--ease-sortie), box-shadow var(--duree-petit); }
.porte-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  transition: transform var(--duree-moyen) var(--ease-sortie); }
.porte-voile { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(14,38,26,0) 30%, rgba(14,38,26,.62) 58%, rgba(14,38,26,.92) 100%); }
.porte-prix { position: absolute; top: .75rem; left: .75rem; background: var(--lin-50); color: var(--foret-950);
  border-radius: var(--r-pilule); padding: .2rem .75rem; font-family: var(--f-ui); font-size: var(--t-petit); font-weight: 600;
  line-height: 1.5; max-width: calc(100% - 1.5rem); }
.porte-texte { display: grid; gap: .2rem; padding: 1.1rem 1.1rem 1.25rem; padding-right: calc(40px + 1.9rem); }
.porte-titre { font-family: var(--f-titre); font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem); font-weight: 600; line-height: 1.1; }
.porte-precision { color: var(--lin-100); font-size: 1rem; line-height: 1.35; }
.porte-fleche { position: absolute; right: .9rem; bottom: 1.1rem; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(250,247,240,.16); border: 1px solid rgba(250,247,240,.4); }
.porte-lien:hover { color: var(--blanc); transform: translateY(-2px); box-shadow: var(--ombre-3); }
.porte-lien:hover .porte-img { transform: scale(1.04); }
.porte-lien:hover .porte-fleche { background: var(--lin-50); color: var(--foret-950); }
.porte-lien:focus-visible { outline-color: var(--foret-950); }
.portes-plus { margin: 1.25rem 0 0; }
@media (max-width: 959px) { .portes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) {
  .porte-texte { padding: .8rem .8rem 1rem; }
  .porte-fleche { display: none; }
  .porte-prix { top: .5rem; left: .5rem; }
}

/* ---------- Le parcours (accueil) ---------- */
.duo-plan { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; }
.plan-cadre { margin: 0; background: var(--blanc); border-radius: var(--r-l); padding: clamp(.5rem, .3rem + 1vw, 1.25rem);
  box-shadow: var(--ombre-3); }
.plan-zone { position: relative; max-width: 935px; margin-inline: auto; }
.plan-img { width: 100%; }
.plan-repere { position: absolute; transform: translate(-50%, -50%); width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; background: var(--miel-400); color: var(--encre-900); font-family: var(--f-chiffres);
  font-weight: 700; font-size: 15px; box-shadow: 0 0 0 3px var(--blanc), var(--ombre-2); pointer-events: none; }
.mini-chiffres { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; margin: 1.5rem 0 2rem; }
.mini-chiffres div { display: flex; flex-direction: column-reverse; }
.mini-chiffres dt { font-family: var(--f-ui); font-size: var(--t-petit); font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; color: var(--brume); }
.mini-chiffres dd { margin: 0; font-size: 2.2rem; line-height: 1.1; color: var(--miel-400); font-weight: 600; }

/* ---------- Enseignement (accueil) ---------- */
.duo-cours { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.cours-photo { position: relative; margin: 0 0 24px; }
.cours-photo .cadre-img { aspect-ratio: 3 / 4; object-position: 50% 30%; }
.cours-pro { position: absolute; right: -16px; bottom: -24px; width: 112px; height: 112px; border-radius: 50%;
  overflow: hidden; border: 6px solid var(--gazon-100); background: var(--blanc); box-shadow: var(--ombre-2); }
.cours-pro-img { width: 100%; height: 100%; object-fit: cover; }
.etapes-frise { list-style: none; margin: 1.75rem 0 2rem; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1rem; position: relative; }
.etapes-frise::before { content: ""; position: absolute; top: 24px; left: 24px; right: 24px; height: 2px;
  background: linear-gradient(90deg, var(--gazon-500), var(--sable-200)); z-index: 0; }
.etapes-frise li { position: relative; display: grid; gap: .3rem; align-content: start; }
.etapes-frise .etape-num { position: relative; z-index: 1; box-shadow: 0 0 0 6px var(--lin-50); }
.etapes-frise strong { font-family: var(--f-titre); font-size: 1.15rem; color: var(--foret-800); line-height: 1.2; margin-top: .4rem; }
.etapes-frise span:not(.etape-num) { color: var(--encre-600); font-size: 1rem; line-height: 1.45; }
@media (max-width: 599px) {
  .etapes-frise { grid-template-columns: 1fr; }
  .etapes-frise::before { top: 24px; bottom: 24px; left: 23px; right: auto; width: 2px; height: auto; }
  .etapes-frise li { grid-template-columns: 48px 1fr; column-gap: 1rem; }
  .etapes-frise li > :not(.etape-num) { grid-column: 2; }
  .etapes-frise .etape-num { grid-row: 1 / span 2; }
}

/* ---------- Terrasse (accueil) ---------- */
.terrasse { position: relative; isolation: isolate; overflow: hidden; background: var(--foret-950);
  min-height: clamp(520px, 62vh, 700px); display: flex; align-items: flex-end; }
.terrasse-media { position: absolute; inset: 0; z-index: -2; }
.terrasse-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.terrasse-voile { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(14,38,26,.9) 0%, rgba(14,38,26,.72) 38%, rgba(14,38,26,.15) 70%, rgba(14,38,26,0) 100%),
    linear-gradient(180deg, rgba(14,38,26,0) 50%, rgba(14,38,26,.5) 100%); }
.terrasse-ligne { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 2rem; align-items: end;
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
.terrasse-texte { max-width: 34rem; }
.terrasse h2 { color: var(--blanc); }
.ardoise { justify-self: end; width: min(100%, 22rem); background: rgba(22,32,27,.88); color: var(--lin-100);
  border: 1px solid rgba(242,236,223,.18); border-radius: var(--r-l); padding: 1.4rem 1.5rem; box-shadow: var(--ombre-3); }
@supports (backdrop-filter: blur(8px)) { .ardoise { backdrop-filter: blur(8px); } }
.ardoise-titre { font-family: "Segoe Print", "Bradley Hand", var(--f-titre); font-size: 1.15rem; color: var(--miel-400);
  margin: 0 0 .5rem; }
.ardoise-liste { list-style: none; margin: 0; padding: 0; }
.ardoise-liste li { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0;
  border-bottom: 1px dashed rgba(242,236,223,.25); }
.ardoise-liste li:last-child { border-bottom: 0; }
.ardoise-liste .num { color: var(--miel-400); font-weight: 600; white-space: nowrap; }
@media (max-width: 859px) {
  .terrasse { min-height: 0; flex-direction: column; align-items: stretch; }
  .terrasse-media { position: relative; inset: auto; height: 46vw; min-height: 220px; }
  .terrasse-voile { top: auto; height: 50%; background: linear-gradient(180deg, rgba(14,38,26,0), var(--foret-950)); bottom: auto;
    top: calc(46vw - 23vw); }
  .terrasse-ligne { grid-template-columns: 1fr; padding-top: 1.5rem; }
  .ardoise { justify-self: stretch; width: auto; }
}
@media (max-width: 859px) and (max-width: 477px) { .terrasse-voile { top: 110px; height: 110px; } }

/* ---------- Affiches et actualités ---------- */
.vie-appel { margin: 0 0 1.75rem; }
.affiches { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, .5rem + 2vw, 2rem); align-items: start; }
.affiche { margin: 0; display: grid; gap: .75rem; }
.affiche-lien { position: relative; display: block; border-radius: var(--r-m); overflow: hidden; background: var(--blanc);
  box-shadow: var(--ombre-2); color: var(--foret-800); text-decoration: none; transition: transform var(--duree-petit) var(--ease-sortie), box-shadow var(--duree-petit); }
.affiche-img { width: 100%; height: auto; }
.affiche-voir { position: absolute; left: .75rem; bottom: .75rem; display: inline-flex; align-items: center; gap: .4rem;
  min-height: 40px; padding: .3rem .9rem; border-radius: var(--r-pilule); background: var(--foret-950); color: var(--lin-50);
  font-family: var(--f-ui); font-size: var(--t-petit); font-weight: 600; box-shadow: var(--ombre-2); }
.affiche-lien:hover { transform: translateY(-2px); box-shadow: var(--ombre-3); }
.affiche figcaption { font-weight: 600; color: var(--foret-800); line-height: 1.35; }
.affiches-toutes { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.actus { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1.25rem; margin-top: 2.5rem; }
.actu { background: var(--blanc); border-radius: var(--r-m); padding: 1.4rem 1.5rem 1rem; border: 1px solid var(--trait-200);
  display: flex; flex-direction: column; }
.actu h3 { font-size: 1.2rem; }
.actu > p:not(.actu-date) { color: var(--encre-900); }
.actu .lien-suite { margin-top: auto; }
.actu-date { font-family: var(--f-ui); font-size: 1rem; color: var(--encre-600); margin-bottom: .4rem; }
.section-lin .actu { border-color: var(--sable-200); }
@media (max-width: 759px) { .affiches:not(.affiches-toutes) { grid-template-columns: 1fr 1fr; }
  .affiches:not(.affiches-toutes) .affiche:nth-child(3) { display: none; } }
@media (max-width: 599px) { .affiches-toutes { grid-template-columns: 1fr 1fr; } .affiche-voir { display: none; } }

/* ---------- Accès, coordonnées ---------- */
.duo-acces, .duo-contact { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.duo-contact { align-items: start; }
.trajets { list-style: none; margin: 1rem 0 1.75rem; padding: 0; display: grid; gap: .25rem; }
.trajets li { display: flex; gap: .6rem; align-items: baseline; padding-left: 1.4rem; position: relative; }
.trajets li::before { content: ""; position: absolute; left: 0; top: .55em; width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--gazon-500); }
.trajets .num { font-weight: 600; color: var(--foret-800); min-width: 4.2em; }
.coord-carte { background: var(--blanc); border: 1px solid var(--trait-200); border-radius: var(--r-l); box-shadow: var(--ombre-2);
  padding: clamp(1.25rem, 1rem + 1vw, 2rem); }
.coord-carte p { display: flex; align-items: center; gap: .8rem; margin: 0; min-height: 52px; font-size: 1.1rem;
  border-bottom: 1px solid var(--trait-200); }
.coord-carte p:last-of-type { border-bottom: 0; }
.coord-carte .ic { color: var(--foret-700); width: 24px; height: 24px; }
.coord-carte p > a, .pied-coord p > a { display: inline-flex; align-items: center; min-height: 48px; }
.coord-grande .bouton { margin-top: 1rem; }

/* ---------- Pied de page ---------- */
.pied-site { --hc: clamp(40px, 8.33vw, 120px); color: var(--lin-100); margin-top: 0;
  background: linear-gradient(180deg, transparent 0, transparent calc(var(--hc) - 2px), var(--foret-950) calc(var(--hc) - 2px)); }
.pied-crete { height: var(--hc); --crete-fond: var(--foret-950); }
.pied-appel { padding: clamp(1.5rem, 1rem + 2vw, 3rem) 0 clamp(2rem, 1.5rem + 2vw, 3.5rem); border-bottom: 1px solid rgba(242,236,223,.12); }
.pied-appel-ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; }
.pied-appel-titre { font-family: var(--f-titre); font-size: var(--t-h1); line-height: 1.05; color: var(--blanc); margin: 0 0 .3em; font-weight: 600; }
.pied-appel-texte { color: var(--brume); margin: 0; max-width: 46ch; }
.pied-appel-boutons { display: flex; flex-wrap: wrap; gap: .75rem; }
.pied-bouton-tel { border-color: rgba(242,236,223,.55); color: var(--lin-100); }
.pied-bouton-tel:hover { background: rgba(242,236,223,.1); color: var(--blanc); border-color: var(--lin-100); }
.pied-grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); }
.pied-col ul { list-style: none; margin: 0; padding: 0; }
.pied-col li a { display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; font-size: 1rem;
  color: var(--lin-100); text-decoration: none; }
.pied-col li a:hover { color: var(--blanc); text-decoration: underline; }
.pied-col li .ic { color: var(--gazon-300); }
.pied-titre { font-family: var(--f-titre); font-size: 1.25rem; color: var(--blanc); margin: 0 0 .5rem; font-weight: 600; }
.pied-coord .marque { margin-bottom: 1rem; }
.pied-coord p { display: flex; gap: .7rem; align-items: center; margin: 0; min-height: 48px; }
.pied-coord p > a, .pied-coord p span a { color: var(--lin-100); }
.pied-coord .ic { color: var(--gazon-300); width: 22px; height: 22px; align-self: flex-start; margin-top: 13px; }
.pied-coord span a { display: inline-flex; min-height: 48px; align-items: center; }
.pied-bas { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 2rem;
  border-top: 1px solid rgba(242,236,223,.14); padding-block: 1rem 1.5rem; color: var(--brume); }
.pied-bas p { margin: 0; }
.pied-bas-liens { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.pied-bas-liens a { display: inline-flex; align-items: center; min-height: 48px; }
@media (max-width: 899px) { .pied-grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .pied-grille { grid-template-columns: 1fr; gap: 1.5rem; } .pied-appel-boutons .bouton { flex: 1 1 100%; } }

/* ---------- Parcours : explorateur ---------- */
.chiffres-parcours { padding-block: 2.5rem; }
.explorateur { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.exp-plan { display: grid; gap: 1.5rem; align-content: start; }
.plan-pastille { display: none; position: absolute; transform: translate(-50%, -50%); width: 28px; height: 28px;
  border-radius: 50%; place-items: center; background: var(--blanc); color: var(--foret-800); border: 2px solid var(--foret-800);
  font-family: var(--f-chiffres); font-weight: 700; font-size: 13px; line-height: 1; text-decoration: none;
  box-shadow: var(--ombre-1); transition: transform var(--duree-micro); }
.plan-pastille:hover { transform: translate(-50%, -50%) scale(1.15); color: var(--foret-800); z-index: 2; }
.plan-pastille.est-actif { background: var(--miel-400); color: var(--encre-900); border-color: var(--encre-900); z-index: 3;
  box-shadow: 0 0 0 3px var(--blanc), var(--ombre-2); }
.plan-pastille.est-actif::after { content: ""; position: absolute; left: 50%; bottom: 100%; width: 2px; height: 16px;
  background: var(--encre-900); }
.plan-pastille.est-actif::before { content: ""; position: absolute; left: calc(50% + 2px); bottom: calc(100% + 8px);
  border-left: 11px solid var(--cerf-600); border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.choix-trous { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: .5rem; }
.choix-trou { display: grid; place-items: center; min-height: 48px; aspect-ratio: 1; border-radius: 50%;
  border: 2px solid var(--foret-700); background: var(--blanc); color: var(--foret-800); font-family: var(--f-chiffres);
  font-weight: 600; font-size: 1.1rem; text-decoration: none; transition: background-color var(--duree-micro); }
.choix-trou:hover { background: var(--gazon-100); color: var(--foret-800); }
.choix-trou[aria-current=true] { background: var(--foret-700); color: var(--blanc); box-shadow: 0 0 0 3px var(--gazon-100); }
.exp-fiches { min-width: 0; }
.fiche-trou { display: none; background: var(--blanc); border-radius: var(--r-l); box-shadow: var(--ombre-2);
  border: 1px solid var(--trait-200); padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); position: relative; overflow: hidden; }
.fiche-trou::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px;
  background: repeating-linear-gradient(100deg, var(--gazon-500) 0 28px, #5FAA6E 28px 56px); }
html:not(.js) .fiche-trou:target { display: block; }
html:not(.js) .exp-fiches:not(:has(.fiche-trou:target)) .fiche-trou:first-child { display: block; }
html.js .fiche-trou.est-actif { display: block; }
.fiche-trou:focus { outline: none; }
.ft-tete { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1rem; }
.ft-numero { font-family: var(--f-affiche); font-size: clamp(4rem, 3rem + 3vw, 6rem); line-height: .85; color: var(--foret-800);
  margin: 0; font-weight: 600; min-width: 1.2em; }
.ft-tete h3 { margin: 0; font-size: var(--t-h3); }
.ft-par { font-family: var(--f-ui); font-weight: 600; font-size: 1.4rem; color: var(--tuile-700); margin: 0; }
.ft-distances { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
.ft-distances li { display: flex; align-items: center; gap: .6rem; min-height: 48px; border-bottom: 1px solid var(--trait-200); }
.depart-pastille { width: 18px; height: 18px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 2px var(--encre-900); }
.depart-blancs { background: #FFFFFF; }
.depart-jaunes { background: #F2C14E; }
.depart-bleus { background: #2F67B1; }
.depart-rouges { background: var(--cerf-600); }
.depart-m { margin-left: auto; font-weight: 600; font-size: 1.15rem; color: var(--foret-800); }
.ft-conseil { margin: 0 0 1rem; padding: .25rem 0 .25rem 1.1rem; border-left: 4px solid var(--gazon-500); }
.ft-conseil p { font-family: var(--f-titre); font-style: italic; font-size: 1.2rem; line-height: 1.4; color: var(--foret-800); margin: 0 0 .3rem; }
.ft-conseil footer { font-family: var(--f-ui); font-size: var(--t-petit); color: var(--encre-600); font-weight: 600; }
.ft-cadence { display: flex; gap: .75rem; align-items: flex-start; background: var(--vosges-100); color: var(--vosges-700);
  border-radius: var(--r-m); padding: .8rem 1rem; margin: 0 0 1.25rem; }
.ft-cadence .ic { width: 24px; height: 24px; flex: none; margin-top: .1em; }
.ft-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.ft-nav { padding-inline: 1.1rem; }
.fleche-gauche { transform: rotate(180deg); }
@media (min-width: 960px) { .explorateur { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
  .exp-fiches { position: sticky; top: calc(var(--entete-site) + 1rem); } }
/* Pastilles du plan : seulement si le plan est assez large pour garder 8 px entre les trous 1 et 16 (D8). */
.explorateur .plan-zone { container-type: inline-size; }
@container (min-width: 668px) { .plan-pastille { display: grid; } }
@media (max-width: 759px) { .choix-trous { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 420px) { .ft-distances { grid-template-columns: 1fr; } }
.cadre-plan { margin: 0; background: var(--blanc); border-radius: var(--r-l); padding: 1rem; box-shadow: var(--ombre-2); }
.plan-compact { max-width: 467px; width: 100%; margin-inline: auto; }

/* ---------- Tarifs ---------- */
.sous-nav { position: sticky; top: var(--entete-site); z-index: 40; background: rgba(250,247,240,.95);
  border-bottom: 1px solid var(--trait-200); }
@supports (backdrop-filter: blur(12px)) { .sous-nav { background: rgba(250,247,240,.86); backdrop-filter: blur(12px); } }
.sous-nav-liste { list-style: none; margin-block: 0; padding: .6rem 0; display: flex; gap: .5rem; overflow-x: auto;
  scrollbar-width: none; }
.sous-nav-liste::-webkit-scrollbar { display: none; }
.sous-nav-liste a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.1rem; border-radius: var(--r-pilule);
  border: 1px solid var(--trait-200); background: var(--blanc); color: var(--foret-800); font-family: var(--f-ui);
  font-weight: 600; text-decoration: none; white-space: nowrap; }
.sous-nav-liste a:hover { border-color: var(--foret-700); color: var(--foret-800); }
.sous-nav-liste a[aria-current=true] { background: var(--foret-700); border-color: var(--foret-700); color: var(--blanc); }
@media (max-width: 1099px) { .sous-nav { top: 64px; } }
@media (max-width: 759px) {
  .sous-nav-liste { padding-right: 2.5rem;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 3rem), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 3rem), transparent); }
}
@media (min-width: 1100px) and (max-width: 1279px) { html.texte-grand .sous-nav { top: 72px; } }
html.site:has(.sous-nav) { scroll-padding-top: calc(var(--entete-site) + 88px); }
.cartes-prix { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.25rem; }
.carte-prix { grid-column: span 2; background: var(--blanc); border: 1px solid var(--trait-200); border-radius: var(--r-l);
  padding: 1.5rem 1.5rem 1.25rem; box-shadow: var(--ombre-1); display: flex; flex-direction: column; }
.carte-prix:nth-child(4) { grid-column: 2 / span 2; }
.carte-prix-vedette { border: 2px solid var(--foret-700); box-shadow: var(--ombre-2); background:
  linear-gradient(180deg, var(--gazon-100), var(--blanc) 55%); }
.cp-parcours { font-family: var(--f-ui); font-size: var(--t-petit); font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
  color: var(--foret-700); margin: 0 0 .3rem; }
.carte-prix-vedette .cp-parcours { display: inline-flex; align-self: flex-start; background: var(--foret-700); color: var(--blanc);
  border-radius: var(--r-pilule); padding: .15rem .75rem; letter-spacing: .06em; }
.cp-titre { font-size: 1.25rem; margin: 0 0 .75rem; }
.cp-prix { font-size: 2.6rem; line-height: 1; color: var(--foret-800); font-weight: 600; margin: auto 0 .3rem; }
.cp-euro { font-size: .6em; margin-left: .08em; }
.cp-unite { color: var(--encre-600); margin: 0 0 .75rem; }
.cp-jeune { margin: 0; padding-top: .75rem; border-top: 1px dashed var(--trait-200); font-size: 1rem; }
.forfaits { margin-top: 2.5rem; max-width: 40rem; }
.calc-section { background: radial-gradient(90% 80% at 100% 0%, rgba(76,154,92,.22), transparent 60%), var(--foret-950); }
.calculateur { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); }
.calc-entree h2 { color: var(--blanc); }
.calc-champ { display: grid; gap: .4rem; margin-bottom: 1.25rem; }
.calc-champ label, .stepper label, .calc-cases legend { font-weight: 600; color: var(--lin-100); }
.calc-champ select { width: 100%; }
.calc-steppers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.stepper { display: grid; gap: .4rem; align-content: start; }
.stepper label { display: flex; flex-wrap: wrap; gap: 0 .5rem; align-items: baseline; }
.calc-aide { color: var(--miel-400); font-size: var(--t-petit); }
.stepper-ligne { display: flex; align-items: center; gap: .4rem; }
.stepper-bouton { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 2px solid rgba(242,236,223,.55);
  background: transparent; color: var(--lin-100); display: grid; place-items: center; cursor: pointer; padding: 0; }
.stepper-bouton .ic { width: 26px; height: 26px; }
.stepper-bouton:hover { background: rgba(242,236,223,.12); }
.stepper-bouton:active { transform: scale(.94); }
.stepper input[type=number] { width: 100%; min-width: 3.2em; text-align: center; font-size: 1.3rem; font-weight: 600;
  padding-inline: .25rem; -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc-cases { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: .25rem 1rem; }
.calc-cases legend { margin-bottom: .5rem; padding: 0; }
.calc-case { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .75rem; min-height: 56px; padding: .4rem .8rem;
  border-radius: var(--r-m); background: rgba(242,236,223,.06); border: 1px solid rgba(242,236,223,.14); cursor: pointer; }
.calc-case:hover { background: rgba(242,236,223,.1); }
.calc-case input { width: 24px; height: 24px; accent-color: var(--gazon-300); flex: none; margin: 0; }
.calc-case > span:first-of-type { flex: 1; color: var(--lin-100); }
.calc-case-prix { color: var(--brume); font-size: 1rem; }
.calc-resultat { align-self: start; position: sticky; top: calc(var(--entete-site) + 88px); background: rgba(242,236,223,.06);
  border: 1px solid rgba(242,236,223,.16); border-radius: var(--r-l); padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); }
.calc-resultat-titre { font-family: var(--f-ui); font-size: var(--t-petit); font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; color: var(--gazon-300); margin: 0 0 .5rem; }
.calc-total { display: block; font-size: var(--t-chiffre-xl); line-height: 1; color: var(--miel-400); font-weight: 600;
  margin-bottom: .6rem; white-space: nowrap; }
.calc-par { color: var(--lin-100); font-size: 1.1rem; margin: 0 0 1rem; }
.calc-detail { margin: 0 0 1.5rem; padding: 1rem 0 0 1.2em; border-top: 1px solid rgba(242,236,223,.16); color: var(--brume); }
.calc-detail li { margin-bottom: .25rem; }
.calc-resultat .bouton { width: 100%; }
.calc-note { color: var(--brume); margin: 1rem 0 0; font-size: 1rem; }
@media (max-width: 959px) { .calculateur { grid-template-columns: 1fr; } .calc-resultat { position: static; } }
@media (max-width: 599px) { .calc-steppers { grid-template-columns: 1fr; } }
.offre-debutant, .faq-aide, .acces-encart { display: flex; gap: 1rem; align-items: flex-start; border-radius: var(--r-l);
  padding: 1.25rem 1.5rem; margin: 0 0 2rem; }
.offre-debutant { background: var(--tuile-100); color: var(--encre-900); border-left: 6px solid var(--tuile-600); }
.offre-debutant > .ic { width: 40px; height: 40px; color: var(--tuile-700); flex: none; }
.offre-debutant p { margin: 0; }
.od-titre { font-family: var(--f-titre); font-size: 1.3rem; font-weight: 600; color: var(--tuile-700); margin: 0 0 .25rem !important; }
.faq-aide { background: var(--gazon-100); margin: 2rem 0 0; }
.faq-aide > .ic, .acces-encart > .ic { width: 40px; height: 40px; color: var(--foret-700); flex: none; }
.faq-aide .od-titre, .acces-encart .od-titre { color: var(--foret-800); }
.faq-aide p, .acces-encart p { margin: 0; }
.acces-encart { background: var(--gazon-100); margin: 2rem 0 0; }
.tarif-groupes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: start; }
.tarif-groupe { background: var(--blanc); border: 1px solid var(--sable-200); border-radius: var(--r-l); overflow: hidden; }
.tarif-groupe > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px;
  padding: .75rem 1.25rem; font-family: var(--f-titre); font-size: var(--t-h3); font-weight: 600; color: var(--foret-800);
  cursor: pointer; list-style: none; }
.tarif-groupe > summary::-webkit-details-marker { display: none; }
.tarif-groupe .chevron { color: var(--foret-700); transition: transform var(--duree-petit); }
.tarif-groupe[open] .chevron { transform: rotate(180deg); }
.tarif-groupe-corps { padding: 0 1.25rem 1.25rem; }
@media (max-width: 959px) { .tarif-groupes { grid-template-columns: 1fr; } }
.tarif-table { margin-bottom: 1rem; border-radius: var(--r-m); border: 1px solid var(--trait-200); background: var(--blanc); overflow: hidden; }
.tarif-table table { width: 100%; border-collapse: collapse; }
.tarif-table th, .tarif-table td { padding: .7rem 1rem; border-bottom: 1px solid var(--trait-200); text-align: left; vertical-align: baseline; }
.tarif-table thead th { background: var(--lin-100); color: var(--foret-800); font-family: var(--f-ui); font-size: var(--t-petit);
  font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.tarif-table tbody th { font-weight: 400; }
.tarif-table td, .tarif-table thead th:not(:first-child) { text-align: right; }
.tarif-table td { font-weight: 600; color: var(--foret-800); white-space: nowrap; font-family: var(--f-chiffres);
  font-variant-numeric: tabular-nums; }
.tarif-table tbody tr:last-child > * { border-bottom: 0; }
.tarif-table tbody tr:hover { background: var(--gazon-100); }
.grille-tarifs { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
.duo-tarifs { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
@media (max-width: 959px) { .cartes-prix { grid-template-columns: 1fr 1fr; } .carte-prix, .carte-prix:nth-child(4) { grid-column: auto; }
  .carte-prix-vedette { grid-column: 1 / -1 !important; order: -1; } }
@media (max-width: 599px) { .cartes-prix { grid-template-columns: 1fr; } }
@media (max-width: 759px) { .grille-tarifs, .duo-tarifs { grid-template-columns: 1fr; }
  .tarif-table th, .tarif-table td { padding: .65rem .75rem; } }

/* ---------- Cours ---------- */
.formules { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.formule { background: var(--blanc); border: 1px solid var(--trait-200); border-radius: var(--r-l); padding: 1.5rem; box-shadow: var(--ombre-1); }
.formule h3 { font-size: 1.4rem; }
.formule-prix { margin: 0 0 1.25rem; }
.formule-prix div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .5rem 0;
  border-bottom: 2px dotted var(--sable-200); }
.formule-prix dt { color: var(--encre-900); }
.formule-prix dd { margin: 0; font-weight: 600; color: var(--foret-800); white-space: nowrap; font-size: 1.1rem; }
.carte-pro-role { font-family: var(--f-ui); color: var(--tuile-700); font-weight: 600; margin-top: -.25rem; }
@media (max-width: 959px) { .formules { grid-template-columns: 1fr; } }

/* ---------- Restaurant ---------- */
.duo-resto { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.resto-photo .cadre-img { max-width: 1000px; }
.ardoise-grande { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.menu-bloc { background: #1B2A22; border: 1px solid rgba(242,236,223,.12); border-radius: var(--r-l); padding: 1.5rem 1.75rem;
  box-shadow: inset 0 0 60px rgba(0,0,0,.25); }
.menu-bloc h3 { font-family: "Segoe Print", "Bradley Hand", var(--f-titre); color: var(--miel-400); font-size: 1.3rem; }
.carte-menu { list-style: none; margin: 0; padding: 0; }
.carte-menu li { display: flex; align-items: baseline; gap: .5rem; padding: .45rem 0; color: var(--lin-100); }
.pointilles { flex: 1; min-width: 1rem; border-bottom: 2px dotted rgba(242,236,223,.3); }
.menu-prix { color: var(--miel-400); font-weight: 600; white-space: nowrap; }
.note-sombre { color: var(--brume); margin: 1.5rem 0 0; }
@media (max-width: 859px) { .duo-resto, .ardoise-grande { grid-template-columns: 1fr; } }

/* ---------- Compétitions, formulaires du site ---------- */
.inscription-appel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem;
  background: var(--gazon-100); border-radius: var(--r-l); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.inscription-appel h2 { margin-bottom: .3em; }
.inscription-appel p:last-child { margin: 0; max-width: 52ch; }
.sans-compte { margin-top: 1.25rem; background: var(--blanc); border: 1px solid var(--trait-200); border-radius: var(--r-l); }
.sans-compte > summary { display: flex; align-items: center; gap: .75rem; min-height: 64px; padding: .75rem 1.25rem;
  font-weight: 600; cursor: pointer; list-style: none; color: var(--foret-800); }
.sans-compte > summary::-webkit-details-marker { display: none; }
.sans-compte > summary > span { flex: 1; }
.sans-compte .chevron { transition: transform var(--duree-petit); }
.sans-compte[open] .chevron { transform: rotate(180deg); }
.sans-compte .formulaire-site { padding: 0 1.25rem 1.5rem; }
.formulaire-site { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; align-items: end; }
.formulaire-site .champ { display: grid; gap: .4rem; }
.formulaire-site label { font-weight: 600; }
.formulaire-site input, .formulaire-site textarea { width: 100%; }
.champ-large { grid-column: 1 / -1; }
.formulaire-site .bouton { justify-self: start; }
.formulaire-site .doux { margin: 0; }
.formulaire-carte { background: var(--blanc); border: 1px solid var(--trait-200); border-radius: var(--r-l); box-shadow: var(--ombre-2);
  padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); grid-template-columns: 1fr; }
.formulaire-carte h2 { margin: 0; }
@media (max-width: 599px) { .formulaire-site { grid-template-columns: 1fr; } .formulaire-site .bouton { justify-self: stretch; } }

/* ---------- Footgolf, pro-shop, équipe, frise ---------- */
.carte-offre { background: var(--blanc); border-radius: var(--r-l); overflow: hidden; box-shadow: var(--ombre-2); border: 1px solid var(--trait-200); }
.carte-offre-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 30%; }
.carte-offre-corps { padding: 1.5rem; }
.carte-offre .bouton { width: 100%; }
.rayons { margin-top: 1.5rem; columns: 2; column-gap: 2rem; }
.rayons li { break-inside: avoid; }
@media (max-width: 599px) { .rayons { columns: 1; } }
.equipe { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.personne { background: var(--blanc); border: 1px solid var(--trait-200); border-radius: var(--r-l); padding: 2rem 1.5rem;
  text-align: center; display: flex; flex-direction: column; align-items: center; }
.personne p { margin: 0; color: var(--encre-600); }
.portrait { width: 128px; height: 128px; border-radius: 50%; object-fit: cover; margin: 0 auto 1rem; border: 6px solid var(--gazon-100); }
.portrait-icone { display: grid; place-items: center; background: var(--gazon-100); color: var(--foret-700); }
.portrait-icone .ic { width: 48px; height: 48px; }
.frise-dates { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; position: relative; }
.frise-dates::before { content: ""; position: absolute; left: 0; right: 0; top: 1.9rem; height: 2px; background: var(--sable-200); }
.frise-dates li { position: relative; padding-top: 3.2rem; }
.frise-dates li::before { content: ""; position: absolute; top: calc(1.9rem - 8px); left: 0; width: 18px; height: 18px; border-radius: 50%;
  background: var(--gazon-500); box-shadow: 0 0 0 5px var(--lin-100); }
.fd-annee { position: absolute; top: 0; left: 0; font-family: var(--f-chiffres); font-size: 1.5rem; font-weight: 600; color: var(--tuile-700); line-height: 1; }
.frise-dates li:last-child .fd-annee { font-family: var(--f-titre); }
.frise-dates p { margin: 0; }
@media (max-width: 859px) { .equipe { grid-template-columns: 1fr; max-width: 28rem; margin-inline: auto; }
  .frise-dates { grid-template-columns: 1fr; gap: 1.25rem; }
  .frise-dates::before { left: 8px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .frise-dates li { padding: 0 0 0 2.5rem; }
  .frise-dates li::before { top: .2rem; }
  .fd-annee { position: static; display: block; margin-bottom: .25rem; } }

/* ---------- FAQ, Comment réserver, 404 ---------- */
.question { background: var(--blanc); border: 1px solid var(--trait-200); border-radius: var(--r-m); margin-bottom: .75rem; }
.question > summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 64px;
  padding: .75rem 1.25rem; font-weight: 600; font-size: 1.05rem; cursor: pointer; list-style: none; color: var(--foret-800); }
.question > summary::-webkit-details-marker { display: none; }
.question .chevron { color: var(--foret-700); transition: transform var(--duree-petit); }
.question[open] .chevron { transform: rotate(180deg); }
.question[open] { box-shadow: var(--ombre-1); border-color: var(--gazon-500); }
.question > p { padding: 0 1.25rem 1.25rem; margin: 0; }
.etapes-reserver { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.er-carte { background: var(--blanc); border: 1px solid var(--trait-200); border-radius: var(--r-l); padding: 1.75rem 1.5rem;
  box-shadow: var(--ombre-1); display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; }
.er-carte h2 { font-size: var(--t-h3); margin: 0; }
.er-carte p { margin: 0; flex: 1; }
@media (max-width: 959px) { .etapes-reserver { grid-template-columns: 1fr; } }
.perdu-liens { list-style: none; margin: 1.5rem 0; padding: 0; display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------- Grilles génériques du site ---------- */
@media (max-width: 859px) {
  .duo, .duo-plan, .duo-cours, .duo-acces, .duo-contact { grid-template-columns: 1fr; }
  .cours-photo { max-width: 26rem; }
}

/* ---------- Mouvement (une fois, jamais en boucle, coupé sous prefers-reduced-motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.anim .heros-crete-trait { animation: crete-trace 1.2s var(--ease-sortie) .1s both; }
  /* Titre, accroche et boutons en fondu PENDANT que la crête se dessine, finis à 0,75 s ; jamais à opacité 0
     (si les animations sont en pause, le titre reste lisible) ; html.anim-fin (posée à 1,5 s) force l'état final. */
  html.anim .anime { animation: monte .55s var(--ease-sortie) both; }
  html.anim .anime-2 { animation-delay: .08s; }
  html.anim .anime-3 { animation-delay: .18s; }
  html.anim-fin .anime, html.anim-fin-crete .heros-crete-trait { animation: none; }
  html.anim .revele { transition: opacity .3s var(--ease-sortie), transform .3s var(--ease-sortie); }
  html.anim .revele:not(.vu) { opacity: 0; transform: translateY(12px); }
}
@keyframes crete-trace { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes monte { from { opacity: .35; transform: translateY(14px); } }

/* ============================================================ 4. Impression (tarifs et pages du site) */
@media print {
  html.site .infos-haut, html.site .tete, html.site .menu-plein, html.site .barre-actions, html.site .pied-site,
  html.site .bandeau-media, html.site .bandeau-voile, html.site .crete, html.site .sous-nav, html.site .calc-section,
  html.site .evitement, html.site .bandeau-courbes, html.site .terrain-reserver, html.site .lien-suite { display: none !important; }
  html.site body { background: #fff; color: #000; padding: 0 !important; font-size: 11pt; }
  html.site .bandeau { min-height: 0; background: none; color: #000; display: block; }
  html.site .bandeau h1, html.site .bandeau-chapo, html.site .fil { color: #000; text-shadow: none; }
  html.site .bandeau-texte { padding: 0 0 8mm; }
  html.site .section { padding-block: 6mm; background: none; }
  html.site .carte-prix, html.site .tarif-groupe, html.site .tarif-table, html.site .offre-debutant { box-shadow: none;
    break-inside: avoid; border-color: #999; background: #fff; }
  html.site .tarif-table thead th { background: #eee; }
  html.site .cartes-prix { grid-template-columns: repeat(3, 1fr); gap: 4mm; }
  html.site .carte-prix, html.site .carte-prix:nth-child(4) { grid-column: auto; }
  html.site .tarif-groupes { grid-template-columns: 1fr 1fr 1fr; }
  html.site .tarif-groupe .chevron, html.site .cadre-photo { display: none; }
  html.site .revele, html.site .anime { opacity: 1 !important; transform: none !important; animation: none !important; }
  html.site a { color: #000; text-decoration: none; }
}

/* ============================================================ 5. Bandeau d'information (Gestion → Contenu du site) */
.bandeau-site { font-family: var(--f-ui); font-size: 1rem;
  font-weight: 600; line-height: 1.4; }
.bandeau-site-info { background: var(--vosges-100); color: var(--vosges-700); border-bottom: 1px solid var(--vosges-300); }
.bandeau-site-alerte { background: var(--cerf-700); color: var(--blanc); }
.bandeau-site-ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .25rem .75rem;
  min-height: 48px; padding-block: .5rem; text-align: center; }
.bandeau-site-ligne p { margin: 0; overflow-wrap: anywhere; }
.bandeau-site-ic { width: 24px; height: 24px; flex: none; }
.bandeau-site-lien { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; color: inherit;
  text-decoration: underline; text-underline-offset: .2em; white-space: nowrap; }
.bandeau-site-lien:hover { color: inherit; text-decoration-thickness: 2px; }
.bandeau-site-info .bandeau-site-lien { color: var(--vosges-700); }
.bandeau-site-alerte .bandeau-site-lien, .bandeau-site-alerte .bandeau-site-lien:hover { color: var(--blanc); }
.bandeau-site-alerte :focus-visible { outline-color: var(--miel-400); box-shadow: 0 0 0 2px var(--cerf-700), 0 0 0 7px var(--miel-400); }
@media print { html.site .bandeau-site { background: none; color: #000; border: 1px solid #000; } }

/* ============================================================ 6. Contenus réglés dans la gestion du site */
/* ---------- Mention NetGolf (sous les boutons de réservation) ---------- */
.mention-netgolf { margin: .5rem 0 0; font-family: var(--f-ui); font-size: 1rem; color: var(--encre-600); }
.sur-sombre .mention-netgolf { color: var(--brume); }
.mm-actions .mention-netgolf { flex-basis: 100%; text-align: center; }

/* ---------- État du terrain (accueil) ---------- */
.terrain { padding: clamp(1.5rem, 1rem + 2vw, 2.5rem) 0; }
.terrain-carte { background: var(--blanc); border: 1px solid var(--trait-200); border-radius: var(--r-l);
  box-shadow: var(--ombre-2); padding: clamp(1.25rem, 1rem + 1vw, 2rem); display: grid; gap: 1rem; }
.terrain-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .25rem 1.5rem; }
.terrain-titre { display: flex; align-items: center; gap: .6rem; font-size: var(--t-h3); margin: 0; }
.terrain-titre .ic { width: 32px; height: 32px; color: var(--gazon-500); }
.terrain-maj { margin: 0; color: var(--encre-600); font-size: 1rem; }
.terrain-etats { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.terrain-etats .badge { min-height: 44px; padding: .35rem 1rem; font-size: 1rem; font-weight: 500; white-space: normal; }
.terrain-etats .badge .ic { width: 24px; height: 24px; }
.terrain-etats strong { font-weight: 700; }
.terrain-message { display: flex; gap: .6rem; align-items: flex-start; margin: 0; padding: .75rem 1rem; border-radius: var(--r-m, 12px);
  background: var(--vosges-100); color: var(--encre-900); }
.terrain-message .ic { flex: none; width: 24px; height: 24px; color: var(--vosges-700); margin-top: .1rem; }
.terrain-message span { overflow-wrap: anywhere; }
.terrain-reserver { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.25rem; }
.terrain-reserver .mention-netgolf { margin: 0; }
@media (max-width: 599px) {
  .terrain-etats { display: grid; grid-template-columns: minmax(0, 1fr); }
  .terrain-reserver .bouton { width: 100%; }
}

/* ---------- Pro-shop : marques et rayons en cartes ---------- */
.marques { margin-top: 1.5rem; }
.marques-titre { margin: 0 0 .5rem; font-family: var(--f-ui); font-weight: 600; color: var(--foret-800); }
.marques-liste { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.marques-liste li { padding: .3rem .9rem; border-radius: var(--r-pilule); background: var(--gazon-100); color: var(--foret-800);
  font-family: var(--f-ui); font-weight: 600; overflow-wrap: anywhere; }
.rayons-cartes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.rayon { background: var(--blanc); border: 1px solid var(--trait-200); border-radius: var(--r-l); overflow: hidden;
  box-shadow: var(--ombre-1); display: flex; flex-direction: column; }
.rayon-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--lin-100); }
.rayon-img-vide { display: grid; place-items: center; color: var(--foret-700); }
.rayon-img-vide .ic { width: 48px; height: 48px; }
.rayon-texte { padding: 1rem 1.25rem 1.25rem; }
.rayon-texte h3 { font-size: 1.15rem; margin: 0 0 .35rem; overflow-wrap: anywhere; }
.rayon-texte p { margin: 0; color: var(--encre-600); overflow-wrap: anywhere; }

/* ---------- Équipe : phrase de présentation ---------- */
.personne h3, .personne p { overflow-wrap: anywhere; }
.personne .personne-phrase { margin-top: .6rem; color: var(--encre-900); font-style: italic; }

/* ---------- Galerie photos ---------- */
.galerie { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.galerie-photo { margin: 0; background: var(--blanc); border: 1px solid var(--trait-200); border-radius: var(--r-l);
  overflow: hidden; box-shadow: var(--ombre-1); }
.galerie-lien { display: block; }
.galerie-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform var(--duree-moyen, 280ms); }
.galerie-lien:hover .galerie-img { transform: scale(1.03); }
.galerie-lien { overflow: hidden; }
.galerie-legende { margin: 0; padding: .75rem 1rem 1rem; color: var(--encre-900); overflow-wrap: anywhere; }

/* ---------- Comment réserver : accès directs à NetGolf ---------- */
.acces-netgolf { list-style: none; margin: .5rem 0 1rem; padding: 0; display: grid; gap: .1rem; }
.acces-netgolf .lien-suite { min-height: 44px; }

/* ============================================================ 7. Téléphone (design/04-TELEPHONE.md § 2, 3 et 8)
   Sous 600 px seulement, sauf le menu (§ 2.2, plus haut) et la barre du bas. Le même HTML sert partout :
   .tel-seul n'existe que sous 600 px, .hors-tel seulement à 600 px et plus ; les replis (details.repli) sont ouverts
   dans le HTML, leur titre n'apparaît que sous 600 px, et site.js les replie au chargement sur téléphone. */
@media (min-width: 600px) {
  html.site .tel-seul { display: none !important; }
  html.site details.repli > summary { display: none; }
  /* Sécurité sans JavaScript : un repli resté fermé (rotation du téléphone) montre quand même son contenu */
  html.site details.repli::details-content { content-visibility: visible; display: contents; }
}
/* Tablette : les pastilles du sommaire des tarifs passent à la ligne au lieu de défiler de côté */
@media (max-width: 1099px) {
  .sous-nav-liste { flex-wrap: wrap; overflow: visible; padding-right: 0; -webkit-mask-image: none; mask-image: none; }
}

@media (max-width: 599px) {
  html.site .hors-tel { display: none !important; }
  html.site body { line-height: 1.5; }
  html.site .masque-tel { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

  /* Pas de capitales ni de surtitres décoratifs ; ceux qui portent une information passent en casse normale, 15 px gras */
  html.site .surtitre { display: none; }
  html.site .formule .surtitre { display: block; font-size: var(--t-petit); font-weight: 700; text-transform: none;
    letter-spacing: 0; color: var(--foret-800); }
  html.site .calc-resultat-titre, html.site .tarif-table thead th, html.site .mini-chiffres dt, html.site .cp-parcours {
    text-transform: none; letter-spacing: 0; }

  /* Rien n'apparaît en différé : le texte est là tout de suite */
  html.anim .anime, html.anim .revele, html.anim .revele:not(.vu) { animation: none !important; opacity: 1 !important;
    transform: none !important; }
  html.anim .heros-crete-trait { animation: none !important; }

  /* Ombres légères seulement ; photos de section en 16:9 sur toute la largeur */
  html.site .cadre-img, html.site .cadre-carre, html.site .cadre-45, html.site .passe-partout .cadre-img,
  html.site .cours-photo .cadre-img, html.site .carte-offre-img { aspect-ratio: 16 / 9; border-radius: var(--r-m);
    box-shadow: var(--ombre-1); }
  html.site .carte-offre-img { border-radius: 0; box-shadow: none; }
  html.site .passe-partout { padding: 0; background: none; border-radius: var(--r-m); }
  html.site .cours-photo { max-width: none; margin-bottom: 16px; }
  html.site .cours-pro { width: 64px; height: 64px; right: 8px; bottom: -16px; border-width: 3px; }
  html.site .plan-cadre, html.site .cadre-plan, html.site .fiche-trou, html.site .coord-carte, html.site .formulaire-carte {
    box-shadow: var(--ombre-1); }

  /* ---------- En-tête et barre du bas ---------- */
  html.js.site .tete-sur-heros:not(.est-opaque) { background: rgba(250,247,240,.96); border-bottom-color: var(--trait-200); }
  .ba-principal { font-size: 1.0625rem; }

  /* ---------- Sections repliables (details.repli) ---------- */
  details.repli > summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    min-height: 56px; padding: .5rem 0; border-bottom: 1px solid var(--trait-200); cursor: pointer; list-style: none;
    font-family: var(--f-ui); font-size: 1.125rem; font-weight: 600; line-height: 1.3; color: var(--foret-800);
    -webkit-tap-highlight-color: transparent; }
  details.repli > summary::-webkit-details-marker { display: none; }
  details.repli > summary:hover { color: var(--foret-700); }
  details.repli[open] > summary { margin-bottom: .5rem; }
  details.repli-section > summary { width: min(var(--largeur), 100% - 2 * var(--gouttiere)); margin-inline: auto; }
  details.repli-section[open] > summary { margin-bottom: 0; }
  details.repli-section > .section { padding-block: 1.25rem 1.5rem; }
  details.repli-section > .terrasse > .terrasse-ligne { padding-block: 1.25rem 1.5rem; }
  .repli-chevron { flex: none; width: 24px; height: 24px; color: var(--foret-700); transition: transform var(--duree-petit) var(--ease-sortie); }
  details[open] > summary .repli-chevron { transform: rotate(180deg); }
  .replis-accueil { padding: 1rem 0 2rem; }
  .section-replis-tel { padding-block: 0 1.5rem; background: none; }
  .section-replis-tel .tete-section { margin: 0; }
  .section-replis-tel .grille-tarifs { gap: 0; }

  /* ---------- Bandeau des pages intérieures : 150 px au plus, « ‹ Accueil », chapô sous le bandeau ---------- */
  html.site .bandeau { --hc: 20px; min-height: 128px; }
  html.site .bandeau-texte { padding-top: .25rem; padding-bottom: calc(var(--hc) + .5rem); }
  html.site .bandeau .fil { margin: 0; font-family: var(--f-ui); font-size: .9375rem; font-weight: 600; }
  html.site .fil > span { display: none; }
  html.site .fil a { text-decoration: none; gap: .35rem; }
  html.site .fil a::before { content: "‹"; font-size: 1.5em; line-height: 1; margin-top: -.12em; }
  html.site .bandeau h1 { font-size: var(--t-h1); line-height: 1.15; margin: 0; max-width: none; }
  html.site .bandeau-chapo { display: none; }
  html.site .bandeau-graphique .bandeau-trait { display: none; }
  .chapo-tel p { margin: 1rem 0 0; font-size: var(--t-chapo); line-height: 1.5; color: var(--encre-600); }
  html.site main > .chapo-tel + .section { padding-top: 1.5rem; }

  /* ---------- Accueil : photo basse, titre, état du terrain, 6 tuiles ---------- */
  html.site .heros { min-height: 0; margin-top: 0; padding-top: 0; display: block; background: var(--lin-50); }
  html.site .heros-ciel { display: none; }
  html.site .heros-photo { position: relative; inset: auto; height: 128px; z-index: 0; }
  html.site .heros-img { height: 128px; object-position: 50% 80%; }
  html.site .heros-crete { display: block; position: relative; z-index: 1; margin-top: -20px; height: 20px; bottom: auto; }
  html.site .heros-crete::after { display: none; }
  html.site .heros-crete .crete { height: 20px; }
  html.site .heros-contenu { display: block; padding-block: .5rem 0; }
  html.site .heros-texte::before { display: none; }
  html.site .heros-titre { font-size: var(--t-affiche); line-height: 1.1; margin: 0; }
  html.site .heros-chapo, html.site .heros-boutons { display: none; }
  .heros-ligne-tel { margin: .25rem 0 0; font-family: var(--f-ui); font-size: var(--t-texte); line-height: 1.4; color: var(--encre-600); }

  .terrain-tel { width: min(var(--largeur), 100% - 2 * var(--gouttiere)); margin: .75rem auto 0; background: var(--blanc);
    border: 1px solid var(--trait-200); border-radius: var(--r-m); box-shadow: var(--ombre-1); }
  .terrain-tel > summary { display: flex; align-items: center; gap: .75rem; min-height: 56px; padding: .5rem .75rem;
    cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
  .terrain-tel > summary::-webkit-details-marker { display: none; }
  .tt-pastille { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
    background: var(--ok-100); color: var(--ok-700); }
  .tt-pastille .ic { width: 26px; height: 26px; }
  .terrain-tel.est-ko .tt-pastille { background: var(--ko-100); color: var(--ko-700); }
  .terrain-tel.est-ko { border-color: var(--ko-700); }
  .tt-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .tt-l1 { font-family: var(--f-ui); font-size: 1.0625rem; font-weight: 600; line-height: 1.3; color: var(--encre-900); }
  .tt-l2 { font-family: var(--f-ui); font-size: var(--t-petit); line-height: 1.4; color: var(--encre-600); }
  .tt-corps { display: grid; gap: .5rem; padding: 0 .75rem .75rem; }
  .tt-corps .terrain-etats { display: grid; grid-template-columns: minmax(0, 1fr); }

  .accueil-tel { padding: .75rem 0 0; }
  .tuiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .tuile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; height: 100%;
    min-height: 96px; padding: 12px 14px; background: var(--blanc); border: 1px solid var(--trait-400); border-radius: var(--r-m);
    box-shadow: var(--ombre-1); color: var(--encre-900); text-decoration: none; -webkit-tap-highlight-color: transparent; }
  .tuile:hover { color: var(--encre-900); }
  .tuile:active { background: var(--gazon-100); }
  .tuile > .ic:first-child { width: 28px; height: 28px; color: var(--foret-700); margin-bottom: 4px; }
  .tuile-mot { font-family: var(--f-ui); font-size: 1.125rem; font-weight: 600; line-height: 1.25; color: var(--foret-800); }
  .tuile-aide { font-family: var(--f-ui); font-size: var(--t-petit); line-height: 1.35; color: var(--encre-600); }
  .tuile-reserver { background: var(--foret-700); border-color: var(--foret-700); }
  .tuile-reserver:hover { color: var(--blanc); }
  .tuile-reserver:active { background: var(--foret-800); }
  .tuile-reserver > .ic:first-child, .tuile-reserver .tuile-mot { color: var(--blanc); }
  .tuile-reserver .tuile-aide { color: var(--lin-100); }
  .tuile-externe { position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; color: var(--lin-100); }
  html.texte-grand .tuiles { grid-template-columns: minmax(0, 1fr); }
  html.texte-grand .tuile { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center;
    min-height: 72px; padding-right: 44px; }
  html.texte-grand .tuile > .ic:first-child { grid-row: 1 / span 2; margin: 0; }
  .accueil-horaires { display: flex; align-items: center; gap: .6rem; margin: 1rem 0 0; font-family: var(--f-ui);
    font-size: var(--t-texte); color: var(--encre-900); }
  .accueil-horaires .ic { width: 24px; height: 24px; color: var(--foret-700); flex: none; }
  .tel-suite { margin: .25rem 0 0; }
  html.site .page-index .mini-chiffres { display: none; }
  html.site .terrasse-media { height: auto; aspect-ratio: 16 / 9; min-height: 0; }
  html.site .terrasse-voile { display: none; }
  html.site .terrasse-ligne { padding-top: 1.25rem; }

  /* ---------- Pied de page court ---------- */
  html.site .pied-site { --hc: 20px; }
  html.site .pied-appel, html.site .pied-grille, html.site .pied-bas { display: none; }
  .pied-tel { display: grid; gap: .375rem; padding: .5rem 0 .75rem; }
  .pied-tel p { margin: 0; }
  .pied-tel-nom { font-family: var(--f-titre); font-size: 1.25rem; font-weight: 600; line-height: 1.2; color: var(--blanc); }
  .pied-tel-asso { font-size: var(--t-petit); line-height: 1.4; color: var(--brume); }
  .pied-tel-lignes { list-style: none; margin: 0; padding: 0; }
  .pied-tel-lignes a, .pied-tel-texte { display: flex; align-items: center; gap: .75rem; min-height: 48px; font-size: 1rem;
    line-height: 1.35; color: var(--lin-100); }
  .pied-tel-lignes .ic { flex: none; width: 22px; height: 22px; color: var(--gazon-300); }
  .pied-tel-reseaux { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
  .pied-tel-espace > summary { display: flex; align-items: center; gap: .75rem; min-height: 48px; cursor: pointer;
    list-style: none; font-family: var(--f-ui); font-weight: 600; color: var(--lin-100); border-top: 1px solid rgba(242,236,223,.16);
    border-bottom: 1px solid rgba(242,236,223,.16); }
  .pied-tel-espace > summary::-webkit-details-marker { display: none; }
  .pied-tel-espace > summary > span { flex: 1; }
  .pied-tel-espace > summary .ic { width: 22px; height: 22px; color: var(--gazon-300); }
  .pied-tel-espace ul { list-style: none; margin: 0; padding: .25rem 0 .25rem 2.125rem; }
  .pied-tel-espace li a { display: flex; align-items: center; min-height: 48px; color: var(--lin-100); }
  .pied-tel-liens { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
  .pied-tel-liens a { display: inline-flex; align-items: center; min-height: 48px; font-size: var(--t-petit); }

  /* ---------- Éléments communs des pages ---------- */
  .tel-action { display: grid; gap: .75rem; margin: 1.25rem 0 0; }
  .tel-action .bouton { width: 100%; }
  .tel-note { display: flex; gap: .6rem; align-items: flex-start; margin: .75rem 0 0; }
  .tel-note .ic { flex: none; width: 24px; height: 24px; color: var(--foret-700); margin-top: .1em; }
  html.site .tete-section { margin-bottom: 1rem; }
  html.site .section .bouton:not(.ft-nav):not(.stepper-bouton) { width: 100%; }
  html.site .boutons-ligne { display: grid; }

  /* ---------- Tarifs ---------- */
  /* Sommaire du téléphone, sous les prix : pastilles qui passent à la ligne, flèche ↓ « aller plus bas »
     (différente du chevron des replis, qui s'ouvrent sur place) */
  html.site:has(.sous-nav) { scroll-padding-top: 80px; }
  html.site.texte-grand:has(.sous-nav) { scroll-padding-top: 88px; }
  .sommaire-tel { margin: 1.25rem 0 0; }
  .sommaire-tel-titre { margin: 0 0 .5rem; font-family: var(--f-ui); font-size: .9375rem; font-weight: 700; color: var(--foret-800); }
  .sommaire-tel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
  .sommaire-tel a { display: inline-flex; align-items: center; gap: .375rem; min-height: 48px; padding: .25rem .9rem .25rem .7rem;
    border: 1px solid var(--trait-400); border-radius: var(--r-pilule); background: var(--blanc); color: var(--foret-800);
    font-family: var(--f-ui); font-size: 1rem; font-weight: 600; text-decoration: none; }
  .sommaire-tel a:active { background: var(--gazon-100); }
  .sommaire-fleche { flex: none; width: 20px; height: 20px; transform: rotate(90deg); color: var(--foret-700); }
  html.site .page-tarifs .tete-section { margin-bottom: .75rem; }
  html.site .page-tarifs main > .chapo-tel + .sous-nav + .section { padding-top: 1rem; }
  html.site .cartes-prix { display: block; background: var(--blanc); border: 1px solid var(--trait-200); border-radius: var(--r-m); }
  html.site .carte-prix, html.site .carte-prix-vedette { display: grid; grid-template-columns: minmax(0, 1fr) auto;
    column-gap: .75rem; align-items: center; padding: .6rem 1rem; border: 0; border-radius: 0; box-shadow: none; background: none; }
  html.site .carte-prix + .carte-prix { border-top: 1px solid var(--trait-200); }
  html.site .cp-parcours, html.site .carte-prix-vedette .cp-parcours { grid-column: 1; display: block; margin: 0; padding: 0;
    background: none; border-radius: 0; font-size: var(--t-petit); font-weight: 400; color: var(--encre-600); }
  html.site .cp-titre { grid-column: 1; margin: 0; font-family: var(--f-ui); font-size: 1.0625rem; line-height: 1.3; color: var(--encre-900); }
  html.site .cp-prix { grid-column: 2; grid-row: 1 / span 3; margin: 0; font-size: 1.375rem; font-weight: 700; }
  html.site .cp-unite { grid-column: 1; margin: 0; font-size: var(--t-petit); line-height: 1.4; }
  html.site .cp-euro { font-size: .72em; }
  html.site .forfaits { margin-top: 1.5rem; }
  .calc-collant { position: sticky; bottom: calc(var(--barre-bas) + env(safe-area-inset-bottom)); z-index: 5; display: flex;
    align-items: center; justify-content: space-between; gap: 1rem; min-height: 56px; margin: 1rem calc(-1 * var(--gouttiere)) 0;
    padding: .5rem var(--gouttiere); background: var(--foret-800); color: var(--lin-100); border-top: 1px solid rgba(242,236,223,.2);
    font-family: var(--f-ui); font-weight: 600; }
  .calc-collant .num { color: var(--miel-400); font-size: 1.375rem; }
  html.site .offre-debutant { padding: 1rem; }
  html.site .tarif-table th, html.site .tarif-table td { padding: .6rem .75rem; }

  /* ---------- Cours ---------- */
  .liste-prix-tel { list-style: none; margin: 0; padding: 0; background: var(--blanc); border: 1px solid var(--trait-200); border-radius: var(--r-m); }
  .liste-prix-tel li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 72px; padding: .6rem 1rem; }
  .liste-prix-tel li + li { border-top: 1px solid var(--trait-200); }
  .lp-texte { display: flex; flex-direction: column; min-width: 0; }
  .lp-libelle { font-family: var(--f-ui); font-size: 1.0625rem; font-weight: 600; line-height: 1.3; }
  .lp-precision { font-family: var(--f-ui); font-size: var(--t-petit); line-height: 1.4; color: var(--encre-600); }
  .lp-prix { flex: none; font-size: 1.125rem; font-weight: 700; color: var(--foret-800); text-align: right; max-width: 45%; }
  html.site .formule { padding: 1rem; }

  /* ---------- Restaurant, contact, réserver, compétitions ---------- */
  .resto-tel { padding-top: .25rem; }
  html.site .menu-bloc { padding: 1rem 1.1rem; }
  html.site .coord-carte { padding: .5rem 1rem 1rem; }
  html.site .coord-grande h2 { margin: .5rem 0 0; }
  html.site .duo-contact { gap: 1.5rem; }
  html.site .er-carte { padding: 1.25rem 1rem; }
  html.site .acces-encart, html.site .faq-aide { padding: 1rem; }
  html.site .inscription-appel { padding: 1.25rem 1rem; }

  /* ---------- Parcours ---------- */
  html.site .chiffres-parcours { padding-block: 1.25rem; }
  html.site .chiffres-parcours .cc-valeur { font-size: 1.75rem; }
  html.site .cc-unite { font-size: .55em; }

  /* ---------- Le golf : équipe en lignes, portrait rond de 64 px ---------- */
  html.site .equipe { max-width: none; gap: .75rem; }
  html.site .personne { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 1rem; align-items: start;
    text-align: left; padding: 1rem; }
  html.site .personne > .portrait { grid-row: 1 / span 6; width: 64px; height: 64px; margin: 0; border-width: 3px; }
  html.site .personne > :not(.portrait) { grid-column: 2; }
  html.site .personne h3 { margin: .25rem 0; }
  html.site .portrait-icone .ic { width: 32px; height: 32px; }

  /* ---------- Pro-shop : rayons en lignes avec vignette de 56 px ---------- */
  html.site .rayons-cartes { gap: 0; background: var(--blanc); border: 1px solid var(--trait-200); border-radius: var(--r-m); overflow: hidden; }
  html.site .rayon { flex-direction: row; align-items: center; gap: .75rem; padding: .5rem 1rem; min-height: 72px; border: 0;
    border-radius: 0; box-shadow: none; }
  html.site .rayon + .rayon { border-top: 1px solid var(--trait-200); }
  html.site .rayon-img { flex: none; width: 56px; height: 56px; aspect-ratio: 1; border-radius: var(--r-s); }
  html.site .rayon-img-vide .ic { width: 28px; height: 28px; }
  html.site .rayon-texte { padding: 0; }
  html.site .rayon-texte h3 { font-family: var(--f-ui); font-size: 1.0625rem; }

  /* ---------- Galerie : 2 colonnes carrées, légende de 15 px ---------- */
  html.site .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  html.site .galerie-photo { border-radius: var(--r-m); }
  html.site .galerie-img { aspect-ratio: 1; }
  html.site .galerie-legende { padding: .5rem .6rem .7rem; font-size: var(--t-petit); line-height: 1.4; }

  /* ---------- Compétitions : une ligne par nouvelle, le résumé dans un repli ---------- */
  .actus-tel { background: var(--blanc); border: 1px solid var(--trait-200); border-radius: var(--r-m); overflow: hidden; }
  .actu-tel + .actu-tel { border-top: 1px solid var(--trait-200); }
  .actu-tel > summary { display: flex; align-items: center; gap: .75rem; min-height: 72px; padding: .5rem 1rem; cursor: pointer;
    list-style: none; -webkit-tap-highlight-color: transparent; }
  .actu-tel > summary::-webkit-details-marker { display: none; }
  .actu-tel > summary:active { background: var(--gazon-100); }
  .actu-tel-lire { flex: none; display: inline-flex; align-items: center; gap: .25rem; font-family: var(--f-ui); font-size: var(--t-petit);
    font-weight: 600; color: var(--foret-700); }
  .actu-tel-corps { padding: 0 1rem .75rem; }
  .actu-tel-corps p { margin: 0 0 .25rem; }
  html.site .page-competitions .inscription-appel p { margin-bottom: 0; }
  .plus-tel { margin-top: .75rem; }
  .plus-tel > summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 56px;
    padding: .5rem 1rem; border: 1px solid var(--trait-400); border-radius: var(--r-m); background: var(--blanc); cursor: pointer;
    list-style: none; font-family: var(--f-ui); font-size: 1.0625rem; font-weight: 600; color: var(--foret-800); }
  .plus-tel > summary::-webkit-details-marker { display: none; }
  .plus-tel[open] > summary { margin-bottom: .75rem; }
  html.site .page-competitions main > .chapo-tel + .section { padding-top: 1rem; }
  html.site .er-carte { row-gap: .5rem; }
  /* Le bouton juste sous le titre, l'explication ensuite */
  html.site .er-carte > p { order: 2; }
  html.site .er-carte > .lien-suite { order: 3; }
  .bouton-2-lignes { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
  .bouton-2-lignes .num { font-weight: 700; }

  /* ---------- Footgolf : le prix et « Appeler pour réserver » d'abord, la photo ensuite ---------- */
  html.site .duo-footgolf { display: flex; flex-direction: column; gap: 1.5rem; }
  html.site .duo-footgolf > .carte-offre { order: -1; display: flex; flex-direction: column; }
  html.site .duo-footgolf .carte-offre-img { order: 1; }
  html.site .duo-footgolf .carte-offre-corps { padding: 1rem; }
  html.site .duo-footgolf .carte-offre-corps > p { margin: 0 0 .5rem; }
  html.site .duo-footgolf .cp-prix { font-size: 2rem; line-height: 1.1; }
  html.site .page-footgolf main > .chapo-tel + .section { padding-top: 1rem; }

  /* ---------- Comment réserver : encadré en une ligne, pastille dans la ligne du titre ---------- */
  .info-tel { background: var(--vosges-100); color: var(--vosges-700); border-radius: var(--r-m); }
  .info-tel > summary { display: flex; align-items: center; gap: .6rem; min-height: 56px; padding: .5rem .75rem; cursor: pointer;
    list-style: none; font-family: var(--f-ui); font-size: var(--t-petit); line-height: 1.35; }
  .info-tel > summary::-webkit-details-marker { display: none; }
  .info-tel > summary > span { flex: 1; }
  .info-tel > summary .ic { flex: none; width: 24px; height: 24px; }
  .info-tel-plus { text-decoration: underline; text-underline-offset: .2em; white-space: nowrap; }
  .info-tel > p { margin: 0; padding: 0 .75rem .75rem 2.6rem; font-size: var(--t-petit); }
  html.site .page-reserver main > .chapo-tel + .section { padding-top: 1rem; }
  html.site .etapes-reserver { margin-top: 1rem; gap: .75rem; }
  html.site .er-carte { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .75rem;
    row-gap: .6rem; padding: 1rem; }
  html.site .er-carte > :not(.etape-num):not(h2) { grid-column: 1 / -1; }
  html.site .er-carte .etape-num { width: 40px; height: 40px; font-size: 1.125rem; }

  /* ---------- Contact : de vraies lignes d'action (verbe en gras, valeur dessous, toute la ligne se touche) ---------- */
  .actions-tel { margin: .75rem 0 0; }
  .ligne-action { min-height: 64px; }
  .ligne-valeur { font-family: var(--f-ui); font-size: 1rem; line-height: 1.35; color: var(--encre-900); overflow-wrap: anywhere; }
  .ligne-action .ligne-libelle { font-weight: 700; color: var(--foret-800); }
  .ligne-info:hover, .ligne-info:active { background: none; }
  html.site .coord-carte .liste-app .ic { width: 24px; height: 24px; }
  html.site .coord-carte .ligne-fin { width: 20px; height: 20px; color: var(--encre-600); }
  html.site .coord-grande .trajets { margin-bottom: 0; }

  /* ---------- Liens d'appel dans le texte : zone à toucher agrandie sans changer la ligne ---------- */
  html.site main p a[href^="tel:"] { padding-block: .7em; }
  .lien-appel .ic { width: 22px; height: 22px; }

  /* ---------- Le golf : l'équipe juste après l'accroche, puis les replis ---------- */
  html.site .le-golf-corps { display: flex; flex-direction: column; }
  html.site .le-golf-equipe { order: -1; padding-top: 1.25rem; }
  html.site .le-golf-corps > details.repli-section:first-of-type > summary { border-top: 1px solid var(--trait-200); }
}

/* ============================================================ Accueil : entrée vidéo (vidéo du club en plein écran)
   Image fixe d'abord (picture), vidéo en fondu quand elle joue (site.js) ; voile forêt pour la lisibilité ; crête des
   Vosges qui ouvre sur les accès (#acces). Sans animation (prefers-reduced-motion) : l'image fixe seule. */
.hv { position: relative; display: flex; align-items: flex-end; overflow: hidden; color: #fff;
  min-height: calc(100vh - var(--entete-site)); min-height: calc(100svh - var(--entete-site)); background: var(--foret-950); }
.hv-media, .hv-media picture, .hv-affiche, .hv-video { position: absolute; inset: 0; width: 100%; height: 100%; }
.hv-affiche, .hv-video { object-fit: cover; object-position: 50% 50%; }
.hv-video { opacity: 0; transition: opacity .9s var(--ease-sortie); }
.hv-video.hv-lu { opacity: 1; }
.hv-voile { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,38,26,.30) 0%, rgba(14,38,26,.12) 35%, rgba(14,38,26,.55) 70%, rgba(14,38,26,.85) 100%); }
.hv-contenu { position: relative; z-index: 1; padding-block: 3rem calc(clamp(40px, 6vw, 90px) + 2.5rem); }
.hv-surtitre { margin: 0 0 .5rem; font-family: var(--f-ui); font-size: var(--t-petit); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--gazon-300); }
.hv-titre { margin: 0 0 .75rem; font-family: var(--f-affiche); font-size: var(--t-affiche); font-weight: 600; line-height: 1.02;
  color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.35); max-width: 14ch; }
.hv-chapo { margin: 0 0 1.75rem; max-width: 36ch; font-size: var(--t-chapo); color: var(--lin-100); text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.hv-boutons { display: flex; flex-wrap: wrap; gap: .75rem; }
.hv .bouton-plein { box-shadow: 0 8px 24px -8px rgba(0,0,0,.45); }
.hv-decouvrir { background: rgba(250,247,240,.12); color: #fff; border: 2px solid rgba(255,255,255,.8);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hv-decouvrir:hover { background: #fff; color: var(--foret-800); }
.hv-decouvrir .hv-chevron { width: 22px; height: 22px; }
.hv-pause { position: absolute; z-index: 2; right: var(--gouttiere); top: 1rem; min-height: 44px; padding: .4rem 1rem;
  border-radius: var(--r-pilule); border: 1px solid rgba(255,255,255,.6); background: rgba(14,38,26,.45); color: #fff;
  font: 600 .9rem/1 var(--f-ui); cursor: pointer; }
.hv-pause:hover { background: rgba(14,38,26,.75); }
.hv-pause[hidden] { display: none; }
.hv-crete { position: absolute; z-index: 1; left: 0; right: 0; bottom: -1px; height: clamp(40px, 6vw, 90px); line-height: 0; pointer-events: none; }
.hv-crete .crete { width: 100%; height: 100%; }
.hv-crete-pleine { --crete-fond: var(--lin-50); }
.ancre-acces { scroll-margin-top: var(--entete-site); }
@media (max-width: 599px) {
  .hv { min-height: calc(100vh - var(--entete-site) - var(--barre-bas));
    min-height: calc(100svh - var(--entete-site) - var(--barre-bas)); }
  .hv-titre { font-size: 2.4rem; }
  .hv-chapo { margin-bottom: 1.25rem; }
  .hv-boutons .bouton { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hv-video { display: none; }
}