/*
Theme Name: TutorStarter Child
Theme URI: https://example.com/
Description: Child theme for TutorStarter.
Author: Arfaoui Marwen
Author URI: https://marwen.dev
Template: tutorstarter
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ouralearn-child
*/

/* Import parent styles if needed */
/* @import url('../tutorstarter/style.css'); */

.btn-outline:hover {
    background-color: var(--primary-color);
    color: white;
}

/* Section Styles */
section {
    padding: 4rem 0;
    position: relative;
}

section h2 {
    text-align: center;
    margin-bottom: 3rem;
    font-size: 2.5rem;
    color: var(--text-color);
    position: relative;
}

section h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: var(--primary-color);
    border-radius: 2px;
}

/* Hero Section */
.hero-section {
    background-color: var(--background-color-light);
    padding: 6rem 0;
    overflow: hidden;
}

.hero-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
}

.hero-content {
    flex: 1;
}

.hero-content h1 {
    font-size: clamp(1.6rem, 4.2vw, 3rem);
    margin-bottom: 1rem;
    line-height: 1.15;
    color: var(--text-color);
}

.hero-subtitle {
    font-size: clamp(0.95rem, 2.6vw, 1.25rem);
    margin-bottom: 1.5rem;
    color: var(--text-color-light);
    max-width: 640px;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Premium SaaS-style hero primary button (scoped to hero to avoid global changes) */
.hero-section .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 2.1rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1.05rem;
    color: #ffffff;
    /* cooler, more premium blue gradient */
    background: linear-gradient(180deg, #1e3a8a 0%, #2f80ed 100%);
    border: 1px solid rgba(255,255,255,0.14);
    /* cool-toned soft shadow for depth (no warm/brown tint) */
    box-shadow: 0 10px 30px rgba(16,40,90,0.12);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: transform 220ms cubic-bezier(0.4,0,0.2,1), box-shadow 220ms cubic-bezier(0.4,0,0.2,1), opacity 220ms cubic-bezier(0.4,0,0.2,1), background-position 400ms cubic-bezier(0.4,0,0.2,1);
    cursor: pointer;
    text-decoration: none;
    will-change: transform, box-shadow, opacity;
    /* initial state for entry animation */
    opacity: 0;
    transform: translateY(8px);
    position: relative;
    overflow: hidden;
    background-size: 200% 100%;
    background-position: 0% 50%;
}

/* fade-in + gentle rise on load */
@keyframes heroBtnFadeInRise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hero-section .btn-primary {
    animation: heroBtnFadeInRise 600ms cubic-bezier(0.4,0,0.2,1) 1 both;
    animation-delay: 240ms;
}

/* Hover microinteraction: soft ambient glow + slight scale up */
.hero-section .btn-primary:hover {
    transform: translateY(-2px) scale(1.04);
    /* stronger cool ambient glow on hover, still subtle */
    box-shadow: 0 28px 60px rgba(31,80,190,0.12), 0 6px 18px rgba(0,0,0,0.06);
    background-position: 100% 50%;
}

/* Active (press) tactile feedback */
.hero-section .btn-primary:active {
    transform: translateY(0) scale(0.97);
    transition-duration: 120ms;
}

/* subtle shimmer using pseudo-element */
.hero-section .btn-primary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -40%;
    width: 60%;
    height: 100%;
    /* cool-tinted shimmer (very subtle cyan highlight) */
    background: linear-gradient(90deg, rgba(255,255,255,0.12) 0%, rgba(186,225,255,0.06) 40%, rgba(255,255,255,0.14) 60%, rgba(186,225,255,0.04) 100%);
    transform: skewX(-18deg) translateX(-120%);
    transition: transform 600ms cubic-bezier(0.4,0,0.2,1), opacity 300ms ease;
    opacity: 0;
    pointer-events: none;
}

.hero-section .btn-primary:hover::after {
    transform: skewX(-18deg) translateX(120%);
    opacity: 1;
}

/* focus accessibility */
.hero-section .btn-primary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 6px rgba(31,80,190,0.12), 0 18px 40px rgba(31,80,190,0.08);
}

@media (prefers-reduced-motion: reduce) {
    .hero-section .btn-primary,
    .hero-section .btn-primary::after {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
    .hero-section .btn-primary,
    .hero-section .btn-primary:hover,
    .hero-section .btn-primary:active {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

/* Hero secondary button: tech-glass / subtle complement to primary */
.hero-section .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.6rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    color: rgba(20,30,50,0.95);
    /* gentle translucent surface (20-30% opacity) to feel glassy */
    background: rgba(255,255,255,0.22);
    border: 1px solid rgba(47,128,237,0.6); /* same hue as primary but dimmer */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 300ms cubic-bezier(0.4,0,0.2,1);
    cursor: pointer;
    text-decoration: none;
    box-shadow: none; /* keep it flat and elegant */
    position: relative;
}

/* Hover: subtle blue wash + soft ambient glow */
.hero-section .btn-secondary:hover {
    background: rgba(47,128,237,0.08); /* light transparent blue wash */
    border-color: rgba(47,128,237,0.85);
    box-shadow: 0 10px 30px rgba(47,128,237,0.06);
    transform: translateY(-2px);
}

.hero-section .btn-secondary:active {
    transform: translateY(0) scale(0.97);
    transition-duration: 120ms;
}

.hero-section .btn-secondary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 6px rgba(47,128,237,0.10);
}

@media (prefers-reduced-motion: reduce) {
    .hero-section .btn-secondary,
    .hero-section .btn-secondary:hover,
    .hero-section .btn-secondary:active {
        transition: none !important;
        transform: none !important;
    }
}

/* Reusable CTA component: same look & behavior as .hero-section .btn-primary
   Use this class when you need the hero primary visual outside of a .hero-section.
*/

/* Mobile: increase header logo size without impacting layout or other header elements */
@media (max-width: 767px) {
    .site-header .header-container .header-logo .custom-logo {
        max-width: 180px !important; /* larger but constrained to avoid layout break */
        width: auto !important;
        height: auto !important;
        display: block;
    }
}
.cta-hero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 2.1rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1.05rem;
    color: #ffffff;
    background: linear-gradient(180deg, #1e3a8a 0%, #2f80ed 100%);
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 10px 30px rgba(16,40,90,0.12);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: transform 220ms cubic-bezier(0.4,0,0.2,1), box-shadow 220ms cubic-bezier(0.4,0,0.2,1), opacity 220ms cubic-bezier(0.4,0,0.2,1), background-position 400ms cubic-bezier(0.4,0,0.2,1);
    cursor: pointer;
    text-decoration: none;
    will-change: transform, box-shadow, opacity;
    /* keep initial visible state (no forced translate) so it works outside hero animations */
    opacity: 1;
    transform: none;
    position: relative;
    overflow: hidden;
    background-size: 200% 100%;
    background-position: 0% 50%;
}

/* reuse the same entry animation to keep consistent motion when placed in areas where animation is desired */
.cta-hero {
    animation: heroBtnFadeInRise 600ms cubic-bezier(0.4,0,0.2,1) 1 both;
}

.cta-hero:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 28px 60px rgba(31,80,190,0.12), 0 6px 18px rgba(0,0,0,0.06);
    background-position: 100% 50%;
}

.cta-hero:active {
    transform: translateY(0) scale(0.97);
    transition-duration: 120ms;
}

.cta-hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: -40%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255,255,255,0.12) 0%, rgba(186,225,255,0.06) 40%, rgba(255,255,255,0.14) 60%, rgba(186,225,255,0.04) 100%);
    transform: skewX(-18deg) translateX(-120%);
    transition: transform 600ms cubic-bezier(0.4,0,0.2,1), opacity 300ms ease;
    opacity: 0;
    pointer-events: none;
}

.cta-hero:hover::after {
    transform: skewX(-18deg) translateX(120%);
    opacity: 1;
}

