:root{
  --ink:#14213d; --muted:#475569; --bg:#f8fafc; --card:#ffffff; --line:#e2e8f0;
  --accent:#0f766e; --accent-dark:#115e59; --accent-soft:#ccfbf1;
  --warn-bg:#fef3c7; --warn-ink:#78350f; --warn-line:#b45309;
  --ok-bg:#dcfce7; --ok-ink:#14532d; --wait-bg:#e0f2fe; --wait-ink:#0c4a6e;
  --clos-bg:#e2e8f0; --clos-ink:#1e293b; --alert-bg:#fee2e2; --alert-ink:#7f1d1d;
  --radius:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;font-size:1.0625rem}
h1,h2,h3{line-height:1.2;margin:0 0 .6em;letter-spacing:-.01em}
h1{font-size:clamp(1.9rem,5vw,3rem)}
h2{font-size:clamp(1.5rem,3.5vw,2rem)}
h3{font-size:1.2rem}
p{margin:0 0 1em}
a{color:var(--accent-dark)}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid #f59e0b;outline-offset:3px;border-radius:4px}
.wrap{width:min(1100px,100% - 2rem);margin-inline:auto}
.wrap.etroit{width:min(780px,100% - 2rem)}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:100}
.skip:focus{left:0}

/* Bandeau de démonstration */
.bandeau{background:var(--warn-bg);color:var(--warn-ink);border-bottom:3px solid var(--warn-line);padding:.7rem 0;font-weight:600;text-align:center}
.bandeau p{margin:0}

/* En-tête */
.entete{background:#fff;border-bottom:1px solid var(--line)}
.entete .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1.5rem;padding:.9rem 0}
.logo{font-size:1.6rem;font-weight:800;letter-spacing:-.03em;color:var(--ink);text-decoration:none}
.logo span{color:var(--accent)}
.nav{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem;align-items:center}
.nav a{color:var(--ink);text-decoration:none;padding:.4rem .2rem;font-weight:500}
.nav a:hover,.nav a[aria-current="page"]{color:var(--accent-dark);text-decoration:underline;text-underline-offset:4px}

