/* Marchés en Vue — feuille de style unique, sans framework. Thème « Radar » : sombre, accent turquoise. */

/* Polices hébergées sur le site (pas d'appel à Google : rien à déclarer côté RGPD). Licence SIL OFL 1.1. */
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-wght-normal-Gz7AlRl.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Sora"; src: url("../fonts/sora-latin-wght-normal-owdio4Q.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-latin-500-normal-l4pIovd.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-latin-700-normal-dbwVwue.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
    --fond: #0B1220;
    --surface: #111A2C;
    --surface-2: #0E1626;
    --surface-3: #141E33;
    --trait: #1E2A40;
    --trait-fort: #2A3954;
    --texte: #E6EDF7;
    --texte-2: #A9B6C9;
    --texte-3: #8C9BB2;
    --acc: #2DD4BF;
    --acc-clair: #5EEAD4;
    --acc-fond: #0F2A2A;
    --acc-bord: #1E3A44;
    --sur-acc: #04201C;
    --ambre: #FBBF24;
    --ambre-fond: #2A2210;
    --rouge: #F87171;
    --rouge-fond: #2A1414;
    --rayon: 12px;
    --police: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --titres: "Sora", "Inter", system-ui, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
    color-scheme: dark;
    font-family: var(--police);
    color: var(--texte);
    background: var(--fond);
    line-height: 1.55;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--fond); }
a { color: var(--acc-clair); }
a:hover { color: #99F6E4; }
h1, h2, h3 { font-family: var(--titres); letter-spacing: -.01em; }
h1 { font-size: 1.9rem; line-height: 1.15; margin: 0 0 .35rem; }
h2 { font-size: 1.25rem; margin: 2rem 0 .75rem; }
:focus-visible { outline: 3px solid var(--acc); outline-offset: 3px; }
::selection { background: var(--acc); color: var(--sur-acc); }

.conteneur { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.principal { padding-top: 2rem; padding-bottom: 4rem; min-height: 70vh; }
.principal--large { padding-top: 0; }
.sous-titre { color: var(--texte-2); margin: 0 0 1.5rem; }
.mono { font-family: var(--mono); }
.acc { color: var(--acc); }

/* En-tête */
.entete { border-bottom: 1px solid var(--trait); background: rgba(11, 18, 32, .85); backdrop-filter: blur(10px);
          position: sticky; top: 0; z-index: 30; }
.entete__ligne { display: flex; align-items: center; justify-content: space-between; gap: .75rem 1rem; min-height: 64px; flex-wrap: wrap; padding-top: .5rem; padding-bottom: .5rem; }
.logo { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--titres); font-weight: 700; font-size: 1.2rem;
        color: var(--texte); text-decoration: none; }
.logo:hover { color: var(--texte); }
.logo__radar { width: 32px; height: 32px; flex: none; }
.nav { display: flex; gap: .25rem; align-items: center; flex-wrap: wrap; }
.nav a { color: var(--texte-2); text-decoration: none; font-size: .95rem; padding: .55rem .8rem; border-radius: 8px;
         transition: color .2s, background-color .2s; }
.nav a:hover { color: var(--texte); background: var(--surface-3); }
.nav a[aria-current="page"] { color: var(--texte); background: var(--surface-3); box-shadow: inset 0 -2px 0 var(--acc); }
.nav a.bouton { color: var(--sur-acc); padding: .6rem 1rem; }
.nav a.bouton:hover { color: var(--sur-acc); background: var(--acc); }
.nav__discret { color: var(--texte-3) !important; }

/* Boutons : légère montée, halo et reflet au survol */
.bouton, button.bouton {
    position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    background: var(--acc); color: var(--sur-acc) !important; border: 1px solid transparent;
    border-radius: 10px; padding: .7rem 1.15rem; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}
.bouton::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; pointer-events: none;
                 background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
                 transform: skewX(-20deg); transition: left .6s ease; }
