/**
 * Swift Academy — adaptations responsive.
 * Aucun artboard mobile n'existe dans le Figma : ces valeurs sont derivees
 * du desktop et doivent etre revalidees en recette.
 */

/* --- Tablette large --- */
@media (max-width: 1200px) {
    .swift-lp {
        --swift-gutter: 32px;
    }

    .swift-programme__grid {
        gap: 24px;
    }

    .swift-card {
        min-height: 580px;
        padding: 32px 28px 36px;
    }

    .swift-card__title {
        margin-top: 64px;
        font-size: 26px;
    }

    .swift-card__text {
        margin-top: 32px;
    }
}

/* --- Tablette --- */
@media (max-width: 1024px) {
    .swift-h2 {
        font-size: 36px;
    }

    .swift-hero__academy {
        font-size: 56px;
        letter-spacing: 6px;
        text-indent: 6px;
    }

    .swift-programme__grid {
        grid-template-columns: 1fr;
        gap: 24px;
        max-width: 520px;
        margin-inline: auto;
    }

    .swift-card {
        min-height: 560px;
        padding: 32px 28px 56px;
    }

    .swift-card__title {
        margin-top: 40px;
    }

    .swift-cities__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .swift-intro,
    .swift-join {
        padding: 72px 0;
    }
}

/* --- Mobile --- */
@media (max-width: 767px) {
    .swift-lp {
        --swift-gutter: 20px;
    }

    .swift-hero {
        min-height: 600px;
    }

    .swift-hero__logo {
        width: 200px;
    }

    .swift-hero__academy {
        font-size: 34px;
        letter-spacing: 3.5px;
        text-indent: 3.5px;
    }

    .swift-hero__swift {
        max-width: 78vw;
    }

    /* Suit la remontee du desktop a 24px : 13px aurait fait une chute de 46 %. */
    .swift-hero__baseline {
        margin-top: 24px;
        font-size: 18px;
    }

    .swift-hero__curated {
        margin-top: 32px;
    }

    .swift-h2 {
        font-size: 28px;
    }

    .swift-intro__text,
    .swift-join__text,
    .swift-cities__intro {
        font-size: 13px;
    }

    .swift-cities__grid {
        grid-template-columns: 1fr;
        max-width: 360px;
        margin-inline: auto;
    }

    .swift-marquee__mark { height: 32px; }
    .swift-marquee__logo { height: 26px; }

    .swift-marquee__dot {
        width: 10px;
        height: 10px;
    }

    .swift-marquee__group {
        gap: 28px;
        padding-right: 28px;
    }

    .swift-programme,
    .swift-cities {
        padding: 64px 0;
    }
}

/* --- Bandeau de pre-inscription --- */

@media (max-width: 1200px) {
    .swift-prereg__title {
        font-size: 48px;
    }
}

@media (max-width: 1024px) {
    .swift-prereg {
        padding: 64px var(--swift-gutter) 56px;
    }

    .swift-prereg__title {
        font-size: 36px;
    }
}

@media (max-width: 767px) {
    .swift-prereg__title {
        font-size: 28px;
        letter-spacing: 1px;
    }
}

/* --- Stay in the loop --- */

@media (max-width: 1024px) {
    /* Bas fige a 60 comme dans la regle de base : le raccourci l'aurait remonte
       a 72 en retrecissant l'ecran. */
    .swift-follow {
        padding: 72px 0 60px;
    }

    .swift-follow__title {
        font-size: 32px;
    }
}

@media (max-width: 767px) {
    .swift-follow {
        padding: 56px 0;
    }

    .swift-follow__title {
        font-size: 26px;
    }

    .swift-follow__list {
        gap: 12px;
        margin-top: 28px;
    }

    .swift-follow__pill {
        min-height: 40px;
        padding: 0 20px;
        font-size: 12px;
    }
}

/* --- Bas de page --- */

@media (max-width: 1024px) {
    .swift-join__title {
        font-size: 36px;
    }
}

@media (max-width: 767px) {
    .swift-join__title {
        font-size: 26px;
    }
}

/* --- Mentors --- */

@media (max-width: 1024px) {
    /* Le bas reste a 60 comme dans la regle de base : le raccourci « 72px 0 »
       l'aurait augmente en retrecissant l'ecran. */
    .swift-mentors {
        padding: 72px 0 60px;
    }

    .swift-mentors__title {
        font-size: 28px;
    }

    .swift-mentor__name {
        font-size: 36px;
    }

    /* Sous 1024 la grille passe en colonne unique : des fleches sur les bords
       recouvriraient la photo. Elles reprennent leur place en ligne avec les
       puces, ce que leur position dans le DOM permet sans changer le balisage. */
    .swift-mentors__arrow {
        position: static;
        transform: none;
        width: 44px;
        height: 44px;
    }
}

