/* Backoffice — alphadmin.leloupnoir.com
 *
 * Feuille distincte de celle du site : le backoffice n'a pas à être beau
 * dans le même registre, il doit être LISIBLE et sans ambiguïté. Fond plus
 * neutre, contrastes plus francs, pas d'anglaise.
 */

:root {
  --nuit:        #0E0E13;
  --laque:       #17171F;
  --carte:       #1C1C25;
  --filet:       #2A2A36;
  --filet-vif:   #3A3A4A;
  --texte:       #D6D8E4;
  --texte-sourd: #8B8FA3;
  --texte-vif:   #F0F1F7;
  --alpha:       #C9A227;
  --valider:     #4E9A6A;
  --refuser:     #C4566B;
  --alerte:      #D9853B;
  --rayon:       6px;
  --police:      system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 400 15px/1.55 var(--police);
  color: var(--texte);
  background: var(--nuit);
}
body.nu { display: grid; place-items: center; min-height: 100vh; }

a { color: #9BB8E8; text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- Barre supérieure --- */

.barre {
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0.7rem 1.5rem;
  background: var(--laque);
  border-bottom: 1px solid var(--filet);
  position: sticky; top: 0; z-index: 10;
}
.marque {
  display: flex; align-items: center; gap: 0.5rem;
  font-weight: 600; color: var(--texte-vif);
}
.marque__alpha, .connexion__alpha {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.7rem; height: 1.7rem;
  font-size: 1.1rem; font-weight: 600;
  color: var(--nuit); background: var(--alpha);
  border-radius: 50%;
}
.navigation { display: flex; gap: 1.2rem; flex: 1; }
.navigation a { color: var(--texte-sourd); font-weight: 500; }
.navigation a:hover { color: var(--texte-vif); text-decoration: none; }

.identite { display: flex; align-items: center; gap: 0.7rem; font-size: 0.85rem; }
.identite__nom { color: var(--texte-vif); font-weight: 500; }
.identite form { margin: 0; }

/* Bandeau d'une session ouverte par lien : il doit se voir, c'est une
   session diminuée. */
.bandeau-lien {
  margin: 0; padding: 0.6rem 1.5rem;
  background: rgba(217, 133, 59, 0.14);
  border-bottom: 1px solid rgba(217, 133, 59, 0.35);
  font-size: 0.85rem; color: var(--alerte);
}

.page { max-width: 1200px; margin: 0 auto; padding: 1.8rem 1.5rem 4rem; }

h1 { font-size: 1.5rem; font-weight: 600; color: var(--texte-vif); margin: 0 0 0.4rem; }
h2 { font-size: 1.05rem; font-weight: 600; color: var(--texte-vif); margin: 0 0 0.9rem; }
.chapeau { color: var(--texte-sourd); margin: 0 0 1.6rem; max-width: 60ch; }
.discret { color: var(--texte-sourd); font-size: 0.88rem; }
.aide { color: var(--texte-sourd); font-size: 0.82rem; display: block; margin-top: 0.35rem; }

/* --- Blocs --- */

.carte {
  padding: 1.2rem 1.3rem;
  background: var(--carte);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  margin-bottom: 1.2rem;
}
/* Deux colonnes de cartes.
   `align-items: stretch` — le défaut — plutôt que `start` : des cartes de
   hauteurs voisines s'alignent alors sur la plus haute, ce qui vaut mieux
   qu'un décrochement de quelques pixels. Les blocs vraiment plus courts
   sont sortis de la grille plutôt que d'y creuser un vide. */
.colonnes {
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
}
.colonnes > .carte { margin-bottom: 0; display: flex; flex-direction: column; }
/* Hors grille, une carte reste en flux normal : la rendre flex casserait
   l'empilement de ses propres blocs. */
.carte:not(.colonnes > .carte) { display: block; }
/* Le formulaire occupe la place disponible : le bouton tombe en bas, à la
   même hauteur d'une carte à l'autre. */
.colonnes > .carte > form { display: flex; flex-direction: column; flex: 1; }
.colonnes > .carte > form .bouton { align-self: flex-start; margin-top: auto; }


/* Champ de mot de passe avec bouton de révélation.
   Le bouton se pose dans le champ, à droite : hors du champ, il décalerait
   la grille des formulaires. Le rembourrage droit de l'input lui laisse la
   place, sinon le texte passerait dessous. */
.champ-secret { position: relative; display: block; }
.champ-secret input { padding-right: 2.8rem; width: 100%; }

.champ-secret__oeil {
  position: absolute;
  top: 50%; right: 0.5rem;
  transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem;
  padding: 0; border: 0; background: none;
  border-radius: 50%;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.champ-secret__oeil svg { width: 1.15rem; height: 1.15rem; }
.champ-secret__oeil { color: var(--texte-sourd); }
.champ-secret__oeil:hover,
.champ-secret__oeil[aria-pressed="true"] {
  color: var(--texte-vif);
  background: rgba(255, 255, 255, 0.06);
}

/* Onglets : deux listes de nature différente, pas un filtre parmi d'autres.
   Les placer au-dessus du formulaire dit qu'on choisit d'abord QUOI on
   regarde, puis comment on l'affine. */
.onglets {
  display: flex; gap: 0.3rem;
  margin: 0 0 1.2rem;
  border-bottom: 1px solid var(--filet);
}
.onglets a {
  padding: 0.55rem 1.1rem;
  color: var(--texte-sourd);
  font-weight: 500; font-size: 0.9rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.onglets a:hover { color: var(--texte); text-decoration: none; }
.onglets a.actuel {
  color: var(--texte-vif);
  border-bottom-color: var(--alpha);
}

/* Verdict d'un contrôle à la saisie. */
.etat-pseudo {
  display: block; min-height: 1.2em;
  font-size: 0.82rem; margin-top: 0.35rem;
  color: var(--texte-sourd);
}
.etat-pseudo--ok  { color: var(--valider); }
.etat-pseudo--non { color: var(--refuser); }

h3 {
  font-size: 0.92rem; font-weight: 600; color: var(--texte-vif);
  margin: 0 0 0.6rem;
}

/* Une mention qui suit un bouton reprend son alignement. */
.bouton + .aide { margin-top: 0.6rem; }
.grille {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

/* --- Chiffres du tableau de bord --- */

.chiffres {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  margin: 1.4rem 0 2.2rem;
}
.chiffre {
  display: flex; flex-direction: column; gap: 0.2rem;
  padding: 1.2rem;
  background: var(--carte);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  color: var(--texte);
}
a.chiffre:hover { border-color: var(--filet-vif); text-decoration: none; }
.chiffre--alerte { border-color: rgba(217, 133, 59, 0.5); }
.chiffre__valeur { font-size: 2rem; font-weight: 600; color: var(--texte-vif); line-height: 1; }
.chiffre--alerte .chiffre__valeur { color: var(--alerte); }
.chiffre__nom { font-size: 0.82rem; color: var(--texte-sourd); }

/* --- Tableaux --- */

table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { text-align: left; padding: 0.65rem 0.7rem; border-bottom: 1px solid var(--filet); }
th {
  font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--texte-sourd);
}
tbody tr:hover { background: rgba(255, 255, 255, 0.02); }
/* Un dossier qui attend depuis trois jours doit sauter aux yeux. */
.ligne--urgente { background: rgba(217, 133, 59, 0.07); }
code {
  font: 0.85em ui-monospace, monospace;
  color: var(--texte-sourd);
  background: rgba(255, 255, 255, 0.04);
  padding: 0.1em 0.4em; border-radius: 3px;
}

dl.fiche-donnees { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1rem; margin: 0; }
dl.fiche-donnees dt { color: var(--texte-sourd); font-size: 0.85rem; }
dl.fiche-donnees dd { margin: 0; }

.liste-nue, .liste-journal { list-style: none; padding: 0; margin: 0; }
.liste-journal li { padding: 0.35rem 0; border-bottom: 1px solid var(--filet); font-size: 0.85rem; }
.rangee { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; padding: 0.4rem 0; }

/* --- Formulaires --- */

.champ { margin-bottom: 1rem; }
.champ label {
  display: block; margin-bottom: 0.3rem;
  font-size: 0.78rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--texte-sourd);
}
input[type=text], input[type=email], input[type=password], input[type=search],
input[type=number], select, textarea {
  width: 100%; padding: 0.55rem 0.7rem;
  font: inherit; color: var(--texte-vif);
  background: var(--nuit);
  border: 1px solid var(--filet-vif);
  border-radius: var(--rayon);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--alpha); outline-offset: 1px; border-color: transparent;
}
textarea { resize: vertical; }
.en-ligne { margin: 0; }
.en-ligne select { width: auto; min-width: 8rem; padding: 0.3rem 0.5rem; font-size: 0.85rem; }

.case { display: flex; gap: 0.6rem; align-items: flex-start; margin-bottom: 0.6rem; font-size: 0.9rem; }
.case input { margin-top: 0.25rem; }

.filtres { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; }
.filtres .champ { margin-bottom: 0; flex: 1 1 12rem; }

.bouton {
  display: inline-block; padding: 0.55rem 1.2rem;
  font: 600 0.85rem var(--police);
  color: var(--nuit); background: var(--texte-vif);
  border: 1px solid var(--texte-vif); border-radius: var(--rayon);
  cursor: pointer;
}
.bouton:hover { text-decoration: none; opacity: 0.92; }
.bouton--discret {
  color: var(--texte); background: transparent; border-color: var(--filet-vif);
  padding: 0.35rem 0.8rem; font-size: 0.8rem;
}
.bouton--valider { background: var(--valider); border-color: var(--valider); color: #06120B; }
.bouton--refuser { background: var(--refuser); border-color: var(--refuser); color: #180509; }
.lien-nu {
  padding: 0; border: 0; background: none;
  font: inherit; color: #9BB8E8; cursor: pointer; text-decoration: underline;
}
.retour { font-size: 0.85rem; color: var(--texte-sourd); }

/* --- Étiquettes --- */

.etiquette {
  display: inline-block; padding: 0.15rem 0.55rem;
  font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  border: 1px solid var(--filet-vif); border-radius: 999px;
  color: var(--texte-sourd);
}
.etiquette--actif, .etiquette--ok { color: var(--valider); border-color: rgba(78, 154, 106, 0.5); }
.etiquette--suspendu, .etiquette--bloque { color: var(--refuser); border-color: rgba(196, 86, 107, 0.5); }
.etiquette--attente, .etiquette--incomplet, .etiquette--a_valider {
  color: var(--alerte); border-color: rgba(217, 133, 59, 0.5);
}
.etiquette--alpha { color: var(--alpha); border-color: rgba(201, 162, 39, 0.5); }
.etiquette--moderateur { color: #9BB8E8; border-color: rgba(155, 184, 232, 0.4); }

/* Une personne mineure déclarée doit se voir immédiatement. */
.alerte-majeur { color: var(--refuser); font-weight: 600; }

/* --- Messages --- */

.message {
  padding: 0.7rem 1rem; margin: 0 0 1.2rem;
  border: 1px solid var(--filet-vif); border-left-width: 3px;
  border-radius: var(--rayon); font-size: 0.9rem;
}
.message--succes { border-left-color: var(--valider); }
.message--erreur { border-left-color: var(--refuser); }
.message--info   { border-left-color: #9BB8E8; }

/* --- Pièces d'identité --- */

.pieces { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.piece { margin: 0; }
.piece img {
  width: 100%; border: 1px solid var(--filet-vif); border-radius: var(--rayon);
  background: #000;
}
.piece figcaption {
  font-size: 0.78rem; color: var(--texte-sourd);
  text-transform: uppercase; letter-spacing: 0.06em; margin-top: 0.4rem;
}

/* --- Connexion --- */

.connexion { width: min(24rem, 92vw); }
.connexion__marque { text-align: center; margin-bottom: 1.6rem; }
.connexion__marque h1 { margin: 0.6rem 0 0.2rem; }
.connexion .bouton { width: 100%; }
.note { text-align: center; margin-top: 1.2rem; }

.pagination { display: flex; gap: 0.4rem; margin-top: 1.4rem; }
.pagination a {
  padding: 0.3rem 0.65rem; border: 1px solid var(--filet); border-radius: var(--rayon);
  color: var(--texte-sourd); font-size: 0.85rem;
}
.pagination a.actuelle { color: var(--texte-vif); border-color: var(--filet-vif); }

hr { border: 0; border-top: 1px solid var(--filet); margin: 1.4rem 0; }