/* =====================================================================
 * La console de ZENTRALT.
 *
 * D'OU VIENT CETTE FEUILLE. s2 et imagine avaient chacun la leur, identiques a
 * 93 % (85 lignes de diff sur 600) : c'etait un fork, pas deux designs. Celle
 * ci les reunit et garde leur vocabulaire de classes (« cs- » pour console),
 * pour qu'un oeil qui connait l'une reconnaisse l'autre.
 *
 * ELLE EST SEULE, ET C'EST LE BUT. Une correction d'accessibilite ou de
 * contraste se faisait jusqu'ici deux fois, ou une fois sur deux.
 *
 * TROIS PARTIS :
 *   - les couleurs vivent dans des variables, et SEULES les variables changent
 *     entre le theme clair et le theme sombre. Une couleur ecrite en dur dans
 *     une regle est un bogue de theme qui attend son heure ;
 *   - rien ne depend de JavaScript pour etre LISIBLE. Le menu du compte est un
 *     <details>, les onglets sont des liens. Le script ajoute du confort, il
 *     ne porte pas la page ;
 *   - les cibles tactiles font 44 px au minimum, parce qu'un partenaire
 *     consulte sa consommation depuis un telephone aussi souvent que depuis un
 *     bureau.
 * ===================================================================== */

:root {
  color-scheme: dark light;

  --fond:        #0b0d11;
  --fond-2:      #0f1218;
  --carte:       #12151b;
  --bord:        #232833;
  --bord-fort:   #333a48;
  --texte:       #e7eaf0;
  --doux:        #8f98a8;
  --tres-doux:   #616b7c;

  --accent:      #5b9cff;
  --accent-fond: rgba(91, 156, 255, .13);
  --vert:        #3ecf8e;
  --vert-fond:   rgba(62, 207, 142, .13);
  --rouge:       #ff6b6b;
  --rouge-fond:  rgba(255, 107, 107, .13);
  --ambre:       #f5b44b;
  --ambre-fond:  rgba(245, 180, 75, .13);

  --rayon:       .7rem;
  --rayon-s:     .45rem;
  --ombre:       0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.18);
}

@media (prefers-color-scheme: light) {
  :root {
    --fond:      #f5f6f8;
    --fond-2:    #eef0f4;
    --carte:     #ffffff;
    --bord:      #e2e6ec;
    --bord-fort: #cdd4de;
    --texte:     #11141a;
    --doux:      #5c6675;
    --tres-doux: #8b95a4;
    --ombre:     0 1px 2px rgba(16,24,40,.05), 0 8px 24px rgba(16,24,40,.06);
  }
}

* { box-sizing: border-box; }

/* L'entete est collant : sans cette marge, ce qu'on fait defiler jusqu'en haut (une
   ancre comme /console/cles#cs-form-cle, le formulaire que rejoint « Ajouter
   quelqu'un », un champ qui prend le focus) finissait cache dessous. */
