/* =============================================================================
   MÔNE — Spécificités par page
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Pages d'état (403 · 404 · 419 · 500)
   Page autonome, sans coquille applicative : l'erreur peut survenir avant même
   qu'une session existe.
-------------------------------------------------------------------------- */
.page-etat {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: var(--sp-5);
}

.page-etat__boite {
  width: 100%;
  max-width: 580px;
  padding: var(--sp-7);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-filet), var(--shadow-eleve);
}

/*
  Le code d'erreur est la seule information que l'utilisateur pourra citer au
  support : il est donc composé en chasse fixe et en Terre Cuite, seul élément
  coloré de la page.
*/
.page-etat__code {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 4px 10px;
  border-radius: var(--radius-pilule);
  background: var(--terre-cuite-12);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--terre-cuite-hover);
  font-variant-numeric: tabular-nums;
}

.page-etat__titre {
  margin-top: var(--sp-4);
  font-size: 30px;
  letter-spacing: -.024em;
}

.page-etat__texte {
  margin-top: var(--sp-3);
  color: #3C3C3C;
}

.page-etat__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

.page-etat__marque {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-top: var(--sp-5);
  margin-top: var(--sp-6);
  border-top: 1px solid var(--filet);
  font-size: var(--fs-small);
  color: var(--gris-moyen);
}

.page-etat__trace {
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  /* Angle gauche droit : un filet de 3 px sur un angle arrondi laisse un
     éclat blanc en haut et en bas du trait. */
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--surface-creuse);
  border-left: 3px solid var(--rouge-brique);
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--anthracite);
  white-space: pre-wrap;
  overflow-x: auto;
  max-height: 320px;
}

/* -----------------------------------------------------------------------------
   Page « Design system » — vitrine des composants (LOT 0)
-------------------------------------------------------------------------- */
/* `start` et non `stretch` : la page de garde n'a pas à s'étirer sur la
   hauteur de la palette, ce qui ouvrait 300 px de vide sous son dernier
   paragraphe. */
.vitrine__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: start;
}

/*
  Le manifeste était un aplat vert foncé. Depuis que le rail de navigation est
  lui-même en Vert Forêt, deux aplats sombres se répondaient d'un bord à
  l'autre de l'écran et se disputaient l'attention. Il devient une page de
  garde claire : fond Beige Sable dégradé, texte Vert Forêt, filet Terre Cuite
  à gauche. La couleur de marque est toujours là, elle ne pèse plus.
*/
.vitrine__manifeste {
  padding: var(--sp-6);
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--terre-cuite);
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(255, 255, 255, .85), transparent 55%),
    linear-gradient(150deg, var(--beige-sable) 0%, #F2EDE4 60%, var(--surface) 100%);
  color: var(--vert-foret);
  box-shadow: var(--shadow-filet), var(--shadow-card);
}

.vitrine__manifeste h2 { color: var(--vert-foret); }

.vitrine__manifeste p {
  margin-top: var(--sp-4);
  color: #2C4A40;
  font-size: 14px;
  max-width: 58ch;
}

.vitrine__regles {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(10, 46, 36, .14);
}

.vitrine__regle {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: 13px;
  font-weight: 500;
  color: #2C4A40;
}

.vitrine__regle .icone { color: var(--terre-cuite-hover); }

.palette { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: var(--sp-3); }

.palette__nuance {
  border: 1px solid var(--filet);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

.palette__aplat { height: 62px; }

/* Un aplat par jeton : la CSP interdisant l'attribut `style`, chaque nuance
   possède sa classe plutôt qu'une couleur écrite dans le balisage. */
.palette__aplat--vert-foret   { background: var(--vert-foret); }
.palette__aplat--terre-cuite  { background: var(--terre-cuite); }
.palette__aplat--anthracite   { background: var(--anthracite); }
.palette__aplat--gris-moyen   { background: var(--gris-moyen); }
.palette__aplat--gris-perle   { background: var(--gris-perle); }
.palette__aplat--beige-sable  { background: var(--beige-sable); }
.palette__aplat--rouge-brique { background: var(--rouge-brique); }
.palette__aplat--bordure      { background: var(--bordure); }

.legende__pastille--vert  { background: var(--vert-foret); }
.legende__pastille--terre { background: var(--terre-cuite); }
.legende__pastille--or    { background: var(--statut-attente); }
.legende__pastille--gris  { background: var(--desactive); }

.palette__detail { padding: var(--sp-3); }

.palette__nom { display: block; font-size: 12.5px; font-weight: 650; letter-spacing: -.008em; }

.palette__code {
  display: block;
  font-size: 11px;
  color: var(--gris-moyen);
  font-family: var(--font-mono);
  text-transform: uppercase;
}

.echelle-typo { display: grid; gap: var(--sp-4); }

.echelle-typo__ligne {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: baseline;
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--filet);
}

