/* EFFIBLUE AI Formation — habillage du portail (chargé après portal.css).
   Design system : design-system/effiblue-ai-formation/MASTER.md (UI UX Pro Max).
   Polices Lexend / Source Sans 3 auto-hébergées (/fonts.css, servi par nginx). */
:root{
  --ink:#0F172A;--muted:#475569;--blue:#0369A1;--blue-dark:#075985;--aqua:#2095D5;
  --surface:#fff;--line:#E2E8F0;--bg:#F8FAFC;
  --shadow:0 1px 2px rgba(15,23,42,.06),0 18px 40px -18px rgba(15,23,42,.28);
  --head:"Lexend",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1)}
html{font-family:var(--body);font-size:106%;background:var(--bg);color:var(--ink)}
body{font-family:var(--body);background:
  radial-gradient(900px 420px at 92% -8%,rgba(32,149,213,.14),transparent 70%),var(--bg)}
button,input,select,textarea{font-family:inherit}
h1,h2,h3,.brand strong{font-family:var(--head);letter-spacing:-.01em}
a{text-underline-offset:3px}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

/* ---------- connexion / inscription ---------- */
.login-shell{padding:2rem 1rem}
.login-split{width:min(100%,1040px);border-radius:24px;border:1px solid var(--line);box-shadow:var(--shadow);grid-template-columns:minmax(0,1fr) minmax(0,.92fr)}
.login-split .login-card{padding:3rem 3rem 2.4rem}
.login-logo{height:26px;margin-bottom:1.6rem}
.eyebrow{margin:0 0 .5rem;color:var(--blue);font:600 .78rem var(--head);letter-spacing:.1em}
.login-card h1{font:700 1.9rem/1.15 var(--head);letter-spacing:-.02em;color:var(--ink)}
.intro{color:var(--muted);font-size:1.05rem;margin:.6rem 0 0}
.login-form{gap:.4rem;margin-top:1.5rem}
.login-form label{font:600 .95rem var(--body);color:var(--ink);margin-top:.7rem}
.login-form input{min-height:50px;padding:.8rem 1rem;border:1px solid #94A3B8;border-radius:12px;background:#fff;font-size:1.02rem;transition:border-color .15s,box-shadow .15s}
.login-form input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(3,105,161,.22)}
.input-icon svg{color:#64748B}
.login-form button,.tool-link{background:var(--blue);border-radius:12px;font:600 1.02rem var(--body);min-height:50px;transition:background .18s var(--ease),box-shadow .18s,transform .18s}
.login-form button{margin-top:1.1rem}
.login-form button:hover,.tool-link:hover{background:var(--blue-dark);box-shadow:0 8px 20px -10px rgba(3,105,161,.7)}
.login-form button:active{transform:translateY(1px)}
.security-note{margin:.9rem 0 0;font-size:.95rem;color:var(--muted)}
.security-note a{display:inline-flex;align-items:center;min-height:36px;color:var(--blue);font-weight:600}
.security-note:last-of-type{margin-top:1.4rem;padding-top:1rem;border-top:1px solid var(--line);font-size:.88rem}
.alert{background:#FEF2F2;color:#B91C1C;border:1px solid #FECACA;border-radius:12px;font-weight:600}
.success{background:#ECFDF5;color:#047857;border:1px solid #A7F3D0;border-radius:12px;font-weight:600}

/* panneau visuel : dégradé marine + trame technique (plus d'image « outils ») */
.login-visual{padding:3rem 2.8rem;justify-content:space-between;background:#0F172A}
.login-visual::before{background-image:
  linear-gradient(rgba(148,163,184,.13) 1px,transparent 1px),
  linear-gradient(90deg,rgba(148,163,184,.13) 1px,transparent 1px);
  background-size:44px 44px;-webkit-mask-image:linear-gradient(160deg,#000 0%,transparent 78%);mask-image:linear-gradient(160deg,#000 0%,transparent 78%);z-index:-2}
.login-visual::after{background:radial-gradient(520px 360px at 85% 8%,rgba(32,149,213,.55),transparent 65%),radial-gradient(420px 300px at 0% 100%,rgba(3,105,161,.55),transparent 70%);z-index:-1}
.login-visual-eyebrow{color:#7DD3FC;opacity:1;font:600 .78rem var(--head);letter-spacing:.1em}
.login-visual h2{font:700 clamp(1.7rem,2.6vw,2.3rem)/1.15 var(--head);margin:.2rem 0 1rem}
.login-visual p{max-width:380px;color:#E2E8F0;font-size:1.05rem;line-height:1.6}
.login-points{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:.85rem}
.login-points li{display:flex;gap:.75rem;align-items:flex-start;color:#F1F5F9;font-size:1rem;line-height:1.45}
.login-points svg{width:22px;height:22px;flex:none;color:#7DD3FC;margin-top:.05rem}
.login-visual-chip{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);font:600 .82rem var(--body);margin-top:1.1rem}
.login-visual-top{display:block}
@media(max-width:860px){
  .login-split{grid-template-columns:1fr}
  .login-split .login-card{padding:2rem 1.5rem 1.6rem}
  .login-visual{padding:2rem 1.5rem;order:2}
}

/* ---------- en-tête, navigation, menu compte ---------- */
.site-header{background:rgba(248,250,252,.92);border-bottom:1px solid var(--line);padding-block:.55rem}
.brand strong{font:700 1.05rem var(--head);letter-spacing:.04em;color:var(--ink)}
.brand small{color:var(--muted);font-size:.75rem}
.portal-nav a{color:#334155;font:600 .95rem var(--body);min-height:44px;align-items:center;transition:background .18s,color .18s}
.portal-nav a:hover,.portal-nav a:focus-visible,.portal-nav a[aria-current=page]{background:#E8ECF1;color:var(--ink)}
a.ghost-button,.ghost-button{min-height:44px;display:inline-flex;align-items:center;border-radius:12px;font:600 .95rem var(--body);color:var(--blue);border-color:#BCD7E8;background:#fff;transition:background .18s,border-color .18s}
a.ghost-button:hover,.ghost-button:hover{background:#EAF4FB;border-color:var(--blue)}
.user-menu-avatar{background:linear-gradient(145deg,#0369A1,#0F172A)}
.user-menu-panel{border-radius:16px;box-shadow:var(--shadow)}
.user-menu-item{min-height:40px;font-weight:600}
.role-badge{background:#E0F2FE;color:#075985}

/* ---------- pages internes (téléchargements, admin, légales, aide) ---------- */
.users-shell,.legal-shell{padding-top:3.2rem}
.users-hero h1,.legal-hero h1{font:700 clamp(1.8rem,4vw,2.7rem)/1.12 var(--head);letter-spacing:-.02em}
.user-panel{border-radius:16px;border:1px solid var(--line);box-shadow:0 1px 2px rgba(15,23,42,.05),0 10px 28px -16px rgba(15,23,42,.25)}
.user-panel h2{font:600 1.2rem var(--head)}
.user-list li{border-radius:12px;background:#fff;transition:border-color .18s,box-shadow .18s}
.user-list li:hover{border-color:#BCD7E8;box-shadow:0 6px 18px -12px rgba(15,23,42,.3)}
.count-badge{background:#E0F2FE;color:#075985}
.user-avatar{background:linear-gradient(145deg,#0369A1,#0F172A)}
.danger-button{min-height:36px;border-radius:10px}
.legal-body h2{font:600 1.25rem var(--head);margin-top:1.6rem}
.legal-body p,.legal-body li{font-size:1.04rem;line-height:1.7}
footer{border-top:1px solid var(--line);background:#fff;color:var(--muted);font-size:.95rem}
footer a{color:var(--muted)}footer a:hover{color:var(--blue)}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.legal-version{font:400 1.15rem/1.5 var(--body);color:var(--muted);margin-top:.8rem}
.legal-hero{margin-bottom:1.2rem}

/* ---------- téléchargements publics / paramètres du compte ---------- */
.file-list{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.5rem}
.file-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 1rem;border:1px solid var(--line);border-radius:12px;background:#fff;transition:border-color .18s,box-shadow .18s}
.file-row:hover{border-color:#BCD7E8;box-shadow:0 6px 18px -12px rgba(15,23,42,.3)}
.file-name{font-weight:600;color:var(--blue);text-decoration:none;overflow-wrap:anywhere;min-height:32px;display:inline-flex;align-items:center}
.file-name::before{content:"";width:18px;height:18px;margin-right:.6rem;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0-4-4m4 4 4-4M5 21h14'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0-4-4m4 4 4-4M5 21h14'/%3E%3C/svg%3E") center/contain no-repeat}
.file-name:hover{color:var(--blue-dark);text-decoration:underline}
.file-size{color:var(--muted);font-size:.9rem;white-space:nowrap}
.file-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.25rem}
.empty-state{color:var(--muted)}
.private-cta{margin-top:2rem;display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;justify-content:space-between;padding:1.6rem 1.8rem;border-radius:16px;color:#fff;background:linear-gradient(135deg,#0F172A,#0369A1)}
.private-cta h2{margin:0 0 .3rem;color:#fff;font:600 1.25rem var(--head)}
.private-cta p{margin:0;color:#E2E8F0;max-width:560px}
.private-cta .tool-link{display:inline-flex;align-items:center;padding:.7rem 1.4rem;background:#fff;color:#0F172A}
.private-cta .tool-link:hover{background:#E0F2FE}
.private-cta .ghost-button{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.private-cta .ghost-button:hover{background:rgba(255,255,255,.12);border-color:#fff}
.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.25rem;align-items:start}
.settings-grid .login-form{margin-top:1rem}
.settings-grid input[disabled]{background:#F1F5F9;color:var(--muted)}
.field-hint{margin:.2rem 0 0;font-size:.88rem;color:var(--muted)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:.6rem 1.2rem;margin:1rem 0}
.kv dt{color:var(--muted)}.kv dd{margin:0;font-weight:600}

/* ---------- conformité : liens légaux, consentement, zone sensible ---------- */
.legal-links{display:flex;flex-wrap:wrap;gap:.2rem 1.1rem;justify-content:center;margin:1.4rem auto 0;padding:0 1rem;max-width:1040px}
.legal-links a{color:var(--muted);font-size:.9rem;min-height:36px;display:inline-flex;align-items:center}
.legal-links a:hover{color:var(--blue)}
footer .legal-links{margin:.6rem 0 0;justify-content:flex-start;padding:0}
.terms{display:flex;gap:.7rem;align-items:flex-start;margin-top:.8rem;font-weight:400}
.terms input{width:20px;min-height:20px;margin-top:.2rem;flex:none}
.terms a{color:var(--blue);font-weight:600}
.danger-zone{margin-top:1.2rem;border-top:1px solid var(--line);padding-top:1rem}
.danger-zone summary{cursor:pointer;font-weight:600;color:#B91C1C;min-height:44px;display:flex;align-items:center}
.danger-button{background:#B91C1C;color:#fff;border:0;border-radius:12px;font:600 1rem var(--body);min-height:48px;padding:.6rem 1.2rem;cursor:pointer}
.danger-button:hover{background:#991B1B}
.login-form .field-hint a{color:var(--blue)}
