/* Resilibre — back-office. Mêmes jetons que le site (tokens.css), mise en page dense. */

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url("/fonts/figtree-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Literata";
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url("/fonts/literata-latin-wght-normal.woff2") format("woff2");
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--rl-papier);
  color: var(--rl-encre);
  font-family: var(--rl-police-texte);
  font-size: 15px;
  line-height: 1.5;
}
a { color: var(--rl-sapin); }
h1, h2 { font-family: var(--rl-police-titre); line-height: 1.15; }
h1 { font-size: 28px; margin: 0 0 var(--rl-espace-5); }
h2 { font-size: 20px; margin: var(--rl-espace-6) 0 var(--rl-espace-3); }

.cadre { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
@media (max-width: 760px) { .cadre { grid-template-columns: 1fr; } }

.menu {
  background: var(--rl-feuille);
  border-right: 1px solid var(--rl-filet);
  padding: var(--rl-espace-5) var(--rl-espace-4);
}
.menu__logo { display: block; margin-bottom: var(--rl-espace-5); line-height: 0; }
.menu__logo svg { width: 150px; height: auto; }
.logo-mot { fill: var(--rl-encre); }
.logo-cadre { fill: var(--rl-feuille); stroke: var(--rl-encre); }
.logo-coche { stroke: var(--rl-sapin); }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu li a, .menu li span {
  display: block;
  padding: var(--rl-espace-2) var(--rl-espace-3);
  border-radius: var(--rl-rayon-petit);
  text-decoration: none;
  color: var(--rl-encre);
}
.menu li a[aria-current="page"] { background: var(--rl-sapin-clair); color: var(--rl-sapin-fonce); font-weight: 600; }
.menu li a:hover { background: var(--rl-papier); }
.menu li span { color: var(--rl-encre-2); }
.menu li span small { font-size: 12px; }
.menu form { margin-top: var(--rl-espace-6); }

.contenu { padding: var(--rl-espace-6); max-width: 1200px; }

.cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--rl-espace-4); }
.carte {
  background: var(--rl-feuille);
  border: 1px solid var(--rl-filet);
  border-radius: var(--rl-rayon-carte);
  padding: var(--rl-espace-4);
}
.carte__chiffre { font-size: 28px; font-weight: 700; font-family: var(--rl-police-titre); }
.carte__libelle { color: var(--rl-encre-2); font-size: 13px; }
.carte--attente .carte__chiffre { color: var(--rl-encre-2); }

table { width: 100%; border-collapse: collapse; background: var(--rl-feuille); border: 1px solid var(--rl-filet); border-radius: var(--rl-rayon-carte); overflow: hidden; }
th, td { text-align: left; padding: var(--rl-espace-2) var(--rl-espace-3); border-bottom: 1px solid var(--rl-filet); vertical-align: top; }
th { font-size: 13px; color: var(--rl-encre-2); font-weight: 600; background: var(--rl-papier); }
td.nombre, th.nombre { text-align: right; font-variant-numeric: tabular-nums; }

.etiquette { display: inline-block; padding: 1px 8px; border-radius: var(--rl-rayon-pastille); font-size: 12px; font-weight: 600; white-space: nowrap; }
.etiquette--oui { background: var(--rl-sapin-clair); color: var(--rl-sapin-fonce); }
.etiquette--neutre { background: var(--rl-papier); color: var(--rl-encre-2); border: 1px solid var(--rl-filet); }
.etiquette--non { background: var(--rl-papier); color: var(--rl-brique); border: 1px solid var(--rl-brique); }
.aide { color: var(--rl-encre-2); font-size: 13px; }

