/*
 * Karka — design system (extrait de base.html.twig le 11/09/2026).
 *
 * POURQUOI CE FICHIER EXISTE — ces ~840 lignes étaient inlinées dans un <style> du
 * <head> de CHAQUE page : 63 Ko de CSS strictement identiques retéléchargés et
 * reparsés à chaque navigation, jamais mis en cache, alors que ce fichier — servi
 * par AssetMapper avec une empreinte dans le nom et `Cache-Control: max-age` de
 * dix ans — ne portait que trois règles (audit SEO du 11/09/2026, M1).
 *
 * ⚠ ORDRE DE CASCADE — le <link> de ce fichier est émis par `importmap('app')`,
 *   que base.html.twig place AVANT `{% block stylesheets %}` : les styles propres à
 *   une page continuent de l'emporter sur le design system à spécificité égale,
 *   exactement comme quand tout était inline. Ne pas redescendre l'importmap.
 *
 * ⚠ Les @font-face restent dans base.html.twig : leurs URL portent
 *   `app.request.basePath` (le poste local sert le site en sous-dossier).
 *
 * ⚠ Ne jamais supprimer du CSS ligne par ligne (DEV-NOTES 26/08 (iii)).
 */

:root {
    --ink: #0c0c14;
    --ink-60: rgba(12,12,20,0.6);
    --ink-35: rgba(12,12,20,0.35);
    --ink-12: rgba(12,12,20,0.12);
    --white: #ffffff;
    --off: #f6f6f9;
    --border: #e4e4ec;
    --v: #6366f1;
    /* Variante TEXTE de l'accent. Mesuré : #6366f1 sur blanc plafonne à
       4,47:1, soit juste SOUS le seuil WCAG AA de 4,5:1 pour du texte
       courant — acceptable pour un gros titre (seuil 3:1) ou un aperçu,
       pas pour les mots en gras d'un paragraphe, qui sont partout.
       #5154e0 est le même indigo à peine assoupli : 5,68:1 sur blanc,
       5,27 sur --off, 5,11 sur les encadrés pâles.
       ⚠ NE PAS remplacer --v par cette valeur : l'accent de marque
       (boutons, pastilles, filets, logo, tracés du plan) reste #6366f1. */
    --v-txt: #5154e0;
    --v-mid: #8b5cf6;
    --v-pale: #ede9fe;
    --v-soft: rgba(99,102,241,0.07);
    --v-border: rgba(99,102,241,0.2);
    --green: #16a34a;
    --green-bg: rgba(22,163,74,0.07);
    --amber: #d97706;
    --amber-bg: rgba(217,119,6,0.07);
    --red: #dc2626;
    --red-bg: rgba(220,38,38,0.07);
    --plan-grid: rgba(99,102,241,0.07);
    --plan-major: rgba(99,102,241,0.13);
    --font-head: 'Sora', -apple-system, 'Segoe UI', sans-serif;
    --font-body: 'DM Sans', -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'DM Mono', 'Courier New', monospace;
    --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 22px;
    --sh-sm: 0 2px 10px rgba(12,12,20,0.06);
    --sh-md: 0 6px 28px rgba(12,12,20,0.08);
    --sh-lg: 0 20px 56px rgba(12,12,20,0.10);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); color: var(--ink); background: var(--white); line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.hero-h1 { font-family: var(--font-head); font-size: clamp(38px, 5.2vw, 64px); font-weight: 900; line-height: 1.06; letter-spacing: -2.2px; margin-bottom: 16px; }
.sec-h2 { font-family: var(--font-head); font-size: clamp(26px, 3.2vw, 40px); font-weight: 800; letter-spacing: -1.1px; line-height: 1.15; margin-bottom: 28px; }
.card-h3 { font-family: var(--font-body); font-size: 14.5px; font-weight: 700; letter-spacing: -0.3px; }
.tech-label { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: var(--v); }
.plu-value { font-family: var(--font-mono); font-size: 11px; background: var(--off); border: 1px solid var(--border); border-radius: 4px; padding: 1px 7px; }
.text-muted { color: var(--ink-60); }
.text-sm { font-size: 14px; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.section { padding: 80px 0; }
.section-alt { background: var(--off); }

.btn, .btn-primary, .btn-dark, .btn-ghost, .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-body); font-weight: 700; border: none; cursor: pointer; transition: all .15s ease; text-decoration: none; }
.btn-primary { background: linear-gradient(135deg, var(--v), var(--v-mid)); color: #fff; border-radius: var(--r-md); padding: 13px 24px; font-size: 15px; }
.btn-primary:hover { opacity: .9; transform: translateY(-1px); }
.btn-dark { background: var(--ink); color: #fff; border-radius: var(--r-sm); padding: 8px 18px; font-size: 14px; }
.btn-dark:hover { background: #1c1c2e; }
.btn-ghost { background: transparent; border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--ink-60); font-weight: 500; padding: 7px 16px; font-size: 14px; }
.btn-ghost:hover { border-color: var(--v); color: var(--v); }

.hero-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--v-pale); border: 1px solid rgba(99,102,241,0.22); border-radius: 100px; padding: 5px 14px 5px 7px; }
.pill-dot { width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, var(--v), var(--v-mid)); display: flex; align-items: center; justify-content: center; font-size: 9px; color: #fff; }
.hero-pill span { font-family: var(--font-mono); font-size: 10.5px; color: var(--v); letter-spacing: 0.3px; }

.card { border: 1px solid var(--border); border-radius: var(--r-xl); padding: 28px 24px; position: relative; overflow: hidden; background: var(--white); transition: border-color .18s, box-shadow .18s, transform .18s; }
.card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--v), var(--v-mid)); opacity: 0; transition: opacity .18s; }
.card:hover { border-color: var(--v-border); box-shadow: 0 8px 30px rgba(99,102,241,0.1); transform: translateY(-2px); }
.card:hover::before { opacity: 1; }
.card-num { position: absolute; top: 18px; right: 20px; font-family: var(--font-mono); font-size: 10px; color: var(--ink-12); letter-spacing: 1px; }
.card-ico { width: 44px; height: 44px; background: var(--v-soft); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 16px; position: relative; }

.score-badge { border-radius: var(--r-md); padding: 9px 14px; display: inline-flex; align-items: center; gap: 8px; }
.score-favorable { background: var(--green-bg); border: 1px solid rgba(22,163,74,0.18); }
.score-favorable .score-num { font-size: 22px; font-weight: 900; color: var(--green); }
.score-constrainted { background: var(--amber-bg); border: 1px solid rgba(217,119,6,0.18); }
.score-constrainted .score-num { font-size: 22px; font-weight: 900; color: var(--amber); }
.score-difficult { background: var(--red-bg); border: 1px solid rgba(220,38,38,0.18); }
.score-difficult .score-num { font-size: 22px; font-weight: 900; color: var(--red); }

.sec-label { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sec-label-line { width: 28px; height: 1px; background: var(--v); }
.sec-label span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--v); }

.arch-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--plan-grid) 1px, transparent 1px), linear-gradient(90deg, var(--plan-grid) 1px, transparent 1px); background-size: 36px 36px; mask-image: radial-gradient(ellipse 75% 65% at 45% 35%, black 20%, transparent 85%); -webkit-mask-image: radial-gradient(ellipse 75% 65% at 45% 35%, black 20%, transparent 85%); }