html { scroll-padding-top: 4.5rem; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 15px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Un bouton qui se lit comme un lien : « renvoyez un code », dans le meme formulaire
   que le code, pour marcher sans script. */
.cs-lien-bouton {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: var(--accent); cursor: pointer;
}
.cs-lien-bouton:hover { text-decoration: underline; }

h1 { font-size: 1.45rem; letter-spacing: -.015em; margin: 0 0 .35rem; }
h2 { font-size: 1.05rem; letter-spacing: -.01em; margin: 0 0 .8rem; }
p  { margin: 0 0 .9rem; }
p:last-child { margin-bottom: 0; }

/* Le lien d'evitement : invisible jusqu'au premier Tab, et alors bien visible.
   Une console qui se parcourt au clavier commence par la. */
.cs-saut {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: #061024; padding: .7rem 1.1rem;
  border-radius: 0 0 var(--rayon-s) 0; font-weight: 600;
}
.cs-saut:focus { left: 0; }

/* ---------------------------------------------------------------- Entete */

.cs-entete {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .7rem 1.1rem;
  background: var(--carte); border-bottom: 1px solid var(--bord);
  position: sticky; top: 0; z-index: 20;
}
.cs-entete-marque { display: flex; align-items: center; gap: .6rem; font-weight: 600; }
.cs-entete-marque b { font-weight: 700; opacity: .5; margin-left: .1rem; }
.cs-pastille {
  width: 1.7rem; height: 1.7rem; border-radius: .5rem; flex: none;
  background: linear-gradient(145deg, var(--accent), #7d5bff);
}
.cs-entete-compte { display: flex; align-items: center; gap: .85rem; }
.cs-compte-nom { text-align: right; line-height: 1.25; }
.cs-compte-nom strong { display: block; font-size: .88rem; }
.cs-palier { font-size: .76rem; color: var(--doux); }

/* Le menu du compte : un <details>, donc il s'ouvre sans script. */
.cs-menu { position: relative; }
.cs-menu > summary {
  list-style: none; cursor: pointer;
  width: 2.3rem; height: 2.3rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-fond); color: var(--accent);
  font-weight: 600; font-size: .82rem; border: 1px solid var(--bord);
}
.cs-menu > summary::-webkit-details-marker { display: none; }
.cs-menu-panneau {
  position: absolute; right: 0; top: calc(100% + .5rem); min-width: 15rem;
  background: var(--carte); border: 1px solid var(--bord);
  border-radius: var(--rayon); box-shadow: var(--ombre); padding: .4rem;
  z-index: 30;
}
.cs-menu-tete { padding: .6rem .7rem .7rem; border-bottom: 1px solid var(--bord); margin-bottom: .3rem; }
.cs-menu-tete strong { display: block; font-size: .9rem; }
.cs-menu-tete span { font-size: .8rem; color: var(--doux); word-break: break-all; }
.cs-menu-panneau a {
  display: block; padding: .55rem .7rem; border-radius: var(--rayon-s);
  color: var(--texte); font-size: .9rem;
}
.cs-menu-panneau a:hover { background: var(--fond-2); text-decoration: none; }
.cs-menu-sortie { color: var(--rouge) !important; }

/* ------------------------------------------------------------ Disposition */

.cs-corps { display: grid; grid-template-columns: 15rem 1fr; min-height: calc(100vh - 3.6rem); }

.cs-nav {
  border-right: 1px solid var(--bord); background: var(--carte);
  padding: 1rem .6rem; display: flex; flex-direction: column; gap: .15rem;
}
.cs-nav a {
  display: flex; align-items: center; gap: .65rem;
  padding: .6rem .7rem; border-radius: var(--rayon-s);
  color: var(--doux); font-size: .9rem; min-height: 44px;
}
.cs-nav a:hover { background: var(--fond-2); color: var(--texte); text-decoration: none; }
.cs-nav a[aria-current="page"] { background: var(--accent-fond); color: var(--accent); font-weight: 500; }
.cs-nav svg { width: 1.05rem; height: 1.05rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cs-nav-pied { margin-top: auto; padding-top: 1rem; }
.cs-nav-pied a { font-size: .84rem; color: var(--tres-doux); }

/* min-width: 0, sinon la colonne de la grille ne descend jamais sous la largeur de son
   plus large tableau, et c'est la page entiere qui defile de cote au lieu du tableau,
   qui a pourtant son propre .cs-table-enveloppe (vu le 2026-10-29 sur la page Design 3D). */
.cs-contenu { padding: 1.8rem 1.6rem 4rem; max-width: 62rem; min-width: 0; }

/* La page hors connexion : une carte centree, rien autour. */
.cs-seul { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.cs-seul .cs-carte { width: 100%; max-width: 25rem; }

@media (max-width: 48rem) {
  .cs-corps { grid-template-columns: 1fr; }
  .cs-nav {
    flex-direction: row; overflow-x: auto; border-right: 0;
    border-bottom: 1px solid var(--bord); padding: .5rem;
  }
  .cs-nav a span { display: none; }
  .cs-nav a { padding: .6rem .85rem; }
  .cs-nav-pied { display: none; }
  .cs-contenu { padding: 1.2rem 1rem 3rem; }
  .cs-compte-nom { display: none; }
}

/* ----------------------------------------------------------------- Cartes */

.cs-carte {
  background: var(--carte); border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: 1.3rem 1.4rem; margin-bottom: 1.1rem;
}
.cs-carte-tete {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap;
}
.cs-carte-tete h2 { margin: 0; }
.cs-centre { text-align: center; }
.cs-doux { color: var(--doux); }
.cs-petit { font-size: .86rem; }

.cs-entete-page { margin-bottom: 1.5rem; }
.cs-entete-page p { color: var(--doux); margin: 0; }

/* ---------------------------------------------------------------- Chiffres */

.cs-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .9rem; margin-bottom: 1.1rem; }
.cs-chiffre { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 1rem 1.15rem; }
.cs-chiffre-valeur { font-size: 1.65rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.cs-chiffre-libelle { font-size: .8rem; color: var(--doux); margin-top: .15rem; }
.cs-chiffre-note { font-size: .78rem; color: var(--tres-doux); margin-top: .4rem; }

/* Jauge de quota. Elle change de couleur, mais elle ne dit JAMAIS la couleur
   toute seule : le chiffre est toujours ecrit a cote. */
.cs-jauge { height: .35rem; background: var(--fond-2); border-radius: 1rem; overflow: hidden; margin-top: .6rem; }
.cs-jauge > i { display: block; height: 100%; background: var(--accent); border-radius: 1rem; }
.cs-jauge.att > i { background: var(--ambre); }
.cs-jauge.plein > i { background: var(--rouge); }

/* ---------------------------------------------------------------- Tableaux */

.cs-table-enveloppe { overflow-x: auto; margin: 0 -1.4rem -1.3rem; padding: 0 1.4rem 1.3rem; }
table.cs-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.cs-table th {
  text-align: left; font-weight: 600; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .07em; color: var(--doux); padding: .5rem .7rem; white-space: nowrap;
  border-bottom: 1px solid var(--bord);
}
.cs-table td { padding: .7rem .7rem; border-bottom: 1px solid var(--bord); vertical-align: middle; }
.cs-table tr:last-child td { border-bottom: 0; }
.cs-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.cs-table tr.cs-ligne-groupe td { background: var(--fond); border-top: 1px solid var(--bord-fort); }
.cs-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; }
.cs-vide { text-align: center; color: var(--doux); padding: 2.5rem 1rem; }

/* --------------------------------------------------------------- Etiquettes */

.cs-etiq {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .74rem; font-weight: 500; padding: .18rem .5rem;
  border-radius: 1rem; white-space: nowrap;
  background: var(--fond-2); color: var(--doux);
}
.cs-etiq.ok  { background: var(--vert-fond);  color: var(--vert); }
.cs-etiq.att { background: var(--ambre-fond); color: var(--ambre); }
.cs-etiq.ko  { background: var(--rouge-fond); color: var(--rouge); }
.cs-etiq.info{ background: var(--accent-fond);color: var(--accent); }

/* ---------------------------------------------------------------- Boutons */

.cs-bouton, button.cs-bouton, a.cs-bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 44px; padding: .6rem 1.1rem;
  border: 1px solid transparent; border-radius: var(--rayon-s);
  background: var(--accent); color: #061024;
  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
}
.cs-bouton:hover { filter: brightness(1.08); text-decoration: none; }
.cs-bouton:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.cs-bouton.plein { width: 100%; }
.cs-bouton.doux { background: transparent; border-color: var(--bord-fort); color: var(--texte); }
.cs-bouton.doux:hover { background: var(--fond-2); filter: none; }
.cs-bouton.danger { background: transparent; border-color: var(--rouge); color: var(--rouge); }
.cs-bouton.danger:hover { background: var(--rouge-fond); filter: none; }
.cs-bouton.petit { min-height: 34px; padding: .35rem .7rem; font-size: .82rem; }

/* -------------------------------------------------------------- Formulaires */

.cs-champ { margin-bottom: 1rem; }
.cs-champ > label { display: block; font-size: .86rem; font-weight: 500; margin-bottom: .35rem; }
.cs-champ .cs-aide { font-size: .8rem; color: var(--doux); margin-top: .35rem; }
.cs-champ input[type=text], .cs-champ input[type=email], .cs-champ input[type=password],
.cs-champ input[type=number], .cs-champ select, .cs-champ textarea,
.cs-reglage-form input, .cs-reglage-form textarea {
  width: 100%; min-height: 44px; padding: .6rem .75rem;
  background: var(--fond-2); color: var(--texte);
  border: 1px solid var(--bord-fort); border-radius: var(--rayon-s);
  font: inherit; font-size: .92rem;
}
.cs-champ textarea { min-height: 6rem; resize: vertical; }
.cs-champ input:focus, .cs-champ select:focus, .cs-champ textarea:focus,
.cs-reglage-form input:focus, .cs-reglage-form textarea:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent;
}
.cs-champ input[type=checkbox] { width: 1.05rem; height: 1.05rem; accent-color: var(--accent); }
.cs-cases { display: grid; gap: .45rem; }
.cs-case { display: flex; align-items: flex-start; gap: .55rem; font-size: .9rem; min-height: 30px; }
.cs-case span { color: var(--doux); font-size: .82rem; display: block; }

