/* =============================================================================
   UNFAIR — Espace client, couche visuelle v2 (ÉBAUCHE LOCALE)

   Ce fichier ne remplace rien : il se pose PAR-DESSUS styles.css et redéfinit
   l'apparence de l'espace client. Le HTML et engine.js ne bougent pas d'une
   ligne — toutes les classes rendues par le moteur sont reprises ici à
   l'identique. C'est ce qui rend l'essai réversible : on retire le lien vers
   ce fichier, et l'ancien dashboard revient tel quel.

   Ce qu'on cherche : plus de contraste, des cartes qui existent vraiment,
   une typographie hiérarchisée, et du mouvement qui sert la lecture.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. JETONS
   La DA ne change pas (encre, bleu électrique, DM Serif / DM Sans).
   Ce qui change, c'est la RÉPARTITION : la page est blanche, la carte est
   bleu très clair. Une carte se signale par trois choses conjuguées —
   sa teinte, un liseré bleu, et une épaisseur discrète. Ni le
   trait seul (plat), ni l'ombre seule (mou) : les trois ensemble.
   --------------------------------------------------------------------------- */
:root{
  --ink:#0b0b12; --ink2:#3c3c4a; --grey-l:#a8aecb; --grey-ll:#c9d2ee;

  /* --- Contrastes mesurés, pas estimés ---------------------------------
     Ces valeurs ne sont pas choisies à l'œil : chaque couleur de texte a été
     mesurée contre le fond sur lequel elle apparaît RÉELLEMENT, et corrigée
     du minimum nécessaire pour atteindre 4,5:1 (WCAG AA, texte courant).

     Le gris est le cas le plus sournois : #7b7b8a passait sur du blanc pur
     (4,16:1 — déjà limite) mais échouait sur la carte teintée (3,76:1). En
     inversant fond et carte, on a assombri le fond du texte gris sans y
     penser. #6d6d7b repasse au-dessus sur les deux. */
  --grey:#636370;              /* 4,66:1 sur la carte, 5,92:1 sur le fond blanc */

  /* --- Le rapport fond / carte est INVERSÉ ------------------------------
     La page est blanche, les cartes sont bleu très clair. Ça change la façon dont un
     objet se détache : avant, une carte blanche ressortait par sa clarté sur
     un fond crème ; maintenant c'est la page qui est claire, et la carte se
     signale par sa teinte bleutée, son liseré et son épaisseur.
     Conséquence à garder en tête : ce qui était « en creux » doit être plus
     SOMBRE que la carte, plus question de le peindre en blanc. */
  --cream:#ffffff;      /* le fond de page           */
  --white:#dde4fa;      /* la surface des cartes     */
  --cream2:#ccd5f4;     /* les creux                 */
  --creux:#d0d9f6;      /* creux posé DANS une carte */
  --accent:#1a1aff; --accent-d:#0000cc; --accent-l:#ecedff;
  /* Rouge, ambre et vert servent DEUX fois : en aplat (barres, points, jauges)
     et en texte (étiquettes de gravité, scores). C'est l'usage texte qui
     commande, parce qu'il est le plus exigeant. Chacun est mesuré sur son
     PIRE fond — la carte pour les scores, le fond teinté pour les alertes.
     L'ambre a dû redescendre d'un cran en passant du crème au bleu : il
     tombait pile sur 4,50, c'est-à-dire sur la limite. */
  --red:#d52c2c;    /* 4,51:1 sur le fond rouge des alertes  */
  --amber:#9b5208;  /* 4,59:1 sur la carte, 5,52:1 sur alerte */
  --green:#0b7441;  /* 4,61:1 sur la carte                    */
  --red-l:#fef1f1; --green-l:#effcf4; --amber-l:#fff8ec; --blue-l:#eceeff; --purple-l:#f3f0ff;

  /* Élévation : trois niveaux, jamais plus. Au-delà, tout flotte et rien ne
     ressort. e1 = au repos, e2 = au survol, e3 = ce qui est au-dessus de tout. */
  --e1:0 1px 2px rgba(11,11,25,.05), 0 3px 10px -4px rgba(11,11,25,.08);
  --e2:0 2px 4px rgba(11,11,25,.04), 0 16px 32px -16px rgba(11,11,25,.24);
  --e3:0 40px 90px -40px rgba(11,11,25,.55);
  --glow:0 10px 26px -10px rgba(26,26,255,.5);
  --ring:inset 0 0 0 1px rgba(11,11,25,.06);
  --ring-a:inset 0 0 0 1px rgba(26,26,255,.35);

  --r-card:16px; --r-sm:11px; --r-btn:100px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --sidebar:250px;

  /* --- La colonne de navigation ---------------------------------------
     Le bleu UNFAIR tiré vers le mauve. Ce n'est pas une couleur de plus :
     c'est le même #1a1aff, chauffé de violet, pour que la colonne devienne
     un aplat de marque et non un simple fond sombre. */
  --nav:#3a2ee0;
  --nav-h:#6b4ff2;     /* le halo mauve, en haut de la colonne */

  /* --- Le liseré --------------------------------------------------------
     Chaque carte est cernée d'un trait bleu. C'est lui qui devient le premier
     signal — l'épaisseur passe au second plan. D'où la baisse du relief juste
     en dessous : un liseré franc ET une grosse tranche se disputeraient le
     contour, et la carte deviendrait lourde. */
  --liseret:rgba(26,26,255,.62);
  --liseret-f:rgba(26,26,255,1);

  /* --- Le relief, atténué ------------------------------------------------
     La grammaire ne change pas — arête haute éclairée, tranche, ombre au sol —
     mais chaque terme est réduit de moitié : la tranche tombe de 2+5 px à
     1+3 px, et l'ombre se resserre. Le volume reste lisible, il ne domine plus.
     L'ordre des ombres compte : le liseré est posé EN PREMIER, donc au-dessus
     de l'arête éclairée. S'il passait dessous, le blanc le mangerait. */
  --bord:#b3bfe8;      /* tranche, face avant  */
  --bord2:#c8d2f1;     /* tranche, retour      */
  --relief:
    inset 0 0 0 1px var(--liseret),
    inset 0 1px 0 rgba(255,255,255,.75),
    0 1px 0 var(--bord),
    0 3px 0 -1px var(--bord2),
    0 10px 18px -12px rgba(11,11,25,.22);
  --relief-h:
    inset 0 0 0 1px var(--liseret-f),
    inset 0 1px 0 rgba(255,255,255,.75),
    0 2px 0 var(--bord),
    0 5px 0 -1px var(--bord2),
    0 18px 28px -16px rgba(26,26,255,.3);
  /* Même chose, encore plus discret, pour les objets qu'on empile en listes :
     sinon la page entière se met à vibrer. */
  --relief-s:
    inset 0 0 0 1px var(--liseret),
    inset 0 1px 0 rgba(255,255,255,.7),
    0 1px 0 var(--bord2),
    0 6px 12px -10px rgba(11,11,25,.2);
  --relief-s-h:
    inset 0 0 0 1px var(--liseret-f),
    inset 0 1px 0 rgba(255,255,255,.7),
    0 2px 0 var(--bord),
    0 12px 20px -12px rgba(26,26,255,.26);

  /* La surface n'est pas un aplat : un dégradé très court suffit à faire
     croire à une face inclinée vers la lumière. */
  --face:linear-gradient(176deg,#e7ecfd 0%,#dde4fa 62%,#d4dcf8 100%);

  /* --- Les silhouettes -------------------------------------------------
     Trois motifs, pas davantage. Répétés dans un ordre fixe, ils donnent un
     RYTHME ; tirés au hasard, ils donneraient du désordre. Chacun garde deux
     coins vifs : c'est ce qui empêche la carte de devenir une pastille et
     garde la lecture du contenu alignée. */
  --f1:30px 10px 30px 10px;
  --f2:10px 30px 10px 30px;
  --f3:30px 30px 30px 8px;
}

/* Le fond n'est plus un aplat : deux halos très dilués donnent de la
   profondeur sans qu'on puisse les nommer. C'est le genre de détail qu'on ne
   voit pas mais qu'on sent.

   Ces halos doivent rester fixes pendant qu'on fait défiler la page. Plutôt
   que `background-attachment:fixed` sur le body — qui force un repeint de
   toute la page à chaque cran de molette — on pose un calque fixe derrière
   tout le reste. Même effet, sans faire travailler le navigateur. */
body{background:var(--cream);letter-spacing:-.005em;}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(900px 520px at 78% -8%, rgba(26,26,255,.045), transparent 62%),
    radial-gradient(700px 460px at 2% 100%, rgba(26,26,255,.028), transparent 60%);
}

