/* ==========================================================================
   Landing Opquast - CSS
   Construction progressive
   ========================================================================== */

/* Forcer le light mode pour cette page */
body.landing-opquast {
    background-color: #fff !important;
    color: #254356 !important;
    color-scheme: light only;
}

/* Template Produit Landing Opquast - espacement après le hero */
body.page-template-20-landing-start .o-large-wrapper.c-opposite-toc-right {
    background-color: #fff;
}

/* Badges en position normale (pas absolue) dans ce template */
body.page-template-20-landing-start .c-product-badges {
    position: static;
    margin-bottom: 16px;
}

/* Sticky descendu pour s'aligner avec le contenu */
body.page-template-20-landing-start #opq-sticky-sidebar {
    margin-top: 60px;
}

/* Contenu principal - plus de largeur pour le titre */
body.page-template-20-landing-start .c-opposite-toc__content {
    padding-top: 0;
}

#landing-main,
#landing-content,
#landing-content article,
.c-product-layout,
.c-product-main-content,
.c-product-box,
.c-product-testimonials,
.c-product-testimonial,
.lp-faq,
.lp-faq details,
.lp-faq summary,
.lp-faq .faq-answer,
.lp-final-cta {
    background-color: #fff !important;
    color-scheme: light only;
}

/* Forcer le carrousel programme à rester sombre */
.c-cert-carousel,
#landing-content .c-cert-carousel {
    background-color: #254356 !important;
    color: #fff !important;
}

.c-cert-carousel .c-cert-slide,
#landing-content .c-cert-carousel .c-cert-slide {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* Forcer les stats/figures à rester sombres */
.c-product-figure,
.c-product-figures .c-product-figure,
#landing-content .c-product-figure {
    background-color: #254356 !important;
    color: #fff !important;
}

.c-product-figure *,
.c-product-figure__value,
.c-product-figure__label {
    color: #fff !important;
    background-color: transparent !important;
}

/* Forcer le formulaire Formidable en mode clair */
.frm_forms,
.frm_forms *,
#frm_form_13_container,
#frm_form_13_container *,
.frm_style_formidable-style,
.frm_style_formidable-style *,
.with_frm_style,
.with_frm_style *,
form[id*="form_inscription"],
form[id*="form_inscription"] * {
    color-scheme: light only !important;
    background-color: #fff !important;
    color: #254356 !important;
}

.frm_forms input[type="text"],
.frm_forms input[type="email"],
.frm_forms input[type="tel"],
.frm_forms select,
.frm_forms textarea,
#frm_form_13_container input[type="text"],
#frm_form_13_container input[type="email"],
#frm_form_13_container input[type="tel"],
#frm_form_13_container select {
    background-color: #fff !important;
    color: #254356 !important;
    border: 1px solid #e5e7eb !important;
}

.frm_forms .frm_submit button,
#frm_form_13_container button {
    background-color: #157878 !important;
    color: #fff !important;
}

.frm_forms .frm_submit button:hover,
#frm_form_13_container button:hover {
    background-color: #0f5a5a !important;
}

/* Forcer lc-benefits en mode clair */
.lc-benefits,
.lc-benefits *,
#landing-content .lc-benefits,
#landing-content .lc-benefits * {
    color-scheme: light only !important;
}

.lc-benefits {
    background-color: #fff !important;
}

.lc-benefits__title,
.lc-benefits__item-title {
    color: #112f42 !important;
}

.lc-benefits__description,
.lc-benefits__item-description {
    color: #4a6072 !important;
}

/* Forcer lc-references en mode clair */
.lc-references,
.lc-references *,
#landing-content .lc-references,
#landing-content .lc-references * {
    color-scheme: light only !important;
}

.lc-references {
    background-color: #f8f9fa !important;
}

.lc-references__title {
    color: #4a6072 !important;
}

