/* ==========================================================================
   Tontine — thème « cauri » pour Bootstrap 5.3
   Surcharge les variables Bootstrap. Aucun !important, aucun style en ligne.
   Ce fichier est la source unique des couleurs : ne jamais écrire un hexa
   ailleurs, toujours passer par une variable.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Jetons — la gamme du cauri
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces — le blanc porte tout, le beige ne fait que délimiter.
     Les aplats sont réservés aux états (survol, sélection) : une surface
     colorée par défaut ferait concurrence aux montants, qui sont
     la seule information que l'œil doit trouver en premier. */
  --cauri-50:  #FFFFFF;  /* fond de page */
  --cauri-100: #FFFFFF;  /* cartes */
  --cauri-200: #FAF6EC;  /* aplat discret : survol, case remplie */
  --cauri-250: #E7DCC4;  /* bordures, jauges vides */
  --cauri-300: #DCC493;  /* bordure appuyée */

  /* Marque */
  --cauri-500: #C9A227;  /* accent : montants, jauges. Ne porte JAMAIS de texte */
  --cauri-700: #8C6614;  /* primaire : boutons, liens. Blanc dessus = 5,2:1 */
  --cauri-900: #3D2E12;

  /* Texte */
  --cauri-ink:   #241C10;
  --cauri-muted: #6B5A3E;
  --cauri-faint: #9C8C6E;

  /* Statuts */
  --etat-succes:    #4E7C46;
  --etat-attention: #C2661B;
  --etat-danger:    #A3301F;

  /* Formes */
  --rayon-carte:  16px;
  --rayon-champ:  14px;
  --rayon-pilule: 99px;
  --ombre-carte:  0 1px 3px rgba(61, 46, 18, .05);

  /* --- Correspondance Bootstrap --- */
  --bs-body-bg:         var(--cauri-50);
  --bs-body-color:      var(--cauri-ink);
  --bs-secondary-color: var(--cauri-muted);
  --bs-border-color:    var(--cauri-250);
  --bs-border-radius:   var(--rayon-champ);
  --bs-primary:         var(--cauri-700);
  --bs-link-color:      var(--cauri-700);
  --bs-link-hover-color:var(--cauri-900);
  /* Deux variables, un seul endroit où changer de fonte.
     Inter : neutre, très lisible en petit corps, chiffres tabulaires nets —
     ce qui compte plus ici que le caractère, puisque l'écran sert à lire
     des montants. Pour revenir à un titrage typé, remettre une serif
     d'affichage dans --police-titre et rétablir le <link> correspondant. */
  --police-corps: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --police-titre: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-font-sans-serif: var(--police-corps);
  --bs-body-font-size:  1rem;
  --bs-focus-ring-color: rgba(140, 102, 20, .25);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
body {
  font-family: var(--bs-font-sans-serif);
  background: var(--cauri-50);
  color: var(--cauri-ink);
  -webkit-font-smoothing: antialiased;
}

/* Titres : c'est la graisse qui les distingue, plus la fonte.
   En sans-serif, un titre en 400 se confondrait avec le corps. */
h1, h2, .titre-serif {
  font-family: var(--police-titre);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.02em;
}
h1 { font-size: 1.875rem; }
h2 { font-size: 1.5rem; }
h3, h4, h5 { font-weight: 600; letter-spacing: -.01em; }

/* Tous les montants passent par là : chiffres de largeur fixe, donc alignés */
.montant,
.tabular { font-variant-numeric: tabular-nums; }

/* Le montant de la caisse : l'élément le plus gros de son écran.
   C'est ce que l'utilisateur vient vérifier — rien ne doit le concurrencer. */
.montant-hero {
  font-size: 2.75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

/* Étiquette de section : petites capitales espacées, en sans-serif même
   quand le voisinage est en serif. */
.etiquette-section {
  font-family: var(--bs-font-sans-serif);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cauri-faint);
}

