/**
 * Divi Ludotest - CSS personnalisé
 *
 * Design lumineux moderne pour ludothèque
 */

/* ==========================================================================
   0. Background Effects - Grille et Formes Flottantes (Light Mode)
   ========================================================================== */

/* Grille de fond subtile - version claire */
.ludo-grid-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: 0;
}

/* Conteneur des formes flottantes */
.ludo-floating-shapes {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    pointer-events: none !important;
    z-index: 99999 !important;
    overflow: visible !important;
    mix-blend-mode: multiply;
}

/* Style de base des formes */
.ludo-shape {
    position: absolute;
    border-radius: 50%;
}

/* Forme 1 - Orange (en haut à droite) */
.ludo-shape-1 {
    width: 500px;
    height: 500px;
    background: #ff8030;
    top: -100px;
    right: -50px;
    opacity: 0.15;
    filter: blur(130px);
    animation: ludoMorph 20s ease-in-out infinite;
}

/* Forme 2 - Rose/Magenta (en bas à gauche) */
.ludo-shape-2 {
    width: 450px;
    height: 450px;
    background: #ff3d99;
    bottom: -50px;
    left: -50px;
    opacity: 0.2;
    filter: blur(110px);
    animation: ludoMorph 25s ease-in-out infinite reverse;
}

/* Forme 3 - Pêche/Orange (milieu droite) */
.ludo-shape-3 {
    width: 350px;
    height: 350px;
    background: #ffb866;
    top: 40%;
    right: 15%;
    opacity: 0.18;
    filter: blur(110px);
    animation: ludoMorph 18s ease-in-out infinite;
    animation-delay: -5s;
}

/* Animation de morphing */
@keyframes ludoMorph {
    0%, 100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
        transform: rotate(0deg) scale(1);
    }
    25% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }
    50% {
        border-radius: 50% 60% 30% 60% / 30% 40% 70% 50%;
        transform: rotate(180deg) scale(1.1);
    }
    75% {
        border-radius: 60% 40% 60% 30% / 70% 30% 50% 60%;
    }
}

/* Rendre les sections transparentes pour voir les formes */
#page-container,
#main-content,
.et_pb_section,
.et_pb_row,
.et_pb_column {
    background-color: transparent !important;
}

/* Le contenu au-dessus des formes */
#page-container,
#main-content {
    position: relative;
    z-index: 2;
}

/* ==========================================================================
   1. Variables
   ========================================================================== */

:root {
    /* Couleurs Ludotest */
    --ludo-primary: #e36c1d;
    --ludo-primary-light: #f59a4a;
    --ludo-accent: #e5007d;
    --ludo-peach: #f7ceac;
    --ludo-text: #6b7280;
    --ludo-text-dark: #374151;
    --ludo-white: #ffffff;

    /* Light Mode - Fond lumineux */
    --light-bg: #faf9f7;
    --light-card: #ffffff;
    --light-card-hover: #f5f5f4;
    --light-border: rgba(0, 0, 0, 0.08);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;
}

/* ==========================================================================
   2. Sticky Header
   ========================================================================== */

#main-header {
    transition: all 0.4s ease-in-out;
    width: 100%;
}

#top-header {
    transition: all 0.3s ease-in-out, max-height 0.3s ease-in-out;
    max-height: 100px;
}

#main-header .container {
    transition: padding 0.4s ease-in-out;
}

#main-header #logo {
    transition: all 0.4s ease-in-out;
    max-height: 100px;
}

#et-top-navigation {
    transition: padding 0.4s ease-in-out;
}

/* Header Sticky - quand scrollé */
#main-header.et-fixed-header,
#main-header.header-scrolled {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 99999 !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Light mode header - toutes les pages */
#main-header {
    background-color: rgba(255, 255, 255, 0.95) !important;
}

#main-header.et-fixed-header,
#main-header.header-scrolled {
    background-color: rgba(255, 255, 255, 0.98) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* Menu - Style des liens (Semi-Bold 500) */
#top-menu li a,
#et_mobile_nav_menu .et_mobile_menu li a {
    font-weight: 500 !important;
    color: #1A1A1A !important;
    transition: color 0.3s ease;
}

#top-menu li a:hover,
#et_mobile_nav_menu .et_mobile_menu li a:hover {
    color: #E8842A !important;
}

#top-menu li.current-menu-item a,
#top-menu li.current_page_item a {
    color: #E8842A !important;
}

/* Cacher top header au scroll */
#main-header.et-fixed-header #top-header,
#main-header.header-scrolled #top-header {
    max-height: 0 !important;
    padding: 0 !important;
    opacity: 0;
    overflow: hidden;
}

/* Logo réduit */
#main-header.et-fixed-header #logo,
#main-header.header-scrolled #logo {
    max-height: 54px !important;
}

/* Container compact */
#main-header.et-fixed-header .container,
#main-header.header-scrolled .container {
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Compensation header fixé */
body.et-fixed-header #page-container,
body.header-is-scrolled #page-container {
    padding-top: 80px;
}

/* ==========================================================================
   3. Homepage Light Mode - Design lumineux moderne
   ========================================================================== */

/* Body light pour la homepage */
body.home,
body.home #main-content,
body.home .et_pb_section {
    background-color: var(--light-bg) !important;
}

/* Réduire l'espace entre header et première section */
#main-content .et_pb_section:first-child {
    padding-top: 20px !important;
    margin-top: 0 !important;
}

body #page-container #main-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* -------------------------------------------------------------------------
   3.1 Hero Section - Badge statut uniquement
   ------------------------------------------------------------------------- */

/* Badge statut ouverture - style uniforme orange */
.ludo-status-badge,
.ludo-open-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    border-radius: 50px;
    margin-bottom: 30px;
    font-size: 14px;
    font-weight: 600;
    background: rgba(245, 156, 0, 0.08);
    border: 2px solid rgba(245, 156, 0, 0.25);
    color: #e89a3c;
}

.ludo-status-icon {
    font-size: 28px;
    line-height: 1;
}

/* Couleurs des icônes selon le statut */
.ludo-status-open .ludo-status-icon {
    color: #22c55e; /* Vert */
}

.ludo-status-closing-soon .ludo-status-icon {
    color: #f59c00; /* Orange */
}

.ludo-status-opens-later .ludo-status-icon {
    color: #9ca3af; /* Gris */
}

.ludo-status-closed .ludo-status-icon {
    color: #ef4444; /* Rouge */
}

/* Statut Click & Collect (lundi) */
.ludo-status-click-collect {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.25);
    color: #3b82f6;
}

.ludo-status-click-collect .ludo-status-icon {
    color: #3b82f6; /* Bleu */
}

/* Badge status cliquable */
a.ludo-status-badge {
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

a.ludo-status-badge:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    text-decoration: none;
}

/* Wrapper du badge + info samedi */
.ludo-status-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 25px;
}

/* Info samedi sous le badge */
.ludo-saturday-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding-left: 5px;
    font-size: 13px;
    line-height: 1.4;
}

.ludo-saturday-open {
    color: #22c55e;
    font-weight: 600;
}

.ludo-saturday-closed {
    color: #ef4444;
    font-weight: 600;
}

.ludo-saturday-note {
    color: #9ca3af;
    font-size: 11px;
    font-style: italic;
}

.ludo-saturday-note sup {
    font-size: 9px;
}

/* Titre principal avec "pas" souligné */
.ludo-hero-title h1,
.ludo-hero-title .et_pb_text_inner {
    font-size: clamp(3rem, 7vw, 5.5rem) !important;
    font-weight: 800 !important;
    line-height: 1.0 !important;
    color: var(--ludo-text-dark) !important;
    letter-spacing: -3px !important;
    margin-bottom: 30px !important;
}

 

/* Description hero */
.ludo-hero-desc p,
.ludo-hero-desc .et_pb_text_inner {
    font-size: 1.15rem !important;
    color: var(--ludo-text) !important;
    line-height: 1.8 !important;
    max-width: 480px !important;
    margin-bottom: 35px !important;
}

/* -------------------------------------------------------------------------
   3.2 Boutons Hero
   ------------------------------------------------------------------------- */

/* Wrapper pour juxtaposer les boutons */
.ludo-buttons-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 5rem;
    align-items: center;
}

@media (max-width: 980px) {
    .ludo-buttons-wrapper {
        gap: 1rem;
    }
}

/* -------------------------------------------------------------------------
   3.3 Bandeau statistiques défilant (Marquee)
   ------------------------------------------------------------------------- */

.ludo-stats-marquee {
    overflow: hidden;
    width: 100%;
    background: #FAFAFA;
    padding: 2rem 0;
}

.ludo-marquee-content {
    display: flex;
    animation: ludo-marquee 30s linear infinite;
    width: max-content;
}

@keyframes ludo-marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.ludo-marquee-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 3rem;
    white-space: nowrap;
}

.ludo-marquee-number {
    font-family: 'Space Mono', monospace;
    font-size: 3rem;
    font-weight: 700;
}

.ludo-marquee-number.orange { color: #E8842A; }
.ludo-marquee-number.magenta { color: #C41E68; }
.ludo-marquee-number.peach { color: #EBAA7D; }

.ludo-marquee-label {
    color: #6B6B6B;
    font-size: 1rem;
}

.ludo-marquee-dot {
    width: 6px;
    height: 6px;
    background: #9A9A9A;
    border-radius: 50%;
    opacity: 0.5;
    flex-shrink: 0;
}

/* Pause au survol */
.ludo-stats-marquee:hover .ludo-marquee-content {
    animation-play-state: paused;
}

@media (max-width: 768px) {
    .ludo-marquee-number {
        font-size: 2rem;
    }

    .ludo-marquee-item {
        padding: 0 2rem;
    }
}

/* Bouton principal orange avec flèche */
.ludo-btn-catalog,
.et_pb_button.ludo-btn-catalog {
    background: var(--ludo-primary) !important;
    color: var(--ludo-white) !important;
    border: none !important;
    padding: 18px 35px !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    transition: all 0.3s ease !important;
}

.ludo-btn-catalog:hover {
    background: var(--ludo-primary-light) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 15px 40px rgba(227, 108, 29, 0.25) !important;
}

.ludo-btn-catalog::after,
.et_pb_button.ludo-btn-catalog::after {
    content: '→' !important;
    font-family: inherit !important;
    margin-left: 8px !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    opacity: 1 !important;
    order: 999 !important;
}

/* Supprimer le before Divi qui peut contenir une flèche */
.et_pb_button.ludo-btn-catalog::before {
    display: none !important;
}

/* Bouton secondaire outline */
.ludo-btn-location,
.et_pb_button.ludo-btn-location {
    background: transparent !important;
    color: var(--ludo-text-dark) !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    padding: 18px 35px !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    transition: all 0.3s ease !important;
}

.ludo-btn-location:hover {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.25) !important;
}

.ludo-btn-location::after {
    display: none !important;
}

/* Responsive boutons - Mobile */
@media (max-width: 767px) {
    .ludo-btn-catalog,
    .et_pb_button.ludo-btn-catalog,
    .ludo-btn-location,
    .et_pb_button.ludo-btn-location {
        padding: 12px 24px !important;
        font-size: 14px !important;
    }
}

/* -------------------------------------------------------------------------
   3.3 Cartes Stats avec Emojis
   ------------------------------------------------------------------------- */

.ludo-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
}

.ludo-stat-card {
    background: var(--light-card) !important;
    border: 1px solid var(--light-border) !important;
    border-radius: 24px !important;
    padding: 50px 45px !important;
    min-height: 220px !important;
    min-width: 200px !important;
    text-align: center !important;
    transition: all 0.4s ease !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.ludo-stat-card:hover {
    transform: translateY(-5px) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    background: var(--light-card-hover) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08) !important;
}

/* Emoji dans les cartes */
.ludo-stat-card .stat-emoji,
.ludo-stat-card .et_pb_blurb_container .et-pb-icon {
    font-size: 48px !important;
    margin-bottom: 15px !important;
    display: block !important;
}

/* Chiffres stats */
.ludo-stat-card .stat-number,
.ludo-stat-card h3 {
    font-family: 'Space Mono', 'Courier New', monospace !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: var(--ludo-primary) !important;
    margin-bottom: 5px !important;
}

/* Labels stats */
.ludo-stat-card .stat-label,
.ludo-stat-card p {
    color: var(--ludo-text) !important;
    font-size: 14px !important;
    margin: 0 !important;
}

/* Variante accent (rose) pour certaines cartes */
.ludo-stat-card.accent .stat-number,
.ludo-stat-card.accent h3 {
    color: var(--ludo-peach) !important;
}

/* Responsive cartes stats - Mobile */
@media (max-width: 767px) {
    .ludo-stat-card {
        padding: 25px 20px !important;
        min-height: 140px !important;
        min-width: auto !important;
        border-radius: 16px !important;
    }

    .ludo-stat-card .stat-emoji,
    .ludo-stat-card .et_pb_blurb_container .et-pb-icon {
        font-size: 32px !important;
        margin-bottom: 10px !important;
    }

    .ludo-stat-card .stat-number,
    .ludo-stat-card h3 {
        font-size: 1.4rem !important;
    }

    .ludo-stat-card .stat-label,
    .ludo-stat-card p {
        font-size: 12px !important;
    }

    .ludo-stats-grid {
        gap: 12px !important;
    }
}

/* -------------------------------------------------------------------------
   3.4 Sections Light génériques
   ------------------------------------------------------------------------- */

/* Hérite de .ludo-section-gray - padding spécifique */
.ludo-section-light {
    background-color: var(--light-bg) !important;
    padding: 80px 0 !important;
}

.ludo-section-light h2 {
    font-size: clamp(2rem, 4vw, 3rem) !important;
    font-weight: 700 !important;
    color: var(--ludo-text-dark) !important;
    letter-spacing: -1px !important;
    text-align: center !important;
    margin-bottom: 60px !important;
}

/* -------------------------------------------------------------------------
   3.5 Section Services
   ------------------------------------------------------------------------- */

/* Hérite de .ludo-section-gradient - padding spécifique */
.ludo-services-section {
    background: linear-gradient(180deg, #FFF9F5 0%, #FFFFFF 100%) !important;
    padding: 80px 0 !important;
}

/* Tag "// NOS SERVICES" */
.ludo-section-tag {
    display: inline-block;
    color: var(--ludo-primary);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

/* Titre section services */
.ludo-services-title h2,
.ludo-services-section h2 {
    font-size: clamp(2.5rem, 5vw, 3.5rem) !important;
    font-weight: 800 !important;
    color: var(--ludo-text-dark) !important;
    letter-spacing: -2px !important;
    text-align: center !important;
    margin-bottom: 20px !important;
    line-height: 1.1 !important;
}

/* Sous-titre */
.ludo-section-subtitle {
    color: var(--ludo-text) !important;
    font-size: 1.1rem !important;
    text-align: center !important;
    max-width: 600px !important;
    margin: 0 auto 30px !important;
    line-height: 1.7 !important;
}

/* =========================================
   GRILLE SERVICES - 6 cartes sur 3 lignes
   Ligne 1: 2/3 Bons Cadeaux + 1/3 Catalogue
   Ligne 2: 1/3 Fritime + 1/3 Événements + 1/3 Ludoclasses
   Ligne 3: 1/3 Pack évènement + 2/3 La Ludo donne
   ========================================= */

.ludo-services-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
}

/* Première carte (Bons Cadeaux) = 2 colonnes */
.ludo-services-grid .ludo-service-card:first-child {
    grid-column: span 2 !important;
}

/* Dernière carte (La Ludo donne) = 2 colonnes */
.ludo-services-grid .ludo-service-card:last-child {
    grid-column: span 2 !important;
}

/* =========================================
   CARTES SERVICES - Style de base
   ========================================= */

.ludo-service-card {
    background: #FFFFFF !important;
    border: none !important;
    border-radius: 16px !important;
    padding: 0 !important;
    transition: all 0.3s ease !important;
    text-align: left !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.ludo-service-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12) !important;
}

/* Zone visuelle colorée */
.ludo-service-card .service-visual {
    width: 100% !important;
    height: 130px !important;
    border-radius: 16px 16px 0 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 20px !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Effet de lumière */
.ludo-service-card .service-visual::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.3) 0%,
        rgba(255, 255, 255, 0) 60%) !important;
    pointer-events: none !important;
}

/* ===================
   COULEURS (sans vert ni violet)
   =================== */

