/* Órama Ads — feuille de style du tableau de bord.
   Extraite du fichier HTML le 10 août 2026 : un bloc <style> de 53 Ko
   noyé dans la page rendait chaque changement de style illisible en
   diff. L'`@import` des polices doit rester en TÊTE — une règle @import
   placée après d'autres règles est ignorée par le navigateur. */
/* Trois rôles, un seul jeu de polices pour toute la plateforme :
   Space Grotesk pour les titres, IBM Plex Sans pour le texte courant,
   IBM Plex Mono pour les chiffres et le code. JetBrains Mono a été
   remplacée par IBM Plex Mono — même famille que le texte courant, et
   c'est déjà la mono du portail et d'Órama Trading. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Google+Sans:wght@500&display=swap');

/* ============================================================
   DESIGN TOKENS — "Tour de contrôle" : console d'exploitation
   nocturne d'un parking aéroport. Fond nuit-tarmac, accents
   ambre (feux de bord de piste / alerte) et cyan (écran radar).
   ============================================================ */
/* ============================================================
   PALETTE — Google Ads sur fond NOIR
   Teintes exactes de la charte, non désaturées (comme les tuiles de
   la vue d'ensemble Google Ads) :
     bleu #4285F4 · vert #34A853 · jaune #FBBC05 · rouge #EA4335
     bleu d'action (boutons, liens, onglet actif) #1A73E8
   Fond noir franc, surfaces remontées par paliers discrets jusqu'au
   gris Google #202124 pour les éléments les plus hauts.
   Les noms de tokens historiques sont conservés : ils désignent un
   RÔLE, pas une teinte — --amber = accent principal (bleu Google),
   --teal = positif (vert), --red = négatif, --violet = 3e accent
   (jaune). Renommer aurait touché 237 usages.
   ============================================================ */
:root{
  /* Teintes Google brutes */
  --g-blue:        #4285F4;
  --g-blue-action: #1A73E8;
  --g-green:       #34A853;
  --g-yellow:      #FBBC05;
  --g-red:         #EA4335;

  /* Surfaces — noir, puis paliers */
  --bg:            #000000;
  --bg-soft:       #0A0A0B;
  --panel:         #121316;
  --panel-alt:     #1A1B1E;
  --panel-raised:  #202124;
  --border:        #2A2B2E;
  --border-soft:   #1C1D20;

  /* Accent principal — bleu Google */
  --amber:         #4285F4;
  --amber-soft:    #10233F;
  --amber-dim:     #1A73E8;

  /* Positif — vert Google */
  --teal:          #34A853;
  --teal-soft:     #0E2A16;

  /* Négatif / alerte — rouge Google */
  --red:           #EA4335;
  --red-soft:      #2E1210;

  /* Troisième accent — jaune Google */
  --violet:        #FBBC05;
  --violet-soft:   #2E2205;

  /* Couleurs PROPRES À CHAQUE PLATEFORME source — on garde les teintes des
     logos telles quelles (elles sont pensées pour être lisibles) et on met
     les libellés en blanc, comme le recommande la charte Google.
       Google Ads             → bleu Google #4285F4
       Google Analytics       → tons chauds #F4B400 / #FF9800 / #E37400
       Google Business Profile→ bleu foncé du logo #1967D2 */
  --src-ads:       #4285F4;
  --src-ads-soft:  #10233F;
  --src-ga4:       #E37400;
  --src-ga4-mid:   #FF9800;
  --src-ga4-lite:  #F4B400;
  --src-ga4-soft:  #33210A;
  --src-gmb:       #1967D2;
  --src-gmb-soft:  #0E2444;

  --text-1:        #FFFFFF;
  --text-2:        #BDC1C6;
  --text-3:        #9AA0A6;

  --font-display:  'Space Grotesk', sans-serif;
  --font-body:     'IBM Plex Sans', sans-serif;
  --font-mono:     'IBM Plex Mono', ui-monospace, monospace;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* Le verre, le thème clair et la bascule vivent dans
     `commun/orama-theme.css`, partagé avec le portail, la vitrine,
     Trading et Run. Recopier ces jetons ici en ferait une deuxième
     vérité, qui dériverait au premier ajustement. */
  --border-fort:    #33343A;
}


*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  /* CE QUE LE VERRE FILTRE. Sans ces champs de couleur, un flou sur un
     aplat ne produit rien : le verre a besoin de quelque chose
     derrière. Ils passent par des variables pour que le thème clair
     les remonte — à 26 % ils disparaissent sur du blanc. */
  background:
    radial-gradient(1100px 640px at 78% -12%, var(--halo-1), transparent 62%),
    radial-gradient(950px 560px at 112% 68%, var(--halo-2), transparent 62%),
    radial-gradient(800px 520px at 22% 118%, var(--halo-3), transparent 62%),
    var(--bg);
  background-attachment:fixed;
  color:var(--text-1);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  display:flex;
  overflow:hidden;
}
h1,h2,h3,h4{ font-family:var(--font-display); margin:0; letter-spacing:-0.01em; }
p{ margin:0; }
a{ color:inherit; }
::selection{ background:rgba(66,133,244,.28); color:#fff; }

/* scrollbars */
*::-webkit-scrollbar{ width:9px; height:9px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{ background:#25324f; border-radius:20px; border:2px solid transparent; background-clip:padding-box; }
*::-webkit-scrollbar-thumb:hover{ background:#31416a; background-clip:padding-box; }

/* focus visibility (a11y floor) */
button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:2px;
  border-radius:4px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}

/* ============================================================
   LAYOUT
   ============================================================ */
.sidebar{
  width:264px; min-width:264px; height:100%;
  /* Du verre posé sur le fond, plus un aplat : elle laisse passer le
     halo qui court derrière, et c'est la bordure — jamais une nuance
     de fond — qui marque la séparation. */
  background:var(--verre-bas);
  backdrop-filter:var(--verre-flou); -webkit-backdrop-filter:var(--verre-flou);
  border-right:1px solid var(--verre-bord);
  display:flex; flex-direction:column;
  z-index:20;
}
@media (max-width:1180px){ .sidebar{ width:228px; min-width:228px; } }
@media (max-width:900px){
  .sidebar{
    position:fixed; top:0; left:0; width:280px; min-width:280px; max-width:86vw;
    transform:translateX(-100%); transition:transform .28s cubic-bezier(.4,0,.2,1);
    box-shadow:20px 0 50px rgba(0,0,0,.45); z-index:110;
  }
  .sidebar.open{ transform:translateX(0); }
}
.sidebar-overlay{
  position:fixed; inset:0; background:rgba(5,9,18,.55); backdrop-filter:blur(2px);
  z-index:105; opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.sidebar-overlay.open{ opacity:1; pointer-events:auto; }
.sidebar-close{ display:none; }
@media (max-width:900px){ .sidebar-close{ display:flex; } }
.mobile-menu-btn{
  display:none; align-items:center; justify-content:center; width:36px; height:36px; flex-shrink:0;
  background:var(--panel); border:1px solid var(--border); border-radius:8px; color:var(--text-1); font-size:15px; cursor:pointer;
}
.mobile-menu-btn:hover{ background:var(--panel-alt); }
@media (max-width:900px){ .mobile-menu-btn{ display:flex; } }

.brand{
  padding:22px 20px; display:flex; align-items:center; gap:12px;
  border-bottom:1px solid var(--border-soft);
}
/* Le logo est un œil multicolore : le fond du bloc reste sombre pour ne pas
   entrer en concurrence avec les quatre couleurs de l'iris. */
.brand-mark{
  width:40px; height:40px; border-radius:11px; flex-shrink:0;
  background:var(--panel-alt); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
}
/* L'ŒIL D'ÓRAMA, OÙ QU'IL SOIT POSÉ. Son contour est en `currentColor`
   pour suivre le thème ; encore faut-il lui donner une encre. Ce
   tableau de bord porte la marque à quatre endroits — barre latérale,
   entête mobile, en-tête du livrable (`.liv-eye`), portail de choix du
   dossier (`.gate-brand .tuile`) — et une règle par conteneur serait
   trois règles justes et une oubliée. On vise la marque elle-même,
   reconnaissable à son `viewBox`. */
svg[viewBox="0 0 48 48"]{ color:var(--text-1); }
.brand-name{ font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--text-1); line-height:1.15; }
.brand-sub{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--teal); margin-top:2px; }

.nav{ flex:1; overflow-y:auto; padding:16px 12px; display:flex; flex-direction:column; gap:3px; }
.nav-group-label{ font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); padding:14px 10px 6px; }
.nav-item{
  display:flex; align-items:center; gap:11px; width:100%;
  padding:10px 12px; border-radius:9px; border:none; background:transparent;
  color:var(--text-2); font-family:var(--font-body); font-size:13.5px; font-weight:500;
  cursor:pointer; text-align:left; position:relative; transition:background .15s, color .15s;
}
.nav-item:hover{ background:var(--panel-alt); color:var(--text-1); }
.nav-item .nav-ic{ width:18px; text-align:center; color:var(--text-3); font-size:14px; transition:color .15s; }
.nav-item.active{ background:var(--panel-raised); color:var(--text-1); }
.nav-item.active .nav-ic{ color:var(--amber); }
.nav-item.active::before{
  content:''; position:absolute; left:-12px; top:8px; bottom:8px; width:3px;
  background:var(--amber); border-radius:0 3px 3px 0; box-shadow:0 0 8px rgba(66,133,244,.7);
}
.nav-item .nav-tag{
  margin-left:auto; font-family:var(--font-mono); font-size:9px; padding:2px 6px; border-radius:20px;
  /* La pastille pose sa teinte SOUS son texte : `--teal` y tombe à
     4,21:1 en thème clair. L'encre est mesurée sur la teinte. */
  background:var(--teal-soft); color:var(--teal-encre); letter-spacing:.05em;
}
.src-dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; opacity:.85; display:inline-block; vertical-align:middle; }
.nav-item .src-dot{ margin-left:auto; }
.nav-count{ margin-left:auto; min-width:19px; height:19px; padding:0 5px; border-radius:10px; background:var(--red-plein); color:#fff; font-family:var(--font-mono); font-size:10.5px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
.alert-row{ position:relative; }
.alert-row .alert-ack{ position:absolute; top:12px; right:12px; background:transparent; border:1px solid var(--border); color:var(--text-3); border-radius:7px; padding:4px 9px; font-size:11px; cursor:pointer; }
.alert-row .alert-ack:hover{ border-color:var(--text-2); color:var(--text-1); }
.sev-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; }

/* ============================================================
   LIVRABLE CLIENT
   ------------------------------------------------------------
   Le rapport était la SEULE surface claire de toute l'application :
   une feuille blanche posée au milieu du noir. Il suit désormais la
   charte — fond noir, accents Google saturés, l'œil Órama en tête.

   Le document porte ses couleurs par des VARIABLES LOCALES et non par
   les tokens globaux : ajouter `.liv-clair` bascule toute la palette
   d'un coup, ce dont l'export « PDF clair » a besoin. Sans ce niveau
   d'indirection il aurait fallu réécrire chaque règle en double.
   ============================================================ */
.report-doc{
  --liv-bg:      var(--panel);
  --liv-encre:   var(--text-1);
  --liv-encre-2: var(--text-2);
  --liv-encre-3: var(--text-3);
  --liv-trait:   var(--border);
  --liv-trait-s: var(--border-soft);
  --liv-case:    var(--panel-alt);
  background:var(--liv-bg); color:var(--liv-encre);
  border:1px solid var(--liv-trait); border-radius:14px;
  padding:34px 38px; flex:1; min-width:0;
}
/* La palette claire, pour l'export papier. Mêmes accents Google :
   ce sont eux qui rendent le document reconnaissable, pas le fond. */
