/* ─── Block: wf-cover - style wireframe ─── */

/* ── Breakout commun à tous les templates ── */
.wf-cover {
    position: relative;
    /*
     * Breakout du container :
     * Le container a max-width (--max) + margin:auto + padding (--pad).
     * À viewport > --max : il faut compenser le padding ET les marges auto = (100vw - --max) / 2
     * À viewport ≤ --max : pas de marges auto, on compense juste le padding
     * max(0px, ...) évite une valeur négative quand le viewport est plus petit que --max
     */
    width: 100vw;
    margin-left: calc(-1 * (max(0px, (100vw - var(--wf-max-width, var(--max))) / 2) + var(--pad)));
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--surf);
}

/* Fond media réel (atténué en wireframe) */
.wf-cover-bg-wrap { position: absolute; inset: 0; z-index: 1; }
.bg-media {
    width: 100%; height: 100%;
    object-fit: cover;
    /*opacity: .25;
    filter: grayscale(1);*/
}

/* Placeholder wireframe */
.wf-cover .wf-cover-placeholder {
    position: absolute; inset: 0; z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
}
.wf-cover .wf-cover-placeholder svg:not(.wf-play-icon) {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
}

/* Placeholder vidéo */
.wf-cover-placeholder--video {
    background: #1a1714; /* Toujours sombre - représente un fond vidéo */
}
.wf-play-icon {
    position: relative; z-index: 2;
    width: 60px; height: 60px;
    opacity: .7;
}

/* Label de dimension / type */
.wf-placeholder-label {
    position: relative; z-index: 2;
    font: 400 11px/1 var(--mono, 'DM Mono', monospace);
    letter-spacing: .15em;
    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);
}
.wf-cover-placeholder--video .wf-placeholder-label {
    color: var(--bd);
    background: rgba(26, 23, 20, 0.9);
    border-color: var(--mt);
}

/* Overlay - couleur et opacité définies en inline style depuis les attributs du bloc */
.wf-cover-overlay {
    position: absolute; inset: 0;
    z-index: 2;
}

/* Contenu.
   Le padding vertical du bloc vit ICI, pas sur .wf-cover : la racine est
   un conteneur en min-height avec contenu centré, un padding sur elle ne
   ferait que l'allonger sans rien aérer. C'est pour ça que .wf-cover ne
   déclare aucun padding natif — et pourquoi le réglage wfPadding, qui en
   posait 48px d'office, s'additionnait ici pour ~256px de vide vertical. */
.wf-cover-content {
    position: relative; z-index: 3;
    text-align: center;
    padding: var(--wf-space-m, 48px) var(--pad, 40px);
    width: 100%;
    max-width: var(--wf-max-width, 1240px);
}
.wf-cover .wf-cover-content h1 {
    font-family: var(--sans, 'Space Grotesk', sans-serif);
    font-weight: 700;
    font-size: var(--cover-title-size, clamp(28px, 5vw, 58px));
    line-height: 1.1;
    letter-spacing: -.03em;
    color: var(--cover-title-color, var(--tx));
    margin-bottom: 16px;
}
.wf-cover .wf-cover-content .wf-subtitle {
    font-family: var(--sans, 'Space Grotesk', sans-serif);
    font-size: var(--cover-subtitle-size, var(--wf-base-font-size, 16px));
    line-height: 1.7;
    color: var(--cover-subtitle-color, var(--mt));
    max-width: 540px; margin: 0 auto 20px;
}

/* Pilule au-dessus du titre */
.wf-cover .wf-cover-pill {
    display: inline-block;
    font: 400 11px/1 var(--mono, 'DM Mono', monospace);
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--cover-subtitle-color, var(--mt));
    border: var(--wf-border-width, 1.5px) solid var(--bd);
    background: color-mix(in srgb, var(--bg) 70%, transparent);
    padding: 5px 14px;
    border-radius: 999px;
    margin-bottom: 16px;
}
/* Sous-titres */
.wf-sub-titles-group {
    display: flex; justify-content: center;
    flex-wrap: wrap; gap: 8px; margin-top: 20px;
}
.wf-cover .wf-sub-item {
    font: 400 11px/1 var(--mono, 'DM Mono', monospace);
    text-transform: uppercase; letter-spacing: .1em;
    color: var(--cover-subtitle-color, var(--mt));
    border: var(--wf-border-width, 1.5px) solid var(--bd);
    padding: 5px 12px; border-radius: var(--r, 3px);
    background: transparent;
}

