/* ══════════════════════════════════════════════════════════════════════
   ARCSTUD — interface admin (§8)
   ══════════════════════════════════════════════════════════════════════

   Charte reprise de la maquette `docs/maquettes/03-admin.html` : colonne navy
   à gauche, barre supérieure blanche, cartes blanches sur fond gris clair,
   palette navy/teal/rose/or, Public Sans.

   ── Ce qui diffère de la maquette, et pourquoi ─────────────────────────

   **L'interface occupe la fenêtre entière.** La maquette dessine l'application
   dans une carte de 1180 px, arrondie, avec une ombre portée, posée sur un fond
   gris — c'est une vignette de présentation, la forme qu'on donne à une
   maquette pour qu'elle se lise comme une capture d'écran. Sur le poste de
   travail où cette interface s'ouvre tous les matins (§2.1), cette carte
   gaspillerait la moitié d'un écran large en marge décorative, et le planning
   de la §8.1 — une timeline horizontale de trente colonnes — serait à faire
   défiler dans un cadre de 960 px utiles.

   La colonne de gauche est donc fixée au bord, la barre supérieure aussi, et
   seul le contenu défile. Les proportions internes, elles, sont celles de la
   maquette.

   **Les tailles sont remontées d'environ un point et demi.** La maquette
   descend à 10,5 px pour une étiquette et 11 px pour un libellé de widget : ce
   sont des tailles qui se lisent sur une image agrandie, pas sur un écran à
   distance de bras. Le rapport entre les tailles est conservé.

   **Les widgets ne sont pas cliquables dans leur ensemble.** Chacun porte un
   lien nommé (« Voir tout »). Une carte entièrement cliquable empêche de
   sélectionner le texte qu'elle contient — or ce qu'on fait d'un nom de
   résident ou d'un montant sur cet écran, c'est le recopier.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* Palette — CLAUDE.md */
  --navy: #1D3557;
  --teal: #2A9D8F;
  --rose: #B33951;
  --or: #E9C46A;

  --fond: #F4F6F8;
  --bordure: #D8DEE4;
  --texte: #1B1F23;
  --texte-second: #5C6B7A;
  --texte-tertiaire: #8C99A5;
  --blanc: #fff;

  /* Teintes dérivées, une seule fois ici plutôt qu'en dur dans les règles */
  --navy-pale: #EAF0F4;
  --teal-pale: #E4F3F1;
  --teal-fonce: #1F7A6E;
  --rose-pale: #F9E3E7;
  --or-pale: #FBF1D8;
  --or-fonce: #8A6D18;
  --separateur: #EEF1F3;
  --entete-fond: #F9FAFB;

  --rayon: 10px;
  --rayon-petit: 7px;

  /* Largeur de la colonne de navigation — la maquette dit 220 px, et c'est
     exactement ce qu'il faut pour « Planning réservations » sur une ligne. */
  --lateral: 230px;

  --t-xxs: 10.5px;
  --t-xs: 12px;
  --t-s: 13px;
  --t-m: 14px;
  --t-l: 16px;
  --t-xl: 20px;
  --t-xxl: 30px;

  --ombre: 0 1px 2px rgba(29, 53, 87, 0.04);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* L'attribut `hidden` ne vaut qu'un `display: none` de feuille de style du
   navigateur : n'importe quelle classe qui pose un `display` le neutralise.
   La règle est posée une fois, pour tous les composants. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  background: var(--fond);
  color: var(--texte);
  /* Public Sans ne couvre ni l'arabe ni le géorgien. Les noms de résidents
     peuvent l'être : les replis nommés sont les polices présentes sur les
     systèmes de bureau. */
  font-family: 'Public Sans', 'Noto Naskh Arabic', 'Noto Sans Georgian', system-ui, sans-serif;
  font-size: var(--t-m);
  line-height: 1.45;
}

button { font: inherit; color: inherit; border: none; background: none; cursor: pointer; }
input { font: inherit; color: inherit; }
svg { display: block; flex: none; }

/* ── Ossature ────────────────────────────────────────────────────────── */

