/* =====================================================================
   Portail client VoIP — feuille de style
   Aucune ressource externe : tout est local, rien n'est chargé
   depuis un domaine tiers.
   ===================================================================== */

:root{
  /* Largeur de la colonne de contenu : au-delà, les tableaux s'étirent
     jusqu'à devenir illisibles sur un écran large. */
  --page:1320px;
  /* Palette reprise de la charte Connecting Business Canada :
     le bleu profond du site pour les aplats et le texte accentué,
     le bleu du logo pour les touches lumineuses. */
  --accent:#1E3A8A;
  --accent-2:#2477BD;
  --ground:#F6F8FC;
  --surface:#FFFFFF;
  --surface-2:#EDF1F7;
  --line:#E2E8F0;
  --line-soft:#EEF2F8;
  --ink:#0E1A2B;
  --ink-2:#3D4E63;
  --ink-3:#73859B;
  --accent-soft:#EAF0FB;
  --accent-ink:#1A3273;
  /* Ombres portées : deux couches, une très courte pour poser l'objet,
     une longue et très diluée pour la profondeur. Une seule ombre dure
     donne toujours un rendu bon marché. */
  --shadow:0 1px 2px rgba(14,26,43,.04), 0 10px 28px -14px rgba(14,26,43,.16);
  --shadow-lg:0 1px 3px rgba(14,26,43,.05), 0 24px 56px -24px rgba(14,26,43,.22);
  --gold:#9A6B12;
  --gold-soft:#F7EEDB;
  --ok:#1F7A5C;
  --ok-soft:#DCEFE7;
  --warn:#A4630F;
  --warn-soft:#F8EBD8;
  --bad:#A63528;
  --bad-soft:#F8E2DE;
  --radius:14px;
  --rail:262px;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:14px; line-height:1.55;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"kern" 1,"liga" 1;
}
h1,h2,h3,h4{margin:0; font-weight:600; text-wrap:balance; letter-spacing:-.015em}
a{color:var(--accent)}
.mono{font-family:var(--mono)}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--ink-3)}
.right{text-align:right}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:#fff;padding:8px 12px;border-radius:6px;z-index:99}

/* ---------- connexion ----------
   Deux panneaux : la marque à gauche, le formulaire à droite. La page de
   connexion est le premier écran que voit un client ; elle porte l'identité
   de la maison, pas une simple boîte blanche. */
body.login{background:var(--surface)}
.auth{display:grid; grid-template-columns:1.05fr .95fr; min-height:100vh}

