/**
 * Swift Academy — landing de campagne.
 * Portee : template-swift-academy.php uniquement.
 * Toutes les regles descendent de .swift-lp pour ne pas fuiter dans global.css.
 */

.swift-lp {
    --swift-blue: #0C18DC;
    --swift-orange: #F58911;
    --swift-red: #D8503D;
    --swift-olive: #957A2A;
    --swift-accent: #D54D37;
    --swift-ink: #14173B;
    --swift-ink-soft: #000947;

    /* 1296 = 3 cartes de 384 + 2 gouttieres de 48 + les 2x24 de padding.
       Reproduit la largeur des cartes de la maquette sur un frame de 1440. */
    --swift-container: 1296px;
    --swift-gutter: 24px;

    font-family: 'Martell', Helvetica, Arial, sans-serif;
    color: var(--swift-ink);
    overflow-x: hidden;
}

/* [TEMPORAIRE] Header du site et bandeau newsletter masques a la demande du
   client. La maquette ne comporte ni l'un ni l'autre, et le header faisait
   doublon avec le cartouche MARTELL du hero.
   Consequences a lever avant mise en ligne : sans header, la page n'offre
   plus ni menu, ni selecteur de langue, ni retour vers le site — seul le
   footer assure ces acces ; et le bandeau newsletter etant le seul point de
   collecte d'adresses de la page, la LP n'en capte plus aucune.
   Les selecteurs sont confines a ce template puisque cette feuille n'est
   chargee que par lui. */
body > header.header,
body > section.newsletter-section {
    display: none;
}

/* global.css pousse main de 91px pour degager son header fixe, et de 123px
   quand la barre d'admin est presente. Le hero de cette LP doit partir du
   haut de la page dans les deux cas : la variante admin-bar seule laisserait
   une bande de 91px aux visiteurs deconnectes, c'est-a-dire au public.
   Cible .swift-lp plutot que main : meme element, mais la regle reste
   confinee a ce template. Plusieurs templates du theme font de meme
   (.home, .blog, .archive, la-maison, visit-us). */
.swift-lp,
body.admin-bar .swift-lp {
    margin-top: 0;
}

.swift-lp *,
.swift-lp *::before,
.swift-lp *::after {
    box-sizing: border-box;
}

.swift-lp img {
    max-width: 100%;
}

/* --- Utilitaires --- */

.swift-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.swift-container {
    width: 100%;
    max-width: var(--swift-container);
    margin: 0 auto;
    padding: 0 var(--swift-gutter);
}

/* Rouge, centre, 12 px : le style commun a tous les sur-titres de la page.
   Les variantes ci-apres ne font qu'en decaler la couleur, le tracking ou
   l'alignement. */
.swift-eyebrow {
    display: block;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 2.16px;
    text-transform: uppercase;
    color: var(--swift-accent);
    text-align: center;
}

.swift-h2 {
    margin: 12px 0 0;
    font-weight: 700;
    font-size: 52px;
    line-height: 1.1;
    color: var(--swift-ink);
    text-align: center;
    text-transform: uppercase;
}

/* Trois niveaux dans un meme titre : <b> pour les mots detaches, <em> pour le
   mot accentue en rouge, <span> pour le mot de liaison qui doit rester leger.
   Le reste suit la graisse de base du titre. */
.swift-h2 b {
    font-weight: 800;
}

.swift-h2 em {
    font-style: normal;
    font-weight: 800;
    color: var(--swift-accent);
}

.swift-h2 span {
    font-weight: 400;
}

/* La section Villes n'a pas de mot detache : son titre tient entierement sur la
   graisse de base, accent rouge compris. */
.swift-h2--light em {
    font-weight: 700;
}


.swift-damier {
    display: block;
    width: 102%;
    margin-left: -1%;
    height: auto;
}

/* --- CTA --- */

/* Meme traitement que le bouton du bandeau orange — 14px, tracking 0.84,
   souligne — seule la couleur change. Bordure 2px #000947, rayon 2px. */
.swift-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 28px;
    border: 2px solid var(--swift-ink-soft);
    border-radius: 2px;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: .84px;
    text-transform: uppercase;
    text-decoration: underline;
    color: var(--swift-ink);
    background: transparent;
    transition: background-color .2s ease, color .2s ease;
}

.swift-cta:hover,
.swift-cta:focus-visible {
    background: var(--swift-ink-soft);
    color: #FFF;
}

