/* ═══════════════════════════════════════════
   COLVER BLOC — style.css (frontend)
   ═══════════════════════════════════════════ */

.wrap-colver-bloc {
    overflow: hidden;
}

.colver-bloc {
    display: flex;
    align-items: stretch;
    position: relative;
}

/* ─── Colonne images : hauteur dictée par l'image principale ───
   flex: 1 1 auto → absorbe tout l'espace restant (y compris le
   débord bord-écran), quelle que soit la largeur d'écran. */
.colver-bloc__images {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

/* Image principale */
.colver-img-main {
    display: block;
    position: absolute;
    width: 80%;
    height: 100%;
    object-fit: cover;
}

.colver-bloc--img-left  .colver-img-main { left: 0;    right: auto; }
.colver-bloc--img-right .colver-img-main { right: 0;   left: auto;  }

/* Image secondaire : position et taille 100% via style inline en px */
.colver-img-secondary {
    position: absolute;
    object-fit: cover;
    border: 4px solid #fff;
    /*box-shadow: 0 8px 40px rgba(0,0,0,.25);*/
    z-index: 2;
    display: block;
    width: 300px;
    height: 300px;
    bottom: -30px;
}

/* Mode 2 : image secondaire remontée (bottom: 60px au lieu de -30px) */
.colver-bloc--sec-mode-2 .colver-img-secondary {
    bottom: 60px;
}

/* ─── Colonne contenu ───
   Ce bloc est toujours utilisé dans un groupe "pleine largeur"
   (alignfull), donc le conteneur du bloc = largeur de l'écran, pas
   la grille de contenu. Pour que le texte suive quand même la
   grille WordPress, sa largeur est calculée à partir de --clb-content-fraction
   (réglage "Largeur colonne texte") multiplié par la piste "large" du
   thème (var --wp--style--global--wide-size) et son
   bord extérieur est décalé de la même gouttière que les blocs
   alignwide : calc( (100% - wide-size) / 2 ). Avant, le bord du
   texte suivait juste un % du conteneur, ce qui le collait au bord
   de l'écran au lieu de la grille — d'où l'ancien correctif en
   margin-left figé (192.5px) qui ne marchait qu'à une largeur
   d'écran précise. Ici c'est calculé, donc valable à toute largeur.
   min()/max() : entre ~1350px (où le média-query ci-dessous prend
   le relais) et la largeur "wide" du thème, le conteneur devient
   plus étroit que wide-size — sans clamp, la gouttière calc()
   passait en négatif et poussait le texte hors de l'écran (masqué
   par l'overflow:hidden du wrapper). min() ramène la largeur à 50%
   du conteneur dans ce cas, max() ramène la marge à 0. */
.colver-bloc__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0px;
    width: min( 100%, calc( var( --clb-content-fraction, 0.5 ) * var( --wp--style--global--wide-size, 1340px ) ) );
    flex: 0 0 auto;
    background: transparent;
}
/* ─── Décalage du texte pour suivre la grille WordPress ─── */

.colver-bloc--img-right .colver-bloc__content {
    margin-left: max( 0px, calc( ( 100% - var( --wp--style--global--wide-size, 1340px ) ) / 2 ) );
}

.colver-bloc--img-left .colver-bloc__content {
    margin-right: max( 0px, calc( ( 100% - var( --wp--style--global--wide-size, 1340px ) ) / 2 ) );
}

/* ════════════════════════════════════════════
   BORD ÉCRAN
   Le bloc déclare le support d'alignement natif WordPress
   ("align":"full", classe .alignfull ajoutée par le rendu PHP) :
   c'est WordPress qui gère le débordement bord-à-bord — y compris le
   padding global du thème (root padding) et le cas d'un groupe parent
   en layout "contraint" — plutôt qu'un calcul manuel basé sur 100vw,
   qui ne pouvait pas deviner ces cas-là.
   ════════════════════════════════════════════ */

.colver-bloc--img-left .colver-img-secondary {
    right: 71px !important;
}

.colver-bloc--img-right .colver-img-secondary {
    left: 30px !important;
}

/* ─── Responsive ─── */
@media ( max-width: 1550px ) {
    .colver-bloc__content,
    .colver-bloc--img-left .colver-bloc__content,
    .colver-bloc--img-right .colver-bloc__content {
        padding: 40px 50px 10px;
        width: var( --clb-content-width, 50% );
        flex: 0 0 auto;
        margin-left: 0;
        margin-right: 0;
    }

    /* +20px de padding-left uniquement quand l'image est à gauche
       (ne touche pas au cas img-right ni à la règle ci-dessus). */
    .colver-bloc--img-left .colver-bloc__content {
        padding-left: 70px;
    }

    /* flex:1 1 auto (pas de largeur fixe) : la colonne images absorbe
       tout l'espace restant et reste collée au bord écran quelle que
       soit --clb-content-width — une largeur fixe ici laisserait un
       espace non réclamé du côté du bord (visible côté droit quand
       l'image est à droite). */
    .colver-bloc__images {
        flex: 1 1 auto;
    }

    .colver-img-main {
        width: 100% !important;
    }

    .colver-img-secondary {
        width: 250px !important;
        height: 250px !important; 
    }

    .colver-bloc--img-left .colver-img-secondary {
        right: -45px !important;
    }

    .colver-bloc--img-right .colver-img-secondary {
        left: -45px !important;
    }
}

@media ( max-width: 1150px ) {
    .colver-bloc__content,
    .colver-bloc--img-left .colver-bloc__content,
    .colver-bloc--img-right .colver-bloc__content {
        width: var( --clb-content-width, 50% );
        flex: 0 0 auto;
        margin-left: 0;
        margin-right: 0;
    }

    .colver-bloc__images {
        flex: 1 1 auto;
    }

    .colver-img-main {
        width: 100% !important;
    }

    .colver-img-secondary {
        width: 250px !important;
        height: 250px !important; 
    }
}

@media ( max-width: 768px ) {
    .colver-bloc,
    .colver-bloc--img-left,
    .colver-bloc--img-right {
        display: flex;
        flex-direction: column;
        margin-left: 0 !important;
        margin-right: 0 !important;
        left: 0 !important;
        right: auto !important;
    }
    .colver-img-main {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        left: 0 !important;
        right: auto !important;
    }

    .colver-bloc__images {
        width: 100% !important;
        flex-basis: auto !important;
        padding: 0;
    }

    .colver-bloc--img-right .colver-img-secondary,
    .colver-bloc--img-left  .colver-img-secondary,
    .colver-img-secondary {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        left: 0 !important;
        top: 16px !important;
        border: none;
    }
    .colver-bloc__content {
        width: 100% !important;
        flex-basis: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 40px 24px 10px;
        box-sizing: border-box;
    }
}