.echelle-typo__ligne:last-child { border-bottom: none; padding-bottom: 0; }

.echelle-typo__specimen { min-width: 0; }

.vitrine__rangee {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}

.vitrine__pile { display: grid; gap: var(--sp-3); }

.vitrine__sommaire {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-filet), var(--shadow-card);
  margin-bottom: var(--sp-6);
}

.vitrine__sommaire a {
  padding: 6px 12px;
  border-radius: var(--radius-pilule);
  font-size: 12.5px;
  font-weight: 550;
  color: var(--gris-moyen);
  text-decoration: none;
  transition: background-color var(--transition), color var(--transition);
}

.vitrine__sommaire a:hover { background: var(--vert-foret-04); color: var(--vert-foret); }

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

@media (max-width: 767px) {
  .echelle-typo__ligne { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
  .page-etat__boite { padding: var(--sp-5); }
  .page-etat__titre { font-size: 24px; }
  .vitrine__manifeste { padding: var(--sp-5); }
}

/* =============================================================================
   Écrans d'authentification (connexion, activation, oubli, réinitialisation,
   changement imposé, double authentification)
   =============================================================================
   À gauche, la colonne de présentation sur le dégradé sauge vers Vert Forêt
   de la carte d'accueil du tableau de bord, texturé d'un grain fin ; à droite
   le formulaire sur la surface des cartes. Ni verre, ni forme décorative : les
   faits se lisent en liste à filets.
   ========================================================================== */

.corps-auth {
  min-height: 100dvh;
  background: var(--canevas);
}

.auth {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 100dvh;
}

/* --- Colonne de présentation ------------------------------------------------ */
.auth__marque {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-7);
  position: relative;
  isolation: isolate;
  padding: var(--sp-7) clamp(var(--sp-6), 6vw, 96px);
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(197, 209, 180, .42), transparent 60%),
    radial-gradient(70% 60% at 0% 100%, rgba(6, 32, 26, .55), transparent 70%),
    linear-gradient(165deg, #5B7644 0%, #3F5731 42%, #1F3A2A 78%, var(--vert-foret) 100%);
  color: var(--blanc);
  overflow: hidden;
}

/* Grain : texture rendue une fois par le moteur SVG puis répétée ; jamais
   repeinte au défilement. */
.auth__marque::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}

.auth__identite {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.auth__embleme {
  width: 44px;
  height: 44px;
  padding: 4px;
  border-radius: var(--radius);
  background: var(--blanc);
  box-shadow: 0 10px 24px -12px rgba(6, 20, 14, .6);
  object-fit: contain;
}

.auth__signature {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.2;
}

.auth__lieu {
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--sur-sombre-2);
}

.auth__message { max-width: 520px; }

.auth__accroche {
  margin: 0;
  font-size: clamp(26px, 2.5vw, 36px);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -.028em;
  color: var(--blanc);
  text-wrap: balance;
}

/* Trois faits vérifiables de la plateforme, en liste de définitions à
   filets : on lit un règlement intérieur, pas une plaquette. */
.auth__faits {
  margin: 0;
  max-width: 460px;
  border-top: 1px solid var(--filet-clair-fort);
}

.auth__fait {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--filet-clair);
  font-size: 13px;
  line-height: 1.5;
}

.auth__fait dt {
  font-weight: 600;
  color: var(--blanc);
}

.auth__fait dd {
  margin: 0;
  color: rgba(255, 255, 255, .8);
}

/* --- Colonne du formulaire -------------------------------------------------- */
.auth__panneau {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-7) var(--sp-6);
  background: var(--surface);
  border-left: 1px solid var(--filet);
}

.auth__boite {
  width: 100%;
  max-width: 380px;
}

.auth__embleme-mobile { display: none; }

.auth__entete { margin-bottom: var(--sp-6); }

.auth__titre {
  margin: 0;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.025em;
}

.auth__sous-titre {
  margin: var(--sp-2) 0 0;
  max-width: 44ch;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--gris-moyen);
}