.swift-cta:focus-visible {
    outline: 2px solid var(--swift-accent);
    outline-offset: 3px;
}

/* --- Hero --- */

.swift-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 865px;
    overflow: hidden;
    background: #2B1A12;
}

.swift-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.swift-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Le damier du hero est une variante a cellules fines : 26 x 24,7 px au lieu de
   45,9 x 43,7, soit une bande de 49 px de haut contre 86. Le viewBox de son SVG
   a ete recale sur la zone reellement visible de la maquette (14 30 1440 49) :
   le frame Figma d'origine mesurait 1877 x 79 mais son trace s'arretait a
   x=1521 et debordait de 30 px en haut, ce qui laissait un vide a droite. */
.swift-hero__damier {
    position: relative;
    z-index: 2;
}

.swift-hero__inner {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px var(--swift-gutter);
    text-align: center;
    color: #FFF;
}

.swift-hero__logo {
    display: block;
    width: 240px;
    height: auto;
}

.swift-hero__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin: 36px 0 0;
}

.swift-hero__swift {
    display: block;
    width: 543px;
    max-width: 80vw;
    height: auto;
}

.swift-hero__academy {
    font-weight: 400;
    font-size: 80px;
    line-height: 1.15;
    letter-spacing: 8.8px;
    text-indent: 8.8px;
    text-transform: uppercase;
    color: #FFF;
}

.swift-hero__baseline {
    max-width: 660px;
    margin: 40px 0 0;
    font-weight: 500;
    font-size: 28px;
    line-height: normal;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.swift-hero__curated {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 48px 0 0;
}

.swift-hero__curated span {
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 1.98px;
    text-transform: uppercase;
}

.swift-hero__curated img {
    display: block;
    width: auto;
    height: 50px;
}

/* --- Intro --- */

.swift-intro {
    padding: 102px 0 0;
    text-align: center;
    background: #FFF;
}

/* Le titre d'intro n'est pas un titre de section : la nouvelle maquette le pose
   en 800 / 40px / #000947, la ou Programme, Villes et Join sont en 500 / 52px /
   #14173B. */
.swift-intro__title {
    max-width: 1122px;
    margin: 0 auto;
    font-weight: 800;
    font-size: 40px;
    line-height: 1.15;
    color: var(--swift-ink-soft);
}

.swift-intro__text {
    max-width: 920px;
    margin: 32px auto 0;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.73;
    text-transform: uppercase;
    color: rgba(0, 0, 0, .8);
}

/* Le champ est un WYSIWYG : il enveloppe son contenu dans des <p>. */
.swift-intro__text p {
    margin: 0;
}

.swift-intro__text p + p {
    margin-top: 1em;
}

.swift-intro__text strong,
.swift-intro__text b {
    font-weight: 800;
}

/* Sur-titre aligne a gauche, la ou les autres sont centres. */
.swift-eyebrow--start {
    text-align: left;
}

/* --- Mentors --- */

.swift-mentors {
    position: relative;
    padding: 104px 0 60px;
    background: #FFF;
}

/* Simple bloc positionne : il ne sert qu'a ancrer le titre en absolu. Ne pas
   en faire une grille — le wrapper Swiper est un conteneur flex a slides
   non retrecissables, donc de taille max-content enorme, et une piste 1fr
   (soit minmax(auto, 1fr)) s'etire pour l'absorber. Le slider passait alors
   a 9984px. */
.swift-mentors__grid {
    position: relative;
}

/* Superpose en haut de la colonne de droite : la photo doit demarrer a sa
   hauteur, or elle est dans les slides et lui n'y est pas. */
.swift-mentors__head {
    position: absolute;
    top: 0;
    left: calc(44.3% + 30px);
    right: 0;
    z-index: 2;
}

/* Alignement explicite, meme raison que pour le deroule : sans lui, le
   global.css du theme centre le titre sous 991 alors que le sur-titre, le nom
   et la bio du mentor restent a gauche. */
.swift-mentors__title {
    margin: 14px 0 0;
    max-width: 540px;
    font-weight: 800;
    font-size: 36px;
    line-height: 1.18;
    text-align: left;
    color: var(--swift-ink);
}

.swift-mentors__slider {
    width: 100%;
}

/* Proportions de la maquette : photo 576, texte 696, gouttiere 29 sur 1301.
   minmax(0, 1fr) et non 1fr : empeche la piste de s'etirer au max-content. */
.swift-mentor {
    display: grid;
    grid-template-columns: 44.3% minmax(0, 1fr);
    gap: 30px;
    align-items: start;
    height: auto;
}

.swift-mentor__media {
    overflow: hidden;
    border-radius: 4px;
    aspect-ratio: 576 / 747;
}

/* Zoom lent pendant l'affichage de la slide, retour a l'echelle 1 quand elle
   cede la place : la sortante s'eloigne pendant que l'entrante arrive nette,
   ce qui donne le zoom-in / zoom-out a chaque transition. La duree du zoom
   couvre le delai d'autoplay plus la transition ; le retour est cale sur la
   seule duree de transition, pour accompagner le fondu sans le devancer. */
.swift-mentor__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: center;
    transition: transform 500ms ease-out;
}

