/* ==============================================================
   4Kaptured Admin, media.4kaptured.com
   Feuille assemblee. NE PAS EDITER DIRECTEMENT.
   Source : assets/css/*.css  ·  Assemble par tools/build-css.sh
   ============================================================== */

/* ---------- 00-foundation.css ---------- */
/* ============================================================
   4Kaptured Admin · Fondation
   Tokens repris VERBATIM du 4Kaptured Design System.
   Ne jamais introduire de hex brut hors de ce fichier.
   ============================================================ */

/* ---------- Fonts auto-hebergees (aucun CDN : regle DS) ---------- */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/poppins-400.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/poppins-500.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/poppins-600.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/poppins-700.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-mono-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-mono-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/ibm-plex-mono-600.woff2') format('woff2')}

/* ---------- Tokens DS ---------- */
:root{
  color-scheme: dark;

  /* Surfaces */
  --bg:#0a0a0a; --surface:#171717; --surface-2:#0f0f0f; --surface-3:#1f1f1f;

  /* Marque. #dc2626 diverge volontairement du rouge print #E30613 : ecart
     documente par le DS, ne jamais reconcilier silencieusement. */
  --brand:#dc2626; --brand-2:#ef4444; --brand-glow:rgba(220,38,38,.45);

  /* Rampe de texte, chaque palier verifie AA sur --bg. Plancher : --text-5. */
  --text:#f5f5f5; --text-2:#d4d4d4; --text-3:#a3a3a3; --text-4:#8a8a8a; --text-5:#7c7c7c;

  /* Lignes */
  --line:#262626; --line-2:#404040;

  /* Etats semantiques */
  --success:#6ee7b7; --success-bg:rgba(16,185,129,.12); --success-border:rgba(16,185,129,.4);
  --danger:#fca5a5;  --danger-bg:rgba(220,38,38,.12);   --danger-border:rgba(220,38,38,.4);
  --gstar:#f5b301;
  --warning:#f5b301; --warning-bg:rgba(245,179,1,.12); --warning-border:rgba(245,179,1,.4);

  /* Espacement & rayons */
  --container:1240px; --container-wide:1480px;
  --gutter:clamp(1.25rem,4vw,3rem);
  --radius:4px; --radius-lg:10px;
  --header-h:78px;
  --space-1:8px; --space-2:12px; --space-3:16px; --space-4:20px;

  /* Typo */
  --font-sans:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SF Mono','Cascadia Mono',Menlo,monospace;

  /* Mouvement : deux courbes, pas une de plus. */
  --ease:cubic-bezier(0.22,1,0.36,1);
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --dur:.6s;

  /* Elevation. Ombre douce et sombre + glow de marque reserve aux actions
     primaires et aux elements accentues rouge. Jamais sur une surface neutre. */
  --shadow:0 26px 50px -32px rgba(0,0,0,.95);
  --shadow-soft:0 12px 30px -22px rgba(0,0,0,.9);
  --shadow-glow:0 10px 30px -12px var(--brand-glow);

  /* Chrome applicatif propre a l'admin (absent du site public). */
  --sidebar-w:236px;
}

/* ---------- Reset & base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{min-width:320px;-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--bg)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  min-height:100vh; margin:0;
  background:var(--bg); color:var(--text);
  font-family:var(--font-sans); font-size:15px; line-height:1.6; letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

img,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
ul{list-style:none;margin:0;padding:0}

/* Jeu d'icones inline du DS : trait 1.5-2.2px, joints arrondis, currentColor. */
svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

h1,h2,h3,h4{margin:0 0 var(--space-1);font-weight:700;line-height:1.04;letter-spacing:-.03em}
h1{font-size:clamp(28px,3vw,42px);letter-spacing:-.04em}
h2{font-size:19px;letter-spacing:-.025em}
h3{font-size:15px}
p{margin-top:0}

/* Anneau de focus : obligatoire et identique partout (regle DS). */
:focus-visible{outline:2px solid var(--brand-2);outline-offset:3px;border-radius:2px}
::selection{background:var(--brand);color:#fff}

/* ---------- Grain cinema : une seule couche, sur toute la page ----------
   4% d'opacite, mix-blend-mode screen. Texture constante et a peine
   perceptible, jamais un effet par section. */
.grain{
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.04; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain-shift 6s steps(6) infinite;
}
@keyframes grain-shift{
  0%{transform:translate(0,0)} 16%{transform:translate(-2%,1%)} 33%{transform:translate(1%,-2%)}
  50%{transform:translate(-1%,2%)} 66%{transform:translate(2%,1%)} 83%{transform:translate(1%,-1%)} 100%{transform:translate(0,0)}
}
@media (prefers-reduced-motion:reduce){.grain{animation:none}}
@media (max-width:720px){.grain{display:none}}

/* ---------- Typographie utilitaire ---------- */
/* Kicker : mono, capitales, tracking large. Signale une etiquette systeme. */
.eyebrow,.section-kicker,.planner-card-kicker{
  display:inline-flex; align-items:center; gap:.6rem;
  margin:0 0 var(--space-1);
  color:var(--brand-2);
  font-family:var(--font-mono); font-size:11px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
}
.eyebrow::before,.section-kicker::before{content:'';width:28px;height:1px;background:var(--brand);flex:none}

.muted-copy{color:var(--text-3);line-height:1.65}

/* Degrade de texte reserve aux grands titres. */
.text-gradient{
  background:linear-gradient(180deg,#fff 0%,#a3a3a3 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;padding-bottom:.14em;
}

code{
  border:1px solid var(--line); border-radius:var(--radius); padding:2px 6px;
  background:var(--surface-2); color:var(--text-2);
  font-family:var(--font-mono); font-size:.86em;
}
mark{
  display:inline-flex; align-items:center; width:max-content;
  border:1px solid var(--line); border-radius:var(--radius); padding:4px 9px;
  background:var(--surface-3); color:var(--text-2);
  font-family:var(--font-mono); font-size:11px; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase;
}

/* ---------- Boutons ----------
   Deux variantes seulement : primary (rouge + glow) et ghost (bord).
   Lift de 2px au survol, glow approfondi. */
button,.primary-action,.secondary-action,.ghost-button,.danger-button{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-1);
  min-height:44px; padding:0 var(--space-3);
  border:1px solid transparent; border-radius:var(--radius);
  font-size:13px; font-weight:600; line-height:1; letter-spacing:-.01em;
  white-space:nowrap; cursor:pointer;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease),
             background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
button,.primary-action{background:var(--brand);color:#fff;box-shadow:var(--shadow-glow)}
button:hover,.primary-action:hover{background:var(--brand-2);transform:translateY(-2px);box-shadow:0 16px 38px -12px var(--brand-glow)}
button:active,.primary-action:active{transform:translateY(0) scale(.99)}

.secondary-action,.ghost-button{background:transparent;border-color:var(--line);color:var(--text-2);box-shadow:none}
.secondary-action:hover,.ghost-button:hover{border-color:var(--line-2);color:var(--text);transform:translateY(-2px)}

.danger-button{background:transparent;border-color:var(--danger-border);color:var(--danger);box-shadow:none}
.danger-button:hover{background:var(--danger-bg);border-color:var(--danger);transform:translateY(-2px)}

.button-row{display:flex;flex-wrap:wrap;gap:var(--space-1);align-items:center}

.form-busy{opacity:.72;pointer-events:none}
.is-loading{min-width:120px}
.button-spinner{width:15px;height:15px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(1turn)}}

/* ---------- Champs de formulaire ---------- */
label{display:grid;gap:6px;color:var(--text-3);font-size:12px;font-weight:600}
label b{color:var(--brand-2)}

input,select,textarea{
  width:100%; padding:11px var(--space-2); font-size:14px;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface-2); color:var(--text);
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
input,select{min-height:44px}
textarea{min-height:96px;resize:vertical;line-height:1.55}
input:hover,select:hover,textarea:hover{border-color:var(--line-2)}
input:focus,select:focus,textarea:focus{border-color:var(--brand);background:var(--surface)}
/* On retire l'anneau au clic souris uniquement, jamais au clavier. */
input:focus:not(:focus-visible),select:focus:not(:focus-visible),textarea:focus:not(:focus-visible){outline:0}
input::placeholder,textarea::placeholder{color:var(--text-5)}
select{color-scheme:dark}

.field-grid{display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.form-hint{margin:6px 0 0;color:var(--text-4);font-size:12px;line-height:1.5}

/* ---------- Messages systeme ---------- */
.alert,.notice{
  margin-bottom:var(--space-3); padding:var(--space-2) var(--space-3);
  border:1px solid; border-radius:var(--radius); font-size:13px; font-weight:600;
}
.alert{border-color:var(--danger-border);background:var(--danger-bg);color:var(--danger)}
.notice{border-color:var(--success-border);background:var(--success-bg);color:var(--success)}

/* ---------- Anatomie de carte partagee ----------
   Remplissage --surface-2, filet 1px --line, rayon 10px, ombre douce +
   glissement du bord au survol. Jamais de bordure gauche coloree. */
.panel,.sidebar-card,.mini-card,.idea-card,.entity-card,.platform-card,
.scan-summary-card,.data-health-card,.planner-create-card,.scan-create-card,
.platform-analytics-card,.settings-panel{
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--surface);
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.panel{padding:calc(var(--space-4) + 4px)}
.panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-3)}

/* ---------- Pastilles ---------- */
.status-pill,.range-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border:1px solid var(--line); border-radius:999px;
  background:var(--surface-3); color:var(--text-3);
  font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  white-space:nowrap;
}
.range-pill{background:transparent}
/* Severites. severity_class() rend critical | warning | info, et le balisage
   compose la classe en severity-<valeur> : ces selecteurs doivent donc porter
   le prefixe, sinon --sev reste indefini et tout retombe en gris neutre. */
.severity-critical{--sev:var(--danger); --sev-bg:var(--danger-bg);  --sev-border:var(--danger-border)}
.severity-warning {--sev:var(--warning);--sev-bg:var(--warning-bg); --sev-border:var(--warning-border)}
.severity-info    {--sev:var(--text-3); --sev-bg:var(--surface-3);  --sev-border:var(--line-2)}

/* Pastille qui suit la severite de son conteneur, quand il y en a une. */
.severity-critical > .status-pill,.severity-warning > .status-pill,.severity-info > .status-pill{
  border-color:var(--sev-border);background:var(--sev-bg);color:var(--sev);
}

/* ---------- Etat vide ---------- */
.empty-state{
  display:grid; place-items:center; gap:6px;
  padding:calc(var(--space-4) * 1.6) var(--space-4); border:1px dashed var(--line-2); border-radius:var(--radius-lg);
  color:var(--text-3); font-size:14px; line-height:1.55; text-align:center;
}
.empty-state h3,.empty-state strong{color:var(--text);font-size:17px;font-weight:600;letter-spacing:-.02em}
.empty-state p{max-width:52ch;margin:0}

