/* ==========================================================================
   Espace enseignants -- feuille de style
   ==========================================================================
   Concue pour le telephone d'abord : les enseignants s'en servent debout,
   d'une main, dans les minutes qui precedent ou suivent un cours. Les regles
   de base visent donc le petit ecran, les media queries ajoutent ensuite ce
   que la place permet.

   Trois choix qui expliquent le reste :

   1. Aucune image decorative. La version precedente affichait un fond de
      2,8 Mo a 40 % d'opacite : plusieurs secondes d'attente en 4G pour un
      decor a peine visible. Remplace par un degrade.

   2. Cibles tactiles de 44 px minimum, seuil en dessous duquel on rate le
      bouton quand on ne regarde pas vraiment.

   3. Le cahier de presences devient une liste de fiches sur mobile. Un
      tableau a colonnes par date est illisible sur 375 px ; le HTML produit
      par le JavaScript ne change pas, seul l'affichage.

   Les icones sont des masques SVG definis dans --i-* : une seule couleur,
   nettes a toute taille, aucun fichier a charger.
   ========================================================================== */

/* --- Jetons ------------------------------------------------------------- */

:root {
    /* Identite : le bleu nuit de l'ecole, conserve. */
    --nuit:        #0d2a6b;
    --nuit-clair:  #1c3f8f;

    /* Accent, pour les actions et les avertissements. Jamais decoratif. */
    --accent:       #c2410c;
    --accent-clair: #fff1e8;

    /* Etats de presence. Reprennent les couleurs posees par pupils.js,
       assombries pour rester lisibles. */
    --present: #15803d;
    --excuse:  #b45309;
    --absent:  #b91c1c;
    --absent-fond: #fee2e2;

    /* Neutres */
    --encre:      #16233d;
    --encre-doux: #5b6880;
    --trait:      #dfe4ee;
    --fond:       #f4f6fb;
    --carte:      #ffffff;

    --r-s: 6px;
    --r-m: 10px;
    --r-l: 16px;

    --ombre-s: 0 1px 2px rgba(16, 32, 70, .08);
    --ombre-m: 0 2px 8px rgba(16, 32, 70, .10);
    --ombre-l: 0 8px 24px rgba(16, 32, 70, .14);

    --tactile: 44px;

    /* Icones. Trace unique, sans remplissage : le masque leur donne la
       couleur du contexte. */
    --i-retour: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E");
    --i-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6880' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    --i-liste: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cpath d='M8 2v4M16 2v4M7 11l2 2 3-4M7 16l2 2 3-4M15 11h3M15 17h3'/%3E%3C/svg%3E");
    --i-scene: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l10-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='16' cy='16' r='3'/%3E%3C/svg%3E");
    --i-devoirs: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3Cpath d='M9 7h7M9 11h5'/%3E%3C/svg%3E");
    --i-agenda: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
    --i-piano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M8 5v9M12 5v9M16 5v9M2 14h20'/%3E%3C/svg%3E");
    --i-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-5M12 8h.01'/%3E%3C/svg%3E");
    --i-croix: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
    --i-coche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
    --i-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
    --i-haut: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 15l-6-6-6 6'/%3E%3C/svg%3E");
    --i-bas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* --- Base --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: Lato, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;          /* en dessous de 16 px, iOS zoome sur les champs */
    line-height: 1.5;
    color: var(--encre);
    background: var(--fond) linear-gradient(180deg, #e9eefa 0, var(--fond) 340px) no-repeat;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--nuit-clair); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

img { max-width: 100%; height: auto; }

h1 {
    margin: 0 0 .25rem;
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: -.01em;
    color: var(--nuit);
}

h2 { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--encre-doux); }
h3 { font-size: 1rem; }

/* --- En-tete ------------------------------------------------------------ */

header {
    position: sticky;         /* reste joignable pendant l'appel */
    top: 0;
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    padding: .6rem .9rem;
    background: var(--nuit);
    color: #fff;
    box-shadow: var(--ombre-m);
}

#top-site-link {
    flex: 1 1 auto;
    min-width: 0;
    color: #fff;
    font-weight: 700;
    font-size: .82rem;
    line-height: 1.25;
}
#top-site-link:hover { text-decoration: none; opacity: .85; }

