:root{
  --papier:#F5F6F2; --surface:#FFFFFF; --encre:#18221C; --encre-douce:#5B6B61;
  --trait:#DCE1D8; --sceau:#1D6B4A; --sceau-pale:#E6F0EA; --sceau-encre:#FFFFFF;
  --attention:#9C660F; --attention-pale:#F7EEDC; --refus:#9B3022; --refus-pale:#F6E4E0;
  --neutre:#5B6B61; --neutre-pale:#ECEFEA;
  --ombre:0 1px 2px rgba(24,34,28,.06), 0 4px 16px rgba(24,34,28,.04);
  --serif: "Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans: -apple-system,"Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono: ui-monospace,"Cascadia Mono","SF Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --papier:#101512; --surface:#171E1A; --encre:#E8EDE8; --encre-douce:#9CAAA0;
    --trait:#2A342D; --sceau:#5FBF92; --sceau-pale:#16271F; --sceau-encre:#0D1410;
    --attention:#D6A249; --attention-pale:#2A2214; --refus:#E08272; --refus-pale:#2C1A17;
    --neutre:#9CAAA0; --neutre-pale:#1E2621;
    --ombre:0 1px 2px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --papier:#101512; --surface:#171E1A; --encre:#E8EDE8; --encre-douce:#9CAAA0;
  --trait:#2A342D; --sceau:#5FBF92; --sceau-pale:#16271F; --sceau-encre:#0D1410;
  --attention:#D6A249; --attention-pale:#2A2214; --refus:#E08272; --refus-pale:#2C1A17;
  --neutre:#9CAAA0; --neutre-pale:#1E2621;
  --ombre:0 1px 2px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--papier); color:var(--encre); font-family:var(--sans);
     font-size:16px; line-height:1.55}
a{color:var(--sceau)}
.page{max-width:64rem; margin:0 auto; padding:0 16px 4rem}
header.bandeau{display:flex; align-items:center; justify-content:space-between; gap:1rem;
     padding:1.25rem 0; border-bottom:1px solid var(--trait); margin-bottom:2rem}
.marque{display:flex; align-items:baseline; gap:.75rem; flex-wrap:wrap}
.marque .nom{font-family:var(--serif); font-size:1.65rem; font-weight:600; letter-spacing:.01em}
.marque .sceau{display:inline-block; width:.7rem; height:.7rem; border-radius:50%;
     background:var(--sceau); margin-right:.45rem; transform:translateY(-.1rem)}
.marque .devise{color:var(--encre-douce); font-size:.95rem}
.pastille{font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
     color:var(--attention); border:1px solid currentColor; border-radius:999px; padding:.1rem .55rem}
header .sortir{font-size:.9rem; color:var(--encre-douce); text-decoration:none; white-space:nowrap}
header .sortir:hover{color:var(--encre)}
h1,h2{font-family:var(--serif); font-weight:600; line-height:1.25}
h1{font-size:2rem; margin:0 0 .5rem}
h2{font-size:1.3rem; margin:0 0 1rem}
.chapeau{font-size:1.08rem; color:var(--encre-douce); max-width:46rem; margin:0 0 1.5rem}
.avis{background:var(--attention-pale); border-left:3px solid var(--attention); padding:1rem 1.15rem;
     border-radius:0 6px 6px 0; margin:0 0 2.25rem; font-size:.93rem; max-width:52rem}
.avis strong{color:var(--encre)}
.avis p{margin:.25rem 0}
section{margin-bottom:2.5rem}
.etape{display:flex; align-items:center; gap:.65rem; margin-bottom:1rem}
.etape .num{flex:none; width:1.75rem; height:1.75rem; border-radius:50%; background:var(--sceau);
     color:var(--sceau-encre); display:grid; place-items:center; font-size:.85rem; font-weight:600}
.etape h2{margin:0}
.exemples{display:grid; grid-template-columns:repeat(auto-fill,minmax(17rem,1fr)); gap:1rem}
.exemple{background:var(--surface); border:1px solid var(--trait); border-radius:8px; padding:1rem 1.1rem;
     text-align:left; font:inherit; color:inherit; cursor:pointer; box-shadow:var(--ombre);
     display:flex; flex-direction:column; gap:.35rem; transition:border-color .15s, transform .15s}
