/* ============================================================
   EGIDE — charte graphique (thème sombre, tech, accent violet)
   Tokens et composants partagés (landing publique, pré-audit, auditeur).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=DM+Mono:wght@400;500&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

:root {
  --bg:#08070D; --bg-app:#0E0C16; --surface:#16141F; --surface-alt:#100E18;
  --surface-trans:rgba(20,18,28,0.5);
  --border:rgba(255,255,255,0.08); --border-2:rgba(255,255,255,0.12);
  --text:#F3F1FA; --text-2:#A8A3BB; --text-3:#7C7790; --text-4:#5C5870;
  --violet:#9D7BFF; --violet-dk:#4B2E83; --lav:#B79CE8; --lav-2:#C9B8FF;
  --green:#36C98D; --amber:#E8B341; --red:#FF5C73; --blue:#8FA8FF;
  --r-in:10px; --r-card:15px; --r-hero:19px; --r-pill:24px;
  --mono:'DM Mono',ui-monospace,monospace; --disp:'Bricolage Grotesque',system-ui,sans-serif; --ui:'Hanken Grotesk',system-ui,sans-serif;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); font-family:var(--ui); font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
h1,h2,h3 { font-family:var(--disp); font-weight:800; margin:0; letter-spacing:-0.02em; line-height:1.08; }
.mono { font-family:var(--mono); text-transform:uppercase; letter-spacing:0.12em; font-size:11px; color:var(--text-3); }
.muted { color:var(--text-2); } .dim { color:var(--text-3); }
.accent { color:var(--violet); }

/* Layout */
.wrap { max-width:1240px; margin:0 auto; padding:0 24px; }
.section { padding:40px 0; }
.center { text-align:center; }

/* Header public */
.eg-header { position:sticky; top:0; z-index:50; background:rgba(8,7,13,0.82); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); }
.eg-header .bar { display:flex; align-items:center; justify-content:space-between; height:66px; }
.eg-logo { display:flex; align-items:center; gap:10px; font-family:var(--ui); font-weight:700; letter-spacing:0.04em; font-size:19px; }
.eg-logo svg { width:30px; height:30px; }
.eg-nav { display:flex; gap:26px; }
.eg-nav a { color:var(--text-2); font-size:14px; } .eg-nav a:hover { color:var(--text); }
/* Menu mobile (hamburger) */
.eg-burger { display:none; background:var(--surface-alt); border:1px solid var(--border-2); color:var(--text);
  width:42px; height:40px; border-radius:10px; font-size:20px; line-height:1; cursor:pointer; align-items:center; justify-content:center; }
@media (max-width:760px){
  .eg-header .bar { position:relative; flex-wrap:wrap; }
  .eg-burger { display:inline-flex; }
  .eg-nav { display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:flex-start;
    gap:4px; background:var(--bg-app); border-bottom:1px solid var(--border); padding:10px 24px 16px; z-index:60; }
  .eg-header.open .eg-nav { display:flex; }
  .eg-nav a { padding:10px 0; font-size:16px; width:100%; }
}

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:8px; font-family:var(--ui); font-weight:700; font-size:15px;
  padding:12px 20px; border-radius:var(--r-in); border:1px solid transparent; cursor:pointer; transition:.15s; }
