/* Hors la classe - feuille commune. Charte : charte.md */
:root {
  --nuit: #14213D;
  --tomate: #EF5B3F;
  --tomate-fonce: #C8412A;
  --tomate-survol: #AE3622;
  --moutarde: #E9B949;
  --moutarde-clair: #FBF1D3;
  --lagon: #1DB6A8;
  --lagon-clair: #D6F2EF;
  --craie: #FFFDF7;
  --sable: #F3EEDF;
  --filet: #E8E3D4;
  --filet-fort: #D9D4C4;
  --gris: #5E6782;
  --blanc: #FFFFFF;
  --titre: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --texte: 'Barlow', system-ui, sans-serif;
  --largeur: 1200px;
  --gouttiere: 24px;
  --r-encadre: 16px;
  --r-carte: 24px;
}
@media (min-width: 768px) { :root { --gouttiere: 40px; } }
@media (min-width: 1200px) { :root { --gouttiere: 56px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--craie); color: var(--nuit); font-family: var(--texte); font-size: 17px; line-height: 1.6; }
@media (min-width: 768px) { body { font-size: 18px; } }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--tomate-fonce); text-underline-offset: 3px; }
a:hover { color: var(--tomate-survol); }
:focus-visible { outline: 3px solid var(--lagon); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

h1, h2, h3 { font-family: var(--titre); font-weight: 700; text-transform: uppercase; line-height: 1.04; margin: 0 0 16px; letter-spacing: .01em; }
h1 { font-size: 38px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; line-height: 1.15; }
@media (min-width: 768px) { h1 { font-size: 44px; } h2 { font-size: 30px; } h3 { font-size: 22px; } }
p { margin: 0 0 16px; }
.surtitre { font-family: var(--texte); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--tomate-fonce); margin: 0 0 12px; }
.chapo { font-size: 19px; line-height: 1.55; max-width: 44em; }
@media (min-width: 768px) { .chapo { font-size: 21px; } }
.discret { color: var(--gris); font-size: 15px; }

.conteneur { max-width: var(--largeur); margin: 0 auto; padding: 0 var(--gouttiere); }
.section { padding: 48px 0; }
@media (min-width: 1024px) { .section { padding: 64px 0; } }
/* deux sections blanches qui se suivent : pas de double marge */
.section:not(.section--sable):not(.section--nuit) + .section:not(.section--sable):not(.section--nuit) { padding-top: 0; }
.section--sable { background: var(--sable); }
.section--nuit { background: var(--nuit); color: var(--craie); }
.section--nuit a:not(.bouton) { color: var(--moutarde); }
.section-tete { max-width: 44em; margin-bottom: 32px; }
.evitement { position: absolute; left: -9999px; top: 0; background: var(--nuit); color: var(--craie); padding: 12px 16px; z-index: 200; }
.evitement:focus { left: 16px; top: 16px; }

/* À compléter : repère visible des contenus manquants */
.a-completer { background: var(--moutarde-clair); border: 1px dashed var(--moutarde); border-radius: 8px; padding: 2px 8px; font-style: italic; color: var(--nuit); }
div.a-completer, p.a-completer { display: block; padding: 12px 16px; }