/* ---------------------------------------------------------------- Bandeaux */

.cs-bandeau {
  padding: .8rem 1rem; border-radius: var(--rayon-s); margin-bottom: 1.1rem;
  font-size: .9rem; border: 1px solid transparent;
}
.cs-bandeau-ok  { background: var(--vert-fond);  border-color: var(--vert);  color: var(--vert); }
.cs-bandeau-err { background: var(--rouge-fond); border-color: var(--rouge); color: var(--rouge); }
.cs-bandeau-info{ background: var(--accent-fond);border-color: var(--accent);color: var(--accent); }
.cs-bandeau-att { background: var(--ambre-fond); border-color: var(--ambre); color: var(--ambre); }

/* ------------------------------------------------------------------- Code */

pre.cs-code, code.cs-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .84rem;
  background: var(--fond-2); border: 1px solid var(--bord); border-radius: var(--rayon-s);
}
pre.cs-code { padding: .85rem 1rem; overflow-x: auto; margin: 0 0 .9rem; line-height: 1.55; }
code.cs-code { padding: .12rem .38rem; }

/* Le secret montre une seule fois. Il DOIT sauter aux yeux : c'est la seule
   occasion de le copier, et un partenaire qui le rate doit tout recommencer. */
.cs-secret {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  background: var(--ambre-fond); border: 1px solid var(--ambre);
  border-radius: var(--rayon-s); padding: .8rem 1rem; margin: .8rem 0;
}
.cs-secret code { flex: 1 1 18rem; word-break: break-all; font-family: ui-monospace, monospace; font-size: .86rem; }

