/* ==========================================================================
   HORIZON — Design system
   Palette extraite du logo (mesures directes sur le PNG).
   Contrastes calculés selon la formule WCAG 2.x — voir le commentaire de chaque
   couleur : ✅ = utilisable en texte courant sur blanc, ❌ = aplats uniquement.
   ========================================================================== */

:root{
  --nuit:#08284A;        /* 14,86:1 ✅ texte principal */
  --bleu:#0057BF;        /*  6,74:1 ✅ liens, états actifs */
  --bleu-clair:#E8F1FB;
  --bleu-pale:#F3F8FE;
  --orange:#F79A00;      /*  2,32:1 ❌ JAMAIS en texte sur blanc */
  --orange-fonce:#D97400;
  --jaune:#FFC93C;       /*  1,54:1 ❌ aplats et dégradés uniquement */
  --vert:#3E9E2A;        /*  3,43:1 ⚠️ icônes et grands caractères */
  --vert-fonce:#2B6F22;  /*  6,18:1 ✅ */
  --vert-clair:#EDF7EA;
  --gris:#4A5A68;        /*  7,11:1 ✅ textes secondaires */
  --creme:#FFF8EC;
  --bordure:#E3E9EF;
  --rouge:#C62828;
  --blanc:#fff;

  /* Le dégradé du soleil, avec texte bleu nuit : 6,41:1 — conforme AA.
     Du blanc sur cet orange donnerait 2,32:1, illisible. */
  --soleil:linear-gradient(100deg,var(--orange) 0%,var(--jaune) 100%);

  --r:16px; --r-lg:24px;
  --sh:0 1px 2px rgba(8,40,74,.05),0 6px 20px rgba(8,40,74,.07);
  --sh-lg:0 12px 40px rgba(8,40,74,.13);
  --max:1160px;
  --f-titre:"Poppins",system-ui,-apple-system,Segoe UI,sans-serif;
  --f-texte:"Inter",system-ui,-apple-system,Segoe UI,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.001ms!important;transition-duration:.001ms!important}}
body{margin:0;font-family:var(--f-texte);font-size:18px;line-height:1.7;color:var(--nuit);background:var(--blanc);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--f-titre);font-weight:700;line-height:1.18;letter-spacing:-.015em;margin:0 0 .5em}
h1{font-size:clamp(2rem,5vw,3.2rem)}
h2{font-size:clamp(1.6rem,3.4vw,2.3rem);margin-top:1.6em}
h3{font-size:1.25rem;margin-top:1.4em}
h4{font-size:1.08rem}
p{margin:0 0 1em;max-width:70ch}
ul,ol{max-width:70ch}
li{margin-bottom:.4em}
a{color:var(--bleu)}
img{max-width:100%;height:auto}
.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(1.1rem,4vw,2rem)}
.etroit{max-width:820px}
.lead{font-size:1.16rem;color:var(--gris)}
.chapo{font-size:1.18rem;color:var(--nuit);font-weight:500;border-left:5px solid var(--orange);padding-left:1.1rem;margin-bottom:1.8rem}
.petit{font-size:.92rem;color:var(--gris)}
.eyebrow{display:inline-block;font-size:.82rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--vert-fonce);background:var(--vert-clair);padding:.42rem .85rem;border-radius:99px;margin-bottom:1rem}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--nuit);color:#fff;padding:.8rem 1.2rem;border-radius:10px}
:focus-visible{outline:3px solid var(--bleu);outline-offset:3px;border-radius:6px}