/* ---------- Reveal au scroll ----------
   Contenu sous la ligne de flottaison. L'above-the-fold utilise .hero-in,
   purement CSS, pour ne jamais attendre le JS (correctif LCP documente). */
.reveal{opacity:0;transform:translateY(28px);transition:opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out)}
.reveal.is-visible{opacity:1;transform:none}
@keyframes hero-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero-in{animation:hero-in .7s var(--ease-out) both}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero-in{animation:none}
}
@media (max-width:720px){
  .reveal{opacity:1;transform:none;transition:none}
}

/* ---------- Accessibilite ---------- */
.skip-link{
  position:fixed; top:10px; left:10px; z-index:10000;
  transform:translateY(-200%);
  padding:10px var(--space-3); border-radius:var(--radius);
  background:var(--text); color:var(--bg); font-weight:700;
}
.skip-link:focus{transform:none}

/* ---------- 10-shell.css ---------- */
/* 4Kaptured Admin, Zone 1 : coque applicative, sidebar, topbar, navigation, marque. */

/* ============================================================
   COQUE
   Deux colonnes : un rail de var(--sidebar-w) et une zone de
   contenu qui ne deborde jamais (minmax 0). La largeur du rail
   est pilotee par le token, re scope localement dans les media
   queries pour ne jamais toucher la declaration de la fondation.
   ============================================================ */
.app-shell{
  display:grid;
  grid-template-columns:var(--sidebar-w) minmax(0,1fr);
  min-height:100vh;
  min-height:100dvh;
}

/* ============================================================
   RAIL LATERAL
   Sticky, pleine hauteur, filet a droite. Quatre rangees :
   marque, navigation, carte de veille poussee en bas, sortie.
   ============================================================ */
.sidebar{
  position:sticky; top:0; z-index:20;
  display:grid;
  grid-template-rows:auto auto 1fr auto;
  height:100dvh;
  padding:var(--space-4) var(--space-2) var(--space-2);
  border-right:1px solid var(--line);
  background:var(--surface-2);
  overflow-y:auto;
  overscroll-behavior:contain;
}
/* Amorce de marque sur le filet : une degradation rouge courte
   en haut du bord droit, jamais une bordure coloree pleine. */
.sidebar::after{
  content:"";
  position:absolute; top:0; right:0;
  width:1px; height:148px;
  background:linear-gradient(180deg,var(--brand),transparent);
  opacity:.55;
  pointer-events:none;
}

/* ============================================================
   MARQUE
   Le bloc marque est partage avec l'ecran de connexion : il
   reste autonome, seul son calage dans le rail est contextuel.
   ============================================================ */
.brand{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:var(--space-2);
  width:max-content;
  max-width:100%;
}
.brand strong,
.brand small{display:block}
.brand strong{
  color:var(--text);
  font-size:14px; font-weight:700; letter-spacing:-.035em; line-height:1.1;
}
.brand small{
  margin-top:3px;
  color:var(--text-4);
  font-family:var(--font-mono); font-size:11px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.brand:hover strong{color:var(--text)}
.brand:hover small{color:var(--text-3)}
.sidebar .brand{margin:0 var(--space-1) var(--space-4)}

/* Logo raster officiel. Le DS interdit de redessiner la marque :
   plus aucun glyphe 4K dessine en CSS. Le texte du gabarit reste
   dans l'arbre d'accessibilite, simplement deporte hors cadre. */
.brand-mark{
  position:relative;
  display:block; flex:none;
  width:38px; height:38px;
  background-image:url('logos/mark-transparent.png');
  background-repeat:no-repeat;
  background-position:center center;
  background-size:contain;
  overflow:hidden;
  text-indent:-9999px;
  white-space:nowrap;
  color:transparent;
  user-select:none;
  transition:filter .3s var(--ease), transform .3s var(--ease);
}
/* Halo de marque : autorise ici car l'element accentue EST rouge. */
.brand:hover .brand-mark{
  filter:drop-shadow(0 6px 18px var(--brand-glow));
  transform:translateY(-1px);
}

/* ============================================================
   NAVIGATION
   Liste dense, gouttiere de 2px. Chaque entree est une grille
   icone plus libelle, jamais un empilement flex approximatif.
   ============================================================ */
.nav{
  display:grid;
  gap:2px;
  align-content:start;
}
.nav a{
  position:relative;
  display:grid;
  grid-template-columns:18px minmax(0,1fr);
  align-items:center;
  gap:10px;
  min-height:42px;
  padding:0 10px;
  border:1px solid transparent;
  border-radius:var(--radius);
  color:var(--text-3);
  font-size:12px; font-weight:600; letter-spacing:-.01em;
  transition:background .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease);
}
.nav a span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.nav a svg{color:var(--text-4); transition:color .25s var(--ease)}
/* Les survols eclaircissent, ils n'assombrissent jamais. */
.nav a:hover{
  background:color-mix(in srgb, var(--text) 6%, transparent);
  color:var(--text);
}
.nav a:hover svg{color:var(--text-2)}

/* ============================================================
   ETAT ACTIF
   Rouge de marque en teinte basse plus indicateur vertical
   plaque contre le bord gauche du rail.
   ============================================================ */
.nav a.active{
  border-color:color-mix(in srgb, var(--brand) 34%, transparent);
  background:color-mix(in srgb, var(--brand) 13%, transparent);
  color:var(--text);
}
.nav a.active svg{color:var(--brand-2)}
.nav a.active::before{
  content:"";
  position:absolute;
  top:11px; bottom:11px;
  left:calc(var(--space-2) * -1);
  width:2px;
  border-radius:0 var(--radius) var(--radius) 0;
  background:var(--brand);
  box-shadow:0 0 14px var(--brand-glow);
}

/* ============================================================
   CARTE DE VEILLE
   La fondation pose deja fond, filet, rayon et transition :
   ici uniquement la grille interne, la hierarchie de texte et
   le survol. Poussee en bas de colonne par align-self:end.
   ============================================================ */
.sidebar-card{
  position:relative;
  align-self:end;
  display:grid;
  gap:5px;
  margin-top:var(--space-3);
  padding:var(--space-2);
  overflow:hidden;
}
/* Filet superieur rouge, degrade court : accent de marque sans
   bordure gauche coloree, interdite par le DS. */
.sidebar-card::after{
  content:"";
  position:absolute; top:0; left:0;
  width:56px; height:1px;
  background:linear-gradient(90deg,var(--brand),transparent);
}
.sidebar-card span{
  color:var(--text-4);
  font-family:var(--font-mono); font-size:11px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
}
.sidebar-card strong{
  color:var(--text);
  font-size:13px; font-weight:600; line-height:1.28; letter-spacing:-.02em;
  overflow:hidden;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
}
.sidebar-card small{
  color:var(--text-3);
   font-size:13px;line-height:1.5; 
}
.sidebar-card:hover{
  border-color:var(--line-2);
  box-shadow:var(--shadow-soft);
}

/* ============================================================
   SORTIE DE SESSION
   La fondation habille tout button en action primaire rouge :
   dans le rail, la sortie est une entree neutre alignee sur la
   navigation, puis une intention destructive au survol.
   ============================================================ */
.logout-form{
  margin-top:var(--space-2);
  padding-top:var(--space-2);
  border-top:1px solid var(--line);
}
.logout{
  display:grid;
  grid-template-columns:18px minmax(0,1fr);
  align-items:center;
  gap:10px;
  width:100%;
  min-height:42px;
  padding:0 10px;
  border:1px solid transparent;
  background:transparent;
  box-shadow:none;
  color:var(--text-4);
  text-align:left;
  transition:background .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease);
}
.logout:hover{
  border-color:var(--danger-border);
  background:var(--danger-bg);
  color:var(--danger);
  transform:none;
  box-shadow:none;
}
.logout:active{transform:none}

/* ============================================================
   ZONE DE CONTENU
   La coque possede le rythme vertical de ses enfants directs :
   une seule gouttiere, pas d'accumulation de marges. Fond
   cinema : halo de marque haut plus trame verticale discrete.
   ============================================================ */
.content{
  min-width:0;
  display:grid;
  /* minmax(0,1fr) : sans cela une bande large (semaine) elargit la colonne
     et emporte toutes les cartes soeurs hors de l'ecran sur mobile. */
  grid-template-columns:minmax(0,1fr);
  align-content:start;
  gap:var(--space-4);
  padding:clamp(26px,2.4vw,40px) var(--gutter) 76px;
  background-image:
    radial-gradient(ellipse 70% 34% at 30% -12%, color-mix(in srgb, var(--brand) 9%, transparent), transparent 62%);
  background-repeat:no-repeat;
}
.content > *{
  min-width:0;
  width:100%;
  max-width:var(--container-wide);
  margin-inline:auto;
  margin-block:0;
}

/* ============================================================
   BARRE DE TITRE
   Titre editorial a gauche, statut a droite, filet de cloture.
   ============================================================ */
.topbar{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:var(--space-3) var(--space-4);
  padding-bottom:var(--space-3);
  border-bottom:1px solid var(--line);
}
.topbar h1{margin:0}
.topbar p:not(.eyebrow){
  max-width:62ch;
  margin:var(--space-1) 0 0;
  color:var(--text-3);
  font-size:13px;
}
.top-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
  gap:var(--space-1);
}

/* ============================================================
   RAIL ETROIT
   ============================================================ */
@media (max-width:1100px){
  .app-shell{--sidebar-w:198px}
  .sidebar{padding:var(--space-3) var(--space-1) var(--space-1)}
  .sidebar .brand{margin:0 6px var(--space-3)}
  .brand-mark{width:34px;height:34px}
  .nav a.active::before{left:calc(var(--space-1) * -1)}
  .content{gap:var(--space-3)}
  .topbar{grid-template-columns:minmax(0,1fr);align-items:start}
  .top-actions{justify-content:flex-start}
}

/* ============================================================
   RAIL EN BARRE BASSE
   Le rail devient un dock fixe : navigation en six colonnes,
   sortie conservee en icone seule, libelle toujours annonce.
   ============================================================ */