/* ------------------------------------------------------------------ Divers */

.cs-liste-nue { list-style: none; padding: 0; margin: 0; }
.cs-separateur { height: 1px; background: var(--bord); margin: 1.3rem 0; border: 0; }
.cs-rangee { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--bord); }
.cs-rangee:last-child { border-bottom: 0; }
.cs-rangee-titre { font-weight: 500; font-size: .92rem; }
.cs-rangee-note { font-size: .82rem; color: var(--doux); }
.cs-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Le canal Design 3D (/console/admin/design3d) : une ligne par tiroir, deux cases. */
.d3d-grille td, .d3d-grille th { padding-top: .45rem; padding-bottom: .45rem; }
.d3d-grille .d3d-case { text-align: center; width: 6.5rem; }
.d3d-grille .d3d-case input { width: 1.15rem; height: 1.15rem; accent-color: var(--accent); cursor: pointer; }
.d3d-grille .d3d-groupe td { background: var(--fond-2); font-weight: 600; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .06em; color: var(--doux); }
.d3d-enveloppe { margin: 0; padding: 0; border: 1px solid var(--bord); border-radius: var(--rayon-s); }
/* Une aide posee dans un bloc, hors d'un .cs-champ, garde la taille d'une aide. */
.cs-admin-bloc > .cs-aide { font-size: .8rem; color: var(--doux); margin: .6rem 0 .8rem; }
/* Un nom de tiroir ne se coupe pas sur son trait d'union. */
.d3d-id { white-space: nowrap; }
.d3d-comptes td.num { white-space: nowrap; }
.cs-nu { }

@media (prefers-reduced-motion: no-preference) {
  .cs-bouton, .cs-nav a, .cs-menu-panneau a { transition: background .12s ease, color .12s ease, filter .12s ease; }
}

/* =====================================================================
 * Documentation et explorateur
 *
 * Les deux partagent la meme grammaire : une colonne de navigation qui reste
 * en place, une colonne de travail qui defile. Sur telephone les deux se
 * remettent l'une sous l'autre, et la colonne de navigation se replie : sur un
 * ecran de six centimetres, un sommaire de quinze entrees mange la page qu'il
 * est cense aider a lire.
 * ===================================================================== */

.cs-doc { display: grid; grid-template-columns: 14rem 1fr; gap: 1.6rem; align-items: start; }

