:root{
  --accent1:#00d4ff;
  --accent2:#00c896;
  --accent-warm:#ffa500;
  --bg:#07111f;
  --text:#e8f4ff;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);scroll-behavior:smooth}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:#1e3a5f;border-radius:3px}

/* Logo helper */
.site-logo{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent1),var(--accent2))}

/* Nav */
.nav-glass{background:rgba(7,17,31,0.9);backdrop-filter:blur(14px);border-bottom:1px solid rgba(0,212,255,0.1)}

/* Hero */
.hero-bg{
  background:
    radial-gradient(ellipse 70% 50% at 65% 30%, rgba(0,212,255,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 10% 70%, rgba(0,200,150,0.08) 0%, transparent 50%),
    var(--bg);
}
.grid-overlay{
  background-image:linear-gradient(rgba(0,212,255,0.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,212,255,0.03) 1px,transparent 1px);
  background-size:44px 44px;
}

/* Cards */
.card-border{border:1px solid rgba(0,212,255,0.12);transition:border-color 0.25s,transform 0.25s,box-shadow 0.25s}
.card-border:hover{border-color:rgba(0,212,255,0.4);transform:translateY(-3px);box-shadow:0 8px 32px rgba(0,212,255,0.08)}

/* Portail tabs */
.portal-nav-item{border-bottom:2px solid transparent;transition:all 0.2s;white-space:nowrap;color:#4a6b8a}
.portal-nav-item:hover{color:var(--accent1);background:rgba(0,212,255,0.04)}
.portal-nav-item.active{color:var(--accent1);border-bottom-color:var(--accent1)}
.portal-tab{display:none}.portal-tab.active{display:block}

/* Progress */
.prog-track{background:rgba(255,255,255,0.07);border-radius:99px;overflow:hidden}
.prog-fill{height:100%;border-radius:99px;transition:width 1.2s cubic-bezier(.4,0,.2,1)}

/* Badge */
.badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase}
.badge-ok{background:rgba(0,200,150,.12);border:1px solid rgba(0,200,150,.3);color:#00c896}
.badge-warn{background:rgba(255,165,0,.12);border:1px solid rgba(255,165,0,.3);color:var(--accent-warm)}
.badge-crit{background:rgba(255,59,92,.12);border:1px solid rgba(255,59,92,.3);color:#ff3b5c}
.badge-info{background:rgba(0,212,255,.12);border:1px solid rgba(0,212,255,.3);color:var(--accent1)}

/* Table */
.ed-table{width:100%;border-collapse:collapse;font-size:12px}
.ed-table th{text-align:left;padding:8px 12px;color:#4a6b8a;font-size:10px;text-transform:uppercase;letter-spacing:1px;border-bottom:1px solid #1e3a5f}
.ed-table td{padding:10px 12px;border-bottom:1px solid rgba(30,58,95,.4);color:var(--text)}
.ed-table tr:hover td{background:rgba(0,212,255,.025)}

/* Blur frustration */
.blur-mask{filter:blur(5px);user-select:none;pointer-events:none;transition:filter .4s}
.blur-mask.revealed{filter:none}

/* Score ring */
.score-ring-svg{transform:rotate(-90deg)}

/* Inputs */
.ed-input{width:100%;background:rgba(255,255,255,.05);border:1px solid #1e3a5f;border-radius:8px;padding:10px 14px;font-size:13px;color:var(--text);font-family:inherit;outline:none;transition:border-color .2s}
.ed-input:focus{border-color:var(--accent1);background:rgba(0,212,255,.04)}
.ed-input::placeholder{color:#4a6b8a}
.ed-select{background:var(--bg)}

/* Gradient text */
.g-text{background:linear-gradient(135deg,var(--accent1),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.g-text-warm{background:linear-gradient(135deg,var(--accent-warm),var(--accent1));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* Section label */
.sec-label{font-size:10px;font-weight:600;letter-spacing:2px;text-transform:uppercase;margin-bottom:16px;display:flex;align-items:center;gap:10px;color:var(--accent1)}
.sec-label::after{content:'';flex:1;height:1px;background:#1e3a5f}

/* Pulse dot */
.pulse-dot{width:7px;height:7px;border-radius:50%;background:#00c896;animation:pulse-anim 2s ease-in-out infinite}
@keyframes pulse-anim{0%,100%{opacity:1}50%{opacity:.3}}

/* Animations */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.anim-1{animation:fadeUp .6s .05s ease both}
.anim-2{animation:fadeUp .6s .15s ease both}
.anim-3{animation:fadeUp .6s .25s ease both}
.anim-4{animation:fadeUp .6s .35s ease both}

/* Modal */
.modal-bd{background:rgba(0,0,0,.75);backdrop-filter:blur(6px)}

/* WiFi signal */
.sig-bar{border-radius:2px;background:#1e3a5f}
.sig-bar.on{background:var(--accent1)}

/* Timeline */
.tl-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:5px}

/* Stat mini card */
.stat-mini{background:rgba(255,255,255,.03);border:1px solid rgba(0,212,255,.1);border-radius:12px;padding:16px}

/* CTA btn */
.btn-primary{background:linear-gradient(135deg,var(--accent1),#00a8cc);color:#07111f;font-weight:700;border:none;cursor:pointer;transition:opacity .2s,transform .1s}
.btn-primary:hover{opacity:.9}
.btn-primary:active{transform:scale(.98)}

.btn-ghost{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);color:#b0c8e0;cursor:pointer;transition:all .2s}
.btn-ghost:hover{border-color:rgba(0,212,255,.4);color:var(--accent1)}

/* Tab site */
.site-tab-btn{border-bottom:2px solid transparent;transition:all .2s;color:#4a6b8a;font-size:14px;padding-bottom:10px}
.site-tab-btn.active{color:var(--accent1);border-bottom-color:var(--accent1)}
.site-tab-content{display:none}.site-tab-content.active{display:grid}

/* Mobile nav */
#mobile-nav{transition:all .3s}

/* Small helpers for header/footer inserted via include */
.header-insert, .footer-insert{max-width:1200px;margin:0 auto;padding:0 16px}

/* Theme alternative when user toggles */
body.alt-accent{--accent1:#ffa500;--accent2:#00d4ff}

/* ----------------------------- */
/* Light mode (mode clair / page blanche) */
/* Appliquer : <body class="light-mode"> */
body.light-mode{ --bg:#ffffff; --text:#0b1220; --accent1:#0077c2; --accent2:#00a8cc; --accent-warm:#d97706 }

body.light-mode{ background:var(--bg); color:var(--text) }
/* Nav */
body.light-mode .nav-glass{ background: rgba(255,255,255,0.95); border-bottom-color: rgba(2,6,23,0.06); }
/* Hero */
body.light-mode .hero-bg{ background: linear-gradient(ellipse 70% 50% at 65% 30%, rgba(0,119,194,0.06) 0%, transparent 60%), radial-gradient(ellipse 50% 40% at 10% 70%, rgba(0,168,204,0.04) 0%, transparent 50%), var(--bg); }
body.light-mode .grid-overlay{ background-image: linear-gradient(rgba(0,119,194,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(0,119,194,0.02) 1px, transparent 1px); }

/* Cards and panels */
body.light-mode .card-border{ background:#ffffff; border-color: rgba(2,6,23,0.06); box-shadow:none }
body.light-mode .stat-mini{ background:#fbfcfd; border-color: rgba(2,6,23,0.04); color:var(--text) }

/* Text and tables */
body.light-mode .ed-table th{ color: rgba(2,6,23,0.6); border-bottom-color: rgba(2,6,23,0.04) }
body.light-mode .ed-table td{ color: var(--text); background: transparent }

/* Inputs */
body.light-mode .ed-input{ background:#ffffff; border-color: rgba(2,6,23,0.06); color:var(--text) }
body.light-mode .ed-input:focus{ box-shadow:0 0 0 3px rgba(0,120,194,0.08) }

/* Buttons */
body.light-mode .btn-primary{ color:#fff }
body.light-mode .btn-ghost{ background: #ffffff; border-color: rgba(2,6,23,0.04); color: rgba(2,6,23,0.75) }

/* Modal */
body.light-mode .modal-bd{ background: rgba(10,14,20,0.4); }

/* Badge variants (tweak for light bg) */
body.light-mode .badge-ok{ background: rgba(0,200,150,0.12); border-color: rgba(0,200,150,0.18); color:#0b6b4f }
body.light-mode .badge-warn{ background: rgba(255,165,0,0.12); border-color: rgba(255,165,0,0.18); color:#9a5a00 }
body.light-mode .badge-crit{ background: rgba(255,59,92,0.12); border-color: rgba(255,59,92,0.18); color:#7a1d2a }
body.light-mode .badge-info{ background: rgba(0,119,194,0.08); border-color: rgba(0,119,194,0.12); color:var(--accent1) }

/* Site logo gradient for light mode */
body.light-mode .site-logo{ background: linear-gradient(135deg,var(--accent1),var(--accent2)); }

/* Some inline-style overrides: override common dark hex backgrounds used inline */
.light-mode [style*="#0d1e33"], .light-mode [style*="#07111f"], .light-mode [style*="#04090f"], .light-mode [style*="#112240"] {
  background: transparent !important;
  color: inherit !important;
}
.light-mode [style*="#1e3a5f"]{ border-color: rgba(2,6,23,0.06) !important }

/* Ensure links readable */
body.light-mode a{ color: var(--accent1) }

/* ─── Admin sidebar ─── */
.admin-sidebar{width:250px;min-height:100vh;background:#0d1e33;border-right:1px solid #1e3a5f;flex-shrink:0}
.admin-nav-item{display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:8px;font-size:13px;cursor:pointer;color:#4a6b8a;transition:all .2s;width:100%;background:transparent;border:none;text-align:left}
.admin-nav-item:hover,.admin-nav-item.active{background:rgba(0,212,255,.08);color:#00d4ff}
.admin-tab{display:none}.admin-tab.active{display:block}

/* ─── Service cards hover glow ─── */
.service-card-blue{transition:box-shadow .3s}
.service-card-blue:hover{box-shadow:0 0 40px rgba(0,212,255,.12)}
.service-card-green{transition:box-shadow .3s}
.service-card-green:hover{box-shadow:0 0 40px rgba(0,200,150,.12)}
.service-card-orange{transition:box-shadow .3s}
.service-card-orange:hover{box-shadow:0 0 40px rgba(255,165,0,.12)}

/* ─── Modal overlay (admin) ─── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:100;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.modal-overlay.hidden{display:none}

/* ─── Stat mini (admin KPI) ─── */
.kpi-card{padding:20px;background:rgba(255,255,255,.02);border:1px solid #1e3a5f;border-radius:14px}

/* ─── btn-primary & btn-ghost overrides (if not already present) ─── */
.btn-primary{background:linear-gradient(135deg,var(--accent1),var(--accent2));transition:opacity .2s}
.btn-primary:hover{opacity:.9}
.btn-ghost{border:1px solid rgba(255,255,255,.12);color:var(--text);border-radius:12px;transition:all .2s}
.btn-ghost:hover{border-color:rgba(0,212,255,.4);color:#00d4ff}

/* ─── Admin table row hover ─── */
.admin-table tr:hover td{background:rgba(0,212,255,.025)}

/* ─── Admin sidebar mobile drawer ─── */
@media(max-width:768px){
  .admin-sidebar{position:fixed;left:-260px;top:0;z-index:200;transition:left .3s}
  .admin-sidebar.open{left:0}
  .admin-content{margin-left:0!important}
}

/* ─── Mobile responsive ─── */
@media(max-width:640px){
  /* Portal tab buttons — bigger tap targets */
  .portal-nav-item{padding:12px 14px;font-size:10px}

  /* Hero h1 — clamp tighter */
  .hero-h1{font-size:clamp(2rem,8vw,2.8rem)}

  /* Contact form — stack first/last name on very small screens */
  #contact-grid{grid-template-columns:1fr}

  /* Services section — single col stack */
  .services-grid-md{grid-template-columns:1fr}
}