/* =============================================================
   SecNumCloud Readiness Tool — Design System + Utility Classes
   Version 4.0 — Wavestone
   Inclut tous les utilitaires remplaçant Tailwind CSS
   ============================================================= */

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Force nos styles à primer sur Tailwind pour les éléments structurels */
body, html { font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif !important; }

/* ── Variables ──────────────────────────────────────────────── */
:root {
  --ws-blue:        #002D72;
  --ws-blue-hover:  #0056D6;
  --ws-blue-light:  #E8EEF9;
  --ws-blue-mid:    #1a4d9e;
  --ws-black:       #1A1A1A;
  --ws-dark:        #2D2D2D;
  --ws-gray:        #5A5A5A;
  --ws-gray-light:  #8A8A8A;
  --ws-border:      #E2E2E2;
  --ws-bg:          #F4F4F4;
  --ws-white:       #FFFFFF;
  --ws-success:     #006B3C;
  --ws-success-bg:  #E6F4EE;
  --ws-warning:     #9B5400;
  --ws-warning-bg:  #FEF3E2;
  --ws-danger:      #C0001A;
  --ws-danger-bg:   #FBEAEA;
  --r-sm:   2px;
  --r-md:   4px;
  --r-lg:   6px;
  --r-xl:   8px;
  --ease:   0.18s ease;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
  --shadow-md: 0 2px 8px rgba(0,0,0,.10);
  /* Layout */
  --sidebar-w:  260px;
  --topbar-h:   56px;
}

/* ── Base ───────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  background: var(--ws-bg) !important;
  color: var(--ws-black);
  font-size: 14px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* Layout : sidebar fixe sur desktop, contenu décalé via margin-left sur #pageWrapper */
  display: block !important;
  min-height: 100vh;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700;
  color: var(--ws-black);
  line-height: 1.25;
}

a { color: var(--ws-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════
   LAYOUT : SIDEBAR + MAIN
   ═══════════════════════════════════════════════════════════════ */

/* ── Overlay mobile ─────────────────────────────────────────── */
#sidebarOverlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0,0,0,.5);
}
#sidebarOverlay.visible { display: block; }
@media (min-width: 1024px) { #sidebarOverlay { display: none !important; } }

/* ── Sidebar ────────────────────────────────────────────────── */
#sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  background: var(--ws-white);
  border-right: 2px solid var(--ws-blue);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Mobile : caché par défaut */
  transform: translateX(-100%);
  transition: transform .25s ease;
  box-shadow: 2px 0 12px rgba(0,0,0,.12);
}
#sidebar.open { transform: translateX(0); }

/* Desktop : sidebar toujours visible, statique */
@media (min-width: 1024px) {
  #sidebar {
    transform: translateX(0) !important;
    position: fixed;
    top: 0;
    z-index: 40;
    box-shadow: 1px 0 6px rgba(0,0,0,.06);
  }
}

/* ── Sidebar Header ─────────────────────────────────────────── */
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  height: var(--topbar-h);
  min-height: var(--topbar-h);
  background: var(--ws-blue);
  border-bottom: 1px solid rgba(255,255,255,.1);
  flex-shrink: 0;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
}
.sidebar-brand-icon {
  width: 32px;
  height: 32px;
  background: rgba(255,255,255,.15);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sidebar-brand-icon i { color: white; font-size: 13px; }
.sidebar-brand-name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  color: white;
  font-size: 13px;
  white-space: nowrap;
}
.sidebar-brand-sub {
  color: rgba(255,255,255,.7);
  font-size: 10px;
  white-space: nowrap;
}
.sidebar-version {
  display: inline-block;
  padding: 1px 4px;
  border: 1px solid rgba(255,255,255,.3);
  font-size: 9px;
  font-weight: 700;
  color: rgba(255,255,255,.65);
  border-radius: 2px;
  margin-left: 4px;
}
.sidebar-close-btn {
  width: 28px;
  height: 28px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 4px;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}
.sidebar-close-btn:hover { background: rgba(255,255,255,.2); }
/* Masquer le bouton fermer sur desktop */
@media (min-width: 1024px) { .sidebar-close-btn { display: none; } }

/* ── Sidebar Nav ────────────────────────────────────────────── */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: none;
  background: transparent;
  color: var(--ws-gray);
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background var(--ease), color var(--ease);
}
.sidebar-item:hover {
  background: var(--ws-blue-light);
  color: var(--ws-blue);
}
.sidebar-item.active {
  background: var(--ws-blue);
  color: white;
  font-weight: 700;
}
.sidebar-item.active .sidebar-badge {
  background: rgba(255,255,255,.2);
  color: white;
  border-color: transparent;
}
.sidebar-item-icon { width: 18px; text-align: center; font-size: 14px; flex-shrink: 0; }
.sidebar-item-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  background: var(--ws-blue-light);
  color: var(--ws-blue);
  border: 1px solid rgba(0,45,114,.15);
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
  flex-shrink: 0;
}
.sidebar-divider { height: 1px; background: var(--ws-border); margin: 6px 4px; }

/* ── Sidebar Footer ─────────────────────────────────────────── */
.sidebar-footer {
  border-top: 1px solid var(--ws-border);
  padding: 12px;
  flex-shrink: 0;
  background: var(--ws-bg);
}
.sidebar-footer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.sidebar-footer-info {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--ws-gray-light);
}

/* ═══════════════════════════════════════════════════════════════
   TOPBAR
   ═══════════════════════════════════════════════════════════════ */
#topbar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  height: var(--topbar-h);
  z-index: 80;
  background: var(--ws-white);
  border-bottom: 2px solid var(--ws-blue);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 1024px) {
  #topbar { left: var(--sidebar-w); }
}
.topbar-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  gap: 12px;
}
.sidebar-toggle-btn {
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--ws-border);
  background: transparent;
  color: var(--ws-gray);
  border-radius: var(--r-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.sidebar-toggle-btn:hover {
  background: var(--ws-blue-light);
  color: var(--ws-blue);
  border-color: var(--ws-blue);
}
/* Cacher hamburger sur desktop (sidebar toujours visible) */
@media (min-width: 1024px) { .sidebar-toggle-btn { display: none; } }

.topbar-left { display: flex; align-items: center; gap: 10px; }
.topbar-brand { display: flex; align-items: center; gap: 8px; }
.topbar-brand-text { display: flex; align-items: center; gap: 6px; }
/* Cacher brand dans topbar sur desktop (déjà dans sidebar) */
@media (min-width: 1024px) { .topbar-brand { display: none; } }

.topbar-section-indicator {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--ws-blue);
  flex: 1;
  display: none;
}
@media (min-width: 1024px) { .topbar-section-indicator { display: block; } }

.topbar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.topbar-btn-label { display: none; }
@media (min-width: 600px) { .topbar-btn-label { display: inline; } }

/* ═══════════════════════════════════════════════════════════════
   PAGE WRAPPER — zone principale
   ═══════════════════════════════════════════════════════════════ */
#pageWrapper {
  min-width: 0;
  margin-top: var(--topbar-h);
  /* Mobile : pas de marge latérale (sidebar en overlay) */
  margin-left: 0;
  min-height: calc(100vh - var(--topbar-h));
}
@media (min-width: 1024px) {
  /* Desktop : décaler pour laisser place au sidebar fixe */
  #pageWrapper { margin-left: var(--sidebar-w) !important; }
}

/* ═══════════════════════════════════════════════════════════════
   BRAND / LOGO
   ═══════════════════════════════════════════════════════════════ */
.nav-logo-icon {
  width: 32px; height: 32px;
  background: var(--ws-blue);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border-radius: var(--r-sm);
}
.nav-logo-icon i { color: white; font-size: 13px; }
.nav-brand-name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  color: var(--ws-blue);
  font-size: 14px;
}
.nav-brand-sub {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  color: var(--ws-black);
  font-size: 13px;
}
.nav-version {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border: 1px solid var(--ws-border);
  font-size: 9px;
  font-weight: 700;
  color: var(--ws-gray);
  letter-spacing: .04em;
  border-radius: var(--r-sm);
}
.nav-badge {
  padding: 1px 6px;
  background: var(--ws-blue-light);
  color: var(--ws-blue);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .03em;
  border-radius: var(--r-sm);
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  background: var(--ws-blue);
  color: var(--ws-white);
  border: 2px solid var(--ws-blue);
  border-radius: var(--r-md);
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--ease), border-color var(--ease);
  text-decoration: none;
  letter-spacing: .01em;
}
.btn-primary:hover { background: var(--ws-blue-hover); border-color: var(--ws-blue-hover); }

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  background: transparent;
  color: var(--ws-blue);
  border: 2px solid var(--ws-blue);
  border-radius: var(--r-md);
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--ease);
}
.btn-outline:hover { background: var(--ws-blue); color: var(--ws-white); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: transparent;
  color: var(--ws-gray);
  border: 1px solid var(--ws-border);
  border-radius: var(--r-md);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--ease);
}
.btn-ghost:hover { color: var(--ws-black); border-color: var(--ws-gray); }

.btn-account {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: transparent;
  color: var(--ws-blue);
  border: 1.5px solid var(--ws-blue);
  border-radius: var(--r-md);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--ease);
  font-family: 'Montserrat', sans-serif;
}
.btn-account:hover { background: var(--ws-blue); color: white; }
.btn-account.logged-in { background: var(--ws-blue-light); color: var(--ws-blue); border-color: transparent; }

.btn-theme-toggle {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--ws-border);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--ws-gray);
  cursor: pointer;
  font-size: 14px;
  flex-shrink: 0;
  transition: all var(--ease);
}
.btn-theme-toggle:hover { background: var(--ws-blue-light); color: var(--ws-blue); }

/* ═══════════════════════════════════════════════════════════════
   LANG SWITCHER
   ═══════════════════════════════════════════════════════════════ */
.lang-switcher {
  display: flex;
  border: 1px solid var(--ws-border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.lang-btn {
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
  background: transparent;
  color: var(--ws-gray);
  border: none;
  cursor: pointer;
  transition: all var(--ease);
  font-family: 'Montserrat', sans-serif;
  letter-spacing: .02em;
}
.lang-btn.active { background: var(--ws-blue); color: white; }
.lang-btn:hover:not(.active) { background: var(--ws-bg); color: var(--ws-black); }

/* ═══════════════════════════════════════════════════════════════
   HERO BANNER
   ═══════════════════════════════════════════════════════════════ */
.hero-gradient {
  background: var(--ws-blue);
  position: relative;
  overflow: hidden;
  padding: 32px 20px 24px;
}
.hero-gradient::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}
.hero-inner {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}
@media (min-width: 700px) {
  .hero-inner { flex-direction: row; align-items: center; justify-content: space-between; }
}
.hero-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 2px;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,.9);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
  margin-bottom: 8px;
}
.hero-badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #4ADE80;
  animation: pulse 2s infinite;
  flex-shrink: 0;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.hero-title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(18px, 2.5vw, 28px);
  font-weight: 900;
  color: white;
  line-height: 1.2;
  letter-spacing: -.01em;
}
.hero-subtitle {
  font-size: 13px;
  color: rgba(255,255,255,.72);
  margin-top: 6px;
  line-height: 1.6;
}
.hero-stats { display: flex; flex-wrap: wrap; gap: 10px; }
.stat-card {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r-md);
  padding: 10px 16px;
  text-align: center;
  min-width: 80px;
}
.stat-value {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: white;
  line-height: 1.2;
}
.stat-label {
  font-size: 9px;
  color: rgba(255,255,255,.6);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-top: 2px;
}
.hero-progress-wrap { margin-top: 16px; position: relative; }
.hero-progress-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: rgba(255,255,255,.6);
  margin-bottom: 5px;
}
.hero-progress-bar-bg {
  background: rgba(255,255,255,.15);
  border-radius: 2px;
  height: 5px;
  overflow: hidden;
}
.hero-progress-bar-fill {
  height: 100%;
  background: #4A9EF8;
  border-radius: 2px;
  transition: width .5s ease;
}

/* ═══════════════════════════════════════════════════════════════
   MAIN CONTENT
   ═══════════════════════════════════════════════════════════════ */
#mainContent {
  padding: 20px 16px 40px;
}
@media (min-width: 700px) { #mainContent { padding: 24px 24px 48px; } }
@media (min-width: 1280px) { #mainContent { padding: 28px 32px 56px; } }

.section-content { display: block; }
.section-content.hidden { display: none !important; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.section-content.active { animation: fadeIn .25s ease; }

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */
#pageFooter {
  border-top: 1px solid var(--ws-border);
  background: var(--ws-white);
  padding: 14px 20px;
}
.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  text-align: center;
}
@media (min-width: 640px) {
  .footer-inner { flex-direction: row; justify-content: space-between; text-align: left; }
}
.footer-left, .footer-right {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--ws-gray);
}
.footer-icon { color: var(--ws-blue); font-size: 12px; }
.footer-sep  { opacity: .4; }

