/* ============================================================================
   LA CONSOLE DE L'ÉDITEUR — sa propre densité, et pourquoi

   ⚠️⚠️ CETTE FEUILLE DÉROGE À `DESIGN.md` § 6 — « Barre haute. Pas de barre
   latérale. » — ET C'EST LE DOCUMENT LUI-MÊME QUI L'AUTORISE.

   Sa justification est écrite noir sur blanc : « Regard AI a une barre latérale
   […] : c'est un outil qu'ON HABITE. regard pro s'ouvre trois fois par an —
   une barre latérale y serait un mur. »

   La console est l'exact contraire du cas visé. Elle s'ouvre tous les jours,
   par une seule personne qui connaît son outil, pour piloter tous les clubs à
   la fois. Lui servir la mise en page d'un bénévole occasionnel — colonne
   étroite, un sujet par écran, beaucoup d'air — c'est lui faire scroller une
   heure pour ce qui tient en un tableau.

   ⚠️ L'ACCENT EST LE ROUGE REGARD, et c'est déjà la règle : `DESIGN.md` § 2.4
   réserve `#E8001D` à l'ÉDITEUR, et l'interdit sur tout écran métier d'une
   structure. La console est le seul endroit du produit où il a sa place —
   c'est aussi ce qui interdit de la confondre, d'un coup d'œil, avec l'écran
   d'un client.

   ⚠️ Elle n'emprunte AUCUNE couleur de club. Un accent de structure ici
   laisserait croire qu'on est chez quelqu'un.
   ========================================================================= */

.console {
  --console-barre: 15rem;
  --console-fond: #F7F6F4;
  --console-panneau: var(--blanc);
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--console-barre) minmax(0, 1fr);
  background: var(--console-fond);
  font-family: var(--sans);
  color: var(--encre);
}

/* ---------------------------------------------------------------- la barre */

.console-barre {
  background: var(--encre);
  color: var(--blanc);
  padding: var(--e-4) var(--e-3);
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.console-marque {
  font-size: var(--t-corps);
  font-weight: var(--g-noir);
  letter-spacing: -0.01em;
  color: var(--blanc);
  text-decoration: none;
}
/* Le point du logo, en rouge éditeur — la seule tache de couleur de la barre. */
.console-marque b { color: var(--rouge-regard); }
.console-marque span {
  display: block;
  font-size: var(--t-micro);
  font-weight: var(--g-normal);
  letter-spacing: var(--approche-micro);
  text-transform: uppercase;
  opacity: 0.55;
  margin-top: 2px;
}

.console-nav { display: flex; flex-direction: column; gap: 2px; }
.console-nav a {
  display: block;
  padding: 8px 10px;
  border-radius: var(--rayon);
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-size: var(--t-secondaire);
  font-weight: var(--g-demi);
}
.console-nav a:hover { background: rgba(255, 255, 255, 0.08); color: var(--blanc); }
.console-nav a.actif {
  background: var(--blanc);
  color: var(--encre);
  /* ⚠️ Le rouge en trait INTÉRIEUR, jamais en fond : posé sous la pastille il
     tomberait derrière le bord et deviendrait invisible — constaté sur la
     planche de style, `DESIGN.md` § 6. */
  box-shadow: inset 0 -3px 0 var(--rouge-regard);
}
.console-nav .rubrique {
  font-size: var(--t-micro);
  letter-spacing: var(--approche-micro);
  text-transform: uppercase;
  opacity: 0.45;
  padding: var(--e-3) 10px 4px;
}

.console-pied {
  margin-top: auto;
  font-size: var(--t-micro);
  opacity: 0.5;
  line-height: 1.5;
}
.console-pied form { margin-top: var(--e-2); }
.console-pied button {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.75);
  border-radius: var(--rayon);
  padding: 5px 10px;
  font: inherit;
  font-size: var(--t-micro);
  cursor: pointer;
}
.console-pied button:hover { border-color: var(--blanc); color: var(--blanc); }

/* --------------------------------------------------------------- le contenu */

.console-contenu { padding: var(--e-4) var(--e-5); min-width: 0; }

.console-entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
  flex-wrap: wrap;
  margin-bottom: var(--e-4);
}
.console-entete h1 {
  font-size: var(--t-titre);
  font-weight: var(--g-noir);
  letter-spacing: -0.02em;
  margin: 0;
}
.console-entete .sous-titre {
  font-size: var(--t-secondaire);
  color: var(--gris);
  margin: 4px 0 0;
}
.console-entete .actions { display: flex; gap: var(--e-2); align-items: center; }