/* Trois compteurs côte à côte, cliquables, séparés par un trait */
.compteurs {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--cauri-250);
  border-radius: var(--rayon-carte);
  overflow: hidden;
}
.compteurs a {
  padding: .9rem .5rem; text-align: center;
  text-decoration: none; color: var(--cauri-ink);
  border-left: 1px solid var(--cauri-250);
}
.compteurs a:first-child { border-left: none; }
.compteurs a:hover { background: var(--cauri-200); }
.compteurs .valeur {
  display: block; font-size: 1.5rem; font-weight: 600;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.compteurs .libelle { display: block; font-size: .8125rem; color: var(--cauri-muted); }

/* Ligne de personne — le motif le plus répété de l'application :
   liste de participants, pointage, ordre de passage. */
.ligne-personne {
  display: flex; align-items: center; gap: .875rem;
  padding: .875rem .25rem;
  border-bottom: 1px solid var(--cauri-250);
}
.ligne-personne:last-child { border-bottom: none; }
.ligne-personne .identite { flex: 1 1 auto; min-width: 0; }
.ligne-personne .nom { font-weight: 600; }
.ligne-personne .detail {
  font-size: .875rem; color: var(--cauri-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ligne-personne .actions { flex: 0 0 auto; display: flex; align-items: center; gap: .5rem; }

/* Dans les actions d'une ligne, l'icone et l'etiquette d'etat ont la meme
   hauteur : le bouton et la pastille naissent avec des rembourrages
   differents, et la file gondolerait sans cette egalisation. */
.ligne-personne .actions .btn,
.ligne-personne .actions .etiquette { min-height: 2rem; }
.ligne-personne .actions .btn {
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
}

/* Le nom ouvre la fiche du participant. Il garde exactement l'allure du nom
   qu'il remplace — ni bleu, ni souligne : sur une ligne ou tout est deja
   cliquable (monter, descendre, retirer), un lien de plus n'a pas besoin de
   crier. Le survol et le focus le disent. */
.nom-participant {
  font: inherit; color: inherit; text-align: left;
  background: none; border: none; padding: 0;
}
.nom-participant:hover { text-decoration: underline; }
.nom-participant:focus-visible {
  outline: 2px solid var(--cauri-700); outline-offset: 2px; border-radius: 2px;
}

/* La fiche, dans la modale : une definition par ligne, l'intitule discret
   au-dessus de sa valeur. En deux colonnes on gagnerait de la place et on
   perdrait la lisibilite des qu'un intitule passe a la ligne. */
.fiche-detail dt {
  font-size: .8125rem; font-weight: 600; color: var(--cauri-muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.fiche-detail dd { margin: .125rem 0 1rem; }

/* Un lien a copier : le champ prend la place, le bouton ce qu'il lui faut.
   Le champ reste un vrai champ de saisie, en lecture seule : on peut y
   selectionner le texte a la main si le bouton echoue. */
.champ-copiable { display: flex; gap: .5rem; align-items: stretch; }
.champ-copiable input {
  flex: 1 1 auto; min-width: 0;
  font-size: .8125rem; font-family: ui-monospace, Menlo, Consolas, monospace;
}
.champ-copiable .btn { flex: 0 0 auto; }
.fiche-detail dd:last-child { margin-bottom: 0; }

/* Rang de passage : pastille numérotée, largeur fixe pour que la colonne
   reste alignée de la 1re à la 18e position. */
.rang {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--cauri-250);
  font-size: .8125rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--cauri-muted); flex: 0 0 auto;
}
.rang.est-passe { background: var(--cauri-200); color: var(--cauri-900); }
.rang.est-actuel { background: var(--cauri-700); border-color: var(--cauri-700); color: #fff; }

/* Bouton de menu discret (⋯) */
.btn-menu {
  width: 32px; height: 32px; border-radius: 8px;
  border: none; background: none; color: var(--cauri-muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.btn-menu:hover { background: var(--cauri-200); color: var(--cauri-ink); }

/* Liste de navigation en bas de fiche */
.liste-liens { border-top: 1px solid var(--cauri-250); }
.liste-liens a {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1rem .25rem;
  border-bottom: 1px solid var(--cauri-250);
  text-decoration: none; color: var(--cauri-ink); font-weight: 500;
}
.liste-liens a:hover { color: var(--cauri-700); }
.liste-liens .chevron { color: var(--cauri-faint); }

.texte-discret { color: var(--cauri-muted); }
.texte-tres-discret { color: var(--cauri-faint); }

/* --------------------------------------------------------------------------
   3. Boutons
   -------------------------------------------------------------------------- */
.btn { border-radius: var(--rayon-champ); font-weight: 600; padding: .75rem 1.25rem; }
.btn-lg { padding: .9rem 1.5rem; font-size: 1rem; }

.btn-cauri {
  background: var(--cauri-700);
  border-color: var(--cauri-700);
  color: #fff;
}
.btn-cauri:hover,
.btn-cauri:focus { background: var(--cauri-900); border-color: var(--cauri-900); color: #fff; }
.btn-cauri:disabled { background: var(--cauri-300); border-color: var(--cauri-300); color: var(--cauri-muted); }

.btn-cauri-clair {
  background: #fff;
  border-color: var(--cauri-250);
  color: var(--cauri-ink);
}
.btn-cauri-clair:hover { background: var(--cauri-200); border-color: var(--cauri-300); color: var(--cauri-ink); }

.btn-lien {
  background: none; border: none; color: var(--cauri-700);
  font-weight: 600; padding: 0; text-decoration: none;
}
.btn-lien:hover { color: var(--cauri-900); text-decoration: underline; }

/* Bouton carré d'en-tête (nouvelle tontine, réglages) */
.btn-carre {
  width: 44px; height: 44px; border-radius: var(--rayon-champ);
  display: inline-flex; align-items: center; justify-content: center;
  border: none; flex: 0 0 auto;
}
.btn-carre-plein { background: var(--cauri-700); color: var(--cauri-50); }
.btn-carre-clair { background: #fff; border: 1px solid var(--cauri-250); color: var(--cauri-ink); }

/* --------------------------------------------------------------------------
   4. Champs de formulaire
   -------------------------------------------------------------------------- */
.form-label { font-weight: 600; font-size: .9375rem; margin-bottom: .4rem; }

.form-control,
.form-select {
  background: #fff;
  border: 1px solid var(--cauri-250);
  border-radius: var(--rayon-champ);
  padding: .8rem 1rem;
  font-size: 1rem;             /* jamais moins : 16px évite le zoom iOS */
  color: var(--cauri-ink);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--cauri-500);
  box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color);
}
.form-control::placeholder { color: var(--cauri-faint); }
.form-control.is-invalid { border-color: var(--etat-danger); }

/* Groupe avec icône ou suffixe (indicatif, devise) */
.input-group-text {
  background: var(--cauri-200);
  border: 1px solid var(--cauri-250);
  border-radius: var(--rayon-champ);
  color: var(--cauri-muted);
  font-weight: 600;
}

.form-check-input { border-color: var(--cauri-300); }
.form-check-input:checked { background-color: var(--cauri-700); border-color: var(--cauri-700); }
.form-check-input:focus { box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color); }

/* Choix en cartes radio (mode de paiement, périodicité) */
.choix-carte { position: relative; }
.choix-carte input { position: absolute; opacity: 0; pointer-events: none; }
.choix-carte label {
  display: block; cursor: pointer;
  background: #fff;
  border: 1px solid var(--cauri-250);
  border-radius: var(--rayon-champ);
  padding: .85rem 1rem;
  font-weight: 600;
  transition: border-color .12s, background .12s;
}
.choix-carte input:checked + label {
  background: var(--cauri-200);
  border-color: var(--cauri-700);
}
.choix-carte input:focus-visible + label { box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color); }

/* Liste des règles d'un mot de passe.

   Jamais la couleur seule : chaque ligne porte aussi un signe — un rond tant
   qu'on n'a rien tapé, une coche quand la règle est tenue, une croix quand
   elle manque. Un daltonien lit la même chose que les autres. */
.liste-regles { list-style: none; padding-left: 0; margin: 0; }
.liste-regles li {
  position: relative; padding-left: 1.4rem;
  line-height: 1.5; margin-bottom: .15rem;
}
.liste-regles li::before {
  content: '○'; position: absolute; left: 0;
  color: var(--cauri-500);
}
.liste-regles li.est-satisfaite { color: var(--etat-succes); }
.liste-regles li.est-satisfaite::before { content: '✓'; color: var(--etat-succes); }
.liste-regles li.est-manquante  { color: var(--etat-danger); }
.liste-regles li.est-manquante::before  { content: '✕'; color: var(--etat-danger); }

/* --------------------------------------------------------------------------
   5. Cartes
   -------------------------------------------------------------------------- */
.carte {
  background: #fff;
  border: 1px solid var(--cauri-250);
  border-radius: var(--rayon-carte);
  padding: 1.125rem;
}
/* Carte cliquable : le survol effleure, il ne colore pas. */
a.carte { transition: border-color .12s, background .12s; }
a.carte:hover { border-color: var(--cauri-300); background: var(--cauri-200); }

/* Carte en anomalie : liseré, jamais un fond coloré (illisible en nombre) */
.carte-alerte {
  border-left: 3px solid var(--etat-attention);
  padding-left: calc(1.125rem - 2px);
}

/* --------------------------------------------------------------------------
   6. Statuts — toujours une pastille ET un mot, jamais la couleur seule
   -------------------------------------------------------------------------- */
.pastille {
  width: 9px; height: 9px; border-radius: 50%;
  display: inline-block; flex: 0 0 auto;
}
.pastille-encours    { background: var(--cauri-500); }
.pastille-brouillon  { background: var(--cauri-300); }
.pastille-succes     { background: var(--etat-succes); }
.pastille-attention  { background: var(--etat-attention); }
.pastille-danger     { background: var(--etat-danger); }

.etiquette {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .8125rem; font-weight: 600;
  padding: .25rem .6rem;
  border-radius: var(--rayon-pilule);
  background: #fff;
  border: 1px solid var(--cauri-250);
  color: var(--cauri-900);
}
.etiquette-succes    { background: rgba(78, 124, 70, .14);  color: var(--etat-succes); }
.etiquette-attention { background: rgba(194, 102, 27, .14); color: var(--etat-attention); }
.etiquette-danger    { background: rgba(163, 48, 31, .12);  color: var(--etat-danger); }

/* --------------------------------------------------------------------------
   7. Jauge de collecte
   -------------------------------------------------------------------------- */
.jauge {
  height: 8px; border-radius: var(--rayon-pilule);
  background: var(--cauri-250); overflow: hidden;
}
.jauge-remplissage { height: 100%; background: var(--cauri-500); border-radius: var(--rayon-pilule); }
.jauge-remplissage.est-complete { background: var(--etat-succes); }

/* Frise des tours : ●●●●○○○○ */
.frise { display: flex; gap: 5px; }
.frise span { width: 8px; height: 8px; border-radius: 50%; background: var(--cauri-250); }
.frise span.est-passe  { background: var(--cauri-700); }
.frise span.est-actuel { background: var(--cauri-500); }
.frise span.est-mien   { box-shadow: 0 0 0 2px var(--cauri-700); }

/* --------------------------------------------------------------------------
   8. Avatar
   -------------------------------------------------------------------------- */
.avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cauri-200); border: 1px solid var(--cauri-250);
  color: var(--cauri-900);
  font-weight: 600; font-size: .875rem; flex: 0 0 auto;
}
.avatar-sm { width: 32px; height: 32px; font-size: .75rem; }

/* --------------------------------------------------------------------------
   9. Gabarit d'authentification
   -------------------------------------------------------------------------- */
.auth-page {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1rem;
}
.auth-carte {
  width: 100%; max-width: 420px;
  background: #fff;
  border: 1px solid var(--cauri-250);
  border-radius: 20px;
  padding: 2rem;
}
.auth-marque {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 1.375rem; color: var(--cauri-900);
  text-decoration: none;
}
.auth-marque .jeton {
  width: 36px; height: 36px; border-radius: 12px;
  background: var(--cauri-700); color: var(--cauri-50);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.125rem;
}
/* --------------------------------------------------------------------------
   9bis. Code à 4 chiffres
   Le champ réel est un input unique, masqué : c'est lui qui reçoit la saisie,
   le collage et l'autocomplétion du SMS. Les quatre cases ne sont qu'un
   affichage. Un input par case casserait le collage et les lecteurs d'écran.
   -------------------------------------------------------------------------- */
.code-saisie { position: relative; }

.code-saisie input {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; border: none; background: none;
  font-size: 16px;            /* évite le zoom iOS malgré l'opacité nulle */
  cursor: pointer;
}

.code-cases {
  display: flex; gap: .75rem; justify-content: center;
  pointer-events: none;
}
.code-case {
  width: 58px; height: 68px;
  border: 1px solid var(--cauri-250);
  border-radius: var(--rayon-champ);
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.75rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--cauri-ink);
  transition: border-color .12s, background .12s;
}
.code-case.est-remplie { background: var(--cauri-200); border-color: var(--cauri-300); }
.code-case.est-active  { border-color: var(--cauri-700); box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color); }

