@font-face{font-family:"Space Grotesk";font-weight:500;font-style:normal;font-display:optional;src:url(/fonts/space-grotesk-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-weight:700;font-style:normal;font-display:optional;src:url(/fonts/space-grotesk-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-style:normal;font-display:optional;src:url(/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-style:normal;font-display:optional;src:url(/fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2")}

:root{--fond:#F6F8FB;--texte:#10233F;--doux:#4B5B70;--accent:#0B6E66;--trait:#cfd8e4;--carte:#fff;--focus:#0B6E66;
--titres:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;--corps:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif}
@media (prefers-color-scheme:dark){:root{--fond:#0D1826;--texte:#EAF0F7;--doux:#A9B7C8;--accent:#5CC7BC;--trait:#2A3B52;--carte:#122236;--focus:#5CC7BC}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fond);color:var(--texte);font:400 1.0625rem/1.6 var(--corps)}
a{color:var(--accent);text-underline-offset:.15em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
.saut{position:absolute;left:-999px;top:0;background:var(--texte);color:var(--fond);padding:.6rem 1rem;z-index:20}
.saut:focus{left:8px;top:8px}
.enveloppe{max-width:40rem;margin:0 auto;padding:0 16px}
header.haut{padding:20px 0 4px}
.marque{font:700 1.25rem var(--titres);color:var(--texte);text-decoration:none;letter-spacing:-.01em}
.marque span{color:var(--accent)}
main{padding:12px 0 40px}
h1{font:500 clamp(1.9rem,6.5vw,2.75rem)/1.1 var(--titres);letter-spacing:-.02em;margin:.6em 0 .4em}
h2{font:500 1.5rem/1.2 var(--titres);letter-spacing:-.01em;margin:1.8em 0 .5em}
h3{font:500 1.15rem/1.3 var(--titres);margin:1.4em 0 .3em}
p,ul,ol,table{margin:0 0 1em}
.chapo{font-size:1.2rem;color:var(--doux);margin-bottom:1.4em}
.carte{background:var(--carte);border:1px solid var(--trait);border-radius:12px;padding:20px}
#formulaire{margin:1.2em 0 .4em;min-height:14rem}
.mention{font-size:.95rem;color:var(--doux);margin-top:.6em}
.bouton{display:inline-block;font:600 1rem var(--corps);min-height:44px;padding:10px 18px;border-radius:8px;border:2px solid var(--accent);background:var(--accent);color:#fff;cursor:pointer}
.bouton:hover{filter:brightness(1.1)}
.bouton.egal{background:var(--carte);color:var(--texte);border-color:var(--texte)}
.bouton.egal:hover{background:var(--texte);color:var(--fond)}
@media (prefers-color-scheme:dark){.bouton{color:#062a27}}
.rang{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
.a-completer{background:#fff3b0;color:#3a2f00;padding:.1em .35em;border-radius:4px}
footer.bas{border-top:1px solid var(--trait);padding:20px 0 40px;color:var(--doux);font-size:.95rem}
footer.bas ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px 18px}
footer.bas a,footer.bas button{color:var(--doux)}
.lien-bouton{background:none;border:0;padding:0;font:inherit;text-decoration:underline;cursor:pointer;min-height:24px}
.lien-bouton:hover{color:var(--texte)}
#bandeau{position:fixed;left:0;right:0;bottom:0;z-index:10;background:var(--carte);border-top:2px solid var(--texte);padding:16px}
#bandeau .enveloppe{padding:0}
#bandeau h2{font-size:1.1rem;margin:0 0 .3em}
#bandeau p{margin:0 0 .4em;font-size:.98rem}
#bandeau[hidden]{display:none}
.exemple-cadre{border:1px dashed var(--trait);border-radius:12px;padding:16px 20px;background:var(--carte)}
.exemple-cadre h2:first-child{margin-top:.2em}
table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{border:1px solid var(--trait);padding:8px 10px;text-align:left;vertical-align:top}
th{background:var(--carte)}
.tableau{overflow-x:auto}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
#bandeau{max-height:90vh;overflow-y:auto}
.choix-liste{margin:0 0 .6em;padding-left:1.2em;font-size:.98rem}
.choix{margin:.4em 0 .8em}
.choix[hidden]{display:none}
.choix label{display:flex;gap:10px;align-items:flex-start;margin:.5rem 0}
.choix input{width:22px;height:22px;margin-top:2px;accent-color:var(--accent);flex:none}
.atouts{list-style:none;margin:0 0 1.3em;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px;font-weight:600;font-size:.98rem}
.atouts li{display:flex;align-items:center;gap:7px}
.atouts li::before{content:"✓";color:var(--accent);font-weight:700}
.carte-inscription{border-color:var(--accent);border-width:2px}
.accroche-inscription{font:500 1.15rem var(--titres);margin:0 0 .8em}
.carte-inscription .mention{margin:.8em 0 0}