/* Bouton son */
.wf-sound-btn {
    position: absolute; bottom: 12px; left: 40px; z-index: 4;
    background: transparent; color: var(--mt);
    border: var(--wf-border-width, 1.5px) solid var(--bd);
    border-radius: var(--r, 3px);
    padding: 5px 12px;
    font: 400 10px/1 var(--mono, 'DM Mono', monospace);
    text-transform: uppercase; letter-spacing: .1em;
    cursor: pointer; transition: background .15s;
}
.wf-sound-btn:hover { background: color-mix(in srgb, var(--surf) 60%, transparent); }
.wf-sound-btn.is-active { border-color: var(--mt); color: var(--tx); }

/* ═══════════════════════════════════════════════════════
   MOBILE — TEMPLATE CENTERED

   Le problème : le texte est posé à même la photo, et sa lisibilité
   dépend entièrement du voile réglé par l'auteur (couleur + opacité
   libres). Sur desktop la photo est large, le texte court, ça passe.
   Sur mobile le bloc de texte couvre la moitié de l'image, la photo
   est dense, et dès qu'on ajoute une description le contraste
   s'effondre — c'est le cas le plus fréquent, et le pire.

   La solution ne peut pas être « assombrir le voile » : selon la
   couleur choisie par l'auteur, le texte est clair OU sombre, et
   foncer le fond aggraverait la moitié des cas.

   On donne donc au texte son propre support : un panneau aux couleurs
   du thème, qui garantit le contraste quel que soit le réglage du
   voile et quelle que soit la photo. Le titre reste sur --bg avec
   --tx, exactement comme partout ailleurs sur le site.
═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    .wf-cover {
        /* svh plutôt que vh : la barre d'URL mobile ne fait plus
           sauter la hauteur au premier scroll. */
        min-height: 62svh;
    }

    .wf-cover--centered .wf-cover-content {
        width: auto;
        margin: 0 var(--pad, 16px);
        padding: 28px 22px;
        background: color-mix(in srgb, var(--bg) 86%, transparent);
        -webkit-backdrop-filter: blur(7px);
        backdrop-filter: blur(7px);
        border: var(--wf-border-width, 1.5px) solid var(--bd);
        border-radius: var(--r, 3px);
    }

    /* Dans le panneau, les tailles de titre desktop deviennent
       écrasantes : on plafonne sans toucher au réglage de l'auteur. */
    .wf-cover--centered .wf-cover-content h1 {
        font-size: min(var(--cover-title-size, 32px), 2.25rem);
        margin-bottom: 12px;
    }

    .wf-cover--centered .wf-cover-content .wf-subtitle {
        font-size: max(var(--cover-subtitle-size, 15px), 15px);
        line-height: 1.6;
        margin-bottom: 0;
    }

    /* Les pastilles passaient sur trois lignes et mangeaient l'écran. */
    .wf-sub-titles-group { gap: 6px; margin-top: 16px; }
    .wf-cover .wf-sub-item { font-size: 10px; padding: 4px 9px; }

    .wf-cover-content { padding: 48px var(--pad, 16px); }

    /* Bouton son : sous le panneau plutôt qu'au ras du bord gauche,
       où il chevauchait le texte sur les petits écrans. */
    .wf-sound-btn { left: auto; right: var(--pad, 16px); bottom: 16px; }
}

/* Très petits écrans : le panneau colle aux bords, on récupère
   la largeur perdue en marges. */
@media (max-width: 400px) {
    .wf-cover--centered .wf-cover-content {
        margin: 0 12px;
        padding: 24px 18px;
    }
}

/* ── Template : split & portrait ─────────────────────── */

/* Structure commune split + portrait */
.wf-cover--split,
.wf-cover--portrait {
    flex-direction: row;
    align-items: stretch;
    min-height: 70vh;
    background: var(--bg);
}