/* ═══════════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════════ */
.card {
  background: var(--ws-white);
  border: 1px solid var(--ws-border);
  border-radius: var(--r-md);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.card-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}
.card-title { font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 700; color: var(--ws-black); }
.card-subtitle { font-size: 12px; color: var(--ws-gray); margin-top: 2px; line-height: 1.5; }
.card-icon {
  width: 38px; height: 38px;
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0;
}
.card-icon.blue   { background: var(--ws-blue-light); color: var(--ws-blue); }
.card-icon.amber  { background: var(--ws-warning-bg); color: var(--ws-warning); }
.card-icon.violet { background: #F0EAF8; color: #6B21A8; }
.card-icon.green  { background: var(--ws-success-bg); color: var(--ws-success); }
.card-icon.red    { background: var(--ws-danger-bg);  color: var(--ws-danger); }
.card-icon.gray   { background: var(--ws-bg);         color: var(--ws-gray); }
.card-icon.orange { background: #FEF3E2;               color: #9B5400; }
/* Tailwind-style red card icon */
.card-icon.bg-red-900\/30  { background: rgba(153,27,27,.18); color: #f87171; }

/* ═══════════════════════════════════════════════════════════════
   ASSESSMENT — Pillar Tabs
   ═══════════════════════════════════════════════════════════════ */
.pillar-tabs-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}
.pillar-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--r-md);
  font-size: 12px;
  font-weight: 600;
  color: var(--ws-gray);
  background: var(--ws-white);
  border: 1px solid var(--ws-border);
  cursor: pointer;
  transition: all var(--ease);
  white-space: nowrap;
  font-family: 'Open Sans', sans-serif;
}
.pillar-tab:hover { color: var(--ws-blue); border-color: var(--ws-blue); background: var(--ws-blue-light); }
.pillar-tab.active { color: var(--ws-white); border-color: var(--ws-blue); background: var(--ws-blue); font-weight: 700; }
.pillar-tab.completed { border-color: var(--ws-success); background: var(--ws-success-bg); color: var(--ws-success); font-weight: 700; }
.pillar-tab.completed::after { content: ' ✓'; font-weight: 800; }
.pillar-content { animation: fadeIn .2s ease; }

/* ── Progress Bars ──────────────────────────────────────────── */
.pillar-progress-bar { flex: 1; background: var(--ws-bg); border-radius: 2px; height: 5px; overflow: hidden; }
.pillar-progress-fill { height: 100%; background: var(--ws-blue); border-radius: 2px; transition: width .4s ease; }

/* ── Assessment Nav ─────────────────────────────────────────── */
.assessment-nav-btns {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--ws-border);
}

/* ── Question Cards ─────────────────────────────────────────── */
.question-card {
  background: var(--ws-white);
  border: 1px solid var(--ws-border);
  border-radius: var(--r-md);
  padding: 18px;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.question-card:hover { border-color: #C0C0C0; box-shadow: var(--shadow-md); }
.question-card.answered { border-color: #A3C4A0; background: #FAFFFE; }
.question-card.critical-answered { border-color: #F0A0A8; background: #FFFAFB; }
.question-label { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.question-number {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px;
  background: var(--ws-blue); color: white;
  font-size: 10px; font-weight: 800;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  font-family: 'Montserrat', sans-serif;
}
.question-label > span:nth-child(2) { font-size: 13px; font-weight: 500; color: var(--ws-black); flex: 1; line-height: 1.55; }
.critical-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  background: var(--ws-danger-bg); color: var(--ws-danger);
  font-size: 10px; font-weight: 700;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  border: 1px solid #F0C0C0;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase; letter-spacing: .04em;
}

/* ── Answer Options ─────────────────────────────────────────── */
.answer-options { display: grid; gap: 8px; }
.answer-options.cols-2 { grid-template-columns: 1fr 1fr; }
.answer-options.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 640px) {
  .answer-options.cols-2,
  .answer-options.cols-3 { grid-template-columns: 1fr; }
}
.answer-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border: 1.5px solid var(--ws-border);
  border-radius: var(--r-md);
  background: var(--ws-white);
  color: var(--ws-black);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: all var(--ease);
  width: 100%;
  font-family: 'Open Sans', sans-serif;
}
.answer-btn:hover { border-color: var(--ws-blue); background: var(--ws-blue-light); }
.answer-btn.selected { border-color: var(--ws-blue); background: var(--ws-blue-light); color: var(--ws-blue); font-weight: 600; }
.answer-btn.selected .answer-icon-wrap { background: var(--ws-blue); }
.answer-btn.selected.critical { border-color: var(--ws-danger); background: var(--ws-danger-bg); color: var(--ws-danger); }
.answer-btn.selected.critical .answer-icon-wrap { background: var(--ws-danger); }

.answer-icon-wrap {
  width: 28px; height: 28px;
  background: var(--ws-bg);
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; flex-shrink: 0;
  transition: background var(--ease);
}
.answer-label-text { flex: 1; line-height: 1.4; }

/* ── Rationale / Hints ──────────────────────────────────────── */
.rationale-block {
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--ws-bg);
  border-left: 3px solid var(--ws-blue);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 12px;
  color: var(--ws-gray);
  line-height: 1.6;
}
.context-hint {
  font-size: 11px;
  color: var(--ws-gray-light);
  font-style: italic;
  margin-bottom: 12px;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════
   RESULTS — Graphiques
   ═══════════════════════════════════════════════════════════════ */
.radar-container {
  width: 100%;
  max-width: 100%;
  height: 460px;
  margin: 0 auto;
  position: relative;
}
.gauge-container {
  width: 176px;
  height: 112px;
  position: relative;
  margin: 0 auto;
}

/* ── Alert boxes ────────────────────────────────────────────── */
.alert-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  border: 1px solid;
  margin-bottom: 16px;
}
.alert-danger  { background: var(--ws-danger-bg);  border-color: var(--ws-danger);  color: var(--ws-danger); }
.alert-warning { background: var(--ws-warning-bg); border-color: var(--ws-warning); color: var(--ws-warning); }
.alert-info    { background: var(--ws-blue-light);  border-color: var(--ws-blue);    color: var(--ws-blue); }
.alert-icon    { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.alert-box > div { flex: 1; min-width: 0; }

/* ── Blocking Point ─────────────────────────────────────────── */
.blocking-point {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  background: var(--ws-bg);
  border-radius: var(--r-sm);
  border-left: 3px solid var(--ws-danger);
  font-size: 12px;
}
.warning-point { border-left-color: var(--ws-warning); }

/* ── Verdict badges ─────────────────────────────────────────── */
.history-verdict-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--r-sm);
  font-size: 10px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
  border: 1px solid;
}
.verdict-pub { background: var(--ws-success-bg); color: var(--ws-success); border-color: rgba(0,107,60,.25); }
.verdict-sov { background: var(--ws-warning-bg); color: var(--ws-warning); border-color: rgba(155,84,0,.25); }
.verdict-snc { background: var(--ws-danger-bg);  color: var(--ws-danger);  border-color: rgba(192,0,26,.25); }

/* ── Export buttons ─────────────────────────────────────────── */
.export-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--ws-bg);
  border: 1px solid var(--ws-border);
  border-radius: var(--r-md);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: all var(--ease);
  font-family: 'Open Sans', sans-serif;
}
.export-btn:hover { background: var(--ws-blue-light); border-color: var(--ws-blue); }
.export-icon { font-size: 20px; flex-shrink: 0; }
.export-label { font-size: 13px; font-weight: 700; color: var(--ws-black); }
.export-hint  { font-size: 11px; color: var(--ws-gray); margin-top: 1px; }

/* ── Export Modal ───────────────────────────────────────────── */
.export-modal-box {
  background: var(--ws-white);
  border: 1px solid var(--ws-border);
  border-radius: var(--r-lg);
  padding: 24px;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
  max-height: 90vh;
  overflow-y: auto;
}
.export-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
}
.modal-title { font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 700; color: var(--ws-black); }
.export-modal-close {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-md);
  border: 1.5px solid var(--ws-border);
  background: var(--ws-white);
  cursor: pointer; color: var(--ws-gray);
}
.export-modal-close:hover { background: var(--ws-bg); }
.export-modal-content { display: flex; flex-direction: column; gap: 8px; }

/* ── Toast ──────────────────────────────────────────────────── */
#toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
  max-width: 360px;
  min-width: 240px;
}
.toast-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--ws-white);
  border: 1px solid var(--ws-border);
  border-left: 4px solid var(--ws-blue);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  font-size: 13px;
  color: var(--ws-black);
}

/* ── Empty state ────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 60px 20px; }
.empty-state-icon {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--ws-bg);
  border: 2px solid var(--ws-border);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
  font-size: 22px; color: var(--ws-gray);
}
.empty-state h3 { font-size: 16px; font-weight: 600; color: var(--ws-gray); margin-bottom: 6px; }
.empty-state p  { font-size: 13px; color: var(--ws-gray); }

/* ═══════════════════════════════════════════════════════════════
   UTILITY CLASSES — Remplacement Tailwind
   ═══════════════════════════════════════════════════════════════ */

/* Display */
.hidden  { display: none !important; }
.block   { display: block; }
.flex    { display: flex; }
.inline-flex { display: inline-flex; }
.grid    { display: grid; }
.inline-block { display: inline-block; }