@media (max-width:720px){
  body{padding-bottom:78px}

  .app-shell{display:block;--sidebar-w:auto}

  .sidebar{
    position:fixed; inset:auto 0 0 0; z-index:50;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:auto;
    align-items:center;
    gap:6px;
    height:auto;
    padding:6px 8px max(6px,env(safe-area-inset-bottom));
    border-top:1px solid var(--line);
    border-right:0;
    background:color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter:blur(18px) saturate(130%);
    overflow:visible;
  }
  .sidebar::after{
    top:0; right:38%; left:38%;
    width:auto; height:1px;
    background:linear-gradient(90deg,transparent,var(--brand),transparent);
  }
  .sidebar > .brand,
  .sidebar-card{display:none}

  .nav{grid-template-columns:repeat(6,minmax(0,1fr));gap:2px}
  .nav a{
    grid-template-columns:minmax(0,1fr);
    justify-items:center;
    gap:3px;
    min-height:54px;
    padding:5px 2px;
    font-size:9px;
    text-align:center;
  }
  .nav a span{max-width:100%}
  .nav a svg{width:17px;height:17px}
  .nav a.active::before{
    top:-7px; right:24%; bottom:auto; left:24%;
    width:auto; height:2px;
    border-radius:0 0 var(--radius) var(--radius);
  }

  .logout-form{
    margin:0;
    padding:0 0 0 6px;
    border-top:0;
    border-left:1px solid var(--line);
  }
  .logout{
    grid-template-columns:minmax(0,1fr);
    justify-items:center;
    width:46px;
    min-height:54px;
    padding:0;
  }
  /* Libelle masque visuellement, toujours lu par les lecteurs. */
  .logout span{
    position:absolute;
    width:1px; height:1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
  }

  .content{
    gap:var(--space-3);
    padding:var(--space-4) var(--space-3) var(--space-4);
    background-image:none;
  }

  /* Mouvement allege sous 720px, regle de performance du DS. */
  .brand-mark,
  .nav a,
  .logout,
  .sidebar-card{transition:none}
  .brand:hover .brand-mark{filter:none;transform:none}
}

/* ============================================================
   MOUVEMENT REDUIT
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .brand-mark,
  .nav a,
  .nav a svg,
  .logout,
  .sidebar-card{transition:none}
  .brand:hover .brand-mark{filter:none;transform:none}
}

/* Filet de securite mobile : le corps de page ne scrolle jamais en largeur. */
@media (max-width:720px){
  html,body{overflow-x:clip}
  .topbar{grid-template-columns:minmax(0,1fr)}
  .top-actions{flex-wrap:wrap}
}

/* ---------- 20-login.css ---------- */
/* 4Kaptured Admin, zone : ecran de connexion et panneau d'apercu */

/* ============================================================
   Ecran deux colonnes, plein viewport.
   Vignettage radial rouge de marque, tres discret : aucune
   couleur decorative secondaire n'existe dans ce systeme.
   ============================================================ */
.login-shell{
  position:relative;
  display:grid;
  grid-template-columns:minmax(340px,520px) minmax(0,700px);
  justify-content:center;
  align-items:stretch;
  min-height:100dvh;
  padding:clamp(var(--space-3),3vw,34px);
  overflow-x:hidden;
  background-color:var(--bg);
  background-image:
    radial-gradient(ellipse 78% 52% at 50% -12%, color-mix(in srgb, var(--brand) 11%, transparent), transparent 58%),
    radial-gradient(ellipse 58% 44% at 100% 104%, color-mix(in srgb, var(--brand) 5%, transparent), transparent 60%);
}

/* Filet vertical de cadrage, aligne sur la couture des deux panneaux. */
.login-shell::before{
  content:"";
  position:fixed; top:0; left:50%;
  width:1px; height:100%;
  background:color-mix(in srgb, var(--line) 70%, transparent);
  pointer-events:none;
}

/* ---------- Anatomie commune des deux panneaux ---------- */
.login-panel,
.login-preview{
  min-height:min(760px, calc(100dvh - 68px));
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--surface-2);
  box-shadow:var(--shadow);
}
/* Les deux panneaux forment un seul bloc : la couture reste droite. */
.login-panel{border-radius:var(--radius-lg) 0 0 var(--radius-lg)}
.login-preview{border-left:0;border-radius:0 var(--radius-lg) var(--radius-lg) 0}

/* ---------- Colonne de gauche : identite, promesse, formulaire ---------- */
.login-panel{
  position:relative;
  z-index:1;
  display:grid;
  align-content:center;
  justify-items:start;
  gap:0;
  padding:clamp(var(--space-4),5vw,66px);
}

/* Repere rouge de marque en tete de colonne, jamais un filet de bord colore. */
.login-panel::after{
  content:"";
  position:absolute; top:0; right:28px;
  width:1px; height:72px;
  background:linear-gradient(180deg, var(--brand), transparent);
}

.login-panel h1{
  max-width:13ch;
  margin:var(--space-2) 0 0;
  font-size:clamp(40px,5.2vw,64px);
  line-height:.96;
  letter-spacing:-.055em;
  text-wrap:balance;
}

.login-brand{
  margin-bottom:clamp(48px,8vh,88px);
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.login-brand:hover{transform:translateY(-2px)}

.login-copy{
  max-width:38ch;
  margin:var(--space-4) 0 0;
  color:var(--text-3);
  font-size:15px;
  line-height:1.7;
}

/* ---------- Formulaire ---------- */
.login-form{
  display:grid;
  gap:var(--space-3);
  width:100%;
  max-width:400px;
  margin-top:clamp(var(--space-4),4vh,42px);
}
/* Etiquette de champ en mono : c'est un label systeme, pas du contenu. */
.login-form label>span{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-4);
}
.login-form label:focus-within>span{color:var(--text-2)}
.login-form button{width:100%;margin-top:var(--space-1)}
.login-form .alert{margin-bottom:0}

/* ---------- Colonne de droite : apercu du dashboard ---------- */
.login-preview{
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:var(--space-4);
  padding:clamp(var(--space-4),5vw,56px);
  overflow:hidden;
  background-image:
    radial-gradient(ellipse 72% 56% at 88% 4%, color-mix(in srgb, var(--brand) 9%, transparent), transparent 62%),
    linear-gradient(color-mix(in srgb, var(--line) 80%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--line) 80%, transparent) 1px, transparent 1px);
  background-size:auto, 48px 48px, 48px 48px;
}
/* Cercle de visee, echo du vignettage. Purement decoratif. */
.login-preview::before{
  content:"";
  position:absolute; top:9%; right:-12%; z-index:-1;
  width:420px; height:420px;
  border:1px solid color-mix(in srgb, var(--brand) 18%, transparent);
  border-radius:50%;
  box-shadow:
    0 0 0 80px color-mix(in srgb, var(--brand) 3%, transparent),
    0 0 0 160px color-mix(in srgb, var(--brand) 2%, transparent);
}

/* Barre de tete : libelle mono a gauche, chiffre plein cadre a droite. */
.preview-toolbar{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:start;
  gap:var(--space-3);
}
.preview-toolbar span{
  display:inline-flex;
  align-items:center;
  color:var(--text-4);
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.preview-toolbar span::before{
  content:"";
  width:6px; height:6px;
  margin-right:9px;
  border-radius:50%;
  background:var(--success);
  box-shadow:0 0 0 4px var(--success-bg);
  flex:none;
}
.preview-toolbar strong{
  color:var(--text);
  font-family:var(--font-sans);
  font-size:clamp(48px,7vw,72px);
  font-weight:700;
  line-height:.78;
  letter-spacing:-.07em;
}

/* ---------- Graphe ----------
   Flex assume : les hauteurs des barres sont des pourcentages
   poses en attribut style dans le balisage. */
.preview-chart{
  position:relative;
  z-index:1;
  display:flex;
  align-items:end;
  gap:clamp(8px,1.1vw,13px);
  min-height:clamp(200px,30vh,300px);
  padding:60px 0 28px;
}
/* Ligne de base du graphe. */
.preview-chart::after{
  content:"";
  position:absolute; right:0; bottom:28px; left:0;
  height:1px;
  background:var(--line-2);
}
.preview-chart i{
  position:relative;
  z-index:1;
  flex:1;
  border-top:2px solid var(--line-2);
  border-radius:var(--radius) var(--radius) 0 0;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--text) 11%, transparent),
    color-mix(in srgb, var(--text) 3%, transparent));
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
/* Les survols eclaircissent, jamais l'inverse. */
.preview-chart i:hover{
  border-top-color:var(--text-3);
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--text) 18%, transparent),
    color-mix(in srgb, var(--text) 6%, transparent));
}
/* Un seul point d'accent rouge : la derniere barre, le pic. */
.preview-chart i:last-child{
  border-top-color:var(--brand);
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--brand) 26%, transparent),
    color-mix(in srgb, var(--brand) 4%, transparent));
  box-shadow:var(--shadow-glow);
}
.preview-chart i:last-child:hover{
  border-top-color:var(--brand-2);
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--brand) 36%, transparent),
    color-mix(in srgb, var(--brand) 7%, transparent));
}

/* ---------- Tuiles de metadonnees ---------- */
.preview-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:color-mix(in srgb, var(--bg) 62%, transparent);
}
.preview-grid span{
  display:grid;
  align-content:center;
  min-height:62px;
  padding:var(--space-3);
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  color:var(--text-3);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.preview-grid span:nth-child(2n){border-right:0}
.preview-grid span:nth-last-child(-n+2){border-bottom:0}
.preview-grid span:hover{
  background:color-mix(in srgb, var(--text) 4%, transparent);
  color:var(--text);
}

/* ---------- Entree de page, au dessus de la ligne de flottaison ---------- */
@keyframes login-enter{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:none}
}
.login-panel{animation:login-enter var(--dur) var(--ease-out) both}
.login-preview{animation:login-enter var(--dur) .08s var(--ease-out) both}

/* ---------- Adaptations ---------- */
@media (max-width:1100px){
  .login-shell{
    grid-template-columns:minmax(0,640px);
    justify-content:center;
    padding:var(--space-3);
  }
  .login-shell::before{display:none}
  .login-panel,
  .login-preview{min-height:0;border-radius:var(--radius-lg)}
  .login-panel{padding:clamp(var(--space-4),6vw,44px)}
  .login-preview{border-left:1px solid var(--line);margin-top:var(--space-3)}
  .preview-chart{min-height:220px;padding:40px 0 24px}
}

@media (max-width:720px){
  .login-shell{padding:var(--space-2)}
  .login-panel{
    min-height:calc(100dvh - 24px);
    padding:var(--space-4);
    animation:none;
  }
  .login-panel h1{font-size:38px;max-width:none}
  .login-brand{margin-bottom:44px}
  .login-copy{font-size:14px}
  .login-form{max-width:none}
  /* Apercu purement illustratif : retire sur petit ecran, comme le grain. */
  .login-preview{display:none}
}

@media (prefers-reduced-motion:reduce){
  .login-panel,
  .login-preview{animation:none}
  .login-brand,
  .preview-chart i,
  .preview-grid span{transition:none}
}

/* ---------- 30-overview.css ---------- */
/* 4Kaptured Admin, zone Overview : hero de commande, metriques, priorites, alertes, opportunites. */

