:root{
  --bg:#0b1220; --card:#121a2a; --muted:#8aa0b7;
  --text:#e6eef6; --text-dim:#c8d2df;
  --primary:#3b82f6; --primary-600:#2563eb;
  --success:#10b981; --warning:#f59e0b; --danger:#ef4444;
  --ring:rgba(59,130,246,.5); --shadow:rgba(0,0,0,.3);
  --radius:16px; --radius-sm:12px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,sans-serif;
  color:var(--text); background:linear-gradient(180deg,#0b1220 0%,#070c16 100%) fixed;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--primary); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; height:auto; display:block}
.container{max-width:1100px; margin:0 auto; padding:20px}

.header{position:sticky; top:0; z-index:100; backdrop-filter:saturate(180%) blur(10px);
  background:rgba(11,18,32,.7); border-bottom:1px solid rgba(255,255,255,.06)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 16px}
.nav .brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px}
.nav .brand img{width:36px; height:36px; border-radius:10px; box-shadow:0 8px 18px var(--shadow)}
.nav .links{display:flex; gap:14px; flex-wrap:wrap}
.nav .links a{padding:8px 12px; border-radius:999px; color:var(--text); background:rgba(255,255,255,.04)}
.nav .links a:hover{background:rgba(255,255,255,.08)}

.hero{padding:38px 16px 8px}
.hero .head{display:grid; gap:10px; text-align:center}
.hero h1{margin:0; font-size:clamp(28px,3.6vw,40px); letter-spacing:.3px}
.hero p{margin:0 auto; max-width:800px; color:var(--text-dim)}
.cta{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:14px}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 16px;
  border-radius:999px; font-weight:600; border:1px solid transparent; transition:.15s ease; cursor:pointer}
.btn:focus{outline:none; box-shadow:0 0 0 3px var(--ring)}
.btn-primary{background:var(--primary); color:#fff}
.btn-primary:hover{background:var(--primary-600); transform:translateY(-1px); box-shadow:0 10px 22px rgba(59,130,246,.35)}
.btn-ghost{background:rgba(255,255,255,.06); color:var(--text)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}

.grid{display:grid; gap:16px}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){.grid-3{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.grid-3{grid-template-columns:1fr}}

.card{background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius);
  box-shadow:0 10px 25px var(--shadow); padding:18px}
.card h3{margin:0 0 6px; font-size:18px}
.card p{margin:0; color:var(--text-dim)}

.footer{margin-top:30px; border-top:1px solid rgba(255,255,255,.08); color:var(--text-dim)}
.footer .wrap{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; padding:14px 16px}

.form{display:grid; gap:10px}
.input, .select, .textarea{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04); color:var(--text)
}
.input::placeholder{color:#98a6bb}
.input:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--ring)}
.help{color:var(--muted); font-size:13px}

