:root{
  --vert:#55B99D;
  --vert-fonce:#3D8E77;
  --ardoise:#415262;
  --ardoise-profond:#2C3740;
  --fond:#F6F9F8;
  --sable:#FFF6E8;
  --ambre:#C97A17;
  --trait:#DDE5E2;
  --blanc:#fff;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{
  font-family:"Source Serif 4",Georgia,serif;
  background:var(--fond);color:var(--ardoise-profond);
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,.ui{font-family:Montserrat,system-ui,sans-serif}

/* ---------- en-tête ---------- */
header{
  background:var(--blanc);border-bottom:1px solid var(--trait);
  position:sticky;top:0;z-index:70;
}
.bandeau{max-width:1280px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:18px}
.marque{display:flex;align-items:flex-start;gap:9px;text-decoration:none}
.pastille{width:15px;height:15px;border-radius:50%;background:var(--vert);margin-top:3px;flex:none}
.nom{font-family:Montserrat;font-weight:600;font-size:16px;line-height:1.05;color:var(--ardoise);letter-spacing:-.2px}
.nom span{display:block}

/* ---------- structure ---------- */
.page{max-width:1280px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:212px minmax(0,1fr) 372px;gap:44px;align-items:start}

/* ---------- sommaire ---------- */
nav.sommaire{position:sticky;top:88px;padding:38px 0 40px}
.sommaire-titre{font-family:Montserrat;font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#8A9A94;margin-bottom:14px}
.sommaire a{
  display:block;font-family:Montserrat;font-size:13.5px;font-weight:500;color:var(--ardoise);
  text-decoration:none;padding:7px 0 7px 15px;border-left:2px solid var(--trait);transition:.18s
}
.sommaire a:hover{color:var(--vert-fonce);border-left-color:var(--vert)}
.sommaire a.actif{color:var(--vert-fonce);font-weight:600;border-left-color:var(--vert)}

/* ---------- contenu ---------- */
main{padding:38px 0 90px;max-width:660px}
.accroche{font-family:Montserrat;font-size:33px;font-weight:700;line-height:1.18;letter-spacing:-.6px;color:var(--ardoise);margin-bottom:14px}
.chapo{font-size:18.5px;color:#5A6B64;margin-bottom:8px}
.surtitre{font-family:Montserrat;font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--vert-fonce);margin-bottom:10px}

main section{display:none;padding-top:10px;scroll-margin-top:88px}
main section.visible{display:block;animation:apparait .22s ease-out}
@keyframes apparait{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
main section h2{
  font-size:21px;font-weight:700;color:var(--ardoise);letter-spacing:-.2px;margin-bottom:16px;
  padding-bottom:10px;border-bottom:2px solid var(--vert)
}
main section h3{font-size:15px;font-weight:600;color:var(--vert-fonce);margin:26px 0 9px}
p{margin-bottom:14px}
ul{margin:0 0 14px 20px}
li{margin-bottom:8px}
strong{font-weight:600;color:var(--ardoise)}
a.lien{color:var(--vert-fonce);text-decoration:underline;text-underline-offset:3px}

.encadre{
  background:var(--blanc);border-left:3px solid var(--vert);
  padding:16px 20px;margin:18px 0;border-radius:0 6px 6px 0;font-size:16px
}
.encadre.alerte{background:var(--sable);border-left-color:var(--ambre)}
.encadre .etiq{
  display:block;font-family:Montserrat;font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--vert-fonce);margin-bottom:7px
}
.encadre.alerte .etiq{color:var(--ambre)}
.encadre p:last-child{margin-bottom:0}

.demande{
  background:var(--ardoise);color:#EAF2EF;padding:20px 22px;border-radius:8px;margin:18px 0;
  font-style:italic;font-size:16.5px
}

table{width:100%;border-collapse:collapse;margin:16px 0;font-size:15.5px}
th{
  font-family:Montserrat;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  text-align:left;color:var(--blanc);background:var(--ardoise);padding:9px 13px
}
td{padding:11px 13px;border-bottom:1px solid var(--trait);vertical-align:top}
tr:nth-child(even) td{background:#EFF6F4}
td:first-child{font-family:Montserrat;font-weight:600;font-size:14px;color:var(--ardoise);width:33%}

ol.etapes{list-style:none;margin:16px 0;counter-reset:e}
ol.etapes li{counter-increment:e;position:relative;padding-left:38px;margin-bottom:11px}
ol.etapes li::before{
  content:counter(e);position:absolute;left:0;top:1px;width:25px;height:25px;border-radius:50%;
  background:var(--vert);color:var(--blanc);font-family:Montserrat;font-size:12.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center
}

.cible{animation:surligne 2.1s ease-out}
@keyframes surligne{0%{background:#DFF1EB}100%{background:transparent}}

.contact{background:var(--blanc);border:1px solid var(--trait);border-radius:8px;padding:22px;margin-top:20px}
.contact .qui{font-family:Montserrat;font-weight:700;color:var(--ardoise);font-size:16px}

/* ---------- assistant ---------- */
aside{position:sticky;top:88px;padding:38px 0 40px;height:calc(100vh - 88px);display:flex;flex-direction:column}
.chat{
  background:var(--blanc);border:1px solid var(--trait);border-radius:10px;
  display:flex;flex-direction:column;flex:1;overflow:hidden
}
.chat-tete{padding:15px 18px;border-bottom:1px solid var(--trait)}
.chat-tete h2{font-family:Montserrat;font-size:15px;font-weight:700;color:var(--ardoise)}
.chat-tete p{font-size:13.5px;color:#7C8C86;margin:3px 0 0}
.fil{flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.msg{font-size:15px;line-height:1.55;max-width:94%}
.msg.moi{align-self:flex-end;background:var(--ardoise);color:#EAF2EF;padding:9px 13px;border-radius:12px 12px 3px 12px}
.msg.lui{align-self:flex-start;color:var(--ardoise-profond)}
.msg.lui p{margin-bottom:9px}
.msg.lui p:last-child{margin-bottom:0}
.renvoi{
  display:inline-block;margin-top:7px;font-family:Montserrat;font-size:12px;font-weight:600;
  background:#E9F5F1;color:var(--vert-fonce);border:1px solid #CDE7DF;border-radius:20px;
  padding:5px 12px;cursor:pointer
}
.renvoi:hover{background:#DCEFE8}
.carte-contact{
  margin-top:9px;background:var(--ardoise);color:#EAF2EF;border-radius:9px;padding:13px 15px;
  font-family:Montserrat;font-size:13.5px;line-height:1.5
}
.carte-contact .intro{color:#B9CBC4;font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;margin-bottom:7px}
.carte-contact .qui{font-weight:700;font-size:14.5px;color:#fff;margin-bottom:6px}
.carte-contact a{display:block;color:#8FDCC5;text-decoration:none;font-weight:600;padding:2px 0}
.carte-contact a:hover{text-decoration:underline}
.pistes{display:flex;flex-wrap:wrap;gap:6px;padding:0 18px 14px}
.piste{
  font-family:Montserrat;font-size:12.5px;color:var(--ardoise);background:var(--fond);
  border:1px solid var(--trait);border-radius:16px;padding:6px 11px;cursor:pointer;text-align:left
}
.piste:hover{border-color:var(--vert);color:var(--vert-fonce)}
.saisie{border-top:1px solid var(--trait);padding:11px;display:flex;gap:8px;align-items:flex-end}
.saisie textarea{
  flex:1;border:1px solid var(--trait);border-radius:8px;padding:9px 11px;resize:none;
  font-family:Montserrat;font-size:14.5px;color:var(--ardoise-profond);max-height:110px;background:var(--fond)
}
.saisie textarea:focus{outline:2px solid var(--vert);outline-offset:1px;background:var(--blanc)}
.saisie button{
  background:var(--vert);color:var(--blanc);border:0;border-radius:8px;width:40px;height:40px;
  cursor:pointer;font-size:17px;flex:none
}
.saisie button:hover{background:var(--vert-fonce)}
.saisie button:disabled{background:#B9CDC7;cursor:default}
.points span{
  display:inline-block;width:5px;height:5px;margin-right:3px;border-radius:50%;background:var(--vert);
  animation:pulse 1.1s infinite
}
.points span:nth-child(2){animation-delay:.18s}
.points span:nth-child(3){animation-delay:.36s}
@keyframes pulse{0%,60%,100%{opacity:.25}30%{opacity:1}}

.ouvrir-chat{display:none}

/* ---------- responsive ---------- */
@media(max-width:1140px){
  .page{grid-template-columns:190px minmax(0,1fr);gap:34px}
  aside{
    position:fixed;inset:auto 0 0 0;height:78vh;padding:0;z-index:60;
    transform:translateY(101%);transition:transform .28s ease
  }
  aside.ouvert{transform:translateY(0)}
  .chat{border-radius:14px 14px 0 0;box-shadow:0 -8px 34px rgba(44,55,64,.18)}
  .ouvrir-chat{
    display:flex;align-items:center;gap:8px;position:fixed;right:18px;bottom:18px;z-index:50;
    background:var(--vert);color:var(--blanc);border:0;border-radius:26px;padding:13px 20px;
    font-family:Montserrat;font-size:14.5px;font-weight:600;cursor:pointer;
    box-shadow:0 5px 18px rgba(65,82,98,.26)
  }
  .fermer-chat{
    display:block;background:none;border:0;font-size:22px;color:#8A9A94;cursor:pointer;
    position:absolute;right:12px;top:11px;line-height:1
  }
}
@media(min-width:1141px){.fermer-chat{display:none}}
@media(max-width:760px){
  .page{grid-template-columns:1fr;padding:0 18px}
  nav.sommaire{position:static;padding:22px 0 0;border-bottom:1px solid var(--trait)}
  .sommaire a{border-left:0;padding:6px 0}
  .accroche{font-size:27px}
  body{font-size:16.5px}
}

/* ==========================================================================
   Commun à tout le site : menu des sujets, pied de page, accueil.
   ========================================================================== */

/* ---------- menu des sujets ---------- */
.marque-site{
  font-family:Montserrat;font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--vert-fonce);padding-left:16px;border-left:1px solid var(--trait);line-height:30px
}
nav.sujets{margin-left:auto;display:flex;gap:4px}
nav.sujets a{
  font-family:Montserrat;font-size:13.5px;font-weight:600;color:var(--ardoise);text-decoration:none;
  padding:8px 13px;border-radius:7px;transition:.18s
}
nav.sujets a:hover{background:var(--fond);color:var(--vert-fonce)}
nav.sujets a[aria-current="page"]{background:#E9F5F1;color:var(--vert-fonce)}
.burger{
  display:none;margin-left:auto;align-items:center;gap:9px;background:var(--fond);
  border:1px solid var(--trait);border-radius:8px;padding:8px 12px;cursor:pointer;
  font-family:Montserrat;font-size:13.5px;font-weight:600;color:var(--ardoise)
}
.burger-icone{position:relative;width:16px;height:2px;background:var(--ardoise);border-radius:2px;transition:.2s}
.burger-icone::before,.burger-icone::after{
  content:"";position:absolute;left:0;width:16px;height:2px;background:var(--ardoise);border-radius:2px;transition:.2s
}
.burger-icone::before{top:-5px}
.burger-icone::after{top:5px}
.burger[aria-expanded="true"] .burger-icone{background:transparent}
.burger[aria-expanded="true"] .burger-icone::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] .burger-icone::after{top:0;transform:rotate(-45deg)}

.menu-mobile{
  position:absolute;left:0;right:0;top:100%;background:var(--blanc);border-bottom:1px solid var(--trait);
  box-shadow:0 18px 30px rgba(44,55,64,.12);padding:8px 18px 18px
}
.menu-mobile[hidden]{display:none}
.menu-mobile a{display:block;text-decoration:none;padding:13px 4px 13px 16px;border-bottom:1px solid var(--trait);position:relative}
.menu-mobile a:last-child{border-bottom:0}
.menu-mobile a::before{
  content:"";position:absolute;left:0;top:20px;width:7px;height:7px;border-radius:50%;background:var(--trait)
}
.menu-mobile a[aria-current="page"]::before{background:var(--vert)}
.menu-mobile .m-titre{display:block;font-family:Montserrat;font-size:15.5px;font-weight:600;color:var(--ardoise)}
.menu-mobile .m-repere{display:block;font-family:Montserrat;font-size:12.5px;color:#7C8C86;margin-top:2px}
.menu-mobile a[aria-current="page"] .m-titre{color:var(--vert-fonce)}

@media(max-width:900px){
  nav.sujets{display:none}
  .burger{display:flex}
}
@media(max-width:420px){
  .marque-site{display:none}
}

/* ---------- pied de page ---------- */
.pied{background:var(--ardoise-profond);color:#B9CBC4;margin-top:20px}
.pied-int{max-width:1280px;margin:0 auto;padding:34px 24px 38px;font-family:Montserrat;font-size:13.5px;line-height:1.7}
.pied .qui{color:#fff;font-weight:700;font-size:14.5px;margin-bottom:4px}
.pied a{color:#8FDCC5;text-decoration:none;font-weight:600}
.pied a:hover{text-decoration:underline}
.pied .liens-pied{margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.12)}
.pied .liens-pied a{margin-right:18px;display:inline-block;color:#EAF2EF;font-weight:500}

/* ---------- accueil ---------- */
.accueil{max-width:1120px;margin:0 auto;padding:0 24px}
.hero{padding:64px 0 46px;max-width:760px}
.hero h1{
  font-family:Montserrat;font-size:42px;font-weight:700;line-height:1.12;letter-spacing:-1px;color:var(--ardoise);
  margin-bottom:18px
}
.hero h1 em{font-style:normal;color:var(--vert-fonce)}
.hero .chapo{font-size:19px}

.titre-bloc{
  font-family:Montserrat;font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:#8A9A94;margin-bottom:16px
}
.guides{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:22px;margin-bottom:64px}
.carte{
  display:block;background:var(--blanc);border:1px solid var(--trait);border-radius:12px;
  padding:26px 28px 24px;text-decoration:none;color:inherit;position:relative;overflow:hidden;
  transition:border-color .18s,box-shadow .18s,transform .18s
}
.carte::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--vert)}
.carte:hover{border-color:#BFDDD3;box-shadow:0 12px 28px rgba(44,55,64,.09);transform:translateY(-2px)}
.carte:focus-visible{outline:3px solid var(--vert);outline-offset:2px}
.repere{
  display:inline-block;font-family:Montserrat;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ambre);background:var(--sable);border-radius:20px;padding:5px 12px;
  margin-bottom:16px
}
.carte h2{font-family:Montserrat;font-size:23px;font-weight:700;color:var(--ardoise);letter-spacing:-.3px;margin-bottom:10px}
.carte .resume{font-size:16px;color:#4F605A;margin-bottom:16px}
.carte ul.apercu{list-style:none;margin:0 0 20px;padding:14px 0 0;border-top:1px solid var(--trait);columns:2;column-gap:20px}
.carte ul.apercu li{
  position:relative;padding-left:14px;margin-bottom:6px;font-family:Montserrat;font-size:12.5px;
  color:#5A6B64;break-inside:avoid
}
.carte ul.apercu li::before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;background:var(--vert)}
.carte .lire{font-family:Montserrat;font-size:14px;font-weight:700;color:var(--vert-fonce)}
.carte:hover .lire{text-decoration:underline;text-underline-offset:3px}

.question{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:44px;align-items:start;
  background:var(--blanc);border:1px solid var(--trait);border-radius:14px;padding:38px;margin-bottom:70px
}
.question #titre-question{font-family:Montserrat;font-size:25px;font-weight:700;color:var(--ardoise);letter-spacing:-.3px;margin-bottom:12px}
.question .contact{background:var(--fond)}
.volet-accueil{height:470px;display:flex;flex-direction:column}
.volet-accueil .chat{background:var(--fond)}
.volet-accueil .saisie textarea{background:var(--blanc)}
.volet-accueil .fermer-chat{display:none!important}
.volet-accueil .chat{border-radius:10px;box-shadow:none}

@media(max-width:760px){
  .hero{padding:38px 0 30px}
  .hero h1{font-size:30px;letter-spacing:-.6px}
  .hero .chapo{font-size:17px}
  .guides{grid-template-columns:1fr;gap:16px;margin-bottom:44px}
  .carte{padding:22px 20px 20px}
  .carte ul.apercu{columns:1}
  .question{grid-template-columns:1fr;gap:24px;padding:24px 18px;margin-bottom:44px}
  .volet-accueil{height:440px}
}

/* ---------- page introuvable ---------- */
.introuvable{max-width:640px;margin:0 auto;padding:90px 24px 120px;text-align:center}
.introuvable h1{font-family:Montserrat;font-size:30px;color:var(--ardoise);margin-bottom:12px}