/* =====================================================================
 * 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); }

.cs-contenu { padding: 1.8rem 1.6rem 4rem; max-width: 62rem; }

/* 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-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 {
  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 {
  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; }
.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); }