.auth-brand{
  position:relative; overflow:hidden; display:flex; flex-direction:column;
  justify-content:space-between; padding:56px 60px; color:#fff;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(36,119,189,.55) 0%, rgba(36,119,189,0) 60%),
    radial-gradient(90% 80% at 0% 100%, rgba(12,26,66,.75) 0%, rgba(12,26,66,0) 65%),
    linear-gradient(155deg,#16306E 0%,#1E3A8A 45%,#12285E 100%);
}
/* Arcs de signal repris du logo, et trame très diluée : le fond doit avoir
   de la matière sans jamais concurrencer le texte. */
.auth-arcs{position:absolute; inset:0; pointer-events:none; opacity:.45}
.auth-arcs svg{
  position:absolute; right:-250px; top:50%; transform:translateY(-50%);
  width:800px; height:800px;
}
.auth-grain{
  position:absolute; inset:0; pointer-events:none; opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(70% 60% at 30% 40%,#000 0%,transparent 100%);
          mask-image:radial-gradient(70% 60% at 30% 40%,#000 0%,transparent 100%);
}
/* z-index seul : ajouter position:relative remettrait le décor dans le flux
   et décalerait tout le contenu du panneau. */
.auth-brand > *{z-index:1}

.auth-logo{
  width:232px; height:auto; display:block; opacity:.97;
  filter:brightness(0) invert(1);   /* logo en blanc sur le bleu profond */
}
.auth-wordmark{font-size:22px; font-weight:700; letter-spacing:-.01em}

.auth-claim{
  max-width:26ch; font-size:31px; line-height:1.22; font-weight:600;
  letter-spacing:-.02em; margin:0 0 18px;
}
.auth-claim em{font-style:normal; color:#8FC2EE}
.auth-lead{max-width:44ch; font-size:14.5px; line-height:1.65;
  color:rgba(255,255,255,.72); margin:0}

.auth-points{display:flex; margin-top:34px; padding-top:22px;
  border-top:1px solid rgba(255,255,255,.16)}
.auth-points div{flex:1; padding-right:18px}
.auth-points div + div{padding-left:22px; border-left:1px solid rgba(255,255,255,.14)}
.auth-points b{display:block; font-size:13px; font-weight:600}
.auth-points span{display:block; font-size:12px; line-height:1.45; margin-top:3px;
  color:rgba(255,255,255,.6)}

.auth-legal{font-size:11.5px; color:rgba(255,255,255,.5)}
.auth-legal a{color:rgba(255,255,255,.72); text-decoration:none}

.auth-form{display:flex; align-items:center; justify-content:center;
  padding:48px 40px; background:var(--surface)}
.auth-box{width:100%; max-width:392px}
.auth-eyebrow{
  display:inline-flex; align-items:center; gap:7px; margin-bottom:14px;
  font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-2);
}
.auth-eyebrow::before{content:""; width:22px; height:1px; background:var(--accent-2); opacity:.6}
.auth-box h1{font-size:25px; letter-spacing:-.025em; margin-bottom:7px}
.auth-box .lead{color:var(--ink-3); font-size:13.5px; margin:0 0 26px}
.auth-box .alert{margin-bottom:18px}
.auth-fields{display:flex; flex-direction:column; gap:15px}
/* Champs plus grands et libellés en bas de casse : sur cet écran il n'y a
   que deux saisies, elles doivent être confortables. */
.auth-fields .field{gap:6px}
.auth-fields .field > label{font-size:12px; font-weight:600; letter-spacing:.01em;
  text-transform:none; color:var(--ink-2)}
.auth-fields input{font-size:14.5px; padding:11px 13px; border-radius:10px; background:#FCFDFE}
.auth-fields input:hover{border-color:#CBD6E4}
.auth-fields input:focus{background:var(--surface)}
.auth-submit{
  width:100%; margin-top:22px; font:inherit; font-size:14.5px; font-weight:600;
  color:#fff; border:0; border-radius:10px; padding:12px 16px; cursor:pointer;
  background:linear-gradient(180deg,#2A4CA8 0%,#1E3A8A 100%);
  box-shadow:0 1px 2px rgba(14,26,43,.14), 0 10px 22px -12px rgba(30,58,138,.75);
  transition:transform .12s, box-shadow .12s, filter .12s;
}
.auth-submit:hover{filter:brightness(1.07);
  box-shadow:0 1px 2px rgba(14,26,43,.16), 0 14px 26px -12px rgba(30,58,138,.85)}
.auth-submit:active{transform:translateY(1px)}
.auth-foot{margin-top:24px; padding-top:18px; border-top:1px solid var(--line);
  font-size:12.5px; line-height:1.6; color:var(--ink-3)}
.auth-secure{display:flex; align-items:center; gap:7px; margin-top:12px;
  font-size:11.5px; color:var(--ink-3)}
.auth-secure svg{flex:none; opacity:.7}

/* Sur écran étroit, le panneau de marque devient un bandeau d'en-tête. */
@media (max-width:900px){
  .auth{grid-template-columns:1fr; min-height:0}
  .auth-brand{padding:34px 28px 30px}
  .auth-arcs svg{right:-260px; width:520px; height:520px}
  .auth-logo{width:180px}
  .auth-claim{font-size:23px; margin-top:26px}
  .auth-points,.auth-legal{display:none}
  .auth-form{padding:34px 24px 46px}
}

/* ---------- structure ---------- */
.shell{display:flex; min-height:100vh; align-items:stretch}
.rail{
  width:var(--rail); flex:0 0 var(--rail);
  background:var(--surface); border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:22px; padding:20px 14px;
}
.brand{display:flex; align-items:center; gap:11px; padding:0 6px}
.brand-mark{
  width:34px;height:34px;flex:0 0 34px;border-radius:8px;
  background:var(--accent); color:#fff; display:grid; place-items:center;
  font-weight:700; font-size:13px; letter-spacing:-.02em;
}
.brand-name{font-weight:700; font-size:15px; line-height:1.15}
.brand-sub{font-size:11px; color:var(--ink-3); letter-spacing:.06em; text-transform:uppercase}
body.is-admin .brand-mark{background:var(--ink)}

/* Logo de la marque. Il remplace le monogramme et le nom écrit : afficher les
   deux ferait doublon. La hauteur est contrainte, la largeur suit — un logo
   large ne doit pas pousser la barre latérale. */
.brand.brand-has-logo{flex-direction:column; align-items:flex-start; gap:7px}
.brand-logo{
  display:block; width:100%; max-width:168px; height:auto;
  object-fit:contain;
}
.brand-logo-lg{max-width:236px; margin:0 auto 6px}
@media print{ .brand-logo{max-width:200px} }

.nav{display:flex; flex-direction:column; gap:2px}
.nav-label{font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); padding:12px 12px 6px; font-weight:700}
.nav-label:first-child{padding-top:0}
.nav a{
  position:relative; display:flex; align-items:center; gap:11px; padding:9px 12px;
  border-radius:9px; color:var(--ink-2); font-size:13.5px; font-weight:500; text-decoration:none;
  transition:background .12s ease, color .12s ease;
}
.nav a:hover{background:var(--surface-2); color:var(--ink)}
.nav a[aria-current="page"]{background:var(--accent-soft); color:var(--accent-ink); font-weight:600}
/* Le liseré à gauche de l'entrée active : c'est lui qui ancre le regard
   quand on balaie la colonne, plus sûrement qu'un simple fond teinté. */
.nav a[aria-current="page"]::before{
  content:""; position:absolute; left:0; top:9px; bottom:9px;
  width:3px; border-radius:0 3px 3px 0; background:var(--accent);
}
.ico{width:17px;height:17px;flex:0 0 17px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.rail-foot{margin-top:auto; display:flex; flex-direction:column; gap:10px; padding:0 4px}
.balance{border:1px solid var(--line); border-radius:var(--radius); padding:11px 12px; background:var(--ground)}
.balance .k{font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); font-weight:700}
.balance .v{font-size:20px; font-weight:600; margin-top:2px; font-variant-numeric:tabular-nums}
.balance .m{font-size:11.5px; color:var(--ink-3); margin-top:2px}
.logout{font-size:13px; color:var(--ink-3); text-decoration:none; padding:6px 8px; border-radius:6px}
.logout:hover{background:var(--surface-2); color:var(--ink)}

.main{flex:1 1 auto; min-width:0; display:flex; flex-direction:column}
/* Le bandeau garde sa bordure sur toute la largeur, mais son contenu suit la
   même colonne centrée que les cartes : sans cela, titre et cartes seraient
   désalignés sur un grand écran. */
.topbar{
  padding:18px 26px; border-bottom:1px solid var(--line); background:var(--surface);
}
.topbar-in{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  max-width:var(--page); margin:0 auto; width:100%;
}
.topbar h1{font-size:20px; letter-spacing:-.02em}
.tb-actions{display:flex; gap:8px; flex-wrap:wrap}
.who{margin-left:auto; display:flex; align-items:center; gap:10px}
.who-txt{text-align:right; line-height:1.25}
.who-txt .n{font-weight:600}
.who-txt .s{font-size:11.5px; color:var(--ink-3)}
.avatar{
  width:30px;height:30px;border-radius:50%;background:var(--surface-2);
  border:1px solid var(--line); display:grid; place-items:center;
  font-size:11.5px; font-weight:700; color:var(--ink-2);
}
.content{
  padding:22px 26px 40px; display:flex; flex-direction:column; gap:20px;
  max-width:var(--page); margin:0 auto; width:100%;
}
.legal{
  padding:0 26px 30px; font-size:11.5px; color:var(--ink-3);
  max-width:var(--page); margin:0 auto; width:100%; text-align:center;
}
.legal-txt{max-width:80ch; margin:0 auto}
.legal-copy{
  margin-top:14px; padding-top:14px; border-top:1px solid var(--line-soft);
  color:var(--ink-3); letter-spacing:.04em; font-size:11px;
}

/* ---------- blocs ---------- */
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
}
.card-head{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; padding:17px 20px 0}
.card-head h2{font-size:15px; font-weight:600}
.card-head .hint{font-size:12px; color:var(--ink-3); margin-left:auto}
.card-body{padding:16px 20px}
.card-body > :first-child{margin-top:0}

.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(172px,1fr)); gap:12px}
.tile{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:17px 19px; display:flex; flex-direction:column; gap:4px; box-shadow:var(--shadow);
}
.tile .k{font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3); font-weight:700}
.tile .v{font-size:28px; font-weight:600; line-height:1.12; font-variant-numeric:tabular-nums; letter-spacing:-.025em}
.tile .v small{font-size:13px; font-weight:500; color:var(--ink-3)}
.tile .d{font-size:11.5px; color:var(--ink-3)}
.up{color:var(--ok)} .down{color:var(--bad)}
.bar-track{height:5px;border-radius:3px;background:var(--surface-2);overflow:hidden;margin-top:6px}
.bar-fill{height:100%;border-radius:3px;background:var(--accent)}
.bar-fill.warn{background:var(--warn)}
.bar-fill.bad{background:var(--bad)}

.split{display:grid; grid-template-columns:1.55fr 1fr; gap:16px; align-items:start}
.split-even{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start}

/* Une colonne de grille refuse par défaut de descendre sous la largeur de
   son contenu : un tableau un peu large suffit alors à élargir la page
   entière, et l'écran se met à défiler latéralement. min-width:0 lève cette
   réserve — la colonne se serre, et c'est le tableau qui défile dans sa
   carte plutôt que la page sous le lecteur. */
.split > *, .split-even > *, .tiles > *, .form-grid > *, .kv > *{min-width:0}

.pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:20px;white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.bad{background:var(--bad-soft);color:var(--bad)}
.pill.mute{background:var(--surface-2);color:var(--ink-3)}
.pill.info{background:var(--accent-soft);color:var(--accent-ink)}

.alert{border-radius:8px;padding:10px 14px;font-size:13px;border-left:3px solid}
.alert.ok{background:var(--ok-soft);border-color:var(--ok);color:#134a38}
.alert.warn{background:var(--warn-soft);border-color:var(--warn);color:#6d420a}
.alert.bad{background:var(--bad-soft);border-color:var(--bad);color:#71241a}
.alert.info{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}

.note{border-left:3px solid var(--accent);background:var(--accent-soft);color:var(--accent-ink);border-radius:0 8px 8px 0;padding:11px 14px;font-size:12.5px}
.note b{font-weight:600}

/* ---------- tableaux ---------- */
.tbl-wrap{overflow-x:auto}
table.data{width:100%;border-collapse:collapse;font-size:13px}
table.data thead th{
  text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--ink-3);font-weight:700;padding:11px 20px;border-bottom:1px solid var(--line);
  white-space:nowrap;background:var(--surface);
}
table.data tbody td{
  padding:13px 20px;border-bottom:1px solid var(--line-soft);vertical-align:middle;
  font-variant-numeric:tabular-nums;
}
table.data tbody tr:last-child td{border-bottom:none}
table.data tbody tr{transition:background .12s ease}
table.data tbody tr:hover{background:var(--accent-soft)}
table.data td.r,table.data th.r{text-align:right}
table.data tfoot td{padding:13px 20px;border-top:1.5px solid var(--line);font-weight:600;background:var(--surface)}
.sub{font-size:11.5px;color:var(--ink-3)}
.empty{padding:26px 16px;color:var(--ink-3);text-align:center}

/* ---------- formulaires ---------- */
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;padding:15px 20px;border-bottom:1px solid var(--line-soft)}
.field{display:flex;flex-direction:column;gap:4px;min-width:0}
.field > label{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);font-weight:700}
.field.grow{flex:1 1 180px}
input,select,textarea{
  font:inherit;font-size:13px;color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:9px;padding:9px 11px;min-width:0;width:100%;
  transition:border-color .12s ease, box-shadow .12s ease;
}
input:focus,select:focus,textarea:focus{border-color:var(--accent-2)}
textarea{min-height:96px;resize:vertical}
/* Anneau de focus : un halo diffus plutôt qu'un trait dur, qui doublait
   visuellement la bordure du champ. Il reste parfaitement visible au clavier. */
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:none; border-color:var(--accent-2);
  box-shadow:0 0 0 3px rgba(36,119,189,.18);
}
button:focus-visible,a:focus-visible{
  outline:2px solid var(--accent-2); outline-offset:2px; border-radius:9px;
}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px 14px}
.form-grid .wide{grid-column:1/-1}
.help{font-size:11.5px;color:var(--ink-3)}
fieldset{border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin:0}
legend{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3);font-weight:700;padding:0 6px}
.check{display:flex;align-items:center;gap:8px;font-size:13px}
.check input{width:auto}

.btn{
  display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:13px;font-weight:500;
  background:var(--surface);color:var(--ink-2);border:1px solid var(--line);
  border-radius:9px;padding:8px 14px;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background .12s ease, box-shadow .12s ease, color .12s ease;
}
.btn:hover{background:var(--surface-2);color:var(--ink)}
.btn.primary{
  background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600;
  box-shadow:0 1px 2px rgba(30,58,138,.20), 0 6px 16px -8px rgba(30,58,138,.50);
}
.btn.primary:hover{background:#24439B;color:#fff}
.btn.danger{color:var(--bad);border-color:var(--bad-soft);background:var(--bad-soft)}
.btn.danger:hover{background:#f3d3cd;color:var(--bad)}
.btn.sm{padding:4px 9px;font-size:12px}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:4px}

/* ---------- fiches clé/valeur ---------- */
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0}
.kv > div{padding:12px 16px;border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.kv .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);font-weight:700;margin-bottom:3px}
.kv .v{font-size:13.5px;word-break:break-word}
.secret{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.secret code{background:var(--surface-2);border:1px solid var(--line);border-radius:5px;padding:2px 7px;font-size:12.5px;font-family:var(--mono)}

.trunk-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 16px;border-bottom:1px solid var(--line-soft)}
.trunk-head h3{font-size:14.5px}