.cs-doc-sommaire {
  position: sticky; top: 4.4rem; display: flex; flex-direction: column; gap: .1rem;
  max-height: calc(100vh - 6rem); overflow-y: auto; padding-right: .3rem;
}
.cs-doc-sommaire input[type=search] {
  width: 100%; min-height: 38px; padding: .45rem .7rem; margin-bottom: .6rem;
  background: var(--fond-2); color: var(--texte);
  border: 1px solid var(--bord-fort); border-radius: var(--rayon-s); font: inherit; font-size: .86rem;
}
.cs-doc-sommaire a {
  padding: .35rem .6rem; border-radius: var(--rayon-s);
  color: var(--doux); font-size: .84rem; line-height: 1.35;
}
.cs-doc-sommaire a:hover { background: var(--fond-2); color: var(--texte); text-decoration: none; }
.cs-doc-sommaire a.cs-doc-route { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .79rem; }
.cs-doc-sommaire a.ferme { opacity: .45; }
/* Le mot qu'on affiche quand la recherche ne trouve rien : un sommaire vide
   ressemble a une panne, une phrase dit qu'on a bien cherche. */
.cs-doc-rien { margin: .5rem .2rem 0; }
.cs-doc-sommaire a.vu { background: var(--accent-fond); color: var(--accent); }
.cs-doc-groupe {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--tres-doux); margin: .9rem 0 .25rem; padding: 0 .6rem; font-weight: 600;
}
.cs-doc-corps { min-width: 0; }
.cs-doc-titre-espace { font-size: 1.25rem; margin: 2rem 0 .3rem; }
.cs-doc-route-bloc { scroll-margin-top: 4.6rem; }
.cs-doc-route-bloc.ferme { opacity: .62; }
.cs-doc-route-bloc h3 { font-size: 1rem; margin: 0; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.cs-doc-corps section { scroll-margin-top: 4.6rem; }
.cs-doc-corps h4 { font-size: .85rem; text-transform: uppercase; letter-spacing: .07em; color: var(--doux); margin: 1.3rem 0 .6rem; }

.cs-etapes { padding-left: 1.2rem; margin: 0; }
.cs-etapes > li { margin-bottom: 1.1rem; }
.cs-etapes > li:last-child { margin-bottom: 0; }

/* Une liste a puces de documentation : plus serree que les etapes, qui sont
   une marche a suivre, et pas une enumeration. */
.cs-liste { padding-left: 1.2rem; margin: .4rem 0 1rem; }
.cs-liste > li { margin-bottom: .45rem; }
.cs-liste > li:last-child { margin-bottom: 0; }

/* ---- Onglets de langage ---------------------------------------------- */

.cs-extraits { margin: .9rem 0; }
.cs-onglets {
  display: flex; gap: .15rem; flex-wrap: wrap; align-items: center;
  border-bottom: 1px solid var(--bord); margin-bottom: .6rem;
}
.cs-onglet {
  background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--doux); font: inherit; font-size: .84rem; padding: .45rem .7rem;
  cursor: pointer; min-height: 38px;
}
.cs-onglet:hover { color: var(--texte); }
.cs-onglet.actif { color: var(--accent); border-bottom-color: var(--accent); font-weight: 500; }
.cs-onglets-fin { margin-left: auto; padding-right: .3rem; }
.cs-volet { position: relative; }
.cs-volet pre { margin: 0; padding-right: 5rem; }
.cs-copier-volet { position: absolute; top: .5rem; right: .5rem; }

/* ---- Tableaux de parametres ------------------------------------------- */

.cs-table-params td { vertical-align: top; font-size: .86rem; }
.cs-table-params td:first-child { white-space: nowrap; }
.cs-table-params code.cs-code { white-space: nowrap; }
/* La ligne de groupe d'un tableau de champs : « dimensions.metrique », posee
   au-dessus des siens. Elle separe sans ajouter de bruit, et reste lisible
   quand le tableau defile horizontalement sur un telephone. */
.cs-champs-groupe td {
  padding-top: .8rem; font-size: .78rem; text-transform: none;
  letter-spacing: .02em; border-bottom: 0;
}

/* ---- La reponse vive dans la documentation ---------------------------- */

.cs-reponse-vive { margin: .9rem 0 0; }
.cs-reponse { max-height: 26rem; overflow: auto; margin: 0 0 .6rem; }

/* ---- Explorateur ------------------------------------------------------ */

