/* ==========================================================================
   B18 V2 — États de la couche de données et cartes de dossier (story S1.4)

   Aucune couleur littérale : tout passe par les jetons.
   Seuil mobile unique à 820 px (--seuil-mobile).
   ========================================================================== */

.compte {
  color: var(--encre2);
  font-size: var(--t-appui);
  margin-bottom: var(--e-4);
}

/* --------------------------------------------------------------------------
   Les quatre états
   -------------------------------------------------------------------------- */

.etat-chargement {
  padding: var(--e-5);
  border: 1px solid var(--trait);
  border-radius: var(--r-m);
  background: var(--surface);
  color: var(--encre2);
  font-size: var(--t-appui);
}

.etat-erreur {
  padding: var(--e-5);
  border: 1px solid var(--lave);
  border-left-width: 3px;
  border-radius: var(--r-m);
  background: var(--lave-f);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-3);
}

.etat-erreur .etat-titre {
  font-weight: var(--graisse-appui);
  color: var(--lave);
}

.etat-erreur p {
  color: var(--encre);
  font-size: var(--t-appui);
}

/* --------------------------------------------------------------------------
   Cartes de dossier

   Vues aérées : des cartes individuelles côte à côte, jamais un grand bloc
   pleine largeur qui empile tout.
   -------------------------------------------------------------------------- */

.grille-dossiers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--e-3);
  /* Chaque carte prend la hauteur de son contenu. Par défaut la grille les
     étire à la hauteur de la plus grande de la rangée : un dossier sans
     alerte se retrouvait avec un grand vide sous sa case à cocher, à côté
     d'un dossier qui en portait deux. */
  align-items: start;
}

/* `.carte-dossier` ne redéfinit plus le fond, la bordure, le rayon ni l'ombre :
   elle vient avec `.carte`, de la bibliothèque de composants. Ce qui reste ici
   est ce qui est PROPRE au dossier — sa mise en colonne et son espacement.
   La version précédente recopiait les cinq propriétés de `.carte` et avait
   déjà dérivé : elle ne portait pas le filet de couleur d'événement. */
.carte-dossier {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}

.carte-haut h3 {
  font-size: var(--t-titre-s);
  margin-bottom: var(--e-1);
}

.carte-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1) var(--e-3);
  color: var(--encre2);
  font-size: var(--t-appui);
}

/* Le tarif porte sa nature. Un tarif inconnu ne se déguise pas en montant :
   il change de couleur et de mot (CLAUDE.md §4). */
.carte-tarif {
  font-size: var(--t-appui);
  font-weight: var(--graisse-appui);
}

.carte-tarif[data-nature="connu"] {
  color: var(--encre);
}

.carte-tarif[data-nature="attente"] {
  color: var(--encre3);
  font-weight: var(--graisse-normale);
  font-style: italic;
}

/* Indisponible et à-définir sont deux choses différentes : la première est une
   panne, la seconde un travail à faire dans Axonaut. Elles ne portent donc pas
   la même couleur, et surtout pas le rouge — ce n'est pas un problème du jour
   J, c'est une donnée absente. */
.carte-tarif[data-nature="indisponible"],
.carte-tarif[data-nature="a-definir"] {
  color: var(--ambre);
}

/* --------------------------------------------------------------------------
   Alertes de donnée manquante

   Barre latérale en couleur pleine et étiquette de la même teinte : un fond
   pastel seul ne se distingue plus assez du reste (B18_REGLES_AFFICHAGE.md §1).
   L'ambre, pas le rouge : une donnée absente n'est pas un problème du jour J.
   -------------------------------------------------------------------------- */

.alerte {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e-2);
  padding: var(--e-2) var(--e-3);
  border-left: 3px solid var(--ambre);
  border-radius: var(--r-s);
  background: var(--ambre-f);
  font-size: var(--t-petit);
}

/* Étiquette en couleur pleine, jamais en transparence : sur un fond déjà
   teinté, un aplat semi-transparent donne un contraste imprévisible d'un
   écran à l'autre. */
.alerte-etiquette {
  padding: 2px var(--e-2);
  border-radius: var(--r-p);
  background: var(--ambre);
  color: var(--sur-ambre);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: var(--graisse-forte);
  white-space: nowrap;
}

.alerte-texte {
  color: var(--encre);
  flex: 1;
  min-width: 12ch;
}

/* --------------------------------------------------------------------------
   Case à cocher — écriture optimiste

   La ligne entière est cliquable, pas seulement la case : une case de 16 px
   n'est pas une cible atteignable debout, à une main, pendant que les
   familles arrivent (B18_REGLES_AFFICHAGE.md §2 et §4).
   -------------------------------------------------------------------------- */

.case {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: var(--cible);
  padding: 0 var(--e-2);
  margin: 0 calc(var(--e-2) * -1);
  border-radius: var(--r-s);
  font-size: var(--t-appui);
  color: var(--encre);
  cursor: pointer;
}

.case:hover {
  background: var(--surface2);
}

.case input {
  width: 20px;
  height: 20px;
  flex: none;
  accent-color: var(--teal);
  cursor: pointer;
}