.report-doc.liv-clair{
  --liv-bg:#fff; --liv-encre:#0f1626; --liv-encre-2:#3d4a60; --liv-encre-3:#8893a7;
  --liv-trait:#e2e6ee; --liv-trait-s:#f0f2f6; --liv-case:#fafbfc;
}
.liv-wrap{ display:flex; gap:18px; align-items:flex-start; }
.liv-side{ width:250px; flex-shrink:0; background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:14px; position:sticky; top:0; }
.liv-side-t{ font-family:var(--font-mono); font-size:10px; letter-spacing:.6px; text-transform:uppercase; color:var(--text-3); margin-bottom:10px; }
.liv-pg{ margin-bottom:12px; }
.liv-pg-t{ font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--amber); margin:0 0 5px 2px; }
.liv-pi{ display:flex; align-items:flex-start; gap:7px; padding:4px 2px; font-size:12.5px; color:var(--text-2); cursor:pointer; border-radius:6px; }
.liv-pi:hover{ background:var(--panel-alt); }
.liv-pi input{ margin-top:2px; accent-color:var(--amber); flex-shrink:0; }
.liv-pi.off{ color:var(--text-3); cursor:not-allowed; }
.liv-pi.off:hover{ background:transparent; }
.liv-why{ display:block; font-size:10.5px; font-style:normal; color:var(--text-3); opacity:.75; }
.liv-range{ background:var(--panel); border:1px solid var(--border); color:var(--text-1); border-radius:9px; padding:8px 11px; font-size:12.5px; font-family:inherit; cursor:pointer; }

.report-header{ display:flex; justify-content:space-between; align-items:flex-start; border-bottom:2px solid var(--liv-trait); padding-bottom:16px; margin-bottom:6px; gap:16px; }
.liv-ident{ display:flex; align-items:center; gap:13px; color:var(--liv-encre); }
.liv-eye{ flex-shrink:0; }
.report-client{ font-family:var(--font-display); font-size:24px; font-weight:800; color:var(--liv-encre); }
.report-sub{ color:var(--liv-encre-2); font-size:13px; margin-top:3px; }
.report-brand{ font-family:var(--font-mono); font-size:11px; color:var(--liv-encre-3); text-align:right; letter-spacing:.5px; }
.report-h{ font-family:var(--font-display); font-size:15px; color:var(--liv-encre); margin:26px 0 12px; padding-bottom:6px; border-bottom:1px solid var(--liv-trait); }
.report-ai{ background:var(--liv-case); border:1px solid var(--liv-trait); border-left:3px solid var(--teal); border-radius:9px; padding:14px 16px; font-size:13px; line-height:1.65; color:var(--liv-encre-2); margin-top:16px; }
.report-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:11px; }
.rk{ border:1px solid var(--liv-trait); background:var(--liv-case); border-radius:10px; padding:13px 15px; }
.rk-l{ font-size:10px; text-transform:uppercase; letter-spacing:.4px; color:var(--liv-encre-3); }
.rk-v{ font-family:var(--font-mono); font-size:20px; font-weight:700; color:var(--liv-encre); margin-top:5px; }
/* Une valeur TEXTUELLE — une catégorie, une date relative — composée
   comme un nombre en mono 20 px déborde de sa case et se coupe sur
   trois lignes. Elle garde la police du document et une taille lisible. */
.rk-v.rk-txt{ font-family:var(--font-body); font-size:14px; font-weight:600; line-height:1.35; letter-spacing:0; }
.rk-d{ font-size:11px; margin-top:4px; color:var(--liv-encre-2); }
.robj{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid var(--liv-trait-s); font-size:12.5px; color:var(--liv-encre-2); }
.robj:last-child{ border-bottom:none; }
.report-foot{ margin-top:26px; padding-top:14px; border-top:1px solid var(--liv-trait); font-size:10.5px; color:var(--liv-encre-3); }
.report-badge{ font-family:var(--font-mono); font-size:10px; padding:2px 8px; border-radius:10px; white-space:nowrap; }
.report-badge.ok{ background:var(--teal-soft); color:var(--teal); } .report-badge.bad{ background:var(--red-soft); color:var(--red); } .report-badge.mid{ background:var(--violet-soft); color:var(--violet); }

/* -- Blocs de module ------------------------------------------------ */
.liv-s{ page-break-inside:auto; }
.liv-cover{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; }
.liv-cover-l{ font-size:10px; text-transform:uppercase; letter-spacing:.4px; color:var(--liv-encre-3); }
.liv-cover-v{ font-family:var(--font-mono); font-size:13.5px; color:var(--liv-encre); margin-top:4px; }
.liv-t{ width:100%; border-collapse:collapse; font-size:12.5px; }
.liv-t th{ text-align:left; font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.4px;
  color:var(--liv-encre-3); font-weight:400; padding:0 10px 7px 0; border-bottom:1px solid var(--liv-trait); }
.liv-t td{ padding:7px 10px 7px 0; border-bottom:1px solid var(--liv-trait-s); color:var(--liv-encre-2); }
.liv-t th.r, .liv-t td.r{ text-align:right; padding-right:0; font-variant-numeric:tabular-nums; }
/* `padding-right:0` supposait qu'une colonne alignée à droite est la
   DERNIÈRE. Dès qu'elle a une voisine — « 1 277 » suivi de « Centre
   d'escape game » — les deux se touchent et se lisent comme un seul
   mot. La règle ne vaut donc que pour la dernière colonne. */
.liv-t th.r:not(:last-child), .liv-t td.r:not(:last-child){ padding-right:18px; }
.liv-t tr:last-child td{ border-bottom:none; }
.liv-src{ margin-top:8px; font-family:var(--font-mono); font-size:10px; color:var(--liv-encre-3); opacity:.8; }
.liv-note{ margin-top:9px; font-size:11.5px; line-height:1.55; color:var(--liv-encre-3); border-left:2px solid var(--liv-trait); padding-left:9px; }
.liv-p{ display:flex; gap:10px; padding:9px 0; border-bottom:1px solid var(--liv-trait-s); font-size:12.5px; color:var(--liv-encre-2); }
.liv-p:last-child{ border-bottom:none; }
.liv-dot{ width:9px; height:9px; border-radius:50%; margin-top:4px; flex-shrink:0; }
.liv-sub{ color:var(--liv-encre-3); margin-top:3px; line-height:1.55; }
.liv-dim{ color:var(--liv-encre-3); }
.liv-err{ color:var(--red); }
.liv-tag{ font-family:var(--font-mono); font-size:10px; padding:2px 7px; border-radius:9px; }
.liv-cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:18px; }
.liv-col-t{ font-size:10px; text-transform:uppercase; letter-spacing:.4px; color:var(--liv-encre-3); margin-bottom:6px; }
.liv-row{ display:flex; justify-content:space-between; gap:10px; padding:4px 0; font-size:12.5px; color:var(--liv-encre-2); border-bottom:1px solid var(--liv-trait-s); }
.liv-row:last-child{ border-bottom:none; }

/* -- Barres de thème --------------------------------------------------
   Barres en HTML et non en canvas : elles héritent des variables du
   document, donc l'export « PDF clair » les repeint sans une ligne de
   JavaScript, et elles supportent la coupure de page — ce qu'un canvas
   ne fait pas, lui qui se coupe en deux images muettes. -------------- */
.liv-bar{ display:flex; align-items:center; gap:11px; padding:5px 0; }
.liv-bar-l{ width:158px; flex-shrink:0; font-size:12px; color:var(--liv-encre-2); }
.liv-bar-t{ flex:1; height:13px; min-width:40px; background:var(--liv-trait-s); border-radius:7px; overflow:hidden; }
.liv-bar-f{ display:block; height:100%; border-radius:7px; }
.liv-bar-v{ width:178px; flex-shrink:0; text-align:right; font-family:var(--font-mono); font-size:11px;
  color:var(--liv-encre-3); white-space:nowrap; }

/* Le fond d'un graphique suit le document. Sans cette règle, le canvas
   du rapport gardait le fond de l'application dans l'export clair —
   l'unique rectangle sombre d'une page blanche. */
.report-doc .chart-wrap{ margin:4px 0 12px; }

/* -- Édition du livrable ----------------------------------------------
   Deux zones modifiables : l'intitulé du document et un commentaire par
   section. Elles doivent se VOIR comme modifiables à l'écran et
   DISPARAÎTRE comme telles à l'impression — un PDF client ne porte ni
   pointillé ni invite grise. ------------------------------------------ */
.liv-edit{ border-bottom:1px dashed var(--liv-trait); padding-bottom:1px; outline:none; cursor:text; }
.liv-edit:hover{ border-bottom-color:var(--amber); }
.liv-edit:focus{ border-bottom-color:var(--amber); background:var(--liv-case); }

.liv-com{ margin-top:11px; padding:9px 12px; border-left:2px solid var(--liv-trait);
  font-size:12.5px; line-height:1.6; color:var(--liv-encre-2); outline:none; cursor:text;
  white-space:pre-wrap; border-radius:0 6px 6px 0; }
.liv-com:hover{ background:var(--liv-case); }
.liv-com:focus{ background:var(--liv-case); border-left-color:var(--amber); }
/* L'invite est un attribut, pas du contenu : elle ne part donc ni dans
   `innerText` ni dans le presse-papier, et une zone « vide » l'est
   vraiment quand on relit sa valeur. */
.liv-com.vide::before{ content:attr(data-vide); color:var(--liv-encre-3); opacity:.55; font-style:italic; }
.liv-com.vide:focus::before{ content:''; }