.app {
  display: grid;
  grid-template-columns: var(--lateral) 1fr;
  height: 100vh;
  overflow: hidden;
}

/* Écran de connexion et écrans pleine page : une seule colonne. */
.app--nu { grid-template-columns: 1fr; }

.principal {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

/* ── Colonne de navigation ───────────────────────────────────────────── */

.lateral {
  background: var(--navy);
  color: var(--blanc);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.lateral__marque {
  padding: 20px 18px;
  font-size: var(--t-l);
  font-weight: 800;
  letter-spacing: 0.2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.lateral__marque-sous {
  display: block;
  font-size: var(--t-xxs);
  font-weight: 500;
  opacity: 0.7;
  margin-top: 2px;
  letter-spacing: 0;
}

.lateral__nav { padding: 10px; flex: 1; overflow-y: auto; }

.lateral__item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--rayon-petit);
  font-size: var(--t-s);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  text-align: left;
  margin-bottom: 2px;
}

.lateral__item svg { width: 17px; height: 17px; }
.lateral__libelle { flex: 1; min-width: 0; }

.lateral__item:hover { background: rgba(255, 255, 255, 0.08); color: var(--blanc); }
.lateral__item:focus-visible { outline: 2px solid var(--or); outline-offset: -2px; }

.lateral__item--actif,
.lateral__item--actif:hover { background: var(--blanc); color: var(--navy); }

/* « à venir » : une indication d'état, pas une interdiction. L'entrée reste
   pleinement cliquable — l'écran qu'elle ouvre dit ce que le module portera. */
.lateral__a-venir {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.72);
}

.lateral__item--actif .lateral__a-venir {
  background: var(--navy-pale);
  color: var(--texte-second);
}

.lateral__pied {
  padding: 14px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lateral__compte {
  font-size: var(--t-xs);
  font-weight: 600;
  opacity: 0.85;
  word-break: break-all;
}

.lateral__deconnexion {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-xs);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.72);
  padding: 6px 0;
}

.lateral__deconnexion svg { width: 15px; height: 15px; }
.lateral__deconnexion:hover { color: var(--blanc); }
.lateral__deconnexion span:first-child { display: flex; }

.lateral__organisme { font-size: var(--t-xxs); opacity: 0.55; }

/* ── Barre supérieure ────────────────────────────────────────────────── */

.barre {
  background: var(--blanc);
  border-bottom: 1px solid var(--bordure);
  padding: 15px 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex: none;
}

.barre__titre { font-size: var(--t-xl); font-weight: 800; color: var(--navy); }
.barre__sous-titre { font-size: var(--t-xs); color: var(--texte-second); margin-top: 2px; }
.barre__actions { display: flex; gap: 10px; flex: none; }

/* ── Contenu ─────────────────────────────────────────────────────────── */

.contenu {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 22px 26px 40px;
}

.contenu--centre {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px;
}

.attente { color: var(--texte-second); font-size: var(--t-s); }

.noscript {
  padding: 24px;
  font-size: var(--t-m);
  color: var(--navy);
  text-align: center;
}

/* ── Grille du tableau de bord (§8.0) ────────────────────────────────── */

/* 1,3fr / 1fr, comme la maquette : la colonne d'action porte des listes de
   noms et des phrases, celle de droite des chiffres. Au-dessous de 1100 px on
   passe à une colonne — l'ordre du DOM place alors l'action en premier, ce qui
   est l'ordre de lecture voulu par la §8.0. */
.grille {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  max-width: 1400px;
}

.grille__colonne { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

@media (max-width: 1100px) {
  .grille { grid-template-columns: minmax(0, 1fr); }
}

/* ── Widget ──────────────────────────────────────────────────────────── */

.widget {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 16px 18px;
  box-shadow: var(--ombre);
}

.widget__tete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.widget__titre {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-s);
  font-weight: 800;
  color: var(--navy);
}

.widget__titre svg { width: 16px; height: 16px; }
.widget__titre--alerte { color: var(--rose); }

.widget__lien {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--navy);
  flex: none;
}

.widget__lien svg { width: 13px; height: 13px; }
.widget__lien:hover { text-decoration: underline; }

.widget__reste {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--texte-second);
}

