/* ============================================================
   PAGE : Présentation de MyCDA
   Titres, paragraphes, listes à puce et bouton du compte-titres
   viennent du cadre commun .ct-page (components/contenu_page.css).
   Restent ici les règles propres à la page, reprises de
   styles_site.css et styles_responsive.css du legacy (#period,
   #steps) : la photo à côté des périodes d'attribution et la
   frise des trois étapes.
   ============================================================ */

/* ----- Périodes d'attribution : texte, puis photo à droite ---------- */
.presentationPeriodes {
    display: flex;
    justify-content: center;
    align-items: center;
}

.presentationPeriodes > div {
    margin-right: 5rem;
}

/* La photo garde sa largeur du legacy : sans cela, le max-width
   de base.css la laisserait se tasser dans la ligne flexible. */
.presentationPeriodes img {
    max-width: none;
}

/* ----- Frise des étapes ---------------------------------------------- */
.presentationEtapes ul {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 2.6rem;
}

/* Pas de puce devant une étape : le legacy vidait le ::before, qui
   garde sa marge. */
.presentationEtapes ul li::before {
    content: "";
}

/* ----- Adaptations (styles_responsive.css du legacy) ----------------- */
@media screen and (max-width: 925px) {
    .presentationPeriodes {
        flex-direction: column-reverse;
        align-items: flex-start;
    }

    .presentationPeriodes > div {
        margin: 0 0 2.6rem 0;
    }
}

@media screen and (max-width: 700px) {
    .presentationEtapes ul {
        flex-direction: column;
    }
}

@media screen and (max-width: 480px) {
    .presentationPeriodes img {
        width: 100%;
    }
}