/* =========================================================================
   PAGE STAGE
   -------------------------------------------------------------------------
   Principe : #app_stage porte l'échelle de la page (font-size fluide).
   Tout le reste est exprimé en `em`, donc relatif à cette échelle : une
   seule valeur pilote textes, marges et paddings de toute la page.

   Exceptions assumées : les grands titres d'affichage (hero, encart) gardent
   un clamp propre, car leur amplitude mobile→bureau (32px → 110px) est bien
   supérieure à celle du texte courant (15px → 21px).

   Anti-débordement : toutes les grilles utilisent minmax(0, 1fr) — un simple
   `1fr` vaut `minmax(auto, 1fr)` et refuse de descendre sous la largeur de
   son contenu, ce qui provoque l'ascenseur horizontal.
   ========================================================================= */

/* ----- MAIN ----- */
#app_stage {
    width: 80%;
    max-width: 1440px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "hero";
    justify-items: center;
    margin-top: 50px;

    /* ÉCHELLE DE LA PAGE : la seule valeur à ajuster */
    font-size: clamp(15px, 1.4vw, 21px);
}

/* Légende de carte (partagée par les sections) */
.card-caption {
    flex-shrink: 0;
    margin: 1em auto 0;
    text-align: center;
    max-width: 22ch;
    text-wrap: balance;
    font-size: 1em;
}

.stage_hero,
.stage_intro,
.stage_discover,
.stage_realisation,
.stage_activities,
.stage_practical {
    margin: 1rem 0;
}

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