/* ── Bandeau d'identité empruntée ──────────────────────────────
   Collé en haut pendant toute la consultation : l'information « je ne
   suis pas chez moi » doit rester sous les yeux, pas seulement à
   l'arrivée. C'est aussi pourquoi la navbar renonce à son collage ici —
   deux éléments collés à `top: 0` se superposent, et celui-ci gagnait. */
.ban-switch { position: sticky; top: 0; z-index: 9999;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 14px; padding: 9px 16px; background: #d97706; color: #fff;
    font-size: 13.5px; font-weight: 600; text-align: center; line-height: 1.45; }
.ban-switch a { background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.5);
    border-radius: 6px; padding: 4px 12px; color: #fff; font-weight: 700; white-space: nowrap; }
body.is-impersonating .navbar { position: static; }
@media (max-width: 640px) {
    /* Le texte tient sur deux ou trois lignes : on resserre pour qu'il
       ne mange pas le tiers de l'écran. Le bouton passe dessous. */
    .ban-switch { font-size: 12.5px; gap: 8px; padding: 8px 12px; }
    .ban-switch a { padding: 4px 10px; }
}

.navbar { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
/* Flex space-between : logo | liens | actions — avec 3 éléments, les deux
   espaces vides (logo↔liens et liens↔actions) sont automatiquement égaux,
   ce qui équilibre le bloc de liens au lieu de le centrer sur la page (le
   groupe d'actions étant plus large que le logo, le centrage page tirait
   les liens vers la droite). */
.navbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; height: 64px; }
.navbar-logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 800; font-size: 18px; letter-spacing: -0.5px; }
.navbar-links { display: flex; align-items: center; gap: 28px; list-style: none; }
.navbar-links a { font-size: 14px; font-weight: 500; color: var(--ink-60); transition: color .15s; }
.navbar-links a:hover { color: var(--v); }
.navbar-links a.btn-primary { color: #fff; }
.navbar-links a.btn-primary:hover { color: #fff; opacity: .9; }

.navbar-links a.is-active { color: var(--v); }
/* Lien de menu accompagné d'une icône.
   ⚠ NE PAS passer ce lien en `inline-flex` : `.navbar-links` centre ses
   <li> (`align-items: center`), et une boîte inline-flex ne se mesure
   pas comme les boîtes inline de ses voisins — le lien remontait alors
   de plusieurs pixels au-dessus de la rangée (constaté le 20/08).
   Le lien reste donc un inline ordinaire, stricte copie de ses voisins,
   et seule l'ICÔNE est calée sur la ligne de base. Le SVG hérite de
   `currentColor` : il suit le survol et l'état actif du texte. */
.navbar-links a.nav-link-ico svg { vertical-align: -2px; margin-right: 5px; }
/* Déclencheur de dropdown non-lien (Guides) : même habillage que les liens */
.nav-link-btn { background: none; border: none; padding: 0; font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--ink-60); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: color .15s; }
.nav-link-btn:hover, .nav-link-btn.is-active { color: var(--v); }

/* ── Menu : groupe de liens (milieu) + actions (droite) ── */
.navbar-nav-center { gap: 30px; }
.navbar-nav-right { flex-shrink: 0; gap: 14px; }

/* Liens centraux : soulignement animé (dégradé) au survol / actif */
.navbar-nav-center > li > a, .nav-link-btn { position: relative; padding-bottom: 5px; }
.navbar-nav-center > li > a::after, .nav-link-btn::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--v), var(--v-mid));
    transform: scaleX(0); transform-origin: center; transition: transform .2s ease;
}
.navbar-nav-center > li > a:hover::after, .navbar-nav-center > li > a.is-active::after,
.nav-dropdown:hover .nav-link-btn::after, .nav-link-btn.is-active::after { transform: scaleX(1); }

/* « Connexion » : bouton compte (pill) avec icône membre + fenêtre au survol */
.nav-account { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px;
    border: 1px solid var(--border); border-radius: 100px; font-size: 14px; font-weight: 600;
    color: var(--ink); transition: border-color .15s, color .15s, background .15s; }
.nav-account svg { color: var(--ink-35); transition: color .15s, transform .2s; }
.nav-dropdown:hover .nav-account, .nav-dropdown:focus-within .nav-account { border-color: var(--v-border); background: var(--v-soft); color: var(--v); }
.nav-dropdown:hover .nav-account svg, .nav-dropdown:focus-within .nav-account svg { color: var(--v); }
.nav-dropdown:hover .nav-account .caret { transform: rotate(180deg); }
.nav-account-head { padding: 14px 16px 10px; }
.nav-account-head .t { font-family: var(--font-head); font-size: 14px; font-weight: 800; letter-spacing: -0.3px; color: var(--ink); }
.nav-account-head .s { font-size: 12px; color: var(--ink-35); margin-top: 2px; line-height: 1.4; }

/* CTA principal du menu : icône + relief indigo */
.navbar-nav-right .btn-primary { font-size: 14px; padding: 10px 18px; gap: 7px; box-shadow: 0 4px 14px rgba(99,102,241,0.25); }
.navbar-nav-right .btn-primary:hover { box-shadow: 0 6px 20px rgba(99,102,241,0.35); }
.navbar-nav-right .btn-primary svg { transition: transform .2s; }
.navbar-nav-right .btn-primary:hover svg { transform: translateX(2px); }

.nav-dropdown { position: relative; }
.nav-dropdown-menu { display: none; position: absolute; top: 100%; right: 0; padding-top: 8px; z-index: 200; }
.nav-dropdown-menu.from-left { left: 0; right: auto; }
.nav-dropdown-menu-inner { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--sh-md); min-width: 200px; padding: 6px 0; }
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a { display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: 13px; font-weight: 500; color: var(--ink-60) !important; transition: background .12s, color .12s; }
.nav-dropdown-menu a:hover { background: var(--v-soft); color: var(--v) !important; }
.nav-dropdown-menu a svg { flex-shrink: 0; }
.nav-dropdown-sep { height: 1px; background: var(--border); margin: 4px 0; }

/* Menu « Types de projets » : six entrées aux libellés longs
   (« Modification de façade », « Division parcellaire · Bientôt ») qui
   frôlaient les bords dans la largeur du menu compte. Variante plus
   large et plus aérée, réservée à ce menu. */
.nav-dropdown-menu-inner.is-wide { min-width: 272px; padding: 9px 0; }
.nav-dropdown-menu-inner.is-wide a,
.nav-dropdown-menu-inner.is-wide .nav-di-static { display: flex; align-items: center; gap: 12px; padding: 11px 20px; font-size: 13.5px; font-weight: 500; color: var(--ink-60); }
.nav-dropdown-menu-inner.is-wide .nav-dropdown-sep { margin: 7px 14px; }

/* ── Menu mobile : burger + tiroir latéral ──────────────────────────
   Tiroir et non panneau déroulant : l'ancien dépliait onze liens sous
   la navbar, si bien que « Analyser mon projet » — la seule action qui
   compte — tombait sous la ligne de flottaison, atteignable après un
   défilement. Ici le CTA est posé dans un pied collant toujours visible,
   les guides sont repliés dans un accordéon natif <details>, et le fond
   ne défile plus derrière le menu ouvert. */
.navbar-burger { display: none; width: 42px; height: 42px; align-items: center; justify-content: center; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--ink); cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.navbar-burger:hover { border-color: var(--v); color: var(--v); background: var(--v-soft); }