/* ============================================================
   1. Hero de commande
   La vitrine. Une seule amorce rouge, un halo neutre, puis
   deux colonnes separees par un filet : le discours a gauche,
   la preuve chiffree a droite.
   ============================================================ */
.command-hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(320px,.85fr);
  margin-bottom:var(--space-4);
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--surface-2);
  box-shadow:var(--shadow-soft);
}

/* Amorce de marque : le seul rouge plein de la section. */
.command-hero::before{
  position:absolute;
  top:0;
  left:clamp(20px,2.4vw,34px);
  z-index:2;
  width:72px;
  height:2px;
  background:var(--brand);
  box-shadow:var(--shadow-glow);
  content:"";
}

/* Vignette neutre derivee de la rampe de texte, jamais teintee. */
.command-hero::after{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:radial-gradient(ellipse 62% 78% at 90% 0%,color-mix(in srgb,var(--text) 5%,transparent),transparent 64%);
  content:"";
}

.hero-copy,
.hero-board{position:relative;z-index:1}

.hero-copy{
  display:grid;
  align-content:center;
  gap:0;
  padding:clamp(22px,2.8vw,36px);
}
.hero-copy h2{
  max-width:19ch;
  margin-bottom:0;
  font-size:clamp(26px,2.6vw,38px);
  font-weight:600;
  letter-spacing:-.045em;
  text-wrap:balance;
}
.hero-copy p{
  max-width:56ch;
  margin:var(--space-2) 0 var(--space-4);
  color:var(--text-3);
  font-size:13px;
  line-height:1.7;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--space-1);
}

/* Tableau de bord du hero : jauge a gauche, chiffres a droite. */
.hero-board{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:clamp(16px,2.1vw,28px);
  padding:clamp(18px,2.3vw,28px);
  border-left:1px solid var(--line);
}

.hero-board-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--line);
}
.hero-board-list > div{
  display:grid;
  gap:3px;
  padding:var(--space-2) var(--space-2) 11px;
  background:var(--surface-2);
  transition:background .3s var(--ease);
}
.hero-board-list > div:hover{background:var(--surface-3)}
.hero-board-list span{
  color:var(--text-4);
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.hero-board-list strong{
  font-size:21px;
  font-weight:600;
  line-height:1;
  letter-spacing:-.045em;
}

/* ============================================================
   2. Vue operationnelle : semaine large, file prioritaire etroite
   ============================================================ */
.operating-layout{
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(300px,.72fr);
  align-items:start;
  gap:var(--space-3);
  margin-bottom:var(--space-4);
}

.priority-panel{min-width:0}

.priority-list{
  display:grid;
  gap:var(--space-1);
  max-height:392px;
  overflow-y:auto;
  padding-right:6px;
  scrollbar-width:thin;
  scrollbar-color:var(--line-2) transparent;
}

/* Severites : pas de bordure laterale coloree, une pastille ronde
   et une teinte au survol portees par --sev. */
.priority-item.severity-critical,
.alert-row.severity-critical{
  --sev:var(--danger);
  --sev-bg:var(--danger-bg);
  --sev-border:var(--danger-border);
}
.priority-item.severity-warning,
.alert-row.severity-warning{
  --sev:var(--gstar);
  --sev-bg:color-mix(in srgb,var(--gstar) 12%,transparent);
  --sev-border:color-mix(in srgb,var(--gstar) 40%,transparent);
}
.priority-item.severity-info,
.alert-row.severity-info{
  --sev:var(--text-3);
  --sev-bg:var(--surface-3);
  --sev-border:var(--line-2);
}

.priority-item{
  display:grid;
  justify-items:start;
  gap:4px;
  padding:var(--space-2) var(--space-3) var(--space-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:color-mix(in srgb,var(--text) 2%,transparent);
  transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease);
}
.priority-item:hover{
  border-color:var(--sev-border,var(--line-2));
  background:var(--sev-bg,var(--surface-3));
  transform:translateX(2px);
}
.priority-item > span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--text-3);
  
  font-size:13px;line-height:1.5;
  font-weight:500;
  
  
}
.priority-item > span::before{
  width:6px;
  height:6px;
  flex:none;
  border-radius:50%;
  background:var(--sev,var(--text-4));
  box-shadow:0 0 0 3px var(--sev-bg,transparent);
  content:"";
}
.priority-item strong{
  font-size:13px;
  font-weight:600;
  line-height:1.3;
  letter-spacing:-.025em;
}
.priority-item p{
  margin:0;
  color:var(--text-3);
  font-size:12px;
  line-height:1.55;
}
.priority-item .secondary-action{
  min-height:32px;
  margin-top:5px;
  padding:0 var(--space-2);
  font-size:11px;
}

/* ============================================================
   3. Couche d'action : alertes et opportunites cote a cote
   ============================================================ */
.grid-two{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start;
  gap:var(--space-3);
  margin-bottom:var(--space-4);
}

/* Top contenus plus large que la fiche lead. */
.bottom-grid{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
}

.alerts-panel,
.opportunities-panel{min-width:0}

.alert-row,
.opportunity-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:var(--space-3);
}
.alert-row strong,
.opportunity-row strong{
  display:block;
  margin:4px 0 3px;
  font-size:13px;
  font-weight:600;
  line-height:1.3;
  letter-spacing:-.025em;
}
.alert-row p,
.opportunity-row p{
  margin:0;
  color:var(--text-3);
  font-size:12px;
  line-height:1.55;
}
.alert-row > div > span,
.opportunity-row > div > span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--text-3);
  
  font-size:13px;line-height:1.5;
  font-weight:500;
  
  
}
.alert-row > div > span::before{
  width:6px;
  height:6px;
  flex:none;
  border-radius:50%;
  background:var(--sev,var(--text-4));
  box-shadow:0 0 0 3px var(--sev-bg,transparent);
  content:"";
}
.alert-row .secondary-action,
.opportunity-row .secondary-action{
  min-height:34px;
  padding:0 var(--space-2);
  font-size:11px;
  white-space:nowrap;
}

/* Rythme de liste dans les panneaux : filet en haut, respiration
   au survol qui deborde legerement du padding du panneau. */
.alerts-panel .alert-row,
.opportunities-panel .opportunity-row{
  margin-inline:calc(var(--space-2) * -1);
  border-top:1px solid var(--line);
  border-radius:var(--radius);
  padding:var(--space-3) var(--space-2);
  transition:background .3s var(--ease);
}
.alerts-panel .alert-row:hover,
.opportunities-panel .opportunity-row:hover{
  background:color-mix(in srgb,var(--text) 3%,transparent);
}
.alerts-panel .alert-row:first-of-type,
.opportunities-panel .opportunity-row:first-of-type{
  border-top:0;
  padding-top:0;
}

/* ============================================================
   4. Metriques : les chiffres sont la preuve
   Bande de cartes soudees par un filet d'un pixel.
   ============================================================ */
.metrics{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  margin-bottom:var(--space-4);
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--line);
  box-shadow:var(--shadow-soft);
}
.metrics article{
  position:relative;
  display:grid;
  align-content:start;
  gap:7px;
  padding:clamp(16px,1.9vw,23px);
  background:var(--surface-2);
  transition:background .3s var(--ease);
}
.metrics article:hover{background:var(--surface-3)}

/* Filet de tete, neutre, pour detacher chaque colonne. */
.metrics article::after{
  position:absolute;
  top:0;
  right:0;
  left:0;
  height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--text) 12%,transparent),transparent);
  content:"";
}
.metrics span{
  color:var(--text-4);
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.metrics strong{
  font-size:clamp(27px,2.7vw,35px);
  font-weight:700;
  line-height:1;
  letter-spacing:-.05em;
}
.metrics em{
  color:var(--success);
  font-family:var(--font-mono);
  font-size:11px;
  font-style:normal;
  letter-spacing:.06em;
}

/* ============================================================
   5. Plan d'action : liste numerotee en colonne d'appoint
   ============================================================ */
.objective-panel{
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  align-content:start;
  min-width:0;
  counter-reset:objective;
}
.objective-panel article{counter-increment:objective}
.objective-panel article > span::before{
  margin-right:8px;
  color:var(--brand-2);
  font-family:var(--font-mono);
  font-weight:600;
  content:counter(objective,decimal-leading-zero);
}

/* ============================================================
   6. Fiche lead et idees a pousser
   ============================================================ */
.insight-panel{
  display:grid;
  align-content:start;
  gap:var(--space-2);
  min-width:0;
}
.insight-panel > h2{margin-bottom:0}
.insight-panel p{
  margin:0;
  color:var(--text-3);
  font-size:12px;
  line-height:1.6;
}
.insight-panel p strong{
  color:var(--text);
  font-size:14px;
  font-weight:600;
  letter-spacing:-.025em;
}
.insight-panel .secondary-action{
  justify-self:start;
  margin-top:var(--space-1);
  min-height:36px;
  font-size:11px;
}

.mini-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-2);
}
.mini-card{
  display:grid;
  align-content:start;
  gap:6px;
  padding:var(--space-3);
}
.mini-card:hover{
  border-color:var(--line-2);
  background:var(--surface-3);
  transform:translateY(-2px);
  box-shadow:var(--shadow-soft);
}
.mini-card > span{
  color:var(--text-4);
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.mini-card strong{
  font-size:13px;
  font-weight:600;
  line-height:1.3;
  letter-spacing:-.025em;
}
.mini-card p{
  margin:0;
  color:var(--text-3);
  font-size:12px;
  line-height:1.55;
}

/* ============================================================
   7. Modificateurs de tuile de semaine
   ============================================================ */
/* Relance : accent de marque, reserve a une action a declencher. */
.accent-item{
  border-style:solid;
  border-width:1px;
  border-color:color-mix(in srgb,var(--brand) 40%,var(--line));
  background:color-mix(in srgb,var(--brand) 8%,transparent);
}
.accent-item small{color:var(--brand-2)}

/* Deadline : emphase strictement neutre, aucune couleur. */
.deadline-item{
  border-style:solid;
  border-width:1px;
  border-color:var(--line-2);
  background:var(--surface-3);
}
.deadline-item small{color:var(--text-3)}

/* Actions rapides posees sous une tuile : boutons compacts. */
.quick-actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:var(--space-1);
}
.quick-actions > form{display:contents}
.quick-actions button{
  min-height:30px;
  padding:0 10px;
  font-size:10px;
  letter-spacing:.02em;
}

/* ============================================================
   8. Espaces de travail : editeur fixe, liste qui defile
   ============================================================ */
.workspace-grid{
  display:grid;
  grid-template-columns:minmax(300px,380px) minmax(0,1fr);
  align-items:start;
  gap:var(--space-3);
  margin-bottom:var(--space-4);
}
.workspace-grid > form:first-child{
  position:sticky;
  top:var(--space-4);
}

