/* Couche CSS « core » (voir Theme::buildCoreHeaders) : gagne sur BootstrapVendor, perd contre tout CSS sans couche (Theme.css, pages Produit). */
@layer core {
/* body (pas :root) : data-bs-theme vit sur <body> (voir Theme.html), pas sur <html>.
   Résoudre var(--bs-body-bg) etc. à :root capterait la valeur claire par défaut de
   <html> (figée une fois pour toutes), jamais recalculée avec la vraie valeur de <body>.
   Défauts neutres - Skin.css les ponte sur les jetons du thème. */
body {
  --bootstrap-flexlayout-bg-panel: var(--bs-body-bg);
  --bootstrap-flexlayout-border: var(--bs-border-color);
  --bootstrap-flexlayout-gutter-hover: var(--bs-primary);
  --bootstrap-flexlayout-text: var(--bs-body-color);
  --bootstrap-flexlayout-text-dim: var(--bs-secondary-color);
  --bootstrap-flexlayout-header-accent: var(--bootstrap-flexlayout-border); /* fond de l'en-tête */
  --bootstrap-flexlayout-header-accent-contrast: var(--bootstrap-flexlayout-text-dim); /* texte/icônes de l'en-tête */
  --bootstrap-flexlayout-panel-accent: var(--bootstrap-flexlayout-border); /* contour du panneau */
  --bootstrap-flexlayout-gutter-size: .25rem; /* défaut - chaque instance le surcharge via l'option gutterSize */
  --bootstrap-flexlayout-radius: var(--bs-border-radius-sm);
  /* Aucune font-family ici : un module ne fixe jamais la police de <body> (voir Skin.css). */
}

.bootstrap-flexlayout-host, .bootstrap-flexlayout-host * { box-sizing: border-box; }

/* Le point de montage occupe 100% de SON PROPRE parent - qui doit avoir une hauteur
   réelle (flex/grid en amont, responsabilité de l'intégration). */
.bootstrap-flexlayout-host { width: 100%; height: 100%; }

/* Un espace libre de la largeur d'une gouttière fait le tour du layout. */
.bootstrap-flexlayout-root-panel { width: 100%; height: 100%; padding: var(--bootstrap-flexlayout-gutter-size); }

/* Un FlexLayout monté dans un panneau `bare` d'un autre FlexLayout : pas de
   double espace autour - ses propres panneaux touchent le bord de l'hôte. */
.bootstrap-flexlayout-pane-bare > .bootstrap-flexlayout-pane-content > .bootstrap-flexlayout-host > .bootstrap-flexlayout-root-panel { padding: 0; }

/* ---- Conteneurs (row / column) et feuilles ---- */

.bootstrap-flexlayout-pane {
  min-width: 0;   /* sans ça, un enfant flex ne descend jamais sous la taille de son contenu */
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.bootstrap-flexlayout-container { display: flex; }
.bootstrap-flexlayout-container.bootstrap-flexlayout-row { flex-direction: row; }
.bootstrap-flexlayout-container.bootstrap-flexlayout-col { flex-direction: column; }

/* Feuille = même structure qu'une modale : en-tête / contenu (seul à défiler) / pied */
.bootstrap-flexlayout-leaf {
  display: flex;
  flex-direction: column;
  background: var(--bootstrap-flexlayout-bg-panel);
  border: 1px solid var(--bootstrap-flexlayout-panel-accent);
  border-radius: var(--bootstrap-flexlayout-radius);
}

/* bare : un simple emplacement - ni cadre, ni fond, ni padding */
.bootstrap-flexlayout-leaf.bootstrap-flexlayout-pane-bare {
  background: none;
  border: none;
  border-radius: 0;
}

/* ---- Gouttières (glisser-déposer maison, Pointer Events) ---- */

.bootstrap-flexlayout-gutter {
  flex: 0 0 auto;
  background: transparent;
  position: relative;
  z-index: 2;
  touch-action: none; /* laisse le pointer event gérer le geste, évite le scroll tactile parasite */
}
.bootstrap-flexlayout-gutter-row { width: var(--bootstrap-flexlayout-gutter-size); cursor: col-resize; }
.bootstrap-flexlayout-gutter-col { height: var(--bootstrap-flexlayout-gutter-size); cursor: row-resize; }

/* la "pilule" discrète, centrée dans la gouttière */
.bootstrap-flexlayout-gutter::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bs-secondary-bg);
  border-radius: 2px;
  opacity: 0.55;
  transition: opacity 150ms ease, background-color 150ms ease, height 150ms ease, width 150ms ease;
}
.bootstrap-flexlayout-gutter-row::before { width: var(--bootstrap-flexlayout-gutter-size); height: 2rem; }
.bootstrap-flexlayout-gutter-col::before { width: 2rem; height: var(--bootstrap-flexlayout-gutter-size); }