.bouton:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -10px var(--acc); }
.bouton:hover::after { left: 130%; }
.bouton:active { transform: translateY(0) scale(.98); }
.bouton[disabled] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.bouton__fleche { transition: transform .2s ease; }
.bouton:hover .bouton__fleche { transform: translateX(4px); }
.bouton--grand { padding: .95rem 1.5rem; font-size: 1.05rem; }
.bouton--petit { padding: .45rem .85rem; font-size: .9rem; border-radius: 8px; }
.bouton.bouton--clair { background: transparent; color: var(--texte) !important; border-color: var(--trait-fort); font-weight: 500; }
.bouton.bouton--clair::after { display: none; }
.bouton.bouton--clair:hover { border-color: var(--acc); background: rgba(45, 212, 191, .08); box-shadow: none; }
.bouton.bouton--danger { background: var(--rouge); color: #2A0808 !important; }
.bouton.bouton--danger:hover { box-shadow: 0 12px 30px -10px var(--rouge); }

/* Messages */
.flash { padding: .8rem 1rem; border-radius: var(--rayon); margin-bottom: 1rem; border: 1px solid; }
.flash--succes { background: var(--acc-fond); color: var(--acc-clair); border-color: var(--acc-bord); }
.flash--erreur { background: var(--rouge-fond); color: #FCA5A5; border-color: #4A1D1D; }
.bandeau { background: var(--ambre-fond); color: #FDE68A; border: 1px solid #4A3A12; padding: .9rem 1rem; border-radius: var(--rayon); margin-bottom: 1.25rem; }
.bandeau a { color: var(--ambre); font-weight: 600; }

/* Cartes de marchés */
.liste { display: grid; gap: .75rem; }
.carte {
    background: var(--surface); border: 1px solid var(--trait); border-radius: 16px;
    padding: 1.1rem 1.2rem; display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 1.1rem;
    transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}
.carte:hover { border-color: var(--trait-fort); background: #131D31; }
.carte--suivie { border-color: var(--acc-bord); box-shadow: inset 3px 0 0 var(--acc); }
.score {
    width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
    font-family: var(--mono); font-weight: 700; font-size: 1.2rem; color: var(--texte-3); border: 3px solid var(--trait-fort);
}
.score--haut { color: var(--acc); border-color: var(--acc); box-shadow: 0 0 24px -8px var(--acc); }
.score--moyen { color: var(--ambre); border-color: var(--ambre); }
.carte__titre { font-weight: 600; margin: 0 0 .3rem; font-size: 1.02rem; }
.carte__meta { color: var(--texte-2); font-size: .9rem; display: flex; gap: .35rem 1rem; flex-wrap: wrap; }
.carte__raisons { margin: .6rem 0 .75rem; padding: 0; list-style: none; display: flex; gap: .35rem; flex-wrap: wrap; }
.carte__raisons li { background: var(--surface-3); border: 1px solid var(--trait); border-radius: 999px; padding: .1rem .65rem; font-size: .8rem; color: var(--texte-2); }
.carte__actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.carte__actions form { margin: 0; }
.carte__actions select { font: inherit; font-size: .9rem; padding: .4rem .5rem; border-radius: 8px; border: 1px solid var(--trait-fort);
                         background: var(--fond); color: var(--texte); }
.urgent { color: var(--rouge); font-weight: 600; }
.estime { font-style: italic; }

.vide { background: var(--surface-2); border: 1px dashed var(--trait-fort); border-radius: var(--rayon); padding: 2rem; text-align: center; color: var(--texte-2); }

/* Tableaux */
.tableau { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); overflow: hidden; font-size: .93rem; }
.tableau th, .tableau td { text-align: left; padding: .65rem .8rem; border-bottom: 1px solid var(--trait); vertical-align: top; }
.tableau th { background: var(--surface-2); font-weight: 600; color: var(--texte-2); }
.tableau tbody tr { transition: background-color .15s; }
.tableau tbody tr:hover { background: var(--surface-3); }
.tableau td.nombre { text-align: right; white-space: nowrap; font-family: var(--mono); }
.defile { overflow-x: auto; }

/* Formulaires */
.formulaire { background: var(--surface); border: 1px solid var(--trait); border-radius: 16px; padding: 1.6rem; max-width: 680px; }
.formulaire > div, .formulaire fieldset > div { margin-bottom: 1.1rem; }
.formulaire label { display: block; font-weight: 600; margin-bottom: .35rem; }
.formulaire input[type=text], .formulaire input[type=email], .formulaire input[type=password], .formulaire input[type=number],
.formulaire input[type=search], .formulaire select, .formulaire textarea {
    width: 100%; padding: .7rem .8rem; border: 1px solid var(--trait-fort); border-radius: 10px; font: inherit;
    background: var(--fond); color: var(--texte); transition: border-color .15s, box-shadow .15s;
}
.formulaire input:focus, .formulaire select:focus, .formulaire textarea:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px rgba(45, 212, 191, .2); }
.formulaire input::placeholder { color: var(--texte-3); }
.formulaire input[type=checkbox] { accent-color: var(--acc); width: 1.05rem; height: 1.05rem; vertical-align: -2px; }
.formulaire input[type=checkbox] + label, .formulaire .case label { display: inline; font-weight: 400; }
.formulaire .form-help, .formulaire .help-text { color: var(--texte-3); font-size: .86rem; margin-top: .3rem; }
.formulaire ul { color: var(--rouge); margin: .25rem 0; padding-left: 1.2rem; font-size: .9rem; }
.formulaire fieldset { border: 0; padding: 0; margin: 0; }
.separateur { border: 0; border-top: 1px solid var(--trait); margin: 1.5rem 0; }
.offre__prix { font-size: 1.1rem; margin: 0; color: var(--texte-2); }
.offre__prix strong { font-family: var(--titres); font-size: 2.6rem; color: var(--texte); }
.offre__liste { padding-left: 1.2rem; margin: 1rem 0 1.25rem; color: var(--texte-2); }
.offre__liste li { margin-bottom: .35rem; }
.offre__liste li::marker { color: var(--acc); }
.ligne-alerte { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 0; }

/* Pied de page */
.pied { color: var(--texte-3); font-size: .82rem; padding-top: 1.75rem; padding-bottom: 2rem; border-top: 1px solid var(--trait); }
.pied__liens { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-bottom: .5rem; }
.pied__liens a { color: var(--texte-2); }

/* Bandeau d'essai fixé en bas (visiteurs) */
.bandeau-essai { position: sticky; bottom: 0; z-index: 40; padding: .75rem 1rem; background: rgba(11, 18, 32, .9);
                 backdrop-filter: blur(10px); border-top: 1px solid var(--acc-bord); }
.bandeau-essai__ligne { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; justify-content: space-between; }
.bandeau-essai__texte { margin: 0; display: flex; align-items: center; gap: .6rem; font-size: .95rem; }
.bandeau-essai__texte span { color: var(--texte-2); }
.bandeau-essai .bouton { flex: 1 1 auto; max-width: 320px; }
.point-live { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--acc); animation: clignote 1.6s ease-in-out infinite; }

/* ---------- Accueil et page « Pourquoi » ---------- */
.etiquette { display: inline-flex; align-items: center; gap: .5rem; align-self: flex-start; font-family: var(--mono); font-size: .8rem;
             letter-spacing: .08em; color: var(--acc); border: 1px solid var(--acc-bord); background: #0E1E2A; padding: .4rem .85rem; border-radius: 999px; }
.accueil-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 3rem; align-items: center; padding: 4rem 0 3rem; }
.accueil-hero__texte { display: flex; flex-direction: column; gap: 1.3rem; }
.accueil-hero h1 { font-size: clamp(2.2rem, 5vw, 3.7rem); line-height: 1.05; letter-spacing: -.025em; margin: 0; }
.accueil-hero p { margin: 0; font-size: 1.12rem; color: var(--texte-2); }
.accueil-hero .petit { font-size: .9rem; color: var(--texte-3); }
.boutons { display: flex; flex-wrap: wrap; gap: .75rem; }

.panneau { background: var(--surface); border: 1px solid var(--trait); border-radius: 20px; padding: 1.5rem;
           box-shadow: 0 40px 80px -40px rgba(45, 212, 191, .35); display: flex; flex-direction: column; gap: 1rem; }
.panneau__titre { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap;
                  font-family: var(--titres); font-weight: 600; }
.panneau__titre small { font-family: var(--mono); font-size: .72rem; color: var(--texte-3); font-weight: 500; }
.panneau__note { margin: 0; font-size: .82rem; color: var(--texte-3); }
.legende { display: flex; flex-wrap: wrap; gap: 1.1rem; font-size: .84rem; color: var(--texte-2); }
.legende span { display: inline-flex; align-items: center; gap: .5rem; }
.legende i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--acc-bord); }
.legende i.ligne { width: 14px; height: 3px; background: var(--acc); }
.graphique { width: 100%; height: auto; display: block; }