/* Orange vif - Bons Cadeaux */
.ludo-service-card.card-orange .service-visual {
    background: linear-gradient(145deg, #FFCC80 0%, #FF9800 100%) !important;
}

/* Corail/Pêche - Fritime */
.ludo-service-card.card-coral .service-visual {
    background: linear-gradient(145deg, #FFAB91 0%, #FF7043 100%) !important;
}

/* Bleu ciel - Catalogue */
.ludo-service-card.card-sky .service-visual {
    background: linear-gradient(145deg, #B3E5FC 0%, #29B6F6 100%) !important;
}

/* Jaune doré - Événements */
.ludo-service-card.card-yellow .service-visual {
    background: linear-gradient(145deg, #FFF59D 0%, #FFCA28 100%) !important;
}

/* Rose/Magenta - Ludoclasses */
.ludo-service-card.card-rose .service-visual {
    background: linear-gradient(145deg, #F8BBD9 0%, #EC407A 100%) !important;
}

/* Image dans la zone visuelle */
.ludo-service-card .service-visual img {
    width: auto !important;
    height: 65px !important;
    max-width: 85% !important;
    object-fit: contain !important;
    transition: transform 0.3s ease !important;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.15)) !important;
    position: relative !important;
    z-index: 2 !important;
}

.ludo-service-card:hover .service-visual img {
    transform: scale(1.06) !important;
}

/* Badge */
.ludo-service-card .service-badge {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
    z-index: 3 !important;
}

.ludo-service-card.card-orange .service-badge { color: #E65100 !important; }
.ludo-service-card.card-rose .service-badge { color: #C2185B !important; }
.ludo-service-card.card-sky .service-badge { color: #0277BD !important; }
.ludo-service-card.card-yellow .service-badge { color: #F57F17 !important; }
.ludo-service-card.card-coral .service-badge { color: #D84315 !important; }

/* Contenu texte */
.ludo-service-card .service-content {
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    background: #FFFFFF !important;
}

/* Titre */
.ludo-service-card h3 {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #1F2937 !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.3 !important;
}

/* Description */
.ludo-service-card p {
    color: #6B7280 !important;
    font-size: 0.85rem !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    flex-grow: 1 !important;
}

/* Lien CTA */
.ludo-service-link {
    color: #E8842A !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    transition: all 0.25s ease !important;
    margin-top: 12px !important;
}

.ludo-service-link:hover {
    gap: 8px !important;
}

.ludo-service-link::after {
    content: '→';
}

/* Couleurs liens selon carte */
.ludo-service-card.card-rose .ludo-service-link { color: #C2185B !important; }
.ludo-service-card.card-sky .ludo-service-link { color: #0277BD !important; }
.ludo-service-card.card-yellow .ludo-service-link { color: #F57F17 !important; }
.ludo-service-card.card-coral .ludo-service-link { color: #D84315 !important; }

/* =========================================
   CARTE FEATURED (Bons Cadeaux)
   Layout horizontal : 1/3 image - 2/3 texte
   ========================================= */

.ludo-service-card.card-featured {
    flex-direction: row !important;
    align-items: stretch !important;
}

.ludo-service-card.card-featured .service-visual {
    width: 33.333% !important;
    height: auto !important;
    min-height: 160px !important;
    border-radius: 16px 0 0 16px !important;
    flex-shrink: 0 !important;
}

.ludo-service-card.card-featured .service-visual img {
    height: 75px !important;
}

.ludo-service-card.card-featured .service-content {
    width: 66.666% !important;
    padding: 24px 28px !important;
    justify-content: center !important;
}

.ludo-service-card.card-featured h3 {
    font-size: 1.25rem !important;
    margin-bottom: 10px !important;
}

.ludo-service-card.card-featured p {
    font-size: 0.88rem !important;
}

.ludo-service-card.card-featured .service-badge {
    top: 12px !important;
    left: 12px !important;
    right: auto !important;
}

/* =========================================
   RESPONSIVE
   ========================================= */

/* Tablet */
@media (max-width: 1024px) {
    .ludo-services-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .ludo-services-grid .ludo-service-card:first-child,
    .ludo-services-grid .ludo-service-card:last-child {
        grid-column: span 2 !important;
    }

    .ludo-service-card.card-featured,
    .ludo-service-card.card-featured-reverse {
        flex-direction: column !important;
    }

    .ludo-service-card.card-featured .service-visual,
    .ludo-service-card.card-featured-reverse .service-visual {
        width: 100% !important;
        height: 130px !important;
        min-height: auto !important;
        border-radius: 16px 16px 0 0 !important;
    }

    .ludo-service-card.card-featured .service-content,
    .ludo-service-card.card-featured-reverse .service-content {
        width: 100% !important;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .ludo-services-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .ludo-services-grid .ludo-service-card:first-child,
    .ludo-services-grid .ludo-service-card:last-child {
        grid-column: span 1 !important;
    }

    .ludo-service-card .service-visual {
        height: 110px !important;
    }

    .ludo-service-card .service-visual img {
        height: 55px !important;
    }

    .ludo-service-card .service-content {
        padding: 16px !important;
    }

    .ludo-service-card h3 {
        font-size: 1rem !important;
    }
}

/* -------------------------------------------------------------------------
   3.6 Boutons génériques Light
   ------------------------------------------------------------------------- */

.ludo-btn-primary,
.et_pb_button.ludo-btn-primary {
    background: var(--ludo-primary) !important;
    color: var(--ludo-white) !important;
    border: none !important;
    padding: 16px 32px !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.ludo-btn-primary:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 15px 40px rgba(227, 108, 29, 0.3) !important;
}

.ludo-btn-primary::after,
.ludo-btn-secondary::after,
.ludo-btn-outline::after {
    display: none !important;
}

.ludo-btn-secondary,
.et_pb_button.ludo-btn-secondary {
    background: var(--ludo-accent) !important;
    color: var(--ludo-white) !important;
    border: none !important;
    padding: 16px 32px !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
}

.ludo-btn-outline,
.et_pb_button.ludo-btn-outline {
    background: transparent !important;
    color: var(--ludo-text-dark) !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    padding: 14px 30px !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
}

.ludo-btn-outline:hover {
    border-color: var(--ludo-primary) !important;
    color: var(--ludo-primary) !important;
}

/* Bouton compact (pour liens carte, etc.) */
.ludo-btn-sm,
.et_pb_button.ludo-btn-sm {
    padding: 8px 18px !important;
    font-size: 0.85rem !important;
    border-radius: 30px !important;
    font-weight: 600 !important;
    background: transparent !important;
    color: var(--ludo-primary) !important;
    border: 1.5px solid var(--ludo-primary) !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    text-decoration: none !important;
}

.ludo-btn-sm:hover,
.et_pb_button.ludo-btn-sm:hover {
    background: var(--ludo-primary) !important;
    color: #FFFFFF !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(227, 108, 29, 0.25) !important;
}

.ludo-btn-sm::after,
.et_pb_button.ludo-btn-sm::after {
    display: none !important;
}

/* Variante filled */
.ludo-btn-sm.filled,
.et_pb_button.ludo-btn-sm.filled {
    background: var(--ludo-primary) !important;
    color: #FFFFFF !important;
}

.ludo-btn-sm.filled:hover,
.et_pb_button.ludo-btn-sm.filled:hover {
    background: #F5820A !important;
}

/* -------------------------------------------------------------------------
   3.7 CTA Section
   ------------------------------------------------------------------------- */

.ludo-cta-section {
    background: var(--ludo-primary) !important;
    border-radius: 30px !important;
    padding: 60px !important;
    text-align: center !important;
    border: none !important;
}

.ludo-cta-section h2 {
    color: var(--ludo-white) !important;
    font-size: 2.5rem !important;
    margin-bottom: 15px !important;
}

.ludo-cta-section p {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 1.1rem !important;
    margin-bottom: 30px !important;
}

/* -------------------------------------------------------------------------
   3.8 Footer Light
   ------------------------------------------------------------------------- */

.ludo-footer-light {
    background: var(--light-card) !important;
    border-top: 1px solid var(--light-border) !important;
    padding: 60px 0 30px !important;
}

.ludo-footer-light h4 {
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    color: var(--ludo-text) !important;
    margin-bottom: 20px !important;
}

.ludo-footer-light a {
    color: var(--ludo-text-dark) !important;
    transition: color 0.3s ease !important;
}

.ludo-footer-light a:hover {
    color: var(--ludo-primary) !important;
}

/* ==========================================================================
   4. Classes utilitaires pour Divi
   ========================================================================== */

/* Textes */
.text-white { color: var(--ludo-white) !important; }
.text-primary { color: var(--ludo-primary) !important; }
.text-accent { color: var(--ludo-accent) !important; }
.text-muted { color: var(--ludo-text) !important; }

/* Background */
.bg-light { background-color: var(--light-bg) !important; }
.bg-card { background-color: var(--light-card) !important; }

/* Spacing */
.mb-0 { margin-bottom: 0 !important; }
.mb-10 { margin-bottom: 10px !important; }
.mb-20 { margin-bottom: 20px !important; }
.mb-30 { margin-bottom: 30px !important; }

/* -------------------------------------------------------------------------
   4.1 Sections de base - Classes factorisées
   ------------------------------------------------------------------------- */

/* Section fond gris #FAFAFA */
.ludo-section-gray {
    background: var(--light-bg, #FAFAFA) !important;
    padding: 80px 0 !important;
}

/* Section fond gradient pêche → blanc */
.ludo-section-gradient {
    background: linear-gradient(180deg, #FFF9F5 0%, #FFFFFF 100%) !important;
    padding: 80px 0 !important;
}

/* Carte/Container blanc avec bordure et ombre */
.ludo-card-section {
    background: var(--light-card, #FFFFFF);
    border: 1px solid var(--light-border, rgba(0, 0, 0, 0.06));
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

/* Container centré (max-width 1200px) */
.ludo-container {
    max-width: 1200px;
    width: 95%;
    margin: 0 auto;
    padding: 0 20px;
}

/* Container large (max-width 1400px) */
.ludo-container-lg {
    max-width: 1400px;
    width: 95%;
    margin: 0 auto;
    padding: 0 20px;
}

/* ==========================================================================
   5. Responsive
   ========================================================================== */

@media (max-width: 980px) {
    /* Formes flottantes - tablette */
    .ludo-shape-1 {
        width: 350px;
        height: 350px;
        top: -80px;
        right: -80px;
        opacity: 0.12;
        filter: blur(100px);
    }

    .ludo-shape-2 {
        width: 300px;
        height: 300px;
        bottom: -60px;
        left: -80px;
        opacity: 0.15;
        filter: blur(100px);
    }

    .ludo-shape-3 {
        width: 250px;
        height: 250px;
        top: 50%;
        right: -50px;
        opacity: 0.12;
        filter: blur(90px);
    }

    .ludo-hero-title h1,
    .ludo-hero-title .et_pb_text_inner {
        font-size: 3.5rem !important;
    }

    .ludo-stat-card {
        padding: 25px 20px !important;
    }

    .ludo-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }

    #main-header #logo {
        max-height: 70px;
    }

    #main-header.et-fixed-header #logo,
    #main-header.header-scrolled #logo {
        max-height: 50px !important;
    }
}

@media (max-width: 767px) {
    /* Formes flottantes - mobile */
    .ludo-shape-1 {
        width: 250px;
        height: 250px;
        top: -50px;
        right: -100px;
        opacity: 0.1;
        filter: blur(80px);
    }

    .ludo-shape-2 {
        width: 300px;
        height: 300px;
        bottom: 5%;
        left: -50px;
        opacity: 0.18;
        filter: blur(70px);
    }

    .ludo-shape-3 {
        display: none;
    }

    .ludo-hero-section {
        padding: 100px 0 60px !important;
    }

    .ludo-hero-title h1,
    .ludo-hero-title .et_pb_text_inner {
        font-size: 2.5rem !important;
        letter-spacing: -1px !important;
    }

    .ludo-hero-desc p {
        font-size: 1rem !important;
    }

    .ludo-stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }

    .ludo-stat-card {
        padding: 20px 15px !important;
        border-radius: 16px !important;
    }

    .ludo-stat-card .stat-emoji {
        font-size: 36px !important;
    }

    .ludo-stat-card .stat-number,
    .ludo-stat-card h3 {
        font-size: 1.5rem !important;
    }

    .ludo-section-dark {
        padding: 60px 0 !important;
    }

    .ludo-cta-section {
        padding: 40px 25px !important;
        border-radius: 20px !important;
    }

    #main-header #logo {
        max-height: 55px;
    }

    #main-header.et-fixed-header #logo,
    #main-header.header-scrolled #logo {
        max-height: 45px !important;
    }

    #top-header {
        display: none !important;
    }

    body.et-fixed-header #page-container,
    body.header-is-scrolled #page-container {
        padding-top: 60px;
    }
}

/* ==========================================================================
   6. Aperçu Jeux Homepage (shortcode ludo_games_preview)
   ========================================================================== */

/* Container principal */
.ludo-games-preview {
    padding: 30px 0;
}

/* Grille de jeux */
.ludo-games-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}

/* Colonnes selon attribut data-columns */
.ludo-games-preview[data-columns="3"] .ludo-games-grid {
    grid-template-columns: repeat(3, 1fr);
}

.ludo-games-preview[data-columns="6"] .ludo-games-grid {
    grid-template-columns: repeat(6, 1fr);
}

/* Carte jeu individuelle */
.ludo-game-card {
    background: var(--light-card, #FFFFFF);
    border: 1px solid var(--light-border, rgba(0, 0, 0, 0.06));
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.ludo-game-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.08);
}

/* Zone image avec fond coloré */
.ludo-game-image {
    position: relative;
    padding: 20px;
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ludo-game-image picture {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.ludo-game-image img {
    max-width: 100%;
    max-height: 140px;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.4s ease;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
    border-radius: 12px;
}

.ludo-game-card:hover .ludo-game-image img {
    transform: scale(1.08);
}

/* Badges Nouveau / Populaire */
.ludo-game-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
}

.ludo-badge-new {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.ludo-badge-popular {
    background: linear-gradient(135deg, var(--ludo-primary, #E36C1D) 0%, #D4590A 100%);
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(227, 108, 29, 0.3);
}

/* Zone informations jeu */
.ludo-game-info {
    padding: 18px 20px 20px;
}

/* Numéro du jeu */
.ludo-game-code {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--ludo-primary, #E36C1D);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    opacity: 0.85;
}

/* Titre du jeu */
.ludo-game-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ludo-text-dark, #1A1A2E);
    margin: 0 0 10px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Meta-infos (joueurs, âge) */
.ludo-game-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.ludo-game-players,
.ludo-game-age,
.ludo-game-target {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--ludo-text, #6B7280);
}

.ludo-game-players svg,
.ludo-game-age svg,
.ludo-game-target svg {
    color: var(--ludo-primary, #E36C1D);
    opacity: 0.8;
}

/* CTA Explorer le catalogue */
.ludo-games-cta {
    text-align: center;
    margin-top: 20px;
}

.ludo-btn-catalog {
    display: inline-block;
    background: var(--ludo-primary, #E36C1D);
    color: #FFFFFF !important;
    padding: 16px 36px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(227, 108, 29, 0.25);
}

.ludo-btn-catalog:hover {
    background: var(--ludo-primary-light, #F5820A);
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(227, 108, 29, 0.35);
}

/* Responsive - Tablette */
@media (max-width: 980px) {
    .ludo-games-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .ludo-games-preview[data-columns="6"] .ludo-games-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Responsive - Mobile */
@media (max-width: 767px) {
    .ludo-games-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .ludo-games-preview[data-columns="3"] .ludo-games-grid,
    .ludo-games-preview[data-columns="6"] .ludo-games-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ludo-game-image {
        min-height: 140px;
        padding: 15px;
    }

    .ludo-game-image img {
        max-height: 100px;
    }

    .ludo-game-info {
        padding: 12px 14px 16px;
    }

    .ludo-game-code {
        font-size: 9px;
        margin-bottom: 2px;
    }

    .ludo-game-title {
        font-size: 13px;
        margin-bottom: 8px;
    }

    .ludo-game-meta {
        gap: 8px;
    }

    .ludo-game-players,
    .ludo-game-age,
    .ludo-game-target {
        font-size: 11px;
    }

    .ludo-game-badge {
        padding: 4px 8px;
        font-size: 9px;
        top: 8px;
        left: 8px;
    }

    .ludo-btn-catalog {
        padding: 14px 28px;
        font-size: 14px;
    }
}

/* ==========================================================================
   6b. Instagram Feed Section - "Nos Actualités"
   ========================================================================== */

/* Section principale */
.ludo-instagram-section {
    padding: 80px 0;
    background: linear-gradient(180deg, var(--light-bg, #FAFAFA) 0%, #FFFFFF 100%);
}

.ludo-instagram-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header avec titre et sous-titre */
.ludo-instagram-header {
    text-align: center;
    margin-bottom: 40px;
}

.ludo-instagram-title {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 32px;
    font-weight: 800;
    color: var(--ludo-text-dark, #1A1A2E);
    margin: 0 0 12px;
}

.ludo-instagram-icon {
    color: #E4405F;
    flex-shrink: 0;
}

.ludo-instagram-subtitle {
    font-size: 17px;
    color: var(--ludo-text, #6B7280);
    margin: 0;
    max-width: 500px;
    margin: 0 auto;
}

/* Contenu principal */
.ludo-instagram-content {
    position: relative;
}

/* Limiter Smash Balloon à 3 posts (version gratuite) */
.ludo-instagram-section #sbi_images {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
}

.ludo-instagram-section #sbi_images .sbi_item:nth-child(n+4) {
    display: none !important;
}

.ludo-instagram-section #sbi_images .sbi_item {
    width: 100% !important;
    padding: 0 !important;
}

/* Masquer le bouton "Charger plus" de Smash Balloon */
.ludo-instagram-section #sbi_load,
.ludo-instagram-section .sbi_load_btn {
    display: none !important;
}

/* Masquer le header Smash Balloon si on a notre propre titre */
.ludo-instagram-section .sb_instagram_header {
    display: none !important;
}

/* Style des images Smash Balloon */
.ludo-instagram-section .sbi_photo_wrap {
    border-radius: 16px !important;
    overflow: hidden !important;
}

.ludo-instagram-section .sbi_photo {
    border-radius: 16px !important;
}

/* Désactiver la lightbox cassée - forcer ouverture sur Instagram */
.ludo-instagram-section .sbi_lightbox_carousel,
.ludo-instagram-section .sbi_lightbox {
    display: none !important;
}

/* Indicateur Reel/Vidéo */
.ludo-instagram-section .sbi_playbtn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.5) !important;
    border-radius: 50% !important;
}

/* Wrapper embed/placeholder */
.ludo-instagram-embed-wrapper {
    display: flex;
    justify-content: center;
}

.ludo-instagram-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    width: 100%;
    max-width: 800px;
}

/* Carte principale Instagram */
.ludo-instagram-main {
    background: linear-gradient(135deg, #833AB4 0%, #E4405F 50%, #FCAF45 100%);
    border-radius: 24px;
    padding: 50px 40px;
    text-align: center;
    color: #FFFFFF;
    width: 100%;
    box-shadow: 0 20px 60px rgba(131, 58, 180, 0.25);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.ludo-instagram-main:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 80px rgba(131, 58, 180, 0.35);
}

.ludo-instagram-card-icon {
    margin-bottom: 20px;
}

.ludo-instagram-card-icon svg {
    width: 64px;
    height: 64px;
    opacity: 0.95;
}

.ludo-instagram-main h3 {
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 15px;
}

.ludo-instagram-main p {
    font-size: 16px;
    opacity: 0.92;
    margin: 0 0 25px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

/* Bouton Voir profil */
.ludo-btn-follow {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    color: #FFFFFF !important;
    padding: 14px 32px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none !important;
    border: 2px solid rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.ludo-btn-follow:hover {
    background: rgba(255, 255, 255, 0.35);
    border-color: rgba(255, 255, 255, 0.7);
    transform: scale(1.05);
}

/* Grille de features */
.ludo-instagram-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    width: 100%;
}

.ludo-instagram-feature {
    background: var(--light-card, #FFFFFF);
    border: 1px solid var(--light-border, rgba(0, 0, 0, 0.06));
    border-radius: 16px;
    padding: 24px 16px;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
}

.ludo-instagram-feature:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    border-color: rgba(228, 64, 95, 0.2);
}

.ludo-feature-icon {
    font-size: 32px;
    margin-bottom: 10px;
}

.ludo-instagram-feature span {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--ludo-text-dark, #1A1A2E);
}

/* CTA principal en bas */
.ludo-instagram-cta {
    text-align: center;
    margin-top: 40px;
}

.ludo-btn-instagram {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #833AB4 0%, #E4405F 50%, #FCAF45 100%);
    color: #FFFFFF !important;
    padding: 16px 36px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none !important;
    box-shadow: 0 10px 30px rgba(228, 64, 95, 0.3);
    transition: all 0.3s ease;
}

.ludo-btn-instagram:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 15px 45px rgba(228, 64, 95, 0.4);
}

.ludo-btn-instagram svg {
    flex-shrink: 0;
}

/* Responsive - Tablette */
@media (max-width: 980px) {
    .ludo-instagram-title {
        font-size: 26px;
    }

    .ludo-instagram-main {
        padding: 40px 30px;
    }

    .ludo-instagram-main h3 {
        font-size: 22px;
    }

    .ludo-instagram-features {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsive - Mobile */
@media (max-width: 767px) {
    .ludo-instagram-section {
        padding: 50px 0;
    }

    .ludo-instagram-header {
        margin-bottom: 30px;
    }

    .ludo-instagram-title {
        font-size: 22px;
        gap: 8px;
    }

    .ludo-instagram-icon {
        width: 24px;
        height: 24px;
    }

    .ludo-instagram-subtitle {
        font-size: 15px;
    }

    .ludo-instagram-main {
        padding: 35px 25px;
        border-radius: 20px;
    }

    .ludo-instagram-card-icon svg {
        width: 48px;
        height: 48px;
    }

    .ludo-instagram-main h3 {
        font-size: 20px;
    }

    .ludo-instagram-main p {
        font-size: 14px;
    }

    .ludo-btn-follow {
        padding: 12px 24px;
        font-size: 14px;
    }

    .ludo-instagram-features {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .ludo-instagram-feature {
        padding: 18px 12px;
        border-radius: 12px;
    }

    .ludo-feature-icon {
        font-size: 26px;
    }

    .ludo-instagram-feature span {
        font-size: 12px;
    }

    .ludo-btn-instagram {
        padding: 14px 28px;
        font-size: 14px;
    }
}

/* ==========================================================================
   7. Section Contact - "Venez nous rendre visite"
   ========================================================================== */

/* Hérite de .ludo-section-gray - padding spécifique */
.ludo-contact-section {
    background: var(--light-bg, #FAFAFA) !important;
    padding: 80px 0 !important;
}

/* Titre principal avec accent */
.ludo-contact-title h2,
.ludo-contact-title .et_pb_text_inner {
    font-size: clamp(2rem, 4vw, 2.8rem) !important;
    font-weight: 800 !important;
    color: var(--ludo-text-dark, #1A1A2E) !important;
    line-height: 1.2 !important;
    margin-bottom: 40px !important;
}

.ludo-contact-title .accent {
    background: linear-gradient(90deg, #E8842A 0%, #C41E68 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Items de contact (adresse, téléphone, email) */
.ludo-contact-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 16px !important;
    margin-bottom: 25px !important;
}

.ludo-contact-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    background: rgba(245, 156, 0, 0.08);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.ludo-contact-icon svg {
    width: 22px;
    height: 22px;
    color: var(--ludo-primary, #E36C1D);
}

.ludo-contact-details {
    display: flex;
    flex-direction: column;
}

.ludo-contact-label {
    font-size: 12px;
    color: var(--ludo-text, #6B7280);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ludo-contact-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--ludo-text-dark, #1A1A2E);
}

.ludo-contact-value a {
    color: var(--ludo-text-dark, #1A1A2E);
    text-decoration: none;
    transition: color 0.3s ease;
}

.ludo-contact-value a:hover {
    color: var(--ludo-primary, #E36C1D);
}

/* Tableau des horaires */
.ludo-hours-card {
    background: var(--light-card, #FFFFFF) !important;
    border: 1px solid var(--light-border, rgba(0, 0, 0, 0.06)) !important;
    border-radius: 16px !important;
    padding: 0 !important;
    margin-top: 30px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
}

.ludo-hours-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 24px;
    background: linear-gradient(135deg, rgba(245, 156, 0, 0.06) 0%, rgba(245, 156, 0, 0.02) 100%);
    border-bottom: 1px solid var(--light-border, rgba(0, 0, 0, 0.06));
}

.ludo-hours-header svg {
    width: 18px;
    height: 18px;
    color: var(--ludo-primary, #E36C1D);
}

.ludo-hours-header span {
    font-size: 14px;
    font-weight: 600;
    color: var(--ludo-primary, #E36C1D);
}

.ludo-hours-table {
    width: 100%;
    border-collapse: collapse;
}

.ludo-hours-table tr {
    border-bottom: 1px solid var(--light-border, rgba(0, 0, 0, 0.04));
}

.ludo-hours-table tr:last-child {
    border-bottom: none;
}

.ludo-hours-table td {
    padding: 14px 24px;
    font-size: 14px;
}

.ludo-hours-table td:first-child {
    color: var(--ludo-text-dark, #1A1A2E);
    font-weight: 500;
}

.ludo-hours-table td:last-child {
    text-align: right;
    color: var(--ludo-text, #6B7280);
}

.ludo-hours-table .closed {
    color: #EF4444 !important;
    font-weight: 500;
}

.ludo-hours-table .special {
    font-size: 11px;
    color: var(--ludo-text, #6B7280);
    display: block;
    margin-top: 2px;
}

/* Carte formulaire */
.ludo-form-card {
    background: var(--light-card, #FFFFFF) !important;
    border: 1px solid var(--light-border, rgba(0, 0, 0, 0.06)) !important;
    border-radius: 20px !important;
    padding: 40px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04) !important;
    height: 100% !important;
}

.ludo-form-card h3,
.ludo-form-title {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, var(--ludo-primary, #E8842A), var(--ludo-magenta, #C41E68));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 30px !important;
}

/* Champs du formulaire */
.ludo-form-card .et_pb_contact_form label,
.ludo-contact-form label {
    font-size: 12px !important;
    color: var(--ludo-text, #6B7280) !important;
    margin-bottom: 8px !important;
    display: block !important;
    font-weight: 500 !important;
}

.ludo-form-card .et_pb_contact_form input[type="text"],
.ludo-form-card .et_pb_contact_form input[type="email"],
.ludo-form-card .et_pb_contact_form textarea,
.ludo-contact-form input,
.ludo-contact-form textarea {
    background: var(--light-bg, #FAFAFA) !important;
    border: 1px solid var(--light-border, rgba(0, 0, 0, 0.08)) !important;
    border-radius: 12px !important;
    padding: 14px 18px !important;
    font-size: 14px !important;
    color: var(--ludo-text-dark, #1A1A2E) !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
}

.ludo-form-card .et_pb_contact_form input:focus,
.ludo-form-card .et_pb_contact_form textarea:focus,
.ludo-contact-form input:focus,
.ludo-contact-form textarea:focus {
    border-color: var(--ludo-primary, #E36C1D) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(227, 108, 29, 0.1) !important;
    background: var(--light-card, #FFFFFF) !important;
}

.ludo-form-card .et_pb_contact_form input::placeholder,
.ludo-form-card .et_pb_contact_form textarea::placeholder,
.ludo-contact-form input::placeholder,
.ludo-contact-form textarea::placeholder {
    color: #9CA3AF !important;
}

.ludo-form-card .et_pb_contact_form textarea {
    min-height: 120px !important;
    resize: vertical !important;
}

/* Grille 2 colonnes pour Nom/Email */
.ludo-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

/* Bouton submit */
.ludo-form-card .et_pb_contact_submit,
.ludo-form-card .et_pb_button,
.ludo-contact-form button,
.ludo-btn-submit {
    background: var(--ludo-primary, #E36C1D) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 16px 40px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
    margin-top: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    box-shadow: 0 8px 25px rgba(227, 108, 29, 0.25) !important;
}

.ludo-form-card .et_pb_contact_submit:hover,
.ludo-form-card .et_pb_button:hover,
.ludo-contact-form button:hover,
.ludo-btn-submit:hover {
    background: var(--ludo-primary-light, #F5820A) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 35px rgba(227, 108, 29, 0.35) !important;
}

/* Masquer la flèche par défaut de Divi */
.ludo-form-card .et_pb_contact_submit::after,
.ludo-form-card .et_pb_button::after {
    display: none !important;
}

/* Responsive - Tablette */
@media (max-width: 980px) {
    .ludo-contact-section {
        padding: 60px 0 !important;
    }

    .ludo-form-card {
        padding: 30px !important;
        margin-top: 40px !important;
    }
}

/* Responsive - Mobile */
@media (max-width: 767px) {
    .ludo-contact-section {
        padding: 50px 0 !important;
    }

    .ludo-contact-title h2 {
        font-size: 1.8rem !important;
        margin-bottom: 30px !important;
    }

    .ludo-contact-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }

    .ludo-hours-table td {
        padding: 12px 16px;
        font-size: 13px;
    }

    .ludo-form-card {
        padding: 25px 20px !important;
        border-radius: 16px !important;
    }

    .ludo-form-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .ludo-form-card .et_pb_contact_submit,
    .ludo-btn-submit {
        padding: 14px 30px !important;
        font-size: 14px !important;
    }
}

/* ==========================================================================
   8. Footer - Pied de page
   ========================================================================== */

/* Container principal du footer */
#main-footer,
.ludo-footer {
    background-color: #1A1A2E !important;
    color: #9CA3AF !important;
}

/* Zone principale du footer (colonnes) */
#footer-widgets,
.ludo-footer-main,
.et_pb_section.ludo-footer-main,
section.ludo-footer-main,
.et_pb_section.et_pb_section_0.ludo-footer-main,
body #page-container .ludo-footer-main {
    background-color: #1A1A2E !important;
    padding: 80px 0 60px !important;
}

/* Override complet Divi pour section footer */
.ludo-footer-main.et_pb_section,
#et-main-area .ludo-footer-main,
body.et_pb_pagebuilder_layout .ludo-footer-main {
    background-color: #1A1A2E !important;
    padding-top: 80px !important;
    padding-bottom: 60px !important;
}

/* Texte en clair dans le footer */
.ludo-footer-main,
.ludo-footer-main p,
.ludo-footer-main .et_pb_text_inner {
    color: #9CA3AF !important;
}

.ludo-footer-main h1,
.ludo-footer-main h2,
.ludo-footer-main h3,
.ludo-footer-main h4,
.ludo-footer-main .et_pb_module_header {
    color: #FFFFFF !important;
}

/* Grille footer - 4 colonnes */
.ludo-footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
}

/* Colonne logo/description */
.ludo-footer-brand {
    max-width: 320px;
}

.ludo-footer-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.ludo-footer-logo img {
    width: 40px;
    height: 40px;
}

.ludo-footer-logo-text {
    font-size: 16px;
    font-weight: 700;
    color: #FFFFFF;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ludo-footer-desc {
    font-size: 14px;
    line-height: 1.7;
    color: #9CA3AF;
    margin-bottom: 25px;
}

/* Icônes réseaux sociaux */
.ludo-footer-social {
    display: flex;
    gap: 12px;
}

.ludo-footer-social a {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9CA3AF;
    text-decoration: none;
    transition: all 0.3s ease;
}

.ludo-footer-social a:hover {
    background: var(--ludo-primary, #E36C1D);
    color: #FFFFFF;
    transform: translateY(-3px);
}

.ludo-footer-social svg {
    width: 18px;
    height: 18px;
}

/* Colonnes de liens */
.ludo-footer-col h4,
.ludo-footer-col .widget-title,
#footer-widgets .footer-widget h4 {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #6B7280 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    margin-bottom: 25px !important;
}

.ludo-footer-col ul,
#footer-widgets .footer-widget ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.ludo-footer-col li,
#footer-widgets .footer-widget li {
    margin-bottom: 14px !important;
}

.ludo-footer-col a,
#footer-widgets .footer-widget a {
    font-size: 14px !important;
    color: #E5E7EB !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
}

.ludo-footer-col a:hover,
#footer-widgets .footer-widget a:hover {
    color: var(--ludo-primary, #E36C1D) !important;
    padding-left: 5px !important;
}

/* Barre de copyright */
#footer-bottom,
.ludo-footer-bottom,
.et_pb_section.ludo-footer-bottom,
section.ludo-footer-bottom,
body #page-container .ludo-footer-bottom,
.ludo-footer-bottom.et_pb_section,
#et-main-area .ludo-footer-bottom,
body.et_pb_pagebuilder_layout .ludo-footer-bottom {
    background-color: #151525 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 25px 0 !important;
}

/* Texte copyright */
.ludo-footer-bottom,
.ludo-footer-bottom p,
.ludo-footer-bottom .et_pb_text_inner {
    color: #6B7280 !important;
    font-size: 13px !important;
}

.ludo-footer-bottom-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
}

/* Section remerciements partenaires */
.ludo-footer-thanks {
    text-align: center;
    width: 100%;
}

.ludo-thanks-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #9CA3AF !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    margin-bottom: 20px !important;
}

.ludo-thanks-title,
.ludo-footer-bottom .ludo-thanks-title {
    color: #9CA3AF !important;
}

/* Grille logos partenaires */
.ludo-partners-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.ludo-partners-logos a {
    display: block;
    opacity: 0.7;
    transition: all 0.3s ease;
}

.ludo-partners-logos a:hover {
    opacity: 1;
    transform: scale(1.08);
}

.ludo-partners-logos img {
    max-height: 50px;
    width: auto;
    max-width: 130px;
    object-fit: contain;
    filter: brightness(1.1) contrast(0.95);
}

.ludo-partners-logos a:hover img {
    filter: brightness(1.2) contrast(1);
}

#footer-info,
.ludo-footer-copyright {
    font-size: 13px !important;
    color: #6B7280 !important;
}

/* Liens partenaires */
.ludo-footer-partners {
    display: flex;
    gap: 30px;
}

.ludo-footer-partners a {
    font-size: 13px;
    color: #6B7280;
    text-decoration: none;
    transition: color 0.3s ease;
}

.ludo-footer-partners a:hover {
    color: #E5E7EB;
}

/* Override styles Divi par défaut */
#footer-widgets .footer-widget,
#footer-widgets .fwidget {
    background: transparent !important;
    border: none !important;
}

#footer-widgets .footer-widget .widget-title {
    padding-bottom: 0 !important;
    border-bottom: none !important;
}

#footer-bottom #footer-info {
    text-align: left !important;
}

/* Responsive - Tablette */
@media (max-width: 980px) {
    .ludo-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px 30px;
    }

    .ludo-footer-brand {
        grid-column: span 2;
        max-width: 100%;
    }

    #footer-widgets {
        padding: 60px 0 40px !important;
    }
}

/* Responsive - Mobile */
@media (max-width: 767px) {
    .ludo-footer-grid {
        grid-template-columns: 1fr;
        gap: 35px;
        text-align: center;
    }

    .ludo-footer-brand {
        grid-column: span 1;
    }

    .ludo-footer-logo {
        justify-content: center;
    }

    .ludo-footer-social {
        justify-content: center;
    }

    .ludo-footer-bottom-inner {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .ludo-footer-partners {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px 25px;
    }

    #footer-widgets {
        padding: 50px 0 30px !important;
    }

    #footer-bottom {
        padding: 20px 0 !important;
    }
}

/* ==========================================================================
   9. PAGE RÈGLES DU JEU
   ========================================================================== */

/* -------------------------------------------------------------------------
   9.1 Header de page
   ------------------------------------------------------------------------- */
.ludo-page-header {
    padding: 140px 30px 40px !important;
    text-align: center;
    background: transparent !important;
}

.ludo-page-header .et_pb_text_inner {
    max-width: 800px;
    margin: 0 auto;
}

/* Breadcrumb */
.ludo-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #9A9A9A;
    margin-bottom: 1.5rem;
}

.ludo-breadcrumb a {
    color: #6B6B6B;
    text-decoration: none;
    transition: color 0.3s ease;
}

.ludo-breadcrumb a:hover {
    color: #E8842A;
}

.ludo-breadcrumb .current {
    color: #E8842A;
    font-weight: 500;
}

/* Tag/Badge de page */
.ludo-page-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(232, 132, 42, 0.08);
    border: 1px solid rgba(232, 132, 42, 0.2);
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-family: 'Space Mono', monospace;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #E8842A;
    margin-bottom: 1.5rem;
}

/* Titre de page avec gradient */
.ludo-page-title h1,
.ludo-page-header h1 {
    font-size: clamp(2.5rem, 5vw, 4rem) !important;
    font-weight: 800 !important;
    letter-spacing: -2px !important;
    margin-bottom: 1rem !important;
    color: #1A1A1A !important;
}

.ludo-page-title .highlight,
.ludo-page-header h1 span {
    background: linear-gradient(135deg, #E8842A, #C41E68);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ludo-page-header p {
    font-size: 1.15rem !important;
    color: #6B6B6B !important;
    max-width: 600px;
    margin: 0 auto 30px auto !important;
    line-height: 1.8 !important;
}

/* Boutons dans header de page */
.ludo-page-header .ludo-piccolo-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.ludo-page-header .ludo-piccolo-buttons .ludo-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #E8842A 0%, #C41E68 100%);
    color: #FFFFFF !important;
    padding: 14px 28px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
}

.ludo-page-header .ludo-piccolo-buttons .ludo-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(232, 132, 42, 0.3);
}

.ludo-page-header .ludo-piccolo-buttons .ludo-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: #6B6B6B !important;
    padding: 14px 28px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid rgba(0, 0, 0, 0.15);
}

.ludo-page-header .ludo-piccolo-buttons .ludo-btn-secondary:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.25);
    color: #1A1A1A !important;
}

/* -------------------------------------------------------------------------
   9.2 Section Charte - Grille 2 colonnes
   ------------------------------------------------------------------------- */

/* Identique à .ludo-section-gray */
.ludo-regles-section {
    background: #FAFAFA !important;
    padding: 80px 0 !important;
}

.ludo-regles-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
}

/* -------------------------------------------------------------------------
   9.3 FAQ Accordéon (Toggles Divi)
   ------------------------------------------------------------------------- */
.ludo-faq-container .et_pb_toggle {
    background: #FFFFFF !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 16px !important;
    overflow: hidden;
    margin-bottom: 1rem !important;
}

.ludo-faq-container .et_pb_toggle_open {
    border-color: rgba(232, 132, 42, 0.3) !important;
}

/* Titre du toggle */
.ludo-faq-container .et_pb_toggle_title {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #1A1A1A !important;
    padding: 1.25rem 1.5rem !important;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: background 0.3s ease;
}

.ludo-faq-container .et_pb_toggle_title:hover {
    background: #FAFAFA;
}

/* Icône + du toggle */
.ludo-faq-container .et_pb_toggle_title::before {
    content: '+' !important;
    font-family: inherit !important;
    width: 32px !important;
    height: 32px !important;
    background: rgba(232, 132, 42, 0.08) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.2rem !important;
    color: #E8842A !important;
    transition: all 0.3s ease;
    position: absolute !important;
    right: 1.5rem !important;
    left: auto !important;
}

.ludo-faq-container .et_pb_toggle_open .et_pb_toggle_title::before {
    background: linear-gradient(135deg, #E8842A, #C41E68) !important;
    color: white !important;
    transform: rotate(45deg);
}

/* Contenu du toggle */
.ludo-faq-container .et_pb_toggle_content {
    padding: 0 1.5rem 1.5rem !important;
    color: #6B6B6B !important;
    font-size: 0.95rem !important;
    line-height: 1.8 !important;
    border-top: none !important;
}

.ludo-faq-container .et_pb_toggle_content ul {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.ludo-faq-container .et_pb_toggle_content li {
    margin-bottom: 0.5rem;
}

.ludo-faq-container .et_pb_toggle_content strong {
    color: #1A1A1A;
}

/* -------------------------------------------------------------------------
   9.4 Carte Charte de l'emprunteur
   ------------------------------------------------------------------------- */
.ludo-charte-card {
    background: #FFFFFF !important;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 24px !important;
    padding: 2.5rem !important;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.ludo-charte-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #E8842A, #C41E68);
}

/* Header de la carte */
.ludo-charte-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.ludo-charte-icon {
    width: 56px;
    height: 56px;
    background: rgba(232, 132, 42, 0.08);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.ludo-charte-header h3 {
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    color: #1A1A1A !important;
    margin: 0 !important;
}

.ludo-charte-header h3 span {
    color: #C41E68;
}

/* Introduction */
.ludo-charte-intro {
    color: #6B6B6B;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
    line-height: 1.7;
}

/* Liste des engagements */
.ludo-charte-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.ludo-charte-list li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.8rem 0;
    border-bottom: 1px solid #F5F5F5;
    font-size: 0.95rem;
    color: #6B6B6B;
}

.ludo-charte-list li:last-child {
    border-bottom: none;
}

.ludo-charte-check {
    width: 22px;
    height: 22px;
    min-width: 22px;
    background: linear-gradient(135deg, #E8842A, #EBAA7D);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    color: white;
    font-size: 12px;
}

/* -------------------------------------------------------------------------
   9.5 Section FAQ secondaire - 2 colonnes
   ------------------------------------------------------------------------- */
.ludo-faq-two-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 4rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 30px;
}

.ludo-faq-column-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.ludo-faq-column-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.ludo-faq-column-icon.orange {
    background: rgba(232, 132, 42, 0.08);
}

.ludo-faq-column-icon.magenta {
    background: rgba(196, 30, 104, 0.08);
}

.ludo-faq-column-header h3 {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #1A1A1A !important;
    margin: 0 !important;
}

/* -------------------------------------------------------------------------
   9.6 Responsive - Page Règles
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .ludo-regles-grid,
    .ludo-faq-two-columns {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .ludo-page-header {
        padding: 120px 20px 40px !important;
    }

    .ludo-page-title h1,
    .ludo-page-header h1 {
        font-size: 1.8rem !important;
        letter-spacing: -1px !important;
    }

    .ludo-page-header p {
        font-size: 0.95rem !important;
    }

    /* Titres de sections - hiérarchie cohérente */
    .ludo-checklist-title h2,
    .ludo-tarifs-title h2,
    .ludo-timeline-header h3 {
        font-size: 1.4rem !important;
    }

    .ludo-regles-section {
        padding: 50px 0 !important;
    }

    .ludo-regles-grid {
        padding: 0 20px;
    }

    .ludo-charte-card {
        padding: 1.5rem !important;
    }

    .ludo-faq-two-columns {
        margin-top: 2rem;
        padding: 0 20px;
    }
}

/* -------------------------------------------------------------------------
   9.7 Cartes Règles du jeu - STYLE FUN LUDOTHÈQUE
   ------------------------------------------------------------------------- */

/* Hérite de .ludo-section-gradient - padding spécifique */
.ludo-rules-section {
    background: linear-gradient(180deg, #FFF9F5 0%, #FFFFFF 100%) !important;
    padding: 80px 0 !important;
}

/* Grille de cartes 2x2 - Row Divi */
.ludo-rules-cards,
.ludo-rules-cards.et_pb_row,
.et_pb_row.ludo-rules-cards,
.et_pb_section .ludo-rules-cards {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 25px !important;
    max-width: 1400px !important;
    width: 95% !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* Forcer les colonnes Divi à prendre toute la largeur */
.ludo-rules-cards > .et_pb_column,
.ludo-rules-cards .et_pb_column {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Si module Code contient la grille */
.et_pb_code_inner .ludo-rules-cards {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 25px !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Carte individuelle - STYLE ACCUEIL */
.ludo-rule-card {
    background: var(--light-card, #FFFFFF) !important;
    border: 1px solid var(--light-border, rgba(0,0,0,0.06)) !important;
    border-radius: 24px !important;
    padding: 35px 30px !important;
    transition: all 0.4s ease !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
    position: relative;
    overflow: hidden;
}

.ludo-rule-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--ludo-primary, #E8842A), var(--ludo-magenta, #C41E68));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ludo-rule-card:hover {
    transform: translateY(-8px) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08) !important;
}

.ludo-rule-card:hover::before {
    opacity: 1;
}

/* Header de carte avec emoji - GROS EMOJI */
.ludo-rule-card-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.ludo-rule-card-icon {
    width: 64px !important;
    height: 64px !important;
    background: rgba(245, 156, 0, 0.08) !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 32px !important;
    transition: transform 0.3s ease, background 0.3s ease;
}

.ludo-rule-card:hover .ludo-rule-card-icon {
    transform: scale(1.1) rotate(-5deg);
    background: rgba(245, 156, 0, 0.15) !important;
}

.ludo-rule-card-icon.magenta {
    background: rgba(196, 30, 104, 0.08) !important;
}

.ludo-rule-card:hover .ludo-rule-card-icon.magenta {
    background: rgba(196, 30, 104, 0.15) !important;
}

.ludo-rule-card-icon.blue {
    background: rgba(59, 130, 246, 0.08) !important;
}

.ludo-rule-card:hover .ludo-rule-card-icon.blue {
    background: rgba(59, 130, 246, 0.15) !important;
}

.ludo-rule-card-icon.green {
    background: rgba(34, 197, 94, 0.08) !important;
}

.ludo-rule-card:hover .ludo-rule-card-icon.green {
    background: rgba(34, 197, 94, 0.15) !important;
}

.ludo-rule-card h3 {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: var(--ludo-text-dark, #1A1A1A) !important;
    margin: 0 !important;
    line-height: 1.3;
}

.ludo-rule-card p,
.ludo-rule-card li {
    color: var(--ludo-text, #6B6B6B);
    font-size: 14px;
    line-height: 1.7;
}

.ludo-rule-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ludo-rule-card li {
    padding: 8px 0;
    padding-left: 28px;
    position: relative;
}

.ludo-rule-card li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--ludo-primary, #E8842A);
    font-weight: bold;
    font-size: 16px;
}

/* -------------------------------------------------------------------------
   9.8 Bloc Astuce/Bonus - VERSION COMPACTE POUR CARTE
   ------------------------------------------------------------------------- */
.ludo-tip-block {
    background: linear-gradient(135deg, var(--ludo-primary, #E8842A) 0%, var(--ludo-magenta, #C41E68) 100%);
    border-radius: 16px;
    padding: 20px 25px;
    margin: 15px 0 0 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.ludo-tip-block::before {
    content: '💡';
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 80px;
    opacity: 0.1;
    transform: rotate(15deg);
}

.ludo-tip-block::after {
    display: none;
}

.ludo-tip-block-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}

.ludo-tip-block-header span {
    font-size: 1.5rem;
}

.ludo-tip-block h3 {
    color: #FFFFFF !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ludo-tip-block p {
    color: rgba(255, 255, 255, 0.95) !important;
    font-size: 0.9rem;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}

/* Grille des bonus - COMPACT */
.ludo-bonus-grid {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.ludo-bonus-item {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 10px;
    padding: 10px 15px;
    text-align: center;
    min-width: 80px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.ludo-bonus-item:hover {
    transform: scale(1.05);
}

.ludo-bonus-item .amount {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ludo-text, #6B6B6B);
    display: block;
}

.ludo-bonus-item .arrow {
    color: var(--ludo-primary, #E8842A);
    font-size: 1rem;
    display: block;
    margin: 2px 0;
}

.ludo-bonus-item .result {
    font-family: 'Space Mono', monospace;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ludo-primary, #E8842A);
    display: block;
}

/* -------------------------------------------------------------------------
   9.9 Bloc Warning/Alert - STYLE FUN
   ------------------------------------------------------------------------- */
.ludo-warning-block {
    background: linear-gradient(135deg, rgba(245, 156, 0, 0.1), rgba(232, 132, 42, 0.05));
    border: none;
    border-radius: 12px;
    padding: 15px 20px;
    margin: 15px 0;
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
    overflow: hidden;
}

.ludo-warning-block::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--ludo-primary, #E8842A), var(--ludo-magenta, #C41E68));
}

/* Variante Magenta/Rose */
.ludo-alert-block {
    background: rgba(196, 30, 104, 0.08);
    border: none;
    border-radius: 12px;
    padding: 15px 20px;
    margin: 15px 0;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    overflow: hidden;
}

.ludo-alert-block::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--ludo-magenta, #C41E68);
}

.ludo-alert-block .ludo-alert-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.ludo-alert-block p {
    margin: 0 !important;
    font-size: 0.95rem;
    color: var(--ludo-text-dark, #1A1A1A);
}

.ludo-alert-block strong {
    color: var(--ludo-magenta, #C41E68);
    font-weight: 700;
}

.ludo-warning-icon {
    font-size: 2.5rem;
    flex-shrink: 0;
    animation: wiggle 2s ease-in-out infinite;
}

@keyframes wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-10deg); }
    75% { transform: rotate(10deg); }
}

.ludo-warning-block h4 {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--ludo-text-dark, #1A1A1A) !important;
    margin: 0 0 5px 0 !important;
}

.ludo-warning-block p {
    color: var(--ludo-text, #6B6B6B) !important;
    font-size: 0.95rem !important;
    margin: 0 !important;
}

/* -------------------------------------------------------------------------
   9.10 Timeline Retards - STYLE PLAYFUL
   ------------------------------------------------------------------------- */

/* Hérite de .ludo-card-section + max-width spécifique */
.ludo-timeline-section {
    background: var(--light-card, #FFFFFF);
    border: 1px solid var(--light-border, rgba(0,0,0,0.06));
    border-radius: 24px;
    padding: 40px;
    max-width: 1140px;
    margin: 40px auto;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.ludo-timeline-header {
    text-align: center;
    margin-bottom: 40px;
}

.ludo-timeline-header h3 {
    font-size: 2rem !important;
    font-weight: 800 !important;
    color: var(--ludo-text-dark, #1A1A1A) !important;
    margin: 0 0 10px 0 !important;
}

.ludo-timeline-header p {
    color: var(--ludo-text, #6B6B6B);
    font-size: 1rem;
    margin: 0;
}

/* Timeline horizontale - GAME STYLE */
.ludo-timeline {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    padding: 0 20px;
    margin-bottom: 30px;
}

.ludo-timeline::before {
    content: '';
    position: absolute;
    top: 35px;
    left: 12%;
    right: 12%;
    height: 6px;
    background: linear-gradient(90deg, #22c55e, #f59e0b, #ef4444, #7f1d1d);
    border-radius: 3px;
}

.ludo-timeline-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 1;
    flex: 1;
}

.ludo-timeline-dot {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.1rem;
    color: #FFFFFF;
    margin-bottom: 12px;
    border: 5px solid #FFFFFF;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
}

.ludo-timeline-step:hover .ludo-timeline-dot {
    transform: scale(1.15);
}

.ludo-timeline-dot.step-1 { background: linear-gradient(135deg, #22c55e, #16a34a); }
.ludo-timeline-dot.step-2 { background: linear-gradient(135deg, #f59e0b, #d97706); }
.ludo-timeline-dot.step-3 { background: linear-gradient(135deg, #ef4444, #dc2626); }
.ludo-timeline-dot.step-4 { background: linear-gradient(135deg, #7f1d1d, #450a0a); }

.ludo-timeline-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ludo-text-dark, #1A1A1A);
    margin-bottom: 5px;
}

.ludo-timeline-price {
    font-family: 'Space Mono', monospace;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ludo-primary, #E8842A);
}

/* Notes sous timeline */
.ludo-timeline-notes {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    padding-top: 20px;
    border-top: 1px solid var(--light-border, rgba(0,0,0,0.06));
}

.ludo-timeline-note {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--ludo-text, #6B6B6B);
    background: rgba(245, 156, 0, 0.05);
    padding: 8px 15px;
    border-radius: 50px;
}

.ludo-timeline-note span:first-child {
    font-size: 1.2rem;
}

/* -------------------------------------------------------------------------
   9.11 Section Départ/Retour - STYLE CARTES FUN
   ------------------------------------------------------------------------- */
.ludo-checklist-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    max-width: 1400px;
    width: 95%;
    margin: 0 auto;
    padding: 0;
}

/* Titre de la section checklist - identique à ludo-tarifs-title */
.ludo-checklist-title {
    grid-column: 1 / -1;
    text-align: center;
    margin-bottom: 40px;
}

.ludo-checklist-title h2 {
    font-size: 2rem !important;
    font-weight: 800 !important;
    color: var(--ludo-text-dark, #1A1A1A) !important;
    margin: 0 0 10px 0 !important;
}

.ludo-checklist-title p {
    color: var(--ludo-text, #6B6B6B);
    font-size: 1rem;
    margin: 0;
}

.ludo-checklist-card {
    background: var(--light-card, #FFFFFF) !important;
    border: 1px solid var(--light-border, rgba(0,0,0,0.06)) !important;
    border-radius: 24px !important;
    padding: 30px;
    transition: all 0.4s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
}

.ludo-checklist-card:hover {
    transform: translateY(-8px) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08) !important;
}

.ludo-checklist-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--ludo-primary, #E8842A), var(--ludo-magenta, #C41E68));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ludo-checklist-card:hover::before {
    opacity: 1;
}

.ludo-checklist-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.ludo-checklist-header span {
    font-size: 2rem;
}

.ludo-checklist-header h3 {
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: var(--ludo-text-dark, #1A1A1A) !important;
    margin: 0 !important;
}

.ludo-checklist-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ludo-checklist-card li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    color: var(--ludo-text, #6B6B6B);
    font-size: 0.95rem;
    line-height: 1.6;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.ludo-checklist-card li:last-child {
    border-bottom: none;
}

.ludo-checklist-card li::before {
    content: '→';
    color: var(--ludo-primary, #E8842A);
    font-weight: bold;
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* -------------------------------------------------------------------------
   9.12 Section Tarifs - NOUVELLE STRUCTURE
   ------------------------------------------------------------------------- */

/* Titre section tarifs */
.ludo-tarifs-title {
    text-align: center;
    margin-bottom: 40px;
}

.ludo-tarifs-title h2 {
    font-size: 2rem !important;
    font-weight: 800 !important;
    color: var(--ludo-text-dark, #1A1A1A) !important;
    margin: 0 0 10px 0 !important;
}

.ludo-tarifs-title p {
    color: var(--ludo-text, #6B6B6B);
    font-size: 1rem;
    margin: 0;
}

/* ===========================================
   CARTE DÉCOUVERTE - ORANGE/MAGENTA
   =========================================== */
.ludo-decouverte-card {
    background: linear-gradient(135deg, var(--ludo-primary, #E8842A) 0%, var(--ludo-magenta, #C41E68) 100%);
    border-radius: 24px;
    padding: 30px 35px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 25px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(232, 132, 42, 0.25);
}

.ludo-decouverte-card::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.ludo-decouverte-card::after {
    content: '';
    position: absolute;
    bottom: -30px;
    left: -30px;
    width: 120px;
    height: 120px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
}

.ludo-decouverte-icon {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.ludo-decouverte-content {
    flex: 1;
    position: relative;
    z-index: 1;
}

.ludo-decouverte-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.25);
    color: #FFFFFF;
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.ludo-decouverte-card h3 {
    color: #FFFFFF !important;
    font-size: 1.4rem !important;
    font-weight: 800 !important;
    margin: 0 0 8px 0 !important;
}

.ludo-decouverte-card .price-line {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
}

.ludo-decouverte-card .price {
    font-family: 'Space Mono', monospace;
    font-size: 2.2rem;
    font-weight: 700;
    color: #FFFFFF;
}

.ludo-decouverte-card .price-detail {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
}

.ludo-decouverte-card .features {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.ludo-decouverte-card .feature {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.9rem;
}

.ludo-decouverte-card .feature span {
    font-size: 1rem;
}

/* Image découverte */
.ludo-decouverte-img {
    width: 120px;
    height: 120px;
    border-radius: 16px;
    object-fit: cover;
    flex-shrink: 0;
    border: 4px solid rgba(255, 255, 255, 0.3);
    position: relative;
    z-index: 1;
}

/* Bloc Bonne Nouvelle - intégré dans carte découverte */
.ludo-bonne-nouvelle {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    padding: 15px 18px;
    margin-top: 15px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    position: relative;
    z-index: 1;
}

.ludo-bonne-nouvelle .icon {
    font-size: 1.3rem;
    flex-shrink: 0;
    line-height: 1;
}

.ludo-bonne-nouvelle p {
    margin: 0 !important;
    font-size: 0.9rem;
    color: #FFFFFF;
    line-height: 1.5;
}

.ludo-bonne-nouvelle strong {
    color: #FFFFFF;
    font-weight: 700;
}

/* ===========================================
   GRILLE FORMULES - 3 COLONNES
   =========================================== */
.ludo-formules-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 30px;
    width: 100%;
}

/* Carte formule */
.ludo-formule-card {
    background: var(--light-card, #FFFFFF);
    border: 1px solid var(--light-border, rgba(0, 0, 0, 0.06));
    border-radius: 20px;
    padding: 25px 20px;
    transition: all 0.4s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.ludo-formule-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.ludo-formule-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--ludo-primary, #E8842A), var(--ludo-magenta, #C41E68));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ludo-formule-card:hover::before {
    opacity: 1;
}

/* Badge recommandé */
.ludo-formule-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: linear-gradient(135deg, var(--ludo-primary, #E8842A), var(--ludo-magenta, #C41E68));
    color: #FFFFFF;
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ludo-formule-card-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.ludo-formule-card-icon {
    width: 56px;
    height: 56px;
    background: rgba(245, 156, 0, 0.08);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    transition: transform 0.3s ease, background 0.3s ease;
}

.ludo-formule-card:hover .ludo-formule-card-icon {
    transform: scale(1.1) rotate(-5deg);
    background: rgba(245, 156, 0, 0.15);
}

.ludo-formule-card h3 {
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: var(--ludo-text-dark, #1A1A1A) !important;
    margin: 0 !important;
}

.ludo-formule-card h3 small {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ludo-text, #6B6B6B);
    margin-top: 3px;
}

.ludo-formule-card-price {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.ludo-formule-card-price .amount {
    font-family: 'Space Mono', monospace;
    font-size: 2rem;
    font-weight: 700;
    color: var(--ludo-primary, #E8842A);
}

.ludo-formule-card-price .suffix {
    font-size: 0.9rem;
    color: var(--ludo-text, #6B6B6B);
}

.ludo-formule-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ludo-formule-card li {
    padding: 8px 0;
    padding-left: 25px;
    position: relative;
    color: var(--ludo-text, #6B6B6B);
    font-size: 0.95rem;
    line-height: 1.6;
}

.ludo-formule-card li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #10B981;
    font-weight: bold;
}

/* Carte Pack - Style spécial */
.ludo-formule-pack {
    background: linear-gradient(180deg, rgba(196, 30, 104, 0.03) 0%, #FFFFFF 100%);
}

.ludo-formule-pack::before {
    background: linear-gradient(90deg, var(--ludo-magenta, #C41E68), var(--ludo-primary, #E8842A)) !important;
    opacity: 1 !important;
}

.ludo-formule-pack .ludo-formule-badge {
    background: linear-gradient(135deg, var(--ludo-magenta, #C41E68), var(--ludo-primary, #E8842A));
}

/* Options des packs */
.ludo-pack-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.ludo-pack-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(196, 30, 104, 0.05);
    padding: 8px 12px;
    border-radius: 8px;
}

.ludo-pack-item .pack-name {
    font-size: 0.85rem;
    color: var(--ludo-text-dark, #1A1A1A);
    font-weight: 500;
}

.ludo-pack-item .pack-price {
    font-family: 'Space Mono', monospace;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ludo-magenta, #C41E68);
}

/* Note supplément non-membre dans Pack */
.ludo-pack-note {
    background: rgba(196, 30, 104, 0.08);
    border: 1px dashed rgba(196, 30, 104, 0.3);
    border-radius: 8px;
    padding: 10px 12px;
    margin-top: 12px;
    text-align: center;
}

.ludo-pack-note p {
    margin: 0 !important;
    font-size: 0.8rem;
    color: var(--ludo-text, #6B6B6B);
    line-height: 1.4;
}

.ludo-pack-note strong {
    color: var(--ludo-magenta, #C41E68);
    font-weight: 700;
}

/* Bloc info dans carte formule */
.ludo-formule-info {
    background: rgba(232, 132, 42, 0.08);
    border-radius: 10px;
    padding: 10px 15px;
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.ludo-formule-info .icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.ludo-formule-info p {
    margin: 0 !important;
    font-size: 0.85rem;
    color: var(--ludo-text-dark, #1A1A1A);
    font-weight: 500;
}

.ludo-formule-info strong {
    color: var(--ludo-primary, #E8842A);
}

/* Bloc info jeux inclus - pour section abonnements */
.ludo-formule-info-jeu {
    background: rgba(232, 132, 42, 0.08);
    border-radius: 50px;
    padding: 6px 14px;
    margin: 8px auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: auto;
}

.ludo-formule-info-jeu p {
    margin: 0 !important;
    font-size: 0.85rem;
    color: var(--ludo-text, #6B6B6B);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
}

.ludo-formule-info-jeu .highlight {
    color: var(--ludo-primary, #E8842A);
    font-family: 'Space Mono', monospace;
    font-size: 0.95rem;
    font-weight: 700;
}

/* ===========================================
   SECTION ABONNEMENTS
   =========================================== */

/* Hérite de .ludo-card-section - padding spécifique */
.ludo-abonnements-section {
    background: var(--light-card, #FFFFFF);
    border: 1px solid var(--light-border, rgba(0, 0, 0, 0.06));
    border-radius: 24px;
    padding: 35px;
    margin-bottom: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.ludo-abonnements-header {
    text-align: center;
    margin-bottom: 30px;
}

.ludo-abonnements-header h3 {
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    color: var(--ludo-text-dark, #1A1A1A) !important;
    margin: 0 0 8px 0 !important;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.ludo-abonnements-header p {
    color: var(--ludo-text, #6B6B6B);
    font-size: 0.95rem;
    margin: 0;
}

/* Grille des abonnements - 3 colonnes */
.ludo-abo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Carte abonnement */
.ludo-abo-card {
    background: linear-gradient(180deg, rgba(245, 156, 0, 0.03) 0%, #FFFFFF 100%);
    border: 2px solid var(--light-border, rgba(0, 0, 0, 0.06));
    border-radius: 20px;
    padding: 20px 18px;
    text-align: center;
    transition: all 0.4s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.ludo-abo-card:hover {
    border-color: var(--ludo-primary, #E8842A);
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(232, 132, 42, 0.15);
}

.ludo-abo-card.recommended {
    border-color: var(--ludo-primary, #E8842A);
    border-width: 2px;
    background: linear-gradient(180deg, rgba(245, 156, 0, 0.08) 0%, #FFFFFF 100%);
}

.ludo-abo-card .abo-badge {
    position: absolute;
    top: -10px;
    right: 15px;
    background: linear-gradient(135deg, var(--ludo-primary, #E8842A), var(--ludo-magenta, #C41E68));
    color: #FFFFFF;
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ludo-abo-card-icon {
    font-size: 2rem;
    margin-bottom: 4px;
}

.ludo-abo-card h4 {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: var(--ludo-text-dark, #1A1A1A) !important;
    margin: 0 !important;
}

.ludo-abo-card .games {
    font-size: 0.8rem;
    color: var(--ludo-text, #6B6B6B);
    margin: 2px 0 8px 0;
}

/* Prix avec structure: montant orange + suffix gris petit */
.ludo-abo-card .price-block {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    margin-top: 5px;
}

.ludo-abo-card .price-block .amount {
    font-family: 'Space Mono', monospace;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--ludo-primary, #E8842A);
}

.ludo-abo-card .price-block .suffix {
    font-size: 0.75rem;ajout un gradient 
    font-weight: 500;
    color: var(--ludo-text, #6B6B6B);
}

/* Style prix abo - montant orange + suffix gris */
.ludo-abo-card .price {
    font-family: 'Space Mono', monospace;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ludo-primary, #E8842A);
    margin-top: 8px;
}

.ludo-abo-card .price span {
    font-family: 'Poppins', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--ludo-text, #6B6B6B);
}

/* ===========================================
   DÉTAILS FAMILLE - GRILLE 4 COLONNES
   =========================================== */
.ludo-famille-details {
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.ludo-famille-details h4 {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--ludo-text-dark, #1A1A1A) !important;
    margin: 0 0 15px 0 !important;
    text-align: center;
}

.ludo-famille-details h4 small {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--ludo-text, #6B6B6B);
    margin-top: 4px;
}

.ludo-famille-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.ludo-famille-item {
    background: rgba(245, 156, 0, 0.05);
    border-radius: 12px;
    padding: 15px 12px;
    text-align: center;
    transition: all 0.3s ease;
}

.ludo-famille-item:hover {
    background: rgba(245, 156, 0, 0.1);
    transform: translateY(-3px);
}

.ludo-famille-item .label {
    display: block;
    font-size: 0.75rem;
    color: var(--ludo-text, #6B6B6B);
    margin-bottom: 5px;
}

/* Prix famille avec structure: montant orange + suffix gris */
.ludo-famille-item .price-block {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 3px;
}

.ludo-famille-item .price-block .amount {
    font-family: 'Space Mono', monospace;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ludo-primary, #E8842A);
}

.ludo-famille-item .price-block .suffix {
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--ludo-text, #6B6B6B);
}

/* Ancien style prix famille (rétrocompatibilité) */
.ludo-famille-item .price {
    font-family: 'Space Mono', monospace;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ludo-primary, #E8842A);
}

/* ===========================================
   BANNIÈRE CAUTION
   =========================================== */
.ludo-caution-banner {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(245, 156, 0, 0.08);
    border: 1px solid rgba(245, 156, 0, 0.2);
    border-radius: 16px;
    padding: 20px 25px;
    margin-top: 25px;
}

.ludo-caution-banner .caution-icon {
    width: 50px;
    height: 50px;
    background: rgba(245, 156, 0, 0.15);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.ludo-caution-banner .caution-content {
    flex: 1;
}

.ludo-caution-banner h4 {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--ludo-text-dark, #1A1A1A) !important;
    margin: 0 0 5px 0 !important;
}

.ludo-caution-banner p {
    margin: 0 !important;
    font-size: 0.9rem;
    color: var(--ludo-text, #6B6B6B);
    line-height: 1.6;
}

.ludo-caution-banner strong {
    color: var(--ludo-primary, #E8842A);
    font-weight: 700;
}

/* ===========================================
   RESPONSIVE TARIFS
   =========================================== */
@media (max-width: 1024px) {
    .ludo-formules-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ludo-decouverte-card {
        flex-direction: column;
        text-align: center;
    }

    .ludo-decouverte-card .features {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .ludo-tarifs-section {
        padding: 40px 15px;
    }

    .ludo-formules-grid {
        grid-template-columns: 1fr;
    }

    /* Carte découverte mobile */
    .ludo-decouverte-card {
        padding: 25px 20px;
        flex-direction: column;
        text-align: center;
    }

    .ludo-decouverte-card .ludo-decouverte-content {
        order: 1;
    }

    .ludo-decouverte-card .ludo-decouverte-img {
        order: 2;
        margin-top: 15px;
    }

    .ludo-decouverte-badge {
        order: 0;
        margin-bottom: 10px;
    }

    .ludo-decouverte-card .price-line {
        flex-direction: column;
        gap: 2px;
    }

    .ludo-decouverte-card .price {
        font-size: 1.8rem;
    }

    .ludo-decouverte-card .price-detail {
        font-size: 0.85rem;
    }

    .ludo-decouverte-card .features {
        justify-content: center;
    }

    /* Section abonnements en flexbox pour réordonner */
    .ludo-abonnements-section {
        padding: 25px 20px;
        display: flex;
        flex-direction: column;
    }

    /* Ordre mobile: header(1), adulte(2), famille(3), détails(4), pro(5), formule-info(6) */
    .ludo-abonnements-section .ludo-abonnements-header {
        order: 1;
    }

    .ludo-abonnements-section .ludo-abo-grid {
        order: 2;
        display: contents; /* Permet aux enfants de participer au flex parent */
    }

    .ludo-abonnements-section .ludo-abo-card:nth-of-type(1) {
        order: 2; /* Adulte */
    }

    .ludo-abonnements-section .ludo-abo-card:nth-of-type(2) {
        order: 3; /* Famille */
    }

    .ludo-abonnements-section .ludo-abo-card:nth-of-type(3) {
        order: 5; /* Pro - après détails */
    }

    .ludo-abonnements-section .ludo-famille-details {
        order: 4; /* Détails famille entre Famille et Pro */
    }

    .ludo-abonnements-section .ludo-formule-info {
        order: 6; /* Bloc info supplément à la fin */
    }

    .ludo-famille-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Caution banner - toujours à la fin */
    .ludo-caution-banner {
        flex-direction: column;
        text-align: center;
        order: 99;
    }

    /* Section tarifs globale en flex pour ordre */
    .ludo-tarifs-section {
        display: flex;
        flex-direction: column;
    }

    .ludo-tarifs-section > .ludo-tarifs-title { order: 1; }
    .ludo-tarifs-section > .ludo-decouverte-card { order: 2; }
    .ludo-tarifs-section > .ludo-formules-grid { order: 3; }
    .ludo-tarifs-section > .ludo-abonnements-section { order: 4; }
    .ludo-tarifs-section > .ludo-caution-banner { order: 5; }

    /* Badges positionnés en haut centré sur mobile */
    .ludo-formule-badge,
    .ludo-formule-card .ludo-formule-badge {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        display: block !important;
        width: fit-content !important;
        margin: 0 auto 15px auto !important;
    }

    .ludo-abo-card .abo-badge {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        display: block !important;
        width: fit-content !important;
        margin: 0 auto 15px auto !important;
    }

    /* Ajuster le padding top des cartes pour compenser */
    .ludo-formule-card,
    .ludo-abo-card {
        padding-top: 20px !important;
    }
}

/* -------------------------------------------------------------------------
   9.13 CTA Final - STYLE ACCUEIL
   ------------------------------------------------------------------------- */
.ludo-rules-cta {
    text-align: center;
    padding: 50px 40px;
    background: linear-gradient(135deg, rgba(245, 156, 0, 0.08), rgba(196, 30, 104, 0.05));
    border-radius: 24px;
    max-width: 800px;
    margin: 50px auto;
    position: relative;
    overflow: hidden;
}

.ludo-rules-cta::before {
    content: '🎲';
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 60px;
    opacity: 0.15;
}

.ludo-rules-cta h3 {
    font-size: 1.8rem !important;
    font-weight: 800 !important;
    color: var(--ludo-text-dark, #1A1A1A) !important;
    margin-bottom: 15px !important;
}

.ludo-rules-cta p {
    color: var(--ludo-text, #6B6B6B);
    font-size: 1.1rem;
    margin-bottom: 25px;
}

.ludo-rules-cta .ludo-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--ludo-primary, #E8842A) !important;
    color: #FFFFFF !important;
    padding: 18px 35px !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    text-decoration: none;
    transition: all 0.3s ease !important;
    box-shadow: 0 8px 25px rgba(232, 132, 42, 0.25);
}

.ludo-rules-cta .ludo-btn-primary:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 15px 40px rgba(232, 132, 42, 0.35) !important;
    background: var(--ludo-primary-light, #F59A4A) !important;
}

.ludo-rules-cta .ludo-btn-primary::after {
    content: '→';
    font-size: 18px;
    transition: transform 0.3s ease;
}

.ludo-rules-cta .ludo-btn-primary:hover::after {
    transform: translateX(5px);
}

/* -------------------------------------------------------------------------
   9.14 Toggle Contact - Module Divi
   ------------------------------------------------------------------------- */
.ludo-contact-toggle.et_pb_toggle {
    background: transparent !important;
    border: none !important;
    max-width: 900px;
    margin: 0 auto 40px auto !important;
    box-shadow: none !important;
}

.ludo-contact-toggle .et_pb_toggle_title {
    background: linear-gradient(135deg, var(--ludo-primary, #E8842A), var(--ludo-magenta, #C41E68)) !important;
    color: #FFFFFF !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    padding: 18px 30px !important;
    border-radius: 50px !important;
    text-align: center !important;
    justify-content: center !important;
    box-shadow: 0 8px 25px rgba(232, 132, 42, 0.25);
    transition: all 0.3s ease !important;
}

.ludo-contact-toggle .et_pb_toggle_title:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(232, 132, 42, 0.35);
}

/* Icône toggle */
.ludo-contact-toggle .et_pb_toggle_title::before {
    display: none !important;
}

.ludo-contact-toggle .et_pb_toggle_title::after {
    content: '▼' !important;
    font-family: inherit !important;
    margin-left: 10px;
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.ludo-contact-toggle.et_pb_toggle_open .et_pb_toggle_title::after {
    transform: rotate(180deg);
}

/* Contenu du toggle */
.ludo-contact-toggle .et_pb_toggle_content {
    background: var(--light-card, #FFFFFF) !important;
    border: 1px solid var(--light-border, rgba(0, 0, 0, 0.06)) !important;
    border-radius: 24px !important;
    padding: 30px !important;
    margin-top: 20px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
}

/* -------------------------------------------------------------------------
   9.15 Responsive - Composants Fun
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .ludo-rules-cards,
    .ludo-rules-cards.et_pb_row,
    .et_pb_row.ludo-rules-cards,
    .et_pb_section .ludo-rules-cards,
    .et_pb_code_inner .ludo-rules-cards,
    .ludo-checklist-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .ludo-timeline {
        flex-direction: column !important;
        gap: 30px !important;
        align-items: stretch !important;
        padding-left: 0 !important;
        position: relative;
    }

    .ludo-timeline::before {
        display: none !important;
    }

    .ludo-timeline-step {
        flex-direction: column !important;
        text-align: center !important;
        gap: 12px !important;
        padding: 20px !important;
        background: rgba(232, 132, 42, 0.05) !important;
        border-radius: 16px !important;
        position: relative;
    }

    .ludo-timeline-step::before {
        content: '' !important;
        position: absolute !important;
        top: -15px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 3px !important;
        height: 15px !important;
        background: linear-gradient(to bottom, transparent, #E8842A) !important;
    }

    .ludo-timeline-step:first-child::before {
        display: none !important;
    }

    .ludo-timeline-dot {
        margin: 0 auto 10px !important;
        width: 50px !important;
        height: 50px !important;
        font-size: 1.3rem !important;
    }

    .ludo-timeline-label {
        font-size: 0.9rem !important;
    }
}

@media (max-width: 768px) {
    .ludo-rules-section {
        padding: 50px 0 !important;
    }

    .ludo-tip-block {
        padding: 30px 20px;
        margin: 30px 15px;
    }

    .ludo-tip-block h3 {
        font-size: 1.2rem !important;
    }

    .ludo-bonus-grid {
        gap: 12px;
    }

    .ludo-bonus-item {
        min-width: 100px;
        padding: 15px 18px;
    }

    .ludo-warning-block {
        flex-direction: column;
        text-align: center;
        margin: 25px 15px;
        padding: 25px 20px;
    }

    .ludo-timeline-section {
        margin: 30px 15px;
        padding: 25px 20px;
    }

    .ludo-timeline-notes {
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }

    .ludo-rules-cta {
        margin: 40px 15px;
        padding: 35px 25px;
    }

    .ludo-rules-cta h3 {
        font-size: 1.4rem !important;
    }

    .ludo-checklist-grid,
    .ludo-rules-cards {
        padding: 0 15px;
    }

    .ludo-rule-card {
        padding: 25px 20px !important;
    }

    /* Hiérarchie des titres mobile - cohérence complète */

    /* H1 - Titres principaux de page : 1.8rem */
    .ludo-page-title h1,
    .ludo-page-header h1 {
        font-size: 1.8rem !important;
        letter-spacing: -1px !important;
    }

    /* Intro titres (catalog/pack) - légèrement plus petits que H1 page : 1.6rem */
    .catalog-intro-title,
    .pack-intro-title {
        font-size: 1.6rem !important;
        letter-spacing: -1px !important;
    }

    /* H2 - Titres de sections principales : 1.4rem */
    .ludo-section-light h2,
    .ludo-services-title h2,
    .ludo-services-section h2,
    .ludo-contact-title h2,
    .ludo-cta-section h2,
    .ludo-checklist-title h2,
    .ludo-tarifs-title h2,
    .ludo-abonnements-header h3 {
        font-size: 1.4rem !important;
    }

    /* H3 - Titres de sous-sections : 1.2rem */
    .ludo-timeline-header h3,
    .ludo-charte-header h3,
    .ludo-decouverte-card h3,
    .ludo-formule-card h3,
    .ludo-checklist-header h3,
    .ludo-faq-column-header h3 {
        font-size: 1.2rem !important;
    }

    /* H4 - Titres de cartes/éléments : 1.05rem */
    .ludo-abo-card h4,
    .ludo-famille-details h4,
    .ludo-caution-banner h4 {
        font-size: 1.05rem !important;
    }

    /* Paragraphes et descriptions */
    .ludo-page-header p,
    .ludo-page-title p {
        font-size: 0.95rem !important;
    }

    .ludo-section-subtitle,
    .catalog-intro-subtitle,
    .pack-intro-subtitle {
        font-size: 0.95rem !important;
    }
}

/* ==========================================================================
   11. CATALOG & PACK INTRO SECTIONS
   ========================================================================== */

/* -------------------------------------------------------------------------
   11.1 Catalog Intro - Masquée lors de navigation
   ------------------------------------------------------------------------- */
.catalog-intro {
    background: linear-gradient(135deg, rgba(232, 132, 42, 0.06) 0%, rgba(196, 30, 104, 0.04) 100%);
    border-radius: 24px;
    padding: 40px;
    margin-bottom: 30px;
    transition: all 0.4s ease;
    overflow: hidden;
}

.catalog-intro.hidden {
    display: block !important; /* Override Bootstrap .hidden */
    opacity: 0;
    max-height: 0;
    padding: 0 40px;
    margin-bottom: 0;
    pointer-events: none;
}

.catalog-intro-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    letter-spacing: -2px;
    text-align: center;
    margin: 0 0 15px 0;
    color: #1A1A1A;
}

.catalog-intro-title span {
    background: linear-gradient(135deg, #E8842A, #C41E68);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.catalog-intro-subtitle {
    font-size: 1.1rem;
    color: var(--ludo-text, #6B7280);
    text-align: center;
    margin: 0 0 30px 0;
}

.catalog-intro-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.catalog-intro-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    background: var(--light-card, #FFFFFF);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.catalog-intro-item .intro-icon {
    font-size: 1.8rem;
    flex-shrink: 0;
}

.catalog-intro-item .intro-content strong {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ludo-text-dark, #1A1A1A);
    margin-bottom: 5px;
}

.catalog-intro-item .intro-content p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--ludo-text, #6B7280);
    line-height: 1.5;
}

.catalog-intro-horaires {
    background: var(--light-card, #FFFFFF);
    border-radius: 12px;
    padding: 25px;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.catalog-intro-horaires h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ludo-text-dark, #1A1A1A);
    text-align: center;
    margin: 0 0 20px 0;
}

.catalog-intro-horaires .horaires-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.catalog-intro-horaires .horaire-item {
    text-align: center;
}

.catalog-intro-horaires .horaire-icon {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 8px;
}

.catalog-intro-horaires .horaire-item strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ludo-primary, #E8842A);
    margin-bottom: 5px;
}

.catalog-intro-horaires .horaire-item p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--ludo-text, #6B7280);
    line-height: 1.4;
}

/* Bouton pour réafficher l'intro catalog */
.catalog-intro-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(232, 132, 42, 0.1) 0%, rgba(196, 30, 104, 0.08) 100%);
    border: 1px solid rgba(232, 132, 42, 0.2);
    border-radius: 50px;
    padding: 8px 16px;
    margin-bottom: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.85rem;
    color: var(--ludo-primary, #E8842A);
    font-weight: 500;
}

.catalog-intro-toggle:hover {
    background: linear-gradient(135deg, rgba(232, 132, 42, 0.15) 0%, rgba(196, 30, 104, 0.12) 100%);
    transform: translateY(-2px);
}

.catalog-intro-toggle .toggle-icon {
    font-size: 1rem;
}

/* Afficher le bouton quand l'intro est cachée */
.catalog-intro.hidden + .catalog-intro-toggle,
.catalog-intro[style*="display: none"] + .catalog-intro-toggle,
.pack-intro.hidden + .pack-intro-toggle,
.pack-intro[style*="display: none"] + .pack-intro-toggle {
    display: inline-flex;
}

/* Responsive catalog intro */
@media (max-width: 768px) {
    .catalog-intro {
        padding: 25px 20px;
    }

    /* Taille du titre gérée dans la section hiérarchie mobile (1.6rem) */

    .catalog-intro-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .catalog-intro-item {
        padding: 15px;
    }

    .catalog-intro-horaires .horaires-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}

/* -------------------------------------------------------------------------
   11.2 Pack Intro - Même style que catalog intro
   ------------------------------------------------------------------------- */
.pack-intro {
    background: linear-gradient(135deg, rgba(232, 132, 42, 0.06) 0%, rgba(196, 30, 104, 0.04) 100%);
    border-radius: 24px;
    padding: 40px;
    margin-bottom: 30px;
    transition: all 0.4s ease;
    overflow: hidden;
}

.pack-intro.hidden {
    display: block !important; /* Override Bootstrap .hidden */
    opacity: 0;
    max-height: 0;
    padding: 0 40px;
    margin-bottom: 0;
    pointer-events: none;
}

.pack-intro-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    letter-spacing: -2px;
    text-align: center;
    margin: 0 0 15px 0;
    color: #1A1A1A;
}

.pack-intro-title span {
    background: linear-gradient(135deg, #E8842A, #C41E68);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pack-intro-subtitle {
    font-size: 1.1rem;
    color: var(--ludo-text, #6B7280);
    text-align: center;
    margin: 0 0 30px 0;
    line-height: 1.6;
}

.pack-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-bottom: 30px;
    align-items: start;
}

/* Colonne gauche : items empilés */
.pack-intro-col-left {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Colonne droite : carte tarif */
.pack-intro-col-right {
    display: flex;
    align-items: stretch;
}

.pack-intro-col-right .ludo-formule-card {
    width: 100%;
    margin: 0;
}

.pack-intro-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    background: var(--light-card, #FFFFFF);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.pack-intro-item .intro-icon {
    font-size: 1.8rem;
    flex-shrink: 0;
}

.pack-intro-item .intro-content strong {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ludo-text-dark, #1A1A1A);
    margin-bottom: 5px;
}

.pack-intro-item .intro-content p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--ludo-text, #6B7280);
    line-height: 1.5;
}

/* Bouton contact dans pack intro */
.pack-intro-item .btn-contact-popup,
.pack-intro-item .ludo-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--ludo-primary, #E8842A), var(--ludo-accent, #C41E68));
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(232, 132, 42, 0.25);
    text-decoration: none;
}

.pack-intro-item .btn-contact-popup:hover,
.pack-intro-item .ludo-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(232, 132, 42, 0.35);
    color: #fff;
}

.pack-intro-horaires {
    background: var(--light-card, #FFFFFF);
    border-radius: 12px;
    padding: 25px;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.pack-intro-horaires h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ludo-text-dark, #1A1A1A);
    text-align: center;
    margin: 0 0 20px 0;
}

.pack-intro-horaires .horaires-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.pack-intro-horaires .horaire-item {
    text-align: center;
}

.pack-intro-horaires .horaire-icon {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 8px;
}

.pack-intro-horaires .horaire-item strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ludo-primary, #E8842A);
    margin-bottom: 5px;
}

.pack-intro-horaires .horaire-item p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--ludo-text, #6B7280);
    line-height: 1.4;
}

/* Bouton toggle pack */
.pack-intro-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(232, 132, 42, 0.1) 0%, rgba(196, 30, 104, 0.08) 100%);
    border: 1px solid rgba(232, 132, 42, 0.2);
    border-radius: 50px;
    padding: 8px 16px;
    margin-bottom: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.85rem;
    color: var(--ludo-primary, #E8842A);
    font-weight: 500;
}

.pack-intro-toggle:hover {
    background: linear-gradient(135deg, rgba(232, 132, 42, 0.15) 0%, rgba(196, 30, 104, 0.12) 100%);
    transform: translateY(-2px);
}

.pack-intro-toggle .toggle-icon {
    font-size: 1rem;
}

/* Responsive pack intro */
@media (max-width: 768px) {
    .pack-intro {
        padding: 25px 20px;
    }

    /* Taille du titre gérée dans la section hiérarchie mobile (1.6rem) */

    .pack-intro-grid {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    /* En mobile, on utilise display:contents pour permettre le réordonnancement */
    .pack-intro-col-left,
    .pack-intro-col-right {
        display: contents;
    }

    /* Ordre mobile : 1. Trois forfaits, 2. Carte tarif, 3. Inspiration, 4. Deux semaines */
    .pack-intro-item.item-forfaits { order: 1; }
    .pack-intro-col-right .ludo-formule-card { order: 2; }
    .pack-intro-item.item-inspiration { order: 3; }
    .pack-intro-item.item-deux-semaines { order: 4; }

    .pack-intro-item {
        padding: 15px;
    }

    .pack-intro-horaires .horaires-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}

/* -------------------------------------------------------------------------
   11.3 Contact Modal Popup
   ------------------------------------------------------------------------- */
.contact-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 99999;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.contact-modal-overlay.active {
    display: flex;
}

.contact-modal {
    background: #fff;
    border-radius: 24px;
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.contact-modal-header {
    background: linear-gradient(135deg, var(--ludo-primary, #E8842A), var(--ludo-accent, #C41E68));
    color: #fff;
    padding: 20px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 24px 24px 0 0;
}

.contact-modal-header h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
}

.contact-modal-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    line-height: 1;
}

.contact-modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.contact-modal-body {
    padding: 25px;
}

/* Responsive modal */
@media (max-width: 768px) {
    .contact-modal {
        max-width: 100%;
        margin: 10px;
        max-height: 85vh;
    }

    .contact-modal-header {
        padding: 15px 20px;
    }

    .contact-modal-body {
        padding: 20px;
    }
}

/* =========================================================================
   12. FRITIME PICCOLO PAGE
   ========================================================================= */

/* -------------------------------------------------------------------------
   12.1 Header Section Piccolo (réutilise .ludo-page-header existant)
   ------------------------------------------------------------------------- */

/* Badge spécifique Piccolo (gratuit + âge) */
.ludo-piccolo-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.25);
    color: #22c55e;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.ludo-piccolo-badge .badge-dot {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

/* -------------------------------------------------------------------------
   12.2 Stats Section Piccolo (réutilise .ludo-stats-grid existant)
   ------------------------------------------------------------------------- */
.ludo-piccolo-stats {
    background: linear-gradient(180deg, #FFF9F5 0%, #FFFFFF 100%) !important;
    padding: 60px 0 !important;
}

/* -------------------------------------------------------------------------
   12.3 Galerie Photos Piccolo (NOUVEAU)
   ------------------------------------------------------------------------- */
.ludo-piccolo-gallery {
    background: #FFFFFF !important;
    padding: 40px 0 80px !important;
}

.ludo-gallery-header {
    text-align: center;
    margin-bottom: 50px;
}

.ludo-gallery-title h2,
.ludo-gallery-title .et_pb_text_inner {
    font-size: clamp(2rem, 4vw, 3rem) !important;
    font-weight: 800 !important;
    letter-spacing: -1.5px !important;
    color: #1A1A1A !important;
    margin: 0 0 15px 0 !important;
}

.ludo-gallery-title span {
    background: linear-gradient(135deg, #E8842A, #C41E68);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ludo-gallery-subtitle {
    font-size: 1.1rem;
    color: #6B7280;
    max-width: 500px;
    margin: 0 auto;
}

/* Grille de galerie */
.ludo-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.ludo-gallery-item {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 4/3;
    cursor: pointer;
    transition: all 0.4s ease;
}

.ludo-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.ludo-gallery-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.ludo-gallery-item::after {
    content: '🔍';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-size: 2rem;
    z-index: 2;
    transition: transform 0.3s ease;
}

.ludo-gallery-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.ludo-gallery-item:hover img {
    transform: scale(1.1);
}

.ludo-gallery-item:hover::before {
    opacity: 1;
}

.ludo-gallery-item:hover::after {
    transform: translate(-50%, -50%) scale(1);
}

/* Item large (span 2 colonnes) */
.ludo-gallery-item.large {
    grid-column: span 2;
    aspect-ratio: 16/9;
}

/* Item vertical (span 2 lignes) */
.ludo-gallery-item.tall {
    grid-row: span 2;
    aspect-ratio: 3/4;
}

/* Légende photo */
.ludo-gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    color: #FFFFFF;
    font-weight: 600;
    z-index: 2;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.ludo-gallery-item:hover .ludo-gallery-caption {
    transform: translateY(0);
}

/* -------------------------------------------------------------------------
   12.4 Section Infos Piccolo (réutilise .ludo-rule-card existant)
   ------------------------------------------------------------------------- */
.ludo-piccolo-infos {
    background: linear-gradient(180deg, #FFF9F5 0%, #FFFFFF 100%) !important;
    padding: 80px 0 !important;
}

.ludo-piccolo-infos-header {
    text-align: center;
    margin-bottom: 50px;
}

.ludo-piccolo-infos-title h2 {
    font-size: clamp(2rem, 4vw, 3rem) !important;
    font-weight: 800 !important;
    letter-spacing: -1.5px !important;
    color: #1A1A1A !important;
    margin: 0 0 15px 0 !important;
}

.ludo-piccolo-infos-title span {
    background: linear-gradient(135deg, #E8842A, #C41E68);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* -------------------------------------------------------------------------
   12.5 Section Programme + Inscription (2 colonnes)
   ------------------------------------------------------------------------- */
.ludo-piccolo-program {
    background: #FFFFFF !important;
    padding: 80px 0 !important;
}

.ludo-piccolo-program-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    align-items: start;
}

/* Colonne Programme PDF */
.ludo-piccolo-program-left {
    text-align: center;
}

.ludo-program-card {
    background: linear-gradient(135deg, rgba(232, 132, 42, 0.06) 0%, rgba(196, 30, 104, 0.04) 100%);
    border-radius: 24px;
    padding: 40px;
    border: 1px solid rgba(0,0,0,0.06);
}

.ludo-program-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1A1A1A;
    margin: 0 0 20px 0;
}

.ludo-program-image {
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.ludo-program-image:hover {
    transform: scale(1.02);
}

.ludo-program-image img {
    width: 100%;
    height: auto;
    display: block;
}

.ludo-program-card .ludo-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #E8842A 0%, #C41E68 100%);
    color: #FFFFFF;
    padding: 14px 28px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.ludo-program-card .ludo-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(232, 132, 42, 0.3);
}

.ludo-program-card .ludo-btn-primary svg {
    width: 20px;
    height: 20px;
}

/* Colonne Inscription */
.ludo-piccolo-program-right {
    background: var(--light-card, #FFFFFF);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

.ludo-piccolo-program-right h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1A1A1A;
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ludo-piccolo-program-right h3 .icon {
    font-size: 1.8rem;
}

.ludo-piccolo-program-right > p {
    color: #6B7280;
    margin: 0 0 25px 0;
}

/* -------------------------------------------------------------------------
   12.6 Responsive Fritime Piccolo
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .ludo-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ludo-gallery-item.large {
        grid-column: span 2;
    }

    .ludo-gallery-item.tall {
        grid-row: span 1;
        aspect-ratio: 4/3;
    }

    .ludo-piccolo-program-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .ludo-gallery-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .ludo-gallery-item.large,
    .ludo-gallery-item.tall {
        grid-column: span 1;
        grid-row: span 1;
        aspect-ratio: 4/3;
    }

    .ludo-gallery-title h2,
    .ludo-piccolo-infos-title h2 {
        font-size: 1.8rem !important;
    }

    .ludo-program-card,
    .ludo-piccolo-program-right {
        padding: 25px;
    }

    .ludo-piccolo-stats,
    .ludo-piccolo-gallery,
    .ludo-piccolo-infos,
    .ludo-piccolo-program {
        padding: 50px 0 !important;
    }
}

/* =========================================================================
   13. FORMULAIRE CONTACT DIVI - STYLES MODÈLE
   ========================================================================= */

/* Titre du formulaire */
#et_pb_contact_form_0 .et_pb_contact_main_title,
#et_pb_contact_form_0 h1 {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, #E8842A, #C41E68);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 30px !important;
}

/* Bouton pleine largeur */
#et_pb_contact_form_0 .et_pb_contact_submit,
#et_pb_contact_form_0 .et_pb_button {
    background: #E36C1D !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 16px 40px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    width: 100% !important;
    box-shadow: 0 8px 25px rgba(227, 108, 29, 0.25) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

#et_pb_contact_form_0 .et_pb_contact_submit:hover,
#et_pb_contact_form_0 .et_pb_button:hover {
    background: #F5820A !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 35px rgba(227, 108, 29, 0.35) !important;
}

/* Menu déroulant (select) */
#et_pb_contact_form_0 select {
    background: #FAFAFA !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 12px !important;
    padding: 14px 18px !important;
    font-size: 14px !important;
    color: #1A1A2E !important;
    width: 100% !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center !important;
    cursor: pointer !important;
}

#et_pb_contact_form_0 select:focus {
    border-color: #E36C1D !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(227, 108, 29, 0.1) !important;
    background-color: #FFFFFF !important;
}

/* =========================================================================
   14. STAT CARDS FUN AVEC IMAGES - GRILLE 2x2
   ========================================================================= */

.ludo-stats-fun {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 20px 0;
}

.ludo-stat-fun {
    background: #FFFFFF;
    border-radius: 24px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
}

.ludo-stat-fun:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(232, 132, 42, 0.12);
}

/* Layout vertical (cases 1 et 4) - image en haut, texte en bas */
.ludo-stat-fun.vertical {
    display: flex;
    flex-direction: column;
}

.ludo-stat-fun.vertical .ludo-stat-fun-img {
    width: 100%;
    height: 140px;
    overflow: hidden;
    position: relative;
}

.ludo-stat-fun.vertical .ludo-stat-fun-img::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}

.ludo-stat-fun.vertical .ludo-stat-fun-content {
    padding: 20px 20px 25px;
    text-align: center;
    margin-top: -20px;
    position: relative;
}

/* Layout horizontal (cases 2 et 3) - image à gauche, texte à droite */
.ludo-stat-fun.horizontal {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

.ludo-stat-fun.horizontal .ludo-stat-fun-img {
    width: 45%;
    min-width: 140px;
    height: auto;
    min-height: 160px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.ludo-stat-fun.horizontal .ludo-stat-fun-img::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50%;
    background: linear-gradient(to left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}

.ludo-stat-fun.horizontal .ludo-stat-fun-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    flex: 1;
}

/* Styles communs images */
.ludo-stat-fun-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.ludo-stat-fun:hover .ludo-stat-fun-img img {
    transform: scale(1.08);
}

/* Badge */
.ludo-stat-fun-badge {
    display: inline-block;
    background: linear-gradient(135deg, #E8842A, #C41E68);
    color: #FFFFFF;
    font-size: 1.4rem;
    font-weight: 800;
    padding: 8px 18px;
    border-radius: 50px;
    margin-bottom: 10px;
    box-shadow: 0 4px 15px rgba(232, 132, 42, 0.3);
}

.ludo-stat-fun.horizontal .ludo-stat-fun-badge {
    align-self: flex-start;
}

.ludo-stat-fun-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1A1A2E;
    margin: 0 0 5px 0;
}

.ludo-stat-fun-label {
    font-size: 0.85rem;
    color: #6B7280;
    margin: 0;
}

/* Badge avec image logo */
.ludo-stat-fun-badge.badge-logo {
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin-bottom: 8px;
}

.ludo-stat-fun-badge.badge-logo img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border-radius: 12px;
}

.ludo-stat-fun.horizontal .ludo-stat-fun-badge.badge-logo img {
    width: 50px;
    height: 50px;
}

/* Variantes de couleurs pour les badges (sauf badge-logo) */
.ludo-stat-fun:nth-child(2) .ludo-stat-fun-badge:not(.badge-logo) {
    background: linear-gradient(135deg, #C41E68, #9333EA);
}

.ludo-stat-fun:nth-child(3) .ludo-stat-fun-badge:not(.badge-logo) {
    background: linear-gradient(135deg, #059669, #10B981);
}

.ludo-stat-fun:nth-child(4) .ludo-stat-fun-badge:not(.badge-logo) {
    background: linear-gradient(135deg, #2563EB, #7C3AED);
}

/* Responsive stat cards fun */
@media (max-width: 768px) {
    .ludo-stats-fun {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .ludo-stat-fun.horizontal {
        flex-direction: column;
    }

    .ludo-stat-fun.horizontal .ludo-stat-fun-img {
        width: 100%;
        height: 120px;
        min-height: auto;
    }

    .ludo-stat-fun.horizontal .ludo-stat-fun-img::after {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 50%;
        background: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    }

    .ludo-stat-fun.horizontal .ludo-stat-fun-content {
        text-align: center;
        margin-top: -20px;
    }

    .ludo-stat-fun.horizontal .ludo-stat-fun-badge {
        align-self: center;
    }

    .ludo-stat-fun-badge {
        font-size: 1.2rem;
        padding: 6px 16px;
    }
}

/* =========================================================================
   15. PAGE QUI SOMMES-NOUS
   ========================================================================= */

/* Hero Section */
.ludo-about-hero {
    background: linear-gradient(135deg, #FFF9F5 0%, #FFF5F8 50%, #F5F3FF 100%);
    padding: 80px 0;
    text-align: center;
}

.ludo-about-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(232, 132, 42, 0.1);
    color: #E8842A;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.ludo-about-hero h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    color: #1A1A2E;
    margin: 0 0 20px 0;
    line-height: 1.1;
}

.ludo-about-hero h1 span {
    background: linear-gradient(135deg, #E8842A, #C41E68);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ludo-about-hero-subtitle {
    font-size: 1.2rem;
    color: #6B7280;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Section Histoire */
.ludo-about-histoire {
    padding: 80px 0;
    background: #FFFFFF;
}

.ludo-about-histoire-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.ludo-about-histoire-content h2 {
    font-size: 2rem;
    font-weight: 800;
    color: #1A1A2E;
    margin: 0 0 10px 0;
}

.ludo-about-histoire-content h2 span {
    background: linear-gradient(135deg, #E8842A, #C41E68);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ludo-about-histoire-year {
    display: inline-block;
    background: linear-gradient(135deg, #E8842A, #C41E68);
    color: #FFFFFF;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 50px;
    margin-bottom: 20px;
}

.ludo-about-histoire-content p {
    font-size: 1rem;
    color: #4B5563;
    line-height: 1.8;
    margin: 0 0 15px 0;
}

.ludo-about-histoire-img {
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}

.ludo-about-histoire-img img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 24px;
}

/* Section Espaces */
.ludo-about-espaces {
    padding: 80px 0;
    background: #FAFAFA;
}

.ludo-about-section-title {
    text-align: center;
    margin-bottom: 50px;
}

.ludo-about-section-title h2 {
    font-size: 2.2rem;
    font-weight: 800;
    color: #1A1A2E;
    margin: 0 0 15px 0;
}

.ludo-about-section-title h2 span {
    background: linear-gradient(135deg, #E8842A, #C41E68);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ludo-about-section-title p {
    font-size: 1.1rem;
    color: #6B7280;
    max-width: 500px;
    margin: 0 auto;
}

.ludo-about-espaces-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.ludo-about-espace-card {
    background: #FFFFFF;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: all 0.4s ease;
}

.ludo-about-espace-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(232, 132, 42, 0.12);
}

.ludo-about-espace-img {
    height: 200px;
    overflow: hidden;
}

.ludo-about-espace-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.ludo-about-espace-card:hover .ludo-about-espace-img img {
    transform: scale(1.08);
}

.ludo-about-espace-content {
    padding: 25px;
}

.ludo-about-espace-content h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1A1A2E;
    margin: 0 0 10px 0;
}

.ludo-about-espace-content p {
    font-size: 0.95rem;
    color: #6B7280;
    line-height: 1.6;
    margin: 0;
}

/* Section Jouer c'est */
.ludo-about-jouer {
    padding: 50px 0;
    background: linear-gradient(135deg, #E8842A, #C41E68);
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    margin: 0 20px;
}

.ludo-about-jouer::before {
    content: '🎲';
    position: absolute;
    font-size: 200px;
    opacity: 0.1;
    top: -30px;
    right: -30px;
}

.ludo-about-jouer-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

.ludo-about-jouer h2 {
    font-size: 2.5rem;
    font-weight: 800;
    color: #FFFFFF;
    margin: 0 0 30px 0;
}

.ludo-about-jouer-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ludo-about-jouer-item {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 20px 30px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all 0.3s ease;
}

.ludo-about-jouer-item:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateX(10px);
}

.ludo-about-jouer-item-icon {
    font-size: 2rem;
}

.ludo-about-jouer-item p {
    font-size: 1.1rem;
    color: #FFFFFF;
    margin: 0;
    text-align: left;
}

/* Section Équipe */
.ludo-about-equipe {
    padding: 80px 0;
    background: #FFFFFF;
}

.ludo-about-equipe-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    padding: 0 20px;
}

.ludo-about-equipe-content p {
    font-size: 1.1rem;
    color: #4B5563;
    line-height: 1.8;
    margin: 0 0 30px 0;
}

.ludo-about-equipe-avatars {
    display: flex;
    justify-content: center;
}

.ludo-about-equipe-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #E8842A, #C41E68);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    border: 3px solid #FFFFFF;
    margin-left: -15px;
}

.ludo-about-equipe-avatar:first-child {
    margin-left: 0;
}

/* Section CTA */
.ludo-about-cta {
    padding: 80px 0;
    background: #FAFAFA;
}

.ludo-about-cta-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

.ludo-about-cta-card {
    background: #FFFFFF;
    border-radius: 24px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: all 0.4s ease;
}

.ludo-about-cta-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.ludo-about-cta-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, rgba(232, 132, 42, 0.1), rgba(196, 30, 104, 0.1));
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto 20px;
}

.ludo-about-cta-card h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1A1A2E;
    margin: 0 0 10px 0;
}

.ludo-about-cta-card p {
    font-size: 0.95rem;
    color: #6B7280;
    margin: 0 0 25px 0;
    line-height: 1.6;
}

.ludo-about-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #E8842A, #C41E68);
    color: #FFFFFF;
    padding: 14px 28px;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.ludo-about-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(232, 132, 42, 0.3);
    color: #FFFFFF;
}

.ludo-about-cta-btn.secondary {
    background: #FFFFFF;
    color: #E8842A;
    border: 2px solid #E8842A;
}

.ludo-about-cta-btn.secondary:hover {
    background: #E8842A;
    color: #FFFFFF;
}

/* Responsive Page About */
@media (max-width: 992px) {
    .ludo-about-histoire-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .ludo-about-histoire-img {
        order: -1;
    }

    .ludo-about-espaces-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .ludo-about-hero {
        padding: 60px 20px 40px;
    }

    .ludo-about-hero h1 {
        font-size: 2rem;
    }

    .ludo-about-espaces-grid {
        grid-template-columns: 1fr;
    }

    .ludo-about-jouer h2 {
        font-size: 1.8rem;
    }

    .ludo-about-jouer-item {
        flex-direction: column;
        text-align: center;
    }

    .ludo-about-jouer-item p {
        text-align: center;
    }

    .ludo-about-cta-grid {
        grid-template-columns: 1fr;
    }

    .ludo-about-section-title h2 {
        font-size: 1.8rem;
    }
}

/* -------------------------------------------------------------------------
   LA LUDO DONNE - Card featured inversée (image à droite)
   ------------------------------------------------------------------------- */

/* Magenta - La Ludo donne */
.ludo-service-card.card-magenta .service-visual {
    background: linear-gradient(145deg, #FF80AB 0%, #e5007d 100%) !important;
}

.ludo-service-card.card-magenta .service-badge {
    color: #e5007d !important;
}

.ludo-service-card.card-magenta .ludo-service-link {
    color: #e5007d !important;
}

/* Card Featured Reverse - image à droite au lieu de gauche */
.ludo-service-card.card-featured-reverse {
    flex-direction: row-reverse !important;
    align-items: stretch !important;
}

.ludo-service-card.card-featured-reverse .service-visual {
    width: 33.333% !important;
    height: auto !important;
    min-height: 160px !important;
    border-radius: 0 16px 16px 0 !important;
    flex-shrink: 0 !important;
}

.ludo-service-card.card-featured-reverse .service-visual img {
    height: 75px !important;
}

.ludo-service-card.card-featured-reverse .service-content {
    width: 66.666% !important;
    padding: 24px 28px !important;
    justify-content: center !important;
}

.ludo-service-card.card-featured-reverse h3 {
    font-size: 1.25rem !important;
    margin-bottom: 10px !important;
}

.ludo-service-card.card-featured-reverse p {
    font-size: 0.88rem !important;
}

.ludo-service-card.card-featured-reverse .service-badge {
    top: 12px !important;
    right: 12px !important;
    left: auto !important;
}

/* Bouton dans la zone visuelle - positionné en bas */
.ludo-service-card.card-featured-reverse .service-visual {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 20px !important;
}

.ludo-service-card.card-featured-reverse .service-visual img {
    height: 120px !important;
    max-height: 120px !important;
    flex: 1 !important;
    object-fit: contain !important;
}

.ludo-service-card.card-featured-reverse .service-visual .ludo-btn-sm {
    background: white !important;
    color: #e5007d !important;
    padding: 8px 20px !important;
    border-radius: 20px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.3s !important;
    z-index: 2 !important;
    margin-top: auto !important;
    margin-bottom: 10px !important;
}

.ludo-service-card.card-featured-reverse .service-visual .ludo-btn-sm:hover {
    background: #f0f0f0 !important;
    transform: translateY(-2px) !important;
}

/* ==========================================================================
   Formulaire Bon Cadeau
   ========================================================================== */

.gift-card-form-container {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 20px;
}

.gift-card-errors {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 12px;
    padding: 15px 20px;
    margin-bottom: 25px;
}

.gift-card-errors ul {
    margin: 0;
    padding-left: 20px;
    color: #dc2626;
}

.gift-card-form {
    background: transparent;
}

.gift-card-section {
    background: white;
    border-radius: 16px;
    padding: 25px 30px;
    margin-bottom: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.gift-card-section h3 {
    margin: 0 0 20px 0;
    font-size: 1.15em;
    font-weight: 700;
    color: #1f2937;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--ludo-primary, #e36c1d);
}

.gift-card-field {
    margin-bottom: 20px;
}

.gift-card-field:last-child {
    margin-bottom: 0;
}

.gift-card-field label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #374151;
    font-size: 0.95em;
}

.gift-card-field label .required {
    color: var(--ludo-primary, #e36c1d);
}

.gift-card-field input[type="text"],
.gift-card-field input[type="email"],
.gift-card-field input[type="tel"],
.gift-card-field textarea {
    width: 100%;
    padding: 14px 18px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 16px;
    font-family: inherit;
    transition: all 0.3s ease;
    background: #fafafa;
    box-sizing: border-box;
}

.gift-card-field input:focus,
.gift-card-field textarea:focus {
    border-color: var(--ludo-primary, #e36c1d);
    outline: none;
    background: white;
    box-shadow: 0 0 0 4px rgba(227, 108, 29, 0.1);
}

.gift-card-field textarea {
    resize: vertical;
    min-height: 100px;
}

/* Sélection des montants */
.gift-card-amounts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

@media (max-width: 500px) {
    .gift-card-amounts {
        grid-template-columns: repeat(2, 1fr);
    }
}

.amount-option {
    cursor: pointer;
}

.amount-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.amount-box {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 12px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1.1em;
    color: #374151;
    background: #fafafa;
    transition: all 0.3s ease;
}

.amount-option input[type="radio"]:checked + .amount-box {
    border-color: var(--ludo-primary, #e36c1d);
    background: linear-gradient(135deg, rgba(227, 108, 29, 0.08), rgba(227, 108, 29, 0.15));
    color: var(--ludo-primary, #e36c1d);
    box-shadow: 0 0 0 4px rgba(227, 108, 29, 0.1);
}

.amount-option:hover .amount-box {
    border-color: #d1d5db;
    background: white;
}

/* Info box */
.gift-card-info {
    background: linear-gradient(135deg, rgba(227, 108, 29, 0.06), rgba(245, 158, 11, 0.08));
    border: 1px solid rgba(227, 108, 29, 0.2);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 25px;
}

.gift-card-info p {
    margin: 0;
    color: #374151;
    font-size: 0.95em;
    line-height: 1.6;
}

.gift-card-info p:first-child {
    margin-bottom: 8px;
}

.gift-card-info strong {
    color: var(--ludo-primary, #e36c1d);
}

/* Bouton submit */
.gift-card-submit {
    text-align: center;
}

.gift-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 40px;
    background: var(--ludo-primary, #e36c1d);
    color: white !important;
    border: none;
    border-radius: 50px;
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(227, 108, 29, 0.3);
}

.gift-card-btn:hover {
    background: var(--ludo-primary-light, #f59a4a);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(227, 108, 29, 0.4);
}

/* Page confirmation */
.gift-card-confirmation {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    padding: 40px 30px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.08);
}

.gift-card-confirmation-icon {
    margin-bottom: 25px;
}

.gift-card-confirmation h2 {
    margin: 0 0 20px 0;
    color: #1f2937;
    font-size: 1.6em;
}

.gift-card-confirmation p {
    color: #4b5563;
    margin-bottom: 15px;
    line-height: 1.6;
}

.gift-card-confirmation-actions {
    margin-top: 30px;
}

.gift-card-btn-secondary {
    background: #6b7280 !important;
    box-shadow: 0 4px 15px rgba(107, 114, 128, 0.3);
}

.gift-card-btn-secondary:hover {
    background: #4b5563 !important;
    box-shadow: 0 8px 25px rgba(107, 114, 128, 0.4);
}

/* Responsive */
@media (max-width: 600px) {
    .gift-card-section {
        padding: 20px;
    }

    .gift-card-field input,
    .gift-card-field textarea {
        padding: 12px 15px;
    }

    .gift-card-btn {
        width: 100%;
        padding: 14px 30px;
    }

    .gift-card-confirmation {
        padding: 30px 20px;
    }
}

/* ===========================================
   WELCOME BANNER - Page d'accueil
   =========================================== */
.ludo-welcome-banner {
    display: flex;
    align-items: stretch;
    gap: 30px;
    background: linear-gradient(135deg, rgba(232, 132, 42, 0.08) 0%, rgba(196, 30, 104, 0.06) 100%);
    border: 1px solid rgba(232, 132, 42, 0.2);
    border-radius: 24px;
    padding: 30px;
    margin: 30px 0;
    overflow: hidden;
}

.ludo-welcome-banner .welcome-image {
    flex-shrink: 0;
    width: 280px;
    border-radius: 16px;
    overflow: hidden;
}

.ludo-welcome-banner .welcome-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}

.ludo-welcome-banner .welcome-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ludo-welcome-banner h3 {
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    color: var(--ludo-text-dark, #1A1A1A) !important;
    margin: 0 0 15px 0 !important;
    line-height: 1.4;
}

.ludo-welcome-banner p {
    margin: 0 0 12px 0 !important;
    font-size: 1rem;
    color: var(--ludo-text, #6B6B6B);
    line-height: 1.7;
}

.ludo-welcome-banner p:last-child {
    margin-bottom: 0 !important;
}

.ludo-welcome-banner strong {
    color: var(--ludo-primary, #E8842A);
    font-weight: 700;
}

.ludo-welcome-banner a {
    color: var(--ludo-primary, #E8842A);
    text-decoration: underline;
    font-weight: 600;
}

.ludo-welcome-banner a:hover {
    color: var(--ludo-secondary, #C41E68);
}

.ludo-welcome-banner .welcome-thanks {
    font-weight: 600;
    color: var(--ludo-text-dark, #1A1A1A);
    font-size: 1.05rem;
    margin-top: 5px !important;
}

/* Responsive */
@media (max-width: 768px) {
    .ludo-welcome-banner {
        flex-direction: column;
        padding: 25px 20px;
        gap: 20px;
    }

    .ludo-welcome-banner .welcome-image {
        width: 100%;
        max-height: 200px;
    }

    .ludo-welcome-banner h3 {
        font-size: 1.2rem !important;
        text-align: center;
    }

    .ludo-welcome-banner p {
        font-size: 0.95rem;
    }
}

/* ===========================================
   FIX: Empêcher le scroll automatique sur focus des filtres
   =========================================== */
#wpludo_main,
#catalog-filters,
.catalog-filters-modern,
.filter-group,
.filter-group select,
.filter-group input,
.datepicker,
.date-picker-wrapper {
    scroll-margin-top: 200px;
}

/* Empêcher le scroll sur focus des selects et inputs du catalogue */
#form_recherche select:focus,
#form_recherche input:focus {
    scroll-margin-top: 200px;
}

/* ===========================================
   FIX: Bouton retour en haut - remplacer le lien cassé
   =========================================== */
/* Cacher le bouton Divi cassé qui pointe vers site-partenaire3.fr */
a[href*="site-partenaire3"],
.et_pb_scroll_top[href*="site-partenaire3"] {
    display: none !important;
}

/* Style pour notre propre bouton retour en haut */
.ludo-back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: var(--ludo-primary, #E8842A);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 9999;
    box-shadow: 0 4px 15px rgba(232, 132, 42, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ludo-back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.ludo-back-to-top:hover {
    background: var(--ludo-secondary, #C41E68);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(196, 30, 104, 0.4);
}

.ludo-back-to-top svg {
    width: 24px;
    height: 24px;
}

/* ==========================================================================
   Bouton Espace Collaborateurs (Intranet) - Footer
   ========================================================================== */

.ludo-intranet-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 25px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

.ludo-intranet-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    color: #ffffff;
    text-decoration: none;
}

.ludo-intranet-btn svg {
    width: 16px;
    height: 16px;
    opacity: 0.8;
}

.ludo-intranet-btn:hover svg {
    opacity: 1;
}

/* Version claire (pour footer clair si besoin) */
.ludo-intranet-btn.light {
    border-color: rgba(0, 0, 0, 0.2);
    color: rgba(0, 0, 0, 0.6);
}

.ludo-intranet-btn.light:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.3);
    color: #1a1a2e;
}

/* ==========================================================================
   Ultimate Member - Personnalisation Design Ludothèque
   ========================================================================== */

/* Container formulaire */
.um-form {
    background: #ffffff !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.08) !important;
    padding: 40px !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
}

/* Header du formulaire */
.um-form .um-form-title {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    color: #1A1A2E !important;
    text-align: center !important;
    margin-bottom: 30px !important;
}

/* Labels */
.um-form label,
.um .um-field-label {
    font-weight: 600 !important;
    color: #1A1A2E !important;
    font-size: 0.95rem !important;
    margin-bottom: 8px !important;
}

/* Champs de saisie */
.um-form input[type="text"],
.um-form input[type="email"],
.um-form input[type="password"],
.um-form input[type="tel"],
.um-form textarea,
.um-form select,
.um .um-field-area input,
.um .um-field-area textarea {
    border: 2px solid #E5E7EB !important;
    border-radius: 12px !important;
    padding: 14px 18px !important;
    font-size: 16px !important;
    background: #fafafa !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.um-form input:focus,
.um-form textarea:focus,
.um .um-field-area input:focus,
.um .um-field-area textarea:focus {
    border-color: #E8842A !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(232, 132, 42, 0.1) !important;
    outline: none !important;
}

/* Placeholder */
.um-form input::placeholder,
.um-form textarea::placeholder {
    color: #9CA3AF !important;
}

/* Bouton principal */
.um-form input[type="submit"],
.um-form button[type="submit"],
.um input.um-button,
.um a.um-button,
.um .um-button {
    background: linear-gradient(135deg, #E8842A 0%, #F5820A 100%) !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 16px 40px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: 0 4px 15px rgba(232, 132, 42, 0.3) !important;
    width: 100% !important;
    margin-top: 10px !important;
}

.um-form input[type="submit"]:hover,
.um-form button[type="submit"]:hover,
.um input.um-button:hover,
.um a.um-button:hover,
.um .um-button:hover {
    background: linear-gradient(135deg, #d4751f 0%, #E8842A 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(232, 132, 42, 0.4) !important;
}

/* Liens */
.um-form a,
.um a.um-link-alt {
    color: #E8842A !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: color 0.2s ease !important;
}

.um-form a:hover,
.um a.um-link-alt:hover {
    color: #C41E68 !important;
    text-decoration: underline !important;
}

/* Checkbox "Se souvenir de moi" */
.um-form .um-field-checkbox label,
.um .um-field-checkbox-option {
    font-weight: 400 !important;
    color: #4B5563 !important;
    font-size: 0.9rem !important;
}

.um-form input[type="checkbox"] {
    accent-color: #E8842A !important;
    width: 18px !important;
    height: 18px !important;
}

/* Messages d'erreur */
.um-form .um-field-error,
.um .um-error-message,
.um .um-notice.err {
    background: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    color: #ef4444 !important;
    font-size: 0.9rem !important;
    margin-top: 8px !important;
}

/* Messages de succès */
.um .um-notice.success {
    background: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    color: #22c55e !important;
}

/* Icônes dans les champs */
.um .um-field-icon i {
    color: #E8842A !important;
}

/* Séparateurs */
.um-form .um-col-alt {
    text-align: center !important;
    margin-top: 25px !important;
    padding-top: 25px !important;
    border-top: 1px solid #E5E7EB !important;
}

.um-form .um-col-alt-b {
    color: #6B7280 !important;
    font-size: 0.9rem !important;
}

/* Page profil - header */
.um-profile .um-profile-headericon a {
    background: #E8842A !important;
}

.um-profile .um-profile-nav-item.active a {
    border-bottom-color: #E8842A !important;
    color: #E8842A !important;
}

/* Avatar */
.um .um-profile-photo img,
.um .um-avatar img {
    border: 3px solid #E8842A !important;
    border-radius: 50% !important;
}

/* Page de connexion - centrer */
.um-login {
    max-width: 450px !important;
    margin: 0 auto !important;
}

/* Mot de passe oublié */
.um-form .um-forgot-pass-link {
    text-align: right !important;
    margin-top: -5px !important;
    margin-bottom: 15px !important;
}

.um-form .um-forgot-pass-link a {
    font-size: 0.85rem !important;
    color: #6B7280 !important;
}

.um-form .um-forgot-pass-link a:hover {
    color: #E8842A !important;
}

/* Responsive */
@media (max-width: 768px) {
    .um-form {
        padding: 25px 20px !important;
        border-radius: 16px !important;
    }

    .um-form .um-form-title {
        font-size: 1.5rem !important;
    }

    .um-form input[type="submit"],
    .um input.um-button {
        padding: 14px 30px !important;
    }
}

/* ==========================================================================
   MODULE BLOG DIVI - GRILLE (classe: ludo-blog-grid)
   Ajouter cette classe au module Blog Divi en mode Grille
   ========================================================================== */

.ludo-blog-grid .et_pb_post {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    padding: 0;
}

.ludo-blog-grid .et_pb_post:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
}

/* Image */
.ludo-blog-grid .et_pb_post .entry-featured-image-url {
    display: block;
    overflow: hidden;
}

.ludo-blog-grid .et_pb_post .entry-featured-image-url img {
    width: 100%;
    height: auto;
    transition: transform 0.4s ease;
}

.ludo-blog-grid .et_pb_post:hover .entry-featured-image-url img {
    transform: scale(1.05);
}

/* Titre */
.ludo-blog-grid .et_pb_post .entry-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1A1A2E;
    margin: 0 0 10px 0;
    padding: 20px 20px 0 20px;
    line-height: 1.4;
}

.ludo-blog-grid .et_pb_post .entry-title a {
    color: inherit;
    text-decoration: none;
}

.ludo-blog-grid .et_pb_post:hover .entry-title a {
    color: #E8842A;
}

/* Meta (date, catégorie) */
.ludo-blog-grid .et_pb_post .post-meta {
    padding: 0 20px;
    margin-bottom: 10px;
    font-size: 0.85rem;
    color: #9CA3AF;
}

.ludo-blog-grid .et_pb_post .post-meta a {
    color: #E8842A;
    text-decoration: none;
}

/* Extrait */
.ludo-blog-grid .et_pb_post .post-content {
    padding: 0 20px 15px 20px;
}

.ludo-blog-grid .et_pb_post .post-content p {
    font-size: 0.95rem;
    color: #6B7280;
    line-height: 1.6;
    margin: 0;
}

/* Lien Lire plus */
.ludo-blog-grid .et_pb_post .more-link {
    display: inline-block;
    color: #E8842A;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    padding: 0 20px 20px 20px;
}

.ludo-blog-grid .et_pb_post .more-link:hover {
    color: #C41E68;
}

/* Responsive grille */
@media (max-width: 768px) {
    .ludo-blog-grid .et_pb_post .entry-title {
        font-size: 1.1rem;
        padding: 15px 15px 0 15px;
    }

    .ludo-blog-grid .et_pb_post .post-meta,
    .ludo-blog-grid .et_pb_post .post-content,
    .ludo-blog-grid .et_pb_post .more-link {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* ==========================================================================
   MODULE BLOG DIVI - PLEINE LARGEUR (classe: ludo-blog-fullwidth)
   Ajouter cette classe au module Blog Divi en mode Pleine largeur
   ========================================================================== */

.ludo-blog-fullwidth .et_pb_post {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.05);
    padding: 30px;
    margin-bottom: 25px;
    transition: all 0.3s ease;
}

.ludo-blog-fullwidth .et_pb_post:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

/* Titre */
.ludo-blog-fullwidth .et_pb_post .entry-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1A1A2E;
    margin: 0 0 12px 0;
    line-height: 1.3;
}

.ludo-blog-fullwidth .et_pb_post .entry-title a {
    color: inherit;
    text-decoration: none;
}

.ludo-blog-fullwidth .et_pb_post:hover .entry-title a {
    color: #E8842A;
}

/* Meta (date, catégorie) */
.ludo-blog-fullwidth .et_pb_post .post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    font-size: 0.9rem;
    color: #9CA3AF;
}

.ludo-blog-fullwidth .et_pb_post .post-meta a {
    color: #E8842A;
    text-decoration: none;
}

/* Extrait */
.ludo-blog-fullwidth .et_pb_post .post-content {
    margin-bottom: 15px;
}

.ludo-blog-fullwidth .et_pb_post .post-content p {
    font-size: 1rem;
    color: #6B7280;
    line-height: 1.7;
    margin: 0;
}

/* Image */
.ludo-blog-fullwidth .et_pb_post .entry-featured-image-url {
    display: block;
    margin-bottom: 20px;
    border-radius: 12px;
    overflow: hidden;
}

.ludo-blog-fullwidth .et_pb_post .entry-featured-image-url img {
    width: 100%;
    height: auto;
    transition: transform 0.4s ease;
}

.ludo-blog-fullwidth .et_pb_post:hover .entry-featured-image-url img {
    transform: scale(1.02);
}

/* Lien Lire plus */
.ludo-blog-fullwidth .et_pb_post .more-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #E8842A;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
}

.ludo-blog-fullwidth .et_pb_post .more-link:hover {
    color: #C41E68;
}

/* Responsive pleine largeur */
@media (max-width: 768px) {
    .ludo-blog-fullwidth .et_pb_post {
        padding: 20px;
    }

    .ludo-blog-fullwidth .et_pb_post .entry-title {
        font-size: 1.2rem;
    }
}

/* ==========================================================================
   PAGES ARCHIVES / CATÉGORIES
   Style automatique pour les pages WordPress category et archive
   ========================================================================== */

/* Container principal */
.archive #main-content,
.category #main-content {
    background: var(--ludo-bg, #FFF9F5);
    padding: 40px 0;
}

/* Titre de la page */
.archive h1.page-title,
.category h1.page-title {
    font-size: 2rem;
    font-weight: 800;
    color: #1A1A2E;
    margin-bottom: 30px;
    text-align: center;
}

/* Container articles */
.archive #left-area,
.category #left-area {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* Carte article */
.archive article.post,
.category article.post {
    background: #ffffff;
    border-radius: 16px;
    padding: 25px 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    margin-bottom: 0;
}

.archive article.post:hover,
.category article.post:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

/* Titre article */
.archive article.post .entry-title,
.category article.post .entry-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1A1A2E;
    margin: 0 0 12px 0;
    line-height: 1.3;
}

.archive article.post .entry-title a,
.category article.post .entry-title a {
    color: inherit;
    text-decoration: none;
}

.archive article.post:hover .entry-title a,
.category article.post:hover .entry-title a {
    color: #E8842A;
}

/* Meta (date, catégorie) */
.archive article.post .post-meta,
.category article.post .post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    font-size: 0.9rem;
    color: #9CA3AF;
}

/* Badge date */
.archive article.post .post-meta .published,
.category article.post .post-meta .published {
    background: linear-gradient(135deg, #E8842A, #F5820A);
    color: #ffffff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

.archive article.post .post-meta a,
.category article.post .post-meta a {
    color: #6B7280;
    text-decoration: none;
}

.archive article.post .post-meta a:hover,
.category article.post .post-meta a:hover {
    color: #E8842A;
}

/* Extrait */
.archive article.post .post-content,
.category article.post .post-content {
    font-size: 1rem;
    color: #6B7280;
    line-height: 1.7;
    margin: 0;
}

.archive article.post .post-content p,
.category article.post .post-content p {
    margin: 0 0 15px 0;
}

/* Lien Lire plus */
.archive article.post .more-link,
.category article.post .more-link {
    display: inline-block;
    color: #E8842A;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    margin-top: 10px;
}

.archive article.post .more-link:hover,
.category article.post .more-link:hover {
    color: #C41E68;
}

/* Pagination */
.archive .pagination,
.category .pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 40px;
}

.archive .pagination a,
.archive .pagination span,
.category .pagination a,
.category .pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    background: #ffffff;
    border: 2px solid #E5E7EB;
    border-radius: 10px;
    color: #6B7280;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.archive .pagination a:hover,
.category .pagination a:hover {
    border-color: #E8842A;
    color: #E8842A;
}

.archive .pagination .current,
.category .pagination .current {
    background: #E8842A;
    border-color: #E8842A;
    color: #ffffff;
}

/* Sidebar */
.archive #sidebar,
.category #sidebar {
    padding-left: 30px;
}

.archive #sidebar .widget,
.category #sidebar .widget {
    background: #ffffff;
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.archive #sidebar .widget-title,
.category #sidebar .widget-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1A1A2E;
    margin: 0 0 20px 0;
    padding-bottom: 12px;
    border-bottom: 2px solid #E8842A;
}

/* Responsive */
@media (max-width: 980px) {
    .archive #sidebar,
    .category #sidebar {
        padding-left: 0;
        margin-top: 30px;
    }
}

@media (max-width: 768px) {
    .archive article.post,
    .category article.post {
        padding: 20px;
    }

    .archive article.post .entry-title,
    .category article.post .entry-title {
        font-size: 1.2rem;
    }
}