/* Tableau de bord Phare IA : feuille de style unique (aucune ressource externe).
   Même identité que le site « Le faisceau » : nuit marine, menthe de la marque, lumière chaude du phare,
   polices Inter et Instrument Serif (licence OFL, hébergées ici). */

@font-face { font-family: "Instrument Serif"; src: url("polices/instrument-serif-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("polices/instrument-serif-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("polices/inter-normal.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }

:root {
  --fond: #04100F; --fond-2: #061513; --surface: #0A1C1A; --surface-2: #0E2421; --surface-3: #12302C;
  --texte: #EEF7F5; --doux: #9FB6B1; --discret: #7A958F;
  --ligne: rgba(220, 255, 247, .075); --ligne-forte: rgba(220, 255, 247, .15);
  --accent: #5EEAD4; --accent-fort: #8AF5E4; --accent-vif: #2DD4BF; --accent-doux: rgba(94, 234, 212, .1); --accent-texte: #03201C;
  --logo-principal: #2DD4BF; --logo-accent: #99F6E4;
  --lumiere: 255, 236, 196;
  --rouge: #F59A80; --rouge-rgb: 245, 154, 128; --ambre: #F0BC5E; --ambre-rgb: 240, 188, 94; --vert: #4ADE9F; --vert-rgb: 74, 222, 159;
  --bleu: #8DB8FF; --bleu-rgb: 141, 184, 255; --gris: #B4C6C2; --gris-rgb: 180, 198, 194; --neutre: #8FA7A2; --neutre-rgb: 143, 167, 162;
  --rouge-doux: rgba(var(--rouge-rgb), .1); --ambre-doux: rgba(var(--ambre-rgb), .1); --vert-doux: rgba(var(--vert-rgb), .1);
  --bleu-doux: rgba(var(--bleu-rgb), .1); --gris-doux: rgba(var(--gris-rgb), .08); --neutre-doux: rgba(var(--neutre-rgb), .08);
  --rayon: 16px;
  --ombre: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 20px 40px -24px rgba(0, 0, 0, .8);
  --police: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --serif: "Instrument Serif", "Palatino Linotype", Georgia, serif;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
  --douceur: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { background: var(--fond); }
body { background: var(--fond); color: var(--texte); font: 400 14.5px/1.55 var(--police); font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; }
/* Grain très léger, comme sur le site */
body::after { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-fort); }
h1, h2, h3 { line-height: 1.2; margin: 0; }
h1 { font-size: 30px; font-weight: 650; letter-spacing: -.028em; }
h2 { font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; }
h3 { font-size: 14.5px; font-weight: 600; }
p { margin: 0; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.005em; }
code, .mono { font-family: var(--mono); font-size: .9em; }
[hidden] { display: none !important; }
::selection { background: rgba(94, 234, 212, .3); }
.icone { flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.logo { flex: none; }
.logo .logo-principal { fill: var(--logo-principal); }
.logo .logo-accent { fill: var(--logo-accent); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lien-evitement { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--accent); color: var(--accent-texte); padding: 8px 12px; border: 0; border-radius: 8px; font: inherit; font-weight: 600; }
.lien-evitement:focus { top: 8px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Titres et zone principale reçoivent le focus à chaque changement de page (annonce aux lecteurs d'écran) : pas un contrôle, pas d'anneau. */
h1[tabindex="-1"]:focus, main[tabindex="-1"]:focus { outline: none; }
.doux { color: var(--doux); }
.espace { height: 18px; }
.chiffres { font-variant-numeric: tabular-nums; }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 7px 14px;
  border-radius: 10px; border: 1px solid var(--ligne-forte); background: rgba(255, 255, 255, .025); color: var(--texte);
  font: inherit; font-size: 13.5px; font-weight: 550; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease, transform .08s ease;
}
.bouton:hover { background: rgba(255, 255, 255, .06); border-color: rgba(220, 255, 247, .26); color: var(--texte); }
.bouton:active { transform: translateY(1px); }
.bouton:disabled { opacity: .45; cursor: not-allowed; }
.bouton:disabled:hover { background: rgba(255, 255, 255, .025); border-color: var(--ligne-forte); }
.bouton .icone { color: var(--doux); transition: color .18s ease; }
.bouton:hover .icone { color: var(--texte); }
.bouton.primaire { border-color: transparent; color: var(--accent-texte); font-weight: 650;
  background: linear-gradient(180deg, #9AF7E8, var(--accent) 48%, var(--accent-vif));
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 24px -12px rgba(94, 234, 212, .75); }
.bouton.primaire .icone { color: var(--accent-texte); }
.bouton.primaire:hover { box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .35), 0 12px 30px -10px rgba(94, 234, 212, .9); filter: brightness(1.04); }
.bouton.primaire:disabled { filter: saturate(.4); box-shadow: none; }
.bouton.danger { background: #C2412D; border-color: #C2412D; color: #fff; }
.bouton.danger:hover { background: #D24A35; border-color: #D24A35; }
.bouton.fantome { border-color: transparent; background: transparent; color: var(--doux); }
.bouton.fantome:hover { background: rgba(255, 255, 255, .06); color: var(--texte); }
.bouton.petit { min-height: 30px; padding: 4px 10px; font-size: 12.5px; border-radius: 8px; }
.bouton.icone-seule { padding: 0; width: 34px; min-height: 34px; }
.bouton.pleine { width: 100%; min-height: 42px; font-size: 14.5px; }

/* ---------- Formulaires ---------- */
.champ { display: grid; gap: 6px; margin-bottom: 16px; }
.champ label { font-size: 13px; font-weight: 550; color: var(--texte); }
.champ .aide { color: var(--discret); font-size: 12.5px; margin-top: -2px; }
input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="search"], select, textarea {
  width: 100%; min-height: 40px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--ligne-forte);
  background: rgba(0, 0, 0, .22); color: var(--texte); font: inherit; font-size: 14px;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
input::placeholder, textarea::placeholder { color: var(--discret); }
input:hover, select:hover, textarea:hover { border-color: rgba(220, 255, 247, .24); }
select { appearance: none; padding-right: 34px; cursor: pointer;
  background: rgba(0, 0, 0, .22) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239FB6B1' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; }
select option { background: var(--surface); color: var(--texte); }
textarea { min-height: 120px; resize: vertical; font-family: var(--mono); font-size: 13px; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; background-color: rgba(0, 0, 0, .3); box-shadow: 0 0 0 3px rgba(94, 234, 212, .16); }
input:disabled, select:disabled, textarea:disabled { opacity: .6; cursor: not-allowed; }
input[type="color"] { width: 52px; height: 40px; padding: 4px; border-radius: 10px; border: 1px solid var(--ligne-forte); background: rgba(0, 0, 0, .22); cursor: pointer; }
.case { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; margin: 6px 0 14px; cursor: pointer; }
.case input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--accent); }
.erreur-formulaire { background: var(--rouge-doux); border: 1px solid rgba(var(--rouge-rgb), .3); color: #FFD3C6; border-radius: 10px; padding: 10px 12px; font-size: 13.5px; margin-bottom: 14px; }
.info-formulaire { background: var(--accent-doux); border: 1px solid rgba(94, 234, 212, .25); color: var(--texte); border-radius: 10px; padding: 12px 14px; font-size: 13.5px; margin-bottom: 14px; }

/* ---------- Portes d'entrée (connexion, inscription, bienvenue) ---------- */
.porte { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 32px 16px; isolation: isolate; overflow: hidden;
  background: radial-gradient(900px 520px at 50% 115%, rgba(15, 118, 110, .32), transparent 70%), linear-gradient(180deg, #020A09, var(--fond) 50%, #061A17); }
.porte-carte { position: relative; width: min(420px, 100%); background: linear-gradient(180deg, rgba(14, 36, 33, .92), rgba(10, 28, 26, .92)); border: 1px solid var(--ligne-forte); border-radius: 22px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 40px 80px -30px rgba(0, 0, 0, .9); padding: 32px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.porte-marque { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.porte-marque strong { display: block; font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
.porte-marque span { color: var(--discret); font-size: 12.5px; }
.porte h1 { font-size: 26px; margin-bottom: 8px; }
.porte .sous-titre { color: var(--doux); margin-bottom: 24px; }
.porte-liens { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; font-size: 13.5px; flex-wrap: wrap; }
.porte-liens a { color: var(--doux); text-decoration: none; }
.porte-liens a:hover { color: var(--accent); }
.porte-pied { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--ligne); color: var(--discret); font-size: 12px; text-align: center; }
.choix-accueil { position: relative; width: min(880px, 100%); display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.choix-accueil .porte-carte { width: 100%; }
@media (max-width: 760px) { .choix-accueil { grid-template-columns: 1fr; } }

/* Porte scindée : scène du phare à gauche, formulaire à droite */
.porte.scindee { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); place-items: stretch; padding: 0; }
.porte-scene { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 40px 48px; border-right: 1px solid var(--ligne);
  background: radial-gradient(1000px 600px at 20% 120%, rgba(15, 118, 110, .4), transparent 70%), linear-gradient(180deg, #020A09, #051311); }
.porte-scene .marque-scene { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 10px; font-weight: 650; font-size: 17px; letter-spacing: -.01em; color: var(--texte); text-decoration: none; }
.porte-scene .accroche { position: relative; z-index: 2; margin: 0; max-width: 12em; font: 600 clamp(34px, 3.6vw, 52px)/1.05 var(--police); letter-spacing: -.035em; text-wrap: balance; }
.porte-scene .accroche em { display: inline; font-size: 1.1em; background: linear-gradient(180deg, #C9FFF5 10%, var(--accent) 55%, var(--accent-vif)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.porte-scene .legende { position: relative; z-index: 2; margin-top: 18px; max-width: 30em; color: var(--doux); font-size: 15px; }
.porte-scene .garanties { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; list-style: none; color: var(--discret); font-size: 12.5px; }
.porte-scene .garanties li::before { content: "✓"; margin-right: 7px; color: var(--accent); font-weight: 700; }
.porte-zone { position: relative; display: grid; place-items: center; padding: 40px 24px; }
.porte.scindee .porte-carte { background: transparent; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 8px; width: min(400px, 100%); }
.porte.scindee .porte-marque { display: none; }
/* Le faisceau qui balaie la scène */
.scene-faisceau { position: absolute; left: 12%; bottom: -10%; width: 0; height: 0; z-index: 1; pointer-events: none; }
.scene-faisceau span { position: absolute; left: -140vmax; top: -140vmax; width: 280vmax; height: 280vmax; mix-blend-mode: screen; transform-origin: 50% 50%;
  background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(var(--lumiere), .06) 4deg, rgba(var(--lumiere), .26) 9deg, rgba(var(--lumiere), .42) 12deg, rgba(var(--lumiere), .2) 15deg, rgba(var(--lumiere), .05) 20deg, transparent 24deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, .7) 18%, rgba(0, 0, 0, .22) 42%, transparent 66%); mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, .7) 18%, rgba(0, 0, 0, .22) 42%, transparent 66%);
  animation: balayage-scene 14s ease-in-out infinite alternate; }
@keyframes balayage-scene { from { rotate: -6deg; } to { rotate: 52deg; } }
.scene-lanterne { position: absolute; left: 12%; bottom: -10%; z-index: 1; width: 260px; height: 260px; translate: -50% 50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(var(--lumiere), .85), rgba(var(--lumiere), .2) 20%, transparent 62%); }
.scene-grille { position: absolute; inset: 0; z-index: 0; opacity: .5; pointer-events: none;
  background-image: linear-gradient(rgba(220, 255, 247, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(220, 255, 247, .045) 1px, transparent 1px); background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at 30% 80%, #000, transparent 70%); mask-image: radial-gradient(ellipse at 30% 80%, #000, transparent 70%); }
@media (max-width: 960px) {
  .porte.scindee { grid-template-columns: 1fr; }
  .porte-scene { display: none; }
  .porte.scindee .porte-carte { background: linear-gradient(180deg, rgba(14, 36, 33, .92), rgba(10, 28, 26, .92)); border: 1px solid var(--ligne-forte); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9); padding: 28px 24px; }
  .porte.scindee .porte-marque { display: flex; }
}

/* ---------- Coque : barre latérale + contenu ---------- */
.coque { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
.laterale { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 4px; padding: 18px 12px 14px; border-right: 1px solid var(--ligne);
  background: linear-gradient(180deg, rgba(10, 28, 26, .7), rgba(4, 16, 15, .4)); }
.laterale .marque { display: flex; align-items: center; gap: 10px; padding: 2px 8px 18px; }
.laterale .marque strong { font-size: 15px; font-weight: 650; display: block; line-height: 1.15; letter-spacing: -.01em; }
.laterale .marque span { font-size: 11.5px; color: var(--discret); letter-spacing: .01em; }
.selecteur-agence { margin: 0 0 14px; }
.selecteur-agence select { min-height: 38px; font-size: 13.5px; font-weight: 600; background-color: rgba(255, 255, 255, .03); }
.nom-agence { padding: 10px; margin: 0 0 8px; border-radius: 12px; border: 1px solid var(--ligne); background: rgba(255, 255, 255, .025); display: flex; align-items: center; gap: 10px; }
.nom-agence .couleur { width: 30px; height: 30px; border-radius: 9px; flex: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14) inset, 0 0 16px -4px currentColor; }
.nom-agence strong { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.nom-agence small { display: block; font-size: 11.5px; color: var(--discret); }
.nav { display: grid; gap: 2px; }
.nav-groupe { margin: 16px 0 4px; padding: 0 10px; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--discret); opacity: .8; }
.nav a { position: relative; display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 9px; color: var(--doux); text-decoration: none; font-weight: 500; font-size: 14px; transition: background .15s ease, color .15s ease; }
.nav a .icone { color: var(--discret); transition: color .15s ease; }
.nav a:hover { background: rgba(255, 255, 255, .04); color: var(--texte); }
.nav a:hover .icone { color: var(--doux); }
.nav a[aria-current="page"] { background: linear-gradient(90deg, rgba(94, 234, 212, .12), rgba(94, 234, 212, .03)); color: var(--texte); }
.nav a[aria-current="page"] .icone { color: var(--accent); }
.nav a[aria-current="page"]::before { content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.nav .compteur { margin-left: auto; min-width: 20px; text-align: center; font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums; border-radius: 999px; padding: 0 7px; line-height: 18px; }
.nav .compteur.bleu { background: var(--bleu-doux); color: var(--bleu); box-shadow: inset 0 0 0 1px rgba(var(--bleu-rgb), .3), 0 0 12px rgba(var(--bleu-rgb), .3); }
.nav .compteur.ambre { background: var(--ambre); color: #2A1A00; box-shadow: 0 0 12px rgba(var(--ambre-rgb), .45); }
.nav .compteur.discret { color: var(--discret); background: rgba(255, 255, 255, .04); }
.laterale-bas { margin-top: auto; display: grid; gap: 10px; }
/* Consommation de l'offre */
.carte-offre { display: grid; gap: 7px; padding: 12px; border-radius: 12px; border: 1px solid var(--ligne); color: var(--texte); text-decoration: none; transition: border-color .15s ease, background .15s ease;
  background: radial-gradient(160px 80px at 100% 0%, rgba(94, 234, 212, .1), transparent 70%), rgba(255, 255, 255, .02); }
.carte-offre:hover { border-color: rgba(94, 234, 212, .3); color: var(--texte); }
.offre-tete { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.offre-tete strong { font-weight: 600; }
.offre-tete span { color: var(--doux); font-variant-numeric: tabular-nums; }
.offre-jauge { height: 5px; border-radius: 5px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.offre-jauge span { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--accent-vif), #9AF7E8); box-shadow: 0 0 10px rgba(94, 234, 212, .6); }
.offre-jauge.pleine span { background: linear-gradient(90deg, #D99A35, var(--ambre)); }
.offre-pied { font-size: 11.5px; color: var(--discret); }
.utilisateur { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--doux); padding: 8px 4px 0 6px; border-top: 1px solid var(--ligne); overflow: hidden; }
.utilisateur .avatar { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 12px; font-weight: 650; color: var(--accent-texte); background: linear-gradient(140deg, #9AF7E8, var(--accent-vif)); }
.utilisateur span:not(.avatar) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.principal { position: relative; min-width: 0; padding: 30px 40px 72px; max-width: 1360px; width: 100%; }

/* ---------- Barre du haut ---------- */
.barre-haut { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; height: 62px; padding: 0 40px; border-bottom: 1px solid var(--ligne);
  background: rgba(4, 16, 15, .72); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); }
.menu-mobile { display: none !important; }
.fil-haut { min-width: 0; }
.fil-haut ol { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; min-width: 0; }
.fil-haut li { display: flex; align-items: center; gap: 8px; white-space: nowrap; min-width: 0; }
.fil-haut li + li::before { content: "/"; color: rgba(220, 255, 247, .22); }
.fil-haut a { color: var(--discret); text-decoration: none; }
.fil-haut a:hover { color: var(--texte); }
.fil-haut [aria-current] { color: var(--texte); font-weight: 550; overflow: hidden; text-overflow: ellipsis; }
.recherche-globale { margin-left: auto; display: flex; align-items: center; gap: 9px; width: min(320px, 28vw); height: 36px; padding: 0 7px 0 12px; border-radius: 10px; border: 1px solid var(--ligne-forte);
  background: rgba(0, 0, 0, .22); color: var(--discret); font: inherit; font-size: 13.5px; cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease; }
.recherche-globale span { flex: 1; text-align: left; }
.recherche-globale:hover { border-color: rgba(220, 255, 247, .26); color: var(--doux); background: rgba(0, 0, 0, .3); }
kbd { display: inline-block; font: 500 11px/1 var(--police); padding: 4px 6px; border-radius: 6px; border: 1px solid var(--ligne-forte); background: rgba(255, 255, 255, .04); color: var(--doux); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .06); white-space: nowrap; }
.puce-direct { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 550; white-space: nowrap;
  color: #C6F6DF; background: rgba(var(--vert-rgb), .08); border: 1px solid rgba(var(--vert-rgb), .22); }
.puce-direct i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--vert); animation: pouls 2.4s ease-out infinite; }
.puce-direct.active { color: #D9E7FF; background: rgba(var(--bleu-rgb), .1); border-color: rgba(var(--bleu-rgb), .32); }
.puce-direct.active i { background: var(--bleu); animation: pouls-bleu 1.4s ease-out infinite; }
.puce-direct.hors { color: #FBE3B5; background: var(--ambre-doux); border-color: rgba(var(--ambre-rgb), .3); }
.puce-direct.hors i { background: var(--ambre); animation: none; }
@keyframes pouls-bleu { 0% { box-shadow: 0 0 0 0 rgba(var(--bleu-rgb), .7); } 70%, 100% { box-shadow: 0 0 0 8px rgba(var(--bleu-rgb), 0); } }
.cloche { position: relative; }
.cloche .badge { position: absolute; top: 1px; right: 0; display: grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--ambre); color: #2A1A00;
  font-size: 10.5px; font-weight: 700; box-shadow: 0 0 0 2px var(--fond), 0 0 12px rgba(var(--ambre-rgb), .6); }
.lien-bouton { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; color: var(--doux); cursor: pointer; }
.lien-bouton:hover { color: var(--accent); }
/* Halo du phare en haut de la zone de travail */
.zone { position: relative; min-width: 0; isolation: isolate; }
.zone::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 520px; pointer-events: none;
  background: radial-gradient(700px 320px at 78% -60px, rgba(15, 118, 110, .22), transparent 70%), radial-gradient(500px 240px at 100% -40px, rgba(var(--lumiere), .05), transparent 70%); }
.entete { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 20px; flex-wrap: wrap; margin-bottom: 26px; }
.entete .doux { color: var(--doux); margin-top: 6px; font-size: 14px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fil { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--discret); margin-bottom: 10px; }
.fil a { color: var(--doux); text-decoration: none; }
.fil a:hover { color: var(--accent); }

@media (max-width: 900px) {
  .coque { grid-template-columns: 1fr; }
  .laterale { position: fixed; inset: 0 auto 0 0; width: min(290px, 86vw); z-index: 40; transform: translateX(-102%); transition: transform .25s var(--douceur); background: var(--surface); box-shadow: 30px 0 60px -20px rgba(0, 0, 0, .8); }
  .coque.menu-ouvert .laterale { transform: none; }
  .voile { position: fixed; inset: 0; background: rgba(1, 6, 5, .6); backdrop-filter: blur(2px); z-index: 39; }
  .barre-haut { padding: 0 12px; gap: 6px; height: 56px; }
  .menu-mobile { display: inline-flex !important; }
  .fil-haut li:not(:last-child) { display: none; }
  .fil-haut li:last-child::before { display: none; }
  .recherche-globale { width: 36px; padding: 0; justify-content: center; }
  .recherche-globale span, .recherche-globale kbd, .puce-direct span { display: none; }
  .puce-direct { padding: 0 11px; }
  .barre-haut .ajout { width: 36px; padding: 0; gap: 0; font-size: 0; }
  .principal { padding: 22px 16px 56px; }
  h1 { font-size: 25px; }
}

/* ---------- Cartes ---------- */
.carte { position: relative; background: linear-gradient(180deg, rgba(14, 36, 33, .72), rgba(10, 28, 26, .72)); border: 1px solid var(--ligne); border-radius: var(--rayon); box-shadow: var(--ombre); }
.carte-corps { padding: 20px 22px; }
.carte-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 14px 22px; border-bottom: 1px solid var(--ligne); }
.carte-tete a { font-size: 13px; color: var(--doux); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.carte-tete a:hover { color: var(--accent); }
.carte-tete a::after { content: "→"; transition: transform .18s ease; }
.carte-tete a:hover::after { transform: translateX(3px); }
.grille-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1100px) { .grille-2 { grid-template-columns: 1fr; } }

/* ---------- Vue d'ensemble : grille de cartes ---------- */
.accueil-entete h1 { font-size: 36px; margin-top: 10px; letter-spacing: -.035em; }
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.l4 { grid-column: span 4; } .l5 { grid-column: span 5; } .l7 { grid-column: span 7; } .l8 { grid-column: span 8; } .l12 { grid-column: span 12; }
@media (max-width: 1240px) { .l4, .l5, .l7, .l8 { grid-column: span 12; } }
.bento .indicateurs { margin: 0; }

/* Indice de transparence : jauge, phrase, courbe sur 30 jours */
@property --tour { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.indice-carte { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 24px 36px; padding: 28px 32px 30px; border-color: var(--ligne-forte);
  background: radial-gradient(520px 280px at 0% 0%, rgba(94, 234, 212, .13), transparent 70%), radial-gradient(400px 200px at 100% 100%, rgba(var(--lumiere), .05), transparent 70%), linear-gradient(180deg, rgba(14, 36, 33, .88), rgba(8, 24, 22, .88)); }
/* Un éclat de lumière fait le tour de la carte, comme le faisceau du phare */
.indice-carte::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--tour), transparent 0 68%, rgba(var(--lumiere), .5) 78%, rgba(94, 234, 212, .8) 84%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  animation: tour-lumiere 8s linear infinite; }
@keyframes tour-lumiere { to { --tour: 360deg; } }
.jauge-indice { position: relative; width: 184px; height: 184px; flex: none; }
.jauge-indice svg { width: 100%; height: 100%; overflow: visible; }
.piste-indice { fill: none; stroke: rgba(255, 255, 255, .06); stroke-width: 9; }
.arc-indice { fill: none; stroke: url(#degrade-indice); stroke-width: 9; stroke-linecap: round; filter: drop-shadow(0 0 7px rgba(94, 234, 212, .55)); }
.jauge-valeur { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.jauge-valeur strong { font-size: 50px; font-weight: 600; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.jauge-valeur small { margin-left: 2px; font-size: 20px; font-weight: 500; letter-spacing: 0; color: var(--doux); }
.jauge-valeur > span { margin-top: 8px; font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--discret); }
.indice-contenu { min-width: 0; }
.indice-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.indice-phrase { margin-top: 10px; font-size: 23px; font-weight: 500; letter-spacing: -.02em; line-height: 1.3; color: var(--doux); }
.indice-phrase b { color: var(--texte); font-weight: 650; font-variant-numeric: tabular-nums; }
.indice-phrase em { color: var(--texte); font-size: 1.1em; }
.courbe-cadre { position: relative; margin-top: 16px; height: 92px; }
.courbe { display: block; width: 100%; height: 100%; overflow: visible; }
.courbe-grille { stroke: rgba(220, 255, 247, .07); stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.courbe-aire { fill: url(#remplissage-indice); }
.courbe-ligne { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px rgba(94, 234, 212, .6)); }
.courbe-point { position: absolute; width: 10px; height: 10px; translate: -50% -50%; border-radius: 50%; background: #E9FFFB; box-shadow: 0 0 0 4px rgba(94, 234, 212, .22), 0 0 16px 4px rgba(94, 234, 212, .55); animation: point-indice 2.4s ease-in-out infinite; }
@keyframes point-indice { 50% { box-shadow: 0 0 0 9px rgba(94, 234, 212, .06), 0 0 24px 6px rgba(94, 234, 212, .45); } }
.courbe-axe { position: absolute; left: 0; right: 0; bottom: -20px; display: flex; justify-content: space-between; font-size: 11px; color: var(--discret); }
.courbe-vide { margin-top: 16px; color: var(--discret); font-size: 13px; }
.appel-traiter { margin-top: 36px; display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; border: 1px solid rgba(var(--rouge-rgb), .28); color: var(--texte); text-decoration: none; font-size: 13.5px;
  background: linear-gradient(90deg, rgba(var(--rouge-rgb), .12), rgba(var(--ambre-rgb), .04)); transition: border-color .18s ease, background .18s ease; }
.appel-traiter:hover { border-color: rgba(var(--rouge-rgb), .5); color: var(--texte); background: linear-gradient(90deg, rgba(var(--rouge-rgb), .18), rgba(var(--ambre-rgb), .06)); }
.appel-traiter > .icone { margin-left: auto; color: var(--rouge); transition: transform .18s ease; }
.appel-traiter:hover > .icone { transform: translateX(3px); }
.appel-nombre { display: grid; place-items: center; flex: none; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 9px; background: var(--rouge); color: #2B0D06; font-weight: 700; font-size: 15px; box-shadow: 0 0 18px rgba(var(--rouge-rgb), .45); }
.appel-traiter.calme { border-color: rgba(var(--vert-rgb), .25); background: var(--vert-doux); }
.appel-traiter.calme > .icone { margin-left: 0; color: var(--vert); }
@media (max-width: 640px) {
  .indice-carte { grid-template-columns: 1fr; justify-items: center; padding: 22px 18px 24px; }
  .indice-contenu { width: 100%; }
  .indice-phrase { font-size: 19px; }
}

/* Écart sur une période */
.ecart { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ecart.bon { color: var(--vert); background: var(--vert-doux); }
.ecart.mauvais { color: var(--rouge); background: var(--rouge-doux); }
.ecart.stable { color: var(--discret); background: rgba(255, 255, 255, .045); }
.indicateur .ecart { align-self: flex-start; margin-top: 6px; }

/* Surveillance en direct */
.direct-carte { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 18px; padding: 22px; }
.direct-tete { align-self: stretch; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.direct-carte .radar { --taille: 224px; }
.direct-chiffres { align-self: stretch; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.direct-chiffres div { padding: 9px 6px; border-radius: 11px; border: 1px solid var(--ligne); background: rgba(0, 0, 0, .16); text-align: center; }
.direct-chiffres dt { font-size: 11px; color: var(--discret); }
.direct-chiffres dd { margin: 2px 0 0; font-weight: 600; font-size: 14.5px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Liste « À traiter » : le constat principal sous chaque site */
.liste .ligne-gauche { flex: 1; }
.liste .texte .constat { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lien-site { color: var(--texte); text-decoration: none; }
.lien-site:hover strong { color: var(--accent); }
.vide > .icone { color: var(--vert); margin: 0 auto 8px; display: block; }

/* Fil d'activité */
.fil-activite { list-style: none; margin: 0; padding: 10px 22px 16px; }
.fil-activite li { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; padding: 9px 0; }
.fil-activite li:not(:last-child)::before { content: ""; position: absolute; left: 12.5px; top: 37px; bottom: -8px; width: 1px; background: linear-gradient(var(--ligne-forte), transparent); }
.noeud { --n-rgb: var(--neutre-rgb); position: relative; z-index: 1; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  color: rgb(var(--n-rgb)); border: 1px solid rgba(var(--n-rgb), .38); background: var(--surface); box-shadow: inset 0 0 0 20px rgba(var(--n-rgb), .1); }
.noeud.rouge { --n-rgb: var(--rouge-rgb); } .noeud.ambre { --n-rgb: var(--ambre-rgb); } .noeud.vert { --n-rgb: var(--vert-rgb); } .noeud.gris { --n-rgb: var(--gris-rgb); } .noeud.bleu { --n-rgb: var(--bleu-rgb); }
.noeud.direct::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid rgba(var(--bleu-rgb), .6); animation: onde 1.6s ease-out infinite; }
@keyframes onde { from { opacity: 1; transform: scale(.8); } to { opacity: 0; transform: scale(1.5); } }
.fil-activite .texte { min-width: 0; padding-top: 2px; }
.fil-activite .texte p { font-size: 13.5px; color: var(--doux); line-height: 1.4; }
.fil-activite .texte a { color: var(--texte); font-weight: 600; text-decoration: none; }
.fil-activite .texte a:hover { color: var(--accent); }
.fil-activite .texte > span { display: block; margin-top: 1px; font-size: 12.5px; color: var(--discret); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fil-activite time { padding-top: 4px; font-size: 12px; color: var(--discret); white-space: nowrap; }
.fil-activite li.nouveau .noeud { box-shadow: inset 0 0 0 20px rgba(var(--n-rgb), .16), 0 0 14px rgba(var(--n-rgb), .5); }
.etiquette-nouveau { margin-left: 8px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 650; color: #2A1A00; background: var(--ambre); vertical-align: 1px; }

/* Par client */
.clients { list-style: none; margin: 0; padding: 8px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 14px; }
@media (max-width: 900px) { .clients { grid-template-columns: 1fr; } }
.ligne-client { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(70px, 150px) auto auto; align-items: center; gap: 14px; padding: 11px 14px; border-radius: 12px; color: inherit; text-decoration: none; transition: background .15s ease; }
.ligne-client:hover { background: rgba(255, 255, 255, .03); color: inherit; }
.ligne-client > .icone { color: var(--discret); transition: transform .18s ease, color .18s ease; }
.ligne-client:hover > .icone { color: var(--accent); transform: translateX(3px); }
.client-nom { min-width: 0; }
.client-nom strong { display: block; font-weight: 600; color: var(--texte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.client-nom span { font-size: 12px; color: var(--discret); }
.repartition.mini { height: 6px; margin: 0; gap: 2px; }
.client-etat { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.client-etat.attention { color: var(--ambre); }
.client-etat.calme { color: var(--vert); }
@media (max-width: 640px) { .ligne-client { grid-template-columns: auto minmax(0, 1fr) auto; } .ligne-client .repartition, .ligne-client > .icone { display: none; } }

.surtitre { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.surtitre::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.repartition { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, .05); gap: 3px; margin-top: 24px; }
.repartition span { display: block; height: 100%; border-radius: 999px; transform-origin: left; }
.repartition .vert { background: linear-gradient(90deg, #2BB37C, var(--vert)); box-shadow: 0 0 14px rgba(var(--vert-rgb), .45); }
.repartition .ambre { background: linear-gradient(90deg, #D99A35, var(--ambre)); box-shadow: 0 0 14px rgba(var(--ambre-rgb), .4); }
.repartition .rouge { background: linear-gradient(90deg, #E0705A, var(--rouge)); box-shadow: 0 0 14px rgba(var(--rouge-rgb), .45); }
.repartition .gris { background: var(--gris); opacity: .55; } .repartition .neutre { background: var(--neutre); opacity: .3; }

/* Le radar : chaque point est un site, le faisceau du robot les balaie */
.radar { --taille: 300px; --periode: 9s; position: relative; width: var(--taille); height: var(--taille); flex: none; border-radius: 50%; isolation: isolate;
  background: radial-gradient(circle, rgba(94, 234, 212, .08), rgba(4, 16, 15, .2) 60%, transparent 71%); }
.radar-anneaux { position: absolute; inset: 0; border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 calc(var(--taille) * .166 - 1px), rgba(220, 255, 247, .07) calc(var(--taille) * .166 - 1px) calc(var(--taille) * .166)),
    linear-gradient(rgba(220, 255, 247, .06), rgba(220, 255, 247, .06)) center / 1px 100% no-repeat, linear-gradient(90deg, rgba(220, 255, 247, .06), rgba(220, 255, 247, .06)) center / 100% 1px no-repeat;
  -webkit-mask-image: radial-gradient(circle, #000 66%, transparent 70.5%); mask-image: radial-gradient(circle, #000 66%, transparent 70.5%); }
.radar::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(94, 234, 212, .18); box-shadow: 0 0 60px -10px rgba(94, 234, 212, .25), inset 0 0 40px rgba(0, 0, 0, .4); }
.radar-faisceau { position: absolute; inset: 0; border-radius: 50%; z-index: 1;
  background: conic-gradient(from 0deg, transparent 0deg 270deg, rgba(var(--lumiere), .04) 290deg, rgba(var(--lumiere), .13) 320deg, rgba(var(--lumiere), .3) 345deg, rgba(var(--lumiere), .5) 358deg, rgba(var(--lumiere), .85) 359.6deg, transparent 360deg);
  -webkit-mask-image: radial-gradient(circle, #000 55%, transparent 70.5%); mask-image: radial-gradient(circle, #000 55%, transparent 70.5%);
  animation: radar-tour var(--periode) linear infinite; animation-delay: var(--phase, 0s); }
@keyframes radar-tour { to { rotate: 360deg; } }
.radar-centre { position: absolute; left: 50%; top: 50%; z-index: 3; width: 10px; height: 10px; translate: -50% -50%; border-radius: 50%; background: rgb(var(--lumiere)); box-shadow: 0 0 18px 4px rgba(var(--lumiere), .55); }
.radar-point { position: absolute; z-index: 2; width: var(--d, 9px); height: var(--d, 9px); translate: -50% -50%; border-radius: 50%; background: currentColor; color: var(--neutre);
  opacity: .5; box-shadow: 0 0 0 0 currentColor; animation: radar-eclat var(--periode) linear infinite; animation-delay: calc(var(--phase, 0s) + var(--retard, 0s)); }
.radar-point:hover { opacity: 1; scale: 1.5; animation-play-state: paused; }
.radar-point.vert { color: var(--vert); } .radar-point.ambre { color: var(--ambre); } .radar-point.rouge { color: var(--rouge); }
.radar-point.gris { color: var(--gris); } .radar-point.neutre { color: var(--neutre); }
.radar-point.rouge, .radar-point.ambre { --d: 11px; }
.radar-point.actif { color: var(--bleu); animation: radar-actif 1.3s ease-in-out infinite; }
@keyframes radar-eclat {
  0% { opacity: 1; box-shadow: 0 0 14px 3px currentColor; scale: 1.35; }
  22% { opacity: .62; box-shadow: 0 0 6px 0 currentColor; scale: 1; }
  100% { opacity: .5; box-shadow: 0 0 0 0 currentColor; scale: 1; }
}
@keyframes radar-actif { 50% { opacity: .35; box-shadow: 0 0 16px 4px currentColor; } }

/* ---------- Indicateurs ---------- */
.indicateurs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
@media (max-width: 1180px) { .indicateurs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .indicateurs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.indicateur { --c: var(--neutre); --c-rgb: var(--neutre-rgb); display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; text-decoration: none; color: inherit; overflow: hidden;
  transition: border-color .2s ease, transform .25s var(--douceur), background .2s ease; }
.indicateur::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--c-rgb), .7), transparent); opacity: .5; transition: opacity .2s ease; }
.indicateur::after { content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--c-rgb), .16), transparent 70%); pointer-events: none; }
.indicateur:hover { border-color: rgba(var(--c-rgb), .35); transform: translateY(-2px); color: inherit; }
.indicateur:hover::before { opacity: 1; }
.indicateur .tete-indicateur { display: flex; align-items: center; gap: 8px; color: var(--doux); font-size: 12.5px; font-weight: 500; line-height: 1.3; min-height: 33px; }
.indicateur .tete-indicateur i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.indicateur .valeur { font-size: 38px; font-weight: 600; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--texte); }
.indicateur .libelle { color: var(--doux); font-size: 12.5px; }
.indicateur .jauge { height: 3px; margin-top: 6px; border-radius: 3px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.indicateur .jauge span { display: block; height: 100%; border-radius: 3px; background: var(--c); box-shadow: 0 0 10px var(--c); transform-origin: left; }
.indicateur.vert { --c: var(--vert); --c-rgb: var(--vert-rgb); }
.indicateur.ambre { --c: var(--ambre); --c-rgb: var(--ambre-rgb); }
.indicateur.rouge { --c: var(--rouge); --c-rgb: var(--rouge-rgb); }
.indicateur.gris { --c: var(--gris); --c-rgb: var(--gris-rgb); }

/* ---------- Pastilles de statut ---------- */
.pastille { --p-rgb: var(--neutre-rgb); display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 550; white-space: nowrap; line-height: 1.5;
  background: rgba(var(--p-rgb), .1); color: rgb(var(--p-rgb)); border: 1px solid rgba(var(--p-rgb), .22); }
.pastille .point { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; box-shadow: 0 0 8px currentColor; }
.pastille.vert { --p-rgb: var(--vert-rgb); }
.pastille.ambre { --p-rgb: var(--ambre-rgb); }
.pastille.rouge { --p-rgb: var(--rouge-rgb); }
.pastille.gris { --p-rgb: var(--gris-rgb); }
.pastille.bleu { --p-rgb: var(--bleu-rgb); }
.pastille.anime .point { animation: pulsation 1.2s ease-in-out infinite; }
@keyframes pulsation { 50% { opacity: .3; transform: scale(.6); } }
@keyframes pouls { 0% { box-shadow: 0 0 0 0 rgba(var(--vert-rgb), .6); } 70%, 100% { box-shadow: 0 0 0 7px rgba(var(--vert-rgb), 0); } }

/* ---------- Tableaux ---------- */
.tableau-conteneur { overflow-x: auto; }
table.tableau { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tableau th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--discret); font-weight: 600; padding: 11px 16px; border-bottom: 1px solid var(--ligne); background: rgba(0, 0, 0, .14); white-space: nowrap; }
.tableau td { padding: 13px 16px; border-bottom: 1px solid var(--ligne); vertical-align: middle; color: var(--doux); }
.tableau tr:last-child td { border-bottom: 0; }
.tableau tbody tr { transition: background .15s ease; }
.tableau tbody tr:hover { background: rgba(255, 255, 255, .022); }
.tableau tbody tr.cliquable { cursor: pointer; }
.tableau tbody tr.cliquable:hover { background: rgba(94, 234, 212, .035); }
.tableau .site strong { display: block; font-weight: 600; color: var(--texte); }
.tableau .site a, .tableau .petit { color: var(--discret); font-size: 12px; text-decoration: none; overflow-wrap: anywhere; }
.tableau .site a:hover { color: var(--accent); }
.tableau .site a.nom-site { display: block; color: var(--texte); font-size: inherit; }
.tableau .site a:not(.nom-site) { display: block; max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tableau td:not(.site) { white-space: nowrap; }
.tableau .site a.nom-site:hover strong { color: var(--accent); }
.tableau .droite { text-align: right; }
.tableau .actions { justify-content: flex-end; flex-wrap: nowrap; gap: 4px; }
.tableau .empreinte { color: var(--discret); }
@media (max-width: 760px) {
  .tableau thead { display: none; }
  .tableau, .tableau tbody, .tableau tr, .tableau td { display: block; width: 100%; }
  .tableau tr { border-bottom: 1px solid var(--ligne); padding: 10px 0; }
  /* Deux colonnes par ligne : deux fois moins de défilement */
  .tableau tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 0; }
  .tableau tbody td.site, .tableau tbody td.droite, .tableau tbody td[colspan] { grid-column: 1 / -1; }
  .tableau tbody tr { position: relative; }
  .tableau tbody td.case-ligne { position: absolute; top: 14px; right: 16px; width: auto; padding: 0; }
  .tableau tbody td.site { padding-right: 44px; }
  .tableau tbody td.site::before { display: none; }
  .tableau td:not(.site) { white-space: normal; }
  .tableau td .pastille { white-space: normal; max-width: 100%; }
  .tableau td { border: 0; padding: 4px 16px; }
  .tableau td[data-libelle]::before { content: attr(data-libelle); display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--discret); }
  .tableau .actions { justify-content: flex-start; flex-wrap: wrap; }
}

/* ---------- Barre d'outils, listes ---------- */
.outils { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--ligne); }
.outils .recherche { position: relative; flex: 1 1 240px; }
.outils .recherche .icone { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--discret); }
.outils .recherche input { padding-left: 38px; }
.outils select { width: auto; min-width: 180px; }
.outils > .doux { font-size: 12.5px; color: var(--discret); font-variant-numeric: tabular-nums; }
.liste { list-style: none; margin: 0; padding: 6px 0; }
.liste li { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 22px; transition: background .15s ease; }
.liste li + li::before { content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 1px; background: var(--ligne); }
.liste li:hover { background: rgba(255, 255, 255, .02); }
.liste .ligne-gauche { display: flex; align-items: center; gap: 12px; min-width: 0; }
.liste .texte { min-width: 0; }
.liste .texte strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--texte); }
.liste .texte span { color: var(--discret); font-size: 12.5px; }
.liste .actions { flex-wrap: nowrap; }
@media (max-width: 640px) {
  .liste li { flex-wrap: wrap; padding: 12px 16px; }
  .liste li + li::before { left: 16px; right: 16px; }
  .liste .ligne-gauche { flex: 1 1 100%; }
  .liste .actions { flex-wrap: wrap; padding-left: 46px; }
}
.monogramme { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-size: 13.5px; font-weight: 650; text-transform: uppercase; color: var(--texte);
  background: linear-gradient(140deg, hsla(var(--teinte, 170), 45%, 45%, .3), hsla(var(--teinte, 170), 45%, 30%, .15)); border: 1px solid hsla(var(--teinte, 170), 50%, 70%, .16); }
.monogramme.statut { position: relative; }
.monogramme.statut::after { content: ""; position: absolute; right: -3px; bottom: -3px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--surface); background: currentColor; }
.vide { text-align: center; padding: 44px 24px; color: var(--doux); }
.vide h2 { color: var(--texte); margin-bottom: 8px; font-size: 22px; letter-spacing: -.02em; }
.vide .actions { justify-content: center; margin-top: 20px; }
.etapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 28px; text-align: left; }
@media (max-width: 760px) { .etapes { grid-template-columns: 1fr; } }
.etape { padding: 16px; border-radius: 14px; border: 1px solid var(--ligne); background: rgba(255, 255, 255, .02); }
.etape b { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-doux); border: 1px solid rgba(94, 234, 212, .3); color: var(--accent); font-size: 12.5px; margin-bottom: 10px; }
.etape p { color: var(--texte); font-size: 13.5px; }

/* Sens d'un changement de statut (panneau des alertes) */
.sens { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; }
.sens.baisse { color: var(--rouge); background: var(--rouge-doux); border: 1px solid rgba(var(--rouge-rgb), .25); }
.sens.hausse { color: var(--vert); background: var(--vert-doux); border: 1px solid rgba(var(--vert-rgb), .25); }

/* ---------- Fiche site ---------- */
.fiche { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 18px; margin-bottom: 18px; }
@media (max-width: 1100px) { .fiche { grid-template-columns: 1fr; } }
.carte.resultat { --c-rgb: var(--neutre-rgb); overflow: hidden; }
.carte.resultat::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 160px; pointer-events: none; background: radial-gradient(420px 160px at 0% 0%, rgba(var(--c-rgb), .13), transparent 70%); }
.carte.resultat::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, rgba(var(--c-rgb), .8), transparent 70%); }
.carte.resultat.vert { --c-rgb: var(--vert-rgb); } .carte.resultat.ambre { --c-rgb: var(--ambre-rgb); } .carte.resultat.rouge { --c-rgb: var(--rouge-rgb); } .carte.resultat.gris { --c-rgb: var(--gris-rgb); }
.carte.resultat > * { position: relative; }
.resume-titre { font-size: 19px; font-weight: 550; line-height: 1.4; letter-spacing: -.015em; margin: 14px 0 18px; color: var(--texte); max-width: 34em; }
.compteurs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px; }
@media (max-width: 640px) { .compteurs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.compteurs span { display: flex; flex-direction: column; gap: 2px; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--ligne); background: rgba(0, 0, 0, .16); font-size: 12px; color: var(--discret); line-height: 1.35; }
.compteurs b { font-size: 22px; font-weight: 600; letter-spacing: -.03em; color: var(--texte); font-variant-numeric: tabular-nums; }
.compteurs span.critique b { color: var(--rouge); } .compteurs span.attention b { color: var(--ambre); }
.constats { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.constats li { position: relative; display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--doux); padding: 11px 14px 11px 16px; border-radius: 11px; border: 1px solid var(--ligne); background: rgba(255, 255, 255, .02); }
.constats li::before { content: ""; position: absolute; left: -1px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--neutre); }
.constats li strong { color: var(--texte); font-weight: 600; }
.constats li.critique::before { background: var(--rouge); box-shadow: 0 0 10px var(--rouge); }
.constats li.avertissement::before { background: var(--ambre); box-shadow: 0 0 10px var(--ambre); }
.constats li.info::before { background: var(--bleu); }
.details-site { display: grid; grid-template-columns: auto 1fr; gap: 0; font-size: 13.5px; margin: 0; }
.details-site dt, .details-site dd { padding: 10px 0; border-bottom: 1px solid var(--ligne); }
.details-site dt { color: var(--discret); padding-right: 18px; }
.details-site dd { margin: 0; overflow-wrap: anywhere; color: var(--texte); }
.details-site dt:last-of-type, .details-site dd:last-of-type { border-bottom: 0; }
.miniature { width: 100%; border-radius: 12px; border: 1px solid var(--ligne-forte); display: block; margin-top: 16px; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .8); }

/* ---------- Journal ---------- */
.verification { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 14px; margin-bottom: 18px; border: 1px solid; }
.verification.ok { background: var(--vert-doux); color: var(--vert); border-color: rgba(var(--vert-rgb), .3); }
.verification.ko { background: var(--rouge-doux); color: var(--rouge); border-color: rgba(var(--rouge-rgb), .3); }
.verification strong { color: var(--texte); }
.verification p { color: var(--doux); font-size: 13px; margin-top: 3px; overflow-wrap: anywhere; }
.empreinte { font-family: var(--mono); font-size: 11.5px; color: var(--discret); }

/* ---------- Agence ---------- */
.apercu-marque { border-radius: 12px; overflow: hidden; border: 1px solid var(--ligne-forte); margin-top: 6px; box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .8); }
.apercu-marque .bande { height: 6px; }
.apercu-marque .contenu { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; background: #fff; color: #1c1b19; }
.apercu-marque .contenu .doux { color: #6b665f; }
.apercu-marque .contenu strong { font-size: 16px; }
.apercu-marque img { max-height: 32px; max-width: 160px; }
.code-invitation { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, .2); border: 1px dashed rgba(94, 234, 212, .3); }
.code-invitation span { flex: 1; font-family: var(--mono); font-size: 16px; letter-spacing: .08em; color: var(--accent-fort); }

/* ---------- Visionneuse de rapport ---------- */
dialog.visionneuse { width: min(1180px, 96vw); height: 92vh; max-height: none; border: 1px solid var(--ligne-forte); border-radius: 18px; padding: 0; background: var(--surface); color: var(--texte); box-shadow: 0 40px 100px -20px rgba(0, 0, 0, .9); overflow: hidden; }
dialog.visionneuse[open] { display: flex; flex-direction: column; animation: ouverture .3s var(--douceur); }
dialog.visionneuse::backdrop { background: rgba(1, 6, 5, .72); backdrop-filter: blur(4px); }
.visionneuse-tete { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px 10px; padding: 10px 12px 10px 18px; border-bottom: 1px solid var(--ligne); }
.visionneuse-tete .texte { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) {
  dialog.visionneuse { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; border-radius: 0; border: 0; }
  .visionneuse-tete { grid-template-columns: minmax(0, 1fr) auto; padding: 8px 8px 10px 14px; }
  .visionneuse-tete .actions { grid-column: 1 / -1; grid-row: 2; }
}
.visionneuse-corps { position: relative; flex: 1; background: #f6f5f1; }
.visionneuse-cadre { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; }

/* ---------- Fenêtres et notifications ---------- */
dialog.modale { width: min(560px, calc(100vw - 24px)); border: 1px solid var(--ligne-forte); border-radius: 18px; padding: 0; color: var(--texte);
  background: linear-gradient(180deg, var(--surface-2), var(--surface)); box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 40px 100px -20px rgba(0, 0, 0, .9); }
dialog.modale[open] { animation: ouverture .25s var(--douceur); }
dialog.modale.large { width: min(760px, calc(100vw - 24px)); }
dialog.modale::backdrop { background: rgba(1, 6, 5, .66); backdrop-filter: blur(4px); }
@keyframes ouverture { from { opacity: 0; transform: translateY(10px) scale(.985); } }
.modale-corps { padding: 0; }
.modale-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 20px 8px 22px; }
.modale-tete h2 { font-size: 18px; letter-spacing: -.02em; }
.modale-corps > :not(.modale-tete):not(.modale-pied) { margin-left: 22px; margin-right: 22px; }
.modale-texte { margin: 10px 22px 4px; color: var(--doux); }
.modale-pied { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 22px 22px; }
.liste-clients { border: 1px solid var(--ligne); border-radius: 12px; }
.notifications { position: fixed; right: 18px; bottom: 18px; z-index: 95; display: grid; gap: 8px; width: min(380px, calc(100vw - 36px)); }
.toast { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 13px; background: rgba(18, 48, 44, .92); border: 1px solid var(--ligne-forte); color: var(--texte); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .8); font-size: 13.5px; animation: entree .3s var(--douceur); }
.toast .icone { color: var(--accent); margin-top: 1px; }
.toast.erreur { background: rgba(60, 22, 16, .94); border-color: rgba(var(--rouge-rgb), .4); }
.toast.erreur .icone { color: var(--rouge); }
.toast.sortie { opacity: 0; transform: translateY(6px); transition: all .25s ease; }
@keyframes entree { from { opacity: 0; transform: translateY(10px); } }
.chargement { display: grid; place-items: center; min-height: 60vh; color: var(--discret); }
.chargement::before { content: ""; width: 26px; height: 26px; margin-bottom: 12px; border-radius: 50%; border: 2px solid var(--ligne-forte); border-top-color: var(--accent); animation: radar-tour .8s linear infinite; }
.squelette { height: 14px; border-radius: 6px; background: linear-gradient(90deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .09), rgba(255, 255, 255, .04)); background-size: 200% 100%; animation: squelette 1.4s linear infinite; }
@keyframes squelette { to { background-position: -200% 0; } }
.bandeau { display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px; border-radius: 13px; background: var(--ambre-doux); border: 1px solid rgba(var(--ambre-rgb), .28); color: var(--texte); margin-bottom: 18px; font-size: 13.5px; }
.bandeau .icone { color: var(--ambre); margin-top: 2px; }

/* Connexion avec Google (bouton conforme aux règles de marque de Google : fond blanc, logo « G » en couleurs) */
.connexion-externe { margin-bottom: 18px; }
.bouton-google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 42px; padding: 10px 16px; border: 1px solid #DADCE0; border-radius: 10px; background: #fff; color: #3C4043; font-weight: 600; text-decoration: none; }
.bouton-google:hover { background: #F1F3F4; border-color: #DADCE0; color: #3C4043; }
.separateur { display: flex; align-items: center; gap: 12px; margin: 20px 0 4px; color: var(--discret); font-size: 12.5px; }
.separateur::before, .separateur::after { content: ""; flex: 1; height: 1px; background: var(--ligne-forte); }

/* ---------- Pastille de statut (point coloré) ---------- */
.point-statut { flex: none; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--neutre); }
.point-statut.vert { background: var(--vert); box-shadow: 0 0 8px rgba(var(--vert-rgb), .6); } .point-statut.ambre { background: var(--ambre); box-shadow: 0 0 8px rgba(var(--ambre-rgb), .6); }
.point-statut.rouge { background: var(--rouge); box-shadow: 0 0 8px rgba(var(--rouge-rgb), .6); } .point-statut.gris { background: var(--gris); }
.point-statut.bleu { background: var(--bleu); animation: pouls-bleu 1.4s ease-out infinite; }

/* ---------- Clients : une fiche par client ---------- */
.grille-clients { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); gap: 18px; }
.fiche-client { display: flex; flex-direction: column; gap: 14px; padding: 20px; transition: border-color .2s ease, transform .25s var(--douceur); }
.fiche-client:hover { border-color: var(--ligne-forte); transform: translateY(-2px); }
.fiche-client.attention { border-color: rgba(var(--ambre-rgb), .22); background: radial-gradient(300px 120px at 100% 0%, rgba(var(--ambre-rgb), .07), transparent 70%), linear-gradient(180deg, rgba(14, 36, 33, .72), rgba(10, 28, 26, .72)); }
.fiche-client-tete { display: flex; align-items: center; gap: 12px; }
.fiche-client-tete .monogramme { width: 42px; height: 42px; border-radius: 12px; font-size: 16px; }
.fiche-client-nom { flex: 1; min-width: 0; }
.fiche-client-nom h2 { font-size: 16.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fiche-client-nom p { font-size: 12.5px; color: var(--discret); }
.fiche-client .repartition.mini { height: 6px; }
.fiche-client .client-etat { margin-top: -4px; }
.fiche-client-sites { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.fiche-client-sites a { display: flex; align-items: center; gap: 10px; padding: 7px 8px; margin: 0 -8px; border-radius: 8px; color: var(--texte); text-decoration: none; font-size: 13.5px; }
.fiche-client-sites a:hover { background: rgba(255, 255, 255, .04); color: var(--texte); }
.fiche-client-sites span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fiche-client-sites small { font-size: 11.5px; color: var(--discret); white-space: nowrap; }
.fiche-client-sites .plus { padding: 4px 0 0; font-size: 12.5px; color: var(--discret); }
.fiche-client-vide { font-size: 13.5px; }
.fiche-client-pied { display: flex; gap: 6px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--ligne); }

/* ---------- Fiche d'un site ---------- */
.entete-site-titre { display: flex; align-items: center; gap: 16px; min-width: 0; }
.entete-site-titre .monogramme { width: 54px; height: 54px; border-radius: 15px; font-size: 22px; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .8); }
.entete-site-titre .doux { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.entete-site-titre .doux a { color: var(--doux); text-decoration: none; }
.entete-site-titre .doux a:hover { color: var(--accent); }
.entete-site-titre .doux .icone { color: var(--discret); }
.lien-client { font-weight: 600; }
.analyse-direct { position: relative; display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding: 14px 18px; overflow: hidden; border-radius: 14px;
  border: 1px solid rgba(var(--bleu-rgb), .3); background: linear-gradient(90deg, rgba(var(--bleu-rgb), .1), rgba(var(--bleu-rgb), .03)); }
.analyse-direct strong { display: block; color: #D9E7FF; }
.analyse-direct span:not(.analyse-direct-icone) { font-size: 13.5px; color: var(--doux); }
.analyse-direct-icone { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; color: var(--bleu); background: rgba(var(--bleu-rgb), .12); box-shadow: 0 0 0 0 rgba(var(--bleu-rgb), .5); animation: pouls-bleu 1.6s ease-out infinite; }
/* Barre de progression continue : le robot travaille, sans fausse promesse de pourcentage */
.barre-direct { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; overflow: hidden; background: rgba(var(--bleu-rgb), .12); }
.barre-direct::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; background: linear-gradient(90deg, transparent, var(--bleu), transparent); animation: balayage-barre 1.6s ease-in-out infinite; }
.barre-direct.attente::after { animation-duration: 2.6s; opacity: .5; }
@keyframes balayage-barre { from { left: -40%; } to { left: 100%; } }
.statut-site { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px 20px; align-items: start; margin-bottom: 18px; padding: 24px 26px; }
.statut-site-icone { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; color: rgb(var(--c-rgb)); background: rgba(var(--c-rgb), .12); border: 1px solid rgba(var(--c-rgb), .3); box-shadow: 0 0 30px -8px rgba(var(--c-rgb), .5); }
.statut-site-texte h2 { margin-top: 6px; font-size: 26px; letter-spacing: -.03em; color: rgb(var(--c-rgb)); }
.statut-site.neutre h2, .statut-site:not(.vert):not(.ambre):not(.rouge):not(.gris) h2 { color: var(--texte); }
.statut-site .resume-titre { margin: 8px 0 0; }
.statut-site-meta { margin-top: 10px; font-size: 13px; color: var(--discret); }
.statut-site .compteurs { grid-column: 1 / -1; margin: 4px 0 0; }
@media (max-width: 640px) { .statut-site { grid-template-columns: 1fr; padding: 20px; } .entete-site-titre .monogramme { width: 44px; height: 44px; font-size: 18px; } }
.fiche > .carte:first-child .carte-corps { padding-top: 16px; }
.evolution { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ligne); }
.evolution-titre { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 13px; font-weight: 600; }
.evolution-titre small { font-weight: 500; color: var(--discret); }
.frise.large { gap: 4px; }
.frise.large span { flex: 1; height: 26px; border-radius: 4px; }
.evolution-axe { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11.5px; color: var(--discret); }

/* ---------- Diagnostic : ce que le robot a vu ---------- */
.diagnostic { margin-bottom: 18px; overflow: hidden; }
.carte-sous-titre { margin-top: 3px; font-size: 13px; color: var(--discret); }
.diagnostic-corps { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 22px; padding: 22px; align-items: start; }
.diagnostic-corps.sans-capture { grid-template-columns: 1fr; }
@media (max-width: 1100px) { .diagnostic-corps { grid-template-columns: 1fr; } }
.capture-annotee { position: relative; margin: 0; overflow: hidden; border-radius: 12px; border: 1px solid var(--ligne-forte); background: #0b1715; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); }
.capture-annotee img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s ease; }
.capture-annotee.chargement img { opacity: 0; }
.capture-annotee.chargement::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .08), rgba(255, 255, 255, .03)); background-size: 200% 100%; animation: squelette 1.4s linear infinite; }
.capture-annotee.indisponible::before { content: "Capture indisponible"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--discret); font-size: 13px; }
/* Repère : cadre lumineux sur l'élément concerné, numéro du constat */
.repere { --r-rgb: var(--rouge-rgb); position: absolute; border-radius: 10px; border: 2px solid rgb(var(--r-rgb)); background: rgba(var(--r-rgb), .08);
  box-shadow: 0 0 0 4px rgba(var(--r-rgb), .18), 0 0 30px rgba(var(--r-rgb), .35); transition: box-shadow .2s ease, background .2s ease, opacity .2s ease; }
.repere.image { --r-rgb: var(--ambre-rgb); }
.repere b { position: absolute; left: -12px; top: -12px; display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px;
  background: rgb(var(--r-rgb)); color: #1a0a05; font-size: 13px; font-weight: 750; box-shadow: 0 4px 14px rgba(0, 0, 0, .5), 0 0 0 3px rgba(4, 16, 15, .85); }
.repere.numero-droite b { left: auto; right: -12px; }
.repere.actif { background: rgba(var(--r-rgb), .18); box-shadow: 0 0 0 6px rgba(var(--r-rgb), .3), 0 0 50px rgba(var(--r-rgb), .6); z-index: 2; }
.capture-annotee:has(.repere.actif) .repere:not(.actif) { opacity: .35; }
#app[data-entree] .repere { animation: repere-arrivee .6s var(--douceur) both; animation-delay: calc(.9s + var(--i, 0) * .25s); }
@keyframes repere-arrivee { from { opacity: 0; transform: scale(1.08); } }
/* Constats en clair, numérotés comme les repères */
.constats-clairs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: none; }
.constats-clairs li { --c-rgb: var(--neutre-rgb); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 14px 16px; border-radius: 13px;
  border: 1px solid var(--ligne); background: rgba(255, 255, 255, .02); transition: border-color .2s ease, background .2s ease, transform .2s var(--douceur); }
.constats-clairs li.critique { --c-rgb: var(--rouge-rgb); } .constats-clairs li.avertissement { --c-rgb: var(--ambre-rgb); } .constats-clairs li.info { --c-rgb: var(--vert-rgb); }
.constats-clairs li[tabindex]:hover, .constats-clairs li[tabindex]:focus-visible { border-color: rgba(var(--c-rgb), .45); background: rgba(var(--c-rgb), .05); transform: translateX(-2px); }
.constats-clairs .numero { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(var(--c-rgb), .14); border: 1px solid rgba(var(--c-rgb), .4); color: rgb(var(--c-rgb)); font-size: 13px; font-weight: 700; }
.constat-gravite { font-size: 11px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--c-rgb)); }
.constat-texte strong { display: block; margin-top: 3px; font-size: 14.5px; line-height: 1.4; color: var(--texte); }
.constat-simple { margin-top: 6px; font-size: 13.5px; line-height: 1.55; color: var(--doux); }
.constat-temps { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .05); color: var(--doux); font-size: 12px; font-weight: 550; }
.constat-temps .icone { color: var(--accent); }

/* ---------- Analyses : chiffres clés et suivi en direct ---------- */
.indicateurs.indicateurs-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .indicateurs.indicateurs-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.indicateurs-4 .valeur { font-size: 30px; }
.en-direct { margin-bottom: 18px; border-color: rgba(var(--bleu-rgb), .25); }
.en-direct .carte-tete h2 { display: inline-flex; align-items: center; gap: 10px; }
.point-direct { width: 8px; height: 8px; border-radius: 50%; background: var(--bleu); animation: pouls-bleu 1.4s ease-out infinite; }
.en-direct .texte { position: relative; padding-bottom: 6px; flex: 1; }
.en-direct .barre-direct { bottom: -4px; border-radius: 2px; }
.en-direct .ligne-gauche { flex: 1; }

/* ---------- Journal : le principe de la chaîne ---------- */
.chaine { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; counter-reset: etape; }
.chaine li { position: relative; display: grid; gap: 4px; padding: 16px 18px; }
.chaine li + li::before { content: "→"; position: absolute; left: -15px; top: 50%; translate: -50% -50%; color: var(--accent); font-weight: 700; }
.chaine b { display: grid; place-items: center; width: 26px; height: 26px; margin-bottom: 6px; border-radius: 50%; background: var(--accent-doux); border: 1px solid rgba(94, 234, 212, .3); color: var(--accent); font-size: 12.5px; }
.chaine strong { font-size: 14px; }
.chaine span { font-size: 13px; color: var(--doux); }
@media (max-width: 900px) { .chaine { grid-template-columns: 1fr; } .chaine li + li::before { content: "↓"; left: 50%; top: -9px; } }

/* ---------- Agence : consommation de l'offre ---------- */
.offre-jauge.grande { display: block; height: 8px; margin: 4px 0 12px; }

/* ---------- Filtres en onglets ---------- */
.segments { display: flex; gap: 4px; width: fit-content; max-width: 100%; margin: 0 0 14px; padding: 4px; overflow-x: auto; scrollbar-width: none; border-radius: 13px; border: 1px solid var(--ligne); background: rgba(0, 0, 0, .2); }
.segments::-webkit-scrollbar { display: none; }
.segment { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: var(--doux); font: inherit; font-size: 13px; font-weight: 550; white-space: nowrap; cursor: pointer; transition: background .15s ease, color .15s ease; }
.segment:hover { color: var(--texte); background: rgba(255, 255, 255, .04); }
.segment[aria-pressed="true"] { color: var(--texte); background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .045)); box-shadow: inset 0 0 0 1px var(--ligne-forte), 0 6px 16px -8px rgba(0, 0, 0, .8); }
.segment i { width: 7px; height: 7px; border-radius: 50%; background: var(--neutre); }
.segment.rouge i { background: var(--rouge); } .segment.ambre i { background: var(--ambre); } .segment.vert i { background: var(--vert); } .segment.gris i { background: var(--gris); } .segment.bleu i { background: var(--bleu); }
.segment-compte { min-width: 22px; padding: 0 6px; border-radius: 999px; font-size: 11.5px; line-height: 19px; text-align: center; font-variant-numeric: tabular-nums; background: rgba(255, 255, 255, .06); color: var(--doux); }
.segment[aria-pressed="true"] .segment-compte { background: var(--accent-doux); color: var(--accent); }

/* ---------- Sélection multiple (Sites clients) ---------- */
.tableau .case-ligne { width: 44px; padding-right: 0; }
.case-ligne input { width: 16px; height: 16px; margin: 0; vertical-align: middle; accent-color: var(--accent); cursor: pointer; }
.tableau tbody tr.choisie, .tableau tbody tr.choisie:hover { background: rgba(94, 234, 212, .06); }
.barre-selection { position: fixed; z-index: 35; bottom: 24px; left: calc(50% + 126px); translate: -50% 0; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 14px;
  border: 1px solid var(--ligne-forte); background: rgba(18, 48, 44, .95); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .9), 0 0 30px -10px rgba(94, 234, 212, .35); animation: monter .3s var(--douceur); }
.selection-compte { font-size: 13.5px; color: var(--doux); white-space: nowrap; margin-right: 4px; }
.selection-compte b { color: var(--texte); }
@media (max-width: 900px) { .barre-selection { left: 50%; width: calc(100% - 24px); flex-wrap: wrap; justify-content: center; } }

/* ---------- Palette de recherche (Ctrl K) ---------- */
dialog.palette { width: min(620px, calc(100vw - 24px)); max-height: none; margin: 12vh auto auto; padding: 0; border: 1px solid var(--ligne-forte); border-radius: 18px; color: var(--texte); overflow: hidden;
  background: linear-gradient(180deg, rgba(18, 48, 44, .97), rgba(10, 28, 26, .98)); box-shadow: 0 40px 120px -20px rgba(0, 0, 0, .95), 0 0 60px -20px rgba(94, 234, 212, .3); }
dialog.palette[open] { animation: ouverture .22s var(--douceur); }
dialog.palette::backdrop { background: rgba(1, 6, 5, .6); backdrop-filter: blur(3px); }
.palette-tete { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--ligne); color: var(--discret); }
input.palette-champ { flex: 1; min-height: 0; padding: 4px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: 16px; }
input.palette-champ:focus { background: transparent; box-shadow: none; }
.palette-champ::-webkit-search-cancel-button { display: none; }
.palette-liste { list-style: none; margin: 0; padding: 8px; max-height: min(420px, 55vh); overflow-y: auto; }
.palette-groupe { padding: 10px 10px 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--discret); }
.palette-option { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.palette-option[aria-selected="true"] { background: rgba(94, 234, 212, .09); box-shadow: inset 0 0 0 1px rgba(94, 234, 212, .2); }
.palette-option > .icone { margin-left: auto; color: var(--discret); }
.palette-option[aria-selected="true"] > .icone { color: var(--accent); }
.palette-icone { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--ligne); background: rgba(255, 255, 255, .04); color: var(--doux); }
.palette-texte { flex: 1; min-width: 0; }
.palette-texte strong { display: block; font-weight: 550; }
.palette-texte span { display: block; font-size: 12px; color: var(--discret); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette-option .pastille { flex: none; }
.palette-vide { padding: 28px; text-align: center; color: var(--discret); }
.palette-pied { display: flex; gap: 18px; padding: 10px 16px; border-top: 1px solid var(--ligne); font-size: 12px; color: var(--discret); }
.palette-pied span { display: inline-flex; align-items: center; gap: 5px; }
@media (max-width: 640px) { .palette-option .pastille { display: none; } .palette-pied { display: none; } }

/* ---------- Panneau des alertes (sous la cloche) ---------- */
.panneau { position: fixed; inset: auto; margin: 0; width: min(390px, calc(100vw - 20px)); padding: 0; border: 1px solid var(--ligne-forte); border-radius: 16px; color: var(--texte); overflow: hidden;
  background: linear-gradient(180deg, rgba(18, 48, 44, .98), rgba(10, 28, 26, .98)); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .95); }