.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 1px; background: var(--trait);
            border: 1px solid var(--trait); border-radius: 16px; overflow: hidden; margin: 0 0 4rem; }
.chiffres--cartes { gap: 1rem; background: none; border: 0; overflow: visible; }
.chiffre { background: var(--surface-2); padding: 1.6rem 1.5rem; display: flex; flex-direction: column; gap: .35rem; }
.chiffres--cartes .chiffre { border: 1px solid var(--trait); border-radius: 16px; }
.chiffre strong { font-family: var(--titres); font-size: 2.3rem; color: var(--acc); line-height: 1.1; }
.chiffre span { color: #C9D4E5; font-size: .95rem; }
.chiffre small { color: var(--texte-3); font-size: .76rem; }

.section { margin: 0 0 4.5rem; }
.section__tete { display: flex; flex-direction: column; gap: .6rem; max-width: 760px; margin-bottom: 1.75rem; }
.section__tete--centre { text-align: center; align-items: center; margin-left: auto; margin-right: auto; }
.section__tete h2 { font-size: clamp(1.6rem, 3.4vw, 2.35rem); margin: 0; }
.section__tete p { margin: 0; color: var(--texte-2); font-size: 1.05rem; }

.apercu { background: var(--surface); border: 1px solid var(--trait); border-radius: 18px; overflow: hidden; max-width: 1080px; margin: 0 auto; }
.apercu__barre { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; align-items: center; padding: .85rem 1.2rem;
                 border-bottom: 1px solid var(--trait); background: var(--surface-2); font-family: var(--mono); font-size: .8rem; color: var(--texte-2); }
.pastille { font-family: var(--police); font-size: .8rem; padding: .3rem .6rem; border-radius: 6px; background: var(--acc-fond); color: var(--acc-clair); }
.pastille--neutre { background: #1A2336; color: var(--texte-2); }
.apercu__ligne { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 1.2rem; padding: 1.2rem; border-bottom: 1px solid #1A2438;
                 align-items: center; transition: background-color .2s; }
.apercu__ligne:last-child { border-bottom: 0; }
.apercu__ligne:hover { background: #142036; }
.apercu__ligne p { margin: 0; }
.apercu__ligne .titre { font-weight: 600; }
.apercu__ligne .meta { font-size: .84rem; color: var(--texte-2); margin-top: .25rem; }
.apercu__ligne .raison { font-size: .84rem; color: var(--texte-3); margin-top: .25rem; }

.grille-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 1rem; }
.grille-cartes--larges { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.tuile { background: var(--surface-2); border: 1px solid var(--trait); border-radius: 16px; padding: 1.6rem; display: flex; flex-direction: column; gap: .7rem;
         transition: transform .25s ease, border-color .25s ease, background-color .25s ease; }
.tuile:hover { transform: translateY(-4px); border-color: var(--acc); background: #0F1828; }
.tuile h3 { margin: 0; font-size: 1.2rem; }
.tuile p { margin: 0; color: var(--texte-2); }
.tuile__num { font-family: var(--mono); color: var(--acc); font-size: .9rem; }
.tuile__icone { width: 30px; height: 30px; color: var(--acc); transition: transform .3s ease; }
.tuile:hover .tuile__icone { transform: rotate(-8deg) scale(1.1); }

.deux-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 3rem; align-items: center; }
.deux-colonnes p { color: var(--texte-2); font-size: 1.05rem; }
.bande { background: var(--surface-2); border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); padding: 4.5rem 0; margin: 0 0 4.5rem; }
.bande .section { margin: 0; }

.jauge { display: flex; flex-direction: column; gap: .5rem; }
.jauge__tete { display: flex; justify-content: space-between; font-size: .95rem; }
.jauge__tete b { font-family: var(--mono); }
.jauge__piste { height: 16px; background: #1A2336; border-radius: 999px; overflow: hidden; }
.jauge__barre { height: 100%; border-radius: 999px; background: var(--acc); animation: remplit 1.4s .4s cubic-bezier(.2, .8, .2, 1) both; }
.jauge__barre--ambre { background: var(--ambre); animation-delay: .8s; }

.encart-tarif { border: 1px solid var(--acc-bord); background: #0E1E2A; border-radius: 20px; padding: 2.5rem; display: flex; flex-wrap: wrap;
                gap: 1.75rem; align-items: center; justify-content: space-between; margin-bottom: 4rem; }
.encart-tarif--centre { flex-direction: column; text-align: center; }
.encart-tarif h2 { margin: 0; font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
.encart-tarif p { margin: 0; color: var(--texte-2); }
.encart-tarif .prix { font-family: var(--titres); font-size: 3.2rem; font-weight: 700; color: var(--texte); line-height: 1.1; margin: .25rem 0; }
.encart-tarif .prix small { font-size: 1.1rem; font-weight: 400; color: var(--texte-2); }

.jalons { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 1.25rem; }
.jalons b { display: block; font-family: var(--mono); font-size: .8rem; color: var(--acc); font-weight: 500; margin-bottom: .25rem; }
.jalons strong { display: block; font-family: var(--titres); margin-bottom: .3rem; }
.jalons p { margin: 0; color: var(--texte-2); font-size: .95rem; }

.faq { max-width: 860px; display: flex; flex-direction: column; gap: .75rem; }
.faq details { background: var(--surface-2); border: 1px solid var(--trait); border-radius: 14px; padding: 1.1rem 1.25rem; transition: border-color .2s; }
.faq details:hover, .faq details[open] { border-color: var(--trait-fort); }
.faq summary { cursor: pointer; font-weight: 600; font-size: 1.05rem; }
.faq details p { margin: .75rem 0 0; color: var(--texte-2); }
.sources { color: var(--texte-3); font-size: .82rem; }

/* Animations (coupées si la personne a demandé moins d'animations) */
@keyframes balayage { to { transform: rotate(360deg); } }
@keyframes ping { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.5); opacity: 0; } }
@keyframes trace { from { stroke-dashoffset: 1400; } to { stroke-dashoffset: 0; } }
@keyframes monte { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes apparait { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fondu { from { opacity: 0; } to { opacity: 1; } }
@keyframes clignote { 50% { opacity: .35; } }
@keyframes remplit { from { width: 0; } }
.anim-balayage { transform-origin: 16px 16px; animation: balayage 4s linear infinite; }
.anim-ping { transform-origin: center; transform-box: fill-box; animation: ping 2.4s ease-out infinite; }
.anim-trace { stroke-dasharray: 1400; animation: trace 2.4s .4s ease-out both; }
.anim-zone { animation: fondu 1.2s 1.6s ease-out both; }
.anim-barre { transform-origin: bottom; transform-box: fill-box; animation: monte .9s cubic-bezier(.2, .8, .2, 1) both; }
.anim-apparait { animation: apparait .7s ease-out both; }
.delai-1 { animation-delay: .1s; } .delai-2 { animation-delay: .2s; } .delai-3 { animation-delay: .3s; }
.delai-4 { animation-delay: .4s; } .delai-5 { animation-delay: .5s; } .delai-6 { animation-delay: .6s; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (max-width: 560px) {
    .carte { grid-template-columns: 1fr; }
    .score { width: 52px; height: 52px; font-size: 1.05rem; }
    .apercu__ligne { grid-template-columns: 52px minmax(0, 1fr); gap: .9rem; }
    .apercu__ligne .score { width: 52px; height: 52px; }
    .accueil-hero { padding-top: 1rem; gap: 2rem; }
    .principal { padding-top: 1.25rem; }
    .encart-tarif { padding: 1.75rem; }
    .bandeau-essai .bouton { max-width: none; width: 100%; }
}

/* Sélecteur de départements : une région à la fois, des tuiles à cocher */
.champ-departements { margin-bottom: 1.1rem; }
.departements { border: 1px solid var(--trait-fort); border-radius: 14px; padding: 1rem; background: var(--fond); display: flex; flex-direction: column; gap: .9rem; }
.departements__resume { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; align-items: baseline; font-size: .92rem; color: var(--texte-2); }
.departements__resume strong { color: var(--texte); }
.departements__liste { font-family: var(--mono); color: var(--acc); }
.departements__regions { display: flex; flex-wrap: wrap; gap: .4rem; }
.onglet-region { flex: none; display: inline-flex; align-items: center; gap: .45rem; font: inherit; font-size: .88rem; padding: .5rem .8rem; border-radius: 999px;
                 border: 1px solid var(--trait-fort); background: transparent; color: var(--texte-2); cursor: pointer; transition: border-color .15s, color .15s, background-color .15s; }
.onglet-region:hover { color: var(--texte); border-color: var(--acc-bord); }
.onglet-region[aria-selected="true"] { color: var(--sur-acc); background: var(--acc); border-color: var(--acc); font-weight: 600; }
.onglet-region__compte { font-family: var(--mono); font-size: .75rem; padding: 0 .4rem; border-radius: 999px; background: var(--acc-fond); color: var(--acc-clair); }
.onglet-region[aria-selected="true"] .onglet-region__compte { background: rgba(4, 32, 28, .2); color: var(--sur-acc); }
.departements__region { display: flex; flex-direction: column; gap: .75rem; }
.departements__tete { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; }
.departements__nom-region { font-weight: 600; font-family: var(--titres); }
.departements__compte { font-family: var(--mono); font-size: .82rem; color: var(--acc); margin-right: .75rem; }
.departements__grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .5rem; }
.formulaire .case-dep { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; margin: 0; min-height: 64px;
                        padding: .55rem .7rem; border: 1px solid var(--trait-fort); border-radius: 10px; background: var(--surface-2);
                        cursor: pointer; font-weight: 400; transition: transform .15s ease, border-color .15s, background-color .15s; }
.formulaire .case-dep:hover { transform: translateY(-2px); border-color: var(--acc-bord); }
.case-dep input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.case-dep__num { font-family: var(--mono); font-weight: 700; font-size: 1.05rem; color: var(--texte); }
.case-dep__nom { font-size: .78rem; color: var(--texte-3); line-height: 1.25; }
.formulaire .case-dep:has(input:checked) { border-color: var(--acc); background: var(--acc-fond); box-shadow: 0 0 18px -8px var(--acc); }
.case-dep:has(input:checked) .case-dep__num { color: var(--acc-clair); }
.case-dep:has(input:checked) .case-dep__nom { color: #A7F3D0; }
.case-dep:has(input:focus-visible) { outline: 3px solid var(--acc); outline-offset: 2px; }
.case-dep--propre { cursor: default !important; }
.case-dep--propre::after { content: "Votre département"; font-size: .68rem; color: var(--acc-clair); }
.lien-bouton { border: 0; background: none; color: var(--acc-clair); font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; padding: .25rem 0; text-decoration: underline; text-underline-offset: 3px; }
.lien-bouton:hover { color: #99F6E4; }

/* Pages légales */
.legal { max-width: 780px; }
.legal h2 { margin-top: 1.9rem; }
.legal p, .legal li { line-height: 1.65; color: #C9D4E5; }
.legal .tableau { font-size: .88rem; }
.a-completer { background: #4A3A12; color: #FDE68A; padding: 0 .3rem; border-radius: 3px; font-weight: 600; }

/* Assistant IA */
.assistant { position: fixed; right: 16px; bottom: 16px; z-index: 50; font-size: .95rem; }
.assistant__ouvrir { display: inline-flex; align-items: center; gap: .5rem; background: var(--acc); color: var(--sur-acc);
                     border: 0; border-radius: 999px; padding: .75rem 1.15rem; font: inherit; font-weight: 600; cursor: pointer;
                     box-shadow: 0 10px 30px -10px var(--acc); transition: transform .2s ease; }
.assistant__ouvrir:hover { transform: translateY(-2px); }
.assistant__ouvrir span { display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: rgba(4, 32, 28, .18); }
.assistant--ouvert .assistant__ouvrir { display: none; }
.assistant__panneau { width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100vh - 100px)); background: var(--surface);
                      border: 1px solid var(--trait-fort); border-radius: 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
                      display: flex; flex-direction: column; overflow: hidden; }
.assistant__panneau[hidden] { display: none !important; }
.assistant__entete { display: flex; justify-content: space-between; align-items: center; padding: .75rem .95rem;
                     background: var(--surface-2); border-bottom: 1px solid var(--trait); }
.assistant__entete .lien-bouton { margin: 0 .6rem 0 0; }
.assistant__fermer { border: 0; background: transparent; color: var(--texte); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.assistant__fil { flex: 1; overflow-y: auto; padding: .9rem; display: flex; flex-direction: column; gap: .6rem; background: var(--fond); }
.assistant__msg { max-width: 88%; padding: .6rem .85rem; border-radius: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.assistant__msg p { margin: 0 0 .4rem; }
.assistant__msg p:last-child, .assistant__msg ul:last-child, .assistant__msg ol:last-child { margin-bottom: 0; }
.assistant__msg ul, .assistant__msg ol { margin: .2rem 0 .4rem; padding-left: 1.2rem; }
.assistant__msg--ia { background: var(--surface); border: 1px solid var(--trait); align-self: flex-start; }
.assistant__msg--client { background: var(--acc); color: var(--sur-acc); align-self: flex-end; white-space: pre-wrap; }
.assistant__msg--attente { color: var(--texte-3); font-style: italic; align-self: flex-start; }
.assistant__msg--erreur { background: var(--rouge-fond); color: #FCA5A5; align-self: flex-start; }
.assistant__suggestions { display: flex; flex-direction: column; gap: .35rem; margin-top: .5rem; }
.assistant__suggestions button { text-align: left; border: 1px solid var(--trait-fort); background: var(--surface-2); border-radius: 8px;
                                 padding: .45rem .65rem; font: inherit; font-size: .88rem; color: var(--acc-clair); cursor: pointer; }
.assistant__suggestions button:hover { border-color: var(--acc); }
.assistant__saisie { display: flex; gap: .5rem; padding: .6rem; border-top: 1px solid var(--trait); align-items: flex-end; background: var(--surface); }
.assistant__saisie textarea { flex: 1; resize: none; border: 1px solid var(--trait-fort); border-radius: 10px; padding: .55rem .65rem; font: inherit;
                              background: var(--fond); color: var(--texte); }
.assistant__avertissement { margin: 0; padding: 0 .8rem .6rem; font-size: .72rem; color: var(--texte-3); background: var(--surface); }
@media (max-width: 560px) {
    .assistant { right: 12px; bottom: 12px; }
    .assistant--ouvert { left: 12px; }
    .assistant__panneau { width: 100%; height: calc(100vh - 80px); }
}

/* Téléphone : en-tête qui ne défile pas avec la page, menu sur une ligne qui glisse */
@media (max-width: 760px) {
    .entete { position: static; }
    .entete__ligne { min-height: 0; padding-top: .75rem; padding-bottom: .5rem; }
    .nav { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: .25rem; scrollbar-width: none; }
    .nav a { white-space: nowrap; padding: .45rem .65rem; font-size: .9rem; }
    .etiquette { font-size: .7rem; letter-spacing: .04em; }
    .departements__regions { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .3rem; scrollbar-width: thin; }
    .departements__grille { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}

/* Liste des métiers (accueil) */
.familles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 1rem; }
.famille { background: var(--surface-2); border: 1px solid var(--trait); border-radius: 16px; padding: 1.3rem 1.4rem; }
.famille h3 { margin: 0 0 .75rem; font-size: 1.05rem; color: var(--acc); }
.famille ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; }
.famille li { font-size: .84rem; color: var(--texte-2); border: 1px solid var(--trait-fort); border-radius: 999px; padding: .2rem .65rem; }