/* ==========================================================================
   mdt-villes.css — chantier "20 villes" (18/09/2026).
   Fichier PROPRE à ce chantier : style.css est réservé (un autre agent y
   travaille), donc tout l'habillage neuf des pages ville/villes/spécialité
   vit ici. Chargé par page-ville.php, page-villes.php et page-specialite.php
   eux-mêmes (link + filemtime en cache-buster), jamais via functions.php.
   Zéro nouvelle couleur, zéro rayon : on n'utilise QUE les jetons déjà
   déclarés dans :root de style.css (--fond/--encre/--doux/--filet/--accent/
   --accent-txt/--titre/--courant). Aucun --rayon n'est réintroduit ici.
   ========================================================================== */

/* ---------- 1. Carte de France — REFAITE le 19/09/2026 ------------------------------
   Retour Mathias : « la carte des villes est buguee, a refaire nettement mieux ».
   Trois defauts mesures et corriges ici :
   - plus AUCUNE animation de trace (l'ancienne stroke-dasharray:1400 coupait 336 px du
     contour, de longueur reelle 1736 px : 19 % du dessin invisible en permanence) ;
   - les etiquettes de ville sont VISIBLES en permanence a partir de 900 px (avant : seul
     le survol les revelait, donc rien du tout au doigt) ;
   - la carte est plus grande (860 px contre 560) et la silhouette lit enfin sur le fond
     (fond de terre distinct de --fond, trait d'encre a 1.1).
   Zero nouvelle couleur : uniquement les jetons de :root (style.css). */
.mdt-carte-france{width:100%;max-width:860px;height:auto;display:block;overflow:visible}
.mdt-carte-france-compteur{font-size:12.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--doux);margin:0 0 1.4rem;text-align:center}
.mdt-carte-france-compteur strong{font-family:var(--titre);font-size:16px;font-weight:700;
  letter-spacing:0;text-transform:none;color:var(--accent-txt)}

/* fond de carte */
/* plaques de region : teinte DERIVEE des jetons (encre dans le fond), aucune couleur neuve ;
   le filet couleur du fond entre deux regions dessine les frontieres sans double trait. */
.mdt-carte-regions{fill:var(--surf);fill:color-mix(in srgb,var(--encre) 10%,var(--fond));
  stroke:var(--fond);stroke-width:1.5;stroke-linejoin:round;pointer-events:none}
.mdt-carte-filets line{stroke:var(--encre);stroke-width:.6;opacity:.45}
.mdt-carte-filets circle{fill:var(--encre);opacity:.5}
.mdt-carte-filets{pointer-events:none}

/* un point de ville */
.mdt-carte-point{cursor:pointer}
.mdt-carte-zone{fill:transparent}
 /* NB : on grossit par transform (transform-box:fill-box), jamais par la propriete CSS
    `r` — `r` comme propriete de style n'est pas supporte partout (Firefox), et un point
    qui ne grossit pas au survol donnerait une carte "morte" sur un navigateur sur trois. */
.mdt-carte-pastille{fill:var(--accent);stroke:var(--fond);stroke-width:1.6;
  transform-box:fill-box;transform-origin:center;
  transition:transform .15s ease,fill .15s ease}
.mdt-carte-halo{fill:none;stroke:var(--accent);stroke-width:0;opacity:0;transition:opacity .2s ease}
.mdt-carte-point:hover .mdt-carte-pastille,
.mdt-carte-point:focus-visible .mdt-carte-pastille,
.mdt-carte-point.est-actif .mdt-carte-pastille{transform:scale(1.5);fill:var(--accent-txt)}
.mdt-carte-point:hover .mdt-carte-halo,
.mdt-carte-point:focus-visible .mdt-carte-halo,
.mdt-carte-point.est-actif .mdt-carte-halo{stroke-width:1.4;opacity:.6}
.mdt-carte-point:focus-visible{outline:2px solid var(--accent-txt);outline-offset:2px}

/* l'etiquette : un liseré de la couleur du fond derriere le texte (paint-order) pour
   qu'elle reste lisible quand elle croise une frontiere de region. */
.mdt-carte-nom{font-family:var(--courant);font-weight:700;fill:var(--encre);
  paint-order:stroke;stroke:var(--fond);stroke-width:3.2;stroke-linejoin:round;
  pointer-events:none;transition:fill .15s ease}
.mdt-carte-point:hover .mdt-carte-nom,
.mdt-carte-point:focus-visible .mdt-carte-nom,
.mdt-carte-point.est-actif .mdt-carte-nom{fill:var(--accent-txt)}

/* apparition : fondu du fond, puis les points se posent l'un apres l'autre. Aucune
   longueur de chemin en jeu, donc rien qui puisse re-couper le trace. */