.swift-mentors .swiper-slide-active .swift-mentor__media img {
    animation: swift-mentor-zoom 5500ms ease-out forwards;
}

@keyframes swift-mentor-zoom {
    from { transform: scale(1); }
    to   { transform: scale(1.06); }
}

/* Autoplay et zoom sont coupes ensemble : l'un sans l'autre n'a pas de sens. */
@media (prefers-reduced-motion: reduce) {
    .swift-mentor__media img,
    .swift-mentors .swiper-slide-active .swift-mentor__media img {
        animation: none;
        transition: none;
        transform: none;
    }
}

/* Reserve la hauteur du bloc titre, mesuree au chargement par mentors.js.
   La valeur de repli couvre le cas ou le script ne tourne pas. */
.swift-mentor__body {
    padding-top: calc(var(--swift-mentors-head, 210px) + 32px);
}

.swift-mentor__name {
    margin: 60px 0 0;
    font-weight: 800;
    font-size: 44px;
    line-height: 1;
    color: var(--swift-ink);
}

/* Orange propre a ce role, distinct du --swift-orange des cartes. */
.swift-mentor__role {
    margin: 8px 0 0;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #E2861F;
}

.swift-mentor__bio {
    max-width: 532px;
    margin: 26px 0 0;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.8;
    color: var(--swift-ink);
}

/* --- Slider : puces et fleches --- */

.swift-mentors__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
}

/* Les fleches quittent la ligne pour flanquer la section, centrees en hauteur.
   Elles restent dans .swift-mentors__nav dans le DOM : sous 768 il suffit de
   les repasser en statique pour qu'elles reprennent leur place aux cotes des
   puces, sans toucher au balisage. */
.swift-mentors__arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 1px solid rgba(20, 23, 59, .4);
    border-radius: 999px;
    color: var(--swift-ink);
    background: transparent;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.swift-mentors__arrow svg {
    width: 18px;
    height: 18px;
}

.swift-mentors__arrow:hover,
.swift-mentors__arrow:focus-visible {
    border-color: var(--swift-ink);
    background: var(--swift-ink);
    color: #FFF;
}

.swift-mentors__arrow:focus-visible {
    outline: 2px solid var(--swift-accent);
    outline-offset: 3px;
}

.swift-mentors__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: auto;
}

/* Swiper pose ses propres regles sur .swiper-pagination-bullet : on les
   surcharge pour rester dans la palette de la page. */
.swift-mentors__pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    margin: 0;
    border-radius: 999px;
    background: rgba(20, 23, 59, .25);
    opacity: 1;
    transition: background-color .2s ease;
}

.swift-mentors__pagination .swiper-pagination-bullet-active {
    background: var(--swift-accent);
}

/* Le repere de positionnement est .swift-mentors__grid, qui epouse le
   conteneur ; a 24px on retombait sur la photo. calc(50% - 50vw + 16px)
   ramene la fleche a 16px du bord du viewport quelle que soit la largeur. */
.swift-mentors__arrow--prev {
    left: calc(50% - 50vw + 16px);
}

.swift-mentors__arrow--next {
    right: calc(50% - 50vw + 16px);
}

/* Un seul mentor : ni puces ni fleches a afficher. */
.swift-mentors--single .swift-mentors__nav {
    display: none;
}

/* Troisieme couleur d'eyebrow de la page, apres le rouge et le bleu nuit. */
.swift-eyebrow--gold {
    color: #E2861F;
}

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

/* Conteneur commun a la page, et non un 1360 sur mesure : les blocs se calaient
   sinon 32 px plus a gauche que le contenu des sections voisines. Ils tiennent
   la largeur en retrecissant depuis leur base de 424 (flex-shrink), et
   remplissant la ligne a trois, se retrouvent alignes a gauche d'eux-memes. */