/* Les chiffres se lisent en colonne : chasse fixe, sinon ça danse. */
b, strong, .stat-row b, .bm-v, .mb-v, .net-v, .gauge-score, .kb-head .cnt{font-variant-numeric:tabular-nums;}

/* ---------------------------------------------------------------------------
   2. TYPOGRAPHIE
   L'ancienne échelle tenait dans quatre pas et tout se ressemblait. On
   l'ouvre : les titres respirent, les libellés se resserrent, et l'œil sait
   où aller en entrant sur la page.
   --------------------------------------------------------------------------- */
.ptitle{
  font-family:'DM Serif Display',serif;font-style:italic;font-weight:400;
  font-size:clamp(30px,3.2vw,42px);line-height:1.08;letter-spacing:-.022em;
}
.psub{font-size:14px;line-height:1.6;color:var(--grey);margin-top:10px;max-width:70ch;}
.eyebrow{font-size:10px;letter-spacing:2.8px;font-weight:700;color:var(--accent);text-transform:uppercase;}

/* Un filet d'accent sous le titre de section : trois pixels qui structurent
   toute la page, repris de la présentation. */
.sec-div{margin:38px 0 16px;padding-bottom:0;border-bottom:none;position:relative;}
.sec-div::after{content:"";display:block;width:34px;height:3px;background:var(--accent);margin-top:12px;border-radius:2px;}
/* Le moteur se sert aussi de `.sec-div` comme simple séparateur, sans titre
   (page Concurrents). Un filet d'accent tout seul ne veut rien dire : dans ce
   cas on retombe sur une ligne discrète. */
.sec-div:empty::after{width:100%;height:1px;background:var(--grey-ll);margin-top:0;}
.sec-div h2{font-family:'DM Serif Display',serif;font-style:italic;font-size:23px;letter-spacing:-.02em;margin-top:2px;}
.sec-div .eyebrow{margin-bottom:4px;}

.card h3{font-size:9.5px;letter-spacing:1.8px;color:var(--grey);text-transform:uppercase;font-weight:700;margin-bottom:14px;}

/* ---------------------------------------------------------------------------
   3. MOUVEMENT
   Règle : le mouvement sert la lecture, il ne l'amuse pas. Chaque bloc entre
   une fois, dans l'ordre où on le lit. Rien ne bouge en boucle sauf le radar,
   qui est une métaphore assumée. Et tout se coupe si la machine demande le
   calme (prefers-reduced-motion) — un dashboard n'est pas un site vitrine.
   --------------------------------------------------------------------------- */
@keyframes rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
@keyframes growX{from{transform:scaleX(0);}to{transform:scaleX(1);}}
@keyframes sheen{from{transform:translateX(-120%);}to{transform:translateX(220%);}}

