/*
Theme Name: Ville Idéale
Description: Observatoire de communes — hub multi-thèmes + silos (solaire, immobilier…), data publique importée par WP-CLI.
Author: Thibault Fayol
Version: 3.0.0
Requires PHP: 8.0
Text Domain: ville-ideale
*/

/* ── Design tokens : charte canonique refonte 2026 ────────────────────────────
   Source : design-2026/tokens/ (handoff du 25/07/2026 au soir). Remplace la
   charte « wireframe manuscrit » appliquee plus tot le meme jour : la police
   cursive Architects Daughter etait le trait du wireframe, pas la titraille du
   site — le handoff tranche pour Archivo / Spectral / Oswald.

   Deux couleurs, deux metiers : le BLEU structure (navigation, liens, controles,
   pied de page), le ROUGE juge (verdict, meilleure valeur, onglet actif). Jamais
   l'inverse. Palette desaturee d'un cran par rapport a la signaletique d'Etat :
   #000091 / #E1000F fatiguent sur des pages de donnees lues longuement.
   « Aucune ombre portee nulle part » : cette regle de la charte du 25/07 n'a jamais
   ete tenue, et elle est abandonnee au 2026-08-13. Mesure : 174 box-shadow litteraux
   dans les quatre feuilles (133 ici), plus --shadow-card lu 14 fois par
   wireframe-2026.css sur les ecrans a fort trafic. Les jetons --shadow* portent
   desormais les valeurs de charte-2026.css partout (cf. plus bas). La hierarchie vient
   toujours d'abord des filets et de la taille des chiffres — l'ombre est un appoint,
   pas le mecanisme. */
:root {
  /* Socle bleu / rouge.

     ⚠️ Ces trois valeurs sont l'ANCIEN navy, antérieur à la charte 2026. Elles ne
     survivaient que parce que charte-2026.css (qui pose --bleu-france: #2563EB)
     n'est PAS chargé sur les écrans wireframe : accueil, fiche commune, comparer,
     classements, carte, explorer, favoris, profil. Résultat mesuré le 12/08/2026
     sur les pages servies : --link, --brand et --focus-ring valaient #27356F sur
     /niort-79/ et /comparer/, et #2563EB sur /faq/. Le site servait donc deux
     couleurs de lien selon la famille d'écran, alors que 13 règles d'ici en
     dérivent (--link, --focus-ring, --brand, --rank-n, --good-fg, --info-fg).
     Aligné sur #2563EB, la couleur de marque unique arbitrée le 12/08. */
  /* ⚠️ 2026-08-13 — arbitrage de palette. Ce fichier et charte-2026.css portaient
     31 tokens de couleur homonymes aux valeurs DIFFERENTES. Comme charte-2026.css
     n'est pas charge sur les ecrans wireframe (accueil, les 34 841 fiches, comparer,
     classements, explorer, carte, favoris) et que style.css y gagne seul, le site
     servait deux palettes selon la famille d'ecran — pas seulement deux bleus de lien.
     Le plus visible : --best / --rank-1, le marqueur « meilleure valeur », etait ROUGE
     sur les fiches et le comparateur, VERT sur /faq/ et les hubs.
     charte-2026.css fait autorite (kit MaVilleIdeale_Assets_V2_Clean, le plus recent) :
     ses valeurs sont recopiees ici a l'identique. Les echelles typographiques et les
     rayons restent volontairement distincts entre les deux familles — ce sont deux
     gabarits differents, pas une divergence. */
  --bleu-france:       #2563EB;
  --bleu-france-hover: #1D4FD8;
  --bleu-survol:       #0E315B;
  --bleu-975:          #F7FAFF;
  --bleu-950:          #EAF2FF;
  --bleu-925:          #D8E3F2;
  /* Le kit reserve le rouge a l'alerte et l'interdit en decoration : d'ou le bascule
     de --best / --rank-1 vers le vert plus bas. */
  --rouge-marianne:    #EF4444;
  --rouge-975:         #FDE8E8;

  /* Encre — Optimisation WCAG 2.2 AAA */
  --ink:        #0F172A;
  --ink-soft:   #334155;
  --ink-faint:  #475569;
  --ink-mute:   #64748B;
  --on-deep:       #FFFFFF;
  --on-deep-soft:  #D8E3F2;
  --on-rouge:      #FFFFFF;
  --on-rouge-soft: #FBEDEC;

  /* Fonds et filets */
  --bg:           #FFFFFF;
  --bg-soft:      #F7FAFF;
  --bg-zebra:     #F7FAFF;
  --border:       #D8E3F2;
  --border-soft:  #EAF2FF;
  --border-strong:#B9CCE6;

  /* Semantique de donnees : le vert porte le positif, l'ambre l'attention, le rouge
     l'alerte. Jamais l'inverse. */
  --best:        #10B981;
  --best-bg:     #DDF8EE;
  --best-rule:   3px;
  --rank-1:      #10B981;
  --rank-n:      var(--bleu-france);
  --gauge-track: #EAF2FF;

  /* Alias semantiques */
  --text-body:     var(--ink-soft);
  --text-heading:  var(--ink);
  --text-meta:     var(--ink-faint);
  --surface-card:  var(--bg);
  --surface-panel: var(--bg-soft);
  --surface-info:  var(--bleu-975);
  --link:          var(--bleu-france);
  --link-visited:  var(--bleu-survol);
  --focus-ring:    var(--bleu-france);

  --font-display: "Poppins", "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-ui:      "Inter", system-ui, -apple-system, sans-serif;
  --font-num:     "JetBrains Mono", "Space Grotesk", "Inter", monospace;
  --font-display-accent: var(--font-display);

  --fs-h1: 56px;      --lh-h1: .98;      --ls-h1: -.038em;
  --fs-verdict: 34px; --lh-verdict: 1.06; --ls-verdict: -.028em;
  --fs-h2: 27px;      --lh-h2: 1.1;      --ls-h2: -.005em;
  --fs-h3: 20px;      --lh-h3: 1.2;
  --fs-lead: 18.5px;  --lh-lead: 1.45;
  --fs-body: 16px;    --lh-body: 1.55;
  --fs-ui: 13.5px;    --lh-ui: 1.35;
  --fs-meta: 12px;    --lh-meta: 1.45;
  --fs-kicker: 11px;  --ls-kicker: .13em;
  --fs-num-xl: 30px;  --fs-num-lg: 24px; --fs-num-md: 22px;
  --fw-display: 800;  --fw-num: 500;     --fw-num-strong: 600; --fw-ui-strong: 600;

  /* Espacement et gabarit */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 26px; --s-7: 32px; --s-8: 44px; --s-9: 60px;
  --wrap-max: 1280px; --wrap-pad: 32px; --aside-w: 300px;
  --col-critere: 230px; --col-ville: 172px; --row-pad: 15px;
  --ad-300x600: 600px; --ad-inarticle: 250px; --ad-multiplex: 170px; --ad-anchor: 50px;

  /* Surfaces : rayons, filets, mouvement (Design System Charte 2026 - Modern Rounded) */
  --radius-xs:   8px;
  --radius-sm:   12px;
  --radius:      16px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --radius-pill: 999px;
  --border-w:  1px;
  --rule-strong: 3px;
  --lift: translateY(-2px);
  --ease: cubic-bezier(.22,.68,.28,1);
  --dur-micro: .14s; --dur: .18s; --dur-enter: .45s;

  /* ── Ponts vers les noms de tokens de la v3.0.0 ────────────────────────────
     Le thème compte ~800 `var(--brand*)`, `var(--bg-tint)`, `var(--shadow*)`
     hérités. Plutôt qu'une passe de renommage sur 191 Ko de CSS (risque de
     régression pour zéro gain visuel), les anciens noms pointent vers la
     nouvelle palette. Tout nouveau code consomme les tokens ci-dessus. */
  --brand:      var(--bleu-france);
  /* Etait #1A6BF2 en dur, une teinte qui n'existe plus nulle part ailleurs : --brand-dark,
     --brand-deep et --good-fg en derivent par color-mix(), ils suivaient donc une marque
     fantome au lieu de la marque affichee. */
  --brand-2026: var(--bleu-france);
  --brand-dark: color-mix(in srgb, var(--brand-2026) 82%, black);
  --brand-deep: color-mix(in srgb, var(--brand-2026) 62%, black);
  --brand-soft: var(--bleu-975);
  --brand-100:  var(--bleu-925);
  --accent-rouge:      var(--rouge-marianne);
  --accent-rouge-soft: var(--rouge-975);
  --bg-tint:  var(--bleu-975);
  --bg-card:  var(--bg);
  --radius-md: var(--radius);
  /* DS-06 : Élevations nettes à micro-bordures au lieu d'ombres floues baveuses */
  --shadow:           0 1px 3px rgba(15, 23, 42, .06), 0 0 0 1px rgba(15, 23, 42, .05);
  --shadow-sm:        0 1px 2px rgba(15, 23, 42, .05), 0 0 0 1px rgba(15, 23, 42, .04);
  --shadow-md:        0 4px 12px rgba(15, 23, 42, .06), 0 0 0 1px rgba(15, 23, 42, .06);
  --shadow-lg:        0 10px 25px rgba(15, 23, 42, .08), 0 0 0 1px rgba(15, 23, 42, .08);
  --shadow-hover:     0 8px 20px rgba(15, 23, 42, .08), 0 0 0 1px rgba(37, 99, 235, .18);
  --shadow-elevation: 0 12px 30px rgba(15, 23, 42, .08), 0 0 0 1px rgba(15, 23, 42, .08);
  /* Etaient bleus ici et verts dans la charte : le meme etat « bon » changeait de
     couleur entre une fiche et un hub. Alignes sur le vert de la charte. */
  --good-bg: #DDF8EE; --good-fg: #10B981;
  /* Dérivés : le kit ne fournit ni vert lisible en texte ni filet vert. --good-fg
     posé sur --good-bg tombe à ~1,9:1, sous AA. Calculés dans la même famille, ils
     suivent donc --good-fg au lieu de figer un ton. */
  --good-ink:  color-mix(in srgb, var(--good-fg) 55%, black);
  --good-line: color-mix(in srgb, var(--good-fg) 40%, white);
  --info-bg: var(--bleu-975); --info-fg: var(--bleu-france);
  /* --warn-* n'existait pas comme ambre ici : le fond reprenait --bg-soft et l'encre
     --ink-soft, donc l'avertissement n'etait pas distinguable d'un bloc neutre. */
  --warn-bg: #FFF1D6;  --warn-fg: #B45309;
  --bad-bg:  var(--rouge-975); --bad-fg:  var(--rouge-marianne);
  --neut-bg: var(--bg-soft);   --neut-fg: var(--ink-faint);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-micro: .001ms; --dur: .001ms; --dur-enter: .001ms; }
}

* { box-sizing: border-box; }

:root { --ps-anchor-offset: 9rem; }
@media (max-width: 700px) { :root { --ps-anchor-offset: 6.5rem; } }
h1[id], h2[id], h3[id], h4[id], section[id], article[id] {
  scroll-margin-top: var(--ps-anchor-offset);
}

body {
  font-family: var(--font-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html, body { background-color: var(--bg); overflow-x: clip; }

/* Le composant "pour et contre" a une implementation unique, plus bas dans ce fichier
   ("Bloc en un coup d oeil"). La version pastel qui vivait ici etait entierement
   ecrasee par elle, sauf une ombre residuelle qui ne correspondait a aucun design. */

.ps-wrap { max-width: 1240px; margin: 0 auto; padding: 1.5rem 2rem; }

h1, h2, h3, h4, .ps-font-display {
  font-family: var(--font-display);
  color: var(--ink);
}
/* text-wrap: balance repartit les lignes d'un titre au lieu de laisser un mot
   seul sur la derniere ; il n'etait pose que sur deux h1 du site. pretty fait
   le meme travail, en moins fort, sur les paragraphes longs. */
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
h1 { font-weight: 800; font-size: clamp(2.2rem, 4.8vw, 3.4rem); line-height: 1.08; margin: .6rem 0 .8rem; letter-spacing: -0.01em; }
h2 { font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2.05rem); line-height: 1.15; margin: 0 0 .7rem; letter-spacing: -0.005em; }
h3 { font-weight: 700; font-size: 1.25rem; margin: 1.2rem 0 .4rem; letter-spacing: 0; }
a { color: var(--brand-dark); text-decoration: none; }
main p a:not(.ps-cta-btn), main .ps-section > ul:not(.ps-home-classements) a, .ps-home-depts a, .ps-footer a { text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--brand-deep); }
a:active { color: var(--brand-deep); }
p { margin: .5rem 0; }

/* ── Header ──────────────────────────────────────────────────────────────── */
/* Le filet grenat 2px est le SEUL usage structurel de l'accent rouge (charte SS1) :
   un signal civique discret, jamais un aplat ni un fond de section. */
.ps-header {
  border-bottom: 2px solid var(--accent-rouge);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  position: sticky; top: 0; z-index: 50;
}
.ps-nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding-top: .7rem;
  padding-bottom: .7rem;
}
.ps-logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -.01em;
  color: var(--ink);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  flex-shrink: 0;
}
.ps-logo-svg { width: 32px; height: 32px; border-radius: var(--radius); flex: none; }
.ps-nav-links { display: flex; flex-wrap: nowrap; align-items: center; gap: 1.15rem; flex-shrink: 0; }
/* padding-block genereux : la cible cliquable fait ~40px de haut, pas la hauteur
   de la ligne de texte (WCAG 2.2 target-size, minimum 24px). */
.ps-nav-links a {
  color: var(--ink-soft); font-size: .91rem; font-weight: 600; position: relative;
  padding: .65rem 0;
  white-space: nowrap; transition: color .25s cubic-bezier(.2,.8,.2,1), transform .25s cubic-bezier(.2,.8,.2,1);
}
.ps-nav-links a:hover { color: var(--brand-dark); }
.ps-nav-links a:active { color: var(--brand-dark); transform: translateY(1px); }
.ps-nav-links a:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: var(--radius); }
.ps-nav-links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: .38rem; height: 2px;
  background: var(--brand); border-radius: var(--radius); transition: right .25s cubic-bezier(.2,.8,.2,1);
}
.ps-nav-links a:hover::after { right: 0; }

/* ── Nav groupée ─────────────────────────────────────────────────────────── */
.ps-nav-group { position: relative; }
/* Le declencheur est un <button> et non un <span> : au doigt (tablette, 861px et plus,
   ou le survol n'existe pas) un span n'ouvre rien, le menu etait injoignable. */
.ps-nav-group-label {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: inherit; background: none; border: 0;
  color: var(--ink-soft); font-size: .91rem; font-weight: 600; white-space: nowrap;
  padding: .65rem 0; cursor: pointer;
}
.ps-nav-group-label::after { content: "▾"; font-size: .65em; color: var(--ink-faint); transition: transform .15s ease; }
.ps-nav-group-label:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: var(--radius); }
.ps-nav-group:hover .ps-nav-group-label,
.ps-nav-group.is-open .ps-nav-group-label,
.ps-nav-group:focus-within .ps-nav-group-label { color: var(--brand-dark); }
.ps-nav-group.is-open > .ps-nav-group-label::after { transform: rotate(180deg); }
.ps-nav-group-menu {
  position: absolute; top: 100%; left: 0; margin-top: 0; min-width: 220px;
  display: flex; flex-direction: column; gap: .1rem; padding: .9rem .4rem .4rem;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: none; z-index: 60;
  opacity: 0; pointer-events: none; transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease;
}
.ps-nav-group:hover .ps-nav-group-menu,
.ps-nav-group.is-open .ps-nav-group-menu,
.ps-nav-group:focus-within .ps-nav-group-menu {
  opacity: 1; pointer-events: auto; transform: translateY(0);
}
.ps-nav-group-menu a { padding: .55rem .8rem; border-radius: var(--radius); white-space: nowrap; transition: transform .1s ease; }
.ps-nav-group-menu a::after { display: none; }
.ps-nav-links a i, .ps-nav-group-menu a i { margin-right: 0.4rem; font-size: 1.1rem; vertical-align: -0.1em; color: var(--brand); }
.ps-nav-group-menu a:hover, .ps-nav-group-menu a:focus-visible { background: var(--brand-soft); }
.ps-nav-group-menu a:active { background: var(--brand-100); transform: scale(.97); }

.ps-nav-right {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-left: auto;
  flex-shrink: 0;
}
/* Definition unique. Il en existait deux hors media query, une verte et une marine :
   la marine gagnait sur tout sauf la couleur du texte, donc le vert n'a jamais ete
   rendu tout en restant lisible dans le fichier comme si c'etait le CTA du site. */
.ps-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--brand);
  color: #ffffff !important;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.55rem 0.75rem 0.55rem 1rem;
  border-radius: var(--radius);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  letter-spacing: 0.01em;
}
.ps-nav-cta:hover {
  background: var(--brand-dark);
  color: #ffffff !important;
  box-shadow: none;
}
.ps-nav-cta:focus-visible { outline: 2px solid var(--brand-deep); outline-offset: 3px; }
/* Largeur fluide : a 165px fixes le placeholder etait coupe (« Rechercher une com... »)
   sur toute la plage sous 1200px. */
.ps-search { position: relative; flex: 0 1 250px; min-width: 0; }
.ps-search input {
  border: 1px solid var(--border); border-radius: var(--radius); padding: .55rem .95rem; font-size: .84rem;
  width: 100%; background: var(--bg-soft); outline: none; font-family: inherit;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.ps-search input:focus { border-color: var(--brand); background: #fff; box-shadow: none; }
.ps-header-search-results {
  position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; z-index: 10;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: none; max-height: 320px; overflow-y: auto;
}
.ps-header-search-results button {
  display: block; width: 100%; text-align: left; padding: .55rem .8rem; border: 0;
  border-bottom: 1px solid var(--border-soft); background: #fff; font-size: .88rem;
  font-family: var(--font-body); color: var(--ink); cursor: pointer; transition: transform .1s ease;
}
.ps-header-search-results button:last-child { border-bottom: none; }
.ps-header-search-results button:hover, .ps-header-search-results button.is-active { background: var(--brand-soft); }
.ps-header-search-results button:active { background: var(--brand-100); transform: scale(.98); }
.ps-header-search-results button:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

/* ── Burger mobile ───────────────────────────────────────────────────────── */
.ps-nav-toggle {
  display: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--border);
  border-radius: var(--radius); background: #fff; cursor: pointer; flex: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  transition: transform .1s ease, background .15s;
}
.ps-nav-toggle:active { background: var(--bg-soft); transform: scale(.94); }
.ps-nav-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: var(--radius); transition: transform .2s ease, opacity .2s ease; }
.ps-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ps-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ps-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 860px) {
  .ps-nav { flex-wrap: wrap; gap: .55rem 1rem; position: relative; }
  .ps-nav-toggle { display: inline-flex; order: 2; margin-left: auto; }
  .ps-nav-links {
    order: 4; width: 100%; display: none; flex-direction: column; gap: 0;
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: none; overflow: hidden; margin-top: .3rem;
  }
  .ps-nav-links.is-open { display: flex; }
  .ps-nav-links a {
    width: 100%; min-height: 48px; display: flex; align-items: center;
    padding: 0 1rem; border-bottom: 1px solid var(--border-soft);
  }
  .ps-nav-links a:last-child { border-bottom: none; }
  .ps-nav-links a::after { display: none; }
  /* En panneau burger le menu est deja deplie : le declencheur redevient un
     simple intitule de section, aligne a gauche comme les liens. */
  .ps-nav-group-label {
    display: block; width: 100%; text-align: left; cursor: auto;
    padding: .6rem 1rem 0; font-family: var(--font-body);
    font-weight: 700; font-size: .78rem;  
    color: var(--ink-faint);
  }
  .ps-nav-group-label::after { content: none; }
  .ps-nav-group-menu {
    position: static; opacity: 1; pointer-events: auto; transform: none;
    margin-top: 0; min-width: 0; padding: 0; border: none; box-shadow: none;
  }
  .ps-search { order: 3; margin-left: 0; flex: 1 1 100%; min-width: 0; }
  .ps-search input { width: 100%; }
}

.ps-home-hero {
  background: var(--encre);
  border-bottom: 1px solid var(--border);
  padding: clamp(3rem, 5vw, 4.5rem) 0 clamp(2.5rem, 4vw, 4rem);
}
.ps-home-hero .ps-wrap { max-width: 1240px; }

.ps-home-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 2.5rem;
  align-items: center;
}
@media (max-width: 992px) {
  .ps-home-hero-grid { grid-template-columns: 1fr; gap: 2rem; }
}

.ps-hero-badge {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  color: var(--brand-dark) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  display: block !important;
  margin-bottom: 0.4rem !important;
}
.ps-hero-badge-legacy {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius);
  background: var(--brand-soft);
  color: #1D4ED8;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  border: 1px solid var(--brand-100);
  margin-bottom: 1.1rem;
}
/* Le point est vert (règle plus bas, et le kit réserve le rouge à l'alerte) : son
   halo l'était resté bordeaux, hérité de l'ancienne palette. Les deux suivent
   maintenant --good-fg, donc la charte. */
.ps-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius);
  background: var(--good-fg);
  box-shadow: none;
}
@keyframes ps-pulse {
  0% { transform: scale(0.95); box-shadow: none; }
  70% { transform: scale(1); box-shadow: none; }
  100% { transform: scale(0.95); box-shadow: none; }
}

.ps-home-hero h1 { max-width: 18ch; margin: 0; font-size: clamp(2.4rem, 4.2vw, 3.8rem); letter-spacing: -.012em; text-wrap: balance; line-height: 1.1; }
.ps-hero-highlight { color: var(--brand-dark); position: relative; display: inline-block; }

.ps-home-tagline { font-size: clamp(1rem, 1.4vw, 1.12rem); color: #2D3748; max-width: 52ch; margin: 1rem 0 1.5rem; }
.ps-home-search {
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 4px 5px 4px 1.1rem;
  box-shadow: none;
  max-width: 540px;
  margin: 1.2rem 0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ps-home-search:focus-within {
  border-color: var(--brand);
  box-shadow: none;
}
.ps-home-search input {
  flex: 1;
  border: none !important;
  background: transparent !important;
  padding: 0.5rem 0.5rem 0.5rem 0 !important;
  font-size: 0.95rem;
  box-shadow: none;
  outline: none !important;
  min-width: 0;
}
.ps-home-search .ps-cta-btn {
  border-radius: var(--radius-pill, 999px);
  padding: 0.65rem 1.4rem;
  font-size: 0.9rem;
  flex: none;
  white-space: nowrap;
}

.ps-home-quick-cities {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem;
  margin: 1rem 0 1.4rem; font-size: 0.84rem; color: var(--ink-faint);
}
.ps-home-quick-cities a {
  padding: 0.25rem 0.65rem; border-radius: var(--radius); background: #fff;
  border: 1px solid var(--border-soft); color: var(--brand-dark); font-weight: 700;
  transition: all 0.15s ease;
}
.ps-home-quick-cities a:hover {
  background: var(--brand-soft); border-color: var(--brand); color: var(--brand-dark);
}

.ps-home-proof-bar {
  display: flex; flex-wrap: wrap; gap: 1.2rem; padding-top: 1.2rem;
  border-top: 1px solid var(--border-soft);
}
.ps-proof-item { font-size: 0.84rem; color: #2D3748; font-weight: 600; }
.ps-proof-item strong { color: #16314B; font-weight: 800; }

/* Hero Preview Card */
.ps-hero-preview-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.5rem; box-shadow: none; position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ps-hero-preview-card:hover {
  box-shadow: none;
}
.ps-hero-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.ps-hero-card-cover {
  position: relative;
  width: calc(100% + 3rem);
  height: 180px;
  border-radius: var(--radius);
  overflow: hidden;
  margin: -1.5rem -1.5rem 1rem -1.5rem;
}
.ps-hero-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ps-hero-card-cover .ps-hero-card-header {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  right: 0.8rem;
  z-index: 3;
  margin-bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ps-hero-card-badge {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: none;
}
.ps-hero-card-score {
  font-size: 0.84rem; font-weight: 800; color: var(--good-fg); background: var(--good-bg);
  padding: 0.25rem 0.65rem; border-radius: var(--radius);
}
.ps-hero-card-title h3 { font-size: 1.6rem; margin: 0 0 0.15rem; color: var(--ink); }
.ps-hero-card-title p { font-size: 0.85rem; color: var(--ink-faint); margin: 0 0 1rem; }
.ps-hero-card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.65rem; margin-bottom: 1.2rem; }
.ps-hero-kpi { padding: 0.65rem 0.85rem; background: var(--bg); border: 1px solid var(--border-soft); border-radius: var(--radius); }
.ps-kpi-val { display: block; font-weight: 800; font-size: 1.05rem; color: var(--brand-dark); }
.ps-kpi-lbl { display: block; font-size: 0.74rem; color: var(--ink-faint); }
.ps-hero-card-link {
  display: block; text-align: center; padding: 0.75rem 1rem; background: var(--brand-soft);
  color: var(--brand-dark); font-weight: 700; font-size: 0.9rem; border-radius: var(--radius);
  border: 1px solid var(--brand-100); transition: all 0.15s ease;
}
.ps-hero-card-link:hover { background: var(--brand); color: #fff; }

/* ── CTA « Trouver ma ville » (accueil) ──────────────────────────────────── */
.ps-trouver-cta {
  background: var(--brand-soft); border: 1px solid var(--brand-100); border-radius: var(--radius);
  padding: 1.6rem 1.8rem; margin: 1.8rem 0; text-align: center;
}
.ps-trouver-cta-title { font-family: var(--font-body); font-weight: 700; font-size: clamp(1.2rem, 2.4vw, 1.5rem); color: var(--ink); margin: 0 0 .4rem; letter-spacing: -.01em; }
.ps-trouver-cta-text { color: var(--ink-soft); max-width: 52ch; margin: 0 auto 1rem; }
@media (max-width: 640px) { .ps-trouver-cta { padding: 1.3rem 1.2rem; } }

/* ── Boutons ─────────────────────────────────────────────────────────────── */
.ps-cta-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  background: var(--brand); color: #fff; font-family: var(--font-display); font-weight: 700;
  padding: .85rem 1.6rem; border-radius: var(--radius-pill, 999px); border: none; text-decoration: none;
  font-size: 1rem; cursor: pointer; letter-spacing: 0;
  box-shadow: none;
  transition: transform .15s cubic-bezier(.2,.8,.2,1), background .15s, box-shadow .15s;
}
.ps-cta-btn:hover { background: var(--brand-dark); color: #fff; }
.ps-cta-btn:active { transform: translateY(0); }
/* Bouton secondaire « fantôme » (ex. Ville au hasard) */
.ps-cta-ghost { background: #fff; color: var(--brand-dark); border: 1px solid var(--brand-100); box-shadow: none; }
.ps-cta-ghost:hover { background: var(--brand-soft); color: var(--brand-dark); }
.ps-home-proof { margin: 1rem 0 0; color: var(--ink-faint); font-size: .84rem; font-weight: 650; }
.ps-home-hasard { display: flex; flex-wrap: wrap; gap: 1.1rem; margin: 1rem 0 0; }
.ps-home-hasard a { color: var(--brand-dark); font-size: .92rem; font-weight: 700; text-decoration: underline; text-underline-offset: .2em; }

/* ── Carte de France (hero home) ─────────────────────────────────────────── */
.ps-carte svg { width: 100%; max-width: 640px; height: auto; display: block; margin: 0 auto; }
.ps-carte-hero { margin-top: 1.8rem; text-align: center; }
.ps-carte-hero h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); margin-bottom: .3rem; }
.ps-carte-hero svg { max-width: 780px; }
.ps-carte svg path { fill: #c7dcfb; stroke: #ffffff; stroke-width: 1px; transition: fill 0.15s ease, filter 0.15s ease; }
.ps-carte svg path.actif, .ps-carte svg a .dept { fill: var(--brand-100); stroke: #ffffff; stroke-width: 1px; }
.ps-carte svg a:hover path, .ps-carte svg a:focus path { fill: var(--brand) !important; stroke: var(--brand-deep) !important; stroke-width: 1.5px; filter: drop-shadow(0 4px 12px rgba(37, 99, 235, 0.45)); cursor: pointer; }
.ps-carte svg a:active path { fill: var(--brand-dark) !important; }
.ps-home-map-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.4rem;
  align-items: end;
  margin-bottom: 1.25rem;
  text-align: left;
}
.ps-home-map-head h2 { max-width: 36ch; margin: 0 0 .45rem; line-height: 1.2; font-size: clamp(1.6rem, 3vw, 2.3rem); }
.ps-home-map-head .ps-note { max-width: 62ch; font-size: .95rem; color: var(--ink-soft); }
.ps-home-map-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(105px, 1fr));
  gap: .55rem;
  min-width: min(100%, 430px);
}
.ps-home-map-stats span {
  display: grid;
  gap: .1rem;
  padding: .75rem .85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink-soft);
  font-size: .76rem;
  line-height: 1.25;
  box-shadow: none;
}
.ps-home-map-stats strong {
  color: var(--brand-dark);
  font-size: 1.22rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ps-home-map-dashboard {
  display: grid;
  grid-template-columns: minmax(220px, 290px) minmax(360px, 1fr) minmax(220px, 290px);
  gap: 1rem;
  align-items: stretch;
  text-align: left;
}
.ps-home-map-panel {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: none;
}
.ps-home-map-panel h3 {
  margin: 0 0 .8rem;
  color: var(--ink);
  font-size: .92rem;
  
  
}
.ps-home-indicators, .ps-home-dept-feature, .ps-home-dept-list {
  display: grid;
  gap: .45rem;
}
.ps-home-indicators a, .ps-home-dept-feature a, .ps-home-dept-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: 42px;
  padding: .55rem .65rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  font-size: .86rem;
  font-weight: 700;
  transition: background .15s, border-color .15s, transform .15s;
}
.ps-home-indicators a:hover, .ps-home-dept-feature a:hover, .ps-home-dept-list a:hover {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand-dark);
  transform: translateX(2px);
}
.ps-home-indicators small, .ps-home-dept-feature small, .ps-home-dept-list small {
  color: var(--ink-faint);
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
}
.ps-home-panel-link {
  display: inline-flex;
  margin-top: .9rem;
  color: var(--brand-dark);
  font-size: .86rem;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ps-home-map-figure {
  display: grid;
  place-items: center;
  min-height: 620px;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: none;
}
.ps-home-map-figure svg path,
.ps-home-map-figure svg polygon,
.ps-home-map-figure svg g {
  cursor: pointer;
  transition: fill 0.2s ease, filter 0.2s ease, opacity 0.2s ease;
}
.ps-home-map-figure svg a:hover path,
.ps-home-map-figure svg a:hover polygon,
.ps-home-map-figure svg g:hover path {
  fill: var(--brand) !important;
  stroke: var(--brand-dark) !important;
  stroke-width: 1.5px;
  filter: drop-shadow(0 4px 8px rgba(30, 58, 138, 0.3));
}

.ps-dept-filter-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem 0.8rem;
  font-size: 0.85rem;
  font-family: inherit;
  margin-bottom: 0.8rem;
  background: #fff;
  outline: none;
}
.ps-dept-filter-input:focus {
  border-color: var(--brand);
  box-shadow: none;
}

.ps-home-dept-list-scroll {
  max-height: 480px;
  overflow-y: auto;
  padding-right: 4px;
}
.ps-home-dept-list-scroll::-webkit-scrollbar {
  width: 5px;
}
.ps-home-dept-list-scroll::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius);
}

