/* POLICES AUTOHEBERGEES (03/09). Deux raisons, aucune n'est de la
   performance :
   1. theme.css est injecte en FIN DE BODY (app.py:298) : un @import
      vers Google y garantit un flash de police a chaque chargement.
   2. Charger depuis fonts.gstatic.com envoie l'IP de chaque visiteur
      a Google a chaque page - ce qui contredit le principe du README,
      "tout calcule sur place, pas de service tiers pour les donnees".
   150 ko au total (latin + latin-ext, les diacritiques des noms
   d'entreprises belges). font-display:swap : le texte s'affiche tout
   de suite dans la pile de secours, puis bascule une seule fois. */
@font-face{font-family:'IBM Plex Mono';font-style:normal;
  font-weight:400;font-display:swap;
  src:url('/static/polices/plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;
  font-weight:400;font-display:swap;
  src:url('/static/polices/plex-mono-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;
  font-weight:500;font-display:swap;
  src:url('/static/polices/plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;
  font-weight:500;font-display:swap;
  src:url('/static/polices/plex-mono-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;
  font-weight:600;font-display:swap;
  src:url('/static/polices/plex-mono-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;
  font-weight:600;font-display:swap;
  src:url('/static/polices/plex-mono-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

@font-face{font-family:'Schibsted Grotesk';font-style:normal;
  font-weight:400 700;font-display:swap;
  src:url('/static/polices/schibsted-variable-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;
  font-weight:400 700;font-display:swap;
  src:url('/static/polices/schibsted-variable-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* BE SIGNAL - le theme, en un seul endroit.

   POURQUOI CE FICHIER. L'audit du 30/08 a compte 141 couleurs hex
   distinctes dans le front : 4 bleus primaires, 2 verts de succes,
   13 gris de texte secondaire - parce que chaque page portait son
   style en dur. Ce fichier est le SEUL proprietaire du theme. Il est
   charge sur toutes les pages ; tout NOUVEAU style utilise var(--...).

   PALETTE : DESIGN.md, passe design du 03/09. Le principe non
   negociable : l'ACCENT (--accent, le vert-petrole, l'identite) est
   SEPARE du SEMANTIQUE (--good / --mid / --bad, le sens). Le
   vert-petrole ne dit jamais "bon" ; le vert semantique n'est jamais
   un decor. L'echelle de la note appartient au semantique.

   LES VALEURS NE SONT PAS DECORATIVES - contraste WCAG AA verifie
   (4,5:1 pour le texte, 3:1 pour les libelles). La palette CLAIRE de
   DESIGN.md echouait a huit endroits ; cinq jetons de TEXTE ont ete
   assombris au minimum, teinte et saturation inchangees, et mesures :
     --muted     #6E7C77 -> #5B6662  (4,05 -> 5,54:1 sur le fond)
     --faint     #95A19C -> #67746F  (2,48 -> 4,53:1 sur le fond)
     --good-text #1F8A5B -> #1C7C52  (3,77 -> 4,51:1 sur son wash)
     --mid-text  #B0771A -> #936316  (3,31 -> 4,52:1 sur son wash)
     --bad-text  #BB4630 -> #B7442F  (4,35 -> 4,51:1 sur son wash)
   --faint MERITE SON EXPLICATION : DESIGN.md lui confie les libelles
   de section en mono 10px (l.62), donc du PETIT texte - le seuil est
   4,5:1, pas 3:1. Corrige a 4,53, il devenait indistinguable de
   --muted ; --muted est donc descendu d'un cran (5,54:1) pour rendre
   sa rampe a quatre niveaux : 15,8 / 8,6 / 5,5 / 4,5. Le sombre avait
   le meme defaut, jamais releve : --faint y passe de 3,16 a 4,52:1.

   Les valeurs de REMPLISSAGE de DESIGN.md (--good, --mid, --bad,
   --accent) sont intactes : elles servent les pastilles, points et
   barres ; le TEXTE prend la variante -text. Ne pas eclaircir sans
   recalculer.

   MODE SOMBRE : defini ici, mais actif seulement sur CHOIX EXPLICITE
   (data-theme="dark"). La preference systeme n'est PAS encore
   branchee : 674 couleurs hex subsistent dans les pages, dont 72
   fonds clairs en dur ; l'ouvrir aujourd'hui donnerait un site
   mi-sombre mi-blanc a tout utilisateur en OS sombre. La regle
   @media prefers-color-scheme s'ajoutera au TEMPS 2, quand les
   composants seront alignes. */

:root{
  /* --- noms canoniques (DESIGN.md) --- */
  --ground:#F6F7F9;  --surface:#FFFFFF;  --surface-2:#EEF0F4; --raised:#FAFBFC;
  --ink:#0E1525;     --ink-2:#3A4558;    --muted:#586273;     --faint:#647084;
  /* BORDURE DE CHAMP. --rule (1,24:1) est un TRAIT DECORATIF : parfait
     pour separer, insuffisant pour cerner un champ de saisie, qui est un
     element d'interface et doit tenir 3:1 (WCAG 1.4.11). Mesure du 03/09
     sur /marches, page faite de 78 cases et 12 champs. */
  --champ-bord:#7B8698;
  --rule:#E4E7EC;    --rule-strong:#CCD2DB;
  --accent:#2450E0;  --accent-deep:#1A3CB5;
  --accent-wash:#E9EEFD; --accent-line:#C3D0FA;
  --good:#15803D; --good-wash:#E4F4EA; --good-text:#137238;
  --mid:#B7791F;  --mid-wash:#FBF0DC;  --mid-text:#8F5A0A;
  --bad:#C0362C;  --bad-wash:#FBE9E7;  --bad-text:#B3332A;

  /* Messagerie : donnee commerciale, pas decor. Couleurs de marque. */
  --ms:#2563EB; --google:#EA4335; --autre:#6B7688;

  /* --- noms historiques : ALIAS, pour que les pages existantes
     prennent la nouvelle palette sans etre touchees --- */
  --bleu:var(--accent);        --bleu-fonce:var(--accent-deep);
  --fond:var(--ground);        --encre:var(--ink);
  --ligne:var(--rule);         --sourdine:var(--muted);
  --go:var(--good);            --go-fond:var(--good-wash);
  --go-texte:var(--good-text);
  --nogo:var(--bad);           --nogo-fond:var(--bad-wash);
  --ko-fond:var(--bad-wash);   --ko-texte:var(--bad-text);
  --alerte:var(--mid-text);    --alerte-fond:var(--mid-wash);
  --inconnu-fond:var(--surface-2);   /* etait UTILISE sans etre defini */

  /* Echelle de la note : famille SEMANTIQUE, jamais l'accent.
     Chaque palier verifie AA sur blanc, sur le fond, et en pastille
     pleine (blanc dessus) : 5,18 / 5,19 / 5,20 / 5,62 / 5,41:1. */
  --note-70:#137238; --note-50:#47761A; --note-30:#9A5B06;
  --note-15:#B4470F; --note-0:#B3332A;

  /* Deux faces, chacune avec une pile de secours reelle. */
  --police:'Schibsted Grotesk',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono','Cascadia Mono',Consolas,monospace;
}

/* SOMBRE - choix explicite uniquement (voir l'entete). Seules les
   VALEURS changent : les alias suivent tout seuls. */
:root[data-theme="dark"]{
  --ground:#0A0E17;  --surface:#111725;  --surface-2:#1A2233; --raised:#151C2B;
  --ink:#E8ECF3;     --ink-2:#BDC6D4;    --muted:#95A1B5;     --faint:#7A879D;
  --champ-bord:#66748C;
  --rule:#222B3C;    --rule-strong:#2F3A4F;
  --accent:#7C9CFF;  --accent-deep:#A3BAFF;
  --accent-wash:#141F3D; --accent-line:#22346A;
  --good:#3BB878; --good-wash:#10251A; --good-text:#3BB878;
  --mid:#D19A3A;  --mid-wash:#2A2213;  --mid-text:#D19A3A;
  --bad:#DB6A52;  --bad-wash:#2C1712;  --bad-text:#DB6A52;
  --autre:#8792A6;
  --note-70:#3BB878; --note-50:#5FBF63; --note-30:#D19A3A;
  --note-15:#D9834F; --note-0:#DB6A52;
}

/* SOCLE TYPOGRAPHIQUE (TEMPS 2). Retire du TEMPS 1 sur constat de
   @code-reviewer : ces regles restylent des pages, elles ne changent
   pas une valeur de jeton. Elles arrivent avec la premiere page
   convertie, et leur portee est assumee : titres et colonnes de
   chiffres changent d'aspect sur les pages pas encore converties, et
   html/body y RECOLORE le fond et le texte (--ground et --ink sont
   tres proches des #f4f6f8/#1c2430 en dur qu'ils remplacent, mais
   c'est bien une recoloration - releve par @code-reviewer). */
html,body{background:var(--ground);color:var(--ink)}
h1,h2,h3,h4{font-weight:600;letter-spacing:-.01em}
/* TOUTE donnee en mono alignee (DESIGN.md 3) : tabular-nums evite que
   les colonnes dansent d'une ligne a l'autre. */
.num,.bce,.mono,td.num,th.num{font-family:var(--mono);
  font-variant-numeric:tabular-nums}
/* Blanc sur aplat sature : identique dans les deux themes, donc un
   jeton propre plutot qu'un #fff en dur dans chaque page. */
:root{
  /* LE TEXTE SUR UN APLAT SATURE. Ce n'est PAS "du blanc" : en theme
     sombre, les aplats (--accent, --good, les paliers de note)
     deviennent CLAIRS, et le blanc y tombe a 2,3-3,4:1. Le jeton
     s'inverse donc avec le theme. Trouve par le test de contraste, pas
     a l'oeil - aucun de nous ne l'avait vu. */
  --sur-plein:#FFFFFF;
  /* BANDEAU INVERSE. --ink ne peut PAS servir de fond de bandeau : il
     s'inverse avec le theme (clair en sombre), la bande deviendrait
     blanche dans un theme sombre. Un bandeau sombre dans les DEUX
     themes exige donc ses propres jetons. Texte verifie a 15,8:1. */
  --bandeau:#0E1525; --bandeau-ink:#F6F7F9; --bandeau-mute:#C9D0DB;
  /* l'accent SUR fond sombre : la meme identite, sa valeur de la
     palette sombre, car le bandeau est sombre dans les deux themes.
     Le vert-petrole clair y tombait a 2,13:1, invisible. */
  --bandeau-accent:#7C9CFF;
  /* les memes valeurs : la bande ne bascule pas. */
  --nav-ink:#C9D0DB;        /* onglet inactif : 11,4 / 12,5:1 */
  --nav-ink-fort:#F6F7F9;   /* survol et focus : 15,8 / 17,3:1 */
  --nav-survol:#384A72;     /* 2,07:1 contre la bande : le survol se voit */
  --nav-actif:#7C9CFF;      /* 7,15:1 contre la bande : la pastille se voit */
  --nav-actif-ink:#0A1122;  /* texte SOMBRE sur la pastille : 7,74:1 */
  /* Contour d'un controle pose sur la bande (boutons de langue).
     --nav-survol ne vaut que 2,07:1 : c'est un fond de survol, pas un
     trait. WCAG 1.4.11 demande 3:1 pour ce qui DELIMITE un composant.
     Mesure du 03/09 : 3,51 sur la bande claire, 3,84 sur la sombre. */
  --nav-bord:#62708C;
  /* NAV DU BANDEAU - jetons FIXES, identiques dans les deux themes,
     parce que la bande ne bascule pas. Le 03/09, la nav employait
     --accent-wash et --accent : des jetons qui BASCULENT sur une bande
     qui ne bascule pas. Chaque etat tombait faux dans un des deux
     themes - onglet inactif a 1,09:1 en clair (illisible), onglet
     actif a 2,03:1 en sombre, survol a 1,60:1 en sombre. Bug trouve
     par Abdel sur la page deployee, dans Chrome, apres que deux
     apercus et deux relectures de code l'aient manque.
     Quatre etats x deux themes, TEXTE mesure >= 4,5:1. */
  --nav-ink:#C9D0DB;        /* onglet inactif : 11,4 / 12,5:1 */
  --nav-ink-fort:#F6F7F9;   /* survol et focus : 15,8 / 17,3:1 */
  --nav-survol:#384A72;     /* 2,07:1 contre la bande : le survol se voit */
  --nav-actif:#7C9CFF;      /* 7,15:1 contre la bande : la pastille se voit */
  --nav-actif-ink:#0A1122;  /* texte SOMBRE sur la pastille : 7,74:1 */
  /* Contour d'un controle pose sur la bande (boutons de langue).
     --nav-survol ne vaut que 2,07:1 : c'est un fond de survol, pas un
     trait. WCAG 1.4.11 demande 3:1 pour ce qui DELIMITE un composant.
     Mesure du 03/09 : 3,51 sur la bande claire, 3,84 sur la sombre. */
  --nav-bord:#62708C;
  --ombre:rgba(14,21,37,.26);
}
:root[data-theme="dark"]{
  --sur-plein:#0A1122;   /* aplats CLAIRS en sombre : texte fonce */
  --bandeau:#0A0E17; --bandeau-ink:#E8ECF3; --bandeau-mute:#8D99AD;
  --bandeau-accent:#7C9CFF;
  --ombre:rgba(0,0,0,.55);
}

/* Une seule pile de caracteres : index/prospecter en avaient une
   variante (sans BlinkMacSystemFont) qui rendait differemment sur la
   meme machine. */
body{font-family:var(--police)}


/* Focus clavier visible PARTOUT : l'audit n'a trouve aucun style de
   focus sur les boutons et liens. :focus-visible ne s'allume qu'au
   clavier - la souris ne voit rien. */
:focus-visible{outline:2px solid var(--bleu);outline-offset:2px;border-radius:3px}

/* Boutons desactives lisibles : les pages posaient du blanc sur
   #9aa7b4 (2,5:1) ou #9db4d8 (2,1:1) - le libelle du bouton de
   connexion disparaissait pendant l'envoi. 5,45:1 ici. */
button:disabled,.principal:disabled,.secondaire:disabled,
.sec:disabled,.envoi:disabled{
  background:var(--surface-2)!important;color:var(--muted)!important;
  border-color:var(--rule-strong)!important;cursor:default;
}

/* ============== L'EN-TETE, COMPOSANT UNIQUE (03/09) ==============

   Le HTML est pose par bandeau.py, cote serveur, sur TOUTES les pages :
   aucune page ne definit plus le sien. Ce bloc est donc le seul endroit
   qui le style - d'ou la disparition des !important, qui ne servaient
   qu'a repeindre par-dessus le CSS de chaque page (#111c2b ici,
   #9fc4ff la, un degrade bleu ailleurs).

   La mecanique tient en trois declarations, et c'est elle qui garde
   FR/EN/NL en haut a droite a TOUTE largeur :
     - le <header> ne se replie pas          (flex-wrap:nowrap) ;
     - le <nav> mange le milieu et se replie (flex:1 1 auto) ;
     - .nav-droite ne retrecit ni ne cede    (flex-shrink:0).
   Le defaut du 03/09 - les langues tombees sous le logo, y compris a
   2560 px - venait de l'inverse : un conteneur qui se repliait, et un
   .fin en margin-left:auto qui mangeait toute la ligne.

   Fige pendant le defilement (demande du 31/08). z-index 8200 :
   au-dessus des th sticky (z=2), sous les panneaux flottants (8300+). */
#rdrBandeau{position:sticky;top:0;z-index:8200;display:flex;
  align-items:center;gap:14px;padding:11px 22px;flex-wrap:nowrap;
  background:var(--bandeau);color:var(--bandeau-ink);
  box-shadow:0 2px 10px var(--ombre)}
#rdrBandeau .marque{margin:0;font-size:16px;font-weight:700;
  letter-spacing:.14em;flex:0 0 auto}
#rdrBandeau .marque a{display:flex;align-items:center;gap:9px;
  color:var(--bandeau-ink);text-decoration:none;white-space:nowrap}
#rdrBandeau .marque span{color:var(--bandeau-accent)}

/* Le radar : la signature de la marque, en PETIT (DESIGN.md 1). Le
   balayage est le seul mouvement ambiant du site, et il s'arrete si le
   systeme demande moins d'animation. Vivait dans accueil.html, ou il ne
   servait qu'a une page sur douze. */
.radar{width:26px;height:26px;flex:none}
.radar circle{fill:none;stroke:var(--bandeau-mute);stroke-width:1.1;opacity:.7}
.radar .bal{transform-origin:13px 13px;animation:balaye 6s linear infinite}
@keyframes balaye{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.radar .bal{animation:none}}

/* LES ONGLETS, en pastilles BORDEES. Le contour n'est pas decoratif :
   WCAG 1.4.11 demande 3:1 pour ce qui DELIMITE un element d'interface,
   et --nav-bord vaut 3,51:1 sur la bande claire, 3,84:1 sur la sombre.
   Sans lui, un onglet inactif n'est qu'un mot pose sur du noir. */
#radarNav{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;gap:4px;
  align-items:center}
#radarNav a{padding:4px 11px;border:1px solid var(--nav-bord);
  border-radius:16px;font-size:12.5px;white-space:nowrap;
  background:transparent;color:var(--nav-ink);text-decoration:none}
#radarNav a:hover{background:var(--nav-survol);color:var(--nav-ink-fort)}
#radarNav a:focus-visible{outline:2px solid var(--nav-ink-fort);
  outline-offset:2px}
#radarNav a[aria-current="page"]{background:var(--nav-actif);
  color:var(--nav-actif-ink);border-color:var(--nav-actif);font-weight:600}

/* LES COMPTEURS : en mono, comme tout chiffre du site. Les compteurs et
   l'horodatage etaient en gris fonce (#5b6879) sur fond sombre. */
#rdrEtat{flex:0 1 auto;min-width:0;font-size:12px;font-family:var(--mono);
  color:var(--bandeau-mute);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
/* LES ONGLETS SUR UNE LIGNE AUX LARGEURS DE PORTABLE (07/10).

   MESURE, Chromium sans tete, /prospecter, sept largeurs. Les sept
   onglets pesent ~646 px ; le milieu ne leur en laissait que 583 a
   1440 pour un membre, 324 pour un admin dont le plan expire :
     membre  1024 : 3 lignes   1280-1440 : 2   1536 et plus : 1
     admin   1024 : 7 lignes (bandeau de 243 px)   1280 : 4
             1366-1440 : 3     1536-1680 : 2       1920 : 1
   Le bandeau est FIGE : chaque ligne en trop est retiree a toutes les
   pages, pendant tout le defilement. Et les compteurs qui prenaient la
   place etaient deja coupes ("1 957 492 societ...") sous 1536 px - on
   payait une ligne pour un chiffre illisible.

   Ce qui cede, dans l'ordre ou on perd le moins :
     1. les compteurs - ils se relisent sur l'accueil. Le seuil etait a
        900 px ; il monte a la largeur ou ils tiennent ENTIERS ;
     2. la queue de l'indicateur IA. "IA : ≈ 43,9 %" se comprend sans
        elle (meme choix que sur telephone, plus bas), et le titre du
        lien porte le detail du plan.
   L'ALERTE DE L'ADMIN NE CEDE JAMAIS : elle est dans le bandeau et non
   dans une info-bulle par decision de relecture (liens.js). Comme elle
   pese ~290 px, c'est le reste qui lui fait la place, plus tot :
   :has() pose la question au DOM, aucun role n'est code ici.

   Apres : membre 1 ligne des 1280 ; admin en alerte 1 ligne des 1440.
   La STRUCTURE ne change pas : c'est l'affichage qui cede, jamais le
   DOM. Reste connu : 2 lignes pour un membre a 1024 px. */
/* (07/10, plus tard le meme jour) Au-dela de 1199 px la navigation
   n'est plus un bandeau mais une barre laterale - voir plus bas. Les
   seuils de 1535 / 1639 / 1919 px mesures ce matin n'ont donc plus
   d'objet : le bandeau horizontal n'existe plus que sous 1200 px, et
   la il n'a jamais la place des compteurs ni de la queue. */
@media (max-width:1199px){#rdrEtat,.rdrIALong{display:none}}

/* QUAND UNE LIGNE NE SUFFIT PLUS : DEUX LIGNES NETTES, pas un repli au
   hasard. Les onglets se repliaient un par un dans ce qui restait du
   milieu (26 px a 1024 pour un admin en alerte : un onglet par ligne).
   Sous le seuil ou ils ne tiennent plus, ils prennent LEUR ligne
   entiere, sous le logo et le groupe de droite - la disposition du
   telephone, sans le defilement puisqu'ici ils tiennent tous.
   Deux seuils, parce que l'alerte de l'admin deplace le point ou la
   place manque : 1099 px sans elle, 1199 avec. */
@media (min-width:761px) and (max-width:1099px){
  #rdrBandeau{flex-wrap:wrap;row-gap:8px}
  #radarNav{order:3;flex:1 0 100%}
}
@media (min-width:1100px) and (max-width:1199px){
  #rdrBandeau:has(.rdrIAAlerte){flex-wrap:wrap;row-gap:8px}
  #rdrBandeau:has(.rdrIAAlerte) #radarNav{order:3;flex:1 0 100%}
}

/* LE GROUPE DE DROITE : l'indicateur IA, Reglages pour un admin, et
   FR/EN/NL. Pose vide par bandeau.py, rempli par liens.js et i18n.js.
   INLINE-flex, et non flex : comme enfant d'un conteneur flex les deux
   sont equivalents, et inline-flex reste sur la ligne si un jour ce
   groupe est pose dans un flux normal. */
.nav-droite{margin-left:auto;display:inline-flex;align-items:center;
  gap:14px;flex-shrink:0;flex-wrap:nowrap;vertical-align:middle}

/* Dans le bandeau horizontal, ni pictogramme ni titre de groupe : la
   place manque, et sept mots sur une ligne se lisent seuls. */
/* .rdrGrp et non .grp : /marches a deja une classe .grp (ses groupes
   de filtres, avec un filet) qui venait tracer des traits entre les
   groupes de la barre. Tout ce que le cadre pose porte un prefixe. */
#radarNav .ic,#radarNav .rdrGrp{display:none}

/* ============ LA BARRE LATERALE (07/10) ============

   POURQUOI. DESIGN.md 4 la prescrit depuis le 01/09 - « sidebar +
   zone principale + rail droit », navigation groupee, compteurs en
   pied - et l'implementation avait garde un bandeau d'onglets. Toutes
   les applications de reference relevees sur Mobbin pour ce metier la
   posent a gauche : Apollo, Attio, Pipedrive, Twenty, Mixpanel,
   Klaviyo. Trois raisons qui valent ici :
     - la hauteur est la ressource rare d'un ecran de donnees (un
       tableau de 200 societes, une fiche de 2 300 px) ; un bandeau fige
       en prend 50 a 243 px selon la largeur, une colonne n'en prend pas ;
     - huit destinations ne tiennent sur une ligne qu'en retirant autre
       chose (mesures de ce matin) ; empilees, elles tiennent toujours,
       et une neuvieme ne casse rien ;
     - le compte, les credits IA et l'alerte de l'admin ont enfin une
       place a eux, en pied, au lieu de disputer la ligne aux onglets.

   COMMENT. LE DOM NE CHANGE PAS : meme <header>, meme <nav>, memes
   hotes pour liens.js et i18n.js, memes essais de structure. Seul
   l'affichage bascule, au-dela de 1200 px ET quand la navigation a des
   liens - les cinq ecrans d'entree gardent leur bandeau, ils n'ont
   rien a empiler. Sous 1200 px tout ce qui precede s'applique tel
   quel, telephone compris.

   CLAIRE, ET LES JETONS DU BANDEAU SE REDEFINISSENT ICI. Une colonne
   sombre pleine hauteur pese sur chaque ecran ; les meilleures
   (Attio, Linear, Stripe) sont de la couleur du fond et laissent le
   contenu parler. Plutot que de reecrire chaque regle, on redonne
   leur valeur aux jetons --bandeau-* et --nav-* SUR CET ELEMENT : tout
   ce qui les lit - les liens, l'indicateur IA et le lien Reglages
   (styles inline de liens.js), le selecteur de langue (i18n.js), le
   radar du logo - suit sans etre touche. Et comme ils pointent
   desormais vers des jetons qui basculent, la barre suit le theme
   sombre, ce que le bandeau ne faisait pas.
   Contrastes, sur --surface : --ink-2 10,2:1 (liens), --muted 6,1:1
   (titres, compteurs), --accent-deep sur --accent-wash 6,6:1 (page
   courante), --accent 5,3:1 (« SIGNAL »). */
@media screen and (min-width:1200px){
  body:has(#radarNav a){padding-left:232px}
  body:has(#radarNav a) #rdrBandeau{
    --bandeau:var(--surface); --bandeau-ink:var(--ink);
    --bandeau-mute:var(--muted); --bandeau-accent:var(--accent);
    --nav-ink:var(--ink-2); --nav-ink-fort:var(--ink);
    --nav-survol:var(--surface-2); --nav-bord:var(--champ-bord);
    --nav-actif:var(--accent); --nav-actif-ink:var(--sur-plein);
    position:fixed;top:0;left:0;bottom:0;width:232px;
    flex-direction:column;align-items:stretch;gap:0;
    padding:18px 12px 14px;overflow:hidden;
    box-shadow:none;border-right:1px solid var(--rule)}
  body:has(#radarNav a) #rdrBandeau .marque{padding:2px 8px 20px}

  /* LA NAVIGATION : une liste, pas des pastilles. La bordure de chaque
     onglet servait a delimiter un mot pose sur du noir (WCAG 1.4.11) ;
     dans une liste verticale c'est la rangee entiere qui est la cible,
     son pictogramme l'annonce, et la page courante porte un aplat ET
     un poids - deux indices, aucun ne repose sur la couleur seule. */
  /* C'EST LA LISTE QUI DEFILE, PAS LA BARRE. Sur un ecran bas (617 px
     de haut, mesure en neerlandais ou les libelles sont plus longs), la
     barre entiere defilait et le selecteur de langue passait SOUS le
     bouton « Signaler », qui est fixe. La liste prend ce qui reste et
     defile en elle-meme ; le pied - credits, alerte, langue - reste
     entier et visible a toute hauteur. */
  body:has(#radarNav a) #radarNav{flex:1 1 auto;min-height:0;
    overflow-y:auto;flex-direction:column;flex-wrap:nowrap;
    align-items:stretch;gap:1px}
  body:has(#radarNav a) #radarNav > *{flex:none}
  body:has(#radarNav a) #radarNav a{display:flex;align-items:center;
    gap:10px;padding:8px 10px;border:0;border-radius:7px;font-size:13.5px;
    color:var(--nav-ink)}
  body:has(#radarNav a) #radarNav a:hover{background:var(--nav-survol);
    color:var(--nav-ink-fort)}
  body:has(#radarNav a) #radarNav a[aria-current="page"]{
    background:var(--accent-wash);color:var(--accent-deep);font-weight:600}
  body:has(#radarNav a) #radarNav .ic{display:block;width:17px;height:17px;
    flex:none;opacity:.85}
  /* Libelle de section : mono, 10 px, espace, majuscules (DESIGN.md 3). */
  body:has(#radarNav a) #radarNav .rdrGrp{display:block;font-family:var(--mono);
    font-size:10px;letter-spacing:.13em;text-transform:uppercase;
    color:var(--bandeau-mute);padding:18px 10px 6px}

  /* LE PIED : le compte d'abord (credits IA, alerte, Reglages, langue),
     les compteurs de la base tout en bas, discrets. margin-top:auto le
     colle au bas de l'ecran quelle que soit la hauteur de la liste. */
  body:has(#radarNav a) .nav-droite{order:2;margin:0;display:flex;
    flex-direction:column;align-items:flex-start;gap:9px;
    padding:14px 10px 0;border-top:1px solid var(--rule);flex-shrink:0}
  /* !important : liens.js pose white-space:nowrap et la marge de
     l'alerte en style inline. Ici l'alerte a toute la largeur et se
     lit sur deux lignes au lieu de pousser quoi que ce soit. */
  body:has(#radarNav a) #radarIA{white-space:normal!important;line-height:1.5}
  body:has(#radarNav a) .rdrIAAlerte{display:block;margin:6px 0 0!important;
    white-space:normal;line-height:1.4;padding:4px 7px!important}
  body:has(#radarNav a) #rdrEtat{order:3;flex:0 0 auto;white-space:normal;
    overflow:visible;font-size:10.5px;line-height:1.6;padding:12px 10px 0}

  /* « SIGNALER » ENTRE DANS LA BARRE. Il flottait en bas a gauche de
     l'ecran : avec la barre, il serait tombe sur le contenu (la
     premiere colonne de chaque tableau). Il prend la derniere rangee
     de la barre, en bouton discret - c'est un recours, pas l'action
     de la page - et la barre lui reserve sa place (padding du bas).
     Ce qui se centrait sur l'ecran se centre sur le contenu. */
  body:has(#radarNav a) #rdrBandeau{padding-bottom:62px}
  /* Fond OPAQUE : sur un ecran bas la barre defile, et ce bouton fixe
     ne doit pas laisser lire ce qui passe dessous. */
  body:has(#radarNav a) #radarSignaler{left:22px;bottom:14px;width:188px;
    background:var(--surface);color:var(--ink-2);box-shadow:none;
    border:1px solid var(--rule-strong);border-radius:7px;font-weight:500;
    text-align:center}
  body:has(#radarNav a) #radarSignaler:hover{background:var(--surface-2);
    color:var(--ink)}
  /* width:max-content : decalee vers la droite, la barre calculait sa
     largeur sur ce qui restait jusqu'au bord et pliait ses boutons sur
     trois lignes alors que la place etait la. */
  body:has(#radarNav a) #ltBarre{left:calc(50% + 116px);width:max-content;
    max-width:calc(100vw - 412px)}
}
/* ECRAN BAS (un portable 13 pouces avec la barre des favoris) : la
   liste et le pied ne tiennent plus ensemble. Les compteurs de la base
   cedent - ils se relisent sur l'accueil -, le compte et l'alerte
   jamais. */
@media screen and (min-width:1200px) and (max-height:760px){
  body:has(#radarNav a) #rdrEtat{display:none}
}
/* A l'impression la fiche masque l'en-tete (societe.html) : elle ne
   garde pas pour autant une marge vide a gauche. */
@media print{body{padding-left:0!important}}

/* Le lien "Chercher sur LinkedIn" (voir liens.js) : discret, a l'accent
   du site et non aux couleurs de LinkedIn - ce n'est pas leur bouton,
   c'est notre lien vers une recherche. */
.rdrIn{font-size:11.5px;color:var(--accent);text-decoration:none;
  white-space:nowrap}
.rdrIn:hover{text-decoration:underline}
.rdrIn:after{content:" \2197";font-size:10px}

/* Animation d'attente reutilisable (demande du 03/09) : un radar qui
   balaie, aux couleurs de la marque. Partout ou une action prend
   quelques secondes. Deux tailles : .radarSpin (16px, en ligne) et
   .radarSpin.gr (28px). Le helper JS window.radarAttente(texte) pose
   le spinner + un libelle d'un coup. */
.radarSpin{display:inline-block;width:16px;height:16px;border-radius:50%;
  border:2px solid var(--ligne);border-top-color:var(--bleu);
  animation:radarSpin .8s linear infinite;vertical-align:middle;box-sizing:border-box}
.radarSpin.gr{width:28px;height:28px;border-width:3px}
@keyframes radarSpin{to{transform:rotate(360deg)}}
.radarAttente{display:flex;align-items:center;gap:9px;color:var(--sourdine);
  font-size:13px;padding:10px 0}
@media (prefers-reduced-motion: reduce){
  .radarSpin{animation-duration:2s}
}

/* ================== LE TELEPHONE (04/09) ==================

   MESURE AVANT CORRECTION, et elle a change le diagnostic. Chromium
   sans tete, emulation d'un vrai telephone, onze pages a 360/390/430/
   768 : DIX pages debordaient exactement de la meme quantite (+271 px
   a 390) et leur viewport reel valait 661 px quelle que soit la
   largeur de l'appareil. Un plancher partage, donc une cause partagee.

   C'ETAIT .nav-droite. A 390 px : left=195, right=661, largeur 467.
   Le <body> et le <header> faisaient bien 390 - le groupe de droite
   seul etirait le document, et le telephone dezoomait pour le faire
   tenir. Tout le reste en decoulait : texte minuscule, "Prospecter"
   recouvert par l'indicateur IA sur LES ONZE PAGES (1 100 a 1 280 px2
   de recouvrement mesures).

   La mecanique de bureau ci-dessus est VOULUE et ne change pas :
   nowrap + flex-shrink:0, c'est elle qui garde FR/EN/NL en haut a
   droite a 2560 px. Ici, sous 760 px, on la releve pour deux lignes.

   LES ONGLETS NE SE CACHENT PAS. Mesure : les sept entrees ne pesent
   que 195 px - ce ne sont pas elles qui debordent. Un menu escamote
   reglerait un probleme qu'elles n'ont pas, et une entree cachee est
   une entree qu'on n'utilise pas. Elles defilent, et le defilement SE
   VOIT : l'ombre de droite ne disparait qu'une fois au bout (technique
   background-attachment:local, sans une ligne de JavaScript). Sans cet
   indice, on croit voir toute la navigation et on ne va jamais
   chercher "Mon compte". */
@media (max-width:760px){

  /* Deux lignes : logo + groupe de droite, puis les onglets. L'ordre
     est explicite, il ne depend pas de celui du HTML - bandeau.py pose
     le <nav> AVANT .nav-droite, et on veut l'inverse. */
  #rdrBandeau{flex-wrap:wrap;gap:9px 12px;padding:9px 14px}
  #rdrBandeau .marque{order:1;font-size:14px;letter-spacing:.1em}
  .nav-droite{order:2;margin-left:auto;gap:9px;
    /* ELLE CEDE, ENFIN. flex-shrink:0 etait exact sur un bureau et
       faux ici : c'est la declaration qui produisait les 661 px. */
    flex-shrink:1;min-width:0;flex-wrap:nowrap}
  #radarNav{order:3;flex:1 0 100%;flex-wrap:nowrap;overflow-x:auto;
    overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    padding:1px 0 3px;
    background:
      linear-gradient(to right,var(--bandeau) 30%,transparent) left center,
      linear-gradient(to left, var(--bandeau) 30%,transparent) right center,
      radial-gradient(farthest-side at 0 50%,var(--ombre),transparent) left center,
      radial-gradient(farthest-side at 100% 50%,var(--ombre),transparent) right center;
    background-repeat:no-repeat;
    background-size:26px 100%,26px 100%,13px 100%,13px 100%;
    background-attachment:local,local,scroll,scroll}
  #radarNav::-webkit-scrollbar{display:none}

  /* WCAG 2.5.8 demande 24x24 pour une cible tactile ; les onglets
     faisaient 25 px de haut, soit le minimum au pixel pres. On monte a
     32, sans toucher au bureau. */
  #radarNav a{padding:7px 13px;font-size:13px}

  /* L'INDICATEUR DE CREDITS RESTE VISIBLE, et il garde son mot. Le
     masquer serait plus simple et ce serait une faute : montrer que
     l'IA coute est une exigence du produit, et un commercial en
     deplacement est justement celui qui doit le voir. Seule la queue
     explicative s'efface - "IA : ≈ 43,9 %" se comprend sans elle,
     "43,9 %" tout seul ne dit plus de quoi il s'agit. */
  .rdrIALong{display:none}
  #radarIA{font-size:11px}

  /* L'ALERTE DE L'ADMIN SORTAIT FR/EN/NL DE L'ECRAN (mesure du 07/10).
     Elle pese ~290 px et ne se coupait pas : a 390 px le selecteur de
     langue tombait de 462 a 581 px, et les onze pages debordaient de
     191 px - test_mobile etait rouge depuis que le plan approche de sa
     fin, pour l'admin seul (un membre ne recoit pas l'alerte). Elle
     reste ENTIERE et dans le bandeau : c'est le groupe qui se replie,
     Reglages et les langues en haut, l'indicateur et son alerte
     dessous, sur autant de lignes qu'il lui faut.
     !important : liens.js pose white-space:nowrap en style inline, ce
     qu'aucun selecteur ne bat autrement. */
  .nav-droite:has(.rdrIAAlerte){flex-wrap:wrap;justify-content:flex-end;
    row-gap:6px}
  #radarIA:has(.rdrIAAlerte){order:2;flex:1 1 100%;text-align:right;
    white-space:normal!important;line-height:1.7}
  /* D'un bloc : sinon elle se coupe au milieu et laisse "OFF" seul
     sur une ligne. 290 px tiennent dans les 332 d'un ecran de 360. */
  .rdrIAAlerte{display:inline-block}


  /* LES TROIS FLOTTANTS. Ils ne se marchent plus dessus, ET la page
     leur laisse la place : sur une page courte, la bulle d'aide
     recouvrait "1 957 492" et "641 522". Une rangee reservee en bas,
     que le contenu ne traverse jamais. */
  body{padding-bottom:76px}
  #sgBouton{width:48px;height:48px;right:14px;bottom:14px}
  /* La bulle est une etiquette pour le bouton d'a cote. Sur un ecran
     de 390 px elle coute une bande entiere pour redire ce que le
     bouton dit deja - et c'est elle qui masquait les compteurs. */
  #sgBulle{display:none}
  /* DEUX BOUTONS FLOTTANTS AU MEME ENDROIT (mesure du 04/09).
     #btn_calc de /prospecter est fixe a left:14px;bottom:22px, et
     #radarSignaler a left:14px;bottom:14px : ils se recouvrent
     exactement, sur /prospecter comme sur /screening. L'action
     principale de la page garde sa place ; c'est "Signaler" qui monte,
     et seulement la ou l'autre existe - :has() pose la question au
     DOM plutot que de coder en dur une liste de pages qui se
     perimerait au premier ecran ajoute. */
  #radarSignaler{left:14px;bottom:14px}
  body:has(#btn_calc) #radarSignaler{bottom:76px}
  /* MEME CAS SUR /marches (07/10) : le pied collant du formulaire
     (Rechercher, Enregistrer, le compte de filtres) occupe le bas de
     l'ecran, et « Signaler » recouvrait la moitie de « Rechercher ».
     #barreCpt n'existe que dans ce pied. */
  body:has(#barreCpt) #radarSignaler{bottom:112px}

  /* Un champ ne sort pas de son etiquette. /reglages-ia pose des
     largeurs fixes sur les <label> (90 px pour l'heure, 150 pour le
     fuseau) et les <input> gardaient leur largeur par defaut : les
     deux champs se chevauchaient de 2 015 px2. */
  label{max-width:100%;min-width:0}
  label>input,label>select,label>textarea{max-width:100%;box-sizing:border-box}
  #plHeure,#plFuseau,#cfDate{width:100%}
  #sgPanneau{width:100%}
}

/* LES CHAMPS A 16 px, ET JUSQU'A LA TABLETTE (04/09).

   Sous 16 px, iOS zoome des qu'on touche un champ et ne dezoome pas :
   sur /marches, chaque saisie devenait un aller-retour de zoom. Mesure
   au navigateur : 99 champs sous 16 px, dont 64 sur /reglages-ia, et
   12 px pour les plus petits. La taille APPARENTE ne change presque
   pas - c'est le zoom automatique qu'on evite.

   LE SEUIL EST PLUS HAUT QUE CELUI DE L'EN-TETE, et c'est voulu : a
   768 px l'en-tete tient sur une ligne (mesure : aucun debordement),
   mais un iPad zoome sur un champ de 12 px exactement comme un
   iPhone. Deux problemes differents, deux seuils differents. */
@media (max-width:900px){
  input,select,textarea,
  .wrap input,.wrap select,.wrap textarea,
  .card input,.card select,.card textarea{font-size:16px}
  /* CINQ CHAMPS RESISTAIENT, pour une raison de CASCADE et non de
     media query : ils sont styles PAR LEUR IDENTIFIANT (assistant.js
     pour #sgIn, les pages pour les autres), ce qu'aucun selecteur
     d'element ne bat. On les nomme plutot que de sortir un
     !important : la regle reste lisible, et la liste se voit. */
  #sgIn,#q_nace,#rechNom,#mods,#bcBces{font-size:16px}
}