@font-face { font-family: Inter; src: url(moteur/fonts/inter-latin-wght.woff2) format('woff2'); font-weight: 100 900; font-display: block; }
:root {
  --nuit: #070C1A; --marine: #0B1530; --marine2: #101D3F; --bord: #22305A; --or: #F5B83D; --or-clair: #FFE08A;
  --rouge: #FF5A5F; --vert: #2FD28A; --texte: #E8ECF4; --doux: #9FB0D0;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--nuit); color: var(--texte); font: 14px/1.35 Inter, "Segoe UI", system-ui, sans-serif; display: grid; grid-template-rows: auto auto 1fr auto; grid-template-columns: minmax(0, 1fr); overflow: hidden; }
button, input, select { font: inherit; color: inherit; }
button { background: var(--marine2); border: 1px solid var(--bord); border-radius: 10px; padding: 7px 12px; cursor: pointer; }
button:hover { border-color: var(--or); }
button.primaire { background: var(--or); color: var(--marine); border-color: var(--or); font-weight: 800; }
input, select { background: var(--marine); border: 1px solid var(--bord); border-radius: 8px; padding: 6px 9px; }
input:focus, select:focus, button:focus-visible { outline: 2px solid var(--or); outline-offset: 1px; }

/* ---------- barre du haut ---------- */
.barre { display: flex; align-items: center; gap: 16px; padding: 10px 16px; background: var(--marine); border-bottom: 1px solid var(--bord); flex-wrap: wrap; }
.marque { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.logo { font-weight: 900; font-size: 20px; letter-spacing: -.5px; } .logo b { color: var(--or); }
.produit { font-weight: 700; color: var(--doux); }
.beta { font-size: 11px; color: var(--marine); background: var(--or-clair); border-radius: 6px; padding: 1px 6px; font-weight: 800; }
.titres { display: flex; gap: 8px; flex: 1; min-width: 260px; }
.titres input { flex: 1; min-width: 0; } #titre { font-weight: 800; }
.actions { display: flex; gap: 8px; position: relative; }
.menu { position: absolute; right: 0; top: calc(100% + 6px); background: var(--marine); border: 1px solid var(--bord); border-radius: 12px; padding: 6px; display: flex; flex-direction: column; gap: 4px; z-index: 20; min-width: 260px; box-shadow: 0 12px 40px rgba(0,0,0,.5); }
.menu[hidden] { display: none; }
.menu button { text-align: left; border: 0; background: transparent; } .menu button:hover { background: var(--marine2); }

.onglets { display: none; }

/* ---------- espace de travail ---------- */
.espace { --l-apercu: 400px; display: grid; grid-template-columns: 86px minmax(0, 1fr) 10px var(--l-apercu); min-height: 0; }
/* poignée entre la création et l'animation */
.separateur { cursor: col-resize; background: var(--marine); border-left: 1px solid var(--bord); border-right: 1px solid var(--bord); display: grid; place-items: center; touch-action: none; }
.separateur span { width: 4px; height: 48px; border-radius: 2px; background: var(--bord); }
.separateur:hover span, .separateur.actif span { background: var(--or); }
body.redim { cursor: col-resize; user-select: none; }
/* palette du matériel */
.palette { position: fixed; z-index: 30; background: var(--marine); border: 1px solid var(--or); border-radius: 14px; padding: 10px; width: 360px; max-height: calc(100vh - 24px); overflow-y: auto; box-shadow: 0 14px 40px rgba(0,0,0,.6); display: flex; flex-direction: column; gap: 6px; }
.palette[hidden] { display: none; }
.palette h4 { margin: 4px 2px 0; font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--doux); }
.palette .grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.palette button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; font-size: 11.5px; }
.palette button i { font-style: normal; font-size: 18px; color: var(--or-clair); }
.palette button.actif { border-color: var(--or); background: #1A2850; }
/* plein écran de l'animation : la page elle-même (marche partout), plus le vrai plein écran quand le navigateur l'autorise */
.commandes-plein { display: none; }
body.plein .espace .apercu { display: flex !important; }
body.plein .cadre { position: fixed; inset: 0; z-index: 50; background: #000; align-items: center; justify-content: center; }
body.plein #rendu { height: 100vh !important; width: auto !important; max-width: 100vw; border-radius: 0; align-self: center !important; }
body.plein .apercu[data-format="16:9"] #rendu { width: 100vw !important; height: auto !important; max-height: 100vh; }
body.plein .commandes-plein { display: flex; position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 51; gap: 10px; align-items: center; background: rgba(11,21,48,.85); border: 1px solid var(--bord); border-radius: 30px; padding: 6px 10px; width: min(560px, calc(100vw - 32px)); opacity: .25; transition: opacity .2s; }
body.plein .commandes-plein:hover, body.plein .commandes-plein:focus-within { opacity: 1; }
.commandes-plein input { flex: 1; accent-color: var(--or); padding: 0; border: 0; background: none; }
.commandes-plein .rond { width: 36px; height: 36px; }
.outils { display: flex; flex-direction: column; gap: 4px; padding: 8px 6px; background: var(--marine); border-right: 1px solid var(--bord); overflow-y: auto; }
.outils button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; font-size: 11px; border-color: transparent; background: transparent; }
.outils button.actif { background: var(--marine2); border-color: var(--or); }
.outils i { font-style: normal; font-size: 18px; height: 22px; display: grid; place-items: center; }
.outils hr { width: 100%; border: 0; border-top: 1px solid var(--bord); margin: 4px 0; }
.pastille { width: 20px; height: 20px !important; border-radius: 50%; font-size: 11px !important; font-weight: 900; color: var(--marine); }
.pastille.or { background: var(--or); } .pastille.orclair { background: var(--or-clair); } .pastille.rouge { background: var(--rouge); color: #fff; } .pastille.orange { background: #FF8F5A; color: #fff; }
.plot { width: 0 !important; height: 0 !important; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 16px solid #FF9A3D; }

.plan { display: grid; grid-template-columns: minmax(0, 1fr) 250px; min-width: 0; min-height: 0; }
.zone-plan { position: relative; min-width: 0; min-height: 0; }
#plan { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; display: block; }
.agrandir { position: absolute; right: 10px; top: 10px; z-index: 2; font-size: 12.5px; padding: 6px 10px; background: rgba(11,21,48,.9); }
.avis { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 3; background: var(--or-clair); color: var(--marine); font-weight: 700; border-radius: 10px; padding: 8px 14px; font-size: 13px; max-width: calc(100% - 24px); box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.avis[hidden] { display: none; }

/* panneau à droite du terrain : réglages de la sélection, sinon explications */
.inspecteur { background: var(--marine); border-left: 1px solid var(--bord); padding: 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.inspecteur h3 { margin: 0; font-size: 14px; color: var(--or); }
.inspecteur h4 { margin: 4px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--doux); }
.inspecteur p { margin: 0; color: var(--texte); } .inspecteur p.doux { color: var(--doux); font-size: 12.5px; }
.inspecteur ol { margin: 0; padding-left: 18px; } .inspecteur li { margin: 3px 0; }
.inspecteur label { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; }
.inspecteur input:not([type=checkbox]), .inspecteur select { width: 120px; }
.inspecteur .ligne { display: flex; gap: 6px; flex-wrap: wrap; } .inspecteur .ligne button { flex: 1; font-size: 12px; padding: 6px; }
.conseil { background: #1A2850; border: 1px solid var(--or); border-radius: 10px; padding: 9px 10px; }
.conseil b { color: var(--or); }
.carte-sel { border: 1px solid var(--or); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
button.danger:hover { border-color: var(--rouge); color: var(--rouge); }
.porte { width: 22px !important; height: 14px !important; position: relative; border-bottom: 2px dashed #fff; }
.porte::before, .porte::after { content: ''; position: absolute; bottom: -3px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 10px solid #FF9A3D; }
.porte::before { left: -4px; } .porte::after { right: -4px; }

/* terrain agrandi : l'aperçu est masqué */
.espace.agrandi { grid-template-columns: 86px minmax(0, 1fr); } .espace.agrandi .apercu, .espace.agrandi .separateur { display: none; }

.apercu { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-left: 1px solid var(--bord); background: #050913; min-height: 0; }
.cadre { position: relative; flex: 1; min-height: 0; display: flex; justify-content: center; }
#rendu { height: 100%; max-width: 100%; object-fit: contain; border-radius: 10px; background: #000; display: block; }
.apercu { min-width: 0; }
.apercu[data-format="16:9"] #rendu { height: auto; width: 100%; align-self: flex-start; }
.enreg { position: absolute; inset: 0; background: rgba(5,9,19,.75); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border-radius: 10px; font-weight: 800; }
.enreg[hidden] { display: none; }
.jauge { width: 70%; height: 8px; background: var(--marine2); border-radius: 4px; overflow: hidden; } .jauge b { display: block; height: 100%; width: 0; background: var(--or); }
.enreg small { font-weight: 500; color: var(--doux); }
.transport { display: flex; align-items: center; gap: 10px; }
.rond { width: 42px; height: 42px; border-radius: 50%; background: var(--or); color: var(--marine); border: 0; font-size: 16px; font-weight: 900; flex: none; }
#scrub { flex: 1; accent-color: var(--or); padding: 0; border: 0; background: none; }
#chrono { font-variant-numeric: tabular-nums; color: var(--doux); width: 54px; text-align: right; }
.reglages { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12.5px; color: var(--doux); }
.reglages label { display: flex; align-items: center; gap: 5px; }
.reglages select { padding: 3px 6px; font-size: 12.5px; }
.case input { accent-color: var(--or); }

/* ---------- frise des temps ---------- */
/* --k : grossissement de la barre des temps (1 = taille d'origine), réglé par la poignée */
.temps { --k: 1; background: var(--marine); border-top: 1px solid var(--bord); padding: 0 12px 10px; display: flex; flex-direction: column; gap: 8px; }
.temps.reglee { height: var(--h-temps); overflow: hidden; }
.temps.compacte .proprietes { display: none; }
.temps.compacte .frise { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; }
.poignee-temps { height: 12px; margin: 0 -12px; cursor: row-resize; display: grid; place-items: center; touch-action: none; flex: none; }
.poignee-temps span { width: 56px; height: 4px; border-radius: 2px; background: var(--bord); }
.poignee-temps:hover span, .poignee-temps.actif span { background: var(--or); }
body.redim-h { cursor: row-resize; user-select: none; }
.frise { display: flex; gap: calc(6px * var(--k)); overflow-x: auto; padding-bottom: 2px; align-items: center; }
.temps.reglee .frise { flex: 1; min-height: 0; flex-wrap: wrap; overflow-x: hidden; overflow-y: auto; align-content: flex-start; }
.frise .t { flex: none; border-radius: calc(10px * var(--k)); padding: calc(6px * var(--k)) calc(12px * var(--k)); display: flex; flex-direction: column; align-items: flex-start; min-width: calc(92px * var(--k)); background: var(--marine2); }
.frise .t b { font-size: calc(13px * var(--k)); } .frise .t small { color: var(--doux); font-size: calc(11px * var(--k)); max-width: calc(150px * var(--k)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frise .outil { font-size: calc(14px * min(var(--k), 1.4)); }
/* onglets des déroulements : principal et variantes « Et si… » */
.frise .lignes { display: flex; gap: 4px; flex: none; padding-right: 8px; margin-right: 4px; border-right: 1px solid var(--bord); align-self: stretch; align-items: center; }
.frise .lignes button { padding: calc(5px * var(--k)) calc(10px * var(--k)); font-size: calc(12.5px * var(--k)); border-radius: 20px; background: transparent; }
.frise .lignes button.actif { background: var(--or); color: var(--marine); border-color: var(--or); font-weight: 800; }
.frise .lignes button.var:not(.actif) { border-color: #3B5BA0; color: #BFD0F5; }
.frise .lignes .nouv { border-style: dashed; color: var(--or-clair); }
.frise .t.commun { opacity: .55; border-style: dashed; }
.frise .t i { font-style: normal; font-weight: 600; font-size: .78em; color: var(--doux); margin-left: 4px; }
.frise .nom-variante { width: calc(150px * var(--k)); flex: none; font-weight: 700; color: #BFD0F5; }
.frise .t.actif { border-color: var(--or); background: #1A2850; }
.frise .t.joue { box-shadow: inset 0 -3px 0 var(--or); }
.frise .outil { flex: none; padding: 8px 10px; }
.proprietes { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--doux); }
.proprietes label { display: flex; align-items: center; gap: 6px; }
.proprietes .texte { flex: 1; min-width: 260px; } .proprietes .texte input { flex: 1; color: var(--texte); }
.duree input { accent-color: var(--or); width: 120px; padding: 0; border: 0; background: none; } .duree output { width: 40px; color: var(--texte); }
.proprietes.depart .duree { visibility: hidden; }
.alertes { color: #FFB4B6; font-size: 12px; width: 100%; } .alertes:empty { display: none; }

/* ---------- boîtes de dialogue ---------- */
dialog { background: var(--marine); color: var(--texte); border: 1px solid var(--bord); border-radius: 16px; padding: 20px; width: min(560px, calc(100vw - 32px)); max-height: 85vh; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
dialog::backdrop { background: rgba(0,0,0,.6); }
dialog h2 { margin: 0 0 12px; font-size: 18px; }
dialog .liste { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
dialog .item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--marine2); border: 1px solid var(--bord); border-radius: 10px; }
dialog .item .nom { flex: 1; } dialog .item small { color: var(--doux); display: block; }
dialog .item.courant { border-color: var(--or); }
dialog .choix { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
dialog .choix button { text-align: left; padding: 12px; } dialog .choix button small { display: block; color: var(--doux); margin-top: 3px; }
dialog .pied { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
dialog ol { padding-left: 20px; } dialog li { margin: 6px 0; } dialog p { color: var(--doux); }
dialog .rangee { display: flex; gap: 10px; align-items: center; margin: 8px 0; } dialog .rangee select { flex: 1; }
dialog .rangee[hidden] { display: none; } dialog .rangee input[type=number] { width: 72px; } dialog .rangee > label:first-child { min-width: 62px; }

/* ---------- bibliothèque J_Educs et communauté ---------- */
.biblio-je { border-color: var(--or); color: var(--or-clair); }
.communaute { padding: 4px 10px; font-size: 12.5px; border-radius: 20px; margin-left: 4px; }
.bj-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.bj-carte { background: var(--marine2); border: 1px solid var(--bord); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.bj-carte p { margin: 0; color: var(--doux); font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bj-carte small { color: var(--doux); }
.bj-carte button { margin-top: auto; align-self: flex-start; }
.bj-tete { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.bj-tag { background: var(--or); color: var(--marine); font-weight: 800; font-size: 11px; border-radius: 6px; padding: 1px 6px; white-space: nowrap; }

/* ---------- séances ---------- */
dialog:has(.seance-ed) { width: min(880px, calc(100vw - 32px)); }
.seance-ed p { margin: 0 0 10px; }
.seance-ed .doux { color: var(--doux); }
.s-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.s-grille label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--doux); }
.s-grille label.large { grid-column: 1 / -1; }
.s-grille input, .s-grille textarea, .s-item textarea { color: var(--texte); font: inherit; background: var(--marine2); border: 1px solid var(--bord); border-radius: 8px; padding: 7px 9px; resize: vertical; }
.s-titre { margin: 16px 0 8px; font-size: 15px; } .s-titre span { color: var(--or); }
.s-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 42vh; overflow-y: auto; }
.s-item { display: flex; align-items: center; gap: 8px; background: var(--marine2); border: 1px solid var(--bord); border-radius: 10px; padding: 8px 10px; }
.s-item.libre { border-style: dashed; }
.s-num { font-weight: 900; color: var(--or); width: 20px; text-align: center; flex: none; }
.s-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .s-corps small { color: var(--doux); }
.s-corps .s-nom { font-weight: 700; }
.s-dur { width: 96px; flex: none; text-align: center; }
.s-fl { display: flex; gap: 4px; flex: none; } .s-fl button { padding: 5px 8px; }
.s-ajout { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .s-ajout select { flex: 1; min-width: 180px; }
.seance-ed .pied { flex-wrap: wrap; } .seance-ed .pied #sSuppr { margin-right: auto; }

/* ---------- fiche de l'atelier ---------- */
.fiche { position: fixed; inset: 0; z-index: 60; background: #2A3142; display: flex; flex-direction: column; }
.fiche[hidden] { display: none; }
.fiche-barre { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 16px; background: var(--marine); border-bottom: 1px solid var(--bord); }
.fiche-aide { color: var(--doux); font-size: 12.5px; flex: 1; min-width: 200px; }
.fiche-barre .case { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--doux); }
.fiche-zone { flex: 1; overflow: auto; padding: 20px 16px 40px; }
.fiche-zone .page { margin: 0 auto; box-shadow: 0 8px 40px rgba(0,0,0,.45); }
.fiche-zone .page + .page { margin-top: 24px; }
.fiche-zone .f-champ:hover, .fiche-zone [contenteditable]:focus { background: #FFF8E6; border-radius: 4px; }

/* impression : seule la page de la fiche sort */
@page { size: A4; margin: 10mm; }
@media print {
  body.impression .page { width: auto; min-height: 0; padding: 0; }
  body.impression { display: block; overflow: visible; background: #fff; height: auto; }
  body.impression > *:not(.fiche) { display: none !important; }
  body.impression .fiche { position: static; display: block !important; background: #fff; }
  body.impression .fiche-barre { display: none; }
  body.impression .fiche-zone { padding: 0; overflow: visible; }
  body.impression .fiche-zone .page { box-shadow: none; margin: 0; }
  body.impression .f-champ:empty::before { content: none; }
}

/* ---------- tablette portrait et téléphone ---------- */
@media (max-width: 900px) {
  .onglets { display: flex; gap: 6px; padding: 6px 16px; background: var(--marine); }
  .onglets button { flex: 1; } .onglets button.actif { border-color: var(--or); background: #1A2850; }
  .espace { grid-template-columns: 64px minmax(0, 1fr); }
  .espace[data-vue="plan"] .apercu { display: none; }
  .espace[data-vue="apercu"] { grid-template-columns: 1fr; }
  .espace[data-vue="apercu"] .outils, .espace[data-vue="apercu"] .plan { display: none; }
  .separateur { display: none; }
  .apercu[data-format] { width: auto; border-left: 0; }
  .outils button span { display: none; } .outils button { padding: 8px 2px; }
  .barre { gap: 8px; padding: 8px 12px; } .produit, .beta { display: none; }
  .marque { flex: 1; } .titres { order: 3; flex: 1 1 100%; min-width: 0; }
  .actions button:not(.primaire):not(#btMenu) { padding: 7px 9px; }
  /* petit écran : le panneau ne s'affiche que pour régler la sélection, en bas du terrain */
  .plan { grid-template-columns: minmax(0, 1fr); position: relative; }
  .inspecteur { position: absolute; left: 0; right: 0; bottom: 0; max-height: 45%; border-left: 0; border-top: 1px solid var(--or); z-index: 4; }
  .plan:not(.avec-sel) .inspecteur { display: none; }
  .agrandir { display: none; }
}