/* Pastille d'ouverture d'un bloc depliable. */
.summary-action{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:6px 10px;
  background:var(--surface-3);
  color:var(--text-3);
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  white-space:nowrap;
  transition:border-color .25s var(--ease),background .25s var(--ease),color .25s var(--ease);
}
.summary-action svg{width:13px;height:13px}
summary:hover .summary-action{
  border-color:var(--line-2);
  background:var(--surface);
  color:var(--text);
}

/* Bande de chiffres de resume, adaptative selon la largeur du bloc. */
.summary-metrics{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
  gap:1px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--line);
}
.summary-metrics > div{
  display:grid;
  gap:3px;
  padding:var(--space-2) var(--space-2) 11px;
  background:var(--surface-2);
  transition:background .25s var(--ease);
}
.summary-metrics > div:hover{background:var(--surface-3)}
.summary-metrics span{
  color:var(--text-4);
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.summary-metrics strong{
  font-size:16px;
  font-weight:600;
  line-height:1.15;
  letter-spacing:-.035em;
}

/* ============================================================
   9. Checklists de production
   ============================================================ */
.line-checklists{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-2);
}

.checklist{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px var(--space-3);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:var(--space-2) var(--space-3);
  background:var(--surface-2);
}
.checklist label{
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--text-2);
  font-size:11px;
  font-weight:500;
  line-height:1.35;
  cursor:pointer;
}
.checklist input{
  width:16px;
  min-height:16px;
  height:16px;
  flex:none;
  margin:0;
  border:0;
  padding:0;
  background:transparent;
  accent-color:var(--brand);
}

/* ============================================================
   10. Adaptations
   ============================================================ */
@media (max-width:1100px){
  .command-hero,
  .operating-layout,
  .workspace-grid{grid-template-columns:minmax(0,1fr)}
  .hero-board{
    border-top:1px solid var(--line);
    border-left:0;
  }
  .workspace-grid > form:first-child{position:static}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .priority-list{max-height:none}
}

@media (max-width:900px){
  .grid-two,
  .bottom-grid{grid-template-columns:minmax(0,1fr)}
  .mini-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:720px){
  .command-hero{margin-bottom:var(--space-3)}
  .command-hero::after{display:none}
  .hero-board{grid-template-columns:minmax(0,1fr);justify-items:center}
  .hero-board-list{width:100%}
  .hero-copy h2{max-width:none}
  .hero-actions{
    flex-direction:column;
    align-items:stretch;
  }
  .hero-actions > *{width:100%}

  .operating-layout,
  .grid-two,
  .metrics,
  .workspace-grid{margin-bottom:var(--space-3)}
  .metrics strong{font-size:26px}

  .alert-row,
  .opportunity-row{
    grid-template-columns:minmax(0,1fr);
    align-items:stretch;
    gap:var(--space-2);
  }
  .alert-row .secondary-action,
  .opportunity-row .secondary-action{width:100%}

  .mini-grid,
  .line-checklists,
  .checklist{grid-template-columns:minmax(0,1fr)}
  .quick-actions > form,
  .quick-actions button{width:100%}
  .quick-actions > form{display:flex}

  /* Mouvement allege sur petit ecran : etats conserves, glissements retires. */
  .command-hero,
  .hero-board-list > div,
  .metrics article,
  .mini-card,
  .priority-item,
  .summary-action,
  .summary-metrics > div,
  .alerts-panel .alert-row,
  .opportunities-panel .opportunity-row{transition:none}
  .priority-item:hover,
  .mini-card:hover{transform:none}
}

@media (prefers-reduced-motion:reduce){
  .hero-board-list > div,
  .metrics article,
  .mini-card,
  .priority-item,
  .summary-action,
  .summary-metrics > div,
  .alerts-panel .alert-row,
  .opportunities-panel .opportunity-row{transition:none}
  .priority-item:hover,
  .mini-card:hover{transform:none}
}

/* La bande semaine defile horizontalement dans son cadre, sans elargir la page. */
.week-strip{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding-bottom:var(--space-1)}
.week-strip > *{scroll-snap-align:start}

/* ---------- 40-planner.css ---------- */
/* 4Kaptured Admin, zone Planner : semaine, posts, idees, modeles, export */

/* ============================================================
   1. Bandes semaine
   Deux registres pour la meme grammaire : .week-strip resume la
   semaine sur l'overview, .week-detail-grid la deroule sur le
   planner. Sept colonnes egales tant que la place existe, sinon
   defilement horizontal contenu dans le panneau.
   ============================================================ */

.week-panel,
.planner-week-panel{min-width:0}
.planner-week-panel{margin-bottom:var(--space-3)}

/* Meta de titre de panneau : mono, effacee sous le h2. */
.week-panel h2 + span,
.planner-week-panel h2 + span,
.planner-list-heading h2 + span{
  display:block; margin-top:5px;
  color:var(--text-3); font-size:13px; line-height:1.5;
}

.week-strip,
.week-detail-grid{
  display:grid; grid-auto-flow:column;
  gap:var(--space-1);
  overflow-x:auto; overscroll-behavior-x:contain;
  padding-bottom:var(--space-1);
  scrollbar-width:thin; scrollbar-color:var(--line-2) transparent;
}
.week-strip{grid-auto-columns:minmax(168px,1fr)}
.week-detail-grid{grid-auto-columns:minmax(212px,1fr)}

.week-strip::-webkit-scrollbar,
.week-detail-grid::-webkit-scrollbar{height:6px}
.week-strip::-webkit-scrollbar-thumb,
.week-detail-grid::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:999px}

/* Colonne jour : un cran plus clair que le panneau qui la porte,
   pour que la profondeur se lise sans bordure coloree. */
.week-day,
.week-detail-day{
  min-width:0; padding:var(--space-2);
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--surface);
  transition:border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.week-day:hover,
.week-detail-day:hover{border-color:var(--line-2);background:var(--surface-3)}

.week-day > header,
.week-detail-day > header{
  display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-1);
  margin-bottom:var(--space-1); padding-bottom:var(--space-1);
  border-bottom:1px solid var(--line);
}
.week-day > header strong,
.week-detail-day > header strong{display:block;font-size:12px;font-weight:600;letter-spacing:-.01em}
.week-day > header span,
.week-detail-day > header span{
  display:block; margin-top:3px;
  color:var(--text-4); font-family:var(--font-mono);
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
}

/* Compteurs du jour : donnee systeme, donc mono, separee par un point median. */
.week-counts{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  margin-bottom:var(--space-1);
  color:var(--text-4); font-family:var(--font-mono);
  font-size:11px; letter-spacing:.06em;
}
.week-counts span + span::before{content:'·';margin-right:6px;color:var(--line-2)}

/* ------------------------------------------------------------
   2. Entrees de jour
   .week-item resume, .week-task porte les actions rapides.
   ------------------------------------------------------------ */

.week-item,
.week-task{
  display:grid; gap:3px;
  margin-top:6px; padding:8px 9px;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface-2);
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.week-item:hover,
.week-task:hover{border-color:var(--line-2);background:var(--surface-3)}

.week-item small,
.week-task small{
  color:var(--text-4); font-family:var(--font-mono);
  font-size:11px; letter-spacing:.06em;
}
.week-item strong,
.week-task strong{font-size:12px;font-weight:600;line-height:1.32;color:var(--text-2)}
.week-task p{margin:2px 0 0;color:var(--text-4);font-size:11px;line-height:1.5}

/* Actions rapides logees dans une colonne etroite : commandes
   compactes, l'echelle des boutons de la fondation ne tient pas ici. */
.week-task .quick-actions{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.week-task .quick-actions button{min-height:30px;padding:0 var(--space-1);font-size:10px}

/* Case vide du planner : creux, pointille, jamais une alerte. */
.empty-week-task{
  justify-items:start; gap:var(--space-1);
  border-style:dashed; border-color:var(--line-2); background:transparent;
}
.empty-week-task:hover{background:transparent;border-color:var(--line-2)}
.empty-week-task strong{color:var(--text-4);font-weight:500}
.empty-week-task a{min-height:32px;padding:0 var(--space-2);font-size:10px}

/* Note de creneau libre sur la bande resumee. */
.empty-slot{
  margin:var(--space-1) 0 0;
  color:var(--text-5); font-family:var(--font-mono);
  font-size:11px; line-height:1.5; letter-spacing:.04em;
}

/* ------------------------------------------------------------
   3. Etats
   .is-empty reste neutre, .is-overdue passe en danger,
   .is-today prend l'accent de marque et son glow.
   ------------------------------------------------------------ */

.week-day.is-empty{background:transparent;border-style:dashed}
.week-day.is-empty > header strong{color:var(--text-4)}
.week-day.is-empty:hover{background:transparent;border-color:var(--line-2)}

.week-task.is-overdue{border-color:var(--danger-border);background:var(--danger-bg)}
.week-task.is-overdue:hover{border-color:var(--danger);background:var(--danger-bg)}
.week-task.is-overdue small{color:var(--danger)}
.week-task.is-overdue strong{color:var(--text)}

.week-day.is-today,
.week-detail-day.is-today{
  border-color:color-mix(in srgb, var(--brand) 60%, transparent);
  background:var(--surface);
  box-shadow:inset 0 2px 0 var(--brand), var(--shadow-glow);
}
.week-day.is-today:hover,
.week-detail-day.is-today:hover{
  border-color:var(--brand);
  box-shadow:inset 0 2px 0 var(--brand), 0 16px 38px -12px var(--brand-glow);
}
.week-day.is-today > header strong,
.week-detail-day.is-today > header strong{color:var(--brand-2)}

/* ------------------------------------------------------------
   4. Onglets de vue
   Jeu segmente : un rail unique, le segment actif s'eclaircit et
   pose un filet de marque sous son libelle.
   ------------------------------------------------------------ */

.planner-tabs{
  display:flex; align-items:center; gap:2px;
  margin-bottom:var(--space-3); padding:4px;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface-2);
  overflow-x:auto; scrollbar-width:none;
}
.planner-tabs::-webkit-scrollbar{display:none}
.planner-tabs a{
  display:inline-flex; align-items:center; gap:8px;
  min-height:38px; padding:0 var(--space-3);
  border-radius:var(--radius);
  color:var(--text-3); font-size:12px; font-weight:600; white-space:nowrap;
  transition:color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.planner-tabs a:hover{color:var(--text);background:var(--surface-3)}
.planner-tabs a.active{color:var(--text);background:var(--surface-3);box-shadow:inset 0 -2px 0 var(--brand)}
.planner-tabs span{
  color:var(--text-4); font-family:var(--font-mono);
  font-size:11px; font-weight:500; letter-spacing:.08em;
}
.planner-tabs a.active span{color:var(--brand-2)}

/* ------------------------------------------------------------
   5. Vue posts : colonne de saisie collante, file editoriale a droite
   ------------------------------------------------------------ */

.planner-post-workspace{
  display:grid; grid-template-columns:minmax(300px,380px) minmax(0,1fr);
  gap:var(--space-3); align-items:start;
  margin-bottom:var(--space-3);
}

.planner-create-card{position:sticky;top:var(--space-4)}
.planner-create-card > summary{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-2);
  cursor:pointer; list-style:none;
}
.planner-create-card > summary::-webkit-details-marker{display:none}
.planner-create-card > summary strong{display:block;font-size:14px;letter-spacing:-.02em}
.planner-create-card > summary small{
  display:block; margin-top:4px;
  color:var(--text-3); 
  font-size:13px;line-height:1.5; 
}