.auth__sous-titre:empty { display: none; }

.auth__actions { margin-top: var(--sp-6); }

.auth__actions .bouton--bloc { min-height: 46px; font-size: 14px; }

.auth__lien {
  margin: var(--sp-4) 0 0;
  text-align: center;
  font-size: 13px;
}

.auth__lien a {
  font-weight: 600;
  color: var(--sauge-fonce);
  text-decoration: none;
}

.auth__lien a:hover { color: var(--vert-foret); text-decoration: underline; }

.auth__pied {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin-top: var(--sp-7);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--gris-moyen);
}

.auth__pied .icone { margin-top: 2px; color: var(--gris-moyen); }
.auth__pied p { margin: 0; }

/* --- Écrans 2FA, activation, réinitialisation ---------------------------- */
.auth__etapes {
  margin: 0 0 var(--sp-5);
  padding-left: var(--sp-5);
  font-size: 13.5px;
  line-height: 1.6;
  color: #3E443B;
}

.auth__etapes li { margin-bottom: var(--sp-2); }
.auth__etapes li::marker { color: var(--sauge-fonce); font-weight: 700; }

.auth__qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
  background: var(--surface-creuse);
  border-radius: var(--radius-md);
}

.auth__secret {
  margin: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .14em;
  word-break: break-all;
}

.auth__secret .champ__label { display: block; margin-bottom: var(--sp-2); text-align: center; }

/* Codes de récupération : lisibilité avant tout, ils sont recopiés à la main. */
.auth__codes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
  margin: var(--sp-5) 0 0;
  padding: 0;
  list-style: none;
}

.auth__codes li {
  padding: var(--sp-3);
  background: var(--surface-creuse);
  border-radius: var(--radius);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .08em;
}

/* --- Tablette et mobile ----------------------------------------------------
   Sous 1024 px, la colonne de présentation devient un bandeau au-dessus du
   formulaire ; sous 768 px elle disparaît : sur un téléphone, ce qu'on veut
   voir en premier est le champ de saisie. */
@media (max-width: 1023px) {
  .auth { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .auth__marque { gap: var(--sp-5); padding: var(--sp-6); }
  .auth__message { max-width: 560px; }
  .auth__accroche { font-size: 24px; }
  .auth__faits { max-width: none; }
  .auth__panneau { border-left: 0; border-top: 1px solid var(--filet); }
}

@media (max-width: 767px) {
  .corps-auth { background: var(--surface); }
  .auth { grid-template-rows: minmax(0, 1fr); }
  .auth__marque { display: none; }
  .auth__panneau { align-items: flex-start; padding: var(--sp-7) var(--sp-4) var(--sp-6); border-top: 0; }
  .auth__embleme-mobile {
    display: block;
    width: 44px;
    height: 44px;
    margin-bottom: var(--sp-6);
    padding: 4px;
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--filet);
  }
  .auth__titre { font-size: 24px; }
  .auth__codes { grid-template-columns: minmax(0, 1fr); }
}


/* =============================================================================
   Tableau de bord des espaces (Présidence, Département, Membre)
   =============================================================================
   Grille en bandes pleines, inspirée de la maquette de référence : une carte
   d'aperçu large et sa liste « à traiter », puis un grand nombre, une tendance
   et la carte d'accueil sauge, enfin le périmètre, le compte et les accès.
   Aucune bande ne laisse de cellule vide : la grille se recompose selon les
   blocs que l'espace fournit (classes `--sans-…`).
   ========================================================================== */

.tdb-entete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
  padding: var(--sp-2) 0 var(--sp-5);
}

.tdb-entete__titres { min-width: 0; }

.tdb-entete__titre {
  font-size: clamp(28px, 3.1vw, 40px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.038em;
}

.tdb-entete__intro {
  margin-top: var(--sp-2);
  max-width: 64ch;
  font-size: 14px;
  color: var(--gris-moyen);
}

.tdb-entete__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}

.tdb-entete__lieu {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--anthracite);
}

.tdb-entete__lieu .icone { color: var(--sauge-fonce); --icone-fond: var(--sauge); --icone-fond-opacite: .5; }
.tdb-entete__date { font-size: 12.5px; color: var(--gris-moyen); }

/* --- Bandes ---------------------------------------------------------------- */
.tdb-bande {
  display: grid;
  gap: var(--sp-4);
  align-items: stretch;
}

