/* =========================================================
   AKLIO — STYLE-V4.CSS
   Styles spécifiques à la page AKLIO HOME uniquement.

   À charger après /css/style-v2.css :

   <link rel="stylesheet" href="/css/style-v2.css">
   <link rel="stylesheet" href="/css/style-v4.css">

   Le CSS générique/réutilisable reste dans style-v2.css.
   ========================================================= */


/* =========================================================
   NAVIGATION PRIMAIRE / COLLÈGE / LYCÉE
   ========================================================= */

.home-level-links {
    padding-top: 18px;
    padding-bottom: 18px;
}

.home-level-links .hero-buttons {
    margin: 0;
    padding-bottom: 0;
    gap: 34px;
}

.home-level-links .section-lead + .hero-buttons {
    margin-top: 24px;
}

/* MOBILE — navigation niveaux */

@media (max-width: 560px) {

    .home-level-links .hero-buttons {
        gap: 8px;
        flex-direction: row;
        flex-wrap: nowrap;
    }
}


/* =========================================================
   ENCOURAGER LE BILINGUISME / PARCOURS
   ========================================================= */

body .section-neutral.home-bilinguisme h2 {
    color: var(--cornflower);
}

body .section-neutral.home-parcours h2 {
    color: var(--yellow);
}


/* =========================================================
   LE SAVIEZ-VOUS ?
   ========================================================= */

body .home-bilinguisme .program-card {
    background: var(--navy);
    color: var(--almond);
    border: none;
}

body .home-bilinguisme .program-card h3,
body .home-bilinguisme .program-card p {
    color: var(--almond);
}


/* =========================================================
   LOGO — SECTION AKLIO HOME
   ========================================================= */

.home-section-logo {
    display: block;
    width: auto;
    height: auto;

    max-width: 280px;

    margin: 0 auto 28px;

    position: relative;
    z-index: 1;
}


/* =========================================================
   FAQ
   ========================================================= */

.homepage-faq h2 {
    color: var(--navy);
}

.homepage-faq details {
    background: var(--pale-yellow);
    border-color: var(--pale-yellow);
}

.homepage-faq summary {
    color: var(--navy);
}


/* =========================================================
   AVANT DE DÉMARRER — CARTES PARCOURS HOME
   ========================================================= */

body .intro-card.parcours-home {
    background: var(--universe-strong);
    color: var(--navy);
}

body .intro-card.parcours-home h3,
body .intro-card.parcours-home p,
body .intro-card.parcours-home .icon {
    color: var(--navy);
}


/* =========================================================
   AKLIO HOME — 3 CARTES PRIMAIRE / COLLÈGE / LYCÉE
   Almond / Navy / Yellow
   ========================================================= */

body .section-neutral .programs-expand .expand-card {
    background: var(--almond);
    color: var(--navy);

    border: 2px solid var(--navy);
}

body .section-neutral .programs-expand .expand-card h3 {
    color: var(--universe-strong);
}

body .section-neutral .programs-expand .expand-card p,
body .section-neutral .programs-expand .expand-card strong,
body .section-neutral .programs-expand .expand-card .expand-link {
    color: var(--navy);
}

body .section-neutral .programs-expand .expand-card .badge {
    background: var(--navy);
    color: var(--universe-strong);
}


/* =========================================================
   PARCOURS — 4 CARTES
   Navy / Almond / Yellow
   ========================================================= */

body .section-neutral#parcours .intro-card {
    background: var(--navy);
    color: var(--almond);
    border-color: var(--navy);
}

body .section-neutral#parcours .intro-card h3 {
    color: var(--universe-strong);
}

body .section-neutral#parcours .intro-card p {
    color: var(--almond);
}

body .section-neutral#parcours .intro-card .icon {
    color: var(--almond);
}


/* =========================================================
   AKLIO HOME — EXPAND CARDS
   Plus basses au repos, hauteur normale au hover
   ========================================================= */

.programs-expand {
    align-items: center;
}

.programs-expand .expand-card {
    height: 350px;

    transition:
        height .35s ease,
        flex .45s ease,
        box-shadow .25s ease;
}

.programs-expand .expand-card:hover {
    height: 500px;
}

/* =========================================================
   AKLIO HOME — EXPAND CARDS — TABLETTE / MOBILE
   Neutralise les hauteurs desktop spécifiques à HOME
   ========================================================= */