.swift-resources {
    padding: 60px 0;
    background: #FFF;
}

.swift-resources__title {
    max-width: 990px;
    margin: 14px auto 0;
    font-weight: 800;
    font-size: 48px;
    line-height: 1.18;
    text-align: center;
    color: var(--swift-ink);
}

/* Flex centre plutot qu'une grille a trois colonnes : avec une ou deux entrees
   la grille laisserait les blocs colles a gauche, la ligne flex les centre. Un
   quatrieme bloc passe a la ligne et se centre de la meme facon. */
.swift-resources__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin: 44px 0 0;
    padding: 0;
    list-style: none;
}

/* Base a un tiers de la ligne, moins les deux gouttieres : a trois les blocs
   remplissent exactement le conteneur et se calent donc a gauche comme a droite
   sur les sections voisines. Une base fixe de 424 les faisait passer a la ligne
   plutot que retrecir — flex-wrap l'emporte sur flex-shrink. */
.swift-resource {
    display: flex;
    flex-direction: column;
    flex: 0 1 calc((100% - 40px) / 3);
    min-height: 198px;
    padding: 24px;
    border-radius: 6px;
    background: var(--swift-blue);
    color: #FFF;
}

.swift-resource__title {
    margin: 0;
    font-weight: 800;
    font-size: 17px;
    line-height: 1.18;
    text-transform: uppercase;
}

.swift-resource__text {
    margin: 14px 0 0;
    font-weight: 400;
    font-size: 13px;
    line-height: 1.5;
    text-transform: uppercase;
}

/* --- Deroule --- */

.swift-timeline {
    padding: 60px 0;
    background: #FFF;
}

/* L'alignement est explicite : le global.css du theme centre tous les h2 en
   dessous de 991, ce qui decalerait le titre par rapport a son sur-titre et a
   ses etapes, restes a gauche. */
.swift-timeline__title {
    margin: 20px 0 0;
    font-weight: 800;
    font-size: 30px;
    line-height: 1.18;
    text-align: left;
    color: var(--swift-ink);
}

/* Colonnes implicites plutot qu'une grille figee a cinq : les etapes se
   repartissent la largeur quel qu'en soit le nombre, sans passer le compte au
   CSS. Trois rangees explicites — le rail des ronds, les titres, les textes —
   que chaque etape reprend en subgrid : des qu'un titre passe sur deux lignes,
   tous les textes descendent ensemble au lieu de se decaler colonne par
   colonne. Sans subgrid la mise en page tient toujours, les textes retrouvent
   simplement leur hauteur propre. */
.swift-timeline__steps {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    grid-template-rows: 14px auto auto;
    column-gap: 24px;
    margin: 64px 0 0;
    padding: 0;
    list-style: none;
}

.swift-timeline__step {
    position: relative;
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
}

/* Le rond. Sa couleur suit le rang de l'etape et n'est pas saisissable : la
   sequence de la maquette est un palindrome (orange, rouge, olive, rouge,
   orange), pas un cycle. Le repeteur est plafonne a cinq lignes, la liste
   ci-dessous couvre donc tous les cas ; l'orange sert de repli au-dela. */
.swift-timeline__step::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #E2861F;
}

.swift-timeline__step:nth-child(2)::after {
    background: #C13B24;
}

.swift-timeline__step:nth-child(3)::after {
    background: #8B7A2C;
}

.swift-timeline__step:nth-child(4)::after {
    background: #C13B24;
}

/* Le trait qui relie le centre d'un rond a celui du suivant : la largeur de la
   colonne plus la gouttiere. Porte par chaque etape sauf la derniere, plutot
   que par une regle unique, pour qu'il s'arrete tout seul au bon endroit. */
.swift-timeline__step:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 7px;
    width: calc(100% + 24px);
    height: 2px;
    background: rgba(18, 22, 46, .15);
}

/* Rangees placees explicitement : la premiere est le rail des ronds et doit
   rester vide. Sans ca le titre s'y logerait et passerait a 20 px du haut du
   rond au lieu de 34, la troisieme rangee restant inutilisee. Le placement
   explicite tient aussi quand une etape n'a pas de titre. */
.swift-timeline__step-title {
    grid-row: 2;
    margin: 20px 0 0;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: .4px;
    line-height: 1;
    text-transform: uppercase;
    color: var(--swift-ink);
}

.swift-timeline__step-text {
    grid-row: 3;
    margin: 13px 0 0;
    font-weight: 400;
    font-size: 13px;
    line-height: 1.45;
    text-transform: uppercase;
    color: var(--swift-ink);
}

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

