/* RÉVISE AVEC MOI · encres propres posées sur le socle commun.
   Signature : le minuteur écrit à l'encre sur une page de cahier Seyès (lignes bleues, marge rouge),
   et la salle tenue comme une feuille d'appel. Le reste reste sobre : c'est un outil qu'on rouvre chaque jour. */
:root{
  --fond:#EEF1F8;          /* papier bleuté */
  --encre:#14162B;
  --accent:#2B3FB0;        /* bleu encre de stylo plume */
  --accent-fonce:#1F2E86;
  --accent2:#FFB224;       /* or de la charte : la série */
  --or-fonce:#8A5A00;
  --marge:#C8324E;         /* la marge rouge du cahier */
  --alerte:#B3261E;
  --sur-accent:#fff;
  --ligne-fine:color-mix(in srgb,var(--accent) 7%,transparent);
  --ligne-forte:color-mix(in srgb,var(--accent) 17%,transparent);
  --nuit-profonde:#05060E;
}
main{max-width:1180px;margin:0 auto;padding:0 var(--gouttiere)}
[hidden]{display:none!important}
.saut-visuel{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.chiffre{font-family:var(--mono);font-variant-numeric:tabular-nums}
.tete{background:var(--fond)}
.marque span{font-family:var(--titre);font-weight:600;font-size:1.12rem}
.bouton{transition:filter .15s ease,background-color .15s ease}
.bouton.petit{min-height:44px;padding:0 16px;font-size:.92rem}
.bouton.grand{min-height:56px;padding:0 30px;font-size:1.08rem}
.bouton.danger{border-color:var(--alerte);color:var(--alerte)}
.bouton[disabled]{opacity:.55;cursor:not-allowed}
.rangee-boutons{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.note{margin-top:12px;font-size:.9rem;color:var(--doux)}
.note:empty{display:none}
.erreur{margin-top:12px;color:var(--alerte);font-weight:700}
.lien{font:600 .9rem var(--texte);color:var(--doux);background:none;border:0;padding:10px 0;min-height:44px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.lien:hover{color:var(--alerte)}

.bandeau-exemple{background:color-mix(in srgb,var(--accent2) 30%,var(--fond));padding:12px var(--gouttiere);display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;justify-content:space-between;font-size:.94rem}

.colonnes{display:grid;gap:24px;margin-top:22px}
@media (min-width:960px){.colonnes{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:start}.col-salle{position:sticky;top:16px}}
.col-perso{display:grid;gap:22px;min-width:0}

/* ---------- La page de cahier ---------- */
.poste{
  --marge-x:44px;
  position:relative;background-color:#fff;border:1px solid var(--filet);border-radius:var(--rayon);
  padding:22px 20px 20px calc(var(--marge-x) + 18px);
  background-image:
    linear-gradient(to right,transparent calc(var(--marge-x) - 1px),var(--marge) calc(var(--marge-x) - 1px) calc(var(--marge-x) + 1px),transparent calc(var(--marge-x) + 1px)),
    repeating-linear-gradient(to bottom,transparent 0 31px,var(--ligne-forte) 31px 32px),
    repeating-linear-gradient(to bottom,transparent 0 7px,var(--ligne-fine) 7px 8px);
  background-position:0 0,0 14px,0 14px;
}
.choix-matiere{display:grid;gap:8px}
.puces{display:flex;flex-wrap:wrap;gap:8px}
.puce{font:600 .95rem var(--texte);min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid color-mix(in srgb,var(--accent) 35%,#fff);background:#fff;color:var(--accent-fonce);cursor:pointer;transition:background-color .15s ease,color .15s ease}
.puce:hover{background:var(--teinte)}
.puce[aria-checked="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.puce.plus{border-style:dashed;color:var(--accent)}
.puce.suggeree{border-style:dashed}
.puce:disabled{cursor:not-allowed;opacity:.6}
.suggestions{display:grid;gap:8px;margin-top:4px}
.ajout-matiere{display:flex;flex-wrap:wrap;gap:8px;align-items:end;margin-top:4px}
.ajout-matiere label{flex:1 1 200px}

.cadran{margin:22px 0 18px}
.chrono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:clamp(3.6rem,2.2rem + 7vw,6.2rem);line-height:1;letter-spacing:-.03em;color:var(--accent);white-space:nowrap}
.chrono.repos{color:color-mix(in srgb,var(--accent) 45%,#fff)}
.chrono.pause{color:var(--or-fonce)}
.sous-chrono{margin-top:10px;font-weight:600;min-height:1.6em}
.commandes{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.case{display:flex;align-items:center;gap:10px;font-weight:500;margin-top:16px;min-height:44px;cursor:pointer}
.case input{width:20px;height:20px;min-height:0;margin:0;padding:0;accent-color:var(--accent);flex:none}

/* ---------- Totaux ---------- */
.bilan{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.bilan-case{background:#fff;border:1px solid var(--filet);border-radius:var(--rayon);padding:14px 16px;display:grid;gap:2px;align-content:start;min-width:0}
.bilan-titre{font-size:.78rem;font-weight:700;color:var(--accent-fonce);text-transform:uppercase;letter-spacing:.06em}
.bilan-chiffre{font-family:var(--texte);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em;font-size:clamp(1.25rem,1rem + 1vw,1.75rem);line-height:1.25;overflow-wrap:anywhere}
.bilan-note{font-size:.82rem;color:var(--doux)}
.serie.vivante{background:color-mix(in srgb,var(--accent2) 22%,#fff);border-color:color-mix(in srgb,var(--accent2) 60%,#fff)}
.serie.vivante .bilan-titre{color:var(--or-fonce)}

.bloc{display:grid;gap:12px}
.bloc>h2{font-size:clamp(1.2rem,1.05rem + .7vw,1.5rem)}

/* La semaine : sept colonnes, lundi en premier */
.semaine{list-style:none;margin:0;padding:16px 14px 12px;background:#fff;border:1px solid var(--filet);border-radius:var(--rayon);display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;align-items:end}
.jour{display:grid;gap:6px;justify-items:center;min-width:0}
.jour-barre{width:100%;max-width:38px;height:120px;display:flex;align-items:flex-end;background:var(--voile);border-radius:6px;overflow:hidden}
.jour-plein{display:block;width:100%;height:calc(var(--part,0) * 100%);min-height:0;background:var(--accent);border-radius:6px 6px 0 0;transition:height .3s ease}
.jour.aujourdhui .jour-plein{background:var(--accent2)}
.jour.futur .jour-barre{background:transparent;border:1.5px dashed var(--filet)}
.jour-nom{font-size:.8rem;font-weight:700;color:var(--doux)}
.jour.aujourdhui .jour-nom{color:var(--encre)}
.jour-temps{font:400 .72rem var(--mono);color:var(--doux);white-space:nowrap}

.matieres-jour{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.matieres-jour:empty{display:none}
.mj{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:baseline}
.mj-nom{font-weight:700;overflow-wrap:anywhere}
.mj-temps{font-weight:700;font-variant-numeric:tabular-nums}
.mj-barre{grid-column:1/-1;height:8px;border-radius:4px;background:var(--voile);overflow:hidden}
.mj-plein{display:block;height:100%;width:calc(var(--part,0) * 100%);background:var(--accent)}

/* ---------- La salle : feuille d'appel ---------- */
.salle{background:#fff;border:1px solid var(--filet);border-top:4px solid var(--accent);border-radius:var(--rayon);padding:20px;display:grid;gap:12px}
.salle h2{margin-top:-4px}
#salle-hors,#salle-dedans{display:grid;gap:14px}
.salle-intro{color:var(--doux)}
.deux-voies{display:grid;gap:12px}
.voie{display:grid;gap:10px;padding:14px;border-radius:8px;background:var(--voile)}
.ou{text-align:center;font:400 .78rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--doux)}
.facultatif{font-weight:400;color:var(--doux);font-size:.84rem}
#code{font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase}
.salle-entete{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.salle-nom-bloc{min-width:0;flex:1 1 180px}
.salle-nom{font-weight:700;font-size:1.05rem;overflow-wrap:anywhere}
.salle-compte{color:var(--doux);font-size:.9rem}
.code-salle{font:400 1.05rem var(--mono);letter-spacing:.1em;min-height:44px;padding:0 14px;border-radius:8px;border:1.5px dashed var(--accent);background:var(--teinte);color:var(--accent-fonce);cursor:pointer}
.code-salle:hover{background:color-mix(in srgb,var(--accent) 16%,#fff)}

.appel{list-style:none;margin:0;padding:0;border-top:2px solid var(--encre)}
.membre{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--voile)}
.membre .rang{font:400 .9rem var(--mono);color:var(--doux);text-align:right}
.m-corps{display:grid;gap:5px;min-width:0}
.m-ligne{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline;min-width:0}
.m-pseudo{font-weight:700;overflow-wrap:anywhere}
.m-vous{font:400 .7rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--accent);padding:1px 6px;border-radius:4px}
.m-etat{display:inline-flex;align-items:center;gap:6px;font-size:.86rem;color:var(--doux);min-width:0;overflow-wrap:anywhere}
.m-etat::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--filet);flex:none}
.revise .m-etat{color:var(--accent-fonce)}
.revise .m-etat::before{background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent);animation:pouls 2.4s ease-in-out infinite}
.absent .m-pseudo{color:var(--doux)}
.absent .m-etat::before{background:transparent;border:1.5px solid var(--filet)}
.m-barre{height:6px;border-radius:3px;background:var(--voile);overflow:hidden}
.m-plein{display:block;height:100%;width:calc(var(--part,0) * 100%);background:color-mix(in srgb,var(--accent) 55%,#fff)}
.revise .m-plein{background:var(--accent)}
.m-temps{font-weight:700;font-variant-numeric:tabular-nums;font-size:1rem;white-space:nowrap;text-align:right;min-width:4.2em}
.membre.moi{background:linear-gradient(to right,color-mix(in srgb,var(--accent2) 18%,#fff),#fff)}
.membre.moi .rang{color:var(--encre)}
@keyframes pouls{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 0%,transparent)}}
.etat-salle{font-size:.86rem;color:var(--doux)}
.etat-salle:empty{display:none}
.etat-salle.solo{color:var(--encre);background:var(--voile);padding:10px 12px;border-radius:8px}

/* ---------- Données et à savoir ---------- */
.donnees,.a-savoir{margin-top:36px}
.liste-matieres{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.liste-matieres:empty{display:none}
.lm{display:inline-flex;align-items:center;gap:4px;background:#fff;border:1px solid var(--filet);border-radius:999px;padding:0 4px 0 14px;min-height:44px}
.lm .lien{font-size:.84rem;padding:0 10px}
.fichier{position:relative;overflow:hidden}
.fichier input{position:absolute;inset:0;opacity:0;cursor:pointer;min-height:0}
.a-savoir dl{margin:0;display:grid;gap:6px;max-width:760px}
.a-savoir dt{font-weight:700;margin-top:10px}
.a-savoir dd{margin:0;color:var(--doux)}

/* ---------- Téléphone retourné ---------- */
.retourne{position:fixed;inset:0;z-index:50;background:var(--nuit-profonde);color:#5A6196;display:grid;place-content:center;justify-items:center;gap:16px;padding:24px;text-align:center}
.r-matiere{font:600 1rem var(--texte);color:#7A82B8}
.r-chrono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:clamp(3.4rem,2rem + 8vw,7rem);line-height:1;color:#3E4680}
.r-aide{max-width:30ch;font-size:.92rem;color:#5A6196}
.r-sortir{margin-top:24px;font:600 1rem var(--texte);color:#9AA1D6;background:transparent;border:1.5px solid #2A3060;border-radius:999px;min-height:48px;padding:0 26px;cursor:pointer}
.r-sortir:focus-visible{outline:3px solid var(--accent2);outline-offset:2px}

/* ---------- Téléphone ---------- */
@media (max-width:640px){
  .poste{--marge-x:22px;padding:18px 14px 16px calc(var(--marge-x) + 14px)}
  .commandes .bouton{flex:1 1 100%}
  .bilan{grid-template-columns:1fr 1fr}
  .bilan-case.serie{grid-column:1/-1}
  .semaine{gap:4px;padding:14px 8px 10px}
  .jour-barre{height:96px}
  .jour-temps{font-size:.64rem}
  .salle{padding:16px}
}
@media (min-width:641px){.deux-voies{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch}.ou{align-self:center}}
@media (min-width:960px){.deux-voies{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.revise .m-etat::before{animation:none}}
/* Sur téléphone et tablette, la salle vient juste après le minuteur : c'est elle qu'on rouvre. */
@media (max-width:959px){
  .col-perso{display:contents}
  .poste{order:1}.col-salle{order:2}.bilan{order:3}.col-perso>.bloc{order:4}
}