@media (max-width: 980px) {

    .programs-expand {
        align-items: stretch;
    }

    .programs-expand .expand-card,
    .programs-expand .expand-card:hover {
        flex: none;
        width: 100%;
        height: auto;
        min-height: 420px;
    }
}

/* =========================================================
   HERO HOME — DESKTOP
   Boutons superposés au PNG
   ========================================================= */

@media (min-width: 909px) {

    .hero-home-aklio .hero-bottom {
        bottom: 20px;
    }

}


/* =========================================================
   HERO HOME — TABLETTE / MOBILE
   À partir de 908 px :
   - image complète
   - boutons sous l'image
   - bande Almond
   ========================================================= */

@media (max-width: 908px) {

    .hero-home-aklio {
        height: auto;
        min-height: 0;

        overflow: visible;

        background: var(--almond);
    }

    .hero-home-aklio > img {
        display: block;

        width: 100%;
        height: auto;

        object-fit: contain;
        object-position: center;
    }

    .hero-home-aklio .hero-overlay {
        position: static;

        inset: auto;

        width: 100%;
        max-width: none;

        height: auto;
        min-height: 0;

        margin: 0;
        padding: 0;

        transform: none;

        background: var(--almond);
    }

    .hero-home-aklio .hero-bottom {
        position: static;

        left: auto;
        right: auto;
        top: auto;
        bottom: auto;

        width: 100%;
        max-width: none;

        margin: 0;
        padding: 20px 20px 24px;

        transform: none;

        text-align: center;

        background: var(--almond);
    }

    .hero-home-aklio .hero-buttons {
        position: static;

        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;

        justify-content: center;
        align-items: center;

        width: 100%;
        max-width: none;

        margin: 0;
        padding: 0;

        gap: 12px;

        transform: none;
    }

    .hero-home-aklio .hero-buttons .btn {
        position: static;

        min-width: 0;

        transform: none;
    }

}


/* =========================================================
   HERO HOME — TÉLÉPHONE
   Les deux CTA diminuent comme les boutons de niveaux
   ========================================================= */

@media (max-width: 560px) {

    .hero-home-aklio .hero-buttons {
        gap: 8px;

        flex-direction: row;
        flex-wrap: nowrap;
    }

    .hero-home-aklio .hero-buttons .btn {
        min-width: 0;
        width: auto;
        flex: 1;

        padding: 10px 8px;

        font-size: 14px;
        line-height: 1.15;

        text-align: center;
    }

}
/* =========================================================
   HERO PRIMAIRE
   Même traitement que le hero AKLIO HOME
   Palette Primaire : Sky Blue / Corn / Navy
   ========================================================= */

.hero-primaire-aklio .hero-bottom {
    left: 50%;
    right: auto;

    width: 100%;
    max-width: 900px;

    transform: translateX(-50%);

    text-align: center;
}

.hero-primaire-aklio .hero-level-title {
    width: 100%;
    margin: 0 auto 18px;

    color: var(--corn);

    text-align: center;
}

.hero-primaire-aklio .hero-buttons {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    margin: 0;
    padding: 0;

    gap: 12px;
}

.hero-primaire-aklio .hero-buttons .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    text-align: center;
}

/* =========================================================
   HERO PRIMAIRE — TABLETTE / MOBILE
   Sous 980 px : H2 + boutons sous l'image
   ========================================================= */

@media (max-width: 980px) {

    .hero-primaire-aklio {
        height: auto;
        min-height: 0;

        overflow: visible;

        background: var(--almond);
    }

    .hero-primaire-aklio > img {
        display: block;

        width: 100%;
        height: auto;

        object-fit: contain;
        object-position: center;
    }

    .hero-primaire-aklio .hero-overlay {
        position: static;
        inset: auto;

        width: 100%;
        max-width: none;

        height: auto;
        min-height: 0;

        margin: 0;
        padding: 0;

        transform: none;

        background: var(--almond);
    }

    .hero-primaire-aklio .hero-top {
        display: none;
    }

    .hero-primaire-aklio .hero-bottom {
        position: static;

        left: auto;
        right: auto;
        top: auto;
        bottom: auto;

        width: 100%;
        max-width: none;

        margin: 0;
        padding: 24px 20px 26px;

        transform: none;

        text-align: center;

        background: var(--almond);
    }

    .hero-primaire-aklio .hero-level-title {
        width: 100%;
        margin: 0 auto 18px;
        color: var(--corn);
        text-align: center;
    }

    .hero-primaire-aklio .hero-buttons {
        position: static;

        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;

        justify-content: center;
        align-items: center;

        width: 100%;
        max-width: none;

        margin: 0;
        padding: 0;

        gap: 12px;

        transform: none;
    }

    .hero-primaire-aklio .hero-buttons .btn {
        position: static;

        min-width: 0;

        transform: none;
    }
}