/* Voile : assombrit la page et ferme au clic. `visibility` bascule sans
   délai à l'ouverture, après la transition à la fermeture — sinon le
   tiroir resterait focusable au clavier une fois refermé. */
.nav-scrim { position: fixed; inset: 0; z-index: 300; background: rgba(12,12,20,0.45); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s; }
.nav-scrim.is-open { opacity: 1; visibility: visible; transition: opacity .25s ease, visibility 0s; }

.nav-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 301; width: min(86vw, 372px);
    display: flex; flex-direction: column; background: var(--white); border-left: 1px solid var(--border);
    box-shadow: -18px 0 52px rgba(12,12,20,0.16); transform: translateX(100%); visibility: hidden;
    transition: transform .28s cubic-bezier(.4,0,.2,1), visibility 0s linear .28s; }
.nav-drawer.is-open { transform: none; visibility: visible; transition: transform .28s cubic-bezier(.4,0,.2,1), visibility 0s; }

.nav-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-shrink: 0; height: 64px; padding: 0 14px 0 22px; border-bottom: 1px solid var(--border); }
.nav-drawer-head .lbl { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--v); }
.nav-drawer-head .lbl::before { content: ''; width: 22px; height: 1px; background: var(--v); }
.nav-drawer-close { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--ink-60); cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.nav-drawer-close:hover { border-color: var(--v); color: var(--v); background: var(--v-soft); }

.nav-drawer-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 12px 14px 20px; }

/* Cibles tactiles : 50 px pour les entrées principales, 44 px pour les
   sous-entrées — l'ancien panneau descendait à 38 px sur les guides. */
.nav-di { display: flex; align-items: center; gap: 12px; position: relative; min-height: 50px; padding: 12px; border-radius: var(--r-md); font-size: 15px; font-weight: 600; color: var(--ink); transition: background .14s, color .14s; }
.nav-di svg { flex-shrink: 0; color: var(--ink-35); transition: color .14s, transform .18s; }
.nav-di .chev { margin-left: auto; color: var(--ink-35); opacity: .5; }
.nav-di:hover, .nav-di:focus-visible { background: var(--v-soft); color: var(--v); }
.nav-di:hover svg, .nav-di:focus-visible svg { color: var(--v); }
.nav-di:hover .chev { transform: translateX(2px); }
.nav-di.is-active { background: var(--v-pale); color: var(--v); }
.nav-di.is-active svg { color: var(--v); }
.nav-di.is-active::before { content: ''; position: absolute; left: 0; top: 11px; bottom: 11px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, var(--v), var(--v-mid)); }
.nav-di.is-danger { color: var(--red); }
.nav-di.is-danger svg { color: var(--red); }
.nav-di.is-danger:hover { background: rgba(220,38,38,0.07); color: var(--red); }

/* Accordéon guides : <details> natif, aucun JS à maintenir. */
.nav-acc summary { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 12px; border-radius: var(--r-md); font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer; list-style: none; transition: background .14s, color .14s; }
.nav-acc summary::-webkit-details-marker { display: none; }
.nav-acc summary svg { flex-shrink: 0; color: var(--ink-35); transition: color .14s, transform .2s; }
.nav-acc summary .chev { margin-left: auto; opacity: .6; }
.nav-acc summary:hover { background: var(--v-soft); color: var(--v); }
.nav-acc summary:hover svg { color: var(--v); }
.nav-acc[open] summary { color: var(--v); }
.nav-acc[open] summary > svg:first-child { color: var(--v); }
.nav-acc[open] summary .chev { transform: rotate(180deg); }
/* Filet en tirets = trait de cote du plan : rattache les guides à leur parent. */
.nav-acc-body { display: flex; flex-direction: column; margin: 2px 0 6px 17px; padding-left: 11px; border-left: 1px dashed rgba(99,102,241,0.38); }
.nav-ds { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 12px; border-radius: var(--r-sm); font-size: 14px; font-weight: 500; color: var(--ink-60); transition: background .14s, color .14s; }
.nav-ds:hover, .nav-ds:focus-visible { background: var(--v-soft); color: var(--v); }
.nav-ds.is-active { color: var(--v); font-weight: 600; }

.nav-dgrp { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-35); padding: 0 12px; margin: 18px 0 4px; }
.nav-dsep { height: 1px; background: var(--border); margin: 12px 12px 0; }

/* Pied collant : le CTA reste sous le pouce, quel que soit le défilement. */
.nav-drawer-foot { flex-shrink: 0; border-top: 1px solid var(--border); background: var(--white); padding: 14px 16px; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
/* `nowrap` : sur un écran étroit « Analyser mon projet » passait sur deux
   lignes et le bouton doublait de hauteur. */
.nav-drawer-foot .btn-primary { display: flex; width: 100%; justify-content: center; align-items: center; gap: 8px; color: #fff; font-size: 14.5px; padding: 14px 16px; white-space: nowrap; box-shadow: 0 6px 18px rgba(99,102,241,0.28); }
.nav-drawer-foot .btn-primary:hover { color: #fff; }
.nav-drawer-foot .meta { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 11px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.9px; text-transform: uppercase; color: var(--ink-35); }
.nav-drawer-foot .meta::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--green); }

/* Le fond ne défile plus derrière le tiroir (compensation de la barre de
   défilement gérée en JS pour éviter le saut de mise en page). */
body.nav-open { overflow: hidden; }

@media (min-width: 1025px) { .nav-scrim, .nav-drawer { display: none !important; } }
/* Menu riche (logo + 4 liens centrés + compte + CTA) : sous 1024px on
   bascule sur le burger pour éviter tout tassement/chevauchement. */
@media (max-width: 1024px) {
    .navbar-inner { display: flex; justify-content: space-between; }
    .navbar-links { display: none; }
    .navbar-burger { display: inline-flex; }
}
@media (prefers-reduced-motion: reduce) {
    .nav-drawer, .nav-scrim { transition-duration: .01ms !important; }
}

.footer { background: var(--ink); color: rgba(255,255,255,0.7); padding: 60px 0 32px; }
/* Les fractions ne sont pas décoratives : « Seine-Saint-Denis (93) » demande
   ~130 px, donc la colonne Départements doit faire au moins 2 × 140 + 16.
   Trop étroite, chaque nom se coupait sur deux lignes. */
.footer-grid { display: grid; grid-template-columns: 1.45fr 0.9fr 1.1fr 1.8fr 0.95fr; gap: 32px; margin-bottom: 40px; }
/* La colonne « Départements » est la seule à porter huit entrées : deux
   colonnes internes évitent qu'elle fasse le double de la hauteur des autres.
   ⚠ `display: block` obligatoire : `.footer ul` est un conteneur FLEX, et
   `columns` n'a aucun effet sur un flex — sans cette ligne les huit
   départements restaient empilés. L'écart entre lignes repasse donc par une
   marge, la gouttière du flex ne s'appliquant plus. */
/* ⚠ `.footer ul.footer-deps` et pas `.footer-deps` : `.footer ul` (0,1,1)
   l'emporte sur une simple classe (0,1,0), et son `display: flex` annulait
   `columns` en silence — les huit départements restaient empilés. */
.footer ul.footer-deps { display: block; columns: 2; column-gap: 16px; }
.footer ul.footer-deps li { break-inside: avoid; margin-bottom: 10px; }
.footer-contact { margin-top: 16px; font-size: 13px; line-height: 1.9; }
.footer-contact a { color: rgba(255,255,255,0.85); font-weight: 500; }
.footer-contact a:hover { color: #fff; text-decoration: underline; }
.footer h4 { color: #fff; font-family: var(--font-head); font-size: 14px; font-weight: 700; margin-bottom: 16px; }
.footer a { color: rgba(255,255,255,0.6); font-size: 13px; transition: color .15s; }
.footer a:hover { color: #fff; }
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 24px; display: flex; justify-content: space-between; font-size: 12px; color: rgba(255,255,255,0.4); }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.disclaimer { background: var(--off); border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px 20px; font-size: 12px; color: var(--ink-60); line-height: 1.5; }

.form-input { width: 100%; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--r-md); font-family: var(--font-body); font-size: 15px; transition: border-color .15s; outline: none; }
.form-input:focus { border-color: var(--v); box-shadow: 0 0 0 3px var(--v-soft); }
.form-label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.form-group { margin-bottom: 20px; }

/* ── Hero section ──────────────────────────── */
.hero { position: relative; overflow: hidden; padding: 100px 0 80px; background: var(--white); }
.hero .container { position: relative; z-index: 1; }
.hero-subtitle { font-size: 18px; color: var(--ink-60); max-width: 600px; margin: 16px 0 28px; line-height: 1.6; }
.hero-search { margin-top: 32px; max-width: 560px; }

/* ── Pill badge ───────────────────────────── */
.pill-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--v-pale); border: 1px solid rgba(99,102,241,0.22); border-radius: 100px; padding: 6px 16px; font-family: var(--font-mono); font-size: 11px; color: var(--v); letter-spacing: 0.3px; margin-bottom: 20px; }
.pill-sm { font-size: 10px; padding: 3px 10px; margin-bottom: 10px; }

