/* ============================================================================
   Feuille de style unique.
   Ecrite a la main, sans framework et sans etape de build : ce qui est ici est
   ce qui est servi. Incrementer ?v= dans les gabarits apres modification,
   sinon le cache navigateur sert l'ancienne version.
   ========================================================================== */

:root {
  --fond: #f6f6f4;
  --fond-carte: #ffffff;
  --texte: #1c1c1a;
  --texte-discret: #6b6b66;
  --bord: #dedcd6;
  --accent: #2f5d50;
  --accent-clair: #e8f0ed;
  --erreur: #8c2f2f;
  --erreur-fond: #fbeaea;
  --succes: #2c6b3f;
  --succes-fond: #e9f4ec;
  --important: #7a5a12;
  --important-fond: #fdf4de;
  --rayon: 8px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #1a1a18;
    --fond-carte: #242422;
    --texte: #ededea;
    --texte-discret: #9b9b95;
    --bord: #3a3a36;
    --accent: #7fb8a5;
    --accent-clair: #223029;
    --erreur: #e39c9c;
    --erreur-fond: #3a2222;
    --succes: #8fcfa4;
    --succes-fond: #1f2f24;
    --important: #dcc07a;
    --important-fond: #332c19;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* --- Structure ----------------------------------------------------------- */

.entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: .85rem 1.5rem;
  background: var(--fond-carte);
  border-bottom: 1px solid var(--bord);
}

.marque { font-weight: 600; text-decoration: none; color: var(--texte); }

/* --- Navigation à deux niveaux -------------------------------------------- */

.entete { display: block; padding: 0; }
.entete-principale {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  padding: .8rem 1.5rem;
}
.espaces { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; }

/* La seconde rangée ne montre que les écrans de l'espace en cours : la barre
   principale ne s'allonge donc jamais, quel que soit le nombre d'écrans. */
.sous-navigation {
  display: flex; flex-wrap: wrap; align-items: center; gap: .25rem;
  padding: .45rem 1.5rem;
  background: var(--fond);
  border-top: 1px solid var(--bord);
}
.sous-navigation a {
  padding: .25rem .6rem; border-radius: 5px;
  color: var(--texte-discret); text-decoration: none; font-size: .88rem;
  white-space: nowrap;
}
.sous-navigation a:hover { background: var(--fond-carte); color: var(--texte); }
.sous-navigation .lien-actif { background: var(--accent-clair); color: var(--accent); font-weight: 600; }

.navigation { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; }

.onglet {
  display: inline-block;
  padding: .35rem .7rem;
  border-radius: var(--rayon);
  color: var(--texte-discret);
  text-decoration: none;
  font-size: .93rem;
  cursor: pointer;
  list-style: none;          /* retire la fleche du <summary> */
  white-space: nowrap;
}
.onglet::-webkit-details-marker { display: none; }
.onglet:hover { background: var(--fond); color: var(--texte); }

.onglet-actif,
.menu-actif > .onglet { background: var(--accent-clair); color: var(--accent); font-weight: 600; }

/* Le retour à l'accueil est le seul chemin vers les autres espaces : il doit
   se voir, sans pour autant rivaliser avec le nom de l'espace courant. */
.retour-accueil { color: var(--texte-discret); }
.retour-accueil:hover { color: var(--accent); }

/* Le panneau se superpose au contenu plutôt que de pousser la page : ouvrir un
   menu ne doit pas faire sauter ce qu'on est en train de lire. */
.menu { position: relative; }