/* ----- HERO - START ----- */
.stage_hero {
    grid-area: hero;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
    row-gap: 1.5em;
    margin-top: clamp(4em, 20vw, 16em);
    width: 100%;


    &>img {
        width: 70%;
        max-width: 380px;
    }

    .wrapper {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .stage_hero-heading {
        margin: 0;
        line-height: 1;
        text-shadow: #000000 2px 2px;
        font-size: clamp(32px, 7.5vw, 110px);

        & span {
            display: block;
            text-transform: uppercase;
        }
    }

    .content {
        font-size: 1.3em;
        margin: .6em 0 0;
    }

    /* Media - Bureau START */
    @media only screen and (min-width: 992px) {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        column-gap: 4%;
        justify-items: stretch;
        text-align: right;

        &>img {
            width: 100%;
            max-width: 500px;
        }

        .wrapper {
            align-self: stretch;
            /* étire la colonne texte sur la hauteur de l'image */
            justify-content: space-between;
            /* titre en haut, sous-titre en bas */
            align-items: flex-end;
            /* collé au bord droit */
        }

        .content {
            margin: 0;
            max-width: 34ch;
        }
    }

    /* Media - Bureau END */
}

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


/* ----- stage - intro ----- */
.stage_intro {
    width: 100%;


    .stage_intro-title {
        font-size: clamp(22px, 4.5vw, 64px);
        line-height: 1.15;
        margin: 1em 0 .4em;
    }

    .is-green {
        color: var(--couleur-vert);
    }

    .is-yellow {
        color: var(--couleur-jaune);
    }

    p {
        font-size: 1em;
        margin: 1em 0;
    }
}


/* ----- stage - discover ----- */
.stage_discover {
    width: 100%;

    .wrapper {
        width: 100%;
    }

    /* Titre + flèche, alignés à gauche sur toutes les tailles */
    .title {
        display: flex;
        align-items: center;
        gap: 1em;
        margin-top: 2em;
    }

    .title img {
        flex-shrink: 0;
        width: 1.6em;
    }

    .stage_discover-subtitle {
        margin: 0;
        font-size: 1.6em;
    }

    /* Grille : 1 colonne en mobile → 3 côte à côte en bureau */
    .card_grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 2em;
        margin: 1.5em 0 3em;
    }

    /* La carte devient une colonne : le corps remplit la hauteur,
       donc toutes les cartes d'une ligne ont la même hauteur */
    .card {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .card-content {
        box-sizing: border-box;
        flex: 1;
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    /* Image : hauteur proportionnelle à l'échelle de la page */
    .card-content>img {
        height: 9em;
        width: 100%;
        object-fit: contain;
        object-position: center;
    }

    .card-caption span {
        display: block;
    }

    /* ----- « Mais aussi » : image pleine carte + légende sous la carte ----- */
    .card_grid.is-full .card_item {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .card_grid.is-full .card {
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .card_grid.is-full .card-content {
        padding: 0;
        flex: 1;
        min-height: 0;
    }

    .card_grid.is-full .card-content>img {
        width: 100%;
        aspect-ratio: 4 / 3;
        height: auto;
        object-fit: cover;
        object-position: center;
        display: block;
    }

    .card_grid.is-full .card-caption {
        margin: 1em auto 0;
        text-shadow: none;
    }

    /* Media - Bureau START */
    @media only screen and (min-width: 992px) {
        .card_grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .card_grid.is-full .card-content>img {
            aspect-ratio: 1 / 1;
        }
    }

    /* Media - Bureau END */
}


/* ----- section realisation ----- */
.stage_realisation {
    width: 100%;
    /* indispensable : contre justify-items: center */
    text-align: center;

    /* Phrase « Et surtout, ils passent de l'idée à la réalisation. » */
    &>h3 {
        font-family: var(--font-bold);
        font-size: 2.5em;
        margin: 0 0 2em;
        font-weight: 800;
    }
}

.stage_motto {
    --or-clair: #fffcf5;
    --or: #fcd06b;

    box-sizing: border-box;
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    padding: 2.5em 0 0;
    border: 3px solid var(--or);
    border-radius: 1.2em;
    overflow: hidden;
    background: linear-gradient(to right, var(--or-clair), var(--or));
    box-shadow: 6px 6px 0 var(--couleur-blanc);
}

.stage_motto h3 {
    margin: 0;
    padding: 1em;
    background: var(--couleur-noir);
    color: var(--couleur-blanc);
    font-family: var(--font-ultra-bold);
    text-align: center;
    line-height: 1.25;
    font-size: clamp(22px, 4.2vw, 49px);
}


/* ----- section activities ----- */
.stage_activities {
    width: 100%;
    text-align: left;

    .wrapper {
        width: 100%;
    }

    p {
        margin: 1.5em 0;
        font-size: 1em;
    }

    .stage_activities-list {
        list-style: none;
        padding: 0;
        margin: 1.5em 0;

        & li {
            display: flex;
            align-items: center;
            gap: .8em;
            margin: .4em 0;
            font-size: 1em;
        }

        & li img {
            flex-shrink: 0;
            width: 1.2em;
            height: 1.2em;
            object-fit: contain;
        }
    }

    /* Frise des activités */
    .stage_roadmap {
        display: block;
        width: 100%;
        height: auto;
        margin: 2em auto;
    }
}


/* ----- section practical ----- */
.stage_practical {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;

    &>p {
        text-align: left;
        margin: 1.5em 0;
        font-size: 1em;
    }

    /* Grille : 1 colonne en mobile → 3 côte à côte en bureau */
    .card_grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 2em;
        margin: 1.5em 0 2.5em;
    }

    .card {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    /* Bandeau : titre à gauche, boutons de fenêtre à droite */
    .card article:first-child {
        justify-content: space-between;
        align-items: center;
        padding-left: .8em;
    }

    .card-header-title {
        margin: 0;
        color: var(--couleur-blanc);
        text-shadow: #000 1px 1px;
        font-size: 1.4em;
    }

    /* Corps noir, texte centré */
    .card-content {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1.5em;
        background: var(--couleur-noir);
        text-align: center;
        min-width: 0;
    }

    .card-content p {
        margin: 0;
    }

    /* Bouton « Je m'inscris » centré */
    .button-main {
        display: inline-flex;
        align-self: center;
        font-size: 1.3em;
    }

    /* Media - Bureau START */
    @media only screen and (min-width: 992px) {
        .card_grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

    /* Media - Bureau END */
}


/*--------------------------------------------------SECTION 5 AVIS Start---------------------------------------------*/

.bouton-précédent,
.bouton-suivant {
    background: none;
    border: none;
}

.avis {
    width: 120%;
    margin-top: 1.5rem;
}

/* Conteneur pour cacher les cartes en dehors de la vue */
.slider-wrapper-avis {
    overflow: hidden;
    /* Cache les cartes en dehors de la vue */
    position: relative;
    flex: 1;
    min-width: 0;
}

/* Conteneur des cartes pour les animations */
.slider-avis {
    display: flex;
    transition: transform 0.8s ease-in-out;
    /* Animation fluide */
    gap: 20%;
    padding-bottom: 2rem;
}

.avis .carte-avis {
    /* Ajout pour le slider */
    flex: 0 0 100%;
    /* Chaque carte prend 100% de la largeur du conteneur */
}

.carte-avis:first-child {
    display: block;
    /*affiche la première carte*/
}

.avis .carte-avis .card {
    margin: 0 auto;
    width: 90%;
    /* était 66vw : calé sur le conteneur, plus sur la fenêtre */
    box-sizing: border-box;
}

.avis .carte-avis .card .multicolor-card {
    background: var(--couleur-vert);
}

.avis .carte-avis .card .card-content>img {
    display: none;
}

.carte-avis .card .card-content {
    text-align: center;
}

.carte-avis .card .card-content h4 {
    font-family: var(--font-regular);
}

.carte-avis .card .card-content .card-description {
    padding: 1em;
    height: 58px;
    overflow: hidden;
}

.carte-avis .card .card-content span {
    color: var(--couleur-vert);
    font-weight: bolder;
    display: block;
    /* était margin-left: 35vw */
    text-align: right;
    padding-right: 1em;
    position: relative;
    top: -1em;
    font-size: 18px;
    font-style: normal;
    font-family: var(--font-regular);
}

#boutons-avis {
    display: flex;
    align-items: center;
    /* Centrage vertical */
    justify-content: center;
    gap: 1em;
    height: min-content;
}

#boutons-avis .bouton-précédent img,
#boutons-avis .bouton-suivant img {
    max-width: none;
}

#boutons-avis>.bouton-suivant {
    transform: scaleX(-1);
    flex-shrink: 0;
}

#boutons-avis>.bouton-précédent {
    flex-shrink: 0;
}

.avis .section-selector {
    display: none;
}


@media only screen and (min-width: 768px) {
    .avis {
        text-align: center;

        .bouton-adhérants {
            display: none;
        }

        .section-selector {
            margin: 7em 0;
            display: inline-block;
        }
    }

    .slider-wrapper-avis {
        padding: 0 0 4em 0;
    }

    .slider-avis {
        gap: 3rem;
    }

    .avis .carte-avis {
        max-width: 30%;
        padding: 2%;
        margin: 20px 0;
        box-sizing: border-box;
        transform: scale(.9);
        cursor: pointer;
        display: flex;
        transition: all .5s ease;

        .card {
            background-color: var(--couleur-noir);
            width: auto;
            height: auto;
            overflow: visible;

            .card-content {
                padding: 0 3%;
                display: flex;
                flex-direction: column;
                align-items: center;
                height: 100%;
                justify-content: space-around;
                /* passer de flex-end a space around pour mieux coller a la maquette. Renaud*/

                .card-title {
                    font-size: 20px;
                }

                &>p {
                    font-size: 14px;
                    order: -1;
                    margin: 0;
                    height: auto;
                }

                .read-more {
                    display: none;
                }

                &>img {
                    display: initial;
                    border: solid 2px var(--couleur-blanc);
                    border-radius: 1em;
                    width: 60%;
                }
            }
        }

        &.active {
            transform: scale(1.05);
            transition: all .5s ease;
        }

        &:nth-child(3n-1) .multicolor-card {
            background: var(--couleur-jaune);
        }

        &:nth-child(3n-2) .multicolor-card {
            background: var(--couleur-rose);
        }
    }
}

/*--------------------------------------------------SECTION 5 AVIS End---------------------------------------------*/