/* ── Search bar ───────────────────────────── */
.search-bar { display: flex; gap: 8px; align-items: center; }
.search-input { flex: 1; padding: 14px 18px; border: 1px solid var(--border); border-radius: var(--r-lg); font-family: var(--font-body); font-size: 15px; outline: none; box-shadow: var(--sh-md); transition: border-color .15s; }
.search-input:focus { border-color: var(--v); }
.search-results, .suggestions-list {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--white); border: 1px solid var(--border); border-top: none;
    border-radius: 0 0 var(--r-md) var(--r-md); box-shadow: var(--sh-md);
    list-style: none; max-height: 300px; overflow-y: auto; z-index: 1000;
}
.search-results:empty, .suggestions-list:empty { display: none; }

/* ── Fonctionnalité à venir ───────────────────
   Un type de projet pas encore ouvert reste VISIBLE mais inerte : le retirer
   laisserait croire que le sujet n'est pas couvert, alors qu'il arrive. La carte
   est atténuée, non cliquable, et porte un badge explicite.
   `pointer-events: none` suffit visuellement mais pas au clavier : les cartes
   concernées sont rendues en <div> (jamais en <a>), donc hors parcours de
   tabulation — un lien désactivé uniquement en CSS resterait focusable. */
.card-bientot { opacity: .62; cursor: not-allowed; pointer-events: none; box-shadow: none !important; transform: none !important; }
.badge-bientot {
    display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .6px; text-transform: uppercase;
    color: var(--v); background: var(--v-pale); border: 1px solid var(--v-border);
    padding: 3px 9px; border-radius: 100px; font-weight: 600; white-space: nowrap;
}
/* Sur un élément de menu, le badge doit rester lisible sans casser la ligne. */
.badge-bientot-inline { font-size: 9px; padding: 2px 7px; margin-left: 6px; }
/* ⚠ Dans un parent FLEX, la marge s'ajoute à la gouttière : « Division parcellaire »
   et son badge étaient séparés de 16 px (10 de `gap` + 6 de marge) au lieu de 6.
   La marge ne sert qu'aux contextes en ligne — on la neutralise ici. */
.nav-ds .badge-bientot-inline,
.nav-di-static .badge-bientot-inline { margin-left: 0; }
.nav-bientot { opacity: .55; cursor: not-allowed; pointer-events: none; }

/* ── Le gras est indigo ───────────────────────────────────────────────
   Convention de toute la copie du site : ce qui est en gras dans un texte
   courant est ce qu'on veut faire retenir — hauteur maximale, gratuité,
   délai. L'indigo le fait ressortir sans changer de taille ni de casse.
   Le gras valait auparavant « encre plus foncée », ce qui ne se distinguait
   presque pas du texte autour. On ne touche QUE la couleur : imposer une
   graisse ici allégerait les gras volontairement lourds (titres de bandeau
   en 700, étiquettes en 900).

   ⚠ TROIS FAMILLES D'EXCEPTIONS, à ne pas retirer :
    1. les fonds sombres (pied de page) — l'indigo n'y passe pas le contraste ;
    2. ce qui porte déjà une couleur de SENS (vert favorable, rouge refus,
       ambre alerte, gris « non inclus ») — la couleur y est l'information ;
    3. les surfaces déjà indigo (boutons pleins, pastilles, tampons), où le
       gras doit rester blanc ou hériter. */
strong, b { color: var(--v-txt); }

