/* ============================================================
   PREVATIS — Démo Cortex/Iris/Cortis — styles
   Version RGAA AA (lisibilité, contrastes, focus, cibles tactiles).
   Palette : navy #0F172A, ink #1E293B, muted #475569 (contraste OK),
   line #E8ECF2, bg #F7F8FA, blue #2563EB, blue-soft #EFF6FF.
   Tailles en rem (base 16px) → respectent le zoom et le grossissement
   de texte du navigateur (WCAG 1.4.4).
   ============================================================ */
:root{
  --navy:#0F172A; --ink:#1E293B; --muted:#475569; --muted-2:#64748B;
  --line:#E8ECF2; --bg:#F7F8FA; --surface:#FFFFFF;
  --blue:#2563EB; --blue-soft:#EFF6FF;
  /* niveaux : teintes contrastées (texte sur blanc ET blanc sur pastille ≥ 4,5:1) */
  --green:#15803D; --amber:#A16207; --orange:#C2410C; --black:#1A1A1A;
  --radius:16px;
  --focus:#1D4ED8;
}
html{ font-size:100%; -webkit-text-size-adjust:100%; }
*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }
body{
  background:var(--bg); color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:1rem; line-height:1.5; -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }

/* ---- Focus visible (WCAG 2.4.7 / RGAA 10.7) ---- */
a:focus-visible, button:focus-visible, label:focus-visible,
input:focus-visible, [tabindex]:focus-visible{
  outline:3px solid var(--focus); outline-offset:2px; border-radius:6px;
}
.field-search:focus-within{ border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(37,99,235,.25); }

/* Retour visuel au toucher */
.method:active,.list-item:active{ transform:scale(.97); background:var(--blue-soft);
  transition:transform .08s, background .08s; }
.cta:active{ transform:scale(.96); transition:transform .1s; }
a:active,button:active{ opacity:.9; }
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; } .cta:active,.method:active,.list-item:active{ transform:none; }
}

/* Utilitaire lecteur d'écran (label invisible mais lu) */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Conteneur appli (centré, largeur mobile) */
.wrap{ max-width:480px; margin:0 auto; min-height:100vh; background:var(--bg);
  display:flex; flex-direction:column; position:relative; }

/* ---- Topbar ---- */
.topbar{ background:var(--surface); border-bottom:1px solid var(--line);
  padding:12px 16px; display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:40; }
.tb-brand{ display:flex; align-items:center; gap:9px; }
.tb-logo{ width:34px; height:34px; background:var(--navy); border-radius:9px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.tb-logo svg{ width:20px; height:20px; }
.tb-name{ font-weight:700; font-size:1rem; color:var(--navy); letter-spacing:.03em; line-height:1; }
.tb-tag{ font-size:.75rem; color:var(--muted); margin-top:2px; }
.tb-avatar{ width:40px; height:40px; border-radius:50%; background:var(--blue-soft);
  display:flex; align-items:center; justify-content:center; }
.tb-avatar svg{ width:20px; height:20px; }
.tb-back{ display:flex; align-items:center; gap:10px; color:var(--muted);
  min-height:44px; padding:4px 6px; margin:-4px -6px; }
.tb-back .t{ font-weight:600; font-size:1rem; color:var(--navy); }
.tb-back .s{ font-size:.8125rem; color:var(--muted); }
.tb-iconlink{ display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; color:var(--muted); }

/* ---- Contenu ---- */
.content{ flex:1; padding:18px; padding-bottom:104px; }

/* ---- Accueil ---- */
.hello{ margin-bottom:4px; }
.hello-row{ display:flex; align-items:center; gap:9px; }
.hello-row h1{ font-size:1.5rem; font-weight:700; color:var(--ink); }
.hello-sub{ font-size:.9375rem; color:var(--muted); margin-top:4px; line-height:1.45; }
.cta-zone{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:30px 0 22px; }
.cta{ width:140px; height:140px; border-radius:50%; background:var(--blue); border:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  cursor:pointer; color:#fff; }
.cta svg{ width:42px; height:42px; }
.cta span{ font-size:.9375rem; font-weight:600; }
.cta-anim{ animation:breathe 2.6s ease-in-out infinite, halo 2.6s ease-out infinite; }
@keyframes breathe{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.035);} }
@keyframes halo{ 0%{ box-shadow:0 0 0 0 rgba(37,99,235,.30);} 70%{ box-shadow:0 0 0 18px rgba(37,99,235,0);} 100%{ box-shadow:0 0 0 0 rgba(37,99,235,0);} }
@media (prefers-reduced-motion: reduce){ .cta-anim{ animation:none; } }
.cta-hint{ font-size:.875rem; color:var(--muted); margin-top:16px; text-align:center; max-width:260px; line-height:1.5; }