/* Grille 2x2 pour les bénéfices */
.lc-benefits__grid,
#landing-content .lc-benefits__grid,
.c-product-main-content .lc-benefits__grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
    margin-bottom: 32px;
}

/* Cacher les <br> parasites dans la grille des bénéfices */
.lc-benefits__grid > br {
    display: none;
}

.lc-benefits__item,
#landing-content .lc-benefits__item,
.c-product-main-content .lc-benefits__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

@media (max-width: 768px) {
    .lc-benefits__grid,
    #landing-content .lc-benefits__grid,
    .c-product-main-content .lc-benefits__grid {
        grid-template-columns: 1fr !important;
    }
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
#landing-header {
    background-color: #254356;
    padding: 46px 0 8px 0;
}

#landing-header a {
    display: block;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

#landing-header img {
    height: 40px;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
#landing-footer {
    background-color: #254356;
    padding: 24px;
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.875rem;
}

#landing-footer a {
    color: #fff;
}

/* --------------------------------------------------------------------------
   Contenu principal
   -------------------------------------------------------------------------- */
#landing-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px 0 40px;
}

/* Masquer les paragraphes vides ajoutés par WordPress */
#landing-content p:empty,
#landing-content article p:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Fix pour que le hero soit collé au header */
#landing-content > .lc-hero:first-child {
    margin-top: 0;
}


#landing-content {
    /* Prêt pour les styles de contenu */
}

/* Masquer les paragraphes vides ajoutés par WP */
#landing-content > p:empty,
#landing-content > p:first-child {
    display: none;
    margin: 0;
    padding: 0;
}

/* --------------------------------------------------------------------------
   Badges et en-tête produit
   -------------------------------------------------------------------------- */
.c-product-badges {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    list-style: none;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.c-product-main-content {
    position: relative;
    padding-top: 8px;
    background-color: #fff;
}

.c-product-badge {
    display: inline-block !important;
    padding: 4px 14px;
    color: #fff !important;
    font-weight: 600;
    font-size: 0.75rem;
    background-color: #254356 !important;
    border-radius: 20px;
}

.c-product-title {
    margin: 0 0 8px 0;
    color: #254356;
    font-weight: 800;
    font-size: 1.8rem;
    line-height: 1.4;
    display: block;
}

.c-product-subtitle {
    clear: both;
    margin: 8px 0 24px 0;
    color: #4a6072;
    font-size: 1.05rem;
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Boîte de contenu (Card)
   -------------------------------------------------------------------------- */
.c-product-box {
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-left: 6px solid #3d5a6c;
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 12px;
}

.c-product-box__title {
    margin: 0 0 6px 0;
    color: #254356;
    font-weight: 700;
    font-size: 1.1rem;
}

.c-product-box__intro {
    margin: 0 0 8px 0;
    color: #4a6072;
    font-size: 0.85rem;
    line-height: 1.4;
}

/* Liste avec puces */
.c-product-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.c-product-list__item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.c-product-list__item br {
    display: none;
}

.c-product-list__bullet {
    color: #1c9b9c;
    font-size: 1.1rem;
    font-weight: 700;
    flex-shrink: 0;
}

.c-product-list__text {
    color: #4a6072;
    font-size: 0.85rem;
    line-height: 1.3;
}

.c-product-list__strong {
    color: #254356;
    font-weight: 600;
}

/* Ligne de 2 blocs côte à côte */
.c-product-row {
    display: flex;
    gap: 24px;
    margin-bottom: 20px;
}

.c-product-row > .c-product-box {
    flex: 1;
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .c-product-row {
        flex-direction: column;
    }
}

/* --------------------------------------------------------------------------
   Badge Google
   -------------------------------------------------------------------------- */
.section-label {
    margin-bottom: 20px;
}

.badge-compact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

.badge-compact:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.g-logo {
    display: flex;
    align-items: center;
    width: 20px;
    height: 20px;
}

.g-logo svg {
    width: 100%;
    height: 100%;
}

.separator {
    width: 1px;
    height: 16px;
    background: #e5e7eb;
}

.stars {
    display: flex;
    align-items: center;
    gap: 2px;
}

.star {
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FBBC05'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.star.half {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FBBC05'%3E%3Cpath d='M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4V6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z'/%3E%3C/svg%3E");
}

.star.empty {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23E0E0E0'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");
}

.rating-text {
    font-weight: 700;
    color: #254356;
    font-size: 0.9rem;
}

.review-count {
    color: #6b7280;
    font-size: 0.8rem;
}

/* --------------------------------------------------------------------------
   Typographie contenu
   -------------------------------------------------------------------------- */
#landing-content h1 {
    margin: 0 0 8px 0;
    color: #254356;
    font-weight: 800;
    font-size: 1.8rem;
    line-height: 1.2;
}

#landing-content h2 {
    margin: 32px 0 16px 0;
    color: #254356;
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 1.3;
}