#login-zone {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
}
#login-zone .error:empty { display: none; }
#login-zone .error {
    padding: .2rem .5rem;
    background: #fff;
    border-radius: var(--r-s);
    color: var(--absent);
    font-weight: 700;
}

.disconnect {
    display: inline-block;
    margin-left: .5rem;
    padding: .3rem .6rem;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: var(--r-s);
    color: #fff;
    font-weight: 700;
    font-size: .8rem;
}
.disconnect:hover { background: rgba(255, 255, 255, .15); text-decoration: none; }

#login-zone .form form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
}
#login-zone .form label { display: none; }   /* le champ est explicite par sa place */
#login-zone input[type="text"],
#login-zone input[type="password"] {
    width: 8.5rem;
    min-height: 38px;
    padding: .3rem .5rem;
    border: 0;
    border-radius: var(--r-s);
    font-size: .95rem;
}
#login-zone input[type="submit"] {
    min-height: 38px;
    padding: .3rem .9rem;
    border: 0;
    border-radius: var(--r-s);
    background: var(--accent);
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}

/* --- Contenu ------------------------------------------------------------ */

#page-content {
    max-width: 68rem;
    margin: 0 auto;
    padding: 1rem .9rem 3rem;
}

.back-button {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: var(--tactile);
    color: var(--encre-doux);
    font-weight: 700;
    font-size: .9rem;
}
.back-button::before {
    content: "";
    width: 1.1em;
    height: 1.1em;
    background: currentColor;
    -webkit-mask: var(--i-retour) center / contain no-repeat;
    mask: var(--i-retour) center / contain no-repeat;
}
.back-button:hover { color: var(--nuit); text-decoration: none; }

.home-intro {
    max-width: 34rem;
    margin: 2.5rem auto;
    padding: 1.25rem;
    background: var(--carte);
    border-radius: var(--r-l);
    box-shadow: var(--ombre-s);
    color: var(--encre-doux);
    text-align: center;
}

/* --- Accueil ------------------------------------------------------------ */

.home-section {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 1.75rem 0 .75rem;
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--encre-doux);
}
.home-section::after { content: ""; flex: 1; height: 1px; background: var(--trait); }
.home-section:first-of-type { margin-top: .5rem; }

.home-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: .75rem;
}

.home-row a {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: .5rem;
    min-height: 6.5rem;
    padding: .9rem;
    background: var(--carte);
    border: 1px solid var(--trait);
    border-radius: var(--r-l);
    box-shadow: var(--ombre-s);
    color: var(--nuit);
    font-weight: 800;
    font-size: .95rem;
    line-height: 1.2;
    transition: transform .12s ease, box-shadow .12s ease;
}
.home-row a:hover,
.home-row a:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--ombre-l);
    border-color: var(--nuit-clair);
    text-decoration: none;
}
.home-row a:active { transform: none; }

.home-row a::before {
    content: "";
    width: 1.9rem;
    height: 1.9rem;
    background: var(--nuit-clair);
    -webkit-mask: var(--icone, none) center / contain no-repeat;
    mask: var(--icone, none) center / contain no-repeat;
}

#home-put-button       { --icone: var(--i-liste); }
#home-auditions-button { --icone: var(--i-scene); }
#home-stats-button     { --icone: var(--i-devoirs); }
#home-calendar-button  { --icone: var(--i-agenda); }
#home-accompagnement   { --icone: var(--i-piano); }

/* Les documents externes sont secondaires : moins de contraste. */
#home-calendar-button,
#home-accompagnement { color: var(--encre-doux); font-weight: 700; }
#home-calendar-button::before,
#home-accompagnement::before { background: var(--encre-doux); }

/* --- Selecteurs de jour et de date -------------------------------------- */

#pupils > div:first-of-type {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: .75rem 0 1rem;
}

