/* ---------------------------------------------------------------------
   Sonar - LE PUPITRE.

   Choisi par Paul le 10 septembre 2026 parmi trois directions. Le parti
   pris : Sonar parle le langage de l'édition, pas celui des tableaux de
   bord. Chaque sortie est une LIGNE DE DÉPÔT - datée, avec ses rôles en
   petites capitales, ses liens d'écoute. Papier gris-vert, encre de
   tampon, colonnes tabulaires.

   LES NOMS DE VARIABLES SONT CEUX DE FIT, ET C'EST VOULU : le tableau
   vient de chez lui (`sonar-tableau.css`), et il s'habille tout seul en
   lisant ces variables. Seules leurs VALEURS changent. Un jour où le
   tableau évoluera chez Fit, il évoluera ici sans retouche.

   RIEN NE SORT VERS UN CDN. Inter est servie par le NAS, comme pour Fit
   et Jericho. La maquette prévoyait Petrona et IBM Plex ; les embarquer
   aurait demandé de télécharger six fichiers de police pour un gain
   d'élégance, alors que Georgia - présente partout - porte très bien le
   caractère « papier » des titres d'œuvres.

   LE CODE COULEUR EST STRICT, comme chez Fit :
     rouge brique = quelque chose attend. Rien d'autre.
     vert sourd   = fait, sain.
     bleu tampon  = un filtre actif, un choix de l'utilisateur.
   --------------------------------------------------------------------- */

@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(polices/inter-400.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(polices/inter-600.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url(polices/inter-700.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:800;font-display:swap;src:url(polices/inter-800.woff2) format("woff2")}

:root{
  /* le papier et l'encre */
  --paper:#E8EAE5; --panel:#F4F5F2; --ink:#1C1E1A; --muted:#5E625A;
  --rule:#C4C8BE; --rule2:#D9DCD4; --hl:#EEF0EA; --shade:#8A8F85;
  /* les trois couleurs qui parlent */
  --signal:#8C2A1E;  --signal-bg:#F7EBE8;
  --ok:#2E5A3A;      --ok-bg:#EAF0EA;
  --attente:#8A5100; --attente-bg:#F8EFE2;
  --filtre:#2E4E7E;  --filtre-bg:#E5ECF5;
  --inv-bg:#1C1E1A;  --inv-fg:#E8EAE5;
  color-scheme:light;
  /* la densité du tableau - reprise de Fit */
  --td-py:8px; --td-px:12px; --th-py:9px; --fs-t:12.5px; --fs-th:10px; --lh-t:1.45;
  /* TROIS ALIAS QUE LE TABLEAU DE FIT ATTEND. Sans eux, ses menus
     flottants n'avaient plus de fond ni de bordure : le panneau de
     filtre de date se voyait par transparence, débordait sur les
     en-têtes et cassait toute la mise en page. */
  --panneau:var(--panel); --trait:var(--rule); --doux:var(--muted);
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:Georgia,"Iowan Old Style","Palatino Linotype",Palatino,serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;
}
:root[data-densite="compact"]{--td-py:3px;--td-px:8px;--th-py:5px;--fs-t:11.5px;--fs-th:9.5px;--lh-t:1.25}
:root[data-densite="large"]{--td-py:12px;--td-px:15px;--th-py:12px;--fs-t:13.5px;--fs-th:10.5px;--lh-t:1.6}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#16181A; --panel:#1D2022; --ink:#E4E6E1; --muted:#93988F;
    --rule:#2E3230; --rule2:#252927; --hl:#212523; --shade:#767C74;
    --signal:#E58877;  --signal-bg:#2A1512;
    --ok:#78B58A;      --ok-bg:#14231A;
    --attente:#DBA45C; --attente-bg:#241A0C;
    --filtre:#8FB3E4;  --filtre-bg:#131E2C;
    --inv-bg:#E4E6E1;  --inv-fg:#16181A;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#16181A; --panel:#1D2022; --ink:#E4E6E1; --muted:#93988F;
  --rule:#2E3230; --rule2:#252927; --hl:#212523; --shade:#767C74;
  --signal:#E58877;  --signal-bg:#2A1512;
  --ok:#78B58A;      --ok-bg:#14231A;
  --attente:#DBA45C; --attente-bg:#241A0C;
  --filtre:#8FB3E4;  --filtre-bg:#131E2C;
  --inv-bg:#E4E6E1;  --inv-fg:#16181A;
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--filtre); text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{
  outline:2px solid var(--filtre); outline-offset:2px; border-radius:2px}

/* ---------- l'en-tête : une seule ligne, un trait plein dessous ---------- */
/* UNE SEULE LIGNE, ET BASSE. Elle faisait cent soixante pixels pour
   trois liens - Paul, 10 septembre 2026 : « c'est de la place perdue ».
   Un bandeau collant vole cette hauteur à CHAQUE écran, pour toujours.

   ET IL NE COLLE PLUS DU TOUT - 11 octobre 2026. Paul : « je voudrais que
   si je descends le tableau jusqu'en bas je puisse voir l'entête ». Le
   titre des colonnes EST collé en haut du cadre du tableau ; seulement, la
   page descend elle aussi, le cadre passait sous ce bandeau et celui-ci le
   recouvrait sur quatre-vingts pixels. L'alternative était de raccourcir le
   tableau de deux lignes pour qu'il ne passe jamais dessous. Entre perdre
   deux lignes de données et perdre trois liens quand on descend, le choix
   est vite fait, et il va dans le sens de la remarque ci-dessus. */
.tete{background:var(--panel); border-bottom:1px solid var(--ink); z-index:20}
.tete-in{
  max-width:1400px; margin:0 auto; padding:0 20px; min-height:38px;
  display:flex; align-items:center; gap:18px;
}
.marque{
  font-family:var(--serif); font-size:18px; font-weight:400; line-height:1;
  letter-spacing:-.01em; color:var(--ink); white-space:nowrap;
}
/* Le nom du compte se range à côté, en petit, et disparaît sur mobile :
   on sait chez qui on est, on n'a pas besoin qu'on nous le crie. */
.marque span{
  font-family:var(--sans); font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.16em; color:var(--shade); margin-left:9px;
}
@media (max-width:640px){ .marque span{display:none} }
.nav{display:flex; gap:15px; margin-left:auto; align-items:center}
.nav a{
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.11em;
  color:var(--muted); line-height:37px; border-bottom:2px solid transparent;
}
.nav a:hover{text-decoration:none; color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--ink)}
/* La sortie n'est pas une destination : elle se tient à l'écart du menu,
   en petit et en gris, dans le coin. On la trouve quand on la cherche,
   elle n'attire pas l'œil le reste du temps. */
