/* ============================================================
   Destination — feuille de style
   Système de design : voir dossier de passation
   ============================================================ */

/* Les polices ne sont plus chargées par @import mais par un <link> dans chaque
   page HTML, précédé d'un preconnect. Un @import à l'intérieur d'une feuille de
   style sérialise les téléchargements : le navigateur doit récupérer style.css,
   l'analyser, puis seulement découvrir l'adresse des polices. Le <link> lance
   les deux en parallèle et fait gagner plusieurs centaines de millisecondes
   sur le premier affichage — le facteur le plus surveillé par Google. */

:root{
  --encre:#0F1D32;
  --encre2:#1B2E4A;
  --ardoise:#46586F;
  --carte:#E9EDF1;
  --blanc:#FFFFFF;
  --turquoise:#0B7F86;
  --turquoise-clair:#E0EFEF;
  --sable:#D9C9A8;
  --corail:#C4503F;
  --ligne:#CBD5DF;

  --font-display:'Bricolage Grotesque', serif;
  --font-body:'Inter', sans-serif;
  --font-data:'Space Grotesk', sans-serif;

  --radius-s:7px;
  --radius-m:8px;
  --radius-l:10px;

  --container:1120px;
}

*, *::before, *::after{ box-sizing:border-box; }

/* Focus clavier nettement visible : le style par défaut des navigateurs
   est trop discret pour un public senior naviguant au clavier. */
:focus-visible{
  outline:3px solid var(--turquoise);
  outline-offset:3px;
  border-radius:4px;
}
.hero :focus-visible{ outline-color:var(--sable); }

/* Lien d'évitement : permet d'atteindre l'outil sans traverser tout le hero */
.lien-evitement{
  position:absolute;
  left:-9999px;
  top:0;
  background:var(--turquoise);
  color:var(--blanc);
  padding:12px 20px;
  z-index:100;
  font-weight:600;
  border-radius:0 0 var(--radius-m) 0;
}
.lien-evitement:focus{ left:0; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--carte);
  color:var(--encre);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:-0.02em;
  margin:0;
  color:inherit;
}

h1{ font-size:clamp(38px,6.2vw,74px); line-height:1.05; }
h2{ font-size:clamp(28px,3.6vw,42px); line-height:1.1; }
h3{ font-size:17px; font-weight:700; }

p{ margin:0; }

a{ color:var(--turquoise); }

button{ font-family:var(--font-body); cursor:pointer; }

.eyebrow{
  font-family:var(--font-data);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--sable);
}
section .eyebrow{ color:var(--turquoise); }
/* Nettement plus grand que l'eyebrow standard (11px) pour rester lisible,
   mais assez contenu pour tenir sur une seule ligne et libérer de la hauteur. */
.hero .eyebrow{
  color:var(--sable);
  font-size:clamp(13px,1.15vw,18px);
  letter-spacing:.14em;
  display:block;
  margin-bottom:6px;
  overflow-wrap:break-word;
}

.chiffre{
  font-family:var(--font-data);
  font-variant-numeric:tabular-nums;
  font-weight:600;
}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}
/* Sur grand écran, on élargit la zone utile : le tableau comparatif gagne
   près de 300 px, soit trois colonnes de critères visibles en plus, sans
   allonger les lignes de texte du reste du site au point de nuire à la lecture. */
@media (min-width:1480px){
  :root{ --container:1400px; }
}

/* ---------------- HERO ---------------- */
/* Calibré pour que tout le bloc sombre tienne dans une hauteur d'écran
   sans scroller — d'où les paddings en vh et les tailles réduites. */
.hero{
  background:var(--encre);
  color:var(--blanc);
  padding:clamp(32px,5vh,60px) 0 clamp(28px,4.5vh,52px);
}
.hero-grille{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:56px;
  align-items:center;
}
.hero-texte{ min-width:0; }
.hero h1{
  font-size:clamp(30px,3.9vw,54px);
  margin:10px 0 16px;
  max-width:16ch;
}
.hero h1 .accent{ color:var(--sable); display:block; }
.hero .these{
  max-width:56ch;
  font-size:clamp(15px,1.15vw,17.5px);
  color:#C7D2E0;
  margin-bottom:clamp(20px,2.8vh,32px);
}
.hero-actions{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  margin-bottom:clamp(22px,3.2vh,38px);
}
.btn-hero{
  padding:15px 28px;
  font-size:15.5px;
}
.lien-guides{
  color:var(--sable);
  font-size:14.5px;
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
}
.hero-souscription{
  font-size:13px;
  color:#8FA0B8;
}
.hero-chiffres{
  display:flex;
  gap:48px;
  flex-wrap:wrap;
}
.hero-chiffre .valeur{
  font-family:var(--font-data);
  font-size:32px;
  font-weight:600;
  color:var(--sable);
  display:block;
}
.hero-chiffre .label{
  font-size:14px;
  color:#8FA0B8;
  margin-top:4px;
  display:block;
}

