/* SlideManager v1.0 · styles de l'application
   Palette tirée du logo : bleu nuit 001848 / 003068, bleu 0078F8, bleu clair 18B0F8, cyan 28B8F8,
   orange F87000 vers E83000 réservé aux actions et aux alertes. Rendu sobre, fond clair. */

@import url("https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap");

:root {
  --nuit: #001848; --nuit-2: #003068; --bleu: #0078F8; --bleu-clair: #18B0F8; --cyan: #28B8F8;
  --orange: #F87000; --rouge-orange: #E83000;
  --accent: var(--bleu);
  --encre: #0F1728; --encre-2: #3C4658; --gris: #6B7484; --ligne: #DDE3EC; --panneau: #F3F6FA; --fond: #FFFFFF;
  --vert: #1E9E62; --vert-pale: #E4F5EC; --orange-pale: #FFF0E0; --rouge-pale: #FDE4DE; --bleu-pale: #E6F1FF;
  --arrondi: 10px; --ombre: 0 1px 2px rgba(0, 24, 72, .06), 0 8px 24px rgba(0, 24, 72, .06);
  --titre: "Sora", system-ui, sans-serif; --corps: "IBM Plex Sans", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--corps); font-size: 15px; line-height: 1.5; color: var(--encre); background: var(--fond); }