.ps-home-map-cta { max-width: none; margin: 1rem 0 0; text-align: center; }
@media (max-width: 1120px) {
  .ps-home-map-head { grid-template-columns: 1fr; }
  .ps-home-map-stats { width: 100%; }
  .ps-home-map-dashboard { grid-template-columns: minmax(0, 1fr); }
  .ps-home-map-panel-left { order: 1; }
  .ps-home-map-figure { order: 2; min-height: auto; }
  .ps-home-map-panel-right { order: 3; }
  .ps-home-indicators { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ps-home-dept-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ps-home-map-stats { grid-template-columns: 1fr; }
  .ps-home-indicators, .ps-home-dept-list { grid-template-columns: 1fr; }
  .ps-home-map-panel { padding: .85rem; }
  .ps-home-map-figure { padding: .5rem; }
}

/* ── Parcours Guidé User-Friendly ────────────────────────────────────────── */
.ps-guided-wizard {
  margin: 2.5rem 0;
}
.ps-wizard-header {
  margin-bottom: 1.5rem;
}
.ps-wizard-kicker {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 800;
  
  letter-spacing: 0.08em;
  color: var(--brand);
  margin-bottom: 0.4rem;
}
.ps-imp-box {
  width: 44px;
  height: 44px;
  border: 2px solid var(--encre);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}
.ps-imp-checkbox input:checked + .ps-imp-box {
  background: var(--brique);
  border-color: var(--brique);
}
.ps-imp-checkbox input:checked + .ps-imp-box::after {
  content: "";
  width: 20px;
  height: 20px;
  background: var(--reserve);
}
.ps-imp-checkbox input:focus-visible + .ps-imp-box {
  outline: 3px solid var(--brique);
  outline-offset: 2px;
}
.ps-wizard-header h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 0.4rem;
}
.ps-wizard-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 1.25rem;
  margin-bottom: 2rem;
}
.ps-wizard-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.4rem 1.5rem;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: none;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.ps-wizard-card:hover {
  box-shadow: none;
  border-color: var(--brand);
}
.ps-wizard-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: var(--brand-soft);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.ps-wizard-card:hover .ps-wizard-icon {
  background: var(--brand);
  color: #ffffff;
}
.ps-wizard-body h3 {
  margin: 0 0 0.35rem;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--ink);
}
.ps-wizard-body p {
  margin: 0 0 0.8rem;
  font-size: 0.88rem;
  color: var(--ink-faint);
  line-height: 1.5;
}
.ps-wizard-link {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}
.ps-wizard-card:hover .ps-wizard-link {
  color: var(--brand-dark);
}

.ps-trouver-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.8rem 2.2rem;
  background: var(--encre);
  border-radius: var(--radius);
  color: #ffffff;
  box-shadow: none;
}
@media (max-width: 860px) {
  .ps-trouver-cta {
    flex-direction: column;
    text-align: center;
  }
}
.ps-trouver-cta-title {
  font-size: 1.35rem;
  font-weight: 800;
  margin: 0 0 0.4rem;
  color: #ffffff;
}
.ps-trouver-cta-text {
  font-size: 0.95rem;
  color: var(--on-deep-soft);
  margin: 0;
  max-width: 55ch;
}

/* ── Sections ────────────────────────────────────────────────────────────── */
.ps-section { margin: clamp(3.5rem, 6vw, 5.5rem) 0; }
.ps-section > h2 { display: flex; align-items: baseline; gap: .6rem; }
.ps-section > h2::before {
  content: ""; width: .55rem; height: 1.15rem; background: var(--brand); border-radius: var(--radius);
  display: inline-block; transform: translateY(.08rem);
}

/* ── Fil d'Ariane / verdict / méta ───────────────────────────────────────── */
.ps-breadcrumb { font-size: .82rem; color: var(--ink-faint); margin: 1rem 0 .5rem; }
.ps-breadcrumb a { color: var(--ink-faint); }
.ps-breadcrumb a:hover { color: var(--brand-dark); }

/* Banner d'Agrégation Départementale / Régionale */
.ps-dept-kpi-banner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
  gap: 0.8rem;
  margin: 1.2rem 0 1.8rem;
  padding: 1rem 1.2rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: none;
}
.ps-dept-kpi-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  text-decoration: none;
  color: inherit;
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius);
  transition: background 0.18s ease, transform 0.18s ease;
}
.ps-dept-kpi-item:hover {
  background: var(--brand-soft);
}
.ps-dept-kpi-label {
  font-size: 0.76rem;
  
  letter-spacing: 0.04em;
  font-weight: 700;
  color: var(--ink-faint);
}
.ps-dept-kpi-val {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--brand-dark);
}

.ps-stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius);
  background: var(--bg-card);
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--ink);
  font-size: 0.85rem;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.ps-stat-chip:hover {
  background: var(--brand-soft);
  border-color: var(--brand-100);
  color: var(--brand-dark);
}
.ps-verdict { font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.62; color: var(--ink-soft); max-width: 52ch; }
.ps-note, .ps-maj { font-size: .8rem; color: var(--ink-faint); overflow-wrap: anywhere; }
.ps-hub-link { font-size: .92rem; }

/* ── Bandeau méta (sous le H1, avant le corps) : contrôle secondaire, jamais en serif ── */
.ps-meta-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem;
  margin: .3rem 0 1.4rem; padding: .55rem .9rem;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius);
  font-family: var(--font-body); font-size: .82rem; color: var(--ink-soft);
}
.ps-meta-badge { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; color: var(--brand-dark); white-space: nowrap; }
.ps-meta-badge svg { width: 14px; height: 14px; flex: none; }
.ps-meta-item { color: var(--ink-faint); }
.ps-meta-item a { color: var(--ink-faint); text-decoration: underline; text-underline-offset: 2px; }
.ps-meta-tag {
  display: inline-flex; align-items: center; padding: .15rem .6rem; border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--ink-soft); font-weight: 600; white-space: nowrap;
  transition: transform .1s ease;
}
.ps-meta-tag:hover { background: var(--brand-soft); border-color: var(--brand-100); color: var(--brand-dark); }
.ps-meta-tag:active { background: var(--brand-100); border-color: var(--brand-100); color: var(--brand-dark); transform: scale(.96); }
.ps-meta-share { display: inline-flex; align-items: center; gap: .4rem; margin-left: auto; }
.ps-share-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border: 1px solid var(--border); border-radius: var(--radius); color: var(--ink-soft); background: #fff;
  cursor: pointer; padding: 0; flex: none; font: inherit; transition: transform .1s ease;
}
.ps-share-btn svg { width: 15px; height: 15px; }
.ps-share-btn:hover { background: var(--brand-soft); border-color: var(--brand-100); color: var(--brand-dark); }
.ps-share-btn:active { background: var(--brand-100); border-color: var(--brand-100); color: var(--brand-dark); transform: scale(.92); }
.ps-share-copy.is-copied { color: var(--good-fg); border-color: var(--good-fg); }
@media (max-width: 560px) {
  .ps-meta-bar { row-gap: .6rem; }
  .ps-meta-share { margin-left: 0; width: 100%; justify-content: flex-start; }
}

/* Longueur de ligne confortable (~70-90 caractères) pour les notes/paragraphes de texte
   courant qui n'ont pas déjà de max-width dédié : sans ça ils s'étalent sur toute la
   largeur de .ps-wrap (jusqu'à 1080px, 150-166 caractères par ligne, illisible). */
.ps-wrap > p:not(.ps-verdict), .ps-maj, .ps-wiki-attrib, .ps-footer-note, #avis > p {
  max-width: 100%;
}

/* ── Extrait Wikipédia (CC BY-SA) ─────────────────────────────────────────── */
.ps-wiki { width: 100%; max-width: 100%; }
.ps-wiki-attrib { font-size: .78rem; color: var(--ink-faint); }
.ps-wiki-attrib a { color: var(--ink-faint); text-decoration: underline; text-underline-offset: 2px; }

/* ── Badge Expert / Analyse Territoriale ───────────────────────────────── */
.ps-expert-badge {
  margin-bottom: 1.2rem;
}
.ps-expert-tag {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 800;
  
  letter-spacing: 0.08em;
  color: var(--brand-dark);
  background: var(--brand-soft);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius);
  border: 1px solid var(--brand-100);
  margin-bottom: 0.5rem;
}
.ps-expert-meta {
  font-size: 0.9rem;
  color: var(--ink-faint);
  margin: 0.3rem 0 1rem;
}

.ps-photo { margin: 1.1rem 0 0; }
/* `aspect-ratio` réserve la hauteur avant que la photo n'arrive : sans lui, le navigateur
   comptait 0 px, puis 340 px, et tout le portrait sautait sous le H1. Le recadrage est de
   toute façon fait par object-fit, la proportion exacte de l'original n'importe pas. */
.ps-photo img { width: 100%; aspect-ratio: 16 / 5; max-height: 340px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--border); box-shadow: none; }
.ps-photo figcaption { font-size: .72rem; color: var(--ink-faint); margin-top: .35rem; }
.ps-portrait-brief {
  margin: 1.8rem 0 2.4rem;
  padding: 1.6rem 2rem;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: none;
}
.ps-portrait-kicker {
  margin: 0 0 .35rem;
  color: var(--accent-rouge);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  
}
.ps-portrait-brief h2 {
  margin: 0;
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  color: var(--ink);
  font-weight: 800;
}
.ps-portrait-brief-head > p:last-child {
  margin: .4rem 0 0;
  color: var(--ink-faint);
  font-size: .95rem;
}
.ps-portrait-reperes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem;
  margin: 1.3rem 0 1.5rem;
}
.ps-portrait-reperes > div {
  min-width: 0;
  padding: 1.1rem 1.2rem;
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
}
.ps-portrait-reperes > div:hover {
  background: var(--bg-tint);
  border-color: var(--brand-100);
}
.ps-portrait-reperes dt {
  color: var(--ink-faint);
  font-size: .78rem;
  font-weight: 700;
  
  letter-spacing: 0.05em;
}
.ps-portrait-reperes dd {
  margin: .35rem 0 .2rem;
  color: var(--ink);
  font-size: 1.45rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.ps-portrait-reperes small {
  color: var(--ink-faint);
  font-size: .75rem;
  font-weight: 600;
}
.ps-portrait-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}
.ps-portrait-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: .55rem 1.2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #ffffff;
  color: var(--ink);
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: none;
  transition: all 0.15s ease;
}
.ps-portrait-action:hover {
  border-color: var(--brand);
  background: var(--bg-soft);
  color: var(--brand-dark);
}
.ps-portrait-action:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.ps-portrait-action--primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #ffffff;
  box-shadow: none;
}
.ps-portrait-action--primary:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #ffffff;
}
.ps-portrait-jump {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .6rem;
  margin-top: 1.4rem;
  padding: .85rem 1.1rem;
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  font-size: .84rem;
}
.ps-portrait-jump span {
  font-weight: 700;
  color: var(--ink-faint);
  margin-right: .2rem;
}
.ps-portrait-jump a {
  display: inline-flex;
  padding: .3rem .75rem;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--ink);
  font-weight: 700;
  font-size: .82rem;
  text-decoration: none;
  transition: all 0.15s ease;
}
.ps-portrait-jump a:hover {
  background: var(--brand);
  color: #ffffff;
  border-color: var(--brand);
}
.ps-portrait-faq { width: 100%; max-width: 100%; }
.ps-portrait-faq details { border-top: 1px solid var(--border); padding: .85rem 0; }
.ps-portrait-faq details:last-child { border-bottom: 1px solid var(--border); }
.ps-portrait-faq summary { cursor: pointer; color: var(--ink); font-weight: 700; }
.ps-portrait-faq summary::marker { color: var(--brand); }
.ps-portrait-faq details p { color: var(--ink-soft); margin: .6rem 1.3rem .1rem; }
.ps-portrait-sources { width: 100%; max-width: 100%; background: #ffffff; border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem 1.8rem; box-shadow: none; }
.ps-portrait-sources > h2 { margin-top: 0; }
.ps-portrait-sources ul { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: .85rem 0; padding: 0; }
.ps-portrait-sources li { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-soft); color: var(--ink-soft); font-size: .8rem; font-weight: 600; padding: .25rem .65rem; }
#bilan { scroll-margin-top: var(--ps-anchor-offset); }
@media (max-width: 760px) { .ps-portrait-reperes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .ps-portrait-brief { padding: 1.2rem; } .ps-portrait-reperes { grid-template-columns: 1fr; } .ps-portrait-actions { display: grid; grid-template-columns: 1fr; } .ps-portrait-action { justify-content: center; } }
.ps-photo figcaption a { color: var(--brand-deep); text-decoration: underline; text-underline-offset: .12em; }

/* ── Labels / tags / badges ──────────────────────────────────────────────── */
.ps-badges { display: flex; flex-wrap: wrap; gap: .45rem; margin: .8rem 0 1.2rem; }
.ps-badge {
  display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 700;
  padding: .3rem .75rem; border-radius: var(--radius); letter-spacing: .01em; line-height: 1.3;
  background: var(--neut-bg); color: var(--neut-fg); max-width: 100%; overflow-wrap: anywhere;
  border: 1px solid transparent;
}
.ps-badge::before { content: ""; width: .45rem; height: .45rem; border-radius: var(--radius); background: currentColor; opacity: .85; }
.ps-badge.is-plain::before { display: none; }
.ps-badge--good { background: #CCFBF1; color: #0F766E; border-color: #99F6E4; }
.ps-badge--info { background: #DBEAFE; color: #1D4ED8; border-color: #BFDBFE; }
.ps-badge--warn { background: #FEF3C7; color: #B45309; border-color: #FDE68A; }
.ps-badge--bad  { background: #FEE2E2; color: #B91C1C; border-color: #FCA5A5; }

/* ── Rang de vie quotidienne : jauge + phrase ────────────────────────────── */
.ps-scoreboard {
  display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; align-items: center;
  margin: 1.2rem 0 1.8rem; padding: 1.4rem 1.6rem;
  background: #ffffff; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: none;
}
.ps-score { display: inline-flex; align-items: center; }
.ps-score-ring {
  --v: 0; width: 56px; height: 56px; border-radius: var(--radius); flex: none;
  background: conic-gradient(var(--brand) calc(var(--v) * 1%), var(--border-soft) 0);
  display: grid; place-items: center;
}
.ps-score-ring::after { content: ""; width: 44px; height: 44px; border-radius: var(--radius); background: #ffffff; }
.ps-score-quoi { flex: 1 1 15rem; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.ps-score-quoi > strong { font-size: 1.15rem; color: var(--ink); font-weight: 800; }
.ps-score-quoi .ps-note { font-weight: 700; color: var(--brand-dark); font-size: .95rem; }
.ps-score-quoi small { font-size: .84rem; color: var(--ink-faint); line-height: 1.5; }
.ps-score-quoi small a { color: var(--brand-dark); font-weight: 700; text-decoration: underline; text-underline-offset: .12em; }
.ps-note-globale {
  display: inline-flex; align-items: center; gap: .35rem; background: var(--brand-soft);
  color: var(--brand-dark); border-radius: var(--radius); padding: .35rem 1rem; font-size: .92rem; font-weight: 700;
  border: 1px solid var(--brand-100);
}

/* ── Hub commune : cartes thématiques ────────────────────────────────────── */

/* Sommaire des familles. Il n'est pas collant : la page se lit d'une traite et un bandeau
   qui suit le doigt sur mobile mange le peu de hauteur qui reste. */
.ps-hub-toc { margin: 2.2rem 0 1rem; padding: 1.1rem 1.3rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.ps-hub-toc h2 { margin: 0 0 .7rem; font-size: 1rem; letter-spacing: .01em; }
.ps-hub-toc ul { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.ps-hub-toc a {
  display: inline-block; border: 1px solid var(--border); border-radius: var(--radius);
  padding: .3rem .85rem; font-size: .9rem; font-weight: 600; background: #fff; text-decoration: none;
}
.ps-hub-toc a:hover { border-color: var(--brand); color: var(--brand-deep); }

/* Le titre de famille est la cible des ancres du sommaire et du bilan : sans marge de
   défilement il se colle au bord haut de la fenêtre et on ne voit plus qu'il est un titre. */
.ps-hub-famille { scroll-margin-top: var(--ps-anchor-offset); }
.ps-hub-famille > h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ink);
  margin: 3rem 0 1.2rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--border-soft);
  letter-spacing: -0.01em;
}

.ps-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 1.25rem;
  margin: 1.2rem 0 2.5rem;
  align-items: stretch;
}
@media (max-width: 640px) {
  .ps-hub-grid { grid-template-columns: 1fr; gap: 1rem; }
}

.ps-hub-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: #ffffff;
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 1.35rem 1.5rem;
  box-shadow: none;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.ps-hub-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--brand);
  opacity: 0.85;
}
.ps-hub-card:hover {
  border-color: var(--border);
  box-shadow: none;
}
.ps-hub-card h2, .ps-hub-card h3 {
  font-family: var(--font-body);
  font-size: 0.76rem;
  
  letter-spacing: 0.07em;
  font-weight: 800;
  color: var(--brand-dark);
  margin: 0 0 0.65rem;
}
.ps-hub-card p {
  margin: 0.35rem 0;
  font-size: 0.92rem;
  color: var(--ink-faint);
  line-height: 1.55;
}
.ps-hub-card p.ps-note {
  font-size: 0.84rem;
  color: var(--ink-faint);
  line-height: 1.5;
}
.ps-hub-card strong {
  font-family: var(--font-body);
  font-size: 1.12rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.ps-hub-card a { font-weight: 700; color: var(--brand-dark); }
.ps-hub-card a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* mini-barres data dans les cartes */
.ps-bar { height: 6px; border-radius: var(--radius); background: var(--bg-tint); margin: .55rem 0 .2rem; overflow: hidden; }
.ps-bar > i { display: block; height: 100%; border-radius: var(--radius); background: var(--brand); transition: width .4s cubic-bezier(.2,.8,.2,1); }
.ps-bar--good > i { background: var(--brand); }
.ps-bar--warn > i { background: var(--warn-fg); }
.ps-bar--bad > i { background: var(--bad-fg); }

/* home : cartes grandes villes (variante compacte) */
/* home : Grille Grandes Villes (Doppelrand & Grille Harmonieuse) */
.ps-grandes-villes-filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.1rem 0 0;
}
.ps-grandes-villes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 1.4rem;
  margin: 1.5rem 0 2.5rem;
}
.ps-city-bezel-card {
  position: relative;
  padding: 6px;
  border-radius: var(--radius);
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.ps-city-bezel-card:hover {
  box-shadow: none;
  border-color: var(--brand-100);
}
.ps-city-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--border);
}
.ps-city-card-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  background: var(--brand-dark);
}
.ps-city-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
  transition: transform 0.4s ease;
}
/* ── Explorer par envie (Filter Pill Bar inspired by VoyaZen) ────────── */
.ps-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 1.2rem;
}
.ps-section-more {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--brand);
  text-decoration: none;
  white-space: nowrap;
}
.ps-section-more:hover {
  color: var(--brand-dark);
  text-decoration: underline;
}
.ps-envie-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.8rem;
}
.ps-envie-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1.1rem;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: none;
  transition: all 0.18s cubic-bezier(.2,.8,.2,1);
}
.ps-envie-pill:hover {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-dark);
  box-shadow: none;
}
.ps-envie-icon {
  font-size: 1.05rem;
  line-height: 1;
}

/* ── Favoris (cœur) : accueil + fiche commune, cf inc/favoris.php ─────────
   Règle de base UNIQUE pour .ps-fav-btn : les trois emplacements de plus forte
   spécificité (.ps-hub-h1-row, .ville-cta, .fav-card, cf leurs blocs plus bas)
   ne portent plus que du positionnement. La bordure rgba(15, 23, 42, .14) est
   ce qui rend le bouton lisible aussi sur fond blanc (H1 de fiche) : une
   bordure blanche translucide, comme avant, s'efface sur un fond clair.
   Rouge unique du site : var(--accent-rouge, #C1272D), déjà le rouge de
   jugement (rank badges, bilans) — pas #EF4444 (variante wireframe seule). */
.ps-fav-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  border: 1px solid rgba(15, 23, 42, 0.14);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(6px);
  color: var(--text-muted);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: none;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.ps-fav-btn:hover {
  background: #ffffff;
  color: var(--accent-rouge, #C1272D);
  box-shadow: none;
}
.ps-fav-btn.is-fav {
  color: var(--accent-rouge, #C1272D);
  background: #ffffff;
  border-color: var(--accent-rouge-soft, #FEE2E2);
  box-shadow: none;
}
.ps-fav-btn:disabled {
  opacity: 0.6;
  cursor: default;
}
.ps-hub-h1-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}
.ps-hub-h1-row .ps-fav-btn {
  /* Uniquement du positionnement : la forme, la taille et les couleurs sont
     la règle de base .ps-fav-btn plus haut, qui suffit aussi sur ce fond
     blanc grâce à sa bordure rgba(15, 23, 42, .14). */
  position: static;
  flex-shrink: 0;
}

/* ── City Card Thumb Overlay Badges (inspired by Ville de Rêve) ─────────── */
.ps-card-rank-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 4;
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  background: var(--accent-rouge);
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  box-shadow: none;
}
.ps-card-score-pill {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius);
  background: rgba(15, 23, 42, 0.80);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0;
  border: 1px solid rgba(255,255,255,0.20);
}
.ps-card-tag-badge {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 4;
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 800;
  box-shadow: none;
}
.ps-city-card-thumb-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: var(--encre);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
}
.ps-city-card-content {
  padding: 1.1rem 1.2rem 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}
.ps-city-card-dept {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-faint);
  margin-bottom: 0.2rem;
}
.ps-city-card-name {
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 0.35rem;
  line-height: 1.3;
}
.ps-city-card-link:hover .ps-city-card-name {
  color: var(--brand-dark);
}
.ps-city-card-meta {
  font-size: 0.84rem;
  color: var(--ink-faint);
  margin: 0;
}

/* home : petit badge de fraîcheur/données, façon pastille chaîne France 3 */
.ps-fresh-chip {
  display: inline-flex; align-items: center; gap: .3rem; border: 1px solid var(--brand-100);
  background: var(--brand-soft); color: var(--brand-dark); border-radius: var(--radius);
  padding: .25rem .7rem; font-size: .82rem; font-weight: 600;
}
.ps-fresh-chip::before { content: ""; width: .4rem; height: .4rem; border-radius: var(--radius); background: var(--brand); flex: none; }

/* ── Hub département : grille de cards (image/placeholder + titre + métrique-clé) ──
   Remplace le tableau ; la carte entière est cliquable (lien). Pas de photo disponible
   à ce niveau : le bandeau coloré + population en gros chiffre tient le rôle du visuel. */
.ps-dept-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 1.2rem; margin: 1.6rem 0; }
.ps-dept-card {
  display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius);
  background: #fff; box-shadow: none; overflow: hidden; color: inherit; text-decoration: none;
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s, border-color .18s;
}
.ps-dept-card:hover { box-shadow: none; border-color: color-mix(in srgb, var(--brand) 30%, var(--border)); color: inherit; }
.ps-dept-card:active { transform: translateY(-1px); box-shadow: none; color: inherit; }
.ps-dept-card-head {
  padding: 1.1rem 1.2rem; background: var(--encre);
  display: flex; flex-direction: column; gap: .15rem;
}
.ps-dept-card-pop-val { font-family: var(--font-body); font-size: 1.5rem; font-weight: 700; color: var(--brand-dark); }
.ps-dept-card-pop-label { font-size: .72rem;   color: var(--ink-soft); }
.ps-dept-card-body { padding: 1rem 1.2rem 1.3rem; }
.ps-dept-card-title { margin: 0 0 .8rem; font-size: 1.05rem; font-family: var(--font-body); font-weight: 700; color: var(--ink); }
.ps-dept-card-stats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.ps-dept-card-stats li { display: flex; justify-content: space-between; gap: .6rem; font-size: .85rem; color: var(--ink-soft); }
.ps-dept-card-stats strong { color: var(--ink); font-weight: 700; }
@media (max-width: 640px) { .ps-dept-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .ps-dept-grid { grid-template-columns: 1fr; } }

