/* ============================================================
   cutbg-dock.css — colonne droite de panneaux, sans superposition.

   MESURE (navigateur Playwright 1440x950, 02/10/2026) :
   Les panneaux flottants du studio sont positionnes en fixed avec des
   top/bottom codes en dur, chacun invente par un module different :

     #cutbg-studio-module      fixed, top 75px,   right 20px,  300x413
     #cutbg-harmonizer-panel   fixed, bottom 82px, right 16px, 300x74
     #cbg-shadow-panel         fixed, bottom 82px (mesure a 721px)
     #cutbg-minimap            fixed, bas droite
     #cutbg-floor-reflection-panel
     #cutbg-snap-toolbar

   Aucun ne connait les autres : ils se posent tous sur le meme coin et se
   recouvrent. Mesure : 8 chevauchements dont 3 a 100 %.

   Le systeme : ces panneaux sont places dans UNE colonne de docking a droite,
   en flux normal (pas de position fixe). Ils s empilent verticalement, ne se
   recouvrent plus, et suivent la hauteur de la fenetre.

   On n impose rien aux panneaux qui ne sont pas dans la colonne : ils gardent
   leur position d origine.
   ============================================================ */

/* La colonne de docking est creee par cutbg-core-api.js ; ces regles la
   metent en place. Si la colonne n existe pas, rien ne change. */