/* ---------------- APERÇU ANIMÉ DU HERO ---------------- */
.hero-apercu-carte{
  background:var(--encre2);
  border:1px solid #2C4267;
  border-radius:var(--radius-l);
  padding:24px;
}
.hero-apercu-label{
  display:block;
  font-family:var(--font-data);
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--turquoise);
  margin-bottom:16px;
  transition:opacity .25s;
}
.hero-apercu-lignes{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:196px;
}
.hero-ligne-mini{
  display:grid;
  grid-template-columns:22px 26px 1fr 70px 34px;
  align-items:center;
  gap:10px;
  will-change:transform;
}
.hero-ligne-mini .rang{
  font-family:var(--font-data);
  font-size:13px;
  color:#8FA0B8;
}
.hero-ligne-mini .drapeau{ font-size:17px; border-radius:2px; box-shadow:none; }
.hero-ligne-mini .ville{
  font-family:var(--font-display);
  font-weight:700;
  font-size:14.5px;
  color:var(--blanc);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.hero-ligne-mini .barre{
  height:6px;
  background:#0F1D32;
  border-radius:3px;
  overflow:hidden;
}
.hero-ligne-mini .barre .remplissage{
  height:100%;
  background:var(--turquoise);
  border-radius:3px;
  transition:width 460ms cubic-bezier(.22,.68,.3,1);
}
.hero-ligne-mini .score{
  font-family:var(--font-data);
  font-size:13px;
  font-weight:600;
  color:var(--turquoise);
  text-align:right;
}
.hero-apercu-note{
  display:block;
  margin-top:16px;
  font-size:12px;
  color:#6E82A0;
}

/* ---------------- LAYOUT PRINCIPAL ---------------- */
.corps{
  padding:56px 0 80px;
}
.grille{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:44px;
  align-items:start;
}
/* Sans ce min-width:0, la colonne des résultats refuse de descendre sous la
   largeur de son contenu (min-width:auto par défaut sur un élément de grille) :
   le tableau comparatif élargissait alors la page entière au lieu de défiler
   dans son propre cadre, ce qui décalait toute la mise en page. */
.resultats{ min-width:0; }

/* ---------------- PANNEAU DE RÉGLAGE ---------------- */
.panneau{
  position:sticky;
  top:24px;
  background:var(--blanc);
  border:1px solid var(--ligne);
  border-radius:var(--radius-l);
  padding:28px;
  display:flex;
  flex-direction:column;
  gap:32px;
  max-height:calc(100vh - 48px);
  overflow-y:auto;
}
.bloc-reglage{ display:flex; flex-direction:column; gap:14px; }
.bloc-reglage .titre-bloc{
  display:flex;
  align-items:baseline;
  gap:8px;
}
.bloc-reglage .num{
  font-family:var(--font-data);
  font-size:12px;
  color:var(--turquoise);
  font-weight:600;
}
.bloc-reglage h3{ color:var(--encre); }

.profils{ display:flex; flex-direction:column; gap:8px; }
.profil-btn{
  text-align:left;
  border:1px solid var(--ligne);
  background:var(--blanc);
  border-radius:var(--radius-m);
  padding:10px 14px;
  font-size:15px;
  font-weight:500;
  color:var(--ardoise);
  transition:border-color .15s, background .15s, color .15s;
}
.profil-btn:hover{ border-color:var(--turquoise); }
.profil-btn.actif{
  background:var(--turquoise-clair);
  border-color:var(--turquoise);
  color:var(--turquoise);
}

.conditions{ display:flex; flex-direction:column; gap:10px; }
.condition{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:14.5px;
  color:var(--ardoise);
  cursor:pointer;
}
.condition input{
  margin-top:3px;
  width:16px;
  height:16px;
  accent-color:var(--turquoise);
  flex-shrink:0;
}
.condition span{ line-height:1.4; }
.zones{ display:flex; flex-wrap:wrap; gap:8px; }
.zone-btn{
  border:1px solid var(--ligne);
  background:var(--blanc);
  color:var(--ardoise);
  font-size:13px;
  font-weight:500;
  padding:6px 12px;
  border-radius:999px;
}
.zone-btn:hover{ border-color:var(--turquoise); }
.zone-btn.actif{
  background:var(--turquoise-clair);
  border-color:var(--turquoise);
  color:var(--turquoise);
  font-weight:600;
}

.compteur-resultats{
  font-family:var(--font-data);
  font-size:13px;
  color:var(--turquoise);
  font-weight:600;
  margin-top:2px;
}

.foyer-toggle{ display:flex; gap:8px; margin-bottom:10px; }
.foyer-toggle button{
  border:1px solid var(--ligne);
  background:var(--blanc);
  color:var(--ardoise);
  font-size:13px;
  font-weight:600;
  padding:6px 14px;
  border-radius:var(--radius-m);
}
.foyer-toggle button.actif{
  background:var(--turquoise);
  border-color:var(--turquoise);
  color:var(--blanc);
}
.budget-valeur{
  font-family:var(--font-data);
  font-size:22px;
  font-weight:600;
  color:var(--encre);
}
.budget-valeur span{ font-size:14px; color:var(--ardoise); font-weight:400; }
.budget-note{
  font-size:12.5px;
  color:var(--ardoise);
  line-height:1.5;
  margin-top:8px;
}
.budget-note-sante{
  background:var(--turquoise-clair);
  border-left:3px solid var(--turquoise);
  border-radius:0 6px 6px 0;
  padding:10px 12px;
  margin-top:10px;
}
.budget-note-sante strong{ color:var(--encre); }

/* ---------- recherche par ville ---------- */
.recherche-ville{
  position:relative;
  display:flex;
  align-items:center;
  margin-bottom:14px;
}
.recherche-icone{
  position:absolute;
  left:14px;
  font-size:19px;
  color:var(--ardoise);
  pointer-events:none;
  line-height:1;
}
#champ-recherche{
  width:100%;
  padding:12px 42px;
  font-family:inherit;
  font-size:15px;
  color:var(--encre);
  background:var(--blanc);
  border:1px solid var(--ligne);
  border-radius:var(--radius-m);
  transition:border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance:none;
  appearance:none;
}
#champ-recherche::placeholder{ color:var(--ardoise); opacity:.85; }
#champ-recherche:focus{
  outline:none;
  border-color:var(--turquoise);
  box-shadow:0 0 0 3px var(--turquoise-clair);
}
#champ-recherche::-webkit-search-cancel-button{ display:none; }
#effacer-recherche{
  position:absolute;
  right:8px;
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  border:none; background:transparent;
  font-size:22px; line-height:1;
  color:var(--ardoise);
  cursor:pointer;
  border-radius:50%;
}
#effacer-recherche:hover{ background:var(--turquoise-clair); color:var(--encre); }