/* Le chiffre saisi est remplacé par un point : on ne montre pas un code
   secret en clair sur un écran consulté en public. */
.code-case .point {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--cauri-900);
}

/* Variante à 6 cases — le code de vérification reçu par e-mail.
   Cases resserrées, sinon la rangée déborde de la carte à 420 px. */
.code-saisie-6 .code-cases { gap: .5rem; }
.code-saisie-6 .code-case {
  width: 46px; height: 58px;
  font-size: 1.375rem;
}

/* Ce code-là n'est pas un secret durable : il s'affiche en clair, ce qui
   permet de relire ce qu'on a tapé avant de valider. */
.code-saisie-6 .code-case .point { display: none; }

.code-saisie.est-invalide .code-case { border-color: var(--etat-danger); }

@keyframes secousse {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-6px); }
  75%      { transform: translateX(6px); }
}
.code-saisie.est-invalide .code-cases { animation: secousse .3s; }

/* Pavé numérique — la saisie au pouce, sans dépendre du clavier système */
.pave-num {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: .75rem; max-width: 300px; margin: 0 auto;
}
.pave-num button {
  height: 60px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--cauri-250); border-radius: var(--rayon-champ);
  background: #fff;
  color: var(--cauri-ink);
  font-size: 1.5rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 0;
}
.pave-num button:hover  { background: var(--cauri-200); }
.pave-num button:active { background: var(--cauri-300); }