/* Flex helpers */
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.items-end     { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end   { justify-content: flex-end; }
.flex-col      { flex-direction: column; }
.flex-wrap     { flex-wrap: wrap; }
.flex-1        { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.w-full        { width: 100%; }
.h-full        { height: 100%; }
.relative      { position: relative; }
.absolute      { position: absolute; }
.inset-0       { top: 0; right: 0; bottom: 0; left: 0; }
.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

/* Grid */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Gap */
.gap-1  { gap: 4px; }
.gap-2  { gap: 8px; }
.gap-3  { gap: 12px; }
.gap-4  { gap: 16px; }
.gap-5  { gap: 20px; }
.gap-6  { gap: 24px; }
.gap-8  { gap: 32px; }
.gap-1\.5 { gap: 6px; }

/* Padding */
.p-0    { padding: 0; }
.p-1    { padding: 4px; }
.p-2    { padding: 8px; }
.p-3    { padding: 12px; }
.p-4    { padding: 16px; }
.p-5    { padding: 20px; }
.p-6    { padding: 24px; }
.px-2   { padding-left: 8px; padding-right: 8px; }
.px-3   { padding-left: 12px; padding-right: 12px; }
.px-4   { padding-left: 16px; padding-right: 16px; }
.py-2   { padding-top: 8px; padding-bottom: 8px; }
.py-3   { padding-top: 12px; padding-bottom: 12px; }
.py-4   { padding-top: 16px; padding-bottom: 16px; }
.py-6   { padding-top: 24px; padding-bottom: 24px; }
.py-8   { padding-top: 32px; padding-bottom: 32px; }
.py-10  { padding-top: 40px; padding-bottom: 40px; }
.py-16  { padding-top: 64px; padding-bottom: 64px; }
.pt-3   { padding-top: 12px; }
.pb-2   { padding-bottom: 8px; }

/* Margin */
.m-0    { margin: 0; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-0   { margin-top: 0; }
.mt-1   { margin-top: 4px; }
.mt-2   { margin-top: 8px; }
.mt-3   { margin-top: 12px; }
.mt-4   { margin-top: 16px; }
.mt-5   { margin-top: 20px; }
.mb-0   { margin-bottom: 0; }
.mb-1   { margin-bottom: 4px; }
.mb-2   { margin-bottom: 8px; }
.mb-3   { margin-bottom: 12px; }
.mb-4   { margin-bottom: 16px; }
.mb-5   { margin-bottom: 20px; }
.mb-6   { margin-bottom: 24px; }
.mb-8   { margin-bottom: 32px; }
.mr-1   { margin-right: 4px; }
.mr-2   { margin-right: 8px; }
.ml-auto { margin-left: auto; }
.mt-0\.5 { margin-top: 2px; }
.mb-0\.5 { margin-bottom: 2px; }
.mb-1\.5 { margin-bottom: 6px; }

/* Typography */
.text-xs   { font-size: 11px; }
.text-sm   { font-size: 12px; }
.text-base { font-size: 14px; }
.text-lg   { font-size: 16px; }
.text-xl   { font-size: 18px; }
.text-2xl  { font-size: 22px; }
.text-3xl  { font-size: 28px; }
.font-normal    { font-weight: 400; }
.font-medium    { font-weight: 500; }
.font-semibold  { font-weight: 600; }
.font-bold      { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.font-mono      { font-family: 'JetBrains Mono', monospace; }
.uppercase      { text-transform: uppercase; }
.lowercase      { text-transform: lowercase; }
.tracking-wider { letter-spacing: .06em; }
.leading-tight  { line-height: 1.25; }
.leading-relaxed { line-height: 1.65; }
.text-center    { text-align: center; }
.text-left      { text-align: left; }
.text-right     { text-align: right; }
.truncate       { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whitespace-nowrap { white-space: nowrap; }
.break-all      { word-break: break-all; }

/* Colors */
.text-white        { color: #FFFFFF; }
.text-black        { color: var(--ws-black); }
.text-gray-300     { color: #AAAAAA; }
.text-gray-400     { color: var(--ws-gray-light); }
.text-gray-500     { color: var(--ws-gray); }
.text-gray-600     { color: #444444; }
.text-blue-400     { color: var(--ws-blue-hover); }
.text-blue-500     { color: var(--ws-blue); }
.text-green-400    { color: var(--ws-success); }
.text-green-500    { color: var(--ws-success); }
.text-amber-400    { color: var(--ws-warning); }
.text-red-300      { color: #F87171; }
.text-red-400      { color: var(--ws-danger); }
.text-red-500      { color: var(--ws-danger); }

/* Backgrounds */
.bg-white          { background: var(--ws-white); }
.bg-gray-950       { background: #0A0A0A; }
.bg-gray-900       { background: #111111; }
.bg-gray-800       { background: #1A1A1A; }
.bg-blue-900\/40   { background: rgba(30,58,138,.2); }
.bg-green-900\/40  { background: rgba(20,83,45,.2); }
.bg-amber-900\/40  { background: rgba(120,53,15,.2); }

/* Border */
.border            { border: 1px solid var(--ws-border); }
.border-t          { border-top: 1px solid var(--ws-border); }
.border-b          { border-bottom: 1px solid var(--ws-border); }
.border-gray-800   { border-color: #2E2E2E; }
.border-gray-700   { border-color: #3E3E3E; }
.rounded           { border-radius: var(--r-md); }
.rounded-full      { border-radius: 9999px; }
.rounded-lg        { border-radius: var(--r-lg); }
.rounded-sm        { border-radius: var(--r-sm); }

/* Sizing */
.w-4   { width: 16px; }
.w-5   { width: 20px; }
.w-6   { width: 24px; }
.w-8   { width: 32px; }
.w-10  { width: 40px; }
.w-12  { width: 48px; }
.w-16  { width: 64px; }
.w-44  { width: 176px; }
.h-4   { height: 16px; }
.h-5   { height: 20px; }
.h-6   { height: 24px; }
.h-8   { height: 32px; }
.h-10  { height: 40px; }
.h-16  { height: 64px; }
.h-28  { height: 112px; }
.max-h-40 { max-height: 160px; }
.max-h-72 { max-height: 288px; }
.min-w-0  { min-width: 0; }

/* Shadow */
.shadow    { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: 0 4px 16px rgba(0,0,0,.1); }

/* Opacity */
.opacity-60 { opacity: 0.6; }
.opacity-75 { opacity: 0.75; }

/* Cursor */
.cursor-pointer { cursor: pointer; }
.select-none    { user-select: none; }

/* Space helpers (space-y) */
.space-y-1  > * + * { margin-top: 4px; }
.space-y-2  > * + * { margin-top: 8px; }
.space-y-3  > * + * { margin-top: 12px; }
.space-y-4  > * + * { margin-top: 16px; }
.space-y-5  > * + * { margin-top: 20px; }
.space-y-6  > * + * { margin-top: 24px; }
.space-y-1\.5 > * + * { margin-top: 6px; }

/* Transition */
.transition { transition: all var(--ease); }

/* Text sizes with bracket notation (Tailwind-style) */
.text-\[6px\]  { font-size: 6px; }
.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 11px; }
.text-\[13px\] { font-size: 13px; }

/* ═══════════════════════════════════════════════════════════════
   PROFILE / FORMS
   ═══════════════════════════════════════════════════════════════ */
.form-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--ws-black);
  margin-bottom: 6px;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--ws-border);
  border-radius: var(--r-md);
  background: var(--ws-white);
  color: var(--ws-black);
  font-size: 13px;
  font-family: 'Open Sans', sans-serif;
  transition: border-color var(--ease);
  appearance: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--ws-blue);
  box-shadow: 0 0 0 2px rgba(0,45,114,.1);
}
.form-textarea { resize: vertical; min-height: 80px; }
.form-hint { font-size: 11px; color: var(--ws-gray-light); margin-top: 4px; }
.form-error { font-size: 11px; color: var(--ws-danger); margin-top: 4px; }

/* ═══════════════════════════════════════════════════════════════
   ACCOUNT / HISTORY
   ═══════════════════════════════════════════════════════════════ */
.history-item {
  padding: 12px 16px;
  border: 1px solid var(--ws-border);
  border-radius: var(--r-md);
  background: var(--ws-white);
  cursor: pointer;
  transition: all var(--ease);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.history-item:hover { background: var(--ws-bg); border-color: var(--ws-blue-mid); }

/* ═══════════════════════════════════════════════════════════════
   FINOPS / TCO
   ═══════════════════════════════════════════════════════════════ */
.tco-card-public, .tco-card-souverain, .tco-card-secnum {
  background: var(--ws-white);
  border: 1px solid var(--ws-border);
  border-radius: var(--r-md);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}
.tco-card-public   { border-top: 3px solid var(--ws-success); }
.tco-card-souverain{ border-top: 3px solid var(--ws-warning); }
.tco-card-secnum   { border-top: 3px solid var(--ws-danger); }

/* ═══════════════════════════════════════════════════════════════
   RESILIENCE
   ═══════════════════════════════════════════════════════════════ */
.resilience-card {
  background: var(--ws-white);
  border: 1px solid var(--ws-border);
  border-radius: var(--r-md);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --ws-black:       #EBEBEB;   /* texte principal très lisible */
  --ws-dark:        #D0D0D0;
  --ws-gray:        #B0B0B0;   /* texte secondaire lisible */
  --ws-gray-light:  #787878;
  --ws-border:      #303030;
  --ws-bg:          #0E0E0E;
  --ws-white:       #181818;   /* fond des cards */
  --ws-blue:        #5AABFF;   /* bleu plus lumineux */
  --ws-blue-hover:  #7DCFFF;
  --ws-blue-light:  rgba(90,171,255,.14);
  --ws-blue-mid:    #4A9EF8;
  --ws-success:     #34D399;
  --ws-success-bg:  rgba(52,211,153,.12);
  --ws-warning:     #FBBF24;
  --ws-warning-bg:  rgba(251,191,36,.12);
  --ws-danger:      #F87171;
  --ws-danger-bg:   rgba(248,113,113,.12);
  --shadow-sm: 0 1px 4px rgba(0,0,0,.5);
  --shadow-md: 0 2px 12px rgba(0,0,0,.6);
}

[data-theme="dark"] body { background: #111111; }
[data-theme="dark"] #topbar { background: #1A1A1A; border-bottom-color: var(--ws-blue); }
[data-theme="dark"] #sidebar { background: #1A1A1A; border-right-color: var(--ws-blue); }
[data-theme="dark"] .sidebar-footer { background: #0D0D0D; }
[data-theme="dark"] .sidebar-item { color: var(--ws-gray); }
[data-theme="dark"] .sidebar-item:hover { background: rgba(74,158,248,.12); color: var(--ws-blue); }
[data-theme="dark"] .sidebar-item.active { background: var(--ws-blue); color: white; }
[data-theme="dark"] .sidebar-divider { background: var(--ws-border); }
[data-theme="dark"] .sidebar-toggle-btn { border-color: var(--ws-border); color: var(--ws-gray); }
[data-theme="dark"] .card { background: #1A1A1A; border-color: var(--ws-border); }
[data-theme="dark"] .question-card { background: #1A1A1A; border-color: var(--ws-border); }
[data-theme="dark"] .question-card.answered { background: #1A2A1A; border-color: #3A6A3A; }
[data-theme="dark"] .question-card.critical-answered { background: #2A1A1A; border-color: #6A3A3A; }
[data-theme="dark"] .answer-btn { background: #1A1A1A; border-color: var(--ws-border); color: var(--ws-black); }
[data-theme="dark"] .answer-btn:hover { background: rgba(74,158,248,.1); border-color: var(--ws-blue); }
[data-theme="dark"] .answer-btn.selected { background: rgba(74,158,248,.15); border-color: var(--ws-blue); color: var(--ws-blue); }
[data-theme="dark"] .pillar-tab { background: #1A1A1A; border-color: var(--ws-border); color: var(--ws-gray); }
[data-theme="dark"] .pillar-tab.active { background: var(--ws-blue); color: white; border-color: var(--ws-blue); }
[data-theme="dark"] .pillar-tab:hover { background: rgba(74,158,248,.1); color: var(--ws-blue); }
[data-theme="dark"] #pageFooter { background: #0A0A0A; border-top-color: var(--ws-border); }
[data-theme="dark"] footer { background: #0A0A0A; }
[data-theme="dark"] .export-modal-box { background: #1A1A1A; border-color: var(--ws-border); }
[data-theme="dark"] .export-modal-close { background: #1A1A1A; border-color: var(--ws-border); }
[data-theme="dark"] .export-btn { background: #111111; border-color: var(--ws-border); }
[data-theme="dark"] .export-btn:hover { background: rgba(74,158,248,.1); border-color: var(--ws-blue); }
[data-theme="dark"] .export-label { color: var(--ws-black); }
[data-theme="dark"] .hero-gradient { background: linear-gradient(135deg,#0A0A0A 0%,#0D1A33 60%,#002D72 100%); }
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background: #111111 !important; color: var(--ws-black) !important; border-color: var(--ws-border) !important; }
[data-theme="dark"] .form-input, [data-theme="dark"] .form-select, [data-theme="dark"] .form-textarea { background: #111111; color: var(--ws-black); border-color: var(--ws-border); }
[data-theme="dark"] .btn-ghost { background: transparent; color: var(--ws-gray); border-color: var(--ws-border); }
[data-theme="dark"] .btn-ghost:hover { color: var(--ws-black); border-color: var(--ws-gray); background: rgba(255,255,255,.04); }
[data-theme="dark"] .history-item { background: #1A1A1A; border-color: var(--ws-border); }
[data-theme="dark"] .history-item:hover { background: #222; }
[data-theme="dark"] .toast-inner { background: #1A1A1A; border-color: var(--ws-border); color: var(--ws-black); }
[data-theme="dark"] .blocking-point { background: rgba(239,68,68,.05); }
[data-theme="dark"] table th, [data-theme="dark"] table td { border-color: var(--ws-border) !important; }
[data-theme="dark"] .alert-box { opacity: .95; }
[data-theme="dark"] #historyModal > div { background: #1A1A1A !important; border-color: var(--ws-border) !important; }
[data-theme="dark"] #exportModal > div { background: #1A1A1A !important; border-color: var(--ws-border) !important; }
[data-theme="dark"] input[type="range"] { accent-color: var(--ws-blue); }

/* Scrollbar dark */
[data-theme="dark"] ::-webkit-scrollbar { width: 6px; height: 6px; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: #0E0E0E; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3A3A3A; border-radius: 3px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #555; }
/* Scrollbar light */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--ws-bg); }
::-webkit-scrollbar-thumb { background: #C8C8C8; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #AAAAAA; }

/* ═══════════════════════════════════════════════════════════════
   CORRECTIONS CONTRASTE DARK / LIGHT MODE
   ═══════════════════════════════════════════════════════════════ */

/* ── Body & backgrounds ─────────────────────────────────────── */
[data-theme="dark"] body,
[data-theme="dark"] html { background: #0E0E0E !important; }

/* ── Topbar ─────────────────────────────────────────────────── */
[data-theme="dark"] #topbar {
  background: #181818 !important;
  border-bottom-color: var(--ws-blue) !important;
}
[data-theme="dark"] .topbar-section-indicator { color: var(--ws-blue) !important; }
[data-theme="dark"] .nav-brand-name { color: var(--ws-blue) !important; }
[data-theme="dark"] .nav-brand-sub  { color: var(--ws-black) !important; }
[data-theme="dark"] .nav-version    { color: var(--ws-gray) !important; border-color: var(--ws-border) !important; }

/* ── Sidebar ─────────────────────────────────────────────────── */
[data-theme="dark"] #sidebar { background: #181818 !important; border-right-color: var(--ws-blue) !important; }
[data-theme="dark"] .sidebar-footer { background: #101010 !important; }
[data-theme="dark"] .sidebar-item { color: var(--ws-gray) !important; }
[data-theme="dark"] .sidebar-item:hover { background: rgba(90,171,255,.1) !important; color: var(--ws-blue) !important; }
[data-theme="dark"] .sidebar-item.active { background: var(--ws-blue) !important; color: #0E0E0E !important; }
[data-theme="dark"] .sidebar-badge { background: rgba(90,171,255,.15) !important; color: var(--ws-blue) !important; border-color: rgba(90,171,255,.2) !important; }
[data-theme="dark"] .sidebar-item.active .sidebar-badge { background: rgba(255,255,255,.2) !important; color: white !important; }
[data-theme="dark"] .sidebar-divider { background: var(--ws-border) !important; }
[data-theme="dark"] .sidebar-brand-name { color: white !important; }
[data-theme="dark"] .sidebar-brand-sub  { color: rgba(255,255,255,.65) !important; }
[data-theme="dark"] .sidebar-footer-info { color: var(--ws-gray-light) !important; }
[data-theme="dark"] .sidebar-toggle-btn { border-color: var(--ws-border) !important; color: var(--ws-gray) !important; }
[data-theme="dark"] .sidebar-toggle-btn:hover { background: rgba(90,171,255,.1) !important; color: var(--ws-blue) !important; }

/* ── Cards ───────────────────────────────────────────────────── */
[data-theme="dark"] .card { background: #181818 !important; border-color: #2A2A2A !important; }
[data-theme="dark"] .card-title { color: var(--ws-black) !important; }
[data-theme="dark"] .card-subtitle { color: var(--ws-gray) !important; }

/* ── Questions / Assessment ─────────────────────────────────── */
[data-theme="dark"] .question-card { background: #181818 !important; border-color: #2A2A2A !important; }
[data-theme="dark"] .question-card.answered { background: #111E14 !important; border-color: #2A4A2E !important; }
[data-theme="dark"] .question-card.critical-answered { background: #1E1010 !important; border-color: #4A2A2A !important; }
[data-theme="dark"] .question-card > * { color: var(--ws-black); }
[data-theme="dark"] .question-label > span:nth-child(2) { color: var(--ws-black) !important; }
[data-theme="dark"] .answer-btn { background: #111111 !important; border-color: #2A2A2A !important; color: var(--ws-black) !important; }
[data-theme="dark"] .answer-btn:hover { background: rgba(90,171,255,.1) !important; border-color: var(--ws-blue) !important; }
[data-theme="dark"] .answer-btn.selected { background: rgba(90,171,255,.15) !important; border-color: var(--ws-blue) !important; color: var(--ws-blue) !important; }
[data-theme="dark"] .answer-icon-wrap { background: #0E0E0E !important; }
[data-theme="dark"] .rationale-block { background: #0E0E0E !important; border-left-color: var(--ws-blue) !important; color: var(--ws-gray) !important; }

/* ── Pillar tabs ─────────────────────────────────────────────── */
[data-theme="dark"] .pillar-tab { background: #181818 !important; border-color: #2A2A2A !important; color: var(--ws-gray) !important; }
[data-theme="dark"] .pillar-tab.active { background: var(--ws-blue) !important; color: #0E0E0E !important; border-color: var(--ws-blue) !important; }
[data-theme="dark"] .pillar-tab:hover { background: rgba(90,171,255,.1) !important; color: var(--ws-blue) !important; border-color: var(--ws-blue) !important; }
[data-theme="dark"] .pillar-tab.completed { background: rgba(52,211,153,.1) !important; border-color: var(--ws-success) !important; color: var(--ws-success) !important; }

/* ── Hero banner ─────────────────────────────────────────────── */
[data-theme="dark"] .hero-gradient { background: linear-gradient(135deg, #0A0A0A 0%, #0D1A33 50%, #001A4A 100%) !important; }
[data-theme="dark"] .hero-title  { color: white !important; }
[data-theme="dark"] .hero-subtitle { color: rgba(255,255,255,.75) !important; }
[data-theme="dark"] .stat-card { background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.12) !important; }
[data-theme="dark"] .stat-value { color: white !important; }
[data-theme="dark"] .stat-label { color: rgba(255,255,255,.55) !important; }

/* ── Results ─────────────────────────────────────────────────── */
[data-theme="dark"] .blocking-point { background: rgba(248,113,113,.06) !important; border-left-color: var(--ws-danger) !important; }
[data-theme="dark"] .warning-point  { border-left-color: var(--ws-warning) !important; }
[data-theme="dark"] .alert-danger  { background: rgba(248,113,113,.12) !important; border-color: rgba(248,113,113,.3) !important; color: #F87171 !important; }
[data-theme="dark"] .alert-warning { background: rgba(251,191,36,.1)  !important; border-color: rgba(251,191,36,.3)  !important; color: #FBBF24 !important; }
[data-theme="dark"] .alert-info    { background: rgba(90,171,255,.1)  !important; border-color: rgba(90,171,255,.3)  !important; color: var(--ws-blue) !important; }

/* ── Tables ──────────────────────────────────────────────────── */
[data-theme="dark"] table th { color: var(--ws-gray) !important; background: #181818 !important; }
[data-theme="dark"] table td { color: var(--ws-black) !important; background: inherit; }
[data-theme="dark"] table tr:nth-child(even) td { background: #111111 !important; }
[data-theme="dark"] table tr:nth-child(odd) td { background: #181818 !important; }
[data-theme="dark"] table th,
[data-theme="dark"] table td { border-color: var(--ws-border) !important; }
/* Override inline style="background:white" dans les tables TCO générées par JS */
[data-theme="dark"] #tcoLineBreakdown table tr td[style*="background:white"],
[data-theme="dark"] #tcoLineBreakdown table tr td[style*="background: white"] {
  background: #181818 !important;
}
[data-theme="dark"] #tcoLineBreakdown table tr td[style*="background:var(--ws-bg)"],
[data-theme="dark"] #tcoLineBreakdown table tr[style*="background:var(--ws-bg)"],
[data-theme="dark"] #tcoLineBreakdown table tr[style*="background: var(--ws-bg)"] {
  background: #111111 !important;
}
[data-theme="dark"] #tcoLineBreakdown table tr[style*="background:var(--ws-blue)"] td {
  color: white !important;
}

/* ── Finops / Resilience / Sources ──────────────────────────── */
[data-theme="dark"] .tco-card-public,
[data-theme="dark"] .tco-card-souverain,
[data-theme="dark"] .tco-card-secnum { background: #181818 !important; border-color: #2A2A2A !important; }
[data-theme="dark"] .resilience-card { background: #181818 !important; border-color: #2A2A2A !important; }
[data-theme="dark"] .source-card { background: #181818 !important; border-color: #2A2A2A !important; }

/* ── History / Account ───────────────────────────────────────── */
[data-theme="dark"] .history-item { background: #181818 !important; border-color: #2A2A2A !important; color: var(--ws-black) !important; }
[data-theme="dark"] .history-item:hover { background: #1E1E1E !important; }
[data-theme="dark"] .history-verdict-badge.verdict-pub { background: rgba(52,211,153,.12) !important; color: var(--ws-success) !important; }
[data-theme="dark"] .history-verdict-badge.verdict-sov { background: rgba(251,191,36,.12) !important; color: var(--ws-warning) !important; }
[data-theme="dark"] .history-verdict-badge.verdict-snc { background: rgba(248,113,113,.12) !important; color: var(--ws-danger) !important; }

/* ── Modals ──────────────────────────────────────────────────── */
[data-theme="dark"] .export-modal-box { background: #181818 !important; border-color: #2A2A2A !important; }
[data-theme="dark"] .export-modal-close { background: #181818 !important; border-color: #2A2A2A !important; color: var(--ws-gray) !important; }
[data-theme="dark"] .export-btn { background: #111 !important; border-color: #2A2A2A !important; }
[data-theme="dark"] .export-btn:hover { background: rgba(90,171,255,.1) !important; border-color: var(--ws-blue) !important; }

/* ═══════════════════════════════════════════════════════════════
   TCO / FinOps — Section Fournisseurs (CSP Selector)
   ═══════════════════════════════════════════════════════════════ */

/* Grille 3 colonnes tier CSP */
.csp-selector-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 768px) {
  .csp-selector-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* Colonne tier */
.csp-tier-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Bouton fournisseur — état normal */
.csp-provider-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--ws-white);
  border: 1.5px solid var(--ws-border);
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: all .18s ease;
  font-family: 'Open Sans', sans-serif;
  position: relative;
  min-height: 64px;
}
.csp-provider-btn:hover {
  border-color: var(--ws-blue-mid);
  background: var(--ws-blue-light);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0,45,114,.1);
}

/* Bouton sélectionné */
.csp-provider-btn.csp-selected {
  border-color: var(--ws-blue);
  background: var(--ws-blue-light);
  box-shadow: 0 0 0 2px rgba(0,45,114,.15);
}
.csp-provider-btn.csp-selected .csp-btn-name {
  color: var(--ws-blue);
}

/* Logo container */
.csp-btn-logo {
  width: 52px;
  height: 40px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid var(--ws-border);
}
.csp-btn-logo svg {
  max-width: 100%;
  max-height: 100%;
}

/* Corps texte du bouton */
.csp-btn-body {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.csp-btn-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--ws-black);
  font-family: 'Montserrat', sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.csp-btn-risk {
  font-size: 10px;
  font-weight: 600;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.csp-btn-certs {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 4px;
}
.csp-cert-tag {
  display: inline-block;
  padding: 1px 5px;
  background: var(--ws-bg);
  border: 1px solid var(--ws-border);
  border-radius: 3px;
  font-size: 9px;
  font-weight: 600;
  color: var(--ws-gray);
  white-space: nowrap;
}

/* Icône check sélection */
.csp-check-icon {
  font-size: 18px;
  flex-shrink: 0;
  transition: color .18s ease, transform .18s ease;
}
.csp-provider-btn.csp-selected .csp-check-icon {
  transform: scale(1.1);
}

/* Cartes résultat TCO */
.tco-result-card {
  background: var(--ws-white);
  border: 1px solid var(--ws-border);
  border-radius: 8px;
  padding: 16px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .18s ease;
}
.tco-result-card:hover {
  box-shadow: var(--shadow-md);
}

/* TCO badges & mono values */
.badge-info {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; background: var(--ws-blue-light);
  border: 1px solid rgba(0,45,114,.2); border-radius: 6px;
  font-size: 11px; color: var(--ws-blue);
}
.badge-warn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; background: var(--ws-warning-bg);
  border: 1px solid rgba(245,158,11,.3); border-radius: 6px;
  font-size: 11px; color: var(--ws-warning);
}
.mono-val {
  font-size: 13px; font-family: 'JetBrains Mono', monospace;
  font-weight: 600; color: var(--ws-blue);
  width: 58px; text-align: right;
}

/* Dark mode CSP */
[data-theme="dark"] .csp-provider-btn {
  background: #1A1A1A;
  border-color: #2A2A2A;
  color: var(--ws-black);
}
[data-theme="dark"] .csp-provider-btn:hover,
[data-theme="dark"] .csp-provider-btn.csp-selected {
  background: rgba(90,171,255,.08);
  border-color: var(--ws-blue);
}
[data-theme="dark"] .csp-provider-btn.csp-selected .csp-btn-name {
  color: var(--ws-blue);
}
[data-theme="dark"] .csp-btn-logo {
  background: #111111 !important;
  border-color: #2A2A2A;
}
[data-theme="dark"] .csp-cert-tag {
  background: #111111;
  border-color: #2A2A2A;
  color: var(--ws-gray);
}
[data-theme="dark"] .tco-result-card {
  background: #181818 !important;
  border-color: #2A2A2A !important;
}

/* ═══════════════════════════════════════════════════════════════
   FINOPS — Sliders & Quick profile buttons
   ═══════════════════════════════════════════════════════════════ */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: var(--ws-border);
  cursor: pointer;
  flex: 1;
  min-width: 0;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ws-blue);
  border: 2px solid white;
  box-shadow: 0 1px 4px rgba(0,45,114,.3);
  cursor: pointer;
  transition: transform .15s ease;
}
input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}
input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ws-blue);
  border: 2px solid white;
  box-shadow: 0 1px 4px rgba(0,45,114,.3);
  cursor: pointer;
}
[data-theme="dark"] input[type="range"] {
  background: #2A2A2A;
}
[data-theme="dark"] input[type="range"]::-webkit-slider-thumb {
  border-color: #181818;
}

/* Quick Profile buttons hover */
.profile-quick-btn:hover {
  background: var(--ws-blue-light) !important;
  border-color: var(--ws-blue) !important;
  color: var(--ws-blue) !important;
}
[data-theme="dark"] .export-label { color: var(--ws-black) !important; }
[data-theme="dark"] .export-hint  { color: var(--ws-gray) !important; }
[data-theme="dark"] .modal-title  { color: var(--ws-black) !important; }

/* ── Toast ───────────────────────────────────────────────────── */
[data-theme="dark"] .toast-inner { background: #181818 !important; border-color: #2A2A2A !important; color: var(--ws-black) !important; }

/* ── Footer ──────────────────────────────────────────────────── */
[data-theme="dark"] #pageFooter { background: #101010 !important; border-top-color: #2A2A2A !important; }
[data-theme="dark"] .footer-left, [data-theme="dark"] .footer-right { color: var(--ws-gray) !important; }

/* ── Profile note ────────────────────────────────────────────── */
[data-theme="dark"] .profile-note { background: rgba(90,171,255,.08) !important; border-color: rgba(90,171,255,.18) !important; color: var(--ws-blue) !important; }

/* ── Empty state ─────────────────────────────────────────────── */
[data-theme="dark"] .empty-state-icon { background: #181818 !important; border-color: #2A2A2A !important; color: var(--ws-gray) !important; }
[data-theme="dark"] .empty-state h3 { color: var(--ws-gray) !important; }
[data-theme="dark"] .empty-state p  { color: var(--ws-gray-light) !important; }

/* ── Buttons ─────────────────────────────────────────────────── */
[data-theme="dark"] .btn-ghost { background: transparent !important; color: var(--ws-gray) !important; border-color: #2A2A2A !important; }
[data-theme="dark"] .btn-ghost:hover { color: var(--ws-black) !important; border-color: var(--ws-gray) !important; background: rgba(255,255,255,.04) !important; }
[data-theme="dark"] .btn-outline { border-color: var(--ws-blue) !important; color: var(--ws-blue) !important; }
[data-theme="dark"] .btn-outline:hover { background: var(--ws-blue) !important; color: #0E0E0E !important; }
[data-theme="dark"] .btn-theme-toggle { border-color: #2A2A2A !important; color: var(--ws-gray) !important; }
[data-theme="dark"] .btn-theme-toggle:hover { background: rgba(90,171,255,.1) !important; color: var(--ws-blue) !important; }
[data-theme="dark"] .lang-btn { color: var(--ws-gray) !important; }
[data-theme="dark"] .lang-btn.active { background: var(--ws-blue) !important; color: #0E0E0E !important; }
[data-theme="dark"] .lang-switcher { border-color: #2A2A2A !important; }

/* ── Progress bars ───────────────────────────────────────────── */
[data-theme="dark"] .pillar-progress-bar { background: #1E1E1E !important; }
[data-theme="dark"] .assessment-nav-btns { border-top-color: #2A2A2A !important; }

/* ── Inputs (dark) ───────────────────────────────────────────── */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: #111111 !important;
  color: #EBEBEB !important;
  border-color: #2A2A2A !important;
}
[data-theme="dark"] input::placeholder { color: #5A5A5A !important; }
[data-theme="dark"] input[type="range"] { accent-color: var(--ws-blue) !important; }

/* ── Light mode : s'assurer que les textes sont bien foncés ─── */
[data-theme="light"] body { background: #F4F4F4 !important; color: #1A1A1A !important; }
[data-theme="light"] .card { background: #FFFFFF !important; }
[data-theme="light"] .card-title { color: #1A1A1A !important; }
[data-theme="light"] .card-subtitle { color: #5A5A5A !important; }
[data-theme="light"] .form-label { color: #5A5A5A !important; }
[data-theme="light"] .form-input, [data-theme="light"] .form-select { background: #F4F4F4 !important; color: #1A1A1A !important; }
[data-theme="light"] .sidebar-item { color: #5A5A5A !important; }
[data-theme="light"] .sidebar-item.active { color: white !important; }
[data-theme="light"] .topbar-section-indicator { color: #002D72 !important; }

/* ── Section content.hidden override (legacy support) ───────── */
.section-content.hidden { display: none !important; }
#globalProgressBar { background: #4A9EF8; }

/* ── Misc table styles ──────────────────────────────────────── */
table { border-collapse: collapse; }
th, td { padding: 8px 12px; }

/* ── Misc profile badge (assessment header) ─────────────────── */
.profile-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--ws-blue-light);
  border: 1px solid rgba(0,45,114,.15);
  border-radius: var(--r-md);
  margin-bottom: 20px;
  font-size: 12px;
  color: var(--ws-blue);
  flex-wrap: wrap;
}
.profile-badge-critical { background: var(--ws-danger-bg); border-color: rgba(192,0,26,.2); color: var(--ws-danger); }
.profile-badge-normal   { background: var(--ws-blue-light); border-color: rgba(0,45,114,.15); color: var(--ws-blue); }
.profile-badge-alert { font-weight: 700; font-size: 11px; }
.profile-badge-edit {
  margin-left: auto;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: var(--r-sm);
  color: inherit;
  padding: 3px 8px;
  cursor: pointer;
  font-size: 11px;
  opacity: .7;
  transition: opacity var(--ease);
}
.profile-badge-edit:hover { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════
   PROFILE PAGE — Design complet
   ═══════════════════════════════════════════════════════════════ */

/* Wrapper global */
.profile-wrapper {
  max-width: 900px;
  margin: 0 auto;
}

/* ── Header héro du profil ──────────────────────────────────── */
.profile-hero {
  background: linear-gradient(135deg, var(--ws-blue) 0%, var(--ws-blue-mid) 100%);
  border-radius: var(--r-lg);
  padding: 28px 32px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
  overflow: hidden;
}
.profile-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}
.profile-hero-icon {
  width: 56px; height: 56px;
  background: rgba(255,255,255,.15);
  border: 2px solid rgba(255,255,255,.25);
  border-radius: var(--r-lg);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 22px;
  color: white;
  position: relative;
}
.profile-hero-text { position: relative; }
.profile-hero-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: white;
  line-height: 1.2;
  margin-bottom: 4px;
}
.profile-hero-sub {
  font-size: 13px;
  color: rgba(255,255,255,.72);
  line-height: 1.5;
}

/* ── Note confidentialité ───────────────────────────────────── */
.profile-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--ws-blue-light);
  border: 1px solid rgba(0,45,114,.12);
  border-radius: var(--r-md);
  font-size: 12px;
  color: var(--ws-blue);
  margin-bottom: 20px;
}

/* ── Insights réglementaires ────────────────────────────────── */
.profile-insights {
  background: var(--ws-white);
  border: 1px solid var(--ws-border);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
}
.insights-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--ws-black);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.insights-title i { color: #F59E0B; }
.insight-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--r-md);
  font-size: 12px;
  line-height: 1.5;
  margin-bottom: 6px;
}
.insight-item:last-child { margin-bottom: 0; }
.insight-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.insight-critical { background: var(--ws-danger-bg); color: var(--ws-danger); border: 1px solid rgba(192,0,26,.15); }
.insight-high     { background: var(--ws-warning-bg); color: var(--ws-warning); border: 1px solid rgba(155,84,0,.15); }
.insight-medium   { background: var(--ws-blue-light); color: var(--ws-blue); border: 1px solid rgba(0,45,114,.12); }

/* ── Grille du formulaire ───────────────────────────────────── */
.profile-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px) {
  .profile-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Section titres dans le formulaire ─────────────────────── */
.profile-section-full { grid-column: 1 / -1; }

.profile-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(135deg, var(--ws-blue) 0%, var(--ws-blue-mid) 100%);
  border-radius: var(--r-md);
  margin-bottom: 4px;
}
.profile-section-header-icon {
  width: 28px; height: 28px;
  background: rgba(255,255,255,.15);
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  color: white;
  flex-shrink: 0;
}
.profile-section-header-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: white;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.profile-section-header-num {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,.55);
  font-family: 'JetBrains Mono', monospace;
}

/* Ancien style (compatibilité JS) */
.profile-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: white;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: linear-gradient(135deg, var(--ws-blue) 0%, var(--ws-blue-mid) 100%);
  padding: 8px 14px;
  border-radius: var(--r-md);
}

/* ── Groupes de champs ──────────────────────────────────────── */
.form-group {
  display: flex;
  flex-direction: column;
}
.form-group-card {
  background: var(--ws-white);
  border: 1.5px solid var(--ws-border);
  border-radius: var(--r-lg);
  padding: 16px;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.form-group-card:focus-within {
  border-color: var(--ws-blue);
  box-shadow: 0 0 0 3px rgba(0,45,114,.07);
}
.required-star { color: var(--ws-danger); font-size: 11px; }

/* ── Inputs et selects redesignés ───────────────────────────── */
.form-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ws-gray);
  margin-bottom: 6px;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--ws-border);
  border-radius: var(--r-md);
  background: var(--ws-bg);
  color: var(--ws-black);
  font-size: 13px;
  font-family: 'Open Sans', sans-serif;
  transition: border-color var(--ease), background var(--ease), box-shadow var(--ease);
  appearance: none;
  -webkit-appearance: none;
}
.form-input:hover, .form-select:hover { border-color: #C0C0C0; }
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--ws-blue);
  background: var(--ws-white);
  box-shadow: 0 0 0 3px rgba(0,45,114,.09);
}
.form-input::placeholder { color: var(--ws-gray-light); font-size: 12px; }
.form-textarea { resize: vertical; min-height: 80px; }
.form-hint  { font-size: 11px; color: var(--ws-gray-light); margin-top: 5px; display: flex; align-items: center; gap: 4px; }
.form-error { font-size: 11px; color: var(--ws-danger); margin-top: 4px; }

/* Select arrow */
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235A5A5A' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

/* ── Radio groups (Oui / Non / NSP) ────────────────────────── */
.radio-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.radio-option {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1.5px solid var(--ws-border);
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--ws-gray);
  background: var(--ws-bg);
  transition: all var(--ease);
  flex: 1;
  min-width: 70px;
  justify-content: center;
  user-select: none;
}
.radio-option input[type="radio"] { display: none; }
.radio-option:hover {
  border-color: var(--ws-blue);
  color: var(--ws-blue);
  background: var(--ws-blue-light);
}
.radio-option.selected {
  border-color: var(--ws-blue);
  background: var(--ws-blue);
  color: white;
  font-weight: 700;
}
/* Oui = vert, Non = rouge quand sélectionnés */
.radio-option.selected:has(input[value="yes"]) { background: var(--ws-success); border-color: var(--ws-success); }
.radio-option.selected:has(input[value="no"])  { background: var(--ws-danger);  border-color: var(--ws-danger); }

/* ── Actions (save + completion) ────────────────────────────── */
.profile-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--ws-border);
  flex-wrap: wrap;
}
.profile-completion-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 200px;
}
.profile-completion-bar {
  flex: 1;
  height: 6px;
  background: var(--ws-border);
  border-radius: 3px;
  overflow: hidden;
}
.profile-completion-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--ws-blue) 0%, var(--ws-blue-hover) 100%);
  border-radius: 3px;
  transition: width .5s ease;
}
.profile-completion-text {
  font-size: 12px;
  font-weight: 700;
  color: var(--ws-blue);
  white-space: nowrap;
  font-family: 'Montserrat', sans-serif;
}

/* ── Dark mode profil ───────────────────────────────────────── */
[data-theme="dark"] .profile-hero {
  background: linear-gradient(135deg, #0D1A33 0%, #002D72 100%);
}
[data-theme="dark"] .profile-note {
  background: rgba(74,158,248,.1);
  border-color: rgba(74,158,248,.2);
  color: var(--ws-blue);
}
[data-theme="dark"] .profile-insights {
  background: #1A1A1A;
  border-color: var(--ws-border);
}
[data-theme="dark"] .insights-title { color: var(--ws-black); }
[data-theme="dark"] .insight-critical {
  background: rgba(239,68,68,.12);
  border-color: rgba(239,68,68,.2);
  color: #F87171;
}
[data-theme="dark"] .insight-high {
  background: rgba(245,158,11,.1);
  border-color: rgba(245,158,11,.2);
  color: #FCD34D;
}
[data-theme="dark"] .insight-medium {
  background: rgba(74,158,248,.1);
  border-color: rgba(74,158,248,.2);
  color: #93C5FD;
}
[data-theme="dark"] .form-group-card {
  background: #1A1A1A;
  border-color: var(--ws-border);
}
[data-theme="dark"] .form-group-card:focus-within {
  border-color: var(--ws-blue);
  box-shadow: 0 0 0 3px rgba(74,158,248,.1);
}
[data-theme="dark"] .form-label { color: var(--ws-gray); }
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-textarea {
  background: #111111 !important;
  color: var(--ws-black) !important;
  border-color: var(--ws-border) !important;
}
[data-theme="dark"] .form-input:hover, [data-theme="dark"] .form-select:hover {
  border-color: #4A4A4A !important;
}
[data-theme="dark"] .form-input:focus, [data-theme="dark"] .form-select:focus {
  border-color: var(--ws-blue) !important;
  background: #1A1A1A !important;
  box-shadow: 0 0 0 3px rgba(74,158,248,.12) !important;
}
[data-theme="dark"] .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23A0A0A0' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
}
[data-theme="dark"] .radio-option {
  background: #111111;
  border-color: var(--ws-border);
  color: var(--ws-gray);
}
[data-theme="dark"] .radio-option:hover {
  border-color: var(--ws-blue);
  color: var(--ws-blue);
  background: rgba(74,158,248,.1);
}
[data-theme="dark"] .radio-option.selected {
  background: var(--ws-blue);
  border-color: var(--ws-blue);
  color: white;
}
[data-theme="dark"] .profile-completion-bar { background: #2E2E2E; }
[data-theme="dark"] .profile-actions { border-top-color: var(--ws-border); }
[data-theme="dark"] .profile-section-badge { background: #0D1A33; }
[data-theme="dark"] .source-card { background: #1A1A1A; border-color: var(--ws-border); }

/* ── Source cards ───────────────────────────────────────────── */
.source-card {
  background: var(--ws-white);
  border: 1px solid var(--ws-border);
  border-radius: var(--r-md);
  padding: 16px;
  transition: box-shadow var(--ease), border-color var(--ease);
}
.source-card:hover { box-shadow: var(--shadow-md); border-color: var(--ws-blue-mid); }

/* ═══════════════════════════════════════════════════════════════
   EXTRA UTILITAIRES (résultats, dark sections)
   ═══════════════════════════════════════════════════════════════ */

/* pt-3 with border */
.border-t { border-top: 1px solid var(--ws-border); }
.pt-3 { padding-top: 12px; }

/* Sections résultats — grille 3 colonnes responsive */
.results-top-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
@media (min-width: 900px) {
  .results-top-grid { grid-template-columns: 1fr 1fr 1fr; }
}
.results-2col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
@media (min-width: 768px) {
  .results-2col { grid-template-columns: 1fr 1fr; }
}
.results-3col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 768px) {
  .results-3col { grid-template-columns: repeat(3, 1fr); }
}

/* Gauge + Radar wrapper */
.gauge-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 0;
}
.gauge-wrap canvas { display: block; }

.radar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.radar-wrap canvas { max-width: 100%; }

/* Absolute center overlay sur la jauge */
.gauge-overlay {
  position: absolute;
  bottom: 6px;
  left: 0; right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Fix pour les classes Tailwind avec / dans le nom */
.bg-red-900\/30 { background: rgba(153,27,27,.18); }
.bg-green-900\/40 { background: rgba(20,83,45,.15); }
.bg-amber-900\/40 { background: rgba(120,53,15,.15); }
.text-red-300   { color: #F87171; }
.text-red-400   { color: var(--ws-danger); }
.text-green-500 { color: var(--ws-success); }
.text-amber-400 { color: var(--ws-warning); }
.text-blue-400  { color: var(--ws-blue-hover); }
.text-\[6px\]   { font-size: 6px; }

/* Dark mode — border-gray-800 inside results */
[data-theme="dark"] .border-gray-800 { border-color: #2E2E2E !important; }
[data-theme="dark"] .border-t { border-top-color: var(--ws-border); }
[data-theme="dark"] .text-gray-400 { color: #909090 !important; }
[data-theme="dark"] .text-gray-500 { color: #808080 !important; }
[data-theme="dark"] .bg-gray-950   { background: #0A0A0A !important; }
[data-theme="dark"] .bg-gray-900   { background: #111111 !important; }
[data-theme="dark"] .bg-gray-800   { background: #1E1E1E !important; }

/* Scrollbar sur sidebar nav */
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 2px; }
[data-theme="dark"] .sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); }

/* Finops responsive */
@media (max-width: 768px) {
  .tco-card-public, .tco-card-souverain, .tco-card-secnum { margin-bottom: 12px; }
}

/* Print */
@media print {
  #sidebar, #topbar, #heroBanner, .assessment-nav-btns { display: none !important; }
  #pageWrapper { margin-left: 0 !important; margin-top: 0 !important; }
}

/* ═══════════════════════════════════════════════════════════════
   CORRECTIONS FINALES — Priorité sur Tailwind
   ═══════════════════════════════════════════════════════════════ */

/* Sidebar : toujours fixe sur desktop, ne jamais toucher */
#sidebar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  height: 100vh !important;
  z-index: 100 !important;
}
@media (min-width: 1024px) {
  #sidebar { transform: translateX(0) !important; }
}

/* Topbar : toujours en haut */
#topbar {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  z-index: 80 !important;
  height: var(--topbar-h) !important;
}
@media (min-width: 1024px) {
  #topbar { left: var(--sidebar-w) !important; }
}
@media (max-width: 1023px) {
  #topbar { left: 0 !important; }
}

/* PageWrapper : décaler sur desktop uniquement */
#pageWrapper {
  margin-top: var(--topbar-h) !important;
}
@media (min-width: 1024px) {
  #pageWrapper { margin-left: var(--sidebar-w) !important; }
}
@media (max-width: 1023px) {
  #pageWrapper { margin-left: 0 !important; }
}

/* Section hidden : override toute classe Tailwind */
.section-content.hidden { display: none !important; }
.section-content { display: block; }

/* Grilles résultats : responsive garantie */
.grid.grid-cols-1 { display: grid !important; grid-template-columns: 1fr; }

/* Card : fond blanc garanti */
.card {
  background: var(--ws-white) !important;
  border: 1px solid var(--ws-border) !important;
}
[data-theme="dark"] .card { background: #1A1A1A !important; border-color: var(--ws-border) !important; }

/* Radar container : pleine largeur et hauteur généreuse */
.radar-container {
  width: 100% !important;
  max-width: 100% !important;
  height: 420px !important;
  position: relative !important;
}

/* Canvas responsif */
canvas { max-width: 100%; }

/* Fix Tailwind qui peut écraser border-t */
.border-t { border-top: 1px solid var(--ws-border) !important; }
[data-theme="dark"] .border-t { border-top-color: var(--ws-border) !important; }
[data-theme="dark"] .border-gray-700\/40 { border-color: rgba(63,63,63,.4) !important; }
[data-theme="dark"] .border-gray-800 { border-color: #2E2E2E !important; }

/* Overflow x sur main content */
#mainContent { overflow-x: hidden; }

/* Fix body bg en dark */
[data-theme="dark"] body { background: #111111 !important; }

/* Topbar-section-indicator visible sur desktop */
@media (min-width: 1024px) {
  .topbar-section-indicator { display: block !important; }
}

/* Hamburger visible sur mobile seulement */
@media (min-width: 1024px) {
  .sidebar-toggle-btn { display: none !important; }
  .topbar-brand { display: none !important; }
}
@media (max-width: 1023px) {
  .topbar-section-indicator { display: none !important; }
}

/* Modal display fix */
#exportModal[style*="display: flex"],
#exportModal[style*="display:flex"] {
  display: flex !important;
}

/* Spacer utilitaire */
.mt-0\.5  { margin-top: 2px !important; }
.mt-1\.5  { margin-top: 6px !important; }
.mb-1\.5  { margin-bottom: 6px !important; }
.gap-1\.5 { gap: 6px !important; }
.space-y-1\.5 > * + * { margin-top: 6px !important; }
.py-0\.5  { padding-top: 2px !important; padding-bottom: 2px !important; }
.px-1\.5  { padding-left: 6px !important; padding-right: 6px !important; }

/* Fonts garantis */
.font-mono { font-family: 'JetBrains Mono', ui-monospace, monospace !important; }
h1, h2, h3, h4, h5, .card-title, .modal-title {
  font-family: 'Montserrat', sans-serif !important;
}

/* Résultats — gauge et radar bien visibles */
#gaugeChart { display: block; }
#radarChart  { display: block; width: 100% !important; height: 100% !important; max-height: none !important; max-width: none !important; }

/* Finops / Resilience sections */
#finopsContent, #resilienceContent, #sourcesContent,
#accountContent, #profileContent, #resultsContent {
  min-height: 100px;
}

/* ── Toggle switch (Resilience module) ─────────────────────── */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  cursor: pointer;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--ws-border);
  border-radius: 20px;
  transition: background .2s;
  cursor: pointer;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  left: 3px;
  top: 3px;
  background: white;
  border-radius: 50%;
  transition: transform .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.toggle-switch input:checked + .toggle-slider {
  background: var(--ws-blue);
}
.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(16px);
}
[data-theme="dark"] .toggle-slider {
  background: #333;
}
[data-theme="dark"] .toggle-switch input:checked + .toggle-slider {
  background: var(--ws-blue);
}

/* ── Resilience select native override ─────────────────────── */
#resCloudProfile {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235A5A5A' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px !important;
}
[data-theme="dark"] #resCloudProfile {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23aaa' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
}

/* Evite que Tailwind masque .active sur sidebar-item */
.sidebar-item.active { background: var(--ws-blue) !important; color: white !important; }
[data-theme="dark"] .sidebar-item.active { background: var(--ws-blue) !important; color: white !important; }

/* Fix pour les classes lg: de Tailwind avec responsive */
@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4,minmax(0,1fr)) !important; }
}
@media (min-width: 768px) {
  .md\:grid-cols-3 { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}
@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
}

/* ═══════════════════════════════════════════════════════════════
   MON COMPTE — Design complet
   ═══════════════════════════════════════════════════════════════ */

/* Page wrapper */
.acc-page {
  max-width: 860px;
  margin: 0 auto;
  padding: 4px 0 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── AUTH : Hero banner ──────────────────────────────────────── */
.acc-auth-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 28px;
  background: linear-gradient(135deg, var(--ws-blue) 0%, #1a4d9e 100%);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,45,114,.25);
}
.acc-auth-hero-icon {
  width: 52px;
  height: 52px;
  background: rgba(255,255,255,.15);
  border: 2px solid rgba(255,255,255,.25);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: white;
  flex-shrink: 0;
}
.acc-auth-hero-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: white;
  line-height: 1.2;
}
.acc-auth-hero-sub {
  font-size: 12px;
  color: rgba(255,255,255,.7);
  margin-top: 3px;
}

/* ── AUTH : Two-column layout ───────────────────────────────── */
.acc-auth-layout {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 700px) {
  .acc-auth-layout { grid-template-columns: 1fr; }
}

/* ── AUTH : Feature list (left) ─────────────────────────────── */
.acc-auth-features {
  background: var(--ws-white);
  border: 1px solid var(--ws-border);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.acc-feat-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: var(--ws-black);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 2px;
}
.acc-feat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ws-black);
}
.acc-feat-icon {
  width: 34px;
  height: 34px;
  background: var(--ws-blue-light);
  border: 1px solid rgba(0,45,114,.12);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--ws-blue);
  flex-shrink: 0;
}
.acc-feat-privacy {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: var(--ws-bg);
  border: 1px solid var(--ws-border);
  border-radius: 8px;
  font-size: 11px;
  color: var(--ws-gray);
  line-height: 1.5;
  margin-top: 6px;
}
.acc-feat-privacy i {
  color: var(--ws-success);
  margin-top: 1px;
  flex-shrink: 0;
}

/* ── AUTH : Form card (right) ───────────────────────────────── */
.acc-auth-card {
  background: var(--ws-white);
  border: 1px solid var(--ws-border);
  border-radius: 12px;
  padding: 28px;
  box-shadow: var(--shadow-md);
}

/* Tabs */
.auth-tabs {
  display: flex;
  border: 1.5px solid var(--ws-border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 24px;
}
.auth-tab {
  flex: 1;
  padding: 10px 8px;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  border: none;
  background: var(--ws-white);
  color: var(--ws-gray);
  transition: all .18s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.auth-tab:hover { background: var(--ws-bg); color: var(--ws-black); }
.auth-tab.active {
  background: var(--ws-blue);
  color: white;
}

/* Form */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.auth-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ws-gray);
  display: flex;
  align-items: center;
  gap: 6px;
}
.auth-label i { color: var(--ws-blue); font-size: 11px; }
.auth-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.auth-input {
  width: 100%;
  padding: 10px 40px 10px 14px;
  border: 1.5px solid var(--ws-border);
  border-radius: 8px;
  font-size: 13px;
  font-family: 'Open Sans', sans-serif;
  color: var(--ws-black);
  background: var(--ws-bg);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.auth-input:not(.auth-input-wrap .auth-input) {
  padding-right: 14px;
}
.auth-input:focus {
  outline: none;
  border-color: var(--ws-blue);
  box-shadow: 0 0 0 3px rgba(0,45,114,.1);
  background: var(--ws-white);
}
.auth-eye-btn {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ws-gray-light);
  font-size: 13px;
  padding: 4px;
  transition: color .15s;
}
.auth-eye-btn:hover { color: var(--ws-blue); }
.auth-row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: -4px;
}
.auth-remember {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--ws-gray);
  cursor: pointer;
}
.auth-link {
  font-size: 11px;
  color: var(--ws-blue);
  font-weight: 600;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 0;
}
.auth-link:hover { color: var(--ws-blue-hover); }
.auth-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  background: var(--ws-blue);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  transition: background .18s ease, transform .12s ease, box-shadow .18s ease;
  margin-top: 4px;
  width: 100%;
  box-shadow: 0 2px 8px rgba(0,45,114,.2);
}
.auth-submit-btn:hover {
  background: var(--ws-blue-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,45,114,.3);
}
.auth-submit-btn:active { transform: translateY(0); }
.auth-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
  padding: 11px 14px;
  background: transparent;
  color: var(--ws-gray);
  border: 1.5px solid var(--ws-border);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .18s ease;
}
.auth-back-btn:hover { background: var(--ws-bg); color: var(--ws-black); border-color: var(--ws-gray); }

/* Forgot form header */
.auth-forgot-header { text-align: center; margin-bottom: 20px; }
.auth-forgot-icon {
  width: 56px;
  height: 56px;
  background: var(--ws-blue-light);
  border: 2px solid rgba(0,45,114,.15);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--ws-blue);
  margin: 0 auto 12px;
}
.auth-forgot-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: var(--ws-black);
  margin-bottom: 6px;
}
.auth-forgot-desc {
  font-size: 12px;
  color: var(--ws-gray);
  line-height: 1.6;
}

/* ── DASHBOARD : Hero banner ─────────────────────────────────── */
.acc-dash-hero {
  padding: 24px 28px;
  background: linear-gradient(135deg, var(--ws-blue) 0%, #1a4d9e 100%);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,45,114,.25);
}
.acc-dash-hero-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.acc-avatar-lg {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  background: rgba(255,255,255,.2);
  border: 2px solid rgba(255,255,255,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 900;
  color: white;
  flex-shrink: 0;
}
.acc-dash-user-info { flex: 1; min-width: 0; }
.acc-dash-user-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: white;
  line-height: 1.2;
}
.acc-dash-user-email {
  font-size: 12px;
  color: rgba(255,255,255,.75);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.acc-dash-user-since {
  font-size: 11px;
  color: rgba(255,255,255,.55);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.acc-dash-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.acc-btn-save {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  background: white;
  color: var(--ws-blue);
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  transition: all .18s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.acc-btn-save:hover {
  background: #F0F6FF;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.acc-btn-logout {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.9);
  border: 1.5px solid rgba(255,255,255,.25);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Open Sans', sans-serif;
  cursor: pointer;
  transition: all .18s ease;
}
.acc-btn-logout:hover {
  background: rgba(255,255,255,.2);
  color: white;
}

/* ── DASHBOARD : KPI grid ────────────────────────────────────── */
.acc-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 640px) {
  .acc-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
.acc-kpi-card {
  background: var(--ws-white);
  border: 1px solid var(--ws-border);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: box-shadow .18s ease;
}
.acc-kpi-card:hover { box-shadow: var(--shadow-md); }
.acc-kpi-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.acc-kpi-body { min-width: 0; }
.acc-kpi-val {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 900;
  color: var(--ws-black);
  line-height: 1.1;
}
.acc-kpi-lbl {
  font-size: 11px;
  color: var(--ws-gray);
  font-weight: 600;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── DASHBOARD : Last verdict ────────────────────────────────── */
.acc-last-verdict {
  border-radius: 10px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.acc-last-verdict-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 4px;
  opacity: .85;
}
.acc-last-verdict-value {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.1;
}
.acc-last-verdict-date {
  font-size: 11px;
  color: var(--ws-gray);
  margin-top: 4px;
}
.acc-last-verdict-score {
  font-family: 'Montserrat', sans-serif;
  font-size: 42px;
  font-weight: 900;
  line-height: 1;
  flex-shrink: 0;
}

/* ── DASHBOARD : History section ─────────────────────────────── */
.acc-history-section {
  background: var(--ws-white);
  border: 1px solid var(--ws-border);
  border-radius: 12px;
  overflow: hidden;
}
.acc-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--ws-border);
  background: var(--ws-bg);
  gap: 12px;
}
.acc-history-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: var(--ws-black);
}
.acc-history-sub {
  font-size: 11px;
  color: var(--ws-gray);
  margin-top: 2px;
}
.acc-btn-danger-ghost {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: transparent;
  color: var(--ws-danger);
  border: 1.5px solid var(--ws-danger);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all .18s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.acc-btn-danger-ghost:hover { background: var(--ws-danger-bg); }

/* ── DASHBOARD : Empty state ─────────────────────────────────── */
.acc-empty-state {
  padding: 48px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.acc-empty-icon {
  width: 64px;
  height: 64px;
  background: var(--ws-bg);
  border: 2px solid var(--ws-border);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--ws-gray-light);
  margin-bottom: 4px;
}
.acc-empty-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--ws-black);
}
.acc-empty-desc {
  font-size: 12px;
  color: var(--ws-gray);
  line-height: 1.6;
  max-width: 360px;
}
.acc-btn-goto {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  padding: 10px 20px;
  background: var(--ws-blue);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  transition: all .18s ease;
}
.acc-btn-goto:hover { background: var(--ws-blue-hover); transform: translateY(-1px); }

/* ── DASHBOARD : History list ────────────────────────────────── */
.acc-history-list {
  display: flex;
  flex-direction: column;
}

/* History item */
.acc-hist-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--ws-border);
  cursor: pointer;
  transition: background .15s ease;
  position: relative;
}
.acc-hist-item:last-child { border-bottom: none; }
.acc-hist-item:hover { background: var(--ws-bg); }

/* Score ring */
.acc-hist-ring {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
.acc-hist-ring svg {
  position: absolute;
  top: 0; left: 0;
}
.acc-hist-ring-score {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

/* Body */
.acc-hist-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.acc-hist-top-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.acc-hist-date {
  font-size: 11px;
  color: var(--ws-gray);
  display: flex;
  align-items: center;
  gap: 3px;
}
.acc-hist-time {
  color: var(--ws-gray-light);
  margin-left: 4px;
}
.acc-hist-company {
  font-size: 11px;
  font-weight: 600;
  color: var(--ws-black);
  display: flex;
  align-items: center;
}

/* Badges */
.acc-hist-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.acc-hist-verdict {
  /* inherits from .history-verdict-badge */
}
.acc-hist-critical {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  background: var(--ws-danger-bg);
  color: var(--ws-danger);
  border: 1px solid rgba(192,0,26,.2);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
}
.acc-hist-completion {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  background: var(--ws-bg);
  color: var(--ws-gray);
  border: 1px solid var(--ws-border);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
}

/* Pillar mini bars (vertical) */
.acc-hist-pillars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 32px;
  margin-top: 2px;
}
.acc-hist-pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  width: 16px;
}
.acc-hist-pillar-fill {
  width: 10px;
  border-radius: 2px 2px 0 0;
  min-height: 2px;
  transition: height .3s ease;
}
.acc-hist-pillar-score {
  font-size: 8px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--ws-gray-light);
  line-height: 1;
}

/* Delete button */
.acc-hist-del-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1.5px solid var(--ws-border);
  border-radius: 6px;
  color: var(--ws-gray-light);
  cursor: pointer;
  font-size: 11px;
  flex-shrink: 0;
  transition: all .15s ease;
}
.acc-hist-del-btn:hover {
  background: var(--ws-danger-bg);
  border-color: var(--ws-danger);
  color: var(--ws-danger);
}

/* ── DASHBOARD : Security notice ─────────────────────────────── */
.acc-security-notice {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  background: var(--ws-bg);
  border: 1px solid var(--ws-border);
  border-radius: 10px;
}
.acc-security-icon {
  width: 36px;
  height: 36px;
  background: var(--ws-success-bg);
  border: 1px solid rgba(0,107,60,.15);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--ws-success);
  flex-shrink: 0;
}
.acc-security-text {
  font-size: 12px;
  line-height: 1.6;
  color: var(--ws-gray);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.acc-security-text strong {
  font-weight: 700;
  color: var(--ws-black);
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
}

/* ── DARK MODE — Mon Compte ──────────────────────────────────── */
[data-theme="dark"] .acc-auth-hero,
[data-theme="dark"] .acc-dash-hero {
  background: linear-gradient(135deg, #0A1A3D 0%, #122050 100%);
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
}
[data-theme="dark"] .acc-auth-card,
[data-theme="dark"] .acc-auth-features,
[data-theme="dark"] .acc-kpi-card,
[data-theme="dark"] .acc-history-section {
  background: #181818 !important;
  border-color: #2A2A2A !important;
}
[data-theme="dark"] .acc-history-header {
  background: #111111 !important;
  border-bottom-color: #2A2A2A !important;
}
[data-theme="dark"] .acc-kpi-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,.4); }
[data-theme="dark"] .acc-hist-item:hover { background: #111111 !important; }
[data-theme="dark"] .acc-hist-item { border-bottom-color: #2A2A2A !important; }
[data-theme="dark"] .acc-hist-del-btn { border-color: #2A2A2A !important; color: var(--ws-gray) !important; }
[data-theme="dark"] .auth-tab { background: #181818 !important; color: var(--ws-gray) !important; }
[data-theme="dark"] .auth-tab:hover { background: #111111 !important; color: var(--ws-black) !important; }
[data-theme="dark"] .auth-tab.active { background: var(--ws-blue) !important; color: white !important; }
[data-theme="dark"] .auth-tabs { border-color: #2A2A2A !important; }
[data-theme="dark"] .auth-input {
  background: #111111 !important;
  border-color: #2A2A2A !important;
  color: var(--ws-black) !important;
}
[data-theme="dark"] .auth-input:focus {
  background: #181818 !important;
  border-color: var(--ws-blue) !important;
  box-shadow: 0 0 0 3px rgba(90,171,255,.12) !important;
}
[data-theme="dark"] .acc-feat-icon { background: rgba(90,171,255,.12) !important; border-color: rgba(90,171,255,.2) !important; }
[data-theme="dark"] .acc-feat-privacy { background: #111111 !important; border-color: #2A2A2A !important; }
[data-theme="dark"] .acc-empty-icon { background: #111111 !important; border-color: #2A2A2A !important; }
[data-theme="dark"] .acc-security-notice { background: #111111 !important; border-color: #2A2A2A !important; }
[data-theme="dark"] .acc-last-verdict { border-left-color: inherit !important; }
[data-theme="dark"] .acc-hist-completion { background: #111111 !important; border-color: #2A2A2A !important; }

/* ─── Responsive Mon Compte ──────────────────────────────────── */
@media (max-width: 640px) {
  .acc-dash-hero-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .acc-dash-actions { width: 100%; }
  .acc-btn-save, .acc-btn-logout { flex: 1; justify-content: center; }
  .acc-hist-pillars { display: none; }
  .acc-hist-item { padding: 12px 14px; gap: 12px; }
  .acc-last-verdict-score { font-size: 32px; }
}

/* ═══════════════════════════════════════════════════════════════
   MÉTHODOLOGIE — Design premium
   ═══════════════════════════════════════════════════════════════ */

.meth-page {
  max-width: 960px;
  margin: 0 auto;
  padding: 4px 0 48px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Hero */
.meth-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 26px 30px;
  background: linear-gradient(135deg, #001A4A 0%, var(--ws-blue) 50%, #1a4d9e 100%);
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(0,45,114,.3);
  flex-wrap: wrap;
}
.meth-hero-icon {
  width: 56px;
  height: 56px;
  background: rgba(255,255,255,.15);
  border: 2px solid rgba(255,255,255,.25);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
  flex-shrink: 0;
}
.meth-hero-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 900;
  color: white;
  line-height: 1.2;
}
.meth-hero-sub {
  font-size: 12px;
  color: rgba(255,255,255,.72);
  margin-top: 4px;
  max-width: 480px;
  line-height: 1.55;
}
.meth-hero > div:first-of-type { flex: 1; min-width: 200px; }
.meth-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,.85);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Navigation pills */
.meth-nav-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.meth-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--ws-white);
  border: 1.5px solid var(--ws-border);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ws-gray);
  text-decoration: none;
  transition: all .18s ease;
}
.meth-pill:hover {
  background: var(--ws-blue-light);
  border-color: var(--ws-blue);
  color: var(--ws-blue);
  text-decoration: none;
  transform: translateY(-1px);
}

/* Section container */
.meth-section {
  background: var(--ws-white);
  border: 1px solid var(--ws-border);
  border-radius: 14px;
  overflow: hidden;
  scroll-margin-top: 70px;
}
.meth-section-warning { border-top: 3px solid var(--ws-warning); }

.meth-section-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--ws-border);
  background: var(--ws-bg);
}
.meth-section-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.meth-section-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: var(--ws-black);
}
.meth-section-sub {
  font-size: 11px;
  color: var(--ws-gray);
  margin-top: 2px;
}

/* Regulations grid */
.meth-reg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  padding: 20px 24px;
}
.meth-reg-card {
  background: var(--ws-bg);
  border: 1px solid var(--ws-border);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow .18s ease, transform .18s ease;
}
.meth-reg-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.meth-reg-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.meth-reg-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.meth-reg-tag {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  background: var(--ws-white);
  border: 1px solid var(--ws-border);
  border-radius: 10px;
  color: var(--ws-gray);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.meth-reg-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--ws-black);
  line-height: 1.3;
}
.meth-reg-desc {
  font-size: 11px;
  color: var(--ws-gray);
  line-height: 1.6;
  flex: 1;
}
.meth-source-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ws-blue);
  text-decoration: none;
  margin-top: 2px;
  transition: opacity .15s;
}
.meth-source-link:hover { opacity: .75; text-decoration: none; }

/* Formula cards */
.meth-formula-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 20px 24px;
}
@media (max-width: 680px) { .meth-formula-group { grid-template-columns: 1fr; } }

.meth-formula-card {
  background: var(--ws-bg);
  border: 1px solid var(--ws-border);
  border-radius: 10px;
  padding: 16px 20px;
}
.meth-tco-formula {
  margin: 20px 24px 0;
}
.meth-formula-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 800;
  color: var(--ws-gray);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 10px;
}
.meth-formula-box {
  background: var(--ws-white);
  border: 1px solid var(--ws-border);
  border-left: 3px solid var(--ws-blue);
  border-radius: 6px;
  padding: 12px 16px;
  overflow-x: auto;
}
.meth-formula-box code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--ws-blue);
  white-space: nowrap;
}
.meth-formula-note {
  font-size: 11px;
  color: var(--ws-gray);
  line-height: 1.6;
  margin-top: 10px;
}

/* Pillar weights */
.meth-weights-section {
  padding: 0 24px 20px;
}
.meth-weights-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 800;
  color: var(--ws-black);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 14px;
  padding-top: 20px;
  border-top: 1px solid var(--ws-border);
}
.meth-weights-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.meth-weight-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.meth-weight-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  width: 32px;
  flex-shrink: 0;
  margin-top: 2px;
}
.meth-weight-body { flex: 1; min-width: 0; }
.meth-weight-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ws-black);
  margin-bottom: 5px;
}
.meth-weight-bar-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.meth-weight-bar {
  height: 7px;
  border-radius: 4px;
  min-width: 4px;
  transition: width .4s ease;
}
.meth-weight-pct {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 900;
  flex-shrink: 0;
}
.meth-weight-rationale {
  font-size: 11px;
  color: var(--ws-gray);
  line-height: 1.5;
}

/* Thresholds */
.meth-thresholds { padding: 0 24px 24px; }
.meth-thresh-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
@media (max-width: 600px) { .meth-thresh-grid { grid-template-columns: 1fr; } }
.meth-thresh-card {
  border-radius: 10px;
  padding: 16px;
  text-align: center;
}
.meth-thresh-range {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.1;
}
.meth-thresh-verdict {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  margin-top: 5px;
}
.meth-thresh-desc {
  font-size: 11px;
  color: var(--ws-gray);
  margin-top: 6px;
  line-height: 1.5;
}
.meth-trigger-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 16px;
  background: var(--ws-warning-bg);
  border: 1px solid rgba(155,84,0,.2);
  border-radius: 8px;
  font-size: 11px;
  color: var(--ws-warning);
  line-height: 1.6;
}
.meth-trigger-note i { flex-shrink: 0; margin-top: 2px; }

/* CSP cards */
.meth-csp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  padding: 20px 24px;
}
.meth-csp-card {
  background: var(--ws-bg);
  border: 1px solid var(--ws-border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow .18s ease;
}
.meth-csp-card:hover { box-shadow: var(--shadow-md); }
.meth-csp-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.meth-csp-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--ws-black);
  line-height: 1.3;
}
.meth-csp-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  border: 1px solid;
  white-space: nowrap;
  flex-shrink: 0;
}
.meth-csp-prices { display: flex; flex-direction: column; gap: 4px; }
.meth-csp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
}
.meth-csp-service { color: var(--ws-gray); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meth-csp-price {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.meth-csp-note {
  font-size: 10px;
  color: var(--ws-warning);
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 5px;
}
.meth-csp-note i { flex-shrink: 0; margin-top: 1px; }

/* TCO table */
.meth-tco-table-wrap { padding: 0 24px 24px; }
.meth-tco-table-scroll { overflow-x: auto; }
.meth-tco-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.meth-tco-table th {
  padding: 9px 12px;
  background: var(--ws-bg);
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 2px solid var(--ws-border);
  text-align: left;
  white-space: nowrap;
}
.meth-tco-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--ws-border);
  color: var(--ws-gray);
  vertical-align: top;
  line-height: 1.5;
}
.meth-tco-table tr:last-child td { border-bottom: none; }
.meth-tco-table .c-pub { color: var(--ws-success); font-weight: 600; }
.meth-tco-table .c-sov { color: var(--ws-warning); font-weight: 600; }
.meth-tco-table .c-snc { color: var(--ws-danger); font-weight: 600; }

/* Studies grid */
.meth-studies-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 8px 0;
}
.meth-study-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--ws-border);
  transition: background .15s ease;
}
.meth-study-card:last-child { border-bottom: none; }
.meth-study-card:hover { background: var(--ws-bg); }
.meth-study-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.meth-study-body { flex: 1; min-width: 0; }
.meth-study-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--ws-black);
  margin-bottom: 4px;
}
.meth-study-tag {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  background: var(--ws-bg);
  border: 1px solid var(--ws-border);
  border-radius: 10px;
  color: var(--ws-gray);
  margin-left: 6px;
  vertical-align: middle;
}
.meth-study-desc {
  font-size: 12px;
  color: var(--ws-gray);
  line-height: 1.6;
  margin-bottom: 6px;
}

/* Limits grid */
.meth-limits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  padding: 20px 24px;
}
.meth-limit-card {
  background: var(--ws-warning-bg);
  border: 1px solid rgba(155,84,0,.15);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.meth-limit-icon {
  width: 36px;
  height: 36px;
  background: white;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--ws-warning);
}
.meth-limit-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--ws-black);
}
.meth-limit-desc {
  font-size: 11px;
  color: var(--ws-gray);
  line-height: 1.6;
}

/* About */
.meth-about {
  background: var(--ws-white);
  border: 1px solid var(--ws-border);
  border-radius: 14px;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.meth-about-logo {
  display: flex;
  align-items: center;
  gap: 14px;
}
.meth-about-logo-icon {
  width: 48px;
  height: 48px;
  background: var(--ws-blue);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
  flex-shrink: 0;
}
.meth-about-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: var(--ws-black);
}
.meth-about-by { font-size: 12px; color: var(--ws-gray); margin-top: 2px; }
.meth-about-desc { font-size: 13px; color: var(--ws-gray); line-height: 1.7; max-width: 600px; }
.meth-about-links { display: flex; flex-wrap: wrap; gap: 10px; }
.meth-about-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  background: var(--ws-blue-light);
  border: 1px solid rgba(0,45,114,.15);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ws-blue);
  text-decoration: none;
  transition: all .18s ease;
}
.meth-about-link:hover { background: var(--ws-blue); color: white; text-decoration: none; }
.meth-version-badge {
  font-size: 10px;
  color: var(--ws-gray-light);
  font-family: 'JetBrains Mono', monospace;
  padding: 6px 10px;
  background: var(--ws-bg);
  border-radius: 6px;
  border: 1px solid var(--ws-border);
  display: inline-block;
}

