:root{
  --encre:#16233A;
  --papier:#FBFAF8;
  --ardoise:#38414F;
  --sceau:#8C2F39;
  --filet:#D9D5CC;
  --marge:#7A8494;
  --surface:#F4F1EB;
  --serif:"Spectral","Iowan Old Style",Georgia,serif;
  --sans:"IBM Plex Sans","Segoe UI",Helvetica,Arial,sans-serif;
  --col:72rem;
}
@media (prefers-color-scheme: dark){
  :root{
    --encre:#E8E6E1;--papier:#12161D;--ardoise:#BFC5CE;--sceau:#C9727A;
    --filet:#2C333E;--marge:#8A929E;--surface:#1A1F28;
  }
}

/* --- polices hébergées localement ----------------------------------
   Spectral et IBM Plex Sans n'existent pas en version variable chez
   Google Fonts : on charge les seules graisses réellement utilisées.
   ------------------------------------------------------------------- */
@font-face{font-family:"Spectral";src:url("/assets/fonts/spectral-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Spectral";src:url("/assets/fonts/spectral-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Spectral";src:url("/assets/fonts/spectral-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("/assets/fonts/plex-sans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("/assets/fonts/plex-sans-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

*{box-sizing:border-box}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

body{
  margin:0;background:var(--papier);color:var(--ardoise);
  font-family:var(--serif);font-size:1.0625rem;line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--serif);color:var(--encre);line-height:1.2;font-weight:600;margin:0}
h1{font-size:clamp(2rem,4.4vw,3.15rem);letter-spacing:-.015em;max-width:22ch}
h2{font-size:clamp(1.4rem,2.4vw,1.85rem);margin-bottom:.6rem; margin-top: 1rem}
h3{font-size:1.1rem;margin-bottom:.35rem}
p{margin:0 0 1.05rem;max-width:66ch}
ul{margin:0 0 1.05rem;padding-left:1.1rem;max-width:66ch}
li{margin-bottom:.35rem}
a{color:var(--encre);text-decoration:none;border-bottom:1px solid var(--filet)}
a:hover{color:var(--sceau);border-bottom-color:var(--sceau)}
:focus-visible{outline:2px solid var(--sceau);outline-offset:3px}

.skip{position:absolute;left:-9999px;background:var(--encre);color:var(--papier);padding:.6rem 1rem;border:0}
.skip:focus{left:1rem;top:.6rem;z-index:40}

/* --- en-tête ------------------------------------------------------ */
.banner{border-bottom:1px solid var(--filet);background:var(--papier);position:sticky;top:0;z-index:20}
.banner-inner{max-width:var(--col);margin:0 auto;padding:.9rem 1.5rem;display:flex;gap:1.5rem;align-items:baseline;flex-wrap:wrap}
.mark{font-size:1.02rem;font-weight:600;color:var(--encre);border:0;white-space:nowrap}
.mark span{display:block;font-family:var(--sans);font-size:.92rem;font-weight:400;color:var(--marge)}
nav{margin-left:auto;display:flex;gap:1.15rem;flex-wrap:wrap}
nav a{font-family:var(--sans);font-size:.93rem;color:var(--ardoise);border:0;padding-bottom:2px;border-bottom:2px solid transparent}
nav a:hover{color:var(--sceau);border-bottom-color:var(--filet)}
nav a.active{color:var(--encre);border-bottom-color:var(--sceau)}

/* --- gabarit à colonne de marge ----------------------------------- */
main{max-width:var(--col);margin:0 auto;padding:0 1.5rem 5rem}
.block{display:grid;grid-template-columns:1fr;gap:.3rem;padding:2.4rem 0;border-top:1px solid var(--filet)}
.block:first-of-type{border-top:0}
.margin-note{font-family:var(--sans);font-size:.83rem;line-height:1.5;color:var(--marge);padding-top:.3rem}
.margin-note b{display:block;font-weight:600;color:var(--ardoise)}
@media(min-width:62rem){
  .block{grid-template-columns:11rem 1fr;gap:2.6rem}
  .margin-note{text-align:right;border-right:1px solid var(--filet);padding-right:1.2rem;min-height:2rem}
}

/* --- ouverture ----------------------------------------------------- */
.opening{padding:3.6rem 0 2.6rem;border-top:0}
.lede{font-size:1.18rem;max-width:58ch;margin-top:1.1rem}
.registration{margin-top:2rem;border:1px solid var(--filet);border-left:3px solid var(--sceau);padding:1rem 1.2rem;max-width:34rem;background:var(--surface)}
.registration dl{margin:0;font-family:var(--sans);font-size:.85rem;display:grid;grid-template-columns:auto 1fr;gap:.25rem 1rem}
.registration dt{color:var(--marge)}
.registration dd{margin:0;color:var(--encre)}

/* --- éléments ------------------------------------------------------ */
.actions{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:1.6rem}
.button{font-family:var(--sans);font-size:.87rem;padding:.6rem 1.1rem;border:1px solid var(--encre);color:var(--encre);background:transparent;cursor:pointer;border-radius:1px}
.button:hover{background:var(--encre);color:var(--papier);border-color:var(--encre)}
.button.seal{border-color:var(--sceau);color:var(--sceau)}
.button.seal:hover{background:var(--sceau);color:var(--papier)}

.domains{display:grid;gap:1.6rem}
@media(min-width:48rem){.domains{grid-template-columns:1fr 1fr;gap:1.9rem 2.6rem}}
.domain h3{display:flex;gap:.6rem;align-items:baseline}
.domain h3 i{color:var(--sceau);font-size:.85em;width:1.1em;flex:none}
.domain p{margin:0;font-size:.99rem}

.pair{display:grid;gap:1.7rem}
@media(min-width:48rem){.pair{grid-template-columns:1fr 1fr;gap:2.6rem}}
.frame{border-top:2px solid var(--encre);padding-top:.9rem}
.frame p{font-size:.99rem}

.oath{font-style:italic;font-size:1.12rem;color:var(--encre);border-left:3px solid var(--sceau);padding:.2rem 0 .2rem 1.3rem;max-width:52ch;margin:0}
.oath cite{display:block;font-style:normal;font-family:var(--sans);font-size:.88rem;color:var(--marge);margin-top:.6rem}

.steps{list-style:none;padding:0;counter-reset:s;max-width:none}
.steps li{counter-increment:s;display:grid;grid-template-columns:2rem 1fr;gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--filet)}
.steps li::before{content:counter(s);font-family:var(--sans);font-size:.8rem;color:var(--sceau);padding-top:.35rem}
.steps p{margin:0;font-size:.99rem}

.register{border-collapse:collapse;width:100%;font-size:.97rem}
.register th,.register td{text-align:left;padding:.55rem .8rem .55rem 0;border-bottom:1px solid var(--filet);vertical-align:top}
.register th{font-family:var(--sans);font-size:.88rem;font-weight:600;color:var(--marge)}
.register td:first-child{font-family:var(--sans);font-size:.85rem;white-space:nowrap;color:var(--encre)}

details{border-bottom:1px solid var(--filet);padding:.85rem 0}
summary{cursor:pointer;font-size:1.04rem;color:var(--encre);font-weight:500;list-style:none;display:flex;gap:.7rem;align-items:baseline}
summary::-webkit-details-marker{display:none}
summary i{color:var(--sceau);font-size:.92em;transition:transform .2s}
details[open] summary i{transform:rotate(90deg)}
details p{margin:.7rem 0 .2rem;font-size:.99rem}

/* --- formulaire ---------------------------------------------------- */
form{max-width:38rem}
.field{margin-bottom:1rem}
label{display:block;font-family:var(--sans);font-size:.82rem;margin-bottom:.25rem}
label .req{color:var(--sceau)}
input,select,textarea{width:100%;font-family:var(--sans);font-size:.92rem;padding:.55rem .65rem;border:1px solid var(--filet);background:var(--papier);color:var(--encre);border-radius:1px}
textarea{min-height:7rem;resize:vertical}
.field-pair{display:grid;gap:1rem}
@media(min-width:40rem){.field-pair{grid-template-columns:1fr 1fr}}
.consent{display:flex;gap:.55rem;align-items:flex-start;font-family:var(--sans);font-size:.83rem}
.consent input{width:auto;margin-top:.35rem}
.honeypot{position:absolute;left:-9999px}
.privacy{font-family:var(--sans);font-size:.88rem;color:var(--marge);max-width:46rem;line-height:1.6;margin-top:1.4rem}

/* --- pied de page --------------------------------------------------- */
footer{border-top:1px solid var(--filet);background:var(--surface)}
.footer-inner{max-width:var(--col);margin:0 auto;padding:2.4rem 1.5rem;display:grid;gap:1.8rem;font-family:var(--sans);font-size:.84rem}
@media(min-width:48rem){.footer-inner{grid-template-columns:repeat(3,1fr)}}
.footer-inner h2{font-family:var(--sans);font-size:.88rem;font-weight:600;color:var(--marge);margin-bottom:.5rem}
.footer-inner ul{list-style:none;padding:0;margin:0}
.footer-inner li{margin-bottom:.3rem}
.footer-inner a{border:0;color:var(--ardoise)}
.footer-inner a:hover{color:var(--sceau)}
.colophon{max-width:var(--col);margin:0 auto;padding:0 1.5rem 2rem;font-family:var(--sans);font-size:.75rem;color:var(--marge)}