.console-bouton {
  display: inline-block;
  background: var(--encre);
  color: var(--blanc);
  border: 1px solid var(--encre);
  border-radius: var(--rayon);
  padding: 8px 14px;
  font-size: var(--t-secondaire);
  font-weight: var(--g-demi);
  text-decoration: none;
  cursor: pointer;
}
.console-bouton:hover { background: #262626; }
.console-bouton.discret {
  background: var(--blanc); color: var(--encre); border-color: var(--ligne);
}
.console-bouton.discret:hover { border-color: var(--encre); background: var(--blanc); }

/* ------------------------------------------------------------- les panneaux */

.console-panneau {
  background: var(--console-panneau);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon-grand);
  padding: var(--e-4);
  margin-bottom: var(--e-4);
}
.console-panneau > h2 {
  font-size: var(--t-section);
  font-weight: var(--g-gras);
  margin: 0 0 var(--e-1);
}
.console-panneau > .aide { margin-top: 0; }

.console-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); }
@media (max-width: 60rem) { .console-grille { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------- le tableau */

.console-table { width: 100%; border-collapse: collapse; font-size: var(--t-secondaire); }
.console-table th {
  text-align: left;
  font-size: var(--t-micro);
  letter-spacing: var(--approche-micro);
  text-transform: uppercase;
  color: var(--gris);
  font-weight: var(--g-demi);
  padding: 0 var(--e-2) 6px;
  border-bottom: 1px solid var(--ligne);
  white-space: nowrap;
}
.console-table td {
  padding: 10px var(--e-2);
  border-bottom: 1px solid var(--ligne);
  vertical-align: middle;
}
.console-table tbody tr:hover { background: var(--console-fond); }
.console-table .nombre { text-align: right; font-variant-numeric: tabular-nums; }
.console-table .adresse { font-family: var(--mono); font-size: var(--t-petit); color: var(--gris); }
.console-table a { color: var(--encre); font-weight: var(--g-demi); text-decoration: none; }
.console-table a:hover { text-decoration: underline; }
.console-table tr.archive td { opacity: 0.45; }

/* ------------------------------------------------------------- les pastilles */

.pastille {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--rayon-plein);
  font-size: var(--t-micro);
  font-weight: var(--g-demi);
  border: 1px solid;
  white-space: nowrap;
}
.pastille.actif   { color: var(--etat-succes-texte); background: var(--etat-succes-fond); border-color: var(--etat-succes-bord); }
.pastille.impaye  { color: var(--etat-alerte-texte); background: var(--etat-alerte-fond); border-color: var(--etat-alerte-bord); }
.pastille.suspendu,
.pastille.resilie { color: var(--etat-retard-texte); background: var(--etat-retard-fond); border-color: var(--etat-retard-bord); }
.pastille.neutre  { color: var(--etat-neutre-texte); background: var(--etat-neutre-fond); border-color: var(--etat-neutre-bord); }

/* --------------------------------------------------------------- les champs */

.console-champ { margin-bottom: var(--e-3); }
.console-champ label {
  display: block;
  font-size: var(--t-petit);
  font-weight: var(--g-demi);
  margin-bottom: 4px;
}
.console-champ input[type="text"],
.console-champ input[type="email"],
.console-champ select {
  width: 100%;
  height: var(--h-champ);
  padding: 0 10px;
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  background: var(--blanc);
  font: inherit;
  font-size: var(--t-secondaire);
  color: var(--encre);
}
.console-champ input:focus-visible,
.console-champ select:focus-visible { outline: 2px solid var(--encre); outline-offset: 1px; }
.console-champ .aide { font-size: var(--t-petit); color: var(--gris); margin: 4px 0 0; line-height: 1.45; }

.console-cases { display: flex; flex-direction: column; gap: 6px; }
.console-cases label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 10px;
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  background: var(--blanc);
  font-size: var(--t-secondaire);
  cursor: pointer;
}
.console-cases label:hover { border-color: var(--encre); }
.console-cases input { margin-top: 2px; flex: none; }
.console-cases .aide-case { color: var(--gris); }

.console-formules { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: var(--e-3); }
.console-formules span { font-size: var(--t-petit); color: var(--gris); }
.console-formules a {
  border: 1px solid var(--ligne);
  border-radius: var(--rayon-plein);
  padding: 4px 12px;
  font-size: var(--t-petit);
  font-weight: var(--g-demi);
  color: var(--encre);
  text-decoration: none;
  background: var(--blanc);
}
.console-formules a:hover { border-color: var(--encre); }

/* --------------------------------------------------------------- messages */