h1, h2, h3, h4 { font-family: var(--titre); font-weight: 600; line-height: 1.2; margin: 0 0 .5rem; color: var(--nuit); }
h1 { font-size: 1.5rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1rem; } h4 { font-size: .9rem; color: var(--encre-2); }
p { margin: 0 0 .75rem; } a { color: var(--bleu); } small, .petit { font-size: .85rem; color: var(--gris); }
button { font: inherit; } input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--bleu-clair); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* --- entête / pied --- */
.entete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 1.25rem; background: #fff; border-bottom: 1px solid var(--ligne); position: sticky; top: 0; z-index: 20; }
.entete-gauche { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.entete .logo-app { height: 34px; width: auto; } .entete .logo-client { height: 34px; max-width: 140px; object-fit: contain; }
.entete-titre { font-family: var(--titre); font-weight: 600; font-size: 1.05rem; color: var(--nuit); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entete-sous { font-size: .8rem; color: var(--gris); }
.entete-droite { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.pied { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.25rem 1.5rem; font-size: .8rem; color: var(--gris); border-top: 1px solid var(--ligne); margin-top: 2rem; }
.pied a { color: var(--gris); } .pied .logo-pied { height: 18px; vertical-align: middle; margin-right: .5rem; } .pied .version { color: #B4BCC8; }

/* --- boutons, champs, badges --- */
.btn { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .9rem; border-radius: 8px; border: 1px solid var(--ligne); background: #fff; color: var(--encre); cursor: pointer; text-decoration: none; font-weight: 500; font-size: .9rem; line-height: 1.2; transition: background .12s, border-color .12s; }
.btn:hover { background: var(--panneau); border-color: #C5CEDB; }
.btn.principal { background: var(--accent); border-color: var(--accent); color: #fff; } .btn.principal:hover { filter: brightness(.93); }
.btn.action { background: var(--orange); border-color: var(--orange); color: #fff; } .btn.action:hover { background: var(--rouge-orange); border-color: var(--rouge-orange); }
.btn.discret { border-color: transparent; background: transparent; color: var(--bleu); padding: .3rem .5rem; }
.btn.danger { color: var(--rouge-orange); } .btn.danger:hover { background: var(--rouge-pale); }
.btn.petit { padding: .3rem .6rem; font-size: .8rem; } .btn:disabled { opacity: .45; cursor: default; }
.champ { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .8rem; }
.champ label { font-size: .82rem; font-weight: 500; color: var(--encre-2); }
.champ input, .champ select, .champ textarea { padding: .5rem .65rem; border: 1px solid var(--ligne); border-radius: 8px; background: #fff; width: 100%; }
.champ input[type=color] { height: 38px; padding: 3px; width: 100%; }
.champ input:focus, .champ textarea:focus, .champ select:focus { border-color: var(--bleu); outline: none; box-shadow: 0 0 0 3px rgba(0, 120, 248, .15); }
.champ textarea { min-height: 80px; resize: vertical; }
.champ.ligne { flex-direction: row; align-items: center; gap: .6rem; } .champ.ligne input[type=checkbox] { width: auto; }
.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; } .grille-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 1rem; }
@media (max-width: 720px) { .grille-2, .grille-3 { grid-template-columns: 1fr; } }
.badge { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 500; white-space: nowrap; background: var(--panneau); color: var(--encre-2); }
.badge.attendue { background: #F1F3F6; color: var(--gris); } .badge.deposee, .badge.analysee { background: var(--bleu-pale); color: var(--nuit-2); }
.badge.lissee { background: #E3F3FE; color: #0C5E8A; } .badge.a-valider { background: var(--orange-pale); color: #9A4400; }
.badge.validee { background: var(--vert-pale); color: #146B44; } .badge.a-corriger { background: var(--rouge-pale); color: #9E2A0C; }
.feu { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 500; }
.feu::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.feu.vert { color: var(--vert); } .feu.orange { color: #D66A00; } .feu.rouge { color: var(--rouge-orange); }

/* --- structure --- */
.page { max-width: 1180px; margin: 0 auto; padding: 1.25rem; }
.page.etroite { max-width: 820px; }
.carte { background: #fff; border: 1px solid var(--ligne); border-radius: var(--arrondi); padding: 1.1rem 1.25rem; margin-bottom: 1rem; }
.carte.panneau { background: var(--panneau); border-color: transparent; }
.carte-titre { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; flex-wrap: wrap; }
.carte-titre h2, .carte-titre h3 { margin: 0; }
.menu { display: flex; gap: .25rem; flex-wrap: wrap; border-bottom: 1px solid var(--ligne); margin-bottom: 1.25rem; }
.menu button { background: none; border: 0; border-bottom: 2px solid transparent; padding: .6rem .9rem; cursor: pointer; color: var(--encre-2); font-weight: 500; }
.menu button.actif { color: var(--nuit); border-bottom-color: var(--accent); }
.vide { padding: 2rem 1rem; text-align: center; color: var(--gris); border: 1px dashed var(--ligne); border-radius: var(--arrondi); }
.tableau { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tableau th { text-align: left; font-weight: 500; color: var(--gris); font-size: .78rem; padding: .5rem .6rem; border-bottom: 1px solid var(--ligne); }
.tableau td { padding: .6rem .6rem; border-bottom: 1px solid var(--ligne); vertical-align: middle; }
.tableau td b { white-space: nowrap; }
.tableau tr:last-child td { border-bottom: 0; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.liste-points { margin: .4rem 0 0; padding-left: 1.2rem; } .liste-points li { margin-bottom: .3rem; }
.aide { font-size: .82rem; color: var(--gris); margin-top: .4rem; }
.erreur { color: var(--rouge-orange); font-size: .85rem; }
.note-info { background: var(--bleu-pale); border-radius: 8px; padding: .7rem .9rem; font-size: .88rem; color: var(--nuit-2); margin-bottom: 1rem; }
.note-alerte { background: var(--orange-pale); border-radius: 8px; padding: .7rem .9rem; font-size: .88rem; color: #8A3D00; margin-bottom: 1rem; }
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.chiffre { background: var(--panneau); border-radius: var(--arrondi); padding: .8rem 1rem; }
.chiffre b { display: block; font-family: var(--titre); font-size: 1.6rem; color: var(--nuit); line-height: 1.1; } .chiffre span { font-size: .8rem; color: var(--gris); }

/* --- admin : deux colonnes --- */
.admin { display: grid; grid-template-columns: 300px 1fr; min-height: calc(100vh - 60px); }
.admin-gauche { background: #FFF9F2; border-right: 1px solid var(--ligne); padding: 1.1rem; }
.admin-droite { background: #F2F2FF; padding: 1.25rem 1.5rem; }
.admin-droite .carte { background: #fff; }
.espace-item { display: block; width: 100%; text-align: left; background: #fff; border: 1px solid var(--ligne); border-radius: var(--arrondi); padding: .7rem .8rem; margin-bottom: .5rem; cursor: pointer; }
.espace-item.actif { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(0, 120, 248, .15); }
.espace-item b { display: block; font-family: var(--titre); font-weight: 600; font-size: .95rem; color: var(--nuit); } .espace-item span { font-size: .8rem; color: var(--gris); }
.evenement-titre { margin-bottom: 1rem; } .evenement-titre h1 { font-size: 1.6rem; margin-bottom: .1rem; } .evenement-titre .client { color: var(--gris); font-size: .95rem; }
@media (max-width: 900px) { .admin { grid-template-columns: 1fr; } .admin-gauche { border-right: 0; border-bottom: 1px solid var(--ligne); } }
.lien-copie { display: flex; align-items: center; gap: .5rem; background: var(--panneau); border-radius: 8px; padding: .45rem .6rem; font-size: .82rem; margin-bottom: .4rem; }
.lien-copie code { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--nuit-2); }
.journal { list-style: none; margin: 0; padding: 0; font-size: .85rem; } .journal li { padding: .4rem 0; border-bottom: 1px solid var(--ligne); display: flex; gap: .8rem; } .journal time { color: var(--gris); white-space: nowrap; min-width: 150px; }
.apercu-gabarit { background: #3A3F4A; border-radius: var(--arrondi); padding: 1rem; }
.pastille-couleur { display: inline-block; width: 18px; height: 18px; border-radius: 4px; vertical-align: middle; border: 1px solid rgba(0, 0, 0, .15); }

/* --- miniatures de slides --- */
.mini { aspect-ratio: 16 / 9; background: #000; border-radius: 6px; overflow: hidden; border: 1px solid var(--ligne); }
.mini svg { width: 100%; height: 100%; display: block; }
.grille-slides { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .8rem; }
.grille-slides figure { margin: 0; } .grille-slides figcaption { font-size: .78rem; color: var(--gris); margin-top: .3rem; }
.comparaison { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.comparaison h4 { margin-bottom: .4rem; }
@media (max-width: 720px) { .comparaison { grid-template-columns: 1fr; } }
.ordre-liste { list-style: none; margin: 0; padding: 0; }
.ordre-liste li { display: grid; grid-template-columns: 34px 1fr auto auto; gap: .8rem; align-items: center; background: #fff; border: 1px solid var(--ligne); border-radius: 8px; padding: .55rem .7rem; margin-bottom: .45rem; cursor: grab; }
.ordre-liste li.deplace { opacity: .4; } .ordre-liste li.cible { border-color: var(--accent); }
.ordre-liste .num { font-family: var(--titre); font-weight: 600; color: var(--nuit); text-align: center; }
.ordre-liste .poignee { color: #B4BCC8; cursor: grab; font-size: 1.1rem; }
.ordre-liste.verrou li { cursor: default; }
.commentaire { border-left: 3px solid var(--ligne); padding: .4rem .8rem; margin-bottom: .6rem; font-size: .9rem; }
.commentaire.regie { border-color: var(--nuit-2); } .commentaire.organisateur { border-color: var(--bleu-clair); } .commentaire.intervenant { border-color: var(--orange); }
.commentaire .qui { font-size: .78rem; color: var(--gris); }

/* --- dépôt --- */
.zone-depot { border: 2px dashed #B9C4D6; border-radius: var(--arrondi); padding: 2rem 1rem; text-align: center; color: var(--encre-2); background: var(--panneau); cursor: pointer; transition: border-color .12s, background .12s; }
.zone-depot.survol { border-color: var(--accent); background: var(--bleu-pale); }
.zone-depot b { display: block; font-family: var(--titre); color: var(--nuit); margin-bottom: .3rem; }
.progression { height: 8px; background: var(--ligne); border-radius: 4px; overflow: hidden; margin-top: .8rem; } .progression div { height: 100%; background: var(--accent); width: 0; transition: width .2s; }
.etapes { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.etape { display: flex; align-items: center; gap: .45rem; padding: .35rem .7rem; border-radius: 999px; font-size: .8rem; background: var(--panneau); color: var(--gris); }
.etape.faite { background: var(--vert-pale); color: #146B44; } .etape.en-cours { background: var(--bleu-pale); color: var(--nuit-2); font-weight: 500; }

/* --- portillon --- */
.portillon { position: fixed; inset: 0; background: linear-gradient(160deg, #EEF3FA, #FFFFFF); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 1rem; }
.portillon-carte { background: #fff; border: 1px solid var(--ligne); border-radius: 14px; box-shadow: var(--ombre); padding: 2rem; width: 100%; max-width: 380px; text-align: center; }
.portillon-carte .logo-app { height: 40px; margin-bottom: 1rem; } .portillon-carte h1 { font-size: 1.25rem; } .portillon-carte .sous { color: var(--gris); font-size: .9rem; }
.portillon-carte input { width: 100%; padding: .65rem .75rem; border: 1px solid var(--ligne); border-radius: 8px; margin: .8rem 0 .5rem; font-size: 1rem; text-align: center; }
.portillon-carte .btn { width: 100%; justify-content: center; margin-top: .4rem; }

/* --- accès --- */
.acces { min-height: 100vh; display: flex; flex-direction: column; }
.acces main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }

/* --- diffusion --- */
body.diffusion { background: #000; overflow: hidden; }
.ecran { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: #000; }
.ecran .slide-plein { width: 100vw; height: 56.25vw; max-height: 100vh; max-width: 177.78vh; opacity: 1; transition: opacity .18s ease; }
.ecran .slide-plein.fondu { opacity: 0; } .ecran .slide-plein svg { width: 100%; height: 100%; display: block; }
.ecran.noir .slide-plein { opacity: 0; }
.ecran .attente-image { width: 100vw; height: 56.25vw; max-height: 100vh; max-width: 177.78vh; object-fit: cover; }

/* --- télécommande --- */
body.telecommande { background: #0B1220; color: #E8EDF5; }
.tc { max-width: 520px; margin: 0 auto; padding: .9rem; display: flex; flex-direction: column; gap: .8rem; min-height: 100vh; }
.tc-entete { display: flex; justify-content: space-between; align-items: center; font-size: .85rem; color: #9AA6B8; }
.tc-entete b { color: #fff; font-family: var(--titre); font-weight: 600; }
.tc .mini { border-color: #1E293B; } .tc-courante { position: relative; }
.tc-courante .num { position: absolute; right: .6rem; bottom: .5rem; background: rgba(0, 0, 0, .65); color: #fff; padding: .15rem .55rem; border-radius: 999px; font-size: .8rem; }
.tc-suivante { display: grid; grid-template-columns: 110px 1fr; gap: .8rem; align-items: center; font-size: .85rem; color: #9AA6B8; }
.tc-suivante .mini { width: 110px; }
.tc-minuteur { text-align: center; font-family: var(--titre); font-size: 2.2rem; font-weight: 600; letter-spacing: .02em; color: #fff; }
.tc-minuteur.alerte { color: #FF8A4C; } .tc-minuteur small { display: block; font-family: var(--corps); font-size: .8rem; color: #9AA6B8; font-weight: 400; letter-spacing: 0; }
.tc-boutons { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.tc-boutons button { padding: 1.4rem .5rem; font-size: 1.2rem; font-weight: 600; font-family: var(--titre); border-radius: 14px; border: 0; background: #1B2A44; color: #fff; cursor: pointer; }
.tc-boutons button.suivante { background: var(--bleu); } .tc-boutons button:active { transform: scale(.98); filter: brightness(1.15); }
.tc-noir { width: 100%; padding: .9rem; border-radius: 12px; border: 1px solid #2A3A55; background: transparent; color: #E8EDF5; font-weight: 500; cursor: pointer; }
.tc-noir.actif { background: #fff; color: #000; border-color: #fff; }
.tc-notes { background: #111A2C; border-radius: 12px; padding: .8rem 1rem; font-size: .95rem; color: #D6DEEA; white-space: pre-wrap; }
.tc-liste { display: flex; flex-direction: column; gap: .35rem; }
.tc-liste button { text-align: left; background: #111A2C; color: #D6DEEA; border: 0; border-radius: 10px; padding: .6rem .8rem; cursor: pointer; font-size: .9rem; display: flex; justify-content: space-between; gap: .5rem; }
.tc-liste button.actif { background: #1B2A44; color: #fff; outline: 1px solid var(--bleu-clair); }
.tc-pied { margin-top: auto; font-size: .75rem; color: #5D6B82; text-align: center; }

/* --- prompteur --- */
body.prompteur { background: #000; color: #fff; }
.pr { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; padding: 1.2rem 1.6rem; gap: 1rem; }
.pr-haut { display: flex; justify-content: space-between; align-items: center; color: #9AA6B8; font-size: 1rem; }
.pr-haut b { color: #fff; font-family: var(--titre); font-size: 1.2rem; }
.pr-corps { display: grid; grid-template-columns: 1fr 380px; gap: 1.5rem; align-items: start; }
@media (max-width: 900px) { .pr-corps { grid-template-columns: 1fr; } }
.pr-texte { font-size: clamp(1.4rem, 3vw, 2.4rem); line-height: 1.35; white-space: pre-wrap; }
.pr-texte .resume { color: #fff; margin-bottom: 1rem; } .pr-texte .note { color: #FFB27A; }
.pr-texte .notes-ppt { color: #9AA6B8; font-size: .7em; margin-top: 1.5rem; }
.pr-slide .mini { border-color: #2A3A55; } .pr-slide .num { text-align: right; color: #9AA6B8; margin-top: .4rem; }
.pr-bas { display: flex; justify-content: space-between; align-items: center; color: #5D6B82; font-size: .9rem; }
.pr-bas .chrono { font-family: var(--titre); font-size: 1.6rem; color: #fff; }
.pr-bas .chrono.alerte { color: #FF8A4C; }

/* --- fiche --- */
.fiche-outils { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.fiche-page { background: #fff; border: 1px solid var(--ligne); box-shadow: var(--ombre); margin: 0 auto 1.2rem; padding: 9mm 10mm; display: flex; flex-direction: column; gap: 4mm; page-break-after: always; break-after: page; }
.fiche-page.paysage { width: 210mm; min-height: 148mm; } .fiche-page.portrait { width: 148mm; min-height: 210mm; }
.fiche-entete { display: flex; justify-content: space-between; align-items: flex-start; gap: 6mm; border-bottom: 1.5px solid var(--nuit); padding-bottom: 2.5mm; }
.fiche-entete .titre { font-family: var(--titre); font-weight: 600; font-size: 12pt; color: var(--nuit); line-height: 1.2; }
.fiche-entete .meta { font-size: 8pt; color: var(--gris); }
.fiche-entete img { height: 11mm; max-width: 40mm; object-fit: contain; }
.fiche-bloc { display: grid; gap: 4mm; align-items: start; }
.paysage .fiche-bloc { grid-template-columns: 60mm 1fr; } .portrait .fiche-bloc { grid-template-columns: 44mm 1fr; }
.fiche-bloc .mini { border-radius: 2px; }
.fiche-bloc .num { font-family: var(--titre); font-weight: 600; font-size: 8pt; color: var(--bleu); margin-bottom: 1mm; }
.fiche-bloc .resume { font-size: 9.5pt; line-height: 1.35; margin-bottom: 1.5mm; }
.fiche-bloc .note { font-size: 8.5pt; line-height: 1.3; color: #8A3D00; }
.fiche-bloc textarea { width: 100%; border: 1px dashed #C9D2E0; border-radius: 4px; padding: 1.5mm 2mm; font-size: 9.5pt; line-height: 1.35; resize: none; background: #FBFCFE; font-family: var(--corps); }
.fiche-bloc textarea.note { color: #8A3D00; font-size: 8.5pt; }
.fiche-bloc .prive { font-size: 7.5pt; color: var(--gris); display: flex; align-items: center; gap: 1.5mm; margin-top: .5mm; }
.fiche-pied { margin-top: auto; display: flex; justify-content: space-between; font-size: 7.5pt; color: var(--gris); border-top: 1px solid var(--ligne); padding-top: 1.5mm; }
@media print {
  @page { size: A5 portrait; margin: 0; }
  body.fiche-paysage @page { size: A5 landscape; }
  body { background: #fff; } .entete, .pied, .fiche-outils, .sans-impression { display: none !important; }
  .page { max-width: none; padding: 0; margin: 0; }
  .fiche-page { border: 0; box-shadow: none; margin: 0; width: 100%; height: 100vh; min-height: 0; }
  .fiche-bloc textarea { border: 0; background: transparent; padding: 0; }
  .fiche-bloc .prive input { display: none; }
}

/* --- notifications --- */
#sm-toasts { position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: .5rem; z-index: 100; }
.toast { background: var(--nuit); color: #fff; padding: .6rem 1rem; border-radius: 8px; font-size: .9rem; opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; box-shadow: var(--ombre); }
.toast.visible { opacity: 1; transform: none; } .toast.erreur { background: var(--rouge-orange); }