/*
 * Page /propulse (front/propulse/index.html.twig).
 *
 * Tout est scopé sous .propulse-page : la page réutilise les composants du thème
 * (page-title, sec-title, steps-list, recruiter-section, work-block, call-to-action,
 * accordion-box) et ce fichier ne fait que les ajuster. Rien ici ne doit pouvoir
 * déborder sur une autre page.
 *
 * Les paliers responsive suivent ceux du thème (1023 / 991 / 767), pas ceux de
 * Bootstrap.
 */

/* ============ Hero ============ */

.propulse-page .propulse-hero {
    padding: 40px 0 60px;
}

.propulse-page .propulse-hero .page-breadcrumb {
    margin-bottom: 22px;
}

/* Le theme capitalise le fil d'ariane, ce qui afficherait « Propulse ». La marque
   s'ecrit en minuscules. */
.propulse-page .propulse-hero .page-breadcrumb li {
    text-transform: none;
}

.propulse-page .propulse-logo {
    /* .page-title:before est un calque opaque en position:absolute : sans
       position:relative, le logo passe dessous et apparait delave. */
    position: relative;
    display: block;
    height: 53px;
    width: auto;
    margin: 0 auto 24px;
}

.propulse-page .propulse-hero h1 {
    font-size: 40px;
    line-height: 50px;
    font-weight: 600;
    margin-bottom: 18px;
}

.propulse-page .propulse-lead {
    position: relative;
    max-width: 720px;
    margin: 0 auto 28px;
    font-size: 17px;
    line-height: 29px;
    color: #4c5261;
}

.propulse-page .propulse-hero-btns {
    position: relative;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.propulse-page .propulse-points {
    position: relative;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin-top: 34px;
}

.propulse-page .propulse-points li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #696969;
}

.propulse-page .propulse-points i {
    color: #1967D2;
}

/* ============ Rythme vertical des sections ============ */
/* Le thème n'expose pas de .layout-pb-* complet : on gère l'espacement ici. */

.propulse-page .propulse-section {
    position: relative;
    padding: 80px 0;
}

.propulse-page .propulse-features-intro {
    padding: 80px 0 0;
}

/* ============ Comment ça marche ============ */

.propulse-page .propulse-intro {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

.propulse-page .steps-list {
    margin-top: 46px;
}

/* Le thème centre la pastille sur la hauteur du li (top:50%), ce qui la ferait
   flotter au milieu du paragraphe : on la remonte en tête. */
.propulse-page .steps-list li {
    padding: 0 0 0 73px;
    margin-bottom: 42px;
}

.propulse-page .steps-list li:last-child {
    margin-bottom: 0;
}

.propulse-page .steps-list li .count {
    top: 0;
    margin-top: 0;
}

.propulse-page .steps-list li h3 {
    font-size: 18px;
    line-height: 24px;
    font-weight: 500;
    color: #202124;
    margin: 8px 0 10px;
}

.propulse-page .steps-list li p {
    font-size: 15px;
    line-height: 26px;
    font-weight: 400;
    color: #696969;
    margin: 0;
}

/* ============ Features alternées ============ */

.propulse-page .propulse-feature .content-column {
    padding: 70px 0;
}

.propulse-page .propulse-feature .image-column .image img {
    height: 100%;
    max-height: 420px;
    object-fit: cover;
}

/*
 * Image à droite : on inverse le sens de lecture et l'arrondi.
 *
 * On ne touche PAS au retrait interne : le theme pousse le texte de 140px depuis
 * le bord de la fenetre, et l'ordre inverse le fait deja tomber du bon cote.
 * Le neutraliser collait le texte au bord gauche.
 */
.propulse-page .propulse-feature--reverse .outer-box {
    flex-direction: row-reverse;
}

.propulse-page .propulse-feature--reverse .image-column .image img {
    border-radius: 30px 0 0 30px;
}

/* ============ Pourquoi propulse ============ */

.propulse-page .propulse-why .work-block {
    margin-bottom: 40px;
}

/* ============ Bandeau écoles ============ */

/* Le padding-bottom de 10px du thème suppose une image en absolu, qu'on n'a pas. */
.propulse-page .propulse-b2b .outer-box {
    padding: 50px 60px;
}

.propulse-page .propulse-b2b .sec-title {
    margin-bottom: 26px;
}

.propulse-page .propulse-b2b-actions {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 22px;
}

.propulse-page .propulse-b2b-reassure {
    font-size: 14px;
    color: #696969;
}

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

.propulse-page .propulse-faq .accordion-box {
    margin-bottom: 0;
}

.propulse-page .propulse-faq .accordion-box .block {
    margin-bottom: 20px;
}

/* ============ CTA final ============ */

/* Le thème attend une image de fond et 170px de padding : ici, aplat bleu et
   proportions resserrées. */
.propulse-page .propulse-final {
    background: #1967D2;
    padding: 80px 0;
}

.propulse-page .propulse-final .btn-style-five {
    color: #1967D2;
}

.propulse-page .propulse-final .btn-style-five:hover {
    background: #E2EAF8;
    color: #1967D2;
}

/* ============ Responsive (paliers du thème) ============ */

/*
 * Entre 768 et 1023px, le theme ramene le retrait interne de 140 a 50px mais
 * n'en pose aucun a droite, alors que les deux colonnes restent cote a cote.
 * Sur la home le defaut ne se voit pas : les titres y sont courts. Ici les textes
 * remplissent la colonne et venaient toucher le bord de la fenetre.
 */
@media only screen and (max-width: 1023px) {
    .propulse-page .propulse-feature .content-column .inner-column,
    .propulse-page .propulse-feature--reverse .content-column .inner-column {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media only screen and (max-width: 991px) {
    .propulse-page .propulse-hero h1 {
        font-size: 32px;
        line-height: 42px;
    }
}

@media only screen and (max-width: 767px) {
    .propulse-page .propulse-hero {
        padding: 30px 0 45px;
    }

    .propulse-page .propulse-hero h1 {
        font-size: 26px;
        line-height: 36px;
    }

    .propulse-page .propulse-lead {
        font-size: 15px;
        line-height: 26px;
    }

    .propulse-page .propulse-section {
        padding: 50px 0;
    }

    .propulse-page .propulse-features-intro {
        padding: 50px 0 0;
    }

    .propulse-page .propulse-feature .content-column {
        padding: 40px 0;
    }

    /* En pile, les arrondis latéraux du thème n'ont plus de sens. */
    .propulse-page .propulse-feature .image-column .image img,
    .propulse-page .propulse-feature--reverse .image-column .image img {
        border-radius: 0;
    }

    .propulse-page .propulse-b2b .outer-box {
        padding: 40px 25px;
    }

    .propulse-page .propulse-final {
        padding: 50px 0;
    }
}