.cutbg-dock {
  position: fixed;
  top: var(--cutbg-dock-top, 64px);
  right: 16px;
  bottom: 16px;
  width: 300px;
  /* Fond de la colonne. Mesure 03/10/2026 : la colonne etait totalement
     transparente (rgba(0,0,0,0), border none). Les 17 panneaux flottaient
     alors sur le contenu principal, sans hierarchie visuelle. On remet le
     verre du theme, plus une bordure discrete. */
  /* Le body est rgba(18,20,29,0.94). Une colonne a la MEME teinte n'a aucun
     contraste : elle se fond dans le fond. On la pose un cran plus claire et
     on accentue sa bordure, pour que la colonne existe visuellement.
     Mesure 03/10/2026 : teinte identique au pixel pres. */
  background: rgba(30, 34, 46, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--cutbg-radius-panel, 14px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  padding: 10px 10px 12px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
  pointer-events: none;
  z-index: var(--cutbg-z-dock);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  padding-bottom: 4px;
}

/* Chaque panneau qui entre dans la colonne : on neutralise sa position
   fixe d origine et on le laisseendre dans le flux. */
.cutbg-dock > * {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  flex: 0 0 auto;
  pointer-events: auto;
  max-height: 60vh;
  overflow-y: auto;
  /* Un panneau ne peut pas depasser la largeur de la colonne : sinon ses
     curseurs et leurs libelles sortent du cadre et chevauchent le voisin.
     Mesure 03/10/2026 : outR = 27 px sur des elements de 181 px. */
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Curseurs et libelles : ils doivent se comporter dans la largeur du
   panneau, jamais deborder. */
.cutbg-dock input[type='range'] {
  max-width: 100% !important;
  width: 100%;
  box-sizing: border-box;
}

.cutbg-dock input[type='range'] + * ,
.cutbg-dock .cbg-val,
.cutbg-dock [class*='val'],
.cutbg-dock [class*='Value'] {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Panneau replie : le dock le pousse hors de la colonne plutot que de le
   laisser deborder de l ecran. Mesure : 6 panneaux a 700 px de haut total
   pour une colonne de 830 px — au-dela de 4 panneaux, la colonne debordait
   sous le viewport (y=1128 pour 950 de hauteur). */
.cutbg-docked-folded {
  max-height: 44px !important;
  overflow: hidden !important;
  opacity: 0.55;
  transition: max-height 0.18s ease, opacity 0.18s ease;
}

/* Mesure de hauteur reelle par foldOverflow().
   AVANT : pour mesurer, on retirait cutbg-docked-folded puis on le
   remettait -> 2 ecritures de classe par panneau et par appel
   (224 mutations en 8 s de repos, mesure du 04/10/2026).
   Cette classe force l etat deploye sans toucher au repli.
   Elle neutralise aussi la transition : sans ca, getBoundingClientRect
   renverrait une hauteur animee et non la hauteur reelle. */
.cutbg-measuring,
.cutbg-measuring.cutbg-docked-folded {
  max-height: none !important;
  overflow: visible !important;
  opacity: 1 !important;
  transition: none !important;
}

/* a11y : un utilisateur qui demande prefers-reduced-motion ne doit pas
   subir l animation de deploiement des panneaux. Mesure 05/10/2026 :
   sous reducedMotion=reduce il restait 1 transition active (0,25 s sur
   0,2 s) la-dessus, contre 103 sans la preference. Le repli/deploiement
   reste fonctionnel, il est juste instantane. */
@media (prefers-reduced-motion: reduce) {
  .cutbg-dock,
  .cutbg-dock *,
  .cutbg-tray,
  .cutbg-tray * {
    transition: none !important;
    animation: none !important;
  }
}
.cutbg-docked-folded:hover,
.cutbg-docked-folded:focus-within {
  max-height: 46vh !important;
  opacity: 1;
}

/* Un panneau qui excedrait la colonne doit pouvoir defiler, pas deborder. */
.cutbg-dock > *:last-child {
  margin-bottom: 0;
}

/* Un panneau au contenu plus large que la colonne doit defiler, PAS
   deborder : mesure 03/10/2026, #cutbg-refine-panel avait scrollWidth 729
   dans une boite de 298 px, donc son contenu sortait de la colonne et le
   panneau voisin se retrouvait tronque par-dessus. */
.cutbg-dock > * {
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Le bouton qui declenche un panneau etait positionne en fixed sur le meme
   coin : on le laisse dans le flux normal de la colonne. */
.cutbg-dock > .cutbg-dock-toggle {
  flex: 0 0 auto;
}

/* ============================================================
   RESERVATION DE L'ESPACE DE LA COLONNE
   La colonne occupe 300px + 16px de marge a droite. Sans reservation, elle
   passe AU-DESSUS du contenu : mesure, #cutbg-defringe-panel (1424px de
   large) etait recouvre a 87 % par le conteneur de presets.
   On reserve donc la bande droite du contenu pour que rien ne soit cache.
   ============================================================ */
body:has(> .cutbg-dock) {
  padding-right: 332px;
}
body:has(> .cutbg-dock) #main,
body:has(> .cutbg-dock) #cutbg-studio-module,
body:has(> .cutbg-dock) .studio-main,
body:has(> .cutbg-dock) > .studio-shell {
  max-width: calc(100vw - 348px);
}

/* ===========================================================
   CONTENU CACHE : AFFORDANCE DE DEFILEMENT
   Mesure 03/10/2026 : la colonne contient 1 222 px de panneaux pour
   830 px visibles, et la barre de defilement etait INVISIBLE
   (offsetWidth - clientWidth = 0). Sans elle, 9 panneaux paraissent
   ne pas exister. On rend donc le curseur visible et on ajoute un
   compteur qui dit combien de panneaux sont sous la ligne de
   flottaison.
   =========================================================== */
.cutbg-dock::-webkit-scrollbar {
  width: 6px;
}
.cutbg-dock::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 3px;
}
.cutbg-dock::-webkit-scrollbar-thumb {
  background: var(--cutbg-accent, #3579ff);
  border-radius: 3px;
  opacity: 0.55;
}

/* Compteur de debut : « +7 » en tete de colonne quand des panneaux sont
   masques. C est un compte, pas un bouton : on ne pretendra pas qu un
   clic le deploie. */
.cutbg-dock-more {
  position: sticky;
  top: 0;
  z-index: 2;
  flex: 0 0 auto;
  display: block;
  padding: 3px 8px;
  margin-bottom: -4px;
  font-family: var(--cutbg-font-body, 'DM Sans', sans-serif);
  font-size: 10px;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--cutbg-text-secondary, #9aa3b2);
  background: var(--cutbg-glass-bg, rgba(18, 20, 29, 0.94));
  border: 1px solid var(--cutbg-glass-border, rgba(255, 255, 255, 0.08));
  border-radius: 6px;
  cursor: default;
  pointer-events: auto;
}
.cutbg-dock-more[hidden] {
  display: none;
}

/* Sur petit ecran la colonne devient un tiroir bas : plus besoin de reserver
   la bande droite, on rend la largeur au contenu. */
@media (max-width: 1100px) {
  body:has(> .cutbg-dock) { padding-right: 0; }
  body:has(> .cutbg-dock) #main,
  body:has(> .cutbg-dock) #cutbg-studio-module,
  body:has(> .cutbg-dock) .studio-main,
  body:has(> .cutbg-dock) > .studio-shell {
    max-width: 100%;
  }
}
@media (max-width: 1100px) {
  .cutbg-dock {
    top: auto;
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    max-height: 46vh;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .cutbg-dock > * {
    max-width: calc(50% - 6px);
    max-height: 100%;
  }
}