/* ==========================================================================
   ACCUEIL (contenu_pages/home.php du site 2023)
   Valeurs reprises de styles_site.css et styles_responsive.css (#home_head,
   #video_home, .accordion, #how_work, #step1 à #step4). Racine à 62,5 % :
   1rem = 10px. Le legacy rendait TOUT élément relatif (* { position:
   relative }) : les décalages top/left ci-dessous n'agissent que sur les
   éléments positionnés ici.
   ========================================================================== */

/* ----- Introduction (bloc home__txt1) ------------------------------------ */
.homeIntro {
    position: relative;
    margin-top: 9rem;
    margin-bottom: 10.5rem;
    padding: 0 5rem;
}

/* Flèche manuscrite à gauche du titre (#home_head:before). */
.homeIntro__fleche {
    position: absolute;
    top: 0;
    left: -10.7rem;
}

.homeIntro h1 {
    margin-bottom: 4rem;
    color: var(--color-primary-white);
    font-family: "AvenirLTStd-Black", Arial, sans-serif;
    font-size: 6.4rem;
}

.homeIntro p {
    margin-top: 0.5rem;
    color: var(--color-primary-yellow);
    font-family: "AvenirLTStd-Medium", Arial, sans-serif;
    font-size: 2.7rem;
    text-transform: uppercase;
}

/* Paragraphes en blanc du bloc (classe posée dans TinyMCE). */
.homeIntro .home-white {
    color: var(--color-primary-white);
    font-family: "AvenirLTStd-Medium", Arial, sans-serif;
    font-size: 1.6rem;
    text-transform: none;
}

.homeIntro li {
    margin-top: 1rem;
    margin-left: 25px;
    color: var(--color-primary-white);
    font-family: "AvenirLTStd-Medium", Arial, sans-serif;
    font-size: 1.6rem;
    list-style: disc;
}

/* ----- Vidéo, transcription et boutons (#video_home) --------------------- */
.homeVideo {
    padding: 50px;
    border-radius: 3rem;
    background-color: #243554;
}

/* Lecteur et transcription remontés de 10rem : ils débordent du cadre. */
.homeVideo__lecteur {
    position: relative;
    top: -10rem;
}

.lecteurVideo {
    width: 100%;
    border: 1px solid #000;
    border-radius: 2rem;
    background-color: var(--color-primary-white);
}

/* Accordéon de la transcription (.accordion / .panel de styles.css). La police
   du legacy (EDF2020W01-Bold) n'était jamais chargée : il s'affichait en Arial. */
.homeTranscript__head {
    display: block;
    width: 100%;
    margin-top: 20px;
    padding: 18px;
    background-color: #f7f9fa;
    color: #444;
    font-family: Arial, sans-serif;
    font-size: 1.6rem;
    line-height: 18px;
    text-align: left;
    transition: 0.4s;
}

/* Quand le titre remplit la ligne (mobile), le signe passe dessous et, comme
   en 2023, déborde sur la marge du bouton au lieu de l'agrandir : d'où la
   marge basse négative, égale à la hauteur de ligne. */
.homeTranscript__signe::after {
    content: "+";
    float: right;
    margin-left: 5px;
    margin-bottom: -18px;
    font-size: 20px;
}

.homeTranscript.is-open .homeTranscript__signe::after {
    content: "-";
}

.homeTranscript__body {
    display: none;
    padding: 18px 18px 30px;
    background-color: #f7f9fa;
}

.homeTranscript.is-open .homeTranscript__body {
    display: block;
}

