/* ==========================================================
   PROMOTION — includes/section_promotion.inc.php
   Bande « offre du moment » : texte à gauche, photo et/ou prix à droite.
   Sans photo ni prix : texte centré. Fond = sec-theme-* (backoffice).
   Thèmes : c1/c4 (fonds sombres) texte blanc, c2/c3 texte sombre.
   Version autonome (repris du moteur uw- d'UTAH NEWS) : bouton, titre et
   espacement définis ici, ce site n'ayant pas uw-core.css.
   ========================================================== */
.uw-promo-section {
    --promo-ink: #0c1320;
    --promo-text: #fff;
    --promo-btn-bg: #fff;
    --promo-btn-text: var(--promo-ink);
    padding: 70px 0;
    background: var(--couleur2); /* fond d'origine si aucun sec-theme-* */
    color: var(--promo-text);
}

.uw-promo-section.sec-theme-c2,
.uw-promo-section.sec-theme-c3 {
    --promo-text: var(--promo-ink);
    --promo-btn-bg: var(--couleur);
    --promo-btn-text: #fff;
}

.uw-promo {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    align-items: center;
    gap: 56px;
}

.uw-promo--center {
    grid-template-columns: minmax(0, 760px);
    justify-content: center;
    text-align: center;
}

/* En-tête : .title-line / .title-line-center + h2 du site (style.css), tailles non
   redéfinies ici. Seule la couleur passe en blanc sur les fonds sombres (c1/c4),
   où var(--couleur) du petit titre et de son trait serait invisible. */
.uw-promo-head {
    margin-bottom: 18px;
}

.uw-promo-section.sec-theme-c1 .uw-promo-head .title-line,
.uw-promo-section.sec-theme-c1 .uw-promo-head .title-line-center,
.uw-promo-section.sec-theme-c1 .uw-promo-title,
.uw-promo-section.sec-theme-c4 .uw-promo-head .title-line,
.uw-promo-section.sec-theme-c4 .uw-promo-head .title-line-center,
.uw-promo-section.sec-theme-c4 .uw-promo-title {
    color: #fff;
}

.uw-promo-section.sec-theme-c1 .uw-promo-head .title-line::before,
.uw-promo-section.sec-theme-c1 .uw-promo-head .title-line-center::before,
.uw-promo-section.sec-theme-c1 .uw-promo-head .title-line-center::after,
.uw-promo-section.sec-theme-c4 .uw-promo-head .title-line::before,
.uw-promo-section.sec-theme-c4 .uw-promo-head .title-line-center::before,
.uw-promo-section.sec-theme-c4 .uw-promo-head .title-line-center::after {
    background: #fff;
}

.uw-promo-text {
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--promo-text);
    opacity: .9;
}

/* Bouton : même rendu que le skin « Classique » du moteur uw- (montée + ombre au survol) */
.uw-promo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 28px;
    padding: 15px 26px;
    border-radius: 7px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    color: var(--promo-btn-text);
    background: var(--promo-btn-bg);
    border: 1px solid var(--promo-btn-bg);
    transition: transform .25s ease, box-shadow .25s ease;
}

.uw-promo-btn:hover,
.uw-promo-btn:focus {
    color: var(--promo-btn-text);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 7px 20px rgba(17, 17, 17, .13);
}

@media (prefers-reduced-motion: reduce) {
    .uw-promo-btn,
    .uw-promo-btn:hover {
        transition: none;
        transform: none;
    }
}

/* Photo + pastille prix posée sur l'angle haut droit */
.uw-promo-media {
    position: relative;
}

.uw-promo-media img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1; /* photo carrée (1024×1024 conseillé en backoffice), recadrée si autre format */
    object-fit: cover;
    border-radius: 16px;
}

.uw-promo-prix {
    position: absolute;
    top: -22px;
    right: -22px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    background: #fff;
    color: var(--couleur);
    box-shadow: 0 12px 30px rgba(12, 19, 32, .22);
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
}

/* Prix seul (sans photo) : grande pastille centrée dans la colonne */
.uw-promo-media--prix {
    display: flex;
    justify-content: center;
}

.uw-promo-media--prix .uw-promo-prix {
    position: static;
    width: 180px;
    height: 180px;
    font-size: 44px;
}

@media (max-width: 1150px) {
    .uw-promo {
        gap: 40px;
    }

    .uw-promo-prix {
        top: -16px;
        right: -10px;
        width: 108px;
        height: 108px;
        font-size: 27px;
    }
}

@media (max-width: 800px) {
    .uw-promo-section {
        padding: 50px 0;
    }

    .uw-promo {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }

    .uw-promo-prix {
        top: -14px;
        right: 8px;
        width: 92px;
        height: 92px;
        font-size: 23px;
    }

    .uw-promo-media--prix .uw-promo-prix {
        width: 140px;
        height: 140px;
        font-size: 34px;
    }
}