/*
 * AML Child Theme — page-offres.css
 * Page /offres/ — Packs, cartes cadeaux, guides offerts
 */

/* ══════════════════════════════════════
   PAGE OFFRES — page-offres.css
══════════════════════════════════════ */

/* ── HERO ── */
.hero-bottom-curve {
    position: relative;
    padding-bottom: 20px;
   
}

.hero-bottom-curve::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: #FDF7F0;
    clip-path: polygon(
        0% 100%,
        0% 60%,
        5% 45%,
        15% 25%,
        25% 12%,
        35% 5%,
        50% 0%,
        65% 5%,
        75% 12%,
        85% 25%,
        95% 45%,
        100% 60%,
        100% 100%
    );
    z-index: 3;
}

/* ── Hero Offres ── */
.hero-offres {
    padding-left: 150px !important;
    padding-right: 150px !important;
}

/* ── Image hero ── */
.hero-img {
    width: 70%;
    height: auto;
    border-radius: 16px;
}

/* ── Responsive tablette ── */
@media (max-width: 1024px) {
    .hero-offres {
        padding-left: 60px !important;
        padding-right: 60px !important;
    }
    .hero-img {
        width: 85%;
    }
}

@media (max-width: 768px) {
    .hero-offres {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
    .hero-img {
        width: 100% !important;
        max-width: 100% !important;
    }
    .column-img{
        margin-top:45px!important;
    }
}



/* ── NAVIGATION ANCRES ── */
.offres-hero-nav {
    position: relative;
    z-index: 3;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 2rem;
}

.offres-nav-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--wp--preset--font-family--body);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--wp--preset--color--brun-profond);
    background: rgba(255, 255, 255, .55);
    border: 0.5px solid var(--wp--preset--color--blush);
    border-radius: 999px;
    padding: 10px 22px;
    text-decoration: none;
    transition: background .25s, color .25s, border-color .25s;
}

.offres-nav-pill:hover {
    background: var(--wp--preset--color--blanc);
    color: var(--wp--preset--color--terracotta);
    border-color: var(--wp--preset--color--terracotta);
}

.offres-nav-pill:focus-visible {
    outline: 2px solid var(--wp--preset--color--terracotta);
    outline-offset: 3px;
}

.pill-icon {
    font-size: 10px;
    color: var(--wp--preset--color--terracotta);
    line-height: 1;
}

/* ── SECTION PACKS ── */
.section-packs {
    position: relative;
    margin-top: -80px;
    padding-top: 80px;
    z-index: 2;
}

/* ── RESPONSIVE ── */
@media (max-width: 640px) {
    .hero-bottom-curve::after {
        height: 50px;
    }

    .offres-hero-nav {
        flex-direction: column;
        align-items: center;
        gap: .75rem;
    }

    .offres-nav-pill {
        width: 100%;
        max-width: 260px;
        justify-content: center;
    }
}

/* ── PACKS GRID ── */
.offres-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    width: 100%;
}
.offre-card {
    background: var(--wp--preset--color--blanc);
    border: 0.5px solid #EDD5B0;
    border-radius: 16px;
    padding: 2.25rem 1.75rem;
    display: flex;
    flex-direction: column;
    position: relative;
}
.offre-card.featured {
    transform: scale(1.05);
    transform-origin: center;
    z-index: 1;
    box-shadow: 0 12px 40px rgba(196, 112, 58, 0.15);
    border: 1.5px solid var(--wp--preset--color--terracotta);
    background: #FFFAF5;
}
.offre-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--wp--preset--color--terracotta);
    color: var(--wp--preset--color--blanc);
    font-size: 14px;
    letter-spacing: .15em;
    text-transform: uppercase;
    padding: 4px 18px;
    border-radius: 999px;
    white-space: nowrap;
}
.offre-num {
    font-family: var(--wp--preset--font-family--display);
    font-size: 3.7rem;
    font-weight: 300;
    color: #C4703A;
    line-height: 1;
    margin-bottom: .35rem;
}
.offre-name {
    font-family: var(--wp--preset--font-family--display);
    font-size: 2rem;
    font-weight: 400;
    color: var(--wp--preset--color--brun-profond);
    margin-bottom: .2rem;
}
.offre-tagline {
    font-family: jost;
    font-size: 20px;
    color: var(--wp--preset--color--terracotta);
    margin-bottom: 1.25rem;
}
.offre-divider {
    width: 28px;
    height: 1px;
    background: var(--wp--preset--color--blush);
    margin-bottom: 1.25rem;
}
.offre-sessions {
    list-style: none;
    margin-bottom: 1.5rem;
    flex: 1;
    padding: 0;
}
.offre-sessions li {
    font-size: 16px;
    color: var(--wp--preset--color--brun-chaud);
    padding: .4rem 0;
    border-bottom: 0.5px solid var(--wp--preset--color--sable-doux);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
}
.offre-sessions li:last-child { border-bottom: none; }
.session-detail {
    font-size: 14px;
    color: var(--wp--preset--color--terracotta);
    white-space: nowrap;
    flex-shrink: 0;
}
.offre-price-row {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    margin-bottom: .6rem;
}
.offre-price {
    font-family: var(--wp--preset--font-family--display);
    font-size: 2.5rem;
    font-weight: 300;
    color: var(--wp--preset--color--terracotta-deep);
    line-height: 1;
}
.offre-economy {
    font-size: 14px;
    color: var(--wp--preset--color--terracotta);
    background: var(--wp--preset--color--sable-doux);
    padding: 3px 10px;
    border-radius: 999px;
}
/* ── Description offre signature ── */
.offre-signature-desc {
    font-family: jost;
    font-size: 15px;
    
    color: var(--wp--preset--color--brun-chaud);
    line-height: 1.7;
    margin: 0 0 1rem;
}
.offre-btn {
    display: block;
    text-align: center;
    font-family: var(--wp--preset--font-family--body);
    font-size: 13px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--wp--preset--color--terracotta);
    border: 1px solid var(--wp--preset--color--terracotta);
    border-radius: 999px;
    padding: 12px;
    text-decoration: none;
    transition: background .25s, color .25s;
    margin-top: .5rem;
}
.offre-btn:hover {
    background: var(--wp--preset--color--terracotta);
    color: var(--wp--preset--color--blanc);
}
.offre-card.featured .offre-btn {
    background: var(--wp--preset--color--terracotta);
    color: var(--wp--preset--color--blanc);
}
.offre-card.featured .offre-btn:hover {
    background: var(--wp--preset--color--terracotta-deep);
}
@media (max-width: 768px) {
    .offres-grid {
        grid-template-columns: 1fr;
    }
    .offre-card.featured {
        transform: none;
    }
}