.case:focus-within {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Seuil mobile : 820 px (--seuil-mobile)
   Sur téléphone, la grille devient une LISTE — jamais une petite grille.
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
  .grille-dossiers {
    grid-template-columns: 1fr;
  }

  .alerte {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Le niveau d'accès, sur l'écran Compte. Il reprend le style du pied de barre
   latérale mais sans son retrait horizontal : là-bas il s'aligne sur les
   libellés du menu, ici il n'y a pas de menu à suivre. */
.carte .identite-niveau {
  padding: var(--e-1) 0 0;
}

/* Actions de l'écran Compte. */
.compte-actions {
  margin-top: var(--e-4);
}

/* L'identité s'efface de la barre latérale quand l'écran Compte est ouvert.
 *
 * Deux corrections en une, relevées par la relecture d'architecture.
 *
 * D'abord une règle morte : la version précédente masquait
 * `.onglets [data-vue="compte"]` au-dessus de 820 px. Elle ne s'appliquait
 * jamais — `.onglets` est déjà `display: none` sur bureau, et pour admin et
 * responsable l'entrée Compte n'est pas dans la barre d'onglets mais dans le
 * panneau « Plus ». Elle employait de surcroît la forme même qu'on a déclarée
 * bannie : masquer une entrée de navigation en CSS.
 *
 * Ensuite le vrai problème qu'elle croyait traiter. L'écran Compte reste
 * atteignable par l'adresse `#compte` sur bureau, où il affiche prénom, niveau
 * et déconnexion — exactement ce que porte déjà le pied de la barre latérale.
 * La règle « une information n'apparaît qu'une fois par écran » était tenue
 * par ce qui est PROPOSÉ, pas par ce qui est RENDU.
 *
 * On efface donc le pied de la barre latérale tant que cet écran est ouvert :
 * l'information reste accessible, elle n'est simplement plus doublée. */
.coquille[data-ecran-courant="compte"] .identite {
  display: none;
}

/* ==================================================================== *
 * Tableau de bord — fiche 1
 *
 * Vues aérées : des cartes individuelles côte à côte, jamais un grand bloc
 * pleine largeur qui empile tout. Seuil mobile unique à 820 px : la grille
 * devient une liste, jamais une petite grille.
 * ==================================================================== */

/* LES QUATRE TUILES DE CHIFFRE DU TABLEAU DE BORD.
 *
 * ELLES S'APPELAIENT `.pastille`, ET C'ÉTAIT UNE COLLISION DE NOMS.
 *
 * `composants.css` définit déjà une `.pastille` : la petite puce de statut,
 * avec son repère de forme en `::before` et `white-space: nowrap`. Deux
 * composants n'ont pas le droit de partager un nom de classe, et le prix s'est
 * payé sur trois défauts constatés par Stéphanie le 31/08 :
 *
 *   1. un carré noir apparaissait dans chaque tuile — le `::before` de la puce
 *      de statut, hérité sans qu'on l'ait demandé ;
 *   2. `white-space: nowrap` empêchait les libellés de revenir à la ligne : à
 *      375 px, la tuile ne pouvait plus rétrécir et LA PAGE DÉBORDAIT DE
 *      166 PIXELS ;
 *   3. « la barre du bas ne reste pas fixe » — même cause. Une page plus large
 *      que la fenêtre fait dézoomer le navigateur mobile ; la fenêtre de mise
 *      en page devient plus haute que l'écran, et la barre `position: fixed`,
 *      qui s'accroche à son bas, passe sous la zone visible. Mesuré : haut à
 *      1117 px sur le tableau de bord contre 746 px sur tous les autres
 *      écrans.
 *
 * Un seul renommage règle les trois. Le nom vient du catalogue de blocs, qui
 * appelle ce composant une « tuile de chiffre » (§7).
 * ==================================================================== */

.tuiles{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e-3);
  margin-bottom:var(--e-5)}
@media (max-width:1100px){.tuiles{grid-template-columns:repeat(2,1fr)}}

.tuile{display:flex;align-items:center;gap:var(--e-3);width:100%;text-align:left;
  background:var(--surface);border:1px solid var(--trait);border-left-width:4px;
  border-radius:var(--r-m);padding:var(--e-3) var(--e-4);min-height:var(--cible);
  box-shadow:var(--ombre-basse);font:inherit;color:inherit;
  /* La tuile doit pouvoir rétrécir : sans ça, deux tuiles côte à côte à 375 px
     poussent la page au-delà de la fenêtre. */
  min-width:0}
button.tuile{cursor:pointer}
button.tuile:hover{border-color:var(--lagon);border-left-color:inherit}
.tuile-bleu{border-left-color:var(--lagon)}
.tuile-vert{border-left-color:var(--pousse)}
.tuile-ambre{border-left-color:var(--ambre)}
.tuile-teal{border-left-color:var(--teal)}
.tuile-icone{display:grid;place-items:center;width:38px;height:38px;flex:none;
  border-radius:var(--r-s);background:var(--surface2);color:var(--encre2)}
.tuile-icone svg{width:20px;height:20px}
.tuile-corps{flex:1;min-width:0}
.tuile-nombre{display:block;font-size:var(--t-titre-s);font-weight:var(--graisse-forte);
  line-height:1.1;letter-spacing:-.02em}
.tuile-libelle{display:block;font-size:var(--t-petit);color:var(--encre2)}
.tuile-chevron{color:var(--encre3);flex:none;font-size:var(--t-appui)}

/* Sur un téléphone, deux tuiles par rangée tiennent — mais seulement si le
   libellé peut passer à la ligne et si l'icône cède la place. La fiche 1 le
   demande mot pour mot : « les quatre pastilles deviennent deux lignes de
   deux ». */
@media (max-width:480px){
  .tuiles{gap:var(--e-2)}
  .tuile{padding:var(--e-2) var(--e-3);gap:var(--e-2)}
  .tuile-icone{width:30px;height:30px}
  .tuile-icone svg{width:17px;height:17px}
  /* Le chevron mange huit pixels pour dire ce que le clic dit déjà. */
  .tuile-chevron{display:none}
}

/* Deux cartes côte à côte, empilées sous le seuil mobile. */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-4);
  align-items:start;margin-bottom:var(--e-4)}
@media (max-width:820px){.duo{grid-template-columns:1fr}}

.carte-lead{color:var(--encre2);margin:0 0 var(--e-3);font-size:var(--t-base)}
.carte-lead:last-child{margin-bottom:0}
.carte-attention{border-color:var(--ambre)}
.carte-ok{border-color:var(--pousse)}

.liste-nue{list-style:none;margin:0;padding:0}
.ligne-tache{display:flex;gap:var(--e-3);align-items:baseline;
  padding:var(--e-2) 0;border-bottom:1px solid var(--trait2)}
.ligne-tache:last-child{border-bottom:0}
.ligne-tache-quand{font-size:var(--t-petit);color:var(--encre3);
  font-weight:var(--graisse-appui);flex:none;min-width:9em}
.ligne-tache-quoi{font-size:var(--t-base)}

/* Barre segmentée « Dossiers en cours ». */
.barre-segments{display:flex;height:10px;border-radius:var(--r-p);
  overflow:hidden;background:var(--trait2);margin-bottom:var(--e-3)}
.segment{display:block;height:100%}
.segment-ambre{background:var(--ambre)}
.segment-teal{background:var(--teal)}
.segment-lave{background:var(--lave)}
.barre-legende{display:flex;flex-wrap:wrap;gap:var(--e-3) var(--e-4)}
.legende-item{display:inline-flex;align-items:center;gap:6px;
  font-size:var(--t-petit);color:var(--encre2)}
.legende-item b{color:var(--encre)}
.legende-point{width:9px;height:9px;border-radius:var(--r-p);flex:none}
.legende-point-ambre{background:var(--ambre)}
.legende-point-teal{background:var(--teal)}
.legende-point-lave{background:var(--lave)}

/* Météo — la conclusion, pas seulement la donnée brute. */
.meteo-quand{font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;
  font-weight:var(--graisse-caps);color:var(--encre3);margin:0 0 var(--e-2)}
.meteo-temp{font-size:var(--t-titre);font-weight:var(--graisse-forte);
  line-height:1.1;margin:0 0 2px;letter-spacing:-.02em}
.meteo-libelle{margin:0;color:var(--encre2);font-size:var(--t-base)}
.meteo-vent{margin:2px 0 var(--e-3);color:var(--encre2);font-size:var(--t-petit)}
.meteo-conclusion{margin:0;font-weight:var(--graisse-appui);color:var(--teal);
  font-size:var(--t-base)}
.meteo-conclusion.alerte-douce{color:var(--ambre)}

/* « Aujourd'hui sur le domaine », découpé par créneau. */
.creneau{border:1px solid var(--trait);border-radius:var(--r-m);
  padding:var(--e-3) var(--e-4);margin-bottom:var(--e-3);background:var(--surface2)}
.creneau:last-child{margin-bottom:0}
.creneau-tete{display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--e-3);flex-wrap:wrap;margin-bottom:var(--e-2)}
.creneau-nom{font-weight:var(--graisse-forte);font-size:var(--t-appui)}
.creneau-resp{font-size:var(--t-petit);color:var(--encre2)}
.creneau-ligne{display:flex;gap:var(--e-3);align-items:baseline;
  padding:6px 0;border-bottom:1px solid var(--trait2);flex-wrap:wrap}
.creneau-ligne:last-of-type{border-bottom:0}
.creneau-heure{font-size:var(--t-petit);color:var(--encre3);
  font-weight:var(--graisse-appui);flex:none;min-width:7.5em}
.creneau-nom-ev{flex:1;min-width:0;font-size:var(--t-base)}
.creneau-enfants{font-size:var(--t-petit);color:var(--encre2);flex:none}
.creneau-effectif{margin:var(--e-2) 0 0;font-size:var(--t-petit);color:var(--encre2)}
.creneau-effectif.manque{color:var(--lave);font-weight:var(--graisse-appui)}
.creneau-douteux{border-color:var(--ambre);background:var(--ambre-f)}
.creneau-douteux .creneau-tete{color:var(--ambre);font-weight:var(--graisse-forte)}