/* =========================================================
   HERO PRIMAIRE — TÉLÉPHONE
   Les deux CTA restent côte à côte et se réduisent
   ========================================================= */

@media (max-width: 560px) {

    .hero-primaire-aklio .hero-level-title {
        font-size: 20px;
        line-height: 1.2;
    }

    .hero-primaire-aklio .hero-buttons {
        flex-direction: row;
        flex-wrap: nowrap;

        gap: 8px;
    }

    /* .btn : largeur/padding/flex définis une seule fois plus bas, section "MOBILE" (partagée primaire/collège/lycée) */
}

/* =========================================================
   NAVIGATION PRIMAIRE / COLLÈGE / LYCÉE DANS LE HERO
   Inactif : transparent / bordure Corn
   Hover : Corn
   Actif : Corn
   ========================================================= */
   
/* .btn-secondary : couleurs définies une seule fois plus bas, section "BOUTONS DANS LE HERO" */

body .hero-home-aklio .hero-buttons .btn-primary,
body .hero-primaire-aklio .hero-buttons .btn-primary,
body .hero-college-aklio .hero-buttons .btn-primary,
body .hero-lycee-aklio .hero-buttons .btn-primary,
body .hero-credit-aklio .hero-buttons .btn-primary {
    background: var(--corn);
    color: var(--navy);
    border: 2px solid var(--corn);
}
/* =========================================================
   NAVIGATION NIVEAUX AKLIO HOME
   ========================================================= */

/* Couleurs (sélectionné / non sélectionné) définies une seule fois plus bas, section "CTA SOUS LE HERO" */
/* =========================================================
   NAVIGATION NIVEAUX HOME — RESPONSIVE
   Même comportement pour niveau actif et inactif
   ========================================================= */

    @media (max-width: 560px) {

        body .home-level-links .hero-buttons .btn-primary,
        body .home-level-links .hero-buttons .btn-secondary {
            width: auto;
            min-width: 0;
            flex: 1;
            padding: 10px 8px;
            font-size: 14px;
            line-height: 1.15;
            border-width: 2px;

            display: inline-flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

    }

/*  pour descendre le boutons sur le bas du hero*/
.hero-primaire-aklio .hero-buttons,
.hero-college-aklio .hero-buttons,
.hero-lycee-aklio .hero-buttons {
    transform: translateY(36px);
}
@media (max-width: 980px) {

    .hero-primaire-aklio .hero-buttons,
    .hero-college-aklio .hero-buttons,
    .hero-lycee-aklio .hero-buttons {
        transform: translateY(24px);
    }
}

/* =========================================================
   HERO NIVEAUX — BOUTONS
   ========================================================= */

.hero-primaire-aklio .hero-buttons .btn,
.hero-college-aklio .hero-buttons .btn,
.hero-lycee-aklio .hero-buttons .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    box-sizing: border-box;
    white-space: nowrap;
}


/* MOBILE */

@media (max-width: 560px) {

    .hero-primaire-aklio .hero-buttons,
    .hero-college-aklio .hero-buttons,
    .hero-lycee-aklio .hero-buttons {
        width: 100%;
        gap: 8px;
        flex-wrap: nowrap;
    }

    .hero-primaire-aklio .hero-buttons .btn,
    .hero-college-aklio .hero-buttons .btn,
    .hero-lycee-aklio .hero-buttons .btn {
        flex: 1 1 0;
        width: 0;
        min-width: 0;

        padding:0px 0px;

        font-size: 14px;
        line-height: 1.15;
        text-align: center;

        white-space: nowrap;
    }
}
@media (max-width: 560px) {

    body .hero-primaire-aklio .hero-bottom .hero-buttons .btn,
    body .hero-college-aklio .hero-bottom .hero-buttons .btn,
    body .hero-lycee-aklio .hero-bottom .hero-buttons .btn {
        position: relative;

        flex: 1;
        min-width: 0;

        overflow: hidden;
    }

    body .hero-primaire-aklio .hero-bottom .hero-buttons .btn span,
    body .hero-college-aklio .hero-bottom .hero-buttons .btn span,
    body .hero-lycee-aklio .hero-bottom .hero-buttons .btn span {
        position: absolute;
        left: 50%;
        top: 50%;

        transform: translate(-50%, -50%);

        white-space: nowrap;
    }
}