/* 1. Fond sombre — le pied de page et tout bloc en inversion. */
.footer strong, .footer b { color: #fff; }

/* 2. Couleur de sens : elle prime sur la convention. Le gras d'une ligne
      « non incluse » doit rester gris, sinon une absence s'allume en violet. */
.ofu-list li.is-off strong, .ofu-list li.is-soon strong,
.badge-bientot strong, .badge-bientot b { color: inherit; }

/* 3. Surfaces déjà colorées, et navigation : le gras y hérite du bloc.
      Un libellé de menu n'est pas de la copie — il doit suivre l'état du
      lien (survol, actif), pas la convention éditoriale. */
.btn-primary strong, .btn-primary b,
.btn-dark strong, .btn-dark b,
.hero-pill strong, .hero-pill b,
.navbar strong, .navbar b { color: inherit; }

/* ── Bandeau de déploiement (components/deploiement.html.twig) ────────
   Ton informatif, pas alarmiste : ce n'est pas un avertissement mais une
   méthode de travail. D'où le fond indigo très pâle plutôt qu'un ambre
   d'alerte, et le filet vertical, qui rattache le bloc à ce qu'il explique. */
.depl { display: flex; align-items: flex-start; gap: 14px; padding: 16px 20px;
    background: var(--v-soft); border: 1px solid var(--v-border);
    border-left: 3px solid var(--v); border-radius: var(--r-md); }
.depl-ico { flex-shrink: 0; width: 30px; height: 30px; display: flex; align-items: center;
    justify-content: center; border-radius: 50%; background: var(--v-pale); color: var(--v); }
.depl-ico svg { width: 16px; height: 16px; }
.depl-txt { font-size: 13.5px; line-height: 1.6; color: var(--ink-60); }
.depl-txt b { display: block; color: var(--ink); font-weight: 700; font-size: 14px;
    letter-spacing: -0.2px; margin-bottom: 3px; }
.depl-txt strong { color: var(--v-txt); font-weight: 600; }

/* ── Case de renonciation au droit de rétractation (caisse dossier) ──
   Lisible, jamais noyée dans une note de bas de bloc : c'est une clause
   qui fait perdre un droit, elle doit se voir. La zone cliquable couvre
   tout le libellé (<label> englobant) — une case de 17 px seule est un
   piège sur téléphone. */
.renonc { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px;
    padding: 12px 14px; background: var(--off); border: 1px solid var(--border);
    border-radius: var(--r-md); cursor: pointer; text-align: left; }
.renonc:hover { border-color: var(--v-border); }
.renonc input { flex-shrink: 0; width: 17px; height: 17px; margin-top: 1px;
    accent-color: var(--v); cursor: pointer; }
.renonc span { font-size: 12.5px; line-height: 1.55; color: var(--ink-60); }
.renonc a { color: var(--v); text-decoration: underline; }

/* ── Pastille de fraîcheur du PLU (haut de page commune) ─────────────
   Verte comme les autres marqueurs de vérification du site : le vert y
   veut dire « contrôlé », pas « bien ». Ambre quand une révision est
   détectée — jamais rouge : la page reste juste, seule sa dernière
   version est en cours de relecture. */
.freshness { display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 600; padding: 4px 12px; border-radius: 100px;
    color: var(--green); background: var(--green-bg);
    border: 1px solid rgba(22,163,74,0.18); cursor: default; }
.freshness svg { width: 11px; height: 11px; }
.freshness--alerte { color: var(--amber); background: rgba(217,119,6,0.08);
    border-color: rgba(217,119,6,0.22); }

/* ── Provenance et date du règlement (components/plu_provenance) ─────
   Ton neutre et technique : ce bloc ne prévient de rien, il source. D'où
   l'étiquette monospace des pages « plan » plutôt qu'une couleur d'alerte.

   ⚠ `max-width` CALÉ SUR LA COLONNE DE TEXTE (.commune-lead = 700px).
   Sans lui, le bloc prenait les 1 190 px du conteneur pour un contenu qui
   en occupe 400 : une large bande grise vide, illisible comme intention.
   Si la largeur du chapô change, changer les deux ensemble. */
.plu-prov { display: flex; align-items: flex-start; gap: 12px;
    max-width: 700px; padding: 12px 16px;
    background: var(--white); border: 1px solid var(--border);
    border-left: 3px solid var(--v); border-radius: var(--r-md);
    margin: 26px 0 0; }
.plu-prov-ico { flex-shrink: 0; display: flex; width: 24px; height: 24px;
    align-items: center; justify-content: center; border-radius: 6px;
    background: var(--v-soft); color: var(--v); }
.plu-prov-ico svg { width: 13px; height: 13px; }
.plu-prov-corps { min-width: 0; }
.plu-prov-label { display: block; font-family: var(--font-mono);
    font-size: 9.5px; letter-spacing: 1.4px; text-transform: uppercase;
    color: var(--v); margin-bottom: 3px; }
/* Une seule ligne qui se replie proprement : les trois éléments (date,
   document, lien) sont de même niveau, séparés par un point médian posé
   en `::before` — un séparateur écrit en dur laisserait un point orphelin
   dès qu'un des éléments manque. */
.plu-prov-ligne { display: flex; flex-wrap: wrap; align-items: baseline;
    gap: 3px 9px; font-size: 13.5px; color: var(--ink-60); line-height: 1.5; }
.plu-prov-ligne > * + *::before { content: '·'; margin-right: 9px; color: var(--ink-12); }
/* La DATE est l'information neuve de ce bloc : elle porte l'accent.
   Le nom du document, lui, est déjà donné deux fois au-dessus. */
.plu-prov-date { color: var(--ink); font-weight: 600; }
.plu-prov-date time { white-space: nowrap; }
.plu-prov-date--nc { color: var(--ink-35); font-weight: 400; font-style: italic; }
.plu-prov-doc { color: var(--ink-60); }
.plu-prov-lien { display: inline-flex; align-items: center; gap: 4px;
    color: var(--v); font-weight: 600; white-space: nowrap; }
.plu-prov-lien:hover { text-decoration: underline; }
/* Pages projet : le chapô n'y nomme pas le document, le bloc reste donc
   complet — seulement resserré. */
.plu-prov--compact { margin-top: 20px; padding: 10px 14px; }
.plu-prov--compact .plu-prov-ligne { font-size: 12.5px; }
@media (max-width: 640px) {
    .plu-prov { padding: 11px 13px; gap: 10px; }
    .plu-prov-ligne { font-size: 12.5px; }
    /* Empilé sur téléphone : les points médians entre trois éléments qui
       passent à la ligne créent des orphelins en début de ligne. */
    .plu-prov-ligne { flex-direction: column; align-items: flex-start; gap: 4px; }
    .plu-prov-ligne > * + *::before { content: none; }
}

/* ── Communes en attente de dépouillement (page département) ─────────
   La Seine-et-Marne en aligne 507. En pastilles à plat, c'était dix écrans
   de mur : on remplace par un index replié, groupé par initiale, en texte
   simple — la pastille était un traitement trop lourd pour une liste dont
   chaque entrée mène à une page volontairement vide. */
.dep-todo { margin-top: 30px; border: 1px solid var(--border);
    border-radius: var(--r-md); background: var(--white); }
.dep-todo[open] { border-color: var(--v-border); }
.dep-todo-sum { display: flex; align-items: center; gap: 12px; padding: 14px 18px;
    cursor: pointer; list-style: none; user-select: none; }
.dep-todo-sum::-webkit-details-marker { display: none; }
.dep-todo-ico { flex-shrink: 0; display: flex; color: var(--v);
    transition: transform .18s; }
.dep-todo-ico svg { width: 15px; height: 15px; }
.dep-todo[open] .dep-todo-ico { transform: rotate(90deg); }
.dep-todo-lbl { flex: 1; font-size: 13.5px; color: var(--ink-60); line-height: 1.45; }
.dep-todo-lbl b { color: var(--ink); font-weight: 700; }
.dep-todo-act { flex-shrink: 0; font-family: var(--font-mono); font-size: 10.5px;
    letter-spacing: .8px; text-transform: uppercase; color: var(--v); }
.dep-todo[open] .dep-todo-act { opacity: 0; }
.dep-todo-note { margin: 0; padding: 0 18px 16px; font-size: 13px; line-height: 1.6;
    color: var(--ink-60); border-bottom: 1px solid var(--border); }
.dep-todo-note a { color: var(--v); font-weight: 600; }

/* Une rangée par lettre : l'initiale tient la marge, les noms coulent en
   colonnes. `column-count` est sans danger ici — rien ne se déplie à
   l'intérieur, donc pas de reflow sous le curseur. */
.dep-todo-grp { display: flex; gap: 16px; padding: 14px 18px;
    border-bottom: 1px solid var(--border); }
.dep-todo-grp:last-child { border-bottom: none; }
.dep-todo-ltr { flex-shrink: 0; width: 22px; font-family: var(--font-mono);
    font-size: 13px; font-weight: 700; color: var(--v); padding-top: 1px; }
.dep-todo-ul { flex: 1; margin: 0; padding: 0; list-style: none;
    column-width: 200px; column-gap: 26px; }
.dep-todo-ul li { break-inside: avoid; }
.dep-todo-ul a { display: flex; align-items: baseline; gap: 7px; padding: 3px 0;
    font-size: 13.5px; color: var(--ink-60); transition: color .12s; }
.dep-todo-ul a:hover { color: var(--v); }
.dep-todo-ul a span { font-family: var(--font-mono); font-size: 10px;
    color: var(--ink-35); }
@media (max-width: 640px) {
    .dep-todo-act { display: none; }
    .dep-todo-grp { padding: 12px 14px; gap: 10px; }
}

/* ── Bande de pastilles (départements, communes à venir) ─────────────
   Partagée : accueil (maillage départements) et page département (les
   communes pas encore dépouillées, listées sans promettre de règles). */
.hm-deps { display: flex; flex-wrap: wrap; gap: 8px; }
.hm-dep { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px;
    border: 1px solid var(--border); border-radius: 100px; font-size: 13px;
    font-weight: 500; color: var(--ink-60); transition: border-color .15s, color .15s; }
.hm-dep:hover { border-color: var(--v); color: var(--v); }
.hm-dep .cd { font-family: var(--font-mono); font-size: 10.5px; color: var(--v);
    background: var(--v-pale); padding: 1px 7px; border-radius: 4px; font-weight: 600; }

/* ── Step cards ───────────────────────────── */
.step-card { padding: 28px 24px; border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--white); position: relative; overflow: hidden; transition: border-color .18s, box-shadow .18s, transform .18s; }
.step-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--v), var(--v-mid)); opacity: 0; transition: opacity .18s; }
.step-card:hover { border-color: var(--v-border); box-shadow: 0 8px 30px rgba(99,102,241,0.1); transform: translateY(-2px); }
.step-card:hover::before { opacity: 1; }
.step-number { font-family: var(--font-mono); font-size: 32px; font-weight: 700; color: var(--v); letter-spacing: -1px; display: block; margin-bottom: 8px; }
.step-title { font-size: 17px; font-weight: 700; margin-bottom: 8px; }