@media (prefers-reduced-motion:no-preference){
  .mdt-carte-regions{opacity:0;animation:mdt-carte-fondu .7s ease-out .05s forwards}
  .mdt-carte-point{opacity:0;animation:mdt-carte-pose .45s ease-out forwards;
    animation-delay:calc(.45s + var(--mdt-ordre,0) * .035s)}
}
@keyframes mdt-carte-fondu{to{opacity:1}}
@keyframes mdt-carte-pose{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* panneau d'apercu sous la carte */
.mdt-carte-panneau{min-height:104px;width:100%;max-width:520px;margin:0 auto;
  border:1px solid var(--filet);background:var(--surf);padding:1.1rem 1.4rem;text-align:center;
  display:flex;flex-direction:column;justify-content:center;gap:.35rem}
.mdt-carte-panneau-invite{margin:0;font-size:13.5px;color:var(--doux)}
.mdt-carte-panneau-ville{margin:0;font-family:var(--titre);font-size:20px;
  font-weight:700;letter-spacing:-.01em;color:var(--encre)}
.mdt-carte-panneau-resume{margin:0;font-size:13.5px;color:var(--doux);line-height:1.5}
.mdt-carte-panneau-lien{display:inline-block;margin-top:.4rem;font-size:13px;font-weight:700;
  color:var(--accent-txt);border-bottom:1px solid var(--accent-txt)}
.mdt-carte-panneau-lien:hover{text-decoration:none}

/* liste de secours (accessibilite, no-CSS, et sur mobile : la SEULE lecture complete des noms) */
.mdt-carte-liste-titre{margin:.4rem 0 0;font-size:11.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--doux);text-align:center}

/* Sous 900 px les 22 etiquettes ne tiennent plus : on n'affiche que celle de la ville
   active. Les noms restent lisibles d'un coup dans la liste sous la carte. */
@media (max-width:899px){
  .mdt-carte-nom{opacity:0;transition:opacity .15s ease}
  .mdt-carte-point:hover .mdt-carte-nom,
  .mdt-carte-point:focus-visible .mdt-carte-nom,
  .mdt-carte-point.est-actif .mdt-carte-nom{opacity:1}
  .mdt-carte-nom{font-size:17px!important;stroke-width:4.5}
  .mdt-carte-pastille{transform:scale(1.22)}
  .mdt-carte-point:hover .mdt-carte-pastille,
  .mdt-carte-point:focus-visible .mdt-carte-pastille,
  .mdt-carte-point.est-actif .mdt-carte-pastille{transform:scale(1.7)}
}
@media (max-width:640px){
  .mdt-carte-france-compteur{font-size:11.5px;margin-bottom:1rem}
  .mdt-carte-panneau{padding:1rem 1.1rem;min-height:112px}
}

/* trait qui relie une etiquette posee loin (zone dense du sud-est) a son propre point */
.mdt-carte-amene{stroke:var(--encre);stroke-width:.55;opacity:.4;pointer-events:none}
.mdt-carte-point:hover .mdt-carte-amene,
.mdt-carte-point.est-actif .mdt-carte-amene{stroke:var(--accent-txt);opacity:.9}
@media (max-width:899px){.mdt-carte-amene{opacity:0}
  .mdt-carte-point:hover .mdt-carte-amene,
  .mdt-carte-point:focus-visible .mdt-carte-amene,
  .mdt-carte-point.est-actif .mdt-carte-amene{opacity:.9}}

/* Au doigt, Chrome dessinait le cadre de focus (orange, style.css) autour du point ET de son
   etiquette : un gros rectangle sur la carte (capture 390 px du 19/09). Le reperage clavier
   reste assure par le halo + l'etiquette colores en :focus-visible (regles ci-dessus). */
.mdt-carte-point:focus,.mdt-carte-point:focus-visible{outline:none}

/* ---------- 2. Page ville — sections neuves (gabarit piloté par données) ------------- */
.mdt-ville-secteurs{padding-block:2.6rem;border-bottom:1px solid var(--filet)}
.mdt-ville-repere{padding-block:2.8rem;border-bottom:1px solid var(--filet)}
.mdt-ville-savoirplus{padding:2.2rem 0 3rem;text-align:left}
.mdt-ville-savoirplus .mdt-btn-fantome{display:inline-flex;align-items:center;gap:.5rem;
  background:none;border:1px solid var(--filet-fort);color:var(--encre);
  font-family:var(--courant);font-size:13.5px;font-weight:700;letter-spacing:.03em;
  padding:.85rem 1.4rem;cursor:pointer}