/* Pane média */
.wf-cover--split .wf-cover-media-pane,
.wf-cover--portrait .wf-cover-media-pane {
    flex: 0 0 50%;
    position: relative;
    overflow: hidden;
}
.wf-cover--portrait .wf-cover-media-pane {
    flex: 0 0 42%;
}

.wf-cover--split .wf-cover-media-pane .bg-media,
.wf-cover--portrait .wf-cover-media-pane .bg-media {
    width: 100%; height: 100%;
    object-fit: cover;
}

/* Placeholder dans pane */
.wf-cover--split .wf-cover-placeholder,
.wf-cover--portrait .wf-cover-placeholder {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 14px;
}
.wf-cover--split .wf-cover-placeholder svg:not(.wf-play-icon),
.wf-cover--portrait .wf-cover-placeholder svg:not(.wf-play-icon) {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
}

/* Pane texte */
.wf-cover--split .wf-cover-text-pane,
.wf-cover--portrait .wf-cover-text-pane {
    flex: 1;
    display: flex;
    align-items: center;
    padding: var(--pad, 40px);
    background: var(--surf);
}

.wf-cover--split .wf-cover-content,
.wf-cover--portrait .wf-cover-content {
    text-align: left;
    max-width: 560px;
    padding: 0;
}

.wf-cover--split .wf-sub-titles-group,
.wf-cover--portrait .wf-sub-titles-group {
    justify-content: flex-start;
}

/* Portrait : image en second (droite) avec border-radius */
.wf-cover--portrait .wf-cover-media-pane {
    padding: var(--pad, 40px) var(--pad, 40px) var(--pad, 40px) 0;
    background: var(--surf);
}
.wf-cover--portrait .wf-cover-media-pane .bg-media {
    border-radius: var(--r, 3px);
    height: 100%;
    min-height: 400px;
}
.wf-cover--portrait .wf-cover-media-pane .wf-cover-placeholder {
    border-radius: var(--r, 3px);
    position: relative; inset: unset;
    height: 100%; min-height: 400px;
}

/* ── Responsive split / portrait ──────────────────────
   Ces deux templates séparent déjà l'image du texte : pas besoin du
   panneau du template centered, le texte est sur un fond plein.
   On corrige en revanche la hauteur de l'image, figée à 280px : une
   photo panoramique s'y trouvait recadrée jusqu'au sujet, une photo
   portrait laissait deux bandes vides. Un aspect-ratio s'adapte au
   format réel et suit la largeur de l'écran. */
@media (max-width: 768px) {
    .wf-cover--split,
    .wf-cover--portrait {
        flex-direction: column;
        min-height: 0;   /* la hauteur vient du contenu, pas du viewport */
    }

    .wf-cover--split .wf-cover-media-pane,
    .wf-cover--portrait .wf-cover-media-pane {
        flex: 0 0 auto;
        aspect-ratio: 16 / 10;
        padding: 0;
    }

    .wf-cover--portrait .wf-cover-media-pane {
        padding: 0 var(--pad, 16px) var(--pad, 16px);
    }
    /* min-height: 400px imposait une image plus haute que large sur
       un écran de 390px. L'aspect-ratio du pane suffit. */
    .wf-cover--portrait .wf-cover-media-pane .bg-media,
    .wf-cover--portrait .wf-cover-media-pane .wf-cover-placeholder {
        min-height: 0;
    }

    .wf-cover--split .wf-cover-text-pane,
    .wf-cover--portrait .wf-cover-text-pane {
        padding: 32px var(--pad, 16px);
    }
    .wf-cover--split .wf-cover-content,
    .wf-cover--portrait .wf-cover-content {
        max-width: none;
    }
}

/* SVG placeholder - override attributs hardcodés, suit les modes */
.wf-cover-placeholder:not(.wf-cover-placeholder--video) svg rect {
    fill: var(--surf);
    stroke: var(--bd);
}
.wf-cover-placeholder:not(.wf-cover-placeholder--video) svg line {
    stroke: var(--bd);
}