:root {
    --fb-post-height: 420px;

/* Fond */
    --fb-bg-page: #f6f2ea;
    --fb-bg-box: #fffaf3;
    --fb-bg-soft: #f3ede4;

    /* Texte */
    --fb-title: #3b3428;
    --fb-text: #6a645b;

    /* Bordures */
    --fb-border: #d8cec0;

    /* Boutons (génériques) */
    --fb-btn-bg: #f3ede4;
    --fb-btn-bg-hover: #e9e1d5;
    --fb-btn-text: #5b4f3c;
    --fb-btn-text-hover: #4e4433;

    /* Bouton lien Facebook */
    --fb-link-bg: #f3ede4;
    --fb-link-bg-hover: #e9e1d5;
    --fb-link-text: #5b4f3c;
    --fb-link-text-hover: #4e4433;

    /* Dots */
    --fb-dot: #cfc6b6;
    --fb-dot-active: #8a7b63;
}

/* ===== STRUCTURE ===== */

.fb-carousel-section {
    width: 100%;
    max-width: 820px;
 /*   margin: 48px auto;*/
    margin: 0px auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* ===== HEADER ===== */

.fb-carousel-header {
    margin-bottom: 20px;
    text-align: center;
/*	border: 1px solid red;*/
}

.fb-carousel-header-inner {
    max-width: 680px;
    margin: 0 auto;
}

.fb-carousel-kicker {
    display: inline-block;
    margin-bottom: 10px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #eef4ff;
    color: #1877f2;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
}

.fb-carousel-title {
    margin: 0 0 10px 0;
    font-size: 2rem;
/*    color: #1f2937;*/
}

.fb-carousel-subtitle {
    margin: 0;
    color: #6b7280;
}

/* ===== BOITE ===== */

.fb-carousel-box {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    padding: 20px;
}

/* ===== VIEWPORT ===== */

.fb-carousel-viewport {
    min-height: auto;
    margin-bottom: 10px;
}

.fb-carousel-slide-inner {
    min-height: auto;
    display: flex;
    flex-direction: column;
}

/* ===== TITRE POST ===== */

.fb-carousel-post-title {
    margin: 0 0 12px 0;
    font-size: 1.1rem;
    color: #111827;
}

/* ===== ZONE IFRAME ===== */

.fb-carousel-iframe-shell {
    height: var(--fb-post-height);
    border-radius: 16px;
    background: #f9fafb;
    overflow: hidden;
}

/* Scroll uniquement si nécessaire */
.fb-carousel-iframe-scroll {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
}

/* Évite espace fantôme */
.fb-carousel-iframe-wrapper {
    width: 100%;
    text-align: center;
    padding: 0;
    line-height: 0;
}

.fb-carousel-iframe-wrapper iframe {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 500px;
    border: 0;
}

/* ===== CONTROLES ===== */

.fb-carousel-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.fb-carousel-btn {
    border: 1px solid var(--fb-border);
    border-radius: 999px;
    background: var(--fb-btn-bg);
    color: var(--fb-btn-text);
    padding: 8px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.fb-carousel-btn:hover {
    background: var(--fb-btn-bg-hover);
    color: var(--fb-btn-text-hover);
/*    transform: translateY(-1px);*/
}

/* ===== DOTS ===== */

.fb-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex: 1;
}

.fb-carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--fb-dot);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.fb-carousel-dot.active {
    background: var(--fb-dot-active);
    transform: scale(1.08);
}

/* ===== FOOTER ===== */

.fb-carousel-footer {
    margin-top: 16px;
    text-align: center;
}

.fb-carousel-page-link {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--fb-link-bg);
    color: var(--fb-link-text);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid var(--fb-border);
    transition: all 0.2s ease;
}

.fb-carousel-page-link:hover {
    background: var(--fb-link-bg-hover);
    color: var(--fb-link-text-hover);
/*    transform: translateY(-1px);*/
}

/* ===== EMPTY ===== */

.fb-carousel-empty {
    max-width: 760px;
    margin: 40px auto;
    padding: 20px;
    text-align: center;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
}

/* ===== MOBILE ===== */

@media (max-width: 768px) {

    :root {
        --fb-post-height: 380px;
    }

    .fb-carousel-section {
        margin: 32px auto;
        padding: 0 14px;
    }

    .fb-carousel-title {
        font-size: 1.6rem;
    }

    .fb-carousel-box {
        padding: 14px;
    }

    .fb-carousel-controls {
        justify-content: center;
    }
}