/* L'écran vide porte un message rédigé, jamais une page blanche. */
.etat-vide{text-align:center;padding:var(--e-7) var(--e-4);color:var(--encre2)}
.etat-vide h3{margin:0 0 var(--e-2);color:var(--encre);font-size:var(--t-titre-s)}
.etat-vide p{margin:0;max-width:46ch;margin-inline:auto}

/* ==================================================================== *
 * Planning — fiche 2
 * ==================================================================== */

/* ==================================================================== *
 * Stock — fiche 3
 * ==================================================================== */

/* ==================================================================== *
 * Notifications — fiche 5
 * ==================================================================== */
.notifs-liste{display:grid;gap:var(--e-2)}
.notif{display:flex;gap:var(--e-3);align-items:flex-start;width:100%;text-align:left;
  background:var(--surface);border:1px solid var(--trait);border-radius:var(--r-m);
  padding:var(--e-3) var(--e-4);min-height:var(--cible);font:inherit;color:inherit}
button.notif{cursor:pointer}
button.notif:hover{border-color:var(--lagon)}
.notif-etiquette{flex:none;font-size:var(--t-micro);letter-spacing:.06em;
  font-weight:var(--graisse-caps);padding:3px 8px;border-radius:var(--r-s);
  white-space:nowrap;margin-top:1px}
/* PASTILLE PASTEL A TEXTE FONCE, JAMAIS D APLAT A TEXTE BLANC.
   C est la regle standing KAIROZ sur les badges de statut, et c est ce qui
   reglait le probleme : un ambre fonce en aplat plein fait toujours brun,
   quelle que soit sa teinte. Sur fond pastel avec le texte dans la meme
   teinte, il redevient un miel. Constat de Stephanie du 29/08. */
.notif-etiquette{border:1px solid transparent}
.notif-ambre{background:var(--ambre-f);color:var(--ambre);border-color:var(--ambre)}
.notif-teal{background:var(--lagon-f);color:var(--teal);border-color:var(--teal)}
.notif-lave{background:var(--lave-f);color:var(--lave);border-color:var(--lave)}
.notif-corps{flex:1;min-width:0}
.notif-titre{display:block;font-size:var(--t-base);font-weight:var(--graisse-appui)}
.notif-detail{display:block;font-size:var(--t-petit);color:var(--encre2)}
.notif-chevron{flex:none;color:var(--encre3)}

/* ==================================================================== *
 * Référence — fiche 7
 * ==================================================================== */
.pr-phase{border-top:1px solid var(--trait2);padding:var(--e-3) 0}
.pr-phase:first-of-type{border-top:0;padding-top:0}
.pr-phase-tete{margin-bottom:var(--e-2)}
.pr-phase-nom{display:block;font-weight:var(--graisse-forte);font-size:var(--t-base)}
.pr-phase-meta{display:block;font-size:var(--t-petit);color:var(--encre2)}
.pr-action{display:flex;gap:var(--e-2);align-items:flex-start;padding:5px 0}
.pr-action-texte{font-size:var(--t-petit);color:var(--encre2);flex:1;min-width:0}

/* ==================================================================== *
 * Paramètres — fiche 6
 * ==================================================================== */
.pa-compte{display:flex;gap:var(--e-3);align-items:center;padding:var(--e-3) 0;
  border-bottom:1px solid var(--trait2)}
.pa-compte:last-child{border-bottom:0}
.pa-ini{width:36px;height:36px;flex:none;border-radius:var(--r-p);
  background:var(--lagon-f);color:var(--teal);display:grid;place-items:center;
  font-weight:var(--graisse-forte);font-size:var(--t-petit)}
.pa-milieu{flex:1;min-width:0}
.pa-nom{display:block;font-size:var(--t-base)}
.pa-meta{display:block;font-size:var(--t-petit);color:var(--encre2)}
.pa-droite{flex:none;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:820px){
  .pa-compte{flex-wrap:wrap}
  .pa-droite{width:100%;justify-content:flex-start;padding-left:calc(36px + var(--e-3))}
}

/* ==================================================================== *
 * Aide — fiche 8
 * ==================================================================== */
.aide-bloc{border-top:1px solid var(--trait2)}
.aide-bloc:first-of-type{border-top:0}
.aide-question{display:flex;gap:var(--e-3);align-items:center;width:100%;
  text-align:left;background:none;border:0;padding:var(--e-3) 0;cursor:pointer;
  min-height:var(--cible);font:inherit;color:inherit}
.aide-q{flex:1;font-size:var(--t-base);font-weight:var(--graisse-appui)}
.aide-chevron{flex:none;color:var(--teal);font-size:var(--t-appui);
  width:22px;text-align:center}
.aide-reponse{margin:0 0 var(--e-3);color:var(--encre2);font-size:var(--t-base);
  max-width:70ch}

/* ==================================================================== *
 * Qui fait quoi — fiche 11
 * ==================================================================== */
.qfq-titre{font-size:var(--t-titre-s);margin:0 0 var(--e-1)}
.qfq-resume{background:var(--lagon-f);border:1px solid var(--lagon);
  border-radius:var(--r-m);padding:var(--e-3) var(--e-4);
  font-weight:var(--graisse-appui);color:var(--teal);margin-bottom:var(--e-4)}
.qfq-fini{background:var(--teal);border-color:var(--teal);color:var(--sur-teal)}
.qfq-gateaux{display:flex;align-items:center;gap:var(--e-3);flex-wrap:wrap;
  background:var(--ambre-f);border:1px solid var(--ambre);border-radius:var(--r-m);
  padding:var(--e-3) var(--e-4);margin-bottom:var(--e-5);min-height:var(--cible)}
.qfq-gateaux-lbl{font-weight:var(--graisse-appui);color:var(--ambre)}
.qfq-gateaux-sub{font-size:var(--t-petit);color:var(--ambre);flex:1}
.qfq-gateaux-cnt{font-weight:var(--graisse-forte);color:var(--ambre)}
.qfq-groupe{font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;
  font-weight:var(--graisse-caps);color:var(--encre3);margin:var(--e-5) 0 var(--e-2)}
.qfq-ligne{display:flex;align-items:center;gap:var(--e-3);width:100%;text-align:left;
  background:var(--surface);border:1px solid var(--trait);border-radius:var(--r-m);
  padding:var(--e-3) var(--e-4);margin-bottom:var(--e-2);min-height:var(--cible);
  cursor:pointer;font:inherit;color:inherit}
.qfq-ligne:hover{border-color:var(--lagon)}
.qfq-ligne-txt{flex:1;min-width:0}
.qfq-ligne-nom{display:block;font-size:var(--t-base);font-weight:var(--graisse-appui)}
.qfq-ligne-sub{display:block;font-size:var(--t-petit);color:var(--encre2)}
.qfq-qui{flex:none;font-size:var(--t-petit);font-weight:var(--graisse-appui);color:var(--teal)}
.qfq-vide{color:var(--ambre);background:var(--ambre-f);border:1px solid var(--ambre);
  padding:4px 10px;border-radius:var(--r-p)}
.qfq-doffice{color:var(--encre2);font-weight:var(--graisse-normale)}
.qfq-chevron{flex:none;color:var(--encre3)}
.qfq-tache{padding:8px 0;border-bottom:1px solid var(--trait2)}
.qfq-tache:last-child{border-bottom:0}
.qfq-tache-texte{font-size:var(--t-base)}
.qfq-pers{display:flex;align-items:center;gap:var(--e-3);width:100%;text-align:left;
  background:var(--surface2);border:1px solid var(--trait);border-radius:var(--r-m);
  padding:var(--e-3) var(--e-4);margin-bottom:var(--e-2);min-height:var(--cible);
  cursor:pointer;font:inherit;color:inherit}
