/* -------------------------------------- */
/*                 HERO                  */
/* -------------------------------------- */

.intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
    text-align: center;
    justify-content: space-evenly;
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
    margin-top: 2%;
    height: auto;
    min-height: 80vh;
    font-family: var(--font-main);
    text-align: center;
    position: relative;


    .hero-heading {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        color: var(--primary-blue);
        font-weight: var(--weight-bold);

        span {
            font-family: "Kalam", cursive;
            color: var(--gray-600);
             font-weight: var(--weight-medium);
        }
    }

    /* 💡 NOUVELLE CLASSE POUR LE SOUS-TITRE */
    .subtitle {
        max-width: 800px;
        /* Limite la largeur pour une meilleure lisibilité */
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 0;
        color: var(--gray-400);

        font-size: var(--font-size-medium);
        /* Légèrement plus grand que le corps de texte */
        font-weight: var(--weight-light);
        /* Moins gras que le titre, plus qu'un paragraphe */
        line-height: var(--line-normal);

        text-align: center;
        /* Pour le centrage du texte à l'intérieur du max-width */

        /* Pour un espacement plus serré sous le H1 que le gap par défaut du .intro */
        /* margin-top: calc(-1 * var(--space-8));  */

        @media (max-width: 768px) {
            font-size: var(--font-size-base);
            padding: 0 var(--space-2);
        }
    }
}

/* * Image décoratives * */
.deco_intro_img {
    position: absolute;
    width: 15%;

    height: auto;
    z-index: 1;
    box-shadow: none;


    /* yellow line  */
    &:nth-child(1) {
        /* right: 80%;
        top: 40%;
        width: 10%; */
        right: auto;
        /* Supprime l'ancienne position */
        left: 10%;
        /* Déplace vers la gauche */
        top: 5%;
        /* Près du haut */
        width: 8%;
        /* Légèrement plus petite */
        transform: rotate(-10deg);
        opacity: 0.8;
        /* Ajoute un léger angle pour le dynamisme */
    }

    /* light purple line  */
    &:nth-child(2) {
        right: 70%;
        top: 2710px;

    }


    &:nth-child(3) {
        right: auto;
        left: 75%;
        /* Déplace vers la gauche */
        top: 50%;
        /* Près du haut */
        width: 8%;
        transform: rotate(-10deg);

    }
}


/* @media (max-width: 768px) {
    .intro {
        img {
            display: none;
        }
    }
}
 */

@media (max-width: 768px) {

    .sticky-img {
        display: none;
    }

    .intro img {
        display: none;
    }
}

.hero-heading {
    width: 60%;

    span {
        font-family: "Kalam", cursive;
        /* text-decoration: underline; */
        /* text-decoration-thickness: 0.4rem; */
    }
}



@media (max-width: 768px) {
    .hero-heading {
        width: 90%;
        /* s'adapte mieux aux petits écrans */
    }

    .intro {
        padding-top: var(--space-8);
        padding-bottom: var(--space-8);
    }
}

/* -------------------------------------- */
/*                 MAIN                   */
/* -------------------------------------- */

.main-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/**  ----------------  ***/
/**  LE BIG CONTENEUR  ***/
/**  ----------------  ***/

