/* ========================================================================
   Responsive Fixes — Formation Compétences
   ------------------------------------------------------------------------
   Fichier dédié aux corrections responsive identifiées lors de l'audit.
   Importé en fin de cascade depuis spa-components.css : ses règles
   surchargent celles de styles.css sans le modifier directement.

   Pour désactiver l'ensemble des fixes : commenter l'@import dans
   css/components/spa-components.css. Aucune autre modification ne
   touche styles.css.

   STYLE DES BOUTONS : volontairement non touché (identité de marque).
   ======================================================================== */



/* ========================================================================
   Fix #2 — Container 1600px → 1280px (lecture confortable, hero impactant)
   ======================================================================== */
.container {
    max-width: 1280px;
}

/* Variante optionnelle pour les rares blocs qui veulent toute la largeur */
.container.container-wide,
.container-wide {
    max-width: 1440px;
}


/* ========================================================================
   Fix #7 — Hiérarchie typographique : h1 plus punchy
   ------------------------------------------------------------------------
   Conserve l'ordre desktop > tablette > mobile > petit-mobile.
   Texte du hero homepage (sur vidéo) gagne en présence sans changer
   le contenu.
   ======================================================================== */

@media (max-width: 768px) {
    h1 { font-size: 2.5rem; }
    h2 { font-size: 1.875rem; }
    h3 { font-size: 1.375rem; }

    .hero-video-bg .hero-title { font-size: 2.5rem; line-height: 1.15; }
    .hero-video-bg .hero-subtitle { font-size: 1.0625rem; }
}

@media (max-width: 480px) {
    h1 { font-size: 2.125rem; }
    h2 { font-size: 1.625rem; }
    h3 { font-size: 1.25rem; }

    .hero-video-bg .hero-title { font-size: 2.125rem; }
    .hero-video-bg .hero-subtitle { font-size: 1rem; }
}


/* ========================================================================
   Fix #3 — CTA hero pages internes (Bilan / VAE / FormationIA)
   ------------------------------------------------------------------------
   La règle générique `.hero-cta` force flex-wrap:nowrap ; sur mobile
   les 2 boutons sont compressés (texte 0.85rem, icônes cachées). On
   passe en wrap dès qu'on a moins de place et en column en mobile.
   La page d'accueil (.hero-video-bg .hero-cta) reste prioritaire
   et conserve son comportement déjà bon.
   ======================================================================== */