.qfq-pris{background:var(--lagon-f);border-color:var(--teal)}
.qfq-ini{width:34px;height:34px;flex:none;border-radius:var(--r-p);
  background:var(--lagon-f);color:var(--teal);display:grid;place-items:center;
  font-weight:var(--graisse-forte);font-size:var(--t-petit)}
.qfq-pris .qfq-ini{background:var(--teal);color:var(--sur-teal)}
.qfq-pers-nom{flex:1;font-weight:var(--graisse-appui)}
.qfq-charge{font-size:var(--t-petit);color:var(--encre2)}
.retour{display:inline-flex;align-items:center;gap:5px;background:none;border:0;
  color:var(--teal);font-size:var(--t-base);font-weight:var(--graisse-appui);
  padding:var(--e-2) 0;cursor:pointer;min-height:var(--cible-secondaire)}

/* ==================================================================== *
 * Débrief — fiche 10
 * ==================================================================== */
.db-famille{border:1px solid var(--trait);border-radius:var(--r-m);
  background:var(--surface2);padding:var(--e-3) var(--e-4);margin-bottom:var(--e-3)}
.db-famille:last-child{margin-bottom:0}
.db-famille-tete{display:flex;justify-content:space-between;gap:var(--e-3);
  align-items:baseline;flex-wrap:wrap;margin-bottom:var(--e-2);
  padding-bottom:var(--e-2);border-bottom:1px solid var(--trait2)}
.db-famille-nom{font-weight:var(--graisse-forte)}
.db-famille-heure{font-size:var(--t-petit);color:var(--encre2)}
.db-ligne{display:flex;gap:var(--e-3);align-items:center;flex-wrap:wrap;
  padding:6px 0}
.db-ligne-champ{flex-direction:column;align-items:stretch;gap:4px}
.db-etiquette{font-size:var(--t-petit);color:var(--encre3);min-width:9em}
.db-valeur{font-weight:var(--graisse-appui)}
.db-manquant{color:var(--ambre);font-style:italic;font-weight:var(--graisse-normale)}
.db-corriger{min-height:var(--cible-secondaire);padding:5px 12px;font-size:var(--t-petit)}
.db-champ{width:100%;border:1px solid var(--trait-champ);border-radius:var(--r-s);
  padding:var(--e-2);font-family:inherit;font-size:16px;background:var(--surface);
  color:var(--encre);resize:vertical}
.db-interrupteur{display:flex;align-items:center;gap:var(--e-3);
  padding:var(--e-2) 0;min-height:var(--cible);cursor:pointer;font-size:var(--t-base)}
.db-interrupteur input{width:22px;height:22px;accent-color:var(--teal)}
.db-types{font-size:var(--t-petit);color:var(--encre2);margin:var(--e-3) 0 0}

/* ==================================================================== *
 * Dossiers
 * ==================================================================== */
.do-recherche{margin:var(--e-3) 0 var(--e-4)}
.do-champ{width:100%;max-width:520px;min-height:var(--cible);
  border:1px solid var(--trait-champ);border-radius:var(--r-s);
  padding:0 var(--e-4);font-size:16px;background:var(--surface);color:var(--encre)}
.do-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:var(--e-3)}
.do-carte{display:block;width:100%;text-align:left;background:var(--surface);
  border:1px solid var(--trait);border-left-width:4px;border-radius:var(--r-m);
  padding:var(--e-3) var(--e-4);cursor:pointer;font:inherit;color:inherit;
  box-shadow:var(--ombre-basse)}
.do-carte:hover{border-color:var(--lagon)}
.do-ev1{border-left-color:var(--ev1)}
.do-ev2{border-left-color:var(--ev2)}
.do-ev3{border-left-color:var(--ev3)}
.do-ev4{border-left-color:var(--ev4)}
.do-ev5{border-left-color:var(--ev5)}
.do-haut{display:flex;justify-content:space-between;gap:var(--e-3);
  align-items:baseline;margin-bottom:2px}
