:root{
  --fond:#f6f3f0; --carte:#ffffff; --texte:#1f1a17; --doux:#6b625c; --bord:#e7e0da;
  --accent:#ff6b00; --accent-fonce:#d85a00; --rouge:#e11d48; --vert:#0f8a4b; --sombre:#1d1712;
  --rayon:12px; --ombre:0 2px 10px rgba(0,0,0,.06);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--fond);color:var(--texte);font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--accent-fonce)}
[hidden]{display:none!important}
h1{font-size:22px;margin:4px 0 14px}
h2{font-size:17px;margin:18px 0 8px}
h3{font-size:15px;margin:12px 0 6px}
.logo-texte{font-weight:800;font-size:28px;color:var(--sombre);text-decoration:none;letter-spacing:-.5px}
.logo-texte span{color:var(--accent)}
.logo-texte.petit{font-size:19px}

/* connexion */
.ecran-connexion{min-height:100vh;display:grid;place-items:center;padding:16px;background:linear-gradient(160deg,#1d1712,#3a2416 60%,#ff6b00)}
.boite-connexion{background:#fff;border-radius:16px;padding:26px 22px;width:100%;max-width:360px;display:grid;gap:12px;box-shadow:0 10px 40px rgba(0,0,0,.3)}

/* en-tête */
.entete{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--bord);display:flex;align-items:center;gap:16px;padding:8px 16px;flex-wrap:wrap}
#menu{display:flex;gap:4px;flex-wrap:wrap}
#menu a{padding:7px 10px;border-radius:9px;text-decoration:none;color:var(--texte);font-weight:600;font-size:14px}
#menu a.actif{background:var(--sombre);color:#fff}
main{padding:16px;max-width:1400px;margin:0 auto}

/* éléments communs */
.btn{border:1px solid var(--bord);background:#fff;border-radius:10px;padding:8px 13px;font:inherit;font-weight:600;cursor:pointer;color:var(--texte);display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.btn:hover{border-color:#cfc6be}
.btn.principal{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.principal:hover{background:var(--accent-fonce)}
.btn.sombre{background:var(--sombre);border-color:var(--sombre);color:#fff}
.btn.danger{color:var(--rouge)}
.btn.petit{padding:4px 9px;font-size:13px}
.btn:disabled{opacity:.5;cursor:default}
input[type=text],input[type=password],input[type=number],input[type=date],input[type=time],input[type=search],select,textarea{
  width:100%;border:1px solid var(--bord);border-radius:9px;padding:8px 10px;font:inherit;background:#fff;color:var(--texte)}
textarea{resize:vertical}
input[type=color]{width:44px;height:34px;border:1px solid var(--bord);border-radius:8px;padding:2px;background:#fff}
input[type=range]{width:100%}
label{font-size:13px;font-weight:600;color:var(--doux);display:block;margin:8px 0 3px}
.ligne{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ligne>*{flex:1 1 120px}
.ligne>.fixe{flex:0 0 auto}
.ligne>*{min-width:0}
.panneau,.panneau .carte{min-width:0;overflow-x:hidden}
.pub .actions{display:flex;flex-direction:column;gap:6px}
.pub .actions>*{flex:0 0 auto}
.carte{background:var(--carte);border:1px solid var(--bord);border-radius:var(--rayon);padding:14px;box-shadow:var(--ombre)}
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.grille.medias{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.vignette{position:relative;border-radius:10px;overflow:hidden;background:#eee;aspect-ratio:1;cursor:pointer;border:2px solid transparent}
.vignette img{width:100%;height:100%;object-fit:cover;display:block}
.vignette .type{position:absolute;left:5px;top:5px;background:rgba(0,0,0,.65);color:#fff;font-size:11px;border-radius:6px;padding:1px 6px}
.vignette .suppr{position:absolute;right:4px;top:4px;background:rgba(255,255,255,.9);border:0;border-radius:6px;cursor:pointer;font-size:13px}
.vignette.choisi{border-color:var(--accent)}
.vignette .nom{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(0,0,0,.7));color:#fff;font-size:11px;padding:10px 6px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doux{color:var(--doux);font-size:13px}
.erreur{color:var(--rouge);font-weight:600}
.ok{color:var(--vert);font-weight:600}
.pastille{display:inline-block;border-radius:20px;padding:2px 9px;font-size:12px;font-weight:700;background:#eee}
.pastille.vert{background:#dcf5e7;color:#0b6b3a}.pastille.orange{background:#ffe8d6;color:#b44b00}.pastille.rouge{background:#fde2e8;color:#b0103a}.pastille.bleu{background:#e0ecff;color:#1d4fb8}
.onglets{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.onglets button{border:1px solid var(--bord);background:#fff;border-radius:20px;padding:6px 12px;font:inherit;font-weight:600;cursor:pointer}
.onglets button.actif{background:var(--sombre);color:#fff;border-color:var(--sombre)}

/* projets */
.projet{cursor:pointer;padding:0;overflow:hidden}
.projet .image{aspect-ratio:9/12;background:#2a201a center/cover no-repeat;display:grid;place-items:center;color:#fff;font-size:34px}
.projet .infos{padding:10px}
.projet .titre{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* éditeur */
.editeur{display:grid;grid-template-columns:200px minmax(280px,1fr) minmax(0,390px);gap:14px;align-items:start}
.scenes{display:grid;gap:8px;max-height:calc(100vh - 150px);overflow:auto;padding-bottom:6px}
.scene-vignette{position:relative;border:2px solid var(--bord);border-radius:10px;overflow:hidden;cursor:pointer;background:#2a201a}
.scene-vignette img{width:100%;display:block}
.scene-vignette.active{border-color:var(--accent)}
.scene-vignette .num{position:absolute;left:5px;top:5px;background:var(--accent);color:#fff;border-radius:6px;font-size:12px;font-weight:700;padding:0 6px}
.scene-vignette .duree{position:absolute;right:5px;bottom:5px;background:rgba(0,0,0,.7);color:#fff;border-radius:6px;font-size:11px;padding:0 5px}
.centre{position:sticky;top:64px;display:grid;gap:10px;justify-items:center}
.ecran{position:relative;background:#111;border-radius:14px;overflow:hidden;box-shadow:0 6px 30px rgba(0,0,0,.25);touch-action:none;user-select:none;max-width:100%}
.ecran img{display:block;width:100%;height:auto;pointer-events:none}
.ecran .chargement{position:absolute;right:8px;top:8px;background:rgba(0,0,0,.6);color:#fff;font-size:12px;border-radius:8px;padding:2px 8px}
.ecran .repere{position:absolute;border:2px dashed #fff;border-radius:6px;pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.5)}
.panneau{display:grid;gap:12px;max-height:calc(100vh - 150px);overflow:auto;padding-right:2px}
.element{border:1px solid var(--bord);border-radius:10px;padding:8px 10px;background:#fff}
.element.actif{border-color:var(--accent);box-shadow:0 0 0 2px #ffe3cc}
.element-tete{display:flex;align-items:center;gap:6px;cursor:pointer;font-weight:600}
.element-tete .nom{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.miniature-media{width:64px;height:64px;border-radius:8px;object-fit:cover;background:#eee;border:1px solid var(--bord)}
.barre-outils{display:flex;gap:8px;flex-wrap:wrap;align-items:center;width:100%}
.barre-outils .titre-projet{flex:1 1 220px;font-weight:700;font-size:17px}
.apercu-police{font-size:20px}

/* vidéos / calendrier */
.video-carte video{width:100%;border-radius:10px;background:#000;max-height:420px}
.liste-pub{display:grid;gap:10px}
.pub{display:grid;grid-template-columns:110px 1fr auto;gap:12px;align-items:start}
.pub video{width:110px;border-radius:8px;background:#000}
.jour{font-weight:800;margin:16px 0 6px;color:var(--doux);text-transform:capitalize}
.reseau-choix{display:flex;gap:8px;flex-wrap:wrap}
.reseau-choix label{display:flex;gap:6px;align-items:center;border:1px solid var(--bord);border-radius:10px;padding:6px 10px;margin:0;color:var(--texte);cursor:pointer;background:#fff}

/* fenêtre */
.fenetre{position:fixed;inset:0;background:rgba(20,14,10,.55);z-index:50;display:grid;place-items:center;padding:12px}
.fenetre-boite{position:relative;background:#fff;border-radius:16px;width:min(980px,100%);max-height:92vh;overflow:auto;padding:18px}
.fenetre-x{position:absolute;right:10px;top:8px;border:0;background:none;font-size:28px;cursor:pointer;line-height:1}
.bulle{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--sombre);color:#fff;padding:10px 16px;border-radius:12px;z-index:60;box-shadow:0 6px 24px rgba(0,0,0,.3);max-width:92vw}

/* téléphone */
@media (max-width:1100px){
  .editeur{grid-template-columns:1fr}
  .scenes{display:flex;overflow-x:auto;max-height:none}
  .scene-vignette{flex:0 0 92px}
  .centre{position:static}
  .panneau{max-height:none}
}
@media (max-width:640px){
  main{padding:10px}
  #menu a{padding:6px 7px;font-size:13px}
  .pub{grid-template-columns:80px 1fr}
  .pub video{width:80px}
  .pub>.actions{grid-column:1/-1}
}