/* =========================================================
   PRIMAIRE — CARTES PÉDAGOGIQUES
   Même traitement Navy que les 4 cartes AKLIO HOME
   ========================================================= */

.primaire-pedagogy .intro-card {
    background: var(--navy);
    color: var(--almond);
    border-color: var(--navy);
}

.primaire-pedagogy .intro-card p {
    color: var(--almond);
}

.primaire-pedagogy .intro-card h3 {
    color: var(--corn);
}

.primaire-pedagogy .intro-card .icon {
    color: var(--almond);
}

.primaire-pedagogy .intro-card a {
    color: var(--almond);
}


/* =========================================================
   LYCÉE — EXPRESSION D'OPINIONS ET D'IDÉES
   Cartes Corn / Navy
   ========================================================= */

.lycee-expression-cards .program-card {
    background: var(--corn);
    color: var(--navy);
    border-color: var(--corn);
}

.lycee-expression-cards .program-card h3,
.lycee-expression-cards .program-card p,
.lycee-expression-cards .program-card ul,
.lycee-expression-cards .program-card li {
    color: var(--navy);
}
/* =========================================================
   LYCÉE — 2DE / 1ÈRE & TERMINALE
   ========================================================= */

.lycee-years > h2 {
    color: var(--sky-blue);
}

.lycee-years-terminale .program-card {
    background: var(--navy);
    color: var(--corn);
    border-color: var(--navy);
}

.lycee-years-terminale .program-card h3,
.lycee-years-terminale .program-card p,
.lycee-years-terminale .program-card ul,
.lycee-years-terminale .program-card li {
    color: var(--corn);
}
/* =========================================================
   LYCÉE — PARCOURS SUR L'ANNÉE
   Sky Blue / Navy
   ========================================================= */

.lycee-year-plan > h2 {
    color: var(--navy);
}

.lycee-year-plan > .section-lead {
    color: var(--navy);
}

.lycee-year-plan .program-card {
    background: var(--sky-blue);
    color: var(--navy);
    border-color: var(--sky-blue);
}

.lycee-year-plan .program-card h3,
.lycee-year-plan .program-card p,
.lycee-year-plan .program-card ul,
.lycee-year-plan .program-card li {
    color: var(--navy);
}
/* TERMINALE — Sky Blue / Navy */

.lycee-years .program-card {
    background: var(--sky-blue);
    color: var(--navy);
    border-color: var(--sky-blue);
}

.lycee-years .program-card h3,
.lycee-years .program-card p,
.lycee-years .program-card ul,
.lycee-years .program-card li {
    color: var(--navy);
}

/* =========================================================
   COLLÈGE — 6e / 5e / 4e / 3e
   Sky Blue / Corn / Almond 
========================================================= */
/* 6e / 5e */
.college-stage-65 > h2 {
    color: var(--cornflower);
}

.college-stage-65 .intro-card {
    background: var(--sky-blue);
    color: var(--navy);
    border-color: var(--sky-blue);
}
.college-stage-65 .program-card {
    background: var(--almond);
    color: var(--navy);
    border-color: var(--sky-blue);
}



.college-stage-65 .intro-card h3,
.college-stage-65 .intro-card p,
.college-stage-65 .intro-card .icon,
.college-stage-65 .intro-card a,
.college-stage-65 .program-card li,
.college-stage-65 .program-card a {
    color: var(--navy);
}

.college-stage-65 .program-card h3 {
    color: var(--cornflower);
}

/* 4e / 3e */
.college-stage-43 > h2 {
    color: var(--corn);
}

.college-stage-43 .intro-card {
    background: var(--pale-yellow);
    color: var(--navy);
    border-color: var(--corn);
}

.college-stage-43 .program-card {
    background: var(--almond);
    color: var(--navy);
    border-color: var(--corn);
}

