/* ==========================================================================
   Espace intervenant — mise en page.

   Les jetons viennent de jetons.css, chargé avant celle-ci. Ici, seulement
   la façon dont ils s'assemblent : fond crème, cartes blanches, bandeau
   vert mince, barre basse au pouce.

   Le crème est la marque de l'espace. La gestion est sur fond blanc : c'est
   ce qui distingue l'univers des intervenantes de celui du gérant, d'un
   coup d'œil et sans lire.
   ========================================================================== */

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 0 calc(var(--barre) + 18px);
  background: var(--fond-doux);
  color: var(--texte-principal);
  font-family: var(--police-texte);
  font-size: 15.5px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

main { padding: 18px 16px 0; max-width: 760px; margin: 0 auto; }

/* --- Titres et chiffres ------------------------------------------------- */

h1, h2, h3 { font-family: var(--police-titre); font-weight: 700; margin: 0 0 10px; }
h1 { font-size: 22px; letter-spacing: -0.01em; }
h2 { font-size: 17px; margin-top: 26px; font-weight: 600; }
h3 { font-size: 15px; font-weight: 600; }

/* Montants, dates, quantièmes : Archivo, chiffres alignés. Une colonne de
   nombres qui ne s'aligne pas se recompte au lieu de se lire. */
.nombre, .montant, td.droite, th.droite, .bloc-date .jour, .euros {
  font-family: var(--police-titre);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.intro {
  color: var(--gris-encre);
  margin: 0 0 18px;
  font-size: 15px;
}

.vide {
  color: var(--gris-encre);
  font-style: italic;
  padding: 18px 0;
}

/* --- Bandeau d'en-tête --------------------------------------------------- */
/* Mince, et c'est tout ce que le vert occupe en haut. Deux lignes à droite :
   le titre de l'écran, puis le nom — jamais l'inverse, on sait qui on est. */

.bandeau {
  background: var(--encre);
  color: var(--creme);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.bandeau .marque { flex: none; display: block; }

.bandeau .ou {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.bandeau .ecran {
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Le crème à 78 % tient 4,5:1 sur l'encre ; le gris de la charte, non —
   d'où ce ton plutôt que --gris-encre, qui ne passerait pas ici. */
/* Le nom mène au profil. Lien pour de vrai, donc : couleur tenue, pas de
   soulignement au repos, et 44 px de haut comme toute cible tactile. */
.bandeau .qui {
  font-size: 12.5px;
  color: color-mix(in srgb, var(--creme) 78%, transparent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 24px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bandeau .qui:hover, .bandeau .qui:focus-visible { color: var(--creme); text-decoration: underline; }
/* La zone tactile dépasse le texte sans décaler la mise en page. */
.bandeau .ou { position: relative; }
.bandeau .qui::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -10px;
  height: 44px;
}

/* Le bouton « Quitter » du bandeau. Il portait sa couleur en dur dans le
   gabarit : sur le bandeau vert elle convenait en clair, et le rendait
   invisible dès que le thème basculait. Il prend ici le traitement du lien
   de sortie, qui vit sur le même fond vert. */
.bandeau .b.ter.sortie,
.bandeau a.sortie {
  flex: none;
  color: color-mix(in srgb, var(--creme) 78%, transparent);
  text-decoration: none;
  font-size: 13px;
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0 4px;
}
.bandeau .b.ter.sortie:hover,
.bandeau a.sortie:hover { color: var(--creme); background: transparent; }

/* --- Cartes -------------------------------------------------------------- */

.encart, .carte {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 14px 16px;
  margin: 0 0 12px;
}

.encart .titre, .carte .titre {
  font-family: var(--police-titre);
  font-weight: 600;
  margin-bottom: 2px;
}

.encart .detail, .carte .detail {
  color: var(--gris-encre);
  font-size: 14px;
}

/* Orange : ce qui attend un geste, et rien d'autre. Le liseré gauche porte
   le signal à l'endroit où le pouce descend la liste. */
.encart.action, .carte.attente, .encart.attente {
  border-color: var(--orange);
  border-left: 4px solid var(--orange-fonce);
  padding-left: 13px;
}

/* --- Carte d'une matinée ------------------------------------------------- */
/* Bloc de date vert à gauche, le reste à droite. C'est la brique de tous les
   écrans de liste : plages, prestations, factures. */

.matinee {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.bloc-date {
  flex: none;
  width: 66px;
  background: var(--vert-ombre);
  color: var(--creme);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 6px;
  text-align: center;
}

.bloc-date .abrege {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.82;
}

.bloc-date .jour {
  font-weight: 800;
  font-size: 25px;
  line-height: 1.1;
}

.bloc-date .mois { font-size: 11.5px; opacity: 0.82; }

.matinee .corps {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.matinee .horaire {
  font-family: var(--police-titre);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.matinee.attente { border-left: 4px solid var(--orange-fonce); }
.matinee.attente .bloc-date { background: var(--orange-fonce); }

/* --- Pastilles d'état ---------------------------------------------------- */
/* Vert clair : ce qui est acquis. Orange : ce qui attend. Le mot porte le
   sens, la couleur le double — un écran s'imprime, et une pastille seule ne
   dit rien à qui le découvre. */

.etat, .pt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--vert-clair);
  color: var(--encre);
  font-weight: 500;
  white-space: nowrap;
}

.etat.acquis, .etat.regle, .etat.inscrite, .etat.payee { background: var(--vert-clair); }

.etat.attente, .etat.retard, .pt.attente {
  background: var(--orange);
  color: #2B1A08;
}

.etat.neutre {
  background: transparent;
  border: 1px solid var(--trait);
  color: var(--gris-encre);
}

/* --- Boutons et liens ---------------------------------------------------- */
/* De vrais <button> et <a href>. 44 px de haut partout : c'est la cible, pas
   une marge de confort. */

.b, button.b, a.b, button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--rayon-petit);
  border: 1px solid transparent;
  background: var(--encre);
  color: var(--creme);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.b:hover, button.b:hover, a.b:hover { background: var(--vert-ombre); }

.b.sec, a.b.sec {
  background: var(--surface);
  color: var(--texte-principal);
  border-color: var(--trait);
}
.b.sec:hover { background: var(--creme); }

.b.ter, a.b.ter {
  background: transparent;
  color: var(--gris-encre);
  border-color: transparent;
  padding: 0 10px;
}
.b.ter:hover { color: var(--texte-principal); background: transparent; }

a { color: var(--lien); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--orange-fonce);
  outline-offset: 2px;
}

/* --- Formulaires --------------------------------------------------------- */

label { display: block; font-size: 13.5px; color: var(--gris-encre); margin-bottom: 5px; }

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], select, textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  font: inherit;
  color: var(--texte-principal);
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-petit);
}
input[type="number"] { font-family: var(--police-titre); font-variant-numeric: tabular-nums; }

input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }

/* --- Avis ---------------------------------------------------------------- */

.avis {
  padding: 11px 14px;
  border-radius: var(--rayon-petit);
  border: 1px solid var(--trait);
  border-left: 4px solid var(--vert-ombre);
  background: var(--surface);
  margin: 0 0 14px;
  font-size: 14.5px;
}
.avis.error, .avis.warning { border-left-color: var(--orange-fonce); }
.avis.success { border-left-color: var(--vert-ombre); }

.erreur {
  padding: 11px 14px;
  border-radius: var(--rayon-petit);
  background: var(--surface);
  border: 1px solid var(--orange);
  border-left: 4px solid var(--orange-fonce);
  margin: 0 0 14px;
  font-size: 14.5px;
}

/* --- Tableaux ------------------------------------------------------------ */

table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
th {
  text-align: left;
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gris-encre);
  padding: 8px 6px;
  border-bottom: 1px solid var(--trait);
}
td { padding: 10px 6px; border-bottom: 1px solid var(--trait); }
tr:last-child td { border-bottom: 0; }
.droite { text-align: right; }

/* Un tableau large défile dans son cadre, jamais la page. */
.cadre-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --- Barre de navigation basse ------------------------------------------- */
/* Quatre entrées, au pouce. Icônes au trait — jamais d'emoji : ils changent
   de dessin d'un appareil à l'autre et ne se colorent pas. */

.nav-basse {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 20;
  display: flex;
  background: var(--surface);
  border-top: 1px solid var(--trait);
  padding-bottom: env(safe-area-inset-bottom);
}

.nav-basse a {
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--barre);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-decoration: none;
  color: var(--gris-encre);
  font-size: 10.5px;
  line-height: 1.2;
  padding: 6px 1px;
  white-space: nowrap;
  position: relative;
}

/* Sur les écrans les plus étroits encore en service — 320 px, soit 64 px par
   entrée — le libellé le plus long frôle le bord. On le resserre plutôt que
   de le couper. */
@media (max-width: 360px) {
  .nav-basse a { font-size: 9.5px; letter-spacing: -0.01em; }
}

.nav-basse a svg { width: 22px; height: 22px; stroke: currentColor; fill: none;
                   stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.nav-basse a.actif { color: var(--texte-principal); font-weight: 600; }
.nav-basse a.actif svg { stroke-width: 2.1; }

/* La pastille de compteur reste lisible : chiffre sur vert clair. */
.nav-basse .compteur {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(2px);
  min-width: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--orange-fonce);
  color: var(--sur-orange-fonce);
  font-family: var(--police-titre);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}

/* --- Pied ---------------------------------------------------------------- */

footer {
  margin: 28px 0 0;
  padding: 16px 0;
  color: var(--gris-encre);
  font-size: 13px;
  border-top: 1px solid var(--trait);
}