.widget__reste svg { width: 13px; height: 13px; }
.widget__reste:hover { color: var(--navy); }

/* ── Lignes de liste ─────────────────────────────────────────────────── */

.ligne {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--separateur);
}

.ligne:last-child { border-bottom: none; }

.ligne__corps { min-width: 0; flex: 1; }

.ligne__gauche {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-s);
  min-width: 0;
}

/* Le libellé ne se coupe pas en milieu de mot : un nom de résident tronqué au
   milieu est illisible, et c'est la donnée la plus fréquente de cet écran. */
.ligne__gauche > span:last-child { overflow-wrap: anywhere; }

.ligne__sous {
  font-size: var(--t-xs);
  color: var(--texte-tertiaire);
  margin-top: 2px;
  padding-left: 15px;
}

.point { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.point--teal { background: var(--teal); }
.point--or { background: var(--or); }
.point--rose { background: var(--rose); }

.etiquette {
  font-size: var(--t-xxs);
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
  flex: none;
}

.etiquette--neutre { background: var(--navy-pale); color: var(--texte-second); }
.etiquette--teal { background: var(--teal-pale); color: var(--teal-fonce); }
.etiquette--or { background: var(--or-pale); color: var(--or-fonce); }
.etiquette--rose { background: var(--rose-pale); color: var(--rose); }

/* ── Chiffres ────────────────────────────────────────────────────────── */

.grand-chiffre { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.grand-chiffre__valeur { font-size: var(--t-xxl); font-weight: 800; color: var(--navy); }
.grand-chiffre__libelle { font-size: var(--t-xs); color: var(--texte-second); }

.jauge {
  height: 7px;
  background: var(--separateur);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 8px;
}

.jauge__remplissage { height: 100%; background: var(--teal); border-radius: 4px; }

.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }

.trio__case {
  text-align: center;
  background: var(--entete-fond);
  border-radius: 8px;
  padding: 10px 6px;
}

.trio__valeur { font-size: var(--t-l); font-weight: 800; color: var(--navy); }
.trio__case--rose .trio__valeur { color: var(--rose); }
.trio__libelle { font-size: var(--t-xxs); color: var(--texte-tertiaire); font-weight: 700; margin-top: 2px; }

.precision { font-size: var(--t-xs); color: var(--texte-tertiaire); margin-top: 8px; }

/* ── Boutons ─────────────────────────────────────────────────────────── */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 15px;
  border-radius: 6px;
  font-size: var(--t-xs);
  font-weight: 700;
  border: 1px solid transparent;
}

.bouton svg { width: 15px; height: 15px; }
.bouton:disabled { opacity: 0.55; cursor: default; }

.bouton--primaire { background: var(--navy); color: var(--blanc); }
.bouton--primaire:hover:not(:disabled) { background: #16294a; }

.bouton--fantome { background: var(--blanc); border-color: var(--bordure); color: var(--navy); }
.bouton--fantome:hover:not(:disabled) { background: var(--navy-pale); }

.bouton--large { width: 100%; padding: 12px 16px; font-size: var(--t-s); }

/* ── Messages, vides, notes ──────────────────────────────────────────── */

.message { max-width: 460px; text-align: center; }
.message__pastille {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--navy-pale);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}

.message__pastille svg { width: 24px; height: 24px; }
.message--alerte .message__pastille { background: var(--rose-pale); color: var(--rose); }

.message__titre { font-size: var(--t-l); font-weight: 800; color: var(--navy); }
.message__texte { font-size: var(--t-s); color: var(--texte-second); margin-top: 8px; }
.message__actions { display: flex; gap: 10px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }

.chargement { display: flex; justify-content: center; color: var(--texte-second); margin-bottom: 12px; }
.chargement svg { width: 26px; height: 26px; animation: tourner 1s linear infinite; }

@keyframes tourner { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .chargement svg { animation: none; }
}

.vide {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-s);
  color: var(--texte-second);
  padding: 8px 0;
}

.vide svg { width: 16px; height: 16px; color: var(--teal); }

