/*
Theme Name: Grand Frisson
Theme URI: https://albertcountytourism.com
Author: Seobooster LTD
Description: Thème DA v3 pour Grand Frisson (albertcountytourism.com) — sensations outdoor encadrées en France. Structure inspirée de 4000m.com (ordre de Mathias, 18/09/2026), habillage propre : palette brume/stratos/balise, typographie Unbounded + Gantari, carte de France à géométrie réelle, altimètre, billet de vol.
Version: 3.0.0
Text Domain: grand-frisson
*/

/* =============================================================================
   0. POLICES — Unbounded (titraille) + Gantari (lecture), self-hosted (P-086).
   Dépendance de livraison : déposer les fichiers .woff2 dans assets/fonts/
   (voir note de fin de chantier) ; en leur absence le navigateur replie sur
   la pile système, la mise en page n'en dépend pas.
   ========================================================================== */
@font-face { font-family:'Unbounded'; font-weight:600; font-style:normal; font-display:swap; src:url('assets/fonts/Unbounded-SemiBold.woff2') format('woff2'); }
@font-face { font-family:'Unbounded'; font-weight:700; font-style:normal; font-display:swap; src:url('assets/fonts/Unbounded-Bold.woff2') format('woff2'); }
@font-face { font-family:'Unbounded'; font-weight:800; font-style:normal; font-display:swap; src:url('assets/fonts/Unbounded-ExtraBold.woff2') format('woff2'); }
@font-face { font-family:'Gantari'; font-weight:400; font-style:normal; font-display:swap; src:url('assets/fonts/Gantari-Regular.woff2') format('woff2'); }
@font-face { font-family:'Gantari'; font-weight:500; font-style:normal; font-display:swap; src:url('assets/fonts/Gantari-Medium.woff2') format('woff2'); }
@font-face { font-family:'Gantari'; font-weight:700; font-style:normal; font-display:swap; src:url('assets/fonts/Gantari-Bold.woff2') format('woff2'); }
@font-face { font-family:'Gantari'; font-weight:400; font-style:italic; font-display:swap; src:url('assets/fonts/Gantari-Italic.woff2') format('woff2'); }

/* =============================================================================
   1. JETONS — mode CLAIR uniquement (CM-0417, 14/09 : mode sombre retiré ; jamais de
   bascule manuelle, DA v3 §2). --stratos est FIXE dans les deux thèmes.
   ========================================================================== */
:root{
	color-scheme:light;
	--brume:#EDF2F8; --nuee:#FFFFFF; --stratos:#0B2442;
	--encre:#0B1A2E; --encre-2:#4A5B72; --balise:#FF6A1A; --givre:#F2F7FC;
	--air:#3D8BFF; --eau:#10B3AE; --roche:#A88A6E;
	--bord: rgba(11,36,66,.12);
	--rayon-xl: 40px 40px 0 40px; --rayon-md: 20px; --rayon-pill: 999px;
	--conteneur: 1240px; --gouttiere: 24px;
	--ombre: 0 18px 40px -20px rgba(11,26,46,.35);
	--ff-titre:'Unbounded',system-ui,sans-serif;
	--ff-corps:'Gantari',system-ui,sans-serif;
}

@media (max-width:389px){ :root{ --gouttiere:16px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
	margin:0; background:var(--brume); color:var(--encre);
	font-family:var(--ff-corps); font-size:16px; line-height:1.6;
	overflow-x:clip; font-variant-numeric:tabular-nums;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; }
/* color:inherit : un titre prend la couleur de son bloc (blanc sur le héros et les
   cartes sombres) — une couleur imposée ici les rendait illisibles (18/09). */
h1,h2,h3,h4{ font-family:var(--ff-titre); line-height:1.15; margin:0 0 .5em; color:inherit; }
p{ margin:0 0 1em; }
.conteneur{ max-width:var(--conteneur); margin:0 auto; padding:0 var(--gouttiere); }
.conteneur--lecture{ max-width:760px; }
/* P12.1 (23/09) : « Pourquoi passer par nous » en 50/50 photo + texte quand une
   photo est déposée, sinon le texte reste seul en lecture confortable. */
.pourquoi-nous{ max-width:1040px; }
.pourquoi-nous:has(.pourquoi-nous__photo){ display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center; }
.pourquoi-nous:not(:has(.pourquoi-nous__photo)) > div{ max-width:760px; margin:0 auto; }
.pourquoi-nous__photo{ border-radius:var(--rayon-xl); overflow:hidden; aspect-ratio:4/3; }
.pourquoi-nous__photo img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:767px){ .pourquoi-nous:has(.pourquoi-nous__photo){ grid-template-columns:1fr; } }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.btn{
	display:inline-flex; align-items:center; gap:.5em; padding:.9em 1.6em;
	border-radius:var(--rayon-pill); font-family:var(--ff-corps); font-weight:700;
	font-size:15px; border:2px solid transparent; cursor:pointer;
}
.btn--balise{ background:var(--balise); color:var(--stratos); }
.btn--balise:hover{ filter:brightness(1.06); }
.btn--filet{ border-color:var(--stratos); color:var(--stratos); background:transparent; }

.btn--stratos{ background:var(--stratos); color:var(--givre); }

/* Filet d'horizon entre deux bandes (DA v3 §4) */
.filet-horizon{ display:block; width:100%; height:24px; }

/* Courbes de niveau : trame de fond discrète (procédé 7) */
.courbes-niveau{ position:relative; }
.courbes-niveau::before{
	content:''; position:absolute; inset:0; pointer-events:none; opacity:.06;
	background-image:repeating-radial-gradient(circle at 20% 30%, transparent 0 18px, currentColor 19px 20px);
	color:var(--stratos);
}

/* =============================================================================
   2. EN-TÊTE
   ========================================================================== */
/* Le flou vit sur un pseudo-élément : posé sur .entete, backdrop-filter ferait
   de l'en-tête le repère du menu mobile position:fixed (menu ouvert réduit à la
   hauteur de l'en-tête, menu fermé qui élargit la page à 725 px — mesuré 18/09). */
.entete{
	position:sticky; top:0; z-index:50; border-bottom:1px solid var(--bord);
}
.entete::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
	background:color-mix(in srgb, var(--nuee) 92%, transparent); backdrop-filter:blur(10px); }
.entete__barre{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:14px var(--gouttiere); max-width:var(--conteneur); margin:0 auto; }
.marque{ display:flex; align-items:center; gap:10px; }
.marque__symbole{ width:34px; height:34px; color:var(--stratos); }

.marque__texte{ display:flex; flex-direction:column; line-height:1.05; }
.marque__mots{ font-family:var(--ff-titre); text-transform:uppercase; letter-spacing:.02em; font-size:19px; }
.marque__mot-1{ font-weight:700; } .marque__mot-2{ font-weight:400; }
.marque__baseline{ font-family:var(--ff-corps); font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--encre-2); }

.nav-principale{ display:flex; }
.nav-principale__liste{ display:flex; align-items:center; gap:6px; margin:0; padding:0; list-style:none; }
.nav-principale__liste > li > a, .nav-principale__deroulant{
	display:inline-flex; align-items:center; gap:4px; padding:10px 12px; border-radius:var(--rayon-pill);
	font-weight:600; font-size:14.5px; background:none; border:none; color:var(--encre); cursor:pointer;
}
.nav-principale__liste > li > a:hover, .nav-principale__deroulant:hover{ background:var(--bord); }
.nav-principale__item--deroulant{ position:relative; }
.nav-principale__sous{
	position:absolute; top:calc(100% + 8px); left:0; min-width:220px; background:var(--nuee);
	border:1px solid var(--bord); border-radius:var(--rayon-md); box-shadow:var(--ombre);
	padding:8px; margin:0; list-style:none; opacity:0; visibility:hidden; transform:translateY(-6px);
	transition:opacity .15s, transform .15s;
}
.nav-principale__item--deroulant.est-ouvert .nav-principale__sous{ opacity:1; visibility:visible; transform:translateY(0); }
.nav-principale__sous a{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 12px; border-radius:12px; font-size:14px; }
.nav-principale__sous a:hover{ background:var(--brume); }
.nav-principale__code{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:999px; font-size:10px; font-weight:700; background:var(--stratos); color:var(--givre); }
.entete__actions{ display:flex; align-items:center; gap:10px; }
.entete__bascule{ display:none; background:none; border:none; padding:8px; cursor:pointer; }
.entete__bascule span{ display:block; width:22px; height:2px; background:var(--encre); margin:5px 0; }

@media (max-width:1023px){
	/* Menu fermé : visibility:hidden EN PLUS du translateX (retour du 18/09/2026)
	   — un élément position:fixed déplacé hors écran par transform seul a été
	   mesuré comme élargissant quand même la zone de défilement horizontal sur
	   mobile (iOS) ; visibility:hidden l'exclut réellement. */
	.nav-principale{ position:fixed; inset:0 0 0 auto; width:min(86vw,360px); background:var(--stratos); color:var(--givre);
		transform:translateX(100%); visibility:hidden; display:none; padding:88px 24px 24px; overflow-y:auto; }
	.nav-principale--ouverte{ display:block; transform:translateX(0); visibility:visible; animation:gf-tiroir .25s ease-out; }
	@keyframes gf-tiroir{ from{ transform:translateX(100%); } to{ transform:translateX(0); } }
	.nav-principale__liste{ flex-direction:column; align-items:stretch; gap:2px; }
	.nav-principale__liste > li > a, .nav-principale__deroulant{ color:var(--givre); width:100%; justify-content:space-between; }
	.nav-principale__sous{ position:static; opacity:1; visibility:visible; transform:none; display:none; background:rgba(255,255,255,.06); border:none; box-shadow:none; }
	.nav-principale__item--deroulant.est-ouvert .nav-principale__sous{ display:block; }
	.entete__bascule{ display:block; }
	.entete__cta-texte{ display:none; }
}

/* =============================================================================
   3. HERO
   ========================================================================== */
.hero{ position:relative; min-height:88vh; display:flex; align-items:flex-end; color:var(--givre); overflow:hidden; }
.hero__fond{ position:absolute; inset:0; z-index:0; }
/* object-position (recette 23/09) : le sujet (tandem en l'air) se cadre dans
   le tiers HAUT de la photo, pour ne jamais se retrouver caché derrière les
   modules "Je choisis" / "J'offre" posés en bas du hero. */
.hero__fond img{ width:100%; height:100%; object-fit:cover; object-position:center 22%; }
.hero__fond::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,36,66,.15) 0%, rgba(11,36,66,.55) 65%, rgba(11,36,66,.88) 100%); }
.hero__corps{ position:relative; z-index:1; width:100%; padding:120px var(--gouttiere) 56px; max-width:var(--conteneur); margin:0 auto; }
/* Fil d'Ariane par défaut (hub, actu…) : lisible sur photo, PAS orange —
   l'orange en capitales sur un ciel clair ne se lit pas (recette 23/09). */
.hero__fil{ font-size:13px; opacity:.85; margin-bottom:18px; color:var(--givre); }
/* P2.2 (23/09) : SEUL l'accueil porte le surtitre slogan en capitales balise
   (modificateur dédié, pour ne pas casser la lisibilité du fil d'Ariane du hub). */
.hero__fil--surtitre{ font-family:var(--ff-titre); font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--balise); opacity:1; }
.hero__preuves{ font-size:13px; opacity:.85; margin:-16px 0 20px; }
.hero__pastille-prix{
	display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
	width:96px; height:96px; border-radius:999px; background:var(--balise); color:var(--stratos);
	margin-bottom:22px; font-family:var(--ff-titre);
}
.hero__pastille-prix small{ font-size:10px; font-weight:600; text-transform:uppercase; }
.hero__pastille-prix strong{ font-size:20px; font-weight:800; }
.hero__titre{
	font-family:var(--ff-titre); text-transform:uppercase; font-weight:800;
	font-size:clamp(30px,3.6vw,54px); line-height:1.12; max-width:27ch;
	padding:0 .1em; margin:0 0 20px -.05em;
} /* 3 lignes max à 1440 (retour du 18/09/2026) : le fautif était le max-width
     en ch trop court (16ch), pas la taille de police. */
.hero__chapo{ font-size:19px; max-width:56ch; margin-bottom:28px; opacity:.92; }
.hero__modules{ display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:820px; align-items:start; }
@media (max-width:767px){
	.hero__modules{ grid-template-columns:1fr; }
	/* aspect-ratio fixe + overflow:hidden rognaient le H1/chapo par le haut dès
	   que le contenu dépassait la boîte (retour 18/09/2026) : hauteur au
	   contenu, fond photo étiré derrière sans contrainte de ratio. */
	.hero{ min-height:auto; aspect-ratio:auto; overflow:visible; }
	.hero__corps{ padding-top:96px; }
	/* P2.5 (23/09) : H1 28/32 px, 4 lignes maximum — le premier écran mobile
	   doit montrer la promesse + les preuves + l'action sans défiler. */
	.hero__titre{ font-size:28px; line-height:1.2; }
	.hero__chapo{ font-size:16px; margin-bottom:16px; }
	.hero__preuves{ margin-top:-8px; }
}
.hero__module{
	background:color-mix(in srgb, var(--nuee) 92%, transparent); color:var(--encre);
	border-radius:var(--rayon-md); padding:18px; box-shadow:var(--ombre);
}
.hero__module h3{ font-size:15px; margin-bottom:10px; }
.hero__module select, .hero__module input{
	width:100%; padding:10px 12px; margin-bottom:10px; border-radius:12px; border:1px solid var(--bord);
	background:var(--nuee); color:var(--encre); font-family:var(--ff-corps);
}

/* Altimètre / profondimètre / échelle de classes — règle verticale (procédé 2) */
/* Rail décalé du bord (retour du 18/09/2026) : les pastilles s'alignent à
   GAUCHE et poussent vers la droite — jamais centrées sur une colonne
   étroite, ce qui les coupait au bord de l'écran. */
.altimetre{ position:absolute; left:30px; top:120px; bottom:120px; width:auto; z-index:1; display:none; }
@media (min-width:900px){ .altimetre{ display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; } }
.altimetre__ligne{ position:absolute; left:-16px; top:0; bottom:0; width:2px; background:rgba(242,247,252,.35); }
.altimetre__graduation{ position:relative; z-index:1; font-family:var(--ff-titre); font-size:10px; color:var(--givre); background:var(--stratos); padding:2px 6px; border-radius:999px; }
.altimetre__graduation--actif{ background:var(--balise); color:var(--stratos); }
/* Correction #22 (JUGEMENT-P1, 23/09) : à 1920 px l'altimètre (left:30px fixe)
   se détachait du conteneur (mesuré x=20 contre x=273 pour le hero__corps) —
   rapproché au bord du conteneur - 60px. Portée .category uniquement : le
   hero de l'ACCUEIL est une zone intouchable (RE-0262), le jugement lui-même
   classe ce même écart "zone intouchable, à Mathias de décider" — .home
   n'est pas touché. */
@media (min-width:1600px){ .category .altimetre{ left:calc(50vw - (var(--conteneur) / 2) - 60px); } }

/* =============================================================================
   4. TUILES CHIFFRES (grands nombres, procédé typo §3)
   ========================================================================== */