#pupils select {
    flex: 1 1 10rem;
    min-height: var(--tactile);
    padding: .5rem 2rem .5rem .75rem;
    border: 1px solid var(--trait);
    border-radius: var(--r-m);
    background: var(--carte) var(--i-chevron) no-repeat right .7rem center / .8rem;
    box-shadow: var(--ombre-s);
    font: inherit;
    font-weight: 700;
    color: var(--nuit);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

/* --- Cahier de presences ------------------------------------------------ */

table[id^='results'] {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
}

table[id^='results'] thead th {
    padding: .5rem .6rem;
    background: var(--nuit);
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    text-align: left;
    white-space: nowrap;
}
table[id^='results'] thead th:first-child { border-radius: var(--r-m) 0 0 0; }
table[id^='results'] thead th:last-child  { border-radius: 0 var(--r-m) 0 0; }

table[id^='results'] tbody td {
    padding: .55rem .6rem;
    background: var(--carte);
    border-bottom: 1px solid var(--trait);
    vertical-align: middle;
}
table[id^='results'] tbody tr:hover td { background: #fbfcff; }

/* Le selecteur de presence est le seul geste de l'ecran : large et lisible.
   La couleur de fond est posee sur la cellule par pupils.js. */
table[id^='results'] select {
    width: 100%;
    min-width: 7rem;
    min-height: var(--tactile);
    padding: .35rem 1.8rem .35rem .6rem;
    border: 1px solid var(--trait);
    border-radius: var(--r-m);
    background: transparent var(--i-chevron) no-repeat right .55rem center / .75rem;
    font: inherit;
    font-weight: 800;
    color: var(--encre);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

/* Bouton d'acces a la fiche de l'eleve. C'etait une image PNG cliquable :
   inatteignable au clavier, et trop petite pour le tactile. */
.info-pupil {
    width: 30px;
    height: 30px;
    margin-right: .45rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    vertical-align: -.5rem;
    cursor: pointer;
}
.info-pupil::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: var(--nuit-clair);
    -webkit-mask: var(--i-info) center / 1.25rem no-repeat;
    mask: var(--i-info) center / 1.25rem no-repeat;
}
.info-pupil:hover { background: #eaeefa; }

/* Etat de presence. La classe est posee sur la cellule par pupils.js ; c'est
   le selecteur lui-meme qui se colore, pas la cellule entiere -- sur
   telephone la cellule occupe toute la largeur, et un pave de couleur y
   noyait l'information. */
/* Un liseré epais a gauche du selecteur porte la couleur : reperable en
   parcourant la liste, et sans positionnement absolu a recalculer.
   Les selecteurs sont volontairement plus specifiques que la regle
   table[id^='results'] select ci-dessus, sinon la couleur ne prendrait pas. */
table[id^='results'] td.etat-present select,
table[id^='results'] td.etat-excuse select,
table[id^='results'] td.etat-absent select,
table[id^='results'] td.etat-retard select {
    border-left-width: 6px;
    font-weight: 800;
}
/* !important assume : le fond d'un select en appearance:none reste impose par
   le navigateur, et une regle ordinaire -- meme plus specifique, meme placee
   en dernier -- ne le remplace pas. Verifie sur place : seule la priorite
   passe. Cela ne masque aucune autre regle du projet. */
table[id^='results'] td.etat-present select {
    background-color: #dcfce7 !important;
    border-color: var(--present) !important;
    color: #14532d !important;
}
table[id^='results'] td.etat-excuse select {
    background-color: #fef3c7 !important;
    border-color: var(--excuse) !important;
    color: #713f12 !important;
}
table[id^='results'] td.etat-absent select {
    background-color: #fee2e2 !important;
    border-color: var(--absent) !important;
    color: #7f1d1d !important;
}
table[id^='results'] td.etat-retard select {
    background-color: #ecfccb !important;
    border-color: #4d7c0f !important;
    color: #365314 !important;
}

.info-button {
    margin: .25rem 0 0;
    font-size: .8rem;
    font-style: italic;
    color: var(--encre-doux);
}
.info-button:empty { display: none; }

/* "Rentre seul" a non : information de securite, elle doit ressortir. */
.big-warn { font-weight: 900; color: var(--absent); }
table[id^='results'] tbody td.big-warn { background: var(--absent-fond); }

.no-room { color: var(--accent); font-style: italic; cursor: help; }

/* Titre d'un cours collectif, entre deux tableaux. */
#pupils h2 {
    margin: 1.5rem 0 .5rem;
    color: var(--nuit);
    font-size: 1.1rem;
    font-weight: 900;
}

/* --- Classes de formation musicale -------------------------------------- */

#classes { display: grid; gap: 1.25rem; }

.class h2 { margin: 0 0 .6rem; color: var(--nuit); font-size: 1rem; font-weight: 900; }

.level {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: .6rem;
}

.level > a {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-height: var(--tactile);
    padding: .7rem .8rem;
    background: var(--carte);
    border: 1px solid var(--trait);
    border-left: 4px solid var(--nuit-clair);
    border-radius: var(--r-m);
    box-shadow: var(--ombre-s);
    color: var(--encre);
}
.level > a:hover { box-shadow: var(--ombre-m); text-decoration: none; }

.btn_date { font-weight: 900; font-size: .95rem; color: var(--nuit); }
.btn_hour { font-size: .85rem; color: var(--encre-doux); }
.btn_teacher {
    margin-top: .2rem;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--encre-doux);
}

