/* ─── Block: wf-split (Section Bicolonne) ─── */

.wf-split-section {
    padding: var(--wf-space-m, 48px) var(--pad, 40px);
    position: relative;
    background: var(--_split-bg, transparent);
}
/* Grille 2 colonnes */
.wf-split-container {
    max-width: var(--wf-max-width, 1240px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: var(--_img-col, 1fr) 1fr;
    gap: 64px;
    align-items: center;
}
/* Image à droite : la var s'applique sur la 2e colonne */
.wf-split--image-right .wf-split-container {
    grid-template-columns: 1fr var(--_img-col, 1fr);
}

/* L'inversion des colonnes ne passe pas par une classe : render.php sort déjà
   les deux colonnes dans l'ordre voulu par displayStyle. L'attribut `reversed`
   ne survit que pour relire le contenu enregistré avant displayStyle
   (render.php ligne 13) — il n'atteint jamais le HTML. */

/* ── Colonne image ── */
.wf-split-image-wrap {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: var(--r, 3px);
}
.wf-split-image-wrap img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    opacity: .85;
}

/* Placeholder image */
.wf-split-image-wrap.is-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--surf) 60%, transparent);
    border: var(--wf-border-width, 1.5px) dashed var(--bd);
}
.wf-split-image-wrap.is-placeholder svg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
}
.wf-placeholder-label {
    position: relative; z-index: 2;
    font: 400 10px/1 var(--mono, 'DM Mono', monospace);
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--mt);
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    border: var(--wf-border-width, 1.5px) solid var(--bd);
    padding: 6px 14px;
    border-radius: var(--r, 3px);
}

/* ── Colonne texte ── */
.wf-split-text-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.wf-section-label {
    font: 400 10px/1 var(--mono, 'DM Mono', monospace);
    letter-spacing: .15em; text-transform: uppercase;
    color: var(--_split-content, var(--_container-tx, var(--mt)));
    display: block;
}

.wf-split-title {
    font: 700 clamp(1.8rem, 3.5vw, 3rem)/1.05 var(--sans, 'Space Grotesk', sans-serif);
    letter-spacing: -.03em;
    color: var(--_split-title, var(--_container-tx, var(--tx)));
    margin: 0;
}

.wf-split-description {
    font: 400 var(--wf-base-font-size, 15px)/1.75 var(--sans, 'Space Grotesk', sans-serif);
    color: var(--_split-content, var(--_container-tx, var(--mt)));
    max-width: 460px;
    margin: 0;
}

.wf-split-section .wf-btn-brutal {
    display: inline-block;
    padding: 12px 24px;
    border: var(--wf-border-width, 1.5px) solid var(--_btn-bd, var(--tx));
    background: var(--_btn-bg, transparent);
    color: var(--_btn-tx, var(--tx));
    font: 500 12px/1 var(--sans, 'Space Grotesk', sans-serif);
    letter-spacing: .08em; text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--r, 3px);
    transition: background .2s ease, color .2s ease, border-color .2s ease;
    align-self: flex-start;
}
/* Inversion au survol : fond ← couleur bordure, texte ← couleur fond
   --_btn-hover-tx (optionnel) override la couleur de texte au survol,
   utile quand le swap auto produit deux couleurs identiques (ex: bg noir + texte noir). */
.wf-split-section .wf-btn-brutal:hover {
    background: var(--_btn-bd, var(--tx));
    color: var(--_btn-hover-tx, var(--_btn-bg, var(--bg)));
    border-color: var(--_btn-bd, var(--tx));
}

/* Zones éditables - repère de relecture, allumé par l'outil « Contours »
   du drawer (.wf-outline-on) et par l'éditeur. */
.wf-outline-on .wf-split-title,
.wf-outline-on .wf-split-description {
    outline: 1px dashed color-mix(in srgb, var(--bd) 50%, transparent);
    outline-offset: 7px;
    border-radius: 2px;
    transition: outline-color .2s;
}
.wf-outline-on .wf-split-title:hover,
.wf-outline-on .wf-split-description:hover {
    outline-color: color-mix(in srgb, var(--bd) 80%, transparent);
}

/* SVG placeholder - override attributs hardcodés, suit les modes */
.wf-split-image-wrap.is-placeholder svg rect {
    fill: color-mix(in srgb, var(--surf) 60%, transparent);
    stroke: var(--bd);
}
.wf-split-image-wrap.is-placeholder svg line {
    stroke: var(--bd);
}

/* ── Template : stacked ──────────────────────────────── */
.wf-split--stacked .wf-split-container {
    grid-template-columns: 1fr;
    gap: 40px;
}
.wf-split--stacked .wf-split-image-wrap {
    aspect-ratio: 16/7;
}
.wf-split--stacked .wf-split-text-col {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    align-items: center;
}
.wf-split--stacked .wf-split-description {
    max-width: 560px;
}

