/* Paiements : un resume lisible et des actions au meme endroit sur mobile et bureau. */
.paiement-entete { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.paiement-colonnes { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:1.25rem; margin:1.25rem 0; }
.paiement-resume { padding:1.5rem; border:1px solid var(--trait); border-radius:1rem; background:var(--accent-clair); color:var(--encre); margin-bottom:1rem; }
.paiement-montant { font-size:clamp(1.8rem,4vw,3rem); font-weight:700; margin:.5rem 0; font-variant-numeric:tabular-nums; }
.paiement-suivi { margin:1.25rem 0; }
.paiement-courriel { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.7; }
@media (max-width:760px) { .paiement-colonnes { grid-template-columns:minmax(0,1fr); } }
/* Les champs du tarif restent lisibles sans pousser les versements hors de l'ecran. */
.bareme-formulaire{border:1px solid var(--trait);border-radius:14px;background:var(--carte);padding:1.25rem;margin:1rem 0}
.bareme-formulaire legend{font-weight:700;padding:0 .5rem;color:var(--encre)}

/* LES PAGES PUBLIQUES RESTENT EN MODE CLAIR (2026-10-11, audit H18) : candidature, demande recue, lien de paiement. Comme
   `.admin-campus` pour l interface connectee, `page-claire` reprend les jetons clairs : leurs cartes et leurs champs ont des
   fonds blancs ecrits en dur, et les jetons sombres y rendaient le texte illisible. */
.page-claire{--encre:#333333;--encre-douce:#5e5e5e;--fond:#f4f7f2;--carte:#ffffff;--trait:#dce8dc;--accent:#457835;--accent-fonce:#35602a;--accent-clair:#edf5e9;--alerte:#c0392b;--alerte-fond:#fbeaea;--ombre:0 8px 28px rgba(34,66,27,.06);--encre-action:#ffffff;color-scheme:light}
.bareme-champs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 1.5rem}
.bareme-champs>div{min-width:0}
.bareme-champs label{display:block;margin-bottom:.4rem}
.bareme-champs input:not([type=checkbox]),.bareme-champs select,.bareme-champs textarea{width:100%;box-sizing:border-box}
/* La case a cocher sur la ligne de son libelle ; les champs de l entreprise n apparaissent qu une fois la case KMO
   cochee (2026-10-14, audit B24 ; sans :has, tout reste visible, comme avant). Meme regle dans socle.css, ou elle
   passe avant celle des champs avec aide (`div:has(>.helptext)`, plus loin), d ou sa specificite. Le
   remplissage dense de la grille remontait l entreprise au-dessus de la case : il est retire de ce formulaire. */
.bareme-champs>div.champ-case:has(>input){grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;column-gap:.6rem;align-items:start}
.bareme-champs>div.champ-case>input{grid-row:1;grid-column:1;margin:.25rem 0 0}
.bareme-champs>div.champ-case>label{grid-row:1;grid-column:2;margin:0}
.bareme-champs>div.champ-case>:not(input):not(label){grid-column:2}
.bareme-champs:has(input[name=kmo]:not(:checked)) [data-kmo]{display:none}
.bareme-champs:has(input[name=kmo]){grid-auto-flow:row}
@media(max-width:760px){.bareme-champs{grid-template-columns:1fr}}

/* Le socle visuel. Sobre et fonctionnel : c est un outil de travail, pas une vitrine.
   Aucune police distante : la politique de contenu n autorise que `self`, et une police
   qui ne charge pas laisse un ecran sans texte. */

/* LA CHARTE DE DISCEA, relevee dans l ancienne plateforme (`index.html:14`) et reprise telle
   quelle : c est la couleur que l ecole connait depuis des annees, et la reconnaitre coute moins
   qu apprendre une interface. La STRUCTURE, elle, reste celle du socle : des tuiles et des
   tableaux simples pour l administration et les enseignants. */
:root {
  --encre: #333333;
  --encre-douce: #5e5e5e;
  --fond: #f4f7f2;
  --carte: #ffffff;
  --trait: #dce8dc;
  --accent: #457835;
  --accent-fonce: #35602a;
  --accent-clair: #edf5e9;
  --alerte: #c0392b;
  --alerte-fond: #fbeaea;
  --rayon: 12px;
  --ombre: 0 8px 28px rgba(34, 66, 27, .06);
}

@media (prefers-color-scheme: dark) {
  :root {
    --encre: #e7ebef;
    --encre-douce: #a3b0a3;
    --fond: #151a15;
    --carte: #1d231d;
    --trait: #2f392f;
    --accent: #92cc72;
    --accent-fonce: #a8dc8a;
    --accent-clair: #23301f;
    --alerte: #e79a9a;
    --alerte-fond: #3a2222;
    --ombre: 0 2px 12px rgba(0, 0, 0, .35);
  }
}

* { box-sizing: border-box; }

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

a { color: var(--accent); }

/* LE BANDEAU DE DISCEA : une barre verte pleine, le logo de l ecole et le nom en blanc. Tout ce
   qu il contient (menu, langues, deconnexion) passe donc en blanc, sinon le texte disparait. */
.bandeau {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
  min-height: 72px;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
.bandeau .marque {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .5px;
  color: #fff;
}
.bandeau .marque img { height: 30px; width: auto; }
.bandeau .qui { margin-left: auto; color: rgba(255, 255, 255, .92); font-size: 13px; }
.bandeau form { display: inline; }
.bandeau .etat { background: rgba(255, 255, 255, .2); color: #fff; }
.bandeau button.discret {
  color: #fff;
  background: rgba(255, 255, 255, .15);
  border-color: rgba(255, 255, 255, .3);
}
.bandeau button.discret:hover { background: rgba(255, 255, 255, .28); }
.bandeau button.discret.actif { background: rgba(255, 255, 255, .32); }

main { max-width: 1440px; margin: 0 auto; padding: 32px; min-width: 0; }
main.etroit { max-width: 420px; }
main.moyen { max-width: 560px; }

h1 { font-size: clamp(24px,2.2vw,32px); line-height: 1.2; letter-spacing: -.03em; margin: 0 0 10px; }
.sous-titre { color: var(--encre-douce); margin: 0 0 24px; }

.carte {
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 20px;
}

label { display: block; font-size: 13px; color: var(--encre-douce); margin: 14px 0 4px; }
input[type=email], input[type=password], input[type=text] {
  width: 100%;
  padding: 9px 10px;
  font: inherit;
  color: var(--encre);
  background: var(--fond);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
}
input:focus-visible, button:focus-visible, a:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

button {
  margin-top: 18px;
  padding: 9px 16px;
  font: inherit;
  font-weight: 500;
  color: var(--encre-action);
  background: var(--accent);
  border: 0;
  border-radius: var(--rayon);
  cursor: pointer;
}
button.discret {
  margin: 0;
  padding: 4px 10px;
  font-size: 13px;
  color: var(--encre-douce);
  background: none;
  border: 1px solid var(--trait);
}

.erreur {
  margin: 0 0 4px;
  padding: 10px 12px;
  color: var(--alerte);
  background: var(--alerte-fond);
  border-radius: var(--rayon);
  font-size: 14px;
}

.regles { margin: 12px 0 0; padding-left: 18px; color: var(--encre-douce); font-size: 13px; }

/* Le panneau : quinze tuiles, une tache par tuile. Le compteur porte la couleur de l ecole. */
.tuiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}
.tuile {
  display: block;
  padding: 16px;
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  text-decoration: none;
  color: inherit;
}
a.tuile:hover { border-color: var(--accent); }
.tuile .compte {
  color: var(--accent);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.tuile .titre { margin-top: 2px; font-weight: 500; }
.tuile .detail { margin-top: 2px; color: var(--encre-douce); font-size: 13px; }
/* L ECRAN N EXISTE PAS ENCORE, ET CA DOIT SE VOIR. Le pointillé au ton du trait ordinaire
   etait indistinguable d une tuile branchee : la tuile annoncait alors une destination qui
   n existe pas. On monte donc le contraste du trait, sans toucher au compteur, qui est
   parfaitement juste et reste la vraie information. */
.tuile.a-venir {
  border-style: dashed;
  border-color: var(--encre-douce);
}

/* ── Les ecrans de liste ─────────────────────────────────────────────────────────── */

.fil { margin: 0 0 8px; font-size: 13px; color: var(--encre-douce); }
.fil a { text-decoration: none; }

h2 { font-size: 15px; margin: 24px 0 8px; }
.carte h2:first-child { margin-top: 0; }

/* Le sommaire : les nombres qu on lit en arrivant. Le premier porte la reponse, les autres
   la mettent en perspective, d ou la difference de taille. */
.sommaire {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  padding: 16px 20px;
  margin-bottom: 16px;
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
}
.sommaire .compte {
  display: block;
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.sommaire div:first-child .compte { font-size: 30px; }
.sommaire .quoi { font-size: 13px; color: var(--encre-douce); }

.filtres { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-bottom: 20px; }
.filtres input[type=search] {
  flex: 1;
  max-width: 380px;
  padding: 8px 10px;
  font: inherit;
  color: var(--encre);
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
}
.filtres select {
  padding: 8px 10px;
  font: inherit;
  color: var(--encre);
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
}

/* Un tableau large defile DANS son conteneur, jamais en poussant la page de cote. */
#tableau, .grille-cadre { overflow-x: auto; }

.grille {
  width: 100%;
  border-collapse: collapse;
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  font-size: 14px;
}
.grille th, .grille td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--trait);
  white-space: nowrap;
}
.grille th {
  font-size: 12px;
  font-weight: 600;
  color: var(--encre-douce);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.grille tr:last-child td { border-bottom: 0; }
.grille tbody tr:hover { background: var(--accent-clair); }
/* Une facture en retard ou un solde crediteur se reperent a leur teinte, sans devoir ouvrir
   chaque ligne : c est ce que Campus11 fait par des lignes rouges entieres, en plus discret. */
.grille tr.ligne-retard td { background: var(--alerte-fond); }
.grille tr.ligne-crediteur td { background: var(--accent-clair); }
/* Les deux autres teintes de la legende de Campus11 (Factures impayees) : payee en entier, payee en partie. */
.grille tr.ligne-payee td { background: #e4f0e6; }
.grille tr.ligne-partielle td { background: #fdf3dc; }
@media (prefers-color-scheme: dark) {
  body:not(.admin-campus) .grille tr.ligne-payee td { background: #1e2f22; }
  body:not(.admin-campus) .grille tr.ligne-partielle td { background: #3a3220; }
}
/* Les chiffres s alignent sur la virgule : c est ce qui rend une colonne de montants
   lisible d un coup d oeil au lieu de devoir la lire ligne a ligne. */
.nombre { text-align: right; font-variant-numeric: tabular-nums; }
/* LA REGLE CI-DESSUS PERDAIT DANS LES TABLEAUX, et c est passe inapercu jusqu a la premiere
   capture regardee (ecran Enseignants, 2026-09-11) : `.grille th, .grille td` pose
   `text-align: left` avec une specificite plus forte qu une classe seule. Tous les montants et
   comptes du socle etaient donc alignes a gauche, facturation comprise. */
.grille .nombre { text-align: right; }
.nombre.du { font-weight: 600; }
.nombre.trop { font-weight: 600; color: var(--alerte); }
.retard { margin-left: 6px; font-size: 12px; color: var(--alerte); }
.vide { padding: 24px; color: var(--encre-douce); text-align: center; }
.note { margin: 8px 0 0; font-size: 13px; color: var(--encre-douce); }
.mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px; }

/* L etat se lit a la forme autant qu au mot : une pastille se repere en balayant une
   colonne, un mot doit se lire. */
.etat {
  display: inline-block;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 999px;
  background: var(--accent-clair);
  color: var(--accent);
}
.etat-unpaid, .etat-partial { background: var(--alerte-fond); color: var(--alerte); }
.etat-paid { background: #e4f0e6; color: #2b6b38; }
.etat-cancelled { background: var(--fond); color: var(--encre-douce); }
@media (prefers-color-scheme: dark) {
  body:not(.admin-campus) .etat-paid { background: #1e2f22; color: #86c894; }
}

.deux-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.deux-colonnes dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; }
.deux-colonnes dt { font-size: 13px; color: var(--encre-douce); }
.deux-colonnes dd { margin: 0; }

.liens { margin: 0; padding-left: 18px; }
.liens li { margin: 4px 0; }

/* Les etats de scolarite. Le vocabulaire vient du modele, les couleurs disent la meme chose
   que le mot pour qui balaie une colonne sans la lire. */
.etat-active { background: var(--accent-clair); color: var(--accent); }
.etat-graduated { background: #e4f0e6; color: #2b6b38; }
.etat-left { background: var(--fond); color: var(--encre-douce); }
@media (prefers-color-scheme: dark) {
  body:not(.admin-campus) .etat-graduated { background: #1e2f22; color: #86c894; }
}

/* L indicateur d attente d htmx, ecrit ici plutot que par htmx lui-meme. Voir `base.html` :
   sa feuille en ligne est bloquee par la politique de contenu, et c est voulu. */
.htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }
/* Pendant qu une requete est en vol, le tableau s estompe legerement : c est le seul retour
   dont on a besoin, et il ne deplace rien a l ecran. */
#tableau.htmx-request { opacity: .55; transition: opacity 120ms ease-in; }
@media (prefers-reduced-motion: reduce) {
  .htmx-indicator, #tableau.htmx-request { transition: none; }
}

/* Le trop-percu, place dans le sommaire parce que c est la contrepartie d une decision : la
   base n empeche plus un surpaiement, donc il doit se voir en arrivant, pas au fond d une liste. */
.alerte-sommaire a { color: var(--alerte); text-decoration: none; }
.alerte-sommaire .compte { color: var(--alerte); }
.alerte-sommaire .quoi { color: var(--alerte); }

/* Le journal. Une alerte reglee reste lisible mais s efface : elle ne doit plus attirer l oeil,
   ni disparaitre, parce que « c etait quoi, ce refus du 12 ? » reste une question legitime. */
tr.reglee td { color: var(--encre-douce); }
/* Les cellules de TEXTE LIBRE reviennent a la ligne. `.grille td` interdit le retour a la ligne,
   et c est juste pour un montant ou une date ; applique a un detail, il poussait les colonnes
   suivantes hors de l ecran, dont l etat d une alerte. */
.grille td.texte { white-space: normal; overflow-wrap: anywhere; }
.detail-journal { min-width: 24ch; }
.pages { display: flex; gap: 16px; align-items: baseline; margin: 12px 0 0; font-size: 14px; }
.pages span { color: var(--encre-douce); }
.tuile .detail.alerte { color: var(--alerte); font-weight: 500; }
/* Les cases a cocher d un formulaire : pas de puce devant une case, elle en tient lieu. */
h3.jour { margin: 20px 0 6px; }
.cases { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
/* L horaire en grille, la forme du document de l ecole : creneaux en lignes, annees en colonnes. */
.a-verifier { margin: 0 0 16px; }
.grille-horaire { table-layout: fixed; }
.grille-horaire td { vertical-align: top; }
.grille-horaire th:first-child { width: 72px; }
.grille-horaire td.heure { font-variant-numeric: tabular-nums; color: var(--encre-douce); width: 64px; }
.grille-horaire .seance + .seance { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--trait); }
.grille-horaire .seance .mono { display: block; font-size: 12px; color: var(--encre-douce); }
.grille-horaire .masquee { opacity: .55; }
.grille-horaire th .theme { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--encre-douce); }
h3.jour .seminaire { font-weight: 400; color: var(--encre-douce); }
/* Le formulaire d une seance : un champ par ligne, et la question a confirmer bien visible. */
.formulaire { display: grid; gap: 10px; }
.formulaire label { margin: 0; }
.formulaire .cote-a-cote { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Les champs que la regle generale ne couvre pas prennent le meme habit que les champs texte ;
   limite au formulaire, pour ne pas etirer les listes des filtres. */
.formulaire select, .formulaire input[type=date], .formulaire input[type=time] {
  width: 100%; padding: 9px 10px; font: inherit; color: var(--encre);
  background: var(--fond); border: 1px solid var(--trait); border-radius: var(--rayon);
}
/* UNE CASE A COCHER SUR LA MEME LIGNE QUE SON TEXTE. Au premier rendu, la case etait seule et
   centree, son texte en dessous : on ne savait plus ce qu on cochait. */
label.case { display: flex; gap: 8px; align-items: center; color: var(--encre); font-size: 14px; }
.question-a-confirmer { border-left: 3px solid var(--alerte); padding: 4px 0 4px 12px; }
.formulaire button + a { margin-left: 14px; }
.compte-sans-cours { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--trait); }
.compte-sans-cours h3 { margin: 0 0 8px; font-size: 16px; }
.compte-sans-cours form { margin-top: 12px; }

/* Le choix de la langue : deux boutons discrets, la langue en cours soulignee. Absent pour un
   etudiant, dont la langue est celle de son site. */
.langues { display: inline-flex; gap: 0.1rem; margin: 0 0.4rem; }
.langues button { padding: 0.2rem 0.45rem; }
.langues button.actif { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.bandeau-langues { display: flex; justify-content: flex-end; padding: 0.6rem 1.2rem 0; }

/* L espace enseignant : la grille des cotes, une case par partie d examen. */
.grille-cotes input { width: 4.5em; text-align: right; font-variant-numeric: tabular-nums; }
.grille-cotes td .erreur { display: block; font-size: 0.75rem; margin: 0.2rem 0 0; padding: 0; }

/* ── Les ecrans d acces (connexion, code de verification) ───────────────────────────
   LE DESSIN DE L ANCIENNE PLATEFORME, repris a l identique (releve sur belso.adoptia.be le
   2026-09-11) : degrade vert de l ecole, carte blanche de 400 px, logo BELSO, libelles en
   petites capitales, bouton vert, « propulse par Discea » au pied. Les enseignants
   reconnaissent l ecran : c est la meme porte, et on ne leur apprend rien de neuf pour entrer.

   UN SEUL THEME, ET C EST VOULU. Le degrade et la carte blanche sont la marque de l ecole ; en
   theme sombre, les jetons de :root passeraient au clair et l on lirait du texte clair sur la
   carte blanche. Les jetons sont donc REDEFINIS sur le fond de l ecran d acces, qui gagne sur
   :root pour tout ce qu il contient, quel que soit le theme du systeme. */

body.acces { background: #2d4a1d; }

.acces-fond {
  --encre: #333333;
  --encre-douce: #5e5e5e;
  --fond: #ffffff;
  --carte: #ffffff;
  --trait: #dce8dc;
  --accent: #457835;
  --accent-fonce: #3a652c;
  --alerte: #a33131;
  --alerte-fond: #fbeaea;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: none;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 56px 20px 20px;
  background: linear-gradient(135deg, #2d4a1d 0%, #457835 60%, #92cc72 100%);
  color: var(--encre);
}

/* La carte se centre par ses marges automatiques, et non par un positionnement absolu : sur un
   petit ecran elle pousse le pied de page au lieu de passer dessous. */
.acces-carte {
  width: 100%;
  max-width: 400px;
  margin: auto 0;
  padding: 36px 32px;
  background: var(--carte);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .25);
}

.acces-logo { margin: 0 0 14px; line-height: 0; text-align: center; }
.acces-logo img { width: auto; height: 118px; }
.acces-sous-titre { margin: 0 0 24px; font-size: 12px; color: #6b6b6b; text-align: center; }

.acces-carte h2 { margin: 0 0 6px; font-size: 15px; text-align: center; }
.acces-carte .consigne { margin: 0 0 18px; font-size: 13px; color: var(--encre-douce); text-align: center; }

.acces-carte label {
  margin: 14px 0 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--encre-douce);
}
.acces-carte form > label:first-of-type { margin-top: 0; }
.acces-carte input[type=email],
.acces-carte input[type=password],
.acces-carte input[type=text] {
  padding: 9px 11px;
  font-size: 14px;
  background: #ffffff;
  border-radius: 6px;
}
.acces-carte input::placeholder { color: #9aa39a; }
.acces-carte input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.acces-carte input.code { font-size: 17px; letter-spacing: 3px; text-align: center; }

.acces-carte button[type=submit] {
  width: 100%;
  margin-top: 20px;
  padding: 11px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  background: var(--accent);
  border-radius: 5px;
}
.acces-carte button[type=submit]:hover { background: var(--accent-fonce); }

.acces-carte .erreur { margin: 0 0 14px; font-size: 13px; }
.acces-carte .aide { margin: 12px 0 0; font-size: 12px; color: var(--encre-douce); text-align: center; }
.acces-carte a { color: var(--accent); }

.acces-propulse {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 28px 0 0;
  font-size: 11px;
  color: rgba(255, 255, 255, .82);
}
.acces-propulse img { width: auto; height: 15px; }

/* Le choix de la langue flotte sur le degrade, en haut a droite, en blanc : il reste la premiere
   chose qu un enseignant de Gent cherche, et il ne pousse pas la carte. */
body.acces .bandeau-langues { position: absolute; top: 0; right: 0; z-index: 1; }
body.acces .bandeau-langues button.discret {
  color: #ffffff;
  border-color: rgba(255, 255, 255, .45);
  background: rgba(0, 0, 0, .08);
}
body.acces .bandeau-langues button.discret:hover { border-color: #ffffff; }

/* Sous 16 px, un telephone agrandit la page quand on touche un champ, et elle ne revient pas. */
@media (max-width: 480px) {
  .acces-fond { padding-top: 52px; }
  .acces-carte { padding: 28px 22px; }
  .acces-carte input[type=email],
  .acces-carte input[type=password],
  .acces-carte input[type=text] { font-size: 16px; }
}

/* Le code QR de l activation du second facteur : un SVG pose par le serveur (voir
   `deuxieme_facteur.code_qr`), a une taille qu un telephone lit depuis l ecran. */
.qr { margin: 10px 0 12px; line-height: 0; }
.qr svg { display: block; width: 200px; max-width: 100%; height: auto; border-radius: 4px; }

/* La prise de role du super-administrateur (voir `coeur/prise_de_role.py`) : deux menus dans le
   bandeau, dont la liste se cherche, puis un bandeau qui dit sous quel role on regarde. Le bandeau
   est de couleur d avertissement et ne se confond avec rien : on ne doit jamais oublier qu on voit
   la plateforme par les yeux de quelqu un d autre. */
.bandeau { flex-wrap: wrap; }
.prise-de-role { display: flex; gap: 8px; }
.menu-role { position: relative; }
.menu-role > summary {
  list-style: none; cursor: pointer; padding: 4px 10px; font-size: 13px;
  color: #fff; border: 1px solid rgba(255, 255, 255, .3); border-radius: var(--rayon);
  background: rgba(255, 255, 255, .15);
}
.menu-role > summary::-webkit-details-marker { display: none; }
.menu-role > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.menu-role[open] > summary { background: rgba(255, 255, 255, .3); border-color: #fff; }
.panneau-role {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 10;
  width: 340px; max-width: 90vw; padding: 10px;
  /* Le panneau retombe sur les couleurs ordinaires : il est blanc, dans une barre verte. */
  color: var(--encre);
  background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
}
.panneau-role input[type=search] {
  width: 100%; padding: 8px 10px; font: inherit; color: var(--encre);
  background: var(--fond); border: 1px solid var(--trait); border-radius: var(--rayon);
}
.panneau-role .note { margin: 8px 2px 0; }
.choix-role ul { list-style: none; margin: 8px 0 0; padding: 0; max-height: 320px; overflow-y: auto; }
.choix-role button {
  display: flex; flex-direction: column; align-items: flex-start; width: 100%;
  margin: 0; padding: 6px 8px; color: var(--encre); background: none; border: 0;
  border-radius: 4px; font-weight: 400; text-align: left;
}
.choix-role button:hover, .choix-role button:focus-visible { background: var(--accent-clair); }
.choix-role .nom { font-weight: 500; }
.choix-role .detail { font-size: 12px; color: var(--encre-douce); }

.bandeau-role {
  --role-fond: #fff4d6; --role-encre: #5c4400; --role-trait: #ecd48a;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px;
  padding: 8px 24px; font-size: 14px;
  color: var(--role-encre); background: var(--role-fond); border-bottom: 1px solid var(--role-trait);
}
.bandeau-role form { display: inline; }
.bandeau-role button {
  margin: 0; padding: 4px 12px; font-size: 13px; color: var(--role-fond); background: var(--role-encre);
}
@media (prefers-color-scheme: dark) {
  body:not(.admin-campus) .bandeau-role { --role-fond: #3a3014; --role-encre: #f2dc9b; --role-trait: #5a4a1c; }
}

/* Le menu du role (voir `coeur/menus.py`) : des liens a plat dans le bandeau, l ecran courant
   souligne par la couleur et par `aria-current`, qu un lecteur d ecran annonce. */
.menu-du-role { display: flex; flex-wrap: wrap; gap: 2px; }
.menu-du-role a {
  padding: 6px 10px; font-size: 14px; color: rgba(255, 255, 255, .85);
  text-decoration: none; border-radius: var(--rayon);
}
.menu-du-role a:hover { color: #fff; background: rgba(255, 255, 255, .16); }
.menu-du-role a[aria-current="page"] { color: #fff; font-weight: 600; background: rgba(255, 255, 255, .24); }

/* Les valves et les supports de cours de l enseignant. Un support masque reste lisible pour son
   enseignant, estompe : il ne doit pas croire l avoir perdu. */
.annonces, .matieres-cours { display: grid; gap: 12px; }
.annonce h2 { margin: 0 0 2px; }
.annonce.epinglee { border-color: var(--accent); }
.annonce .corps { margin: 8px 0 0; }
.ressources { list-style: none; margin: 8px 0 0; padding: 0; }
.ressources li {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: 8px 0; border-top: 1px solid var(--trait);
}
.ressources li:first-child { border-top: 0; }
.ressources li.masquee > div { opacity: .6; }
.ressources .note { margin: 2px 0 0; }
.ajout { margin-top: 10px; }
.ajout > summary { cursor: pointer; color: var(--accent); font-size: 14px; }
.formulaire input[type=url], .formulaire textarea {
  width: 100%; padding: 9px 10px; font: inherit; color: var(--encre);
  background: var(--fond); border: 1px solid var(--trait); border-radius: var(--rayon);
}

/* Un lien qui a l habit d un bouton (« Nouveau message », la suite de l activation). */
a.bouton {
  display: inline-block; padding: 9px 16px; font-weight: 500; color: var(--encre-action);
  background: var(--accent); border-radius: var(--rayon); text-decoration: none;
}

/* La messagerie. La boite se balaie : qui, quand, le debut du dernier message ; une conversation
   qui attend est en gras, avec son compteur. Le fil se lit comme une conversation : ses propres
   messages a droite, sur la teinte de l accent. */
.pastille {
  margin-left: 4px; padding: 0 6px; font-size: 11px; font-weight: 700; color: #fff;
  background: var(--alerte); border-radius: 999px;
}
.entete-messagerie { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.boite {
  list-style: none; margin: 16px 0 0; padding: 0;
  background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon);
}
.boite li + li { border-top: 1px solid var(--trait); }
.boite a {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px;
  padding: 12px 16px; color: inherit; text-decoration: none;
}
.boite a:hover { background: var(--accent-clair); }
.boite .qui { font-weight: 500; }
.boite .non-lue .qui { font-weight: 700; }
.boite .quand { font-size: 13px; color: var(--encre-douce); font-variant-numeric: tabular-nums; }
.boite .apercu {
  grid-column: 1 / -1; font-size: 14px; color: var(--encre-douce);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fil-messages { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 10px; }
.message {
  max-width: 85%; padding: 10px 14px; background: var(--carte);
  border: 1px solid var(--trait); border-radius: 10px;
}
.message.de-moi { margin-left: auto; background: var(--accent-clair); border-color: transparent; }
.message .entete-message { margin: 0 0 4px; display: flex; gap: 8px; align-items: baseline; }
.message .corps { margin: 0; overflow-wrap: anywhere; }
.destinataires { list-style: none; margin: 8px 0 0; padding: 0; }
.destinataires a {
  display: flex; flex-direction: column; padding: 6px 8px;
  color: var(--encre); text-decoration: none; border-radius: 4px;
}
.destinataires a:hover, .destinataires a:focus-visible { background: var(--accent-clair); }
.destinataires .detail { font-size: 12px; color: var(--encre-douce); }
#destinataire { width: 100%; padding: 9px 10px; font: inherit; color: var(--encre);
  background: var(--fond); border: 1px solid var(--trait); border-radius: var(--rayon); }
.formulaire input[type=file] { font: inherit; font-size: 14px; }
.remplacer { margin-top: 6px; }
.remplacer > summary { cursor: pointer; font-size: 13px; color: var(--accent); }
.remplacer form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.remplacer input[type=file] { font-size: 13px; }

/* L ecran d activation du second facteur, et le fil de la messagerie : quatre classes que
   les gabarits posaient sans qu aucune regle ne les habille (voir le controle `coeur.E008`).
   La cle et les codes de secours se RECOPIENT a la main sur un telephone : ils sont espaces
   caractere par caractere, et les codes s alignent en colonnes plutot qu en liste a puces. */
.etapes { margin: 0; padding-left: 20px; display: grid; gap: 10px; }
.cle { letter-spacing: .06em; overflow-wrap: anywhere; }
.codes-de-secours {
  list-style: none; margin: 10px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px 12px;
  font-variant-numeric: tabular-nums;
}
.codes-de-secours code { letter-spacing: .06em; }
.repondre { margin-top: 16px; }

/* LA MESSAGERIE EN DEUX VOLETS. La forme est celle d une messagerie de bureau, celle que tout le
   monde connait : un rail a gauche (ecrire, boite, archivees, corbeille), la liste au milieu, la
   conversation a droite. La liste reste sous les yeux pendant qu on lit, et une conversation
   ouverte se remplace sans quitter la page.

   SUR UN TELEPHONE, LA GRILLE RETOMBE SUR UNE COLONNE et le volet de droite prend toute la place
   des qu une conversation est ouverte (`.avec-fil`) : deux colonnes de 180 pixels ne se lisent
   pas, et un fil de discussion se lit en pleine largeur. Le lien « Toutes les conversations »
   ramene a la liste, comme le bouton retour d une application.

   AUCUN SCRIPT : c est de la grille CSS et des liens. La politique de securite du socle
   n autorise que ses propres scripts, et cette page n en demande aucun. */
body.messagerie-ouverte main { display: none; }
.messagerie {
  display: grid; grid-template-columns: 180px minmax(260px, 340px) 1fr;
  gap: 0; align-items: stretch;
  height: calc(100vh - 56px); max-width: 1500px; margin: 0 auto;
  background: var(--carte); border-left: 1px solid var(--trait); border-right: 1px solid var(--trait);
}
.messagerie > * { min-width: 0; overflow-y: auto; }
.rail {
  display: flex; flex-direction: column; gap: 2px; padding: 14px 10px;
  background: var(--fond); border-right: 1px solid var(--trait);
}
.rail .bouton { margin-bottom: 10px; text-align: center; }
.rail > a:not(.bouton) {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 8px 12px; font-size: 14px; color: var(--encre);
  text-decoration: none; border-radius: 999px;
}
.rail > a:not(.bouton):hover { background: var(--accent-clair); }
.rail .courant { font-weight: 600; color: #fff; background: var(--accent); }
.rail .compteur { font-size: 12px; font-variant-numeric: tabular-nums; opacity: .8; }
.colonne-liste { border-right: 1px solid var(--trait); }
.chercher {
  display: flex; gap: 6px; padding: 10px; position: sticky; top: 0; z-index: 2;
  background: var(--carte); border-bottom: 1px solid var(--trait);
}
.chercher input[type=search] {
  flex: 1; min-width: 0; padding: 8px 12px; font: inherit; color: var(--encre);
  background: var(--fond); border: 1px solid var(--trait); border-radius: 999px;
}
.chercher button { margin: 0; }
.colonne-fil { padding: 0 20px 24px; }
.fil-vide {
  display: flex; align-items: center; justify-content: center; height: 100%;
  color: var(--encre-douce); text-align: center; padding: 24px;
}
.entete-fil {
  position: sticky; top: 0; z-index: 1; padding: 14px 0 10px;
  background: var(--carte); border-bottom: 1px solid var(--trait);
}
.entete-fil h1 { margin: 4px 0 2px; font-size: 20px; }
.entete-fil .avec { margin: 0 0 8px; font-size: 13px; color: var(--encre-douce); }
.entete-fil .retour { display: none; font-size: 13px; color: var(--accent); text-decoration: none; }
.gestes { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 0; }
.gestes button { margin: 0; }
/* Sous-navigation de la facturation : les ecrans secondaires, sous la barre des tuiles. */
.actions-page + .sous-rubrique { margin: 6px 0 14px; }
.boite .epingle { color: var(--accent); }
.boite .pastille {
  display: inline-block; padding: 0 7px; font-size: 11px; font-weight: 700; color: #fff;
  background: var(--alerte); border-radius: 999px;
}
.boite .quand { display: flex; gap: 6px; align-items: center; }
.boite li.ouverte { background: var(--accent-clair); }
.boite li.ouverte > a { font-weight: 500; }
/* La citation d une reponse : un filet a gauche, et le texte cite estompe. */
.cite {
  margin: 0 0 6px; padding: 4px 0 4px 10px; font-size: 13px;
  border-left: 3px solid var(--trait);
}
.jointe { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.gestes-message { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 6px 0 0; }
.gestes-message form { display: inline; margin: 0; }
.gestes-message button { margin: 0; padding: 0; font-size: 13px; }
.repondre textarea { border-radius: var(--rayon); }
.fichier-joint { font-size: 13px; }

@media (max-width: 900px) {
  .messagerie { grid-template-columns: 1fr; height: auto; border: 0; }
  .rail { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--trait); }
  .rail .bouton { margin-bottom: 0; }
  .colonne-liste { border-right: 0; }
  .colonne-fil { padding: 0 12px 20px; }
  .entete-fil .retour { display: inline-block; }
  /* Une conversation ouverte prend l ecran : la liste attend derriere le lien de retour. */
  .messagerie.avec-fil .rail, .messagerie.avec-fil .colonne-liste { display: none; }
  .messagerie:not(.avec-fil) .colonne-fil { display: none; }
}

/* LE CALENDRIER DES MOIS de l horaire. Douze cases, une par mois, et RIEN D AUTRE : c est un
   filtre, pas un almanach. Un mois sans seance est eteint et n est pas un lien, pour qu on ne
   clique pas dans le vide ; le mois affiche porte la couleur de l ecole ET `aria-current`, jamais
   la couleur seule. */
.calendrier-mois {
  margin: 12px 0 16px; padding: 10px 12px;
  background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon);
}
.annee-du-calendrier {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin-bottom: 8px; font-variant-numeric: tabular-nums;
}
.annee-du-calendrier a { color: var(--accent); text-decoration: none; font-size: 18px; }
.calendrier-mois ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 4px;
}
.calendrier-mois a, .calendrier-mois .vide-mois {
  display: block; padding: 7px 6px; text-align: center; font-size: 14px;
  border: 1px solid transparent; border-radius: var(--rayon); text-decoration: none;
}
.calendrier-mois ul a { color: var(--encre); border-color: var(--trait); }
.calendrier-mois ul a:hover { background: var(--accent-clair); border-color: var(--accent); }
.calendrier-mois .courant {
  color: #fff; background: var(--accent); border-color: var(--accent); font-weight: 600;
}
.calendrier-mois .vide-mois { color: var(--encre-douce); opacity: .55; }

/* LES COURS ET LEUR MATERIEL, des deux cotes. La forme est celle de Campus11 (relevee le
   2026-09-12) : les cours groupes par bloc, puis un tableau par cours. Le tableau DEFILE DANS SON
   PROPRE CADRE plutot que d elargir la page : sept colonnes sur un telephone ne rentrent pas, et
   une page qui glisse lateralement rend le reste illisible. */
.filtre-cours { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0; }
.filtre-cours input[type=search] {
  padding: 8px 10px; font: inherit; color: var(--encre);
  background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon);
}
.filtre-cours button { margin: 0; }
/* Les libelles complets des blocs ne doivent pas elargir un telephone. */
.filtre-cours select { max-width: 100%; min-width: 0; padding: 8px 10px; font: inherit;
  color: var(--encre); background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); }
.bloc-cours { margin: 20px 0; }
.bloc-cours > h2 { margin: 0 0 8px; font-size: 17px; }
.liste-cours { list-style: none; margin: 0; padding: 0;
  background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); }
.liste-cours li {
  display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: space-between;
  align-items: baseline; padding: 10px 14px;
}
.liste-cours li + li { border-top: 1px solid var(--trait); }
.tableau-large { overflow-x: auto; }
.materiel { width: 100%; border-collapse: collapse; background: var(--carte); }
.materiel th, .materiel td {
  padding: 8px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--trait);
}
.materiel thead th { font-size: 13px; color: var(--encre-douce); white-space: nowrap; }
.materiel .rang { width: 2em; color: var(--encre-douce); font-variant-numeric: tabular-nums; }
.materiel .note { margin: 2px 0 0; }
/* Un document de travail reste LISIBLE pour son enseignant, estompe : il ne doit pas croire
   l avoir perdu. C est la meme regle que les supports masques d avant. */
.materiel tr.brouillon td { opacity: .72; }
.materiel .actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.materiel .actions form { display: flex; gap: 4px; align-items: center; margin: 0; }
.materiel .actions button { margin: 0; }
.fil { margin: 0 0 4px; font-size: 14px; }
.corps-texte { margin: 8px 0 0; white-space: normal; overflow-wrap: anywhere; }

/* LES ONGLETS DE L ETUDIANT : la barre blanche sous le bandeau, la forme de l ancienne
   plateforme, celle qu il ouvre depuis des annees. Elle COLLE en haut au defilement, comme la
   sienne : l etudiant qui descend dans son horaire garde ses onglets sous la main. L ecran
   courant se lit a la couleur ET au trait sous l onglet, en plus de `aria-current` que le
   lecteur d ecran annonce (jamais la couleur seule). */
.onglets {
  position: sticky; top: 0; z-index: 5;
  display: flex; flex-wrap: wrap; gap: 2px;
  padding: 0 24px; background: var(--carte); border-bottom: 1px solid var(--trait);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
.onglet {
  padding: 12px 14px; font-size: 15px; color: var(--encre-douce);
  text-decoration: none; border-bottom: 3px solid transparent;
}
.onglet:hover { color: var(--encre); background: var(--accent-clair); }
.onglet:focus-visible { color: var(--encre); }
.onglet[aria-current="page"] {
  color: var(--accent); font-weight: 600; border-bottom-color: var(--accent);
}

/* Les cartes de l espace etudiant : la forme de l ancienne plateforme (fond blanc, coins
   arrondis, ombre douce), pour que l etudiant retrouve ses reperes. */
main.large { max-width: 1080px; }
.cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.carte-lien {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 16px; background: var(--carte); border: 1px solid var(--trait);
  border-radius: 10px; box-shadow: var(--ombre); color: inherit; text-decoration: none;
}
.carte-lien:hover { border-color: var(--accent); }
.carte-lien .titre { font-weight: 600; }
.carte-lien .fleche { color: var(--accent); font-size: 18px; }

/* LES COULEURS DES CASES DE CAMPUS11, TACHE PAR TACHE (relevees sur leur tableau de bord le
   2026-09-12). Le secretariat travaille dedans tous les jours : garder « Etudiants » en turquoise
   et « Facturation » en prune lui evite de reapprendre ou regarder. Chaque tuile prend le ton
   CLAIR de leur case, avec une encre choisie pour rester lisible (leur blanc sur jaune ne l est
   pas) ; le ton FONCE sert au compteur et au trait de gauche. */
.tuile { border-left: 5px solid var(--tuile-fonce, var(--trait)); background: var(--tuile-fond, var(--carte)); color: var(--tuile-encre, inherit); }
.tuile .compte { color: var(--tuile-fonce, var(--accent)); }
.tuile .detail { color: inherit; opacity: .82; }
.tuile .detail.alerte { color: inherit; opacity: 1; font-weight: 600; text-decoration: underline; }
a.tuile:hover { border-color: var(--tuile-fonce, var(--accent)); filter: brightness(1.04); }

.tuile-messagerie   { --tuile-fond: #697c8a; --tuile-fonce: #41596b; --tuile-encre: #ffffff; }
.tuile-messagerie .compte { color: #ffffff; }
.tuile-etudiants    { --tuile-fond: #6ed8c5; --tuile-fonce: #1d6a5c; --tuile-encre: #0f3b34; }
.tuile-enseignants  { --tuile-fond: #f5d400; --tuile-fonce: #7a6a00; --tuile-encre: #4a3f00; }
.tuile-formation    { --tuile-fond: #68b8cf; --tuile-fonce: #17607a; --tuile-encre: #0d3742; }
.tuile-evaluations  { --tuile-fond: #1a3b4e; --tuile-fonce: #9dc4d8; --tuile-encre: #ffffff; }
.tuile-facturation  { --tuile-fond: #815c7a; --tuile-fonce: #e6cfe0; --tuile-encre: #ffffff; }
.tuile-horaire      { --tuile-fond: #e88541; --tuile-fonce: #8a3d05; --tuile-encre: #3d1c05; }
.tuile-presences    { --tuile-fond: #91c700; --tuile-fonce: #45620a; --tuile-encre: #2c3d00; }
.tuile-examens      { --tuile-fond: #5cb8c5; --tuile-fonce: #16606b; --tuile-encre: #0e3238; }
.tuile-bibliotheque { --tuile-fond: #b85f5f; --tuile-fonce: #f0d5d5; --tuile-encre: #ffffff; }
.tuile-memoires     { --tuile-fond: #ffc0cb; --tuile-fonce: #8c2a41; --tuile-encre: #5a2230; }
.tuile-valves       { --tuile-fond: #7bc77b; --tuile-fonce: #24601f; --tuile-encre: #14401b; }
.tuile-questions    { --tuile-fond: #d3d3d3; --tuile-fonce: #5a5a5a; --tuile-encre: #333333; }
.tuile-journal      { --tuile-fond: #e16b6b; --tuile-fonce: #7d1414; --tuile-encre: #4a1010; }
/* Une tuile sans ecran garde sa couleur mais reste en POINTILLE : c est le trait qui dit
   « pas encore d ecran », pas l absence de couleur. */
.tuile.a-venir { border-color: var(--tuile-fonce, var(--encre-douce)); border-style: dashed; }

/* « Ma fiche » : la jauge de completion, reprise du pourcentage de Campus11. `progress` est
   natif : il se style ici, sans une ligne de style dans la page. */
.completion { display: flex; align-items: center; gap: 14px; padding: 14px 20px; }
.completion .note { margin: 0; }
.jauge { flex: 1; height: 10px; border: 0; border-radius: 999px; background: var(--accent-clair); }
.jauge::-webkit-progress-bar { background: var(--accent-clair); border-radius: 999px; }
.jauge::-webkit-progress-value { background: var(--accent); border-radius: 999px; }
.jauge::-moz-progress-bar { background: var(--accent); border-radius: 999px; }
/* La grille du planning garde ses colonnes sur telephone par defilement horizontal. */
.planning-filtres { display: flex; flex-wrap: wrap; gap: 16px; align-items: end; margin-block: 20px; }
.planning-filtres label { display: grid; gap: 6px; }
.planning-tableau { overflow-x: auto; }
.formulaire .a-verifier { border-color: var(--alerte); }
/* Les informations utiles precedent les tuiles et se rangent sur telephone. */
.tableau-informations { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 20px; margin-block: 24px; }
.tableau-carte { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.tableau-carte h2 { margin-top: 0; }
.tableau-liste { list-style: none; padding: 0; margin: 0; }
.tableau-liste li { padding-block: 10px; border-bottom: 1px solid var(--trait); }
.tableau-liste p { margin-block: 6px; }
.tableau-liste .note { display: block; }
.tableau-non-lu { display: inline-block; margin-inline-start: 8px; color: var(--accent); font-size: .85em; }
.formulaire span.erreur { display: block; margin: 4px 0 0; padding: 0; font-size: 13px; background: none; }

/* Les editions se lisent aussi sur un ecran etroit, sans colonne de largeur imposee. */
.examen-candidats { display: grid; gap: .5rem; margin-block: 1rem; }
.examen-candidats label { display: flex; align-items: baseline; gap: .5rem; }
.examen-candidats input[type="checkbox"] { width: auto; }

.reglement-meta { color: var(--encre-douce); overflow-wrap: anywhere; line-height: 1.6; }
.reglement-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }

/* Les elements natifs gardent les memes cibles tactiles et la meme hierarchie. */
input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea { max-width: 100%; min-height: 42px; border-radius: 8px; }
input[type=checkbox],input[type=radio] { accent-color: var(--accent); }
button,.bouton { min-height: 42px; border-radius: 8px; font-weight: 650; }
button:disabled { cursor: not-allowed; opacity: .55; }
button:hover:not(:disabled),.bouton:hover { filter: brightness(.96); }
button.discret { min-height: 34px; }
.filtres button,.planning-filtres button { margin: 0; }
.carte { box-shadow: var(--ombre); }
.tuiles { gap: 18px; grid-template-columns: repeat(auto-fill,minmax(min(100%,230px),1fr)); }
.tuile { padding: 22px; border-left-width: 4px; box-shadow: var(--ombre); }
.tuile .compte { font-size: 32px; font-weight: 700; }
.tuile .titre { font-weight: 700; margin-top: 10px; }
.tuile .detail { margin-top: 5px; line-height: 1.5; }
.cadre-simple { min-width: 0; }
.bandeau .marque { text-decoration: none; font-size: 21px; letter-spacing: -.04em; }
.bandeau .qui { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
.tableau-large table { width: 100%; border-collapse: collapse; background: var(--carte); }
.tableau-large th,.tableau-large td { padding: 13px 15px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--trait); }
.tableau-large th { color: var(--encre-douce); font-size: 12px; font-weight: 650; background: var(--fond); }
.tableau-large { border: 1px solid var(--trait); border-radius: 12px; }
.erreur { border-left: 3px solid var(--alerte); }
.note { line-height: 1.65; }
@media (max-width:780px) { main { padding: 24px 20px; } }

/* Les couleurs des rubriques restent des reperes, sur des cartes plus lisibles. */
.tuile { background: var(--carte); color: var(--encre); border-left-color: var(--tuile-fond,var(--accent)); position: relative; transition: transform .15s ease, box-shadow .15s ease; }
.tuile .compte,.tuile-messagerie .compte { color: var(--encre); font-variant-numeric: tabular-nums; }
.tuile .titre { display: flex; align-items: center; gap: 9px; }
.tuile .titre::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--tuile-fond,var(--accent)); flex: 0 0 auto; }
.tuile .detail { color: var(--encre-douce); opacity: 1; }
.tuile .detail.alerte { color: var(--alerte); }
a.tuile:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(34,66,27,.12); filter: none; border-color: var(--tuile-fond,var(--accent)); }
.tuile.a-venir { box-shadow: none; background: transparent; border-color: var(--trait); }
.bandeau { background: #457835; }
.interface main > .fil { display: none; }
.deux-colonnes { grid-template-columns: repeat(auto-fit,minmax(min(100%,280px),1fr)); gap: 20px; }
.deux-colonnes dd { overflow-wrap: anywhere; min-width: 0; }
.formulaire-centre { max-width: 760px; }
.formulaire-centre select { width: 100%; }
.actions-formulaire { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 24px; border-top: 1px solid var(--trait); padding-top: 20px; }
.actions-formulaire button { margin: 0; }
.confirmation-action { display: flex; gap: 10px; align-items: flex-start; margin-block: 24px; }
.confirmation-action input { flex: 0 0 auto; margin-top: 5px; }
.connexion-ensemble { margin: auto 0; }
input[type=search],input[type=number],input[type=date],input[type=time],select,textarea { padding: 9px 12px; font: inherit; color: var(--encre); background: var(--carte); border: 1px solid var(--trait); }
.grille-cadre { border: 1px solid var(--trait); border-radius: var(--rayon); }
.grille { margin-bottom: 0; }
.interface main > .carte + .carte { margin-top: 20px; }
.interface h2 { margin-top: 28px; }
.interface .carte h2:first-child,.entete-page h2 { margin-top: 0; }
.accueil-introduction { background: #35602a; }
@media (prefers-color-scheme:dark) { body:not(.admin-campus) .accueil-introduction { background: #294a22; } }
@media (max-width:780px) { .deux-colonnes dl { grid-template-columns: minmax(0,1fr); gap: 2px; } .deux-colonnes dd { margin-bottom: 10px; } .filtres > div { width: 100%; } .filtres select,.filtres input { width: 100%; } }
/* Une structure commune aux trois roles. Le menu reste a portee sur grand ecran ;
   le composant details natif le remplace sur telephone, sans script additionnel. */
.interface { --largeur-menu: 224px; }
.cadre-application { display: grid; grid-template-columns: var(--largeur-menu) minmax(0,1fr); min-height: calc(100dvh - 72px); }
.navigation-laterale { position: sticky; top: 0; align-self: start; height: 100dvh; padding: 24px 14px; border-right: 1px solid var(--trait); background: var(--carte); display: flex; flex-direction: column; gap: 18px; overflow-y: auto; }
.navigation-principale { display: grid; gap: 5px; }
/* Les reperes du menu reprennent la palette des tuiles Campus. */
.navigation-principale a[data-menu] > span:first-child { display:flex; align-items:center; gap:11px; min-width:0; }
.navigation-principale a[data-menu] > span:first-child::before { content:""; display:block; width:10px; height:10px; border-radius:3px; flex:0 0 10px; background:var(--campus-bandeau,#d3d3d3); }

.navigation-principale a { min-height: 44px; padding: 11px 14px; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--encre-douce); font-size: 14px; font-weight: 500; text-decoration: none; border: 1px solid transparent; }
.navigation-principale a:hover { color: var(--accent-fonce); background: var(--fond); }
.navigation-principale a[aria-current="page"] { background: var(--accent-clair); border-color: var(--trait); color: var(--accent-fonce); font-weight: 700; box-shadow: inset 3px 0 var(--accent); }
.surtitre { margin: 0 0 8px; color: var(--accent-fonce); font-size: 11px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.navigation-laterale .surtitre { padding-inline: 14px; margin: 0; }
.pied-navigation { margin-top: auto; padding: 18px 14px 0; border-top: 1px solid var(--trait); color: var(--encre-douce); font-size: 12px; line-height: 1.7; }
.zone-contenu { min-width: 0; }
.reperes-page { min-height: 68px; padding: 14px 32px; display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; border-bottom: 1px solid var(--trait); background: var(--carte); }
.bouton-retour { display: inline-flex; align-items: center; gap: 9px; min-height: 38px; padding: 7px 12px; border: 1px solid var(--trait); border-radius: 8px; color: var(--encre); background: var(--carte); text-decoration: none; font-size: 13px; font-weight: 600; white-space: nowrap; }
.bouton-retour:hover { background: var(--accent-clair); border-color: var(--accent); }
.repere-accueil { color: var(--encre-douce); font-size: 13px; }
.chemin-page { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; color: var(--encre-douce); font-size: 12px; }
.chemin-page a { color: inherit; text-decoration: none; }
.chemin-page [aria-current="page"] { color: var(--encre); font-weight: 600; }
.entete-page { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.entete-page .sous-titre { margin-bottom: 0; max-width: 68ch; }
.menu-mobile { display: none; }
.saut-contenu { position: fixed; left: 18px; top: -100px; z-index: 100; padding: 12px 18px; background: var(--carte); color: var(--encre); border: 2px solid var(--accent); border-radius: 8px; }
.saut-contenu:focus { top: 12px; }

/* Les images de guide reprennent les commandes sans employer de donnees reelles. */
.guides-illustres { display: grid; gap: 22px; }
.guide-illustre { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(280px,1fr); gap: 30px; padding: 30px; align-items: start; }
.guide-texte h2 { margin: 5px 0 9px; font-size: clamp(21px,2vw,28px); }
.guide-texte > p:not(.surtitre) { color: var(--encre-douce); margin: 0 0 16px; }
.guide-etapes { counter-reset: guide; list-style: none; margin: 0 0 22px; padding: 0; }
.guide-etapes li { counter-increment: guide; display: grid; grid-template-columns: 30px minmax(0,1fr); column-gap: 12px; padding: 11px 0; border-top: 1px solid var(--trait); }
.guide-etapes li::before { content: counter(guide); grid-row: span 2; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: white; font-size: 13px; font-weight: 700; }
.guide-etapes strong { font-size: 14px; }
.guide-etapes span { color: var(--encre-douce); font-size: 13px; line-height: 1.55; }
.guide-figure { margin: 0; }
.guide-figure figcaption { margin-top: 9px; color: var(--encre-douce); font-size: 12px; }
.guide-capture { overflow: hidden; border: 1px solid var(--trait); border-radius: 14px; background: #fbfdfb; box-shadow: 0 14px 30px rgba(20,48,22,.1); }
.guide-capture-haut { display: flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px; background: #e8efe6; }
.guide-capture-haut i { width: 6px; height: 6px; border-radius: 50%; background: #b8cbb5; }
.guide-capture-haut b { margin-left: auto; color: #35602a; font-size: 10px; letter-spacing: .12em; }
.guide-capture-corps { display: grid; grid-template-columns: 54px minmax(0,1fr); min-height: 255px; }
.guide-capture-menu { display: grid; align-content: start; gap: 17px; padding: 20px 13px; background: #35602a; }
.guide-capture-menu span { height: 7px; border-radius: 5px; background: #9ebd98; }
.guide-capture-page { padding: 20px 16px; }
.guide-capture-titre { color: #243922; font-size: 16px; font-weight: 700; margin-bottom: 15px; }
.guide-capture-sous-titre { margin: -7px 0 12px; color: #587253; font-size: 12px; }
.guide-capture-ligne { display: flex; align-items: center; gap: 10px; min-height: 39px; margin-bottom: 7px; padding: 6px 9px; border: 1px solid #d9e6d6; border-radius: 7px; background: white; color: #31552b; font-size: 11px; font-weight: 600; }
.guide-capture-ligne strong { display: grid; place-items: center; flex: 0 0 20px; height: 20px; border-radius: 50%; background: #35602a; color: white; }
.guide-capture-ligne em { margin-left: auto; font-style: normal; color: #49723f; white-space: nowrap; }
.guide-capture-apercu { width: max-content; max-width: 100%; margin-top: 12px; padding: 7px 10px; border-radius: 7px; background: #35602a; color: white; font-size: 11px; font-weight: 700; }
@media (max-width: 820px) { .guide-illustre { grid-template-columns: 1fr; padding: 20px; } .guide-figure { max-width: 520px; } }
.grille-parcours { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,340px),1fr)); gap: 20px; }
.carte-parcours { padding: 28px; }
.carte-parcours h2 { font-size: 19px; margin: 0 0 10px; }
.carte-parcours > p { color: var(--encre-douce); font-size: 14px; }
.etapes-parcours { list-style: none; padding: 0; margin: 20px 0 0; counter-reset: parcours; }
.etapes-parcours li { counter-increment: parcours; display: flex; align-items: baseline; gap: 12px; border-top: 1px solid var(--trait); padding: 13px 0; }
.etapes-parcours li::before { content: counter(parcours,decimal-leading-zero); font-size: 11px; font-weight: 700; color: var(--accent); }
.etapes-parcours a { flex: 1; display: flex; gap: 12px; align-items: baseline; justify-content: space-between; text-decoration: none; color: var(--encre); font-size: 14px; }
.etapes-parcours a:hover { color: var(--accent); text-decoration: underline; }
.entete-raccourcis { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.entete-raccourcis .bouton { margin: 0; }
.accueil-introduction { border-radius: 18px; padding: 30px; margin-bottom: 28px; background: #35602a; color: #fff; display: flex; gap: 24px; justify-content: space-between; align-items: center; }
.accueil-introduction h1 { color: #fff; font-size: clamp(25px,2.4vw,34px); }
.accueil-introduction .surtitre, .accueil-introduction .sous-titre { color: #e7f3e2; }
.accueil-introduction .sous-titre { margin: 10px 0 0; max-width: 60ch; }
.accueil-introduction .bouton { background: #fff; color: #285121; border-color: #fff; margin: 0; white-space: nowrap; }
.connexion-presentation { max-width: 490px; color: #fff; }
.connexion-presentation h2 { font-size: clamp(32px,4vw,52px); letter-spacing: -.04em; line-height: 1.13; margin: 24px 0; }
.connexion-presentation p { color: #e7f3e2; font-size: 17px; max-width: 38ch; }
.connexion-presentation .surtitre { color: #dfefcd; }
.connexion-ensemble { display: grid; grid-template-columns: minmax(0,1fr) minmax(340px,430px); gap: clamp(36px,7vw,100px); align-items: center; max-width: 1080px; width: 100%; }
.connexion-aide { color: #646d61; font-size: 12px; margin-top: 20px; line-height: 1.6; text-align: center; }
@media (max-width: 1100px) { .interface { --largeur-menu: 196px; } .reperes-page { padding-inline: 24px; } .bandeau .qui { max-width: 65%; } }
@media (max-width: 780px) {
 .cadre-application { display: block; } .navigation-laterale { display: none; }
 .menu-mobile { display: block; background: var(--carte); border-bottom: 1px solid var(--trait); }
 .menu-mobile > summary { padding: 14px 20px; cursor: pointer; font-weight: 650; color: var(--accent-fonce); }
 .menu-mobile .navigation-principale { padding: 0 12px 12px; grid-template-columns: repeat(2,minmax(0,1fr)); }
 .reperes-page { padding: 12px 20px; gap: 10px; }
 .chemin-page { font-size: 11px; } .bandeau { padding: 14px 20px; flex-wrap: wrap; }
 .bandeau .qui { max-width: none; width: 100%; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
 .accueil-introduction { padding: 24px; flex-direction: column; align-items: flex-start; }
 .connexion-ensemble { grid-template-columns: 1fr; max-width: 430px; gap: 24px; }
 .connexion-presentation { text-align: center; } .connexion-presentation h2 { font-size: 28px; margin: 10px 0; } .connexion-presentation p { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }
@media print { .navigation-laterale,.menu-mobile,.reperes-page,.bandeau,.saut-contenu { display: none; } .cadre-application { display: block; } .zone-contenu main { max-width: none; padding: 0; } }

/* Le vert clair du mode sombre exige une encre foncee sur les actions. */
:root { --encre-action: #ffffff; }
@media (prefers-color-scheme: dark) { :root { --encre-action: #152411; } }
body.acces { --encre-action: #ffffff; }
/* La coquille des espaces (`.admin-campus` : administration, enseignant, etudiant) garde en theme sombre son
   accent fonce #183b49 : son encre d action reste donc blanche, comme en theme clair. Sans elle, les actions y
   ecrivaient #152411 sur #183b49, 1,36:1 (2026-09-26, reprise/construire_encre_action_campus.py). */
body.admin-campus { --encre-action: #ffffff; }
a.bouton.discret { color: var(--accent-fonce); background: var(--carte); border: 1px solid var(--trait); }
.bandeau button.discret { background: transparent; }
.bandeau button.discret:hover { background: rgba(0,0,0,.16); }
.bandeau button.discret.actif { background: #35602a; }
.grille td.texte { min-width: 14rem; }

/* Une absence de statut personnel reste visuellement neutre. */
.etat-unconfirmed { background: var(--fond); color: var(--encre-douce); }

/* La page courante reste lisible jusqu a la reponse, sans ecran intercalaire. */
.attente-navigation { display: none; position: fixed; top: 0; left: 0; right: 0;
  height: 3px; background: var(--accent); z-index: 10000; pointer-events: none; }
.attente-navigation.htmx-request { display: block; }

/* Les cours gardent des reperes identiques du depot a la lecture sur telephone. */
.cours-espace { max-width: 1240px; }
.cours-entete { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:28px; margin-bottom:28px; border:1px solid var(--trait); border-left:5px solid var(--accent); border-radius:16px; background:var(--carte); }
.cours-entete h1 { font-size:clamp(24px,3vw,34px); overflow-wrap:anywhere; }
.cours-entete .sous-titre { margin:10px 0 0; }
.cours-entete .bouton { flex-shrink:0; margin:0; }
.cours-espace > p > a { display:inline-flex; align-items:center; min-height:44px; padding:10px 16px; border:1px solid var(--trait); border-radius:8px; background:var(--carte); color:var(--accent-fonce); text-decoration:none; font-weight:600; }
.espace-supports { scroll-margin-top:24px; }
.espace-supports .entete-page { margin-bottom:16px; }
.espace-supports .entete-page h2 { margin:0; }
.rubriques-supports { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 20px; }
.rubriques-supports a { display:flex; align-items:center; gap:10px; padding:12px 16px; min-height:44px; border:1px solid var(--trait); border-radius:10px; background:var(--carte); color:var(--encre-douce); font-weight:600; text-decoration:none; }
.rubriques-supports a[aria-current=page] { color:var(--accent-fonce); background:var(--accent-clair); border-color:var(--accent); }
.rubriques-supports span { font-size:12px; font-variant-numeric:tabular-nums; }
.recherche-supports { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:20px 0; }
.recherche-supports label { font-weight:600; font-size:13px; }
.recherche-supports input { flex:1; min-width:140px; max-width:380px; }
.recherche-supports button { margin:0; }
.liste-supports { display:grid; gap:14px; }
.support-carte { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:24px; padding:24px; background:var(--carte); border:1px solid var(--trait); border-radius:14px; box-shadow:var(--ombre); }
.support-principal { min-width:0; }
.support-principal h3 { margin:6px 0 10px; font-size:18px; overflow-wrap:anywhere; }
.support-principal .note { margin:6px 0; }
.support-principal .corps-texte { font-size:14px; }
.support-fichier { font-size:12px; color:var(--encre-douce); overflow-wrap:anywhere; }
.support-lecture { display:flex; align-items:flex-end; flex-direction:column; gap:12px; }
.support-lecture .bouton { margin:0; }
.support-gestion { grid-column:1/-1; margin-top:16px; padding-top:14px; border-top:1px solid var(--trait); }
.support-gestion summary { cursor:pointer; color:var(--accent-fonce); font-size:13px; font-weight:600; min-height:32px; }
.support-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 0; }
.support-actions button,.support-actions .bouton { margin:0; }
.remplacement-support { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding-top:12px; }
.remplacement-support input { max-width:100%; }
.depot-support { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:32px; border:1px solid var(--trait); border-radius:16px; padding:28px; margin-top:36px; background:var(--carte); scroll-margin-top:24px; }
.depot-support > div > p:not(.surtitre) { color:var(--encre-douce); line-height:1.7; }
.depot-support .formulaire { max-width:none; margin:0; }
.depot-support fieldset { border:0; padding:0; margin:0 0 24px; min-width:0; }
.depot-support legend { font-size:17px; font-weight:700; padding:0 0 14px; }
.depot-support input,.depot-support select,.depot-support textarea { width:100%; }
.presentation-cours { padding:18px 22px; border:1px solid var(--trait); border-radius:12px; margin-bottom:24px; background:var(--carte); }
.presentation-cours summary { cursor:pointer; font-weight:600; }
.cours-cartes,.bloc-cours .liste-cours { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:16px; padding:0; }
.cours-carte,.bloc-cours .liste-cours li { display:flex; flex-direction:column; align-items:flex-start; min-height:170px; gap:10px; padding:24px; border:1px solid var(--trait); border-top:4px solid var(--accent); border-radius:14px; background:var(--carte); box-shadow:var(--ombre); color:var(--encre); text-decoration:none; }
.cours-carte:hover,.bloc-cours .liste-cours li:hover { border-color:var(--accent); }
.cours-carte h3 { margin:0; font-size:19px; overflow-wrap:anywhere; }
.cours-carte p { margin:0; font-size:13px; color:var(--encre-douce); }
.cours-ouvrir { margin-top:auto; padding-top:14px; font-size:13px; color:var(--accent-fonce); font-weight:650; }
.bloc-cours .liste-cours li > a { font-size:18px; font-weight:650; }
@media (max-width:780px) {
 .cours-entete { padding:22px; flex-direction:column; align-items:flex-start; }
 .depot-support { grid-template-columns:1fr; padding:20px; gap:12px; }
 .support-carte { grid-template-columns:1fr; padding:20px; }
 .support-lecture { align-items:flex-start; flex-direction:row; flex-wrap:wrap; margin-top:14px; }
 .rubriques-supports { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
 .rubriques-supports a { justify-content:space-between; padding:10px; font-size:13px; }
 .recherche-supports label { width:100%; }
}

/* Le tri des annees : une colonne par annee d etudes, une carte par etudiant, et les annees en
   boutons sous la carte ; celle de l etudiant est marquee et inerte. Un retrait se deplie. */
.tri-annees { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 12px; align-items: start; }
.tri-colonne { min-width: 0; padding: 10px; background: var(--fond); border: 1px solid var(--trait); border-radius: var(--rayon); }
.tri-colonne h2 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 2px 4px 10px; font-size: 15px; }
.tri-colonne .vide { margin: 4px; }
.tri-carte { margin: 0 0 8px; padding: 10px 12px; background: var(--carte); border: 1px solid var(--trait); border-radius: 10px; overflow-wrap: anywhere; }
.tri-carte h3 { margin: 0 0 4px; font-size: 14px; }
.tri-carte .note { margin: 4px 0; }
.tri-carte .note form { display: inline; }
.tri-cibles { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 0; }
.tri-cibles button { min-width: 34px; }
.tri-cibles button[aria-current] { color: var(--encre-action); background: var(--accent); border-color: var(--accent); opacity: 1; }
.tri-retrait { display: inline; }
.tri-retrait summary { display: inline; cursor: pointer; font-size: 12px; color: var(--encre-douce); }
.tri-retrait form { display: block; margin-top: 4px; }
.etat-requested { background: var(--alerte-fond); color: var(--alerte); }

/* Les gestes d une page, en boutons numerotes dans l ordre ou ils se font : un lien nu se lit mal
   au milieu d une page ; une carte avec son numero et sa ligne d aide se reconnait d un coup d oeil. */
.actions-page { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.actions-page a { display: flex; align-items: center; gap: 12px; padding: 12px 16px; min-height: 52px; border: 1px solid var(--trait); border-radius: 10px; background: var(--carte); color: var(--encre); font-weight: 600; text-decoration: none; box-shadow: var(--ombre); }
.actions-page a:hover, .actions-page a:focus-visible { border-color: var(--accent); color: var(--accent-fonce); }
.actions-page .etape { display: inline-flex; flex: 0 0 auto; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 999px; background: var(--accent-clair); color: var(--accent-fonce); font-size: 13px; font-weight: 700; }
.actions-page small { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--encre-douce); }

/* LA FACTURATION (remise en page du 25/09/2026) : ses rubriques en onglets soulignes, les pages d une rubrique en
   pastilles. La page ouverte se lit a la couleur ET au trait, ou au fond, en plus de `aria-current` qu un lecteur
   d ecran annonce : avant, rien a l ecran ne la distinguait. */
.rubriques-facturation { display: flex; gap: 2px; margin: 18px 0 22px; border-bottom: 1px solid var(--trait); overflow-x: auto; }
.rubriques-facturation a { margin-bottom: -1px; padding: 11px 14px 10px; border-bottom: 3px solid transparent; color: var(--encre-douce); font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.rubriques-facturation a:hover { color: var(--encre); }
.rubriques-facturation a[aria-current="page"] { border-bottom-color: var(--accent); color: var(--accent); }
.pages-rubrique { display: flex; flex-wrap: wrap; gap: 4px; width: fit-content; max-width: 100%; margin: 0 0 22px; padding: 3px; border: 1px solid var(--trait); border-radius: 999px; background: var(--carte); }
.rubriques-facturation + .pages-rubrique { margin-top: -6px; }
.pages-rubrique a { padding: 6px 14px; border-radius: 999px; color: var(--encre-douce); font-size: 14px; font-weight: 600; text-decoration: none; }
.pages-rubrique a:hover { color: var(--encre); }
.pages-rubrique a[aria-current="page"] { background: var(--accent); color: #fff; }

/* Le tableau de bord de la facturation : ce qui demande un geste d abord ; la semaine et l etat de Mollie a cote.
   Chaque teinte porte sa couleur et son fond ; un sujet a zero se calme en gris. */
.ton-vert { --teinte: #2b6b38; --teinte-fond: #e4f0e6; }
.ton-ambre { --teinte: #8f5c10; --teinte-fond: #fbf1df; }
.ton-rouge { --teinte: #a23d4a; --teinte-fond: #fbecee; }
.ton-bleu { --teinte: #48639a; --teinte-fond: #eef2f9; }
.ton-neutre { --teinte: #5c6e7c; --teinte-fond: #eef1f2; }
.tdb-colonnes { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(290px, 1fr); gap: 20px; align-items: start; }
.tdb-cote { display: grid; gap: 20px; }
.tdb-carte { background: var(--carte); border: 1px solid var(--trait); border-radius: 12px; box-shadow: 0 1px 2px rgba(24, 59, 73, .05); }
.tdb-carte > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 20px 14px; border-bottom: 1px solid var(--trait); }
.tdb-carte h2 { margin: 0; font-size: 16px; }
.tdb-indice { color: var(--encre-douce); font-size: 13px; }
.tdb-sujet { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: 14px; align-items: center; padding: 16px 20px; border-top: 1px solid var(--trait); }
.tdb-carte > header + .tdb-sujet { border-top: 0; }
.tdb-compte { display: flex; grid-row: 1 / span 2; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: var(--teinte-fond); color: var(--teinte); font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tdb-calme .tdb-compte { background: var(--fond); color: var(--encre-douce); }
.tdb-sujet strong { grid-column: 2; font-size: 15px; }
.tdb-sujet p { grid-column: 2; margin: 2px 0 0; color: var(--encre-douce); font-size: 13px; }
.tdb-sujet > .tdb-bouton { grid-column: 3; grid-row: 1 / span 2; }
.tdb-info { background: #fafbfc; border-radius: 0 0 12px 12px; }
.tdb-detail { grid-column: 2 / -1; margin-top: 12px; border: 1px solid var(--trait); border-radius: 8px; overflow-x: auto; }
.tdb-detail table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tdb-detail td { padding: 8px 12px; border-top: 1px solid var(--trait); vertical-align: middle; }
.tdb-detail tr:first-child td { border-top: 0; }
.tdb-detail td:last-child { width: 1%; text-align: right; }
.tdb-montant { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tdb-bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--trait); border-radius: 8px; background: var(--carte); color: var(--accent); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.tdb-bouton:hover { border-color: var(--accent); }
.tdb-principal { border-color: var(--accent); background: var(--accent); color: #fff; }
.tdb-chiffre { padding: 18px 20px 4px; }
.tdb-chiffre strong { display: block; font-size: 30px; line-height: 1.15; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.tdb-chiffre p { margin: 4px 0 0; color: var(--encre-douce); font-size: 13px; }
.tdb-graphique { padding: 14px 20px 0; }
.tdb-graphe { display: block; width: 100%; height: 56px; }
.tdb-graphe rect { fill: #c9d7dc; }
.tdb-graphe rect.tdb-jour { fill: var(--accent); }
.tdb-jours { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-top: 4px; color: var(--encre-douce); font-size: 11px; text-align: center; }
.tdb-jours .tdb-jour { color: var(--accent); font-weight: 700; }
.tdb-lignes { margin: 10px 0 0; padding: 0 20px 6px; list-style: none; }
.tdb-lignes li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--trait); font-size: 14px; }
.tdb-pastille { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--teinte-fond); color: var(--teinte); font-size: 12px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.tdb-pastille::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tdb-etat > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 20px; border-top: 1px solid var(--trait); font-size: 14px; }
.tdb-etat > div:first-child { border-top: 0; }
.tdb-etat small { display: block; color: var(--encre-douce); font-size: 12px; }
.tdb-note { margin: 0; padding: 12px 20px; border-top: 1px solid var(--trait); color: var(--encre-douce); font-size: 13px; }
.tdb-pied { margin: 0; padding: 0 20px 16px; font-size: 14px; font-weight: 600; }
@media (max-width: 980px) { .tdb-colonnes { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .tdb-sujet { grid-template-columns: 44px minmax(0, 1fr); }
  .tdb-sujet > .tdb-bouton { grid-column: 2; grid-row: auto; justify-self: start; margin-top: 10px; }
  .tdb-detail { grid-column: 1 / -1; }
  .tdb-detail table, .tdb-detail tbody { display: block; }
  .tdb-detail tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 12px; border-top: 1px solid var(--trait); }
  .tdb-detail tr:first-child { border-top: 0; }
  .tdb-detail td { padding: 0; border-top: 0; }
  .tdb-detail td:last-child { width: auto; flex-basis: 100%; text-align: left; }
}

/* Les reglages de la facturation (remis en page le 25/09/2026) : une carte par site, cote a cote ; dans chaque carte,
   la numerotation, les coordonnees et le paiement en ligne, chacun avec son etat et son geste. Un choix coupe est gris,
   pas rouge : c est un reglage, pas une panne. */
.reglages-sites { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 20px; align-items: start; margin: 16px 0 18px; }
.reglages-sites .tdb-carte > header h2 { font-size: 18px; }
.reglage { padding: 16px 20px 18px; border-top: 1px solid var(--trait); }
.tdb-carte > header + .reglage { border-top: 0; }
.reglage-entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.reglage-entete h3 { margin: 0; font-size: 15px; }
.reglage > p { margin: 8px 0 0; }
.reglage-alerte { padding: 10px 12px; border-radius: 8px; background: #fbf1df; color: #8f5c10; font-size: 13px; }
.reglage-series { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 13px; }
.reglage-series th { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--trait); color: var(--encre-douce); font-weight: 600; text-align: left; text-transform: none; letter-spacing: 0; }
.reglage-series td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--trait); font-variant-numeric: tabular-nums; }
.reglage-choix { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--trait); font-size: 14px; }
.reglage-choix:last-of-type { border-bottom: 0; }
.reglage .tdb-bouton { margin-top: 12px; }

/* Les listes de la facturation (Encaissements le 25/09/2026, puis les autres onglets) : un bandeau d etat d une ligne,
   les etats en pastilles qu un clic choisit, la recherche a cote, un tableau aere ou la couleur dit l etat. L etat choisi
   se lit au fond ET a `aria-pressed`, qu un lecteur d ecran annonce. */
.tdb-bandeau { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 16px; padding: 12px 18px; font-size: 14px; }
.tdb-bandeau > a { margin-left: auto; font-weight: 600; }
.tdb-filtres { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin: 0 0 16px; }
.tdb-etats { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px; border: 1px solid var(--trait); border-radius: 22px; background: var(--carte); }
.tdb-etats button { min-height: 0; margin: 0; padding: 6px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--encre-douce); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.tdb-etats button:hover { color: var(--encre); filter: none; }
.tdb-etats button[aria-pressed="true"] { background: var(--accent); color: #fff; }
.tdb-recherche { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.tdb-recherche label { display: grid; gap: 4px; color: var(--encre-douce); font-size: 12px; font-weight: 600; }
.tdb-recherche .tdb-bouton { min-height: 42px; cursor: pointer; }
.tdb-liste { margin: 0 0 16px; overflow-x: auto; }
.tdb-tableau { width: 100%; border-collapse: collapse; font-size: 14px; }
.tdb-tableau th { padding: 10px 16px; border-bottom: 1px solid var(--trait); color: var(--encre-douce); font-size: 12px; font-weight: 600; text-align: left; text-transform: none; letter-spacing: 0; white-space: nowrap; }
.tdb-tableau th.tdb-montant { text-align: right; }
.tdb-tableau td { padding: 11px 16px; border-bottom: 1px solid var(--trait); vertical-align: middle; }
.tdb-tableau tbody tr:last-child td { border-bottom: 0; }
.tdb-tableau tbody tr:hover { background: #fafbfc; }
.tdb-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 16px; color: var(--encre-douce); font-size: 14px; }
.tdb-bandeau > a.tdb-bouton { margin-left: 0; }
.tdb-actions { white-space: nowrap; }
.tdb-actions .tdb-bouton + .tdb-bouton { margin-left: 8px; }
.note + .tdb-bandeau { margin-top: 12px; }
.tdb-sous-ligne { display: block; margin-top: 2px; color: var(--encre-douce); font-size: 12px; font-weight: 400; }

/* Les factures (remises en page le 25/09/2026) : chaque filtre porte son libelle au-dessus de son champ ; la legende des
   teintes tient en une ligne, aux couleurs des lignes du tableau (.grille tr.ligne-*). */
.tdb-champ { display: grid; gap: 4px; }
.tdb-champ label { color: var(--encre-douce); font-size: 12px; font-weight: 600; }
.tdb-champ-large { flex: 1 1 260px; }
.tdb-champ-large input { width: 100%; }
.tdb-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 0 0 16px; color: var(--encre-douce); font-size: 13px; }
.tdb-teinte { display: inline-flex; align-items: center; gap: 6px; }
.tdb-teinte::before { content: ""; width: 14px; height: 14px; border: 1px solid var(--trait); border-radius: 4px; background: var(--carte); }
.tdb-teinte.ligne-payee::before { background: #e4f0e6; }
.tdb-teinte.ligne-crediteur::before { background: var(--accent-clair); }
.tdb-teinte.ligne-partielle::before { background: #fdf3dc; }
.tdb-teinte.ligne-retard::before { background: var(--alerte-fond); }

/* Sur l ecran des blocs, l annee que le nom propose, tant qu elle n est pas posee : en pointille. */
.tri-cibles button.proposee { border-style: dashed; border-color: var(--accent); color: var(--accent-fonce); }

/* LES CASES DU DOSSIER D UN ETUDIANT, AUX COULEURS DES CASES DE SA FICHE DANS CAMPUS11 (relevees le 2026-09-18) :
   Profil bleu nuit, Mes cours turquoise, Inscription jaune, Horaires sarcelle, Factures bleu acier, Examens bleu
   nuit profond, Mes resultats vert pomme. Meme regle que le panneau : la couleur de la case marque son trait et sa
   pastille, la carte reste claire et lisible. */
.case-profil      { --tuile-fond: #1a3b4e; --tuile-fonce: #9dc4d8; --tuile-encre: #ffffff; }
.case-cours       { --tuile-fond: #6ed8c5; --tuile-fonce: #1d6a5c; --tuile-encre: #0f3b34; }
.case-inscription { --tuile-fond: #f5d400; --tuile-fonce: #7a6a00; --tuile-encre: #4a3f00; }
.case-horaires    { --tuile-fond: #20b2aa; --tuile-fonce: #0b4f4b; --tuile-encre: #06302d; }
.case-factures    { --tuile-fond: #b0c4de; --tuile-fonce: #3e5a80; --tuile-encre: #1c2c42; }
.case-examens     { --tuile-fond: #0d1e28; --tuile-fonce: #9dc4d8; --tuile-encre: #ffffff; }
.case-resultats   { --tuile-fond: #bade00; --tuile-fonce: #45620a; --tuile-encre: #2c3d00; }
.case-financier   { --tuile-fond: #34c1e8; --tuile-fonce: #0b5a70; --tuile-encre: #062f3b; }
.case-formations  { --tuile-fond: #b5a9f9; --tuile-fonce: #4a3a9e; --tuile-encre: #251b57; }
.case-documents   { --tuile-fond: #d3d3d3; --tuile-fonce: #5a5a5a; --tuile-encre: #333333; }
.case-qui         { --tuile-fond: #7bc77b; --tuile-fonce: #24601f; --tuile-encre: #14401b; }

/* Le statut d une nouvelle inscription : deux choix sur une ligne, sans cadre. */
.choix-statut { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.choix-statut legend { padding: 0; margin: 0 0 4px; font-size: 13px; color: var(--encre-douce); }
.choix-statut label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; }

/* La photo d un enseignant : sur sa fiche, et dans l annuaire (« Avatar » de Campus11). `object-fit` garde le
   visage centre quelle que soit la forme du fichier depose. */
.portrait { border-radius: 10px; object-fit: cover; background: var(--trait); }
.portrait-annuaire { border-radius: 50%; object-fit: cover; background: var(--trait); }

/* Les choix restent accessibles au clavier dans une liste bornee. */
.choix-cours-seance { max-height: 22rem; overflow-y: auto; padding: .5rem; }

/* L accueil valide donne la priorite aux cours, sans compteurs decoratifs. */
.interface .bandeau .marque img{width:66px;height:66px;object-fit:contain}
.interface .bandeau{min-height:88px}
.signature-plateforme{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin:24px 28px;padding:18px 0;border-top:1px solid var(--trait);font-size:12px;color:var(--encre-douce)}
.signature-discea{display:flex;background:#20351e;padding:12px 17px;border-radius:9px}
.signature-discea img{width:112px;height:auto}
.accueil-prof{max-width:1240px;margin:auto}
.cartes-prof{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin:24px 0}
.carte-prof{grid-column:span 2;display:flex;flex-direction:column;justify-content:center;background:var(--carte);border:1px solid var(--trait);border-radius:16px;padding:24px;min-height:106px;color:var(--encre);text-decoration:none;box-shadow:var(--ombre)}
.carte-prof h2{font-size:17px;margin:0}.carte-prof p{font-size:14px;margin:8px 0 0;color:var(--encre-douce)}
.carte-prof:hover{border-color:var(--accent)}
.cartes-prof>.carte-prof:nth-child(2),.cartes-prof>.carte-prof:nth-child(3){grid-column:span 3}
.carte-prof-principale{grid-column:span 3;grid-row:span 2;background:#457835;color:#fff;min-height:230px}.carte-prof-principale h2{font-size:27px}.carte-prof-principale p{color:#edf5e9}
.carte-prof-indisponible{background:var(--fond);border-style:dashed;color:var(--encre-douce)}
.journee-prof{border:1px solid var(--trait);border-left:5px solid var(--accent);background:var(--carte);border-radius:16px;padding:24px;margin:24px 0}
.journee-prof h3{font-size:23px;margin:8px 0}.journee-prof p{margin:7px 0}
.journee-entete,.journee-actions,.journee-navigation,.outils-journee,.choix-journee{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.journee-entete,.journee-actions{justify-content:space-between}.journee-entete{padding-bottom:12px;border-bottom:1px solid var(--trait)}.journee-entete h2{font-size:14px;margin:0}.journee-actions{margin-top:18px}
.journee-navigation a{border:1px solid var(--trait);padding:6px 12px;border-radius:8px;font-size:13px;text-decoration:none}
.feuille-journee{border:1px solid var(--trait);background:var(--carte);border-radius:16px;padding:24px;margin:20px 0;scroll-margin-top:20px}
.outils-journee{margin:16px 0}.choix-journee label{display:flex;gap:6px;align-items:center;padding:8px;border:1px solid var(--trait);border-radius:8px;font-size:13px}.choix-journee label:has(input:checked){background:var(--accent-clair);border-color:var(--accent)}
@media(max-width:800px){.cartes-prof>.carte-prof:nth-child(n){grid-column:auto}.cartes-prof>.carte-prof-principale:nth-child(n){grid-column:span 2}.cartes-prof{grid-template-columns:repeat(2,minmax(0,1fr))}.carte-prof-principale{grid-row:auto;grid-column:span 2;min-height:170px}.journee-prof,.feuille-journee{padding:18px}.signature-plateforme{margin:18px}}
@media(max-width:480px){.cartes-prof>.carte-prof-principale:nth-child(n){grid-column:auto}.cartes-prof{grid-template-columns:1fr}.carte-prof-principale{grid-column:auto}.choix-journee{gap:6px}}

.icone-carte-prof{width:28px;height:28px;margin-bottom:14px;color:var(--accent)}
.carte-prof-principale .icone-carte-prof{color:#edf5e9}

/* Parcours des chapitres et travaux, version du 22 septembre 2026. */
.parcours-cours{--parcours-vert:#437b35;--parcours-trait:#dce6d8;--parcours-fond:#f7faf5}
.retour-page{margin:0 0 1rem;font-size:.9rem}
.parcours-entete-actions{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap}
.parcours-grille{display:grid;grid-template-columns:minmax(10rem,12rem) minmax(0,1fr) minmax(13rem,16rem);gap:1.15rem;align-items:start;margin-top:1.4rem}
.parcours-lecture{grid-template-columns:minmax(10rem,13rem) minmax(0,1fr)}
.parcours-sommaire,.parcours-creation{padding:1.15rem;position:sticky;top:1rem}
.parcours-sommaire strong{display:block;margin-bottom:.55rem}
.parcours-sommaire a{display:block;padding:.42rem .3rem;text-decoration:none;border-radius:.35rem;font-size:.9rem}
.parcours-sommaire a:hover{background:#edf4e9}
.parcours-liste{display:grid;gap:1rem;min-width:0}
.parcours-chapitre{padding:1.4rem;min-width:0;scroll-margin-top:1rem}
.parcours-chapitre h2{margin:.15rem 0 1rem}
.parcours-chapitre-entete{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}
.parcours-chapitre-entete .etat{white-space:nowrap}
.parcours-gestion{margin:.6rem 0 1.1rem}
.parcours-gestion>summary,.parcours-ajouts>details>summary,.parcours-fichier-actions summary,.parcours-travail details>summary{cursor:pointer;color:var(--parcours-vert);font-weight:700}
.parcours-gestion-contenu,.parcours-gestion-fichier{margin:.75rem 0;padding:1rem;background:var(--parcours-fond);border:1px solid var(--parcours-trait);border-radius:.65rem}
.parcours-gestion-contenu form,.parcours-gestion-fichier form{margin:.45rem 0 1rem}
.parcours-gestion-contenu label,.parcours-gestion-fichier label,.parcours-formulaire label,.parcours-ajouts label,.parcours-creation label,.parcours-travail label{display:block;margin:.65rem 0;font-weight:650}
.parcours-gestion-contenu label input,.parcours-gestion-fichier label input:not([type=checkbox]),.parcours-gestion-fichier select,.parcours-formulaire input:not([type=checkbox]),.parcours-formulaire textarea,.parcours-ajouts input[type=file],.parcours-creation input,.parcours-travail input[type=file]{display:block;width:100%;max-width:100%;margin-top:.3rem}
.parcours-formulaire textarea{min-height:7rem}
.parcours-gestion-contenu input[type=checkbox],.parcours-gestion-fichier input[type=checkbox],.parcours-formulaire input[type=checkbox]{width:auto}
.parcours-fichier{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding:.85rem 0;border-top:1px solid var(--parcours-trait)}
.parcours-fichier-texte{min-width:0;overflow-wrap:anywhere}
.parcours-fichier-texte strong,.parcours-fichier-texte small{display:block}
/* Le retrait d un support en deux clics (2026-09-27) : « Retirer ce support », puis la confirmation qui le nomme et dit
   que le retrait est definitif (enseignement/_retrait-support.html). La couleur d alerte le distingue des gestes anodins. */
.retrait-support>summary,.parcours-fichier-actions .retrait-support>summary{cursor:pointer;color:var(--alerte);font-weight:650;font-size:13px}
.retrait-support form{margin:.5rem 0 0;padding:.75rem;border:1px solid var(--alerte);border-radius:.5rem;background:var(--alerte-fond)}
.retrait-support form p{margin:0 0 .6rem}
.retrait-support button{background:var(--alerte);color:#fff}
.parcours-fichier-texte small{font-size:.8rem;color:#63746a}
.parcours-fichier-actions{display:flex;gap:.6rem;align-items:flex-start;flex-wrap:wrap;justify-content:flex-end;font-size:.9rem}
.parcours-fichier-actions details[open]{min-width:min(18rem,100%)}
.parcours-gestion-fichier{min-width:min(19rem,80vw)}
.parcours-gestion-fichier .discret{margin-top:.4rem}
.parcours-travail{margin:1rem 0;padding:1rem;border:1px solid #c6d9c1;border-radius:.75rem;background:#f5f9f2}
.parcours-travail h3{margin:.2rem 0 .65rem}
.parcours-travail p{overflow-wrap:anywhere}
.parcours-actions{display:flex;gap:.65rem;align-items:center;flex-wrap:wrap}
.parcours-actions form{display:flex;gap:.45rem;flex-wrap:wrap}
.parcours-ajouts{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--parcours-trait)}
.parcours-ajouts>details{flex:1 1 11rem}
.parcours-ajouts>details[open]{flex-basis:100%}
.parcours-ajouts form,.parcours-formulaire{margin-top:1rem}
.parcours-creation h2{font-size:1.15rem;margin:0}
.parcours-creation button{margin-top:.5rem}
.parcours-recu{margin:.8rem 0;padding:.75rem;background:#e8f3e5;border-radius:.5rem}
.parcours-recu a{display:block;margin-top:.3rem}
@media(max-width:1050px){.parcours-grille{grid-template-columns:minmax(9rem,12rem) minmax(0,1fr)}.parcours-creation{grid-column:2;position:static}}
@media(max-width:700px){.parcours-grille,.parcours-lecture{display:block}.parcours-sommaire,.parcours-creation{position:static;margin-bottom:1rem}.parcours-chapitre{margin-bottom:1rem}.parcours-fichier{display:block}.parcours-fichier-actions{justify-content:flex-start;margin-top:.4rem}}

/* Le parcours guide reste premier ; la recherche detaillee se deploie sur demande. */
.parcours-avances{margin-top:1.5rem;padding:1.1rem 1.4rem}
.parcours-avances>summary{cursor:pointer;color:var(--accent);font-weight:700}
.parcours-avances[open]>summary{margin-bottom:1rem}
.parcours-aide{padding:1.2rem;position:sticky;top:1rem}
.parcours-aide h2{font-size:1.05rem;margin:0 0 .55rem}
.parcours-aide p{margin:0;color:#5e7167}
.parcours-lecture{grid-template-columns:minmax(10rem,13rem) minmax(0,1fr) minmax(11rem,14rem)}
@media(max-width:1050px){.parcours-lecture{grid-template-columns:minmax(9rem,12rem) minmax(0,1fr)}.parcours-aide{grid-column:2;position:static}}
@media(max-width:700px){.parcours-lecture{display:block}.parcours-aide{margin-top:1rem}}

/* Une ligne courte par cours ; les titres de bloc portent le regroupement. */
.tableau-cours-defile{overflow-x:auto;border:1px solid var(--trait);border-radius:12px;background:var(--carte);box-shadow:var(--ombre)}
.tableau-cours{width:100%;border-collapse:collapse;table-layout:fixed}
.tableau-cours th,.tableau-cours td{padding:14px 18px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--trait)}
.tableau-cours tbody tr:last-child th,.tableau-cours tbody tr:last-child td{border-bottom:0}
.tableau-cours thead th{font-size:12px;color:var(--encre-douce);font-weight:700;background:var(--fond)}
.tableau-cours th:first-child{width:42%}.tableau-cours th:nth-child(2){width:27%}.tableau-cours th:nth-child(3){width:15%}
.tableau-cours tbody th{font-weight:700;overflow-wrap:anywhere}
.tableau-cours tbody tr:hover{background:var(--accent-clair)}
.tableau-cours tbody a{color:var(--accent-fonce)}
.tableau-cours-statut{display:block;margin-top:4px;font-size:12px;font-weight:400;color:var(--encre-douce)}
.tableau-cours-ouvrir{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:7px 12px;border:1px solid var(--trait);border-radius:8px;text-decoration:none;font-weight:700;white-space:nowrap}
.tableau-cours-etiquette{display:none}
@media(max-width:680px){.tableau-cours thead{display:none}.tableau-cours,.tableau-cours tbody{display:block}.tableau-cours tbody tr{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:12px 14px;border-bottom:1px solid var(--trait)}.tableau-cours tbody tr:last-child{border-bottom:0}.tableau-cours tbody th,.tableau-cours tbody td{display:block;width:auto;padding:0;border:0}.tableau-cours tbody th{grid-column:1/-1}.tableau-cours tbody td:last-child{grid-column:2;grid-row:2/4;align-self:center}.tableau-cours-etiquette{display:inline;margin-right:6px;color:var(--encre-douce);font-size:12px}.tableau-cours-ouvrir{min-height:44px}}

/* La meme grille que l enseignant donne aux eleves les memes reperes. */
.accueil-etudiant .journee-prof{margin-bottom:24px}
.accueil-etudiant .journee-actions>div{display:flex;gap:10px;flex-wrap:wrap}
.accueil-etudiant .carte-prof .alerte{margin-top:12px;font-size:13px;font-weight:700}

/* Accueil et navigation admin Campus11, palette relevee le 23 septembre 2026. */
/* Ses gris secondaires sont fonces juste assez pour se lire a 4,5:1 sur le fond de la page, le blanc et leur propre
   fond, teinte et saturation gardees : --encre-douce #657780 devient #5e6f77, et les gris ecrits en dur dans les
   regles de la coquille de meme (2026-09-26, reprise/construire_gris_coquille.py). */
.admin-campus{background:#f5f7f8;color:#20333d;--largeur-menu:224px;--carte:#fff;--trait:#e2e7e9;--encre:#20333d;--encre-douce:#5e6f77;--accent:#183b49;--accent-fonce:#183b49;--accent-clair:#edf3f4;color-scheme:light}
/* UN SEUL THEME DANS L INTERFACE (decision de Max du 2026-09-26). La palette Campus11 ci-dessus ne redefinissait que
   sept jetons : les cinq autres suivaient encore :root et son bloc sombre. Sur un systeme en theme sombre, la page
   restait claire mais les boutons (encre #152411 sur l accent #183b49 : 1,36:1), les champs (1,35:1) et les lignes
   de factures (jusqu a 1,03:1) devenaient illisibles. Comme .acces-fond pour l ecran d acces, l interface fige donc
   TOUS les jetons que le theme sombre change, a leur valeur claire, et les regles sombres ecrites en dur ne visent
   que body:not(.admin-campus). Les pages hors interface suivent toujours le theme du systeme.
   coeur/tests_theme_interface.py l exige, y compris pour un jeton sombre ajoute plus tard. */
.admin-campus{--fond:#f4f7f2;--alerte:#c0392b;--alerte-fond:#fbeaea;--encre-action:#ffffff;--ombre:0 8px 28px rgba(34,66,27,.06)}
.admin-campus .bandeau{background:#fff;color:#20333d;border-bottom:1px solid #e2e7e9;box-shadow:none;gap:20px;padding:16px 28px}
.admin-campus .bandeau .qui{color:#526872}
.admin-campus .bandeau button.discret{color:#526872;border-color:#dce5e8;background:#fff}
.admin-campus .bandeau button.discret:hover,.admin-campus .bandeau button.discret.actif{background:#eaf1f3;color:#183b49}
.admin-campus .bandeau .etat{background:#eaf1f3;color:#183b49}
.admin-campus .prise-de-role summary{color:#385767;border-color:#dce5e8;background:#f5f8f9}
.admin-campus .campus-identite{padding-left:20px;border-left:1px solid #dce5e8;font-weight:650;font-size:14px}
.admin-campus .campus-identite small{display:block;color:#65727a;font-size:12px;font-weight:400;margin-top:3px}
.admin-campus .campus-accueil{max-width:1200px;margin:0 auto;padding:32px}
.admin-campus .campus-bienvenue{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:28px;background:transparent;border:0;box-shadow:none;padding:0}
.admin-campus .campus-bienvenue h1{font-size:28px;line-height:1.2;letter-spacing:-.5px;color:#183b49;margin:0;font-weight:650}
.admin-campus .campus-bienvenue p:not(.campus-surtitre){margin:10px 0 0;color:#63727b;font-size:14px}
.admin-campus .campus-surtitre{font-size:11px;font-weight:650;letter-spacing:1.4px;text-transform:uppercase;margin:0 0 9px;color:inherit;opacity:.85}
.admin-campus .campus-ecole{font-size:13px;color:#64727a}
.admin-campus .campus-priorites{background:#fff;border:1px solid #dce5e8;border-radius:12px;margin:0 0 24px;padding:20px;box-shadow:0 2px 7px #183b490b}
.admin-campus .campus-priorites-entete{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}
.admin-campus .campus-priorites-entete h2{font-size:19px;margin:0;color:#183b49}
.admin-campus .campus-priorites-entete>span{font-size:12px;color:#60737c}
.admin-campus .campus-priorites-corps{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(200px,1fr);gap:24px}
.admin-campus .campus-priorites-liste{min-width:0}
.admin-campus .campus-priorite{display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 0;border-top:1px solid #e7edef;color:#20333d;text-decoration:none}
.admin-campus .campus-priorite:first-child{border-top:0}
.admin-campus .campus-priorite:hover .campus-priorite-lien{text-decoration:underline}
.admin-campus .campus-priorite-nombre{display:grid;place-items:center;min-width:36px;height:36px;border-radius:8px;background:#edf5ef;color:#225b42;font-size:15px;font-variant-numeric:tabular-nums}
.admin-campus .campus-priorite>span:nth-child(2){min-width:0}
.admin-campus .campus-priorite>span:nth-child(2)>strong{display:block;font-size:14px}
.admin-campus .campus-priorite small{display:block;color:#60737b;font-size:12px;margin-top:3px}
.admin-campus .campus-priorite-lien{margin-left:auto;color:#24583c;font-size:12px;font-weight:650;white-space:nowrap}
.admin-campus .campus-priorites-vide{color:#526872;margin:12px 0}
.admin-campus .campus-priorites-suivi{border-left:1px solid #e4ebed;padding-left:22px}
.admin-campus .campus-priorites-suivi h3{font-size:14px;margin:4px 0 10px;color:#20333d}
.admin-campus .campus-priorites-suivi a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;color:#3d5661;text-decoration:none;font-size:13px}
.admin-campus .campus-priorites-suivi a:hover{text-decoration:underline}
.admin-campus .campus-priorites-suivi a strong{font-variant-numeric:tabular-nums;color:#183b49}
@media(max-width:700px){.admin-campus .campus-priorites-corps{grid-template-columns:1fr;gap:10px}.admin-campus .campus-priorites-suivi{border-left:0;border-top:1px solid #e4ebed;padding:12px 0 0}.admin-campus .campus-priorites-entete>span{display:none}}
.admin-campus .campus-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.admin-campus .campus-tuile{display:flex;flex-direction:column;overflow:hidden;border-radius:10px;background:var(--campus-fond);color:var(--campus-encre,#fff);text-decoration:none;box-shadow:0 2px 5px #183b490b;min-width:0;transition:transform .15s,box-shadow .15s}
.admin-campus .campus-tuile:hover{transform:translateY(-2px);box-shadow:0 5px 12px #183b4926}
.admin-campus .campus-tuile-haut{display:block;padding:20px;min-height:106px;flex:1;background:var(--campus-bandeau)}
.admin-campus .campus-tuile-titre{display:block;font-size:20px;font-weight:500;line-height:1.2;overflow-wrap:anywhere}
/* LA PASTILLE DE LA TUILE MESSAGERIE (2026-09-27, demande de Max, reprise/construire_pastille_messagerie.py) : le
   compteur du menu, sur la tuile des trois accueils, dans le rouge d alerte et le blanc gras de la pastille du menu.
   Sa hauteur est celle de la ligne du titre (1,8462 fois ses 0,65 em, soit 1,2 em du titre) : elle est centree sur
   la premiere ligne a chaque largeur, et son bord droit est celui du contenu, au droit de la fleche du pied. Le
   titre garde la place a gauche et passe a la ligne sans jamais la chevaucher. Un filet blanc de 2 px, compris dans
   sa taille, la detache du bandeau colore sans sortir de la grille. Un chiffre seul tient dans un disque ; au-dela,
   la pastille s allonge. Le nombre est centre sur la hauteur de ses chiffres (text-box : de la ligne des capitales
   a la ligne de base), pas sur celle de la ligne de texte, que la police de Windows posait 0,5 a 0,9 px trop bas ;
   en chiffres proportionnels, il l est aussi en largeur (0,25 px d ecart au plus, 0,38 px pour un 1 seul, mesure
   a l encre en x4). Les mots « conversations non lues » se lisent sans se montrer. */
.admin-campus .campus-tuile-avec-pastille{display:flex;align-items:flex-start;justify-content:space-between;gap:.6em}
.admin-campus .campus-tuile-avec-pastille>span:first-child{min-width:0}
.admin-campus .campus-tuile-pastille{display:inline-flex;flex:none;align-items:center;justify-content:center;box-sizing:border-box;min-width:1.8462em;height:1.8462em;padding:0 .3846em;border:2px solid #fff;border-radius:999px;background:var(--alerte);color:#fff;font-size:.65em;font-weight:700;line-height:1;font-variant-numeric:proportional-nums}
.admin-campus .campus-tuile-nombre{display:block;text-box:trim-both cap alphabetic}
.admin-campus .campus-tuile-lecteur{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* Entre 601 et 800 px, le haut de la tuile a 16 px de marge et son pied en gardait 20 : le titre et « Ouvrir », la
   pastille et la fleche ne tombaient pas sur le meme bord. Le pied suit le haut ; au-dessus et au-dessous, rien ne
   change (20 et 14 px des deux cotes). Le selecteur est plus precis que celui du pied, pose plus loin dans la
   feuille, qui l emporterait sinon a precision egale. */
@media(min-width:601px) and (max-width:800px){.admin-campus .campus-tuile .campus-tuile-bas{padding:13px 16px}}
.admin-campus .campus-tuile-description{display:block;font-size:13px;line-height:1.4;margin-top:9px}
.admin-campus .campus-tuile-bas{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 20px;font-size:12px;min-height:46px}
.admin-campus .campus-navigation{display:block}
.admin-campus .campus-retour{display:flex;align-items:center;gap:12px;padding:11px 12px;margin-bottom:16px;background:#edf3f4;border-radius:7px;color:#234651;text-decoration:none;font-weight:650;font-size:14px}
.admin-campus .campus-liens{display:grid;gap:3px;border-top:1px solid #e9edef;padding-top:15px}
.admin-campus .campus-lien{display:flex;align-items:center;gap:11px;text-decoration:none;color:#465d68;padding:9px 12px;border-radius:6px;font-size:13px}
.admin-campus .campus-lien:hover,.admin-campus .campus-lien[aria-current=page]{background:#edf3f4;color:#183b49}
.admin-campus .campus-lien[aria-current=page]{font-weight:700}
.admin-campus .campus-point{width:10px;height:10px;border-radius:3px;flex-shrink:0;background:var(--campus-bandeau)}
.admin-campus .navigation-laterale{background:#fff;border-color:#e2e7e9;gap:14px}
.admin-campus .campus-attente{padding:0;background:#fff;border:1px solid #e2e7e9;border-radius:12px;overflow:hidden;box-shadow:none}
.admin-campus .campus-attente-titre{padding:28px;background:var(--campus-bandeau);color:var(--campus-encre,#fff);border-bottom:12px solid var(--campus-fond)}
.admin-campus .campus-attente-titre h1{font-size:28px;margin:0;color:inherit}
.admin-campus .campus-attente-titre p:last-child{margin-bottom:0}
.admin-campus .campus-attente-corps{padding:28px;color:#526872}
.admin-campus .campus-attente-corps h2{margin:0 0 12px;color:#20333d;font-size:20px}
.admin-campus .campus-bouton{display:inline-flex;margin-top:18px;border-radius:8px;background:#183b49;padding:12px 18px;color:#fff;text-decoration:none}
.admin-campus .campus-signature{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;max-width:1200px;margin:0 auto;padding:0 32px 26px;color:#64727a;font-size:12px}
/* TEINTES AJUSTEES POUR 4,5:1 (lot 4 de la suite de l audit, 01/10/2026, reprise/publier_teintes_tuiles.py) :
   Messagerie, Qui est qui et Reglements foncent (texte blanc) ; les pieds d Horaire, du Catalogue et du Journal
   s eclaircissent (texte fonce). Seule la luminosite bouge ; coeur/tests_teintes_tuiles.py garde la regle. */
.admin-campus .campus-messagerie,[data-menu="messagerie"]{--campus-fond:#3f5668;--campus-bandeau:#667987}
.admin-campus .campus-actions,[data-menu="qui-est-qui"]{--campus-fond:#bb1822;--campus-bandeau:#d73d47}
.admin-campus .campus-etudiants,[data-menu="etudiants"]{--campus-fond:#46cdb5;--campus-bandeau:#6ed8c5;--campus-encre:#17313c}
.admin-campus .campus-enseignants,.admin-campus .campus-documents-etudiant,[data-menu="enseignants"]{--campus-fond:#c2a800;--campus-bandeau:#f5d400;--campus-encre:#17313c}
.admin-campus .campus-candidats,[data-menu="inscriptions-admin"],[data-menu="mes-inscriptions"]{--campus-fond:#91c700;--campus-bandeau:#bade00;--campus-encre:#17313c}
.admin-campus .campus-formation,[data-menu="offre-educative"],[data-menu="etudiant-cours"]{--campus-fond:#42a6c3;--campus-bandeau:#68b8cf;--campus-encre:#17313c}
.admin-campus .campus-evaluations,.admin-campus .campus-resultats-etudiant,[data-menu="evaluations-admin"]{--campus-fond:#0d1e28;--campus-bandeau:#1a3b4e}
.admin-campus .campus-facturation,[data-menu="facturation"],[data-menu="facturation-tableau"],[data-menu="mes-factures"]{--campus-fond:#63475e;--campus-bandeau:#815c7a}
.admin-campus .campus-annuaire,[data-menu="etudiant-valves"],[data-menu="valves-admin"]{--campus-fond:#57b857;--campus-bandeau:#7bc77b;--campus-encre:#17313c}
.admin-campus .campus-bibliotheque,[data-menu="reglements-admin"]{--campus-fond:#9b4344;--campus-bandeau:#b55c5c}
.admin-campus .campus-enquetes,[data-menu="examens-admin"],[data-menu="etudiant-examens"]{--campus-fond:#3ea2b0;--campus-bandeau:#5cb8c5;--campus-encre:#17313c}
.admin-campus .campus-configuration,[data-menu="configuration"],[data-menu="accueil-admin"],[data-menu="accueil-enseignant"],[data-menu="accueil-etudiant"],[data-menu="parcours"],[data-menu="pilotage"]{--campus-fond:#bababa;--campus-bandeau:#d3d3d3;--campus-encre:#17313c}
.admin-campus .campus-listes,[data-menu="catalogue-admin"]{--campus-fond:#79a220;--campus-bandeau:#91c700;--campus-encre:#17313c}
.admin-campus .campus-groupes,[data-menu="candidatures-admin"]{--campus-fond:#ff8da1;--campus-bandeau:#ffc0cb;--campus-encre:#17313c}
.admin-campus .campus-horaire,[data-menu="horaire"],[data-menu="etudiant-horaire"]{--campus-fond:#e8742b;--campus-bandeau:#e88541;--campus-encre:#17313c}
.admin-campus .campus-cours-enseignant,.admin-campus .campus-cours-etudiant,[data-menu="regularisations-admin"],[data-menu="enquetes-admin"]{--campus-fond:#9e3265;--campus-bandeau:#c0457e;--campus-encre:#fff}
.admin-campus .campus-annuaire-enseignant,[data-menu="questionnaire"]{--campus-fond:#2b5ca3;--campus-bandeau:#3d74c4;--campus-encre:#fff}
@media(max-width:800px){.admin-campus .menu-mobile .campus-navigation{padding:0 16px 16px}.admin-campus .menu-mobile .campus-liens{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-campus .campus-accueil{padding:24px 18px}.admin-campus .campus-grille{gap:12px}.admin-campus .campus-tuile-haut{padding:16px;min-height:110px}.admin-campus .campus-tuile-titre{font-size:18px}.admin-campus .campus-signature{padding-inline:18px}}
@media(max-width:600px){.admin-campus .campus-grille{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-campus .campus-tuile-haut{padding:14px;min-height:130px}.admin-campus .campus-tuile-titre{font-size:17px}.admin-campus .campus-tuile-description{font-size:12px}.admin-campus .campus-tuile-bas{padding:12px 14px}.admin-campus .campus-ecole{display:none}.admin-campus .campus-bienvenue h1{font-size:24px}.admin-campus .bandeau{padding:14px 18px;gap:14px}.admin-campus .campus-attente-titre,.admin-campus .campus-attente-corps{padding:20px}.admin-campus .campus-lien{min-height:44px;padding:9px 8px}}
@media(prefers-reduced-motion:reduce){.admin-campus .campus-tuile{transition:none}}
@media print{.admin-campus .campus-navigation{display:none}}

/* Messagerie et redaction privee, 2026-09-23. */
.messagerie-ouverte .messagerie{display:grid;grid-template-columns:260px minmax(0,1fr);grid-template-areas:"rail rail" "liste fil";border:1px solid #dce3e7;border-radius:10px;background:#fff;overflow:hidden;max-width:none;margin:0}
.messagerie-ouverte .messagerie>.rail{grid-area:rail;display:flex;flex-wrap:wrap;align-items:center;gap:12px;border-bottom:1px solid #dce3e7;padding:14px;background:#f7f9fa}
.messagerie-ouverte .messagerie>.colonne-liste{grid-area:liste;min-width:0;border-right:1px solid #dce3e7;max-height:none;overflow:visible}
.messagerie-ouverte .messagerie>.colonne-fil{grid-area:fil;min-width:0;padding:22px;max-height:none;overflow:visible}
.messagerie-ouverte .colonne-liste .chercher{padding:12px;display:flex;flex-wrap:wrap;gap:7px}.messagerie-ouverte .colonne-liste .chercher input{min-width:0;width:100%}
.messagerie-ouverte .boite{list-style:none;padding:0}.messagerie-ouverte .boite li{padding:0}.messagerie-ouverte .boite li a{display:block;padding:15px;border-top:1px solid #e4ebef;text-decoration:none;color:#304751}.messagerie-ouverte .boite .apercu{display:block;font-size:12px;color:#62727c;margin-top:7px;overflow-wrap:anywhere}.messagerie-ouverte .boite .quand{font-size:11px;color:#64727b}.messagerie-ouverte .boite .qui{display:block;font-weight:600}.messagerie-ouverte .boite .ouverte{background:#edf3f6;border-left:3px solid #41596b}
.messagerie-ouverte .rail .bouton,.messagerie-ouverte .redaction button[type=submit]{background:#41596b;color:#fff;border-color:#41596b}.messagerie-ouverte .rail a{font-size:13px}.messagerie-ouverte .rail a.courant{color:#263d49;font-weight:700}.messagerie-ouverte .redaction{max-width:none;width:100%;gap:10px}.messagerie-ouverte .redaction label{font-size:12px}.messagerie-ouverte .redaction-adresse{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:12px 0}.messagerie-ouverte .destinataire-choisi{padding:5px 9px;background:#edf3f6;border-radius:5px;font-size:12px}.messagerie-ouverte .redaction-individuelle{display:flex;gap:8px;align-items:center;background:#f0f6f3;padding:10px}.messagerie-ouverte .redaction-individuelle input{width:auto}
.messagerie-ouverte .redaction-outils{background:#f7f9fa;border:1px solid #dce3e7;border-radius:7px 7px 0 0;padding:8px}.messagerie-ouverte .redaction-rang{display:flex;gap:5px;flex-wrap:wrap;align-items:center}.messagerie-ouverte .redaction-rang+.redaction-rang{border-top:1px solid #e0e7eb;margin-top:8px;padding-top:8px}.messagerie-ouverte .redaction-rang button,.messagerie-ouverte .redaction-rang select{font:12px Arial,sans-serif;min-height:32px;width:auto;padding:5px 8px;background:white;color:#41596b;border:1px solid #dce3e7;border-radius:4px}.messagerie-ouverte .redaction-texte{min-height:270px;background:white;color:#263d49;border:1px solid #dce3e7;padding:20px;border-radius:0 0 7px 7px;outline-offset:2px}.messagerie-ouverte [hidden]{display:none!important}
.texte-riche{font:14px/1.75 Arial,sans-serif;overflow-wrap:anywhere;white-space:pre-wrap}.texte-riche p,.texte-riche div{margin:0 0 12px}.texte-riche ul,.texte-riche ol{padding-left:25px}.texte-riche strong,.texte-riche b{font-weight:700}.texte-riche h2{font-size:22px}.texte-riche h3{font-size:18px}.texte-riche blockquote{margin:14px 0;padding:12px;border-left:3px solid #bacbd5;background:#f5f8fa}.texte-riche a{color:#235e90;text-decoration:underline}
.texte-riche .rt-left{text-align:left}.texte-riche .rt-center{text-align:center}.texte-riche .rt-right{text-align:right}.texte-riche .rt-justify{text-align:justify}.texte-riche .rt-small{font-size:12px}.texte-riche .rt-normal{font-size:14px}.texte-riche .rt-large{font-size:18px}.texte-riche .rt-xl{font-size:24px}.texte-riche .rt-arial{font-family:Arial,sans-serif}.texte-riche .rt-georgia{font-family:Georgia,serif}.texte-riche .rt-verdana{font-family:Verdana,sans-serif}.texte-riche .rt-blue{color:#41596b}.texte-riche .rt-red{color:#a82828}.texte-riche .rt-green{color:#277045}.texte-riche .rt-purple{color:#74458a}.texte-riche .rt-gray{color:#697c8a}.texte-riche .rt-yellow-bg{background:#fff1b8}.texte-riche .rt-blue-bg{background:#dcecf8}.texte-riche .rt-green-bg{background:#def1df}.texte-riche .rt-bold{font-weight:700}.texte-riche .rt-italic{font-style:italic}.texte-riche .rt-underline{text-decoration:underline}.texte-riche .rt-strike{text-decoration:line-through}
.redaction-actions{display:flex;flex-wrap:wrap;gap:10px}.redaction-lien{display:flex;gap:10px;align-items:end;flex-wrap:wrap;background:#edf3f6;padding:12px}.redaction-lien label{flex:1;min-width:130px}.redaction-apercu{padding:18px;background:#f4f7f9}.redaction-apercu .texte-riche{background:white;padding:18px;margin-top:12px;border:1px solid #dde6eb}.redaction-agrandie .colonne-liste{display:none!important}.messagerie-ouverte .messagerie.redaction-agrandie{grid-template-columns:minmax(0,1fr);grid-template-areas:"rail" "fil"}.messagerie-ouverte .fil-messages{max-height:none;overflow:visible}.messagerie-ouverte .message{overflow-wrap:anywhere}.messagerie-ouverte .gestes-message{display:flex;gap:12px}.messagerie-ouverte .brouillons{padding:15px;font-size:12px}.messagerie-ouverte .brouillons a{display:block;padding:8px 0}.messagerie-ouverte .entete-messagerie{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.messagerie-ouverte .entete-messagerie h1{font-size:25px;margin:0}.messagerie-ouverte .fil-vide{padding:25px}.messagerie-ouverte .entete-fil h1{font-size:21px}
.messagerie-ouverte .messagerie>.rail a.courant{background:#41596b;color:#fff}.messagerie-ouverte .messagerie>.rail a.courant .compteur{color:#fff}
@media(max-width:1100px){.messagerie-ouverte .messagerie{grid-template-columns:220px minmax(0,1fr)}.messagerie-ouverte .messagerie>.colonne-fil{padding:16px}}
@media(max-width:750px){.messagerie-ouverte .messagerie{display:block}.messagerie-ouverte .messagerie.avec-fil>.colonne-liste,.messagerie-ouverte .messagerie.avec-fil>.rail{display:none}.messagerie-ouverte .messagerie>.colonne-fil{padding:13px}.messagerie-ouverte .redaction-rang button,.messagerie-ouverte .redaction-rang select{min-height:40px}.messagerie-ouverte .redaction-texte{font-size:16px}.redaction input{font-size:16px}}

/* Messagerie : disposition de la proposition 2, dimensions explicites. */
/* La messagerie utilise toute la largeur disponible a cote du menu lateral. */
.messagerie-ouverte .messagerie-page{width:100%;padding:28px 32px 32px;max-width:none;margin:0}
.messagerie-ouverte .entete-messagerie{gap:20px;margin:0 0 24px;align-items:center}
.messagerie-ouverte .entete-messagerie h1{color:#41596b;font-size:30px;font-weight:650;letter-spacing:-.5px;line-height:1.2}
.messagerie-ouverte .messagerie-surtitre{font-size:11px;font-weight:650;letter-spacing:1.4px;text-transform:uppercase;color:#5f707d;margin:0 0 7px}
.messagerie-ouverte .messagerie-intro{margin:8px 0 0;font-size:14px;color:#63727c}
.messagerie-ouverte .nouveau-message{display:inline-flex;gap:9px;align-items:center;justify-content:center;white-space:nowrap;text-decoration:none;border:1px solid #41596b;border-radius:8px;padding:12px 17px;background:#41596b;color:#fff;font-size:13px;font-weight:600}
.messagerie-ouverte .nouveau-message:hover{background:#304857}
.messagerie-ouverte .messagerie{height:auto;min-height:560px;grid-template-columns:290px minmax(0,1fr);grid-template-rows:auto minmax(480px,1fr);align-content:start;box-shadow:0 3px 12px #183b4906;border-radius:12px}
.messagerie-ouverte .messagerie>.rail{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:center;align-content:center;gap:6px;min-height:66px;max-height:none;height:auto;padding:12px 18px;border-right:0;background:#fff;overflow:visible}
.messagerie-ouverte .messagerie>.rail>a{display:inline-flex;flex:0 0 auto;gap:9px;min-height:40px;padding:9px 14px;border-radius:6px;font-size:13px;color:#60737d;font-weight:500;background:transparent}
.messagerie-ouverte .messagerie>.rail>a.courant{background:#edf3f7;color:#41596b;font-weight:700;box-shadow:inset 0 -2px #41596b}
.messagerie-ouverte .messagerie>.rail>a .compteur,.messagerie-ouverte .messagerie>.rail>a.courant .compteur{display:inline-flex;justify-content:center;align-items:center;min-width:21px;min-height:20px;padding:0 5px;border-radius:4px;color:#5f707d;background:#f0f4f6;font-size:11px;opacity:1}
.messagerie-ouverte .messagerie>.colonne-liste{display:block;background:#fbfcfd;align-self:stretch;overflow:visible}
.messagerie-ouverte .colonne-liste .chercher{position:static;display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:16px;background:transparent}
.messagerie-ouverte .colonne-liste .chercher input[type=search]{flex:auto;width:100%;min-width:0;border-radius:7px;padding:10px 11px;font-size:13px;background:#fff}
.messagerie-ouverte .colonne-liste .chercher button{align-self:flex-end;font-size:12px;padding:6px 11px;min-height:32px;background:#fff;color:#41596b;border:1px solid #dce3e7;border-radius:6px}
.messagerie-ouverte .boite{margin:0;display:block}
.messagerie-ouverte .boite li{border:0;border-radius:0;margin:0;background:transparent;box-shadow:none}
.messagerie-ouverte .boite li a{padding:19px 18px;border-top:0;border-bottom:1px solid #e6ecef;border-radius:0}
.messagerie-ouverte .boite li a:hover{background:#f1f5f8}
.messagerie-ouverte .boite .qui{font-size:14px;line-height:1.4;overflow-wrap:anywhere}
.messagerie-ouverte .boite .quand{margin-top:5px}
.messagerie-ouverte .boite .apercu{font-size:12px;line-height:1.6;margin-top:9px;white-space:normal}
.messagerie-ouverte .boite .ouverte{background:#edf3f7;border-left:3px solid #41596b}
.messagerie-ouverte .colonne-liste .vide{padding:32px 22px;margin:0;font-size:13px;line-height:1.7;color:#61727d;text-align:center}
.messagerie-ouverte .messagerie>.colonne-fil{display:block;padding:28px;overflow:visible}
.messagerie-ouverte .fil-vide{height:auto;min-height:400px;display:flex;flex-direction:column;gap:13px;padding:32px 20px;max-width:460px;margin:0 auto}
.messagerie-ouverte .fil-vide h2{margin:0;font-size:22px;font-weight:600;color:#41596b}
.messagerie-ouverte .fil-vide p{margin:0;font-size:14px;line-height:1.7;color:#63727c}
.messagerie-ouverte .vide-enveloppe{display:grid;place-items:center;width:68px;height:68px;border-radius:18px;background:#eef3f7;color:#697c8a;font-size:31px;margin-bottom:6px}
.messagerie-ouverte .retour-conversations{display:inline-flex;gap:8px;margin-bottom:22px;text-decoration:none;color:#61727c;font-size:12px}
.messagerie-ouverte .titre-redaction{font-size:23px;font-weight:600;margin:0 0 22px;color:#41596b}
.messagerie-ouverte .choix-destinataire{padding:20px;border:1px solid #e1e8ec;border-radius:8px;background:#fbfcfd;max-width:680px}
.messagerie-ouverte .choix-destinataire label{display:block;margin-bottom:10px;color:#41596b;font-size:13px;font-weight:600}
.messagerie-ouverte .choix-destinataire input{width:100%;padding:12px;border:1px solid #dce3e7;border-radius:7px;background:#fff}
.messagerie-ouverte #resultats-destinataires ul{list-style:none;margin:12px 0 0;padding:0}
.messagerie-ouverte #resultats-destinataires li{border-bottom:1px solid #e3eaef;padding:10px 0}
.messagerie-ouverte #resultats-destinataires a{color:#41596b;text-decoration:none;font-size:14px}
.messagerie-ouverte .lecture-messagerie{padding:20px;background:#f1f5f8;border:1px solid #dce3e7;border-radius:8px;font-size:14px;line-height:1.7;color:#526c7b}
.messagerie-ouverte .redaction{margin:0;gap:14px}
.messagerie-ouverte .redaction-outils{margin-top:6px;padding:10px}
.messagerie-ouverte .redaction-texte{min-height:280px;padding:22px}
.messagerie-ouverte .redaction-individuelle{border-radius:7px;line-height:1.6;margin:0}
.messagerie-ouverte .redaction-actions{padding-top:8px;gap:10px}
.messagerie-ouverte .redaction-actions button{border-radius:7px;padding:10px 15px}
.messagerie-ouverte .entete-fil{position:static;padding:0 0 18px;margin-bottom:22px}
.messagerie-ouverte .fil-messages{gap:16px;margin:20px 0 30px}
.messagerie-ouverte .message{max-width:90%;padding:16px 18px;border-radius:10px;font-size:14px}
.messagerie-ouverte .message .entete-message{font-size:12px;color:#60727f;margin-bottom:8px;flex-wrap:wrap}
.messagerie-ouverte .message .corps{line-height:1.75}
.messagerie-ouverte .campus-signature{max-width:none;padding-inline:32px}
@media(min-width:1051px){.messagerie-ouverte .messagerie.avec-fil>.rail{display:flex}.messagerie-ouverte .messagerie.avec-fil>.colonne-liste,.messagerie-ouverte .messagerie:not(.avec-fil)>.colonne-fil{display:block}}
@media(max-width:1100px) and (min-width:1051px){.messagerie-ouverte .messagerie-page{padding:24px}.messagerie-ouverte .messagerie{grid-template-columns:240px minmax(0,1fr)}.messagerie-ouverte .messagerie>.colonne-fil{padding:22px}.messagerie-ouverte .entete-messagerie{flex-wrap:wrap}}
@media(max-width:1050px){.messagerie-ouverte .messagerie-page{padding:22px 14px}.messagerie-ouverte .entete-messagerie{flex-wrap:wrap;gap:16px;margin-bottom:20px}.messagerie-ouverte .entete-messagerie h1{font-size:27px}.messagerie-ouverte .messagerie-intro{font-size:13px}.messagerie-ouverte .messagerie{display:block;min-height:0;height:auto}.messagerie-ouverte .messagerie>.rail{padding:9px;gap:2px;min-height:60px}.messagerie-ouverte .messagerie>.rail>a{font-size:12px;padding:9px}.messagerie-ouverte .messagerie>.colonne-fil{padding:20px 15px}.messagerie-ouverte .messagerie.avec-fil>.rail,.messagerie-ouverte .messagerie.avec-fil>.colonne-liste,.messagerie-ouverte .messagerie:not(.avec-fil)>.colonne-fil{display:none}.messagerie-ouverte .message{max-width:100%}.messagerie-ouverte .titre-redaction{font-size:22px}.messagerie-ouverte .redaction-texte{padding:15px}.messagerie-ouverte .choix-destinataire{padding:16px}.messagerie-ouverte .retour-conversations{margin-bottom:18px}.messagerie-ouverte .campus-signature{padding-inline:14px}}

.pr-page{max-width:1480px;margin:auto;padding:28px 32px 48px;color:#243e47;font-size:14px;line-height:1.55}.pr-page *{box-sizing:border-box}.pr-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}.pr-heading h1{font-size:30px;line-height:1.2;margin:4px 0 8px;letter-spacing:-.7px}.pr-heading p{margin:0;color:#5e737a}.pr-eyebrow{font-size:11px!important;text-transform:uppercase;letter-spacing:1.6px;font-weight:700}.pr-page h2{font-size:19px;margin:0 0 10px}.pr-page h3{font-size:16px;margin:0 0 16px}.pr-page h4{font-size:15px;margin:0}.pr-button,.pr-page button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border:1px solid #244c58;border-radius:7px;background:#244c58;color:white;font:inherit;font-weight:600;text-decoration:none;cursor:pointer;min-height:40px;white-space:normal}.pr-button.secondaire{background:white;color:#244c58;border-color:#d2dfe1}.pr-page a{color:#285a69}.pr-page a.pr-button{color:white}.pr-page a.pr-button.secondaire{color:#285a69}.pr-page button:hover,.pr-button:hover{filter:brightness(.94)}.pr-page :focus-visible{outline:3px solid #c69536;outline-offset:3px}.pr-modules{display:flex;gap:6px;border-bottom:1px solid #dbe4e5;margin-bottom:22px}.pr-modules a{padding:13px 24px;text-decoration:none;font-weight:600;border-bottom:3px solid transparent}.pr-modules a[aria-current]{border-color:#285a69;background:#edf3f3;border-radius:7px 7px 0 0}.pr-scope{display:flex;gap:16px;align-items:center;justify-content:space-between;margin:0 0 22px}.pr-scope form{display:flex;align-items:center;gap:10px;flex:1}.pr-scope label{white-space:nowrap}.pr-scope select{max-width:530px}.pr-page input:not([type=checkbox]),.pr-page select,.pr-page textarea{width:100%;min-width:0;background:#fff;border:1px solid #ccdadd;border-radius:6px;padding:10px 11px;color:#243e47;font:inherit}.pr-page textarea{resize:vertical}.pr-page label{display:block;font-size:13px;font-weight:600}.pr-page label>input,.pr-page label>select,.pr-page label>textarea{margin-top:6px}.pr-page form{margin:0}.pr-page form>label{margin-bottom:14px}.pr-page label.pr-check{display:flex;gap:10px;align-items:flex-start;font-weight:400}.pr-check input{flex:none;margin-top:4px}.pr-notice{border:1px solid #eadbb8;background:#fbf7ed;border-radius:8px;padding:13px 16px;margin:18px 0;color:#735b2a}.pr-columns{display:grid;grid-template-columns:250px minmax(0,1fr);border:1px solid #dce5e6;border-radius:12px;overflow:hidden;background:white;box-shadow:0 5px 22px #233e4705;align-items:start}.pr-columns.pr-personnel{display:block;max-width:1040px;margin:auto}.pr-list{background:#f8fafb;min-width:0;align-self:stretch;border-right:1px solid #dce5e6}.pr-list>header{padding:21px 18px;border-bottom:1px solid #dce5e6}.pr-list h2{font-size:14px}.pr-search{display:flex;gap:5px}.pr-search button{padding:8px;font-size:12px}.pr-search input{font-size:12px!important}.pr-person{display:block;padding:17px 20px;border-bottom:1px solid #e5ecee;text-decoration:none;border-left:3px solid transparent;overflow-wrap:anywhere}.pr-person strong{display:block;font-size:13px}.pr-person small{color:#627379;font-size:11px}.pr-person[aria-current]{background:#eaf2f3;border-left-color:#285a69}/* La carte de l etudiant choisi : sur son fond #eaf2f3, la nuance de #71848b juste assez lisible (4,60:1), teinte gardee (2026-09-27, reprise/pratiques_feuille_unique.py). */.pr-person[aria-current] small{color:#5f6f75}.pr-reader{min-width:0}.pr-detail-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:27px 28px 17px}.pr-detail-head p{font-size:12px;color:#647276;margin:0}.pr-tag{display:inline-block;background:#eef3f4;color:#526b74;font-size:11px;font-weight:600;border-radius:5px;padding:5px 9px;white-space:nowrap}.pr-facts{display:flex;gap:40px;padding:0 28px 22px}.pr-facts small,.pr-facts strong{display:block}.pr-facts small{font-size:11px;color:#60737a}.pr-facts strong{font-size:13px}.pr-local-nav{display:flex;gap:22px;padding:0 28px;border-bottom:1px solid #e1e9ea;overflow:auto}.pr-local-nav a{padding:12px 0;text-decoration:none;font-size:12px;font-weight:600;white-space:nowrap}.pr-section{padding:25px 28px;border-bottom:1px solid #e6eded;scroll-margin-top:24px}.pr-consignes{line-height:1.75;overflow-wrap:anywhere}.pr-file{display:flex;align-items:center;justify-content:space-between;gap:15px;border:1px solid #e1e8e9;background:#fafcfc;padding:13px 16px;border-radius:7px;margin:10px 0;overflow-wrap:anywhere}.pr-file small,.pr-receipt small{display:block;color:#647277;font-size:11px;margin-top:4px}.pr-file a{font-weight:600;text-decoration:none}.pr-empty{color:#627378;padding:16px 0;font-size:13px}.pr-list .pr-empty{padding:20px}.pr-note{color:#627379;font-size:12px;line-height:1.6}.pr-task{border:1px solid #dbe5e7;border-radius:8px;padding:18px;margin:12px 0 20px}.pr-task>header,.pr-feedback>header{display:flex;align-items:center;justify-content:space-between;gap:12px}.pr-task form{padding-top:15px}.pr-receipt{border-left:3px solid #598372;background:#f0f6f3;padding:12px 15px;margin:15px 0}.pr-receipt>a{display:block;margin-top:6px;overflow-wrap:anywhere}.pr-feedback{border-left:2px solid #cedddd;padding:0 0 0 18px;margin:20px 0}.pr-feedback small{color:#637278;font-size:11px}.pr-edit{margin-top:18px;border:1px solid #dbe5e7;border-radius:8px;padding:15px}.pr-edit summary{cursor:pointer;font-weight:600}.pr-edit form{margin-top:18px}.pr-config-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}.pr-form-panel{padding:25px;border:1px solid #dbe5e7;background:white;border-radius:10px;min-width:0}.pr-form-panel h2{margin-bottom:22px}.pr-form-panel hr{border:0;border-top:1px solid #e4ebec;margin:25px 0}.pr-form-panel .pr-file{align-items:start;flex-wrap:wrap}.pr-form-panel .pr-file form{width:100%}.pr-zero{padding:60px 28px;text-align:center;background:white;border:1px solid #dbe5e7;border-radius:12px}.pr-zero p{max-width:580px;margin:12px auto 24px;color:#627279}.pr-slot{display:flex;gap:18px;border:1px solid #dce6e8;border-radius:9px;padding:17px;margin:12px 0}.pr-slot-date{background:#edf4f4;border-radius:7px;padding:12px;text-align:center;min-width:100px}.pr-slot-body{flex:1;min-width:0}.pr-slot h4{margin:0}.pr-slot p{margin:5px 0}.pr-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.pr-slot-date strong,.pr-slot-date small{display:block}.pr-slot-date strong{font-size:25px}.pr-page fieldset{border:1px solid #dbe5e7;border-radius:7px;margin:15px 0;padding:15px;max-height:260px;overflow:auto}.pr-inline{display:flex;gap:12px}.pr-inline>*{flex:1;min-width:0}.pr-participants{max-height:230px;overflow:auto;padding:12px;border:1px solid #dbe5e7;border-radius:6px;margin:14px 0}.pr-participants .pr-check{margin:8px 0}.pr-form-panel:only-child{max-width:700px;margin:0 auto}.pr-page input[type=file]{font-size:12px;overflow:hidden}.pr-page .erreur{border-radius:8px;padding:15px}
/* Preparer un espace annuel (2026-09-26, reprise/ameliorer_creation_pratiques.py) : trois etapes dans une carte, une grille de deux tiers et un tiers a partir d un meme bord gauche (28 + 38 px, sous le titre de l etape), des commandes de 44 px sans la marge haute que la feuille donne a tout bouton, et l action en pied de carte sur ce meme bord. Les libelles n ont plus de marge basse : elle decalait le menu du site de 14 px sous son bouton. */.pr-page-creation .pr-heading,.pr-page-creation .erreur,.pr-creation-liens{max-width:800px}.pr-page-creation .erreur{margin:0 0 16px}.pr-creation-liens{margin:0 0 16px;font-size:13px}.pr-page .pr-creation{max-width:800px;padding:0}.pr-creation .pr-etape{padding:24px 28px;border-top:1px solid #e4ebec}.pr-creation>.pr-etape:first-child{border-top:0}.pr-page .pr-creation h2{display:flex;align-items:center;gap:12px;margin:0 0 16px;font-size:17px;line-height:26px}.pr-etape-numero{display:inline-flex;flex:none;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:#edf3f3;color:#244c58;font-size:13px;font-weight:700;line-height:1}.pr-creation .pr-etape>:not(h2){margin-left:38px}.pr-page .pr-creation label{margin:0}.pr-page .pr-creation select{height:44px;padding:0 12px;margin-top:6px}.pr-champs{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px;align-items:end}.pr-page .pr-creation .pr-aide{margin-top:8px;margin-bottom:0;color:#627379;font-size:12px;line-height:1.5}.pr-creation .pr-etape>.pr-notice{margin-top:12px;margin-bottom:0}.pr-site-fixe{display:flex;flex-direction:column;gap:6px;margin:0}.pr-site-fixe span{font-size:13px;font-weight:600}.pr-site-fixe strong{font-size:15px;line-height:1.4}.pr-page .pr-creation button{height:44px;min-height:44px;margin:0;padding:0 20px}.pr-creation-pied{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:20px 28px 20px 66px;border-top:1px solid #e4ebec;background:#f8fafb;border-radius:0 0 10px 10px}.pr-creation-pied button{flex:none}.pr-page .pr-creation-pied .pr-aide{margin:0;flex:1;min-width:220px}@media(max-width:700px){.pr-creation .pr-etape{padding:20px 16px}.pr-creation .pr-etape>:not(h2){margin-left:0}.pr-champs{grid-template-columns:minmax(0,1fr)}.pr-creation-pied{padding:16px}.pr-creation-pied button{width:100%}}
/* Le lien vers les droits des enseignants, a cote du menu du responsable (2026-09-26, reprise/lier_droits_creation_pratiques.py) : une boite de la hauteur du menu, centree sur lui, et une cible de 44 px au doigt quand elle passe dessous. */.pr-lien-champ{display:flex;align-items:center;gap:6px;min-height:44px;font-size:13px;font-weight:600;line-height:1.35}
.pr-heading-actions{display:flex;gap:10px;flex-wrap:wrap}.pr-guide{max-width:1100px}.pr-guide-step{border:1px solid #dbe5e7;border-radius:10px;background:#fff;margin:12px 0;overflow:hidden}.pr-guide-step summary{display:flex;align-items:center;gap:13px;padding:18px 20px;font-weight:700;cursor:pointer}.pr-guide-step[open] summary{border-bottom:1px solid #e2eaec;background:#f7faf9}.pr-guide-number{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:#dcece4;color:#225b42}.pr-guide-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,380px);gap:15px 28px;padding:22px}.pr-guide-content>p{margin:0;line-height:1.7}.pr-guide-content>.pr-button{justify-self:start;align-self:end}.pr-guide-figure{grid-column:2;grid-row:1 / span 3;margin:0}.pr-guide-screen{display:grid;gap:9px;padding:17px;border:1px solid #d5e1e1;border-radius:9px;background:#f8fbfa;box-shadow:0 5px 16px #233e4710}.pr-guide-screen strong{font-size:16px}.pr-guide-screen span{display:block;padding:8px 10px;border:1px solid #dbe5e7;border-radius:5px;background:#fff}.pr-guide-screen b{justify-self:start;padding:8px 12px;border-radius:5px;background:#244c58;color:#fff;font-size:12px}.pr-guide-figure figcaption{margin-top:8px;color:#60737a;font-size:12px}@media(max-width:700px){.pr-guide-content{display:block;padding:17px}.pr-guide-figure{margin:18px 0}.pr-heading-actions{width:100%}}
.pr-suppression{margin:24px 0;border-color:#d6a6a6;background:#fffafa}.pr-suppression summary{color:#852b2b}.pr-suppression .pr-supprimer{background:#852b2b;border-color:#852b2b;color:#fff}
@media(min-width:1500px){.pr-columns{grid-template-columns:285px minmax(0,1fr)}}
@media(max-width:1050px){.pr-page{padding:22px 20px}.pr-columns{grid-template-columns:215px minmax(0,1fr)}.pr-section{padding:22px}.pr-detail-head{padding:22px}.pr-scope{align-items:stretch;flex-direction:column}.pr-heading{align-items:start}.pr-config-grid{grid-template-columns:1fr}}
@media(max-width:700px){.pr-page{padding:18px 12px}.pr-heading{flex-direction:column;gap:14px}.pr-heading h1{font-size:26px}.pr-modules a{flex:1;padding:12px 7px;text-align:center;font-size:13px}.pr-scope form{flex-wrap:wrap}.pr-scope label{width:100%}.pr-scope select{flex:1}.pr-columns{display:block}.pr-list{border-right:0;border-bottom:1px solid #dce5e6;max-height:235px;overflow:auto}.pr-list>header{padding:14px;position:sticky;top:0;background:#f8fafb}.pr-person{padding:10px 16px}.pr-detail-head{padding:20px 16px;align-items:start}.pr-facts{padding:0 16px 16px}.pr-local-nav{padding:0 16px;gap:18px}.pr-section{padding:22px 16px}.pr-task>header{align-items:start;flex-direction:column}.pr-file{padding:12px}.pr-task{padding:14px}.pr-form-panel{padding:20px 16px}.pr-inline{flex-wrap:wrap}.pr-inline>*{flex-basis:100%}.pr-slot{flex-direction:column}.pr-slot-date{text-align:left}.pr-feedback>header{align-items:start;flex-direction:column;gap:4px}.pr-page button,.pr-button{min-height:44px}.pr-zero{padding:35px 20px}}

/* Repere propre aux parcours pratiques. */
.admin-campus .campus-pratiques,[data-menu="pratiques"]{--campus-fond:#4843a8;--campus-bandeau:#625dc0;--campus-encre:#fff}

/* Meme grille et palette, informations du professeur sous les tuiles. */
.enseignant-campus .campus-suite{margin-top:28px}.enseignant-campus .campus-suite .journee-prof{background:#fff;border:1px solid #e2e7e9;box-shadow:none}.enseignant-campus .campus-grille{margin-bottom:28px}

/* Le contexte du cours reste visible meme quand le tableau deborde sur mobile. */
.catalogue-cours-contexte{display:block;margin-top:5px;color:var(--encre-douce);font-size:12px;line-height:1.45}

/* Largeur du catalogue enseignant et de ses actions. */
main.large.catalogue-enseignant { width:100%; max-width:none; min-width:0; }
.catalogue-enseignant .tableau-cours th:first-child { width:40%; }
.catalogue-enseignant .tableau-cours th:nth-child(2) { width:16%; }
.catalogue-enseignant .tableau-cours th:nth-child(3) { width:14%; }
.catalogue-enseignant .tableau-cours th:nth-child(4) { width:30%; }
.catalogue-enseignant .tableau-cours th,
.catalogue-enseignant .tableau-cours td { overflow-wrap:anywhere; }
.catalogue-enseignant .tableau-cours-ouvrir {
  display:flex; width:100%; max-width:100%; white-space:normal; text-align:center;
}
.catalogue-enseignant .tableau-cours-ouvrir + .tableau-cours-ouvrir { margin-top:6px; }
.catalogue-enseignant .filtre-cours input { min-width:0; max-width:100%; }
@media(max-width:680px) {
  .catalogue-enseignant .tableau-cours tbody tr { grid-template-columns:minmax(0,1fr); }
  .catalogue-enseignant .tableau-cours tbody th { width:auto; }
  .catalogue-enseignant .tableau-cours tbody td:last-child {
    grid-column:1; grid-row:auto; margin-top:8px; min-width:0;
  }
}

/* Le formulaire garde des groupes lisibles et des cibles tactiles sans legendes superposees. */
.creation-enseignant form { display: grid; gap: 1.25rem; }
.creation-enseignant form > .carte { margin: 0; min-width: 0; }
.creation-enseignant .carte h2 { margin: 0 0 1rem; }
.creation-enseignant .carte p { margin: 0 0 1rem; }
.creation-enseignant .carte p:last-child { margin-bottom: 0; }
.creation-enseignant label { display: block; margin: 0 0 .4rem; }
.creation-enseignant .identite-enseignant { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.creation-enseignant .identite-enseignant p { margin: 0; }
.creation-enseignant input[type="text"], .creation-enseignant input[type="email"] { width: 100%; box-sizing: border-box; }
.creation-enseignant fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.creation-enseignant legend { padding: 0; margin: 0 0 .75rem; font-weight: 700; }
.creation-enseignant .cases { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; padding: 0; margin: 0; list-style: none; }
.creation-enseignant .cases li { margin: 0; padding: 0; }
.creation-enseignant .cases label, .creation-enseignant .option-enseignant { display: flex; align-items: center; gap: .65rem; min-height: 44px; margin: 0; cursor: pointer; }
.creation-enseignant input[type="checkbox"] { flex: 0 0 auto; margin: 0; width: 1.1rem; height: 1.1rem; }
.creation-enseignant .option-enseignant + .note { margin-top: .5rem; }
.creation-enseignant .actions-enseignant { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; }
@media (max-width: 600px) { .creation-enseignant .identite-enseignant { grid-template-columns: 1fr; } }

/* Pilotage du super : lecture des comptes et de l etat reel du service. */
.admin-campus .pilotage-entree{display:flex;align-items:center;gap:16px;margin:0 0 22px;padding:18px 22px;background:#fff;border:1px solid #d7e2db;border-left:5px solid #3e713b;border-radius:11px;color:#24482b;text-decoration:none}
.admin-campus .pilotage-entree strong{font-size:20px}.admin-campus .pilotage-entree span:nth-child(2){flex:1;color:#52635b}.admin-campus .campus-pilotage{display:block;margin:8px 12px;padding:11px 13px;border-radius:8px;background:#eaf3e8;color:#27572d;font-weight:700;text-decoration:none}.admin-campus .campus-pilotage[aria-current=page]{background:#326f39;color:#fff}
.pilotage{max-width:1250px;margin:auto;padding:20px 25px 55px}.pilotage-entete{display:flex;justify-content:space-between;gap:20px;align-items:start}.pilotage-entete h1{margin:4px 0}.pilotage-retour{white-space:nowrap}.pilotage-onglets{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0}.pilotage-onglets a{padding:10px 15px;background:#fff;border:1px solid #dce5dc;border-radius:8px;text-decoration:none;color:#2b4830}.pilotage-onglets a[aria-current=page]{border-color:#38723e;background:#eff7ed;font-weight:700}
.pilotage-chiffres{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.pilotage-chiffre,.pilotage-section{background:#fff;border:1px solid #dce5dc;border-radius:12px;padding:19px;box-shadow:0 5px 22px #1f35200c}.pilotage-chiffre h2{font-size:15px;margin:0;color:#415746}.pilotage-chiffre p{font-size:22px;margin:12px 0 4px}.pilotage-chiffre strong{font-size:32px;color:#2d6f36}.pilotage-chiffre small{color:#627266}.pilotage-section{margin-top:18px}.pilotage-section-entete{display:flex;align-items:center;justify-content:space-between;gap:15px}.pilotage-section-entete h2,.pilotage-section h2{font-size:20px;margin:0 0 13px}.pilotage-alertes{display:grid;gap:8px}.pilotage-alertes a{display:flex;justify-content:space-between;gap:15px;align-items:center;padding:12px 0;border-top:1px solid #e6ede7;color:#2d4731;text-decoration:none}.pilotage-alertes span{font-size:13px;color:#637369}.pilotage-raccourcis>div{display:flex;flex-wrap:wrap;gap:9px}.pilotage-raccourcis a{display:inline-block;border:1px solid #cfded0;border-radius:7px;padding:9px 12px;text-decoration:none;color:#2a5d30}
.pilotage-filtres{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin:16px 0}.pilotage-filtres label{display:grid;gap:5px;font-size:13px;font-weight:600}.pilotage-filtres input,.pilotage-filtres select{min-width:155px;max-width:220px}.pilotage-filtres button{width:auto;min-height:40px}.pilotage-tableau{overflow-x:auto}.pilotage-tableau table{width:100%;border-collapse:collapse;min-width:780px}.pilotage-tableau th,.pilotage-tableau td{text-align:left;padding:12px;border-bottom:1px solid #e3ebe4;vertical-align:top}.pilotage-tableau th{font-size:12px;color:#526457}.pilotage-tableau td small{display:block;color:#657368;overflow-wrap:anywhere}.pilotage-etat{display:inline-block;border-radius:6px;background:#eaf4e9;color:#24552b;padding:4px 8px;font-size:12px;white-space:nowrap}.pilotage-etat-desactive,.pilotage-etat-a_verifier{background:#f5e9e7;color:#8e3b30}.pilotage-etat-expiree,.pilotage-etat-a_inviter,.pilotage-etat-preparee{background:#fff1d9;color:#805319}.pilotage-etat-provisoire,.pilotage-etat-ouverte,.pilotage-etat-envoyee{background:#edf1f5;color:#425c70}.pilotage-detail summary{cursor:pointer;white-space:nowrap;color:#2b6433}.pilotage-detail>div{min-width:180px;padding:8px;background:#f8faf8}.pilotage-detail p{margin:5px 0;font-size:12px}.pilotage-detail a{display:block;margin:7px 0}.pilotage-pages{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:18px}.pilotage-sante{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.pilotage-sante>div{display:grid;gap:7px;border:1px solid #e0e9e1;padding:16px;border-radius:9px}.pilotage-sante span,.pilotage-note{font-size:13px;color:#617267}.pilotage-note{margin:17px 0 0}
@media(max-width:800px){.pilotage{padding:15px}.pilotage-chiffres,.pilotage-sante{grid-template-columns:1fr}.pilotage-alertes a{align-items:start;flex-direction:column}.pilotage-entete{flex-wrap:wrap}.pilotage-filtres label,.pilotage-filtres input,.pilotage-filtres select{width:100%;max-width:none}.pilotage-filtres label{flex:1 1 180px}}

/* Pilotage des comptes : lire d abord, ouvrir un seul groupe de reglages. */
.pilotage-admins { min-width: 0; }
.pilotage-entete, .pilotage-identite { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.pilotage-entete h1 { margin-bottom: .35rem; }
.pilotage-compteur { border: 1px solid var(--trait); border-radius: 999px; padding: .5rem .85rem; background: var(--carte); white-space: nowrap; }
.pilotage-compte { margin-block: 1.25rem; padding: 1.5rem; }
.pilotage-identite h2 { margin: 0 0 .35rem; font-size: 1.12rem; }
.pilotage-identite p { margin: 0; overflow-wrap: anywhere; color: var(--encre-douce); }
.pilotage-badges { display: flex; gap: .5rem; flex-wrap: wrap; }
.pilotage-synthese { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-top: 1.4rem; }
.pilotage-synthese section { min-width: 0; border-top: 1px solid var(--trait); padding-top: 1rem; }
.pilotage-synthese h3 { margin: 0 0 .8rem; font-size: .9rem; }
.pilotage-synthese dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: .55rem .8rem; margin: 0; }
.pilotage-synthese dt { color: var(--encre-douce); font-size: .85rem; }
.pilotage-synthese dd { margin: 0; overflow-wrap: anywhere; }
.pilotage-synthese p { margin: 0; overflow-wrap: anywhere; }
/* LE DETECTEUR DE BUGS DU PILOTAGE, LOT 1 (2026-09-26) : les lignes du code en cause d un incident, et le code que la
   page d erreur donne a la personne. Le tableau et la fiche reprennent les classes du pilotage. */
.incident-cadres{margin:0;padding-left:1.2rem;overflow-wrap:anywhere}
.incident-cadres li{padding:2px 0}
.incident-reference{display:inline-block;margin:.4rem 0 1rem;padding:.35rem .8rem;border:1px solid var(--trait);border-radius:8px;background:var(--carte);font-weight:650;letter-spacing:.06em}
.incident-version{display:block;color:var(--encre-douce);font-size:.8rem}
/* Lot 2 : les boutons du suivi, et le rapport technique a copier. */
.incident-statuts{display:flex;flex-wrap:wrap;gap:8px}
.incident-rapport textarea{width:100%;min-height:16rem;line-height:1.45;resize:vertical}
/* Lot 3 : le lien « Signaler un problème » du pied de page, et la description d un signalement sur sa fiche. */
.pied-application-signaler{display:block;margin-top:4px;font-size:12px;color:inherit;text-decoration:underline}
.incident-description{min-width:16rem;white-space:normal;overflow-wrap:anywhere}
.signaler-description{width:100%;min-height:9rem;resize:vertical}
/* LE TRI DU TABLEAU DES INCIDENTS (2026-09-29) : les urgents en tete, les familles, trois sections, les episodes
   replies, les cases et la barre des actions groupees ; la priorite sur la fiche. */
.incident-urgents strong{color:var(--alerte)}
.incident-familles{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.incident-familles a{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border:1px solid var(--trait);border-radius:999px;background:var(--carte);color:inherit;font-size:13px;text-decoration:none}
.incident-familles a[aria-current]{border-color:var(--accent);background:var(--accent-clair);font-weight:650}
.incident-familles span{color:var(--encre-douce);font-variant-numeric:tabular-nums}
.incident-fait{margin:0 0 14px;padding:10px 14px;border-radius:8px;background:var(--accent-clair);font-weight:600}
.incident-choix{margin:0}
.incident-section{margin-top:20px}
.incident-section-entete{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:2px 0 2px 10px;border-left:4px solid var(--trait)}
.incident-section-entete input{align-self:center;width:18px;height:18px;margin:0}
.incident-section-entete h3{margin:0;font-size:17px}
.incident-section-entete h3 span{margin-left:4px;color:var(--encre-douce);font-weight:500}
.incident-section-entete p{margin:0;color:var(--encre-douce);font-size:13px}
.incident-section-urgent .incident-section-entete{border-left-color:var(--alerte)}
.incident-section-important .incident-section-entete{border-left-color:#c98a1a}
.incident-section-a_surveiller .incident-section-entete{border-left-color:var(--trait)}
.incident-case{width:36px}
.incident-case input{width:18px;height:18px;margin:0}
.incident-cache{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.incident-episode-entete td{background:var(--accent-clair)}
.incident-episode-entete small{display:block}
.incident-deplier{margin-top:6px;width:auto}
.incident-membre td:nth-child(2){padding-left:26px}
.incident-nouveau{background:#e7f0fb;color:#2b5a8a}
.incident-famille{font-size:13px;white-space:nowrap}
.incident-suite{margin:10px 0 0}
.incident-vide{margin:10px 0 0;color:var(--encre-douce)}
.incident-actions{position:sticky;bottom:0;z-index:2;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:16px;padding:10px 12px;border:1px solid var(--trait);border-radius:10px;background:var(--carte);box-shadow:0 -4px 16px #1f352014}
.incident-actions p{margin:0 auto 0 0;font-size:14px}
.incident-actions button{width:auto}
.incident-priorite{display:inline-block;padding:2px 8px;border-radius:6px;background:var(--accent-clair);font-size:.85em;font-weight:650}
.incident-priorite-urgent{background:var(--alerte-fond);color:var(--alerte)}
.incident-priorite-important{background:#fff1d9;color:#805319}
.incident-priorite-a_surveiller{background:#edf1f5;color:#425c70}
.pilotage-reglages { border-top: 1px solid var(--trait); margin-top: 1.3rem; padding-top: .85rem; }
.pilotage-reglages summary { cursor: pointer; color: var(--accent-fonce); font-weight: 600; padding: .5rem 0; }
.pilotage-reglages summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.pilotage-cible { display: inline-block; font-size: .8rem; font-weight: 400; color: var(--encre-douce); margin-left: .65rem; }
.pilotage-raison { max-width: 48rem; margin-block: 1rem 1.4rem; }
.pilotage-raison label { display: block; margin-bottom: .5rem; }
.pilotage-raison input { width: 100%; box-sizing: border-box; }
.pilotage-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.pilotage-actions fieldset { display: flex; flex-direction: column; gap: .7rem; min-width: 0; margin: 0; padding: 1rem; border: 1px solid var(--trait); border-radius: var(--rayon); box-shadow: none; }
.pilotage-actions legend { padding: 0 .3rem; font-weight: 600; }
.pilotage-actions p { margin: 0; }
.pilotage-actions select { width: 100%; min-width: 0; }
.pilotage-actions button { margin-top: auto; align-self: flex-start; max-width: 100%; white-space: normal; }
.pilotage-promotion { margin-top: 2rem; }
.pilotage-promotion-formulaire { display: grid; gap: .8rem; max-width: 42rem; margin-top: 1rem; }
.pilotage-promotion-formulaire select, .pilotage-promotion-formulaire input[type="text"] { width: 100%; min-width: 0; box-sizing: border-box; }
.pilotage-promotion-formulaire button { justify-self: start; }
@media (max-width: 1000px) { .pilotage-synthese { grid-template-columns: 1fr; gap: 1rem; } }
@media (max-width: 640px) { .pilotage-compte { padding: 1rem; } .pilotage-actions { grid-template-columns: 1fr; } .pilotage-synthese dl { grid-template-columns: 1fr; gap: .25rem; } .pilotage-synthese dd { margin-bottom: .5rem; } .pilotage-cible { display: block; margin: .35rem 0 0; } }


/* Horaire commun : calendrier compact et cartes des jours selectionnes. */
.zone-contenu main.horaire-page{max-width:1400px;margin-inline:auto;padding:28px 32px}
.horaire-page>h1{color:#183b49;margin-top:0}.horaire-page>.sous-titre{color:#5f737d}
.horaire-mix{--hm-orange:#db691b;--hm-fond:#fff0e3;color:#183b49}
.hm-calendrier{background:#fff;border:1px solid #dfe7eb;border-radius:10px;padding:16px 20px;margin:18px 0}
.hm-mois{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.hm-mois h2{font-size:18px;margin:0;min-width:140px;text-align:center}
.hm-mois a{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 14px;border:1px solid #dfe7eb;border-radius:7px;text-decoration:none;color:#183b49;background:#fff}
.hm-mois a:hover{border-color:var(--hm-orange)}.hm-mois .hm-prochaine{margin-left:auto;color:#a8490a;font-size:13px}
.hm-grille{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.hm-jour-nom{text-align:center;font-size:12px;color:#5b6f7a;padding:6px 0}
.hm-date{display:flex;align-items:center;justify-content:center;gap:5px;min-height:38px;text-decoration:none;color:#5b6f7a;border:1px solid transparent;border-radius:7px;font-size:13px}
.hm-date:hover{background:#f4f7f8;color:#183b49}.hm-date.hm-rempli{background:var(--hm-fond);color:#183b49}
.hm-date.hm-choisi{border-color:var(--hm-orange);font-weight:700}.hm-point{display:inline-block;width:5px;height:5px;background:var(--hm-orange);border-radius:50%;flex-shrink:0}
.hm-legende{display:flex;align-items:center;gap:7px;font-size:12px;color:#5b6f7a;margin:12px 0 0}
.hm-selection{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:23px 0 13px;scroll-margin-top:20px}
.hm-selection h2{font-size:20px;margin:0}.hm-selection>span{font-size:13px;color:#5b6f7a}
.hm-jours{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.hm-un-jour{grid-template-columns:1fr}
.hm-jour{background:#fff;border:1px solid #dfe7eb;border-radius:10px;padding:14px;min-width:0}
.hm-jour>header{display:flex;gap:12px;align-items:center;margin-bottom:13px}.hm-jour>header>strong{background:var(--hm-fond);color:#b15312;padding:5px 11px;border-radius:8px;font-size:24px}
.hm-jour h3{font-size:16px;margin:0}.hm-jour header span{font-size:12px;color:#5b6f7a}
.hm-seance{margin-top:8px;background:var(--hm-fond);border:1px solid #f2dbc7;border-left:3px solid var(--hm-orange);border-radius:7px;overflow-wrap:anywhere}
.hm-seance>summary{padding:10px 12px;cursor:pointer;list-style:revert}.hm-seance>summary>strong,.hm-seance>summary>span{display:block}
.hm-seance>summary>strong{font-size:14px;margin:4px 0}.hm-seance>summary>span{font-size:13px;color:#526b76;margin-top:3px}.hm-seance>summary>.hm-heures{font-size:13px;font-weight:700;color:#183b49;display:inline}
.hm-seance>summary>.hm-ouvrir{font-size:12px;margin-top:6px;color:#924009}.hm-seance[open]>summary>.hm-ouvrir{display:none}
.hm-seance>summary>.hm-etat{display:inline-block;font-size:11px;padding:3px 7px;background:#fff;border-radius:5px;color:#734617}
.hm-detail{padding:0 14px 14px}.hm-detail p{font-size:13px;margin:9px 0}.hm-actions{display:flex;gap:8px;flex-wrap:wrap}
.hm-actions a{display:inline-flex;align-items:center;padding:9px 12px;border-radius:6px;background:#183b49;color:#fff;text-decoration:none;font-size:13px}
.hm-actions a:hover{background:#295664}.hm-vide{color:#5b6f7a;padding:16px 0;text-align:center;font-size:13px}
.hm-outils{margin:24px 0;background:#fff;border:1px solid #dfe7eb;border-radius:9px;padding:14px}.hm-outils>summary{font-weight:650;color:#183b49;cursor:pointer}.hm-outils .sommaire{margin-top:18px}
.hm-filtres{margin:16px 0}.hm-filtres>h2{font-size:14px;color:#526b76;margin:0;font-weight:600}.hm-filtres .filtres{margin-top:12px}.hm-filtres label{display:grid;gap:4px;font-size:12px;color:#526b76}
@media(max-width:700px){.zone-contenu main.horaire-page{padding:20px 16px}.hm-jours{grid-template-columns:1fr}.hm-calendrier{padding:13px}.hm-mois h2{font-size:16px;min-width:100px}.hm-mois .hm-prochaine{width:100%;margin-left:0}.hm-grille{gap:2px}.hm-selection{flex-wrap:wrap}.hm-date{min-height:40px}.hm-jour{padding:14px}}
@media(pointer:coarse){.hm-date,.hm-mois a,.hm-actions a{min-height:44px}}
@media print{.hm-calendrier,.hm-filtres,.hm-outils{display:none}.hm-jours{display:block}.hm-jour{break-inside:avoid;margin-bottom:15px}.hm-actions{display:none}}

/* Gent reste bleu dans les cartes et les reperes du calendrier. */
.hm-seance.hm-gent{--hm-orange:#287bb9;--hm-fond:#edf6ff;border-color:#cbdff0;border-left-color:#287bb9}
.hm-seance.hm-gent>summary>.hm-ouvrir{color:#185b8e}.hm-seance.hm-gent>summary>.hm-etat{color:#185b8e}
.hm-point.hm-point-gent{background:#287bb9}.hm-date.hm-rempli.hm-gent{background:#edf6ff}
.hm-date.hm-gent.hm-choisi{border-color:#287bb9}
.hm-date.hm-rempli.hm-mixte{background:linear-gradient(110deg,#fff0e3 50%,#edf6ff 50%)}
.hm-date.hm-mixte.hm-choisi{border-color:#183b49}
.hm-legende{flex-wrap:wrap;gap:14px}.hm-legende>span{display:inline-flex;align-items:center;gap:5px}
.hm-filtres .filtres{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.hm-filtres .filtres>*{min-width:0}

/* Invitations : comparer les comptes sans repeter les consignes sur chaque ligne. */
.invitations-page { min-width: 0; }
.invitations-entete { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; }
.invitations-entete h2 { margin: 0; }
.invitations-entete > span { color: var(--encre-douce); }
.invitations-serie { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin: 1rem 0; }
.invitations-serie p { margin: 0; max-width: 40rem; }
.invitations-defilement { overflow-x: auto; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--carte); }
.invitations-defilement:focus-visible { outline: 2px solid var(--accent-fonce); outline-offset: 3px; }
.invitations-tableau { width: 100%; min-width: 850px; border-collapse: collapse; margin: 0; table-layout: fixed; }
.invitations-tableau caption { text-align: left; padding: .8rem 1rem; font-weight: 600; }
.invitations-tableau th, .invitations-tableau td { padding: .85rem .7rem; text-align: left; vertical-align: top; white-space: normal; overflow-wrap: anywhere; border-bottom: 1px solid var(--trait); }
.invitations-tableau thead th { background: #eef3f1; color: var(--encre); font-size: .8rem; }
.invitations-tableau thead th:first-child { width: 4.5rem; }
.invitations-tableau thead th:nth-child(2) { width: 25%; }
.invitations-tableau thead th:nth-child(3) { width: 12%; }
.invitations-tableau thead th:nth-child(6) { width: 22%; }
.invitations-tableau tbody th { font-weight: 400; }
.invitations-tableau tbody tr:last-child > * { border-bottom: 0; }
.invitations-tableau tbody tr:hover, .invitations-tableau tbody tr:focus-within { background: #f4f7f5; }
.invitations-tableau input[type="checkbox"] { width: 1.15rem; height: 1.15rem; accent-color: var(--accent-fonce); }
.invitations-courriel, .invitations-site { display: block; color: var(--encre-douce); font-size: .85rem; margin-top: .25rem; }
.invitations-etat { display: inline-block; padding: .25rem .5rem; border-radius: .4rem; background: #f1f3f5; font-size: .85rem; }
.invitations-actif { background: #e5f0e1; color: #294b26; }
.invitations-actions { display: grid; gap: .5rem; }
.invitations-actions form { margin: 0; }
.invitations-actions button { margin: 0; font-size: .8rem; padding: .55rem .7rem; white-space: normal; max-width: 100%; }
.invitations-actions summary { cursor: pointer; color: var(--accent-fonce); font-size: .85rem; padding-block: .3rem; }
.invitations-actions .note { margin: .5rem 0; }

/* L espace etudiant emploie les memes tuiles et reperes que les autres profils. */
.etudiant-campus .campus-suite{margin-top:28px}.etudiant-campus .campus-suite .journee-prof{background:#fff;border:1px solid #e2e7e9;box-shadow:none}
.etudiant-campus .campus-indisponible{box-shadow:none;opacity:.75}.etudiant-campus .campus-indisponible:hover{transform:none}
.etudiant-campus .campus-lien .pastille{margin-left:auto;flex-shrink:0}
.admin-campus .campus-suite.campus-prochaine{margin:0 0 24px}

/* La tuile et le repere du menu ouvrent la meme gestion de comptes. */
.admin-campus .campus-comptes,[data-menu="invitations"]{--campus-fond:#3c568c;--campus-bandeau:#526da5;--campus-encre:#fff}

/* Registre etudiant : les memes reperes que les enseignants, avec des colonnes regroupees. */
.registre-etudiants { min-width: 0; }
.registre-entete { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }
.registre-entete h1 { margin-bottom: .5rem; }
.registre-entete .sous-titre { margin: 0; }
.registre-filtres { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; margin-top: 1.5rem; }
.registre-filtres > div { min-width: 0; }
.registre-filtres select, .registre-filtres input[type="search"] { width: 100%; min-width: 0; box-sizing: border-box; }
.registre-filtres button { justify-self: start; }
.registre-tableau { table-layout: fixed; min-width: 800px; }
.registre-tableau th, .registre-tableau td { white-space: normal; overflow-wrap: anywhere; vertical-align: top; }
.registre-tableau thead th:first-child { width: 22%; }
.registre-tableau thead th:nth-child(2) { width: 10%; }
.registre-tableau thead th:nth-child(3) { width: 9%; }
.registre-tableau thead th:nth-child(6) { width: 22%; }
.registre-tableau tbody th { font-size: inherit; font-weight: 400; text-transform: none; letter-spacing: normal; }
.registre-tableau tbody th > a { font-weight: 600; }
/* Le nom d un etudiant ouvre son espace en apercu (2026-09-26) : un bouton, puisque l apercu se prend par un envoi,
   habille comme le lien qu il remplace. */
.registre-nom { display: inline; margin: 0; }
.registre-nom button { display: inline; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--accent); font: inherit; font-weight: 600; text-align: left; text-decoration: underline; cursor: pointer; }
.registre-nom button:hover { filter: none; text-decoration-thickness: 2px; }
.registre-detail { display: block; font-size: .85rem; color: var(--encre-douce); margin-top: .4rem; }
.registre-coordonnees { margin-top: .5rem; font-size: .85rem; }
.registre-coordonnees summary { cursor: pointer; color: var(--accent-fonce); }
.registre-coordonnees dl { display: block; margin: .6rem 0; }
.registre-coordonnees dd { margin: .2rem 0 .6rem; }
.registre-actions { display: flex; flex-direction: column; gap: .6rem; }
@media (max-width: 780px) { .registre-filtres { grid-template-columns: 1fr; } }
.registre-etudiants nav.gestes { display: flex; flex-wrap: wrap; gap: .6rem; }
.registre-etudiants nav.gestes a { border: 1px solid var(--trait); border-radius: .5rem; background: var(--carte); padding: .6rem .85rem; text-decoration: none; }

/* Comptes et acces : filtres persistants, selection explicite, fiche d actions. */
.acces-gestion .ag-action small{font-weight:400}
.acces-gestion{max-width:1380px;margin:auto;padding:26px 30px 35px;color:#183b49;font:14px/1.5 Arial,sans-serif;position:relative}
.acces-gestion .ag-entete{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}.acces-gestion h1{font-size:28px;line-height:1.2;margin:0 0 8px;letter-spacing:-.5px}.acces-gestion .ag-entete p{color:#5c6e7c;margin:0}.acces-gestion .ag-bouton{display:inline-flex;align-items:center;justify-content:center;gap:7px;text-decoration:none;background:#fff;color:#385586;border:1px solid #dce3ec;border-radius:7px;padding:9px 13px;font:600 13px/1.4 Arial,sans-serif;width:auto;margin:0;white-space:nowrap}.acces-gestion .ag-bouton.ag-principal{background:#48639a;border-color:#48639a;color:#fff}.acces-gestion .ag-bouton:disabled{opacity:.5;cursor:default}
.ag-compteurs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:24px}.ag-compteur{display:block;text-decoration:none;border:1px solid #e0e6ed;border-radius:10px;background:#fff;color:#183b49;padding:16px}.ag-compteur>span{font-weight:600;font-size:13px}.ag-compteur i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#627584;margin-right:7px}.ag-compteur.ag-wait i{background:#9b6418}.ag-compteur.ag-ok i{background:#287349}.ag-compteur.ag-stop i{background:#a23d4a}.ag-compteur strong{display:block;font-size:30px;line-height:1.4;font-variant-numeric:tabular-nums}.ag-compteur small{color:#5c6e7c;font-size:12px}.ag-compteur[aria-current]{border-color:#48639a;box-shadow:inset 0 0 0 1px #48639a;background:#eef2f9}
.ag-liste{background:#fff;border:1px solid #e0e6ed;border-radius:12px;overflow:hidden}.acces-gestion .ag-filtres{display:grid;grid-template-columns:minmax(180px,1.6fr) minmax(120px,1fr) minmax(120px,1fr) auto;gap:12px;align-items:end;padding:20px;border-bottom:1px solid #e1e7ee;margin:0}.acces-gestion .ag-filtres label{display:grid;gap:7px;font-size:12px;color:#5c6e7c;font-weight:600;margin:0}.acces-gestion .ag-filtres input,.acces-gestion .ag-filtres select{width:100%;min-width:0;margin:0;background:white;border:1px solid #dce3ec;border-radius:6px;padding:9px 10px;height:39px;color:#183b49;font-size:13px}.acces-gestion .ag-serie{margin:0}.ag-outils{display:flex;justify-content:space-between;gap:15px;align-items:center;padding:14px 20px;flex-wrap:wrap}.ag-outils>div{display:flex;gap:14px;align-items:center;font-size:13px}.ag-outils a{color:#48639a}
.ag-table-defilement{overflow-x:auto}.acces-gestion .ag-table{width:100%;border-collapse:collapse;margin:0;font-size:13px;table-layout:fixed}.acces-gestion .ag-table th{text-transform:uppercase;font-size:11px;letter-spacing:.6px;color:#5c6e7c;background:#f5f7f9;padding:11px 10px;text-align:left;border-block:1px solid #e1e7ee}.acces-gestion .ag-table td{padding:16px 10px;border-bottom:1px solid #e1e7ee;vertical-align:middle;overflow-wrap:anywhere}.acces-gestion .ag-table tr:last-child td{border-bottom:0}.ag-table th:first-child,.ag-table td:first-child{width:43px;padding-left:20px}.ag-table th:nth-child(2){width:34%}.ag-table th:nth-child(3){width:21%}.ag-table th:last-child{width:86px}.ag-table .ag-nom{display:block;font-size:14px}.ag-table .ag-courriel{display:block;color:#5c6e7c;font-size:12px;margin:3px 0}.ag-table small{display:block;font-size:11px;color:#5c6e7c;margin-top:3px}.ag-etat{display:inline-block;padding:4px 7px;background:#eef2f7;color:#536675;border-radius:5px;font-size:12px;font-weight:600}.ag-etat.ag-wait{background:#fff3df;color:#875814}.ag-etat.ag-ok{background:#eaf6ee;color:#236343}.ag-etat.ag-stop{background:#fbeef0;color:#9d414b}.acces-gestion input[type=checkbox]{width:16px;height:16px;accent-color:#48639a;margin:0}.acces-gestion .ag-gerer{font-size:12px;padding:7px 10px}.ag-vide{text-align:center;padding:35px!important;color:#5c6e7c}.ag-pages{display:flex;align-items:center;justify-content:center;gap:25px;padding:18px;border-top:1px solid #e1e7ee}.ag-note{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:#5c6e7c;font-size:12px;margin-top:16px}
.ag-voile{position:fixed;inset:0;background:#152b4655;z-index:1100;display:flex;align-items:flex-start;justify-content:flex-end;padding:90px 28px 25px;overflow-y:auto}.ag-dialogue{background:#fff;color:#183b49;border-radius:12px;width:410px;max-width:100%;padding:24px;box-shadow:0 14px 50px #0003}.ag-dialogue>header{display:flex;align-items:center;justify-content:space-between;gap:15px}.ag-dialogue h2{font-size:18px;margin:0}.ag-fermer{border-radius:50%;width:32px;height:32px;display:grid;place-items:center;background:#eef2f9;color:#183b49;font-size:22px;text-decoration:none}.ag-identite{padding:18px 0;border-bottom:1px solid #e1e7ee;margin-bottom:16px}.ag-identite h3,.ag-identite h2{font-size:22px;margin:0 0 6px}.ag-identite p{font-size:13px;margin:4px 0;color:#5c6e7c;overflow-wrap:anywhere}.ag-identite .ag-etat{margin-top:8px}.acces-gestion .ag-action{margin:10px 0}.acces-gestion .ag-action button{position:relative;background:#fff;border:1px solid #e1e7ee;color:#183b49;border-radius:8px;text-align:left;width:100%;padding:13px 33px 13px 14px;margin:0}.ag-action strong{display:block;font-size:13px;margin-bottom:3px}.ag-action small{display:block;font-size:12px;color:#5c6e7c;line-height:1.4}.ag-action button>span{position:absolute;right:14px;top:15px}.acces-gestion .ag-action button.ag-danger strong{color:#9d414b}.ag-confirmation{background:#fff;border:1px solid #e1e7ee;border-radius:12px;max-width:720px;margin:10px auto;padding:30px}.ag-confirmation>h1{margin-top:24px}.ag-confirmation>p{color:#5c6e7c}.ag-confirmation-boutons{display:flex;gap:12px;margin-top:24px}.ag-destinataires{padding:0;list-style:none;max-height:400px;overflow:auto}.ag-destinataires li{padding:10px 0;border-bottom:1px solid #e1e7ee}.ag-destinataires small{display:block;color:#5c6e7c}.acces-gestion .ag-creation-filtres{padding:15px 0;margin:20px 0;grid-template-columns:1fr 1fr auto}
@media(max-width:1100px){.acces-gestion{padding:22px 18px}.acces-gestion .ag-filtres{grid-template-columns:1.4fr 1fr 1fr}.ag-filtres>.ag-bouton{grid-column:3}.ag-compteur{padding:14px 12px}.ag-compteur small{display:none}.ag-table .ag-activite{display:none}.ag-table th:nth-child(2){width:auto}.ag-table th:nth-child(3){width:28%}}
@media(max-width:620px){.acces-gestion{padding:16px 10px}.ag-entete{flex-wrap:wrap}.ag-compteurs{grid-template-columns:1fr 1fr}.acces-gestion .ag-filtres{padding:14px;grid-template-columns:1fr 1fr}.ag-filtres>label:first-of-type{grid-column:1/-1}.ag-filtres>.ag-bouton{grid-column:auto}.acces-gestion .ag-filtres input,.acces-gestion .ag-filtres select{font-size:16px;height:43px}.ag-table th:first-child,.ag-table td:first-child{width:28px;padding-left:9px}.ag-table th:last-child{width:68px}.acces-gestion .ag-table td{padding:14px 5px}.ag-table .ag-courriel{font-size:11px}.ag-table .ag-nom{font-size:13px}.ag-table .ag-etat{font-size:11px}.acces-gestion .ag-table th{padding:10px 5px;font-size:10px}.ag-outils{padding:12px}.ag-voile{padding:24px 12px}.ag-dialogue{padding:20px}.ag-confirmation{padding:20px}.acces-gestion .ag-creation-filtres{grid-template-columns:1fr}.ag-creation-filtres>label:first-of-type{grid-column:auto}.acces-gestion .ag-bouton{min-height:42px}}

.parcours-depot{padding:1.4rem;margin:1.2rem 0;scroll-margin-top:1rem}
.parcours-depot-entete h2{margin:.15rem 0 .5rem}
.parcours-depot-entete p{margin:.3rem 0 0}
.parcours-depot-formulaire{display:grid;gap:.85rem;margin-top:1.1rem;max-width:none}
/* Les depots de fichiers (incident FN2593, 2026-09-27) : l attente a l envoi et le refus d un fichier trop gros, montres
   par coeur/static/coeur/depot-fichiers.js ; caches tant qu il n y a rien a dire. */
.depot-message{margin:.4rem 0 0}
.depot-message[hidden]{display:none!important}
.parcours-depot-formulaire>label,.parcours-depot-choix label,.parcours-depot-options label{display:block;font-weight:650}
.parcours-depot-formulaire input:not([type=checkbox]),.parcours-depot-formulaire select,.parcours-depot-formulaire textarea{display:block;width:100%;max-width:100%;margin-top:.35rem}
.parcours-depot-choix{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.parcours-depot-options{padding:.8rem 1rem;border:1px solid var(--parcours-trait);border-radius:.65rem;background:var(--parcours-fond)}
.parcours-depot-options>summary{cursor:pointer;color:var(--parcours-vert);font-weight:700}
.parcours-depot-options[open]>summary{margin-bottom:.8rem}
.parcours-depot-options textarea{min-height:5rem}
.parcours-depot-formulaire>button{justify-self:start}
.parcours-vide{padding:1.4rem}
.parcours-vide h2{margin:.1rem 0 .5rem}
.parcours-ajouts>a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
@media(max-width:700px){.parcours-depot-choix{grid-template-columns:1fr}.parcours-depot{padding:1rem}.parcours-depot-formulaire>button{width:100%}}

/* Mesures du serveur : valeurs lisibles et jauges sans script ajoute. */
.pilotage-mesures{margin-top:1rem}
.pilotage-mesures-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
.pilotage-mesure{min-width:0;padding:18px;border:1px solid #dce5dc;border-radius:10px;background:#f8fbf8}
.pilotage-mesure h3{font-size:15px;margin:0;color:#415746}
.pilotage-mesure-valeur{font-size:28px;font-weight:750;color:#2d6f36;margin:12px 0 7px;font-variant-numeric:tabular-nums}
.pilotage-mesure-detail{font-size:13px;color:#526457;margin:6px 0;font-variant-numeric:tabular-nums}
.pilotage-mesure-barre{display:block;width:100%;height:12px;accent-color:#3e713b}
.pilotage-mesure-indisponible{font-size:13px;color:#637369;margin:14px 0 0}
@media(max-width:780px){.pilotage-mesures-grille{grid-template-columns:1fr}}

/* Explorateur de cours, choix 3 commun aux espaces etudiant et enseignant. */
.parcours-cours{--parcours-vert:#28738c;--parcours-trait:#dce6eb;--parcours-fond:#f3f8fa}
.parcours-cours>.retour-page{display:none}
.parcours-cours .cours-entete{background:transparent;border:0;border-radius:0;box-shadow:none;padding:0;margin-bottom:22px}
.parcours-cours .cours-entete h1{font-size:clamp(24px,2.5vw,30px);margin:.35rem 0}
.parcours-cours .parcours-entete-actions{padding:14px 18px;border:1px solid #dce6eb;border-radius:10px;background:#fff;font-size:.88rem}
.parcours-cours .cours-entete .surtitre::before{content:"";display:inline-block;width:10px;height:10px;border-radius:2px;background:#c0457e;margin-right:8px}
.parcours-grille.cours-explorateur{display:grid;grid-template-columns:minmax(12rem,15rem) minmax(0,1fr);align-items:stretch;gap:0;margin-top:1.25rem;background:#fff;border:1px solid #dce6eb;border-radius:12px;overflow:clip}
.cours-explorateur .cours-arbre{background:#f4f7f8;border-right:1px solid #dce6eb;padding:20px 12px;min-width:0}
.cours-arbre>.surtitre{font-size:.73rem;letter-spacing:.07em;padding:0 10px;margin:0 0 16px;color:#5e7380}
.cours-arbre a{display:flex;gap:9px;padding:11px 10px;border-radius:6px;color:#3d5968;text-decoration:none;overflow-wrap:anywhere;line-height:1.45;font-size:.86rem}
.cours-arbre a:hover{background:#e7eff3;color:#193b4b}
.cours-arbre a[aria-current=true]{background:#fff;color:#193b4b;box-shadow:0 1px 5px #193b4b0d;font-weight:650}
.cours-dossier{font-weight:600;align-items:baseline}
.cours-dossier small{display:block;font-weight:400;font-size:.75rem;color:#835d19;margin-top:3px}
.cours-numero{font-size:.78rem;color:#4f758a;font-variant-numeric:tabular-nums;flex:none}
.cours-feuilles{margin:5px 0 12px 17px;border-left:1px solid #d4e1e7;padding-left:7px}
.cours-feuilles a{display:block;padding:8px;font-size:.78rem}
.cours-type{display:block;font-size:.67rem;color:#5e7380;text-transform:uppercase;letter-spacing:.03em;margin-bottom:2px}
.cours-arbre-actions{border-top:1px solid #dce6eb;margin:18px 8px 0;padding-top:12px}
.cours-arbre-actions a{padding:9px 2px;color:#28738c;font-size:.8rem}
.cours-explorateur .parcours-liste{display:block;min-width:0;padding:24px;scroll-margin-top:1rem}
.cours-explorateur [hidden]{display:none!important}
.cours-explorateur .parcours-chapitre,.cours-explorateur .parcours-creation,.cours-explorateur .parcours-depot,.cours-explorateur .parcours-vide{border:0;box-shadow:none;margin:0;padding:0;border-radius:0;position:static;background:transparent}
.cours-explorateur .parcours-chapitre>h2,.cours-explorateur .parcours-chapitre-entete h2{font-size:1.45rem;line-height:1.3;margin:.2rem 0 1.15rem}
.cours-explorateur .parcours-chapitre-entete{margin-bottom:12px}
.cours-explorateur .parcours-chapitre-entete .etat{white-space:normal;font-size:.75rem;font-weight:500}
.cours-explorateur .parcours-fichier{padding:18px 0;gap:16px;flex-wrap:wrap;align-items:center}
.cours-explorateur .parcours-fichier-texte{flex:1 1 12rem}
.cours-explorateur .parcours-fichier-texte strong{font-size:.9rem}
.cours-explorateur .parcours-fichier-texte small{color:#61727c;font-size:.78rem;margin-top:4px}
.cours-explorateur .parcours-fichier-actions{font-size:.82rem;max-width:100%}
.cours-explorateur .parcours-fichier-actions details[open]{flex:1 1 100%;min-width:0}
.cours-explorateur .parcours-gestion-fichier{min-width:0;width:100%;box-sizing:border-box}
.cours-explorateur .parcours-travail{background:#f3f8fa;border:1px solid #dce6eb;border-left:3px solid #68b8cf;padding:20px;margin:22px 0 0}
.cours-explorateur .parcours-travail h3{font-size:1.1rem}
.cours-explorateur .parcours-travail .surtitre{font-size:.72rem;letter-spacing:.06em}
.cours-explorateur .parcours-actions{margin-top:15px}
.cours-explorateur .parcours-travail form{margin-top:16px}
.cours-explorateur .parcours-travail input[type=file]{box-sizing:border-box}
.cours-explorateur .parcours-gestion{font-size:.87rem}
.cours-explorateur input,.cours-explorateur select,.cours-explorateur textarea{max-width:100%;box-sizing:border-box}
.cours-explorateur .parcours-ajouts{margin-top:24px;padding-top:18px;font-size:.88rem}
@media(max-width:1050px){.parcours-grille.cours-explorateur{grid-template-columns:minmax(11rem,13rem) minmax(0,1fr)}.cours-explorateur .parcours-liste{padding:20px}.cours-explorateur .parcours-creation{grid-column:auto}}
@media(max-width:760px){.parcours-grille.cours-explorateur{display:block}.cours-explorateur .cours-arbre{border-right:0;border-bottom:1px solid #dce6eb;padding:14px}.cours-arbre>.surtitre{margin-bottom:8px}.cours-arbre .cours-branche{display:inline-block;vertical-align:top;max-width:100%}.cours-arbre .cours-feuilles{display:none}.cours-arbre-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px;padding-top:10px}.cours-explorateur .parcours-liste{padding:18px}.cours-explorateur .parcours-travail{padding:15px}.cours-explorateur .parcours-fichier-actions{justify-content:flex-start}.cours-explorateur .parcours-fichier{display:flex}.cours-explorateur input[type=file]{font-size:16px}}

/* Pied commun, proposition 2 : bandeau blanc et signature regroupee. */
.pied-application{background:#fff;border-top:1px solid #dce6eb;color:#193b4b;margin:12px 0 0;width:100%;flex-shrink:0}
.pied-application-interieur{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:1200px;margin:0 auto;padding:23px 32px;box-sizing:border-box}
.pied-application-ecole{display:flex;flex-direction:column;gap:3px;min-width:0}
.pied-application-ecole>strong{font-size:15px;letter-spacing:.015em;font-weight:650;line-height:1.5}
.pied-application-ecole>span{font-size:12px;line-height:1.5;color:#5d737f;overflow-wrap:anywhere}
.pied-application-marque{display:flex;flex-direction:column;align-items:flex-end;gap:7px;text-align:right;min-width:0}
.pied-application-logo{display:block;width:107px;height:27px;background:#193b4b;mask:url('discea-logo-white.png') center/contain no-repeat;-webkit-mask:url('discea-logo-white.png') center/contain no-repeat}
.pied-application-credit{font-size:11px;line-height:1.5;color:#5d737f}
.pied-application-credit strong{font-weight:600;color:#193b4b}
.messagerie-ouverte .pied-application-interieur{max-width:none}
body.acces .pied-application{margin-top:0}
body.acces .acces-fond{min-height:calc(100vh - 97px);min-height:calc(100dvh - 97px)}
@media(max-width:800px){.pied-application-interieur{padding:22px 18px;gap:16px}}
@media(max-width:360px){.pied-application-interieur{align-items:flex-start;flex-direction:column;gap:18px}.pied-application-marque{align-items:flex-start;text-align:left}body.acces .acces-fond{min-height:calc(100dvh - 160px)}}
@media print{.pied-application-logo{print-color-adjust:exact;-webkit-print-color-adjust:exact}.pied-application{break-inside:avoid}}

/* Bandeau commun, proposition 1 : identite de l ecole et profil personnel. */
body.interface .bandeau{background:#fff;color:#193b4b;padding:16px 28px;gap:20px;min-height:90px;border-bottom:1px solid #e0e8eb;box-sizing:border-box;flex-wrap:wrap}
body.interface .bandeau .marque{display:block;width:65px;height:53px;overflow:hidden;flex:0 0 65px;padding:0;border:0;background:transparent}
body.interface .bandeau .marque img{display:block;width:65px;height:auto;max-width:none}
body.interface .bandeau .campus-identite{display:block;color:#193b4b;border-left:1px solid #e0e8eb;padding-left:20px;font-size:14px;font-weight:650;line-height:1.5}
body.interface .bandeau .campus-identite small{display:block;font-size:12px;color:#5b737d;font-weight:400}
body.interface .bandeau .qui{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:14px;margin-left:auto;color:#5b737d}
body.interface .bandeau .qui form{margin:0}
/* Pendant une prise de role, le profil est un <button> : sans margin:0, il herite du margin-top:18px des boutons et descend de 9px sous "Se deconnecter". */
body.interface .bandeau .qui .profil-compte{display:flex;align-items:center;gap:11px;margin:0;padding:3px;background:transparent;border:0;border-radius:28px;color:#193b4b;text-decoration:none;box-shadow:none;line-height:1.4;min-height:44px;text-align:left}
.avatar-compte{width:44px;height:44px;border-radius:50%;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;background:#e5eedf;color:#467832;font-size:14px;font-weight:650;line-height:1}
.avatar-compte img{width:100%;height:100%;object-fit:cover;display:block}
.profil-compte-nom{display:flex;flex-direction:column;font-size:13px;font-weight:600}
.profil-compte-nom small{font-size:11px;color:#5b737d;font-weight:400}
body.interface .bandeau .qui .profil-compte:hover{background:#f1f5ee}
body.interface .bandeau .qui .discret{color:#375667;border:1px solid #dfe7eb;background:#fff}
body.interface .bandeau .prise-de-role{flex-wrap:wrap}
.reglages-profil .profil-presentation{display:flex;gap:20px;align-items:center;margin-bottom:24px;overflow-wrap:anywhere}
.reglages-profil .profil-presentation p{margin:3px 0;color:#5b737d}
.avatar-compte.avatar-grand{width:84px;height:84px;flex-basis:84px;font-size:25px}
.reglages-profil input[type=file]{max-width:100%;box-sizing:border-box}
.reglages-profil .profil-retrait{margin-top:12px}
.reglages-profil .profil-succes{background:#edf5e8;color:#355e29;padding:12px;border-radius:8px}
@media(max-width:800px){body.interface .bandeau{padding:13px 18px;gap:12px}body.interface .bandeau .campus-identite{padding-left:12px}.profil-compte-nom{display:none}body.interface .bandeau .qui{gap:8px}body.interface .bandeau .prise-de-role{order:3;flex-basis:100%}}
@media(max-width:480px){body.interface .bandeau{padding:12px;gap:10px}body.interface .bandeau .campus-identite{font-size:12px}.reglages-profil .profil-presentation{align-items:flex-start;gap:12px}}

/* Evaluations : lecture compacte et actions separees de la grille. */
.eval-espace {max-width:1500px;margin:0 auto;padding:24px;}
.eval-entete {display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;}
.eval-actions {display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:18px 0;}
.eval-filtres {display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:14px;align-items:end;padding:20px;background:#fff;border:1px solid #dce5df;border-radius:12px;}
.eval-filtres label,.eval-validation label {display:grid;gap:7px;}
.eval-filtres input,.eval-filtres select {width:100%;min-width:0;}
.eval-bilan {font-weight:600;margin:22px 0;}
.eval-table {overflow-x:auto;background:#fff;border:1px solid #dce5df;border-radius:12px;margin:16px 0;}
.eval-table table {width:100%;border-collapse:collapse;table-layout:auto;}
.eval-table caption {text-align:left;padding:16px;font-weight:600;}
.eval-table th,.eval-table td {padding:13px 16px;text-align:left;border-bottom:1px solid #e3e9e6;vertical-align:top;overflow-wrap:anywhere;}
.eval-table thead th {background:#eef4f0;position:sticky;top:0;}
.eval-table small {display:block;color:#50666f;margin-top:5px;}
.eval-table td a {display:block;margin-bottom:5px;}
.eval-groupe th {background:#f2f6f3;color:#274938;}
.eval-validation {display:grid;gap:14px;background:#fff;border:1px solid #dce5df;border-radius:12px;padding:20px;margin:20px 0;}
.eval-validation button {justify-self:start;}
@media(max-width:700px){.eval-espace{padding:14px;}.eval-table th,.eval-table td{padding:10px 8px;}.eval-table table{min-width:620px;}}

/* Le resultat etudiant tient sur un telephone : cours puis points. */
.eval-resultats td:last-child {width:9rem;white-space:nowrap;}
@media(max-width:700px){.eval-resultats table{min-width:0;}.eval-resultats td:last-child{width:7.5rem;}.eval-resultats th,.eval-resultats td{padding:12px 10px;}}

/* Evaluations : guider la lecture avant de proposer une publication. */
.eval-pilotage {max-width:1500px;}
.eval-repere {font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#516b72;margin:0 0 6px;}
.eval-pilotage .eval-entete h1 {margin:0 0 10px;}
.eval-lien-secondaire {font-weight:600;white-space:nowrap;}
.eval-etapes {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;list-style:none;padding:22px 0;margin:10px 0 24px;border-bottom:1px solid #d8e3df;}
.eval-etapes li {display:flex;gap:12px;align-items:flex-start;}
.eval-etapes li>span {display:grid;place-items:center;flex:0 0 30px;height:30px;border-radius:50%;background:#e2ece5;color:#285736;font-weight:700;}
.eval-etapes p {margin:5px 0 0;font-size:.88rem;color:#526970;line-height:1.5;}
.eval-onglets {display:flex;flex-wrap:wrap;gap:6px;border-bottom:1px solid #d8e3df;margin:0 0 22px;}
.eval-onglets a {padding:13px 17px;text-decoration:none;border-bottom:3px solid transparent;color:#526970;}
.eval-onglets a[aria-current] {border-color:#467d37;color:#254c2e;font-weight:700;background:#edf3ee;border-radius:8px 8px 0 0;}
.eval-recherche {background:#fff;border:1px solid #d8e3df;border-radius:14px;padding:22px;margin-bottom:24px;}
.eval-filtres-principaux {display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(180px,1.4fr);gap:18px;}
.eval-filtres-principaux label,.eval-preparer label {display:grid;gap:8px;font-size:.88rem;font-weight:600;color:#24424b;}
.eval-filtres-principaux input,.eval-filtres-principaux select,.eval-preparer input {width:100%;min-width:0;box-sizing:border-box;background:#fff;border:1px solid #cbd9d3;border-radius:8px;min-height:44px;}
.eval-filtres-avances {margin-top:18px;}
.eval-filtres-avances summary {cursor:pointer;font-size:.9rem;color:#385d65;}
.eval-filtres-avances[open] .eval-filtres-principaux {margin-top:16px;}
.eval-filtrer-actions {display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:20px;}
.eval-filtrer-actions span,.eval-preparer small {color:#526970;font-size:.85rem;font-weight:400;}
.eval-a-verifier {padding:14px 18px;background:#fff8e9;border:1px solid #ead9b4;border-radius:10px;margin:18px 0;}
.eval-a-verifier summary {cursor:pointer;font-weight:600;}
.eval-selection {display:flex;justify-content:space-between;gap:20px;align-items:center;margin-top:28px;}
.eval-selection h2,.eval-preparer h2,.eval-vide h2 {font-size:1.15rem;margin:0 0 7px;}
.eval-selection p {margin:0;color:#526970;font-size:.88rem;}
.eval-selection>div:last-child {display:flex;gap:16px;flex-wrap:wrap;justify-content:flex-end;font-size:.88rem;}
.eval-selection small {flex-basis:100%;text-align:right;color:#526970;}
.eval-compteur {display:inline-block;background:#e8efeb;border-radius:16px;padding:3px 9px;margin-left:8px;font-size:.85rem;}
.eval-caption {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
.eval-points {font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600;}
.eval-statut {display:inline-block;background:#eef1f3;color:#42545c;padding:5px 9px;border-radius:6px;font-size:.82rem;}
.eval-statut-publie {background:#e5f1e6;color:#295b32;}
.eval-statut-revision {background:#fff1d5;color:#805409;}
.eval-preparer {border:1px solid #cbded0;border-left:4px solid #497d3e;border-radius:12px;padding:22px;background:#f4f8f3;margin:24px 0;display:grid;grid-template-columns:1fr 1fr;gap:16px 30px;}
.eval-preparer p {color:#526970;font-size:.9rem;margin:0;line-height:1.6;max-width:48ch;}
.eval-preparer .eval-filtrer-actions {grid-column:1/-1;margin-top:0;}
.eval-vide {text-align:center;background:#fff;border:1px dashed #c8d8ce;border-radius:14px;padding:36px 24px;margin:26px 0;}
.eval-vide p {max-width:66ch;margin:12px auto 22px;color:#526970;line-height:1.65;}
.eval-vide-symbole {display:block;color:#557462;font-size:1.7rem;margin-bottom:12px;}
.eval-import-lien {text-align:right;}
@media(max-width:950px){.eval-filtres-principaux{grid-template-columns:repeat(2,minmax(0,1fr));}.eval-etapes{gap:14px;}.eval-selection{align-items:flex-start;}}
@media(max-width:600px){.eval-etapes{grid-template-columns:1fr;gap:16px;}.eval-filtres-principaux,.eval-preparer{grid-template-columns:1fr;}.eval-selection{display:block;}.eval-selection>div:last-child{justify-content:flex-start;margin-top:16px;}.eval-selection small{text-align:left;}.eval-onglets a{padding:11px 10px;font-size:.88rem;}.eval-recherche,.eval-preparer{padding:16px;}.eval-preparer .eval-filtrer-actions{grid-column:auto;}}

/* Garder le libelle de selection entier dans la grille compacte. */
.eval-pilotage .eval-table thead th:first-child {white-space:nowrap;min-width:4rem;}

/* Dossier personnel : formations et documents de l etudiant. */
.admin-campus .campus-formations-precedentes,[data-menu="journal"] {--campus-bandeau:#b8a9fc;--campus-fond:#9a80f5;--campus-encre:#172f3b;}
.admin-campus .campus-documents-personnels {--campus-bandeau:#d4d4d4;--campus-fond:#b9b9b9;--campus-encre:#173a49;}
.dossier-personnel {max-width:1180px;}
.dossier-personnel-entete h1 {margin:.25rem 0 .6rem;}
.dossier-personnel-entete>p {color:#526970;}
.dossier-chiffres {display:flex;gap:12px;flex-wrap:wrap;margin:22px 0;}
.dossier-chiffres>span {background:#fff;border:1px solid #dce5e8;border-radius:10px;padding:12px 18px;}
.dossier-chiffres strong {font-size:1.3rem;margin-right:6px;}
.dossier-onglets {display:flex;gap:6px;border-bottom:1px solid #d7e1e5;margin:24px 0;}
.dossier-onglets a {padding:12px 16px;text-decoration:none;color:#405f6e;border-bottom:3px solid transparent;}
.dossier-onglets a[aria-current] {border-color:#8766d2;color:#173a49;font-weight:700;}
.dossier-formations {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
.dossier-carte {background:white;border:1px solid #dce5e8;border-radius:12px;padding:22px;min-width:0;}
.dossier-carte-titre {display:flex;justify-content:space-between;gap:12px;align-items:flex-start;}
.dossier-carte h2,.dossier-carte h3 {margin:0;font-size:1.08rem;overflow-wrap:anywhere;}
.dossier-carte p {margin:10px 0;overflow-wrap:anywhere;}
.dossier-annee {border-radius:6px;padding:4px 9px;background:#f0eafb;color:#6345a1;font-weight:700;}
.dossier-piece {display:flex;gap:12px;align-items:center;flex-wrap:wrap;border-top:1px solid #e5ebed;padding-top:18px;margin-top:18px;}
.dossier-piece>strong {width:100%;font-size:.85rem;}
.dossier-section {margin:28px 0;}
.dossier-section>h2 {font-size:1.15rem;}
.dossier-document {display:flex;justify-content:space-between;gap:20px;margin-bottom:10px;align-items:center;}
.dossier-document>div:first-child {min-width:0;}
.dossier-document-action {display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end;}
.dossier-aide {padding:16px 20px;background:#eaf0f2;border-radius:10px;margin-top:24px;color:#405f6e;}
@media(max-width:760px){.dossier-formations{grid-template-columns:1fr}.dossier-document{align-items:flex-start;flex-direction:column}.dossier-document-action{justify-content:flex-start}.dossier-carte{padding:18px}.dossier-onglets a{padding:12px 9px}}

/* Dossier etudiant ouvert par l administration, tuiles colorees communes. */
.admin-campus main.dossier-admin {max-width:1440px;width:100%;padding:28px 32px;box-sizing:border-box;}
.dossier-admin .entete-page {align-items:center;gap:20px;margin-bottom:26px;flex-wrap:wrap;}
.dossier-admin .entete-raccourcis {display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.dossier-admin-grille {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
.dossier-admin-tuile {display:flex;flex-direction:column;min-width:0;overflow:hidden;border-radius:10px;text-decoration:none;color:var(--tuile-encre);background:var(--tuile-fond);box-shadow:0 2px 6px #173a4912;}
.dossier-admin-tuile:hover {box-shadow:0 6px 18px #173a4926;}
.dossier-admin-tuile:focus-visible {outline:3px solid #173a49;outline-offset:4px;}
.dossier-admin-tuile-haut {display:flex;flex-direction:column;padding:20px;flex:1;min-height:166px;}
.dossier-admin-tuile-titre {font-size:20px;font-weight:600;line-height:1.25;overflow-wrap:anywhere;}
.dossier-admin-tuile-detail {font-size:13px;line-height:1.5;margin-top:8px;}
.dossier-admin-tuile-chiffre {font-size:25px;font-weight:700;line-height:1.3;margin-top:12px;}
.dossier-admin-tuile-chiffre:empty {display:none;}
.dossier-admin-tuile-resume {font-size:12px;line-height:1.5;margin-top:auto;padding-top:10px;}
.dossier-admin-tuile-bas {display:flex;justify-content:space-between;padding:12px 20px;background:#00000014;font-size:12px;}
@media(max-width:1050px){.dossier-admin-grille{grid-template-columns:repeat(2,minmax(0,1fr));}.admin-campus main.dossier-admin{padding:24px;}}
@media(max-width:600px){.dossier-admin-grille{grid-template-columns:1fr;gap:14px;}.admin-campus main.dossier-admin{padding:20px 16px;}.dossier-admin-tuile-haut{min-height:145px;}.dossier-admin .entete-page{align-items:flex-start;}.dossier-admin .entete-raccourcis{width:100%;}}

/* Signature du reglement dans les documents personnels. */
.signature-page{max-width:1080px;}
.signature-carte{display:flex;justify-content:space-between;align-items:center;gap:24px;background:#fff;border:1px solid #d5dfe5;border-left:5px solid #8066d0;border-radius:12px;padding:22px;margin:24px 0;}
.signature-carte h2{margin:5px 0;font-size:1.2rem}.signature-carte p{margin:8px 0;max-width:68ch}.signature-carte .bouton{flex-shrink:0}
/* La carte du reglement dans Documents (2026-09-26) : sous son texte, le reglement signe, la signature et l original. */
.signature-carte-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px;}
.signature-informations,.signature-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:18px 0;}
.signature-informations>span{background:#e8eef1;padding:7px 12px;border-radius:6px;font-size:.88rem;}
.signature-texte{background:#fff;border:1px solid #dbe4e8;border-radius:12px;padding:30px;line-height:1.8;}
.signature-texte p{white-space:pre-line;max-width:90ch;margin:0 0 18px;}.signature-texte p:first-child{font-size:1.25rem;font-weight:700;}
.signature-validation{background:#f1f5ef;border:1px solid #cbdcc4;border-radius:12px;padding:26px;margin:24px 0;}
.signature-validation h2{margin-top:0}.signature-validation form{max-width:760px;}
.signature-validation input[type=text]{display:block;width:100%;max-width:480px;margin:10px 0 20px;}
.signature-accord{display:flex;align-items:flex-start;gap:12px;line-height:1.6;margin:18px 0;}.signature-accord input{flex:0 0 auto;margin-top:6px;}
.signature-alerte{background:#fff3d6;border:1px solid #eed58d;padding:16px 20px;border-radius:10px;}
@media(max-width:650px){.signature-carte{align-items:flex-start;flex-direction:column}.signature-texte,.signature-validation{padding:18px}.signature-validation button{white-space:normal;text-align:left;}}

/* Lecture du reglement : sections, reperes et signature. */
.admin-campus main.reglement-lecture{max-width:1180px;padding:30px 32px 40px;}
.rgl-entete{background:linear-gradient(120deg,#eaf3ef,#f6f8f5);border:1px solid #dce8df;border-radius:16px;padding:30px;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:22px;}
.rgl-entete h1{font-size:clamp(25px,3vw,34px);line-height:1.2;margin:10px 0 18px;letter-spacing:-.6px;}
.rgl-entete .campus-surtitre{color:#4e725d;letter-spacing:.1em;font-size:11px;}
.rgl-entete>.bouton{font-size:12px;flex-shrink:0;margin-top:5px;background:#fff;}
.rgl-reperes{display:flex;gap:8px;flex-wrap:wrap;}.rgl-reperes span{padding:6px 10px;border-radius:20px;background:#fff;color:#466157;font-size:12px;border:1px solid #dae5de;}
.rgl-sommaire{margin:0 0 28px;padding:0 4px;}.rgl-sommaire>span{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#5f737c;margin:0 0 12px;}
.rgl-sommaire>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;}
.rgl-sommaire a{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid #dce5e8;border-radius:10px;padding:14px;font-size:12px;line-height:1.5;text-decoration:none;color:#244b55;}
.rgl-sommaire a>span{color:#5b7667;font-weight:700;}.rgl-sommaire a:hover{border-color:#6c947c;background:#f4f8f4;}.rgl-sommaire a:focus-visible{outline:3px solid #537c67;outline-offset:3px;}
.rgl-contenu{display:grid;gap:24px;}.rgl-section{background:#fff;border:1px solid #dce5e8;border-radius:14px;overflow:hidden;box-shadow:0 4px 16px #173a4905;scroll-margin-top:120px;}
.rgl-section>header{display:flex;align-items:center;gap:16px;padding:22px 28px;border-bottom:1px solid #e4ece8;background:#f9fbfa;}
.rgl-section>header h2{font-size:19px;line-height:1.4;font-weight:650;margin:0;text-transform:none;}
.rgl-numero{display:flex;align-items:center;justify-content:center;flex:0 0 36px;height:36px;background:#e5efe8;color:#42654d;border-radius:10px;font-size:13px;font-weight:700;}
.rgl-section-corps{padding:24px 28px 28px;}.rgl-section-corps>p{font-size:14px;line-height:1.85;margin:0 0 17px;max-width:84ch;white-space:pre-line;}.rgl-section-corps>p:last-child{margin-bottom:0;}
.rgl-ponderations{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:22px 0 28px;}
.rgl-ponderations>div{position:relative;background:#f0f5f2;border:1px solid #dce7df;border-radius:12px;padding:20px;}.rgl-ponderations>div:nth-child(2){background:#eef4f8;border-color:#d9e5ed;}.rgl-ponderations>div:nth-child(3){background:#f4f0fa;border-color:#e5dcf1;}
.rgl-ponderations strong{display:block;font-size:25px;line-height:1.3;font-weight:700;color:#284e3c;}.rgl-ponderations p{font-size:12px;line-height:1.7;margin:10px 0 0;}.rgl-lettre{font-size:11px;color:#63746b;display:block;margin-bottom:5px;}
.rgl-options{padding:0;list-style:none;counter-reset:choix;display:grid;gap:10px;margin:20px 0 0;}.rgl-options li{counter-increment:choix;display:flex;gap:14px;padding:16px 18px;border:1px solid #e1e8eb;border-radius:10px;font-size:13px;line-height:1.75;background:#fafcfc;}.rgl-options li:before{content:counter(choix);display:flex;align-items:center;justify-content:center;flex:0 0 25px;height:25px;border-radius:50%;background:#e8eef1;color:#526a75;font-size:11px;font-weight:700;}
.rgl-section-corps .rgl-introduction{padding:16px 20px;background:#eef4f8;border-left:3px solid #98b6c5;border-radius:0 9px 9px 0;margin-bottom:24px;font-weight:500;max-width:none;}
.rgl-liste{padding-left:22px;margin:0;}.rgl-liste li{padding:8px 0 8px 7px;font-size:14px;line-height:1.8;}.rgl-liste li::marker{color:#72907b;}
.reglement-lecture .rgl-signature{background:#fff;border:1px solid #d9cdec;border-top:4px solid #8064ac;border-radius:14px;padding:28px;margin-top:28px;}.rgl-signature .campus-surtitre{color:#765498;}.rgl-signature h2{font-size:22px;margin:8px 0 14px;}.rgl-signature>p{max-width:76ch;font-size:14px;line-height:1.7;}.rgl-signature form{margin-top:24px;}.rgl-signature .signature-accord{padding:16px;background:#f5f1fa;border-radius:9px;font-size:13px;}
/* Le reglement en PDF dans sa page (2026-09-26) : le lecteur dessine chaque page du document
   (coeur/static/coeur/signature-trace.js). Sur la page de signature, la zone ou l etudiant signe au doigt, au stylet ou
   a la souris est posee exactement sur le cadre imprime ; elle ne fait pas defiler la page sous le doigt et, sans trace,
   elle se colore. Le texte en page web reste dans un volet a deplier. */
.rgl-lecteur{max-width:860px;margin:0 auto 24px;padding:14px;background:#e6ece8;border-radius:14px;}
.rgl-lecteur-attente{margin:48px 0;text-align:center;color:var(--encre-douce);}
.rgl-page{position:relative;width:100%;margin:0 0 14px;background:#fff;box-shadow:0 2px 10px #173a4922;}
.rgl-page:last-child{margin-bottom:0;}
.rgl-page>canvas{display:block;width:100%;height:100%;}
.rgl-page>.signature-cadre{position:absolute;touch-action:none;cursor:crosshair;border-radius:4px;}
.rgl-page>.signature-cadre:hover{box-shadow:0 0 0 2px #45783566;}
.signature-trace-manque .signature-cadre{background:#fff1ee99;box-shadow:0 0 0 3px var(--alerte);}
.signature-trace-gestes{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 18px;}
.rgl-texte-web{margin:24px 0;}.rgl-texte-web>summary{cursor:pointer;font-weight:600;margin:0 0 16px;}
/* Le reglement a signer d abord, en ambre : les tuiles de Examens et de Mes resultats disent pourquoi elles renvoient
   au reglement, la tuile et le menu de Documents ou il se signe le signalent ; le bandeau d une prise de role le dit sur
   sa propre ligne. */
.admin-campus .campus-tuile-verrou{display:inline-block;margin-top:10px;padding:4px 11px;border-radius:999px;background:#fff4d6;color:#5c4400;}
.pastille.pastille-verrou{background:#8a6100;}
.bandeau-role-note{flex-basis:100%;text-align:center;font-weight:600;}
@media(max-width:1000px){.rgl-entete{flex-direction:column;gap:12px;}.rgl-sommaire>div{grid-template-columns:repeat(2,minmax(0,1fr));}.rgl-ponderations>div{padding:16px;}}
@media(max-width:620px){.admin-campus main.reglement-lecture{padding:20px 14px 28px;}.rgl-entete{padding:22px 20px;}.rgl-section>header{padding:18px;gap:12px;}.rgl-section>header h2{font-size:17px;}.rgl-section-corps,.reglement-lecture .rgl-signature{padding:20px;}.rgl-ponderations{grid-template-columns:1fr;}.rgl-ponderations>div{padding:18px;}.rgl-sommaire a{padding:11px;font-size:11px;}.rgl-section-corps>p{font-size:14px;line-height:1.75;}}

/* Reference des examens de Charleroi, sans session. */
.exam-ref-page{max-width:1180px;margin-inline:auto;padding:28px 24px 48px;width:100%;box-sizing:border-box}
.exam-ref{margin:24px 0 36px;border:1px solid #dce5e8;border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 8px 28px #183d4c08;scroll-margin-top:24px}
.exam-ref-entete{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px 32px;background:#edf5f6;border-bottom:1px solid #dce5e8}
.exam-ref-surtitre{font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#467581;margin:0 0 8px}
.exam-ref-entete h2{margin:0 0 8px;font-size:1.65rem;color:#183d4c}
.exam-ref-entete p:last-child{margin:0;max-width:640px;color:#557080;line-height:1.6}
.exam-ref-total{display:flex;flex-direction:column;flex-shrink:0;gap:3px;font-size:2.4rem;font-weight:750;color:#183d4c;text-align:right}
.exam-ref-total span{font-size:.78rem;font-weight:500}
.exam-ref-annees{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding:22px 32px;background:#fafcfc}
.exam-ref-annees a{display:flex;flex-direction:column;gap:6px;border:1px solid #dce5e8;border-radius:12px;background:white;padding:14px 16px;color:#274653;text-decoration:none}
.exam-ref-annees a[aria-current]{background:#183d4c;border-color:#183d4c;color:#fff;box-shadow:0 3px 8px #183d4c18}
.exam-ref-annees span{font-size:.78rem;opacity:.85}
.exam-ref a:focus-visible{outline:3px solid #168995;outline-offset:3px}
.exam-ref-annees a:hover{border-color:#477783}
.exam-ref-corps{padding:8px 32px 24px}
.exam-ref-sous-titre{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0;border-bottom:1px solid #e5ecee}
.exam-ref-sous-titre h3{margin:0;font-size:1.15rem}
.exam-ref-sous-titre>span{font-size:.75rem;border-radius:20px;padding:6px 11px;background:#eef4f5;color:#476572}
.exam-ref-liste{list-style:none;margin:0;padding:0}
.exam-ref-liste li{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px 4px;border-bottom:1px solid #edf1f2}
.exam-ref-numero{font-size:.8rem;color:#5c737e;font-variant-numeric:tabular-nums}
.exam-ref-liste strong{font-size:.94rem;font-weight:600;color:#254453}
.exam-ref-liste a{font-size:.8rem;color:#275769;text-underline-offset:3px;padding:5px}
.exam-ref-note{font-size:.8rem;color:#5b7380;line-height:1.7;padding:16px 18px;margin:20px 0 0;border-radius:10px;background:#f5f8f9}
@media(max-width:700px){.exam-ref-page{padding:20px 14px 32px}.exam-ref-entete{padding:22px;align-items:flex-start}.exam-ref-entete h2{font-size:1.3rem}.exam-ref-total{font-size:1.8rem}.exam-ref-total span{max-width:75px}.exam-ref-annees{display:flex;overflow-x:auto;padding:16px 20px;gap:8px}.exam-ref-annees a{min-width:100px;padding:12px}.exam-ref-corps{padding:4px 20px 20px}.exam-ref-liste li{grid-template-columns:24px minmax(0,1fr);gap:8px}.exam-ref-liste a{grid-column:2;justify-self:start;padding:0}.exam-ref-sous-titre{flex-wrap:wrap}}

/* Le changement d espace reste visible au clavier et sur un petit ecran. */
.selecteur-espace { display:flex; align-items:center; gap:.65rem; margin:0; }
.selecteur-espace-titre { font-size:.8rem; font-weight:600; white-space:nowrap; }
.selecteur-espace-choix { display:flex; gap:.2rem; padding:.25rem; border:1px solid #b6c9ce; border-radius:.8rem; background:#fff; }
.selecteur-espace-choix button { margin:0; padding:.55rem .8rem; border:0; border-radius:.55rem; background:transparent; color:#193e4d; font-size:.875rem; }
.selecteur-espace-choix button[aria-pressed="true"] { background:#193e4d; color:#fff; box-shadow:0 1px 3px #193e4d33; }
.selecteur-espace-choix button:focus-visible { outline:3px solid #598649; outline-offset:2px; }
@media (max-width:760px) { .bandeau .selecteur-espace { order:3; flex-basis:100%; justify-content:center; padding:.4rem 0; } }

/* Le site affiche : visible en permanence, une couleur par site, jamais une langue. */
.selecteur-site { display:flex; align-items:center; gap:.65rem; margin:0; }
.selecteur-site-titre { font-size:.8rem; font-weight:600; white-space:nowrap; }
.selecteur-site-choix { display:flex; gap:.2rem; padding:.25rem; border:1px solid #b6c9ce; border-radius:.8rem; background:#fff; }
.selecteur-site-choix button { margin:0; padding:.55rem .8rem; border:0; border-radius:.55rem; background:transparent; color:#193e4d; font-size:.875rem; }
.selecteur-site-choix button[aria-pressed="true"] { background:#193e4d; color:#fff; box-shadow:0 1px 3px #193e4d33; }
.selecteur-site-choix button.site-fr[aria-pressed="true"] { background:#457835; }
.selecteur-site-choix button.site-nl[aria-pressed="true"] { background:#1f5f8b; }
.selecteur-site-choix button:focus-visible { outline:3px solid #598649; outline-offset:2px; }
@media (max-width:760px) { .bandeau .selecteur-site { order:3; flex-basis:100%; justify-content:center; padding:.4rem 0; } }

/* Une fiche de l autre site : dire ou elle est, et offrir le retour aux deux sites. */
.site-introuvable { max-width:40rem; margin:3rem auto; padding:0 1rem; }
.site-introuvable form { margin:1.25rem 0; }

/* Candidature publique : deux choix comparables, un seul sur petit ecran. */
.candidature-page{max-width:1060px;margin:0 auto}
.candidature-page .candidature-logo{width:104px;height:auto;display:block;margin-bottom:1rem}
.candidature-choix{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) auto;gap:1rem;align-items:end}
.candidature-choix label{display:grid;gap:.4rem;min-width:0}
.candidature-choix select{width:100%;min-width:0}
.candidature-comparaison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.candidature-comparaison>.carte{margin:0;min-width:0;padding:1.15rem}
.candidature-comparaison>.carte:has(input:checked){border-color:#477d35;box-shadow:0 0 0 2px #477d35}
.candidature-comparaison label{display:block;cursor:pointer;font-size:1rem;line-height:1.7}
.candidature-comparaison p,.candidature-comparaison li{font-size:.9rem}
.candidature-page .bareme-champs>div:last-child{grid-column:1/-1}
@media(max-width:760px){.candidature-choix,.candidature-comparaison{grid-template-columns:1fr}.candidature-page .bareme-formulaire{padding:1rem}.candidature-choix button{width:100%}}

/* Creer un acces pour une personne nouvelle (2026-09-25) : la fiche en deux groupes, indispensable et facultatif,
   le canal de l invitation, les homonymes du site ; puis la page du lien d activation a copier. */
.ag-creation{max-width:820px}.ag-bloc{border-top:1px solid #e1e7ee;margin-top:26px;padding-top:4px}.ag-bloc>h2{font-size:19px;margin:18px 0 4px;color:#183b49}.ag-fiche{margin:0}
.acces-gestion .ag-groupe{border:0;margin:18px 0 0;padding:0;min-width:0}.acces-gestion .ag-groupe>legend{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#5c6e7c;padding:0;margin:0 0 2px}
.ag-champs{display:grid;grid-template-columns:1fr 1fr;gap:2px 16px}.acces-gestion .ag-champ{margin:0;display:flex;flex-direction:column;min-width:0}.acces-gestion .ag-champ label{margin:10px 0 5px;font-size:12px;font-weight:600;color:#40586a}
.acces-gestion .ag-champ input,.acces-gestion .ag-champ select{width:100%;box-sizing:border-box;min-height:40px;margin:0;padding:9px 10px;background:#fff;border:1px solid #dce3ec;border-radius:6px;color:#183b49;font:14px/1.4 Arial,sans-serif}
.acces-gestion .ag-champ small{font-size:12px;color:#5c6e7c;margin-top:4px}.acces-gestion .ag-champ .erreur{margin:6px 0 0;padding:6px 9px;font-size:12px}.acces-gestion .ag-champ-erreur input{border-color:#b4424e}
.acces-gestion .ag-case{display:flex;gap:10px;align-items:flex-start;margin:10px 0 0;font-size:13px;color:#183b49;cursor:pointer}.acces-gestion .ag-case input{margin:2px 0 0;width:16px;height:16px;flex:none;accent-color:#48639a}
.ag-case strong{display:block;font-size:13px}.ag-case small{display:block;color:#5c6e7c;font-size:12px;margin-top:2px}.acces-gestion .ag-remise .ag-case{border:1px solid #e1e7ee;border-radius:8px;padding:10px 12px;margin:8px 0 0}
.ag-homonymes{border:1px solid #f0d9b5;background:#fff8ec;border-radius:8px;padding:12px 14px;margin:14px 0 0;color:#5b4312;font-size:13px}.ag-homonymes p{margin:0}.ag-homonymes ul{margin:8px 0;padding-left:18px}.ag-homonymes li{margin:4px 0}.ag-homonymes small{color:#7a6337}
.ag-compte-cree>p{color:#40586a;margin:16px 0 0}.ag-lien .ag-identite{margin-bottom:6px}
.ag-copie{margin:16px 0 0}.acces-gestion .ag-copie label{margin:0 0 6px;font-size:12px;font-weight:600;color:#40586a}.ag-copie-ligne{display:flex;gap:10px;align-items:stretch}
.acces-gestion .ag-copie input{flex:1;min-width:0;margin:0;padding:9px 10px;background:#f5f7f9;border:1px solid #dce3ec;border-radius:6px;color:#183b49;font:13px/1.4 monospace}.ag-copie [hidden]{display:none!important}
.ag-consignes{margin:18px 0 0;padding-left:18px;color:#40586a;font-size:13px;line-height:1.6}
@media(max-width:620px){.ag-champs{grid-template-columns:1fr}.ag-copie-ligne{flex-direction:column}.ag-confirmation-boutons{flex-wrap:wrap}}

/* L horaire de l administration, lisible de haut en bas (2026-09-25) : ce qui demande un geste en haut, chacun avec
   son bouton ; le calendrier au centre ; a cote, les chiffres de l annee et les outils, un titre et une ligne chacun. */
.ha-entete{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:6px}.ha-entete h1{margin:0;color:#183b49}
.ha-consigne{margin:6px 0 0;color:#526b76;font-size:15px}.ha-entete .bouton{margin:0;white-space:nowrap}
.ha-a-faire{background:#fff8ec;border:1px solid #f0d9b5;border-left:4px solid #db691b;border-radius:10px;padding:14px 18px;margin:16px 0}.ha-a-faire h2{font-size:16px;margin:0 0 4px;color:#8a3d09}
.ha-a-faire ul{list-style:none;margin:0;padding:0}.ha-a-faire li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid #f3e2cc}.ha-a-faire li:first-child{border-top:0}
.ha-a-faire p{margin:0}.ha-a-faire strong{display:block;font-size:15px;color:#183b49}.ha-a-faire small{display:block;font-size:13px;color:#6b5230;margin-top:2px}.ha-a-faire .bouton{margin:0;white-space:nowrap;flex:none}
.ha-mise-en-page{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}.ha-principal{min-width:0}.ha-cote{display:grid;gap:14px;margin-top:16px}
.ha-carte{background:#fff;border:1px solid #dfe7eb;border-radius:10px;padding:14px 16px}.ha-carte h2{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:#5b6f7a;margin:0 0 10px}
.ha-ok{margin:0;padding:10px 14px;background:#eaf6ee;border:1px solid #cfe8d6;border-radius:10px;color:#236343;font-size:14px}
.ha-chiffres{list-style:none;margin:0;padding:0;display:grid;gap:10px}.ha-chiffres li{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:baseline}
.ha-chiffres strong{grid-row:span 2;font-size:14px;color:#183b49}.ha-chiffres span{font-size:18px;font-weight:700;color:#183b49;text-align:right}.ha-chiffres small{font-size:12px;color:#5b6f7a;text-align:right}
.ha-outils{list-style:none;margin:0;padding:0;display:grid;gap:6px}.ha-outils a{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid #dfe7eb;border-radius:8px;color:#183b49;text-decoration:none;font-weight:600;font-size:14px}
.ha-outils a:hover,.ha-outils a:focus-visible{border-color:#db691b;background:#fffaf5}.ha-outils small{display:block;font-weight:400;font-size:12px;color:#5b6f7a;margin-top:2px}
.ha-outils .etape{display:inline-flex;flex:none;width:24px;height:24px;align-items:center;justify-content:center;border-radius:50%;background:#fff0e3;color:#b15312;font-size:13px;font-weight:700}
@media(max-width:1100px){.ha-mise-en-page{grid-template-columns:1fr}.ha-cote{margin-top:0}}
@media(max-width:700px){.ha-a-faire li{flex-direction:column;align-items:stretch}.ha-a-faire .bouton{text-align:center}}
@media print{.ha-cote,.ha-a-faire,.ha-entete .bouton{display:none}}

/* LA LARGEUR DES ECRANS : UNE SEULE REGLE POUR TOUTE L APPLICATION (2026-09-25). Demande de Max, sur la
   liste des enseignants : « c est trop petit », du vide autour, la colonne Courriel coupee a droite.
   Chaque ecran avait sa propre largeur (de 420 a 1 500 px, presque toujours centree) : le titre
   changeait de place d un ecran a l autre, et a 1 920 px la liste gardait 160 px vides de chaque cote
   tout en cachant sa derniere colonne. Desormais la page occupe toute la zone a cote du menu, avec la
   meme marge partout, et cette marge suit la taille de l ecran.
   SEULE EXCEPTION, VOULUE : ce qui se REMPLIT garde une mesure de saisie (un champ de 1 600 px ne se
   lit plus), alignee sur le titre au lieu d etre centree. Les ecrans d acces (connexion, code) et la
   candidature publique gardent leur dessin : ils sont hors de l interface. */
:root {
  --page-cote: clamp(16px, 2vw, 32px);
  --page-haut: clamp(20px, 2vw, 32px);
  --page-bas: clamp(24px, 2.5vw, 40px);
  --mesure-formulaire: 820px;
}
body.interface .zone-contenu > main:not(.acces-fond),
body.interface .zone-contenu > .messagerie-page,
body.interface .zone-contenu > .pr-page {
  width: 100%; max-width: none; min-width: 0; margin: 0;
  padding: var(--page-haut) var(--page-cote) var(--page-bas);
}
/* Le fil de la page et le pied suivent la meme marge : « Precedent » tombe au-dessus du titre. Un
   paragraphe pose hors du cadre (Reglements, avant son titre) la prend aussi, au lieu de coller au menu. */
body.interface .reperes-page,
body.interface .zone-contenu > p { padding-inline: var(--page-cote); }
body.interface .pied-application-interieur { max-width: none; margin: 0; padding-inline: var(--page-cote); }
/* Les ecrans de saisie : meme cadre, et chaque bloc garde la mesure du formulaire. La facturation
   n y entre pas : elle a fait le choix de toute la largeur, meme pour ses petits ecrans. */
body.interface .zone-contenu > main.etroit:not([data-module]) > *,
body.interface .zone-contenu > main.moyen > *,
body.interface .zone-contenu > main.formulaire-centre > *,
body.interface .zone-contenu > main.creation-enseignant > *,
body.interface .zone-contenu > main.site-introuvable > * { max-width: var(--mesure-formulaire); }
.formulaire { max-width: var(--mesure-formulaire); }
.sous-titre { max-width: 80ch; }
/* Plus d ilot centre au milieu de la page : ce qui garde une mesure s aligne sur le titre. */
body.interface .ag-confirmation,
body.interface .pr-columns.pr-personnel,
body.interface .pr-form-panel:only-child { margin-inline: 0; }
/* LES TABLEAUX SE RANGENT DANS LA LARGEUR au lieu de pousser leurs dernieres colonnes hors du cadre.
   Une cellule de texte revient a la ligne sur ses espaces, et seulement si la place manque ; un
   montant, une pastille, un code ou un bouton restent d un bloc, une adresse de courriel aussi (elle
   n a pas d espace). L ecart entre colonnes se resserre sur un portable : a 1 366 px, les dix colonnes
   des enseignants tiennent sans couper une adresse. Le defilement dans le cadre reste le dernier
   recours, sur tablette et telephone. */
.grille th, .grille td { white-space: normal; padding-inline: clamp(8px, .6vw, 12px); }
.grille .nombre, .grille .etat, .grille .mono, .grille .bouton, .grille button { white-space: nowrap; }
@media print {
  body.interface .zone-contenu > main:not(.acces-fond),
  body.interface .zone-contenu > .messagerie-page,
  body.interface .zone-contenu > .pr-page { padding: 0; }
}

/* La liste d une anomalie de l horaire (2026-09-25) : ce qu elle montre et quoi faire, le retour au calendrier en
   bouton, un bouton Corriger par seance. */
.ha-anomalie{background:#fff8ec;border:1px solid #f0d9b5;border-left:4px solid #db691b;border-radius:10px;padding:14px 18px;margin:0 0 18px}
.ha-anomalie p{margin:0}.ha-anomalie strong{display:block;font-size:17px;color:#183b49}.ha-anomalie small{display:block;font-size:13px;color:#6b5230;margin-top:2px}
.ha-anomalie .ha-consigne{margin:10px 0 12px;font-size:14px}.ha-anomalie .bouton{margin:0}
.ha-corriger{display:inline-flex;align-items:center;padding:6px 12px;border-radius:6px;background:#183b49;color:#fff;text-decoration:none;font-size:13px;font-weight:600;white-space:nowrap}
.ha-corriger:hover,.ha-corriger:focus-visible{background:#295664}
@media print{.ha-anomalie .bouton,.ha-corriger{display:none}}

/* L ACCUEIL SUR GRAND ECRAN : LES TUILES A GAUCHE, LES BLOCS DANS UNE COLONNE A DROITE (2026-09-25). Demande de
   Max, apres la largeur des ecrans : les tuiles etaient devenues trop larges, et « la colonne de droite n accueille
   pas de tuiles de couleurs ». Les tuiles gardent leurs trois colonnes et leur ordre (celui de Campus11 pour
   l administration, par rangee de trois pour l enseignant et l etudiant) sur les trois quarts de la largeur ; le
   dernier quart porte, du haut vers le bas, ce qui n est pas une tuile : le pilotage (super) puis le suivi chez
   l administration, la prochaine activite puis les points d attention chez l enseignant et l etudiant.
   LA DERNIERE RANGEE EST EN 1fr : la grille des tuiles, qui couvre toutes les rangees, y verse sa hauteur, et les
   blocs de droite gardent la leur, empiles en haut. Sans elle, la hauteur des tuiles se repartissait aussi sur les
   rangees des blocs et creusait des trous entre eux. Sous 1 280 px, la colonne serait trop etroite pour le suivi : la disposition d avant, blocs en haut. */
@media (min-width: 1280px) {
  .admin-campus main.campus-accueil:has(> .campus-grille) {
    display: grid; grid-template-columns: minmax(0, 3fr) minmax(300px, 1fr); grid-template-rows: auto auto auto 1fr;
    column-gap: 16px; row-gap: 0; align-items: start;
  }
  .admin-campus main.campus-accueil > .campus-bienvenue { grid-column: 1 / -1; grid-row: 1; }
  .admin-campus main.campus-accueil > .campus-grille { grid-column: 1; grid-row: 2 / -1; }
  .admin-campus main.campus-accueil > .pilotage-entree,
  .admin-campus main.campus-accueil > .campus-prochaine { grid-column: 2; grid-row: 2; margin: 0 0 16px; }
  .admin-campus main.campus-accueil > .campus-priorites,
  .admin-campus main.campus-accueil > .tableau-informations { grid-column: 2; grid-row: 3; margin: 0 0 16px; }
  .admin-campus main.campus-accueil > .campus-prochaine .journee-prof { margin: 0; }
  .admin-campus main.campus-accueil > .tableau-informations { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .admin-campus main.campus-accueil > .campus-priorites .campus-priorites-corps { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .admin-campus main.campus-accueil > .campus-priorites .campus-priorites-suivi { border-left: 0; border-top: 1px solid #e4ebed; padding: 12px 0 0; }
}

/* Les filtres instantanes de l horaire (2026-09-25). Demande de Max : « un filtre cliquable avec les differentes annees,
   visible et instantane ; pareil pour le site ; la recherche propose des qu ils ecrivent ». Des pastilles lisibles d un
   coup d oeil, la choisie en plein ; `horaire-filtres.js` les rejoue sur place. Les seances et les points du calendrier
   qui ne correspondent pas au choix portent `hidden` : `.hm-point` impose son affichage, d ou la regle forte. */
.ha-filtres{background:#fff;border:1px solid #dfe7eb;border-radius:10px;padding:14px 16px;display:grid;gap:10px}
.ha-choix{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ha-filtres .ha-choix-titre{display:inline-block;min-width:92px;font-size:13px;font-weight:650;color:#526b76}
.ha-pastille{display:inline-flex;align-items:center;min-height:38px;padding:6px 15px;border:1px solid #cfdbe1;border-radius:999px;background:#fff;color:#183b49;font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap}
.ha-pastille:hover,.ha-pastille:focus-visible{border-color:#183b49;background:#f4f7f8}
.ha-pastille.ha-pastille-choisie{background:#183b49;border-color:#183b49;color:#fff}
.ha-pastille.ha-pastille-choisie:hover,.ha-pastille.ha-pastille-choisie:focus-visible{background:#295664;border-color:#295664}
.ha-recherche{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0}
.ha-recherche input[type=search]{flex:1 1 260px;min-width:0;max-width:480px;margin:0}
.ha-recherche button{width:auto;margin:0}
.horaire-mix [hidden],.ha-filtres [hidden]{display:none!important}
@media(pointer:coarse){.ha-pastille{min-height:44px}}
@media(max-width:700px){.ha-filtres .ha-choix-titre{min-width:0;width:100%}}
@media print{.ha-filtres{display:none}}

/* L OFFRE EDUCATIVE (2026-09-25) : la carte des blocs en arrivant, l explorateur en ouvrant un bloc (maquettes B puis
   A retenues par Max). Les couleurs sont celles de l administration, le bleu de Campus11 : un manque est ambre, un
   bloc vide rose, ce qui est pret vert. La jauge est un <progress> : la politique de securite refuse les styles en
   ligne, la longueur d une barre ne peut donc pas venir du gabarit. */
.oe-entete{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;margin-bottom:18px}
.oe-entete h1{margin:0;color:#183b49}
.oe-surtitre{margin:0 0 6px;font-size:12px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:#2f8fab}
.oe-consigne{margin:6px 0 0;color:#526b76;font-size:15px;max-width:80ch}
.oe-page h1{overflow-wrap:anywhere}
.oe-offre{min-width:0}
.oe-annees{justify-content:flex-end}
.oe-sommaire .oe-a-voir .compte,.oe-sommaire .oe-a-voir .quoi{color:#a8490a}
.oe-zone{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
@media(min-width:1280px){.oe-zone{grid-template-columns:minmax(0,3fr) minmax(300px,1fr)}}
.oe-site{margin:6px 0 12px;padding-bottom:6px;border-bottom:1px solid #e2e7e9;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#526b76}
.oe-formation{margin:0 0 26px}
.oe-formation-titre{display:flex;align-items:baseline;justify-content:space-between;gap:6px 14px;flex-wrap:wrap;margin:0 0 12px}
.oe-formation-titre h3{margin:0;font-size:19px;color:#183b49}
.oe-formation-titre p{margin:0;color:#5e6f77;font-size:13px}
.oe-cartes{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.oe-carte{display:flex;flex-direction:column;background:#fff;border:1px solid #e2e7e9;border-radius:12px;overflow:hidden;color:inherit;text-decoration:none;box-shadow:0 2px 6px #183b490b;transition:border-color .15s,box-shadow .15s}
.oe-carte:hover,.oe-carte:focus-visible{border-color:#42a6c3;box-shadow:0 4px 14px #183b4914}
.oe-carte-haut{display:flex;flex-direction:column;gap:4px;padding:14px 16px 12px;border-top:4px solid #68b8cf}
.oe-annee-etudes{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#2f8fab}
.oe-carte-nom{font-size:16px;line-height:1.3;color:#183b49}
.oe-carte-chiffres{font-size:13px;color:#526872}
.oe-jauge{-webkit-appearance:none;appearance:none;display:block;width:100%;height:8px;margin:8px 0 2px;border:0;border-radius:999px;background:#edf2f4;color:#3f9d5a;overflow:hidden}
.oe-jauge::-webkit-progress-bar{background:#edf2f4;border-radius:999px}
.oe-jauge::-webkit-progress-value{background:#3f9d5a;border-radius:999px}
.oe-jauge::-moz-progress-bar{background:#3f9d5a;border-radius:999px}
.oe-jauge.oe-moyen::-webkit-progress-value{background:#d8962c}.oe-jauge.oe-moyen::-moz-progress-bar{background:#d8962c}
.oe-jauge.oe-faible::-webkit-progress-value{background:#d0585d}.oe-jauge.oe-faible::-moz-progress-bar{background:#d0585d}
.oe-taux{font-size:12px;color:#526872}
.oe-carte-bas{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:44px;margin-top:auto;padding:10px 16px 12px;border-top:1px solid #eef3f5}
.oe-pastille{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;line-height:1.5;white-space:nowrap}
.oe-ok{background:#e6f4ea;color:#23603f}
.oe-manque{background:#fff1d9;color:#7a4d12}
.oe-vide{background:#fbeef0;color:#963b45}
.oe-neutre{background:#eef2f5;color:#4d626c}
.oe-cote{display:grid;gap:14px;align-content:start}
.oe-encadre{background:#fff;border:1px solid #e2e7e9;border-radius:12px;padding:16px 18px;box-shadow:0 2px 7px #183b490b}
.oe-encadre h2{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:16px;color:#183b49}
.oe-nombre{display:inline-grid;place-items:center;min-width:26px;height:22px;padding:0 7px;border-radius:999px;background:#fff1d9;color:#7a4d12;font-size:12px;font-variant-numeric:tabular-nums}
.oe-liste{list-style:none;margin:0;padding:0}
.oe-liste li{padding:9px 0;border-top:1px solid #eef2f4;font-size:14px}
.oe-liste li:first-child{border-top:0}
.oe-liste a{color:#183b49;font-weight:600}
.oe-liste small{display:block;margin-top:2px;color:#5e6f77;font-size:12px}
.oe-rien{margin:0;color:#23603f;font-size:14px}
.oe-chiffres{margin:0}
.oe-chiffres div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid #eef2f4;font-size:14px}
.oe-chiffres div:first-child{border-top:0}
.oe-chiffres dt{color:#526872}
.oe-chiffres dd{margin:0;font-weight:650;color:#183b49;font-variant-numeric:tabular-nums}
/* L explorateur : l arbre du site a gauche, le bloc a droite, des 1 280 px (le tableau des cours y tient sans
   defiler). En dessous, l arbre passe au-dessus, ses blocs sur deux colonnes pour rester court. */
.oe-explorateur{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}
@media(min-width:1280px){.oe-explorateur{grid-template-columns:300px minmax(0,1fr)}}
@media(min-width:1440px){.oe-explorateur{grid-template-columns:340px minmax(0,1fr)}}
.oe-arbre{background:#fff;border:1px solid #e2e7e9;border-radius:12px;padding:12px}
@media(min-width:1280px){.oe-arbre{position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto}}
@media(max-width:1279px){.oe-branche ul{columns:2 220px;column-gap:18px}.oe-branche li{break-inside:avoid}}
.oe-arbre-tout{display:block;margin-bottom:6px;padding:8px 10px;border-radius:8px;color:#183b49;font-size:14px;font-weight:650;text-decoration:none}
.oe-arbre-tout::before{content:"\2190";margin-right:8px;color:#42a6c3}
.oe-arbre-tout:hover{background:#f1f6f8}
.oe-branche{margin:2px 0 6px}
.oe-branche>summary{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;cursor:pointer;list-style:none;font-size:14px;font-weight:650;color:#183b49}
.oe-branche>summary::-webkit-details-marker{display:none}
.oe-branche>summary::before{content:"\25B8";color:#68b8cf}
.oe-branche[open]>summary::before{content:"\25BE"}
.oe-branche>summary span{flex:1;min-width:0}
.oe-branche>summary small{font-size:12px;font-weight:400;color:#5e6f77;white-space:nowrap}
.oe-branche>summary:hover{background:#f1f6f8}
.oe-branche ul{list-style:none;margin:2px 0 0 14px;padding:0 0 0 10px;border-left:2px solid #e3eef3}
.oe-branche a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px;border-radius:7px;color:#294653;font-size:14px;text-decoration:none}
.oe-branche a:hover{background:#f1f6f8}
.oe-branche a[aria-current]{background:#e6f2f7;color:#183b49;font-weight:700;box-shadow:inset 3px 0 #42a6c3}
.oe-branche-nom{min-width:0}
.oe-point{display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:50%;background:#db691b;vertical-align:middle}
.oe-nb{flex:none;font-size:12px;color:#5e6f77;font-variant-numeric:tabular-nums;white-space:nowrap}
.oe-bloc{min-width:0;background:#fff;border:1px solid #e2e7e9;border-radius:12px;overflow:hidden}
.oe-faits{display:flex;flex-wrap:wrap;gap:8px;padding:16px 20px;border-bottom:1px solid #e2e7e9;background:linear-gradient(180deg,#f3f9fb,#fff)}
.oe-onglets{display:flex;flex-wrap:wrap;gap:4px;padding:0 12px;border-bottom:1px solid #e2e7e9}
.oe-onglets a{padding:12px 14px;border-bottom:3px solid transparent;color:#526872;font-size:14px;font-weight:600;text-decoration:none}
.oe-onglets a:hover{color:#183b49}
.oe-onglets a[aria-current]{color:#183b49;border-color:#42a6c3}
.oe-a-completer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:16px 20px;padding:10px 14px;border:1px solid #f0d9b5;border-radius:9px;background:#fff8ec}
.oe-a-completer p{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;color:#6b4a14;font-size:14px}
.oe-a-completer .bouton{margin:0}
.oe-bloc .grille{border:0;border-radius:0}
.oe-bloc .grille td a{color:#183b49;font-weight:600}
.oe-bloc .vide{margin:0}
.oe-suite{margin:0;padding:12px 20px;border-top:1px solid #e2e7e9;font-size:14px}
@media(max-width:700px){.oe-faits{padding:14px}.oe-a-completer{margin:12px}.oe-onglets a{padding:10px}}
@media print{.oe-arbre,.oe-annees,.oe-onglets,.oe-a-completer .bouton{display:none}.oe-explorateur,.oe-zone{display:block}}

/* Les periodes scolaires et leurs periodes d examens (2026-09-25). Demande de Max : « ameliorer cette page, mise en
   page, bugs », puis « rajouter aussi les periodes d examens a cet endroit ». Une carte par site, un bloc par annee :
   son etat en pastille, ses dates en clair, ses periodes d examens ; les gestes se deplient derriere un bouton. */
.periodes-page .ps-consigne{margin:4px 0 18px;color:#526b76;font-size:14px}
.ps-site{display:grid;gap:14px}
.ps-site>h2{margin:0}
.ps-annee{border:1px solid #dfe7eb;border-radius:10px;padding:14px 16px;background:#fff;display:grid;gap:10px;min-width:0}
.ps-annee-entete{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.ps-annee-entete h3{margin:0;font-size:17px;color:#183b49}
.ps-etat{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:650;background:#eef2f4;color:#526b76}
.ps-etat-en_cours{background:#e6f4ea;color:#1e6b3a}
.ps-etat-a_venir{background:#eaf2fb;color:#1f5a91}
.ps-etat-terminee{background:#eef2f4;color:#5b6f7a}
.ps-seances{margin-left:auto;font-size:13px;color:#5b6f7a}
.ps-ligne{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.ps-ligne p{margin:0}
.ps-dates{font-size:14px;color:#183b49}
.ps-geste>summary{display:inline-flex;align-items:center;min-height:36px;padding:6px 12px;border:1px solid #cfdbe1;border-radius:8px;background:#fff;color:#183b49;font-size:13px;font-weight:600;cursor:pointer;list-style:none}
.ps-geste>summary::-webkit-details-marker{display:none}
.ps-geste>summary:hover,.ps-geste>summary:focus-visible,.ps-geste[open]>summary{border-color:#183b49}
.ps-formulaire{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin-top:10px}
.ps-formulaire label{display:grid;gap:4px;font-size:12px;font-weight:600;color:#526b76}
.ps-formulaire label.ps-case{display:flex;align-items:center;gap:6px;font-size:13px;min-height:42px}
.ps-formulaire button{margin:0}
.ps-examens{border-top:1px solid #e4ebed;padding-top:10px;display:grid;gap:8px}
.ps-examens h4{margin:0;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#526b76}
.ps-session{border-left:3px solid #183b49;background:#f7f9fa;border-radius:6px;padding:8px 12px;display:grid;gap:8px;min-width:0}
.ps-session-masquee{border-left-color:#b9c6cd;background:#fbfbfb}
.ps-session-masquee strong{color:#5b6f7a}
.ps-badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;background:#e6f4ea;color:#1e6b3a}
.ps-badge-masquee{background:#f4ece4;color:#8a4b12}
.ps-gestes{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px}
.ps-gestes form{margin:0}
.ps-retirer{margin-top:10px}
.ps-vide{margin:0;font-size:13px;color:#5b6f7a}
.ps-ajouter>summary{border-style:dashed}
.ps-aide{margin:8px 0 0;font-size:12px;color:#5b6f7a}
@media(max-width:700px){.ps-seances{margin-left:0;width:100%}.ps-formulaire{align-items:stretch}.ps-formulaire label{width:100%}}
@media print{.ps-geste,.ps-gestes{display:none}}
/* PERIODES SCOLAIRES PLUS LISIBLES (2026-10-11, reprise/lots/periodes-lisibles-20261011). */
.ps-reperes{margin:0 0 18px;padding:14px 18px;border:1px solid #dfe7eb;border-radius:10px;background:#fff}
.ps-reperes h2{margin:0 0 8px;font-size:15px;color:#183b49}
.ps-reperes ul{margin:0;padding-left:18px;display:grid;gap:6px;font-size:14px;color:#33505c}
.ps-reperes strong{color:#183b49}
.ps-sites{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 18px;font-size:13px;color:#526b76}
.ps-sites a{padding:5px 12px;border:1px solid #cfdbe1;border-radius:999px;background:#fff;color:#183b49;font-weight:600;text-decoration:none}
.ps-sites a:hover,.ps-sites a:focus-visible{border-color:#183b49}
.ps-alerte{margin:0;padding:10px 12px;border-radius:8px;background:#fbf1df;color:#8f5c10;font-size:14px}
.ps-dates-longues{font-size:15px;font-weight:600;color:#183b49}
.ps-dates-longues::first-letter,.ps-dates::first-letter{text-transform:uppercase}
.ps-compte{margin:0;font-size:13px;color:#526b76}
.ps-annee-terminee{background:#fbfcfc}
.ps-session-tete{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.ps-session-tete p{margin:0}
.ps-session .ps-dates{margin:0}
.ps-indice{margin:0;font-size:13px;color:#5b6f7a}
.ps-terminees{display:grid;gap:12px}
.ps-terminees>summary{cursor:pointer;font-size:14px;font-weight:600;color:#526b76}
.ps-terminees[open]>summary{margin-bottom:12px}
.ps-gestes{align-items:center}
.ps-gestes>form>button{box-sizing:border-box;margin:0;min-height:36px;padding:6px 12px;border:1px solid #183b49;border-radius:8px;font-size:13px;font-weight:600;line-height:1.3}
.ps-gestes>form>button.discret{border-color:#cfdbe1;background:#fff;color:#183b49}
.ps-gestes>form>button.discret:hover,.ps-gestes>form>button.discret:focus-visible{border-color:#183b49}
@media(max-width:700px){.ps-gestes{flex-direction:column;align-items:stretch}.ps-gestes>form>button{width:100%}.ps-geste{width:100%}.ps-geste>summary{box-sizing:border-box;width:100%;justify-content:center;text-align:center}}

/* LES GESTES D UNE LIGNE DE TABLEAU (liste des enseignants, 2026-09-25). Quatre boutons carres a icone,
   leur nom en info-bulle et pour les lecteurs d ecran. Mesure du jour sur des longueurs reelles : des
   boutons ecrits faisaient passer les rangees de 39 a 62 px a 1 920 px de large, des icones a 45. A 1 366 px
   le tableau est deja a sa largeur minimale : la colonne reste collee a droite et le reste defile dessous,
   pour que les gestes restent visibles. Un geste hors de portee reste a sa place, en pointilles, et son
   info-bulle dit pourquoi. */
.grille th.actions, .grille td.actions { width: 1%; position: sticky; right: 0; z-index: 1; background: var(--carte); box-shadow: inset 1px 0 0 var(--trait); }
.grille tbody tr:hover td.actions { background: var(--accent-clair); }
.actions-ligne { display: flex; gap: 4px; }
.actions-ligne .geste { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--trait); border-radius: 6px; color: var(--accent-fonce); background: var(--carte); }
.actions-ligne a.geste:hover, .actions-ligne a.geste:focus-visible { border-color: var(--accent); background: var(--accent-clair); }
.actions-ligne .geste-indisponible { color: var(--encre-douce); border-style: dashed; opacity: .75; cursor: help; }
.geste-icone { width: 16px; height: 16px; flex: none; }
.geste-libelle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* LE GESTE VOIR SON ESPACE ENSEIGNANT (2026-09-28) : un bouton de formulaire (la prise de role s ecrit en session,
   donc en POST), habille comme les liens de la ligne ; son formulaire s efface de la mise en page. */
.actions-ligne .geste-formulaire { display: contents; }
.actions-ligne button.geste { margin: 0; padding: 0; min-height: 0; font: inherit; cursor: pointer; }
.actions-ligne button.geste:hover, .actions-ligne button.geste:focus-visible { border-color: var(--accent); background: var(--accent-clair); filter: none; }
.carte#droits, h2#cours { scroll-margin-top: 24px; }

/* L OFFRE EDUCATIVE, PHASE 2, LOT 1 (2026-09-25) : completer les cours la ou la fiche du bloc dit ce qui manque.
   Le formulaire d affectation tient sur une ligne au-dessus du tableau ; les gestes de ligne sont des liens discrets
   a cote de ce qu ils completent ; l editeur des parties garde la mesure d un formulaire. */
.oe-fait{margin:0 0 14px;padding:10px 14px;border:1px solid #cfe8d6;border-radius:9px;background:#eef8f1;color:#23603f;font-size:14px}
.oe-erreur{margin:0 0 14px;padding:10px 14px;border:1px solid #f1c9cd;border-radius:9px;background:#fdf1f2;color:#8c2f39;font-size:14px}
.oe-verrou{margin:0 0 14px;padding:10px 14px;border:1px solid #dce5e8;border-left:4px solid #68b8cf;border-radius:9px;background:#f5f9fa;color:#294653;font-size:14px}
.oe-invisible{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.oe-affecter{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 20px 16px;padding:10px 14px;border:1px solid #e2e7e9;border-radius:9px;background:#f8fbfc}
.oe-affecter-titre{font-size:14px;font-weight:650;color:#183b49}
.oe-affecter select{min-height:38px;max-width:100%;padding:6px 10px;border:1px solid #cfdbe1;border-radius:8px;background:#fff;font:inherit;font-size:14px}
.oe-affecter button{margin:0;white-space:nowrap}
.oe-lien-geste{margin-left:6px;color:#2f8fab;font-size:13px;font-weight:650;white-space:nowrap}
.oe-lien-geste:hover,.oe-lien-geste:focus-visible{color:#183b49}
.oe-masques{display:block;color:#7a4d12;font-size:12px;white-space:nowrap}
.oe-verrou-court{display:block;margin-top:2px;color:#5e6f77;font-size:12px}
.oe-bloc tr[id]{scroll-margin-top:24px}
.oe-parties-page>*{max-width:var(--mesure-formulaire)}
.oe-parties-cadre{margin:0 0 12px}
.oe-parties .grille td{vertical-align:middle}
.oe-champ-nom{width:100%;min-width:12rem;min-height:38px;padding:6px 10px;border:1px solid #cfdbe1;border-radius:8px;font:inherit}
.oe-champ-poids{width:6.5rem;min-height:38px;padding:6px 10px;border:1px solid #cfdbe1;border-radius:8px;font:inherit;text-align:right;font-variant-numeric:tabular-nums}
.oe-retirer{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:13px;color:#526872;white-space:nowrap}
.oe-parties button{margin-top:4px}
.oe-suite-page{margin:18px 0 0;font-size:14px}
@media(max-width:700px){.oe-affecter{margin:0 12px 12px}.oe-affecter select,.oe-affecter button{width:100%}}

/* L OFFRE EDUCATIVE, PHASE 2, LOT 2 (2026-09-25) : la structure de l offre. Les formulaires d une formation ou d un
   bloc gardent la mesure d un formulaire ; l avertissement d un renommage ou d un detachement est ambre, comme ce qui
   manque ; les gestes de structure restent des liens discrets a cote de ce qu ils touchent. */
.oe-formulaire-page>*{max-width:var(--mesure-formulaire)}
.oe-formulaire{display:grid;gap:8px;margin:0 0 8px}
.oe-formulaire label{margin:8px 0 0}
.oe-formulaire input:not([type]),.oe-formulaire select{min-height:40px;padding:8px 12px;border:1px solid #cfdbe1;border-radius:8px;background:#fff;font:inherit}
.oe-formulaire button{justify-self:start;margin-top:8px}
.oe-avertissement{margin:10px 0;padding:12px 16px;border:1px solid #f0d9b5;border-left:4px solid #db691b;border-radius:9px;background:#fff8ec;color:#6b4a14;font-size:14px}
.oe-avertissement p{margin:0 0 6px}
.oe-avertissement p:last-child{margin-bottom:0}
.oe-confirmer{display:inline-flex;align-items:center;gap:8px;margin:6px 0 0;color:#6b4a14;font-size:14px;font-weight:650}
.oe-gestes-formation{display:inline-flex;gap:4px;margin-left:10px}
.oe-ajouter-formation{margin:0 0 22px}
.oe-branche .oe-branche-ajout a{justify-content:flex-start;color:#2f8fab;font-size:13px;font-weight:650}
.oe-branche .oe-branche-ajout a::before{content:"+";margin-right:6px}
.oe-detacher{color:#9d414b}
.oe-detacher:hover,.oe-detacher:focus-visible{color:#6f2a32}
.oe-rattacher{margin-top:-6px}

/* LE DIDACTICIEL VIDEO DE LA PARTIE COURS (2026-09-25). Demande de Max : un acces « bien visible », puis « encore
   mieux mis en avant ». La carte (accueil enseignant, tete des supports de cours) : fond encre, apercu de la video,
   bouton blanc ; le jaune est la couleur du didacticiel, reprise par la pastille, l entree du menu et son icone. */
.didacticiel-carte { display: flex; align-items: center; gap: 24px; margin: 0 0 24px; padding: 18px; border-radius: 12px; background: linear-gradient(120deg, #183b49 0%, #22566b 100%); color: #fff; box-shadow: 0 10px 28px rgba(24, 59, 73, .22); }
.didacticiel-vignette { position: relative; flex: 0 0 300px; display: block; overflow: hidden; border-radius: 8px; line-height: 0; box-shadow: 0 0 0 1px rgba(255, 255, 255, .2); }
.didacticiel-vignette img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .25s ease; }
.didacticiel-vignette:hover img { transform: scale(1.04); }
.didacticiel-lecture { position: absolute; left: 50%; top: 78%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: #f5c542; box-shadow: 0 4px 14px rgba(0, 0, 0, .4); }
.didacticiel-lecture::after { content: ""; position: absolute; left: 18px; top: 14px; border-style: solid; border-width: 9px 0 9px 14px; border-color: transparent transparent transparent #183b49; }
.didacticiel-duree { position: absolute; right: 8px; bottom: 8px; padding: 2px 6px; border-radius: 4px; background: rgba(0, 0, 0, .75); color: #fff; font-size: 12px; font-weight: 600; line-height: 1.4; font-variant-numeric: tabular-nums; }
.didacticiel-texte { min-width: 0; }
.didacticiel-carte .didacticiel-nouveau { display: inline-block; margin: 0 0 8px; padding: 3px 10px; border-radius: 999px; background: #f5c542; color: #183b49; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.didacticiel-carte h2 { margin: 0 0 6px; color: #fff; font-size: 22px; line-height: 1.25; }
.didacticiel-texte > p:not(.didacticiel-nouveau) { max-width: 64ch; margin: 0 0 14px; color: rgba(255, 255, 255, .88); font-size: 14px; line-height: 1.5; }
.didacticiel-carte .didacticiel-regarder, .video-carte .didacticiel-regarder { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 10px 18px; border: 0; background: #fff; color: #183b49; text-decoration: none; }
.didacticiel-carte .didacticiel-regarder:hover, .didacticiel-carte .didacticiel-regarder:focus-visible, .video-carte .didacticiel-regarder:hover, .video-carte .didacticiel-regarder:focus-visible { background: #f5c542; color: #183b49; filter: none; }
.didacticiel-triangle { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }
@media (max-width: 700px) {
  .didacticiel-carte { flex-direction: column; align-items: stretch; gap: 16px; padding: 14px; }
  .didacticiel-vignette { flex-basis: auto; }
  .didacticiel-carte h2 { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) { .didacticiel-vignette img { transition: none; } .didacticiel-vignette:hover img { transform: none; } }
/* L entree du menu lateral : jaune pale, icone de lecture a la place du carre de couleur (ses marges negatives
   gardent les libelles alignes sur ceux des autres entrees). */
.admin-campus .campus-lien.didacticiel-menu { background: #fff4cc; color: #183b49; font-weight: 650; box-shadow: inset 0 0 0 1px #f0d77e; }
.admin-campus .campus-lien.didacticiel-menu:hover, .admin-campus .campus-lien.didacticiel-menu[aria-current=page] { background: #ffe8a0; color: #183b49; }
.didacticiel-menu-icone { position: relative; flex-shrink: 0; width: 18px; height: 18px; margin: 0 -4px; border-radius: 50%; background: #183b49; }
.didacticiel-menu-icone::after { content: ""; position: absolute; left: 7px; top: 5px; border-style: solid; border-width: 4px 0 4px 6px; border-color: transparent transparent transparent #fff; }
/* La page : la video, et a cote les etapes, qui passent dessous sur un ecran etroit. Le lien de la barre d un cours. */
.didacticiel h1 { margin-bottom: 6px; }
.didacticiel-acces { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.didacticiel-lien { font-weight: 600; }
.didacticiel-grille { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; margin: 18px 0; }
.didacticiel-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #101814; border-radius: var(--rayon); box-shadow: var(--ombre); }
.didacticiel-etapes { background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 14px; }
.didacticiel-etapes h2 { margin: 0 0 10px; font-size: 1rem; }
.didacticiel-etapes ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.didacticiel-etape { display: flex; gap: 10px; width: 100%; margin: 0; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--encre); font: inherit; text-align: left; cursor: pointer; }
.didacticiel-etape:hover, .didacticiel-etape:focus-visible { background: var(--accent-clair); }
.didacticiel-etape[aria-current="step"] { background: var(--accent-clair); color: var(--accent-fonce); font-weight: 600; }
.didacticiel-etape span { min-width: 3.2em; color: var(--encre-douce); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .didacticiel-grille { grid-template-columns: 1fr; } }

/* L OFFRE EDUCATIVE, PHASE 2, LOT 3 (2026-09-25) : creer un cours dans un bloc, et dire si le bloc recoit des
   candidatures. La ligne des candidatures prolonge les chiffres du bloc ; les cours du meme nom deja sur le site
   sont proposes dans l avertissement ambre, chacun avec son bouton de rattachement. */
.oe-candidatures{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0;padding:10px 20px;border-bottom:1px solid #e2e7e9;color:#4d6570;font-size:13px}
.oe-candidatures .oe-lien-geste{margin-left:auto}
.oe-nouveau-cours{margin-left:4px}
.oe-formulaire .oe-case{display:flex;align-items:flex-start;gap:8px;font-size:14px}
.oe-case input{margin:3px 0 0;flex:none}
.oe-existants ul{display:grid;gap:8px;margin:10px 0 0;padding:0;list-style:none}
.oe-existants li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:8px 10px;border:1px solid #f0d9b5;border-radius:8px;background:#fff}
.oe-existant-nom{font-weight:650}
.oe-existants form{margin:0 0 0 auto}
.oe-existants button{margin:0;white-space:nowrap}
@media(max-width:700px){.oe-candidatures{padding:10px 14px}.oe-candidatures .oe-lien-geste{margin-left:0}.oe-existants form,.oe-existants button{width:100%;margin:0}}

/* Les periodes d examens dans les calendriers (lot 3 des periodes d examens, 2026-09-25). Demande de Max : « visibles
   dans les calendriers », puis « ce n est pas lisible » d une barre sous chaque jour. D ou UNE BANDE NOMMEE PAR
   PERIODE, comme dans un agenda, sous les jours de chaque semaine. Elle se place par classes, la politique de securite
   refusant les styles en ligne : `.hm-col-N` sa premiere colonne, `.hm-long-N` sa longueur, `.hm-voie-N` sa ligne. Le
   violet est celui des examens : ni l orange de Charleroi ni le bleu de Gent. Un bord droit dit que la periode se
   poursuit avant ou apres ; masquee, la bande est en pointilles. La liste du mois, sous la grille, et le jour choisi
   les nomment ; dans le planning general, la liste se pose en encadre. */
.hm-semaine{grid-column:1/-1;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;padding:4px 0 8px;border-top:1px solid #edf1f3}
.hm-semaine>:not(.hm-bande){grid-row:1}
.hm-bande{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 8px;font-size:12px;font-weight:600;line-height:22px;color:#3f2a78;background:#ebe4f8;border-left:4px solid #6b4bb0;border-radius:6px}
.hm-bande.hm-suite-avant{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0}
.hm-bande.hm-suite-apres{border-top-right-radius:0;border-bottom-right-radius:0}
.hm-bande.hm-bande-masquee{background:#fff;color:#5b4a8c;font-weight:500;border:1px dashed #9a85d0;border-left:4px solid #c9bdea}
.hm-bande.hm-bande-masquee.hm-suite-avant{border-left:1px dashed #9a85d0}
.hm-col-1{grid-column-start:1}.hm-col-2{grid-column-start:2}.hm-col-3{grid-column-start:3}.hm-col-4{grid-column-start:4}.hm-col-5{grid-column-start:5}.hm-col-6{grid-column-start:6}.hm-col-7{grid-column-start:7}
.hm-long-1{grid-column-end:span 1}.hm-long-2{grid-column-end:span 2}.hm-long-3{grid-column-end:span 3}.hm-long-4{grid-column-end:span 4}.hm-long-5{grid-column-end:span 5}.hm-long-6{grid-column-end:span 6}.hm-long-7{grid-column-end:span 7}
.hm-voie-1{grid-row:2}.hm-voie-2{grid-row:3}.hm-voie-3{grid-row:4}.hm-voie-4{grid-row:5}.hm-voie-5{grid-row:6}.hm-voie-6{grid-row:7}
.hm-marque-examens{display:inline-block;width:16px;height:11px;background:#ebe4f8;border-left:4px solid #6b4bb0;border-radius:3px;flex-shrink:0}
.hm-periodes{display:grid;gap:7px;margin:14px 0 0;padding:12px 0 0;border-top:1px solid #dfe7eb;list-style:none}
.hm-periode{display:flex;align-items:flex-start;gap:9px;font-size:14px;color:#183b49}
.hm-periode-texte{flex:0 1 auto;min-width:0}
.hm-periode>.hm-marque-examens,.hm-jour-examens>.hm-marque-examens{flex:none;margin-top:.3em}
.hm-periode .hm-etat{flex:none;font-size:11px;padding:2px 7px;background:#f2eefa;border-radius:5px;color:#4a3285}
.hm-jour-examens{display:flex;align-items:flex-start;gap:8px;margin:-4px 0 12px;font-size:13px;font-weight:600;color:#3f2a78}
main>.hm-periodes{margin:4px 0 18px;padding:12px 16px;border:1px solid #e4dcf3;border-radius:8px;background:#faf8fe}
@media(max-width:700px){.hm-semaine{gap:2px}.hm-bande{padding:0 4px;font-size:11px;line-height:20px;border-left-width:3px}}

/* Les examens dates hors de leur periode (lot 4 des periodes d examens, 2026-09-25). Demande de Max : « alerte si un
   examen tombe hors periode ». Le bandeau reprend les couleurs d alerte du socle, comme la pastille « Hors periode »
   (`.etat-partial`) : il signale, il ne bloque rien. */
.examens-alerte{margin:12px 0;padding:10px 14px;border-radius:8px;background:var(--alerte-fond);color:var(--alerte);font-size:14px}
.examens-alerte a{color:inherit;font-weight:600}

/* LES VIDEOS DE PARCOURS GUIDES (2026-09-25). Demande de Max : les videos vont dans Parcours guides, une par sujet a
   venir. Une carte par video, l apercu en haut, dans une grille qui s elargit avec elles ; les guides encore utiles
   suivent, sous leur titre. */
.parcours-videos { margin: 4px 0 30px; }
.parcours-videos h2, .parcours-guides-titre { margin: 0 0 12px; font-size: 18px; }
.parcours-videos-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.video-carte { display: flex; flex-direction: column; overflow: hidden; border-radius: 12px; background: linear-gradient(160deg, #183b49 0%, #22566b 100%); color: #fff; box-shadow: 0 10px 28px rgba(24, 59, 73, .22); }
.video-carte .didacticiel-vignette { flex: none; border-radius: 0; box-shadow: none; }
.video-carte-texte { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 18px 18px; }
.video-carte h3 { margin: 0; color: #fff; font-size: 18px; line-height: 1.3; }
.video-carte-texte > p:not(.video-carte-public) { margin: 0; color: rgba(255, 255, 255, .88); font-size: 14px; line-height: 1.5; }
.video-carte-public { margin: 0; padding: 2px 9px; border-radius: 999px; background: #f5c542; color: #183b49; font-size: 12px; font-weight: 700; }
.video-carte .didacticiel-regarder { margin-top: auto; }

/* L OFFRE EDUCATIVE, PHASE 3, LOT 1 (2026-09-25) : mettre l offre au propre. Une section par site, une famille par
   cadre, les gestes en ligne dans leur colonne ; ce qui renvoie a un autre ecran reste un lien discret. */
.oe-propre-site{margin:0 0 28px}
.oe-propre-famille{margin:22px 0 0}
.oe-propre-famille h3{margin:0 0 4px;color:#183b49;font-size:17px}
.oe-propre-famille>.oe-consigne{margin:0 0 10px}
.oe-propre-geste{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0}
.oe-propre-geste select{min-height:34px;max-width:100%;padding:4px 8px;border:1px solid #cfdbe1;border-radius:8px;background:#fff;font:inherit;font-size:13px}
.oe-propre-geste button{margin:0;white-space:nowrap}
.oe-propre-renvoi{margin:0 0 10px;color:#4d6570;font-size:14px}
.oe-propre-double{margin:0 0 10px}
.oe-propre-ancien{color:#6b4a14;font-size:12px;font-weight:600}
.oe-propre-lien{color:inherit;text-decoration:none;border-radius:6px}
.oe-propre-lien:hover .quoi,.oe-propre-lien:focus-visible .quoi{text-decoration:underline}
@media(max-width:700px){.oe-propre-geste select,.oe-propre-geste button{width:100%}}

/* L OFFRE EDUCATIVE, PHASE 3, LOT 2 (2026-09-25) : supprimer un bloc ou une formation, seulement s il est vide. Ce
   qui le retient se lit en liste dans l encadre du verrou, chaque ligne avec l ecran ou le regler. */
.oe-attaches ul{margin:6px 0 0;padding-left:18px}
.oe-attaches li{margin:4px 0}

/* L OFFRE EDUCATIVE, PHASE 4, LOT 1 (2026-09-26) : preparer la rentree. La periode du site en tete, puis un tableau
   par site, une ligne par bloc, chaque case avec sa pastille et, quand elle manque, son geste a cote. */
.oe-rentree-site{margin:0 0 28px}
.oe-rentree-periode{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0 0 12px;color:#4d6570;font-size:14px}
.oe-rentree td{vertical-align:top}
.oe-rentree-formation{display:block;margin-top:2px;color:#61737b;font-size:12px}
.oe-rentree-liste{margin:6px 0 0;padding-left:18px}
.oe-rentree-lien{margin-left:0}

/* UN ETUDIANT AJOUTE A LA FEUILLE DE PRESENCES (2026-09-26). Demande de Max : un etudiant qui manque a la liste
   s ajoute depuis la liste de l ecole. Sa ligne porte une pastille « Hors inscription » (feuille de l enseignant,
   feuille et liste de l administration) ; sous la feuille, la recherche et ses resultats, un bouton par etudiant. */
.presence-hors { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #fff4cc; color: #6b4e00; border: 1px solid #f0d77e; font-size: 12px; font-weight: 600; white-space: nowrap; vertical-align: middle; }
.ajout-etudiant { margin: 16px 0; padding: 12px 14px; border: 1px dashed var(--trait); border-radius: var(--rayon); background: var(--carte); }
.ajout-etudiant summary { cursor: pointer; font-weight: 650; }
.ajout-etudiant[open] summary { margin-bottom: 8px; }
.ajout-resultats { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.ajout-resultats li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 10px; border: 1px solid var(--trait); border-radius: 8px; background: #fff; }
.ajout-resultats button { margin: 0; }

/* L OFFRE EDUCATIVE, PHASE 4, LOT 2 (2026-09-26) : l offre imprimable. A l ecran, le programme se lit comme l offre ;
   a l impression, les outils disparaissent, chaque site commence une page et un bloc ne se coupe pas. */
.oe-programme-outils{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:10px 0 0}
.oe-programme-formation{margin:22px 0 0}
.oe-programme-formation h3{margin:0 0 8px;color:#183b49;font-size:18px}
.oe-programme-bloc{margin:0 0 16px;break-inside:avoid}
.oe-programme-bloc h4{margin:0 0 6px;font-size:15px}
.oe-programme-bloc h4 small{margin-left:8px;color:#61737b;font-size:13px;font-weight:500}
@media print{.oe-programme-outils,.oe-programme .oe-annees,.oe-programme .oe-surtitre{display:none}.oe-programme-site+.oe-programme-site{break-before:page}.oe-programme .grille-cadre{overflow:visible;border:0;box-shadow:none}}

/* L OFFRE EDUCATIVE, PHASE 4, LOTS 3 ET 4 (2026-09-26) : la charge des enseignants (chaque enseignant, ses cours, leurs
   blocs et leurs seances, une jauge relative au plus charge) et l historique de l offre (ses filtres et son journal). */
.oe-charge th[scope=row]{min-width:180px;vertical-align:top;color:#183b49;font-size:14px;font-weight:650;text-transform:none;letter-spacing:0;white-space:normal}
.oe-charge th[scope=row] .oe-lien-geste{display:block;margin:4px 0 0}
.oe-charge td{vertical-align:top}
.oe-charge .oe-jauge{max-width:180px;margin-top:4px}
.oe-charge-cours{margin:0;padding:0;list-style:none}
.oe-charge-cours li{padding:3px 0}
.oe-charge-cours li+li{border-top:1px solid #eef2f4}
.oe-charge-cours small{display:block;color:#61737b;font-size:12px}
.oe-charge-partage{display:block;color:#61737b;font-size:12px}
.oe-charge-sans{margin:28px 0 0}
.oe-charge-sans h2{margin:0 0 6px;color:#183b49;font-size:18px}
.oe-charge-liste{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0;padding:0;list-style:none}
.oe-charge-liste li{padding:6px 12px;border:1px solid #e3eaee;border-radius:999px;background:#fff;font-size:14px}
.oe-historique-filtres label{display:flex;flex-direction:column;gap:4px;color:#526872;font-size:13px;font-weight:600}
.oe-historique-filtres .oe-lien-geste{align-self:center}
.oe-historique td{vertical-align:top}
.oe-historique td:first-child{white-space:nowrap;font-variant-numeric:tabular-nums}

/* LA POSITION GARDEE APRES UN FORMULAIRE (2026-09-26). coeur/static/coeur/defilement.js retablit la position apres
   un envoi ; un message nouveau reste lisible dans cette bulle, en bas de l ecran, quelques secondes. */
.defilement-message { position: fixed; left: 50%; bottom: 24px; z-index: 1000; max-width: min(92vw, 640px); padding: 12px 18px; border-radius: 10px; background: #183b49; color: #fff; box-shadow: 0 10px 28px rgba(0, 0, 0, .25); font-size: 14px; line-height: 1.4; opacity: 0; transform: translate(-50%, 16px); transition: opacity .25s ease, transform .25s ease; pointer-events: none; cursor: pointer; }
.defilement-message.defilement-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.defilement-message.defilement-erreur { background: #9e2a2a; }
@media (prefers-reduced-motion: reduce) { .defilement-message { transition: none; } }
/* PAGE DOCUMENTS DE L ETUDIANT (2026-09-26, reprise/publier_documents_etudiant.py) : la photo en vignette, une liste
   compacte par section, l etat de chaque piece en pastille, un bilan en tete. La mise en page suit la largeur du
   cadre (requetes de conteneur) : le menu lateral ouvert ou ferme n y change rien. */
/* Le dossier garde sa mesure sur un grand ecran, alignee sur le titre : la regle d origine (.dossier-personnel,
   1180 px) etait couverte par la pleine largeur de l interface. La page de signature du reglement, qui porte aussi
   cette classe, garde son dessin. */
body.interface .zone-contenu > main.dossier-personnel:not(.signature-page) > *{max-width:1180px;}
.documents-cadre{container-type:inline-size;display:grid;gap:20px;}
.documents-cadre>.signature-carte{margin:0;}
.documents-grille{display:grid;gap:20px;align-items:start;}
.documents-photo,.documents-bloc{min-width:0;background:#fff;border:1px solid #dce5e8;border-radius:12px;}
.documents-photo{padding:18px 20px;}
.documents-photo>h2,.documents-bloc>h2{display:flex;align-items:center;gap:8px;margin:0;color:#173a49;font-size:1rem;}
.documents-photo>h2{margin-bottom:14px;}
.documents-bloc>h2{padding:14px 20px;border-bottom:1px solid #e5ebed;}
.documents-photo-fiche{display:flex;align-items:center;gap:16px;}
.documents-photo-fiche+.documents-photo-fiche{margin-top:16px;padding-top:16px;border-top:1px solid #e5ebed;}
.documents-photo-image{display:block;flex:0 0 auto;box-sizing:border-box;width:88px;height:110px;object-fit:cover;border:1px solid #dce5e8;border-radius:10px;background:#eef3f5;}
.documents-photo-vide{display:flex;align-items:center;justify-content:center;color:#5e737d;font-size:1.5rem;font-weight:700;letter-spacing:.04em;}
.documents-photo-texte{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0;}
.documents-photo-texte .document-meta{margin:0;}
.documents-photo-action{white-space:nowrap;}
.documents-listes{display:grid;gap:16px;min-width:0;}
.documents-bilan{display:flex;flex-wrap:wrap;gap:8px;margin:0;}
.documents-bilan strong{margin-left:6px;font-weight:800;}
.documents-alerte,.documents-prive-note{margin:0;padding:12px 16px;border-radius:10px;}
.documents-alerte{background:#fbe4e2;color:#8f1f17;font-weight:600;}
.documents-prive-note{background:#eef2f4;color:#405f6e;}
.documents-compte{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 7px;box-sizing:border-box;border-radius:999px;background:#eef2f4;color:#405f6e;font-size:.75rem;font-weight:700;}
.documents-liste{margin:0;padding:0;list-style:none;}
.document-ligne{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:8px 14px;padding:12px 20px;}
.document-ligne+.document-ligne{border-top:1px solid #eef2f4;}
.document-type{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:#eef2f4;color:#405f6e;font-size:.66rem;font-weight:800;letter-spacing:.03em;}
.document-type-pdf{background:#fdecea;color:#b3261e;}
.document-type-image{background:#e8f0fb;color:#2b5ca3;}
.document-type-fichier{background:#eef2f4;color:#405f6e;}
.document-type-confirme{background:#e4f0e6;color:#2b6b38;font-size:1.05rem;}
.document-type-manque{background:#fff4dc;color:#8a5a00;font-size:1rem;}
.document-corps{min-width:0;}
.document-nom{margin:0;color:#173a49;font-weight:650;overflow-wrap:anywhere;}
.document-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:4px 0 0;color:#5b7480;font-size:.82rem;overflow-wrap:anywhere;}
.document-etat{display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;font-size:.75rem;font-weight:700;line-height:1.25;white-space:nowrap;}
.document-etat-approuve,.document-etat-confirme{background:#e4f0e6;color:#2b6b38;}
.document-etat-attente{background:#fdf1d8;color:#8a5a00;}
.document-etat-refuse{background:#fbe4e2;color:#b3261e;}
.document-etat-prive{background:#eef2f4;color:#405f6e;}
.document-action{grid-column:3;justify-self:end;white-space:nowrap;}
@container (min-width:760px){
 .documents-grille{grid-template-columns:240px minmax(0,1fr);}
 .documents-photo-fiche{flex-direction:column;align-items:stretch;}
 .documents-photo-image{width:100%;height:auto;aspect-ratio:4/5;}
 .documents-photo-texte{align-items:stretch;}
 .documents-photo-action{text-align:center;}
 .documents-cadre .signature-carte>div{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:28px;width:100%;}
 .documents-cadre .signature-carte>div>*{grid-column:1;}
 .documents-cadre .signature-carte>div>.signature-carte-actions{grid-column:2;grid-row:1 / span 3;margin:0;justify-content:flex-end;}
}
/* L onglet A signer compte ce qui attend, de la teinte de l annonce du menu. Sur telephone, les trois onglets se
   partagent la largeur et leur texte passe a la ligne au lieu de deborder. */
.dossier-onglet-pastille{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;margin-left:7px;padding:0 5px;box-sizing:border-box;border-radius:999px;background:#8a6100;color:#fff;font-size:.7rem;font-weight:800;line-height:1;vertical-align:1px;}
@media(max-width:560px){
 .dossier-onglets{gap:0;}
 .dossier-onglets a{flex:1 1 0;min-width:0;padding:10px 6px;text-align:center;line-height:1.25;}
}
@container (max-width:460px){
 .document-ligne{grid-template-columns:36px minmax(0,1fr);padding:12px 16px;}
 .document-type{width:36px;height:36px;}
 .document-action{grid-column:2;justify-self:start;}
 .documents-bloc>h2{padding:12px 16px;}
 .documents-photo{padding:16px;}
}
/* FINITIONS DE L ESPACE ETUDIANT (2026-09-26, reprise/publier_finitions_etudiant.py) : un cours sans contenu montre son
   panneau seul, sur toute la largeur. */
.parcours-grille.cours-explorateur.cours-vide{grid-template-columns:minmax(0,1fr);}
/* DOCUMENTS A SIGNER (2026-09-26, reprise/publier_documents_a_signer.py) : l onglet A signer liste chaque document
   du site, l administration les cree, publie leurs versions et suit les signatures. */
.signer-admin{max-width:1180px;}
.signer-liste{display:grid;gap:14px;margin:0;padding:0;list-style:none;}
.signer-carte{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 24px;padding:20px 22px;background:#fff;border:1px solid #dce5e8;border-left:5px solid #8066d0;border-radius:12px;}
.signer-carte-signe{border-left-color:#2b6b38;}
.signer-carte h2{margin:4px 0 6px;font-size:1.1rem;color:#173a49;}
.signer-carte .document-meta{margin:0;}
.signer-carte-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;}
.signer-admin-entete{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;margin-bottom:20px;}
.signer-admin-entete h1{margin:.25rem 0 .5rem;}
.signer-admin-site{margin:26px 0;}
.signer-admin-site>h2{font-size:1.1rem;color:#173a49;}
.signer-admin-liste{margin:0;padding:0;list-style:none;background:#fff;border:1px solid #dce5e8;border-radius:12px;}
.signer-admin-ligne{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 16px;padding:14px 20px;}
.signer-admin-ligne+.signer-admin-ligne{border-top:1px solid #eef2f4;}
.signer-admin-retire .signer-admin-titre{color:#5b7480;}
.signer-admin-corps{min-width:0;}
.signer-admin-titre{font-weight:700;color:#173a49;}
.signer-admin-formulaire{display:grid;gap:8px;max-width:640px;}
.signer-admin-formulaire button{justify-self:start;margin-top:8px;}
.signer-admin-rubriques{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px 18px;margin:8px 0;padding:14px 16px;border:1px solid #dce5e8;border-radius:10px;}
.signer-admin-rubriques legend{padding:0 6px;font-weight:650;}
.signer-admin-rubriques .note{grid-column:1 / -1;margin:6px 0 0;}
.signer-admin-case{display:flex;align-items:center;gap:8px;}
.signer-admin-brouillon{border-left:5px solid #8a6100;}
.signer-admin-brouillon form{display:inline-flex;margin:0;}
.signer-admin-retrait{border-color:#f0d6d3;}
@media(max-width:640px){
 .signer-carte,.signer-admin-ligne{grid-template-columns:minmax(0,1fr);}
 .signer-carte-actions{justify-content:flex-start;}
}
.signer-admin-acces{display:flex;flex-wrap:wrap;gap:10px;}
/* LE CALENDRIER DE L HORAIRE CHANGE SUR PLACE (horaire-mois.js, 2026-09-26) : l annonce du nouveau mois aux lecteurs d ecran, invisible a
   l oeil, et le mois qui se charge, estompe. */
.hm-annonce{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.horaire-mix.hm-chargement .hm-grille,.horaire-mix.hm-chargement .hm-jours{opacity:.55;transition:opacity .15s}
@media (prefers-reduced-motion:reduce){.horaire-mix.hm-chargement .hm-grille,.horaire-mix.hm-chargement .hm-jours{transition:none}}
/* LE MENU DE L ADMINISTRATION, COMPACT (2026-09-26, demande de Max : « optimiser le menu lateral »). Des lignes de 28 px sur une
   seule ligne, un menu de 252 px pour que « Stage, Dispensarium et Memoire » n y passe pas a la ligne : les 21
   entrees d une administration tiennent sur un ecran de 1366 x 768, les 21 du super-administrateur (dont
   l en-tete porte le choix du site et les prises de role) des 900 px de haut. Sur un ecran d au moins 1000 px
   de haut, les lignes reprennent 32 px et le pied reparait. Le menu mobile garde ses deux colonnes, ou le texte
   revient a la ligne. */
.interface:has(.navigation-compacte){--largeur-menu:252px}
.navigation-laterale:has(.navigation-compacte){padding:14px 8px;gap:10px}
.navigation-compacte{gap:1px}
.navigation-compacte a{min-height:28px;padding:5px 9px;border-radius:7px;font-size:13px;line-height:17px}
.navigation-compacte a[data-menu]>span:first-child{gap:8px}
.navigation-compacte a[data-menu]>span:first-child::before{width:9px;height:9px;flex-basis:9px}
.navigation-laterale .navigation-compacte a[data-menu]>span:first-child{white-space:nowrap}
.navigation-laterale:has(.navigation-compacte) .pied-navigation{display:none}
@media (min-height:1000px){.navigation-compacte a{min-height:32px;padding-top:7px;padding-bottom:7px}
  .navigation-laterale:has(.navigation-compacte) .pied-navigation{display:block;padding-top:12px}}
/* LES ESPACES ANNUELS EN TABLEAU (2026-09-27, reprise/publier_espaces_annuels.py) */
.pr-filtres{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin:0 0 6px}.pr-page .pr-filtres label{margin:0}.pr-filtres select{min-width:180px}.pr-compte{margin:0 0 0 auto;align-self:center;color:var(--encre-douce);font-size:13px}
.pr-annee{margin:22px 0 30px}.pr-annee h2{display:flex;align-items:baseline;gap:10px}.pr-annee h2 span{font-size:13px;font-weight:500;color:var(--encre-douce)}
.pr-espaces-cadre{border:1px solid #dce5e6;border-radius:12px;overflow-x:auto;background:white;box-shadow:0 5px 22px #233e4705}
.pr-espaces{width:100%;border-collapse:collapse}.pr-espaces th,.pr-espaces td{padding:12px 10px;text-align:left;border-bottom:1px solid #e6eded;vertical-align:middle}.pr-espaces thead th{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--encre-douce);background:#f8fafb;font-weight:700}.pr-espaces tbody tr:last-child>*{border-bottom:0}.pr-espaces tbody th{font-weight:700;color:#243e47;min-width:110px}
.pr-site{display:inline-block;font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px;background:#eef3f4;color:#35505f}
.pr-etat{display:inline-block;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap}.pr-etat-publie{background:#e4f2e8;color:#23693d}.pr-etat-brouillon{background:#fbf1d9;color:#7a5200}.pr-etat-termine{background:#edf0f2;color:#58686f}
.pr-avancement{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}.pr-avancement progress{width:80px;height:7px;border:0;border-radius:9px;background:#e6edef;overflow:hidden;-webkit-appearance:none;appearance:none}.pr-avancement progress::-webkit-progress-bar{background:#e6edef;border-radius:9px}.pr-avancement progress::-webkit-progress-value{background:#4f8a5f;border-radius:9px}.pr-avancement progress::-moz-progress-bar{background:#4f8a5f;border-radius:9px}
.pr-vide{color:var(--encre-douce)}.pr-espaces-actions{text-align:right}.pr-page .pr-espaces-actions .pr-button{min-height:34px;padding:6px 11px;font-size:13px;margin:3px 0 3px 6px;white-space:nowrap}
.pr-cache{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pr-espace-titre{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0;flex:1}.pr-espace-titre a{font-weight:600}.pr-espace-titre strong{font-size:15px}
@media(max-width:700px){.pr-filtres{flex-direction:column;align-items:stretch}.pr-filtres select{min-width:0}.pr-compte{margin:0}.pr-espaces thead{display:none}.pr-espaces,.pr-espaces tbody,.pr-espaces tr{display:block}.pr-espaces tr{border-bottom:1px solid #dce5e6;padding:8px 0}.pr-espaces tbody tr:last-child{border-bottom:0}.pr-espaces th,.pr-espaces td{display:flex;justify-content:space-between;align-items:center;gap:12px;border:0;padding:6px 14px}.pr-espaces [data-titre]::before{content:attr(data-titre);font-weight:600;color:var(--encre-douce);font-size:12px}.pr-espaces-actions{flex-wrap:wrap}.pr-page .pr-espaces-actions .pr-button{margin:0;flex:1}}
/* LE DOSSIER SANS TUILES ET LA BARRE DE L APERCU D UN ETUDIANT (2026-09-27, reprise/publier_dossier_etudiant.py) */
.bandeau-role-dossier{display:flex;flex-wrap:wrap;align-items:center;gap:6px}.bandeau-role-dossier>span{font-weight:600;margin-right:4px}.bandeau-role .bandeau-role-dossier a{display:inline-flex;align-items:center;min-height:28px;padding:3px 11px;border:1px solid currentColor;border-radius:6px;color:inherit;font-size:13px;font-weight:600;text-decoration:none}.bandeau-role .bandeau-role-dossier a:hover,.bandeau-role .bandeau-role-dossier a[aria-current="page"]{background:var(--role-encre);color:var(--role-fond)}
.dossier-onglets.dossier-onglets-admin{flex-wrap:wrap;gap:0 2px;margin:8px 0 22px}.dossier-onglets.dossier-onglets-admin a{flex:0 0 auto;padding:10px 12px;white-space:nowrap;text-align:left}
.registre-actions .registre-ouvrir button{white-space:normal;text-align:left}
.registre-ouvrir{display:inline;margin:0}.registre-ouvrir button{display:inline;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:none;color:var(--accent);font:inherit;text-align:left;text-decoration:underline;cursor:pointer}.registre-ouvrir button:hover{filter:none;text-decoration-thickness:2px}
/* COMPTES ET ACCES : CEUX QUI N ONT PAS ENCORE CREE LEUR COMPTE ET LES FILTRES PRATIQUES (2026-09-27,
   reprise/publier_acces_selection.py). Cinq compteurs, six colonnes de filtres, le bandeau du bouton. */
.ag-compteurs{grid-template-columns:repeat(5,minmax(0,1fr))}
.ag-compteur.ag-todo i{background:#48639a}
.acces-gestion .ag-filtres{grid-template-columns:minmax(160px,1.4fr) minmax(110px,1fr) minmax(110px,1fr) minmax(175px,1.3fr) minmax(125px,1fr) auto}
.acces-gestion .ag-tout{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0;padding:14px 20px;border-bottom:1px solid #e1e7ee;background:#f6f8fc}
.acces-gestion .ag-tout small{color:#5c6e7c;font-size:12px}
@media(max-width:1100px){.ag-compteurs{grid-template-columns:repeat(3,minmax(0,1fr))}.acces-gestion .ag-filtres{grid-template-columns:1.4fr 1fr 1fr}}
@media(max-width:620px){.ag-compteurs{grid-template-columns:1fr 1fr}.acces-gestion .ag-filtres{grid-template-columns:1fr 1fr}.acces-gestion .ag-tout{padding:12px}}
/* L ENVOI EN SERIE : LA FENETRE DE PROGRESSION (2026-09-27, reprise/publier_acces_envoi.py) */
.ag-envoi{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(24,59,73,.45)}
.ag-envoi[hidden]{display:none}
.ag-envoi-boite{width:min(440px,100%);background:#fff;border-radius:12px;padding:24px;box-shadow:0 18px 50px rgba(24,59,73,.25)}
.ag-envoi-boite h2{margin:0 0 16px;font-size:20px;color:#183b49;outline:none}
.ag-envoi-barre{display:block;width:100%;height:12px;margin:0 0 12px;border:0;border-radius:999px;background:#e6ecf4;overflow:hidden;appearance:none}
.ag-envoi-barre::-webkit-progress-bar{background:#e6ecf4;border-radius:999px}
.ag-envoi-barre::-webkit-progress-value{background:#48639a;border-radius:999px}
.ag-envoi-barre::-moz-progress-bar{background:#48639a;border-radius:999px}
.ag-envoi-boite p{margin:0 0 8px;font-size:14px;color:#183b49;font-variant-numeric:tabular-nums}
.ag-envoi-boite .note{font-size:12px;color:#5c6e7c}
/* MES RESULTATS COMME CAMPUS11 (2026-09-27, reprise/publier_resultats_affichage.py) */
.res-page{max-width:980px}
.res-filtres{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.res-filtres a{padding:6px 12px;border:1px solid #d5dde6;border-radius:999px;background:#fff;color:#35505f;text-decoration:none;font-size:13px;font-weight:600}
.res-filtres a[aria-current]{background:#48639a;border-color:#48639a;color:#fff}
.res-annee{background:#fff;border:1px solid #e0e6ed;border-radius:12px;margin:0 0 14px;overflow:hidden}
.res-entete{list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;padding:14px 18px;border-bottom:1px solid #eef2f5}
.res-entete::-webkit-details-marker{display:none}
.res-entete::before{content:"\25B8";color:#6b7c88}
.res-annee[open]>.res-entete::before{content:"\25BE"}
.res-entete h2{margin:0;font-size:19px}
.res-bloc{font-weight:600;color:#35505f;font-size:14px}
.res-resume{margin-left:auto;font-size:13px;color:var(--encre-douce)}
.res-sous{color:#9d414b;font-weight:700}
.res-bloc-titre{margin:12px 18px 0;font-weight:700}
.res-session{margin:12px 18px 4px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--encre-douce)}
.res-cours{list-style:none;margin:0;padding:0 18px 8px}
.res-cours>li{border-bottom:1px solid #eef2f5;padding:10px 0}
.res-cours>li:last-child{border-bottom:0}
.res-ligne{display:flex;align-items:center;gap:12px}
.res-nom{flex:1;font-size:15px}
.res-note{font-weight:700;font-size:16px;font-variant-numeric:tabular-nums;min-width:70px;text-align:right}
.res-etat{font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;min-width:96px;text-align:center}
.res-ok{background:#eaf6ee;color:#236343}
.res-ko{background:#fbeef0;color:#9d414b}
.res-parties{list-style:none;margin:6px 0 0 14px;padding:0 0 0 12px;border-left:2px solid #e6ecf2}
.res-parties li{display:flex;gap:12px;padding:3px 0;font-size:13px;color:#40515e}
.res-parties li span:first-child{flex:1}
.res-parties li span:last-child{font-variant-numeric:tabular-nums;min-width:70px;text-align:right}
.res-pied{margin:0;padding:10px 18px 14px;font-size:12px;color:var(--encre-douce)}
.res-legende{font-size:12px;color:var(--encre-douce)}
.res-meta{font-size:12px;color:var(--encre-douce);min-width:170px;text-align:right}
.res-source{font-size:11px;font-weight:700;padding:1px 6px;border-radius:5px;background:#eef2f9;color:#48639a}
.res-source.res-discea{background:#e9f5f3;color:#1f6b5f}
.res-cadre{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:12px 0 16px}
.res-cadre div{background:#fff;border:1px solid #e0e6ed;border-radius:10px;padding:12px 14px}
.res-cadre strong{display:block;font-size:22px}
.res-cadre span{font-size:12px;color:var(--encre-douce)}
.res-retraits{font-size:12px;color:var(--encre-douce);border:1px dashed #cfd8e1;border-radius:10px;padding:10px 14px}
@media(max-width:700px){.res-ligne{flex-wrap:wrap}.res-nom{flex-basis:100%}.res-note{text-align:left;min-width:0}.res-etat{min-width:0}.res-meta{text-align:left;min-width:0;flex-basis:100%}.res-resume{margin-left:0;width:100%}.res-cadre{grid-template-columns:1fr 1fr}}
/* PARCOURS GUIDES : LES VIDEOS DES AUTRES ESPACES A PART (2026-09-27, reprise/publier_parcours_publics.py). Chez
   l administration, ses videos restent en tete ; celles des enseignants et des etudiants viennent apres ses guides,
   dans un cadre a part, un groupe par public, chaque carte marquee de son public (titre de carte en h4 sous le titre
   du groupe). */
.parcours-autres{margin:36px 0 8px;padding:22px 24px 24px;border:1px solid #d5dde6;border-radius:14px;background:var(--carte)}
.parcours-autres>h2{margin:0 0 6px;font-size:18px}
.parcours-autres-intro{margin:0 0 20px;max-width:72ch;color:var(--encre-douce);font-size:14px;line-height:1.5}
.parcours-public{margin:0 0 24px}
.parcours-public:last-child{margin-bottom:0}
.parcours-public>h3{margin:0 0 12px;font-size:15px}
.video-carte h4{margin:0;color:#fff;font-size:18px;line-height:1.3}
/* CHAPITRE EN BROUILLON, VU D UN COUP D OEIL (2026-09-29, reprise/publier_chapitre_brouillon.py) */
.parcours-brouillon{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin:0 0 1rem;padding:.75rem 1rem;background:#fff1d9;border:1px solid #f0d49b;border-radius:.65rem;color:#805319}
.parcours-brouillon p{margin:0;flex:1 1 16rem;font-weight:600}
.parcours-brouillon form{margin:0}
.parcours-brouillon button{width:auto;margin:0}
/* LES ANNEES PRECEDENTES, EN CONSULTATION (2026-09-30, reprise/publier_annees_precedentes.py) */
.dossier-onglets.cours-annees{flex-wrap:wrap;margin:8px 0 22px}
.cours-consultation-bandeau{margin:0 0 1rem;padding:.75rem 1rem;background:#fff1d9;border:1px solid #f0d49b;border-radius:.65rem;color:#805319;font-weight:600}

/* FINITIONS VISUELLES (2026-09-30, reprise/publier_finitions_visuelles.py). Les corrections de l audit de toutes les
   pages : causes communes d abord, puis pages. */
/* LE PIED EN BAS DE L ECRAN (audit visuel du 2026-09-30). Sur une page courte, le pied flottait a mi-hauteur
   au-dessus d un aplat vide ; et le menu lateral, colle et haut d un ecran, ajoutait sa hauteur a celle du
   bandeau : chaque page courte defilait de 90 px dans le vide. La page devient une colonne qui remplit l ecran,
   la zone de contenu une colonne dont le pied prend le bas. Le menu ne depasse plus son contenu (un ecran au
   plus, toujours colle en haut) ; la colonne blanche et son filet sont peints par le cadre, sur toute la hauteur. */
body{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
body>.cadre-application,body>.cadre-simple{flex:1 0 auto;min-height:0}
.cadre-simple{display:flex;flex-direction:column}
.zone-contenu{display:flex;flex-direction:column}
.cadre-simple>.zone-contenu{flex:1 0 auto}
.zone-contenu>main{width:100%}
.zone-contenu>.pied-application{margin-top:auto}
.navigation-laterale{height:auto;max-height:100vh;max-height:100dvh}
.cadre-application{background:linear-gradient(to right,var(--carte) calc(var(--largeur-menu) - 1px),var(--trait) calc(var(--largeur-menu) - 1px),var(--trait) var(--largeur-menu),transparent var(--largeur-menu))}
body.acces .acces-fond{flex:1 0 auto;min-height:0}
@media (max-width:780px){.cadre-application{display:flex;flex-direction:column;background:none}.cadre-application>.zone-contenu{flex:1 0 auto}}

/* L EN-TETE SUR TELEPHONE, SUR UNE LIGNE. La zone du compte prenait toute la largeur : « Se deconnecter » et
   l avatar passaient seuls sur une deuxieme ligne, calee a droite, et l en-tete montait a 137 px. Elle reprend sa
   place a droite du logo, qui se fait plus petit ; elle ne passe a la ligne que si la place manque vraiment. */
@media (max-width:780px){
 body.interface .bandeau .qui{width:auto;margin-left:auto;flex-wrap:nowrap}
 body.interface .bandeau .marque{width:48px;height:40px;flex-basis:48px}
 body.interface .bandeau .marque img{width:48px}
 body.interface .bandeau{min-height:0}
}

/* UN SEUL HABIT POUR LES CHAMPS. Les champs texte etaient teintes du gris-vert du fond, les listes, les nombres et
   les dates blancs, sauf dans un formulaire ou les listes redevenaient teintees : trois habits dans un meme ecran,
   et sur le fond gris un champ teinte avait l air desactive. Tous blancs, d un bord assez marque pour se voir sur
   une carte blanche ; seul un champ en lecture seule ou desactive garde un fond gris. */
body.interface :is(input:not([type=checkbox],[type=radio],[type=hidden],[type=file],[type=submit],[type=button],[type=range],[type=color],[type=image]),select,textarea){background-color:var(--carte);border-color:#cfd8dd}
body.interface :is(input,select,textarea):is(:disabled,[readonly]){background-color:#f2f5f6;color:var(--encre-douce)}
body.interface .formulaire .a-verifier{border-color:var(--alerte)}

/* LE BOUTON DE FICHIER DANS LA CHARTE : le bouton gris du systeme devient un bouton secondaire de l application. */
input[type=file]{max-width:100%;font:inherit;font-size:14px;color:var(--encre-douce)}
input[type=file]::file-selector-button{margin:0 12px 0 0;padding:8px 14px;border:1px solid #cfd8dd;border-radius:8px;background:var(--carte);color:var(--accent-fonce);font:inherit;font-weight:600;cursor:pointer}
input[type=file]::file-selector-button:hover{background:var(--accent-clair)}

/* UN GROUPE DE CHAMPS EST UNE CARTE. Le cadre natif du navigateur (trait gris en relief, coins vifs, legende
   incrustee dans le trait) detonnait au milieu des cartes arrondies : « Ligne 1 », « Echeance 1 », « Parametres du
   suivi ». Meme bord et meme arrondi que les cartes, un fond a peine teinte, la legende en titre au-dessus. */
body.interface fieldset:not([class]){min-width:0;margin:18px 0;padding:14px 18px 18px;border:1px solid var(--trait);border-radius:var(--rayon);background:#f8fafb}
body.interface fieldset:not([class])>legend{float:left;width:100%;margin:0 0 4px;padding:0;font-size:14px;font-weight:650;color:var(--encre)}
body.interface fieldset:not([class])>legend+*{clear:both}

/* UNE CASE A COCHER DEVANT SON TEXTE. Un champ oui/non rendu par le formulaire posait son libelle, puis la case
   seule sur la ligne suivante : on ne voyait plus ce qu on cochait. La case passe devant, sur la meme ligne. */
form :is(div,p):has(> label + input[type=checkbox]){display:flex;flex-wrap:wrap;align-items:flex-start;gap:4px 10px}
form :is(div,p):has(> label + input[type=checkbox])>input[type=checkbox]{order:-1;flex:0 0 auto;width:18px;height:18px;margin:2px 0 0}
form :is(div,p):has(> label + input[type=checkbox])>label{flex:1 1 0;min-width:0;margin:0;color:var(--encre);font-size:14px}
form :is(div,p):has(> label + input[type=checkbox])>:not(label,input){flex-basis:100%}
/* Son libelle perd la marge des libelles au-dessus d un champ : la rangee la reprend, sinon la case colle au champ
   du dessus (« Supprimer » a 4 px de la liste des taux de TVA). */
form div:has(> label + input[type=checkbox]):not(:first-child){margin-top:10px}
label.case{align-items:flex-start}
label.case input[type=checkbox],label.case input[type=radio]{flex:0 0 auto;margin-top:3px}

/* LES LIBELLES DES FILTRES EN LIGNE. Pose a cote de son champ, un libelle tombait 5 a 6 px sous le texte du champ
   (sa marge de formulaire, alignee sur le bas de la rangee) : il prend la hauteur du champ, texte centre. Sur
   telephone, il passe au-dessus de son champ, au lieu de rester seul au bout de la ligne precedente ; une case a
   cocher y garde sa taille, devant son texte (elle s etirait sur toute la ligne, seule et centree). */
.note+.filtres{margin-top:14px}
.filtres>label{margin:0;align-self:flex-end;line-height:42px;white-space:nowrap}
.filtres>label:has(input){display:inline-flex;align-items:center;gap:8px;min-height:42px;line-height:1.4;white-space:normal}
@media (max-width:780px){
 .filtres>label{flex-basis:100%;line-height:1.4;margin:0 0 -6px;white-space:normal}
 .filtres>label:has(input){margin:0;min-height:0}
 .filtres input:is([type=checkbox],[type=radio]){width:auto;flex:0 0 auto}
}

/* LA GESTION DES ACCES DANS LA POLICE DE L INTERFACE : elle etait seule a imposer Arial. */
.acces-gestion{font-family:inherit}

/* LES ONGLETS SUR TELEPHONE (avec coeur/finitions.js). Une barre plus large que l ecran defile sur une ligne,
   l onglet actif amene au centre ; un fondu au bord montre qu il reste des onglets de ce cote. Les sous-rubriques
   (pastilles) se partagent la largeur au lieu de laisser la derniere seule sur une deuxieme ligne. */
@media (max-width:780px){
 .rubriques-facturation,.dossier-onglets.dossier-onglets-admin{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
 .rubriques-facturation::-webkit-scrollbar,.dossier-onglets.dossier-onglets-admin::-webkit-scrollbar{display:none}
 :is(.rubriques-facturation,.dossier-onglets-admin).defile-droite{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent)}
 :is(.rubriques-facturation,.dossier-onglets-admin).defile-gauche{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 36px),transparent)}
 :is(.rubriques-facturation,.dossier-onglets-admin).defile-gauche.defile-droite{-webkit-mask-image:linear-gradient(to right,transparent,#000 36px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to right,transparent,#000 36px,#000 calc(100% - 36px),transparent)}
 .pages-rubrique{display:flex;flex-wrap:nowrap;width:100%;border-radius:14px}
 .pages-rubrique a{display:flex;align-items:center;justify-content:center;flex:1 1 0;min-width:0;padding:7px 8px;border-radius:11px;text-align:center;line-height:1.3}
}
/* Les onglets du dossier de l etudiant se partagent la largeur du telephone et passent a la ligne (socle) : un
   libelle d une ligne restait colle en haut de son onglet, a cote d un libelle de deux. Chacun est centre, et prend
   la largeur de son texte : « Formations precedentes » tient sur une ligne des que les trois tiennent ensemble. */
@media (max-width:560px){
 .dossier-onglets:not(.dossier-onglets-admin,.cours-annees) a{position:relative;display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:center;justify-content:center}
 .dossier-onglets:not(.dossier-onglets-admin,.cours-annees) .dossier-onglet-pastille{position:absolute;top:5px;right:3px;margin:0}
 .dossier-onglets:not(.dossier-onglets-admin,.cours-annees) a:has(>.dossier-onglet-pastille){padding-right:24px}
}
/* La barre de mise en forme des messages defile de cote sur telephone (pages.json) : le meme fondu dit qu il reste
   des boutons au-dela du bord, au lieu d un « Agrandir » coupe net en « Ag ». */
@media (max-width:750px){
 .messagerie-ouverte .redaction-rang.defile-droite{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent)}
 .messagerie-ouverte .redaction-rang.defile-gauche{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 36px),transparent)}
 .messagerie-ouverte .redaction-rang.defile-gauche.defile-droite{-webkit-mask-image:linear-gradient(to right,transparent,#000 36px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to right,transparent,#000 36px,#000 calc(100% - 36px),transparent)}
}
/* UNE ADRESSE DE COURRIEL (avec coeur/finitions.js, qui pose une coupure apres « @ ») ne se coupe plus au milieu d un
   mot : la colonne qui la porte garde la largeur de ses morceaux. */
body.interface a[href^="mailto:"]{overflow-wrap:break-word;word-break:normal}
/* DEUX LIENS SEPARES PAR UN POINT MEDIAN (avec coeur/finitions.js, qui marque les liens courts) : la ligne se coupe
   apres le point, plus au milieu d un lien ; un lien plus large que la ligne passe seul a la ligne et s y coupe
   (jamais de debordement). */
.lien-entier{display:inline-block;max-width:100%}
/* Une rangee .pages qui ne porte que deux liens et leur point (pas de compteur de pages) se lit comme une phrase :
   en colonnes souples, le point flottait entre deux liens coupes chacun sur deux lignes. */
p.pages:has(>a+a):not(:has(>span)){display:block}
/* UN SURTITRE SUR DEUX LIGNES se partage en deux lignes egales, au lieu de laisser « OSTEO 1 » seul sous une ligne
   pleine. */
:is(.surtitre,.oe-surtitre,.campus-surtitre,.messagerie-surtitre,.exam-ref-surtitre),body.interface p:is(.surtitre,.oe-surtitre,.campus-surtitre,.messagerie-surtitre,.exam-ref-surtitre){text-wrap:balance}

/* L ETAT CHOISI DES RELEVES, marque comme un choix. La regle de releves-v2.css posait un contour de focus sur tout
   lien actif de la page : les onglets de la facturation portaient un cadre coupe par le bord de leur bande. */
#releves-gestion :is(.rubriques-facturation,.pages-rubrique) a[aria-current="page"]{outline:0}
#releves-gestion .actions-page a[aria-current="page"]{outline:0;border-color:var(--accent);background:var(--accent-clair);box-shadow:inset 0 0 0 1px var(--accent)}

/* UN TABLEAU TROP LARGE, SUR TELEPHONE, EN FICHES (avec coeur/finitions.js, qui ne pose .en-fiches qu a un tableau
   qui deborde de son cadre). Une ligne devient une fiche ; chaque valeur est precedee du nom de sa colonne, en
   petit, pose dans la marge gauche de la cellule : tout le contenu, meme fait de plusieurs blocs, reste dans la
   colonne des valeurs ; un nom plus long que sa colonne (« Inschrijvingsaanvragen ») s y coupe a la syllabe. Une
   cellule sans nom de colonne (les gestes) prend toute la largeur. */
@media (max-width:640px){
 table.grille.en-fiches,table.grille.en-fiches>tbody,table.grille.en-fiches>tbody>tr,table.grille.en-fiches>tbody>tr>:is(td,th){display:block;width:auto;min-width:0;max-width:none}
 table.grille.en-fiches{table-layout:auto}
 table.grille.en-fiches{border:0;border-radius:0;background:transparent}
 table.grille.en-fiches>thead{display:none}
 table.grille.en-fiches>tbody>tr{padding:12px 14px;border-bottom:1px solid var(--trait);background:var(--carte)}
 table.grille.en-fiches>tbody:last-child>tr:last-child{border-bottom:0}
 table.grille.en-fiches>tbody>tr>:is(td,th){display:flow-root;padding:4px 0 4px 124px;border:0;white-space:normal;text-align:left;font-size:14px}
 table.grille.en-fiches>tbody>tr>:is(td,th)::before{content:attr(data-libelle);float:left;width:112px;margin-left:-124px;color:var(--encre-douce);font-size:12px;font-weight:600;line-height:1.5;text-transform:none;letter-spacing:0;overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}
 table.grille.en-fiches>tbody>tr>:is(td,th)[data-libelle=""]{padding-left:0}
 table.grille.en-fiches>tbody>tr>:is(td,th)[data-libelle=""]::before{content:none}
 table.grille.en-fiches>tbody>tr>th[scope=row]{padding:0 0 6px;font-size:15px;font-weight:650;color:var(--encre)}
 table.grille.en-fiches>tbody>tr>th[scope=row]::before{content:none}
 table.grille.en-fiches>tbody>tr>:is(td,th):is(:empty,[data-vide]){display:none}
 table.grille.en-fiches .nombre{text-align:left}
 table.grille.en-fiches tr:is(.ligne-retard,.ligne-crediteur,.ligne-payee,.ligne-partielle)>td{background:transparent}
 table.grille.en-fiches tr.ligne-retard{background:var(--alerte-fond)}
 table.grille.en-fiches tr.ligne-crediteur{background:var(--accent-clair)}
 table.grille.en-fiches tr.ligne-payee{background:#e4f0e6}
 table.grille.en-fiches tr.ligne-partielle{background:#fdf3dc}
}

/* LES EN-TETES DU REGISTRE DES ETUDIANTS ne coupent plus un mot en plein milieu (« ACTUELL / E ») : la colonne de
   l annee d etudes s elargit un peu, prise sur celle du contact. */
.registre-tableau thead th{overflow-wrap:normal}
.registre-tableau thead th:nth-child(3){width:12%}
.registre-tableau thead th:nth-child(6){width:19%}

/* « ACCUEIL » N EST PAS UNE RUBRIQUE ACTIVE. En tete du menu, il portait le fond et le gras de la rubrique ouverte :
   deux entrees semblaient choisies a la fois. Il devient un bouton de retour, bord fin, sans fond. */
.admin-campus .campus-retour{background:transparent;box-shadow:inset 0 0 0 1px #dce5e8;font-weight:600}
.admin-campus .campus-retour:hover{background:#f5f8f9}
/* ACCUEIL ETUDIANT ET ENSEIGNANT, visuel valide le 03/10/2026. */
.admin-campus .campus-retour.campus-accueil-retour{width:100%;min-height:48px;gap:10px;padding:8px 12px 8px 9px;border:1px solid #1e4b62;border-radius:10px;background:#234f65;color:#fff;font-size:14px;font-weight:650;line-height:20px;box-shadow:0 3px 7px #16394d1a;transition:background .16s,box-shadow .16s,transform .16s}
.campus-accueil-retour .accueil-maison{display:flex;align-items:center;justify-content:center;width:30px;height:30px;flex:none;background:#ffffff18;border-radius:7px}
.campus-accueil-retour .accueil-maison svg{display:block;width:18px;height:18px}
.campus-accueil-retour .accueil-fleche{display:flex;align-items:center;margin-left:auto;opacity:.65;transition:transform .16s,opacity .16s}
.campus-accueil-retour .accueil-fleche svg{display:block;width:15px;height:15px}
.admin-campus .campus-retour.campus-accueil-retour:hover{background:#193f54;color:#fff;box-shadow:0 5px 10px #16394d24;transform:translateY(-1px)}
.campus-accueil-retour:hover .accueil-fleche{opacity:1;transform:translateX(2px)}
.admin-campus .campus-retour.campus-accueil-retour:active{transform:translateY(0);box-shadow:none}
@media(prefers-reduced-motion:reduce){.admin-campus .campus-retour.campus-accueil-retour,.campus-accueil-retour .accueil-fleche{transition:none;transform:none}.admin-campus .campus-retour.campus-accueil-retour:hover,.campus-accueil-retour:hover .accueil-fleche{transform:none}}

/* LES LISTES LIBELLE / VALEUR SANS CLASSE (fiche d un releve, detail d une facture, acces d un enseignant) gardaient
   le retrait du navigateur : chaque valeur decalee de 40 px sous son libelle. Libelle en petit gris, valeur dessous,
   sans retrait. */
body.interface main dl:not([class]){margin:0 0 12px}
body.interface main dl:not([class])>dt{margin:10px 0 2px;color:var(--encre-douce);font-size:12px;font-weight:600}
body.interface main dl:not([class])>dt:first-child{margin-top:0}
body.interface main dl:not([class])>dd{margin:0;overflow-wrap:anywhere}
/* Dans une grille (fiches en deux colonnes, synthese du pilotage), libelle et valeur restent cote a cote : les marges
   de la liste empilee les decalaient de 4 a 6 px. Ils partagent maintenant leur ligne de base. */
@media (min-width:781px){body.interface main .deux-colonnes dl:not([class]){align-items:baseline}body.interface main .deux-colonnes dl:not([class])>dt{margin:0}}
@media (min-width:641px){body.interface main .pilotage-synthese dl:not([class]){align-items:baseline}body.interface main .pilotage-synthese dl:not([class])>dt{margin:0}}

/* LES CHAMPS QUE LA REGLE GENERALE OUBLIAIT (mois, courriel, telephone, adresse, date et heure) gardaient le dessin
   du navigateur : police a chasse fixe, bord noir en relief. Meme habit que les autres. */
body.interface :is(input[type=month],input[type=week],input[type=datetime-local],input[type=tel],input[type=url],input[type=email]){padding:9px 12px;font:inherit;color:var(--encre);border:1px solid #cfd8dd;border-radius:8px}
/* Les champs de date et d heure mesuraient 46 px a cote des listes et des boutons de 42 px (bord haut qui depasse
   de 4 px dans les rangees de filtres) : le navigateur ajoutait 1 px au-dessus et au-dessous du texte. Ils tiennent
   dans la hauteur commune. */
body.interface input:is([type=date],[type=time],[type=month],[type=week],[type=datetime-local]){padding-top:7px;padding-bottom:7px}
body.interface input:is([type=date],[type=time],[type=month],[type=week],[type=datetime-local])::-webkit-datetime-edit{padding-top:0;padding-bottom:0}
/* Le champ actif porte un seul cadre : l anneau de l accent se pose sur son bord, au lieu d un double contour (anneau,
   filet blanc, bord gris) plus lourd que tout le formulaire, des le chargement quand le champ a le focus. */
body.interface :is(input:not([type=checkbox],[type=radio],[type=submit],[type=button],[type=file],[type=range],[type=color]),select,textarea):focus-visible{outline-offset:-1px}

/* UNE LISTE DEROULANTE GARDE SA FLECHE A PART : un long choix (« Anatomie viscerale · Osteopathie - formation de
   base ») passait sous la fleche. */
body.interface select{padding-right:34px;text-overflow:ellipsis}

/* DES CASES ET DES BOUTONS RADIO A LA TAILLE DU DOIGT : 13 px, trop petits et trop serres sur telephone. */
body.interface input:is([type=checkbox],[type=radio]){width:18px;height:18px;flex:0 0 auto}

/* UN BOUTON SECONDAIRE SE LIT COMME UN BOUTON : texte gris sur fond de page, il avait l air desactive. */
body.interface main button.discret:not(:disabled){background:var(--carte);color:var(--accent-fonce);border-color:#cfd8dd}
body.interface main button.discret:not(:disabled):hover{background:var(--accent-clair)}

/* PAS DE MOT SEUL SUR LA DERNIERE LIGNE d un titre ou d un paragraphe (« geste. », « 2027 », « rentree. ») : les
   titres equilibrent leurs lignes, les paragraphes evitent l orphelin. */
body.interface :is(h1,h2,h3,.sous-titre){text-wrap:balance}
body.interface :is(p,li,dd,.note){text-wrap:pretty}

/* ── PAGES ── */

/* LES GESTES D UNE INSCRIPTION A FACTURER, l un sous l autre : ils etaient colles (« Appliquer le tarifPreparer une
   facture »), le second coupe sur deux lignes. */
.grille td.gestes-ligne{white-space:nowrap}
.grille td.gestes-ligne>a{display:block;width:max-content;max-width:100%}
.grille td.gestes-ligne>a+a{margin-top:6px}

/* LES GESTES DE L OFFRE EDUCATIVE passent a la ligne. Colles les uns aux autres sans espace, ils formaient une ligne
   insecable plus large que l ecran : la page mesurait 770 px de large sur un telephone de 390 (925 en neerlandais). */
.oe-consigne:has(>.oe-lien-geste){display:flex;flex-wrap:wrap;align-items:baseline;column-gap:18px;row-gap:4px}
.oe-consigne>.oe-lien-geste{margin-left:0}
.oe-formation-titre p:has(.oe-gestes-formation){display:flex;flex-wrap:wrap;align-items:baseline;column-gap:14px;row-gap:4px}
.oe-gestes-formation{display:inline-flex;flex-wrap:wrap;gap:4px 14px;margin-left:0}
.oe-gestes-formation>.oe-lien-geste{margin-left:0}
@media (max-width:780px){.oe-lien-geste{white-space:normal}}

/* LES FILTRES DES COURS (supports, cours, cours des collegues) : des paires libelle et liste posees a la suite ; au
   retour a la ligne, un libelle restait seul au bout de la ligne, sa liste sur la suivante. Sur grand ecran, les
   paires se rangent en grille (trois par rangee, deux sur un ecran moyen, libelles alignes) ; sur telephone, chaque
   libelle au-dessus de son champ, en pleine largeur. */
@media (min-width:781px){
 .filtre-cours:has(select~select~select){display:grid;grid-template-columns:repeat(3,max-content minmax(0,1fr));align-items:center;gap:10px 12px}
 .filtre-cours:has(select~select~select)>label{margin:0}
 .filtre-cours:has(select~select~select)>:is(select,input){width:100%;min-width:0}
 .filtre-cours:has(select~select~select)>button{justify-self:start}
}
@media (min-width:781px) and (max-width:1199px){
 .filtre-cours:has(select~select~select){grid-template-columns:repeat(2,max-content minmax(0,1fr))}
}
@media (max-width:780px){
 .filtre-cours{flex-direction:column;align-items:stretch;gap:4px}
 .filtre-cours>label{margin:10px 0 0}
 .filtre-cours>label:first-child{margin-top:0}
 .filtre-cours>:is(select,input:not([type=checkbox],[type=radio]),button){width:100%}
 .filtre-cours>button{margin-top:10px}
 .filtre-cours>label:has(input){display:flex;align-items:center;gap:8px}
}

/* LE TITRE DE LA CONNEXION se coupait au milieu de sa seconde phrase (« Votre ecole. Votre » / « espace. »). */
.connexion-presentation h2{text-wrap:balance}

/* LES CHIFFRES CLES SUR UNE MEME LIGNE DE PIED : le premier chiffre, plus grand, faisait descendre son libelle de
   13 px sous les autres (offre, releves, suivi des factures, enseignants). Les blocs s alignent par le bas : les
   libelles sont sur une meme ligne, et le premier chiffre garde sa taille de chiffre principal. */
.sommaire{align-items:flex-end}

/* UNE PRECISION SOUS UNE VALEUR DE TABLEAU passe a la ligne : « Examen cliniqueSeminaire 2 », « BiomecaniqueSeminaire
   2Le rachis lombaire » etaient colles dans le planning. */
.grille td>span.note{display:block;margin:2px 0 0}

/* LES FILTRES DES COMPTES ET ACCES SUR UN TELEPHONE ETROIT, UN PAR LIGNE : sur deux colonnes de 165 px, « Toutes les
   annees » se lisait « Toutes les ann... ». */
@media (max-width:420px){.acces-gestion .ag-filtres{grid-template-columns:minmax(0,1fr)}.acces-gestion .ag-filtres>*{grid-column:1/-1}}

/* UN FORMULAIRE EN CARTE SOUS SON TITRE : 24 px entre le titre et la carte, comme Mes reglages (la carte d une annonce
   touchait presque le titre). Le premier libelle d un document a signer perd sa marge haute : 40 px au-dessus de
   « Site » contre 21 px sur les cotes. */
main.moyen>h1+form.carte.formulaire{margin-top:24px}
form.carte.signer-admin-formulaire>label:first-of-type{margin-top:0}

/* PAGES, UNE A UNE (lots/finitions-visuelles/pages.json). */

/* LA LISTE DES FACTURES RESTE UN TABLEAU JUSQU A 1 024 PX (decision de Max du 14/10, audit M42 ; tableau-v1.css la
   passe en fiches sous 1 500 px, ces regles l en retirent). Paliers mesures a l apercu, noms longs compris : huit
   colonnes de 1 024 a 1 199 px (sans Site, Bloc, Date, Communication ni Paye), neuf de 1 200 a 1 599, les treize
   resserrees de 1 600 a 1 700 (le tableau ordinaire y coupait la colonne Actions). Le tri par les titres de colonne
   remplace le choix de tri des fiches. */
@media (min-width:1024px) and (max-width:1700px){
 #facturation-gestion #factures-liste{display:table;font-size:13px}
 #facturation-gestion #factures-liste>tbody{display:table-row-group}
 #facturation-gestion #factures-liste>thead{position:static;width:auto;height:auto;overflow:visible;clip-path:none}
 #facturation-gestion #factures-liste thead a{visibility:visible}
 #facturation-gestion #factures-liste>tbody>tr{display:table-row;border-bottom:0}
 #facturation-gestion #factures-liste>:is(thead,tbody)>tr>:is(th,td){display:table-cell;padding:9px 5px;white-space:nowrap;overflow-wrap:normal}
 #facturation-gestion #factures-liste>:is(thead,tbody)>tr>:is(th,td:is(:nth-child(2),:nth-child(3),:nth-child(5),:last-child)){white-space:normal}
 #facturation-gestion #factures-liste>tbody>tr>td.nombre{text-align:right}
 #facturation-gestion #factures-liste>tbody>tr>td::before{content:none}
 #facturation-gestion #factures-liste>tbody>tr>td:last-child a{margin-right:10px;padding:2px 0}
 #facturation-gestion .factures-tri-mobile{display:none}
}
@media (min-width:1024px) and (max-width:1599px){
 #facturation-gestion #factures-liste>:is(thead,tbody)>tr>:is(th,td):is(:nth-child(5),:nth-child(6),:nth-child(8),:nth-child(10)){display:none}
}
@media (min-width:1024px) and (max-width:1199px){
 #facturation-gestion #factures-liste>:is(thead,tbody)>tr>:is(th,td):nth-child(4){display:none}
 #facturation-gestion #factures-liste>:is(thead,tbody)>tr>:is(th,td){padding:9px 4px}
}

/* LES DEUX GESTES DES FACTURES ET LA LEGENDE DES TEINTES. « Nouvelle facture ou avoir » (42 px) et « Exporter la
   selection en CSV » (36 px) n avaient ni la meme hauteur ni d ecart (4 px), et la legende collait dessous (3 px) :
   meme hauteur, 10 px entre eux, 16 px avant la legende. Chaque pastille prend un contour de sa teinte, pour qu un
   fond presque blanc (« Paye en trop ») se distingue du fond de page. Sur telephone, les deux gestes en pleine largeur,
   le titre de la legende sur sa ligne et les teintes sur deux colonnes. */
#facturation-gestion>p.gestes{gap:10px;margin:0 0 16px}
#facturation-gestion>p.gestes>a.tdb-bouton{min-height:42px}
#facturation-gestion .tdb-teinte::before{width:16px;height:16px;border-color:var(--encre-douce)}
#facturation-gestion .tdb-teinte.ligne-payee::before{border-color:#2b6b38}
#facturation-gestion .tdb-teinte.ligne-crediteur::before{border-color:var(--accent)}
#facturation-gestion .tdb-teinte.ligne-partielle::before{border-color:#8f5c10}
#facturation-gestion .tdb-teinte.ligne-retard::before{border-color:var(--alerte)}
@media (max-width:640px){
 #facturation-gestion>p.gestes{flex-direction:column;align-items:stretch}
 #facturation-gestion>p.gestes>a{display:flex;align-items:center;justify-content:center;text-align:center}
 #facturation-gestion>.tdb-legende{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px}
 #facturation-gestion>.tdb-legende>strong{grid-column:1/-1}
}

/* « REINITIALISER » A MI-HAUTEUR DES CHAMPS (factures, brouillons, releves, inscriptions a facturer) : pose en fin de
   rangee et aligne sur son bas, le lien tombait 5 a 9 px sous le texte des champs. Il prend leur hauteur, texte
   centre, comme leurs libelles. */
main[data-module="facturation"] .filtres>a{align-self:flex-end;line-height:42px}

/* A TRAITER, PUIS LE SOMMAIRE DES FACTURES. La phrase d aide collait aux taches (5 px) alors que 60 px separaient la
   legende du titre : 12 px sous la phrase, un titre plus proche. Sur telephone, les trois taches prenaient trois
   largeurs a 5 px l une de l autre : pleine largeur, 10 px entre elles ; et le sommaire se rangeait en 2, 2 et 1
   blocs decales : le nombre de documents sur sa ligne, puis les montants deux par deux, en colonnes egales. */
#facturation-gestion #tableau>section>h2{margin-top:8px}
#facturation-gestion #tableau>section>.note{margin-bottom:12px}
@media (max-width:640px){
 #facturation-gestion #tableau>section>.actions-page{flex-direction:column;align-items:stretch;gap:10px}
 #facturation-gestion #tableau>.sommaire{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}
 #facturation-gestion #tableau>.sommaire>div:first-child{grid-column:1/-1}
}

/* LES FILTRES DES FACTURES SUR TELEPHONE, DEUX PAR RANGEE : cinq listes l une sous l autre repoussaient la premiere
   facture a pres de deux ecrans du titre. Site et annee, etat et type cote a cote (la seconde colonne un peu plus
   large, pour « Toutes les annees »), la recherche en pleine largeur. Sous 380 px, les listes restent empilees. */
@media (min-width:380px) and (max-width:640px){
 #facturation-gestion .filtres{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:10px 12px;align-items:end}
 #facturation-gestion .filtres>div{width:auto;min-width:0}
 #facturation-gestion .filtres>.tdb-champ-large{grid-column:1/-1}
 #facturation-gestion .filtres>a{grid-column:1/-1;justify-self:end;line-height:1.6}
}

/* LES CHIFFRES D UN SOMMAIRE SUR UNE MEME LIGNE (factures, releves bancaires, suivre des factures) : le premier chiffre,
   plus grand, poussait sa legende 12 a 13 px plus bas que les autres (« 4 » et « 5 275,00 », « 5 » et « 9 885,50 »).
   Les legendes partagent leur ligne et les chiffres posent dessus. */
main[data-module="facturation"] .sommaire{align-items:flex-end}
main[data-module="facturation"] .sommaire .compte{line-height:1.15}

/* LES TABLEAUX EN CARTE DE LA FACTURATION (tarifs, paiements en ligne, relances) portent aussi la classe grille (voir
   leurs gabarits) : sur telephone, coeur/finitions.js les met en fiches comme les autres, au lieu de les laisser
   coupes au bord droit de leur carte sans indice de defilement (leurs en-tetes restent sur une ligne, pour que le
   debordement se voie). Sur grand ecran, ils gardent leur dessin : pas de second cadre dans la carte, montants a
   droite, premiere colonne alignee sur le titre de la carte ; leurs en-tetes prennent les petites capitales des
   autres tableaux de la facturation. */
table.tdb-tableau.grille{border:0;border-radius:0;background:transparent}
table.tdb-tableau.grille:not(.en-fiches)>:is(thead,tbody)>tr>:is(th,td){padding-inline:12px}
table.tdb-tableau.grille:not(.en-fiches)>:is(thead,tbody)>tr>:is(th,td):first-child{padding-left:20px}
table.tdb-tableau.grille:not(.en-fiches)>thead>tr>th{text-transform:uppercase;letter-spacing:.04em}
table.tdb-tableau.grille:not(.en-fiches) td.tdb-montant{text-align:right}
@media (max-width:640px){table.tdb-tableau.grille>thead>tr>th{white-space:nowrap}}

/* LA RECHERCHE DES TARIFS ET DES PAIEMENTS EN LIGNE. Chaque champ heritait la petite police de son libelle (12 px), et
   le bouton Filtrer tombait 4 px sous les listes, aligne sur la marge basse des libelles : champs a la taille des
   autres, libelles sans marge basse. Sur telephone, les champs en pleine largeur, l un sous l autre ; la recherche des
   paiements garde son champ de texte et sa liste des sites cote a cote (la liste, plus large, laissait 80 px vides) ;
   le bouton dessous. */
.tdb-recherche>label{margin-bottom:0}
.tdb-recherche>label>:is(input,select){font-size:15px;line-height:1.4}
@media (max-width:640px){
 .tdb-filtres>.tdb-recherche{display:grid;grid-template-columns:minmax(0,1fr);gap:10px 12px;width:100%}
 .tdb-filtres>.tdb-recherche:has(>label>input){grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
 .tdb-recherche>label>:is(input,select){width:100%;min-width:0}
 .tdb-recherche>.tdb-bouton{grid-column:1/-1;justify-self:start}
}

/* LES ETATS DES PAIEMENTS EN LIGNE SUR TELEPHONE : cinq pastilles passaient sur trois rangees irregulieres dans un
   cadre en pilule devenu un gros bloc. Deux colonnes egales, un cadre aux coins adaptes, la derniere pastille seule
   en pleine largeur. */
@media (max-width:640px){
 .tdb-filtres>.tdb-etats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;border-radius:14px}
 .tdb-etats>button{border-radius:11px;line-height:1.3;text-align:center}
 .tdb-etats>button:last-of-type:nth-of-type(odd){grid-column:1/-1}
}

/* « SUIVRE DES FACTURES » HORS DU TEXTE (Delais et suivi des reglements) : pose dans le paragraphe, le bouton suivait
   le point final a 7 px et, sur telephone, terminait la derniere ligne en decalant sa hauteur. Il passe dessous, 12 px
   plus bas. */
main[data-module="facturation"]>p.note>a.tdb-bouton{display:flex;width:fit-content;margin-top:12px}

/* L EXAMEN D UNE CANDIDATURE. Le lien « Precedent » du contenu doublait le bouton « Precedent » de la barre du haut,
   qui mene au meme endroit (la liste des candidatures), et collait au titre : il se tait, comme le fil d Ariane du
   contenu (.interface main > .fil). Le titre s ecarte de la carte (17 px), le paragraphe d aide garde la mesure d un
   formulaire au lieu de s etaler sur 1 100 px, et la liste des fiches passe sous son libelle au lieu d y coller. */
main[data-module="facturation"]>a:first-child:has(+h1){display:none}
main[data-module="facturation"]>a:first-child+h1{margin-bottom:24px}
main[data-module="facturation"]:has(>a:first-child+h1)>p{max-width:var(--mesure-formulaire)}
main[data-module="facturation"]:has(>a:first-child+h1) form>label>select{display:block;margin-top:6px}

/* UN TABLEAU QUI NE TIENT SUR TELEPHONE QU EN CASSANT SES EN-TETES PASSE EN FICHES (lignes du document a verifier,
   candidatures) : leurs titres de colonnes tombaient sur trois ou quatre lignes (« PRIX / UNITAIRE / HORS TVA, / EUR »,
   « MONTANT / TOTAL EN / EUR ») et ecrasaient les colonnes. Ils restent sur une ligne ; le tableau qui deborde alors
   de son cadre est mis en fiches par coeur/finitions.js. */
@media (max-width:640px){
 main[data-module="facturation"] .deux-colonnes>section.carte>.grille-cadre>table.grille>thead>tr>th,
 main[data-module="facturation"]:has(>h1+nav.pages-rubrique) table.grille>thead>tr>th{white-space:nowrap}
}

/* LES TARIFS A CHOISIR POUR UN DOSSIER (Accepter et facturer) : les boutons collaient (4 px entre les colonnes, 6 entre
   les rangees, 6 sous l aide) et suivaient la longueur de leur texte, si bien que la seconde colonne ne partait pas au
   meme endroit d une rangee a l autre. Deux colonnes egales, 12 px d ecart, 16 px sous l aide ; chaque bouton porte son
   profil puis, dessous, son montant en gras. Sur telephone, une colonne. */
main[data-module="facturation"] section.carte>div.gestes:has(>a.bouton.discret){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
main[data-module="facturation"] section.carte>div.gestes>a.bouton.discret{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin:0;text-align:left}
main[data-module="facturation"] section.carte>div.gestes>a.bouton.discret>strong{font-size:16px}
@media (max-width:640px){main[data-module="facturation"] section.carte>div.gestes:has(>a.bouton.discret){grid-template-columns:minmax(0,1fr)}}

/* LE GESTE PRINCIPAL D UNE LISTE SE DETACHE DE L INTRODUCTION ET DE CE QUI LE SUIT (brouillons, frais annexes, releves
   bancaires) : « Nouvelle facture ou avoir », « Ajouter un frais », « Importer des extraits de compte » collaient au
   texte (3 a 6 px) et au tableau ou au depliant suivant (1 a 7 px). 16 px de part et d autre. */
main[data-module="facturation"]>p.note+p.gestes,main[data-module="facturation"]>p.gestes+p.gestes{margin:16px 0}

/* LES FILTRES DES BROUILLONS A UNE MEME LARGEUR : la liste Site faisait 128 px et Situation 364 px pour le seul mot
   « Brouillons ». Sur grand ecran, les trois premiers filtres prennent 14 rem, la recherche le reste. */
@media (min-width:781px){main[data-module="facturation"] .filtres:has(#situation)>.tdb-champ:not(.tdb-champ-large)>:is(select,input){width:14rem}}

/* LES AIDES DU TARIF SOUS LEUR CHAMP, EN PETIT GRIS : rendues entre le libelle et le champ, en 15 px noir, elles se
   lisaient plus fort que la question (« Laissez vide pour reprendre le delai du site », « Applique une seule fois au
   preremplissage ») et repoussaient les champs de leur colonne, desalignes de ceux d a cote. Elles passent sous le
   champ, au style des autres aides (13 px, gris). La mention de TVA, longue, prend toute la largeur ; les deux cases
   (« Ouvrir ce tarif aux candidatures publiques », « Proposer ce tarif ») se retrouvent cote a cote. */
.bareme-champs>div:has(>.helptext){display:flex;flex-direction:column}
.bareme-champs>div>.helptext{order:1;margin-top:6px;color:var(--encre-douce);font-size:13px;line-height:1.5}
@media (min-width:761px){
 .bareme-champs{grid-auto-flow:row dense}
 .bareme-champs>div:has(>#id_mention_tva){grid-column:1/-1}
}

/* L INTRODUCTION D UN FORMULAIRE DE LA FACTURATION SE DETACHE DU PREMIER CHAMP (nouvelle facture, brouillon, mouvement,
   frais annexe, coordonnees de facturation, fractionnement d un releve) : le premier libelle suivait le texte a 7 ou
   8 px, dans le meme gris, et se lisait comme sa derniere ligne. 24 px avant le formulaire ; les paragraphes qui le
   precedent gardent sa mesure (l un d eux s etalait sur 1 100 px, pour un formulaire de 820). */
main[data-module="facturation"]>p.note:has(~form.formulaire){max-width:var(--mesure-formulaire)}
main[data-module="facturation"]>p.note+form.formulaire{margin-top:24px}

/* UN PARAGRAPHE D AIDE SE DETACHE DU TABLEAU QUI LE SUIT (numerotation, import des extraits, mes factures) : 2 a 5 px
   separaient le texte du cadre du tableau. 16 px. */
main[data-module="facturation"] p.note+.grille-cadre{margin-top:16px}

/* ENVOYER LA FACTURE : la carte Destinataire, etiree a la hauteur de l apercu du courriel, gardait 200 px de vide sous
   son contenu ; elle reprend sa hauteur, le nom de l etudiant en gras en tete. */
.paiement-colonnes:has(.paiement-courriel){align-items:start}
.paiement-colonnes:has(.paiement-courriel)>.carte:first-child>h2+p{font-weight:650}

/* FACTURER DES FRAIS ANNEXES : les trois cartes avaient trois hauteurs, et un titre sur deux lignes decalait le prix,
   les champs et le bouton « Preparer la facture » d une carte a l autre (578, 549 et 518 px). Les cartes d une rangee
   partagent la hauteur de leurs titres (sous-grille) et la leur ; le formulaire descend au bas de chaque carte, les
   boutons s alignent. Le libelle du champ se detache aussi de la ligne d echeance, du meme gris : 12 px. */
.reglages-sites:has(>.tdb-carte>.reglage>form.formulaire){align-items:stretch}
.reglages-sites>.tdb-carte:has(>.reglage>form.formulaire){display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0}
.reglages-sites>.tdb-carte>.reglage:has(>form.formulaire){display:flex;flex-direction:column}
.reglages-sites>.tdb-carte>.reglage>form.formulaire{margin-top:auto;padding-top:12px}

/* INSCRIPTIONS A FACTURER : la carte « Parametres d emission » collait a l introduction (3 a 10 px). 16 px. */
#inscriptions-facturer>p.note+section.carte{margin-top:16px}

/* LES DEPLIANTS SANS LE TRIANGLE DU NAVIGATEUR. « Menu et rubriques » (sur telephone, toutes les pages) montrait le
   triangle noir natif devant son texte, sans rien d un bouton : il prend l icone de menu (trois traits, a la couleur du
   texte) et sa ligne entiere est cliquable. Sur les releves bancaires, « Rapprocher automatiquement » devient un
   bouton secondaire, 16 px sous le bouton d import, et « Details bancaires » un lien a chevron (qui garde son dessin
   de lien meme si une regle commune habille en bouton les depliants des cellules de tableau). */
@media (max-width:780px){
 .menu-mobile>summary{display:flex;align-items:center;gap:12px;list-style:none}
 .menu-mobile>summary::-webkit-details-marker{display:none}
 .menu-mobile>summary::before{content:"";flex:0 0 18px;height:12px;background:linear-gradient(currentColor 0 0) 0 0/100% 2px no-repeat,linear-gradient(currentColor 0 0) 0 50%/100% 2px no-repeat,linear-gradient(currentColor 0 0) 0 100%/100% 2px no-repeat}
}
#releves-gestion>details{margin:0 0 16px}
#releves-gestion>details>summary{display:inline-flex;align-items:center;gap:10px;min-height:42px;padding:0 14px;border:1px solid var(--trait);border-radius:8px;background:var(--carte);color:var(--accent);font-size:14px;font-weight:600;cursor:pointer;list-style:none}
#releves-gestion>details>summary::-webkit-details-marker{display:none}
#releves-gestion>details>summary::after{content:"";width:6px;height:6px;margin-top:-3px;border-right:2px solid;border-bottom:2px solid;transform:rotate(45deg)}
#releves-gestion>details[open]>summary::after{margin-top:3px;transform:rotate(-135deg)}
#releves-gestion #releves-liste summary{display:inline-flex;align-items:center;gap:6px;min-height:0;padding:0;border:0;background:none;color:inherit;font-size:inherit;font-weight:inherit;list-style:none}
#releves-gestion #releves-liste summary::-webkit-details-marker{display:none}
#releves-gestion #releves-liste summary::before{content:"";width:5px;height:5px;border-right:2px solid;border-bottom:2px solid;transform:rotate(-45deg)}
#releves-gestion #releves-liste details[open]>summary::before{transform:rotate(45deg)}

/* VERIFIER LE DOCUMENT (preparation d un brouillon). La carte « Pieces originales », etiree a la hauteur de sa voisine,
   gardait 380 px de blanc sous une ligne : elle reprend sa hauteur. Les gestes du bas etaient mal assortis :
   « Emettre definitivement » (42 px) et « Abandonner le brouillon » (33 px) colles a 5 px, « Modifier le brouillon »
   en lien isole plus haut. Ils forment un groupe (voir preparation.html) : meme hauteur, 12 px d ecart, les deux
   gestes secondaires au meme dessin ; le formulaire se detache des cartes. */
main[data-module="facturation"]>.deux-colonnes:has(>section.carte>dl){align-items:start}
main[data-module="facturation"]>form.formulaire:has(button[value="emettre"]){margin-top:24px}
main[data-module="facturation"] form.formulaire>p:has(>button[value="emettre"]){display:flex;flex-wrap:wrap;align-items:center;gap:12px}
main[data-module="facturation"] form.formulaire>p:has(>button[value="emettre"])>:is(button,a){margin:0;min-height:42px}
main[data-module="facturation"] form.formulaire>p:has(>button[value="emettre"])>:is(a.bouton.discret,button.discret){display:inline-flex;align-items:center;padding:0 16px;border-color:#cfd8dd;font-size:14px}

/* LES CARTES LIBELLE / VALEUR DE LA FACTURATION (.deux-colonnes : la facture, l argent, le document a verifier, le
   rattachement d un releve). Chaque libelle s aligne sur sa valeur (la marge haute des dt sans classe les decalait de
   10 px dans la grille). Dans la carte de l argent, toutes les valeurs sont a droite, « Payee le » comprise ; sur
   telephone, libelle et montant restent sur la meme ligne au lieu de se lire en zigzag. */
main[data-module="facturation"] .deux-colonnes dl:not([class]){align-items:baseline}
main[data-module="facturation"] .deux-colonnes dl:not([class])>dt{margin:0}
main[data-module="facturation"] .deux-colonnes>.carte:has(dd.nombre)>dl>dd{text-align:right}
@media (max-width:780px){main[data-module="facturation"] .deux-colonnes>.carte:has(dd.nombre)>dl{grid-template-columns:minmax(0,1fr) auto;column-gap:16px}}

/* LES GESTES D UNE FACTURE EN BOUTONS (voir fiche.html) : des liens soulignes separes par des points medians, et sur
   telephone « Rattacher un releve / bancaire » coupe en deux. Des boutons secondaires groupes, 10 px d ecart ; sur
   telephone, un par ligne, en pleine largeur. */
.gestes-facture{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}
@media (max-width:640px){
 .gestes-facture{flex-direction:column;align-items:stretch}
 .gestes-facture>.tdb-bouton{min-height:42px;padding:8px 14px;white-space:normal;text-align:center}
}

/* LE BOUTON « ENVOYER LA FACTURE » SE DETACHE DE SON TEXTE (carte Paiement en ligne d une facture) : la phrase « Le
   paiement en ligne est desactive... » collait au bouton (6 px). 16 px. */
.paiement-suivi>p.note+.gestes{margin-top:16px}

/* LES REGLAGES D UN SEUL SITE : sa carte occupait le tiers gauche de la page, les deux autres tiers restaient vides. Seule,
   elle prend toute la largeur et, sur grand ecran, range cote a cote la numerotation, les coordonnees et le paiement en
   ligne. Plusieurs sites gardent leur carte chacun. */
.reglages-sites:has(>section.tdb-carte:only-child>.reglage~.reglage~.reglage){grid-template-columns:minmax(0,1fr)}
@media (min-width:1100px){
 .reglages-sites>section.tdb-carte:only-child:has(>.reglage~.reglage~.reglage){display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
 .reglages-sites>section.tdb-carte:only-child:has(>.reglage~.reglage~.reglage)>header{grid-column:1/-1}
 .reglages-sites>section.tdb-carte:only-child:has(>.reglage~.reglage~.reglage)>.reglage+.reglage{border-top:0;border-left:1px solid var(--trait)}
}

/* LA FICHE D UN RELEVE BANCAIRE EN GRILLE LIBELLE / VALEUR, comme la carte « Le document » de la preparation : les
   valeurs tombaient sous leur libelle sur 1 100 px de large, le numero de transaction et les comptes en petite police
   a chasse fixe, « 700,00 EUR » rejete seul au bord droit. Libelle a gauche, valeur a droite de lui, dans la police de
   l interface, le montant aligne avec les autres valeurs ; sur telephone, le libelle reste au-dessus de sa valeur. */
main[data-module="facturation"]>.carte>dl:not([class]){display:grid;grid-template-columns:minmax(10rem,max-content) minmax(0,1fr);gap:10px 24px;align-items:baseline;max-width:var(--mesure-formulaire)}
main[data-module="facturation"]>.carte>dl:not([class])>:is(dt,dd){margin:0}
main[data-module="facturation"]>.carte>dl:not([class])>dd.nombre{text-align:left}
main[data-module="facturation"]>.carte>dl:not([class])>dd.mono{font-family:inherit;font-size:inherit;letter-spacing:.02em}
@media (max-width:640px){
 main[data-module="facturation"]>.carte>dl:not([class]){grid-template-columns:minmax(0,1fr);gap:2px}
 main[data-module="facturation"]>.carte>dl:not([class])>dd{margin-bottom:10px}
}

/* LES PARTS D UN RELEVE FRACTIONNE : etire sur toute la largeur, le tableau posait 300 px de vide avant les montants et
   une colonne Facture large et vide. Il prend la largeur de son contenu, chaque colonne une marge reguliere. */
main[data-module="facturation"]>.grille-cadre:has(>table.grille:not(.en-fiches)>thead>tr>th.nombre:first-child){width:fit-content;max-width:100%}
main[data-module="facturation"]>.grille-cadre>table.grille:not(.en-fiches):has(>thead>tr>th.nombre:first-child){width:auto}
main[data-module="facturation"]>.grille-cadre>table.grille:not(.en-fiches):has(>thead>tr>th.nombre:first-child)>:is(thead,tbody)>tr>:is(th,td){padding-inline:16px;min-width:7rem}

/* LA RECHERCHE D UNE FACTURE A RATTACHER SUR TELEPHONE : le champ partageait sa ligne avec le bouton et coupait son
   texte d exemple (« Numero de facture, etudiant o »). Le champ prend toute la largeur, le bouton passe dessous. */
@media (max-width:780px){main[data-module="facturation"] .filtres:has(+#candidates)>input[type=search]{flex:1 1 100%}}

/* LES RELEVES BANCAIRES. En-tete « DATE DE / VALEUR » sur deux lignes : la colonne de la date s elargit un peu, prise
   sur la communication. Sous 1 200 px, chaque extrait est une fiche (facturation/static/facturation/releves-v2.css) :
   deux fiches se distinguaient a peine et les valeurs absentes (« Aucune », voir _releves-tableau.html) prenaient
   leur ligne. Une bande du fond de page separe les fiches, les valeurs absentes s effacent. */
@media (min-width:1201px){
 #releves-gestion #releves-liste th:nth-child(1){width:12%}
 #releves-gestion #releves-liste th:nth-child(3){width:22%}
}
@media (max-width:1200px){
 #releves-gestion #releves-liste>tbody>tr{border-bottom:8px solid var(--fond)}
 #releves-gestion #releves-liste>tbody>tr:last-child{border-bottom:0}
 #releves-gestion #releves-liste>tbody>tr>td:has(>.tdb-indice:only-child){display:none}
}

/* LE TEXTE D EXEMPLE DE LA RECHERCHE DES RELEVES, ENTIER SUR TELEPHONE : « Payeur, etudiant, facture, communication ou
   montant » etait coupe (« ...communication ou mor », « ...mededelin... ») dans un champ pourtant en pleine largeur.
   Il passe en 13 px, comme les aides ; ce qu on tape garde la taille des champs. */
@media (max-width:640px){#releves-gestion .filtres>input[type=search]::placeholder{font-size:13px}}

/* LA LIGNE TOTAL DES STATISTIQUES : faite de cellules d en-tete, elle prenait leur petite police grise en capitales,
   plus discrete que les lignes qu elle additionne. Meme taille que les donnees, en gras, a l encre du texte. */
main[data-module="facturation"] table.grille>tbody>tr:has(>th[colspan])>th{color:var(--encre);font-size:14px;font-weight:700;text-transform:none;letter-spacing:0}

/* LE TABLEAU DE BORD : un bouton plein seulement quand il y a quelque chose a traiter. « Voir et regler » etait plein
   face a un compteur a zero, alors que « Ouvrir les relances » et « Voir » etaient en contour : un sujet calme garde un
   bouton secondaire, comme les autres. */
.tdb-sujet.tdb-calme>.tdb-bouton.tdb-principal{border-color:var(--trait);background:var(--carte);color:var(--accent)}

/* SUIVRE DES FACTURES : les blocs s empilaient sans espace (le bouton « Afficher » touchait la carte « Ce qui se
   passera », qui touchait celle des chiffres), et les filtres faisaient un bloc de 820 px, bouton pleine largeur, sous
   des cartes de 1 130 px. Les filtres deviennent une rangee, comme ailleurs (listes a la taille des autres champs,
   bouton a sa largeur), et 24 px puis 16 px separent les blocs. */
main[data-module="facturation"]>form.formulaire[method="get"]{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 16px}
main[data-module="facturation"]>form.formulaire[method="get"]>label{display:grid;gap:4px}
main[data-module="facturation"]>form.formulaire[method="get"]>label>select{min-width:12rem;font-size:15px}
main[data-module="facturation"]>form.formulaire[method="get"]>button{margin:0}
main[data-module="facturation"]>form.formulaire[method="get"]+section.carte{margin-top:24px}
main[data-module="facturation"]>section.carte+form{margin-top:16px}

/* « ANNULER » A DISTANCE DU BOUTON QU IL SUIT (suivre des factures, import des extraits, rattachement d un releve) : il
   collait a 6 px au bouton de validation, contre 14 a 18 px sur les autres formulaires. 16 px partout. */
main[data-module="facturation"] form p>button+a{margin-left:16px}

/* MA FACTURE (espace etudiant). La carte « Reste a payer » gardait 60 px de vide au-dessus de son titre (la marge d un
   titre de page) contre 24 sur les cotes, et finissait 16 px plus haut que « Le detail » (sa marge basse, dans la
   grille) : meme marge sur les quatre cotes, meme hauteur que sa voisine. Dans « Le detail », « Par virement » etait
   plus grand que le titre de la carte, et l IBAN et la communication tombaient en petite police a chasse fixe : un
   intertitre plus discret, les deux valeurs dans la police et la taille du texte. */
.paiement-colonnes>.paiement-resume{margin-bottom:0}
.paiement-colonnes>.paiement-resume>h2:first-child{margin-top:0}
.paiement-colonnes>.carte:has(>dl)>h3{margin:20px 0 6px;font-size:15px}
.paiement-colonnes>.carte:has(>dl) :is(p,strong).mono{font-family:inherit;font-size:inherit;letter-spacing:.02em}

/* MES FACTURES (espace etudiant). Le reste du, l information principale de la page, etait une ligne de texte courant,
   montant avant libelle : il devient un encart, le libelle en petit au-dessus, le montant en grand. Dans le tableau,
   « Consulter ma facture », « Par virement » et « Communication » s empilaient a 36 px l un de l autre (la ligne
   impayee faisait 140 px contre 66) : 4 px. */
main[data-module="facturation"]>p.compte{display:inline-flex;flex-direction:column-reverse;gap:2px;margin:6px 0 20px;padding:14px 20px;border:1px solid var(--trait);border-radius:var(--rayon);background:var(--carte);font-size:26px;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums}
main[data-module="facturation"]>p.compte>span{font-size:13px;font-weight:600;color:var(--encre-douce)}
main[data-module="facturation"]:has(>p.compte) table.grille td>p{margin:4px 0}

/* LE DOSSIER D UN ETUDIANT : UNE SECTION VIDE TIENT SUR UNE LIGNE. « Aucun document. » centre dans 72 px de vide,
   quatre fois de suite, faisait une colonne de 550 px ; le message se range sous son titre, a gauche, comme le texte
   de la page. */
:is(.dossier-onglets-admin~p.vide,.historique-annuel>p.vide){margin:8px 0 0;padding:0;text-align:left}

/* LES DEUX CARTES DU DOSSIER GARDENT LEUR HAUTEUR : etiree a celle du formulaire voisin, « Information sur le
   compte » gardait 340 px de blanc sous son contenu. */
.dossier-onglets-admin~.deux-colonnes{align-items:start}

/* L HISTORIQUE DES INSCRIPTIONS : l annee devient un intertitre discret sous le titre de la section (le h3 par
   defaut, 18 px, etait plus grand que ce titre de 15 px). */
.historique-annuel>h3{margin:18px 0 8px;font-size:13px;font-weight:650;color:var(--encre-douce)}

/* LE RESTE DU SUR UNE LIGNE (onglet Financier, telephone) : le libelle a gauche, le montant a droite, au lieu du
   montant seul sur la ligne suivante. */
@media (max-width:780px){.dossier-onglets-admin~.deux-colonnes dl:has(>dd.nombre){grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:12px}}

/* LE CHOIX « CE QUE L ETUDIANT VOIT / TOUT » DU DOSSIER prend la couleur des boutons de l administration (il etait
   d un bleu vu nulle part ailleurs) ; sur telephone, les deux choix ont la meme largeur, l un sous l autre. */
.dossier-onglets-admin~.res-filtres a[aria-current]{background:var(--accent);border-color:var(--accent);color:#fff}
@media (max-width:640px){.dossier-onglets-admin~.res-filtres a{flex:1 1 100%;text-align:center}}

/* LES GESTES D UNE INSCRIPTION (liste des inscriptions, onglet Inscription du dossier) : « Retirer » etait un petit
   texte gris a 4 px du bouton « Approuver ». Les gestes s espacent ; « Accepter et facturer » et « Retirer »
   prennent la hauteur d un bouton, a bord fin, « Retirer » dans la couleur d alerte, et le bouton qui confirme le
   retrait sur le fond d alerte. */
.gestes:has(>.tri-retrait){gap:8px 12px}
.gestes:has(>.tri-retrait)>a,.gestes>.tri-retrait>summary{display:inline-flex;align-items:center;min-height:42px;padding:0 14px;border:1px solid #cfd8dd;border-radius:8px;background:var(--carte);color:var(--accent-fonce);font-size:14px;font-weight:650;text-decoration:none;white-space:nowrap}
.gestes>.tri-retrait>summary{color:var(--alerte)}
.gestes>.tri-retrait form button{background:var(--alerte);color:#fff}

/* LES TROIS GESTES DES INSCRIPTIONS, SUR TELEPHONE, en pleine largeur : chacun a la largeur de son texte, ils
   formaient un escalier. */
@media (max-width:600px){main>nav.actions-page>a{flex:1 1 100%}}

/* L AIDE D UN CHAMP DE « DELAI ET REPORT » passe sous son champ, en petit gris : posee a droite du champ « 30 »,
   elle s enroulait autour de lui. */
main[data-module=facturation]>form.carte>fieldset .helptext{display:block;margin:6px 0 0;font-size:13px;line-height:1.5;color:var(--encre-douce)}

/* LES CHIFFRES DES ENSEIGNANTS, SUR TELEPHONE, UNE LIGNE PAR CHIFFRE, le libelle a sa droite : deux chiffres sur la
   premiere rangee et le troisieme seul sur la seconde, le bloc paraissait decousu. La page se reconnait a son filtre
   (#filtre). */
@media (max-width:600px){main:has(#filtre)>.sommaire{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}main:has(#filtre)>.sommaire>div{display:flex;align-items:baseline;gap:12px}main:has(#filtre)>.sommaire>div>.compte{flex:0 0 auto;min-width:40px}}

/* LES FILTRES DES ENSEIGNANTS, LIBELLES AU-DESSUS DU CHAMP (avec le gabarit) : « Rechercher » et « Afficher »
   rejoignent Site et Annee scolaire, chacun dans son bloc ; le champ de recherche garde sa largeur. */
.filtres:has(#filtre)>div:has(>input[type=search]){flex:1 1 240px;max-width:380px}
.filtres:has(#filtre)>div>input[type=search]{width:100%;max-width:none}

/* LE NOM D UN ENSEIGNANT SUR UNE LIGNE (liste, grand ecran) : la colonne etroite le coupait en deux (« Claire /
   Lemaire ») et les rangees n avaient pas la meme hauteur. */
@media (min-width:641px){main:has(#filtre)>#tableau td:nth-child(2)>a{white-space:nowrap}}

/* LA CARTE « DROITS DE GESTION » D UN ENSEIGNANT s ecarte de 20 px des deux cartes du dessus, comme deux cartes qui
   se suivent : elle les touchait. */
.interface main>.deux-colonnes+.carte:has(ul.cases){margin-top:20px}

/* « FICHE REMPLIE A 7 % » S ECARTE DU BOUTON « MODIFIER LA FICHE » : a 4 px, il semblait colle. */
a.bouton[href$="/modifier"]+.note{margin-left:10px}

/* LES INITIALES D UN ENSEIGNANT EN PASTILLE devant le resume de ses cours : en petites capitales grises, elles
   ressemblaient a un reste de gabarit. */
form.filtres+p.sous-titre>.mono:first-child{display:inline-block;padding:0 8px;border-radius:999px;background:var(--accent-clair);color:var(--accent-fonce);font-weight:650}
form.filtres+p.sous-titre>.mono:first-child:empty{display:none}

/* CHAQUE DROIT DE GESTION EN RETRAIT SUSPENDU : sur telephone, la deuxieme ligne du texte repassait sous la case ;
   elle s aligne sur le debut du texte. */
ul.cases>li>label:has(>strong){padding-left:28px}
ul.cases>li>label:has(>strong)>input{margin:0 6px 0 -28px;vertical-align:middle}

/* ATTRIBUER DES COURS : LES LIBELLES QUI ENTOURENT LEUR CHAMP. Sur grand ecran, « Site », « Annee scolaire » et
   « Annee d etudes » touchaient leur liste et les boutons voisins descendaient de 3 a 4 px : libelle et liste
   s alignent, a 8 px. Sur telephone, le champ de recherche passe sous son libelle, en pleine largeur, comme les
   listes. Les filtres de l historique de l offre gardent leur propre mise en page. */
@media (min-width:781px){.filtres:not(.oe-historique-filtres)>label:has(>select){display:inline-flex;align-items:center;gap:8px;line-height:1.4}}
@media (max-width:780px){.filtres:not(.oe-historique-filtres)>label:has(>input[type=search]){flex-direction:column;align-items:stretch;gap:4px}.filtres:not(.oe-historique-filtres)>label:has(>input[type=search])>input{flex:none}}

/* ATTRIBUER DES COURS : « RETIRER » A L ALLURE D UN BOUTON. Le triangle du depliant, seul sur sa ligne sur
   telephone, puis « Retirer » dessous, ne ressemblait a aucun geste de l application : un bouton a bord fin, texte
   d alerte, sur une ligne ; le bouton qui confirme sur le fond d alerte. (Seul un depliant qui porte un formulaire, un geste a confirmer, prend cet habit :
   « Motifs » ou « Details bancaires » restent des depliants de lecture.) */
.grille td>details:not([class]):has(form)>summary{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border:1px solid #cfd8dd;border-radius:8px;background:var(--carte);color:var(--alerte);font-size:13px;font-weight:650;white-space:nowrap;list-style:none;cursor:pointer}
.grille td>details:not([class]):has(form)>summary::-webkit-details-marker{display:none}
.grille td>details:not([class]):has(form)>form button{background:var(--alerte);color:#fff}

/* ATTRIBUER DES COURS : UNE CASE ET SON COURS SUR LA LIGNE DES AUTRES CELLULES. Le libelle portait la marge et le
   petit gris d un libelle de champ (rangees de 57 px, texte 6 px plus bas) ; sur telephone, le nom du cours
   repassait sous la case. */
.grille td>label:has(>input[type=checkbox]){display:flex;align-items:flex-start;gap:8px;margin:0;font-size:inherit;color:inherit}
.grille td>label:has(>input[type=checkbox])>input{margin:3px 0 0}

/* AJOUTER UN ENSEIGNANT : « Annuler » centre sur « Creer la fiche » (la marge haute de tout bouton le decalait de
   9 px). Les sites de rattachement ne font plus une carte dans la carte (effet de la regle commune des groupes de
   champs) : leur legende prend la place et le corps des titres des autres cartes. */
.creation-enseignant .actions-enseignant button{margin:0}
.creation-enseignant .carte>fieldset:not([class]){margin:0;padding:0;border:0;background:none}
.creation-enseignant .carte>fieldset:not([class])>legend{margin:0 0 16px;font-size:15px;font-weight:700}

/* LA JAUGE D UNE FICHE s ecarte de 20 px de la premiere carte du formulaire (Modifier la fiche, Ma fiche) : elles se
   touchaient, double trait gris entre les deux. */
main>.carte.completion:has(~form.formulaire){margin-bottom:20px}

/* UN LIBELLE COLLE A SON CHAMP, PAS AU CHAMP DU DESSUS (Modifier la fiche, Ma fiche) : 16 px avant chaque libelle,
   4 px entre le libelle et son champ ; on ne voyait plus quel libelle allait avec quel champ. */
main.moyen>form.formulaire>section.carte>label{margin:16px 0 4px}
main.moyen>form.formulaire>section.carte>h2+label{margin-top:0}

/* LE STATUT D UN ETUDIANT PASSE A LA LIGNE DANS SA COLONNE : « Statut personnel a verifier », insecable, debordait
   sur la colonne du bloc de formation et y perdait son « r ». */
.registre-tableau td>.etat{white-space:normal}

/* UN GROUPE DE MOTS QUI NE SE COUPE PAS (avec le gabarit) : l annee scolaire d un bloc passait a la ligne apres son
   tiret (« Osteo 2 (2026- / 2027) »). */
.insecable{white-space:nowrap}

/* LES LIENS D UNE LIGNE D ETUDIANT A LA SUITE : « Ouvrir le dossier », « Profil » et « Inscription », l un sous
   l autre, faisaient des rangees de plus de 100 px. */
.registre-tableau .registre-actions{flex-direction:row;flex-wrap:wrap;gap:4px 14px}

/* LE COMPTE ET LA NOTE AU-DESSUS D UN TABLEAU s en ecartent de 10 px (liste des etudiants, Qui est qui) : ils le
   touchaient presque. */
.registre-etudiants #tableau>p.note+.grille-cadre,main:has(#categorie) #tableau>.grille-cadre{margin-top:10px}

/* LES OUTILS DE LA LISTE DES ETUDIANTS, SUR TELEPHONE, remplissent leur ligne : quatre boutons de quatre largeurs
   faisaient un escalier. */
@media (max-width:600px){.registre-entete>.bouton{flex:1 1 100%;text-align:center}.registre-etudiants nav.gestes a{flex:1 1 auto;text-align:center}}

/* QUI EST QUI : LA COLONNE PHOTO DISPARAIT QUAND PERSONNE N A DE PHOTO (70 a 85 px vides en tete de chaque ligne) ;
   des qu une photo existe, elle revient. La page se reconnait a son choix de categorie (#categorie). */
main:has(#categorie) #tableau .grille:not(:has(.portrait-annuaire))>:is(thead,tbody)>tr>:first-child:not([colspan]){display:none}

/* QUI EST QUI : « n/d » EN RETRAIT. Une valeur absente s ecrit en gris et plus petit, pour que les colonnes presque
   vides (telephone, adresse) ne paraissent plus en erreur (la cellule est marquee par finitions.js). */
main:has(#categorie) #tableau .grille td[data-vide]{color:var(--encre-douce);font-size:13px}

/* CREER UN ACCES : LE FILTRE SITE ET ROLE. Un seul trait le separe de la fiche (le sien et celui de la section
   faisaient deux traits a 27 px). Sur telephone, il s aligne sur le texte de la carte (il gardait 14 px de retrait
   de chaque cote) et « Afficher » prend toute la ligne au lieu d une demi-ligne. */
.acces-gestion .ag-creation-filtres{border-bottom:0}
@media (max-width:620px){.acces-gestion .ag-creation-filtres{padding:15px 0;grid-template-columns:1fr 1fr}.acces-gestion .ag-creation-filtres>.ag-bouton{grid-column:1 / -1}}

/* COMPTES ET ACCES DANS LA CHARTE DE L INTERFACE : les boutons gardaient Arial (la regle commune ne changeait que la
   page), le bouton principal un bleu vu nulle part ailleurs, et le titre sa propre taille (28 px : plus grand que
   les autres titres sur telephone, plus petit sur grand ecran). */
.acces-gestion .ag-bouton{font-family:inherit}
.acces-gestion .ag-bouton.ag-principal{background:var(--accent);border-color:var(--accent)}
.acces-gestion h1{font-size:clamp(24px,2.2vw,32px);letter-spacing:-.03em}

/* COMPTES ET ACCES : PAS DE CASE « TOUT SELECTIONNER » QUAND AUCUN COMPTE AFFICHE N EST A INVITER. La case d en-tete
   et sa colonne vide disparaissent, le nom reprend la marge de la ligne. */
.acces-gestion .ag-table:not(:has(tbody input[type=checkbox])) :is(th,td):first-child:not(.ag-vide){display:none}
.acces-gestion .ag-table:not(:has(tbody input[type=checkbox])) :is(th,td):nth-child(2){padding-left:20px}
@media (max-width:620px){.acces-gestion .ag-table:not(:has(tbody input[type=checkbox])) :is(th,td):nth-child(2){padding-left:12px}}

/* COMPTES ET ACCES : UNE ADRESSE SUR UNE LIGNE. Coupee n importe ou (« demo.belso.b / e »), elle finit par des
   points de suspension quand la colonne est trop etroite ; l adresse complete reste au survol (avec le gabarit) et
   dans la fiche « Gerer ». */
.acces-gestion .ag-table .ag-courriel{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

/* COMPTES ET ACCES, SUR TELEPHONE : le cinquieme compteur (« Suspendus ») prend toute la ligne au lieu de laisser un
   trou a sa droite. */
@media (max-width:620px){.ag-compteurs>.ag-compteur:last-child:nth-child(odd){grid-column:1 / -1}}

/* VALVES : « NOUVELLE ANNONCE » RESPIRE. Colle a la note du dessus (5 px) et pose sur le bord de la premiere
   annonce, il semblait prolonge par le cadre fonce de l annonce epinglee. */
.gestes:has(+.annonces){margin:16px 0 20px}

/* VALVES : LES GESTES D UNE ANNONCE SUR LEUR LIGNE, sous un filet, et « Supprimer » dans la couleur d alerte. */
.annonce>.gestes{margin-top:12px;padding-top:10px;border-top:1px solid var(--trait);gap:4px 8px;font-size:14px}
.annonce>.gestes>a[href$="/supprimer"]{color:var(--alerte)}

/* LES CHOIX D UNE ANNONCE (et d un questionnaire) A LA TAILLE DU DOIGT : sur telephone, chaque option tient une
   ligne de 44 px, toute cliquable (22 px d une case a l autre, trop serre). */
@media (max-width:780px){.formulaire>:is([role=radiogroup],[role=group])>label.case{min-height:44px;align-items:center}.formulaire>:is([role=radiogroup],[role=group])>label.case>input{margin-top:0}}

/* UNE ACTION DEFINITIVE SE VOIT (avec les gabarits) : le bouton qui la confirme (effacer un message, supprimer une
   annonce) prend la couleur d alerte, texte blanc. button.danger est la classe commune de ces confirmations. */
body.interface button.danger:not(:disabled){background:var(--alerte);border-color:var(--alerte);color:#fff}

/* UN ETAT VIDE EN CARTE, A GAUCHE (avec les gabarits ; questionnaire, passage d annee) : une ligne grise centree
   dans le vide, sans cadre, se lisait mal dans une page alignee a gauche ; le geste utile y devient un bouton. */
.carte.vide{margin:16px 0;padding:18px 20px;text-align:left}
.carte.vide>p{margin:0 0 14px}
.carte.vide>.bouton{margin:0}

/* LES CHIFFRES CLES DE L OFFRE EN GRILLE (offre, rentree, charge, mise au propre). Poses a la suite, ils changeaient
   de colonne a chaque rangee sur telephone et laissaient un tiers de la carte vide sur grand ecran. Des colonnes
   egales ; chaque chiffre pose au bas d une meme hauteur, les libelles alignes dessous. Sur telephone, deux colonnes,
   le chiffre principal seul sur sa ligne. */
.oe-sommaire{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));align-items:start;gap:14px 24px}
.oe-sommaire .compte{display:flex;align-items:flex-end;min-height:48px}
@media (max-width:640px){.oe-sommaire{grid-template-columns:repeat(2,minmax(0,1fr))}.oe-sommaire>:first-child{grid-column:1/-1}.oe-sommaire .compte{min-height:0}}

/* LES CHIFFRES D UNE CARTE DE BLOC ne se coupent plus entre un nombre et son mot (« 14 » / « inscrits »). */
.oe-carte-chiffres>span{white-space:nowrap}

/* LES PIEDS DES CARTES DE BLOCS SUR UNE MEME LIGNE. Pousse en bas de la carte, le pied commencait plus haut dans la
   carte qui avait trois pastilles que dans ses voisines. Il suit la barre de progression et prend la place qui
   reste ; ses pastilles partent du haut. */
.oe-carte-bas{flex:1 0 auto;margin-top:0;align-content:flex-start}

/* LES GESTES D UNE FORMATION REPARTENT DU BORD quand ils passent a la ligne : la marge de 10 px qui les separait du
   texte restait devant eux ; l ecart vient maintenant du gap de la ligne. */
.oe-formation-titre .oe-gestes-formation{margin-left:0}

/* LES DEUX ENCARTS D UN BLOC SUR UNE MEME GRILLE : le titre au-dessus, puis les listes et le bouton sur une ligne, a
   la hauteur du bouton. Dans « Affecter un enseignant », le bouton passait seul sous le titre. */
.oe-affecter>.oe-affecter-titre{flex-basis:100%}
.oe-affecter select{min-height:42px}

/* LE GESTE DETACHER SOUS LE NOM DU COURS : colle au nom et du meme habit, il se lisait comme la fin du nom
   (« Examen clinique Detacher »). Il passe dessous, dans le rouge des gestes qui retirent. Sur grand ecran, les
   colonnes du cours et des enseignants recoivent leur part de la largeur : les noms ne se coupent plus quand la
   place existe. */
.oe-bloc .grille td>a.oe-detacher{display:block;width:max-content;margin:2px 0 0;color:#9d414b;font-weight:600}
.oe-bloc .grille td>a.oe-detacher:hover,.oe-bloc .grille td>a.oe-detacher:focus-visible{color:#6f2a32}
@media (min-width:641px){.oe-bloc .grille:has(>thead th:nth-child(7))>thead th:first-child{width:21%}.oe-bloc .grille:has(>thead th:nth-child(7))>thead th:nth-child(2){width:17%}}

/* LES FILTRES DE L HISTORIQUE DE L OFFRE, LIBELLE AU-DESSUS. La regle globale des filtres (libelle en ligne, centre)
   s appliquait a ces libelles qui contiennent leur champ : « Du » et « Au » centres au-dessus de leur date, « Bloc »
   plus haut que les autres. Chaque libelle redevient une colonne, texte a gauche ; sur telephone, Du et Au se
   partagent une ligne. */
.filtres.oe-historique-filtres>label{display:flex;flex-direction:column;align-items:stretch;gap:4px;min-height:0;margin:0;line-height:1.4;white-space:normal}
@media (max-width:780px){.filtres.oe-historique-filtres>label:has(input[type=date]){flex:1 1 40%;min-width:0}}

/* LE SURTITRE DE L OFFRE GARDE SON HABIT QUAND IL EST UN LIEN (historique, programme, rentree, charge, mise au
   propre) : souligne et bleu nuit, il differait des surtitres turquoise des autres pages de l offre. */
.oe-surtitre a{color:inherit;text-decoration:none}
.oe-surtitre a:hover,.oe-surtitre a:focus-visible{text-decoration:underline}

/* LES PARTIES D EVALUATION SANS COLONNE MORTE : tant qu aucune partie enregistree ne peut se retirer, la colonne
   Retirer reste vide ; elle disparait. Le champ Partie prend la place, le poids se range contre lui. */
.oe-parties .grille th:first-child{width:100%}
.oe-parties .grille:not(:has(tbody :is(.oe-retirer,.oe-pastille))) :is(th,td):nth-child(3){display:none}

/* LES COURS DU MEME NOM, TABLEAUX ALIGNES. Chaque nom avait son tableau et ses largeurs : ETAT a 614 puis 701 px. Des
   largeurs communes sur grand ecran ; sur telephone, ils passent en fiches comme les tableaux qui debordent, au lieu
   de tenir tout juste en coupant chaque valeur. Le lien vers l ancien catalogue repart du bord du contenu. */
@media (min-width:641px){.oe-propre-double .grille{table-layout:fixed}.oe-propre-double .grille th:nth-child(1){width:30%}.oe-propre-double .grille th:nth-child(2){width:16%}.oe-propre-double .grille th:nth-child(3){width:18%}}
@media (max-width:640px){.oe-propre-double .grille{min-width:640px}}
.oe-propre-renvoi>.oe-lien-geste:first-child{margin-left:0}

/* LE PROGRAMME DE L OFFRE, COLONNES COMMUNES : chaque bloc calculait ses largeurs, les colonnes sautaient de 34 px
   d un tableau a l autre. Memes largeurs pour tous les blocs sur grand ecran et a l impression. */
@media (min-width:641px){.oe-programme-bloc .grille{table-layout:fixed}.oe-programme-bloc .grille th:nth-child(1){width:34%}.oe-programme-bloc .grille th:nth-child(2){width:12%}.oe-programme-bloc .grille th:nth-child(3){width:26%}}

/* LA SECTION SANS COURS DE LA CHARGE : son message se lit sous son titre, aligne a gauche, sans les 24 px de marge de
   l etat vide centre. */
.oe-charge-sans>.vide{margin:6px 0 0;padding:0;text-align:left}

/* LA CONFIRMATION D UN RETRAIT DANS L OFFRE (detacher un cours, supprimer un bloc ou une formation) a l habit d un
   geste destructif, dans le rouge de « Supprimer le bloc » : elle avait celui de « Creer le bloc ». */
.oe-formulaire .oe-bouton-retrait{background:#9d414b;color:#fff}

/* LE DOSSIER D UN COURS. Dans « Publication du cours », les deux gestes n etaient pas du meme gabarit (un bouton,
   puis un libelle au-dessus de sa liste) : « Remettre en brouillon » a sa ligne, puis l annee, libelle au-dessus, liste
   et bouton alignes par le bas avec 12 px d ecart. Les deux cartes cote a cote prennent le meme ecart que les autres
   cartes ; l en-tete « Seances du cours » s ecarte du tableau precedent et se rapproche du sien. */
.gestes:has(>form[action$="/annee"]){flex-direction:column;align-items:flex-start;gap:14px}
.gestes>form[action$="/annee"]{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 12px;margin:0}
.gestes>form[action$="/annee"]>label{flex-basis:100%;margin:0}
.interface main>.carte+.deux-colonnes{margin-top:20px}
.interface main>.grille-cadre+.entete-page{margin:28px 0 10px}

/* RATTACHER UN ENSEIGNANT A UN COURS. La carte gardait la marge haute du navigateur au-dessus de son premier
   paragraphe. Sur telephone, les deux boutons s empilent en pleine largeur, l action principale d abord. */
main.formulaire-centre>.carte>p:first-child{margin-top:0}
@media (max-width:480px){form:has(>.confirmation-action)>.actions-formulaire{flex-direction:column-reverse;align-items:stretch}form:has(>.confirmation-action)>.actions-formulaire>*{justify-content:center;text-align:center}}

/* LA LEGENDE DES RUBRIQUES FERMEES SE LIT COMME UN TITRE. Incrustee dans le trait du cadre, elle le chevauchait des
   qu elle passait sur deux lignes (en neerlandais). Elle prend la premiere ligne de la grille, au-dessus des cases,
   comme la legende des groupes de champs sans classe. */
.signer-admin-rubriques>legend{float:left;grid-column:1/-1;width:100%;margin:0 0 4px;padding:0;color:var(--encre);font-size:14px;font-weight:650}

/* LA LISTE DES DOCUMENTS A SIGNER SUR TELEPHONE. « Ouvrir » portait la colonne 3 de la liste des documents de
   l etudiant (.document-action) : une troisieme colonne se creait, et le texte restait serre meme sur une seule
   colonne. Il suit la grille de sa ligne : a droite sur grand ecran, sous le texte sur telephone. */
.signer-admin-ligne>.document-action{grid-column:auto}
@media (max-width:640px){.signer-admin-ligne>.document-action{justify-self:start}}

/* LE COMPTE DES SIGNATURES EN PASTILLE, dans l en-tete d un document a signer : colle a la date de publication, il se
   lisait d un bloc avec elle. Il prend la pastille grise des documents, a part. */
.signer-admin-entete .document-meta>span:not(.document-etat):last-child{display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;background:#eef2f4;color:#405f6e;font-size:.75rem;font-weight:700;line-height:1.25}

/* LES RENVOIS DES REGLEMENTS VERS LES DOCUMENTS DES ETUDIANTS, sous l introduction : rapproches d elle, ecartes de la
   premiere carte. */
main>.sous-titre+.signer-admin-acces{margin:-8px 0 24px}

/* LE SUIVI DES SIGNATURES DES REGLEMENTS. Tant que personne n a signe, la colonne Preuve est vide sur toutes les
   lignes : elle disparait. Sur telephone, une fiche par etudiant au lieu de quatre colonnes serrees. */
.signatures-suivi .grille:not(:has(tbody td:nth-child(4) a)) :is(th,td):nth-child(4){display:none}
@media (max-width:640px){.signatures-suivi .grille{min-width:640px}}

/* L AIDE D UN CHAMP DU SUIVI DES REGLEMENTS SOUS LE CHAMP. Le formulaire rendu par Django pose le texte d aide a la
   suite du champ : il coulait a sa droite puis dessous. Il passe dessous, en petit gris. */
form.carte>fieldset>p>.helptext{display:block;margin:6px 0 0;color:var(--encre-douce);font-size:13px}

/* LES FORMULAIRES DES EVALUATIONS. Les boutons gardaient la marge haute de 18 px de tout bouton dans des rangees
   centrees : ils tombaient 9 px sous le lien ou le champ voisin. Le libelle de recherche s ecarte de son champ, et
   les champs sans type (recherche d un etudiant, systeme source) prennent l habit des autres champs. */
:is(.eval-filtrer-actions,form.eval-actions)>button{margin:0}
form.eval-actions>label{display:flex;align-items:center;gap:8px;margin:0}
:is(.eval-actions,.eval-validation) input:not([type]){min-width:0;padding:9px 12px;font:inherit;color:var(--encre);background:var(--carte);border:1px solid #cfd8dd;border-radius:8px}

/* LES TABLEAUX DES EVALUATIONS DEFILENT, ET CA SE VOIT : sur telephone, ils gardent 620 px et leurs dernieres
   colonnes sortaient du cadre sans indice. Une ombre au bord qui cache encore des colonnes ; elle s efface au bout. */
@media (max-width:700px){.eval-table{background:linear-gradient(to right,#fff 30%,rgba(255,255,255,0)) left/40px 100% no-repeat local,linear-gradient(to left,#fff 30%,rgba(255,255,255,0)) right/40px 100% no-repeat local,radial-gradient(farthest-side at 0 50%,rgba(24,59,73,.2),rgba(24,59,73,0)) left/14px 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,rgba(24,59,73,.2),rgba(24,59,73,0)) right/14px 100% no-repeat scroll,#fff}}

/* LES TROIS ONGLETS DES EVALUATIONS SUR UNE RANGEE, SUR TELEPHONE : ils se partagent la largeur et leur texte passe a
   la ligne dans l onglet, au lieu de laisser le troisieme seul sous les deux autres. */
@media (max-width:600px){.eval-onglets{flex-wrap:nowrap;gap:0}.eval-onglets a{flex:1 1 auto;padding:10px 6px;text-align:center;line-height:1.3}}

/* LES ANNEES DE LA LISTE DE REFERENCE DES EXAMENS PASSENT A LA LIGNE SUR TELEPHONE : en rangee defilante, la
   quatrieme carte etait coupee net au bord, sans indice. Une grille de cartes egales, trois par rangee a 390 px. */
@media (max-width:700px){.exam-ref-annees{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));overflow:visible}.exam-ref-annees a{min-width:0}}

/* LE CALENDRIER DE L HORAIRE. La legende « Journee avec seances » recoit l exemple de la case teintee qu elle
   decrit. Quand un seul jour est choisi, son titre de section le nomme deja : la carte du jour ne le repete plus. */
.hm-legende>span:not(:has(>span))::before{content:"";flex:none;width:14px;height:10px;border:1px solid #f2dbc7;border-radius:3px;background:var(--hm-fond)}
.hm-jours.hm-un-jour>.hm-jour>header{display:none}

/* LA FEUILLE DE PRESENCES DE L ADMINISTRATION. Sur grand ecran, les pastilles de chaque etat se centrent sous leur
   en-tete. Tant qu aucune presence n a ete pointee, la colonne « Pointe par » est vide : elle disparait. La feuille
   de l enseignant, sans cette colonne, n est pas touchee. */
@media (min-width:641px){form:has(input[type=radio][name^="e-"]) .grille:has(>tbody>tr>td.note) :is(th,td):nth-child(n+2):nth-last-child(n+2){text-align:center}form:has(input[type=radio][name^="e-"]) .grille:has(>tbody>tr>td.note) input[type=radio]{margin:0}}
form:has(input[type=radio][name^="e-"]) .grille:has(>tbody>tr>td.note):not(:has(>tbody>tr>td.note:not(:empty))) :is(th,td):last-child{display:none}

/* COURS ET INTERVENANTS D UNE SEANCE. Le titre de la seconde carte suivait des champs caches et gardait sa marge
   haute de 24 px. Les deux boutons ne s etirent plus sur toute la largeur ; quand la confirmation est affichee,
   « Afficher les intervenants possibles » passe en bouton secondaire. */
.carte.formulaire>input[type=hidden]+h2{margin-top:0}
form.carte.formulaire:has(>[name=matiere])>button{justify-self:start}
main:has(>form.carte.formulaire>input[name=matiere]) form.carte.formulaire[method=get]>button{background:var(--carte);color:var(--accent-fonce);border:1px solid #cfd8dd}

/* LE FORMULAIRE D UNE SEANCE, UN SEUL BORD GAUCHE : la liste deroulante ajoute 4 px a sa marge interieure, et la
   case a cocher garde la marge gauche du navigateur. */
.formulaire select{padding-left:6px}
.formulaire label.case input:is([type=checkbox],[type=radio]){margin-left:0}

/* SUR TELEPHONE, LES CHAMPS TEXTE COTE A COTE D UNE SEANCE S EMPILENT (seminaire, theme) : une valeur longue etait
   coupee dans un demi-champ. Debut et fin, des heures, restent cote a cote. */
@media (max-width:480px){.formulaire .cote-a-cote:has(input[type=text]){grid-template-columns:minmax(0,1fr)}}

/* LES PARCOURS PRATIQUES AUX JETONS DE L APPLICATION : le titre prend la taille et l interlettrage des autres titres
   de page, le bouton principal la couleur d accent de l interface. L etat vide equilibre ses lignes ; sur telephone,
   les gestes de l en-tete s empilent en pleine largeur. */
.pr-button,.pr-page button{background:var(--accent);border-color:var(--accent)}
.pr-heading h1{font-size:clamp(24px,2.2vw,32px);letter-spacing:-.03em}
body.interface .pr-zero p{text-wrap:balance}
@media (max-width:700px){.pr-heading-actions{flex-direction:column;align-items:stretch}}

/* LE MODE D EMPLOI DES PARCOURS PRATIQUES. Chaque etape repliee montre qu elle s ouvre (fleche a droite, tournee
   quand elle est ouverte, fond au survol). Le lien de retour prend l ecart et la taille des liens de la page
   « Preparer un espace annuel ». */
.pr-guide-step>summary::after{content:"\25B8";margin-left:auto;color:#60737a;font-size:14px}
.pr-guide-step[open]>summary::after{content:"\25BE"}
.pr-guide-step>summary:hover{background:#f7faf9}
.pr-guide>a:first-child{display:block;width:max-content;max-width:100%;margin:0 0 16px;font-size:13px}

/* L AIDE DE L ANNEE SCOLAIRE SOUS SON CHAMP, dans la grille de l etape 2 (colonne de droite sur grand ecran). */
.pr-page .pr-creation .pr-champs>.pr-aide{margin-top:-8px}
@media (min-width:701px){.pr-page .pr-creation .pr-champs>.pr-aide{grid-column:2}}

/* SUR TELEPHONE, LE LIEN VERS LES DROITS DES ENSEIGNANTS APRES L AIDE DU RESPONSABLE : pose a cote de la liste sur
   grand ecran, il passait entre la liste et sa phrase d aide une fois la grille sur une colonne. */
@media (max-width:700px){.pr-etape:has(select[name=responsable]){display:flex;flex-direction:column}.pr-etape:has(select[name=responsable])>.pr-champs{display:contents}.pr-etape:has(select[name=responsable]) .pr-lien-champ{order:1}}

/* LES GUIDES PAS A PAS ALIGNES PAR RANGEE : le titre sur deux lignes d une carte decalait sa description et ses
   etapes. Titre, description et etapes partagent les rangees de la grille. */
.carte-parcours{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start}
.carte-parcours>p{margin:0}

/* LES VIGNETTES DES VIDEOS SANS LA BANDE DES LEGENDES : l image d apercu est tiree du film, dont le haut (117 px sur
   1 080) est le bandeau vide des legendes. La vignette montre l image a partir du bas, au format 2:1, et laisse ce
   bandeau hors cadre. */
.didacticiel-vignette img{aspect-ratio:2/1;object-position:50% 100%}

/* LA MESSAGERIE AUX COULEURS DE L INTERFACE : titre, intertitres et boutons y etaient gris ardoise (#41596b), plus
   clairs que partout ailleurs, et « Apercu », bouton plein bleu nuit, paraissait plus fort que « Envoyer ». Le titre
   et l introduction reprennent ceux des autres pages, les intertitres l encre et le gras, le bouton principal et
   l onglet choisi l accent ; « Apercu » et « Enregistrer le brouillon » deviennent des boutons secondaires. */
.messagerie-ouverte .entete-messagerie h1{color:var(--encre);font-size:clamp(24px,2.2vw,32px);font-weight:700;letter-spacing:-.03em}
.messagerie-ouverte .messagerie-intro{font-size:15px;color:var(--encre-douce)}
.messagerie-ouverte :is(.fil-vide h2,.titre-redaction){color:var(--encre);font-weight:700}
.messagerie-ouverte .nouveau-message{min-height:42px;padding:8px 16px;border-color:var(--accent);background:var(--accent);font-size:15px;font-weight:650}
.messagerie-ouverte .nouveau-message:hover{background:var(--accent);filter:brightness(.96)}
.messagerie-ouverte .messagerie>.rail>a.courant{color:var(--accent);box-shadow:inset 0 -2px var(--accent)}
.messagerie-ouverte .boite .ouverte{border-left-color:var(--accent)}
.messagerie-ouverte .redaction button[type=submit]{background:var(--accent);border-color:var(--accent)}
.messagerie-ouverte .redaction-actions button:is([data-apercu],.discret){background:var(--carte);color:var(--accent);border:1px solid #cfd8dd}

/* LA LISTE DES CONVERSATIONS SANS CADRE : une carte a bord arrondi, collee aux deux bords de sa colonne, doublait le
   bord gauche et le separateur. Les conversations deviennent des lignes pleine largeur, separees d un filet, sous un
   filet qui les detache de la recherche. */
.messagerie-ouverte .colonne-liste .boite{border:0;border-top:1px solid #e6ecef;border-radius:0;background:transparent}

/* LA BARRE DE MISE EN FORME ALIGNEE : les boutons gardaient la marge haute de tout bouton (18 px) et tombaient 9 px
   sous les listes voisines, en Arial 12 px. Listes et boutons prennent la police de la page et une meme hauteur, sur
   une meme ligne ; B, I, U et S sont carres. Sur telephone, chaque rangee defile de cote au lieu de s etaler sur cinq
   lignes, a la hauteur du doigt ; la barre reste dans la largeur du formulaire. */
.messagerie-ouverte .redaction-outils{min-width:0}
.messagerie-ouverte .redaction-rang{align-items:center;gap:6px}
.messagerie-ouverte .redaction-rang>:is(button,select){height:32px;min-height:32px;margin:0;padding:0 10px;font:inherit;font-size:13px;line-height:1;border-radius:6px}
.messagerie-ouverte .redaction-rang>select{padding-right:28px}
.messagerie-ouverte .redaction-rang>button:has(>:is(b,i,u,s)){width:32px;padding:0}
@media(max-width:750px){
 .messagerie-ouverte .redaction-rang{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}
 .messagerie-ouverte .redaction-rang>:is(button,select){flex:none;height:40px;min-height:40px}
 .messagerie-ouverte .redaction-rang>button:has(>:is(b,i,u,s)){width:40px}
}

/* LE LIBELLE « MESSAGE » AU-DESSUS DE LA BARRE, LA BARRE ACCOLEE A SON CHAMP : le libelle s intercalait entre la barre
   de mise en forme et la zone de texte, qu il separait de 50 px. Il passe au-dessus de la barre (ordre de la grille,
   apres l adresse et la reponse citee) ; barre et zone de texte forment un seul cadre, coins arrondis en haut pour
   l une, en bas pour l autre, tant que le panneau du lien est ferme. */
.messagerie-ouverte .redaction>*{order:1}
.messagerie-ouverte .redaction>:is(.cite,.erreur,.redaction-adresse,.redaction-individuelle,label[for=corps]){order:0}
.messagerie-ouverte .redaction-outils:not([hidden])+.redaction-lien[hidden]+label[for=corps]+textarea+.redaction-texte{margin-top:-14px;border-top:0}

/* LE BAS DU FORMULAIRE DE REPONSE : la liste vide des fichiers choisis, la ligne d etat vide et la marge haute des
   boutons laissaient pres de 90 px de blanc avant « Envoyer ». */
.messagerie-ouverte .redaction :is(ul[data-fichiers],p[data-statut]):empty{display:none}
.messagerie-ouverte .redaction-actions{padding-top:10px}
.messagerie-ouverte .redaction-actions button{margin:0}

/* LE CHOIX DU DESTINATAIRE : le champ « Nom ou adresse » gardait un habit a lui (fond teinte, par une regle a
   identifiant), et un filet trainait sous le dernier nom. Meme habit que les autres champs, noms alignes sur le texte
   du champ ; sur telephone, le bloc perd son cadre, qui en faisait une carte dans la carte de la messagerie. */
.messagerie-ouverte #destinataire{padding:9px 12px;background:var(--carte);border-color:#cfd8dd;border-radius:8px}
.messagerie-ouverte #resultats-destinataires li:last-child{border-bottom:0;padding-bottom:0}
.messagerie-ouverte #resultats-destinataires .destinataires a{padding-inline:12px}
@media(max-width:640px){.messagerie-ouverte .choix-destinataire{padding:0;border:0;background:transparent}}

/* LA CARTE « MA JOURNEE » : ses boutons, passes l un sous l autre, se touchaient (des blocs en ligne, sans ecart) ;
   ils se rangent en ligne souple, 8 px entre eux dans les deux sens. Sa marge interieure (24 px, 18 px sur
   telephone) decalait son texte de celui des cartes empilees dessous (20 px) : la meme pour toutes. */
.journee-actions>div{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.journee-actions>div>p{flex:1 0 100%;margin:0 0 4px}
.campus-accueil .journee-prof{padding:20px}

/* LA CESURE DES TITRES DE TUILE RESERVEE AUX MOTS LONGS (apres les deux regles validees de cesure des tuiles) : sans
   limite, la cesure coupait aussi des titres qui passaient a la ligne sur leurs espaces (« Stage, Dispensa- / rium et
   Memoire ») et placait « Inschrijvingsaan- / vragen » au plus loin. Elle ne touche plus que les mots d au moins seize
   lettres, dont huit avant la coupure et neuf apres : « Inschrijvings- / aanvragen », a la jointure du mot compose ;
   le francais ne bouge plus. */
.admin-campus .campus-tuile .campus-tuile-haut>.campus-tuile-titre{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:16 8 9;-webkit-hyphenate-limit-before:8;-webkit-hyphenate-limit-after:9}

/* LA PASTILLE D UNE TUILE SUR DEUX LIGNES : « Document a signer d abord », trop long pour une demi-largeur de
   telephone, faisait une goutte a bords ronds. Un arrondi de 13 px garde la pilule sur une ligne et donne un
   rectangle aux coins ronds sur deux. */
.admin-campus .campus-tuile-verrou{border-radius:13px}

/* LES GROUPES DE « SUPPORTS DE COURS » : la ligne du site et de la formation de chaque groupe, posee 23 px sous le
   tableau precedent et 39 px au-dessus de son propre titre, se lisait comme la legende du tableau du dessus. Elle
   devient le surtitre de son groupe, 2 px au-dessus du titre ; 36 px separent les groupes. */
.catalogue-enseignant .bloc-cours{margin-top:36px}
.catalogue-enseignant .bloc-cours>p.note:first-child{margin:0 0 2px}
.catalogue-enseignant .bloc-cours>p.note:first-child+h2{margin-top:0}

/* LE LIEN AU-DESSUS DU TITRE EN SURTITRE : « Espace enseignant », souligne au-dessus du titre de l horaire, du
   planning et des cotes, doublait le fil de la page et ajoutait une ligne de liens. Il prend l habit du surtitre des
   autres pages (petites capitales), sans cesser d etre un lien. */
body.interface main>p.pages:first-child:has(>a:only-child){margin:0 0 9px;font-size:11px;font-weight:650;letter-spacing:1.4px;text-transform:uppercase}
body.interface main>p.pages:first-child>a:only-child{color:inherit;opacity:.85;text-decoration:none}
body.interface main>p.pages:first-child>a:only-child:hover{text-decoration:underline}

/* LES CHOIX DE PAGE EN SELECTEUR : « Mon horaire / Planning general » (un mot en gras puis un lien souligne) et les
   periodes des examens de l etudiant (trois liens semblables, sans choix visible, dont le compteur tombait seul a la
   ligne) prennent le selecteur en pilule de « Supports de cours » : le choix courant sur l accent, les autres en
   gris, chaque libelle d un seul bloc. Sur telephone, ou ils passent a la ligne, chaque choix devient sa pastille. */
main>nav.pages:has(>[aria-current]){flex-wrap:wrap;gap:4px;width:fit-content;max-width:100%;margin:12px 0 22px;padding:3px;border:1px solid var(--trait);border-radius:999px;background:var(--carte);font-size:14px}
main>nav.pages:has(>[aria-current])>:is(a,strong){padding:6px 14px;border-radius:999px;color:var(--encre-douce);font-weight:600;text-decoration:none;white-space:nowrap}
main>nav.pages:has(>[aria-current])>a:hover{color:var(--encre)}
main>nav.pages:has(>[aria-current])>[aria-current]{background:var(--accent);color:#fff}
@media(max-width:780px){
 main>nav.pages:has(>[aria-current]){gap:6px;padding:0;border:0;background:none}
 main>nav.pages:has(>[aria-current])>:is(a,strong){border:1px solid var(--trait);background:var(--carte)}
 main>nav.pages:has(>[aria-current])>[aria-current]{border-color:var(--accent);background:var(--accent)}
}

/* LES GESTES DU CALENDRIER DANS LA PALETTE DE LA PAGE : « Prochaine seance », a contour gris comme les fleches des
   mois, prend leur couleur au lieu de l orange ; « Voir la seance » se souligne, comme un lien. */
.hm-mois .hm-prochaine{color:var(--accent)}
.hm-seance>summary>.hm-ouvrir{text-decoration:underline}

/* LE PLANNING, UN TABLEAU PAR JOUR, ALIGNE : chaque tableau repartissait ses colonnes selon son contenu, et Annee,
   Local ou Matiere changeaient de place d un jour a l autre. Chaque colonne a la meme part de la largeur dans tous
   les tableaux, l heure sur une ligne. Le bouton Filtrer tombait 4 px sous les listes (marge basse des libelles). Le
   selecteur d annee garde l annee au centre, une fleche pale du cote ou il n y a pas d annee, et les mois sans seance,
   a 2,2:1, redeviennent lisibles. Un local manquant, ecrit en note, se cale sur la ligne des autres valeurs. */
@media(min-width:641px){
 .planning-tableau>table.grille>thead th:nth-child(1){width:12%}
 .planning-tableau>table.grille>thead th:nth-child(2){width:26%}
 .planning-tableau>table.grille>thead th:nth-child(3){width:8%}
 .planning-tableau>table.grille>thead th:nth-child(4){width:10%}
 .planning-tableau>table.grille>thead th:nth-child(5){width:12%}
 .planning-tableau>table.grille>thead th:nth-child(6){width:16%}
 .planning-tableau>table.grille>thead th:nth-child(7){width:16%}
 .planning-tableau>table.grille>tbody td:first-child{white-space:nowrap}
}
.planning-tableau td>span.note:only-child{margin-top:0}
.planning-filtres>label{margin-bottom:0}
.annee-du-calendrier>:is(a,span){min-width:24px;text-align:center}
.annee-du-calendrier>span:empty::before{content:"\2190";color:var(--encre-douce);opacity:.4;font-size:18px}
.annee-du-calendrier>span:last-child:empty::before{content:"\2192"}
.calendrier-mois .vide-mois{opacity:1}

/* LA FEUILLE DE PRESENCES : 60 px de vide en tete de carte (marge haute du titre), le champ de recherche colle a son
   libelle et plus haut que ses boutons, la consigne posee sur le tableau, les noms 5 px au-dessus des choix (la marge
   haute generale des libelles descendait les pastilles). Sur telephone, un etudiant par bloc : son nom sur toute la
   largeur, puis ses cinq choix en grille de deux colonnes egales, au lieu d une colonne de nom etroite et de
   pastilles en desordre. */
.feuille-journee>h2:first-child{margin-top:0}
.feuille-journee .outils-journee{align-items:flex-end}
.feuille-journee .outils-journee>label{display:flex;flex-direction:column;gap:6px;margin:0}
.feuille-journee .outils-journee>button{min-height:42px;margin:0}
.feuille-journee .outils-journee+p.note{margin:0 0 12px}
.feuille-journee .grille td{vertical-align:middle}
.choix-journee label{margin:0}
@media(max-width:640px){
 .feuille-journee .grille>thead{display:none}
 .feuille-journee .grille,.feuille-journee .grille>tbody,.feuille-journee .grille>tbody>tr,.feuille-journee .grille>tbody>tr>td{display:block}
 .feuille-journee .grille>tbody>tr{padding:12px 12px 14px;border-bottom:1px solid var(--trait)}
 .feuille-journee .grille>tbody>tr:last-child{border-bottom:0}
 .feuille-journee .grille>tbody>tr>td{padding:0;border:0}
 .feuille-journee .grille>tbody>tr>td:first-child{margin-bottom:8px;font-weight:600}
 .feuille-journee .choix-journee{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
}

/* LE SOMMAIRE D UN COURS SANS CHAPITRE : « Aucun chapitre pour le moment » partait 10 px a gauche du titre du sommaire
   et des entrees, et touchait l entree suivante. Meme retrait, 12 px dessous. Cote etudiant (et apercu), le
   panneau de droite dit deja « Aucun chapitre publie » : le sommaire ne le repete plus. */
.cours-arbre>p.note{margin:0 0 12px;padding:0 10px}
.cours-explorateur:has(>.parcours-liste>p.vide) .cours-arbre>p.note{display:none}

/* LA PHRASE SOUS « A RANGER » posee sur le filet du premier support (3 px) : 12 px entre les deux. */
.parcours-chapitre>h2+p.note{margin:0 0 12px}

/* LES GESTES D UN SUPPORT D UN MEME GABARIT : « Telecharger » en lien souligne, « Gerer » en gras bleu-vert et
   « Retirer ce support » en gras rouge, chacun avec le triangle de depliage, qui rappelait le bouton de lecture du
   didacticiel. Trois petits boutons a contour, sans triangle, le rouge garde pour le retrait ; dans la barre du
   cours, le lien du didacticiel a la graisse des trois autres. */
.parcours-fichier-actions>a,.parcours-fichier-actions>details>summary{display:inline-flex;align-items:center;min-height:34px;padding:5px 12px;border:1px solid #cfd8dd;border-radius:8px;background:var(--carte);color:var(--accent);font-size:13px;font-weight:600;line-height:1.3;text-decoration:none;list-style:none;cursor:pointer}
.parcours-fichier-actions>details>summary::-webkit-details-marker{display:none}
.parcours-fichier-actions>:is(a,details>summary):hover{background:var(--accent-clair)}
.parcours-fichier-actions>details.retrait-support>summary{border-color:#f0d6d3;color:var(--alerte)}
.parcours-fichier-actions>details.retrait-support>summary:hover{background:var(--alerte-fond)}
.parcours-entete-actions>a.didacticiel-lien{font-weight:inherit}

/* LA DEMANDE DE DISPENSE : sa carte touchait le tableau et s etirait sur toute la largeur autour de champs de 820 px.
   24 px la separent du tableau, et elle prend la mesure du formulaire. Son champ « Annee scolaire », ecrit sans
   type, echappait a l habit des champs : texte colle au bord, bord en relief ; tout champ sans type le recoit. */
main>section.carte:has(>#demande){max-width:var(--mesure-formulaire)}
main>.grille-cadre+section.carte:has(>#demande){margin-top:24px}
body.interface input:not([type]){padding:9px 12px;font:inherit;color:var(--encre);border:1px solid #cfd8dd;border-radius:8px}

/* MA FICHE, EN COMPLEMENT DES REGLES VALIDEES (jauge a 20 px du formulaire, libelles espaces) : les cartes du
   formulaire gardaient 10 px entre elles, et le lien du mot de passe touchait la carte de la photo. 20 px entre toutes
   les cartes, de l air autour du lien. */
.completion~form.formulaire{gap:20px}
.completion~p.gestes{margin:14px 0 24px}

/* UNE NOTE POSEE JUSTE AVANT UNE CARTE (« Aucun reglement ni convention en vigueur ») la touchait (3 px) et semblait
   lui appartenir : 16 px la separent de la carte. */
main.moyen>p.note:has(+section.carte){margin-bottom:16px}

/* LES SEANCES D UN COURS (tableau devenu table.grille seances-cours) : l horaire et les deux gestes restent d un
   bloc ; trop larges pour un telephone, ils font passer le tableau en fiches (script des finitions). */
.seances-cours td:is(:nth-child(2),:nth-child(4)){white-space:nowrap}

/* LA PAGE D UN DIDACTICIEL : la note sur les exemples fictifs et les liens de retour attendaient la fin de la liste
   des etapes, plus haute que la video, et flottaient 120 a 140 px sous le lecteur. Sur grand ecran, la page devient
   la grille : lecteur, note et liens dans la colonne de gauche, les etapes a droite sur toute leur hauteur. */
@media(min-width:901px){
 main.didacticiel{display:grid;grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:repeat(5,auto) 1fr;column-gap:20px;align-items:start}
 main.didacticiel>*{grid-column:1 / -1}
 main.didacticiel>.didacticiel-grille{display:contents}
 main.didacticiel .didacticiel-video,main.didacticiel>:is(.note,.didacticiel-acces){grid-column:1}
 main.didacticiel .didacticiel-etapes{grid-column:2;grid-row:span 4}
}

/* LA RECHERCHE DE « MES COURS » ALIGNEE : les libelles gardaient leur marge de formulaire et tombaient 5 px sous le
   texte des champs ; « Rechercher », bouton discret de 33 px, avait l air desactive. Libelles centres sur leur champ,
   bouton principal a la hauteur des champs ; sur telephone, chaque libelle au-dessus de son champ, tout en pleine
   largeur, le bouton sur sa ligne. La recherche des supports (sans liste) ne change pas. */
.recherche-supports:has(select)>label{margin:0}
body.interface main .recherche-supports:has(select)>button.discret:not(:disabled){min-height:42px;padding:9px 16px;border-color:var(--accent);background:var(--accent);color:var(--encre-action);font-size:15px}
@media(max-width:780px){
 .recherche-supports:has(select){flex-direction:column;align-items:stretch;gap:4px}
 .recherche-supports:has(select)>label{margin:10px 0 0}
 .recherche-supports:has(select)>label:first-child{margin-top:0}
 .recherche-supports:has(select)>:is(input,select,button){width:100%;max-width:none}
 .recherche-supports:has(select)>button{margin-top:10px}
}

/* LA CARTE « RECHERCHER UN SUPPORT » sous le contenu d un cours portait l ombre des cartes, le cadre du cours au-dessus
   n en a pas : meme elevation, bordure seule. */
.parcours-avances.carte{box-shadow:none}

/* LE BOUTON DU DOCUMENT ORIGINAL, dans l en-tete d un document a signer ou du reglement, etait en 12 px, bien plus
   petit que les autres boutons de l espace : 14 px, comme un lien en bouton. */
.rgl-entete>.bouton{font-size:14px}

/* LES INTRODUCTIONS DE « MES RESULTATS » ET DE « MES INSCRIPTIONS », ecrites a l encre du titre, prennent le gris des
   introductions des autres pages. */
main>p.campus-surtitre~p.sous-titre+p:not([class]),main.res-page>h1+p:not([class]){color:var(--encre-douce)}

/* LA LIGNE D UNE PIECE DE DIPLOME : la taille du fichier (.note) gardait sa marge haute de note et tombait 6 px sous
   la pastille et le bouton de la meme rangee. */
.dossier-piece>.note{margin:0}

/* LE MENU DE L ENSEIGNANT ET DE L ETUDIANT NE SAUTE PLUS : le gras de l entree ouverte faisait passer « Reglement et
   convention » sur deux lignes, et tout le menu descendait de 21 px sur cette page. L entree active se marque par son
   fond, sa couleur et un filet a gauche, a la graisse des autres ; « Parcours guides » garde son habit. La pastille
   de couleur d une entree sur deux lignes se cale sur la premiere ligne au lieu du milieu. */
.admin-campus .campus-lien:not(.didacticiel-menu)[aria-current=page]{font-weight:inherit;box-shadow:inset 3px 0 var(--accent)}
.navigation-laterale .campus-point{align-self:flex-start;margin-top:calc(.8em - 5px)}

/* LE HAUT DE PAGE SUR TELEPHONE, PLUS COURT : apres l en-tete ramene a une ligne, la barre « Precedent » et fil de la
   page gardait 68 px de haut et « Menu et rubriques » 52 px. Resserres a 55 et 45 px, ils rendent 21 px au contenu ;
   le bouton Precedent garde sa cible de 38 px. */
@media(max-width:780px){
 body.interface .reperes-page{min-height:0;padding-block:8px}
 .menu-mobile>summary{padding-block:10px}
}

/* LE HAUT D UNE CARTE DE FORMULAIRE : le premier element visible du formulaire (libelle, note) gardait sa marge haute
   sous le rembourrage de la carte, soit pres de 40 px en haut contre 20 en bas. Il la perd quand le formulaire ouvre
   la carte ; apres un message d erreur, il la garde. */
.carte>form:first-child>:nth-child(1 of :not(input[type=hidden],script)){margin-top:0}

/* UN LIEN HABILLE EN BOUTON A LA TYPOGRAPHIE D UN BOUTON : « Changer mon mot de passe » (a.bouton) gardait sa graisse
   moyenne et un arrondi de 12 px a cote de « Enregistrer la photo » (650, 8 px). Meme graisse, meme arrondi. */
a.bouton{font-weight:650;border-radius:8px}

/* MES REGLAGES : la premiere carte collait au titre, l aide de la photo flottait a 44 px de son champ en corps de
   texte, et sur telephone le courriel se coupait au milieu d un mot a cote de l avatar, cale en haut. 24 px sous le
   titre, l aide en petit gris sous son champ ; le nom et le courriel restent centres sur l avatar et passent dessous,
   entiers, quand le courriel ne tient pas a cote. */
.reglages-profil>h1{margin-bottom:24px}
.reglages-profil .aide{margin:6px 0 0;font-size:13px;color:var(--encre-douce)}
.reglages-profil .profil-presentation{flex-wrap:wrap;row-gap:12px;overflow-wrap:break-word}
@media(max-width:480px){.reglages-profil .profil-presentation{align-items:center}}

/* LES TITRES DE TUILE SE COUPENT A LA SYLLABE. Sur telephone, « Inschrijvingsaanvragen » se coupait au hasard
   (« Inschrijvingsaanvr » / « agen ») : la cesure de la langue de la page passe avant la coupe forcee. */
.admin-campus .campus-tuile-titre{-webkit-hyphens:auto;hyphens:auto}

/* LA DEMANDE D INSCRIPTION, UN SEUL CHOIX DE LA LANGUE. La page tient sa langue de son adresse (/candidature/fr,
   /candidature/nl) : les pastilles FR et NL communes aux pages publiques n y changeaient rien, et la ligne
   « BELSO · FR · NL » sous le logo, qui la changeait, ne disait pas la langue affichee. Les pastilles communes
   s effacent de cette page ; ses deux liens deviennent les pastilles, a droite du logo, la langue affichee en plein. */
body:has(main.candidature-page) .bandeau-langues{display:none}
.candidature-entete{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.candidature-langues{display:flex;gap:6px;margin:0 0 1rem auto}
.candidature-langues a{display:inline-flex;align-items:center;min-height:32px;padding:4px 10px;border:1px solid var(--trait);border-radius:8px;color:var(--encre-douce);font-size:13px;font-weight:600;text-decoration:none}
.candidature-langues a[aria-current]{border-color:var(--accent);background:var(--accent);color:var(--encre-action)}

/* LA DEMANDE D INSCRIPTION, LA RANGEE DES CHOIX : le bouton « Comparer les paiements » tombait 4 px sous les listes
   (la marge basse des libelles d un cote, la marge haute des boutons de l autre) et le cadre gardait 40 px au-dessus du
   premier libelle contre 20 ailleurs. Sans ces marges, le bouton borde le bas des listes et le cadre a la meme marge
   sur ses quatre cotes. */
.candidature-choix label,.candidature-choix button{margin:0}

/* LE NOUVEAU MOT DE PASSE DANS LA CARTE D ACCES : ses liens en bouton (« Se connecter », « Recevoir un lien
   securise ») se centrent sous la consigne, comme le reste de la carte. */
.acces-carte>a.bouton{display:block;width:fit-content;margin:18px auto 0}

/* L EN-TETE DU SUPER SUR TELEPHONE. Le choix du site posait son titre « Site » seul sur une ligne et encadrait toute
   la largeur pour trois boutons sur les deux tiers (130 px vides) ; les trois « Voir comme » tenaient deux lignes ; le
   tout debordait de 4 px la marge des pages. Le titre passe devant le cadre, les boutons se partagent sa largeur ; les
   « Voir comme » tiennent une rangee de trois, leur liste s ouvre sur toute la largeur au lieu de sortir de l ecran ;
   l en-tete prend la marge des pages. */
@media (max-width:800px){
 body.interface .bandeau{padding-inline:var(--page-cote)}
 body.interface .bandeau .prise-de-role{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
 body.interface .bandeau .menu-role{position:static;min-width:0}
 body.interface .bandeau .menu-role>summary{display:flex;align-items:center;justify-content:center;height:100%;padding:5px 6px;font-size:12px;line-height:1.3;text-align:center}
 body.interface .bandeau .panneau-role{right:0;width:auto;max-width:none}
}
@media (max-width:760px){
 body.interface .bandeau form.selecteur-site{display:flex;align-items:center;gap:10px;padding:0}
 body.interface .bandeau .selecteur-site-choix{flex:1 1 auto;min-width:0}
 body.interface .bandeau .selecteur-site-choix button{flex:1 1 0;min-width:0;padding-inline:6px}
}

/* LE JOURNAL, LA COLONNE ACTION : son libelle se coupait sur deux lignes quand le detail gardait 250 px vides. Sur
   grand ecran, elle garde de quoi ecrire un libelle sur une ligne ; en dessous, le partage automatique demeure. */
@media (min-width:1280px){.grille td.action-journal{min-width:21rem}}

/* « A TRAITER EN PRIORITE » ET SON LIEN SUR TELEPHONE : le titre et « Voir tous les comptes » se disputaient une ligne,
   coupes chacun sur deux, lignes de base decalees. Quand la place manque, le lien passe sous le titre. */
.pilotage-section-entete:has(>a){flex-wrap:wrap;row-gap:4px;margin-bottom:13px}
.pilotage-section-entete:has(>a)>h2{margin-bottom:0}

/* LA BARRE DES ACTIONS GROUPEES DES INCIDENTS : « Marquer corrige » (42 px, avec la marge haute des boutons) et les
   deux autres (34 px, remontes de 9 px) ne s alignaient pas, et les boutons secondaires desactives perdaient leur
   dessin (texte gris, bord pale). Trois boutons de 42 px, centres ; desactive, chacun garde son dessin, estompe. */
.incident-actions button{margin:0;min-height:42px}
.incident-actions button.discret:disabled{border-color:#cfd8dd;background:var(--carte);color:var(--accent-fonce)}

/* LE SUIVI D UN INCIDENT : « A corriger », l etat en cours, faisait 60 px de haut contre 42, son libelle 11 px plus
   haut, en gris clair presque illisible (2,5:1). Trois boutons de 42 px sur une ligne ; l etat en cours se lit comme un
   choix fait : fond teinte, bord et texte fonces, sans l estompe des boutons desactives. */
.incident-statuts{align-items:center}
.incident-statuts button{margin:0;min-height:42px}
.incident-statuts button[aria-pressed="true"]{padding:8px 16px;border:1px solid var(--accent);background:var(--accent-clair);color:var(--encre);font-size:15px;opacity:1;cursor:default}

/* LE TITRE D UN INCIDENT FAIT D UN CHEMIN (« AttributeError dans coeur/adaptateurs/...py:_stockage ») : sans espace, il
   ne se coupait pas et elargissait la page a 600 px sur telephone. Il passe a la ligne ou il faut. */
.pilotage-entete>div{min-width:0}
.pilotage-entete h1{overflow-wrap:anywhere}

/* LA DEMANDE D INSCRIPTION AVANT LE CHOIX : « Choisis une formation et ton profil... » etait une ligne nue sous le
   cadre, comme un reste de texte. Elle devient l encart ou les tarifs vont s afficher : pointille, texte discret. */
.candidature-attente{margin:16px 0 0;padding:22px 20px;border:1px dashed #cfd8dd;border-radius:var(--rayon);color:var(--encre-douce);text-align:center}

/* LE LOGO SANS SA SIGNATURE ILLISIBLE. Reduite avec le logo (104 px de large sur la demande d inscription, 118 px de
   haut sur les ecrans d acces), « The Belgian School of Osteopathy » ne faisait plus que 5 a 8 px : une trace grise
   sous « BELSO ». Comme dans l en-tete de l interface, l image est coupee sous « BELSO », a la meme largeur ; son
   texte de remplacement ne change pas. Dans l interface, la demande d inscription ne repete pas le logo de l en-tete. */
.acces-logo img{width:127px;height:101px;object-fit:cover;object-position:top}
.candidature-page .candidature-logo{height:83px;object-fit:cover;object-position:top}
body.interface .candidature-page .candidature-logo{display:none}

/* LES LISTES DE LA DEMANDE D INSCRIPTION : la fleche du systeme collait au bord droit (4 px) quand le texte partait a
   17 px du bord gauche. Une fleche dessinee a 16 px du bord, de la couleur du texte, et le texte qui s arrete avant. */
.candidature-page select{-webkit-appearance:none;appearance:none;padding-right:40px;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 21px) 50%,calc(100% - 16px) 50%;background-size:5px 5px;background-repeat:no-repeat}

/* LES PASTILLES DE LANGUE DES PAGES PUBLIQUES : collees l une a l autre (1 px entre les bords), la langue affichee
   marquee par un seul soulignement, et un bord droit a 26 px qui ne tombait sur rien. Espacees de 6 px, la langue
   affichee en plein, calees sur la marge des pages (32 px, 20 px sur telephone). */
.bandeau-langues{padding:12px 32px 0}
.bandeau-langues .langues{gap:6px;margin:0}
.bandeau-langues button.discret.actif{text-decoration:none;border-color:var(--accent);background:var(--accent);color:var(--encre-action)}
body.acces .bandeau-langues button.discret.actif{border-color:#ffffff;background:#ffffff;color:#2d4a1d}
@media (max-width:780px){.bandeau-langues{padding:12px 20px 0}}

/* LE BAS DE LA CARTE DE CONNEXION : « Mot de passe oublie ? » cale a gauche en 15 px sous le bouton, la note centree
   en 12 px dessous, et un mot seul en fin de note (« courriel. », « e- » / « mail » en neerlandais). Le lien se centre
   comme la note, et la note equilibre ses deux lignes. */
.connexion-ensemble .acces-carte>form+p{margin:18px 0 0;font-size:14px;text-align:center}
.connexion-aide{text-wrap:balance}

/* LE CHAMP ACTIF DES ECRANS D ACCES : le courriel, actif des l arrivee, portait trois traits (contour vert de 2 px,
   filet blanc, bordure), bien plus lourd que le champ voisin. Un seul trait, la bordure verte, et un halo clair ; le
   contour reste, transparent, pour le mode a contraste eleve. */
.acces-carte input:focus-visible{outline:2px solid transparent;outline-offset:1px;border-color:var(--accent);box-shadow:0 0 0 3px #45783566}

/* LA FLECHE DU PIED DES TUILES : en 12 px, comme « Ouvrir », elle ne faisait que 6 px, presque invisible. */
.admin-campus .campus-tuile-bas>[aria-hidden="true"]{font-size:16px;line-height:1}

/* « DONNEES DE VOS SITES », DANS L EN-TETE DU SUIVI, flottait entre le surtitre et le titre, centre sur les deux : il
   se pose sur la ligne du titre « A traiter ». */
.admin-campus .campus-priorites-entete{align-items:flex-end;align-items:last baseline}

/* LE « BELSO » A DROITE DU TITRE DE BIENVENUE, petit et gris, sans role lisible, doublait le logo de l en-tete : il
   s efface, comme il le faisait deja sur telephone. */
.admin-campus .campus-ecole{display:none}

/* LES FICHES DES COMPTES ADMINISTRATEURS : la colonne des libelles gardait 42 % de chaque bloc, meme pour « Mot de
   passe » ; « desactive (dispense enregistree) » passait sur deux lignes. Elle prend la largeur de ses libelles, 45 %
   au plus ; sur telephone, le libelle reste au-dessus de sa valeur. */
@media (min-width:641px){.pilotage-compte .pilotage-synthese dl{grid-template-columns:fit-content(45%) minmax(0,1fr);align-items:baseline}}

/* « MODIFIER LES ACCES » ET LE NOM DU COMPTE : le nom, deja titre de la carte, etait repete en petit gris apres le
   lien, et passait seul sur sa ligne sur telephone. Il ne sert plus qu au lecteur d ecran, qui distingue ainsi les
   reglages de chaque compte. */
.pilotage-reglages summary .pilotage-cible{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* LA CARTE « FAIRE ADMINISTRATEUR UN ENSEIGNANT » prend la marge interieure des cartes de comptes (24 px, 16 px sur
   telephone) : titre, texte et depliant tombaient 4 px plus a gauche que ceux des cartes du dessus. */
.carte.pilotage-promotion{padding:1.5rem}
@media (max-width:640px){.carte.pilotage-promotion{padding:1rem}}

/* L EN-TETE DES ADMINISTRATEURS : sous 640 px, la pastille du nombre de comptes passe sous le titre ; elle avait 45 px
   de vide au-dessus (la marge du sous-titre et l ecart de la ligne) et touchait la note. La marge passe du sous-titre
   au bas de l en-tete. */
.pilotage-admins .pilotage-entete{margin-bottom:16px}
.pilotage-admins .pilotage-entete .sous-titre{margin-bottom:0}

/* « A TRAITER EN PRIORITE » : l aide de chaque ligne etait repoussee au bord droit, a plus de 600 px de son libelle,
   et les lignes a zero pesaient autant que celle qui attend. L aide passe sous son libelle, comme sur telephone ; une
   ligne a zero s efface en gris. */
.pilotage-alertes a{flex-direction:column;align-items:flex-start;gap:2px}
.pilotage-alertes a.pilotage-calme strong{color:#637369;font-weight:500}

/* LES CARTES DE CHIFFRES DU PILOTAGE : « definitif. » tombait seul sur sa ligne dans trois cartes sur quatre. Le texte
   d aide equilibre ses lignes. */
.pilotage-chiffre small{display:block;text-wrap:balance}

/* LES CARTES DE CHIFFRES DU PILOTAGE SUR TELEPHONE : quatre cartes pleine largeur d environ 150 px, calees a gauche,
   un ecran entier avant la suite (pilotage et incidents). Elles vont par deux, un peu plus serrees. */
@media (max-width:800px){.pilotage-chiffres{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.pilotage-chiffre{padding:14px}.pilotage-chiffre h2{font-size:14px}.pilotage-chiffre p{margin:8px 0 4px}.pilotage-chiffre strong{font-size:26px}.pilotage-chiffre small{font-size:12px;line-height:1.45}}

/* LA LIGNE DE FILTRES DU PILOTAGE (incidents, comptes) : « Filtrer » tombait 4 px sous les listes (la marge basse des
   libelles) et « Effacer les filtres » se calait sur le bas des champs. Libelles et bouton sans marge, tous a 42 px,
   le lien centre sur cette hauteur ; sur telephone, les champs empiles gardent 14 px entre eux. */
.pilotage-filtres label{margin:0}
.pilotage-filtres button{margin:0;min-height:42px}
.pilotage-filtres>a{display:inline-flex;align-items:center;min-height:42px}
@media (max-width:800px){.pilotage-filtres{row-gap:14px}}

/* LES DATES DU TABLEAU DES INCIDENTS : « Derniere fois » coupait la date et l heure sur deux lignes, « Apparu » non.
   Une date tient sur sa ligne ; la version sous « Apparu » garde son retour a la ligne. */
.incident-section .pilotage-tableau td:nth-child(n+6){white-space:nowrap}
.incident-section .pilotage-tableau td:nth-child(n+6) small{white-space:normal}

/* LA FICHE D UN INCIDENT, LE PREMIER BLOC : les valeurs, a cote de libelles de 42 % de colonne, se coupaient au trait
   d union (« DESKTOP- » / « NREA ») ou laissaient la fin du message seule sur sa ligne ; et chaque colonne portait un
   filet haut colle au bord de la carte, sans rien au-dessus. Le libelle passe au-dessus de sa valeur, comme sur
   telephone, et le filet ne separe plus que des colonnes empilees. */
main.pilotage .pilotage-synthese dl{grid-template-columns:minmax(0,1fr);gap:.15rem}
main.pilotage .pilotage-synthese dd{margin-bottom:.55rem}
.pilotage-section.pilotage-synthese>section{border-top:0;padding-top:0}
@media (max-width:1000px){.pilotage-section.pilotage-synthese>section+section{border-top:1px solid var(--trait);padding-top:1rem}}

/* LES LIGNES DU CODE EN CAUSE : un chemin se coupait au milieu d un mot (« mesures_serveur_linux.p » / « y:65 »). Il ne
   se coupe plus qu aux espaces ; trop long pour la colonne, il defile dans son cadre. */
.incident-cadres{overflow-wrap:normal;overflow-x:auto}

/* LES EN-TETES DES TABLEAUX DU PILOTAGE prennent le dessin de ceux du journal et des listes (capitales grises de
   12 px) : deux dessins de tableau se cotoyaient dans la meme administration. */
.pilotage-tableau th{font-weight:600;color:var(--encre-douce);text-transform:uppercase;letter-spacing:.04em}

/* LA CARTE D UNE CANDIDATURE, MEME MARGE SUR LES QUATRE COTES : le premier paragraphe gardait sa marge haute et la liste vide des versements (paiement en une fois) sa marge basse, soit 41 px de vide au-dessus et au-dessous du texte contre 21 px sur les cotes. Ces marges tombent au bord de la carte ; la liste vide s efface. */
main[data-module="facturation"]:has(>a:first-child+h1)>section.carte>ul:empty{display:none}
main[data-module="facturation"]:has(>a:first-child+h1)>section.carte>:first-child{margin-top:0}
main[data-module="facturation"]:has(>a:first-child+h1)>section.carte>:is(:last-child,:has(+ul:empty:last-child)){margin-bottom:0}

/* LA PASTILLE D ETAT SE VOIT SUR UNE LIGNE TEINTEE (liste des factures) : « Impayee » et « Partielle » ont le fond rose des lignes en retard, « Payee » le vert des lignes payees ; la pastille s y fondait et son libelle semblait decale de 8 px sous l en-tete Etat. Sur ces lignes, elle prend le fond des cartes. */
#factures-liste tr:is(.ligne-retard,.ligne-payee) .etat{background:var(--carte)}

/* L AIDE DE LA COMPOSITION D UN TARIF SE DETACHE DE SON TABLEAU (tarif et versements, creer un tarif) : les champs caches du formulaire des lignes, poses entre la phrase et le cadre, echappaient a la regle commune (p.note+.grille-cadre) ; « Separez le minerval... » collait au tableau (3 px). 16 px, comme sous les autres aides. */
fieldset.bareme-formulaire+section.carte>p.note~.grille-cadre{margin-top:16px}

/* TARIFS, SUR TELEPHONE : « CREER UN TARIF » AVANT LES FILTRES. Pose sous la liste des annees, il suivait « Filtrer » a 12 px, meme bouton plein : la creation se lisait comme la suite du formulaire de filtre. Il passe sous l introduction, 16 px apres elle et 30 px avant le premier libelle, comme « Nouvelle facture ou avoir » dans les brouillons. */
@media (max-width:640px){main[data-module="facturation"] .tdb-filtres>a.tdb-principal{order:-1;margin:16px 0 4px}}

/* LES CHAMPS D UN GROUPE DE LA FACTURATION ESPACES COMME CEUX DU FORMULAIRE (echeancier, lignes d un brouillon) : dans la carte, un libelle suivait le champ du dessus a 6 px (« Montant en EUR » sous la date), alors que les rangees du formulaire sont a 10 px. 10 px entre les rangees de la carte. */
main[data-module="facturation"] form.formulaire fieldset:not([class])>div+div{margin-top:10px}

/* LES NOMS DE COLONNE DES FICHES SANS COUPURE D UN MOT COURT (facturation, telephone) : la cesure coupait « exclusief » pour remplir la ligne (« Eenheidsprijs exclu- / sief btw, EUR »). Comme pour les titres des tuiles, elle ne touche plus que les mots d au moins seize lettres (« Inschrijvingsaanvragen ») ; un mot plus court passe entier a la ligne. */
@media (max-width:640px){main[data-module="facturation"] table.grille.en-fiches>tbody>tr>:is(td,th)::before{hyphenate-limit-chars:16 8 9;-webkit-hyphenate-limit-before:8;-webkit-hyphenate-limit-after:9}}

/* LES ETATS DES SITES D UN MEME POIDS (inscriptions a facturer, parametres d emission) : le site bloque est un encart de 13 px, le site pret une ligne de texte courant de 15 px, aussi grosse que le titre de la carte. Le site pret prend le meme encart, sur le fond clair de l interface. */
#inscriptions-facturer>section.carte>p:not([class]){padding:10px 12px;border-radius:8px;background:var(--accent-clair);font-size:13px}

/* « REUNIR LES PARTS » SE DETACHE DU TABLEAU DES PARTS (fiche d un releve fractionne) : le geste collait au cadre (8 px). 16 px, comme les gestes principaux des autres listes. */
main[data-module="facturation"]>.grille-cadre+p.gestes{margin-top:16px}

/* IMPORTER DES EXTRAITS : L INTRODUCTION ET LE BOUTON A LA MESURE DES AUTRES PAGES. Le chapeau restait en 15 px quand les autres pages de la facturation l ecrivent en 13 px ; et « Previsualiser le fichier » tombait 46 px sous le champ du fichier (marge du paragraphe et marge haute du bouton), trois fois l ecart entre le libelle et son champ. Chapeau en 13 px ; 16 px entre le champ et le bouton, 16 px sous lui. */
main[data-module="facturation"]:has(#extrait)>h1+p.sous-titre{font-size:13px;line-height:1.65}
main[data-module="facturation"] form.formulaire:has(>#extrait)>p{margin:6px 0 16px}
main[data-module="facturation"] form.formulaire:has(>#extrait)>p>button{margin:0}

/* LA FICHE D UNE FACTURE ALLUME « FACTURES » DANS LE SELECTEUR : l onglet Factures etait souligne, mais aucune pastille n etait choisie sous lui (la sous-navigation ne marque que sa propre adresse). La pastille Factures prend l habit du choix courant. */
main[data-module="facturation"]:has(>.gestes-facture)>.pages-rubrique>a:is([href="/facturation"],[href^="/facturation?"]){background:var(--accent);color:var(--encre-action)}

/* LA COMMUNICATION STRUCTUREE D UNE FACTURE DANS LA POLICE DES AUTRES VALEURS (carte « La facture ») : en petite police a chasse fixe, elle paraissait plus petite que les dates au-dessus d elle. Meme police et meme taille, comme sur la page de l etudiant et la fiche d un releve. */
main[data-module="facturation"] .deux-colonnes>.carte>dl:not([class])>dd.mono{font-family:inherit;font-size:inherit;letter-spacing:.02em}

/* MA FACTURE : LA CARTE « RESTE A PAYER » S ARRETE A SON CONTENU. Etiree a la hauteur de « Le detail », elle gardait 134 px de vert vide sous son dernier paragraphe ; elle reprend sa hauteur, comme la carte Destinataire de l envoi d une facture. */
.paiement-colonnes>.paiement-resume{align-self:start}

/* L IBAN PAR GROUPES DE QUATRE (ma facture, mes factures ; avec les gabarits) : d un seul bloc, « BE68539007547034 » se relisait mal au moment de le recopier. Un blanc dessine entre les groupes, qui n ajoute aucun caractere : le texte copie reste l IBAN tel quel. */
.iban-pas{display:inline-block;width:.3em}

/* MES FACTURES : L IBAN ET LA COMMUNICATION DANS LA POLICE DU TEXTE. En chasse fixe de 12 px, ils etaient plus petits que « Par virement » et « Communication » devant eux ; la page de la facture les montre deja dans la police et la taille du texte. */
main[data-module="facturation"]:has(>p.compte) table.grille td>p>span.mono{font-family:inherit;font-size:inherit;letter-spacing:.02em}

/* SUIVRE DES FACTURES : L AIDE DE LA DATE SOUS SON CHAMP, EN PETIT GRIS. Rendue par le formulaire a la suite du champ, « Le rappel part sept jours avant cette date... » s y collait (5 px), en 15 px fonce, plus fort que la question. Elle passe dessous, au style des autres aides. */
main[data-module="facturation"]>form:has(>.sommaire)>p>.helptext{display:block;margin:6px 0 0;color:var(--encre-douce);font-size:13px;line-height:1.5}

/* LA DERNIERE RANGEE DES FILTRES DES ETUDIANTS SUR UNE MEME LIGNE : calee sur le bas de sa case, « Reinitialiser les
   filtres » tombait 10 px sous le texte de la case « Aussi les annees scolaires anterieures » et du bouton
   « Chercher ». Le lien prend leur hauteur (42 px), texte centre. Sur telephone, ou chaque filtre a sa ligne, rien
   ne change. */
@media (min-width:781px){.registre-filtres>a{display:flex;align-items:center;justify-self:start;min-height:42px}}

/* LES OUTILS DE LA LISTE DES ETUDIANTS SE LISENT COMME DES BOUTONS : « Tri des annees », « Envoyer les invitations »
   et « Annees des blocs », a contour mais en texte maigre a l encre du texte, ressemblaient a des lignes de liste a
   cote des boutons a contour de l application (« Ajouter un enseignant »). Meme graisse et meme couleur qu eux. */
.registre-etudiants nav.gestes a{color:var(--accent-fonce);font-weight:650}

/* L ACCUEIL DE L ADMINISTRATION SANS MOT SEUL EN FIN DE TEXTE : « cours » restait seul sous « A examiner avant l acces
   aux » (A traiter), « main. » seul au bas de la description de Parcours guides. Les aides des taches et les
   descriptions des tuiles, qui ne sont pas des paragraphes, evitent a leur tour l orphelin. */
.admin-campus .campus-priorite small,.campus-accueil:has(>.campus-priorites) .campus-tuile-description{text-wrap:pretty}

/* L ONGLET OUVERT DU DOSSIER DE L ETUDIANT A LA COULEUR DE L ADMINISTRATION : son filet violet (#8766d2) ne se voyait
   nulle part ailleurs dans l interface. Il prend l accent, comme le filet de l entree ouverte du menu. */
.dossier-onglets.dossier-onglets-admin a[aria-current]{border-color:var(--accent)}

/* LES ONGLETS DU DOSSIER NE BOUGENT PLUS D UNE PAGE A L AUTRE (avec le gabarit, qui recopie chaque libelle dans
   data-titre) : le gras de l onglet ouvert l elargissait, et les onglets suivants glissaient de 6 a 10 px selon la page
   (« Documents » a 785 ou 795 px, « Resultats » a 1 135 ou 1 141). Chaque onglet reserve la largeur de son libelle en
   gras, texte centre : la barre garde le meme dessin sur les dix pages. */
.dossier-onglets.dossier-onglets-admin a{text-align:center}
.dossier-onglets.dossier-onglets-admin a::after{content:attr(data-titre);display:block;height:0;overflow:hidden;visibility:hidden;font-weight:700}

/* LE STATUT NEUTRE D UN ETUDIANT SE VOIT DANS L EN-TETE DU DOSSIER : « Statut personnel a verifier » (comme « Parti »)
   a le fond de page pour pastille, invisible sur le gris de l en-tete ; il ne restait qu un texte gris apres le site.
   La pastille prend le blanc des cartes et un bord fin : elle se voit, et reste neutre. */
main:has(>.dossier-onglets-admin)>.entete-page .sous-titre>.etat:is(.etat-unconfirmed,.etat-left){background:var(--carte);box-shadow:inset 0 0 0 1px #cfd8dd}

/* ATTRIBUER DES COURS : LES CHOIX DU SITE ET DE L ANNEE EN COLONNE. Poses l un sous l autre, ils faisaient un escalier :
   chaque liste partait apres son libelle (« Site » a 310 px, « Annee scolaire » a 372 px) et chaque bouton apres sa
   liste. Les deux libelles prennent une meme largeur, les deux listes aussi : listes et boutons s alignent. La page se
   reconnait au choix de l annee, precede du site en champ cache. */
@media (min-width:781px){
 main:has(>form.filtres>input[name=site]+label>select[name=annee])>form.filtres>label:has(>select){display:inline-grid;grid-template-columns:minmax(6rem,max-content) 11rem;align-items:center;column-gap:8px}
 main:has(>form.filtres>input[name=site]+label>select[name=annee])>form.filtres>label>select{width:100%;min-width:0}
}

/* LES INITIALES D UN ENSEIGNANT DANS SA FICHE (liste sur telephone) : la cellule garde la police a chasse fixe du
   tableau, et le nom de colonne pose devant elle (« Initiales ») la prenait aussi, seul parmi les libelles de la fiche.
   Dans la fiche, la cellule prend la police de l interface, comme les autres valeurs. */
@media (max-width:640px){main:has(#filtre) table.grille.en-fiches>tbody>tr>td.mono{font-family:inherit;letter-spacing:.02em}}

/* COMPTES ET ACCES : PAS DE « INVITER LA SELECTION » SANS RIEN A SELECTIONNER. Quand aucun compte affiche n est a
   inviter, les cases s effacent (regle validee) et le bouton restait seul, grise. Il s efface avec elles et revient
   des qu une case existe. */
.acces-gestion form.ag-serie:not(:has(.ag-table tbody input[type=checkbox]))>.ag-outils>button.ag-bouton{display:none}

/* LES SEANCES DU DOSSIER D UN COURS : depuis le passage a « a », la plage « 13:30 a 17:00 » se coupait sur deux lignes
   sur telephone, et l en-tete « COURS ET / INTERVENANTS » aussi. L horaire tient sur sa ligne ; sur telephone, les
   en-tetes aussi (le tableau tient alors dans l ecran ; s il deborde, coeur/finitions.js le met en fiches, comme les
   autres tableaux qui ne tenaient qu en cassant leurs en-tetes). C est le seul tableau pose sous un en-tete de page
   qui suit lui-meme un tableau. */
.interface main>.grille-cadre+.entete-page+.grille-cadre>table.grille td:nth-child(2){white-space:nowrap}
@media (max-width:640px){.interface main>.grille-cadre+.entete-page+.grille-cadre>table.grille>thead th{white-space:nowrap}}

/* LES FORMATIONS ET BLOCS D UN COURS PARTAGENT LEURS LIGNES, comme les surtitres (regle « UN SURTITRE SUR DEUX
   LIGNES ») : sur telephone, « Osteopathie - formation de base · » finissait sa ligne sur le separateur et laissait
   « Osteo 2 » seul sous elle. Deux lignes egales, le separateur au milieu de la seconde. */
body.interface main>.deux-colonnes>section.carte>h2+ul>li{text-wrap:balance}

/* LES CASES DES DOCUMENTS A SIGNER SUR LA PREMIERE LIGNE DE LEUR TEXTE. Posees sur la ligne de base, les cases de
   « Tant qu il n est pas signe, fermer » montaient de 4 px au-dessus de leur libelle ; « Ceux qui ont signe la
   version precedente... », centree sur son libelle, tombait entre ses deux lignes sur telephone ; chaque case gardait
   4 px de retrait sur la legende et les champs. La case se cale sur la premiere ligne de son texte (1 px sous le haut
   d une ligne de 20,8 px), au bord des champs, 8 px avant le texte. */
.signer-admin-rubriques>label,.signer-admin-case{display:flex;align-items:flex-start;gap:8px}
.signer-admin-rubriques>label>input[type=checkbox],.signer-admin-case>input[type=checkbox]{flex:0 0 auto;margin:1px 0 0}

/* LES FORMULAIRES D UN DOCUMENT A SIGNER A LA MESURE DES FORMULAIRES. Les cartes « Reglages » et « Deposer une
   nouvelle version » prenaient toute la largeur (1 130 px) autour de champs bornes a 640 px : pres de 450 px de blanc
   a droite. Elles prennent la mesure des formulaires (820 px) et leurs champs la remplissent, comme sur « Nouveau
   document a signer » ; les cartes des versions et des signatures, des tableaux, gardent toute la largeur. */
.signer-admin>section.carte:has(>form.signer-admin-formulaire){max-width:var(--mesure-formulaire)}
.signer-admin>section.carte>form.signer-admin-formulaire{max-width:none}

/* LES SITES DE RATTACHEMENT D UN ENSEIGNANT : la case, posee sur la ligne de base, montait de 4 px au-dessus de
   « Charleroi » et gardait 4 px de retrait sur la legende, alors que les droits de gestion sont centres sur leur
   texte. Elle se cale sur la ligne de son nom (1 px sous le haut d une ligne de 20,8 px), au bord de la legende. */
fieldset>p>label:has(>input[type=checkbox][name=sites]){display:flex;align-items:flex-start;gap:8px}
fieldset>p>label>input[type=checkbox][name=sites]{flex:0 0 auto;margin:1px 0 0}

/* LES LOTS PREPARES, ETAT VIDE SANS PUCE (la regle du premier lot restait sans effet : un :has() ne se pose pas dans
   un autre :has(), et le navigateur ecartait toute la regle). La liste des lots n a de lien que si un lot existe :
   sans lien, sa seule ligne est le message « Aucun lot prepare », sans puce ni retrait, en gris. */
.eval-espace>h2+ul:has(>li:only-child):not(:has(a)){padding:0;list-style:none;color:var(--encre-douce)}

/* UN TABLEAU DES EVALUATIONS SANS LIGNE NE DEFILE PAS (historique des publications) : sur telephone, il gardait ses
   620 px pour la seule ligne « Aucune publication », et l ombre du defilement se posait a son bord droit comme une
   trace. Tant qu il n a que la cellule de l etat vide, il tient dans l ecran, sans ses en-tetes (qui se coupaient alors au
   milieu d un mot, « Studen / t ») : ni defilement ni ombre. */
@media (max-width:700px){.eval-table:not(:has(tbody td:not([colspan]))) table{min-width:0}.eval-table:not(:has(tbody td:not([colspan]))) thead{display:none}}

/* LE LIBELLE « ENSEIGNANT » DES FILTRES DE L HORAIRE SUR LA LIGNE DE SON CHAMP : il gardait la marge des libelles de
   formulaire (14 px dessus, 4 dessous) et tombait 4 px sous le centre du champ, alors que « Annee » et « Site » sont
   centres sur leurs pastilles ; sur telephone, il s ecartait de 24 px des pastilles du dessus et de 12 px de son
   champ (10 et 8 px pour les deux autres titres). Sans cette marge, il suit les deux autres titres. */
.ha-recherche>label.ha-choix-titre{margin:0}

/* LE FICHIER DE L IMPORT DE L HORAIRE SOUS SON LIBELLE : le bouton suivait « Fichier .csv ou .xlsx, 1500 lignes au
   plus » a 5 px, sur la meme ligne, alors que la liste des sites passe sous « Site ». Il passe sous son libelle, au
   meme ecart que la liste. */
form.carte.formulaire:has(>label>select[name=campus])>label>input[type=file]{display:block}

/* LE TEXTE DES CHAMPS DE L HORAIRE A LA TAILLE DES AUTRES FORMULAIRES : dans la seance (ajoutee ou modifiee) et
   l import, chaque champ est pose dans son libelle et en heritait la petite police (13 px), la ou les autres
   formulaires ecrivent en 15 px (Reglements et conventions, Delai et report). Ces champs reprennent 15 px : 42 px de
   haut pour les listes, les dates et les heures, 44 px pour le texte, comme ailleurs. Le bouton de fichier garde ses
   14 px. */
main.moyen>form.carte.formulaire:has(>label>select[name=campus]) label>:is(input:not([type=checkbox],[type=radio],[type=file]),select){font-size:15px}

/* « AJOUTER UNE SEANCE » : la carte du formulaire suivait le titre a 10 px (le jambage du « j » presque sur le bord),
   contre 24 px sur Mes reglages. 24 px quand le formulaire suit directement le titre. */
main.moyen>h1+form.carte.formulaire:has(>label>input[name=nom_de_matiere]){margin-top:24px}

/* LE TABLEAU D UN BLOC FAIT PARTIE DE SON PANNEAU : la regle commune des tableaux (.grille-cadre, bord et coins
   arrondis) en faisait une carte collee aux bords du panneau du bloc, coins arrondis contre les siens, alors que la
   feuille le veut sans cadre (.oe-bloc .grille). Il perd ce cadre et garde un filet au-dessus, comme les autres bandes
   du panneau ; sur grand ecran, sa premiere et sa derniere colonne s ecartent de 20 px du bord, l alignement des
   encarts « Affecter un enseignant » et « Rattacher un cours ». Le retrait des encarts, pris sur le tableau, coupait
   « Thomas Delvaux » sur deux lignes : sans cadre, les colonnes gardent leur largeur. Sur telephone, les fiches
   prennent la largeur du panneau, sans second bord. */
.oe-bloc>.grille-cadre{border:0;border-top:1px solid var(--trait);border-radius:0}
@media (min-width:641px){.oe-bloc>.grille-cadre>table.grille>:is(thead,tbody)>tr>:is(th,td):first-child{padding-left:20px}.oe-bloc>.grille-cadre>table.grille>:is(thead,tbody)>tr>:is(th,td):last-child{padding-right:20px}}

/* LES CHIFFRES D UNE CARTE DE BLOC PARTAGENT LEURS LIGNES (avec le gabarit, qui attache le point median au segment qui
   le precede) : sur deux lignes, « 14 inscrits » restait seul sous une ligne pleine. Comme les surtitres, deux lignes
   egales, coupees apres un point median. */
body.interface .oe-carte-chiffres{text-wrap:balance}

/* LES LIENS DU TABLEAU DE LA RENTREE D UN SEUL DESSIN : « Definir » et « Tarifs » etaient turquoise, gras et en 13 px,
   « Osteo 1 » et « 14 inscrits » bleu nuit et maigres. Tous prennent le dessin des liens du tableau d un bloc, ou ils
   menent : bleu nuit, demi-gras, a la taille du tableau. */
.oe-rentree td a{color:var(--accent);font-size:inherit;font-weight:600}

/* DELAI ET REPORT, DES MARGES EGALES AUTOUR DE L ENCADRE : « Parametres du suivi » gardait ses marges de 18 px dans la
   carte (38 px sous le haut de la carte contre 20 px sur les cotes, 36 px avant « Enregistrer » avec la marge haute
   du bouton), et le dernier paragraphe du formulaire sa marge basse sous l aide (36 px sous elle contre 21 px
   au-dessus du titre de l encadre). L encadre part du haut de la carte, l aide le termine a la marge de son titre, et
   le bouton le suit a 20 px, le rembourrage de la carte. */
main[data-module=facturation]>form.carte>fieldset{margin:0}
main[data-module=facturation]>form.carte>fieldset>p:last-child{margin-bottom:0}
main[data-module=facturation]>form.carte>fieldset+button{margin-top:20px}

/* « DEMANDER UNE CONFIRMATION EXPLICITE DE L ACCORD » (Reglements et conventions) : la case, posee sur la ligne de
   base, montait de 4 px au-dessus de son texte et gardait 4 px de retrait sur les champs, alors que les cases de la
   seance sont alignees. Elle se cale sur la premiere ligne de son texte, au bord des champs. */
form.formulaire>label:has(>input[type=checkbox][name=accord_requis]){display:flex;align-items:flex-start;gap:8px}
form.formulaire>label>input[type=checkbox][name=accord_requis]{flex:0 0 auto;margin:1px 0 0}

/* LE LIBELLE « MESSAGE » CONTRE SA BARRE DE MISE EN FORME (en complement de la regle validee qui le pose au-dessus
   de la barre) : l ecart de la grille du formulaire (14 px) et la marge haute de la barre (6 px) le laissaient a
   23 px d elle, contre 8 px entre un libelle et son champ sur les autres formulaires ; il flottait entre la bulle et
   l editeur. Il se range a 4 px de la barre, et « Pieces jointes » a 4 px de son champ. */
.messagerie-ouverte .redaction>label:is([for=corps],[for=piece_jointe]){margin-bottom:-10px}
.messagerie-ouverte .redaction>.redaction-outils{margin-top:0}

/* LES FILTRES DES SUPPORTS DE COURS, CHAQUE LIBELLE CONTRE SON CHAMP (grand ecran, en complement de la grille
   validee) : un libelle etait a 12 px de la liste precedente comme de la sienne, et « Formation », cale a gauche
   d une colonne elargie par le bouton Filtrer, a 29 px de sa liste. Le libelle se range a droite de sa colonne, a
   8 px de son champ ; 28 px au moins separent une paire de la suivante. */
@media (min-width:781px){.filtre-cours:has(select~select~select){column-gap:8px}.filtre-cours:has(select~select~select)>label{justify-self:end}}
@media (min-width:1200px){.filtre-cours:has(select~select~select)>label:is(:nth-child(6n+3),:nth-child(6n+5)){margin-left:20px}}
@media (min-width:781px) and (max-width:1199px){.filtre-cours:has(select~select~select)>label:nth-child(4n+3){margin-left:20px}}

/* LA RECHERCHE DE « MES COURS » SUR TELEPHONE, LE CHOIX EN ENTIER : en neerlandais, « Alle schooljaren waarvoor ik
   ingeschreven ben » finissait par des points de suspension dans une liste pourtant en pleine largeur. Les deux
   listes de cette recherche passent en 14 px : le choix tient entier a 390 px. */
@media (max-width:780px){.recherche-supports:has(select)>select{font-size:14px}}

/* LES REPERES D UN DOCUMENT A SIGNER SONT DES ETIQUETTES, PAS DES BOUTONS (document a signer, reglement des
   examens) : blancs a fin bord, « Version 2026-2027 » et « A signer » avaient l habit du bouton « Telecharger le
   document original » juste dessous, et l etat n avait pas le jaune de la liste des documents. Sans bord, la version
   sur le gris des traits ; l etat, en gras, dans la teinte de la liste : jaune tant que le cadre de signature est
   la, vert une fois signe. */
.rgl-reperes>span{border-color:transparent;background:var(--trait)}
.reglement-lecture:has(.rgl-lecteur[data-cadre]) .rgl-reperes>span:last-child{background:#fdf1d8;color:#8a5a00;font-weight:700}
.reglement-lecture:not(:has(.rgl-lecteur[data-cadre])) .rgl-reperes>span:last-child{background:#e4f0e6;color:#2b6b38;font-weight:700}

/* LA LIGNE DU SCAN D UN DIPLOME COMME CELLE D UN DOCUMENT (formations precedentes) : la pastille, le bouton
   « Telecharger » puis la taille se suivaient, alors que l onglet Documents groupe la pastille et la taille et pose
   le bouton au bout de la ligne. Meme ordre ici. */
.dossier-piece>.etat{order:1}
.dossier-piece>.note{order:2}
.dossier-piece>a.bouton{order:3;margin-left:auto}

/* LA LEGENDE DU CALENDRIER DIT CE QUE LE MOIS MONTRE (horaire) : l exemple de « Journee avec seances » restait peche,
   la teinte des jours de Charleroi, quand les jours de cours de Gent sont bleu clair ; et le site sans seance dans
   le mois gardait son point. Un site sans seance ce mois-ci quitte la legende ; l exemple prend le bleu de Gent
   quand seul Gent a des seances, les deux teintes quand les deux sites en ont. Les filtres (horaire-filtres.js)
   tiennent les classes des jours a jour : la legende suit. */
.hm-calendrier:not(:has(.hm-date.hm-gent)) .hm-legende>span:has(>.hm-point-gent),.hm-calendrier:not(:has(.hm-date.hm-rempli:not(.hm-gent),.hm-date.hm-mixte)) .hm-legende>span:has(>.hm-point:not(.hm-point-gent)){display:none}
.hm-calendrier:has(.hm-date.hm-gent):not(:has(.hm-date.hm-rempli:not(.hm-gent),.hm-date.hm-mixte)) .hm-legende>span:not(:has(>span))::before{border-color:#cbdff0;background:#edf6ff}
.hm-calendrier:has(.hm-date.hm-gent):has(.hm-date.hm-rempli:not(.hm-gent),.hm-date.hm-mixte) .hm-legende>span:not(:has(>span))::before{background:linear-gradient(110deg,#fff0e3 50%,#edf6ff 50%)}

/* MES RESULTATS SANS RESULTAT : la legende des notes (« Une note sous le seuil de reussite apparait en rouge... »)
   restait sous « Pas encore de resultat publie », alors qu aucune note n est affichee. Elle ne parait qu avec les
   resultats. */
.res-page:not(:has(>details.res-annee))>.res-legende{display:none}

/* « APPROUVEE » EN VERT DANS L HISTORIQUE DES INSCRIPTIONS (mes inscriptions, dossier de l etudiant) : la pastille
   neutre avait la teinte exacte de la ligne survolee et s y fondait, son mot decale de 8 px sous STATUT ; elle
   restait grise quand « Payee » et les documents « Approuve » sont verts. Elle prend leur vert. */
.historique-annuel .etat:not(.etat-requested,.etat-cancelled){background:#e4f0e6;color:#2b6b38}

/* LA BARRE DES ACTIONS GROUPEES DES INCIDENTS NE FLOTTE QU UNE FOIS UN INCIDENT COCHE. Collee au bas de l ecran des le
   chargement, elle se posait sur le titre du premier groupe (« Important 3 ») et sur ses en-tetes de colonnes tant que
   la liste commencait sous l ecran, et couvrait la liste (64 px, 167 sur telephone) sans rien a classer. Sans choix,
   elle reste a sa place, sous les groupes, sans ombre ; des qu un incident est coche, elle suit le bas de l ecran,
   comme avant. */
.incident-choix:not(:has(input[name="groupes"]:checked)) .incident-actions{position:static;box-shadow:none}

/* LES GROUPES D INCIDENTS SUR UNE MEME GRILLE. Chaque groupe calculait ses colonnes selon son contenu : Famille partait a
   831 px dans « Important » et a 622 px dans « A surveiller », Personnes a 937 et 750, Apparu a 1 220 et 1 107. Les
   colonnes courtes prennent une largeur commune (celle de leur en-tete ou de leur date), le titre de l incident prend
   le reste : les colonnes se suivent d un groupe a l autre des 1 366 px. Un titre plus large que sa colonne l elargit
   encore, comme avant ; sur telephone, le tableau defile comme avant. */
@media (min-width:801px){
 .incident-section .pilotage-tableau th:nth-child(1){width:42px}
 .incident-section .pilotage-tableau th:nth-child(3){width:104px}
 .incident-section .pilotage-tableau th:nth-child(4){width:96px}
 .incident-section .pilotage-tableau th:nth-child(5){width:54px}
 .incident-section .pilotage-tableau th:nth-child(6){width:142px}
 .incident-section .pilotage-tableau th:nth-child(7){width:164px}
}

/* LE PANNEAU DES ETAPES A LA HAUTEUR DU LECTEUR. Sur grand ecran, un panneau plus court que la video s arretait 5 px
   au-dessus du bas du lecteur (753 contre 758 px sur le didacticiel des parcours pratiques) : il prend au moins la
   hauteur du lecteur, deduite de la largeur de la page (colonne des etapes de 300 px, ecart de 20 px, format 16:9).
   Plus long, il garde sa hauteur et descend le long de la note et des liens, comme avant. */
@media (min-width:901px){
 main.didacticiel{container-type:inline-size}
 main.didacticiel .didacticiel-etapes{min-height:calc((100cqi - 320px) * 9 / 16)}
}

/* L EN-TETE DU SUPER SUR GRAND ECRAN, SUR UNE LIGNE. Le choix du site, les trois « Voir comme » et le compte depassaient
   de 51 px la largeur d un ecran de 1 440 px : langues, deconnexion et compte passaient seuls sur une seconde ligne
   (en-tete de 178 px) ; et le titre « Site », pose au-dessus du choix, centrait les « Voir comme » 11 px plus haut que
   le choix. Le titre passe devant le choix, comme sur telephone ; les « Voir comme » prennent le corps du telephone
   (12 px) et les ecarts se resserrent : l en-tete tient sur une ligne de 90 px, comme celui de l administration, tout
   centre a la meme hauteur. */
@media (min-width:801px){
 body.interface .bandeau:has(.prise-de-role){gap:16px}
 body.interface .bandeau form.selecteur-site{display:flex;align-items:center;gap:10px}
 body.interface .bandeau .selecteur-site-choix button{padding-inline:.6rem}
 body.interface .bandeau .prise-de-role{gap:6px}
 body.interface .bandeau .menu-role>summary{padding:4px 8px;font-size:12px}
 body.interface .bandeau:has(.prise-de-role) .qui{gap:10px}
}

/* LA DEMANDE D INSCRIPTION SUR LA GRILLE DU PIED. Sur grand ecran, la page allait d un bord a l autre (32 a 1 408 px)
   quand le pied se centre sur 1 200 px (152 a 1 288) : deux grilles, et la liste « Formation » s etirait sur 733 px
   pour « Choisir ». La page prend la largeur du pied ; ce qui se remplit (choix, encart des tarifs, formulaire, carte
   des candidatures fermees) garde la mesure d un formulaire, aligne sur le titre, comme dans l interface. */
body:not(.interface) main.candidature-page{max-width:1200px;margin-inline:auto}
.candidature-page>:is(form,.candidature-attente,.carte){max-width:var(--mesure-formulaire)}

/* LE LOGO DE LA DEMANDE D INSCRIPTION SUR LE BORD DU TEXTE. L image porte une marge transparente a gauche (42 px sur
   281, soit 15 px a 104 px de large) : le dessin commencait 15 px a droite du titre, du texte et du cadre (47 contre
   32 px sur grand ecran, 35 contre 20 sur telephone). L image recule de cette marge. */
.candidature-page .candidature-logo{margin-left:-15px}

/* LA CONNEXION SUR LA GRILLE DU PIED. Sur grand ecran, le texte du bandeau partait a 180 px du bord gauche et la carte
   finissait a 210 px du bord droit, quand le pied se cale a 152 px de chaque bord : le fond prend la marge du pied
   (32 px), l ensemble sa largeur (1 136 px), et la carte, dans une colonne a sa mesure, en touche le bord droit. */
@media (min-width:801px){
 body.acces .acces-fond{padding-inline:32px}
 .connexion-ensemble{max-width:1136px;grid-template-columns:minmax(0,1fr) minmax(340px,400px)}
}

/* LES ONGLETS DU PILOTAGE SE LISENT COMME DES ONGLETS. Ils avaient le dessin des boutons des « Actions courantes »
   (bouton blanc borde, meme corps de texte) : seul l onglet ouvert, teinte, s en distinguait. Ils prennent celui des
   onglets de la facturation : texte gris sur un filet commun, l onglet ouvert souligne a l accent. Sur telephone, les
   quatre tiennent une rangee qui defile de cote, comme les onglets de la facturation (coeur/finitions.js), chacun
   sur une ligne : « Vue d ensemble » passait seul sur deux lignes. */
.pilotage-onglets{gap:2px;border-bottom:1px solid var(--trait)}
.pilotage-onglets a{margin-bottom:-1px;padding:11px 14px 10px;border:0;border-bottom:3px solid transparent;border-radius:0;background:none;color:var(--encre-douce);font-size:15px;font-weight:600}
.pilotage-onglets a:hover{color:var(--encre)}
.pilotage-onglets a[aria-current=page]{border-bottom-color:var(--accent);background:none;color:var(--accent)}
@media (max-width:800px){
 .pilotage-onglets{flex-wrap:nowrap;gap:0;overflow-x:auto;scrollbar-width:none}
 .pilotage-onglets::-webkit-scrollbar{display:none}
 .pilotage-onglets a{flex:0 0 auto;padding:10px 12px;font-size:14px;line-height:1.3;white-space:nowrap}
 .pilotage-onglets.defile-droite{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent)}
 .pilotage-onglets.defile-gauche{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 36px),transparent)}
 .pilotage-onglets.defile-gauche.defile-droite{-webkit-mask-image:linear-gradient(to right,transparent,#000 36px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to right,transparent,#000 36px,#000 calc(100% - 36px),transparent)}
}

/* « RETOUR A L ACCUEIL » SUR LA LIGNE DU SURTITRE, SUR TELEPHONE. L en-tete du pilotage passait a la ligne : le lien
   tombait seul entre la description et les onglets. Il se range a droite du surtitre, comme sur grand ecran ; le titre
   et la description gardent leurs ecarts (8 et 15 px). Meme chose pour « Retour aux incidents ». */
@media (max-width:800px){
 main.pilotage>.pilotage-entete{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 16px}
 main.pilotage>.pilotage-entete>div{display:contents}
 main.pilotage>.pilotage-entete>div>*{grid-column:1/-1}
 main.pilotage>.pilotage-entete>div>.surtitre{grid-column:1;grid-row:1}
 main.pilotage>.pilotage-entete>.pilotage-retour{grid-column:2;grid-row:1}
 main.pilotage>.pilotage-entete h1{margin-block:0}
}

/* LES CARTES DE CHIFFRES DU PILOTAGE ALIGNEES PAR RANGEE. Sur deux colonnes, un titre de deux lignes (« Administrateurs
   avec acces pret ») descendait son chiffre et son texte 23 px sous ceux de la carte voisine au titre d une ligne
   (« Invitations en attente »). Titre, chiffre et texte partagent les rangees de la grille, comme les cartes des
   guides pas a pas. */
.pilotage-chiffre{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start}

/* LE FIL D ARIANE COMPLET, LA FICHE D UN ENSEIGNANT ET L EN-TETE DU SUPER SUR TELEPHONE (lot 3 de la suite de l audit,
   2026-10-01, reprise/publier_navigation.py). */

/* Le fil a plus d etapes : il passe a la ligne entre elles, et une etape trop longue pour la ligne se coupe au lieu
   d elargir la page. Une etape se souligne au survol, comme un lien. */
.chemin-page > * { min-width: 0; overflow-wrap: anywhere; }
.chemin-page a:hover { color: var(--encre); text-decoration: underline; }

/* LA FICHE D UN ENSEIGNANT (B1-72). Ses actions se rangent sous le titre ; le filtre des sites et son resume
   descendent contre les tableaux qu ils filtrent (affectations, matieres, seances). */
.actions-fiche { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 16px 0 24px; }
.actions-fiche .bouton { margin: 0; }
.actions-fiche .note { margin: 0; }
.filtre-fiche { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 20px; margin: 36px 0 0; }
.filtre-fiche form.filtres { margin: 0; }
.filtre-fiche .note { margin: 0 0 10px; }

/* L EN-TETE DU SUPER SUR TELEPHONE (D-44). Le choix du site et les trois « Voir comme » occupaient la moitie de
   l ecran au-dessus de chaque page : sous 780 px, ils passent dans le menu repliable, sous les rubriques. Une page
   sans menu repliable (l accueil) les garde dans l en-tete. La regle qui les retire de l en-tete est plus precise que
   celles qui les rangent sur telephone (body.interface .bandeau form.selecteur-site) : a precision egale, le choix du
   site restait affiche (essai du 01/10). */
.menu-mobile .commandes-telephone { display: grid; gap: 12px; padding: 14px 20px 16px; border-top: 1px solid var(--trait); }
.menu-mobile .commandes-telephone .prise-de-role { display: grid; gap: 8px; }
.menu-mobile .commandes-telephone .menu-role { position: static; }
.menu-mobile .commandes-telephone .menu-role > summary { padding: 10px 12px; font-size: 14px; color: var(--accent-fonce);
  border-color: var(--trait); background: var(--carte); }
.menu-mobile .commandes-telephone .menu-role[open] > summary { border-color: var(--accent); background: var(--accent-clair); }
.menu-mobile .commandes-telephone .panneau-role { position: static; width: auto; max-width: none; margin-top: 6px;
  box-shadow: none; }
.menu-mobile .commandes-telephone .selecteur-site { display: flex; align-items: center; gap: 10px; }
.menu-mobile .commandes-telephone .selecteur-site-choix { flex: 1 1 auto; min-width: 0; }
.menu-mobile .commandes-telephone .selecteur-site-choix button { flex: 1 1 0; min-width: 0; }
@media (max-width: 780px) {
  body.interface:has(.menu-mobile) .bandeau > form.selecteur-site,
  body.interface:has(.menu-mobile) .bandeau > nav.prise-de-role { display: none; }
}

/* LA FACTURATION, SUITE DE L AUDIT (lot 5, 01/10/2026, reprise/publier_facturation_suite.py). */

/* Le tableau de bord (A-77) : « A traiter » descend jusqu au bas de la colonne voisine, et ses lignes se partagent la
   hauteur ; avant, 236 a 330 px de fond restaient vides sous la carte. Le titre et la phrase de chaque ligne restent
   ensemble, au milieu de la hauteur gagnee (sans align-content, la grille de la ligne les ecartait). Sur deux colonnes
   seulement. */
@media (min-width: 981px) {
  .tdb-colonnes:has(> .tdb-carte[aria-labelledby="tdb-a-traiter"]) { align-items: stretch; }
  .tdb-colonnes > .tdb-carte[aria-labelledby="tdb-a-traiter"] { display: flex; flex-direction: column; }
  .tdb-colonnes > .tdb-carte[aria-labelledby="tdb-a-traiter"] > .tdb-sujet { flex: 1 0 auto; align-content: center; }
}

/* La mention de TVA d un tarif, sur deux lignes (RA-30) : la zone prend toute la largeur de son champ, comme les
   champs d une ligne (la regle de largeur ne visait que input et select). */
.bareme-champs textarea { width: 100%; box-sizing: border-box; resize: vertical; }

/* L IBAN et la communication de la facture de l etudiant se copient d un bouton (A-76). Le champ que le programme copie
   reste hors de vue : on lit le texte groupe par quatre, on copie la suite sans espace. */
.copie-paiement { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 10px; }
.copie-paiement > p { margin: 0; }
.copie-paiement > .copie-source { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.copie-paiement > button { margin: 0; }
.copie-paiement > [data-copier-etat]:empty { display: none; }

/* LES FONCTIONS, SUITE DE L AUDIT (lot 6, 01/10/2026, reprise/publier_fonctions_suite.py). */

/* La legende du calendrier de l horaire (C-68) nomme le cadre des jours detailles sous le calendrier : le meme trait
   que la case choisie, orange a Charleroi, bleu a Gent, sombre quand le jour melange les deux sites. Sans jour choisi
   dans le mois, l entree se retire, comme celle d un site sans seance. */
.hm-legende-cadre { flex: none; width: 14px; height: 10px; border: 1px solid var(--hm-orange); border-radius: 3px; }
.hm-calendrier:has(.hm-date.hm-choisi.hm-gent):not(:has(.hm-date.hm-choisi:not(.hm-gent))) .hm-legende-cadre { border-color: #287bb9; }
.hm-calendrier:has(.hm-date.hm-choisi.hm-mixte) .hm-legende-cadre { border-color: #183b49; }
.hm-calendrier:not(:has(.hm-date.hm-choisi)) .hm-legende > span:has(> .hm-legende-cadre) { display: none; }

/* LES PROPOSITIONS DE L AUDIT (lot 8, 02/10/2026, reprise/publier_propositions_audit.py). */

/* Le sommaire (RA-34) : le premier chiffre (30 px) avait sa ligne de base 1,2 px au-dessus des suivants (22 px), les
   libelles etant alignes par le bas (mesure sur les releves). Il descend d autant ; son libelle ne bouge pas. */
.sommaire > div:first-child .compte { position: relative; top: .04em; }

/* Les listes deroulantes (C-70) : leur texte commencait 4 px plus a droite que celui des champs, a retrait egal de
   12 px (retrait interne du navigateur, mesure dans Chromium : 4,0 px). La regle commune leur retire ces 4 px ; les
   listes qui portent leur propre retrait gardent le leur. */
select { padding-left: 8px; }

/* Le lien « Parcours guidés » (C-66) : un bouton discret a droite du titre, au lieu d un lien isole sous lui
   (horaire et cours de l enseignant). */
.entete-titre { margin-bottom: 16px; }
.entete-titre > h1 { margin: 0; }
.entete-titre > .bouton { margin: 0; }

/* Le document a signer (RC-15) : « Agrandir le document » a cote du telechargement. */
.rgl-entete-gestes { display: flex; flex-wrap: wrap; gap: 8px; flex-shrink: 0; margin-top: 5px; }
.rgl-entete-gestes > .bouton { margin: 0; font-size: 12px; background: #fff; }
/* La lecture agrandie : la feuille garde au moins 760 px de large. Sur un telephone, le cadre defile de cote et le
   texte se lit a sa taille ; le lecteur la dessine a 800 points au moins, elle reste nette. Sur la page de signature,
   la feuille suit la largeur de l ecran, pour que le cadre de signature tienne entier sous le doigt. */
.rgl-lecteur.rgl-lecteur-agrandi { overflow-x: auto; }
.rgl-lecteur-agrandi > .rgl-page { min-width: 760px; }
/* Sans cadre de signature dans la page, la regle commune verdissait la pastille « À signer » comme un document
   signe : elle garde ici sa couleur d attente. */
.reglement-lecture .rgl-entete .rgl-reperes > span.rgl-etat-a-signer:last-child { background: #fdf1d8; color: #8a5a00; font-weight: 700; }

/* LES DEFAUTS, SUITE DE L AUDIT (lot 9, 02/10/2026, reprise/publier_defauts_suite.py) : aucune regle de style ; ce
   repere dit le lot present (les refus du depot traduits a l affichage, le controle de la fiche qui mene au Profil). */

/* Depot des pieces du dossier etudiant, 02/10/2026. */
.rappel-pieces {
  margin: 1.25rem 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid #d6dfbb;
  border-left: 4px solid #607538;
  border-radius: 12px;
  background: #f4f7e9;
  color: #263930;
}
.rappel-pieces p { margin: .5rem 0 .9rem; }
@media (max-width: 600px) {
  .rappel-pieces { margin: .75rem; padding: 1rem; }
}

/* Suivi KMO de Gent : meme largeur que la facturation, lecture continue sur mobile. */
.kmo-suivi{min-width:0}
.kmo-suivi .rubriques-facturation{overflow-y:hidden}
.kmo-entete{display:flex;align-items:center;justify-content:space-between;gap:16px}
.kmo-entete h1{margin:4px 0 0}
.kmo-entete .campus-surtitre{margin:0}
.kmo-site{padding:7px 14px;border:1px solid var(--trait);border-radius:100px;font-size:13px;font-weight:700;background:var(--papier,#fff)}
.kmo-intro{max-width:900px;margin:0 0 20px;color:var(--encre-douce);line-height:1.6}
.kmo-compteurs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0 0 20px}
.kmo-compteurs a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;min-height:80px;border:1px solid var(--trait);border-radius:12px;background:#fff;color:var(--encre);text-decoration:none;box-sizing:border-box}
.kmo-compteurs a:hover{border-color:var(--accent)}
.kmo-compteurs a[aria-current="page"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:#f4f8f7}
.kmo-compteurs span{font-size:14px;font-weight:600}.kmo-compteurs strong{font-size:30px;line-height:1;font-variant-numeric:tabular-nums}
.kmo-echeance{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 20px;border:1px solid var(--trait);border-radius:10px;background:#fff;margin:0 0 24px}
.kmo-echeance strong{font-size:14px}.kmo-echeance p{margin:5px 0 0;font-size:13px;color:var(--encre-douce);line-height:1.5}
.kmo-echeance .bouton{white-space:nowrap}
.kmo-recherche{display:flex;align-items:flex-end;gap:12px;margin:0 0 20px}
.kmo-recherche>div{width:min(100%,520px);min-width:0}.kmo-recherche label{display:block;font-size:13px;font-weight:600;margin:0 0 7px}
.kmo-recherche input[type="search"]{width:100%;height:42px;box-sizing:border-box;margin:0}
.kmo-recherche button{height:42px;margin:0}.kmo-recherche>a{font-size:13px;margin-bottom:12px}
.kmo-resultats{background:#fff;border:1px solid var(--trait);border-radius:12px;overflow:hidden}
.kmo-resultats-entete{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;border-bottom:1px solid var(--trait)}
.kmo-resultats-entete h2{font-size:17px;margin:0}.kmo-resultats-entete>span{font-size:13px;color:var(--encre-douce)}
.kmo-table{width:100%;border-collapse:collapse;table-layout:fixed;margin:0}
.kmo-table th{text-align:left;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--encre-douce);padding:12px 20px;background:#f7f9f8;border-bottom:1px solid var(--trait)}
.kmo-table th:nth-child(1){width:22%}.kmo-table th:nth-child(2){width:27%}.kmo-table th:nth-child(3){width:16%}.kmo-table th:nth-child(4){width:15%}.kmo-table th:nth-child(5){width:20%}
.kmo-table td{padding:18px 20px;border-bottom:1px solid var(--trait);vertical-align:top;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.kmo-table tr:last-child td{border-bottom:0}.kmo-table tbody tr:hover{background:#fafcfb}
.kmo-nom{font-weight:700;text-underline-offset:3px}.kmo-adresse{display:block;margin-top:5px;font-size:12px;color:var(--encre-douce);line-height:1.5}
.kmo-manquant{color:var(--encre-douce);font-size:13px}.kmo-numero{font-variant-numeric:tabular-nums;font-size:13px}
.kmo-etat{display:inline-block;padding:4px 9px;border-radius:6px;background:#fff1d9;color:#785100;font-size:12px;font-weight:700;white-space:nowrap}
.kmo-complet{background:#e8f3ed;color:#216344}
.kmo-actions{display:flex;flex-direction:column;align-items:flex-start;gap:9px}.kmo-actions a{font-size:13px;text-underline-offset:3px}
.kmo-mobile{display:none}.kmo-vide{padding:36px 20px;text-align:center}.kmo-vide p{margin:10px 0 0;color:var(--encre-douce);font-size:14px}
.kmo-pagination{display:flex;align-items:center;justify-content:center;gap:16px;padding:16px;border-top:1px solid var(--trait);font-size:13px}
.kmo-note{font-size:12px;line-height:1.6;color:var(--encre-douce);margin:16px 0 0;max-width:900px}
.kmo-suivi a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@media(max-width:1100px){.kmo-table th,.kmo-table td{padding-left:12px;padding-right:12px}.kmo-compteurs a{padding:16px}.kmo-compteurs strong{font-size:26px}}
@media(max-width:760px){
 .kmo-compteurs{gap:8px}.kmo-compteurs a{flex-direction:column;align-items:flex-start;padding:14px 12px;gap:12px}.kmo-compteurs span{font-size:12px}
 .kmo-echeance{align-items:flex-start;flex-direction:column;gap:12px;padding:16px}
 .kmo-recherche{flex-wrap:wrap}.kmo-recherche>div{width:100%}.kmo-recherche button{flex:1}
 .kmo-table,.kmo-table tbody{display:block;width:100%}.kmo-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .kmo-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 16px;padding:18px 16px;border-bottom:1px solid var(--trait)}
 .kmo-table tr:last-child{border-bottom:0}.kmo-table td{display:block;padding:0;border:0;min-width:0}
 .kmo-table td:nth-child(1){grid-column:1;grid-row:1}.kmo-table td:nth-child(4){grid-column:2;grid-row:1}
 .kmo-table td:nth-child(2),.kmo-table td:nth-child(3),.kmo-table td:nth-child(5){grid-column:1/-1}
 .kmo-mobile{display:block;color:var(--encre-douce);font-size:11px;margin-bottom:3px}.kmo-actions{flex-direction:row;gap:22px;padding-top:5px}
 .kmo-pagination{gap:10px}.kmo-resultats-entete{padding:16px}
}

/* Recherche d adresse KMO, liste dans le flux pour les petits ecrans. */
.recherche-adresse {margin:1.25rem 0 .75rem; padding:1rem; border:1px solid #cbd5dc; border-radius:10px; background:#f4f8f9; min-width:0}
.recherche-adresse[hidden],.recherche-adresse-liste[hidden] {display:none}
.recherche-adresse input {width:100%; box-sizing:border-box}
.recherche-adresse-liste {list-style:none; margin:.4rem 0; padding:0; border:1px solid #b5c5cd; border-radius:8px; background:#fff; max-height:16rem; overflow:auto}
.recherche-adresse-liste [role="option"] {padding:.75rem; cursor:pointer; overflow-wrap:anywhere; line-height:1.4; border-bottom:1px solid #e3e9ed; color:#173b49}
.recherche-adresse-liste [role="option"]:last-child {border-bottom:0}
.recherche-adresse-liste [role="option"]:hover,.recherche-adresse-liste [aria-selected="true"] {background:#deedf1; box-shadow:inset 3px 0 #173b49}
.recherche-adresse-aide,.recherche-adresse-etat {display:block; margin-top:.5rem; line-height:1.45; color:#425e6b; font-size:.85rem}
.recherche-adresse-etat:empty {display:none}

/* Parcours KMO simple, styles limites a ces deux ecrans. */
.kmo-simple .kmo-etapes {margin:1.25rem 0;border:1px solid #d9e2e8;border-radius:12px;padding:1rem 1.2rem;background:#f8fafb}
.kmo-simple .kmo-etapes summary {cursor:pointer;font-weight:600;color:#234b60}
.kmo-simple .kmo-etapes li {margin:.7rem 0;line-height:1.55}
.kmo-simple .kmo-etapes ol {padding-left:1.4rem}
.kmo-simple [data-kmo-coordonnees] {border:0;padding:0;margin:1rem 0}
.kmo-simple [data-kmo-coordonnees][hidden] {display:none!important}
.kmo-simple [data-kmo-coordonnees] legend {font-weight:600;margin-bottom:.6rem}
.kmo-simple .kmo-raccourcis {display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center}
.kmo-simple .kmo-note {font-size:.9rem;line-height:1.5}

/* Progression du profil : memes axes pour le titre, la jauge et le pied de tuile. */
.profil-progression{display:block;margin-top:20px;min-width:0;color:inherit}
.profil-progression-entete{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:26px;font-size:12px;line-height:1.35}
.profil-progression-nombre{display:inline-flex;align-items:baseline;flex:none;white-space:nowrap;font-size:21px;line-height:1;font-weight:700;font-variant-numeric:tabular-nums}
.profil-progression-nombre>span{font-size:14px;margin-left:3px}
.profil-progression-barre{display:block;appearance:none;-webkit-appearance:none;box-sizing:border-box;width:100%;height:6px;margin:8px 0 0;padding:0;border:0;border-radius:999px;overflow:hidden;background:rgba(23,49,60,.16);color:#17313c}
.profil-progression-barre::-webkit-progress-bar{background:rgba(23,49,60,.16);border-radius:999px}
.profil-progression-barre::-webkit-progress-value{background:#17313c;border-radius:999px}
.profil-progression-barre::-moz-progress-bar{background:#17313c;border-radius:999px}
.profil-progression-note{display:block;margin-top:9px;font-size:12px;line-height:1.4}
.admin-campus .campus-tuile-profil .campus-tuile-haut{display:flex;flex-direction:column}
.admin-campus .campus-tuile-profil .profil-progression{margin-top:auto;padding-top:20px}
.admin-campus .campus-tuile-profil .campus-tuile-bas>span:first-child{min-width:0;overflow-wrap:anywhere}
.profil-bilan .profil-progression{margin:0;max-width:540px}
.profil-bilan .profil-manquants{margin-top:16px}
.profil-manquants summary{cursor:pointer;font-weight:600}
.profil-manquants ul{display:grid;gap:10px;padding-left:20px}
@media(max-width:400px){.campus-tuile-profil .profil-progression-entete{flex-wrap:wrap;gap:5px}.campus-tuile-profil .profil-progression-nombre{margin-left:auto}}

/* Scope Stage uniquement. Grille de 8 px, commandes accessibles au clavier. */
.st-board,.st-task{background:#fff;border:1px solid #dce7eb;border-radius:16px;overflow:hidden;box-shadow:0 3px 12px #173d4805}.st-board{margin:24px 0}.st-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:24px}.st-head h2,.st-head h3{margin:0 0 6px;font-size:22px;color:#173d48}.st-head p{margin:0;color:#607882}.st-eyebrow{font-size:11px!important;letter-spacing:.12em;font-weight:700;margin-bottom:8px!important}.st-metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;padding:0 24px 24px}.st-metrics button{display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:16px;background:#f5f8f9;color:#274b56;border:1px solid transparent;border-radius:12px;text-align:left;min-height:88px}.st-metrics strong{font-size:28px;line-height:1}.st-metrics span{font-size:12px}.st-metrics button[aria-pressed=true]{border-color:#216776;background:#e9f4f5}.st-toolbar{display:flex;align-items:end;gap:12px;flex-wrap:wrap;padding:16px 24px;background:#fafcfc;border-top:1px solid #edf1f3;border-bottom:1px solid #edf1f3}.st-toolbar label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600}.st-toolbar label:first-child{flex:1;min-width:190px}.st-toolbar input,.st-toolbar select{margin:0;min-height:42px}.st-toolbar button{min-height:42px}.st-table-wrap{overflow-x:auto}.st-table{width:100%;border-collapse:collapse;font-size:13px}.st-table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#617782;padding:16px;background:#fafcfc}.st-table td{padding:16px;border-top:1px solid #edf1f3;vertical-align:middle}.st-table th:first-child,.st-table td:first-child{padding-left:24px}.st-table small,.st-event small{display:block;color:#677d87;font-size:12px;margin-top:4px}.st-table tr:hover td{background:#f8fbfb}.st-status{display:inline-flex;align-items:center;gap:6px;border-radius:24px;padding:6px 10px;background:#f0f4f6;color:#47616c;font-size:12px;font-weight:650;white-space:nowrap}.st-status:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}.st-valide{background:#eaf5ed;color:#276140}.st-corriger{background:#fff2dc;color:#8b6013}.st-retard{background:#fcecec;color:#a03d3d}.st-remis{background:#eaf2fc;color:#376091}.st-row-actions a{display:block;font-size:12px;max-width:240px;overflow-wrap:anywhere}.st-row-actions .st-open{font-size:13px;font-weight:650;margin-bottom:6px}.st-footnote,.st-filter-empty{padding:16px 24px;margin:0;font-size:12px;color:#607882}.st-empty{padding:32px 24px;background:#f7fafb;border-radius:12px}.st-empty p{max-width:650px;color:#607882;line-height:1.6;margin:8px 0 0}.st-work>.st-head{padding:0 0 20px}.st-task{margin:0 0 20px;scroll-margin-top:24px}.st-task-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 24px;background:#f8fbfb;border-bottom:1px solid #edf1f3}.st-task h4{font-size:18px;margin:0 0 8px}.st-task-head p{font-size:13px;margin:0;color:#607882}.st-instructions{padding:20px 24px;line-height:1.65}.st-receipt,.st-upload,.st-review,.st-task>.st-note{margin:0 24px 24px}.st-receipt{padding:16px;border:1px solid #dce8e0;border-radius:12px;background:#f8fcf9}.st-receipt>p{font-size:12px;color:#5d7468;margin:6px 0 12px}.st-file{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 0;border-top:1px solid #e2ebe6;overflow-wrap:anywhere}.st-file>span:first-child{min-width:0}.st-file>span:last-child{display:flex;gap:16px;flex-shrink:0}.st-file small{font-size:11px;color:#647a70;margin-left:4px}.st-next{line-height:1.5!important;margin-bottom:0!important}.st-upload{padding:20px;background:#f6f9fb;border:1px dashed #b7ccd3;border-radius:12px}.st-upload input[type=file]{background:white;max-width:100%;margin:10px 0}.st-upload button{margin-top:8px}.st-upload progress{display:block;width:100%;height:8px;accent-color:#1b5e6b}.st-upload progress[hidden]{display:none}.st-help,.st-privacy{font-size:12px;color:#5e7781;line-height:1.6;margin:8px 0}.st-privacy{border-left:3px solid #bdd4da;padding-left:12px}.st-review{border-top:1px solid #e0e9ec;padding-top:16px}.st-review summary,.st-history summary{cursor:pointer;font-weight:650;color:#234d59;padding:10px 0}.st-review form{display:grid;gap:12px;padding-top:12px}.st-review label{display:grid;gap:6px}.st-review button{justify-self:start}.st-note,.st-success{background:#eef5f7;border-radius:12px;padding:16px 20px;margin:16px 0;color:#2a5460}.st-note p{margin:6px 0 0;line-height:1.6;font-size:13px}.st-success{background:#eaf5ed;color:#276140}.st-history{margin:20px 0;border-top:1px solid #dfe8eb;padding:8px 0}.st-task>.st-history{margin:0 24px 20px}.st-event{padding:12px 0;border-top:1px solid #edf1f3;font-size:13px}.st-event p{line-height:1.6}.st-review [hidden],.st-table [hidden],.st-filter-empty[hidden]{display:none!important}.st-alerts{margin:12px 24px;padding:12px 16px;background:#eef5f7;border:1px solid #d7e6ea;border-radius:10px;font-size:13px;display:flex;gap:12px;flex-wrap:wrap}.st-alerts a{font-weight:600}.st-board button:focus-visible,.st-board a:focus-visible,.st-task summary:focus-visible{outline:3px solid #e6ad48;outline-offset:3px}
@media(max-width:1000px){.st-metrics{gap:8px}.st-metrics button{padding:12px}.st-metrics span{font-size:11px}.st-table td{padding:12px}}
@media(max-width:680px){.st-head{padding:20px;align-items:flex-start;flex-direction:column}.st-head h2,.st-head h3{font-size:20px}.st-metrics{padding:0 20px 20px;grid-template-columns:repeat(2,minmax(0,1fr))}.st-metrics button:last-child{grid-column:1/-1;min-height:auto;flex-direction:row;align-items:center;gap:12px}.st-toolbar{padding:16px 20px}.st-toolbar label{width:100%}.st-table thead{display:none}.st-table,.st-table tbody,.st-table tr,.st-table td{display:block;width:auto}.st-table tr{border-bottom:1px solid #dce7eb;padding:12px 20px}.st-table td,.st-table td:first-child{padding:6px 0;border:0}.st-table td[data-label]{display:grid;grid-template-columns:100px minmax(0,1fr);gap:4px 12px}.st-table td[data-label]:before{content:attr(data-label);font-size:11px;color:#6a8089}.st-table td small{grid-column:2}.st-table td .st-status{justify-self:start}.st-row-actions{padding-top:12px!important}.st-task-head{padding:20px;flex-direction:column}.st-instructions{padding:16px 20px}.st-receipt,.st-upload,.st-review,.st-task>.st-note{margin:0 16px 20px}.st-file{align-items:flex-start;flex-direction:column}.st-file>span:last-child{gap:24px}.st-upload{padding:16px}.st-review button,.st-upload button{width:100%;min-height:44px}.st-alerts{margin:12px 16px}.st-task h4{overflow-wrap:anywhere}}

.st-download{font-size:12px;margin-left:12px}.st-task .st-upload,.st-task .st-review{margin:0 24px 24px}.st-task>.st-help{padding:0 24px 20px;margin:0}@media(max-width:680px){.st-task .st-upload,.st-task .st-review{margin:0 16px 20px}.st-task>.st-help{padding:0 20px 20px}}

/* Rappel Stage persistant, sans animation ni blocage. */
.campus-tuile.st-tuile-attention{--campus-bandeau:#fff8eb;--campus-encre:#654719;border:1px solid #dfbc78;background:linear-gradient(145deg,#fffdf8,#fff8eb);box-shadow:0 3px 12px #a66d0910}
.campus-tuile.st-tuile-attention:hover{border-color:#be8e38;box-shadow:0 5px 18px #a66d091a}
.st-tuile-rappel{display:flex;align-items:center;gap:7px;color:#825b19;font-size:12px;font-weight:700;margin-top:12px;line-height:1.4}
.st-tuile-point{width:7px;height:7px;border-radius:50%;background:#bd862b;flex-shrink:0}
.st-tuile-compte{display:inline-flex;align-items:center;justify-content:center;min-width:23px;height:23px;border-radius:7px;background:#f4e5c4;font-size:12px;padding:0 5px;margin-left:auto}
.st-tuile-detail{display:block;font-size:12px;line-height:1.55;color:#7b705c;margin-top:7px}
.st-tuile-attention .campus-tuile-bas{color:#79531a}.st-tuile-attention .campus-tuile-haut{overflow:visible}
.st-rappel{display:flex;align-items:center;gap:16px;padding:20px 24px;border:1px solid #ead7b0;background:#fffaf0;border-radius:14px;margin:20px 0;color:#694d21}
.st-rappel-icone{display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0;border-radius:10px;background:#f5e6c8;font-weight:800}
.st-rappel>div{flex:1}.st-rappel p{font-size:13px;line-height:1.6;margin:5px 0 0;color:#7b705c}.st-rappel strong{font-size:15px}.st-rappel a{white-space:nowrap}
@media(max-width:680px){.st-rappel{padding:16px;flex-wrap:wrap;gap:12px}.st-rappel>div{flex-basis:calc(100% - 48px)}.st-rappel a{width:100%;text-align:center}.st-tuile-detail{font-size:12px}}

.st-status.st-ferme{background:#edf1f3;color:#4c606b}

.qr-card{display:flex;align-items:center;justify-content:space-between;gap:24px;background:#fff9e9;border:1px solid #ecd69b;border-left:5px solid #c29438;border-radius:16px;padding:24px;margin:0 0 24px;color:#173e4c}
.qr-card h2{font-size:21px;margin:5px 0 9px}.qr-card p{margin:5px 0;line-height:1.6}.qr-eyebrow{font-size:11px;font-weight:750;letter-spacing:.1em;color:#86631f}
.qr-button{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:13px 19px;border-radius:9px;background:#173e4c;color:white;text-decoration:none;font-weight:650;line-height:1.4;flex-shrink:0}
.qr-button:hover{background:#245466;color:white}.qr-button:focus-visible,.qr-dialog button:focus-visible{outline:3px solid #c29438;outline-offset:3px}
.qr-dialog{box-sizing:border-box;width:min(530px,calc(100% - 32px));max-height:calc(100dvh - 32px);border:1px solid #dce5e8;border-radius:20px;padding:34px;color:#173e4c;background:white;box-shadow:0 24px 70px #102a3b33}
.qr-dialog::backdrop{background:#173e4c66}.qr-dialog h2{font-size:26px;line-height:1.25;margin:12px 0 18px}.qr-dialog p{line-height:1.65}.qr-dialog .qr-count{display:inline-block;border-radius:8px;background:#fff3d1;padding:6px 12px;font-weight:650;margin:2px 0}
.qr-close{position:absolute;right:12px;top:10px;width:36px;height:36px;border:0;background:transparent;color:#45616d;font-size:25px;cursor:pointer;padding:0}.qr-actions{display:flex;align-items:center;gap:14px;margin-top:24px;flex-wrap:wrap}.qr-actions form{margin:0}.qr-later{border:1px solid #cbd9df;border-radius:9px;background:white;color:#173e4c;padding:12px 18px;cursor:pointer}.qr-foot{font-size:12px;color:#58717b;margin-bottom:0}
@media(max-width:600px){.qr-card{align-items:stretch;flex-direction:column;padding:20px;gap:14px}.qr-dialog{padding:28px 22px}.qr-dialog h2{font-size:23px}.qr-actions{align-items:stretch;flex-direction:column}.qr-actions form,.qr-later{width:100%}}

.op-section{margin:24px 0 30px;padding:24px;background:#f0f5f7;border:1px solid #d8e3e8;border-radius:18px}.op-eyebrow{font-size:11px;font-weight:750;letter-spacing:.12em;color:#526e7a;margin:0 0 6px}.op-heading h2{margin:0;font-size:24px;color:#173e4c}.op-heading p:not(.op-eyebrow){margin:8px 0 20px;color:#526e7a;line-height:1.6}.op-site+.op-site{margin-top:28px;border-top:1px solid #d8e3e8;padding-top:24px}.op-site-heading{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:14px}.op-site-heading h3{margin:0;font-size:17px}.op-dates{font-size:12px;color:#526e7a}.op-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.op-card{min-width:0;background:white;border:1px solid #d8e3e8;border-radius:12px;padding:20px;display:flex;flex-direction:column}.op-card-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}.op-card h4{font-size:18px;margin:0;color:#173e4c}.op-badge{font-size:11px;background:#eaf3ee;color:#315842;border-radius:20px;padding:5px 9px;white-space:nowrap}.op-muted{background:#eef1f3;color:#526e7a}.op-summary,.op-empty{font-size:13px;line-height:1.65;color:#526e7a;margin:14px 0}.op-status{padding-left:18px;color:#886518;font-size:13px;line-height:1.8;margin:0 0 12px}.op-status:empty{display:none}.op-details{font-size:13px;margin:6px 0 16px}.op-details summary,.op-calendar summary{cursor:pointer;color:#173e4c;font-weight:650;line-height:1.5}.op-details ul{list-style:none;padding:0;margin:12px 0 0}.op-details li{border-top:1px solid #e4ecef;padding:10px 0;overflow-wrap:anywhere}.op-details li span{display:block;line-height:1.6;color:#526e7a;margin-top:3px}.op-details li .op-attention{color:#886518}.op-open{display:flex;justify-content:space-between;gap:10px;padding-top:14px;margin-top:auto;border-top:1px solid #e4ecef;font-weight:650;font-size:13px}.op-calendar{margin-top:16px;background:white;border:1px solid #d8e3e8;border-radius:12px;padding:16px 20px}.op-calendar ul{list-style:none;padding:0}.op-calendar li{display:flex;gap:14px;flex-wrap:wrap;padding:8px 0;font-size:13px}.op-calendar p{font-size:12px;color:#526e7a;margin-bottom:0}.op-confirmation{display:flex;justify-content:space-between;align-items:center;gap:20px;background:#fff9e9;border:1px solid #ecd69b;border-radius:12px;padding:16px 20px;margin-top:16px;font-size:13px}.op-confirmation p{line-height:1.6;margin:5px 0 0}.op-confirmation>a{flex-shrink:0;font-weight:650}.op-section a:focus-visible,.op-section summary:focus-visible{outline:3px solid #bc932f;outline-offset:3px}
@media(max-width:1000px){.op-grid{grid-template-columns:1fr}.op-confirmation{align-items:flex-start;flex-direction:column;gap:12px}}@media(max-width:600px){.op-section{padding:16px}.op-site-heading{align-items:flex-start;flex-direction:column}.op-card{padding:16px}.op-heading h2{font-size:21px}.op-confirmation{padding:16px}}

/* Alertes du calendrier, 04/10/2026 : lignes compactes et actions secondaires. */
.horaire-page .ha-a-faire{display:grid;grid-template-columns:132px minmax(0,1fr);align-items:start;gap:0 22px;background:#fff;border:1px solid #dce4e7;border-radius:8px;padding:4px 18px;margin:20px 0 22px;box-shadow:0 1px 2px #183b4903}
.horaire-page .ha-a-faire h2{display:flex;align-items:center;gap:9px;font-size:13px;line-height:20px;font-weight:600;letter-spacing:0;margin:0;padding:19px 0;color:#53646c}
.horaire-page .ha-a-faire h2:before{content:"";width:6px;height:6px;flex:none;border-radius:50%;background:#bd792c}
.horaire-page .ha-a-faire ul{min-width:0}
.horaire-page .ha-a-faire li{gap:20px;padding:14px 0;border-top:1px solid #edf0f2;min-width:0}
.horaire-page .ha-a-faire li:first-child{border-top:0}
.horaire-page .ha-a-faire p{min-width:0;line-height:1.45}
.horaire-page .ha-a-faire strong{font-size:14px;font-weight:600;line-height:1.45;color:#233e4a}
.horaire-page .ha-a-faire small{font-size:12px;line-height:1.5;color:#657780;margin-top:3px}
.horaire-page .ha-alert-action{display:inline-flex;align-items:center;justify-content:center;gap:13px;flex:none;min-height:36px;padding:7px 12px;border:1px solid #d7e0e4;border-radius:6px;background:#fff;color:#244653;font-size:12px;font-weight:600;line-height:20px;text-decoration:none;white-space:nowrap;transition:background .12s,border-color .12s}
.horaire-page .ha-alert-action:after{content:"";width:5px;height:5px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);margin-right:2px}
.horaire-page .ha-alert-action:hover{background:#f3f7f8;border-color:#9aaeb7;color:#183b49;text-decoration:none}
.horaire-page .ha-alert-action:focus-visible{outline:2px solid #285969;outline-offset:3px}
.horaire-page .ha-alert-action:active{background:#eaf0f2}
@media(max-width:760px){.horaire-page .ha-a-faire{grid-template-columns:1fr;padding:0 14px;gap:0}.horaire-page .ha-a-faire h2{padding:12px 0 2px}.horaire-page .ha-a-faire li{flex-direction:row;align-items:center;gap:12px}.horaire-page .ha-alert-action{min-height:44px}}
@media(max-width:480px){.horaire-page .ha-a-faire li{align-items:flex-start;flex-direction:column;gap:10px}.horaire-page .ha-alert-action{align-self:flex-start;white-space:normal;text-align:left}}
@media(prefers-reduced-motion:reduce){.horaire-page .ha-alert-action{transition:none}}
@media print{.horaire-page .ha-a-faire{display:none}}

/* Horaire : commandes de consultation et outils replies, 04/10/2026. */
.horaire-page .ha-mise-en-page{display:flex;flex-direction:column;gap:18px}
.horaire-page .ha-principal{width:100%;order:2}
.horaire-page .ha-cote{width:100%;order:1;display:block;margin:0}
.horaire-page .ha-gestion{border:1px solid #dce4e7;border-radius:8px;background:#fff}
.horaire-page .ha-gestion>summary{padding:13px 17px;cursor:pointer;font-size:13px;font-weight:600;color:#244653;display:flex;align-items:center;gap:12px;list-style:none}
.horaire-page .ha-gestion>summary::-webkit-details-marker{display:none}
.horaire-page .ha-gestion>summary:after{content:'+';margin-left:auto;font-size:18px;font-weight:400}
.horaire-page .ha-gestion[open]>summary:after{content:'−'}
.horaire-page .ha-gestion>summary small{font-weight:400;color:#657780;font-size:12px}
.horaire-page .ha-gestion-contenu{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;padding:0 16px 16px}
.horaire-page .ha-gestion .ha-carte{box-shadow:none;border-color:#edf0f2;margin:0}
.horaire-page .ha-filtres{background:#fff;border:1px solid #dce4e7;border-radius:8px;padding:16px 18px;margin:0 0 16px}
.horaire-page .ha-filtres h2{font-size:13px;font-weight:600;margin:0 0 12px}
.horaire-page .ha-choix{gap:6px;margin:8px 0;flex-wrap:wrap}
.horaire-page .ha-pastille{padding:7px 11px;min-height:34px;border-radius:6px;font-size:12px}
.horaire-page .ha-recherche{gap:10px;flex-wrap:wrap;margin-top:12px}
.horaire-page .ha-recherche input[type=search]{min-width:200px;max-width:440px;flex:1}
.horaire-page .ha-reinitialiser{font-size:12px;padding:8px 12px;border:1px solid #dce4e7;background:white;border-radius:6px;color:#36515e;cursor:pointer}
.horaire-page .ha-resume{font-size:12px;color:#647780;margin:12px 0 0;border-top:1px solid #edf0f2;padding-top:11px}
.horaire-page .ha-commandes{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 14px}
.horaire-page .ha-commandes a,.horaire-page .ha-commandes button{padding:8px 12px;min-height:36px;border:1px solid #dce4e7;border-radius:6px;background:#fff;color:#244653;font-size:12px;text-decoration:none;cursor:pointer}
.horaire-page .ha-commandes input{padding:6px 9px;border:1px solid #dce4e7;border-radius:6px;min-height:36px;font-size:13px;width:auto}
.horaire-page .ha-commandes form{display:flex;align-items:center;gap:8px;margin:0}
.horaire-page .ha-commandes label{font-size:12px}
.horaire-page .ha-seminaires{border:1px solid #dce4e7;border-radius:8px;background:#fff;margin-bottom:16px;padding:0 16px}
.horaire-page .ha-seminaires>summary{padding:12px 0;font-size:13px;cursor:pointer;font-weight:600}
.horaire-page .ha-liste-seminaires{max-height:360px;overflow:auto;padding:0 0 12px}
.horaire-page .ha-seminaire{display:grid;grid-template-columns:130px 90px minmax(0,1fr) 100px;align-items:center;gap:12px;padding:11px 2px;border-top:1px solid #edf0f2;font-size:13px;color:#244653;text-decoration:none}
.horaire-page .ha-seminaire:hover{background:#f5f8f9}
.horaire-page .ha-seminaire small{text-align:right;color:#657780}
.horaire-page .ha-seminaire[hidden],.horaire-page [data-hm-a][hidden]{display:none}
.horaire-page .hm-seance summary>strong{white-space:normal;overflow:visible;line-height:1.45}
.horaire-page .ha-confirmation{margin:10px 0;max-width:340px}
.horaire-page .ha-confirmation summary{cursor:pointer;font-size:12px;color:#244653}
.horaire-page .ha-confirmation form{display:grid;gap:8px;padding-top:10px}
.horaire-page .ha-confirmation label{font-size:12px}
.horaire-page .ha-confirmation textarea{min-height:64px;width:100%}
.horaire-page .ha-confirmation button{font-size:12px;padding:8px 10px}
.horaire-page .ha-gestion summary:focus-visible,.horaire-page .ha-commandes a:focus-visible,.horaire-page .ha-seminaires summary:focus-visible{outline:2px solid #285969;outline-offset:3px}
@media(max-width:850px){.horaire-page .ha-gestion-contenu{grid-template-columns:1fr}.horaire-page .ha-gestion>summary small{display:none}}
@media(max-width:550px){.horaire-page .ha-seminaire{grid-template-columns:1fr 1fr;gap:5px}.horaire-page .ha-commandes form{flex-wrap:wrap}.horaire-page .ha-recherche input[type=search]{min-width:0;width:100%}.horaire-page .ha-choix-titre{width:100%}.horaire-page .ha-entete{gap:12px;flex-wrap:wrap}.horaire-page .ha-entete .bouton{font-size:13px}}
@media(pointer:coarse){.horaire-page .ha-pastille,.horaire-page .ha-commandes a,.horaire-page .ha-commandes button,.horaire-page .ha-reinitialiser{min-height:44px}}

/* Finitions du calendrier apres controle en ligne. */
.horaire-page .ha-filtres{display:block}
.horaire-page .ha-choix{margin:8px 0}
.horaire-page .ha-filtres .ha-choix-titre{min-width:126px;font-size:12px}
.horaire-page .ha-reinitialiser{text-decoration:none}
.horaire-page .ha-gestion>.ha-ok{margin:0 16px 12px}
@media(max-width:550px){.horaire-page .ha-filtres .ha-choix-titre{min-width:0}}

/* Selecteur de periode du calendrier, controles alignes. */
.horaire-page .ha-commandes{display:flex;align-items:center;gap:18px;padding:12px 16px;background:#fff;border:1px solid #dce4e7;border-radius:8px;margin:0 0 14px}
.horaire-page .ha-commandes>a{height:40px;min-height:40px;display:inline-flex;align-items:center;padding:0 14px;margin:0;font-size:12px;font-weight:600;line-height:1;border-radius:6px;background:#f8fafb}
.horaire-page .ha-commandes form{display:flex;align-items:center;gap:18px;margin:0;padding:0;border:0;background:none}
.horaire-page .ha-commandes .ha-choix-periode{display:flex;align-items:center;gap:9px}
.horaire-page .ha-commandes label{margin:0;padding:0;font-size:12px;line-height:18px;font-weight:500;color:#657780;white-space:nowrap}
.horaire-page .ha-commandes select{box-sizing:border-box;width:174px;height:40px;min-height:40px;padding:0 12px;margin:0;border:1px solid #cbd7dc;border-radius:6px;background-color:#fff;color:#244653;font:inherit;font-size:13px;cursor:pointer;appearance:auto}
.horaire-page .ha-commandes #ha-annee-directe{width:106px}
.horaire-page .ha-commandes select:hover{border-color:#8ba4ae}
.horaire-page .ha-commandes select:focus-visible{outline:2px solid #285969;outline-offset:2px}
.horaire-page .ha-commandes button[hidden]{display:none}
@media(max-width:640px){.horaire-page .ha-commandes{align-items:stretch;gap:12px;padding:12px}.horaire-page .ha-commandes form{flex:1;gap:12px;flex-wrap:wrap}.horaire-page .ha-commandes .ha-choix-periode{flex:1;min-width:100px;display:flex;flex-direction:column;align-items:stretch;gap:5px}.horaire-page .ha-commandes select,.horaire-page .ha-commandes #ha-annee-directe{width:100%}.horaire-page .ha-commandes>a{align-self:flex-end}}
@media(pointer:coarse){.horaire-page .ha-commandes select,.horaire-page .ha-commandes>a{height:44px;min-height:44px}}

/* Horaire compact valide le 04/10/2026. Regles limitees a l'administration. */
.zone-contenu main.horaire-admin{max-width:1600px;padding:22px 24px}
.horaire-admin .ha-entete{align-items:center;margin:0 0 16px;gap:12px}
.horaire-admin .ha-entete h1{font-size:28px;line-height:1.2}
.horaire-admin .ha-consigne{font-size:13px;margin-top:6px}
.horaire-admin .ha-titre-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.horaire-admin .ha-entete .bouton,.horaire-admin .ha-gerer-bouton{box-sizing:border-box;min-height:40px;border-radius:6px;padding:9px 13px;margin:0;font-size:13px;line-height:20px}
.horaire-admin .ha-gerer-bouton{background:#fff;color:#244653;border:1px solid #d1dde2;cursor:pointer}
.horaire-admin .ha-a-faire{grid-template-columns:auto minmax(0,1fr);gap:0 16px;padding:0 14px;margin:0 0 16px;background:#fdfaf5}
.horaire-admin .ha-a-faire h2{padding:13px 0;font-size:12px}
.horaire-admin .ha-a-faire li{padding:10px 0;gap:14px;align-items:center}
.horaire-admin .ha-a-faire strong{font-size:13px}
.horaire-admin .ha-a-faire small{font-size:12px;margin:1px 0 0}
.horaire-admin .ha-alert-action{min-height:32px;padding:5px 9px;font-size:12px;background:transparent;box-shadow:none}
.horaire-admin .ha-mise-en-page{gap:0}
.horaire-admin .ha-cote{order:3;margin-top:16px}
.horaire-admin .ha-principal{width:100%;order:1}
.horaire-admin .ha-filtres{margin:0 0 18px;padding:0;border:0;background:transparent;border-radius:0}
.horaire-admin .ha-filtres-select{display:flex;align-items:flex-end;flex-wrap:wrap;gap:10px}
.horaire-admin .ha-filtres-select>h2,.horaire-admin .ha-filtres-select>.ha-choix{display:none}
.horaire-admin .ha-filtre-select{display:grid;gap:5px;margin:0;flex:0 1 142px;min-width:115px;font-size:12px;font-weight:500;color:#526b76}
.horaire-admin .ha-filtre-select select{height:40px;min-height:40px;width:100%;min-width:0;padding:0 10px;margin:0;box-sizing:border-box;background:#fff;border:1px solid #ccd8de;border-radius:6px;color:#244653;font-size:13px;appearance:auto}
.horaire-admin .ha-filtres-select .ha-recherche{flex:1 1 230px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 8px;padding:0;margin:0;border:0;background:transparent;align-items:end}
.horaire-admin .ha-filtres-select .ha-recherche>label{grid-column:1/-1;min-width:0;width:auto;font-size:12px;font-weight:500;line-height:18px;margin:0;padding:0}
.horaire-admin .ha-filtres-select .ha-recherche input[type=search]{width:100%;min-width:0;height:40px;margin:0;padding:0 11px;border-radius:6px;font-size:13px;background:#fff}
.horaire-admin .ha-filtres-select .ha-reinitialiser{height:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;padding:0 10px;margin:0;border-radius:6px;font-size:12px;border:1px solid #ccd8de;background:#fff;white-space:nowrap}
.horaire-admin .ha-filtres-select .ha-resume{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.horaire-admin .horaire-mix{display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px;align-items:start}
.horaire-admin .hm-calendrier{margin:0;padding:14px;border-radius:8px;min-width:0}
.horaire-admin .ha-journee{min-width:0}
.horaire-admin .hm-mois{display:grid;grid-template-columns:26px minmax(0,1fr) 26px;gap:5px;margin:0 0 12px;align-items:center}
.horaire-admin .hm-mois h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;min-width:0;margin:0}
.horaire-admin .hm-mois>a{min-height:36px;padding:0;border:0;min-width:0;font-size:20px}
.horaire-admin .ha-periode-form{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(68px,1fr);gap:6px;margin:0;padding:0;border:0;background:transparent}
.horaire-admin .ha-periode-form .ha-choix-periode{min-width:0}
.horaire-admin .ha-periode-form label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.horaire-admin .ha-periode-form select{height:36px;min-height:36px;width:100%;min-width:0;margin:0;padding:0 6px;font-size:13px;font-weight:600;border:1px solid #d7e1e5;border-radius:5px;background:#fff;color:#244653;box-sizing:border-box}
.horaire-admin .ha-periode-form button{grid-column:1/-1;font-size:12px;padding:5px 8px}
.horaire-admin [hidden]{display:none!important}
.horaire-admin .hm-grille{gap:3px}
.horaire-admin .hm-jour-nom{font-size:11px;padding:5px 0}
.horaire-admin .hm-date{min-height:36px;gap:3px;border-radius:5px;font-size:12px}
.horaire-admin .hm-date.hm-choisi{background:#193f4d;color:#fff;border-color:#193f4d}
.horaire-admin .hm-date.hm-choisi .hm-point{background:#fff}
.horaire-admin .hm-legende{flex-wrap:wrap;gap:5px 10px;line-height:1.5;font-size:11px;margin-top:12px}
.horaire-admin .hm-legende .ha-position-ancienne{display:none}
.horaire-admin .ha-calendar-actions{display:flex;align-items:center;justify-content:space-between;gap:6px;flex-wrap:wrap;border-top:1px solid #e5ecef;margin-top:12px;padding-top:10px}
.horaire-admin .ha-calendar-actions>a,.horaire-admin .ha-annee-bouton{display:inline-flex;align-items:center;justify-content:center;font-size:12px;min-height:34px;padding:6px 8px;margin:0;border:1px solid #d7e1e5;border-radius:5px;color:#244653;background:#fff;text-decoration:none;line-height:1.4}
.horaire-admin .ha-calendar-actions .hm-prochaine{border-color:transparent;padding-inline:3px}
.horaire-admin .ha-annee-bouton{margin-top:10px;width:100%;justify-content:space-between;cursor:pointer;min-height:38px}
.horaire-admin .ha-annee-bouton:after{content:'\203A';font-size:18px}
.horaire-admin .hm-selection{margin:0;padding:0 0 13px;border-bottom:1px solid #dfe7eb;gap:12px;align-items:center;min-height:40px}
.horaire-admin .hm-selection h2{font-size:20px;line-height:1.35;min-width:0}
.horaire-admin .hm-selection>span{font-size:12px;white-space:nowrap}
.horaire-admin .hm-jours{display:block}
.horaire-admin .hm-jour{padding:0;background:transparent;border:0;border-radius:0}
.horaire-admin .hm-seance{margin:0;border:0;border-bottom:1px solid #dfe7eb;border-radius:0;background:transparent}
.horaire-admin .hm-seance>summary{display:grid;grid-template-columns:63px minmax(0,1fr) auto;gap:3px 13px;list-style:none;padding:16px 0}
.horaire-admin .hm-seance>summary::-webkit-details-marker{display:none}
.horaire-admin .hm-seance>summary>.hm-heures{grid-column:1;grid-row:1/4;font-size:13px;line-height:1.6;margin:0;display:block}
.horaire-admin .hm-heures .ha-fin{display:block;color:#627985;font-size:12px;font-weight:400}
.horaire-admin .hm-seance>summary>strong{grid-column:2;grid-row:1;margin:0;font-size:14px;line-height:1.5;color:#193f4d}
.horaire-admin .hm-seance>summary>span:not(.hm-heures):not(.hm-ouvrir){grid-column:2;margin:0;font-size:12px;line-height:1.5}
.horaire-admin .hm-seance>summary>.hm-lieu{grid-row:3}
.horaire-admin .hm-seance>summary>.hm-professeur{grid-row:2}
.horaire-admin .hm-seance>summary>.hm-ouvrir{grid-column:3;grid-row:1/4;align-self:center;font-size:12px;margin:0;color:#627985;display:block!important}
.horaire-admin .hm-seance>summary>.hm-ouvrir:after{content:'\203A';font-size:21px;margin-left:8px;display:inline-block}
.horaire-admin .hm-seance[open]>summary>.hm-ouvrir:after{transform:rotate(90deg)}
.horaire-admin .hm-seance>summary>.hm-etat{justify-self:start;background:#fff5e8;color:#81500e;padding:2px 7px!important;font-size:11px!important;border:1px solid #efdfc8;border-radius:4px}
.horaire-admin .hm-detail{padding:0 0 16px 76px}
.horaire-admin .hm-actions a{font-size:12px;border-radius:5px;padding:8px 10px;min-height:34px}
.horaire-admin .hm-vide{font-size:13px;text-align:left;line-height:1.6}
.ha-dialogue{padding:0;border:1px solid #d4dfe4;border-radius:10px;color:#193f4d;background:#fff;width:min(440px,calc(100% - 24px));max-width:calc(100% - 24px);max-height:calc(100dvh - 32px);margin:16px 16px 16px auto;box-shadow:0 16px 60px #163b492b;overflow:auto}
.ha-dialogue::backdrop{background:#19323c45}
.ha-dialogue .ha-dialogue-entete{position:sticky;top:0;z-index:1;background:#fff;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #e2e9ed;padding:16px 20px}
.ha-dialogue .ha-dialogue-entete h2{font-size:18px;margin:0;color:#193f4d}
.ha-dialogue .ha-dialogue-fermer{margin:0;padding:6px 9px;min-height:36px;font-size:12px;border:1px solid #d7e1e5;border-radius:5px;background:#fff;color:#244653;cursor:pointer}
.ha-dialogue .ha-dialogue-corps{padding:4px 20px 20px}
.ha-dialogue .ha-gestion-contenu{display:flex;flex-direction:column;padding:0;gap:0}
.ha-dialogue .ha-carte{background:none;border:0;padding:16px 0 0;margin:0;border-radius:0;box-shadow:none}
.ha-dialogue .ha-carte:first-child{order:3}
.ha-dialogue .ha-carte:nth-child(2){order:2}
.ha-dialogue .ha-carte:last-child{order:1}
.ha-dialogue .ha-carte h2{font-size:11px;text-transform:uppercase;letter-spacing:.06em;margin:0 0 6px;color:#627985}
.ha-dialogue .ha-outils{margin:0;padding:0;list-style:none}
.ha-dialogue .ha-outils li{margin:0}
.ha-dialogue .ha-outils a{display:flex;border:0;border-bottom:1px solid #e5ecef;border-radius:0;background:none;padding:10px 0;color:#193f4d;text-decoration:none;font-size:13px;align-items:center;gap:8px}
.ha-dialogue .ha-outils a:hover{background:#f4f7f8}
.ha-dialogue .ha-outils a:after{content:'\203A';margin-left:auto;font-size:18px}
.ha-dialogue .ha-outils small{font-size:12px;color:#627985;display:block;margin-top:2px;line-height:1.45}
.ha-dialogue .ha-outils .etape{display:none}
.ha-dialogue .ha-chiffres{list-style:none;margin:0;padding:0}
.ha-dialogue .ha-chiffres li{display:grid;grid-template-columns:1fr 1fr;gap:3px 10px;border-top:1px solid #e5ecef;padding:10px 0;font-size:12px}
.ha-dialogue .ha-chiffres strong{grid-column:1/-1;font-size:13px}
.ha-dialogue .ha-chiffres span{font-size:12px;font-weight:400;text-align:left}
.ha-dialogue .ha-chiffres small{grid-column:1/-1;font-size:11px;color:#627985}
.ha-dialogue .ha-ok{font-size:12px;margin:14px 0 0;color:#526b76}
.ha-dialogue .ha-seminaires{border:0;padding:0;margin:0}
.ha-dialogue .ha-seminaires>summary{display:none}
.ha-dialogue .ha-liste-seminaires{display:grid;gap:0;padding:0}
.ha-dialogue .ha-seminaire{display:grid;grid-template-columns:1fr auto;gap:3px 10px;padding:12px 0;border:0;border-bottom:1px solid #e5ecef;border-radius:0;text-decoration:none;font-size:12px;color:#244653}
.ha-dialogue .ha-seminaire strong{font-size:13px}
.ha-dialogue .ha-seminaire small{justify-self:end;color:#627985}
.horaire-admin button:focus-visible,.horaire-admin select:focus-visible,.ha-dialogue a:focus-visible,.ha-dialogue button:focus-visible{outline:2px solid #285969;outline-offset:3px}
@media(max-width:1150px){.horaire-admin .horaire-mix{grid-template-columns:265px minmax(0,1fr);gap:20px}.horaire-admin .hm-seance>summary>.hm-ouvrir{font-size:0}.horaire-admin .hm-seance>summary>.hm-ouvrir:after{margin-left:0}.horaire-admin .hm-selection h2{font-size:18px}.horaire-admin .ha-filtre-select{flex:1 1 120px}.horaire-admin .ha-filtres-select .ha-recherche{flex:2 1 245px}}
@media(max-width:860px){.horaire-admin .horaire-mix{grid-template-columns:240px minmax(0,1fr);gap:16px}.horaire-admin .hm-selection{align-items:flex-start;flex-direction:column;gap:4px}.horaire-admin .hm-seance>summary{grid-template-columns:52px minmax(0,1fr) 10px;gap:3px 8px}.horaire-admin .hm-detail{padding-left:60px}.horaire-admin .ha-a-faire{grid-template-columns:1fr;gap:0}.horaire-admin .ha-a-faire h2{padding:9px 0 0}.horaire-admin .ha-a-faire li{flex-direction:row}}
@media(max-width:680px){.zone-contenu main.horaire-admin{padding:18px 14px}.horaire-admin .horaire-mix{grid-template-columns:1fr;gap:18px}.horaire-admin .ha-entete h1{font-size:25px}.horaire-admin .ha-titre-actions{width:100%}.horaire-admin .ha-filtres-select .ha-recherche{flex-basis:100%}.horaire-admin .hm-selection{flex-direction:row;align-items:center}.horaire-admin .hm-date{min-height:40px}.horaire-admin .hm-mois{grid-template-columns:34px minmax(0,1fr) 34px}.horaire-admin .ha-periode-form{grid-template-columns:minmax(0,1.4fr) minmax(72px,1fr)}.horaire-admin .ha-a-faire li{flex-direction:column;align-items:flex-start;gap:7px}.ha-dialogue{width:calc(100% - 16px);max-width:calc(100% - 16px);margin:8px;max-height:calc(100dvh - 16px)}.ha-dialogue .ha-dialogue-entete{padding:14px}.ha-dialogue .ha-dialogue-corps{padding:4px 14px 14px}}
@media(pointer:coarse){.horaire-admin .ha-filtre-select select,.horaire-admin .ha-recherche input[type=search],.horaire-admin .ha-periode-form select{min-height:44px;font-size:16px}.horaire-admin .hm-date,.horaire-admin .hm-mois>a,.horaire-admin .ha-annee-bouton,.horaire-admin .ha-calendar-actions>a,.ha-dialogue .ha-dialogue-fermer{min-height:44px}}
@media print{.ha-dialogue,.horaire-admin .ha-titre-actions,.horaire-admin .ha-filtres,.horaire-admin .ha-a-faire{display:none!important}.horaire-admin .horaire-mix{display:block}.horaire-admin .hm-calendrier{display:none}.horaire-admin .hm-seance{break-inside:avoid}}

/* Finitions du calendrier compact, mesures dans le navigateur. */
.horaire-page .ha-filtres-select .ha-recherche input[type=search]{box-sizing:border-box}
.ha-dialogue .ha-chiffres small{grid-row:auto;grid-column:1/-1;text-align:left;justify-self:start}

/* Le minimum global du champ de recherche ne doit pas depasser les autres filtres. */
.horaire-page .ha-filtres-select .ha-recherche input[type=search]{min-height:40px}
@media(pointer:coarse){.horaire-page .ha-filtres-select .ha-recherche input[type=search]{min-height:44px}}

/* FORMATIONS ET COURS 20261005 */
/* Proposition locale : les styles restent limites a la rubrique. */
.fc-page{--fc-text:#183b49;--fc-muted:#607681;--fc-line:#dde7eb;--fc-blue:#26849e;--fc-soft:#edf7fa;color:var(--fc-text);max-width:1600px;margin:0 auto}
.fc-page .fc-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin:0 0 22px;flex-wrap:wrap}
.fc-page h1{font-size:30px;line-height:1.2;letter-spacing:-.6px;color:var(--fc-text);margin:0 0 8px}
.fc-page .fc-subtitle{font-size:14px;color:var(--fc-muted);margin:0;max-width:62ch;line-height:1.6}
.fc-page .fc-header-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding-top:2px}
.fc-page .fc-header-actions>a,.fc-page .fc-tools>summary{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 14px;border:1px solid #cbdce3;border-radius:7px;color:#244e5d;background:#fff;text-decoration:none;font-size:13px;font-weight:600;cursor:pointer}
.fc-page .fc-header-actions>a{background:#183b49;color:#fff;border-color:#183b49}
.fc-page .fc-tools{position:relative}
.fc-page .fc-tools>summary{list-style:none}.fc-page .fc-tools>summary:after{content:'⌄';font-size:16px;line-height:1}.fc-page summary::-webkit-details-marker{display:none}
.fc-page .fc-tool-list{position:absolute;right:0;top:calc(100% + 7px);width:255px;background:#fff;box-shadow:0 10px 30px #183b4922;border:1px solid var(--fc-line);border-radius:9px;padding:7px;z-index:20}
.fc-page .fc-tool-list>a{display:block;padding:10px 12px;text-decoration:none;border-radius:5px;font-size:13px;color:#244e5d}.fc-page .fc-tool-list>a:hover{background:var(--fc-soft)}
.fc-page .fc-tabs{display:flex;gap:24px;margin:0 0 24px;border-bottom:1px solid var(--fc-line)}
.fc-page .fc-tabs a{display:flex;align-items:center;gap:8px;color:var(--fc-muted);font-size:14px;font-weight:600;text-decoration:none;border-bottom:3px solid transparent;padding:12px 2px;margin-bottom:-1px;white-space:nowrap}
.fc-page .fc-tabs a[aria-current=page]{border-color:var(--fc-blue);color:#176b84}.fc-page .fc-tabs a:hover{color:#176b84}
.fc-page .fc-section-header{display:flex;gap:16px;align-items:center;justify-content:space-between;margin:0 0 15px;flex-wrap:wrap}.fc-page .fc-section-header h2{margin:0 0 3px;font-size:19px}.fc-page .fc-section-header p{margin:0;color:var(--fc-muted);font-size:13px}
.fc-page .fc-year{display:flex;align-items:center;gap:10px}.fc-page .fc-year label{font-size:12px;color:var(--fc-muted);font-weight:600}.fc-page .fc-year select{background:#fff;border:1px solid #cbdce3;border-radius:6px;color:var(--fc-text);padding:9px 12px;min-height:40px;font:inherit;font-size:13px;width:auto}
.fc-page .oe-sommaire{display:flex;flex-wrap:wrap;gap:0;margin:0 0 26px;padding:18px 8px;background:#fff;border:1px solid var(--fc-line);border-radius:10px;box-shadow:none;align-items:stretch}
.fc-page .oe-sommaire>div,.fc-page .oe-sommaire>a{flex:1 1 104px;padding:0 16px;border-right:1px solid #e6edef;min-width:0;display:flex;flex-direction:column;gap:4px;text-align:left}.fc-page .oe-sommaire>:last-child{border-right:0}
.fc-page .oe-sommaire .compte{font-size:26px;line-height:1.15;min-height:0;display:block;font-weight:650;letter-spacing:-.5px;color:var(--fc-text);top:0}.fc-page .oe-sommaire .quoi{font-size:12px;line-height:1.5;text-transform:none;letter-spacing:0;color:var(--fc-muted)}
.fc-page .oe-sommaire .oe-a-voir .compte{color:#a26919}.fc-page .oe-sommaire .oe-a-voir .quoi{color:#8b611f}
.fc-page .oe-zone{grid-template-columns:minmax(0,1fr) 285px;gap:22px}
.fc-page .oe-site{font-size:12px;letter-spacing:.06em;margin:0 0 12px;padding:0;border:0}
.fc-page .oe-formation{background:#fff;border:1px solid var(--fc-line);border-radius:11px;padding:20px;margin:0 0 16px;box-shadow:0 2px 5px #183b4903}
.fc-page .oe-formation-titre{display:block;margin-bottom:18px}.fc-page .oe-formation-titre h3{font-size:18px;margin:0 0 6px;letter-spacing:-.2px}.fc-page .oe-formation-titre p{font-size:12px;line-height:1.6}.fc-page .oe-gestes-formation{margin-left:auto;gap:12px}.fc-page .oe-lien-geste{font-size:12px}
.fc-page .oe-cartes{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.fc-page .oe-carte{box-shadow:none;border-radius:8px;background:#fcfefe}.fc-page .oe-carte-haut{border-top:0;padding:16px 16px 12px;gap:6px}.fc-page .oe-annee-etudes{font-size:11px;letter-spacing:.06em;color:#59808f;font-weight:650}.fc-page .oe-carte-nom{font-size:17px}.fc-page .oe-carte-chiffres{font-size:12px;line-height:1.8}.fc-page .oe-jauge{height:5px;margin-top:10px}.fc-page .oe-carte-bas{padding:12px 16px;min-height:70px;gap:5px;background:#fafcfc}.fc-page .oe-pastille{font-size:11px;padding:3px 7px;font-weight:500;border-radius:4px}.fc-page .oe-carte:hover{border-color:#77b7ca;background:#f7fcfd;box-shadow:0 3px 12px #183b4910}
.fc-page .fc-open-block{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #e9eff1;padding:10px 16px;color:#247c96;font-size:12px;font-weight:600;background:#fff}.fc-page .fc-open-block:after{content:'→'}
.fc-page .oe-ajouter-formation{margin:0 0 26px}.fc-page .oe-ajouter-formation>a{padding:8px 13px;font-size:12px;background:transparent;border:1px dashed #b9cfd8;border-radius:7px;color:#33677a}
.fc-page .oe-encadre{box-shadow:none;border-radius:10px;padding:18px;border-color:var(--fc-line)}.fc-page .oe-encadre:first-child{border-top:3px solid #d4a24b}.fc-page .oe-encadre h2{font-size:15px;margin-bottom:5px}.fc-page .fc-aside-note{font-size:12px;line-height:1.5;color:var(--fc-muted);margin:0 0 10px}.fc-page .oe-liste li{padding:12px 0;font-size:13px}.fc-page .oe-liste a{text-decoration:none;line-height:1.5}.fc-page .oe-liste a:hover{text-decoration:underline}.fc-page .oe-liste small{line-height:1.6;font-size:11px}.fc-page .oe-chiffres div{font-size:12px;padding:10px 0}.fc-page .oe-chiffres dd{font-size:14px}
.fc-page .fc-catalogue-panel{border:1px solid var(--fc-line);background:#fff;border-radius:11px;overflow:hidden;margin-bottom:24px}
.fc-page .fc-filter-bar{display:grid;grid-template-columns:minmax(170px,1fr) minmax(145px,.55fr) minmax(155px,.55fr) auto;gap:14px;align-items:end;padding:20px;background:#fff;border-bottom:1px solid var(--fc-line);margin:0}
.fc-page .fc-filter-bar label{display:block;margin-bottom:6px;color:var(--fc-muted);font-size:12px;font-weight:600}.fc-page .fc-filter-bar select,.fc-page .fc-filter-bar input{width:100%;min-height:42px;border:1px solid #cfdee4;border-radius:6px;padding:9px 11px;background:#fff;color:#264f60;font:inherit;font-size:13px}.fc-page .fc-filter-actions{display:flex;gap:8px;align-items:center}.fc-page .fc-filter-actions button{min-height:42px;margin:0;font-size:13px;background:#183b49;color:#fff;border-radius:6px;padding:9px 15px}.fc-page .fc-filter-actions a{font-size:12px;color:#547a8a;text-decoration:none}
.fc-page .fc-table-meta{padding:14px 20px;display:flex;justify-content:space-between;gap:15px;align-items:center;font-size:12px;color:var(--fc-muted)}.fc-page .fc-table-meta strong{color:var(--fc-text);font-size:13px;font-weight:600}
.fc-page .fc-catalogue-panel .grille-cadre{border:0;border-radius:0;margin:0;box-shadow:none}.fc-page .fc-catalogue-panel .grille{margin:0}.fc-page .fc-catalogue-panel th{background:#f4f8fa;color:#667f8b;font-size:11px;text-transform:uppercase;letter-spacing:.045em;padding:12px 20px}.fc-page .fc-catalogue-panel td{padding:17px 20px;font-size:13px;vertical-align:middle;border-bottom:1px solid #edf2f4}.fc-page .fc-catalogue-panel tr:last-child td{border-bottom:0}.fc-page .fc-catalogue-panel td>a{font-weight:600;color:#234f61;text-decoration:none}.fc-page .fc-catalogue-panel td>a:hover{text-decoration:underline}.fc-page .catalogue-cours-contexte{font-size:12px;margin-top:4px;color:#758b94}.fc-page .fc-status{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;padding:4px 9px;border-radius:5px;background:#edf5ef;color:#37724b;white-space:nowrap}.fc-page .fc-status:before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}.fc-page .fc-status-draft{background:#fff4e1;color:#986b25}.fc-page .fc-status-pending{background:#eaf3fb;color:#3e6e9d}.fc-page .fc-status-archived{background:#f0f2f3;color:#6c7c84}.fc-page .fc-no-teacher{font-size:12px;color:#a16e2e}.fc-page .fc-course-link{color:#217c96;font-size:12px;white-space:nowrap}
.fc-page .fc-bulk{border:1px solid var(--fc-line);border-radius:10px;background:#fff;margin:20px 0;overflow:hidden}.fc-page .fc-bulk>summary{padding:18px 20px;display:flex;align-items:center;gap:12px;cursor:pointer;font-weight:600;list-style:none;font-size:14px}.fc-page .fc-bulk>summary:before{content:'+';color:#538395;font-size:21px;font-weight:400}.fc-page .fc-bulk[open]>summary:before{content:'−'}.fc-page .fc-bulk>summary span{font-weight:400;color:var(--fc-muted);font-size:12px;margin-left:auto}.fc-page .fc-bulk-content{padding:0 20px 20px;border-top:1px solid #edf2f4}.fc-page .fc-bulk-content .carte{box-shadow:none;border:0;border-bottom:1px solid var(--fc-line);border-radius:0;margin:0;padding:20px 0}.fc-page .fc-bulk-content .carte:last-child{border-bottom:0;padding-bottom:0}.fc-page .fc-bulk-content h2{font-size:16px}.fc-page .fc-bulk-content p{font-size:13px;color:var(--fc-muted)}.fc-page .fc-bulk-content .gestes{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.fc-page .fc-bulk-content select{min-height:38px}.fc-page .fc-bulk-content .gestes button{font-size:12px}
.fc-page .fc-site-tools{display:flex;gap:10px 22px;flex-wrap:wrap;margin:18px 0}.fc-page .fc-site-tools a{font-size:13px;text-decoration:none;color:#237f99}.fc-page .fc-site-tools a:hover{text-decoration:underline}
@media(max-width:1250px){.fc-page .oe-zone{grid-template-columns:minmax(0,1fr)}.fc-page .oe-cote{grid-template-columns:1fr 1fr}.fc-page .fc-filter-bar{grid-template-columns:1fr 1fr}.fc-page .fc-header-actions{padding:0}}
@media(max-width:760px){.fc-page .oe-cote{grid-template-columns:1fr}.fc-page .fc-filter-bar{grid-template-columns:1fr}.fc-page .fc-header-actions{width:100%}.fc-page h1{font-size:25px}.fc-page .fc-tabs{gap:18px}.fc-page .fc-tabs a{font-size:13px}.fc-page .oe-sommaire>div,.fc-page .oe-sommaire>a{flex-basis:30%;margin:6px 0}.fc-page .fc-bulk>summary{flex-wrap:wrap}.fc-page .fc-bulk>summary span{margin:0;flex-basis:100%}.fc-page .oe-formation{padding:15px}.fc-page .fc-year{width:100%}.fc-page .fc-table-meta{flex-wrap:wrap}.fc-page .fc-tool-list{right:auto;left:0}}
/* Ajustement pour les ecrans d administration de largeur courante. */
.fc-page .fc-header{margin-bottom:14px}.fc-page .fc-tabs{margin-bottom:18px}.fc-page .fc-tabs a{padding-top:10px;padding-bottom:10px}.fc-page .oe-sommaire{padding-top:14px;padding-bottom:14px;margin-bottom:22px}
@media(min-width:1051px) and (max-width:1250px){.fc-page .fc-filter-bar{grid-template-columns:minmax(170px,1fr) minmax(130px,.55fr) minmax(140px,.55fr) auto;gap:12px}}
@media(min-width:1101px) and (max-width:1250px){.fc-page .oe-zone{grid-template-columns:minmax(0,1fr) 260px;gap:18px}.fc-page .oe-cote{grid-template-columns:1fr}}
@media(min-width:761px){.fc-page .fc-section-header:has(.fc-year) p{display:none}}

/* EXAMENS ET RESULTATS 20261005 */
.ea{--ink:#264b5a;--muted:#647c87;--line:#dce6eb;--accent:#176b84;color:var(--ink);max-width:1500px;width:100%}.ea *{box-sizing:border-box}.ea h1{margin:0;font-size:28px;letter-spacing:-.6px}.ea h2{font-size:19px;margin:0 0 7px}.ea h3{font-size:15px;margin:0 0 12px}.ea p{line-height:1.55}.ea .muted,.ea small{color:var(--muted)}.ea small{display:block;font-size:12px;margin-top:4px}.ea .top{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:22px}.ea .top p{margin:7px 0 0;font-size:14px}.ea .actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.ea button,.ea .button{font:inherit;font-size:13px;font-weight:600;border:1px solid #cbdce4;background:#fff;color:var(--ink);border-radius:7px;min-height:38px;padding:9px 13px;cursor:pointer;white-space:normal;text-decoration:none}.ea button:hover{background:#f0f6f8;border-color:#86b4c3}.ea button.primary{background:var(--accent);border-color:var(--accent);color:white}.ea button.danger{color:#a53b42;border-color:#e8c5c9;background:#fff}.ea button.text{border:0;background:none;padding:5px 2px;min-height:28px;color:var(--accent)}.ea button:disabled{cursor:not-allowed;opacity:.5}.ea button:focus-visible,.ea input:focus-visible,.ea select:focus-visible,.ea textarea:focus-visible{outline:3px solid #54a3be;outline-offset:2px}.ea .tabs{display:flex;gap:26px;border-bottom:1px solid var(--line);margin-bottom:24px}.ea .tabs button{border:0;border-radius:0;background:none;padding:0 0 13px;font-size:14px;color:var(--muted)}.ea .tabs button[aria-current=page]{border-bottom:3px solid var(--accent);color:var(--accent)}.ea .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 24px}.ea .stat{display:flex;text-align:left;align-items:center;gap:13px;padding:16px 19px;border-radius:9px;background:#fff}.ea .stat strong{font-size:27px;line-height:1.1;font-weight:650}.ea .stat span{font-weight:500;font-size:12px;line-height:1.4}.ea .section-head{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:15px}.ea .section-head p{margin:4px 0 0;font-size:13px}.ea .panel{background:white;border:1px solid var(--line);border-radius:10px;margin-bottom:20px;overflow:hidden}.ea .pad{padding:22px}.ea .filters{display:flex;flex-wrap:wrap;gap:12px;align-items:end;padding:16px 18px;background:#fbfdfe;border-bottom:1px solid var(--line)}.ea label{font-size:12px;font-weight:600;display:block;color:var(--ink)}.ea .filters label:first-child{flex:1;min-width:190px}.ea input:not([type=checkbox]),.ea select,.ea textarea{display:block;width:100%;font:inherit;font-size:13px;border:1px solid #ccdce3;border-radius:6px;background:#fff;color:var(--ink);padding:10px 11px;margin-top:6px;min-height:39px}.ea input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent);vertical-align:middle;margin:0 8px 0 0;flex-shrink:0}.ea .table-wrap{overflow-x:auto}.ea table{width:100%;border-collapse:collapse;font-size:13px}.ea th{background:#f7fafc;color:#667e88;font-size:11px;font-weight:650;text-align:left;text-transform:uppercase;letter-spacing:.4px;padding:12px 17px;border-bottom:1px solid var(--line);white-space:nowrap}.ea td{padding:16px 17px;border-bottom:1px solid #edf2f4;vertical-align:middle}.ea tr:last-child td{border-bottom:0}.ea td strong{font-weight:600}.ea .badge{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:30px;font-size:11px;font-weight:600;white-space:nowrap;background:#edf3f6;color:#526e7b}.ea .badge.ok{background:#e8f4ee;color:#267454}.ea .badge.warn{background:#fff3dc;color:#886012}.ea .badge.info{background:#e9f3fa;color:#21668b}.ea .badge.bad{background:#fdecef;color:#9d4251}.ea .progress{height:4px;width:85px;background:#e7eff2;border-radius:3px;margin-top:7px;overflow:hidden}.ea .progress span{display:block;background:#5ca39a;height:100%}.ea .tools{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:12px}.ea .tools p{margin:0}.ea .callout{border:1px solid #d7e6ed;background:#eff7fa;border-radius:8px;padding:14px 17px;font-size:13px;line-height:1.5;margin-bottom:18px}.ea .callout.warn{background:#fff8e9;border-color:#ecdfbd}.ea .callout.success{background:#edf7f1;border-color:#cce6d7}.ea .empty{text-align:center;padding:38px;color:var(--muted)}.ea .bulk{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;background:#eaf4f7;gap:15px;flex-wrap:wrap;font-size:13px}.ea .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:21px}.ea .form-grid .full{grid-column:1/-1}.ea .help{font-weight:400;font-size:12px;color:var(--muted);line-height:1.5;margin:6px 0 0}.ea .fieldline{display:flex;align-items:center;justify-content:space-between;gap:12px}.ea .candidates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:15px 0}.ea .candidate{display:flex;align-items:center;padding:12px;border:1px solid var(--line);border-radius:6px;font-size:13px;font-weight:400}.ea .form-actions{border-top:1px solid var(--line);padding-top:18px;margin-top:23px;display:flex;justify-content:space-between;gap:15px;align-items:center}.ea .back{margin-bottom:14px}.ea .detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:20px}.ea .meta{display:grid;gap:17px}.ea .meta dt{font-size:11px;color:var(--muted);margin-bottom:4px}.ea .meta dd{font-size:13px;margin:0}.ea .score{max-width:80px;display:inline-block!important;margin:0!important}.ea .history{list-style:none;padding:0;margin:0}.ea .history li{padding:13px 0;border-bottom:1px solid var(--line);font-size:13px}.ea .history li:last-child{border:0}.ea .history time{display:block;color:var(--muted);font-size:11px;margin-bottom:5px}.ea .toast{padding:12px 17px;border-radius:7px;background:#edf7f1;border:1px solid #cbe5d4;margin-bottom:18px;font-size:13px}.ea dialog{color:var(--ink);border:1px solid #d4e1e7;border-radius:12px;padding:0;width:min(660px,calc(100% - 32px));max-height:90vh;box-shadow:0 22px 90px #143a4a40}.ea dialog::backdrop{background:#17374266}.ea dialog header{padding:22px 25px 16px;display:flex;align-items:start;justify-content:space-between;border-bottom:1px solid var(--line)}.ea dialog h2{font-size:21px}.ea dialog .dialog-body{padding:20px 25px;overflow:auto}.ea dialog footer{padding:16px 25px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px;background:#fafcfd}.ea dialog .close{padding:0;min-height:26px;min-width:28px;border:0;font-size:23px}.ea dialog .error{background:#fff0f1;color:#a32f41;padding:10px;border-radius:5px;font-size:13px}.ea .inline-check{display:flex;align-items:start;font-size:13px;font-weight:400;line-height:1.5;margin:15px 0}.ea .inline-check input{margin-top:3px}.ea .count{font-size:12px;background:#edf3f6;color:#486675;border-radius:20px;padding:3px 9px;margin-left:5px}.ea .reference-years{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}.ea .reference-years button[aria-pressed=true]{background:#e6f1f5;border-color:#7caab9;color:#165d75}.ea .subtle-footer{font-size:11px;color:var(--muted);margin-top:18px}.ea .result-selection{margin-left:auto}.ea details summary{cursor:pointer;font-size:13px;font-weight:600}.ea details[open] summary{margin-bottom:14px}.ea .danger-zone{border-top:1px solid var(--line);margin-top:20px;padding-top:15px}.ea .checkbox-cell{width:38px;padding-right:0}.ea .nowrap{white-space:nowrap}.ea .select-all{font-weight:400}.ea .audit-table td{vertical-align:top;line-height:1.5}.ea .audit-table th{text-transform:none;font-size:12px}
@media(max-width:1050px){.ea .detail-grid{grid-template-columns:1fr}.ea .meta{grid-template-columns:repeat(3,1fr)}.ea td,.ea th{padding:13px 11px}.ea .stats{gap:8px}.ea .stat{padding:13px;gap:9px}}@media(max-width:700px){.ea .top,.ea .section-head,.ea .tools{align-items:start;flex-direction:column}.ea h1{font-size:23px}.ea .stats{grid-template-columns:repeat(2,1fr)}.ea .form-grid{grid-template-columns:1fr}.ea .form-grid .full{grid-column:auto}.ea .candidates{grid-template-columns:1fr}.ea .meta{grid-template-columns:1fr 1fr}.ea .pad{padding:16px}.ea .tabs{gap:20px}.ea .filters label{min-width:140px;flex:1}.ea .form-actions{align-items:start;flex-direction:column}}
.ea .advanced{flex-basis:100%;border-top:1px solid #dce6eb;padding-top:12px}.ea .advanced-grid{display:grid;grid-template-columns:repeat(4,minmax(140px,1fr));gap:14px}.ea .result-group th{background:#eaf2f6;color:#305a6d;font-size:12px;text-transform:none}@media(max-width:900px){.ea .advanced-grid{grid-template-columns:repeat(2,1fr)}}

/* Finition des commandes et listes a grand effectif. */
.ea .filters input[type=search]{height:40px;min-height:40px;max-height:40px;box-sizing:border-box;margin:6px 0 0}
.ea label{margin:0}.ea input:not([type=checkbox]),.ea select{margin:6px 0 0}.ea .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ea .results-table td,.ea .note-table td{padding-top:9px;padding-bottom:9px}.ea .results-panel .table-scroll{max-height:400px}.ea .results-filters input[type=search]{appearance:none;box-sizing:border-box}
.ea{--muted:#526b76;font-size:14px;line-height:1.45}
.ea button,.ea .button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;line-height:1.25;text-align:center;margin:0;vertical-align:middle;font-size:13px;padding:10px 14px;flex-shrink:0}
.ea button.text{min-height:36px;padding:8px 6px}.ea button:disabled{opacity:1;color:#84959e;background:#f3f6f8;border-color:#e1e8ec}.ea .top{margin-bottom:16px}.ea .top p{font-size:14px}.ea .tabs{margin-bottom:20px;gap:28px}.ea .tabs button{min-height:42px;padding:8px 0 12px;justify-content:flex-start}
.ea .stat{justify-content:flex-start;min-height:72px;padding:16px 20px;gap:15px}.ea .stat strong{font-variant-numeric:tabular-nums;font-size:26px}.ea .stat span{text-align:left;font-size:13px}.ea .stats{margin-bottom:22px}
.ea .section-head{align-items:center;min-height:46px;gap:20px}.ea .section-head .actions{justify-content:flex-end}.ea h2{line-height:1.35}.ea .count{display:inline-flex;align-items:center;justify-content:center;min-width:27px;min-height:23px;line-height:1;padding:4px 9px;vertical-align:middle;font-variant-numeric:tabular-nums}
.ea label{font-size:12px;line-height:1.4}.ea input:not([type=checkbox]),.ea select{height:40px;min-height:40px;line-height:20px;padding:9px 11px;margin-top:6px;min-width:0}.ea select{padding-right:25px;text-overflow:ellipsis}.ea .form-grid>label,.ea .form-grid>div{min-width:0}.ea .fieldline{min-height:28px;align-items:center}.ea .form-grid>.fieldline{margin-bottom:0}.ea .form-grid>label{padding-top:0}.ea .form-grid>div>.fieldline button{min-height:28px;padding:3px 0}
.ea .filters.results-filters{display:grid;grid-template-columns:minmax(210px,1.5fr) repeat(3,minmax(125px,1fr)) auto auto;gap:12px;align-items:end;padding:16px 18px}.ea .filters label:first-child{min-width:0}.ea .filters.results-filters>label{min-width:0}.ea .filters.results-filters>.advanced{grid-column:1/-1;min-width:0}.ea .filters>.text{align-self:end;height:40px}.ea .advanced summary{font-weight:600;font-size:12px}.ea .advanced-grid label{min-width:0}.ea .advanced-grid{grid-template-columns:repeat(4,minmax(0,1fr));padding-top:5px}
.ea table{font-size:14px;line-height:1.4;border-collapse:separate;border-spacing:0}.ea th{font-size:11px;letter-spacing:.35px;padding:13px 14px;color:#4d6773}.ea td{padding:12px 14px}.ea tbody tr:not(.result-group):nth-child(even){background:#fafcfd}.ea tbody tr:not(.result-group):hover{background:#f0f6f9}.ea tbody tr[data-selected=true]{background:#e9f4f8!important}.ea td small{font-size:12px;line-height:1.4;margin-top:3px}.ea .student-name{display:block;line-height:1.4;overflow-wrap:anywhere;max-width:310px}.ea .student-id{font-size:11px;font-variant-numeric:tabular-nums;letter-spacing:.2px;color:#607683}.ea .numeric{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}.ea .action-cell{text-align:center;white-space:nowrap}.ea .action-cell button{min-width:78px}.ea .badge{font-size:11px;line-height:1.25;min-height:25px;padding:5px 9px;justify-content:center}.ea .checkbox-cell{width:42px;text-align:center;padding:10px}.ea input[type=checkbox]{height:17px;width:17px;margin:0;cursor:pointer}.ea .inline-check input{margin-right:9px;margin-top:2px}
.ea .table-scroll{max-height:clamp(270px,43vh,500px);overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;position:relative}.ea .table-scroll:focus-visible{outline:2px solid #26849e;outline-offset:-2px}.ea .table-scroll thead th{position:sticky;top:0;z-index:2;background:#f3f7fa;box-shadow:0 1px 0 #d9e4ea}.ea .results-table{min-width:800px;table-layout:fixed}.ea .results-table col:nth-child(1){width:42px}.ea .results-table col:nth-child(2){width:24%}.ea .results-table col:nth-child(3){width:27%}.ea .results-table col:nth-child(4){width:90px}.ea .results-table col:nth-child(5){width:125px}.ea .results-table col:nth-child(6){width:115px}.ea .results-table td{overflow-wrap:anywhere}.ea .result-group th{position:static;background:#eaf2f6;font-size:12px;text-transform:none;padding:9px 14px}
.ea .list-topline{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:11px 18px;font-size:12px;border-bottom:1px solid var(--line)}.ea .list-topline .help{margin:0}.ea .list-topline select{width:auto;min-width:150px;margin:0;height:36px;min-height:36px;font-size:12px}.ea .inline-select{display:flex;align-items:center;gap:9px;white-space:nowrap;font-weight:400}.ea .bulk{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid #cfe2ea}.ea .bulk-left{display:flex;flex-direction:column;gap:4px;min-width:0}.ea .bulk .actions{justify-content:flex-end}.ea .bulk strong{font-variant-numeric:tabular-nums}.ea .bulk .scope{font-size:12px;color:#426577;display:flex;gap:8px;flex-wrap:wrap;align-items:center}.ea .bulk .text{font-size:12px;min-height:28px;padding:3px 0;text-decoration:underline;text-underline-offset:3px}.ea .bulk .select-all{display:flex;align-items:center;gap:9px;font-size:13px}.ea .selection-count{font-weight:600;color:#214f61;font-size:13px}.ea .selected-note{font-size:11px;color:#55727f}
.ea .pager{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);padding:12px 16px;background:#fcfdfe;font-size:12px}.ea .pager p{margin:0;line-height:1.5;color:#516c78;font-variant-numeric:tabular-nums}.ea .pager-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.ea .pager select{margin:0;min-height:36px;height:36px;padding:6px 25px 6px 9px;width:auto;font-size:12px}.ea .pager label{font-weight:400;white-space:nowrap;display:flex;align-items:center;gap:6px;font-size:12px}.ea .pager button{min-height:36px;height:36px;padding:7px 11px;font-size:12px}.ea .pager .page-select{min-width:67px}.ea .pager .per-page{margin-right:8px}.ea .list-footer{padding:13px 18px;display:flex;align-items:center;gap:14px;justify-content:space-between;border-top:1px solid var(--line);font-size:12px}.ea .list-footer .help{margin:0}
.ea .detail-grid{grid-template-columns:minmax(0,1fr) 265px;gap:18px;align-items:start}.ea .detail-grid>div{min-width:0}.ea .detail-grid .section-head{padding:19px 18px 15px;margin:0}.ea .detail-grid .section-head h2{font-size:17px}.ea .detail-grid .section-head button{padding:9px 11px}.ea .detail-grid .filters{gap:10px;padding:12px 16px}.ea .detail-grid .table-scroll{max-height:460px}.ea .detail-grid .note-table{min-width:590px;table-layout:fixed}.ea .note-table col:nth-child(1){width:44%}.ea .note-table col:nth-child(2){width:100px}.ea .note-table col:nth-child(3){width:120px}.ea .note-table col:nth-child(4){width:95px}.ea .detail-grid aside .pad{padding:19px}.ea .meta{gap:15px;margin:17px 0 21px}.ea .meta dd{font-size:14px;line-height:1.5}.ea .meta dt{font-size:12px}.ea .back{margin-bottom:12px}.ea .pad.actions{padding:14px 17px;justify-content:flex-end;border-top:1px solid var(--line)}
.ea dialog{max-height:calc(100dvh - 32px);width:min(760px,calc(100% - 32px));margin:auto}.ea dialog[open]{display:flex;flex-direction:column}.ea dialog>form{display:flex;flex-direction:column;max-height:calc(100dvh - 34px);min-height:0;width:100%;margin:0}.ea dialog header{flex-shrink:0;padding:20px 24px;align-items:center;gap:16px;background:white}.ea dialog header h2{margin:0;line-height:1.3;font-size:20px}.ea dialog .close{display:inline-flex;align-items:center;justify-content:center;min-height:34px;width:34px;height:34px;line-height:1;padding:0;font-size:25px}.ea dialog .dialog-body{overflow:auto;min-height:0;padding:19px 24px}.ea dialog footer{flex-shrink:0;padding:15px 24px;align-items:center;gap:10px}.ea dialog footer button{min-width:105px}.ea dialog .callout{margin-bottom:14px}.ea dialog textarea{font-size:13px;min-height:70px}.ea .review-scroll{max-height:260px;overflow:auto;margin-bottom:14px;border:1px solid var(--line);border-radius:7px}.ea .review-scroll th{position:sticky;top:0;background:#f2f7fa;z-index:1}.ea .review-scroll td{padding:10px 12px;font-size:13px}
.ea .candidate-picker{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff;margin:14px 0}.ea .picker-filters{display:grid;grid-template-columns:minmax(140px,1fr) 150px;gap:12px;padding:13px 14px;background:#f8fbfd}.ea .picker-filters label{min-width:0}.ea .picker-summary{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:9px 14px;background:#eff7fa;border-block:1px solid var(--line);font-size:12px}.ea .picker-summary .text{font-size:12px;min-height:30px;padding:3px 5px}.ea .picker-table-wrap{max-height:300px;overflow:auto;scrollbar-gutter:stable}.ea .picker-table-wrap table{table-layout:fixed}.ea .picker-table-wrap th{position:sticky;top:0;z-index:1;background:#f7fafc}.ea .picker-table-wrap td{font-size:13px;padding:10px 12px}.ea .picker-table-wrap td:first-child{width:40px}.ea .picker-table-wrap .candidate{display:flex;gap:10px;border:0;border-radius:0;padding:0;margin:0;font-size:13px;line-height:1.4}.ea .picker-table-wrap .candidate span{min-width:0}.ea .picker-table-wrap .candidate small{margin-top:2px}.ea .picker-table-wrap .candidate input{margin:0;flex-shrink:0}.ea .picker-table-wrap .locked-reason{font-size:11px;color:#607986}.ea .candidate-picker .pager{padding:10px 12px;gap:9px}.ea .candidate-picker .pager-controls{gap:6px}.ea .candidate-picker .per-page{display:none}.ea .picker-count{font-variant-numeric:tabular-nums;font-weight:600}.ea .review-summary{display:flex;gap:12px;flex-wrap:wrap;font-size:13px;line-height:1.5;margin-bottom:14px}.ea .review-summary strong{font-variant-numeric:tabular-nums}.ea .empty{padding:40px 20px;font-size:14px;line-height:1.6}.ea .error{line-height:1.5}
@media(max-width:1200px){.ea .filters.results-filters{grid-template-columns:minmax(200px,1fr) repeat(2,minmax(140px,1fr));gap:12px}.ea .filters.results-filters>button{min-width:100px}.ea .bulk{grid-template-columns:1fr}.ea .bulk .actions{justify-content:flex-start}.ea .detail-grid{grid-template-columns:1fr}.ea .detail-grid aside .meta{grid-template-columns:repeat(3,1fr)}.ea .results-table{min-width:780px}}
@media(max-width:800px){.ea .filters.results-filters{grid-template-columns:1fr 1fr}.ea .filters.results-filters>label:first-child{grid-column:1/-1}.ea .advanced-grid{grid-template-columns:1fr 1fr}.ea .pager{align-items:flex-start}.ea .pager-controls{width:100%;justify-content:space-between}.ea .section-head .actions{justify-content:flex-start}.ea .top{align-items:flex-start}.ea .list-topline{align-items:flex-start}.ea .table-scroll{max-height:420px}.ea .picker-filters{grid-template-columns:1fr}.ea .picker-table-wrap{max-height:250px}.ea dialog .dialog-body{padding:15px}.ea dialog header,.ea dialog footer{padding:15px}.ea dialog footer button{min-width:0}.ea .detail-grid aside .meta{grid-template-columns:1fr 1fr}.ea .list-footer{flex-wrap:wrap}.ea .pager .per-page{margin:0}}

.ea{margin:0 auto;padding:24px 30px 40px}.ea .tabs a{display:flex;align-items:center;padding:10px 0 13px;text-decoration:none;font-weight:600;border-bottom:3px solid transparent}.ea .tabs a[aria-current=page]{border-color:var(--accent);color:var(--accent)}.ea a.primary{background:var(--accent);border-color:var(--accent);color:#fff}.ea .page-number{width:64px!important;margin:0!important;height:36px!important;min-height:36px!important}.ea .score-label{display:flex;align-items:center;gap:8px;font-weight:400}.ea .score-label span{white-space:nowrap}.ea .point-actions{display:flex;align-items:end;gap:14px}.ea .point-actions label{flex:1}.ea .settings-section{margin-top:22px;border-top:1px solid var(--line);padding-top:18px}.ea .settings-section form label,.ea .danger-zone form label{margin-bottom:13px}.ea .settings-section button{width:100%}.ea .creation-examen .formulaire{max-width:100%}.ea.creation-examen>.formulaire{margin:20px 0;max-width:680px}.ea.creation-examen .panel .formulaire{max-width:900px}.ea .examen-candidats{display:block}.ea .picker-table-wrap>label{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line)}.ea [hidden]{display:none!important}.ea .settings-section select{white-space:normal}.ea .history pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;max-width:100%}.ea .reference-years a[aria-current=page]{background:#e6f1f5;border-color:#7caab9}.ea .review-actions{position:sticky;bottom:0;background:#fff;padding:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;align-items:center}.ea .selection-summary{font-weight:600}.ea .results-table{min-width:900px}.ea .results-table .student-name{max-width:270px}.ea .selection-bar{padding:14px 18px;background:#eaf4f7}.ea .results-toolbar{display:flex;justify-content:space-between;gap:14px;align-items:end}.ea .results-toolbar label{flex:1}.ea .details-title{margin-bottom:18px}@media(max-width:800px){.ea{padding:18px 14px}.ea .point-actions,.ea .results-toolbar{flex-direction:column;align-items:stretch}.ea .filters.results-filters{grid-template-columns:1fr 1fr}.ea .detail-grid{grid-template-columns:1fr}.ea .review-actions{flex-wrap:wrap}}
/* HISTORIQUE DES PUBLICATIONS (2026-10-05) : l ecran prend l habillage de Resultats et publication (`.ea`). Seules les regles
   que son gabarit ajoute a celles de `.ea` sont ici : les pastilles de l etat a droite du titre (sous lui quand la place manque),
   la recherche qui garde une largeur lisible, les colonnes, la bande qui annonce chaque publication (le groupe de la liste des
   resultats, avec un texte qui revient a la ligne), le trait entre les suites de lignes d un meme etudiant, la ligne retiree en
   retrait de ton, le bouton de retrait. Aucune couleur neuve : celles de `.ea`. */
.ea .history-head{flex-wrap:wrap}
.ea .history-head>div:first-child{flex:1 1 420px}
.ea .history-etats{margin-bottom:0;flex:0 0 auto}
.ea .history-filters>label:first-child{flex:1 1 240px;min-width:220px}
.ea .history-scroll{max-height:clamp(340px,70vh,900px);overscroll-behavior:auto}
.ea .history-table{min-width:800px;table-layout:fixed}
.ea .history-table col:nth-child(1){width:20%}
.ea .history-table col:nth-child(2){width:30%}
.ea .history-table col:nth-child(3){width:80px}
.ea .history-table col:nth-child(4){width:26%}
.ea .history-table col:nth-child(5){width:165px}
.ea .history-table th.numeric{text-align:right}
.ea .history-table td{vertical-align:top;overflow-wrap:anywhere}
.ea .history-table tbody tr:not(.result-group):nth-child(even){background:transparent}
.ea .history-table tbody tr.history-first td{border-top:2px solid #cbdce4}
.ea .history-bande th{white-space:normal;line-height:1.5;font-weight:400}
.ea .history-bande strong{font-weight:650}
.ea .history-off td{color:var(--muted)}
.ea .button.danger{min-height:34px;padding:6px 11px;font-size:12px;white-space:nowrap;color:#a53b42;border-color:#e8c5c9;background:#fff}
@media(max-width:800px){.ea .history-filters>label:first-child{flex:1 1 100%}}
/* ETUDIANTS ET ADMISSIONS (2026-10-05) : l en-tete d une rubrique a onglets (coeur/_rubrique-entete.html) est celui de « Examens et
   resultats » : il prend les regles de `.ea` (titre, phrase, onglets) et ne retire que la marge et la largeur propres a une page
   entiere, puisqu il se pose en tete d un ecran qui a deja les siennes. Aucune couleur neuve.
   2026-10-06 : le nombre de dossiers a traiter d un onglet, en pastille (les couleurs de la ligne et de l accent de `.ea`) ; et le
   bureau des inscriptions, qui a perdu sa phrase au profit de celle de la rubrique, garde « Nouvelle inscription » a droite. */
.ea.rubrique-entete{margin:0;padding:0;max-width:none}
/* Le meme titre sur les trois onglets : la feuille du bureau (`.bureau-page h1{font-size:1.8rem}`, chargee apres) le grandissait de
   0,8 px, et de 5 px sur telephone ou il passait sur deux lignes en neerlandais ; on reprend les tailles de `.ea h1`. */
.ea.rubrique-entete h1{font-size:28px}
@media(max-width:700px){.ea.rubrique-entete h1{font-size:23px}}
/* Sur telephone, en neerlandais surtout (« Inschrijvingsaanvragen »), les onglets passent a la ligne plutot que d elargir la page. */
.ea.rubrique-entete .tabs{flex-wrap:wrap;column-gap:22px;row-gap:0}
.ea .tabs .onglet-nombre{display:inline-block;margin-left:.5em;min-width:1.7em;padding:.1em .45em;border-radius:999px;background:var(--line);color:var(--ink);font-size:12px;line-height:1.5;text-align:center}
.ea .tabs a[aria-current=page] .onglet-nombre{background:var(--accent);color:#fff}
.bureau-page .bureau-entete>.bureau-nouvelle:first-child{margin-left:auto}
/* « Nouvelle inscription » en bouton plein, a la demande de Max (2026-10-06) : la taille et l arrondi des boutons du bureau, le vert de la
   marque BELSO (#457835, celui du bandeau ; #35602a au survol, ceux de la feuille : la palette Campus11 fait de `--accent` un bleu
   ardoise dans l interface), blanc a 5,3:1, plus foncee au survol et une fois ouvert ; un « + » remplace le triangle. */
.bureau-page .bureau-nouvelle{--vert-belso:#457835;--vert-belso-fonce:#35602a}
.bureau-page .bureau-nouvelle>summary.bouton{display:flex;align-items:center;justify-content:center;gap:.45em;box-sizing:border-box;min-height:42px;padding:9px 16px;border:0;border-radius:8px;background:var(--vert-belso);color:#fff;font-weight:650;cursor:pointer;list-style:none}
.bureau-page .bureau-nouvelle>summary.bouton::-webkit-details-marker{display:none}
.bureau-page .bureau-nouvelle>summary.bouton::before{content:"+";font-size:1.25em;line-height:1}
.bureau-page .bureau-nouvelle>summary.bouton:hover,.bureau-page .bureau-nouvelle[open]>summary.bouton{background:var(--vert-belso-fonce)}
.bureau-page .bureau-nouvelle>summary.bouton:focus-visible{outline:3px solid var(--vert-belso-fonce);outline-offset:2px}
/* Sur telephone, le fil d Ariane tenait a cote de « Precedent » sur l onglet Etudiants (fil court) et passait dessous sur les deux
   autres : tout l ecran descendait de 27 a 38 px d un onglet a l autre. Dans une rubrique a onglets, il prend toujours sa ligne. */
@media(max-width:700px){body:has(.rubrique-entete) .reperes-page .chemin-page{flex-basis:100%}}
/* Deja en ligne avant ce lot, releve par la mesure du 2026-10-06 : a 1280 px, en neerlandais, « Inschrijvingsaanvragen » (152 px)
   sortait de sa colonne de 138 px dans le bloc « A traiter » de l accueil. Le mot se coupe plutot que de deborder. */
.campus-priorite>span:not(.campus-priorite-lien){min-width:0;overflow-wrap:anywhere;hyphens:auto}
/* AJOUTER UN ETUDIANT (2026-10-06, demande de Max) : creer une personne qui n est pas encore dans Discea doit sauter aux yeux.
   Le bouton est celui de « Nouvelle inscription » (vert BELSO #457835, #35602a au survol, 42 px, un « + » en tete) : le vert dit
   « creer » partout dans la rubrique. Le menu de « Nouvelle inscription » devient trois reponses lisibles a une question. */
.ajout-personne{--vert-belso:#457835;--vert-belso-fonce:#35602a;display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin:0 0 20px}
.ajout-personne p{margin:0;font-size:14px;color:var(--muted,#647c87)}
a.bouton-ajout{display:inline-flex;align-items:center;justify-content:center;gap:.45em;box-sizing:border-box;min-height:42px;padding:9px 16px;border-radius:8px;background:var(--vert-belso);color:#fff;font-weight:650;text-decoration:none}
a.bouton-ajout::before{content:"+";font-size:1.25em;line-height:1}
a.bouton-ajout:hover{background:var(--vert-belso-fonce);color:#fff}
a.bouton-ajout:focus-visible{outline:3px solid var(--vert-belso-fonce);outline-offset:2px}
.vide-ajout{display:block;margin-top:6px;font-weight:600}
.vide-ajout a{color:#35602a}
.bureau-page .bureau-nouvelle>.bureau-nouvelle-choix{width:330px;padding:8px}
.bureau-page .bureau-nouvelle-choix>p.bureau-nouvelle-question{margin:4px 10px 6px;font-size:13px;font-weight:650;color:var(--encre-douce)}
.bureau-page .bureau-nouvelle-choix a{display:block;padding:10px;border-radius:8px;text-decoration:none;color:inherit}
.bureau-page .bureau-nouvelle-choix a+a{border-top:1px solid var(--trait)}
.bureau-page .bureau-nouvelle-choix a:hover,.bureau-page .bureau-nouvelle-choix a:focus-visible{background:#edf5e9}
.bureau-page .bureau-nouvelle-choix strong{display:block;font-size:15px}
.bureau-page .bureau-nouvelle-choix span{display:block;margin-top:2px;font-size:13px;color:var(--encre-douce)}
@media(max-width:700px){.ajout-personne a.bouton-ajout{width:100%}.bureau-page .bureau-nouvelle>.bureau-nouvelle-choix{width:auto;max-width:none;left:0;right:0}}
/* INSCRIRE CET ETUDIANT ET LES SEPT CLARTES (2026-10-06). Max : « l affichage ne doit pas etre standard IA, on doit sortir du
   generique ». Un seul element marquant, tire du metier : LE PARCOURS d une personne (fiche, acces, inscription, acces aux cours),
   une vraie suite, d ou les numeros, poses en grands chiffres sur un trait qui fait la piste. Le reste reste sobre et parle la
   langue de Discea : ses boutons, ses etats, son encre. Aucune fleche ni « + » ajoutes aux libelles, aucun bandeau pastel, aucune
   bordure gauche epaisse : le bouton dit ce qu il fait (« Inscrire Lea Dupontel »).
   Couleurs de la feuille seulement : l encre (#183b49), l ardoise (#647c87), le trait (#dce6eb), et le vert BELSO #457835
   (#35602a au survol), reserve a l etape a faire et a son bouton. */

/* Le parcours : quatre etapes, un grand chiffre au-dessus d un trait. Fait : encre, trait plein. En attente (l invitation, qui peut
   partir plus tard) : trait tirete. A faire : vert, avec son bouton. Ensuite : ardoise claire. */
.parcours{--vert-belso:#457835;--vert-belso-fonce:#35602a;--p-encre:#183b49;--p-ardoise:#647c87;--p-trait:#dce6eb;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 22px;margin:26px 0 22px;padding:0}
.parcours-etape{display:flex;flex-direction:column;gap:10px;min-width:0}
.parcours-repere{display:block;padding:0 0 8px;border-bottom:3px solid var(--p-trait);font-size:34px;font-weight:700;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums lining-nums;color:var(--p-trait)}
.parcours-texte{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.parcours-texte strong{font-size:15px;color:var(--p-encre)}
.parcours-texte>span{font-size:13.5px;line-height:1.45;color:var(--p-ardoise)}
.parcours-fait .parcours-repere{color:var(--p-encre);border-bottom-color:var(--p-encre)}
.parcours-attente .parcours-repere{color:var(--p-encre);border-bottom-style:dashed;border-bottom-color:var(--p-ardoise)}
.parcours-courant .parcours-repere{color:var(--vert-belso);border-bottom-color:var(--vert-belso)}
.parcours-ensuite .parcours-texte strong{color:var(--p-ardoise)}
.parcours-texte form{margin:0}
.parcours-action{display:inline-flex;align-items:center;white-space:nowrap;box-sizing:border-box;min-height:42px;margin-top:8px;padding:9px 16px;border:0;border-radius:8px;background:var(--vert-belso);color:#fff;font:inherit;font-weight:650;text-decoration:none;cursor:pointer}
.parcours-action:hover{background:var(--vert-belso-fonce);color:#fff}
.parcours-action:focus-visible{outline:3px solid var(--vert-belso-fonce);outline-offset:2px}
@media(max-width:700px){
  .parcours{grid-template-columns:1fr;gap:0}
  .parcours-etape{display:grid;grid-template-columns:44px 1fr;gap:0 14px}
  .parcours-repere{padding:2px 0 0;border-bottom:0;border-right:3px solid var(--p-trait);font-size:26px}
  .parcours-fait .parcours-repere{border-right-color:var(--p-encre)}
  .parcours-attente .parcours-repere{border-right-style:dashed;border-right-color:var(--p-ardoise)}
  .parcours-courant .parcours-repere{border-right-color:var(--vert-belso)}
  .parcours-texte{padding:2px 0 18px}
  .parcours-action{width:100%;justify-content:center;white-space:normal;text-align:center}
}

/* La page « etudiant ajoute » : le nom en titre, une phrase, le parcours, puis deux liens discrets. */
/* Quatre etapes cote a cote demandent plus que les 720 px d une confirmation : la carte s elargit, le bouton tient sur une ligne. */
.ag-confirmation.ag-ajoute{max-width:980px}
.ag-ajoute h1{margin:0 0 6px}
.ag-ajoute p.ag-ajoute-suite{margin:0;font-size:15px;color:#647c87}
.ag-ajoute p.ag-ajoute-liens{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0;padding-top:14px;border-top:1px solid #dce6eb}

/* Le bouton vert des autres issues (lien a copier, refus du transport) : meme forme, sans fleche. */
a.bouton-inscrire{--vert-belso:#457835;--vert-belso-fonce:#35602a;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:42px;padding:9px 16px;border-radius:8px;background:var(--vert-belso);color:#fff;font-weight:650;text-decoration:none}
a.bouton-inscrire:hover{background:var(--vert-belso-fonce);color:#fff}
a.bouton-inscrire:focus-visible{outline:3px solid var(--vert-belso-fonce);outline-offset:2px}
@media(max-width:700px){.ag-confirmation-boutons:has(.bouton-inscrire){display:flex;flex-direction:column;align-items:stretch}.ag-confirmation-boutons:has(.bouton-inscrire)>a{box-sizing:border-box;width:100%;justify-content:center;text-align:center}}

/* La decision qui attend, dans le dossier : la piste du parcours (un trait vert en haut), les faits en mots, le bouton a droite. */
.decision-attente{--vert-belso:#457835;--vert-belso-fonce:#35602a;margin:0 0 20px;padding:16px 20px;border:1px solid #dce6eb;border-top:3px solid var(--vert-belso);border-radius:10px;background:#fff}
.decision-attente form{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;margin:0}
.decision-attente .decision-texte{min-width:0}
.decision-attente h2{margin:0 0 4px;font-size:17px}
.decision-attente p{margin:0;color:#647c87}
.decision-attente button.bouton-decision{flex:none;min-height:42px;padding:9px 16px;border:0;border-radius:8px;background:var(--vert-belso);color:#fff;font-weight:650;cursor:pointer}
.decision-attente button.bouton-decision:hover{background:var(--vert-belso-fonce)}
.decision-attente button.bouton-decision:focus-visible{outline:3px solid var(--vert-belso-fonce);outline-offset:2px}
@media(max-width:700px){.decision-attente form{flex-direction:column;align-items:stretch}.decision-attente button.bouton-decision{width:100%}}

/* Liste et accueil. */
a.a-approuver{text-decoration:none;font-weight:650}
a.a-approuver:hover,a.a-approuver:focus-visible{text-decoration:underline}
a.creer-acces{font-weight:600;color:#35602a;white-space:nowrap}
.registre-etudiants nav.gestes a{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.registre-etudiants nav.gestes a small{font-size:12.5px;font-weight:400;color:var(--encre-douce)}

/* Ce que la rubrique publiee portait de generique, repris ici : le « + » des deux boutons verts (le libelle suffit ; « Nouvelle
   inscription » ouvre un choix : un petit chevron le dit) et les pastilles rondes des onglets (un chiffre, simplement). */
a.bouton-ajout::before{content:none}
.bureau-page .bureau-nouvelle>summary.bouton::before{content:none}
.bureau-page .bureau-nouvelle>summary.bouton::after{content:"";width:7px;height:7px;margin:-3px 0 0 4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
.bureau-page .bureau-nouvelle[open]>summary.bouton::after{margin-top:3px;transform:rotate(-135deg)}
.ea .tabs .onglet-nombre{min-width:0;margin-left:.4em;padding:0;border-radius:0;background:none;color:var(--muted);font-size:inherit;font-weight:600;font-variant-numeric:tabular-nums}
.ea .tabs a[aria-current=page] .onglet-nombre{background:none;color:var(--accent)}
/* AJOUTER UN ETUDIANT, LA FICHE (2026-10-07, Max : « pas clair du tout cette fiche »). Trois questions numerotees, comme le
   parcours (un grand chiffre a l encre, les questions separees par un trait) ; le site en boutons, comme le choix du site du
   bandeau (encre quand il est choisi) ; les facons de donner l acces en lignes entieres, cerclees d encre une fois choisies ; un
   seul bouton vert. Couleurs de la feuille : encre #183b49, ardoise #647c87, trait #dce6eb, vert BELSO #457835 / #35602a. */
/* Noms propres a cette fiche : « ag-envoi » est deja le voile de la fenetre d envoi en serie, « ag-remise » le groupe de « Creer un acces ». */
.ag-confirmation.ag-ajouter{max-width:820px}
.ag-ajouter p.ag-ajouter-intro{margin:6px 0 0;color:#647c87}
.ag-ajouter form.ag-questions{display:flex;flex-direction:column;margin:22px 0 0}
.ag-ajouter fieldset.ag-question{position:relative;min-width:0;margin:0;padding:18px 0 22px 58px;border:0;border-top:1px solid #dce6eb}
.ag-ajouter fieldset.ag-question>legend{float:left;width:100%;margin:0 0 12px;padding:0;font-size:17px;font-weight:700;color:#183b49}
.ag-ajouter fieldset.ag-question>legend+*{clear:both}
.ag-ajouter .ag-numero{position:absolute;left:0;top:15px;font-size:30px;font-weight:700;line-height:1;letter-spacing:-.02em;color:#183b49;font-variant-numeric:tabular-nums lining-nums}
.ag-sites{display:flex;flex-wrap:wrap;gap:8px}
.ag-site{position:relative}
.ag-site input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.ag-site span{display:inline-flex;align-items:center;box-sizing:border-box;min-height:42px;padding:9px 18px;border:1px solid #dce6eb;border-radius:8px;background:#fff;color:#183b49;font-weight:650}
.ag-site input:checked+span{border-color:#183b49;background:#183b49;color:#fff}
.ag-site input:focus-visible+span{outline:3px solid #457835;outline-offset:2px}
.ag-ajouter p.ag-site-unique{margin:0;font-weight:650;color:#183b49}
.ag-plus{margin-top:16px}
.ag-plus>summary{cursor:pointer;font-weight:600;color:#183b49}
.ag-plus>summary span{font-weight:400;color:#647c87}
.ag-plus[open]>summary{margin-bottom:12px}
.ag-facons{display:grid;gap:8px}
.ag-facon{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border:1px solid #dce6eb;border-radius:8px;background:#fff;cursor:pointer}
.ag-facon:has(input:checked){border-color:#183b49;box-shadow:inset 0 0 0 1px #183b49}
.ag-facon input{flex:none;margin:3px 0 0;accent-color:#183b49}
.ag-facon strong{display:block;color:#183b49}
.ag-facon small{display:block;margin-top:2px;font-size:13px;color:#647c87}
.ag-ajouter .ag-ajouter-envoi{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding:18px 0 0 58px;border-top:1px solid #dce6eb}
button.ag-bouton-ajouter{box-sizing:border-box;min-height:44px;padding:10px 20px;border:0;border-radius:8px;background:#457835;color:#fff;font:inherit;font-weight:650;cursor:pointer}
button.ag-bouton-ajouter:hover{background:#35602a}
button.ag-bouton-ajouter:focus-visible{outline:3px solid #35602a;outline-offset:2px}
.ag-existante{margin-top:28px;padding-top:16px;border-top:1px solid #dce6eb}
.ag-existante>summary{cursor:pointer;font-weight:600;color:#183b49}
.ag-existante[open]>summary{margin-bottom:12px}
.ag-ajouter p.ag-existante-sites{margin:0 0 10px;color:#647c87}
.ag-existante fieldset.ag-question{padding-left:0}
.ag-existante .ag-ajouter-envoi{padding-left:0}
@media(max-width:700px){
  .ag-ajouter fieldset.ag-question{padding-left:40px}
  .ag-ajouter .ag-numero{font-size:24px;top:17px}
  .ag-ajouter .ag-ajouter-envoi{padding-left:0}
  button.ag-bouton-ajouter{width:100%}
}
/* MESSAGES ET ANNONCES (2026-10-07). A l administration, la messagerie, les annonces et l annuaire sont les onglets d une meme
   rubrique (l en-tete commun de `coeur/_rubrique-entete.html`). Sur la messagerie, l en-tete propre a la page ne garde que
   « Nouveau message », a droite, sous les onglets. */
.entete-messagerie.entete-messagerie-rubrique{margin-top:0;padding-top:0}
/* MESSAGES ET ANNONCES, FINITIONS (2026-10-07) : le bouton de creation d une rubrique, vert BELSO comme « Ajouter un etudiant ».
   Il suit les onglets dans la page ; sur grand ecran, la grille le remonte a droite du titre. Sur telephone, il reste sous les
   onglets et l aide, en pleine largeur : les onglets gardent leur place d un onglet a l autre. */
.rubrique-entete{--vert-belso:#457835;--vert-belso-fonce:#35602a}
.rubrique-entete>a.rubrique-action{white-space:nowrap}
/* L aide de l onglet : une phrase lisible, sans encadre ; la question en tete, a l encre, le reste en ardoise. */
.rubrique-entete>.rubrique-aide{max-width:68ch;margin:-4px 0 22px;font-size:15px;line-height:1.55;color:#41596b}
.rubrique-entete>.rubrique-aide strong{display:block;margin-bottom:2px;font-size:13px;font-weight:700;color:#183b49}
@media(min-width:701px){
  .rubrique-entete:has(>a.rubrique-action){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:18px}
  .rubrique-entete:has(>a.rubrique-action)>.top{grid-row:1;grid-column:1}
  .rubrique-entete:has(>a.rubrique-action)>.tabs{grid-row:2;grid-column:1/-1}
  .rubrique-entete:has(>a.rubrique-action)>.rubrique-aide{grid-row:3;grid-column:1/-1}
  .rubrique-entete>a.rubrique-action{grid-row:1;grid-column:2;align-self:center;margin-bottom:16px}
}
@media(max-width:700px){.rubrique-entete>a.rubrique-action{display:flex;width:100%;margin:0 0 20px}.rubrique-entete>.rubrique-aide{font-size:14px}}
/* ANNONCES ET ANNUAIRE (2026-10-07) : les annonces se lisent comme des avis (qui la lit, ce qu elle dit, qui l a publiee),
   se redigent en trois questions numerotees comme la fiche « Ajouter un etudiant », et l annuaire se filtre par boutons. */
.an-intro{max-width:68ch;margin:-4px 0 18px;font-size:15px;line-height:1.55;color:#41596b}
.an-form{display:flex;flex-direction:column;margin:8px 0 0}
fieldset.an-etape{position:relative;min-width:0;margin:0;padding:18px 0 24px 40px;border:0;border-top:1px solid #dce6eb}
fieldset.an-etape>legend{float:left;width:100%;margin:0 0 14px;padding:0;font-size:17px;font-weight:700;color:#183b49}
fieldset.an-etape>legend+*{clear:both}
.an-numero{position:absolute;left:0;top:17px;font-size:24px;font-weight:700;line-height:1;letter-spacing:-.02em;color:#183b49;font-variant-numeric:tabular-nums lining-nums}
.an-choix{margin:0 0 16px}
.an-choix[hidden]{display:none}
.an-question{display:block;margin:0 0 8px;font-size:14px;font-weight:650;color:#183b49}
.an-aide{margin:-2px 0 10px;font-size:13px;line-height:1.5;color:#647c87}
.an-options{display:flex;flex-wrap:wrap;gap:8px}
.an-option{position:relative}
.an-option input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.an-option span{display:inline-flex;align-items:center;box-sizing:border-box;min-height:42px;padding:9px 16px;border:1px solid #dce6eb;border-radius:8px;background:#fff;color:#183b49;font-weight:650}
.an-option input:checked+span{border-color:#183b49;background:#183b49;color:#fff}
.an-option input:focus-visible+span{outline:3px solid #457835;outline-offset:2px}
.an-site-unique{margin:0;font-weight:650;color:#183b49}
input.an-titre::placeholder{font-weight:400;color:#8a9ba3}
input.an-titre{display:block;width:100%;box-sizing:border-box;min-height:44px;margin:0 0 16px;padding:10px 12px;border:1px solid #c9d8df;border-radius:8px;font:inherit;font-size:16px;font-weight:650;color:#183b49}
.an-barre{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;padding:8px;border:1px solid #c9d8df;border-bottom:0;border-radius:8px 8px 0 0;background:#f6f9fa}
.an-barre[hidden],.an-lien[hidden]{display:none}
.an-barre .an-groupe{display:inline-flex;flex-wrap:wrap;gap:4px}
.an-barre button{margin:0;min-height:34px;padding:5px 10px;border:1px solid transparent;border-radius:6px;background:transparent;color:#183b49;font:inherit;font-size:13px;cursor:pointer}
.an-barre button:hover{border-color:#c9d8df;background:#fff}
.an-barre button:focus-visible{outline:3px solid #457835;outline-offset:1px}
.an-champs{align-items:center}
.an-champs-libelle{font-size:13px;color:#647c87}
.an-barre .an-champs button{border-color:#c9d8df;background:#fff;font-weight:650}
.an-lien{display:flex;flex-wrap:wrap;gap:8px;align-items:end;padding:10px;border:1px solid #c9d8df;border-bottom:0;background:#fff}
.an-lien label{flex:1;min-width:180px;font-size:13px;color:#183b49}
.an-lien button{margin:0}
.an-lien input{display:block;width:100%;box-sizing:border-box;margin-top:4px;min-height:38px;padding:8px 10px;border:1px solid #c9d8df;border-radius:6px;font:inherit}
textarea.an-zone[hidden]{display:none}
textarea.an-zone{display:block;width:100%;box-sizing:border-box;min-height:180px;padding:12px;border:1px solid #c9d8df;border-radius:8px;font:inherit}
.an-editeur{min-height:200px;max-height:60vh;overflow:auto;margin:0 0 8px;padding:14px 16px;border:1px solid #c9d8df;border-radius:0 0 8px 8px;background:#fff;font-size:15px;color:#183b49}
.an-editeur:focus{outline:3px solid #457835;outline-offset:-1px}
.an-apercu{padding:18px 20px;border:1px solid #dce6eb;border-radius:10px;background:#fff}
.an-apercu h2{margin:0 0 10px;font-size:19px;color:#183b49}
.an-apercu h2:empty{display:none}
.an-apercu-vide{margin:0;color:#8a9ba3}
.an-epingle-choix{display:flex;align-items:flex-start;gap:12px;margin:4px 0 0;padding:14px 0 0 40px;border-top:1px solid #dce6eb;cursor:pointer}
.an-epingle-choix input{flex:none;margin:3px 0 0;width:18px;height:18px;accent-color:#183b49}
.an-epingle-choix strong{display:block;color:#183b49}
.an-epingle-choix span{font-size:13px;color:#647c87}
.an-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin:22px 0 0 40px}
.an-actions button.an-publier{margin:0;min-height:44px;padding:10px 22px;border:0;border-radius:8px;background:#457835;color:#fff;font:inherit;font-weight:650;cursor:pointer}
.an-actions button.an-publier:hover{background:#35602a}
.an-actions button.an-publier:focus-visible{outline:3px solid #35602a;outline-offset:2px}
/* La liste : un avis par annonce. */
.an-liste{display:grid;gap:14px;max-width:880px;margin-top:16px}
.an-carte{padding:18px 22px 0;border:1px solid #dce6eb;border-radius:10px;background:#fff}
.an-carte.an-epinglee{border-color:#b9cdb1}
.an-marque{margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#35602a}
.an-carte-tete h2{margin:0 0 8px;font-size:19px;line-height:1.3;color:#183b49}
.an-cible{margin:0 0 14px;font-size:14px;color:#183b49}
.an-cible span{margin-right:8px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#647c87}
.an-texte{margin:0 0 16px;font-size:15px;color:#263d49}
.an-carte-pied{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:12px 0 14px;border-top:1px solid #edf2f4;font-size:13px;color:#647c87}
.an-carte-pied p{margin:0}
.an-gestes{display:flex;gap:18px}
a.an-geste{font-weight:650;color:#183b49}
a.an-geste-retirer{color:#a53b42}
.an-raison{max-width:46ch}
.an-vide{max-width:880px;padding:28px;border:1px dashed #c9d8df;border-radius:10px;text-align:center;color:#41596b}
.an-vide p{margin:0 0 6px}
/* L annuaire : chercher, puis choisir un groupe par bouton, chacun avec son nombre. */
.an-recherche{margin:0 0 18px}
.an-recherche-ligne{display:flex;gap:8px;max-width:720px}
.an-recherche-ligne input{flex:1;margin:0;min-width:0;min-height:44px;padding:10px 12px;border:1px solid #c9d8df;border-radius:8px;font:inherit;font-size:15px}
.an-recherche-ligne button{margin:0;min-height:44px}
fieldset.an-categories{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0;padding:0;border:0}
.an-categories .an-option small{margin-left:8px;font-size:12px;font-weight:600;opacity:.75;font-variant-numeric:tabular-nums}
.an-annuaire .an-personne{display:flex;align-items:center;gap:10px}
.an-annuaire .an-nom{display:block;color:#183b49}
.an-annuaire .an-nom strong{font-weight:700}
.an-annuaire .an-groupe-nom{display:block;margin-top:2px;font-size:12px;color:#647c87}
.an-annuaire .an-sans{color:#9aabb3}
@media(max-width:700px){
  fieldset.an-etape{padding-left:0}
  .an-numero{position:static;display:inline-block;margin-right:10px;font-size:20px}
  .an-epingle-choix{padding-left:0}
  .an-actions{margin-left:0}
  .an-actions button.an-publier{width:100%}
  .an-carte{padding:16px 16px 0}
  .an-recherche-ligne{flex-wrap:wrap}
  .an-recherche-ligne button{width:100%}
}
/* DOCUMENTS ET SIGNATURES (2026-10-07) : l ecran des reglements des enseignants prend la largeur des autres onglets, pour que
   l en-tete de la rubrique ne bouge pas d un onglet a l autre ; ses cartes gardent une largeur de lecture. */
.documents-enseignants>.carte,.documents-enseignants>form,.documents-enseignants>.erreur{max-width:960px}
/* LE BOUTON D UNE RUBRIQUE SOUS L AIDE DE L ONGLET (2026-10-07), comme « Ajouter un etudiant » : a droite du titre, il
   retrecissait la colonne du titre et de la phrase, qui passaient a la ligne sur cet onglet seul (« Documents et signatures »,
   en neerlandais surtout) ; au bout des onglets, il les renvoyait a la ligne sous 1280 px. Sous l aide, l en-tete ne bouge plus
   d un onglet a l autre, et le bouton suit la phrase qui dit a quoi sert l onglet. Sur telephone, il garde toute la largeur. */
@media(min-width:701px){
  .rubrique-entete:has(>a.rubrique-action){display:block}
  .rubrique-entete>a.rubrique-action{display:inline-flex;margin:0 0 22px}
}
/* SIGNATURES (2026-10-08) : un document par carte ; l avancement, puis ceux qui n ont pas signe en colonnes ; le reste replie. */
.sg-document{--vert-belso:#457835;--vert-belso-fonce:#35602a;max-width:1100px;margin:0 0 18px;padding:20px 22px 8px;border:1px solid #dce6eb;border-radius:10px;background:#fff}
.sg-tete{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:8px 20px;margin:0 0 12px}
.sg-tete h2{margin:0;font-size:19px;color:#183b49}
.sg-meta{margin:4px 0 0;font-size:13px;color:#647c87}
.sg-original{font-size:14px;font-weight:650;color:#183b49}
.sg-avancement{margin:0 0 18px}
.sg-avancement p{margin:0 0 6px;font-size:15px;color:#183b49}
.sg-avancement progress{display:block;width:100%;max-width:480px;height:8px;border:0;border-radius:4px;background:#e7eff2;overflow:hidden;appearance:none}
.sg-avancement progress::-webkit-progress-bar{background:#e7eff2;border-radius:4px}
.sg-avancement progress::-webkit-progress-value{background:#457835;border-radius:4px}
.sg-avancement progress::-moz-progress-bar{background:#457835;border-radius:4px}
.sg-manquants h3,.sg-repli summary{margin:0 0 10px;font-size:15px;font-weight:700;color:#183b49}
.sg-nombre{margin-left:6px;font-size:13px;font-weight:600;color:#647c87;font-variant-numeric:tabular-nums}
.sg-relance{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 14px}
.sg-relance span{font-size:13px;color:#647c87}
ul.sg-noms{columns:4 200px;column-gap:24px;margin:0 0 16px;padding:0;list-style:none}
ul.sg-noms li{break-inside:avoid;padding:3px 0;font-size:14px}
ul.sg-noms a{color:#183b49}
ul.sg-noms small{color:#647c87}
.sg-complet{margin:0 0 16px;font-weight:650;color:#35602a}
.sg-repli{margin:0 0 12px;padding:12px 0 0;border-top:1px solid #edf2f4}
.sg-repli summary{cursor:pointer}
.sg-repli[open] summary{margin-bottom:12px}
.sg-note{margin:0 0 10px;font-size:13px;color:#647c87}
@media(max-width:700px){ul.sg-noms{columns:2;column-gap:14px}ul.sg-noms li{font-size:13px}.sg-document{padding:16px 14px 6px}.sg-relance a.bouton-ajout{width:100%}}
/* SIGNATURES PAR SITE (2026-10-08) : un titre par site, des cartes compactes ; le chiffre et l action d abord, les listes repliees. */
.sg-sauts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.sg-sauts a{padding:6px 14px;border:1px solid #c9d8df;border-radius:999px;background:#fff;font-size:14px;font-weight:650;color:#183b49;text-decoration:none}
.sg-sauts a:hover{border-color:#183b49}
.sg-site{max-width:1100px;margin:0 0 36px;scroll-margin-top:16px}
.sg-site-titre{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0 0 14px;padding:0 0 10px;border-bottom:2px solid #183b49;font-size:23px;color:#183b49}
.sg-site-titre span{font-size:14px;font-weight:600;color:#647c87}
.sg-site .sg-document{max-width:none;margin:0 0 14px;padding:18px 22px 6px}
.sg-tete h3{margin:0;font-size:17px;color:#183b49}
.sg-tete{margin:0 0 10px}
.sg-chiffres{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px 28px;margin:0 0 14px}
.sg-chiffres .sg-avancement{margin:0}
.sg-avancement p{margin:0 0 8px}
.sg-pourcent{margin-right:8px;font-size:24px;font-weight:750;color:#183b49;font-variant-numeric:tabular-nums}
.sg-action{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right}
.sg-action p{margin:0;font-size:13px;color:#647c87}
.sg-action .sg-complet{margin:0;font-size:15px}
.sg-manquants.sg-repli{border-top:1px solid #edf2f4}
@media(max-width:700px){.sg-chiffres{grid-template-columns:1fr}.sg-action{align-items:stretch;text-align:left}.sg-action a.bouton-ajout{width:100%}.sg-site .sg-document{padding:14px 14px 4px}.sg-site-titre{font-size:20px}}
/* UN DOCUMENT A SIGNER, EN CLAIR (2026-10-08) : l etat en une phrase, l echeance, la prochaine etape ; le reste replie. */
.document-clair{--vert-belso:#457835;--vert-belso-fonce:#35602a;max-width:1100px}
.dc-entete{margin:0 0 20px}
.dc-entete h1{margin:4px 0 10px}
.dc-etat{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 10px;font-size:15px;color:#183b49}
.dc-etat a{font-weight:650;color:#183b49}
.dc-echeance{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px;margin:0;padding:10px 14px;border:1px solid #dce6eb;border-radius:8px;background:#fff;font-size:14px;color:#41596b}
.dc-echeance strong{margin-right:4px;color:#183b49}
.dc-echeance a{margin-left:auto;font-weight:650;color:#183b49}
.document-clair>.carte{margin:0 0 16px}
.dc-etape{border-left:4px solid #457835}
.dc-etape h2{margin:2px 0 6px}
.dc-consequence{margin:0 0 16px;font-size:15px;color:#183b49}
ol.dc-pas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0 0 10px;padding:0;list-style:none}
ol.dc-pas li{display:flex;gap:12px;padding:14px;border:1px solid #e3ebef;border-radius:8px;background:#f8fbfc}
ol.dc-pas li p{margin:2px 0 10px;font-size:14px;color:#41596b}
.dc-numero{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#183b49;color:#fff;font-weight:700;font-size:14px}
.dc-abandon{margin:4px 0 0}
button.dc-lien{padding:0;border:0;background:none;font:inherit;font-size:13px;color:#647c87;text-decoration:underline;cursor:pointer}
button.dc-lien:hover{color:#9e3a3a}
.dc-signatures h2{margin:0 0 12px}
details.dc-repli>summary{cursor:pointer;font-size:16px;font-weight:700;color:#183b49}
details.dc-repli[open]>summary{margin-bottom:14px}
details.dc-repli h3{margin:18px 0 10px;font-size:15px;color:#183b49}
.dc-options>h3:first-of-type{margin-top:4px}
.dc-question{margin:6px 0 14px;padding:0;border:0}
.dc-question legend{margin:0 0 8px;font-weight:700;color:#183b49}
label.dc-choix{display:flex;gap:10px;align-items:flex-start;margin:0 0 8px;padding:10px 12px;border:1px solid #dce6eb;border-radius:8px;background:#fff;font-weight:400;cursor:pointer}
label.dc-choix:has(input:checked){border-color:#183b49;background:#f3f8fa}
label.dc-choix input{margin-top:3px}
label.dc-choix strong{display:block;color:#183b49}
label.dc-choix span{font-size:14px;color:#41596b}
.dc-retrait{margin-top:22px;padding-top:4px;border-top:1px solid #f0d6d6}
.dc-retrait h3{color:#9e3a3a}
@media(max-width:700px){ol.dc-pas{grid-template-columns:1fr}.dc-echeance a{margin-left:0}}
/* « Publier cette version » est un bouton de formulaire : il prend le vert d action des liens « bouton-ajout », sans le « + ». */
.dc-pas button.bouton-ajout{min-height:42px;padding:9px 18px;border:0;border-radius:8px;background:var(--vert-belso);color:#fff;font-weight:650;cursor:pointer}
.dc-pas button.bouton-ajout:hover{background:var(--vert-belso-fonce)}
.dc-pas button.bouton-ajout:focus-visible{outline:3px solid var(--vert-belso-fonce);outline-offset:2px}
/* REGLEMENTS DES ENSEIGNANTS (2026-10-08) : une carte par document, sa suppression au pied, un formulaire en deux questions.
   Mesures : les cartes font 1100 px au plus ; dans le formulaire, tout tient dans une colonne de 720 px (choix, cadre du nouveau
   document, colonnes de champs, fichier, case d accord, envoi), bords gauches alignes au pixel. */
.re-page{--vert-belso:#457835;--vert-belso-fonce:#35602a;--re-colonne:720px}
.re-page>.carte,.re-page>.re-fait{box-sizing:border-box;max-width:1100px;margin:0 0 16px}
.re-fait{padding:10px 14px;border-left:4px solid #457835;border-radius:6px;background:#f1f7ee;color:#2c4d22;font-size:15px}
.re-serie{padding-bottom:8px}
.re-tete{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:8px 20px;margin:0 0 12px}
.re-tete h2{margin:0;font-size:18px;line-height:1.3;color:#183b49}
.re-meta{margin:4px 0 0;font-size:13px;color:#647c87}
/* Une ligne par version, en colonnes fixes : l etat (96 px), la version, la phrase, le bouton. Les liens commencent tous au meme x. */
ul.re-versions{margin:0;padding:0;list-style:none}
ul.re-versions li{display:grid;grid-template-columns:96px max-content minmax(0,1fr) auto;align-items:center;column-gap:14px;min-height:44px;padding:10px 0;border-top:1px solid #edf2f4;font-size:15px}
ul.re-versions li>.document-etat{justify-self:start}
ul.re-versions li>a:not(.re-ouvrir){font-weight:650;color:#183b49}
.re-suite{font-size:13px;color:#647c87}
a.re-ouvrir{white-space:nowrap}
a.bouton-ajout.re-ouvrir::before{content:none}
ul.re-versions li.re-rien{display:block;color:#647c87}
/* Les replis du pied de carte : versions archivees, suppression. */
details.re-pli{padding:10px 0 4px;border-top:1px solid #edf2f4}
details.re-pli>summary{cursor:pointer;width:max-content;font-size:15px;font-weight:700;color:#183b49}
details.re-pli[open]>summary{margin-bottom:12px}
.re-liste-simple{margin:0 0 6px;padding:0 0 0 18px;font-size:14px;line-height:1.8}
button.re-danger{min-height:38px;padding:8px 16px;border:1px solid #9e3a3a;border-radius:8px;background:#fff;color:#9e3a3a;font-weight:650;cursor:pointer}
button.re-danger:hover{background:#9e3a3a;color:#fff}
button.re-danger:focus-visible{outline:3px solid #9e3a3a;outline-offset:2px}
.re-vide h2{margin:0 0 6px;font-size:18px}
.re-vide p{margin:0;max-width:68ch;color:#41596b}
.re-page>details.re-retires{padding:16px 22px}
.re-retires .note{margin:0 0 8px}
/* Le formulaire. */
.re-ajout{scroll-margin-top:16px}
.re-ajout>h2{margin:0 0 18px}
fieldset.re-etape{min-width:0;margin:0 0 22px;padding:0;border:0}
.re-etape>legend{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:0;font-size:16px;font-weight:700;color:#183b49}
.re-formulaire .dc-choix,.re-nouveau,.re-colonnes,.re-page .re-formulaire input[type="file"],.re-envoi{box-sizing:border-box;width:100%;max-width:var(--re-colonne)}
.re-formulaire .dc-choix{margin:0 0 8px}
/* Le cadre du nouveau document ne sert que si « Un nouveau document » est coche. */
.re-formulaire:has(input[name="reglement"]:not([value=""]):checked) .re-nouveau{display:none}
.re-nouveau{margin:4px 0 0;padding:14px 16px 4px;border:1px solid #e3ebef;border-radius:8px;background:#f8fbfc}
.re-sous-titre{margin:0 0 10px;font-size:15px;font-weight:700;color:#183b49}
.re-nouveau>input,.re-colonnes input,.re-colonnes select{box-sizing:border-box;width:100%;max-width:none}
.re-colonnes{display:grid;column-gap:16px}
.re-trois{grid-template-columns:repeat(3,minmax(0,1fr))}
.re-deux{grid-template-columns:repeat(2,minmax(0,1fr))}
.re-accord{margin-top:14px!important}
.re-envoi{padding-top:16px;border-top:1px solid #edf2f4}
.re-envoi .note{margin:0 0 12px}
button.re-creer{min-height:44px;padding:10px 20px;border:0;border-radius:8px;background:var(--vert-belso);color:#fff;font-weight:650;cursor:pointer}
button.re-creer:hover{background:var(--vert-belso-fonce)}
button.re-creer:focus-visible{outline:3px solid var(--vert-belso-fonce);outline-offset:2px}
@media(max-width:700px){
  ul.re-versions li{grid-template-columns:auto minmax(0,1fr);row-gap:6px}
  .re-suite,ul.re-versions li>.re-gestes{grid-column:1/-1}
  .re-trois,.re-deux{grid-template-columns:minmax(0,1fr)}
  .re-page>details.re-retires{padding:14px}
}
/* Espacements reguliers : 14 px sous le champ fichier comme sous les autres champs ; le cadre du nouveau document a la meme marge en haut et en bas. */
.re-page .re-formulaire input[type="file"]{margin:0 0 14px}
.re-nouveau{padding-bottom:14px}
.re-nouveau>.note:last-child{margin:0}
.re-nouveau>input{margin:0 0 14px}
/* LA CROIX ET SA FENETRE (2026-10-08, Max : « une case croix a cote du bouton et une fenetre qui pop pour confirmer »).
   A droite de chaque carte et de chaque ligne, une colonne de gestes : le bouton, puis la croix (44 x 44, la hauteur des boutons de Discea). Une ligne sans
   croix garde sa place vide : les boutons finissent tous au meme x, les croix aussi. */
.re-gestes{display:flex;align-items:center;justify-content:flex-end;gap:8px}
ul.re-versions li>.re-gestes{justify-self:end}
button.re-croix,.re-croix-place{box-sizing:border-box;flex:none;width:44px;height:44px;min-height:44px;margin:0}
button.re-croix{display:grid;place-items:center;padding:0;border:1px solid #dce6eb;border-radius:8px;background:#fff;color:#9e3a3a;cursor:pointer}
button.re-croix:hover{border-color:#9e3a3a;background:#fdf0f0}
button.re-croix:focus-visible{outline:3px solid #9e3a3a;outline-offset:2px}
.re-gestes>a{box-sizing:border-box;min-height:44px;margin:0}
dialog.re-dialogue{box-sizing:border-box;width:min(480px,calc(100vw - 32px));margin:auto;padding:24px;border:0;border-radius:12px;background:#fff;color:#183b49;box-shadow:0 18px 48px rgba(24,59,73,.28)}
dialog.re-dialogue::backdrop{background:rgba(24,59,73,.45)}
dialog.re-dialogue h2{margin:0 0 10px;font-size:19px;line-height:1.3;color:#183b49}
dialog.re-dialogue p{margin:0 0 22px;font-size:15px;line-height:1.55;color:#41596b}
.re-dialogue-gestes{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px}
.re-page .re-dialogue-gestes button{box-sizing:border-box;height:44px;min-height:44px;margin:0;padding:0 18px;font-size:15px;line-height:1;align-self:center}
dialog.re-dialogue button.re-danger{border-color:#9e3a3a;background:#9e3a3a;color:#fff}
dialog.re-dialogue button.re-danger:hover{border-color:#7f2c2c;background:#7f2c2c}
@media(max-width:700px){
  .re-tete>.re-gestes{width:100%}
  .re-tete>.re-gestes>.bouton,ul.re-versions li>.re-gestes>a.re-ouvrir{flex:1;justify-content:center;text-align:center}
  ul.re-versions li>.re-gestes{justify-self:stretch}
  .re-dialogue-gestes{flex-direction:column;align-items:stretch}
  .re-page .re-dialogue-gestes button{width:100%;align-self:stretch}
}

/* LE BOUTON PAR DEFAUT (2026-10-10, audit H13) : la touche Entree declenche le premier bouton d envoi d un formulaire. Celui-ci,
   rendu mais hors ecran et hors tabulation, enregistre ; un bouton cache par display:none ne serait pas declenche partout. */
.bouton-par-defaut{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* LES ERREURS ET LES ETATS SE LISENT (2026-10-11, audit B18). Les erreurs de formulaire de Django n avaient aucune regle ;
   « Partielle » partageait le rouge d « Impayee » alors que de l argent est arrive ; les etats d un releve n avaient pas de
   couleur ; les boutons d une barre de gestes etaient colles. */
.errorlist{list-style:none;margin:4px 0 8px;padding:0;color:var(--alerte);font-size:14px;font-weight:600}
.errorlist li{margin:0}
.etat-partial{background:#fbf1df;color:#8f5c10}
.etat-orphan{background:#fbf1df;color:#8f5c10}
.etat-linked{background:var(--accent-clair);color:var(--accent-fonce)}
.etat-set_aside{background:#eef1f3;color:#4c5d66}
.gestes{gap:8px}

/* LA FICHE D UNE FACTURE S IMPRIME SANS SES GESTES (2026-10-11, audit B23) : les renseignements, les lignes et les
   encaissements, sans la barre de la facturation ni la quinzaine de boutons. */
@media print{.fiche-facture .ff-gestes,.fiche-facture .gestes,.fiche-facture form,.fiche-facture .bouton,.rubriques-facturation,.pied-application{display:none!important}.fiche-facture .deux-colonnes{display:block}.fiche-facture .carte{break-inside:avoid;box-shadow:none}}

/* LE PROFIL KMO SE LIT (2026-10-11, audit B25) : l aide plus petite que les libelles, la confirmation en vert. */
.kmo-simple .aide{font-size:13px;color:var(--encre-douce)}
.kmo-simple .kmo-enregistre{background:var(--accent-clair);color:var(--accent-fonce);padding:10px 14px;border-radius:8px;font-weight:600}

/* LE JOURNAL PAR JOURS ET PAR MOMENTS (2026-10-11, reprise/lots/journal-regroupe-20261011). Une famille a sa couleur
   (--f), reprise par le filtre, la puce d un moment et sa pastille. Les hauteurs des barres sont des classes : la
   politique de securite du contenu refuse tout attribut `style`. */
.jr{--jr-encre:#183b49;--jr-doux:#5f737d;--jr-trait:#dfe7eb;--jr-clair:#f6f9fa;--jr-rouge:#b5473a}
.jr-f-sensibles{--f:#b5473a}.jr-f-comptes{--f:#3c568c}.jr-f-paiements{--f:#7a4fa3}.jr-f-cotes{--f:#1f7f86}
.jr-f-horaire{--f:#c25e12}.jr-f-memoires{--f:#5b5fc7}.jr-f-communication{--f:#3f7f3a}.jr-f-automatique{--f:#6f7d84}
.jr-f-techniques{--f:#8a6100}.jr-f-autres{--f:#6f7d84}
.jr-tete{display:grid;gap:14px;margin:18px 0 16px;padding:16px 18px;border:1px solid var(--jr-trait);border-radius:10px;background:#fff}
.jr-tete-haut{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 20px}
.jr-tete-haut h2{margin:0;font-size:15px;color:var(--jr-encre)}
.jr-tete-haut p{margin:3px 0 0;font-size:13px;color:var(--jr-doux)}
.jr-segments{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;border:1px solid var(--jr-trait);border-radius:9px;background:var(--jr-clair)}
.jr-segments a{padding:7px 12px;border-radius:7px;color:var(--jr-doux);font-size:13px;font-weight:600;line-height:1.2;text-decoration:none;white-space:nowrap}
.jr-segments a:hover,.jr-segments a:focus-visible{color:var(--jr-encre);background:#fff}
.jr-segments a[aria-current]{background:var(--jr-encre);color:#fff}
.jr-barres{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px;align-items:end;height:76px}
.jr-barre{display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;gap:3px;height:100%;min-width:0;text-decoration:none}
.jr-barre i{display:block;min-height:2px;border-radius:3px 3px 0 0;background:#c9d7de}
.jr-barre:hover i,.jr-barre:focus-visible i{background:#8fa9b5}
.jr-barre-affichee i{background:var(--jr-encre)}
.jr-barre span{height:12px;font-size:10px;line-height:12px;text-align:center;color:var(--jr-doux)}
.jr-h-0{height:2px;background:#e6edf0!important}.jr-h-5{height:5%}.jr-h-10{height:10%}.jr-h-15{height:15%}.jr-h-20{height:20%}
.jr-h-25{height:25%}.jr-h-30{height:30%}.jr-h-35{height:35%}.jr-h-40{height:40%}.jr-h-45{height:45%}.jr-h-50{height:50%}
.jr-h-55{height:55%}.jr-h-60{height:60%}.jr-h-65{height:65%}.jr-h-70{height:70%}.jr-h-75{height:75%}.jr-h-80{height:80%}
.jr-h-85{height:85%}.jr-h-90{height:90%}.jr-h-95{height:95%}.jr-h-100{height:100%}
.jr-barre i[class]{max-height:calc(100% - 15px)}
.jr-filtres{display:grid;gap:10px}
.jr-ligne{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px 12px;margin:0}
.jr-etiquette{flex:0 0 62px;margin:0;font-size:12px;font-weight:600;line-height:32px;color:var(--jr-doux)}
form.jr-ligne .jr-etiquette{line-height:38px}
.jr-recherche{display:flex;flex:1 1 300px;gap:8px;min-width:0}
.jr-recherche input[type=search]{flex:1 1 auto;min-width:0;height:38px;margin:0}
.jr-recherche button{flex:none;height:38px;margin:0;padding:0 14px;border:1px solid #cfdbe1;border-radius:8px;background:#fff;color:var(--jr-encre);font-size:13px;font-weight:600;line-height:1}
.jr-recherche button:hover,.jr-recherche button:focus-visible{border-color:var(--jr-encre)}
.jr-choix{display:flex;flex:1 1 300px;flex-wrap:wrap;gap:8px}
.jr-filtre{display:inline-flex;align-items:center;gap:7px;height:32px;box-sizing:border-box;padding:0 12px;border:1px solid var(--jr-trait);border-radius:999px;background:#fff;color:var(--jr-encre);font-size:12.5px;font-weight:600;line-height:1;text-decoration:none;white-space:nowrap}
.jr-filtre:hover,.jr-filtre:focus-visible{border-color:var(--jr-encre)}
.jr-filtre span{font-weight:500;color:var(--jr-doux)}
.jr-pastille::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--f)}
.jr-filtre[aria-current]{border-color:var(--jr-encre);background:var(--jr-encre);color:#fff}
.jr-filtre[aria-current] span{color:#cfdde3}
.jr-jour-choisi{margin:0 0 4px;font-size:13px;color:var(--jr-doux)}
.jr-jour{margin:0 0 18px}
.jr-jour h3{position:sticky;top:0;z-index:2;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;margin:0;padding:12px 2px 8px;background:#f5f7f8;font-size:15px;color:var(--jr-encre)}
.jr-jour-chiffres{font-size:12.5px;font-weight:500;color:var(--jr-doux)}
.jr-attention{font-weight:600;color:var(--jr-rouge)}
.jr-moments{border:1px solid var(--jr-trait);border-radius:10px;background:#fff;overflow:hidden}
.jr-moment+.jr-moment{border-top:1px solid var(--jr-trait)}
.jr-resume{display:grid;grid-template-columns:96px minmax(180px,250px) minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 14px;list-style:none}
summary.jr-resume{cursor:pointer}
summary.jr-resume::-webkit-details-marker{display:none}
summary.jr-resume::marker{content:""}
summary.jr-resume:hover,summary.jr-resume:focus-visible,.jr-moment[open]>.jr-resume{background:var(--jr-clair)}
.jr-moment[open]>.jr-resume{border-bottom:1px solid var(--jr-trait)}
.jr-heure{font-size:13px;font-weight:600;line-height:1.3;color:var(--jr-encre);font-variant-numeric:tabular-nums}
.jr-qui{display:grid;gap:2px;min-width:0}
.jr-qui b{overflow:hidden;font-size:13.5px;color:var(--jr-encre);text-overflow:ellipsis;white-space:nowrap}
.jr-role{font-size:11.5px;line-height:1.35;color:var(--jr-doux)}
.jr-role-administration{font-weight:600;color:#3c568c}
.jr-role-adoptia{font-weight:600;color:#8a6100}
.jr-quoi{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0;font-size:13px;color:var(--jr-encre)}
.jr-puce{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:6px;background:#f2f5f6;background:color-mix(in srgb,var(--f) 9%,#fff);color:var(--jr-encre);font-size:12.5px;line-height:1.3}
.jr-puce::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--f)}
.jr-puce b{color:var(--f)}
.jr-puce-forte{font-weight:700}
.jr-cible{font-weight:600;overflow-wrap:anywhere}
.jr-note{font-size:12px;color:var(--jr-doux)}
.jr-nb{font-size:12px;color:var(--jr-doux);white-space:nowrap}
summary.jr-resume .jr-nb::after{content:"";display:inline-block;width:6px;height:6px;margin:0 2px 2px 8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
.jr-moment[open]>summary.jr-resume .jr-nb::after{margin-bottom:-2px;transform:rotate(-135deg)}
.jr-sensible>.jr-resume{box-shadow:inset 3px 0 0 var(--jr-rouge)}
.jr-connexions>.jr-resume{background:#fbfcfc}
.jr-lignes,.jr-personnes{margin:0;padding:6px 14px 10px 122px;list-style:none}
.jr-lignes li{display:grid;grid-template-columns:48px minmax(200px,320px) minmax(0,1fr);gap:12px;padding:6px 0;border-bottom:1px dashed #e8eef1;font-size:12.5px;line-height:1.45}
.jr-lignes li:last-child,.jr-personnes li:last-child{border-bottom:0}
.jr-lignes time,.jr-personnes time{color:var(--jr-doux);font-variant-numeric:tabular-nums}
.jr-l-lib{color:var(--jr-encre)}
.jr-l-lib code{font-size:11.5px;color:var(--jr-doux);overflow-wrap:anywhere}
.jr-l-det{color:var(--jr-doux);overflow-wrap:anywhere}
.jr-lignes li.jr-reste{display:block;color:var(--jr-doux)}
.jr-personnes{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));column-gap:24px}
.jr-personnes li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 10px;padding:6px 0;border-bottom:1px dashed #e8eef1;font-size:12.5px}
.jr-personnes b{overflow:hidden;color:var(--jr-encre);text-overflow:ellipsis;white-space:nowrap}
.jr-personnes .jr-role{grid-row:2}
.jr-personnes time{grid-row:1/3;grid-column:2;align-self:center}
.jr-vide{margin:0;padding:24px;border:1px solid var(--jr-trait);border-radius:10px;background:#fff;color:var(--jr-doux);text-align:center}
.jr-plus{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 16px;margin:6px 0 0;font-size:13px;color:var(--jr-doux)}
.jr-bouton{display:inline-flex;align-items:center;min-height:36px;box-sizing:border-box;padding:0 14px;border:1px solid #cfdbe1;border-radius:8px;background:#fff;color:var(--jr-encre);font-size:13px;font-weight:600;text-decoration:none}
.jr-bouton:hover,.jr-bouton:focus-visible{border-color:var(--jr-encre)}
.jr-tableau td:first-child{white-space:nowrap}
@media(max-width:700px){
.jr-tete{padding:14px}
.jr-tete-haut{align-items:stretch}
.jr-segments{display:flex;width:100%;box-sizing:border-box}
.jr-segments a{flex:1 1 auto;padding:8px 6px;text-align:center}
.jr-barres{gap:2px;height:58px}
.jr-barre span{display:none}
.jr-barre i[class]{max-height:100%}
.jr-etiquette,form.jr-ligne .jr-etiquette{flex-basis:100%;line-height:1.3}
.jr-recherche,.jr-choix{flex-basis:100%}
.jr-resume{grid-template-columns:minmax(0,1fr) auto;gap:6px 10px}
.jr-heure{grid-column:1}
.jr-nb{grid-column:2;grid-row:1}
.jr-qui,.jr-quoi{grid-column:1/-1}
.jr-lignes,.jr-personnes{padding:6px 14px 10px}
.jr-lignes li{grid-template-columns:44px minmax(0,1fr);row-gap:2px}
.jr-l-det{grid-column:2}
.jr-plus .jr-bouton{flex:1 1 100%;justify-content:center}
}
@media print{.jr-tete,.jr-plus{display:none}.jr-jour h3{position:static}}

/* LE LECTEUR DE PDF S IMPRIME (2026-10-11, audit M43) : seules les pages du document, une par feuille, sans cadre. */
@media print{.lecteur-piece>h1,.lecteur-piece>.gestes,.rubriques-facturation,.pied-application{display:none!important}.lecteur-piece .rgl-lecteur{max-width:none;margin:0;padding:0;background:none;border-radius:0}.lecteur-piece .rgl-page{margin:0;box-shadow:none;break-inside:avoid;break-after:page}.lecteur-piece .rgl-page:last-child{break-after:auto}}

/* L ONGLET SAUVEGARDES DU PILOTAGE (2026-10-11, reprise/lots/sauvegardes-pilotage-20261011) : les trois copies, la frise
   des quinze derniers jours, les jeux et leurs endroits, l essai de restauration. Aucune hauteur ni couleur en attribut :
   la politique de securite du contenu refuse tout attribut `style`. */
.sv{--sv-encre:#183b49;--sv-doux:#5f737d;--sv-trait:#dfe7eb;--sv-vert:#2f7d43;--sv-vert-fond:#e7f3ea;--sv-rouge:#b5473a;--sv-rouge-fond:#fbecea;--sv-ambre:#8f5c10;--sv-ambre-fond:#fbf1df}
.sv-vide{margin:0;color:var(--sv-doux)}
.sv-ancien{margin:0 0 14px;padding:10px 14px;border-radius:8px;background:var(--sv-ambre-fond);color:var(--sv-ambre);font-size:14px}
.sv-alerte{display:flex;gap:14px;align-items:flex-start;margin:0 0 18px;padding:16px 18px;border:1px solid #efc9c3;border-left:4px solid var(--sv-rouge);border-radius:10px;background:var(--sv-rouge-fond)}
.sv-alerte-icone{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--sv-rouge);color:#fff;font-weight:700;font-size:15px}
.sv-alerte h2{margin:2px 0 6px;font-size:16px;color:#7d2a20}
.sv-alerte p{margin:0 0 4px;font-size:14px;line-height:1.5;color:#5c2a24}
.sv-chiffre-alerte strong{color:var(--sv-rouge)!important}
.sv-chiffre-attention strong{color:var(--sv-ambre)!important}
.sv .pilotage-chiffre p{white-space:nowrap}
.sv-copies{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.sv-copie{display:flex;flex-direction:column;gap:10px;min-width:0;padding:16px;border:1px solid var(--sv-trait);border-radius:10px;background:#fff}
.sv-copie-echec{border-color:#efc9c3;box-shadow:inset 0 3px 0 var(--sv-rouge)}
.sv-copie header{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sv-copie h3{margin:0;font-size:16px;color:var(--sv-encre)}
.sv-lieu{margin:-4px 0 0;font-size:12.5px;color:var(--sv-doux)}
.sv-copie dl{display:grid;gap:8px;margin:0}
.sv-copie dl div{display:grid;gap:1px}
.sv-copie dt{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--sv-doux)}
.sv-copie dd{margin:0;font-size:13.5px;color:var(--sv-encre);overflow-wrap:anywhere}
.sv-protege{margin:auto 0 0;padding-top:10px;border-top:1px dashed var(--sv-trait);font-size:12.5px;color:var(--sv-doux)}
.sv-etat{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
.sv-etat::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.sv-etat-ok{background:var(--sv-vert-fond);color:var(--sv-vert)}
.sv-etat-echec{background:var(--sv-rouge-fond);color:var(--sv-rouge)}
.sv-etat-retard,.sv-etat-attention{background:var(--sv-ambre-fond);color:var(--sv-ambre)}
.sv-etat-inconnu{background:#eef1f3;color:#4c5d66}
.sv-frise{display:grid;gap:8px;overflow-x:auto;padding-bottom:4px}
.sv-frise-ligne{display:grid;grid-template-columns:150px minmax(0,1fr);align-items:center;gap:12px;min-width:520px}
.sv-frise-nom{font-size:13px;font-weight:600;color:var(--sv-encre)}
.sv-frise-cases{display:grid;grid-template-columns:repeat(15,minmax(0,1fr));gap:4px}
.sv-case{display:block;height:26px;border-radius:5px;background:#e6edf0}
.sv-case.sv-ok{background:#58a56b}
.sv-case.sv-echec{background:var(--sv-rouge)}
.sv-case.sv-partiel{background:linear-gradient(135deg,#58a56b 50%,var(--sv-rouge) 50%)}
.sv-frise-reperes .sv-frise-cases span{font-size:11px;color:var(--sv-doux);white-space:nowrap}
.sv-frise-reperes .sv-frise-cases span:nth-child(8){justify-self:center}.sv-frise-reperes .sv-frise-cases span:last-child{justify-self:end}
.sv-legende{display:flex;flex-wrap:wrap;gap:8px 18px;margin:12px 0 0;font-size:12.5px;color:var(--sv-doux)}
.sv-legende>span{display:inline-flex;align-items:center;gap:7px}
.sv-legende .sv-case{width:16px;height:16px;border-radius:4px}
.sv-present{font-weight:600;color:var(--sv-vert)}
.sv-absent{color:#6f7d84}
.sv-manque{font-weight:600;color:var(--sv-rouge)}
.sv .pilotage-tableau td.sv-nombre{font-weight:700;color:var(--sv-encre)}
.sv .pilotage-tableau td.sv-faible{color:var(--sv-ambre)}
.sv-essai{display:grid;gap:8px;justify-items:start}
.sv-essai p{margin:0;font-size:14px;color:var(--sv-encre)}
.sv-essai p.sv-note{font-size:13px;color:var(--sv-doux)}
.sv-releve{margin:4px 0 0;font-size:12.5px;color:var(--sv-doux)}
@media(max-width:1100px){.sv-copies{grid-template-columns:1fr}}
@media(max-width:700px){.sv-alerte{padding:14px}.sv-frise{gap:10px}.sv-frise-ligne{grid-template-columns:minmax(0,1fr);gap:4px;min-width:0}.sv-frise-reperes .sv-frise-nom{display:none}.sv-frise-cases{gap:3px}.sv-case{height:22px}}
/* LA REPRISE HORS DU SERVEUR (2026-10-11, reprise/lots/sauvegardes-finitions-20261011) : de quand daterait la copie
   la plus recente ailleurs que sur le serveur. */
.sv-reprise{margin:0 0 14px;padding:10px 14px;border-radius:8px;background:#f6f9fa;font-size:14px;font-weight:600;color:var(--sv-encre)}

/* L ONGLET SECURITE, LU EN QUATRE GROUPES (2026-10-12, reprise/lots/securite-lisible-20261012) : le verdict, les chiffres
   en mots, les alertes en cartes, puis attaques, comptes, mots de passe refuses et robots. */
.sc{--sc-encre:#183b49;--sc-doux:#5f737d;--sc-trait:#dfe7eb;--sc-rouge:#b5473a;--sc-vert:#2f7d43;--sc-ambre:#8f5c10}
.sc-barre{display:flex;justify-content:flex-end;margin:-6px 0 14px}
.sc-periodes{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--sc-trait);border-radius:9px;background:#f6f9fa}
.sc-periodes a{padding:7px 12px;border-radius:7px;color:var(--sc-doux);font-size:13px;font-weight:600;line-height:1.2;text-decoration:none;white-space:nowrap}
.sc-periodes a:hover,.sc-periodes a:focus-visible{color:var(--sc-encre);background:#fff}
.sc-periodes a[aria-current]{background:var(--sc-encre);color:#fff}
.sc-verdict{display:flex;gap:14px;align-items:flex-start;margin:0 0 18px;padding:16px 18px;border:1px solid;border-left-width:4px;border-radius:10px}
.sc-verdict-icone{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;color:#fff;font-weight:700;font-size:15px}
.sc-verdict h2{margin:2px 0 6px;font-size:16px}
.sc-verdict p{margin:0;font-size:14px;line-height:1.55}
.sc-verdict-vert{border-color:#cfe5d5;border-left-color:var(--sc-vert);background:#eef7f0}
.sc-verdict-vert .sc-verdict-icone{background:var(--sc-vert)}
.sc-verdict-vert h2{color:#1f5a2f}.sc-verdict-vert p{color:#294a33}
.sc-verdict-orange{border-color:#efdcb8;border-left-color:#c58a1e;background:#fbf1df}
.sc-verdict-orange .sc-verdict-icone{background:#c58a1e}
.sc-verdict-orange h2,.sc-verdict-orange p{color:#6b4509}
.sc-verdict-rouge{border-color:#efc9c3;border-left-color:var(--sc-rouge);background:#fbecea}
.sc-verdict-rouge .sc-verdict-icone{background:var(--sc-rouge)}
.sc-verdict-rouge h2{color:#7d2a20}.sc-verdict-rouge p{color:#5c2a24}
.sc-chiffre-grave strong{color:var(--sc-rouge)!important}
.sc-chiffre-neutre strong{color:var(--sc-encre)!important}
.sc-alertes{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.sc-alerte{display:grid;grid-template-rows:auto 1fr auto;gap:8px;padding:14px 16px;border:1px solid var(--sc-trait);border-radius:10px;background:#fff}
.sc-alerte p{margin:0;font-size:14px;line-height:1.5;color:var(--sc-encre);overflow-wrap:anywhere}
.sc-alerte footer{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:12.5px;color:var(--sc-doux)}
.sc-alerte footer>span{min-width:0}
.sc-alerte-motif{justify-self:start;padding:3px 9px;border-radius:999px;background:#fbf1df;color:var(--sc-ambre);font-size:12px;font-weight:700}
.sc-alerte-motif.sc-grave{background:#fbecea;color:var(--sc-rouge)}
.sc-attente{color:var(--sc-rouge)}
.sc-vide{margin:0;color:var(--sc-doux)}
.sc-sources td{vertical-align:middle}
.sc-nom,.sc-source{display:block;font-weight:700;color:var(--sc-encre);font-variant-numeric:tabular-nums}
.sc-nom+small,.sc-source+small{display:block;font-size:12px;color:var(--sc-doux)}
.sc-etat{display:inline-block;margin-top:4px;padding:2px 8px;border-radius:999px;background:#eef1f3;color:#4c5d66;font-size:11.5px;font-weight:700}
.sc-puce{display:inline-flex;align-items:center;gap:5px;margin:2px 6px 2px 0;padding:3px 8px;border-radius:6px;background:#f2f5f6;font-size:12.5px;line-height:1.35;color:var(--sc-encre)}
.sc-puce b{font-weight:600;color:var(--sc-doux)}
.sc-puce-grave{background:#fbecea;color:var(--sc-rouge);font-weight:600}
.sc-puce-grave b{color:var(--sc-rouge)}
.sc-plus{font-size:12px;color:var(--sc-doux);white-space:nowrap}
.sc-quand{white-space:nowrap}
.sc-fin{text-align:right}
.sc-lien{font-size:13px;font-weight:600;white-space:nowrap}
.sc-sources th:last-child{position:relative}
.sc-cache{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sc-resume{margin:0 0 12px}
.sc-replie>summary{cursor:pointer;font-size:14px;font-weight:600;color:var(--sc-encre)}
.sc-replie[open]>summary{margin-bottom:12px}
.sc-note{margin:8px 0 0;font-size:12.5px;color:var(--sc-doux)}
@media(max-width:700px){
.sc-barre{justify-content:stretch;margin-top:0}
.sc-periodes{display:flex;width:100%;box-sizing:border-box}
.sc-periodes a{flex:1 1 0;text-align:center}
.sc-verdict{padding:14px}
.sc-alertes{grid-template-columns:minmax(0,1fr)}
.sc-fin{text-align:left}
}

/* FACTURER A SON ENTREPRISE, ET LES DEMANDES DES ETUDIANTS (2026-10-12, reprise/lots/demandes-entreprise-20261012) : la
   carte « Facturer à mon entreprise » des coordonnees, l extrait d une demande dans « À régulariser », et le bon chemin
   pour une autre question dans le dossier a completer. */
.mc .carte+.carte{margin-top:18px}
.mc-entreprise{scroll-margin-top:24px}
.mc-confirmation{margin:0 0 12px;padding:10px 14px;border-radius:8px;background:#e7f3ea;color:#2f7d43;font-weight:600}
.mc-actuelle{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 0 14px;padding:10px 14px;border:1px solid #dfe7eb;border-radius:8px;background:#f6f9fa;overflow-wrap:anywhere}
.mc-actuelle span:first-child{flex-basis:100%;font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#5f737d}
.mc-actuelle strong{color:#183b49}
.mc-actuelle span:last-child{font-size:13px;color:#5f737d;font-variant-numeric:tabular-nums}
.mc-case label{display:flex;align-items:flex-start;gap:8px;font-weight:600;color:#183b49}
.mc-case input{flex:none;margin-top:3px}
.mc-formulaire input[type=text],.mc-formulaire textarea{box-sizing:border-box;width:100%}
.rb-demande{display:block;margin-top:5px;font-size:12.5px;line-height:1.45;color:#33505c;overflow-wrap:anywhere}
.rb-demande small{display:block;margin-top:2px;font-size:11.5px;color:#6f7d84}
.regularisation-autre{font-size:14px;line-height:1.55;color:#33505c}
.regularisation-forme label>small{display:block;margin:2px 0 6px;font-size:12.5px;font-weight:400;color:#5f737d}

/* LES ENQUETES (2026-10-12, reprise/lots/enquetes-20261012) : la liste et les trois onglets de l administration, la page
   de reponse de l etudiant et la carte de son accueil (la premiere question, choix de Max). Teinte de la tuile : rose. */
.eq .eq-carte{background:#fff;border:1px solid #e2e7e9;border-radius:12px;padding:24px 26px;margin:0 0 18px}
.eq .eq-carte h2,.eq .eq-carte h3{margin:0 0 4px;font-size:20px;line-height:1.3;color:#183b49}
.eq .eq-carte h3 a{color:inherit;text-decoration:none}
.eq .eq-carte h3 a:hover{text-decoration:underline}
.eq-creer{margin:0}
.eq-site{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 12px}
.eq-site h2{margin:0;font-size:1.1rem;color:#173a49}
.signer-admin-site .eq-section-titre{margin:26px 0 10px;font-size:1rem}
.eq-site form{margin:0}
.eq-vide{margin:0;padding:18px 20px;border:1px dashed #cfdbe0;border-radius:12px;background:#fff;color:#5f737d}
.eq-ok{margin:0 0 16px;padding:12px 16px;border-radius:10px;background:#e7f3ea;color:#2f7d43;font-weight:600}
.eq-erreur{margin:0 0 16px;padding:12px 16px;border-radius:10px;background:#fdecea;color:#a3271b;font-weight:600}
.eq-aide{margin:0 0 18px}
.eq-etat{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:700;background:#e7f3ea;color:#2f7d43}
.eq-etat-programmee{background:#fff4d6;color:#5c4400}
.eq-etat-brouillon,.eq-etat-close{background:#eef2f4;color:#4b616b}
.eq-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:6px 0 0;color:#5f737d;font-size:14px}
.eq .rubrique-entete .eq-meta{margin-top:8px}
.eq-tete{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.eq .eq-filtres-ligne{margin-bottom:14px;align-items:center}
.eq .eq-filtres-ligne .eq-filtres{margin:0}
.eq-recherche{display:flex;gap:8px;align-items:center;margin:0}
.eq-recherche input[type=search]{box-sizing:border-box;width:240px;max-width:100%}
@media (max-width:700px){.eq-recherche{width:100%}.eq-recherche input[type=search]{flex:1;width:auto}}
.eq-taux{display:flex;align-items:baseline;gap:10px;margin:22px 0 8px;color:#183b49}
.eq-taux strong{font-size:34px;line-height:1;font-variant-numeric:tabular-nums}
.eq-taux span{color:#5f737d}
.eq .eq-carte>.eq-taux:first-child{margin-top:0}
.eq-barre{height:10px;border-radius:999px;background:#eef2f4;overflow:hidden}
.eq-barre i{display:block;height:100%;border-radius:999px;background:#c0457e}
.eq-blocs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px 18px;margin:20px 0 4px;padding:18px 0 0;border-top:1px solid #edf1f3}
.eq-bloc{font-size:13.5px;color:#33505c}
.eq-bloc b{display:flex;justify-content:space-between;gap:8px;margin-bottom:6px;font-weight:600;color:#183b49;font-variant-numeric:tabular-nums}
.eq-bloc b span{font-weight:500;color:#5f737d;white-space:nowrap}
.eq-bloc .eq-barre{height:6px}
.eq-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:22px 0 0}
.eq-actions .note{margin:0;color:#5f737d;font-size:13.5px}
.eq-section-titre{margin:30px 0 12px;font-size:18px;color:#183b49}
.eq-formulaire .eq-boutons{margin-top:18px}
.eq .eq-formulaire,.eq-suite{max-width:860px}
.eq-suite>.note{margin:0 0 12px}
.eq-creer button.bouton-ajout{display:inline-flex;align-items:center;justify-content:center;gap:.45em;box-sizing:border-box;min-height:42px;padding:9px 16px;border:0;border-radius:8px;background:var(--vert-belso);color:#fff;font:inherit;font-weight:650;cursor:pointer;box-shadow:none}
.eq-creer button.bouton-ajout::before{content:"+";font-size:1.25em;line-height:1}
.eq-creer button.bouton-ajout:hover{background:var(--vert-belso-fonce);color:#fff}
.eq-creer button.bouton-ajout:focus-visible{outline:3px solid var(--vert-belso-fonce);outline-offset:2px}
.eq-dates{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.eq-dates input{box-sizing:border-box;width:100%}
.eq-questions{list-style:none;margin:0;padding:0;border:1px solid #e2e7e9;border-radius:10px;background:#fff}
.eq-question{display:grid;grid-template-columns:28px 1fr auto;gap:4px 12px;align-items:start;padding:14px 16px;border-top:1px solid #edf1f3}
.eq-question:first-child{border-top:0}
.eq-numero{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#f3e3eb;color:#9e3265;font-weight:700;font-size:13px}
.eq-question p{margin:2px 0 0;color:#183b49;font-weight:600;line-height:1.4;overflow-wrap:anywhere}
.eq-question small{display:block;margin-top:4px;color:#5f737d;font-size:12.5px;overflow-wrap:anywhere}
.eq-question .eq-precision{margin-top:2px;font-size:13px;color:#33505c}
.eq-type{display:inline-block;margin-right:6px;padding:2px 8px;border-radius:6px;background:#eef2f4;color:#33505c;font-size:12px;font-weight:600}
.eq-gestes form{display:flex;gap:6px;align-items:center;margin:0}
.eq-gestes button,.eq-modifier>summary,.eq-lien{font:inherit;font-size:13px;color:#33505c;background:#fff;border:1px solid #dfe7eb;border-radius:8px;padding:4px 9px;cursor:pointer;text-decoration:none;min-height:0;box-shadow:none}
.eq-gestes button:disabled{opacity:.4;cursor:default}
.eq-modifier{margin-top:10px}
.eq-modifier>summary{display:inline-block;list-style:none}
.eq-modifier>summary::-webkit-details-marker{display:none}
.eq-modifier[open]>summary{background:#eef2f4}
.eq-question-formulaire{display:grid;gap:10px;margin-top:12px;padding:14px;border-radius:10px;background:#f6f9fa}
.eq-question-formulaire label{display:grid;gap:4px;margin:0;font-size:13.5px;color:#33505c}
.eq-question-formulaire input[type=text],.eq-question-formulaire select,.eq-question-formulaire textarea{box-sizing:border-box;width:100%}
.eq-question-formulaire .eq-case{display:flex;align-items:center;gap:8px}
.eq-question-formulaire button{justify-self:start}
.eq-ajouter{margin-top:12px}
.eq-ajouter>summary{display:inline-block;padding:9px 14px;border:1px dashed #b9c8cf;border-radius:10px;background:#fff;color:#183b49;font-weight:600;cursor:pointer;list-style:none}
.eq-ajouter>summary::-webkit-details-marker{display:none}
.eq-fin{margin:26px 0 8px;padding-top:20px;border-top:1px solid #e2e7e9}
.eq-fin .note{margin:10px 0 0;color:#5f737d;font-size:13.5px}
.eq-retrait{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 0}
.eq-lien-danger{font:inherit;font-size:14px;color:#a3271b;background:none;border:0;padding:0;text-decoration:underline;cursor:pointer;min-height:0;box-shadow:none}
.eq-boutons{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:22px}
.eq-filtres{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.eq-filtres a,.eq-filtres .eq-peu{padding:7px 13px;border:1px solid #dfe7eb;border-radius:999px;background:#fff;color:#33505c;text-decoration:none;font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums}
.eq-filtres a[aria-current]{background:#183b49;border-color:#183b49;color:#fff}
.eq-filtres .eq-peu{color:#9aa9b0;border-style:dashed;cursor:help}
.eq-moyenne{display:flex;align-items:baseline;gap:8px;margin:14px 0 16px;color:#5f737d}
.eq-moyenne strong{font-size:30px;color:#183b49;font-variant-numeric:tabular-nums}
.eq-repartition{display:grid;grid-template-columns:auto 1fr 52px;gap:8px 12px;align-items:center;font-size:13.5px;color:#33505c;font-variant-numeric:tabular-nums}
.eq-repartition-choix{margin-top:16px}
.eq-repartition .eq-barre{height:12px}
.eq-repartition em{font-style:normal;text-align:right;color:#5f737d}
.eq-libres-tout{margin-top:14px}
.eq-libres-tout>summary{cursor:pointer;font-weight:600;color:#183b49}
.eq-libres{list-style:none;margin:12px 0 0;padding:0}
.eq-libres li{margin:0 0 10px;padding:12px 14px;border-radius:10px;background:#f6f9fa;color:#183b49;line-height:1.5;overflow-wrap:anywhere}
.eq-libres li small{display:block;margin-top:4px;color:#7b8c93;font-size:12px}
.eq-attente p{margin:6px 0 0;color:#33505c}
.eq-anonyme,.eq-pour{display:flex;gap:12px;align-items:flex-start;margin:0 0 18px;padding:14px 16px;border-radius:10px;background:#f6f9fa;border:1px solid #e2e7e9;color:#33505c;line-height:1.5}
.eq-anonyme svg,.eq-pour svg{flex:none;margin-top:2px;color:#9e3265}
.eq-pour{background:#fbf2f6;border-color:#f0d3e1;color:#183b49;font-weight:600}
.eq-personnes{list-style:none;margin:0;padding:0;border:1px solid #e2e7e9;border-radius:10px;background:#fff}
.eq-personne{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.4fr) auto;gap:8px 16px;align-items:start;padding:12px 16px;border-top:1px solid #edf1f3}
.eq-personne:first-child{border-top:0}
.eq-personne.eq-vide{display:block;border:0;border-radius:0;background:none}
.eq-personne-nom strong{display:block;color:#183b49}
.eq-personne-nom span{font-size:13px;color:#5f737d}
.eq-personne-etat small{display:block;margin-top:4px;font-size:12.5px;color:#5f737d;overflow-wrap:anywhere}
.eq-personne-geste form{margin:0}
.eq-personne-geste .eq-modifier{margin-top:0}
.eq-personne-geste .eq-question-formulaire{min-width:260px}
.eq-apercu{margin:0 0 18px;padding:12px 16px;border-radius:10px;background:#fff4d6;color:#5c4400;font-weight:600}
.eq-merci-carte p{margin:0 0 16px;color:#33505c;line-height:1.55}
/* La page de reponse et son apercu : encadres et formulaire sur une meme colonne, bord a bord. */
.eq-repondre{box-sizing:border-box;max-width:760px}
.eval-espace.eq>.eq-anonyme,.eval-espace.eq>.eq-pour,.eval-espace.eq>.eq-erreur,.eval-espace.eq>.eq-apercu{box-sizing:border-box;max-width:760px}
.eq .eq-repondre fieldset.eq-q{margin:0;padding:22px 0;border:0;border-top:1px solid #edf1f3;border-radius:0;background:none;box-shadow:none;min-width:0}
.eq .eq-repondre fieldset.eq-q:first-of-type{border-top:0;padding-top:4px}
.eq-repondre legend{float:left;width:100%;margin:0 0 12px;padding:0;font-weight:700;color:#183b49;font-size:16.5px;line-height:1.4}
.eq-repondre legend span{display:block;margin-top:2px;font-weight:400;font-size:13.5px;color:#5f737d}
.eq-q-message{clear:both;margin:0 0 10px;color:#a3271b;font-weight:600;font-size:14px}
.eq-q-erreur .eq-echelle span,.eq-q-erreur .eq-choix label,.eq-q-erreur textarea{border-color:#d9776b}
.eq-echelle{clear:both;display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.eq-echelle label{position:relative;margin:0}
.eq-echelle input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.eq-echelle span{display:grid;place-items:center;height:48px;border:1px solid #cfdbe0;border-radius:10px;background:#fff;color:#183b49;font-weight:700;font-size:17px;cursor:pointer}
.eq-echelle input:checked+span{background:#183b49;border-color:#183b49;color:#fff}
.eq-echelle input:focus-visible+span{outline:3px solid #c0457e;outline-offset:2px}
.eq-bornes{clear:both;display:flex;justify-content:space-between;margin:8px 0 0;font-size:12.5px;color:#5f737d}
.eq-choix{clear:both;display:grid;gap:8px}
.eq-choix label{display:flex;align-items:center;gap:10px;margin:0;padding:12px 14px;border:1px solid #cfdbe0;border-radius:10px;font-weight:500;color:#183b49;background:#fff;cursor:pointer}
.eq-repondre textarea{clear:both;display:block;box-sizing:border-box;width:100%;min-height:108px}
.eq-envoi{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;padding-top:22px;border-top:1px solid #edf1f3}
.eq-envoi p{margin:0;color:#5f737d;font-size:13.5px}
.eq-merci{display:flex;gap:12px;align-items:center;margin:0 0 16px;padding:14px 18px;border-radius:10px;background:#e7f3ea;color:#2f7d43;font-weight:600}
.res-page .eq-merci{margin:20px 0 6px}
.eq-v{margin:0 0 16px;border-radius:12px;background:#fff;border:1px solid #e2e7e9;overflow:hidden}
.eq-v .eq-v-bande{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 12px;margin:0;padding:10px 18px;background:#c0457e;color:#fff;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.eq-v .eq-v-bande span:last-child{font-variant-numeric:tabular-nums;letter-spacing:0;opacity:.85}
.eq-v-corps{padding:18px 18px 16px}
.eq-v h2{margin:0 0 14px;font-size:19px;line-height:1.3;color:#183b49}
.eq-v .bouton{width:100%;box-sizing:border-box;text-align:center}
.eq-v-echelle{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.eq-v-echelle a{display:grid;place-items:center;height:46px;border:1px solid #cfdbe0;border-radius:10px;color:#183b49;font-weight:700;font-size:17px;text-decoration:none;background:#fff}
.eq-v-echelle a:hover,.eq-v-echelle a:focus-visible{border-color:#c0457e;background:#fbf2f6;color:#9e3265}
.eq-v .eq-v-bornes{display:flex;justify-content:space-between;margin:7px 0 0;font-size:12px;color:#5f737d}
.eq-v .eq-v-pied{display:flex;gap:8px;align-items:flex-start;margin:14px 0 0;padding-top:12px;border-top:1px solid #edf1f3;font-size:12.5px;line-height:1.45;color:#5f737d}
.eq-v-pied svg{flex:none;margin-top:1px;color:#9e3265}
@media (max-width:700px){
 .eq .eq-carte{padding:18px}
 .eq-dates{grid-template-columns:1fr}
 .eq-question{grid-template-columns:26px 1fr}
 .eq-gestes{grid-column:2}
 .eq-personne{grid-template-columns:1fr}
 .eq-personne-geste .eq-question-formulaire{min-width:0}
 .eq-echelle span{height:44px}
 .eq-repartition{grid-template-columns:auto 1fr 44px}
}

/* LES RAPPELS DE TETE DE PAGE ALIGNES (2026-10-12, reprise/lots/rappels-alignes-20261012). Le bandeau « Ton dossier
   demande une action », le rappel des pieces et la notification de Stage, Dispensarium et Memoire sont poses par la
   base, HORS du <main> qui porte la goutiere : ils collaient au bord (notification sans cadre, bandeau bord a bord) ou
   tombaient a 24 px quand le contenu est a 29. Ils prennent desormais la gouttiere du contenu (--page-cote), a toutes
   les largeurs, et la notification devient une carte comme le rappel des pieces, a la teinte de sa rubrique. */
body.interface .zone-contenu>.regularisation-bandeau{margin:16px var(--page-cote) 0}
body.interface .zone-contenu>.rappel-pieces{margin:16px var(--page-cote) 0}
.stage-alertes{margin:12px var(--page-cote) 0;padding:12px 18px 13px;border:1px solid #dcdaf3;border-left:4px solid #625dc0;border-radius:12px;background:#f3f2fc;color:#263930}
body.interface .zone-contenu>.regularisation-bandeau+.stage-alertes,body.interface .zone-contenu>.rappel-pieces+.stage-alertes{margin-top:10px}
body.interface .zone-contenu>.reperes-page+.stage-alertes{margin-top:16px}
.stage-alertes strong{display:block;margin:0 0 4px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#4843a8}
.stage-alertes p{margin:4px 0 0;font-size:14.5px;line-height:1.45;overflow-wrap:anywhere}
.stage-alertes a{color:#183b49;font-weight:600}
.stage-alertes a:hover{color:#4843a8}

/* ACCEPTER ET FACTURER, LE CAS COURANT PLUS LISIBLE (2026-10-14, lot accepter-facturer) : le tarif en cartes, la facture
   presentee comme une facture, la confirmation a droite et toujours visible. */
.acc2-grille{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start;margin-top:22px}
.acc2-principal>section+section{margin-top:20px}
.acc2-cote{position:sticky;top:18px}
.acc2-etape{display:flex;align-items:center;gap:10px;margin:0 0 4px;font-size:17px}
.acc2-etape>span{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;font-size:13px;flex:none}
.acc2-aide{margin:0 0 16px 36px;color:var(--encre-douce);font-size:13px}
.acc2-aide a{color:var(--accent)}
.acc2-profil{margin:14px 0 8px;font-size:12px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--encre-douce)}
.acc2-tarifs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.acc2-tarif{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border:1px solid var(--trait);border-radius:10px;background:var(--carte);color:var(--encre);text-decoration:none;transition:border-color .15s,background .15s}
.acc2-tarif:hover{border-color:var(--accent)}
.acc2-tarif:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.acc2-tarif strong{font-size:18px;white-space:nowrap}
.acc2-tarif small{display:block;margin-top:2px;color:var(--encre-douce);font-size:12px}
.acc2-tarif[aria-current="true"]{border:2px solid var(--accent);padding:13px 15px;background:var(--accent-clair)}
.acc2-choisi{display:inline-block;margin-top:6px;padding:2px 9px;border-radius:999px;background:var(--accent);color:#fff;font-size:11px;font-weight:650}
.acc2-facture{padding:0;overflow:hidden}
.acc2-entete{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px 12px;padding:16px 20px;background:var(--accent-clair);border-bottom:1px solid var(--trait);font-size:13px;color:var(--encre-douce)}
.acc2-entete .acc2-etape{margin:0}
.acc2-corps{padding:20px}
.acc2-parties{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-bottom:18px}
.acc2-parties h3,.acc2-sous{margin:0 0 6px;font-size:12px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--encre-douce)}
.acc2-parties p{margin:2px 0;font-size:14px}
.acc2-lignes tfoot td{font-weight:700;font-size:15px;border-top:2px solid var(--trait)}
.acc2-tva{margin:8px 0 20px;font-size:12px;color:var(--encre-douce)}
.acc2-echeances{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:8px 0 6px;padding:0;list-style:none}
.acc2-echeances li{padding:12px 14px;border:1px solid var(--trait);border-radius:10px;background:var(--fond)}
.acc2-echeances small{display:block;color:var(--encre-douce);font-size:12px}
.acc2-echeances b{display:block;margin:2px 0;font-size:15px}
.acc2-echeances span{font-size:14px}
.acc2-total{margin:0;font-size:12px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--encre-douce)}
.acc2-montant{margin:4px 0 2px;font-size:32px;font-weight:750;color:var(--encre);line-height:1.1}
.acc2-detail{margin:0 0 12px;color:var(--encre-douce);font-size:14px}
.acc2-pastille{display:inline-block;padding:4px 10px;border-radius:999px;background:var(--accent-clair);color:var(--accent);font-size:12px;font-weight:650}
.acc2-suite{margin:18px 0 12px;padding:0;list-style:none;counter-reset:suite}
.acc2-suite li{position:relative;padding:0 0 12px 30px;font-size:13.5px;line-height:1.45;counter-increment:suite}
.acc2-suite li::before{content:counter(suite);position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--accent);color:var(--accent);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.acc2-rassure{margin:0 0 14px;padding:10px 12px;border-radius:8px;background:var(--fond);font-size:12.5px;color:var(--encre-douce)}
.acc2-confirmer button{width:100%;padding:13px 16px;font-size:15px}
.acc2-courriel{margin-top:10px;font-size:13px}
.acc2-courriel summary{cursor:pointer;color:var(--accent)}
.acc2-autres{margin-top:16px;padding-top:14px;border-top:1px solid var(--trait)}
.acc2-autres>p{margin:0 0 4px;font-size:12px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--encre-douce)}
.acc2-autres form{margin:0}
.acc2-autres a,.acc2-autres button{display:block;width:100%;margin:0;padding:10px 0;border:0;border-bottom:1px solid var(--trait);border-radius:0;background:none;color:var(--encre);font:inherit;font-size:14px;text-align:left;text-decoration:none;cursor:pointer}
.acc2-autres>a:last-child{border-bottom:0}
.acc2-autres small{display:block;margin-top:2px;color:var(--encre-douce);font-size:12px;font-weight:400}
.acc2-autres a:hover>span,.acc2-autres button:hover>span{text-decoration:underline}
@media (max-width:1100px){.acc2-grille{grid-template-columns:minmax(0,1fr)}.acc2-cote{position:static}}
@media (max-width:640px){.acc2-tarifs,.acc2-parties{grid-template-columns:minmax(0,1fr)}.acc2-montant{font-size:28px}}