.cs-explorateur { display: grid; grid-template-columns: 21rem 1fr; gap: 1.1rem; align-items: start; }
.cs-explo-gauche > .cs-carte { position: sticky; top: 4.4rem; max-height: calc(100vh - 6rem); overflow-y: auto; }
.cs-explo-droite { min-width: 0; }

.cs-url-ligne { display: flex; gap: .5rem; align-items: stretch; }
.cs-url-ligne input {
  flex: 1 1 auto; min-width: 0; min-height: 44px; padding: .6rem .75rem;
  background: var(--fond-2); color: var(--texte);
  border: 1px solid var(--bord-fort); border-radius: var(--rayon-s);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem;
}
.cs-url-ligne button { flex: none; }

.cs-explo-param { margin-bottom: .85rem; }
.cs-explo-param > label { display: block; font-size: .84rem; font-weight: 500; margin-bottom: .25rem; }
.cs-explo-param > label code { font-size: .84rem; }
.cs-explo-param .cs-aide { font-size: .78rem; color: var(--doux); margin-top: .25rem; }
.cs-explo-param input, .cs-explo-param select {
  width: 100%; min-height: 40px; padding: .5rem .65rem;
  background: var(--fond-2); color: var(--texte);
  border: 1px solid var(--bord-fort); border-radius: var(--rayon-s);
  font: inherit; font-size: .88rem;
}
.cs-explo-param input:focus, .cs-explo-param select:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent;
}
.cs-explo-groupe {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--tres-doux); font-weight: 600; margin: 1.2rem 0 .5rem;
}

#cs-explo-liste li {
  display: flex; align-items: center; gap: .6rem; justify-content: space-between;
  padding: .55rem 0; border-bottom: 1px solid var(--bord); font-size: .84rem;
}
#cs-explo-liste li:last-child { border-bottom: 0; }
#cs-explo-liste .r { font-family: ui-monospace, Menlo, monospace; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0; }
#cs-explo-liste button { flex: none; }

@media (max-width: 62rem) {
  .cs-doc, .cs-explorateur { grid-template-columns: 1fr; }
  .cs-doc-sommaire, .cs-explo-gauche > .cs-carte { position: static; max-height: none; }
  .cs-doc-sommaire { flex-direction: row; flex-wrap: wrap; gap: .3rem; }
  .cs-doc-sommaire input[type=search] { flex: 1 1 100%; }
  .cs-doc-sommaire .cs-doc-groupe { flex: 1 1 100%; margin: .6rem 0 0; }
  .cs-doc-sommaire a { border: 1px solid var(--bord); }
}

/* =====================================================================
 * Ce que les nouvelles actions ont demande
 * ===================================================================== */

/* ---- Filtres du journal ------------------------------------------------ */

.cs-filtres-grille {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .6rem 1rem; margin-bottom: 1rem;
}
.cs-filtres-grille .cs-champ { margin-bottom: 0; }
.cs-filtres-grille input[type=date] { color-scheme: dark light; }

/* ---- Lignes de detail depliees ----------------------------------------- */

.cs-detail-cle > td, .cs-detail-appel > td { background: var(--fond-2); padding: 1.1rem 1.2rem; }
.cs-detail-grille {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.2rem; align-items: start;
}
.cs-detail-grille h4 {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--doux); margin: 0 0 .5rem; font-weight: 600;
}
.cs-detail-grille p, .cs-detail-grille ul { margin: 0; font-size: .86rem; }
.cs-detail-grille li { padding: .2rem 0; display: flex; justify-content: space-between; gap: .6rem; }
.cs-detail-grille .cs-champ { margin-bottom: 0; }

/* La fiche d'un appel : des paires, alignees, lisibles a la verticale. */
.cs-fiche { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .6rem 1.4rem; margin: 0; }
.cs-fiche > div { display: flex; gap: .6rem; align-items: baseline; }
.cs-fiche dt {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--doux); font-weight: 600; flex: 0 0 9rem;
}
.cs-fiche dd { margin: 0; font-size: .86rem; word-break: break-word; min-width: 0; }

/* ---- Etats vides, plus bavards ----------------------------------------- */

.cs-vide p { margin: 0 0 .4rem; }
.cs-vide p:last-child { margin-bottom: 0; }

/* ---- La palette de commandes -------------------------------------------- */