/* -- Ordre des sections ------------------------------------------------ */
.liv-ordre{ border-bottom:1px solid var(--border-soft); padding-bottom:10px; margin-bottom:14px; }
.liv-oi{ display:flex; align-items:center; gap:6px; padding:3px 2px; font-size:12px; color:var(--text-2); }
.liv-oi-n{ font-family:var(--font-mono); font-size:10px; color:var(--text-3); width:16px; flex-shrink:0; }
.liv-oi-t{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.liv-oi-b{ background:none; border:none; color:var(--text-3); cursor:pointer; padding:2px 4px; font-size:10px; border-radius:4px; }
.liv-oi-b:hover:not(:disabled){ color:var(--amber); background:var(--panel-alt); }
.liv-oi-b:disabled{ opacity:.25; cursor:default; }
.liv-raz{ background:none; border:none; color:var(--text-3); font-size:9.5px; text-decoration:underline;
  cursor:pointer; padding:0 0 0 6px; font-family:inherit; text-transform:none; letter-spacing:0; }
.liv-raz:hover{ color:var(--amber); }

@media print {
  .sidebar, .mobile-header, .sidebar-overlay, .no-print, #drawer, .drawer-overlay { display:none !important; }
  .main{ margin:0 !important; }
  .content-scroll{ margin:0 !important; padding:0 !important; overflow:visible !important; height:auto !important; }
  .tab-content{ display:none !important; }
  #tab-rapport{ display:block !important; }
  .liv-wrap{ display:block !important; }
  /* Le fond du document est imprimé tel quel : c'est tout l'objet du
     choix « PDF sombre ». Sans `print-color-adjust`, les navigateurs
     suppriment les aplats et le texte clair finirait sur du blanc. */
  html, body{ background:var(--liv-bg) !important; }
  .report-doc{ box-shadow:none; max-width:100%; padding:0; border:none; border-radius:0;
    -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .report-doc.liv-clair, .report-doc.liv-clair ~ *{ background:#fff !important; }
  .report-h, .rk, .robj, .liv-p, .liv-cover, .liv-bar{ page-break-inside:avoid; }
  /* Un canvas coupé par un saut de page donne deux moitiés d'image
     illisibles : il tient sur une seule page ou passe à la suivante. */
  .chart-wrap{ page-break-inside:avoid; }
  .liv-t tr{ page-break-inside:avoid; }
  /* Le document imprimé n'est plus modifiable : on retire tout ce qui
     ne servait qu'à le dire. Un commentaire resté vide disparaît
     complètement — huit invites grises en travers d'un livrable client
     seraient pires que pas de commentaires du tout. */
  .liv-edit{ border-bottom:none !important; }
  .liv-com{ padding-left:10px; page-break-inside:avoid; }
  .liv-com.vide{ display:none !important; }
}

/* ============================================================
   Profile switcher
   ============================================================ */
.profile-switcher{ position:relative; padding:12px; border-bottom:1px solid var(--border-soft); }
.profile-current{
  display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px; border-radius:10px;
  background:var(--panel); border:1px solid var(--border); cursor:pointer; transition:background .15s, border-color .15s;
}
.profile-current:hover{ background:var(--panel-alt); border-color:var(--border-fort); }
.profile-avatar{
  width:30px; height:30px; border-radius:8px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg,var(--teal),#1a9c8c); color:#052521; font-family:var(--font-display); font-weight:700; font-size:14px;
}
.profile-name{ display:block; font-size:12.5px; font-weight:600; color:var(--text-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.profile-role{ display:block; font-size:10px; color:var(--text-3); font-family:var(--font-mono); }

/* Empty state for analysis tabs when active profile has no data yet */
.tab-empty{
  display:none; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:60px 24px; min-height:400px;
}
.tab-empty.show{ display:flex; }
.tab-empty-ic{
  width:72px; height:72px; border-radius:20px; display:flex; align-items:center; justify-content:center;
  background:var(--panel-alt); border:1px solid var(--border); color:var(--text-3); font-size:28px; margin-bottom:20px;
}
.tab-empty h3{ font-size:19px; color:var(--text-1); margin-bottom:10px; }
.tab-empty p{ color:var(--text-2); font-size:13.5px; max-width:440px; line-height:1.6; margin-bottom:20px; }
.tab-empty .needed-files{ display:flex; flex-direction:column; gap:8px; width:100%; max-width:420px; margin-bottom:22px; }
.needed-file{ display:flex; align-items:center; gap:11px; padding:11px 14px; background:var(--panel); border:1px solid var(--border); border-radius:10px; text-align:left; }
.needed-file .nf-ic{ width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; }
.needed-file.have .nf-ic{ background:var(--teal-soft); color:var(--teal); }
.needed-file.missing .nf-ic{ background:var(--panel-alt); color:var(--text-3); }
.needed-file .nf-name{ font-size:12.5px; color:var(--text-1); font-weight:500; }
.needed-file .nf-status{ margin-left:auto; font-family:var(--font-mono); font-size:10px; }
.needed-file.have .nf-status{ color:var(--teal); }
.needed-file.missing .nf-status{ color:var(--text-3); }

/* content wrapper hidden when empty state shows */
.tab-real-content.hidden{ display:none; }

/* Import checklist */
.checklist-file{ display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:9px; background:var(--panel-alt); margin-bottom:7px; cursor:pointer; transition:background .15s; }
.checklist-file:hover{ background:var(--panel); }
.checklist-file.have{ opacity:.72; }
.cf-ic{ font-size:15px; flex-shrink:0; width:18px; text-align:center; }
.cf-name{ display:block; font-size:12.5px; color:var(--text-1); font-weight:500; }
.cf-help{ font-size:11px; color:var(--text-3); margin-top:5px; line-height:1.5; padding-left:2px; border-left:2px solid var(--border); padding-left:8px; }
.profile-avatar.demo{ background:linear-gradient(145deg,var(--amber),#c9820f); color:#1a1204; }

/* LE BAS DE LA COLONNE (22 septembre 2026) — une ligne au repos, le reste
   dans un panneau. Voir le commentaire du gabarit : cinq blocs empilés en
   10,5 px sous une horloge de 19 px, le nom de la personne plus petit que
   l'heure. L'horloge est partie : une décoration ne se paie pas en place
   dans la zone la plus contrainte de l'écran. */
.sa{ position:relative; padding:10px 14px 12px; border-top:1px solid var(--border-soft); }
.sa-chip{
  width:100%; display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:10px; border:1px solid transparent;
  background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer;
}
.sa-chip:hover{ background:var(--panel-alt); border-color:var(--border); }
.sa-chip:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }
.sa-avatar{
  width:28px; height:28px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:var(--panel-raised); border:1px solid var(--border);
  font-family:var(--font-display); font-size:12px; font-weight:600; color:var(--text-2);
}
.sa-chip-txt{ flex:1; min-width:0; }
.sa-name{ display:block; font-size:12.5px; color:var(--text-1); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sa-etat{ display:block; font-size:10.5px; color:var(--text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:1px; }
.sa-dot{ width:7px; height:7px; border-radius:50%; background:var(--teal); flex:0 0 auto; }
.sa-chev{ font-size:9px; color:var(--text-3); flex:0 0 auto; transition:transform .16s ease; }
.sa-chip[aria-expanded="true"] .sa-chev{ transform:rotate(180deg); }
/* Le panneau s'ouvre AU-DESSUS de la pastille : elle est collée au bas de
   l'écran, et rien ne peut se déplier en dessous. */
.sa-panneau{
  display:flex; flex-direction:column; gap:12px;
  margin:0 0 8px; padding:14px; border-radius:12px;
  border:1px solid var(--border); background:var(--panel-raised);
}
.sa-panneau[hidden]{ display:none; }
.sa-p-nom{ font-size:12.5px; font-weight:600; color:var(--text-1); overflow-wrap:anywhere; }
.sa-p-role{ font-size:10px; color:var(--text-3); text-transform:uppercase; letter-spacing:.06em; margin-top:3px; }
.sa-p-google{ display:flex; flex-direction:column; gap:8px; }
.sa-p-google[hidden]{ display:none; }
.sa-p-meta{
  display:flex; flex-direction:column; gap:2px;
  font-family:var(--font-mono); font-size:10px; color:var(--text-3);
  padding-top:10px; border-top:1px solid var(--border-soft);
}
.sa-actions{ display:flex; gap:6px; }
/* La connexion Google (G2) : un état, un bouton, et l'alerte quand il y en a
   une. Les couleurs viennent des jetons du thème, clair comme sombre. */
.sa-google{ display:flex; flex-direction:column; gap:6px; margin:0 0 9px; }
.sa-google[hidden]{ display:none; }
.sag-ligne{ display:flex; align-items:center; gap:7px; font-size:11px; color:var(--text-2); }
.sag-point{ width:7px; height:7px; border-radius:50%; background:var(--text-3); flex:0 0 auto; }
.sag-point.sag-actif{ background:var(--teal); }
.sag-note{ font-size:10.5px; color:var(--text-3); line-height:1.45; }
.sag-suivis{ font-size:10.5px; color:var(--text-2); line-height:1.45; font-variant-numeric:tabular-nums; }
.sag-suivis b{ color:var(--text-1); font-weight:600; }
/* Ce qu'Órama lira, avant le clic (G4, écran 1) : une liste courte, lisible
   d'un coup d'œil dans la colonne — pas un paragraphe qu'on saute. */
.sag-promesse{ margin:2px 0 0; padding:0 0 0 14px; font-size:10.5px; color:var(--text-2); line-height:1.5; }
.sag-promesse li{ margin:1px 0; }
.sag-promesse b{ color:var(--text-1); font-weight:600; }
.sag-alerte{ font-size:10.5px; color:var(--red); line-height:1.45; }
.sa-google .sa-btn{ align-self:flex-start; }
/* « Utiliser un autre compte Google » : un lien, pas un bouton. C'est le
   geste d'un gestionnaire sur dix, qui suit ses clients sous une autre
   identité Google ; il ne doit pas peser autant que ce qui sert à tous. */
.sag-lien{ all:unset; align-self:flex-start; font-size:10.5px; color:var(--text-2); text-decoration:underline;
  text-underline-offset:2px; cursor:pointer; }
.sag-lien:hover{ color:var(--text-1); }
.sag-lien:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; border-radius:3px; }
.sag-lien[disabled]{ opacity:.6; cursor:progress; }
.gate-google .sag-lien{ align-self:center; font-size:12px; }
/* Le bouton « Continuer avec Google », à la charte de Google (voir
   `boutonCharteGoogleEcran` dans connexion-google.js). Ses valeurs sont celles de
   la charte, relevées le 19 septembre 2026 — pas des jetons du thème :
   thème sombre de Google en sombre (#131314, contour #8E918F, texte
   #E3E3E3), thème clair de Google en clair (#FFFFFF, #747775, #1F1F1F).
   Google Sans Medium 14/20. Le « G » repose sur un disque blanc, comme dans
   le bouton que Google dessine lui-même en thème sombre. */
.gsi-bouton{
  display:inline-flex; align-items:center; gap:10px; align-self:flex-start; max-width:100%;
  min-height:40px; padding:4px 14px 4px 6px; border-radius:20px; box-sizing:border-box; text-align:left;
  background:#131314; border:1px solid #8E918F; color:#E3E3E3;
  font-family:'Google Sans', Roboto, Arial, sans-serif; font-weight:500; font-size:14px; line-height:20px;
  letter-spacing:.25px; cursor:pointer; transition:box-shadow .2s ease;
}
.gsi-bouton:hover:not([disabled]){ box-shadow:0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15); }
.gsi-bouton:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }
.gsi-bouton[disabled]{ opacity:.6; cursor:progress; }
.gsi-logo{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:28px; height:28px; border-radius:50%; background:#FFFFFF; }
.gsi-logo svg{ width:18px; height:18px; display:block; }
/* Le libellé passe à la ligne plutôt que d'être coupé : dans une colonne
   étroite, « Continuer avec … » perdait précisément le mot « Google » — ce
   que la charte interdit (un bouton qui ne dit pas ce qu'il ouvre). */
.gsi-texte{ white-space:normal; }
:root[data-theme="clair"] .gsi-bouton{ background:#FFFFFF; border-color:#747775; color:#1F1F1F; }
.sa-google .sa-btn[disabled]{ opacity:.6; cursor:progress; }

/* --- G3 · le portefeuille lu chez Google, dans le tiroir ---
   L'état de chaque plateforme est une PASTILLE, pas une couleur de texte :
   « accès en attente » et « 0 fiche » doivent se distinguer d'un coup
   d'œil, y compris pour qui distingue mal les couleurs — d'où un fond, un
   contour et des mots, et pas seulement une teinte. */
.gc-bloc{ margin:0 0 20px; }
.gc-titre{
  display:flex; align-items:center; gap:8px; margin:0 0 8px;
  font-size:12.5px; font-weight:600; color:var(--text-1);
}
.gc-titre i{ color:var(--text-3); width:14px; text-align:center; }
.gc-etat{
  margin-left:auto; font-size:10.5px; font-weight:500; padding:2px 8px;
  border-radius:999px; border:1px solid var(--border); color:var(--text-2);
  background:var(--panel-alt); white-space:nowrap;
}
.gcp-ok{ color:var(--text-1); }
/* `--violet` est le troisième accent — le jaune Google, défini dans les
   DEUX thèmes. Pas `--amber` : dans le tableau de bord ce jeton porte le
   bleu de l'accent, et « accès en attente » se serait confondu avec
   l'état normal au lieu d'appeler l'œil. */
.gcp-attente{ color:var(--violet); border-color:color-mix(in srgb, var(--violet) 45%, var(--border)); background:var(--violet-soft); }
.gcp-absent{ color:var(--text-3); }
/* L'écran 3 : « en cours » se distingue d'un résultat par la forme — un
   contour pointillé — et pas seulement par le gris. */
.gcp-encours{ color:var(--text-3); font-style:italic; border-style:dashed; }
.gc-ligne-lecture{ align-items:center; padding:8px 0; }
.gc-ligne-lecture i{ color:var(--text-3); width:14px; text-align:center; margin-right:4px; }
.gc-lecture .gc-note{ margin-top:14px; }
.gc-groupe{ margin:0 0 10px; }
.gc-chef{ font-size:11px; color:var(--text-3); margin:0 0 3px; letter-spacing:.02em; }
.gc-item{
  display:flex; align-items:baseline; gap:10px; padding:4px 0;
  border-bottom:1px solid var(--border-soft); font-size:12px; color:var(--text-1);
}
.gc-item:last-child{ border-bottom:none; }
.gc-nom{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gc-id{ font-family:var(--font-mono); font-size:10.5px; color:var(--text-3); flex:0 0 auto; }
.gc-mcc{ color:var(--amber); font-size:10px; margin-right:2px; }
.gc-mou{ color:var(--text-3); font-style:italic; }
/* Les rattachements posés à la naissance du dossier, sous sa ligne : en
   retrait, parce qu'ils lui appartiennent et ne sont pas des dossiers. */
.gc-attaches{
  display:flex; flex-wrap:wrap; gap:6px;
  margin:-4px 0 10px 12px; padding-left:10px; border-left:1px solid var(--border-soft);
}
.gc-attache{
  font-size:11px; color:var(--text-2);
  padding:3px 9px; border-radius:20px; border:1px solid var(--border); background:var(--panel-alt);
}
.gc-attache.gc-mou{ border-style:dashed; background:transparent; }
.gc-vide{ font-size:11.5px; color:var(--text-3); line-height:1.5; padding:4px 0; }
.gc-erreur{ color:var(--red); }
.gc-note{ font-size:10.5px; color:var(--text-3); line-height:1.5; margin-top:6px; }
.gc-souci{ color:var(--violet); }
.gc-motif{ color:var(--text-3); font-family:var(--font-mono); font-size:9.5px; }
/* G4bis — l'écran de sélection. La case et son emplacement vide ont la
   MÊME largeur : sans cela, une ligne déjà suivie paraîtrait d'un niveau
   plus haut que sa voisine cochable, et l'arbre mentirait sur la
   profondeur. */
.gc-case, .gc-case-vide{ flex:0 0 14px; width:14px; height:14px; margin:0; align-self:center; }
.gc-case{ accent-color:var(--amber); cursor:pointer; }
.gc-cochable{ cursor:pointer; }
.gc-cochable:hover .gc-nom{ color:var(--text-1); text-decoration:underline; text-decoration-color:var(--border-fort); }
.gc-cochable:focus-within{ outline:2px solid var(--amber); outline-offset:1px; border-radius:4px; }
/* UN NOM QUI PORTE UNE EXPLICATION PASSE EN COLONNE. La règle était
   écrite deux fois, pour deux cas nommés — « déjà suivi » et « refusé » —
   si bien qu'un troisième (l'administrateur qui dit ce que sa case fait)
   sortait collé à la suite du nom, sur la même ligne. Elle vise
   désormais la FORME : tout nom accompagné d'une sous-ligne. */
.gc-nom:has(.gc-sous){ display:flex; flex-direction:column; white-space:normal; }
.gc-nom-texte{ color:var(--text-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gc-sous{ font-size:10.5px; color:var(--text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* LE FILTRE (22 septembre 2026). Il ne paraît qu'au-delà d'un
   portefeuille où il sert ; sa phrase de résultat se pose ENTRE le champ
   et la liste, là où les lignes commenceraient — donc là où l'œil est
   quand rien ne correspond. Sa hauteur est réservée même vide : sans
   cela, la liste sautait d'une ligne à la première frappe puis revenait
   à l'effacement, sous les doigts de qui cherche. */
.gc-filtre{ margin:0 0 10px; }
.gc-filtre-titre{
  display:block; margin-bottom:6px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-3);
}
/* `color-scheme` ne se pose plus ici (23 septembre 2026). Cette paire
   rattrapait élément par élément une asymétrie du thème partagé : le
   bloc clair déclarait `color-scheme`, le sombre non, et la croix
   d'effacement que Chrome dessine dans un `type=search` sortait claire
   sur fond sombre. La propriété est descendue dans `:root` du thème —
   trois produits, tous les widgets, et la bascule la remplace au même
   endroit. Une rustine par élément est d'ailleurs fausse par
   construction : elle force le même camaïeu dans les DEUX thèmes. */
.gc-filtre-champ{ padding:8px 11px; font-size:12.5px; }
.gc-filtre-champ:focus-visible{ outline:2px solid var(--amber); outline-offset:1px; }
.gc-filtre-bilan{
  margin:6px 0 0; min-height:1.25em;
  font-size:10.5px; color:var(--text-3); font-variant-numeric:tabular-nums;
}
/* Rien ne correspond : la phrase est alors la SEULE chose à l'écran sous
   le champ, et le gris de service se lit comme une légende qu'on saute. */
.gc-filtre-bilan.gc-filtre-rien{ color:var(--text-2); font-style:italic; }

/* Collée au bas du tiroir : `bottom` négatif rattrape le padding du
   corps, sinon le contenu défilerait visible SOUS la barre. */
/* La marge droite laisse la place au bouton du thème (`#theme-toggle`,
   fixé à 18 px du coin, 34 px de large, au-dessus du tiroir) : sans elle,
   il recouvrait la fin de « Créer 3 dossiers clients » — c'est-à-dire
   précisément le nombre, la seule partie du libellé qui engage. */
.gc-barre{
  position:sticky; bottom:-20px; margin:16px -20px -20px; padding:12px 64px 12px 20px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--bg-soft); border-top:1px solid var(--border);
}
.gc-compteur{ flex:1 1 140px; font-size:11.5px; color:var(--text-2); font-variant-numeric:tabular-nums; }
.gc-creer{ flex:0 0 auto; }
.gc-creer:disabled{ opacity:.55; cursor:not-allowed; }
/* L'écran 5. La pastille de plateforme est un mot dans un contour, pas
   une pastille de couleur : elle doit se lire sur les deux thèmes et à
   l'impression. */
.gc-pastille-ads{
  flex:0 0 auto; font-size:10px; padding:1px 7px; border-radius:999px;
  border:1px solid var(--border); color:var(--text-2); background:var(--panel-alt);
}
.gc-ouvrir{ flex:0 0 auto; padding:3px 9px; }
.gc-refus .gc-sous{ white-space:normal; color:var(--violet); }
.gc-promesse{ font-size:11.5px; color:var(--text-2); line-height:1.55; margin:4px 0 14px; max-width:60ch; }
.gc-suites{ display:flex; gap:8px; flex-wrap:wrap; }
.gc-suites a{ text-decoration:none; }
.sa-btn{
  flex:1; background:var(--panel-alt); border:1px solid var(--border); color:var(--text-2);
  border-radius:7px; padding:6px 8px; font-size:11px; font-family:inherit; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:5px; transition:border-color .15s ease,color .15s ease;
}
.sa-btn:hover{ border-color:var(--amber); color:var(--text-1); }
/* Le client n'a qu'un espace : le bouton « Espaces » n'aurait rien à montrer. */
/* Le bouton reste visible pour les clients. Il l'était masqué tant que
   le portail ne servait qu'à choisir un espace — inutile pour qui n'en
   a qu'un. Mais c'est aussi la seule page où l'on change son mot de
   passe : le cacher enfermait le client dans son tableau de bord, sans
   autre issue que la déconnexion. */
/* `.sidebar-foot`, `.foot-clock` et `.foot-period` sont partis avec le pied
   de la barre (22 septembre 2026) : le compte de fichiers et la version
   vivent désormais dans `.sa-p-meta`, et l'horloge nulle part. */

/* Transparent : c'est le body qui porte les champs de lumière, et un
   aplat ici les masquerait entièrement. */
.main{ flex:1; display:flex; flex-direction:column; height:100%; min-width:0; background:transparent; position:relative; }

/* La bascule est stylée par `commun/orama-theme.css`. Ici, une seule
   différence : dans le tableau de bord elle se cale sur la zone de
   contenu (position absolue), pas sur la fenêtre — la barre latérale
   ne doit pas passer dessous. */
.orama-theme-toggle{ position:absolute; }
@media (max-width:900px){ .orama-theme-toggle{ position:fixed; } }

.mobile-header{
  display:none; background:var(--bg-soft); border-bottom:1px solid var(--border-soft);
  padding:12px 16px; align-items:center; justify-content:space-between; gap:10px;
}
@media (max-width:900px){ .mobile-header{ display:flex; } }
.mobile-header select{
  background:var(--panel); color:var(--text-1); border:1px solid var(--border); border-radius:8px;
  padding:7px 10px; font-family:var(--font-body); font-size:12.5px;
  max-width:54vw; min-width:0; flex-shrink:1;
}
@media (max-width:420px){ .mobile-header select{ max-width:50vw; font-size:11.5px; padding:7px 8px; } }

.content-scroll{ flex:1; overflow-y:auto; overflow-x:hidden; padding:28px 32px 60px; }
@media (max-width:700px){ .content-scroll{ padding:18px 16px 48px; } }
@media (max-width:480px){ .content-scroll{ padding:14px 12px 40px; } }
body{ overflow-x:hidden; }

.tab-content{ display:none; }
.tab-content.active{ display:block; animation:fadeUp .35s ease; }
@keyframes fadeUp{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }

.page-head{ margin-bottom:22px; display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.page-eyebrow{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); margin-bottom:6px; }
.page-title{ font-size:25px; font-weight:700; color:var(--text-1); }
.page-desc{ color:var(--text-2); margin-top:6px; font-size:13.5px; max-width:640px; line-height:1.5; }
@media (max-width:480px){
  .page-head{ margin-bottom:18px; }
  .page-title{ font-size:20px; }
  .page-desc{ font-size:12.5px; }
}

/* ============================================================
   PRIMITIVES
   ============================================================ */
/* LA CARTE EST LA SURFACE DE TOUT LE BACK-OFFICE : une vingtaine de
   modules s'appuient dessus sans le savoir. La passer au verre ici
   suffit à basculer l'ensemble, dans les deux thèmes. */
.card{
  background:var(--verre);
  backdrop-filter:var(--verre-flou); -webkit-backdrop-filter:var(--verre-flou);
  border:1px solid var(--verre-bord); border-radius:var(--radius-lg);
  box-shadow:var(--verre-liseré);
  transition:box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.card:hover{ box-shadow:var(--verre-ombre); border-color:var(--verre-bord-net); }
.card-pad{ padding:22px; }
@media (max-width:480px){ .card-pad{ padding:16px; } }
/* Tuiles KPI du cockpit. Fond sombre et barre d'accent colorée à gauche,
   comme les cartes du module Trading : la couleur qualifie la mesure sans
   repeindre le fond. Les aplats saturés d'avant cassaient l'uniformité des
   deux back-offices et imposaient un texte sombre à contre-courant. */
.kpi-g{ background:var(--verre-haut); border:1px solid var(--verre-bord); position:relative; overflow:hidden; }
.kpi-g::after{ content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--border); }
.kpi-g-blue::after{   background:var(--g-blue); }
.kpi-g-red::after{    background:var(--g-red); }
.kpi-g-yellow::after{ background:var(--g-yellow); }
.kpi-g-green::after{  background:var(--g-green); }
.kpi-g-muted{ opacity:.72; }
.card-l-amber{ border-left:3px solid var(--amber); }
.card-l-teal{ border-left:3px solid var(--teal); }
.card-l-red{ border-left:3px solid var(--red); }
.card-l-muted{ border-left:3px solid var(--border); }
.card-l-violet{ border-left:3px solid var(--violet); }

.grid{ display:grid; gap:16px; }
.grid > *{ min-width:0; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-5{ grid-template-columns:repeat(5,1fr); }
@media (max-width:1180px){ .grid-5{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:1100px){ .grid-4{ grid-template-columns:repeat(2,1fr); } .grid-5{ grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);} }
@media (max-width:900px){ .grid{ gap:14px; } }
@media (max-width:560px){ .grid-2,.grid-3,.grid-4,.grid-5{ grid-template-columns:1fr; } }
.dropzone-grid{ grid-template-columns:1fr 2fr; }
@media (max-width:760px){ .dropzone-grid{ grid-template-columns:1fr; } }

.eyebrow{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); }
.h-title{ font-size:15.5px; font-weight:600; color:var(--text-1); margin-bottom:2px; }
.muted{ color:var(--text-2); font-size:13px; line-height:1.55; }
.small-muted{ color:var(--text-3); font-size:11.5px; }
.mono{ font-family:var(--font-mono); }

.badge{ display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:10.5px; padding:3px 9px; border-radius:20px; letter-spacing:.03em; }
/* ---- Checklist « donner vos accès » (Data Lake) ----
   Une ligne repliée par plateforme : la liste doit se lire d'un coup
   d'œil, le mode d'emploi ne s'ouvre que sur celle qu'on traite. */
.acces-ligne{ border:1px solid var(--border); border-radius:10px; margin-bottom:8px; overflow:hidden; }
.acces-tete{ display:flex; align-items:center; gap:12px; padding:11px 14px; cursor:pointer; }
.acces-tete:hover{ background:var(--panel-alt); }
.acces-ic{ width:18px; text-align:center; color:var(--text-3); }
.acces-nom{ font-weight:600; font-size:13px; color:var(--text-1); }
.acces-fleche{ font-size:10px; color:var(--text-3); transition:transform .18s ease; }
.acces-ligne.ouvert .acces-fleche{ transform:rotate(180deg); }
.acces-corps{ display:none; padding:2px 14px 14px 44px; border-top:1px solid var(--border-soft); }
.acces-ligne.ouvert .acces-corps{ display:block; }
.acces-etapes{ margin:0 0 12px; padding-left:18px; color:var(--text-2); font-size:12.5px; line-height:1.75; }
.acces-etapes li{ margin-bottom:3px; }
.acces-etapes b{ color:var(--text-1); font-weight:600; }
.acces-boutons{ display:flex; gap:6px; flex-wrap:wrap; }
.acces-boutons .btn.actif{ border-color:var(--amber); color:var(--amber); }
/* Dossier client : séparateur de section et rappel de l'état déclaré. */
.pm-sep{ margin:22px 0 4px; padding-top:16px; border-top:1px solid var(--border);
  font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-3); font-weight:700; }
.pm-acces{ margin:6px 0 2px; }
/* Une pastille pose SA TEINTE sous son propre texte : le fond remonte,
   et la couleur de rôle n'y tient plus. `--teal` tombe à 4,27:1 sur
   `--teal-soft` en thème clair. Les encres sont mesurées sur la teinte,
   pas sur la page — même règle que pour la barre latérale et les
   pastilles du module Trading. */
.badge-amber{ background:var(--amber-soft); color:var(--amber-encre); }
.badge-teal{ background:var(--teal-soft); color:var(--teal-encre); }
.badge-red{ background:var(--red-soft); color:var(--red-encre); }
.badge-muted{ background:var(--panel-alt); color:var(--text-2); border:1px solid var(--border); }
.badge-violet{ background:var(--violet-soft); color:var(--violet-encre); }

/* ============================================================
   SOURCE TAGGING — identifie visuellement de quel système
   provient chaque donnée (Google Ads / Analytics GA4 / GMB).
   Icônes génériques Font Awesome, pas les logos de marque
   officiels de Google (droits réservés) — voir légende.
   ============================================================ */
.source-badge{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:10.5px; padding:4px 11px 4px 4px; border-radius:20px; letter-spacing:.03em; }
.source-badge .src-ic{ width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:9px; flex-shrink:0; }
/* Pastilles de source : fond teinté de la plateforme, libellé en blanc, rondelle
   d'icône à la couleur exacte du logo (charte Google pour le mode sombre). */
.source-badge.src-ads{ background:var(--src-ads-soft); color:var(--text-1); }
.source-badge.src-ads .src-ic{ background:var(--src-ads); color:#fff; }
.source-badge.src-analytics{ background:var(--src-ga4-soft); color:var(--text-1); }
.source-badge.src-analytics .src-ic{ background:linear-gradient(150deg,var(--src-ga4-lite),var(--src-ga4)); color:#fff; }
.source-badge.src-gmb{ background:var(--src-gmb-soft); color:var(--text-1); }
.source-badge.src-gmb .src-ic{ background:var(--src-gmb); color:#fff; }

.source-mark{ width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; }
.source-mark.src-ads{ background:rgba(66,133,244,.14); color:var(--amber); }
.source-mark.src-analytics{ background:rgba(52,168,83,.14); color:var(--teal); }
.source-mark.src-gmb{ background:rgba(251,188,5,.14); color:var(--violet); }

.source-legend{ display:flex; gap:8px; flex-wrap:wrap; }

/* card hover lift — subtle, used on interactive summary cards */
.card-hover{ transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.card-hover:hover{ transform:translateY(-2px); border-color:var(--border-fort); box-shadow:0 10px 26px rgba(0,0,0,.28); }


.btn{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body); font-weight:600; font-size:12.5px;
  padding:9px 16px; border-radius:9px; border:1px solid var(--border); background:var(--panel-alt); color:var(--text-1);
  cursor:pointer; transition:all .15s;
}
.btn:hover{ background:var(--panel-raised); border-color:var(--border-fort); }
/* Bouton d'action : bleu Google plein + texte blanc, comme dans Google Ads */
.btn-primary{ background:var(--g-blue-action); border-color:var(--g-blue-action); color:#fff; }
.btn-primary:hover{ background:#1B66C9; border-color:#1B66C9; }
.btn-teal{ background:var(--teal); border-color:var(--teal); color:var(--sur-accent); }
.btn-teal:hover{ background:#4fe0cd; }
.btn-sm{ padding:6px 11px; font-size:11.5px; }
.btn-ghost{ background:transparent; }
.btn:disabled{ opacity:.4; cursor:not-allowed; }

/* `input.field` et `input:not([type])` en plus des types explicites : sans
   eux, un champ écrit `<input class="field">` — sans attribut `type`, ce qui
   est permis et vaut « text » — ne matchait aucun sélecteur et retombait sur
   le style par défaut du navigateur : fond BLANC, texte noir, au milieu d'une
   interface sombre. Sept champs du dossier client étaient dans ce cas. */
input[type=text], input[type=number], input[type=range], input[type=email],
input[type=url], input[type=search], input:not([type]), input.field,
select.field, textarea{
  font-family:var(--font-body); background:var(--bg-soft); border:1px solid var(--border); color:var(--text-1);
  border-radius:8px; padding:9px 11px; font-size:13px; width:100%;
}
label.field-label{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); display:block; margin-bottom:6px; }

.progress-track{ height:6px; background:var(--bg-soft); border-radius:20px; overflow:hidden; border:1px solid var(--border); }
.progress-fill{ height:100%; border-radius:20px; transition:width .5s ease; }

table.data-table{ width:100%; border-collapse:collapse; font-size:12.5px; }
table.data-table th{ text-align:left; font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); padding:9px 10px; border-bottom:1px solid var(--border); font-weight:500; }
table.data-table td{ padding:10px; border-bottom:1px solid var(--border-soft); color:var(--text-1); vertical-align:middle; }
table.data-table tr:last-child td{ border-bottom:none; }
table.data-table tr:hover td{ background:var(--survol); }

/* Clickable rows / cards / blocks that open an insight drawer */
.ads-click{ cursor:pointer; }
tr.ads-click{ transition:background .12s; }
tr.ads-click:hover td{ background:rgba(52,168,83,.08); }
.card.ads-click{ transition:border-color .15s, box-shadow .18s ease; }
.card.ads-click:hover{ border-color:var(--teal); }
/* generic hover ring for clickable blocks that are neither a card nor a table row */
.ads-click:not(.card):not(tr){ transition:box-shadow .15s ease; }
.ads-click:not(.card):not(tr):hover{ box-shadow:0 0 0 1px var(--teal) inset; }
.click-hint{ font-family:var(--font-body); font-size:11px; font-weight:400; color:var(--text-3); margin-left:8px; }
.click-hint i{ margin-right:4px; color:var(--teal); }
/* Blocs de contenu curé (démo) — masqués pour les profils non-démo afin
   de ne jamais croiser des données démo avec des données réelles importées. */

/* Structure campagne → groupes d'annonces → mots-clés */
.camp-struct{ margin-top:10px; border-top:1px dashed var(--border); padding-top:10px; display:flex; flex-direction:column; gap:8px; cursor:default; }
.camp-struct-group{ background:var(--bg-soft); border:1px solid var(--border-soft); border-radius:9px; padding:10px 12px; }
.camp-struct-btn{ margin-top:10px; padding:4px 9px; font-size:11px; background:transparent; border:1px solid var(--border); border-radius:7px; color:var(--text-2); cursor:pointer; transition:all .15s; }
.camp-struct-btn:hover{ border-color:var(--teal); color:var(--text-1); }

/* ============================================================
   CHIFFRES CLÉS — affichage sobre.
   L'ancien tableau à volets (« split-flap », façon panneau
   d'aéroport) est retiré : plus de tuiles, plus de bascule.
   Les classes restent : elles sont l'ancrage du HTML et de socle.js.
   ============================================================ */
.flap-group{
  display:inline-block;
  font-family:var(--font-mono); font-weight:600;
  font-variant-numeric:tabular-nums; line-height:1.2;
}
.flap-lg{ font-size:26px; }
.flap-md{ font-size:18px; }
.flap-sm{ font-size:13px; }

/* ============================================================
   KPI cards
   ============================================================ */
.kpi-card{ padding:19px 20px; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.kpi-card:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.28); border-color:var(--border-fort); }
.kpi-label{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); margin-bottom:10px; }
.kpi-value-row{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.kpi-unit{ font-family:var(--font-mono); font-size:12px; color:var(--text-2); }
.kpi-foot{ margin-top:11px; font-size:11.5px; display:flex; align-items:center; gap:6px; }
.kpi-foot.bad{ color:var(--red); }
.kpi-foot.warn{ color:var(--amber); }
.kpi-foot.good{ color:var(--teal); }

/* ============================================================
   Alert / callout box
   ============================================================ */
.alert{ border-radius:var(--radius-lg); padding:20px 22px; display:flex; gap:16px; align-items:flex-start; }
.alert-red{ background:linear-gradient(135deg,rgba(234,67,53,.09),rgba(234,67,53,.03)); border:1px solid rgba(234,67,53,.28); }
.alert-amber{ background:linear-gradient(135deg,rgba(66,133,244,.09),rgba(66,133,244,.03)); border:1px solid rgba(66,133,244,.28); }
.alert-teal{ background:linear-gradient(135deg,rgba(52,168,83,.09),rgba(52,168,83,.03)); border:1px solid rgba(52,168,83,.28); }
/* Le ton « vigilance » (🟡 de la Kbase) : ni un problème à corriger, ni une
   information neutre — une chose à ne pas conclure trop vite. */
.alert-violet{ background:linear-gradient(135deg,rgba(251,188,5,.09),rgba(251,188,5,.03)); border:1px solid rgba(251,188,5,.28); }
.alert-icon{ width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:16px; }
.alert-red .alert-icon{ background:rgba(234,67,53,.15); color:var(--red); }
.alert-amber .alert-icon{ background:rgba(66,133,244,.15); color:var(--amber); }
.alert-teal .alert-icon{ background:rgba(52,168,83,.15); color:var(--teal); }
.alert-violet .alert-icon{ background:rgba(251,188,5,.15); color:var(--violet); }

/* ---------- Règles de la Kbase non tranchables ----------
   Volontairement discret : ce sont des contrôles en attente de données,
   pas des alertes. Les mettre au même niveau visuel que les alertes
   réelles noierait ces dernières. */
.kb-gaps{ display:flex; flex-direction:column; gap:1px; background:var(--border); border:1px solid var(--border);
  border-radius:10px; overflow:hidden; }
.kb-gap{ display:flex; align-items:flex-start; gap:11px; padding:10px 13px; background:var(--panel); }
.kb-gap-ton{ width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:5px; }
.kb-ton-critique{ background:var(--red); }
.kb-ton-attention{ background:var(--amber); }
.kb-ton-vigilance{ background:var(--violet); }
.kb-ton-opportunite{ background:var(--teal); }
.kb-gap-t{ font-size:12.5px; color:var(--text-1); line-height:1.45; }
.kb-gap-m{ font-size:11.5px; color:var(--text-3); line-height:1.55; margin-top:2px; }
.kb-gap-src{ margin-left:auto; flex-shrink:0; font-size:9.5px; align-self:center; }
@media(max-width:640px){
  .kb-gap{ flex-wrap:wrap; }
  .kb-gap-src{ margin-left:19px; align-self:flex-start; }
}
.alert-title{ font-family:var(--font-display); font-weight:700; font-size:15.5px; color:var(--text-1); margin-bottom:7px; }
.alert p{ color:var(--text-2); font-size:13px; line-height:1.65; }
.alert code, .alert strong{ color:var(--text-1); }
.formula-chip{ display:inline-block; font-family:var(--font-mono); font-size:11.5px; background:var(--bg-soft); border:1px solid var(--border); border-radius:6px; padding:2px 7px; margin:0 2px; color:var(--text-1); }

/* ============================================================
   Funnel
   ============================================================ */
.funnel{ position:relative; max-width:640px; margin:0 auto; }
.funnel-line{ position:absolute; left:20px; top:22px; bottom:22px; width:2px; background:linear-gradient(180deg,var(--teal),var(--red)); opacity:.35; }
.funnel-step{ position:relative; display:flex; align-items:center; margin-bottom:16px; }
.funnel-node{ width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; color:#fff; flex-shrink:0; z-index:1; box-shadow:0 4px 12px rgba(0,0,0,.35); }
.funnel-body{ margin-left:18px; flex:1; border-radius:var(--radius-md); padding:14px 16px; border:1px solid var(--border); }
.funnel-body.ok{ background:var(--panel-alt); }
.funnel-body.bad{ background:linear-gradient(135deg,rgba(234,67,53,.08),rgba(234,67,53,.02)); border-color:rgba(234,67,53,.3); }

/* ============================================================
   Data lake / file upload
   ============================================================ */
.dropzone{
  border:2px dashed #2c3b5f; border-radius:var(--radius-lg); padding:30px 22px; text-align:center;
  cursor:pointer; transition:border-color .15s, background .15s; height:100%; min-height:230px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.dropzone:hover, .dropzone.drag{ border-color:var(--amber); background:rgba(66,133,244,.04); }
.dropzone-ic{ width:56px; height:56px; border-radius:50%; background:var(--amber-soft); color:var(--amber); display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:14px; }

.file-row-ic{ width:30px; height:30px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:12.5px; flex-shrink:0; }
.file-row-ic.csv{ background:var(--teal-soft); color:var(--teal); }
.file-row-ic.pdf{ background:var(--red-soft); color:var(--red); }
.file-row-ic.xlsx{ background:var(--amber-soft); color:var(--amber); }

.pill-select{ display:flex; flex-wrap:wrap; gap:8px; }
.pill-opt{ font-family:var(--font-mono); font-size:11px; padding:6px 12px; border-radius:20px; border:1px solid var(--border); background:var(--panel-alt); color:var(--text-2); cursor:pointer; transition:all .15s; }
.pill-opt:hover{ border-color:var(--text-3); }
.pill-opt.selected{ background:var(--amber); border-color:var(--amber); color:var(--sur-accent); font-weight:600; }
.pill-opt.sm{ font-size:10.5px; padding:5px 10px; }
.pill-opt.sel-teal.selected{ background:var(--teal); border-color:var(--teal); color:var(--sur-accent); }

/* ---- Sélecteur de plage + comparaison de périodes ---- */
.range-ctl{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.range-ctl .field.date{ width:auto; min-width:138px; padding:6px 10px; font-size:11.5px; font-family:var(--font-mono); background:var(--bg-soft); border:1px solid var(--border); color:var(--text-1); border-radius:8px; }
.range-toggle{ display:inline-flex; align-items:center; gap:7px; font-size:11.5px; color:var(--text-2); cursor:pointer; user-select:none; }
.range-toggle input{ accent-color:var(--teal); width:14px; height:14px; }
.evo-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin-top:12px; }
.evo-kpi{ background:var(--panel-alt); border:1px solid var(--border); border-radius:10px; padding:11px 13px; }
.evo-kpi .lbl{ font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--text-3); }
.evo-kpi .val{ font-family:var(--font-mono); font-size:16px; font-weight:600; color:var(--text-1); margin-top:5px; }
.evo-kpi .dlt{ font-size:11px; margin-top:5px; font-family:var(--font-mono); }
.evo-kpi .dlt.up{ color:var(--teal); } .evo-kpi .dlt.down{ color:var(--red); } .evo-kpi .dlt.flat{ color:var(--text-3); }
.snap-chip{ display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-family:var(--font-mono); color:var(--text-2); background:var(--panel-alt); border:1px solid var(--border); border-radius:14px; padding:3px 9px; }

/* ---- Badge cockpit cliquable + popover de plage ---- */
button#cockpit-window{ cursor:pointer; border:1px solid var(--border); font:inherit; display:inline-flex; align-items:center; gap:7px; }
button#cockpit-window:hover{ border-color:var(--teal); color:var(--text-1); }
button#cockpit-window.ranged{ border-color:var(--teal); color:var(--teal); }
#global-range-indicator:hover{ border-color:var(--teal); color:var(--text-1); }
#global-range-indicator.ranged{ border-color:var(--teal); color:var(--teal); }
.range-pop{ position:absolute; top:calc(100% + 8px); left:0; z-index:60; background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:14px; width:min(300px,86vw); box-shadow:0 14px 34px rgba(0,0,0,.45); }
.range-pop .pop-title{ font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--text-3); margin-bottom:9px; }

.insight-box{ background:linear-gradient(135deg,rgba(52,168,83,.08),rgba(52,168,83,.02)); border:1px solid rgba(52,168,83,.28); border-radius:var(--radius-lg); padding:20px 22px; }

/* ============================================================
   Simulator
   ============================================================ */
.sim-slider-row{ margin-bottom:20px; }
.sim-slider-top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.sim-slider-val{ font-family:var(--font-mono); font-size:14px; color:var(--amber); font-weight:600; }
input[type=range]{ -webkit-appearance:none; height:5px; background:var(--bg-soft); border-radius:20px; padding:0; border:1px solid var(--border); }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:var(--amber); cursor:pointer; box-shadow:0 0 0 4px rgba(66,133,244,.18); }
input[type=range]::-moz-range-thumb{ width:16px; height:16px; border-radius:50%; background:var(--amber); border:none; cursor:pointer; box-shadow:0 0 0 4px rgba(66,133,244,.18); }

.sim-output-card{ text-align:center; padding:18px 12px; }
.sim-output-label{ font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); margin-bottom:10px; }

.scenario-chip{ display:flex; align-items:center; gap:8px; background:var(--panel-alt); border:1px solid var(--border); border-radius:20px; padding:6px 8px 6px 14px; font-size:12px; }

/* ============================================================
   Roadmap
   ============================================================ */
.status-pill{ font-family:var(--font-mono); font-size:10.5px; padding:4px 11px; border-radius:20px; cursor:pointer; border:1px solid transparent; user-select:none; transition:filter .15s; }
.status-pill:hover{ filter:brightness(1.15); }
.status-todo{ background:var(--panel-alt); color:var(--text-2); border-color:var(--border); }
.status-inprogress{ background:var(--amber-soft); color:var(--amber); }
.status-done{ background:var(--teal-soft); color:var(--teal); }

.roadmap-card{ padding:22px; transition:border-color .18s ease, box-shadow .18s ease; }
.roadmap-card:hover{ box-shadow:0 10px 26px rgba(0,0,0,.22); border-color:var(--border-fort); }
.roadmap-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:14px; }
.roadmap-meta{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
/* ---- Objectif mesuré (KPI vivant relié aux données) ---- */
.obj-block{ background:var(--panel-alt); border:1px solid var(--border); border-radius:10px; padding:12px 14px; margin:14px 0; }
.obj-row{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.obj-label{ font-size:12px; font-weight:600; color:var(--text-1); display:inline-flex; align-items:center; gap:7px; }
.obj-vals{ display:flex; align-items:baseline; gap:10px; margin-top:8px; }
.obj-cur{ font-family:var(--font-mono); font-size:19px; font-weight:700; }
.obj-tgt{ font-family:var(--font-mono); font-size:11px; color:var(--text-3); }
.obj-hint{ font-size:11px; color:var(--text-3); margin-top:7px; }
.checklist-item{ display:flex; align-items:flex-start; gap:10px; padding:8px 0; border-bottom:1px solid var(--border-soft); font-size:12.5px; cursor:pointer; }
.checklist-item:last-child{ border-bottom:none; }
.checklist-box{ width:16px; height:16px; border-radius:4px; border:1.5px solid var(--text-3); flex-shrink:0; margin-top:1px; display:flex; align-items:center; justify-content:center; font-size:10px; transition:all .15s; }
.checklist-item.checked .checklist-box{ background:var(--teal); border-color:var(--teal); color:#062521; }
.checklist-item.checked .checklist-txt{ color:var(--text-3); text-decoration:line-through; }
.checklist-txt{ color:var(--text-1); line-height:1.5; }

/* ============================================================
   Toast
   ============================================================ */
.toast{
  position:fixed; bottom:22px; right:22px; z-index:230; background:var(--panel-raised); border:1px solid var(--border);
  color:var(--text-1); padding:13px 18px; border-radius:10px; font-size:12.5px; display:flex; align-items:center; gap:9px;
  transform:translateY(14px); opacity:0; transition:all .3s ease; box-shadow:0 10px 30px rgba(0,0,0,.4); max-width:340px;
}
.toast.show{ transform:translateY(0); opacity:1; }

.chart-wrap{ position:relative; }

/* generic empty state */
.empty-state{ text-align:center; padding:30px 16px; color:var(--text-3); font-size:12.5px; }

/* ============================================================
   Drawer (slide-in detail panel)
   ============================================================ */
/* L'ÉTAGEMENT DES COUCHES, et pourquoi il passe au-dessus de l'écran de
   choix (200). Tiroir, fenêtre de dossier et notifications étaient rangés
   sous lui (95, 115, 100) : ouverts DEPUIS l'écran de choix — « Gérer les
   profils », 🔗 —, ils s'affichaient derrière, invisibles, et le clic
   paraissait ne rien faire. Constaté le 19 septembre 2026 au navigateur :
   la fenêtre de dossier ouverte, l'écran de choix au premier plan. Depuis
   que les dossiers se créent depuis cet écran, la liste des comptes Google
   s'y ouvre aussi. Ordre : écran de choix 200 < tiroir 210-215 < fenêtre
   de dossier 220-225 < notification 230. */
.drawer-overlay{
  position:fixed; inset:0; background:rgba(5,9,18,.55); backdrop-filter:blur(2px);
  z-index:210; opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.drawer-overlay.open{ opacity:1; pointer-events:auto; }
.drawer{
  position:fixed; top:0; right:0; height:100%; width:440px; max-width:92vw;
  background:var(--bg-soft); border-left:1px solid var(--border);
  z-index:215; transform:translateX(100%); transition:transform .3s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column;
}
/* L'ombre n'existe que tiroir OUVERT. Fermé, il reste posé juste hors de
   l'écran, et son ombre (-20 px, flou de 50) débordait dans la page : un
   liseré gris sur le bord droit, visible en thème clair — et au-dessus de
   l'écran de choix depuis que le tiroir passe devant lui. */
.drawer.open{ transform:translateX(0); box-shadow:-20px 0 50px rgba(0,0,0,.45); }
.drawer-head{ padding:18px 20px; border-bottom:1px solid var(--border-soft); display:flex; justify-content:space-between; align-items:center; flex-shrink:0; }
/* La bascule de thème flotte en haut à droite au-dessus de 900 px (34 px,
   à 22 px du bord) : elle couvrait EXACTEMENT le bouton de fermeture du
   tiroir. Constaté le 19 septembre 2026 — le point cliqué au centre de la
   croix était la bascule, et fermer la liste des comptes changeait le
   thème. Sous 900 px, elle descend en bas à droite : c'est la barre
   d'engagement (`.gc-barre`) qui lui laisse sa place. */
@media (min-width:901px){ .drawer-head{ padding-right:70px; } }
.drawer-body{ flex:1; overflow-y:auto; padding:20px; }

/* ============================================================
   ÉCRAN DE SÉLECTION DE PROFIL — première chose vue au lancement.
   Chaque profil a sa tuile ; à terme un client n'aura accès qu'à
   la sienne (paramètre d'URL ?profil=<id>).
   ============================================================ */
#profile-gate{
  position:fixed; inset:0; z-index:200; background:var(--bg);
  display:none; flex-direction:column; align-items:center;
  /* `safe center` et non `center` : quand le contenu dépasse la hauteur
     de l'écran — profils nombreux — un centrage strict le fait déborder
     PAR LE HAUT, hors d'atteinte du défilement. */
  justify-content:safe center;
  padding:5vh 20px; overflow-y:auto;
}
#profile-gate.open{ display:flex; }
/* ============================================================
   SPÉCIFICATION PARTAGÉE AVEC ÓRAMA TRADING
   Les valeurs ci-dessous sont reprises à l'identique dans
   trading/style.css (#gate). Les deux écrans de choix de profil
   doivent rester indiscernables à la couleur près : modifier ici sans
   reporter là-bas les fait diverger à nouveau.

   Sur un accès client, cet écran est le premier contact avec la
   plateforme : il doit la nommer exactement comme partout ailleurs.
   ============================================================ */
.gate-brand{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  margin:0 auto 28px;
}
.gate-brand .tuile{
  display:flex; align-items:center; justify-content:center;
  width:76px; height:76px; border-radius:20px;
  background:var(--panel-alt); border:1px solid var(--border);
}
.gate-brand .nom{
  font-family:var(--font-display); font-size:28px; font-weight:600;
  letter-spacing:-.01em; line-height:1; text-align:center;
}
.gate-brand .sous{
  font-size:13px; font-weight:500; color:var(--text-3); letter-spacing:.14em;
  text-transform:uppercase; margin-top:9px; text-align:center;
}
.gate-brand .sous b{ color:var(--amber); font-weight:600; }
#profile-gate.open .gate-brand,
#profile-gate.open .gate-title,
#profile-gate.open .gate-sub{ animation:gate-in .42s cubic-bezier(.2,.7,.3,1) both; }
#profile-gate.open .gate-title{ animation-delay:.06s; }
#profile-gate.open .gate-sub{ animation-delay:.12s; }
@keyframes gate-in{ from{ opacity:0; transform:translateY(9px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  #profile-gate.open .gate-brand,
  #profile-gate.open .gate-title,
  #profile-gate.open .gate-sub{ animation:none; }
}
.gate-title{
  font-size:clamp(26px,3.4vw,34px); font-weight:600; color:var(--text-1);
  margin:0 0 9px; text-align:center; letter-spacing:-.02em;
}
.gate-sub{
  font-size:13.5px; color:var(--text-2); margin:0 auto 40px; max-width:620px;
  text-align:center; line-height:1.6;
}
.gate-grid{
  display:flex; flex-wrap:wrap; gap:26px; justify-content:center; align-items:flex-start;
  max-width:900px; margin:0 auto;
}
/* Carte de profil — mêmes dimensions et même rayon que dans Órama
   Trading. Le rayon de 6 px d'origine était le seul de la plateforme :
   partout ailleurs la charte arrondit à 10 px et plus, et c'est ce
   détail qui faisait paraître les deux écrans étrangers l'un à l'autre. */
.gate-card{
  background:none; border:0; padding:0; cursor:pointer; font:inherit;
  display:flex; flex-direction:column; align-items:center; gap:12px; width:128px;
}
.gate-tile{
  width:128px; height:128px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-size:52px; font-weight:600; color:var(--text-1); letter-spacing:-1px;
  border:3px solid transparent; transition:border-color .16s ease, transform .16s ease;
  text-shadow:0 2px 10px rgba(0,0,0,.28);
}
.gate-card:hover .gate-tile, .gate-card:focus-visible .gate-tile{
  border-color:#fff; transform:translateY(-4px);
}
.gate-card:focus-visible{ outline:none; }
.gate-name{
  font-size:14.5px; font-weight:600; color:var(--text-2);
  transition:color .16s ease; text-align:center; line-height:1.35;
}
.gate-card:hover .gate-name, .gate-card:focus-visible .gate-name{ color:var(--text-1); }
.gate-acct{ display:block; font-size:10.5px; font-weight:400; color:var(--text-3); }
.gate-tile.add{
  background:var(--panel-alt); border:2px dashed var(--border); color:var(--text-3); font-size:38px;
}
.gate-actions{ margin-top:44px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.gate-btn{
  background:none; border:1px solid var(--text-3); color:var(--text-3);
  padding:9px 22px; border-radius:3px; font:inherit; font-size:13px; letter-spacing:1.5px;
  cursor:pointer; transition:border-color .16s ease, color .16s ease;
}
.gate-btn:hover{ border-color:var(--text-1); color:var(--text-1); }
.gate-tools{ display:flex; gap:8px; justify-content:center; min-height:26px; }
.gate-tool{
  background:var(--panel-alt); border:1px solid var(--border); color:var(--text-2);
  width:26px; height:26px; border-radius:6px; cursor:pointer; font-size:11px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.gate-tool:hover{ border-color:var(--teal); color:var(--teal); }
.gate-tool.danger:hover{ border-color:var(--red); color:var(--red); }
/* Session client verrouillée : ni bascule de profil, ni création */
body.client-locked #btn-switch-profile,
body.client-locked #btn-new-profile{ display:none !important; }
/* La connexion Google sous la grille de l'écran de choix : à vide, c'est
   l'écran 1 de l'inscription (ce qu'Órama lira, puis le bouton de Google) ;
   sinon, une ligne quand une connexion est en cours ou a échoué. Mêmes
   pièces que le bloc de la barre latérale, à la taille de cet écran. */
.gate-google{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  max-width:520px; margin:28px auto 0; text-align:left;
}
.gate-google[hidden]{ display:none; }
/* À vide, la grille ne porte rien : sa marge et celle du bloc Google
   s'additionnaient en un trou de près de 70 px sous le texte. */
.gate-grid:empty{ display:none; }
.gate-grid:empty + .gate-google{ margin-top:0; }
.gate-google .sag-promesse{ font-size:13px; align-self:stretch; padding-left:18px; }
.gate-google .sag-note, .gate-google .sag-alerte{ font-size:12.5px; text-align:center; }
.gate-google .gsi-bouton{ align-self:center; }
/* L'étape de l'inscription : un rang, une jauge, un titre. La maquette la
   pose en haut de chaque écran du parcours ; ici elle coiffe le bloc, qui
   EST l'écran. Les couleurs viennent des jetons — la maquette ne connaît
   que le thème sombre, et ce parcours se voit dans les deux. */
.gate-etape{ align-self:stretch; display:flex; flex-direction:column; gap:10px; }
.gate-etape-rang{
  display:flex; align-items:center; gap:12px;
  font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--text-3);
}
.gate-etape-jauge{
  flex:1; height:2px; border-radius:2px; background:var(--border-soft); overflow:hidden;
}
/*  et non  : dans Ads, l'accent s'appelle 
   (bleu Google) et  n'est défini QUE par le thème clair. Écrite
   avec lui, la jauge était transparente en sombre — un `var()` inconnu
   rend la déclaration invalide, sans rien lever. Le défaut a vécu une
   journée. */
.gate-etape-jauge > span{ display:block; height:100%; background:var(--amber); }
.gate-etape-titre{ font-size:17px; font-weight:600; color:var(--text-1); line-height:1.3; }
/* LE RÉGIME ÉTABLI, quand Google manque. Encadré, parce que c'est une
   étape qui reste à faire et non un commentaire ; sans rang, parce que ce
   n'est plus un parcours. */
.gate-bande{
  align-self:stretch; display:flex; flex-direction:column; gap:10px; align-items:flex-start;
  border:1px solid var(--border); border-radius:12px; padding:16px 18px; background:var(--panel-alt);
}
.gate-bande-titre{ font-size:14.5px; font-weight:600; color:var(--text-1); }
.gate-bande-dit{ font-size:12.5px; color:var(--text-2); line-height:1.55; }
/* Connecté : une ligne, et rien de plus. L'écran de choix n'a pas à
   redire ce que la barre latérale porte déjà. */
.gate-lien{
  display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-2);
}
/* LA SÉLECTION PLEIN ÉCRAN, pendant l'inscription (22 septembre 2026).
   Même contenu que dans le tiroir, une autre surface : les styles `.gc-*`
   ne connaissent pas leur contenant, et c'est ce qui permet d'en changer
   sans les dupliquer. Deux corrections tiennent à la largeur : la barre
   d'engagement du tiroir se colle au bas d'une colonne de 440 px avec des
   marges négatives calculées pour lui — ici elle se pose simplement, dans
   le cadre. */
.gate-selection{
  width:100%; max-width:820px; margin:8px auto 0;
  border:1px solid var(--border); border-radius:14px; background:var(--panel);
  padding:20px; text-align:left;
}
.gate-selection[hidden]{ display:none; }
.gate-selection .gc-barre{
  position:static; margin:16px -20px -20px; padding:14px 20px;
  border-radius:0 0 13px 13px;
}
.gate-restes{
  align-self:stretch; border:1px dashed var(--border); border-radius:10px;
  padding:12px 14px; display:flex; flex-direction:column; gap:10px; align-items:flex-start;
}
.gate-restes p{ margin:0; font-size:12.5px; color:var(--text-2); line-height:1.55; }
.gate-restes b{ color:var(--text-1); font-weight:600; }
@media (max-width:600px){
  .gate-card, .gate-tile{ width:96px; }
  .gate-tile{ height:96px; font-size:38px; }
  .gate-grid{ gap:18px; }
}

/* ---- Modale de dossier client (compléter un dossier ; création hors session seulement) ---- */
.pmodal-overlay{
  position:fixed; inset:0; background:rgba(5,9,18,.62); backdrop-filter:blur(3px);
  z-index:220; opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.pmodal-overlay.open{ opacity:1; pointer-events:auto; }
.pmodal{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-46%) scale(.98);
  width:460px; max-width:calc(100vw - 32px); max-height:calc(100vh - 48px);
  background:var(--bg-soft); border:1px solid var(--border); border-radius:var(--radius-lg);
  z-index:225; opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
  display:flex; flex-direction:column; box-shadow:0 24px 60px rgba(0,0,0,.55);
}
.pmodal.open{ opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1); }
.pmodal-head{ padding:16px 20px; border-bottom:1px solid var(--border-soft); display:flex; justify-content:space-between; align-items:center; flex-shrink:0; gap:12px; }
.pmodal-body{ flex:1; overflow-y:auto; padding:18px 20px; }
.pmodal-foot{ padding:14px 20px; border-top:1px solid var(--border-soft); display:flex; justify-content:flex-end; gap:9px; flex-shrink:0; }
.pm-lab{ display:block; font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--text-3); margin:16px 0 6px; }
.pm-lab:first-child{ margin-top:0; }
.pm-sub{ text-transform:none; letter-spacing:0; color:var(--text-3); opacity:.8; }
.pmodal .field{ width:100%; }
.pm-hint{ font-size:11px; color:var(--text-3); margin-top:6px; line-height:1.5; }
/* Le compte Ads d'un dossier sous session : une valeur, pas un champ. */
.pm-fixe{ font-size:12.5px; color:var(--text-1); line-height:1.5; padding:8px 10px;
  border:1px solid var(--border-soft); border-radius:8px; background:var(--panel-alt); }
.pm-fixe[hidden]{ display:none; }
.pm-fixe .pm-sub{ display:block; font-size:11px; margin-top:2px; }
.pm-hint.warn{ color:var(--amber); }
/* Les fiches Google Business du dossier : une liste à cocher, pas un menu
   — un client peut tenir plusieurs boutiques. */
.pm-fiches{ display:flex; flex-direction:column; gap:6px; max-height:240px; overflow-y:auto; }
.pm-fiches:empty{ display:none; }
.pm-fiche{ display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--border); border-radius:8px; cursor:pointer; font-size:12.5px; line-height:1.35; }
.pm-fiche:hover{ border-color:var(--text-3); }
.pm-fiche input{ margin:0; flex-shrink:0; }
.pm-fiche.on{ border-color:var(--src-gmb); box-shadow:inset 3px 0 0 var(--src-gmb); }
.pm-fiche-txt{ flex:1; min-width:0; }
.pm-fiche-sous{ display:block; font-size:11px; color:var(--text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pm-fiche-tag{ font-size:10px; text-transform:uppercase; letter-spacing:.4px; color:var(--src-gmb); flex-shrink:0; }
.pm-gbp-ajout{ display:flex; gap:8px; margin-top:8px; }
.pm-gbp-ajout .field{ flex:1; min-width:0; }
/* Le sélecteur de boutique de la barre latérale : même gabarit que le
   filtre de dates juste au-dessus, pour se lire comme un réglage global. */
#boutique-globale{ margin:0 14px 8px; }
#boutique-globale label{ display:flex; align-items:center; gap:7px; font-size:10px; text-transform:uppercase; letter-spacing:.4px; color:var(--text-3); margin:0 0 4px 2px; }
#boutique-globale select{ width:100%; padding:6px 8px; border-radius:8px; border:1px solid var(--border); background:transparent; color:var(--text-2); font:inherit; font-size:11px; cursor:pointer; }

/* ============================================================
   AGENT IA — panneau de chat
   ============================================================ */
.agent-panel{
  display:flex; flex-direction:column; height:560px; max-height:75vh;
  background:var(--panel, #131a2b); border:1px solid var(--border, #23304a);
  border-radius:16px; overflow:hidden;
}
.agent-header{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 16px; border-bottom:1px solid var(--border-soft, #1c2740);
  background:var(--panel-alt, #0e1626);
}
.agent-title{ display:flex; align-items:center; gap:11px; }
.agent-avatar{
  width:36px; height:36px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg, var(--teal, #2DD4BF), #16a394);
  color:#04211d; font-size:16px;
}
.agent-name{ font-weight:600; color:var(--text-1); font-size:13.5px; }
.agent-status{ font-size:11px; color:var(--text-3, #6b7a94); margin-top:1px; }
.agent-status.online{ color:var(--teal, #2DD4BF); }
.agent-status.offline{ color:var(--red, #FF5A5F); }
.agent-clear{
  background:transparent; border:1px solid var(--border, #23304a); color:var(--text-3, #6b7a94);
  width:32px; height:32px; border-radius:8px; cursor:pointer; transition:.15s;
}
.agent-clear:hover{ color:var(--red, #FF5A5F); border-color:var(--red, #FF5A5F); }

.agent-messages{ flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px; }
.agent-msg{ max-width:88%; padding:11px 14px; border-radius:13px; font-size:12.8px; line-height:1.6; }
.agent-msg p{ margin:0 0 8px; } .agent-msg p:last-child{ margin-bottom:0; }
.agent-msg-bot{ align-self:flex-start; background:var(--panel-alt, #0e1626); color:var(--text-1, #dfe6f2); border:1px solid var(--border-soft, #1c2740); }
.agent-msg-user{ align-self:flex-end; background:var(--teal, #2DD4BF); color:#04211d; font-weight:500; }
.agent-msg-error{ align-self:flex-start; background:rgba(234,67,53,.1); border:1px solid rgba(234,67,53,.3); color:var(--red, #FF5A5F); }

.agent-suggestions{ display:flex; flex-direction:column; gap:6px; margin-top:6px; }
.agent-suggestion{
  text-align:left; background:var(--panel, #131a2b); border:1px solid var(--border, #23304a);
  color:var(--text-2, #a9b6cc); padding:8px 11px; border-radius:9px; font-size:11.5px; cursor:pointer; transition:.15s;
}
.agent-suggestion:hover{ border-color:var(--teal, #2DD4BF); color:var(--text-1); }

.agent-typing{ display:flex; gap:4px; padding:12px 14px; }
.agent-typing span{ width:7px; height:7px; border-radius:50%; background:var(--text-3, #6b7a94); animation:agentBlink 1.2s infinite; }
.agent-typing span:nth-child(2){ animation-delay:.2s; } .agent-typing span:nth-child(3){ animation-delay:.4s; }
@keyframes agentBlink{ 0%,60%,100%{ opacity:.3; } 30%{ opacity:1; } }

.agent-input-row{ display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--border-soft, #1c2740); background:var(--panel-alt, #0e1626); }
.agent-input-row textarea{
  flex:1; resize:none; background:var(--panel, #131a2b); border:1px solid var(--border, #23304a);
  border-radius:10px; padding:10px 12px; color:var(--text-1); font-size:12.8px; font-family:inherit; max-height:120px;
}
.agent-input-row textarea:focus{ outline:none; border-color:var(--teal, #2DD4BF); }
.agent-send{
  width:42px; flex-shrink:0; background:var(--teal, #2DD4BF); color:#04211d; border:none;
  border-radius:10px; cursor:pointer; font-size:14px; transition:.15s;
}
.agent-send:hover{ filter:brightness(1.08); }
.agent-send:disabled{ opacity:.4; cursor:not-allowed; }


/* ============================================================
   RESTRICTIONS DE PORTÉE — appliquées d'après la session.
   Le serveur refuse déjà ces actions ; on les retire de l'écran
   pour ne pas proposer des boutons qui échoueront.
   Masquer ne protège rien : c'est du confort, pas de la sécurité.
   ============================================================ */
/* `no-ai` ferme le constructeur de campagnes, qui enchaîne plusieurs appels
   coûteux. `no-agent` ferme la conversation elle-même — et un client doté
   d'un quota hebdomadaire n'a PAS cette classe : sinon le quota lui serait
   accordé derrière une porte fermée. */
body.no-ai [data-tab="campaign-builder"]{ display:none !important; }
body.no-agent [data-tab="agent-ia"],
body.no-agent #agent-input, body.no-agent #agent-send{ display:none !important; }
#agent-quota{ display:none; margin-bottom:10px; }
body.avec-quota-ia #agent-quota{ display:block; }
body.no-sync #btn-zapier-refresh{ display:none !important; }
body.no-write #file-input, body.no-write .dropzone,
body.no-write #btn-new-profile{ display:none !important; }
/* `sans-datalake` : l'offre d'une agence n'inclut pas l'import manuel
   (T9). L'onglet reste ouvert — il porte aussi les rapports synchronisés
   et la comparaison de périodes —, seule la zone de dépôt s'efface, et
   un encart prend sa place pour dire ce qui la remplace. */
body.sans-datalake .dropzone-grid{ display:none !important; }
#import-hors-offre{ display:none; }
body.sans-datalake #import-hors-offre{ display:block; }
.scope-banner{
  display:none; position:sticky; top:0; z-index:60;
  padding:7px 14px; font-size:11.5px; letter-spacing:.02em;
  background:var(--panel-alt); border-bottom:1px solid var(--border); color:var(--text-2);
}
body.scope-limited .scope-banner{ display:block; }

/* ============================================================
   AUDIT GUIDÉ — la séquence de la Kbase, rendue actionnable
   ------------------------------------------------------------
   Une étape répondue par les données et une étape répondue à la
   main ne doivent pas se ressembler : la première est un fait, la
   seconde une déclaration. D'où le liseré de couleur à gauche, et
   la mention « mesuré » réservée aux premières.
   ============================================================ */
.au-tete{ margin-bottom:18px; }
.au-jauge{ height:8px; border-radius:99px; background:var(--panel-alt); border:1px solid var(--border);
  overflow:hidden; margin-bottom:8px; }
.au-jauge i{ display:block; height:100%; background:var(--teal); border-radius:99px; transition:width .35s ease; }
.au-chiffres{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; font-size:12px; color:var(--text-3);
  font-variant-numeric:tabular-nums; }
.au-chiffres b{ color:var(--text-1); }

.au-bloc{ margin-bottom:16px; }
.au-bloc h3{ display:flex; align-items:center; gap:9px; }
.au-etape{ display:flex; gap:13px; padding:14px 0; border-top:1px solid var(--border); }
.au-bloc .au-etape:first-of-type{ border-top:none; padding-top:4px; }
.au-num{ width:26px; height:26px; border-radius:50%; flex-shrink:0; display:flex; align-items:center;
  justify-content:center; font-size:12px; background:var(--panel-alt); color:var(--text-3); margin-top:1px; }
.au-ok      .au-num{ background:rgba(52,168,83,.14);  color:var(--teal); }
.au-alerte  .au-num{ background:rgba(234,67,53,.14);  color:var(--red); }
.au-attention .au-num{ background:rgba(251,188,5,.14); color:var(--violet); }
.au-saisi   .au-num{ background:rgba(66,133,244,.14); color:var(--amber); }
.au-corps{ flex:1; min-width:0; }
.au-q{ font-size:13.5px; color:var(--text-1); line-height:1.5; font-weight:500; }
.au-src{ font-size:9px; vertical-align:middle; margin-left:4px; }
.au-pourquoi{ font-size:11.5px; color:var(--text-3); line-height:1.6; margin-top:3px; }
.au-rep{ margin-top:9px; padding:9px 11px; border-radius:9px; font-size:12.5px; line-height:1.6;
  color:var(--text-2); background:var(--panel-alt); border-left:3px solid var(--border); }
.au-rep .badge{ margin-right:7px; }
.au-rep-ok{ border-left-color:var(--teal); }
.au-rep-alerte{ border-left-color:var(--red); }
.au-rep-attention{ border-left-color:var(--violet); }
.au-rep-saisi{ border-left-color:var(--amber); }
.au-saisie{ margin-top:9px; }
.au-manque{ font-size:11px; color:var(--text-3); font-style:italic; margin-bottom:7px; line-height:1.55; }
.au-boutons{ display:flex; gap:7px; align-items:center; flex-wrap:wrap; }
.au-btn{ background:transparent; border:1px solid var(--border); color:var(--text-2); border-radius:7px;
  padding:5px 13px; font-size:12px; font-family:inherit; cursor:pointer; transition:all .15s ease; }
.au-btn:hover{ border-color:var(--text-3); color:var(--text-1); }
.au-btn.actif{ background:var(--amber-soft); border-color:var(--amber); color:var(--amber); font-weight:600; }
.au-date{ font-size:10.5px; color:var(--text-3); }
.au-note{ margin-top:8px; width:100%; max-width:520px; font-size:12px; padding:7px 10px; }


/* ============================================================
   PLANCHERS MOBILES — audit du 24/08/2026
   ------------------------------------------------------------
   ⚠️ CE BLOC DOIT RESTER LE DERNIER DE LA FEUILLE, et ses règles
   gardent leur `!important`. Les deux points ont été mesurés :

   1. UNE MEDIA QUERY N'AJOUTE AUCUNE SPÉCIFICITÉ. Placé plus haut
      dans le fichier, ce bloc était intégralement ignoré —
      correctif écrit, rendu inchangé, aucune erreur nulle part.

   2. LE SOCLE VISE PLUS PRÉCIS QUE NOUS. `label.field-label`
      (0,1,1) bat `.field-label` (0,1,0) ; `.agent-input-row
      textarea` bat `textarea` ; `input[type=text]` bat `input`.
      Recopier chaque sélecteur un par un tiendrait jusqu'au
      prochain ajout, puis casserait en silence.

   Ce sont des PLANCHERS d'accessibilité, pas des préférences de
   style : ils doivent gagner contre toute règle de bureau, y
   compris celles qui n'existent pas encore. C'est le cas d'usage
   pour lequel `!important` a été inventé.
   ============================================================ */
@media (max-width:900px){

  /* 1. LE LIVRABLE, EN COLONNE.
     `.liv-wrap` était en flex sans retour à la ligne, avec un
     sélecteur de 250 px fixe. Sur 375 px il restait 78 px au
     document — dont 76 de marge intérieure, soit DEUX pixels de
     contenu. Le texte sortait une lettre par ligne et les trois
     graphiques avaient une largeur de zéro : Chart.js ne dessine
     rien dans un canvas sans largeur, et rien ne le signalait.

     `align-items:stretch` est indispensable : en colonne, le
     `flex-start` du bureau ne cale plus les enfants en haut, il
     les laisse à leur largeur de CONTENU — le document reprenait
     436 px sur un écran de 375. */
  .liv-wrap{ flex-direction:column; align-items:stretch; }
  .liv-side{ width:100%; position:static; }
  .report-doc{ padding:22px 18px; width:100%; }

  /* Les barres de thèmes tenaient sur 158 + barre + 178 px. Le
     libellé passe au-dessus ; la barre et son chiffre restent
     côte à côte — c'est leur rapprochement qui informe. */
  .liv-bar{ flex-wrap:wrap; row-gap:3px; }
  .liv-bar-l{ width:100%; }
  .liv-bar-v{ width:auto; flex:0 0 auto; }

  /* 2. LES CHAMPS À 16 px.
     Safari iOS agrandit la page dès qu'un champ reçoit le focus
     sous ce seuil, et ne la remet PAS à l'échelle en sortant. Les
     dix-huit champs du tableau de bord étaient concernés : coller
     un lien de fiche ou poser une question à l'agent laissait
     l'interface zoomée. 16 px est le seuil exact. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select, textarea{ font-size:16px !important; }

  /* 3. LES COMMANDES AU DOIGT.
     Boutons et pastilles gardaient leur hauteur de bureau — 29 px —
     à toutes les largeurs, alors qu'ils portent les actions les
     plus fréquentes : filtrer, changer de sous-onglet, lancer une
     synchronisation. Ils sont déjà centrés en inline-flex : seule
     la hauteur change, la mise en page tient. */
  .btn, .btn-sm, .pill-opt, .au-btn, .liv-oi-b,
  button.badge, .agent-suggestion{ min-height:40px !important; }
  .liv-oi-b{ min-width:40px !important; }

  /* 4. UN PLANCHER DE LISIBILITÉ.
     9 px sur une étiquette de statut (« À corriger · mesuré ») est
     une densité de bureau lue à bout de bras. Les libellés montent
     à 11 px, et à 12 px ceux qui portent un STATUT — ce sont eux
     qu'on doit pouvoir lire sans approcher l'écran. */
  .field-label, .kpi-label, .liv-side-t, .liv-pg-t, .liv-cover-l,
  .rk-l, .liv-oi-n, .sim-output-label, .liv-why,
  .data-table th, .liv-t th, table th{ font-size:11px !important; }
  .badge, .liv-tag, .report-badge, .pill-opt, .pill-opt.sm{ font-size:12px !important; }
}