/* Classe sans aucun devoir saisi : presente, mais en retrait. */
.level > a.empty-fm { border-left-color: var(--trait); background: #fafbfe; }
.level > a.empty-fm .btn_date { color: var(--encre-doux); }

/* --- Cahier de textes --------------------------------------------------- */

#c_teacher { margin-bottom: 1rem; color: var(--encre-doux); font-style: italic; }

.read-only-notice {
    padding: .7rem .9rem;
    background: var(--accent-clair);
    border-left: 4px solid var(--accent);
    border-radius: var(--r-s);
    font-size: .9rem;
}

#c_homeworks h3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: 0;
    padding: .55rem .8rem;
    background: var(--nuit);
    border-radius: var(--r-m) var(--r-m) 0 0;
    color: #fff;
    font-size: .82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
}
#c_homeworks h3 input[type="date"] {
    min-height: 36px;
    padding: .2rem .4rem;
    border: 0;
    border-radius: var(--r-s);
    font: inherit;
    font-size: .85rem;
    text-transform: none;
}

.homework {
    padding: .9rem;
    margin-bottom: 1.25rem;
    background: var(--carte);
    border: 1px solid var(--trait);
    border-top: 0;
    border-radius: 0 0 var(--r-m) var(--r-m);
    box-shadow: var(--ombre-s);
}

.add-line,
.update-line {
    margin-bottom: 1.5rem;
    padding-bottom: .9rem;
    background: var(--carte);
    border: 1px solid var(--trait);
    border-radius: var(--r-m);
    box-shadow: var(--ombre-s);
}
.add-line { border-color: var(--present); }
.add-line h3 { background: var(--present); }
.add-line > *:not(h3),
.update-line > *:not(h3) { margin: .6rem .9rem 0; }

.add-line input[type="submit"],
.update-line input[type="submit"] {
    min-height: var(--tactile);
    padding: .5rem 1.1rem;
    border: 0;
    border-radius: var(--r-m);
    background: var(--nuit);
    color: #fff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}
.add-line input[type="submit"] { background: var(--present); }

/* Barre d'outils de l'editeur : on masque ce qui n'a pas de sens ici. */
.note-style,
.note-font button:last-child,
.note-fontname,
.note-table,
.note-insert,
.note-view { display: none; }

/* --- Auditions ---------------------------------------------------------- */

.label-value { display: grid; gap: .2rem; margin-bottom: .75rem; }
.label-value .label {
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--encre-doux);
}
.label-value .value input,
.label-value .value select,
.label-value .value textarea {
    width: 100%;
    min-height: var(--tactile);
    padding: .5rem .7rem;
    border: 1px solid var(--trait);
    border-radius: var(--r-m);
    font: inherit;
}
.label-value .value textarea { min-height: 5rem; }