/* ---------- Boutons — cible tactile ≥ 56 px ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:56px;padding:.9rem 1.6rem;border-radius:14px;font-weight:700;font-size:1.05rem;text-decoration:none;border:2px solid transparent;cursor:pointer;font-family:inherit;transition:transform .12s,box-shadow .12s,background .12s}
.btn svg{width:22px;height:22px;flex:none}
.btn--sun{background:var(--soleil);color:var(--nuit);box-shadow:0 4px 14px rgba(247,154,0,.35)}
.btn--sun:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(247,154,0,.45)}
.btn--nuit{background:var(--nuit);color:#fff}
.btn--nuit:hover{background:#0d3a68}
.btn--ligne{background:#fff;color:var(--nuit);border-color:var(--nuit)}
.btn--ligne:hover{background:var(--bleu-pale)}
.btn--block{width:100%}
.btn[disabled]{opacity:.4;cursor:not-allowed;transform:none!important}

/* ---------- En-tête — logo grand, c'est volontaire ---------- */
.bandeau{background:var(--nuit);color:#fff;font-size:.95rem}
.bandeau .wrap{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;align-items:center;justify-content:center;padding:.55rem clamp(1.1rem,4vw,2rem);text-align:center}
.bandeau b{color:var(--jaune)}
header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--bordure)}
.nav{display:flex;align-items:center;gap:1.2rem;padding-top:.6rem;padding-bottom:.6rem}
.logo img{height:74px;width:auto;display:block}
@media(max-width:900px){.logo img{height:56px}}
.menu{margin-left:auto;display:flex;gap:.1rem;list-style:none;margin:0;padding:0}
.menu a{display:block;padding:.7rem .8rem;border-radius:10px;text-decoration:none;color:var(--nuit);font-weight:600;font-size:1rem}
.menu a:hover{background:var(--bleu-pale);color:var(--bleu)}
.burger{margin-left:auto;display:none;width:52px;height:52px;border:2px solid var(--bordure);border-radius:12px;background:#fff;cursor:pointer;align-items:center;justify-content:center}
.burger span{display:block;width:24px;height:2.5px;background:var(--nuit);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:24px;height:2.5px;background:var(--nuit)}
.burger span::before{top:-8px}.burger span::after{top:8px}
@media(max-width:1080px){.menu,.nav .btn{display:none}.burger{display:flex}}
.mmenu{display:none;border-top:1px solid var(--bordure);background:#fff}
.mmenu.on{display:block}
.mmenu ul{list-style:none;margin:0;padding:.5rem clamp(1.1rem,4vw,2rem) 1.2rem}
.mmenu a{display:block;padding:1rem .2rem;border-bottom:1px solid var(--bordure);text-decoration:none;color:var(--nuit);font-weight:600}

/* ---------- Bloc contact géolocalisé ---------- */
.contact-geo{background:#fff;border:2px solid var(--bordure);border-radius:var(--r);padding:1.1rem 1.25rem;box-shadow:var(--sh);max-width:430px}
.contact-geo .zone{display:flex;align-items:center;gap:.5rem;font-size:.88rem;font-weight:600;color:var(--gris);margin-bottom:.5rem}
.contact-geo .pastille{width:11px;height:11px;border-radius:50%;flex:none;background:var(--jaune)}
.contact-geo .qui{font-family:var(--f-titre);font-weight:700;font-size:1.05rem;margin-bottom:.1rem}
.contact-geo .tel{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--f-titre);font-size:1.55rem;font-weight:700;color:var(--nuit);text-decoration:none}
.contact-geo .tel:hover{color:var(--bleu)}
.contact-geo .tel svg{width:26px;height:26px;color:var(--vert-fonce)}
.chg{margin-top:.5rem;font-size:.9rem;background:none;border:0;color:var(--bleu);text-decoration:underline;cursor:pointer;padding:.45rem 0;font-family:inherit}
.secteurs{display:none;gap:.5rem;flex-wrap:wrap;margin-top:.7rem;padding-top:.7rem;border-top:1px solid var(--bordure)}
.secteurs.on{display:flex}
.secteurs button{min-height:44px;padding:.5rem .9rem;border:2px solid var(--bordure);background:#fff;border-radius:10px;cursor:pointer;font-family:inherit;font-size:.92rem;font-weight:600;color:var(--nuit)}
.secteurs button[aria-pressed=true]{border-color:var(--bleu);background:var(--bleu-clair)}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--creme) 0%,#fff 78%);padding:clamp(2rem,5vw,3.6rem) 0 clamp(2.4rem,5vw,3.6rem)}
.hero::before{content:"";position:absolute;top:-46vw;left:50%;transform:translateX(-50%);width:92vw;height:92vw;max-width:1100px;max-height:1100px;border-radius:50%;background:radial-gradient(circle,rgba(255,201,60,.30) 0%,rgba(247,154,0,.13) 42%,transparent 68%);pointer-events:none}
.hero .wrap{position:relative;text-align:center}
.hero-logo{width:min(330px,72vw);height:auto;margin:0 auto 1.3rem;display:block}
.hero h1{max-width:19ch;margin-inline:auto}
.hero .lead{max-width:60ch;margin-inline:auto;font-size:1.2rem}
.hero-cta{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;margin:1.7rem 0 1.9rem}
.hero .contact-geo{margin-inline:auto;text-align:left}
.gages{display:flex;flex-wrap:wrap;gap:.7rem 1.8rem;justify-content:center;margin-top:1.7rem;font-weight:600;color:var(--gris);font-size:1rem}
.gages span{display:inline-flex;align-items:center;gap:.5rem}
.gages svg{width:22px;height:22px;color:var(--vert)}

/* ---------- Bandeau de page intérieure ---------- */
.tete-page{background:linear-gradient(180deg,var(--creme) 0%,#fff 100%);padding:clamp(1.8rem,4vw,3rem) 0 clamp(1.4rem,3vw,2.2rem);border-bottom:1px solid var(--bordure)}
.tete-page h1{margin-bottom:.4em}
.tete-page .lead{max-width:65ch}
.fil{font-size:.9rem;color:var(--gris);margin-bottom:.9rem}
.fil a{color:var(--gris)}
.fil span{margin:0 .4rem;opacity:.5}

/* ---------- Sections ---------- */
section{padding:clamp(2.6rem,6vw,4.6rem) 0}
.sec-creme{background:var(--creme)}
.sec-bleu{background:var(--bleu-pale)}
.sec-nuit{background:var(--nuit);color:#fff}
.sec-nuit h2,.sec-nuit h3{color:#fff}
.sec-nuit .lead{color:#C3D4E6}
.sec-nuit .eyebrow{background:rgba(255,201,60,.16);color:var(--jaune)}
.tete{text-align:center;max-width:760px;margin:0 auto clamp(1.8rem,4vw,2.8rem)}
.tete p{margin-inline:auto}

.etapes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.3rem;counter-reset:e}
.etape{background:#fff;border:2px solid var(--bordure);border-radius:var(--r);padding:2.2rem 1.5rem 1.5rem;position:relative}
.etape::before{counter-increment:e;content:counter(e);position:absolute;top:-24px;left:1.5rem;width:52px;height:52px;border-radius:50%;background:var(--soleil);color:var(--nuit);font-family:var(--f-titre);font-weight:700;font-size:1.4rem;display:grid;place-items:center;box-shadow:0 4px 12px rgba(247,154,0,.32)}
.etape h3{margin-top:0}
.etape p{margin:0;color:var(--gris)}

.metiers{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:1rem}
.metier{display:flex;align-items:flex-start;gap:.9rem;background:#fff;border:2px solid var(--bordure);border-radius:14px;padding:1rem;text-decoration:none;color:var(--nuit);font-weight:600;min-height:78px;transition:border-color .12s,transform .12s}
.metier:hover{border-color:var(--orange);transform:translateY(-2px);box-shadow:var(--sh)}
.metier .ic{width:44px;height:44px;flex:none;margin-top:2px;border-radius:11px;background:var(--bleu-clair);color:var(--bleu);display:grid;place-items:center}
.metier .ic svg{width:25px;height:25px}
.metier small{display:block;font-weight:500;color:var(--gris);font-size:.86rem;line-height:1.35;margin-top:.1rem}

.cartes{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.2rem}
.carte-lien{display:block;background:#fff;border:2px solid var(--bordure);border-radius:var(--r);padding:1.4rem;text-decoration:none;color:var(--nuit);transition:border-color .12s,transform .12s}
.carte-lien:hover{border-color:var(--orange);transform:translateY(-2px);box-shadow:var(--sh)}
.carte-lien h3{margin:0 0 .35em;font-size:1.15rem}
.carte-lien p{margin:0;color:var(--gris);font-size:.97rem}
.carte-lien .tag{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--bleu);background:var(--bleu-clair);padding:.25rem .6rem;border-radius:99px;margin-bottom:.6rem}

.atouts{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.6rem}
.atout .ic{width:56px;height:56px;border-radius:14px;background:rgba(255,201,60,.15);color:var(--jaune);display:grid;place-items:center;margin-bottom:.9rem}
.atout .ic svg{width:30px;height:30px}
.atout h3{margin-top:0}
.atout p{color:#C3D4E6;margin:0}

.puces{list-style:none;padding:0;display:grid;gap:.7rem}
.puces li{display:flex;gap:.7rem;align-items:flex-start;margin:0}
.puces svg{width:22px;height:22px;flex:none;margin-top:.32rem;color:var(--vert-fonce)}

/* ---------- Encarts de contenu local ---------- */
.encart{background:var(--bleu-pale);border:2px solid var(--bleu-clair);border-radius:var(--r);padding:1.4rem 1.5rem;margin:1.6rem 0}
.encart h3{margin-top:0}
.encart p:last-child{margin-bottom:0}
.encart--aide{background:var(--vert-clair);border-color:#CBE7C2}
.encart--alerte{background:#FFF4D6;border-color:#F3D999}
.encart--reserve{background:#FFF8EC;border-left:5px solid var(--orange);border-radius:0 12px 12px 0;border-top:0;border-right:0;border-bottom:0;font-size:.95rem;padding:1rem 1.2rem}
.encart--reserve strong{color:var(--orange-fonce)}
.src{font-size:.86rem;color:var(--gris);margin-top:.8rem}
.src::before{content:"Source : "}

.tableau{width:100%;border-collapse:collapse;margin:1.2rem 0;font-size:.98rem}
.tableau th,.tableau td{text-align:left;padding:.7rem .9rem;border-bottom:1px solid var(--bordure)}
.tableau th{font-family:var(--f-titre);font-weight:700;background:var(--bleu-pale)}
.tableau tr:last-child td{border-bottom:0}
.tableau td:last-child{font-weight:600;white-space:nowrap}

/* ---------- Formulaire ---------- */
.form-box{background:#fff;border:2px solid var(--bordure);border-radius:var(--r-lg);box-shadow:var(--sh-lg);max-width:760px;margin:0 auto;overflow:hidden}
.jauge{height:8px;background:var(--bordure)}
.jauge div{height:100%;background:var(--soleil);width:20%;transition:width .3s}
.form-in{padding:clamp(1.4rem,4vw,2.4rem)}
.pas{display:none}.pas.on{display:block}
.pas-num{font-size:.9rem;font-weight:700;color:var(--gris);letter-spacing:.06em;text-transform:uppercase;margin-bottom:.4rem}
.pas h3{font-size:1.5rem;margin:0 0 1.2rem}
.choix{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.8rem}
.choix button{display:flex;flex-direction:column;align-items:center;gap:.55rem;text-align:center;min-height:112px;padding:1rem .6rem;border:2px solid var(--bordure);background:#fff;border-radius:14px;cursor:pointer;font-family:inherit;font-size:.98rem;font-weight:600;color:var(--nuit);line-height:1.25}
.choix button:hover{border-color:var(--orange);background:var(--creme)}
.choix button[aria-pressed=true]{border-color:var(--bleu);background:var(--bleu-clair);box-shadow:inset 0 0 0 1px var(--bleu)}
.choix svg{width:32px;height:32px;color:var(--bleu)}
.champ{margin-bottom:1.1rem}
.champ label{display:block;font-weight:600;margin-bottom:.35rem}
.champ .aide{font-size:.9rem;color:var(--gris);margin:0 0 .4rem}
input[type=text],input[type=tel],input[type=email],textarea,select{width:100%;font-family:inherit;font-size:1.05rem;padding:.95rem 1rem;border:2px solid var(--bordure);border-radius:12px;background:#fff;color:var(--nuit);min-height:56px}
input:focus,textarea:focus,select:focus{border-color:var(--bleu);outline:none;box-shadow:0 0 0 3px rgba(0,87,191,.15)}
textarea{min-height:120px;resize:vertical}
.deux{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:600px){.deux{grid-template-columns:1fr}}
.rgpd{display:flex;gap:.8rem;align-items:flex-start;background:var(--bleu-pale);border:2px solid var(--bleu-clair);border-radius:12px;padding:1rem;font-size:.94rem;line-height:1.5}
.rgpd input{width:24px;height:24px;margin-top:.15rem;flex:none;accent-color:var(--bleu)}
.pieds{display:flex;gap:.8rem;justify-content:space-between;margin-top:1.6rem;flex-wrap:wrap}
.recap{background:var(--vert-clair);border:2px solid #CBE7C2;border-radius:14px;padding:1.2rem}
.recap dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.45rem 1rem;font-size:.98rem}
.recap dt{font-weight:700;color:var(--vert-fonce)}
.recap dd{margin:0}
.merci{text-align:center;padding:1rem 0}
.merci .rond{width:88px;height:88px;border-radius:50%;background:var(--vert-clair);color:var(--vert-fonce);display:grid;place-items:center;margin:0 auto 1.2rem}
.merci .rond svg{width:46px;height:46px}
.erreur{background:#FDECEA;border:2px solid #F5C6C2;color:#8E1B14;border-radius:12px;padding:.9rem 1.1rem;margin-top:1rem;font-size:.95rem;display:none}
.erreur.on{display:block}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:0 auto;display:grid;gap:.8rem}
details{background:#fff;border:2px solid var(--bordure);border-radius:14px}
details[open]{border-color:var(--bleu)}
summary{cursor:pointer;padding:1.15rem 1.3rem;font-weight:700;font-family:var(--f-titre);font-size:1.06rem;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center;min-height:56px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.7rem;color:var(--bleu);line-height:1}
details[open] summary::after{content:"−"}
details p{padding:0 1.3rem 1.2rem;margin:0;color:var(--gris)}

/* ---------- Article / guide ---------- */
.prose h2{border-bottom:2px solid var(--bordure);padding-bottom:.3em}
.prose ul,.prose ol{padding-left:1.3rem}
.maj{display:inline-flex;align-items:center;gap:.45rem;font-size:.88rem;font-weight:600;color:var(--vert-fonce);background:var(--vert-clair);padding:.4rem .9rem;border-radius:99px;white-space:nowrap}
.maj svg{width:16px;height:16px;flex:none}
.sources-liste{font-size:.92rem;color:var(--gris);border-top:1px solid var(--bordure);padding-top:1rem;margin-top:2rem}
.sources-liste ul{list-style:none;padding:0}

/* ---------- Carte de répartition ---------- */
.repart{display:grid;grid-template-columns:minmax(260px,1fr) minmax(280px,1.05fr);gap:clamp(1.5rem,4vw,3rem);align-items:center}
@media(max-width:820px){.repart{grid-template-columns:1fr}}
.carte{width:100%;max-width:400px;margin:0 auto;display:block}
.carte .fond{fill:#fff}
.carte .terre{fill:none;stroke:var(--nuit);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.carte .zn{opacity:.9}
.legende{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.legende li{display:flex;gap:.9rem;align-items:flex-start;background:#fff;border:2px solid var(--bordure);border-radius:14px;padding:1rem 1.1rem;margin:0}
.legende .pt{width:20px;height:20px;border-radius:6px;flex:none;margin-top:.3rem}
.legende b{display:block;font-family:var(--f-titre)}
.legende .num{font-family:var(--f-titre);font-weight:700;font-size:1.12rem;color:var(--nuit);text-decoration:none}
.legende small{color:var(--gris);font-size:.92rem;display:block}

/* ---------- Pied ---------- */
footer{background:var(--nuit);color:#C3D4E6;padding:clamp(2.5rem,6vw,4rem) 0 2rem;font-size:.97rem}
footer h3{color:#fff;font-size:1.05rem;margin:0 0 .8rem}
.pied{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:2rem}
@media(max-width:900px){.pied{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.pied{grid-template-columns:1fr}}
.pied img{height:52px;margin-bottom:1rem}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.pied li{margin:0}
.pied a{color:#C3D4E6;text-decoration:none}
.pied a:hover{color:var(--jaune);text-decoration:underline}
.bas{border-top:1px solid rgba(255,255,255,.14);margin-top:2.5rem;padding-top:1.4rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.9rem;color:#8FA6BC}