.formulaire { display: grid; gap: var(--rl-espace-4); max-width: 720px; }
.champ label { display: block; font-weight: 600; margin-bottom: var(--rl-espace-1); }
.champ input[type=text], .champ input[type=url], .champ input[type=date], .champ input[type=email],
.champ input[type=password], .champ select, .champ textarea {
  width: 100%;
  font: inherit;
  color: var(--rl-encre);
  background: var(--rl-feuille);
  border: 1px solid var(--rl-bord-champ);
  border-radius: var(--rl-rayon-petit);
  padding: var(--rl-espace-2) var(--rl-espace-3);
  min-height: 40px;
}
.champ textarea { min-height: 96px; }
.erreur { color: var(--rl-brique); font-size: 13px; margin-top: var(--rl-espace-1); }
.bouton {
  display: inline-block;
  font: inherit;
  font-weight: 600;
  background: var(--rl-sapin);
  color: var(--rl-sur-action);
  border: 0;
  border-radius: var(--rl-rayon-petit);
  padding: var(--rl-espace-2) var(--rl-espace-5);
  min-height: 40px;
  cursor: pointer;
  text-decoration: none;
}
.bouton:hover { background: var(--rl-sapin-fonce); color: var(--rl-sur-action); }
.bouton--discret { background: none; color: var(--rl-sapin); padding: 0; min-height: 0; text-decoration: underline; }
.bouton--discret:hover { background: none; color: var(--rl-sapin-fonce); }
.statut { background: var(--rl-sapin-clair); color: var(--rl-sapin-fonce); padding: var(--rl-espace-3) var(--rl-espace-4); border-radius: var(--rl-rayon-petit); margin-bottom: var(--rl-espace-5); }
.encadre { background: var(--rl-feuille); border: 1px solid var(--rl-filet); border-radius: var(--rl-rayon-carte); padding: var(--rl-espace-5); margin-bottom: var(--rl-espace-5); }

/* Écrans de connexion */
.connexion { max-width: 420px; margin: var(--rl-espace-8) auto; padding: 0 var(--rl-espace-4); }
.connexion .encadre { display: grid; gap: var(--rl-espace-4); }
.codes { font-family: ui-monospace, Menlo, monospace; columns: 2; }

/* Lisibilité du back-office (20/10/2026) : sous-titres du menu, introduction de chaque
   écran, bloc « À faire », tableau de fréquentation, deux colonnes. */
.menu li a small, .menu li span small {
  display: block;
  font-size: var(--rl-taille-label);
  font-weight: 400;
  color: var(--rl-encre-2);
  margin-top: 2px;
}
.intro { font-size: var(--rl-taille-chapeau); color: var(--rl-encre-2); max-width: var(--rl-largeur-texte); }
.a-faire { list-style: none; padding: 0; margin: 0 0 var(--rl-espace-6); display: grid; gap: var(--rl-espace-3); max-width: var(--rl-largeur-texte); }
.a-faire li {
  background: var(--rl-feuille);
  border: 1px solid var(--rl-filet);
  border-left: 4px solid var(--rl-sapin);
  border-radius: var(--rl-rayon-petit);
  padding: var(--rl-espace-3) var(--rl-espace-4);
}
.a-faire li a { white-space: nowrap; margin-left: var(--rl-espace-2); }
.a-faire .a-faire__alerte { border-left-color: var(--rl-brique); }
.a-faire .a-faire__ok { border-left-color: var(--rl-filet); color: var(--rl-encre-2); }
.tableau-chiffres th[scope="row"] { text-align: left; font-weight: 600; }
.tableau-chiffres .nombre { font-size: var(--rl-taille-h3); }
.bientot { color: var(--rl-encre-2); font-size: var(--rl-taille-petit); max-width: var(--rl-largeur-texte); }
.deux-colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rl-espace-6); }
.regles-simples { max-width: var(--rl-largeur-texte); padding-left: var(--rl-espace-5); }
.regles-simples li { margin-bottom: var(--rl-espace-2); }
@media (max-width: 800px) { .deux-colonnes { grid-template-columns: minmax(0, 1fr); } }
.tableau-chiffres th[scope="row"] { background: var(--rl-feuille); color: var(--rl-encre); font-size: var(--rl-taille-texte); }
.tableau-chiffres thead th { white-space: nowrap; }
.contenu td:first-child { min-width: 200px; }