#landing-content h3 {
    margin: 24px 0 12px 0;
    color: #254356;
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1.3;
}

#landing-content p {
    margin: 0 0 16px 0;
    color: #4a6072;
    line-height: 1.6;
}

#landing-content ul {
    margin: 0 0 16px 0;
    padding-left: 20px;
}

#landing-content li {
    margin-bottom: 8px;
    color: #4a6072;
    line-height: 1.5;
}

#landing-content strong {
    color: #254356;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Carousel Programme
   -------------------------------------------------------------------------- */
.c-cert-carousel {
    background: #254356;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 24px;
    color: #fff;
    position: relative;
}

.c-cert-carousel,
.c-cert-carousel p,
.c-cert-carousel li,
.c-cert-carousel ol,
.c-cert-carousel ul,
.c-cert-carousel h3,
.c-cert-carousel span,
.c-cert-carousel article,
#landing-content .c-cert-carousel,
#landing-content .c-cert-carousel p,
#landing-content .c-cert-carousel li,
#landing-content .c-cert-carousel h3 {
    color: #fff !important;
}

.c-cert-carousel__header {
    padding: 16px 140px 0 20px;
}

.c-cert-carousel__label {
    margin: 0 0 4px 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: #1c9b9c;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.c-cert-carousel__title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
}

.c-cert-carousel__body {
    padding: 16px 20px;
}

.c-cert-slide {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 14px 16px;
}

.c-cert-slide__title {
    margin: 0 0 10px 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
}

.c-program-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.c-program-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    gap: 12px;
}

.c-program-item:last-child {
    border-bottom: none;
}

.c-program-col--title {
    flex: 1;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8rem;
}

.c-program-col--type {
    flex-shrink: 0;
    text-align: center;
}

.c-program-tag {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--opq-bg-white, #fff);
}