.exemple:hover{border-color:var(--sceau); transform:translateY(-1px)}
.exemple[aria-pressed="true"]{border-color:var(--sceau); background:var(--sceau-pale)}
.exemple .public{font-size:.75rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--sceau)}
.exemple .titre{font-family:var(--serif); font-size:1.08rem; font-weight:600}
.exemple .resume{font-size:.9rem; color:var(--encre-douce)}
.carte{background:var(--surface); border:1px solid var(--trait); border-radius:10px; padding:1.25rem;
     box-shadow:var(--ombre)}
label{display:block; font-weight:600; font-size:.9rem; margin-bottom:.35rem}
.aide{font-weight:400; color:var(--encre-douce)}
input[type=text], input[type=password], textarea{width:100%; font:inherit; color:var(--encre);
     background:var(--papier); border:1px solid var(--trait); border-radius:6px; padding:.6rem .7rem}
textarea{min-height:16rem; font-family:var(--mono); font-size:.86rem; line-height:1.5; resize:vertical}
input:focus, textarea:focus{outline:2px solid var(--sceau); outline-offset:1px; border-color:transparent}
.champ{margin-bottom:1.1rem}
.ou{display:flex; align-items:center; gap:.75rem; color:var(--encre-douce); font-size:.85rem; margin:1rem 0}
.ou::before,.ou::after{content:""; flex:1; border-top:1px solid var(--trait)}
.depot{border:1.5px dashed var(--trait); border-radius:8px; padding:1.1rem; text-align:center;
     color:var(--encre-douce); font-size:.92rem; cursor:pointer; transition:border-color .15s, background .15s}
.depot.survol, .depot:hover{border-color:var(--sceau); background:var(--sceau-pale)}
.depot strong{color:var(--encre)}
.depot input{display:none}
.fichier-choisi{margin-top:.5rem; font-size:.9rem; color:var(--encre)}
.fichier-choisi button{margin-left:.5rem}
.actions{display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:1.25rem}
button.principal, a.principal{background:var(--sceau); color:var(--sceau-encre); border:0; border-radius:6px;
     padding:.7rem 1.3rem; font:inherit; font-weight:600; cursor:pointer; text-decoration:none; display:inline-block}
button.principal:disabled{opacity:.5; cursor:not-allowed}
button.second, a.second{background:transparent; color:var(--encre); border:1px solid var(--trait); border-radius:6px;
     padding:.6rem 1.1rem; font:inherit; cursor:pointer; text-decoration:none; display:inline-block}
button.lien{background:none; border:0; color:var(--sceau); font:inherit; font-size:.85rem; cursor:pointer; padding:0;
     text-decoration:underline}
.erreur{color:var(--refus); font-weight:600}
.attente{display:flex; align-items:center; gap:.9rem; font-size:1rem}
.rouage{width:1.4rem; height:1.4rem; border:2.5px solid var(--sceau-pale); border-top-color:var(--sceau);
     border-radius:50%; animation:tourne 1s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.rouage{animation-duration:3s}}
.attente .detail{color:var(--encre-douce); font-size:.9rem}
.bilan{display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem; margin:1rem 0 1.25rem}
.verdict{border-radius:8px; padding:.85rem 1rem; background:var(--neutre-pale)}
.verdict .chiffre{font-family:var(--serif); font-size:2rem; font-weight:600; line-height:1}
.verdict .symbole{font-size:1.05rem; margin-right:.3rem}
.verdict .libelle{font-size:.85rem; margin-top:.35rem}
.verdict.ok{background:var(--sceau-pale)} .verdict.ok .chiffre{color:var(--sceau)}
.verdict.ko{background:var(--refus-pale)} .verdict.ko .chiffre{color:var(--refus)}
.verdict.att{background:var(--attention-pale)} .verdict.att .chiffre{color:var(--attention)}
.verdict.nc .chiffre{color:var(--neutre)}
.notes{font-size:.9rem; color:var(--encre-douce); margin:.25rem 0 1rem}
.notes li{margin:.2rem 0}
.cadre{width:100%; height:80vh; border:1px solid var(--trait); border-radius:8px; background:#fff; margin-top:1.25rem}
footer{border-top:1px solid var(--trait); margin-top:3rem; padding-top:1.25rem; font-size:.82rem; color:var(--encre-douce)}
footer p{margin:.35rem 0; max-width:52rem}
.connexion{max-width:24rem; margin:12vh auto 0; padding:0 16px}
.connexion .carte{padding:1.75rem}
.connexion h1{font-size:1.6rem}
[hidden]{display:none !important}
@media (max-width:40rem){
  .bilan{grid-template-columns:repeat(2,1fr)}
  h1{font-size:1.6rem}
  .marque .devise{display:none}
  .cadre{height:70vh}
}