/*
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; }
.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; }
.hero__fond img{ width:100%; height:100%; object-fit:cover; }
.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; }
.hero__fil{ font-size:13px; opacity:.85; margin-bottom:18px; }
.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; }
}
.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); }

/* =============================================================================
   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{ background:var(--stratos); color:var(--givre); border-radius:var(--rayon-md); padding:24px 18px; text-align:center; }
.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
   ========================================================================== */
.carte-section{ display:grid; grid-template-columns:5fr 7fr; gap:32px; align-items:center; }
.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; }
.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; }
.carte-france .terre{ fill:var(--nuee); stroke:var(--bord); stroke-width:1; transition:fill .15s; }
.carte-france .terre{ fill:var(--brume); }

.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); }
.carte-epingle__code{ fill:#fff; font-family:var(--ff-corps); font-size:8px; font-weight:700; 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; }
.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é » (retour du 18/09/2026) : plus petite, sobre, contour
   pointillé — visuellement distincte d'une fiche, jamais confondue avec elle. */
.carte-epingle--releve .carte-epingle__disque{ fill:var(--nuee); stroke:var(--encre-2); stroke-width:1.4; stroke-dasharray:2 1.5; }
.carte-epingle--releve:hover .carte-epingle__disque, .carte-epingle--releve:focus .carte-epingle__disque{ r:7; }
.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; }


.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; } }
.carte-xl__stratos{ background:var(--stratos); color:var(--givre); padding:32px 28px; display:flex; flex-direction:column; justify-content:center; gap:14px; position:relative; }
.carte-xl__titre{ font-family:var(--ff-titre); text-transform:uppercase; font-size:24px; font-weight:800; }
.carte-xl__cote{ position:absolute; top:16px; right:16px; font-family:var(--ff-titre); font-size:12px; background:rgba(242,247,252,.12); padding:4px 10px; border-radius:999px; }
.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; }
.reassurance__icone{ width:34px; height:34px; color:var(--stratos); margin-bottom:10px; }

.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; }

/* =============================================================================
   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--3, .grille-activites--4{ grid-template-columns:repeat(2,1fr); } }
.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; }
.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; } }
.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; }
.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:var(--air); }
.carte-article__etiquette--eau{ background:color-mix(in srgb, var(--eau) 22%, transparent); color:var(--eau); }
.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); }

/* =============================================================================
   10. BILLET DE VOL (procédé 5) — LE formulaire lead
   ========================================================================== */
.billet{
	color:var(--encre); display:grid; grid-template-columns:180px 1fr; background:var(--nuee); border-radius:var(--rayon-xl);
	overflow:hidden; box-shadow:var(--ombre); border:1px solid var(--bord);
}
@media (max-width:640px){ .billet{ grid-template-columns:1fr; } }
.billet__talon{
	background:var(--stratos); color:var(--givre); display:flex; flex-direction:column; align-items:center;
	justify-content:center; gap:12px; padding:24px; position:relative;
	border-right:2px dashed rgba(242,247,252,.35);
}
@media (max-width:640px){ .billet__talon{ flex-direction:row; border-right:none; border-bottom:2px dashed rgba(242,247,252,.35); } }
.billet__symbole{ width:40px; height:40px; }
.billet__talon-texte{ font-family:var(--ff-titre); font-size:11px; text-transform:uppercase; letter-spacing:.08em; text-align:center; margin:0; }
.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:1fr 1fr; gap:12px; margin-bottom:16px; }
.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; }
@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); }
@media (max-width:900px){ .pied__grille{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .pied__grille{ 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; }
.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); }