/* Les boutons des auditions portaient leurs icones en PNG, dont deux fichiers
   (up.png, down.png) absents du serveur : les fleches de tri etaient donc
   invisibles. Tout passe en masque SVG. */
.remove-line button,
.add-part-buttons button,
.add-buttons button,
#add-audition-button,
.add-pupil {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: var(--tactile);
    padding: .5rem 1.1rem;
    border: 0;
    border-radius: var(--r-m);
    background: var(--nuit);
    box-shadow: var(--ombre-s);
    color: #fff;
    font: inherit;
    font-weight: 800;
    text-align: center;
    cursor: pointer;
}
.remove-line button::before,
.add-part-buttons button::before,
.add-pupil::before,
#add-audition-button::before {
    content: "";
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    background: currentColor;
    -webkit-mask: var(--icone, none) center / contain no-repeat;
    mask: var(--icone, none) center / contain no-repeat;
}

.remove-line button        { background: var(--absent); --icone: var(--i-croix); }
.add-part-buttons .ok      { background: var(--present); --icone: var(--i-coche); }
.add-pupil,
#add-audition-button       { --icone: var(--i-plus); }

.add-pupil {
    width: 100%;
    margin: 1rem 0;
    background: var(--present);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

#add-audition-button { margin: 0 auto 1.25rem; }
.add-buttons, .add-part-buttons { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }

button:disabled {
    background: var(--trait) !important;
    color: var(--encre-doux) !important;
    box-shadow: none;
    cursor: not-allowed;
}

/* Fleches de reordonnancement */
button.up, button.down {
    width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    border: 1px solid var(--trait);
    border-radius: var(--r-s);
    background: var(--carte);
    cursor: pointer;
}
button.up::before, button.down::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: var(--nuit-clair);
    -webkit-mask: var(--icone) center / 1.1rem no-repeat;
    mask: var(--icone) center / 1.1rem no-repeat;
}
button.up   { --icone: var(--i-haut); }
button.down { --icone: var(--i-bas); }

/* Tableau des auditions et des participations */
#auditions, .parts { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }

#auditions tr.header-row td {
    padding: .5rem .7rem;
    background: var(--nuit);
    border: 0;
    color: #fff;
    font-weight: 800;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    text-align: left;
}
#auditions tr.body-row > td {
    padding: .6rem .7rem;
    background: var(--carte);
    border-bottom: 1px solid var(--trait);
    vertical-align: top;
}

.parts th:not(:empty),
.parts td:not(:empty) {
    padding: .5rem .7rem;
    background: var(--carte);
    border-bottom: 1px solid var(--trait);
    cursor: pointer;
}
.parts td:last-child { font-size: .9em; font-style: italic; color: var(--encre-doux); }

/* --- Boites de dialogue (jQuery UI) ------------------------------------- */

.ui-dialog {
    padding: 0;
    border: 0 !important;
    border-radius: var(--r-l) !important;
    box-shadow: var(--ombre-l) !important;
    overflow: hidden;
}
.ui-dialog .ui-dialog-titlebar {
    background: var(--nuit) !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #fff !important;
    font-weight: 800;
}
.ui-widget-content { background: var(--carte) !important; }
.ui-dialog .ui-dialog-content { padding: 1rem !important; }

/* Le bouton de fermeture de jQuery UI arrive avec son icone en sprite, hors
   sujet ici. On le refait en croix, a une taille atteignable au doigt. */