/* ══════════════════════════════════════
   FluentForms — Guides offerts
   Formulaire 4 (Rituels) + Formulaire 5 (Art de Revenir)
   À ajouter dans page-offres.css
   ══════════════════════════════════════ */

/* ── Labels ── */
#fluentform_4 .ff-el-form-control label,
#fluentform_5 .ff-el-form-control label,
#fluentform_4 .ff-el-input--label label,
#fluentform_5 .ff-el-input--label label {
    font-family: 'Jost', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #5D4E47 !important;
    margin-bottom: 6px !important;
}

/* ── Champs input ── */
#fluentform_4 .ff-el-form-control input,
#fluentform_5 .ff-el-form-control input,
#fluentform_4 .ff-el-form-control input[type="text"],
#fluentform_5 .ff-el-form-control input[type="text"],
#fluentform_4 .ff-el-form-control input[type="email"],
#fluentform_5 .ff-el-form-control input[type="email"] {
    font-family: 'Jost', sans-serif !important;
    font-size: 14px !important;
    color: #3D2E27 !important;
    background: #FDF5EC !important;
    border: 0.5px solid #EDD5B0 !important;
    border-radius: 999px !important;
    padding: 10px 18px !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease !important;
}

#fluentform_4 .ff-el-form-control input:focus,
#fluentform_5 .ff-el-form-control input:focus {
    border-color: #C4703A !important;
    outline: none !important;
    box-shadow: none !important;
}

#fluentform_4 .ff-el-form-control input::placeholder,
#fluentform_5 .ff-el-form-control input::placeholder {
    color: #B8956A !important;
    font-style: italic !important;
}

/* ── Bouton formulaire 4 — Terracotta ── */
#fluentform_4 .ff-btn-submit {
    font-family: 'Jost', sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    background: #C4703A !important;
    color: #fff !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 12px 24px !important;
    cursor: pointer !important;
    transition: background 0.25s ease !important;
    box-shadow: none !important;
    width: 100% !important;
}

#fluentform_4 .ff-btn-submit:hover {
    background: #A0522D !important;
}

/* ── Bouton formulaire 5 — Brun profond ── */
#fluentform_5 .ff-btn-submit {
    font-family: 'Jost', sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    background: #6B7A5D !important;
    color: #fff !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 12px 24px !important;
    cursor: pointer !important;
    transition: background 0.25s ease !important;
    box-shadow: none !important;
    width: 100% !important;
}

#fluentform_5 .ff-btn-submit:hover {
    background: #5D4E47 !important;
}

/* ── Message de succès ── */
#fluentform_4 .ff-message-success,
#fluentform_5 .ff-message-success {
    font-family: 'Jost', sans-serif !important;
    font-size: 14px !important;
    color: #C4703A !important;
    font-style: italic !important;
    text-align: center !important;
    padding: 16px 0 !important;
    background: none !important;
    border: none !important;
}

/* ── Erreurs de validation ── */
#fluentform_4 .error,
#fluentform_5 .error {
    font-family: 'Jost', sans-serif !important;
    font-size: 12px !important;
    color: #C4703A !important;
}

@media (max-width: 768px) {
    .offres-grid {
        grid-template-columns: 1fr;
    }
}