.c-program-tag--text {
    background: var(--opq-navy-light, #3d5a6c);
}

.c-program-tag--video {
    background: var(--opq-red, #D25148);
}

.c-program-tag--quiz {
    background: var(--opq-turquoise, #1c9b9c);
}

.c-program-col--duration {
    flex-shrink: 0;
    width: 40px;
    text-align: right;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
    white-space: nowrap;
}

.c-cert-slide__footer {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.c-cert-slide__meta {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

.c-cert-slide__total {
    font-size: 0.85rem;
    font-weight: 700;
    color: #1c9b9c;
}

.c-cert-nav {
    position: absolute;
    top: 16px;
    right: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.c-cert-dots {
    display: flex;
    gap: 8px;
}

.c-cert-carousel .c-cert-nav .c-cert-dots .c-cert-dot,
.c-cert-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #fff !important;
    opacity: 0.4;
    cursor: pointer;
    transition: opacity 0.2s;
}

.c-cert-carousel .c-cert-nav .c-cert-dots .c-cert-dot.active,
.c-cert-carousel .c-cert-nav .c-cert-dots .c-cert-dot:hover,
.c-cert-dot.active,
.c-cert-dot:hover {
    opacity: 1;
}

.c-cert-arrows {
    display: flex;
    gap: 8px;
}

.c-cert-arrows button,
.c-cert-arrow {
    width: 48px !important;
    height: 48px !important;
    font-size: 28px !important;
    background: rgba(255, 255, 255, 0.2) !important;
}

.c-cert-arrows button:hover,
.c-cert-arrow:hover {
    background: rgba(255, 255, 255, 0.4) !important;
}

/* --------------------------------------------------------------------------
   Stats / Figures
   -------------------------------------------------------------------------- */
.c-product-figures {
    display: flex;
    flex-direction: row;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.c-product-figure {
    flex: 1;
    min-width: 120px;
    background: #f8f9fa;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.c-product-figure__value {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 800;
    color: #254356;
}

.c-product-figure__label {
    margin: 4px 0 0 0;
    font-size: 0.78rem;
    color: #6b7280;
}

/* Infos pratiques */
.c-product-info-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.c-product-info-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #e5e7eb;
}

.c-product-info-row:last-child {
    border-bottom: none;
}

.c-product-info-label {
    color: #4a6072;
    font-size: 0.9rem;
}

.c-product-info-value {
    color: #254356;
    font-weight: 700;
    font-size: 0.9rem;
}

/* --------------------------------------------------------------------------
   Témoignages (style page-produit)
   -------------------------------------------------------------------------- */
.c-product-testimonials {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.c-product-testimonial {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 20px 24px;
}

.c-product-testimonial__text {
    margin: 0 0 10px 0;
    color: #4a6072;
    font-size: 0.9rem;
    line-height: 1.6;
    font-style: italic;
}

.c-product-testimonial__author {
    margin: 0;
    color: #254356;
    font-weight: 600;
    font-size: 0.82rem;
}

.c-product-testimonial__role {
    color: #6b7280;
    font-weight: 400;
}

/* --------------------------------------------------------------------------
   Section Hero (pleine largeur - lc style)
   -------------------------------------------------------------------------- */
.lc-hero {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-top: 0;
    background-color: #254356;
    color: #fff;
    padding: 20px 0 60px 0;
}

.lc-hero__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    gap: 40px;
}

.lc-hero__content {
    flex: 1;
    max-width: 50%;
}

.lc-hero__title {
    font-size: 2.4em !important;
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 24px;
    color: #fff !important;
}

.lc-hero__subtitle {
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0 0 24px;
    color: rgba(255, 255, 255, 0.9) !important;
}

.lc-hero__content,
.lc-hero__content p,
.lc-hero__content h1,
.lc-hero__content h2,
.lc-hero__content span,
#landing-content .lc-hero__title,
#landing-content .lc-hero__subtitle {
    color: #fff !important;
}

.lc-hero__image {
    flex: 1;
    max-width: 50%;
}

.lc-hero__image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.lc-btn {
    display: inline-block;
    padding: 14px 32px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.lc-btn--primary {
    background-color: #157878 !important;
    color: #fff !important;
}

.lc-btn--primary:hover {
    background-color: #0f5a5a !important;
}

.lc-btn--secondary {
    color: #157878 !important;
    border-color: #157878 !important;
}

.lc-btn--secondary:hover {
    background-color: #157878 !important;
    color: #fff !important;
}

@media (max-width: 768px) {
    .lc-hero__container {
        flex-direction: column-reverse;
        text-align: center;
    }

    .lc-hero__content,
    .lc-hero__image {
        max-width: 100%;
    }
}

/* --------------------------------------------------------------------------
   Section Références (logos clients) - Dark mode
   -------------------------------------------------------------------------- */
.lc-references {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background-color: #1a3344 !important;
    padding: 40px 0 30px !important;
    margin-bottom: 0 !important;
}

/* Masquer le br entre references et testimonials */
.lc-references + br,
.lc-references ~ br {
    display: none !important;
}

.lc-references__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.lc-references__title {
    text-align: center;
    font-size: 0.75rem;
    color: #fff !important;
    margin: 0 0 24px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.lc-references__logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 40px;
}

.lc-references__logo {
    max-height: 40px;
    width: auto;
    filter: none !important;
    opacity: 1;
    transition: all 0.2s ease;
}

.lc-references__logo:hover {
    opacity: 1;
}

@media (max-width: 768px) {
    .lc-references__logos {
        gap: 24px;
    }

    .lc-references__logo {
        max-height: 30px;
    }
}

/* --------------------------------------------------------------------------
   Section Témoignages (pleine largeur - lc style)
   -------------------------------------------------------------------------- */
.lc-testimonials {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background-color: #254356;
    color: #fff;
    padding: 60px 0 0 !important;
}

/* Témoignages dans la colonne principale - pas full width */
.c-product-main-content .lc-testimonials {
    width: 100%;
    left: auto;
    right: auto;
    margin-left: 0;
    margin-right: 0;
    border-radius: 12px;
    padding: 30px;
}

.c-product-main-content .lc-testimonials__container {
    max-width: none;
    padding: 0;
}

.c-product-main-content .lc-testimonials__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.lc-testimonials__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.lc-testimonials__title {
    text-align: center;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    margin: 0 0 40px;
    color: #fff;
}

.lc-testimonials__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}

.lc-testimonials__grid > br {
    display: none;
}

.lc-testimonial-card {
    background-color: #fff;
    border-radius: 12px;
    padding: 24px;
    color: #112f42;
}

.lc-testimonial-card__quote {
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0 0 16px;
    color: #374151;
}

.lc-testimonial-card__author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lc-testimonial-card__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.lc-testimonial-card__info {
    flex: 1;
}

.lc-testimonial-card__name {
    font-weight: 700;
    font-size: 0.9rem;
    margin: 0;
    color: #112f42;
}

.lc-testimonial-card__role {
    font-size: 0.8rem;
    color: #4a6072;
    margin: 0;
}

.lc-testimonials__cta {
    text-align: center;
}

@media (max-width: 768px) {
    .lc-testimonials__grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* ==========================================================================
   Layout 2 colonnes avec sticky sidebar
   ========================================================================== */
.c-product-layout {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.c-product-main-content {
    flex: 1;
    min-width: 0;
}

#opq-sticky-sidebar {
    width: 320px;
    flex-shrink: 0;
    position: sticky;
    top: 120px !important;
    margin-top: 5px;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
}

@media (max-width: 968px) {
    .c-product-layout {
        flex-direction: column;
    }

    #opq-sticky-sidebar {
        width: 100%;
        position: static;
    }
}

/* --------------------------------------------------------------------------
   Sticky Sidebar - Header
   -------------------------------------------------------------------------- */
.c-summary__header {
    background: #f8f9fa;
    padding: 10px 14px 8px 14px;
    border-bottom: 1.5px solid #e5e7eb;
    text-align: left;
}

.c-summary__heading {
    margin: 0 0 4px 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.c-summary__price {
    margin: 0;
    font-size: 2.2rem;
    font-weight: 800;
    color: #254356;
    line-height: 1.1;
}

.c-sticky-header__note {
    margin: 6px 0 0 0;
    font-size: 0.78rem;
    color: #6b7280;
}

/* --------------------------------------------------------------------------
   Sticky Sidebar - Content
   -------------------------------------------------------------------------- */
.c-sticky-content {
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.c-sticky-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

.c-sticky-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.8rem;
}

.u-bg-teal-light {
    background-color: rgba(28, 155, 156, 0.15);
}

.u-bg-orange-light {
    background-color: rgba(245, 158, 11, 0.15);
}

.u-bg-red-light {
    background-color: rgba(239, 68, 68, 0.15);
}

.u-bg-green-light {
    background-color: rgba(34, 197, 94, 0.15);
}

.c-sticky-item__title {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
    color: #254356;
    line-height: 1.2;
}

.c-sticky-item__desc {
    margin: 0;
    font-size: 0.7rem;
    color: #6b7280;
    line-height: 1.2;
}

#opq-sticky-sidebar p {
    margin: 0 0 2px 0;
    line-height: 1.3;
}

#opq-sticky-sidebar .c-sticky-content p,
#opq-sticky-sidebar .c-sticky-item p {
    margin: 0 0 2px 0;
}

/* --------------------------------------------------------------------------
   Sticky Sidebar - Divider & Actions
   -------------------------------------------------------------------------- */
.c-sticky-divider {
    border-top: 1.5px solid #e5e7eb;
    margin: 0 12px;
}

.c-sticky-actions {
    padding: 8px 12px 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.c-sticky-actions .button1,
.c-sticky-actions .button2 {
    display: block;
    width: 100%;
    padding: 12px 20px;
    text-align: center;
    font-weight: 700;
    font-size: 0.9rem;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.c-sticky-actions .button1 {
    background-color: #157878;
    color: #fff;
}

.c-sticky-actions .button1:hover {
    background-color: #0f5a5a;
}

.c-sticky-actions .button2 {
    background-color: #fff;
    color: #254356;
    border: 2px solid #254356;
}

.c-sticky-actions .button2:hover {
    background-color: #254356;
    color: #fff;
}

/* --------------------------------------------------------------------------
   Sticky Sidebar - Qualiopi
   -------------------------------------------------------------------------- */
.c-sticky-qualiopi {
    background: #f8f9fa;
    border-top: 1.5px solid #e5e7eb;
    padding: 6px 12px;
    text-align: center;
}

.c-sticky-qualiopi__text {
    margin: 0;
    font-size: 0.78rem;
    color: #4a6072;
}

/* --------------------------------------------------------------------------
   Layout Section Header (H1 + sous-titre sur même ligne)
   -------------------------------------------------------------------------- */
.lp-section-header {
    display: flex;
    align-items: baseline;
    gap: 24px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.lp-section-header h1 {
    margin: 0;
    flex-shrink: 0;
}

.lp-section-header .lp-subtitle {
    margin: 0;
    color: #4a6072;
    font-size: 1rem;
}

/* --------------------------------------------------------------------------
   Layout 2 colonnes 60/40
   -------------------------------------------------------------------------- */
.lp-row-60-40 {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}

.lp-col-60 {
    flex: 0 0 60%;
    max-width: 60%;
}

.lp-col-40 {
    flex: 0 0 calc(40% - 32px);
    max-width: calc(40% - 32px);
}

/* Badges au-dessus de la colonne droite */
.lp-col-40 .c-product-badges {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    justify-content: flex-start;
}

/* Style du bloc résumé dans la colonne 40% */
.lp-col-40 .c-summary-box {
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

@media (max-width: 768px) {
    .lp-section-header {
        flex-direction: column;
        gap: 8px;
    }

    .lp-row-60-40 {
        flex-direction: column;
    }

    .lp-col-60,
    .lp-col-40 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* --------------------------------------------------------------------------
   Boutons CTA (style page-produit)
   -------------------------------------------------------------------------- */
.c-product-cta-container {
    margin-top: 20px;
}

.c-product-actions {
    display: flex;
    flex-direction: row;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.c-product-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-weight: 600;
    font-size: 0.88rem;
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.c-product-btn--outline {
    color: #3d5a6c;
    background-color: transparent;
    border: 2px solid #3d5a6c;
}

.c-product-btn--outline:hover {
    background-color: #1c9b9c;
    border-color: #1c9b9c;
    color: #fff !important;
}

.c-product-btn--outline-teal {
    color: #1c9b9c;
    background-color: transparent;
    border: 2px solid #1c9b9c;
}

.c-product-btn--outline-teal:hover {
    background-color: #1c9b9c;
    border-color: #1c9b9c;
    color: #fff;
}

.c-product-btn--primary {
    color: #fff;
    background-color: #254356;
    border: 2px solid #e74c3c;
}

.c-product-btn--primary:hover {
    background-color: #3d5a6c;
}

/* ==========================================================================
   Landing Page /essai-gratuit/ - Sections additionnelles
   ========================================================================== */

/* --------------------------------------------------------------------------
   Micro-texte rassurant (sous hero et CTA)
   -------------------------------------------------------------------------- */
.hero-reassurance,
.reassurance {
    margin: 16px 0 0 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
}

.hero-reassurance-line {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    margin: 16px 0;
    font-size: 0.85rem;
    color: #6b7280;
    text-align: center;
}

.hero-reassurance-line span {
    white-space: nowrap;
}

.lp-cta-center {
    text-align: center;
    padding: 32px 0;
}

.hero-reassurance span,
.reassurance span {
    margin: 0 12px;
}

/* Version hors hero (fond clair) */
.final-cta .reassurance {
    color: #6b7280;
}

/* --------------------------------------------------------------------------
   Preuve sociale rapide
   -------------------------------------------------------------------------- */
.social-proof-stat {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: #254356;
    margin: 24px 0;
}

.social-proof-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 32px 0;
    border-bottom: 1px solid #e5e7eb;
}

/* --------------------------------------------------------------------------
   Section Programme
   -------------------------------------------------------------------------- */
.lp-program {
    padding: 48px 0;
    border-bottom: 1px solid #e5e7eb;
}

.lp-program h2 {
    margin: 0 0 24px 0;
    color: #254356;
    font-weight: 700;
    font-size: 1.5rem;
    text-align: center;
}

.lp-program ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 500px;
}

.lp-program li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    margin-bottom: 8px;
    background: #f8f9fa;
    border-radius: 8px;
    font-size: 0.95rem;
    color: #374151;
}

.lp-program li .icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.lp-program li .duration {
    margin-left: auto;
    font-size: 0.8rem;
    color: #6b7280;
    white-space: nowrap;
}

.lp-program .program-total {
    text-align: center;
    margin-top: 20px;
    font-weight: 600;
    color: #1c9b9c;
}

/* Badge gratuit */
.lp-program .badge-free {
    display: inline-block;
    padding: 2px 8px;
    background: #dcfce7;
    color: #166534;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 4px;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Section Pour qui / Pas pour qui
   -------------------------------------------------------------------------- */
.lp-target-audience {
    padding: 48px 0;
    border-bottom: 1px solid #e5e7eb;
}

.lp-target-audience h2 {
    margin: 0 0 32px 0;
    color: #254356;
    font-weight: 700;
    font-size: 1.5rem;
    text-align: center;
}

.lp-target-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 800px;
    margin: 0 auto;
}

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

.lp-target-box {
    padding: 24px;
    border-radius: 12px;
}

.lp-target-box.for-you {
    background: var(--opq-green-light);
    border: 1px solid var(--opq-green-medium);
}

.lp-target-box.not-for-you {
    background: var(--opq-red-light);
    border: 1px solid var(--opq-red);
}

.lp-target-box h3 {
    margin: 0 0 16px 0;
    font-size: 1rem;
    font-weight: 700;
}

.lp-target-box.for-you h3 {
    color: var(--opq-green);
}

.lp-target-box.not-for-you h3 {
    color: var(--opq-red);
}

.lp-target-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lp-target-box li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 10px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #374151;
}

.lp-target-box li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--opq-green);
    font-weight: 700;
}

.lp-target-box.not-for-you li::before {
    content: '✕';
    color: var(--opq-red);
}

/* --------------------------------------------------------------------------
   Section FAQ (accordéon natif)
   -------------------------------------------------------------------------- */
.lp-faq {
    padding: 48px 0;
    border-bottom: none;
}

.lp-faq h2 {
    margin: 0 0 32px 0;
    color: #254356;
    font-weight: 700;
    font-size: 1.5rem;
    text-align: center;
}

.lp-faq-list {
    max-width: 700px;
    margin: 0 auto;
}

.lp-faq details {
    margin-bottom: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

.lp-faq summary {
    padding: 16px 20px;
    padding-right: 48px;
    font-weight: 600;
    font-size: 0.95rem;
    color: #254356;
    background: #fff;
    cursor: pointer;
    position: relative;
    list-style: none;
}

.lp-faq summary::-webkit-details-marker {
    display: none;
}

.lp-faq summary::after {
    content: '+';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    font-weight: 400;
    color: #6b7280;
    transition: transform 0.2s;
}

.lp-faq details[open] summary::after {
    content: '−';
}

.lp-faq details[open] summary {
    background: #f8f9fa;
    border-bottom: 1px solid #e5e7eb;
}

.lp-faq .faq-answer {
    padding: 16px 20px;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #4a6072;
    background: #fff;
}

.lp-faq .faq-answer p {
    margin: 0;
}

/* --------------------------------------------------------------------------
   Section CTA Final
   -------------------------------------------------------------------------- */
.lp-final-cta {
    padding: 60px 0;
    text-align: center;
    background: linear-gradient(180deg, #f8f9fa 0%, #fff 100%);
}

.lp-final-cta h2 {
    margin: 0 0 24px 0;
    color: #254356;
    font-weight: 700;
    font-size: 1.8rem;
}

.lp-final-cta .lc-btn {
    margin-bottom: 16px;
}

.lp-final-cta .reassurance {
    margin-bottom: 24px;
}

.lp-final-cta .qualiopi-badge {
    display: block;
    margin: 24px auto 0;
    max-width: 120px;
    opacity: 0.8;
}

/* --------------------------------------------------------------------------
   Section Objectifs pédagogiques
   -------------------------------------------------------------------------- */
.lp-objectives {
    padding: 32px 0;
    border-bottom: 1px solid #e5e7eb;
}

.lp-objectives h3 {
    margin: 0 0 16px 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #254356;
}

.lp-objectives ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lp-objectives li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #374151;
}

.lp-objectives li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: #1c9b9c;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   Section Découverte (2 colonnes : slider + bénéfices)
   -------------------------------------------------------------------------- */
.lp-discover {
    padding: 48px 0;
    border-bottom: 1px solid #e5e7eb;
}

.lp-discover h2 {
    margin: 0 0 32px 0;
    color: #254356;
    font-weight: 700;
    font-size: 1.5rem;
    text-align: center;
}

.lp-discover-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
}

.lp-discover-left {
    /* Le carousel prend toute la largeur de sa colonne */
}

.lp-discover-right {
    /* Les bénéfices en liste verticale */
}

.lp-benefits-compact {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.lp-benefit-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.lp-benefit-icon {
    font-size: 1.8rem;
    flex-shrink: 0;
}

.lp-benefit-title {
    margin: 0 0 4px 0;
    font-weight: 600;
    color: #254356;
    font-size: 1rem;
}

.lp-benefit-desc {
    margin: 0;
    font-size: 0.9rem;
    color: #6b7280;
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Ajustements responsive
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Formulaire d'inscription centré
   -------------------------------------------------------------------------- */
#frm_form_13_container {
    max-width: 600px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .lp-program,
    .lp-target-audience,
    .lp-faq,
    .lp-final-cta,
    .lp-discover {
        padding: 32px 16px;
    }

    .lp-discover-grid {
        grid-template-columns: 1fr;
    }

    .lp-faq summary {
        padding-right: 40px;
    }

    .lp-final-cta h2 {
        font-size: 1.4rem;
    }

    #frm_form_13_container {
        max-width: 100%;
        padding: 0 16px;
    }
}