/* ═══════════════════════════════════════════════════════════════════════════
   LWS WordPress Manager — Design system
   Feuille de style partagée par index.html (liste des sites) et manage.html
   (gestion d'un site). Issue de la fusion des deux blocs :root et de la
   factorisation de tous les composants.

   Sommaire :
     1.  Imports & reset
     2.  Tokens (couleurs, typo, rayons, ombres, z-index)
     3.  Base body + focus
     4.  Topnav + lang toggle + breadcrumbs
     5.  Layout (main / content / hero)
     6.  Site header (manage)
     7.  Métriques (sh-metrics)
     8.  Onglets / sous-onglets / migration nav
     9.  Boutons
    10.  Notices + bandeaux (500, upsell, danger-zone)
    11.  Cards (génériques + indicators)
    12.  Health card / health-table / nutriscore / grades
    13.  Quick-actions / timeline
    14.  Rapports + toggle switch
    15.  Forms / data-table / sites-table
    16.  Badges / status badges / tags
    17.  Install grid / marketing grid
    18.  Dropdowns / menu
    19.  Tooltips + info-icon
    20.  Assistant IA (bulle, panneau chat, historique, détail)
    21.  Modales IA (consentement, préférences, désactivation)
    22.  Modales génériques (.modal-overlay / .modal-card)
    23.  Animations
    24.  Utilitaires (.text-muted-xs, .flex-*, .stack-*, .icon-*, .hidden, …)
    25.  Responsive ≤960px / ≤640px / ≤400px
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   1. Imports & reset
   ═══════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
input, select, textarea, button {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. Tokens
   ─────────────────────────────────────────────────────────────────────────
   Fusion des deux :root. Pour les 4 tokens divergents entre index.html et
   manage.html, on garde la valeur de manage.html ; l'ancienne valeur
   d'index.html est conservée en commentaire à droite (index.html va donc
   changer très légèrement de rendu sur ces 4 points).
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  font-size: 17px;
  /* --space-unit: 1.08; (token de référence — facteur d'échelle appliqué aux paddings des conteneurs principaux ; commenté pour info) */

  /* Surfaces */
  --bg:           oklch(98% 0.004 240);   /* ancien index.html : #EEF2FA */
  --surface:      oklch(100% 0 0);
  --fg:           oklch(20% 0.02 240);
  --muted:        #363d43;                /* ancien index.html : oklch(50% 0.018 240) */
  --border:       oklch(90% 0.006 240);

  /* Marque LWS */
  --blue:         #1C469D;
  --blue-hover:   #163a84;
  --blue-light:   #E8F6FF;                /* ancien index.html : oklch(96% 0.06 265) */

  /* WordPress-ish */
  --orange:       oklch(65% 0.20 48);
  --orange-light: oklch(98.5% 0.02 55);   /* ancien index.html : oklch(97% 0.05 55) */

  /* Sémantiques */
  --success:      #008A4C;
  --success-bg:   #edf7f2;
  --warning:      #F38421;
  --warning-bg:   #fff4e8;
  --danger:       #db3d3d;
  --danger-bg:    #fff1ee;

  /* Manage-only : Audit IA et preview */
  --purple:       oklch(55% 0.16 290);
  --purple-bg:    oklch(97% 0.04 290);

  /* Rayons + ombres */
  --radius-sm:    6px;
  --radius:       12px;
  --shadow-sm:    0 1px 3px oklch(0% 0 0 / 0.07), 0 1px 2px oklch(0% 0 0 / 0.04);
  --shadow:       0 4px 16px oklch(0% 0 0 / 0.08), 0 2px 4px oklch(0% 0 0 / 0.04);

  /* Typo */
  --font:         -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* Échelle de z-index nommée — remplace les 200/500/900/950/9000+ inline */
  --z-tabbar:        140;
  --z-site-header:   150;
  --z-topnav:        200;
  --z-dropdown:      300;
  --z-modal:         500;   /* ex-modales inline z-index:500 */
  --z-ai-bubble:     800;
  --z-modal-high:    950;   /* utilisateurs / plugins / thèmes / modal-confirm */
  --z-tooltip:      9999;
  --z-ai-consent:   9000;
  --z-ai-prefs:     9050;
  --z-ai-disable:   9100;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. Base + focus
   ═══════════════════════════════════════════════════════════════════════════ */
body {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--fg);
  font-size: 17px;
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
button:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Radios "device" cochés : utilisé par les sélecteurs de mockup */
label:has(input[name="device"]:checked) {
  background: var(--blue-light) !important;
  border-color: var(--blue) !important;
  color: var(--blue);
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. Topnav + lang toggle
   ═══════════════════════════════════════════════════════════════════════════ */
.topnav {
  background: var(--blue);
  height: 48px;
  padding: 0;
  position: sticky;
  top: 0;
  z-index: var(--z-topnav);
}
.nav-inner {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 43px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
}
.nav-badge {
  background: white;
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 5px;
  letter-spacing: 0.5px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 17px;
  color: white;
  text-decoration: none;
  letter-spacing: -0.01em;
}
.nav-sep { color: rgba(255,255,255,0.35); }
.nav-crumb { font-size: 16px; color: rgba(255,255,255,0.75); text-decoration: none; }
.nav-crumb:hover { color: white; }
.nav-crumb-cur { font-size: 16px; color: white; font-weight: 500; }
/* Lien crumb harmonisé (FR/EN, manage.html) — anciennement inline onmouseover/out */
.nav-crumb-link { text-decoration: none; cursor: pointer; transition: opacity 0.12s; }
.nav-crumb-link:hover { opacity: 0.75; }
.nav-crumb-cur.nav-crumb-link { display: inline-flex; align-items: center; gap: 7px; color: white; }
.nav-spacer { flex: 1; }
.nav-user {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  transition: background 0.12s;
}
.nav-user:hover { background: rgba(255,255,255,0.12); }
.nav-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}

/* Lang toggle (FR/EN) */
.nav-lang {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 6px;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  transition: border-color 0.12s;
  flex-shrink: 0;
}
.nav-lang:hover { border-color: rgba(255,255,255,0.45); }
.lang-opt {
  padding: 5px 9px;
  color: rgba(255,255,255,0.4);
  transition: all 0.15s;
  line-height: 1;
  user-select: none;
}
.lang-opt.active { background: rgba(255,255,255,0.2); color: white; }

/* ═══════════════════════════════════════════════════════════════════════════
   5. Layout (main / content / hero)
   ═══════════════════════════════════════════════════════════════════════════ */
.main { max-width: 1170px; margin: 0 auto; padding: 48px 43px 108px; }
.content { max-width: 1170px; margin: 0 auto; padding: 22px 43px 35px; width: 100%; }

.section { margin-bottom: 40px; }
.section-gap { margin-bottom: 20px; }

.hero { margin-bottom: 40px; }
.hero-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 32px;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: 20px;
}
.hero-logo { width: 52px; height: 52px; flex-shrink: 0; }
.hero-text h1 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 6px;
}
.hero-text p { color: var(--muted); font-size: 16px; }

/* Section header (titre + actions à droite) */
.sh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.sh h2 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }

/* ═══════════════════════════════════════════════════════════════════════════
   6. Site header (manage)
   ═══════════════════════════════════════════════════════════════════════════ */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0;
  position: sticky;
  top: 48px;
  z-index: var(--z-site-header);
}
.site-header-inner {
  max-width: 1170px;
  margin: 0 auto;
  padding: 15px 43px 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.sh-row1 {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 14px;
}
.site-identity {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
  min-width: 0;
}
.site-preview {
  width: 72px;
  height: 52px;
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg);
}
.site-id-text { min-width: 0; }
.site-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.site-title {
  font-weight: 700;
  font-size: 17px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.site-url-link {
  font-size: 14px;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.site-url-link:hover { text-decoration: underline; }
.site-grade-badge {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 17px;
  flex-shrink: 0;
  background: #EDC000;
  color: white;
}
.site-header-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   7. Métriques (sh-metrics)
   ═══════════════════════════════════════════════════════════════════════════ */
.sh-metrics {
  display: flex;
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 24px;
  overflow: visible;
}
.ms-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 10px 18px;
  flex: 1;
  min-width: 0;
}
.ms-stat:first-child { padding-left: 18px; }
.ms-stat + .ms-stat { border-left: 1px solid var(--border); }
.ms-lbl {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.ms-val {
  font-size: 16px;
  font-weight: 700;
  color: var(--fg);
  line-height: 1.2;
  white-space: nowrap;
}
.ms-val.warn { color: #c46a10; }
.ms-val.ok { color: var(--success); }
.ms-val.danger { color: var(--danger); }
.ms-select {
  border: 1px solid var(--border);
  background: #fff;
  font-family: 'Poppins', var(--font);
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
  cursor: pointer;
  outline: none;
  padding: 3px 8px;
  border-radius: 6px;
  margin-left: 0;
  appearance: auto;
  min-width: 80px;
  max-width: 100%;
  box-sizing: border-box;
}

/* Bouton toggle métriques — visible uniquement sur mobile (cf. responsive) */
.metrics-toggle-btn { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   8. Onglets / sous-onglets / migration nav
   ═══════════════════════════════════════════════════════════════════════════ */
.tab-bar-outer {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 48px;
  z-index: var(--z-tabbar);
}
.tab-bar {
  padding: 0;
  overflow-x: auto;
}
.tab-bar::-webkit-scrollbar { display: none; }
.tab-scroll-hint {
  display: none;
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 48px;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, white 65%);
  align-items: center;
  justify-content: flex-end;
  padding-right: 6px;
  pointer-events: none;
  z-index: 1;
}
.tab-bar-inner {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 43px;
  display: flex;
  gap: 4px;
}
.tab-btn {
  padding: 14px 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: 'Poppins', var(--font);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.13s;
}
.tab-btn:hover { color: var(--fg); }
.tab-btn.active { color: var(--blue); border-bottom-color: var(--blue); font-weight: 600; }
.tab-btn.tab-disabled { opacity: 0.38; pointer-events: none; }

/* Compteur dans un onglet (ex : 3 mises à jour) */
.tab-count {
  background: var(--warning);
  color: white;
  font-size: 12px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}

/* Sous-onglets (sauvegardes / migration) */
.sub-tab-btn {
  padding: 11px 18px;
  font-size: 15px;
  font-weight: 500;
  font-family: 'Poppins', sans-serif;
  color: var(--muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  margin-bottom: -1px;
}
.sub-tab-btn.active { color: var(--blue); border-bottom-color: var(--blue); font-weight: 600; }

/* Migration nav (carrés) */
.mig-nav-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  transition: border-color .13s, background .13s;
  font-family: 'Poppins', sans-serif;
  width: 100%;
}
.mig-nav-btn:hover:not(.mig-active) { border-color: var(--muted); background: var(--bg); }
.mig-nav-btn.mig-active { border-color: var(--blue); background: var(--blue-light); }

/* Panneaux d'onglets */
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Intro d'onglet (paragraphe sous le titre) */
.tab-intro { margin-bottom: 20px; }
.tab-intro p { font-size: 16px; color: var(--muted); }

/* ═══════════════════════════════════════════════════════════════════════════
   9. Boutons
   ═══════════════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
  border: none;
  transition: all 0.13s;
  text-decoration: none;
  white-space: nowrap;
}
.btn-primary { background: var(--blue); color: white; }
.btn-primary:hover { background: var(--blue-hover); }
.btn-wp { background: #3858E9; color: white; }
.btn-wp:hover { background: #2d46c0; }
.btn-secondary {
  background: var(--surface);
  color: var(--fg);
  border: 1px solid oklch(80% 0.008 240);
}
.btn-secondary:hover { background: var(--bg); border-color: oklch(72% 0.010 240); }
.btn-ghost { background: transparent; color: var(--muted); }
.btn-ghost:hover { background: var(--bg); color: var(--fg); }
.btn-danger { background: var(--danger); color: white; border: none; }
.btn-danger:hover { background: #c23535; }
.btn-warning { background: var(--warning); color: white; border: none; }
.btn-warning:hover { background: #d9741c; }
.btn-success { background: var(--success); color: white; border: none; }
.btn-success:hover { background: #006b3a; }
/* alias historique : même rendu que .btn, conservé pour clarté sémantique */
.btn-sm { padding: 6px 12px; font-size: 15px; }

/* Beacon : impulsion lumineuse autour d'un bouton (3 fois) */
.btn-beacon { animation: beacon-pulse 2.5s ease-out 3; }

/* ═══════════════════════════════════════════════════════════════════════════
   10. Notices + bandeaux (HTTP 500, upsell LWS, zone de danger)
   ═══════════════════════════════════════════════════════════════════════════ */
.notice {
  padding: 12px 14px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.45;
  cursor: default;
}
.notice-info {
  background: oklch(99.5% 0.008 240);
  border: 1px solid oklch(88% 0.035 240);
  color: oklch(38% 0.15 258);
}
.notice-warning { background: #fffaf5; border: 1px solid #f8c890; color: #c46a10; }
.notice-success { background: #f5fbf8; border: 1px solid #8ecfb0; color: #005c32; }
.notice-danger  { background: #fff9f8; border: 1px solid #f9beb4; color: #c73116; }

/* Bandeau HTTP 500 (onglet SOS) */
.banner-500 {
  background: #fff5f4;
  border: 1.5px solid #f9beb4;
  border-left: 4px solid var(--danger);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 20px;
  display: none;
}
.banner-500.visible { display: block; }
.b500-head { display: flex; align-items: center; gap: 12px; margin-bottom: 0; }
.b500-badge {
  background: var(--danger);
  color: white;
  font-size: 14px;
  font-weight: 800;
  padding: 5px 9px;
  border-radius: 5px;
  flex-shrink: 0;
  letter-spacing: 0.5px;
  margin-top: 1px;
}
.b500-head-text { flex: 1; min-width: 0; }
.b500-title { font-size: 16px; font-weight: 700; color: #c73116; margin-bottom: 2px; }
.b500-subtitle { font-size: 15px; color: #7a3425; line-height: 1.45; }
.b500-causes {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid #f9beb4;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 11px;
}
.b500-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  background: rgba(255,255,255,0.65);
  border-bottom: 1px solid #f9beb4;
}
.b500-row:last-child { border-bottom: none; }
.b500-num {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--danger);
  color: white;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.b500-row-text { flex: 1; font-size: 15px; color: #5a2318; line-height: 1.35; }
.b500-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.b500-access-note {
  font-size: 14px;
  color: #7a3425;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Bloc upsell LWS */
.lws-upsell {
  display: flex;
  align-items: center;
  gap: 24px;
  background: linear-gradient(120deg, var(--blue) 0%, var(--blue-hover) 100%);
  border-radius: var(--radius);
  padding: 22px 28px;
  margin-bottom: 24px;
}
.lws-upsell-logo { flex-shrink: 0; height: 28px; }
.lws-upsell-body { flex: 1; min-width: 0; }
.lws-upsell-title { font-size: 17px; font-weight: 700; color: white; line-height: 1.35; }
.lws-upsell-sub { font-size: 15px; color: rgba(255,255,255,0.75); margin-top: 3px; }
.lws-upsell-btn {
  flex-shrink: 0;
  background: white;
  color: var(--blue);
  border: none;
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: background 0.15s;
}
.lws-upsell-btn:hover { background: var(--blue-light); }

/* Zone de danger (Avancé, Supprimer le site) */
.danger-zone {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 22px 28px;
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: space-between;
}
.danger-zone-text h4 { font-size: 17px; font-weight: 700; color: var(--danger); margin-bottom: 4px; }
.danger-zone-text p { font-size: 15px; color: var(--muted); }

/* ═══════════════════════════════════════════════════════════════════════════
   11. Cards (génériques + indicators)
   ═══════════════════════════════════════════════════════════════════════════ */
.card {
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 24px;
  overflow: visible;
}
.card-header { padding: 17px 24px; border-bottom: 1px solid var(--border); }
.card-header h3 { font-size: 17px; font-weight: 700; }
.card-body { padding: 22px 24px; }
/* Arrondi propre sur les tableaux logés dans une card */
.card .data-table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--radius); }
.card .data-table tbody tr:last-child td:last-child { border-bottom-right-radius: var(--radius); }

/* Rangée d'indicateurs (Dashboard) */
.indicators {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.ind-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ind-card.state-warn   { border-color: color-mix(in oklch, var(--warning) 30%, var(--border)); }
.ind-card.state-danger { border-color: color-mix(in oklch, var(--danger)  30%, var(--border)); }
.ind-card.state-ok     { border-color: color-mix(in oklch, var(--success) 20%, var(--border)); }
.ind-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ind-value {
  font-size: 19px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.ind-value.warn { color: #c46a10; }
.ind-value.ok { color: var(--success); }
.ind-value.danger { color: var(--danger); }
.ind-sub { font-size: 14px; color: var(--muted); }
.ind-action { margin-top: 4px; }

/* Two-col responsive */
.two-col {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 16px;
  margin-bottom: 20px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   12. Health card / health-table / nutriscore / grades
   ═══════════════════════════════════════════════════════════════════════════ */
.health-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
  overflow: hidden;
}
.health-top {
  padding: 24px 28px;
  display: flex;
  align-items: center;
  gap: 28px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(to right, oklch(99% 0.006 240), var(--surface));
}

/* Nutriscore (A→E cliquables) */
.nutriscore {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  flex-shrink: 0;
}
.ns-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-weight: 800;
  transition: all 0.2s;
}
.ns-a, .ns-b, .ns-c, .ns-d, .ns-e {
  width: 36px;
  height: 36px;
  font-size: 16px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  border-radius: 6px;
  opacity: 0.55;
  cursor: pointer;
  transition: all 0.18s;
}
.ns-a { background: #008A4C; }
.ns-b { background: #81C143; }
.ns-c { background: #EDC000; }
.ns-d { background: #F38421; }
.ns-e { background: #db3d3d; }
.ns-active {
  width: 46px !important;
  height: 46px !important;
  font-size: 20px !important;
  opacity: 1 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  border-radius: 7px !important;
}

.health-summary { flex: 1; }
.health-grade-label { font-size: 15px; color: var(--muted); font-weight: 500; margin-bottom: 4px; }
.health-score-num {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #c46a10;
  line-height: 1;
  margin-bottom: 4px;
}
.health-score-sub { font-size: 15px; color: var(--muted); }
.health-score-sub strong { color: var(--fg); }

.health-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 28px 24px;
}
.health-table { width: 100%; border-collapse: collapse; }
.health-table tr { border-bottom: 1px solid var(--border); }
.health-table tr:last-child { border-bottom: none; }
.health-table tr.h-crit td:first-child { border-left: 3px solid #db3d3d; }
.health-table tr.h-warn td:first-child { border-left: 3px solid #F38421; }
.health-table tr.h-ok   td:first-child { border-left: 3px solid #008A4C; }
.health-table td { padding: 11px 14px; vertical-align: middle; }
.ht-icon { width: 32px; padding-left: 12px !important; }
.ht-body { flex: 1; }
.ht-action { width: 140px; text-align: right; white-space: nowrap; }

/* Items santé hors table (cards) */
.h-item {
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.h-item.h-crit { border-color: #db3d3d; }
.h-item.h-warn { border-color: #F38421; }
.h-item.h-ok   { border-color: #008A4C; }
.h-row { display: flex; align-items: flex-start; gap: 10px; flex: 1; }
.h-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}
.h-ok   .h-icon, tr.h-ok   .h-icon { background: #008A4C; color: white; }
.h-warn .h-icon, tr.h-warn .h-icon { background: #F38421; color: white; }
.h-crit .h-icon, tr.h-crit .h-icon { background: #db3d3d; color: white; }
.h-body { flex: 1; }
.h-title { font-weight: 600; font-size: 15px; margin-bottom: 2px; }
.h-crit .h-title { color: #C0392B; }
.h-warn .h-title { color: #c46a10; }
.h-ok   .h-title { color: var(--fg); }
.h-desc { font-size: 14px; color: var(--muted); line-height: 1.4; }
.h-tech { font-size: 14px; color: var(--muted); margin-top: 3px; }
.h-action { margin-top: 0; }

/* Grades (badge carré coloré A→E)
   Note historique : .grade existait en deux tailles dans index.html
   (34px puis 26px). Conservé sur la version compacte 26px qui est la
   plus utilisée dans la table des sites. */
.grade {
  width: 26px;
  height: 26px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
}
.g-a { background: #008A4C; color: white; }
.g-b { background: #81C143; color: white; }
.g-c { background: #EDC000; color: white; }
.g-d { background: #F38421; color: white; }
.g-e { background: #db3d3d; color: white; }

/* ═══════════════════════════════════════════════════════════════════════════
   13. Quick-actions / timeline (Dashboard)
   ═══════════════════════════════════════════════════════════════════════════ */
.qa-list { display: flex; flex-direction: column; gap: 8px; padding: 16px 22px 20px; }
.qa-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  border: 1px solid var(--border);
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  color: var(--fg);
  font-family: 'Poppins', sans-serif;
  transition: all 0.13s;
  text-align: left;
}
.qa-btn:hover {
  background: var(--blue-light);
  border-color: color-mix(in oklch, var(--blue) 30%, var(--border));
  color: var(--blue);
}
.qa-btn.sos {
  background: var(--danger-bg);
  border-color: color-mix(in oklch, var(--danger) 20%, transparent);
  color: var(--danger);
}
.qa-btn.sos:hover { background: var(--danger); color: white; }
.qa-icon {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: var(--blue-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.qa-btn.sos .qa-icon { background: var(--danger-bg); }
.qa-text-main { font-size: 16px; font-weight: 600; }
.qa-text-sub { font-size: 14px; color: var(--muted); line-height: 1.3; }

.timeline { display: flex; flex-direction: column; gap: 0; padding: 12px 22px 8px; }
.tl-item {
  display: flex;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
}
.tl-item:last-child { border-bottom: none; }
.tl-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  margin-top: 6px;
  flex-shrink: 0;
}
.tl-dot.blue { background: var(--blue); }
.tl-dot.green { background: var(--success); }
.tl-dot.orange { background: var(--orange); }
.tl-body { flex: 1; }
.tl-action { font-size: 16px; font-weight: 500; color: var(--fg); }
.tl-time { font-size: 14px; color: var(--muted); margin-top: 1px; }

/* ═══════════════════════════════════════════════════════════════════════════
   14. Rapports mensuels + toggle switch
   ═══════════════════════════════════════════════════════════════════════════ */
.report-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 28px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
}
.report-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}
.report-info h3 { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.report-info p { font-size: 15px; color: var(--muted); }
.report-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: end;
}
.report-field label {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 6px;
}
.report-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 16px;
  font-family: 'Poppins', var(--font);
  color: var(--fg);
  background: var(--bg);
}
.report-input:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: transparent; }

/* Toggle switch (iOS-like) */
.toggle-row { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.toggle-wrap { position: relative; }
.toggle-wrap input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-track {
  width: 40px;
  height: 22px;
  background: var(--border);
  border-radius: 11px;
  cursor: pointer;
  transition: background 0.2s;
  display: block;
  position: relative;
}
.toggle-track::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: white;
  top: 3px;
  left: 3px;
  transition: left 0.2s;
  box-shadow: 0 1px 3px oklch(0% 0 0 / 0.2);
}
.toggle-wrap input:checked + .toggle-track { background: var(--blue); }
.toggle-wrap input:checked + .toggle-track::after { left: 21px; }
.toggle-label { font-size: 16px; font-weight: 500; }
.toggle-sub { font-size: 14px; color: var(--muted); }

.report-footer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.delegate-cta {
  background: linear-gradient(135deg, var(--blue-light), oklch(96% 0.04 240));
  border: 1px solid color-mix(in oklch, var(--blue) 20%, var(--border));
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 15px;
  color: var(--blue);
  display: flex;
  align-items: center;
  gap: 8px;
}
.report-history {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 15px;
  color: var(--muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   15. Forms + data-table + sites-table
   ═══════════════════════════════════════════════════════════════════════════ */
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-label { font-size: 15px; font-weight: 600; color: var(--fg); }
.form-input {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-family: 'Poppins', var(--font);
  color: var(--fg);
  background: var(--surface);
  width: 100%;
}
.form-input:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: transparent; }

/* Input "détection" (champ d'URL hero index.html) */
.detect-row input {
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 16px;
  font-family: 'Poppins', var(--font);
  color: var(--fg);
  background: var(--bg);
  width: 270px;
}
.detect-row input:focus {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
  border-color: transparent;
}

/* Data-table (manage : utilisateurs, plugins, thèmes…) */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  padding: 10px 20px;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.data-table td {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 16px;
  vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--bg); }

/* Sites-table (index.html : liste des sites) */
.sites-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.sites-table th {
  padding: 10px 16px;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  background: #F5F8FD;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.sites-table th:last-child { text-align: right; }
.sites-table td {
  padding: 14px 16px;
  font-size: 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.sites-table tr:last-child td { border-bottom: none; }
.sites-table tr.is-staging td { background: #FFF8F3; }

.site-name-cell { display: flex; align-items: center; gap: 10px; }
.site-name-cell .sn-icon { width: 32px; height: 32px; flex-shrink: 0; }
.site-name-cell .sn-text { display: flex; flex-direction: column; }
.site-name-cell .sn-title {
  font-weight: 600;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 2px;
}
.site-name-cell .sn-domain { font-size: 14px; color: var(--muted); }

/* Actions de ligne (boutons + menu …) */
.site-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   16. Badges / status badges / tags
   ═══════════════════════════════════════════════════════════════════════════ */
/* Status badges (online / offline / maintenance) */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
}
.status-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-online { background: #e6f7ee; color: #008A4C; border: 1px solid #b8e6cd; }
.status-online::before { background: #008A4C; }
.status-offline { background: #fde8e7; color: #db3d3d; border: 1px solid #f9bfba; }
.status-offline::before { background: #db3d3d; }
.status-maintenance { background: #fff4e8; color: #F38421; border: 1px solid #fcd6a4; }
.status-maintenance::before { background: #F38421; }

/* Tags (étiquette grise, ex. "PHP 8.2") */
.tag {
  font-size: 14px;
  color: var(--muted);
  background: var(--bg);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--border);
}
.badge-staging {
  font-size: 11px;
  font-weight: 800;
  background: var(--orange);
  color: white;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.badge-parent {
  font-size: 14px;
  color: var(--orange);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Badges génériques (plugins/thèmes/utilisateurs) */
.badge {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  align-self: flex-start;
  width: fit-content;
}
.badge-blue { background: oklch(94% 0.06 258); color: oklch(38% 0.20 258); }
.badge-active, .badge-success { background: #edf7f2; color: #005c32; font-weight: 600; }
.badge-inactive { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }
.badge-warning { background: #fff4e8; color: #c46a10; }
.badge-danger  { background: #fff1ee; color: #c73116; }
.update-badge {
  display: inline-block;
  font-size: 14px;
  color: #c46a10;
  background: #fff4e8;
  border-radius: 3px;
  padding: 1px 6px;
  margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   17. Install grid / marketing grid (index.html)
   ═══════════════════════════════════════════════════════════════════════════ */
.install-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.install-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 18px;
  cursor: pointer;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: all 0.15s;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.install-icon { margin-bottom: 10px; font-size: 32px; }
.install-card:hover {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-light), var(--shadow);
  transform: translateY(-1px);
}
.install-title { font-weight: 700; font-size: 16px; margin-bottom: 4px; }
.install-desc { font-size: 14px; color: var(--muted); line-height: 1.4; }
.install-more {
  font-size: 16px;
  color: var(--blue);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
}
.install-more:hover { text-decoration: underline; }

.mkt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mkt-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow-sm);
}
.mkt-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.mkt-card p {
  font-size: 16px;
  color: var(--muted);
  margin-bottom: 14px;
  line-height: 1.5;
}
.tuto-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.tuto-link {
  font-size: 15px;
  color: var(--blue);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tuto-link:hover { text-decoration: underline; }
.price-tag {
  font-size: 18px;
  font-weight: 800;
  color: var(--fg);
  margin-bottom: 16px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   18. Dropdowns / menu
   ═══════════════════════════════════════════════════════════════════════════ */
.menu-wrap { position: relative; }
.menu-trigger {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  color: var(--muted);
  line-height: 1;
  letter-spacing: 0;
  transition: all 0.12s;
}
.menu-trigger:hover { background: var(--bg); color: var(--fg); }
.dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  z-index: var(--z-dropdown);
  min-width: 200px;
  padding: 4px;
}
.menu-wrap.open .dropdown { display: block; }
.d-item {
  display: block;
  width: 100%;
  padding: 8px 13px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  color: var(--fg);
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: 'Poppins', var(--font);
  text-align: left;
  transition: background 0.1s;
}
.d-item:hover { background: var(--bg); }
.d-item.danger { color: var(--danger); }
.d-divider { height: 1px; background: var(--border); margin: 4px; }

/* Mobile-only : select pour remplacer la sous-navigation horizontale */
.mobile-nav-select { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   19. Tooltips + info icon
   ═══════════════════════════════════════════════════════════════════════════ */
[data-tip] { position: relative; cursor: help; }
[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: oklch(20% 0.02 240);
  color: white;
  font-size: 14px;
  padding: 5px 9px;
  border-radius: 5px;
  white-space: nowrap;
  width: max-content;
  pointer-events: none;
  z-index: var(--z-tooltip);
}

.tooltip-wrap { position: relative; display: inline-block; cursor: help; }
.tooltip-wrap:hover::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: oklch(20% 0.02 240);
  color: white;
  font-size: 14px;
  font-weight: 400;
  padding: 7px 12px;
  border-radius: 5px;
  pointer-events: none;
  z-index: var(--z-tooltip);
  min-width: 220px;
  max-width: 340px;
  white-space: normal;
  line-height: 1.5;
}
.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--border);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  cursor: help;
  margin-left: 4px;
  vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════════════════════════
   20. Assistant IA (bulle, panneau chat, historique, détail)
   ═══════════════════════════════════════════════════════════════════════════ */
.ai-wrap {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: var(--z-ai-bubble);
  font-family: 'Poppins', var(--font);
}
.ai-bubble {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--blue);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px oklch(0% 0 0 / 0.22);
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
  font-size: 20px;
}
.ai-bubble:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 24px oklch(0% 0 0 / 0.28);
}
.ai-bubble-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.ai-bubble-disabled:hover { transform: none; }

.ai-panel {
  display: none;
  position: absolute;
  bottom: 54px;
  right: 0;
  width: 360px;
  height: 480px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 16px 48px oklch(0% 0 0 / 0.18);
  flex-direction: column;
  overflow: hidden;
}
.ai-panel.open { display: flex; }
.ai-head {
  background: var(--blue);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.ai-head-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: oklch(100% 0 0 / 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: white;
  flex-shrink: 0;
}
.ai-head-info { flex: 1; min-width: 0; }
.ai-head-title { font-size: 15px; font-weight: 700; color: white; margin-bottom: 2px; }
.ai-head-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: oklch(100% 0 0 / 0.7);
}
.ai-head-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 4px #4ade80;
  flex-shrink: 0;
}
.ai-head-actions { display: flex; gap: 3px; align-items: center; }
.ai-head-btn {
  background: oklch(100% 0 0 / 0.1);
  border: none;
  color: oklch(100% 0 0 / 0.65);
  cursor: pointer;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s;
  flex-shrink: 0;
}
.ai-head-btn:hover { background: oklch(100% 0 0 / 0.2); color: white; }
.ai-head-btn.active { background: oklch(100% 0 0 / 0.22); color: white; }
.ai-close {
  background: oklch(100% 0 0 / 0.08);
  border: none;
  color: oklch(100% 0 0 / 0.6);
  cursor: pointer;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  line-height: 1;
  transition: background 0.12s;
}
.ai-close:hover { color: white; background: oklch(100% 0 0 / 0.18); }

/* Vue chat */
.ai-chat-view { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.ai-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ai-msg {
  max-width: 84%;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ai-msg.user { align-self: flex-end; align-items: flex-end; }
.ai-msg.bot { align-self: flex-start; }
.ai-bubble-msg {
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.45;
}
.ai-msg.user .ai-bubble-msg {
  background: var(--blue);
  color: white;
  border-bottom-right-radius: 3px;
}
.ai-msg.bot .ai-bubble-msg {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg);
  border-bottom-left-radius: 3px;
}
.ai-msg-time { font-size: 11px; color: var(--muted); }

.ai-footer {
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.ai-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 15px;
  font-family: 'Poppins', var(--font);
  color: var(--fg);
  background: var(--bg);
  outline: none;
}
.ai-input:focus { border-color: var(--blue); background: white; }
.ai-send {
  padding: 8px 14px;
  background: var(--blue);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  font-family: 'Poppins', var(--font);
  cursor: pointer;
}
.ai-send:hover { background: oklch(46% 0.22 258); }

/* Bandeau "reprendre une session" */
.ai-resume-banner {
  margin: 8px 10px 0;
  padding: 7px 10px;
  background: oklch(95% 0.05 255 / 0.5);
  border: 1px solid oklch(88% 0.08 255);
  border-radius: 8px;
  display: flex;
  gap: 7px;
  align-items: flex-start;
}
.ai-resume-banner svg { flex-shrink: 0; color: var(--blue); margin-top: 1px; }
.ai-resume-text { flex: 1; }
.ai-resume-title { font-size: 11.5px; font-weight: 700; color: var(--blue); margin-bottom: 1px; }
.ai-resume-desc { font-size: 11.5px; color: oklch(40% 0.016 250); line-height: 1.4; }

/* Boutons d'action dans les bulles bot */
.ai-actions, .ai-bubble-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 9px;
}
.ai-action-btn {
  padding: 5px 10px;
  border-radius: 7px;
  border: 1.5px solid var(--blue);
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.4;
  transition: opacity 0.12s;
  background: white;
  color: var(--blue);
}
.ai-action-btn.primary { background: var(--blue); color: white; }
.ai-action-btn.primary:hover { opacity: 0.85; }
.ai-action-btn.secondary { background: white; color: var(--blue); }
.ai-action-btn.secondary:hover { background: oklch(96% 0.05 255 / 0.5); }
/* En vue détail (lecture seule) : boutons décoratifs */
.ai-hist-detail-msgs .ai-action-btn {
  cursor: default;
  pointer-events: none;
  opacity: 0.75;
}

/* Vue historique */
.ai-hist-view { flex: 1; display: none; flex-direction: column; overflow: hidden; }
.ai-hist-view.visible { display: flex; }
.ai-hist-head {
  padding: 9px 11px 7px;
  display: flex;
  gap: 6px;
  align-items: center;
  border-bottom: 1px solid oklch(92% 0.005 240);
  flex-shrink: 0;
}
.ai-hist-head-title {
  flex: 1;
  font-size: 12.5px;
  font-weight: 600;
  color: oklch(22% 0.02 240);
}
.ai-btn-newchat {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 9px;
  background: var(--blue);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
  transition: opacity 0.12s;
}
.ai-btn-newchat:hover { opacity: 0.85; }
.ai-hist-list { flex: 1; overflow-y: auto; padding: 6px; }
.ai-hist-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 8px 9px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.1s;
}
.ai-hist-item:hover { background: oklch(97% 0.004 240); }
.ai-hist-item.current { background: oklch(95% 0.05 255 / 0.45); }
.ai-hist-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: oklch(94% 0.04 255);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
}
.ai-hist-item.current .ai-hist-icon { background: var(--blue); color: white; }
.ai-hist-body { flex: 1; min-width: 0; }
.ai-hist-title {
  font-size: 14px;
  font-weight: 500;
  color: oklch(22% 0.02 240);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 1px;
}
.ai-hist-preview {
  font-size: 14px;
  color: oklch(50% 0.018 240);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-hist-date { font-size: 11px; color: oklch(60% 0.01 240); margin-top: 1px; }
.ai-hist-empty {
  padding: 28px 16px;
  text-align: center;
  color: oklch(60% 0.01 240);
  font-size: 14px;
}
.ai-date-sep {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 4px 4px;
}
.ai-date-sep::before,
.ai-date-sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: oklch(92% 0.005 240);
}
.ai-date-sep span {
  font-size: 11px;
  color: oklch(60% 0.01 240);
  white-space: nowrap;
}

/* Vue détail d'une conversation */
.ai-hist-detail { flex: 1; display: none; flex-direction: column; overflow: hidden; }
.ai-hist-detail.visible { display: flex; }
.ai-hist-detail-head {
  padding: 9px 11px 7px;
  display: flex;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid oklch(92% 0.005 240);
  flex-shrink: 0;
}
.ai-hist-back-btn {
  background: none;
  border: none;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  color: var(--blue);
  cursor: pointer;
  padding: 4px 7px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  transition: background 0.1s;
  flex-shrink: 0;
}
.ai-hist-back-btn:hover { background: oklch(96% 0.05 255 / 0.45); }
.ai-hist-detail-title {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: oklch(22% 0.02 240);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-hist-detail-date {
  font-size: 11px;
  color: oklch(55% 0.01 240);
  flex-shrink: 0;
  white-space: nowrap;
}
.ai-hist-detail-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 10px 11px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.ai-hist-detail-foot {
  padding: 8px 11px;
  border-top: 1px solid oklch(92% 0.005 240);
  flex-shrink: 0;
}
.ai-btn-resume {
  width: 100%;
  padding: 8px 12px;
  background: var(--blue);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
  transition: opacity 0.12s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.ai-btn-resume:hover { opacity: 0.85; }

/* ═══════════════════════════════════════════════════════════════════════════
   21. Modales IA (consentement, préférences, désactivation)
   ═══════════════════════════════════════════════════════════════════════════ */
/* Consentement */
.ai-consent-overlay {
  position: fixed;
  inset: 0;
  background: oklch(0% 0 0 / 0.52);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: var(--z-ai-consent);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.ai-consent-modal {
  background: var(--surface);
  border-radius: 18px;
  box-shadow: 0 32px 80px oklch(0% 0 0 / 0.20), 0 4px 16px oklch(0% 0 0 / 0.08);
  max-width: 720px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: aiModalIn 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.ai-consent-head {
  padding: 22px 26px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.ai-consent-head-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--bg);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ai-consent-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.ai-consent-subtitle { font-size: 14px; color: var(--muted); line-height: 1.5; }
.ai-consent-body {
  padding: 20px 26px 6px;
  overflow-y: auto;
  flex: 1;
}
.ai-consent-body h3 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  margin: 18px 0 9px;
}
.ai-consent-body h3:first-child { margin-top: 0; }
.ai-consent-body p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 10px;
}
.ai-consent-data-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 14px;
}
.ai-consent-data-list li {
  font-size: 14px;
  color: var(--fg);
  display: flex;
  gap: 9px;
  align-items: baseline;
  line-height: 1.45;
}
.ai-consent-data-list li::before {
  content: '';
  width: 5px;
  height: 5px;
  min-width: 5px;
  border-radius: 50%;
  background: var(--blue);
  margin-top: 6px;
}
.ai-consent-notice {
  background: oklch(98% 0.01 55);
  border: 1px solid oklch(88% 0.04 55);
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 14px;
  color: oklch(38% 0.06 55);
  line-height: 1.55;
  margin-bottom: 14px;
}
.ai-consent-notice strong { color: oklch(32% 0.08 55); }
.ai-consent-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
.ai-consent-meta-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.ai-consent-meta-label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin-bottom: 3px;
}
.ai-consent-meta-value { font-size: 14px; color: var(--fg); line-height: 1.4; }

.ai-consent-checks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 16px;
}
.ai-consent-check-row {
  display: flex;
  gap: 11px;
  align-items: flex-start;
}
.ai-consent-check-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  margin-top: 2px;
  accent-color: var(--blue);
  cursor: pointer;
}
.ai-consent-check-row label {
  font-size: 14px;
  color: var(--fg);
  line-height: 1.5;
  cursor: pointer;
}
.ai-consent-checks-error {
  font-size: 14px;
  color: var(--danger);
  margin-top: -6px;
  margin-bottom: 4px;
  display: none;
}
.ai-consent-checks-error.visible { display: block; }
.ai-consent-footer-note {
  font-size: 14px;
  color: var(--muted);
  padding: 14px 26px 14px;
  text-align: center;
  line-height: 1.5;
}
.ai-consent-footer {
  padding: 12px 26px 14px;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  background: var(--surface);
}
.ai-consent-footer .btn { justify-content: center; text-align: center; }

/* Préférences IA */
#ai-prefs-overlay {
  position: fixed;
  inset: 0;
  background: oklch(0% 0 0 / 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: var(--z-ai-prefs);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.ai-prefs-modal {
  background: var(--surface);
  border-radius: 18px;
  box-shadow: 0 24px 64px oklch(0% 0 0 / 0.18), 0 4px 12px oklch(0% 0 0 / 0.06);
  width: 100%;
  max-width: 460px;
  overflow: hidden;
  animation: aiModalIn 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.ai-prefs-head {
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ai-prefs-head-left { display: flex; align-items: center; gap: 10px; }
.ai-prefs-head-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ai-prefs-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.01em;
}
.ai-prefs-close {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  padding: 0;
}
.ai-prefs-close:hover { background: var(--bg); color: var(--fg); }
.ai-prefs-body { padding: 18px 20px 20px; }
.ai-prefs-intro {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 16px;
}
.ai-prefs-block {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.ai-prefs-block-head {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.ai-prefs-block-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 2px;
}
.ai-prefs-block-desc { font-size: 14px; color: var(--muted); line-height: 1.45; }
.ai-prefs-block-status {
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ai-prefs-status-info { display: flex; flex-direction: column; gap: 3px; }
.ai-prefs-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}
.ai-prefs-status-badge::before {
  content: '';
  width: 7px;
  height: 7px;
  min-width: 7px;
  border-radius: 50%;
  background: var(--border);
}
.ai-prefs-status-badge.enabled { color: oklch(38% 0.10 145); }
.ai-prefs-status-badge.enabled::before { background: oklch(52% 0.16 145); }
.ai-prefs-status-meta { font-size: 14px; color: var(--muted); line-height: 1.4; }

/* Confirmation désactivation IA */
#ai-disable-confirm-overlay {
  position: fixed;
  inset: 0;
  background: oklch(0% 0 0 / 0.30);
  z-index: var(--z-ai-disable);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.ai-disable-confirm-modal {
  background: var(--surface);
  border-radius: 16px;
  box-shadow: 0 20px 50px oklch(0% 0 0 / 0.20);
  max-width: 380px;
  width: 100%;
  padding: 22px 22px 20px;
  animation: aiModalIn 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.ai-disable-confirm-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.ai-disable-confirm-text {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 18px;
}
.ai-disable-confirm-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ai-disable-confirm-btns .btn { justify-content: center; }

/* ═══════════════════════════════════════════════════════════════════════════
   22. Modales génériques (.modal-overlay / .modal-card)
   ─────────────────────────────────────────────────────────────────────────
   Système réutilisable pour remplacer progressivement les modales actuelles
   qui ouvrent/ferment via element.style.display = 'flex' inline.
   Le toggle JS deviendra : el.classList.toggle('modal-open').
   On accepte aussi 'open' et 'visible' comme synonymes (safelist).
   Modifier en .modal-high pour les modales empilées (utilisateurs / plugins /
   thèmes / modal-confirm) qui passent au-dessus des autres.
   ═══════════════════════════════════════════════════════════════════════════ */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: oklch(0% 0 0 / 0.45);
  z-index: var(--z-modal);
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay.modal-open,
.modal-overlay.open,
.modal-overlay.visible {
  display: flex;
}
.modal-overlay.modal-high { z-index: var(--z-modal-high); }
.modal-overlay.modal-tinted-light { background: oklch(0% 0 0 / 0.30); }
.modal-overlay.modal-tinted-strong { background: oklch(0% 0 0 / 0.52); }

.modal-card {
  background: var(--surface);
  border-radius: 16px;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 64px oklch(0% 0 0 / 0.18), 0 4px 12px oklch(0% 0 0 / 0.06);
  animation: aiModalIn 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.modal-card-sm { max-width: 380px; }
.modal-card-lg { max-width: 720px; }

/* Bouton de fermeture × harmonisé (remplace 16 boutons inline onmouseover/out) */
.modal-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 0.12s, color 0.12s;
}
.modal-close-btn:hover { background: var(--bg); color: var(--fg); }
.modal-close-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

.modal-header {
  padding: 17px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}
.modal-header h3, .modal-header h2 {
  font-size: 17px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.01em;
}
.modal-body {
  padding: 19px 24px;
  overflow-y: auto;
  flex: 1;
  font-size: 15px;
  color: var(--fg);
  line-height: 1.55;
}
.modal-body p { color: var(--muted); }
.modal-body p + p { margin-top: 10px; }
.modal-footer {
  padding: 15px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   23. Animations
   ═══════════════════════════════════════════════════════════════════════════ */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes audit-fadein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes aiModalIn {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes beacon-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(232, 246, 255, 0.9); }
  65%  { box-shadow: 0 0 0 22px rgba(232, 246, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(232, 246, 255, 0); }
}

.audit-spinner { display: inline-block; animation: spin 1s linear infinite; transform-origin: center; }
.audit-rec { animation: audit-fadein 0.4s ease both; }
.audit-rec:nth-child(2) { animation-delay: .12s; }
.audit-rec:nth-child(3) { animation-delay: .24s; }

/* ═══════════════════════════════════════════════════════════════════════════
   24. Utilitaires
   ═══════════════════════════════════════════════════════════════════════════ */

/* Texte */
.text-muted-xs { font-size: 14px; color: var(--muted); line-height: 1.4; }
.text-muted-sm { font-size: 14px; color: var(--muted); line-height: 1.45; }
.text-strong-sm { font-size: 15px; color: var(--fg); font-weight: 600; }

/* Flexbox helpers */
.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Stacks (colonnes avec gap) */
.stack-sm { display: flex; flex-direction: column; gap: 6px; }
.stack-md { display: flex; flex-direction: column; gap: 12px; }

/* Lignes d'action / réglage */
.action-row {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-end;
}
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.setting-row:last-child { border-bottom: none; }

/* Actions de cellule dans une table */
.table-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
}

/* Tailles d'icône */
.icon-sm { width: 16px; height: 16px; flex-shrink: 0; }
.icon-md { width: 22px; height: 22px; flex-shrink: 0; }

/* Visibilité */
.hidden { display: none !important; }
.mobile-hidden { /* visible par défaut ; masqué uniquement sur mobile (cf. §25) */ }
.can-scroll { /* marqueur posé par JS sur .tab-bar-outer pour révéler le dégradé */ }

/* État "expanded" — réutilisé pour la bande métriques mobile */
.expanded { /* déclencheur géré côté composant (.sh-metrics.expanded) */ }

/* ═══════════════════════════════════════════════════════════════════════════
   25. Responsive
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tablette ≤960px ── */
@media (max-width: 960px) {
  .nav-inner,
  .site-header-inner,
  .tab-bar-inner,
  .content { padding-left: 20px; padding-right: 20px; }

  /* Indicateurs 4 → 2 col */
  .indicators { grid-template-columns: repeat(2, 1fr); }

  /* Métriques : wrap + séparateurs en haut */
  .sh-metrics { flex-wrap: wrap; }
  .ms-stat { min-width: 140px; }
  .ms-stat + .ms-stat {
    border-left: none;
    border-top: 1px solid var(--border);
  }

  /* Two-col empilé */
  .two-col { grid-template-columns: 1fr; }

  /* Rapport mensuel : 1 col */
  .report-grid { grid-template-columns: 1fr; }

  /* Niveaux sécurité : 4 → 2 col */
  #sec-levels { grid-template-columns: repeat(2, 1fr) !important; }

  /* Sous-onglets scrollables sans scrollbar visible */
  .sub-tab-bar { overflow-x: auto; scrollbar-width: none; }
  .sub-tab-bar::-webkit-scrollbar { display: none; }

  /* Dégradé droite quand la barre d'onglets déborde */
  .tab-bar-outer.can-scroll .tab-scroll-hint { display: flex; }

  /* Install grid (index.html) : 4 → 2 colonnes */
  .install-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Mobile ≤640px ── */
@media (max-width: 640px) {
  /* Navigation */
  .nav-inner { padding: 0 16px; }
  .nav-crumb, .nav-sep { display: none; }
  .nav-user span { display: none; }

  /* En-tête de site */
  .site-header { position: relative; top: auto; }
  .site-header-inner { padding: 10px 16px 0; }
  .sh-row1 { flex-wrap: wrap; gap: 10px; }
  .site-preview { width: 48px !important; height: 34px !important; }
  .site-identity { gap: 10px; }
  .site-title { font-size: 18px !important; }
  .site-header-actions {
    width: 100%;
    padding-bottom: 10px;
    flex-wrap: wrap;
  }
  .site-header-actions .btn { flex: 1; justify-content: center; }

  /* Barre d'onglets : sticky sous le topnav uniquement */
  .tab-bar-outer { top: 48px; }
  .tab-bar-outer.can-scroll .tab-scroll-hint { display: flex; }
  .tab-bar-inner { padding: 0 10px; gap: 0; }
  .tab-btn { padding: 11px 8px; font-size: 14px; gap: 4px; }

  /* Contenu */
  .content { padding: 14px 16px; }

  /* Métriques : toggle btn + repliable par défaut */
  .metrics-toggle-btn {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    font-size: 15px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
  }
  .metrics-toggle-btn .tog-chevron { transition: transform 0.2s; flex-shrink: 0; }
  .metrics-toggle-btn.open .tog-chevron { transform: rotate(180deg); }
  .sh-metrics { display: none; flex-direction: column; margin-bottom: 0; }
  .sh-metrics.expanded { display: flex; margin-bottom: 16px; }
  .ms-stat {
    border-left: none !important;
    border-top: none;
    border-bottom: 1px solid var(--border);
    padding: 10px 14px;
    min-width: 0;
  }
  .ms-stat:last-child { border-bottom: none; }

  /* Grilles d'indicateurs → 2 col */
  .indicators { grid-template-columns: 1fr 1fr; gap: 10px; }

  /* Score de santé */
  .health-top { flex-direction: column; padding: 18px; gap: 16px; }
  .health-items { padding: 16px 18px 20px; }

  /* Two-col */
  .two-col { grid-template-columns: 1fr; }

  /* Cards : padding réduit + scroll horizontal pour les tableaux */
  .card-header { padding: 14px 16px; }
  .card-body { padding: 14px 16px; }
  .card { margin-bottom: 16px; overflow-x: auto; }
  .data-table { min-width: 540px; }
  .data-table th, .data-table td { padding: 9px 14px; font-size: 15px; }

  /* Health table : actions sous le libellé */
  .health-table { min-width: 0 !important; overflow: visible !important; }
  .health-table tr { display: flex; flex-wrap: wrap; align-items: flex-start; }
  .health-table td { padding: 6px 8px; }
  .ht-icon { width: auto !important; padding-left: 8px !important; }
  .ht-body { flex: 1; min-width: 0; }
  .ht-action {
    width: 100%;
    padding: 4px 8px 10px 40px !important;
    text-align: left !important;
    white-space: nowrap;
  }
  .ht-action:empty { display: none !important; padding: 0 !important; }
  .health-table tr.h-crit { border-left: 3px solid #db3d3d; }
  .health-table tr.h-warn { border-left: 3px solid #F38421; }
  .health-table tr.h-ok   { border-left: 3px solid #008A4C; }
  .health-table tr.h-crit td:first-child,
  .health-table tr.h-warn td:first-child,
  .health-table tr.h-ok   td:first-child { border-left: none !important; }

  /* Masque générique mobile */
  .mobile-hidden { display: none !important; }

  /* Sous-onglets : select pleine largeur */
  .sub-tab-bar {
    margin: 0 0 16px;
    padding: 0;
    border-bottom: 1px solid var(--border);
  }
  .mobile-nav-select {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 38px 10px 13px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 13px center;
    background-size: 14px;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: var(--fg);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    margin-bottom: 10px;
  }

  /* Toutes les grilles inline → 1 col sur mobile */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  /* Exception : niveaux sécurité gardent 2 col */
  #sec-levels { grid-template-columns: 1fr 1fr !important; }

  /* Rapport mensuel */
  .report-card { padding: 16px; }
  .report-top { flex-direction: column; gap: 12px; }
  .report-grid { grid-template-columns: 1fr; }
  .report-footer { flex-direction: column; align-items: flex-start; gap: 12px; }

  /* Zone de danger */
  .danger-zone { flex-direction: column; align-items: flex-start; padding: 18px; gap: 14px; }

  /* Upsell LWS */
  .lws-upsell { flex-direction: column; align-items: flex-start; padding: 16px; gap: 12px; }
  .lws-upsell-btn { width: 100%; text-align: center; }

  /* Bannière HTTP 500 */
  .b500-head { flex-wrap: wrap; gap: 10px; }
  .b500-head > .btn { width: 100%; justify-content: center; }

  /* Quick actions */
  .qa-btn { padding: 10px 14px; }

  /* Migration */
  .mig-nav-btn { padding: 12px 14px; }

  /* Modales (anciennes IDs *-modal) : largeur max ajustée */
  [id$="-modal"] > div { max-width: calc(100vw - 32px) !important; width: calc(100vw - 32px) !important; }
  /* Système .modal-card : ajustement équivalent */
  .modal-card { max-width: calc(100vw - 32px); }

  /* Chat IA → pleine largeur en bas */
  .ai-wrap { right: 0; bottom: 0; left: 0; padding: 0 12px 12px; }
  .ai-bubble { position: fixed; bottom: 12px; right: 12px; }
  .ai-panel {
    width: 100%;
    right: 0;
    left: 0;
    bottom: 56px;
    border-radius: 16px 16px 0 0;
    height: 62vh;
  }

  /* Masquage de la connexion : wrap sur mobile */
  #hl-active > div:first-child { flex-wrap: wrap !important; gap: 8px; }
  #hl-active input[type="text"] { max-width: none !important; min-width: 120px; flex: 1 1 120px; }

  /* Texte intro des onglets */
  .tab-intro p { font-size: 15px; }

  /* Sauvegardes : cacher blocs méta + notice panel */
  .backup-meta-grid, .backup-lws-notice { display: none !important; }

  /* Snapshots : bouton à la ligne */
  .snap-card-hdr { flex-wrap: wrap !important; }
  .snap-card-hdr > button { align-self: flex-start; }

  /* Préproduction : badge invisible */
  .preprod-badge { display: none !important; }

  /* SOS causes : bouton à la ligne */
  .b500-row { flex-wrap: wrap; }
  .b500-row-text { flex: 1 0 100%; min-width: 0; }
  .b500-row > .btn { margin-left: 0; }

  /* SOS diag explain : description sous le titre */
  .diag-explain strong { display: block; margin-bottom: 2px; }

  /* Actions critiques sécurité : bouton sous la description */
  .critical-action-row { flex-direction: column; align-items: flex-start; }
  .critical-action-row .btn { align-self: flex-start; }

  /* Uniformisation des titres — 15px sur mobile */
  h3 { font-size: 15px !important; }
  .mkt-card h3 { font-size: 15px !important; }
  .sh h2 { font-size: 17px !important; }

  /* Extensions de performance — LWS Optimize : reflow mobile */
  #perf-optimize-row {
    display: grid !important;
    grid-template-columns: 48px 1fr;
    grid-template-areas:
      "logo name"
      "logo meta"
      "desc1 desc1"
      "desc2 desc2"
      "btn   btn";
    gap: 4px 12px;
    align-items: start;
  }
  #perf-optimize-row .perf-ext-logo   { grid-area: logo; margin-top: 2px; }
  #perf-optimize-row .perf-ext-info   { display: contents; }
  #perf-optimize-row .perf-ext-header { display: contents; }
  #perf-optimize-row .perf-ext-name   { grid-area: name; align-self: center; }
  #perf-optimize-row .perf-ext-meta   { grid-area: meta; display: flex !important; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
  #perf-optimize-row .perf-ext-desc1  { grid-area: desc1; margin-top: 6px; margin-bottom: 0 !important; }
  #perf-optimize-row .perf-ext-desc2  { grid-area: desc2; }
  #perf-optimize-row .perf-ext-btn    { grid-area: btn; justify-self: start; margin-top: 8px; }

  /* Après installation : retour au layout flex simple comme LWS Cleaner */
  #perf-optimize-row[data-installed] {
    display: flex !important;
    align-items: center;
    gap: 12px;
  }
  #perf-optimize-row[data-installed] .perf-ext-logo   { grid-area: unset; margin-top: 0; }
  #perf-optimize-row[data-installed] .perf-ext-info   { display: block !important; flex: 1; min-width: 0; }
  #perf-optimize-row[data-installed] .perf-ext-header { display: flex !important; }
  #perf-optimize-row[data-installed] .perf-ext-name   { grid-area: unset; }
  #perf-optimize-row[data-installed] .perf-ext-toggle { flex-shrink: 0; }

  /* Extensions de performance — LWS Cleaner : reflow mobile (pré-install) */
  #perf-cleaner-row {
    display: grid !important;
    grid-template-columns: 48px 1fr;
    grid-template-areas:
      "logo name"
      "meta meta"
      "desc1 desc1"
      "desc2 desc2"
      "btn  btn";
    gap: 4px 12px;
    align-items: start;
  }
  #perf-cleaner-row .perf-ext-logo   { grid-area: logo; margin-top: 2px; }
  #perf-cleaner-row .perf-ext-info   { display: contents; }
  #perf-cleaner-row .perf-ext-header { display: contents; }
  #perf-cleaner-row .perf-ext-name   { grid-area: name; align-self: center; }
  #perf-cleaner-row .perf-ext-meta   { grid-area: meta; display: flex !important; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; margin-bottom: 0 !important; }
  #perf-cleaner-row .perf-ext-desc1  { grid-area: desc1; margin-top: 6px; margin-bottom: 0 !important; }
  #perf-cleaner-row .perf-ext-desc2  { grid-area: desc2; }
  #perf-cleaner-row .perf-ext-btn    { grid-area: btn; justify-self: start; margin-top: 8px; }

  /* Après installation : flex simple */
  #perf-cleaner-row[data-installed] {
    display: flex !important;
    align-items: center;
    gap: 12px;
  }
  #perf-cleaner-row[data-installed] .perf-ext-logo   { grid-area: unset; margin-top: 0; }
  #perf-cleaner-row[data-installed] .perf-ext-info   { display: block !important; flex: 1; min-width: 0; }
  #perf-cleaner-row[data-installed] .perf-ext-header { display: flex !important; }
  #perf-cleaner-row[data-installed] .perf-ext-name   { grid-area: unset; }
  #perf-cleaner-row[data-installed] .perf-ext-toggle { flex-shrink: 0; }

  /* Informations de la base de données — 1 colonne sur mobile */
  .db-info-grid {
    grid-template-columns: 1fr !important;
  }
  .db-info-value {
    overflow-x: auto;
    white-space: nowrap;
  }

  /* ── index.html : layout ── */
  .main { padding: 20px 16px 60px; }
  .section { margin-bottom: 24px; }

  /* ── index.html : hero ── */
  .hero { margin-bottom: 24px; }
  .hero-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 12px;
    padding: 16px 18px;
    align-items: center;
  }
  .hero-logo { width: 36px; height: 36px; grid-column: 1; grid-row: 1; align-self: center; }
  .hero-text { display: contents; }
  .hero-text h1 { grid-column: 2; grid-row: 1; align-self: center; font-size: 19px; letter-spacing: -0.02em; margin-bottom: 0; }
  .hero-text p { grid-column: 1 / -1; grid-row: 2; font-size: 14px; margin-top: 10px; }

  /* ── index.html : en-tête de section ── */
  .sh { margin-bottom: 10px; }

  /* ── index.html : tableau → cards mobiles (grid) ── */
  .sites-table thead { display: none; }
  .sites-table,
  .sites-table tbody { display: block; }

  /* Chaque ligne = grid 2 zones : [nom | badge] puis [boutons pleine largeur] */
  .sites-table tr {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name badge"
      "btns btns";
    gap: 8px 8px;
    align-items: start;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
  }
  .sites-table tr:last-child { border-bottom: none; }
  .sites-table tr.is-staging { background: #FFF8F3; border-radius: 6px; padding: 12px 14px; }

  /* Masquer toutes les cellules par défaut */
  .sites-table td { display: none; border: none; padding: 0; }

  /* Nom du site */
  .sites-table td.site-name-cell {
    display: flex;
    grid-area: name;
    align-items: flex-start;
    padding: 0;
    min-width: 0;
  }
  .sn-title { flex-direction: column; align-items: flex-start; gap: 3px; font-size: 14px; word-break: break-word; margin-bottom: 0; }
  .sn-domain { font-size: 12px; }

  /* Badge PRÉPRODUCTION sous l'URL */
  .badge-staging { display: inline-flex; margin-top: 0; width: fit-content; }

  /* Badge Santé : colonne droite, aligné en haut */
  .sites-table td:nth-child(2) {
    display: block;
    grid-area: badge;
    padding: 1px 0 0;
    align-self: start;
  }

  /* Boutons : ligne pleine largeur */
  .sites-table td:last-child {
    display: block;
    grid-area: btns;
    white-space: normal !important;
    text-align: left !important;
    padding: 0;
  }
  .sites-table td:last-child > div {
    display: flex !important;
    justify-content: stretch !important;
    gap: 6px;
  }
  .sites-table .btn-sm { flex: 1; justify-content: center; }

  /* ── index.html : bandeau "Détecter mes sites" ── */
  .detect-banner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 16px !important;
    margin-bottom: 24px !important;
  }
  .detect-banner .btn { width: 100%; justify-content: center; }

  /* ── index.html : install grid ── */
  .install-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .install-card { padding: 18px 14px; }
  .install-icon { font-size: 28px; }
  .install-icon svg { width: 32px !important; height: 32px !important; }
  .install-title { font-size: 16px; color: var(--fg); }
  .install-desc { font-size: 13px; }

  /* ── index.html : bannière "Site clé en main" ── */
  .turnkey-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 20px 16px !important;
    gap: 16px !important;
  }
  .turnkey-inner > button { width: 100%; text-align: center; justify-content: center; }
}

/* ── Très petit écran ≤400px ── */
@media (max-width: 400px) {
  .install-grid { grid-template-columns: 1fr; }
  .hero-text h1 { font-size: 17px; }
  .indicators { grid-template-columns: 1fr; }
  .ns-a, .ns-b, .ns-c, .ns-d, .ns-e {
    width: 30px !important;
    height: 30px !important;
    font-size: 14px !important;
  }
  .ns-active {
    width: 38px !important;
    height: 38px !important;
    font-size: 17px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Safelist (rappel pour le refactor)
   ─────────────────────────────────────────────────────────────────────────
   Classes manipulées dynamiquement par le JS — NE JAMAIS RENOMMER :
   active, open, visible, hidden, current, user, bot, ok, warn, danger,
   tab-disabled, h-ok, h-warn, h-crit, g-a, g-b, g-c, g-d, g-e,
   mig-active, ns-active, expanded, mobile-hidden, can-scroll, btn-beacon,
   ai-bubble-disabled
   ═══════════════════════════════════════════════════════════════════════════ */