.sortie{
  font-size:10px; color:var(--shade); letter-spacing:.04em;
  border-bottom:1px solid transparent; padding-bottom:1px; margin-left:20px;
}
.sortie:hover{color:var(--muted); text-decoration:none; border-bottom-color:var(--rule)}

/* SOIXANTE-DIX PIXELS DE VIDE EN BAS - Paul, 11 octobre 2026 : « j'ai quand
   même de la place de perdue en bas ». Cette réserve a du sens sous un texte,
   aucun sous un tableau qui prend toute la fenêtre : page descendue à fond,
   c'était une bande grise de quatre-vingts pixels sous le bouton. */
main{max-width:1400px; margin:0 auto; padding:16px 20px 14px}

/* ---------- la phrase d'état : ce que l'ardoise faisait bien ---------- */
.dit{
  font-family:var(--serif); font-size:clamp(17px,2vw,21px); line-height:1.25;
  margin:0 0 4px; max-width:44ch; text-wrap:balance; font-weight:400;
}
.dit em{font-style:italic; color:var(--signal)}
.dit b{font-weight:400; font-variant-numeric:tabular-nums}
.quand{color:var(--muted); font-size:12px; margin:0 0 16px}
.quand strong{color:var(--ink); font-weight:600}

h2{
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.16em;
  /* ONZE PIXELS REPRIS AU TITRE - 11 octobre 2026. Page descendue à fond,
     « SORTIES RELEVÉES » passait juste au-dessus du bord. Le titre d'un bloc
     n'a pas besoin de vingt pixels d'air au-dessus de lui. */
  color:var(--muted); margin:10px 0 6px; padding-bottom:4px; border-bottom:1px solid var(--ink);
}
.sous{color:var(--muted); font-size:12.5px; margin:0 0 14px}

/* ---------- les fiches d'ayants droit, avec leur relevé par année ---------- */
/* UNE LIGNE PAR AYANT DROIT, PAS UNE CARTE.
   Les cartes tenaient à deux et devenaient un mur à cent cinquante ;
   elles laissaient surtout une colonne fantôme vide à droite, et
   répétaient deux fois le même chiffre. Une ligne dit la même chose en
   quatre fois moins de place, et se lit en colonne. */