.college-stage-43 .intro-card h3,
.college-stage-43 .intro-card p,
.college-stage-43 .intro-card .icon,
.college-stage-43 .intro-card a,
.college-stage-43 .program-card li,
.college-stage-43 .program-card a {
    color: var(--navy);
}

.college-stage-43 .program-card h3 {
    color: var(--corn);
}
/* =========================================================
   COLLÈGE — PARCOURS SUR L'ANNÉE
   Navy / Corn / Almond
   ========================================================= */

.college-year-plan > h2 {
    color: var(--navy);
}

.college-year-plan .program-card {
    background: var(--navy);
    color: var(--almond);
    border-color: var(--navy);
}

.college-year-plan .program-card h3 {
    color: var(--corn);
}

.college-year-plan .program-card ul,
.college-year-plan .program-card li {
    color: var(--almond);
}

/*boucle lycee classe specifique */
.lycee-culture-loop {
    bottom: -120px;
    z-index: 3;
}

.home-bilinguisme {
    overflow: visible;
    position: relative;
    z-index: 2;
}

.lycee-expression-cards {
    position: relative;
    z-index: 1;
}
/* primaire - faire remonter les boucle sur section précédente*/
.primaire-year-plan {
    position: relative;
    overflow: visible;
    z-index: 3;
}

.lycee-orange2-loop {
    top: -140px;
    z-index: 4;
}

    /* =========================================================
   BOUTONS DANS LE HERO
   Primaire / Collège / Lycée
   = ancien style des CTA
   ========================================================= */

body .hero-home-aklio .hero-buttons .btn-secondary,
body .hero-primaire-aklio .hero-buttons .btn-secondary,
body .hero-college-aklio .hero-buttons .btn-secondary,
body .hero-lycee-aklio .hero-buttons .btn-secondary,
body .hero-credit-aklio .hero-buttons .btn-secondary {
    background: transparent;
    color: var(--navy);
    border: 3px solid var(--corn);
}

body .hero-home-aklio .hero-buttons .btn-secondary:hover,
body .hero-primaire-aklio .hero-buttons .btn-secondary:hover,
body .hero-college-aklio .hero-buttons .btn-secondary:hover,
body .hero-lycee-aklio .hero-buttons .btn-secondary:hover,
body .hero-credit-aklio .hero-buttons .btn-secondary:hover {
    background: var(--corn);
    color: var(--navy);
    border-color: var(--corn);
}
/* =========================================================
   CTA SOUS LE HERO
   Prendre contact / Découvrir nos offres
   = ancien style des boutons overlay
   ========================================================= */

body .section-neutral.home-level-links .btn-secondary {
    min-width: 180px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 18px;
    font-weight: 600;
    text-align: center;

    background: color-mix(in srgb, var(--cornflower) 80%, white);
    color: var(--almond);
    border: 2px solid color-mix(in srgb, var(--cornflower) 80%, white);
}

body .section-neutral.home-level-links .btn-primary {
    background: color-mix(in srgb, var(--yellow) 100%, white);
    color: var(--cornflower);
    border: 2px solid color-mix(in srgb, var(--yellow) 100%, white);
}

body .section-neutral.home-level-links .btn-secondary:hover {
    background: var(--dark-blue);
    color: var(--almond);
    border-color: var(--dark-blue);
}

body .section-neutral.home-level-links .btn-primary:hover {
    background: var(--yellow);
    color: var(--navy);
    border-color: var(--yellow);
}

body .hero-home-aklio .hero-buttons .btn-primary:hover,
body .hero-primaire-aklio .hero-buttons .btn-primary:hover,
body .hero-college-aklio .hero-buttons .btn-primary:hover,
body .hero-lycee-aklio .hero-buttons .btn-primary:hover,
body .hero-credit-aklio .hero-buttons .btn-primary:hover {
    background: var(--corn);
    color: var(--navy);
    border-color: var(--corn);
}
/* =========================================================
   AKLIO HOME — PAGE CRÉDIT D'IMPÔT
   ========================================================= */

.home-official-intro {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}


/* DESKTOP */

.hero-credit-aklio .hero-bottom {
    left: 50%;
    right: auto;

    width: 100%;
    max-width: 900px;

    transform: translateX(-50%);
    text-align: center;
}