/* Dark mode Méthodologie */
[data-theme="dark"] .meth-section,
[data-theme="dark"] .meth-about { background: #181818 !important; border-color: #2A2A2A !important; }
[data-theme="dark"] .meth-section-header { background: #111111 !important; border-bottom-color: #2A2A2A !important; }
[data-theme="dark"] .meth-reg-card,
[data-theme="dark"] .meth-formula-card,
[data-theme="dark"] .meth-csp-card,
[data-theme="dark"] .meth-limit-card { background: #111111 !important; border-color: #2A2A2A !important; }
[data-theme="dark"] .meth-formula-box { background: #0E0E0E !important; border-color: #2A2A2A !important; }
[data-theme="dark"] .meth-reg-tag,
[data-theme="dark"] .meth-study-tag,
[data-theme="dark"] .meth-csp-badge { background: #111111 !important; border-color: #2A2A2A !important; }
[data-theme="dark"] .meth-study-card:hover { background: #111111 !important; }
[data-theme="dark"] .meth-pill { background: #181818 !important; border-color: #2A2A2A !important; color: var(--ws-gray) !important; }
[data-theme="dark"] .meth-pill:hover { background: rgba(90,171,255,.1) !important; border-color: var(--ws-blue) !important; color: var(--ws-blue) !important; }
[data-theme="dark"] .meth-tco-table th { background: #111111 !important; }
[data-theme="dark"] .meth-tco-table td,
[data-theme="dark"] .meth-tco-table th { border-color: #2A2A2A !important; }
[data-theme="dark"] .meth-about-link { background: rgba(90,171,255,.1) !important; border-color: rgba(90,171,255,.2) !important; }
[data-theme="dark"] .meth-limit-icon { background: #181818 !important; }
[data-theme="dark"] .meth-version-badge { background: #111111 !important; border-color: #2A2A2A !important; }

/* ═══════════════════════════════════════════════════════════════
   ÉVALUATION — Design amélioré
   ═══════════════════════════════════════════════════════════════ */

/* Question card redesign */
.question-card {
  background: var(--ws-white) !important;
  border: 1.5px solid var(--ws-border) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  transition: border-color .18s ease, box-shadow .18s ease !important;
  scroll-margin-top: 80px;
}
.question-card:hover { border-color: var(--ws-blue-mid) !important; box-shadow: var(--shadow-sm) !important; }
.question-card.answered { border-color: rgba(0,107,60,.3) !important; background: rgba(0,107,60,.02) !important; }
.question-card.critical-answered { border-color: rgba(192,0,26,.3) !important; background: rgba(192,0,26,.02) !important; }

.question-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: var(--ws-blue);
  color: white;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  flex-shrink: 0;
}
.question-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ws-black);
  margin-bottom: 14px;
  line-height: 1.55;
}

/* Answer options */
.answer-btn {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 11px 14px !important;
  border: 1.5px solid var(--ws-border) !important;
  border-radius: 8px !important;
  background: var(--ws-bg) !important;
  color: var(--ws-black) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: all .15s ease !important;
  width: 100% !important;
}
.answer-btn:hover {
  background: var(--ws-blue-light) !important;
  border-color: var(--ws-blue-mid) !important;
  transform: translateX(2px) !important;
}
.answer-btn.selected {
  background: var(--ws-blue-light) !important;
  border-color: var(--ws-blue) !important;
  color: var(--ws-blue) !important;
  font-weight: 700 !important;
}
.answer-btn.score-critical:hover,
.answer-btn.score-critical.selected {
  background: var(--ws-danger-bg) !important;
  border-color: var(--ws-danger) !important;
  color: var(--ws-danger) !important;
}
.answer-indicator {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--ws-border);
  flex-shrink: 0;
  transition: all .15s ease;
}
.answer-btn.selected .answer-indicator {
  background: var(--ws-blue);
  border-color: var(--ws-blue);
  box-shadow: 0 0 0 3px rgba(0,45,114,.15);
}
.answer-btn.score-critical.selected .answer-indicator {
  background: var(--ws-danger);
  border-color: var(--ws-danger);
}

/* Pillar tab redesign */
.pillar-tab {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  border: 1.5px solid var(--ws-border) !important;
  background: var(--ws-white) !important;
  color: var(--ws-gray) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all .18s ease !important;
  white-space: nowrap !important;
}
.pillar-tab:hover {
  background: var(--ws-blue-light) !important;
  border-color: var(--ws-blue-mid) !important;
  color: var(--ws-blue) !important;
}
.pillar-tab.active {
  background: var(--ws-blue) !important;
  border-color: var(--ws-blue) !important;
  color: white !important;
  box-shadow: 0 2px 8px rgba(0,45,114,.25) !important;
}
.pillar-tab.completed {
  border-color: var(--ws-success) !important;
  color: var(--ws-success) !important;
  background: var(--ws-success-bg) !important;
}

/* Dark mode assessment */
[data-theme="dark"] .question-card { background: #181818 !important; border-color: #2A2A2A !important; }
[data-theme="dark"] .question-card:hover { border-color: var(--ws-blue) !important; }
[data-theme="dark"] .answer-btn { background: #111111 !important; border-color: #2A2A2A !important; color: var(--ws-black) !important; }
[data-theme="dark"] .answer-btn:hover { background: rgba(90,171,255,.1) !important; border-color: var(--ws-blue) !important; }
[data-theme="dark"] .answer-btn.selected { background: rgba(90,171,255,.15) !important; border-color: var(--ws-blue) !important; color: var(--ws-blue) !important; }
[data-theme="dark"] .pillar-tab { background: #181818 !important; border-color: #2A2A2A !important; color: var(--ws-gray) !important; }

/* ── TCO : Slider années ──────────────────────────────────────── */
.tco-years-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  background: var(--ws-blue-light);
  border: 1px solid rgba(0,45,114,.12);
  border-radius: 10px;
  margin-bottom: 16px;
}
.tco-years-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ws-black);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 7px;
}
.tco-years-label i { color: var(--ws-blue); }
.tco-years-slider { flex: 1; }
.tco-years-display {
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 900;
  color: var(--ws-blue);
  min-width: 64px;
  text-align: center;
}
.tco-years-display span {
  font-size: 11px;
  font-weight: 400;
  color: var(--ws-gray);
}
[data-theme="dark"] .tco-years-bar { background: rgba(90,171,255,.08) !important; border-color: rgba(90,171,255,.2) !important; }