/*
 * Accueil d'orion sur mobile — chargé par ooprint-accueil.php (page d'accueil, ou toute page rendant le bloc
 * « slider-accueil »). Deux sujets, tous deux sous un point de rupture : rien ne change sur bureau.
 *
 * 1. Slider d'accueil (section .ooprint-slider). Chaque [ux_image] du slider est enveloppée par le mu-plugin dans
 *    .ooprint-slide, avec un bloc .ooprint-slide__text lu dans la médiathèque. Sous 850 px (point de rupture
 *    mobile/tablette de Flatsome) : image recadrée en 16/9 sur sa partie gauche — le produit ; le texte incrusté à
 *    droite du visuel sort du cadre — puis le texte HTML et un bouton pleine largeur. Au-dessus : image entière,
 *    texte masqué, comme avant.
 * 2. Bande « avantages » (.plusprod, HTML Magento stylé par ooprint-cms.css). Sous 992 px (les trois colonnes
 *    Bootstrap ne tiennent plus) : trois lignes alignées, pictogramme dans une pastille à gauche, sans les retraits
 *    inégaux (0 puis 40 px), les largeurs de paragraphe (80 %, 60 %), la hauteur figée (112 px) et les <br> forcés
 *    de la version colonnes.
 */

/* ---- 1. Slider : enveloppe neutre sur bureau ---- */
.ooprint-slide {
    width: 100%;
}
.ooprint-slide > .img {
    margin-bottom: 0; /* l'image n'est plus enfant direct du slider : on garde la règle Flatsome .slider > .img */
}
.ooprint-slide__text {
    display: none;
}

@media (max-width: 849px) {
    .ooprint-slider .flickity-prev-next-button {
        display: none; /* on glisse au doigt ; les flèches tomberaient sur le texte */
    }
    .ooprint-slide .img-inner img {
        display: block;
        width: 100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        object-position: left center;
    }
    .ooprint-slide__text {
        display: block;
        background: #faf6f0;
        border-bottom: 1px solid #eee;
        padding: 14px 16px 46px; /* place en bas pour les points du slider (Flatsome : bottom 15 px, en absolu) */
        text-align: left;
    }
    .ooprint-slide__text p {
        margin: 0;
    }
    .ooprint-slide__title {
        font-size: 22px;
        line-height: 1.15;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: .01em;
        color: #1b1b1b;
    }
    .ooprint-slide__tag {
        margin-top: 4px !important;
        font-size: 15px;
        font-weight: 700;
        color: #333;
    }
    .ooprint-slide__sent {
        margin-top: 6px !important;
        font-size: 13px;
        line-height: 1.45;
        color: #555;
    }
    .ooprint-slider a.button.ooprint-slide__cta {
        display: block;
        width: 100%;
        margin: 12px 0 0;
        text-align: center;
    }
}

/* ---- 2. Avantages ---- */
@media (max-width: 991px) {
    .ooprint-cms .avantages {
        display: flex;
        flex-direction: column;
        margin: 0;
        padding: 4px 16px; /* le .container Bootstrap perd sa marge intérieure sous 768 px */
        text-align: left;
    }
    .ooprint-cms .avantages div.avantage {
        position: relative;
        float: none;
        width: 100%;
        height: auto;
        min-height: 0;
        margin: 0;
        padding: 12px 0 12px 58px;
        border-right: 0;
        border-bottom: 1px solid #e3e3e3;
        background-size: 0 0; /* le pictogramme est repris par la pastille ::before (background-image: inherit) */
    }
    .ooprint-cms .avantages div.avantage:last-child {
        border-bottom: 0;
    }
    .ooprint-cms .avantages div.avantage::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        width: 42px;
        height: 42px;
        margin-top: -21px;
        border-radius: 50%;
        background-color: #fff;
        background-image: inherit;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 22px auto;
        border: 1px solid #e0e0e0;
        box-sizing: border-box;
    }
    .ooprint-cms .avantages div.avantage.france::before {
        background-size: 26px auto;
    }
    .ooprint-cms .avantages div.avantage h2 {
        margin: 0 0 2px;
        font-size: 15px;
        line-height: 1.3;
        font-weight: 800;
    }
    .ooprint-cms .avantages div.avantage p {
        width: 100%;
        margin: 0;
        padding: 0;
        font-size: 13px;
        line-height: 1.45;
        color: #444;
    }
    .ooprint-cms .avantages div.avantage p br {
        display: none;
    }
}