/* ── Tailles de titre ── */
.wf-split-title.title-size-xs { font-size: clamp(1rem,   1.8vw, 1.4rem); }
.wf-split-title.title-size-sm { font-size: clamp(1.3rem, 2.2vw, 1.9rem); }
.wf-split-title.title-size-md { font-size: clamp(1.8rem, 3.5vw, 3rem);   }
.wf-split-title.title-size-lg { font-size: clamp(2.2rem, 4vw,  3.8rem);  }
.wf-split-title.title-size-xl { font-size: clamp(2.8rem, 5vw,  5rem);    }

/* ── Tailles de texte (description) ── */
.wf-split-description.text-size-xs { font-size: clamp(0.75rem,  1.2vw, 0.875rem); line-height: 1.6; }
.wf-split-description.text-size-sm { font-size: clamp(0.875rem, 1.4vw, 1rem);     line-height: 1.65; }
.wf-split-description.text-size-md { font-size: var(--wf-base-font-size, 15px);   line-height: 1.75; }
.wf-split-description.text-size-lg { font-size: clamp(1rem,     1.8vw, 1.2rem);   line-height: 1.7; }
.wf-split-description.text-size-xl { font-size: clamp(1.1rem,   2vw,   1.4rem);   line-height: 1.65; }

/* ── Alignement vertical de l'image ── */
.wf-split-image-col.image-align-top    { align-self: start; }
.wf-split-image-col.image-align-center { align-self: center; }
.wf-split-image-col.image-align-bottom { align-self: end; }

/* ── Bouton sous l'image ── */
.wf-split-image-col.has-btn {
    align-self: start;
    display: flex;
    flex-direction: column;
}
.wf-split-image-col.has-btn .wf-btn-brutal { margin-top: 1.25rem; }

/* ── Image non recadrée ── */
.wf-split-image-wrap.is-uncropped {
    aspect-ratio: unset;
    overflow: visible;
}
.wf-split-image-wrap.is-uncropped img {
    width: 100%;
    height: auto;
    object-fit: initial;
    opacity: 1;
}

/* ── Recadrage forcé sur mobile ── */
@media (max-width: 900px) {
    .wf-split-image-wrap.is-uncropped.is-crop-mobile {
        aspect-ratio: 4/3;
        overflow: hidden;
    }
    .wf-split-image-wrap.is-uncropped.is-crop-mobile img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: .85;
    }
}

/* ── Alignement du texte ── */
.wf-split-text-col.is-align-center {
    text-align: center;
    align-items: center;
}
.wf-split-text-col.is-align-center .wf-split-description { max-width: 100%; }
.wf-split-text-col.is-align-center .wf-btn-brutal { align-self: center; }

.wf-split-text-col.is-align-right {
    text-align: right;
    align-items: flex-end;
}
.wf-split-text-col.is-align-right .wf-split-description { max-width: 100%; }
.wf-split-text-col.is-align-right .wf-btn-brutal { align-self: flex-end; }

/* ── Alignement explicite du bouton (override de l'alignement texte) ── */
.wf-split-section .wf-split-text-col  .wf-btn-brutal.btn-align-left,
.wf-split-section .wf-split-image-col .wf-btn-brutal.btn-align-left   { align-self: flex-start; }
.wf-split-section .wf-split-text-col  .wf-btn-brutal.btn-align-center,
.wf-split-section .wf-split-image-col .wf-btn-brutal.btn-align-center { align-self: center; }
.wf-split-section .wf-split-text-col  .wf-btn-brutal.btn-align-right,
.wf-split-section .wf-split-image-col .wf-btn-brutal.btn-align-right  { align-self: flex-end; }

/* Responsive
   .wf-split--image-right redéfinit grid-template-columns avec une spécificité
   de 0,2,0 ; une media query n'ajoutant aucune spécificité, l'empilage mobile
   doit être réécrit au même niveau, sinon « image à droite » reste sur deux
   colonnes sur mobile. */
@media (max-width: 900px) {
    .wf-split-container,
    .wf-split--image-left .wf-split-container,
    .wf-split--image-right .wf-split-container {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    /* Empilé : image au-dessus du texte quelle que soit la variante, pour que
       l'ordre de lecture mobile soit le même qu'avec « image à gauche ». */
    .wf-split--image-right .wf-split-image-col { order: 1; }
    .wf-split--image-right .wf-split-text-col  { order: 2; }
    .wf-split-section { padding: var(--wf-space-m, 40px) var(--pad, 24px); }
}