.section-label{ font-size:.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin:6px 0 9px; }
.methods{ display:flex; gap:10px; }
.method{ flex:1; background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:16px 10px; min-height:88px; text-align:center; cursor:pointer; position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center; }
.method svg{ width:24px; height:24px; }
.method .m-name{ font-size:.875rem; font-weight:600; color:var(--ink); margin-top:6px; }
.method .m-badge{ position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  background:var(--green); color:#fff; font-size:.75rem; font-weight:600; padding:2px 8px;
  border-radius:999px; white-space:nowrap; }

/* ---- Boutons ---- */
.btn{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  min-height:48px; background:var(--blue); color:#fff; border:none; border-radius:12px;
  padding:13px 16px; font-size:1rem; font-weight:600; font-family:inherit; cursor:pointer; }
.btn:active{ transform:scale(.99); }
.btn svg{ width:20px; height:20px; }
.btn-sec{ background:var(--surface); color:var(--ink); border:1.5px solid var(--line); }
.btn-ghost{ background:transparent; color:var(--blue); border:none; font-weight:600; cursor:pointer; font-size:.9375rem; min-height:44px; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

/* ---- Champs ---- */
.field-search{ background:var(--surface); border:1.5px solid var(--line); border-radius:12px;
  padding:12px 14px; min-height:48px; display:flex; align-items:center; gap:10px; }
.field-search svg{ width:20px; height:20px; color:var(--muted-2); flex-shrink:0; }
.field-search input{ border:none; outline:none; font-family:inherit; font-size:1rem;
  color:var(--ink); width:100%; background:transparent; }
.field-clear{ display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; background:none; border:none; cursor:pointer; flex-shrink:0; }

/* ---- Bandeau métier ---- */
.metier-bar{ background:var(--blue-soft); border:1px solid #DBEAFE; border-radius:12px;
  padding:12px 14px; display:flex; align-items:center; gap:11px; margin-bottom:14px; }
.metier-bar svg{ width:20px; height:20px; color:var(--blue); flex-shrink:0; }
.metier-bar .mb-lbl{ font-size:.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.metier-bar .mb-val{ font-size:1rem; font-weight:600; color:var(--ink); }
.metier-bar .mb-edit{ margin-left:auto; font-size:.875rem; color:var(--blue); font-weight:600;
  min-height:44px; display:inline-flex; align-items:center; padding:0 4px; }

/* ---- Listes (résultats recherche métier) ---- */
.list-item{ background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:14px; min-height:52px; display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:8px; cursor:pointer; }
.list-item .li-txt{ flex:1; font-size:1rem; color:var(--ink); }
.list-item svg{ width:18px; height:18px; color:var(--muted-2); flex-shrink:0; }

/* ---- Synthèse résultat (sur fond navy) ---- */
.summary{ background:var(--navy); border-radius:16px; padding:16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.summary .s-scene-lbl{ color:#CBD5E1; font-size:.8125rem; }
.summary .s-scene{ color:#fff; font-size:1rem; font-weight:600; margin-top:2px; }
.summary .s-count{ color:#CBD5E1; font-size:.8125rem; margin-top:3px; }
.summary .s-niv-lbl{ color:#CBD5E1; font-size:.8125rem; }
.summary .s-niv{ font-size:1.375rem; font-weight:700; color:#fff; }
.summary .s-dot{ display:inline-block; width:10px; height:10px; border-radius:50%;
  margin-right:6px; vertical-align:middle; }

/* ---- Carte risque ---- */
.risk{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:14px; margin-bottom:12px; }
.risk-fam{ display:inline-block; font-size:.75rem; font-weight:600; background:var(--blue-soft);
  color:#1D4ED8; padding:3px 9px; border-radius:999px; margin-bottom:9px; }
.risk-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.risk-name{ font-size:1rem; font-weight:600; color:var(--ink); }
.risk-seen{ font-size:.875rem; color:var(--muted); margin-top:3px; line-height:1.45; }
.risk-score{ text-align:center; flex-shrink:0; }
.risk-score .bubble{ width:50px; height:50px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; color:#fff; font-size:1.0625rem; font-weight:700; }
.risk-score .lbl{ font-size:.75rem; font-weight:600; margin-top:4px; }
.risk-tag{ display:inline-block; font-size:.75rem; font-weight:600; padding:3px 8px; border-radius:999px; margin-top:6px; }
.tag-iris{ background:#FAEEDA; color:#854F0B; }
.tag-cortex{ background:#EEEDFE; color:#3C3489; }
.tag-confirm{ background:#E1F5EE; color:#0F6E56; }

.gep{ display:flex; gap:6px; margin-top:12px; }
.gep-cell{ flex:1; background:#F1F5F9; border-radius:9px; padding:8px 4px; text-align:center; }
.gep-cell .g-lbl{ font-size:.75rem; color:var(--muted); }
.gep-cell .g-val{ font-size:1rem; font-weight:700; color:var(--ink); }
.gep-cell .g-sub{ font-size:.75rem; color:var(--muted); line-height:1.25; margin-top:2px; }

.cible{ margin-top:12px; background:#F0FDF4; border:1px solid #BBF7D0; border-radius:11px; padding:11px 12px; }
.cible-head{ display:flex; align-items:center; gap:7px; margin-bottom:5px; }
.cible-head svg{ width:17px; height:17px; color:var(--green); }
.cible-head span{ font-size:.875rem; font-weight:600; color:#166534; }
.cible-txt{ font-size:.875rem; color:#15803D; line-height:1.5; }

.conseil{ margin-top:10px; background:var(--blue-soft); border:1px solid #DBEAFE; border-radius:11px;
  padding:11px 12px; display:flex; gap:8px; align-items:flex-start; }
.conseil svg{ width:18px; height:18px; color:var(--blue); flex-shrink:0; margin-top:1px; }
.conseil span{ font-size:.875rem; color:#1E40AF; line-height:1.5; }

.result-note{ text-align:center; font-size:.75rem; color:var(--muted); margin-top:6px; line-height:1.45; }

/* ---- Cartes Infos ---- */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:16px; margin-bottom:13px; }
.card-logo{ width:64px; height:64px; margin:0 auto 9px; border-radius:14px; background:var(--bg);
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.card-logo img{ max-width:100%; max-height:100%; }
.mini-lbl{ font-size:.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px; }
.module-row{ display:flex; gap:11px; align-items:flex-start; margin-bottom:11px; }
.module-row:last-child{ margin-bottom:0; }
.module-row svg{ width:20px; height:20px; flex-shrink:0; margin-top:1px; }
.module-row .m-t{ font-size:.9375rem; font-weight:600; color:var(--ink); }
.module-row .m-d{ font-size:.875rem; color:var(--muted); line-height:1.45; }
.badge-dev{ font-size:.75rem; font-weight:600; background:#FEF3C7; color:#92500A; padding:2px 8px; border-radius:999px; }

/* ---- États vides / erreurs ---- */
.empty{ text-align:center; padding:40px 24px; }
.empty svg{ width:44px; height:44px; color:var(--muted-2); margin-bottom:12px; }
.empty .e-t{ font-size:1.125rem; font-weight:600; color:var(--ink); margin-bottom:6px; }
.empty .e-s{ font-size:.9375rem; color:var(--muted); line-height:1.6; margin-bottom:18px; }
.msg{ padding:12px 14px; border-radius:10px; font-size:.9375rem; line-height:1.5; margin-bottom:14px; }
.msg-err{ background:#FEF2F2; border:1px solid #FECACA; color:#991B1B; }
.msg-info{ background:var(--blue-soft); border:1px solid #DBEAFE; color:#1E40AF; }

/* ---- Overlay analyse ---- */
.overlay{ position:fixed; inset:0; z-index:90; background:rgba(15,23,42,.92);
  display:none; align-items:center; justify-content:center; padding:24px; }
.overlay.show{ display:flex; }
.overlay-card{ text-align:center; max-width:300px; }
.spinner{ width:54px; height:54px; margin:0 auto 18px; border:4px solid rgba(37,99,235,.3);
  border-top-color:var(--blue); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.ov-ring{ position:relative; width:104px; height:104px; margin:0 auto 24px;
  display:flex; align-items:center; justify-content:center; --ring:#60A5FA; }
.ov-ring::before{ content:""; position:absolute; inset:0; border-radius:50%;
  border:3px solid rgba(255,255,255,.18); border-top-color:var(--ring); animation:spin 1s linear infinite; }
.ov-badge{ position:relative; width:74px; height:74px;
  display:flex; align-items:center; justify-content:center; animation:ovpulse 2.2s ease-in-out infinite; }
.ov-badge svg{ width:48px; height:48px; }
@keyframes ovpulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.06);} }
@media (prefers-reduced-motion: reduce){ .ov-ring::before{ animation:none; } .ov-badge{ animation:none; } }
.overlay-t{ color:#fff; font-size:1.125rem; font-weight:600; }
.overlay-s{ color:#BFD4F2; font-size:.9375rem; margin-top:6px; line-height:1.5; }

/* ---- Code d'accès ---- */
.access{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:30px; text-align:center; }
.access-logo{ width:60px; height:60px; background:linear-gradient(135deg,#2a9b34,#1e7a28);
  border-radius:16px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.access-logo svg{ width:32px; height:32px; }
.access h1{ font-size:1.5rem; font-weight:700; color:var(--navy); letter-spacing:.04em; }
.access p{ font-size:.9375rem; color:var(--muted); margin-top:4px; margin-bottom:24px; }
.access form{ width:100%; max-width:300px; }
.access input{ width:100%; background:var(--surface); border:1.5px solid var(--line);
  border-radius:11px; padding:14px 16px; min-height:48px; font-size:1rem; font-family:inherit;
  color:var(--ink); text-align:center; margin-bottom:12px; }
.access input:focus{ border-color:var(--blue); outline:none; box-shadow:0 0 0 3px rgba(37,99,235,.25); }

/* ---- Bottombar (toujours visible en bas) ---- */
.bottombar{ position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:480px; z-index:50; background:var(--surface); border-top:1px solid var(--line);
  display:flex; justify-content:space-around; align-items:flex-end; padding:6px 6px 10px; }
.bottombar a{ flex:1; text-align:center; color:var(--muted); font-size:.75rem;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:3px;
  min-height:52px; padding-top:4px; }
.bottombar a svg{ width:24px; height:24px; }
.bottombar a.active{ color:var(--blue); font-weight:600; }
.bottombar .fab{ flex:1; text-align:center; }
.bottombar .fab .fb{ width:54px; height:54px; border-radius:50%; background:var(--blue);
  display:flex; align-items:center; justify-content:center; margin:-26px auto 0;
  box-shadow:0 8px 18px rgba(37,99,235,.42); border:3px solid var(--bg); }
.bottombar .fab .fb svg{ width:26px; height:26px; color:#fff; }
.bottombar .fab span{ font-size:.75rem; color:var(--muted); display:block; margin-top:3px; }