.ui-dialog .ui-dialog-titlebar-close {
    top: 50%;
    right: .5rem;
    width: 38px;
    height: 38px;
    margin-top: -19px;
    padding: 0;
    border: 0 !important;
    border-radius: var(--r-s);
    background: transparent !important;
}
.ui-dialog .ui-dialog-titlebar-close .ui-icon {
    width: 100%;
    height: 100%;
    margin: 0;
    background: #fff !important;
    text-indent: 0;
    -webkit-mask: var(--i-croix) center / 1.1rem no-repeat;
    mask: var(--i-croix) center / 1.1rem no-repeat;
}
.ui-dialog .ui-dialog-titlebar-close:hover { background: rgba(255, 255, 255, .18) !important; }
.ui-dialog .ui-dialog-titlebar { padding: .7rem 3rem .7rem 1rem !important; }
.ui-dialog .label { color: var(--encre-doux); }
.ui-dialog button {
    min-height: var(--tactile);
    padding: .5rem 1.1rem;
    border: 0;
    border-radius: var(--r-m);
    background: var(--nuit);
    color: #fff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}
.ui-widget-overlay { background: rgba(8, 27, 71, .45) !important; opacity: 1 !important; }

.pupil-content { display: grid; gap: .35rem; text-transform: none !important; }

/* ==========================================================================
   Telephone : le cahier de presences devient une liste de fiches
   ==========================================================================
   Un tableau a colonnes ne tient pas sur 375 px. Le HTML reste celui produit
   par pupils.js -- des lignes de tableau -- mais chaque ligne s'affiche comme
   une fiche : heure et duree en tete, nom en dessous, selecteur de presence
   en pleine largeur.
   ========================================================================== */

@media (max-width: 767px) {

    table[id^='results'] thead { display: none; }

    table[id^='results'],
    table[id^='results'] tbody,
    table[id^='results'] tr,
    table[id^='results'] tbody td { display: block; width: auto; }

    table[id^='results'] tbody tr {
        margin-bottom: .6rem;
        background: var(--carte);
        border: 1px solid var(--trait);
        border-radius: var(--r-m);
        box-shadow: var(--ombre-s);
        overflow: hidden;
    }

    table[id^='results'] tbody td { padding: .15rem .8rem; border: 0; }
    table[id^='results'] tbody td:first-child { padding-top: .7rem; }

    /* Salle, heure et duree sur une meme ligne, l'heure en vedette. */
    table[id^='results'] tbody td:nth-child(1),
    table[id^='results'] tbody td:nth-child(3) {
        display: inline-block;
        font-size: .82rem;
        color: var(--encre-doux);
    }
    table[id^='results'] tbody td:nth-child(2) {
        display: inline-block;
        font-size: 1.15rem;
        font-weight: 900;
        color: var(--nuit);
    }
    table[id^='results'] tbody td:nth-child(3)::before { content: "\00b7\00a0"; }

    /* Nom de l'eleve */
    table[id^='results'] tbody td:nth-child(4) { font-size: 1.02rem; font-weight: 700; }

    /* "Rentre seul" : la mention n'a d'interet que si la reponse est non. */
    table[id^='results'] tbody td:nth-child(5) { font-size: .85rem; color: var(--encre-doux); }
    table[id^='results'] tbody td:nth-child(5)::before { content: "Rentre seul : "; font-weight: 700; }
    table[id^='results'] tbody td.big-warn {
        margin: .4rem .8rem;
        padding: .3rem .6rem;
        border-radius: var(--r-s);
        font-size: .85rem;
    }

    /* Le selecteur occupe toute la largeur, en bas de la fiche. */
    table[id^='results'] tbody td[class*="w_"] { padding: .5rem .8rem .8rem; }
    table[id^='results'] select { min-height: 48px; font-size: 1rem; }

    .ui-dialog {
        left: .5rem !important;
        right: .5rem !important;
        width: auto !important;
        max-width: calc(100vw - 1rem) !important;
    }
}

/* --- Tablette et au-dela ------------------------------------------------ */

@media (min-width: 768px) {
    h1 { font-size: 1.9rem; }
    #top-site-link { font-size: .95rem; }
    #page-content { padding: 1.5rem 1.5rem 4rem; }
    .home-row { gap: 1rem; }
    .home-row a { min-height: 7.5rem; font-size: 1rem; }
    .home-row a::before { width: 2.2rem; height: 2.2rem; }
    #pupils select { flex: 0 1 14rem; }
}

/* --- Impression --------------------------------------------------------- */

@media print {
    header, .back-button, .add-line, .update-line, #pupils > div:first-of-type { display: none; }
    body { background: #fff; }
    table[id^='results'] tbody td { border-bottom: 1px solid #999; }
}