/* Formulaires : une seule colonne, respiration constante. */
.editor-form,
.planner-detail-form{display:grid;gap:var(--space-3);min-width:0}
.editor-form > .panel-heading{margin-bottom:0}
.planner-detail-form{
  margin-top:var(--space-3); padding-top:var(--space-3);
  border-top:1px solid var(--line);
}

.planner-scan-list{display:grid;gap:var(--space-2);align-content:start;min-width:0}
.planner-list-heading{margin-bottom:2px}

/* ------------------------------------------------------------
   6. Carte de post
   Titre en vedette, kicker et meta en retrait, actions en pied.
   ------------------------------------------------------------ */

.planner-scan-card{display:grid;gap:var(--space-2);padding:var(--space-3);min-width:0}
.planner-scan-card:hover{border-color:var(--line-2);box-shadow:var(--shadow-soft);transform:translateY(-1px)}

.planner-card-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-2);
}
.planner-card-head > div{min-width:0}

.planner-post-title{
  display:block;
  font-size:18px; font-weight:700; line-height:1.2; letter-spacing:-.03em;
  color:var(--text);
}

.planner-card-brief{
  max-width:74ch; margin:0;
  color:var(--text-3); font-size:13px; line-height:1.6;
}

.planner-card-meta{display:flex;flex-wrap:wrap;gap:6px}
.planner-card-meta span{
  display:inline-flex; align-items:center;
  padding:4px 9px; border:1px solid var(--line); border-radius:999px;
  background:var(--surface-3); color:var(--text-4);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em;
  white-space:nowrap;
}

.planner-card-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1)}
.planner-card-actions > *{min-height:36px;font-size:11px}

/* Edition repliee : caisson interne, un cran plus clair que la carte. */
.planner-editor-details{
  margin-top:2px; padding:var(--space-2);
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface);
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.planner-editor-details:hover{border-color:var(--line-2)}
.planner-editor-details[open]{border-color:var(--line-2);background:var(--surface-3)}
.planner-editor-details > summary{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-2);
  cursor:pointer; list-style:none;
  color:var(--text-3); font-size:11px; font-weight:600;
}
.planner-editor-details > summary::-webkit-details-marker{display:none}
.planner-editor-details > summary:hover{color:var(--text)}
.planner-editor-details > summary small{
  color:var(--text-3); 
  font-size:13px;line-height:1.5;  white-space:nowrap;
}

/* ------------------------------------------------------------
   7. Vue idees
   ------------------------------------------------------------ */

/* Bandeau de statuts : filets partages, un chiffre par cellule. */
.idea-stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:1px;
  margin-bottom:var(--space-3);
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--line); overflow:hidden;
}
.idea-stats article{
  display:grid; gap:8px; padding:var(--space-3);
  background:var(--surface-2);
  transition:background .25s var(--ease);
}
.idea-stats article:hover{background:var(--surface-3)}
.idea-stats span{
  color:var(--text-4); font-family:var(--font-mono);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
}
.idea-stats strong{
  color:var(--text); font-family:var(--font-mono);
  font-size:26px; font-weight:600; line-height:1; letter-spacing:-.02em;
}

.editor-list{display:grid;gap:var(--space-2);align-content:start;min-width:0}

.idea-card{display:grid;gap:var(--space-3);padding:var(--space-3);min-width:0}
.idea-card:hover{border-color:var(--line-2);box-shadow:var(--shadow-soft)}
.idea-card > form{display:grid;gap:var(--space-2);min-width:0}
.idea-card > form + form{padding-top:var(--space-3);border-top:1px solid var(--line)}
.idea-card > form + form .panel-heading{margin-bottom:0}

/* Rappel des idees sur l'overview. */
.ideas-overview{min-width:0;align-self:start;margin-bottom:var(--space-3)}

/* ------------------------------------------------------------
   8. Vue export
   ------------------------------------------------------------ */

.export-layout{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-3); align-items:start;
  margin-bottom:var(--space-3);
}

/* ============================================================
   9. Adaptations
   ============================================================ */

@media (max-width:1100px){
  .planner-post-workspace{grid-template-columns:1fr}
  .planner-create-card{position:static}
  .export-layout{grid-template-columns:1fr}
  .week-detail-grid{grid-auto-columns:minmax(200px,1fr)}
}

@media (max-width:720px){
  .week-strip{grid-auto-columns:minmax(164px,.82fr)}
  .week-detail-grid{grid-auto-columns:minmax(212px,.88fr)}
  .planner-tabs a{padding:0 var(--space-2)}
  .planner-card-head{flex-direction:column;align-items:flex-start}
  .planner-post-title{font-size:16px}
  .planner-card-actions{flex-direction:column;align-items:stretch}
  .planner-card-actions > *{width:100%}
  .idea-stats{grid-template-columns:repeat(2,1fr)}
  .idea-stats strong{font-size:22px}
  .week-day,.week-detail-day,.week-item,.week-task,
  .planner-scan-card,.idea-card,.idea-stats article,
  .planner-tabs a,.planner-editor-details{transition:none}
}

@media (prefers-reduced-motion:reduce){
  .week-day,.week-detail-day,.week-item,.week-task,
  .planner-scan-card,.idea-card,.idea-stats article,
  .planner-tabs a,.planner-editor-details{transition:none}
  .planner-scan-card:hover{transform:none}
}

/* La bande semaine defile horizontalement dans son cadre, sans elargir la page. */
.week-strip{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding-bottom:var(--space-1)}
.week-strip > *{scroll-snap-align:start}

/* ---------- 50-entities.css ---------- */
/* 4Kaptured Admin : Entites, pages Messages et Projects (scan, fiches, filtres, conversions) */

/* ============================================================
   1. Espace de travail liste + detail
   Grille principale partagee par Messages et Projects : la file
   scanne a gauche, le panneau de creation et le resume a droite.
   ============================================================ */
.scan-workspace{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(288px,352px);
  align-items:start;
  gap:var(--space-3);
  max-width:var(--container-wide);
  margin-inline:auto;
}

.scan-main,
.scan-side{display:grid;gap:var(--space-2);min-width:0}

/* Le panneau lateral suit la lecture de la file. */
.scan-side{position:sticky;top:var(--space-4)}

/* ============================================================
   2. Barre de filtres
   ============================================================ */
/* La barre de filtres se superpose proprement a la file : les listes
   deroulantes et l'anneau de focus passent au dessus des cartes suivantes. */
.scan-toolbar{position:relative;z-index:1;isolation:isolate}

.scan-filter-form{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(136px,1fr));
  align-items:end;
  gap:var(--space-2);
}
/* Le champ de recherche porte la requete principale : deux colonnes. */
.scan-filter-form > label:first-of-type{grid-column:span 2}

/* Projects filtre sur moins de criteres, ses champs peuvent respirer. */
.project-filter-form{grid-template-columns:repeat(auto-fit,minmax(158px,1fr))}

/* Les actions occupent leur propre rangee, jamais comprimees dans une
   cellule de la grille : c'est ce qui faisait se chevaucher les boutons. */
.scan-filter-actions{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:var(--space-1);align-items:center}
.scan-filter-actions > *{flex:0 0 auto}

/* ============================================================
   3. File scannable
   ============================================================ */
.scan-list{display:grid;gap:var(--space-1);min-width:0}

/* La ligne est une carte de la fondation, ramenee a zero padding :
   le remplissage est porte par le sommaire et par le detail. */
.scan-row{padding:0;overflow:hidden}

.scan-row:hover{
  border-color:var(--line-2);
  box-shadow:var(--shadow-soft);
}

/* Ouverture : bord plus clair et filet sous le sommaire. */
.scan-row[open]{border-color:var(--line-2)}
.scan-row[open] .scan-summary{
  border-bottom:1px solid var(--line);
  background:color-mix(in srgb, var(--surface-3) 42%, transparent);
}

.scan-editor-details > summary{cursor:pointer;list-style:none}
.scan-editor-details > summary::-webkit-details-marker{display:none}

/* ---------- Sommaire de ligne ---------- */
.scan-summary{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:var(--space-3);
  min-height:78px;
  padding:var(--space-2) var(--space-3);
  transition:background .3s var(--ease);
}

.scan-primary{min-width:0}
.scan-primary > strong{
  display:block;
  color:var(--text);
  font-size:15px;font-weight:600;line-height:1.25;letter-spacing:-.02em;
}
/* Apercu du contenu : deux lignes maximum, jamais un pave. */
.scan-primary > span{
  display:-webkit-box;
  overflow:hidden;
  margin-top:4px;
  color:var(--text-3);
  font-size:12px;line-height:1.5;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

/* Metadonnees : mono, alignees a droite, elles doivent s'effacer. */
.scan-meta{
  display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;
  gap:6px;
}
.scan-meta > span{
  color:var(--text-4);
  font-family:var(--font-mono);font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
}

/* Affordance d'ouverture. */
.scan-open{
  display:inline-flex;align-items:center;
  padding:7px 10px;
  border:1px solid var(--line);border-radius:var(--radius);
  color:var(--text-4);
  font-family:var(--font-mono);font-size:11px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
  transition:border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.scan-row:hover .scan-open{border-color:var(--line-2);color:var(--text-2)}
.scan-row[open] .scan-open{
  border-color:var(--brand);
  background:color-mix(in srgb, var(--brand) 14%, transparent);
  color:var(--text);
}

/* ---------- Bandeau de faits ----------
   Les chiffres sautent aux yeux, les intitules restent en mono discret. */
.scan-facts{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(124px,1fr));
  gap:1px;
  margin:var(--space-3) var(--space-3) 0;
  overflow:hidden;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--line);
}
.scan-facts > div{padding:10px var(--space-2);background:var(--surface-2)}
.scan-facts span,
.scan-facts strong{display:block}
.scan-facts span{
  color:var(--text-5);
  font-family:var(--font-mono);font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
}
.scan-facts strong{
  margin-top:5px;
  color:var(--text);
  font-size:15px;line-height:1.2;letter-spacing:-.02em;
}