.cs-palette {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0, 0, 0, .45);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 12vh 1rem 1rem;
}
.cs-palette-boite {
  width: 100%; max-width: 32rem;
  background: var(--carte); border: 1px solid var(--bord-fort);
  border-radius: var(--rayon); box-shadow: var(--ombre); overflow: hidden;
}
.cs-palette-champ {
  width: 100%; border: 0; border-bottom: 1px solid var(--bord);
  background: transparent; color: var(--texte);
  font: inherit; font-size: 1rem; padding: .95rem 1.1rem;
}
.cs-palette-champ:focus { outline: none; }
.cs-palette-liste { list-style: none; margin: 0; padding: .35rem; max-height: 22rem; overflow-y: auto; }
.cs-palette-liste li {
  padding: .55rem .75rem; border-radius: var(--rayon-s);
  font-size: .92rem; cursor: pointer;
}
.cs-palette-liste li.vise { background: var(--accent-fond); color: var(--accent); }
.cs-palette-liste li:hover { background: var(--fond-2); }
.cs-palette-pied {
  padding: .5rem 1.1rem; border-top: 1px solid var(--bord);
  font-size: .76rem; color: var(--tres-doux);
}

/* Le rappel du raccourci, dans l'entete. Discret : il s'adresse a ceux qui
   reviennent, pas a ceux qui decouvrent. */
.cs-raccourci {
  display: none; align-items: center; gap: .3rem;
  border: 1px solid var(--bord); border-radius: var(--rayon-s);
  padding: .3rem .55rem; font-size: .76rem; color: var(--tres-doux);
  background: var(--fond-2); cursor: pointer;
}
.cs-raccourci kbd {
  font-family: inherit; font-size: .72rem; background: var(--carte);
  border: 1px solid var(--bord); border-radius: .25rem; padding: 0 .25rem;
}
@media (min-width: 48rem) { .cs-raccourci { display: inline-flex; } }

/* ---- L'administration (/console/admin) -------------------------------------
   Deux blocs dans le formulaire : le compte, qui ne s'ouvre que pour un nouveau
   compte, et la personne. Le « [hidden] » est rappele ici : une classe qui pose un
   display l'emporte sur l'attribut, et le bloc du compte resterait visible. */