.swift-local {
    padding: 60px 0;
    background: #FFF;
}

/* align-items: start pour que le texte se cale sur le haut du sur-titre, et
   non au milieu de la colonne de gauche qui est plus courte. */
.swift-local__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
}

/* Alignement explicite : le global.css du theme centre les h2 sous 991. */
.swift-local__title {
    max-width: 339px;
    margin: 20px 0 0;
    font-weight: 800;
    font-size: 26px;
    line-height: 1.18;
    text-align: left;
    color: var(--swift-ink);
}

.swift-local__text {
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    text-transform: uppercase;
    color: var(--swift-ink);
}

/* Le champ est un WYSIWYG : il enveloppe son contenu dans des <p>. */
.swift-local__text p {
    margin: 0;
}

.swift-local__text p + p {
    margin-top: 1em;
}

.swift-local__text strong,
.swift-local__text b {
    font-weight: 800;
}

/* --- Programme --- */

.swift-programme {
    padding: 96px 0 104px;
    background: #FFF;
}

.swift-programme__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
    margin: 64px 0 0;
    padding: 0;
    list-style: none;
}

.swift-card {
    display: flex;
    flex-direction: column;
    min-height: 660px;
    padding: 40px 35px 64px;
    border-radius: 43px;
    color: var(--swift-ink);
}

/* Les trois aplats. Les teintes Masterclass et Community sont des versions
   eclaircies des valeurs Figma d'origine, imposees par la decision D8 du spec
   pour atteindre le seuil WCAG AA de 4,5:1 sur le corps de texte.
   Ne pas revenir aux valeurs d'origine sans recalculer les contrastes.
   (Les valeurs d'origine sont volontairement absentes de ce fichier : un
   garde-fou de la tache 5 verifie qu'elles n'y apparaissent jamais.) */
.swift-card--mentorship { background: var(--swift-orange); }
.swift-card--masterclass { background: var(--swift-red); }
.swift-card--community { background: var(--swift-olive); }

/* Chaque libelle emprunte l'accent d'une AUTRE carte : rouge sur l'aplat
   orange, orange sur les aplats rouge et olive. Jeu croise voulu par la
   maquette. Contraste tres faible, cf. §8 du spec. */
.swift-card__label {
    font-weight: 800;
    font-size: 11px;
    letter-spacing: .66px;
    text-transform: uppercase;
    text-align: center;
}

.swift-card--mentorship .swift-card__label { color: var(--swift-accent); }
.swift-card--masterclass .swift-card__label { color: var(--swift-orange); }
.swift-card--community .swift-card__label { color: var(--swift-orange); }

.swift-card__title {
    margin: 80px 0 0;
    font-weight: 500;
    font-size: 30px;
    line-height: 1.18;
    color: var(--swift-ink);
}

.swift-card__text {
    margin: 44px 0 0;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.75;
    text-transform: uppercase;
    color: var(--swift-ink-soft);
}

/* Plus de cadre ni de fond : la pastille n'est plus qu'une ligne de texte. */
.swift-card__tag {
    align-self: center;
    text-align: center;
    margin-top: auto;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: .66px;
    text-transform: uppercase;
    color: var(--swift-ink-soft);
    line-height: 1.4;
}

/* --- Marquee --- */

.swift-marquee {
    overflow: hidden;
    padding: 22px 0;
    background: var(--swift-accent);
}

.swift-marquee__track {
    display: flex;
    width: max-content;
    animation: swift-marquee-scroll 40s linear infinite;
}

.swift-marquee__group {
    display: flex;
    align-items: center;
    gap: 42px;
    padding-right: 42px;
}

.swift-marquee__mark,
.swift-marquee__logo {
    display: block;
    flex: 0 0 auto;
    width: auto;
}

.swift-marquee__mark { height: 48px; }
.swift-marquee__logo { height: 40px; }

.swift-marquee__dot {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #FFF;
}

@keyframes swift-marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* Le mouvement continu est un declencheur reconnu de gene vestibulaire. */
@media (prefers-reduced-motion: reduce) {
    .swift-marquee__track {
        animation: none;
    }
}

/* --- Villes --- */

.swift-cities {
    /* 1418 = 4 visuels de 320 + 3 gouttieres de 30 + les 2x24 de padding.
       La rangee de villes est nettement plus large que le reste de la page. */
    --swift-container: 1418px;
    padding: 104px 0 96px;
    background: #FFF;
}