.content-section {
    /*! doit être en 100% */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-8);
    margin: var(--space-6) var(--space-4);
    /* border: 6px solid rgb(139, 0, 93); */
    width: 100%;
    height: fit-content;
    margin: 0 auto;

    /* * --- le sous conteneur --- **/
    .section-content {
        /*! doit être en 90/80%*/
        padding: var(--space-4) var(--space-2);
        /* padding : top+bottom right+left*/
        /* border: green 12px solid; */
        min-width: 70%;
        max-width: 90%;
    }

    /** ------------------------ --- */
    /** ------- Section titre ------ */
    /** ------------------------ --- */

    .section-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        width: 60%;
        box-sizing: border-box;
        max-width: 1200px;
        /* border: 2px solid lightblue; */
        text-align: center;
        padding: var(--space-4);
        /* margin: var(--space-4); */
    }

    @media (max-width: 768px) {
        .content-section {
            margin: var(--space-2) 0;
            /* Réduit les marges */
            padding: var(--space-4) var(--space-1);
            /* Au lieu de --space-12 */
        }

        .section-header {
            padding: var(--space-2);
            /* Au lieu de --space-4 */
            width: 90%;
            /* Plus large sur mobile */
        }

        .section-content {
            padding: var(--space-2) var(--space-1);
            min-width: 95%;
            /* Utilise presque toute la largeur */
        }
    }

    /** ------------------------ --- */
    /** --- Layout deux colonnes --- */
    /** ------------------------ --- */

    /* ** ===================== Section "Why?" 50/50%================== */
    .section-content.two-col {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        /* justify-content: space-around; */
        align-items: top;
        gap: var(--space-6);
        padding: var(--space-4);
        box-sizing: border-box;

        .col-left,
        .col-right {
            flex: 1 1 50%;
            display: flex;
            flex-direction: column;
            gap: var(--space-4);
            /* border: 2px solid lightblue; */
            border-radius: var(--radius-sm);
            line-height: var(--line-normal);
            padding: var(--space-6);

            .autism_illu {
                width: 100%;
                height: 100%;
                max-height: 600px;
                object-fit: cover;
            }

            .heading-container {
                display: flex;
                align-items: center;
                justify-content: flex-start;
                gap: 2%;

                i {
                    /* icone Font Awsome */
                    color: var(--gray);
                    font-size: var(--font-size-large);
                }
            }

            .text-container {
                /*padding-left: 6%;  décalage gauche */
            }
        }
    }

    @media (max-width: 768px) {
        .section-content.two-col {
            flex-direction: column;
            gap: var(--space-2);
            width: 100%;

        }

        .col-left,
        .col-right {
            /* flex: 1 1 100%; */
            width: 100%;

        }

        .col-right img {
            width: 100%;
            /* image responsive */
            height: auto;
        }
    }

    /* ===================== Timeline ===================== */

    /* === Conteneur principal === */
    .timeline {
        position: relative;
        /* Permet de positionner les éléments enfants en absolu */
        padding-left: var(--space-12);

        /* Espace à gauche pour la ligne + cercles (3rem = 48px) */
        /* Augmenter pour plus d'espace, diminuer pour rapprocher */
        @media (max-width: 768px) {
            padding-left: var(--space-6);
        }

    }

    /* === Ligne verticale continue === */
    .timeline::before {
        content: '';
        /* Crée un pseudo-élément vide (obligatoire) */
        position: absolute;
        /* Se positionne par rapport à .timeline */
        left: var(--space-4);
        /* Position depuis le bord gauche (1rem = 16px) */
        top: 0;
        /* Commence tout en haut */
        bottom: 0;
        /* Va jusqu'en bas */
        width: 1px;
        /* Épaisseur de la ligne */
        background: var(--gray-800);
        /* Couleur de la ligne  */

        @media (max-width: 768px) {
            top: -100;
            left: 0;
        }

    }

    /* === Chaque élément de la timeline === */
    .timeline-item {
        position: relative;
        /* Permet de positionner les cercles par rapport à cet item */
        margin-bottom: var(--space-8);
        /* Espace vertical entre chaque item (2rem = 32px) */
        padding-left: var(--space-6);

        /* Espace entre le cercle et le texte (1.5rem = 24px) */
        @media (max-width: 768px) {
            padding-left: 0;
            -padding-left: 0;
        }
    }

    /* === Cercles sur la ligne === */
    .timeline-item::before {
        content: '';
        /* Crée un pseudo-élément vide */
        position: absolute;
        left: calc(-1 * var(--space-8) - 16px);
        /* Position du cercle sur la ligne */
        /*  déplacer le cercle : changer les pixels */
        top: 0;
        /* Aligné avec le haut du texte */
        width: 35px;
        /* Largeur du cercle */
        height: 35px;
        /* Hauteur du cercle (identique = cercle parfait) */
        border-radius: 50%;
        background: #3b3b3b;

        @media (max-width: 768px) {
            left: calc(-1 * var(--space-8) - 2px);
            width: 25px;
            height: 25px;
        }

    }

    /* === Numérotation manuelle des items === */
    .timeline-item:nth-child(1)::after {
        content: '1';
    }

    .timeline-item:nth-child(2)::after {
        content: '2';
    }

    .timeline-item:nth-child(3)::after {
        content: '3';
    }

    .timeline-item:nth-child(4)::after {
        content: '4';
    }

    /* === Style des numéros === */
    .timeline-item::after {
        position: absolute;
        left: calc(-1 * var(--space-8) - 4px);
        /* Position du numéro (centré dans le cercle) */
        /* Calcul : -2rem - 8px = -40px */
        /* à ajuster si taille du cercle changée */
        top: 5px;
        right: 6px;
        /* Décalage vertical pour centrer le chiffre */
        color: white;
        font-weight: var(--weight-bold);
        font-size: var(--font-size-small);

        @media (max-width: 768px) {
            left: calc(-1 * var(--space-8) - -5px);
            top: 2px;
            font-size: var(font-size-extra-small);
        }

    }

    /** ===================== Section "How?" 40/60%================== **/
    .section-content.two-col.reverse {

        @media (max-width: 768px) {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex-grow: 1;
            padding: 0px;
        }

        .col-left {
            flex: 0 0 40%;
            max-width: 40%;
            /* Assure que ça ne dépasse pas 30% */

            @media (max-width: 768px) {
                flex: 0 0 100%;
                min-width: 100%;
            }

            .text-container {
                @media (max-width: 768px) {
                    padding: var(--space-1);
                }
            }
        }

        .col-right {
            flex: 0 0 60%;
            /* Fixe à 70% */
            max-width: 60%;
            background-color: #f2f2f2;


            z-index: 10;

            i {
                color: var(--primary-blue-2);
            }

            @media (max-width: 768px) {
                padding: 0px;
                width: 100%;
                min-width: 80%;

                .heading-container {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    text-align: center;
                    gap: var(--space-2);
                }
            }
        }
    }
}