.homeVideo__boutons {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.homeVideo__bouton {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2.5rem 5rem;
    border-radius: 10rem;
    color: var(--color-primary-blue);
    font-family: "AvenirLTStd-Black", Arial, sans-serif;
    font-size: 2.3rem;
    transition: 0.3s ease;
}

.homeVideo__bouton:hover {
    border-radius: 0;
}

.homeVideo__bouton img {
    display: inline-block;
    margin-right: 1.5rem;
}

.homeVideo__bouton--faq {
    background-color: #CAD8F0;
}

.homeVideo__bouton--compte {
    padding-right: 10rem;
    background-color: var(--color-primary-yellow);
}

/* ----- Comment fonctionne MyCDA (#how_work) ------------------------------ */
.homeCalendrier {
    position: relative;
    padding: 0 5rem;
}

.homeCalendrier h2 {
    margin-bottom: 18rem;
    color: var(--color-primary-white);
    font-family: "AvenirLTStd-Black", Arial, sans-serif;
    font-size: 4rem;
}

.homeCalendrier h3 {
    color: var(--color-primary-yellow);
    font-family: "AvenirLTStd-Medium", Arial, sans-serif;
    font-size: 2.1rem;
}

.homeCalendrier p {
    color: var(--color-primary-white);
    font-family: "AvenirLTStd-Medium", Arial, sans-serif;
    font-size: 1.6rem;
}

/* Les étapes sont posées sur la frise (step_work.png), aux places du legacy. */
.homeCalendrier__frise {
    position: relative;
}

.homeCalendrier__frise ul {
    position: absolute;
    width: 100%;
}

.homeCalendrier__etape {
    position: absolute;
}

.homeCalendrier__etape--1 {
    left: 3rem;
}

.homeCalendrier__etape--2 {
    top: -12rem;
    left: 30rem;
}

.homeCalendrier__etape--3 {
    left: 63rem;
}

.homeCalendrier__etape--4 {
    top: -15rem;
    left: 100rem;
}

/* Sous le titre de la date, le texte descend sous la frise. */
.homeCalendrier__etape--1 p,
.homeCalendrier__etape--3 p {
    position: relative;
    top: 10rem;
    left: 17rem;
}

.homeCalendrier__image {
    width: 100%;
}

/* ----- Adaptations (styles_responsive.css) ------------------------------- */
@media screen and (max-width: 1320px) {
    .homeIntro__fleche {
        display: none;
    }
}

@media screen and (max-width: 1270px) {
    .homeCalendrier__etape--4 {
        left: 86rem;
    }
}

/* Frise masquée : les étapes s'empilent sous le titre. */
@media screen and (max-width: 1125px) {
    .homeCalendrier h2 {
        margin-bottom: 2.6rem;
    }

    .homeCalendrier__image {
        display: none;
    }

    .homeCalendrier__frise ul,
    .homeCalendrier__etape {
        position: static;
    }

    .homeCalendrier__etape {
        margin-top: 2rem;
    }

    .homeCalendrier__etape--1 p,
    .homeCalendrier__etape--3 p {
        top: auto;
        left: auto;
    }
}

@media screen and (max-width: 925px) {
    .homeVideo__boutons {
        flex-direction: column;
    }

    .homeVideo__boutons li {
        display: block;
        width: 100%;
    }

    .homeVideo__bouton {
        width: 100%;
        margin-bottom: 2.6rem;
    }
}

@media screen and (max-width: 700px) {
    .homeVideo__bouton {
        font-size: 1.8rem;
    }
}

@media screen and (max-width: 515px) {
    .homeIntro h1 {
        font-size: 5rem;
    }
}

/* Petits téléphones (320px, RGAA 10.11) : en 2023, « DÉCOUVREZ » et les mots
   longs de l'introduction et des titres sortaient de l'écran et faisaient
   défiler la page de côté. Marges et titre réduits, mot trop long coupé, avec
   césure en allemand et en néerlandais pour les mots d'au moins 10 lettres.
   Au-dessus de 380px, l'accueil garde la mise en page de 2023. */
@media screen and (max-width: 380px) {
    .homeIntro {
        padding: 0 2.5rem;
    }

    .homeIntro h1 {
        font-size: 4rem;
    }

    .homeIntro h1,
    .homeIntro p,
    .homeCalendrier h2 {
        overflow-wrap: anywhere;
    }

    .homeIntro h1:lang(de),
    .homeIntro h1:lang(nl),
    .homeIntro p:lang(de),
    .homeIntro p:lang(nl),
    .homeCalendrier h2:lang(de),
    .homeCalendrier h2:lang(nl) {
        -webkit-hyphens: auto;
        hyphens: auto;
        hyphenate-limit-chars: 10 5 5;
    }
}