.panneau:popover-open { animation: ouverture .2s var(--douceur); }
.panneau-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 50px; padding: 8px 10px 8px 16px; border-bottom: 1px solid var(--ligne); }
.panneau-liste { list-style: none; margin: 0; padding: 6px; max-height: 60vh; overflow-y: auto; }
.panneau-liste a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 10px; border-radius: 10px; color: var(--texte); text-decoration: none; }
.panneau-liste a:hover { background: rgba(255, 255, 255, .045); color: var(--texte); }
.panneau-liste .texte strong { display: block; font-size: 13.5px; font-weight: 600; }
.panneau-liste .texte span { display: block; font-size: 12px; color: var(--discret); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panneau-liste time { align-self: start; padding-top: 2px; font-size: 11.5px; color: var(--discret); white-space: nowrap; }
.panneau-liste .texte { min-width: 0; }
.panneau-liste li.non-lue a { background: linear-gradient(90deg, rgba(var(--ambre-rgb), .08), transparent 60%); box-shadow: inset 2px 0 0 var(--ambre); }
.panneau-vide { padding: 26px 18px; text-align: center; color: var(--discret); font-size: 13.5px; }

/* ---------- Frise des résultats (fiche site) ---------- */
.frise { display: flex; align-items: center; gap: 3px; }
.frise span { width: 8px; height: 20px; border-radius: 3px; background: var(--neutre); color: var(--neutre); opacity: .8; transition: opacity .15s ease, transform .15s ease; }
.frise span:hover { opacity: 1; transform: scaleY(1.2); }
.frise .vert { background: var(--vert); color: var(--vert); } .frise .ambre { background: var(--ambre); color: var(--ambre); } .frise .rouge { background: var(--rouge); color: var(--rouge); } .frise .gris { background: var(--gris); color: var(--gris); }
.frise span:last-child { opacity: 1; box-shadow: 0 0 10px currentColor; }

/* ---------- Entrée en scène (au changement de page seulement, jamais lors des rafraîchissements) ---------- */
#app[data-entree] .principal > .bento { animation: none; }
#app[data-entree] .bento > * { animation: monter .75s var(--douceur) both; }
#app[data-entree] .bento > :nth-child(2) { animation-delay: .08s; } #app[data-entree] .bento > :nth-child(3) { animation-delay: .14s; }
#app[data-entree] .bento > :nth-child(4) { animation-delay: .2s; } #app[data-entree] .bento > :nth-child(5) { animation-delay: .26s; } #app[data-entree] .bento > :nth-child(6) { animation-delay: .32s; }
#app[data-entree] .arc-indice { animation: arc-indice 1.6s var(--douceur) .25s both; }
@keyframes arc-indice { from { stroke-dasharray: 0 100; } }
#app[data-entree] .courbe { animation: devoiler 1.5s var(--douceur) .35s both; }
@keyframes devoiler { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
#app[data-entree] .courbe-point { animation: apparaitre .4s ease 1.6s both, point-indice 2.4s ease-in-out 2s infinite; }
@keyframes monter { from { opacity: 0; transform: translateY(14px); } }
@keyframes apparaitre { from { opacity: 0; } }
@keyframes etirer { from { transform: scaleX(0); } }
#app[data-entree] .principal > * { animation: monter .7s var(--douceur) both; }
#app[data-entree] .principal > :nth-child(2) { animation-delay: .06s; }
#app[data-entree] .principal > :nth-child(3) { animation-delay: .12s; }
#app[data-entree] .principal > :nth-child(4) { animation-delay: .18s; }
#app[data-entree] .principal > :nth-child(5) { animation-delay: .24s; }
#app[data-entree] .principal > :nth-child(n+6) { animation-delay: .3s; }
#app[data-entree] .indicateurs > * { animation: monter .7s var(--douceur) both; }
#app[data-entree] .indicateurs > :nth-child(2) { animation-delay: .2s; } #app[data-entree] .indicateurs > :nth-child(3) { animation-delay: .25s; }
#app[data-entree] .indicateurs > :nth-child(4) { animation-delay: .3s; } #app[data-entree] .indicateurs > :nth-child(5) { animation-delay: .35s; }
#app[data-entree] .repartition span, #app[data-entree] .indicateur .jauge span { animation: etirer 1.1s var(--douceur) .35s both; }
#app[data-entree] .porte-carte, #app[data-entree] .porte-scene .accroche, #app[data-entree] .porte-scene .legende { animation: monter .8s var(--douceur) both; }
#app[data-entree] .porte-scene .legende { animation-delay: .1s; }

/* ---------- Mouvement réduit : on garde les fondus, on retire les déplacements et le balayage ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
  #app[data-entree] .principal > *, #app[data-entree] .indicateurs > *, #app[data-entree] .porte-carte,
  #app[data-entree] .porte-scene .accroche, #app[data-entree] .porte-scene .legende { animation-name: apparaitre; animation-duration: .5s; }
  #app[data-entree] .repartition span, #app[data-entree] .indicateur .jauge span { animation: none; }
  .radar-faisceau { animation: none; rotate: 40deg; }
  .radar-point, #app[data-entree] .radar-point { animation: none; opacity: .9; box-shadow: 0 0 8px 0 currentColor; }
  .radar-point.actif { animation: none; }
  .scene-faisceau span { animation: none; rotate: 24deg; }
  .pastille.anime .point, .puce-direct i, .noeud.direct::after, .courbe-point, #app[data-entree] .courbe-point,
  .analyse-direct-icone, .point-direct, .point-statut.bleu { animation: none; }
  .barre-direct::after { animation: none; left: 0; width: 100%; opacity: .35; }
  .fiche-client:hover { transform: none; }
  .indice-carte::before { animation: none; --tour: 200deg; }
  #app[data-entree] .bento > * { animation-name: apparaitre; animation-duration: .5s; }
  #app[data-entree] .arc-indice, #app[data-entree] .courbe { animation: apparaitre .6s ease both; }
  .barre-selection, dialog.palette[open], .panneau:popover-open { animation: apparaitre .2s ease; }
  .indicateur:hover { transform: none; }
  dialog.modale[open], dialog.visionneuse[open], .toast { animation: apparaitre .2s ease; }
}

/* Suite d'un tableau long (analyses) */
.tableau-suite { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--ligne); }
.tableau-suite .doux { font-size: 12.5px; color: var(--discret); }