/* Sous 768 la colonne unique remet le titre dans le flux : plus besoin de le
   superposer ni de reserver sa hauteur dans les slides. */
@media (max-width: 767px) {
    .swift-mentors {
        padding: 56px 0;
    }

    .swift-mentors__grid,
    .swift-mentor {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .swift-mentors__head {
        position: static;
        left: auto;
        right: auto;
    }

    .swift-mentor__body {
        padding-top: 0;
    }

    /* Le titre reprend sa place dans le flux, il lui faut donc un dessous ;
       et le nom perd les 60 px qui, en grand ecran, le decalaient sous le bloc
       titre superpose. */
    .swift-mentors__title {
        margin-bottom: 28px;
        font-size: 24px;
    }

    .swift-mentor__name {
        margin-top: 10px;
        font-size: 30px;
    }

    .swift-mentors__nav {
        margin-top: 28px;
    }


}

/* Entre 1025 et 1400, le conteneur n'a plus assez de marge naturelle pour
   degager les fleches : elles occupent 16 -> 72 px depuis le bord, alors que
   le contenu demarre a 24 px des 1296 px de large. On elargit la gouttiere de
   la seule section mentors, ce qui laisse 16 px de respiration a 1025 comme a
   1400. En dessous de 1025 les fleches repassent en ligne, la question ne se
   pose plus. */
@media (min-width: 1025px) and (max-width: 1400px) {
    .swift-mentors {
        --swift-gutter: 88px;
    }
}

/* --- Ce que vous obtenez --- */

@media (max-width: 1024px) {
    /* Pas de palier de padding ici : la base est passee a 60, les 72 d'origine
       l'auraient augmente en retrecissant l'ecran. */
    .swift-resources__title {
        font-size: 32px;
    }
}

@media (max-width: 767px) {
    .swift-resources {
        padding: 56px 0;
    }

    .swift-resources__title {
        font-size: 26px;
    }

    .swift-resources__grid {
        margin-top: 32px;
    }

    /* Une colonne : le flex-basis de 424 empecherait le bloc de retrecir. */
    .swift-resource {
        flex: 1 1 100%;
        min-height: 0;
    }
}

/* --- Deroule --- */

@media (max-width: 1024px) {
    /* Meme raison qu'au-dessus : base a 60, le palier de 72 l'augmentait. */
    .swift-timeline__title {
        font-size: 26px;
    }

    /* column-gap et non gap : le raccourci ecarterait aussi les rangees, ce qui
       eloignerait le titre de son rond et le texte de son titre. */
    .swift-timeline__steps {
        column-gap: 16px;
        margin-top: 48px;
    }

    /* Le trait relie deux centres de ronds : sa longueur suit la gouttiere. */
    .swift-timeline__step:not(:last-child)::before {
        width: calc(100% + 16px);
    }
}

@media (max-width: 767px) {
    .swift-timeline {
        padding: 56px 0;
    }

    .swift-timeline__title {
        font-size: 22px;
    }

    /* La frise bascule a la verticale, calee a gauche : cinq colonnes de texte
       ne tiennent pas dans la largeur d'un telephone. */
    .swift-timeline__steps {
        display: block;
        margin-top: 32px;
    }

    /* Le rond passe a gauche : plus de rail au-dessus du titre, donc plus de
       rangees a partager — l'etape redevient un bloc simple. */
    .swift-timeline__step {
        display: block;
        padding: 0 0 28px 34px;
    }

    .swift-timeline__step:last-child {
        padding-bottom: 0;
    }

    .swift-timeline__step-title {
        margin-top: 0;
    }

    /* Le trait descend du centre d'un rond a celui du suivant. Il part 7 px
       sous le haut de l'etape et le rond suivant est 7 px sous le haut de la
       suivante : la hauteur vaut donc exactement celle de l'etape. */
    .swift-timeline__step:not(:last-child)::before {
        top: 7px;
        left: 6px;
        width: 2px;
        height: 100%;
    }
}

/* --- Cohorte locale --- */

@media (max-width: 1024px) {
    /* Meme raison que pour les blocs bleus : la base a 60 rend le palier de 72
       contre-productif. */
    .swift-local__title {
        font-size: 22px;
    }

    .swift-local__text {
        font-size: 15px;
    }
}

@media (max-width: 767px) {
    .swift-local {
        padding: 56px 0;
    }

    /* Une colonne : le texte passe sous le titre, qui reprend toute la largeur. */
    .swift-local__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .swift-local__title {
        max-width: none;
    }
}