/** ===================== Section "Explorer" / cards ================== **/
/* Section content cards  */
.section-content.card-grid {
    display: flex;
    align-items: stretch;
    /* test cards, old : center */
    gap: var(--space-8);
    justify-content: space-evenly;

    .card {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-evenly;
        flex: 1 1 0;
        /* min-height: 400px; */
        max-height: 15%;
        gap: var(--space-2);
        padding: var(--space-4) var(--space-4);
        text-align: left;
        position: relative;
        overflow: hidden;

        /* Effets lien */
        cursor: pointer;
        transition: transform 0.2s,
            box-shadow 0.2s;

        &:hover {
            transform: translateY(-4px);
            box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.12);
        }

        &:focus-visible {
            outline: 3px solid var(--accent);
            outline-offset: 4px;
            box-shadow: 0px 0px 0px 4px rgba(74, 168, 255, 0.3);
        }


        /* selectionne les em dans les cards */
        h4 {
            font-weight: 700;
            font-size: var(--font-size-large);
            color: var(--gray-800);

            em {
                font-family: "Kalam", cursive;
                font-style: normal;
                font-weight: 600;
                letter-spacing: var(--letter-normal);
                font-size: var(--font-size-large);
            }
        }

        p {
            font-size: var(--font-size-small);
        }

        &:nth-child(1) {
            /* couleurs des cards */
            color: var(--gray-800);
            background-color: var(--primary-200);
        }

        &:nth-child(2) {
            color: var(--white);
            background-color: var(--primary-blue);

            h5 {
                color: var(--white);
            }
        }

        &:nth-child(3) {
            color: var(--gray-800);
            background-color: var(--accent);
        }

        .ribbon {
            width: 50%;
            height: auto;
            box-shadow: none;
        }

        .deco {
            width: 60%;
            height: auto;
            position: absolute;
            top: -40px;
            right: -50px;
            z-index: 1;
            box-shadow: none;
        }
    }
}