.page.active > *{animation:rise .5s var(--ease) both;}
.page.active > *:nth-child(1){animation-delay:.02s;}
.page.active > *:nth-child(2){animation-delay:.06s;}
.page.active > *:nth-child(3){animation-delay:.10s;}
.page.active > *:nth-child(4){animation-delay:.14s;}
.page.active > *:nth-child(5){animation-delay:.18s;}
.page.active > *:nth-child(n+6){animation-delay:.22s;}

/* Les jauges se remplissent : on voit la mesure se faire, au lieu de la
   trouver déjà posée. transform-origin à gauche, sinon elles poussent du
   centre et ça ne veut plus rien dire. */
.bm-f,.mb-f,.gauge-fill{transform-origin:left center;animation:growX .85s var(--ease) both .2s;}

@media (prefers-reduced-motion: reduce){
  .page.active > *,.bm-f,.mb-f,.gauge-fill{animation:none!important;}
  .radar-sweep{animation:none!important;}
  *{transition-duration:.01ms!important;}
}

/* ---------------------------------------------------------------------------
   4. COQUILLE — la colonne bleu-mauve
   Une colonne de couleur contre un fond crème pose un cadre : l'œil sait
   immédiatement ce qui est navigation et ce qui est contenu. En tout-blanc,
   les deux se confondaient.

   Chaque entrée est une BULLE BLANCHE à texte bleu. C'est un choix fort :
   posées sur l'aplat, les bulles flottent, et la colonne cesse d'être une
   liste pour devenir un objet. La difficulté est alors de distinguer l'entrée
   active, puisque tout est déjà blanc — on ne le fait donc pas par la couleur
   mais par le RELIEF : l'entrée courante est plus opaque, posée plus haut,
   avec sa tranche et son ombre. Les autres sont plaquées contre le fond.
   --------------------------------------------------------------------------- */
