.section-focus-unique {
    position: relative;
    padding: 80px 0;
    background: #2d2a23; /* Fond sombre profond */
    color: #ffffff;
    overflow: hidden;
}

.focus-container {
    position: relative;
    z-index: 5;
}

.focus-grid {
    display: flex;
    align-items: center;
    gap: 60px;
}

/* --- IMAGE --- */
.focus-image {
    flex: 0 0 50%;
}

.image-wrapper {
    position: relative;
    border-radius: 20px;
    padding: 15px;
    background: linear-gradient(145deg, #1e1e1e, #141414);
    box-shadow: 20px 20px 60px #0a0a0a, -5px -5px 20px #222;
}

.image-wrapper img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
}

.badge-artisanal {
    position: absolute;
    bottom: -15px;
    right: 20px;
    background: #8d7b6f;
    color: #000;
    padding: 8px 20px;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 12px;
    border-radius: 4px;
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.4);
}

/* --- CONTENU --- */
.focus-content {
    flex: 1;
}

.focus-subtitle {
    color: #eee3ca;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 14px;
    margin-bottom: 10px;
}

.focus-title {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 25px;
}

.focus-price-box {
    margin-bottom: 30px;
    padding-left: 15px;
    border-left: 4px solid #eee3ca;
}

.price-label {
    display: block;
    font-size: 14px;
    color: #888;
}

.price-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: #eee3ca;
}

.focus-description {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #ccc;
}

.focus-description .lead {
    font-size: 1.3rem;
    color: #fff;
    margin-bottom: 15px;
}
.focus-description .describe {
    font-size: 0.9rem;
    color: #fff;
}
/* --- BOUTON --- */
.btn-focus-action {
    display: inline-block;
    background: #eee3ca;
    color: #000 !important;
    padding: 18px 40px;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: 30px;
}

.btn-focus-action:hover {
    background: #fff;
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(255, 255, 255, 0.1);
}

/* --- RESPONSIVE --- */
@media (max-width: 991px) {
    .focus-grid {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }
    .focus-image {
        flex: 0 0 100%;
        max-width: 450px;
    }
    .focus-price-box {
        border-left: none;
        padding-left: 0;
    }
    .focus-title {
        font-size: 2.5rem;
    }
}

/* --- VERSION INVERSÉE --- */

/* Fond légèrement plus sombre ou différent pour marquer la rupture si tu le souhaites, 
   sinon garde le #2d2a23 pour l'unité */
   .focus-inverse {
    background: #25221c; 
}

/* On inverse l'ordre des colonnes */
.focus-inverse .focus-grid {
    flex-direction: row-reverse;
}

/* On aligne le contenu à droite pour qu'il "réponde" à l'image */
.focus-inverse .focus-content {
    text-align: right;
}

/* On déplace la bordure dorée de la price-box à droite */
.focus-inverse .focus-price-box {
    border-left: none;
    border-right: 4px solid #eee3ca;
    padding-left: 0;
    padding-right: 15px;
}

/* Positionnement du badge sur l'image à droite */
.focus-inverse .badge-artisanal {
    right: auto;
    left: 20px;
}

/* Ajustement mobile pour garder une lecture naturelle (image puis texte) */
@media (max-width: 991px) {
    .focus-inverse .focus-grid {
        flex-direction: column; /* L'image repasse au dessus sur mobile */
    }
    .focus-inverse .focus-content {
        text-align: center;
    }
    .focus-inverse .focus-price-box {
        border-right: none;
        padding-right: 0;
    }
}

/* --- Styles spécifiques pour l'inversion --- */

.section-focus-inverse {
    background: #2d2a23; /* Garde la cohérence avec ta couleur de fond */
}

/* Sur grand écran, on s'assure que le contenu texte est aligné à gauche */
.section-focus-inverse .focus-content {
    text-align: left;
}

/* On garde la bordure à gauche pour le prix car le texte est à gauche */
.section-focus-inverse .focus-price-box {
    border-left: 4px solid #eee3ca;
    padding-left: 15px;
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 991px) {
    .section-focus-inverse .focus-grid {
        /* ICI : On force l'image à repasser en haut sur mobile malgré l'ordre PHP */
        display: flex;
        flex-direction: column-reverse; 
        text-align: center;
    }
    
    .section-focus-inverse .focus-price-box {
        border-left: none;
        padding-left: 0;
    }

    .section-focus-inverse .focus-image {
        margin-bottom: 30px; /* Espace entre l'image et le titre sur mobile */
    }
}

/* ==========================================================================
   SAINT-VALENTIN OVERRIDES
   ========================================================================== */

.section-focus-valentin-1,
.section-focus-valentin-2 {
    background: #3a0f1f;
}

.section-focus-valentin-2 {
    background: #2b0b15;
}

.section-focus-valentin-1 .focus-subtitle,
.section-focus-valentin-2 .focus-subtitle {
    color: #f3c2d4;
}

.section-focus-valentin-1 .focus-price-box,
.section-focus-valentin-2 .focus-price-box,
.section-focus-valentin-2.section-focus-inverse .focus-price-box {
    border-left-color: #f3c2d4;
    border-right-color: #f3c2d4;
}

.section-focus-valentin-1 .price-value,
.section-focus-valentin-2 .price-value {
    color: #f7d1e0;
}

.section-focus-valentin-1 .badge-artisanal,
.section-focus-valentin-2 .badge-artisanal {
    background: #f7d1e0;
    color: #4a0c24;
    box-shadow: 0 5px 15px rgba(243, 194, 212, 0.35);
}

.section-focus-valentin-1 .hero-cta,
.section-focus-valentin-2 .hero-cta {
    background-color: #a3123a;
    color: #fff;
}

.section-focus-valentin-1 .hero-cta:hover,
.section-focus-valentin-2 .hero-cta:hover {
    background-color: #c21f4c;
}


/* ==========================================================================
   FETE DES MERES OVERRIDES
   ========================================================================== */

.section-focus-fete-meres-1,
.section-focus-fete-meres-2 {
    background: #3a1f29;
}

.section-focus-fete-meres-2 {
    background: #2f1a22;
}

.section-focus-fete-meres-1 .image-wrapper,
.section-focus-fete-meres-2 .image-wrapper {
    background: linear-gradient(145deg, #4b2834, #241219);
    box-shadow: 20px 20px 60px rgba(36, 18, 25, 0.55), -5px -5px 20px rgba(255, 220, 228, 0.08);
}

.section-focus-fete-meres-1 .focus-subtitle,
.section-focus-fete-meres-2 .focus-subtitle {
    color: #f3c8d2;
}

.section-focus-fete-meres-1 .focus-price-box,
.section-focus-fete-meres-2 .focus-price-box,
.section-focus-fete-meres-2.section-focus-inverse .focus-price-box {
    border-left-color: #f3c8d2;
    border-right-color: #f3c8d2;
}

.section-focus-fete-meres-1 .price-value,
.section-focus-fete-meres-2 .price-value {
    color: #f8d8df;
}

.section-focus-fete-meres-1 .badge-artisanal,
.section-focus-fete-meres-2 .badge-artisanal {
    background: #f3c8d2;
    color: #3a1f29;
    box-shadow: 0 5px 15px rgba(243, 200, 210, 0.35);
}