/* Touches de correction. Elles restent en retrait — ce sont des sorties de
   secours, pas la saisie courante : même taille de touche que les chiffres,
   mais en gris, pour qu'on ne les vise pas par réflexe.
   ⌫ efface un chiffre ; la croix cerclée vide tout — c'est le geste connu
   du bouton « clear » des champs de recherche sur mobile. */
.pave-num button.est-correction {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--cauri-muted);
  line-height: 1;
}
.pave-num button.est-correction:hover { color: var(--cauri-ink); }

/* --------------------------------------------------------------------------
   10. Gabarit applicatif — barre latérale au large, barre basse au mobile
   -------------------------------------------------------------------------- */
.app-shell { min-height: 100vh; }

.app-lateral {
  width: 248px; flex: 0 0 248px;
  background: #fff;
  border-right: 1px solid var(--cauri-250);
  padding: 1.5rem 1rem;
  position: sticky; top: 0; height: 100vh;
}
.app-lateral a {
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem .85rem; border-radius: 12px;
  color: var(--cauri-ink); text-decoration: none; font-weight: 500;
}
.app-lateral a:hover { background: var(--cauri-200); }
.app-lateral a.actif { background: var(--cauri-700); color: var(--cauri-50); font-weight: 600; }

.app-contenu { flex: 1 1 auto; padding: 1.75rem 1.25rem 6rem; max-width: 760px; }

