/* ================================
   TRX Layouts - Base
   ================================ */

.sc_section,
.sc_block {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.sc_section .sc_section_overlay,
.sc_block .sc_block_overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ================================
   Colonnes (flex)
   ================================ */

.sc_columns,
.columns_wrap.sc_columns {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch;
  box-sizing: border-box;
  width: 100%;
  gap: var(--trx-gap, 20px); /* contrôlé par le shortcode */
}

/* Éléments de colonnes */
.sc_columns > .sc_column_item {
  box-sizing: border-box;
  min-height: 1px;
  display: block;
  /* Empêche des styles de thème de forcer 100% */
  width: auto !important;
  max-width: 100%;
  min-width: 0;
}

/* Calcul de la largeur en tenant compte du gap et du span
   base = (100% - (gap * (cols - 1))) / cols
   span s = base * s + gap * (s - 1)
*/
.sc_columns > .sc_column_item {
  --_cols: var(--trx-cols, 2);
  --_gap:  var(--trx-gap, 20px);
  --_span: var(--trx-span, 1);
  --_base: calc((100% - (var(--_gap) * (var(--_cols) - 1))) / var(--_cols));
  flex: 0 0 calc((var(--_base) * var(--_span)) + (var(--_gap) * (var(--_span) - 1))) !important;
  max-width: calc((var(--_base) * var(--_span)) + (var(--_gap) * (var(--_span) - 1))) !important;
}

/* Alignement vertical */
.sc_columns .sc_valign_top    { align-self: flex-start; }
.sc_columns .sc_valign_middle { align-self: center; }
.sc_columns .sc_valign_bottom { align-self: flex-end; }

/* Inner pour fond / min-height */
.sc_column_item_inner {
  width: 100%;
  height: 100%;
}

/* ================================
   Responsive
   ================================ */

@media (max-width: 1024px) {
  .sc_columns { --trx-cols: 2; }
}
@media (max-width: 768px) {
  .sc_columns { --trx-cols: 1; }
}

/* ================================
   Utilitaires d'animation
   ================================ */

[data-animation] {
  opacity: 0;
  transition: all .6s ease-in-out;
}
[data-animation].animated {
  opacity: 1;
}