.swift-cities__intro {
    max-width: 520px;
    margin: 24px auto 0;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.75;
    text-align: center;
    text-transform: uppercase;
    color: rgba(0, 0, 0, .8);
}

.swift-cities__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin: 64px 0 0;
    padding: 0;
    list-style: none;
}

.swift-city__media {
    position: relative;
    overflow: hidden;
    border-radius: 32px;
    aspect-ratio: 320 / 467;
}

.swift-city__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swift-city__name {
    margin: 16px 0 0;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 1.2px;
    text-align: center;
    text-transform: uppercase;
    color: var(--swift-ink);
}

/* Stay in the loop : tracking de 1,8 la ou les autres eyebrows sont a 2,16. */
.swift-eyebrow--tight {
    letter-spacing: 1.8px;
}

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

/* 100 en haut : c'est l'ecart du Figma entre le bas du damier, desormais juste
   au-dessus, et le sur-titre. Le zero d'avant valait quand la section suivait
   directement les villes. */
.swift-follow {
    padding: 100px 0 60px;
    text-align: center;
    background: #FFF;
}

/* #12162E, et non le --swift-ink de la palette : la maquette utilise ici un
   bleu tres legerement different, conserve tel quel. */
.swift-follow__title {
    margin: 14px 0 0;
    font-weight: 800;
    font-size: 40px;
    line-height: 1;
    text-transform: uppercase;
    color: #12162E;
}

.swift-follow__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
}

/* Vraies pilules, contrairement aux autres boutons de la page qui sont a 2px. */
.swift-follow__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 26px;
    border: 1px solid rgba(18, 22, 46, .4);
    border-radius: 999px;
    font-weight: 800;
    font-size: 13px;
    line-height: 1;
    text-decoration: none;
    color: #12162E;
    background: transparent;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.swift-follow__pill:hover,
.swift-follow__pill:focus-visible {
    border-color: #12162E;
    background: #12162E;
    color: #FFF;
}

.swift-follow__pill:focus-visible {
    outline: 2px solid var(--swift-accent);
    outline-offset: 3px;
}

/* --- Join --- */

.swift-join {
    padding: 96px 0 120px;
    text-align: center;
    background: #FFF;
}

/* Titre d'un seul tenant, sans decoupe gras/leger/accent : la nouvelle maquette
   le pose en 800 / 48px, entierement en #14173B. */
.swift-join__title {
    margin: 14px 0 0;
    font-weight: 800;
    font-size: 48px;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--swift-ink);
}

.swift-join__text {
    max-width: 644px;
    margin: 24px auto 0;
    font-weight: 400;
    font-size: 13px;
    line-height: 1.8;
    text-transform: uppercase;
    color: var(--swift-ink);
}

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

.swift-join__cta:empty {
    margin-top: 0;
}

/* Pas de variante pleine : le Figma dessine les deux CTA a l'identique,
   en contour (rectangles 10490:14305 et 10490:14306). */

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

.swift-prereg {
    position: relative;
    overflow: hidden;
    padding: 98px var(--swift-gutter) 72px;
    background: var(--swift-orange);
    text-align: center;
}

/* La maquette pose le halftone du hero sur l'aplat orange, pas une nouvelle
   image. Un multiply a 19 % reproduit la teinte relevee — rgb(220,122,14) —
   a deux points pres, sans embarquer d'asset supplementaire. */
.swift-prereg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('../img/hero-bg.webp') center / cover no-repeat;
    mix-blend-mode: multiply;
    opacity: .19;
    pointer-events: none;
}

.swift-prereg__inner {
    position: relative;
    z-index: 1;
}

.swift-prereg__title {
    max-width: 1226px;
    margin: 0 auto;
    font-weight: 800;
    font-size: 52px;
    line-height: 1;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #FFF;
}

.swift-prereg__cta {
    display: inline-block;
    margin-top: 32px;
    padding: 13px 24px;
    border: 2px solid #FFF;
    border-radius: 2px;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: .84px;
    text-transform: uppercase;
    text-decoration: underline;
    color: #FFF;
    background: transparent;
    transition: background-color .2s ease, color .2s ease;
}

.swift-prereg__cta:hover,
.swift-prereg__cta:focus-visible {
    background: #FFF;
    color: var(--swift-orange);
}

.swift-prereg__cta:focus-visible {
    outline: 2px solid var(--swift-ink);
    outline-offset: 3px;
}