/* ---------- Boutons */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 24px; border-radius: 999px; border: 2px solid transparent; font-family: var(--texte); font-weight: 700; font-size: 17px; line-height: 1.1; text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.bouton--principal { background: var(--tomate-fonce); color: var(--blanc); }
.bouton--principal:hover { background: var(--tomate-survol); color: var(--blanc); }
.bouton--secondaire { background: transparent; color: var(--nuit); border-color: var(--nuit); }
.bouton--secondaire:hover { background: var(--nuit); color: var(--craie); }
.section--nuit .bouton--secondaire { color: var(--craie); border-color: var(--craie); }
.section--nuit .bouton--secondaire:hover { background: var(--craie); color: var(--nuit); }
.bouton--petit { min-height: 44px; padding: 8px 18px; font-size: 16px; }
.boutons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* ---------- Pastilles et étiquettes */
.pastilles { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.pastille { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 14px; font-weight: 700; line-height: 1.4; background: var(--sable); color: var(--nuit); text-decoration: none; }
a.pastille:hover { color: var(--nuit); filter: brightness(.95); }
.pastille--maternelle { background: #FAD3C9; } .pastille--cycle-2 { background: #F7E3AE; } .pastille--cycle-3 { background: #C9E2D3; }
.pastille--college { background: #CCD6EC; } .pastille--lycee { background: #E2D2EA; } .pastille--etudiants, .pastille--superieur { background: #E6E1D2; } .pastille--elementaire { background: #F7E3AE; } .pastille--loisirs { background: #CDE9EA; }
.pastille--theme { background: var(--blanc); border: 1px solid var(--filet-fort); font-weight: 600; }
.etiquette-partenaire { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--lagon); color: var(--nuit); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- En-tête */
.entete { position: sticky; top: 0; z-index: 100; background: var(--sable); border-bottom: 1px solid var(--filet); }
.entete-barre { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.logo { display: inline-grid; grid-template-columns: max-content; row-gap: 5px; text-decoration: none; color: var(--nuit); line-height: 1; }
.logo:hover { color: var(--nuit); }
.logo-mot { display: inline-flex; align-items: flex-end; font-family: var(--titre); font-weight: 700; font-size: 30px; letter-spacing: .02em; text-transform: uppercase; }
.logo-repere { width: .56em; height: .76em; margin: 0 .04em .06em; flex: none; }
/* filet tricolore et sous-titre à la largeur exacte du nom */
.logo-traits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.logo-traits i { height: 3px; border-radius: 2px; }
.logo-traits i:nth-child(1) { background: var(--tomate); } .logo-traits i:nth-child(2) { background: var(--moutarde); } .logo-traits i:nth-child(3) { background: var(--lagon); }
.logo-sous { display: flex; justify-content: space-between; font-size: 10.5px; font-weight: 700; text-transform: uppercase; }
.logo-sous b { width: 2px; }
.burger { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 2px solid var(--nuit); border-radius: 12px; background: none; color: var(--nuit); cursor: pointer; }
.nav { display: none; }
.nav-ouverte .nav { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--craie); border-bottom: 1px solid var(--filet); padding: 8px var(--gouttiere) 24px; max-height: calc(100vh - 72px); overflow-y: auto; }
.nav-liste { list-style: none; margin: 0; padding: 0; }
.nav-liste > li { border-bottom: 1px solid var(--filet); }
.nav-lien, .nav-rubrique { display: flex; width: 100%; align-items: center; justify-content: space-between; min-height: 52px; padding: 8px 0; background: none; border: 0; font: 700 17px var(--texte); color: var(--nuit); text-decoration: none; cursor: pointer; text-align: left; }
.nav-rubrique svg { transition: transform .15s; }
.nav-rubrique[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-sous { list-style: none; margin: 0 0 12px; padding: 0 0 0 12px; display: none; }
.nav-rubrique[aria-expanded="true"] + .nav-sous { display: block; }
.nav-sous a { display: block; padding: 10px 0; color: var(--nuit); text-decoration: none; font-weight: 600; }
.nav-sous a:hover { color: var(--tomate-fonce); }
/* Menu Régions : la ville, puis sa région en retrait */
.nav-groupe .nav-sous-lien { padding: 0 0 10px 14px; font-weight: 400; font-size: 15px; color: var(--gris); }
.nav-groupe + .nav-groupe { border-top: 1px solid var(--filet); }
.nav .bouton { margin-top: 16px; width: 100%; }
@media (min-width: 1200px) {
  .burger { display: none; }
  .nav, .nav-ouverte .nav { display: flex; position: static; padding: 0; border: 0; background: none; max-height: none; overflow: visible; align-items: center; gap: 8px; }
  .nav-liste { display: flex; align-items: center; gap: 4px; }
  .nav-liste > li { border: 0; position: relative; }
  .nav-lien, .nav-rubrique { min-height: 44px; padding: 8px 10px; font-size: 16px; gap: 4px; border-radius: 999px; white-space: nowrap; }
  .nav-lien:hover, .nav-rubrique:hover { background: var(--sable); }
  .nav-sous { position: absolute; left: 0; top: 100%; min-width: 260px; background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--r-encadre); padding: 8px; margin: 0; box-shadow: 0 12px 32px rgba(20, 33, 61, .08); }
  .nav-sous a { padding: 10px 12px; border-radius: 10px; }
  .nav-sous a:hover { background: var(--sable); }
  .nav-liste > li:hover > .nav-sous, .nav-liste > li:focus-within > .nav-sous { display: block; }
  .nav .bouton { margin: 0 0 0 8px; width: auto; min-height: 44px; padding: 8px 20px; font-size: 16px; white-space: nowrap; }
}

/* ---------- Pied de page */
.pied { background: var(--nuit); color: var(--craie); padding: 64px 0 32px; font-size: 15px; }
.pied a { color: var(--craie); text-decoration: none; }
.pied a:hover { color: var(--moutarde); text-decoration: underline; }
.pied-colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
@media (min-width: 900px) { .pied-colonnes { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.pied h2 { font-size: 18px; margin-bottom: 12px; color: var(--moutarde); }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { padding: 4px 0; }
.pied-mention { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255, 253, 247, .2); color: #C9CEDC; }
.pied .logo { color: var(--craie); margin-bottom: 16px; }

/* ---------- Grilles et cartes */
.grille { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .grille--2, .grille--3, .grille--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grille--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.carte-lieu { display: flex; flex-direction: column; background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--r-carte); overflow: hidden; color: var(--nuit); text-decoration: none; transition: transform .2s, box-shadow .2s; }
.carte-lieu:hover { color: var(--nuit); transform: translateY(-3px); box-shadow: 0 12px 28px rgba(20, 33, 61, .08); }
.carte-lieu-image { aspect-ratio: 16 / 10; background: var(--sable); object-fit: cover; width: 100%; display: block; }
.carte-lieu-photo { position: relative; }
.photo-credit { position: absolute; right: 6px; bottom: 6px; max-width: calc(100% - 12px); padding: 1px 7px; border-radius: 6px; background: rgba(20, 33, 61, .65); color: #fff; font-size: 10px; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carte-lieu-corps { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.carte-lieu h3 { margin: 0; }
.carte-lieu .discret { margin: 0; }
.bloc { background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--r-carte); padding: 24px; }
.bloc h3 { margin-bottom: 8px; }
.picto { width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; }

/* ---------- Accueil */
/* Photo de fond provisoire (Tour Eiffel, libre de droits) : à remplacer par une photo d'élèves en sortie dès que Bruno en fournit une avec autorisation de droit à l'image */
.hero { position: relative; padding: 48px 0 64px; background-size: cover; background-position: center top; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 33, 61, .5), rgba(20, 33, 61, .78)); }
.hero .conteneur { position: relative; z-index: 1; }
.hero h1, .hero .chapo { color: var(--craie); }
.hero .bouton--secondaire { color: var(--craie); border-color: var(--craie); }
.hero .bouton--secondaire:hover { background: var(--craie); color: var(--nuit); }
.hero .carte-france { background: var(--craie); border-radius: var(--r-carte); padding: 20px; box-shadow: 0 20px 48px rgba(20, 33, 61, .3); }
.hero-grille { display: grid; gap: 40px; align-items: center; }
/* Bandeau photo des pages ville et région */
.hero--page { padding: 28px 0 44px; min-height: 340px; display: flex; align-items: flex-end; background-position: center 40%; }
.hero--page .conteneur { width: 100%; }
.hero--page .fil, .hero--page .fil a, .hero--page .fil li::after { color: rgba(255, 253, 247, .9); }
.hero--page h1 { max-width: 20ch; margin: 24px 0 12px; }
.hero--page .chapo { max-width: 60ch; margin: 0 0 24px; }
.hero-credit { position: absolute; right: var(--gouttiere); bottom: 8px; margin: 0; font-size: 11px; z-index: 1; }
.hero-credit a { color: rgba(255, 253, 247, .85); }
@media (max-width: 700px) { .hero-credit { position: static; margin-top: 14px; text-align: right; } }
@media (min-width: 1024px) { .hero { padding: 40px 0 48px; } .hero-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: 48px; } }
.hero h1 { font-size: 36px; }
/* Titre du haut de page : deux lignes sur téléphone */
@media (max-width: 560px) { .hero h1 { font-size: 30px; } }
@media (max-width: 380px) { .hero h1 { font-size: 27px; } }
@media (min-width: 768px) { .hero h1 { font-size: 38px; } }
.vignette-carte { position: relative; display: block; border-radius: var(--r-carte); overflow: hidden; border: 1px solid var(--filet); background: var(--craie); }
.vignette-carte img { width: 100%; }
.vignette-carte .repere { pointer-events: none; }
.constats { counter-reset: c; }
.constat::before { counter-increment: c; content: "0" counter(c); display: block; color: var(--tomate); font-family: var(--titre); font-weight: 700; font-size: 18px; margin-bottom: 8px; }
.constat-question { font-family: var(--titre); font-weight: 700; font-size: 22px; line-height: 1.2; text-transform: uppercase; margin: 0 0 6px; }
.constat-reponse { margin: 0; color: var(--gris); }
.constat-reponse strong { color: var(--nuit); }
.tuile-niveau { display: flex; align-items: flex-end; min-height: 120px; padding: 20px; border-radius: var(--r-carte); font-family: var(--titre); font-weight: 700; font-size: 24px; text-transform: uppercase; color: var(--nuit); text-decoration: none; transition: transform .2s; }
.tuile-niveau:hover { color: var(--nuit); transform: translateY(-3px); }
.tuile-niveau--bientot { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 8px; }
.tuile-niveau--bientot:hover { transform: none; }
.tuile-niveau small { font-family: var(--texte); font-size: 14px; font-weight: 600; text-transform: none; }
.bloc-partenaire { background: var(--lagon-clair); border-radius: var(--r-carte); padding: 32px 24px; display: grid; gap: 24px; }
@media (min-width: 900px) { .bloc-partenaire { padding: 48px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; } }
.mini-visites { display: grid; gap: 12px; }
.mini-visite { display: flex; gap: 12px; align-items: center; background: var(--blanc); border-radius: var(--r-encadre); padding: 8px; text-decoration: none; color: var(--nuit); }
.mini-visite:hover { color: var(--nuit); box-shadow: 0 6px 18px rgba(20, 33, 61, .08); }
.mini-visite img { width: 88px; height: 64px; object-fit: cover; border-radius: 10px; flex: none; }
.mini-visite strong { display: block; line-height: 1.2; }

/* ---------- Carte de France (accueil) */
.carte-france { position: relative; max-width: 440px; margin: 0 auto; width: 100%; }
.carte-france > img { width: 100%; }
.france-marqueur { position: absolute; display: flex; flex-direction: column; align-items: flex-start; transform: translate(-17px, -44px); }
.france-ville { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--nuit); }
.france-ville .repere { position: static; transform: none; width: 34px; height: 44px; }
.france-ville:hover .repere { transform: scale(1.12); }
.france-etiquette { background: var(--blanc); border: 1px solid var(--filet); border-radius: 999px; padding: 6px 14px; font-family: var(--titre); font-weight: 700; font-size: 20px; text-transform: uppercase; white-space: nowrap; box-shadow: 0 6px 16px rgba(20, 33, 61, .1); }
.france-ville:hover .france-etiquette { border-color: var(--nuit); }
.france-sous-lien { margin: 4px 0 0 42px; font-family: var(--texte); font-weight: 600; font-size: 13px; color: var(--gris); text-decoration: underline; white-space: nowrap; }
.france-sous-lien:hover { color: var(--nuit); }
/* Étiquette à gauche du repère (villes de l'ouest, ou trop proches d'une autre à leur droite) */
.france-marqueur--gauche { align-items: flex-end; transform: translate(calc(-100% + 17px), -44px); }
.france-marqueur--gauche .france-ville { flex-direction: row-reverse; }
.france-marqueur--gauche .france-sous-lien { margin: 4px 42px 0 0; }
.france-bientot { position: absolute; left: 4%; bottom: 4%; margin: 0; font-size: 14px; color: var(--gris); }
.vignette-carte.carte-lieu-image { display: flex; justify-content: center; align-items: center; overflow: hidden; padding: 8px; }
.vignette-plan { position: relative; height: 100%; max-width: 100%; }
.vignette-plan > img { width: 100%; height: 100%; display: block; }
.vignette-carte .repere.repere--mini { width: 13px; height: 17px; filter: none; }

/* ---------- Choix de la région (accueil) */
/* flex (pas grid) : avec un nombre impair de territoires, le dernier bloc s'étire sur toute la largeur au lieu de laisser un vide */
.grille-regions { display: flex; flex-wrap: wrap; gap: 24px; }
.grille-regions > .bloc-region { flex: 1 1 320px; max-width: 480px; }
.bloc-region { background: var(--blanc); border: 1px solid var(--filet); border-radius: 20px; padding: 24px; }
.bloc-region h3 { margin: 0 0 16px; }
.bloc-region-autour { margin: 4px 0 0; font-weight: 600; }
.bloc-region-autour .discret { font-weight: 400; margin-left: 6px; }
.lien-carte { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--nuit); }
.lien-carte .vignette-carte { border-radius: 12px; margin-bottom: 8px; transition: transform .15s; }
.lien-carte:hover .vignette-carte { transform: translateY(-3px); }
.lien-carte strong { font-family: var(--titre); font-weight: 700; font-size: 18px; text-transform: uppercase; }
.lien-carte:hover strong { text-decoration: underline; }
.lien-carte .discret { font-size: 14px; }