/* Boutons */
.btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-weight:700;border:2px solid var(--accent);border-radius:12px;padding:.8rem 1.4rem;font-size:1rem;font-family:inherit;cursor:pointer;text-align:center}
.btn:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:#fff}
.btn.gros{font-size:1.25rem;padding:1.05rem 2rem}
.btn.clair{background:#fff;color:var(--accent-dark)}
.btn.clair:hover{background:var(--accent-soft);color:var(--ink)}
.btn.petit{padding:.45rem .9rem;font-size:.95rem}

/* Sections */
section{padding:3.5rem 0}
.hero{background:linear-gradient(180deg,#ecfeff 0,var(--bg) 100%);padding:4.5rem 0 4rem}
.hero p.chapo{font-size:1.25rem;color:var(--muted);max-width:40rem}
.actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.8rem}
.grille{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.carte{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem}
.carte p:last-child{margin-bottom:0}
.etapes{list-style:none;margin:0;padding:0;counter-reset:e;display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.etapes li{counter-increment:e;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem}
.etapes li::before{content:counter(e);display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--accent);color:#fff;font-weight:800;margin-bottom:.8rem}
.fond-clair{background:#fff;border-block:1px solid var(--line)}
.appel{background:var(--ink);color:#fff;text-align:center}
.appel p{color:#e2e8f0;max-width:36rem;margin-inline:auto}
.appel .btn{background:#fff;color:var(--ink);border-color:#fff}
.appel .btn:hover{background:var(--accent-soft)}
.note{color:var(--muted);font-size:.95rem}

/* Pied de page */
.pied{background:#fff;border-top:1px solid var(--line);padding:2rem 0;font-size:.95rem;color:var(--muted)}
.pied .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem}
.pied ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.25rem}
.pied p{margin:0}

/* Pages légales */
.legal h2{margin-top:2rem;font-size:1.4rem}
.completer{background:#fff3b0;color:#3b2f00;font-weight:700;padding:.1rem .45rem;border-radius:6px;border:1px dashed var(--warn-line);white-space:nowrap}
.legal dl{display:grid;grid-template-columns:minmax(10rem,14rem) 1fr;gap:.6rem 1.25rem}
.legal dt{font-weight:700}
.legal dd{margin:0}
@media(max-width:600px){.legal dl{grid-template-columns:1fr;gap:.1rem}.legal dd{margin-bottom:.8rem}}

/* Espace client */
.espace{padding:2.5rem 0 4rem}
.barre{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;justify-content:space-between;align-items:center;margin-bottom:1.5rem}
.barre p{margin:0}
.formulaire{display:grid;gap:1rem;max-width:26rem}
label{font-weight:600;display:block;margin-bottom:.25rem}
input[type=text],input[type=password]{width:100%;font:inherit;padding:.7rem .8rem;border:2px solid #64748b;border-radius:10px;background:#fff;color:var(--ink)}
.erreur{background:var(--alert-bg);color:var(--alert-ink);padding:.7rem 1rem;border-radius:10px;font-weight:600;margin:0}
.identifiants{background:#f1f5f9;border:2px dashed #64748b;border-radius:var(--radius);padding:1.25rem}
.identifiants h3{margin-bottom:.5rem}
.identifiants ul{list-style:none;padding:0;margin:0;display:grid;gap:1rem}
.identifiants li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:.9rem 1rem}
.identifiants code{background:#e2e8f0;padding:.1rem .4rem;border-radius:5px;font-size:1rem}
.deux{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.parcours{display:block;background:#fff;border:2px solid var(--line);border-radius:var(--radius);padding:2rem;text-decoration:none;color:var(--ink);transition:border-color .15s,transform .15s}
.parcours:hover{border-color:var(--accent);transform:translateY(-2px)}
.parcours h2{color:var(--accent-dark);margin-bottom:.4rem}
.parcours .compte{font-weight:700;margin-top:1rem;margin-bottom:0}
.hidden{display:none!important}

.resume{display:flex;flex-wrap:wrap;gap:.75rem;margin:0 0 1.5rem;padding:0;list-style:none}
.resume li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:.5rem 1rem}
.resume strong{font-size:1.2rem}

/* Tableau */
table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
caption{text-align:left;font-weight:700;padding:0 0 .6rem;font-size:1.1rem}
th,td{text-align:left;padding:.8rem .9rem;vertical-align:top;border-bottom:1px solid var(--line)}
thead th{background:#f1f5f9;font-size:.9rem;text-transform:none}
tbody tr:last-child td{border-bottom:0}
tbody tr{cursor:pointer}
tbody tr:hover{background:#f8fafc}
tbody tr.choisi{background:#ecfeff;box-shadow:inset 4px 0 0 var(--accent)}
td.montant{white-space:nowrap;text-align:right}
th.montant{text-align:right}
.lien-dossier{font:inherit;font-weight:700;color:var(--accent-dark);background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.badge{display:inline-block;border-radius:999px;padding:.15rem .7rem;font-size:.9rem;font-weight:700}
.badge.attente{background:var(--wait-bg);color:var(--wait-ink)}
.badge.ok{background:var(--ok-bg);color:var(--ok-ink)}
.badge.clos{background:var(--clos-bg);color:var(--clos-ink)}
.badge.alerte{background:var(--alert-bg);color:var(--alert-ink)}
@media(max-width:820px){
  table,tbody,tr,td{display:block;width:100%}
  thead{position:absolute;left:-9999px}
  table{border:0;background:none}
  tbody tr{background:#fff;border:1px solid var(--line);border-radius:var(--radius);margin-bottom:1rem;padding:.4rem 0;overflow:hidden}
  td{border:0;padding:.35rem 1rem;display:grid;grid-template-columns:8.5rem 1fr;gap:.5rem}
  td::before{content:attr(data-label);font-weight:700;color:var(--muted);font-size:.95rem}
  td.montant{text-align:left}
}

/* Détail et frise */
.detail{margin-top:2rem;background:#fff;border:2px solid var(--accent);border-radius:var(--radius);padding:1.5rem}
.detail .vide{color:var(--muted);margin:0}
.detail dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.8rem 1.5rem;margin:1rem 0 1.8rem}
.detail dt{font-size:.9rem;color:var(--muted);font-weight:600}
.detail dd{margin:0;font-weight:600}
.frise{list-style:none;margin:0;padding:0}
.frise li{position:relative;padding:0 0 1.6rem 3.2rem;min-height:2.6rem}
.frise li::before{content:"";position:absolute;left:1.05rem;top:2.3rem;bottom:-.1rem;width:3px;background:var(--line)}
.frise li:last-child::before{display:none}
.frise li.fait::before{background:var(--accent)}
.marqueur{position:absolute;left:0;top:0;width:2.4rem;height:2.4rem;border-radius:50%;display:grid;place-items:center;font-weight:800;background:#fff;border:3px solid #64748b;color:#334155}
.frise li.fait .marqueur{background:var(--accent);border-color:var(--accent);color:#fff}
.frise li.courant .marqueur{border-color:var(--accent);color:var(--accent-dark);box-shadow:0 0 0 5px var(--accent-soft)}
.frise li.ignoree .marqueur{border-style:dashed;color:#475569}
.frise .nom{font-weight:700;display:block}
.frise .etat{display:inline-block;font-size:.85rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.frise li.courant .etat{color:var(--accent-dark)}
.frise .info{display:block;color:var(--muted);font-size:.95rem}
@media(min-width:900px){
  .frise{display:grid;grid-template-columns:repeat(var(--n),1fr)}
  .frise li{padding:3.4rem .8rem 0 0}
  .frise li::before{left:2.4rem;right:0;top:1.05rem;bottom:auto;width:auto;height:3px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}