.hero-credit-aklio .hero-level-title {
    width: 100%;
    margin: 0 auto 18px;

    color: var(--corn);
    text-align: center;
}

.hero-credit-aklio .hero-buttons {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    margin: 0;
    padding: 0;

    gap: 12px;

    transform: translateY(36px);
}

.hero-credit-aklio .hero-buttons .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    text-align: center;
    box-sizing: border-box;
    white-space: nowrap;
}


/* TABLETTE / MOBILE */

@media (max-width: 980px) {

    .hero-credit-aklio {
        height: auto;
        min-height: 0;
        overflow: visible;
        background: var(--almond);
    }

    .hero-credit-aklio > img {
        display: block;
        width: 100%;
        height: auto;

        object-fit: contain;
        object-position: center;
    }

    .hero-credit-aklio .hero-overlay {
        position: static;
        inset: auto;

        width: 100%;
        max-width: none;

        height: auto;
        min-height: 0;

        margin: 0;
        padding: 0;

        transform: none;
        background: var(--almond);
    }

    .hero-credit-aklio .hero-bottom {
        position: static;

        left: auto;
        right: auto;
        top: auto;
        bottom: auto;

        width: 100%;
        max-width: none;

        margin: 0;
        padding: 24px 20px 26px;

        transform: none;

        text-align: center;
        background: var(--almond);
    }

    .hero-credit-aklio .hero-level-title {
        width: 100%;
        margin: 0 auto 18px;

        color: var(--corn);
        text-align: center;
    }

    .hero-credit-aklio .hero-buttons {
        position: static;

        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;

        justify-content: center;
        align-items: center;

        width: 100%;
        max-width: none;

        margin: 0;
        padding: 0;

        gap: 12px;

        transform: none;
    }

    .hero-credit-aklio .hero-buttons .btn {
        position: static;
        min-width: 0;
        transform: none;
    }
}


/* TÉLÉPHONE */

@media (max-width: 560px) {

    .hero-credit-aklio .hero-level-title {
        font-size: 20px;
        line-height: 1.2;
    }

    .hero-credit-aklio .hero-buttons {
        width: 100%;
        gap: 8px;
        flex-wrap: nowrap;
    }

    .hero-credit-aklio .hero-buttons .btn {
        flex: 1 1 0;
        width: 0;
        min-width: 0;

        padding: 0;

        font-size: 14px;
        line-height: 1.15;

        text-align: center;
        white-space: nowrap;
    }
}

/* =========================================================
   CRÉDIT D'IMPÔT — HIÉRARCHIE DES CARTES
   Même langage visuel que PRIMAIRE
   ========================================================= */


/* 1 — NAVY / CORN */

.credit-function-cards .intro-card {
    background: var(--navy);
    color: var(--almond);
    border-color: var(--navy);
}

.credit-function-cards .intro-card h3 {
    color: var(--corn);
}

.credit-function-cards .intro-card p,
.credit-function-cards .intro-card .icon {
    color: var(--almond);
}


/* 2 — ALMOND / NAVY */

.credit-example-cards .program-card {
    background: var(--almond);
    color: var(--navy);
    border: 2px solid var(--navy);
}

.credit-example-cards .program-card h3,
.credit-example-cards .program-card p,
.credit-example-cards .program-card strong {
    color: var(--navy);
}


/* 3 — CORN / NAVY */

.credit-program-cards .intro-card {
    background: var(--corn);
    color: var(--navy);
    border-color: var(--corn);
}

.credit-program-cards .intro-card h3,
.credit-program-cards .intro-card p,
.credit-program-cards .intro-card .icon {
    color: var(--navy);
}
/* 4 — SKY BLUE / NAVY */

.credit-official-cards .program-card {
    background: var(--sky-blue);
    color: var(--navy);
    border-color: var(--sky-blue);
}

.credit-official-cards .program-card h3,
.credit-official-cards .program-card p {
    color: var(--navy);
}
.credit-official-cards .program-card .btn-secondary {
    background: transparent;
    color: var(--navy);
    border: 2px solid var(--navy);
}

.credit-official-cards .program-card .btn-secondary:hover {
    background: var(--navy);
    color: var(--almond);
}

body .section-neutral.home-bilinguisme h2.home-level-intro-title {
    color: var(--corn);
}