.shell{grid-template-columns:var(--sidebar) 1fr;}
.side{
  background:var(--nav);border-right:none;
  background-image:
    radial-gradient(460px 340px at 50% -6%, var(--nav-h), transparent 68%),
    linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(0,0,0,.14) 100%);
  box-shadow:8px 0 40px -26px rgba(26,20,120,.85);
}
.side-top{height:3px;background:linear-gradient(90deg,#8f77ff,#c9bcff 55%,#8f77ff);}
.side-logo{padding:22px 22px 20px;border-bottom:1px solid rgba(255,255,255,.16);}
.side-logo .lg{font-size:24px;color:#fff;letter-spacing:-.02em;}
/* Ces deux libellés étaient du blanc à 72 % et 55 % d'opacité — le réflexe
   habituel pour « mettre en retrait ». Mesuré sur le haut de la colonne, là où
   le halo mauve est le plus clair, ça donnait 3,49:1 et 2,66:1 : sous le seuil,
   et c'est du texte de 8,5 px. La mise en retrait passe donc par la TAILLE et
   l'interlettrage, pas par l'opacité. À 92 % on repasse au-dessus de 4,5:1. */
.side-logo .tag{font-size:8.5px;color:rgba(255,255,255,.92);letter-spacing:1.6px;margin-top:5px;}
.nav-list{padding:16px 14px;}
.nav-grp{color:rgba(255,255,255,.92);font-size:8.5px;letter-spacing:1.8px;padding:15px 6px 8px;}

/* La bulle. Au repos elle est légèrement translucide : le bleu de la colonne
   la traverse, elle recule. */
.nav-i{
  position:relative;
  background:rgba(255,255,255,.82);
  color:var(--accent);
  font-size:13px;font-weight:700;
  padding:10px 14px;margin-bottom:6px;
  border-radius:var(--f1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 2px 0 rgba(26,20,120,.22);
  transition:background .16s var(--ease), color .16s var(--ease),
             transform .18s var(--ease), box-shadow .22s var(--ease);
}
/* Une seule et même silhouette pour toute la colonne. J'avais fait alterner
   les motifs ; la navigation n'y gagnait rien. C'est une liste qu'on parcourt
   de haut en bas, et la répétition y vaut mieux que la variation — c'est la
   régularité qui fait qu'on repère l'entrée active du premier coup d'œil. */

.nav-i:hover{
  background:#fff;transform:translateX(3px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 3px 0 rgba(26,20,120,.26), 0 10px 18px -10px rgba(10,6,70,.6);
}

/* L'entrée courante : blanc franc, tranche marquée, ombre portée. Elle sort
   de la colonne — c'est la seule qui a du volume. */
.nav-i.active{
  background:#fff;color:var(--accent);
  transform:translateX(4px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 4px 0 rgba(26,20,120,.3),
    0 14px 24px -12px rgba(10,6,70,.75);
}
/* Le repère à gauche, dans le creux laissé par le décalage. */
.nav-i.active::before{
  content:"";position:absolute;left:-14px;top:12px;bottom:12px;width:4px;
  border-radius:0 4px 4px 0;background:#fff;
  box-shadow:0 0 14px rgba(255,255,255,.85);
}
.nav-i .ic{font-size:14px;opacity:.9;}
.nav-i.active .ic{opacity:1;}
/* Sur fond blanc, la pastille de compteur garde son rouge mais gagne un
   contour clair : sans lui elle se collait au bord de la bulle. */
.nav-i .badge{background:var(--red);color:#fff;box-shadow:0 0 0 2px #fff, 0 2px 6px -2px rgba(217,45,45,.9);font-size:9.5px;padding:2px 8px;}

.side-foot{border-top:1px solid rgba(255,255,255,.16);padding:16px 18px;}
.client-av{background:#fff;color:var(--accent);width:38px;height:38px;border-radius:var(--f2);font-size:17px;box-shadow:0 3px 0 rgba(26,20,120,.28), 0 10px 18px -10px rgba(10,6,70,.7);}
.client-n{color:#fff;font-size:12.5px;}
.client-p{color:rgba(255,255,255,.75);font-size:10px;letter-spacing:.4px;}

/* --- barre du haut : verre dépoli, elle flotte au-dessus du contenu --- */
.topbar{
  background:rgba(255,255,255,.78);backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid rgba(11,11,25,.07);padding:13px 44px;
}
.crumb{font-size:12px;letter-spacing:.2px;}
.crumb b{font-family:'DM Serif Display',serif;font-style:italic;font-weight:400;font-size:15px;}
.tb-bell{border:none;background:var(--face);border-radius:var(--f2);box-shadow:var(--relief-s);
  transition:transform .15s var(--ease),box-shadow .2s var(--ease);}
.tb-bell:hover{transform:translateY(-2px);box-shadow:var(--relief-s-h);}
.logout{background:var(--face);border:none;box-shadow:var(--relief-s);transition:color .16s var(--ease),transform .16s var(--ease),box-shadow .16s var(--ease);}
.logout:hover{color:var(--accent);transform:translateY(-2px);box-shadow:var(--relief-s-h);}
.logout:active{transform:translateY(1px);box-shadow:var(--relief-s);}
.imp-banner{background:var(--nav);padding:10px 44px;box-shadow:inset 0 -2px 0 rgba(0,0,0,.2);}
.imp-banner b{color:#d6ccff;}

.page{padding:38px 44px 80px;}

/* ---------------------------------------------------------------------------
   5. CARTES — volume et silhouettes
   Le cœur de la demande. Une carte n'est plus un rectangle posé à plat : elle
   a une face légèrement inclinée vers la lumière, une tranche en dessous, une
   ombre au sol — et une silhouette qui n'est pas toujours la même.

   Deux gardes-fous que je me suis donnés, parce qu'on parle d'un tableau de
   bord et pas d'une affiche :
     · deux coins vifs par carte au minimum. Une carte entièrement arrondie
       devient une pastille, et le texte à l'intérieur perd son alignement ;
     · trois motifs seulement, répétés dans un ordre fixe. La variété vient du
       rythme, pas de l'accumulation.
   --------------------------------------------------------------------------- */
.card{
  background:var(--face);border:none;padding:24px;
  border-radius:var(--f1);
  box-shadow:var(--relief);
  transition:box-shadow .28s var(--ease),transform .28s var(--ease),border-radius .28s var(--ease);
}
.card:hover{box-shadow:var(--relief-h);transform:translateY(-4px);}
.card.tight{padding:19px 21px;}

/* L'alternance des silhouettes. `.analytics` et `.dash-rail` alignent leurs
   cartes côte à côte : on les fait se répondre au lieu de se répéter. */
.analytics > .card:nth-child(odd),
.dash-rail .card:nth-child(odd){border-radius:var(--f1);}
.analytics > .card:nth-child(even),
.dash-rail .card:nth-child(even){border-radius:var(--f2);}
.an-side > .card:nth-child(2){border-radius:var(--f3);}

/* La carte de tête du rail porte un filet d'accent : c'est l'information la
   plus regardée de la page (la prochaine veille), elle a droit à un signal.
   Le filet épouse la silhouette — d'où le `overflow:hidden`. */
.dash-rail .card:first-child{position:relative;overflow:hidden;}
.dash-rail .card:first-child::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--accent),var(--nav-h));}

/* `1fr` ne veut PAS dire « ce qui reste » : une piste `1fr` refuse de passer
   sous la largeur minimale de son contenu. Le radar et les tableaux imposent
   ici un minimum large, la grille devenait donc plus large que la page — et
   `.main{overflow-x:hidden}` coupait le rail de droite au lieu de le montrer.
   `minmax(0,1fr)` lève ce plancher : la piste peut enfin rétrécir.
   (Le défaut existe déjà sur le dashboard actuel, entre 860 et ~1150 px.) */
.dash-grid{grid-template-columns:minmax(0,1fr) 340px;gap:30px;}
.analytics{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:16px;}
.dash-grid > *{min-width:0;}
.dash-rail{top:88px;gap:16px;}
.col2{gap:14px;}
.col2 > *,.grid-2 > *,.analytics > *{min-width:0;}

/* Et même corrigée, la mise en deux colonnes n'a plus de sens en dessous de
   ~1150 px : le rail y écrase le contenu. On empile plus tôt. */
@media(max-width:1150px){
  .dash-grid{grid-template-columns:1fr;gap:24px;}
  .dash-rail{position:static;}
  .analytics{grid-template-columns:1fr;}
}

.stat-row{padding:13px 0;border-top:1px solid var(--grey-ll);font-size:13px;}
.stat-row b{font-size:21px;letter-spacing:-.02em;}

/* Les pastilles d'icône suivent la même grammaire : arête éclairée + tranche.
   Deux silhouettes différentes pour les deux types de veille — la forme aide
   à les distinguer avant même de lire l'étiquette. */
.next-ic{width:54px;height:54px;font-size:22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(11,11,25,.06), 0 3px 0 rgba(11,11,25,.07);}
.next-ic.w{background:var(--blue-l);border-radius:var(--f1);}
.next-ic.m{background:var(--purple-l);border-radius:var(--f2);}
.next-date{font-size:19px;letter-spacing:-.02em;}
.next-lbl{font-size:9.5px;letter-spacing:1.4px;}
.rail-next{padding:14px 0;gap:13px;}

/* ---------------------------------------------------------------------------
   6. ALERTES
   Elles étaient des rectangles pastel. Elles deviennent des cartes à part
   entière, avec une barre de couleur pleine à gauche et un survol qui les
   avance — le client doit sentir qu'il y a quelque chose à lire là.
   --------------------------------------------------------------------------- */
/* Ici la variation de forme s'arrête au bord DROIT, et le bord gauche reste
   vif dans tous les cas. La barre de gravité est ce qu'on scanne en premier
   pour trier l'urgent du reste : elle doit se trouver toujours au même endroit,
   toujours nette. Une forme peut jouer, un repère de lecture non. */
.alert-row{
  border:none;padding:16px 19px;margin-bottom:11px;gap:14px;
  border-radius:8px 30px 30px 8px;
  box-shadow:var(--relief-s);position:relative;overflow:hidden;
  transition:transform .2s var(--ease),box-shadow .24s var(--ease);
}
.alert-row:nth-child(even){border-radius:8px 8px 30px 8px;}
.alert-row:nth-child(3n){border-radius:8px 30px 8px 8px;}
.alert-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;}
.alert-row:hover{transform:translateX(3px);box-shadow:var(--relief-s-h);}

/* Seule exception au liseré bleu, et c'est volontaire : ici le liseré prend la
   couleur de la gravité. Cerner une alerte rouge de bleu reviendrait à mettre
   deux codes couleur en concurrence sur le même objet — et c'est la gravité
   qu'on doit lire en premier. Dis-moi si tu préfères le bleu partout. */
.alert-row.r{background:var(--red-l);   box-shadow:inset 0 0 0 1px rgba(217,45,45,.4),  inset 0 1px 0 rgba(255,255,255,.7), 0 1px 0 var(--bord2), 0 6px 12px -10px rgba(11,11,25,.2);}
.alert-row.a{background:var(--amber-l); box-shadow:inset 0 0 0 1px rgba(194,104,10,.4), inset 0 1px 0 rgba(255,255,255,.7), 0 1px 0 var(--bord2), 0 6px 12px -10px rgba(11,11,25,.2);}
.alert-row.b{background:var(--blue-l);  box-shadow:inset 0 0 0 1px var(--liseret),      inset 0 1px 0 rgba(255,255,255,.7), 0 1px 0 var(--bord2), 0 6px 12px -10px rgba(11,11,25,.2);}
.alert-row.r::before{background:var(--red);}
.alert-row.a::before{background:var(--amber);}
.alert-row.b::before{background:var(--accent);}
/* L'étiquette se cale en haut : sur mobile le texte passe à trois lignes et
   une étiquette centrée se retrouvait au milieu de nulle part. */
.alert-row{align-items:flex-start;}
.al-tag{font-size:9.5px;letter-spacing:1.2px;padding-left:6px;padding-top:2px;}
.al-body{font-size:13px;line-height:1.55;}

/* ---------------------------------------------------------------------------
   7. LIGNES CLIQUABLES (rapports, mouvements, actions)
   --------------------------------------------------------------------------- */
.rep-row,.move-row,.act-row,.arch-row,.onglet{
  background:var(--face);border:none;border-radius:var(--f1);
  box-shadow:var(--relief-s);
  transition:transform .2s var(--ease),box-shadow .24s var(--ease),border-radius .24s var(--ease);
}
/* Le motif alterne le long de la liste : deux voisines n'ont jamais la même
   découpe, et l'œil suit la suite au lieu de glisser dessus. */
.rep-row:nth-child(even),.move-row:nth-child(even),
.act-row:nth-child(even),.arch-row:nth-child(even){border-radius:var(--f2);}
.rep-row:nth-child(3n),.move-row:nth-child(3n),.act-row:nth-child(3n){border-radius:var(--f3);}

.rep-row{padding:16px 19px;gap:15px;margin-bottom:10px;}
.rep-row:hover{transform:translateY(-3px);box-shadow:var(--relief-s-h);}
.rep-ic{width:44px;height:44px;border-radius:var(--f2);background:var(--creux);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(11,11,25,.06), 0 2px 0 var(--bord2);font-size:17px;}
.rep-row:nth-child(even) .rep-ic{border-radius:var(--f1);}
.rep-t{font-size:13.5px;}
.rep-arrow{transition:transform .18s var(--ease);}
.rep-row:hover .rep-arrow{transform:translateX(4px);color:var(--accent);}
.b-new{background:var(--accent);box-shadow:0 2px 0 rgba(0,0,90,.35), var(--glow);}

.move-row{padding:16px 18px;gap:15px;margin-bottom:11px;}
.move-row:hover{transform:translateX(4px);box-shadow:var(--relief-s-h);}
.move-rank{font-size:20px;}
.move-t{font-size:13.5px;}
.move-d{font-size:12px;line-height:1.55;}

.act-row{padding:17px 19px;margin-bottom:10px;}
.act-check{border-radius:9px 3px 9px 3px;transition:background .16s var(--ease),border-color .16s var(--ease),transform .16s var(--ease),box-shadow .16s var(--ease);}
.act-check:hover{border-color:var(--accent);transform:scale(1.08);}
.act-check.on{box-shadow:0 2px 0 #0b7a45, 0 8px 14px -6px rgba(15,157,88,.7);}

/* Le bouton « voir plus » est le seul élément que l'on ENFONCE au clic plutôt
   que de le soulever : sa tranche disparaît et il descend. C'est ce qui le
   fait sentir comme un bouton physique et pas comme une carte cliquable. */
.see-more{
  border:none;background:var(--face);box-shadow:var(--relief-s);
  border-radius:var(--f3);padding:14px 18px;margin-top:10px;font-size:13px;
  transition:background .18s var(--ease),color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease);
}
.see-more:hover{background:var(--accent);color:#fff;transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 4px 0 #0000aa, 0 18px 30px -14px rgba(26,26,255,.8);}
.see-more:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 0 0 #0000aa, 0 8px 14px -10px rgba(26,26,255,.8);}

/* ---------------------------------------------------------------------------
   8. GRAPHIQUES
   --------------------------------------------------------------------------- */
/* La grille est déclarée plus haut, avant la requête média qui la replie.
   La redéclarer ici la rendrait impossible à reprendre sur petit écran. */
.radar-svg{max-width:400px;}
.donut-svg{width:126px;height:126px;}
.chart-legend{font-size:12.5px;}
.chart-legend i{border-radius:4px;width:11px;height:11px;}
/* Les pistes sont des rainures creusées dans la page, les remplissages des
   tubes posés dedans : ombre interne pour le creux, arête claire sur le tube. */
.bm-t,.mb-t,.gauge-track{background:#c3cdf0;border-radius:100px;height:11px;
  box-shadow:inset 0 2px 3px rgba(11,11,25,.16), inset 0 -1px 0 rgba(255,255,255,.8);}
.bm-f,.mb-f,.gauge-fill{border-radius:100px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 3px rgba(0,0,0,.18);}
.bm-l.me{color:var(--accent);}
.bm-v,.mb-v{font-size:11.5px;}
.gauge-score{font-size:12px;}
.gauge-lbl{font-size:8.5px;letter-spacing:1.4px;}

/* ---------------------------------------------------------------------------
   9. VEILLE CONCURRENTIELLE — cartes concurrent
   --------------------------------------------------------------------------- */
.cmp-card,.crc{
  background:var(--face);border:none;margin-bottom:15px;
  border-radius:var(--f1);
  box-shadow:var(--relief);
  transition:box-shadow .28s var(--ease),transform .28s var(--ease),border-radius .28s var(--ease);
}
/* Les fiches concurrent vont par deux en grille : on fait se répondre les
   silhouettes d'une ligne à l'autre, en miroir. */
.crc:nth-child(even),.cmp-card:nth-child(even){border-radius:var(--f2);}
.crc:nth-child(4n+3),.cmp-card:nth-child(4n+3){border-radius:var(--f3);}
.cmp-card:hover,.crc:hover{box-shadow:var(--relief-h);transform:translateY(-4px);}
/* L'en-tête est en creux, pas en relief : elle est ENFONCÉE dans la carte.
   C'est ce contraste creux/bombé qui fait lire l'épaisseur de l'objet. */
.cmp-h,.crh{
  background:linear-gradient(180deg,#cdd6f4 0%,#e2e8fc 100%);
  border-bottom:1px solid var(--grey-ll);padding:17px 21px;
  box-shadow:inset 0 2px 4px -2px rgba(11,11,25,.14);
}
.cmp-n,.crt{font-size:18.5px;letter-spacing:-.02em;}
.net-tbl{padding:6px 20px 14px;}
.net-row{padding:11px 0;font-size:13px;}
.net-row.net-hd{font-size:9px;letter-spacing:1.4px;}
.net-v{font-size:13.5px;}
/* Les pastilles d'état (menace, activité, écart) étaient des textes colorés
   sur des fonds quasi blancs : on les lisait à peine. On les cercle d'un filet
   de leur propre couleur — elles redeviennent des objets, pas des mots. */
.dlt{font-size:9.5px;padding:3px 9px;letter-spacing:.3px;}
.dlt.up{box-shadow:inset 0 0 0 1px rgba(194,104,10,.28);}
.dlt.dn{box-shadow:inset 0 0 0 1px rgba(15,157,88,.28);}
.bp{font-size:9.5px;padding:4px 11px;letter-spacing:.4px;}
.bp-red{box-shadow:inset 0 0 0 1px rgba(217,45,45,.3);}
.bp-amber{box-shadow:inset 0 0 0 1px rgba(194,104,10,.3);}
.bp-green{box-shadow:inset 0 0 0 1px rgba(15,157,88,.3);}
.bp-blue{box-shadow:inset 0 0 0 1px rgba(26,26,255,.28);}
.ads-s.on{box-shadow:inset 0 0 0 1px rgba(217,45,45,.3);}
/* ---------------------------------------------------------------------------
   9 bis. LA FICHE CONCURRENT, REPRISE

   Le défaut n'était pas décoratif. La fiche disait tout à voix égale : le nom,
   la description, les quatre liens et le score de menace avaient le même poids
   visuel. Or le score EST le verdict — c'est la première chose qu'on cherche
   en arrivant sur cette page — et c'était l'élément le plus petit de la carte.

   Trois corrections, dans cet ordre d'importance :

     1. Le SCORE devient un bandeau en pied de fiche, en creux, avec un grand
        chiffre. Posé en `margin-top:auto`, il s'aligne d'une carte à l'autre :
        on compare quatre concurrents d'un seul regard horizontal, ce qui était
        impossible quand le bandeau flottait à des hauteurs différentes.
     2. L'EN-TÊTE cesse de se disputer la largeur. Les pastilles passaient à la
        verticale en comprimant la description sur trois lignes ; elles ont
        maintenant leur propre ligne, côte à côte.
     3. Les LIENS passent en deux colonnes. En une seule, la carte n'était
        qu'une liste étroite avec du vide à droite.
   --------------------------------------------------------------------------- */

/* Les cartes d'une même rangée prennent la même hauteur — sans quoi les
   bandeaux de score ne s'alignent pas, et la comparaison tombe à l'eau. */
.col2{align-items:stretch;}
.crc{display:flex;flex-direction:column;}

.crh{flex-wrap:wrap;row-gap:11px;align-items:flex-start;padding:17px 21px 14px;}
.crh > div:first-child{flex:1 1 100%;min-width:0;}
.cr-badges{flex:1 0 100%;display:flex;gap:6px;flex-wrap:wrap;}
.crst{font-size:11.5px;margin-top:4px;line-height:1.45;}

.crb{flex:1;display:flex;flex-direction:column;padding:0;gap:0;}
.crb .links{
  flex:1;min-width:0;padding:15px 21px 17px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  gap:9px 18px;align-content:start;
}
.crb .lk{margin:0;font-size:12px;align-items:center;gap:8px;}
/* L'icône prend l'accent, en retrait : elle situe la ligne sans voler la
   lecture au chiffre qui suit. */
.crb .lk i{font-size:14px;color:var(--accent);opacity:.7;flex-shrink:0;}

.crb .gauge{
  width:auto;margin-top:auto;padding:14px 21px 16px;
  background:var(--creux);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75), inset 0 3px 6px -4px rgba(11,11,25,.28);
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-areas:"lbl score" "track track";
  align-items:center;column-gap:14px;row-gap:10px;
}
.crb .gauge-lbl{grid-area:lbl;margin:0;}
.crb .gauge-score{
  grid-area:score;
  font-family:'DM Serif Display',serif;font-style:italic;font-weight:400;
  font-size:27px;line-height:1;letter-spacing:-.02em;
}
.crb .gauge-track{grid-area:track;margin:0;height:9px;}
.ads-row{padding:13px 0;}
.ads-s{padding:4px 12px;}
.mv-who{font-size:10px;letter-spacing:1.4px;}

/* ---------------------------------------------------------------------------
   10. KANBAN
   --------------------------------------------------------------------------- */
.kanban{gap:16px;margin-top:22px;}
/* Les colonnes doivent se voir comme des zones de dépôt, même vides : fond
   plus soutenu que le crème de la page, et une hauteur minimale qui tient la
   grille quand une colonne se vide. */
/* Les colonnes sont CREUSES — des bacs. Les cartes, elles, sont bombées. Une
   carte posée dans un creux se voit beaucoup mieux qu'une carte posée sur un
   plat, et le geste de glisser-déposer devient évident. */
.kb-col{
  background:#cdd6f4;border-radius:var(--f3);padding:15px 15px 8px;min-height:190px;
  box-shadow:inset 0 2px 5px rgba(11,11,25,.13), inset 0 0 0 1px rgba(11,11,25,.05), 0 1px 0 #fff;
}
.kb-col:nth-child(2){border-radius:var(--f1);}
.kb-col:nth-child(3){border-radius:var(--f2);}
.kb-col.over{background:var(--accent-l);box-shadow:inset 0 0 0 2px var(--accent), inset 0 2px 6px rgba(26,26,255,.18);}
.kb-head{font-size:10px;letter-spacing:1.4px;padding:3px 7px 12px;}
.kb-dot{width:9px;height:9px;box-shadow:0 0 0 3px rgba(11,11,25,.06), inset 0 -1px 1px rgba(0,0,0,.25);}
.kb-card{
  background:var(--face);border:none;border-radius:var(--f1);padding:15px 16px;margin-bottom:12px;
  box-shadow:var(--relief-s);
  transition:transform .18s var(--ease),box-shadow .24s var(--ease),border-radius .24s var(--ease);
}
.kb-card:nth-child(even){border-radius:var(--f2);}
.kb-card:nth-child(3n){border-radius:var(--f3);}
.kb-card:hover{transform:translateY(-4px) rotate(-.4deg);box-shadow:var(--relief-s-h);}
/* Pendant le glissement la carte se décolle franchement : elle est « en main ». */
.kb-card.dragging{opacity:.5;transform:rotate(2deg) scale(.97);box-shadow:0 30px 40px -20px rgba(11,11,25,.6);}
.kb-t{font-size:13px;}
.kb-src{font-size:9.5px;padding:3px 10px;}
.arch-btn{background:var(--face);border:none;border-radius:var(--f1);box-shadow:var(--relief-s);transition:color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease);}
.arch-btn:hover{color:var(--accent);transform:translateY(-2px);box-shadow:var(--relief-s-h);}
.arch-btn:active{transform:translateY(1px);box-shadow:var(--relief-s);}

/* ---------------------------------------------------------------------------
   11. DIVERS — segments, fiche, bloc présentation, vide, modale
   --------------------------------------------------------------------------- */
/* Même logique que les colonnes du kanban : la piste est creuse, la pastille
   active est bombée. Le segment se lit alors comme un interrupteur physique. */
.seg{background:#cdd6f4;border-radius:var(--f1);padding:5px;margin-bottom:18px;
  box-shadow:inset 0 2px 4px rgba(11,11,25,.14), 0 1px 0 #fff;}
.seg-i{padding:7px 17px;border-radius:14px 6px 14px 6px;font-size:11.5px;transition:background .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease);}
.seg-i.active{background:var(--face);color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 2px 0 var(--bord), 0 6px 10px -6px rgba(11,11,25,.4);}

.fiche-row{padding:12px 0;font-size:13px;}
.tagpill{background:var(--face);border:none;padding:5px 14px;font-size:11.5px;border-radius:14px 5px 14px 5px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(11,11,25,.06), 0 2px 0 var(--bord2);}
.tagpill:nth-child(even){border-radius:5px 14px 5px 14px;}

/* Le bloc présentation : c'est l'objet le plus « produit » de l'espace, il a
   droit au traitement complet — encre, halo bleu, et un reflet qui balaie le
   bouton au survol. */
.canva{
  border-radius:var(--f3);padding:32px;
  background:var(--ink);
  background-image:radial-gradient(560px 280px at 88% -30%, var(--nav-h), transparent 66%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 4px 0 #050510, 0 28px 50px -22px rgba(11,11,25,.75);
  position:relative;overflow:hidden;
}
.canva .ct{font-size:20px;letter-spacing:-.02em;}
.canva .cbtn{border-radius:var(--f1);padding:14px 26px;font-size:12.5px;position:relative;overflow:hidden;
  box-shadow:0 3px 0 #a9aed0;transition:transform .16s var(--ease),box-shadow .16s var(--ease);}
.canva .cbtn:hover{transform:translateY(-2px);box-shadow:0 5px 0 #a9aed0;}
.canva .cbtn:active{transform:translateY(2px);box-shadow:0 0 0 #a9aed0;}
.canva .cbtn::after{content:"";position:absolute;inset:0;width:40%;background:linear-gradient(90deg,transparent,rgba(26,26,255,.16),transparent);transform:translateX(-120%);}
.canva .cbtn:hover::after{animation:sheen .7s var(--ease);}

.onglet{padding:15px 17px;}
.onglet .oc{background:var(--creux);box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(11,11,25,.06), 0 2px 0 var(--bord2);border-radius:var(--f2);width:34px;height:34px;}

/* L'état vide est le seul endroit où je m'autorise une forme franchement
   libre : il n'y a pas de données à aligner dedans, donc rien à casser. */
.empty{
  background:var(--face);border:1px dashed var(--grey-l);
  border-radius:52px 14px 52px 14px;
  padding:64px 34px;box-shadow:var(--relief-s);
}
.empty .ei{font-size:38px;}
.empty h3{font-size:24px;letter-spacing:-.02em;}

.overlay{background:rgba(11,11,18,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.overlay.open .modal{animation:rise .35s var(--ease) both;}
/* La modale garde une silhouette calme : on y lit un rapport entier, ce n'est
   pas le moment de jouer avec les coins. Elle gagne juste son épaisseur. */
.modal{border-radius:28px 28px 28px 10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 5px 0 rgba(11,11,25,.18), var(--e3);}
.modal-head{padding:20px 26px;}
.modal-head .mt{font-size:22px;letter-spacing:-.02em;}
.modal-x{transition:border-color .16s var(--ease),color .16s var(--ease),transform .16s var(--ease);}
.modal-x:hover{border-color:var(--accent);color:var(--accent);transform:rotate(90deg);}
.notif{border:none;box-shadow:var(--ring),var(--e3);border-radius:14px;animation:rise .25s var(--ease) both;}

/* ---------------------------------------------------------------------------
   12. FOCUS CLAVIER
   Il n'existait AUCUN style de focus dans l'espace client — ni dans
   dashboard.html, ni dans styles.css. On héritait donc du contour par défaut
   du navigateur, qui est fin, gris, et invisible sur une carte crème.

   `:focus-visible` et non `:focus` : le contour n'apparaît qu'au clavier, et
   ne vient pas cerner un bouton qu'on vient simplement de cliquer.

   Le contour est posé à l'EXTÉRIEUR (`outline-offset`) pour ne pas se
   confondre avec le liseré bleu de la carte, qui est intérieur et plus pâle :
   deux traits bleus superposés ne se distingueraient pas. D'où le halo blanc
   intercalé, qui détache le contour de la carte quelle que soit sa teinte.
   --------------------------------------------------------------------------- */
:where(a, button, [tabindex], input, select, textarea):focus-visible{
  outline:3px solid var(--accent);
  outline-offset:2px;
  /* Pas de `border-radius` ici : le contour épouse déjà la silhouette de
     l'élément, et lui en imposer une autre le déformerait au moment même où
     on le désigne. */
}
/* Sur la colonne bleue, un contour bleu serait invisible : on l'inverse. */
.side :where(a, button, [tabindex]):focus-visible{
  outline-color:#fff;
  box-shadow:0 0 0 3px rgba(26,20,120,.6);
}

/* ---------------------------------------------------------------------------
   13. CIBLES TACTILES
   Mesuré sur la maquette : entrées de menu 222×38, cloche 34×34, bouton de
   menu 34×34, déconnexion 110×32 — toutes sous les 44×44 px recommandés au
   doigt. À la souris ces tailles sont confortables ; au doigt elles produisent
   des ratés, et la déconnexion ratée est particulièrement pénible.

   La condition porte sur `pointer:coarse`, pas sur la largeur : c'est le mode
   de pointage qui compte, pas la taille de l'écran. Une tablette large se
   pilote au doigt, un petit portable à la souris.
   --------------------------------------------------------------------------- */
@media (pointer: coarse){
  .nav-i{min-height:44px;padding-top:12px;padding-bottom:12px;}
  .menu-btn,.tb-bell,.modal-x{width:44px;height:44px;}
  .logout{min-height:44px;padding-top:12px;padding-bottom:12px;}
  .seg-i{min-height:44px;display:inline-flex;align-items:center;}
  /* La coche d'action reste petite visuellement — l'agrandir déséquilibrerait
     la ligne — mais sa zone cliquable est étendue par un pseudo-élément. Le
     doigt vise 44 px, l'œil voit 22 px. */
  .act-check{position:relative;}
  .act-check::after{content:"";position:absolute;top:50%;left:50%;
    width:44px;height:44px;transform:translate(-50%,-50%);}
  .kb-move{min-height:36px;padding:8px 12px;}
}

/* ---------------------------------------------------------------------------
   14. MOBILE
   La colonne sombre devient un tiroir. Le reste suit la grille d'origine.
   --------------------------------------------------------------------------- */
@media(max-width:860px){
  .shell{grid-template-columns:1fr;}
  .side{width:var(--sidebar);left:calc(-1 * var(--sidebar) - 12px);box-shadow:var(--e3);}
  .side.open{left:0;}
  .page{padding:26px 20px 70px;}
  .topbar{padding:11px 20px;}
  .imp-banner{padding:10px 20px;}
  .dash-grid{grid-template-columns:1fr;gap:22px;}
  .ptitle{font-size:30px;}
}