/* Canevas de nodes du studio. Nodes blancs comme le reste du studio, filet
   fin au repos et ombre haute au survol seulement (regle Ferr) ; etiquette en
   capitales au-dessus du cadre, poignees rondes qui sortent au survol, fils en
   courbe colores par type. */

.canevas {
  /* clip et pas hidden : un champ qui prend le focus ne doit jamais faire
     defiler le canevas, sinon fils et poignees se decalent */
  position: absolute; inset: 0; overflow: hidden; overflow: clip; touch-action: none;
  --texte-port: #5b6cff; --image-port: #2bb3a3; --video-port: #e0112c;
  transform: translateZ(0);
}
.canevas.panoramique { cursor: grabbing; }
.monde {
  position: absolute; left: 0; top: 0; transform-origin: 0 0;
  will-change: transform;
}
.fils { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
.fil .trace { fill: none; stroke: var(--texte-port); stroke-width: 2.25; }
.fil[data-type="texte"] .trace { stroke: var(--texte-port); }
.fil[data-type="image"] .trace { stroke: var(--image-port); }
.fil[data-type="video"] .trace { stroke: var(--video-port); }
.fil .prise { fill: none; stroke: transparent; stroke-width: 16; pointer-events: stroke; cursor: pointer; }
.fil.sel .trace { stroke-width: 3.5; stroke-dasharray: 6 5; }
.fil.provisoire .trace { stroke-dasharray: 5 5; opacity: .8; }

/* ── Node ────────────────────────────────────────────────────────────────── */
.nd {
  position: absolute; width: 290px; border-radius: 12px;
  color: var(--texte, #14171a); font-size: 12.5px; line-height: 1.4;
  /* Verre discret : fond plus opaque et reflets attenues pour lire les cards. */
  background: linear-gradient(145deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .76));
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  backdrop-filter: blur(10px) saturate(1.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 0 1px rgba(20, 23, 26, .08);
  transition: box-shadow .3s ease;
  transform: translateZ(0);
}
.nd:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 0 1px rgba(20, 23, 26, .12), 0 8px 24px rgba(20, 23, 26, .1); }
/* Selection : le liseré argent metal des boutons pilule de l'accueil
   (.cw-cta-pill) : argent, deux reflets irises qui tournent en 18 s. Le
   degrade est masque pour ne garder que le bord de 2 px. */
@property --nd-metal {
  syntax: "<angle>"; inherits: false; initial-value: 0deg;
}
@keyframes nd-metal-tour { to { --nd-metal: 360deg; } }
.nd.sel::after {
  content: ""; position: absolute; inset: -2px; border-radius: 12px; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--nd-metal),
    rgba(190, 192, 200, .65) 0%, rgba(190, 192, 200, .65) 36%,
    #9bd2ff 39.5%, #fff 41.5%, #ffc89e 43.5%,
    rgba(190, 192, 200, .65) 47%, rgba(190, 192, 200, .65) 82%,
    #ffd9b8 85%, #fff 87%, #a8d8ff 89%, rgba(190, 192, 200, .65) 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: nd-metal-tour 18s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .nd.sel::after { animation: none; } }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  body .lateral, body.replie .lateral, .nd {
    background: #f2f3f5;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body .lateral, body.replie .lateral, .nd { background: #f2f3f5; }
}
.nd.erreur { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 0 1.5px #f59e0b; }
.nd-titre {
  position: absolute; top: -21px; left: 2px; pointer-events: none;
  font-size: 11px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--gris, #6b7280);
}
.nd:hover .nd-titre, .nd.sel .nd-titre { color: var(--texte, #14171a); }
.nd-tete {
  display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px;
  border-bottom: 1px solid rgba(20, 23, 26, .06); cursor: grab;
}
.nd-tete:active { cursor: grabbing; }
.nd-tete > svg.type { flex: none; }
.nd-tete .nd-nom { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.nd-tete .nd-nom-champ { min-width: 0; flex: 1; }
.nd-tete .nd-cout { flex: none; white-space: nowrap; }
.nd-actions { display: flex; align-items: center; gap: 2px; flex: none; }
.nd-tete svg.type { width: 14px; height: 14px; color: var(--gris, #6b7280); }
.nd-tete b { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--texte, #14171a); }
.nd-cout { margin-left: auto; font-size: 11px; color: var(--gris, #6b7280); font-variant-numeric: tabular-nums; }
.nd-btn {
  width: 24px; height: 24px; display: grid; place-items: center; flex: none;
  border: 0; border-radius: 6px; background: none; color: var(--gris, #6b7280); cursor: pointer;
}
.nd-btn:hover { background: rgba(20, 23, 26, .06); color: var(--texte, #14171a); }
.nd-btn:disabled { opacity: .35; cursor: not-allowed; }
.nd-btn[aria-busy="true"] { cursor: progress; }
.nd-btn:focus-visible { outline: 2px solid var(--texte, #14171a); outline-offset: 2px; }
.nd-btn.lancer:hover { background: var(--rouge, #e0112c); color: #fff; }
.nd-btn svg { width: 13px; height: 13px; }
.nd-corps { display: grid; gap: 8px; padding: 10px 12px 12px; }
.nd-aide { margin: 0; font-size: 11px; color: var(--gris, #6b7280); }
.nd-aide.alerte-nd { color: #b45309; }

.nd textarea, .nd input[type="text"] {
  width: 100%; display: block; resize: none; outline: none; user-select: text;
  background: rgba(255, 255, 255, .35); border: 1px solid rgba(20, 23, 26, .08); border-radius: 6px;
  color: var(--texte, #14171a); font: inherit; font-size: 12.5px; line-height: 1.5; padding: 7px 8px;
}
.nd textarea { min-height: 74px; }
.nd textarea::placeholder, .nd input::placeholder { color: var(--gris-clair, #a1a7b0); }
.nd textarea:focus, .nd input:focus { border-color: rgba(20, 23, 26, .25); background: rgba(255, 255, 255, .8); }
.nd textarea:disabled { opacity: .55; }
.nd .ligne { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* reglages : puces claires, menus en verre qui s'ouvrent vers le bas */
.nd .puce {
  height: 28px; padding: 0 9px; border-radius: 7px; gap: 6px; font-size: 12px;
  background: rgba(255, 255, 255, .5); border: 1px solid rgba(20, 23, 26, .08); color: var(--texte, #14171a);
}
.nd .puce:hover { border-color: rgba(20, 23, 26, .2); }
.nd .choix > .choix-btn { color: var(--texte, #14171a); font-size: 12px; }
.nd .choix .verre-menu { top: calc(100% + 6px); bottom: auto; transform-origin: top left; color: var(--texte, #14171a); }
.nd .pas { padding: 0; }
.nd .pas button { width: 24px; height: 26px; color: var(--gris, #6b7280); }
.nd .pas output { min-width: 34px; line-height: 26px; font-size: 12px; border-color: rgba(20, 23, 26, .1); }
.nd .interrupteur { color: var(--gris, #6b7280); }
.nd .interrupteur[aria-checked="true"] { color: var(--texte, #14171a); }
.nd .interrupteur .rail { background: rgba(20, 23, 26, .16); }
.nd .interrupteur[aria-checked="true"] .rail { background: var(--rouge, #e0112c); }
.nd .interrupteur[aria-checked="true"] .rail::after { background: #fff; }

/* ── Poignees ───────────────────────────────────────────────────────────── */
.port {
  position: absolute; width: 14px; height: 14px; border-radius: 50%; z-index: 2;
  border: 2px solid #fff; background: #c9ced6; cursor: crosshair;
  opacity: 0; transition: opacity .18s ease .28s, transform .18s ease .28s;
}
.port.entree { left: -7px; transform: translateX(-10px); }
.port.sortie { right: -7px; transform: translateX(10px); }
.nd:hover .port, .nd.sel .port, .port.lie, .canevas.tirage .port.compatible {
  opacity: 1; transform: none; transition-delay: 0s;
}
.port:hover { transform: scale(1.3) !important; }
.port[data-type="texte"].lie, .nd:hover .port[data-type="texte"], .port[data-type="texte"].compatible { background: var(--texte-port); }
.port[data-type="image"].lie, .nd:hover .port[data-type="image"], .port[data-type="image"].compatible { background: var(--image-port); }
.port[data-type="video"].lie, .nd:hover .port[data-type="video"], .port[data-type="video"].compatible { background: var(--video-port); }
.port-nom {
  position: absolute; top: -1px; white-space: nowrap; pointer-events: none;
  font-size: 10px; color: var(--gris, #6b7280); opacity: 0; transition: opacity .15s;
}
.port.entree .port-nom { right: 16px; }
.port.sortie .port-nom { left: 16px; }
.port:hover .port-nom { opacity: 1; }

/* ── Image et rendus ────────────────────────────────────────────────────── */
.nd-depot {
  display: grid; place-items: center; align-content: center; gap: 6px; min-height: 120px;
  border: 1.5px dashed rgba(20, 23, 26, .2); border-radius: 8px; background: rgba(255, 255, 255, .4);
  color: var(--gris, #6b7280); font-size: 11.5px; text-align: center; cursor: pointer; position: relative; overflow: hidden;
}
.nd-depot svg { width: 22px; height: 22px; }
.nd-depot:hover, .nd-depot.survol { border-color: var(--gris, #6b7280); color: var(--texte, #14171a); }
.nd-depot.pleine {
  border-style: solid; border-color: rgba(20, 23, 26, .1); min-height: 80px; max-height: 380px;
  padding: 0; color: transparent; background: rgba(0, 0, 0, .04); display: flex; align-items: center; justify-content: center;
}
.nd-depot.pleine svg, .nd-depot.pleine span:not(.nd-depot-badge) { display: none; }
.nd-depot-img {
  width: 100%; height: 100%; max-height: 380px; object-fit: contain; display: block; border-radius: 6px;
}
.nd-depot-badge {
  position: absolute; bottom: 8px; right: 8px; font-size: 10.5px; font-weight: 600;
  background: rgba(20, 23, 26, .75); color: #fff; padding: 3px 8px; border-radius: 6px;
  opacity: 0; transition: opacity .15s ease; pointer-events: none;
}
.nd-depot.pleine:hover .nd-depot-badge { opacity: 1; }
.nd-depot.envoi::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid rgba(20, 23, 26, .15); border-top-color: var(--rouge, #e0112c); animation: tourne .8s linear infinite;
}
.nd-rendu {
  position: relative; border-radius: 8px; overflow: hidden; background: rgba(0, 0, 0, .05);
  max-height: 360px; display: grid; place-items: center;
  color: var(--gris, #6b7280); font-size: 11.5px; text-align: center; padding: 0;
  transition: aspect-ratio .2s ease;
}
.nd-rendu.large { aspect-ratio: 16 / 9; }
.nd-rendu.carre { aspect-ratio: 1; }
.nd-rendu.defaut { aspect-ratio: 9 / 16; }
.nd-rendu img, .nd-rendu video { width: 100%; height: 100%; max-height: 360px; object-fit: contain; display: block; }
.nd-rendu .rond { border-color: rgba(20, 23, 26, .12); border-top-color: var(--rouge, #e0112c); }
.nd-rendu .etat { display: grid; gap: 8px; place-items: center; padding: 12px; }
.nd-rendu.echec { color: #b00d24; }

/* Navigation d'historique de rendu sur la carte (flèches < >) */
.nd-histo-nav {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 6;
  display: flex; align-items: center; gap: 5px; padding: 3px 6px;
  border-radius: 20px; background: rgba(20, 23, 26, .78);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  color: #fff; font-size: 11px; font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .2);
  user-select: none; pointer-events: auto;
}
.nd-histo-btn {
  width: 22px; height: 22px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .2); color: #fff;
  display: grid; place-items: center; cursor: pointer;
  font-size: 14px; font-weight: 700; line-height: 1; padding: 0 0 1px 0;
  transition: background .15s ease, transform .1s ease;
}
.nd-histo-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, .38); transform: scale(1.08);
}
.nd-histo-btn:active:not(:disabled) { transform: scale(0.92); }
.nd-histo-btn:disabled {
  opacity: .25; cursor: not-allowed;
}
.nd-histo-compteur {
  font-variant-numeric: tabular-nums; padding: 0 4px; font-size: 11px; letter-spacing: .03em;
}

/* plans */
.nd-plans { display: grid; gap: 6px; }
.nd-plan { display: flex; gap: 6px; align-items: center; }
.nd-plan .num {
  width: 18px; height: 18px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: rgba(20, 23, 26, .08); color: var(--texte, #14171a); font-size: 10px; font-weight: 600;
}
.nd-plan input { flex: 1; min-width: 0; }
.nd-plans-pied { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--gris, #6b7280); }
.nd-plans-pied button { border: 0; background: none; padding: 2px 0; color: var(--texte, #14171a); font-size: 11.5px; font-weight: 600; cursor: pointer; }
.nd-plans-pied button:disabled { opacity: .35; cursor: not-allowed; }
.nd-plans-pied .rouge { color: #b00d24; font-weight: 600; }

/* ── Barre d'outils ─────────────────────────────────────────────────────── */
.outils {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 5;
  display: flex; align-items: center; gap: 4px; padding: 6px; max-width: calc(100% - 32px);
  border-radius: 14px; background: var(--verre, rgba(246, 247, 249, .72));
  border: 1px solid rgba(20, 23, 26, .1);
  backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset;
  transition: box-shadow .3s ease;
}
/* Regle Ferr : ombre au survol seulement, haute comme la barre du studio. */
.outils:hover {
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 -6px 18px rgba(20, 23, 26, .06), 0 18px 48px rgba(20, 23, 26, .14), 0 -30px 110px rgba(20, 23, 26, .14);
}
.outils > button, .outils .choix-outil > button {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 11px;
  border: 0; border-radius: 9px; background: none; font-size: 12.5px; color: var(--texte, #14171a);
  white-space: nowrap; cursor: pointer;
}
.outils > button:hover, .outils .choix-outil > button:hover { background: rgba(20, 23, 26, .06); }
.outils svg { width: 15px; height: 15px; color: var(--gris, #6b7280); }
.outils .sep { width: 1px; height: 20px; background: rgba(20, 23, 26, .1); margin: 0 4px; flex: none; }
.outils .choix-outil { position: relative; }
.outils .choix-outil .verre-menu { bottom: calc(100% + 10px); left: 0; min-width: 240px; }
.outils .choix-outil .verre-menu > button { flex-direction: column; align-items: flex-start; gap: 1px; padding-left: 12px; cursor: pointer; }
.outils .choix-outil .verre-menu > button small { font-size: 11px; color: var(--gris, #6b7280); white-space: normal; }
.outils .choix-outil .verre-menu > button:hover small { color: rgba(255, 255, 255, .7); }
.outils .total { margin-left: 8px; font-size: 12px; color: var(--gris, #6b7280); white-space: nowrap; }
.outils .total b { color: var(--texte, #14171a); font-weight: 600; }
.outils .total.rouge b { color: var(--rouge, #e0112c); }
.outils .lancer-tout {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; margin-left: 6px;
  border: 1px solid rgba(20, 23, 26, .12); border-radius: 10px; background: #fff; color: #000;
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.outils .lancer-tout svg { color: #000; width: 16px; height: 16px; }
.outils .lancer-tout:hover:not(:disabled) { background: #f5f5f5; }
.outils .lancer-tout:disabled { opacity: .4; cursor: not-allowed; }
.canevas-alerte {
  position: absolute; left: 50%; bottom: 76px; transform: translateX(-50%); z-index: 5;
  max-width: min(640px, calc(100% - 32px)); padding: 9px 14px; border-radius: 10px; font-size: 13px;
  background: #fff; color: #b00d24; box-shadow: 0 0 0 1px rgba(224, 17, 44, .25), 0 8px 24px rgba(20, 23, 26, .1);
}
.canevas-alerte:empty { display: none; }
/* style : .pastille-zoom (index.html), commun avec la galerie */
.canevas-zoom { position: absolute; right: 14px; bottom: 22px; z-index: 5; }
.nd-tete .ico.type { width: 15px; height: 15px; }
.nd[data-type="imageia"] .nd-tete .ico.type { color: #000; background: #fff; border-radius: 3px; }
.nd-btn .ico { width: 14px; height: 14px; }
.outils .ico { width: 16px; height: 16px; color: var(--gris, #6b7280); }
.outils .lancer-tout .ico { color: #000; width: 16px; height: 16px; }

@media (max-width: 900px) {
  .outils { left: 8px; right: 8px; transform: none; max-width: none; overflow-x: auto; bottom: 8px; }
  .outils .libelle-outil { display: none; }
  .canevas-zoom { bottom: 64px; }
  .canevas-alerte { bottom: 64px; }
}

/* Menu Workflow : liste des workflows, puis actions, puis modeles. */
.outils .choix-outil .menu-flux { max-height: min(70vh, 560px); overflow-y: auto; scrollbar-width: none; min-width: 270px; }
.outils .choix-outil .menu-flux > button.ouvert span { font-weight: 600; }
.outils .choix-outil > button .libelle-outil { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Depot de fichiers : cadre pointille et consigne tant qu'un fichier survole le canevas. */
.canevas.depot-actif::after {
  content: "Déposez : image → node Référence, texte → node Prompt";
  position: absolute; inset: 12px; z-index: 30; pointer-events: none;
  display: grid; place-items: center; border-radius: 14px;
  border: 2px dashed rgba(224, 17, 44, .55); background: rgba(250, 251, 253, .35);
  font-size: 14px; font-weight: 600; color: var(--texte, #14171a);
}

/* Lancer : bouton rouge rond, en bas a droite de la derniere ligne de reglages. */
.nd .nd-lancer {
  margin-left: auto; width: 30px; height: 30px; flex: none; display: grid; place-items: center;
  border: 0; border-radius: 50%; padding: 0; cursor: pointer;
  background: #fff; color: #000; box-shadow: 0 0 0 1px rgba(20, 23, 26, .12); transition: background .15s ease, transform .15s ease;
}
.nd .nd-lancer:hover { background: #f5f5f5; transform: scale(1.06); }
.nd .nd-lancer svg { width: 16px; height: 16px; }

/* Lecture video dans le node : bouton blanc au centre, cache pendant la lecture. */
.nd-rendu .nd-lire {
  position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; color: #fff;
  background: rgba(20, 23, 26, .28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: transform .15s ease, opacity .15s ease;
}
.nd-rendu .nd-lire svg { width: 22px; height: 22px; margin-left: 3px; }
.nd-rendu .nd-lire:hover { transform: scale(1.06); }
.nd-rendu.lecture .nd-lire { opacity: 0; pointer-events: none; }
.nd-rendu video { cursor: pointer; }

/* Elements @Nom et voix de la video (26.09.2026). */
.nd-elements { display: flex; flex-wrap: wrap; gap: 4px; }
:is(.nd, .editeur-carte) .nd-el {
  height: 22px; padding: 0 8px; border-radius: 11px; font-size: 11.5px; cursor: pointer;
  background: rgba(255, 255, 255, .6); border: 1px solid rgba(20, 23, 26, .1); color: var(--texte, #14171a);
}
:is(.nd, .editeur-carte) .nd-el:hover { border-color: var(--rouge, #e0112c); color: var(--rouge, #e0112c); }
:is(.nd, .editeur-carte) .nd-el.gerer { color: var(--gris, #6b7280); border-style: dashed; }
:is(.nd, .editeur-carte) .nd-el:not(.gerer):not(.actif) { color: var(--gris, #6b7280); border-style: dashed; }
:is(.nd, .editeur-carte) .nd-el.actif { background: var(--texte, #14171a); border-color: var(--texte, #14171a); color: #fff; }
:is(.nd, .editeur-carte) .nd-el.actif:hover { background: var(--rouge, #e0112c); border-color: var(--rouge, #e0112c); color: #fff; }
.nd textarea.nd-dialogue { min-height: 48px; }
.nd input.nd-ambiance {
  width: 100%; box-sizing: border-box; border-radius: 8px; border: 1px solid rgba(20, 23, 26, .08);
  background: rgba(255, 255, 255, .55); color: var(--texte, #14171a); font: inherit; font-size: 12.5px; padding: 7px 8px; outline: none;
}

/* Filtre (colorimetrie locale, 27.09.2026). */
.nd-svg { position: absolute; width: 0; height: 0; overflow: hidden; }
.nd-filtre { aspect-ratio: auto; min-height: 120px; max-height: 240px; }
.nd-filtre img, .nd-filtre video { object-fit: contain; max-height: 240px; }
.nd-filtre.nd-recadre { position: relative; min-height: 0; max-height: none; width: min(100%, var(--recadre-largeur)); aspect-ratio: var(--recadre-ratio); justify-self: center; overflow: hidden; transition: none; }
.nd-filtre.nd-recadre img, .nd-filtre.nd-recadre video { position: absolute; max-width: none; max-height: none; object-fit: fill; pointer-events: none; user-select: none; }
.nd-filtre.deplacable { cursor: grab; touch-action: none; }
.nd-filtre.deplacable:active { cursor: grabbing; }
.nd-recadrage { border-top: 1px solid rgba(20, 23, 26, .1); border-bottom: 1px solid rgba(20, 23, 26, .1); padding: 8px 0; }
.nd-recadrage summary { cursor: pointer; font-size: 12px; min-height: 28px; align-content: center; }
.nd-recadre-dimensions { float: right; color: var(--gris, #6b7280); font-size: 11px; font-variant-numeric: tabular-nums; }
.nd-recadre-outils { display: grid; gap: 10px; padding-top: 8px; }
.nd-recadre-format { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; }
.nd-recadre-format select { min-width: 0; max-width: 190px; padding: 6px; border: 1px solid rgba(20, 23, 26, .15); border-radius: 7px; background: #fff; color: var(--texte, #14171a); font: inherit; }
.nd-recadre-outils .nd-curseur { grid-template-columns: 65px 1fr 38px; }
.nd-recadre-outils input:disabled { opacity: .35; }
@media (pointer: coarse) { .nd-recadrage summary, .nd-recadre-outils button, .nd-recadre-format select { min-height: 44px; } .nd .nd-recadre-outils input[type="range"] { height: 32px; } .nd-recadre-format select { font-size: 16px; } }
.nd-curseur { display: grid; grid-template-columns: 78px 1fr 30px; align-items: center; gap: 8px; font-size: 11.5px; color: var(--gris, #6b7280); }
.nd .nd-curseur input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; margin: 0; padding: 0; border: 0; background: none; height: 18px; cursor: pointer; }
.nd-curseur input[type="range"]::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: rgba(20, 23, 26, .14); }
.nd-curseur input[type="range"]::-moz-range-track { height: 3px; border-radius: 2px; background: rgba(20, 23, 26, .14); }
.nd-curseur input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4.5px; border: 0; border-radius: 50%; background: var(--rouge, #e0112c); transition: transform .12s ease; }
.nd-curseur input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--rouge, #e0112c); }
.nd-curseur input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.2); }
.nd-curseur output { text-align: right; font-variant-numeric: tabular-nums; color: var(--texte, #14171a); }
.nd .nd-action { padding: 0 12px; font-weight: 600; }
.nd .nd-action:disabled { opacity: .5; cursor: default; }

/* Montage (assembleur gratuit, 27.09.2026). */
.nd-montage { display: grid; gap: 4px; }
.nd-clip { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 8px; height: 26px; padding: 0 8px; border-radius: 7px; font-size: 12px; background: rgba(255, 255, 255, .55); border: 1px solid rgba(20, 23, 26, .07); }
.nd-clip .num { color: var(--gris, #6b7280); font-variant-numeric: tabular-nums; }
.nd-clip .txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nd-clip em { font-style: normal; color: var(--gris, #6b7280); font-variant-numeric: tabular-nums; }
.nd-clip.libre { background: none; border-style: dashed; color: var(--gris-clair, #a1a7b0); }
.nd-clip.manque em { color: var(--rouge, #e0112c); }
.nd-clip .txt { min-width: 0; }
.nd .nd-total { margin-left: auto; font-size: 12px; color: var(--gris, #6b7280); }
.nd-musique { display: flex; align-items: center; gap: 6px; }
.nd-musique input[type="range"] { flex: 1; min-width: 0; accent-color: var(--rouge, #e0112c); }

/* Renommer un node sur place (27.09.2026). */
.nd .nd-nom { cursor: text; border-radius: 4px; padding: 1px 3px; margin: -1px -3px; }
.nd .nd-nom:hover { background: rgba(20, 23, 26, .06); }
.nd .nd-nom-champ {
  width: 150px; padding: 1px 4px; margin: -2px -4px; border: 1px solid rgba(20, 23, 26, .2); border-radius: 5px;
  background: rgba(255, 255, 255, .85); font: inherit; font-weight: 600; font-size: inherit; color: var(--texte, #14171a); outline: none;
}

/* ── Champ agrandissable (28.09.2026) ───────────────────────────────────── */
.nd-champ { position: relative; }
.nd-agrandir {
  position: absolute; right: 5px; bottom: 5px; width: 22px; height: 22px; display: grid; place-items: center;
  border: 0; border-radius: 6px; background: rgba(255, 255, 255, .7); color: var(--gris, #6b7280); cursor: pointer;
  opacity: 0; transition: opacity .15s;
}
.nd-champ:hover .nd-agrandir, .nd-agrandir:focus-visible { opacity: 1; }
.nd-agrandir:hover { color: var(--texte, #14171a); background: #fff; }
.nd-agrandir svg { width: 13px; height: 13px; }
.editeur-grand {
  position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 24px; overflow-y: auto; overscroll-behavior: contain;
  background: rgba(20, 23, 26, .28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.editeur-carte {
  width: min(760px, 100%); max-height: calc(100dvh - 48px); overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 10px; padding: 14px 16px 16px; border-radius: 14px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .66));
  backdrop-filter: blur(30px) saturate(1.6); -webkit-backdrop-filter: blur(30px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 0 0 1px rgba(20, 23, 26, .08);
  animation: ouvre .14s ease-out;
}
.editeur-tete { display: flex; align-items: center; justify-content: space-between; }
.editeur-tete b { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--texte, #14171a); }
.editeur-fermer {
  border: 1px solid rgba(20, 23, 26, .12); border-radius: 8px; background: rgba(255, 255, 255, .6);
  padding: 5px 12px; font: inherit; font-size: 12px; color: var(--texte, #14171a); cursor: pointer;
}
.editeur-fermer:hover { background: #fff; }
.editeur-carte textarea {
  width: 100%; height: min(50dvh, 520px); min-height: 100px; resize: vertical; overscroll-behavior: contain; outline: none; font: inherit; font-size: 14px; line-height: 1.6;
  padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(20, 23, 26, .1); background: rgba(255, 255, 255, .7); color: var(--texte, #14171a);
}
.editeur-carte textarea:focus { border-color: rgba(20, 23, 26, .25); background: #fff; }

/* Les commandes restent accessibles avec l’import vidéo, sans passer sous la barre latérale. */
.outils{flex-wrap:wrap;justify-content:center;width:max-content}
.outils>button{flex:none;white-space:nowrap}
@media(min-width:901px){
  body.mode-canevas .outils{max-width:calc(100% - var(--lateral) - 48px)}
  body.mode-canevas.replie .outils{max-width:calc(100% - var(--lateral-replie) - 48px)}
  .canevas-zoom{bottom:116px}.canevas-alerte{bottom:122px}
}
@media(max-width:900px){
  .outils{width:auto;overflow:visible}
  .outils [data-outil="video-reference"] .libelle-outil{display:inline}
  .canevas-zoom{bottom:132px}.canevas-alerte{bottom:138px}
}

/* Defiler un prompt ou un menu ne doit pas entrainer le canvas en dessous. */
.nd textarea, .nd-plans, .verre-menu { overscroll-behavior: contain; }
.editeur-carte .nd-elements { max-height: 150px; overflow-y: auto; overscroll-behavior: contain; }

/* Découpage d'une référence : dialogue hors du canvas et de son zoom. */
.decoupe-dialog{box-sizing:border-box;width:min(680px,calc(100% - 24px));max-height:calc(100dvh - 32px);padding:24px;border:1px solid #dedede;border-radius:18px;background:#fff;color:#202124;box-shadow:0 16px 64px #0003;overflow:auto;overscroll-behavior:contain;font:14px/1.5 Inter,Arial,sans-serif}
.decoupe-dialog::backdrop{background:#0006}
.decoupe-dialog h2{font-size:21px;margin:0 0 8px;letter-spacing:-.4px}
.decoupe-dialog p{margin:8px 0 16px}
.decoupe-dialog video{display:block;width:100%;height:220px;object-fit:contain;background:#111;border-radius:10px}
.decoupe-dialog button{min-height:40px;padding:8px 12px;background:#f6f6f6;color:#222;border:1px solid #ddd;border-radius:8px;font:inherit;cursor:pointer;touch-action:manipulation}
.decoupe-dialog button:disabled{opacity:.5;cursor:default}
.decoupe-dialog button:focus-visible,.decoupe-dialog input:focus-visible{outline:2px solid #df0036;outline-offset:2px}
.decoupe-plan{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid #eee}
.decoupe-plan>span{font-variant-numeric:tabular-nums;min-width:90px}
.decoupe-plan label{margin-left:auto;white-space:nowrap}
.decoupe-plan input{box-sizing:border-box;width:85px;padding:8px;border:1px solid #ccc;border-radius:6px;font-family:inherit;font-size:16px;line-height:1.2}
.decoupe-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.decoupe-actions button:nth-child(2){background:#171717;color:white;border-color:#171717}
.decoupe-dialog .decoupe-note{font-size:12px;color:#626262;margin-top:16px}
.nd-decouper{margin:8px 0;cursor:pointer;min-height:36px}
@media(max-width:600px){.decoupe-dialog{padding:16px}.decoupe-dialog video{height:180px}.decoupe-dialog button{min-height:44px}.decoupe-plan label{margin-left:0}.decoupe-plan input{font-size:16px}.decoupe-actions button{flex:1 1 100%}}