.cta-hero:focus-visible {
    outline: none;
    box-shadow: 0 0 0 6px rgba(31,80,190,0.12), 0 18px 40px rgba(31,80,190,0.08);
}

@media (prefers-reduced-motion: reduce) {
    .cta-hero,
    .cta-hero::after {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

/* Pill modifier: make CTA fully rounded (oval) like final CTA on front-page */
.cta-hero--pill {
    border-radius: 9999px !important;
    min-width: 220px; /* match final-cta sizing */
    padding: 12px 24px !important;
}

.hero-image {
    flex: 1;
    max-width: 500px;
    /* slight left shift for better visual balance; non-destructive (doesn't affect layout flow) */
    transform: translateX(-40px);
    transition: transform 0.25s ease;
}

.hero-image img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

@media (max-width: 992px) {
    .hero-container {
        flex-direction: column;
        text-align: center;
    }
    
    .hero-content {
        margin-bottom: 2rem;
    }
    
    .hero-content h1 {
        font-size: clamp(1.5rem, 6vw, 2.5rem);
    }
    
    /* cancel left shift on smaller screens so image centers with content */
    .hero-image {
        transform: translateX(0);
    }
}

@media (max-width: 420px) {
    .hero-content h1 {
        font-size: clamp(1.4rem, 7.5vw, 1.9rem);
        line-height: 1.12;
    }

    .hero-subtitle {
        font-size: clamp(0.9rem, 3.5vw, 1rem);
        margin-bottom: 1rem;
        padding: 0 12px;
    }
}

@media (max-width: 576px) {
    .hero-content h1 {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
    
    .btn {
        padding: 0.6rem 1.2rem;
        font-size: 0.9rem;
    }
}
/* Mobile menu slide-in/out behavior (hidden by default, visible when .is-open) */
@media (max-width: 992px) {
    /* Overlay using html class so we don't need to inject DOM elements */
    html.mobile-menu-open::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.42);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        opacity: 0;
        visibility: hidden;
        transition: opacity 320ms ease, visibility 320ms ease;
        z-index: 1400; /* sits below the menu (which is 1500) */
        pointer-events: none;
    }

    

    /* When menu is logically open (script adds html.mobile-menu-open), show overlay */
    html.mobile-menu-open::before {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* Mobile menu container (slide-in from the right)
       Keep this scoped to mobile-only so desktop header/layout is unaffected */
    #mobile-menu,
    .mobile-menu {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: 84%;
        max-width: 420px;
        background: #ffffff;
        box-shadow: -12px 0 36px rgba(0,0,0,0.18);
        transform: translateX(100%);
        transition: transform 360ms cubic-bezier(0.2, 0.9, 0.2, 1), box-shadow 360ms ease, opacity 360ms ease;
        z-index: 1500;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 1.25rem 1.25rem 2.5rem 1.25rem;
        will-change: transform;
        opacity: 0.98;
        pointer-events: none; /* prevents accidental clicks when off-screen */
    }

    /* visible state */
    #mobile-menu.is-open,
    .mobile-menu.is-open {
        transform: translateX(0);
        pointer-events: auto;
    }

    /* Close button (if injected by JS) or if present in markup */
    #close-menu,
    .mobile-close {
        position: absolute;
        top: 12px;
        right: 12px;
        background: transparent;
        border: none;
        font-size: 1.75rem;
        line-height: 1;
        padding: 6px 8px;
        cursor: pointer;
        color: #111827;
        z-index: 1600;
    }

    /* Ensure menu content spacing so close button doesn't overlap links */
    #mobile-menu .mobile-nav,
    .mobile-menu .mobile-nav {
        padding-top: 3.25rem; /* space for close button */
    }

    /* Prevent body scroll when menu open (applied via html.mobile-menu-open) */
    html.mobile-menu-open {
        overflow: hidden;
    }
}

/* Slight shift of hero text to the right on wide screens for better balance.
   Non-destructive: uses transform so layout flow isn't changed; reset on small screens by existing rules. */
@media (min-width: 993px) {
    .hero-content {
        transform: translateX(30px);
        transition: transform 0.25s ease;
    }

    /* Slightly reduce the main title on very large screens to improve spacing */
    .hero-content h1 {
        font-size: 2.8rem;
    }
}

/* Fix: ensure main nav sub-menus appear below their parent (not offset to the left by parent theme)
     This override is scoped to the child theme header nav (.site-header .header-container .nav-menu)
     and only affects desktop (min-width:992px) so mobile off-canvas is unchanged. */
@media (min-width: 992px) {
    .site-header .header-container .nav-menu .menu-item {
        position: relative; /* establish containing block for absolute submenu */
    }

        .site-header .header-container .nav-menu .menu-item > .sub-menu {
            position: absolute !important;
            top: calc(100% + 6px) !important; /* below the parent item */
            left: 50% !important; /* center under parent */
            transform: translateX(-50%) !important;
        opacity: 0;
        visibility: hidden;
        transition: opacity .15s ease, visibility .15s ease, transform .15s ease;
        min-width: 180px;
        z-index: 1200;
        box-shadow: 0 6px 18px rgba(16,40,90,0.08);
        background: #fff;
        border-radius: 8px;
        padding: 8px 0;
    }

    .site-header .header-container .nav-menu .menu-item:hover > .sub-menu,
    .site-header .header-container .nav-menu .menu-item:focus-within > .sub-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* Keep nested sub-menus opening to the right of their parent sub-menu */
    .site-header .header-container .nav-menu .menu-item .sub-menu .menu-item > .sub-menu {
        left: calc(100% + 12px) !important;
        top: 0 !important;
    }
}

/* Key Numbers Section */
.key-numbers-section {
    background-color: white;
}

.key-numbers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    text-align: center;
}

.key-number-item {
    padding: 2rem;
    border-radius: var(--border-radius);
    background-color: var(--background-color-light);
    transition: var(--transition);
}

.key-number-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--box-shadow);
}

.key-number-item h3 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    color: var(--primary-color);
}

.key-number-item p {
    font-size: 1.1rem;
    color: var(--text-color);
}

/* Pourquoi OURALEARN Section */
.pourquoi-ouralearn-section {
    background-color: var(--background-color-alt);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.feature-card {
    background-color: white;
    padding: 2rem;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    text-align: center;
    transition: var(--transition);
}

/* Make card a column flex container so paragraph can stretch to match heights */
.feature-card {
    display: flex;
    flex-direction: column;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--box-shadow);
}