/* ---------- Formulaire d'edition inline ---------- */
.scan-edit-form{padding:var(--space-3)}

/* Ligne archivee : presente, mais retiree du premier plan. */
.is-archived{opacity:.58;transition:opacity .3s var(--ease)}
.scan-row.is-archived:hover,
.scan-row.is-archived[open]{opacity:1}

/* ============================================================
   4. Panneau lateral : creation et resume
   ============================================================ */
.scan-create-card{padding:0;overflow:hidden}

.scan-create-summary{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-2);
  min-height:66px;
  padding:var(--space-3) var(--space-4);
  cursor:pointer;list-style:none;
  transition:background .3s var(--ease);
}
.scan-create-summary::-webkit-details-marker{display:none}
.scan-create-card:hover{border-color:var(--line-2);box-shadow:var(--shadow-soft)}
.scan-create-card[open] .scan-create-summary{
  border-bottom:1px solid var(--line);
  background:color-mix(in srgb, var(--surface-3) 42%, transparent);
}

.scan-create-summary strong,
.scan-create-summary small{display:block}
.scan-create-summary strong{font-size:14px;letter-spacing:-.02em}
.scan-create-summary small{
  margin-top:3px;
  color:var(--text-4);
  font-family:var(--font-mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;
}
/* Pastille d'action en fin de sommaire. */
.scan-create-summary > span:last-child{
  padding:7px 10px;
  border:1px solid var(--line);border-radius:var(--radius);
  color:var(--text-4);
  font-family:var(--font-mono);font-size:11px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.scan-create-card[open] .scan-create-summary > span:last-child{
  border-color:var(--brand);color:var(--text);
}
.scan-create-card .entity-inner{
  border-top:1px solid var(--line);
  padding:var(--space-3) var(--space-4) var(--space-4);
}

/* Deux colonnes : la colonne laterale est trop etroite pour quatre. */
.scan-summary-card .summary-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}

/* ============================================================
   5. Fiche entite generique
   Idees, templates et cartes de file editoriale partagent
   cette anatomie. Aucun filet colore a gauche : regle DS.
   ============================================================ */
.entity-card{position:relative;padding:var(--space-4);min-width:0}
.entity-card:hover{border-color:var(--line-2);box-shadow:var(--shadow-soft)}
/* Une ligne de file garde son remplissage a zero. */
.entity-card.scan-row,
.entity-card.scan-create-card{padding:0}

.entity-inner{display:grid;gap:var(--space-2);min-width:0}

.entity-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  gap:var(--space-2);
  margin-bottom:var(--space-1);
}
.entity-head > strong{
  min-width:0;
  font-size:15px;line-height:1.3;letter-spacing:-.025em;
}

/* Liens de rattachement : compteurs en mono. */
.entity-links{display:flex;flex-wrap:wrap;gap:6px}
.entity-links > span{
  padding:5px 9px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface-3);
  color:var(--text-3);
  font-family:var(--font-mono);font-size:11px;font-weight:500;
  letter-spacing:.08em;white-space:nowrap;
}

/* ============================================================
   6. Conversions et actions inline
   ============================================================ */
/* Conversion d'une idee en post : bloc detache par un filet. */
.convert-form{
  display:grid;gap:var(--space-2);
  margin-top:var(--space-3);
  border-top:1px solid var(--line);
  padding-top:var(--space-3);
}

.inline-action-form{display:inline-flex;margin:0}

/* Le libelle du bouton bascule apres copie : pas de reflux de la ligne. */
.copy-action{white-space:nowrap;flex:0 0 auto}
.copy-action[aria-live]{border-color:var(--success-border);color:var(--success)}

.manual-copy-actions{display:flex;flex-wrap:wrap;gap:var(--space-1);align-items:center}

/* ============================================================
   7. Lignes de livraison et de classement
   ============================================================ */
.delivery-item,
.rank-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:var(--space-3);
  border-top:1px solid var(--line);
  padding:var(--space-2) 0;
}
.delivery-item:first-of-type,
.rank-row:first-of-type{border-top:0;padding-top:0}

.delivery-item strong,
.rank-row strong{display:block;font-size:13px;letter-spacing:-.02em}
.rank-row span{
  display:block;margin-top:4px;
  color:var(--text-4);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;
}
/* Le resume d'une alerte est une phrase : sans, jamais mono. */
.delivery-item span{display:block;margin-top:3px;color:var(--text-3);font-size:13px;line-height:1.5}

.delivery-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1)}

/* ============================================================
   8. Blocs d'action du tableau de bord
   ============================================================ */
.action-layer-grid{align-items:start;margin-bottom:var(--space-3)}

.action-stack{display:grid;gap:var(--space-1);min-width:0}
.action-stack > article{
  border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--space-2);
  background:var(--surface-2);
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.action-stack > article:hover{
  border-color:var(--line-2);
  background:color-mix(in srgb, var(--surface-3) 42%, transparent);
}
.action-stack > article > span{
  display:block;
  color:var(--text-4);
  font-family:var(--font-mono);font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
}
.action-stack > article > strong{display:block;margin-top:6px;font-size:13px;letter-spacing:-.02em}
.action-stack > article > p{margin:5px 0 0;color:var(--text-3);font-size:12px;line-height:1.55}

/* ============================================================
   9. Adaptation
   ============================================================ */
@media (max-width:1100px){
  .scan-workspace{grid-template-columns:minmax(0,1fr)}
  .scan-side{position:static}
  .action-layer-grid{grid-template-columns:minmax(0,1fr)}
  .scan-filter-form{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
}

@media (max-width:720px){
  .scan-workspace,
  .scan-main,
  .scan-side,
  .scan-list{gap:var(--space-1)}

  .scan-filter-form,
  .project-filter-form{grid-template-columns:minmax(0,1fr)}
  .scan-filter-form > label:first-of-type{grid-column:auto}
  .scan-filter-actions{flex-direction:column;align-items:stretch}

  .scan-summary{
    grid-template-columns:minmax(0,1fr);
    align-items:start;
    gap:var(--space-2);
    padding:var(--space-2);
  }
  .scan-meta{justify-content:flex-start}
  .scan-open{width:100%;justify-content:center}
  .scan-facts{grid-template-columns:minmax(0,1fr);margin:var(--space-2) var(--space-2) 0}
  .scan-edit-form{padding:var(--space-2)}

  .scan-create-summary{padding:var(--space-2) var(--space-3)}
  .scan-create-card .entity-inner{padding:var(--space-3)}
  .scan-summary-card{padding:var(--space-3)}

  .entity-card{padding:var(--space-3)}
  .entity-head{grid-template-columns:minmax(0,1fr)}
  .delivery-item,
  .rank-row{grid-template-columns:minmax(0,1fr);align-items:start;gap:var(--space-1)}
  .manual-copy-actions,
  .delivery-actions{align-items:stretch;flex-direction:column}
  .manual-copy-actions > *,
  .delivery-actions > *{width:100%}
  .inline-action-form{display:flex;width:100%}
  .inline-action-form > button{width:100%}

  /* Allegement du mouvement sous 720px : regle DS. */
  .scan-row,
  .scan-summary,
  .scan-open,
  .scan-create-card,
  .scan-create-summary,
  .entity-card,
  .action-stack > article,
  .is-archived{transition:none}
}

@media (prefers-reduced-motion:reduce){
  .scan-row,
  .scan-summary,
  .scan-open,
  .scan-create-card,
  .scan-create-summary,
  .scan-create-summary > span:last-child,
  .entity-card,
  .action-stack > article,
  .is-archived{transition:none}
}

/* ---------- 60-analytics.css ---------- */
/* 4Kaptured Admin - Zone Analytics : plateformes, scores, graphes, sante data, integrations */

/* ============================================================
   1. Trames de page
   Deux colonnes editoriales : la lecture large a gauche, la
   synthese chiffree a droite. Grille CSS, jamais d'empilement flex.
   ============================================================ */
.platform-section,
.analytics-layout{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(300px,.65fr);
  align-items:start;
  gap:var(--space-3);
  margin-bottom:var(--space-3);
}

.analytics-alert-grid{
  gap:var(--space-3);
  margin-top:var(--space-3);
  margin-bottom:var(--space-3);
  align-items:start;
}

/* min-width:0 : sans lui la colonne large refuse de se comprimer. */
.platform-panel,
.analytics-main{min-width:0}

.analytics-main{display:grid;align-content:start}

.analytics-summary{display:grid;align-content:start;gap:var(--space-2);min-width:0}
.analytics-summary p{margin:0;color:var(--text-3);line-height:1.65}

/* ============================================================
   2. Graphe audience
   Barres neutres, la semaine courante seule porte le rouge.
   ============================================================ */
.bar-chart{
  position:relative;
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(24px,1fr);
  align-items:end;
  gap:clamp(6px,1.4vw,14px);
  min-height:clamp(190px,24vw,286px);
  margin:var(--space-2) 0 34px;
  padding:var(--space-4) 2px 0;
  border-bottom:1px solid var(--line-2);
}

.bar-chart i{
  position:relative;
  border-radius:var(--radius) var(--radius) 0 0;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--text) 13%,transparent),
    color-mix(in srgb,var(--text) 3%,transparent));
  box-shadow:inset 0 2px 0 var(--line-2);
  transition:background .3s var(--ease), box-shadow .3s var(--ease);
}
.bar-chart i:hover{
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--text) 22%,transparent),
    color-mix(in srgb,var(--text) 5%,transparent));
}

/* Derniere colonne : la periode en cours, seul point rouge du graphe. */
.bar-chart i:last-child{
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--brand) 40%,transparent),
    color-mix(in srgb,var(--brand) 6%,transparent));
  box-shadow:inset 0 2px 0 var(--brand-2), 0 12px 30px -18px var(--brand-glow);
}

/* Timecode de semaine : mono, sous l'axe, jamais dans la barre. */
.bar-chart span{
  position:absolute;
  top:calc(100% + 11px);
  left:50%;
  transform:translateX(-50%);
  color:var(--text-4);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* Repere de part de voix : alimente par --share quand une carte
   plateforme encadre le graphe. Sans la variable il se pose sur la
   ligne de base et reste invisible. */
.bar-chart::after{
  content:'';
  position:absolute;
  right:2px;
  bottom:var(--share,0%);
  left:2px;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,
    transparent,
    color-mix(in srgb,var(--platform,var(--line-2)) 60%,transparent),
    transparent);
}

/* ============================================================
   3. Scores
   L'anneau consomme --score en conic-gradient, la reglette aussi.
   ============================================================ */