.menu[open] > .onglet { background: var(--accent); color: #fff; }

.menu-panneau {
  position: absolute;
  z-index: 20;
  top: calc(100% + .3rem);
  left: 0;
  min-width: 210px;
  padding: .35rem;
  background: var(--fond-carte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  box-shadow: 0 6px 20px rgb(0 0 0 / .12);
  display: flex;
  flex-direction: column;
}

.menu-panneau a {
  padding: .45rem .6rem;
  border-radius: 5px;
  color: var(--texte);
  text-decoration: none;
  font-size: .92rem;
  white-space: nowrap;
}
.menu-panneau a:hover { background: var(--fond); }
.menu-panneau .lien-actif { background: var(--accent-clair); color: var(--accent); font-weight: 600; }

.identite {
  margin-left: auto;
  display: flex; align-items: center; gap: .75rem;
  color: var(--texte-discret); font-size: .88rem;
}

.contenu { max-width: 1100px; margin: 0 auto; padding: 1.75rem 1.5rem 4rem; }
.pied { padding: 1.5rem; text-align: center; color: var(--texte-discret); font-size: .85rem; }

h1 { font-size: 1.5rem; margin: 0 0 1.25rem; }
h2 { font-size: 1.1rem; margin: 0 0 .75rem; }

/* --- Pages nues (connexion, installation) -------------------------------- */

.page-nue { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 1.5rem; }

.carte-centrale {
  width: 100%;
  max-width: 420px;
  background: var(--fond-carte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 2rem;
}

.marque-nue { font-size: 1.25rem; margin: 0 0 1.5rem; text-align: center; }

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

.formulaire { display: flex; flex-direction: column; gap: .35rem; }
.formulaire-etroit { max-width: 420px; }
.formulaire label { font-size: .85rem; color: var(--texte-discret); margin-top: .75rem; }

.formulaire input,
.formulaire select {
  padding: .6rem .7rem;
  font: inherit;
  color: var(--texte);
  background: var(--fond);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
}

.formulaire input:focus,
.formulaire select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.bouton {
  margin-top: 1.25rem;
  padding: .6rem 1.1rem;
  font: inherit;
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  background: var(--fond);
  color: var(--texte);
  cursor: pointer;
}

.bouton-primaire { background: var(--accent); border-color: var(--accent); color: #fff; }
.bouton-discret { margin-top: 0; padding: .3rem .6rem; font-size: .85rem; }
.bouton:hover { filter: brightness(1.08); }

.lien-bouton {
  background: none; border: 0; padding: 0;
  font: inherit; color: var(--texte-discret);
  cursor: pointer; text-decoration: underline;
}

.en-ligne { display: inline; }

/* --- Alertes ------------------------------------------------------------- */

.alerte { padding: .75rem 1rem; border-radius: var(--rayon); margin: 0 0 1rem; font-size: .95rem; }
.alerte-erreur { background: var(--erreur-fond); color: var(--erreur); }
.alerte-succes { background: var(--succes-fond); color: var(--succes); }
.alerte-info { background: var(--accent-clair); color: var(--accent); }
.alerte-important { background: var(--important-fond); color: var(--important); }

/* Manquait depuis l'arrivee du ciblage, qui l'employait quatre fois : les
   encarts s'affichaient sans fond ni couleur, comme du texte brut la ou un
   bloc colore etait attendu -- l'ecran paraissait casse sans qu'aucune erreur
   ne soit levee. C'est ce que le controle des modificateurs orphelins, dans
   bin/verifier.php, empeche desormais. */
.alerte-attention { background: var(--important-fond); color: var(--important); }

.mdp {
  display: block;
  margin: .5rem 0;
  padding: .5rem .75rem;
  background: var(--fond-carte);
  border: 1px dashed var(--bord);
  border-radius: var(--rayon);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.1rem;
  letter-spacing: .04em;
  user-select: all;
}

/* --- Blocs --------------------------------------------------------------- */

.cartes { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.75rem; }

.carte {
  flex: 1 1 160px;
  background: var(--fond-carte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 1.1rem 1.25rem;
}

.carte-chiffre { display: block; font-size: 1.9rem; font-weight: 600; line-height: 1.1; }
.carte-libelle { color: var(--texte-discret); font-size: .9rem; }

.encart {
  background: var(--fond-carte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
}

.encart-discret { color: var(--texte-discret); font-size: .92rem; }
.colonnes { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.colonnes > * { flex: 1 1 320px; }

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

.tableau {
  width: 100%;
  border-collapse: collapse;
  background: var(--fond-carte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  overflow: hidden;
  font-size: .93rem;
}

.tableau th, .tableau td { padding: .6rem .8rem; text-align: left; border-bottom: 1px solid var(--bord); }
.tableau th { color: var(--texte-discret); font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; }
.tableau tr:last-child td { border-bottom: 0; }
.ligne-inactive { opacity: .55; }
.actions { white-space: nowrap; display: flex; gap: .4rem; }

.etiquette {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .15rem .5rem; margin: .1rem .2rem .1rem 0;
  background: var(--accent-clair); color: var(--accent);
  border-radius: 999px; font-size: .82rem;
}

.discret { color: var(--texte-discret); }
.aide { color: var(--texte-discret); font-size: .9rem; }
.aide-inline { color: var(--texte-discret); font-weight: 400; }

/* --- Ecrans du referentiel ------------------------------------------------ */

.titre-avec-action { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.titre-avec-action h1 { margin: 0; flex: 1 1 auto; }
.titre-avec-action .bouton { margin-top: 0; }

/* Bascule entre deux vues du meme objet : ce n'est pas une navigation, c'est
   un changement de point de vue. D'ou une apparence differente des onglets. */
.bascule-vue { display: inline-flex; gap: .2rem; padding: .2rem;
               background: var(--fond); border: 1px solid var(--bord); border-radius: var(--rayon); }
.bascule-vue a, .bascule-vue span {
  padding: .25rem .7rem; border-radius: 5px; font-size: .9rem;
  color: var(--texte-discret); text-decoration: none;
}
.bascule-vue a:hover { background: var(--fond-carte); color: var(--texte); }
.bascule-vue .filtre-actif { background: var(--accent); color: #fff; font-weight: 600; }

.fil-ariane { margin: 0 0 .5rem; font-size: .88rem; }
.fil-ariane a { color: var(--texte-discret); }

.formulaire-large { max-width: 720px; }
.formulaire textarea {
  padding: .6rem .7rem; font: inherit; color: var(--texte);
  background: var(--fond); border: 1px solid var(--bord); border-radius: var(--rayon);
  resize: vertical;
}
.formulaire textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Les grilles se replient d'elles-memes sous 340 px par colonne. */
.grille-deux, .grille-trois { display: grid; gap: 0 1rem; }
.grille-deux { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grille-trois { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.grille-deux label:first-child, .grille-trois label:first-child { margin-top: .75rem; }

/* Plusieurs vues emploient ces deux classes depuis longtemps sans qu'aucune
   regle ne leur reponde : les champs s'empilaient et les montants restaient
   alignes a gauche, ce qui rend une colonne de prix illisible. */
.grille-champs { display: grid; gap: 0 1rem;
                 grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grille-champs label:first-child { margin-top: .75rem; }
.grille-champs .aide { display: block; margin-top: .2rem; }

.tableau .colonne-montant { text-align: right; font-variant-numeric: tabular-nums; }

.case { display: flex; align-items: center; gap: .5rem; margin-top: 1rem; font-size: .95rem; color: var(--texte); }
.case input { width: auto; }

.barre-actions { display: flex; gap: .75rem; align-items: center; margin-top: 1.5rem; }
.barre-actions .bouton { margin-top: 0; }

.obligatoire { color: var(--erreur); }

/* Fiche en definitions : deux colonnes qui se replient sur telephone. */
.fiche {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .75rem 1.5rem; margin: 0 0 1.5rem;
  background: var(--fond-carte); border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: 1.25rem 1.5rem;
}
.fiche dt { color: var(--texte-discret); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
.fiche dd { margin: .15rem 0 0; }

.alerte-inline {
  display: inline-block; margin-left: .35rem; padding: .05rem .4rem;
  background: var(--important-fond); color: var(--important);
  border-radius: 4px; font-size: .82rem;
}

.total-juste { color: var(--succes); }
.total-faux  { color: var(--erreur); }
.tableau tfoot th { border-top: 2px solid var(--bord); border-bottom: 0; }

h3 { font-size: 1rem; margin: 0 0 .75rem; }

/* Un h2 a l'interieur d'un formulaire ouvre une section : il lui faut de l'air
   au-dessus, sinon il se colle au champ precedent. */
.formulaire h2 { margin: 2rem 0 .25rem; padding-top: 1rem; border-top: 1px solid var(--bord); }
.formulaire h2:first-of-type { margin-top: 1rem; padding-top: 0; border-top: 0; }
.formulaire > .aide { margin: .25rem 0 0; }

/* Tableau de chiffres : libelle a gauche, montant aligne a droite, commentaire. */
.tableau-chiffres th { text-transform: none; font-size: .93rem; color: var(--texte); font-weight: 400; }
.tableau-chiffres .montant {
  text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums; font-weight: 500;
}
.tableau-chiffres .ligne-total th,
.tableau-chiffres .ligne-total td {
  border-top: 2px solid var(--bord);
  font-weight: 600; color: var(--accent);
}

/* L'exercice en cours doit sauter aux yeux dans un plan de cinquante lignes. */
.ligne-courante { background: var(--accent-clair); }
.ligne-courante th, .ligne-courante td { font-weight: 600; }

/* Champs de saisie a l'interieur d'un tableau : compacts, alignes a droite
   pour les montants, et sans marge haute heritee du formulaire. */
.tableau input[type="text"], .tableau input[type="number"] {
  width: 100%; padding: .35rem .5rem; font: inherit; font-size: .92rem;
  color: var(--texte); background: var(--fond);
  border: 1px solid var(--bord); border-radius: 5px;
}
.tableau .champ-montant { text-align: right; font-variant-numeric: tabular-nums; }
.tableau input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Un input à width:100% dans une colonne étroite devient illisible : la
   colonne se resserre sur son en-tête et il ne reste la place que d'un ou deux
   caractères. On donne donc une largeur propre à chaque type de champ. */
.tableau-lignes { table-layout: auto; min-width: 720px; }

/* SUR MOBILE, CHAQUE LIGNE DEVIENT UN BLOC. Le tableau a une largeur
   minimale de 720px : sur un telephone il debordait de l ecran. Le faire
   defiler horizontalement serait supportable pour un tableau qu on lit,
   pas pour un formulaire qu on remplit -- on perdrait de vue le champ
   qu on est en train de saisir.

   L en-tete disparait, chaque cellule porte donc son etiquette : c est a
   quoi sert `data-libelle` dans le gabarit. */
@media (max-width: 48rem) {
  .tableau-lignes { min-width: 0; display: block; }
  .tableau-lignes thead, .tableau-lignes tfoot th:empty { display: none; }
  .tableau-lignes tbody, .tableau-lignes tfoot, .tableau-lignes tfoot tr { display: block; }

  .tableau-lignes .ligne-travaux {
    display: block; position: relative;
    border: 1px solid var(--bord); border-radius: var(--rayon);
    padding: .75rem; margin-bottom: .75rem; background: var(--fond-carte);
  }
  .tableau-lignes .ligne-travaux td {
    display: block; border: 0; padding: .25rem 0;
  }
  .tableau-lignes .ligne-travaux td::before {
    content: attr(data-libelle);
    display: block; font-size: .78rem; color: var(--texte-discret);
    margin-bottom: .15rem;
  }
  .tableau-lignes .ligne-travaux input,
  .tableau-lignes .ligne-travaux select { width: 100%; min-width: 0; }
  .tableau-lignes .champ-duree { width: 5rem; }
  .tableau-lignes .champ-date  { width: auto; }

  /* Le bouton de retrait se pose en coin plutot que de prendre une ligne
     entiere sous les champs, ou il serait le plus gros element du bloc. */
  .tableau-lignes .cellule-retirer {
    position: absolute; top: .4rem; right: .6rem; padding: 0;
  }
  .tableau-lignes .cellule-retirer::before { content: none; }
  .cellule-traitement { white-space: normal; }

  .tableau-lignes tfoot th { display: inline-block; border: 0; padding: .2rem .4rem; }
}
.tableau-lignes td, .tableau-lignes th { vertical-align: middle; }
.tableau-lignes .champ-categorie { min-width: 15rem; width: auto; }
.tableau-lignes .champ-montant   { width: 7rem; }
.tableau-lignes .champ-duree     { width: 4.5rem; text-align: center; }
.tableau-lignes .champ-date      { width: 9.5rem; }
.tableau-lignes td:first-child input { min-width: 11rem; }

.cellule-traitement { white-space: nowrap; font-size: .9rem; }
.traitement-champs[hidden] { display: none; }
.traitement-charge { color: var(--succes); font-weight: 500; }

.bloc-detail {
  background: var(--fond-carte); border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: .85rem 1.25rem; margin-bottom: .75rem;
}
.bloc-detail summary { cursor: pointer; font-size: .95rem; }
.bloc-detail summary::marker { color: var(--texte-discret); }
.bloc-detail .tableau { margin-top: 1rem; border: 0; }

/* --- Justificatifs -------------------------------------------------------- */

.pieces-inline > summary { cursor: pointer; font-size: .88rem; color: var(--texte-discret); }
.pieces-inline[open] > summary { margin-bottom: .5rem; color: var(--texte); }

.pieces-jointes { min-width: 260px; white-space: normal; }

.liste-pieces { list-style: none; margin: 0 0 1rem; padding: 0; font-size: .88rem; }
.liste-pieces a { color: var(--accent); text-decoration: none; }
.liste-pieces a:hover { text-decoration: underline; }
.piece-icone { margin-right: .15rem; font-size: 1.1rem; }

/* UN JUSTIFICATIF SE CONSULTE PLUS SOUVENT QU'IL NE SE DEPOSE. La liste
   n'etait qu'un nom de fichier et une taille : pour savoir de quoi il
   s'agissait, il fallait l'ouvrir dans un autre onglet, donc quitter la
   depense qu'on etait en train de verifier. */
.apercu-piece {
  margin: 0 0 1rem; padding: 0;
  border: 1px solid var(--bord); border-radius: var(--rayon);
  background: var(--fond); overflow: hidden;
}
.apercu-piece img,
.apercu-piece object {
  display: block; width: 100%; border: 0; background: var(--fond-carte);
}
.apercu-piece img { max-height: 30rem; object-fit: contain; }
.apercu-piece object { height: 30rem; }
.apercu-piece figcaption {
  padding: .4rem .7rem; font-size: .8rem; border-top: 1px solid var(--bord);
}

.piece {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  padding: .5rem .6rem; border-radius: var(--rayon);
  border: 1px solid transparent;
}
/* La ligne dont l'apercu est affiche : avec trois justificatifs, un apercu
   sans reperage ne se rattache a rien. */
.piece-affichee { border-color: var(--accent); background: var(--accent-clair); }

.piece-corps { flex: 1 1 16rem; min-width: 0; }
.piece-nom   { display: block; font-weight: 600; overflow-wrap: anywhere; }
.piece-meta  { display: block; font-size: .78rem; }
.piece-actions { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }

/* Un justificatif present se voit depuis la liste des depenses, sans avoir a
   ouvrir la fiche pour savoir s'il y en a un. */
.jeton-piece { text-decoration: none; font-size: 1rem; }

.depot-piece { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.depot-piece input[type="file"] { font-size: .82rem; max-width: 100%; }
.depot-piece select {
  padding: .3rem .4rem; font: inherit; font-size: .85rem;
  color: var(--texte); background: var(--fond);
  border: 1px solid var(--bord); border-radius: 5px;
}
.depot-piece .bouton { margin-top: 0; }

/* Un modèle de message s'édite en monospace : l'alignement des blocs indentés
   doit correspondre à ce que verra le destinataire. */
.champ-modele {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .82rem; line-height: 1.5;
}

.liste-variables { display: grid; gap: .3rem; margin: 0; }
.liste-variables > div { display: flex; gap: .6rem; align-items: baseline; }
.liste-variables dt { min-width: 10.5rem; }
.liste-variables dd { margin: 0; font-size: .88rem; }

/* --- Page d'accueil : aiguillage ------------------------------------------ */

.grille-espaces {
  display: grid; gap: 1rem; margin: 1rem 0 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.carte-espace {
  display: flex; flex-direction: column; gap: .4rem;
  padding: 1.25rem 1.4rem;
  background: var(--fond-carte); border: 1px solid var(--bord);
  border-radius: var(--rayon); text-decoration: none; color: var(--texte);
  transition: border-color .12s, transform .12s;
}
.carte-espace:hover { border-color: var(--accent); transform: translateY(-1px); }
.carte-espace-titre { font-size: 1.1rem; font-weight: 600; }
.carte-espace-resume { color: var(--texte-discret); font-size: .9rem; }
.carte-espace-etat { margin-top: .3rem; display: flex; flex-wrap: wrap; gap: .35rem; }

.liste-urgences { list-style: none; margin: .5rem 0 0; padding: 0; }
.liste-urgences li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem;
  padding: .35rem 0; border-bottom: 1px solid var(--bord);
}
.liste-urgences li:last-child { border-bottom: 0; }
.liste-urgences a { color: var(--texte); text-decoration: none; }
.liste-urgences a:hover { text-decoration: underline; }
.urgence-urgent a { color: var(--erreur); font-weight: 500; }
.urgence-attention a { color: var(--important); }

/* --- Calendrier des ménages ----------------------------------------------- */

.calendrier-mois {
  width: 100%; border-collapse: separate; border-spacing: 3px;
  table-layout: fixed;
}
.calendrier-mois th {
  padding: .3rem; font-size: .75rem; text-transform: uppercase;
  letter-spacing: .03em; color: var(--texte-discret); text-align: center;
}
.case-jour {
  vertical-align: top; height: 5.5rem; padding: .3rem;
  background: var(--fond-carte); border: 1px solid var(--bord);
  border-radius: 6px;
}
.case-vide { background: transparent; border: 0; }
.case-aujourdhui { outline: 2px solid var(--accent); outline-offset: -2px; }
.numero-jour { display: block; font-size: .78rem; color: var(--texte-discret); margin-bottom: .2rem; }

.vignette {
  display: flex; justify-content: space-between; align-items: center; gap: .3rem;
  padding: .15rem .35rem; margin-bottom: .2rem;
  border-radius: 4px; font-size: .74rem; text-decoration: none;
  overflow: hidden; white-space: nowrap;
}
.vignette-type { opacity: .7; font-weight: 700; }
.vignette-serre       { background: var(--erreur-fond); color: var(--erreur); font-weight: 600; }
.vignette-a-pourvoir  { background: var(--important-fond); color: var(--important); }
.vignette-planifie    { background: var(--accent-clair); color: var(--accent); }
.vignette-fait        { background: var(--succes-fond); color: var(--succes); }
.vignette-annule      { background: var(--fond); color: var(--texte-discret); text-decoration: line-through; }

@media (max-width: 700px) {
  /* Une grille de sept colonnes est illisible sur téléphone : elle défile. */
  .calendrier-mois { min-width: 640px; }
  .cadre-calendrier { overflow-x: auto; }
}

/* --- Calendrier d'occupation ---------------------------------------------- */

.calendriers { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 1rem 0 .75rem; }

.calendrier {
  border-collapse: separate; border-spacing: 2px;
  background: var(--fond-carte); border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: .75rem 1rem 1rem;
}
.calendrier caption {
  padding-bottom: .5rem; font-weight: 600; text-align: left;
  text-transform: capitalize;
}
.calendrier th {
  width: 2.1rem; padding: .2rem 0; text-align: center;
  font-size: .72rem; font-weight: 600; color: var(--texte-discret);
}
.calendrier td {
  width: 2.1rem; height: 2.1rem; padding: 0; text-align: center;
  font-size: .82rem; border-radius: 5px;
  font-variant-numeric: tabular-nums;
}
.jour-vide { visibility: hidden; }
.jour { background: var(--fond); color: var(--texte-discret); }
.jour-loue   { background: var(--accent); color: #fff; font-weight: 600; }
.jour-bloque { background: var(--bord); color: var(--texte-discret); }

/* Le jour d'arrivée et le jour de départ ne sont pas des nuits pleines : un
   coin biseauté le montre sans avoir à lire une légende. */
.jour-arrivee { border-top-left-radius: 50%; border-bottom-left-radius: 50%; }
.jour-depart  { border-top-right-radius: 50%; border-bottom-right-radius: 50%; }

/* Départ ET arrivée le même jour : c'est le cas qui coûte cher, il doit sauter
   aux yeux même au milieu d'un mois chargé. */
.jour-serre {
  background: var(--important); color: #fff; font-weight: 700;
  border-radius: 5px;
}
.jour-aujourdhui { outline: 2px solid var(--erreur); outline-offset: -2px; }

.saut-mois { display: flex; align-items: center; gap: .4rem; margin-left: auto; }
.saut-mois label { font-size: .85rem; color: var(--texte-discret); }
.saut-mois input {
  padding: .25rem .4rem; font: inherit; font-size: .85rem;
  color: var(--texte); background: var(--fond);
  border: 1px solid var(--bord); border-radius: 5px;
}
.saut-mois .bouton { margin-top: 0; padding: .25rem .6rem; }

.legende { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem;
           font-size: .85rem; color: var(--texte-discret); margin-bottom: 1.75rem; }
.pastille { display: inline-block; width: 1rem; height: 1rem; border-radius: 4px;
            vertical-align: -.2rem; margin-right: .2rem; }

/* Aperçu d'un message sortant : monospace pour que l'alignement du modèle
   corresponde à ce que verra vraiment le destinataire. */
.apercu-message {
  margin: 0; padding: .9rem 1rem;
  background: var(--fond); border: 1px solid var(--bord); border-radius: var(--rayon);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78rem; line-height: 1.5; white-space: pre-wrap;
  color: var(--texte-discret); overflow-x: auto;
}

/* --- Alertes du tableau de bord ------------------------------------------- */

/* La couleur porte l'urgence : rouge on a rate quelque chose, ambre il reste
   du temps mais pas indefiniment, neutre tout va bien. */
.encart-alerte    { border-left: 4px solid var(--erreur); }
.encart-attention { border-left: 4px solid var(--important); }
.encart-calme     { border-left: 4px solid var(--succes); }

.encart-alerte h2, .encart-attention h2 { display: flex; align-items: baseline; gap: .5rem; }
.encart-alerte h2 { color: var(--erreur); }
.encart-attention h2 { color: var(--important); }
.encart-calme h2 { color: var(--succes); }

.encart .tableau { border: 0; background: transparent; margin-top: .75rem; }
.colonne-date { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* --- Etats et filtres ----------------------------------------------------- */

.badge {
  display: inline-block; padding: .1rem .5rem; border-radius: 999px;
  font-size: .8rem; white-space: nowrap;
}
.badge-a_venir   { background: var(--accent-clair); color: var(--accent); }
.badge-payee     { background: var(--succes-fond); color: var(--succes); }
.badge-en_retard { background: var(--erreur-fond); color: var(--erreur); }
.badge-annulee   { background: var(--fond); color: var(--texte-discret); }

.filtres {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin: 0 0 1.25rem; font-size: .9rem;
}
.filtres a {
  padding: .15rem .55rem; border-radius: 999px;
  color: var(--texte-discret); text-decoration: none;
  border: 1px solid transparent;
}
.filtres a:hover { border-color: var(--bord); }
.filtres .filtre-actif { background: var(--accent); color: #fff; }
.filtres .export { margin-left: auto; color: var(--accent); text-decoration: underline; }

/* Sur telephone, le tableau deborde plutot que de compresser les colonnes. */
@media (max-width: 700px) {
  .contenu { padding: 1.25rem 1rem 3rem; }
  .tableau { display: block; overflow-x: auto; white-space: nowrap; }

  .entete { padding: .7rem 1rem; gap: .5rem; }
  .navigation { width: 100%; order: 3; }
  .identite { margin-left: auto; order: 2; }

  /* Sur téléphone le panneau occupe toute la largeur : un menu flottant de
     210 px déborderait de l'écran. */
  .menu-panneau { position: static; min-width: 0; width: 100%; box-shadow: none; }
}

/* ---------------------------------------------------------------------------
   Calendrier de ciblage : douze mois, un prix par nuit.

   Une grille de sept colonnes par mois, et les mois eux-memes dans une grille
   qui se replie. Sur un ecran large on voit l'annee d'un coup d'oeil -- c'est
   tout l'interet : reperer que juillet est plein et septembre vide se fait a
   la seconde, alors qu'un tableau demandait de lire ligne a ligne.

   Aucun JavaScript : les explications passent par l'attribut title. Le survol
   n'existe pas sur telephone, mais l'information essentielle -- l'etat et le
   prix -- est dans la case elle-meme.
   --------------------------------------------------------------------------- */

.grille-mois {
  display: grid; gap: 1.25rem; margin: 1rem 0 1.5rem;
  /* auto-fit et non auto-fill : avec trois mois visibles, les colonnes se
     partagent toute la largeur au lieu de laisser des vides a droite. */
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.bloc-mois h3 {
  margin: 0 0 .4rem; font-size: .95rem; font-weight: 600;
  text-transform: capitalize;
}

.bloc-mois-jours { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }

.bloc-mois-entete {
  text-align: center; font-size: .7rem; color: var(--texte-discret);
  padding-bottom: .2rem;
}

.nuit {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  aspect-ratio: 1; border-radius: 3px; line-height: 1.1;
  border: 1px solid transparent;
}
.nuit-hors { background: none; }

.nuit-numero { font-size: .62rem; color: var(--texte-discret); }
/* Masque tant que la couche « prix » n est pas allumee : sur le calendrier
   des reservations il noierait l etat des nuits. */
.nuit-prix   { display: none; font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.couche-prix .nuit-prix { display: block; }
.nuit-occupe { font-size: .7rem; opacity: .55; font-weight: 400; }

/* Les teintes du calendrier suivent le theme du navigateur, comme le reste de
   la feuille : des couleurs figees en clair deviendraient illisibles sur fond
   sombre, et c'est precisement l'ecran qu'on regarde le plus longtemps. */
:root {
  --cal-forte-fond: #fde9c8;  --cal-forte-texte: #6b4a12;
  --cal-loue-fond:  #d8e6d4;  --cal-loue-texte:  #3a5c33;
  --cal-bloque-fond:#e4e4e4;  --cal-bloque-texte:#6a6a6a;
  --cal-pont: #d98c1f;
}

@media (prefers-color-scheme: dark) {
  :root {
    --cal-forte-fond: #4a3a18;  --cal-forte-texte: #f0d49a;
    --cal-loue-fond:  #294029;  --cal-loue-texte:  #a8ccA8;
    --cal-bloque-fond:#333330;  --cal-bloque-texte:#8f8f8a;
    --cal-pont: #c9a057;
  }
}

/* Libre : fond neutre. C'est l'etat par defaut, il ne doit pas crier. */
.nuit-libre { background: var(--fond-carte); color: var(--texte); }

/* Tension forte : la nuit vaut cher, on la repere sans avoir a lire le prix.

   ELLE SUIT LA COUCHE « FORTE DEMANDE », comme le liseré des ponts. Peinte en
   permanence alors que la legende ne la mentionnait que si cette couche etait
   allumee, elle produisait une couleur sans explication -- un vendredi et un
   samedi de septembre beiges au milieu d'un calendrier de reservations, sans
   rien dans la legende pour les nommer. Une couleur qu'on ne peut pas lire
   apprend a se mefier de toutes les autres. */
.couche-ponts .nuit-forte { background: var(--cal-forte-fond); color: var(--cal-forte-texte); }

/* Pont ou ferie : un liset, pour que l'occasion se voie meme si elle est
   deja vendue -- c'est justement l'information utile l'annee suivante. */
.nuit-pont { border-color: var(--bord); }
.couche-ponts .nuit-pont { border-color: var(--cal-pont); }

/* Occupe : volontairement eteint. Ces nuits ne demandent aucune decision. */
.nuit-reservation { background: var(--cal-loue-fond); color: var(--cal-loue-texte); }
.nuit-blocage,
.nuit-personnel,
.nuit-autre { background: var(--cal-bloque-fond); color: var(--cal-bloque-texte); }

/* Legende du ciblage : classe PROPRE, et pastilles portees en descendant.
   Redefinir `.legende` et `.pastille` tels quels ecrasait la legende du
   calendrier des locations, qui les employait deja -- voir la note sur les
   collisions de classes dans CLAUDE.md. */
.legende-nuits { display: flex; flex-wrap: wrap; gap: .35rem 1rem; align-items: center;
                 font-size: .8rem; color: var(--texte-discret); margin: .5rem 0 0; }
.legende-nuits .pastille { width: .8rem; height: .8rem; border-radius: 3px;
                           vertical-align: -1px; margin-right: .25rem;
                           border: 1px solid transparent; }
.legende-nuits .pastille-libre       { background: var(--fond-carte); border-color: var(--bord); }
.legende-nuits .pastille-reservation { background: var(--cal-loue-fond); }
.legende-nuits .pastille-blocage     { background: var(--cal-bloque-fond); }
.legende-nuits .pastille-forte       { background: var(--cal-forte-fond); }
/* Le pont se marque par un LISERE sur la case, pas par un fond : la pastille
   de legende doit donc montrer un contour epais et un centre vide, sinon on
   cherche sur la grille un aplat orange qui n'existe nulle part. */
.legende-nuits .pastille-pont        { background: var(--fond-carte);
                                       border-color: var(--cal-pont); border-width: 2px; }

@media (max-width: 700px) {
  /* Deux mois de front au minimum : douze colonnes d'un mois chacune seraient
     illisibles, un seul mois par ecran obligerait a douze defilements. */
  .grille-mois { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
  .nuit-prix { font-size: .68rem; }
}

/* Barre du ciblage : le choix du bien a gauche, l'acces au calibrage a droite.
   Le lien doit etre PERMANENT : il n'apparaissait que dans les messages
   d'alerte, donc plus du tout des que tout etait correctement regle -- on ne
   pouvait plus rien ajuster. */
.barre-ciblage {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
  margin: 0 0 1.25rem;
}
.lien-reglages { margin-left: auto; font-size: .88rem; color: var(--accent); }

/* Trois mois a la fois, et des fleches. Douze grilles d'un coup formaient un
   mur : on ne savait plus ou regarder, et la page devenait interminable sur
   telephone. */
.navigation-mois {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin: 0 0 .25rem; font-size: .92rem;
}
.navigation-mois a { color: var(--accent); text-decoration: none; white-space: nowrap; }
.navigation-mois a:hover { text-decoration: underline; }
.navigation-mois-courant { font-weight: 600; text-align: center; flex: 1; }

/* Consigne posee sur une nuit : un fond hachure discret. Le prix affiche est
   alors celui QUI A ETE DECIDE, pas la suggestion -- montrer la suggestion
   alors qu'un tarif est arrete ferait douter de ce qui est en ligne. */
.nuit-consigne {
  outline: 2px solid var(--accent); outline-offset: -2px;
}

.formulaire-consigne { display: flex; gap: .35rem; align-items: center; }
.formulaire-consigne select {
  padding: .25rem .4rem; font: inherit; font-size: .82rem;
  color: var(--texte); background: var(--fond);
  border: 1px solid var(--bord); border-radius: 5px;
}
.formulaire-consigne .bouton { margin-top: 0; }

.actions-consigne { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }

.navigation-mois button[disabled] { opacity: .4; cursor: default; }
.legende-nuits .pastille-consigne { background: var(--fond-carte); outline: 2px solid var(--accent);
                     outline-offset: -2px; border-color: transparent; }

/* Le tableau des ponts couvre un an : une quinzaine d'occasions, soit assez
   pour repousser le calendrier hors de l'ecran. On le fait defiler sur place,
   en gardant l'en-tete visible -- sans quoi on ne sait plus quelle colonne on
   lit apres trois lignes. */
.tableau-defilant {
  /* Sur un grand ecran 24rem laissent voir six a sept occasions ; sur un
     portable, 60 vh evitent que le tableau ne prenne toute la hauteur. */
  max-height: min(24rem, 60vh); overflow-y: auto;
  border: 1px solid var(--bord); border-radius: var(--rayon);
}
.tableau-defilant .tableau { margin: 0; }
.tableau-defilant thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--fond-carte);
  box-shadow: inset 0 -1px 0 var(--bord);
}

/* Les vacances scolaires du mois, sous sa grille. Elles ne se voient pas sur
   les cases -- leur poids est faible, le releve montrant que la Toussaint ne
   change rien au Treport -- mais « faible » et « absent » doivent pouvoir se
   distinguer autrement qu'en me croyant sur parole. */
.bloc-mois-vacances {
  margin: .35rem 0 0; font-size: .72rem; line-height: 1.35;
  color: var(--texte-discret);
  display: flex; flex-direction: column; gap: .1rem;
}

/* Un mois masque par la navigation doit disparaitre meme si la regle de base
   de son bloc venait a redefinir `display` : sans cela la pagination n'aurait
   aucun effet visible, et la panne serait silencieuse. */
.calendriers > [hidden],
.grille-mois > [hidden] { display: none; }

/* Fil des SMS recus. Ils viennent de l'exterieur : ils s'affichent donc
   autrement que ce qu'on a ecrit, comme une bulle recue dans une messagerie.
   Melanger les deux dans le meme habillage ferait perdre le sens de la
   conversation. */
.fil-sms { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.5rem; }

.sms-recu {
  max-width: 34rem; padding: .6rem .85rem;
  background: var(--accent-clair); border-radius: var(--rayon);
  border-left: 3px solid var(--accent);
}
.sms-texte { margin: 0; white-space: pre-wrap; }
.sms-meta  { margin: .3rem 0 0; font-size: .78rem; color: var(--texte-discret); }

/* Le fil de conversation : recu a gauche, envoye a droite et decale. Sans ce
   decalage, une suite de bulles identiques ne se lit plus comme un echange. */
.sms-envoye {
  max-width: 34rem; margin-left: auto; padding: .6rem .85rem;
  background: var(--fond-carte); border: 1px solid var(--bord);
  border-radius: var(--rayon); border-right: 3px solid var(--texte-discret);
}
.reponse-sms { max-width: 40rem; margin-bottom: 1.75rem; }
.reponse-sms textarea {
  padding: .6rem .7rem; font: inherit; color: var(--texte);
  background: var(--fond); border: 1px solid var(--bord); border-radius: var(--rayon);
}
.apercu-sms { background: var(--accent-clair); }

/* ====================================================================
   FRISE DU SEJOUR
   ====================================================================

   Un sejour est une chronologie. La frise la rend litterale : une colonne
   de dates a gauche, un filet vertical, et ce qui s'est passe a droite.

   Classes prefixees `frise-` : la feuille est unique et sans build, et un
   nom generique repris ici casserait un autre ecran en silence -- c'est
   deja arrive avec .jour et .calendriers. */

.frise { list-style: none; margin: 0 0 2rem; padding: 0; }

/* La colonne de dates sort du filet : l'oeil descend les dates sans
   traverser le texte. En dessous de 40rem elle repasse au-dessus, le
   decalage n'y tenant plus. */
.frise-etape {
  position: relative;
  border-left: 2px solid var(--bord);
  margin-left: 8.75rem;
  padding: .75rem 0 .9rem 1.25rem;
}

.frise-quand {
  position: absolute; left: -10rem; width: 7.5rem;
  text-align: right; font-size: .82rem; color: var(--texte-discret);
  font-variant-numeric: tabular-nums;
}

/* La pastille sur le filet. Sa couleur porte l'etat : c'est ce qu'on lit
   en parcourant la frise du regard, sans rien deplier. */
.frise-etape::before {
  content: ''; position: absolute; left: -.44rem; top: 1.05rem;
  width: .7rem; height: .7rem; border-radius: 50%;
  background: var(--fond); border: 2px solid var(--bord);
}
.frise-etat-a_faire::before { background: var(--important); border-color: var(--important); }
.frise-etat-fait::before    { background: var(--accent);    border-color: var(--accent); }

/* Le contenu de l etape. Borne en largeur : une ligne de texte qui court
   sur tout l ecran se relit mal, et la frise se lit en diagonale. */
.frise-quoi { max-width: 52rem; }

.frise-titre { margin: 0 0 .2rem; }
.frise-etat-futur .frise-titre strong,
.frise-etat-futur .frise-quand { opacity: .6; }

/* Ce qui reclame une action se voit sans etre crie : un fond, pas un cadre
   rouge. Une fiche en compte souvent deux ou trois, et trois encadres
   rouges ne hierarchisent plus rien. */
.frise-etat-a_faire {
  background: var(--important-fond);
  border-radius: var(--rayon);
  padding-right: .75rem;
}

/* Les messages de la conversation. Recu et envoye ne s'habillent pas
   pareil, sans quoi l'echange ne se lit plus comme un echange. */
.frise-message {
  margin: .35rem 0 0; padding: .55rem .8rem; max-width: 34rem;
  white-space: pre-wrap; border-radius: var(--rayon);
}
.frise-message-recu {
  background: var(--accent-clair); border-left: 3px solid var(--accent);
}
.frise-message-envoye {
  background: var(--fond-carte); border: 1px solid var(--bord);
  border-right: 3px solid var(--texte-discret);
}

@media (max-width: 40rem) {
  .frise-etape { margin-left: 0; padding-top: 1.6rem; }
  .frise-quand { position: static; width: auto; text-align: left; display: block; }
}

/* L'identite du voyageur tient sur une ligne : on la consulte du coin de
   l'oeil en ecrivant, elle n'a pas besoin d'un tableau de six lignes. */
.sejour-identite { margin: -.5rem 0 1.5rem; color: var(--texte-discret); }

.liste-attente { margin: .4rem 0 0; padding-left: 1.2rem; }
.liste-attente li { margin-bottom: .25rem; }

/* Affecter un prestataire depuis la frise, sans changer de page. */
.formulaire-en-ligne {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  margin: .5rem 0 .75rem;
}
.formulaire-en-ligne select {
  padding: .35rem .5rem; font: inherit; color: var(--texte);
  background: var(--fond); border: 1px solid var(--bord); border-radius: var(--rayon);
}

/* Etiquette lue par les lecteurs d'ecran, invisible autrement : les selects
   de la frise se comprennent par leur contexte, pas par un mot au-dessus. */
.sr-seulement {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ====================================================================
   FILE D'ATTENTE — l'ecran « Aujourd'hui »
   ====================================================================

   Chaque ligne est une action, dans l'ordre ou elle se perime. Le retard
   se marque par un filet a gauche plutot que par un fond : la file en
   compte parfois plusieurs, et autant de pavés colores ne hierarchisent
   plus rien -- c'est la meme raison qui vaut pour la frise. */

.file-attente { list-style: none; margin: 0 0 1.5rem; padding: 0; }

.file-ligne {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 1rem;
  align-items: baseline;
  padding: .55rem .75rem;
  border-left: 3px solid var(--bord);
  border-bottom: 1px solid var(--bord);
}
.file-ligne:last-child { border-bottom: 0; }

.file-retard     { border-left-color: var(--erreur);  background: var(--erreur-fond); }
.file-aujourdhui { border-left-color: var(--important); }
.file-avenir     { border-left-color: var(--bord); }

.file-quand {
  font-size: .82rem; color: var(--texte-discret);
  font-variant-numeric: tabular-nums;
}
.file-quoi a { font-weight: 600; }

@media (max-width: 40rem) {
  .file-ligne { grid-template-columns: 1fr; gap: .2rem; }
}

/* ====================================================================
   COUCHES DU CALENDRIER
   ====================================================================

   Une seule grille, et ce qu'on veut voir dessus. Les decorations sont
   masquees par defaut et revelees par une classe posee sur le conteneur :
   commuter une couche ne redessine rien et ne perd pas le mois qu'on
   regardait. */

.couches { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 1rem 0 .5rem; }
.couches-titre { font-size: .85rem; color: var(--texte-discret); margin-right: .2rem; }

.couche {
  font: inherit; font-size: .82rem; cursor: pointer;
  padding: .22rem .6rem; border-radius: 999px;
  border: 1px solid var(--bord); background: var(--fond-carte); color: var(--texte-discret);
}
.couche:hover { border-color: var(--texte-discret); }
.couche-active {
  border-color: var(--accent); background: var(--accent-clair);
  color: var(--accent); font-weight: 600;
}

/* Un menage se marque par un filet EN BAS DE CASE, pas par un fond : le fond
   porte deja l'etat de la nuit, et deux informations sur le meme canal
   s'annulent. */
.nuit-menage { position: relative; }
.couche-menages .nuit-menage::after {
  content: ''; position: absolute; left: 12%; right: 12%; bottom: 2px;
  height: 3px; border-radius: 2px; background: var(--important);
}
/* Un enchainement serre est le seul rendez-vous qu'on ne peut pas decaler. */
.couche-menages .nuit-serre::after { background: var(--erreur); }

.nuit-aujourdhui { outline: 2px solid var(--accent); outline-offset: -2px; }

.pastille-menage { background: var(--important); }

/* Barre de saisonnalite dans les statistiques. Douze nombres alignes ne
   montrent pas la saison ; une barre la donne d'un coup d'oeil. */
.barre-mois {
  display: inline-block; vertical-align: middle;
  width: 9rem; height: .55rem; margin-right: .5rem;
  background: var(--bord); border-radius: 3px; overflow: hidden;
}
.barre-mois-remplie { display: block; height: 100%; background: var(--accent); }
.barre-mois-valeur { font-variant-numeric: tabular-nums; }

/* La ligne de l'annee detaillee, dans le tableau annuel. */
.ligne-active { background: var(--accent-clair); }

/* Le retour de menage, une fois enregistre : ce que le prestataire a
   rapporte. Encadre en vert quand tout va bien, l'anomalie parlant
   d'elle-meme dans le texte. */
.retour-menage {
  margin: .6rem 0; padding: .6rem .8rem;
  border-radius: var(--rayon); border: 1px solid var(--bord);
  background: var(--fond); font-size: .9rem;
}
.retour-menage p { margin: 0 0 .3rem; }
.retour-menage p:last-child { margin-bottom: 0; }
.retour-fait { border-left: 3px solid var(--accent); }

/* Une erreur se distingue d'une ligne de cron dans une liste ou les deux
   se suivent. */
.entree-erreur > summary { color: var(--erreur); }

/* La facture deposee reste sous les yeux pendant la saisie : c'est en la
   regardant qu'on verifie ce qui a ete pre-rempli. */
.rail-document { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 52rem) { .rail-document { grid-template-columns: 1.2fr 1fr; } }

/* Envoyer un document a un tiers n'est pas anodin : le dire se voit, sans
   pour autant crier -- ce n'est pas une erreur, c'est une decision. */
.note-sortie {
  border-left: 3px solid var(--important); padding: .6rem 0 .6rem 1rem;
  color: var(--texte-discret); font-size: .9rem; max-width: 60rem;
}