/* --- Écran de connexion -------------------------------------------------- */
/* Pas de bandeau ni de barre basse : on n'est encore nulle part. */

body.connexion {
  padding: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.boite-connexion {
  width: 100%;
  max-width: 380px;
  margin: 24px;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 28px 24px;
}

.boite-connexion .marque { display: block; margin: 0 auto 14px; }
.boite-connexion h1 { text-align: center; font-size: 20px; margin-bottom: 2px; }
.boite-connexion .sous {
  text-align: center; color: var(--gris-encre);
  font-size: 14px; margin: 0 0 22px;
}
.boite-connexion button[type="submit"] { width: 100%; margin-top: 6px; }
.boite-connexion .oubli { margin: 16px 0 0; text-align: center; font-size: 13.5px; }

/* --- Écrans larges ------------------------------------------------------- */
/* Au-delà du téléphone, la barre basse passe en haut : à la souris, une
   barre collée en bas est un détour. */

@media (min-width: 720px) {
  body { padding-bottom: 24px; }
  .nav-basse {
    position: static;
    max-width: 760px;
    margin: 14px auto 0;
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    overflow: hidden;
  }
  .nav-basse a { min-height: 50px; flex-direction: row; gap: 8px; font-size: 13.5px; }
}

@media print {
  .nav-basse, .bandeau a.sortie, .bandeau .sortie { display: none; }
  body { background: #FFFFFF; padding: 0; }
  .encart, .carte { break-inside: avoid; }
}

/* --- Commandes de l'écran Plages ----------------------------------------
   Trois rangées franches. Elles partageaient une seule rangée en flex-wrap,
   et les boutons — des inline-flex de 44 px dans une boîte dont la hauteur de
   ligne fait 24 px — se chevauchaient dès qu'ils passaient à la ligne.

   Trois règles tiennent la réparation : chaque rangée est un bloc distinct
   avec sa marge, aucune n'est positionnée en absolu, et partout où un retour
   à la ligne reste possible le gap porte sur les deux axes. Aucune hauteur
   n'est imposée nulle part : c'est le contenu qui la donne. */

.commandes-mois { margin: 0 0 18px; }

/* 1. Navigation du mois. */
.rang-mois {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;                 /* les deux axes */
  margin: 0 0 14px;
}

.rang-mois .pas {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 44px;         /* cible tactile, jamais une hauteur figée */
  border: 1px solid var(--trait);
  border-radius: var(--rayon-petit);
  background: var(--surface);
  color: var(--texte-principal);
  text-decoration: none;
}
.rang-mois .pas:hover { background: var(--creme); }
.rang-mois .pas svg {
  width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.rang-mois .nom-mois {
  flex: 1 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 8px;
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 17px;
  text-transform: capitalize;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--lien);
  text-decoration: none;
  border-radius: var(--rayon-petit);
}
.rang-mois .nom-mois:hover { background: var(--creme); }

/* Au mois courant, le nom cesse d'être un lien : il n'a nulle part où mener.
   Un lien sans effet se touche quand même, et déçoit. */
.rang-mois .nom-mois.actuel {
  color: var(--texte-principal);
  cursor: default;
}

/* 2. Bascule liste / calendrier : deux états d'un même interrupteur. */
.rang-vue {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 14px;
}

.bascule {
  display: inline-flex;
  padding: 3px;
  gap: 3px;
  background: var(--creme);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-petit);
}
.bascule a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;         /* 38 + 2×3 de cadre = 44 px de cible */
  padding: 0 16px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 500;
  color: var(--gris-encre);
  text-decoration: none;
  white-space: nowrap;
}
.bascule a.choisi {
  background: var(--surface);
  color: var(--texte-principal);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--encre) 10%, transparent);
}

/* 3. Les heures retenues, en texte simple. */
.rang-heures {
  margin: 0;
  color: var(--gris-encre);
  font-size: 14.5px;
  line-height: 1.5;
}

/* Téléphone étroit : à 360 px la rangée de navigation dispose de 328 px —
   44 + 44 pour les flèches, 240 pour le nom, « septembre 2026 » y tient. */
@media (max-width: 380px) {
  .rang-mois .nom-mois { font-size: 16px; }
  .bascule a { padding: 0 13px; }
}

/* Télécharger le PDF — une action, donc un bouton.

   C'était un lien posé sur le numéro de facture : rien n'y disait qu'on
   pouvait appuyer, et le numéro n'est pas l'action, il nomme la chose. Le
   bouton prend toute la largeur parce qu'il est le seul geste de la carte,
   et qu'un pouce ne vise pas un lien de trois mots. */
.b.telecharger {
  display: flex;
  width: 100%;
  margin-top: 14px;
  gap: 9px;
  background: var(--vert-ombre);
  color: var(--creme);
}
.b.telecharger:hover { background: var(--encre); }
.b.telecharger svg {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}