.score-ring{
  position:relative;
  display:grid;
  place-content:center;
  gap:5px;
  inline-size:118px;
  block-size:118px;
  border-radius:50%;
  text-align:center;
  box-shadow:0 0 34px -16px var(--brand-glow);
}
.score-ring::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:50%;
  background:conic-gradient(from -90deg,
    var(--brand) 0 var(--score,0%),
    var(--line) var(--score,0%) 100%);
  /* Evide le disque : on garde un anneau de 5px, pas une pastille. */
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 6px),var(--text) calc(100% - 5px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 6px),var(--text) calc(100% - 5px));
}
.score-ring strong{
  position:relative;
  font-size:30px;
  line-height:1;
  letter-spacing:-.05em;
}
.score-ring span{
  position:relative;
  color:var(--text-4);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.score-track{
  overflow:hidden;
  height:4px;
  border-radius:var(--radius);
  background:var(--surface-3);
}
.score-track i{
  display:block;
  width:var(--score,70%);
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--platform,var(--brand)),var(--platform-alt,var(--brand-2)));
  box-shadow:0 0 16px color-mix(in srgb,var(--platform,var(--brand)) 30%,transparent);
  transition:width .45s var(--ease-out);
}

/* ============================================================
   4. Cartes plateforme
   EXCEPTION DOCUMENTEE : --platform et --platform-alt sont injectees
   en style inline par platform_visual_style(). Elles portent l'identite
   TikTok et Instagram, seule couleur non neutre autorisee ici.
   ============================================================ */
.platform-list,
.platform-analytics-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:var(--space-2);
}
.platform-analytics-grid{
  max-width:var(--container-wide);
  margin:0 auto var(--space-3);
  gap:var(--space-3);
}

.platform-card,
.platform-analytics-card{
  position:relative;
  overflow:hidden;
  display:grid;
  align-content:start;
  gap:var(--space-3);
  padding:var(--space-4);
  box-shadow:var(--shadow-soft);
}

/* Filet d'identite en tete de carte. Jamais de bordure gauche coloree. */
.platform-card::before,
.platform-analytics-card::before{
  content:'';
  position:absolute;
  inset:0 0 auto;
  height:1px;
  opacity:.55;
  background:linear-gradient(90deg,var(--platform),var(--platform-alt) 52%,transparent);
  transition:opacity .3s var(--ease);
}

/* Le survol eclaircit, il n'assombrit jamais. */
.platform-card:hover,
.platform-analytics-card:hover{
  border-color:var(--line-2);
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}
.platform-card:hover::before,
.platform-analytics-card:hover::before{opacity:1}

.platform-card > header{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:var(--space-2);
}
.platform-analytics-card > header{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:var(--space-2);
}

.platform-identity{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:var(--space-2);
  min-width:0;
}
.platform-identity strong,
.platform-analytics-card > header strong{
  display:block;
  font-size:15px;
  letter-spacing:-.025em;
  transition:color .3s var(--ease);
}
.platform-identity small,
.platform-analytics-card > header small{
  display:block;
  color:var(--text-4);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
}
.platform-card:hover .platform-identity strong,
.platform-analytics-card:hover > header strong{
  color:color-mix(in srgb,var(--platform) 32%,var(--text));
}

.platform-dot{
  inline-size:9px;
  block-size:9px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--platform),var(--platform-alt));
  box-shadow:0 0 0 4px color-mix(in srgb,var(--platform) 14%,transparent);
}

/* La pastille de croissance reprend le filet d'identite, en trace. */
.platform-card mark,
.platform-analytics-card mark{
  border-color:color-mix(in srgb,var(--platform-alt) 34%,var(--line));
}

/* Le score domine la carte : un chiffre lisible de loin, un label efface. */
.platform-score{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:end;
  gap:var(--space-3);
}
.platform-score span{
  display:block;
  color:var(--text-4);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.platform-score strong{
  display:block;
  margin-top:2px;
  font-size:32px;
  line-height:1;
  letter-spacing:-.05em;
}
.platform-score .score-track{margin-bottom:7px}

/* ============================================================
   5. Tuiles chiffrees
   Grille a filet de 1px : le fond porte la ligne, les cellules
   se posent une teinte au dessus de la carte.
   ============================================================ */
.platform-stats,
.analytics-numbers,
.data-health-facts,
.analytics-summary .data-trust-summary{
  overflow:hidden;
  display:grid;
  gap:1px;
  border-radius:var(--radius);
  background:var(--line);
}
.platform-stats{grid-template-columns:repeat(auto-fit,minmax(78px,1fr))}
.analytics-numbers{grid-template-columns:repeat(auto-fit,minmax(112px,1fr))}
.data-health-facts{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:var(--space-2)}
.analytics-summary .data-trust-summary{grid-template-columns:repeat(2,minmax(0,1fr))}

.platform-stats > div,
.analytics-numbers > div,
.data-health-facts > div,
.analytics-summary .data-trust-summary > div{
  padding:var(--space-2);
  background:var(--surface);
  transition:background .3s var(--ease);
}
.platform-stats > div:hover,
.analytics-numbers > div:hover,
.analytics-summary .data-trust-summary > div:hover{background:var(--surface-3)}

.platform-stats span,
.analytics-numbers span,
.data-health-facts span,
.analytics-summary .data-trust-summary span{
  display:block;
  color:var(--text-4);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.platform-stats strong,
.analytics-numbers strong,
.data-health-facts strong,
.analytics-summary .data-trust-summary strong{
  display:block;
  margin-top:5px;
  font-size:15px;
  letter-spacing:-.03em;
}
.analytics-numbers strong{font-size:19px}
.data-health-facts strong{font-size:12px;color:var(--text-2)}

.platform-card > footer,
.platform-analytics-card > footer{
  display:grid;
  gap:3px;
  padding-top:var(--space-2);
  border-top:1px solid var(--line);
  color:var(--text-3);
  
  font-size:13px;line-height:1.5;
  
}
.platform-card > footer strong{
  color:var(--text-2);
  font-family:var(--font-sans);
  font-size:12px;
  letter-spacing:-.01em;
}

/* ============================================================
   6. Sante data
   La carte reste neutre : la severite ne teinte qu'un filet superieur,
   via --sev pose en amont par la fondation.
   ============================================================ */
.alert-row.data-health-card{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  gap:var(--space-3);
  padding:var(--space-3);
  border-top:1px solid var(--line);
  box-shadow:var(--shadow-soft);
}
.alert-row.data-health-card::before{
  content:'';
  position:absolute;
  inset:0 0 auto;
  height:2px;
  background:var(--sev,var(--line-2));
  opacity:.7;
}
.data-health-card:hover{border-color:var(--line-2);box-shadow:var(--shadow)}

.data-health-copy{display:grid;gap:5px;min-width:0}
.data-health-copy strong{font-size:14px;letter-spacing:-.02em}
.data-health-copy p{margin:0;color:var(--text-3);font-size:12px;line-height:1.6}
.data-health-copy > span{
  color:var(--text-3);
  
  font-size:13px;line-height:1.5;
  
}

/* ============================================================
   7. Confiance data par canal
   Une matrice, pas un tableau : chaque canal est une ligne dense.
   ============================================================ */
.data-trust-panel{display:grid;align-content:start;gap:var(--space-1)}
.data-trust-panel > .panel-heading p{
  max-width:70ch;
  margin:5px 0 0;
  color:var(--text-3);
  font-size:12px;
  line-height:1.6;
}

.integration-matrix{display:grid;gap:var(--space-2)}

.integration-row{
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(170px,.28fr) minmax(0,1fr);
  align-items:stretch;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--surface-2);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.integration-row:hover{border-color:var(--line-2);box-shadow:var(--shadow-soft)}

.integration-platform{
  display:grid;
  align-content:center;
  gap:3px;
  padding:var(--space-2) var(--space-3);
}
.integration-platform strong{font-size:14px;letter-spacing:-.025em}
.integration-platform span{
  color:var(--text-4);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
}

.integration-fields{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  background:var(--line);
}
.integration-fields > div{padding:var(--space-2);background:var(--surface)}
.integration-fields span{
  display:block;
  color:var(--text-4);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.integration-fields strong{
  display:block;
  margin-top:5px;
  color:var(--text-2);
  font-size:12px;
  letter-spacing:-.01em;
}

/* La prochaine action tient toute la largeur : c'est la sortie de la ligne. */
.integration-next{grid-column:1/-1}
.integration-next span{color:var(--brand-2)}
.integration-next strong{color:var(--text);font-size:13px}

/* ============================================================
   8. Adaptations
   ============================================================ */
@media (max-width:1100px){
  .platform-section,
  .analytics-layout{grid-template-columns:minmax(0,1fr)}
  .platform-analytics-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
  .integration-row{grid-template-columns:minmax(0,1fr)}
  .integration-platform{border-bottom:1px solid var(--line)}
  .integration-fields{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:720px){
  .analytics-alert-grid{margin-top:var(--space-2)}
  .platform-list,
  .platform-analytics-grid{grid-template-columns:minmax(0,1fr)}
  .platform-card,
  .platform-analytics-card{padding:var(--space-3)}
  .platform-score strong{font-size:26px}
  .analytics-numbers,
  .analytics-summary .data-trust-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .data-health-facts{grid-template-columns:minmax(0,1fr)}
  .alert-row.data-health-card{grid-template-columns:minmax(0,1fr)}
  .alert-row.data-health-card .secondary-action{width:100%}
  .integration-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bar-chart{min-height:170px;margin-bottom:30px;padding-top:var(--space-3)}

  /* Mobile : on allege le mouvement, pas seulement par preference. */
  .platform-card,
  .platform-analytics-card,
  .integration-row,
  .bar-chart i,
  .score-track i{transition:none}
  .platform-card:hover,
  .platform-analytics-card:hover{transform:none}
}

@media (max-width:520px){
  .platform-stats,
  .analytics-numbers,
  .analytics-summary .data-trust-summary,
  .integration-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
  .score-ring{inline-size:104px;block-size:104px}
  .score-ring strong{font-size:25px}
  .platform-analytics-card > header{grid-template-columns:auto minmax(0,1fr);row-gap:var(--space-1)}
  .platform-analytics-card > header mark{grid-column:2}
}

@media (prefers-reduced-motion:reduce){
  .platform-card,
  .platform-analytics-card,
  .platform-card::before,
  .platform-analytics-card::before,
  .platform-identity strong,
  .platform-analytics-card > header strong,
  .integration-row,
  .bar-chart i,
  .score-track i,
  .platform-stats > div,
  .analytics-numbers > div,
  .analytics-summary .data-trust-summary > div{transition:none}
  .platform-card:hover,
  .platform-analytics-card:hover{transform:none}
}

/* L'etiquette de l'anneau tient sur deux lignes courtes, jamais sur le trait. */
.score-ring span{font-size:10px;letter-spacing:.1em;line-height:1.25;max-width:84px;margin-inline:auto}