.cs-admin-form [hidden] { display: none !important; }
.cs-admin-bloc {
  border: 1px solid var(--bord); border-radius: var(--rayon-s);
  padding: 1rem 1.1rem .2rem; margin: 0 0 1.1rem; min-width: 0;
}
.cs-admin-bloc legend {
  font-size: .78rem; font-weight: 600; color: var(--doux);
  text-transform: uppercase; letter-spacing: .04em; padding: 0 .4rem;
}
.cs-admin-titre { margin: 2rem 0 1rem; }
.cs-admin-compte .cs-carte-tete { align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
/* Le texte prend la place, le bouton reste a droite : sinon il passait dessous des
   qu'un compte lisait plus de trois choses, et restait a droite pour les autres. */
.cs-admin-compte .cs-carte-tete > div { flex: 1 1 18rem; min-width: 0; }
.cs-admin-compte .cs-carte-tete p { margin: .35rem 0 0; }

/* ---- Le canal Akeneo (/console/admin/akeneo) -------------------------------
   Un nom decoupe en blocs : chaque bloc a sa couleur, et sa legende dessous dit ce
   qu'il porte. La couleur n'est jamais seule a parler (le texte de la legende est
   la), et les teintes viennent des variables du theme. */

.ak-nom {
  display: flex; flex-wrap: wrap; align-items: center; gap: .1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .95rem;
  background: var(--fond-2); border: 1px solid var(--bord); border-radius: var(--rayon-s);
  padding: .7rem .85rem; margin: .4rem 0 .8rem; word-break: break-all;
}
.ak-bloc { padding: .1rem .3rem; border-radius: .3rem; }
.ak-sep { color: var(--tres-doux); }
.ak-b1 { background: var(--accent-fond); color: var(--accent); }
.ak-b2 { background: var(--fond); color: var(--texte); border: 1px solid var(--bord); }
.ak-b3 { background: var(--vert-fond); color: var(--vert); }
.ak-b4 { background: var(--fond); color: var(--doux); border: 1px solid var(--bord); }
.ak-b5 { background: var(--ambre-fond); color: var(--ambre); }
.ak-b6 { background: var(--rouge-fond); color: var(--rouge); font-weight: 700; }
.ak-legende { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .3rem; font-size: .84rem; }
.ak-legende li { display: flex; align-items: center; gap: .5rem; }
.ak-pastille { width: .8rem; height: .8rem; border-radius: .2rem; flex: none; border: 1px solid var(--bord-fort); }

/* Le SAS de Design 3D : les apercus d'une demande, propose et en place (2026-10-30). */
.d3d-apercus { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .9rem; }
.d3d-apercus figure { margin: 0; display: flex; flex-direction: column; gap: .35rem; max-width: 100%; }
.d3d-apercus img { display: block; width: 320px; max-width: 100%; height: auto; max-height: 240px; object-fit: contain;
  border: 1px solid var(--bord); border-radius: var(--rayon-s); background: var(--fond-2); }
.d3d-demande .cs-carte-tete { align-items: flex-start; gap: 1rem; }
.d3d-demande .cs-carte-tete > div { flex: 1 1 auto; min-width: 0; }

/* Le registre de reglages (2026-11-06) */
.cs-reglage { padding: 1rem 0; border-top: 1px solid var(--bord); }
.cs-reglage:first-of-type { border-top: 0; }
.cs-reglage h3 { margin: 0 0 .3rem; font-size: 1rem; }
.cs-reglage-form { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: .6rem 0; }
.cs-reglage-form input { max-width: 11rem; }
.cs-reglage-form input[type=date] { max-width: 14rem; }
.cs-reglage-form textarea { flex: 1 1 22rem; }

/* L'ecran d'Atlantis (2026-11-06) : onglets en liens, recherche */
a.cs-onglet { display: inline-flex; align-items: center; gap: .35rem; text-decoration: none; }
.cs-recherche { display: flex; gap: .5rem; align-items: center; }
.cs-recherche input[type=search] {
  min-height: 38px; min-width: 16rem; padding: .45rem .7rem; background: var(--fond-2); color: var(--texte);
  border: 1px solid var(--bord-fort); border-radius: var(--rayon-s); font: inherit; font-size: .9rem;
}

/* Ouvrir une liste (2026-11-06) : la liste, la remise et le bouton sur une ligne. */
.cs-en-ligne { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.cs-en-ligne select, .cs-en-ligne input[type=number] {
  min-height: 34px; padding: .35rem .6rem; background: var(--fond-2); color: var(--texte);
  border: 1px solid var(--bord-fort); border-radius: var(--rayon-s); font: inherit; font-size: .85rem;
}
.cs-en-ligne input[type=number] { width: 7.5rem; }

/* Une case dans un champ (confidentialite a l activation, 2026-11-06) : la case a cote de son texte. */
.cs-champ label.cs-case { display: flex; align-items: flex-start; gap: .55rem; font-weight: 400; }
.cs-champ label.cs-case input { margin-top: .2rem; flex: none; }

/* Le code QR de l'application d'authentification (2026-11-06) : fond blanc, quel que soit le theme. */
.cs-qr { background: #fff; padding: 10px; border-radius: var(--rayon-s); width: 220px; max-width: 100%; margin: .4rem 0 1rem; }
.cs-qr svg { display: block; width: 100%; height: auto; }

/* Le controle du fichier maitre (/console/atlantis?vue=maitre, 2026-11-10) : la table des regles
   se lit par gravite, et un produit porte ses constats l'un sous l'autre, chacun avec son detail. */
.cs-table .cs-num { text-align: right; white-space: nowrap; }
.cs-table tr.cs-ligne-titre th {
  text-align: left; font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--doux); padding-top: 1.1rem; border-bottom-width: 2px;
}
.cs-table tr.actif td { background: var(--accent-fond); }
.cs-maitre-constat { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .5rem; margin: .15rem 0; }
.cs-maitre-constat .cs-etiq { flex: none; }
#maitre-table td { vertical-align: top; }
#maitre-table td:first-child { white-space: nowrap; }
#maitre-table th:nth-child(2), #maitre-table td:nth-child(2) { min-width: 15rem; }
#maitre-table th:nth-child(3), #maitre-table td:nth-child(3), #maitre-table th:nth-child(4), #maitre-table td:nth-child(4) { width: 34%; }
#maitre-notes ul { margin: 0; padding-left: 1.1rem; }
#maitre-notes li { margin: .3rem 0; }