.tdb-bande + .tdb-bande,
.tdb-bande + .tdb-acces { margin-top: var(--sp-4); }

.tdb-bande--principale { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); }
.tdb-bande--secondaire { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); }
.tdb-bande--secondaire.tdb-bande--sans-effectif { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.tdb-bande--secondaire.tdb-bande--sans-tendance { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.tdb-bande--secondaire.tdb-bande--sans-effectif.tdb-bande--sans-tendance { grid-template-columns: minmax(0, 1fr); }
.tdb-bande--duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* --- En-tête de carte -------------------------------------------------------- */
.tdb-carte__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

.tdb-carte__titre {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.022em;
}

.tdb-pilule {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border: 1px solid var(--filet-appuye);
  border-radius: var(--radius-pilule);
  background: var(--surface);
  font-size: 12px;
  font-weight: 550;
  color: var(--gris-moyen);
  white-space: nowrap;
}

.tdb-compteur {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: var(--radius-pilule);
  background: var(--sauge-pale);
  color: var(--sauge-fonce);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.tdb-note {
  margin-top: var(--sp-4);
  font-size: var(--fs-small);
  color: var(--gris-moyen);
}

.tdb-lien {
  font-size: 13px;
  font-weight: 600;
  color: var(--sauge-fonce);
  text-decoration: none;
}

.tdb-lien:hover { color: var(--vert-foret); text-decoration: underline; }

/* --- Aperçu : progression ---------------------------------------------------- */
.tdb-progression { margin-bottom: var(--sp-5); }

.tdb-progression__entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}

.tdb-progression__libelle { font-size: 13.5px; font-weight: 600; }

.tdb-progression__valeur {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--sauge-fonce);
  font-variant-numeric: tabular-nums;
}

/* La piste hachurée figure « ce qui reste » : c'est le motif de la maquette,
   et il se lit sans légende. */
.tdb-progression__piste {
  position: relative;
  height: 14px;
  border-radius: var(--radius-pilule);
  background:
    repeating-linear-gradient(-45deg, transparent 0 5px, rgba(28, 33, 27, .07) 5px 7px),
    var(--surface-creuse);
  overflow: hidden;
}

.tdb-progression__remplissage {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--sauge-fonce), var(--sauge));
  transition: width var(--transition-panneau);
}

.tdb-progression--depasse .tdb-progression__remplissage { background: var(--rouge-brique); }
.tdb-progression--depasse .tdb-progression__valeur { color: var(--rouge-brique); }

.tdb-progression__graduations {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 11px;
  color: var(--gris-moyen);
  font-variant-numeric: tabular-nums;
}

.tdb-progression__detail { margin-top: var(--sp-2); font-size: var(--fs-small); color: var(--gris-moyen); }

.tdb-largeur-0 { width: 0%; }
.tdb-largeur-5 { width: 5%; }
.tdb-largeur-10 { width: 10%; }
.tdb-largeur-15 { width: 15%; }
.tdb-largeur-20 { width: 20%; }
.tdb-largeur-25 { width: 25%; }
.tdb-largeur-30 { width: 30%; }
.tdb-largeur-35 { width: 35%; }
.tdb-largeur-40 { width: 40%; }
.tdb-largeur-45 { width: 45%; }
.tdb-largeur-50 { width: 50%; }
.tdb-largeur-55 { width: 55%; }
.tdb-largeur-60 { width: 60%; }
.tdb-largeur-65 { width: 65%; }
.tdb-largeur-70 { width: 70%; }
.tdb-largeur-75 { width: 75%; }
.tdb-largeur-80 { width: 80%; }
.tdb-largeur-85 { width: 85%; }
.tdb-largeur-90 { width: 90%; }
.tdb-largeur-95 { width: 95%; }
.tdb-largeur-100 { width: 100%; }

/* --- Aperçu : tuiles --------------------------------------------------------- */
.tdb-tuiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tdb-tuile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--sp-5) var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  background: var(--surface-creuse);
  text-align: center;
  container-type: inline-size;
}

.tdb-tuile__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--sp-2);
  border-radius: 50%;
  background: var(--domaine-teinte, var(--surface));
  color: var(--domaine-encre, var(--sauge-fonce));
  box-shadow: 0 0 0 4px var(--surface);
  --icone-fond: var(--domaine-fond, var(--sauge));
  --icone-fond-opacite: .75;
}

.tdb-tuile__icone .icone { width: 24px; height: 24px; }

