:root{--ink:#05332a;--sage:#79bbae;--tint:#79bbae24;--surface:#fff;--background:#f8f8f8;--line:#e0e0e0;--accent:#ff4000;--green:#1f7a4d;--green-bg:#e6f4ec;--orange:#a25a00;--orange-bg:#fdf0dd;--red:#b02a1a;--red-bg:#fbe9e6;--rule:#000;font:15px/1.35 Archivo,system-ui,sans-serif;color:var(--ink);background:var(--background)}
*{box-sizing:border-box}
main{max-width:920px;margin:auto;padding:12px 24px 24px}
main.wide{max-width:none;padding:10px 14px}
h2{font-size:1.25rem;margin:0 0 12px}
section{padding:24px;border:1px solid var(--line);border-radius:14px;background:var(--surface);margin:32px auto;max-width:420px}
label{display:block;margin-block:14px}
input,button{font:inherit;border-radius:7px;border:1px solid var(--line)}
#login input{width:100%;min-height:44px;padding:9px 12px}
#login button{background:var(--ink);color:#fff;cursor:pointer;width:100%;min-height:44px}
button:disabled{opacity:.55}
input:focus-visible,button:focus-visible{outline:2px solid var(--sage);outline-offset:2px}

/* Barre haute compacte : studios à gauche, réglages à droite, tout sur une ligne. */
/* Studios et filtres sur une seule ligne. Pas de débordement masqué ici : la barre contient
   le menu des professeurs, qui doit pouvoir s'ouvrir par-dessus le tableau. */
.bar{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:8px 14px;border-bottom:2px solid var(--line)}
.bar-right{display:flex;flex-wrap:nowrap;align-items:center;gap:5px 8px;padding-bottom:4px;flex:0 0 auto}
/* Seuls les onglets défilent si la place manque : ils n'ouvrent aucun menu. */
.tabs{display:flex;gap:2px;flex-wrap:nowrap;overflow-x:auto;min-width:0}
.tab{background:none;border:0;border-bottom:3px solid transparent;border-radius:6px 6px 0 0;cursor:pointer;padding:6px 12px;color:#4a6a63;margin-bottom:-2px;font-size:.92rem}
.tab[aria-selected=true]{color:var(--ink);font-weight:600;border-bottom-color:var(--accent);background:var(--tint)}
/* Bascule à deux états, du même gabarit que les menus déroulants de la barre. */
.bascule{background:var(--ink);color:#fff;border-color:var(--ink);cursor:pointer;padding:4px 11px;border-radius:999px;font-size:.82rem;white-space:nowrap}
.bascule.off{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
/* Choix multiple de professeurs : liste cochable qui s'ouvre au-dessus du tableau. */
.upto{display:flex;align-items:center;gap:5px;margin:0;font-size:.82rem;color:#4a6a63;white-space:nowrap}
.upto input{padding:3px 7px;font-size:.82rem;color:var(--ink)}
.picker{position:relative;font-size:.82rem}
.picker summary{list-style:none;cursor:pointer;padding:4px 11px;border:1px solid var(--line);border-radius:999px;background:var(--surface);white-space:nowrap}
.picker summary::-webkit-details-marker{display:none}
.picker.active summary{background:var(--ink);color:#fff;border-color:var(--ink)}
.picker-list{position:absolute;right:0;top:calc(100% + 4px);z-index:20;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px;min-width:190px;max-height:330px;overflow:auto;box-shadow:0 6px 20px #05332a22}
.picker-line{display:flex;align-items:center;gap:6px;margin:0;padding:2px 4px;white-space:nowrap;cursor:pointer}
/* display:flex l'emporte sur la regle [hidden] du navigateur : sans cette ligne, la recherche
   masque les noms dans le code mais ils restent visibles a l'ecran. */
.picker-line[hidden]{display:none}
.picker-line:hover{background:var(--tint);border-radius:5px}
.picker-line input{width:auto;min-height:0}
.picker-search{display:block;width:100%;box-sizing:border-box;margin-bottom:6px;padding:4px 8px;border:1px solid var(--line);border-radius:7px;font-size:.78rem;min-height:0}
.picker-clear{display:block;width:100%;margin-bottom:6px;background:var(--tint);color:var(--ink);cursor:pointer;padding:4px;border-radius:7px;font-size:.78rem}
#refresh{background:var(--ink);color:#fff;cursor:pointer;padding:4px 13px;border-radius:999px;border-color:var(--ink);font-size:.82rem}
#refresh:disabled{cursor:progress}

.head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;padding:7px 0 6px}
.averages{display:flex;flex-wrap:wrap;gap:5px}
.badge{padding:3px 10px;border-radius:999px;font-size:.82rem;border:1px solid transparent;white-space:nowrap}
.badge b{font-weight:600}
.badge i{font-style:normal;opacity:.75;font-size:.92em}
.badge.green{background:var(--green-bg);color:var(--green);border-color:#bfe0cd}
.badge.orange{background:var(--orange-bg);color:var(--orange);border-color:#efd5ab}
.badge.red{background:var(--red-bg);color:var(--red);border-color:#f0c5bd}
.badge.none{background:var(--tint);color:var(--ink);border-color:#bcdcd4}

/* display:flex l'emporte sur la regle [hidden] du navigateur : sans cette ligne, le formulaire
   masque (a Lyon, qui n'a plus d'objectif a regler) resterait affiche. */
.thresholds[hidden]{display:none}
.thresholds{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:.82rem}
.thresholds label{display:flex;align-items:center;gap:4px;margin:0;color:#4a6a63}
.thresholds input{width:68px;padding:3px 7px;font-size:.82rem}
.thresholds button{background:var(--surface);color:var(--ink);cursor:pointer;padding:4px 11px;border-radius:999px;font-size:.82rem}
#thresholds-status,#refresh-status{color:#4a6a63}

.legend{display:flex;gap:4px 10px;flex-wrap:wrap;font-size:.75rem;margin:0;align-items:center;color:#4a6a63}
.key{padding:2px 8px;border-radius:999px;border:1px solid var(--line)}
.key.green{background:var(--green-bg);color:var(--green);border-color:#bfe0cd}
.key.orange{background:var(--orange-bg);color:var(--orange);border-color:#efd5ab}
.key.red{background:var(--red-bg);color:var(--red);border-color:#f0c5bd}
.key.arrows{background:var(--tint);color:var(--ink);border-color:#bcdcd4}

.summary{margin:14px 2px;font-size:.92rem}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:10px;background:var(--surface);max-height:calc(100vh - 140px)}
table.grid{border-collapse:collapse;width:100%;font-size:.76rem;table-layout:fixed}
table.grid th,table.grid td{border:1px solid var(--line);vertical-align:top;padding:2px}
table.grid thead th{background:var(--ink);color:#fff;position:sticky;z-index:2;padding:4px 5px;font-weight:600;text-align:center}
table.grid thead tr:first-child th{top:0}
table.grid thead tr:nth-child(2) th{top:23px}
th.day-head{border-left:2px solid var(--surface);font-size:.82rem}
th.room-head{font-size:.66rem;font-weight:500;opacity:.85;background:#0a4437}
th.hour{background:var(--tint);font-variant-numeric:tabular-nums;text-align:center;white-space:nowrap;font-weight:600;position:sticky;left:0;z-index:1}
th.hour,th.hour-head{width:46px;min-width:46px}
th.hour-head{position:sticky;left:0;z-index:3}
td.empty{background:#fcfcfc}

/* Nom sur une ligne, taux en dessous : les colonnes peuvent rester etroites. */
.course{display:flex;flex-direction:column;gap:0;padding:2px 4px;border-radius:5px;border-left:3px solid;margin-bottom:2px;cursor:help;line-height:1.2}
.course:last-child{margin-bottom:0}
.course .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.94em}
.course .value{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Trait de séparation : noir, un pixel, demandé par Pierre.
   Il est peint en ombre intérieure et non en bordure : dans une grille aux bordures
   fusionnées, une bordure d'un pixel perd contre celle de la case voisine et disparaît. */
table.grid th.day-start,table.grid td.day-start{box-shadow:inset 1px 0 0 0 var(--rule)}
/* Plage de midi encadrée du même trait que celui qui sépare les journées. */
table.grid tr.noon-start>th,table.grid tr.noon-start>td{box-shadow:inset 0 1px 0 0 var(--rule)}
table.grid tr.noon-end>th,table.grid tr.noon-end>td{box-shadow:inset 0 -1px 0 0 var(--rule)}
/* Croisements : une case peut porter deux traits à la fois, ils se cumulent ici. */
table.grid tr.noon-start>th.day-start,table.grid tr.noon-start>td.day-start{box-shadow:inset 1px 0 0 0 var(--rule),inset 0 1px 0 0 var(--rule)}
table.grid tr.noon-end>th.day-start,table.grid tr.noon-end>td.day-start{box-shadow:inset 1px 0 0 0 var(--rule),inset 0 -1px 0 0 var(--rule)}
table.grid tr.noon-start.noon-end>th,table.grid tr.noon-start.noon-end>td{box-shadow:inset 0 1px 0 0 var(--rule),inset 0 -1px 0 0 var(--rule)}
table.grid tr.noon-start.noon-end>th.day-start,table.grid tr.noon-start.noon-end>td.day-start{box-shadow:inset 1px 0 0 0 var(--rule),inset 0 1px 0 0 var(--rule),inset 0 -1px 0 0 var(--rule)}
table.grid thead th.day-head{border-left:3px solid var(--surface)}
/* Une salle sans cours garde sa colonne, son nom et sa capacité : le vide se voit, en gris. */
table.grid td.unused{background:#eceeed}
table.grid thead th.room-head.unused{background:#5b7a72;color:#e8efed}
/* Vue par salle : colonnes calibrees pour dix caracteres, la semaine entiere tient a l'ecran. */
table.grid.view-room{table-layout:fixed;width:auto;font-size:.68rem}
/* Les largeurs exactes sont posees a l'affichage, selon le studio et la place disponible. */
table.grid.view-room .course{padding:1px 3px}
.course .teacher{font-weight:400;opacity:.8;margin-left:3px}
/* Le professeur occupe sa propre ligne, entre le nom du cours et les chiffres. */
.course .teacher-line{font-weight:400;opacity:.8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.92em}
.course.green{background:var(--green-bg);border-color:var(--green);color:var(--green)}
.course.orange{background:var(--orange-bg);border-color:var(--orange);color:var(--orange)}
.course.red{background:var(--red-bg);border-color:var(--red);color:var(--red)}
.course.none{background:var(--tint);border-color:var(--sage)}
.course.removed{opacity:.6;border-left-style:dashed}
.course.removed .name{text-decoration:line-through}
.arrow{font-weight:400}
/* Nombre moyen de présents : discret à côté du taux, c'est un ordre de grandeur. */
.people{font-weight:600;opacity:.75}
.people::after{content:'p';font-size:.85em;opacity:.7}
/* Liste d'attente : le cours a refusé du monde, on l'encadre en orange. */
.course.waiting{outline:2px solid var(--orange);outline-offset:-2px}
.note{color:#4a6a63;font-size:.75rem;margin:8px 2px 16px}

/* Reporting : les onglets de studio et les chiffres clés restent visibles pendant qu'on
   descend dans la page. Deux étages collants, l'un sous l'autre. */
.reporting .bar{position:sticky;top:0;z-index:30;background:var(--background);padding-top:6px}
.reporting .rep-resume{position:sticky;top:46px;z-index:29;background:var(--background);
  padding-block:8px;margin-top:0;border-bottom:1px solid var(--line)}
/* Reporting sur téléphone : les studios sur une ligne qui défile au doigt, les réglages
   passent dessous et reviennent à la ligne au lieu de sortir de l'écran. La barre devient
   plus haute que prévu, donc rien ne colle en haut : elle mangerait l'écran. */
/* Reporting sur ordinateur : une seule ligne, « Mettre à jour » et la maison en haut à droite.
   Tout ne tient d'une traite qu'à partir d'environ 1600px ; en dessous, onglets et réglages se
   resserrent un peu, et si la place manque encore ce sont les studios qui défilent. */
.rep-haut{align-items:flex-end}
.rep-haut .bar-right{align-self:flex-start;padding-top:2px}
.rep-haut .tabs{scrollbar-width:thin}
/* Un nom de studio ne se coupe jamais en deux lignes : les onglets défilent plutôt. */
.rep-haut .tab{flex:0 0 auto;white-space:nowrap}
/* Le champ « Depuis le » est une étiquette : sans ça, sa marge générale gonfle la barre et
   descend tous les réglages. */
.rep-haut .rep-depuis{margin:0}
/* Écran moyen : les studios gardent au moins 40 % de la ligne, les réglages reviennent à la
   ligne vers le bas, si bien que « Mettre à jour » et la maison restent sur la ligne du haut. */
@media(min-width:901px) and (max-width:1365px){
  .rep-haut .tabs{min-width:40%}
  .rep-haut .bar-right{flex:1 1 0;min-width:0;flex-wrap:wrap-reverse;justify-content:flex-end;row-gap:5px}
  /* La barre prend alors plusieurs étages : les chiffres clés ne collent plus dessous. */
  .reporting .rep-haut ~ #rapport .rep-resume{position:static}
}
@media(min-width:901px) and (max-width:1600px){
  .rep-haut .tab{padding:6px 7px;font-size:.88rem}
  .rep-haut .bar-right{gap:4px}
  .rep-haut .bascule,.rep-haut .picker summary,.rep-haut #refresh{padding-left:7px;padding-right:7px;font-size:.78rem}
  .rep-haut .rep-depuis{gap:3px}
  .rep-haut #meta{white-space:normal;max-width:6.5em;line-height:1.15;font-size:.72rem}
}
@media(max-width:900px){
  .reporting .rep-haut{position:static;flex-wrap:wrap;row-gap:6px}
  .rep-haut .tabs{flex:1 1 100%;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .rep-haut .tabs::-webkit-scrollbar{display:none}
  .rep-haut .tab{flex:0 0 auto;white-space:nowrap;padding:8px 12px}
  .rep-haut .bar-right{flex:1 1 100%;flex-wrap:wrap;gap:6px;padding-bottom:8px}
  .rep-haut .bascule,.rep-haut .picker summary,.rep-haut #refresh{min-height:34px;box-sizing:border-box;
    display:inline-flex;align-items:center}
  .rep-haut #accueil{width:34px;height:34px;margin-left:auto}
  /* Un champ sous 16px fait zoomer l'iPhone quand on le touche. */
  .rep-haut .rep-depuis input,.rep-haut .picker-search{font-size:16px}
  .rep-haut .rep-depuis input{min-height:34px}
  .rep-haut .rep-meta{white-space:normal;flex:1 1 100%;order:98}
  .rep-haut .rep-meta:empty{display:none}
  .rep-haut .picker-list{left:0;right:auto;max-width:calc(100vw - 24px)}
  .reporting .rep-haut ~ #rapport .rep-resume{position:static}
}

/* Reporting : deux graphes côte à côte par indicateur, semaine à gauche, mois à droite. */
.rep-meta{color:#4a6a63;font-size:.78rem;white-space:nowrap}
/* Date de départ choisie à la main, à côté de la profondeur. */
.rep-depuis{display:inline-flex;align-items:center;gap:5px;color:#4a6a63;font-size:.78rem;white-space:nowrap}
.rep-depuis input{min-height:0;padding:3px 7px;border:1px solid var(--line);border-radius:999px;font-size:.78rem;background:var(--surface);color:var(--ink)}
/* SALES : le nombre de jours d'avance et la recherche d'un nom, dans la barre du haut. */
.sales-reglage{display:inline-flex;align-items:center;gap:5px;color:#4a6a63;font-size:.78rem;white-space:nowrap}
.sales-reglage input{width:62px;min-height:0;padding:3px 6px;border:1px solid var(--line);border-radius:7px;font-size:.8rem;text-align:right}
.sales-recherche{width:140px;min-height:0;padding:3px 9px;border:1px solid var(--line);border-radius:999px;font-size:.78rem}
/* La rangée de réglages sous la barre : champs libres et boutons sur une même ligne. */
.sales-filtres{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:12px 0 4px}
.sales-groupe{display:inline-flex;align-items:center;gap:6px}
/* Un réglage qui ne sert pas à l'onglet ouvert se retire : sans cette ligne, le « display »
   ci-dessus l'emporte sur le masquage et le réglage reste affiché partout. */
.sales-reglage[hidden],.sales-groupe[hidden]{display:none}
.sales-titre{color:#4a6a63;font-size:.78rem}
.sales-filtres .conges-raccourcis{display:inline-flex;flex-wrap:wrap;gap:4px}
/* Le nom et son bouton de copie restent sur la même ligne, le bouton discret jusqu'au survol. */
.sales-membre{display:inline-flex;align-items:center;gap:5px}
.sales-copier{min-height:0;padding:0 4px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:#4a6a63;font-size:.72rem;line-height:1.5;cursor:pointer;opacity:.45}
.sales-membre:hover .sales-copier,.sales-copier:focus{opacity:1}
.sales-copier.fait{color:#05332a;border-color:#79bbae;background:#79bbae24;opacity:1}
/* Le nom d'un membre ouvre sa fiche : un bouton qui se lit comme un lien. */
/* Le nom est borné en largeur : quelques noms très longs élargissaient la colonne pour tout
   le monde et repoussaient les chiffres vers la droite. Le nom entier reste au survol. */
.sales-nom{min-height:0;max-width:150px;padding:0;border:0;background:none;color:var(--ink);font:inherit;text-align:left;text-decoration:underline;text-underline-offset:2px;cursor:pointer;display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.sales-nom:hover,.sales-nom:focus{color:#05332a;text-decoration-thickness:2px}
/* La fiche d'un membre reprend le panneau de la fiche d'un professeur ; il lui faut juste
   trois chiffres par ligne plutôt que deux, et le lien vers bsport sous son nom. */
#fiche-membre .fiche-chiffres{grid-template-columns:repeat(3,1fr)}
#fiche-membre .fiche-valeur{font-size:.95rem}
#fiche-membre .fiche-tete a{font-size:.78rem}
/* La chaleur d'un lead : une pastille dans sa colonne, et le même ton en liseré sur la ligne.
   Quatre tons du plus chaud au plus froid ; le rouge reste réservé au niveau brûlant. */
.sales-chaleur{display:inline-block;padding:1px 8px;border:1px solid;border-radius:999px;font-size:.74rem;white-space:nowrap}
.sales-chaleur.brulant{color:#a32800;border-color:#ff4000;background:#ff40001f}
.sales-chaleur.chaud{color:#8a4a06;border-color:#e08a2e;background:#e08a2e26}
.sales-chaleur.tiede{color:#05332a;border-color:#79bbae;background:#79bbae24}
.sales-chaleur.froid{color:#5c6b67;border-color:var(--line);background:transparent}
/* Les boutons du filtre portent la couleur de leur niveau ; le choix courant se remplit. */
.sales-filtre-chaleur{border-width:1px;border-style:solid}
.sales-filtre-chaleur.brulant{color:#a32800;border-color:#ff4000}
.sales-filtre-chaleur.chaud{color:#8a4a06;border-color:#e08a2e}
.sales-filtre-chaleur.tiede{color:#05332a;border-color:#79bbae}
.sales-filtre-chaleur.froid{color:#5c6b67;border-color:#b9c4c1}
.sales-filtre-chaleur.brulant.maintenant{background:#ff40001f}
.sales-filtre-chaleur.chaud.maintenant{background:#e08a2e26}
.sales-filtre-chaleur.tiede.maintenant{background:#79bbae24}
.sales-filtre-chaleur.froid.maintenant{background:#e9eeec}
.sales-ligne td:first-child{border-left:3px solid transparent}
.sales-ligne.brulant td:first-child{border-left-color:#ff4000}
.sales-ligne.chaud td:first-child{border-left-color:#e08a2e}
.sales-ligne.tiede td:first-child{border-left-color:#79bbae}
.sales-ligne.froid td:first-child{border-left-color:#d8dedc}
.rep-resume{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin:14px 0 6px}
.rep-carte{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--surface)}
.rep-label{display:block;color:#4a6a63;font-size:.74rem}
.rep-valeur{font-size:1.25rem;font-weight:600;display:block;line-height:1.2}
.rep-var{font-size:.74rem}
/* Le même montant hors TVA, sous le montant TVA comprise : petit, gris, à sa place. */
.rep-sous{display:block;font-size:.78rem;color:#4a6a63;line-height:1.3}
/* Une comparaison avec l'an dernier se lit d'un coup d'œil : vert en avance, rouge en retard. */
.rep-valeur.hausse{color:var(--green)}
.rep-valeur.baisse{color:var(--red)}
.rep-var.hausse{color:var(--green)}
.rep-var.baisse{color:var(--red)}
/* Tous les graphes de la page dans une seule grille : ils ont donc tous la même largeur et se
   lisent deux par ligne, sans demi-ligne vide. Un seul graphe par ligne sur un écran de poche. */
/* Deux graphes par ligne, toujours de même largeur. Sous 900 px de fenêtre, celui de droite
   passe sous celui de gauche et prend toute la largeur disponible. */
/* minmax(0,1fr) et non 1fr : sinon un graphe au contenu large (barres serrées, long titre)
   élargit sa colonne et celle de gauche devient plus large que celle de droite. */
.rep-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start;margin-top:14px}
@media(max-width:900px){.rep-grille{grid-template-columns:1fr}}
.rep-grille .rep-section{grid-column:1/-1}
/* Un graphe qui a besoin de toute la largeur : le professeur par professeur, par exemple. */
.rep-grille .rep-pleine-largeur{grid-column:1/-1}
/* Méthode du revenu réel : dite une fois, sur toute la largeur, sous ses graphes.
   Case rouge rosé, demandée par Pierre : on ne lit pas ces chiffres sans elle. */
.rep-methode{grid-column:1/-1;color:var(--red);font-size:.78rem;margin:0;padding:8px 12px;
  border:1px solid #f0c5bd;border-radius:12px;background:var(--red-bg)}
.rep-aide{color:#4a6a63;font-size:.78rem;margin:2px 0 8px}
.rep-figure{margin:0;min-width:0;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--surface)}
/* Une colonne par période : le chiffre au-dessus, la barre, le repère de temps en dessous. */
/* Aucun écart entre les colonnes : c'est la barre qui se resserre d'un pixel de chaque côté. Les
   colonnes se partagent alors la largeur en parts strictement égales, et le point d'une courbe
   d'année précédente tombe pile au milieu de sa barre. */
.rep-chart{position:relative;display:flex;align-items:flex-end;gap:0;height:300px;padding-top:14px}
/* Années superposées : douze mois en abscisse, une ligne et une couleur par année. */
/* Le dessin suit la largeur de sa carte et sa hauteur en découle : à hauteur fixe, un graphe
   large laissait du vide de chaque côté. */
.rep-lignes{display:block;width:100%;height:auto;aspect-ratio:760/260}
.rep-axe{font-size:9px;fill:#4a6a63}
/* Chiffre du mois, posé au-dessus de sa barre. */
.rep-valeur-barre{font-size:9px;fill:#4a6a63;font-variant-numeric:tabular-nums}
/* Deux bâtonnets par mois : le chiffre se resserre pour tenir sur chacun. */
.rep-valeur-duo{font-size:8px;fill:#4a6a63;font-variant-numeric:tabular-nums}
/* Chiffre écrit dans une part empilée : sa couleur vient de la part qui le porte. */
.rep-valeur-part{font-size:8px;font-variant-numeric:tabular-nums}
.rep-legende{display:flex;gap:8px;flex-wrap:wrap;font-weight:500}
.rep-annee{display:inline-flex;align-items:center;gap:4px;color:#4a6a63;font-size:.72rem;white-space:nowrap}
.rep-annee i{width:12px;height:3px;border-radius:2px;display:inline-block}
/* L'année en cours est dessinée en barres : sa pastille est un rectangle plein. */
.rep-annee i.barre{width:9px;height:11px;border-radius:2px}
.rep-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;height:100%;position:relative}
/* Le dessin de la colonne : la barre de l'année en cours, son chiffre, et les repères des
   années précédentes, tous posés sur la même hauteur de référence. */
.rep-plot{position:relative;display:block;flex:1 1 auto;width:100%;min-height:0}
.rep-bar{position:absolute;left:1px;right:1px;bottom:0;display:block;background:var(--sage);
  border-radius:2px 2px 0 0}
/* La dernière période n'est pas finie : elle se lit en creux, pas comme une chute. */
.rep-bar.encours{opacity:.45}
/* Barre ouverte en parts : la barre garde sa hauteur et son cadre, les parts se rangent dedans
   et leur empilement la remplit exactement. Les coins arrondis du haut sont ceux de la barre. */
.rep-bar.ouverte{background:none;overflow:hidden}
.rep-part{position:absolute;left:0;right:0;display:block;overflow:hidden}
/* Le chiffre de la part, posé dedans quand elle est assez haute pour le porter. Il reste dans
   sa part : une colonne étroite le coupe plutôt que de le laisser déborder sur la voisine. */
.rep-part-val{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  text-align:center;font-size:.58rem;font-variant-numeric:tabular-nums;line-height:1;
  white-space:nowrap}
/* Les mêmes semaines des années précédentes, en courbes posées par-dessus les barres. La case
   couvre exactement la zone des barres : la marge du haut au-dessus, la hauteur fixe des
   étiquettes en dessous, pour que chaque point tombe à la hauteur de sa valeur. Le dessin, lui,
   remplit cette case : posé seul, il garderait sa taille propre et sortirait du cadre. */
.rep-courbes{position:absolute;left:0;right:0;top:14px;bottom:14px;pointer-events:none}
.rep-courbes svg{display:block;width:100%;height:100%;overflow:visible}
.rep-val{position:absolute;left:0;right:0;text-align:center;margin-bottom:2px;
  font-size:.62rem;font-variant-numeric:tabular-nums;color:#4a6a63;line-height:1.1;
  white-space:nowrap}
.rep-x{font-size:.62rem;color:#4a6a63;line-height:1.1;white-space:nowrap;margin-top:3px;height:11px}
/* Trait de moyenne, posé à la hauteur de la moyenne et non sur une barre. */
.rep-moyenne{position:absolute;left:0;right:0;border-top:1px dashed var(--ink);opacity:.55;pointer-events:none}
.rep-titre{font-size:.82rem;font-weight:600;margin-bottom:6px;display:flex;justify-content:space-between;gap:8px}
/* Chiffre du trait pointillé, annoncé en haut du graphe. */
.rep-moy-val{font-weight:500;color:#4a6a63;font-variant-numeric:tabular-nums;white-space:nowrap}
/* Intertitre entre les indicateurs d'activité et ceux d'argent. */
.rep-section{font-size:1.05rem;margin:30px 0 0;padding-top:14px;border-top:1px solid var(--line)}
.rep-pied{color:#4a6a63;font-size:.72rem;margin-top:6px}

/* Page Reformer : un bâtonnet par professeur, puis son évolution semaine par semaine.
   Les noms sont écrits verticalement sous les barres : à quarante professeurs, ils ne
   tiendraient pas à l'horizontale et se chevaucheraient. */
.ref-chart{height:360px}
/* Trait de moyenne du Reporting Reformer : noir franc, et posé par-dessus les bâtonnets pour
   qu'on voie tout de suite qui passe au-dessus et qui reste en dessous (demande de Pierre). */
.profs .rep-moyenne{border-top-color:#000;opacity:1;z-index:3}
/* Professeur sous la moyenne : bâtonnet rouge rosé, la lecture se fait sans compter. */
.profs .rep-bar.sous-moyenne{background:#f0a89c}
/* Le trait de moyenne se pose dans la zone des bâtonnets, et non sur toute la hauteur de la
   carte : sinon il tombe sous sa vraie valeur, à cause de la place prise par les étiquettes. */
.profs .rep-chart .ref-zone{position:absolute;left:0;right:0;top:14px;bottom:14px;pointer-events:none}
.profs .ref-chart .ref-zone{bottom:96px}
.profs .ref-zone .rep-moyenne{bottom:0}
/* Présents par cours au-dessus du bâtonnet, revenu réel du cours écrit dans sa base. */
.ref-presents{display:block;font-weight:600;line-height:1.1}
.ref-revenu{position:absolute;left:0;right:0;bottom:3px;text-align:center;font-style:normal;
  font-size:.6rem;font-variant-numeric:tabular-nums;color:#05332a;white-space:nowrap}
/* Cours donnés : un point sur sa propre échelle, avec son chiffre à côté. Il dit combien de
   cours portent la moyenne du bâtonnet, donc à quel point elle est solide. */
.ref-point{position:absolute;left:0;right:0;display:flex;align-items:center;justify-content:center;
  gap:2px;pointer-events:none;z-index:2}
.ref-pastille{width:6px;height:6px;border-radius:50%;background:var(--ink);display:inline-block;flex:0 0 auto}
.ref-cours{font-style:normal;font-size:.55rem;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.rep-annee i.ref-pastille{width:7px;height:7px;border-radius:50%}
/* Le premier intertitre ouvre la page : pas de trait ni d'écart au-dessus de lui. */
.rep-grille .rep-section.ref-premiere{margin-top:0;padding-top:0;border-top:0}
.ref-col .rep-x{height:96px;display:flex;justify-content:center;align-items:flex-start;overflow:hidden}
.ref-nom{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;max-height:94px;
  overflow:hidden;text-overflow:ellipsis;font-size:.66rem;color:#4a6a63}
.ref-wrap{margin-top:14px}
/* Bâtonnet et ligne de tableau ouvrent la fiche du professeur : le curseur le dit. */
.profs .ref-col,.ref-ligne{cursor:pointer}
.ref-ligne:focus-visible{outline:2px solid var(--sage);outline-offset:-2px}
/* La fiche professeur porte six colonnes de chiffres : elle a besoin de plus de largeur que
   la fiche d'un cours, sans jamais dépasser l'écran. */
.ref-fiche{width:min(620px,96vw);padding:18px 22px}
.ref-fiche h3{margin:18px 0 6px}
.ref-fiche-titre{margin-top:20px}
.ref-fiche-table th{text-align:left;color:#4a6a63;font-weight:600;font-size:.72rem;
  border-bottom:1px solid var(--line);padding-bottom:3px}
.ref-fiche-table th.num{text-align:right}
.ref-fiche-table td{white-space:nowrap}
/* Un bloc par studio dans la fiche : un trait fin le sépare du précédent, et la moyenne du
   studio est rappelée à côté de son nom pour comparer le professeur à sa salle. */
.ref-groupe>td{border-top:1px solid var(--ink);padding-top:8px;font-weight:600;
  background:var(--tint);white-space:normal}
.ref-fiche-table tbody tr:first-child.ref-groupe>td{border-top:0}
.ref-repere{font-weight:400;color:#4a6a63;font-size:.9em;margin-left:8px}
/* La moyenne du professeur se lit contre celle de sa salle : au-dessus en vert, en dessous en
   rouge, et la moyenne du studio reste en retrait puisqu'elle n'est qu'un repère. */
.ref-dessus{color:var(--green);font-weight:600}
.ref-dessous{color:var(--red);font-weight:600}
.ref-repere-cell{color:#4a6a63}
.ref-table{width:100%;border-collapse:collapse;font-size:.8rem;background:var(--surface)}
.ref-table th,.ref-table td{border-top:1px solid var(--line);padding:5px 8px;text-align:left;white-space:nowrap}
.ref-table thead th{background:var(--ink);color:#fff;border:0;position:sticky;top:0;z-index:2;font-weight:600}
.ref-table .num{text-align:right;font-variant-numeric:tabular-nums}
.ref-table tbody tr:hover{background:var(--tint)}
/* La ligne du total, en bas d'un tableau : elle se détache de la liste qu'elle résume. */
.ref-table tr.ref-total td{font-weight:600;background:var(--tint);border-top:2px solid var(--ink)}
/* Quand la liste est moins large que l'écran, le tableau distribue la place restante entre
   ses colonnes et écarte celles de gauche les unes des autres. C'est la dernière colonne qui
   prend tout le mou : les premières restent alors collées, dans l'ordre où on les lit. */
#liste th:last-child,#liste td:last-child{width:100%}
/* Les noms de pass de la billetterie sont interminables et tiraient la ligne sur deux écrans.
   Chaque case est bornée, le texte entier revient au survol. */
#liste td{max-width:240px;overflow:hidden;text-overflow:ellipsis}
/* En-tête cliquable : il classe le tableau, la flèche dit dans quel sens. */
.ref-tri{cursor:pointer;user-select:none}
.ref-tri:hover,.ref-tri:focus-visible{background:#0a4437}
.ref-fleche{margin-left:5px;font-size:.8em}
.ref-studios{color:#4a6a63;font-size:.92em;max-width:220px;overflow:hidden;text-overflow:ellipsis}
/* La courbe d'un professeur : même échelle pour tout le tableau, donc deux lignes se comparent. */
.ref-spark{width:170px;height:34px;display:block}
.ref-spark .ligne{fill:none;stroke:var(--sage);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.ref-spark .point{fill:var(--ink)}
.ref-hausse{color:var(--green)}
.ref-baisse{color:var(--red)}
.ref-stable{color:#4a6a63}

/* Page Comptes : une ligne par compte invité, une case à cocher par page ouverte. */
.users-titre{font-size:1.2rem;margin:0;padding-bottom:6px}
.users-table td,.users-table th{vertical-align:middle}
/* Le nom reste collé à gauche quand on fait défiler les pages cochées vers la droite
   (demande de Pierre 2026-09-23). Fond plein, sinon les cases passeraient dessous en transparence. */
.users-table td:first-child,.users-table th:first-child{position:sticky;left:0;z-index:1;
  background:var(--surface);box-shadow:1px 0 0 var(--line)}
.users-table thead th:first-child{z-index:3;background:var(--ink)}
.users-table tbody tr:hover>td:first-child{background:#eef6f4}
.users-table input[type=checkbox]{width:17px;height:17px;cursor:pointer}
.users-mdp{display:flex;gap:6px;align-items:center}
.users-mdp input{width:190px;padding:4px 8px;font-size:.8rem}
.users-poser{background:var(--ink);color:#fff;border-color:var(--ink);cursor:pointer;padding:4px 12px;border-radius:999px;font-size:.78rem}
.users-retirer{background:var(--surface);color:var(--red);border:1px solid #f0c5bd;cursor:pointer;padding:4px 12px;border-radius:999px;font-size:.78rem}
/* Le crayon d'une ligne et la fiche qu'il ouvre : identifiant, nom, nouveau mot de passe. */
.users-crayon{background:var(--surface);border:1px solid var(--line);cursor:pointer;
  padding:3px 9px;border-radius:999px;font-size:.9rem;line-height:1;margin-right:6px}
.users-crayon:hover{border-color:var(--ink);background:var(--tint)}
.users-actions{white-space:nowrap}
.users-manque{color:var(--red);font-size:.8rem}
.users-fiche>td{background:var(--tint)}
.users-form{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:flex-end;padding:6px 0}
.users-form label{margin:0;font-size:.76rem;color:#4a6a63}
.users-form input{display:block;min-width:230px;padding:6px 9px;font-size:.86rem;color:var(--ink)}
.users-form button{background:var(--ink);color:#fff;border-color:var(--ink);cursor:pointer;padding:7px 16px}
.users-form .users-annuler{background:var(--surface);color:var(--ink);border-color:var(--line)}
.users-ajout{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:flex-end;margin:14px 0}
.users-ajout label{margin:0;font-size:.8rem;color:#4a6a63}
.users-ajout input{display:block;min-width:230px;padding:7px 10px;font-size:.9rem;color:var(--ink)}
.users-ajout button{background:var(--ink);color:#fff;border-color:var(--ink);cursor:pointer;padding:8px 18px}
/* Retour du formulaire d'ajout, juste après le bouton : en vert s'il a réussi, en rouge sinon. */
/* Le retour d'un enregistrement : la ligne s'allume un instant, avec « Enregistré ✓ ». */
.users-table tr.users-enregistre>td{background:var(--green-bg)}
.users-marque{margin-left:8px;color:var(--green);font-size:.78rem;white-space:nowrap}
.users-retour{font-size:.82rem;color:var(--green);max-width:460px}
.users-retour.rate{color:var(--red)}
.users-cases{display:flex;gap:4px 14px;flex-wrap:wrap;align-items:center}
.users-cases .picker-line{font-size:.82rem;margin:0}
/* Les cases du formulaire d'ajout ne sont pas des champs de saisie : elles gardent leur taille. */
.users-cases input{min-width:0;width:17px;height:17px;display:inline-block;padding:0}

/* Fiche d'un cours : colonne fixée à droite, le tableau reste lisible derrière. */
.fiche{position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);z-index:40;overflow:auto;
  background:var(--surface);border-left:1px solid var(--line);box-shadow:-8px 0 24px #05332a22;padding:16px 18px}
.fiche-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.fiche-tete h2{margin:0;font-size:1.05rem}
.fiche-tete p{margin:2px 0 0;color:#4a6a63;font-size:.82rem}
#fiche-fermer{background:none;border:0;font-size:1.5rem;line-height:1;cursor:pointer;color:#4a6a63;padding:0 4px}
.fiche-chiffres{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0}
.fiche-bloc{border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--background)}
.fiche-label{display:block;color:#4a6a63;font-size:.72rem}
.fiche-valeur{font-size:1.05rem;font-weight:600}
.fiche-figure{margin:0 0 14px}
.fiche-figure svg{width:100%;height:120px;display:block}
/* Une seule série : le vert de la marque. Le repère de moyenne reste en retrait. */
.fiche-figure .barre{fill:var(--sage)}
.fiche-figure .repere{stroke:var(--ink);stroke-width:1;stroke-dasharray:3 3;opacity:.55;vector-effect:non-scaling-stroke}
.fiche-figure figcaption{color:#4a6a63;font-size:.72rem;margin-top:6px}
/* La valeur écrite au-dessus de chaque bâtonnet de la figure. */
.fiche-figure .fiche-val{font-size:8px;fill:#4a6a63;font-variant-numeric:tabular-nums}
/* Le mois sous chaque bâtonnet de l'évolution d'un cours (tableau de bord, Deep Dive). */
.fiche-figure.avec-mois svg{height:134px}
.fiche-figure .fiche-mois{font-size:7.5px;fill:#4a6a63}
.fiche-vide{color:#4a6a63;font-size:.82rem}
.fiche h3{font-size:.85rem;margin:0 0 6px}
/* Ce que disent les colonnes de la liste des séances, en une ligne au-dessus du tableau. */
.fiche-note{color:#4a6a63;font-size:.72rem;margin:0 0 6px}
/* Méthode du revenu réel, en bas de fiche : même case rouge rosé que sur le reporting. */
.fiche-methode{margin:14px 0 0;padding:8px 10px;border:1px solid #f0c5bd;border-radius:10px;
  background:var(--red-bg);color:var(--red);font-size:.72rem;line-height:1.35}
.fiche-table{width:100%;border-collapse:collapse;font-size:.78rem}
.fiche-table td{border-top:1px solid var(--line);padding:4px 2px;white-space:nowrap}
.fiche-table .num{text-align:right;font-variant-numeric:tabular-nums}
.remplacant{color:#4a6a63;font-size:.9em}

/* Retour à l'accueil professeurs : la petite maison, légèrement verte, toujours tout à droite
   de la barre (demande du 2026-09-24). */
#accueil{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border:1px solid #bcdcd4;border-radius:7px;background:#c4e3dc;color:var(--ink);flex:0 0 auto;order:99}
#accueil:hover,#accueil:focus-visible{border-color:var(--ink);background:var(--sage)}
/* Le bouton « Mettre à jour » de l'espace professeurs, juste avant la maison (2026-10-13). */
#maj-profs{order:98;flex:0 0 auto;cursor:pointer;font-family:inherit}
#maj-profs:disabled{opacity:.6;cursor:progress}

/* Page d'accueil : le sommaire des outils internes. Une tuile par outil, en grille. */
/* Le sommaire commence tout de suite : peu de vide au-dessus du logo. */
.accueil-tete{text-align:center;margin:4px 0 8px}
.accueil-logo{height:34px;width:auto;margin-bottom:12px}
.accueil-tete h1{font-size:1.9rem;margin:0}
.accueil-sous{color:#4a6a63;margin:6px 0 0;font-size:1.15rem}
/* Le nom de la ville, sous le logo : il n'apparait que hors de Bruxelles, qui est la racine. */
.accueil-ville{color:#05332a;margin:10px 0 0;font-size:1.35rem;font-weight:600;letter-spacing:.02em}
/* La pensée du jour, juste sous la phrase d'accueil : un cadre bleu ciel, fond teinté. */
.citation{max-width:620px;margin:22px auto 0;padding:18px 22px;border:1px solid #79bbae;
  border-radius:14px;background:#79bbae24;text-align:center}
.citation-titre{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:#05332a;margin-bottom:10px}
.citation-texte{margin:0;font-size:1.02rem;line-height:1.5;color:var(--ink);font-style:italic}
.citation-auteur{margin:8px 0 0;font-size:.85rem;color:#4a6a63}
/* Zone compte du sommaire : un seul bouton visible à la fois, centré sous la citation,
   avec l'adresse e-mail juste avant le bouton de déconnexion. */
.compte{display:flex;align-items:center;justify-content:center;gap:10px;margin:22px 0 0;min-height:38px}
.compte button{background:var(--ink);color:#fff;cursor:pointer;padding:8px 18px;border-color:var(--ink)}
.compte #deconnexion{background:var(--surface);color:var(--ink);border-color:var(--line)}
.compte #deconnexion:hover{border-color:var(--ink)}
.compte-qui{color:#4a6a63;font-size:.9rem}
#connexion{margin-top:20px}
/* Les trois entrées de l'intranet, sous la citation (Pierre, 2026-10-15) : l'intranet,
   l'accès professeur et l'accès studio, côte à côte, celle où l'on se trouve en vert sombre. */
.espaces{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:22px 0 0}
.espace{min-width:150px;text-align:center;padding:10px 18px;border:1px solid var(--line);
  border-radius:999px;background:var(--surface);color:var(--ink);text-decoration:none;font-weight:600}
.espace:hover,.espace:focus-visible{border-color:var(--ink);background:var(--tint)}
.espace.actif{background:#05332a;border-color:#05332a;color:#fff}
@media(max-width:520px){.espace{flex:1 1 100%}}

/* Sommaire (demande de Pierre 2026-09-19) : le planning seul sur la première ligne, les trois
   reportings sur la deuxième, le Tracker, le comportement et Member Success sur la troisième,
   Member Care et le défi sur la quatrième, les comptes et Super Power sous le trait. Chaque
   case qui ouvre une ligne revient à gauche, ce qui force le passage à la ligne suivante ;
   l'ordre du document fait le reste, et une case masquée ne laisse pas de trou. */
.accueil-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:32px 0}
.accueil-grille .tuile[data-page="planning"],.accueil-grille .tuile[data-page="reporting"],
.accueil-grille .tuile[href^="https://tracker."],.accueil-grille .tuile[data-page="membercare"],
.accueil-grille .tuile[href="/users"]{grid-column:1}
@media(max-width:860px){.accueil-grille{grid-template-columns:1fr}
  .accueil-grille .tuile{grid-column:auto}}
/* Le sommaire d'une autre ville que Bruxelles porte un fond bleu ciel tres pale : on voit d'un
   coup d'oeil qu'on n'est pas sur Bruxelles. La teinte est celle de la maison. */
:root[data-ville="lyon"]{background:#eef7f5}
/* Sommaire d'une ville : le planning seul sur la premiere ligne, les trois reportings sur la
   deuxieme, les deux lectures par membre sur la troisieme (demande de Pierre 2026-09-18).
   La place de chaque case est posee ici, l'ordre du document reste celui de Bruxelles. Chaque
   case garde la taille des autres : le planning ouvre sa ligne a gauche, sans s'etirer. */
.ville-sommaire .tuile[data-page="planning"]{grid-column:1;grid-row:1}
.ville-sommaire .tuile[data-page="reporting"]{grid-column:1;grid-row:2}
.ville-sommaire .tuile[data-page="yoga"]{grid-column:2;grid-row:2}
.ville-sommaire .tuile[data-page="reformer"]{grid-column:3;grid-row:2}
.ville-sommaire .tuile[data-page="success"]{grid-column:1;grid-row:3}
.ville-sommaire .tuile[data-page="comportement"]{grid-column:2;grid-row:3}
/* La page des professeurs ferme la ligne des lectures par membre. */
.ville-sommaire .tuile[data-profs]{grid-column:3;grid-row:3}
/* Comme a Bruxelles : le trait ferme les rapports, et les comptes se rangent tout en bas. */
.ville-sommaire .accueil-separateur{grid-row:4}
.ville-sommaire .tuile[data-comptes]{grid-column:1;grid-row:5}
/* En colonne unique (telephone), les cases se suivent simplement, dans l'ordre du document. */
@media(max-width:860px){.ville-sommaire .tuile{grid-column:auto;grid-row:auto}}
/* Le break-even du planning : un bouton et son champ, cote a cote dans la barre du haut. */
.be-zone{display:inline-flex;align-items:center;gap:4px}
.be-zone input{width:92px;height:26px;padding:0 6px;border:1px solid var(--line);border-radius:7px;
  background:var(--surface);color:inherit;font:inherit;font-size:.85rem}
/* Le choix de la ville : en haut a droite du sommaire, et a cote de la maison sur les pages
   de rapport. Meme apparence aux deux endroits, discrete, a la hauteur des autres boutons.
   Le choix de la langue (FR/EN) se range juste a cote, dans la meme zone et au meme format. */
.ville-zone{display:flex;justify-content:flex-end;gap:6px;margin:0 0 -18px}
#ville-choix,#langue-choix{height:26px;padding:0 6px;border:1px solid var(--line);border-radius:7px;
  background:var(--surface);color:inherit;font:inherit;font-size:.85rem;cursor:pointer}
#ville-choix:hover,#ville-choix:focus-visible,
#langue-choix:hover,#langue-choix:focus-visible{border-color:var(--ink);background:var(--tint)}
/* display:block l'emporte sur la regle [hidden] du navigateur : sans cette ligne, une tuile
   masquee (un outil qui n'existe pas dans cette ville, ou une page fermee a un invite)
   restait affichee malgre tout. */
.tuile[hidden]{display:none}
.tuile{position:relative;display:block;padding:22px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:inherit;text-decoration:none}
.tuile:hover,.tuile:focus-visible{border-color:var(--sage);background:var(--tint)}
.tuile h2{margin:0 0 6px}
/* Repère court d'une tuile du sommaire (Pierre, 2026-10-09). */
.tuile[data-code]::after{content:attr(data-code);position:absolute;top:10px;right:14px;font-size:.75rem;font-weight:600;color:#4a6a63;letter-spacing:.02em}
.tuile[data-code] h2{padding-right:28px}
.tuile p{margin:0;color:#4a6a63;font-size:.9rem}
/* Le repère cliquable : même vert que les boutons du site, sans en être un. */
.tuile-action{display:inline-block;margin-top:16px;padding:8px 16px;border-radius:7px;background:var(--ink);color:#fff;font-size:.9rem}
/* Le trait qui sépare les rapports, au-dessus, des outils de support, en dessous. */
.accueil-separateur{grid-column:1/-1;border:0;border-top:1px solid var(--line);margin:10px 0 2px}
.accueil-pied{text-align:center;color:#4a6a63;font-size:.82rem;margin:40px 0}

/* ——— Yoga Room Super Power ————————————————————————————————————————————
   Le développement de la page est en pause : elle recueille les idées de chacun. Une page
   presque vide, un bonjour, et une grande zone d'écriture qui prend toute la hauteur. */
.ia-carnet{max-width:900px;margin:0 auto;display:flex;flex-direction:column;height:calc(100vh - 92px)}
.ia-bonjour{font-size:1.6rem;margin:18px 0 4px}
.ia-intro{color:#4a6a63;margin:0 0 14px;max-width:70ch}
.ia-zone{flex:1;width:100%;border:1px solid var(--line);border-radius:14px;background:var(--surface);
  padding:16px 18px;font:inherit;line-height:1.55;resize:none;color:var(--ink)}
.ia-zone:focus{outline:none;border-color:var(--sage)}
@media(max-width:820px){.ia-carnet{height:calc(100vh - 80px)}.ia-bonjour{font-size:1.35rem}}

/* ——— Le pouls du MemberCare ————————————————————————————————————————————
   Quatre chiffres en haut, la courbe des jours, le tableau par studio, puis une carte de
   sujets par studio. */
.mc-dessous{color:#7d918c;font-size:.76rem;margin-top:3px}
.mc-courbe{display:flex;align-items:flex-end;gap:2px;height:150px;border-bottom:1px solid var(--line);padding:0 2px}
/* Une colonne par jour : son nombre en haut, son bâtonnet dessous. */
.mc-col{flex:1;min-width:2px;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;position:relative}
/* Le point : sur les e-mails reçus ce jour-là, ceux qui ont reçu une réponse. */
.mc-point{position:absolute;left:50%;width:6px;height:6px;margin-left:-3px;margin-bottom:-3px;border-radius:50%;background:var(--ink);border:1px solid #fff}
.mc-val{font-size:.62rem;color:#7d918c;text-align:center;line-height:1.1;margin-bottom:2px;font-variant-numeric:tabular-nums}
.mc-barre{background:var(--sage);border-radius:2px 2px 0 0}
.mc-col:hover .mc-barre{background:var(--ink)}
.mc-col:hover .mc-val{color:var(--ink)}
/* Trop de jours pour la largeur disponible : les nombres se cachent, le survol les donne. */
@media(max-width:1100px){.mc-val{display:none}}
/* ——— Member Success : les classements de membres ————————————————————————
   Deux classements par ligne sur grand écran, un seul sur téléphone. */
.ms-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(520px,1fr));gap:16px;margin:16px 0 10px}
/* Les trois classements de la période tiennent sur une ligne — ils n'ont que trois colonnes
   de chiffres — et les deux classements de fond, plus larges, se partagent la ligne suivante. */
.ms-grille{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.ms-grille.ms-fond{grid-template-columns:repeat(auto-fit,minmax(520px,1fr))}
/* La règle générale des sections plafonne leur largeur à 420 px et les centre : ici la carte
   doit remplir sa colonne, sinon les tableaux se retrouvent à l'étroit. */
.ms-carte{border:1px solid var(--line);border-radius:12px;background:var(--surface);
  padding:16px 18px;max-width:none;width:100%;margin:0}
.ms-carte h2{margin:0 0 4px;font-size:1.05rem}
.ms-carte .rep-aide{margin:0 0 10px}
.ms-carte .table-wrap{max-height:none}
/* Valeur vie : cent noms dans la page, vingt-cinq visibles d'un coup, la suite au défilement.
   676 px = 26 lignes de 26 px (l'en-tête, qui reste collé en haut, plus vingt-cinq membres). */
.ms-carte .table-wrap.ms-defile{max-height:676px}
.ms-rang{width:34px;color:#7d918c;font-variant-numeric:tabular-nums}
.ms-podium td{background:var(--tint)}
.ms-podium .ms-rang{color:var(--ink);font-weight:600}
/* Le classement valeur vie s'ouvre au clic : la ligne se donne pour cliquable. */
.ms-ligne{cursor:pointer}
@media(max-width:760px){.ms-grille{grid-template-columns:1fr}}

/* Les quatre périodes, côte à côte dans la barre du haut. */
.mc-periodes{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
/* Le baromètre du ton : une note, une jauge du rouge au vert, et les trois humeurs. */
/* Même largeur que le tableau des studios, juste au-dessus : les deux se lisent ensemble. */
.mc-barometre{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:18px 20px;margin-bottom:10px}
.mc-jauge-tete{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.mc-jauge-note{font-size:2.1rem;font-weight:600;line-height:1}
.mc-jauge-sur{color:#7d918c;font-size:.9rem}
.mc-jauge-dit{color:#4a6a63;font-size:.9rem;margin-left:8px}
.mc-jauge{position:relative;height:12px;border-radius:8px;background:linear-gradient(90deg,var(--accent) 0%,#e8a33d 35%,#cfcf6a 55%,var(--sage) 78%,var(--green) 100%)}
.mc-aiguille{position:absolute;top:-5px;width:4px;height:22px;border-radius:3px;background:var(--ink);margin-left:-2px;box-shadow:0 0 0 2px #fff}
.mc-jauge-bornes{display:flex;justify-content:space-between;color:#7d918c;font-size:.74rem;margin-top:6px}
.mc-humeurs{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px;font-size:.84rem;color:#4a6a63;align-items:baseline}
.mc-humeurs b{color:var(--ink)}
/* Le détail des grands sujets : un bloc par sujet, pleine largeur. */
/* Les quatre grands sujets côte à côte : deux par ligne sur un écran d'ordinateur, l'un sous
   l'autre sur un téléphone. Chaque carte porte sa jauge de fréquence sous son titre. */
.mc-detail{display:grid;grid-template-columns:repeat(auto-fit,minmax(430px,1fr));gap:14px;margin:12px 0 28px}
/* La carte du défi prend l'écran : toute la largeur disponible, et toute la hauteur qui reste
   sous le bandeau. Le titre et l'explication restent en haut, le tableau occupe le reste et
   défile à l'intérieur — c'est lui qui bouge, pas la page. */
/* Pas de carte autour du tableau du défi : le cadre dans le cadre rétrécissait la zone utile.
   Le tableau lui-même est la zone blanche, et il prend l'écran. */
/* La règle générale des sections plafonne leur largeur à 420 px et les centre : c'est ce qui
   donnait une colonne étroite, façon téléphone, au milieu d'un écran d'ordinateur. Ici la zone
   prend toute la largeur disponible. */
.ch-carte{padding:0;border:0;background:none;border-radius:0;display:flex;flex-direction:column;
  height:calc(100vh - 86px);box-sizing:border-box;max-width:none;width:100%;margin:0}
/* Un peu d'air entre la ligne des filtres et le titre : les deux se collaient. */
.ch-carte>h2{margin:18px 0 4px}
/* Bord à bord : la page du défi ne garde aucune marge latérale, le tableau va d'un bord de
   l'écran à l'autre. Le bandeau et le titre gardent, eux, une petite respiration. */
.ch-page{padding:0}
.ch-page .bar,.ch-page>#app>.ch-carte>h2,.ch-page>#app>.ch-carte>.rep-aide,.ch-page .ch-note{padding-left:14px;padding-right:14px}
.ch-page .ch-carte .table-wrap{border-left:0;border-right:0;border-radius:0}
.ch-page .ch-carte{height:calc(100vh - 94px)}
.ch-carte h2{flex:none}
.ch-carte .rep-aide{flex:none}
.ch-carte .table-wrap{border-radius:8px;flex:1 1 auto;min-height:0;max-height:none;margin-top:12px}
/* La note explicative passe sous la carte : elle ne doit pas rogner sa hauteur. */
.ch-note{margin-top:14px}
.mc-jauge{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.mc-jauge-piste{flex:1;height:8px;border-radius:99px;background:var(--tint);overflow:hidden}
.mc-jauge-trait{display:block;height:100%;border-radius:99px;background:var(--ink)}
.mc-jauge-val{font-size:.76rem;color:var(--ink-soft);white-space:nowrap;font-variant-numeric:tabular-nums}
.mc-bloc h3{display:flex;align-items:baseline;gap:10px;margin:0 0 10px;font-size:1rem}
.mc-bloc .table-wrap{max-height:none}
.mc-exemples{display:block;color:#7d918c;font-size:.74rem;margin-top:2px;line-height:1.3}
.mc-cartes{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;margin:12px 0 28px}
.mc-carte{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:16px 18px}
.mc-carte h3{margin:0 0 12px;font-size:1rem}
.mc-ligne{display:grid;grid-template-columns:1fr 90px 34px;align-items:center;gap:8px;margin-bottom:6px;font-size:.84rem}
.mc-nom{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#33534c}
.mc-piste{background:var(--tint);border-radius:4px;height:9px}
.mc-piste i{display:block;height:100%;background:var(--sage);border-radius:4px}
.mc-nombre{text-align:right;color:#4a6a63;font-variant-numeric:tabular-nums}
@media(max-width:700px){.mc-cartes{grid-template-columns:1fr}.mc-detail{grid-template-columns:1fr}.mc-courbe{height:90px}}

@media(max-width:700px){main.wide{padding:8px}table.grid{font-size:.72rem}.table-wrap{max-height:none}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* ——— 21 days Hot Yoga Challenge ———————————————————————————————————————
   Vingt et une colonnes de journées, plus le rang, le nom et le total : le tableau défile
   horizontalement sur un petit écran, et le nom reste collé à gauche pour qu'on sache
   toujours de qui parle la ligne. */
/* Le tableau occupe toute la largeur de la page : les colonnes de journées se partagent la
   place qui reste après le rang et le nom, plutôt que de se tasser à gauche. */
/* Deux fois et demie la largeur de l'écran (demande de Pierre) : les journées ont de la place,
   et le tableau défile horizontalement ; le rang, le nom et le total restent collés en vue. */
.ch-table{font-size:.82rem;width:100%;table-layout:fixed}
/* Tout est centré dans sa case — le rang, le total, chaque journée — sauf le nom, qui reste
   aligné à gauche : une liste de noms se lit par sa première lettre. */
.ch-table th,.ch-table td{text-align:center;vertical-align:middle}
.ch-table .ch-nom{text-align:left}
.ch-table .ch-nom{position:sticky;left:40px;background:var(--surface);z-index:1;width:16%;
  min-width:160px;overflow:hidden;text-overflow:ellipsis}
.ch-table thead .ch-nom{background:var(--ink);z-index:3}
.ch-table .ms-rang{position:sticky;left:0;background:var(--surface);z-index:1}
.ch-table thead .ms-rang{background:var(--ink);z-index:3}
.ch-table .ms-podium .ch-nom,.ch-table .ms-podium .ms-rang{background:var(--tint)}
.ch-jour{text-align:center;padding:3px 4px;line-height:1.05}
.ch-sem{display:block;font-size:.62rem;opacity:.75;text-transform:capitalize}
.ch-num{display:block;font-variant-numeric:tabular-nums}
.ch-case{text-align:center;color:#7d918c;font-variant-numeric:tabular-nums;padding:5px 2px}
/* Venue une fois : un gris léger, discret. Deux cours ou plus le même jour : le vert plein. */
.ch-case.ch-venu{background:#eeeeee;color:var(--ink);font-weight:600}
/* Les trois premiers gardent leur ligne en vert, colonne du total exceptée. */
.ch-table .ms-podium .ch-case.ch-venu{background:var(--tint)}
.ch-case.ch-plein{background:var(--ink);color:#fff;font-weight:700}
.ch-case.ch-avenir,.ch-jour.ch-avenir{background:repeating-linear-gradient(45deg,transparent,transparent 3px,rgba(125,145,140,.18) 3px,rgba(125,145,140,.18) 6px)}
/* Le total des cours réalisés, juste à droite du nom : colonne sur fond rouge rosé de la
   maison, chiffre écrit en noir pour rester lisible. */
.ch-table .ch-total{font-weight:700;background:#f0a89c;width:64px;color:var(--ink);
  border-left:2px solid var(--ink);border-right:2px solid var(--ink)}
/* La colonne est encadrée de bout en bout : un trait au-dessus de la première ligne et un
   autre sous la dernière ferment le cadre. */
.ch-table thead .ch-total{border-top:2px solid var(--ink)}
.ch-table tbody tr:last-child .ch-total{border-bottom:2px solid var(--ink)}
.ch-table thead .ch-total{background:var(--ink);color:#fff;border-left-color:var(--ink);border-right-color:var(--ink)}
/* La colonne du total garde son rouge rosé partout, podium compris : c'est elle qu'on lit
   en premier, même sur les trois premières lignes. */
.ch-table .ms-podium .ch-total{background:#f0a89c}
.ch-table .ms-rang{width:40px}
.ch-ligne{cursor:pointer}
/* Or, argent, bronze : la médaille suit le nom des trois premiers. */
.ch-medaille{margin-left:6px}
/* Fiche d'un participant : titre de colonne et contenu alignés de la même façon, à gauche. */
.ch-fiche .fiche-table td,.ch-fiche .fiche-table th{white-space:nowrap;text-align:left}

/* ——— Congés des professeurs ————————————————————————————————————————————
   Deux pages partagent ces regles : celle ou un professeur demande son conge, et le
   back-office ou l'equipe decide. Le calendrier des 52 semaines est une simple liste de
   lignes : une semaine par ligne, ses absents dedans, son compte a droite. Une liste tient
   sur un telephone la ou une grille de 52 cases oblige a zoomer. */
.conges-titre{font-size:1.05rem;font-weight:600;padding:6px 2px}
.conges-lien{font-size:.82rem;color:var(--ink);text-decoration:none;border:1px solid var(--line);
  border-radius:999px;padding:4px 11px;background:var(--surface);white-space:nowrap}
.conges-lien:hover{background:var(--tint);border-color:var(--ink)}
/* Suivi des congés accordés : les deux filtres, puis une ligne par congé avec son motif et
   son report dans bsport. Un congé déjà encodé se lit d'un coup d'œil, en vert. */
/* Tableau de bord du professeur : chaque bloc prend toute la largeur de la page, et les deux
   listes se rangent côte à côte en dessous. Les graphes respirent : un bâtonnet par semaine
   sur une page entière se lit, dans un petit cadre il ne dit rien. */
/* La barre du tableau de bord porte beaucoup de commandes : disciplines, date, périodes, puis
   les deux sorties. Elles doivent tenir sur une même ligne de base et passer à la ligne plutôt
   que déborder. Les groupes de boutons perdent ici la marge qu'ils ont ailleurs, sinon ils se
   posent huit pixels plus haut que le reste. */
.dash-bar{flex-wrap:wrap;row-gap:6px}
.dash-bar .bar-right{flex-wrap:wrap;row-gap:6px;padding-bottom:6px;align-items:center;
  flex:1 1 auto;min-width:0;justify-content:flex-end}
.dash-bar .conges-raccourcis{margin:0;align-items:center}
.dash-bar .conges-saut,.dash-bar .conges-lien,.dash-bar .rep-depuis input{
  font-size:.8rem;line-height:1.2;padding:4px 11px;min-height:28px;display:inline-flex;
  align-items:center}
.dash-bar .rep-depuis{gap:6px}
/* Les sorties du tableau de bord, tout à droite de la barre : un trait les sépare des
   réglages de lecture qui les précèdent. */
.dash-sorties{display:flex;align-items:center;gap:6px;padding-left:12px;border-left:1px solid var(--line)}
/* Deep Dive : titre et sorties sur la première ligne ; sous un trait fin, tous les filtres sur
   une même ligne, alignés à gauche (2026-09-24). Elle ne passe à la ligne que si l'écran est
   vraiment trop étroit. */
.dd-bar .tabs{flex:1 1 auto;min-width:0}
.dd-bar .dash-sorties{border-left:0;padding:0 0 4px}
.dd-bar .bar-right{flex:1 1 100%;flex-direction:row;flex-wrap:wrap;align-items:center;
  justify-content:flex-start;gap:6px 18px;padding:8px 0;border-top:1px solid var(--line)}
.dd-ligne{display:contents}
.dd-ligne .conges-raccourcis{margin:0;flex-wrap:wrap}
.dd-ligne #professeur{width:100px}
.dd-ligne .rep-depuis{margin:0}
/* Cours retenus : la liste déroulante des pages de reporting, ouverte vers la droite. */
.dd-bar .picker summary{font-size:.8rem;line-height:1.2;min-height:28px;box-sizing:border-box;
  display:inline-flex;align-items:center}
.dd-bar .picker-list{left:0;right:auto;min-width:260px}
/* La barre du Deep Dive est plus haute : les chiffres de tête ne restent pas collés en haut,
   sinon ils passeraient par-dessus les filtres en faisant défiler. */
.reporting .dd-bar ~ .rep-resume{position:static}
/* Un bloc du tableau de bord est une section : sans cette ligne, la règle générale des
   sections le ramènerait à 420 px de large et les graphes seraient à l'étroit. */
.dash-bloc{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--surface);
  margin:14px 0;max-width:none;width:100%}
.dash-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
/* Un groupe porte son titre ; à l'intérieur, chaque graphe a son propre cadre. Le groupe
   lui-même n'a ni bordure ni fond : deux cadres emboîtés se liraient mal. */
.dash-groupe{border:0;background:none;padding:0;margin:18px 0;max-width:none;width:100%}
.dash-cadre{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--surface);margin:0;min-width:0}
/* Deux lectures d'une même mesure, côte à côte : la semaine et le mois. */
.dash-paire{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:stretch}
.dash-sous-titre{font-weight:600;color:var(--ink);font-size:.82rem;margin:0 0 6px}
.dash-chart{height:320px}
/* Le graphe des cours : chaque bâtonnet est un bouton, son nom s'écrit dessous en biais. */
.dash-cours{align-items:flex-end;padding-bottom:4px}
.dash-col{background:none;border:0;padding:0;cursor:pointer;font:inherit;color:inherit;text-align:center}
.dash-col:hover .rep-bar,.dash-col:focus-visible .rep-bar{background:var(--green)}
.dash-nom{display:block;font-size:.68rem;line-height:1.15;word-break:break-word;max-height:2.4em;overflow:hidden}
.dash-fiche-tete{display:flex;align-items:center;justify-content:space-between;gap:12px}
@media(max-width:860px){.dash-duo,.dash-paire{grid-template-columns:1fr}.dash-chart{height:240px}}
/* La part fidèle de sa communauté, en une barre. */
.dash-barre{height:12px;border-radius:999px;background:var(--tint);overflow:hidden;margin:8px 0 2px}
.dash-barre span{display:block;height:100%;background:var(--sage);border-radius:999px}
.suivi-filtres{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-bottom:12px}
/* Les mois d'un côté, le report bsport de l'autre : un trait léger sépare les deux séries. */
.suivi-filtres #encodage{padding-left:16px;border-left:1px solid var(--line)}
.suivi-ligne{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px}
.suivi-motif{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;color:#4a6a63;white-space:nowrap}
.suivi-motif select{min-height:0;padding:3px 8px;border:1px solid var(--line);border-radius:7px;font-size:.78rem;background:var(--surface);color:var(--ink)}
.suivi-encode{background:#eef6f2}
.conges-retirer.suivi-fait{background:var(--green);color:#fff;border-color:var(--green)}
@media(max-width:700px){.suivi-ligne{grid-template-columns:1fr}}
.conges-h{margin:22px 2px 6px}
.conges-haut{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin-top:14px}
.conges-carte{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:16px;margin:0}
.conges-carte h2{font-size:1.05rem}
.conges-carte h3{font-size:.95rem;margin:12px 0 4px}
.conges-deux{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.conges-carte label{margin-block:10px;font-size:.85rem;color:#4a6a63}
.conges-carte input[type=date],.conges-carte select,.conges-carte textarea{display:block;width:100%;
  margin-top:4px;padding:8px 10px;border:1px solid var(--line);border-radius:7px;background:var(--surface);
  font:inherit;color:var(--ink)}
.conges-carte button[type=submit]{background:var(--ink);color:#fff;border-color:var(--ink);cursor:pointer;
  padding:10px 16px;min-height:42px}
.conges-aide{color:#4a6a63;font-size:.78rem;margin:4px 0}
/* Le professeur se reconnait a son adresse bsport : la ligne dit tout de suite si elle est
   connue (son nom s'affiche) ou non (il n'y a rien a chercher dans une liste). */
.conges-identite{font-size:.85rem;margin:2px 0 6px;padding:7px 10px;border-radius:9px;
  background:var(--background);color:#4a6a63}
.conges-identite.reconnu{background:var(--green-bg);color:var(--green);font-weight:600}
.conges-identite.inconnu{background:var(--orange-bg);color:var(--orange)}
.conges-carte h3{font-size:.9rem;margin:14px 0 2px;color:#4a6a63}
.conges-ligne{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  border-top:1px solid var(--line);padding:9px 0}
.conges-ligne:first-child{border-top:0}
.conges-etat{font-size:.72rem;border-radius:999px;padding:2px 8px;white-space:nowrap}
.conges-etat.attente{background:var(--orange-bg);color:var(--orange)}
.conges-etat.valide{background:var(--green-bg);color:var(--green)}
.conges-etat.refuse{background:var(--red-bg);color:var(--red)}
.conges-retirer,.conges-valider,.conges-refuser{cursor:pointer;padding:6px 12px;border-radius:7px;font-size:.82rem}
.conges-retirer{background:var(--surface)}
.conges-valider{background:var(--green);color:#fff;border-color:var(--green)}
.conges-refuser{background:var(--surface);color:var(--red);border-color:var(--red)}
.conges-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.conges-motif{flex:1 1 220px;padding:7px 10px;font:inherit}
.conges-demande{margin-bottom:10px}
.conges-cours{margin-top:6px;font-size:.82rem}
.conges-cours summary{cursor:pointer;color:#4a6a63}
.conges-table{width:100%;border-collapse:collapse;font-size:.8rem;margin-top:6px}
.conges-table th{text-align:left;color:#4a6a63;font-weight:600;border-bottom:1px solid var(--line);padding:4px 6px}
.conges-table td{border-bottom:1px solid var(--line);padding:4px 6px}
/* Le calendrier : une colonne par jour sur un an, une ligne par professeur, le numero de
   semaine au-dessus de ses sept jours et le mois au-dessus du tout (demande de Pierre
   2026-09-19). L'annee ne tient pas sur un ecran : la grille defile de gauche a droite, le nom
   du professeur reste colle a gauche et les en-tetes restent colles en haut. */
.semaines{overflow:auto;max-height:72vh;border:1px solid var(--line);border-radius:14px;
  background:var(--surface);scroll-behavior:smooth}
/* Les sauts au-dessus de la grille : la semaine en cours d'abord, puis les mois dans l'ordre. */
.conges-raccourcis{display:flex;flex-wrap:wrap;gap:5px;margin:0 2px 8px}
.conges-saut{cursor:pointer;background:var(--surface);color:var(--ink);border:1px solid var(--line);
  border-radius:999px;padding:4px 11px;font-size:.8rem;white-space:nowrap}
.conges-saut:hover,.conges-saut:focus-visible{background:var(--tint);border-color:var(--ink)}
.conges-saut.maintenant{background:var(--ink);color:#fff;border-color:var(--ink)}
.grille-conges{border-collapse:separate;border-spacing:0;font-size:.68rem}
.grille-conges th{font-weight:600;background:var(--surface)}
.grille-conges thead th{position:sticky;top:0;z-index:2;color:#4a6a63;font-weight:500;
  border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:1px 2px;
  text-align:center;white-space:nowrap}
.grille-conges thead tr:nth-child(2) th{top:18px}
.grille-conges th.mois{color:var(--ink);font-weight:600;background:var(--tint)}
.grille-conges th.coin{left:0;z-index:4;text-align:left;padding:2px 10px;min-width:118px;color:var(--ink)}
.grille-conges tbody th{position:sticky;left:0;z-index:1;text-align:left;padding:2px 10px;
  white-space:nowrap;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
/* Une case par jour : etroite, sinon l'annee serait illisible. Seul le dernier jour de la
   semaine porte un trait, ce qui dessine les semaines sans surcharger la grille. */
.grille-conges td{width:9px;min-width:9px;height:18px;padding:0;
  border-bottom:1px solid var(--line)}
.grille-conges td.we{background:#eeeeee}
.grille-conges td.we+td:not(.we){border-left:1px solid var(--line)}
/* Un conge accorde : la case est pleine. Une demande en attente : hachuree, elle ne se lit pas
   comme un conge acquis. */
.grille-conges td.off{background:var(--ink)}
.grille-conges td.attente{background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--ink);outline:1px dashed var(--ink);outline-offset:-2px}
/* Les semaines couvertes par les dates en cours de saisie, d'un bout a l'autre de la grille. */
.grille-conges td.visee{box-shadow:inset 0 0 0 1px var(--accent)}
.grille-conges th.sem.visee{color:var(--accent);font-weight:700}
.grille-conges tr.moi th{color:var(--accent)}
.grille-conges tbody tr:hover td{background-color:var(--tint)}
.grille-conges tbody tr:hover td.off{background-color:var(--ink)}
@media(max-width:760px){.conges-haut{grid-template-columns:1fr}
  .semaine{grid-template-columns:110px minmax(0,1fr);row-gap:4px}
  .semaine-compte{display:none}}

/* Le portail des professeurs : deux portes, rien d autre. */
.portail{max-width:760px}
.portail-boutons{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0}
@media(max-width:700px){.portail-boutons{grid-template-columns:1fr}}
/* La case a cocher d un formulaire d acces : sur une ligne, avec son libelle. */
.conges-case{display:flex;align-items:center;gap:8px;font-size:.85rem;color:#4a6a63}
.conges-case input{width:auto;min-height:0}
#ajout{max-width:none}
#ajout input[type=email],#ajout input[type=text]{width:100%;min-height:42px;padding:9px 12px}
#ajout button{background:var(--ink);color:#fff;cursor:pointer;padding:10px 16px;min-height:42px}
/* Les cases du formulaire d ouverture d acces, cote espace professeurs. */
.users-case-ligne{display:flex;align-items:center;gap:6px;margin:0;font-size:.82rem;white-space:nowrap}
.users-case-ligne input{width:17px;height:17px;min-height:0;padding:0}
.users-souci{color:var(--red)}
/* Une demande de conge qui s ouvre sur ses cours, au clic ou au clavier. */
.conges-bloc{border-top:1px solid var(--line)}
.conges-bloc:first-child{border-top:0}
.conges-bloc .conges-ligne{border-top:0}
.conges-ouvrable{cursor:pointer}
.conges-ouvrable:hover,.conges-ouvrable:focus-visible{background:var(--tint);border-radius:9px}
.conges-bloc .conges-cours{padding:0 0 10px}
.conges-vide{padding:14px}
/* La grille sans personne en conge : elle reste lisible, avec une ligne qui le dit. */
.grille-conges tr.conges-vide-ligne td{padding:8px 12px;color:#4a6a63;font-size:.78rem;
  border-right:0;text-align:left}

/* « Mes demandes » : la liste defile dans sa propre zone. Une longue liste ne doit pas pousser
   le calendrier hors de l ecran ni obliger a redescendre toute la page. Le titre de la carte
   reste visible, seule la liste bouge. */
#mes-demandes{max-height:min(46vh,430px);overflow-y:auto;overscroll-behavior:contain;
  padding-right:4px}
#mes-demandes h3{position:sticky;top:0;background:var(--surface);z-index:1;margin-top:10px;
  padding:4px 0 2px}
#mes-demandes h3:first-child{margin-top:0}
/* Les cours annules juste apres l enregistrement : meme principe, leur tableau peut etre long. */
#annules{max-height:min(40vh,360px);overflow-y:auto;overscroll-behavior:contain;padding-right:4px}
#annules h3{position:sticky;top:0;background:var(--surface);z-index:1;margin-top:0}

/* Le back-office : la liste des demandes a gauche, le detail a droite, le calendrier dessous. */
.admin-haut{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:14px;margin:14px 0}
@media(max-width:860px){.admin-haut{grid-template-columns:1fr}}
.admin-haut #liste{max-height:min(52vh,480px);overflow-y:auto;overscroll-behavior:contain;
  padding-right:4px}
.admin-haut #detail{max-height:min(66vh,620px);overflow-y:auto;overscroll-behavior:contain}
/* La demande ouverte reste reperable dans la liste pendant qu on lit son detail. */
.conges-choisie{background:var(--tint);border-radius:9px;box-shadow:inset 3px 0 0 var(--ink)}
.conges-detail-dates{font-size:1.02rem;font-weight:600;margin:2px 0 4px}
.conges-commentaire{background:var(--background);border-radius:9px;padding:9px 11px;
  font-size:.88rem;margin:8px 0}
/* Une case en pointille se clique : elle ouvre sa demande. */
.grille-conges td.conges-ouvrable{cursor:pointer}
/* La pastille de couleur devant le nom : le meme ton que ses cases dans la grille. */
.conges-pastille{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;
  vertical-align:middle}
.users-naissance{padding:4px 7px;font-size:.8rem;border:1px solid var(--line);border-radius:7px;
  background:var(--surface);color:inherit;font-family:inherit}

/* L horoscope : le theme en haut, le jour et les idees cote a cote. */
main.horoscope{max-width:1000px}
.horoscope-tete{margin:14px 0}
.horoscope-natal{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.horoscope-case{border:1px solid var(--line);border-radius:10px;padding:7px 12px;
  background:var(--background);min-width:110px}
.horoscope-case span{display:block;font-size:.72rem;color:#4a6a63}
.horoscope-case strong{font-size:.95rem}
.horoscope-note{flex-basis:100%;margin:2px 0 0}
/* Les energies de la semaine a gauche, les idees de theme a droite. La colonne de droite est
   un peu plus large : ce sont des fiches a lire, pas une liste. */
.horoscope-deux{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:14px;
  align-items:start}
@media(max-width:860px){.horoscope-deux{grid-template-columns:1fr}}
.horoscope-message{font-size:1.02rem;background:var(--tint);border-radius:10px;padding:11px 13px;
  margin:0 0 10px}
.horoscope-liste{list-style:none;margin:0;padding:0;font-size:.88rem}
.horoscope-liste li{border-top:1px solid var(--line);padding:7px 0}
.horoscope-liste li:first-child{border-top:0}
.horoscope-liste span{color:#4a6a63;font-size:.78rem;display:block}
.horoscope-idee{border-top:1px solid var(--line);padding:9px 0}
.horoscope-idee:first-child{border-top:0}
.horoscope-idee h3{margin:0 0 3px;font-size:.95rem}
.horoscope-idee p{margin:0;font-size:.88rem}
#fiche{max-width:520px}
#fiche input{width:100%;min-height:42px;padding:9px 12px;border:1px solid var(--line);
  border-radius:7px;background:var(--surface);color:inherit;font:inherit}
#fiche button{background:var(--ink);color:#fff;cursor:pointer;padding:10px 16px;min-height:42px;
  border-color:var(--ink)}
/* L identite du professeur, en tete de son horoscope. */
.horoscope-qui{font-size:1.1rem;font-weight:600;margin:0}
#naissance-lue{margin:2px 0 10px}
/* Le mantra de la semaine, au bas de la carte des energies. */
.horoscope-mantra{border-top:1px solid var(--line);margin-top:12px;padding-top:10px}
.horoscope-mantra h3{margin:0 0 4px;font-size:.82rem;color:#4a6a63;font-weight:600}
.horoscope-mantra-titre{font-size:1.05rem;font-weight:600;margin:0}
.horoscope-mantra-usage{margin:6px 0 8px;font-size:.88rem}
.horoscope-mantra a{display:inline-block;text-decoration:none}
/* Le lien d ecoute porte le disque vert : on reconnait le service d un coup d oeil. */
.horoscope-spotify{display:inline-flex;align-items:center;gap:7px}
/* La galaxie en tete de l horoscope : decorative, elle se range sous le texte sur telephone. */
.horoscope-tete{position:relative;padding-right:118px}
.horoscope-galaxie{position:absolute;top:14px;right:14px;width:92px;height:92px;
  border-radius:50%;box-shadow:0 4px 18px #05332a22}
@media(max-width:620px){.horoscope-tete{padding-right:16px}
  .horoscope-galaxie{position:static;display:block;width:72px;height:72px;margin:0 0 8px}}

/* Le mantra de la semaine : une vraie section sous les energies, en plus grand, avec son
   disque vert. On ne doit pas pouvoir le manquer en lisant la carte. */
.horoscope-mantra{border-top:2px solid var(--line);margin-top:14px;padding-top:12px}
.horoscope-mantra h3{margin:0 0 6px;font-size:.78rem;color:#4a6a63;font-weight:600;
  text-transform:uppercase;letter-spacing:.05em}
.horoscope-mantra .horoscope-mantra-titre{font-size:1.5rem;font-weight:700;line-height:1.15;
  margin:0 0 2px}
.horoscope-mantra-dire{margin:0 0 6px;font-size:.92rem;color:#4a6a63;font-style:italic}
/* La reference du sutra, sous sa prononciation : plus discrete, sans italique. */
.horoscope-sutra-ref{margin:0 0 6px;font-size:.82rem;color:#4a6a63;font-weight:600}
/* La posture de la semaine : chaque partie (explication, bienfaits) en un court paragraphe. */
.horoscope-pose-partie{margin:6px 0 0;font-size:.88rem}
div#pose .fiche-posture{margin:6px 0 4px}
.horoscope-pose-partie strong{display:block;font-size:.78rem;color:#4a6a63}
.horoscope-mantra .horoscope-mantra-usage{margin:8px 0 12px;font-size:.9rem}
.horoscope-mantra .horoscope-spotify{display:inline-flex;align-items:center;gap:12px;
  text-decoration:none;color:inherit;background:var(--tint);border:1px solid #bcdcd4;
  border-radius:12px;padding:10px 14px;font-size:.88rem}
.horoscope-mantra .horoscope-spotify:hover{border-color:var(--ink);background:var(--surface)}
/* Le jour et la date, a cote du titre de la carte du jour : plus discret que le titre. */
.horoscope-date{font-size:.82rem;font-weight:400;color:#4a6a63;white-space:nowrap}
/* La famille d une fiche : philosophie, corps, ou conduite du cours. */
/* Le petit texte a dire en ouverture, pour les fiches de philosophie. */
.horoscope-parole{margin:8px 0;padding:10px 12px;background:var(--background);border-left:3px solid var(--sage);
  border-radius:0 9px 9px 0;font-size:.9rem;line-height:1.45}
.horoscope-parole span{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;
  color:#4a6a63;font-weight:600;margin-bottom:4px}

/* La fiche de naissance : une ligne discrete en bas de page, pas une carte. */
.fiche-ligne{max-width:none;border:0;background:none;padding:0;margin:18px 0 0}
.fiche-ligne #naissance{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;
  border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:10px 14px}
.fiche-ligne .fiche-titre{font-weight:600;font-size:.9rem;padding-bottom:9px;white-space:nowrap}
.fiche-ligne label{margin:0;font-size:.72rem;color:#4a6a63;display:flex;flex-direction:column;gap:3px}
.fiche-ligne input{min-height:34px;padding:5px 9px;border:1px solid var(--line);border-radius:7px;
  background:var(--surface);color:inherit;font:inherit;font-size:.85rem;width:auto}
.fiche-ligne input[type=text]{min-width:150px}
.fiche-ligne button{background:var(--ink);color:#fff;border-color:var(--ink);cursor:pointer;
  padding:7px 14px;min-height:34px;font-size:.85rem}
.fiche-ligne #t-fiche-aide{margin:0 2px 6px}

/* Les fiches de cours : trois cartes lisibles d un trait, plutot qu un pave de texte.
   Le bandeau de gauche dit la famille du theme, l intention se lit en grand, la posture
   ressort, et le chemin est numerote. */
/* La colonne de droite. La regle generale des <section> imposerait une largeur de 420px
   centree : on la neutralise, la colonne prend toute sa place dans la grille. */
.horoscope-idees{margin:0;max-width:none;background:none;border:0;padding:0}
/* L entree de section : un bandeau vert, le titre en grand, et le mode d emploi replie
   dessous. Les fiches viennent juste apres, empilees. */
.horoscope-idees-tete{background:var(--ink);color:#fff;border-radius:14px 14px 0 0;
  padding:14px 18px;margin:0 0 14px}
.horoscope-idees-tete h2{margin:0;font-size:1.32rem;line-height:1.2;color:#fff}
.horoscope-idees-mode{margin:8px 0 0}
.horoscope-idees-mode summary{cursor:pointer;list-style:none;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.06em;color:#cfe9e2;display:inline-flex;
  align-items:center;gap:6px}
.horoscope-idees-mode summary::-webkit-details-marker{display:none}
.horoscope-idees-mode summary::before{content:"+";font-size:.95rem;line-height:1}
.horoscope-idees-mode[open] summary::before{content:"–"}
.horoscope-idees-mode summary:hover{color:#fff}
.horoscope-idees-aide{margin:8px 0 0;max-width:72ch;color:#e3f1ee;font-size:.84rem;line-height:1.55}
#idees{display:grid;grid-template-columns:1fr;gap:14px;align-items:start}
/* Ces cartes portent le meme nom de classe que la colonne fixee a droite d un cours :
   on repose donc ici, explicitement, un flux normal dans la grille. */
#idees .fiche{position:static;inset:auto;z-index:auto;overflow:visible;width:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px 20px;
  border-top:4px solid var(--sage);display:flex;flex-direction:column;gap:10px;
  box-shadow:0 2px 10px #05332a0d}
#idees .fiche-philosophie{border-top-color:var(--sage)}
#idees .fiche-corps{border-top-color:var(--ink)}
#idees .fiche-conduite{border-top-color:var(--accent)}
#idees .fiche header{margin:0}
#idees .fiche-famille{margin:0;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;
  color:#4a6a63;font-weight:700}
#idees .fiche h3{margin:2px 0 0;font-size:1.12rem;line-height:1.25}
#idees .fiche-intention{margin:0;font-size:1rem;line-height:1.45;color:var(--ink)}
#idees .fiche-parole{margin:0;padding:12px 14px;background:var(--tint);border-radius:12px;
  font-size:.92rem;line-height:1.5}
#idees .fiche-posture,#pose .fiche-posture{margin:0;background:var(--background);border-radius:12px;padding:10px 14px;
  display:flex;align-items:center;gap:12px}
#idees .fiche-posture p,#pose .fiche-posture p{margin:0;font-size:.95rem;font-weight:600}
#idees .fiche-posture span,#pose .fiche-posture span{display:block;font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;
  color:#4a6a63;font-weight:700;margin-bottom:2px}
/* La silhouette de l asana : un trait vert dans son disque, a cote du nom de la posture. */
#idees .fiche-asana,#pose .fiche-asana{flex:0 0 52px;width:52px;height:52px;border-radius:50%;background:var(--tint);
  color:var(--ink);padding:3px;box-sizing:border-box}
#idees .fiche-chemin{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
#idees .fiche-chemin li{display:flex;gap:10px;font-size:.9rem;line-height:1.45}
#idees .fiche-chemin li span{flex:0 0 22px;height:22px;border-radius:50%;background:var(--ink);color:#fff;
  font-size:.72rem;font-weight:700;display:flex;align-items:center;justify-content:center;
  margin-top:1px}
#idees .fiche-consigne{margin:0;font-size:.98rem;font-style:italic;line-height:1.45;
  border-left:3px solid var(--accent);padding-left:12px}
#idees .fiche-fin{margin:0;font-size:.85rem;color:#4a6a63}
#idees .fiche-fin span{font-weight:700;text-transform:uppercase;font-size:.66rem;letter-spacing:.08em}
/* La carte des energies de la semaine : son titre de semaine, bien lisible. */
.horoscope-semaine-titre{font-size:1.05rem;font-weight:600;margin:0 0 4px;color:var(--ink)}

/* La journee, juste sous le theme : une seule phrase dans son bandeau vert. Elle est cadree
   exactement comme la carte du dessus (meme largeur, meme rayon, meme padding) : la regle
   generale des <section> voudrait la reduire a 420px centres, on la neutralise. */
/* Le bandeau du jour : le texte au milieu de la hauteur, à côté de la météo, mais aligné à
   gauche — une phrase se lit depuis sa marge, pas depuis son centre. */
.horoscope-jour{max-width:none;margin:14px 0;padding:16px;border:1px solid #bcdcd4;
  border-radius:14px;background:var(--tint);display:flex;flex-direction:column;
  justify-content:center;align-items:flex-start;text-align:left}
.horoscope-jour h2{margin:0 0 6px;font-size:1.05rem}
.horoscope-jour .horoscope-message{margin:0;padding:0;background:none;border-radius:0;
  font-size:1.06rem;line-height:1.5;text-align:left;max-width:62ch}

/* La ligne de naissance, sous le nom : les valeurs lues, puis le crayon qui ouvre la fiche. */
.horoscope-naissance{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:2px 0 10px}
.horoscope-crayon{display:inline-flex;align-items:center;gap:5px;background:var(--surface);
  color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:3px 10px;
  font-size:.74rem;cursor:pointer;line-height:1.3}
.horoscope-crayon:hover{background:var(--tint);border-color:#bcdcd4}
/* Ouverte, la fiche se pose dans la carte du haut, sans en reprendre le cadre. */
.horoscope-tete .fiche-ligne{margin:0 0 12px;max-width:none}
/* Tant que la date de naissance manque, seul l en-tete a un sens. */
.sans-signe #titre-signe,.sans-signe #portrait,.sans-signe #natal,
.sans-signe .horoscope-jour,.sans-signe .horoscope-deux{display:none}

/* Le bandeau vert du jour et la météo côte à côte : la phrase du jour prend la place qu'elle
   veut, les cinq jours à Bruxelles tiennent à sa droite. Sur un écran étroit, la météo passe
   dessous. */
.horoscope-ligne-jour{display:flex;align-items:stretch;gap:12px;flex-wrap:wrap;margin:14px 0}
.horoscope-ligne-jour .horoscope-jour{flex:1 1 320px;margin:0}
/* La météo : cinq petites cases, dans un cadre clair qui répond au bandeau vert. */
.meteo{margin:0;display:flex;flex-direction:column;justify-content:center;
  border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:10px 12px}
.meteo-tete{margin:0 0 4px;font-size:.76rem;color:#4a6a63}
.meteo-tete strong{color:inherit;margin-right:6px}
.meteo-jours{display:flex;gap:6px;flex-wrap:wrap}
.meteo-jour{text-align:center;border-radius:9px;padding:4px 7px;background:var(--background);
  border:1px solid var(--line);min-width:56px}
.meteo-nom{display:block;font-size:.68rem;color:#4a6a63;text-transform:capitalize}
.meteo-dessin{display:block;font-size:1.1rem;line-height:1.35}
.meteo-degres{display:block;font-size:.76rem;font-weight:600}
.meteo-pluie{display:block;font-size:.66rem;color:#4a6a63;min-height:1em}
@media(max-width:620px){.meteo-jour{min-width:48px;padding:4px}}
/* La lune du jour, entre le bandeau vert et la météo, dans le même cadre clair que la météo. */
.lune-jour{margin:0;display:flex;flex-direction:column;justify-content:center;flex:0 1 230px;
  border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:10px 12px}
.lune-jour[hidden],.sans-signe .lune-jour{display:none}
.lune-ligne{margin:0;display:flex;align-items:center;gap:8px;font-size:.9rem}
.lune-dessin{font-size:1.7rem;line-height:1}
.lune-age{font-size:.72rem;color:#4a6a63}
.lune-conseil{margin:4px 0 0;font-size:.78rem;color:#4a6a63}
.lune-prochaines{list-style:none;margin:6px 0 0;padding:6px 0 0;border-top:1px solid var(--line);font-size:.76rem}
.lune-prochaines li{margin:1px 0}
.lune-prochaines b{font-weight:600}

/* ——— Les workshops ————————————————————————————————————————————————————
   Un formulaire dense en haut, puis le calendrier des studios : un studio par ligne, un jour
   par colonne, les week-ends grisés pour qu'on lise les semaines d'un coup d'œil. */
/* Le formulaire se lit par blocs : le titre seul en tête, puis quand, où, combien, la note
   pour le back-office, et l'annonce. Chaque bloc porte ses champs sur une ou deux lignes. */
.ws-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:10px}
.ws-form label{display:flex;flex-direction:column;gap:4px;font-size:.78rem;color:#4a6a63}
.ws-form input,.ws-form select,.ws-form textarea{font:inherit;color:var(--ink);
  border:1px solid var(--line);border-radius:9px;padding:7px 9px;background:var(--background)}
.ws-form input:focus,.ws-form select:focus,.ws-form textarea:focus{outline:2px solid #79bbae;
  outline-offset:1px}
/* En tête : le titre large, le professeur à côté. */
.ws-titre{grid-column:span 2}
.ws-titre input{font-size:1.05rem;padding:9px 10px}
.ws-prof input{font-size:1.05rem;padding:9px 10px}
.ws-groupe{border:1px solid var(--line);border-radius:12px;background:var(--background);
  padding:8px 12px 12px;margin:0;min-width:0}
.ws-groupe legend{font-size:.72rem;color:#4a6a63;text-transform:uppercase;
  letter-spacing:.05em;padding:0 4px}
.ws-groupe-large{grid-column:1/-1}
.ws-champs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.ws-champs-annonce{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
/* Les deux dates, puis les deux heures dessous : deux colonnes, quoi qu'il arrive. */
.ws-champs-quand{grid-template-columns:repeat(2,minmax(0,1fr))}
/* Une question par ligne : où, avec qui, pour qui — puis le prix, puis les places. */
.ws-champs-colonne{grid-template-columns:1fr}
.ws-aide{color:#89a6a0;font-weight:400}
.ws-apercu{margin-top:6px;width:100%;max-width:150px;height:96px;object-fit:cover;
  border-radius:9px;border:1px solid var(--line)}
/* La note du professeur à l'équipe : à part de la description, qui elle est faite pour les
   membres. */
.ws-note{font-size:.78rem;color:#4a6a63;border-left:2px solid var(--line);padding-left:8px}
@media(max-width:860px){.ws-form{grid-template-columns:1fr}
  .ws-champs-annonce{grid-template-columns:1fr}}
.ws-actions{grid-column:1/-1;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* Les filtres à gauche, le titre à leur droite : on choisit d'abord la période. */
.ws-tete{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ws-filtres{flex-wrap:wrap}
.ws-mois-boutons{display:inline-flex;gap:4px;flex-wrap:wrap}
.ws-tete .rep-titre{margin:0}
.ws-tete input[type=month]{font:inherit;border:1px solid var(--line);border-radius:9px;
  padding:4px 8px;background:var(--background);color:var(--ink)}

/* Trois mois d'un coup : les colonnes sont étroites, une par jour, et les blocs n'y portent
   pas de texte — le titre se lit au survol et dans les fiches (demande de Pierre). */
.ws-calendrier{border-collapse:collapse;font-size:.6rem;table-layout:fixed;width:100%}
.ws-calendrier th,.ws-calendrier td{border:1px solid var(--line);padding:0;overflow:hidden}
.ws-calendrier th.ws-studio{text-align:left;white-space:nowrap;padding:4px 8px;
  background:var(--surface);font-size:.76rem;width:92px}
.ws-calendrier thead th{background:var(--surface);line-height:1.15;font-weight:600;
  color:#4a6a63;text-align:center}
.ws-jour{display:block;font-size:.55rem;font-weight:400;line-height:1.1}
.ws-num{display:block;font-size:.6rem;line-height:1.2}
.ws-calendrier th.ws-mois{font-size:.72rem;color:var(--ink);text-align:center;
  border-bottom:1px solid var(--rule);padding:2px 4px;width:auto}
.ws-debut-mois{border-left:2px solid var(--rule)}
.ws-case{height:20px;vertical-align:middle}
/* Le week-end, en gris : ce sont les jours où un workshop se pose le plus souvent. */
.ws-weekend{background:#0000000a}
.ws-lundi{border-left:2px solid var(--rule)}
.ws-aujourdhui{box-shadow:inset 0 0 0 2px var(--green)}
/* Une barre du calendrier s'ouvre au clic : elle montre alors son workshop en dessous. */
.ws-bloc{display:block;border-radius:3px;height:14px;margin:1px;cursor:pointer}
.ws-bloc:hover{outline:1px solid var(--green)}
.ws-bloc.ws-confirme{background:#79bbae}
.ws-bloc.ws-propose{background:#79bbae40;border:1px dashed #79bbae}
.ws-bloc.ws-refuse{background:#ff400022;text-decoration:line-through}
.ws-legende{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.ws-pastille{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-2px}
.ws-pastille.ws-confirme{background:#79bbae}
.ws-pastille.ws-propose{background:#79bbae40;border:1px dashed #79bbae}
.ws-pastille.ws-weekend{background:#0000000a;border:1px solid var(--line)}

/* Le détail sous le calendrier : une fiche par workshop, avec son affiche si elle existe. */
.ws-fiches{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;
  margin-top:10px}
.ws-fiche{display:flex;gap:10px;border:1px solid var(--line);border-radius:12px;
  background:var(--surface);padding:10px;overflow:hidden}
.ws-fiche-confirme{border-color:#79bbae}
.ws-poster{width:86px;height:86px;object-fit:cover;border-radius:9px;flex:none}
.ws-fiche-corps{min-width:0}
.ws-fiche h3{margin:0 0 4px;font-size:.98rem}
.ws-fiche p{margin:0 0 4px}
.ws-etat{font-size:.74rem;font-weight:600}
.ws-etat.ws-confirme{color:var(--green)}
.ws-etat.ws-propose{color:#4a6a63}

/* « Revenus des professeurs » : peser chaque studio. Une ligne par studio, son curseur et son
   champ libre côte à côte, et ce que le studio pèse une fois sa jauge appliquée. */
.pond{max-width:none;margin:14px 0;padding:12px 14px}
.pond-tete{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pond-tete h2{margin:0}
/* Quatre colonnes fixes par ligne : nom, curseur, champ « % », montant. Le champ a une largeur
   posée : sans elle, le navigateur l'étire et la ligne déborde de sa case. */
.pond-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,400px),1fr));
  gap:6px 22px;margin:8px 0 4px}
.pond-ligne{display:grid;grid-template-columns:92px minmax(60px,1fr) auto 136px;align-items:center;
  gap:8px;padding:3px 0;font-size:.86rem;min-width:0}
.pond-nom{margin:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pond-jauge{width:100%;min-width:0;accent-color:var(--ink);padding:0;margin:0;border:0;
  background:none;min-height:0}
.pond-valeur{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.pond-champ{width:58px;min-width:0;padding:3px 6px;text-align:right;min-height:0;font-size:.84rem}
.pond-part{text-align:right;white-space:nowrap;color:#4a6a63;font-variant-numeric:tabular-nums}
.pond-periode{display:inline-flex;align-items:center;gap:5px;margin:0;font-size:.85rem;color:#4a6a63}
.pond-periode input{padding:3px 6px;min-height:0;font-size:.84rem}
.pond-periode.maintenant input{border-color:var(--ink);outline:1px solid var(--ink)}
#cherche{width:240px;max-width:100%}
.dash-groupe>.pond-periode{margin:0 0 8px}
/* Sur un téléphone : le nom et le pourcentage en haut, le curseur et le montant en dessous. */
@media(max-width:520px){
  .pond-ligne{grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"nom valeur" "jauge part";row-gap:2px;padding:5px 0}
  .pond-nom{grid-area:nom}.pond-jauge{grid-area:jauge}
  .pond-valeur{grid-area:valeur}.pond-part{grid-area:part}
}
.pond-modifie .pond-nom{color:var(--accent)}
.pond-modifie .pond-jauge{accent-color:var(--accent)}

/* Teacher Pay : la fiche d'un professeur, en carte, champs en grille et libellé au-dessus
   (demande de Pierre 2026-09-23). */
.paie-carte{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:20px 22px;margin:14px 0;width:100%;max-width:none;box-sizing:border-box;
  box-shadow:0 1px 2px rgba(5,51,42,.05)}
.paie-champ input[readonly]{background:var(--background);color:#4a6a63}
.paie-ok{color:var(--green);font-weight:400}.paie-ko{color:var(--red);font-weight:400}
/* Actif / non actif, et le bouton Modifier de chaque ligne. */
.paie-etat{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.75rem;font-weight:600}
.paie-etat.actif{background:var(--green-bg);color:var(--green)}
/* Non actif : entouré de rouge, lisible d'un coup d'œil (Pierre, 2026-09-23). */
.paie-etat.inactif{background:var(--red-bg);color:var(--red);border:1.5px solid var(--red)}
tr.paie-inactif>td{color:#8a9a96}
tr.paie-inactif>td .paie-etat{color:var(--red)}
.ref-table .paie-contrat{text-align:center}
.paie-oui{color:var(--green);font-size:1.15rem;font-weight:700}
.paie-non{color:var(--red);font-size:1.15rem;font-weight:700}
tr.paie-inactif>td .paie-oui{color:var(--green)}tr.paie-inactif>td .paie-non{color:var(--red)}
.paie-modifier{background:var(--surface);color:var(--ink);border:1px solid var(--line);cursor:pointer;
  padding:4px 12px;font-size:.82rem}
.paie-bascule{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.paie-bascule button{border:0;border-radius:0;background:var(--surface);color:var(--ink);cursor:pointer;
  padding:7px 16px;font-size:.85rem}
.paie-bascule button[aria-pressed=true]{background:var(--ink);color:#fff}
.paie-bascule button[data-statut="inactif"][aria-pressed=true]{background:var(--red);color:#fff}
/* Sub, Trial, Visiting : chacun sa couleur, pour se lire d'un coup d'œil. */
.paie-etat.sub{background:#e7eefb;color:#2b4f8f}
.paie-etat.trial{background:var(--orange-bg);color:var(--orange)}
.paie-etat.visiting{background:var(--tint);color:var(--ink)}
.paie-filtres{margin:0;flex-wrap:wrap}
.paie-ligne-filtres{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin:0 0 10px}
/* Même bouton, même hauteur que les filtres : il ne s'en distingue que par sa place. */
.paie-ligne-filtres #exporter{margin:0 0 0 auto;white-space:nowrap;align-self:center}
/* La visionneuse du contrat signé : grande fenêtre par-dessus la page, le document défile dedans. */
button.paie-voir{background:none;border:0;cursor:pointer;padding:0 4px}
.paie-visionneuse{position:fixed;inset:0;z-index:1000;background:rgba(5,51,42,.55);
  display:flex;align-items:center;justify-content:center;padding:2vh 2vw}
.paie-visionneuse-boite{background:var(--surface);border-radius:12px;width:min(1100px,96vw);
  height:94vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.3)}
.paie-visionneuse-tete{display:flex;align-items:center;gap:16px;padding:10px 14px;
  border-bottom:1px solid var(--line)}
.paie-visionneuse-tete strong{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.paie-visionneuse-tete a{font-size:.85rem;color:var(--ink)}
.paie-visionneuse-fermer{background:none;border:0;font-size:1.6rem;line-height:1;cursor:pointer;
  color:var(--ink);padding:0 6px}
.paie-visionneuse-corps{flex:1;width:100%;border:0;background:#525659}
.paie-visionneuse-image{overflow:auto;text-align:center;padding:12px;background:var(--background)}
.paie-visionneuse-image img{max-width:100%;height:auto}
/* La liste des professeurs, elle aussi, sur toute la largeur. */
section.paie-liste{max-width:none;margin:14px 0;padding:16px}
/* La liste occupe toute la largeur de l'écran, sans cadre de défilement ni ligne forcée : les
   colonnes se partagent la place, le texte long passe à la ligne (Pierre, 2026-09-23). */
.paie-liste .table-wrap{max-height:none;overflow-x:auto;border:0}
.paie-liste .ref-table{width:100%;font-size:.88rem}
#liste>thead>tr>th,#liste>tbody>tr>td{white-space:nowrap;padding:9px 10px;
  vertical-align:middle}
#liste>tbody>tr>td:first-child{font-weight:600}
/* La note prend toute la place qui reste et passe à la ligne ; « Modifier » reste collé à droite. */
#liste>thead>tr>th:nth-child(11),#liste>tbody>tr>td:nth-child(11){white-space:normal;
  width:100%;min-width:160px}
/* Écran moyen : les en-têtes et les champs longs passent à la ligne plutôt que de pousser la
   note et « Modifier » hors de l'écran. */
@media(max-width:1600px){
  .paie-liste .ref-table{font-size:.82rem}
  #liste>thead>tr>th,#liste>tbody>tr>td{padding:8px 7px}
  #liste>thead>tr>th{white-space:normal}
  #liste>tbody>tr>td:nth-child(3),#liste>tbody>tr>td:nth-child(4),
  #liste>tbody>tr>td:nth-child(6){white-space:normal}
  #liste>tbody>tr>td:nth-child(4){overflow-wrap:anywhere;min-width:120px}
  #liste>thead>tr>th:nth-child(11),#liste>tbody>tr>td:nth-child(11){min-width:90px}
  .paie-liste .paie-modifier{padding:4px 8px}
}
#liste>thead>tr>th:last-child,#liste>tbody>tr>td:last-child{width:1%;text-align:right}
#liste>tbody>tr>td.paie-detail{white-space:normal;width:auto;text-align:left;font-weight:400}
.paie-carte>h2{margin:0 0 4px;font-size:1.1rem}
.paie-carte .paie-sous{margin:0 0 6px;color:#4a6a63;font-size:.85rem}
.paie-section{border-top:1px solid var(--line);padding-top:14px;margin-top:16px}
.paie-section:first-of-type{border-top:0;margin-top:8px;padding-top:0}
.paie-section>h3{margin:0 0 10px;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  color:#4a6a63;font-weight:700}
.paie-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px 18px}
.paie-champ{display:flex;flex-direction:column;gap:5px;margin:0;font-size:.8rem;font-weight:600;
  color:var(--ink)}
.paie-champ small{font-weight:400;color:#4a6a63}
.paie-champ input,.paie-champ select,.paie-champ textarea{font:inherit;font-size:.95rem;
  font-weight:400;color:var(--ink);background:#fff;border:1px solid var(--line);
  border-radius:8px;padding:9px 11px;width:100%;box-sizing:border-box}
.paie-champ textarea{resize:vertical;min-height:84px}
.paie-champ input:focus,.paie-champ select:focus,.paie-champ textarea:focus{outline:none;
  border-color:var(--sage);box-shadow:0 0 0 3px var(--tint)}
.paie-euro{position:relative}
.paie-euro input{padding-right:30px}
.paie-euro::after{content:"€";position:absolute;right:11px;bottom:9px;color:#4a6a63;font-weight:400}
.paie-large{grid-column:1/-1}
.paie-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:18px}
.paie-actions .paie-principal{background:var(--ink);color:#fff;border-color:var(--ink);
  cursor:pointer;padding:9px 20px;font-weight:600}
.paie-actions button.paie-secondaire{background:var(--surface);color:var(--ink);
  border:1px solid var(--line);cursor:pointer;padding:9px 16px}
.paie-televersement input[type=file]{padding:8px;background:var(--background);cursor:pointer}
.paie-actions .paie-danger{background:none;border:0;color:var(--red);cursor:pointer;
  margin-left:auto;text-decoration:underline}
.paie-nouveau{background:var(--ink);color:#fff;border-color:var(--ink);cursor:pointer;
  padding:6px 14px;font-weight:600}
td.paie-detail{background:var(--background);padding:10px 12px 16px;white-space:normal}
/* La fiche dépliée occupe toute la ligne : elle ne suit pas la colonne des noms figée à gauche. */
.users-table td.paie-detail{position:static;box-shadow:none;background:var(--background)}
.paie-detail .paie-carte{margin:8px 0}
.paie-duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}
.paie-duo .paie-carte{margin:0;max-width:none}
/* Sur téléphone : une colonne, marges resserrées, boutons pleine largeur. */
@media(max-width:700px){
  .paie-carte{padding:14px 12px;border-radius:10px}
  .paie-grille,.paie-duo{grid-template-columns:1fr}
  .paie-actions{flex-direction:column;align-items:stretch}
  .paie-actions button{width:100%}
  .paie-actions .paie-danger{margin-left:0}
}

/* Actionnaires : le rapport mensuel, lisible à l'écran et imprimable en PDF (Pierre, 2026-09-23). */
.ac-test{font-size:.7rem;background:var(--orange-bg);color:var(--orange);padding:2px 8px;
  border-radius:999px;margin-left:6px;vertical-align:middle}
.ac-entete{display:flex;align-items:center;gap:18px;margin:18px 0 6px}
.ac-logo{height:38px}
.ac-entete h1{margin:0;font-size:1.5rem}
.ac-sous{margin:4px 0 0;color:#4a6a63;font-size:.85rem}
section.ac-bloc{max-width:none;margin:16px 0;padding:18px 20px}
.ac-bloc>h2{margin:0 0 12px;font-size:1rem;text-transform:uppercase;letter-spacing:.05em}
.ac-cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.ac-carte{border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;
  flex-direction:column;gap:3px;background:var(--surface)}
.ac-titre{font-size:.78rem;color:#4a6a63;font-weight:600}
.ac-valeur{font-size:1.45rem;font-weight:700;font-variant-numeric:tabular-nums}
.ac-comp{font-size:.8rem;font-variant-numeric:tabular-nums}
.ac-comp small{color:#6d8580}
.ac-aide{font-size:.72rem;color:#6d8580;margin-top:3px}
.ac-hausse{color:var(--green);font-weight:600}.ac-baisse{color:var(--red);font-weight:600}
.ac-neutre{color:#6d8580}
.ac-graphe{margin-top:16px}
.ac-graphe-titre{margin:0 0 6px;font-size:.8rem;font-weight:600;color:#4a6a63}
.ac-barres{display:flex;align-items:flex-end;gap:6px;height:170px;padding-top:18px}
.ac-barre{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  height:100%;position:relative}
.ac-barre-corps{width:70%;background:var(--sage);border-radius:4px 4px 0 0}
.ac-choisi .ac-barre-corps{background:#c4e3dc}
.ac-barre-val{font-size:.62rem;white-space:nowrap;margin-bottom:2px;font-variant-numeric:tabular-nums}
.ac-barre-mois{font-size:.66rem;color:#4a6a63;margin-top:4px}
/* Graphe à deux séries : deux bâtonnets par mois, côte à côte. */
.ac-legende{display:flex;gap:16px;font-size:.75rem;color:#4a6a63;margin:0 0 4px}
.ac-legende i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.ac-duo{display:flex;align-items:flex-end;gap:2px;width:100%;flex:1;min-height:0}
.ac-duo-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.ac-duo-col .ac-barre-corps{width:100%}
.ac-duo-col .ac-barre-val{font-size:.56rem}
/* Deux nuances de vert : vert clair et vert d'eau de la marque (demande du 2026-09-24,
   plus de vert sombre qui paraît noir). Le mois choisi est posé sur un fond teinté. */
.ac-serie-a{background:#c4e3dc}
.ac-serie-b{background:var(--sage)}
.ac-choisi-groupe{background:var(--tint);outline:1px dashed #c4e3dc;outline-offset:2px;border-radius:4px}
#faits{width:100%;box-sizing:border-box;font:inherit;padding:10px;border:1px solid var(--line);
  border-radius:8px;margin-top:8px}
.ac-actions{display:flex;gap:10px;align-items:center;margin-top:8px}
.ac-actions .paie-principal{background:var(--ink);color:#fff;border:0;cursor:pointer;padding:8px 18px}
.ac-faits-imprimes{display:none;white-space:pre-wrap}
.ac-a-venir{border-style:dashed}
@media print{
  /* Sans cela, le navigateur n'imprime pas les couleurs de fond : les bâtonnets disparaissent. */
  .ac-barre-corps,.ac-carte,.ac-test,.ref-table thead th,.ac-legende i,.ac-choisi-groupe{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .ac-barres{height:150px}
  .ac-barre-val{font-size:.6rem}
  /* Le tableau des studios tient dans la largeur de la page : pas de défilement sur papier. */
  .ac-bloc .table-wrap{overflow:visible;max-height:none;border:0}
  .ac-bloc .ref-table{font-size:.7rem;table-layout:auto;width:100%}
  .ac-bloc .ref-table th,.ac-bloc .ref-table td{white-space:normal;padding:4px 5px}
  @page{size:A4;margin:12mm}
  .ac-bar,#connexion,#faits,.ac-actions,.ac-sous+textarea{display:none!important}
  .ac-faits-imprimes{display:block}
  body{background:#fff}
  section.ac-bloc{break-inside:avoid;border:1px solid #ddd;box-shadow:none}
  .ac-cartes{grid-template-columns:repeat(3,1fr)}
  main.wide{padding:0}
}
/* SALES : cocher des personnes et leur écrire (même circuit que les envois groupés du Tracker) */
.sales-coche{width:28px;text-align:center}
.sales-coche input{width:15px;height:15px;min-height:0;margin:0;accent-color:#05332a;cursor:pointer}
.sales-enveloppe{color:#05332a;background:#79bbae24;border:1px solid #79bbae;border-radius:6px;padding:0 4px;font-size:.72rem;line-height:1.5}
.sales-modal-fond{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(5,51,42,.35)}
.sales-modal{width:min(640px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:var(--surface,#fff);box-shadow:0 12px 40px rgba(5,51,42,.2)}
.sales-modal h2{margin:0;font-size:1.05rem}
.sales-modal-fermer{min-height:0;padding:0 8px;border:0;background:none;font-size:1.3rem;cursor:pointer}
.sales-destinataires{display:flex;flex-wrap:wrap;gap:5px;max-height:130px;overflow:auto;margin:12px 0}
.sales-puce{display:inline-flex;align-items:center;gap:4px;padding:1px 4px 1px 9px;border:1px solid #79bbae;border-radius:999px;background:#79bbae24;color:#05332a;font-size:.76rem}
.sales-puce.sans{border-color:#ff4000;background:#ff40001f;color:#a32800}
.sales-puce button{min-height:0;padding:0 4px;border:0;background:none;color:inherit;cursor:pointer}
.sales-champ{display:flex;flex-direction:column;gap:4px;margin:10px 0;color:#4a6a63;font-size:.8rem}
.sales-champ input,.sales-champ textarea{width:100%;box-sizing:border-box;padding:7px 9px;border:1px solid var(--line);border-radius:8px;font:inherit;color:var(--ink)}
/* « Quand envoyer ? » dans la fenêtre d'e-mail : même titre que les autres champs, deux choix en boutons,
   puis la date sur sa propre ligne (Pierre, 2026-09-27). */
.sales-quand{margin:10px 0;padding:0;border:0;min-width:0}
.sales-quand legend{padding:0;margin-bottom:4px;color:#4a6a63;font-size:.8rem}
.sales-quand-choix{display:flex;flex-wrap:wrap;gap:8px}
.sales-quand-choix label{display:inline-flex;align-items:center;margin:0;min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font-size:.85rem;cursor:pointer}
.sales-quand-choix label:hover{border-color:#79bbae}
.sales-quand-choix input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.sales-quand-choix label:has(input:checked){border-color:#05332a;background:#79bbae24;font-weight:600}
.sales-quand-choix label:has(input:focus-visible){outline:2px solid var(--sage);outline-offset:2px}
.sales-quand-date{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:10px}
.sales-quand-date[hidden]{display:none}
.sales-quand-date input{height:40px;padding:0 10px;border:1px solid var(--line);border-radius:8px;font:inherit;color:var(--ink)}
.sales-quand-date span{color:#4a6a63;font-size:.75rem}
.sales-modal-etat{min-height:1.2em;color:#a32800;font-size:.8rem}
.sales-modeles{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 12px}
.sales-modeles .sales-champ{flex:1 1 220px;margin-bottom:0}
.sales-modeles select{width:100%;box-sizing:border-box;padding:7px 9px;border:1px solid var(--line);border-radius:8px;font:inherit;color:var(--ink);background:#fff}
.sales-modeles-actions{display:flex;flex-wrap:wrap;gap:8px}
.sales-modeles-actions button{font-size:.8rem}
.sales-modal-actions,.sales-modal-fin{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;align-items:center}
.sales-modal-fin p{flex-basis:100%;margin:12px 0}
.sales-modal-preparer{background:#05332a;color:#fff;border-color:#05332a}
/* Le bouton d'e-mail passe au vert dès qu'au moins une personne est cochée (Pierre, 2026-09-26). */
#ecrire:not(:disabled){background:#05332a;border-color:#05332a;color:#fff}
#ecrire:not(:disabled):hover{background:#0a4a3d}
/* SALES : colonne Mail (V vert = e-mail parti), e-mails dans la fiche, lien vers le rapport */
.sales-mail-parti{display:inline-block;min-width:18px;padding:0 5px;border-radius:6px;background:#1f8a4c;color:#fff;font-weight:700;font-size:.74rem;text-align:center;cursor:default}
.sales-mail-recu{margin:6px 0;padding:6px 9px;border:1px solid var(--line);border-radius:8px}
.sales-mail-recu summary{cursor:pointer;font-size:.82rem}
.sales-mail-recu pre{margin:6px 0 0;white-space:pre-wrap;font:inherit;font-size:.8rem}
/* SALES : bouton et vue « Rapport des e-mails » (Pierre, 2026-09-26) */
#app [hidden]{display:none!important}
.sales-bouton-rapport{display:inline-flex;align-items:center;gap:7px;padding:5px 12px 5px 10px;border:1px solid #05332a;border-radius:999px;background:#fff;color:#05332a;font-weight:600;font-size:.8rem;cursor:pointer;transition:background .15s,box-shadow .15s}
.sales-bouton-rapport:hover{background:#79bbae24;box-shadow:0 1px 4px rgba(5,51,42,.15)}
.sales-bouton-rapport[aria-pressed="true"]{background:#05332a;color:#fff}
.sales-bouton-rapport.a-valider{border-color:#ff4000}
.sales-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#ff4000;color:#fff;font-size:.7rem;font-weight:700}
.sales-rapport{margin-top:14px}
.sales-rapport-tete{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.sales-rapport-tete h2{margin:0;font-size:1.1rem;color:#05332a}
.sales-rapport-tete button{margin-left:auto}
.sales-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:14px 0}
.sales-kpi{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff}
.sales-kpi:nth-child(2),.sales-kpi:nth-child(3){background:#79bbae24;border-color:#79bbae}
.sales-kpi-valeur{font-size:1.45rem;font-weight:700;color:#05332a}
.sales-etat{display:inline-block;padding:1px 9px;border:1px solid;border-radius:999px;font-size:.74rem;white-space:nowrap}
.sales-etat.attente{color:#a32800;border-color:#ff4000;background:#ff40001f}
.sales-etat.cours{color:#8a4a06;border-color:#e08a2e;background:#e08a2e26}
.sales-etat.ok{color:#05332a;border-color:#79bbae;background:#79bbae24}
.sales-etat.alerte{color:#fff;border-color:#a32800;background:#a32800}
.sales-etat.neutre{color:#5c6b67;border-color:var(--line)}
.sales-voir{min-height:0;padding:2px 10px;border:1px solid #05332a;border-radius:999px;background:#fff;color:#05332a;font-size:.74rem;cursor:pointer;white-space:nowrap}
.sales-voir:hover{background:#79bbae24}
.sales-lot-ouvert td{background:#79bbae14}
.sales-lot{margin:14px 0;padding:14px 16px;border:1px solid #79bbae;border-radius:14px;background:#fff}
.sales-lot-tete{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.sales-lot-tete h3{margin:0;font-size:1rem}
.sales-lot-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:10px 0}
.sales-apercus{margin:8px 0}
/* SALES : rapport des e-mails, même présentation que « Envois groupés » du Tracker (Pierre, 2026-09-26) */
/* Le rapport et son détail sont des <section> : on annule le cadre étroit de 420 px prévu pour la connexion,
   qui écrasait tout le rapport au milieu de la page (Pierre, 2026-09-27). */
section.env,section.env-detail{max-width:none;margin:0;padding:0;border:0;border-radius:0;background:none}
section.env{margin-top:14px}
/* Modèles d'e-mails SALES, comme dans le Tracker (Pierre, 2026-10-08). */
.env-modeles{margin-bottom:16px}
.env-modeles-tete{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.env-modeles-bascule{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;min-height:0;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.env-modeles-bascule h3{margin:0;font-size:1rem;color:#05332a}
.env-modeles-tete .env-bouton{margin-left:auto}
.env-chevron.ouvert{transform:rotate(90deg)}
.env-modeles .env-message{text-align:left}
.env-erreur-texte{color:#a32800}
.env-modeles-liste{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));margin:0;padding:0;list-style:none}
.env-modele{display:flex;flex-direction:column;gap:4px;min-width:0;padding:12px;border:1px solid var(--line);border-radius:8px}
.env-modele.choisi{border-color:#05332a}
.env-modele p{margin:0;overflow-wrap:anywhere}
.env-modele-nom{font-weight:600;color:#05332a}
.env-modele-corps{margin-top:4px!important;white-space:pre-wrap;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.env-modele .env-pied{margin-top:auto;padding-top:10px}
.env-bilan{margin-bottom:16px}
.env-choix{padding:10px 12px;border:1px solid var(--line);border-radius:8px}
.env-programme{padding:10px 12px;border:1px solid #05332a;border-radius:8px}
.env-depart{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:0 0 8px;padding:0;border:0}
.env-depart legend{font-weight:600;margin-bottom:4px;padding:0}
.env-depart label{display:inline-flex;align-items:center;gap:6px;margin:0;cursor:pointer}
.env-depart input[type=datetime-local]{height:44px;padding:0 10px}
.env-lot-avec-corbeille{position:relative}
.env-lot-avec-corbeille .env-lot{padding-right:48px}
.env-corbeille{position:absolute;top:6px;right:6px;display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:0;border-radius:8px;background:none;color:#8a9894;cursor:pointer}
.env-corbeille:hover{background:#79bbae24;color:#a32800}
.env-bilan .env-wrap{max-height:none;margin-top:10px}
.env-bilan .env-table td,.env-bilan .env-table th{padding:8px 10px}
.env-bilan .env-table td:first-child{overflow-wrap:anywhere}
.env-bilan-ligne{cursor:pointer}
.env-bilan-ligne:hover,.env-bilan-ligne.ouvert{background:#79bbae24}
.env-total td{font-weight:700;border-bottom:0}
.env-bilan>.env-petit{margin-top:8px}
.env-tete{padding:0 0 12px;border-bottom:1px solid var(--line);margin-bottom:14px}
.env-tete h2{margin:0;font-size:1.15rem;color:#05332a}
.env-tete p{margin:2px 0 0;color:#5c6b67;font-size:.85rem}
.env-grille{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:1000px){.env-grille{grid-template-columns:320px 1fr}}
.env-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.env-lot{display:block;width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;text-align:left;cursor:pointer;font:inherit}
.env-lot:hover{border-color:#79bbae}
.env-lot.choisi{border-color:#05332a;border-left-width:4px}
.env-lot-objet{display:block;font-weight:600;font-size:.92rem;overflow-wrap:anywhere}
.env-lot-sous{display:block;color:#5c6b67;font-size:.8rem}
.env-lot-statut{display:block;font-weight:600;font-size:.8rem}
.env-lot-statut.attente,.env-statut.attente{color:#b54708;border-color:#b54708}
.env-lot-statut.cours,.env-statut.cours{color:#05332a;border-color:#05332a}
.env-lot-statut.fini,.env-statut.fini{color:#1c2b27;border-color:#1c2b27}
.env-lot-statut.neutre,.env-statut.neutre{color:#8a9894;border-color:#b9c4c1}
.env-lot-statut.alerte,.env-statut.alerte{color:#a32800;border-color:#a32800}
.env-carte{padding:16px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:.9rem}
.env-carte>*+*{margin-top:14px}
.env-erreur{border-color:#a32800}
.env-detail{min-width:0}
.env-detail-tete{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px}
.env-detail-titre{flex:1;min-width:0}
.env-detail-titre h3{margin:0;font-size:1.2rem;line-height:1.25;overflow-wrap:anywhere}
.env-detail-titre p{margin:3px 0 0}
.env-statut{padding:3px 12px;border:1px solid;border-radius:999px;font-weight:600;font-size:.85rem;white-space:nowrap}
.env-comptes,.env-table{width:100%;border-collapse:collapse;font-size:.88rem}
.env-comptes td,.env-table td,.env-table th{padding:8px 8px 8px 0;border-bottom:1px solid #eef1f0;vertical-align:top;text-align:left}
.env-table th{border-bottom-color:var(--line);font-weight:600}
.env-comptes td.num,.env-table .num{text-align:right;font-weight:600}
.env-gris{color:#5c6b67}
.env-gras{font-weight:600}
.env-vert{color:#05332a}
.env-table td.env-vert{color:#1f8a4c}
.env-petit{display:block;color:#5c6b67;font-size:.75rem;font-weight:400}
.env-alerte{padding:10px 12px;border:1px solid #a32800;border-radius:8px}
.env-attention{padding:10px 12px;border:1px solid #b54708;border-radius:8px}
.env-suivi h4,.env-carte h4{margin:0 0 8px;font-size:.95rem}
.env-suivi-tete{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.env-suivi-tete h4{margin:0}
.env-suivi-tete .env-gris{font-size:.8rem}
.env-bouton-petit{margin-left:auto;min-height:0;height:34px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:.82rem;cursor:pointer}
.env-synthese{cursor:pointer}
.env-synthese.ouvert{background:#79bbae24}
.env-chevron{display:inline-block;margin-right:6px;transition:transform .15s}
.env-synthese.ouvert .env-chevron{transform:rotate(90deg)}
.env-apercus{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:1300px){.env-apercus{grid-template-columns:repeat(3,1fr)}}
.env-apercu{padding:12px;border:1px solid var(--line);border-radius:8px}
.env-apercu p{margin:0 0 6px}
.env-corps{white-space:pre-wrap;overflow-wrap:anywhere}
.env-dest summary{cursor:pointer;font-weight:600}
.env-dest ul{margin:8px 0 0;padding:0 0 0 18px;columns:1}
@media (min-width:700px){.env-dest ul{columns:2}}
.env-pied{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;padding-top:14px;border-top:1px solid var(--line)}
.env-bouton{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 14px;border:1px solid;border-radius:8px;font:inherit;font-size:.9rem;font-weight:500;cursor:pointer}
.env-bouton:disabled{opacity:.6;cursor:default}
.env-arreter{border-color:#a32800;color:#a32800;background:#fff}
.env-valider{border-color:#1c2b27;background:#1c2b27;color:#fff;font-weight:600}
.env-confirmer{border-color:#05332a;background:#05332a;color:#fff;font-weight:600}
.env-message{text-align:right;color:#05332a;font-size:.85rem;min-height:1em}

/* SALES : bandeau du haut calqué sur le Tracker (Pierre, 2026-09-27). Fond blanc sur toute la
   largeur, logo à gauche, titre, puis rapport des e-mails et maison tout à droite. Sur
   téléphone : logo et boutons sur la première ligne, le titre dessous. */
.sales-tete{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:-10px -14px 8px;
  padding:12px 14px;background:var(--surface);border-bottom:1px solid var(--line)}
.sales-logo{height:32px;width:auto;flex:0 0 auto}
.sales-tete-titre{flex:1 1 auto;min-width:0}
.sales-tete-titre h1{font-size:1.2rem;font-weight:600;line-height:1.2;margin:0}
.sales-tete-titre p{margin:2px 0 0}
.sales-tete-droite{display:flex;align-items:center;gap:8px;flex:0 0 auto;margin-left:auto}
.sales-tete #accueil{width:32px;height:32px}
@media (max-width:640px){
  .sales-tete-titre{order:3;flex-basis:100%}
}
/* V orange : e-mail validé qui attend son heure de départ (Pierre, 2026-09-27). */
.sales-mail-parti.programme{background:#e07a00}
/* « Ne souhaite plus être contacté(e) » : inscrite dans la liste de la page Mail Automation (2026-10-19). */
.npc-mention{display:inline-block;padding:0 6px;border:1px solid #ff4000;border-radius:6px;color:#a32800;background:#fff4ef;font-size:.72rem;font-weight:600;white-space:nowrap;cursor:default}
/* « Mettre à jour » dans le bandeau, même gabarit arrondi que le rapport des e-mails. */
.sales-tete #refresh{padding:5px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);
  color:var(--ink);font-size:.8rem;font-weight:600;cursor:pointer}
.sales-tete #refresh:hover{background:var(--tint)}
/* SALES : titres de colonnes cliquables pour trier (Pierre, 2026-09-27). */
.sales-tri{all:unset;cursor:pointer;font:inherit;font-weight:inherit;white-space:nowrap}
.sales-tri:hover{text-decoration:underline}
.sales-tri:focus-visible{outline:2px solid var(--sage);outline-offset:2px;border-radius:3px}
.sales-tri.actif{color:var(--accent)}
/* Modifier l'e-mail d'un envoi à valider. */
.env-edition{margin-top:14px;padding:12px;border:1px solid var(--ink);border-radius:8px}
.env-edition .sales-champ input,.env-edition .sales-champ textarea{width:100%}