/* ======================================================
   OFFRE AKLIO HOME
======================================================= */

/* Cartes */

.home-offer-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Listes : pas de justification ni de césure */

.home-offer-card ul,
.home-offer-card li {
    text-align: left;
    hyphens: none;
    -webkit-hyphens: none;
}

/* Bloc toujours repoussé en bas de la carte */
.home-offer-card-footer {
    margin-top: auto;
    padding-top: 24px;
}

/* Texte pédagogique du bas */
.home-offer-message {
    margin: 0;
    text-align: left;
    font-weight: 400;
}

/* Prix : espace avec le paragraphe précédent */
.home-offer-price {
    margin: 18px 0 0;
    text-align: left;
    font-size: 1rem;
    font-weight: 400;
    hyphens: none;
    -webkit-hyphens: none;
}

/* Mention crédit d'impôt sous les deux cartes */

.home-offer-tax-note {
    width: 100%;
    max-width: 900px;
    margin: 20px auto 0;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 400;
    opacity: 0.85;
    hyphens: none;
    -webkit-hyphens: none;
}

/* Titre de l'accompagnement commun */

body .section h2.home-offer-included-title {
    color: var(--cornflower);
    text-align: center;
}

.home-offer-registration-note {
    max-width: 900px;
    margin: 24px auto 0;
    text-align: center;
}

.home-offer-registration-note p {
    margin: 0 0 8px;
    text-align: left;
    hyphens: none;
    -webkit-hyphens: none;
}

.home-offer-registration-note p:last-child {
    margin-bottom: 0;
}
/*  logo de la page credit-cours-anglais*/
.home-official-intro .official-logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 180px;
    max-height: 90px;
    margin: 0 auto 20px;
    object-fit: contain;
}

/* =========================================================
   PRIMAIRE — BOUCLE ORANGE "PARCOURS ANNÉE SCOLAIRE"
   ========================================================= */

@media (max-width: 1200px) {
    .primaire-year-plan .primaire-orange2-loop {
        width: 120px;
    }
}

@media (max-width: 950px) {
    .primaire-year-plan .primaire-orange2-loop {
        width: 105px;
        left: -90px;
    }
}

@media (max-width: 700px) {
    .primaire-year-plan .primaire-orange2-loop {
        width: 105px;
        left: -75px;
    }
}
/* Lycée — boucle culture derrière le texte */
.lycee-culture-loop {
    z-index: 0;
}

.home-bilinguisme > h2,
.home-bilinguisme > .split {
    position: relative;
    z-index: 1;
}

/* Avance immédiate : largeur et espacement du contenu */
#avance-immediate {
  padding-inline: 24px;
}

#avance-immediate > h2,
#avance-immediate > h3,
#avance-immediate > p,
#avance-immediate > ol,
#avance-immediate > .home-benefits-grid {
  width: 100%;
  max-width: 960px;
  margin-inline: auto;
  box-sizing: border-box;
}

#avance-immediate > .section-lead {
  max-width: 800px;
  line-height: 1.65;
}

/* Mention de mise en service */
#avance-immediate > .section-lead + p {
  margin-top: 20px;
  margin-bottom: 32px;
  text-align: center;
}

/* Deux cartes de largeur identique */
#avance-immediate > .home-benefits-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 40px;
}

#avance-immediate .intro-card {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 28px;
  text-align: left;
}

#avance-immediate .intro-card h3 {
  margin-top: 0;
  text-align: left;
}

#avance-immediate .intro-card p {
  line-height: 1.65;
}

/* Parcours d’activation */
#avance-immediate > h3 {
  margin-top: 32px;
  margin-bottom: 18px;
  text-align: left;
}

#avance-immediate > ol {
  padding-left: 26px;
}

#avance-immediate > ol > li {
  padding-left: 8px;
  margin-bottom: 18px;
}

#avance-immediate > ol > li > p {
  margin: 0;
  line-height: 1.65;
}

#avance-immediate > ol > li > p > strong {
  display: block;
  margin-bottom: 5px;
}

#avance-immediate > p {
  line-height: 1.65;
}

@media (max-width: 700px) {
  #avance-immediate > .home-benefits-grid {
    grid-template-columns: 1fr;
  }

  #avance-immediate .intro-card {
    padding: 24px;
  }
}
#avance-immediate > h2 {
  color: var(--cornflower);  
}