/* Barre basse : la navigation du mobile */
.app-barre-basse {
  position: fixed; inset: auto 0 0 0; z-index: 1030;
  display: flex; background: #fff;
  border-top: 1px solid var(--cauri-250);
  padding: .4rem .25rem calc(.4rem + env(safe-area-inset-bottom));
}
.app-barre-basse a {
  flex: 1; text-align: center; padding: .4rem 0;
  color: var(--cauri-muted); text-decoration: none;
  font-size: .75rem; font-weight: 600;
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
}
.app-barre-basse a.actif { color: var(--cauri-700); }

@media (min-width: 992px) {
  .app-barre-basse { display: none; }
  .app-contenu { padding-bottom: 3rem; }
}
@media (max-width: 991.98px) {
  .app-lateral { display: none; }
}

/* --------------------------------------------------------------------------
   11. Accessibilité
   -------------------------------------------------------------------------- */
:focus-visible { outline: 2px solid var(--cauri-700); outline-offset: 2px; }

.saut-contenu {
  position: absolute; left: -9999px;
  background: var(--cauri-700); color: #fff;
  padding: .75rem 1rem; border-radius: 0 0 12px 0; z-index: 2000;
}
.saut-contenu:focus { left: 0; top: 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* --------------------------------------------------------------------------
   12. Back-office administrateur
   Le seul endroit du produit qui rompt avec le mobile d'abord : public
   interne, travail long au clavier, et surtout la séparation matérialise
   une frontière — on ne glisse pas d'une vue globale à une action sur le
   groupe de quelqu'un.
   -------------------------------------------------------------------------- */
.admin-lateral {
  width: 240px; flex: 0 0 240px;
  background: #fff;
  border-right: 1px solid var(--cauri-250);
  padding: 1.25rem .875rem;
  position: sticky; top: 0; height: 100vh;
  overflow-y: auto;
}
.admin-lateral .groupe {
  font-size: .6875rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--cauri-faint);
  padding: .75rem .75rem .35rem;
}
.admin-lateral a {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .75rem; border-radius: 10px;
  color: var(--cauri-ink); text-decoration: none;
  font-size: .875rem; font-weight: 500;
}
.admin-lateral a:hover { background: var(--cauri-200); }
.admin-lateral a.actif { background: var(--cauri-700); color: #fff; font-weight: 600; }

/* Déconnexion : un formulaire POST, pas un lien (Turbo précharge les liens et
   déconnectait au survol). Le bouton doit ressembler aux autres entrées. */
.app-lateral form, .admin-lateral form { margin: 0; }
.app-lateral form button, .admin-lateral form button {
  display: flex; align-items: center; gap: .7rem;
  width: 100%; text-align: left;
  background: none; border: 0;
  color: var(--cauri-ink); font-family: inherit; font-weight: 500; cursor: pointer;
}
.app-lateral form button { padding: .7rem .85rem; border-radius: 12px; font-size: 1rem; }
.admin-lateral form button { padding: .55rem .75rem; border-radius: 10px; font-size: .875rem; gap: .6rem; }
.app-lateral form button:hover, .admin-lateral form button:hover { background: var(--cauri-200); }

/* Le contenu échappe au centrage : sur un grand écran, c'est une colonne
   de tableau de plus, donc un défilement de moins. */
/* Le contenu est borne et centre dans l'espace restant. Sans limite, une
   ligne de texte traverse un ecran de 2560 px et devient illisible, et trois
   tuiles s'etirent chacune sur 700 px pour afficher un nombre a deux
   chiffres. Les tableaux, eux, defilent dans leur propre conteneur. */
.admin-contenu {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 2rem 1.75rem 4rem;
}

/* Densité assumée : l'administrateur n'est pas un cotisant sur son
   téléphone. Corps 14 px, lignes serrées. */
.admin-contenu { font-size: .875rem; }
.admin-contenu h1 { font-size: 1.75rem; }
.admin-contenu h2 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; }