/* ── Filtres (barre client-side) ─────────────────────────────────────────── */
.ps-filter-bar {
  display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; margin: 1.2rem 0 1rem;
  padding: .7rem .8rem; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius);
}
.ps-filter-bar input[type="search"] {
  flex: 1 1 200px; min-width: 160px; border: 1px solid var(--border); border-radius: var(--radius);
  padding: .5rem .8rem; font-size: .92rem; font-family: inherit; background: #fff; outline: none;
}
.ps-filter-bar input[type="search"]:focus { border-color: var(--brand); box-shadow: none; }
.ps-filter-chip {
  border: 1px solid var(--border); background: #fff; color: var(--ink-soft); border-radius: var(--radius);
  padding: .4rem .9rem; font-size: .84rem; font-weight: 600; font-family: inherit; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .1s ease;
}
.ps-filter-chip:hover { border-color: var(--brand); color: var(--brand-dark); }
.ps-filter-chip:active { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-soft); transform: scale(.96); }
.ps-filter-chip[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
button.ps-filter-chip { cursor: pointer; }
.ps-filter-count { font-size: .82rem; color: var(--ink-faint); margin-left: auto; }
.ps-filter-empty { color: var(--ink-faint); font-style: italic; padding: 1rem 0; }
[data-filtered="hidden"] { display: none !important; }
.ps-filter-more { margin-top: 1.4rem; }

/* ── Cartes chiffres (silo solaire) ──────────────────────────────────────── */
.ps-heros { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 1.3rem; margin: 1.8rem 0; }
.ps-hero-card {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem 1.3rem; text-align: center;
  background: #fff; box-shadow: none;
}
.ps-hero-main { background: var(--encre); border-color: color-mix(in srgb, var(--brand) 35%, var(--border)); }
.ps-hero-val { font-family: var(--font-display); font-size: 1.95rem; font-weight: 700; color: var(--brand-dark); letter-spacing: -.01em; }
.ps-hero-label { font-size: .85rem; color: var(--ink-soft); margin-top: .3rem; }

/* ── CTA wrap ────────────────────────────────────────────────────────────── */
.ps-cta-wrap { text-align: center; margin: 1.6rem 0; }

/* ── Simulateur ──────────────────────────────────────────────────────────── */
.ps-simulateur { border: 1px solid var(--border); border-radius: var(--radius); padding: 1.8rem; margin: 2.2rem 0; background: #fff; box-shadow: none; }
.ps-simulateur label { display: block; margin: 1rem 0; font-weight: 600; font-size: .92rem; }
.ps-simulateur input[type="range"] { width: 100%; margin-top: .4rem; accent-color: var(--brand); }
.ps-sim-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: .8rem; margin: 1.2rem 0; text-align: center; }
.ps-sim-results div { background: var(--bg-soft); border-radius: var(--radius); padding: .9rem .6rem; }
.ps-sim-results strong { display: block; font-family: var(--font-body); font-size: 1.3rem; color: var(--brand-dark); }
.ps-sim-results span { font-size: .78rem; color: var(--ink-soft); }
.ps-hypotheses { font-size: .78rem; color: var(--ink-faint); }

/* ── Formulaire lead ─────────────────────────────────────────────────────── */
.ps-lead-box { border: 1.5px solid var(--brand); border-radius: var(--radius); padding: 1.8rem; margin: 2.2rem 0; background: var(--encre); }
.ps-partner-note { font-size: .78rem; color: var(--brand-dark); margin-top: .6rem; }
.ps-lead-form label { display: block; margin: .8rem 0 .2rem; font-weight: 600; font-size: .9rem; }
.ps-lead-form input[type="text"], .ps-lead-form input[type="tel"], .ps-lead-form select {
  width: 100%; border: 1px solid var(--border); border-radius: var(--radius); padding: .65rem .8rem; font-size: 16px; font-family: inherit; background: #fff;
}
.ps-lead-consent { font-weight: 400 !important; font-size: .85rem !important; }
.ps-lead-consent input { margin-right: .4rem; }
.ps-lead-form .ps-cta-btn { margin-top: 1rem; width: 100%; min-height: 48px; }
.ps-lead-merci { font-weight: 700; color: var(--good-fg); }

/* ── Tableaux ────────────────────────────────────────────────────────────── */
.ps-table-wrap {
  overflow: hidden;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.2rem 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #ffffff;
  box-shadow: none;
}
table.ps-table { width: 100%; border-collapse: collapse; margin: 0; min-width: 480px; font-size: .92rem; }
.ps-table td { font-variant-numeric: tabular-nums; }
.ps-table th, .ps-table td { padding: 1rem 1.25rem !important; text-align: left; border-bottom: 1px solid var(--border-soft); }
.ps-table th { background: var(--bg-soft); font-family: var(--font-display); font-weight: 700; font-size: .82rem; color: var(--ink-soft);   }
.ps-table tr:last-child td { border-bottom: none; }
.ps-table tbody tr:hover { background: var(--brand-soft); }
table.ps-classement td:first-child { color: var(--brand-dark); font-family: var(--font-body); font-weight: 700; width: 2.6rem; }

/* ── Avis (UGC) ──────────────────────────────────────────────────────────── */
.ps-avis-item { border: 1px solid var(--border); border-radius: var(--radius); padding: 1.3rem 1.5rem; margin: 1rem 0; background: #fff; box-shadow: none; }
.ps-avis-repartition { display: flex; flex-direction: column; gap: .3rem; margin: 1rem 0 1.4rem; max-width: 360px; }
.ps-avis-repartition-row {
  display: grid; grid-template-columns: 2.4rem 1fr 2rem; align-items: center; gap: .6rem;
  background: none; border: none; padding: .2rem 0; cursor: pointer; font: inherit; font-size: .85rem; color: var(--ink-soft);
  text-align: left;
}
.ps-avis-repartition-row:hover { color: var(--ink); }
.ps-avis-repartition-bar { height: 8px; border-radius: var(--radius); background: var(--bg-tint); overflow: hidden; }
.ps-avis-repartition-bar span { display: block; height: 100%; background: var(--brand); border-radius: var(--radius); }
.ps-avis-repartition-count { text-align: right; font-variant-numeric: tabular-nums; }
.ps-avis-repartition-reset { align-self: flex-start; margin-top: .3rem; background: none; border: none; color: var(--brand-dark); font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; padding: 0; text-decoration: underline; }
.ps-avis-form { border: 1px solid var(--border); border-radius: var(--radius); padding: 1.6rem; background: var(--bg-soft); margin: 1.2rem 0; }
.ps-avis-form input[type="text"], .ps-avis-form textarea, .ps-avis-form select { width: 100%; border: 1px solid var(--border); border-radius: var(--radius); padding: .6rem .8rem; font: inherit; font-size: 16px; background: #fff; }
.ps-avis-form label { display: block; margin: .8rem 0 .2rem; font-weight: 600; font-size: .9rem; }
/* fond brand-dark (14,76:1 avec du blanc, calculé) : --brand seul ne fait que 11,50:1, on garde brand-dark par cohérence avec le reste du thème */
.ps-avis-form button { margin-top: 1rem; background: var(--brand-dark); color: #fff; font-family: var(--font-body); font-weight: 700; font-size: 1rem; padding: .8rem 1.7rem; min-height: 48px; border: none; border-radius: var(--radius); cursor: pointer; transition: transform .1s ease, background .15s; }
.ps-avis-form button:hover { background: var(--brand-deep); }
.ps-avis-form button:active { background: var(--brand-deep); transform: scale(.97); }

/* Moyennes par sous-critère. Le mieux / le moins bien noté sont dits en toutes lettres :
   la couleur seule ne suffit pas (daltonisme), elle ne fait que redoubler le libellé. */
.ps-avis-crits { margin: 0 0 1.4rem; }
.ps-avis-crits caption { caption-side: bottom; padding-top: .6rem; font-size: .8rem; color: var(--ink-soft); text-align: left; }
.ps-avis-crits th { background: none !important; text-transform: none; letter-spacing: 0; font-size: .95rem; color: var(--ink); }
.ps-avis-crits td { font-variant-numeric: tabular-nums; }
.ps-avis-crit-moy { text-align: right !important; white-space: nowrap; }
.ps-avis-crit-moy strong { font-size: 1.15rem; }
.ps-avis-crit-moy span { color: var(--ink-soft); font-size: .85rem; }
.ps-avis-crit-n { text-align: right !important; color: var(--ink-soft); font-size: .85rem; white-space: nowrap; }
.ps-avis-crit-tag { display: inline-block; margin-left: .5rem; padding: .1rem .5rem; border-radius: var(--radius); font-size: .72rem; font-weight: 700;  letter-spacing: .03em; vertical-align: middle; }
.ps-avis-crit-fort .ps-avis-crit-tag { background: var(--good-bg); color: var(--good-fg); }
.ps-avis-crit-faible .ps-avis-crit-tag { background: var(--warn-bg); color: var(--warn-fg); }
.ps-avis-crits-champs { border: 1px solid var(--border); border-radius: var(--radius); padding: .4rem 1rem 1rem; margin: 1rem 0 0; }
/* width: max-content borne la légende à son texte (comportement par défaut),
   mais un navigateur ne recale que sa première ligne sur la bordure : à 375px,
   « Et sur ces points précis ? (facultatif) » passe sur deux lignes et la
   seconde chevauchait la bordure du cadre. width: 100% fait tenir toute la
   légende, sur autant de lignes que nécessaire, au-dessus de la bordure. */
.ps-avis-crits-champs legend { width: 100%; padding: 0 .4rem; font-weight: 600; font-size: .9rem; color: var(--ink-soft); }

/* ── Analyse (le so-what) ────────────────────────────────────────────────── */
.ps-analyse {
  background: var(--bg-soft);
  border: 1.5px solid var(--border);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius);
  padding: 1.8rem 2.2rem;
  margin: 2.2rem 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  box-shadow: none;
}
.ps-analyse p {
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0.6rem 0;
}

/* ── Voisines ────────────────────────────────────────────────────────────── */
.ps-voisines ul { columns: 2; padding-left: 1.2rem; gap: 1.4rem; }
.ps-voisines li { margin: .55rem 0; break-inside: avoid; }
/* L'écart de loyer et le lien « comparer » passent sous le nom : en colonnes, les mettre
   sur la même ligne coupait le nom de commune en deux. */
.ps-voisines li .ps-note { display: block; font-size: .85rem; margin: 0; }
.ps-voisines-duel { font-size: .85rem; }
@media (max-width: 640px) { .ps-voisines ul { columns: 1; } }

/* ── Accueil : listes classements / départements ─────────────────────────── */
.ps-home-classements { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: .55rem .9rem; }
@media (max-width: 640px) { .ps-home-classements { grid-template-columns: 1fr; } }
.ps-home-classements a { display: block; padding: .7rem .9rem; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; font-weight: 600; color: var(--ink); transition: border-color .15s, transform .15s, box-shadow .15s; }
.ps-home-classements a:hover { border-color: var(--brand); transform: translateX(3px); color: var(--brand-dark); box-shadow: none; }
.ps-home-classements a:active { border-color: var(--brand); transform: translateX(3px) scale(.98); color: var(--brand-dark); background: var(--brand-soft); }
.ps-home-depts { list-style: none; padding: 0; columns: 3; font-size: .93rem; }
.ps-home-depts li { margin: .25rem 0; break-inside: avoid; }
.ps-home-depts a { color: var(--ink-soft); }
.ps-home-depts a:hover { color: var(--brand-dark); }
@media (max-width: 640px) { .ps-home-depts { columns: 2; } }

/* home : départements groupés par région (remplace la liste plate à 100 entrées) */
.ps-regions-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 1.6rem 1.8rem; margin: 1.6rem 0; }
.ps-region-group h3 { font-family: var(--font-body); font-size: 1.02rem; font-weight: 700; color: var(--ink); margin: 0 0 .5rem; }
.ps-region-group .ps-home-depts { columns: 1; font-size: .9rem; }
.ps-home-seo { color: var(--ink-soft); font-size: .95rem; }
.ps-home-seo h1 { font-family: var(--font-display); font-size: 1.5rem; color: var(--ink); margin: 1rem 0 0.5rem; }

/* ── Emplacements pub ────────────────────────────────────────────────────── */
.ps-ad-slot { min-height: 0; margin: 1.5rem 0; text-align: center; }
.ps-ad-slot[data-filled] { min-height: 280px; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.ps-footer { margin-top: 4rem; padding: 2.4rem 0; border-top: 1px solid var(--border); font-size: .86rem; color: var(--ink-soft); background: var(--bg-soft); }
.ps-footer strong { font-family: var(--font-body); color: var(--ink); }
.ps-footer a { color: var(--ink-soft); }
.ps-footer a:hover { color: var(--brand-dark); }
.ps-footer-note { font-size: .78rem; color: var(--ink-faint); }

.page .ps-wrap > h1:first-child { margin-top: 1.2rem; }
.entry-content, .page .ps-wrap { font-size: 1rem; }
.entry-content ul { padding-left: 1.3rem; }

/* ── Carte interactive /carte/ ───────────────────────────────────────────── */
.ps-carte-pills { margin-bottom: 1.1rem; }
.ps-rank-1 td:first-child, .ps-rank-2 td:first-child, .ps-rank-3 td:first-child {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6em; height: 1.6em; border-radius: var(--radius); font-weight: 700;
}
.ps-rank-1 td:first-child { background: var(--brand); color: #fff; }
.ps-rank-2 td:first-child { background: var(--brand-100); color: var(--brand-deep); }
.ps-rank-3 td:first-child { background: var(--bg-tint); color: var(--ink-soft); }
.ps-filter-chip.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* Agencement sidebar (liste + recherche) / carte / panel de détail, cf. pattern
   « app de découverte de lieux » : 3 colonnes qui se replient en pile sous 1024px. */
.ps-map-layout { display: grid; grid-template-columns: 260px 1fr 300px; gap: 1.1rem; align-items: start; }
.ps-map-sidebar, .ps-map-detail {
  border: 1px solid var(--border); border-radius: var(--radius); background: #fff;
  box-shadow: none; padding: 1.1rem; max-height: 620px; overflow-y: auto;
}
.ps-map-sidebar-search { position: relative; margin-bottom: 1rem; }
.ps-map-sidebar-search input {
  width: 100%; padding: .6rem .8rem; border: 1px solid var(--border); border-radius: var(--radius);
  font-size: .9rem; font-family: var(--font-body); background: var(--bg-soft); outline: none;
}
.ps-map-sidebar-search input:focus { border-color: var(--brand); background: #fff; box-shadow: none; }
.ps-map-sidebar-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin-bottom: .7rem;
  font-size: .74rem; font-weight: 700;   color: var(--ink-faint);
}
.ps-map-sidebar-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.ps-map-sidebar-item {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem; width: 100%;
  text-align: left; border: 1px solid var(--border-soft); background: var(--bg-soft); border-radius: var(--radius);
  padding: .6rem .75rem; font-size: .85rem; font-family: var(--font-body); color: var(--ink);
  cursor: pointer; min-height: 44px; transition: border-color .15s, background .15s, transform .1s ease;
}
.ps-map-sidebar-item:hover { border-color: var(--brand); background: var(--brand-soft); }
.ps-map-sidebar-item:active { border-color: var(--brand); background: var(--brand-100); transform: scale(.98); }
.ps-map-sidebar-item.is-selected { border-color: var(--bleu-france, #2563eb) !important; background: var(--bleu-950, #EAF2FF) !important; color: var(--ink, #0F172A) !important; box-shadow: none; font-weight: 700; }
.ps-map-sidebar-name { font-weight: 700; }
.ps-map-sidebar-dep { color: var(--ink-faint); font-size: .78rem; }
.ps-map-sidebar-val { font-weight: 700; color: var(--brand-dark); white-space: nowrap; flex: none; }
.ps-map-sidebar-empty { font-size: .85rem; color: var(--ink-faint); padding: .6rem .1rem; line-height: 1.5; }

.ps-map-detail { position: relative; }
/* Audit UX 06/08 : le bouton fermait un panneau déjà vide au chargement (état par
   défaut, aucune ville sélectionnée). Masqué tant que .is-open n'est pas posé par
   showDetail() (assets/carte.js). */
.ps-map-detail-close { display: none; }
.ps-map-detail.is-open .ps-map-detail-close {
  display: block;
  position: absolute; top: .7rem; right: .7rem; width: 36px; height: 36px; border-radius: var(--radius);
  border: 1px solid var(--border); background: #fff; color: var(--ink-soft); font-size: .9rem; cursor: pointer;
  transition: transform .1s ease;
}
.ps-map-detail-close:hover { border-color: var(--brand); color: var(--brand-dark); }
.ps-map-detail-close:active { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-soft); transform: scale(.9); }
.ps-map-detail-empty { color: var(--ink-faint); font-size: .9rem; line-height: 1.6; padding-top: 1.6rem; margin: 0; }
.ps-map-detail-dep { font-size: .74rem; font-weight: 700;   color: var(--brand-dark); }
.ps-map-detail-body h3 { margin: .25rem 0 .9rem; font-size: 1.25rem; padding-right: 2.2rem; }
.ps-map-detail-main {
  display: flex; flex-direction: column; gap: .15rem; background: var(--brand-soft);
  border-radius: var(--radius); padding: .8rem 1rem; margin: 0 0 1.1rem;
}
.ps-map-detail-main-label { font-size: .74rem; font-weight: 700;   color: var(--brand-dark); }
.ps-map-detail-main-val { font-family: var(--font-body); font-size: 1.5rem; font-weight: 700; color: var(--ink); }
.ps-map-detail-stats { list-style: none; margin: 0 0 1.2rem; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.ps-map-detail-stats li { display: flex; justify-content: space-between; gap: .6rem; padding: .4rem 0; border-bottom: 1px solid var(--border-soft); font-size: .88rem; }
.ps-map-detail-stats li span { color: var(--ink-soft); }
.ps-map-detail-stats li strong { color: var(--ink); font-weight: 700; }
.ps-map-detail-cta { width: 100%; text-align: center; }

.ps-map-box { position: relative; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: none; background: var(--bg-tint); }
#ps-map { width: 100%; height: 580px; }
.ps-map-hint { margin-top: .6rem; }
.ps-map-tabs { display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: center; margin-bottom: .8rem; }
.ps-map-tabs .ps-map-vues { position: static; display: flex; gap: .3rem; flex-wrap: wrap; max-width: none; top: auto; }
.ps-map-box > .ps-map-vues { position: absolute; top: .6rem; left: .6rem; z-index: 5; display: flex; gap: .3rem; flex-wrap: wrap; max-width: 60%; }
.ps-map-vues button { padding: .3rem .65rem; font-size: .76rem; font-weight: 600; font-family: var(--font-body); border: 1px solid var(--border); border-radius: var(--radius); background: rgba(255,255,255,.94); color: var(--ink-soft); cursor: pointer; transition: transform .1s ease; }
.ps-map-vues button:hover { border-color: var(--brand); color: var(--brand-dark); }
.ps-map-vues button:active { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-soft); transform: scale(.95); }
.ps-map-vues button.is-active { background: var(--brand); color: #fff; border-color: var(--brand); }
.ps-map-vues button:disabled { cursor: wait; opacity: .7; }
.ps-map-box > .ps-map-niveaux { top: 2.6rem; }
#ps-map-results { position: absolute; top: 100%; left: 0; right: 0; width: auto; margin-top: 4px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: none; overflow: hidden; z-index: 10; }
#ps-map-results button { display: block; width: 100%; text-align: left; padding: .5rem .7rem; border: 0; border-bottom: 1px solid var(--border-soft); background: #fff; font-size: .85rem; font-family: var(--font-body); color: var(--ink); cursor: pointer; transition: transform .1s ease; }
#ps-map-results button:active { background: var(--brand-100); transform: scale(.98); }
#ps-map-results button:hover { background: var(--brand-soft); }
.ps-map-legend { position: absolute; bottom: .8rem; left: .8rem; z-index: 5; background: rgba(15,23,42,.88); color: #fff; border-radius: var(--radius); padding: .55rem .75rem; font-size: .72rem; }
.ps-map-legend-label { display: block; font-weight: 700;   font-size: .66rem; opacity: .85; margin-bottom: .3rem; }
.ps-map-legend-bar { display: block; width: 150px; height: 8px; border-radius: var(--radius); }
.ps-map-legend-scale { display: flex; justify-content: space-between; margin-top: .2rem; opacity: .75; }
.ps-map-tooltip { position: absolute; z-index: 7; pointer-events: none; background: rgba(15,23,42,.92); color: #fff; padding: .45rem .65rem; border-radius: var(--radius); font-size: .8rem; line-height: 1.45; white-space: nowrap; }
.ps-map-tooltip em { color: var(--brand-100); font-style: normal; font-size: .72rem; }
.maplibregl-popup-content { font-family: var(--font-body); font-size: .85rem; border-radius: var(--radius); padding: .7rem .9rem; }
.maplibregl-popup-content a { color: var(--brand-dark); font-weight: 600; }
/* 1024px : sidebar et panel de détail passent d'une 3e/1re colonne à des blocs empilés
   au-dessus/en dessous de la carte. Le panel de détail reste masqué tant qu'aucune
   ville n'est sélectionnée (`.is-open`), pour ne pas allonger la page inutilement. */
@media (max-width: 1024px) {
  .ps-map-layout { grid-template-columns: 1fr; }
  .ps-map-box { order: 1; }
  .ps-map-sidebar { order: 2; max-height: 280px; }
  .ps-map-detail { order: 3; max-height: none; display: none; }
  .ps-map-detail.is-open { display: block; }
}
@media (max-width: 700px) {
  #ps-map { height: 420px; }
  .ps-map-sidebar { padding: .8rem; max-height: 240px; }
  .ps-map-legend { position: static; margin: .5rem .6rem .6rem; display: inline-block; }
  .ps-carte-pills {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ps-carte-pills::-webkit-scrollbar { display: none; }
  .ps-carte-pills .ps-filter-chip { white-space: nowrap; }
  .ps-filter-chip { min-height: 44px; padding: .55rem .9rem; }
  .ps-map-vues button { min-height: 44px; padding: .5rem .8rem; }
  .ps-carte-pills, .ps-map-tabs, .ps-filter-bar { gap: .5rem; }
}

.ps-filter-chip:focus-visible,
.ps-map-vues button:focus-visible,
.ps-cta-btn:focus-visible,
.ps-tunnel-geoloc:focus-visible,
.ps-compare-field input:focus-visible,
#ps-map-results button:focus-visible,
.ps-compare-results button:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px;
}

/* Refonte front carte : espace éditorial large, contrôles regroupés, carte centrale.
   Les reglages de .ps-nav-links / .ps-nav-links a qui vivaient ici s'appliquaient a
   TOUT le site (aucun ancetre ne les scopait) et ecrasaient silencieusement le bloc
   header d'origine : ils sont desormais fusionnes dans ce bloc, ligne 162. */
.ps-nav { gap: 1.35rem; padding-top: .85rem; padding-bottom: .85rem; }
/* Le bloc .ps-nav-cta qui vivait ici est fusionne dans la definition unique, ligne 233. */
.ps-nav-cta { margin-left: auto; }
.ps-nav-cta span { display: grid; place-items: center; width: 1.65rem; height: 1.65rem; border-radius: var(--radius); background: rgba(255,255,255,.14); font-family: var(--font-body); transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.ps-nav-cta:hover span { transform: translateX(2px); }

.ps-carte-page { max-width: 1420px; padding-top: 2.5rem; }
.ps-map-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 340px); column-gap: 3rem; align-items: center; margin: 0 0 1.7rem; padding: 0 0 1.6rem; border-bottom: 1px solid var(--border); }
.ps-map-kicker { margin: 0 0 .3rem; color: var(--brand-dark); font-size: 1.05rem; font-weight: 700; text-transform: none; letter-spacing: normal; font-family: var(--font-body); }
.ps-map-intro h1 { max-width: 18ch; margin: 0; font-size: clamp(2.45rem, 4vw, 4.25rem); letter-spacing: -.012em; text-wrap: balance; }
.ps-map-intro .ps-verdict { max-width: 61ch; margin: 1rem 0 0; font-size: 1.04rem; }
.ps-map-metric-picker { grid-column: 2; grid-row: 1 / span 3; border-radius: var(--radius); background: var(--bg-soft); box-shadow: none; }
.ps-map-metric-picker summary { display: grid; gap: .1rem; padding: .9rem 1rem; list-style: none; cursor: pointer; }
.ps-map-metric-picker summary::-webkit-details-marker { display: none; }
.ps-map-metric-picker summary span { color: var(--ink-faint); font-size: .7rem; font-weight: 800;  letter-spacing: .08em; }
.ps-map-metric-picker summary strong { font-family: var(--font-display); font-size: 1.15rem; }
.ps-map-metric-picker[open] { background: #fff; box-shadow: none; }
.ps-map-metric-picker .ps-carte-pills { margin: 0; padding: .2rem .8rem .9rem; }
/* 3 colonnes : liste, carte, panneau detail. Cette redefinition n'en declarait que 2,
   le panneau detail partait en auto-placement sur une 2e rangee. */
.ps-map-layout { grid-template-columns: 290px minmax(0, 1fr) 320px; gap: 1.25rem; }
.ps-map-sidebar, .ps-map-detail { border: 0; border-radius: var(--radius); box-shadow: none; max-height: 650px; }
.ps-map-box { border: 0; border-radius: var(--radius); box-shadow: none; }
#ps-map { height: 650px; }
@media (max-width: 1024px) {
  .ps-map-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .ps-map-intro { grid-template-columns: minmax(0, 1fr); row-gap: 1.4rem; }
  .ps-map-metric-picker { grid-column: 1; grid-row: auto; }
}
.ps-cmp-banner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.2rem;
  padding: 1.4rem 1.6rem;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: none;
  margin: 1.4rem 0 2rem;
}
.ps-cmp-side {
  min-width: 0;
  overflow-wrap: anywhere;
}
.ps-cmp-side strong {
  display: block;
  font-size: 1.25rem;
  color: var(--ink);
  font-weight: 800;
  margin-bottom: 0.2rem;
}
.ps-cmp-side span {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  color: #0F766E;
  background: #CCFBF1;
  border: 1px solid #99F6E4;
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius);
}
.ps-cmp-score {
  font-family: var(--font-body);
  font-size: 2rem;
  font-weight: 800;
  color: var(--brand);
  background: var(--bg-tint);
  padding: 0.5rem 1.2rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.ps-duel-cell { min-width: 0; }
.ps-duel-a { text-align: right; }
.ps-duel-b { text-align: left; }
.ps-duel-val {
  display: inline-block;
  padding: .3rem .75rem;
  border-radius: var(--radius);
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 0.9rem;
}
.ps-duel-val.ps-duel-win {
  background: #CCFBF1;
  color: #0F766E;
  font-weight: 800;
  border: 1px solid #99F6E4;
}
.ps-duel-label {
  text-align: center;
  font-size: .88rem;
  font-weight: 700;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.ps-duel-bars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 6px;
  margin: 0.2rem 0 0.6rem;
}
.ps-duel-bar { display: block; height: 100%; border-radius: var(--radius); background: var(--border-soft); }
.ps-duel-bar.ps-duel-win { background: var(--brand); }

/* ── Comparateur 3-4 villes (ps-duelN) ─────────────────────────────── */
.ps-cmpN-banner {
  display: grid;
  grid-template-columns: repeat(var(--ps-n, 4), 1fr);
  gap: 1rem;
  padding: 1.4rem 1.6rem;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: none;
  margin: 1.4rem 0 2rem;
}
.ps-cmpN-side {
  min-width: 0;
  text-align: center;
  overflow-wrap: anywhere;
}
.ps-cmpN-side strong {
  display: block;
  font-size: 1.15rem;
  color: var(--ink);
  font-weight: 800;
  margin-bottom: 0.2rem;
}
.ps-cmpN-side span {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  color: #0F766E;
  background: #CCFBF1;
  border: 1px solid #99F6E4;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius);
}

/* ── Region Group & Department List (High Contrast & Readability) ──────────── */
.ps-regions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 1.8rem;
  margin-top: 1.5rem;
}

.ps-region-group {
  background: #ffffff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem;
  box-shadow: none;
}

.ps-region-group h3 {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 800;
  
  letter-spacing: 0.05em;
  color: var(--brand-dark);
  margin: 0 0 0.8rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--border-soft);
}

.ps-home-depts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.ps-home-depts li {
  font-size: 0.9rem;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ps-home-depts a {
  color: var(--ink) !important;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 3px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.ps-home-depts a:hover {
  color: var(--brand-dark) !important;
  text-decoration-color: var(--brand-dark);
}

.ps-home-depts .ps-note {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-faint) !important;
}

.ps-duel-row {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .8rem;
  padding: .5rem 0; border-bottom: 1px solid var(--border-soft);
}
.ps-duel-cell { min-width: 0; }
.ps-duel-a { text-align: right; }
.ps-duel-b { text-align: left; }
.ps-duel-val { display: inline-block; padding: .2rem .5rem; border-radius: var(--radius); color: var(--ink); }
.ps-duel-val.ps-duel-win { background: var(--brand-soft); color: var(--brand-deep); font-weight: 700; }
.ps-duel-label { text-align: center; font-size: .85rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.ps-duel-bars {
  display: flex; align-items: center; justify-content: center; gap: 2px; height: 6px; margin: 0 0 .5rem;
}
.ps-duel-bar { display: block; height: 100%; border-radius: var(--radius); background: var(--border); }
.ps-duel-bar.ps-duel-win { background: var(--brand); }

@media (max-width: 640px) {
  .ps-duel-head, .ps-duel-row {
    grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: .2rem .6rem;
  }
  .ps-duel-head .ps-duel-label, .ps-duel-row .ps-duel-label {
    grid-column: 1 / -1; grid-row: 1; text-align: center; font-size: .78rem;
  }
  .ps-duel-head .ps-duel-a, .ps-duel-row .ps-duel-a { grid-row: 2; text-align: right; }
  .ps-duel-head .ps-duel-b, .ps-duel-row .ps-duel-b { grid-row: 2; text-align: left; }
  .ps-duel-bars { grid-column: 1 / -1; grid-row: 3; }
  .ps-duel-val { font-size: .85rem; padding: .15rem .4rem; }
}

/* ── Comparateur 3-4 villes (ps-duelN) : une colonne libellé + une par ville.
   Le nombre de villes (--ps-n, 3 ou 4) fixe le nombre de colonnes ; conteneur
   dédié en overflow-x: auto pour ne jamais faire déborder la page sur mobile
   (au lieu du mode empilé du duel à 2, qui ne scale pas à 4 colonnes). */
.ps-cmpN-banner { display: grid; grid-template-columns: repeat(var(--ps-n, 4), 1fr); gap: .8rem; padding: 1rem 1.2rem; background: var(--brand-soft); border: 1px solid var(--brand-100); border-radius: var(--radius); margin: 1.2rem 0; }
.ps-cmpN-side { min-width: 0; text-align: center; overflow-wrap: anywhere; }
.ps-cmpN-side span { display: block; font-size: .8rem; color: var(--ink-soft); }
.ps-duel-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -1px; }
.ps-duelN { width: max-content; min-width: 100%; }
.ps-duelN-head, .ps-duelN-row {
  display: grid; grid-template-columns: 10rem repeat(var(--ps-n, 4), minmax(6.5rem, 1fr));
  align-items: center; gap: .6rem;
}
.ps-duelN-head { padding: 0 0 .6rem; font-family: var(--font-body); font-weight: 700; font-size: .95rem; color: var(--ink); }
.ps-duelN-row { padding: .5rem 0; border-bottom: 1px solid var(--border-soft); }
.ps-duelN-label {
  font-size: .85rem; color: var(--ink-soft); overflow-wrap: anywhere;
  position: sticky; left: 0; background: #fff; padding-right: .4rem;
}
.ps-duelN-head .ps-duelN-label { background: transparent; }
.ps-duelN-cell { min-width: 0; text-align: center; }
@media (max-width: 640px) {
  .ps-cmpN-banner { grid-template-columns: repeat(2, 1fr); }
  .ps-cmpN-side span { font-size: .7rem; }
  .ps-duelN-head, .ps-duelN-row { grid-template-columns: 8rem repeat(var(--ps-n, 4), minmax(5.5rem, 1fr)); gap: .4rem; }
  .ps-duelN-cell .ps-duel-val { font-size: .85rem; padding: .15rem .4rem; }
}

/* ── Tunnel ma ville idéale ── */
.ps-tunnel { margin: 1.4rem 0; }
.ps-tunnel-progress { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.2rem; }
.ps-tunnel-progress-bar { flex: 1; height: 6px; border-radius: var(--radius); background: var(--bg-tint); overflow: hidden; }
.ps-tunnel-progress-bar > i { display: block; height: 100%; border-radius: var(--radius); background: var(--brand); transition: width .3s cubic-bezier(.2,.8,.2,1); }
.ps-tunnel-progress-label { font-size: .8rem; color: var(--ink-faint); white-space: nowrap; }

.ps-tunnel-card {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 1.7rem; background: #fff;
  box-shadow: none; animation: ps-tunnel-in .25s cubic-bezier(.2,.8,.2,1);
}
@keyframes ps-tunnel-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }
.ps-tunnel-titre { margin: 0 0 1.1rem; font-size: clamp(1.2rem, 2.6vw, 1.55rem); }

.ps-tunnel-options { display: flex; flex-direction: column; gap: .6rem; }
.ps-tunnel-opt {
  border: 1px solid var(--border); background: #fff; color: var(--ink); border-radius: var(--radius);
  padding: .9rem 1.1rem; font-size: 1rem; font-family: inherit; font-weight: 600; text-align: left;
  cursor: pointer; min-height: 48px; transition: border-color .15s, background .15s, color .15s, transform .1s ease;
}
.ps-tunnel-opt:hover { border-color: var(--brand); color: var(--brand-dark); }
.ps-tunnel-opt:active { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); transform: scale(.98); }
.ps-tunnel-opt.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }

.ps-tunnel-opt-wrap { display: flex; flex-direction: column; gap: .4rem; }
.ps-tunnel-opt-wrap .ps-tunnel-opt { width: 100%; }
.ps-tunnel-intensite { display: flex; gap: .4rem; padding-left: .2rem; }
.ps-tunnel-intensite-btn {
  border: 1px solid var(--border); background: #fff; color: var(--ink-soft); border-radius: var(--radius);
  padding: .35rem .9rem; font-size: .82rem; font-family: inherit; font-weight: 600; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s, transform .1s ease;
}
.ps-tunnel-intensite-btn:hover { border-color: var(--brand); color: var(--brand-dark); }
.ps-tunnel-intensite-btn:active { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); transform: scale(.94); }
.ps-tunnel-intensite-btn.is-active { background: var(--brand-100); border-color: var(--brand); color: var(--brand-deep); }

.ps-tunnel-suivant { margin-top: 1.1rem; width: 100%; min-height: 48px; }
.ps-tunnel-suivant:disabled { opacity: .45; cursor: not-allowed; }

.ps-tunnel-autocomplete { position: relative; }
.ps-tunnel-autocomplete input[type="search"] {
  width: 100%; border: 1px solid var(--border); border-radius: var(--radius); padding: .8rem .9rem;
  font-size: 1rem; font-family: inherit; background: #fff; outline: none; min-height: 48px;
}
.ps-tunnel-autocomplete input[type="search"]:focus { border-color: var(--brand); box-shadow: none; }
.ps-tunnel-geoloc {
  margin-top: .8rem; display: inline-flex; align-items: center; gap: .4rem;
  border: 1px solid var(--border); background: #fff; color: var(--ink-soft); border-radius: var(--radius);
  padding: .55rem .9rem; font-size: .88rem; font-weight: 600; font-family: inherit; cursor: pointer;
  transition: border-color .15s, color .15s, transform .1s ease;
}
.ps-tunnel-geoloc:hover { border-color: var(--brand); color: var(--brand-dark); }
.ps-tunnel-geoloc:active { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-soft); transform: scale(.96); }
.ps-tunnel-geoloc-msg { margin: .4rem 0 0; min-height: 1.1em; }
.ps-tunnel-skip { margin-top: .8rem; background: none; border: none; color: var(--ink-faint); font-size: .88rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: .3rem 0; transition: transform .1s ease; }
.ps-tunnel-skip:hover { color: var(--brand-dark); }
.ps-tunnel-skip:active { color: var(--brand-dark); transform: scale(.96); }

.ps-tunnel-nav { margin-top: 1rem; }
.ps-tunnel-retour { background: none; border: none; color: var(--ink-soft); font-size: .9rem; cursor: pointer; padding: .5rem 0; transition: transform .1s ease; }
.ps-tunnel-retour:hover { color: var(--brand-dark); }
.ps-tunnel-retour:active { color: var(--brand-dark); transform: scale(.96); }
.ps-tunnel-retour:disabled { opacity: 0; pointer-events: none; }

.ps-tunnel-recap-list { list-style: none; margin: 0 0 1.2rem; padding: 0; display: flex; flex-direction: column; gap: .1rem; }
.ps-tunnel-recap-item { display: flex; align-items: center; gap: .6rem; padding: .6rem 0; border-bottom: 1px solid var(--border-soft); flex-wrap: wrap; }
.ps-tunnel-recap-q { flex: 1 1 auto; font-size: .88rem; color: var(--ink-soft); min-width: 160px; }
.ps-tunnel-recap-r { font-weight: 700; color: var(--ink); }
.ps-tunnel-recap-edit { margin-left: auto; background: none; border: none; color: var(--brand-dark); font-size: .82rem; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; transition: transform .1s ease; }
.ps-tunnel-recap-edit:active { transform: scale(.94); }
.ps-tunnel-lancer { width: 100%; min-height: 48px; }

.ps-tunnel-calcul { text-align: center; padding: 3rem 1rem; }
.ps-tunnel-spinner {
  width: 44px; height: 44px; border-radius: var(--radius); margin: 0 auto 1.2rem;
  border: 4px solid var(--brand-100); border-top-color: var(--brand); animation: ps-tunnel-spin .8s linear infinite;
}
@keyframes ps-tunnel-spin { to { transform: rotate(360deg); } }
.ps-tunnel-calcul-msg { font-weight: 700; color: var(--ink); font-size: 1.05rem; }
.ps-tunnel-rgpd { margin-top: 1rem; }

.ps-tunnel-resultats h2 { margin-bottom: 1rem; }
.ps-tunnel-result-card {
  display: flex; align-items: flex-start; gap: 1rem; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1rem 1.2rem; margin-bottom: .8rem; background: #fff; box-shadow: none;
}
.ps-tunnel-result-card.ps-rank-1 { border-color: var(--brand); background: var(--brand-soft); }
.ps-tunnel-result-rank {
  font-family: var(--font-body); font-weight: 700; font-size: 1.3rem; color: var(--brand-dark);
  min-width: 2.2rem; text-align: center; flex: none;
}
.ps-tunnel-result-body { flex: 1; min-width: 0; }
.ps-tunnel-result-body h3 { margin: 0 0 .2rem; font-size: 1.1rem; }
.ps-tunnel-result-score { display: inline-block; font-weight: 700; color: var(--brand-dark); margin-right: .6rem; }
.ps-tunnel-duel { margin: .5rem 0 0; }
.ps-tunnel-duel a { font-size: .88rem; font-weight: 600; }

.ps-tunnel-fin { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.4rem; }

@media (max-width: 640px) {
  .ps-tunnel-card { padding: 1.1rem; }
  .ps-tunnel-opt { padding: .8rem 1rem; }
  .ps-tunnel-result-card { padding: .85rem 1rem; gap: .7rem; }
}

/* ── Bloc « en un coup d'œil » : points forts / points faibles ─────────────
   Traduit les percentiles nationaux (déjà en base, cf. inc/bilan.php) en verdict
   lisible. Deux colonnes lues d'un coup, pas un mur de chiffres. */
.ps-bilan { background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.4rem 1.5rem 1.6rem; }
.ps-bilan > h2 { margin-top: 0; }
.ps-bilan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin-top: 1.1rem; }
.ps-bilan-col { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.1rem 1.15rem; border-top: 3px solid var(--border); }
.ps-bilan-col--fort   { border-top-color: var(--brand); }
.ps-bilan-col--faible { border-top-color: var(--bad-fg); }
.ps-bilan-col h3 { margin: 0 0 .8rem; font-size: .82rem; font-weight: 700;   }
.ps-bilan-col--fort   h3 { color: var(--brand-dark); }
.ps-bilan-col--faible h3 { color: var(--bad-fg); }
.ps-bilan-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .85rem; }
.ps-bilan-col li { display: flex; flex-direction: column; gap: .1rem; padding-left: 1.5rem; position: relative; }
.ps-bilan-col li::before {
  position: absolute; left: 0; top: .05rem;
  width: 1.05rem; height: 1.05rem; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: .68rem; font-weight: 700; line-height: 1;
}
.ps-bilan-col--fort   li::before { content: "\2713"; background: var(--good-bg); color: var(--good-fg); }
.ps-bilan-col--faible li::before { content: "\2715"; background: var(--bad-bg);  color: var(--bad-fg); }
.ps-bilan-titre { font-weight: 700; color: var(--ink); font-size: .95rem; }
/* Le titre d'axe renvoie vers la famille de cartes correspondante. Souligné en pointillé
   plutôt qu'en bleu plein : c'est un renvoi vers le détail sur la même page, pas un
   départ vers ailleurs, et le bilan compte déjà jusqu'à dix de ces titres. */
