/**
 * Template "Offre promotionnelle" — feuille de style générique.
 * Toutes les couleurs passent par des CSS variables, surchargeables :
 *   - via les classes .theme-{slug} ci-dessous
 *   - ou via un style inline (mode "Personnalisé" ACF)
 */

.offre-promo {
    /* Défauts (thème Noël) — surchargés par .theme-{slug} si présent */
    --theme-primary: #A61916C7;
    --theme-text: #3E3E3E;
    --theme-overlay: #7d6a3e;
    --decoration-bg: none;
}

/* ============ THEMES ============ */
.offre-promo.theme-noel {
    --theme-primary: #A61916C7;
    --theme-text: #3E3E3E;
    --theme-overlay: #7d6a3e;
    --decoration-bg: url(../images/offre-de-noel/sapin.webp);
}
.offre-promo.theme-printemps {
    --theme-primary: #5BA77A;
    --theme-text: #3E3E3E;
    --theme-overlay: #F2A6C0;
}
.offre-promo.theme-ete {
    --theme-primary: #E6A23C;
    --theme-text: #3E3E3E;
    --theme-overlay: #F0C674;
}
.offre-promo.theme-automne {
    --theme-primary: #C2410C;
    --theme-text: #3E3E3E;
    --theme-overlay: #92400E;
}
.offre-promo.theme-saint_valentin {
    --theme-primary: #D63384;
    --theme-text: #3E3E3E;
    --theme-overlay: #F8A5C2;
}
.offre-promo.theme-rentree {
    --theme-primary: #1E40AF;
    --theme-text: #3E3E3E;
    --theme-overlay: #3B82F6;
}

/* ============ TYPO ============ */
.offre-promo .font-scotch {
    font-family: "scotch-display", sans-serif;
    font-weight: 700;
    font-style: normal;
}

/* ============ COULEURS DE TEXTE ============ */
.offre-promo .titre-principal,
.offre-promo .edito-text {
    color: var(--theme-text);
}
.offre-promo .titre-coloré {
    color: var(--theme-primary);
}

/* ============ CTA ============ */
/* CTA "ghost" (utilisé en bandeau, fond clair, texte coloré) */
.offre-promo .cta.cta-promo--ghost {
    background: var(--color-nc-white, #fff);
    border: 1px solid var(--theme-primary);
    color: var(--theme-primary);
}
.offre-promo .cta.cta-promo--ghost:hover {
    background: var(--theme-primary);
    color: var(--color-nc-white, #fff);
}
/* CTA plein (utilisé sous l'édito) */
.offre-promo .cta.cta-promo:not(.cta-promo--ghost) {
    background: var(--theme-primary);
    border: 1px solid var(--theme-primary);
    color: var(--color-nc-white, #fff);
}
.offre-promo .cta.cta-promo:not(.cta-promo--ghost):hover {
    background: var(--color-nc-white, #fff);
    color: var(--theme-primary);
}

/* ============ INTRO ============ */
.offre-promo .intro {
    position: relative;
}
.offre-promo .intro .text-container {
    position: absolute;
    top: 50%;
    left: 16%;
    transform: translateY(-50%);
    width: 35%;
}
@media only screen and (max-width: 991px) {
    .offre-promo .intro .text-container {
        top: 40%;
        left: 8%;
        width: 60%;
    }
    .offre-promo .edito-inner { width: 90%; }
}
@media only screen and (min-width: 992px) {
    .offre-promo .intro {
        margin-top: 120px;
    }
}

/* Hero desktop / mobile : un picture par device, filtre par viewport. */
.offre-promo .hero-mobile { display: none; }
@media only screen and (max-width: 991px) {
    .offre-promo .hero-mobile { display: block; }
    .offre-promo .hero-desktop { display: none; }
}

/* Pas d'image hero contribuee pour un device -> on masque toute la section
   sur ce device (sinon le .text-container absolute flotte sur du vide). */
@media only screen and (min-width: 992px) {
    .offre-promo .intro.intro--no-desktop { display: none; }
}
@media only screen and (max-width: 991px) {
    .offre-promo .intro.intro--no-mobile { display: none; }
}

/* ============ EDITO ============ */
.offre-promo .edito {
    /* Dégradé teinté à partir de --theme-overlay (color-mix supporté Chrome 111+, Safari 16.4+, FF 113+) */
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--theme-overlay) 80%, transparent) 0%,
        color-mix(in srgb, var(--theme-overlay) 30%, transparent) 50%,
        color-mix(in srgb, var(--theme-overlay) 0%, transparent) 100%
    );
    padding: 60px 0;
}
.offre-promo .edito-inner {
    max-width: 555px;
    margin: 0 auto;
}
@media only screen and (max-width: 414px) {
    .offre-promo .edito-inner {
        padding: 0 30px;
    }
}

/* ============ CONDITIONS ============ */
.offre-promo .conditions {
    background: var(--decoration-bg) no-repeat top left;
    padding-bottom: 60px;
}
.offre-promo .conditions .list-conditions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 940px;
    margin: 60px auto 0;
    gap: 60px 0;
}
.offre-promo .conditions .list-conditions__item {
    border-radius: 30px;
    background-color: var(--color-nc-white, #fff);
    box-shadow: 0px 2px 25px #00000029;
    padding: 60px;
    position: relative;
}
.offre-promo .conditions .list-conditions__item .num {
    font-size: 160px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
}
@media only screen and (max-width: 991px) {
    .offre-promo .conditions .text-container {
        padding: 0 20px;
    }
    .offre-promo .conditions .list-conditions {
        padding: 0 30px 0 60px;
    }
}
@media only screen and (max-width: 340px) {
    .offre-promo .conditions .list-conditions {
        padding: 0 20px 0 40px;
    }
    .offre-promo .conditions .list-conditions__item {
        padding: 40px;
    }
    .offre-promo .conditions .list-conditions__item .num {
        font-size: 120px;
    }
}
@media only screen and (min-width: 992px) {
    .offre-promo .conditions .list-conditions__item {
        width: 42.5%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .offre-promo .conditions .list-conditions__item:nth-child(4) {
        padding: 30px 60px;
    }
    .offre-promo .conditions .list-conditions__item:nth-child(5),
    .offre-promo .conditions .list-conditions__item:nth-child(8) {
        width: 100%;
    }
}