.alerte-ligne,
.note-ligne {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--t-xs);
  padding: 10px 12px;
  border-radius: 8px;
  margin: 10px 0;
  text-align: left;
}

.alerte-ligne svg,
.note-ligne svg { width: 15px; height: 15px; margin-top: 1px; }

.alerte-ligne { background: var(--rose-pale); color: var(--rose); font-weight: 600; }
.note-ligne--or { background: var(--or-pale); color: var(--or-fonce); }
.note-ligne--navy { background: var(--navy-pale); color: var(--navy); }
.note-ligne--rose { background: var(--rose-pale); color: var(--rose); font-weight: 600; }

/* ── Module à venir ──────────────────────────────────────────────────── */

.a-venir { max-width: 520px; text-align: center; }

.a-venir__pastille {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--or-pale);
  color: var(--or-fonce);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}

.a-venir__pastille svg { width: 24px; height: 24px; }
.a-venir__titre { font-size: var(--t-l); font-weight: 800; color: var(--navy); }

.a-venir__spec {
  font-size: var(--t-xxs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--texte-tertiaire);
  margin-top: 4px;
}

.a-venir__texte { font-size: var(--t-s); color: var(--texte-second); margin-top: 12px; }

/* ── Connexion (§10bis) ──────────────────────────────────────────────── */

.connexion {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 14px;
  padding: 30px 28px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 18px 44px rgba(29, 53, 87, 0.12);
}

.connexion__marque {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--navy);
  color: var(--blanc);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}

.connexion__marque svg { width: 26px; height: 26px; }

.connexion__titre { font-size: var(--t-xl); font-weight: 800; color: var(--navy); text-align: center; }
.connexion__sous-titre { font-size: var(--t-xs); color: var(--texte-second); text-align: center; margin-bottom: 18px; }

.champ__etiquette {
  display: block;
  font-size: var(--t-xxs);
  font-weight: 700;
  color: var(--texte-second);
  margin: 12px 0 5px;
}

.champ {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--bordure);
  border-radius: 6px;
  font-size: var(--t-s);
  background: var(--blanc);
}

.champ:focus { outline: 2px solid var(--navy); outline-offset: -1px; border-color: var(--navy); }

.connexion .bouton--large { margin-top: 18px; }

.connexion__aide { font-size: var(--t-xxs); color: var(--texte-tertiaire); margin-top: 14px; text-align: center; }

/* Secousse d'un formulaire refusé. Discrète : c'est un rappel que la saisie
   n'est pas passée, pas une sanction. */
.secousse { animation: secousse 0.28s ease-in-out; }

@keyframes secousse {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

@media (prefers-reduced-motion: reduce) {
  .secousse { animation: none; }
}

/* ── Bandeau éphémère ────────────────────────────────────────────────── */

.annonce {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 20;
  max-width: 380px;
  background: var(--navy);
  color: var(--blanc);
  font-size: var(--t-xs);
  font-weight: 600;
  padding: 12px 16px;
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(29, 53, 87, 0.28);
}

.annonce--erreur { background: var(--rose); }

/* ── Écrans étroits ──────────────────────────────────────────────────── */

/* L'interface admin est prévue pour un poste de bureau (§2.1). Elle reste
   consultable sur un écran étroit — un déplacement, une vérification depuis un
   téléphone —, la colonne de navigation passant alors au-dessus du contenu.
   Ce n'est pas un mode mobile : c'est un repli qui évite qu'une colonne fixe
   de 230 px mange la moitié de la largeur. */
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: auto; min-height: 100vh; overflow: visible; }
  .lateral { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; }
  .lateral__marque { padding: 0; border-bottom: none; }
  .lateral__nav { display: flex; gap: 6px; overflow-x: auto; padding: 0; flex: 1 0 100%; }
  .lateral__item { width: auto; margin-bottom: 0; white-space: nowrap; }
  .lateral__a-venir { display: none; }
  .lateral__pied { flex-direction: row; align-items: center; gap: 12px; border-top: none; padding: 0; margin-left: auto; }
  .lateral__organisme { display: none; }
  .contenu { overflow-y: visible; padding: 16px 14px 32px; }
  .barre { padding: 14px 16px; }
}