.do-nom{font-size:var(--t-appui);font-weight:var(--graisse-forte);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.do-devis{flex:none;font-size:var(--t-petit);color:var(--encre3)}
.do-meta{display:block;font-size:var(--t-petit);color:var(--encre2);
  margin-bottom:var(--e-2)}
.do-etats{display:flex;gap:6px;flex-wrap:wrap}

/* Les modèles de messages, en lecture — repris de la V1 (29/08). */
.msg-etiquette{font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.1em;
  font-weight:var(--graisse-caps);color:var(--encre3);margin-top:var(--e-3)}
.msg-sujet{margin:2px 0 0;font-size:var(--t-base);font-weight:var(--graisse-appui)}
.msg-texte{margin:2px 0 0;padding:var(--e-3);background:var(--surface2);
  border:1px solid var(--trait);border-radius:var(--r-s);font-family:inherit;
  font-size:var(--t-base);line-height:1.55;white-space:pre-wrap;overflow-x:auto}
.msg-ligne{display:flex;gap:var(--e-3);align-items:baseline;flex-wrap:wrap;
  padding:6px 0;border-bottom:1px solid var(--trait2)}
.msg-ligne:last-child{border-bottom:0}
.msg-ligne .msg-etiquette{margin-top:0;min-width:12em}
.msg-valeur{font-size:var(--t-base)}

/* La recherche des dossiers : une loupe tracée, un champ à sa taille (29/08).
   Il prenait toute la largeur pour recevoir trois mots. */
.do-recherche{display:flex;align-items:center;gap:var(--e-2);
  max-width:420px;margin-bottom:var(--e-3);
  border:1px solid var(--trait-champ);border-radius:var(--r-s);
  background:var(--surface);padding:0 var(--e-3)}
.do-recherche:focus-within{border-color:var(--teal);
  outline:2px solid var(--focus);outline-offset:1px}
.do-loupe{width:18px;height:18px;flex:none;color:var(--encre3)}
.do-champ{flex:1;min-width:0;border:0;background:none;outline:none;
  min-height:var(--cible);color:var(--encre);
  /* 16 px : en dessous, Safari iOS zoome au toucher. */
  font-size:16px;font-family:inherit}
.do-champ::-webkit-search-cancel-button{cursor:pointer}
@media (max-width:820px){.do-recherche{max-width:none}}

/* ==========================================================================
   La carte météo — dégradé bleu-blanc, icône du ciel (29/08)

   C'est l'information qui décide de sortir les barnums : elle se regarde
   avant de se lire. Seul endroit de l'application où la couleur décrit la
   chose et non un statut — un soleil gris ne serait pas sobre, il serait faux.
   ========================================================================== */

.carte-meteo{
  background:linear-gradient(160deg, var(--meteo-h) 0%, var(--surface) 70%);
  border-color:var(--meteo-t)}

.meteo-haut{display:flex;align-items:center;gap:var(--e-4)}
.meteo-icone{width:56px;height:56px;flex:none;color:var(--meteo-t)}
.meteo-bloc{min-width:0}

.meteo-quand{margin:0;font-size:var(--t-micro);text-transform:uppercase;
  letter-spacing:.1em;font-weight:var(--graisse-caps);color:var(--encre3)}
.meteo-temp{margin:2px 0 0;font-size:var(--t-titre);
  font-weight:var(--graisse-forte);line-height:1.05;color:var(--encre)}
.meteo-libelle{margin:0;font-size:var(--t-base);color:var(--encre)}
.meteo-vent{margin:0;font-size:var(--t-petit);color:var(--encre2)}
.meteo-conclusion{margin:var(--e-3) 0 0;font-size:var(--t-base);
  font-weight:var(--graisse-appui);color:var(--encre)}

.meteo-windy{display:inline-block;margin-top:var(--e-2);
  font-size:var(--t-petit);color:var(--teal);text-decoration:none;
  border-bottom:1px solid transparent}
.meteo-windy:hover{border-bottom-color:var(--teal)}
.meteo-windy:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* Une teinte par ciel : la teinte de l'icône, et le haut du dégradé. */
.carte-meteo[data-ciel="soleil"]{--meteo-t:#C9962B;--meteo-h:#FDF6E4}
.carte-meteo[data-ciel="eclaircies"]{--meteo-t:#C9962B;--meteo-h:#F4F7FB}
.carte-meteo[data-ciel="couvert"]{--meteo-t:#7A8894;--meteo-h:#EEF2F6}
.carte-meteo[data-ciel="brouillard"]{--meteo-t:#7A8894;--meteo-h:#EEF2F6}
.carte-meteo[data-ciel="pluie"]{--meteo-t:#3E7BB8;--meteo-h:#E7F0FA}
.carte-meteo[data-ciel="orage"]{--meteo-t:#5B5FA8;--meteo-h:#ECEDF8}
.carte-meteo[data-ciel="inconnu"]{--meteo-t:var(--encre3);--meteo-h:var(--surface2)}

/* En sombre, le dégradé se retourne : un aplat clair au milieu d'un écran
   sombre éblouit. Les teintes d'icône s'éclaircissent pour tenir le contraste. */
:root[data-theme="sombre"] .carte-meteo[data-ciel="soleil"]{--meteo-t:#E8C46A;--meteo-h:#2A2515}
:root[data-theme="sombre"] .carte-meteo[data-ciel="eclaircies"]{--meteo-t:#E8C46A;--meteo-h:#1E2530}
:root[data-theme="sombre"] .carte-meteo[data-ciel="couvert"]{--meteo-t:#A7B4C0;--meteo-h:#1C2229}
:root[data-theme="sombre"] .carte-meteo[data-ciel="brouillard"]{--meteo-t:#A7B4C0;--meteo-h:#1C2229}
:root[data-theme="sombre"] .carte-meteo[data-ciel="pluie"]{--meteo-t:#7FB2E5;--meteo-h:#16283A}
:root[data-theme="sombre"] .carte-meteo[data-ciel="orage"]{--meteo-t:#9A9EE0;--meteo-h:#1E1F35}

@media (max-width:820px){
  .meteo-icone{width:44px;height:44px}
}

/* --------------------------------------------------------------------------
   Parametres — la liste « Heures et alertes »

   Elle s'appuyait sur quatre classes qui n'existaient dans aucune feuille, et
   sur le prefixe du Stock par-dessus le marche. Resultat : le nom du reglage
   et sa valeur colles l'un a l'autre, « Bloc AVANTcontrole unique ».
   Constate par Stephanie le 31/08.

   Une ligne, deux colonnes : le reglage a gauche, sa valeur a droite, avec la
   grille complete qui est la regle des tableaux du projet.
   -------------------------------------------------------------------------- */

.pa-reglages {
  border: 1px solid var(--trait);
  border-radius: var(--r-s);
  overflow: hidden;
  max-width: 760px;
}

.pa-reglage {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-2) var(--e-4);
  padding: var(--e-3) var(--e-4);
  border-bottom: 1px solid var(--trait);
}

.pa-reglage:last-child { border-bottom: 0; }
.pa-reglage:nth-child(even) { background: var(--surface2); }

.pa-reglage-nom {
  flex: 1 1 12em;
  font-size: var(--t-base);
  font-weight: var(--graisse-appui);
  color: var(--encre);
}

.pa-reglage-valeur {
  flex: 0 1 auto;
  font-size: var(--t-base);
  color: var(--encre2);
  text-align: right;
}

@media (max-width: 820px) {
  /* Sur telephone la valeur passe sous son nom : cote a cote, « controle
     unique a T-15 pour toutes les taches d'installation » se replie sur
     quatre lignes de deux mots. */
  .pa-reglage { display: block; }
  .pa-reglage-valeur { display: block; text-align: left; margin-top: 2px; }
}

/* ==========================================================================
   Parametres — module d'administration, option B2

   Choisie par Stephanie le 31/08/2026 sur `B18_MAQUETTE_ADMIN.html`.

   Deux niveaux, un seul ecran :
     1. le sommaire, une porte par reglage avec son etat ;
     2. le reglage, avec le sommaire replie en colonne a gauche.

   Sous 820 px la colonne disparait : on retrouve exactement la liste de portes,
   avec un retour. C'est le modele valide le 21/08 pour le mobile, et c'est la
   regle « responsive par transformation » du §7 — une grille devient une liste,
   jamais une petite grille.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Le sommaire
   -------------------------------------------------------------------------- */

.pa-portes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e-3);
}

.pa-porte {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  text-align: left;
  width: 100%;
  min-height: 78px;
  padding: var(--e-4);
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r-m);
  box-shadow: var(--ombre-basse);
  cursor: pointer;
  color: var(--encre);
}

.pa-porte:hover { border-color: var(--lagon); background: var(--surface2); }

.pa-porte-txt { flex: 1; min-width: 0; }

.pa-porte-nom {
  display: block;
  font-size: var(--t-base);
  font-weight: var(--graisse-appui);
  color: var(--encre);
}

/* L'etat de chaque porte : c'est ce qui evite d'ouvrir pour rien. */
.pa-porte-etat {
  display: block;
  margin-top: 2px;
  font-size: var(--t-petit);
  color: var(--encre2);
}

/* Le rouge est reserve aux vrais problemes (§7). Un reglage qui attend
   quelque chose en est un : un message retenu ne partira pas tout seul. */
.pa-porte-att { color: var(--lave); }

.pa-chev { flex: none; font-size: var(--t-titre); color: var(--encre3); }

/* Les icones : tracees, jamais des emojis (§7). Un emoji change de dessin
   d'un appareil a l'autre et casse l'alignement d'une liste. */
.pa-ico {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: var(--r-s);
  background: var(--lagon-f);
  display: grid;
  place-items: center;
  color: var(--teal);
}

.pa-ico svg {
  width: 19px;
  height: 19px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   Le deuxieme niveau
   -------------------------------------------------------------------------- */

.pa-fil {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  margin-bottom: var(--e-3);
  font-size: var(--t-appui);
  color: var(--encre2);
}

.pa-retour {
  min-height: var(--cible);
  padding: 0 var(--e-3);
  border: 1px solid var(--trait-champ);
  border-radius: var(--r-s);
  background: var(--surface);
  color: var(--encre);
  font-size: var(--t-appui);
  cursor: pointer;
}

.pa-retour:hover { border-color: var(--encre3); background: var(--surface2); }
.pa-fil-suite { color: var(--encre3); }
.pa-fil-ici { color: var(--encre); font-weight: var(--graisse-appui); }

.pa-b2 {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: var(--e-4);
  align-items: start;
}

.pa-contenu { min-width: 0; }

/* Le sommaire replie. Il garde ses icones et ses points d'alerte : c'est ce
   qui permet de voir qu'un autre reglage attend pendant qu'on travaille. */
.pa-mini {
  padding: var(--e-2);
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r-m);
  box-shadow: var(--ombre-basse);
}

.pa-mini-lien {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  width: 100%;
  min-height: var(--cible);
  padding: var(--e-2) var(--e-3);
  border: 0;
  border-radius: var(--r-s);
  background: transparent;
  color: var(--encre2);
  font-size: var(--t-appui);
  text-align: left;
  cursor: pointer;
}

.pa-mini-lien:hover { background: var(--surface2); }

.pa-mini-lien[aria-current="page"] {
  background: var(--lagon-b);
  color: var(--sur-lagon);
  font-weight: var(--graisse-appui);
}

.pa-mini-lien .pa-ico { width: 26px; height: 26px; }
.pa-mini-lien .pa-ico svg { width: 15px; height: 15px; }

.pa-pt {
  width: 6px;
  height: 6px;
  margin-left: auto;
  border-radius: var(--r-p);
  background: var(--lave);
  flex: none;
}

/* --------------------------------------------------------------------------
   L'editeur de messages
   -------------------------------------------------------------------------- */

.pa-editeur {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-4);
  align-items: start;
}

.pa-etiq {
  display: block;
  margin: var(--e-3) 0 var(--e-1);
  font-size: var(--t-micro);
  font-weight: var(--graisse-forte);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--encre2);
}

.pa-champ {
  width: 100%;
  min-height: var(--cible);
  padding: 0 var(--e-3);
  border: 1px solid var(--trait-champ);
  border-radius: var(--r-s);
  background: var(--surface);
  color: var(--encre);
  /* Jamais sous 16 px : en dessous, Safari iOS zoome sur le champ au focus. */
  font-size: var(--t-champ);
}

.pa-champ-court { width: auto; flex: 1 1 12em; min-width: 0; }

.pa-outils {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-2);
  background: var(--surface2);
  border: 1px solid var(--trait);
  border-bottom: 0;
  border-radius: var(--r-s) var(--r-s) 0 0;
}

.pa-var {
  min-height: 32px;
  padding: 0 var(--e-3);
  border: 0;
  border-radius: var(--r-s);
  background: var(--lagon-b);
  color: var(--sur-lagon);
  font-size: var(--t-appui);
  font-weight: var(--graisse-appui);
  cursor: pointer;
}

.pa-var:hover { background: var(--lagon-survol); }

.pa-outils-note {
  margin-left: auto;
  font-size: var(--t-petit);
  color: var(--encre3);
}

.pa-zone {
  min-height: 260px;
  padding: var(--e-3);
  border: 1px solid var(--trait);
  border-radius: 0 0 var(--r-s) var(--r-s);
  background: var(--surface);
  color: var(--encre);
  font-size: var(--t-base);
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.pa-zone:focus { outline: 2px solid var(--focus); outline-offset: -2px; }

/* Une information, en pastille. On ne tape plus « {prenom_enfant} » : on
   l'insere, et on ne peut plus se tromper de nom. */
.pa-jeton {
  display: inline-block;
  padding: 1px 9px;
  border-radius: var(--r-p);
  background: var(--lagon-b);
  color: var(--sur-lagon);
  font-size: var(--t-appui);
  font-weight: var(--graisse-appui);
  white-space: nowrap;
  user-select: none;
}

/* Une information qui manquerait sur le dossier choisi. C'est la moitie
   visible du verrou : le message ne partirait pas, et on voit ou. */
.pa-jeton-trou { background: var(--lave-f); color: var(--lave); }

/* Un paragraphe conditionnel, plie avec sa condition en francais. */
.pa-cond {
  display: block;
  margin: var(--e-2) 0;
  padding: var(--e-2) var(--e-3);
  border-left: 3px solid var(--lagon);
  border-radius: 0 var(--r-s) var(--r-s) 0;
  background: var(--lagon-f);
}

.pa-cond-tete {
  display: block;
  margin-bottom: var(--e-1);
  font-size: var(--t-petit);
  font-weight: var(--graisse-appui);
  color: var(--teal);
  user-select: none;
}

.pa-cond-corps { display: block; }

.pa-aide {
  margin: var(--e-3) 0 0;
  font-size: var(--t-petit);
  color: var(--encre2);
}

.pa-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  margin-top: var(--e-4);
}

/* `.btn-principal` est pleine largeur par nature : c'est ce qu'on veut sur
   telephone, jamais dans une rangee d'actions sur poste bureau. */
.pa-enreg { display: inline-block; width: auto; flex: 0 0 auto; }

.pa-ok { color: var(--pousse); font-size: var(--t-appui); font-weight: var(--graisse-appui); }
.pa-ko { color: var(--lave); font-size: var(--t-appui); font-weight: var(--graisse-appui); }

/* --------------------------------------------------------------------------
   L'apercu
   -------------------------------------------------------------------------- */

/* L'APERCU SUIT LE DEFILEMENT.
   Le texte d'un message fait deux a trois ecrans de haut. Sans cela, on
   descend pour ecrire et l'apercu reste en haut : on ne voit plus jamais
   l'effet de ce qu'on tape, ce qui est tout l'interet de la colonne. */
.pa-editeur > div:last-child { position: sticky; top: var(--e-4); }

.pa-apercu-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  margin-bottom: var(--e-3);
}

.pa-apercu-tete .carte-titre { margin: 0; }

.pa-select {
  min-height: 36px;
  max-width: 100%;
  padding: 0 var(--e-2);
  border: 1px solid var(--trait-champ);
  border-radius: var(--r-s);
  background: var(--surface);
  color: var(--encre);
  font-size: var(--t-appui);
}

.pa-bandeau {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  margin-bottom: var(--e-3);
  padding: var(--e-3);
  border-left: 3px solid var(--lave);
  border-radius: 0 var(--r-s) var(--r-s) 0;
  background: var(--lave-f);
  font-size: var(--t-appui);
}

.pa-bandeau b { color: var(--lave); }

.pa-etiq-alerte {
  flex: none;
  padding: 2px 9px;
  border-radius: var(--r-p);
  background: var(--lave);
  color: var(--sur-lave);
  font-size: var(--t-micro);
  font-weight: var(--graisse-forte);
  letter-spacing: .06em;
}

.pa-apercu {
  padding: var(--e-4);
  border: 1px solid var(--trait);
  border-radius: var(--r-s);
  background: var(--surface2);
  font-size: var(--t-appui);
  line-height: 1.7;
}

.pa-apercu-objet {
  margin: 0 0 var(--e-3);
  padding-bottom: var(--e-2);
  border-bottom: 1px solid var(--trait);
  color: var(--encre2);
}

.pa-apercu-objet b { color: var(--encre); }
.pa-apercu-l { margin: 0; min-height: 1em; }

/* --------------------------------------------------------------------------
   Sous le seuil mobile : la colonne disparait, on retrouve la liste de portes
   -------------------------------------------------------------------------- */

@media (max-width: 820px) {
  .pa-portes { grid-template-columns: 1fr; gap: var(--e-2); }
  .pa-porte { min-height: 64px; padding: var(--e-3); }

  /* Le sommaire replie n'a pas sa place sur un telephone : le retour ramene
     a la liste de portes, qui EST le sommaire. */
  .pa-b2 { grid-template-columns: 1fr; }
  .pa-mini { display: none; }

  .pa-editeur { grid-template-columns: 1fr; }
  .pa-editeur > div:last-child { position: static; }
  .pa-enreg { width: 100%; flex: 1 1 100%; }
  .pa-outils-note { margin-left: 0; flex: 1 1 100%; }
}

/* --------------------------------------------------------------------------
   Le contenu et son panneau lateral

   « Ajoute les modules un peu comme le screenshot, et aussi pour eviter ce
   gros module en pleine page » (31/08). Les actions et les compteurs vivent a
   droite ; le contenu garde une largeur de lecture.
   -------------------------------------------------------------------------- */

.pa-avec-aside {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: var(--e-4);
  align-items: start;
}

.pa-colonne { min-width: 0; display: grid; gap: var(--e-3); }

.pa-aside { display: grid; gap: var(--e-3); position: sticky; top: var(--e-4); }

.pa-aside-bloc {
  padding: var(--e-3);
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r-m);
  box-shadow: var(--ombre-basse);
  display: grid;
  gap: var(--e-2);
}

.pa-aside-titre {
  margin: 0;
  font-size: var(--t-micro);
  font-weight: var(--graisse-forte);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--encre3);
}

.pa-action {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  width: 100%;
  min-height: var(--cible);
  padding: 0 var(--e-3);
  border: 1px solid var(--trait);
  border-radius: var(--r-s);
  background: var(--surface);
  color: var(--encre);
  font-size: var(--t-appui);
  text-align: left;
  cursor: pointer;
}

.pa-action:hover { border-color: var(--lagon); background: var(--surface2); }

.pa-ico-petit {
  flex: none;
  width: 24px; height: 24px;
  border-radius: var(--r-s);
  background: var(--lagon-f);
  display: grid; place-items: center;
  color: var(--teal);
}
.pa-ico-petit svg {
  width: 14px; height: 14px;
  stroke: currentColor; fill: none; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

.pa-compteur {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
  font-size: var(--t-appui);
  color: var(--encre2);
}

.pa-compteur-val {
  font-size: var(--t-titre-s);
  font-weight: var(--graisse-forte);
  color: var(--encre);
}

.pa-vert { color: var(--pousse); }
.pa-rouge { color: var(--lave); }

/* --------------------------------------------------------------------------
   Les formulaires
   -------------------------------------------------------------------------- */

.pa-form {
  display: grid;
  gap: var(--e-2);
  padding: var(--e-3);
  margin: var(--e-2) 0;
  border: 1px solid var(--lagon);
  border-radius: var(--r-s);
  background: var(--lagon-f);
}

.pa-champ-bloc { display: block; }
.pa-champ-nombre { width: 6.5em; flex: none; text-align: right; }

.pa-avertit {
  margin: 0;
  padding: var(--e-2) var(--e-3);
  border-left: 3px solid var(--lave);
  border-radius: 0 var(--r-s) var(--r-s) 0;
  background: var(--lave-f);
  color: var(--encre);
  font-size: var(--t-appui);
}

/* Les boutons d'action d'une ligne : une cible de 44 px, une icone tracee. */
.pa-bouton-ico {
  flex: none;
  width: var(--cible);
  height: var(--cible);
  display: grid;
  place-items: center;
  border: 1px solid var(--trait);
  border-radius: var(--r-s);
  background: var(--surface);
  color: var(--encre2);
  cursor: pointer;
}

.pa-bouton-ico:hover { border-color: var(--encre3); background: var(--surface2); }
.pa-bouton-ico[disabled] { opacity: .5; cursor: default; }

.pa-ico-nu { display: grid; place-items: center; }
.pa-ico-nu svg {
  width: 17px; height: 17px;
  stroke: currentColor; fill: none; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Le rouge est reserve aux vrais problemes (§7) — et retirer un acces en est
   un tant qu'on ne l'a pas voulu. Il ne se remplit qu'a la confirmation. */
.pa-bouton-danger { color: var(--lave); border-color: var(--lave-f); }
.pa-bouton-danger:hover { border-color: var(--lave); background: var(--lave-f); }

.pa-bouton-danger-plein {
  border-color: var(--lave);
  background: var(--lave-f);
  color: var(--lave);
  font-weight: var(--graisse-appui);
}

.pa-danger { border-color: var(--lave-f); }

/* Une adresse d'essai a l'air d'une adresse. Elle se signale. */
.pa-mail-faux {
  color: var(--lave);
  text-decoration: underline wavy var(--lave);
  text-underline-offset: 3px;
}

.pa-bandeau-ok,
.pa-bandeau-ko {
  margin: 0;
  padding: var(--e-3);
  border-radius: var(--r-s);
  font-size: var(--t-appui);
}

.pa-bandeau-ok {
  background: var(--pousse-f);
  border-left: 3px solid var(--pousse);
  color: var(--encre);
}

.pa-bandeau-ko {
  background: var(--lave-f);
  border-left: 3px solid var(--lave);
  color: var(--encre);
}

/* --------------------------------------------------------------------------
   Les lignes de reglage modifiables
   -------------------------------------------------------------------------- */

.pa-reglage-editable {
  align-items: center;
  gap: var(--e-3);
}

.pa-reglage-editable .pa-reglage-nom { flex: 1 1 12em; }
.pa-reglage-editable .pa-reglage-valeur { flex: 0 0 10em; }

.pa-explique {
  background: var(--lagon-f);
  border-color: var(--lagon);
}

.pa-explique p {
  margin: 0 0 var(--e-2);
  font-size: var(--t-appui);
  color: var(--encre);
}

.pa-explique p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   L'editeur : le panneau des champs, a droite

   Reference envoyee par Stephanie le 31/08 — le module de relance des devis
   d'Axonaut : les champs toujours visibles, groupes par famille et
   cherchables, plutot que caches derriere un menu deroulant.
   -------------------------------------------------------------------------- */

.pa-avec-panneau { grid-template-columns: minmax(0, 1fr) 300px; }

.pa-panneau {
  position: sticky;
  top: var(--e-4);
  padding: var(--e-3);
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r-m);
  box-shadow: var(--ombre-basse);
  max-height: calc(100vh - 2 * var(--e-4));
  overflow: auto;
}

.pa-panneau-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  margin-bottom: var(--e-2);
}

.pa-panneau-tete .carte-titre { margin: 0; }

.pa-famille { margin-top: var(--e-3); }

.pa-famille-nom {
  margin: 0 0 var(--e-2);
  font-size: var(--t-micro);
  font-weight: var(--graisse-forte);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--encre3);
}

.pa-famille-sac { display: flex; flex-wrap: wrap; gap: var(--e-1); }

.pa-champ-jeton {
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: var(--r-p);
  background: var(--surface2);
  color: var(--encre);
  font-size: var(--t-appui);
  cursor: pointer;
}

.pa-champ-jeton:hover { border-color: currentColor; }

/* Une couleur par famille, comme chez Axonaut : ca aide a retrouver un champ
   dans une liste qui s'allonge. Les trois teintes tiennent 4,5:1 sur leur
   propre fond, c'est ce qui commande le choix. */
.pa-f1 { background: var(--lagon-b); color: var(--sur-lagon); }
.pa-f2 { background: var(--pousse-f); color: var(--pousse); }
.pa-f3 { background: var(--ambre-f); color: var(--ambre); }

.pa-zone-bandeau:empty { display: none; }

/* L'objet du message accepte les memes etiquettes que le corps, sur une seule
   ligne — « Devis N° [Numero du devis] » chez Axonaut. */
.pa-zone-ligne {
  min-height: var(--cible);
  padding: var(--e-2) var(--e-3);
  border-radius: var(--r-s);
  white-space: nowrap;
  overflow-x: auto;
}

@media (max-width: 1100px) {
  /* Trois colonnes ne tiennent plus : le panneau passe sous le contenu. */
  .pa-avec-aside { grid-template-columns: 1fr; }
  .pa-aside, .pa-panneau { position: static; max-height: none; }
}

/* --------------------------------------------------------------------------
   La legende des colonnes de reglage

   « Les cases modifiables ne sont pas claires » (31/08). Un champ qui contient
   « -90 » sans rien pour dire ce que -90 designe se lit comme un code.
   -------------------------------------------------------------------------- */

.pa-legende {
  background: var(--surface2);
  font-size: var(--t-micro);
  font-weight: var(--graisse-forte);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--encre3);
  padding-top: var(--e-2);
  padding-bottom: var(--e-2);
}

/* Les trois colonnes de la legende ont la meme taille : sans ce rappel,
   `.pa-reglage-valeur` reprend sa taille de lecture et la troisieme colonne
   ecrase les deux autres. */
.pa-legende > * {
  font-size: var(--t-micro);
  font-weight: var(--graisse-forte);
  color: var(--encre3);
}

.pa-legende-champ { flex: 0 0 6.5em; text-align: center; }

/* --------------------------------------------------------------------------
   Les pieces jointes
   -------------------------------------------------------------------------- */

.pa-pj {
  margin-top: var(--e-4);
  padding-top: var(--e-3);
  border-top: 1px solid var(--trait);
  display: grid;
  gap: var(--e-2);
}

.pa-pj-ligne {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-2) var(--e-3);
  border: 1px solid var(--trait);
  border-radius: var(--r-s);
  background: var(--surface2);
}