.badge{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; font-size:13px}
.badge.ok{background:rgba(16,185,129,.15); color:#9ff2d3}
.badge.warn{background:rgba(245,158,11,.15); color:#ffd89a}
.badge.danger{background:rgba(239,68,68,.15); color:#ffb3b3}

.table{width:100%; border-collapse:separate; border-spacing:0; font-size:15px}
.table th,.table td{padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.08)}
.table th{text-align:left; color:var(--text-dim); font-weight:600}
.table tr:hover td{background:rgba(255,255,255,.03)}

.kpi{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:10px 0}
@media (max-width:980px){.kpi{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.kpi{grid-template-columns:1fr}}
.kpi .tile{background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:14px}
.kpi .tile .label{font-size:13px; color:var(--muted)}
.kpi .tile .value{font-size:22px; font-weight:700; margin-top:4px}

.flash{margin:10px 0; padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.08)}
.flash.ok{background:rgba(16,185,129,.12); color:#cef7e6}
.flash.err{background:rgba(239,68,68,.12); color:#ffd0d0}
.flash.info{background:rgba(59,130,246,.12); color:#cfe2ff}

hr{border:none; border-top:1px solid rgba(255,255,255,.08); margin:18px 0}
.small{font-size:13px; color:var(--muted)}

/* ===== Variables + base ===== */
:root{
  --bg:#0b1220; --bg2:#0e1830;
  --card:#0f1d36; --border:#1e2b4b;
  --text:#e6edf7; --muted:#9fb4d9;
  --accent:#3b82f6; --accent-2:#60a5fa;
  --radius:16px; --radius-sm:12px;
  --shadow:0 10px 25px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 50% -200px,#173058 0%,transparent 60%),
    linear-gradient(180deg,var(--bg),#070c16 100%);
  min-height:100vh; display:flex; flex-direction:column;
}

/* ===== Topbar / nav ===== */
.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(140%) blur(6px);
  background:rgba(8,13,24,.6);
  border-bottom:1px solid var(--border);
}
.wrap{
  max-width:1100px; margin:0 auto; padding:12px 16px;
  display:flex; align-items:center; gap:10px;
}
.nav{display:flex; gap:10px; flex-wrap:wrap}
.spacer{flex:1}

/* ===== Boutons ===== */
.btn{
  appearance:none; border:0; text-decoration:none; cursor:pointer;
  color:#fff; background:linear-gradient(180deg,var(--accent),#2467e6);
  padding:10px 14px; border-radius:999px; font-weight:600; font-size:14px; letter-spacing:.2px;
  display:inline-flex; align-items:center; gap:8px;
  box-shadow:0 6px 18px rgba(59,130,246,.35);
  transition:transform .15s, box-shadow .15s, background .15s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 10px 22px rgba(59,130,246,.5)}
.btn-ghost{background:transparent; color:var(--text); border:1px solid var(--border); box-shadow:none}
.btn-ghost:hover{background:#132348; border-color:#2a3b63}

/* ===== Hero ===== */
.hero{ text-align:center; padding:40px 16px 10px }
.logo{
  width:min(520px,70vw); height:auto; display:block; margin:10px auto 0;
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.4)); border-radius:24px;
}

/* ===== Grille & cards ===== */
.content{flex:1}
.grid{
  max-width:1100px; margin:20px auto 60px; padding:0 16px;
  display:grid; grid-template-columns:repeat(12,1fr); gap:18px;
}
.card{
  grid-column: span 12;
  background:linear-gradient(180deg,var(--card),#0d1930);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px;
}
.card h2{ margin:0 0 10px; font-size:22px; letter-spacing:.2px }
.card p{ margin:0 0 16px; line-height:1.6; color:var(--muted) }
.card .actions{ display:flex; gap:10px; flex-wrap:wrap }

/* ===== Footer ===== */
footer{border-top:1px solid var(--border); background:#070c16; color:var(--muted); padding:26px 16px}
footer .wrap{max-width:1100px; justify-content:center; gap:14px; flex-wrap:wrap}
footer a{color:var(--muted); text-decoration:none}
footer a:hover{color:#cfe0ff; text-decoration:underline}

/* ===== Utilitaires ===== */
.visually-hidden{
  position:absolute!important; height:1px;width:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap;
}

/* ===== Responsive (commun) ===== */
@media (min-width:720px){
  .card{ grid-column: span 6 }
}
@media (min-width:1024px){
  .card{ grid-column: span 6 }
  .card--wide{ grid-column: span 12 }
}

/* ===== Spécifique évalu (scopé) ===== */
.page-evaluation .container{ max-width:900px; margin:20px auto 60px; padding:0 16px }
.page-evaluation .section + .section{ margin-top:18px }
.page-evaluation .divider{ height:1px; background:var(--border); margin:26px 0; border:0 }
.page-evaluation .form{
  display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:10px;
}
.page-evaluation .input{
  padding:12px 14px; font-size:16px; border-radius:12px; width:min(320px,80vw);
  border:1px solid var(--border); background:#0b1730; color:var(--text);
  letter-spacing:.06em; text-transform:uppercase;
  outline:none; transition:border-color .15s, box-shadow .15s;
}
.page-evaluation .input:focus{ border-color:#2a3b63; box-shadow:0 0 0 4px rgba(59,130,246,.25) }
.page-evaluation .help{ margin-top:8px; text-align:center; color:var(--muted) }

/* ===========================
   Questions (page-questions)
   =========================== */

/* barre PDF + badges */
.page-questions .pdfbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.page-questions .badge{
  font-weight:800;padding:12px 14px;border-radius:999px;
  border:1px solid var(--border);background:#0c1a34;color:#cfe0ff
}
.page-questions .pdf-btn a{
  display:inline-block;padding:10px 14px;border-radius:10px;
  background:#13223f;color:#d1d5db;font-weight:700;
  box-shadow:0 6px 18px rgba(0,0,0,.35)
}
.page-questions .pdf-btn a:hover{background:#182a55}

/* conteneur appli */
.page-questions .appbox{
  background:linear-gradient(180deg,#0f1d36,#0b162c);
  border:1px solid var(--border);border-radius:var(--radius);padding:14px
}
.page-questions .app-head{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:10px;flex-wrap:wrap}
.page-questions .controls{display:flex;gap:10px;flex-wrap:wrap}

/* segmented control */
.page-questions .seg{display:flex;border:1px solid #2a3b63;border-radius:12px;overflow:hidden}
.page-questions .seg button{background:transparent;color:#c6d6f8;border:0;padding:10px 14px;font-weight:700;cursor:pointer}
.page-questions .seg button.active{background:#182a55;color:#fff}

/* variantes de bouton locales (ne pollue pas global) */
.page-questions .btn.secondary{background:#13223f;color:#d1d5db;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.page-questions .btn.ghost{background:transparent;border:1px solid #2a3b63;color:#c6d6f8}

/* cartes questions */
.page-questions .qgrid{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:860px){.page-questions .qgrid{grid-template-columns:repeat(3,1fr)}}
.page-questions .qcard{
  background:linear-gradient(180deg,#101a2f 0%, #0b1220 100%);
  border:1px solid #1f2a3b;border-radius:16px;padding:16px;position:relative;min-height:220px
}
.page-questions .pill{
  position:absolute;top:12px;left:12px;font-size:12px;font-weight:800;
  padding:6px 10px;border-radius:999px;border:1px solid #24324a;background:#0b1220;color:#bcd0ea
}
.page-questions .q{font-size:16px;line-height:1.45;margin-top:28px;white-space:pre-wrap}
.page-questions .q img{margin-top:10px;max-width:100%;border-radius:10px}
.page-questions .ans{
  margin-top:12px;padding:10px;border-left:3px solid var(--success);
  background:rgba(16,185,129,.08);border-radius:8px;color:#d7ffe9;display:none;white-space:pre-wrap
}
.page-questions .ans.visible{display:block}
.page-questions .subtle{color:var(--muted);font-size:12px;margin-top:6px}
.page-questions .footerbar{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
.page-questions .id{font-family:ui-monospace,Menlo,Consolas,monospace;color:#94a3b8}

/* ===========================
   Résultat permis (page-resultat)
   =========================== */
.page-resultat .subtitle{
  text-align:center; max-width:900px; margin:12px auto 0; color:var(--muted); line-height:1.6;
}
/* Figures / images */
.page-resultat figure{ margin:18px auto; text-align:center }
.page-resultat figure img{
  max-width:100%; height:auto; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.page-resultat figcaption{ margin-top:8px; font-style:italic; color:#bcd0ea }
/* Titres et textes dans cartes */
.page-resultat .card h1{ font-size:26px; margin:0 0 12px }
.page-resultat .card h2{ font-size:20px; margin:18px 0 12px }
.page-resultat .card p,
.page-resultat .card li,
.page-resultat .card dd{ color:var(--muted); line-height:1.7 }
/* Listes */
.page-resultat ol{ padding-left:18px }
.page-resultat ol li{ margin-bottom:18px }
/* Définitions */
.page-resultat dl{ margin:10px 0 }
.page-resultat dt{ font-weight:700; margin-top:14px; color:#dfe9ff }

/* ===========================
   Contact (page-contact)
   =========================== */
.page-contact .subtitle{
  text-align:center; max-width:900px; margin:12px auto 0; color:var(--muted); line-height:1.6;
}

/* Carte */
.page-contact .card{
  grid-column:1 / -1;
  background:linear-gradient(180deg, var(--card), #0d1930);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px;
}
.page-contact .card h1{ margin:0 0 12px; font-size:26px }
.page-contact .card p{ color:var(--muted); line-height:1.7 }

/* Formulaire */
.page-contact form .row{ display:grid; grid-template-columns:1fr; gap:14px }
@media (min-width:720px){ .page-contact form .row{ grid-template-columns:1fr 1fr } }
.page-contact label{ display:block; font-weight:700; margin:4px 0 6px }
.page-contact input,
.page-contact textarea{
  width:100%; padding:12px 12px; color:#eaf2ff;
  background:#0b1530; border:1px solid #20335a; border-radius:10px;
  outline:0; transition:border .15s ease, box-shadow .15s ease;
}
.page-contact input:focus,
.page-contact textarea:focus{ border-color:#3a57a1; box-shadow:0 0 0 3px rgba(59,130,246,.25) }
.page-contact textarea{ resize:vertical; min-height:140px }

.page-contact .actions{ margin-top:8px; display:flex; gap:10px; flex-wrap:wrap }
.page-contact .submit{ padding:12px 18px; border-radius:12px; border:0; cursor:pointer }
.page-contact .submit.primary{
  background:linear-gradient(180deg, var(--accent) 0%, #2467e6 100%);
  color:#fff; font-weight:700;
}
.page-contact .submit.primary:hover{ filter:brightness(1.05) }

/* Alertes */
.page-contact .alert{
  margin:10px 0 18px; padding:12px 14px; border-radius:12px; font-weight:600; border:1px solid transparent;
}
.page-contact .alert.ok{   background:rgba(16,185,129,.12); border-color:rgba(16,185,129,.35); color:#c6ffe1 }
.page-contact .alert.err{  background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.35); color:#ffd6d6 }
.page-contact .alert.warn{ background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.35); color:#ffe9c7 }

/* Honeypot */
.page-contact .hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }

/* ===========================
   Page Aperçu Outils (public)
   =========================== */
.page-apercu .container{ max-width:1100px; margin:0 auto; padding:28px }

/* Hero carte */
.page-apercu .apercu-hero{
  border-radius:20px;
  padding:36px 28px;
  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(59,130,246,.18), transparent 60%),
    radial-gradient(900px 500px at 90% -30%, rgba(239,68,68,.12), transparent 60%),
    var(--card);
  border:1px solid rgba(255,255,255,.06);
  box-shadow: var(--shadow);
}
.page-apercu .lead{ color:var(--muted); max-width:72ch }
.page-apercu .hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:16px }
.page-apercu .hero-cta.center{ justify-content:center }

/* Grilles / paires */
.page-apercu .section{ margin-top:28px }
.page-apercu .apercu-pair{
  display:grid; gap:24px; grid-template-columns: 1.05fr .95fr; align-items:center;
}
.page-apercu .apercu-pair.reverse{ grid-template-columns:.95fr 1.05fr }
@media (max-width:980px){
  .page-apercu .apercu-pair,
  .page-apercu .apercu-pair.reverse{ grid-template-columns:1fr }
}
.page-apercu .apercu-grid{
  display:grid; gap:24px; grid-template-columns:1.05fr .95fr; align-items:center;
}
@media (max-width:980px){
  .page-apercu .apercu-grid{ grid-template-columns:1fr }
}

/* Kicker / notes */
.page-apercu .kicker{ color:var(--accent); font-weight:800; font-size:12px; letter-spacing:.08em; text-transform:uppercase }
.page-apercu .note{ font-size:13px; color:var(--muted) }

/* Mock visuel (images) */
.page-apercu .mock{
  position:relative; border-radius:18px; overflow:hidden;
  border:1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
  box-shadow: var(--shadow);
}
.page-apercu .mock img{ display:block; width:100%; height:auto }
.page-apercu .mock::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.10), transparent 30%, transparent 70%, rgba(0,0,0,.06));
  pointer-events:none;
}
.page-apercu figure{ margin:0 }
.page-apercu figcaption{ font-size:12px; color:var(--muted); margin-top:6px; text-align:center }

/* Footer */
.page-apercu .apercu-footer{ margin:28px 0 8px; color:var(--muted); font-size:14px; text-align:center }

/* Lightbox */
.page-apercu .apercu-lightbox{
  position:fixed; inset:0; background:rgba(0,0,0,.7);
  display:none; place-items:center; padding:20px; z-index:50;
}
.page-apercu .apercu-lightbox.open{ display:grid }
.page-apercu .apercu-lightbox img{
  max-width:95vw; max-height:90vh; border-radius:14px; box-shadow:0 10px 40px rgba(0,0,0,.55);
}
.page-apercu .thumb{ cursor:zoom-in }

/* Utilitaires */
.page-apercu .text-center{text-align:center}

/* ===========================
   Page Inscription AE (public)
   =========================== */
.page-signup-ae .container{ max-width:1100px; margin:20px auto 60px; padding:0 16px; }
.page-signup-ae .signup-card{ max-width:900px; margin:0 auto; }
.page-signup-ae h1{ margin:0 0 8px; }
.page-signup-ae .small{ color:var(--muted); }

.page-signup-ae .grid{ display:grid; gap:12px; }
.page-signup-ae .grid.grid-2{ grid-template-columns:1fr 1fr; }
@media(max-width:780px){ .page-signup-ae .grid.grid-2{ grid-template-columns:1fr; } }

.page-signup-ae label{ display:block; margin:12px 0 6px; font-weight:700; }
.page-signup-ae .input{ width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--border); background:#0b1730; color:var(--text); }
.page-signup-ae .input:focus{ outline:none; border-color:#2a3b63; box-shadow:0 0 0 4px rgba(59,130,246,.25); }

.page-signup-ae .meter{ height:8px; background:#0b1630; border:1px solid #20335a; border-radius:6px; margin-top:8px; overflow:hidden; }
.page-signup-ae .meter>div{ height:100%; width:0%; background:#ef4444; transition:width .2s ease, background .2s ease; }
.page-signup-ae .rules{ list-style:none; margin:8px 0 0; padding:0; font-size:.9em; color:var(--muted); }
.page-signup-ae .rules li.ok{ color:#9ff2d3; }

.page-signup-ae .flash.err{ background:rgba(239,68,68,.12); color:#ffd6d6; border:1px solid rgba(239,68,68,.35); }

.page-signup-ae .section.modules{ border:1px solid var(--border); border-radius:12px; padding:16px; background:#0b1530; margin-top:16px; }
.page-signup-ae .modules-head{ display:grid; grid-template-columns:1fr 120px 120px; gap:8px; font-weight:700; color:var(--text); margin-bottom:8px; }
.page-signup-ae .module-row{ display:grid; grid-template-columns:1fr 120px 120px; gap:8px; align-items:center; background:var(--card); border:1px solid var(--border); border-radius:10px; padding:10px; margin-bottom:8px; }
.page-signup-ae .m-title{ font-weight:700; }
.page-signup-ae .m-sub{ font-size:.85em; color:var(--muted); }
.page-signup-ae .price{ text-align:right; }
.page-signup-ae .status{ text-align:center; }
.page-signup-ae .select-state{ margin-top:6px; }
.page-signup-ae .badge{ display:inline-block; padding:2px 10px; border-radius:999px; font-size:.82em; font-weight:700; background:rgba(59,130,246,.15); color:#cfe0ff; border:1px solid rgba(59,130,246,.35); }
.page-signup-ae .badge.ok{ background:rgba(16,185,129,.15); color:#9ff2d3; border-color:rgba(16,185,129,.35); }
.page-signup-ae .badge.warn{ background:rgba(239,68,68,.15); color:#ffc8c8; border-color:rgba(239,68,68,.35); }

.page-signup-ae .total{ display:flex; justify-content:space-between; align-items:center; margin-top:10px; padding:12px; border:1px dashed #2a3b63; border-radius:10px; background:#0e1834; font-weight:800; }

.page-signup-ae .switch{ position:relative; width:44px; height:24px; display:inline-block; }
.page-signup-ae .switch input{ display:none; }
.page-signup-ae .slider{ position:absolute; inset:0; background:#1f2a3b; border-radius:999px; transition:.2s; }
.page-signup-ae .slider:before{ content:""; position:absolute; height:18px; width:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; box-shadow:0 1px 2px rgba(0,0,0,.2); }
.page-signup-ae .switch input:checked + .slider{ background:#16a34a; }
.page-signup-ae .switch input:checked + .slider:before{ transform:translateX(20px); }

/* Bouton pleine largeur */
.page-signup-ae .w-full{ width:100%; }