/* ── Card extensions ──────────────────────── */
.card-hover { cursor: pointer; }
.card-body { display: flex; flex-direction: column; gap: 4px; }
.card-icon { font-size: 28px; margin-bottom: 12px; display: block; }
.card-title { font-family: var(--font-body); font-size: 15px; font-weight: 700; letter-spacing: -0.3px; }
.card-text { font-size: 13.5px; color: var(--ink-60); line-height: 1.5; }
.card-plan { text-align: center; }
.card-plan--featured { border-color: var(--v); box-shadow: 0 8px 30px rgba(99,102,241,0.12); }
.card-selectable { cursor: pointer; transition: border-color .15s, box-shadow .15s, opacity .2s; position: relative; }
.card-selectable:has(input:checked) { border-color: var(--v); box-shadow: 0 0 0 3px var(--v-soft); }
.card-selectable[data-checked="true"] .card-check { display: flex !important; }
.card-check { position: absolute; top: 12px; right: 12px; width: 24px; height: 24px; border-radius: 50%; background: var(--v); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* ── Stat blocks ──────────────────────────── */
.stat-block { padding: 24px; }
.stat-number { font-family: var(--font-mono); font-size: 42px; font-weight: 900; color: var(--v); letter-spacing: -2px; display: block; }
.stat-label { font-size: 14px; color: var(--ink-60); margin-top: 4px; display: block; }

/* ── Plan pricing ─────────────────────────── */
.plan-name { font-family: var(--font-mono); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--v); display: block; margin-bottom: 8px; }
.plan-price { margin: 16px 0; }
.plan-amount { font-family: var(--font-head); font-size: 42px; font-weight: 900; letter-spacing: -2px; }
.plan-period { font-size: 14px; }
.plan-features { list-style: none; text-align: left; margin: 20px 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: var(--ink-60); }
.plan-features li::before { content: "✓ "; color: var(--green); font-weight: 700; }

/* ── Feature blocks ───────────────────────── */
.feature-block { padding: 24px; }
.feature-title { font-size: 16px; font-weight: 700; margin-bottom: 8px; }

/* ── Backgrounds ──────────────────────────── */
.bg-white { background: var(--white); }
.bg-gray-50 { background: var(--off); }
.bg-indigo-50 { background: var(--v-pale); }
.bg-indigo { background: linear-gradient(135deg, var(--v), var(--v-mid)); }

/* ── Text utilities ───────────────────────── */
.text-center { text-align: center; }
.text-white { color: #fff !important; }
.text-lg { font-size: 17px; line-height: 1.6; }
.text-indigo { color: var(--v); }
.mono { font-family: var(--font-mono); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ── Spacing utilities ────────────────────── */
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 32px; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 32px; }
.mt-4 { margin-top: 48px; }
.py-4 { padding-top: 48px; padding-bottom: 48px; }

/* ── Container variants ───────────────────── */
.container-sm { max-width: 800px; }
.container-xs { max-width: 480px; }

/* ── Breadcrumbs ──────────────────────────── */
.breadcrumbs { font-size: 13px; color: var(--ink-35); display: flex; align-items: center; gap: 6px; }
.breadcrumbs a { color: var(--ink-60); }
.breadcrumbs a:hover { color: var(--v); }
.breadcrumb-sep { color: var(--ink-12); }
.breadcrumb-current { color: var(--ink); }

/* ── Prose (article content) ──────────────── */
.prose h2 { font-size: 22px; font-weight: 700; margin: 32px 0 12px; }
.prose h3 { font-size: 18px; font-weight: 700; margin: 24px 0 8px; }
.prose p { margin-bottom: 16px; color: var(--ink-60); line-height: 1.7; }
.prose ul, .prose ol { margin: 0 0 16px 20px; color: var(--ink-60); line-height: 1.8; }
.prose li { margin-bottom: 6px; }
.prose a { color: var(--v); text-decoration: underline; }
/* Articles de blog (src/Resources/blog) : chapô, tableaux de seuils, définitions. */
.prose .lead { font-size: 17px; color: var(--ink); line-height: 1.65; }
.prose table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 0 0 8px; display: block; overflow-x: auto; }
.prose thead th { background: var(--off); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-35); font-weight: 500; text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.prose tbody th { text-align: left; font-weight: 700; color: var(--ink); padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.prose td { padding: 10px 12px; color: var(--ink-60); border-bottom: 1px solid var(--border); vertical-align: top; line-height: 1.5; }
.prose small { display: block; font-size: 12.5px; color: var(--ink-35); margin: 0 0 20px; }
.prose dl { margin: 0 0 16px; }
.prose dt { font-weight: 700; color: var(--ink); margin-top: 12px; }
.prose dd { margin: 4px 0 0; color: var(--ink-60); line-height: 1.7; }

/* ── « Ils utilisent Karka » (components/ils_utilisent.html.twig) ───────── */
.iu-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px; }
.iu-item { display: flex; align-items: center; gap: 16px; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 12px 18px 12px 12px; background: var(--white); max-width: 520px; }
/* Tuile d'encre : le logo est en réserve blanche, il n'existe que sur fond sombre. */
.iu-tuile { flex-shrink: 0; width: 132px; height: 64px; border-radius: 10px; background: var(--ink); display: flex; align-items: center; justify-content: center; padding: 8px 12px; }
.iu-tuile img { width: 100%; height: 100%; object-fit: contain; display: block; }
.iu-txt { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.45; }
.iu-txt strong { color: var(--ink); font-weight: 700; }
.iu-lieu { font-family: var(--font-mono); font-size: 11px; color: var(--ink-35); letter-spacing: .3px; }
.iu-fait { color: var(--ink-60); font-size: 13.5px; margin-top: 2px; }
.iu--compact .iu-item { padding: 8px 14px 8px 8px; }
.iu--compact .iu-tuile { width: 104px; height: 50px; }