.pa-pj-coche { flex: none; width: 20px; height: 20px; accent-color: var(--teal); }
.pa-pj-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.pa-pj-nom { font-size: var(--t-base); font-weight: var(--graisse-appui); color: var(--encre); }

.pa-pj-url {
  font-size: var(--t-petit);
  color: var(--encre2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pa-pj-ajout { display: grid; gap: var(--e-2); }

/* --------------------------------------------------------------------------
   L'apercu en pleine largeur

   « La previsualisation sur une si petite colonne n'a pas de sens » (31/08).
   Un mail se juge a sa largeur de lecture : dans 300 px les lignes se cassent
   tous les cinq mots et on ne voit pas ce que la famille verra.
   -------------------------------------------------------------------------- */

.pa-plein { display: grid; gap: var(--e-3); }

.pa-apercu-carte { max-width: 760px; }
.pa-apercu-carte .pa-apercu { background: var(--surface); }

/* --------------------------------------------------------------------------
   La barre de mise en forme

   Six boutons, pas douze : gras, italique, souligne, deux listes, un lien.
   C'est ce qui s'affiche pareil chez Gmail, Outlook et Apple Mail. Les
   couleurs, les alignements et les tailles s'y rendent differemment, et un
   mail de confirmation d'anniversaire n'en a pas besoin.
   -------------------------------------------------------------------------- */

.pa-outil {
  min-width: 34px;
  height: 34px;
  padding: 0 var(--e-2);
  border: 1px solid transparent;
  border-radius: var(--r-s);
  background: transparent;
  color: var(--encre);
  font-size: var(--t-base);
  cursor: pointer;
}

.pa-outil:hover { background: var(--surface); border-color: var(--trait); }

.pa-o-g { font-weight: var(--graisse-forte); }
.pa-o-i { font-style: italic; }
.pa-o-s { text-decoration: underline; }

/* La zone de saisie porte la mise en forme : elle doit la montrer. */
.pa-zone b, .pa-zone strong { font-weight: var(--graisse-forte); }
.pa-zone i, .pa-zone em { font-style: italic; }
.pa-zone u { text-decoration: underline; }
.pa-zone a { color: var(--teal); }
.pa-zone ul, .pa-zone ol { margin: var(--e-2) 0; padding-left: var(--e-5); }
.pa-zone li { margin: 2px 0; }
.pa-zone p { margin: 0 0 var(--e-2); }

/* L'apercu du message mis en forme. Il vient du serveur — c'est exactement le
   rendu qui partira — et il garde la largeur de lecture d'un vrai mail. */
.pa-apercu-html {
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--encre);
}

.pa-apercu-html p { margin: 0 0 var(--e-3); }
.pa-apercu-html ul, .pa-apercu-html ol { margin: 0 0 var(--e-3); padding-left: var(--e-5); }
.pa-apercu-html a { color: var(--teal); }

/* --------------------------------------------------------------------------
   Les seuils d'alerte

   Un nombre seul dans une case ne se regle pas, il se subit. Chaque ligne
   porte donc son nom, la phrase qui dit ce qu'elle commande, le champ, et son
   unite en toutes lettres a droite — « minutes avant l'arrivee des familles »
   plutot qu'un en-tete de colonne a aller lire ailleurs.
   -------------------------------------------------------------------------- */

.pa-seuils { display: grid; gap: var(--e-2); }

.pa-seuil {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) var(--e-3);
  padding: var(--e-3);
  border: 1px solid var(--trait);
  border-radius: var(--r-s);
  background: var(--surface2);
}

