/* ============================================================
   MM Tools — Design System "MERIDIAN" v4.0
   2026 Edition
   ─── Outfit × JetBrains Mono
   ─── Charcoal Navbar × White Surface × Indigo Accent
   ============================================================ */

/* ==========================================================================
   BOOTSTRAP ROOT OVERRIDES
   ========================================================================== */
:root {
  /* Bootstrap theme tokens */
  --bs-primary:             #4f46e5;
  --bs-primary-rgb:         79, 70, 229;
  --bs-body-font-family:    'Outfit', system-ui, -apple-system, sans-serif;
  --bs-body-font-size:      .875rem;
  --bs-body-color:          #18181b;
  --bs-body-bg:             #f4f4f7;
  --bs-border-color:        #e4e4e7;
  --bs-border-radius:       .5rem;
  --bs-border-radius-sm:    .375rem;
  --bs-border-radius-lg:    .75rem;
  --bs-card-border-color:   #e4e4e7;
  --bs-card-bg:             #ffffff;
  --bs-card-cap-bg:         #fafafa;
  --bs-link-color:          #4f46e5;
  --bs-link-hover-color:    #3730a3;
  --bs-table-hover-bg:      rgba(79, 70, 229, .04);
  --bs-table-striped-bg:    rgba(0, 0, 0, .015);
  --bs-accordion-btn-color: #18181b;
  --bs-accordion-border-color: #e4e4e7;
  --bs-nav-tabs-border-color: #e4e4e7;
  --bs-nav-tabs-link-active-color: #4f46e5;
  --bs-nav-tabs-link-active-bg: transparent;
  --bs-nav-tabs-link-active-border-color: transparent transparent #4f46e5;
  --bs-dropdown-bg: #ffffff;
  --bs-dropdown-border-color: #e4e4e7;
  --bs-modal-bg: #ffffff;
  --bs-modal-border-color: #e4e4e7;

  /* MM design tokens */
  --mm-bg:          #f4f4f7;
  --mm-surface:     #ffffff;
  --mm-border:      #e4e4e7;
  --mm-text:        #18181b;
  --mm-muted:       #71717a;
  --mm-muted-2:     #a1a1aa;
  --mm-accent:      #4f46e5;
  --mm-accent-dim:  rgba(79, 70, 229, .08);
  --mm-accent-rgb:  79, 70, 229;

  --mm-success:     #16a34a;
  --mm-warning:     #d97706;
  --mm-danger:      #dc2626;

  --mm-nav-bg:      #0f0f12;
  --mm-nav-border:  #1e1e24;
  --mm-nav-text:    #9ca3af;
  --mm-nav-active:  #f4f4f5;

  --font-body: 'Outfit', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --radius-sm: .375rem;
  --radius-md: .5rem;
  --radius-lg: .75rem;
  --radius-xl: 1rem;

  --shadow-xs: 0 1px 2px rgba(0,0,0,.06);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,.1), 0 1px 4px rgba(0,0,0,.06);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.07);

  --navbar-h: 56px;
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: .875rem;
  line-height: 1.6;
  background: var(--mm-bg);
  color: var(--mm-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-bottom: 4rem;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d4d4d8; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #a1a1aa; }

::selection { background: rgba(79,70,229,.15); color: var(--mm-text); }

/* Blocs de code sombres (snippets GTM) : couleurs + selection lisibles
   independamment du theme. Sans ca, ::selection force color:var(--mm-text)
   sombre -> selection invisible sur fond sombre. */
.snippet-dark { background: #18181b !important; color: #e4e4e7 !important; }
.snippet-dark code { background: transparent !important; color: inherit !important; }
.snippet-dark ::selection,
.snippet-dark::selection { background: rgba(129,140,248,.5); color: #fff; }

/* Cartes de filtres CRM (barre projet/période + carte Statut/Source/Recherche) :
   overflow visible (les dropdowns ne doivent pas être rognés par le
   overflow:hidden des .card) + menus au-dessus des cartes voisines.
   PAS de z-index sur la carte elle-même : un z-index (ex-valeur 5) crée un
   contexte d'empilement qui passe la carte ENTIÈRE au-dessus des dropdowns du
   tableau de leads (menu Statut ouvert vers le haut = masqué). Les menus
   portent leur propre z-index, résolu dans le contexte racine — suffisant. */
.crm-filters { overflow: visible !important; position: relative; }
.crm-filters .dropdown-menu { z-index: 1060; }

/* Barre de filtres Google Ads : même besoin que .crm-filters — la carte force
   overflow:hidden, ce qui rognait le menu déroulant « Période ». */
.gads-filter-bar { overflow: visible !important; position: relative; z-index: 5; }
.gads-filter-bar .dropdown-menu { z-index: 1060; }

h1,h2,h3,h4,h5,h6 { font-weight: 600; letter-spacing: -.02em; }
h4 { font-size: 1.1rem; }
h5 { font-size: 1rem; }
h6 { font-size: .875rem; }

a { color: var(--mm-accent); text-decoration: none; }
a:hover { color: #3730a3; }

code, .font-mono, [class*="mono"] {
  font-family: var(--font-mono);
  font-size: .8em;
}

.text-muted { color: var(--mm-muted) !important; }

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.navbar {
  background: var(--mm-nav-bg) !important;
  border-bottom: 1px solid var(--mm-nav-border);
  min-height: var(--navbar-h);
  padding: 0 1.25rem;
  position: sticky;
  top: 0;
  z-index: 1030;
  backdrop-filter: blur(12px);
}

/* Menu mobile : fond sombre, au-dessus du contenu */
@media (max-width: 991px) {
  .navbar-collapse {
    background: var(--mm-nav-bg);
    border-top: 1px solid var(--mm-nav-border);
    padding: .5rem 0 .75rem;
    margin: 0 -1.25rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

.navbar-brand {
  font-size: .95rem;
  font-weight: 700;
  color: #f4f4f5 !important;
  letter-spacing: -.03em;
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-right: 2rem;
}
/* Logo Monsieur Motclé Lab (PNG détourés 1x/2x/3x, générés depuis
   docs/brand/monsieur-motcle-lab.png par scripts/build_logo_assets.php — les
   hauteurs ci-dessous doivent rester celles du script). La barre est sombre
   dans les deux thèmes : toujours la version inverse.
   Zone brand de hauteur FIXE (55 px = barre 56 px moins sa bordure) : sans
   elle, à l'ouverture du menu mobile, la ligne du haut se réduisait à la
   hauteur du logo et logo + bouton remontaient coller au bord de l'écran.
   height seule + width:auto : le ratio de l'image est toujours respecté. */
.navbar-brand:has(.navbar-logo) { height: 55px; padding-top: 0; padding-bottom: 0; }
.navbar-logo { display: block; height: 30px; width: auto; }
.login-logo { display: block; height: 64px; width: auto; margin: 0 auto; }

.navbar-nav .nav-link {
  color: var(--mm-nav-text) !important;
  font-size: .8125rem;
  font-weight: 500;
  padding: .25rem .7rem !important;
  border-radius: var(--radius-sm);
  transition: color .15s, background .15s;
  display: flex;
  align-items: center;
  gap: .35rem;
}
.navbar-nav .nav-link .bi { font-size: .8rem; }
.navbar-nav .nav-link:hover {
  color: var(--mm-nav-active) !important;
  background: rgba(255,255,255,.06);
}
.navbar-nav .nav-link.active {
  color: var(--mm-nav-active) !important;
  background: rgba(255,255,255,.09);
}

/* Dropdown utilisateur */
.navbar .dropdown-menu {
  background: #1c1c22;
  border: 1px solid #2e2e38;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-width: 200px;
  padding: .375rem;
}
.navbar .dropdown-item {
  color: #d4d4d8;
  font-size: .8125rem;
  border-radius: var(--radius-sm);
  padding: .45rem .75rem;
  transition: background .12s, color .12s;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.navbar .dropdown-item:hover { background: rgba(255,255,255,.07); color: #f4f4f5; }
.navbar .dropdown-item-text { color: #71717a; font-size: .75rem; padding: .45rem .75rem; }
.navbar .dropdown-divider { border-color: #2e2e38; margin: .25rem 0; }

/* Badge admin dans la navbar */
.navbar .badge.bg-warning { background: #854d0e !important; color: #fef3c7 !important; font-size: .65rem; font-weight: 600; }

/* --------------------------------------------------------------------------
   Navbar mobile — accordéon inline (cf. spec 2026-04-22-navbar-mobile-ux)
   Déploie les dropdowns dans le flux du collapse au lieu du popover flottant,
   agrandit les cibles tactiles à 44px, anime le caret.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  /* Dropdown inline : intégré au flux du collapse */
  .navbar .dropdown-menu {
    position: static;
    float: none;
    width: 100%;
    min-width: 0;
    margin: .15rem 0 .35rem;
    padding: .15rem 0 .15rem 1rem;
    background: transparent;
    border: 0;
    border-left: 2px solid rgba(255,255,255,.1);
    border-radius: 0;
    box-shadow: none;
  }

  /* Annule dropdown-menu-end (user) qui forçait right:0 */
  .navbar .dropdown-menu-end { text-align: left; }

  /* Cibles tactiles 44px (norme iOS/Android) */
  .navbar-nav .nav-link {
    min-height: 44px;
    padding: .65rem .75rem !important;
  }
  .navbar .dropdown-item {
    min-height: 44px;
    padding: .65rem .75rem;
    display: flex;
    align-items: center;
  }
  .navbar .dropdown-item-text { padding: .5rem .75rem; }

  /* Caret animé : signale l'état ouvert/fermé */
  .navbar-nav .dropdown-toggle::after {
    margin-left: auto;
    transition: transform .2s ease;
  }
  .navbar-nav .dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
  }

  /* Espacement entre items top-level pour respiration */
  .navbar-nav > .nav-item { margin: .1rem 0; }

  /* Scrollable si le menu user admin déborde en hauteur */
  .navbar-collapse { max-height: calc(100vh - var(--navbar-h)); overflow-y: auto; }
}

/* ==========================================================================
   MAIN CONTENT
   ========================================================================== */
main.container-fluid {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.75rem 1.5rem;
}

/* ==========================================================================
   FLASH MESSAGES / ALERTS
   ========================================================================== */
.alert {
  border: none;
  border-radius: var(--radius-md);
  padding: .875rem 1.125rem;
  font-size: .8125rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: .5rem;
  border-left: 3px solid transparent;
}
.alert-success  { background: #f0fdf4; border-left-color: #16a34a; color: #14532d; }
.alert-danger   { background: #fef2f2; border-left-color: #dc2626; color: #7f1d1d; }
.alert-warning  { background: #fffbeb; border-left-color: #d97706; color: #78350f; }
.alert-info     { background: #eff6ff; border-left-color: #2563eb; color: #1e3a8a; }
.btn-close { filter: invert(0); opacity: .5; }
.btn-close:hover { opacity: 1; }

/* ==========================================================================
   CARDS
   ========================================================================== */
.card {
  background: var(--mm-surface);
  border: 1px solid var(--mm-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s;
  overflow: hidden;
}
.card:hover { box-shadow: var(--shadow-md); }

.card-header {
  background: #fafafa;
  border-bottom: 1px solid var(--mm-border);
  padding: .75rem 1.125rem;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--mm-text);
  display: flex;
  align-items: center;
}
.card-header .bi { color: var(--mm-muted); margin-right: .375rem; }
/* Dans un bouton, l'icône garde la couleur du bouton et reste centrée (icône seule : crayon, corbeille). */
.card-header .btn .bi { color: inherit; margin-right: 0; }
.card-header strong { font-weight: 600; }

.card-body { padding: 1.125rem; }

/* ==========================================================================
   TABLES
   ========================================================================== */
.table {
  font-size: .8125rem;
  color: var(--mm-text);
  margin-bottom: 0;
  --bs-table-bg: transparent;
}
.table > :not(caption) > * > * { padding: .625rem .875rem; vertical-align: middle; border-bottom-color: #f0f0f3; }
.table thead > * > * {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--mm-muted);
  background: #fafafa;
  border-bottom: 1px solid var(--mm-border) !important;
  padding: .5rem .875rem;
}
.table tbody tr { transition: background .1s; }
.table-hover tbody tr:hover > td { background: rgba(79,70,229,.04) !important; }
/* Boutons filtre pill (tab_pages) */
.filter-pill {
  display: inline-flex;
  align-items: center;
  padding: .15rem .45rem;
  font-size: .74rem;
  font-weight: 500;
  line-height: 1.4;
  border-radius: 999px;
  border: 1.5px solid;
  background: transparent;
  text-decoration: none;
  transition: opacity .15s;
  white-space: nowrap;
}
.filter-pill:hover { opacity: .75; text-decoration: none; }
.filter-pill.fp-active { color: #fff !important; border-color: transparent !important; }

/* Checkboxes modernes dans les tableaux */
.mm-check {
  width: 1rem;
  height: 1rem;
  border: 1.5px solid #c4c4cf;
  border-radius: .25rem;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
  flex-shrink: 0;
}
.mm-check:hover { border-color: var(--mm-accent); }
.mm-check:focus { box-shadow: 0 0 0 3px rgba(79,70,229,.15); outline: none; }
.mm-check:checked {
  background-color: var(--mm-accent);
  border-color: var(--mm-accent);
}
.mm-check:indeterminate {
  background-color: var(--mm-accent);
  border-color: var(--mm-accent);
}

.bg-5xx { background-color: #7f1d1d !important; color: #fff !important; }

tr.page-row-alt > td { background-color: #f0f4ff; }
#pagesTable > tbody > tr.page-row:not(.page-row-alt):not(.table-danger):not(.table-warning) > td { background-color: #fafafa; }

/* Row tints from Analyse Technique/Contenu */
.table-success > td,
.table-success    { background: #f0fdf4 !important; }
.table-warning > td,
.table-warning    { background: #fffbeb !important; }
.table-danger > td,
.table-danger     { background: #fef2f2 !important; }
.table-light > td,
.table-light.table-light { background: #fafafa !important; }

/* ==========================================================================
   BADGES
   ========================================================================== */
.badge {
  font-size: .7rem;
  font-weight: 600;
  padding: .3em .65em;
  border-radius: .35rem;
  letter-spacing: .01em;
  font-family: var(--font-body);
}
.bg-success    { background-color: #16a34a !important; }
.bg-danger     { background-color: #dc2626 !important; }
.bg-warning    { background-color: #d97706 !important; color: #fff !important; }
.bg-secondary  { background-color: #71717a !important; }
.bg-primary    { background-color: var(--mm-accent) !important; }
.bg-info       { background-color: #2563eb !important; }
.bg-light      { background-color: #f4f4f5 !important; color: #52525b !important; }
.bg-dark       { background-color: #18181b !important; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  font-size: .8125rem;
  font-weight: 500;
  border-radius: var(--radius-md);
  padding: .475rem 1rem;
  transition: all .15s;
  letter-spacing: -.01em;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  border: 1px solid transparent;
}
.btn-sm {
  font-size: .75rem;
  padding: .3rem .7rem;
  border-radius: var(--radius-sm);
}
.btn-lg { font-size: .9375rem; padding: .65rem 1.375rem; }

/* Primary */
.btn-primary {
  background: var(--mm-accent);
  border-color: var(--mm-accent);
  color: #fff;
}
.btn-primary:hover { background: #3730a3; border-color: #3730a3; color: #fff; box-shadow: 0 2px 8px rgba(79,70,229,.35); }

/* Outline primary */
.btn-outline-primary {
  color: var(--mm-accent);
  border-color: #c7d2fe;
  background: transparent;
}
.btn-outline-primary:hover { background: var(--mm-accent-dim); color: var(--mm-accent); border-color: var(--mm-accent); }

/* Secondary */
.btn-secondary { background: #f4f4f5; border-color: var(--mm-border); color: #3f3f46; }
.btn-secondary:hover { background: #e4e4e7; color: #18181b; }

/* Outline secondary — bordure et texte assez marqués pour rester lisibles sur
   fond blanc (boutons « Désactivé » de projects.php : la bordure #e4e4e7 se
   fondait dans la ligne de table). */
.btn-outline-secondary {
  color: #3f3f46;
  border-color: #a1a1aa;
  background: transparent;
}
.btn-outline-secondary:hover { background: #f4f4f5; color: var(--mm-text); border-color: #71717a; }

/* Success */
.btn-success { background: #16a34a; border-color: #16a34a; color: #fff; }
.btn-success:hover { background: #15803d; border-color: #15803d; color: #fff; }

/* Outline success (bouton « Rapport Google Ads » de projects.php, entre autres) :
   sans cet override, retombait sur le Bootstrap brut — bordure quasi invisible
   au repos et remplissage vert vif + texte blanc au hover, en rupture avec les
   hovers doux des autres variantes outline. */
.btn-outline-success {
  color: #15803d;
  border-color: #bbf7d0;
  background: transparent;
}
.btn-outline-success:hover { background: #f0fdf4; color: #15803d; border-color: #86efac; }

/* Danger */
.btn-danger { background: #dc2626; border-color: #dc2626; color: #fff; }
.btn-danger:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; }

/* Outline danger */
.btn-outline-danger { color: #dc2626; border-color: #fecaca; }
.btn-outline-danger:hover { background: #fef2f2; color: #dc2626; border-color: #fca5a5; }

/* Info */
.btn-info { background: #0891b2; border-color: #0891b2; color: #fff; }
.btn-info:hover { background: #0e7490; border-color: #0e7490; color: #fff; }

/* Outline info */
.btn-outline-info {
  color: #0e7490;
  border-color: #a5f3fc;
  background: transparent;
}
.btn-outline-info:hover { background: #ecfeff; color: #0e7490; border-color: #67e8f9; }

/* Warning */
.btn-warning { background: var(--mm-warning); border-color: var(--mm-warning); color: #fff; }
.btn-warning:hover { background: #b45309; border-color: #b45309; color: #fff; }

/* Outline warning */
.btn-outline-warning {
  color: #b45309;
  border-color: #fde68a;
  background: transparent;
}
.btn-outline-warning:hover { background: #fffbeb; color: #b45309; border-color: #fcd34d; }

/* ==========================================================================
   FORMS
   ========================================================================== */
.form-control, .form-select {
  font-family: var(--font-body);
  font-size: .8125rem;
  border: 1px solid #d1d5db;
  border-radius: var(--radius-md);
  color: var(--mm-text);
  background-color: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.form-control { padding: .5rem .875rem; }
.form-select  { padding-top: .5rem; padding-bottom: .5rem; padding-left: .875rem; }
.form-control:focus, .form-select:focus {
  border-color: var(--mm-accent);
  box-shadow: 0 0 0 3px rgba(79,70,229,.12);
  outline: none;
}
.form-control::placeholder { color: var(--mm-muted-2); }
.form-label { font-size: .8125rem; font-weight: 500; color: #374151; margin-bottom: .375rem; }
.form-text  { font-size: .75rem; color: var(--mm-muted); }

.input-group .form-control { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.input-group .btn { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.input-group .btn + .btn { border-radius: var(--radius-md); margin-left: 2px; }

/* ==========================================================================
   TABS (nav-tabs)
   ========================================================================== */
.nav-tabs {
  border-bottom: 1px solid var(--mm-border);
  gap: .125rem;
}
.nav-tabs .nav-link {
  font-size: .8rem;
  font-weight: 500;
  color: var(--mm-muted);
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: .625rem .875rem;
  margin-bottom: -1px;
  transition: color .15s;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.nav-tabs .nav-link:hover { color: var(--mm-text); background: transparent; }
.nav-tabs .nav-link.active {
  color: var(--mm-accent);
  border-bottom-color: var(--mm-accent);
  background: transparent;
  font-weight: 600;
}
.nav-tabs .nav-link .badge { font-size: .65rem; }

/* ==========================================================================
   ACCORDION
   ========================================================================== */
.accordion { display: flex; flex-direction: column; gap: .375rem; }

.accordion-item {
  border: 1px solid var(--mm-border);
  border-radius: var(--radius-md) !important;
  background: var(--mm-surface);
  overflow: visible;
}
.accordion-button {
  font-size: .8125rem;
  font-weight: 500;
  color: var(--mm-text);
  background: #fafafa;
  padding: .7rem 2rem .7rem 1rem;
  border: none;
  gap: .5rem;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  position: relative;
}
.accordion-button::after {
  position: absolute;
  right: .75rem;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0;
  width: 1rem;
  height: 1rem;
  background-size: 1rem 1rem;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2371717a'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  flex-shrink: 0;
}
.accordion-button:not(.collapsed) {
  color: var(--mm-accent);
  background: rgba(79,70,229,.04);
  box-shadow: none;
}
.accordion-button:not(.collapsed)::after {
  transform: translateY(-50%) rotate(-180deg);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%234f46e5'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.accordion-button:focus { box-shadow: none; }
.accordion-body { padding: .875rem 1rem; background: var(--mm-surface); overflow-x: auto; }
/* Les accordéons « flush » servent à empiler des listes/tableaux pleine largeur
   (maillage interne) : eux seuls collent au bord. Un accordéon normal garde son
   padding, sinon un formulaire dedans touche les bords (constaté sur brief.php). */
.accordion-flush .accordion-body { padding: 0; }

/* ==========================================================================
   BREADCRUMB
   ========================================================================== */
.breadcrumb { font-size: .75rem; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--mm-muted-2); }
.breadcrumb-item a { color: var(--mm-muted); }
.breadcrumb-item a:hover { color: var(--mm-accent); }
.breadcrumb-item.active { color: var(--mm-muted); }

/* ==========================================================================
   DROPDOWN (content areas)
   ========================================================================== */
.dropdown-menu {
  border: 1px solid var(--mm-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: .375rem;
  background: var(--mm-surface);
  font-size: .8125rem;
}
.dropdown-item { border-radius: var(--radius-sm); padding: .45rem .75rem; color: var(--mm-text); display: flex; align-items: center; gap: .5rem; }
.dropdown-item:hover { background: var(--mm-accent-dim); color: var(--mm-accent); }
.dropdown-divider { border-color: var(--mm-border); margin: .25rem 0; }

/* ==========================================================================
   MODAL
   ========================================================================== */
.modal-content {
  border: 1px solid var(--mm-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  background: var(--mm-surface);
}
.modal-header {
  border-bottom: 1px solid var(--mm-border);
  padding: 1rem 1.25rem;
}
.modal-title { font-size: .9375rem; font-weight: 600; }
.modal-body { padding: 1.25rem; }
.modal-footer { border-top: 1px solid var(--mm-border); padding: .875rem 1.25rem; }

/* ==========================================================================
   PROGRESS BARS
   ========================================================================== */
.progress {
  background: #e4e4e7;
  border-radius: 99px;
  height: 6px;
}
.progress-bar {
  border-radius: 99px;
  transition: width .5s ease;
}
.progress-bar.bg-success  { background: #16a34a !important; }
.progress-bar.bg-warning  { background: #d97706 !important; }
.progress-bar.bg-danger   { background: #dc2626 !important; }

/* ==========================================================================
   PAGINATION
   ========================================================================== */
.pagination { gap: .25rem; }
.page-link {
  border: 1px solid var(--mm-border);
  color: var(--mm-muted);
  border-radius: var(--radius-sm);
  font-size: .8rem;
  padding: .35rem .65rem;
  transition: all .15s;
}
.page-link:hover { background: var(--mm-accent-dim); color: var(--mm-accent); border-color: var(--mm-accent); }
.page-item.active .page-link { background: var(--mm-accent); border-color: var(--mm-accent); color: #fff; }
.page-item.disabled .page-link { opacity: .4; }

/* ==========================================================================
   TOOLTIPS
   ========================================================================== */
.tooltip-inner { font-size: .75rem; border-radius: var(--radius-sm); }

/* ==========================================================================
   STAT CARDS (vue d'ensemble)
   ========================================================================== */
.stat-val {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  font-family: var(--font-mono);
}
.stat-label { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--mm-muted); }

/* ==========================================================================
   SCORE DISPLAY
   ========================================================================== */
#score-value {
  font-family: var(--font-mono);
  font-size: 3.5rem !important;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.04em;
}
.text-success { color: #16a34a !important; }
.text-warning { color: #d97706 !important; }
.text-danger  { color: #dc2626 !important; }

/* ==========================================================================
   HISTORIQUE CRAWLS (score block)
   ========================================================================== */
.hist-crawl-row {
  border-radius: var(--radius-sm);
  transition: background .12s;
}
.hist-crawl-row:hover { background: rgba(79,70,229,.05) !important; }
.hist-crawl-row.active-hist { background: rgba(79,70,229,.08) !important; }
.hover-bg:hover { background: rgba(79,70,229,.04) !important; }

/* ==========================================================================
   ISSUE FILTER ROWS (Analyse Technique / Contenu)
   ========================================================================== */
.issue-filter-row { cursor: pointer; transition: background .12s; }
.issue-filter-row:hover td { background: rgba(79,70,229,.06) !important; }

/* ==========================================================================
   PROJECT CARDS (dashboard)
   ========================================================================== */
.project-card {
  transition: transform .2s, box-shadow .2s;
}
.project-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md) !important;
}

/* ==========================================================================
   CRAWL LOG
   ========================================================================== */
#crawl-log {
  font-family: var(--font-mono);
  font-size: .75rem;
  background: #09090b;
  color: #a1a1aa;
  border: none;
  border-radius: var(--radius-lg);
  padding: 1rem;
  min-height: 200px;
  max-height: 340px;
  overflow-y: auto;
}
#crawl-log .log-ok     { color: #4ade80; }
#crawl-log .log-warn   { color: #fbbf24; }
#crawl-log .log-err    { color: #f87171; }
#crawl-log .log-info   { color: #60a5fa; }
#crawl-log .log-muted  { color: #52525b; }

/* ==========================================================================
   DELIVERABLE CONTENT
   ========================================================================== */
.deliverable-content {
  font-size: .875rem;
  line-height: 1.75;
  color: var(--mm-text);
}
.deliverable-content h1 { font-size: 1.375rem; }
.deliverable-content h2 { font-size: 1.1rem; border-bottom: 1px solid var(--mm-border); padding-bottom: .5rem; margin-top: 1.5rem; }
.deliverable-content h3 { font-size: .9375rem; color: var(--mm-accent); }
.deliverable-content code { background: #f0f0f5; padding: .15em .4em; border-radius: .25rem; font-family: var(--font-mono); font-size: .8em; color: var(--mm-text); }
.deliverable-content pre  { background: #09090b; color: #a1a1aa; padding: 1rem; border-radius: var(--radius-md); overflow-x: auto; }
.deliverable-content ul, .deliverable-content ol { padding-left: 1.5rem; }
.deliverable-content li { margin-bottom: .25rem; }

/* ==========================================================================
   TABLE-LIGHT header override
   ========================================================================== */
.table thead.table-light th,
thead.table-light th {
  background: #fafafa !important;
  color: var(--mm-muted) !important;
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--mm-border) !important;
  padding: .5rem .875rem;
}

/* ==========================================================================
   MISC UTILITIES
   ========================================================================== */
hr { border-color: var(--mm-border); opacity: 1; }
.border   { border-color: var(--mm-border) !important; }
.border-top    { border-top-color:    var(--mm-border) !important; }
.border-bottom { border-bottom-color: var(--mm-border) !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }

/* Spinner */
.spinner-border { border-width: 2px; }

/* Code inline */
code { color: var(--mm-accent); background: rgba(79,70,229,.08); padding: .1em .4em; border-radius: .25rem; font-family: var(--font-mono); font-size: .8em; }

/* Small */
small, .small { font-size: .8rem; }

/* Links dans les tables */
.table a { color: var(--mm-text); font-weight: 500; }
.table a:hover { color: var(--mm-accent); }
.table a .bi-box-arrow-up-right { color: var(--mm-muted); }

/* bg-light dans les cartes (ancre Âge domaine) */
span.badge.bg-light { background: #f4f4f5 !important; color: #52525b !important; border: 1px solid var(--mm-border) !important; }

/* Textarea */
textarea.form-control { font-family: var(--font-body); }

/* Select */
select.form-select option { background: #fff; color: var(--mm-text); }

/* Disabled accordion button */
.accordion-button:disabled {
  opacity: 1;
  background: #fafafa;
  color: var(--mm-muted);
}

/* ==========================================================================
   PAGE SPÉCIFIQUE : login
   ========================================================================== */
body.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #f4f4f7;
  padding: 0;
}
.login-card {
  width: 380px;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}
.login-brand {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--mm-text);
  text-align: center;
  margin-bottom: 1.5rem;
}
.login-brand .bi { color: var(--mm-accent); }
.login-brand span { color: var(--mm-accent); }

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* fill-mode `backwards` et surtout PAS `both`/`forwards` : un fill qui persiste
   après l'animation garde un transform/opacity animé appliqué à vie -> chaque
   carte devient un stacking context permanent, et tout dropdown ouvert depuis
   une carte passe SOUS les cartes suivantes du DOM (menu Période de crm/leads
   masqué par les tuiles KPI). `backwards` couvre le pré-départ (pas de flash)
   et relâche l'effet une fois l'animation finie — visuel identique. */
.card,
.accordion-item,
.alert {
  animation: fadeInUp .2s ease backwards;
}
.row .card:nth-child(2) { animation-delay: .04s; }
.row .card:nth-child(3) { animation-delay: .08s; }
.row .card:nth-child(4) { animation-delay: .12s; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
  main.container-fluid { padding: 1rem; }
  .stat-val { font-size: 1.75rem; }
  #score-value { font-size: 2.5rem !important; }
}

/* ==========================================================================
   PRINT
   ========================================================================== */
/* Google tool buttons (PageSpeed, Rich Results) */
.btn-tool-google {
  transition: filter .15s ease, transform .15s ease;
}
.btn-tool-google:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
  color: #fff !important;
}

@media print {
  .navbar, .btn, .alert, footer { display: none !important; }
  .card { box-shadow: none !important; border: 1px solid #ccc !important; }
  body { background: #fff !important; }
}

/* ==========================================================================
   DARK MODE
   ========================================================================== */
[data-theme="dark"] {
  --bs-body-color:          #e4e4e7;
  --bs-body-bg:             #09090b;
  --bs-border-color:        #27272a;
  /* Variables Bootstrap 5.3 consommées par les utilities modernes (bg-body-tertiary,
     text-body-secondary…) : alignées sur la palette zinc maison. data-bs-theme="dark"
     est posé par app.js en même temps que data-theme — ces valeurs priment sur les
     tons slate par défaut du dark Bootstrap pour rester cohérent. */
  --bs-tertiary-bg:         #1c1c22;
  --bs-secondary-bg:        #27272a;
  --bs-emphasis-color:      #f4f4f5;
  --bs-secondary-color:     rgba(228, 228, 231, .75);
  --bs-tertiary-color:      rgba(228, 228, 231, .5);
  --bs-heading-color:       #f4f4f5;
  --bs-card-border-color:   #27272a;
  --bs-card-bg:             #18181b;
  --bs-card-cap-bg:         #1c1c22;
  --bs-link-color:          #818cf8;
  --bs-link-hover-color:    #a5b4fc;
  --bs-table-hover-bg:      rgba(129, 140, 248, .06);
  --bs-table-striped-bg:    rgba(255, 255, 255, .02);
  --bs-dropdown-bg:         #1c1c22;
  --bs-dropdown-border-color: #27272a;
  --bs-modal-bg:            #18181b;
  --bs-modal-border-color:  #27272a;
  --bs-nav-tabs-border-color: #27272a;
  --bs-nav-tabs-link-active-color: #818cf8;
  --bs-nav-tabs-link-active-border-color: transparent transparent #818cf8;

  --mm-bg:         #09090b;
  --mm-surface:    #18181b;
  --mm-border:     #27272a;
  --mm-text:       #e4e4e7;
  --mm-muted:      #a1a1aa;
  --mm-muted-2:    #71717a;
  --mm-accent:     #818cf8;
  --mm-accent-dim: rgba(129, 140, 248, .1);
  --mm-accent-rgb: 129, 140, 248;

  --shadow-xs: 0 1px 2px rgba(0,0,0,.3);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.2);
  --shadow-md: 0 4px 16px rgba(0,0,0,.4), 0 1px 4px rgba(0,0,0,.3);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.3);

  color-scheme: dark;
}

[data-theme="dark"] body { background: var(--mm-bg); color: var(--mm-text); }
[data-theme="dark"] a { color: var(--mm-accent); }
[data-theme="dark"] a:hover { color: #a5b4fc; }

[data-theme="dark"] .card-header { background: #1c1c22; border-bottom-color: var(--mm-border); color: var(--mm-text); }
[data-theme="dark"] .card-header .bi { color: var(--mm-muted); }
[data-theme="dark"] .card-header .btn .bi { color: inherit; }

[data-theme="dark"] .table { color: var(--mm-text); }
[data-theme="dark"] .table > :not(caption) > * > * { border-bottom-color: #27272a; }
[data-theme="dark"] .table thead > * > * { background: #1c1c22; color: var(--mm-muted); border-bottom-color: var(--mm-border) !important; }
[data-theme="dark"] .table thead.table-light th,
[data-theme="dark"] thead.table-light th { background: #1c1c22 !important; color: var(--mm-muted) !important; border-bottom-color: var(--mm-border) !important; }
[data-theme="dark"] .table-hover tbody tr:hover > td { background: rgba(129,140,248,.06) !important; }
[data-theme="dark"] tr.page-row-alt > td { background-color: #1a1a2e; }
[data-theme="dark"] #pagesTable > tbody > tr.page-row:not(.page-row-alt):not(.table-danger):not(.table-warning) > td { background-color: #18181b; }

[data-theme="dark"] .table-success > td,
[data-theme="dark"] .table-success { background: rgba(22,163,74,.1) !important; }
[data-theme="dark"] .table-warning > td,
[data-theme="dark"] .table-warning { background: rgba(217,119,6,.1) !important; }
[data-theme="dark"] .table-danger > td,
[data-theme="dark"] .table-danger { background: rgba(220,38,38,.1) !important; }
[data-theme="dark"] .table-light > td,
[data-theme="dark"] .table-light.table-light { background: #1c1c22 !important; }

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select { background: #27272a; border-color: #3f3f46; color: var(--mm-text); }
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus { border-color: var(--mm-accent); box-shadow: 0 0 0 3px rgba(129,140,248,.15); }
[data-theme="dark"] .form-control::placeholder { color: #71717a; }
[data-theme="dark"] .form-label { color: #d4d4d8; }
[data-theme="dark"] select.form-select option { background: #27272a; color: var(--mm-text); }

[data-theme="dark"] .alert-success  { background: rgba(22,163,74,.12); border-left-color: #16a34a; color: #86efac; }
[data-theme="dark"] .alert-danger   { background: rgba(220,38,38,.12); border-left-color: #dc2626; color: #fca5a5; }
[data-theme="dark"] .alert-warning  { background: rgba(217,119,6,.12); border-left-color: #d97706; color: #fde68a; }
[data-theme="dark"] .alert-info     { background: rgba(37,99,235,.12); border-left-color: #2563eb; color: #93c5fd; }
[data-theme="dark"] .btn-close { filter: invert(1); }

[data-theme="dark"] .btn-secondary { background: #27272a; border-color: #3f3f46; color: #d4d4d8; }
[data-theme="dark"] .btn-secondary:hover { background: #3f3f46; color: #f4f4f5; }
/* btn-light (presets « Période » du rapport Ads…) : couleur FIXE en Bootstrap,
   blanc éclatant sur fond sombre → surface zinc. */
[data-theme="dark"] .btn-light { background: #27272a; border-color: #27272a; color: #d4d4d8; }
[data-theme="dark"] .btn-light:hover { background: #3f3f46; border-color: #3f3f46; color: #f4f4f5; }
/* Utilities claires fixes posées dans les pages : rabattues sur les surfaces sombres. */
[data-theme="dark"] .bg-light { background-color: #1c1c22 !important; }
[data-theme="dark"] .bg-white { background-color: #18181b !important; }
/* text-primary Bootstrap = bleu #0d6efd trop sombre sur fond zinc (« bleu sur
   bleu » : boutons, icônes, deltas 0,0 %…) → bleu clair lisible. */
[data-theme="dark"] .text-primary { color: #91b3fa !important; }
[data-theme="dark"] .btn-outline-secondary { color: #a1a1aa; border-color: #3f3f46; }
[data-theme="dark"] .btn-outline-secondary:hover { background: #27272a; color: var(--mm-text); border-color: #52525b; }
[data-theme="dark"] .btn-outline-primary { color: var(--mm-accent); border-color: rgba(129,140,248,.3); }
[data-theme="dark"] .btn-outline-primary:hover { background: var(--mm-accent-dim); }
[data-theme="dark"] .btn-outline-info { color: #67e8f9; border-color: rgba(103,232,249,.3); }
[data-theme="dark"] .btn-outline-info:hover { background: rgba(8,145,178,.15); color: #a5f3fc; border-color: rgba(103,232,249,.5); }
[data-theme="dark"] .btn-outline-warning { color: #fcd34d; border-color: rgba(252,211,77,.3); }
[data-theme="dark"] .btn-outline-warning:hover { background: rgba(217,119,6,.15); color: #fde68a; border-color: rgba(252,211,77,.5); }

[data-theme="dark"] .progress { background: #27272a; }
[data-theme="dark"] .breadcrumb-item a { color: var(--mm-muted); }
[data-theme="dark"] .breadcrumb-item a:hover { color: var(--mm-accent); }
[data-theme="dark"] .breadcrumb-item.active { color: var(--mm-muted); }

[data-theme="dark"] .dropdown-menu { background: #1c1c22; border-color: #27272a; }
[data-theme="dark"] .dropdown-item { color: #d4d4d8; }
[data-theme="dark"] .dropdown-item:hover { background: var(--mm-accent-dim); color: var(--mm-accent); }
[data-theme="dark"] .dropdown-divider { border-color: #27272a; }

[data-theme="dark"] .accordion-item { background: var(--mm-surface); border-color: var(--mm-border); }
[data-theme="dark"] .accordion-button { background: #1c1c22; color: var(--mm-text); }
[data-theme="dark"] .accordion-button:not(.collapsed) { background: rgba(129,140,248,.06); color: var(--mm-accent); }
[data-theme="dark"] .accordion-body { background: var(--mm-surface); }

[data-theme="dark"] .modal-content { background: var(--mm-surface); border-color: var(--mm-border); }
[data-theme="dark"] .modal-header { border-bottom-color: var(--mm-border); }
[data-theme="dark"] .modal-footer { border-top-color: var(--mm-border); }

[data-theme="dark"] .page-link { border-color: #3f3f46; color: var(--mm-muted); background: transparent; }
[data-theme="dark"] .page-link:hover { background: var(--mm-accent-dim); color: var(--mm-accent); border-color: var(--mm-accent); }

[data-theme="dark"] code { color: var(--mm-accent); background: rgba(129,140,248,.1); }
[data-theme="dark"] .deliverable-content code { background: rgba(129,140,248,.1); color: var(--mm-text); }
[data-theme="dark"] .deliverable-content pre { background: #09090b; color: #a1a1aa; }

[data-theme="dark"] .login-card { background: var(--mm-surface); }

[data-theme="dark"] hr { border-color: var(--mm-border); }
[data-theme="dark"] .text-muted { color: var(--mm-muted) !important; }
[data-theme="dark"] .text-dark { color: var(--mm-text) !important; }
[data-theme="dark"] .text-body { color: var(--mm-text) !important; }
[data-theme="dark"] .accordion-button { color: var(--mm-text); }
[data-theme="dark"] .table a { color: var(--mm-text); }
[data-theme="dark"] .table a:hover { color: var(--mm-accent); }
[data-theme="dark"] span.badge.bg-light { background: #27272a !important; color: #a1a1aa !important; border-color: #3f3f46 !important; }
[data-theme="dark"] .bg-light { background-color: #1c1c22 !important; color: #a1a1aa !important; }

[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3f3f46; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #52525b; }

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */
/* Skip-to-content link */
.skip-to-content {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--mm-accent);
  color: #fff;
  padding: .5rem 1.25rem;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  font-size: .8125rem;
  font-weight: 600;
  z-index: 9999;
  transition: top .15s;
}
.skip-to-content:focus {
  top: 0;
  color: #fff;
  outline: none;
}

/* Focus-visible ring for keyboard navigation */
:focus-visible {
  outline: 2px solid var(--mm-accent);
  outline-offset: 2px;
}
.btn:focus-visible { box-shadow: 0 0 0 3px rgba(var(--mm-accent-rgb), .3); outline: none; }
.nav-link:focus-visible { outline-offset: -2px; }

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   TOUCH TARGETS (mobile)
   ========================================================================== */
@media (max-width: 768px) {
  .btn-sm {
    min-height: 44px;
    min-width: 44px;
    padding: .5rem .875rem;
    font-size: .8125rem;
  }
  .nav-tabs .nav-link {
    min-height: 44px;
    padding: .75rem .875rem;
  }
  .page-link {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
  }
  .mm-check {
    width: 1.25rem;
    height: 1.25rem;
  }
}

/* ==========================================================================
   CRM MOBILE — TABLEAUX EN CARTES EMPILÉES (spec 2026-06-19)
   Sous le breakpoint md, chaque <tr> d'une .table-cards devient une carte
   verticale "label : valeur". Strictement borné à la media query mobile :
   sur desktop, .table-cards se comporte comme une table normale.
   ========================================================================== */

/* Wrapper de canvas graphique (hauteur réduite sur mobile) */
.crm-chart-wrap { height: 240px; }

/* --- leads.php : panneau "Détails" déplié — anti-scroll latéral ---
   Le wrapper .table-responsive est forcé en overflow:visible (pour ne pas
   rogner les dropdowns). Une valeur longue et insécable (referrer, source_url,
   UTM, gclid, donnée supplémentaire) provoque alors un scroll horizontal global,
   via DEUX mécanismes qu'il faut neutraliser ensemble :
   1) en calcul de largeur intrinsèque, la largeur % des .col-md-* compte pour
      auto -> le min-content du contenu élargit la table. Parade : min-width:0
      sur les colonnes (le min retombe à 0, la table = largeur du conteneur).
   2) une fois la table bornée, le contenu insécable déborde quand même de sa
      colonne et s'échappe au-delà du viewport. Parade : césure sur TOUT le
      contenu du détail (overflow-wrap/word-break, propriétés héritées posées
      sur le <td> -> couvre aussi les valeurs UTM en <div> sans classe).
   3) cas principal observé : les badges « Données supplémentaires » sont en
      display:inline-block — sans max-width ils se dimensionnent sur leur
      contenu (max-content) et la césure héritée ne les replie PAS, ce qui
      pousse la table au-delà du viewport. Parade : les borner à max-width:100%
      avec césure -> une valeur longue s'enroule, contenu conservé (jamais
      tronqué). Validé à 1280/992/768 px via repro headless (OVERFLOW=0). */
#crm-leads-table .crm-detail-row .row > [class*="col-"] { min-width: 0; }
#crm-leads-table .crm-detail-row > td {
  overflow-wrap: anywhere;
  word-break: break-word;
}
#crm-leads-table .crm-detail-row .badge {
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
  text-align: left;
}

/* --- leads.php : lead déplié bien repérable ---
   Classes posées par CRM.setLeadExpanded(). La ligne et son détail partagent
   un fond teinté et une barre d'accent gauche continue ; le détail est posé
   dans une carte blanche, dont le bord bas marque la fin de la section.
   - Fond OPAQUE (color-mix) et non rgba : un fond semi-transparent laisse
     apparaître des jointures blanches entre cellules (largeurs fractionnaires,
     constaté sous Chrome 1920 px).
   - Pas de cadre dessiné en box-shadow par cellule : impossible de fermer le
     côté droit proprement, le rendu paraissait morcelé.
   - Les !important battent le fond de survol de .table-hover (lui aussi en
     !important) et la couche d'état inset de Bootstrap. */
#crm-leads-table tr.crm-row-open > td,
#crm-leads-table tr.crm-detail-open > td {
  background-color: color-mix(in srgb, var(--mm-accent) 10%, var(--mm-surface)) !important;
  box-shadow: none !important;
}
#crm-leads-table tr.crm-row-open > td { border-bottom-color: transparent; }
#crm-leads-table tr.crm-row-open > td:first-child {
  box-shadow: inset 4px 0 0 var(--mm-accent) !important;
  font-weight: 600;
}
#crm-leads-table tr.crm-detail-open > td {
  box-shadow: inset 4px 0 0 var(--mm-accent) !important;
  padding: 0 1rem 1rem 1.25rem;
}
#crm-leads-table tr.crm-detail-open > td > .p-2 {
  background: var(--mm-surface);
  border: 1px solid color-mix(in srgb, var(--mm-accent) 22%, var(--mm-border));
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem !important;
}

@media (max-width: 767.98px) {
  /* La table devient un empilement de cartes */
  .table-cards,
  .table-cards tbody,
  .table-cards tr,
  .table-cards td { display: block; width: 100%; }

  .table-cards thead { display: none; }

  .table-cards tr {
    background: var(--mm-surface);
    border: 1px solid var(--mm-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    margin-bottom: .75rem;
    padding: .25rem .25rem;
  }

  /* Annule les bordures de cellules Bootstrap qui dédoubleraient le cadre */
  .table-cards td {
    border: none !important;
    padding: .5rem .75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    text-align: right;
  }

  /* Libellé de colonne injecté à gauche de chaque cellule */
  .table-cards td[data-label]::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--mm-muted);
    text-align: left;
    margin-right: auto;
    white-space: nowrap;
  }

  /* Cellule pleine largeur sans libellé (lignes de détail dépliables, etc.) */
  .table-cards td[colspan],
  .table-cards .cell-actions {
    text-align: left;
  }

  /* Cellule d'actions : boutons pleine largeur, empilables */
  .table-cards .cell-actions { display: block; }
  .table-cards .cell-actions .btn-group {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: .25rem;
  }
  .table-cards .cell-actions .btn-group > .btn {
    flex: 1 1 auto;
    border-radius: var(--radius-sm) !important;
  }

  /* Neutralise les largeurs fixes inline (min-width/max-width px) sur mobile */
  .mw-mobile-100 {
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  /* --- leads.php : séparation renforcée entre éléments (mobile uniquement) --- */

  /* Trait fin entre chaque ligne "label : valeur" d'une carte lead
     (override le `border: none !important` générique des cellules). */
  #crm-leads-table .table-cards tbody > tr[data-lead-id] > td:not(:last-child) {
    border-bottom: 1px solid var(--mm-border) !important;
  }

  /* Panneau "Détails" déplié : repasse la cellule en bloc pleine largeur
     (annule le flex/centrage hérité de .table-cards td). */
  #crm-leads-table .crm-detail-row > td {
    display: block;
    text-align: left;
    padding: .25rem .75rem .75rem;
  }

  /* Lead déplié : la carte principale et la carte détail se soudent en une
     seule carte bordée d'accent (liseré gauche épais), séparée de la
     suivante par une marge plus large. Les insets desktop sont neutralisés :
     sur mobile, c'est la bordure du <tr> qui encadre. */
  #crm-leads-table tr.crm-row-open,
  #crm-leads-table tr.crm-detail-open {
    border-color: var(--mm-accent);
    border-left-width: 4px;
    box-shadow: 0 2px 10px rgba(var(--mm-accent-rgb), .18);
  }
  #crm-leads-table tr.crm-row-open {
    margin-bottom: 0;
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  #crm-leads-table tr.crm-detail-open {
    margin-bottom: 1.5rem;
    border-top: 1px dashed rgba(var(--mm-accent-rgb), .5);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  #crm-leads-table tr.crm-row-open > td,
  #crm-leads-table tr.crm-row-open > td:first-child,
  #crm-leads-table tr.crm-detail-open > td {
    box-shadow: none !important;
  }
  #crm-leads-table tr.crm-detail-open > td {
    padding: .25rem .75rem .75rem;
  }
  /* Pas de carte dans la carte sur écran étroit : le <tr> encadre déjà. */
  #crm-leads-table tr.crm-detail-open > td > .p-2 {
    background: transparent;
    border: none;
    padding: .5rem 0 0 !important;
  }

  /* Champs du détail empilés : un trait sous chaque champ sauf le dernier
     de sa section. */
  #crm-leads-table .crm-detail-row .row > [class*="col-"]:not(:last-child) {
    border-bottom: 1px solid var(--mm-border);
    padding-bottom: .6rem;
  }

  /* En-tête de section (Origine / Campagne / Qualification / …) : trait épais
     au-dessus pour bien démarquer chaque bloc (sauf la première section). */
  #crm-leads-table .crm-detail-row .text-uppercase:not(:first-of-type) {
    border-top: 2px solid var(--mm-border);
    padding-top: .85rem;
  }

  /* Graphique CRM plus court sur mobile */
  .crm-chart-wrap { height: 180px; }
}

/* ==========================================================================
   KEYBOARD SHORTCUTS MODAL
   ========================================================================== */
.kbd {
  display: inline-block;
  padding: .15em .45em;
  font-size: .75rem;
  font-family: var(--font-mono);
  font-weight: 500;
  line-height: 1;
  color: var(--mm-text);
  background: #f4f4f5;
  border: 1px solid #d4d4d8;
  border-radius: .25rem;
  box-shadow: 0 1px 0 #d4d4d8;
  min-width: 1.5em;
  text-align: center;
}
[data-theme="dark"] .kbd {
  background: #27272a;
  border-color: #3f3f46;
  box-shadow: 0 1px 0 #3f3f46;
  color: #d4d4d8;
}

/* Theme toggle button */
.btn-theme-toggle {
  background: transparent;
  border: none;
  color: var(--mm-nav-text);
  font-size: 1rem;
  padding: .25rem .5rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color .15s, background .15s;
  display: flex;
  align-items: center;
}
.btn-theme-toggle:hover { color: var(--mm-nav-active); background: rgba(255,255,255,.06); }

/* --- Groupes de boutons d'en-tête de carte (Historique 12 mois, Localisation) ---
   Sur mobile, les btn-group larges débordaient à droite de la carte : on les rend
   défilables horizontalement (scrollbar masquée, geste tactile naturel). */
.btn-scroll-x { max-width: 100%; }
@media (max-width: 767.98px) {
  .btn-scroll-x {
    display: flex;
    flex-wrap: nowrap !important; /* prime sur l'utilitaire Bootstrap .flex-wrap */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: 100%;
  }
  .btn-scroll-x::-webkit-scrollbar { display: none; }
  .btn-scroll-x .btn-group { flex: 0 0 auto; }
  .btn-scroll-x .btn { white-space: nowrap; }
}

/* --- Guide GTM (crm/setup_gtm.php) ---
   Les alertes de ce guide contiennent des paragraphes riches (strong/code/liens) :
   le display:flex des flash messages transforme chaque enfant inline en item de
   colonne, et les tokens <code> longs (min-width:auto des flex items) font
   déborder la page sur mobile. On repasse en flux normal, scopé à la page. */
.gtm-guide .alert { display: block; }
.gtm-guide code { overflow-wrap: anywhere; }
/* Dans les tableaux, les tokens restent insécables : le .table-responsive
   parent fournit le scroll horizontal, plus lisible qu'une césure mi-token. */
.gtm-guide .table code { overflow-wrap: normal; white-space: nowrap; }
@media (max-width: 767.98px) {
  .gtm-guide .card-body { padding: 1rem .75rem; }
  .gtm-guide .card-body ol,
  .gtm-guide .card-body ul { padding-left: 1.25rem; }
  .gtm-guide pre.snippet-dark { font-size: .7rem; }
}

/* Ancre d'un compte sur la fiche serveur (/servers/{id}#compte-{id}) : pas masquée par la navbar sticky */
.account-anchor { scroll-margin-top: calc(var(--navbar-h) + 1rem); }
.account-anchor:target { box-shadow: 0 0 0 2px var(--bs-primary); }

/* Échéance WHOIS par tranche (partials/expiry-date) : 60-30 j jaune, < 30 j orange, expiré rouge. */
:root {
  --mm-expiry-soon:    #a16207;
  --mm-expiry-urgent:  #c2410c;
  --mm-expiry-expired: #b91c1c;
}
[data-theme="dark"] {
  --mm-expiry-soon:    #facc15;
  --mm-expiry-urgent:  #fb923c;
  --mm-expiry-expired: #f87171;
}
.expiry {
  display: inline-block;
  padding: .05rem .45rem;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--expiry-color);
  background: color-mix(in srgb, var(--expiry-color) 12%, transparent);
}
.expiry-soon    { --expiry-color: var(--mm-expiry-soon); }
.expiry-urgent  { --expiry-color: var(--mm-expiry-urgent); }
.expiry-expired { --expiry-color: var(--mm-expiry-expired); }