.ps-bilan-titre a { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
.ps-bilan-titre a:hover { color: var(--brand-deep); text-decoration-style: solid; }
.ps-bilan-val   { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--ink); line-height: 1.25; }
.ps-bilan-leg   { font-size: .87rem; color: var(--ink-soft); line-height: 1.4; }
@media (max-width: 700px) {
  .ps-bilan { padding: 1.1rem 1rem 1.2rem; }
  .ps-bilan-grid { grid-template-columns: 1fr; gap: .85rem; }
}

/* ── Liste à coche générique (fait factuel, une seule couleur) ───────────── */
.ps-check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .85rem; }
.ps-check-list li { display: flex; flex-direction: column; gap: .1rem; padding-left: 1.5rem; position: relative; }
.ps-check-list li::before {
  content: "\2713";
  position: absolute; left: 0; top: .05rem;
  width: 1.05rem; height: 1.05rem; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: .68rem; font-weight: 700; line-height: 1;
  background: var(--good-bg); color: var(--good-fg);
}

/* ── Accordéon natif <details> (méthodologie et autres murs de listes) ──── */
.ps-accordion { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: .6rem; background: var(--bg); overflow: hidden; }
.ps-accordion summary {
  cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 1.1rem; font-family: var(--font-body); font-weight: 700; color: var(--ink);
  list-style: none; transition: background .15s;
}
.ps-accordion summary::-webkit-details-marker { display: none; }
.ps-accordion summary::after {
  content: "▾"; margin-left: .8rem; color: var(--brand-dark); flex-shrink: 0;
  transition: transform .2s ease;
}
.ps-accordion[open] summary::after { transform: rotate(-180deg); }
.ps-accordion summary:hover { background: var(--brand-soft); }
.ps-accordion summary:active { background: var(--brand-100); }
.ps-accordion-count { color: var(--ink-faint); font-size: .78rem; font-weight: 400; }
.ps-accordion .ps-check-list { padding: 1rem 1.1rem 1.1rem; }

/* ── Finitions UI & États d'éléments (Backlog audit) ─────────────────────── */
/* Retour tactile et visuel sur boutons, puces et liens interactifs */
.ps-btn:active, .ps-cta-btn:active, .ps-tv-pill:active, .ps-tunnel-opt:active, .ps-share-btn:active {
  transform: scale(.97);
  transition: transform .08s ease;
}

/* Accessible touch targets & min height */
.ps-cmp-remove, .ps-tv-pill, .ps-share-btn {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Styled native <select> elements */
select.ps-input, form select {
  padding: .6rem 2.2rem .6rem .8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%202e5e8c' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right .8rem center;
  appearance: none;
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--ink);
  cursor: pointer;
}
select.ps-input:focus, form select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: none;
}

/* Dynamic State Classes (.is-loading, .is-error, .is-empty) */
.is-loading {
  opacity: .7;
  pointer-events: none;
  position: relative;
}
.is-loading::after {
  content: " ";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--brand);
  border-right-color: transparent;
  border-radius: var(--radius);
  animation: ps-spin .6s linear infinite;
  margin-left: .5rem;
  vertical-align: middle;
}
@keyframes ps-spin {
  to { transform: rotate(360deg); }
}

.is-error {
  border-color: var(--bad-fg) !important;
  background-color: var(--bad-bg) !important;
}

.is-empty-msg {
  padding: 1.4rem;
  text-align: center;
  color: var(--ink-soft);
  font-style: italic;
}

/* High-End Photo Hero & Fallback (Doppelrand, micro-motion) */
.ps-photo {
  margin: 1.5rem 0 2rem;
  padding: 6px;
  border-radius: var(--radius);
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: none;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ps-photo:hover {
  box-shadow: none;
  border-color: var(--brand-100);
}
.ps-photo-inner {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--encre);
  aspect-ratio: 16 / 9;
  min-height: 210px;
  width: 100%;
}
@media (min-width: 768px) {
  .ps-photo-inner {
    aspect-ratio: 16 / 7;
  }
}
.ps-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
  border-radius: var(--radius);
  transition: transform 0.4s ease, opacity 0.3s ease;
}
.ps-photo figcaption {
  margin-top: 0.5rem;
  padding: 0 0.4rem;
  font-size: 0.76rem;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.ps-photo figcaption a {
  color: var(--brand-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ps-photo-fallback {
  margin: 1.5rem 0 2rem;
  padding: 6px;
  border-radius: var(--radius);
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: none;
}
.ps-photo-fallback-inner {
  border-radius: var(--radius);
  padding: 1.8rem 2rem;
  background: var(--encre);
  border: 1px solid var(--brand-100);
  color: var(--brand-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  position: relative;
  overflow: hidden;
}
.ps-photo-fallback-inner::after {
  content: "";
  position: absolute;
  right: -20px;
  bottom: -40px;
  width: 220px;
  height: 220px;
  border-radius: var(--radius);
  background: var(--encre);
  pointer-events: none;
}
.ps-photo-fallback-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--brand-dark);
  margin: 0 0 0.3rem;
}
.ps-photo-fallback-desc {
  font-size: 0.92rem;
  color: var(--ink-faint);
  margin: 0;
}

/* ── Footer 4 Colonnes & LeadGen Banner ──────────────────────────────────── */
.ps-footer {
  background: var(--brand-deep);
  color: #fff;
  padding-top: 0;
  margin-top: 4rem;
  border-top: 3px solid var(--brand);
}
.ps-footer a { color: var(--brand-100); text-decoration: none; }
.ps-footer a:hover { color: #fff; text-decoration: underline; }
.ps-footer strong { color: #fff; } /* sinon var(--ink) = la couleur du fond */

.ps-footer-leadgen {
  background: var(--encre);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding: 3rem 0;
}
.ps-leadgen-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
@media (max-width: 768px) {
  .ps-leadgen-grid { flex-direction: column; text-align: center; }
}
.ps-leadgen-badge {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--brand-100);
  margin-bottom: 0.4rem;
}
.ps-leadgen-content h2 {
  color: #fff;
  font-size: clamp(1.5rem, 2.5vw, 2.1rem);
  margin: 0 0 0.5rem;
}
.ps-leadgen-content p {
  color: var(--on-deep-soft);
  font-size: 0.95rem;
  max-width: 55ch;
  margin: 0;
}
.ps-cta-lead {
  background: #ffffff !important;
  color: var(--ink) !important;
  font-weight: 800;
  padding: 0.95rem 1.8rem;
  border-radius: var(--radius);
  box-shadow: none;
  border: 1px solid #ffffff;
  text-decoration: none;
}
.ps-cta-lead:hover {
  background: var(--bg-soft) !important;
  color: var(--ink) !important;
  box-shadow: none;
}

/* ── Impeccable Line-length limits (<75 chars) & Cookiebot Overrides ─────── */
.ps-game-banner-text > p,
.ps-leadgen-content > p,
.ps-footer-desc,
.cky-preference-content-wrapper p,
.cky-accordion-header-des p {
  max-width: 62ch;
  line-height: 1.6;
}

/* ── Vignettes de cartes & Fallbacks Harmonieux ───────────────────────────── */
.ps-city-card-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--encre);
}
.ps-city-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
}
.ps-city-card-thumb-fallback {
  width: 100%;
  height: 100%;
  min-height: 180px;
  background: var(--encre);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.ps-city-card-thumb-fallback::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--encre);
  pointer-events: none;
}
.ps-city-card-thumb-fallback span {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.35);
  z-index: 1;
  position: relative;
}

.ps-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding-top: 3.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
@media (max-width: 992px) {
  .ps-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 576px) {
  .ps-footer-grid { grid-template-columns: 1fr; }
}
.ps-footer-brand .ps-logo {
  color: #fff;
  font-size: 1.25rem;
  margin-bottom: 1rem;
}
.ps-footer-desc {
  font-size: 0.85rem;
  color: var(--on-deep-soft);
  line-height: 1.6;
  margin-bottom: 1rem;
}
.ps-footer-griffe strong {
  color: #fff;
}
.ps-footer-col h3 {
  color: #fff;
  font-size: 0.95rem;
  font-family: var(--font-body);
  font-weight: 800;
  margin-top: 0;
  margin-bottom: 0.8rem;
  letter-spacing: 0.02em;
  
}
.ps-footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
/* Les liens mesuraient 18px de haut : sous le seuil WCAG 2.2 de 24px, et le footer
   est sur les 34 000 pages. Le pas visuel entre deux liens est conserve (gap reduit
   d'autant que le padding augmente). */
.ps-footer-col ul a {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0.25rem 0;
  font-size: 0.88rem;
  color: var(--on-deep-soft);
  transition: color 0.15s ease;
}
.ps-footer-col ul a:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; border-radius: var(--radius); }
.ps-footer-col ul a:hover {
  color: #FFFFFF;
}

.ps-footer-bottom {
  padding-top: 1.5rem;
  padding-bottom: 2rem;
  font-size: 0.82rem;
  color: var(--on-deep-soft);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.ps-footer-note {
  color: var(--on-deep-soft);
  font-size: 0.78rem;
}

/* ── Enriched Classements Index Cards ─────────────────────────────────────── */
.ps-classement-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.8rem;
}
.ps-classement-card-head {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.ps-classement-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 800;
  
  letter-spacing: 0.06em;
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius);
  background: var(--brand-soft);
  color: var(--brand-dark);
}
.ps-classement-card-title {
  font-family: var(--font-display) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  line-height: 1.25;
  margin: 0 0 0.4rem;
}
.ps-classement-card-title a {
  color: var(--ink) !important;
  text-transform: none !important;
}
.ps-classement-card-title a:hover {
  color: var(--brand) !important;
}
.ps-classement-top3 {
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 0.75rem 0.9rem;
  margin-top: 0.2rem;
}
.ps-top3-label {
  display: block;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--ink-faint);
  
  letter-spacing: 0.04em;
  margin-bottom: 0.4rem;
}
.ps-top3-list {
  margin: 0;
  padding-left: 1.2rem;
  font-size: 0.88rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.ps-top3-list li {
  color: var(--ink-soft);
}
.ps-top3-list li a {
  font-weight: 700;
  color: var(--ink);
}
.ps-top3-val {
  font-weight: 800;
  color: var(--brand-dark);
  margin-left: 0.3rem;
  font-size: 0.82rem;
}
.ps-card-more {
  display: inline-flex;
  align-items: center;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--brand);
  margin-top: 0.4rem;
  transition: transform 0.15s ease;
}
.ps-card-more:hover {
  color: var(--brand-dark);
  transform: translateX(3px);
}

/* ── Logo Header Fix ─────────────────────────────────────────────────────── */
.ps-logo-text {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
}
.ps-logo-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.ps-logo-sub {
  font-weight: 700;
  font-size: 0.68rem;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  
  margin-top: 1px;
}

/* ── Game "Devine la Ville du Jour" High-End UI ───────────────────────────── */
.ps-devine-container {
  max-width: 920px;
  margin: 0 auto;
}
.ps-devine-hero {
  margin: 1.5rem 0 2rem;
  text-align: center;
}
.ps-devine-badge {
  display: block;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  color: var(--brand-dark) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin-bottom: 0.4rem !important;
}
.ps-devine-hero h1 {
  font-size: clamp(2rem, 4vw, 2.8rem);
  margin-bottom: 0.6rem;
}
.ps-devine-lead {
  font-size: 1.08rem;
  color: var(--ink-faint);
  max-width: 58ch !important;
  margin: 0 auto;
  line-height: 1.6;
}

/* Apercu des piliers de notation, /noter/ (noter.php). Boucle sur PS_AVIS_CRITERES,
   donc le nombre de pastilles suit la constante : flex-wrap et pas de grille a
   colonnes fixes, une 10e ligne de critere ne doit rien casser. Meme forme que les
   puces du reste du site (radius-pill, bordure, fond pale) : c'est un reperage, pas
   un controle — aucun etat actif, aucun curseur pointer. */
.ps-noter-piliers {
  margin: 0 auto 1.8rem;
  max-width: 62ch;
  text-align: center;
}
.ps-noter-piliers-titre {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
  margin: 0 0 0.6rem;
}
.ps-noter-piliers-liste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ps-noter-piliers-liste li {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.35rem 0.85rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink-faint);
  background: #fff;
}

.ps-devine-card {
  background: #ffffff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  box-shadow: none;
  padding: 2.2rem;
  margin-bottom: 3rem;
  position: relative;
}
@media (max-width: 640px) {
  .ps-devine-card { padding: 1.25rem; }
}

.ps-devine-search-box {
  position: relative;
  margin-bottom: 1.8rem;
}
.ps-devine-label {
  display: block;
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  margin-bottom: 0.6rem;
}
.ps-devine-input-group {
  position: relative;
  display: flex;
  align-items: center;
}
.ps-devine-input-group input[type="search"] {
  width: 100%;
  height: 56px;
  padding: 0.8rem 3.2rem 0.8rem 1.4rem;
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--bg-soft);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  outline: none;
  transition: all 0.2s ease;
  box-shadow: none;
}
.ps-devine-input-group input[type="search"]:focus {
  border-color: var(--brand);
  background: #ffffff;
  box-shadow: none;
}
.ps-devine-search-icon {
  position: absolute;
  right: 1.2rem;
  font-size: 1.2rem;
  pointer-events: none;
  opacity: 0.6;
}

.ps-devine-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 8px;
  z-index: 100;
  background: #ffffff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  box-shadow: none;
  max-height: 360px;
  overflow-y: auto;
  padding: 6px;
}
.ps-devine-results button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 1.1rem;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease;
}
.ps-devine-results button:hover,
.ps-devine-results button.is-active {
  background: var(--bg-tint);
}
.ps-devine-results button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--bg-soft);
}

.ps-devine-compteur {
  background: var(--bg-tint);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.6rem 1.4rem;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--brand-dark);
  text-align: center;
  margin-bottom: 1.8rem;
  display: inline-block;
  width: auto;
}

.ps-devine-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.8rem;
}
.ps-devine-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--ink-faint);
  font-size: 1.05rem;
}