.feature-icon {
    width: 60px;
    height: 60px;
    background-color: var(--background-color-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 1.5rem;
    color: var(--primary-color);
}


    /* ------------------------------------------------------------------
       Testimonials mobile enhancements: scroll-snap + glassmorphism
       - mobile (<768px): native horizontal scroll, 85-90% card width, scroll-snap, hide scrollbar
       - preserve desktop styles above (no overrides for >=768px)
    ------------------------------------------------------------------ */
    @media (max-width: 767px) {
        .testimonials-inner { max-width: 100%; padding-left: 0.5rem; padding-right: 0.5rem; }

        .testimonials-slider {
            display: block; /* allow inline-block children */
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            white-space: nowrap; /* keep inline-block cards on one row for horizontal swipe */
            touch-action: pan-x; /* favor horizontal panning inside the slider on touch devices */
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            padding-bottom: 12px; /* allow finger space */
            margin-left: -6px; margin-right: -6px; /* visual edge padding compensation */
        }

        /* hide scrollbar visually */
        .testimonials-slider::-webkit-scrollbar { height: 8px; display: none; }
        .testimonials-slider { scrollbar-width: none; -ms-overflow-style: none; }

        .testimonials-slider .testimonial-card {
            display: inline-block;
            vertical-align: top;
            width: 85%; /* show 85% of viewport + preview of next card */
            max-width: 85%;
            margin-right: 12px;
            scroll-snap-align: center;
            border-radius: 1.5rem !important;
            background: rgba(255,255,255,0.75) !important;
            backdrop-filter: blur(8px) !important;
            -webkit-backdrop-filter: blur(8px) !important;
            box-shadow: 0 12px 30px rgba(8,15,30,0.08) !important;
            padding: 18px !important;
            box-sizing: border-box !important;
            text-align: center !important;
            transition: transform 220ms cubic-bezier(.2,.9,.2,1), box-shadow 220ms ease !important;
        }

        .testimonials-slider .testimonial-card:last-child { margin-right: 22px; }

        .testimonial-card__media img { aspect-ratio: 4/3; height: auto; max-height: 220px; object-fit: cover; border-radius: 12px; }

        .testimonial-content p { text-align: center !important; margin: 0 0 12px 0 !important; }
        .testimonial-author { text-align: center !important; }

        /* Ensure slider is accessible when JS disabled: allow vertical stacking fallback
           by letting the cards wrap naturally (they are inline-block so they fall under each other). */
    }

    /* Performance: use will-change where animations occur (desktop JS uses transform) */
    .testimonials-slider { will-change: transform; }

    /* Respect reduced motion at global level for testimonials */
    @media (prefers-reduced-motion: reduce) {
        .testimonials-slider, .testimonials-slider .testimonial-card {
            transition: none !important;
            scroll-behavior: auto !important;
            will-change: auto !important;
        }
    }
.feature-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--text-color);
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
}

/* Ensure the 4th feature title fits into two lines (desktop) */
.features-grid .feature-card:nth-child(1) h3,
.features-grid .feature-card:nth-child(2) h3,
.features-grid .feature-card:nth-child(3) h3,
.features-grid .feature-card:nth-child(4) h3 {
    max-width: 300px; /* tuned to force two-line wrapping on desktop */
    margin-left: auto;
    margin-right: auto;
    white-space: normal;
    font-size: 1.15rem; /* slightly smaller so text fits on two lines */
    line-height: 1.2;
}

@media (max-width: 992px) {
    .features-grid .feature-card:nth-child(4) h3 {
        max-width: none;
    }
}

.feature-card p {
    color: var(--text-color-light);
    margin: 0 auto;
    max-width: 360px;
    text-align: center;
    line-height: 1.8;
}

/* Paragraph behavior: balanced flow with hyphenation and consistent height
   Use left alignment on desktop for natural spacing; center on very small screens */
.feature-card p {
    /* keep paragraph flexible so cards align vertically */
    flex: 1 1 auto;
    display: block;
    margin: 0 auto;
    max-width: 360px;
    text-align: left;
    line-height: 1.8;
    /* hyphenation and word-wrapping to avoid large gaps when justified */
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    word-break: break-word;
}

@media (max-width: 992px) {
    /* keep centered on tablet/mobile for visual balance */
    .feature-card p {
        text-align: center;
        max-width: none;
    }
}

/* Nos Programmes Section */
.nos-programmes-section {
    background-color: white;
}

.programs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.program-card {
    background-color: var(--background-color-light);
    padding: 2rem;
    border-radius: var(--border-radius);
    text-align: center;
    transition: var(--transition);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.program-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--box-shadow);
}

.program-icon {
    width: 60px;
    height: 60px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 1.5rem;
    color: var(--primary-color);
}

.program-card h3 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    color: var(--text-color);
}

