/**
 * Kadence Ludo - CSS minimal
 * Contient uniquement : animations de fond + composants reutilisables
 * Version: 1.1.0 (ajout header de page, cartes d'info, CTA, page Fritime Piccolo)
 *
 * Note : les styles des shortcodes wpludo sont charges depuis le plugin
 * (voir wp-content/plugins/wpludo/assets/css/ludo-status.css).
 */

/* ==========================================================================
   0. Ancres — décalage pour compenser le header sticky Kadence
   ========================================================================== */

[id="horaire"],
[id="programme"],
[id="contact"],
[id="soiree"],
[id="inscriptionfamille"],
[id="ludo-contact-section"],
[id="horairescontact"],
[id="maps"],
[id^="ludo-anim-"] {
    scroll-margin-top: 100px;
}

/* ==========================================================================
   1. Effets de fond (grille + formes flottantes animees)
   ========================================================================== */

.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;
}

.ludo-floating-shapes {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.ludo-shape {
    position: absolute;
    border-radius: 50%;
}

.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;
}

.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;
}

.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;
}

@keyframes ludoMorph {
    0%, 100% {
        border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
    }
    25% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
    50% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }
    75% {
        border-radius: 60% 40% 60% 30% / 70% 30% 50% 60%;
    }
}

/* Contenu au-dessus des formes */
.site {
    position: relative;
    z-index: 2;
}

/* ==========================================================================
   2. Hero - Titre principal et description
   ========================================================================== */