.tdb-tuile__libelle { font-size: 13px; font-weight: 600; }

/* Le montant se dimensionne sur la largeur de sa tuile : « 18 460 000 FCFA »
   tient sur une ligne dans une rangée de quatre. */
.tdb-tuile__valeur {
  font-size: 17px;
  font-size: clamp(14px, 10.5cqi, 21px);
  font-weight: 600;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tdb-tuile__valeur--negative { color: var(--rouge-brique); }
.tdb-tuile__note { font-size: 11.5px; color: var(--gris-moyen); }

/* --- À traiter --------------------------------------------------------------- */
.tdb-actions { display: flex; flex-direction: column; }

.tdb-liste-actions {
  display: grid;
  gap: 2px;
  margin: calc(-1 * var(--sp-2)) calc(-1 * var(--sp-2)) 0;
  padding: 0;
  list-style: none;
}

.tdb-action {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-2);
  border-radius: var(--radius-md);
  color: var(--anthracite);
  text-decoration: none;
  transition: background-color var(--transition);
}

.tdb-action:hover { background: var(--sauge-brume); color: var(--anthracite); }

.tdb-action__rang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--surface-creuse);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--sauge-fonce);
  font-variant-numeric: tabular-nums;
}

.tdb-action__libelle { flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 550; line-height: 1.4; }

.tdb-action__fleche {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--surface-creuse);
  color: var(--gris-moyen);
  transition: background-color var(--transition), color var(--transition), transform var(--transition);
}

.tdb-action:hover .tdb-action__fleche { background: var(--sauge-fonce); color: var(--blanc); transform: translateX(2px); }

.tdb-vide {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-3);
  border-radius: var(--radius-md);
  background: var(--surface-creuse);
  text-align: center;
}

.tdb-vide__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--sauge-fonce);
  --icone-fond: var(--sauge);
  --icone-fond-opacite: .45;
}

.tdb-vide__icone .icone { width: 26px; height: 26px; }

.tdb-vide__titre { font-size: 14.5px; font-weight: 600; }
.tdb-vide__texte { max-width: 34ch; font-size: 12.5px; color: var(--gris-moyen); }

/* --- Grand nombre --------------------------------------------------------------- */
.tdb-effectif { display: flex; flex-direction: column; }

.tdb-effectif__valeur {
  font-size: clamp(44px, 4.4vw, 60px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.055em;
  font-variant-numeric: tabular-nums;
}

.tdb-effectif__titre { margin-top: var(--sp-4); font-size: 16px; font-weight: 600; letter-spacing: -.018em; }
.tdb-effectif__note { margin-top: var(--sp-1); font-size: 12.5px; color: var(--gris-moyen); }
.tdb-effectif__note { margin-bottom: var(--sp-5); }
.tdb-effectif__lien { align-self: flex-start; margin-top: auto; }

/* --- Tendance --------------------------------------------------------------------- */
.tdb-tendance { display: flex; flex-direction: column; }
.tdb-tendance .tdb-carte__entete { margin-bottom: var(--sp-3); }
.tdb-tendance .graphique { flex: 1 1 auto; min-height: 210px; }

/* --- Carte d'accueil sauge ------------------------------------------------------- */
/*
  Seul aplat coloré de la page, comme le panneau vert qui ferme la maquette.
  Le dégradé reste assez sombre pour porter du blanc au-delà de 4,5:1 sur
  toute sa surface ; la lumière radiale en haut à droite lui donne sa matière.
*/
.tdb-accueil {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: 240px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(197, 209, 180, .35), transparent 60%),
    linear-gradient(160deg, #56703F 0%, #445B32 55%, #34482A 100%);
  color: var(--blanc);
  overflow: hidden;
}

.tdb-accueil__date { font-size: 12.5px; font-weight: 500; color: rgba(255, 255, 255, .88); }

.tdb-accueil__titre {
  margin-top: var(--sp-2);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.03em;
  color: var(--blanc);
}

.tdb-accueil__texte {
  margin-top: var(--sp-3);
  max-width: 34ch;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .92);
}

.tdb-accueil__action {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  align-self: stretch;
  padding: 12px 14px 12px 18px;
  border-radius: var(--radius-pilule);
  background: rgba(255, 255, 255, .96);
  color: var(--vert-foret);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--transition), transform var(--transition);
}

.tdb-accueil__action .icone {
  width: 28px;
  height: 28px;
  padding: 6px;
  border-radius: 50%;
  background: var(--vert-foret);
  color: var(--blanc);
}