.program-card p {
    color: var(--text-color-light);
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

/* Notre Méthodologie Section */
.notre-methode-section {
    background-color: var(--background-color-alt);
}

.methode-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.methode-item {
    background-color: white;
    padding: 2rem;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}

.methode-icon {
    width: 50px;
    height: 50px;
    background-color: var(--background-color-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--primary-color);
    flex-shrink: 0;
}

.methode-item h3 {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    color: var(--text-color);
}

.methode-item p {
    color: var(--text-color-light);
    margin: 0;
}

/* Ensure title and paragraph stack vertically inside methode items */
.methode-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Prevent long paragraphs from overlapping title on narrow containers */
.methode-content h3 {
    margin: 0 0 0.25rem 0;
    line-height: 1.15;
}

.methode-content p {
    margin: 0;
    color: var(--text-color-light);
}

@media (max-width: 768px) {
    .methode-item {
        align-items: center;
        text-align: center;
        flex-direction: column;
    }

    .methode-icon {
        margin-bottom: 1rem;
    }
}

/* Testimonials Section */
.testimonials-section {
    background-color: white;
    overflow: hidden;
}

.testimonials-slider {
    display: flex;
    /* hide overflowing parts so slider never creates horizontal page scroll */
    overflow: hidden;
    position: relative;
    scroll-behavior: smooth;
    /* use gap instead of per-card margin to simplify width math */
    gap: 2rem; /* keeps original visual spacing between cards */
    width: 100%;
    box-sizing: border-box;
    align-items: stretch; /* ensure equal height cards */
}

/* Card visual styles remain unchanged — we only adjust sizing/box-model */
.testimonial-card {
    background-color: var(--background-color-light);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    box-sizing: border-box; /* ensure padding/border are included in width calculations */
    margin: 0; /* gap on container handles spacing */
    min-width: 0 !important; /* allow flex-basis to shrink below content width when needed */
}

/* ------------------------------------------------------------------
   Testimonials slider responsive layout fixes
   - Goal: show exactly 4 cards (>=1024px), 3 cards (>=768px), and
     1 or ~1.2 cards (<768px) while preserving all original card
     visual styles (padding, shadows, fonts, images, margins).
   - We override only sizing (flex-basis) and min-width to make the
     slider responsive; JS autoplay remains unchanged and uses the
     computed card width at runtime.
   ------------------------------------------------------------------ */

/* Ensure no horizontal page scroll from this component */
.testimonials-section, .testimonials-slider { overflow: hidden; }

/* Make cards size via flex-basis (do not change internal padding/margins) */
.testimonials-slider {
    gap: 0; /* we keep using card margin-right for spacing to avoid altering card internals */
}

/* Desktop: 4 full cards */
@media (min-width: 1024px) {
    .testimonial-card {
        /* 4 cards -> 3 gaps of 2rem between them; subtract gaps from 100% */
        flex: 0 0 calc((100% - (3 * 2rem)) / 4);
        max-width: calc((100% - (3 * 2rem)) / 4);
        min-width: 0 !important; /* allow flex-basis to control width */
    }
}

/* Tablet: 3 full cards */
@media (min-width: 768px) and (max-width: 1023px) {
    .testimonial-card {
        /* 3 cards -> 2 gaps of 2rem */
        flex: 0 0 calc((100% - (2 * 2rem)) / 3);
        max-width: calc((100% - (2 * 2rem)) / 3);
        min-width: 0 !important;
    }
}

/* Mobile: show ~1.0 - 1.2 cards to indicate continuation */
@media (max-width: 767px) {
    .testimonial-card {
        /* Use 1.2 cards visible: width = 100% / 1.2 ≈ 83.333% */
        flex: 0 0 calc(100% / 1.2);
        max-width: calc(100% / 1.2);
        margin-right: 1rem; /* slightly smaller gap on mobile */
        min-width: 0 !important;
    }

    /* Ensure slider container hides overflow and doesn't cause page scroll */
    .testimonials-section, .testimonials-slider {
        overflow: hidden !important;
    }
}

/* On resize the JS will recalc widths; no JS changes required. */

.testimonial-card:hover {
    transform: scale(1.03);
    box-shadow: var(--box-shadow);
}

.testimonial-card img {
    /* Ensure images are fully visible (no cropping). Use object-fit: contain
       so the full image is shown inside the card area while preserving aspect
       ratio. This prevents any part of the image from being cropped. */
    width: 100%;
    height: 250px;
    object-fit: contain; /* show full image without cropping */
    object-position: center center;
    background-color: transparent; /* no visual change to card bg */
    display: block;
}

/* Ensure text/content inside cards wraps and aligns predictably */
.testimonial-content {
    box-sizing: border-box;
    padding: 1rem; /* preserved visual padding if present elsewhere */
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Text inside testimonial cards: justified, hyphenation and robust wrapping
   ensures even-looking paragraph blocks across breakpoints. These rules
   follow the client's request for an even/justified appearance. */
.testimonial-content p,
.testimonial-card p,
.testimonial-author p,
.testimonial-content .testimonial-author {
    /* Keep justified text and hyphenation for balanced paragraphs. */
    text-align: justify !important;
    text-justify: auto !important; /* improved spacing on narrow lines */
    hyphens: auto !important;
    /* Use normal word-break to avoid aggressive breaks that create gaps */
    word-break: normal !important;
    box-sizing: border-box !important;
}

/* Global safety: prevent horizontal page scrolling from any component.
   max-width prevents oversized elements from pushing viewport wider. */
html, body {
    max-width: 100%;
    overflow-x: hidden; /* ensures no horizontal scrolling */
}

/* Ensure box-sizing for all elements inside the histoires/testimonials
   section so padding/borders do not produce overflow on small screens. */
.histoires-section *,
.testimonials-section * {
    box-sizing: border-box;
}

/* Prevent the entire section from producing horizontal scroll on the page */
.testimonials-section {
    overflow-x: hidden;
}

/* ------------------------------------------------------------------
   Responsive sizing: compute card widths precisely using flex-basis so
   a consistent number of full cards is visible per breakpoint.
   We preserve the 2rem gap used between cards (desktop/tablet) and
   use a smaller gap on mobile below.
   ------------------------------------------------------------------ */

/* Desktop: 4 full cards (3 gaps of 2rem) */
@media (min-width: 1024px) {
    .testimonials-slider { gap: 2rem; }
    .testimonial-card {
        flex: 0 0 calc((100% - (3 * 2rem)) / 4);
        max-width: calc((100% - (3 * 2rem)) / 4);
    }
}

/* Tablet: 3 full cards (2 gaps of 2rem) */
@media (min-width: 768px) and (max-width: 1023px) {
    .testimonials-slider { gap: 2rem; }
    .testimonial-card {
        flex: 0 0 calc((100% - (2 * 2rem)) / 3);
        max-width: calc((100% - (2 * 2rem)) / 3);
    }
}

/* Mobile: show 1 full card + ~10% preview of the next card
   Use gap of 1rem to match compact spacing and avoid overflow */
@media (max-width: 767px) {
    .testimonials-slider { gap: 1rem; }
    .testimonial-card {
        /* 1.11 ~ 90% width -> ~10% preview */
        flex: 0 0 calc(100% / 1.11);
        max-width: calc(100% / 1.11);
    }
}

.testimonial-content p {
    /* Use normal text style for testimonials for better readability */
    font-style: normal;
    margin-bottom: 1.5rem;
    color: var(--text-color);
    font-size: 1.05rem;
    line-height: 1.6;
}

.testimonial-author {
    /* Align author info with the testimonial text for consistency */
    text-align: left;
    margin-top: 1rem;
}

.testimonial-author h4 {
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
    color: var(--primary-color);
    text-align: left;
}

.testimonial-author p {
    font-size: 0.9rem;
    color: var(--text-color-light);
    margin: 0;
}

.testimonial-author p {
    font-size: 0.9rem;
    color: var(--text-color-light);
    margin: 0;
}

/* FAQ Section */
.faq-section {
    background-color: var(--background-color-alt);
}

.faq-accordion {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    margin-bottom: 1rem;
    border-radius: var(--border-radius);
    overflow: hidden;
    background-color: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.faq-question {
    width: 100%;
    padding: 1.25rem;
    background-color: white;
    border: none;
    text-align: left;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: var(--transition);
}

.faq-question:hover {
    background-color: var(--background-color-light);
}

.faq-question.active {
    background-color: var(--background-color-light);
    color: var(--primary-color);
}

.faq-question i {
    transition: var(--transition);
}

.faq-question.active i {
    transform: rotate(45deg);
}

/* Header logo: responsive CSS-only sizing
   - Desktop: clamp between 160px and 200px (chooses a natural value depending on viewport)
   - Mobile: capped at 120px for small viewports
   - Keep intrinsic aspect ratio (height:auto) and use object-fit for safety
   Note: for true retina/sharpness provide a 2x image and use srcset on the <img> tag. */
.site-header .site-logo .custom-logo,
.site-header .header-logo .custom-logo {
    display: block;
    max-width: clamp(160px, 14vw, 200px); /* natural responsive width between 160px and 200px */
    width: auto;    /* allow intrinsic size to scale down/up within max-width */
    height: auto;   /* preserve aspect ratio */
    object-fit: contain; /* avoid cropping if container constraints change */
    margin: 0;
}

/* Mobile override: tighter cap for small screens */
@media (max-width: 576px) {
    .site-header .site-logo .custom-logo,
    .site-header .header-logo .custom-logo {
        max-width: 120px;
    }
}

/* Ensure header branding containers keep the logo vertically centered */
.site-header .header-container,
.site-header .site-branding {
    display: flex;
    align-items: center;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 0 1.25rem;
}

.faq-answer p {
    padding: 1.25rem 0;
    margin: 0;
    color: var(--text-color-light);
}

/* Final CTA Section */
.final-cta-section {
    background-color: var(--primary-color);
    color: white;
    position: relative;
    overflow: hidden;
    padding: 5rem 0;
}

.final-cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('<?php echo get_stylesheet_directory_uri(); ?>/assets/images/pexels-8353800.jpg');
    background-size: cover;
    background-position: center;
    opacity: 0.2;
    z-index: 0;
}

.final-cta-section > * {
    position: relative;
    z-index: 1;
}

.final-cta-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

@media (min-width: 1024px) {
    .final-cta-content {
        /* keep centered — no horizontal shift */
        text-align: center;
        transform: none;
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }

    .final-cta-content h2 {
        text-align: center;
        /* try to keep headline on one line on wide screens */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        /* slightly smaller to help fit on one line */
        font-size: clamp(1.6rem, 2.8vw, 2rem);
    }

    .final-cta-content .btn-primary {
        transform: translateX(0);
    }
}

@media (min-width: 1400px) {
    .final-cta-content {
        max-width: 1400px;
    }

    .final-cta-content h2 {
        font-size: clamp(1.7rem, 2.6vw, 2rem);
        white-space: nowrap;
    }
}

.final-cta-content h2 {
    color: white;
    margin-bottom: 2rem;
    /* Reduced base size so large screens don't force ellipsis */
    font-size: clamp(1.6rem, 2.8vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.final-cta-content h2::after {
    background-color: white;
}

.final-cta-content .btn-primary {
    /* Modern pill CTA */
    display: inline-block;
    margin-top: 1.25rem;
    padding: 12px 24px;
    min-width: 220px;
    background: linear-gradient(180deg, #ffffff 0%, #f0f5ff 100%);
    color: #2563eb;
    font-weight: 600;
    font-size: 1.05rem;
    border: 1px solid rgba(37,99,235,0.18);
    border-radius: 9999px;
    box-shadow: 0 8px 20px rgba(37,99,235,0.12);
    text-align: center;
    text-decoration: none;
    transition: transform 0.3s cubic-bezier(.2,.8,.2,1), box-shadow 0.3s ease, background 0.3s ease;
    will-change: transform, box-shadow;
}

.final-cta-content .btn-primary:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 18px 40px rgba(37,99,235,0.22);
    background: linear-gradient(180deg, #ffffff 0%, #e8f0ff 100%);
}

@media (max-width: 768px) {
    .final-cta-content .btn-primary {
        transform: translateX(0);
        margin-top: 1rem;
    }
}

/* Mobile-specific button size fixes: reduce padding/min-width on small devices */
@media (max-width: 480px) {
    .final-cta-content .btn-primary {
        min-width: 0; /* remove large fixed min width */
        padding: 10px 18px;
        font-size: 0.95rem;
        box-shadow: 0 6px 16px rgba(37,99,235,0.10);
        max-width: 84%;
        display: inline-block;
        line-height: 1.2;
    }
}

@media (max-width: 360px) {
    .final-cta-content .btn-primary {
        padding: 9px 14px;
        font-size: 0.9rem;
        max-width: 90%;
    }
}

/* Responsive adjustments */
@media (max-width: 992px) {
    section {
        padding: 3rem 0;
    }
    
    section h2 {
        font-size: 2rem;
    }

    .final-cta-content h2 {
        font-size: clamp(1.5rem, 6vw, 2rem); /* between 24px and 32px on small screens */
        text-align: center;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 1rem;
    }
    
    section {
        padding: 2.5rem 0;
    }
    
    section h2 {
        font-size: 1.75rem;
        margin-bottom: 2rem;
    }

    .final-cta-content h2 {
        font-size: clamp(1.5rem, 6vw, 2rem);
        text-align: center;
    }
    
    .hero-section {
        padding: 4rem 0;
    }
    
    .hero-content h1 {
        font-size: 2.25rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
    
    .methode-grid {
        grid-template-columns: 1fr;
    }
    
    .methode-item {
        flex-direction: column;
        text-align: center;
    }
    
    .testimonial-card {
        min-width: 250px;
    }
}

/* Slightly nudge hero buttons to the right on tablet/mobile for better visual balance */
@media (max-width: 768px) {
    .hero-buttons {
        transform: translateX(12px);
    }
}

@media (max-width: 576px) {
    .hero-buttons {
        transform: translateX(16px);
    }
}

@media (max-width: 576px) {
    section {
        padding: 2rem 0;
    }
    
    section h2 {
        font-size: 1.5rem;
    }

    .final-cta-content h2 {
        font-size: clamp(1.5rem, 6vw, 2rem);
        text-align: center;
    }
    
    .hero-content h1 {
        font-size: 1.75rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    .btn {
        padding: 0.6rem 1.2rem;
        font-size: 0.9rem;
    }
    
    .final-cta-section {
        padding: 3rem 0;
    }
}

/* Sticky CTA Styles */
.sticky-cta {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 1000;
}

.cta-button {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background-color: var(--primary-color);
    color: white;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
    transition: all 0.3s ease;
    animation: pulse 2s infinite;
}

.cta-button:hover {
    background-color: var(--primary-color-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
}

@keyframes pulse {
    0% {
        box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
    }
    50% {
        box-shadow: 0 4px 15px rgba(37, 99, 235, 0.5);
    }
    100% {
        box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
    }
}

/* ======== FOOTER STYLING (OURALEARN) ======== */

.site-footer {
  background-color: #0b0b0c;
  color: #e5e5e5;
  font-family: 'Inter', sans-serif;
  padding-top: 60px;
  position: relative;
  overflow: hidden;
}

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

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
  align-items: flex-start;
}

.footer-widget h4.widget-title {
  color: #fff;
  font-size: 1.2rem;
  margin-bottom: 18px;
  position: relative;
}

.footer-widget h4.widget-title::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 40px;
  height: 2px;
  background: #e0b973;
  border-radius: 2px;
}

.footer-widget ul.footer-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-widget ul.footer-menu li {
  margin-bottom: 10px;
}

.footer-widget ul.footer-menu li a {
  color: #ccc;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-widget ul.footer-menu li a:hover {
  color: #fff;
}

.footer-brand .custom-logo {
  max-width: 150px;
  margin-bottom: 15px;
}

.footer-tagline {
  font-size: 0.95rem;
  color: #aaa;
  margin-bottom: 20px;
}

.footer-contact-info {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.95rem;
}

.footer-contact-info li {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.footer-contact-info i {
  color: #e0b973;
  margin-right: 10px;
  width: 18px;
}

.footer-socials {
  margin-top: 20px;
}

.footer-socials a {
  display: inline-block;
  color: #e0b973;
  font-size: 1.1rem;
  margin-right: 10px;
  transition: transform 0.3s ease, color 0.3s ease;
}

.footer-socials a:hover {
  color: #fff;
  transform: translateY(-3px);
}

/* -> Scoped overrides to neutralize parent theme footer flex rules
     Parent (tutorstarter) sets .footer-menu { display: flex } which
     breaks alignment in our child theme footer-grid. These rules are
     intentionally specific and use no global selectors so other areas
     aren't affected. */
.site-footer .footer-widget ul.footer-menu,
.site-footer .footer-widget .footer-menu,
.site-footer .footer-widget .menu-footer-menu {
    display: block !important;
    align-items: initial !important;
    justify-content: initial !important;
    width: 100%;
}

.site-footer .footer-widget ul.footer-menu li {
    display: block;
    margin-bottom: 10px;
}

.site-footer .footer-widget ul.footer-menu li a {
    display: inline-block;
}


.footer-bottom {
  background-color: #080808;
  text-align: center;
  padding: 20px 10px;
  margin-top: 40px;
}

.footer-bottom .copyright-text {
  font-size: 0.9rem;
  color: #aaa;
}

/* Sticky CTA */
#sticky-cta {
  position: fixed;
  right: 25px;
  bottom: 25px;
  background-color: #e0b973;
  color: #0b0b0c;
  padding: 14px 24px;
  border-radius: 30px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        /* single transform transition + opacity for smooth slide+fade */
        transition: transform 320ms cubic-bezier(.2,.8,.2,1), box-shadow 320ms ease, opacity 320ms ease;
  z-index: 999;
}

#sticky-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
}

/* Make sticky-cta compatible with .hidden state (same animation as chat) */
#sticky-cta.hidden {
        opacity: 0;
        transform: translateY(6px) scale(0.9);
        pointer-events: none;
}

/* Visible state: override hidden and force pointer events */
#sticky-cta.visible {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
}

/* Chat Widget */
.chat-widget {
  position: fixed;
  bottom: 90px;
  right: 30px;
  background-color: #e0b973;
  color: #0b0b0c;
  padding: 12px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.4rem;
  box-shadow: 0 5px 10px rgba(0,0,0,0.3);
  transition: transform 0.3s ease, background-color 0.3s ease;
  z-index: 999;
}

.chat-widget:hover {
  background-color: #fff;
  transform: scale(1.1);
}

/* Enhance chat widget for smooth animation (show/hide like sticky-cta) */
#chat-widget {
        transition: opacity 0.4s ease, transform 0.4s ease;
        opacity: 1;
        transform: scale(1);
}

#chat-widget.hidden {
        opacity: 0;
        transform: scale(0.5); /* Hides by shrinking */
        pointer-events: none;
}

/* Responsive */
@media (max-width: 768px) {
  .footer-grid {
    gap: 30px;
  }

  .footer-widget h4.widget-title {
    font-size: 1rem;
  }
}

/* --- Pourquoi OURALEARN: decorative image to the right of features grid --- */
.why-us__content-wrapper {
    display: flex;
    align-items: center;
    gap: 40px;
}

.why-us__content-wrapper .features-grid {
    flex: 1.5;
}

.why-us__image-wrapper {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.why-us__image-wrapper img {
    max-width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 992px) {
    .why-us__content-wrapper {
        flex-direction: column;
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .why-us__image-wrapper { display: none; }
}

/* --- Custom Footer Logo Size --- */
.footer-brand .footer-logo-img {
    max-width: 150px; /* You can adjust this value if needed */
    height: auto;
    margin-bottom: 15px;
}

/* ------------------------------------------------------------------
   Header: make non-sticky, solid white and ensure Hero sits below it
   Client requirements: header should not be fixed/sticky; keep layout
   and alignment unchanged; hero must have clear space below header.
   ------------------------------------------------------------------ */
/* Apply as an override so it wins over inline/header.php styles */
.site-header {
    position: relative !important; /* no longer fixed/sticky */
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    background-color: #ffffff !important; /* solid white from the start */
    box-shadow: none !important; /* remove dynamic shadow */
    z-index: 20 !important; /* keep above normal content but not fixed */
    padding: 0.9rem 0 !important; /* consistent professional height */
    min-height: 80px !important; /* target approx 80-100px */
}

/* If theme toggles a .scrolled class, ensure it doesn't re-enable fixed/transparent styling */
.site-header.scrolled {
    position: relative !important;
    background-color: #ffffff !important;
    box-shadow: none !important;
    padding: 0.9rem 0 !important;
}

/* Ensure the header container keeps the same vertical alignment/height */
.site-header .header-container {
    align-items: center !important;
    min-height: 80px !important;
}

/* Give the hero section a top offset so it sits naturally below the header */
.hero-section {
    margin-top: 80px; /* reserve space equal to header height */
}

/* Slightly reduce reserved space on smaller viewports where header is shorter */
@media (max-width: 992px) {
    .site-header, .site-header .header-container { min-height: 64px !important; padding: 0.65rem 0 !important; }
    .hero-section { margin-top: 64px; }
}

@media (max-width: 420px) {
    .site-header, .site-header .header-container { min-height: 56px !important; padding: 0.5rem 0 !important; }
    .hero-section { margin-top: 56px; }
}

/* Safety: prevent horizontal overflow on small devices site-wide as a fallback.
   Scoped to small viewports to avoid masking layout issues on desktop. */
@media (max-width: 768px) {
    html, body { overflow-x: hidden; }
    /* enforce content box-sizing inside the hero to avoid accidental overflow */
    .hero-section, .hero-container, .hero-content { box-sizing: border-box; }
}

/* Strong mobile overrides for hero to prevent horizontal scroll while preserving visuals
   - Use background-size: cover and position the subject to the right
   - Ensure hero content never exceeds viewport width
   These rules intentionally override component CSS for small screens only. */
@media (max-width: 768px) {
    .hero-section {
        /* ensure fullscreen background fills the area without creating extra width */
        background-size: cover !important;
        background-position: 80% center !important; /* keep person visible on the right */
        overflow: hidden !important;
    }

    .hero-container,
    .hero-content {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
        overflow-x: hidden !important;
    }

    /* Buttons should wrap and not force horizontal scroll */
    .hero-buttons { flex-wrap: wrap !important; gap: 0.6rem !important; justify-content: center !important; }
    .hero-buttons a, .hero-buttons button { min-width: 0 !important; box-sizing: border-box !important; }
}

/* Desktop-only: force hero main title to appear as two balanced lines
   Uses responsive typography + a constrained measure so the title wraps into ~2 lines
   Does not change mobile styling. */
@media (min-width: 1024px) {
    .hero-section .hero-title {
        /* responsive size tuned for desktop so the heading sits on two lines */
        font-size: clamp(1.9rem, 2.6vw, 2.8rem);
        line-height: 1.08; /* tight but readable */
        max-width: 56ch; /* measure tuned to create two balanced lines for this heading */
        white-space: normal;
        overflow-wrap: break-word;
        word-break: normal;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto;
        /* Experimental balanced wrapping where supported */
        text-wrap: balance;
        /* preserve margins similar to previous hero h1 spacing */
        margin: 0 0 0.85rem 0;
    }

    /* keep the inline spans behaving normally */
    .hero-section .hero-title .h1-line-1,
    .hero-section .hero-title .h1-line-2 { display: inline; }

    /* ensure subtitle and buttons are not affected */
    .hero-section .hero-subtitle { max-width: none; }
}

/* Ensure smooth fade + slide for floating CTA */
.sticky-cta {
    transition: opacity 0.4s ease, transform 0.4s ease;
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
}

/* Global copy of A_propos .btn-cta so the same pill CTA can be used site-wide
   Matches: gradient, pill shape, padding, shadow and pulse animation from A_propos.css
*/
.btn-cta {
    display: inline-block;
    background: linear-gradient(90deg, #3B82F6, #2563EB);
    color: #fff;
    padding: 15px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.125rem;
    transition: background 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
    animation: pulse 2s ease-in-out infinite;
}

.btn-cta:hover {
    transform: scale(1.05);
    background: linear-gradient(90deg, #2563EB, #3B82F6);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
    animation: none;
}

@media (max-width: 768px) {
    .btn-cta {
        padding: 14px 28px;
        font-size: 1rem;
    }
}

/* Modifier to force pill appearance when other .btn rules might override */
.btn-cta--pill {
    border-radius: 9999px !important;
    min-width: 220px;
    padding: 12px 24px !important;
}

.sticky-cta.visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
    display: block !important;
}

.sticky-cta.hidden {
    display: block !important;
    opacity: 0 !important;
    transform: translateY(20px) !important;
}

/* Footer bottom layout: left credit + right copyright */
.footer-bottom .footer-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.footer-bottom-left .engineered-by {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 600;
}

.footer-bottom-left .engineered-by i {
    font-size: 18px;
    color: var(--text-primary);
}

.footer-bottom-left .engineered-by:hover {
    color: var(--primary-color);
}

.footer-bottom-right .copyright-text {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

@media (max-width: 720px) {
    .footer-bottom .footer-bottom-inner {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }
    .footer-bottom-right, .footer-bottom-left { width: 100%; }
}

/* Programmes page: make the 'S’inscrire maintenant' CTA match front-page Contactez-nous
   Scoped to `.programmes-page .btn-secondary-hero` so other pages are unaffected. */
.programmes-page .btn-secondary-hero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.6rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    color: rgba(20,30,50,0.95);
    background: rgba(255,255,255,0.22);
    border: 1px solid rgba(47,128,237,0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 300ms cubic-bezier(0.4,0,0.2,1);
    cursor: pointer;
    text-decoration: none;
    box-shadow: none;
    position: relative;
}

.programmes-page .btn-secondary-hero:hover {
    background: rgba(47,128,237,0.08);
    border-color: rgba(47,128,237,0.85);
    box-shadow: 0 10px 30px rgba(47,128,237,0.06);
    transform: translateY(-2px);
}

.programmes-page .btn-secondary-hero:active {
    transform: translateY(0) scale(0.97);
    transition-duration: 120ms;
}

.programmes-page .btn-secondary-hero:focus-visible {
    outline: none;
    box-shadow: 0 0 0 6px rgba(47,128,237,0.10);
}

@media (max-width: 480px) {
    .programmes-page .btn-secondary-hero {
        padding: 10px 18px;
        font-size: 0.95rem;
        max-width: 84%;
    }
}

/* Premium partner page: reuse the same visual for contact CTA but scoped to premium page
   so other pages won't be affected. */
.page-premium-partner .btn-secondary-hero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.6rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    color: rgba(20,30,50,0.95);
    background: rgba(255,255,255,0.22);
    border: 1px solid rgba(47,128,237,0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 300ms cubic-bezier(0.4,0,0.2,1);
    cursor: pointer;
    text-decoration: none;
    box-shadow: none;
    position: relative;
}

.page-premium-partner .btn-secondary-hero:hover {
    background: rgba(47,128,237,0.08);
    border-color: rgba(47,128,237,0.85);
    box-shadow: 0 10px 30px rgba(47,128,237,0.06);
    transform: translateY(-2px);
}

.page-premium-partner .btn-secondary-hero:active {
    transform: translateY(0) scale(0.97);
    transition-duration: 120ms;
}

.page-premium-partner .btn-secondary-hero:focus-visible {
    outline: none;
    box-shadow: 0 0 0 6px rgba(47,128,237,0.10);
}

@media (max-width: 480px) {
    .page-premium-partner .btn-secondary-hero {
        padding: 10px 18px;
        font-size: 0.95rem;
        max-width: 84%;
    }
}

/* Parcours de Carrière page: match Contactez-nous visual for 'Voir Tous les Programmes' CTA */
.parcours-carriere-page .btn-secondary-hero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.6rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    color: rgba(20,30,50,0.95);
    background: rgba(255,255,255,0.22);
    border: 1px solid rgba(47,128,237,0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 300ms cubic-bezier(0.4,0,0.2,1);
    cursor: pointer;
    text-decoration: none;
    box-shadow: none;
    position: relative;
}

.parcours-carriere-page .btn-secondary-hero:hover {
    background: rgba(47,128,237,0.08);
    border-color: rgba(47,128,237,0.85);
    box-shadow: 0 10px 30px rgba(47,128,237,0.06);
    transform: translateY(-2px);
}

.parcours-carriere-page .btn-secondary-hero:active {
    transform: translateY(0) scale(0.97);
    transition-duration: 120ms;
}

.parcours-carriere-page .btn-secondary-hero:focus-visible {
    outline: none;
    box-shadow: 0 0 0 6px rgba(47,128,237,0.10);
}

/* ------------------------------------------------------------------
   Premium partner page: mobile-only heading adjustments
   - Goal: keep hero title exactly two lines on all mobile screens
   - Other section titles: no more than two lines (scale down if needed)
   - Desktop layout is NOT changed (these rules are mobile-only)
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
    /* Hero title: force a constrained measure and fluid font-size so that
       the specific phrase "Devenez partenaire premium d'Ouralearn" wraps
       into exactly two lines on phones of various widths. Using ch units
       ties wrapping to character count which is stable across devices.
       We keep line-height tight to visually match desktop while
       guaranteeing two-line behaviour. */
    .page-premium-partner .hero-premium__title {
        display: inline-block; /* allow max-width to take effect while preserving centering */
        width: auto;
        max-width: min(92vw, 22ch); /* tuned to force two lines for this exact headline */
        font-size: clamp(1.35rem, 6.8vw, 2.05rem); /* fluid but clamped for readability */
        line-height: 1.02; /* tight to keep two compact lines */
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        white-space: normal;
        overflow-wrap: break-word;
        -webkit-font-smoothing: antialiased;
        /* balanced wrapping where supported */
        text-wrap: balance;
    }

    /* Section titles (benefits / packs / form): ensure they never exceed two lines
       by using a slightly smaller fluid font-size and a comfortable line-height.
       We avoid truncation; instead the font scales down on narrow screens. */
    .page-premium-partner .premium-benefits__title,
    .page-premium-partner .premium-packs__title,
    .page-premium-partner .premium-form__title {
        display: block;
        max-width: 100%;
        font-size: clamp(1rem, 4.6vw, 1.6rem);
        line-height: 1.12;
        margin: 0 0 1.25rem 0;
        text-align: center;
        white-space: normal;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    /* Small additional safety: if a title still stretches beyond two lines on
       extremely narrow devices, slightly reduce its computed size via transform.
       This is a low-impact visual tweak only applied when the element would
       naturally exceed two lines (keeps desktop intact). */
    .page-premium-partner .premium-benefits__title.long,
    .page-premium-partner .premium-packs__title.long,
    .page-premium-partner .premium-form__title.long {
        transform: scale(0.98);
        transform-origin: center top;
    }

    /* Fix: prevent uneven justification/word gaps for the hero subheading
       Scoped strictly to the premium partner page and the hero subheading
       paragraph to avoid affecting other text. We explicitly disable
       justification, normalize word-spacing and enable hyphenation so
       browsers can break long words instead of expanding inter-word gaps. */
    .page-premium-partner .hero-premium__text {
        /* Prefer left alignment for natural reading on narrow to mid-width phones
           while avoiding browser justification which creates large inter-word gaps. */
        text-align: left !important;
        text-justify: none !important;
        word-spacing: normal !important;
        letter-spacing: normal !important;

        /* Allow hyphenation so long words can break instead of expanding spaces */
        hyphens: auto !important;
        -webkit-hyphens: auto !important;
        -ms-hyphens: auto !important;

        /* Prevent large gaps by allowing safe wrapping and standard word-break rules */
        overflow-wrap: break-word !important;
        word-break: normal !important;

        /* Consistent line-height improves vertical rhythm and avoids cramped or loose lines */
        line-height: 1.45 !important;

        -webkit-font-smoothing: antialiased;
    }

    /* On very narrow screens center the paragraph so the small measure looks visually balanced */
    @media (max-width: 420px) {
        .page-premium-partner .hero-premium__text {
            text-align: center !important;
            line-height: 1.4 !important; /* slightly tighter on very small widths */
        }
    }
}

@media (max-width: 480px) {
    .parcours-carriere-page .btn-secondary-hero {
        padding: 10px 18px;
        font-size: 0.95rem;
        max-width: 84%;
    }
}

/* === Homepage Hero Background Update (hero.png) === */
/* Hero background moved to component stylesheet: components/hero/styles.css */

/* ------------------------------------------------------------------
   Processus d'inscription page: mobile-only responsive adjustments
   Scoped to `.processus-page` so desktop layout remains unchanged.
   Goals:
   - Stack hero columns into a single column on mobile
   - Keep buttons on a single line (no wrap), pill-shaped and centered
   - Make steps/cards stack vertically with consistent spacing
   - Fix wrapping/overflow and improve readability (line-height / font-size)
   - No layout or visual changes on desktop
  ------------------------------------------------------------------ */
@media (max-width: 768px) {
    /* safety */
    .processus-page, .processus-page * { box-sizing: border-box; }

    /* Page padding/container adjustments */
    .processus-page { padding-left: 0.75rem; padding-right: 0.75rem; }
    .processus-page .container { padding-left: 0; padding-right: 0; }

    /* Hero: stack content and visual vertically and center text for narrow screens */
    .processus-hero__inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .processus-hero__content {
        width: 100%;
        text-align: center;
        padding: 0 0.5rem;
    }

    .processus-hero__kicker { display: block; margin-bottom: .35rem; font-size: .9rem; }
    .processus-hero__title { font-size: clamp(1.4rem, 6.2vw, 2rem); line-height: 1.12; margin: .25rem 0 .6rem; }
    .processus-hero__lede { font-size: clamp(.95rem, 3.6vw, 1.05rem); line-height: 1.5; margin-bottom: .9rem; }

    /* Visual image: responsive and constrained */
    .processus-hero__visual { width: 100%; display: flex; justify-content: center; }
    .processus-hero__visual img { max-width: 92%; height: auto; display: block; }

    /* Actions: stack buttons vertically, centered; keep buttons on single line */
    .processus-hero__actions {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        align-items: center;
        width: 100%;
        padding: 0 0.5rem 0.5rem 0.5rem;
    }

    .processus-hero__actions .btn {
        white-space: nowrap !important; /* keep label on one line */
        padding: .85rem 1.6rem !important;
        border-radius: 9999px !important; /* pill look */
        display: inline-flex !important;
        justify-content: center !important;
        min-width: 0 !important;
        max-width: 92%;
    }

    /* Steps/grid: stack vertically and add consistent spacing */
    .processus-steps__grid { display: flex; flex-direction: column; gap: 1rem; }
    .processus-step { width: 100%; padding: 1rem; border-radius: 10px; background: transparent; }
    .processus-step__title { font-size: 1.05rem; line-height: 1.25; margin-bottom: .5rem; }
    .processus-step__text { line-height: 1.6; margin-bottom: .75rem; }

    /* Step buttons: ensure no wrap and comfortable hit area */
    .processus-step__btn { white-space: nowrap !important; padding: .7rem 1rem !important; border-radius: 9999px; }

    /* Abonnement / Register / CTA sections: stack and add horizontal padding
       Keep text readable and avoid overflow. */
    .processus-abonnement, .processus-register, .processus-faq, .processus-cta {
        padding-left: .75rem; padding-right: .75rem; text-align: center;
    }

    .processus-register__methods { display: flex; flex-direction: column; gap: .6rem; align-items: center; }
    .processus-register__methods .btn { width: auto; white-space: nowrap !important; }

    /* Prevent accidental horizontal scroll from this page on mobile */
    html, body { overflow-x: hidden; }
}

/* ------------------------------------------------------------------
   Processus hero: keep CTA labels inside buttons on very small screens
   - Use responsive font-size (clamp) so text scales down instead of wrapping
   - Preserve button paddings and pill shape; enforce no-wrap and centered text
   - Scoped to small viewports only so desktop/tablet are unaffected
   ------------------------------------------------------------------ */
@media (max-width: 480px) {
    .processus-hero__actions .btn-processus {
        white-space: nowrap !important;         /* keep label on single line */
        overflow: hidden !important;           /* prevent visual overflow */
        text-overflow: ellipsis !important;    /* defensive fallback */
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
        /* Scale the font responsively: don't go below 0.78rem or above 1.02rem */
        font-size: clamp(0.78rem, 3.6vw, 1.02rem) !important;
        line-height: 1 !important;
        padding: 10px 16px !important;         /* keep comfortable tap target */
    }

    /* Slightly smaller arrow so it stays visually balanced with the reduced text */
    .processus-hero__actions .btn-processus .fa-arrow-right,
    .processus-hero__actions .btn-processus .processus-btn__arrow {
        margin-left: 8px !important;
        font-size: 0.95em !important;
    }
}

/* === Fix: ensure testimonials slider is horizontally scrollable on mobile ===
   Some earlier rules set overflow:hidden; this block forces the slider to
   allow native horizontal scrolling on small viewports so all cards are
   reachable via manual swipe.
*/
@media (max-width: 767px) {
    .testimonials-section { overflow: visible !important; }

    .testimonials-slider {
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
        scroll-snap-type: x mandatory !important;
        touch-action: pan-x !important;
        -ms-overflow-style: -ms-autohiding-scrollbar;
    }

    .testimonials-slider::-webkit-scrollbar { display: none !important; }

    .testimonials-slider .testimonial-card {
        display: inline-block !important;
        vertical-align: top !important;
        flex: 0 0 auto !important;
        width: 85% !important; /* show main card + preview */
        max-width: 85% !important;
        min-width: 220px !important; /* ensure tappable size */
        margin-right: 12px !important;
        box-sizing: border-box !important;
        scroll-snap-align: center !important;
    }

    /* Prevent ancestor transforms from clipping the scrollable area where possible */
    .testimonials-section, .testimonials-section * {
        -webkit-transform: none !important;
        transform: none !important;
    }
}

/* === Mobile-only override: ensure testimonial paragraphs are not clipped ===
   - Applied only under max-width: 767px to preserve desktop/tablet behavior
   - Allows cards to grow vertically, ensures paragraph wrapping, and
     disables vertical clipping while keeping horizontal swipe/snap intact
*/
@media (max-width: 767px) {
    .testimonials-section,
    .testimonials-slider {
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Let cards expand vertically and remove any max-height/overflow constraints */
    .testimonials-slider .testimonial-card {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    /* Ensure no child element clips content */
    .testimonials-slider .testimonial-card *,
    .testimonials-slider .testimonial-card *::before,
    .testimonials-slider .testimonial-card *::after {
        overflow: visible !important;
    }

    /* Make sure testimonial text wraps and is readable on narrow viewports */
    .testimonials-slider .testimonial-content p {
        white-space: normal !important;
        word-break: break-word !important;
        hyphens: auto !important;
        display: block !important;
        line-height: 1.45 !important;
        /* add a small top gap so paragraph doesn't sit flush against the image on some phones */
        margin: 10px 0 12px !important;
        text-align: left !important;
    }

    /* Reduce image vertical footprint so text has room; preserve object-fit */
    .testimonials-slider .testimonial-card__media img,
    .testimonials-slider .testimonial-card img {
        max-height: 160px !important;
        height: auto !important;
        object-fit: cover !important;
        display: block !important;
        width: 100% !important;
    }
}

/* =========================================================
   Header user widget (avatar + name) — child theme styles
   Displays avatar (32x32, circular) to the left of the display name
   when the user is logged in. Keeps layout compact on very small screens.
   ========================================================= */
.header-user-widget {
    display: inline-flex;
    align-items: center;
    gap: 8px; /* space between avatar and name */
}

.header-user-widget .header-user-avatar,
.header-user-widget img.header-user-avatar,
.header-user-widget .header-user-avatar {
    width: 32px !important;
    height: 32px !important;
    max-width: 32px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* Stronger selector to override any parent/theme rules that may enlarge the avatar */
.site-header .header-cta .header-user-widget img.header-user-avatar,
.site-header .header-cta img.header-user-avatar,
.site-header .dropdown.header-user-widget img.header-user-avatar {
    width: 32px !important;
    height: 32px !important;
    max-width: 32px !important;
}

/* Ensure dropdown-toggle (both server and JS injected) shows avatar left of name */
.header-cta .dropdown-toggle {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 10px !important;
}

.header-cta .dropdown-toggle .header-user-avatar,
.header-cta img.header-user-avatar,
.dropdown.user-menu .dropdown-toggle .header-user-avatar {
    width: 32px !important;
    height: 32px !important;
    max-width: 32px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin: 0 !important;
}

/* If some parent rules set display:block and force line breaks, prevent that */
.header-cta .dropdown-toggle img.header-user-avatar { display: inline-block !important; }

@media (max-width: 420px) {
    /* keep name hidden on very small screens but keep avatar visible */
    .header-user-widget .header-user-name { display: none; }
    .header-cta .dropdown-toggle .header-user-name { display: none; }
}

.header-user-widget .header-user-name {
    font-weight: 600;
    color: var(--text-color, #1e293b);
    line-height: 1;
}

.header-user-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: transparent;
    border: none;
    cursor: pointer;
}

@media (max-width: 420px) {
    /* hide full name on very small screens to keep header compact */
    .header-user-widget .header-user-name { display: none; }
}

    /* Hero subtitle glow moved from inline to CSS for easier control and responsive tweaks */
    .hero-subtitle-glow {
        color: #ffffff !important;
        /* desktop/large screens: moderate glow */
        text-shadow: 0 0 4px #FFF, 0 0 8px rgba(255,255,255,0.9), 0 0 12px rgba(0,0,0,0.6);
        font-size: 1.1em; /* keep the same sizing as before */
        line-height: 1.6;
        max-width: 100%;
        padding: 0;
        box-sizing: border-box;
    }

    /* Mobile: reduce glow intensity to improve contrast/readability on small screens */
    @media (max-width: 420px) {
        .hero-subtitle-glow {
            text-shadow: 0 0 2px #FFF, 0 0 4px rgba(0,0,0,0.6);
        }
    }

    /* End hero-subtitle-glow */

/* Custom CSS: Force alignment of user avatar for stable production display */
.header-user-button, 
.user-avatar-wrap, 
.tutor-header-user-button {
    display: flex !important;
    align-items: center !important; /* Center the avatar vertically */
    justify-content: center !important; /* Center the entire content horizontally */
    min-height: 40px; /* Ensure a minimum height for stable centering */
}

/* Ensure the image itself is contained */
.header-user-button img, .user-avatar-wrap img {
    width: 30px !important; 
    height: 30px !important; 
    object-fit: cover; /* Ensures image fits without stretching */
    border-radius: 50%;
}

/* End of custom avatar alignment fixes */