/* Les tuiles portent un nombre, pas un paragraphe : elles n'ont pas besoin
   de s'etirer. Au-dela, le libelle se retrouve seul a gauche et la valeur
   perdue au milieu d'un aplat vide. */
.tuile { max-width: 320px; }

/* Chemin de fer */
.fil { font-size: .8125rem; color: var(--cauri-faint); margin-bottom: .35rem; }
.fil a { color: var(--cauri-muted); text-decoration: none; }
.fil a:hover { color: var(--cauri-700); }

/* Bandeau d'anomalies — toujours présent, même quand tout va bien :
   s'il disparaissait, on douterait de sa fiabilité. */
.bandeau-etat {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .75rem 1rem;
  border: 1px solid var(--cauri-250); border-radius: var(--rayon-champ);
  margin-bottom: 1.5rem;
}
.bandeau-etat.est-sain {
  border-color: rgba(78,124,70,.35); color: var(--etat-succes);
}
.bandeau-etat.est-alerte {
  border-color: rgba(194,102,27,.4); background: rgba(194,102,27,.05);
  color: var(--etat-attention);
}

/* Tuiles de statistiques */
/* auto-fit plutot qu'un nombre fixe : la grille suit le nombre reel de
   tuiles. Avec quatre colonnes imposees et trois tuiles, la derniere colonne
   restait vide et la rangee paraissait amputee. */
