/* Espace enseignant (M4bis, habillage refait le 15/09/2026 d'après les maquettes validées) : par-dessus site.css,
   la même identité que le site. Trois pièces nouvelles : le MENU (colonne à gauche dès 900 px, trois onglets collés
   en haut en dessous), les CARTES DE PARTIE (chaque classe a sa couleur, bandeau nom + code) et l'écran
   « Mon établissement » (carte, lien d'invitation, invitation par liste, les professeurs). */

/* ---------------------------------------------------------------- la page et sa mise en colonnes */
.teach .wrap { width: min(1280px, 100% - 2rem); }
.teach-shell { display: flex; align-items: flex-start; gap: 1.4rem; }
.teach-main { flex: 1; min-width: 0; max-width: 880px; padding: 1.7rem 0 3rem; }
/* sans le menu (connexion, nom, choix de l'établissement) : une colonne de lecture, centrée */
.teach-nav[hidden] + .teach-main { max-width: 760px; margin-inline: auto; }
.teach-foot { max-width: 880px; padding: 0 1rem 2rem; font-size: .85rem; }
.teach-tag { margin: 0; }
.teach h1 { font-size: 2.1rem; margin: 0 0 .3em; }
.teach h2 { font-size: 1.25rem; margin: 1.3em 0 .4em; }
.teach .muted { color: #6c6a62; font-size: .92rem; }
.teach .step { font-family: var(--sans); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ocre-dark); font-weight: 700; }