.pa-seuil-txt { flex: 1 1 18em; min-width: 0; display: grid; gap: 2px; }

.pa-seuil-nom {
  font-size: var(--t-base);
  font-weight: var(--graisse-appui);
  color: var(--encre);
}

.pa-seuil-quoi { font-size: var(--t-petit); color: var(--encre2); }

.pa-seuil-unite {
  flex: 0 1 14em;
  font-size: var(--t-appui);
  color: var(--encre2);
}

/* --------------------------------------------------------------------------
   Le detail replie
   -------------------------------------------------------------------------- */

.pa-detail { padding: var(--e-4); }

.pa-detail-tete {
  cursor: pointer;
  font-size: var(--t-titre-s);
  font-weight: var(--graisse-appui);
  color: var(--encre);
  min-height: var(--cible);
  display: flex;
  align-items: center;
}

.pa-detail-tete::marker { color: var(--encre3); }

.pa-detail-phase {
  margin: var(--e-4) 0 var(--e-2);
  font-size: var(--t-micro);
  font-weight: var(--graisse-forte);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--encre3);
}

/* Le champ de fichier natif est cache : son apparence change d'un navigateur a
   l'autre et ne suit aucun jeton. Le bouton l'ouvre. Il reste dans le document
   et reste atteignable au clavier par le bouton, qui porte le libelle. */
