/* ============================================================
   PAGE : style-lp
   Layout global de la landing page. Mobile-first ; au-dessus de
   1024px on bascule en grille 2 colonnes (visuel sticky à gauche,
   tunnel d'achat à droite), puis sections full width en dessous.
   ============================================================ */

.page-style-lp {
}

/* ---- Container width par breakpoint ---- */

@media (min-width: 768px) {
    .page-style-lp .container {
        max-width: 760px;
    }
}

@media (min-width: 1024px) {
    .page-style-lp .container {
        max-width: 960px;
    }
}

@media (min-width: 1280px) {
    .page-style-lp .container {
        max-width: 1180px;
    }
}

/* ---- Layout 2 colonnes desktop ---- */

/* Mobile/tablet : pas de grid, les enfants s'empilent normalement.
   Comme le wrapper n'a pas de styles, on peut le laisser en block. */
.page-style-lp-cols {
    /* Rien en mobile : les .container internes des partials gèrent leur largeur */
}

@media (min-width: 1024px) {
    .page-style-lp-cols {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        grid-template-areas:
            "hero    hero"
            "visual  tunnel";
        grid-template-rows: auto 1fr;
        gap: var(--sp-4) var(--sp-10);
        max-width: 1180px;
        margin: var(--sp-6) auto var(--sp-8);
        padding-inline: var(--sp-6);
        align-items: start;
    }

    .page-style-lp-hero { grid-area: hero; }
    .page-style-lp-visual { grid-area: visual; }
    .page-style-lp-tunnel { grid-area: tunnel; }

    /* Colonne visuelle : scroll normalement avec la page (pattern lafficherie.com).
       Le visuel suit le rythme du tunnel droit. */
    .page-style-lp-visual {
        align-self: start;
    }

    /* La colonne tunnel hérite de l'ordre normal */
    .page-style-lp-tunnel {
        display: flex;
        flex-direction: column;
        gap: var(--sp-4);
        min-width: 0;
    }

    /* En desktop, les partials enfants ne doivent plus être contraints par
       leur container interne — c'est notre grid qui gère la largeur. */
    .page-style-lp-cols .container {
        max-width: none;
        padding-inline: 0;
    }

    /* Le before-after dans la col gauche : largeur cap à ce que la hauteur
       (= width × 1.414) ne dépasse pas ~70vh (sous le CTA tunnel). */
    .page-style-lp-visual .p-before-after {
        max-width: min(100%, 50vh);
        margin-inline: auto;
    }

    .page-style-lp-visual .p-before-after-section {
        /* Garde un padding-bottom suffisant pour accueillir la pilule social
           proof (bottom: -60px en desktop) — sinon elle déborde sur le bandeau
           atelier en dessous. */
        padding-block: 0 var(--sp-16);
    }

    /* Bascule before-after / preview cadre dans la colonne visuelle */
    .page-style-lp-visual-frame {
        padding-block: 0;
    }
    .page-style-lp-visual-frame[hidden] {
        display: none;
    }
    .page-style-lp-visual-before-after[hidden] {
        display: none;
    }

    /* La preview du format-selector, déplacée dans la colonne visuelle :
       ratio carré-ish (4/3 sur mobile, on garde) mais on cap à hauteur viewport. */
    .page-style-lp-visual-frame .p-format-selector-preview {
        max-height: 70vh;
        aspect-ratio: 4 / 3;
        width: 100%;
    }

    /* Le bouton "Voir le rendu avec un encadrement" de l'upload-zone est
       redondant en desktop (la zone visuelle gauche montre déjà le rendu). */
    .page-style-lp-tunnel .p-upload-zone-see-frame {
        display: none;
    }

    /* Espacement entre titre et upload-zone : on retire les paddings hérités
       du mobile-first qui s'accumulent (hero padding-block + section padding). */
    .page-style-lp-tunnel .p-hero {
        padding-block: 0;
        margin-bottom: 0;
    }

    .page-style-lp-tunnel .p-upload-zone-section {
        padding-block: 0;
    }

    /* Bandeau atelier (gauche) + features (droite) sur une ligne en desktop */
    .page-style-lp-trust {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-5);
        align-items: stretch;
        max-width: 1180px;
        margin-inline: auto;
        padding-inline: var(--sp-6);
    }

    /* Les containers internes des deux partials ne doivent plus contraindre
       la largeur — le grid parent gère. */
    .page-style-lp-trust .container {
        max-width: none;
        padding-inline: 0;
    }

    /* Étire la card feature-row pour matcher la hauteur du bandeau */
    .page-style-lp-trust .p-impression-banner-section,
    .page-style-lp-trust .p-feature-row-section {
        height: 100%;
        padding-block: 0;
    }

    .page-style-lp-trust .p-impression-banner,
    .page-style-lp-trust .p-feature-row {
        height: 100%;
    }
}

/* Note : l'ancien wrapper `.page-style-lp-email-capture` a été retiré.
   Le bouton "Sauvegarder mon visuel" est désormais une 4ᵉ vignette dans
   le switcher de vues du format-selector ; la modal email-capture est
   incluse directement par style-lp.php (le <dialog> ne consomme pas de
   flux visuel). */