.tuiles {
  display: grid;
  gap: .875rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.tuile {
  display: block; padding: 1rem;
  border: 1px solid var(--cauri-250); border-radius: var(--rayon-carte);
  text-decoration: none; color: var(--cauri-ink); background: #fff;
}
.tuile:hover { border-color: var(--cauri-300); background: var(--cauri-200); }
.tuile .libelle { font-size: .8125rem; color: var(--cauri-muted); }
.tuile .valeur {
  display: block; font-size: 1.75rem; font-weight: 600;
  font-variant-numeric: tabular-nums; line-height: 1.2; margin: .25rem 0;
}

/* Tableaux denses */
.table-admin { width: 100%; border-collapse: collapse; font-size: .875rem; }
.table-admin th {
  text-align: left; font-weight: 600; font-size: .75rem;
  text-transform: uppercase; letter-spacing: .04em; color: var(--cauri-muted);
  padding: .6rem .75rem; border-bottom: 1px solid var(--cauri-250);
  white-space: nowrap;
}
.table-admin td {
  padding: .7rem .75rem; border-bottom: 1px solid var(--cauri-250);
  vertical-align: middle;
}
.table-admin tbody tr:hover { background: var(--cauri-200); }
.table-admin .num { text-align: right; font-variant-numeric: tabular-nums; }
/* Anomalie : un liseré, jamais un fond coloré — avec beaucoup d'alertes,
   un tableau entièrement teinté devient illisible. */
.table-admin tr.est-anomalie td:first-child {
  box-shadow: inset 3px 0 0 var(--etat-attention);
}
.table-admin a { color: var(--cauri-ink); text-decoration: none; font-weight: 600; }
.table-admin a:hover { color: var(--cauri-700); }

.enveloppe-table { overflow-x: auto; border: 1px solid var(--cauri-250); border-radius: var(--rayon-carte); }
.enveloppe-table .table-admin th:first-child,
.enveloppe-table .table-admin td:first-child { padding-left: 1rem; }
.enveloppe-table .table-admin tr:last-child td { border-bottom: none; }

/* Barre de filtres */
.barre-filtres { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.barre-filtres .form-select,
.barre-filtres .form-control {
  width: auto; min-width: 150px; padding: .45rem .75rem; font-size: .875rem;
}

/* Bandeau de lecture seule — la frontière, dite à l'écran */
.bandeau-lecture {
  display: flex; gap: .6rem; align-items: flex-start;
  padding: .75rem 1rem; margin-bottom: 1.5rem;
  border: 1px solid var(--cauri-300); border-radius: var(--rayon-champ);
  background: var(--cauri-200);
  font-size: .8125rem; color: var(--cauri-muted);
}

@media (max-width: 991.98px) {
  .admin-lateral { display: none; }
  .admin-contenu { padding: 1.25rem 1rem 3rem; }
}

/* --------------------------------------------------------------------------
   10. Page d'erreur
   Contenu centré : la marque, puis une carte qui porte tout le message. Le
   code est mis à l'échelle de la carte (clamp) : lisible de loin, sans jamais
   déborder sur un écran de téléphone.
   -------------------------------------------------------------------------- */
.page-erreur {
  min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1.75rem;
  padding: 2rem 1rem;
  background: var(--cauri-200);
}
.erreur-carte {
  width: 100%; max-width: 420px;
  background: var(--cauri-100);
  border: 1px solid var(--cauri-250);
  border-radius: 20px;
  box-shadow: var(--ombre-carte);
  padding: 2.5rem 2rem;
  text-align: center;
}
.erreur-titre {
  font-size: 1.375rem; font-weight: 600;
  color: var(--cauri-ink);
  margin: 0 0 .5rem;
}
.erreur-code {
  font-size: clamp(4rem, 16vw, 6.5rem);
  font-weight: 700; line-height: 1;
  letter-spacing: -.03em;
  color: var(--cauri-ink);
  font-variant-numeric: tabular-nums;
  margin: 0 0 1rem;
}
.erreur-message {
  color: var(--cauri-muted);
  margin: 0;
}
.erreur-actions { margin-top: 1.75rem; }