.console-message {
  border-left: 3px solid var(--encre);
  background: var(--blanc);
  border-radius: var(--rayon);
  padding: 10px var(--e-3);
  font-size: var(--t-secondaire);
  margin-bottom: var(--e-3);
}
.console-message.succes { border-left-color: var(--etat-succes-bord); }
.console-message.refus  { border-left-color: var(--etat-retard-bord); }
.console-message code { font-family: var(--mono); font-size: var(--t-petit); }

.console-chiffres { display: flex; gap: var(--e-4); flex-wrap: wrap; }
.console-chiffres div { min-width: 6rem; }
.console-chiffres .valeur {
  font-size: var(--t-chiffre);
  font-weight: var(--g-noir);
  font-variant-numeric: tabular-nums;
  display: block;
  line-height: 1.1;
}
.console-chiffres .quoi {
  font-size: var(--t-micro);
  letter-spacing: var(--approche-micro);
  text-transform: uppercase;
  color: var(--gris);
}

.console-actions { display: flex; gap: var(--e-2); margin-top: var(--e-3); }

/* ⚠️ Sous 60 rem la barre passe en haut : la console reste utilisable sur un
   portable en déplacement, sans devenir un menu déroulant qui cache tout. */
@media (max-width: 60rem) {
  .console { grid-template-columns: 1fr; }
  .console-barre { position: static; height: auto; flex-direction: row; align-items: center;
                   flex-wrap: wrap; gap: var(--e-3); }
  .console-nav { flex-direction: row; flex-wrap: wrap; }
  .console-nav .rubrique { display: none; }
  .console-pied { margin: 0 0 0 auto; }
  .console-contenu { padding: var(--e-3); }
}

/* ⚠️ Le titre d'un groupe d'options. Sans lui, la liste à plat oblige à se
   souvenir de ce que contient « Gestion » — or c'est exactement ce qu'on
   regarde en réglant un client. */
.console-groupe {
  font-size: var(--t-micro);
  letter-spacing: var(--approche-micro);
  text-transform: uppercase;
  color: var(--gris);
  font-weight: var(--g-demi);
  margin: var(--e-3) 0 6px;
}
.console-groupe:first-of-type { margin-top: var(--e-2); }

/* ============================================================================
   LA PORTE — connexion et confirmation

   ⚠️ Ces deux écrans n'ont NI barre latérale NI opérateur à montrer : il n'y a
   pas encore de session. Une barre vide, ou pire une barre avec des liens qui
   redirigent tous vers ici, ferait croire à une panne. On sert donc une carte
   centrée — mais dans le langage de la console, jamais dans celui des clients :
   c'est le premier écran, et c'est là qu'on doit savoir où l'on est.
   ========================================================================= */

/* ⚠️ Sans barre, la grille à deux colonnes laisserait une colonne vide de
   15 rem à gauche. On repasse en bloc simple. */
body.console:has(.console-porte) { display: block; background: var(--console-fond); }
body.console:has(.console-porte) .console-contenu { padding: 0; }

.console-porte {
  max-width: 26rem;
  margin: 12vh auto;
  padding: var(--e-5);
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon-grand);
  box-shadow: var(--ombre-carte);
}
.console-porte h1 { font-size: var(--t-section); font-weight: var(--g-gras); margin: 0 0 var(--e-2); }
.console-porte .aide { font-size: var(--t-secondaire); color: var(--gris); line-height: 1.5; }

.console-marque-porte {
  font-size: var(--t-corps);
  font-weight: var(--g-noir);
  letter-spacing: -0.01em;
  margin: 0 0 var(--e-4);
}
.console-marque-porte b { color: var(--rouge-regard); }
.console-marque-porte span {
  display: block;
  font-size: var(--t-micro);
  font-weight: var(--g-normal);
  letter-spacing: var(--approche-micro);
  text-transform: uppercase;
  color: var(--gris);
  margin-top: 2px;
}

/* ⚠️ Le bloc d'intervention se distingue : c'est le seul endroit de la console
   qui donne accès aux DONNÉES d'un client. Le rouge éditeur en trait, pour
   qu'on ne le confonde pas avec un réglage ordinaire. */
.console-intervention { border-left: 3px solid var(--rouge-regard); }
.console-intervention .console-actions form { margin: 0; }

/* Les raccourcis vers les outils du client. */
.console-outils .console-cases form { margin: 0; }
.console-outil {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  background: var(--blanc);
  font: inherit;
  font-size: var(--t-secondaire);
  color: var(--encre);
  cursor: pointer;
}
.console-outil:hover { border-color: var(--encre); }
.console-outil strong { display: block; }
.console-outil .aide-case { color: var(--gris); }