.ps-devine-row {
  background: #ffffff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  box-shadow: none;
  display: grid;
  grid-template-columns: 1.2fr repeat(5, 1fr);
  gap: 0.75rem;
  align-items: center;
  transition: transform 0.2s ease;
}
@media (max-width: 768px) {
  .ps-devine-row {
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
  }
}
.ps-devine-row--win {
  border-color: #0F766E;
  background: var(--encre);
  box-shadow: none;
}

.ps-devine-nom {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--ink);
  grid-column: 1 / -1;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border-soft);
}
@media (min-width: 769px) {
  .ps-devine-nom {
    grid-column: span 1;
    border-bottom: none;
    padding-bottom: 0;
  }
}

.ps-devine-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.6rem 0.5rem;
  border-radius: var(--radius);
  background: var(--bg-tint);
  border: 1px solid var(--border);
  min-height: 58px;
}
.ps-devine-chip--ok {
  background: #CCFBF1;
  border-color: #99F6E4;
  color: #0F766E;
}
.ps-devine-chip-label {
  font-size: 0.72rem;
  font-weight: 700;
  
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  margin-bottom: 0.15rem;
}
.ps-devine-chip--ok .ps-devine-chip-label {
  color: #0F766E;
}
.ps-devine-chip-val {
  font-weight: 800;
  font-size: 1rem;
  color: var(--ink);
}
.ps-devine-chip--ok .ps-devine-chip-val {
  color: #0F766E;
}

.ps-devine-issue {
  background: var(--encre);
  border: 2px solid #0F766E;
  border-radius: var(--radius);
  padding: 1.6rem 1.8rem;
  margin-bottom: 1.8rem;
  text-align: center;
  box-shadow: none;
}
.ps-devine-issue p {
  font-size: 1.1rem;
  margin: 0.4rem 0;
}
.ps-devine-rules {
  margin-top: 1.5rem;
}
.ps-devine-rules summary {
  font-size: 1.05rem;
  font-weight: 700;
}
.ps-devine-rules .ps-accordion-content {
  padding: 1rem 1.2rem 1.2rem;
}
.ps-devine-rules p {
  margin: 0.5rem 0;
  font-size: 0.95rem;
}



/* ── Simulateur "Trouver ma Commune Idéale" (/trouver-ma-ville/) Bento UI ─── */
/* ==========================================================================
   SIMULATEUR DE CLASSEMENT (/trouver-ma-ville/) — CHARTE « COMMITTED »
   ========================================================================== */

.ps-trouver-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1rem;
}

.ps-trouver-hero {
  margin: 1.5rem 0 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--filet-encre, #33383D);
  text-align: left;
}

.ps-trouver-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 800;
  color: var(--sur-encre, #E8E6E1);
  letter-spacing: -0.02em;
  margin: 0 0 0.75rem;
}

.ps-trouver-hero .ps-verdict {
  font-size: 1.05rem;
  color: var(--sur-encre-2, #A8ABAE);
  max-width: 68ch;
  line-height: 1.5;
  margin-bottom: 1.5rem;
}

/* Timeline Sémantique */
.ps-step-progress-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0;
  margin: 1.2rem 0 0;
  list-style: none;
}

.ps-step-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--sur-encre-2, #A8ABAE);
}

.ps-step-item.is-active,
.ps-step-item.is-complete {
  color: var(--sur-encre, #E8E6E1);
}

.ps-step-num {
  width: 28px;
  height: 28px;
  border: 1px solid var(--filet-encre, #33383D);
  background: var(--encre-relief, #22262A);
  color: var(--sur-encre, #E8E6E1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 0.8rem;
}

.ps-step-item.is-active .ps-step-num {
  border-color: var(--brique, #B23A21);
  background: var(--brique, #B23A21);
  color: #FFFFFF;
}

.ps-step-line {
  flex: 1;
  max-width: 60px;
  height: 1px;
  background: var(--filet-encre, #33383D);
}

.ps-step-line.is-active {
  background: var(--brique-sur-encre, #D9603C);
}

/* Workspace 2 Colonnes */
.ps-tv-workspace {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 2rem;
  align-items: start;
  margin-bottom: 3rem;
}

@media (max-width: 960px) {
  .ps-tv-workspace {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* Colonne 1 : Sidebar des filtres */
.ps-tv-sidebar {
  background: var(--reserve, #F4F4F3);
  border: 1px solid var(--filet-encre, #33383D);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.ps-tv-block {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.ps-tv-fieldset {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.ps-tv-block-title {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 800;
  
  letter-spacing: 0.05em;
  color: var(--encre, #14171A);
  margin: 0 0 0.2rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--reserve-2, #E9E9E7);
}

.ps-tv-pills-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  border: none;
  padding: 0;
  margin: 0;
}

.ps-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  background: #FFFFFF;
  border: 1px solid var(--reserve-2, #E9E9E7);
  color: var(--encre, #14171A);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  min-height: 40px;
}

.ps-filter-chip:hover {
  border-color: var(--brique, #B23A21);
  color: var(--brique, #B23A21);
}

.ps-filter-chip.is-active,
.ps-filter-chip:has(input[type="radio"]:checked) {
  background: var(--encre, #14171A) !important;
  color: #FFFFFF !important;
  border-color: var(--encre, #14171A) !important;
}

/* Checkboxes */
.ps-tv-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ps-tv-check-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-ui);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--encre, #14171A);
  cursor: pointer;
  padding: 0.4rem 0;
  min-height: 44px;
}

.ps-tv-check-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--brique, #B23A21);
  cursor: pointer;
}

.ps-tv-dept-wrap input[type="search"] {
  width: 100%;
  height: 42px;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--reserve-2, #E9E9E7);
  background: #FFFFFF;
  color: var(--encre, #14171A);
  font-family: var(--font-ui);
  font-size: 0.88rem;
  outline: none;
}

.ps-tv-dept-wrap input[type="search"]:focus {
  border-color: var(--brique, #B23A21);
}

.ps-tv-filtres-footer {
  margin-top: 0.5rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--reserve-2, #E9E9E7);
}

.ps-tv-filtres-compteur {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--sur-reserve-3, #6B6F73);
}

/* Colonne 2 : Stage Principal */
.ps-tv-stage {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.ps-tv-criteres-card {
  background: var(--reserve, #F4F4F3);
  border: 1px solid var(--filet-encre, #33383D);
  padding: 1.5rem;
}

.ps-tv-header-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--reserve-2, #E9E9E7);
  flex-wrap: wrap;
}

.ps-tv-section-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--encre, #14171A);
  margin: 0;
}

.ps-tv-view-mode-toggle {
  display: flex;
  gap: 0.4rem;
  border: none;
  padding: 0;
  margin: 0;
}

.ps-mode-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.8rem;
  background: #FFFFFF;
  border: 1px solid var(--reserve-2, #E9E9E7);
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--encre, #14171A);
  cursor: pointer;
}

.ps-mode-chip:has(input[type="radio"]:checked) {
  background: var(--encre, #14171A);
  color: #FFFFFF;
  border-color: var(--encre, #14171A);
}

/* Sliders Synthétiques / Curseurs */
.ps-tv-curseurs {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ps-tv-crit {
  display: grid;
  grid-template-columns: 200px 1fr 140px;
  align-items: center;
  gap: 1.2rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--reserve-2, #E9E9E7);
}

@media (max-width: 640px) {
  .ps-tv-crit {
    grid-template-columns: 1fr auto;
  }
  .ps-slider-track-wrap {
    grid-column: 1 / -1;
  }
}

.ps-tv-crit label {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--encre, #14171A);
}

.ps-slider-track-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.ps-tv-crit input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: var(--reserve-2, #E9E9E7);
  outline: none;
  cursor: pointer;
}

.ps-tv-crit input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: var(--brique, #B23A21);
  border: none;
  cursor: grab;
}

.ps-tv-crit input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: var(--brique, #B23A21);
  border: none;
  cursor: grab;
}

.ps-tv-crit output {
  font-family: var(--font-num);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--sur-reserve-3, #6B6F73);
  text-align: right;
}

.ps-tv-crit.is-on output {
  color: var(--brique, #B23A21);
}

/* Grille des Résultats */
.ps-tv-results-wrapper {
  background: var(--reserve, #F4F4F3);
  border: 1px solid var(--filet-encre, #33383D);
  padding: 1.5rem;
}

.ps-tv-legende {
  font-size: 0.88rem;
  color: var(--sur-reserve-3, #6B6F73);
  margin-bottom: 1.5rem;
  line-height: 1.4;
}

.ps-tv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 1.2rem;
}

.ps-tv-card {
  background: #FFFFFF;
  border: 1px solid var(--reserve-2, #E9E9E7);
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: border-color 0.15s ease;
}

.ps-tv-card:hover {
  border-color: var(--brique, #B23A21);
}

.ps-tv-card.ps-rank-1 {
  border-left: 4px solid var(--brique, #B23A21);
}

.ps-tv-card.ps-rank-2,
.ps-tv-card.ps-rank-3 {
  border-left: 4px solid var(--encre, #14171A);
}

.ps-tv-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ps-tv-card-rank {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--encre, #14171A);
}

.ps-tv-card-score {
  font-family: var(--font-num);
  font-size: 0.9rem;
  color: var(--sur-reserve-3, #6B6F73);
}

.ps-tv-card-score strong {
  font-size: 1.1rem;
  color: var(--brique, #B23A21);
}

.ps-tv-card-body h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  margin: 0 0 0.25rem;
}

.ps-tv-card-body h3 a {
  color: var(--encre, #14171A);
  text-decoration: none;
}

.ps-tv-card-body h3 a:hover {
  color: var(--brique, #B23A21);
}

.ps-tv-dep {
  font-size: 0.85rem;
  color: var(--sur-reserve-3, #6B6F73);
  margin: 0 0 0.5rem;
}

.ps-match-breakdown {
  font-size: 0.82rem;
  color: var(--encre, #14171A);
  background: var(--reserve-2, #E9E9E7);
  padding: 0.5rem 0.75rem;
  margin: 0.5rem 0;
  line-height: 1.35;
}

.ps-tv-rappel {
  font-size: 0.85rem;
  color: var(--sur-reserve-3, #6B6F73);
  line-height: 1.35;
  margin: 0;
}

.ps-tv-vie {
  font-size: 0.82rem;
  color: var(--sur-reserve-3, #6B6F73);
  margin-top: 0.4rem;
}

/* Details & Accordion */
.ps-algo-detail {
  background: var(--reserve, #F4F4F3);
  border: 1px solid var(--filet-encre, #33383D);
  padding: 1.2rem 1.5rem;
  margin: 2rem 0;
}

.ps-algo-detail summary {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--encre, #14171A);
  cursor: pointer;
}

/* ── Custom City Guide & Tourism Bento Section (PAM Inspiration) ──────────── */
.ps-city-guide-bento {
  background: #ffffff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  box-shadow: none;
  padding: 2rem 2.2rem;
  margin: 2.5rem 0;
}
@media (max-width: 640px) {
  .ps-city-guide-bento { padding: 1.2rem; }
}

.ps-guide-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  border-radius: var(--radius);
  background: var(--encre);
  border: 1px solid #99F6E4;
  color: #0F766E;
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  margin-bottom: 0.9rem;
}

.ps-guide-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 2rem;
  margin-top: 1.5rem;
}
@media (max-width: 860px) {
  .ps-guide-grid { grid-template-columns: 1fr; }
}

.ps-guide-list {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.ps-guide-cat {
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem;
}
.ps-guide-cat h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 0.6rem;
}
.ps-guide-cat ul {
  margin: 0;
  padding-left: 1.2rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.ps-guide-cta-box {
  background: var(--encre);
  color: #ffffff;
  border-radius: var(--radius);
  padding: 1.4rem 1.6rem;
  box-shadow: none;
}
.ps-guide-cta-box h4 {
  color: #ffffff;
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0 0 0.4rem;
}
.ps-guide-cta-box p {
  color: var(--on-deep-soft);
  font-size: 0.9rem;
  margin: 0 0 1rem;
}
.ps-cta-guide {
  background: #ffffff !important;
  color: var(--ink) !important;
  font-weight: 800;
  padding: 0.75rem 1.4rem;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  box-shadow: none;
  transition: transform 0.15s ease;
}
.ps-cta-guide:hover {
  background: var(--bg-soft) !important;
}

.ps-guide-map-card {
  background: var(--bg-soft);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.ps-guide-map-card h3 {
  font-size: 1.1rem;
  margin: 0 0 0.4rem;
}
.ps-guide-map-placeholder {
  flex: 1;
  min-height: 220px;
  background: var(--encre);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  margin-top: 1rem;
}
.ps-guide-map-pin {
  font-size: 2.2rem;
  margin-bottom: 0.5rem;
}

/* ── Bloc Articles & Conseils (Gros Maillage Interne SEO) ─────────────────── */
.ps-blog-links-bento {
  margin: 3rem 0;
}
.ps-blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 1.2rem;
  margin-top: 1.2rem;
}
.ps-blog-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  background: #ffffff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 1.3rem 1.5rem;
  box-shadow: none;
  transition: transform 0.2s ease, border-color 0.2s ease;
  text-decoration: none !important;
}
.ps-blog-card:hover {
  border-color: var(--brand-dark);
  box-shadow: none;
}
.ps-blog-cat {
  font-size: 0.72rem;
  font-weight: 800;
  
  letter-spacing: 0.06em;
  color: var(--brand-dark);
  background: var(--brand-100);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius);
  align-self: flex-start;
}
.ps-blog-card h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--ink);
  margin: 0.2rem 0 0.3rem;
  line-height: 1.3;
}
.ps-blog-card p {
  font-size: 0.88rem;
  color: var(--ink-faint);
  margin: 0;
  line-height: 1.5;
}

/* ── High-Visibility Score Pill & Feature Tag Overrides ───────────────────── */
.ps-card-score-pill {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(15, 23, 42, 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #ffffff !important;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius);
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.22);
  letter-spacing: 0;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.ps-hero-card-header .ps-card-score-pill {
  position: static;
  top: auto;
  right: auto;
}

.ps-card-tag-badge {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(15, 23, 42, 0.88);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #FFFFFF !important;
  font-weight: 700;
  font-size: 0.78rem;
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: none;
  max-width: calc(100% - 20px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 5;
}

/* ── Interactive 6-Card Grid "Explorer les villes par priorité" ──────────── */
.ps-envie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.ps-envie-card {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  background: #ffffff;
  border: 1.5px solid var(--border);
  /* 16px etait hors echelle. Le cran des cartes est --radius (10px), et la
     maquette dessine ces memes cartes a 9px (gabarit 1b, « Votre projet ? »). */
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem;
  text-decoration: none !important;
  box-shadow: none;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.ps-envie-card:hover {
  border-color: var(--brand-dark);
  box-shadow: none;
}

/* Une seule teinte, celle de la marque. Ces six cartes portaient six pastels
   differents poses en style= inline : un arc-en-ciel qui ne signifiait rien,
   chaque couleur n'etant liee a aucune donnee. */
.ps-envie-icon-wrap {
  width: 50px;
  height: 50px;
  /* Carre d'icone : --radius-sm. La maquette le dessine a 5px. */
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--brand-soft);
  color: var(--brand-dark);
  box-shadow: none;
}
.ps-envie-card:hover .ps-envie-icon-wrap {
  background: var(--brand);
  color: #FFFFFF;
  box-shadow: none;
}

/* ── Derniers avis d'habitants (accueil) — même patron visuel que .ps-envie-card ── */
.ps-derniers-avis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.ps-derniers-avis-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  background: #ffffff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  text-decoration: none !important;
  color: var(--ink-soft);
  box-shadow: none;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.ps-derniers-avis-card:hover {
  border-color: var(--brand-dark);
  box-shadow: none;
}
.ps-derniers-avis-ville {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  font-size: 1.05rem;
}
.ps-derniers-avis-texte {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
}
.ps-derniers-avis-meta {
  font-size: 0.78rem;
  color: var(--ink-faint);
}

.ps-envie-body {
  flex: 1;
  min-width: 0;
}
.ps-envie-body h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 0.25rem;
  line-height: 1.3;
}
.ps-envie-body p {
  font-size: 0.85rem;
  color: var(--ink-faint);
  margin: 0;
  line-height: 1.4;
}

.ps-envie-arrow {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--ink-faint);
  transition: transform 0.2s ease, color 0.2s ease;
}
.ps-envie-card:hover .ps-envie-arrow {
  color: var(--brand-dark);
  transform: translateX(4px);
}

/* ── Hero Search & Quick Cities Ultra-Clickable Overrides ─────────────────── */
.ps-home-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #ffffff;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 0.35rem 0.35rem 0.35rem 1.4rem !important;
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ps-home-search:focus-within {
  border-color: var(--brand-dark);
  box-shadow: none;
}
.ps-home-search input[type="search"] {
  height: 48px !important;
  font-size: 1rem !important;
}
.ps-home-search .ps-cta-btn {
  height: 48px;
  padding: 0 1.6rem !important;
  background: var(--encre);
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  border-radius: var(--radius-pill, 999px);
  box-shadow: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
.ps-home-search .ps-cta-btn:hover {
  box-shadow: none;
}

.ps-home-quick-cities {
  margin: 1.2rem 0 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}
.ps-home-quick-cities span {
  font-weight: 700;
  color: var(--ink-faint);
  font-size: 0.88rem;
}
.ps-home-quick-cities a {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 1rem !important;
  border-radius: var(--radius);
  background: #ffffff !important;
  border: 1.5px solid var(--border) !important;
  color: var(--brand-dark) !important;
  font-weight: 800 !important;
  font-size: 0.86rem !important;
  box-shadow: none;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease !important;
}
.ps-home-quick-cities a:hover {
  border-color: var(--brand-dark) !important;
  background: var(--brand-soft) !important;
}

.ps-hero-card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  padding: 0.8rem 1.4rem;
  background: var(--brand-dark);
  color: #ffffff !important;
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: var(--radius);
  box-shadow: none;
  border: none;
  transition: transform 0.2s ease, background 0.2s ease;
  margin-top: 0.8rem;
}
.ps-hero-preview-card:hover .ps-hero-card-cta {
  box-shadow: none;
}

/* ── Header Game Pill & Homepage Game Banner Styles ───────────────────────── */
/* La pilule est un bouton, pas un lien de menu : elle heritait du trait anime
   de .ps-nav-links a::after, qui venait se coller sous la pilule au survol. */
.ps-nav-links a.ps-nav-game-pill::after { content: none; }
.ps-nav-game-pill:focus-visible { outline: 2px solid var(--brand-deep); outline-offset: 3px; }
/* Aux couleurs de marque : la pilule se distingue des liens de menu par sa forme
   et son icone, pas par une troisieme teinte dans un header deja bleu. */
.ps-nav-game-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem !important;
  border-radius: var(--radius);
  background: var(--brand) !important;
  border: 1.5px solid var(--brand) !important;
  color: #FFFFFF !important;
  font-family: var(--font-display);
  font-weight: 700 !important;
  font-size: 0.84rem !important;
  box-shadow: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
  text-decoration: none !important;
}
.ps-nav-game-pill:hover {
  box-shadow: none;
  background: var(--brand-dark) !important;
  border-color: var(--brand-dark) !important;
}

.ps-home-game-banner {
  margin: 2.2rem 0;
}
.ps-game-banner-card {
  display: block;
  background: var(--encre);
  border-radius: var(--radius);
  padding: 2rem 2.4rem;
  color: #ffffff;
  text-decoration: none !important;
  box-shadow: none;
  border: 0 !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
}
.ps-game-banner-card::after {
  content: "";
  position: absolute;
  right: -30px;
  bottom: -50px;
  width: 280px;
  height: 280px;
  border-radius: var(--radius);
  background: var(--encre);
  pointer-events: none;
}
.ps-game-banner-card:hover {
  box-shadow: none;
}

.ps-game-banner-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius);
  background: #8C2F39;
  border: none;
  color: #ffffff !important;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0;
  margin-bottom: 1rem;
}

.ps-game-banner-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
@media (max-width: 860px) {
  .ps-game-banner-content {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
}

.ps-game-banner-text h2 {
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 0.5rem;
}
.ps-game-banner-text p {
  font-size: 1rem;
  color: #F1F5F9 !important;
  margin: 0;
  max-width: 65ch;
  line-height: 1.55;
}

.ps-cta-game-banner {
  background: #ffffff !important;
  color: var(--ink) !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  padding: 0.9rem 1.8rem !important;
  border-radius: var(--radius);
  white-space: nowrap;
  box-shadow: none;
  transition: transform 0.15s ease, background 0.15s ease !important;
}
.ps-game-banner-card:hover .ps-cta-game-banner {
  background: var(--bg-soft) !important;
}

/* Le carrousel tournant a ete retire du HTML : ses regles et son script sont
   partis avec lui plutot que de rester en dette silencieuse. */

/* ── Premium Micro-Animations & Dynamic Slide Effects ─────────────────────── */
@keyframes ps-pulse-glow {
  0% { transform: scale(1); opacity: 1; box-shadow: none; }
  70% { transform: scale(1.05); opacity: 0.8; box-shadow: none; }
  100% { transform: scale(1); opacity: 1; box-shadow: none; }
}

.ps-pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius);
  background: var(--good-fg);
  margin-right: 0.4rem;
  vertical-align: middle;
}

/* Card Shine Effect on Hover */
.ps-hero-preview-card,
.ps-envie-card,
.ps-city-bezel-card,
.ps-game-banner-card {
  position: relative;
  overflow: hidden;
}

/* Smooth Slide Entrance Animation */
@keyframes ps-slide-up-fade {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Star Shimmer on Score Pill */
@keyframes ps-star-bounce {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.25) rotate(15deg); }
}
/* ── Gamification Toast & Achievement Unlocked ───────────────────────────── */
.ps-gamification-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--encre);
  color: #ffffff;
  border: 1.5px solid #38BDF8;
  padding: 0.9rem 1.4rem;
  border-radius: var(--radius);
  box-shadow: none;
  font-weight: 700;
  font-size: 0.92rem;
  z-index: 9999;
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.ps-gamification-toast.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* 1. Primary CTA Action Blocks (High Intent Action Banners) */
.ps-trouver-cta {
  background: var(--encre);
  border: 0 !important;
  border-radius: var(--radius);
  padding: 2rem 2.2rem;
  box-shadow: none;
  color: #ffffff !important;
}
.ps-trouver-cta .ps-trouver-cta-title {
  color: #ffffff !important;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.4vw, 1.55rem);
  margin: 0 0 .4rem;
}
.ps-trouver-cta .ps-trouver-cta-text {
  color: #D3DFEC !important;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* ── Fun Facts & Anecdotes Bento Section ─────────────────────────────────── */
.ps-fun-facts-bento {
  background: var(--encre);
  border: 1.5px solid var(--brand-100);
  border-radius: var(--radius);
  padding: 2rem 2.2rem;
  margin: 2.5rem 0;
  box-shadow: none;
}
@media (max-width: 640px) {
  .ps-fun-facts-bento { padding: 1.2rem; }
}

.ps-fun-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  border-radius: var(--radius);
  background: var(--brand-100);
  border: 1px solid var(--brand-100);
  color: var(--brand-dark);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  margin-bottom: 0.9rem;
}

.ps-fun-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.ps-fun-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: #ffffff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem;
  box-shadow: none;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.ps-fun-card:hover {
  border-color: var(--brand-dark);
}

.ps-fun-icon {
  font-size: 1.8rem;
  flex-shrink: 0;
  line-height: 1;
}

.ps-fun-body h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 0.35rem;
}
.ps-fun-body p {
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.5;
}

/* ── Open Data & Annonces Immobilières Exports Bento ─────────────────────── */
.ps-opendata-exports-bento {
  background: #ffffff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem 2.2rem;
  margin: 2.5rem 0;
  box-shadow: none;
}

.ps-export-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  border-radius: var(--radius);
  background: var(--bg-tint);
  border: 1px solid var(--border);
  color: var(--ink-soft);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  margin-bottom: 0.9rem;
}

.ps-export-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.ps-export-card {
  background: var(--bg-soft);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 1.4rem 1.6rem;
}
.ps-export-card h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 0.4rem;
}
.ps-export-card p {
  font-size: 0.88rem;
  color: var(--ink-faint);
  margin: 0 0 1.1rem;
}

.ps-export-links {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.ps-export-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius);
  background: #ffffff;
  border: 1.5px solid var(--border);
  color: var(--brand-dark) !important;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none !important;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.ps-export-btn:hover {
  transform: translateX(3px);
  border-color: var(--brand-dark);
  box-shadow: none;
}
.ps-export-btn strong {
  font-weight: 800;
  color: var(--ink);
}

/* ── Perfect Vertical Focal Framing for All City Photos ───────────────────── */
.ps-city-card-thumb img,
.ps-hero-card-cover img,
.ps-photo-cover img,
.ps-city-bezel-card img {
  object-fit: cover !important;
  object-position: center 30% !important;
}

.ps-logo-img {
  height: 40px;
  width: auto;
  object-fit: contain;
  border-radius: var(--radius);
  display: block;
}

/* ── Visual Hierarchy Distinction: CTA Banners vs Internal Maillage Sections ── */

/* 1. Primary CTA Action Blocks (High Intent Action Banners) */
.ps-trouver-cta {
  background: var(--encre);
  border: 0 !important;
  border-radius: var(--radius);
  padding: 2rem 2.2rem;
  box-shadow: none;
  color: #ffffff !important;
}
.ps-trouver-cta .ps-trouver-cta-title {
  color: #ffffff !important;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.4vw, 1.55rem);
  margin: 0 0 .4rem;
}
.ps-trouver-cta .ps-trouver-cta-text {
  color: #D3DFEC !important;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* 2. Internal Maillage & Exploration Sections (Discovery & SEO Links) */
.ps-section-maillage,
.ps-dept-maillage-section,
.ps-blog-links-bento {
  background: var(--bg-soft) !important;
  border: 1.5px solid var(--border-soft) !important;
  border-radius: var(--radius);
  padding: 2rem 2.2rem;
  margin: 2.5rem 0;
}

.ps-maillage-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius);
  background: #E0F2FE;
  border: 1px solid #BAE6FD;
  color: #0369A1;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  
  margin-bottom: 1rem;
}








/* ═══════════════════════════════════════════════════════════════════════════
   Barre d'actions rapides des fiches communes
   Les styles de la preuve sociale et de la popup d'inscription ont été retirés
   le 23/07/2026 avec le balisage correspondant (compteur de visiteurs fabriqué,
   formulaire sans destinataire). Voir assets/sticky-bar.js.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Sticky Conversion Bar ─────────────────────────────────────────────── */
.ps-sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 900;
  background: #ffffff;
  border-top: 1px solid var(--border-soft);
  box-shadow: none;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}
.ps-sticky-bar--visible {
  transform: translateY(0);
}
.ps-sticky-bar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.ps-sticky-bar-city {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink);
  white-space: nowrap;
  flex-shrink: 0;
}
.ps-sticky-bar-score {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--brand-dark);
  background: var(--brand-soft);
  border-radius: var(--radius);
  padding: 0.3rem 0.7rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.ps-sticky-bar-actions {
  display: flex;
  gap: 0.6rem;
  flex: 1;
  flex-wrap: wrap;
}
.ps-sticky-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 1rem;
  border-radius: var(--radius);
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}
.ps-sticky-btn--primary {
  background: #166534;
  color: #ffffff;
  box-shadow: none;
}
.ps-sticky-btn--primary:hover {
  box-shadow: none;
  color: #ffffff;
}
.ps-sticky-btn--secondary {
  background: var(--bg-tint);
  color: var(--ink);
  border: 1px solid var(--border-soft);
}
.ps-sticky-btn--secondary:hover {
  background: var(--border-soft);
}
.ps-sticky-btn--wa {
  background: #25D366;
  color: #ffffff;
}
.ps-sticky-btn--wa:hover {
  background: #1DA851;
  color: #ffffff;
}
.ps-sticky-bar-close {
  background: none;
  border: none;
  color: var(--on-deep-soft);
  cursor: pointer;
  font-size: 1rem;
  padding: 0.3rem;
  margin-left: auto;
  flex-shrink: 0;
  line-height: 1;
}
.ps-sticky-bar-close:hover { color: var(--ink-faint); }
@media (max-width: 600px) {
  .ps-sticky-bar-city { display: none; }
  .ps-sticky-bar-inner { padding: 0.6rem 1rem; gap: 0.5rem; }
  .ps-sticky-btn { padding: 0.4rem 0.75rem; font-size: 0.78rem; }
}





/* ═══════════════════════════════════════════════════════════════════════════
   Accessibilité — lien d'évitement et texte réservé aux lecteurs d'écran
   Ajouté le 23/07/2026. Le lien d'évitement était absent alors que sa cible
   <main id="main-content"> existait déjà dans header.php.
   ═══════════════════════════════════════════════════════════════════════════ */
.ps-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 0.75rem 1.25rem;
  background: var(--brand-deep);
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--radius);
}
.ps-skip-link:focus {
  left: 0;
  outline: 3px solid #22C55E;
  outline-offset: 2px;
}
.ps-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Mouvement reduit ─────────────────────────────────────────────────────
   Le theme compte sept animations en boucle (points qui pulsent, ecran de
   calcul du quiz, reveals) et aucune n'etait conditionnee. Un visiteur qui a
   demande moins de mouvement au niveau de son systeme les recevait toutes. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* Les etats de survol restent lisibles : on supprime le deplacement,
     pas le changement de couleur qui porte l'information. */
  .ps-cta-btn:hover,
  .ps-nav-cta:hover,
  .ps-nav-game-pill:hover,
  .ps-hero-preview-card:hover .ps-hero-card-cta {
    transform: none;
  }
}

/* ------------------------------------------------------------------
   Etats d'erreur et de reprise des outils client (noter, trouver, comparer)
   ------------------------------------------------------------------ */
.ps-error {
  background: var(--bad-bg);
  color: var(--bad-fg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .75rem 1rem;
  margin: 1rem 0;
  font-size: .95rem;
}

.ps-retry-btn {
  display: inline-block;
  margin-top: .6rem;
  padding: .5rem 1rem;
  min-height: 24px;
  font-family: var(--font-body);
  font-size: .9rem;
  color: var(--bg);
  background: var(--brand);
  border: 1px solid var(--brand);
  border-radius: var(--radius);
  cursor: pointer;
}

.ps-retry-btn:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
}

.ps-retry-btn:active {
  background: var(--brand-deep);
}

/* ------------------------------------------------------------------
   Encadre « en bref » : repli factuel quand la commune n'a pas de texte
   encyclopedique en base. Liste de definitions, pas de redaction.
   ------------------------------------------------------------------ */
.ps-reperes dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem 1.5rem;
  margin: 1rem 0 0;
}

.ps-reperes dt {
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink-faint);
  
  letter-spacing: .02em;
}

.ps-reperes dd {
  margin: .15rem 0 0;
  font-size: 1rem;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* Impeccable Quality Enhancements */
.ps-wizard-header > p.ps-note { max-width: 58ch !important; margin-left: auto; margin-right: auto; }
section.ps-section.ps-home-seo > p { max-width: 58ch !important; }
.ps-footer-bottom p { max-width: 58ch !important; }

/* Carte Impeccable Fixes */
.ps-map-hint, .ps-map-intro .ps-verdict { max-width: 58ch !important; }

/* Classement Table & Note Fixes */
p.ps-note { max-width: 58ch !important; }

/* Accordion Line-Length Fix */
.ps-accordion-content p { max-width: 58ch !important; }





/* ── REVISION COMPLÈTE BEST PRACTICES & CORRECTIONS VISUELLES EN LIVE ── */

/* 1. Logo PNG sans fond blanc sur ivoire */
.ps-logo img, .ps-logo-img {
  mix-blend-mode: multiply !important;
  background: transparent !important;
  display: block;
}

/* 2. Barre de recherche haute lisibilite & contraste net */
.ps-search input, .ps-home-search input, .ps-devine-input-group input {
  background: #FFFFFF !important;
  border: 1.5px solid var(--border) !important;
  color: var(--ink) !important;
  font-weight: 600 !important;
  box-shadow: none;
}
.ps-search input::placeholder, .ps-home-search input::placeholder {
  color: var(--ink-soft) !important;
  opacity: 0.85;
}
.ps-search input:focus, .ps-home-search input:focus {
  border-color: var(--brand) !important;
  box-shadow: none;
}

/* 4. Carte Bordeaux Vedette (Haute Lisibilite & Contrastes) */
.ps-hero-preview-card {
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius);
  box-shadow: none;
  padding: 1.6rem !important;
}
.ps-hero-preview-card h2 {
  font-family: var(--font-display) !important;
  font-size: 1.6rem !important;
  color: var(--ink) !important;
  font-weight: 700 !important;
  margin: 0.4rem 0 0.2rem !important;
}
.ps-hero-preview-card p {
  color: var(--ink-soft) !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
}
.ps-hero-kpi {
  background: var(--bg-soft) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius); /* 12px : hors echelle, cran carte = 10px */
  padding: 0.8rem 1rem !important;
  text-align: center !important;
}
.ps-hero-kpi .ps-kpi-val {
  font-family: var(--font-body) !important;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  color: var(--brand-dark) !important;
  display: block !important;
}
.ps-hero-kpi .ps-kpi-lbl {
  font-size: 0.8rem !important;
  color: var(--ink-soft) !important;
  font-weight: 600 !important;
}
.ps-card-score-pill {
  background: var(--brand-dark) !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  font-size: 0.9rem !important;
  padding: 0.35rem 0.85rem !important;
  border-radius: var(--radius);
  box-shadow: none;
}

/* 5. Harmonisation des Grilles Systématiques (3 Colonnes Desktop / Auto-fit) */
.ps-home-grid, .ps-classement-grid, .ps-tools-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1.5rem !important;
}
@media (max-width: 960px) {
  .ps-home-grid, .ps-classement-grid, .ps-tools-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 640px) {
  .ps-home-grid, .ps-classement-grid, .ps-tools-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Icone finale (flèche) des CTA : seul endroit du fichier qui l'espace/l'anime,
   les redéclarations de fond/padding/couleur d'avant étaient mortes (cf. bloc
   « wireframe littéral » plus bas qui gagne la cascade) et ont été retirées. */
.ps-cta-btn span[aria-hidden="true"], .ps-nav-cta span[aria-hidden="true"], .ps-cta-lead span[aria-hidden="true"] {
  display: inline-block !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin-left: 0.3rem !important;
  font-size: 1.1rem !important;
  width: auto !important;
  height: auto !important;
  border-radius: var(--radius-pill, 999px);
  transition: transform 0.2s ease !important;
}
.ps-cta-btn:hover span[aria-hidden="true"], .ps-nav-cta:hover span[aria-hidden="true"], .ps-cta-lead:hover span[aria-hidden="true"] {
  transform: translateX(3px) !important;
}

h1, h2, h3, h4, h5, h6,
.ps-section-title,
.ps-home-hero h1,
.ps-devine-hero h1,
.ps-game-banner-title,
.ps-leadgen-content h2,
.ps-verdict-card h3,
.ps-top35-card h3 {
  font-family: var(--font-display) !important;
  font-weight: var(--fw-display) !important;
  color: var(--ink) !important;
  letter-spacing: -.02em !important;
  line-height: 1.12 !important;
}
.ps-carte-hero h2,
.ps-home-map-head h2 {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.18 !important;
}
.ps-devine-badge,
.ps-devine-label,
.ps-trouver-cta-title,
.ps-region-group h3,
.ps-footer-col h3,
.ps-hero-preview-card h2 {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  letter-spacing: -0.015em !important;
}

/* ── RESTRUCTURATION COMPLÈTE DES BARRES DE RECHERCHE ── */
.ps-search, .ps-home-search, .ps-devine-search-box {
  position: relative !important;
}
.ps-search input,
.ps-home-search input,
.ps-devine-input-group input[type="search"],
.ps-devine-input-group input {
  width: 100% !important;
  height: 54px !important;
  padding: 0.8rem 3.2rem 0.8rem 1.4rem !important;
  font-family: var(--font-body) !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  background: #FFFFFF !important;
  border: 2px solid var(--border) !important;
  border-radius: var(--radius);
  /* Pas d'`outline: none` : la charte declare le focus visible bloquant, et une
     regle !important posee ici battait la regle :focus-visible du socle, plus
     haut dans le fichier. L'anneau reste natif, on ne le remplace pas par une
     ombre — la charte n'a aucune ombre. */
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}
.ps-search input::placeholder,
.ps-home-search input::placeholder,
.ps-devine-input-group input::placeholder {
  color: var(--ink-soft) !important;
  opacity: 0.85 !important;
}
.ps-search input:focus,
.ps-home-search input:focus,
.ps-devine-input-group input[type="search"]:focus,
.ps-devine-input-group input:focus {
  border-color: var(--bleu-france) !important;
  background: var(--bg) !important;
  box-shadow: none;
}
.ps-devine-search-icon, .ps-search-icon {
  position: absolute !important;
  right: 1.2rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 1.25rem !important;
  color: var(--brand-dark) !important;
  pointer-events: none !important;
  opacity: 0.9 !important;
}


/* ── ULTIMATE MASTER DESIGN SYSTEM 2026 (ATLAS DATA & ARCHITECTURAL) ── */

/* 1. Coquille Double-Bezel & Cartes Neumorphisme Glass */
.ps-hub-card,
.ps-hero-preview-card,
.ps-avis-item,
.ps-devine-card {
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius);
  box-shadow: none;
  padding: 1.8rem !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease !important;
}
.ps-hub-card:hover,
.ps-hero-preview-card:hover,
.ps-avis-item:hover,
.ps-devine-card:hover {
  box-shadow: none;
}

/* 2. Micro-Labels d'Ingénierie & Precision Blueprint (Option C) */
.ps-blueprint-tag,
.ps-hero-card-badge,
.ps-badge {
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: var(--brand-dark) !important;
  background: var(--brand-soft) !important;
  border: 1px solid var(--brand-100) !important;
  padding: 0.3rem 0.75rem !important;
  border-radius: var(--radius);
}

/* ── REFONTE COMPLÈTE ERGONOMIQUE DES CURSEURS / SLIDERS (TROUVER-MA-VILLE) ── */

/* 1. Grille des Groupes de Critères (Largeur généreuse 360px+ par groupe) */
.ps-tv-criteres {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)) !important;
  gap: 1.8rem !important;
  margin: 1.6rem 0 !important;
}

.ps-tv-criteres .ps-tv-groupe {
  background: #FFFFFF !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius);
  padding: 1.6rem !important;
  box-shadow: none;
}

.ps-tv-criteres .ps-tv-groupe h3 {
  font-family: var(--font-display) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin: 0 0 1.2rem !important;
  padding-bottom: 0.6rem !important;
  border-bottom: 2px solid var(--brand-soft) !important;
}

/* 2. Ligne Critère (Disposition 2 niveaux : Libellé + Badge en haut, Slider 100% Largeur en bas) */
.ps-tv-crit {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  padding: 0.85rem 0 !important;
  border-bottom: 1px solid var(--border-soft) !important;
}
.ps-tv-crit:last-child {
  border-bottom: none !important;
}

/* Entête du critère (Nom + Statut) */
.ps-tv-crit-header,
.ps-tv-crit-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  gap: 0.8rem !important;
}

.ps-tv-crit label {
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  color: var(--ink-soft) !important;
  margin: 0 !important;
  flex: 1 !important;
  line-height: 1.3 !important;
}
.ps-tv-crit.is-on label {
  color: var(--ink) !important;
}

.ps-tv-crit output {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  padding: 0.35rem 0.85rem !important;
  border-radius: var(--radius);
  background: var(--bg-soft) !important;
  color: var(--ink-faint) !important;
  border: 1px solid var(--border) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  min-width: 80px !important;
  text-align: center !important;
}
.ps-tv-crit.is-on output {
  background: var(--good-bg) !important;
  color: var(--good-ink) !important;
  border-color: var(--good-line) !important;
}

/* 3. Slider Track 100% Largeur (Super Ergonomique & Facile à Saisir) */
.ps-slider-track-wrap {
  position: relative !important;
  width: 100% !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  margin-top: 0.2rem !important;
}

.ps-tv-crit input[type="range"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  height: 10px !important;
  border-radius: var(--radius);
  background: var(--encre);
  outline: none !important;
  cursor: pointer !important;
  z-index: 2 !important;
  position: relative !important;
  margin: 0 !important;
}

.ps-tv-crit input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: var(--radius);
  background: #FFFFFF !important;
  border: 3.5px solid var(--brand-dark) !important;
  box-shadow: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
  cursor: grab !important;
}
.ps-tv-crit input[type="range"]::-webkit-slider-thumb:active {
  cursor: grabbing !important;
  transform: scale(1.2) !important;
  box-shadow: none;
}
.ps-tv-crit input[type="range"]::-moz-range-thumb {
  width: 26px !important;
  height: 26px !important;
  border-radius: var(--radius);
  background: #FFFFFF !important;
  border: 3.5px solid var(--brand-dark) !important;
  box-shadow: none;
  cursor: grab !important;
}

/* Focus clavier WCAG 2.4.7 : le "outline: none !important" et le box-shadow
   permanent du thumb ci-dessus (redesign ergonomique) écrasaient le focus-visible
   défini plus haut (lignes ~3503). On le restaure ici avec une spécificité et
   une importance suffisantes pour gagner sur ce bloc. */
.ps-tv-crit input[type="range"]:focus-visible {
  outline: 2px solid var(--focus-ring) !important;
  outline-offset: 4px !important;
  border-radius: var(--radius);
}
.ps-tv-crit input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: none;
}
.ps-tv-crit input[type="range"]:focus-visible::-moz-range-thumb {
  box-shadow: none;
}


/* ── CORRECTION DU CONTRASTE ET DES CTA SUR CONTENEURS SOMBRES (BANNIÈRE VILLE DU JOUR & LEADGEN) ── */
.ps-game-banner-card h2,
.ps-game-banner-title,
.ps-trouver-cta h2,
.ps-trouver-cta-title,
.ps-footer-leadgen h2 {
  color: #FFFFFF !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;
}

.ps-game-banner-card p,
.ps-game-banner-text p,
.ps-trouver-cta-text,
.ps-footer-leadgen p {
  color: var(--brand-100) !important;
  font-weight: 500 !important;
  opacity: 0.95 !important;
}

.ps-game-banner-badge {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.ps-game-banner-card .ps-cta-btn,
.ps-game-banner-card .ps-cta-game-banner,
.ps-trouver-cta .ps-cta-btn,
.ps-footer-leadgen .ps-cta-btn {
  background: #FFFFFF !important;
  color: var(--brand-dark) !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 0.98rem !important;
  box-shadow: none;
  border-radius: var(--radius-pill, 999px);
  padding: 0.85rem 1.8rem !important;
  border: none !important;
}

.ps-game-banner-card .ps-cta-btn:hover,
.ps-game-banner-card .ps-cta-game-banner:hover,
.ps-trouver-cta .ps-cta-btn:hover,
.ps-footer-leadgen .ps-cta-btn:hover {
  background: #FFFFFF !important;
  color: var(--brand-deep) !important;
  box-shadow: none;
}


/* ── CLAUDE DESIGN REFINEMENTS: ZERO AI GLOWS & 100% WCAG AAA CONTRAST ── */

/* 1. Elimination des Lueurs Néon Artificielles (15 AI Tells) */
.ps-cta-btn,
.ps-cta-game-banner,
.ps-cta-lead,
.ps-card-score-pill,
.ps-hero-preview-card .ps-card-score-pill,
.ps-city-bezel-card .ps-card-score-pill {
  box-shadow: none;
  text-shadow: none !important;
  filter: none !important;
}

.ps-city-card-thumb .ps-card-score-pill,
.ps-hero-preview-card .ps-card-score-pill {
  background: var(--brand-dark) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: none;
}

/* 2. Correction Totale des Contrastes sur Fond Sombre (#16314B / #1E3A8A) */
/* Footer Headings (Outils, Métropoles, Transparence) */
.ps-footer,
.ps-footer-col,
.ps-footer-col h3 {
  color: #FFFFFF !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 1.15rem !important;
  letter-spacing: -0.01em !important;
}

.ps-footer-desc,
.ps-footer-griffe,
.ps-footer-bottom p,
.ps-footer-note {
  color: #E2E8F0 !important;
}

.ps-footer-col a {
  color: #CBD5E1 !important;
  transition: color 0.2s ease !important;
}
.ps-footer-col a:hover {
  color: #FFFFFF !important;
}

/* Section Leadgen (Où s'installer en France en 2026 ?) */
.ps-footer-leadgen,
.ps-leadgen-content,
.ps-leadgen-content h2 {
  color: #FFFFFF !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.ps-leadgen-content p {
  color: #E2E8F0 !important;
  font-size: 1.05rem !important;
}

.ps-leadgen-badge {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

/* Bannière Jeu Ville du Jour */
.ps-game-banner-card,
.ps-game-banner-card h2,
.ps-game-banner-text h2,
.ps-game-banner-title {
  color: #FFFFFF !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
}

.ps-game-banner-card p,
.ps-game-banner-text p {
  color: #E2E8F0 !important;
}

.ps-game-banner-card .ps-cta-btn,
.ps-game-banner-card .ps-cta-game-banner {
  background: #FFFFFF !important;
  color: var(--brand-dark) !important;
  font-weight: 800 !important;
  box-shadow: none;
}
.ps-game-banner-card .ps-cta-btn:hover,
.ps-game-banner-card .ps-cta-game-banner:hover {
  background: #F8FAFC !important;
  color: var(--brand-deep) !important;
  box-shadow: none;
}

/* Bannière Trouver ma ville CTA */
.ps-trouver-cta,
.ps-trouver-cta h2,
.ps-trouver-cta-title {
  color: #FFFFFF !important;
}

.ps-trouver-cta p,
.ps-trouver-cta-text {
  color: #E2E8F0 !important;
}

.ps-trouver-cta .ps-cta-btn {
  background: #FFFFFF !important;
  color: var(--brand-dark) !important;
  font-weight: 800 !important;
  box-shadow: none;
  border-radius: 8px !important;
}


/* ── STYLES DU COMPOSANT VERDICT ÉDITORIAL & CLUSTER MAILLAGE TOP 35 (PHASE P1) ── */

/* 1. Carte Verdict Éditorial */
.ps-verdict-card {
  background: #FFFFFF !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 1.8rem !important;
  margin: 2rem 0 !important;
  box-shadow: none;
}

.ps-verdict-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--brand-dark) !important;
  background: var(--brand-soft) !important;
  padding: 0.35rem 0.85rem !important;
  border-radius: 6px !important;
  margin-bottom: 0.8rem !important;
}

.ps-verdict-card h3 {
  font-family: var(--font-display) !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin: 0 0 1.2rem !important;
}

.ps-verdict-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 1.2rem !important;
}

.ps-verdict-col {
  padding: 1.2rem !important;
  border-radius: 8px !important;
}

.ps-verdict-forces {
  background: #F0FDF4 !important;
  border: 1px solid #BBF7D0 !important;
}

.ps-verdict-forces h4 {
  color: #166534 !important;
  font-family: var(--font-display) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  margin: 0 0 0.6rem !important;
}

.ps-verdict-forces ul {
  margin: 0 !important;
  padding-left: 1.2rem !important;
  color: #15803D !important;
  font-weight: 600 !important;
}

.ps-verdict-faiblesses {
  background: #FFFBEB !important;
  border: 1px solid #FDE68A !important;
}

.ps-verdict-faiblesses h4 {
  color: #92400E !important;
  font-family: var(--font-display) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  margin: 0 0 0.6rem !important;
}

.ps-verdict-faiblesses ul {
  margin: 0 !important;
  padding-left: 1.2rem !important;
  color: #B45309 !important;
  font-weight: 600 !important;
}

/* 2. Cluster de Maillage Interne Top 35 */
.ps-top35-maillage-cluster {
  margin: 3.5rem 0 2.5rem !important;
  padding: 2.2rem !important;
  background: var(--bg-soft) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
}

.ps-top35-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 1rem !important;
  margin-top: 1.6rem !important;
}

.ps-top35-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 1.2rem !important;
  text-decoration: none !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease !important;
}

.ps-top35-card:hover {
  box-shadow: none;
  border-color: var(--brand-100) !important;
}

.ps-top35-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 0.5rem !important;
}

.ps-top35-dept {
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  color: var(--brand-dark) !important;
  background: var(--brand-soft) !important;
  padding: 0.2rem 0.55rem !important;
  border-radius: 6px !important;
}

.ps-top35-tag {
  font-size: 0.72rem !important;
  color: var(--ink-faint) !important;
  font-weight: 600 !important;
}

.ps-top35-card h3 {
  font-family: var(--font-display) !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin: 0.3rem 0 0.8rem !important;
}

.ps-top35-link {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: var(--brand) !important;
}


/* ── ULTIMATE CLAUDE DESIGN SYSTEM 2026 (EDITORIAL LUXURY & HAPTIC DEPTH) ── */

/* 1. Tokens System Canoniques (:root)
   Ce second :root dupliquait la palette et gagnait la cascade sur le bloc de tete :
   toute correction faite en haut du fichier etait annulee ici sans bruit. Vide le
   25/07/2026 au profit d'un seul point de verite (ligne 14). Ne rien redeclarer ici :
   un token manquant s'ajoute au bloc canonique. */
:root {
  --shadow-subtle: none;
}

/* 2. Typographie Éditoriale & Échelle Visuelle */
body {
  background-color: var(--bg) !important;
  color: var(--ink-soft) !important;
  font-family: var(--font-body) !important;
  line-height: 1.6 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* 3. Double-Bezel Architecture (Doppelrand Hardware) */
.ps-hub-card,
.ps-hero-preview-card,
.ps-avis-item,
.ps-devine-card,
.ps-verdict-card,
.ps-top35-card,
.ps-photo {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  box-shadow: none;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.25s ease !important;
}

.ps-hub-card:hover,
.ps-hero-preview-card:hover,
.ps-avis-item:hover,
.ps-devine-card:hover,
.ps-top35-card:hover {
  box-shadow: none;
  border-color: var(--brand-soft) !important;
}

/* 4. Boutons Island Pills & Trailing Icon Physics */
.ps-cta-btn,
.ps-nav-cta,
.ps-cta-lead,
.ps-top35-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.6rem !important;
  padding: 0.85rem 1.8rem !important;
  border-radius: 8px !important;
  background: var(--brand) !important;
  color: #FFFFFF !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 0.98rem !important;
  text-decoration: none !important;
  border: none !important;
  box-shadow: none;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s ease, box-shadow 0.35s ease !important;
}

.ps-cta-btn:hover,
.ps-nav-cta:hover,
.ps-cta-lead:hover {
  background: var(--brand-dark) !important;
  color: #FFFFFF !important;
  box-shadow: none;
}

.ps-cta-btn:active,
.ps-nav-cta:active,
.ps-cta-lead:active {
  transform: scale(0.97) translateY(0) !important;
}

/* 5. Micro-Badges Éditoriaux (Eyebrows) */
.ps-badge,
.ps-leadgen-badge,
.ps-verdict-badge,
.ps-meta-badge,
.ps-blueprint-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: var(--brand-dark) !important;
  background: var(--brand-soft) !important;
  border: 1px solid var(--border) !important;
  padding: 0.32rem 0.8rem !important;
  border-radius: 6px !important;
}

/* 6. En-tête Global Navigation & Floating Glass Pill */
.ps-header {
  background: rgba(251, 250, 247, 0.88) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid var(--border) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}

/* 7. Barre Rouge Structurelle Grenat Éditorial */
.ps-masthead-line,
body::before {
  content: "" !important;
  display: block !important;
  height: 2px !important;
  background: var(--accent-rouge) !important;
  width: 100% !important;
}


/* ── COMPOSANT BLOC D'INTENTION « VOTRE PROJET » (INSPIRATION WIREFRAME SPEC 02) ── */
.ps-projet-chips-wrap {
  margin-top: 1.4rem !important;
  padding-top: 1.2rem !important;
  border-top: 1px dashed var(--border) !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0.8rem !important;
}

.ps-projet-label {
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--brand-dark) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
}