.tdb-accueil__action:hover { background: var(--blanc); color: var(--vert-foret); }
.tdb-accueil__action:active { transform: scale(.98); }
.tdb-accueil__action:focus-visible { outline-color: var(--blanc); }

/* --- Périmètre --------------------------------------------------------------------- */
.tdb-missions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tdb-mission {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--radius-md);
  background: var(--surface-creuse);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}

.tdb-mission__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--sauge-pale);
  color: var(--sauge-fonce);
}

/* --- Compte ---------------------------------------------------------------------- */
.tdb-identite {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--radius-md);
  background: var(--surface-creuse);
}

.tdb-identite__texte { display: flex; flex-direction: column; min-width: 0; }
.tdb-identite__nom { font-size: 15px; font-weight: 600; letter-spacing: -.012em; }

.tdb-identite__meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--gris-moyen);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tdb-faits { margin: var(--sp-3) 0 0; }

.tdb-fait {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-1);
}

.tdb-fait + .tdb-fait { border-top: 1px solid var(--filet); }
.tdb-fait dt { font-size: 13px; color: var(--gris-moyen); }
.tdb-fait dd { margin: 0; font-size: 13.5px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

/* --- Accès regroupés ----------------------------------------------------------------- */
.tdb-acces__titre {
  margin-bottom: var(--sp-4);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.022em;
}

.tdb-acces__grille {
  display: grid;
  gap: var(--sp-4);
  align-items: start;
}

.tdb-domaine__titre {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
}

/* Pastille de couleur du domaine devant son titre : elle relie le groupe aux
   icônes qu'il contient et à celles du même groupe dans la navigation. */
.tdb-domaine__titre::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--domaine-fond, var(--sauge));
}

/* Quatre domaines se lisent en deux colonnes égales ; un nombre impair laisse
   le dernier s'étendre plutôt que d'abandonner une cellule vide. */
.tdb-acces__grille { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
.tdb-acces__grille > .tdb-domaine:last-child:nth-child(odd) { grid-column: 1 / -1; }

.tdb-domaine__liens {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tdb-raccourci {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 8px 14px 8px 11px;
  border-radius: var(--radius-pilule);
  background: var(--surface-creuse);
  color: var(--anthracite);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--transition), color var(--transition);
}

.tdb-raccourci .icone {
  width: 18px;
  height: 18px;
  color: var(--domaine-encre, var(--sauge-fonce));
  --icone-fond: var(--domaine-fond, var(--sauge));
  --icone-fond-opacite: .7;
}

.tdb-raccourci:hover { background: var(--domaine-teinte, var(--sauge-pale)); color: var(--anthracite); }

/* --- Adaptation ---------------------------------------------------------------------- */
@media (max-width: 1279px) {
  .tdb-bande--secondaire,
  .tdb-bande--secondaire.tdb-bande--sans-effectif { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tdb-bande--secondaire .tdb-tendance { grid-column: 1 / -1; order: -1; }
  .tdb-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
  .tdb-bande--principale,
  .tdb-bande--duo { grid-template-columns: minmax(0, 1fr); }
  .tdb-tuiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .tdb-entete { flex-direction: column; align-items: flex-start; padding-bottom: var(--sp-4); }
  .tdb-entete__meta { align-items: flex-start; text-align: left; }
  .tdb-bande--secondaire,
  .tdb-bande--secondaire.tdb-bande--sans-effectif,
  .tdb-bande--secondaire.tdb-bande--sans-tendance { grid-template-columns: minmax(0, 1fr); }
  .tdb-tuiles,
  .tdb-missions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tdb-acces__grille { grid-template-columns: minmax(0, 1fr); }
  .tdb-accueil { min-height: 0; }
}

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

@media (max-width: 420px) {
  .tdb-missions { grid-template-columns: minmax(0, 1fr); }
  .tdb-tuile { padding: var(--sp-4) var(--sp-2); }
}

/* Listes « À traiter » des tableaux de bord TG, SG et CG : même composant,
   posé sous un titre de carte classique. */
.carte__titre + .tdb-liste-actions { margin-top: var(--sp-3); }

/* Carte d'accueil élargie (espace membre) : le bouton garde sa largeur de
   bouton au lieu de s'étirer sur toute la carte. */
.tdb-bande--principale .tdb-accueil__action { align-self: flex-start; min-width: 280px; }