/* ── Tables ───────────────────────────────── */
.table-responsive { overflow-x: auto; margin-bottom: 24px; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { background: var(--off); font-weight: 600; text-align: left; padding: 10px 14px; border-bottom: 2px solid var(--border); }
.table td { padding: 10px 14px; border-bottom: 1px solid var(--border); }
.badge-zone { font-family: var(--font-mono); font-size: 12px; background: var(--v-pale); color: var(--v); padding: 2px 8px; border-radius: 4px; font-weight: 600; }

/* ── CTA box ──────────────────────────────── */
.cta-box { background: var(--off); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 40px 32px; }
.cta-box h3 { font-family: var(--font-head); font-size: 22px; font-weight: 800; margin-bottom: 8px; }

/* ── Button extensions ────────────────────── */
.btn-lg { padding: 16px 32px; font-size: 16px; }
.btn-full { width: 100%; justify-content: center; }
.btn-white { background: #fff; color: var(--v); }
.btn-white:hover { background: #f0f0f0; }
.btn-secondary { background: transparent; border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--ink-60); font-weight: 500; padding: 10px 20px; font-size: 14px; cursor: pointer; }
.btn-secondary:hover { border-color: var(--v); color: var(--v); }

/* ── Alerts ───────────────────────────────── */
.alert { padding: 12px 16px; border-radius: var(--r-md); font-size: 14px; margin-bottom: 16px; }
.alert-error { background: var(--red-bg); border: 1px solid rgba(220,38,38,0.18); color: var(--red); }
.alert-warning { background: var(--amber-bg); border: 1px solid rgba(217,119,6,0.18); color: #92400e; }
/* ⚠ `.alert-success` était UTILISÉ sans jamais être défini : le message le
   plus important du tunnel d'inscription — « votre compte est vérifié » —
   s'affichait dans une boîte sans couleur ni bordure, indiscernable du
   texte autour. Il manquait depuis le début. */
.alert-success { background: var(--green-bg); border: 1px solid rgba(22,163,74,0.2); color: #166534; }

/* ── Bandeau de compte vérifié ──────────────────────────────────────
   Un aplat, pas une teinte pâle : c'est le seul moment du parcours où le
   visiteur a franchi une étape qu'il ne refera plus, et il doit le voir
   sans le chercher. Le pendant discret (`.alert-success`) reste pour les
   confirmations ordinaires — un dossier envoyé, un réglage enregistré.

   ⚠ Le fond est le vert FONCÉ (#15803d), pas `--green` (#16a34a). Sur
   #16a34a, du blanc plafonne à 3,3:1 : conforme pour un gros titre, en
   dessous du seuil pour la ligne d'explication en 13,5 px. À #15803d le
   rapport monte à 4,9:1 et les deux lignes passent. Ne pas « éclaircir un
   peu » sans refaire ce calcul. */
.flash-verifie { display: flex; align-items: center; gap: 15px;
    background: #15803d; color: #fff; border-radius: var(--r-md);
    padding: 17px 20px; margin-bottom: 22px;
    box-shadow: 0 6px 22px rgba(21,128,61,0.28); }
.flash-verifie .ico { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,0.18); display: flex; align-items: center;
    justify-content: center; font-size: 20px; line-height: 1; }
/* ⚠ `color: #fff` explicite. Une règle globale `strong, b { color: var(--v-txt) }`
   colore TOUS les gras du site en indigo — sur l'aplat vert, le titre du
   bandeau sortait en violet, à peine lisible. Hériter ne suffit pas ici. */
.flash-verifie b { display: block; color: #fff; font-family: var(--font-head);
    font-size: 16px; font-weight: 800; letter-spacing: -0.3px; }
.flash-verifie span.txt { display: block; font-size: 13.5px; line-height: 1.5;
    color: rgba(255,255,255,0.92); margin-top: 2px; }
@media (max-width: 480px) {
    .flash-verifie { gap: 12px; padding: 15px 16px; }
    .flash-verifie .ico { width: 34px; height: 34px; font-size: 17px; }
    .flash-verifie b { font-size: 15px; }
}

/* ── Score results page ───────────────────── */
.score-value { font-family: var(--font-mono); }
.score-label { font-size: 13px; font-weight: 600; }
.score-green { background: var(--green-bg); border: 1px solid rgba(22,163,74,0.18); color: var(--green); }
.score-orange { background: var(--amber-bg); border: 1px solid rgba(217,119,6,0.18); color: var(--amber); }
.score-red { background: var(--red-bg); border: 1px solid rgba(220,38,38,0.18); color: var(--red); }
.result-section { margin-bottom: 32px; }
.result-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.result-item { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; padding: 10px; background: var(--off); border-radius: var(--r-sm); }
.result-icon { flex-shrink: 0; }
.steps-list { margin-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: var(--ink-60); }
.check-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.check-list li::before { content: "✓ "; color: var(--green); font-weight: 700; }

/* ── Lead form ────────────────────────────── */
.lead-form .form-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.form-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 32px; }

/* ── Wizard ───────────────────────────────── */
.wizard-progress { display: flex; gap: 4px; margin-bottom: 32px; }
.wizard-progress .wizard-step { flex: 1; padding: 10px 14px; background: var(--off); border-radius: var(--r-sm); font-size: 13px; color: var(--ink-35); font-weight: 500; }
.wizard-progress .wizard-step.active { background: var(--v-pale); color: var(--v); font-weight: 700; }
.wizard-progress .wizard-step.done { background: var(--green-bg); color: var(--green); font-weight: 600; }
.wizard-actions { display: flex; gap: 12px; justify-content: flex-end; }

/* ── Loader ───────────────────────────────── */
.loader { padding: 40px; }
.loader-spinner { width: 48px; height: 48px; border: 3px solid var(--border); border-top-color: var(--v); border-radius: 50%; animation: spin .8s linear infinite; margin: 0 auto 16px; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(99,102,241,0.3); } 50% { transform: scale(1.05); box-shadow: 0 0 0 16px rgba(99,102,241,0); } }

/* Loading steps (analyse progress) */
.loading-step { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: var(--r-md); font-size: 14px; color: var(--ink-35); background: var(--off); transition: all .3s ease; }
.loading-step--active { color: var(--ink); background: var(--v-soft); border: 1px solid var(--v-border); font-weight: 600; }
.loading-step--done { color: var(--green); background: var(--green-bg); border: 1px solid rgba(22,163,74,0.18); }
.loading-step-icon { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.loading-step-icon--pending { background: var(--border); color: var(--ink-35); font-size: 12px; font-weight: 700; }
.loading-step--active .loading-step-icon { background: none; }
.loading-step--done .loading-step-icon { background: var(--green); color: white; font-size: 14px; font-weight: 700; }

/* ── Dashboard nav (barre d'onglets bien visible) ── */
.dashboard-nav { display: flex; flex-wrap: wrap; gap: 6px; width: fit-content; max-width: 100%; margin-bottom: 28px; background: var(--off); border: 1px solid var(--border); border-radius: 100px; padding: 5px; box-shadow: var(--sh-sm); }
.dashboard-nav-link { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border-radius: 100px; font-size: 14px; font-weight: 600; color: var(--ink-60); transition: background .15s, color .15s, box-shadow .15s; }
.dashboard-nav-link svg { width: 15px; height: 15px; opacity: .85; }
.dashboard-nav-link:hover { color: var(--v); background: var(--v-soft); }
.dashboard-nav-link.active { background: linear-gradient(135deg, var(--v), var(--v-mid)); color: #fff; box-shadow: 0 4px 14px rgba(99,102,241,0.3); }
.dashboard-nav-link.active svg { opacity: 1; }

/* ── Onglets de l'espace pro sur téléphone ───────────────────────────
   Cinq onglets à 150 px ne tiennent pas dans 342 : `flex-wrap` les
   empilait sur TROIS lignes dans un conteneur en forme de gélule, ce qui
   donnait une grosse pastille informe occupant 130 px de haut avant le
   moindre chiffre. Une barre qui défile horizontalement est le geste
   attendu sur mobile, et elle tient sur une ligne.

   ⚠ Le rayon passe de 100px à `--r-md` : une gélule qui déborde de
   l'écran n'a plus de forme lisible — on ne voit que sa tranche droite. */
@media (max-width: 720px) {
    .dashboard-nav { display: flex; flex-wrap: nowrap; width: 100%;
        overflow-x: auto; overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
        border-radius: var(--r-md); margin-bottom: 18px;
        /* La barre de défilement masquée : elle chevaucherait les onglets
           sur 4 px de haut. Le débordement reste perceptible au geste. */
        scrollbar-width: none; }
    .dashboard-nav::-webkit-scrollbar { display: none; }
    .dashboard-nav-link { flex: 0 0 auto; scroll-snap-align: start;
        padding: 9px 14px; font-size: 13.5px; }
}

/* ── Département heading ──────────────────── */
.dep-heading { font-size: 20px; font-weight: 700; letter-spacing: -0.5px; margin: 32px 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--v-pale); }

/* ── Pagination ───────────────────────────── */
.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
.pagination a, .pagination span { padding: 6px 12px; border-radius: var(--r-sm); font-size: 14px; color: var(--ink-60); border: 1px solid var(--border); }
.pagination a:hover { border-color: var(--v); color: var(--v); }
.pagination .active { background: var(--v); color: #fff; border-color: var(--v); }

/* ── Badges (statut leads) ────────────────── */
.badge { display: inline-block; padding: 2px 10px; border-radius: 100px; font-size: 12px; font-weight: 600; letter-spacing: 0.3px; }
.badge-nouveau { background: var(--v-pale); color: var(--v); }
.badge-envoye_au_pro { background: rgba(217,119,6,0.1); color: var(--amber); }
.badge-vu_par_pro { background: rgba(217,119,6,0.1); color: var(--amber); }
.badge-contacte { background: rgba(22,163,74,0.1); color: var(--green); }
.badge-converti { background: var(--green-bg); color: var(--green); }
.badge-perdu { background: rgba(220,38,38,0.07); color: var(--red); }

/* ── Commune link list ────────────────────── */
.commune-link { display: block; padding: 8px 0; font-size: 14px; color: var(--ink-60); border-bottom: 1px solid var(--border); transition: color .15s; }
.commune-link:hover { color: var(--v); }

@media (max-width: 900px) {
    .hero-grid-2col { grid-template-columns: 1fr !important; }
    .hero-demo-card { display: none !important; }
    .hero-svg-deco { display: none !important; }
}
@media (max-width: 768px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
    .footer ul.footer-deps { columns: 1; }
    .navbar-links { display: none; }
    .navbar-burger { display: inline-flex; }
    .hero { padding: 60px 0 48px; }
    .search-bar { flex-direction: column; }
    .lead-form .form-row { grid-template-columns: 1fr; }
    .wizard-progress { flex-direction: column; }
    .footer-bottom { flex-direction: column; gap: 8px; }
}
.hidden { display: none !important; }

/* ── FAQ details ─────────────────────────── */
details[open] summary svg { transform: rotate(180deg); }
details[open] { border-color: var(--v-border); }
details summary::-webkit-details-marker { display: none; }

@media (max-width: 768px) {
    .guide-regles-grid { grid-template-columns: 1fr !important; }
}

/* ── Bandeau cookies ──────────────────────────────────────────────────
   Ancré en bas, jamais en surimpression plein écran : le contenu reste
   lisible et accessible sans avoir à choisir. Le mur de consentement
   n'est pas exigé ici (le refus ne prive de rien), et il coûterait des
   visiteurs venus d'une recherche.

   ⚠ Les deux boutons sont STRICTEMENT de même taille, même hauteur, même
   rayon, côte à côte. Refuser doit être aussi facile qu'accepter : c'est
   le point précis sur lequel la CNIL a sanctionné, pas la présence du
   bandeau. Ne pas « améliorer » en réduisant Refuser ou en le passant en
   lien texte. */
/* ⚠ Ancré en bas à DROITE, ni centré ni à gauche. Centré sur 640 px il
   recouvrait la barre de recherche de l'accueil ; à gauche, il en mangeait
   encore le champ. À droite il ne couvre que l'illustration du hero, qui
   est décorative. Un bandeau qui masque le premier geste du visiteur coûte
   des conversions, quelle que soit sa réponse. Vérifié en 1536×674. */
.cbn { position: fixed; right: 20px; bottom: 20px; z-index: 200;
    width: calc(100% - 40px); max-width: 420px; padding: 20px 22px;
    background: var(--white); border: 1px solid var(--border);
    border-radius: var(--r-xl); box-shadow: 0 20px 56px rgba(12,12,20,0.16); }
.cbn[hidden] { display: none; }
.cbn-label { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cbn-label span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--v); }
.cbn-label i { display: block; width: 22px; height: 1px; background: var(--v); }
.cbn p { font-size: 13.5px; line-height: 1.65; color: var(--ink-60); margin: 0 0 16px; }
.cbn p a { color: var(--v); text-decoration: underline; }
.cbn-actions { display: flex; gap: 10px; }
.cbn-actions button { flex: 1 1 0; min-height: 44px; padding: 12px 18px; border: none;
    border-radius: var(--r-md); font-family: inherit; font-size: 14.5px; font-weight: 700;
    cursor: pointer; transition: opacity .15s; }
.cbn-actions button:hover { opacity: .9; }
.cbn-refuser { background: var(--ink); color: #fff; }
.cbn-accepter { background: linear-gradient(135deg, var(--v), var(--v-mid)); color: #fff; }
.cbn-lien { background: none; border: none; padding: 0; font: inherit; color: inherit;
    text-decoration: underline; cursor: pointer; }
@media (max-width: 480px) {
    .cbn { right: 10px; bottom: 10px; width: calc(100% - 20px); padding: 18px; }
    .cbn-actions { flex-direction: column; }
}

/* ── Styles complémentaires (historique de ce fichier) ─────────────── */
/* Autocomplete suggestions dropdown */
.suggestions-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--r-md) var(--r-md);
    box-shadow: var(--sh-md);
    list-style: none;
    max-height: 300px;
    overflow-y: auto;
    z-index: 50;
}

/* Wizard step transitions */
.wizard-step {
    animation: fadeIn .3s ease;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Loading spinner */
.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--v);
    border-radius: 50%;
    animation: spin .8s linear infinite;
    margin: 0 auto;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
