/* ===== Polices hébergées localement (aucun appel à un service tiers) ===== */
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:500;font-style:normal;font-display:swap;src:url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-style:normal;font-display:swap;src:url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Source Serif 4";font-weight:600;font-style:normal;font-display:swap;src:url("../fonts/source-serif-4-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Source Serif 4";font-weight:700;font-style:normal;font-display:swap;src:url("../fonts/source-serif-4-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2")}

:root{
  --bg:#F4F6FA; --surface:#FFFFFF; --ink:#12203A; --muted:#55657D; --rule:#DCE3EE;
  --navy:#0B2545; --navy2:#13315C; --blue:#1F5FAF; --blue-soft:#E8F0FB;
  --orange:#F07F1A; --orange-text:#C25E05; --orange-soft:#FFF1E2; --done:#1E8A5A; --done-soft:#E4F4EC;
  --danger:#B42318; --danger-soft:#FDECEA;
  --kw:#E8F0FB; --kw-ink:#1B4C8C; --shadow:0 1px 2px rgba(11,37,69,.06),0 6px 18px rgba(11,37,69,.06);
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0A1220; --surface:#111C2F; --ink:#E6ECF5; --muted:#9AA9C0; --rule:#22314B;
    --navy:#071325; --navy2:#0E2242; --blue:#74AEF0; --blue-soft:#15243D;
    --orange:#FF9A3C; --orange-text:#FFAE63; --orange-soft:#2A1C0E; --done:#4CC28A; --done-soft:#12291F;
    --danger:#FF8A80; --danger-soft:#2C1414;
    --kw:#17263F; --kw-ink:#A9C9F2; --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 18px rgba(0,0,0,.25);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0A1220; --surface:#111C2F; --ink:#E6ECF5; --muted:#9AA9C0; --rule:#22314B;
  --navy:#071325; --navy2:#0E2242; --blue:#74AEF0; --blue-soft:#15243D;
  --orange:#FF9A3C; --orange-text:#FFAE63; --orange-soft:#2A1C0E; --done:#4CC28A; --done-soft:#12291F;
  --danger:#FF8A80; --danger-soft:#2C1414;
  --kw:#17263F; --kw-ink:#A9C9F2; --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 18px rgba(0,0,0,.25);
  color-scheme: dark;
}
:root{box-sizing:border-box;padding-bottom:env(safe-area-inset-bottom,0px)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 "IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;min-height:100vh;display:flex;flex-direction:column}
a{color:var(--blue);text-underline-offset:2px}
h1,h2,h3{font-family:"Source Serif 4",Georgia,"Times New Roman",serif;line-height:1.2;margin:0}
code,pre,textarea.code{font-family:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* ===== Barre supérieure ===== */
.cf-top{position:sticky;top:0;z-index:50;background:var(--navy);color:#fff;padding-top:env(safe-area-inset-top,0px)}
.cf-top-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;gap:16px;padding:10px 24px;min-height:62px}
.cf-brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:600;font-size:1.08rem;white-space:nowrap}
.cf-brand svg{width:30px;height:30px}
.cf-brand b{color:var(--orange);font-weight:600}
.cf-nav{display:flex;gap:2px;flex:1;flex-wrap:wrap}
.cf-nav a{color:#C9D6EA;text-decoration:none;font-size:.92rem;padding:8px 11px;border-radius:6px;white-space:nowrap}
.cf-nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
.cf-nav a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.12);box-shadow:inset 0 -2px 0 var(--orange)}