@media (max-width: 1023px) {
    .hero-cta:not(.hero-video-bg .hero-cta) {
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .hero-cta:not(.hero-video-bg .hero-cta) {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .hero-cta:not(.hero-video-bg .hero-cta) .btn {
        width: 100%;
        max-width: 360px;
        margin: 0 auto;
        white-space: normal; /* autorise le retour à la ligne sur petit mobile */
        font-size: 1rem;
        padding: 0.875rem 1.25rem;
    }

    .hero-cta:not(.hero-video-bg .hero-cta) .btn i {
        display: inline-block; /* on récupère les icônes, pas besoin de les masquer */
    }
}


/* ========================================================================
   Fix #4 — Cartes réassurance hero (.hero-reassurance + .hero-card)
   ------------------------------------------------------------------------
   Avant : 4 cartes en flex-wrap:nowrap (tablette) + stack vertical
           (mobile, ~600px de scroll).
   Après : 4 sur 1 ligne en desktop ; grille 2×2 en tablette/mobile,
           1 colonne uniquement sur très petit mobile (< 380px).
   ======================================================================== */

@media (max-width: 1199px) {
    .hero-reassurance {
        flex-wrap: wrap;
    }
    .hero-card {
        white-space: normal; /* autorise le wrap du texte si besoin */
    }
}

@media (max-width: 1023px) {
    .hero-reassurance {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
        margin-top: 1.5rem;
    }
    .hero-card {
        width: auto !important;
        max-width: none !important;
        justify-content: flex-start;
        padding: 0.75rem 0.875rem;
    }
}

@media (max-width: 768px) {
    .hero-reassurance {
        flex-direction: initial !important; /* annule le column de styles.css ligne 704 */
        align-items: stretch !important;
        padding: 0 0.5rem !important;
    }
    .hero-card {
        font-size: 0.78rem;
    }
    .hero-card p {
        font-size: 0.78rem;
    }
}

/* Très petit mobile : 1 colonne (lisibilité prioritaire) */
@media (max-width: 380px) {
    .hero-reassurance {
        grid-template-columns: 1fr;
    }
}


/* ========================================================================
   Fix #5 — Largeurs fixes (image hero + dropdowns)
   ======================================================================== */

@media (max-width: 1199px) {
    .hero-image-circle {
        width: 100%;
        max-width: 600px;
        height: auto;
        aspect-ratio: 3 / 2;
    }
}

@media (max-width: 768px) {
    .hero-image-circle {
        max-width: 100%;
        aspect-ratio: 4 / 3;
        margin: 0 auto;
    }

    .dropdown-menu {
        min-width: 100% !important;
        white-space: normal !important;
    }
}


/* ========================================================================
   Fix #6 — Hero en mode paysage mobile
   ------------------------------------------------------------------------
   `min-height: 70vh` pose problème en orientation paysage (~414px) :
   la vidéo s'écrase. On garantit une hauteur lisible.
   ======================================================================== */

.hero-video-bg {
    min-height: max(70vh, 540px);
}

@media (max-width: 768px) and (orientation: landscape) {
    .hero-video-bg {
        min-height: 540px;
        padding-top: 6rem;
    }
}


/* ========================================================================
   Fix #8 — Menu mobile amélioré (animation, lock scroll, accessibilité)
   ======================================================================== */
@media (max-width: 768px) {
    .nav-menu {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        max-height: 100dvh;
        max-height: 100vh;
        margin: 0;
        padding: 6rem 1.5rem 2.5rem !important;
        background: rgba(255, 255, 255, 1) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(-12px);
        pointer-events: none !important;
        transition: opacity 240ms ease, transform 240ms ease, visibility 0s 240ms;
        z-index: 999;
        display: flex !important;
    }

    .nav-menu.active {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0);
        pointer-events: auto !important;
        transition: opacity 240ms ease, transform 240ms ease, visibility 0s 0s;
    }

    .nav-menu > li {
        width: 100%;
        list-style: none;
        border-bottom: 1px solid rgba(43, 51, 94, 0.1);
    }
    .nav-menu > li:last-child { border-bottom: 0; padding-top: 1rem; }

    .nav-menu a,
    .nav-menu .dropdown-toggle {
        display: block;
        width: 100%;
        padding: 1rem 0.5rem !important;
        font-size: 1.0625rem !important;
        min-height: 48px;
    }

    .nav-menu .nav-cta {
        background: var(--primary-orange) !important;
        color: white !important;
        text-align: center;
        border-radius: 25px 28px 26px 29px !important;
        margin-top: 0.5rem;
        padding: 1rem 1.25rem !important;
        box-shadow: 4px 4px 0 rgba(255, 106, 74, 0.25) !important;
    }

    /* Dropdowns en mode liste imbriquée */
    .nav-menu .dropdown-menu {
        position: static !important;
        opacity: 0;
        visibility: hidden;
        max-height: 0;
        overflow: hidden;
        transition: max-height 280ms ease, opacity 200ms ease;
        background: rgba(43, 51, 94, 0.04) !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        transform: none !important;
        min-width: 0 !important;
        white-space: normal !important;
        border-radius: 8px;
    }
    .nav-menu .dropdown.active > .dropdown-menu {
        opacity: 1;
        visibility: visible;
        max-height: 400px;
        padding: 0.25rem 0 0.5rem !important;
        margin-top: 0.5rem !important;
    }
    .nav-menu .dropdown-menu a {
        padding: 0.875rem 1rem !important;
        font-size: 1rem !important;
        min-height: 44px;
    }

    .mobile-menu-toggle {
        z-index: 1001;
        position: relative;
        width: 44px;
        height: 44px;
        justify-content: center;
        align-items: center;
        gap: 5px !important;
    }
    .mobile-menu-toggle.is-active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .mobile-menu-toggle.is-active span:nth-child(2) {
        opacity: 0;
    }
    .mobile-menu-toggle.is-active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
    .mobile-menu-toggle span {
        transition: transform 240ms ease, opacity 200ms ease;
    }

    /* Empêche le scroll du body quand le menu est ouvert */
    body.mobile-menu-open {
        overflow: hidden;
        touch-action: none;
    }
}

/* ========================================================================
   Fix #9 — Touch targets >= 44px (Apple HIG / WCAG)
   ======================================================================== */
@media (max-width: 1023px) and (pointer: coarse), (max-width: 768px) {
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-orange,
    .btn-form-submit {
        min-height: 44px;
        padding-top: 0.875rem;
        padding-bottom: 0.875rem;
    }

    .nav-menu a,
    .footer a,
    .dropdown-menu a {
        min-height: 44px;
    }

    .financing-pill,
    .fin-pill {
        min-height: 44px;
        padding: 0.75rem 1rem !important;
    }

    .carousel-btn {
        width: 48px !important;
        height: 48px !important;
    }

    .carousel-dot {
        min-width: 24px;
        min-height: 24px;
    }
}

/* ========================================================================
   Fix #10 — Formulaire mobile (taille tactile, focus visible)
   ======================================================================== */
@media (max-width: 768px) {
    .contact-form input,
    .contact-form select,
    .contact-form textarea,
    .eligibility-form input,
    .eligibility-form select,
    .eligibility-form textarea {
        font-size: 16px; /* iOS : empêche le zoom auto */
        padding: 0.875rem 1rem;
        min-height: 48px;
        border-radius: 10px;
    }

    .contact-form textarea,
    .eligibility-form textarea {
        min-height: 110px;
    }

    .contact-form button[type="submit"],
    .eligibility-form .eligibility-form-submit {
        width: 100%;
        min-height: 52px;
        font-size: 1rem;
    }

    .contact-form .form-group.checkbox-group label,
    .eligibility-form-group label.checkbox {
        gap: 0.625rem;
        align-items: flex-start;
        line-height: 1.45;
    }

    .contact-form-wrapper,
    .form-card {
        padding: 1.5rem !important;
    }
}

/* ========================================================================
   Fix #12 — DÉBORDEMENT HORIZONTAL MOBILE (cause profonde)
   ------------------------------------------------------------------------
   Plusieurs largeurs/paddings hard-codés provoquaient un overflow-x
   visible (et nos garde-fous overflow:clip masquaient seulement) :
     - .testimonial-card min-width: 350px (vs viewport 375px)
     - .testimonials-carousel padding: 2rem 5rem (= 160px latéral)
     - .contact-form-wrapper padding 3rem + border 3px + box-shadow
       6px + rotate(-0.5deg) → débordement latéral
     - .container padding: 0 3rem (= 96px sur 375px viewport)
   On normalise tout pour que le contenu tienne SANS scroll horizontal.
   ======================================================================== */

@media (max-width: 768px) {
    /* Container : padding latéral mesuré */
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Carrousel témoignages : full width, plus de padding latéral */
    .testimonials-carousel {
        padding: 1.5rem 0 !important;
        width: 100% !important;
        overflow: hidden;
    }
    .testimonials-track {
        gap: 2rem !important; /* aligné sur le hardcode JS (32px) pour éviter un drift de swipe */
        padding: 0 1rem;
    }
    .testimonials-track .testimonial-card,
    .testimonials-track .vae-testimonial {
        min-width: 0 !important;
        max-width: none !important;
        width: calc(100vw - 2rem) !important;
        flex-shrink: 0 !important;
        flex-basis: auto !important;
    }

    /* Boutons précédent/suivant cachés sur mobile : on swipe */
    .testimonials-carousel .carousel-btn,
    .testimonials-carousel .carousel-btn-prev,
    .testimonials-carousel .carousel-btn-next {
        display: none !important;
    }

    /* Form contact : pleine largeur, sans rotation ni ombre démesurée */
    .contact-form-wrapper {
        max-width: 100% !important;
        width: 100% !important;
        padding: 1.5rem !important;
        margin: 0 !important;
        transform: none !important;
        border-width: 2px !important;
        box-shadow: 4px 4px 0 rgba(255, 106, 74, 0.22) !important;
        border-radius: 20px !important;
    }

    /* Empêche la moindre largeur fixe rebelle de pousser le layout */
    body, main, section, .container {
        max-width: 100vw;
    }
}

@media (max-width: 480px) {
    .container {
        padding-left: 0.875rem !important;
        padding-right: 0.875rem !important;
    }
    .testimonials-track {
        gap: 2rem !important; /* idem : aligné sur le hardcode JS */
        padding: 0 0.875rem;
    }
    .testimonials-track .testimonial-card,
    .testimonials-track .vae-testimonial {
        width: calc(100vw - 1.75rem) !important;
    }
    .contact-form-wrapper {
        padding: 1.25rem !important;
        border-radius: 16px !important;
    }
    /* Cards et blocs aux paddings généreux : on resserre */
    .step-card,
    .method-card,
    .testimonial-card,
    .financing-detail,
    .financing-options-row,
    .financing-pill {
        padding: 1.25rem !important;
    }
}

/* Anti-overflow universel : la racine ne dépasse jamais */
html, body {
    max-width: 100%;
    overflow-x: clip;
}


/* ========================================================================
   Fix #13 — REFONTE MOBILE des 2 encadrés du bas (CTA bleu + form orange)
   ------------------------------------------------------------------------
   Inspiration : la page /formation-ia (sobre, lisible, sans effets cartoon
   agressifs). Sur mobile, on neutralise les border 3px, ombres flat,
   rotations et fonds criards. Padding et tailles harmonisés.
   ======================================================================== */

@media (max-width: 768px) {

    /* Section conteneuse : padding latéral et plus d'écart fond/contenu */
    .final-cta {
        padding: 2.5rem 0 3rem !important;
    }

    .cta-content {
        gap: 1.5rem !important;
        margin-bottom: 1rem !important;
    }

    /* --- Encadré bleu : "Nos engagements" --- */
    .cta-benefits {
        background: white !important;
        padding: 1.5rem 1.25rem !important;
        border-radius: 16px !important;
        border: 1px solid rgba(43, 51, 94, 0.12) !important;
        box-shadow: 0 4px 16px rgba(43, 51, 94, 0.08) !important;
        margin-bottom: 0 !important;
    }

    .cta-benefits h3 {
        font-size: 1.25rem !important;
        margin-bottom: 1rem !important;
        text-align: left !important;
        line-height: 1.3;
    }

    .cta-benefits ul {
        margin: 0;
        padding: 0;
    }

    .cta-benefits li {
        gap: 0.75rem !important;
        padding: 0.625rem 0 !important;
        font-size: 0.95rem !important;
        line-height: 1.55 !important;
        align-items: flex-start !important;
    }

    .cta-benefits li::before {
        width: 1.5rem !important;
        height: 1.5rem !important;
        font-size: 0.85rem !important;
        margin-top: 0.125rem;
    }

    .cta-benefits li strong {
        white-space: normal !important; /* autorise le retour à la ligne en mobile */
        display: block;
        margin-bottom: 0.125rem;
    }

    .cta-reassurance {
        flex-direction: column !important;
        gap: 0.625rem !important;
        margin-top: 1rem !important;
        padding-top: 1rem !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
    }

    .reassurance-item {
        font-size: 0.95rem;
    }

    /* --- Encadré orange : wrapper du formulaire --- */
    .contact-form-wrapper {
        background: white !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 1.5rem 1.25rem !important;
        margin: 0 !important;
        transform: none !important;
        border: 1px solid rgba(255, 106, 74, 0.25) !important;
        border-radius: 16px !important;
        box-shadow: 0 4px 16px rgba(255, 106, 74, 0.10) !important;
    }

    .contact-form-wrapper .form-header {
        margin-bottom: 0.75rem;
    }

    .contact-form-wrapper h3 {
        font-size: 1.25rem !important;
        margin-bottom: 0.5rem !important;
        line-height: 1.3;
    }

    .contact-form-wrapper > p {
        font-size: 0.95rem !important;
        line-height: 1.55 !important;
        margin-bottom: 1.25rem !important;
        color: #4a5568;
    }

    .contact-form .form-group {
        margin-bottom: 0.75rem;
    }

    .contact-form .form-group.checkbox-group label {
        font-size: 0.875rem;
        line-height: 1.5;
        color: #4a5568;
    }

    /* Bouton submit : full width sobre, pas d'ombre flat décalée */
    .contact-form button[type="submit"],
    .contact-form .btn-orange {
        width: 100% !important;
        font-size: 1rem !important;
        padding: 1rem 1.25rem !important;
        border-radius: 12px !important;
        border-width: 0 !important;
        box-shadow: 0 4px 12px rgba(255, 106, 74, 0.25) !important;
    }

    .contact-form button[type="submit"]:hover,
    .contact-form .btn-orange:hover {
        transform: translateY(-1px) !important;
        box-shadow: 0 6px 16px rgba(255, 106, 74, 0.35) !important;
    }
}


/* ========================================================================
   Fix #14 — NAVBAR MOBILE : 3 corrections
     (a) Couleurs harmonisées (menu + dropdowns en blanc cohérent)
     (b) Logo +25% sur mobile
     (c) Click outside : géré côté Navbar.js (déjà en place)
   ======================================================================== */

@media (max-width: 768px) {

    /* Logo +25% (90px → 112px) */
    .logo-svg {
        width: 112px !important;
    }

    /* Menu mobile : blanc opaque uniforme (plus de gris) */
    .nav-menu {
        background: rgba(255, 255, 255, 1) !important; /* opaque, pas semi-transparent */
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: 0 8px 32px rgba(15, 23, 42, 0.08) !important;
    }

    /* Dropdown ouvert : même blanc + indent visuelle subtile */
    .nav-menu .dropdown-menu {
        background: rgba(43, 51, 94, 0.03) !important;
        border-radius: 10px !important;
    }

    .nav-menu .dropdown-menu a {
        color: var(--primary-blue, #2b325e) !important;
    }

    /* Toggle : rester visible et cliquable au-dessus de la modale */
    .mobile-menu-toggle {
        z-index: 1001 !important;
    }

    /* Pour les dropdowns desktop qui pourraient apparaître sur tablette */
    .navbar:not(.navbar-scrolled) .dropdown-menu {
        background: white !important;
    }
}

@media (max-width: 480px) {
    /* Sur très petit mobile, on garde le logo lisible mais sans envahir */
    .logo-svg {
        width: 100px !important;
    }
}


/* ========================================================================
   Fix #11 — Focus visible accessible (clavier + lecteurs d'écran)
   ======================================================================== */
.btn:focus-visible,
button:focus-visible,
.nav-menu a:focus-visible,
.financing-pill:focus-visible,
.fin-pill:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--primary-orange);
    outline-offset: 2px;
}

/* ========================================================================
   Fix #1 (transverse) — Garde-fous anti-débordement horizontal
   ------------------------------------------------------------------------
   Les overflow horizontaux non désirés sont une plaie sur mobile.
   On pose un garde-fou global et on ramène les `min-width` rebelles
   à un comportement plus souple sur petit écran.
   ======================================================================== */

html, body {
    overflow-x: clip; /* clip > hidden : ne crée pas de contexte de défilement */
}

@media (max-width: 480px) {
    [class*="container"],
    section,
    .hero-content,
    .hero-wrapper {
        max-width: 100% !important;
    }

    /* Min-width rebelles susceptibles de déborder en 320-375px */
    .min-width-rebel-fix,
    .testimonial-card,
    .step-card {
        min-width: 0 !important;
    }
}