/* ============================================================================
   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"],
/* ⚠️ Ajouté le 10/09/2026 avec la porte commune : c'est le premier champ de
   mot de passe de cette feuille. Sans lui, il tombait au style par défaut du
   navigateur, seul de son espèce, juste sous un champ correctement dessiné. */
.console-champ input[type="password"],
.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); }

/* --- Une option qui ne gouverne encore rien ------------------------------- *
 * ⚠️ Elle reste COCHABLE : retirer la case déciderait à la place de l'éditeur
 * ce qu'il a le droit de vendre. On montre l'état de fait, on ne l'impose pas.
 * Le motif vient du registre, jamais d'une phrase recopiée ici. */

.case-sans-effet { opacity: 0.82; }

.sans-effet-motif {
  display: inline-block;
  margin-block-start: 0.25rem;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--rouge-regard);
}