/* =============================================================================
   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; }

.sbs-check__grille, .liste-infographiee{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; }
.sbs-check__tuile, .liste-infographiee li{
	background:var(--nuee); border:1px solid var(--bord); border-radius:12px; padding:12px 14px;
	font-size:14.5px; display:flex; align-items:flex-start; gap:10px; line-height:1.4;
}
.sbs-check__coche{ width:18px; height:18px; border-radius:999px; background:var(--balise); flex:none; margin-top:2px; position:relative; }
.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; margin-top:6px; }
.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). */
h2:has(+ .liste-infographiee:has(li:only-child)),
h3:has(+ .liste-infographiee:has(li:only-child)),
p:has(+ .liste-infographiee:has(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). */
.tableau-infographie{ display:grid; grid-template-columns:1fr; gap:14px; margin:28px 0; }
.tableau-infographie--2{ grid-template-columns:repeat(2,1fr); }
.tableau-infographie--3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:640px){ .tableau-infographie--2, .tableau-infographie--3{ 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; justify-content:space-between; gap:12px; padding:5px 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); }
.tableau-infographie__valeur{ font-weight:600; text-align:right; }

.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); }
.sbs-jauges__libelle, .sbs-lieu__libelle{ font-size:12px; color:var(--encre-2); margin-top:4px; }

.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; }
.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; }
.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); }

/* =============================================================================
   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;
	}
	body:has(.cta-sticky-mobile){ padding-bottom:64px; } /* seulement les pages qui portent la bande */
}

.fiche-tete{ padding:32px 0 0; }
.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; }
.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; }
.fiche-corps blockquote{ font-family:var(--ff-corps); font-style:italic; font-size:22px; border-left:4px solid var(--balise); padding-left:20px; margin:2em 0; }
.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; }
.sommaire__liste{ list-style:decimal; padding-left:20px; margin:14px 0 0; display:flex; flex-direction:column; gap:8px; }
.sommaire__lien{ font-size:14px; }
.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); }

.fiche-sidebar{ position:sticky; top:88px; display:flex; flex-direction:column; gap:20px; }
.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, remonté
   en tête d'article via order (le HTML ne bouge pas). */
.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){
	.fiche-sidebar{ order:-1; position:static; }
	.fiche-sommaire-unique summary{ cursor:pointer; list-style:disclosure-closed; }
	.fiche-sommaire-unique summary::-webkit-details-marker{ display:revert; }
	.fiche-sommaire-unique[open] summary{ margin-bottom:10px; }
	.fiche-sommaire-unique summary h3{ display:inline-block; }
}
.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; }
.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; }

/* =============================================================================
   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; }
.page-carte__liste{ height:calc(100vh - 78px); overflow-y:auto; background:var(--nuee); padding:20px; 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); }
.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; }
.liste-spots__code{ width:26px; height:26px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; flex:none; color:#04101f; }
.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
   ========================================================================== */
.spot-ecran{ display:grid; grid-template-columns:7fr 5fr; gap:32px; align-items:start; padding:32px 0; }
@media (max-width:960px){ .spot-ecran{ grid-template-columns:1fr; } }
.spot-formulaire{ position:sticky; top:88px; }
@media (max-width:960px){ .spot-formulaire{ position:static; order:-1; margin-bottom:20px; } }
.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). */
.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; }
.spot-carte-locale__liste{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.spot-carte-locale__liste li{ display:flex; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid var(--bord); font-size:13.5px; }
.spot-carte-locale__liste a{ color:var(--encre); font-weight:600; text-decoration:none; }
.spot-carte-locale__liste a:hover{ color:var(--balise); }
.spot-carte-locale__liste span{ color:var(--encre-2); font-size:12px; }
.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 — sans défilement
   ========================================================================== */
.contact-ecran{ min-height:calc(100vh - 78px); display:flex; align-items:center; padding:32px 0; }
.contact-grille{ display:grid; grid-template-columns:1.1fr .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; }

/* 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; }
	.contact-ecran .billet{ grid-template-columns:1fr; box-shadow:none; }
	.contact-ecran .billet__talon{ display:none; } /* décoratif : le premier écran mobile doit tenir dans la hauteur */
	.contact-ecran .billet__form{ padding:16px 18px; }
	.contact-ecran .billet__titre{ font-size:17px; margin-bottom:10px; }
	.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; }
	/* 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, .reassurance__grille{ 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; }
	.fiche-mise-en-page, .spot-ecran, .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; }