.mdt-ville-savoirplus .mdt-btn-fantome:hover{background:var(--encre);color:var(--fond)}
.mdt-ville-toutes-villes{padding:1.6rem 0 3rem;text-align:left}
.mdt-ville-toutes-villes a{font-size:13.5px;font-weight:700;color:var(--accent-txt);
  border-bottom:1px solid var(--accent-txt)}
.mdt-ville-toutes-villes a:hover{text-decoration:none}

/* le corps court (accroche, 2-3 phrases) : légèrement mis en avant, jamais centré,
   toujours aligné sur la même grille à gauche que le reste du gabarit. */
.mdt-ville-accroche{padding-top:2.4rem}
.mdt-ville-accroche p{font-size:17.5px;line-height:1.65;color:var(--encre);
  max-width:66ch;margin:0}

/* ---------- 3. Modale "En savoir plus" (texte long SEO, présent dans le HTML,
   simplement masqué tant qu'on ne clique pas — jamais un mur de texte sous le
   contenu). Réutilise EXACTEMENT le look du pop-up maison déjà en place
   (.mdt-popup-fond/.mdt-popup/.mdt-popup-fermer, style.css) : même famille
   visuelle, un seul modificateur --large pour la largeur et le défilement. --- */
.mdt-popup.mdt-popup--large{max-width:720px;max-height:min(78vh,720px);
  overflow-y:auto;padding:2.4rem 2.6rem 2.2rem;text-align:left}
.mdt-popup--large h3{font-size:26px;margin-bottom:1rem}
.mdt-popup--large .mdt-popup-corps p{font-size:15.5px;line-height:1.7;color:var(--doux);
  margin:0 0 1.1rem;max-width:none}
.mdt-popup--large .mdt-popup-corps p:last-child{margin-bottom:0}

/* ---------- 4. Hero sans photo (villes sans visuel dédié) : premier écran
   100% typographique, conforme au principe fondateur du gabarit "tribune"
   (DIRECTION-ARTISTIQUE.md) — ce n'est pas un manque, c'est la règle par
   défaut du site ; seules Paris/Lyon/Marseille ont une photo dédiée. -------- */
.mdt-page-hero:not(.mdt-page-hero--photo) h1{max-width:20ch}

@media (max-width:640px){
  .mdt-carte-france{max-width:100%}
  .mdt-popup.mdt-popup--large{padding:1.8rem 1.4rem 1.6rem;max-height:82vh}
  .mdt-popup--large h3{font-size:22px}
}

/* R-0624 (Mathias 18/09) — le formulaire monte dans le hero, colonne de droite.
   Avant : il occupait seul une section entiere, la moitie droite de l'ecran vide
   ("les grands espaces blancs, c'est pas beau"). Meme grille que le hero photo. */
/* 26/09/2026 (A3, #13) : le bloc chiffres est sorti de .mdt-ville-txt (voir page-ville.php) pour
   avoir sa propre zone de grille "chiffres" — désormais une zone RECTANGLE "vform" sur 2 lignes
   à desktop (le formulaire reste visuellement à droite, inchangé), et une 3e ligne APRÈS "vform"
   en mobile (le formulaire remonte avant le bloc chiffres, cf. justification #13 dans le PHP). */
.mdt-page-hero--form .mdt-page-hero-in{display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,420px);
  grid-template-areas:"txt vform" "chiffres vform";gap:2.4rem;align-items:start}
.mdt-page-hero--form .mdt-ville-txt{grid-area:txt;min-width:0}
.mdt-page-hero--form .mdt-ville-form{grid-area:vform;min-width:0;border:1px solid var(--filet);
  background:var(--fond);padding:1.4rem 1.5rem 1.6rem}
.mdt-page-hero--form .mdt-ville-form .mdt-form-titre,
.mdt-page-hero--form .mdt-ville-form h2{font-size:21px;margin-top:0}
.mdt-page-hero--form .mdt-ville-form .mdt-choix-grille{grid-template-columns:repeat(2,1fr)}
.mdt-page-hero--form h1{max-width:18ch}
@media (max-width:1000px){
  .mdt-page-hero--form .mdt-page-hero-in{grid-template-columns:minmax(0,1fr);
    grid-template-areas:"txt" "vform" "chiffres";gap:1.8rem}
  .mdt-page-hero--form h1{max-width:none}
}

/* R-0625 — les chiffres de la ville occupent le bas de la colonne gauche du hero à desktop.
   Sans ca la colonne est vide sous le resume ("les grands espaces blancs, c'est moche"). */
.mdt-ville-hero-chiffres{margin-top:2.2rem;padding-top:1.4rem;border-top:1px solid var(--filet)}
.mdt-ville-hero-chiffres .sbs_jauges{gap:0}
@media (max-width:1000px){.mdt-ville-hero-chiffres{margin-top:1.2rem;padding-top:1rem}}