.recadrage{
  border-radius:var(--radius-m);
  padding:14px 16px;
  margin-bottom:16px;
  font-size:14px;
  line-height:1.6;
}
.recadrage p{ margin:0; color:var(--ardoise); }
.recadrage p + p, .recadrage ul + p{ margin-top:8px; }
.recadrage strong{ color:var(--encre); }
.recadrage ul{ margin:8px 0 0; padding-left:20px; }
.recadrage li{ color:var(--ardoise); }
.recadrage-note{ font-size:13px; }
.recadrage-info{ background:var(--turquoise-clair); border-left:3px solid var(--turquoise); }
.recadrage-alerte{ background:#FDF3E7; border-left:3px solid var(--sable, #D98A4E); }
.recadrage-neutre{ background:var(--brume, #F4F5F3); border-left:3px solid var(--ligne); }

.recadrage-liens{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.lien-ville-mieux{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 12px;
  font-family:inherit; font-size:14px; font-weight:600;
  color:var(--encre);
  background:var(--blanc);
  border:1px solid var(--turquoise);
  border-radius:999px;
  cursor:pointer;
  transition:background .15s ease;
}
.lien-ville-mieux:hover{ background:var(--turquoise-clair); }
.lien-ville-mieux span{
  font-weight:700; font-size:13px;
  color:var(--turquoise);
}

/* ---------- renvoi vers « Préparer le départ » depuis un guide ---------- */
.bloc-demarches{
  background:var(--turquoise-clair);
  border-left:3px solid var(--turquoise);
  border-radius:0 var(--radius-m) var(--radius-m) 0;
  padding:24px 28px;
  margin:36px 0;
}
.bloc-demarches h2{ margin-top:0; font-size:20px; }
.bloc-demarches ol{ margin:16px 0 22px; padding-left:22px; }
.bloc-demarches li{ margin-bottom:10px; line-height:1.6; }
.bloc-demarches li strong{ font-weight:600; color:var(--encre); }
.bloc-demarches .btn-turquoise{ display:inline-block; }
.demarches-note{
  margin:16px 0 0;
  font-size:13px;
  line-height:1.6;
  color:var(--ardoise);
}

/* ---------- annuaire des villes ---------- */
.nav-zones{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:20px 0 28px;
}
.nav-zones a{
  display:inline-flex; align-items:center; gap:7px;
  /* 11 px de marge verticale : porte la cible tactile à 44 px, le minimum
     recommandé — déterminant pour une audience de 58-72 ans sur téléphone. */
  padding:11px 16px;
  font-size:14px; font-weight:600;
  color:var(--encre);
  background:var(--blanc);
  border:1px solid var(--ligne);
  border-radius:999px;
  text-decoration:none;
}
.nav-zones a:hover{ border-color:var(--turquoise); background:var(--turquoise-clair); }
.nav-zones span{
  font-family:var(--font-data); font-size:12px; font-weight:700;
  color:var(--turquoise);
}
.carte-ville-liee.a-guide{ border-color:var(--turquoise); }
.carte-ville-liee .nom em{
  display:inline-block;
  margin-left:7px;
  padding:2px 8px;
  font-style:normal; font-weight:700;
  font-size:10.5px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--turquoise);
  background:var(--turquoise-clair);
  border-radius:999px;
  vertical-align:middle;
}
input[type="range"]{
  width:100%;
  accent-color:var(--turquoise);
  height:20px;
}

.curseurs{ display:flex; flex-direction:column; gap:16px; }
.curseur label{
  display:flex;
  justify-content:space-between;
  font-size:13.5px;
  color:var(--ardoise);
  margin-bottom:6px;
}
.curseur label .valeur{
  font-family:var(--font-data);
  color:var(--encre);
  font-weight:600;
}
.curseur input[type="range"]{ height:16px; }

/* ---------------- CRITÈRES AVANCÉS ---------------- */
#curseurs-avances{
  opacity:.4;
  pointer-events:none;
  transition:opacity .2s;
}
#curseurs-avances.actifs{
  opacity:1;
  pointer-events:auto;
}

/* ---------------- ENCART COMPROMIS ---------------- */
.rappel-reglages{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  background:var(--turquoise-clair);
  border-radius:var(--radius-m);
  padding:10px 14px;
  margin-bottom:14px;
  font-size:13.5px;
  color:var(--encre);
}
.rappel-reglages button{
  background:none;
  border:1px solid var(--turquoise);
  color:var(--turquoise);
  border-radius:var(--radius-m);
  padding:5px 12px;
  font-size:13px;
  font-weight:600;
}

.encart-compromis{
  background:var(--turquoise-clair);
  border:1px solid var(--turquoise);
  border-radius:var(--radius-l);
  padding:16px 20px;
  margin-bottom:20px;
}
.encart-compromis p{
  font-size:14.5px;
  color:var(--encre);
  line-height:1.6;
}

/* ---------------- RAIL D'AFFINITÉ ---------------- */
.rail-entete{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  margin-bottom:18px;
  flex-wrap:wrap;
}
.rail-entete h2{ margin-right:auto; }
.rail-entete .compte{
  font-family:var(--font-data);
  font-size:14px;
  color:var(--ardoise);
}
.vue-toggle{ display:flex; gap:6px; }
.vue-toggle button{
  border:1px solid var(--ligne);
  background:var(--blanc);
  color:var(--ardoise);
  font-size:13px;
  font-weight:600;
  padding:6px 14px;
  border-radius:var(--radius-m);
}
.vue-toggle button.actif{
  background:var(--turquoise);
  border-color:var(--turquoise);
  color:var(--blanc);
}

.rail{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.ligne-ville{
  background:var(--blanc);
  border:1px solid var(--ligne);
  border-radius:var(--radius-l);
  padding:16px 20px;
  cursor:pointer;
  will-change:transform;
}
.ligne-ville:hover{ border-color:var(--turquoise); }

/* <button> natif : on neutralise son apparence par défaut tout en
   conservant la mise en grille et l'accessibilité clavier gratuite. */
.ligne-resume{
  display:grid;
  grid-template-columns:32px 28px 1fr 140px 48px 130px 90px;
  align-items:center;
  gap:16px;
  width:100%;
  background:none;
  border:none;
  padding:0;
  font:inherit;
  color:inherit;
  text-align:left;
  cursor:pointer;
}
.rang{
  font-family:var(--font-data);
  font-size:14px;
  color:var(--ardoise);
  font-weight:600;
}
.drapeau{ font-size:20px; border-radius:3px; box-shadow:0 0 0 1px var(--ligne); flex-shrink:0; }
.nom-ville{ min-width:0; }
.nom-ville .ville{
  font-family:var(--font-display);
  font-weight:700;
  font-size:17px;
  color:var(--encre);
  display:block;
}
.nom-ville .pays{
  font-size:13px;
  color:var(--ardoise);
}

.barre-affinite{
  height:8px;
  background:var(--carte);
  border-radius:4px;
  overflow:hidden;
  position:relative;
}
.barre-affinite .remplissage{
  position:absolute;
  inset:0 auto 0 0;
  background:var(--turquoise);
  border-radius:4px;
  transition:width 460ms cubic-bezier(.22,.68,.3,1);
}
.score-affinite{
  font-family:var(--font-data);
  font-weight:600;
  font-size:16px;
  color:var(--turquoise);
  text-align:right;
}

.climat-mini{
  display:flex;
  gap:2px;
  align-items:flex-end;
  height:20px;
}
.climat-mini .barre{
  flex:1;
  height:100%;
  border-radius:1px;
}

.budget-ligne{
  font-family:var(--font-data);
  font-size:14px;
  color:var(--ardoise);
  text-align:right;
  white-space:nowrap;
}

/* ---------------- FICHE VILLE (dépliée) ---------------- */
.fiche{
  overflow:hidden;
  max-height:0;
  transition:max-height .35s ease;
}
.ligne-ville.ouverte .fiche{ max-height:2000px; }
.fiche-contenu{
  padding-top:22px;
  margin-top:18px;
  border-top:1px solid var(--ligne);
  display:flex;
  flex-direction:column;
  gap:24px;
  cursor:default;
}
.fiche-desc{ font-size:15.5px; color:var(--ardoise); max-width:70ch; }

.fiche-grille{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.fiche-colonne{ display:flex; flex-direction:column; gap:16px; }

.fiche-liste{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.fiche-liste li{
  font-size:14.5px;
  color:var(--ardoise);
  padding-left:18px;
  position:relative;
}
.fiche-liste.pour li::before{
  content:"";
  position:absolute; left:0; top:8px;
  width:6px; height:6px; border-radius:50%;
  background:var(--turquoise);
}
.fiche-liste.attention li::before{
  content:"";
  position:absolute; left:0; top:8px;
  width:6px; height:6px; border-radius:50%;
  background:var(--corail);
}
.fiche-liste.vie li::before{
  content:"";
  position:absolute; left:0; top:8px;
  width:6px; height:6px; border-radius:50%;
  background:var(--sable);
}

.fiche-fait{ display:flex; flex-direction:column; gap:2px; margin-bottom:12px; }
.fiche-fait .label{ font-size:12.5px; color:var(--ardoise); }
.badge-verifie{
  display:inline-block;
  margin-top:6px;
  font-family:var(--font-data);
  font-size:11.5px;
  font-weight:600;
  color:var(--turquoise);
  background:var(--turquoise-clair);
  border-radius:999px;
  padding:3px 10px;
  align-self:flex-start;
}
.badge-perime{
  display:inline-block;
  margin-top:6px;
  font-family:var(--font-data);
  font-size:11.5px;
  font-weight:600;
  color:var(--corail);
  background:#FBEDEA;
  border-radius:999px;
  padding:3px 10px;
  align-self:flex-start;
}
.badge-non-verifie{
  display:inline-block;
  margin-top:6px;
  font-size:11.5px;
  color:var(--ardoise);
  font-style:italic;
  align-self:flex-start;
}
.fiche-fait .valeur{ font-size:14.5px; color:var(--encre); font-weight:500; }

.climat-detail{ display:flex; flex-direction:column; gap:10px; }
.climat-barres{
  display:flex;
  gap:4px;
  align-items:flex-end;
  height:80px;
}
.climat-barres .colonne{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  height:100%;
  justify-content:flex-end;
}
.climat-barres .barre{
  width:100%;
  border-radius:2px 2px 0 0;
}
.climat-barres .mois{ font-size:10px; color:var(--ardoise); }
.climat-stats{
  display:flex;
  gap:24px;
  font-size:13.5px;
  color:var(--ardoise);
}
.climat-stats b{ color:var(--encre); font-family:var(--font-data); }

.fiche-scores{ display:flex; flex-direction:column; gap:10px; }
.score-item{ display:flex; align-items:center; gap:10px; }
.score-item .label{ font-size:13.5px; color:var(--ardoise); width:120px; flex-shrink:0; }
.score-item .barre{
  flex:1; height:6px; background:var(--carte); border-radius:3px; overflow:hidden;
}
.score-item .barre .remplissage{ height:100%; background:var(--turquoise); border-radius:3px; }
.score-item .valeur{ font-family:var(--font-data); font-size:13px; color:var(--encre); width:28px; text-align:right; }

.fiche-cta{
  display:flex;
  justify-content:flex-end;
}
.btn-turquoise{
  background:var(--turquoise);
  color:var(--blanc);
  border:none;
  border-radius:var(--radius-m);
  padding:12px 22px;
  font-size:14.5px;
  font-weight:600;
  text-decoration:none;
  display:inline-block;
}
.btn-turquoise:hover{ background:#096a70; }

/* ---------------- SAISON / REPÈRES DE PRIX ---------------- */
.saison-texte{
  font-size:13.5px;
  color:var(--ardoise);
  line-height:1.6;
  margin-top:10px;
}
.reperes-prix{ margin-top:4px; }
.reperes-grille{
  display:flex;
  flex-wrap:wrap;
  gap:16px 22px;
  margin:6px 0 8px;
}
.reperes-grille > div{ display:flex; flex-direction:column; max-width:100%; }
.reperes-grille .chiffre{ font-size:16px; color:var(--turquoise); line-height:1.3; }
.reperes-grille .repere-label{ font-size:12px; color:var(--ardoise); }
.budget-detail{
  width:100%;
  border-collapse:collapse;
  margin:6px 0 10px;
  font-size:13.5px;
}
.budget-detail th{
  text-align:left;
  font-family:var(--font-data);
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ardoise);
  font-weight:600;
  padding:0 8px 6px 0;
  border-bottom:1px solid var(--ligne);
}
.budget-detail th:not(:first-child), .budget-detail td:not(:first-child){ text-align:right; }
.budget-detail td{
  padding:8px 8px 8px 0;
  border-bottom:1px solid var(--ligne);
  color:var(--encre);
  vertical-align:top;
}
.budget-detail td:first-child{ color:var(--ardoise); }
.budget-detail td small{
  display:block;
  font-size:11px;
  color:var(--ardoise);
  font-weight:400;
  margin-top:2px;
}
.budget-detail .budget-total td{
  font-family:var(--font-data);
  font-weight:600;
  color:var(--turquoise);
  border-bottom:none;
}
.budget-detail .budget-total td:first-child{ color:var(--encre); }

.repere-note{ font-size:13.5px; color:var(--ardoise); }
.repere-note b{ color:var(--encre); font-family:var(--font-data); }

.scores-avances{ margin-top:4px; }
.scores-avances summary{
  cursor:pointer;
  font-size:13px;
  font-weight:600;
  color:var(--turquoise);
  margin-bottom:10px;
}
.scores-avances .fiche-scores{ margin-top:10px; }

/* ---------------- VUE TABLEAU ---------------- */
.tableau-scroll{
  overflow-x:auto;
  /* le défilement horizontal reste dans le tableau, il ne se propage pas à la page */
  overscroll-behavior-x:contain;
  background:var(--blanc);
  border:1px solid var(--ligne);
  border-radius:var(--radius-l);
}
/* Largeurs fixes : toutes les colonnes de notes, plus l'affinité et le budget,
   font exactement la même largeur. Les libellés longs passent sur deux lignes
   dans l'en-tête au lieu d'élargir leur colonne. */
.tableau-comparatif{
  border-collapse:collapse;
  table-layout:fixed;
  /* max-content, et surtout pas min-width:100% : sous table-layout fixed,
     l'espace excédentaire serait redistribué proportionnellement et les
     colonnes redeviendraient inégales. */
  width:max-content;
  font-size:13.5px;
}
.tableau-comparatif th, .tableau-comparatif td{
  padding:10px 6px;
  text-align:center;
  border-bottom:1px solid var(--ligne);
  width:78px;
}
.tableau-comparatif th:first-child, .tableau-comparatif td:first-child{
  width:180px;
  text-align:left;
  padding-left:14px;
}
.tableau-comparatif thead th{
  font-family:var(--font-data);
  font-size:10px;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--ardoise);
  position:sticky;
  top:0;
  background:var(--blanc);
  /* aligne par le bas pour que les en-têtes d'une et de deux lignes
     se terminent à la même hauteur */
  vertical-align:bottom;
  line-height:1.25;
  hyphens:auto;
  /* filet de sécurité : aucun libellé futur ne pourra élargir sa colonne */
  overflow-wrap:anywhere;
}
.tableau-comparatif tbody td{ white-space:nowrap; }
.tableau-comparatif .cellule-ville{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-display);
  font-weight:700;
  color:var(--encre);
}
.tableau-comparatif .cellule-ville small{
  display:block;
  font-family:var(--font-body);
  font-weight:400;
  font-size:11.5px;
  color:var(--ardoise);
}
.tableau-comparatif .cellule-affinite{
  font-family:var(--font-data);
  font-weight:600;
  color:var(--turquoise);
}
.tableau-comparatif td{ font-family:var(--font-data); color:var(--encre); }

/* ---------------- ÉTAT VIDE ---------------- */
.etat-vide{
  background:var(--blanc);
  border:1px dashed var(--ligne);
  border-radius:var(--radius-l);
  padding:40px;
  text-align:center;
  color:var(--ardoise);
}
.etat-vide h3{ color:var(--encre); margin-bottom:8px; }
.etat-vide button{
  margin-top:16px;
  background:none;
  border:1px solid var(--turquoise);
  color:var(--turquoise);
  border-radius:var(--radius-m);
  padding:8px 16px;
  font-size:14px;
  font-weight:600;
}

/* ---------------- PARTENAIRES ---------------- */
.partenaires{
  background:var(--blanc);
  padding:80px 0;
}
.partenaires .entete{ max-width:60ch; margin-bottom:44px; }
.partenaires .entete p{ color:var(--ardoise); margin-top:14px; font-size:16px; }
.grille-partenaires{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.carte-partenaire{
  border:1px solid var(--ligne);
  border-radius:var(--radius-l);
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.carte-partenaire .num{
  font-family:var(--font-data);
  font-size:13px;
  color:var(--turquoise);
  font-weight:600;
}
.carte-partenaire h3{ font-size:18px; }
.carte-partenaire p{ font-size:14.5px; color:var(--ardoise); flex-grow:1; }

/* Carte mise en avant quand elle est prioritaire pour la ville choisie */
.carte-partenaire.prioritaire{
  border-color:var(--turquoise);
  box-shadow:0 0 0 1px var(--turquoise);
}

/* Phrase contextuelle : pourquoi cette démarche compte pour CETTE ville */
.partenaire-contexte{
  background:var(--turquoise-clair);
  border-left:3px solid var(--turquoise);
  border-radius:0 var(--radius-s) var(--radius-s) 0;
  padding:10px 12px;
  font-size:13.5px !important;
  color:var(--encre) !important;
  flex-grow:0 !important;
}

.lien-partenaire{
  font-family:var(--font-data);
  font-size:13.5px;
  font-weight:600;
  color:var(--turquoise);
  text-decoration:none;
  margin-top:4px;
}
a.lien-partenaire:hover{ text-decoration:underline; }
.lien-partenaire.inactif{
  color:var(--ardoise);
  font-weight:500;
  font-style:italic;
}

.btn-reset-ville{
  margin-top:14px;
  background:none;
  border:1px solid var(--ligne);
  color:var(--ardoise);
  border-radius:var(--radius-m);
  padding:7px 14px;
  font-size:13.5px;
  font-weight:600;
}
.btn-reset-ville:hover{ border-color:var(--turquoise); color:var(--turquoise); }

.choix-partenaires{
  margin-top:32px;
  padding:20px 24px;
  background:var(--carte);
  border-radius:var(--radius-l);
}
.choix-partenaires h3{ font-size:16px; margin-bottom:8px; }
.choix-partenaires p{ font-size:14px; color:var(--ardoise); max-width:80ch; }
.disclosure{
  margin-top:32px;
  font-size:13px;
  color:var(--ardoise);
  border-top:1px solid var(--ligne);
  padding-top:20px;
}

/* ---------------- DOSSIER PDF ---------------- */
.dossier{
  background:var(--encre);
  color:var(--blanc);
  padding:80px 0;
}
.dossier-grille{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:center;
}
.dossier h2{ margin-bottom:16px; }
.dossier p{ color:#C7D2E0; font-size:16px; max-width:44ch; }
.dossier-liste{ list-style:none; padding:0; margin:20px 0 0; display:flex; flex-direction:column; gap:8px; }
.dossier-liste li{ font-size:14.5px; color:#C7D2E0; padding-left:20px; position:relative; }
.dossier-liste li::before{ content:"—"; position:absolute; left:0; color:var(--sable); }

.form-dossier{
  background:var(--encre2);
  border-radius:var(--radius-l);
  padding:28px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.form-dossier label{ font-size:13.5px; color:#C7D2E0; }
.form-dossier input[type="email"],
.form-dossier input[type="text"]{
  width:100%;
  padding:12px 14px;
  border-radius:var(--radius-m);
  border:1px solid #33486A;
  background:var(--encre);
  color:var(--blanc);
  font-size:15px;
  font-family:var(--font-body);
}
.form-dossier input::placeholder{ color:#6E82A0; }
.form-dossier .btn-turquoise{ text-align:center; border:none; }
.consentement{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:13px;
  color:#C7D2E0;
  line-height:1.5;
  cursor:pointer;
}
.consentement input{
  margin-top:2px;
  width:18px;
  height:18px;
  accent-color:var(--turquoise);
  flex-shrink:0;
}
.form-note{ font-size:12px; color:#8FA0B8; }

/* ---------------- PIED DE PAGE ---------------- */
footer{
  background:var(--encre);
  border-top:1px solid #24385A;
  padding:40px 0 56px;
}
footer .avertissement{
  font-size:12.5px;
  color:#8FA0B8;
  line-height:1.7;
  max-width:90ch;
}
footer .avertissement + .avertissement{ margin-top:14px; }
footer .bas{
  margin-top:28px;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:6px 16px;
  font-size:12.5px;
  color:#6E82A0;
}

/* ---------------- BANDEAU STATUT DONNÉES ---------------- */
.bandeau-statut{
  background:var(--sable);
  color:var(--encre);
  text-align:center;
  font-size:13px;
  font-weight:500;
  padding:10px 16px;
}

/* ============================================================
   PAGES VILLES (contenu éditorial indexable)
   ============================================================ */
.entete-site{
  background:var(--encre);
  padding:16px 0;
}
.entete-site .container{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.logo-site{
  font-family:var(--font-display);
  font-weight:700;
  font-size:20px;
  color:var(--blanc);
  text-decoration:none;
  letter-spacing:-0.02em;
}
.entete-site nav{ display:flex; gap:20px; }
.entete-site nav a{ color:#C7D2E0; text-decoration:none; font-size:14.5px; font-weight:500; }
.entete-site nav a:hover{ color:var(--blanc); }

.fil-ariane{ font-size:13px; color:var(--ardoise); padding:16px 0 0; }
.fil-ariane a{ color:var(--ardoise); }
.fil-ariane span{ margin:0 6px; }

.article-ville{ max-width:760px; margin:0 auto; padding:24px 24px 80px; }
.article-ville h1{ font-size:clamp(28px,4.4vw,44px); margin:8px 0 16px; }
.article-ville .chapo{ font-size:18px; color:var(--ardoise); line-height:1.6; margin-bottom:28px; }
.article-ville h2{ font-size:clamp(22px,2.8vw,30px); margin:44px 0 14px; }
.article-ville h3{ font-size:17px; margin:26px 0 10px; }
.article-ville p{ margin-bottom:14px; line-height:1.7; color:var(--encre); }
.article-ville ul{ margin:0 0 16px; padding-left:22px; }
.article-ville li{ margin-bottom:8px; line-height:1.6; color:var(--ardoise); }
.article-ville strong{ color:var(--encre); }

.encadre-cle{
  background:var(--blanc);
  border:1px solid var(--ligne);
  border-radius:var(--radius-l);
  padding:22px 24px;
  margin:24px 0 32px;
}
.encadre-cle h2{ font-size:17px; margin:0 0 14px; }
.grille-cle{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px; }
.grille-cle > div{ display:flex; flex-direction:column; gap:2px; }
.grille-cle .valeur{ font-family:var(--font-data); font-size:19px; font-weight:600; color:var(--turquoise); }
.grille-cle .etiquette{ font-size:12.5px; color:var(--ardoise); }

.encadre-verdict{
  background:var(--encre);
  color:var(--blanc);
  border-radius:var(--radius-l);
  padding:24px 26px;
  margin:32px 0;
}
.encadre-verdict h2{ color:var(--blanc); margin:0 0 14px; font-size:20px; }
.encadre-verdict h3{ color:var(--sable); font-size:15px; margin:18px 0 8px; }
.encadre-verdict ul{ padding-left:20px; margin-bottom:0; }
.encadre-verdict li{ color:#C7D2E0; }

.bloc-cta{
  background:var(--turquoise-clair);
  border:1px solid var(--turquoise);
  border-radius:var(--radius-l);
  padding:24px 26px;
  margin:36px 0;
  text-align:center;
}
.bloc-cta p{ margin-bottom:16px; color:var(--encre); }

.villes-liees{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; margin-top:16px; }
.carte-ville-liee{
  display:block;
  background:var(--blanc);
  border:1px solid var(--ligne);
  border-radius:var(--radius-m);
  padding:14px 16px;
  text-decoration:none;
}
.carte-ville-liee:hover{ border-color:var(--turquoise); }
.carte-ville-liee .nom{ font-family:var(--font-display); font-weight:700; color:var(--encre); display:block; }
.carte-ville-liee .meta{ font-size:12.5px; color:var(--ardoise); }

.source-note{
  font-size:12.5px;
  color:var(--ardoise);
  border-top:1px solid var(--ligne);
  padding-top:16px;
  margin-top:40px;
}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:900px){
  .hero-grille{ grid-template-columns:1fr; gap:32px; }
  .grille{ grid-template-columns:1fr; }
  .panneau{ position:static; max-height:none; }
  .ligne-resume{
    grid-template-columns:20px 26px 1fr 64px 30px;
    gap:10px;
  }
  .score-affinite{ font-size:14px; }
  .climat-mini, .budget-ligne{ display:none; }
  .fiche-grille{ grid-template-columns:1fr; }
  .grille-partenaires{ grid-template-columns:1fr; }
  .dossier-grille{ grid-template-columns:1fr; gap:32px; }
  .hero{ padding:20px 0 18px; }
  .hero-grille{ gap:14px; }
  .hero .eyebrow{ font-size:13px; margin-bottom:8px; }
  .hero h1{ margin:0 0 12px; }
  .hero .these{ margin-bottom:16px; }
  .hero-actions{ margin-bottom:16px; gap:12px; }
  .hero-chiffres{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
  .hero-chiffre .valeur{ font-size:24px; }
  .hero-apercu-carte{ padding:16px; margin-top:0; }
  .hero-apercu-lignes{ min-height:0; gap:7px; }
  /* Le bandeau légal mange 120px sur mobile : on le densifie sans le raccourcir */
  .bandeau-statut{ font-size:11.5px; line-height:1.4; padding:7px 12px; text-align:left; }
}

@media (prefers-reduced-motion:reduce){
  .ligne-ville, .barre-affinite .remplissage, .fiche{ transition:none !important; }
  html{ scroll-behavior:auto; }
}