/* =====================================================================
   DASHBOARD — s'appuie sur widget.css (boutons, listes, modale) et n'ajoute
   que ce qui lui est propre : l'entête, les badges de statut, et le liseré
   de couleur par catégorie.
===================================================================== */

body.admin { max-width: none; }
#app { max-width: 960px; margin: 0 auto; }

.admin-entete {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--primaire);
}
.admin-entete h1 { margin: 0; font-size: 1.2rem; }
.admin-entete .qui { color: var(--gris); font-size: 0.85rem; }
.admin-entete .titre {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: space-between;
}
.admin-entete .identite { min-width: 0; }
.admin-entete .compte { display: flex; gap: 0.5rem; }

/* =====================================================================
   LE MENU RESTE SOUS LES YEUX

   Un planning de samedi fait quatre écrans de haut ; les Réglages et le
   journal davantage. Pour changer de page il fallait d'abord remonter
   tout en haut — un aller-retour à chaque fois, sur le seul élément de
   la page qu'on utilise à longueur de journée.

   IL EMPORTE AUSSI LA RECHERCHE ET LE COMPTE, parce qu'ils vivent dans la
   même barre : les en détacher aurait fait deux barres là où il y en a
   une, et rendu la loupe plus difficile à trouver qu'avant.

   LE FOND DOIT ÊTRE OPAQUE. Sans lui on verrait le contenu défiler à
   travers les onglets — et la barre cesserait d'être lisible au moment
   précis où elle sert.

   La variable --haut-bandeau vaut zéro en production (pas de bandeau) et la hauteur
   du bandeau orange sur le banc d'essai, mesurée par le JavaScript.

   ORDINATEUR SEULEMENT. Sur téléphone l'entête tient deux lignes ; la
   figer mangerait le quart de l'écran sur des pages qu'on lit en
   défilant. La version téléphone sera reprise pour de bon plus tard.
===================================================================== */
/* =====================================================================
   LES SOUS-MENUS D'UNE PAGE, FIGES SOUS LE MENU DU HAUT

   Ils se calent sous ce qui est deja fige — dont on mesure la hauteur,
   parce qu'elle change avec la largeur de la fenetre et avec le bandeau
   du banc d'essai.

   LE FOND EST OPAQUE, sinon le contenu defilerait a travers les onglets.
   ET LE Z-INDEX EST SOUS CELUI DE L'ENTETE (40) : deux blocs figes se
   rencontrent forcement quand on remonte, et c'est l'entete qui doit
   passer devant.

   ORDINATEUR SEULEMENT : sur telephone, figer une seconde rangee par
   dessus la premiere ne laisserait plus rien a lire.
===================================================================== */
@media (min-width: 761px) {
  .onglets-figes {
    position: sticky;
    top: var(--haut-fige, 9rem);
    z-index: 30;
    background: #fff;
    padding-top: 0.5rem;
  }
  /* La rangee du bas portait la marge qui la separait du contenu ; dans
     un bloc fige, cette marge laisserait voir passer le contenu entre les
     deux. Elle descend sur le bloc. */
  .onglets-figes .reglages-sous-menu,
  .onglets-figes .sous-menu-clients { margin-bottom: 0; }
  .onglets-figes { margin-bottom: 1rem; }

  /* LE BLOC FIGE : l'entete, et sur le calendrier la barre des dates.
     Ensemble, parce que deux blocs colles l'un sous l'autre
     demanderaient de mesurer le premier pour caler le second — une
     mesure de plus, qui changerait a chaque repli de rangee. */
  .tete-figee {
    position: sticky;
    top: var(--haut-bandeau, 0px);
    z-index: 40;
    background: #fff;
    /* Le corps de page a 0.75rem de marge : sans cette compensation,
       le bloc colle laisserait voir une bande de contenu au-dessus de
       lui. */
    padding-top: 0.75rem;
    margin-top: -0.75rem;
  }
  /* L'entete perd sa marge du bas : c'est le bloc qui la porte
     desormais, sinon le contenu passerait entre les deux. */
  .tete-figee .admin-entete { margin-bottom: 0.6rem; }
  .tete-figee .barre { margin-bottom: 0.6rem; }

  /* Un titre de section visé par un lien interne ne doit pas se retrouver
     caché sous la barre. */
  main > h2.section,
  .reglage-titre { scroll-margin-top: calc(var(--haut-fige, 7rem) + 1rem); }
}

.onglets { display: flex; gap: 0.25rem; margin-right: auto; }
.onglets button { white-space: nowrap; }
.onglets button.actif {
  background: var(--primaire);
  border-color: var(--primaire);
  color: #fff;
}

/* --- une ligne de planning ---------------------------------------------- */

#app .creneau {
  border-left: 4px solid var(--trait);
  padding-left: 0.6rem;
  align-items: flex-start;
}
#app .creneau .heure { padding-top: 0.1rem; }

.activite .details { color: var(--gris); font-size: 0.8rem; }

/* LA DATE DE LA SEANCE, en messagerie. Elle partage la ligne avec la date
   du message : en gris parmi le gris, on lisait l'une pour l'autre. Elle
   porte la couleur du texte et un peu de graisse — c'est la reponse a la
   question qu'on se pose en ouvrant l'ecran. */
.activite .details.seance { color: var(--texte); font-weight: 600; }
.activite .notes {
  font-size: 0.8rem;
  font-style: italic;
  color: var(--texte);
  background: var(--fond-doux);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  margin-top: 0.2rem;
}

