@font-face { font-family: Inter; src: url(/polices/inter.woff2) format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: Inter; src: url(/polices/inter-ext.woff2) format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02AF, U+2190-2193; }

:root {
  --fond: #101113; --panneau: #1a1c1f; --panneau2: #24272b; --trait: #33373c; --texte: #e8e9eb; --doux: #a0a5ac;
  --bleu: #3f8fd2; --vert: #3fa66b; --jaune: #f2c14e; --orange: #e9884a; --rouge: #e5484d;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--fond); color: var(--texte); font: 14px/1.4 Inter, system-ui, sans-serif; font-feature-settings: 'tnum'; -webkit-text-size-adjust: 100%; }
h1, h2, h3, p { margin: 0; }
a { color: #7db8ea; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: var(--panneau2); border: 1px solid var(--trait); border-radius: 6px; padding: 7px 12px; cursor: pointer; min-height: 36px; }
button:hover { border-color: #565c63; }
button:disabled { opacity: .45; cursor: default; }
button.primaire { background: var(--bleu); border-color: var(--bleu); color: #fff; font-weight: 600; }
button.vert { background: var(--vert); border-color: var(--vert); color: #fff; font-weight: 600; }
button.rouge { background: #a8363a; border-color: #a8363a; color: #fff; }
button.jaune { background: #b58a1f; border-color: #b58a1f; color: #fff; }
button.actif { background: var(--bleu); border-color: var(--bleu); color: #fff; }
button.discret { background: none; border-color: transparent; color: var(--doux); }
input, select, textarea { background: #101113; border: 1px solid var(--trait); border-radius: 6px; padding: 7px 9px; width: 100%; min-height: 36px; }
textarea { resize: vertical; min-height: 64px; }
input[type=checkbox] { width: 18px; min-height: 18px; height: 18px; accent-color: var(--bleu); }
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--bleu); outline-offset: -1px; }
label.champ { display: block; font-size: 12px; color: var(--doux); }
label.champ > * { margin-top: 3px; color: var(--texte); font-size: 14px; }
label.coche { display: flex; align-items: center; gap: 8px; }
.grille2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grille3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.pile { display: flex; flex-direction: column; gap: 10px; }
.ligne { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.espace { flex: 1; }
.doux { color: var(--doux); }
.petit { font-size: 12px; }
.bloc { background: var(--panneau); border: 1px solid var(--trait); border-radius: 8px; padding: 12px; }
.bloc > h2, .bloc > h3 { font-size: 13px; color: var(--doux); font-weight: 600; margin-bottom: 8px; }
.pastille { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 11px; background: var(--panneau2); color: var(--doux); white-space: nowrap; }
.pastille.ok { background: #1f4a33; color: #8fe0b3; }
.pastille.ko { background: #5a2022; color: #ffb3b5; }
.pastille.att { background: #5a4716; color: #ffd978; }
.logo-client { max-height: 40px; max-width: 160px; object-fit: contain; }
.toast { position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%); background: #5a2022; color: #fff; padding: 9px 14px; border-radius: 6px; z-index: 100; max-width: 90vw; }
.credit { text-align: center; color: var(--doux); font-size: 11px; padding: 8px 12px; }
.credit a { color: inherit; }

/* Page centree */
.centre { max-width: 960px; margin: 0 auto; padding: 24px 16px; }
.carte-connexion { max-width: 360px; margin: 12vh auto 0; padding: 0 16px; }
.liste-ev { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-top: 16px; }
.carte-ev { display: block; background: var(--panneau); border: 1px solid var(--trait); border-radius: 8px; padding: 14px; color: inherit; text-decoration: none; }
.carte-ev:hover { border-color: var(--bleu); }
.carte-ev h2 { font-size: 16px; }

/* Editeur */
body.editeur { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
.tete { display: flex; align-items: center; gap: 18px; padding: 8px 12px; background: #16181a; border-bottom: 1px solid var(--trait); flex-wrap: wrap; }
.tete h1 { font-size: 18px; white-space: nowrap; }
.mesure { min-width: 74px; }
.mesure small { display: block; font-size: 10px; color: var(--doux); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.mesure b { font-size: 16px; font-weight: 600; }
.barre-progres { height: 6px; background: #2a2d31; flex: none; }
.barre-progres > i { display: block; height: 100%; background: var(--vert); width: 0; }
.barre-progres.alerte > i { background: var(--jaune); }
.barre-progres.danger > i, .barre-progres.depasse > i { background: var(--rouge); }
.cadre { flex: 1; min-height: 0; display: grid; grid-template-columns: 300px minmax(0, 1fr) 330px; gap: 8px; padding: 8px; }
.colonne { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.onglets { display: flex; gap: 4px; flex-wrap: wrap; }
.minuteur { font-size: 56px; font-weight: 300; text-align: center; line-height: 1.1; }
.minuteur.alerte { color: var(--jaune); } .minuteur.danger { color: var(--orange); } .minuteur.depasse { color: var(--rouge); }
.commandes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.commandes .large { grid-column: span 2; min-height: 52px; font-size: 18px; }
.aux { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.aux > div { background: var(--panneau2); border-radius: 6px; padding: 6px; text-align: center; min-width: 0; }
.aux b { display: block; font-size: 17px; font-weight: 500; }
.aux button { padding: 2px 4px; min-height: 28px; min-width: 0; }
.aux .ligne { justify-content: center; gap: 3px; flex-wrap: nowrap; }
.item { display: flex; align-items: stretch; background: var(--panneau); border: 1px solid var(--trait); border-radius: 6px; margin-bottom: 4px; cursor: pointer; min-width: 0; }
.item > .bande { width: 8px; flex: none; border-radius: 5px 0 0 5px; background: #555; }
.item .corps { flex: 1; padding: 7px 10px; min-width: 0; }
.item .titre { font-weight: 600; overflow-wrap: anywhere; }
.item.choisi { border-color: #8db9e0; }
.item.charge { background: #2c3440; }
.item.lecture { background: #1d4f8c; }
.item.pause { background: #6b5316; }
.item.passe { opacity: .55; }
.item.saute { opacity: .4; text-decoration: line-through; }
.item.bloc-titre { background: #2a2d31; font-weight: 700; }
.item.repere { background: #24242f; font-style: italic; }
.item.retard { background: #3a2c10; }
.item .heures { display: flex; gap: 12px; color: var(--doux); font-size: 12px; flex-wrap: wrap; }
.item .droite { padding: 7px 10px; text-align: right; color: var(--doux); font-size: 12px; white-space: nowrap; }
.item[draggable=true] { cursor: grab; }
.item.survol { box-shadow: 0 -2px 0 var(--bleu); }
.table-cue { border-collapse: collapse; min-width: 100%; }
.table-cue th { position: sticky; top: 0; background: #16181a; text-align: left; font-size: 12px; padding: 6px 8px; z-index: 1; white-space: nowrap; }
.table-cue td { border-bottom: 1px solid var(--trait); padding: 6px 8px; vertical-align: top; min-width: 90px; }
.table-cue td textarea { min-height: 36px; border-color: transparent; background: none; padding: 2px; min-width: 150px; }
.table-cue tr.lecture td { background: #1d4f8c; }
.table-cue tr.passe td { opacity: .55; }
.table-cue tr.bloc-titre td { background: #2a2d31; font-weight: 700; }
.table-cue img { width: 130px; display: block; border-radius: 4px; }
.lignes-question { display: flex; flex-direction: column; gap: 6px; }
.question { background: var(--panneau2); border-radius: 6px; padding: 8px 10px; }
.question p { overflow-wrap: anywhere; white-space: pre-wrap; }
.lien-partage { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 4px 0; }
.lien-partage code { font-size: 11px; color: var(--doux); overflow-wrap: anywhere; }
.qr { width: 160px; background: #fff; border-radius: 6px; display: block; }
dialog { background: var(--panneau); color: var(--texte); border: 1px solid var(--trait); border-radius: 8px; max-width: 90vw; }
dialog::backdrop { background: #0008; }

@media (max-width: 1100px) {
  .cadre { grid-template-columns: 270px minmax(0, 1fr); }
  .cadre > .detail { grid-column: 1 / -1; }
  body.editeur { overflow-y: auto; height: auto; min-height: 100dvh; }
  .colonne { overflow: visible; }
}
@media (max-width: 760px) {
  .cadre { display: flex; flex-direction: column; }
  .cadre > * { min-width: 0; }
  .tete { gap: 10px; }
  .tete .optionnel { display: none; }
  .table-zone { overflow-x: auto; }
  .lien-partage { grid-template-columns: minmax(0, 1fr) auto; }
  .lien-partage code { grid-column: 1 / -1; grid-row: 2; }
  .grille3 { grid-template-columns: 1fr 1fr; }
}