.ps-projet-chips {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
}

.ps-projet-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  padding: 0.45rem 1rem !important;
  border-radius: var(--radius);
  background: var(--bg-soft) !important;
  border: 1px solid var(--border) !important;
  color: var(--ink-soft) !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ps-projet-chip:hover {
  background: var(--brand-soft) !important;
  color: var(--brand-dark) !important;
  border-color: var(--brand-100) !important;
}

.ps-projet-chip.is-active {
  background: var(--brand-dark) !important;
  color: #FFFFFF !important;
  border-color: var(--brand-dark) !important;
  box-shadow: none;
}


/* ── WIREFRAME LITTÉRAL : NEUTRALISATION DES COUCHES GLASS/GLOW (25/07/2026) ──
   Ce bloc est le dernier du fichier pour ces sélecteurs : il gagne la cascade sur
   toutes les couches précédentes (ULTIMATE MASTER DESIGN SYSTEM, AWWWARDS-TIER…),
   qui empilaient blur/glow/Playfair Display en dur (pas via token). Remplacé par le
   style du wireframe source : bordure pleine 1.5px #22201d, zéro ombre, zéro flou,
   Architects Daughter. Les redéclarations mortes de .ps-cta-btn/.ps-nav-cta/
   .ps-cta-lead (3 blocs, ~90 lignes) ont été retirées le 27/07/2026 : aucune
   n'était mélangée à un sélecteur encore utile, donc suppression sans risque de
   régression visuelle. Restent volontairement en place les blocs scopés
   (.ps-game-banner-card .ps-cta-btn, .ps-trouver-cta .ps-cta-btn,
   .ps-footer-leadgen .ps-cta-btn, .ps-top35-link) : plus spécifiques que ce
   bloc-ci, ils gagnent la cascade sur leurs conteneurs et portent chacun un
   rendu encore rendu (pill blanche sur fond sombre) — les retirer changerait
   l'affichage, ce n'est pas un nettoyage sans décision. */

.ps-masthead-line,
body::before {
  content: "" !important;
  display: block !important;
  height: 3px !important;
  background: var(--ink) !important;
  width: 100% !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 1010 !important;
}