.statut-annulee .activite .nom { text-decoration: line-through; color: var(--gris); }
.statut-hold { background: #fffbeb; }
/* UNE SEANCE RESERVEE SE VOIT : vert clair. Les creneaux libres restent
   blancs — « reserve / pas reserve » se lit d'un coup d'oeil (JP, 12/10/2026). */
.statut-confirmee:not(.ligne-message) { background: #ecfdf3; }

.etiquettes { display: flex; flex-direction: column; gap: 0.25rem; }
.badge {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  white-space: nowrap;
  background: var(--trait);
  color: var(--texte);
}
.badge.hold { background: #fde68a; }
.badge.annulee { background: #e5e7eb; color: var(--gris); }
.badge.no_show { background: #fecaca; }
.badge.surjauge { background: var(--rouge); color: #fff; }
/* AVIS NON DEMANDÉ : gris, pas rouge. Ce n'est pas un incident, c'est une
   décision qu'on assume — le rouge la ferait passer pour une panne. */
.badge.avis-coupe { background: #e5e7eb; color: #4b5563; }

/* --- LES AVIS À RELIRE ---------------------------------------------------
   La note en étoiles tient lieu d'heure, dans la colonne de gauche. Le
   liseré porte le sentiment : rouge sous une étoile, vert sous cinq. On
   voit d'un coup d'œil ce qui presse — et ce qui presse, c'est le rouge. */
.avis-note-1, .avis-note-2 { border-left-color: #b91c1c !important; }
.avis-note-3 { border-left-color: #d97706 !important; }
.avis-note-4, .avis-note-5 { border-left-color: #15803d !important; }
.creneau[class*="avis-note-"] .heure { color: #ca8a04; letter-spacing: -0.05em; }

/* CE QU'IL A ÉCRIT, détaché du reste : c'est la seule chose de cette
   ligne qui vienne de quelqu'un d'autre que nous. */
.avis-texte {
  margin: 0.4rem 0;
  padding: 0.4rem 0.6rem;
  border-left: 2px solid var(--trait);
  font-style: italic;
  white-space: pre-wrap;
}
.avis-reponse { width: 100%; font: inherit; font-size: 0.9rem; }

/* LA REPONSE A COTE DE L'AVIS, LES BOUTONS SOUS LA REPONSE.

   Une reponse se relit en regardant ce a quoi elle repond. Trois lignes
   de zone de saisie sous un avis de dix lignes, et l'on repondait a
   l'aveugle — il fallait remonter pour verifier qu'on ne repondait pas a
   cote.

   LES DEUX COLONNES SE REPLIENT seules : chacune demande 22rem, donc
   sous 46rem elles s'empilent. Sur un telephone c'est l'empilement qui
   est juste, et il arrive sans regle supplementaire. */
#app .creneau[class*="avis-note-"] { flex-wrap: wrap; }
#app .creneau[class*="avis-note-"] .activite { flex: 1 1 22rem; min-width: 0; }
.avis-reponse-bloc {
  flex: 1 1 22rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.avis-reponse-bloc .avis-reponse { min-height: 9rem; resize: vertical; }
/* Les commandes au bout du chemin de lecture, alignees a gauche comme le
   texte qu'elles concernent. */
.avis-reponse-bloc .actions { margin-top: 0.2rem; }

/* --- connexion ------------------------------------------------------------ */

.connexion {
  max-width: 24rem;
  margin: 3rem auto;
  padding: 1.5rem;
  border: 1px solid var(--trait);
  border-radius: 10px;
}
.connexion h1 { margin: 0 0 1rem; font-size: 1.25rem; }
.connexion label { display: block; margin-bottom: 0.9rem; font-size: 0.9rem; font-weight: 600; }
.connexion input {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.55rem;
  border: 1px solid var(--trait);
  border-radius: 6px;
  font: inherit;
}
.connexion button { width: 100%; }

/* LA CROIX DE FERMETURE, en haut à droite de chaque fenêtre. Le bouton du
   bas reste : l'un ferme quand on a fini de lire, l'autre quand on s'est
   trompé de fenêtre. */
/* FIXED, ET SURTOUT PAS RELATIVE.

   La croix a besoin d un parent positionne pour se caler ; `relative` le
   lui donnait, mais ecrasait au passage le `fixed` que le navigateur pose
   sur une fenetre modale. La fenetre s ancrait alors au haut du DOCUMENT :
   le navigateur donnait le focus a la croix, faisait defiler jusqu a elle,
   et la page remontait en haut a chaque ouverture. On perdait sa place a
   chaque fois — et dans TOUTES les fenetres du logiciel, pas seulement une.

   `fixed` sert de repere a la croix exactement comme `relative`, et garde
   la fenetre calee sur l ECRAN. Rien ne defile. */
#modale { position: fixed; }
/* UNE SEMAINE NE TIENT PAS DANS 28 rem. La modale s'élargit pour les
   écrans qui portent un tableau de semaine, et seulement pour eux — un
   formulaire de six champs n'a rien à gagner à s'étaler. Si le
   navigateur ignore `:has`, le tableau glisse dans sa boîte : c'est
   moins confortable, jamais cassé. */
dialog:has(.semaine-tableau) { width: min(76rem, 96vw); }
/* LA PROPOSITION SE LIT ENTIERE : sept colonnes de jours qui se plient
   au lieu de glisser — un dimanche coupé ne se voit pas. */
.proposition .semaine-tableau { table-layout: fixed; font-size: 0.78rem; }
.proposition .semaine-tableau th, .proposition .semaine-tableau td { padding: 0.3rem 0.25rem; }
.proposition .semaine-tableau .semaine-nom { width: 8.5rem; white-space: normal; position: static; }
.proposition .semaine-creneau { white-space: normal; }
/* LE DETAIL D'UNE SEANCE porte une LIGNE de planning entiere : le nom, le
   client, la reference, le reste a regler, le choix de l'animateur, le
   temps, et deux boutons. A 28 rem tout cela se plie en accordeon et
   devient illisible. */
dialog:has(.detail-creneau) { width: min(46rem, 95vw); }
/* LA JOURNEE VENDUE porte les memes lignes, en plus grand nombre : un
   samedi a douze seances doit tenir sans se replier en accordeon. */
dialog:has(.detail-jour) { width: min(46rem, 95vw); }
.croix-fermer {
  position: absolute;
  top: 0.35rem;
  right: 0.45rem;
  width: 2rem;
  height: 2rem;
  padding: 0;
  line-height: 1;
  font-size: 1.35rem;
  border: none;
  background: transparent;
  color: var(--gris);
  cursor: pointer;
}
.croix-fermer:hover { color: var(--texte); }

/* --- formulaires de la modale ---------------------------------------------- */

dialog select {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.55rem;
  border: 1px solid var(--trait);
  border-radius: 6px;
  font: inherit;
  background: #fff;
}

/* Les sept jours d'une règle horaire, en cases plutôt qu'en CSV : personne
   n'écrit « 1,2,3,4,5 » de mémoire. */
.jours { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.9rem; }
.jour-case {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  margin: 0;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--trait);
  border-radius: 6px;
  font-weight: 400;
  font-size: 0.85rem;
  cursor: pointer;
}
.jour-case input { width: auto; margin: 0; }
.jour-case:has(input:checked) { border-color: var(--primaire); background: var(--fond-doux); }

/* CE QUE DONNENT LES TROIS NOMBRES.

   Premier depart, dernier depart, intervalle : la journee qu'ils decrivent
   ne se lisait qu'une fois la regle posee, sur le planning. Ce cadre la
   montre pendant la saisie. Il est volontairement sobre — il informe, il
   ne reclame pas l'attention — SAUF quand les seances se chevauchent, ou
   la ligne rouge doit se voir tout de suite. */
.apercu-departs {
  margin: -0.4rem 0 0.9rem;
  padding: 0.6rem 0.75rem;
  border-radius: 6px;
  background: var(--fond-doux);
}
.apercu-departs .nom { display: block; font-size: 0.8rem; font-weight: 600; opacity: 0.75; }
.apercu-departs p { margin: 0.3rem 0 0; }
/* `tabular-nums` : les heures s'alignent au lieu de danser d'un chiffre a
   l'autre pendant qu'on tape l'intervalle. */
.apercu-departs .departs {
  font-variant-numeric: tabular-nums;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

/* LA PHOTO D'EQUIPE, avant publication. Assez grande pour verifier que
   personne n'a les yeux fermes, pas au point de pousser le bouton hors de
   l'ecran du telephone. */
.apercu-photo {
  display: block;
  max-width: 100%;
  max-height: 16rem;
  margin: 0 0 0.9rem;
  border-radius: 6px;
  object-fit: contain;
}
/* L'APERCU DU LOGO. Petit, et sur un damier clair : un logo a fond
   transparent posé sur du blanc ne se distingue pas du fond, et on croit
   l'avoir mal chargé. */
.apercu-logo {
  display: block;
  max-width: 12rem;
  max-height: 7rem;
  margin: 0 0 0.9rem;
  padding: 0.5rem;
  object-fit: contain;
  border: 1px solid #e3e3e3;
  border-radius: 6px;
  background:
    linear-gradient(45deg, #f2f2f2 25%, transparent 25%, transparent 75%, #f2f2f2 75%) 0 0 / 16px 16px,
    linear-gradient(45deg, #f2f2f2 25%, transparent 25%, transparent 75%, #f2f2f2 75%) 8px 8px / 16px 16px,
    #fff;
}

form.publication textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--trait);
  border-radius: 6px;
  font: inherit;
  line-height: 1.5;
  resize: vertical;
}
/* Le texte tel qu'il est parti : garde ses retours a la ligne. */
.legende-publiee {
  white-space: pre-wrap;
  font: inherit;
  padding: 0.6rem 0.75rem;
  border-radius: 6px;
  background: var(--fond-doux);
}

/* LA CLE DU GM, montree une seule fois. En chasse fixe et selectionnable
   d'un coup : on la copie, on ne la recopie pas a la main. */
.cle-gm code.cle {
  display: block;
  padding: 0.6rem 0.75rem;
  margin: 0.4rem 0;
  border-radius: 6px;
  background: var(--fond-doux);
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: 0.9rem;
  overflow-wrap: anywhere;
  user-select: all;
}

/* LA BOITE A IDEES. Un champ libre, assez grand pour qu'on ose ecrire
   trois phrases — un textarea de deux lignes fait ecrire deux mots. */
form.idee textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--trait);
  border-radius: 6px;
  font: inherit;
  line-height: 1.5;
  resize: vertical;
}

/* Un formulaire d'ajout, sous la liste qu'il alimente. */
dialog form.ajout-regle, dialog ul + form {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--trait);
}
dialog ul { list-style: none; margin: 0; padding: 0; }
dialog h2 { margin-bottom: 0.75rem; }

/* Le dépassement de jauge se lit, chiffré, avant de se confirmer. */
.avertissement {
  margin: 0.5rem 0;
  padding: 0.6rem 0.8rem;
  border-radius: 6px;
  background: #fef2f2;
  border: 1px solid var(--rouge);
  color: var(--rouge);
  font-size: 0.9rem;
}
label.forcer {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  color: var(--rouge);
  margin-bottom: 0.75rem;
}
label.forcer input { width: auto; margin: 0; }

/* UNE CASE ORDINAIRE. `label.forcer` est rouge et gras : c'est la classe
   de l'avertissement — « je force la surjauge ». Cocher « lundi » n'est
   pas un avertissement, et l'écrire en rouge fait hésiter devant un geste
   anodin. */
label.case {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.4rem;
}
label.case input { width: auto; margin: 0; }

/* Un délai : le nombre et son unité sur la même ligne, l'unité juste assez
   large pour « minutes ». */
.delai { display: flex; gap: .5rem; }
.delai input { flex: 1; margin: 0; }
.delai select { width: auto; margin: 0; }

/* Écran Mails : de grandes zones de texte, une par message. */
main > h2.section { margin-top: 2rem; }
.carte textarea {
  width: 100%;
  font: inherit;
  line-height: 1.45;
  resize: vertical;
  margin: .5rem 0;
}

/* L'onglet courant : marqué, mais toujours à sa place. Un menu se retient
   par sa géométrie avant de se lire — déplacer les boutons d'un écran à
   l'autre oblige à relire à chaque fois. */
button.onglet-actif {
  background: var(--primaire, #1a3a6b);
  color: #fff;
  border-color: var(--primaire, #1a3a6b);
  cursor: default;
}
button.onglet-actif:hover { opacity: 1; }

/* =====================================================================
   LES DEUX FAMILLES DE LA BARRE — « Ce qui se vend », « Ce qui se règle »

   ELLES DOIVENT SE LIRE COMME DES ONGLETS, pas comme le menu du compte :
   c'est la même rangée, et deux façons de dessiner une entrée de menu
   dans une même barre font croire à deux niveaux d'importance.

   « DEDANS » N'EST PAS « COURANT ». Quand on travaille dans les Réglages,
   la famille « Ce qui se règle » est soulignée — on sait d'où l'on vient
   — mais elle n'est pas peinte comme l'onglet courant : la page ouverte,
   c'est Réglages, et elle est nommée DANS le déroulant, marquée là.
   Peindre les deux pareil ferait croire qu'on est à deux endroits.
===================================================================== */
.onglet-famille .geste-plus {
  font-weight: inherit;
  letter-spacing: normal;
  line-height: inherit;
  white-space: nowrap;
}

.onglet-famille-ici .geste-plus {
  border-color: var(--primaire, #1a3a6b);
  box-shadow: inset 0 -2px 0 var(--primaire, #1a3a6b);
  font-weight: 600;
}

/* Le déroulant tombe sous SA famille et non au bord de l'écran : les
   deux familles sont à gauche de la barre, et une liste calée à droite
   partirait chercher son propre bouton à l'autre bout. */
.onglet-famille .geste-liste { right: auto; left: 0; }

/* L'UN OU L'AUTRE, JAMAIS LES DEUX. Au-dessus de 760 px, les familles se
   déplient sur place et le sommaire n'a plus de raison d'être. En
   dessous, la rangée défile — un déroulant y serait coupé — et c'est le
   sommaire qui reprend la main, tel qu'il est aujourd'hui. */
@media (min-width: 761px) { .admin-entete .onglets .onglet-sommaire { display: none; } }
@media (max-width: 760px) {
  .admin-entete .onglets .onglet-famille,
  .admin-entete .onglets .onglet-bureau { display: none; }
}

/* LA PAGE OUVERTE, marquée dans la liste. Sans elle on déplie sans
   savoir laquelle des quatre pages on a déjà sous les yeux. */
.geste-liste button.geste-ici {
  font-weight: 600;
  color: var(--primaire, #1a3a6b);
}

/* Un créneau bloqué : visible, mais visiblement hors jeu. */
.creneau-bloque {
  opacity: .72;
  background: repeating-linear-gradient(
    135deg, transparent, transparent 8px,
    rgba(0, 0, 0, .035) 8px, rgba(0, 0, 0, .035) 16px);
}

/* --- champ mot de passe et son oeil -------------------------------------

   Attention a la specificite : `.connexion button { width: 100% }` existe
   plus haut et s'appliquait a l'oeil, qui reclamait alors toute la largeur
   et ecrasait le champ. D'ou `.champ-mdp .oeil`, deux classes, qui passe
   devant. Une regle de largeur generale sur `button` est un piege des qu'un
   bouton cesse d'etre un bouton d'action. */

.champ-mdp {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.25rem;   /* repris de l'input, qui ne le porte plus ici */
}

.champ-mdp input {
  flex: 1 1 auto;
  min-width: 0;          /* sans quoi un flex ne descend jamais sous sa taille propre */
  margin-top: 0;
}

/* 2.75rem : la cible minimale confortable au pouce. Un oeil trop petit se
   rate, et le rater re-masque le mot de passe qu'on essayait de lire. */
.champ-mdp .oeil {
  flex: 0 0 auto;
  width: 2.75rem;
  min-width: 2.75rem;
  padding: 0.5rem 0;
  border: 1px solid var(--trait);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}

.champ-mdp .oeil[aria-pressed="true"] { background: var(--fond-doux); }

/* =====================================================================
   LE TELEPHONE

   Cette feuille n'avait AUCUNE regle mobile : l'administration etait une
   page large affichee telle quelle sur 375 px. Ce n'etait pas mal reglé,
   c'etait absent — et c'est de la que venait tout le reste.
===================================================================== */

@media (max-width: 760px) {
  body.admin { padding: 0.5rem; }

  .admin-entete {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    /* IMPERATIF avec `column` : l'entete porte `flex-wrap: wrap` pour le
       bureau, et une colonne QUI ENVELOPPE ne fait pas une pile — elle
       repartit ses enfants en plusieurs colonnes, chacune reprenant la
       largeur de son contenu. Les onglets debordaient alors de 330 px au
       lieu de defiler. */
    flex-wrap: nowrap;
  }
  /* Un enfant de flex ne descend pas sous la largeur de son contenu sans
     qu'on le lui dise : sans ca, la bande d'onglets pousse le cadre. */
  .admin-entete > * { min-width: 0; }
  .admin-entete h1 { font-size: 1.05rem; }

  /* Les onglets deviennent une BANDE QUI DEFILE, et non des boutons qui
     passent a la ligne. Leur ordre et leur position relative ne bougent
     alors jamais : un menu se retient par sa geometrie avant de se lire,
     et un bouton qui change de place a chaque largeur d'ecran oblige a
     tout relire. La bande touche les deux bords pour qu'on voie qu'elle
     se prolonge. */
  .admin-entete .onglets {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 -0.5rem;
    padding: 0 0.5rem 0.2rem;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;   /* sans quoi le geste emporte la page */
  }
  .admin-entete .onglets::-webkit-scrollbar { display: none; }
  .admin-entete .onglets button { flex: 0 0 auto; scroll-snap-align: start; }

  /* Le compte n'est pas de la navigation : il se range a droite, en petit. */
  .admin-entete .compte { justify-content: flex-end; }
  .admin-entete .compte button { font-size: 0.8rem; padding: 0.35rem 0.6rem; }

  /* Les boutons d'une ligne de planning prennent leur PROPRE ligne. Serres
     a droite du creneau, a trois cote a cote sur 375 px, aucun n'etait
     atteignable au pouce sans viser. */
  #app .creneau .actions {
    flex-basis: 100%;
    margin-left: 0;
    flex-wrap: wrap;
    gap: 0.4rem;
  }
  #app .creneau .actions button { flex: 1 1 auto; }
  /* Le menu garde sa taille : c'est un bouton, pas une action. */
  #app .creneau .actions .geste-menu { flex: 0 0 auto; }
  #app .creneau .geste-liste { min-width: 60vw; }

  /* Le formulaire de connexion colle aux bords plutot que de flotter. */
  .connexion { margin: 1rem auto; padding: 1rem; }
}

/* Le doigt n'est pas la souris. 44 px est la plus petite cible qu'on
   atteint sans viser — en dessous, on rate, et rater un bouton d'annulation
   ou de remboursement n'est pas anodin. */
@media (pointer: coarse) {
  body.admin button,
  body.admin select,
  body.admin input:not([type="checkbox"]):not([type="radio"]) {
    min-height: 44px;
  }

  /* 16 px au moins : en dessous, iOS zoome des qu'on entre dans le champ,
     et il ne dezoome pas en sortant. La page reste de travers pour le
     reste de la session. */
  body.admin input,
  body.admin select,
  body.admin textarea { font-size: 16px; }

  /* Les cases a cocher gardent leur taille, mais leur etiquette devient
     la cible : on coche « samedi » en visant le mot, pas le carre. */
  body.admin .jour-case { min-height: 44px; padding: 0.3rem 0.7rem; }
}

/* --- un bouton qui n'a pas l'air d'un bouton ----------------------------

   « Mot de passe oublie ? » et « Retour a la connexion » sont des issues,
   pas des actions. Leur donner l'allure d'un bouton plein les mettrait au
   meme rang que « Se connecter », qui est ce qu'on veut faire. */

.connexion button.lien {
  width: 100%;
  margin-top: 0.6rem;
  border: none;
  background: none;
  color: var(--primaire);
  text-decoration: underline;
  font-size: 0.9rem;
  cursor: pointer;
}
.connexion button.lien:hover { opacity: 0.75; }

/* Une bonne nouvelle ne se lit pas en rouge. */
/* UNE PANNE, ET NON UNE TACHE. Le rouge plein, toute la largeur, en
   tete d'ecran : ce bandeau dit que les chiffres au-dessous sont faux.
   Une alerte de cette gravite ne se range pas dans une pastille. */
.panne {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border-radius: 8px;
  background: #fee2e2;
  border: 1px solid #dc2626;
  color: #7f1d1d;
  font-weight: 600;
  line-height: 1.45;
}

.reussite {
  margin: 0 0 0.9rem;
  padding: 0.6rem 0.8rem;
  border-radius: 6px;
  background: #ecfdf5;
  border: 1px solid #34d399;
  color: #065f46;
  font-size: 0.9rem;
}

/* --- la recherche -------------------------------------------------------

   Elle occupe toute la largeur qu'on lui laisse : on y tape un nom entier,
   un email, un numero de telephone. Un champ etroit obligerait a faire
   defiler sa propre saisie pour la relire. */

/* `flex-basis` s'applique a l'axe PRINCIPAL. En rangee (bureau) c'est une
   largeur ; en colonne (telephone) c'est une HAUTEUR — et un `16rem` posait
   256 px de vide sous un champ de 44 px. `auto` laisse le contenu decider
   des deux cotes. */
.chercheur { flex: 1 1 auto; min-width: 0; }

.chercheur input {
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--trait);
  border-radius: 999px;
  font: inherit;
  background: var(--fond-doux);
}
.chercheur input:focus {
  outline: 2px solid var(--primaire);
  outline-offset: 1px;
  background: #fff;
}

/* Le jour, dans une liste de resultats qui traverse les semaines : sans lui
   on lit « 18:00 » sans savoir de quel jour il s'agit. */
.separateur-jour {
  list-style: none;
  margin: 0.9rem 0 0.2rem;
  padding: 0;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gris);
  border-bottom: none;
}

/* --- les trois chiffres de la journee -----------------------------------

   Ce qu'on regarde en arrivant, avant le detail : combien de groupes,
   combien de personnes, et ce qu'il reste a demander au comptoir. Ce
   dernier est le seul qui coute de l'argent quand on l'oublie — il se
   detache donc. */

/* Ces trois pastilles sont decrites plus bas, une seule fois : le meme
   bloc etait ecrit deux fois dans ce fichier, avec des oranges
   differents. Le second gagnait, le premier ne servait a rien — et le
   jour ou l'on retouchait le premier, rien ne bougeait a l'ecran. */

/* --- les trois chiffres de la journee -----------------------------------

   Ce qu'on veut savoir en ouvrant le logiciel : combien de groupes, combien
   de personnes, et ce qu'il reste a encaisser. Le dernier est le seul qui
   demande une action — il est donc le seul colore. */

.chiffres {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem;
}

.chiffre {
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--trait);
  border-radius: 999px;
  background: var(--fond-doux);
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
}

/* « Du » : de l'argent a demander aujourd'hui, et qui s'oublie. */
.chiffre.du {
  background: #fef3c7;
  border-color: #f59e0b;
  color: #92400e;
}

/* Sur telephone, les trois chiffres tiennent sur toute la largeur plutot
   que de se serrer a trois par ligne. */
@media (max-width: 420px) {
  .chiffre { flex: 1 1 100%; text-align: center; }
}

/* --- le nom d'un client, qui ouvre sa fiche ------------------------------

   Un bouton qui doit se lire comme un titre : c'est le nom qui compte, pas
   le fait que ce soit cliquable. Le souligne au survol suffit a le dire. */

button.nom-cliquable {
  display: block;
  width: auto;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--texte);
  text-align: left;
  cursor: pointer;
}
button.nom-cliquable:hover { text-decoration: underline; color: var(--primaire); }
button.nom-cliquable:focus-visible { outline: 2px solid var(--primaire); outline-offset: 2px; }

/* Au doigt, le nom doit rester une cible confortable sans devenir un pave. */
@media (pointer: coarse) {
  body.admin button.nom-cliquable { min-height: 2.2rem; }
}

/* --- les creneaux bloques, replies --------------------------------------

   Un blocage n'est pas un evenement de la journee, c'est une ABSENCE
   d'evenement : ca se resume en un chiffre. Etales ligne a ligne, ils
   occupaient la moitie du planning en repetant « rien ici ». */

li.bloques {
  list-style: none;
  padding: 0;
  border-bottom: 1px solid var(--trait);
}

button.replier {
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  padding: 0.55rem 0;
  font: inherit;
  font-size: 0.85rem;
  color: var(--gris);
  cursor: pointer;
}
button.replier::before { content: '▸ '; }
button.replier[aria-expanded="true"]::before { content: '▾ '; }
button.replier:hover { color: var(--texte); }

.bloques-detail { list-style: none; margin: 0; padding: 0 0 0.4rem; }
.bloques-detail .creneau:last-child { border-bottom: none; }

/* --- la feuille du jour, sur papier --------------------------------------

   Elle n'existe QUE sur papier : a l'ecran elle doublerait ce qu'on voit
   deja. Et widget.css cache `h2` a l'impression — d'ou les balises propres
   a la feuille plutot que des titres ordinaires. */

.feuille { display: none; }

@media print {
  /* Tout disparait sauf elle. */
  body.admin > #app, body.admin > dialog { display: none !important; }
  body.admin .feuille { display: block !important; }

  body { padding: 0; font-size: 11pt; }

  .feuille-titre {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 0.4rem;
    margin-bottom: 0.6rem;
    border-bottom: 2px solid #000;
  }
  .feuille-titre strong { font-size: 1.2em; }

  .feuille-table { width: 100%; border-collapse: collapse; }
  .feuille-table th {
    text-align: left;
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid #000;
    padding: 0.25rem 0.35rem;
  }
  .feuille-table td {
    padding: 0.45rem 0.35rem;
    border-bottom: 1px solid #bbb;
    vertical-align: top;
  }
  /* Une seance ne se coupe jamais entre deux pages : la moitie d'une ligne
     en bas de feuille est une ligne qu'on ne lit pas. */
  .feuille-table tr { break-inside: avoid; }

  .col-heure { font-weight: 700; white-space: nowrap; }
  .col-nb, .col-reste { text-align: right; white-space: nowrap; }
  .col-notes { font-style: italic; }
  .petit { font-size: 0.85em; color: #444; }

  .feuille-total {
    margin-top: 0.8rem;
    padding-top: 0.4rem;
    border-top: 2px solid #000;
    font-weight: 700;
  }
}

/* --- la loupe -----------------------------------------------------------

   Le champ de recherche occupait une ligne entiere de l'entete pour un
   geste de dix secondes par jour. Replie derriere une loupe, il rend cette
   ligne au planning — ce qui compte sur un ecran de telephone, ou tout ce
   que l'entete prend, le contenu le perd. */

button.loupe {
  flex: 0 0 auto;
  width: 2.75rem;
  min-width: 2.75rem;
  padding: 0.4rem 0;
  border: 1px solid var(--trait);
  border-radius: 8px;
  background: transparent;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}
button.loupe[aria-expanded="true"] {
  background: var(--primaire);
  border-color: var(--primaire);
}
button.loupe:hover { background: var(--fond-doux); }
button.loupe[aria-expanded="true"]:hover { background: var(--primaire); }

/* --- la grille tarifaire ------------------------------------------------

   Une ligne = un nombre de joueurs et son prix. Les deux champs cote a cote
   plutot que l'un sous l'autre : on lit « 4 joueurs — 95 € » d'un trait,
   comme on le dirait. */

.grille-tarifs { margin-top: 1rem; }

.grille-ligne {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}
.grille-ligne input {
  width: 5.5rem;
  flex: 0 0 auto;
  margin: 0;
  padding: 0.45rem;
  border: 1px solid var(--trait);
  border-radius: 6px;
  font: inherit;
}
.grille-ligne .unite { color: var(--gris); font-size: 0.85rem; }
.grille-ligne button.lien { width: auto; margin: 0 0 0 auto; font-size: 0.8rem; }

/* Au doigt, la ligne s'aere : trois champs serres sur 390 px se ratent. */
@media (max-width: 420px) {
  .grille-ligne input { width: 4.5rem; }
  .grille-ligne button.lien { flex: 0 0 auto; }
}

/* --- le bandeau « nouvelle version » -------------------------------------

   En haut, sur toute la largeur, et il NE recharge PAS tout seul : une page
   qui se recharge d'elle-meme efface une saisie en cours. On propose. */

.bandeau-version {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.6rem 0.8rem;
  background: #1a3a6b;
  color: #fff;
  font-size: 0.9rem;
  text-align: center;
}
.bandeau-version button { flex: 0 0 auto; }

/* LA VERSION, EN PETIT.

   Discrete par construction : elle n'a d'usage que le jour ou un defaut est
   signale, et ce jour-la on la lit a voix haute au telephone. */
.compte .version {
  align-self: center;
  font-size: 0.75rem;
  font-family: ui-monospace, monospace;
  color: #7a8699;
  letter-spacing: 0.02em;
}

/* =====================================================================
   LES CHIFFRES

   Quatre grands nombres, chacun sous son nom et au-dessus de sa
   definition. La definition n'est pas decorative : « 440 € » ne veut
   rien dire tant qu'on ne sait pas si c'est encaisse ou facture.
===================================================================== */

.mois-barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.2rem;
}
.mois-titre { margin: 0; font-size: 1.3rem; }

.cartes {
  display: grid;
  /* 11rem : les quatre tiennent sur une ligne des 800 px. A 13rem elles se
     cassaient en 3 + 1, et la carte esseulee se lisait comme un total. */
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.8rem;
}
.carte {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.9rem 1rem;
  border: 1px solid #dfe4ec;
  border-radius: 0.6rem;
  background: #fbfcfe;
}
.carte-titre { font-size: 0.82rem; color: #6b7686; text-transform: uppercase; letter-spacing: 0.04em; }
.carte-valeur { font-size: 1.9rem; line-height: 1.1; color: #1a3a6b; }
.carte-aide { font-size: 0.78rem; color: #6b7686; }

.notes { margin: 1rem 0 0; padding-left: 1.1rem; font-size: 0.9rem; color: #4a5464; }
.notes .du { color: #a3560f; font-weight: 600; }

.tableau { width: 100%; border-collapse: collapse; margin-top: 0.5rem; font-size: 0.92rem; }
.tableau th, .tableau td { padding: 0.5rem 0.6rem; border-bottom: 1px solid #e6eaf0; text-align: left; }
.tableau th { font-size: 0.78rem; color: #6b7686; text-transform: uppercase; letter-spacing: 0.03em; }
.tableau .nombre { text-align: right; font-variant-numeric: tabular-nums; }
/* Aussi dans la colonne des noms : « KevinPas d’heures au contrat »
   se lisait d’un seul tenant. */
.tableau td .details, .tableau th .details {
  display: block; font-size: 0.78rem; color: #a3560f; font-weight: 400;
}

/* Le calendrier. La hauteur de la barre dit le chiffre du jour, l'echelle
   etant le meilleur jour du mois — une barre pleine veut donc dire « le
   meilleur », jamais « beaucoup » dans l'absolu. */
.calendrier {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.3rem;
  margin-top: 0.5rem;
}
.cal-entete { text-align: center; font-size: 0.75rem; color: #6b7686; padding-bottom: 0.2rem; }
.cal-vide { min-height: 1px; }
.cal-jour {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  min-height: 4.4rem;
  /* La marge du bas est celle de la barre : le montant ne descend jamais
     dedans, quelle que soit la hauteur de la barre. */
  padding: 0.35rem 0.4rem 1.3rem;
  border: 1px solid #e6eaf0;
  border-radius: 0.4rem;
  background: #fff;
  cursor: pointer;
  font: inherit;
  text-align: left;
  overflow: hidden;
}
.cal-jour:hover { border-color: #1a3a6b; }
.cal-jour.rempli { background: #f4f7fc; }
/* Le texte passe DEVANT la barre : sans cela, un bon jour — donc une barre
   haute — masquait justement le montant qu'on venait lire. */
.cal-numero { position: relative; z-index: 1; font-size: 0.78rem; color: #6b7686; }
.cal-montant {
  position: relative; z-index: 1;
  font-size: 0.82rem; font-weight: 600; color: #1a3a6b;
  font-variant-numeric: tabular-nums;
}
.cal-socle {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.1rem;
  z-index: 0;
  display: flex;
  align-items: flex-end;
}
.cal-jauge { width: 100%; background: #cddcf3; }

@media (max-width: 760px) {
  .cartes { grid-template-columns: 1fr 1fr; }
  .carte-valeur { font-size: 1.5rem; }
  .cal-jour { min-height: 3.2rem; }
  .cal-montant { font-size: 0.7rem; }
  /* Un tableau de six colonnes ne rentre pas : il defile chez lui, la
     page ne defile jamais lateralement. */
  .tableau { display: block; overflow-x: auto; white-space: nowrap; }
}

/* =====================================================================
   LES BONS PARTENAIRES

   Trois etats, trois couleurs, et surtout : « pas encore controle » n'a
   PAS la couleur de « conforme ». Les confondre ferait passer pour
   verifie un bon que personne n'a regarde — et un bon jamais saisi chez
   le partenaire est une seance jouee sans etre payee.
===================================================================== */

.badge.bon-attendu   { background: #fff4e0; color: #8a5a00; border: 1px solid #f0d9ac; }
.badge.bon-conforme  { background: #e9f6ec; color: #1f6b33; border: 1px solid #bfe3c9; }
.badge.bon-different { background: #fdeaea; color: #9c1f1f; border: 1px solid #f2bcbc; }

/* Le bouton d'action passe en rouge quand l'ecart est constate : sur un
   planning charge, c'est la seule ligne qui doit attirer l'oeil. */
.actions button.alerte { border-color: #c62828; color: #9c1f1f; font-weight: 600; }

/* =====================================================================
   LE MENU DES GESTES RARES

   Dix boutons alignes sur une ligne de seance, tous de la meme taille :
   rien ne disait ce qui etait courant et ce qui etait rare, et il fallait
   lire les dix libelles a chaque ligne. Il en reste trois, et le reste
   tient derriere ce point de suspension.

   LA LISTE S'OUVRE PAR-DESSUS, en absolu : poussee dans le flux, elle
   ferait sauter toutes les lignes en dessous a chaque ouverture — on
   perdrait des yeux la seance qu'on etait en train de traiter.

   ALIGNEE A DROITE (`right: 0`) parce que le bouton est en fin de ligne :
   ouverte a gauche, elle sortirait de l'ecran sur un portable.
   ===================================================================== */
.geste-menu { position: relative; display: inline-flex; }

/* Le compte : son propre menu, aligne a droite comme les autres, mais
   sans cadre — c'est une identite, pas une commande. */
.compte-menu .geste-plus {
  border: 0;
  background: none;
  color: #55606b;
  font-weight: 400;
  font-size: 0.88rem;
  letter-spacing: 0;
}
.compte-menu .geste-plus::after { content: " \25BE"; font-size: 0.7em; }
.compte-menu .geste-plus:hover { text-decoration: underline; }

/* LE LOGO DANS L'APERCU, A SA PLACE. Il n'y a plus de phrase a cote : on
   le voit la ou il tombera, a la taille reglee. `vertical-align` pour
   qu'il s'assoie sur la ligne de texte plutot que de flotter. */
.apercu-image-logo {
  display: block;
  max-width: 100%;
  height: auto;
}

/* =====================================================================
   LE LOGO SE MANIPULE DANS L'APERCU

   Comme une image dans un texte : on clique, quatre poignees
   apparaissent aux coins ; on tire un coin, il grandit ; on le fait
   glisser, des traits montrent ou il peut se poser.

   LES POIGNEES N'APPARAISSENT QU'UNE FOIS CHOISI. Visibles en
   permanence, elles feraient de chaque apercu un chantier — or l'apercu
   sert d'abord a LIRE le mail.
   ===================================================================== */
.logo-cadre {
  position: relative;
  /* `inline-block` et non `block` : le cadre garde la largeur de son
     image — c'est ce qui permet aux poignees de se poser sur ses vrais
     coins. Mais il occupe SA ligne : rien ne vient se ranger a cote. */
  display: inline-block;
  vertical-align: top;
  line-height: 0;
  margin: 0.3rem 0;
  outline: 1px dashed transparent;
  outline-offset: 3px;
  cursor: grab;
  touch-action: none;
}
.logo-cadre:hover { outline-color: #b9c2d0; }
.logo-cadre.choisi { outline: 1px solid #1f3350; outline-offset: 3px; }

.logo-cadre img { display: block; max-width: 100%; height: auto; }

/* Pendant le deplacement, le logo suit le pointeur : sorti du flux, il ne
   pousse plus le texte a chaque mouvement. */
.logo-cadre.en-vol {
  position: fixed;
  z-index: 40;
  opacity: 0.85;
  pointer-events: none;
  cursor: grabbing;
}

.logo-poignee {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  border: 1px solid #1f3350;
  border-radius: 2px;
  display: none;
  touch-action: none;
}
.logo-cadre.choisi .logo-poignee { display: block; }

/* Les quatre coins, debordant de 5 px pour qu'on les attrape sans viser
   le bord exact de l'image. */
.logo-poignee-no { top: -8px; left: -8px; cursor: nwse-resize; }
.logo-poignee-ne { top: -8px; right: -8px; cursor: nesw-resize; }
.logo-poignee-so { bottom: -8px; left: -8px; cursor: nesw-resize; }
.logo-poignee-se { bottom: -8px; right: -8px; cursor: nwse-resize; }

/* LES DEUX FLECHES, collees au bord droit du logo quand il est choisi.
   Glisser demande de viser une ligne fine en tenant le bouton ; une
   fleche ne rate jamais. */
.logo-fleche {
  position: absolute;
  right: -2.3rem;
  width: 1.9rem;
  min-width: 1.9rem;
  padding: 0.15rem 0;
  font-size: 1rem;
  line-height: 1.2;
  text-align: center;
  display: none;
}
.logo-cadre.choisi .logo-fleche { display: block; }
.logo-fleche-haut { top: 0; }
.logo-fleche-bas { top: 2.1rem; }

/* LES PLACES POSSIBLES, montrees seulement pendant le deplacement. Un
   trait fin par espace entre deux paragraphes ; celui qu'on vise
   s'epaissit. */
.logo-trait {
  display: block;
  height: 2px;
  margin: 0.28rem 0;
  background: #d8dce4;
  border-radius: 2px;
  /* La cible deborde le trait : on vise une ligne de deux pixels, elle
     doit se laisser attraper de loin. */
  box-shadow: 0 0 0 8px rgba(0, 0, 0, 0);
}
.logo-trait.vise { background: #1f3350; height: 4px; }

/* Le reglage de la largeur : le champ et son bouton sur une ligne. */
.logo-largeur {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0.8rem 0 0;
}
.logo-largeur label { margin: 0; }
.logo-largeur .mention { flex: 1 1 100%; margin: 0.2rem 0 0; }

/* =====================================================================
   « A FINIR » — ce qu'on a commence et pas termine.

   EN TETE DE L'ECRAN D'OUVERTURE, avant la journee. Une bordure a gauche
   plutot qu'un fond colore : ce ne sont pas des alertes, ce sont des
   gestes ordinaires restes en suspens. Un cadre rouge le matin use en
   trois jours ; un trait se remarque sans crier.

   DEUX COLONNES, ET LA SECONDE A UNE LARGEUR FIXE. Disposes a la suite,
   le bouton se collait a la fin de la phrase — donc a un endroit
   different sur chaque ligne, et l'oeil devait le chercher. Une largeur
   FIXE et non `auto` : chaque ligne est sa propre grille, et une colonne
   calculee sur son contenu ne s'alignerait pas avec sa voisine.
   ===================================================================== */
.a-faire { list-style: none; margin: 0.4rem 0 1.6rem; padding: 0; }

.a-faire-ligne {
  display: grid;
  /* Deux colonnes de boutons, de largeur fixe : « Traiter » et « Ignorer »
     tombent l'un sous l'autre d'une ligne a la suivante. */
  grid-template-columns: 1fr 8rem 6.5rem;
  align-items: center;
  column-gap: 1rem;
  padding: 0.6rem 0.8rem;
  border-left: 3px solid #c9a227;
  border-bottom: 1px solid #ece8de;
  background: #fffdf7;
}
.a-faire-ligne:last-child { border-bottom: 0; }

/* La photo s'efface toute seule au bout de sept jours : c'est la seule
   qui ait une date de peremption, et elle le montre. */
.a-faire-ligne.type-photo { border-left-color: #b4531f; }

/* UNE COULEUR PAR TYPE DE LIGNE (JP, 12/10/2026) : la seance a traiter en
   bleu, le solde non encaisse en orange — bordure, fond et bouton. On les
   distingue sans lire, et le bouton n'a plus la couleur de ceux des fenetres. */
.a-faire-ligne.type-seance {
  border-left: 4px solid #2563eb;
  background: #eef4ff;
}
.a-faire-ligne.type-seance button.primaire { background: #2563eb; border-color: #2563eb; color: #fff; }
.a-faire-ligne.type-solde {
  border-left: 4px solid #ea580c;
  background: #fff3e8;
}
.a-faire-ligne.type-solde button.primaire { background: #ea580c; border-color: #ea580c; color: #fff; }

/* UN MONTANT N'A PAS DE FLECHES : elles font varier au centime, et un clic de
   trop laissait 0,02 € du sur une seance payee. Les fleches servent au NOMBRE
   de joueurs. */
input.sans-fleches::-webkit-outer-spin-button,
input.sans-fleches::-webkit-inner-spin-button { -webkit-appearance: none; display: none; margin: 0; }
input.sans-fleches { -moz-appearance: textfield; appearance: textfield; }

/* LE TRI : trois boutons, le choisi est plein. */
.a-faire-filtre { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.3rem 0 0.4rem; }
.a-faire-filtre button { white-space: nowrap; }
.a-faire-filtre button[aria-pressed="true"] {
  background: #1f3350; border-color: #1f3350; color: #fff;
}

.a-faire-texte {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.1rem 0.8rem;
  min-width: 0;
}
.a-faire-quoi { font-weight: 600; }
.a-faire-ou { color: #55606b; font-size: 0.9rem; }

/* Le bouton remplit sa colonne : deux « Traiter » l'un au-dessus de
   l'autre doivent avoir exactement la meme largeur. */
.a-faire-ligne button { width: 100%; }

/* Sur telephone, la colonne fixe deviendrait une bande vide : le bouton
   passe sous le texte, sur toute la largeur. */
@media (max-width: 560px) {
  /* Le texte sur toute la largeur, les deux boutons cote a cote dessous. */
  .a-faire-ligne { grid-template-columns: 1fr 1fr; row-gap: 0.5rem; }
  .a-faire-texte { grid-column: 1 / -1; }
}

/* Le titre « A finir » et « Tout ignorer » sur la meme ligne : le geste
   d'ensemble se trouve la ou on lit le nom de la liste. */
.a-faire-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.a-faire-tete h2 { margin-right: auto; }

/* « Rien ne traine » : une phrase calme, pas un cadre vide. */
.etat.calme { color: #3f7d53; }

/* LES PUCES DE FILTRE de la messagerie. Deux rangees : l'etat de lecture,
   puis la nature du fait. Elles se combinent — « a lire » + « annulations »
   est la question qu'on se pose en revenant de trois jours d'absence. */
.filtres { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 0.5rem; }
.filtres .geste-menu { margin-right: 0.15rem; }

/* =====================================================================
   LA MESSAGERIE — les dossiers a gauche, la liste a droite

   C'est la disposition d'Outlook, et c'est voulu : l'exploitant y passe
   sa journee. Les huit natures se lisent d'un coup au lieu de se
   deplier, et les faits se rangent par periode — « hier » se trouve plus
   vite qu'un 23/09.
===================================================================== */
.msg-grille {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: 1.1rem;
  align-items: start;
}
/* LES NATURES SONT LE DETAIL DE LA BOITE DE RECEPTION : en retrait sous
   elle, plus petites, pour qu on lise d abord les trois dossiers et
   ensuite seulement leur decoupage. */
.msg-nature {
  display: block;
  width: 100%;
  border: 0;
  background: none;
  padding: 0.3rem 0.6rem 0.3rem 1.6rem;
  text-align: left;
  font-size: 0.85rem;
  color: #47536b;
  cursor: pointer;
  border-radius: 6px;
}
.msg-nature:hover { background: #eef2f7; }

/* LES GESTES AU BOUT DE LA LIGNE, sur leur propre ligne quand la place
   manque : ils ne doivent jamais pousser le nom du client hors du cadre. */
.msg-gestes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
  margin-top: 0.3rem;
}

/* LE TEXTE D UN ENVOI, REPLIE. `pre` parce qu un mail a ses retours a la
   ligne, et qu un paragraphe recolle les perdrait. */
.msg-corps { margin-top: 0.35rem; }
.msg-corps summary { cursor: pointer; font-size: 0.85rem; color: #1f3350; }
.msg-corps pre {
  margin: 0.4rem 0 0;
  padding: 0.6rem 0.75rem;
  background: #f6f8fb;
  border-radius: 6px;
  white-space: pre-wrap;
  word-break: break-word;
  font: inherit;
  font-size: 0.85rem;
}

/* LA FENETRE DE REPONSE : de quoi ecrire, pas une boite de dialogue. */
dialog:has(.msg-reponse) { width: min(42rem, 95vw); }
.msg-reponse textarea { width: 100%; resize: vertical; }

.msg-dossiers { display: flex; flex-direction: column; gap: 0.1rem; }
/* DES NOMS, PAS DES BOUTONS.

   Huit pastilles empilees dans une colonne se lisent comme huit actions
   a faire, et le dossier ouvert — plein, fonce — criait plus fort que la
   liste qu'il designe. Une messagerie ne montre pas des boutons : elle
   montre une LISTE de noms, et l'endroit ou l'on se trouve s'y voit par
   le GRAS et un fond a peine pose. C'est la ou l'oeil de l'exploitant
   les cherche, puisqu'il passe sa journee dans Outlook. */
.msg-dossier {
  border: 0;
  background: none;
  border-radius: 4px;
  padding: 0.32rem 0.5rem;
  text-align: left;
  width: 100%;
  font-size: 0.9rem;
  color: #1c1c1c;
  white-space: normal;
}
.msg-dossier:hover { background: #eef1f6; text-decoration: none; }
/* LA OU L'ON EST : le gras porte l'information, le fond ne fait que
   poser le bloc. L'inverse — un aplat fonce — se lit comme un bouton
   enfonce, donc comme quelque chose qu'on vient de faire. */
.msg-dossier-ici {
  background: #eaeff6;
  color: #1f3350;
  font-weight: 700;
}
.msg-dossier-ici:hover { background: #e2e9f3; color: #1f3350; }

/* LA NATURE CHOISIE, dans le meme registre, un cran plus discret : c'est
   un filtre pose sur un dossier, pas un dossier. */
.msg-nature-choisie {
  background: #eef2f7;
  color: #1f3350;
  font-weight: 700;
}

.msg-liste { min-width: 0; }
/* LE TITRE DE PERIODE : un repere, pas un titre de section. Il se lit
   quand on descend, il ne coupe pas la liste en morceaux. */
.msg-periode {
  margin: 0.9rem 0 0.25rem;
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8a929c;
  border-bottom: 1px solid #e3e6ec;
  padding-bottom: 0.15rem;
}
.msg-periode:first-of-type { margin-top: 0.2rem; }

/* « VOIR PLUS ANCIEN » : on remonte la messagerie, on ne la commande
   pas. Toute la largeur parce qu'on le vise au pouce sur un telephone,
   et gris parce qu'il n'y a rien a decider — juste a lire plus loin. */
.msg-plus {
  display: block;
  width: 100%;
  margin: 1rem 0 0.4rem;
  padding: 0.75rem;
  background: none;
  border: 1px solid #e3e6ec;
  border-radius: 8px;
  color: #6b7686;
  font: inherit;
  font-size: 0.86rem;
  cursor: pointer;
}
.msg-plus:hover:not(:disabled) { background: #f4f6f9; color: #3c4451; }
.msg-plus:disabled { opacity: 0.6; cursor: default; }

/* SUR TELEPHONE, les dossiers passent au-dessus de la liste et defilent
   en rangee : une colonne de douze rem prendrait le tiers de l'ecran. */
@media (max-width: 760px) {
  .msg-grille { display: block; }
  .msg-dossiers {
    flex-direction: row;
    overflow-x: auto;
    gap: 0.3rem;
    margin-bottom: 0.6rem;
    padding-bottom: 0.3rem;
  }
  .msg-dossier { flex: 0 0 auto; white-space: nowrap; }
}

/* LA DATE AU BOUT DE LA BARRE.

   Elle est declaree `flex: 1 1 auto` dans widget.css : elle s'ETIRAIT donc
   pour remplir la barre, et se retrouvait a droite par accident plutot que
   par choix — sa largeur changeait avec celle de la fenetre et avec le
   nombre de boutons a cote. On la fixe a sa taille et on la pousse.

   Le selecteur porte le type ET la classe pour passer devant celui de
   widget.css, qui est plus precis qu'une simple classe. */
.barre input[type="date"].barre-date {
  flex: 0 0 auto;
  margin-left: auto;
  /* EN HAUT a droite, et non a mi-hauteur. La barre centre ses elements ;
     des que le groupe de commandes se replie sur deux rangees, la date
     descendait au milieu et ne se lisait plus comme un coin. */
  align-self: flex-start;
}

/* LE GROUPE DES COMMANDES. Il prend la place qui reste et passe a la
   ligne tout seul ; la date, elle, garde son coin. */
/* =====================================================================
   LE CALENDRIER : LE PANNEAU A GAUCHE, LE PLANNING A DROITE
===================================================================== */
.planning-grille {
  display: grid;
  grid-template-columns: 15.5rem minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}
/* LE PLANNING NE DOIT PAS POUSSER LE PANNEAU.

   `minmax(0, 1fr)` autorise la COLONNE a retrecir, mais l'element qui
   s'y trouve garde `min-width: auto` — c'est-a-dire la largeur de son
   contenu. Quatre colonnes de cases debordaient donc par-dessus le
   calendrier, dont il ne restait qu'une bande de chiffres a gauche. */
.planning-grille > main { min-width: 0; }

.calp-panneau {
  border: 1px solid #e3e6ec;
  border-radius: 10px;
  padding: 0.7rem;
  /* LE PANNEAU SUIT LA PAGE : un samedi fait quatre ecrans, et changer de
     jour ne doit pas demander de remonter.

     IL SE CALE SOUS CE QUI EST FIGE, dont on mesure la hauteur : le
     bandeau du banc plus l'entete, qui fait deux ou trois lignes selon la
     largeur. Une valeur devinee — 9 rem — le faisait passer dessous, et
     son mois disparaissait a moitie. Le repli reste la pour le cas ou la
     mesure n'aurait pas encore eu lieu. */
  position: sticky;
  top: calc(var(--haut-fige, 9rem) + 0.5rem);
}

.calp-tete {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  margin-bottom: 0.4rem;
}
/* « septembre 2026 » prend UNE majuscule : capitaliser chaque mot
   donnerait « Septembre 2026 » au milieu d'une phrase francaise. */
.calp-mois { flex: 1 1 auto; font-size: 0.92rem; }
.calp-mois::first-letter { text-transform: uppercase; }
.calp-fleche {
  border: 0;
  background: none;
  padding: 0.1rem 0.4rem;
  font-size: 1.1rem;
  line-height: 1;
  color: #55606b;
}
.calp-fleche:hover { color: #1f3350; text-decoration: none; }

.calp-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
/* LA GRILLE TIENT DANS SON PANNEAU, a n'importe quelle largeur. Huit colonnes
   (la semaine, puis sept jours) de 1,85 rem faisaient ~15 rem dans un panneau
   de 11,6 rem utiles : la derniere colonne, le dimanche, passait SOUS le
   planning. Colonnes egales (`table-layout: fixed`), et des pastilles qui
   s'adaptent a la colonne au lieu de la depasser. */
.calp-table th {
  font-size: 0.66rem;
  font-weight: 600;
  color: #8a929c;
  padding: 0.1rem 0;
}
.calp-table td { padding: 0.05rem; text-align: center; }
/* Les numeros de semaine : presents, mais en retrait. On les lit quand on
   les cherche, jamais avant. */
.calp-sem {
  font-size: 0.62rem;
  color: #b3b9c2;
  padding-right: 0.3rem !important;
  width: 1.5rem;
  font-variant-numeric: tabular-nums;
}

.calp-jour {
  display: block;
  width: 100%;
  max-width: 1.85rem;
  aspect-ratio: 1 / 1;
  height: auto;
  margin: 0 auto;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: none;
  font-size: 0.78rem;
  color: #1c1c1c;
  font-variant-numeric: tabular-nums;
}
.calp-jour:hover { background: #eef1f6; text-decoration: none; }
/* Les jours du mois d'a cote restent CLIQUABLES — on passe souvent du 31
   au 1er — mais pales : ils ne sont pas dans le mois qu'on lit. */
.calp-hors { color: #c3c8d0; }
/* AUJOURD'HUI est cercle, LE JOUR CHOISI est plein : les deux coexistent
   des qu'on regarde un autre jour, et il faut les distinguer sans les
   confondre. */
.calp-aujourdhui { border-color: #1f3350; font-weight: 700; }
.calp-choisi {
  background: #1f3350;
  border-color: #1f3350;
  color: #fff;
  font-weight: 700;
}
.calp-choisi:hover { background: #1f3350; color: #fff; }

.calp-salles { margin-top: 0.8rem; border-top: 1px solid #e3e6ec; padding-top: 0.6rem; }
.calp-salles-titre {
  margin: 0 0 0.35rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8a929c;
}
.calp-salle {
  display: flex;
  align-items: start;
  gap: 0.4rem;
  font-size: 0.84rem;
  padding: 0.15rem 0;
  cursor: pointer;
}
.calp-salle input { margin-top: 0.15rem; flex: 0 0 auto; }

/* =====================================================================
   LES CASES — une colonne par salle
===================================================================== */
/* LES COLONNES DEFILENT, ELLES NE PASSENT PAS A LA LIGNE.

   En grille, la quatrieme salle retombait sous la premiere : on ne
   pouvait plus lire une rangee d'heures en travers, et c'est pourtant la
   seule raison d'etre de cet affichage — « qui a encore de la place a
   14 h ». Une salle de plus ne doit pas casser la lecture, juste
   l'allonger vers la droite. */
.cases-grille {
  display: flex;
  gap: 0.6rem;
  align-items: start;
  overflow-x: auto;
  padding-bottom: 0.4rem;
}
/* ELLES SE RESSERRENT AVANT DE FAIRE DEFILER. A 11 rem fixes, quatre
   salles reclamaient 733 px pour 716 disponibles : la quatrieme etait
   coupee de dix-sept pixels, ce qui a l'air d'un defaut et non d'un
   choix. Elles peuvent donc retrecir — mais pas sous 9,5 rem, largeur en
   dessous de laquelle « 0 reservee / 8 disponibles » se coupe en deux.
   Passe cette limite, c'est la rangee qui defile. */
.cases-colonne { flex: 1 1 11rem; min-width: 9.5rem; }
.cases-salle {
  margin: 0 0 0.4rem;
  padding: 0.35rem 0.5rem;
  background: #1f3350;
  color: #fff;
  border-radius: 6px;
  font-size: 0.82rem;
  text-align: center;
}
.case-creneau {
  position: relative;
  border: 1px solid #e3e6ec;
  border-radius: 8px;
  margin-bottom: 0.45rem;
  overflow: hidden;
}
.case-heure {
  background: #eef1f6;
  padding: 0.2rem 0.5rem;
  font-weight: 700;
  font-size: 0.86rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.case-corps {
  display: flex;
  flex-direction: column;
  padding: 0.4rem 0.5rem;
  font-size: 0.8rem;
  color: #55606b;
}
/* CE QUI RESTE est ce qu'on cherche : c'est la seule ligne en gras. */
.case-restantes { font-weight: 600; color: #1c1c1c; }
/* Les noms passent AU-DESSUS du bouton qui couvre la carte : sans cela
   on ne pourrait plus les selectionner pour les recopier. */
.case-noms {
  position: relative;
  z-index: 2;
  margin: 0 0 0.4rem;
  padding: 0 0.5rem;
  list-style: none;
  font-size: 0.8rem;
}
.case-noms li { padding: 0.05rem 0; }

/* UN CRENEAU PLEIN reste lisible mais s'efface : il n'appelle aucun geste.
   UN CRENEAU BLOQUE le dit avec son motif. */
.case-pleine .case-heure { background: #f5f2ec; color: #8a929c; }
/* UNE CASE RESERVEE : vert clair, meme pleine (la regle vient APRES la
   precedente, a specificite egale : c'est elle qui l'emporte). */
.case-reservee { background: #ecfdf3; border-color: #a7e3c2; }
.case-reservee .case-heure { background: #cdeedb; color: #14532d; }
.case-bloquee { opacity: 0.72; }
.case-motif { margin: 0; padding: 0 0.5rem 0.4rem; font-size: 0.76rem; color: #8a929c; }

/* LA CARTE ENTIERE OUVRE LE DETAIL quand elle porte des reservations.

   Le bouton est ETENDU SUR TOUTE LA CARTE plutot que pose dessous : la
   cible est aussi grande que ce qu'on lit. Il passe SOUS le + (z-index),
   sinon il l'avalerait — et le + ne reserve pas la meme chose que le
   clic sur la carte. */
.case-cliquable { cursor: pointer; }
.case-cliquable:hover { border-color: #1f3350; }
.case-ouvrir {
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 0;
  background: none;
  padding: 0;
  border-radius: 8px;
}
.case-ouvrir:focus-visible { outline: 2px solid #1f3350; outline-offset: -2px; }


/* LE + EN HAUT A DROITE DE LA CARTE, toujours a la meme place : on
   l'atteint sans le chercher, d'une carte a l'autre. */
.case-plus {
  position: absolute;
  top: 0.12rem;
  right: 0.3rem;
  border: 0;
  background: #1b7f4b;
  color: #fff;
  border-radius: 5px;
  width: 1.4rem;
  height: 1.4rem;
  padding: 0;
  line-height: 1;
  font-size: 1rem;
  font-weight: 700;
}
.case-plus:hover { background: #156239; text-decoration: none; }

/* =====================================================================
   SUR TELEPHONE, NI PANNEAU NI CASES

   Le panneau prendrait la moitie de l'ecran, et cinq colonnes sur 375 px
   ne se lisent pas. La date se rechoisit donc dans le champ de la barre,
   qui reste la pour ca — et que l'ordinateur, lui, n'a plus besoin de
   montrer.
===================================================================== */
@media (min-width: 761px) {
  .barre input[type="date"].barre-date { display: none; }
}
@media (max-width: 760px) {
  .planning-grille { display: block; }
  .calp-panneau { display: none; }
}

/* « NOUVELLE RESERVATION » GARDE SON ALLURE DE BOUTON PRINCIPAL : c'est
   le geste du comptoir, et il doit se voir comme avant — seul son clic
   change, en posant la question du nombre de salles. */
/* LE « RESERVER » D'UNE LIGNE reste un bouton de ligne : c'est la
   rangee d'actions du creneau, et un bouton qui se distinguerait des
   autres ferait croire a un geste d'une autre nature. */
.resa-ligne .geste-plus {
  font-weight: inherit;
  letter-spacing: normal;
  line-height: inherit;
  white-space: nowrap;
}
.resa-ligne .geste-liste { right: 0; left: auto; }

.resa-menu .geste-plus {
  background: var(--primaire, #1a3a6b);
  border: 1px solid var(--primaire, #1a3a6b);
  color: #fff;
  border-radius: 6px;
  padding: 0.5rem 0.9rem;
  font-weight: 600;
  letter-spacing: normal;
  line-height: inherit;
  white-space: nowrap;
}
.resa-menu .geste-plus:hover { opacity: 0.92; text-decoration: none; }
.resa-menu .geste-liste { right: auto; left: 0; }

.barre-gauche {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 auto;
  min-width: 0;
}

/* LA BARRE RESTE SUR UNE LIGNE, et c'est le groupe qui cede. Lui laisser
   le droit de passer a la ligne envoyait la DATE en dessous : en flex,
   les elements sont places avant d'etre retrecis, et le groupe reclamait
   toute la largeur. En `nowrap`, il retrecit — `min-width: 0` le lui
   permet — et se replie tout seul sur deux rangees, pendant que la date
   garde son coin en haut a droite. (Sous 420 px, widget.css redonne le
   droit de passer a la ligne : la, c'est ce qu'il faut.) */

.puce {
  border: 1px solid #ddd8cd;
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  font-size: 0.86rem;
  background: #fff;
  color: #55606b;
}
.puce:hover { border-color: #1f3350; text-decoration: none; }

/* L'actif est PLEIN, pas seulement encadre : sur une rangee de sept puces,
   une bordure un peu plus foncee ne se distingue pas d'un survol. */
.puce-active {
  background: #1f3350;
  border-color: #1f3350;
  color: #fff;
  font-weight: 500;
}
.puce-active:hover { color: #fff; }

/* =====================================================================
   LE SOMMAIRE DE « GERER »

   PREMIERE VERSION : six cartes encadrees, titres en capitales, deux
   titres de section et deux phrases d'aide. « Un foutoir de premiere,
   illisible » — et c'etait merite : six liens ne valent pas six boites.

   DEUX FAUTES, dont une bete. La bete d'abord : `.carte-titre` existait
   DEJA dans cette feuille, en petit gris capitales. Ma regle portait le
   meme nom, l'ancienne gagnait, et les titres criaient. Une classe qui
   existe deja est un piege qu'on ne voit pas en relisant son propre code.

   L'autre faute est de fond : des cadres pour ranger, la ou il fallait
   simplement aligner. On lit six lignes plus vite que six boites, et
   deux colonnes tiennent les six sans qu'aucune ne reste orpheline sur
   sa rangee.
   ===================================================================== */
.sommaire {
  display: grid;
  gap: 0 2rem;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  margin: 0.2rem 0 1.4rem;
}

/* Des lignes, pas des boites : un filet les separe, et rien d'autre. */
.tuile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  width: 100%;
  text-align: left;
  border: 0;
  border-top: 1px solid #ece8de;
  border-radius: 0;
  background: none;
  padding: 0.6rem 0.4rem;
}

.tuile:hover, .tuile:focus-visible {
  background: #f7f5f0;
  text-decoration: none;
}

.tuile-nom { font-weight: 600; font-size: 0.98rem; color: #1f3350; }
/* Deux lignes au plus : la ceinture, si une premiere phrase est longue.
   Sans elle, une tuile bavarde decale toute sa rangee. */
.tuile-aide {
  font-size: 0.86rem;
  color: #6b7686;
  line-height: 1.35;
  font-weight: 400;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Le titre de famille : discret, il nomme sans annoncer. Un `h2 .section`
   de pleine taille pour trois liens pesait plus lourd que les liens. */
.famille {
  margin: 1.2rem 0 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7686;
}
.famille + .sommaire { margin-top: 0.3rem; }


.geste-plus {
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  padding-left: 0.7rem;
  padding-right: 0.7rem;
}

/* Ouvert vers le haut quand le bas manque de place — voir `menuGestes`.
   `bottom` plutot que `top` : la liste grandit alors vers le haut, et
   son bord bas reste colle au bouton quel que soit son nombre
   d'entrees. */
.geste-liste-haut {
  top: auto !important;
  bottom: calc(100% + 0.25rem);
}

.geste-liste {
  position: absolute;
  top: calc(100% + 0.25rem);
  right: 0;
  z-index: 20;
  min-width: 12rem;
  display: flex;
  flex-direction: column;
  padding: 0.25rem;
  background: #fff;
  border: 1px solid #d8d3c8;
  border-radius: 0.4rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 12px 28px -12px rgba(0, 0, 0, 0.3);
}

/* Des lignes de menu, pas des boutons : un menu fait de boutons encadres
   se lit comme une barre d'outils de plus, et on recommence a compter. */
.geste-liste button {
  border: 0;
  background: none;
  text-align: left;
  width: 100%;
  padding: 0.45rem 0.6rem;
  border-radius: 0.25rem;
  font-size: 0.92rem;
  white-space: nowrap;
}

.geste-liste button:hover,
.geste-liste button:focus-visible { background: #f1efe9; text-decoration: none; }

/* SUPPRIMER ET REMBOURSER SE DISTINGUENT, et sont en bas. Ils ne se
   rattrapent pas : les poser au milieu d'une liste ou l'on descend vite
   est une faute qui coute de l'argent ou une seance. */
/* La version : une note de bas de menu, pas une commande. */
.geste-note {
  margin: 0.1rem 0 0.3rem;
  padding: 0.2rem 0.6rem;
  font-size: 0.76rem;
  color: #8a929c;
  border-bottom: 1px solid #ece8de;
}

.geste-liste button.grave { color: #9c1f1f; }
.geste-liste button.grave:hover,
.geste-liste button.grave:focus-visible { background: #fbeeee; }

/* Un trait au-dessus du premier geste grave : la frontiere se voit avant
   d'etre lue. */
.geste-liste button.grave + button.grave { border-top: 0; }
.geste-liste button:not(.grave) + button.grave {
  border-top: 1px solid #e8e3d9;
  margin-top: 0.25rem;
  padding-top: 0.5rem;
}


/* UN AVERTISSEMENT DANS UN TEXTE D'AIDE. `.alerte` n'existait que sur les
   boutons : posee sur une mention, la classe ne faisait rien du tout et
   l'avertissement se lisait comme le reste — c'est-a-dire pas du tout. */
.mention.alerte {
  color: #9c1f1f;
  border-left: 3px solid #c62828;
  padding-left: 0.6rem;
}

.verdict {
  margin: 0.6rem 0;
  padding: 0.7rem 0.8rem;
  border-radius: 0.4rem;
  font-size: 0.92rem;
  line-height: 1.4;
}
.verdict.bon     { background: #e9f6ec; color: #1f6b33; border: 1px solid #bfe3c9; }
.verdict.mauvais { background: #fdeaea; color: #9c1f1f; border: 1px solid #f2bcbc; font-weight: 600; }
.verdict .details { display: block; margin-top: 0.4rem; font-weight: 400; }

/* Les fiches partenaires, dans les Reglages. Une par bloc, la question
   d'abord : c'est la seule qui change le comportement du logiciel. */
.partenaires { display: flex; flex-direction: column; gap: 1rem; margin-top: 0.8rem; }
.partenaire {
  padding: 0.9rem 1rem;
  border: 1px solid #dfe4ec;
  border-radius: 0.5rem;
  background: #fbfcfe;
}
.partenaire h3 { margin: 0 0 0.5rem; font-size: 1.05rem; }
.partenaire .question { margin: 0 0 0.4rem; font-weight: 600; }
.partenaire .details { display: block; margin: 0.3rem 0 0.8rem; font-size: 0.8rem; color: #6b7686; }
.partenaire label { display: block; margin-bottom: 0.6rem; }
.partenaire textarea { width: 100%; }

.choix { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.choix-option {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0.35rem 0.6rem;
  border: 1px solid #dfe4ec;
  border-radius: 0.35rem;
  background: #fff;
  cursor: pointer;
}
.choix-option input { margin: 0; }
.choix-option:has(input:checked) { border-color: #1a3a6b; background: #eef3fb; font-weight: 600; }

/* « Je ne sais pas encore » : ni vert ni rouge. Il reste une question a
   poser au partenaire, et peut-etre de l'argent a recuperer. */
.verdict.inconnu { background: #fff4e0; color: #8a5a00; border: 1px solid #f0d9ac; }

/* Le code qu'on n'a pas encore. Rouge, comme « different » : dans les deux
   cas il y a de l'argent en jeu et un geste a faire avant la seance. */
.badge.bon-sans_code { background: #fdeaea; color: #9c1f1f; border: 1px solid #f2bcbc; }

/* La case qui engage : elle deplace la decision de l'exploitant vers
   l'accord signe. Elle doit se distinguer des trois choix au-dessus. */
.choix-option.bascule { display: flex; margin: 0.8rem 0 0.2rem; border-color: #c6d2e6; }
.choix-option.bascule:has(input:checked) { background: #eef3fb; }

/* LA LISTE DU MATIN. Le code en gros : c'est lui qu'on recopie chez le
   partenaire, un onglet a cote. Tout le reste n'est que reperage. */
.a-valider { margin-top: 1.2rem; }
.a-valider ul { list-style: none; padding: 0; margin: 0.5rem 0 0; }
.a-valider li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  margin-bottom: 0.5rem;
  border: 1px solid #f0d9ac;
  border-left: 4px solid #d68910;
  border-radius: 0.4rem;
  background: #fffaf1;
}
.a-valider .code {
  display: block;
  font-family: ui-monospace, monospace;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #8a5a00;
}
.a-valider .nom { display: block; font-weight: 600; }

/* Ajouter un partenaire avant d'en avoir besoin : preparer ses accords un
   jour calme, plutot qu'en decouvrant le premier bon au telephone. */
.ajout-partenaire { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px dashed #dfe4ec; }
.ajout-partenaire label { display: block; margin-bottom: 0.5rem; }

/* Le champ SOUS son intitule, pas colle a sa droite : « Prevenance exigee
   avant la seance (heures)[___] » se lit mal et se remplit de travers. */
.partenaire label input,
.partenaire label textarea {
  display: block;
  margin-top: 0.25rem;
  width: 100%;
  max-width: 18rem;
}
.partenaire label textarea { max-width: 100%; }
.partenaire .choix-option input { display: inline-block; margin: 0; width: auto; }

/* Le bouton rond DECOLLE de son mot : « ○Oui » se lit mal et se clique de
   travers. `.partenaire label { display:block }` ecrasait le flex du choix,
   et avec lui son ecart. */
.partenaire .choix-option {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.partenaire .choix-option input[type="radio"],
.partenaire .choix-option input[type="checkbox"] {
  display: inline-block;
  flex: 0 0 auto;
  margin: 0;
  width: auto;
}

/* Enregistrer et supprimer : cote a cote mais pas de meme poids. Le geste
   rare et sans retour ne doit pas etre le voisin immediat de celui qu'on
   fait dix fois par jour. */
.actions-fiche { display: flex; align-items: center; gap: 1.2rem; margin-top: 0.4rem; }
.actions-fiche button.discret {
  border-color: transparent;
  color: #9c1f1f;
  font-size: 0.88rem;
  text-decoration: underline;
}
.actions-fiche button.discret:hover { border-color: #f2bcbc; text-decoration: none; }

/* Le champ de creation : son intitule au-dessus, comme dans la fiche. */
.ajout-partenaire input.champ-bloc {
  display: block;
  margin-top: 0.25rem;
  width: 100%;
  max-width: 18rem;
}

/* L'APERCU DU MAIL. Ce que le client recevra, avec le texte de l'exploitant
   dedans : la seule facon de lui montrer ce que le logiciel ajoute autour,
   et donc ce qu'il n'a pas a reecrire. */
.apercu { margin: 0.4rem 0 1.6rem; }
.apercu-corps {
  margin-top: 0.6rem;
  padding: 0.9rem 1rem;
  border: 1px solid #dfe4ec;
  border-left: 4px solid #1a3a6b;
  border-radius: 0.4rem;
  background: #fbfcfe;
}
.apercu-sujet { margin: 0 0 0.7rem; font-weight: 600; }
.apercu-texte {
  margin: 0;
  white-space: pre-wrap;
  font: inherit;
  font-size: 0.92rem;
  line-height: 1.5;
}
.apercu-corps .details { display: block; margin-top: 0.8rem; font-size: 0.8rem; color: #6b7686; }

/* Le passage ecrit par l'exploitant, dans l'apercu. Tout l'interet de
   l'ecran tient a cette distinction : ce qui vient de lui, ce qui vient
   du logiciel. */
.apercu-sien { font-weight: 700; color: #1a3a6b; }

/* TOUS LES MOTS DES MESSAGES. Quarante fragments : la cle en petit, le
   texte en grand, et les variables acceptees dessous. On les touche une
   fois, pas tous les jours. */
.fragments { display: flex; flex-direction: column; gap: 0.9rem; margin-top: 0.8rem; }
.fragment {
  padding: 0.7rem 0.9rem;
  border: 1px solid #e6eaf0;
  border-radius: 0.4rem;
  background: #fbfcfe;
}
.fragment-cle {
  display: block;
  margin-bottom: 0.3rem;
  font-family: ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: #6b7686;
}
.fragment textarea { width: 100%; }
.fragment .details { display: block; margin: 0.3rem 0 0.5rem; font-size: 0.78rem; color: #6b7686; }
.fragment .mention { margin-left: 0.6rem; font-size: 0.85rem; }
.fragment .mention.echec { color: #9c1f1f; }

/* --- CE QU'ON N'A PAS ENCORE LU -----------------------------------------

   Une boîte mail, pas une liste : en gras tant qu'on ne l'a pas ouverte.

   Le gras porte sur `.nom` et pas sur la ligne : `.activite .nom` pose
   déjà `font-weight: 600` (widget.css), et un `font-weight` hérité par la
   ligne n'aurait jamais atteint le nom. Trois sélecteurs contre deux, et
   la règle passe.

   La bordure gauche appartient à la COULEUR DE L'ACTIVITÉ, posée en style
   inline : elle ne peut pas servir de marque ici. D'où la pastille devant
   le nom, qui reste lisible en noir et blanc comme pour qui distingue mal
   les couleurs. */
.non-lue { background: var(--fond-doux); cursor: pointer; }
.non-lue .heure { font-weight: 700; }
.non-lue .activite .nom { font-weight: 800; }
.non-lue .activite .nom::before {
  content: '\25CF\00A0';
  color: var(--primaire);
  font-size: 0.62em;
  vertical-align: 0.18em;
}

/* Le compte, en tête de liste, avec le geste qui le solde. */
.compte-non-lues { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }

/* LA PASTILLE de l'onglet Accueil. C'est elle qui donne un sens au gras :
   sans elle, il faudrait ouvrir l'accueil pour savoir s'il y a quelque
   chose à y lire. */
/* =====================================================================
   LES PASTILLES D'ALERTE

   LE ROUGE NE SUFFIT PAS. Il sert deja au compte des messages non lus,
   qui n'est pas une urgence : un salarie qui n'a pas badge et trois
   nouveautes a lire ne demandent pas la meme chose. Le triangle
   distingue ce qui appelle un geste MAINTENANT.

   ELLES VIVENT SUR TROIS SORTES D'ONGLETS — la barre du haut, les
   rubriques d'une page, ses sujets — et se lisent pareil sur les trois :
   c'est la meme alerte, vue de plus ou moins pres.
===================================================================== */
/* ELLE SE POSE SUR LE COIN DU BOUTON, comme sur un telephone.

   Dans le flux, elle poussait le texte et changeait la largeur de
   l'onglet : la barre se decalait selon qu'il y avait une alerte ou non,
   et un menu se retient par sa geometrie avant de se lire. Posee par
   dessus, elle ne coute plus un pixel.

   BLANC SUR ROUGE, TOUJOURS — y compris sur un onglet deja peint aux
   couleurs de la marque. L'alerte ne change pas de couleur selon
   l'endroit ou elle tombe : c'est a cela qu'on la reconnait sans la
   lire. Le cerne blanc la detache du fond fonce. */
.pastille-grave {
  position: absolute;
  top: -0.35rem;
  right: -0.3rem;
  z-index: 2;
  min-width: 1.1rem;
  padding: 0 0.28rem;
  border-radius: 999px;
  background: #b42318;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.1rem;
  text-align: center;
  box-shadow: 0 0 0 2px #fff;
  white-space: nowrap;
}
/* Le bouton devient le repere de la pastille. `overflow: visible` parce
   qu'elle sort volontairement de ses bords. */
.onglets button,
.reglages-sous-menu button,
.onglets-mails button { position: relative; overflow: visible; }

/* =====================================================================
   LA TETE DE LA JOURNEE : la date a gauche, la feuille a droite

   On imprime la feuille AVANT de lire la journee — c'est le geste du
   matin, celui qui pose le papier sur le comptoir. Elle etait tout en
   bas, apres la liste des seances.
===================================================================== */
.journee-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.journee-tete h2.section { margin-bottom: 0; }

.onglets .pastille {
  display: inline-block;
  margin-left: 0.4rem;
  min-width: 1.25rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--rouge);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.25rem;
  text-align: center;
}
/* Sur l'onglet ACTIF le fond est déjà celui de la marque : la pastille
   rouge sur bleu foncé s'y perdrait. Elle s'inverse. */
button.onglet-actif .pastille { background: #fff; color: var(--primaire); }

/* --- LE JOURNAL DU PLANNING ---------------------------------------------

   « Toutes les modifs qui ont lieu sur le planning. Toutes. »

   Chaque ligne dit d'abord CE QUI S'EST PASSÉ. Une réservation qui tombe
   et une séance qu'un client vient de déplacer se ressemblent trait pour
   trait sans cette étiquette — et ce sont deux nouvelles très différentes.

   Les couleurs suivent celles des statuts déjà en place : rouge pâle pour
   ce qui coûte une place, ambre pour ce qui bouge, vert pour ce qui entre.
   Une palette de plus aurait été une palette à réapprendre. */
.badge.fait-nouvelle { background: #d1fae5; }
.badge.fait-deplacement { background: #fde68a; }
.badge.fait-modification { background: #e0e7ff; }
.badge.fait-annulation { background: #e5e7eb; color: var(--gris); }
.badge.fait-absence { background: #fecaca; }
.badge.fait-tentative_bloquee { background: var(--rouge); color: #fff; }

/* --- LE BANC D'ESSAI ----------------------------------------------------

   Deux écrans identiques côte à côte, c'est comme ça qu'on annule une
   vraie réservation en croyant être sur le test. Le banc doit donc être
   reconnaissable AVANT d'avoir lu quoi que ce soit : une bande large, en
   travers, dans une couleur qu'on ne trouve nulle part ailleurs dans le
   logiciel.

   Pas de bouton pour la fermer. Une bande qu'on peut faire disparaître
   disparaît, et c'est le jour où elle manque qui coûte cher. */
.bandeau-banc {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 0.55rem 1rem;
  background: #7c2d12;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
}

/* Et la barre du haut prend la même teinte : le bandeau seul se perd dès
   qu'on a fait défiler un peu, l'en-tête reste. */
body.banc-essai .admin-entete { border-bottom-color: #7c2d12; }


/* --- LE MENU « ANIMATEUR » SUR LA LIGNE ----------------------------------

   Le samedi matin, on répartit huit séances entre deux animateurs. Un
   menu sur la ligne, et c'est enregistré : passer par « Modifier » huit
   fois est le genre de geste qu'on ne fait pas, et le papier à côté du
   clavier reprend sa place.

   La confirmation est un flash vert d'une seconde. Pas de message : il
   faudrait le lire, et le fermer. */
.animateur-ligne {
  width: 8.5rem;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--trait);
  border-radius: 6px;
  background: #fff;
  font: inherit;
  font-size: 0.85rem;
  transition: background-color 0.6s ease;
}
.animateur-ligne.enregistre { background: #d1fae5; }
.animateur-ligne:disabled { opacity: 0.6; }

/* LE TEMPS DE RÉUSSITE, tapé sur la ligne. Étroit : deux ou trois
   chiffres, jamais plus. Même retour vert que le menu animateur — c'est
   le même geste, on tape et ça part. */
.temps-reussite {
  width: 4.5rem;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--trait);
  border-radius: 6px;
  background: #fff;
  font: inherit;
  font-size: 0.85rem;
  transition: background-color 0.6s ease;
}
.temps-reussite.enregistre { background: #d1fae5; }
.temps-reussite:disabled { opacity: 0.6; }

/* --- LA BARRE « ANIMATEUR DE LA JOURNÉE » -------------------------------

   Un dimanche à douze séances, c'est douze champs. Une ligne au-dessus du
   planning les couvre, et les exceptions se reprennent ligne par ligne. */
.animateur-jour {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.8rem 0;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--trait);
  border-radius: 8px;
  background: var(--fond-doux);
  font-size: 0.9rem;
}
.animateur-jour select { flex: 0 1 12rem; padding: 0.35rem 0.5rem; border: 1px solid var(--trait); border-radius: 6px; background: #fff; font: inherit; }

/* Les séances dont personne n'a pris le nom : présentes, mais en retrait —
   c'est un reste, pas un résultat. Les cacher ferait un tableau dont les
   lignes ne s'additionnent plus au chiffre du mois. */
.sans-animateur td { color: var(--gris); font-style: italic; }

/* --- d'ou partent les promotions ----------------------------------------

   Trois champs d'une ligne dans une carte qui, ailleurs, ne contient que
   de grandes zones de texte : sans regle propre, ils heriteraient de
   `.carte textarea` — c'est-a-dire de rien, un `input` n'etant pas un
   `textarea` — et s'afficheraient a la largeur par defaut du navigateur,
   soit vingt caracteres pour saisir « Ma Salle <promos@news.ma-salle.fr> ». */
.champ { margin: .8rem 0; }
.champ label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .25rem; }
.champ input {
  width: 100%;
  font: inherit;
  padding: .45rem .55rem;
  border: 1px solid var(--trait);
  border-radius: 6px;
}
.champ .details { margin: .3rem 0 0; font-size: .78rem; color: #6b7686; }

/* UNE LIGNE DNS SE COPIE, DONC ELLE SE SELECTIONNE ENTIEREMENT.
   Coupee a la largeur de la carte, on en collerait la moitie — et une
   ligne SPF tronquee ne se voit pas : elle echoue silencieusement. */
.fragment code {
  display: block;
  margin: .15rem 0 .5rem;
  padding: .45rem .6rem;
  background: var(--fond-doux, #f4f6f9);
  border: 1px solid var(--trait);
  border-radius: 6px;
  font-size: .82rem;
  overflow-x: auto;
  white-space: pre;
  user-select: all;
}

/* L'etat d'une ligne, a cote de son nom : vert quand c'est pose, rouge
   quand ca ne l'est pas. La couleur seule ne dirait rien a qui ne la
   distingue pas — le texte, lui, le dit toujours. */
.etat-dns { margin-left: .6rem; font-size: .82rem; font-weight: 600; }
.etat-dns.echec { color: #9c1f1f; }

/* Le titre d'une ligne DNS. `.fragment-cle` est en police de code — bon
   pour « RELANCE_SALLES_CORPS », mauvais pour une phrase française. */
.ligne-dns-titre { font-weight: 600; font-size: .92rem; }

/* =====================================================================
   ECRIRE A MES CLIENTS : periode, salles et clients a cocher

   Chaque filtre sur sa ligne : les libelles colles aux menus (« A qui
   [menu] Ayant fait cette salle [menu] ») se lisaient comme une seule
   phrase cassee.
   ===================================================================== */
.campagne-champ { margin: 0.8rem 0; }
.campagne-periode {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
}
.campagne-salles {
  border: 1px solid #e3e6ec;
  border-radius: 6px;
  padding: 0.5rem 0.8rem 0.3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.4rem;
}
.campagne-salles legend { padding: 0 0.3rem; font-weight: 600; }
.campagne-salles .details { flex-basis: 100%; margin: 0.2rem 0 0; }

/* LA FENETRE « A QUI ENVOYER ? ». Trois etages : le titre, la liste qui
   defile, et un pied qui ne defile JAMAIS — le compte et le bouton
   d'envoi restent sous les yeux, meme devant deux mille clients. */
.fenetre-destinataires {
  width: min(52rem, 94vw);
  max-height: 90vh;
  padding: 1rem 1.2rem 0.8rem;
  display: flex;
  flex-direction: column;
}
.fenetre-destinataires:not([open]) { display: none; }
.fenetre-corps { flex: 1; overflow-y: auto; min-height: 8rem; }
.fenetre-corps input[type=search] { width: 100%; }
/* Les dates et les cases gardent leur taille : dans une fenetre, les
   champs s'etalent par defaut sur toute la largeur, et « Venus entre le
   … et le … » prenait quatre lignes. */
.fenetre-corps .campagne-periode input[type=date] { display: inline-block; width: auto; margin: 0; }
.fenetre-corps input[type=checkbox] { width: auto; margin: 0; }
.fenetre-pied {
  border-top: 1px solid #e3e6ec;
  padding-top: 0.6rem;
  margin-top: 0.4rem;
  background: #fff;
}
.fenetre-pied p { margin: 0.2rem 0; }
.destinataires-liste li { padding: 0.3rem 0; border-bottom: 1px solid #f0f2f5; }
.destinataires-liste li:last-child { border-bottom: 0; }
/* Ceux qui ne recevront pas ce mail : visibles, avec leur raison, mais grises. */
.destinataires-liste li.ecarte { opacity: 0.55; }
.destinataire { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.6rem; }
.destinataires-liste label.case { align-items: baseline; margin: 0; }
.clients-statut { color: #8a5a00; }
.campagne-salles-titre { font-weight: 600; flex-basis: 100%; }
.clients-ecrire .clients-gestes { margin-top: 0.6rem; gap: 0.6rem; }

/* Sous le texte de l'invitation : le bouton et sa phrase, sur une ligne. */
.clients-outils { justify-content: flex-start; align-items: baseline; margin: 0.4rem 0 0.8rem; }

/* Le code promo du mail : combien, combien de temps — et c'est tout. */
.promo-mail {
  border: 1px solid #e3e6ec;
  border-radius: 6px;
  padding: 0.5rem 0.8rem;
  margin: 0 0 0.8rem;
}
.promo-mail input[type=number] { width: 5rem; display: inline-block; margin: 0; }
.promo-mail select { width: auto; display: inline-block; margin: 0; }

/* Les deux mails, en onglets en tete du panneau : celui qu'on ecrit est
   plein, l'autre se clique. */
.onglets-mails {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: -0.2rem 0 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid #e3e6ec;
}
.onglets-mails button[aria-pressed="true"] {
  background: #1f3350;
  border-color: #1f3350;
  color: #fff;
  cursor: default;
}

/* Le panneau s'ouvre sous le bandeau du haut, pas dessous : ses onglets
   doivent rester visibles. */
.panneau-mail { scroll-margin-top: 4.5rem; }

/* Le sous-menu de Clients : en tete de l'onglet, sans cadre autour. */
.sous-menu-clients { margin: 0 0 1rem; }

/* La ligne « Ensemble » des codes promo. PAS la classe .total : widget.css
   la met en flex, et la ligne sortait en colonne. */
.tableau tr.ligne-ensemble td { font-weight: 600; border-top: 2px solid var(--gris-clair, #d8dce3); }

/* Le debut du code promo, choisi par l'exploitant, et la forme du code
   que recevra chaque client. */
.promo-prefixe { width: 9rem; text-transform: uppercase; letter-spacing: 0.05em; }
.promo-forme { font-weight: 600; letter-spacing: 0.05em; }

/* LES QUATRE ONGLETS TIENNENT SUR L'ECRAN DU TELEPHONE. La bande qui defile
   cachait « Parametres » hors de l'ecran, a droite : « il n'y a pas d'onglet
   Parametres en haut ». Quatre onglets, ca tient sur 375 px si on les
   serre un peu ; la bande ne defile plus que sur un ecran vraiment etroit. */
@media (max-width: 760px) {
  .admin-entete .onglets { gap: 0.2rem; }
  .admin-entete .onglets button {
    flex: 1 1 auto;
    padding: 0.5rem 0.35rem;
    font-size: 0.88rem;
  }
  .admin-entete .onglets .pastille { margin-left: 0.25rem; }
}

/* Les boutons d'informations au-dessus d'un texte de mail. */
.outils-mots { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin: 0.4rem 0; }
.outils-mots button { padding: 0.3rem 0.6rem; font-size: 0.88rem; }

/* Un reglage court (un delai, un lien, une adresse) : une seule ligne. */
.reglage-court { padding-top: 0.8rem; padding-bottom: 0.8rem; }
.reglage-court h2 { font-size: 1rem; margin: 0; flex: 0 0 15rem; }
@media (max-width: 760px) {
  .reglage-ligne { flex-wrap: wrap; }
  .reglage-court h2 { flex-basis: 100%; }
}
.reglage-ligne { display: flex; gap: 0.5rem; align-items: center; }
.reglage-ligne input { flex: 1 1 auto; min-width: 0; margin: 0; }
.reglage-ligne button { flex: 0 0 auto; width: auto; margin: 0; }
.reglage-court .details { margin: 0.3rem 0 0; }
.reglage-court .mention:not([hidden]) { margin: 0.3rem 0 0; }

/* Un reglage chiffre : trois ou quatre caracteres, pas toute la ligne. */
.reglage-ligne input.champ-nombre { flex: 0 0 5.5rem; width: 5.5rem; text-align: right; }

/* PLUS DE BOUTONS PLEINE LARGEUR. `.carte` est une colonne flex : tout
   enfant y est etire d'un bord a l'autre, et « Enregistrer » sous un texte
   devenait une barre de 900 px. « Arrete avec ces gros boutons. » Un
   bouton prend la taille de son mot. */
.carte > button { align-self: flex-start; }

/* Réglages : la barre des rubriques, puis la rangée de leurs réglages. */
.reglages-rubriques { margin-bottom: 0.5rem; }
.reglages-sous-menu { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0 0 1rem; }
.reglages-sous-menu button { padding: 0.3rem 0.65rem; font-size: 0.9rem; }
.reglages-sous-menu button[aria-pressed="true"] {
  border-color: var(--primaire); color: var(--primaire); font-weight: 600; background: #eef3fb;
}
.reglage-titre { margin: 0.5rem 0 0.3rem; }

/* La photo de l'equipe, a sa place dans l'apercu du mail de remerciement. */
.apercu-photo-mail { display: block; max-width: 100%; width: 320px; border-radius: 6px; margin: 0.4rem 0; }


/* --- LE BON CADEAU À IMPRIMER, ET SES VALEURS DÉPLAÇABLES ----------------

   Le même geste que le logo d'un mail : on clique, on saisit, on fait
   glisser. Les valeurs sont posées EN POURCENTAGES du visuel — il grandit
   avec la fenêtre, elles suivent — et leur taille est en `cqw`, donc
   mesurée sur la largeur du bon lui-même : ce qu'on voit ici est ce qui
   sortira à l'impression. */
.bon-reglage { margin: 0.75rem 0; }
.bon-reglage .bon {
  position: relative;
  container-type: inline-size;
  line-height: 1;
  max-width: 760px;
  user-select: none;
}
.bon-reglage .bon img { display: block; width: 100%; height: auto; border-radius: 6px; }

.bon-champ {
  position: absolute;
  transform: translateY(-50%);
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: 0.04em;
  white-space: nowrap;
  cursor: grab;
  touch-action: none;
}
.bon-champ:hover { outline: 1px dashed rgba(0, 0, 0, 0.35); outline-offset: 3px; }
.bon-champ.choisi { outline: 1px solid var(--primaire); outline-offset: 3px; cursor: grabbing; }

/* Les poignées n'apparaissent qu'une fois la valeur saisie : quatre
   points sur chaque valeur, en permanence, feraient un sapin de Noël. */
.bon-poignee { display: none; }
.bon-champ.choisi .bon-poignee {
  display: block;
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  border: 1px solid var(--primaire);
  border-radius: 2px;
}
.bon-poignee-no { top: -8px; left: -8px; cursor: nwse-resize; }
.bon-poignee-ne { top: -8px; right: -8px; cursor: nesw-resize; }
.bon-poignee-so { bottom: -8px; left: -8px; cursor: nesw-resize; }
.bon-poignee-se { bottom: -8px; right: -8px; cursor: nwse-resize; }

.bon-outils { flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.5rem; }

/* --- RELIER SA PAGE FACEBOOK : deux étapes, deux blocs ------------------
   Trois valeurs venues de deux écrans différents : empilées en vrac, on ne
   savait plus où chercher quoi. Chaque bloc porte sa consigne au-dessus de
   ses propres champs. */
.fb-connexion { display: grid; gap: 1rem; max-width: 44rem; }
.fb-etape {
  border: 1px solid var(--bord);
  border-radius: 8px;
  padding: 0.85rem 1rem 1rem;
  background: #fff;
}
.fb-etape h3 { margin: 0 0 0.25rem; font-size: 0.95rem; }
.fb-etape .details { margin: 0 0 0.75rem; }
.fb-etape label { display: block; margin-bottom: 0.6rem; font-size: 0.85rem; font-weight: 600; }
.fb-valeur { width: 100%; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
.fb-pages { flex-wrap: wrap; gap: 0.4rem; }

/* LA FENÊTRE DE LA PHOTO dans le cadre : en pointillés, on la voit sans
   avoir à publier pour savoir où la photo tombera. */
.cadre-fenetre {
  position: absolute;
  border: 2px dashed rgba(0, 0, 0, 0.45);
  background: rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

/* Le logo se pose comme une valeur, mais c'est une image : sa taille est
   une largeur, et elle ne se déplace pas à moitié transparente. */
.bon-champ-image { transform: none; display: block; }
.bon-champ-image img { display: block; width: 100%; height: auto; }

.bon-champ-reglages { margin: 0.5rem 0 0.75rem; }
.bon-champ-ligne { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; }
.bon-champ-ligne label { font-size: 0.85rem; font-weight: 600; }
.bon-champ-ligne input[type="text"] { min-width: 16rem; }
.bon-champ-ligne input[type="number"] { width: 6rem; }
.bon-couleur input { display: block; width: 3rem; height: 2rem; padding: 0; }

/* Gras et italique : deux bascules, pas deux cases à cocher — on voit
   l'état dans le bouton lui-même. */
.bon-styles { display: flex; gap: 0.35rem; }
.bon-style {
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--bord);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}
.bon-style.actif { background: var(--primaire); color: #fff; border-color: var(--primaire); }

/* =====================================================================
   L'ÉQUIPE — fiches, temps autour de la séance, règles de travail

   Rien de décoratif ici : de quoi lire une fiche d'un coup d'œil et
   distinguer un groupe de réglages du suivant. L'ergonomie de cet écran
   se fera sur les captures du concurrent, pas d'avance.
===================================================================== */

/* La phrase qui explique un champ, sous le champ et non à côté : à côté,
   elle pousse le champ hors de l'écran sur un téléphone. */
.aide {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.78rem;
  color: #6b7686;
  font-weight: normal;
}

/* UNE LIGNE PAR PERSONNE : qui elle est a gauche, ce qu'on peut faire a
   droite. « Modifier » et « Retirer » se suivaient dans la meme phrase,
   a deux millimetres l'un de l'autre, dans la meme couleur — on cliquait
   sur l'un en visant l'autre. Ils sont desormais de nature differente
   (un bouton, un lien), de couleur differente, et separes par toute la
   largeur de la ligne. */
.equipe-fiche {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--bord);
}
.equipe-fiche:first-child { border-top: 0; }
.equipe-fiche h3 { margin: 0 0 0.15rem; font-size: 1rem; }
.equipe-fiche .details { margin: 0.1rem 0; }
.equipe-qui { flex: 1 1 11rem; min-width: 0; }
.equipe-actions { display: flex; align-items: center; gap: 1.5rem; margin-left: auto; }

/* CE QUI RETIRE SE VOIT COMME TEL. Rouge, plus petit que le geste
   courant, et jamais le premier sous le doigt. */
button.lien.retirer { color: #b91c1c; font-size: 0.85rem; }


.equipe-partis { margin-top: 1rem; }
.equipe-partis summary { cursor: pointer; color: #6b7686; font-size: 0.85rem; }

/* Un groupe de réglages : un encadré léger, pour qu'« autour de la
   séance » ne se confonde pas avec « vos limites » juste dessous. */
.reglage-groupe {
  margin-top: 1.2rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--bord);
}
.reglage-groupe:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.reglage-groupe h3 { margin: 0 0 0.2rem; font-size: 0.95rem; }
.reglage-groupe > label { display: block; margin-top: 0.7rem; }

/* Une salle et ses deux minutes : en ligne tant que la place le permet. */
.reglage-salle {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.6rem;
  margin-top: 0.8rem;
}
.reglage-salle h4 { flex: 1 1 100%; margin: 0; font-size: 0.9rem; color: #6b7686; }
.reglage-salle label { flex: 1 1 10rem; margin: 0; }

/* Le besoin de la semaine : un jour, ses tranches dessous. Le creux —
   du temps payé où personne ne joue — se lit en gris, pour qu'on voie
   d'un coup d'œil ce qui se passe entre deux séances. */
.besoin-jour { margin-top: 0.9rem; }
.besoin-jour h4 { margin: 0; font-size: 0.95rem; }
.besoin-jour .details { margin: 0.1rem 0 0.35rem; }
.besoin-tranche {
  margin: 0.15rem 0;
  padding-left: 0.7rem;
  border-left: 3px solid var(--primaire);
  font-size: 0.88rem;
}
.besoin-tranche.creux { border-left-color: #cbd2dc; color: #6b7686; }

/* =====================================================================
   RÉSERVER PLUSIEURS SALLES — on clique les créneaux

   Les pastilles doivent se lire comme des boutons : cliquables, et l'on
   voit d'un coup d'œil celles qu'on a prises. Un créneau déjà pris par
   quelqu'un d'autre reste visible mais éteint : le masquer ferait croire
   que la salle n'ouvre pas ce jour-là.
===================================================================== */
.groupe-saisie { max-width: 46rem; }
.groupe-creneaux { margin-top: 1rem; }
.groupe-salle { margin-top: 0.8rem; }
.groupe-salle h4 { margin: 0 0 0.3rem; font-size: 0.9rem; color: #6b7686; }

.groupe-heures { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.groupe-creneau {
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--bord);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}
.groupe-creneau:hover:not(:disabled) { border-color: var(--primaire); }
.groupe-creneau.actif {
  background: var(--primaire);
  border-color: var(--primaire);
  color: #fff;
  font-weight: 600;
}
.groupe-creneau.pris {
  color: #b0b7c3;
  background: #f5f6f8;
  cursor: not-allowed;
  text-decoration: line-through;
}

.groupe-choix { margin-top: 1.2rem; }
.groupe-choix h3 { margin: 0 0 0.3rem; font-size: 0.95rem; }
.groupe-ligne {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
  border-top: 1px solid var(--bord);
}
.groupe-ligne-salle { flex: 1 1 auto; font-size: 0.9rem; }
.groupe-nb { width: 4.5rem; }
.groupe-unite { font-size: 0.8rem; color: #6b7686; }
.groupe-references { margin: 0.4rem 0 0; padding-left: 1.1rem; font-size: 0.85rem; color: #6b7686; }

/* --- LA SEMAINE EN TABLEAU ---------------------------------------------

   « Un calendrier c'est pas ça, c'est un tableau : les jours en ligne et
     dessous les animateurs. »

   Sept jours empilés répondaient à « que fait-on mercredi ? ». Devant un
   planning on se demande QUI travaille QUAND, et la réponse tient dans
   une ligne — pas dans sept paragraphes qu'il faut relire pour
   recomposer la semaine de quelqu'un.

   Sur un téléphone, le tableau glisse dans sa boîte au lieu de mettre
   la page en travers. */
.semaine-large { overflow-x: auto; margin: 0.6rem 0; }
.semaine-tableau {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.semaine-tableau th, .semaine-tableau td {
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--bord);
  vertical-align: top;
  text-align: left;
}
.semaine-tableau thead th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7686;
  font-weight: 600;
  white-space: nowrap;
}
/* LE NOM RESTE VISIBLE quand on fait glisser la semaine : une colonne
   d'horaires sans savoir de qui elle parle ne sert à rien. */
.semaine-nom {
  position: sticky;
  left: 0;
  background: var(--fond, #fff);
  font-weight: 600;
  white-space: nowrap;
}
.semaine-heures {
  display: block;
  font-weight: 400;
  font-size: 0.72rem;
  color: #6b7686;
}
.semaine-creneau { display: block; white-space: nowrap; }
.semaine-vide { color: #c7ccd3; }
/* Ce que personne ne tient : rouge, et en bas du tableau. */
.semaine-tableau tr.manque th, .semaine-tableau tr.manque td { color: #b91c1c; }
.planning-ajout { margin-top: 0.6rem; }

/* --- LA SEMAINE QUI ARRIVE ---------------------------------------------

   L'ÉTAT D'UN JOUR SE LIT AVANT SES HORAIRES. Un gérant qui ouvre cet
   écran cherche où regarder, pas ce que fait Marie mercredi : la
   pastille sous le nom du jour répond en un balayage, et la couleur
   dit l'urgence — rouge, il manque quelqu'un ; ambre, il faut du
   renfort ; le reste est calme. */
.semaine-barre {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.semaine-quand { font-size: 0.95rem; }
.semaine-etat {
  display: block;
  margin-top: 0.25rem;
  padding: 0.1rem 0.35rem;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  text-align: center;
  background: #f1f3f6;
  color: #6b7686;
}
.semaine-etat.etat-decouvert { background: #fde8e8; color: #b91c1c; }
.semaine-etat.etat-renfort { background: #fdf0d5; color: #92400e; }
.semaine-etat.etat-allege { background: #e8f1fd; color: #1e429f; }
.semaine-etat.etat-conforme { background: #e6f4f1; color: #0f766e; }

/* Un créneau que le planning type ne prévoyait pas : c'est celui-là
   qu'il faudra annoncer à quelqu'un. */
.marque-renfort {
  display: inline !important;
  font-size: 0.68rem;
  font-weight: 600;
  color: #92400e;
}

/* Une plage du planning type, dans sa case : l'horaire, et la croix qui
   l'enlève — discrète, et toujours après le texte. */
.planning-plage {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.planning-plage .retirer { font-size: 1rem; line-height: 1; }

/* Les préférences : sept lettres par personne, une couleur par état.
   Cliquer fait tourner oui → si besoin → non, sans menu ni boîte. */
.preference-ligne { display: flex; align-items: center; gap: 0.3rem; margin-top: 0.4rem; }
.preference-nom { flex: 0 0 8rem; font-size: 0.88rem; }
.preference-case {
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--bord);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  font-weight: 600;
}
.preference-case[data-etat="oui"] { background: #0f766e; border-color: #0f766e; color: #fff; }
.preference-case[data-etat="si_besoin"] { background: #f1f3f6; color: #6b7686; }
.preference-case[data-etat="non"] { background: #b91c1c; border-color: #b91c1c; color: #fff; }

/* --- la fiche d'une personne -------------------------------------------

   Rangee par question, et non en une colonne de huit champs qu'il
   fallait derouler jusqu'au bouton. Les champs courts se mettent cote a
   cote des qu'il y a la place, et repassent l'un sous l'autre sur un
   telephone. */
.fiche-groupe { margin-top: 1.1rem; }
.fiche-groupe:first-of-type { margin-top: 0.6rem; }
.fiche-groupe > h3 {
  margin: 0 0 0.4rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7686;
}
.fiche-rangee { display: flex; flex-wrap: wrap; gap: 0 1rem; }
.fiche-rangee > label { flex: 1 1 11rem; min-width: 0; }

/* SA SEMAINE : sept colonnes tant qu'elles tiennent, puis elles
   s'enroulent. Le nom du jour au-dessus, l'etat en toutes lettres
   dessous — « volontaire » se lit, « V » se devine. */
.dispo-semaine {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  gap: 0.4rem;
}
.dispo-jour { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.dispo-nom { font-size: 0.78rem; color: #6b7686; }
.dispo-semaine .preference-case {
  width: 100%;
  height: auto;
  padding: 0.4rem 0.2rem;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.2;
}
/* Un jour de fermeture n'est pas une case grisee de plus : c'est une
   information sur la maison, pas une preference a saisir. */
.dispo-ferme {
  padding: 0.4rem 0.2rem;
  border: 1px dashed var(--bord);
  border-radius: 6px;
  text-align: center;
  font-size: 0.8rem;
  color: #9aa3ae;
}

/* Un poste que personne ne tient : il se voit, il ne se cache pas. */
.proposition .manque { color: #b91c1c; }

/* --- LE GÉRANT GARDE LA MAIN -------------------------------------------

   Chaque créneau de la semaine s'ouvre : « il faut que le gérant puisse
   modifier le planning proposé avant de le valider ». Un tableau qu'on
   ne peut que refuser en bloc se contourne sur un papier. Le bouton se
   fond dans la case — on lit un planning, pas une barre d'outils — et ne
   se révèle qu'au survol. */
button.semaine-creneau {
  display: block;
  width: 100%;
  padding: 0.15rem 0.25rem;
  border: 1px solid transparent;
  border-radius: 5px;
  background: none;
  font: inherit;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
button.semaine-creneau:hover { border-color: var(--trait); background: #f8f9fb; }
/* Une heure que personne ne tient : c'est là que le gérant doit cliquer. */
button.semaine-creneau.a-couvrir { color: #b91c1c; border-style: dashed; border-color: #f3c4c4; }

button.semaine-ajout {
  width: 100%;
  margin-top: 0.15rem;
  padding: 0.1rem;
  border: 1px dashed var(--bord);
  border-radius: 5px;
  background: none;
  color: #6b7686;
  line-height: 1.1;
  cursor: pointer;
}
button.semaine-ajout:hover { border-color: var(--primaire); color: var(--primaire); }

/* Un interrupteur se lit sur une ligne, pas au-dessus d'un champ. */
.case-a-cocher { display: block; margin-bottom: 0.9rem; font-weight: 600; }
.case-a-cocher input { display: inline; width: auto; margin: 0 0.3rem 0 0; }

/* Les séances de la semaine, sous le planning et dans les mêmes colonnes :
   un planning d'équipe sans ce qu'il y a à faire ne se vérifie pas. */
.semaine-seance {
  display: block;
  margin-bottom: 0.2rem;
  line-height: 1.25;
  white-space: normal;
}
.semaine-anime {
  display: block;
  font-size: 0.72rem;
  color: #6b7686;
}
/* Une séance que personne ne tient se voit d'ici, pas au dernier moment. */
.semaine-anime.sans { color: #b91c1c; font-weight: 600; }

/* Le choix de l'animateur : des noms, pas une liste déroulante — on en a
   trois, et un clic vaut mieux qu'un menu. */
.seance-choix { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0; }

/* Les salles qu'une personne sait animer : des noms qu'on allume, pas
   une liste de cases à cocher qu'il faut lire deux fois. */
.formations { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.formation-case {
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--bord);
  border-radius: 999px;
  background: #fff;
  font-size: 0.8rem;
  cursor: pointer;
}
.formation-case[data-sait="oui"] { background: #0f766e; border-color: #0f766e; color: #fff; font-weight: 600; }


/* --- L'AGENDA ----------------------------------------------------------

   « Base-toi sur le planning de Google, ça fait plus pro. Il faut 9:00,
     10:00, 11:00 — mais si Jean-Philippe commence à 9:30, alors son carré
     commence à la moitié entre 9:00 et 11:00. Un seul carré, pas 10. »

   Les lignes sont les HEURES ; les blocs se placent à la minute, en
   pourcentage de la journée. Une présence de 9 h 30 à 17 h est UN
   rectangle — la grille d'avant en faisait trente cases empilées. */
.agenda-large { overflow-x: auto; margin: 0.6rem 0 1rem; }
/* LE NOMBRE DE COLONNES SUIT LE NOMBRE DE JOURS, et c'était un vrai
   bug : figé à sept, il tombait juste par accident en vue semaine —
   coin + sept en-têtes remplissaient exactement la première ligne. En
   vue JOUR, coin + un en-tête ne faisaient que deux cases : la colonne
   des heures glissait à côté du mercredi au lieu de passer à la ligne,
   et le reste tombait dans le vide. */
.agenda {
  display: grid;
  grid-template-columns: 3.2rem repeat(var(--agenda-jours, 7), minmax(6.5rem, 1fr));
  grid-template-rows: auto var(--agenda-hauteur, 400px);
  min-width: min(48rem, 100%);
}
.agenda-coin { border-bottom: 1px solid var(--bord); }
.agenda-jour-tete {
  padding: 0.3rem 0.4rem;
  border-bottom: 1px solid var(--bord);
  border-left: 1px solid var(--bord);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7686;
  font-weight: 600;
}
.agenda-jour-nom { display: block; }
.agenda-jour-date { display: block; font-weight: 400; color: #9aa3ae; letter-spacing: 0; }

/* La colonne des heures : l'étiquette se pose SUR le trait, pas dans la
   case — c'est ce qui fait qu'on lit « 10:00 » en face du trait de 10 h. */
.agenda-heures { position: relative; }
.agenda-heure {
  position: relative;
  border-top: 1px solid var(--bord);
  font-size: 0.68rem;
  color: #9aa3ae;
  font-variant-numeric: tabular-nums;
}
.agenda-heure span { position: absolute; top: -0.5em; right: 0.35rem; background: var(--fond, #fff); }

/* Les traits d'heure sont peints en fond : un enfant par heure ferait
   cent div pour dessiner des lignes. */
.agenda-jour {
  position: relative;
  border-left: 1px solid var(--bord);
  background-image: linear-gradient(to bottom, var(--bord) 1px, transparent 1px);
  background-repeat: repeat-y;
}

button.agenda-bloc {
  position: absolute;
  overflow: hidden;
  padding: 0.15rem 0.3rem;
  border: 1px solid transparent;
  border-left-width: 3px;
  border-radius: 4px;
  font: inherit;
  text-align: left;
  line-height: 1.15;
  cursor: pointer;
}
button.agenda-bloc.tenue, button.agenda-bloc.presence { background: #e6f4f1; border-left-color: #0f766e; }
button.agenda-bloc.sans { background: #fde8e8; border-left-color: #b91c1c; }
button.agenda-bloc.inutilise { background: #fdf0d5; border-left-color: #d97706; }
button.agenda-bloc.proposee { border-left-style: dashed; }
button.agenda-bloc:hover { border-color: var(--trait); border-left-width: 3px; }
.agenda-titre { display: block; font-size: 0.74rem; font-weight: 600; }
.agenda-sous { display: block; font-size: 0.68rem; color: #4b5563; }
button.agenda-bloc.sans .agenda-sous { color: #b91c1c; font-weight: 600; }
button.agenda-bloc.inutilise .agenda-sous { color: #92400e; font-weight: 600; }

/* Le panneau triangulaire reste APRÈS validation : une alerte qui
   disparaît une fois confirmée ne sert qu'au moment du clic. Celle-ci
   doit se retrouver trois mois plus tard, sans relire douze semaines. */
button.agenda-bloc.alerte { border-color: #d97706; border-top-width: 2px; }
.agenda-alerte {
  position: absolute;
  top: 1px;
  right: 2px;
  font-size: 0.72rem;
  line-height: 1;
  color: #b45309;
}

/* Le filtre « Voir » tient sur la barre de navigation : c'est un réglage
   de lecture, pas un champ de formulaire. */
.semaine-filtre { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; font-size: 0.85rem; }
.semaine-filtre select { display: inline; width: auto; margin: 0; padding: 0.35rem 0.5rem; }

/* --- LE MOIS : UNE CARTE, PAS UN PLANNING ------------------------------

   On y voit d'un coup où sont les trous et où ça se bouscule, et l'on
   clique sur le jour qui interroge. Trente et une journées de quatre
   séances ne se relisent pas avant d'engager une équipe : la publication
   reste à la semaine. */
.mois-grille {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--bord);
  border: 1px solid var(--bord);
  border-radius: 6px;
  overflow: hidden;
}
.mois-tete {
  padding: 0.3rem 0.4rem;
  background: var(--fond, #fff);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7686;
  font-weight: 600;
}
button.mois-case {
  display: block;
  width: 100%;
  min-height: 4.5rem;
  padding: 0.3rem 0.4rem;
  border: 0;
  border-radius: 0;
  background: var(--fond, #fff);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
button.mois-case:hover { background: #f8f9fb; }
/* Les jours des semaines voisines : présents pour que la grille tienne,
   effacés pour qu'on ne les compte pas dans le mois. */
button.mois-case.dehors { color: #c7ccd3; background: #fafbfc; }
button.mois-case.mois-inutilise { box-shadow: inset 3px 0 0 #d97706; }
.mois-numero { display: block; font-weight: 600; font-size: 0.8rem; }
.mois-seances { display: block; font-size: 0.7rem; color: #4b5563; }
.mois-gens { display: block; font-size: 0.68rem; color: #6b7686; }
.mois-manque { display: block; font-size: 0.68rem; color: #b91c1c; font-weight: 600; }

/* LE POINTAGE — l'alerte d'abord, en rouge, parce qu'elle a une heure
   pour servir : un groupe arrive, et personne n'a ouvert. */
.alerte-retard {
  border: 1px solid #f0b4b4;
  border-left: 4px solid #b91c1c;
  background: #fef4f4;
  border-radius: 6px;
  padding: 0.7rem 0.9rem;
  margin-bottom: 0.9rem;
}
.alerte-retard h3 { margin: 0 0 0.4rem; font-size: 0.95rem; color: #b91c1c; }
.alerte-ligne { padding: 0.35rem 0; border-top: 1px solid #f6dcdc; }
.alerte-ligne:first-of-type { border-top: 0; }
.alerte-ligne strong { display: block; font-weight: 600; }
.alerte-ligne .details { display: block; font-size: 0.8rem; color: #6b7686; }

/* Les dates d'un profil de planning : autant de plages qu'il en faut. */
.periode-dates { margin: 0.6rem 0; }
.periode-dates h3 { margin: 0 0 0.3rem; font-size: 0.9rem; }
/* « mercredi 23 septembre » commence par une majuscule, et une seule :
   capitaliser chaque mot donnait « Mercredi 23 Septembre ». */
.pointage-jour { margin: 0.3rem 0 0.1rem; font-size: 1rem; }
.pointage-jour::first-letter { text-transform: uppercase; }
.pointage-barre {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0 0 0.8rem;
}
.pointage-barre input { width: auto; margin: 0; }

/* LE RELEVÉ D'HEURES, sur papier. Comme la feuille du jour : il n'existe
   QU'à l'impression, où il doublerait sinon le tableau du compteur. */
@media print {
  .releve-qui {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.8rem;
  }
  .releve-qui strong { font-size: 1.1em; }

  .releve-totaux { margin-top: 0.8rem; }
  .releve-total {
    display: flex;
    justify-content: space-between;
    max-width: 22rem;
    padding: 0.15rem 0;
  }
  .releve-mention { margin-top: 0.8rem; font-size: 0.8em; }

  /* DEUX CASES ASSEZ GRANDES POUR UNE VRAIE SIGNATURE. Un trait de
     5 mm se signe à côté, et le document perd ce pour quoi on l'a
     imprimé. */
  .releve-signatures {
    display: flex;
    gap: 2rem;
    margin-top: 1.6rem;
    break-inside: avoid;
  }
  .releve-signature {
    flex: 1;
    border: 1px solid #000;
    min-height: 4.5rem;
    padding: 0.3rem 0.4rem;
  }
  .releve-signe-titre { font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.04em; }
  .releve-signe-sous { font-size: 0.72em; color: #444; }
}

/* Une ligne par personne dans la badgeuse : le champ, et les gestes à
   côté plutôt qu'en dessous — dix personnes font sinon trente lignes. */
.badgeuse-ligne {
  display: flex; align-items: flex-end; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.6rem;
}
.badgeuse-ligne label { flex: 1 1 18rem; margin: 0; }