.fiches{border-top:1px solid var(--rule)}
.fiche{
  display:flex; align-items:center; gap:16px;
  padding:8px 2px; border-bottom:1px solid var(--rule2);
}
.fiche:hover{background:var(--hl)}
.fiche.err{background:var(--signal-bg)}
.fiche-nom{
  font-family:var(--serif); font-size:16px; line-height:1.2;
  flex:0 0 200px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.fiche-nb{
  color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums;
  flex:0 0 120px; text-align:right;
}
/* les barres par année - ce que la console faisait bien : à cent
   cinquante ayants droit, c'est ce qui dit lesquels travaillent encore */
.annees{display:flex; align-items:flex-end; gap:2px; height:20px; flex:0 0 130px}
.annees i{flex:1; background:var(--rule2); min-height:1px}
.annees i.vif{background:var(--shade)}
.annees i.ici{background:var(--signal)}
.fiche-actions{display:flex; gap:10px; align-items:center; margin-left:auto}
/* Retirer est une action rare : elle n'a pas à crier. Elle se découvre
   au survol de la ligne, et reste atteignable au clavier. */
.fiche .bt-danger{opacity:0; border-color:transparent}
.fiche:hover .bt-danger, .fiche .bt-danger:focus{opacity:1; border-color:var(--rule)}

/* ---------- les étiquettes d'état ---------- */
.et{
  display:inline-block; font-size:9.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.09em; padding:1px 5px; border:1px solid currentColor; white-space:nowrap;
}
.et-ok{color:var(--ok)} .et-att{color:var(--attente)} .et-err{color:var(--signal)}
.et-neutre{color:var(--shade); border-style:dotted}
.roles{display:flex; gap:3px; flex-wrap:wrap}
.role{
  font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
  color:var(--muted); background:var(--rule2); padding:1px 4px;
}

/* ---------- le point qui dit « part lundi » - pas une colonne ---------- */
.part{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--signal); margin-right:6px; vertical-align:1px;
}

/* ---------- boutons et champs ---------- */
.bt{
  display:inline-flex; align-items:center; gap:6px; font-family:inherit;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.1em;
  padding:7px 13px; border:1px solid var(--ink); background:transparent;
  color:var(--ink); cursor:pointer;
}
.bt:hover{background:var(--hl)}
.bt-fort{background:var(--ink); color:var(--inv-fg)}
.bt-fort:hover{background:var(--ink); opacity:.86}
.bt-danger{border-color:var(--rule); color:var(--signal)}
.bt-danger:hover{background:var(--signal-bg)}
.bt[disabled]{opacity:.4; cursor:not-allowed}
.bt-mini{font-size:9.5px; padding:2px 7px; letter-spacing:.08em}

label{
  display:block; font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.13em; color:var(--muted); margin:0 0 5px;
}
input[type=text],input[type=email],input[type=password],select{
  font-family:inherit; font-size:14px; width:100%; padding:7px 2px;
  border:none; border-bottom:1px solid var(--ink); background:transparent; color:var(--ink);
}
input::placeholder{color:var(--shade); font-style:italic}
.ligne{display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end; margin:0 0 16px}
.champ{flex:1; min-width:180px}

/* ---------- messages ---------- */
.mot{padding:9px 13px; font-size:12.5px; margin:0 0 16px; border-left:3px solid}
.mot-err{background:var(--signal-bg); color:var(--signal); border-color:var(--signal)}
.mot-ok{background:var(--ok-bg); color:var(--ok); border-color:var(--ok)}
.mot-info{background:var(--filtre-bg); color:var(--filtre); border-color:var(--filtre)}
.vide{color:var(--muted); font-size:12.5px; padding:26px 14px; text-align:center; font-style:italic}

/* ---------- les candidats d'une recherche ---------- */
.candidats{display:grid; gap:1px; background:var(--rule); margin-top:12px}
.candidat{
  display:flex; gap:12px; align-items:flex-start; background:var(--panel);
  padding:11px 13px; width:100%; text-align:left;
}
.candidat:hover{background:var(--hl)}
.jeton{
  width:34px; height:34px; flex:0 0 34px; display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:16px; color:var(--muted); border:1px solid var(--rule);
}

/* ---------- le journal, replié en bas ---------- */
.replie{border-top:1px solid var(--ink); margin-top:30px}
.replie > summary{
  cursor:pointer; padding:11px 0; font-size:10.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.16em; color:var(--muted); list-style:none;
}
.replie > summary::-webkit-details-marker{display:none}
.replie > summary::before{content:"▸ "; color:var(--shade)}
.replie[open] > summary::before{content:"▾ "}
.replie > summary:hover{color:var(--ink)}

/* ---------- le pied ---------- */
.pied{
  color:var(--muted); font-size:11.5px; margin-top:30px; padding-top:13px;
  border-top:1px solid var(--rule); max-width:78ch; line-height:1.55;
}

/* ---------- la connexion ---------- */
.porte{max-width:340px; margin:11vh auto; padding:0 20px}
.porte .marque{font-size:34px; margin-bottom:4px}
.porte .marque span{letter-spacing:.16em}
.porte-carte{background:var(--panel); border:1px solid var(--rule); padding:20px; margin-top:20px}
.porte .champ{margin-bottom:15px; min-width:0}
.porte .bt{width:100%; justify-content:center; margin-top:6px}

@media (max-width:640px){
  .tete-in{padding:9px 14px}
  .marque{font-size:20px}
  main{padding:16px 14px 50px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}