.tuiles-chiffres{ padding:56px 0; }
.tuiles-chiffres__grille{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.tuiles-chiffres__grille--3{ grid-template-columns:repeat(3,1fr); } /* 3 tuiles réelles = 3 colonnes, jamais orphelines dans une grille à 4 */
@media (max-width:767px){ .tuiles-chiffres__grille{ grid-template-columns:repeat(2,1fr); } }
.tuile-chiffre{ position:relative; background:var(--stratos); color:var(--givre); border-radius:var(--rayon-md); padding:24px 18px; text-align:center; background-size:cover; background-position:center; }
/* P8.3 (23/09) : une tuile sur quatre porte une photo de fond (le ciel) —
   voile stratos par-dessus pour garder le texte lisible. */
.tuile-chiffre--photo::before{ content:''; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(180deg, color-mix(in srgb, var(--stratos) 55%, transparent), var(--stratos) 88%); }
.tuile-chiffre--photo > *{ position:relative; z-index:1; }
.tuile-chiffre__picto{ width:26px; height:26px; color:var(--balise); margin-bottom:8px; }
.tuile-chiffre__valeur{ font-family:var(--ff-titre); font-weight:800; font-size:clamp(30px,4vw,52px); line-height:1; }
.tuile-chiffre__valeur small{ font-family:var(--ff-corps); font-weight:500; font-size:38%; color:var(--balise); margin-left:.15em; }
.tuile-chiffre__libelle{ font-size:13px; color:var(--givre); opacity:.8; margin-top:8px; }

/* =============================================================================
   5. BANDES / RYTHME
   ========================================================================== */
.bande{ padding:64px 0; }
.bande--brume{ background:var(--brume); }
.bande--nuee{ background:var(--nuee); }
.bande--stratos{ background:var(--stratos); color:var(--givre); }
.bande--stratos h2, .bande--stratos h3{ color:var(--givre); }
.bande__entete{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:28px; flex-wrap:wrap; }
.bande__titre{ font-size:clamp(24px,3vw,36px); max-width:24ch; }

/* =============================================================================
   6. CARTE DE FRANCE (procédé 1) — géométrie réelle, pins par milieu
   ========================================================================== */
/* P2-20 (23/09, JUGEMENT-P2, LOT4) : align-items:center centrait la colonne
   filtre+pastilles (~287px) contre la colonne carte, plus haute (~560px) --
   ~130px de vide entre le H2 (hors grille) et le filtre, mesuré sur le hub
   saut-en-parachute. align-items:start aligne les 2 colonnes en haut : le
   filtre suit directement le H2 (ses seules marges : 28px de .bande__entete
   + 14px de .filtre-milieu, proche des 32px demandés). */
.carte-section{ display:grid; grid-template-columns:5fr 7fr; gap:32px; align-items:start; }
.carte-section > div{ min-width:0; }
@media (max-width:900px){ .carte-section{ grid-template-columns:1fr; } }
.pastilles-region{ max-width:100%; min-width:0; display:flex; flex-wrap:wrap; gap:8px; margin:18px 0; }
@media (max-width:900px){ .pastilles-region{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px; -webkit-overflow-scrolling:touch; } }
.pastille-region{
	display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:999px;
	border:1.5px solid var(--stratos); font-size:13px; font-weight:600; white-space:nowrap; background:transparent;
}

.pastille-region strong{ color:var(--balise); font-weight:800; }
.pastille-region.est-active,.pastille-region:hover{ background:var(--stratos); color:var(--givre); }
.pastille-region.est-active strong,.pastille-region:hover strong{ color:var(--balise); }

.filtre-milieu{ display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.filtre-milieu button{
	border:1.5px solid var(--bord); background:var(--nuee); color:var(--encre); border-radius:999px;
	padding:8px 16px; font-weight:700; font-size:13px; cursor:pointer;
}
.filtre-milieu button[data-milieu="air"].est-actif{ background:var(--air); border-color:var(--air); color:#04101f; }
.filtre-milieu button[data-milieu="eau"].est-actif{ background:var(--eau); border-color:var(--eau); color:#04211f; }
.filtre-milieu button[data-milieu="roche"].est-actif{ background:var(--roche); border-color:var(--roche); color:#241a10; }
.filtre-milieu button[data-milieu=""].est-actif{ background:var(--stratos); border-color:var(--stratos); color:var(--givre); }

/* min-width:0 + overflow:hidden : sans ça, le viewBox de 624×602 du SVG compte
   comme taille intrinsèque dans le calcul min-content de la grille et force
   toute la page à s'élargir à ~624 px sur mobile (retour 18/09/2026). */
.carte-france{ position:relative; width:100%; min-width:0; max-width:100%; aspect-ratio:6/5.8; overflow:hidden; }
/* Hub d'activité (recette 23/09, BLOQUANT #1) : max-height seul NE CONTIENT PAS
   une boîte à aspect-ratio (la hauteur calculée dépasse quand même son
   conteneur si rien ne la coupe) — la carte débordait sur la courbe du saut.
   Ici la hauteur est FIXE et overflow:hidden coupe tout excédent. */
.carte-hub-contenant{ max-height:560px; overflow:hidden; border-radius:var(--rayon-md); }
.carte-france--hub-taille{ aspect-ratio:auto; height:560px; }
.carte-france--vide{ display:flex; align-items:center; justify-content:center; background:var(--nuee); border-radius:var(--rayon-md); color:var(--encre-2); text-align:center; padding:24px; }
.carte-france-svg{ width:100%; height:100%; display:block; filter:drop-shadow(0 14px 22px rgba(11,26,46,.16)); }
/* P3.4 (23/09) : fond nuée, contour région en stratos à 20 %, ombre portée
   douce (sur le SVG entier ci-dessus) — la carte prend du volume au lieu de
   rester un aplat plat, même filtrée sur une seule activité. */
.carte-france .terre{ fill:var(--nuee); stroke:color-mix(in srgb, var(--stratos) 20%, transparent); stroke-width:1.2; transition:fill .15s; }
.carte-france .terre.est-survolee{ fill:color-mix(in srgb, var(--stratos) 12%, var(--nuee)); }
.carte-epingle .carte-epingle__disque{ fill:var(--stratos); stroke:var(--nuee); stroke-width:2; }
.carte-epingle--air .carte-epingle__disque{ fill:var(--air); }
.carte-epingle--eau .carte-epingle__disque{ fill:var(--eau); }
.carte-epingle--roche .carte-epingle__disque{ fill:var(--roche); }
/* Picto de milieu dans le disque (P3.1, 23/09) : remplace les codes à 2
   lettres — voile/goutte/prise, en givre sur le disque de couleur du milieu. */
.carte-epingle__picto{ color:var(--givre); pointer-events:none; }
.carte-epingle__attache{ stroke:var(--encre-2); stroke-width:1; stroke-dasharray:2 2; }
.carte-epingle__lieu{ fill:var(--encre-2); }
.carte-epingle{ cursor:pointer; }
/* LOT C4 (23/09) : zone tactile élargie invisible, mobile seulement -- stroke
   transparent + non-scaling-stroke = largeur constante en px écran, jamais mise
   à l'échelle par le viewBox (donc pas de rayon "r" à changer, aucun impact visuel). */
.carte-epingle__zone-tactile{ fill:transparent; stroke:transparent; pointer-events:all; }
@media (max-width:960px){ .carte-epingle__zone-tactile{ stroke-width:46px; vector-effect:non-scaling-stroke; } }
.carte-epingle:hover .carte-epingle__disque, .carte-epingle:focus .carte-epingle__disque{ r:12; }
.carte-epingle--focus .carte-epingle__disque{ stroke:var(--balise); stroke-width:3; }
/* Pastille « relevé » (P3.2, corrigé le 23/09/2026) : un point PLEIN discret
   (jamais des pointillés, qui se lisent comme « en chargement » ou « cassé »). */
.carte-epingle--releve .carte-epingle__disque{ fill:var(--encre-2); fill-opacity:.5; stroke:none; }
.carte-epingle--releve:hover .carte-epingle__disque, .carte-epingle--releve:focus .carte-epingle__disque{ r:5; fill-opacity:.8; }
.carte-epingle{ transition:opacity .15s; }
.carte-epingle.est-estompee{ opacity:.18; }
.carte-infobulle{
	position:absolute; transform:translate(-50%,-130%); background:var(--stratos); color:var(--givre);
	padding:8px 12px; border-radius:12px; font-size:12px; white-space:nowrap; pointer-events:none; z-index:5;
	box-shadow:var(--ombre);
}
.carte-infobulle strong{ display:block; color:var(--balise); font-size:10px; text-transform:uppercase; letter-spacing:.06em; }
.carte-legende{ font-size:12px; color:var(--encre-2); margin-top:10px; }
.carte-outremer{ margin-top:14px; }
.carte-outremer__titre{ font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--encre-2); margin-bottom:6px; }
.carte-outremer__liens{ display:flex; flex-wrap:wrap; gap:8px; }
.carte-outremer__liens a{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; background:var(--nuee); border-radius:999px; font-size:12px; border:1px solid var(--bord); }
.carte-outremer__code, .pastille-code{ display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:999px; background:var(--stratos); color:var(--givre); font-size:9px; font-weight:700; }

/* =============================================================================
   7. CARTE ACTIVITÉ XL (procédé 4) + carrousel
   ========================================================================== */
.carrousel-xl{ position:relative; overflow:hidden; max-width:100%; }
.carrousel-xl__piste{ display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; scrollbar-width:none; max-width:100%; }
.carrousel-xl__piste::-webkit-scrollbar{ display:none; }
.carrousel-xl__fleches{ display:flex; gap:8px; justify-content:flex-end; margin-top:14px; }
.carrousel-xl__fleche{ width:40px; height:40px; border-radius:999px; border:1.5px solid var(--stratos); background:transparent; color:var(--stratos); cursor:pointer; font-size:16px; }
/* LOT2 #11 (23/09, JUGEMENT-P1) : à partir de 641px, la 2ᵉ carte (sur 2 au
   total, jamais plus) tenait en partie hors du conteneur -- grille 2
   colonnes pleines au lieu du rail à défilement, flèches inutiles retirées.
   Le rail à défilement (utile au doigt) reste le comportement en mobile. */
@media (min-width:641px){
	.carrousel-xl__piste{ display:grid; grid-template-columns:repeat(2,1fr); overflow-x:visible; }
	.carrousel-xl__piste .carte-xl:only-child{ grid-column:1/-1; }
	.carrousel-xl__fleches{ display:none; }
}

.carte-xl{
	scroll-snap-align:start; flex:0 0 min(760px,88vw); display:grid; grid-template-columns:1fr 1fr;
	border-radius:var(--rayon-xl); overflow:hidden; box-shadow:var(--ombre);
}
@media (max-width:640px){ .carte-xl{ grid-template-columns:1fr; flex-basis:92vw; } }
/* Recette 23/09 : justify-content:center laissait ~200 px de bleu vide entre
   un texte court et une photo plus haute — le contenu se colle désormais en
   haut, le bouton descend en bas (space-between), la boîte ne semble plus vide. */
.carte-xl__stratos{ background:var(--stratos); color:var(--givre); padding:26px 26px; display:flex; flex-direction:column; justify-content:space-between; gap:10px; position:relative; min-height:170px; }
.carte-xl__titre{ font-family:var(--ff-titre); text-transform:uppercase; font-size:24px; font-weight:800; }
/* R-0878 (récidive ×3, corrigée en profondeur le 23/09 LOT4) : la pastille
   .carte-xl__cote vivait DANS .carte-xl__stratos (position:absolute sur le
   panneau de texte) -- toute réservation de largeur sur le titre n'était
   qu'un pansement au pixel, recalée à chaque changement de texte/police et
   rechevauchée 3 fois. Cause racine : ce n'est pas la bonne zone. DA §5.4 le
   dit explicitement -- « cote du procédé 2 en surimpression sur la PHOTO ».
   La pastille est désormais posée dans .carte-xl__photo (space dédié, sans
   texte concurrent) : plus aucun chevauchement possible avec le titre, à
   aucune largeur ni aucune langue. Scrim sombre semi-opaque (pas givre
   translucide) pour rester lisible sur n'importe quelle photo. */
.carte-xl__cote{ position:absolute; top:16px; right:16px; z-index:2; font-family:var(--ff-titre); font-size:12px; color:var(--givre); background:rgba(11,36,66,.72); padding:4px 10px; border-radius:999px; max-width:none; width:max-content; white-space:nowrap; text-align:center; }
/* LOT2 #11 : le lien "Découvrir" était invisible -- .btn--filet est conçu
   pour un fond clair (texte/bordure couleur stratos), ici posé SUR un fond
   stratos (même couleur que le texte = bouton fantôme, d'où l'impression de
   carte vide sans lien). */
.carte-xl__stratos .btn--filet{ border-color:var(--givre); color:var(--givre); }
.carte-xl__photo{ position:relative; min-height:220px; }
.carte-xl__photo img{ width:100%; height:100%; object-fit:cover; }
.carte-xl__prix{
	position:absolute; bottom:-2px; left:-2px; width:88px; height:88px; border-radius:999px;
	background:var(--balise); color:var(--stratos); display:flex; flex-direction:column; align-items:center; justify-content:center;
	font-family:var(--ff-titre); box-shadow:var(--ombre); text-align:center; line-height:1.1;
}
@media (max-width:640px){ .carte-xl__prix{ left:16px; bottom:auto; top:16px; } }
.carte-xl__prix small{ font-size:9px; text-transform:uppercase; }
.carte-xl__prix strong{ font-size:18px; font-weight:800; }

/* =============================================================================
   8. RÉASSURANCE (procédé 6)
   ========================================================================== */
.reassurance__grille{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
.reassurance__grille--2{ grid-template-columns:repeat(2,1fr); }
.reassurance__grille--3{ grid-template-columns:repeat(3,1fr); }
.reassurance__grille--4{ grid-template-columns:repeat(4,1fr); } /* nombre réel de repères = nombre de colonnes, jamais orphelines */
/* jamais de ligne orpheline (P-retour 18/09/2026) : au lieu d'un palier
   intermédiaire à 2 colonnes qui isole le dernier item, on empile directement. */
@media (max-width:900px){ .reassurance__grille{ grid-template-columns:1fr; } }
.reassurance__item{ text-align:left; }
/* P10.3 (23/09) : pictos 48 px trait stratos + une touche balise (petit point
   d'accent), sur fond brume sans cadre. */
.reassurance__icone{ width:48px; height:48px; color:var(--stratos); margin-bottom:10px; position:relative; }
.reassurance__item::before{ content:''; display:block; width:8px; height:8px; border-radius:999px; background:var(--balise); margin-bottom:8px; }

.reassurance__libelle{ font-size:13.5px; line-height:1.35; }
.reassurance__libelle strong{ display:block; text-transform:uppercase; font-size:12.5px; letter-spacing:.03em; }

/* Bande « ciel » pleine largeur (P10.1, 23/09) : équivalent du bloc « en
   image » de la référence, sans vidéo ni texte copiés. */
.bande-ciel{ position:relative; min-height:520px; display:flex; align-items:flex-end; color:var(--givre); overflow:hidden; }
.bande-ciel__photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.bande-ciel::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,36,66,.05) 0%, rgba(11,36,66,.7) 100%); z-index:0; }
.bande-ciel__corps{ position:relative; z-index:1; width:100%; max-width:var(--conteneur); margin:0 auto; padding:0 var(--gouttiere) 44px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.bande-ciel__phrase{ font-family:var(--ff-titre); font-weight:800; font-size:clamp(22px,3vw,34px); max-width:20ch; margin:0; }
@media (max-width:640px){ .bande-ciel{ min-height:360px; } }

/* =============================================================================
   9. GRILLE ACTIVITÉS SOUS LE CIEL, GUIDES, ACTU
   ========================================================================== */
.grille-activites{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
.grille-activites--2{ grid-template-columns:repeat(2,1fr); }
.grille-activites--3{ grid-template-columns:repeat(3,1fr); }
.grille-activites--4{ grid-template-columns:repeat(4,1fr); } /* nombre réel de tuiles du groupe = nombre de colonnes */
@media (max-width:900px){ .grille-activites, .grille-activites--2, .grille-activites--4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:900px) and (min-width:481px){ .grille-activites--3{ grid-template-columns:repeat(3,1fr); } }
/* LOT2 #10 (23/09, JUGEMENT-P1) : en 390, la grille à 3 colonnes compactes
   (110px) faisait chevaucher la pastille cote et le libellé -- remplacée par
   un rail horizontal défilant de tuiles 160×200px (les 3 colonnes de la
   règle 480px précédente sont retirées, ce bloc s'applique désormais à
   toutes les variantes --2/--3/--4). */
@media (max-width:480px){
	.grille-activites{ display:flex; grid-template-columns:none; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; margin-bottom:20px; padding-bottom:6px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
	.grille-activites::-webkit-scrollbar{ display:none; }
	.grille-activites .carte-activite{ flex:0 0 160px; scroll-snap-align:start; aspect-ratio:auto; height:200px; }
}
.grille-activites__groupe-titre{ grid-column:1/-1; font-size:12px; text-transform:uppercase; letter-spacing:.1em; opacity:.75; margin:18px 0 4px; }
.grille-activites__groupe-titre:first-child{ margin-top:0; }
.carte-activite{ position:relative; border-radius:var(--rayon-md); overflow:hidden; aspect-ratio:4/3; color:#fff; background:var(--stratos); }
.carte-activite img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.carte-activite::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(11,26,46,.85)); }
.carte-activite__corps{ position:absolute; inset:auto 0 0 0; padding:14px; z-index:1; }
.carte-activite__cote{ position:absolute; top:10px; left:10px; z-index:1; background:rgba(11,36,66,.7); padding:3px 9px; border-radius:999px; font-family:var(--ff-titre); font-size:11px; white-space:nowrap; }
.carte-activite__titre{ font-family:var(--ff-corps); font-weight:700; font-size:15px; margin-bottom:2px; }
.carte-activite__prix{ font-size:12.5px; opacity:.9; }

.grille-cartes{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:900px){ .grille-cartes{ grid-template-columns:1fr; } }
/* LOT2 #14 (23/09, JUGEMENT-P1) : grilles de villes/guides incomplètes
   (3+1, 3+2) -- 4 éléments passent à 4 colonnes pleines ; sur 5, la dernière
   carte (--large) double de largeur et boucle la 2ᵉ ligne (2 normales + 1
   double = 3 colonnes remplies), photo 16:9 à gauche au lieu de la vignette
   carrée/3:2 empilée. */
.grille-cartes--4col{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1100px) and (min-width:901px){ .grille-cartes--4col{ grid-template-columns:repeat(2,1fr); } }
.carte-ville--large, .carte-article--large{ grid-column:span 2; display:flex; gap:18px; align-items:center; }
.carte-ville--large .carte-ville__figure{ flex:0 0 240px; aspect-ratio:16/9; margin-bottom:0; }
.carte-ville--large .carte-ville__corps{ flex:1; }
.carte-article--large .carte-article__figure{ flex:0 0 240px; aspect-ratio:16/9; margin-bottom:0; }
.carte-article--large .carte-article__titre{ flex:1; }
/* P2-10 (23/09, JUGEMENT-P2, LOT4) : dernière carte SEULE dans la ligne
   finale d'une grille à 3 colonnes (reste=1, ex. 10 = 3+3+3+1) -- pleine
   largeur au lieu d'une carte étroite avec 2 cases vides à côté (mesuré sur
   /les-dossiers/, rubrique canyoning). */
.carte-article--pleine{ grid-column:1/-1; display:flex; gap:18px; align-items:center; }
.carte-article--pleine .carte-article__figure{ flex:0 0 280px; aspect-ratio:16/9; margin-bottom:0; }
.carte-article--pleine .carte-article__titre{ flex:1; }
@media (max-width:640px){
	.carte-ville--large, .carte-article--large, .carte-article--pleine{ grid-column:span 1; flex-direction:column; align-items:stretch; }
	.carte-ville--large .carte-ville__figure, .carte-article--large .carte-article__figure, .carte-article--pleine .carte-article__figure{ flex:none; aspect-ratio:3/2; }
}
.grille-cartes--2col{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px; }
.grille-cartes--2col > *, .grille-cartes--compacte .carte-article, .grille-cartes--compacte .carte-article > *{ min-width:0; }
@media (max-width:767px){ .grille-cartes--2col{ grid-template-columns:minmax(0,1fr); gap:28px; } }
.grille-cartes--2col--seule{ grid-template-columns:1fr; max-width:640px; }

/* Cartes compactes (listes « Le Fil du ciel » / « Guides ») : vignette 16/10
   à côté du texte, jamais l'image en pleine largeur (retour du 18/09/2026). */
.grille-cartes--compacte{ grid-template-columns:minmax(0,1fr); gap:14px; }
.grille-cartes--compacte .carte-article{ display:flex; gap:14px; align-items:flex-start; }
.grille-cartes--compacte .carte-article__figure{ width:128px; flex:none; aspect-ratio:16/10; margin-bottom:0; }
.grille-cartes--compacte .carte-article__titre{ font-size:15px; margin-bottom:4px; }
.grille-cartes--compacte .carte-article__etiquette{ margin-bottom:6px; align-self:flex-start; }
.grille-cartes--compacte .carte-article__texte{ display:flex; flex-direction:column; flex:1; min-width:0; }
.grille-cartes--compacte .carte-article__meta{ white-space:nowrap; margin:0; }
@media (max-width:480px){ .grille-cartes--compacte .carte-article__figure{ width:96px; } }
.carte-article{ display:block; }
/* BUG racine des vignettes géantes (retour du 18/09/2026) : .carte-article__figure
   est un <span> (inline par défaut) — aspect-ratio/overflow ne s'appliquent
   JAMAIS sur une boîte inline. display:block corrige toutes les cartes du
   site d'un coup (accueil, rubriques, article, auteur, archives). */
.carte-article__figure{ display:block; border-radius:var(--rayon-md); overflow:hidden; aspect-ratio:3/2; margin-bottom:12px; }
/* P3-3 (23/09, JUGEMENT-P3, LOT6) : registre de photos épuisé -- jamais un
   doublon de gabarit (hero/formule déjà montré ailleurs sur la page) : la
   carte reste identifiable par son picto de milieu, même procédé déjà
   validé pour "Autres villes" (P2-6, .liste-spots__vignette--<milieu>). */
.carte-article__figure--vide{ display:flex; align-items:center; justify-content:center; }
.carte-article__figure img{ display:block; width:100%; height:100%; object-fit:cover; }
.carte-article__etiquette{ display:inline-block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:3px 9px; border-radius:999px; margin-bottom:8px; background:var(--bord); }
.carte-article__etiquette--air{ background:color-mix(in srgb, var(--air) 22%, transparent); color:#1C5BC0; } /* 24/09 : var(--air) sur clair < 4,5:1 */
.carte-article__etiquette--eau{ background:color-mix(in srgb, var(--eau) 22%, transparent); color:#0B6F6C; } /* 24/09 : 2,31:1 mesuré (chk_livraison #2) */
.carte-article__etiquette--roche{ background:color-mix(in srgb, var(--roche) 30%, transparent); color:#6b4c30; }
.carte-article__titre{ font-family:var(--ff-corps); font-weight:700; font-size:19px; line-height:1.3; margin-bottom:6px; }
.carte-article__meta{ font-size:12.5px; color:var(--encre-2); }

/* Carte ville (P1.4, composant DA §7, 23/09) : photo 1:1, ville en Unbounded,
   région, 2 étiquettes (prix/cote) — remplace les liens texte sans image. */
.carte-ville{ display:block; }
.carte-ville__figure{ display:block; aspect-ratio:1/1; border-radius:var(--rayon-md); overflow:hidden; margin-bottom:12px; background:var(--brume); }
.carte-ville__figure img{ width:100%; height:100%; object-fit:cover; display:block; }
.carte-ville__nom{ display:block; font-family:var(--ff-titre); font-weight:600; font-size:19px; }
.carte-ville__region{ display:block; font-size:12.5px; color:var(--encre-2); margin:2px 0 8px; }
.carte-ville__etiquettes{ display:flex; gap:6px; flex-wrap:wrap; }
.carte-ville__tag{ font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:999px; background:var(--bord); }

/* =============================================================================
   10. BILLET DE VOL (procédé 5) — LE formulaire lead
   ========================================================================== */
.billet{
	color:var(--encre); display:grid; grid-template-columns:180px minmax(0,1fr); background:var(--nuee); border-radius:var(--rayon-xl);
	overflow:hidden; box-shadow:var(--ombre); border:1px solid var(--bord); width:100%; min-width:0;
}
@media (max-width:640px){ .billet{ grid-template-columns:1fr; } }
/* P3-1 (23/09, JUGEMENT-P3, LOT6, BLOQUANT — régression du LOT4) : le billet
   se faisait couper à droite à 1440 sur les pages villes. Cause réelle : la
   piste "1fr" d'un grid a un minimum implicite "auto" (= min-content), PAS 0
   -- même piège déjà corrigé en P2-9/P2-21 sur des grilles plus externes,
   jamais colmaté ICI. Le <select> "Activité" (options "Saut en parachute"…)
   voulait plus de largeur que les 503 px de la colonne .spot-formulaire une
   fois LOT4 l'a resserrée (634px -> 503px, cf. P2-9) : le formulaire
   débordait de .billet, rogné par son propre overflow:hidden (nécessaire au
   rayon arrondi du talon, pas retiré). minmax(0,1fr) autorise la piste à
   rétrécir sous son min-content -- le select se contente alors de sa place,
   sans jamais dépasser. */
.billet__form{ min-width:0; }
.billet__talon{
	background:var(--stratos); color:var(--givre); display:flex; flex-direction:column; align-items:center;
	justify-content:center; gap:10px; padding:24px; position:relative; overflow:hidden;
	border-right:2px dashed rgba(242,247,252,.35);
}
/* LOT2 #9 (23/09, JUGEMENT-P1) : bande compacte 120px en 390, photo pleine
   largeur en fond, cote + logo en surimpression (au lieu de la colonne
   verticale qui rognait "GRAND FRISSON"). */
@media (max-width:640px){ .billet__talon{ flex-direction:column; height:120px; padding:14px; gap:4px; border-right:none; border-bottom:2px dashed rgba(242,247,252,.35); } }
/* P11.1 (23/09) : photo de tandem en fond de talon (au lieu du seul logo). */
.billet__talon-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.4; z-index:0; }
/* LOT2 #9 : bug de cascade corrigé -- ":not(.billet__talon-photo)" exclut la
   photo de fond de cette règle. Avant, même spécificité + ordre de source =
   la photo repassait en position:relative et gonflait à 270px de haut en
   390 (elle entrait dans le flux au lieu de rester un fond absolu), ce qui
   rognait "GRAND FRISSON" hors du cadre. */
.billet__talon > *:not(.billet__talon-photo){ position:relative; z-index:1; }
/* Recette 23/09 : « +4 000 M » se coupait sur 2 lignes dans le talon étroit
   (180 px) — nowrap. LOT2 #9 : la cote reste visible en 390 (bande 120px),
   simplement réduite, au lieu d'être masquée. */
.billet__talon-cote{ font-family:var(--ff-titre); font-size:11px; text-transform:uppercase; letter-spacing:.03em; margin:0; white-space:nowrap; }
.billet__talon-cote span{ opacity:.75; } .billet__talon-cote strong{ color:var(--balise); white-space:nowrap; }
@media (max-width:640px){ .billet__talon-cote{ font-size:9.5px; } .billet__symbole{ width:26px; height:26px; } .billet__talon-texte{ font-size:9.5px; } }
.billet__symbole{ width:36px; height:36px; }
.billet__talon-texte{ font-family:var(--ff-titre); font-size:11px; text-transform:uppercase; letter-spacing:.08em; text-align:center; margin:0; }
/* Perforation du billet (P11.1) : petits cercles découpés en haut/bas de la ligne pointillée. */
.billet__talon-perfo{ display:none; }
/* P2-17 (23/09, JUGEMENT-P2, LOT4) : « .billet__talon-perfo{position:absolute} »
   perdait TOUJOURS contre « .billet__talon > *:not(.billet__talon-photo){
   position:relative } » (2 classes de spécificité contre 1, cf. l'argument de
   :not() qui compte dans le calcul) -- le talon restait donc position:relative,
   DANS le flux flex, collé juste sous "GRAND FRISSON" (hauteur 0). Ses pseudo-
   éléments (position:absolute, eux, imposée sans concurrence) se positionnaient
   alors top:-7px/bottom:-7px relatifs à CE point bas de page au lieu des bords
   haut/bas du talon entier -- d'où le point blanc parasite juste sous la
   marque. Sélecteur à spécificité égale (2 classes) posé APRÈS : gagne le
   conflit, le span retrouve bien position:absolute sur toute la hauteur du
   talon, ses perforations reviennent à leur place (bords haut/bas réels). */
@media (min-width:641px){
	.billet__talon-perfo, .billet__talon-perfo::before, .billet__talon-perfo::after{ display:block; }
	.billet__talon > .billet__talon-perfo{ position:absolute; right:-7px; top:0; bottom:0; width:14px; z-index:2; }
	.billet__talon-perfo::before, .billet__talon-perfo::after{ content:''; position:absolute; right:0; width:14px; height:14px; border-radius:999px; background:var(--nuee); }
	.billet__talon-perfo::before{ top:-7px; } .billet__talon-perfo::after{ bottom:-7px; }
}
.billet__form{ padding:26px 28px; }
.billet__titre, .bande--stratos .billet__titre{ font-size:22px; margin-bottom:16px; color:var(--encre); }
.billet__grille{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; margin-bottom:16px; }
.billet__saisie{ min-width:0; width:100%; box-sizing:border-box; }
.billet__label--large{ grid-column:1/-1; }
.billet__label{ display:flex; flex-direction:column; gap:6px; font-size:12.5px; font-weight:600; color:var(--encre-2); }
.billet__saisie{ padding:11px 12px; border-radius:10px; border:1px solid var(--bord); background:var(--brume); color:var(--encre); font-family:var(--ff-corps); font-size:14.5px; }
.billet__champ-leurre{ position:absolute; left:-9999px; }
.billet__delai{ font-size:12px; color:var(--encre-2); margin-top:10px; }
.billet__bouton{ width:100%; justify-content:center; }
/* LOT C3 (23/09) : mention RGPD sous le bouton, lien visible sans être un pavé. */
.billet__rgpd{ font-size:11px; color:var(--encre-2); margin-top:6px; line-height:1.4; }
.billet__rgpd a{ color:var(--stratos); text-decoration:underline; text-underline-offset:2px; } /* 24/09 : orange sur blanc = 2,87:1 (chk_livraison #2) */
@media (max-width:520px){ .billet__grille{ grid-template-columns:1fr; } }

/* =============================================================================
   11. PIED — compact, dense, courbes de niveau, jamais de bande vide au-dessus
   ========================================================================== */
.pied{ background:var(--stratos); color:var(--givre); padding:48px 0 20px; }
.pied a{ color:var(--givre); }
.pied__grille{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:28px; padding-bottom:28px; border-bottom:1px solid rgba(242,247,252,.15); }
/* P12.3 (23/09) : pied dense à 5 colonnes quand la colonne région existe. */
.pied__grille--5{ grid-template-columns:1.2fr 1fr 1fr 1fr 1fr; }
@media (max-width:1100px){ .pied__grille--5{ grid-template-columns:1fr 1fr 1fr; } }
@media (max-width:900px){ .pied__grille, .pied__grille--5{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .pied__grille, .pied__grille--5{ grid-template-columns:1fr; } }
.pied__colonne h3{ color:var(--givre); font-size:13px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:12px; }
.pied__colonne ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.pied__colonne a{ font-size:13.5px; opacity:.88; display:flex; justify-content:space-between; gap:8px; }
.pied__colonne a:hover{ opacity:1; text-decoration:underline; }
.pied__compteur{ color:var(--balise); font-weight:700; }
/* Compteur de rubrique — page Dossiers (LOT A4, 23/09). */
.rubrique-compteur{ color:var(--balise); font-weight:700; font-family:var(--ff-titre); font-size:.6em; vertical-align:middle; }
.pied__marque{ display:flex; flex-direction:column; gap:12px; }
.pied__baseline{ font-size:13px; opacity:.8; max-width:32ch; }
.pied__bas{ display:flex; flex-wrap:wrap; gap:14px 22px; justify-content:space-between; padding-top:18px; font-size:12px; opacity:.75; }
.pied__mentions{ display:flex; flex-wrap:wrap; gap:14px; }

/* =============================================================================
   12. ENCADRÉ D'ADMISSION + COTATION (âge / taille / savoir-nager / prix)
   ========================================================================== */
.admission{ list-style:none; margin:0 0 20px; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.admission__item{ background:var(--nuee); border:1px solid var(--bord); border-radius:14px; padding:12px 14px; font-size:13.5px; font-weight:600; display:flex; align-items:center; gap:10px; }
.admission__coche{ width:18px; height:18px; border-radius:999px; background:var(--balise); flex:none; position:relative; }
.admission__coche::after{ content:''; position:absolute; left:5px; top:3px; width:6px; height:9px; border:solid var(--stratos); border-width:0 2px 2px 0; transform:rotate(40deg); }
.cotation{ display:inline-flex; flex-direction:column; margin-bottom:16px; }
.cotation__code{ font-family:var(--ff-titre); font-weight:800; font-size:clamp(30px,4vw,44px); color:var(--balise); line-height:1; }
.cotation__texte{ font-size:13.5px; color:var(--encre-2); }

/* LOT1#7 (23/09, JUGEMENT-P1) : « À savoir » était un H2 nu + <p> (repéré comme
   une note de fabrication, sans habillage) -- vrai encadré maintenant, même
   langage visuel que les autres cartes du thème (fond --brume, filet --balise
   à gauche, coin arrondi standard). Composant générique, réutilisable sur
   d'autres articles au balayage. */
.encadre-savoir{ background:var(--brume); border-left:4px solid var(--balise); border-radius:var(--rayon-md); padding:18px 22px; margin:28px 0; }
.encadre-savoir__titre{ font-family:var(--ff-titre); font-weight:600; font-size:15px; text-transform:uppercase; letter-spacing:.04em; margin:0 0 8px; color:var(--stratos); }
.encadre-savoir p:last-child{ margin:0; font-size:14.5px; }

/* =============================================================================
   13. INFOGRAPHIES (P-542) — check, compare, tarifs, jauges, frise, lieu, profil
   + auto-habillage des <ul>/<ol>/<table> restés bruts dans le texte
   ========================================================================== */
.sbs-infographie{ margin:28px 0; background:var(--brume); border-radius:var(--rayon-md); padding:22px; }

.sbs-infographie__titre{ font-family:var(--ff-titre); font-size:15px; text-transform:uppercase; letter-spacing:.04em; margin-bottom:14px; }

/* P5.4 (23/09) : 2 colonnes dans le corps de 720 px (minmax 280), jamais 3+
   colonnes étroites qui écrasent un libellé long sur une valeur de 80 px. */
.sbs-check__grille, .liste-infographiee{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:10px; }
/* Recette 23/09 (récidive) : display:flex EN LIGNE faisait de la coche ET du
   texte des ITEMS FLEX côte à côte, qui se partageaient la largeur de la
   tuile — le libellé se retrouvait écrasé dans ~80 px et éclatait mot par
   mot sur 13 lignes. Fix définitif : plus aucun flex ici, la coche est
   positionnée en absolu sur un padding-left, le texte coule en pleine largeur. */
/* P2-1 (23/09, JUGEMENT-P2, LOT4) : ces tuiles ont un fond --nuee (blanc) FIXE,
   mais aucune couleur de texte propre -- elles héritent du texte de la section
   qui les entoure. Sur une bande --stratos (ex. /a-propos/), cette section
   force color:givre (clair) pour son propre fond bleu foncé : les tuiles
   blanches héritaient ce givre -> texte quasi blanc sur fond blanc,
   illisible. Couleur fixée ici, indépendante de la section ambiante : le
   texte reste --encre (sombre) quel que soit le fond de la bande. */
.sbs-check__tuile, .liste-infographiee li{
	background:var(--nuee); border:1px solid var(--bord); border-radius:12px; padding:12px 14px 12px 38px;
	font-size:14.5px; line-height:1.4; position:relative; color:var(--encre);
}
/* P3-7 (23/09, JUGEMENT-P3, LOT6) : ce display:block visait le libellé en TÊTE
   de tuile ("Un lien commercial est signalé…") -- mais il s'appliquait à TOUT
   <strong> de la tuile, y compris ceux au milieu d'une phrase ("Le prix
   réellement relevé" sur /a-propos/, "Une obligation légale" sur /methode/),
   qui se retrouvaient coupés seuls sur leur propre ligne. Restreint au
   premier enfant du <li>/de la tuile (le VRAI libellé), jamais un <strong>
   emphase glissé plus loin dans le texte. */
.sbs-check__tuile > strong:first-child, .liste-infographiee li > strong:first-child{ display:block; margin-bottom:2px; color:var(--stratos); }
.sbs-check__coche{ width:18px; height:18px; border-radius:999px; background:var(--balise); flex:none; position:absolute; left:14px; top:14px; }
.sbs-check__coche::after{ content:''; position:absolute; left:5px; top:3px; width:6px; height:9px; border:solid var(--stratos); border-width:0 2px 2px 0; transform:rotate(40deg); }
.liste-infographiee li::before{ content:''; width:8px; height:8px; border-radius:999px; background:var(--balise); flex:none; position:absolute; left:16px; top:19px; }
.liste-infographiee{ margin:28px 0; }
/* Une liste à un seul élément se lit comme cassée une fois mise en carte —
   masquée plutôt que « corrigée » côté contenu (retour 18/09/2026). */
.liste-infographiee:has(li:only-child){ display:none; }
/* Le titre rédactionnel qui introduit cette liste (ex. « Les articles
   voisins ») ne doit pas rester seul quand la liste est masquée (retour 18/09/2026).
   P2-6 (23/09, JUGEMENT-P2, LOT4) : cette règle ne s'appliquait JAMAIS --
   :has(li:only-child) IMBRIQUÉ dans l'argument d'un autre :has() est un
   sélecteur CSS invalide (la spec interdit :has() à l'intérieur de :has()) ;
   Chrome rejette tout le groupe de sélecteurs et l'ignore silencieusement,
   d'où le libellé « Les articles voisins » resté seul, sans liste, mesuré
   sur /saut-en-parachute-paris/ (1 seul lien voisin -> liste masquée, titre
   pas masqué). Réécrit en un seul niveau de :has() (combinateur enfant
   direct au lieu d'un :has() imbriqué) : sélecteur valide, prouvé
   (CSS.supports + querySelectorAll) avant dépôt. */
h2:has(+ .liste-infographiee > li:only-child),
h3:has(+ .liste-infographiee > li:only-child),
p:has(+ .liste-infographiee > li:only-child){ display:none; }

.sbs-compare__grille{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; }
.sbs-compare__carte{ background:var(--nuee); border:1px solid var(--bord); border-radius:14px; padding:16px; }
.sbs-compare__nom{ font-size:15px; margin-bottom:6px; }
.sbs-compare__prix{ font-family:var(--ff-titre); color:var(--balise); font-weight:800; font-size:20px; margin-bottom:4px; }
.sbs-compare__detail{ font-size:13px; color:var(--encre-2); margin:0; }
/* <table> converti en div/cartes par gf_tableau_vers_cartes() : zéro <table> servi (P-542, retour 18/09/2026).
   Colonnes fixes calculées par gf_colonnes_sans_orphelin() (jamais une carte seule sur sa ligne, 4 = 2×2). */
/* P5.4 (23/09) : grille bornée à 2 colonnes max (280 px mini) — 3 colonnes
   dans un corps de 720 px écrasaient la valeur sur ~80 px (jusqu'à 13 lignes
   par carte). Chaque ligne label/valeur passe en colonne, jamais côte à côte. */
.tableau-infographie{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px; margin:28px 0; }
.tableau-infographie--2, .tableau-infographie--3{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
@media (max-width:640px){ .tableau-infographie{ grid-template-columns:1fr; } }
.tableau-infographie__carte{ background:var(--nuee); border:1px solid var(--bord); border-radius:14px; padding:14px 16px; }
.tableau-infographie__titre{ font-weight:700; font-size:14.5px; margin:0 0 8px; color:var(--encre); }
.tableau-infographie__ligne{ display:flex; flex-direction:column; gap:2px; padding:7px 0; font-size:13.5px; border-top:1px solid var(--bord); }
.tableau-infographie__ligne:first-of-type{ border-top:none; }
.tableau-infographie__label{ color:var(--encre-2); font-size:12px; }
.tableau-infographie__valeur{ font-weight:600; }

.sbs-tarifs__grille{ display:flex; flex-direction:column; gap:14px; }
.sbs-tarifs__ligne{ display:grid; grid-template-columns:140px 1fr 90px; align-items:center; gap:12px; }
@media (max-width:520px){ .sbs-tarifs__ligne{ grid-template-columns:1fr; gap:6px; } }
.sbs-tarifs__nom{ font-weight:600; font-size:13.5px; }
.sbs-tarifs__barre{ height:12px; border-radius:999px; background:var(--bord); overflow:hidden; }
.sbs-tarifs__remplissage{ display:block; height:100%; width:var(--pct); background:var(--balise); border-radius:999px; }
.sbs-tarifs__valeur{ font-family:var(--ff-titre); font-weight:700; text-align:right; }

.sbs-jauges__grille, .sbs-lieu__grille{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:14px; }
.sbs-jauges__tuile, .sbs-lieu__tuile{ background:var(--nuee); border-radius:14px; padding:16px; text-align:center; border:1px solid var(--bord); }
.sbs-jauges__valeur, .sbs-lieu__valeur{ font-family:var(--ff-titre); font-weight:800; font-size:22px; color:var(--balise); white-space:nowrap; }
.sbs-jauges__libelle, .sbs-lieu__libelle{ font-size:12px; color:var(--encre-2); margin-top:4px; }
/* P2-18 (23/09, JUGEMENT-P2, LOT4) : 18px seul ne suffisait pas -- avec
   white-space:nowrap, une valeur longue ("Diplômé d'État") reste sur une
   seule ligne et déborde quand même de la tuile ("Diplômé d'Ét…" mesuré sur
   le hub parapente, 390). 1 seule colonne (largeur pleine) + wrap autorisé :
   la valeur peut désormais passer sur 2 lignes au lieu d'être coupée. */
@media (max-width:480px){
	.sbs-jauges__grille, .sbs-lieu__grille{ grid-template-columns:1fr; }
	.sbs-jauges__valeur, .sbs-lieu__valeur{ font-size:18px; white-space:normal; }
}
/* Recette 23/09 : le titre « Repères » héritait color:var(--givre) de la
   bande stratos (givre sur brume = invisible) — le titre est toujours sur
   un fond clair (.sbs-infographie), jamais givre. */
.sbs-infographie__titre{ color:var(--stratos); }

.sbs-frise__liste{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
.sbs-frise__etape{ display:flex; gap:14px; }
.sbs-frise__numero{ font-family:var(--ff-titre); font-weight:800; font-size:14px; width:32px; height:32px; border-radius:999px; background:var(--stratos); color:var(--givre); display:flex; align-items:center; justify-content:center; flex:none; }
.sbs-frise__titre-etape{ font-weight:700; margin-bottom:2px; }
.sbs-frise__date{ font-size:12px; color:var(--balise); font-weight:700; margin-bottom:2px; }
.sbs-frise__texte{ font-size:13.5px; color:var(--encre-2); margin:0; }

.sbs-profil__svg{ width:100%; height:120px; margin-bottom:16px; display:block; }
/* LOT1#4 (23/09, JUGEMENT-P1) : points de la courbe -- HTML/CSS positionnés en %
   (jamais un <circle> SVG dans ce viewBox non uniforme, cf. commentaire PHP du
   shortcode) et plus gros que le trait (demande explicite du jugement). */
.sbs-profil__visuel{ position:relative; }
.sbs-profil__point{
	position:absolute; width:12px; height:12px; margin:-6px 0 0 -6px;
	border-radius:999px; background:var(--balise); border:2px solid var(--stratos);
	box-shadow:0 0 0 2px var(--nuee);
}
.sbs-profil__etapes{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; text-align:center; }
/* P3-4 (23/09, JUGEMENT-P3, LOT6) : auto-fit(minmax(120px,1fr)) peut caler
   pile sous le nombre réel d'étapes (mesuré à 6, saut en parachute) et
   laisser la DERNIÈRE seule sur une 2ᵉ ligne -- jamais un reste isolé.
   Le shortcode pose le nombre réel d'étapes en variable CSS (--n-etapes,
   functions.php) ; à partir de 641px (assez de place), on force EXACTEMENT
   ce nombre de colonnes égales, quel qu'il soit (5 ailleurs, 6 ici).
   En dessous, l'auto-fit garde son comportement existant (2-3 colonnes
   empilées), inchangé -- jamais 6 colonnes étranglées sur un petit écran. */
@media (min-width:641px){
	.sbs-profil__etapes{ grid-template-columns:repeat(var(--n-etapes,5),1fr); }
}
.sbs-profil__cote{ font-family:var(--ff-titre); font-weight:800; color:var(--balise); }
.sbs-profil__titre-etape{ font-weight:700; font-size:13.5px; margin:2px 0; }
.sbs-profil__texte{ font-size:12px; color:var(--encre-2); }

/* R-0879 (23/09) : [sbs_itineraire] — vraie infographie de parcours pour remplacer
   les itinéraires écrits en phrase à flèches ("Cassis → Port-Pin → En-Vau"). À la
   différence de .sbs-frise (liste numérotée, étapes indépendantes), les étapes sont
   RELIÉES par un connecteur visuel continu (le fil du parcours), horizontal à 1440,
   vertical à 390 — l'infographie doit rester propre quand durée/distance/dénivelé/
   niveau manquent : le bandeau de chiffres est entièrement absent s'il n'y a aucune
   valeur (PHP : array_filter), jamais une tuile vide. */
.sbs-itineraire__chiffres{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:14px; margin-bottom:22px; }
.sbs-itineraire__chiffre{ background:var(--nuee); border:1px solid var(--bord); border-radius:14px; padding:16px; text-align:center; }
.sbs-itineraire__valeur{ font-family:var(--ff-titre); font-weight:800; font-size:19px; color:var(--balise); line-height:1.2; margin:0; }
.sbs-itineraire__libelle{ font-size:12px; color:var(--encre-2); margin:4px 0 0; }
/* Le parcours : rangée flex qui porte elle-même le connecteur (bordure-haut sur
   chaque étape sauf la 1ère, un seul fil continu) — pas de pseudo-élément positionné
   en absolu à recalculer par JS, robuste à un nombre d'étapes variable (2 à 8). */
.sbs-itineraire__parcours{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:flex-start; }
.sbs-itineraire__etape{ position:relative; flex:1 1 140px; min-width:120px; padding:22px 14px 0; text-align:center; border-top:3px solid var(--stratos); }
.sbs-itineraire__etape:first-child{ border-top-color:transparent; }
.sbs-itineraire__pastille{ position:absolute; top:-11px; left:50%; transform:translateX(-50%); width:20px; height:20px; border-radius:999px; background:var(--balise); border:3px solid var(--brume); }
.sbs-itineraire__nom{ display:block; font-weight:700; font-size:14.5px; color:var(--encre); }
.sbs-itineraire__note{ display:block; font-size:12.5px; color:var(--encre-2); margin-top:3px; }
/* 390 : le fil passe à la verticale, aligné à gauche — jamais une rangée qui
   déborde horizontalement (garde-fou mobile, section 20). Pastille = 20 px visuel,
   zone cliquable non requise (décoratif, aria-hidden), donc pas de contrainte 44 px ici. */
@media (max-width:600px){
	.sbs-itineraire__parcours{ flex-direction:column; }
	.sbs-itineraire__etape{ flex:none; width:100%; min-width:0; text-align:left; padding:16px 0 16px 28px; border-top:none; border-left:3px solid var(--stratos); }
	.sbs-itineraire__etape:first-child{ border-left-color:transparent; }
	.sbs-itineraire__pastille{ top:14px; left:-1px; transform:translateX(-50%); }
}

/* =============================================================================
   14. ARTICLE (single.php) — colonne latérale, en-tête travaillé, sources
   ========================================================================== */
.progression-lecture{ position:sticky; top:0; z-index:60; height:3px; background:var(--bord); }
.progression-lecture__barre{ height:100%; width:0; background:var(--balise); transition:width .1s linear; }

/* CTA sticky mobile — une BANDE FINE, jamais un pavé qui mange l'écran
   (retour du 18/09/2026) : hauteur contrainte, un seul lien, pas de fond
   plein écran, marge de sécurité pour l'encoche iOS. Desktop : absent. */
.cta-sticky-mobile{ display:none; }
@media (max-width:680px){
	.cta-sticky-mobile{
		display:flex; position:fixed; left:0; right:0; bottom:0; z-index:65;
		padding:8px 14px calc(8px + env(safe-area-inset-bottom));
		background:color-mix(in srgb, var(--nuee) 96%, transparent);
		border-top:1px solid var(--bord); backdrop-filter:blur(6px);
	}
	.cta-sticky-mobile__lien{
		display:flex; align-items:center; justify-content:center; width:100%;
		height:40px; border-radius:999px; background:var(--balise); color:var(--stratos);
		font-weight:700; font-size:14.5px; text-decoration:none;
	}
}

/* Barre de navigation mobile façon application (LOT A7, 23/09/2026) -- 5
   onglets icône + libellé d'un mot, zone tactile >=44px. .nav-app-bas est émise
   par footer.php sur TOUTE page : elle remplace .cta-sticky-mobile (jamais
   2 bandes fixes empilées en bas -- un seul repère mobile). Desktop : absente ;
   le tiroir burger reste le menu complet (l'onglet « Menu » l'ouvre).
   LOT1#2 (23/09, JUGEMENT-P1) : sur l'accueil la barre (fixe, 61 px) recouvrait
   « Voir les centres » au premier écran (mesuré 390). Le retour pondéré
   (RETOURS-SITES-MATHIAS-PONDERES, poids 3) valide une barre d'appli en bas
   sur mobile -- on ne la supprime donc pas : elle reste masquée tant que le
   .hero est visible et apparaît au défilement (JS : assets/js/app.js, IO sur
   .hero -> classe .est-masquee). Sur les pages sans .hero (hubs, articles),
   rien n'observe .hero : la barre reste visible en permanence, comme avant.
   L'espace réservé en bas de page passe du body (fond --brume, laissait une
   bande claire sous le pied --stratos) au pied lui-même : plus de bande. */
.nav-app-bas{ display:none; }
@media (max-width:680px){
	.cta-sticky-mobile{ display:none !important; } /* superflue : .nav-app-bas porte déjà « Réserver » */
	.nav-app-bas{
		display:flex; position:fixed; left:0; right:0; bottom:0; z-index:66;
		padding:4px 4px calc(4px + env(safe-area-inset-bottom));
		background:color-mix(in srgb, var(--nuee) 96%, transparent);
		border-top:1px solid var(--bord); backdrop-filter:blur(6px);
		transform:translateY(0); transition:transform .22s ease;
	}
	.nav-app-bas.est-masquee{ transform:translateY(100%); }
	.nav-app-bas__lien{
		flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
		min-height:52px; padding:4px; border:none; background:none; color:var(--encre-2);
		font-family:var(--ff-corps); font-size:10px; font-weight:600; text-decoration:none; cursor:pointer;
	}
	.nav-app-bas__lien svg{ width:22px; height:22px; }
	.nav-app-bas__lien.est-actif{ color:var(--balise); }
	.nav-app-bas__lien--principal{ color:var(--balise); }
	.nav-app-bas__lien--principal svg{ width:26px; height:26px; }
	.pied{ padding-bottom:calc(20px + 68px + env(safe-area-inset-bottom)); } /* place réservée à la barre, en --stratos (fond du pied), plus en body */
}

/* Recette 23/09 : le raccourci padding:32px 0 0 (3 valeurs = haut/HORIZONTAL/bas)
   remettait le padding horizontal à 0, écrasant celui de .conteneur (même
   élément, même règle déclarée après) — l'en-tête se retrouvait à 100 px et
   le corps à 124 px. padding-top seul ne touche plus aux côtés. */
.fiche-tete{ padding-top:32px; }
.fiche-fil{ font-size:12.5px; color:var(--encre-2); margin-bottom:10px; }
.fiche-etiquette{ display:inline-block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:4px 10px; border-radius:999px; margin-bottom:12px; }
.fiche-etiquette--air{ background:color-mix(in srgb, var(--air) 20%, transparent); color:var(--air); }
.fiche-etiquette--eau{ background:color-mix(in srgb, var(--eau) 20%, transparent); color:var(--eau); }
.fiche-etiquette--roche{ background:color-mix(in srgb, var(--roche) 28%, transparent); color:#6b4c30; }
.fiche-titre{ font-size:clamp(28px,4vw,48px); max-width:20ch; }
/* Pas de padding/margin horizontal propre : enfant direct de .fiche-tete
   comme le H1, donc bord gauche identique au pixel près (retour 18/09/2026). */
.fiche-pour-qui{ font-size:14.5px; color:var(--encre-2); margin:10px 0 0; }
.fiche-pour-qui__label{ font-weight:700; color:var(--balise); text-transform:uppercase; font-size:11.5px; letter-spacing:.06em; margin-right:.6em; }
.fiche-chapo{ font-size:20px; color:var(--encre-2); max-width:64ch; margin:14px 0 18px; }

.fiche-auteur-haut{ display:flex; align-items:center; gap:12px; padding:14px 0; border-top:1px solid var(--bord); border-bottom:1px solid var(--bord); margin-bottom:24px; flex-wrap:wrap; }
.avatar-rond{ display:inline-block; width:var(--taille,44px); height:var(--taille,44px); border-radius:999px; overflow:hidden; background:var(--stratos); color:var(--givre); text-align:center; line-height:var(--taille,44px); font-weight:700; flex:none; }
.avatar-rond img{ width:100%; height:100%; object-fit:cover; }
.fiche-auteur-haut__nom{ font-weight:700; }
.fiche-auteur-haut__nom a{ text-decoration:underline; text-decoration-color:var(--balise); text-underline-offset:3px; }
.fiche-auteur-haut__meta{ font-size:12.5px; color:var(--encre-2); }

.fiche-une{ max-height:420px; overflow:hidden; border-radius:var(--rayon-md); margin-bottom:8px; }
.fiche-une img{ width:100%; height:100%; object-fit:cover; }
.fiche-une-legende{ font-size:12px; color:var(--encre-2); margin-bottom:28px; }

.fiche-mise-en-page{ display:grid; grid-template-columns:1fr 300px; gap:48px; align-items:start; }
@media (max-width:960px){ .fiche-mise-en-page{ grid-template-columns:1fr; } }
.fiche-corps{ max-width:720px; font-size:18px; line-height:1.7; }
/* LOT2 #17 (23/09, JUGEMENT-P1) : filet de sécurité pour les encarts
   "Repères chronologiques" / "Checklist" de l'article client festivals
   (styles EN LIGNE posés par la rédaction, en police système sur fond gris
   -- article intouchable, on ne modifie PAS le post_content, seulement le
   rendu via des règles !important qui battent un style= non !important).
   Repasse ces encarts dans l'identité du thème : Gantari, fond nuée, filet
   balise -- sans dépendre des shortcodes [sbs_frise]/[sbs_check] puisqu'on
   ne réécrit pas le contenu. */
.fiche-corps div[style*="font-family:Arial"]{ background:var(--nuee) !important; border:1px solid var(--bord) !important; border-radius:var(--rayon-md) !important; font-family:var(--ff-corps) !important; }
.fiche-corps div[style*="font-family:Arial"] > p:first-child{ font-family:var(--ff-titre) !important; color:var(--encre) !important; text-transform:uppercase; letter-spacing:.02em; font-size:14px !important; }
.fiche-corps div[style*="border-left"]{ border-left-color:var(--balise) !important; }
.fiche-corps div[style*="display:block"]{ border-bottom-color:var(--bord) !important; }
.fiche-corps div[style*="font-family:Arial"] p,
.fiche-corps div[style*="border-left"] p,
.fiche-corps div[style*="display:block"] p{ color:var(--encre) !important; font-family:var(--ff-corps) !important; }
.fiche-corps h2{ font-size:26px; margin-top:2.2em; display:flex; align-items:center; gap:10px; }
.fiche-corps h2::before{ content:''; width:22px; height:2px; background:var(--balise); flex:none; }
.fiche-corps h3{ font-size:20px; margin-top:1.6em; }
/* Recette 24/09 (Mathias, capture iPhone) : l'italique 22px à barre orange
   était « un peu grossier, presque flou ». Carte sobre : texte droit 15,5px/1.6
   couleur du corps, fond blanc, bordure gauche 3px balise, rayon 10px. La 1ʳᵉ
   mention en gras (« Le saviez-vous ? ») devient une étiquette 12px majuscules
   espacées ; une citation (sans étiquette) ouvre sur un guillemet discret ;
   <cite>/<footer> = source en 13px atténué. */
.fiche-corps blockquote{ font-family:var(--ff-corps); font-style:normal; font-size:15.5px; line-height:1.6; color:var(--encre); background:var(--nuee); border:1px solid var(--bord); border-left:3px solid var(--balise); border-radius:10px; padding:14px 16px; margin:1.8em 0; }
.fiche-corps blockquote p{ font-size:inherit; line-height:inherit; margin:0; }
.fiche-corps blockquote p + p{ margin-top:.6em; }
.fiche-corps blockquote > p:first-child > strong:first-child{ display:block; font-family:var(--ff-titre); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--balise); margin-bottom:6px; }
.fiche-corps blockquote:not(:has(> p:first-child > strong:first-child))::before{ content:"\201C"; display:block; font-family:var(--ff-titre); font-size:30px; line-height:.5; color:var(--balise); opacity:.6; margin-bottom:8px; }
.fiche-corps blockquote cite, .fiche-corps blockquote footer{ display:block; font-style:normal; font-size:13px; color:var(--encre-2); margin-top:8px; }
.fiche-corps figure{ margin:1.6em 0; }
.fiche-corps figcaption{ font-size:13px; color:var(--encre-2); margin-top:6px; }

/* Liens sortants du corps (sources citées) : traitement soigné, propre à la
   DA — trait épais couleur balise, jamais un bleu de navigateur par défaut. */
.fiche-corps :where(p, li):not(.admission__item):not(.sommaire__liste li) a{
	color:inherit; font-weight:600;
	text-decoration:underline; text-decoration-color:var(--balise);
	text-decoration-thickness:2px; text-underline-offset:3px;
	transition:background-color .15s, color .15s;
}
.fiche-corps :where(p, li):not(.admission__item):not(.sommaire__liste li) a:hover{
	color:var(--balise); background:color-mix(in srgb, var(--balise) 14%, transparent);
}

.sommaire{ background:var(--nuee); border:1px solid var(--bord); border-radius:var(--rayon-md); padding:16px 18px; margin:24px 0; }
.sommaire summary{ display:flex; align-items:center; justify-content:space-between; cursor:pointer; font-weight:700; list-style:none; }
.sommaire summary::-webkit-details-marker{ display:none; }
.sommaire__compte{ font-size:12px; color:var(--encre-2); font-weight:500; }
/* 24/09 : pastilles numérotées (counter CSS) à la place des « 1. 2. 3. »
   bruts du navigateur -- retour capture iPhone Mathias. Nombre en 2 chiffres
   (decimal-leading-zero), fond --balise (orange du thème), texte blanc.
   .sommaire__lien passe en flex:1 pour un hanging indent propre : le texte
   d'un item sur 2 lignes reste aligné sous lui-même, jamais sous la pastille. */
.sommaire__liste{ list-style:none; padding:0; margin:14px 0 0; display:flex; flex-direction:column; counter-reset:sommaire; }
.sommaire__liste li{ counter-increment:sommaire; display:flex; align-items:flex-start; gap:12px; padding:10px 0; border-bottom:1px solid var(--bord); }
.sommaire__liste li:last-child{ border-bottom:none; }
.sommaire__liste li::before{ content:counter(sommaire,decimal-leading-zero); flex:0 0 24px; width:24px; height:24px; border-radius:50%; background:var(--balise); color:#fff; font-size:11px; font-weight:700; font-family:var(--ff-titre); line-height:24px; text-align:center; }
.sommaire__lien{ flex:1 1 auto; min-width:0; font-size:14px; line-height:1.4; padding-top:2px; }
.sommaire__lien.est-actif{ color:var(--balise); font-weight:700; }

.encart-billet{ background:var(--stratos); color:var(--givre); border-radius:var(--rayon-md); padding:22px; margin:2em 0; text-align:center; }
.encart-billet__accroche{ font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--balise); margin-bottom:6px; }
.encart-billet h3{ color:var(--givre); font-size:19px; margin-bottom:14px; }

.bloc-sources{ background:var(--brume); border-left:4px solid var(--air); border-radius:0 var(--rayon-md) var(--rayon-md) 0; padding:20px 22px; margin:2.4em 0; }
.bloc-sources h2, .bloc-sources__titre{ font-family:var(--ff-titre); font-size:16px; margin-bottom:12px; }
.bloc-sources ol{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; counter-reset:src; }
.bloc-sources li{ font-size:13.5px; counter-increment:src; }
.bloc-sources li::before{ content:'①②③④⑤⑥⑦⑧⑨'; content:counter(src) '. '; font-weight:700; color:var(--balise); }
.bloc-sources em{ font-style:italic; }

.fiche-signature{ background:var(--nuee); border:1px solid var(--bord); border-radius:var(--rayon-md); padding:20px; display:flex; gap:16px; margin:2.6em 0; }
.fiche-signature__corps{ font-size:13.5px; }
.fiche-signature__nom{ font-weight:700; font-size:15px; }
.fiche-signature__role{ color:var(--encre-2); margin-bottom:6px; }
.fiche-signature__lien{ text-decoration:underline; text-decoration-color:var(--balise); }

/* Recette 23/09 : top:88px passait sous l'en-tête collant (101 px) — la
   fiche « Dans cet article » apparaissait coupée en haut. 101 + 16 de marge.
   P2-7 (LOT4) : top:117px est désormais la SEULE valeur, plus jamais
   recalculée en JS (cf. app.js) ; le débordement d'une colonne plus haute
   que l'écran (article client, /parapente-biplace/) se gère en interne par
   défilement propre, jamais en déplaçant la colonne. */
.fiche-sidebar{ position:sticky; top:117px; display:flex; flex-direction:column; gap:20px; max-height:calc(100vh - 133px); overflow-y:auto; }
.fiche-sidebar__bloc{ background:var(--nuee); border:1px solid var(--bord); border-radius:var(--rayon-md); padding:18px; }
.fiche-sidebar__bloc h3{ font-size:14px; text-transform:uppercase; letter-spacing:.04em; margin-bottom:10px; }
/* Sommaire — UNE SEULE instance (RE-0253) : desktop = toujours ouvert, sans
   triangle de repli ; mobile = <details> natif, replié par défaut.
   P2-8 (23/09, JUGEMENT-P2, LOT4) : le sommaire est maintenant son propre
   bloc de grille (.fiche-sommaire-place), plus un sous-élément de
   .fiche-sidebar -- desktop : même colonne que la sidebar (grid-row 1),
   l'encart d'activité juste en dessous (grid-row 2), .fiche-corps occupe
   les 2 rangées de la colonne 1 (visuel desktop inchangé). Mobile : `order`
   place le sommaire juste sous le chapô (AVANT le corps), et .fiche-sidebar
   (l'encart d'activité) EN FIN d'article -- avant ce lot, .fiche-sidebar
   entière (sommaire + encart) remontait au-dessus du corps via order:-1,
   soit ~1000 px avant la 1ʳᵉ phrase de l'article (mesuré sur kayak-ardeche). */
.fiche-sommaire-place{ grid-column:2; grid-row:1; }
.fiche-sidebar{ grid-column:2; grid-row:2; align-self:start; }
/* 24/09 (/beau-site) : sans ces lignes la grille répartissait la hauteur du corps
   sur les 2 rangées -- la barre latérale démarrait ~2 360 px plus bas et, étirée
   sur sa cellule, ne collait jamais. */
@media (min-width:961px){ .fiche-mise-en-page{ grid-template-rows:auto 1fr; } }
.fiche-corps{ grid-column:1; grid-row:1 / span 2; }
.fiche-sommaire-unique summary{ cursor:default; list-style:none; }
.fiche-sommaire-unique summary::-webkit-details-marker{ display:none; }
.fiche-sommaire-unique summary h3{ margin-bottom:0; display:inline; }
@media (max-width:960px){
	/* gap 28 (au lieu des 48 hérités de la grille) : le sommaire replié colle
	   au corps qu'il annonce ; l'encart d'activité en fin d'article garde ses 48. */
	.fiche-mise-en-page{ display:flex; flex-direction:column; gap:28px; }
	/* width:100% : align-items:start hérité de la grille -- replié, le <details>
	   se rétrécissait à la largeur de son titre (243 px sur 345, capture 24/09).
	   margin-top : il touchait presque le visuel d'en-tête (6 px). */
	.fiche-sommaire-place{ order:0; width:100%; margin-top:18px; }
	.fiche-corps{ order:1; max-width:none; }
	.fiche-sidebar{ order:2; position:static; max-height:none; overflow:visible; margin-top:20px; }
	.fiche-sommaire-unique summary{ cursor:pointer; list-style:none; position:relative; padding:6px 28px 6px 0; }
	.fiche-sommaire-unique summary::-webkit-details-marker{ display:none; }
	/* chevron dessiné (2 traits), pas un glyphe : pointe en bas = replié, en haut = déplié */
	.fiche-sommaire-unique summary::after{ content:""; position:absolute; right:6px; top:50%; width:8px; height:8px; border-right:2px solid var(--balise); border-bottom:2px solid var(--balise); transform:translateY(-70%) rotate(45deg); transition:transform .2s ease; }
	.fiche-sommaire-unique[open] summary::after{ transform:translateY(-30%) rotate(-135deg); }
	.fiche-sommaire-unique[open] summary{ margin-bottom:10px; }
	.fiche-sommaire-unique summary h3{ display:inline-block; }
	/* Recette 24/09 (Mathias, capture iPhone) : replié, la carte blanche à gros
	   titre faisait « trop gros bouton, trop moche ». Replié = une seule ligne
	   fine (étiquette 12px espacée, atténuée + chevron balise) entre deux filets,
	   sans carte ; déplié = la carte blanche avec les pastilles 01/02 (inchangée). */
	.fiche-sommaire-unique:not([open]){ background:transparent; border:0; border-top:1px solid var(--bord); border-bottom:1px solid var(--bord); border-radius:0; padding:0; }
	.fiche-sommaire-unique:not([open]) summary{ padding:14px 28px 14px 0; }
	.fiche-sommaire-unique:not([open]) summary h3{ font-size:12px; letter-spacing:.12em; color:var(--encre-2); }
}
.fiche-encart-activite{ display:block; }
.fiche-encart-activite__figure{ display:block; border-radius:14px; overflow:hidden; aspect-ratio:4/3; margin-bottom:10px; }
.fiche-encart-activite__figure img{ display:block; width:100%; height:100%; object-fit:cover; }

.poursuivre__liste, .pages-liees__liste{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.poursuivre__liste a, .pages-liees__liste a{ display:inline-block; padding:8px 14px; border-radius:999px; background:var(--nuee); border:1px solid var(--bord); font-size:13.5px; }
.bloc-transparence{ background:var(--nuee); border:1px solid var(--bord); border-radius:14px; padding:14px 16px; margin-bottom:10px; }
.bloc-transparence summary{ cursor:pointer; font-weight:700; font-size:14px; }

/* =============================================================================
   15. HUB DE RUBRIQUE (category.php) — activité et guides
   ========================================================================== */
.hub-hero{ background:var(--stratos); color:var(--givre); padding:64px 0; }
.hub-hero__grille{ display:grid; grid-template-columns:1.2fr 1fr; gap:32px; align-items:center; }
@media (max-width:860px){ .hub-hero__grille{ grid-template-columns:1fr; } }
.hub-hero__photo{ border-radius:var(--rayon-xl); overflow:hidden; aspect-ratio:4/3; }
.hub-hero__photo img{ width:100%; height:100%; object-fit:cover; }
.hub-hero__titre{ color:var(--givre); font-size:clamp(28px,4vw,44px); text-transform:uppercase; }
.hub-hero__chapo{ font-size:17px; opacity:.9; max-width:52ch; margin-bottom:18px; }
.hub-faq{ margin-top:8px; }
.hub-faq details{ background:var(--nuee); border:1px solid var(--bord); border-radius:14px; padding:14px 16px; margin-bottom:10px; }
.hub-faq summary{ cursor:pointer; font-weight:700; }
/* LOT2 #13 (23/09, JUGEMENT-P1) : FAQ sur 60% de largeur avec du vide à
   droite -- grille 8/12 (FAQ) + 4/12 (encart photo/rappel), pleine largeur
   sous 900px (1 colonne, encart après la FAQ). */
.hub-faq__titre{ margin-bottom:14px; }
.hub-faq-section{ display:grid; grid-template-columns:8fr 4fr; gap:32px; align-items:start; }
@media (max-width:900px){ .hub-faq-section{ grid-template-columns:1fr; } }
.hub-faq-encart{ background:var(--brume); border:1px solid var(--bord); border-radius:var(--rayon-md); padding:20px; display:flex; flex-direction:column; gap:12px; }
.hub-faq-encart__photo{ display:block; border-radius:var(--rayon-md); overflow:hidden; aspect-ratio:4/3; }
.hub-faq-encart__photo img{ width:100%; height:100%; object-fit:cover; }
.hub-faq-encart__texte{ font-size:14px; color:var(--encre-2); margin:0; }
.hub-faq-encart .btn{ align-self:flex-start; }
.hub-sidebar{ display:flex; flex-direction:column; gap:16px; }
.hub-plus-lus{ list-style:none; margin:0; padding:0; counter-reset:pl; }
.hub-plus-lus li{ counter-increment:pl; display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--bord); }
.hub-plus-lus li::before{ content:counter(pl); font-family:var(--ff-titre); font-weight:800; color:var(--balise); font-size:20px; }

/* LOT1#4 (23/09, JUGEMENT-P1) : la courbe de l'expérience, sur le hub, était
   coincée dans .conteneur--lecture (760 px, colonne d'article) au milieu d'une
   bande pleine largeur -- « perdue dans une bande vide ». 8/12 de la largeur
   du conteneur (comme demandé), fond --nuee pour se détacher du --brume de la
   bande (sinon la carte se fond dans le fond et RESSEMBLE à du vide), padding
   de bande réduit (pas de vide de 200 px au-dessus). */
.bande--profil-hub{ padding:36px 0; }
.conteneur--profil-hub{ max-width:calc(var(--conteneur) * 8 / 12); }
.conteneur--profil-hub .sbs-infographie{ background:var(--nuee); box-shadow:var(--ombre); }
@media (max-width:900px){ .conteneur--profil-hub{ max-width:100%; } }

/* LOT1#1 (23/09/2026, JUGEMENT-P1) — actualité, bloc « Une + brèves » (branche
   actualite de category.php). Avant : le conteneur portait un style="display:
   grid;grid-template-columns:1.6fr 1fr" en ligne, qui bat TOUJOURS les media
   queries de classe quelle que soit la largeur d'écran -- la grille restait à
   2 colonnes en 390, la Une tombait à ~190 px et les brèves sortaient de
   l'écran (mesuré : capture de 437 px de large). Classes dédiées : la
   réactivité vit uniquement ici. ui-ux-pro-max invoqué pour ce bloc. */
/* P2-13 (23/09, JUGEMENT-P2, LOT4) : align-items:start laissait la colonne
   des brèves s'arrêter à sa propre hauteur de contenu (272px pour 3 brèves
   réelles -- ce fonds de rubrique n'en a pas 4), 361px plus courte que la
   Une (633px). align-items:stretch fait porter la colonne à la même hauteur
   que la Une ; .actu-breves (ci-dessous) distribue ensuite les brèves
   RÉELLES sur cette hauteur (jamais une brève inventée pour combler). */
.actu-une-grille{ display:grid; grid-template-columns:1.6fr 1fr; gap:40px; align-items:stretch; }
.actu-une{ grid-template-columns:1fr; }
/* La Une empile pastille/titre/chapô/date -- groupés en haut, jamais
   dispersés par le justify-content:space-between hérité de .carte-xl__stratos
   (pensé pour titre+bouton seuls). */
.actu-une .carte-xl__stratos{ justify-content:flex-start; gap:2px; padding:22px 24px; }
.actu-une__photo{ aspect-ratio:16/9; }
.actu-une__titre{ text-transform:none; font-size:22px; display:block; margin-bottom:8px; }
/* LOT2 #20 (23/09, JUGEMENT-P1) : la Une n'avait ni date, ni chapô, ni
   pastille -- ajoutés dans le bandeau stratos de la carte. */
.actu-une__etiquette{ margin-bottom:10px; }
/* P2-14 (23/09, JUGEMENT-P2, LOT4) : le chapô a déjà 24px de padding-inline
   (hérité de .actu-une .carte-xl__stratos), mais sans overflow-wrap un mot
   qui ne trouve pas où couper ignore ce padding et déborde jusqu'au bord de
   la carte (overflow:hidden de .carte-xl coupe alors en plein mot -- "dans
   le…", "qu'il f…", mesuré à 390). overflow-wrap:anywhere force la coupure
   à l'intérieur du padding, jamais au-delà. */
.actu-une__chapo{ display:block; font-size:14.5px; opacity:.85; margin-bottom:10px; line-height:1.5; overflow-wrap:anywhere; }
.actu-une__date{ display:block; font-size:12px; opacity:.7; text-transform:uppercase; letter-spacing:.04em; }
/* LOT2 #20 : vignette 120px en 3:2 (au lieu de 80px carrée), rubrique
   ajoutée sur chaque brève -- lignes compactes, gap fixe, jamais de grand
   vide vertical entre 2 brèves (hauteur pilotée par align-items:center +
   contenu, aucune valeur laissée à l'implicite). */
.actu-breves{ display:flex; flex-direction:column; justify-content:space-between; gap:16px; }
.actu-breve{ display:flex; gap:14px; align-items:center; }
.actu-breve__figure{ width:120px; aspect-ratio:3/2; flex:none; margin:0; }
.actu-breve__texte{ display:flex; flex-direction:column; gap:3px; min-width:0; justify-content:center; }
.actu-breve__rubrique{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.actu-breve__rubrique--air{ color:var(--air); } .actu-breve__rubrique--eau{ color:var(--eau); } .actu-breve__rubrique--roche{ color:#6b4c30; }
.actu-breve__titre{ font-size:14.5px; margin:0; line-height:1.3; }
.actu-breve__date{ font-size:11.5px; }
/* LOT2 #20 : hero de l'actualité en fond de ciel (DA §0bis.1) au lieu du
   stratos uni -- voile stratos semi-opaque pour garder le texte lisible. */
.hub-hero--ciel{ background-size:cover; background-position:center; position:relative; }
.hub-hero--ciel::before{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,26,46,.72), rgba(11,26,46,.85)); }
.hub-hero--ciel .conteneur{ position:relative; z-index:1; }
@media (max-width:800px){
	/* Spéc JUGEMENT-P1 #1 : sous 800 px, 1 seule colonne -- Une pleine largeur
	   (photo 16:9, titre dessous en 26 px), puis les brèves en liste (vignette
	   96 px carrée + titre + date), sans overflow masqué. */
	.actu-une-grille{ grid-template-columns:1fr; gap:24px; }
	.actu-une__titre{ font-size:26px; }
	.actu-breve__figure{ width:96px; }
	.actu-breve__titre{ font-size:15px; }
}

/* =============================================================================
   16. PAGE /carte/ — carte collante à gauche, liste défilante à droite
   ========================================================================== */
/* Hero travaillé, fond clair (retour du 18/09/2026) — la carte plein écran
   garde son propre écran juste en dessous, sans hero photo ni fond sombre. */
.page-carte-hero{ background:var(--brume); padding:44px 0 32px; }
.page-carte-hero h1{ font-size:clamp(26px,3vw,38px); max-width:22ch; margin:10px 0 12px; }
.page-carte-hero__chapo{ font-size:15.5px; color:var(--encre-2); max-width:70ch; }

.page-carte-ecran{ display:grid; grid-template-columns:1fr 420px; gap:0; align-items:stretch; }
@media (max-width:960px){ .page-carte-ecran{ grid-template-columns:1fr; } }
.page-carte__carte{ position:sticky; top:0; height:calc(100vh - 78px); background:var(--brume); }
@media (max-width:960px){ .page-carte__carte{ position:relative; height:55vh; top:0; } }
.page-carte__carte .carte-france{ height:100%; aspect-ratio:auto; padding:24px; }
/* Correction #27 (JUGEMENT-P1, 23/09) : les filtres (calqués sur la carte en
   position:absolute) démarraient à x=16px alors que le H1 du hero, lui dans
   .conteneur, démarre au bord du conteneur (mesuré x=86) — repositionnés sur
   ce même bord dès que la carte a la place d'un conteneur centré. En dessous
   de 961px, la carte redevient une bande pleine largeur (voir règle
   .page-carte__carte ci-dessus) : left:16px reste le bon repère. */
.filtre-milieu--carte{ position:absolute; top:16px; left:16px; z-index:3; }
@media (min-width:961px){ .filtre-milieu--carte{ left:max(16px, calc((100vw - var(--conteneur)) / 2 + var(--gouttiere))); } }
/* padding-bottom porté à 48px (retour "liste coupée net sur le pied") : la
   dernière carte de la liste respire avant la bande qui suit. */
.page-carte__liste{ height:calc(100vh - 78px); overflow-y:auto; background:var(--nuee); padding:20px 20px 48px; border-left:1px solid var(--bord); }
@media (max-width:960px){ .page-carte__liste{ height:auto; max-height:36vh; overflow:hidden; border-left:none; border-top:1px solid var(--bord); border-radius:20px 20px 0 0; margin-top:-20px; position:relative; transition:max-height .25s; } .page-carte__liste.est-deployee{ max-height:70vh; overflow-y:auto; } .page-carte__poignee{ display:block !important; width:40px; height:4px; border-radius:999px; background:var(--bord); border:none; margin:0 auto 10px; padding:0; font-size:0; } }
.page-carte__filtres{ position:sticky; top:0; background:var(--nuee); padding-bottom:12px; z-index:2; }
.carte-region-liste{ display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.carte-region{ display:flex; align-items:center; justify-content:space-between; padding:8px 10px; border-radius:10px; font-size:13.5px; cursor:pointer; }
.carte-region.est-survolee, .carte-region:hover{ background:var(--brume); }
.carte-region.est-actif{ border-left:3px solid var(--balise); padding-left:7px; font-weight:700; } /* venue d'une ancre #region- du pied (23/09) */
.liste-spots{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.liste-spots__item{ display:flex; gap:12px; padding:12px; border:1px solid var(--bord); border-radius:14px; }
/* Vignette 64 px (P3.5, 23/09) — remplace le rond de code, chaque fiche de
   liste montre une vraie photo. */
.liste-spots__vignette{ width:64px; height:64px; border-radius:14px; overflow:hidden; flex:none; background:var(--brume); display:flex; align-items:center; justify-content:center; }
.liste-spots__vignette img{ width:100%; height:100%; object-fit:cover; display:block; }
/* LOT2 #18 (23/09, JUGEMENT-P1) : relevé sans fiche propre -- picto du
   milieu (voile/goutte/prise), blanc, sur disque plein de la couleur du
   milieu (même langage que les épingles de la carte), au lieu d'une photo
   générique répétée. */
.liste-spots__vignette--air{ background:var(--air); }
.liste-spots__vignette--eau{ background:var(--eau); }
.liste-spots__vignette--roche{ background:var(--roche); }
.liste-spots__picto{ width:28px; height:28px; color:#fff; }
.liste-spots__titre{ font-weight:700; font-size:14.5px; }
.liste-spots__meta{ font-size:12px; color:var(--encre-2); }

/* =============================================================================
   17. PAGE ACTIVITÉ + VILLE (page-spot.php) — la page à leads
   ========================================================================== */
/* Recette 23/09 (BLOQUANT #6) : l'ancienne grille .spot-ecran ne couvrait que
   le premier écran (H1+photo) — le billet, collant DANS cette grille, n'avait
   donc que cette hauteur pour "suivre" le défilement, laissant ~3000 px de
   vide à côté du reste de la page (fiche lieu, corps, carte, FAQ). La grille
   .spot-ecran-global couvre maintenant TOUT le corps de la page. */
/* P2-9 (23/09, JUGEMENT-P2, LOT4) : "7fr 5fr" mesurait 574px/634px au lieu de
   ~704/504 -- le billet (5fr) est PLUS LARGE que le corps (7fr), inversé.
   Cause racine : par défaut, une piste de grille ne rétrécit jamais sous le
   min-content de son contenu (min-width:auto implicite) ; le billet de vol
   (labels + champs) a un min-content large qui a mangé la part du corps
   avant même la répartition des fr. minmax(0,…) autorise chaque piste à
   descendre sous son min-content -- la répartition 7:5 s'applique enfin
   réellement (~704px/504px), et le mur de texte à 574px de large disparaît. */
.spot-ecran-global{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:32px; align-items:start; padding:32px 0; }
/* LOT C1 (23/09) : placement EXPLICITE desktop -- hero (row 1, col 1) et le
   reste du corps (row 2, col 1) empilés à gauche ; le formulaire (col 2)
   s'étire sur les 2 rangées pour rester collant sur toute la hauteur, EXACTEMENT
   comme avant (visuel desktop inchangé), mais sans dépendre de l'ordre DOM. */
.spot-hero{ grid-column:1; grid-row:1; min-width:0; }
.spot-colonne-corps{ grid-column:1; grid-row:2; min-width:0; }
.spot-formulaire{ grid-column:2; grid-row:1 / span 2; position:sticky; top:117px; align-self:start; }
@media (max-width:960px){
	.spot-ecran-global{ grid-template-columns:1fr; }
	/* En 1 colonne, l'ordre visuel redevient l'ordre du DOM (hero → formulaire
	   → reste) : le billet suit directement le hero/chapô au lieu d'être en
	   bas de page (page-ville-CONSTAT ROUGE#1, ex-top=6180px). */
	.spot-hero, .spot-colonne-corps, .spot-formulaire{ grid-column:auto; grid-row:auto; }
	.spot-formulaire{ position:static; margin-bottom:20px; }
}
/* P6.3 (23/09) — corrigé par C1 (page-ville-CONSTAT ROUGE#1) : l'ancien ordre
   DOM (colonne corps, PUIS billet) plaçait le formulaire après ~6180px de
   contenu en mobile. Le DOM est maintenant hero → formulaire → reste (voir
   règle .spot-formulaire{position:static} au-dessus, dans le même media
   query que le reset grid-column/grid-row). */
.spot-photo{ border-radius:var(--rayon-xl); overflow:hidden; aspect-ratio:16/9; position:relative; margin-bottom:16px; }
.spot-photo img{ width:100%; height:100%; object-fit:cover; }
.spot-photo__cote{ position:absolute; top:14px; left:14px; background:rgba(11,36,66,.75); color:var(--givre); font-family:var(--ff-titre); font-weight:800; padding:6px 12px; border-radius:999px; }
.spot-atouts{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0; }
/* Coches de réassurance : couleur/fond explicites (pas d'héritage), lisibles
   clair ET sombre — retour du 18/09/2026. */
.spot-atouts li{
	display:flex; align-items:center; gap:7px; list-style:none; padding:6px 12px 6px 8px;
	border-radius:999px; background:var(--nuee); border:1px solid var(--bord);
	color:var(--encre); font-size:12.5px; font-weight:600;
}
.spot-atouts__coche{ width:16px; height:16px; border-radius:999px; background:var(--balise); flex:none; position:relative; }
.spot-atouts__coche::after{
	content:''; position:absolute; left:4px; top:6px; width:7px; height:4px;
	border-left:2px solid var(--stratos); border-bottom:2px solid var(--stratos); transform:rotate(-45deg);
}

/* Section libérée par le formulaire (désormais dans le hero) : mini-carte
   locale + lieux proches réels, jamais un bouton isolé avec du vide autour
   (retour du 18/09/2026).
   P2-6 (LOT4) : ces blocs sont sortis de .spot-colonne-corps (colonne 7fr =
   574 px réels -- carte à 318 px, "un mot par ligne") ET sortis de la grille
   .spot-ecran-global elle-même (plus grid-column:1/-1 à l'intérieur) : posés
   là, ils partageaient encore le rectangle de contrainte "sticky" du billet
   (.spot-formulaire, grid-row:1/span 2) -- mesuré en ligne, le billet restait
   épinglé à top:117 même 4000 px plus bas, en chevauchement sur "Autres
   villes". En dehors de la grille (nouveau conteneur propre dans
   page-spot.php), pleine largeur simple, aucune ambiguïté de conteneur. */
.spot-carte-locale{ display:grid; grid-template-columns:7fr 5fr; gap:28px; align-items:start; margin:2.4em 0; }
@media (max-width:900px){ .spot-carte-locale{ grid-template-columns:1fr; } }
.spot-carte-locale__aside{ background:var(--nuee); border:1px solid var(--bord); border-radius:var(--rayon-md); padding:20px; }
/* Grille de cartes photo « Autres villes » (P2-6) : remplace l'ancienne
   liste de liens texte compressée dans une aside de 150/227 px. */
.spot-villes-proches{ margin:1em 0 2.4em; }
.spot-villes-proches__grille{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:14px 0 20px; }
@media (max-width:960px){ .spot-villes-proches__grille{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .spot-villes-proches__grille{ grid-template-columns:1fr; } }
.carte-ville-proche{ display:flex; flex-direction:column; border:1px solid var(--bord); border-radius:var(--rayon-md); overflow:hidden; text-decoration:none; color:var(--encre); background:var(--nuee); }
.carte-ville-proche__photo{ position:relative; aspect-ratio:4/3; background:var(--brume); display:block; }
.carte-ville-proche__photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.carte-ville-proche__photo .liste-spots__picto{ position:absolute; inset:0; margin:auto; }
.carte-ville-proche__corps{ padding:12px 14px; display:flex; flex-direction:column; gap:2px; }
.carte-ville-proche__nom{ font-size:14.5px; font-weight:700; }
.carte-ville-proche__lieu{ font-size:12px; color:var(--encre-2); }
.carte-ville-proche:hover .carte-ville-proche__nom{ color:var(--balise); }
.carte-spot{ background:var(--nuee); border:1px solid var(--bord); border-radius:var(--rayon-md); display:grid; grid-template-columns:1fr 1fr; overflow:hidden; }
@media (max-width:640px){ .carte-spot{ grid-template-columns:1fr; } }
.carte-spot__svg{ width:100%; aspect-ratio:6/5.8; background:var(--brume); }
.carte-spot .terre{ fill:var(--brume); stroke:var(--bord); }
.carte-spot .terre--active{ fill:color-mix(in srgb, var(--stratos) 18%, var(--brume)); }
.carte-spot__autre circle{ fill:var(--encre-2); opacity:.5; }
.carte-spot__halo{ fill:color-mix(in srgb, var(--balise) 25%, transparent); }
.carte-spot__disque{ fill:var(--balise); stroke:var(--stratos); stroke-width:2; }
.carte-spot__legende{ padding:20px; }
.carte-spot__ville{ font-family:var(--ff-titre); font-weight:800; font-size:20px; }
.carte-spot__region{ font-size:13px; color:var(--encre-2); }
.lien-carte{ text-decoration:underline; text-decoration-color:var(--balise); font-weight:600; }
.villes-proches{ margin-top:32px; }

/* =============================================================================
   18. PAGE CONTACT — refaite LOT D1 (23/09/2026) : H1 + promesse courte au-
   dessus d'un vrai formulaire de contact (plus le billet de vol). Reste au
   plus près du principe "sans défilement" (grille Mathias CO-007) : en-tête
   compacte, formulaire condensé sur mobile.
   ========================================================================== */
.contact-ecran{ min-height:calc(100vh - 78px); display:flex; flex-direction:column; justify-content:center; gap:20px; padding:32px 0; }
.contact-entete{ max-width:640px; }
.contact-entete h1{ font-size:clamp(26px,3.4vw,38px); margin-bottom:8px; }
.contact-entete__promesse{ font-size:15px; color:var(--encre-2); margin:0; }
/* P2-21 (23/09, JUGEMENT-P2, LOT4) : même piège qu'en P2-9 -- une piste de
   grille ne rétrécit jamais sous le min-content de son contenu par défaut.
   La carte stratos (.contact-carte, texte + photo) avait un min-content plus
   large que sa part de .9fr, et débordait le conteneur de 16px à droite.
   minmax(0,…) autorise la piste à respecter réellement sa fraction. */
.contact-grille{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:32px; align-items:stretch; width:100%; }
@media (max-width:900px){ .contact-grille{ grid-template-columns:1fr; } .contact-ecran{ min-height:auto; } }
.contact-carte{ background:var(--stratos); color:var(--givre); border-radius:var(--rayon-xl); padding:28px; display:flex; flex-direction:column; gap:14px; }
.contact-carte h2{ color:var(--givre); }
.contact-carte__ligne{ font-size:14px; opacity:.9; }
.contact-carte__photo{ border-radius:16px; overflow:hidden; aspect-ratio:16/9; margin-top:auto; }
.contact-carte__photo img{ width:100%; height:100%; object-fit:cover; }

/* Le vrai formulaire de contact (D1) : même carte visuelle que le billet de
   vol (nuee, rayon-xl, ombre) mais sans talon -- ce n'est pas une réservation. */
.formcontact{ background:var(--nuee); border-radius:var(--rayon-xl); box-shadow:var(--ombre); border:1px solid var(--bord); }
.formcontact__form{ padding:26px 28px; }
.formcontact__titre{ font-size:22px; margin-bottom:16px; color:var(--encre); }
.formcontact__message{ min-height:110px; resize:vertical; font-family:var(--ff-corps); }

/* Mobile : SANS défilement (RE-0143) — aucun bloc secondaire, formulaire
   compact (retour du 18/09/2026). La carte de coordonnées ne s'affiche
   qu'à partir de 901 px, où il y a la place. */
@media (max-width:900px){
	.contact-carte{ display:none; }
	.contact-ecran{ padding:14px 0; gap:12px; }
	.contact-entete h1{ font-size:22px; margin-bottom:4px; }
	.contact-entete__promesse{ font-size:13px; }
	.contact-ecran .formcontact{ box-shadow:none; }
	.contact-ecran .formcontact__form{ padding:16px 18px; }
	.contact-ecran .formcontact__titre{ font-size:17px; margin-bottom:10px; }
	.contact-ecran .formcontact__message{ min-height:72px; }
	.contact-ecran .billet__grille{ grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px; }
	.contact-ecran .billet__label{ font-size:11px; gap:3px; }
	.contact-ecran .billet__saisie{ padding:7px 9px; font-size:13px; }
	.contact-ecran .billet__bouton{ padding:10px; font-size:14px; }
	.contact-ecran .billet__delai{ font-size:11px; margin-top:6px; }
	.contact-ecran .billet__rgpd{ font-size:10px; margin-top:4px; }
	/* Le pied plein (4 colonnes de nav) fait à lui seul plus de 1000 px : sur
	   CETTE page précise, mobile seulement, on ne garde que la barre du bas. */
	body.page-template-page-contact-php .pied__grille{ display:none; }
	body.page-template-page-contact-php .pied{ padding:14px 0; }
}

/* =============================================================================
   19. MÉTHODE / À PROPOS / CONFIDENTIALITÉ / AUTEUR
   ========================================================================== */
.page-hero-photo{ position:relative; min-height:46vh; display:flex; align-items:flex-end; color:var(--givre); }
.page-hero-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.page-hero-photo::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(11,36,66,.1),rgba(11,36,66,.82)); }
.page-hero-photo__corps{ position:relative; z-index:1; padding:56px var(--gouttiere); max-width:var(--conteneur); margin:0 auto; }
.page-hero-photo__titre{ color:var(--givre); font-size:clamp(28px,4vw,48px); max-width:22ch; }

.page-hero-service{ background:var(--brume); padding:48px 0; }
.page-hero-service__titre{ font-size:clamp(24px,3.4vw,36px); }
.page-hero-service__maj{ font-size:13px; color:var(--encre-2); }

.page-service-corps{ display:grid; grid-template-columns:1fr 220px; gap:40px; padding:40px 0 60px; max-width:1040px; margin:0 auto; }
@media (max-width:820px){ .page-service-corps{ grid-template-columns:1fr; } }
.page-service-texte{ max-width:760px; font-size:17px; line-height:1.7; }
.page-service-texte h2{ font-size:22px; margin-top:1.6em; }
.page-service-sommaire{ position:sticky; top:88px; font-size:13px; }
.page-service-sommaire a{ display:block; padding:6px 0; color:var(--encre-2); }

.equipe-grille{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:767px){ .equipe-grille{ grid-template-columns:1fr; } }
.carte-auteur{ background:var(--nuee); border:1px solid var(--bord); border-radius:var(--rayon-md); padding:20px; text-align:center; }
.carte-auteur .avatar-rond{ margin:0 auto 12px; }
.carte-auteur__role{ font-size:12.5px; color:var(--encre-2); margin-bottom:8px; }
.carte-auteur__etiquettes{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-bottom:10px; }

.tuiles-pictos{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:767px){ .tuiles-pictos{ grid-template-columns:1fr; } }
.tuile-picto{ background:var(--nuee); border:1px solid var(--bord); border-radius:var(--rayon-md); padding:20px; }

.page-auteur-tete{ display:flex; gap:20px; align-items:center; padding:40px 0; }
.page-auteur-tete .avatar-rond{ width:120px; height:120px; }

/* 404 */
.page-404{ min-height:60vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:16px; padding:60px var(--gouttiere); }

/* =============================================================================
   20. GARDE-FOU MOBILE — aucun débordement horizontal à 390 px
   ========================================================================== */
@media (max-width:480px){
	.grille-cartes, .grille-cartes--2col, .equipe-grille, .tuiles-pictos{ grid-template-columns:1fr; }
	/* Les 4 chiffres restent en grille 2×2 compacte à 390 px, jamais empilés en 4 gros blocs (retour 18/09/2026). */
	.tuiles-chiffres__grille{ grid-template-columns:repeat(2,1fr); gap:12px; }
	.tuiles-chiffres__grille .tuile-chiffre{ padding:16px; }
	/* Correction #26 (JUGEMENT-P1, 23/09) : les 5 pictos de réassurance
	   s'empilaient en 1 colonne sur ~800px de haut. 2 colonnes, picto au-dessus
	   du libellé (inchangé, .reassurance__item est déjà agencé ainsi). */
	.reassurance__grille{ grid-template-columns:repeat(2,1fr); gap:16px; }
	.fiche-mise-en-page, .spot-ecran-global, .contact-grille, .page-service-corps, .hub-hero__grille{ grid-template-columns:1fr; }
	.hero__titre{ max-width:100%; }
}
/* overflow-x:clip (et pas hidden) : hidden autorise encore un scroll programmatique/
   scroll-into-view sur iOS Safari, mesuré comme cause du débordement 390→1896px
   du 18/09/2026 ; clip l'interdit réellement. */
html, body{ max-width:100%; overflow-x:clip; }
table, .sbs_tableau{ max-width:100%; }
.sbs_tableau{ overflow-x:auto; border-radius:12px; }

/* =============================================================================
   21. SURCHARGE — bloc « Sources citées » (composant socle, mu-plugin serveur,
   classe sbsrc-9ad3a49d IDENTIQUE sur les 48 articles) — R-0880 / R-0463, 23/09/2026.
   On ne touche JAMAIS au mu-plugin partagé du parc (theme/ seulement, cf. consigne
   Mathias) : tout se corrige ici, en surcharge CSS.
   Piège de cascade (documenté dans le <style> inline du mu-plugin lui-même) :
   son <style> est imprimé dans le <head> APRÈS le <link> de style.css, et il double
   déjà ses propres classes (.x.x, spécificité 0,2,0) pour battre les règles
   génériques de liste du thème. Pour le battre à notre tour de façon durable (et
   pas dépendante de l'ordre de sortie du <head>), on triple la classe (0,3,0) et on
   verrouille avec !important sur les seules propriétés visuelles concernées —
   rien d'autre n'est touché (mise en page interne du mu-plugin, compteur CSS, etc.).
   Cause du marron plat : l'en-tête utilisait var(--roche,#12101A) — --roche EXISTE
   dans ce thème (#A88A6E, granite chaud, réservé au milieu ROCHE) donc son propre
   repli sombre ne s'appliquait jamais : d'où le marron. Cause du vert fluo : les
   pastilles utilisaient var(--fluo,#BFE514) — --fluo n'existe nulle part dans ce
   thème (jeton de l'ancienne DA v2, caduque) donc c'est le repli codé en dur qui
   s'affichait toujours. On ne redéfinit PAS --roche ni --fluo en :root (--roche a
   un vrai sens ailleurs sur le site, --fluo ne doit pas ressusciter) : on fixe les
   couleurs directement sur les deux sélecteurs concernés. */
.sbsrc-9ad3a49d.sbsrc-9ad3a49d.sbsrc-9ad3a49d{
	background:var(--brume) !important;
	border-color:var(--bord) !important;
	max-height:none !important;
	overflow:visible !important;
}
.sbsrc-9ad3a49d__titre.sbsrc-9ad3a49d__titre.sbsrc-9ad3a49d__titre{
	background:var(--stratos) !important;
	color:var(--givre) !important;
	font-family:var(--ff-titre) !important;
	font-weight:600 !important;
	font-size:15px !important;
}
/* Date alignée à droite sur la MÊME ligne que le nom, quelle que soit sa longueur :
   flex-wrap:nowrap sur la ligne (le mu-plugin la mettait en wrap, ce qui renvoyait
   la date au-dessous dès que le nom dépassait) ; le nom se déroule sur sa propre
   largeur (min-width:0, pas de wrap forcé du côté flex) et la date reste figée à
   droite, jamais coupée (repère UX : label flexible min-width:0 + valeur bornée
   nowrap, jamais l'inverse). */
.sbsrc-9ad3a49d__item.sbsrc-9ad3a49d__item.sbsrc-9ad3a49d__item{
	flex-wrap:nowrap !important;
	align-items:flex-start !important;
	gap:.3em 16px !important;
	border-bottom-color:var(--bord) !important;
}
.sbsrc-9ad3a49d__item.sbsrc-9ad3a49d__item.sbsrc-9ad3a49d__item .sbsrc-9ad3a49d__nom{
	flex:1 1 auto !important;
	min-width:0 !important;
}
.sbsrc-9ad3a49d__item.sbsrc-9ad3a49d__item.sbsrc-9ad3a49d__item::before{
	background:var(--balise) !important;
	color:var(--stratos) !important;
	font-family:var(--ff-titre) !important;
}
.sbsrc-9ad3a49d__nom{ color:var(--encre) !important; }
.sbsrc-9ad3a49d__date{
	color:var(--encre-2) !important;
	flex:0 0 auto !important;
	white-space:nowrap !important;
}
/* 390 : le mu-plugin repasse déjà en colonne (flex-direction:column) sous 480 px —
   on garde ce comportement (demandé par Mathias : date sous le titre) mais on force
   l'alignement à gauche de façon régulière (align-items déjà flex-start côté
   mu-plugin ; on le sécurise ici au cas où notre flex-wrap:nowrap ci-dessus le
   contredirait à ce palier). */
@media (max-width:480px){
	.sbsrc-9ad3a49d__item.sbsrc-9ad3a49d__item.sbsrc-9ad3a49d__item{
		flex-direction:column !important;
		align-items:flex-start !important;
		gap:.25em !important;
	}
}


/* 23/09 recette : bandeau de rubrique sans photo = une seule colonne, jamais une moitié vide (R-0613) */
.hub-hero__grille:not(:has(.hub-hero__photo)){ grid-template-columns:1fr; max-width:820px; }

/* R-0491/R-0510 (24/09, /beau-site) : billet compact dans la barre latérale
   collante des articles -- une colonne, sans talon photo, champs courts par
   deux ; l'encart d'activité perd sa photo pour que l'ensemble tienne dans
   un écran de 900 px sans défilement interne (R-0484). */
.fiche-sidebar .billet{ grid-template-columns:minmax(0,1fr); border-radius:var(--rayon-md); box-shadow:none; }
.fiche-sidebar .billet__talon{ display:none; }
.fiche-sidebar .billet__form{ padding:18px; }
.fiche-sidebar .billet__titre{ font-size:17px; line-height:1.25; margin-bottom:12px; }
.fiche-sidebar .billet__grille{ gap:8px 10px; margin-bottom:12px; }
.fiche-sidebar .billet__label{ font-size:12px; gap:4px; grid-column:1/-1; }
.fiche-sidebar .billet__label:nth-child(3), .fiche-sidebar .billet__label:nth-child(4),
.fiche-sidebar .billet__label:nth-child(6), .fiche-sidebar .billet__label:nth-child(7){ grid-column:auto; }
.fiche-sidebar .billet__saisie{ padding:9px 10px; font-size:14px; }
.fiche-sidebar .billet__delai{ margin-top:8px; }
.fiche-sidebar .fiche-encart-activite__figure{ display:none; }
.fiche-sidebar{ gap:14px; }
@media (max-width:1100px){
	.fiche-sidebar .billet__talon{ display:none; }
	.fiche-sidebar .fiche-encart-activite__figure{ display:block; }
}

/* R-1063 (24/09, Mathias) : sur les pages villes le billet fait ~500 px, talon
   compris -- à deux champs par ligne, le select « Saut en para… » se tronquait.
   Talon aminci ; activité, ville, nom et e-mail en pleine largeur, seuls
   date + passagers (valeurs courtes) restent côte à côte. */
@media (min-width:961px){
	.spot-formulaire .billet{ grid-template-columns:130px minmax(0,1fr); }
	.spot-formulaire .billet__form{ padding:24px 24px; }
	.spot-formulaire .billet__label{ grid-column:1/-1; }
	.spot-formulaire .billet__label:nth-child(3), .spot-formulaire .billet__label:nth-child(4){ grid-column:auto; }
	.spot-formulaire .billet__grille{ gap:10px 12px; }
	.spot-formulaire .billet__talon-cote{ white-space:normal; text-align:center; }
}

/* R-1064 (24/09, Mathias, récidive AR-059) : le corps était bridé à 720 px dans
   une colonne de 844 px -- 172 px de vide avant la barre latérale. La colonne
   texte prend désormais la largeur du texte, la barre latérale le reste. */
@media (min-width:961px){
	.fiche-mise-en-page{ grid-template-columns:minmax(0,780px) minmax(300px,1fr); column-gap:40px; }
	.fiche-corps{ max-width:780px; }
	.fiche-sidebar, .fiche-sommaire-place{ max-width:400px; }
}

/* R-1065 (24/09) : barre latérale des actus -- encart avec photo, fil daté, guides en vignettes. */
.fiche-sidebar--actu .fiche-encart-activite__figure{ display:block; }
.fiche-fil__liste{ list-style:none; margin:0; padding:0; }
.fiche-fil__liste li{ border-bottom:1px solid var(--bord); }
.fiche-fil__liste li:last-child{ border-bottom:0; }
.fiche-fil__liste a{ display:flex; flex-direction:column; gap:3px; padding:10px 0; color:var(--encre); text-decoration:none; font-weight:600; font-size:14.5px; line-height:1.35; }
.fiche-fil__liste a:hover span{ color:var(--stratos); text-decoration:underline; text-underline-offset:3px; }
.fiche-fil__liste time{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#B84A0E; }
.fiche-guides__item{ display:grid; grid-template-columns:64px minmax(0,1fr); gap:12px; align-items:center; padding:8px 0; color:var(--encre); text-decoration:none; font-weight:600; font-size:14px; line-height:1.35; border-bottom:1px solid var(--bord); }
.fiche-guides__item:last-child{ border-bottom:0; }
.fiche-guides__vignette img{ width:64px; height:64px; object-fit:cover; border-radius:10px; display:block; }
.fiche-guides__item:hover .fiche-guides__titre{ text-decoration:underline; text-underline-offset:3px; }
/* R-0484 : la barre d'actu ne défile jamais en interne -- compacte, et sans ascenseur. */
.fiche-sidebar--actu{ max-height:none; overflow:visible; }
.fiche-sidebar--actu .fiche-encart-activite__figure{ height:150px; aspect-ratio:auto; overflow:hidden; }
.fiche-sidebar--actu .fiche-encart-activite__figure img{ height:100%; width:100%; object-fit:cover; }

/* ==========================================================================
   LI-0168 (25/09/2026, Mathias, article Doppio) : EN-TÊTE D'ARTICLE refait.
   Avant : H1 48 px sur 4-5 lignes calé à gauche (vide à droite), surtitre qui
   répétait le fil d'Ariane, auteur entre deux filets, image 420 px pleine
   largeur -> 1er paragraphe à 1 088 px pour un écran de 900.
   Après : texte à gauche / image à droite, bords haut et bas alignés ; taille
   du H1 selon la longueur du titre (2-3 lignes) ; rubrique = pastille DANS le
   fil ; auteur sans filets. Limité à .fiche-tete--article (page-spot inchangée).
   ========================================================================== */
.fiche-tete--article{ padding-top:26px; padding-bottom:40px; }
.fiche-tete--article.fiche-tete--avec-une{ display:grid; grid-template-columns:minmax(0,1fr); gap:22px; }
.fiche-tete--article .fiche-tete__texte{ min-width:0; display:flex; flex-direction:column; }
.fiche-tete--article .fiche-fil{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:13px; margin:0 0 18px; }
.fiche-tete--article .fiche-fil a{ color:var(--encre-2); text-decoration:none; }
.fiche-tete--article .fiche-fil a:hover{ color:var(--encre); text-decoration:underline; text-underline-offset:3px; }
.fiche-tete--article .fiche-fil__sep{ color:var(--encre-2); }
.fiche-tete--article .fiche-fil .fiche-fil__rubrique{ display:inline-flex; align-items:center; gap:8px; padding:5px 13px 5px 10px; border-radius:var(--rayon-pill); background:var(--nuee); border:1px solid var(--bord); color:var(--encre); font-weight:700; font-size:11.5px; line-height:1.3; text-transform:uppercase; letter-spacing:.07em; }
.fiche-tete--article .fiche-fil .fiche-fil__rubrique:hover{ text-decoration:none; border-color:var(--balise); }
.fiche-fil__rubrique::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--pastille, var(--balise)); flex:none; }
.fiche-fil__rubrique--air{ --pastille:var(--air); }
.fiche-fil__rubrique--eau{ --pastille:var(--eau); }
.fiche-fil__rubrique--roche{ --pastille:var(--roche); }
.fiche-tete--article .fiche-titre{ font-size:clamp(28px,3vw,44px); line-height:1.12; letter-spacing:-.01em; max-width:none; margin:0 0 14px; text-wrap:balance; }
.fiche-tete--article .fiche-titre--moyen{ font-size:clamp(27px,2.75vw,40px); }
.fiche-tete--article .fiche-titre--long{ font-size:clamp(26px,2.45vw,36px); }
.fiche-tete--article .fiche-titre--tres-long{ font-size:clamp(25px,2.2vw,32px); }
.fiche-tete--article .fiche-pour-qui{ margin:0 0 10px; }
.fiche-tete--article .fiche-chapo{ font-size:18px; line-height:1.6; max-width:62ch; margin:0 0 22px; }
.fiche-tete--article .fiche-auteur-haut{ border:0; padding:0; margin:0; gap:12px; flex-wrap:nowrap; }
.fiche-tete--article .fiche-auteur-haut__nom{ margin:0; line-height:1.3; }
.fiche-tete--article .fiche-auteur-haut__meta{ margin:2px 0 0; font-size:13px; }
.fiche-tete--article .fiche-une{ position:relative; margin:0; max-height:none; aspect-ratio:16/9; border-radius:var(--rayon-xl); overflow:hidden; background:var(--stratos); box-shadow:var(--ombre); }
.fiche-tete--article .fiche-une img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.fiche-tete--article .fiche-une-legende{ position:absolute; left:14px; bottom:14px; right:auto; max-width:calc(100% - 28px); margin:0; padding:6px 12px; border-radius:var(--rayon-pill); background:rgba(255,255,255,.94); color:var(--encre); font-size:12px; font-weight:600; line-height:1.3; }
@media (min-width:961px){
	.fiche-tete--article{ padding-top:30px; padding-bottom:44px; }
	.fiche-tete--article.fiche-tete--avec-une{ grid-template-columns:minmax(0,1.32fr) minmax(0,1fr); column-gap:48px; align-items:stretch; }
	.fiche-tete--article .fiche-tete__texte{ justify-content:center; padding:4px 0; }
	.fiche-tete--article .fiche-une{ aspect-ratio:auto; height:100%; min-height:320px; max-height:480px; }
}
@media (max-width:960px){
	.fiche-tete--article{ padding-top:16px; padding-bottom:22px; }
	.fiche-tete--article.fiche-tete--avec-une{ gap:18px; }
	.fiche-tete--article .fiche-fil{ margin-bottom:12px; }
	.fiche-tete--article .fiche-titre{ font-size:26px; line-height:1.14; margin-bottom:12px; }
	.fiche-tete--article .fiche-titre--long, .fiche-tete--article .fiche-titre--tres-long{ font-size:23px; }
	.fiche-tete--article .fiche-chapo{ font-size:16px; line-height:1.5; margin-bottom:14px; }
	.fiche-tete--article .fiche-une{ aspect-ratio:5/2; border-radius:28px 28px 0 28px; }
}