:root {
        /* Bleu / Blanc / Rouge (simple) */
        --blue: #1d4ed8;
        --blue-dark: #0b1b3a;
        --red: #e11d48;
        --white: #ffffff;

        /* Neutres */
        --bg: #e6ebf4;
        /* fond gris clair */
        --card: #ffffff;
        --line: #b7c3da;
        --muted: #606b7a;

        --radius: 16px;
        --max: 1160px;

        --shadow: 0 16px 38px rgba(11, 27, 58, .18);
        --shadow-strong: 0 26px 64px rgba(11, 27, 58, .26);
        --line-strong: #7f94c4;
--font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    }

    * {
        box-sizing: border-box
    }

    body {
        margin: 0;
        font-family: var(--font);
        color: var(--blue-dark);
        background: var(--bg);
    }

    a {
        color: inherit;
        text-decoration: none
    }

    .wrap {
        max-width: var(--max);
        margin: 0 auto;
        padding: 0 16px
    }

    .card {
        background: var(--card);
        border: 2px solid var(--line-strong);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        position: relative;
    }

    /* ===== Header simple ===== */
    .topbar {
        background: #fff;
        border-bottom: 1px solid var(--line);
    }

    .topbar-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 0;
        flex-wrap: wrap;
    }

    .brand {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 260px;
    }

    .flag {
        width: 30px;
        height: 18px;
        border: 1px solid var(--line);
        border-radius: 4px;
        overflow: hidden;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        flex: 0 0 auto;
    }

    .flag span:nth-child(1) {
        background: var(--blue)
    }

    .flag span:nth-child(2) {
        background: #fff
    }

    .flag span:nth-child(3) {
        background: var(--red)
    }

    .brand b {
        font-size: 13px;
        letter-spacing: .02em
    }

    .brand small {
        display: block;
        color: var(--muted);
        font-weight: 600;
        margin-top: 2px
    }

    .trust {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: flex-end;
        font-size: 12px;
        font-weight: 700;
        color: var(--muted);
    }

    .trust .tag {
        background: #f6f8ff;
        border: 1px solid var(--line-strong);
        border-radius: 999px;
        padding: 7px 10px;
    }

    /* ===== Hero ===== */
    .hero {
        padding: 22px 0 26px;
    }

    h1 {
        margin: 14px 0 10px;
        text-align: center;
        font-size: 35px;
        line-height: 1.12;
        letter-spacing: -.02em;
    }

    h1 .year {
        color: var(--blue)
    }

    h1 .accent {
        color: var(--red)
    }

    .hero-subline {
        margin: 0 auto 14px;
        max-width: 920px;
        text-align: center;
        color: var(--muted);
        font-size: 14.5px;
        line-height: 1.55;
        font-weight: 600;
    }

    /* Texte alternatif uniquement mobile */
    .subline-mobile {
        display: none;
    }

    .hero-grid {
        display: grid;
        grid-template-columns: 1.05fr 1.25fr;
        grid-template-areas: "benefits form";
        gap: 18px;
        /* évite d'étirer le formulaire à la hauteur du bloc de gauche (espace vide en bas) */
        align-items: stretch;
        margin-top: 10px;
    }
    /* ===== Left benefits ===== */
    .benefits {
        grid-area: benefits;
        height: 100%;
        padding: 18px 18px;
    }

    .benefits h3 {
        margin: 0 0 12px;
        font-size: 20px;
        text-align: center;
    }

    .benefits h3 .b {
        color: var(--blue)
    }

    .benefits h3 .r {
        color: var(--red)
    }

    .benefits-media {
        width: 100%;
        border: 1px solid var(--line);
        border-radius: 12px;
        overflow: hidden;
        background: #fff;
        margin-bottom: 12px;
    }

    .benefits-media img {
        width: 100%;
        height: 300px;
        /* desktop */
        object-fit: cover;
        display: block;
    }

    /* Mobile */
    @media (max-width: 520px) {
        .benefits-media img {
            height: 130px;
        }
    }

    .checks {
        list-style: none;
        margin: 12px 0 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 10px
    }

    .check {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        font-size: 14.5px;
        line-height: 1.35;
    }

    .tick {
        width: 20px;
        height: 20px;
        border-radius: 4px;
        background: var(--blue);
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        margin-top: 2px;
    }

    .tick.red {
        background: var(--red)
    }

    .tick svg {
        width: 14px;
        height: 14px;
        fill: #fff
    }

    .check strong {
        font-weight: 800
    }

    /* ===== Right form card ===== */
    .form-card {
        grid-area: form;
        display: flex;
        flex-direction: column;
        height: 100%;
        padding: 18px 18px;
        border: 4px solid rgba(29, 78, 216, .46);
        box-shadow: var(--shadow-strong);
    }

    .form-head {
        text-align: center;
        padding: 10px 10px 14px;
        margin: -6px -6px 14px;
        border-bottom: 1px solid var(--line-strong);
        background: #eef3ff;
        border-radius: 12px;
    }

    .form-head h3 {
        margin: 0;
        font-size: 24px;
        font-weight: 800;
    }

    .form-head h3 .accent {
        color: var(--red)
    }

    .form-head p {
        margin: 6px 0 0;
        color: var(--muted);
        font-size: 12.5px;
        font-weight: 600;
    }

    /* Placeholder (conservé pour formulaire.php)
   Objectif: garder un cadre STRICTEMENT stable d'une question à l'autre.
   Le contenu interne scrolle si besoin (sans faire bouger la taille du cadre). */
    .form-placeholder {
        /* cadre */
        border: 1px dashed #5f79b2;
        border-radius: 12px;
        background: #f3f6ff;
        color: #586a86;

        /* taille stable: le cadre prend la place disponible du bloc (ne varie pas entre les questions) */
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;

        /* espacements */
        padding: 12px;
    }

    /* Le contenu réel (formulaire.php) prend toute la hauteur et scrolle à l'intérieur */
    .form-placeholder > * {
        width: 100%;
        height: 100%;
        overflow: auto;
    }

    /* Évite le double titre: le formulaire embarqué (formulaire.php) a souvent son propre titre en haut */
    .form-placeholder > * > h1:first-child,
    .form-placeholder > * > h2:first-child,
    .form-placeholder > * > h3:first-child {
        display: none !important;
    }
    .form-placeholder > * > h1:first-child + p,
    .form-placeholder > * > h2:first-child + p,
    .form-placeholder > * > h3:first-child + p {
        display: none !important;
    }


    /* Buttons simples */
    .cta-row {
        display: flex;
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 14px;
    }

    .btn {
        display: inline-block;
        padding: 11px 16px;
        border-radius: 999px;
        font-weight: 800;
        border: 1px solid transparent;
        cursor: pointer;
        font-size: 14px;
        text-align: center;
    }

    .btn-blue {
        background: var(--blue);
        color: #fff;
        border-color: var(--blue);
    }

    .btn-red {
        background: var(--red);
        color: #fff;
        border-color: var(--red);
    }

    .btn-outline {
        background: #fff;
        color: var(--blue-dark);
        border-color: var(--line);
    }

    /* ===== Sections ===== */
    .section {
        padding: 40px 0
    }

    .section-title {
        text-align: center;
        margin: 0 0 18px;
        font-size: 30px;
        letter-spacing: -.01em;
    }

    .section-title .b {
        color: var(--blue)
    }

    .section-title .r {
        color: var(--red)
    }

    .why-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
    }

    .mini {
        padding: 16px;
        text-align: center
    }

    .mini .icon {
        width: 44px;
        height: 44px;
        margin: 0 auto 10px;
        border-radius: 10px;
        border: 1px solid var(--line);
        display: grid;
        place-items: center;
        background: #fff;
    }

    .mini h4 {
        margin: 6px 0 6px;
        font-size: 15px
    }

    .mini p {
        margin: 0;
        color: var(--muted);
        font-size: 13.5px;
        line-height: 1.45
    }

    .center-cta {
        display: flex;
        justify-content: center;
        margin-top: 18px;
        flex-wrap: wrap;
        gap: 10px
    }

    /* ===== How + photo ===== */
    .two-col {
        display: grid;
        grid-template-columns: 1.15fr .85fr;
        gap: 18px;
        align-items: stretch;
    }

    .how-card {
        padding: 18px
    }

    .how-card h3 {
        margin: 0 0 10px;
        font-size: 22px
    }

    .how-card p {
        margin: 0 0 10px;
        color: #2b3a5a;
        line-height: 1.6;
        font-size: 14.5px
    }

    .how-card .hint {
        color: var(--red);
        font-weight: 800;
        margin-top: 8px
    }

    .photo {
        padding: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .photo-inner {
        width: 100%;
        aspect-ratio: 4/3;
        border-radius: 12px;
        border: 1px solid var(--line);
        background: #e9eef8;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #56647a;
        font-weight: 700;
        text-align: center;
        padding: 0px;
    }

    /* ===== Band ===== */
    .band {
        margin-top: 18px;
        background: #0b1b3a;
        color: #fff;
        border-radius: var(--radius);
        border: 1px solid #0b1b3a;
        box-shadow: var(--shadow);
    }

    .band-inner {
        padding: 18px
    }

    .band-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }

    .band-item {
        text-align: center;
        padding: 10px
    }

    .band-item h4 {
        margin: 8px 0 6px;
        font-size: 15px
    }

    .band-item p {
        margin: 0;
        color: rgba(255, 255, 255, .85);
        font-size: 13.5px;
        line-height: 1.45
    }

    .band-item .bicon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        margin: 0 auto 8px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(255, 255, 255, .25);
    }

    /* ===== Aids ===== */
    .tabs {
        display: flex;
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
        margin: 12px 0 14px;
    }

    .tab {
        padding: 10px 14px;
        border-radius: 999px;
        border: 1px solid var(--line);
        background: #fff;
        color: var(--blue-dark);
        font-weight: 800;
        cursor: pointer;
        font-size: 14px;
    }

    .tab.active.blue {
        border-color: var(--blue);
        color: var(--blue);
    }

    .tab.active.red {
        border-color: var(--red);
        color: var(--red);
    }

    .aid-card {
        max-width: 920px;
        margin: 0 auto;
        padding: 16px;
        text-align: center
    }

    .aid-card .badge-mini {
        display: inline-block;
        padding: 6px 10px;
        border-radius: 999px;
        border: 1px solid var(--line);
        background: #fff;
        font-weight: 800;
        color: var(--blue-dark);
        margin-bottom: 8px;
    }

    .aid-card p {
        margin: 6px 0 0;
        color: #2b3a5a;
        line-height: 1.65;
        font-size: 14.5px
    }

    .logos {
        display: flex;
        justify-content: center;
        gap: 12px;
        flex-wrap: wrap;
        margin-top: 16px;
        color: var(--muted);
        font-weight: 800;
        font-size: 13px;
    }

    .logo-pill {
        padding: 8px 12px;
        border-radius: 999px;
        background: #fff;
        border: 1px solid var(--line);
    }

    /* ===== FAQ ===== */
    .faq-wrap {
        max-width: 920px;
        margin: 0 auto;
    }

    .faq {
        padding: 16px;
    }

    .faq h2 {
        margin: 0 0 12px;
        font-size: 26px;
        text-align: center;
    }

    .faq h2 .b {
        color: var(--blue)
    }

    .faq h2 .r {
        color: var(--red)
    }

    .faq-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 10px;
    }

    details {
        border: 1.5px solid var(--line-strong);
        border-radius: 12px;
        background: #fff;
        padding: 10px 12px;
    }

    summary {
        cursor: pointer;
        font-weight: 800;
        color: var(--blue-dark);
        list-style: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    summary::-webkit-details-marker {
        display: none
    }

    .chev {
        width: 22px;
        height: 22px;
        border-radius: 6px;
        border: 1px solid var(--line);
        display: grid;
        place-items: center;
        color: var(--muted);
        flex: 0 0 auto;
    }

    details[open] .chev {
        border-color: var(--blue);
        color: var(--blue);
    }

    .faq-answer {
        margin-top: 10px;
        color: #2b3a5a;
        line-height: 1.65;
        font-size: 14.5px;
    }

    .faq-note {
        margin: 12px 0 0;
        text-align: center;
        color: var(--muted);
        font-size: 12.5px;
        line-height: 1.55;
        font-weight: 600;
    }

    /* ===== Footer ===== */
    footer {
        background: #fff;
        border-top: 1px solid var(--line);
        padding: 18px 0 24px;
    }

    .legal {
        max-width: 980px;
        margin: 0 auto;
        text-align: center;
        color: var(--muted);
        font-size: 11.5px;
        line-height: 1.55;
        padding-top: 10px;
    }

    .photo-inner img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 16px;
    }


    /* ===== Responsive (mobile-first friendly) ===== */
    @media (max-width: 980px) {
        h1 {
            font-size: 34px
        }

        .hero-grid {
            grid-template-columns: 1fr;
            grid-template-areas:
                "form"
                "benefits";
        }

        .why-grid {
            grid-template-columns: repeat(2, 1fr)
        }

        .two-col {
            grid-template-columns: 1fr
        }

        .band-grid {
            grid-template-columns: 1fr
        }

        .trust {
            justify-content: flex-start
        }

        .brand {
            min-width: auto
        }
    }

    @media (max-width: 520px) {
        /* Masque les 3 bulles de confiance pour laisser le formulaire visible sans scroll */
        .trust {
            display: none;
        }

        .topbar-inner {
            padding: 8px 0;
        }

        .hero {
            padding: 10px 0 16px;
        }

        /* Version courte du sous-titre (mobile uniquement) */
        .subline-desktop {
            display: none;
        }

        .subline-mobile {
            display: inline;
        }

        h1 {
            font-size: 18px;
            line-height: 1.18;
            margin: 4px 0 6px;
        }

        /* Réduit fortement le titre du bloc formulaire (mobile) */
        .form-head {
            padding: 8px 8px 10px;
            margin: -6px -6px 12px;
        }

        .form-head h3 {
            font-size: 18px;
        }

        .form-head p {
            font-size: 12px;
        }

        /* Mobile : masque certains boutons pour gagner de la hauteur */
        .form-card .cta-row .btn-red {
            display: none;
        }

        /* Masque uniquement le bouton "Accéder au formulaire" (celui qui renvoie vers #eligibilite) */
        .center-cta a.btn-outline[href="#eligibilite"] {
            display: none;
        }

        .hero-subline {
            font-size: 13px;
            margin-bottom: 10px;
        }

        .section-title {
            font-size: 24px
        }

        .why-grid {
            grid-template-columns: 1fr
        }

        .btn {
            width: 100%;
            max-width: 420px
        }

        .cta-row {
            gap: 8px
        }

        .form-placeholder {
            height: 500px;
            padding: 10px;
        }

        .tabs .tab {
            width: 100%;
            max-width: 420px
        }

        .faq h2 {
            font-size: 22px
        }

        summary {
            font-size: 14px
        }
    }

/* ===== Ajustements mobile demandés ===== */
@media (max-width: 980px) {
  /* Masque les CTA du bas du formulaire (on garde uniquement le bouton interne Suivant/Retour) */
  .cta-row { display: none !important; }
}

footer {
  background: #f6f8fc;
  border-top: 1px solid #d7def5;
  padding: 24px 16px;
  font-size: 13px;
  color: #5b6b8a;
}

footer .legal {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}

footer .legal p {
  margin-bottom: 12px;
  line-height: 1.5;
}

footer .legal-links {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

footer .legal-links a {
  color: #2b5cff;
  text-decoration: none;
  font-weight: 500;
}

footer .legal-links a:hover {
  text-decoration: underline;
}

footer .separator {
  color: #9aa6c7;
}