.btn-primary { background:var(--violet); color:#0a0612; }
.btn-primary:hover { background:#b095ff; box-shadow:0 8px 24px rgba(157,123,255,.35); }
.btn-outline { background:transparent; border-color:var(--border-2); color:var(--text); }
.btn-outline:hover { border-color:var(--violet); color:var(--violet); }
.btn-green { background:var(--green); color:#04261d; } .btn-green:hover{ background:#4fdda1; }
.btn-ghost { background:var(--surface-alt); border-color:var(--border); color:var(--text); }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn-lg { padding:15px 26px; font-size:16px; }
.btn-block { width:100%; justify-content:center; }

/* Cards & surfaces */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:24px; }
.card-trans { background:var(--surface-trans); }
.card-violet { border-color:rgba(157,123,255,.45); background:linear-gradient(180deg, rgba(157,123,255,.10), rgba(157,123,255,.02)); }
.input, select.input, textarea.input { width:100%; background:var(--surface-alt); border:1px solid var(--border-2); color:var(--text);
  border-radius:var(--r-in); padding:12px 14px; font-family:var(--ui); font-size:15px; outline:none; transition:.15s; }
.input:focus { border-color:var(--violet); }
label.lbl { display:block; font-family:var(--mono); font-size:10.5px; color:var(--text-3); margin:14px 0 6px; }

/* Pills & badges */
.pill { display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius:var(--r-pill);
  border:1px solid var(--border-2); font-family:var(--mono); font-size:10.5px; color:var(--text-2); }
.dot { width:7px; height:7px; border-radius:50%; background:var(--green); animation:egPulse 2s infinite; }
.badge { display:inline-block; padding:3px 10px; border-radius:var(--r-pill); font-family:var(--mono); font-size:10px; font-weight:500; }
.b-violet{ background:rgba(157,123,255,.16); color:var(--lav-2); } .b-green{ background:rgba(54,201,141,.16); color:var(--green); }
.b-amber{ background:rgba(232,179,65,.16); color:var(--amber); } .b-red{ background:rgba(255,92,115,.16); color:var(--red); }
.b-grey{ background:rgba(255,255,255,.08); color:var(--text-2); } .b-blue{ background:rgba(143,168,255,.16); color:var(--blue); }

/* Stepper */
.stepper { display:flex; align-items:center; gap:0; flex-wrap:wrap; margin:0 0 30px; }
.stepper .st { display:flex; align-items:center; gap:9px; color:var(--text-3); font-size:13px; }
.stepper .st .n { width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:700;
  background:var(--surface); border:1px solid var(--border-2); color:var(--text-3); }
.stepper .st.cur .n { background:var(--violet); color:#0a0612; border-color:var(--violet); }
.stepper .st.done .n { background:var(--green); color:#04261d; border-color:var(--green); }
.stepper .st.cur, .stepper .st.done { color:var(--text); }
.stepper .ln { width:30px; height:2px; background:var(--border-2); margin:0 10px; }
.stepper .ln.done { background:var(--green); }

/* Gauges / bars */
.bar { height:8px; background:rgba(255,255,255,.07); border-radius:6px; overflow:hidden; }
.bar > span { display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,var(--violet),var(--lav)); }
.rag-green>span,.rag-green{ background:var(--green)!important; } .rag-amber>span,.rag-amber{ background:var(--amber)!important; }
.rag-red>span,.rag-red{ background:var(--red)!important; }

/* Halo + animations */
.halo { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0; }
.halo::after { content:''; position:absolute; top:-30%; left:50%; transform:translateX(-50%); width:760px; height:760px;
  background:radial-gradient(circle, rgba(157,123,255,.22), transparent 60%); animation:egGlow 6s ease-in-out infinite; }
@keyframes egGlow { 0%,100%{ opacity:.35; } 50%{ opacity:.8; } }
@keyframes egPulse { 0%,100%{ opacity:1; } 50%{ opacity:.3; } }
@keyframes egUp { from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
.egUp { animation:egUp .4s ease both; }

/* Grids */
.grid { display:grid; gap:16px; }
.g2 { grid-template-columns:repeat(2,1fr); } .g3 { grid-template-columns:repeat(3,1fr); } .g4 { grid-template-columns:repeat(4,1fr); }
.autofit { grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }

/* Tables (auditeur) */
table.eg { width:100%; border-collapse:collapse; }
table.eg th { text-align:left; font-family:var(--mono); font-size:10px; color:var(--text-3); padding:10px 12px; border-bottom:1px solid var(--border); }
table.eg td { padding:13px 12px; border-bottom:1px solid var(--border); font-size:14px; }
table.eg tr:hover td { background:rgba(255,255,255,.02); }

.hidden { display:none !important; }
@media (max-width:900px){ .g4{grid-template-columns:repeat(2,1fr);} .g3{grid-template-columns:1fr;} .g2{grid-template-columns:1fr;} }

/* ============================================================
   Bouton bascule de thème (injecté dans le header par egide-theme.js)
   ============================================================ */
.eg-theme-toggle { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; flex:none;
  border-radius:10px; background:var(--surface-alt); border:1px solid var(--border-2); color:var(--text);
  cursor:pointer; font-size:17px; line-height:1; transition:.15s; }
.eg-theme-toggle:hover { border-color:var(--violet); }
.eg-theme-toggle--float { position:fixed; top:14px; right:14px; z-index:200; box-shadow:0 6px 18px rgba(0,0,0,.28); }
@media (max-width:760px){
  .eg-header .bar > .btn { display:none; }                 /* CTA du header masqué sur mobile (déjà dans le hero) */
  .eg-header .bar .eg-theme-toggle { margin-left:auto; margin-right:6px; }  /* regroupe toggle + burger à droite */
}
html { color-scheme:dark; }

/* ============================================================
   MODE CLAIR — activé via [data-theme="light"] sur <html> (voir egide-theme.js).
   Le thème sombre reste le défaut/signature ; on ne fait qu'ajouter une option.
   Lisibilité pensée pour l'usage mobile en plein soleil.
   ============================================================ */
:root[data-theme="light"] {
  color-scheme:light;
  --bg:#F4F2FB; --bg-app:#EAE7F5; --surface:#FFFFFF; --surface-alt:#F1EEFA;
  --surface-trans:rgba(255,255,255,0.66);
  --border:rgba(24,18,45,0.10); --border-2:rgba(24,18,45,0.17);
  --text:#181528; --text-2:#514B66; --text-3:#6E6884; --text-4:#8C8699;
  --violet:#6D4AE0; --violet-dk:#3A2470; --lav:#8A6BE8; --lav-2:#5B3DD1;
  --green:#0F9663; --amber:#A9760E; --red:#D6304C; --blue:#3E56C9;
}
/* Reprises ponctuelles des couleurs « en dur » qui ne s'adaptent pas via les tokens */
:root[data-theme="light"] .eg-header { background:rgba(244,242,251,0.86); }
:root[data-theme="light"] .btn-primary { color:#fff; }
:root[data-theme="light"] .btn-primary:hover { background:#7c5cff; box-shadow:0 8px 24px rgba(109,74,224,.26); }
:root[data-theme="light"] .stepper .st.cur .n { color:#fff; }
:root[data-theme="light"] .bar { background:rgba(24,18,45,.08); }
:root[data-theme="light"] .b-grey { background:rgba(24,18,45,.07); }
:root[data-theme="light"] table.eg tr:hover td { background:rgba(24,18,45,.03); }
:root[data-theme="light"] .halo::after { background:radial-gradient(circle, rgba(125,92,255,.13), transparent 60%); }
:root[data-theme="light"] .card-violet { border-color:rgba(109,74,224,.30);
  background:linear-gradient(180deg, rgba(109,74,224,.07), rgba(109,74,224,.015)); }