/* ---------- graphique ---------- */
.chart-wrap{padding:6px 16px 14px}
svg.chart{display:block;width:100%;height:auto;max-width:100%}
.legend{display:flex;gap:16px;flex-wrap:wrap;padding:0 16px 14px;font-size:12px;color:var(--ink-3)}
.legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px}

/* ---------- pagination ---------- */
.pager{display:flex;gap:6px;align-items:center;justify-content:flex-end;padding:12px 16px;font-size:13px;flex-wrap:wrap}
.pager a,.pager span{padding:4px 9px;border-radius:6px;text-decoration:none;color:var(--ink-2);border:1px solid transparent}
.pager a:hover{background:var(--surface-2)}
.pager .cur{background:var(--accent);color:#fff;font-weight:600}

/* ---------- facture imprimable ---------- */
.invoice{background:#fff;max-width:190mm;margin:0 auto;padding:16mm 14mm;border:1px solid var(--line);border-radius:var(--radius)}
.inv-head{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:12mm}
.inv-head .co{font-size:17px;font-weight:700}
.inv-meta{text-align:right;font-size:12.5px}
.inv-meta .ref{font-size:19px;font-weight:700;letter-spacing:-.01em}
.inv-parties{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:8mm}
.inv-parties h4{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);margin-bottom:4px}
.inv-total{margin-left:auto;max-width:78mm;margin-top:6mm}
.inv-total table{width:100%;font-size:13px;border-collapse:collapse}
.inv-total td{padding:5px 0}
.inv-total tr.grand td{border-top:2px solid var(--ink);font-size:16px;font-weight:700;padding-top:8px}

@media print{
  .rail,.topbar,.legal,.noprint{display:none !important}
  body{background:#fff}
  .content{padding:0}
  .invoice{border:none;max-width:none;padding:0}
}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .split,.split-even{grid-template-columns:1fr}
}
/* L'infobulle se pose au-dessus du curseur avec un décalage franc :
   collée, elle masquait la case que l'on venait de viser. */
.ch-tip{transform:translate(-50%, -140%); padding:8px 11px; font-size:12px; line-height:1.45}

@media (max-width:760px){
  .shell{flex-direction:column}
  .rail{width:auto;flex:0 0 auto;border-right:none;border-bottom:1px solid var(--line);padding:14px 16px;gap:14px}
  .nav{flex-direction:row;overflow-x:auto;gap:4px;padding-bottom:2px}
  .nav-label{display:none}
  .nav a{white-space:nowrap;padding:7px 11px}
  .rail-foot{margin-top:0;flex-direction:row;align-items:center;justify-content:space-between}
  .balance{display:flex;align-items:baseline;gap:10px}
  .balance .v{font-size:16px}
  .balance .m{display:none}
  .topbar{padding:12px 16px}
  .content{padding:16px 16px 40px}
  .legal{padding:0 16px 26px}
  .who-txt{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}

/* =====================================================================
   Graphiques
   Les couleurs des séries sont posées en attribut par le PHP : elles
   viennent d'une palette vérifiée pour les daltonismes, et chaque marque
   est doublée d'un libellé écrit. La feuille de style ne s'occupe que du
   décor — grille, graduations, zones de survol.
   ===================================================================== */
.ch-grid{stroke:var(--line-soft); stroke-width:1}
.ch-tick{font-size:10px; fill:var(--ink-3); font-family:var(--sans);
  font-variant-numeric:tabular-nums}
.ch-hit{fill:transparent; cursor:crosshair}
.ch-hit:hover{fill:var(--accent); fill-opacity:.05}
.ch-hit-bar{cursor:default; transition:opacity .12s ease}
.ch-hit-bar:hover{opacity:.82}
.ch-empty{margin:6px 0 2px; font-size:13px; color:var(--ink-3)}
svg.spark{display:block; width:100%; max-width:118px; height:30px}
svg.gauge{display:block; width:100%; max-width:132px; height:auto}

/* Période analysée — un seul choix à la fois, toujours visible. */
/* flex-wrap : sur un téléphone, quatre choix de période dépassent de quelques
   pixels et font défiler toute la page de côté. Ils passent à la ligne. */
.periode{display:flex; align-items:center; gap:7px; margin-bottom:2px; flex-wrap:wrap}
.periode-lab{font-size:11px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--ink-3); font-weight:700; margin-right:2px}
.periode-btn{
  font-size:12.5px; font-weight:600; text-decoration:none; color:var(--ink-2);
  padding:5px 12px; border:1px solid var(--line); border-radius:20px;
  background:var(--surface); transition:border-color .12s, color .12s, background .12s;
}
.periode-btn:hover{border-color:var(--accent-2); color:var(--accent)}
.periode-btn.on{background:var(--accent); border-color:var(--accent); color:#fff}

/* Tuiles d'indicateurs : le chiffre d'abord, la tendance ensuite. */
.tile{position:relative; overflow:hidden}
.tile .t-spark{margin:6px 0 2px; min-height:30px}
.tile .t-gauge{margin:-6px 0 -10px; min-height:30px}
.delta{font-weight:600}
.delta.up{color:var(--ok)}
.delta.down{color:var(--bad)}
.delta.none{color:var(--ink-3); font-weight:500}

/* Barres horizontales : la longueur porte la grandeur, le libellé porte
   l'identité. La couleur ne fait que rappeler l'un et l'autre. */
.hbars{display:flex; flex-direction:column; gap:12px}
.hbar-top{display:flex; align-items:baseline; gap:10px; margin-bottom:5px}
.hbar-label{display:flex; align-items:center; gap:7px; font-size:13px; color:var(--ink-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hbar-label i{flex:none; width:8px; height:8px; border-radius:2px}
.hbar-val{margin-left:auto; font-size:12.5px; color:var(--ink-3); white-space:nowrap}
.hbar-track{height:8px; border-radius:4px; background:var(--surface-2); overflow:hidden}
.hbar-fill{height:100%; border-radius:4px; transition:width .3s ease}

/* Barre empilée : 2 px de fond entre deux segments, sinon ils se confondent. */
.stackbar{display:flex; height:13px; border-radius:7px; overflow:hidden;
  background:var(--surface-2); margin-bottom:18px}
.stackbar-seg{display:block; height:100%; box-shadow:inset -2px 0 0 var(--surface)}
.stackbar-seg:last-child{box-shadow:none}

/* Code de réponse SIP, à côté de la cause écrite. */
.cdr-code{font-size:11px; color:var(--ink-3); background:var(--surface-2);
  padding:1px 5px; border-radius:5px; vertical-align:1px}
.nowrap{white-space:nowrap}
.card-foot{padding:12px 20px; border-top:1px solid var(--line-soft); font-size:12px}

/* Infobulle commune à tous les graphiques. */
.ch-tip{
  position:fixed; z-index:60; pointer-events:none; opacity:0;
  transform:translate(-50%,-100%) translateY(-10px);
  background:var(--ink); color:#fff; font-size:12px; line-height:1.5;
  padding:8px 11px; border-radius:9px; max-width:240px;
  box-shadow:0 10px 28px -10px rgba(14,26,43,.5);
  transition:opacity .1s ease;
}
.ch-tip.on{opacity:1}
.ch-tip b{font-weight:600}

/* Deux cartes côte à côte gardent la même hauteur : une carte plus courte
   que sa voisine laissait un trou blanc en bas de colonne. */
.split-even > .card{height:100%}
/* Dans la paire large/étroite, la carte de gauche porte un graphique de
   hauteur fixe : l'étirer ne ferait qu'ouvrir un vide sous la courbe. */

/* =====================================================================
   Passe « premium » — identité Connecting Business Canada
   La colonne de navigation reprend le bleu profond de la page de
   connexion : l'application devient le prolongement de l'écran d'accueil
   au lieu d'un tableur blanc. Le contenu, lui, reste clair : c'est là que
   se lisent les chiffres, et un fond sombre y fatiguerait l'œil.
   ===================================================================== */
:root{
  --rail-ink:#0B1F4B;
  --ground:#F4F7FC;
  --radius:16px;
  --rail:270px;
  --shadow:0 1px 2px rgba(11,31,75,.045), 0 12px 32px -18px rgba(11,31,75,.20);
  --shadow-lg:0 1px 3px rgba(11,31,75,.06), 0 28px 64px -28px rgba(11,31,75,.26);
}

body{background:
  radial-gradient(120% 70% at 100% 0%, #EDF3FC 0%, rgba(237,243,252,0) 58%),
  var(--ground);
}

/* ---------- colonne de navigation ---------- */
.rail{
  position:relative; overflow:hidden; border-right:0; padding:24px 16px 20px;
  color:rgba(255,255,255,.82);
  background:
    radial-gradient(120% 55% at 100% 0%, rgba(36,119,189,.40) 0%, rgba(36,119,189,0) 62%),
    linear-gradient(180deg,#14306E 0%,#0F2557 52%,#0B1C44 100%);
}
.rail::after{   /* trame très diluée, pour que l'aplat ne soit pas mort */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.30;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(75% 45% at 25% 8%,#000 0%,transparent 100%);
          mask-image:radial-gradient(75% 45% at 25% 8%,#000 0%,transparent 100%);
}
.rail > *{position:relative; z-index:1}

.rail .brand-logo{filter:brightness(0) invert(1); opacity:.96; max-width:176px}
.rail .brand-name{color:#fff}
.rail .brand-sub{color:rgba(255,255,255,.52); letter-spacing:.14em; font-size:10px}
.rail .brand-mark{background:rgba(255,255,255,.14); color:#fff}
body.is-admin .rail .brand-mark{background:rgba(255,255,255,.14)}

.nav-label{color:rgba(255,255,255,.40); font-size:9.5px; letter-spacing:.15em; padding:16px 12px 7px}
.nav a{
  color:rgba(255,255,255,.76); font-size:13.5px; font-weight:500;
  border-radius:10px; padding:10px 12px;
}
.nav a:hover{background:rgba(255,255,255,.07); color:#fff}
.nav a[aria-current="page"]{
  background:linear-gradient(90deg, rgba(255,255,255,.15), rgba(255,255,255,.06));
  color:#fff; font-weight:600;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
}
.nav a[aria-current="page"]::before{background:#7FB6E8; width:3px; border-radius:0 3px 3px 0}
.nav .ico{opacity:.85}

.balance{
  background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.14);
  border-radius:13px; padding:13px 14px;
}
.balance .k{color:rgba(255,255,255,.52)}
.balance .v{color:#fff; font-size:22px}
.balance .m{color:rgba(255,255,255,.48)}
.logout{color:rgba(255,255,255,.58)}
.logout:hover{background:rgba(255,255,255,.08); color:#fff}

/* ---------- bandeau ---------- */
.topbar{padding:20px 30px; border-bottom:1px solid var(--line); background:var(--surface)}
.topbar h1{font-size:22px; letter-spacing:-.025em}
.avatar{
  background:linear-gradient(180deg,#2A4CA8 0%,#1A3273 100%);
  border:0; color:#fff; width:34px; height:34px; font-size:12px;
  box-shadow:0 6px 16px -8px rgba(26,50,115,.8);
}
.who-txt .n{letter-spacing:-.01em}

.content{padding:26px 30px 44px; gap:22px}

/* ---------- cartes ---------- */
.card{border-color:#E7EDF6}
.card-head{padding:19px 22px 0}
.card-head h2{font-size:15.5px; letter-spacing:-.015em}
.card-head .hint{font-size:11.5px}
.card-body{padding:18px 22px 20px}
.chart-wrap{padding:8px 18px 18px}
.legend{padding:0 22px 4px; font-size:11.5px}

/* ---------- tuiles d'indicateurs ---------- */
.tile{
  position:relative; padding:20px 22px 18px; border-color:#E7EDF6; overflow:hidden;
  background:linear-gradient(180deg,#FFFFFF 0%,#FCFDFF 100%);
}
.tile::before{   /* filet d'accent en haut de tuile */
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg,var(--accent-2),rgba(36,119,189,0));
  opacity:.55;
}
.tile .k{font-size:10.5px; letter-spacing:.11em; color:var(--ink-3)}
.tile .v{font-size:33px; letter-spacing:-.03em; margin-top:2px}
.tile .v small{font-size:14px}
.tile .d{font-size:11.5px; margin-top:2px}

/* ---------- tableaux ---------- */
table.data thead th{
  font-size:10px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-3); font-weight:700;
}
table.data tbody td{padding:13px 20px; border-color:var(--line-soft)}
table.data tbody tr:hover{background:#F7FAFE}

.periode-btn{font-size:12px; padding:6px 14px}
.periode-btn.on{box-shadow:0 8px 18px -10px rgba(30,58,138,.8)}

@media (max-width:1000px){
  .rail{background:linear-gradient(180deg,#14306E 0%,#0F2557 100%)}
}

/* ---------------------------------------------------------------------
   Bandeau d'indicateurs
   Les quatre chiffres qui comptent, posés sur le bleu de la maison plutôt
   que sur quatre cartes blanches. C'est le premier bloc que l'œil rencontre :
   il doit affirmer la marque avant d'énoncer les chiffres.
   --------------------------------------------------------------------- */
.hero, .meteo-tete{
  position:relative; overflow:hidden; border-radius:20px; color:#fff;
  background:
    radial-gradient(110% 130% at 100% 0%, rgba(36,119,189,.55) 0%, rgba(36,119,189,0) 60%),
    radial-gradient(80% 120% at 0% 100%, rgba(10,24,60,.75) 0%, rgba(10,24,60,0) 70%),
    linear-gradient(120deg,#16306E 0%,#1B3E92 46%,#0E2358 100%);
  box-shadow:0 2px 4px rgba(11,31,75,.10), 0 26px 54px -26px rgba(11,31,75,.55);
}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(70% 90% at 82% 10%,#000 0%,transparent 100%);
          mask-image:radial-gradient(70% 90% at 82% 10%,#000 0%,transparent 100%);
}
.hero-in{
  position:relative; z-index:1; display:grid;
  grid-template-columns:repeat(4,1fr); gap:0; padding:26px 4px;
}
.kpi{padding:2px 30px; min-width:0}
.kpi + .kpi{border-left:1px solid rgba(255,255,255,.13)}
.kpi .k{
  font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.kpi .v{
  font-size:38px; font-weight:600; line-height:1.05; letter-spacing:-.035em;
  margin-top:6px; font-variant-numeric:tabular-nums;
}
.kpi .v small{font-size:15px; font-weight:500; color:rgba(255,255,255,.6); margin-left:2px}
.kpi .s{margin:10px 0 8px; min-height:34px}
.kpi .s.g{margin:-6px 0 -8px}
.kpi .s svg.spark{max-width:130px}
.kpi .s svg.gauge{max-width:112px}
.kpi .d{font-size:11.5px; color:rgba(255,255,255,.58)}
.hero .delta.up{color:#79E0B4}
.hero .delta.down{color:#F2A79B}
.hero .delta.none{color:rgba(255,255,255,.45)}

@media (max-width:1080px){
  .hero-in{grid-template-columns:repeat(2,1fr); gap:22px 0; padding:22px 4px}
  .kpi:nth-child(odd){border-left:0}
  .kpi{padding:2px 22px}
}
@media (max-width:620px){
  .hero-in{grid-template-columns:1fr}
  .kpi + .kpi{border-left:0; border-top:1px solid rgba(255,255,255,.13); padding-top:18px; margin-top:4px}
}

/* ---------- anneau de répartition ---------- */
.donut-wrap{display:flex; justify-content:center; margin:2px 0 20px}
svg.donut{width:100%; max-width:212px; height:auto}
.donut-seg{transition:opacity .12s ease; cursor:default}
.donut-seg:hover{opacity:.82}
.donut-v{
  font-family:var(--sans); font-size:34px; font-weight:600; fill:var(--ink);
  letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.donut-l{
  font-family:var(--sans); font-size:11px; font-weight:700; fill:var(--ink-3);
  letter-spacing:.13em; text-transform:uppercase;
}

/* =====================================================================
   Thème sombre — le mode par défaut
   Ce n'est pas un inversement automatique du thème clair : chaque valeur
   est choisie contre son fond. Les couleurs de séries, elles, sont posées
   par le PHP, qui connaît le thème avant de dessiner (inc/chart.php).
   ===================================================================== */
.theme-btn{
  display:grid; place-items:center; width:34px; height:34px; flex:none;
  border:1px solid var(--line); border-radius:50%; background:var(--surface);
  color:var(--ink-2); cursor:pointer; padding:0;
  transition:border-color .12s, color .12s, background .12s;
}
.theme-btn:hover{border-color:var(--accent-2); color:var(--accent)}
.theme-btn svg{width:16px; height:16px; fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.theme-btn .ico-moon{display:none}
:root[data-theme="dark"] .theme-btn .ico-sun{display:none}
:root[data-theme="dark"] .theme-btn .ico-moon{display:block}

:root[data-theme="dark"]{
  --ground:#080F20;
  --surface:#0E1932;
  --surface-2:#16233F;
  --line:#1E2C4C;
  --line-soft:#17233E;
  --ink:#EAF0FA;
  --ink-2:#B3C2D8;
  --ink-3:#7E8FA8;
  --accent:#5B8DF0;
  --accent-2:#6FA8E8;
  --accent-soft:#16264A;
  --accent-ink:#BBD2F7;
  --ok:#2FB98B;      --ok-soft:#0F2E28;
  --warn:#D99A3B;    --warn-soft:#31240F;
  --bad:#E2685A;     --bad-soft:#331713;
  --gold:#D9B45F;    --gold-soft:#2C2413;
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 14px 34px -20px rgba(0,0,0,.85);
  --shadow-lg:0 2px 6px rgba(0,0,0,.45), 0 30px 70px -30px rgba(0,0,0,.95);
}

:root[data-theme="dark"] body{
  background:
    radial-gradient(120% 60% at 100% 0%, #10204A 0%, rgba(16,32,74,0) 60%),
    radial-gradient(90% 60% at 0% 100%, #0B1730 0%, rgba(11,23,48,0) 70%),
    var(--ground);
  color:var(--ink);
}
:root[data-theme="dark"] .topbar{
  background:rgba(14,25,50,.72); border-bottom-color:var(--line);
  backdrop-filter:blur(10px);
}
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .tile{
  background:linear-gradient(180deg,#101D3A 0%,#0D1830 100%);
  border-color:var(--line);
}
:root[data-theme="dark"] table.data tbody tr:hover{background:#14223E}
:root[data-theme="dark"] table.data thead th{color:var(--ink-3)}
:root[data-theme="dark"] .hbar-track,
:root[data-theme="dark"] .stackbar{background:#16233F}
:root[data-theme="dark"] .ch-grid{stroke:#1B2949}
:root[data-theme="dark"] .ch-tick{fill:#7E8FA8}
:root[data-theme="dark"] .cdr-code{background:#16233F; color:var(--ink-3)}
:root[data-theme="dark"] .donut-v{fill:var(--ink)}
:root[data-theme="dark"] .ch-tip{background:#1B2B4E; color:#EAF0FA;
  box-shadow:0 14px 34px -12px rgba(0,0,0,.9)}
:root[data-theme="dark"] .periode-btn{background:#101D3A; color:var(--ink-2); border-color:var(--line)}
:root[data-theme="dark"] .periode-btn.on{background:var(--accent); border-color:var(--accent); color:#06122B}
:root[data-theme="dark"] .theme-btn{background:#101D3A}
:root[data-theme="dark"] .avatar{box-shadow:0 6px 18px -8px rgba(91,141,240,.9)}
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea{background:#0C1730; color:var(--ink); border-color:var(--line)}
:root[data-theme="dark"] .btn{background:#14223E; color:var(--ink-2); border-color:var(--line)}
:root[data-theme="dark"] .btn.primary{background:linear-gradient(180deg,#3E71D8,#2A56B4); color:#fff; border-color:transparent}

/* Le rail et le bandeau sont déjà sombres : on les accorde simplement au
   fond plus profond du thème. */
:root[data-theme="dark"] .rail{
  background:linear-gradient(180deg,#0D1A38 0%,#0A1632 55%,#070F22 100%);
  border-right:1px solid var(--line);
}
:root[data-theme="dark"] .hero,
:root[data-theme="dark"] .meteo-tete{
  background:
    radial-gradient(110% 130% at 100% 0%, rgba(62,113,216,.42) 0%, rgba(62,113,216,0) 60%),
    linear-gradient(120deg,#132B63 0%,#17357E 48%,#0D1C42 100%);
  box-shadow:0 2px 6px rgba(0,0,0,.4), 0 28px 60px -28px rgba(0,0,0,.95);
}

/* ---------------------------------------------------------------------
   Finitions
   Le détail qui sépare une interface correcte d'une interface soignée :
   un filet de lumière en haut des surfaces, une pastille qui bat quand
   l'information est vivante, un titre souligné d'un dégradé plutôt que
   d'un trait. Rien qui coûte en lisibilité.
   --------------------------------------------------------------------- */

/* Pastille d'état vivante. Le halo respire, le point reste net. */
@keyframes pouls{
  0%   {box-shadow:0 0 0 0 currentColor; opacity:1}
  70%  {box-shadow:0 0 0 6px transparent; opacity:.85}
  100% {box-shadow:0 0 0 0 transparent; opacity:1}
}
.pill.live::before{animation:pouls 2.4s ease-out infinite}
@media (prefers-reduced-motion:reduce){ .pill.live::before{animation:none} }

/* Filet de lumière sur le bord supérieur des surfaces. */
.card, .tile, .hero{position:relative}
.card::before, .tile::after{
  content:""; position:absolute; left:14px; right:14px; top:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  opacity:0; pointer-events:none;
}
:root[data-theme="dark"] .card::before,
:root[data-theme="dark"] .tile::after{opacity:.16}

/* Titre de carte souligné d'un dégradé court, du côté du texte. */
.card-head h2{position:relative; padding-bottom:9px}
.card-head h2::after{
  content:""; position:absolute; left:0; bottom:0; width:34px; height:2px;
  border-radius:2px;
  background:linear-gradient(90deg, var(--accent-2), rgba(36,119,189,0));
}

/* Lignes de tableau : une amorce d'accent au survol, côté gauche. */
table.data tbody tr{position:relative}
table.data tbody tr td:first-child{box-shadow:inset 2px 0 0 transparent; transition:box-shadow .12s ease}
table.data tbody tr:hover td:first-child{box-shadow:inset 2px 0 0 var(--accent-2)}

/* Cartes : profondeur au survol, sans saut de mise en page. */
.card{transition:border-color .16s ease, box-shadow .16s ease}
.card:hover{box-shadow:var(--shadow-lg)}
:root[data-theme="dark"] .card:hover{border-color:#26375C}

/* Anneau : un halo derrière la couronne, très dilué. */
svg.donut{filter:drop-shadow(0 10px 22px rgba(0,0,0,.18))}
:root[data-theme="dark"] svg.donut{filter:drop-shadow(0 14px 28px rgba(0,0,0,.55))}

/* Bandeau : liseré intérieur clair sur l'arête haute. */
.hero{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),
      0 2px 6px rgba(0,0,0,.28), 0 28px 60px -28px rgba(0,0,0,.8)}

/* Pied de page : plus discret, centré, sans lien bleu criard. */
.legal{color:var(--ink-3)}
.legal a{color:var(--ink-2); text-decoration:none}
.legal a:hover{color:var(--accent-2)}

/* =====================================================================
   LUXE SOBRE — passe finale
   Moins de couleur, plus d'air, une typographie qui porte le propos.
   Tout ce qui précède reste en place ; cette section redéfinit les
   jetons de couleur et de forme, et les composants suivent d'eux-mêmes.

   Deux familles, servies depuis ce serveur — aucune requête vers un
   domaine tiers, comme le reste du portail :
     · Source Serif 4, pour les chiffres et les titres. Une serif à fort
       contraste donne aux montants la tenue d'un relevé bancaire.
     · Inter, pour l'interface. Neutre, dessinée pour l'écran.
   ===================================================================== */
@font-face{
  font-family:"Inter var"; font-style:normal; font-weight:100 900;
  font-display:swap; src:url("fonts/inter-var.woff2") format("woff2");
}
@font-face{
  font-family:"Source Serif var"; font-style:normal; font-weight:200 900;
  font-display:swap; src:url("fonts/source-serif-var.woff2") format("woff2");
}

:root{
  --sans:"Inter var",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --serif:"Source Serif var",Georgia,"Times New Roman",serif;

  /* Neutres chauds : un blanc franc paraît clinique, un gris froid
     paraît bon marché. Le papier des imprimeurs de qualité est chaud. */
  --ground:#F6F4F1;
  --surface:#FFFFFF;
  --surface-2:#F0EDE8;
  --line:#E4DFD8;
  --line-soft:#EFEBE5;
  --ink:#15191D;
  --ink-2:#4B525A;
  --ink-3:#8C9198;

  /* Un seul bleu, profond, et un bronze employé à la goutte :
     liseré actif, soulignement de titre, valeur mise en avant. */
  --accent:#16314F;
  --accent-2:#2E5A85;
  --accent-soft:#EDF1F6;
  --accent-ink:#16314F;
  --or:#9A7B3F;
  --or-clair:#C0A063;

  --ok:#3F6B52;   --ok-soft:#E8EFE9;
  --warn:#8E6A2A; --warn-soft:#F5EFE2;
  --bad:#8F463C;  --bad-soft:#F6E9E6;
  --gold:#9A7B3F; --gold-soft:#F4EEE2;

  /* Rayon court : l'arrondi généreux appartient au logiciel grand
     public, pas au document financier. */
  --radius:7px;
  --page:1220px;
  --rail:252px;
  --shadow:0 1px 1px rgba(21,25,29,.03), 0 8px 24px -18px rgba(21,25,29,.18);
  --shadow-lg:0 1px 2px rgba(21,25,29,.04), 0 24px 48px -28px rgba(21,25,29,.22);
}

:root[data-theme="dark"]{
  --ground:#0B0C0E;
  --surface:#131518;
  --surface-2:#1C1F23;
  --line:#25292E;
  --line-soft:#1E2126;
  --ink:#ECE8E2;
  --ink-2:#AEB3B9;
  --ink-3:#7C828A;
  --accent:#7FA6CC;
  --accent-2:#9CBBDB;
  --accent-soft:#182028;
  --accent-ink:#CFE0F0;
  --or:#C0A063;
  --ok:#5E9B79;   --ok-soft:#16241C;
  --warn:#C09A55; --warn-soft:#231C0F;
  --bad:#C4776B;  --bad-soft:#241513;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 40px -28px rgba(0,0,0,.9);
  --shadow-lg:0 2px 6px rgba(0,0,0,.5), 0 32px 70px -34px rgba(0,0,0,1);
}

body{font-feature-settings:"kern" 1,"liga" 1,"ss01" 1; letter-spacing:-.003em}
:root[data-theme="dark"] body{background:var(--ground)}
body:not(.login){background:var(--ground)}

/* ---------- typographie ---------- */
h1,h2,h3{font-family:var(--serif); font-weight:500; letter-spacing:-.012em}
.topbar h1{font-size:27px; line-height:1.15}
.card-head h2{font-size:19px; font-weight:500; padding-bottom:0}
.card-head h2::after{display:none}       /* le soulignement faisait bavard */
.card-head{padding:22px 26px 0; align-items:baseline}
.card-head .hint{font-size:11.5px; letter-spacing:.02em; color:var(--ink-3)}
.card-body{padding:20px 26px 24px}
.chart-wrap{padding:10px 20px 20px}
.legend{padding:2px 26px 6px}

/* ---------- le bandeau devient sobre ----------
   Plus d'aplat bleu ni de dégradé : une surface, des filets verticaux,
   et des chiffres en serif qui portent seuls l'attention. */
.hero{
  background:var(--surface); border:1px solid var(--line); color:var(--ink);
  border-radius:var(--radius); box-shadow:var(--shadow);
}
.hero::after, .hero::before{display:none}
.hero-in{padding:34px 8px}
.kpi{padding:2px 34px}
.kpi + .kpi{border-left:1px solid var(--line-soft)}
.kpi .k{
  font-family:var(--sans); font-size:10px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3);
}
.kpi .v{
  font-family:var(--serif); font-weight:400; font-size:46px; line-height:1.02;
  letter-spacing:-.02em; margin-top:12px; color:var(--ink);
}
.kpi .v small{font-family:var(--sans); font-size:14px; color:var(--ink-3); font-weight:400}
.kpi .s{margin:14px 0 10px}
.kpi .d{font-size:11.5px; color:var(--ink-3); letter-spacing:.01em}
.hero .delta.up{color:var(--ok)}
.hero .delta.down{color:var(--bad)}
.hero .delta.none{color:var(--ink-3)}
.delta{font-weight:500}

/* ---------- tuiles et cartes ---------- */
.tile{background:var(--surface); box-shadow:var(--shadow); padding:22px 24px}
.tile::before, .tile::after, .card::before{display:none}
.tile .v{font-family:var(--serif); font-weight:400; font-size:34px; letter-spacing:-.02em}
.card{box-shadow:var(--shadow)}
.card:hover{box-shadow:var(--shadow)}   /* pas d'effet au survol : c'est une page, pas un jouet */

/* ---------- colonne de navigation ----------
   Presque noire, filet bronze sur l'entrée active. La couleur ne sert
   qu'à désigner où l'on se trouve. */
.rail{
  background:#101215; border-right:1px solid #1D2025; padding:28px 16px 22px;
  color:rgba(236,232,226,.72);
}
.rail::after{display:none}
:root[data-theme="dark"] .rail{background:#0E1013}
.rail .brand-sub{color:rgba(236,232,226,.42); letter-spacing:.2em; font-size:9.5px}
.nav-label{color:rgba(236,232,226,.34); letter-spacing:.18em; font-size:9.5px; padding:20px 12px 8px}
.nav a{color:rgba(236,232,226,.74); border-radius:6px; font-size:13.5px; font-weight:400}
.nav a:hover{background:rgba(255,255,255,.05); color:#fff}
.nav a[aria-current="page"]{
  background:rgba(255,255,255,.06); color:#fff; font-weight:500; box-shadow:none;
}
.nav a[aria-current="page"]::before{background:var(--or-clair); width:2px}
.balance{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.10); border-radius:6px}
.balance .k{color:rgba(236,232,226,.42); letter-spacing:.14em; font-size:9.5px}
.balance .v{font-family:var(--serif); font-weight:400; font-size:25px; color:#fff}
.balance .m{color:rgba(236,232,226,.40)}
.logout{color:rgba(236,232,226,.5)}

/* ---------- bandeau supérieur ---------- */
.topbar{background:transparent; border-bottom:1px solid var(--line); padding:26px 34px 22px}
.content{padding:30px 34px 56px; gap:26px}
.avatar{
  background:transparent; color:var(--ink-2); border:1px solid var(--line);
  box-shadow:none; font-family:var(--sans); font-size:11.5px; font-weight:600;
}
.theme-btn{background:transparent}

/* ---------- tableaux ---------- */
table.data thead th{
  font-size:9.5px; letter-spacing:.16em; font-weight:600; color:var(--ink-3);
  border-bottom:1px solid var(--line);
}
table.data tbody td{padding:15px 22px; font-size:13.5px}
table.data tbody tr:hover{background:var(--line-soft)}
:root[data-theme="dark"] table.data tbody tr:hover{background:#181B1F}
table.data tbody tr:hover td:first-child{box-shadow:inset 2px 0 0 var(--or)}
td.num, th.r{font-variant-numeric:tabular-nums}

/* ---------- pastilles, très basses en saturation ---------- */
.pill{
  font-size:11px; font-weight:500; letter-spacing:.02em; border-radius:4px;
  padding:3px 9px; background:transparent; border:1px solid var(--line);
}
.pill::before{width:5px; height:5px}
.pill.ok{color:var(--ok); border-color:color-mix(in srgb, var(--ok) 34%, transparent)}
.pill.warn{color:var(--warn); border-color:color-mix(in srgb, var(--warn) 34%, transparent)}
.pill.bad{color:var(--bad); border-color:color-mix(in srgb, var(--bad) 34%, transparent)}
.pill.mute{color:var(--ink-3)}
.pill.info{color:var(--accent-2); border-color:color-mix(in srgb, var(--accent-2) 34%, transparent)}

/* ---------- période, boutons ---------- */
.periode-lab{letter-spacing:.16em; font-size:9.5px}
.periode-btn{
  border-radius:4px; font-weight:500; font-size:12px; padding:6px 15px;
  background:transparent; border-color:var(--line); color:var(--ink-2);
}
.periode-btn.on{background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:none}
:root[data-theme="dark"] .periode-btn.on{color:#0B0C0E}
.btn.primary{background:var(--accent); border-color:var(--accent); box-shadow:none}

/* ---------- graphiques ---------- */
.donut-v{font-family:var(--serif); font-weight:400; font-size:36px; letter-spacing:-.02em}
.donut-l{font-family:var(--sans); font-size:9.5px; letter-spacing:.18em}
svg.donut{filter:none; max-width:196px}
.ch-tick{font-family:var(--sans); font-size:9.5px; letter-spacing:.02em}
.hbar-label{font-size:12.5px; color:var(--ink-2)}
.hbar-label i{width:6px; height:6px; border-radius:1px}
.hbar-val{font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.hbar-track{height:5px; border-radius:0; background:var(--line-soft)}
.hbar-fill{border-radius:0}
.hbars{gap:15px}
.stackbar{height:8px; border-radius:0}

/* ---------- pied de page ---------- */
.legal{padding:0 34px 40px; font-size:11px; letter-spacing:.01em}
.legal-copy{letter-spacing:.09em; font-size:10px; text-transform:uppercase}
/* Les deux cartes de la paire large/étroite gardent leur hauteur propre :
   étirer celle de gauche ouvrirait un vide sous la courbe. */
.split{align-items:start}

/* Le thème sombre suit la même sobriété : plus d'aplat bleu ni de dégradé,
   une surface à peine détachée du fond et un filet. Ces règles doivent
   venir après celles du thème sombre d'origine, qu'elles remplacent. */
:root[data-theme="dark"] .hero{
  background:var(--surface); border:1px solid var(--line);
  box-shadow:var(--shadow); color:var(--ink);
}
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .tile{background:var(--surface); border-color:var(--line)}
:root[data-theme="dark"] .card::before,
:root[data-theme="dark"] .tile::after{display:none}
:root[data-theme="dark"] .kpi + .kpi{border-left-color:var(--line)}
:root[data-theme="dark"] .kpi .k{color:var(--ink-3)}
:root[data-theme="dark"] .kpi .v{color:var(--ink)}
:root[data-theme="dark"] .kpi .d,
:root[data-theme="dark"] .hero .delta.none{color:var(--ink-3)}
:root[data-theme="dark"] .hero .delta.up{color:var(--ok)}
:root[data-theme="dark"] .hero .delta.down{color:var(--bad)}
:root[data-theme="dark"] .topbar{background:transparent; backdrop-filter:none}
:root[data-theme="dark"] .hbar-track,
:root[data-theme="dark"] .stackbar{background:var(--surface-2)}
:root[data-theme="dark"] .ch-grid{stroke:var(--line)}
:root[data-theme="dark"] .ch-tick{fill:var(--ink-3)}
:root[data-theme="dark"] .ch-tip{background:#22262B; color:var(--ink)}
:root[data-theme="dark"] .cdr-code{background:var(--surface-2); color:var(--ink-3)}
:root[data-theme="dark"] .btn{background:transparent; color:var(--ink-2); border-color:var(--line)}
:root[data-theme="dark"] .btn.primary{background:var(--accent); color:#0B0C0E; border-color:var(--accent)}
:root[data-theme="dark"] .periode-btn{background:transparent; border-color:var(--line); color:var(--ink-2)}
:root[data-theme="dark"] .periode-btn.on{background:var(--accent); border-color:var(--accent); color:#0B0C0E}
:root[data-theme="dark"] .theme-btn{background:transparent}
:root[data-theme="dark"] .avatar{background:transparent; border:1px solid var(--line);
  color:var(--ink-2); box-shadow:none}

/* ---------- carte de chaleur : 7 jours × 24 heures ----------
   Des cases, pas des barres : on lit un rythme hebdomadaire, pas une
   comparaison de grandeurs. Les cases restent carrées et espacées d'un
   cheveu — collées, la grille devient une bouillie ; trop écartées, le
   motif se perd. */
.heat{display:flex; flex-direction:column; gap:3px}
.heat-row{display:flex; align-items:center; gap:10px}
.heat-day{
  width:38px; flex:0 0 38px; text-align:right;
  font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-3); font-weight:500;
}
.heat-cells{
  display:grid; grid-template-columns:repeat(var(--heat-cols, 24), 1fr);
  gap:4px; flex:1;
}
.heat-cell{
  aspect-ratio:1; border-radius:3px; display:block; position:relative;
  transition:transform .13s cubic-bezier(.2,.7,.3,1), box-shadow .13s ease;
  box-shadow:0 0 0 0 rgba(0,0,0,0);
}
/* Au survol, la case se soulève au lieu de s'entourer d'un trait gris :
   l'ancien liseré ressemblait à un défaut d'affichage. */
.heat-cell:hover{
  transform:scale(1.18);
  box-shadow:0 3px 10px -2px rgba(21,25,29,.32);
  z-index:3;
}
:root[data-theme="dark"] .heat-cell:hover{box-shadow:0 3px 12px -2px rgba(0,0,0,.75)}

/* Jour sans aucune activité : on garde la rangée pour la lecture du rythme
   hebdomadaire, mais elle s'efface. */
.heat-row-vide .heat-day{opacity:.4}
.heat-row-vide .heat-cells{opacity:.55}
.heat-head .heat-cell{background:none}
.heat-hour{
  font-size:9.5px; color:var(--ink-3); text-align:left;
  letter-spacing:.04em; line-height:1; padding-bottom:4px;
}
.heat-legend{
  display:flex; align-items:center; gap:5px; margin-top:16px;
  padding-left:48px; font-size:11px; color:var(--ink-3);
}
.heat-legend i{width:15px; height:15px; border-radius:3px; display:block}
.heat-legend span:first-child{margin-right:4px}
.heat-legend span:last-child{margin-left:6px}

/* Note explicative sous un graphique : elle dit comment lire, pas ce qu'il
   faut penser. Mise en retrait pour ne pas concurrencer la donnée. */
.ch-note{
  margin:14px 0 0; font-size:12.5px; line-height:1.55; color:var(--ink-3);
  max-width:74ch;
}
.ch-note strong{color:var(--ink-2); font-weight:600}

@media (max-width:760px){
  /* Sur téléphone, 24 colonnes deviennent illisibles : on garde la grille
     mais on retire les graduations horaires, qui se chevauchaient. */
  .heat-hour{display:none}
  .heat-day{width:26px; flex:0 0 26px; font-size:9.5px}
  .heat-cells{gap:2px}
  .heat-legend{padding-left:0}
}

/* Chiffres tabulaires partout où une colonne s'aligne : sans cela, un 1
   plus étroit qu'un 8 fait vaciller une colonne de prix. */
.num, table.data td.r, .kpi .v, .tile .v, .hbar-val, .heat-legend{
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
}

/* =====================================================================
   FINITION — les détails qui séparent un site d'un outil
   ===================================================================== */

/* ---------- navigation au clavier ----------
   Un anneau de mise au point visible partout où l'on peut aller au clavier.
   Il n'apparaît qu'à la navigation clavier (:focus-visible), jamais au clic
   souris : on gagne l'accessibilité sans salir l'écran. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:4px;
}
.rail :focus-visible{outline-color:var(--or-clair); outline-offset:1px}

/* ---------- survol des lignes ----------
   Une ligne de tableau qui réagit dit « je suis cliquable ou lisible » ;
   sans cela l'œil perd sa ligne sur dix-huit mille appels. */
table.data tbody tr{transition:background-color .12s ease}
table.data tbody td{transition:color .12s ease}

/* ---------- boutons et cartes ----------
   Le mouvement est de 1 pixel : assez pour être senti, pas pour être vu.
   Un bouton qui saute de cinq pixels fait jouet. */
.btn{transition:background-color .14s ease, border-color .14s ease,
     color .14s ease, transform .1s ease, box-shadow .14s ease}
.btn:active{transform:translateY(1px)}
.periode-btn{transition:background-color .14s ease, border-color .14s ease, color .14s ease}

/* ---------- voile de chargement ----------
   Le portail est rendu par le serveur : changer de période recharge la page,
   et l'écran blanchit une demi-seconde. Le voile remplace ce clignotement
   par une transition tenue. */
body.chargement .content{
  opacity:.45;
  pointer-events:none;
  transition:opacity .18s ease;
}
body.chargement .periode-btn, body.chargement .btn{cursor:progress}

/* Bandeau de progression, fin, en haut de la zone de contenu. */
body.chargement .topbar::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  background-size:40% 100%; background-repeat:no-repeat;
  animation:barre 1.1s ease-in-out infinite;
}
.topbar{position:relative}
@keyframes barre{
  0%   {background-position:-40% 0}
  100% {background-position:140% 0}
}

/* ---------- respect des préférences système ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

/* ---------- tableaux sur téléphone ----------
   En dessous de 720 px, un tableau à six colonnes ne peut pas fonctionner :
   il déborde ou devient minuscule. Chaque ligne devient une fiche, et
   l'intitulé de colonne réapparaît devant sa valeur — sans dupliquer le
   moindre texte dans le HTML, grâce à l'attribut data-col. */
@media (max-width:720px){
  table.data thead{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap;     /* masqué à l'œil, lu par les lecteurs d'écran */
  }
  table.data, table.data tbody, table.data tr, table.data td{display:block; width:100%}
  table.data tr{
    border:1px solid var(--line); border-radius:8px;
    margin:0 0 10px; padding:10px 12px; background:var(--surface);
  }
  table.data td{
    border:0; padding:5px 0; display:flex; align-items:baseline;
    justify-content:space-between; gap:14px; text-align:right;
  }
  table.data td::before{
    content:attr(data-col);
    font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--ink-3); text-align:left; flex:0 0 auto;
  }
  /* La première cellule fait titre de fiche : son intitulé de colonne
     n'apprend rien et vole une ligne. */
  table.data td:first-child{
    border-bottom:1px solid var(--line-soft); margin-bottom:6px; padding-bottom:9px;
    display:block; text-align:left; font-size:15px;
  }
  table.data td:first-child::before{content:none}
  table.data td.empty{display:block; text-align:center}
  table.data td.empty::before{content:none}
}

/* ---------- téléphone : navigation et bandeau d'indicateurs ----------
   Deux défauts visibles à 390 px : la barre de navigation coupait le
   dernier écran sans le dire, et les quatre indicateurs empilés faisaient
   défiler deux écrans avant le premier graphique. */
@media (max-width:760px){

  /* La navigation défile horizontalement, avec un dégradé au bord droit
     pour annoncer ce qui dépasse. */
  .rail .nav{
    display:flex; gap:6px; overflow-x:auto; scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    padding-bottom:2px;
  }
  .rail .nav::-webkit-scrollbar{display:none}
  .rail .nav a{flex:0 0 auto; scroll-snap-align:start; white-space:nowrap}
  .rail{position:relative}
  .rail::before{
    content:""; position:absolute; right:0; top:52%; bottom:34%;
    width:34px; pointer-events:none; z-index:2;
    background:linear-gradient(90deg, rgba(16,18,21,0), #101215 78%);
  }
  :root[data-theme="dark"] .rail::before{
    background:linear-gradient(90deg, rgba(14,16,19,0), #0E1013 78%);
  }
  .nav-label{display:none}          /* « Exploitation », « Administration » */

  /* Indicateurs : deux par ligne plutôt qu'un seul, chiffres redimensionnés. */
  .hero-in{display:grid; grid-template-columns:1fr 1fr; gap:0; padding:18px 6px}
  .hero .kpi{padding:14px 12px; border-left:0}
  .hero .kpi + .kpi{border-left:0}
  .hero .kpi:nth-child(2n){border-left:1px solid var(--line)}
  .hero .kpi:nth-child(n+3){border-top:1px solid var(--line)}
  .hero .kpi .v{font-size:27px}
  .hero .kpi .k{font-size:9.5px}
  .hero .kpi .d{font-size:11px}
}

/* ---------- légende de graphique et barre d'appoint ---------- */
.ch-legend{
  display:flex; flex-wrap:wrap; gap:18px; margin-top:12px;
  font-size:12px; color:var(--ink-3);
}
.ch-legend .sw{
  display:inline-block; width:11px; height:11px; border-radius:2px;
  margin-right:7px; vertical-align:-1px;
}
.ch-legend .sw-line{height:3px; border-radius:2px; vertical-align:2px}

/* Barre discrète sous un pourcentage : l'œil compare des longueurs bien plus
   vite que des nombres, et le nombre reste là pour la précision. */
.mini-bar{
  display:block; height:3px; margin-top:5px; border-radius:2px;
  background:var(--line); overflow:hidden;
}
.mini-bar i{display:block; height:100%; background:var(--accent-2); border-radius:2px}
@media (max-width:720px){ .mini-bar{display:none} }
.ch-legend .sw-creux{
  background:transparent; border:1.6px solid currentColor; border-radius:50%;
  width:10px; height:10px; vertical-align:-1px;
}


/* =====================================================================
   Météo du réseau
   ---------------------------------------------------------------------
   Un écran de comparaison : le taux du client face à celui de tout le
   trafic. Le pictogramme donne l'impression d'ensemble en un coup d'oeil,
   le tableau donne le détail, les conseils disent quoi faire. Trois
   niveaux de lecture, du plus rapide au plus précis.
   ===================================================================== */

.btn.small{padding:5px 11px; font-size:12.5px; border-radius:8px}

/* ---------- bande de tête : vous, puis le réseau ----------
   Le fond est celui de la bande du tableau de bord (.hero) : les deux écrans
   ouvrent sur le même bleu profond, en thème clair comme en thème sombre.
   Un dégradé bâti sur var(--accent) virait au bleu pâle sur fond noir et
   éblouissait. */
.meteo-tete{margin-bottom:16px}
.meteo-tete-in{
  display:grid; grid-template-columns:1.4fr 1fr; align-items:center;
  gap:0; padding:24px 26px;
}
.meteo-tete-in > *{min-width:0}
.meteo-tete-ciel{display:flex; align-items:center; gap:18px}
.meteo-tete-cmp{
  padding-left:26px; border-left:1px solid rgba(255,255,255,.22);
}
.meteo-tete-k{
  font-size:11.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:rgba(255,255,255,.72); margin-bottom:4px;
}
.meteo-tete-v{
  font-size:38px; font-weight:700; letter-spacing:-.02em; line-height:1.05;
  font-variant-numeric:tabular-nums;
}
.meteo-tete-v2{
  font-size:28px; font-weight:600; letter-spacing:-.015em; line-height:1.1;
  color:rgba(255,255,255,.88); font-variant-numeric:tabular-nums;
}
.meteo-tete-s{
  margin-top:7px; font-size:13px; color:rgba(255,255,255,.78);
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.meteo-tete-s .pill{background:rgba(255,255,255,.16); color:#fff}
.meteo-delta{font-variant-numeric:tabular-nums; font-weight:600}
.meteo-tete .meteo-ico{flex:0 0 auto}

/* ---------- résumé d'une destination ---------- */
.meteo-bloc{margin-bottom:16px}
.meteo-resume{
  display:flex; align-items:center; gap:16px;
  padding:16px 20px; border-bottom:1px solid var(--line-soft);
  background:var(--surface-2);
}
.meteo-resume-txt{min-width:0}
.meteo-resume-k{font-size:13px; color:var(--ink-2); font-weight:500}
.meteo-resume-v{
  font-size:21px; font-weight:700; letter-spacing:-.015em; margin-top:2px;
  font-variant-numeric:tabular-nums;
}
.meteo-resume-s{font-size:12.5px; color:var(--ink-3); margin-top:3px}

/* Teintes d'état, réservées : jamais utilisées comme couleurs de série. */
.mto-ok{color:var(--ok)}
.mto-warn{color:var(--warn)}
.mto-bad{color:var(--bad)}
.mto-mute{color:var(--ink-3)}

/* La colonne réseau est un repère, pas une valeur du client : elle
   s'efface volontairement pour que l'oeil aille d'abord sur la sienne. */
.meteo-table .meteo-reseau{color:var(--ink-3); font-weight:500}

/* ---------- conseils ---------- */
.meteo-conseils{padding:14px 20px 16px; display:grid; gap:9px}
.meteo-conseil{
  margin:0; font-size:13.5px; line-height:1.55; color:var(--ink-2);
  display:flex; gap:10px; align-items:flex-start;
}
.meteo-puce{
  flex:0 0 auto; width:7px; height:7px; border-radius:50%; margin-top:7px;
  background:var(--ink-3);
}
.meteo-conseil.meteo-ok .meteo-puce{background:var(--ok)}
.meteo-conseil.meteo-warn .meteo-puce{background:var(--warn)}
.meteo-conseil.meteo-bad .meteo-puce{background:var(--bad)}
.meteo-conseil.meteo-bad{color:var(--ink)}

@media (max-width:820px){
  .meteo-tete-in{grid-template-columns:1fr; gap:20px; padding:20px}
  .meteo-tete-cmp{padding-left:0; border-left:none;
                  border-top:1px solid rgba(255,255,255,.22); padding-top:16px}
  .meteo-tete-v{font-size:32px}
  .meteo-resume{padding:14px 16px; gap:12px}
}


/* =====================================================================
   Santé du serveur
   ---------------------------------------------------------------------
   Un écran de supervision se lit debout, en trois secondes : d'abord le
   verdict, ensuite les chiffres, seulement après les courbes. D'où la
   bande de tête colorée par l'état, et non par la marque.
   ===================================================================== */

.sante-tete{
  position:relative; overflow:hidden; border-radius:20px;
  margin-bottom:16px; border:1px solid var(--line);
  background:var(--surface);
}
.sante-tete::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:5px;
  background:var(--ink-3);
}
.sante-tete.sante-ok::before  { background:var(--ok) }
.sante-tete.sante-warn::before{ background:var(--warn) }
.sante-tete.sante-bad::before { background:var(--bad) }

.sante-tete-in{
  display:grid; grid-template-columns:1.6fr 1fr; gap:22px;
  padding:20px 24px 20px 28px; align-items:start;
}
.sante-tete-in > *{min-width:0}
.sante-tete-k{
  font-size:11.5px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:5px;
}
.sante-tete-v{font-size:26px; font-weight:700; letter-spacing:-.02em; line-height:1.15}
.sante-ok   .sante-tete-v{color:var(--ok)}
.sante-warn .sante-tete-v{color:var(--warn)}
.sante-bad  .sante-tete-v{color:var(--bad)}

.sante-motifs{margin:10px 0 0; padding:0 0 0 18px; color:var(--ink-2); font-size:13.5px; line-height:1.6}
.sante-motifs li{margin:2px 0}

.sante-tete-meta{display:grid; gap:9px}
.sante-tete-meta > div{display:flex; justify-content:space-between; gap:14px; align-items:baseline}
.sante-tete-meta .k{font-size:12.5px; color:var(--ink-3)}
.sante-tete-meta .v{font-size:14px; font-weight:600; font-variant-numeric:tabular-nums}

/* ---------- tuiles de mesure ---------- */
.sante-tuiles{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
  gap:0; border-top:1px solid var(--line-soft);
}
.sante-tuiles > *{min-width:0}
.sante-tuile{
  padding:16px 20px 14px; border-right:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
}
.sante-tuile:last-child{border-right:none}
.sante-tuile .k{
  font-size:11.5px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-3);
}
.sante-tuile .v{
  font-size:25px; font-weight:700; letter-spacing:-.02em; margin-top:5px;
  font-variant-numeric:tabular-nums;
}
.sante-tuile .s{font-size:12.5px; color:var(--ink-3); margin-top:3px}
.sante-tuile .c{margin-top:8px; opacity:.85}

pre.code{
  background:var(--surface-2); border:1px solid var(--line); border-radius:9px;
  padding:12px 14px; font-size:12.5px; line-height:1.7; overflow-x:auto;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (max-width:820px){
  .sante-tete-in{grid-template-columns:1fr; gap:16px; padding:18px 18px 18px 22px}
  .sante-tuile{border-right:none}
}

/* Une passerelle hors service reste affichée, mais en retrait : ses
   chiffres informent, ils ne jugent pas. */
.sante-inactif td{opacity:.55}
.sante-reponse{font-size:11.5px; color:var(--ink-3); max-width:190px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sante-filtre{font-size:11.5px; color:var(--ink-3); border-bottom:1px dotted var(--line); cursor:help}