.bootstrap-flexlayout-gutter:hover::before,
.bootstrap-flexlayout-gutter:focus-visible::before,
.bootstrap-flexlayout-gutter.bootstrap-flexlayout-gutter-dragging::before {
  background: var(--bootstrap-flexlayout-gutter-hover);
  opacity: 1;
}
.bootstrap-flexlayout-gutter:focus-visible { outline: none; }
.bootstrap-flexlayout-gutter-row:hover::before,
.bootstrap-flexlayout-gutter-row.bootstrap-flexlayout-gutter-dragging::before { height: 3rem; }
.bootstrap-flexlayout-gutter-col:hover::before,
.bootstrap-flexlayout-gutter-col.bootstrap-flexlayout-gutter-dragging::before { width: 3rem; }

/* zone de saisie élargie invisible : la gouttière visible est fine, la cible
   de clic reste confortable autour */
.bootstrap-flexlayout-gutter-row::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: -6px; right: -6px;
}
.bootstrap-flexlayout-gutter-col::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -6px; bottom: -6px;
}

/* ---- En-tête ---- */

.bootstrap-flexlayout-pane-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: .375rem;
  height: var(--bootstrap-header-h, 1.875rem);
  padding: 0 .625rem;
  background: var(--bootstrap-flexlayout-header-accent);
  font-size: var(--bootstrap-fs-xs, .75rem);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--bootstrap-flexlayout-header-accent-contrast);
  user-select: none;
}

.bootstrap-flexlayout-pane-icon {
  font-size: var(--bootstrap-fs-sm, .875rem);
}

.bootstrap-flexlayout-pane-title {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Contenu : la seule zone qui défile ---- */

.bootstrap-flexlayout-pane-content {
  flex: 1 1 auto;
  overflow: auto;
  font-size: var(--bootstrap-fs-sm, .875rem);
  line-height: 1.6;
  color: var(--bootstrap-flexlayout-text);
  min-width: 0;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--bs-border-color) transparent;
}

/* Padding du thème PAR DÉFAUT - opt-out : padding:false / data-no-padding (grille,
   éditeur, iframe...), ou bare:true / data-bare. */
.bootstrap-flexlayout-pane-padded {
  padding: .75rem .875rem;
}

.bootstrap-flexlayout-pane-content code {
  background: color-mix(in srgb, var(--bs-emphasis-color) 6%, transparent);
  padding: 1px .3125rem;
  border-radius: var(--bs-border-radius-sm);
  color: #ce9178; /* couleur décorative fixe (façon coloration syntaxique), pas un enjeu de réactivité */
  font-family: var(--bs-font-monospace);
  font-size: var(--bootstrap-fs-xs, .75rem);
}

/* ---- Pied : même vocabulaire et même mécanique que le pied du module Modal ----
   Hors de la zone qui défile : ne bouge jamais. Groupe gauche poussé à gauche par
   margin-right:auto (comme Modal), le reste aligné à droite. */

.bootstrap-flexlayout-pane-footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .375rem .875rem;
  border-top: 1px solid var(--bootstrap-flexlayout-border);
  background: var(--bootstrap-flexlayout-bg-panel);
}
.bootstrap-flexlayout-pane-footer:empty,
.bootstrap-flexlayout-pane-footer[hidden] { display: none; } /* [hidden] : la règle display:flex ci-dessus gagnerait sur celle du navigateur */
.bootstrap-flexlayout-pane-footer > .bootstrap-footer-left {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-right: auto;
}
.bootstrap-flexlayout-btn-icon { margin-right: .375rem; }

/* ---- Scrollbars façon VS Code (Webkit + Firefox, horizontale + verticale) ---- */

.bootstrap-flexlayout-pane-content::-webkit-scrollbar { width: 12px; height: 12px; }
.bootstrap-flexlayout-pane-content::-webkit-scrollbar-track { background: transparent; }
.bootstrap-flexlayout-pane-content::-webkit-scrollbar-thumb {
  background-color: var(--bs-border-color);
  border: 3px solid transparent;
  background-clip: content-box;
}
.bootstrap-flexlayout-pane-content::-webkit-scrollbar-thumb:hover { background-color: var(--bs-secondary-color); }
.bootstrap-flexlayout-pane-content::-webkit-scrollbar-corner { background: transparent; }
}