/* ===== Menu utilisateur (injecté par core.js) ===== */
.cf-user{position:relative;margin-left:auto}
.cf-user>button{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:999px;padding:4px 12px 4px 4px;font:inherit;font-size:.88rem;cursor:pointer}
.cf-avatar{width:30px;height:30px;border-radius:50%;background:var(--orange);color:#1A1205;display:flex;align-items:center;justify-content:center;font-weight:600}
.cf-menu{position:absolute;right:0;top:calc(100% + 8px);background:var(--surface);color:var(--ink);border:1px solid var(--rule);border-radius:10px;box-shadow:var(--shadow);min-width:230px;padding:6px;z-index:80}
.cf-menu a,.cf-menu button{display:block;width:100%;text-align:left;padding:9px 12px;border-radius:6px;color:var(--ink);text-decoration:none;background:none;border:0;font:inherit;font-size:.92rem;cursor:pointer}
.cf-menu a:hover,.cf-menu button:hover{background:var(--blue-soft)}
.cf-menu .who{padding:8px 12px 10px;border-bottom:1px solid var(--rule);margin-bottom:4px;font-size:.84rem;color:var(--muted);word-break:break-all}
.cf-menu .danger{color:var(--danger)}
.cf-sync{font-size:.75rem;color:#C9D6EA;white-space:nowrap}
.cf-demo{background:var(--orange);color:#1A1205;text-align:center;font-size:.85rem;padding:6px 12px}

/* ===== Mise en page ===== */
main.cf-main{flex:1;width:100%;max-width:1180px;margin:0 auto;padding:32px 24px 64px}
.cf-narrow{max-width:520px;margin:0 auto}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:28px;box-shadow:var(--shadow)}
.card+.card{margin-top:20px}
.grid>.card+.card,.dash-hero>.card+.card{margin-top:0}
.lead{color:var(--muted);max-width:70ch}
.grid{display:grid;gap:18px}
.grid.cols-3{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.grid.cols-2{grid-template-columns:repeat(auto-fill,minmax(360px,1fr))}
.eyebrow{color:var(--orange-text);font-weight:600;font-size:.85rem;margin:0 0 6px}

/* ===== Formulaires ===== */
label.f{display:block;font-weight:500;font-size:.92rem;margin:16px 0 6px}
.input,select.input,textarea.input{width:100%;font:inherit;padding:11px 13px;border:1px solid var(--rule);border-radius:8px;background:var(--bg);color:var(--ink)}
.input:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px var(--blue-soft)}
.input[aria-invalid="true"]{border-color:var(--danger)}
.help{font-size:.82rem;color:var(--muted);margin-top:6px}
.pw-wrap{position:relative}
.pw-wrap .input{padding-right:84px}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);font:inherit;font-size:.8rem;background:none;border:0;color:var(--blue);cursor:pointer;padding:6px 8px}
.otp{font-family:"IBM Plex Mono",monospace;font-size:1.6rem;letter-spacing:.4em;text-align:center}
.check{display:flex;gap:8px;align-items:flex-start;font-size:.9rem;margin-top:14px}
.check input{margin-top:4px;accent-color:var(--blue)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:600;font-size:.95rem;border-radius:8px;padding:11px 18px;cursor:pointer;border:1px solid transparent;text-decoration:none}
.btn-primary{background:var(--orange);color:#1A1205}
.btn-primary:hover{filter:brightness(1.06)}
.btn-secondary{background:transparent;border-color:var(--blue);color:var(--blue)}
.btn-secondary:hover{background:var(--blue-soft)}
.btn-danger{background:var(--danger);color:#fff}
.btn-ghost{background:transparent;color:var(--muted);border-color:var(--rule)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn.block{width:100%;margin-top:20px}
.btn.sm{padding:6px 11px;font-size:.84rem}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.linkbtn{background:none;border:0;color:var(--blue);font:inherit;cursor:pointer;padding:0;text-decoration:underline}

/* Jauge de mot de passe */
.meter{height:7px;border-radius:4px;background:var(--rule);overflow:hidden;margin-top:8px}
.meter span{display:block;height:100%;width:0;transition:width .3s,background .3s}
.rules{list-style:none;padding:0;margin:10px 0 0;font-size:.84rem;display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}
.rules li::before{content:"○ ";color:var(--muted)}
.rules li.ok{color:var(--done)}
.rules li.ok::before{content:"● ";color:var(--done)}

/* Messages */
.alert{border-radius:8px;padding:12px 14px;font-size:.92rem;margin:14px 0}
.alert-error{background:var(--danger-soft);color:var(--danger);border:1px solid var(--danger)}
.alert-ok{background:var(--done-soft);color:var(--done);border:1px solid var(--done)}
.alert-info{background:var(--blue-soft);color:var(--kw-ink);border:1px solid var(--blue)}
.alert-warn{background:var(--orange-soft);color:var(--orange-text);border:1px solid var(--orange)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--navy);color:#fff;padding:10px 18px;border-radius:999px;box-shadow:var(--shadow);z-index:200;font-size:.92rem}

/* Tableaux */
.tablewrap{overflow-x:auto;border:1px solid var(--rule);border-radius:10px;background:var(--surface)}
table.t{border-collapse:collapse;width:100%;font-size:.9rem}
table.t th,table.t td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--rule);vertical-align:top}
table.t th{background:var(--blue-soft);color:var(--kw-ink);font-weight:600;font-size:.8rem}
table.t tr:last-child td{border-bottom:0}
.badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.76rem;font-weight:600;background:var(--blue-soft);color:var(--kw-ink)}
.badge.ok{background:var(--done-soft);color:var(--done)}
.badge.warn{background:var(--orange-soft);color:var(--orange-text)}
.badge.err{background:var(--danger-soft);color:var(--danger)}

/* Progression */
.bar{height:8px;background:var(--rule);border-radius:4px;overflow:hidden}
.bar span{display:block;height:100%;width:0;background:var(--orange);border-radius:4px;transition:width .4s}
.bar.full span{background:var(--done)}

/* Fenêtre modale */
.modal-back{position:fixed;inset:0;background:rgba(5,12,24,.55);display:flex;align-items:center;justify-content:center;padding:20px;z-index:150}
.modal{background:var(--surface);border-radius:14px;max-width:480px;width:100%;padding:24px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.modal h3{margin-bottom:10px}

/* Bloc plein écran (compte en attente, configuration manquante) */
.gate{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:24px;z-index:300}
.gate .card{max-width:520px}

/* Pied de page */
.cf-foot{border-top:1px solid var(--rule);color:var(--muted);font-size:.85rem}
.cf-foot-inner{max-width:1180px;margin:0 auto;padding:24px;display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between}
.cf-foot q{font-style:italic}

@media (max-width:760px){
  .cf-top-inner{flex-wrap:wrap;padding:10px 16px}
  .cf-nav{order:3;width:100%;overflow-x:auto;flex-wrap:nowrap;flex:none}
  .cf-user{order:2}
  .cf-sync{display:none}
  main.cf-main{padding:24px 16px 56px}
  .card{padding:20px}
  .rules{grid-template-columns:1fr}
  .grid.cols-2{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}
.cf-brand img.cf-logo{width:32px;height:32px;border-radius:7px;display:block}