/* Eolia Studio — salle de montage : fond sombre, accent ambre de projecteur. */
:root {
  --fond: #0f1014; --panneau: #17191f; --panneau-2: #1e2129; --trait: #2a2e38;
  --texte: #ece6da; --doux: #9a9aa3; --ambre: #f0b34a; --ambre-fonce: #b9812a;
  --rouge: #e5695b; --vert: #6fcf97;
  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--fond); color: var(--texte); font: 15px/1.5 var(--sans); }
a { color: var(--ambre); }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: 1.7rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1rem; } h4 { font-size: .98rem; margin-top: .8em; }
em { font-style: italic; color: var(--ambre); }
code, pre { font-family: ui-monospace, Consolas, monospace; font-size: .86em; }
[hidden] { display: none !important; }

.btn { display: inline-block; padding: .5em 1em; border: 1px solid var(--trait); border-radius: 6px; background: var(--panneau-2);
  color: var(--texte); font: inherit; cursor: pointer; text-decoration: none; }
.btn:hover { border-color: var(--ambre-fonce); }
.btn:focus-visible, .lien:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--ambre); outline-offset: 2px; }
.btn.primaire { background: var(--ambre); border-color: var(--ambre); color: #1a1408; font-weight: 600; }
.btn.primaire:hover { background: #f6c469; }
.btn.discret { background: none; color: var(--doux); }
.btn:disabled { opacity: .5; cursor: wait; }
.lien { background: none; border: 0; padding: 0; color: var(--ambre); font: inherit; cursor: pointer; text-decoration: underline; }
.lien-discret { color: var(--doux); text-decoration: none; font-size: .9em; }
.note, .aide { color: var(--doux); font-size: .88em; font-weight: 400; font-family: var(--sans); }
.erreur, .echec { color: var(--rouge); font-size: .9em; }
.alerte { border: 1px solid var(--rouge); border-radius: 8px; padding: .8em 1em; }
.vide, .attente { color: var(--doux); font-style: italic; }

input, select, textarea { width: 100%; padding: .55em .7em; border: 1px solid var(--trait); border-radius: 6px;
  background: var(--fond); color: var(--texte); font: inherit; }
textarea { resize: vertical; }
label { display: block; font-size: .88em; color: var(--doux); }
label > input, label > select, label > textarea { margin-top: .3em; color: var(--texte); font-size: 1rem; }

/* Barre */
.barre { display: flex; align-items: center; gap: 1.2em; padding: .7em 1.2em; border-bottom: 1px solid var(--trait); background: var(--panneau); }
.marque { font-family: var(--serif); font-size: 1.25rem; color: var(--texte); text-decoration: none; white-space: nowrap; }
.fil { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--doux); }
.fil a { color: var(--doux); } .fil strong { color: var(--texte); }
.etiquette { margin-left: .8em; font-size: .82em; }
.station { margin-left: auto; font-size: .85em; color: var(--doux); white-space: nowrap; }
.station::before { content: ""; display: inline-block; width: .6em; height: .6em; border-radius: 50%; background: var(--rouge); margin-right: .5em; }
.station.en-ligne::before { background: var(--vert); }
.fil + .station { margin-left: 0; }

/* Connexion */
.page-login { display: grid; place-items: center; background: radial-gradient(ellipse at 50% 0%, #2a2114 0%, var(--fond) 60%); }
.login { width: min(92vw, 380px); padding: 2.2em 2em; background: var(--panneau); border: 1px solid var(--trait); border-radius: 12px; text-align: center; }
.login h1 { font-size: 2.1rem; margin-bottom: .1em; }
.sous-titre { color: var(--doux); margin: 0 0 1.6em; }
.login form { text-align: left; display: grid; gap: .7em; }
.login .btn { margin-top: .4em; }
.clap { display: flex; height: 14px; margin: 0 auto 1.4em; width: 120px; border-radius: 3px; overflow: hidden; transform: rotate(-4deg); }
.clap span { flex: 1; background: var(--texte); } .clap span:nth-child(even) { background: #1a1408; }

/* Accueil */
.accueil { max-width: 1100px; margin: 0 auto; padding: 1.6em 1.2em 4em; display: grid; gap: 2.2em; }
.nouveau { background: var(--panneau); border: 1px solid var(--trait); border-radius: 12px; padding: 1.4em; }
.champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .9em 1em; margin-bottom: .6em; }
.champs .large { grid-column: 1 / -1; }
.projets { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1em; }
.carte { display: block; background: var(--panneau); border: 1px solid var(--trait); border-radius: 10px; overflow: hidden; color: inherit; text-decoration: none; }
.carte:hover { border-color: var(--ambre-fonce); }
.carte h3, .carte p { margin: .5em .8em 0; } .carte p:last-child { margin-bottom: .8em; }
.vignette { position: relative; aspect-ratio: 16 / 9; background: #0a0a0d repeating-linear-gradient(135deg, transparent 0 14px, #ffffff06 14px 28px); }
.vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pastille { position: absolute; left: .5em; bottom: .5em; padding: .15em .6em; border-radius: 99px; background: #000c; color: var(--ambre); font-size: .78em; }

/* Atelier : discussion à gauche, table de montage à droite */
.atelier { display: grid; grid-template-columns: minmax(340px, 5fr) 7fr; height: calc(100vh - 53px); }
.discussion { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--trait); background: var(--panneau); }
.messages { flex: 1; overflow-y: auto; padding: 1em; display: flex; flex-direction: column; gap: .9em; }
.message { max-width: 94%; padding: .7em .9em; border-radius: 10px; background: var(--panneau-2); border: 1px solid var(--trait); }
.message.auteur { align-self: flex-end; background: #2a2416; border-color: #4a3c1c; }
.message.en-erreur { border-color: var(--rouge); }
.message header { font-size: .76em; color: var(--doux); margin-bottom: .3em; }
.message p { margin: 0 0 .55em; } .message p:last-child { margin-bottom: 0; }
.message ul { margin: 0 0 .55em; padding-left: 1.2em; }
.message .brut { white-space: pre-wrap; }
.message .corps { overflow-wrap: anywhere; }
.avancement { padding: .6em 1em; border-top: 1px solid var(--trait); font-size: .88em; color: var(--ambre); }
.jauge { height: 4px; margin-top: .4em; background: var(--trait); border-radius: 2px; overflow: hidden; }
.jauge div { height: 100%; width: 0; background: var(--ambre); transition: width .4s; }
.indetermine .jauge div { width: 30% !important; animation: va 1.4s ease-in-out infinite alternate; }
@keyframes va { from { margin-left: 0; } to { margin-left: 70%; } }
@media (prefers-reduced-motion: reduce) { .indetermine .jauge div { animation: none; } .jauge div { transition: none; } }
.saisie { display: flex; gap: .6em; padding: .8em 1em; border-top: 1px solid var(--trait); align-items: flex-end; }
.saisie textarea { flex: 1; }

.table { overflow-y: auto; padding: 1.2em 1.4em 3em; display: flex; flex-direction: column; gap: 1.6em; }
.bloc h2 { border-bottom: 1px solid var(--trait); padding-bottom: .35em; }
#film { width: 100%; max-height: 62vh; background: #000; border-radius: 8px; }
.logline { font-family: var(--serif); font-size: 1.08rem; font-style: italic; margin: 0 0 .5em; }
.plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1em; }
.plan, .ref { background: var(--panneau); border: 1px solid var(--trait); border-radius: 10px; overflow: hidden; }
.visuel { position: relative; aspect-ratio: 16 / 9; background: #0a0a0d; display: grid; place-items: center; }
.visuel img, .visuel video { width: 100%; height: 100%; object-fit: contain; display: block; }
.visuel p { margin: 0; padding: .6em; text-align: center; font-size: .85em; }
.legende { padding: .6em .8em .7em; } .legende h3 { margin-bottom: .15em; } .legende p { margin: 0 0 .3em; }
.outils { display: flex; gap: 1em; font-size: .88em; }
.cliquable { cursor: zoom-in; }
.refs { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1em; }
.ref img { width: 100%; display: block; aspect-ratio: 3 / 4; object-fit: cover; }
.ref.decor img { aspect-ratio: 16 / 9; }
.ref h3, .ref p { margin: .5em .7em 0; } .ref p:last-child { margin-bottom: .7em; }
.ref .description { font-size: .82em; color: var(--doux); }
.prompt, .fiche pre { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--fond); border: 1px solid var(--trait); border-radius: 8px; padding: .8em; margin: 0 0 .8em; }
#musique-lecteur { width: 100%; margin-top: .4em; }
.pied { margin-top: auto; text-align: right; }

dialog { border: 1px solid var(--trait); border-radius: 10px; background: var(--panneau); color: var(--texte); padding: 1em; max-width: min(94vw, 1200px); }
dialog::backdrop { background: #000c; }
dialog img { max-width: 100%; max-height: 82vh; display: block; }
dialog .fermer { position: absolute; top: .3em; right: .5em; background: none; border: 0; color: var(--texte); font-size: 1.6rem; cursor: pointer; }
.fiche { max-width: 760px; padding-top: 1em; }

@media (max-width: 860px) {
  .atelier { grid-template-columns: 1fr; height: auto; }
  .discussion { border-right: 0; border-bottom: 1px solid var(--trait); height: 70vh; }
  .barre { flex-wrap: wrap; gap: .5em 1em; }
  .etiquette { display: none; }
}