.ps-header {
  background: var(--bg) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 1px solid var(--border, #d8e3f2) !important;
  border-radius: var(--radius, 8px) !important;
  max-width: 1100px !important;
  margin: 1.2rem auto 0 !important;
  padding: 0.6rem 1.4rem !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  position: sticky !important;
  top: 1.2rem !important;
  z-index: 1000 !important;
}

/* 2. Cartes : bordure douce & coins arrondis 8px */
.ps-hub-card,
.ps-hero-preview-card,
.ps-avis-item,
.ps-devine-card,
.ps-verdict-card,
.ps-top35-card,
.ps-photo,
.ps-bento-card {
  background: #FFFFFF !important;
  border: 1px solid var(--border, #d8e3f2) !important;
  border-radius: var(--radius, 8px) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.02);
  padding: 1.6rem !important;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.ps-hub-card:hover,
.ps-hero-preview-card:hover,
.ps-avis-item:hover,
.ps-devine-card:hover,
.ps-top35-card:hover,
.ps-bento-card:hover {
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.08);
  border-color: var(--bleu-france, #2563eb) !important;
  transform: var(--lift, translateY(-2px));
}

/* 4. Boutons : bloc compact arrondi, Bleu France */
.ps-cta-btn,
.ps-nav-cta,
.ps-cta-lead {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  min-height: 38px !important;
  padding: 0.55rem 1.25rem !important;
  border-radius: var(--radius-sm, 6px) !important;
  background: var(--bleu-france, #2563eb) !important;
  color: #FFFFFF !important;
  font-family: var(--font-ui, 'Inter', sans-serif) !important;
  font-weight: 700 !important;
  font-size: 0.92rem !important;
  text-decoration: none !important;
  border: 1px solid var(--bleu-france, #2563eb) !important;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.2);
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease !important;
}

.ps-cta-btn:hover,
.ps-nav-cta:hover,
.ps-cta-lead:hover {
  background: var(--bleu-france-hover, #1d4fd8) !important;
  border-color: var(--bleu-france-hover, #1d4fd8) !important;
  color: #FFFFFF !important;
  transform: var(--lift, translateY(-1px));
}

.ps-cta-btn:active,
.ps-nav-cta:active,
.ps-cta-lead:active {
  transform: scale(0.98) translateY(0) !important;
}

/* ── Emplacements publicitaires (inc/pub.php) ─────────────────────────────────
   La hauteur est reservee par un style inline sur le conteneur : elle doit tenir
   meme si cette feuille arrive en retard, sinon le CLS repart. Ici on ne pose que
   l'habillage. La marge de garde de 40 px sous le bloc n'est pas decorative :
   c'est elle qui empeche un controle de se coller au slot et de recolter des
   clics accidentels. */
.ps-ad {
  display: block;
  margin: var(--s-7) auto calc(var(--s-7) + 8px);
  padding: 0;
  background: var(--bg-soft);
  border: var(--border-w) solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
.ps-ad + * { margin-top: 40px; }

.ps-ad-label {
  display: block;
  padding: 6px var(--s-3);
  font-family: var(--font-ui);
  font-size: var(--fs-kicker);
  letter-spacing: var(--ls-kicker);
  
  color: var(--ink-mute);
  border-bottom: var(--border-w) solid var(--border-soft);
}

.ps-ad-frame { display: block; width: 100%; min-height: inherit; }

.ps-ad--300x600 { margin-left: 0; margin-right: 0; }

/* Un tableau ne contient jamais d'unite : la regle est appliquee cote PHP
   (ps_ad_zone_interdite), celle-ci n'est qu'un filet de securite visuel si un
   gabarit passait au travers. */
table .ps-ad, .ps-table-scroller .ps-ad { display: none !important; }

/* ── Socle typographique de la refonte 2026 ───────────────────────────────────
   Les tokens d'echelle (--fs-*, --lh-*, --ls-*) etaient definis mais consommes
   nulle part : la charte etait a moitie posee. Ce bloc les applique, et il vaut
   pour tous les ecrans — chaque feuille assets/css/*.css ne traite plus que ses
   specificites.

   Serif = prose, grotesque = interface, condense = donnee. La regle est stricte
   parce que c'est elle qui rend une page de chiffres lisible : les valeurs se
   comparent en colonne, la prose se lit en ligne. */

h1, .ps-h1 {
  font-size: clamp(34px, 5vw, var(--fs-h1));
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
}
h2, .ps-h2, .ps-section-title {
  font-size: clamp(22px, 3vw, var(--fs-h2));
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}
h3, .ps-h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }

/* Le chapeau : Spectral, plus gros que le corps, jamais en gras — c'est la
   respiration entre le titre et la preuve. */
.ps-lead, .ps-portrait-brief > p:first-of-type {
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--ink-soft);
  font-weight: 400;
}

.ps-kicker, .ps-portrait-kicker, .ps-surtitre {
  font-family: var(--font-ui);
  font-size: var(--fs-kicker);
  letter-spacing: var(--ls-kicker);
  
  font-weight: var(--fw-ui-strong);
  color: var(--ink-faint);
}

/* Tous les chiffres en Oswald, et en chasse fixe des qu'ils s'empilent : sans
   tabular-nums une colonne de valeurs ne s'aligne pas et ne se compare plus. */
.ps-num, .ps-bilan-val, .ps-note-globale, .ps-note,
.ps-meta-badge, .ps-export-badge, .ps-fun-badge,
td .ps-val, th .ps-val {
  font-family: var(--font-num);
  font-weight: var(--fw-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.ps-num--xl { font-size: var(--fs-num-xl); font-weight: var(--fw-num-strong); }
.ps-num--lg { font-size: var(--fs-num-lg); }
.ps-num--md { font-size: var(--fs-num-md); }

/* Interface : libelles, boutons, badges, controles. Jamais la serif. */
.ps-ui, button, select, input, .ps-badge, .ps-chip, .ps-projet-chip,
.ps-portrait-action, .ps-meta-item {
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
}
/* Un champ sous 16 px declenche le zoom automatique d'iOS au focus, ce qui
   casse la mise en page : la regle vaut plus que l'harmonie de l'echelle. */
input, select, textarea { font-size: max(16px, var(--fs-ui)); }

/* ── Focus visible, jamais supprime (section a11y declaree bloquante) ──────── */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius);
}

/* Survol : elevation par filet, jamais par translation. */
@media (hover: hover) {
  .ps-hub-card:hover, .ps-export-card:hover, .ps-fun-card:hover,
  .ps-blog-card:hover, .ps-guide-map-card:hover {
    border-color: var(--border-strong);
    transition: border-color var(--dur) var(--ease);
  }
}

/* ── Focus visible : dernier mot de la cascade (a11y bloquante) ───────────────
   Le socle declare deja :focus-visible plus haut, mais le fichier compte une
   trentaine d'`outline: none` poses sur des selecteurs de classe, donc plus
   specifiques ET plus bas dans la cascade : chacun neutralisait l'anneau de
   focus pour son composant. Plutot que de les traquer un par un — et d'en
   laisser repasser au prochain ajout — la regle est reposee ici, en fin de
   fichier et en !important. C'est le seul !important assume de la charte :
   « focus visible, jamais supprime » est declare bloquant.

   :focus-visible et non :focus — le clic souris ne doit pas dessiner d'anneau,
   seule la navigation clavier en a besoin. */
:where(a, button, input, select, textarea, summary, [tabindex], [role="button"]):focus-visible {
  outline: 2px solid var(--focus-ring) !important;
  outline-offset: 3px !important;
}

/* ═════════════════════════════════════════════════════════════════════════════
   CORRECTIFS RÉELS — 26/07/2026
   ═════════════════════════════════════════════════════════════════════════════

   Ce bloc REMPLACE deux blocs précédents du même jour (« CHARTE 2026 Committed »
   et « RESET STRUCTUREL ») qui sont retirés.

   POURQUOI ILS SONT RETIRÉS. Ils re-peignaient le site en encre + brique + zéro
   rayon. C'était une invention de session : la charte du site est spécifiée dans
   `design-2026/tokens/colors.css` et `design-2026/guidelines/*.card.html`, et je
   ne les avais pas lus. Les quatre contradictions :

     la spec dit                        j'avais mis
     --bg: #FFFFFF                      fond encre #14171A
     bleu #27356F = STRUCTURE           brique en structure partout
     rouge #C1272D = JUGEMENT           « meilleur » passé au vert
     rayons 3/6/10/14/pill par rôle     tout à 0

   La règle sémantique de colors.css est explicite et vaut d'être recopiée ici :
   « Le rouge JUGE (verdict, meilleure valeur, onglet actif) ; le bleu STRUCTURE
   (navigation, liens, pied de page, contrôles). Jamais l'inverse. »

   Et mon diagnostic « six échelles de rayon qui se disputent » était faux : ce
   sont cinq crans documentés avec un rôle chacun (xs jauges, sm champs/boutons,
   10px cartes/tableaux, lg verdict/export, pill chips seulement). J'avais compté
   des valeurs calculées et conclu à l'absence de système sans vérifier s'il en
   existait un. Lire la page rendue ne remplace pas lire la source.

   CE QUI RESTE ICI n'est pas du design : ce sont des défauts mesurés, dont
   plusieurs vivaient depuis des jours. Chacun est réparé DANS la charte
   spécifiée, pas contre elle. */

/* ── 1. Un titre à 1,59:1 sur toutes les pages ────────────────────────────── */
/* « Où s'installer en France en 2026 ? » était rendu en --ink (#1C1F26) sur le
   fond bleu foncé du bandeau : 1,59:1 pour un seuil AA de 3 en grand texte. Un
   titre invisible, présent sur chaque page du site.
   --on-deep est le token prévu par la spec pour du texte sur fond marine. */
.ps-footer-leadgen h2,
.ps-footer-leadgen .ps-leadgen-content h2 { color: var(--on-deep) !important; }
.ps-footer-leadgen p { color: var(--on-deep-soft); }

/* ── 2. 279 dégradés entre deux couleurs identiques ──────────────────────── */
/* `.ps-dept-card-head` portait un linear-gradient(135deg, X, X) — même couleur
   aux deux bouts, donc un aplat déguisé, recalculé 279 fois par peinture sur un
   hub département. Écrit comme un aplat, avec le bleu pâle de structure. */
.ps-dept-card-head {
  background-image: none;
  background-color: var(--bleu-975);
}

/* ── 3. Alignement : deux causes, un seul symptôme ────────────────────────── */
/* Les paragraphes ne tombaient pas sous leurs titres. Ce n'était pas un défaut
   unique :
   a) .ps-trouver-cta était vraiment en text-align: center ;
   b) .ps-note était alignée à gauche mais centrée EN TANT QUE BLOC, par un
      `margin: auto !important`. C'est le piège : on cherche un text-align qui
      n'existe pas. D'où le !important et la spécificité `> p.ps-note` ici. */
.ps-trouver-cta,
.ps-trouver-cta-content,
.ps-trouver-cta-text,
.ps-trouver-cta-title { text-align: left; }

.ps-wizard-header > p.ps-note,
.ps-section > p.ps-note,
p.ps-note { margin-inline: 0 !important; }

/* Vide de 110 px après le bandeau, seul écart supérieur à 90 px de la page. */
.ps-section.ps-guided-wizard { margin-bottom: 0; padding-bottom: 0; }
.ps-section.ps-guided-wizard + * { margin-top: 64px; }

/* ── 4. Des chevrons invisibles ───────────────────────────────────────────── */
/* Les « → » portaient leur propre couleur en dur au lieu de suivre celle de leur
   bouton : blanc sur blanc dès que le fond changeait. */
:is(.ps-cta-btn, .ps-section-more, .ps-nav-cta) :is(span, i)[aria-hidden="true"],
:is(.ps-cta-btn, .ps-section-more, .ps-nav-cta) span:not([class]) { color: inherit; }

/* ── 5. Les vignettes de villes ───────────────────────────────────────────── */
/* Le repli gris s'affichait parce que le rendu était gardé derrière une meta
   `photo_file` vide (corrigé dans front-page.php) alors que le proxy /photo/ ne
   lit que le code INSEE. Il ne sert plus qu'aux communes réellement sans photo,
   et dit son nom au lieu de simuler une image. */
.ps-city-card-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ps-city-card-thumb-fallback {
  background: var(--bg-soft);
  color: var(--ink-faint);
  font-family: var(--font-num);
  
  
  font-size: .8rem;
}


/* ═════════════════════════════════════════════════════════════════════════════
   FICHE COMMUNE — DEUX TITRES ILLISIBLES ET NEUF RAYONS HORS ÉCHELLE
   26/07/2026 · mesuré sur /bordeaux-33/ rendu, pas sur le source
   ═════════════════════════════════════════════════════════════════════════════

   Cette page-là n'avait jamais été auditée. Les deux défauts de contraste sont
   du même genre que le titre du bandeau corrigé plus haut : du texte prévu clair
   qui finit peint en encre, ou l'inverse. */

/* ── 1. « Obtenir mon Guide Touristique PDF » à 1,21:1 ────────────────────────
   La règle du thème dit bien `.ps-guide-cta-box h4 { color: #fff }` (l. 3525).
   Elle perd quand même : `h1, h2, h3, h4 { color: var(--ink) !important }` est
   déclaré CINQ fois dans ce fichier, et un !important bat une déclaration
   simple quelle que soit sa spécificité. Résultat : encre #1C1F26 sur le
   dégradé marine du bloc, soit 1,21:1 pour un seuil de 4,5.

   Le thème avait déjà rustiné cinq blocs sombres un par un de cette façon
   (.ps-game-banner-card h2, .ps-footer-col h3, .ps-leadgen-content h2,
   .ps-trouver-cta h2, .ps-footer-leadgen h2). Celui-ci est le sixième et
   personne ne l'avait vu. Une seule règle les couvre tous, et couvrira le
   septième : la liste est explicite, donc aucun bloc clair n'est touché. */
:is(.ps-guide-cta-box, .ps-footer-leadgen, .ps-game-banner-card,
    .ps-trouver-cta, .ps-footer) :is(h1, h2, h3, h4, h5, h6) {
  color: var(--on-deep) !important;
}

/* ── 2. Le ✕ de la barre collante à 1,58:1 ───────────────────────────────────
   `color: var(--on-deep-soft)` — #C9CEDA, le token du texte SUR fond marine —
   posé sur une barre dont le fond est blanc. Un bouton de fermeture invisible,
   sur les 34 841 fiches. Son :hover utilisait déjà --ink-faint : c'est l'état
   de base qui s'était trompé de famille de tokens, pas le survol. */
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--ink-soft);
  font-weight: 400;
}

.ps-kicker, .ps-portrait-kicker, .ps-surtitre {
  font-family: var(--font-ui);
  font-size: var(--fs-kicker);
  letter-spacing: var(--ls-kicker);
  
  font-weight: var(--fw-ui-strong);
  color: var(--ink-faint);
}

/* Tous les chiffres en Oswald, et en chasse fixe des qu'ils s'empilent : sans
   tabular-nums une colonne de valeurs ne s'aligne pas et ne se compare plus. */
.ps-num, .ps-bilan-val, .ps-note-globale, .ps-note,
.ps-meta-badge, .ps-export-badge, .ps-fun-badge,
td .ps-val, th .ps-val {
  font-family: var(--font-num);
  font-weight: var(--fw-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.ps-num--xl { font-size: var(--fs-num-xl); font-weight: var(--fw-num-strong); }
.ps-num--lg { font-size: var(--fs-num-lg); }
.ps-num--md { font-size: var(--fs-num-md); }

/* Interface : libelles, boutons, badges, controles. Jamais la serif. */
.ps-ui, button, select, input, .ps-badge, .ps-chip, .ps-projet-chip,
.ps-portrait-action, .ps-meta-item {
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
}
/* Un champ sous 16 px declenche le zoom automatique d'iOS au focus, ce qui
   casse la mise en page : la regle vaut plus que l'harmonie de l'echelle. */
input, select, textarea { font-size: max(16px, var(--fs-ui)); }

/* ── Focus visible, jamais supprime (section a11y declaree bloquante) ──────── */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius);
}

/* Survol : elevation par filet, jamais par translation. */
@media (hover: hover) {
  .ps-hub-card:hover, .ps-export-card:hover, .ps-fun-card:hover,
  .ps-blog-card:hover, .ps-guide-map-card:hover {
    border-color: var(--border-strong);
    transition: border-color var(--dur) var(--ease);
  }
}

/* ── Focus visible : dernier mot de la cascade (a11y bloquante) ───────────────
   Le socle declare deja :focus-visible plus haut, mais le fichier compte une
   trentaine d'`outline: none` poses sur des selecteurs de classe, donc plus
   specifiques ET plus bas dans la cascade : chacun neutralisait l'anneau de
   focus pour son composant. Plutot que de les traquer un par un — et d'en
   laisser repasser au prochain ajout — la regle est reposee ici, en fin de
   fichier et en !important. C'est le seul !important assume de la charte :
   « focus visible, jamais supprime » est declare bloquant.

   :focus-visible et non :focus — le clic souris ne doit pas dessiner d'anneau,
   seule la navigation clavier en a besoin. */
:where(a, button, input, select, textarea, summary, [tabindex], [role="button"]):focus-visible {
  outline: 2px solid var(--focus-ring) !important;
  outline-offset: 3px !important;
}

/* ═════════════════════════════════════════════════════════════════════════════
   CORRECTIFS RÉELS — 26/07/2026
   ═════════════════════════════════════════════════════════════════════════════

   Ce bloc REMPLACE deux blocs précédents du même jour (« CHARTE 2026 Committed »
   et « RESET STRUCTUREL ») qui sont retirés.

   POURQUOI ILS SONT RETIRÉS. Ils re-peignaient le site en encre + brique + zéro
   rayon. C'était une invention de session : la charte du site est spécifiée dans
   `design-2026/tokens/colors.css` et `design-2026/guidelines/*.card.html`, et je
   ne les avais pas lus. Les quatre contradictions :

     la spec dit                        j'avais mis
     --bg: #FFFFFF                      fond encre #14171A
     bleu #27356F = STRUCTURE           brique en structure partout
     rouge #C1272D = JUGEMENT           « meilleur » passé au vert
     rayons 3/6/10/14/pill par rôle     tout à 0

   La règle sémantique de colors.css est explicite et vaut d'être recopiée ici :
   « Le rouge JUGE (verdict, meilleure valeur, onglet actif) ; le bleu STRUCTURE
   (navigation, liens, pied de page, contrôles). Jamais l'inverse. »

   Et mon diagnostic « six échelles de rayon qui se disputent » était faux : ce
   sont cinq crans documentés avec un rôle chacun (xs jauges, sm champs/boutons,
   10px cartes/tableaux, lg verdict/export, pill chips seulement). J'avais compté
   des valeurs calculées et conclu à l'absence de système sans vérifier s'il en
   existait un. Lire la page rendue ne remplace pas lire la source.

   CE QUI RESTE ICI n'est pas du design : ce sont des défauts mesurés, dont
   plusieurs vivaient depuis des jours. Chacun est réparé DANS la charte
   spécifiée, pas contre elle. */

/* ── 1. Un titre à 1,59:1 sur toutes les pages ────────────────────────────── */
/* « Où s'installer en France en 2026 ? » était rendu en --ink (#1C1F26) sur le
   fond bleu foncé du bandeau : 1,59:1 pour un seuil AA de 3 en grand texte. Un
   titre invisible, présent sur chaque page du site.
   --on-deep est le token prévu par la spec pour du texte sur fond marine. */
.ps-footer-leadgen h2,
.ps-footer-leadgen .ps-leadgen-content h2 { color: var(--on-deep) !important; }
.ps-footer-leadgen p { color: var(--on-deep-soft); }

/* ── 2. 279 dégradés entre deux couleurs identiques ──────────────────────── */
/* `.ps-dept-card-head` portait un linear-gradient(135deg, X, X) — même couleur
   aux deux bouts, donc un aplat déguisé, recalculé 279 fois par peinture sur un
   hub département. Écrit comme un aplat, avec le bleu pâle de structure. */
.ps-dept-card-head {
  background-image: none;
  background-color: var(--bleu-975);
}

/* ── 3. Alignement : deux causes, un seul symptôme ────────────────────────── */
/* Les paragraphes ne tombaient pas sous leurs titres. Ce n'était pas un défaut
   unique :
   a) .ps-trouver-cta était vraiment en text-align: center ;
   b) .ps-note était alignée à gauche mais centrée EN TANT QUE BLOC, par un
      `margin: auto !important`. C'est le piège : on cherche un text-align qui
      n'existe pas. D'où le !important et la spécificité `> p.ps-note` ici. */
.ps-trouver-cta,
.ps-trouver-cta-content,
.ps-trouver-cta-text,
.ps-trouver-cta-title { text-align: left; }

.ps-wizard-header > p.ps-note,
.ps-section > p.ps-note,
p.ps-note { margin-inline: 0 !important; }

/* Vide de 110 px après le bandeau, seul écart supérieur à 90 px de la page. */
.ps-section.ps-guided-wizard { margin-bottom: 0; padding-bottom: 0; }
.ps-section.ps-guided-wizard + * { margin-top: 64px; }

/* ── 4. Des chevrons invisibles ───────────────────────────────────────────── */
/* Les « → » portaient leur propre couleur en dur au lieu de suivre celle de leur
   bouton : blanc sur blanc dès que le fond changeait. */
:is(.ps-cta-btn, .ps-section-more, .ps-nav-cta) :is(span, i)[aria-hidden="true"],
:is(.ps-cta-btn, .ps-section-more, .ps-nav-cta) span:not([class]) { color: inherit; }

/* ── 5. Les vignettes de villes ───────────────────────────────────────────── */
/* Le repli gris s'affichait parce que le rendu était gardé derrière une meta
   `photo_file` vide (corrigé dans front-page.php) alors que le proxy /photo/ ne
   lit que le code INSEE. Il ne sert plus qu'aux communes réellement sans photo,
   et dit son nom au lieu de simuler une image. */
.ps-city-card-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ps-city-card-thumb-fallback {
  background: var(--bg-soft);
  color: var(--ink-faint);
  font-family: var(--font-num);
  
  
  font-size: .8rem;
}


/* ═════════════════════════════════════════════════════════════════════════════
   FICHE COMMUNE — DEUX TITRES ILLISIBLES ET NEUF RAYONS HORS ÉCHELLE
   26/07/2026 · mesuré sur /bordeaux-33/ rendu, pas sur le source
   ═════════════════════════════════════════════════════════════════════════════

   Cette page-là n'avait jamais été auditée. Les deux défauts de contraste sont
   du même genre que le titre du bandeau corrigé plus haut : du texte prévu clair
   qui finit peint en encre, ou l'inverse. */

/* ── 1. « Obtenir mon Guide Touristique PDF » à 1,21:1 ────────────────────────
   La règle du thème dit bien `.ps-guide-cta-box h4 { color: #fff }` (l. 3525).
   Elle perd quand même : `h1, h2, h3, h4 { color: var(--ink) !important }` est
   déclaré CINQ fois dans ce fichier, et un !important bat une déclaration
   simple quelle que soit sa spécificité. Résultat : encre #1C1F26 sur le
   dégradé marine du bloc, soit 1,21:1 pour un seuil de 4,5.

   Le thème avait déjà rustiné cinq blocs sombres un par un de cette façon
   (.ps-game-banner-card h2, .ps-footer-col h3, .ps-leadgen-content h2,
   .ps-trouver-cta h2, .ps-footer-leadgen h2). Celui-ci est le sixième et
   personne ne l'avait vu. Une seule règle les couvre tous, et couvrira le
   septième : la liste est explicite, donc aucun bloc clair n'est touché. */
:is(.ps-guide-cta-box, .ps-footer-leadgen, .ps-game-banner-card,
    .ps-trouver-cta, .ps-footer) :is(h1, h2, h3, h4, h5, h6) {
  color: var(--on-deep) !important;
}

/* ── 2. Le ✕ de la barre collante à 1,58:1 ───────────────────────────────────
   `color: var(--on-deep-soft)` — #C9CEDA, le token du texte SUR fond marine —
   posé sur une barre dont le fond est blanc. Un bouton de fermeture invisible,
   sur les 34 841 fiches. Son :hover utilisait déjà --ink-faint : c'est l'état
   de base qui s'était trompé de famille de tokens, pas le survol. */
.ps-sticky-bar-close { color: var(--ink-soft); }

/* ==========================================================================
   SIMULATEUR DE VILLE IDÉALE 2026 — CHARTE CIVIQUE UNIFIÉE
   ========================================================================== */
.ps-trouver-container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0.5rem 1rem 2.5rem;
}

.ps-tf-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.35rem;
  flex-wrap: wrap;
}

.ps-tf-hero {
  text-align: left;
  margin-bottom: 0.75rem;
  max-width: 860px;
}

.ps-tf-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  background: var(--alice-blue, #eff6ff);
  border: 1px solid var(--icy-blue, #bfdbfe);
  color: var(--persian-blue, #1e40af);
  border-radius: var(--radius-sm, 6px);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.ps-tf-hero-title {
  font-family: var(--font-display, 'Poppins', sans-serif);
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  font-weight: 800;
  color: var(--ink, #0f172a);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
}

.ps-tf-app {
  background: #ffffff !important;
  border: 1px solid var(--border, #d8e3f2);
  border-radius: var(--radius, 16px);
  box-shadow: var(--shadow, 0 12px 32px rgba(10, 35, 67, 0.08));
  overflow: hidden;
  margin-bottom: 2rem;
}

/* Stepper Navigation */
.ps-tf-header {
  background: var(--bg-soft, #f7faff);
  border-bottom: 1px solid var(--border, #d8e3f2);
}

.ps-tf-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  gap: 0.4rem;
  overflow-x: auto;
}

.ps-tf-step-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  border: none;
  padding: 0.35rem 0.75rem;
  cursor: pointer;
  color: var(--ink-faint, #64748b);
  font-size: 0.82rem;
  font-weight: 600;
  font-family: var(--font-ui, 'Inter', sans-serif);
  white-space: nowrap;
  transition: all 0.15s ease;
  border-radius: var(--radius-pill, 999px);
}

.ps-tf-step-tab:hover {
  color: var(--brand-dark, #1e3a8a);
  background: rgba(37, 99, 235, 0.08);
}

.ps-tf-step-tab.is-active {
  color: var(--bleu-france, #2563eb) !important;
  font-weight: 700;
  background: #ffffff;
  box-shadow: var(--shadow-sm, 0 4px 12px rgba(10, 35, 67, 0.06));
}

.ps-tf-tab-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border, #d8e3f2);
  background: #ffffff;
  color: var(--ink-soft, #475569);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: var(--font-ui, 'Inter', sans-serif);
}

.ps-tf-step-tab.is-active .ps-tf-tab-num {
  background: var(--bleu-france, #2563eb);
  border-color: var(--bleu-france, #2563eb);
  color: #ffffff;
}

.ps-tf-step-tab.is-past .ps-tf-tab-num {
  background: var(--bleu-950, #eaf2ff);
  border-color: var(--bleu-925, #d8e3f2);
  color: var(--bleu-france, #2563eb);
}

.ps-tf-tab-divider {
  flex-grow: 1;
  height: 1px;
  background: var(--border, #d8e3f2);
  min-width: 8px;
}

.ps-tf-progress-track {
  height: 2px;
  background: var(--border-soft, #eaf2ff);
  width: 100%;
}

.ps-tf-progress-fill {
  height: 100%;
  background: var(--bleu-france, #2563eb);
  transition: width 0.3s var(--ease, ease);
}

/* Main Screens */
.ps-tf-main {
  padding: 1.25rem 1.5rem;
  min-height: 380px;
  background: #ffffff !important;
}

@media (max-width: 640px) {
  .ps-tf-main {
    padding: 1rem 0.85rem;
  }
}

.ps-tf-screen {
  animation: psTfFadeIn 0.2s var(--ease, ease);
}

@keyframes psTfFadeIn {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

.ps-tf-screen-content {
  max-width: 860px;
  margin: 0 auto;
}

.ps-tf-title {
  font-family: var(--font-display, 'Poppins', sans-serif);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink, #0f172a) !important;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
}

.ps-tf-section-block {
  margin-bottom: 0.85rem;
}

.ps-tf-section-heading {
  font-family: var(--font-display, 'Poppins', sans-serif);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ink, #0f172a) !important;
  margin: 0 0 0.35rem;
}

/* Presets Row / Chips */
.ps-tf-presets-section {
  margin-bottom: 0.75rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px dashed var(--border, #d8e3f2);
}

.ps-tf-presets-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}

.ps-tf-presets-hint {
  font-size: 0.74rem;
  color: var(--ink-faint, #64748b);
  font-weight: 500;
}

.ps-tf-presets-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.ps-tf-preset-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.85rem;
  background: var(--bg-soft, #f7faff);
  border: 1px solid var(--border, #d8e3f2);
  border-radius: var(--radius-pill, 999px);
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink, #0f172a);
  font-family: var(--font-ui, 'Inter', sans-serif);
}

.ps-tf-preset-chip:hover {
  border-color: var(--bleu-france, #2563eb);
  background: #ffffff;
  color: var(--bleu-france, #2563eb);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.12);
}

.ps-tf-preset-chip.is-selected {
  border-color: var(--bleu-france, #2563eb);
  background: var(--bleu-975, #f7faff) !important;
  color: var(--bleu-france, #2563eb);
  font-weight: 700;
  outline: 2px solid var(--bleu-france, #2563eb);
}

.ps-tf-preset-chip svg {
  color: var(--bleu-france, #2563eb);
}
.ps-icon-emerald, .ps-icon-green { background: #dcfce7 !important; color: #15803d !important; border: 1px solid #bbf7d0; }
.ps-icon-blue { background: #dbeafe !important; color: #1d4ed8 !important; border: 1px solid #bfdbfe; }
.ps-icon-scarlet, .ps-icon-red { background: #fee2e2 !important; color: #b91c1c !important; border: 1px solid #fecaca; }
.ps-icon-amber, .ps-icon-orange { background: #fef3c7 !important; color: #b45309 !important; border: 1px solid #fde68a; }
.ps-icon-purple, .ps-icon-violet { background: #ede9fe !important; color: #6d28d9 !important; border: 1px solid #ddd6fe; }
.ps-icon-cyan { background: #cffafe !important; color: #0e7490 !important; border: 1px solid #a5f3fc; }

.ps-tf-card-icon-wrap svg {
  stroke-width: 2.2px;
}

/* Preset Chips Couleurs Distinctes */
.ps-tf-preset-chip[data-preset="teletravail"] { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.ps-tf-preset-chip[data-preset="teletravail"] svg { color: #2563eb; }
.ps-tf-preset-chip[data-preset="famille"] { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
.ps-tf-preset-chip[data-preset="famille"] svg { color: #16a34a; }
.ps-tf-preset-chip[data-preset="soleil"] { background: #fffbeb; border-color: #fde68a; color: #b45309; }
.ps-tf-preset-chip[data-preset="soleil"] svg { color: #d97706; }
.ps-tf-preset-chip[data-preset="budget"] { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.ps-tf-preset-chip[data-preset="budget"] svg { color: #dc2626; }
.ps-tf-preset-chip[data-preset="nature"] { background: #f0fdfa; border-color: #99f6e4; color: #0f766e; }
.ps-tf-preset-chip[data-preset="nature"] svg { color: #0d9488; }

.ps-tf-preset-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.ps-tf-preset-title {
  font-family: var(--font-display, 'Poppins', sans-serif);
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--ink, #0f172a) !important;
  margin-bottom: 0.1rem;
}

.ps-tf-preset-desc {
  font-size: 0.72rem;
  line-height: 1.25;
  color: var(--ink-soft, #64748b) !important;
}

/* Choice Cards (Dealbreakers) - Harmonized Rounded */
.ps-tf-cards-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ps-tf-choice-card {
  display: block;
  background: #ffffff;
  border: 1px solid var(--border, #d8e3f2);
  border-radius: var(--radius, 16px);
  padding: 0.75rem 1.15rem;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
}

.ps-tf-choice-card:hover {
  border-color: var(--bleu-france, #2563eb);
  background: var(--bg-soft, #f7faff);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.08);
}

.ps-tf-choice-card.is-checked,
.ps-tf-choice-card:has(input:checked) {
  background: var(--bleu-975, #f7faff) !important;
  border-color: var(--bleu-france, #2563eb) !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.10);
}

.ps-tf-card-body {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.ps-tf-card-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm, 12px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ps-tf-card-text {
  flex-grow: 1;
}

.ps-tf-card-title {
  font-family: var(--font-display, 'Poppins', sans-serif);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink, #0f172a) !important;
  margin-bottom: 0.08rem;
}

.ps-tf-card-sub {
  font-size: 0.78rem;
  color: var(--ink-soft, #475569) !important;
  line-height: 1.3;
}

.ps-tf-card-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border-strong, #b9cce6);
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.ps-tf-choice-card.is-checked .ps-tf-card-check,
.ps-tf-choice-card:has(input:checked) .ps-tf-card-check {
  background: var(--bleu-france, #2563eb);
  border-color: var(--bleu-france, #2563eb);
  color: #ffffff;
}

/* Action Bars & Compact Buttons */
.ps-tf-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1.15rem;
  padding-top: 0.95rem;
  border-top: 1px solid var(--border, #d8e3f2);
  flex-wrap: wrap;
}

.ps-tf-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.4rem;
  background: var(--bleu-france, #2563eb);
  color: #ffffff !important;
  border: 1px solid var(--bleu-france, #2563eb);
  border-radius: var(--radius-pill, 999px);
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25);
  min-height: 42px;
}

.ps-tf-btn-primary:hover {
  background: var(--bleu-france-hover, #1d4fd8);
  border-color: var(--bleu-france-hover, #1d4fd8);
  transform: var(--lift, translateY(-1px));
}

.ps-tf-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.25rem;
  background: #ffffff;
  color: var(--ink, #0f172a) !important;
  border: 1px solid var(--border, #d8e3f2);
  border-radius: var(--radius-pill, 999px);
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  min-height: 42px;
}

.ps-tf-btn-secondary:hover {
  background: var(--bg-soft, #f7faff);
  border-color: var(--bleu-france, #2563eb);
  color: var(--bleu-france, #2563eb) !important;
}

.ps-tf-btn-instant-jump {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1.15rem;
  background: var(--alice-blue, #eff6ff);
  color: var(--bleu-france, #2563eb) !important;
  border: 1.5px dashed var(--bleu-france, #2563eb);
  border-radius: var(--radius-pill, 999px);
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  min-height: 42px;
}

.ps-tf-btn-instant-jump:hover {
  background: var(--bleu-950, #eaf2ff);
  border-style: solid;
}

/* Pills & Filter Tags */
.ps-tf-pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.ps-tf-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.1rem;
  background: #ffffff;
  border: 1px solid var(--border, #d8e3f2);
  border-radius: var(--radius-pill, 999px);
  color: var(--ink, #0f172a);
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
  min-height: 38px;
}

.ps-tf-pill:hover {
  border-color: var(--bleu-france, #2563eb);
  background: var(--bg-soft, #f7faff);
  color: var(--bleu-france, #2563eb);
}

.ps-tf-pill.is-active,
.ps-tf-pill[aria-pressed="true"] {
  background: var(--bleu-france, #2563eb);
  border-color: var(--bleu-france, #2563eb);
  color: #ffffff;
  font-weight: 700;
}

.ps-tf-pill.is-active .ps-tf-pill-sub {
  color: rgba(255, 255, 255, 0.85);
}

.ps-tf-pill-sub {
  font-size: 0.78rem;
  color: var(--ink-faint, #64748b);
  font-weight: 400;
  margin-left: 0.25rem;
}

/* Search input */
.ps-tf-search-wrapper {
  position: relative;
  max-width: 520px;
  margin-bottom: 0.65rem;
}

.ps-tf-input-search {
  width: 100%;
  padding: 0.65rem 1.15rem;
  background: #ffffff;
  border: 1px solid var(--border, #d8e3f2);
  border-radius: var(--radius-pill, 999px);
  font-size: 0.92rem;
  color: var(--ink, #0f172a);
  min-height: 42px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ps-tf-input-search:focus {
  outline: none;
  border-color: var(--bleu-france, #2563eb);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.ps-tf-chip-selected {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  background: var(--bleu-950, #eaf2ff);
  border: 1px solid var(--bleu-925, #d8e3f2);
  color: var(--bleu-france, #2563eb);
  border-radius: var(--radius-pill, 999px);
  font-size: 0.82rem;
  font-weight: 700;
}

.ps-tf-chip-remove {
  background: transparent;
  border: none;
  color: var(--bleu-france, #2563eb);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* Axes & Weighting Cards */
.ps-tf-axes-container {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 1.5rem;
}

.ps-tf-axis-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.4rem;
  background: #ffffff;
  border: 1px solid var(--border, #d8e3f2);
  border-radius: var(--radius, 16px);
  gap: 1.25rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
}

.ps-tf-axis-card:hover {
  border-color: var(--bleu-france, #2563eb);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.08);
}

@media (max-width: 720px) {
  .ps-tf-axis-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.65rem;
  }
}

.ps-tf-axis-info {
  flex-grow: 1;
}

.ps-tf-axis-title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.15rem;
}

.ps-tf-axis-name {
  font-family: var(--font-display, 'Poppins', sans-serif);
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--ink, #0f172a) !important;
}

.ps-tf-axis-badge {
  font-size: 0.72rem;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-pill, 999px);
  background: var(--bg-soft, #f7faff);
  color: var(--ink-faint, #64748b);
  font-weight: 600;
}

.ps-tf-axis-badge.is-active {
  background: var(--bleu-950, #eaf2ff);
  color: var(--bleu-france, #2563eb);
  font-weight: 700;
}

.ps-tf-axis-note {
  font-size: 0.82rem;
  color: var(--ink-soft, #64748b) !important;
}

.ps-tf-axis-choices {
  display: inline-flex;
  background: var(--bg-soft, #f7faff);
  padding: 3px;
  border-radius: var(--radius-pill, 999px);
  gap: 3px;
  border: 1px solid var(--border, #d8e3f2);
}

.ps-tf-axis-option {
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-pill, 999px);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-faint, #64748b);
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
}

.ps-tf-axis-option:hover {
  color: var(--ink, #0f172a);
}

.ps-tf-axis-option.is-selected {
  background: var(--bleu-france, #2563eb);
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}

/* Accordion Details */
.ps-tf-accordion-details {
  border: 1px solid var(--border, #d8e3f2);
  border-radius: var(--radius, 16px);
  padding: 0.95rem 1.35rem;
  background: var(--bg-soft, #f7faff);
  margin-bottom: 1.5rem;
}

.ps-tf-accordion-summary {
  font-family: var(--font-display, 'Poppins', sans-serif);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--brand-dark, #1e3a8a) !important;
  cursor: pointer;
}

.ps-tf-crit-count {
  font-size: 0.82rem;
  color: var(--bleu-france, #2563eb);
  font-weight: 700;
  margin-left: 0.4rem;
}

.ps-tf-criteres-list {
  padding-top: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.ps-tf-groupe-title {
  font-family: var(--font-display, 'Poppins', sans-serif);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink, #0f172a) !important;
  margin: 0 0 0.45rem;
}

.ps-tf-curseurs {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.ps-tf-crit-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 1.15rem;
  background: #ffffff;
  border: 1px solid var(--border, #d8e3f2);
  border-radius: var(--radius-pill, 999px);
  gap: 0.75rem;
}

.ps-tf-crit-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink, #0f172a) !important;
}

.ps-tf-crit-badge {
  font-size: 0.72rem;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-pill, 999px);
  background: var(--bg-soft, #f7faff);
  color: var(--ink-faint, #64748b);
  margin-left: 0.4rem;
  font-weight: 600;
}

.ps-tf-crit-badge.is-active {
  background: var(--bleu-950, #eaf2ff);
  color: var(--bleu-france, #2563eb);
  font-weight: 700;
}

/* Results & Podium */
.ps-tf-results-header {
  margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--border, #d8e3f2);
  padding-bottom: 1.25rem;
}

.ps-tf-results-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bleu-france, #2563eb);
  margin-bottom: 0.35rem;
}

.ps-tf-results-subrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.65rem;
}

.ps-tf-results-count {
  font-family: var(--font-display, 'Poppins', sans-serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--brand-dark, #1e3a8a) !important;
  margin: 0;
}

.ps-tf-results-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.ps-tf-pill-action {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill, 999px);
  border: 1px solid var(--border, #d8e3f2);
  background: #ffffff;
  color: var(--ink, #0f172a);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  min-height: 38px;
}

.ps-tf-pill-action:hover {
  border-color: var(--bleu-france, #2563eb);
  background: var(--bg-soft, #f7faff);
  color: var(--bleu-france, #2563eb);
}

.ps-tf-pill-action.is-active,
.ps-tf-pill-action[aria-pressed="true"] {
  background: var(--bleu-france, #2563eb);
  border-color: var(--bleu-france, #2563eb);
  color: #ffffff;
  font-weight: 700;
}

.ps-tf-pill-action--primary {
  background: var(--bleu-france, #2563eb) !important;
  border-color: var(--bleu-france, #2563eb) !important;
  color: #ffffff !important;
}

.ps-tf-pill-action--primary:hover {
  background: var(--bleu-france-hover, #1d4fd8) !important;
}

.ps-tf-btn-edit-criteria {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill, 999px);
  border: 1px solid var(--border, #d8e3f2);
  background: #ffffff;
  color: var(--ink, #0f172a);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  min-height: 38px;
}

.ps-tf-btn-edit-criteria:hover {
  border-color: var(--bleu-france, #2563eb);
  background: var(--bg-soft, #f7faff);
  color: var(--bleu-france, #2563eb);
}

.ps-tf-podium {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.ps-tf-podium-card {
  background: #ffffff;
  border: 1px solid var(--border, #d8e3f2);
  border-radius: var(--radius, 16px);
  padding: 1.45rem;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all 0.15s ease;
  box-shadow: var(--shadow-sm, 0 4px 12px rgba(10, 35, 67, 0.05));
}

.ps-tf-podium-card:hover {
  border-color: var(--bleu-france, #2563eb);
  transform: var(--lift, translateY(-2px));
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.08);
}

.ps-tf-podium-card.ps-tf-rank-1 {
  border: 2px solid var(--bleu-france, #2563eb);
  background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.08);
}

.ps-tf-podium-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.65rem;
}

.ps-tf-podium-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--brand-dark, #1e3a8a);
}

.ps-tf-crown-icon {
  color: #d97706;
  display: inline-flex;
}

.ps-tf-podium-match {
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-xs, 4px);
  background: var(--best-bg, #ddf8ee);
  color: var(--best, #059669);
  font-size: 0.8rem;
  font-weight: 700;
  font-family: var(--font-ui, 'Inter', sans-serif);
}

.ps-tf-podium-title {
  font-family: var(--font-display, 'Poppins', sans-serif);
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 0.2rem;
}

.ps-tf-podium-title a {
  color: var(--ink, #0f172a) !important;
  text-decoration: none;
}

.ps-tf-podium-title a:hover {
  color: var(--bleu-france, #2563eb) !important;
}

.ps-tf-podium-dep {
  font-size: 0.85rem;
  color: var(--ink-soft, #64748b) !important;
  margin-bottom: 0.65rem;
}

.ps-tf-podium-price {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--brand-dark, #1e3a8a) !important;
  margin-bottom: 0.65rem;
  font-family: var(--font-ui, 'Inter', sans-serif);
}

.ps-tf-podium-atouts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 1.15rem;
  flex-grow: 1;
}

.ps-tf-atout-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-xs, 4px);
  background: var(--bg-soft, #f7faff);
  color: var(--ink-soft, #475569);
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid var(--border-soft, #eaf2ff);
}

.ps-tf-podium-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.55rem 1rem;
  background: #ffffff;
  border: 1px solid var(--bleu-france, #2563eb);
  border-radius: var(--radius-sm, 6px);
  color: var(--bleu-france, #2563eb) !important;
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
  transition: all 0.15s ease;
  min-height: 38px;
}

.ps-tf-podium-card.ps-tf-rank-1 .ps-tf-podium-cta {
  background: var(--bleu-france, #2563eb);
  color: #ffffff !important;
}

.ps-tf-podium-cta:hover {
  background: var(--bleu-france-hover, #1d4fd8) !important;
  border-color: var(--bleu-france-hover, #1d4fd8) !important;
  color: #ffffff !important;
}

/* Rows for rest of list */
.ps-tf-rest-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
}

.ps-tf-row-card {
  display: flex;
  align-items: center;
  padding: 0.75rem 1.1rem;
  background: #ffffff;
  border: 1px solid var(--border, #d8e3f2);
  border-radius: var(--radius, 8px);
  gap: 0.85rem;
  transition: all 0.15s ease;
}

.ps-tf-row-card:hover {
  border-color: var(--bleu-france, #2563eb);
  background: var(--bg-soft, #f7faff);
}

.ps-tf-row-rank {
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink-faint, #64748b);
  width: 28px;
  flex-shrink: 0;
}

.ps-tf-row-main {
  flex-grow: 1;
}

.ps-tf-row-title-wrap {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}

.ps-tf-row-title {
  font-family: var(--font-display, 'Poppins', sans-serif);
  font-size: 0.98rem;
  font-weight: 700;
  margin: 0;
}

.ps-tf-row-title a {
  color: var(--ink, #0f172a) !important;
  text-decoration: none;
}

.ps-tf-row-title a:hover {
  color: var(--bleu-france, #2563eb) !important;
}

.ps-tf-row-dep {
  font-size: 0.82rem;
  color: var(--ink-soft, #64748b) !important;
}

.ps-tf-row-atouts {
  font-size: 0.8rem;
  color: var(--ink-soft, #64748b) !important;
}

.ps-tf-row-score {
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-xs, 4px);
  background: var(--bleu-950, #eaf2ff);
  color: var(--bleu-france, #2563eb);
  font-size: 0.82rem;
  font-weight: 700;
  font-family: var(--font-ui, 'Inter', sans-serif);
  flex-shrink: 0;
}

.ps-tf-row-link {
  color: var(--bleu-france, #2563eb);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-xs, 4px);
  background: var(--bg-soft, #f7faff);
  border: 1px solid var(--border-soft, #eaf2ff);
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.ps-tf-row-link:hover {
  background: var(--bleu-france, #2563eb);
  border-color: var(--bleu-france, #2563eb);
  color: #ffffff;
}

.ps-tf-results-footer {
  text-align: center;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border, #d8e3f2);
}

/* Global overrides for charter compliance */
.ps-devine-input-group,
.ps-devine-results,
.ps-devine-results button,
.ps-devine-compteur,
.ps-devine-row,
.ps-devine-issue,
.ps-tv-issue,
.ps-map-metric-picker,
.ps-map-sidebar,
.ps-map-detail,
.ps-map-box,
.ps-cmp-banner,
.ps-cmp-side span,
.ps-duel-val,
.ps-hub-card,
.ps-hero-preview-card,
.ps-avis-item,
.ps-devine-card,
.ps-blueprint-tag,
.ps-hero-card-badge,
.ps-badge,
.ps-tv-criteres .ps-tv-groupe,
.ps-tv-crit input[type="range"],
.ps-tv-crit input[type="range"]::-webkit-slider-thumb,
.ps-tv-crit input[type="range"]::-moz-range-thumb {
  border-radius: var(--radius-sm) !important;
}

/* Compact button styles */
button, .ps-devine-results button, .ps-devine-compteur button, .ps-devine-row button, .ps-devine-issue button, .ps-tv-issue button, .ps-map-metric-picker button, .ps-map-sidebar button, .ps-map-detail button, .ps-map-box button, .ps-cmp-banner button, .ps-cmp-side span button, .ps-duel-val button, .ps-hub-card button, .ps-hero-preview-card button, .ps-avis-item button, .ps-devine-card button, .ps-blueprint-tag button, .ps-hero-card-badge button, .ps-badge button, .ps-tv-criteres .ps-tv-groupe button {
  padding: 0.35rem 0.7rem !important;
  font-size: 0.85rem !important;
  line-height: 1 !important;
  border-radius: var(--radius-sm) !important;
}

/* Hide AI star icons */
.ps-star, .star, .rating-star, .star-rating {
  display: none !important;
}
.ps-devine-results button,
.ps-mode-chip {
  padding: 0.5rem 0.8rem !important;
}

/* Remove star rating elements */
.ps-star,
.star,
.rating-star,
.star-rating {
  display: none !important;
}

/* ==========================================================================
   MODULES DE MONÉTISATION, LEADGEN & SERVICES PARTENAIRES 2026
   ========================================================================== */

/* 1. Hub des Partenaires d'Installation (Fiches Communes) */
.ps-installation-hub {
  margin: 2.5rem 0 2rem !important;
  padding: 1.75rem !important;
  background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%) !important;
  border: 1px solid var(--border, #d8e3f2) !important;
  border-radius: var(--radius, 8px) !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03) !important;
}

.ps-installation-hub-header {
  margin-bottom: 1.25rem;
}

.ps-installation-hub-header .ps-badge {
  margin-bottom: 0.45rem;
}

.ps-installation-hub-header .ps-section-title {
  font-family: var(--font-display, 'Poppins', sans-serif);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ink, #0f172a);
  margin: 0 0 0.25rem;
}

.ps-installation-hub-header .ps-section-desc {
  font-size: 0.88rem;
  color: var(--ink-soft, #475569);
  margin: 0;
}

.ps-installation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.ps-offer-card {
  background: #ffffff;
  border: 1px solid var(--border, #d8e3f2);
  border-radius: var(--radius, 8px);
  padding: 1.25rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.02);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  display: flex;
  flex-direction: column;
}

.ps-offer-card:hover {
  border-color: var(--bleu-france, #2563eb);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.08);
  transform: var(--lift, translateY(-2px));
}

.ps-offer-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ps-offer-icon-box {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm, 6px);
  background: var(--bg-soft, #f7faff);
  border: 1px solid var(--border-soft, #eaf2ff);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
  flex-shrink: 0;
}

.ps-offer-content {
  flex-grow: 1;
  margin-bottom: 1rem;
}

.ps-offer-eyebrow {
  margin-bottom: 0.35rem;
}

.ps-offer-badge {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bleu-france, #2563eb);
  background: var(--alice-blue, #eff6ff);
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-xs, 4px);
  border: 1px solid var(--icy-blue, #bfdbfe);
}

.ps-offer-title {
  font-family: var(--font-display, 'Poppins', sans-serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink, #0f172a);
  margin: 0 0 0.35rem;
}

.ps-offer-desc {
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--ink-soft, #475569);
  margin: 0;
}

.ps-offer-cta-wrap {
  margin-top: auto;
}

.ps-cta-btn--partner {
  width: 100%;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.45rem !important;
  padding: 0.55rem 1rem !important;
  border-radius: var(--radius-sm, 6px) !important;
  background: var(--bleu-france, #2563eb) !important;
  color: #ffffff !important;
  font-family: var(--font-ui, 'Inter', sans-serif) !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  text-decoration: none !important;
  border: 1px solid var(--bleu-france, #2563eb) !important;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.2);
  transition: all 0.15s ease !important;
  min-height: 38px;
}

.ps-cta-btn--partner:hover {
  background: var(--bleu-france-hover, #1d4fd8) !important;
  border-color: var(--bleu-france-hover, #1d4fd8) !important;
  color: #ffffff !important;
  transform: var(--lift, translateY(-1px));
}

/* 2. Bloc Leadgen Dossier d'Installation (Simulateur /trouver-ma-ville/) */
.ps-tf-lead-box {
  margin: 2rem 0 1.5rem;
  padding: 1.6rem;
  background: linear-gradient(180deg, #f0f7ff 0%, #ffffff 100%);
  border: 1.5px solid var(--icy-blue, #bfdbfe);
  border-radius: var(--radius, 8px);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.05);
}

.ps-tf-lead-header {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  margin-bottom: 1.15rem;
}

.ps-tf-lead-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm, 6px);
  background: var(--bleu-france, #2563eb);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ps-tf-lead-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bleu-france, #2563eb);
  background: #ffffff;
  border: 1px solid var(--icy-blue, #bfdbfe);
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-xs, 4px);
  margin-bottom: 0.25rem;
}

.ps-tf-lead-title {
  font-family: var(--font-display, 'Poppins', sans-serif);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ink, #0f172a);
  margin: 0 0 0.2rem;
  line-height: 1.25;
}

.ps-tf-lead-subtitle {
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--ink-soft, #475569);
  margin: 0;
}

.ps-tf-lead-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.65rem;
  margin-bottom: 0.65rem;
}

.ps-tf-lead-fields input,
.ps-tf-lead-fields select {
  width: 100%;
  padding: 0.55rem 0.85rem;
  background: #ffffff;
  border: 1px solid var(--border, #d8e3f2);
  border-radius: var(--radius-sm, 6px);
  font-size: 0.88rem;
  color: var(--ink, #0f172a);
  min-height: 38px;
  font-family: var(--font-ui, 'Inter', sans-serif);
}

.ps-tf-lead-fields input:focus,
.ps-tf-lead-fields select:focus {
  outline: none;
  border-color: var(--bleu-france, #2563eb);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.ps-tf-lead-consent-text {
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--ink-faint, #64748b);
  margin: 0;
}

.ps-tf-lead-feedback {
  margin-top: 0.75rem;
  padding: 0.65rem 0.95rem;
  border-radius: var(--radius-sm, 6px);
  font-size: 0.86rem;
  font-weight: 600;
}

.ps-tf-lead-feedback--success {
  background: var(--best-bg, #ddf8ee);
  color: var(--best, #059669);
  border: 1px solid #a7f3d0;
}

.ps-tf-lead-feedback--error {
  background: var(--worst-bg, #fee2e2);
  color: var(--worst, #dc2626);
  border: 1px solid #fca5a5;
}

/* ── DS-09 : Micro-animations CSS fluides ─────────────────────────────────── */
@keyframes ps-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ps-gauge-fill {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

@keyframes ps-pulse-soft {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.88;
    transform: scale(1.02);
  }
}

.ps-animate-in {
  animation: ps-fade-in-up 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.ps-thermometer-mercury {
  transform-origin: bottom;
  animation: ps-gauge-fill 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.ps-badge-pulse {
  animation: ps-pulse-soft 2.4s ease-in-out infinite;
}

/* ── DS-10 : Optimisation Haute Densité Retina & 4K ───────────────────────── */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .ps-civic-blason-img,
  .ps-card-thumb-img,
  .ps-hero-bg-img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
  
  .ps-dataviz-svg {
    shape-rendering: geometricPrecision;
    text-rendering: geometricPrecision;
  }
}

/* ── Animations Fluides au Scroll & Densification Visuelle (2026) ────────── */
@keyframes ps-scroll-reveal {
  from {
    opacity: 0.88;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .ps-card,
  .ps-dc-card,
  .ps-master-panel,
  .panel,
  .ps-section {
    animation: ps-scroll-reveal 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
    content-visibility: auto;
    contain-intrinsic-size: 0 400px;
  }
}

/* Optimisation de la hauteur de page & rythme visuel compact */
.ps-section, .panel {
  margin-top: 1.5rem !important;
}

@media (max-width: 768px) {
  .ps-section, .panel, .ps-dc-card, .ps-master-panel {
    padding: 1.15rem !important;
    margin-top: 1.25rem !important;
  }
}

/* ── Sticky Thumb Bar Mobile (Zone du pouce CRO) ────────────────────────── */
.ps-mobile-thumb-bar {
  display: none;
}

@media (max-width: 768px) {
  .ps-mobile-thumb-bar {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--border, #d8e3f2);
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.08);
    padding: 0.5rem 0.75rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
  }

  .ps-thumb-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    max-width: 480px;
    margin: 0 auto;
  }

  .ps-thumb-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.55rem 0.85rem;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.15s ease;
    border: 1px solid var(--border, #d8e3f2);
    background: #ffffff;
    color: var(--ink, #0f172a);
    flex: 1;
    min-height: 40px;
    touch-action: manipulation;
  }

  .ps-thumb-fav-wrap {
    flex: 0 0 auto;
    padding: 0;
    border: none;
    background: transparent;
  }

  .ps-thumb-primary {
    background: var(--bleu-france, #2563eb);
    color: #ffffff !important;
    border-color: var(--bleu-france, #2563eb);
    flex: 1.2;
  }

  .ps-thumb-primary svg {
    color: #ffffff;
  }

  .ps-thumb-compare svg {
    color: var(--bleu-france, #2563eb);
  }

  /* Padding de compensation pour éviter que le footer ne soit masqué par la barre */
  body.single-commune {
    padding-bottom: 70px;
  }
}