/* le menu : colonne à gauche dès 900 px, l'établissement rappelé dessous */
.teach-nav { flex: none; width: 236px; padding: 1.8rem .6rem 0 0; }
.teach-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.teach-nav .navit { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 44px; padding: .65rem .75rem; border: 0; border-radius: 12px; background: transparent; color: var(--ink-2); font: inherit; font-size: .95rem; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; }
.teach-nav .navit:hover { background: rgba(90, 70, 30, .07); color: var(--ink); }
.teach-nav .navit svg { flex: none; }
.teach-nav .navit.on { background: var(--paper-2); color: var(--ink); font-weight: 700; box-shadow: 0 1px 0 rgba(90, 70, 30, .18), 0 4px 12px rgba(90, 70, 30, .12); }
.teach-nav .navit.on svg { stroke: var(--moss-dark); }
.teach-nav .navit .nshort { display: none; }
.teach-nav .navwhere { margin-top: 1.3rem; padding: 0 .75rem; font-size: .82rem; color: #6c6a62; line-height: 1.5; }

/* le bandeau de la mauvaise session, au-dessus de tous les écrans */
.teach-warn { background: var(--ocre-light); border-bottom: 2px solid var(--ocre); }
.teach-warn .inw { display: flex; gap: .9rem; align-items: center; flex-wrap: wrap; padding: .8rem 0; }
.teach-warn p { margin: 0; flex: 1; min-width: 240px; font-size: .92rem; color: #5a3b0a; line-height: 1.5; }
.teach-warn button { min-height: 44px; }

@media (max-width: 899px) {
  .teach .topbar { position: static; }
  .teach-shell { display: block; }
  .teach-main { max-width: none; padding-top: 1.2rem; }
  .teach-nav { position: sticky; top: 0; z-index: 40; width: auto; margin: 0 -1rem; padding: .5rem .7rem; background: var(--paper); border-bottom: 1px solid rgba(90, 70, 30, .12); }
  .teach-nav ul { flex-direction: row; gap: .25rem; }
  .teach-nav li { flex: 1; min-width: 0; }
  .teach-nav .navit { justify-content: center; gap: .35rem; padding: .5rem .3rem; border-radius: 10px; font-size: .82rem; text-align: center; }
  .teach-nav .navit .nlong { display: none; }
  .teach-nav .navit .nshort { display: inline; }
  .teach-nav .navwhere { display: none; }
}
/* la barre du haut sur téléphone : l'essentiel (la marque, la langue, la sortie), comme la maquette */
@media (max-width: 700px) { .teach .nav-me { display: none; } }
@media (max-width: 560px) { .teach .brand-name { display: none; } .teach .topbar-in { gap: .5rem; } }

/* ---------------------------------------------------------------- les formulaires et les blocs communs */
.teach label.f { display: block; font-size: .85rem; font-weight: 700; margin: 1rem 0 .35rem; }
/* Les champs ne s'étirent pas sur toute la largeur de l'écran large : une ligne de saisie reste lisible. */
.teach input, .teach select, .teach textarea { width: 100%; max-width: 34rem; font: inherit; padding: .7rem .8rem; border: 2px solid #cfc6b0; border-radius: 10px; background: #fff; color: var(--ink); }
.teach input:focus, .teach select:focus, .teach textarea:focus { border-color: var(--moss-dark); outline: none; }
.teach .row { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.1rem; align-items: center; }
.teach .btn { min-height: 44px; }
.teach .btn-link { background: transparent; box-shadow: none; color: var(--sky-dark); text-decoration: underline; padding: .5rem 0; border: 0; font: inherit; cursor: pointer; }
.teach .btn-danger { background: #fff; color: var(--clay); box-shadow: none; border: 2px solid var(--clay); }
.teach .btn[disabled] { opacity: .55; cursor: wait; transform: none; }
.teach .note { background: var(--sky-light); border-left: 4px solid var(--sky-dark); padding: .7rem .9rem; border-radius: 8px; font-size: .92rem; margin: .9rem 0; }
.teach .warn { background: var(--ocre-light); border-left: 4px solid var(--ocre); padding: .7rem .9rem; border-radius: 8px; font-size: .92rem; margin: .9rem 0; }
.teach .err { background: #f4d9d2; border-left: 4px solid var(--clay); padding: .7rem .9rem; border-radius: 8px; font-size: .92rem; margin: .9rem 0; }
.teach .good { background: var(--moss-light); border-left: 4px solid var(--moss-dark); padding: .7rem .9rem; border-radius: 8px; font-size: .92rem; margin: .9rem 0; color: var(--moss-dark); }
/* (03/11/2026) L'écran « lien parti » : une grande carte verte avec l'enveloppe, impossible à confondre avec le formulaire de connexion */
.teach .sent { display: flex; gap: 1rem; align-items: flex-start; background: var(--moss-light); border: 2px solid var(--moss-dark); border-radius: 14px; padding: 1.1rem 1.2rem; margin: 1rem 0; }
.teach .sent-ico { flex: 0 0 auto; width: 3rem; height: 3rem; border-radius: 50%; background: var(--moss-dark); color: #fff; display: grid; place-items: center; font-size: 1.5rem; }
.teach .sent p { margin: .35rem 0; }
.teach .sent .sent-h { font-size: 1.15rem; font-weight: 700; color: var(--moss-dark); margin-top: .1rem; }
@media (max-width: 480px) { .teach .sent { flex-direction: column; gap: .6rem; } }
.teach .list { margin: .6rem 0; border: 2px solid #cfc6b0; border-radius: 12px; background: #fff; overflow: hidden; }
.teach .it { width: 100%; text-align: left; padding: .65rem .8rem; border: 0; border-top: 1px solid #eee4cf; background: #fff; display: flex; gap: .6rem; align-items: center; cursor: pointer; font: inherit; color: var(--ink); }
.teach .it:first-child { border-top: 0; }
.teach .it[aria-pressed="true"] { background: var(--moss-light); }
.teach .it .n { font-weight: 700; }
.teach .it .c { color: #6c6a62; font-size: .85rem; }
.teach .pill { margin-left: auto; font-size: .75rem; font-weight: 700; padding: .15rem .55rem; border-radius: 99px; white-space: nowrap; }
.teach .pub { background: var(--moss-light); color: var(--moss-dark); }
.teach .prv { background: var(--ocre-light); color: var(--ocre-dark); }
.teach .choices { display: flex; gap: .6rem; margin: .5rem 0; flex-wrap: wrap; }
.teach .choices label { flex: 1; min-width: 140px; border: 2px solid #cfc6b0; border-radius: 12px; padding: .7rem .8rem; background: #fff; font-weight: 700; cursor: pointer; }
.teach .choices label:has(input:checked) { border-color: var(--moss-dark); background: var(--moss-light); }
.teach .choices input { width: auto; margin-right: .4rem; }
.teach .choices small { display: block; font-weight: 400; color: #6c6a62; font-size: .8rem; }
.teach .card { background: #fff; border-radius: 14px; padding: .9rem 1rem; box-shadow: var(--shadow); margin: .7rem 0; display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.teach .card .n { font-weight: 700; font-size: 1.05rem; }
.teach .card .c { color: #6c6a62; font-size: .88rem; }
.teach .card .r { margin-left: auto; }
.teach .code { font-family: var(--serif); font-size: 3.6rem; letter-spacing: .25em; text-align: center; padding: 1rem .8rem .8rem; background: #fff; border-radius: 14px; border: 3px dashed var(--ocre); margin: .6rem 0; }
.teach .prog { height: 10px; background: #eee4cf; border-radius: 99px; overflow: hidden; margin: .4rem 0; }
.teach .prog i { display: block; height: 100%; background: var(--moss); }
.teach table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; font-size: .92rem; }
.teach th, .teach td { padding: .55rem .6rem; text-align: left; border-top: 1px solid #eee4cf; }
.teach th { background: var(--ocre-light); color: var(--ocre-dark); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.teach .table-wrap { overflow-x: auto; }
.teach .table-wrap table { min-width: 34rem; }   /* un tableau ne déborde pas : il défile dans sa boîte */
.teach .ok { color: var(--moss-dark); font-weight: 700; }
.teach .wait { color: var(--ocre-dark); font-weight: 700; }
.teach .late { color: var(--clay); font-weight: 700; }
.teach td small.late { display: block; font-size: .8em; margin-top: .15rem; }   /* (06/10/2026) les mois manqués, sous l'état du mois, seulement s'il y en a */
.teach .mask { font-family: monospace; letter-spacing: .15em; background: #eee4cf; padding: .1rem .4rem; border-radius: 6px; }
.teach .spin { display: inline-block; width: 1em; height: 1em; border: 3px solid #cfc6b0; border-top-color: var(--moss-dark); border-radius: 50%; animation: teachspin .8s linear infinite; vertical-align: -.15em; margin-right: .4rem; }
@keyframes teachspin { to { transform: rotate(360deg); } }
.teach .card > div { min-width: 0; flex: 1; }
.teach .card label.c { display: block; margin-top: .3rem; }
.teach .card label.c input { width: auto; margin-right: .4rem; }
.teach .box { background: #fff; border: 2px solid #cfc6b0; border-radius: 14px; padding: 1rem 1.2rem 1.2rem; margin: 1.2rem 0; box-shadow: var(--shadow); }
.teach .box h2 { margin-top: .2em; }
.teach .nav-me { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; color: var(--ink); font-size: .85rem; margin-right: .6rem; max-width: 26ch; }
.teach .nav-me b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.teach .nav-me small { font-size: .72rem; color: #6c6a62; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }   /* (15/09) l'adresse de connexion, en petit sous le nom */
.teach .list.picked .it:not([aria-pressed="true"]) { display: none; }

/* ---------------------------------------------------------------- le tableau de bord : une carte par partie */
.teach .headline { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.teach .headline p { margin: .3rem 0 0; color: var(--ink-2); font-size: .95rem; }
.teach .parties { display: flex; flex-direction: column; gap: 1rem; }
.teach .pcard { display: flex; flex-direction: column; background: #fff; border-radius: var(--radius-cut); box-shadow: var(--shadow); overflow: hidden; }
.teach .pband { background: var(--band, var(--sky)); color: var(--band-ink, var(--ink)); padding: .75rem 1rem; display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.teach .pband .pname { margin: 0; font-family: var(--serif); font-size: 1.35rem; font-weight: 700; line-height: 1.15; color: inherit; min-width: 0; overflow-wrap: anywhere; }
.teach .pband .pcode { font-family: monospace; font-size: 1.05rem; font-weight: 700; letter-spacing: .16em; white-space: nowrap; }
.teach .pbody { flex: 1; min-width: 0; padding: .9rem 1rem 1rem; display: flex; flex-direction: column; gap: .6rem; }
.teach .plevel { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ocre-dark); font-weight: 700; }
.teach .plevel span { font-weight: 400; text-transform: none; letter-spacing: 0; color: #6c6a62; }
.teach .pprog { display: flex; align-items: center; gap: .7rem; }
.teach .pprog .prog { flex: 1; margin: 0; }
.teach .pprog .pturn { font-size: .85rem; white-space: nowrap; }
.teach .pstats { font-size: .88rem; color: var(--ink-2); line-height: 1.5; }
.teach .pstats b { color: var(--ink); }
.teach .pstats b.g { color: var(--moss-dark); }
.teach .pdel { margin: 0; font-size: .8rem; line-height: 1.45; color: #6c6a62; }   /* (15/10/2026) la date d'effacement de la classe */
.teach .pacts { display: flex; flex-direction: column; gap: .5rem; margin-top: .1rem; }
.teach .pwait { background: var(--moss-light); border-radius: 10px; padding: .7rem .8rem; display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; }
.teach .pwait svg { flex: none; }
.teach .pwait p { margin: 0; flex: 1; min-width: 190px; font-size: .88rem; color: var(--moss-dark); line-height: 1.45; }
.teach .pb { font: inherit; font-weight: 700; font-size: .88rem; min-height: 44px; padding: .6rem .9rem; border: 2px solid transparent; border-radius: 10px; cursor: pointer; text-align: center; }
.teach .pb-moss { background: var(--moss); color: #fff; }
.teach .pb-ink { background: var(--ink); color: #fff; }
.teach .pb-line { background: #fff; border-color: #cfc6b0; color: var(--ink); }
.teach .pb-soft { background: #fff; border-color: #cfc6b0; color: var(--ink-2); font-weight: 600; }
.teach .pcard.done { background: var(--paper-2); box-shadow: 0 1px 0 rgba(90, 70, 30, .12); opacity: .82; }
.teach .pcard.done .pband { background: var(--paper-3); color: var(--ink-2); }
.teach .invite { background: #fff; border: 2px dashed var(--ocre); border-radius: 12px; padding: .9rem 1.1rem; margin-top: 1.4rem; display: flex; gap: 1.1rem; align-items: center; flex-wrap: wrap; }
.teach .invite div { flex: 1; min-width: 240px; }
.teach .invite .acts { display: flex; gap: .5rem; flex-wrap: wrap; }
.teach .invite .acts .copy { flex: 1; }
.teach .invite .t { font-weight: 700; font-size: .95rem; }
.teach .invite .s { font-size: .85rem; color: var(--ink-2); margin-top: .2rem; line-height: 1.45; }
.teach .copy { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font: inherit; font-weight: 700; font-size: .88rem; min-height: 44px; padding: .6rem 1rem; border: 0; border-radius: 10px; background: var(--paper-2); color: var(--ink); box-shadow: 0 1px 0 rgba(90, 70, 30, .18), 0 4px 12px rgba(90, 70, 30, .14); cursor: pointer; }
.teach .copy.moss { background: var(--moss); color: #fff; box-shadow: none; }

@media (min-width: 640px) {
  .teach .pcard { flex-direction: row; }
  .teach .pband { width: 190px; flex: none; flex-direction: column; justify-content: center; align-items: flex-start; gap: .35rem; padding: 1rem 1.1rem; }
  .teach .pband .pname { font-size: 1.45rem; }
  .teach .pbody { padding: 1.1rem 1.3rem; }
  .teach .pacts { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .teach .pwait { width: 100%; }
  .teach .pcard.done .pbody { justify-content: center; }
}

/* ---------------------------------------------------------------- mon établissement */
.teach .scard { display: flex; flex-direction: column; background: #fff; border-radius: var(--radius-cut); box-shadow: var(--shadow); overflow: hidden; margin-bottom: 1.3rem; }
.teach .scard .sart { background: var(--moss); color: var(--paper-2); display: flex; align-items: center; gap: .7rem; padding: .9rem 1rem; }
.teach .scard .sart .eyebrow { margin: 0; color: var(--paper-2); font-size: .7rem; }
.teach .scard .sbody { padding: .9rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: .4rem; }
.teach .scard h1 { font-size: 1.7rem; margin: 0; }
.teach .scard .sline { font-size: .88rem; color: var(--ink-2); line-height: 1.5; }
.teach .tags { display: flex; gap: .45rem; flex-wrap: wrap; margin-top: .3rem; }
.teach .tag { font-size: .75rem; font-weight: 700; padding: .2rem .6rem; border-radius: 999px; background: var(--paper-3); color: var(--ink-2); }
.teach .tag-ocre { background: var(--ocre-light); color: var(--ocre-dark); }
.teach .tag-moss { background: var(--moss-light); color: var(--moss-dark); }
.teach .tag-sky { background: var(--sky, #dbe9f4); color: #2a4a63; }
.teach .panels { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
.teach .panel { background: #fff; border-radius: var(--radius-cut); box-shadow: var(--shadow); padding: 1rem 1.2rem 1.2rem; display: flex; flex-direction: column; gap: .7rem; }
.teach .panel h2 { margin: 0; font-size: 1.15rem; }
.teach .panel p { margin: 0; font-size: .88rem; color: var(--ink-2); line-height: 1.55; }
.teach .panel p.fine { font-size: .82rem; color: #6c6a62; }
.teach .linkbox { display: flex; gap: .5rem; flex-wrap: wrap; }
.teach .linkbox .u { flex: 1; min-width: 180px; font-family: monospace; font-size: .8rem; padding: .65rem .8rem; background: var(--paper); border: 2px solid #cfc6b0; border-radius: 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.teach .panel textarea { min-height: 7rem; font-family: monospace; font-size: .85rem; line-height: 1.6; resize: vertical; }
.teach .sendrow { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.teach .sendrow .cnt { font-size: .82rem; color: #6c6a62; }
.teach .people { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 2rem; margin-top: .3rem; }
.teach .who { display: flex; align-items: center; gap: .8rem; padding: .65rem 0; border-top: 1px solid #eee4cf; }
.teach .who .ini { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 700; background: var(--paper-3); color: var(--ink-2); }
.teach .who .ini.a { background: var(--ocre-light); color: var(--ocre-dark); }
.teach .who .ini.b { background: var(--moss-light); color: var(--moss-dark); }
.teach .who .ini.c { background: var(--sky-light); color: var(--sky-dark); }
.teach .cnt { font-size: .82rem; color: #6c6a62; }
.teach .who .nm { font-weight: 700; font-size: .95rem; overflow-wrap: anywhere; }
.teach .who .nm span { font-weight: 400; color: #6c6a62; }
.teach .who .rl { font-size: .82rem; color: #6c6a62; }
.teach .panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; flex-wrap: wrap; }

@media (min-width: 760px) {
  .teach .scard { flex-direction: row; }
  .teach .scard .sart { width: 190px; flex: none; justify-content: center; }
  .teach .scard .sart .eyebrow { display: none; }
  .teach .scard .sbody { padding: 1.2rem 1.4rem; }
  .teach .scard h1 { font-size: 1.9rem; }
  .teach .panels.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .teach .people.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- le tableau des parcours (créer une partie) */
.teach table.lv { margin: .5rem 0; border: 2px solid #cfc6b0; }
.teach table.lv th, .teach table.lv td { padding: .5rem .6rem; text-align: left; border-bottom: 1px solid #ece6d6; vertical-align: middle; }
.teach table.lv th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: #6c6a62; background: #f7f3e8; }
.teach table.lv tr { cursor: pointer; }
.teach table.lv tr:has(input:checked) { background: var(--moss-light); }
.teach table.lv td:first-child { width: 1.6rem; padding-right: 0; }
.teach table.lv input { width: auto; margin: 0; }
.teach table.lv label { cursor: pointer; }
/* Les thèmes du parcours choisi, dépliés sous sa ligne (13/09) */
.teach table.lv tr.lv-sum { cursor: default; background: var(--moss-light); }
.teach table.lv tr.lv-sum[hidden] { display: none; }
.teach table.lv tr.lv-sum td { padding-top: 0; font-size: .88rem; line-height: 1.45; color: #3b4a2f; }

.teach .choices .sm { font-weight: 400; color: #6c6a62; font-size: .8rem; }

/* Lancement des tours en cascade (création de partie) : chaque niveau de choix est décalé sous son parent, avec un trait ;
   le seuil se choisit en pastilles dans la phrase de la carte Souple ; sur téléphone, les cartes s'empilent. */
.teach .casc .lvl { margin-left: 1.1rem; border-left: 3px solid var(--moss-light); padding-left: .8rem; margin-top: .6rem; }
.teach .casc .lvl[hidden] { display: none; }
.teach .casc .choices { margin: .4rem 0; }
.teach .casc .lbl { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: #6c6a62; margin: .2rem 0; font-weight: 700; }
.teach .pills { display: inline-flex; flex-wrap: wrap; gap: .3rem; vertical-align: middle; margin: 0 .15rem; }
.teach .pill.thr { margin-left: 0; border: 1.5px solid var(--moss-dark); border-radius: 999px; padding: .05rem .5rem; background: #fff; font-size: .8rem; font-weight: 700; color: var(--moss-dark); cursor: pointer; line-height: 1.4; }
.teach .pill.thr.on { background: var(--moss-dark); color: #fff; }
@media (max-width: 560px) { .teach .casc .lvl { margin-left: .5rem; padding-left: .6rem; } }
@media (max-width: 480px) { .teach .choices { flex-direction: column; } .teach .choices label { min-width: 0; } }
/* En résumé : le lancement choisi, en clair. Titre au style des sections, bandeau vert clair sans bordure, puce ronde. */
.teach .recap { display: flex; gap: .7rem; align-items: flex-start; background: var(--moss-light); border-radius: 12px; padding: .8rem 1rem; margin: 0 0 .4rem; font-size: .95rem; line-height: 1.55; }
.teach .recap b { color: var(--moss-dark); }
.teach .recap-i { flex: none; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--moss-dark); color: #fff; font-size: .8rem; font-weight: 800; display: grid; place-items: center; margin-top: .15rem; }
/* L'heure du tour quotidien, dans la phrase de la carte « 1 tour chaque jour ». */
.teach .otime { display: inline-block; width: auto; padding: .05rem .35rem; margin: 0 .1rem; font: inherit; font-size: .85rem; font-weight: 700; color: var(--moss-dark); border: 1.5px solid var(--moss-dark); border-radius: 8px; background: #fff; }

input.short { width: 7rem; }
.teach input.mid { width: 100%; max-width: 20rem; }

/* ---------------------------------------------------------------- l'administration (superadmin, refondue le 15/09/2026)
   Le tableau de bord en cartes de chiffres, les onglets, les listes et le mode des paiements. Tout réemploie les pièces
   du reste de l'espace (panel, card, tags, table-wrap, pill) : il n'y a ici que ce qui n'existait pas. */
/* l'écran d'administration est le seul écran DENSE de l'espace : il prend toute la largeur de la page (ses tableaux ont
   neuf colonnes), là où les écrans des professeurs gardent une colonne de lecture. */
.teach-main:has(#apane) { max-width: none; }
.teach .headline.admin-head > div { flex: 1; min-width: 260px; }
.teach .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .8rem; margin: 1.2rem 0 .4rem; }
.teach .kpi { display: flex; flex-direction: column; gap: .15rem; text-align: left; font: inherit; background: #fff; border: 0; border-left: 5px solid var(--paper-3); border-radius: 12px; padding: .8rem .9rem; box-shadow: var(--shadow); cursor: pointer; min-width: 0; }
.teach .kpi:hover { box-shadow: var(--shadow-lg); }
.teach .kpi .kv { font-family: var(--serif); font-size: 2rem; font-weight: 700; line-height: 1.05; }
.teach .kpi .kl { font-size: .86rem; font-weight: 700; line-height: 1.35; }
.teach .kpi .ks { font-size: .78rem; color: #6c6a62; line-height: 1.35; }
.teach .kpi.k-ocre { border-left-color: var(--ocre); } .teach .kpi.k-ocre .kv { color: var(--ocre-dark); }
.teach .kpi.k-moss { border-left-color: var(--moss); } .teach .kpi.k-moss .kv { color: var(--moss-dark); }
.teach .kpi.k-sky { border-left-color: var(--sky); } .teach .kpi.k-sky .kv { color: var(--sky-dark); }
.teach .kpi.k-clay { border-left-color: var(--clay); } .teach .kpi.k-clay .kv { color: var(--clay); }

/* les onglets : des intercalaires de cahier, collés sur un trait */
.teach .atabs { display: flex; flex-wrap: wrap; gap: .3rem; margin: 1.3rem 0 1.1rem; border-bottom: 2px solid var(--paper-3); }
.teach .atab { font: inherit; font-size: .92rem; font-weight: 700; min-height: 44px; padding: .5rem .85rem; margin-bottom: -2px; border: 0; border-bottom: 3px solid transparent; border-radius: 10px 10px 0 0; background: transparent; color: var(--ink-2); cursor: pointer; }
.teach .atab:hover { background: rgba(90, 70, 30, .07); color: var(--ink); }
.teach .atab.on { background: #fff; color: var(--ink); border-bottom-color: var(--moss); box-shadow: 0 -1px 0 rgba(90, 70, 30, .14); }
.teach #apane { display: flex; flex-direction: column; gap: 1.2rem; }
.teach #apane .panel h2 { margin-bottom: .1rem; }
.teach .fine { font-size: .82rem; color: #6c6a62; line-height: 1.55; margin: 0; }
.teach .panel .card { margin: .4rem 0 0; box-shadow: 0 1px 0 rgba(90, 70, 30, .12); border: 1px solid #eee4cf; }
.teach .panel .card.past { opacity: .62; }
.teach .panel .card .tags { margin: .3rem 0 .1rem; }
.teach .panel .card .row { margin-top: .6rem; }
.teach .panel .card label.f { margin-top: .8rem; }

/* une case à cocher sur sa ligne, dans un formulaire */
.teach label.ck { display: flex; align-items: center; gap: .5rem; margin: 1rem 0 .2rem; font-size: .92rem; font-weight: 700; cursor: pointer; }
.teach label.ck input { width: auto; margin: 0; }

/* les plafonds : une ligne par plafond, le champ à droite */
.teach .lim { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .6rem 0; border-top: 1px solid #eee4cf; }
.teach .lim label { font-size: .9rem; font-weight: 600; margin: 0; }
.teach .lim input { margin: 0; }
@media (max-width: 560px) { .teach .lim { flex-direction: column; align-items: flex-start; gap: .4rem; } }

/* les cinq paliers de licence : une grille de cases égales, assez larges pour que « M · 201 à 500 » tienne sur une ligne */
.teach #plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); }
.teach #plans label { min-width: 0; }

/* le mode des paiements : un grand badge, deux colonnes de contrôles, un bouton */
.teach .paybadge { display: inline-block; margin: 0 0 .6rem; padding: .35rem .9rem; border-radius: 999px; font-size: .95rem; font-weight: 800; letter-spacing: .1em; }
.teach .paybadge.t { background: var(--ocre-light); color: var(--ocre-dark); }
.teach .paybadge.l { background: var(--moss-light); color: var(--moss-dark); }
.teach .paygrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; margin: .9rem 0 .2rem; }
.teach .paycol { background: var(--paper); border: 2px solid #eee4cf; border-radius: 12px; padding: .7rem .9rem; }
.teach .paycol.on { border-color: var(--moss); background: #fff; }
.teach .paycol .pt { margin: 0 0 .4rem; font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.teach .checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.teach .checks li { display: flex; gap: .5rem; align-items: flex-start; font-size: .84rem; color: var(--ink-2); line-height: 1.4; }
.teach .checks .mk { flex: none; margin-top: .15rem; }
.teach .checks .mk.ok { color: var(--moss-dark); }
.teach .checks .mk.ko { color: var(--clay); }
@media (min-width: 640px) { .teach .paygrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* les états des bons de commande (note v349) */
.pill.wait { background: #f3e2c2; color: #8a5b16; }
.pill.ok { background: #d7e4cf; color: #365a34; }
.pill.off { background: #f1e3df; color: #8a2e1e; }

/* le widget Turnstile (14/09/2026) */
.turnstile { margin: .4rem 0 0; min-height: 0; }   /* (16/09) « interaction-only » : rien à l'écran sauf si la case est exigée */

/* les fiches de séance (écran de l'espace) */
.teach .lead-s { margin: .2rem 0 1.2rem; font-size: .95rem; color: var(--ink-2); line-height: 1.55; max-width: 60ch; }
.teach .lcards { display: flex; flex-direction: column; gap: .9rem; }
.teach .lcard { display: flex; gap: 1rem; background: #fff; border-radius: var(--radius-cut); box-shadow: var(--shadow); padding: 1.1rem 1.2rem; }
.teach .lnum { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--paper-2); color: var(--moss-dark); font-family: var(--serif); font-weight: 700; font-size: 1.3rem; display: flex; align-items: center; justify-content: center; }
.teach .lbody { flex: 1; min-width: 0; }
.teach .lcity { margin: 0; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--moss-dark); }
.teach .lbody h2 { margin: .15rem 0 .25rem; font-family: var(--serif); font-size: 1.2rem; line-height: 1.25; }
.teach .lq { margin: 0 0 .8rem; font-size: .9rem; color: var(--ink-2); font-style: italic; }
.teach .lacts { display: flex; gap: .5rem; flex-wrap: wrap; }
.teach .lacts .pb { text-decoration: none; }
@media (max-width: 899px) { .teach .lcard { padding: .9rem 1rem; gap: .8rem; } .teach .lnum { width: 38px; height: 38px; font-size: 1.1rem; } }

/* les erreurs de saisie, sous le champ, dans la langue de l'enseignant */
.teach .ferr { margin: .3rem 0 0; font-size: .85rem; color: var(--clay, #a24a2c); font-weight: 600; }
.teach input[aria-invalid="true"], .teach textarea[aria-invalid="true"] { border-color: var(--clay, #a24a2c); }

/* ---------------------------------------------------------------- l'établissement courant (15/09/2026)
   Un professeur peut enseigner dans plusieurs établissements : un sélecteur dans la colonne du menu, et la même
   ligne sous la rangée d'onglets sur smartphone. Avec un seul rattachement, il n'existe pas. */
.teach .navswitch { display: flex; align-items: center; gap: .45rem; margin-top: 1rem; padding: 0 .25rem; color: var(--ink-2); }
.teach .navswitch svg { flex: none; width: 18px; height: 18px; }
.teach .navswitch select { width: 100%; max-width: none; padding: .5rem .55rem; border-width: 1px; border-radius: 10px; font-size: .85rem; font-weight: 600; background: #fff; }
@media (max-width: 899px) {
  .teach-nav .navswitch { margin: .35rem 0 .1rem; padding: 0; }
  .teach-nav .navswitch select { padding: .4rem .5rem; font-size: .8rem; }
}

/* le panneau « Licence » de Mon établissement : l'état, l'usage en trois chiffres, les factures */
.teach .panel.lic { margin-bottom: 1.2rem; }   /* le même souffle qu'entre les autres panneaux (retour Thibault, 15/09) */
.teach .panel.lic .licnow { font-size: .95rem; color: var(--ink); font-weight: 600; }
.teach .panel.lic .row { margin: .6rem 0 1rem; }
.teach .lictab .cancel-order { margin-left: .5rem; font-size: .85rem; }
.teach .lictab .tag { white-space: nowrap; }   /* (15/09) un statut ne se coupe jamais sur deux lignes */
.teach .usage { list-style: none; margin: .2rem 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
.teach .usage li { display: flex; align-items: baseline; gap: .5rem; background: var(--paper); border-radius: 10px; padding: .5rem .7rem; }
.teach .usage b { font-family: var(--serif); font-size: 1.5rem; line-height: 1; color: var(--moss-dark); }
.teach .usage span { font-size: .84rem; color: var(--ink-2); line-height: 1.4; }
.teach .lich { margin: .6rem 0 0; font-size: .95rem; }
@media (min-width: 720px) { .teach .usage { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* les rôles dans la liste des professeurs (administrateur seulement) */
.teach .who .whoin { flex: 1; min-width: 0; }
.teach .who .whoacts { display: flex; gap: .9rem; flex-wrap: wrap; margin-top: .1rem; }
.teach .who .whoacts .btn-link { font-size: .8rem; padding: .3rem 0; }
.teach .btn-link.danger { color: var(--clay, #a24a2c); }

/* la modale d'un geste grave (retirer des droits, retirer un collègue) : jamais le confirm() du navigateur */
.teach .modal { position: fixed; inset: 0; z-index: 90; background: rgba(38, 30, 18, .55); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.teach .modal-in { background: var(--paper, #fdf6e3); border-radius: var(--radius-cut, 14px); box-shadow: 0 18px 50px rgba(38, 30, 18, .35); padding: 1.2rem 1.3rem 1.3rem; width: min(30rem, 100%); max-height: 90vh; overflow-y: auto; }
.teach .modal-in h2 { margin: 0 0 .5rem; font-size: 1.2rem; }
.teach .modal-in p { margin: 0; font-size: .92rem; color: var(--ink-2); line-height: 1.6; }
.teach .modal-acts { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; margin-top: 1.1rem; }
@media (max-width: 480px) { .teach .modal-in { padding: 1rem; } .teach .modal-acts .btn { width: 100%; } }

/* ---------------------------------------------------------------- le suivi de partie (27/09/2026) */
.teach .state { background: #fff; border-radius: 14px; box-shadow: var(--shadow); padding: .9rem 1rem; margin: .6rem 0; }
.teach .state .k { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.teach .state .v { font-size: 1rem; margin: .15rem 0 .5rem; }
.teach .state .row { margin-top: .4rem; }
.teach .state .tag { display: inline-block; font-size: .8rem; padding: .2rem .6rem; margin-right: .4rem; vertical-align: middle; }
.teach .state .tag.ok { background: var(--moss-light); color: var(--moss-dark); }
.teach .state .tag.late { background: #f3d3cd; color: #8a2c1f; }
.teach dialog.dlg { border: 0; border-radius: 16px; padding: 1.2rem 1.3rem; max-width: 26rem; box-shadow: 0 18px 50px rgba(38, 30, 18, .35); background: #fff; color: var(--ink); font: inherit; }
.teach dialog.dlg::backdrop { background: rgba(38, 30, 18, .55); }
.teach dialog.dlg h3 { margin: .2rem 0 .6rem; }
.teach dialog.dlg ul { margin: .4rem 0 .8rem 1.1rem; }
.teach dialog.dlg .row { justify-content: flex-end; }
.teach .stars { color: var(--moss-dark); letter-spacing: .05em; white-space: nowrap; }
.teach .stars .o { color: #cfc6b0; }
.teach .avg { background: var(--paper-2, #fdf8ec); border-radius: 12px; padding: .7rem 1rem; margin: .5rem 0 .8rem; display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: baseline; }
.teach .avg .k { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.teach .avg .stars { font-size: 1.4rem; }
.teach small.def { display: block; color: var(--ink-2); font-size: .85rem; margin-top: .6rem; line-height: 1.5; }
.teach .cur { display: inline-block; font-size: .75rem; font-weight: 700; padding: .15rem .55rem; border-radius: 99px; background: var(--ocre-light, #f1dfc4); color: var(--ocre-dark, #6b4a12); vertical-align: middle; margin-left: .4rem; letter-spacing: 0; }
.teach details.year { background: #fff; border-radius: 16px; box-shadow: var(--shadow); margin: .7rem 0; overflow: hidden; }
.teach details.year summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto auto; grid-template-areas: "l s c" "b s c"; gap: .1rem .8rem; align-items: center; padding: .9rem 1.1rem; background: var(--paper-2, #fdf8ec); }
.teach details.year summary::-webkit-details-marker { display: none; }
.teach details.year[open] summary { background: var(--moss-light); }
.teach details.year .yl { grid-area: l; font-size: 1.25rem; font-weight: 700; }
.teach details.year .ys { grid-area: b; color: var(--ink-2); font-size: .88rem; }
.teach details.year summary .stars { grid-area: s; font-size: 1.2rem; }
.teach details.year .chev { grid-area: c; width: .7rem; height: .7rem; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg); transition: transform .2s; }
.teach details.year[open] .chev { transform: rotate(-135deg); }
.teach details.year .ybody { padding: .4rem 1.1rem 1.1rem; }
.teach details.year h3.yh { margin: 1.2rem 0 .4rem; font-size: 1.05rem; }
.teach details.year .box { margin: .4rem 0 0; }
.teach .box h4 { font-size: 1rem; margin: .9rem 0 .3rem; }
.teach .box p { margin: .4rem 0; }
.teach .ask { padding-left: 1.1rem; }
.teach .ask li { margin: .45rem 0; }
.teach .vecu { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.teach .vecu li { display: grid; grid-template-columns: 5.2rem 1fr; gap: .6rem; background: #fff; border: 1px solid #eee4cf; border-radius: 12px; padding: .6rem .8rem; }
.teach .vecu .t { font-weight: 700; color: var(--moss-dark); font-variant-numeric: tabular-nums; }
.teach .vecu .m { font-weight: 700; }
.teach .vecu .e { color: var(--ink); font-size: .86rem; line-height: 1.45; margin: .15rem 0 .25rem; }
.teach .vecu .s { color: var(--ink-2); font-size: .86rem; }
.teach .vecu li.plain { background: var(--paper-2, #fdf8ec); }
.teach .bar { display: inline-block; height: .55rem; width: 9rem; max-width: 40vw; background: #eee4cf; border-radius: 99px; vertical-align: middle; overflow: hidden; margin-right: .4rem; }
.teach .bar i { display: block; height: 100%; background: var(--moss); }
@media (max-width: 480px) { .teach .vecu li { grid-template-columns: 1fr; } .teach .vecu .t { margin-bottom: -.2rem; } .teach details.year summary { grid-template-columns: 1fr auto; grid-template-areas: "l c" "b c" "s s"; } }