@font-face { font-family: 'Geist'; src:url('/Geist.ttf') format('truetype-variations'),url('/Geist.ttf') format('truetype');
               font-weight:100 900; font-style:normal; font-display:swap; }
  * { margin:0; padding:0; box-sizing:border-box; }
  :root {
    --bg: var(--wc-bg); --text: var(--wc-text); --accent: var(--wc-accent);
    --card-bg: var(--wc-card-bg); --card-border:rgba(255,255,255,0.1);
    --sep:rgba(255,255,255,0.08); --text-secondary: var(--wc-text-secondary); --text-tertiary: var(--wc-text-tertiary);
    --input-bg:rgba(10,18,40,0.8); --input-border:rgba(var(--wc-bleu-vif-rgb),0.2); --danger:var(--wc-rouge-vif);
  }
  html,body { background:var(--bg); color:var(--text); font-family:var(--wc-police);
              min-height:100vh; -webkit-font-smoothing:antialiased; letter-spacing:-0.012em; }
  .bg-glow { position:fixed; inset:0; z-index:0; pointer-events:none;
    background:radial-gradient(ellipse 80% 50% at 50% -10%,rgba(var(--wc-accent-rgb),0.10) 0%,transparent 60%); }
  header { position:relative; z-index:2; display:grid; grid-template-columns:1fr auto 1fr;
           align-items:center; gap:16px; padding:16px 22px; border-bottom:1px solid var(--sep); }
  header .titre { font-size:15px; font-weight:600; }
  header img { height:22px; justify-self:end; }
  .lien-retour { color:var(--text-secondary); text-decoration:none; font-size:13px; white-space:nowrap; }
  .lien-retour:hover { color:var(--accent); }
  main { position:relative; z-index:1; max-width:1000px; margin:0 auto; padding:20px 22px 60px; }

  .carte { background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--wc-r-l);
           padding:16px; margin-bottom:14px; }
  h2 { font-size: var(--wc-surtitre-taille); text-transform: var(--wc-surtitre-casse); letter-spacing: var(--wc-surtitre-espacement); color: var(--wc-surtitre-couleur);
       font-weight: var(--wc-surtitre-graisse); margin-bottom:12px; }
  label { display:block; font-size: var(--wc-etiquette-taille); text-transform: var(--wc-etiquette-casse); letter-spacing: var(--wc-etiquette-espacement);
          color: var(--wc-etiquette-couleur); font-weight: var(--wc-etiquette-graisse); margin-bottom:5px; }
  input[type=text], input[type=url], input[type=number], select {
    width:100%; background:var(--input-bg); border:1px solid var(--input-border); border-radius:var(--wc-r-s);
    padding:8px 11px; color:var(--text); font-family:inherit; font-size:13.5px; }
  input:focus, select:focus { outline:none; border-color:rgba(var(--wc-bleu-vif-rgb),.55); }
  .btn { background:var(--accent); color:#fff; border:none; border-radius:var(--wc-r-s); padding:9px 14px;
         font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; }
  .btn:hover { filter:brightness(1.1); }
  .btn-sec { background:rgba(255,255,255,0.08); color:var(--text); border:1px solid var(--card-border); }
  .btn-dgr { background:rgba(239,68,68,0.14); color:var(--wc-rouge-corail); border:1px solid rgba(239,68,68,0.35); }
  .btn-sm { padding:6px 11px; font-size:12px; }
  .barre { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
  .aide { font-size:11.5px; color:var(--text-tertiary); line-height:1.55; }

  .tete-carte { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
  .tete-carte h2 { margin:0; flex:1; }

  /* Voyant : savoir si une source OBS est chargée, sans aller vérifier en régie. */
  .voyant { display:inline-flex; align-items:center; gap:6px; font-size:11.5px;
            color:var(--text-tertiary); }
  .pastille { width:8px; height:8px; border-radius:50%; background:var(--text-tertiary);
              opacity:.5; }
  .voyant.ok { color:var(--wc-vert-clair); }
  .voyant.ok .pastille { background:#3ba55d; opacity:1;
                         box-shadow:0 0 0 3px rgba(59,165,93,.2); }

  .bascule { display:inline-flex; align-items:center; gap:7px; font-size:11.5px;
             color:var(--text-tertiary); cursor:pointer; user-select:none; }
  .bascule input { width:15px; height:15px; accent-color:var(--accent); cursor:pointer; }

  /* L'aperçu se glisse SOUS les repères : on place les boîtes sur le rendu réel. */
  .scene-hote { position:relative; width:100%; max-width:600px; aspect-ratio:16/9;
                border-radius:var(--wc-r-m); overflow:hidden; }
  #apercu { position:absolute; inset:0; width:100%; height:100%; border:0;
            background:#05070d; display:none; }
  .scene-hote.avec-apercu #apercu { display:block; }
  .scene-hote.avec-apercu .scene-wrap { background-color:transparent; }

  .url-choix { display:grid; grid-template-columns:minmax(0,150px) minmax(0,1fr); gap:8px; }
  @media (max-width:640px){ .url-choix { grid-template-columns:1fr; } }

  .alerte { font-size:11.5px; line-height:1.5; color:var(--wc-ambre); margin-bottom:12px;
            background:rgba(251,191,36,.09); border:1px solid rgba(251,191,36,.28);
            border-radius:var(--wc-r-s); padding:8px 10px; }
  .alerte b { color:#fde68a; }
  .sauve { font-size:11.5px; color:var(--text-tertiary); }
  .sauve.ok { color:var(--wc-vert-clair); }
  .sauve.attente { color:var(--wc-ambre); }
  .sauve.echec { color:var(--wc-rouge-corail); }

  .minut { font-size:10.5px; color:var(--text-tertiary); border:1px solid var(--card-border);
           border-radius:var(--wc-r-s); padding:2px 6px; white-space:nowrap; }

  .calque { background:var(--input-bg); border:1px solid var(--card-border); border-radius:var(--wc-r-m);
            margin-bottom:9px; }
  .calque.drag { opacity:.4; }
  /* ── Régie ────────────────────────────────────────────────────────────
     Grandes cibles, état lisible sans lire : la couleur porte l'information,
     le texte ne fait que la confirmer. */
  .tuiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:10px; }
  .tuile { display:flex; align-items:stretch; border-radius:var(--wc-r-m); overflow:hidden;
           border:1px solid var(--card-border); background:var(--input-bg); transition:.15s; }
  .tuile.on { border-color:#3ba55d; background:rgba(59,165,93,.14); }
  .tuile-b { flex:1; display:flex; flex-direction:column; gap:3px; align-items:flex-start;
             padding:11px 13px; background:none; border:none; cursor:pointer; text-align:left;
             font:inherit; color:var(--text); min-width:0; }
  .tuile-b:hover { background:rgba(255,255,255,.05); }
  .tuile-nom { font-size:14px; font-weight:600; max-width:100%;
               overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .tuile-etat { font-size:11.5px; color:var(--text-tertiary); }
  .tuile.on .tuile-etat { color:var(--wc-vert-clair); }
  .tuile-s { border:none; border-left:1px solid var(--card-border); background:none; cursor:pointer;
             color:var(--text-tertiary); font:600 9.5px/1 inherit; letter-spacing:.04em;
             text-transform:uppercase; padding:0 7px; opacity:.55; transition:.15s; }
  .tuile:hover .tuile-s { opacity:1; }
  .tuile-s:hover { background:rgba(255,255,255,.07); color:var(--text); }
  .tuile button:disabled { opacity:.5; cursor:default; }

  /* ── Calque replié ───────────────────────────────────────────────────── */
  .calque { padding:0; overflow:hidden; }
  .tete { display:flex; align-items:center; gap:10px; padding:11px 13px; cursor:pointer;
          user-select:none; }
  .tete:hover { background:rgba(255,255,255,.03); }
  .tete-nom { flex:1; font-size:13.5px; font-weight:600; min-width:0;
              overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .chevron { color:var(--text-tertiary); font-size:17px; line-height:1;
             transition:transform .18s; }
  .calque.sel .chevron { transform:rotate(90deg); }
  .calque.sel { border-color:var(--accent); }
  .calque.sel .tete { background:rgba(var(--wc-accent-rgb),.10); }
  /* Replié, le corps reste dans le DOM : lire() continue de le lire et aucune
     saisie en cours n'est perdue en refermant la carte. */
  .corps { display:none; padding:2px 13px 13px; }
  .calque.sel .corps { display:block; }

  .sous-t { font-size: var(--wc-surtitre-taille); font-weight: var(--wc-surtitre-graisse); letter-spacing: var(--wc-surtitre-espacement); text-transform: var(--wc-surtitre-casse);
            color: var(--wc-surtitre-couleur); margin:0 0 8px; }
  .grille2 { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:10px;
             margin-bottom:14px; }
  @media (max-width:640px){ .grille2 { grid-template-columns:1fr; } }

  /* ── Carte repliable ─────────────────────────────────────────────────── */
  .pliable summary { cursor:pointer; list-style:none; display:flex; align-items:center; gap:9px; }
  .pliable summary::-webkit-details-marker { display:none; }
  .pliable summary h2 { margin:0; }
  .pliable summary::after { content:'›'; color:var(--text-tertiary); font-size:17px;
                            transition:transform .18s; }
  .pliable[open] summary::after { transform:rotate(90deg); }
  .pli-corps { margin-top:14px; }

  /* Apparition et disparition sont deux réglages symétriques : les présenter dans
     deux blocs identiques rend leur indépendance lisible d'un coup d'œil. */
  .anim { background:rgba(255,255,255,.03); border:1px solid var(--card-border);
          border-radius:var(--wc-r-s); padding:9px 10px; margin-bottom:9px; }
  .anim { display:grid; grid-template-columns:96px minmax(0,1fr); gap:11px; align-items:center; }
  .anim-t { font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
            color:var(--text-tertiary); }
  .anim-c { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 96px; gap:9px; }
  @media (max-width:700px){
    .anim { grid-template-columns:1fr; gap:7px; }
    .anim-c { grid-template-columns:1fr; }
  }
  .f-coul { width:100%; height:36px; padding:2px; background:var(--input-bg);
            border:1px solid var(--card-border); border-radius:var(--wc-r-s); cursor:pointer; }
  .etat { display:inline-flex; align-items:center; gap:5px; font-size:11.5px;
          color:var(--text-tertiary); }
  .etat.on { color:var(--wc-vert-clair); }
  .poignee { cursor:grab; color:var(--text-tertiary); font-size:15px; user-select:none;
             padding:2px 5px; border-radius:var(--wc-r-xs); }
  .poignee:hover { background:rgba(255,255,255,.07); color:var(--text); }
  .grille { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:9px; }
  .coche { display:flex; align-items:center; gap:8px; background:var(--input-bg);
           border:1px solid var(--input-border); border-radius:var(--wc-r-s); padding:8px 10px; font-size:12.5px; }
  .coche input { width:15px; height:15px; accent-color:var(--accent); cursor:pointer; }

  .url-ligne { display:flex; gap:8px; align-items:center; margin-bottom:7px; }
  .url-ligne input { font-family:var(--wc-police-mono); font-size:12px; }
  code { font-family:var(--wc-police-mono); font-size:12px;
         background:rgba(255,255,255,.06); border-radius:var(--wc-r-xs); padding:2px 6px; }
  /* Éditeur visuel : une scène 16/9 où chaque calque est une boîte déplaçable. */
  .scene-wrap { position:absolute; inset:0; background:#05070d;
                border:1px solid var(--card-border); border-radius:var(--wc-r-m); overflow:hidden;
                background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                                 linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
                background-size:6.25% 11.11%; }
  /* Trois états à distinguer d'un coup d'œil : au repos, masqué au départ, et
     sélectionné. Un fond et une bordure pleine sur TOUTES les boîtes faisaient
     passer chaque calque pour le calque sélectionné. Seule la sélection est
     désormais colorée et remplie. */
  .boite { position:absolute; border:1px solid rgba(255,255,255,.30); border-radius:3px;
           background:transparent; cursor:move; overflow:hidden; }
  .boite.off { border-style:dashed; border-color:rgba(255,255,255,.20); }
  .boite.sel { border:2px solid var(--accent); background:rgba(var(--wc-accent-rgb),.16);
               z-index:50 !important; }
  .boite .et { position:absolute; top:2px; left:4px; font-size:10.5px; font-weight:600;
               color:rgba(255,255,255,.55); text-shadow:0 1px 3px #000;
               pointer-events:none; white-space:nowrap; }
  .boite.sel .et { color:#cfe4ff; }
  .poi { position:absolute; right:-5px; bottom:-5px; width:12px; height:12px;
         background:var(--accent); border:1.5px solid var(--wc-bg); border-radius:3px;
         cursor:nwse-resize; display:none; }
  .boite.sel .poi, .boite:hover .poi { display:block; }
  .toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:999;
           background:rgba(20,28,48,.97); border:1px solid var(--card-border); border-radius:var(--wc-r-m);
           padding:10px 16px; font-size:13px; opacity:0; transition:opacity .2s; pointer-events:none; }
  .toast.on { opacity:1; }
  @media (max-width:640px){ header{grid-template-columns:auto 1fr auto;} main{padding:16px 14px 50px;} }

  /* ══ Architecture reprise de Liens & QR ═══════════════════════════════════
     Ajoutee en fin de feuille : aucune regle existante n'est deplacee. Le
     balisage n'a change que sur l'en-tete, qui n'est lu par aucun script. */
  .ent { position:relative; z-index:2; width:100%; max-width:820px; margin:0 auto;
         padding:16px 22px 20px; border-bottom:none; display:block; }
  .ent-haut { display:flex; align-items:center; gap:16px; margin-bottom:16px; }
  .ent-haut .lien-retour { flex:1; display:inline-flex; align-items:center; gap:3px;
                           color:var(--wc-accent); font-size:13px; }
  .ent-haut .i-ret { width:15px; height:15px; }
  .ent-logo { height:21px; opacity:.9; margin-left:auto; justify-self:auto !important; }
  .ent-titre { font-size:32px; font-weight:700; letter-spacing:-.025em; line-height:1.08;
               color:var(--wc-text); }
  .ent-sous { margin-top:5px; font-size:13.5px; color:var(--wc-text-secondary); }

  /* La colonne passe de 1000 a 820 px : la largeur de lecture des autres outils. */
  main { max-width:820px; padding:4px 22px 80px; }

  /* Les intitules ne crient plus. Ils sortent aussi de leur surface : l'intitule
     au-dessus, la carte en dessous, comme une liste de Reglages. */
  h2 { text-transform:none !important; letter-spacing:normal !important;
       font-size:12.5px !important; font-weight:600 !important;
       color:var(--wc-text-secondary) !important; margin-bottom:11px !important; }
  label { text-transform:none !important; letter-spacing:normal !important;
          font-size:12px !important; font-weight:600 !important;
          color:var(--wc-text-secondary) !important; }
  .sous-t, .anim-t, .tuile-s { text-transform:none !important; letter-spacing:normal !important; }
  .anim-t { font-size:12px !important; font-weight:600 !important; }

  /* Cibles tactiles : les petits boutons et champs d'un calque passaient sous
     44 px, la limite en dessous de laquelle on vise a cote au doigt. */
  @media (pointer:coarse) {
    .btn, .btn-sm, .tuile-s, .url-ligne .btn,
    input[type=text], input[type=url], input[type=number], select { min-height:44px !important; }
    .tuile-b { min-height:52px !important; }
  }

  /* Une seule echelle d'arrondis, au lieu de 9/12/14 melanges. */
  .carte, details.carte { border-radius:var(--wc-r-l) !important; }
  input, select, textarea, button, .btn, .tuile, .tuile-b, .tuile-s { border-radius:var(--wc-r-m) !important; }
  .puce, .voyant, .etat { border-radius:var(--wc-r-pilule) !important; }

  /* Retour tactile. */
  button, .btn, .tuile-b, .tuile-s { transition:transform .1s, filter .14s, background .15s; }
  button:active, .btn:active, .tuile-b:active, .tuile-s:active { transform:scale(.97); }

  /* Le bouton « Copier » devient une icone. Son libelle reste dans le DOM :
     copier() ecrit dans textContent pour signaler la copie, et doit continuer
     de fonctionner sans savoir que l'apparence a change. */
  .url-ligne .btn {
    width:34px !important; height:34px !important; padding:0 !important;
    font-size:0 !important; flex:0 0 auto;
    background-color:rgba(255,255,255,.06) !important; border:1px solid transparent !important;
    background-repeat:no-repeat !important; background-position:center !important;
    background-size:17px 17px !important;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='9' y='9' width='11' height='11' rx='2.5'/><path d='M5 15a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2'/></svg>") !important;
  }
  .url-ligne .btn:hover { background-color:rgba(255,255,255,.11) !important; }
  .url-ligne .btn.ok {
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2330d158' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 13l4 4L19 7'/></svg>") !important;
  }

  @media (pointer:coarse) {
    .url-ligne .btn { width:40px !important; height:40px !important; }
    .btn, .tuile-b { min-height:40px; }
  }
  @media (max-width:720px) {
    .ent { padding:14px 16px 16px; }
    .ent-titre { font-size:26px; }
    main { padding:4px 16px 70px; }
  }