/* ---------- Carte interactive */
.carte { display: grid; gap: 16px; }
.carte-filtres { display: grid; gap: 12px; }
.filtre-groupe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filtre-groupe > span { font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; margin-right: 4px; }
.filtre { min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 2px solid var(--filet-fort); background: var(--blanc); color: var(--nuit); font: 600 15px var(--texte); cursor: pointer; }
.filtre[aria-pressed="true"] { background: var(--nuit); border-color: var(--nuit); color: var(--craie); }
.carte-cadre { position: relative; overflow: auto; max-height: 70vh; border: 1px solid var(--filet); border-radius: var(--r-carte); background: #FBF7EC; -webkit-overflow-scrolling: touch; }
.carte-plan { position: relative; min-width: 880px; }
/* Carte + liste des lieux côte à côte sur grand écran : la carte ne prend plus toute la largeur */
.carte-vue { display: grid; gap: 20px; }
.carte-colonne { min-width: 0; }
.carte-liste ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--filet); border-radius: var(--r-carte); background: var(--blanc); overflow: hidden; }
.carte-liste li + li { border-top: 1px solid var(--filet); }
.carte-liste li[hidden] { display: none; }
.carte-liste a { display: flex; flex-direction: column; gap: 2px; padding: 12px 18px; color: var(--nuit); text-decoration: none; }
.carte-liste a:hover { background: var(--sable); }
.carte-liste a span { font-weight: 700; }
.carte-liste small { font-size: 13px; color: var(--gris); }
@media (max-width: 1023px) { .carte-liste { max-height: 360px; overflow-y: auto; border-radius: var(--r-carte); } .carte-liste ul { border: 0; } }
@media (min-width: 1024px) {
  .carte-vue--liste { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 24px; align-items: stretch; }
  .carte-vue--liste .carte-cadre { max-height: none; overflow: hidden; }
  .carte-vue--liste .carte-plan { min-width: 0; }
  .carte-vue--liste .carte-aide { display: none; }
  .carte-vue--liste .carte-liste { position: relative; }
  /* la liste prend la hauteur de son contenu, sans jamais dépasser celle de la carte */
  .carte-vue--liste .carte-liste ul { position: absolute; top: 0; left: 0; right: 0; max-height: 100%; overflow-y: auto; }
}
.carte-plan > img { width: 100%; }
.carte-cadre--zoom { overflow: hidden; }
.carte-cadre--zoom .carte-plan { position: absolute; min-width: 0; }
.carte-lieu-image--carte { margin: 0; border: 0; border-radius: 0; aspect-ratio: 16 / 10; }
.repere { position: absolute; width: 26px; height: 34px; padding: 0; border: 0; background: none; transform: translate(-50%, -100%); cursor: pointer; filter: drop-shadow(0 2px 2px rgba(20, 33, 61, .25)); transition: transform .15s; }
.repere svg { width: 100%; height: 100%; display: block; }
.repere:hover, .repere[aria-expanded="true"] { transform: translate(-50%, -100%) scale(1.18); z-index: 3; }
.repere--grand { width: 34px; height: 44px; z-index: 2; }
.repere[hidden] { display: none; }
.carte-aide { margin: 0; font-size: 14px; color: var(--gris); }
@media (min-width: 900px) { .carte-aide--mobile { display: none; } }
.carte-fiche { position: absolute; z-index: 10; width: min(320px, calc(100% - 32px)); background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--r-encadre); padding: 16px 16px 20px; box-shadow: 0 16px 40px rgba(20, 33, 61, .18); }
.carte-fiche h3 { font-size: 22px; margin: 0 32px 8px 0; }
.carte-fiche p { font-size: 15px; margin: 8px 0; }
.carte-fiche-fermer { position: absolute; right: 8px; top: 8px; width: 40px; height: 40px; border: 0; background: none; font-size: 24px; line-height: 1; color: var(--nuit); cursor: pointer; border-radius: 999px; }
.carte-fiche-fermer:hover { background: var(--sable); }
.carte-legende { display: flex; flex-wrap: wrap; gap: 16px 24px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.carte-legende li { display: flex; align-items: center; gap: 8px; }
.carte-legende svg { width: 18px; height: 24px; }
.carte-compte { font-size: 15px; color: var(--gris); margin: 0; }

/* ---------- Fiche lieu */
.fil { font-size: 14px; color: var(--gris); margin: 0 0 16px; }
.fil a { color: var(--gris); }
.fil ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.fil li + li::before { content: "›"; margin-right: 6px; }
.fiche-hero { display: grid; gap: 32px; padding: 40px 0 48px; }
@media (min-width: 1024px) { .fiche-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; gap: 56px; padding: 56px 0 72px; } }
.fiche-photo { border-radius: var(--r-carte); overflow: hidden; background: var(--sable); }
.fiche-photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.fiche-photo--carte { aspect-ratio: 16 / 10; margin: 0; border: 1px solid var(--filet); }
.fiche-photo--carte img { aspect-ratio: auto; }
.fiche-photo figcaption { font-size: 13px; color: var(--gris); padding: 8px 12px; }
.essentiel { background: var(--moutarde-clair); border-radius: var(--r-encadre); padding: 24px; }
.essentiel h2 { font-size: 22px; }
.essentiel dl { margin: 0; display: grid; gap: 12px; }
.essentiel dt { font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.essentiel dd { margin: 0; }
.fiche-colonnes { display: grid; gap: 32px; }
@media (min-width: 1024px) { .fiche-colonnes { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 56px; align-items: start; } .fiche-colonnes aside { position: sticky; top: 96px; } }
.mini-carte { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-encadre); overflow: hidden; margin-top: 16px; background: #FBF7EC; border: 1px solid var(--filet); }
.mini-carte img { position: absolute; width: 500%; max-width: none; }
.mini-carte .repere { position: absolute; left: 50%; top: 50%; pointer-events: none; }
.partenaire { background: var(--lagon-clair); border-radius: var(--r-carte); padding: 32px 24px; }
@media (min-width: 768px) { .partenaire { padding: 40px; } }
.visite { display: grid; gap: 16px; background: var(--blanc); border-radius: var(--r-encadre); padding: 16px; }
@media (min-width: 700px) { .visite { grid-template-columns: 180px minmax(0, 1fr); } }
.visite img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
.visite h3 { margin-bottom: 4px; }
.visites { display: grid; gap: 16px; margin: 24px 0; }
.avis { display: grid; gap: 24px; }
@media (min-width: 768px) { .avis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.faq details { border-bottom: 1px solid var(--filet); padding: 16px 0; }
.faq summary { font-weight: 700; cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.bandeau { background: var(--nuit); color: var(--craie); border-radius: var(--r-carte); padding: 40px 24px; text-align: center; }
.bandeau h2 { color: var(--craie); }
.bandeau .boutons { justify-content: center; }
.bandeau .bouton--secondaire { color: var(--craie); border-color: var(--craie); }
.bandeau .bouton--secondaire:hover { background: var(--craie); color: var(--nuit); }
@media (min-width: 768px) { .bandeau { padding: 56px; } }

/* ---------- Formulaires */
.formulaire { display: grid; gap: 20px; max-width: 720px; }
.champ { display: grid; gap: 6px; }
.champ label, .champ legend { font-weight: 700; font-size: 16px; }
.champ input, .champ select, .champ textarea { width: 100%; min-height: 48px; padding: 10px 14px; border: 2px solid var(--filet-fort); border-radius: 12px; background: var(--blanc); color: var(--nuit); font: 400 17px var(--texte); }
.champ textarea { min-height: 140px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--nuit); outline: none; box-shadow: 0 0 0 3px var(--lagon-clair); }
.champs-2 { display: grid; gap: 20px; }
.champs-2[hidden] { display: none; }
@media (min-width: 700px) { .champs-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.choix-type { display: grid; gap: 12px; border: 0; padding: 0; margin: 0; }
@media (min-width: 700px) { .choix-type { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.choix-type legend { margin-bottom: 12px; }
.choix-type label { display: block; position: relative; background: var(--blanc); border: 2px solid var(--filet-fort); border-radius: var(--r-encadre); padding: 16px 16px 16px 48px; cursor: pointer; }
.choix-type input { position: absolute; left: 16px; top: 20px; width: 20px; height: 20px; accent-color: var(--tomate-fonce); }
.choix-type label:has(input:checked) { border-color: var(--nuit); box-shadow: 0 0 0 3px var(--lagon-clair); }
.choix-type strong { display: block; font-size: 18px; }
.choix-type span { font-size: 15px; color: var(--gris); }
.consentement { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; }
.consentement input { width: 22px; height: 22px; margin-top: 2px; flex: none; accent-color: var(--tomate-fonce); }
.message-formulaire { background: var(--lagon-clair); border-radius: 12px; padding: 16px; font-weight: 600; }
.message-formulaire--erreur { background: #FBDEDA; color: #A8302A; }
/* Formulaire de téléchargement d'un guide en PDF (fin de guide) */
.bloc-telecharger { background: var(--sable); border-radius: var(--r-carte); padding: 32px 24px; display: grid; gap: 24px; }
@media (min-width: 900px) { .bloc-telecharger { padding: 40px; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; } }
.bloc-telecharger form { display: grid; gap: 16px; }
/* Piège à robots : un champ que seul un robot remplit, invisible pour une personne sans passer par display:none (que certains robots évitent) */
.piege-robot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.etapes { counter-reset: e; list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
@media (min-width: 900px) { .etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.etapes li { background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--r-encadre); padding: 20px; }
.etapes li::before { counter-increment: e; content: counter(e); display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; background: var(--moutarde); font-weight: 700; margin-bottom: 8px; }

/* ---------- Pages de contenu */
.texte { max-width: 46em; }
.texte h2 { margin-top: 48px; }
.texte ul, .texte ol { padding-left: 1.2em; }
.jour-par-jour li { margin-bottom: 10px; }
.en-bref { background: var(--moutarde-clair); border-radius: var(--r-encadre); padding: 24px; margin: 0 0 32px; }
.liste-lieux { columns: 1; list-style: none; padding: 0; margin: 0; }
@media (min-width: 700px) { .liste-lieux { columns: 2; } }
@media (min-width: 1024px) { .liste-lieux { columns: 3; } }
.liste-lieux li { break-inside: avoid; padding: 6px 0; }

@media print {
  .entete, .pied, .carte-filtres, .boutons, .bandeau { display: none !important; }
  body { background: #fff; }
  /* Fiche PDF d'un guide (outils/pdf-guide.mjs) : le logo et le pied de page viennent du header/footer de Chrome, pas du CSS */
  .fil, .hero, .hero-credit { display: none !important; }
  /* Cacher aussi la section qui enveloppe ces blocs, sinon son fond (sable ou nuit) reste visible, vide */
  section:has(> .conteneur > .bloc-partenaire), section:has(> .conteneur > .bandeau), section:has(> .conteneur > .bloc-telecharger) { display: none !important; }
  @page { size: A4; margin: 22mm 18mm 18mm; }
  body { font-size: 12.5pt; color: #14213d; }
  .texte.article { max-width: 100%; }
  .texte.article h1 { font-size: 22pt; margin-top: 0; }
  .texte.article h2 { font-size: 15pt; margin-top: 22pt; break-after: avoid; }
  .texte.article h3 { font-size: 12.5pt; break-after: avoid; }
  .texte.article p, .texte.article li { orphans: 3; widows: 3; }
  .texte.article table { break-inside: auto; }
  .texte.article thead { display: table-header-group; }
  .texte.article tr { break-inside: avoid; }
  .texte.article .en-bref, .texte.article .chapo { break-inside: avoid; }
}
.texte.article .chapo { font-weight: 700; }
@media print {
  .article-couverture { max-height: 55mm; }
  .article-couverture img { max-height: 55mm; object-fit: cover; }
  a { color: #14213d; text-decoration: underline; }
}
@media (max-width: 600px) {
  .france-etiquette { font-size: 16px; padding: 4px 10px; }
  .france-sous-lien { font-size: 12px; margin-left: 36px; }
}

.etiquette-region { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--nuit); border: 1px solid var(--nuit); border-radius: 999px; padding: 3px 10px; vertical-align: middle; }
.mini-visites-titre { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--gris); }

.bloc-sejour { max-width: 640px; background: transparent; border-color: rgba(255, 253, 247, .3); color: var(--craie); text-decoration: none; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; transition: border-color .15s; }
.bloc-sejour:hover { border-color: var(--moutarde); }
.bloc-sejour h3 { color: var(--craie); margin: 0; }
.bloc-sejour p { margin: 0; color: rgba(255, 253, 247, .85); }
.bloc-sejour .pastille { background: var(--moutarde); color: var(--nuit); }
.bloc-sejour-lien { color: var(--moutarde); font-weight: 600; margin-top: auto; }
.bloc-sejour .boutons { align-items: center; }
.bloc-sejour .bloc-sejour-lien { margin-top: 0; text-decoration: underline; }

/* Accueil : questions + photo */
.questions-grille { display: grid; gap: 32px; align-items: center; }
.questions-grille .constats { display: grid; gap: 24px; }
.photo-section { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; }
@media (min-width: 900px) { .questions-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; } }
/* Accueil : photo de la ville en tête du bloc région */
.bloc-region-photo { margin: -24px -24px 20px; position: relative; }
.bloc-region-photo img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: 20px 20px 0 0; display: block; }
.bloc-region-photo figcaption { position: absolute; right: 8px; bottom: 6px; font-size: 11px; }
.bloc-region-photo figcaption a { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .7); text-decoration: none; }
.sejour-grille { display: grid; gap: 32px; align-items: stretch; }
.sejour-grille .bloc-sejour { max-width: none; justify-content: center; }
.sejour-grille .photo-section { aspect-ratio: 16 / 9; height: 100%; }
@media (min-width: 900px) { .sejour-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.photo-zen { position: relative; margin: 0; }
.photo-zen figcaption { position: absolute; top: -14px; left: 20px; transform: rotate(-4deg); background: var(--moutarde); color: var(--nuit); font-family: var(--titre); font-weight: 700; font-size: 22px; text-transform: uppercase; padding: 6px 16px; border-radius: 999px; box-shadow: 0 6px 16px rgba(20, 33, 61, .18); }
/* Accueil : les deux boutons du haut côte à côte dès que la largeur le permet */
@media (min-width: 480px) { .hero .boutons { flex-wrap: nowrap; } .hero .bouton { padding: 12px 20px; white-space: nowrap; } }
/* Niveaux : deux colonnes dès le téléphone */
.grille-niveaux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1024px) { .grille-niveaux { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Liste des territoires (page « par niveau ») : flex, même raison que .grille-regions */
.grille-territoires { display: flex; flex-wrap: wrap; gap: 24px; }
.grille-territoires > .carte-lieu { flex: 1 1 240px; }
@media (max-width: 560px) { .grille-niveaux .tuile-niveau { min-height: 96px; padding: 14px; font-size: 20px; line-height: 1.1; } }

/* ---------- Articles et guides écrits dans Ghost */
.article-couverture { margin: 24px 0; }
.article-couverture img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-carte); display: block; }
.article img { max-width: 100%; height: auto; border-radius: 12px; }
.article figure { margin: 24px 0; }
.article figcaption { font-size: 14px; color: var(--gris); margin-top: 8px; text-align: center; }
.article blockquote { margin: 24px 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--tomate); font-size: 19px; }
.article .kg-callout-card { display: flex; gap: 12px; padding: 20px 24px; margin: 24px 0; border-radius: var(--r-encadre); background: var(--sable); }
.article .kg-callout-emoji { font-size: 22px; line-height: 1.3; }
.article .kg-bookmark-card a { display: block; padding: 16px 20px; border: 1px solid var(--filet); border-radius: var(--r-encadre); text-decoration: none; }
.article .kg-width-wide, .article .kg-width-full { max-width: 100%; }
.article table { width: 100%; border-collapse: collapse; margin: 24px 0; }
.article th, .article td { border: 1px solid var(--filet); padding: 8px 12px; text-align: left; }
.article th { background: var(--sable); }

/* Villes pas encore ouvertes : repère grisé « Bientôt » sur la carte de France, et formulaire « Prévenez-moi » */
.france-marqueur--bientot .france-ville { cursor: default; opacity: .55; filter: grayscale(1); }
.france-marqueur--bientot .france-sous-lien { text-decoration: none; }
.bloc-prevenez { margin-top: 40px; background: var(--sable); border-radius: var(--r-carte); padding: 32px 24px; display: grid; gap: 24px; }
.bloc-prevenez h3 { margin: 0 0 8px; }
.bloc-prevenez form { display: grid; gap: 16px; }
@media (min-width: 900px) { .bloc-prevenez { padding: 40px; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; } }
/* « Bientôt » : la carte d'inscription se place à droite de la carte Paris, dans la même rangée */
.grille-regions > .bloc-prevenez { flex: 1 1 320px; max-width: 480px; margin-top: 0; padding: 24px; border-radius: 20px; grid-template-columns: none; align-content: start; gap: 16px; }
.grille-regions > .bloc-prevenez h3 { font-size: 22px; }
.grille-regions > .bloc-prevenez form { gap: 12px; }

.champ[hidden] { display: none; }