@media (max-width: 768px) {
    .section-content.card-grid {
        flex-direction: column;
        gap: var(--space-4);

        .card {
            flex: none;
            width: 100%;
            min-width: 100%;
            max-width: 100%;
            /* min-height: 80vh; */
        }

    }


    .card img {
        width: 100%;
        height: auto;
    }
}


.img_transition {
    /* wave */
    width: 20%;
    box-shadow: none;


    @media (max-width: 768px) {
        width: 40%;
    }
}

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

.FAQ {
    display: flex;
    flex-direction: column;
    gap: 0;
    z-index: 10;

    width: 60%;
    max-width: 500px;
    /* limitet la largeur maximale  */

    /*Centrez la FAQ dans son parent */
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    /* ! Q° Aude : panels qui s'ouvrent parcielement au premier coup, mais ok après = why?  */
}

.containerAccordion {
    background-color: var(--primary-200);
    /* barre sur coté de l'accordéon */
    border-left: 5px solid var(--primary-blue-2);
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    margin-bottom: var(--space-2);
}

.accordion {
    background-color: var(--primary-200);
    cursor: pointer;
    padding: var(--space-4);
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    outline: none;
    font-size: var(--font-size-base);
    font-weight: var(--weight-bold);
    transition: background-color 0.3s ease;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.accordion:hover {
    background-color: var(--primary-300);
}

.accordion:focus {
    outline: 2px solid var(--primary-600);
    outline-offset: -2px;
}

.accordion::-webkit-details-marker {
    /* Retire le triangle par défaut */
    display: none;
}

.accordion::marker {
    display: none;
}

.accordion::after {
    /* Icône + qui devient - */
    content: '\002B';
    /* symbole "+" */
    color: var(--primary-800);
    font-weight: bold;
    float: right;
    margin-left: var(--space-2);
    transition: transform 0.3s ease;
}

.containerAccordion[open] .accordion {
    /* Quand ouvert */
    background-color: var(--primary-200);
    border-bottom: 1px solid var(--primary-500);
}

.containerAccordion[open] .accordion::after {
    content: "\2212";
    /* symbole "-" */

}

.panel {
    /* Panel (contenu) */
    padding: var(--space-4);
    background-color: var(--primary-200);
    line-height: 1.6;
    color: var(--gray-800);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: break-word;

    p {
        overflow-wrap: break-word;
    }
}

@media (max-width: 768px) {
    .accordion {
        padding: var(--space-3);
        font-size: var(--font-size-small);
    }

    .panel {
        padding: var(--space-3);
        font-size: var(--font-size-small);
    }
}


/** ===================== Section "About" Colorblock ================== **/
.colorblock_section {
    background-color: var(--primary-blue);
    /* padding: var(--space-2); */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    /* border: green 2px solid; */
    h2,
    h3 {
        /* force à être blanc (sinon gris)*/
        color: var(--white);
        font-weight: var(--weight-medium);
    }

    .section-header {
        margin-top: 2%;
    }

    .container-about {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-evenly;
        padding: var(--space-1);
        gap: var(--space-2);
        color: var(--white);
        /* border: 2px solid gold; */
        max-width: 80%;



        @media (max-width: 768px) {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: var(--space-1);
        }


        .container-img {
            /* display: flex;
            flex-direction: column; */
            width: 18%;
            align-items: center;
            text-align: center;

            @media (max-width: 768px) {
                width: 100%;
            }

            img {
                max-width: 100%;
                height: auto;
            }
        }

        .container-quote {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: space-evenly;
            gap: var(--space-4);
            width: 70%;
            padding: var(--space-4);

            @media (max-width: 768px) {
                width: 100%;
                text-align: center;
                padding: 0px;
                text-wrap: wrap;
                font-size: var(--font-size-small);
            }


            blockquote {
                /* global CSS */
            }
        }
    }
}

@media (max-width: 768px) {
    .container-about {
        display: flex;
        flex-direction: column;
        align-items: center;

    }
}


/* ------------------------------------------------------- */
/*                 Footer - cf. Global css                 */
/* ------------------------------------------------------- */