.pa-pj-entree {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.pa-pj-deposer { width: 100%; }

.pa-pj-ou {
  margin: var(--e-3) 0 0;
  font-size: var(--t-petit);
  color: var(--encre3);
  text-align: center;
}

/* ======================================================================
   Les cartes du tableau de bord — un conteneur, deux ordres

   Sur poste bureau : deux colonnes, et « Aujourd'hui sur le domaine » sur
   toute la largeur. C'est exactement ce que faisaient les deux paires `.duo`
   d'avant le 31/08.

   Sur téléphone : une colonne, dans l'ordre de la fiche 1 — « Vos tâches,
   Aujourd'hui sur le domaine, météo, le reste ». Redemandé par Stéphanie le
   31/08 : « les 4 cellules ne sont pas positionnées comme dans mon cahier des
   charges réalisé pour les vues mobiles ».
   ====================================================================== */

.dash-cartes{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-4);
  align-items:start;margin-bottom:var(--e-4)}

/* La liste des événements du jour prend les deux colonnes : elle porte des
   lignes, pas des chiffres, et se lit mal sur une demi-largeur. */
.dash-cartes .d-domaine{grid-column:1 / -1}

@media (max-width:820px){
  /* `align-items:start` sert la grille du bureau — il empêche une carte
     courte de s'étirer à la hauteur de sa voisine. En colonne il ne s'applique
     plus à la hauteur mais à la LARGEUR, et les cartes se rétractaient à la
     taille de leur texte : « Aujourd'hui sur le domaine » faisait 212 px sur
     un écran de 375. */
  .dash-cartes{display:flex;flex-direction:column;align-items:stretch;gap:var(--e-3)}
  /* L'ordre de la fiche. Ce qui m'attend, ce qui se passe sur le domaine
     aujourd'hui, le temps qu'il fera, puis le reste. */
  .dash-cartes .d-taches{order:1}
  .dash-cartes .d-domaine{order:2}
  .dash-cartes .d-meteo{order:3}
  .dash-cartes .d-traiter{order:4}
  .dash-cartes .d-dossiers{order:5}
}