/* Titre hero "Le jeu n'est pas qu'une affaire d'enfants" */
.ludo-hero-title {
    font-size: clamp(40px, 9vw, 88px) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    color: var(--ludo-text-strong, #1a1a2e ) !important;
    letter-spacing: clamp(-3px, calc(1.5px - 0.25vw), 0px) !important;
    margin: 0 0 30px 0 !important;
    padding: 0 0 10px 0 !important;
} 

/* Texte en dégradé orange → magenta (s'applique à n'importe quel élément) */
.ludo-hero-title-accent {
    background: var(--ludo-accent, #e5007d ) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* Description hero "Plus de 2600 jeux t'attendent..." (12px → 20px sur 320→1920px) */
.ludo-hero-desc,
.ludo-hero-desc p {
    font-size: clamp(14px, calc(12px + 0.60vw), 20px) !important;
    line-height: clamp(1.6, calc(1.9 - 0.015vw), 1.8) !important;
    max-width: clamp(300px, 40vw, 480px) !important;
    margin-bottom: clamp(20px, 3vw, 35px) !important;
}


@media (max-width: 767px) {
    .ludo-hero-title {
        font-weight: 700;  /* Bold mobile */
    }
}


/* ==========================================================================
   3. Grille stats Hero (4 cartes - design original ludotheque)
   ========================================================================== */

.ludo-stats-fun {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 20px 0;
    align-items: start;
}

.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 (cartes 1 et 4) - image a gauche, texte a droite */
.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;
    left: 0;
    right: 0;
    bottom: 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 (cartes 2 et 3) - image en haut, texte en bas */
.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;
    max-height: 200px;
    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;
}

.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: clamp(18px, calc(17.6px + 0.4vw), 22px);
    font-weight: 800;
    padding: clamp(0.375rem, 0.8vw, 0.5rem) clamp(1rem, 1.6vw, 1.125rem);
    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: var(--ludo-font-md, clamp(14px, calc(12px + 0.5vw), 18px));
    font-weight: 700;
    color: var(--ludo-text-strong, #1A1A2E);
    margin: 0 0 5px 0;
}

.ludo-stat-fun-label {
    font-size: var(--ludo-font-sm, clamp(12px, calc(10.4px + 0.375vw), 15px));
    color: var(--ludo-text, #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: clamp(50px, 5vw, 60px);
    height: clamp(50px, 5vw, 60px);
    object-fit: contain;
    border-radius: 12px;
}

.ludo-stat-fun.horizontal .ludo-stat-fun-badge.badge-logo img {
    width: clamp(40px, 4vw, 50px);
    height: clamp(40px, 4vw, 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 Mobile < 768px : toutes les cartes en layout horizontal */
@media (max-width: 767px) {
    .ludo-stats-fun {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .ludo-stat-fun.vertical,
    .ludo-stat-fun.horizontal {
        flex-direction: row;
        align-items: stretch;
    }

    .ludo-stat-fun.vertical .ludo-stat-fun-img,
    .ludo-stat-fun.horizontal .ludo-stat-fun-img {
        width: 40%;
        max-width: 140px;
        min-width: 100px;
        height: auto;
        min-height: 120px;
        max-height: 160px;
        flex-shrink: 0;
    }

    /* Gradient fondu vers la droite (image > texte) */
    .ludo-stat-fun.vertical .ludo-stat-fun-img::after,
    .ludo-stat-fun.horizontal .ludo-stat-fun-img::after {
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        width: 50%;
        height: 100%;
        background: linear-gradient(to left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    }

    .ludo-stat-fun.vertical .ludo-stat-fun-content,
    .ludo-stat-fun.horizontal .ludo-stat-fun-content {
        padding: 15px 18px;
        text-align: left;
        flex: 1;
        margin-top: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .ludo-stat-fun.vertical .ludo-stat-fun-badge,
    .ludo-stat-fun.horizontal .ludo-stat-fun-badge {
        align-self: flex-start;
    }
}

/* ==========================================================================
   4. Bandeau marquee (chiffres defilants)
   ========================================================================== */

.ludo-stats-marquee {
    width: 100%;
    overflow: hidden;
    padding: 30px 0;
    
}

.ludo-marquee-content {
    display: flex;
    gap: 80px;
    animation: ludoMarquee 30s linear infinite;
    align-items: center;
    width: max-content;
}

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

.ludo-marquee-item {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.ludo-marquee-number {
    font-family: 'Space Mono', monospace !important;
    font-size: clamp(32px, calc(24px + 2vw), 56px) !important;
    /* 32px → 56px : un peu plus gros sur grand écran pour l'impact visuel */
    font-weight: 900;
    line-height: 1;
    letter-spacing: -1px;
}

.ludo-marquee-number.orange {
    color: var(--ludo-primary, #E8842A);
}

.ludo-marquee-number.magenta {
    color: var(--ludo-magenta, #C41E68);
}

.ludo-marquee-number.peach {
    color: #EBAA7D;
}

.ludo-marquee-label {
    font-size: clamp(14px, calc(12px + 0.5vw), 18px) !important;
    /* 14px → 18px : plus lisible sur grand écran */
    font-weight: 500;
    color: 	#6B6B6B;
    text-transform: none;
    letter-spacing: normal;
}
.ludo-marquee-dot {
    width: 6px;
    height: 6px;
    background: #9A9A9A;
    border-radius: 50%;
    opacity: 0.5;
    flex-shrink: 0;
}

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

@media (max-width: 768px) {
    .ludo-marquee-content {
        gap: 50px;
    }
}

/* ==========================================================================
   4. Grille services (7 cartes — design aligné Divi avec clamp())
   ========================================================================== */

.ludo-services-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: clamp(15px, 1.5vw, 20px) !important;
    margin-top: clamp(20px, 3vw, 40px) !important;
}

/* 1è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;
}

/* ---------- Carte de base ---------- */
.ludo-service-card {
    background: #FFFFFF !important;
    border: none !important;
    border-radius: clamp(12px, 1.2vw, 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 (haut) ---------- */
.ludo-service-card .service-visual {
    width: 100% !important;
    height: clamp(100px, 12vw, 130px) !important;
    border-radius: clamp(12px, 1.2vw, 16px) clamp(12px, 1.2vw, 16px) 0 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: clamp(15px, 2vw, 20px) !important;
    position: relative !important;
    overflow: hidden !important;
}

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

/* ---------- Variantes de couleur (zone visuelle uniquement) ---------- */
.ludo-service-card.card-orange .service-visual {
    background: linear-gradient(145deg, #FFCC80 0%, #FF9800 100%) !important;
}
.ludo-service-card.card-coral .service-visual {
    background: linear-gradient(145deg, #FFAB91 0%, #FF7043 100%) !important;
}
.ludo-service-card.card-sky .service-visual {
    background: linear-gradient(145deg, #B3E5FC 0%, #29B6F6 100%) !important;
}
.ludo-service-card.card-yellow .service-visual {
    background: linear-gradient(145deg, #FFF59D 0%, #FFCA28 100%) !important;
}
.ludo-service-card.card-rose .service-visual {
    background: linear-gradient(145deg, #F8BBD9 0%, #EC407A 100%) !important;
}
.ludo-service-card.card-magenta .service-visual {
    background: linear-gradient(145deg, #FF80AB 0%, #e5007d 100%) !important;
}

/* ---------- Image dans la zone visuelle ---------- */
.ludo-service-card .service-visual img {
    width: auto !important;
    height: clamp(50px, 6vw, 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: clamp(9px, 0.8vw, 11px) !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; }
.ludo-service-card.card-magenta .service-badge { color: var(--ludo-accent, #e5007d) !important; }

/* ---------- Zone contenu blanche ---------- */
.ludo-service-card .service-content {
    padding: clamp(15px, 1.8vw, 20px) !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    background: #FFFFFF !important;
}

.ludo-service-card h3 {
    font-size: var(--ludo-font-md, clamp(16px, calc(15.2px + 0.2vw), 18.4px)) !important;
    font-weight: 700 !important;
    color: #1F2937 !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.3 !important;
}

.ludo-service-card p,
.ludo-service-card .service-content {
    color: var(--ludo-text, #6B7280) !important;
    font-size: var(--ludo-font-sm, clamp(12.8px, calc(12px + 0.15vw), 14.4px)) !important;
    line-height: 1.55 !important;
    margin: 0 !important;
}

/* ---------- Lien CTA avec flèche auto ---------- */
.ludo-service-link {
    color: var(--ludo-primary, #E8842A) !important;
    font-size: var(--ludo-font-sm, clamp(12.8px, calc(12px + 0.15vw), 14.4px)) !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: '→';
}

.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; }
.ludo-service-card.card-magenta .ludo-service-link { color: var(--ludo-accent, #e5007d) !important; }

/* Liens en bloc quand plusieurs */
.ludo-service-link + .ludo-service-link {
    margin-top: 6px !important;
}

/* ---------- Card Featured (Bons Cadeaux — image à gauche) ---------- */
.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: clamp(140px, 16vw, 180px) !important;
    border-radius: clamp(12px, 1.2vw, 16px) 0 0 clamp(12px, 1.2vw, 16px) !important;
    flex-shrink: 0 !important;
}

.ludo-service-card.card-featured .service-visual img {
    height: clamp(60px, 7vw, 85px) !important;
}

.ludo-service-card.card-featured .service-content {
    width: 66.666% !important;
    padding: clamp(20px, 2.4vw, 28px) !important;
    justify-content: center !important;
}

.ludo-service-card.card-featured h3 {
    font-size: var(--ludo-font-xl, clamp(17.6px, calc(16px + 0.3vw), 20.8px)) !important;
    margin-bottom: 10px !important;
}

.ludo-service-card.card-featured p {
    font-size: var(--ludo-font-base, clamp(13.6px, calc(12.8px + 0.15vw), 15.2px)) !important;
}

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

/* ---------- Card Featured Reverse (La Ludo donne — image à droite) ---------- */
.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: clamp(140px, 16vw, 180px) !important;
    border-radius: 0 clamp(12px, 1.2vw, 16px) clamp(12px, 1.2vw, 16px) 0 !important;
    flex-shrink: 0 !important;
}

.ludo-service-card.card-featured-reverse .service-visual img {
    height: clamp(80px, 10vw, 120px) !important;
    max-height: 120px !important;
    object-fit: contain !important;
}

.ludo-service-card.card-featured-reverse .service-content {
    width: 66.666% !important;
    padding: clamp(20px, 2.4vw, 28px) !important;
    justify-content: center !important;
}

.ludo-service-card.card-featured-reverse h3 {
    font-size: var(--ludo-font-xl, clamp(17.6px, calc(16px + 0.3vw), 20.8px)) !important;
    margin-bottom: 10px !important;
}

.ludo-service-card.card-featured-reverse p {
    font-size: var(--ludo-font-base, clamp(13.6px, calc(12.8px + 0.15vw), 15.2px)) !important;
}

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

/* ---------- Responsive ---------- */
/* Tablette */
@media (max-width: 1024px) {
    .ludo-services-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    /* Bons Cadeaux reste pleine largeur, mais La Ludo donne passe en 1 col à côté du yellow Rentals */
    .ludo-services-grid .ludo-service-card:first-child {
        grid-column: span 2 !important;
    }
    .ludo-services-grid .ludo-service-card:last-child {
        grid-column: span 1 !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;
        padding: 20px !important;
        justify-content: center !important;
        flex-direction: row !important;
        border-radius: 16px 16px 0 0 !important;
    }
    /* Reset image size on featured cards to match standard cards on tablet */
    .ludo-service-card.card-featured .service-visual img,
    .ludo-service-card.card-featured-reverse .service-visual img {
        height: 65px !important;
        max-height: 65px !important;
    }
    .ludo-service-card.card-featured .service-content,
    .ludo-service-card.card-featured-reverse .service-content {
        width: 100% !important;
    }
    /* Repositionner le badge featured-reverse (top-right) sur tablette */
    .ludo-service-card.card-featured-reverse .service-badge {
        top: 10px !important;
        right: 10px !important;
        left: auto !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;
    }
    /* Force standard layout on featured cards (override desktop specificity) */
    .ludo-service-card.card-featured .service-visual,
    .ludo-service-card.card-featured-reverse .service-visual {
        height: 110px !important;
        min-height: auto !important;
        padding: 20px !important;
        justify-content: center !important;
        flex-direction: row !important;
    }
    .ludo-service-card .service-visual,
    .ludo-service-card.card-featured .service-visual,
    .ludo-service-card.card-featured-reverse .service-visual {
        height: 110px !important;
    }
    .ludo-service-card .service-visual img,
    .ludo-service-card.card-featured .service-visual img,
    .ludo-service-card.card-featured-reverse .service-visual img {
        height: 55px !important;
        max-height: 55px !important;
    }
    .ludo-service-card .service-content {
        padding: 16px !important;
    }
    .ludo-service-card h3 {
        font-size: 16px !important;
    }
    /* Form embedded in yellow card (wpludo_rentals) — limit width */
    .ludo-service-card .service-content form,
    .ludo-service-card .service-content input,
    .ludo-service-card .service-content button {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================================
   5. Contact info (adresse / telephone / email)
   ========================================================================== */

.ludo-contact-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: clamp(10px, 1.2vw, 16px) !important;
    padding: clamp(10px, 1.4vw, 16px) 0 !important;
    font-size: var(--ludo-font-base, clamp(13px, calc(12px + 0.15vw), 14px)) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
	margin-bottom: 25px !important;
}

.ludo-contact-item:last-child {
    border-bottom: none !important;
}

.ludo-contact-icon {
    width: clamp(38px, 4vw, 48px) !important;
    height: clamp(38px, 4vw, 48px) !important;
    background: rgba(227, 108, 29, 0.1) !important;
    border-radius: clamp(10px, 1vw, 12px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: clamp(16px, calc(15px + 0.3vw), 20px) !important;
    color: var(--global-palette1, #e36c1d) !important;
    flex-shrink: 0 !important;
}

.ludo-contact-icon svg {
    width: clamp(18px, 1.8vw, 22px) !important;
    height: clamp(18px, 1.8vw, 22px) !important;
    color: var(--global-palette1, #e36c1d) !important;
}

.ludo-contact-details {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    font-size: var(--ludo-font-base, clamp(13px, calc(12px + 0.15vw), 14px)) !important;
}

.ludo-contact-label {
    font-size: var(--ludo-font-xs, clamp(11px, calc(10px + 0.15vw), 12px)) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: var(--global-palette6, #6b7280) !important;
    font-weight: 500 !important;
}

.ludo-contact-value {
    font-size: var(--ludo-font-md, clamp(13px, calc(12px + 0.31vw), 16px)) !important;
    color: var(--global-palette5, #374151) !important;
    font-weight: 400 !important;
}


.ludo-contact-value a {
    font-size: var(--ludo-font-md, clamp(13px, calc(12px + 0.31vw), 16px)) !important;
    color: inherit !important;
    text-decoration: none !important;
}

.ludo-contact-value a:hover {
    color: var(--global-palette1, #e36c1d) !important;
}

/* ==========================================================================
   6. Tableau des horaires
   ========================================================================== */

.ludo-hours-card {
    background: #ffffff !important;
    border-radius: clamp(12px, 1.4vw, 16px) !important;
    padding: clamp(16px, 2vw, 24px) !important;
    margin-top: clamp(16px, 2vw, 24px) !important;
    font-size: var(--ludo-font-sm, clamp(12px, calc(11px + 0.2vw), 14px)) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}

.ludo-hours-header {
    font-size: var(--ludo-font-sm, clamp(12px, calc(11px + 0.2vw), 14px)) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: var(--ludo-primary, #e36c1d) !important;
    margin-bottom: clamp(12px, 1.4vw, 16px) !important;
    padding-bottom: clamp(8px, 1vw, 12px) !important;
    border-bottom: 2px solid rgba(227, 108, 29, 0.1) !important;
}

.ludo-hours-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: var(--ludo-font-sm, clamp(12px, calc(11px + 0.2vw), 14px)) !important;
}

.ludo-hours-table tr {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

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

.ludo-hours-table td {
    padding: clamp(8px, 1vw, 10px) 0 !important;
    font-size: var(--ludo-font-sm, clamp(12px, calc(11px + 0.2vw), 14px)) !important;
    color: var(--ludo-text-dark, #374151) !important;
}

.ludo-hours-table td:first-child {
    font-weight: 500 !important;
    width: clamp(80px, 10vw, 100px) !important;
    text-align: left !important;
}

.ludo-hours-table td:last-child {
    text-align: right !important;
}

.ludo-hours-table td.closed {
    color: var(--ludo-info, #3B82F6) !important;
    font-style: italic !important;
}

.ludo-hours-table .special {
    display: block !important;
    font-size: var(--ludo-font-xs, clamp(11px, calc(10px + 0.15vw), 12px)) !important;
    color: var(--ludo-text, #6b7280) !important;
    font-style: italic !important;
    margin-top: 2px !important;
}

/* Bandeau notice d'exception (fermetures, vacances, etc.) */
.ludo-hours-notice {
    background: rgba(245, 156, 0, 0.1) !important;
    color: var(--ludo-primary, #e36c1d) !important;
    border-left: 3px solid var(--ludo-primary, #e36c1d) !important;
    padding: clamp(8px, 1vw, 12px) clamp(10px, 1.2vw, 14px) !important;
    border-radius: 6px !important;
    margin: 0 0 clamp(12px, 1.4vw, 16px) 0 !important;
    font-size: clamp(12px, calc(11px + 0.2vw), 13px) !important;
    line-height: 1.4 !important;
}

.ludo-hours-notice strong {
    font-weight: 600 !important;
}

/* ==========================================================================
   7. Balises de section (//CATALOGUE, //NOS SERVICES, etc.)
   ========================================================================== */

.ludo-section-tag {
    display: inline-block!important;
    font-size: clamp(11px, 1vw, 13px)!important;
    font-weight: 500!important;
    text-transform: uppercase!important;
    letter-spacing: 2px!important;
    color: var(--global-palette1, #e36c1d)!important;
    margin-bottom: 12px !important;
}

h2.ludo-section-title,
.ludo-section-title {
    font-size: var(--ludo-font-display, clamp(24px, 3vw, 64px)) !important;
    /* Mobile: 24px min → Desktop: 40px max */
    font-weight: 900 !important;
    color: var(--ludo-text-strong, #1a1a2e) !important;
    letter-spacing: -1px !important;
    margin-bottom: 20px !important;
    line-height: 1.1 !important;
    position: relative;
    padding-bottom: 18px;
}

/* Ligne orange décorative sous le titre — pleine largeur */
h2.ludo-section-title::after,
.ludo-section-title::after {
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    background: var(--global-palette1, #e36c1d);
    border-radius: 2px;
    margin: 14px auto 0;
}

.ludo-section-subtitle {
    font-size: clamp(14px, calc(12px + 0.60vw), 20px)!important;
    line-height: clamp(1.5, calc(1.7 - 0.01vw), 1.6)!important;
    color: var(--global-palette6, #6b7280)!important;
    max-width: clamp(400px, 50vw, 700px)!important;
    margin-left: auto!important;
    margin-right: auto!important;
}

.ludo-section-desc p {
    font-size: clamp(14px, calc(12px + 0.60vw), 20px) !important;
    line-height: clamp(1.6, calc(1.9 - 0.015vw), 1.8) !important;
    max-width: clamp(300px, 40vw, 480px) !important;
    margin-bottom: clamp(20px, 3vw, 35px) !important;
}
/* ==========================================================================
   8. Utilitaires
   ========================================================================== */

/* Texte en dégradé orange → magenta (s'applique à n'importe quel élément) */
.accent {
    background: linear-gradient(90deg, #E8842A 0%, #C41E68 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* -------------------------------------------------------------------------
   9. Boutons génériques
   ------------------------------------------------------------------------- */

.ludo-btn-primary {
    background: var(--ludo-primary) !important;
    color: var(--ludo-white) !important;
    border: none !important;
    padding: clamp(12px, 1.4vw, 16px) clamp(20px, 2.4vw, 32px) !important;
    font-size: var(--ludo-font-base, clamp(14px, calc(13.2px + 0.15vw), 16px)) !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 {
    background: var(--ludo-accent) !important;
    color: var(--ludo-white) !important;
    border: none !important;
    padding: clamp(12px, 1.4vw, 16px) clamp(20px, 2.4vw, 32px) !important;
    font-size: var(--ludo-font-base, clamp(14px, calc(13.2px + 0.15vw), 16px)) !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
}

.ludo-btn-outline {
    background: transparent !important;
    color: var(--ludo-text-dark) !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    padding: clamp(10px, 1.2vw, 14px) clamp(18px, 2.2vw, 30px) !important;
    font-size: var(--ludo-font-base, clamp(14px, calc(13.2px + 0.15vw), 16px)) !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 {
    padding: clamp(8px, 0.9vw, 10px) clamp(18px, 1.8vw, 22px) !important;
    font-size: clamp(13.6px, calc(13.28px + 0.05vw), 15.2px) !important;
    border-radius: 50px !important;
    font-weight: 500 !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: clamp(4px, 0.5vw, 6px) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.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 {
    display: none !important;
}

/* ==========================================================================
   9bis. Sections generiques
   ========================================================================== */

/* Section a fond gris clair, utilisee comme separateur de rythme sur les
   pages internes (contact en bas de page, encarts secondaires). */
.ludo-section-gray {
    background: var(--light-bg) !important;
    padding: clamp(48px, 6vw, 80px) 0 !important;
}

/* ==========================================================================
   10. Header de page interne (breadcrumb + titre + boutons)
   ========================================================================== */

/* Le padding vertical des sections est porte par le CSS (les blocs rowlayout
   sont a 0 pour ne pas le cumuler) : d'ou les !important sur padding. */
.ludo-page-header {
    padding: clamp(40px, 5vw, 70px) 20px clamp(24px, 3vw, 40px) !important;
    background: transparent !important;
}

/* La classe .ludo-page-header est posee sur le bloc rowlayout lui-meme, et
   Kadence applique "text-align: inherit" sur .wp-block-kadence-rowlayout.alignfull
   avec une specificite plus forte. On centre donc depuis la colonne interne,
   ce qui evite un !important. */
.ludo-page-header .kt-inside-inner-col {
    text-align: center;
}

.ludo-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: var(--ludo-font-sm);
    color: var(--ludo-text-subtle);
    margin-bottom: 1.5rem;
}

.ludo-breadcrumb a {
    color: var(--ludo-text);
    text-decoration: none;
    transition: color 0.3s ease;
}

.ludo-breadcrumb a:hover {
    color: var(--ludo-primary);
}

.ludo-breadcrumb .current {
    color: var(--ludo-primary);
    font-weight: 500;
}

.ludo-page-title,
.ludo-page-header h1 {
    font-size: var(--ludo-font-title) !important;
    font-weight: 800 !important;
    letter-spacing: -2px !important;
    margin-bottom: 1rem !important;
    color: var(--ludo-text-strong) !important;
}

/* Mot mis en avant : degrade clippe sur le texte */
.ludo-page-title .highlight,
.ludo-page-header h1 span {
    background: linear-gradient(135deg, var(--ludo-primary), var(--ludo-magenta));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ludo-page-header p {
    font-size: var(--ludo-font-md) !important;
    color: var(--ludo-text) !important;
    max-width: 600px;
    margin: 0 auto 30px auto !important;
    line-height: 1.8 !important;
}

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

/* ==========================================================================
   11. Cartes d'information (reutilisables : infos pratiques, regles, charte)
   ========================================================================== */

.ludo-rules-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

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

/* Liseré degrade revele au survol */
.ludo-rule-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--ludo-primary), var(--ludo-magenta));
    opacity: 0;
    transition: opacity 0.3s ease;
}

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

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

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

.ludo-rule-card-icon {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    background: rgba(227, 108, 29, 0.08);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    line-height: 1;
    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(227, 108, 29, 0.15);
}

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

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

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

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

.ludo-rule-card-icon.green {
    background: rgba(16, 185, 129, 0.08);
}

.ludo-rule-card:hover .ludo-rule-card-icon.green {
    background: rgba(16, 185, 129, 0.15);
}

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

.ludo-rule-card p,
.ludo-rule-card li {
    color: var(--ludo-text);
    font-size: var(--ludo-font-sm);
    line-height: 1.7;
}

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

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

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

/* ==========================================================================
   12. Bloc d'appel a l'action de fin de section
   ========================================================================== */

.ludo-rules-cta {
    text-align: center;
    padding: 50px 40px;
    background: linear-gradient(135deg, rgba(227, 108, 29, 0.08), rgba(196, 30, 104, 0.05));
    border-radius: 24px;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

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

.ludo-rules-cta h3 {
    font-size: var(--ludo-font-xl) !important;
    font-weight: 800 !important;
    color: var(--ludo-text-dark) !important;
    margin-bottom: 15px !important;
}

.ludo-rules-cta p {
    color: var(--ludo-text);
    font-size: var(--ludo-font-md);
    margin-bottom: 25px;
}

/* ==========================================================================
   12bis. Intro de page en carte (agenda, catalogues)
   ========================================================================== */

/* Composant distinct de .ludo-page-header : ici l'intro est une carte a fond
   degrade. Sur les pages catalogue elle se replie via JS (classes .hidden et
   .catalog-intro-toggle) — ces regles seront portees avec ces pages. */
.catalog-intro {
    background: linear-gradient(135deg, rgba(227, 108, 29, 0.06) 0%, rgba(196, 30, 104, 0.04) 100%);
    border-radius: 24px;
    padding: clamp(24px, 3vw, 40px);
    margin-bottom: 30px;
    overflow: hidden;
}

.catalog-intro-title {
    font-size: var(--ludo-font-title);
    font-weight: 800;
    letter-spacing: -2px;
    text-align: center;
    margin: 0;
    color: var(--ludo-text-strong);
}

.catalog-intro-title span {
    background: linear-gradient(135deg, var(--ludo-primary), var(--ludo-magenta));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.catalog-intro-subtitle {
    font-size: var(--ludo-font-md);
    color: var(--ludo-text);
    text-align: center;
    margin: 15px 0 0 0;
}

/* ==========================================================================
   13. Page Fritime Piccolo
   ========================================================================== */

/* -------------------------------------------------------------------------
   13.1 Galerie photos
   ------------------------------------------------------------------------- */

.ludo-piccolo-gallery {
    background: var(--ludo-white) !important;
    padding: clamp(24px, 3vw, 40px) 0 clamp(48px, 6vw, 80px) !important;
}

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

.ludo-gallery-title h2 {
    font-size: var(--ludo-font-display) !important;
    font-weight: 800 !important;
    letter-spacing: -1.5px !important;
    color: var(--ludo-text-strong) !important;
    margin: 0 0 15px 0 !important;
}

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

.ludo-gallery-subtitle {
    font-size: var(--ludo-font-md);
    color: var(--ludo-text);
    max-width: 500px;
    margin: 0 auto;
}

.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;
    transition: all 0.4s ease;
}

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

/* Voile sombre en bas, pour la lisibilite de la legende au survol */
.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: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;
}

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

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

.ludo-gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    color: var(--ludo-white);
    font-weight: 600;
    z-index: 2;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

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

/* -------------------------------------------------------------------------
   13.2 Infos pratiques
   ------------------------------------------------------------------------- */

.ludo-piccolo-infos {
    background: linear-gradient(180deg, var(--ludo-bg) 0%, var(--ludo-white) 100%) !important;
    padding: clamp(48px, 6vw, 80px) 0 !important;
}

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

.ludo-piccolo-infos-title h2 {
    font-size: var(--ludo-font-display) !important;
    font-weight: 800 !important;
    letter-spacing: -1.5px !important;
    color: var(--ludo-text-strong) !important;
    margin: 0 0 15px 0 !important;
}

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

/* -------------------------------------------------------------------------
   13.3 Programme du trimestre + appel a l'action
   ------------------------------------------------------------------------- */

.ludo-piccolo-program {
    background: var(--ludo-white) !important;
    padding: clamp(48px, 6vw, 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;
}

.ludo-piccolo-program-left {
    text-align: center;
}

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

.ludo-program-card h3 {
    font-size: var(--ludo-font-xl);
    font-weight: 700;
    color: var(--ludo-text-strong);
    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,
.ludo-rules-cta .ludo-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none !important;
}

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

/* -------------------------------------------------------------------------
   13.4 Responsive
   ------------------------------------------------------------------------- */

@media (max-width: 980px) {
    .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;
    }
}

@media (max-width: 767px) {
    .ludo-rules-cards {
        grid-template-columns: 1fr;
    }

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

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

    .ludo-rule-card {
        padding: 28px 22px;
    }

    .ludo-rules-cta {
        padding: 36px 24px;
    }

    .ludo-program-card {
        padding: 28px 22px;
    }
}

/* ==========================================================================
   14. Page Agenda & Evenements
   ========================================================================== */

.ludo-services-section {
    background: linear-gradient(180deg, var(--ludo-bg) 0%, var(--ludo-white) 100%) !important;
    padding: clamp(48px, 6vw, 80px) 0 !important;
}

/* Logo des soirees jeux, en lien vers la liste des animations */
.ludo-rules-cta img {
    max-width: 260px;
    height: auto;
    margin: 10px auto 20px;
    display: block;
}

/* -------------------------------------------------------------------------
   14.1 Tarifs des soirees jeux (grille 4 colonnes)
   ------------------------------------------------------------------------- */

.ludo-famille-details {
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px solid var(--light-border);
}

/* Le markup migre utilise h3 (l'archive Divi ciblait h4, la regle ne
   s'appliquait donc pas) : on couvre les deux. */
.ludo-famille-details h3,
.ludo-famille-details h4 {
    font-size: var(--ludo-font-md) !important;
    font-weight: 600 !important;
    color: var(--ludo-text-dark) !important;
    margin: 0 0 15px 0 !important;
    text-align: center;
}

.ludo-famille-details > p {
    font-size: var(--ludo-font-sm);
    color: var(--ludo-text);
    line-height: 1.7;
}

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

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

.ludo-famille-item:hover {
    background: rgba(227, 108, 29, 0.1);
    transform: translateY(-3px);
}

.ludo-famille-item .label {
    display: block;
    font-size: var(--ludo-font-xs);
    color: var(--ludo-text);
    margin-bottom: 5px;
}

.ludo-famille-item .price-block {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 3px;
}

.ludo-famille-item .price-block .amount {
    font-size: var(--ludo-font-lg);
    font-weight: 700;
    color: var(--ludo-primary);
}

.ludo-famille-item .price-block .suffix {
    font-size: var(--ludo-font-xs);
    font-weight: 500;
    color: var(--ludo-text);
}

/* Note « soupe sur inscription » */
.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: var(--ludo-font-xs);
    color: var(--ludo-text);
    line-height: 1.4;
}

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

@media (max-width: 767px) {
    .ludo-famille-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   15. Page Jouer a la ludo
   ========================================================================== */

/* -------------------------------------------------------------------------
   15.1 Enveloppes de section
   ------------------------------------------------------------------------- */

.ludo-section-light {
    background: var(--light-bg);
    padding: clamp(36px, 4.5vw, 60px) 0;
}

.ludo-contact-section {
    background: var(--light-bg) !important;
    padding: clamp(48px, 6vw, 80px) 0 !important;
}

/* Conteneur centre interne (les sections sont en pleine largeur) */
.ludo-container {
    max-width: 1200px;
    width: 95%;
    margin: 0 auto;
    padding: 0 20px;
}

/* -------------------------------------------------------------------------
   15.2 Titre de section
   ------------------------------------------------------------------------- */

.ludo-jouer-section-title {
    text-align: center;
    margin-bottom: 40px;
}

.ludo-jouer-section-title h2 {
    font-size: clamp(1.6rem, 2.6vw, 2rem) !important;
    font-weight: 800 !important;
    color: var(--ludo-text-dark) !important;
    margin: 0 0 10px 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.ludo-jouer-section-title .title-emoji {
    font-size: 1.8rem;
    line-height: 1;
}

.ludo-jouer-section-title .ludo-jouer-lead {
    color: var(--ludo-primary);
    font-size: var(--ludo-font-md);
    font-weight: 600;
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto 12px auto;
}

.ludo-jouer-section-title p {
    color: var(--ludo-text);
    font-size: var(--ludo-font-base);
    line-height: 1.7;
    max-width: 700px;
    margin: 0 auto;
}

.ludo-jouer-section-title.wide h2 {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(1.5rem, 2.4vw, 1.8rem) !important;
}

/* -------------------------------------------------------------------------
   15.3 Grande carte avec image flottante
   ------------------------------------------------------------------------- */

.ludo-jouer-card {
    background: var(--light-card);
    border: 1px solid var(--light-border);
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    display: flex;
    gap: 30px;
    align-items: flex-start;
    transition: all 0.3s ease;
}

.ludo-jouer-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    transform: translateY(-3px);
}

.ludo-jouer-card-content {
    flex: 1;
}

.ludo-jouer-card-with-image {
    position: relative;
}

/* Reserve la place de l'image positionnee en absolu */
.ludo-jouer-card-with-image .ludo-jouer-card-content {
    padding-right: 220px;
}

.ludo-jouer-card-image {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    width: 180px;
    height: 180px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.ludo-jouer-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.ludo-jouer-card:hover .ludo-jouer-card-image img {
    transform: scale(1.05);
}

/* -------------------------------------------------------------------------
   15.4 Encart « highlight » et son badge de soutien
   ------------------------------------------------------------------------- */

.ludo-jouer-highlight {
    background: rgba(227, 108, 29, 0.08);
    border-left: 4px solid var(--ludo-primary);
    padding: 20px;
    border-radius: 0 12px 12px 0;
    display: flex;
    gap: 15px;
    margin: 20px 0;
}

.ludo-jouer-highlight-content strong {
    display: block;
    color: var(--ludo-text-dark);
    margin-bottom: 5px;
    font-size: var(--ludo-font-base);
}

.ludo-jouer-highlight-content p {
    margin: 0;
    color: var(--ludo-text);
    font-size: var(--ludo-font-sm);
    line-height: 1.6;
}

.ludo-jouer-highlight-wrapper {
    position: relative;
    margin: 25px 0 20px 0;
}

.ludo-jouer-highlight-wrapper .ludo-jouer-highlight {
    margin: 0;
}

/* Badge « Avec le soutien de… », en debord au-dessus de l'encart */
.ludo-jouer-highlight-wrapper .ludo-jouer-badge-soutien-img {
    position: absolute;
    top: -40px;
    right: 10px;
    z-index: 2;
    height: 50px;
    width: auto;
}

.ludo-jouer-card-v2 .ludo-jouer-badge-soutien-img {
    position: absolute;
    top: -40px;
    right: 12px;
    z-index: 2;
    height: 40px;
    width: auto;
}

.ludo-jouer-card-v2.with-image .ludo-jouer-badge-soutien-img {
    top: -30px;
    right: 15px;
}

/* Pastille de l'icone Fritime Piccolo */
.ludo-fritime-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(145deg, #FFCC80 0%, #FF9800 100%);
    padding: 8px;
    box-shadow: 0 4px 12px rgba(255, 152, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ludo-fritime-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* -------------------------------------------------------------------------
   15.5 Grille de deux cartes
   ------------------------------------------------------------------------- */

.ludo-jouer-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-bottom: 30px;
    align-items: stretch;
}

/* Cartes de hauteur egale, boutons alignes en bas */
.ludo-jouer-grid-2 > .ludo-jouer-card-v2 {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.ludo-jouer-grid-2 > .ludo-jouer-card-v2 .ludo-jouer-card-v2-content {
    flex: 1;
}

.ludo-jouer-grid-2 > .ludo-jouer-card-v2 .ludo-jouer-buttons {
    margin-top: auto;
}

.ludo-jouer-card-v2 {
    position: relative;
    background: var(--light-card);
    border: 1px solid var(--light-border);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    overflow: visible;
}

.ludo-jouer-card-v2:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
}

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

.ludo-jouer-card-v2-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ludo-jouer-card-v2-icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.ludo-jouer-card-v2-icon .emoji {
    font-size: 1.8rem;
    line-height: 1;
}

.ludo-jouer-card-v2-header h3 {
    font-size: var(--ludo-font-lg) !important;
    font-weight: 700 !important;
    color: var(--ludo-text-dark) !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

.ludo-jouer-card-v2-content {
    flex: 1;
}

.ludo-jouer-card-v2-content > p {
    color: var(--ludo-text);
    font-size: var(--ludo-font-sm);
    line-height: 1.6;
    margin: 0 0 15px 0;
}

.ludo-jouer-card-v2-content h4 {
    font-size: var(--ludo-font-base) !important;
    font-weight: 700 !important;
    color: var(--ludo-text-dark) !important;
    margin: 20px 0 12px 0 !important;
}

/* Liste a fleches */
.ludo-jouer-list-arrow {
    list-style: none;
    padding: 0;
    margin: 0 0 15px 0;
}

.ludo-jouer-list-arrow li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    color: var(--ludo-text);
    font-size: var(--ludo-font-sm);
    line-height: 1.5;
}

.ludo-jouer-list-arrow li::before {
    content: '\2192';
    color: var(--ludo-primary);
    font-weight: 600;
    flex-shrink: 0;
}

/* Note bas de carte */
.ludo-jouer-card-v2-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed rgba(0, 0, 0, 0.1);
}

.ludo-jouer-card-v2-note .note-icon {
    flex-shrink: 0;
}

.ludo-jouer-card-v2-note p {
    margin: 0 !important;
    font-size: var(--ludo-font-sm);
    color: var(--ludo-text);
    line-height: 1.5;
}

.ludo-jouer-card-v2-note strong {
    color: var(--ludo-text-dark);
}

/* -------------------------------------------------------------------------
   15.6 Image en tete de carte
   ------------------------------------------------------------------------- */

/* La carte perd son padding : il est reporte sur chaque zone interne pour
   que l'image aille de bord a bord sous les angles arrondis. */
.ludo-jouer-card-v2.with-image {
    padding: 0;
    overflow: visible;
}

.ludo-jouer-card-v2-image {
    width: 100%;
    height: 140px;
    overflow: hidden;
    position: relative;
    border-radius: 20px 20px 0 0;
}

/* Degrade de fondu vers le fond de la carte */
.ludo-jouer-card-v2-image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to top, var(--light-card) 0%, rgba(255, 255, 255, 0) 100%);
}

.ludo-jouer-card-v2-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.5s ease;
}

.ludo-jouer-card-v2-image.img-bottom img {
    object-position: center bottom;
}

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

.ludo-jouer-card-v2.with-image .ludo-jouer-card-v2-header,
.ludo-jouer-card-v2.with-image .ludo-jouer-card-v2-content,
.ludo-jouer-card-v2.with-image .ludo-jouer-buttons,
.ludo-jouer-card-v2.with-image .ludo-jouer-highlight {
    padding-left: 30px;
    padding-right: 30px;
}

.ludo-jouer-card-v2.with-image .ludo-jouer-card-v2-header {
    margin-top: -15px;
    position: relative;
    padding-top: 0;
}

.ludo-jouer-card-v2.with-image .ludo-jouer-buttons {
    padding-bottom: 30px;
}

/* -------------------------------------------------------------------------
   15.7 Boutons et liens
   ------------------------------------------------------------------------- */

.ludo-jouer-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 25px;
}

.ludo-link-accent {
    color: var(--ludo-primary);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.ludo-link-accent:hover {
    color: var(--ludo-primary-light);
    text-decoration: underline;
}

/* -------------------------------------------------------------------------
   15.8 Responsive (768px : point de rupture d'origine, iPad portrait inclus)
   ------------------------------------------------------------------------- */

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

    .ludo-jouer-card {
        flex-direction: column;
        padding: 30px;
        gap: 20px;
    }

    .ludo-jouer-highlight {
        flex-direction: column;
        gap: 10px;
    }

    .ludo-jouer-buttons {
        flex-direction: column;
    }

    .ludo-jouer-buttons .ludo-btn-primary,
    .ludo-jouer-buttons .ludo-btn-outline {
        width: 100%;
        text-align: center;
    }

    /* L'image repasse dans le flux, sous le contenu */
    .ludo-jouer-card-with-image .ludo-jouer-card-content {
        padding-right: 0;
    }

    .ludo-jouer-card-image {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        width: 100%;
        height: 160px;
        margin-top: 20px;
    }

    .ludo-jouer-card-v2 {
        padding: 25px;
    }

    .ludo-jouer-card-v2-image {
        height: 120px;
    }

    .ludo-jouer-card-v2.with-image .ludo-jouer-card-v2-header,
    .ludo-jouer-card-v2.with-image .ludo-jouer-card-v2-content,
    .ludo-jouer-card-v2.with-image .ludo-jouer-buttons,
    .ludo-jouer-card-v2.with-image .ludo-jouer-highlight {
        padding-left: 20px;
        padding-right: 20px;
    }

    .ludo-jouer-card-v2.with-image .ludo-jouer-buttons {
        padding-bottom: 25px;
    }

    .ludo-fritime-icon {
        width: 44px;
        height: 44px;
    }
}


/* ==========================================================================
   16. Page La Ludo (presentation de l'association)
   ========================================================================== */

/* -------------------------------------------------------------------------
   16.1 Hero
   ------------------------------------------------------------------------- */

.ludo-about-hero {
    background: linear-gradient(135deg, var(--ludo-bg) 0%, #FFF5F8 50%, #F5F3FF 100%);
    padding: clamp(48px, 6vw, 80px) 20px;
    text-align: center;
}

.ludo-about-hero h1 {
    font-size: var(--ludo-font-title);
    font-weight: 800;
    color: var(--ludo-text-strong);
    margin: 0 0 20px 0;
    line-height: 1.1;
}

.ludo-about-hero h1 span {
    background: linear-gradient(135deg, var(--ludo-primary), var(--ludo-magenta));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ludo-about-hero-subtitle {
    font-size: var(--ludo-font-md);
    color: var(--ludo-text);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* -------------------------------------------------------------------------
   16.2 Notre histoire (texte + photo)
   ------------------------------------------------------------------------- */

.ludo-about-histoire {
    padding: clamp(48px, 6vw, 80px) 0;
    background: var(--ludo-white);
}

.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-year {
    display: inline-block;
    background: linear-gradient(135deg, var(--ludo-primary), var(--ludo-magenta));
    color: var(--ludo-white);
    font-size: var(--ludo-font-xs);
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 50px;
    margin-bottom: 20px;
}

.ludo-about-histoire-content h2 {
    font-size: clamp(1.6rem, 2.6vw, 2rem);
    font-weight: 800;
    color: var(--ludo-text-strong);
    margin: 0 0 10px 0;
}

.ludo-about-histoire-content h2 span {
    background: linear-gradient(135deg, var(--ludo-primary), var(--ludo-magenta));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ludo-about-histoire-content p {
    font-size: var(--ludo-font-base);
    color: var(--ludo-text-dark);
    line-height: 1.8;
    margin: 0 0 15px 0;
}

.ludo-about-histoire-img {
    overflow: hidden;
    border-radius: 24px;
    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;
}

/* -------------------------------------------------------------------------
   16.3 Titre de section commun
   ------------------------------------------------------------------------- */

.ludo-about-section-title {
    text-align: center;
    margin-bottom: 50px;
}

.ludo-about-section-title h2 {
    font-size: clamp(1.8rem, 2.8vw, 2.2rem);
    font-weight: 800;
    color: var(--ludo-text-strong);
    margin: 0 0 15px 0;
}

.ludo-about-section-title h2 span {
    background: linear-gradient(135deg, var(--ludo-primary), var(--ludo-magenta));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ludo-about-section-title p {
    font-size: var(--ludo-font-md);
    color: var(--ludo-text);
    max-width: 500px;
    margin: 0 auto;
}

/* -------------------------------------------------------------------------
   16.4 Nos espaces (3 cartes)
   ------------------------------------------------------------------------- */

.ludo-about-espaces {
    padding: clamp(48px, 6vw, 80px) 0;
    background: var(--light-bg);
}

.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: var(--light-card);
    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(227, 108, 29, 0.12);
}

/* Conserve pour l'ajout ulterieur des photos des salles : les blocs image
   sont presents en commentaire dans le contenu de la page. */
.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: var(--ludo-font-lg);
    font-weight: 700;
    color: var(--ludo-text-strong);
    margin: 0 0 10px 0;
}

.ludo-about-espace-content p {
    font-size: var(--ludo-font-sm);
    color: var(--ludo-text);
    line-height: 1.6;
    margin: 0;
}

/* -------------------------------------------------------------------------
   16.5 Bandeau degrade « Jouer n'est pas qu'un passe-temps »
   ------------------------------------------------------------------------- */

.ludo-about-jouer {
    padding: 50px 0;
    background: linear-gradient(135deg, var(--ludo-primary), var(--ludo-magenta));
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    margin: 0 20px;
}

/* Gros de translucide en filigrane */
.ludo-about-jouer::before {
    content: '\1F3B2';
    position: absolute;
    font-size: 200px;
    line-height: 1;
    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: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 800;
    color: var(--ludo-white);
    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;
    line-height: 1;
}

.ludo-about-jouer-item p {
    font-size: var(--ludo-font-md);
    color: var(--ludo-white);
    margin: 0;
    text-align: left;
}

/* -------------------------------------------------------------------------
   16.6 Notre equipe
   ------------------------------------------------------------------------- */

.ludo-about-equipe {
    padding: clamp(48px, 6vw, 80px) 0;
    background: var(--ludo-white);
}

.ludo-about-equipe-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    padding: 0 20px;
}

.ludo-about-equipe-content p {
    font-size: var(--ludo-font-md);
    color: var(--ludo-text-dark);
    line-height: 1.8;
    margin: 0 0 30px 0;
}

.ludo-about-equipe-avatars {
    display: flex;
    justify-content: center;
}

/* Pastilles qui se chevauchent legerement */
.ludo-about-equipe-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ludo-primary), var(--ludo-magenta));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--ludo-white);
    border: 3px solid var(--ludo-white);
    margin-left: -15px;
}

.ludo-about-equipe-avatar:first-child {
    margin-left: 0;
}

/* -------------------------------------------------------------------------
   16.7 Deux cartes d'appel a l'action
   ------------------------------------------------------------------------- */

.ludo-about-cta {
    padding: clamp(48px, 6vw, 80px) 0;
    background: var(--light-bg);
}

.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: var(--light-card);
    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(227, 108, 29, 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: var(--ludo-font-lg);
    font-weight: 700;
    color: var(--ludo-text-strong);
    margin: 0 0 10px 0;
}

.ludo-about-cta-card p {
    font-size: var(--ludo-font-sm);
    color: var(--ludo-text);
    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, var(--ludo-primary), var(--ludo-magenta));
    color: var(--ludo-white) !important;
    padding: 14px 28px;
    border-radius: 50px;
    font-size: var(--ludo-font-sm);
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.ludo-about-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(227, 108, 29, 0.3);
}

.ludo-about-cta-btn.secondary {
    background: var(--light-card);
    color: var(--ludo-primary) !important;
    border: 2px solid var(--ludo-primary);
}

.ludo-about-cta-btn.secondary:hover {
    background: var(--ludo-primary);
    color: var(--ludo-white) !important;
}

/* -------------------------------------------------------------------------
   16.8 Carte Google (remplace le module Divi Supreme, absent du site cible)
   ------------------------------------------------------------------------- */

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

.ludo-map-embed iframe {
    display: block;
    width: 100%;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* -------------------------------------------------------------------------
   16.9 Responsive
   ------------------------------------------------------------------------- */

@media (max-width: 980px) {
    .ludo-about-histoire-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* Photo au-dessus du texte sur petit ecran */
    .ludo-about-histoire-img {
        order: -1;
    }

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

@media (max-width: 767px) {
    .ludo-about-espaces-grid,
    .ludo-about-cta-grid {
        grid-template-columns: 1fr;
    }

    .ludo-about-jouer-item {
        flex-direction: column;
        text-align: center;
    }

    .ludo-about-jouer-item p {
        text-align: center;
    }

    .ludo-about-cta-card {
        padding: 28px 22px;
    }
}

/* ==========================================================================
   17. Page Tarifs
   --------------------------------------------------------------------------
   Portee depuis _archived/custom.css et timeline-historique.css. Les couleurs
   ont ete substituees par les tokens --ludo-* de facon mecanique (memes
   correspondances que les sections 10 a 16) ; quelques teintes ponctuelles
   d alerte restent litterales, faute de token equivalent.
   ========================================================================== */

/* 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(227, 108, 29, 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: var(--ludo-text-strong) !important;
    margin: 0 !important;
}

.ludo-charte-header h3 span {
    color: var(--ludo-magenta);
}

/* Introduction */
.ludo-charte-intro {
    color: var(--ludo-text);
    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: var(--ludo-text);
}

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

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

@media (max-width: 768px) {
    /* Titres de sections - hiérarchie cohérente */
    .ludo-checklist-title h2,
    .ludo-tarifs-title h2,
    .ludo-timeline-header h3 {
        font-size: 1.4rem !important;
    }
}

/* -------------------------------------------------------------------------
   9.8 Bloc Astuce/Bonus - VERSION COMPACTE POUR CARTE
   ------------------------------------------------------------------------- */
.ludo-tip-block {
    background: linear-gradient(135deg, var(--ludo-primary, var(--ludo-primary)) 0%, var(--ludo-magenta, var(--ludo-magenta)) 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: var(--ludo-white) !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, var(--ludo-text));
    display: block;
}

.ludo-bonus-item .arrow {
    color: var(--ludo-primary, var(--ludo-primary));
    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, var(--ludo-primary));
    display: block;
}

/* -------------------------------------------------------------------------
   9.9 Bloc Warning/Alert - STYLE FUN
   ------------------------------------------------------------------------- */
.ludo-warning-block {
    background: linear-gradient(135deg, rgba(227, 108, 29, 0.1), rgba(227, 108, 29, 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, var(--ludo-primary)), var(--ludo-magenta, var(--ludo-magenta)));
}

/* 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, var(--ludo-magenta));
}

.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, var(--ludo-text-strong));
}

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

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

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

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

.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, var(--ludo-text-strong)) !important;
    margin: 0 0 10px 0 !important;
}

.ludo-timeline-header p {
    color: var(--ludo-text, var(--ludo-text));
    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, var(--ludo-success), var(--ludo-warning), var(--ludo-error), #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: var(--ludo-white);
    margin-bottom: 12px;
    border: 5px solid var(--ludo-white);
    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, var(--ludo-success), #16a34a); }

.ludo-timeline-dot.step-2 { background: linear-gradient(135deg, var(--ludo-warning), #d97706); }

.ludo-timeline-dot.step-3 { background: linear-gradient(135deg, var(--ludo-error), #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, var(--ludo-text-strong));
    margin-bottom: 5px;
}

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

/* 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, var(--ludo-text));
    background: rgba(227, 108, 29, 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, var(--ludo-text-strong)) !important;
    margin: 0 0 10px 0 !important;
}

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

.ludo-checklist-card {
    background: var(--light-card, var(--ludo-white)) !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, var(--ludo-primary)), var(--ludo-magenta, var(--ludo-magenta)));
    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, var(--ludo-text-strong)) !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, var(--ludo-text));
    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, var(--ludo-primary));
    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, var(--ludo-text-strong)) !important;
    margin: 0 0 10px 0 !important;
}

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

/* ===========================================
   CARTE DÉCOUVERTE - ORANGE/MAGENTA
   =========================================== */
.ludo-decouverte-card {
    background: linear-gradient(135deg, var(--ludo-primary, var(--ludo-primary)) 0%, var(--ludo-magenta, var(--ludo-magenta)) 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(227, 108, 29, 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-content {
    flex: 1;
    position: relative;
    z-index: 1;
}

.ludo-decouverte-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.25);
    color: var(--ludo-white);
    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: var(--ludo-white) !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: var(--ludo-white);
}

.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: var(--ludo-white);
    line-height: 1.5;
}

.ludo-bonne-nouvelle strong {
    color: var(--ludo-white);
    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, var(--ludo-white));
    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, var(--ludo-primary)), var(--ludo-magenta, var(--ludo-magenta)));
    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, var(--ludo-primary)), var(--ludo-magenta, var(--ludo-magenta)));
    color: var(--ludo-white);
    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(227, 108, 29, 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(227, 108, 29, 0.15);
}

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

.ludo-formule-card h3 small {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ludo-text, var(--ludo-text));
    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, var(--ludo-primary));
}

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

.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, var(--ludo-text));
    font-size: 0.95rem;
    line-height: 1.6;
}

.ludo-formule-card li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--ludo-success);
    font-weight: bold;
}

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

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

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

/* 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, var(--ludo-text-strong));
    font-weight: 500;
}

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

/* Bloc info dans carte formule */
.ludo-formule-info {
    background: rgba(227, 108, 29, 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, var(--ludo-text-strong));
    font-weight: 500;
}

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

/* Bloc info jeux inclus - pour section abonnements */
.ludo-formule-info-jeu {
    background: rgba(227, 108, 29, 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, var(--ludo-text));
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
}

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

.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, var(--ludo-text-strong)) !important;
    margin: 0 0 8px 0 !important;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.ludo-abonnements-header p {
    color: var(--ludo-text, var(--ludo-text));
    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(227, 108, 29, 0.03) 0%, var(--ludo-white) 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, var(--ludo-primary));
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(227, 108, 29, 0.15);
}

.ludo-abo-card.recommended {
    border-color: var(--ludo-primary, var(--ludo-primary));
    border-width: 2px;
    background: linear-gradient(180deg, rgba(227, 108, 29, 0.08) 0%, var(--ludo-white) 100%);
}

.ludo-abo-card .abo-badge {
    position: absolute;
    top: -10px;
    right: 15px;
    background: linear-gradient(135deg, var(--ludo-primary, var(--ludo-primary)), var(--ludo-magenta, var(--ludo-magenta)));
    color: var(--ludo-white);
    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, var(--ludo-text-strong)) !important;
    margin: 0 !important;
}

.ludo-abo-card .games {
    font-size: 0.8rem;
    color: var(--ludo-text, var(--ludo-text));
    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, var(--ludo-primary));
}

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

/* 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, var(--ludo-primary));
    margin-top: 8px;
}

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

.ludo-famille-details h4 {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--ludo-text-dark, var(--ludo-text-strong)) !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, var(--ludo-text));
    margin-top: 4px;
}

/* 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, var(--ludo-primary));
}

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

.ludo-caution-banner .caution-icon {
    width: 50px;
    height: 50px;
    background: rgba(227, 108, 29, 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, var(--ludo-text-strong)) !important;
    margin: 0 0 5px 0 !important;
}

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

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

@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;
    }
}

@media (max-width: 1024px) {
    .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(227, 108, 29, 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, var(--ludo-primary)) !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-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-checklist-grid,
    .ludo-rules-cards {
        padding: 0 15px;
    }
    /* 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;
    }
}

/* ===========================================
   18. Carte Culture (accueil + tarifs) — porte du Divi custom.css (WELCOME BANNER)
   le 2026-10-03, couleurs vers les tokens --ludo-* / --light-*
   =========================================== */
.ludo-welcome-banner {
    display: flex;
    align-items: stretch;
    gap: 30px;
    background: linear-gradient(135deg, rgba(227, 108, 29, 0.08) 0%, rgba(196, 30, 104, 0.06) 100%);
    border: 1px solid rgba(227, 108, 29, 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 h2 {
    font-size: var(--ludo-font-xl);
    font-weight: 800;
    color: var(--ludo-text-strong);
    margin: 0 0 6px 0;
    line-height: 1.3;
}

.ludo-welcome-banner h3 {
    font-size: var(--ludo-font-lg);
    font-weight: 700;
    color: var(--ludo-text-dark);
    margin: 0 0 15px 0;
    line-height: 1.4;
}

.ludo-welcome-banner p {
    margin: 0 0 12px 0;
    font-size: var(--ludo-font-base);
    color: var(--ludo-text);
    line-height: 1.7;
}

.ludo-welcome-banner p:last-child {
    margin-bottom: 0;
}

.ludo-welcome-banner strong {
    color: var(--ludo-primary);
    font-weight: 700;
}

.ludo-welcome-banner a {
    color: var(--ludo-primary);
    text-decoration: underline;
    font-weight: 600;
}

.ludo-welcome-banner a:hover {
    color: var(--ludo-secondary);
}

.ludo-welcome-banner .welcome-thanks {
    font-weight: 600;
    color: var(--ludo-text-dark);
    font-size: var(--ludo-font-md);
    margin-top: 5px;
}

/* Variante badge (Carte Culture, Offre lot) : logo entier, pas de recadrage */
.ludo-welcome-banner.offrelot-banner .welcome-image {
    background: linear-gradient(135deg, rgba(227, 108, 29, 0.12) 0%, rgba(196, 30, 104, 0.10) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.ludo-welcome-banner.offrelot-banner .welcome-image img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 220px;
    object-fit: contain;
    border-radius: 0;
}

/* Bandeau Carte Culture de la page tarifs : logo dans la pastille de la banniere caution */
.ludo-caution-banner .caution-icon img {
    display: block;
    max-width: 100%;
    height: auto;
}

.ludo-caution-banner.ludo-culture-banner .caution-icon {
    width: 72px;
    height: auto;
    padding: 6px;
    background: var(--light-card);
}

@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.offrelot-banner .welcome-image img {
        max-height: 160px;
    }

    .ludo-welcome-banner h2,
    .ludo-welcome-banner h3 {
        text-align: center;
    }
}

/* ===========================================================================
   19. Pages catalogue / paniers / retraits / intranet / legales — portage mecanique
   du Divi custom.css le 2026-10-03 (migration des pages a shortcodes wpludo),
   couleurs substituees vers les tokens --ludo-* / --light-*.
   =========================================================================== */
.catalog-intro.hidden {
    display: block !important; /* Override Bootstrap .hidden */
    opacity: 0;
    max-height: 0;
    padding: 0 40px;
    margin-bottom: 0;
    pointer-events: none;
}

.ludo-form-card {
    background: var(--light-card, var(--ludo-white)) !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), var(--ludo-magenta, var(--ludo-secondary)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 30px !important;
}

.ludo-contact-form label {
    font-size: 12px !important;
    color: var(--ludo-text) !important;
    margin-bottom: 8px !important;
    display: block !important;
    font-weight: 500 !important;
}

.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) !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
}

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

.ludo-contact-form input::placeholder,
.ludo-contact-form textarea::placeholder {
    color: var(--ludo-text-subtle) !important;
}

.ludo-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.ludo-contact-form button,
.ludo-btn-submit {
    background: var(--ludo-primary) !important;
    color: var(--ludo-white) !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-contact-form button:hover,
.ludo-btn-submit:hover {
    background: var(--ludo-primary-light, var(--ludo-primary-light)) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 35px rgba(227, 108, 29, 0.35) !important;
}

.ludo-rules-section {
    background: linear-gradient(180deg, var(--light-bg) 0%, var(--ludo-white) 100%) !important;
    padding: 80px 0 !important;
}

.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, var(--ludo-white));
    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);
    margin-bottom: 5px;
}

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

.catalog-intro-horaires {
    background: var(--light-card, var(--ludo-white));
    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);
    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);
    margin-bottom: 5px;
}

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

.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);
    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;
}

.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;
}

.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;
    opacity: 0;
    max-height: 0;
    padding: 0 40px;
    margin-bottom: 0;
    pointer-events: none;
}

.pack-intro-title {
    font-size: var(--ludo-font-title);
    font-weight: 800;
    letter-spacing: -2px;
    text-align: center;
    margin: 0 0 15px 0;
    color: var(--ludo-text-strong);
}

.pack-intro-title span {
    background: linear-gradient(135deg, var(--ludo-primary), var(--ludo-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pack-intro-subtitle {
    font-size: 1.1rem;
    color: var(--ludo-text);
    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;
}

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

.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, var(--ludo-white));
    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);
    margin-bottom: 5px;
}

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

.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), var(--ludo-accent, var(--ludo-secondary)));
    color: var(--ludo-white);
    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: var(--ludo-white);
}

.pack-intro-horaires {
    background: var(--light-card, var(--ludo-white));
    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);
    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);
    margin-bottom: 5px;
}

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

.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);
    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;
}

@media (max-width: 980px) {
    .ludo-form-card {
        padding: 30px !important;
        margin-top: 40px !important;
    }
}

@media (max-width: 767px) {
    .ludo-form-card {
        padding: 25px 20px !important;
        border-radius: 16px !important;
    }
    
    .ludo-form-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .ludo-btn-submit {
        padding: 14px 30px !important;
        font-size: 14px !important;
    }
}

@media (max-width: 768px) {
    .ludo-rules-section {
        padding: 50px 0 !important;
    }
    
    .catalog-intro-title,
    .pack-intro-title {
        font-size: 1.6rem !important;
        letter-spacing: -1px !important;
    }
    
    .ludo-section-subtitle,
    .catalog-intro-subtitle,
    .pack-intro-subtitle {
        font-size: 0.95rem !important;
    }
    
    .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;
    }
    
    .pack-intro {
        padding: 25px 20px;
    }
    
    .pack-intro-grid {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    
    .pack-intro-col-left,
    .pack-intro-col-right {
        display: contents;
    }
    
    .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;
    }
}


/* ===========================================
   20. Modale de contact (liens #popup-contact, ex-popups Divi)
   =========================================== */
.ludo-modal {
    position: fixed;
    inset: 0;
    z-index: 100001;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: rgba(26, 26, 46, 0.55);
    backdrop-filter: blur(3px);
}

.ludo-modal.is-open {
    display: flex;
}

body.ludo-modal-open {
    overflow: hidden;
}

.ludo-modal-dialog {
    position: relative;
    width: 100%;
    max-width: 720px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: var(--light-card);
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    padding: 28px;
    animation: ludo-modal-in 0.25s ease-out;
}

@keyframes ludo-modal-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ludo-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: var(--light-bg);
    color: var(--ludo-text-dark);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    transition: background 0.2s, color 0.2s;
}

.ludo-modal-close:hover {
    background: var(--ludo-primary);
    color: var(--ludo-white);
}

/* La section deplacee dans la modale perd sa mise en page pleine largeur et son fond */
.ludo-modal .ludo-modal-source,
.ludo-modal .ludo-modal-source.alignfull {
    margin: 0;
    width: 100%;
    max-width: 100%;
    background: transparent;
}

.ludo-modal .kb-row-layout-wrap > .kt-row-column-wrap {
    padding: 0 !important;
    max-width: 100% !important;
}

.ludo-modal .ludo-modal-title {
    margin: 0 0 18px;
    padding-right: 48px;
    font-size: var(--ludo-font-xl);
    font-weight: 800;
    color: var(--ludo-text-strong);
}

.ludo-modal .ludo-modal-dialog .ludo-form-card,
.ludo-modal .ludo-modal-dialog .wp-block-kadence-advanced-form.ludo-form-card {
    box-shadow: none !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

@media (max-width: 767px) {
    .ludo-modal { padding: 12px; }
    .ludo-modal-dialog { padding: 20px 16px; border-radius: 16px; max-height: calc(100vh - 24px); }
}

/* Reservoir invisible pour les modales : la rangee n'est jamais affichee inline, son contenu est deplace dans la modale */
.ludo-modal-only {
    display: none !important;
}

.ludo-modal .ludo-hours-card.ludo-modal-source {
    margin: 0;
    box-shadow: none;
}

/* ===========================================
   21. Titres de page — alignement sur la prod (Divi custom.css)
   h1 : clamp(2.5rem, 5vw, 4rem), 1.8rem sur mobile ; intros catalogue/pack : 1.6rem sur mobile
   =========================================== */
.ludo-page-header h1,
.catalog-intro-title,
.pack-intro-title,
.ludo-about-hero h1 {
    line-height: 1.15 !important;
}

@media (max-width: 768px) {
    .ludo-page-header h1,
    .ludo-about-hero h1 {
        font-size: 1.8rem !important;
    }

    .catalog-intro-title,
    .pack-intro-title {
        font-size: 1.6rem !important;
    }
}

/* ===========================================
   22. Espacement entre sections — alignement sur la prod
   En Divi, plusieurs lignes partageaient une seule section (un seul padding 80px).
   La migration a donne une rowlayout par ligne, chacune avec la classe de section :
   le padding se cumulait (80 + 80) entre deux lignes d'une meme section.
   =========================================== */
.wp-block-kadence-rowlayout.ludo-section-gray + .wp-block-kadence-rowlayout.ludo-section-gray,
.wp-block-kadence-rowlayout.ludo-rules-section + .wp-block-kadence-rowlayout.ludo-rules-section,
.wp-block-kadence-rowlayout.ludo-section-light + .wp-block-kadence-rowlayout.ludo-section-light,
.wp-block-kadence-rowlayout.ludo-section-gray + .wp-block-kadence-rowlayout.ludo-section-light,
.wp-block-kadence-rowlayout.ludo-section-light + .wp-block-kadence-rowlayout.ludo-section-gray {
    padding-top: 0 !important;
}

/* En-tete de page : la prod avait 20px au-dessus du titre (sous un header fixe), pas 70px */
.ludo-page-header {
    padding-top: clamp(20px, 2.5vw, 36px) !important;
}

/* Sections "regles" (catalogue, paniers, La Ludo donne...) : 20px en haut comme en prod, 80px en bas */
.ludo-rules-section {
    padding-top: 24px !important;
}

/* ===========================================
   23. Carte « Charte du Super Emprunteur » (page tarifs)
   En Divi la classe ludo-charte-card etait sur le module ; elle avait disparu a la migration.
   =========================================== */
.ludo-charte-card {
    background: var(--light-card) !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, var(--ludo-primary), var(--ludo-secondary));
}

@media (max-width: 768px) {
    .ludo-charte-card {
        padding: 1.5rem !important;
    }
}