/* =========================================================
   ACTIVE TON TRAJET — FONDATIONS
   Page d'accueil
   ========================================================= */

/* =========================================================
   POLICES ACTIVE TON TRAJET
   ========================================================= */


/* ---------------------------------------------------------
   VASTAGO GROTESK
   --------------------------------------------------------- */

@font-face {
    font-family: "Vastago Grotesk";
    src: url("https://cdn.ca.yapla.com/company/CPYO9qxj5LhP6vbo8lrLkiEO/asset/files/Police%20ATT%20(1)/Police%20ATT/vastago-grotesk-fonts/VastagoGrotesk-Black.otf") format("opentype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}


/* ---------------------------------------------------------
   WORK SANS
   --------------------------------------------------------- */

@font-face {
    font-family: "Work Sans";
    src: url("https://cdn.ca.yapla.com/company/CPYO9qxj5LhP6vbo8lrLkiEO/asset/files/Police%20ATT%20(1)/Police%20ATT/Work%20sans/WorkSans-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Work Sans";
    src: url("https://cdn.ca.yapla.com/company/CPYO9qxj5LhP6vbo8lrLkiEO/asset/files/Police%20ATT%20(1)/Police%20ATT/Work%20sans/WorkSans-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Work Sans";
    src: url("https://cdn.ca.yapla.com/company/CPYO9qxj5LhP6vbo8lrLkiEO/asset/files/Police%20ATT%20(1)/Police%20ATT/Work%20sans/WorkSans-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Work Sans";
    src: url("https://cdn.ca.yapla.com/company/CPYO9qxj5LhP6vbo8lrLkiEO/asset/files/Police%20ATT%20(1)/Police%20ATT/Work%20sans/WorkSans-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Work Sans";
    src: url("https://cdn.ca.yapla.com/company/CPYO9qxj5LhP6vbo8lrLkiEO/asset/files/Police%20ATT%20(1)/Police%20ATT/Work%20sans/WorkSans-ExtraBold.ttf") format("truetype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Work Sans";
    src: url("https://cdn.ca.yapla.com/company/CPYO9qxj5LhP6vbo8lrLkiEO/asset/files/Police%20ATT%20(1)/Police%20ATT/Work%20sans/WorkSans-Italic.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}


/* ---------------------------------------------------------
   VARIABLES
   --------------------------------------------------------- */

.pageid-157080 {
    --att-bleu-fonce: #1f346a;
    --att-bleu: #1b1afe;
    --att-bleu-pale: #aac6e3;
    --att-rose: #f6777f;
    --att-rose-pale: #f4c3d6;
    --att-jaune: #fecc00;
    --att-jaune-pale: #ffecbb;
    --att-orange: #f55424;
    --att-blanc: #ffffff;

    --att-police-titre: "Vastago Grotesk", Arial, sans-serif;
    --att-police-texte: "Work Sans", Arial, sans-serif;
}


/* =========================================================
   TYPOGRAPHIE GÉNÉRALE
   ========================================================= */

.pageid-157080,
.pageid-157080 p,
.pageid-157080 li,
.pageid-157080 a,
.pageid-157080 h1,
.pageid-157080 h2,
.pageid-157080 h3,
.pageid-157080 h4 {
    font-family: var(--att-police-texte);
}


/* ---------------------------------------------------------
   GRANDS TITRES — VASTAGO GROTESK
   --------------------------------------------------------- */

.pageid-157080 .att-accroche-titre,
.pageid-157080 .att-contexte-titre,
.pageid-157080 .att-avantages > h2,
.pageid-157080 .att-etapes-titre,
.pageid-157080 .att-temoignages-entete h2 {
    font-family: var(--att-police-titre);
    font-weight: 900;
}


/* ---------------------------------------------------------
   SOUS-TITRES GRAPHIQUES — VASTAGO GROTESK
   --------------------------------------------------------- */

.pageid-157080 .att-contexte-solution h3,
.pageid-157080 .att-avantages-conclusion,
.pageid-157080 .att-planification-entete h2,
.pageid-157080 .att-plaidoyer-titre {
    font-family: var(--att-police-titre);
    font-weight: 900;
}

/* ---------------------------------------------------------
   IMAGES
   --------------------------------------------------------- */

.pageid-157080 .content img {
    max-width: 100%;
    height: auto;
}


/* ---------------------------------------------------------
   CONTENU DES SECTIONS
   --------------------------------------------------------- */

.pageid-157080 .site_line__item > .container {
    width: 100%;
    max-width: 1200px;
}


/* ---------------------------------------------------------
   ESPACEMENT VERTICAL DE BASE
   --------------------------------------------------------- */

.pageid-157080 .section-contexte,
.pageid-157080 .section-description,
.pageid-157080 .section-avantages,
.pageid-157080 .section-etapes,
.pageid-157080 .section-planification,
.pageid-157080 .section-temoignages,
.pageid-157080 .section-plaidoyer {
    padding-top: 70px;
    padding-bottom: 70px;
}


/* ---------------------------------------------------------
   TYPOGRAPHIE DE BASE
   --------------------------------------------------------- */

.pageid-157080 h1,
.pageid-157080 h2,
.pageid-157080 h3,
.pageid-157080 p {
    margin-top: 0;
}

.pageid-157080 p {
    line-height: 1.5;
}

.pageid-157080 h2 {
    margin-bottom: 25px;
}

.pageid-157080 h3 {
    margin-bottom: 15px;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 767px) {

    .pageid-157080 .section-contexte,
    .pageid-157080 .section-description,
    .pageid-157080 .section-avantages,
    .pageid-157080 .section-etapes,
    .pageid-157080 .section-planification,
    .pageid-157080 .section-temoignages,
    .pageid-157080 .section-plaidoyer {
        padding-top: 45px;
        padding-bottom: 45px;
    }

}

/* =========================================================
   TEXTURE DU HAUT — EN-TÊTE + ACCROCHE
   ========================================================= */

.pageid-157080 .section-entete,
.pageid-157080 .section-accroche {
    background-color: transparent !important;
}


/* ---------------------------------------------------------
   TEXTURE
   --------------------------------------------------------- */

.pageid-157080 .section-entete {
    position: relative;
    z-index: 0;

    overflow: visible;
}

.pageid-157080 .section-entete::before {
    content: "";

    position: absolute;
    z-index: -1;

    top: 0;
    left: 50%;

    width: 100vw;
    height: 820px;

    transform: translateX(-50%);

    background-color: var(--att-bleu-fonce);

    background-image: url("https://cdn.ca.yapla.com/company/CPYO9qxj5LhP6vbo8lrLkiEO/asset/images/Active%20ton%20trajet/ATT_Texture_haut.jpg");

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom 60px;
}


/* ---------------------------------------------------------
   CONTENU DEVANT LA TEXTURE
   --------------------------------------------------------- */

.pageid-157080 .section-entete > .container,
.pageid-157080 .section-accroche > .container {
    position: relative;
    z-index: 1;
}


/* La section suivante masque proprement le débordement
   de la texture du hero */

.pageid-157080 .section-contexte {
    position: relative;
    z-index: 1;
}

/* =========================================================
   EN-TÊTE
   ========================================================= */

.pageid-157080 .section-entete {
    padding-top: 24px;
    padding-bottom: 24px;
}


/* Aligne le logo et la navigation verticalement */

.pageid-157080 .section-entete .row {
    display: flex;
    align-items: center;
}


/* ---------------------------------------------------------
   LOGO
   --------------------------------------------------------- */

.pageid-157080 .att-entete-logo {
    display: flex;
    align-items: center;
}

.pageid-157080 .att-entete-logo-lien {
    display: inline-block;
}

.pageid-157080 .att-entete-logo-image {
    display: block;
    width: 165px;
    max-width: 100%;
    height: auto;
}


/* ---------------------------------------------------------
   NAVIGATION
   --------------------------------------------------------- */

.pageid-157080 .att-navigation {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 32px;
}

.pageid-157080 .att-navigation-lien {
    display: inline-block;

    color: var(--att-blanc);

    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;

    text-decoration: none;
    white-space: nowrap;

    transition:
        color 0.2s ease,
        opacity 0.2s ease;
}

.pageid-157080 .att-navigation-lien:hover,
.pageid-157080 .att-navigation-lien:focus {
    color: var(--att-rose);
    text-decoration: none;
}


/* Dernier lien du menu */

.pageid-157080 .att-navigation-lien--accent {
    padding: 12px 18px;

    color: var(--att-bleu-fonce);
    background-color: var(--att-rose);

    border-radius: 0;
}

.pageid-157080 .att-navigation-lien--accent:hover,
.pageid-157080 .att-navigation-lien--accent:focus {
    color: var(--att-bleu-fonce);
    background-color: var(--att-blanc);
}


/* ---------------------------------------------------------
   TABLETTE / MOBILE
   --------------------------------------------------------- */

@media (max-width: 767px) {

    .pageid-157080 .section-entete {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .pageid-157080 .section-entete .row {
        display: block;
    }

    .pageid-157080 .att-entete-logo-image {
        width: 145px;
    }

    .pageid-157080 .att-navigation {
        justify-content: flex-start;
        flex-wrap: wrap;

        gap: 14px 22px;

        margin-top: 22px;
    }

    .pageid-157080 .att-navigation-lien {
        font-size: 13px;
    }

}

/* =========================================================
   ACCROCHE / HERO
   ========================================================= */

.pageid-157080 .section-accroche {
    padding-top: 45px;
    padding-bottom: 85px;
}


/* Aligne le contenu verticalement dans le hero */

.pageid-157080 .section-accroche .row {
    display: flex;
    align-items: center;
    min-height: 430px;
}


/* ---------------------------------------------------------
   CONTENU
   --------------------------------------------------------- */

.pageid-157080 .att-accroche {
    max-width: 760px;
}


/* Surtitre */

.pageid-157080 .att-accroche-surtitre {
    margin-bottom: 20px;

    color: var(--att-rose-pale);

    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
}


/* Titre principal */

.pageid-157080 .att-accroche-titre {
    margin: 0 0 30px;

    color: var(--att-jaune-pale);

    font-size: clamp(40px, 4.4vw, 60px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.03em;
}

.pageid-157080 .att-accroche-ligne {
    display: block;
}


/* Date / phrase d'introduction */

.pageid-157080 .att-accroche-date {
    max-width: 650px;
    margin-bottom: 32px;

    color: var(--att-bleu-pale);

    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
}


/* ---------------------------------------------------------
   BOUTON PRINCIPAL
   --------------------------------------------------------- */

.pageid-157080 .att-accroche-action {
    margin-top: 8px;
}

.pageid-157080 .att-bouton--principal {
    display: inline-block;

    padding: 16px 26px;

    color: var(--att-bleu-fonce);
    background-color: var(--att-rose);

    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;

    text-decoration: none;

    border: 0;
    border-radius: 0;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.pageid-157080 .att-bouton--principal:hover,
.pageid-157080 .att-bouton--principal:focus {
    color: var(--att-bleu-fonce);
    background-color: var(--att-blanc);

    text-decoration: none;

    transform: translateY(-2px);
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 767px) {

    .pageid-157080 .section-accroche {
        padding-top: 35px;
        padding-bottom: 55px;
    }

    .pageid-157080 .section-accroche .row {
        display: block;
        min-height: 0;
    }

    .pageid-157080 .att-accroche {
        max-width: none;
    }

    .pageid-157080 .att-accroche-surtitre {
        margin-bottom: 16px;

        font-size: 20px;
    }

    .pageid-157080 .att-accroche-titre {
        margin-bottom: 24px;

        font-size: clamp(38px, 11vw, 52px);
        line-height: 1.04;
    }

    .pageid-157080 .att-accroche-ligne {
        display: inline;
    }

    .pageid-157080 .att-accroche-ligne::after {
        content: " ";
    }

    .pageid-157080 .att-accroche-date {
        margin-bottom: 28px;

        font-size: 18px;
    }

}

/* =========================================================
   CONTEXTE — HABITUDES DE DÉPLACEMENT
   ========================================================= */

.pageid-157080 .section-contexte .row {
    display: flex;
    align-items: center;
}


/* ---------------------------------------------------------
   TEXTE
   --------------------------------------------------------- */

.pageid-157080 .att-contexte {
    max-width: 520px;
}

.pageid-157080 .att-contexte-titre {
    margin-bottom: 28px;

    color: var(--att-bleu-fonce);

    font-size: 42px;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.pageid-157080 .att-contexte-probleme {
    margin-bottom: 32px;

    color: var(--att-jaune-pale);

    font-size: 18px;
    font-weight: 700;
    line-height: 1.55;
}


/* ---------------------------------------------------------
   BONNE NOUVELLE
   --------------------------------------------------------- */

.pageid-157080 .att-contexte-solution h3 {
    margin-bottom: 12px;

    color: var(--att-bleu-fonce);

    font-size: 28px;
    font-weight: 800;
    line-height: 1.15;
}

.pageid-157080 .att-contexte-solution p {
    margin-bottom: 0;

    color: var(--att-bleu-fonce);

    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
}


/* ---------------------------------------------------------
   PHOTO
   --------------------------------------------------------- */

.pageid-157080 .att-contexte-visuel {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.pageid-157080 .att-contexte-image {
    display: block;

    width: 100%;
    max-width: 470px;
    height: auto;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 767px) {

    .pageid-157080 .section-contexte .row {
        display: block;
    }

    .pageid-157080 .att-contexte {
        max-width: none;
    }

    .pageid-157080 .att-contexte-titre {
        font-size: 32px;
    }

    .pageid-157080 .att-contexte-probleme,
    .pageid-157080 .att-contexte-solution p {
        font-size: 17px;
    }

    .pageid-157080 .att-contexte-solution h3 {
        font-size: 24px;
    }

    .pageid-157080 .att-contexte-visuel {
        justify-content: flex-start;

        margin-top: 40px;
    }

    .pageid-157080 .att-contexte-image {
        max-width: 100%;
    }

}

/* =========================================================
   DESCRIPTION DU DÉFI
   ========================================================= */

.pageid-157080 .section-description .row {
    display: flex;
    align-items: center;
}


/* ---------------------------------------------------------
   ILLUSTRATION
   --------------------------------------------------------- */

.pageid-157080 .att-description-visuel {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.pageid-157080 .att-description-image {
    display: block;

    width: 100%;
    max-width: 500px;
    height: auto;
}


/* ---------------------------------------------------------
   TEXTE
   --------------------------------------------------------- */

.pageid-157080 .att-description {
    max-width: 530px;
}

.pageid-157080 .att-description p {
    margin-bottom: 26px;

    color: var(--att-bleu-fonce);

    font-size: 19px;
    font-weight: 600;
    line-height: 1.5;
}

.pageid-157080 .att-description p:last-child {
    margin-bottom: 0;
}

.pageid-157080 .att-description strong {
    font-weight: 700;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 767px) {

    .pageid-157080 .section-description .row {
        display: block;
    }

    .pageid-157080 .att-description-visuel {
        justify-content: center;

        margin-bottom: 40px;
    }

    .pageid-157080 .att-description-image {
        max-width: 420px;
    }

    .pageid-157080 .att-description {
        max-width: none;
    }

    .pageid-157080 .att-description p {
        font-size: 17px;
    }

}

/* =========================================================
   AVANTAGES — POURQUOI ACTIVER SON TRAJET?
   ========================================================= */

.pageid-157080 .att-avantages {
    width: 100%;
}


/* ---------------------------------------------------------
   TITRE DE SECTION
   --------------------------------------------------------- */

.pageid-157080 .att-avantages > h2 {
    margin-bottom: 50px;

    color: var(--att-bleu);

    font-size: 42px;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.02em;

    text-align: left;
}


/* ---------------------------------------------------------
   GRILLE DES AVANTAGES
   --------------------------------------------------------- */

.pageid-157080 .att-avantages-grille {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 45px;

    align-items: start;
}


/* ---------------------------------------------------------
   UN AVANTAGE
   --------------------------------------------------------- */

.pageid-157080 .att-avantage {
    display: grid;
    grid-template-rows: 80px auto;
    justify-items: center;

    text-align: center;
}


/* Pictogrammes */

.pageid-157080 img.att-avantage-icone {
    display: block;

    width: 50px;
    max-width: 50px;
    height: 63px;

    object-fit: contain;
    align-self: start;

    margin: 0;
}

/* Texte sous les pictogrammes */

.pageid-157080 .att-avantage-titre {
    max-width: 270px;
    margin: 0 auto;

    color: var(--att-bleu-fonce);

    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}


/* ---------------------------------------------------------
   CONCLUSION
   --------------------------------------------------------- */

.pageid-157080 .att-avantages-conclusion {
    margin-top: 55px;
    margin-bottom: 0;

    color: var(--att-bleu-fonce);

    font-size: 28px;
    font-weight: 800;
    line-height: 1.2;

    text-align: center;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 767px) {

    .pageid-157080 .att-avantages > h2 {
        margin-bottom: 40px;

        font-size: 32px;
    }

    .pageid-157080 .att-avantages-grille {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .pageid-157080 .att-avantage {
        align-items: flex-start;

        text-align: left;
    }

    .pageid-157080 .att-avantage-icone {
        height: 65px;
        max-width: 75px;

        margin-bottom: 16px;
    }

    .pageid-157080 .att-avantage-titre {
        max-width: none;
        margin: 0;

        font-size: 18px;
    }

    .pageid-157080 .att-avantages-conclusion {
        margin-top: 42px;

        font-size: 24px;

        text-align: left;
    }

}

/* =========================================================
   ÉTAPES — COMMENT FONCTIONNE LE DÉFI?
   ========================================================= */


/* ---------------------------------------------------------
   EN-TÊTE DE SECTION
   --------------------------------------------------------- */

.pageid-157080 .att-etapes-entete {
    max-width: 1050px;
    margin-bottom: 48px;
}

.pageid-157080 .att-etapes-titre {
    margin-bottom: 22px;

    color: var(--att-jaune);

    font-size: 42px;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.pageid-157080 .att-etapes-intro {
    max-width: 1000px;
    margin-bottom: 0;

    color: var(--att-bleu-pale);

    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
}


/* ---------------------------------------------------------
   GRILLE DES 4 ÉTAPES

   1        2
   3        4
   --------------------------------------------------------- */

.pageid-157080 .att-etapes-grille {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    column-gap: 75px;
    row-gap: 55px;
}


/* ---------------------------------------------------------
   UNE ÉTAPE
   --------------------------------------------------------- */

.pageid-157080 .att-etape {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 24px;

    align-items: start;
}


/* ---------------------------------------------------------
   NUMÉRO
   --------------------------------------------------------- */

.pageid-157080 .att-etape-numero {
    width: 70px;
    height: 90px;

    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.pageid-157080 .att-etape-numero img {
    display: block;

    width: 55px;
    max-width: 55px;
    height: 85px;

    object-fit: contain;
}


/* ---------------------------------------------------------
   CONTENU DE L'ÉTAPE
   --------------------------------------------------------- */

.pageid-157080 .att-etape-contenu {
    color: var(--att-blanc);
}


/* Titre de l'étape */

.pageid-157080 .att-etape-contenu h3 {
    margin-bottom: 16px;

    color: var(--att-rose-pale);

    font-size: 21px;
    font-weight: 800;
    line-height: 1.2;
}


/* Date */

.pageid-157080 .att-etape-date {
    display: block;

    margin-top: 2px;

    color: var(--att-rose-pale);

    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
}


/* Corps de texte */

.pageid-157080 .att-etape-contenu p {
    margin-bottom: 16px;

    color: var(--att-blanc);

    font-size: 16px;
    font-weight: 600;
    line-height: 1.45;
}

.pageid-157080 .att-etape-contenu p:last-child {
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   LISTE — ÉTAPE 2
   --------------------------------------------------------- */

.pageid-157080 .att-etape-contenu ul {
    margin: 0 0 16px;
    padding-left: 20px;

    color: var(--att-blanc);

    font-size: 16px;
    font-weight: 600;
    line-height: 1.45;

    list-style-type: disc;
}

.pageid-157080 .att-etape-contenu li {
    display: list-item;

    margin-bottom: 5px;

    list-style-type: disc;
}

.pageid-157080 .att-etape-contenu li::marker {
    color: var(--att-blanc);
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 767px) {

    .pageid-157080 .att-etapes-entete {
        margin-bottom: 40px;
    }

    .pageid-157080 .att-etapes-titre {
        font-size: 32px;
    }

    .pageid-157080 .att-etapes-intro {
        font-size: 17px;
    }

    .pageid-157080 .att-etapes-grille {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .pageid-157080 .att-etape {
        grid-template-columns: 55px minmax(0, 1fr);
        gap: 18px;
    }

    .pageid-157080 .att-etape-numero {
        width: 55px;
        height: 75px;
    }

    .pageid-157080 .att-etape-numero img {
        width: 45px;
        max-width: 45px;
        height: 70px;
    }

    .pageid-157080 .att-etape-contenu h3 {
        font-size: 19px;
    }

    .pageid-157080 .att-etape-date {
        font-size: 16px;
    }

    .pageid-157080 .att-etape-contenu p,
    .pageid-157080 .att-etape-contenu ul {
        font-size: 15px;
    }

}

/* =========================================================
   PLANIFICATION — UN TRAJET ACTIF, ÇA SE PLANIFIE!
   ========================================================= */

.pageid-157080 .section-planification {
    padding-top: 0;
    padding-bottom: 70px;
}


/* ---------------------------------------------------------
   CARTE JAUNE
   --------------------------------------------------------- */

.pageid-157080 .att-planification {
    max-width: 920px;
    margin: 0 auto;

    padding: 34px 40px 30px;

    background-color: var(--att-jaune);

    color: var(--att-bleu-fonce);
}


/* ---------------------------------------------------------
   EN-TÊTE
   --------------------------------------------------------- */

.pageid-157080 .att-planification-entete {
    margin-bottom: 32px;
}

.pageid-157080 .att-planification-entete h2 {
    margin-bottom: 8px;

    color: var(--att-bleu-fonce);

    font-size: 28px;
    font-weight: 800;
    line-height: 1.1;
}

.pageid-157080 .att-planification-intro {
    margin-bottom: 0;

    color: var(--att-bleu-fonce);

    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}


/* ---------------------------------------------------------
   GRILLE DES 3 ÉLÉMENTS
   --------------------------------------------------------- */

.pageid-157080 .att-planification-grille {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 40px;

    margin-bottom: 30px;
}


/* ---------------------------------------------------------
   UN ÉLÉMENT
   --------------------------------------------------------- */

.pageid-157080 .att-planification-element {
    text-align: center;
}

.pageid-157080 .att-planification-icone {
    height: 80px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 14px;
}

.pageid-157080 .att-planification-icone img {
    display: block;

    width: auto;
    max-width: 90px;
    max-height: 72px;

    object-fit: contain;
}

.pageid-157080 .att-planification-element h3 {
    margin-bottom: 8px;

    color: var(--att-bleu-fonce);

    font-size: 17px;
    font-weight: 800;
    line-height: 1.2;
}

.pageid-157080 .att-planification-element p {
    margin-bottom: 8px;

    color: var(--att-bleu-fonce);

    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

.pageid-157080 .att-planification-element p:last-child {
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   BLOC D'AIDE
   --------------------------------------------------------- */

.pageid-157080 .att-planification-aide {
    max-width: 720px;
    margin: 0 auto;

    text-align: center;
}

.pageid-157080 .att-planification-aide h3 {
    margin-bottom: 8px;

    color: var(--att-bleu-fonce);

    font-size: 16px;
    font-weight: 800;
    line-height: 1.3;
}

.pageid-157080 .att-planification-aide p {
    margin-bottom: 7px;

    color: var(--att-bleu-fonce);

    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
}

.pageid-157080 .att-planification-aide p:last-child {
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 767px) {

    .pageid-157080 .section-planification {
        padding-top: 0;
        padding-bottom: 45px;
    }

    .pageid-157080 .att-planification {
        padding: 28px 24px;
    }

    .pageid-157080 .att-planification-entete h2 {
        font-size: 24px;
    }

    .pageid-157080 .att-planification-grille {
        grid-template-columns: 1fr;
        gap: 32px;

        margin-bottom: 32px;
    }

    .pageid-157080 .att-planification-icone {
        height: 70px;
    }

    .pageid-157080 .att-planification-icone img {
        max-width: 80px;
        max-height: 65px;
    }

    .pageid-157080 .att-planification-element {
        text-align: left;
    }

    .pageid-157080 .att-planification-icone {
        justify-content: flex-start;
    }

    .pageid-157080 .att-planification-aide {
        text-align: left;
    }

}

/* =========================================================
   INSCRIPTION — BANDEAU CTA
   ========================================================= */

.pageid-157080 .section-inscription {
    padding-top: 42px;
    padding-bottom: 42px;
}


/* ---------------------------------------------------------
   CONTENU
   --------------------------------------------------------- */

.pageid-157080 .section-inscription .content {
    text-align: center;
}


/* ---------------------------------------------------------
   BOUTON-IMAGE
   --------------------------------------------------------- */

.pageid-157080 .section-inscription .content img {
    display: inline-block;

    width: 300px;
    max-width: 100%;
    height: auto;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 767px) {

    .pageid-157080 .section-inscription {
        padding-top: 32px;
        padding-bottom: 32px;
    }

    .pageid-157080 .section-inscription .content img {
        width: 260px;
    }

}

/* =========================================================
   TEXTURE DU BAS — TÉMOIGNAGES + PLAIDOYER
   ========================================================= */

.pageid-157080 .section-temoignages,
.pageid-157080 .section-plaidoyer {
    background: transparent !important;
}


/* ---------------------------------------------------------
   TEXTURE CONTINUE
   --------------------------------------------------------- */

.pageid-157080 .section-temoignages {
    position: relative;
    z-index: 0;

    overflow: visible;
}

.pageid-157080 .section-temoignages::before {
    content: "";

    position: absolute;
    z-index: -1;

    top: 0;
    left: 50%;

    width: 100vw;
    height: 1230px;

    transform: translateX(-50%);

    background-color: var(--att-rose-pale);

    background-image: url("https://cdn.ca.yapla.com/company/CPYO9qxj5LhP6vbo8lrLkiEO/asset/images/Active%20ton%20trajet/ATT_Texture_bas.jpg");

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
}


/* ---------------------------------------------------------
   CONTENU DEVANT LA TEXTURE
   --------------------------------------------------------- */

.pageid-157080 .section-temoignages > .container,
.pageid-157080 .section-plaidoyer > .container {
    position: relative;
    z-index: 1;
}


/* ---------------------------------------------------------
   PIED DE PAGE DEVANT LA TEXTURE
   --------------------------------------------------------- */

.pageid-157080 .section-pied-page {
    position: relative;
    z-index: 2;
}

/* ---------------------------------------------------------
   EN-TÊTE
   --------------------------------------------------------- */

.pageid-157080 .att-temoignages-entete {
    max-width: 900px;
    margin-bottom: 45px;
}

.pageid-157080 .att-temoignages-entete h2 {
    margin-bottom: 14px;

    color: var(--att-bleu-fonce);

    font-size: 42px;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.pageid-157080 .att-temoignages-intro {
    margin-bottom: 0;

    color: var(--att-bleu-fonce);

    font-size: 17px;
    font-weight: 500;
    line-height: 1.45;
}


/* ---------------------------------------------------------
   GRILLE DES TÉMOIGNAGES
   --------------------------------------------------------- */

.pageid-157080 .att-temoignages-grille {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    column-gap: 60px;
    row-gap: 15px;

    margin-bottom: 35px;
}


/* ---------------------------------------------------------
   UN TÉMOIGNAGE
   --------------------------------------------------------- */

.pageid-157080 .att-temoignage {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 25px;

    align-items: center;
}


/* ---------------------------------------------------------
   PHOTO
   Les effets "polaroid" sont déjà intégrés aux PNG
   --------------------------------------------------------- */

.pageid-157080 .att-temoignage-photo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pageid-157080 .att-temoignage-photo img {
    display: block;

    width: 210px;
    max-width: 100%;
    height: auto;

    padding: 0;
    margin: 0;

    background: none;
    box-shadow: none;

    transform: none;
}


/* ---------------------------------------------------------
   CITATIONS
   --------------------------------------------------------- */

.pageid-157080 .att-temoignage-citation {
    margin: 0;
    padding: 0;

    border: 0;
}

.pageid-157080 .att-temoignage-citation p {
    margin: 0;

    color: var(--att-orange);

    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}


/* ---------------------------------------------------------
   NOTE
   --------------------------------------------------------- */

.pageid-157080 .att-temoignages-note {
    margin-bottom: 0;

    color: var(--att-bleu-fonce);

    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 767px) {

    .pageid-157080 .section-temoignages {
        background-size: 65px 65px;
    }

    .pageid-157080 .att-temoignages-entete {
        margin-bottom: 38px;
    }

    .pageid-157080 .att-temoignages-entete h2 {
        font-size: 32px;
    }

    .pageid-157080 .att-temoignages-intro {
        font-size: 16px;
    }

    .pageid-157080 .att-temoignages-grille {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .pageid-157080 .att-temoignage {
        grid-template-columns: 135px minmax(0, 1fr);
        gap: 18px;
    }

    .pageid-157080 .att-temoignage-photo img {
        width: 130px;
    }

    .pageid-157080 .att-temoignage-citation p {
        font-size: 15px;
    }

}

/* =========================================================
   PLAIDOYER — VILLE PLUS INCLUSIVE AVEC LES ADOS
   ========================================================= */

.pageid-157080 .section-plaidoyer {
    position: relative;

    padding-top: 55px;
    padding-bottom: 85px;

    overflow: hidden;
}

/* ---------------------------------------------------------
   CONTENU
   --------------------------------------------------------- */

.pageid-157080 .section-plaidoyer .container {
    position: relative;
    z-index: 1;
}

.pageid-157080 .section-plaidoyer .row {
    display: flex;
    align-items: center;
}


/* ---------------------------------------------------------
   TEXTE
   --------------------------------------------------------- */

.pageid-157080 .att-plaidoyer {
    max-width: 650px;
}

.pageid-157080 .att-plaidoyer-titre {
    margin-bottom: 18px;

    color: var(--att-bleu-fonce);

    font-size: 28px;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.01em;
}

.pageid-157080 .att-plaidoyer-texte p {
    margin-bottom: 15px;

    color: var(--att-bleu-fonce);

    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
}

.pageid-157080 .att-plaidoyer-texte p:last-child {
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   FICHE / VISUEL
   --------------------------------------------------------- */

.pageid-157080 .att-plaidoyer-visuel {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pageid-157080 .att-plaidoyer-image {
    display: block;

    width: 100%;
    max-width: 285px;
    height: auto;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 767px) {

    .pageid-157080 .section-plaidoyer {
        padding-top: 45px;
        padding-bottom: 80px;

        background-size: 65px 65px;
    }

    .pageid-157080 .section-plaidoyer .row {
        display: block;
    }

    .pageid-157080 .att-plaidoyer {
        max-width: none;
    }

    .pageid-157080 .att-plaidoyer-titre {
        font-size: 24px;
    }

    .pageid-157080 .att-plaidoyer-texte p {
        font-size: 15px;
    }

    .pageid-157080 .att-plaidoyer-visuel {
        justify-content: flex-start;

        margin-top: 30px;
    }

    .pageid-157080 .att-plaidoyer-image {
        max-width: 240px;
    }

}

/* =========================================================
   PIED DE PAGE
   ========================================================= */

.pageid-157080 .section-pied-page {
    padding-top: 45px;
    padding-bottom: 45px;
}


/* ---------------------------------------------------------
   ALIGNEMENT DES DEUX COLONNES
   --------------------------------------------------------- */

.pageid-157080 .section-pied-page .row {
    display: flex;
    align-items: center;
}


/* ---------------------------------------------------------
   LOGO GOUVERNEMENT DU QUÉBEC
   --------------------------------------------------------- */

.pageid-157080 .att-pied-page-partenaire {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.pageid-157080 .att-pied-page-logo-quebec {
    display: block;

    width: 230px;
    max-width: 100%;
    height: auto;
}


/* ---------------------------------------------------------
   LOGO CENTRE D'ÉCOLOGIE URBAINE
   --------------------------------------------------------- */

.pageid-157080 .att-pied-page-ceu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.pageid-157080 .att-pied-page-ceu a {
    display: inline-block;
}

.pageid-157080 .att-pied-page-logo-ceu {
    display: block;

    width: 165px;
    max-width: 100%;
    height: auto;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 767px) {

    .pageid-157080 .section-pied-page {
        padding-top: 35px;
        padding-bottom: 35px;
    }

    .pageid-157080 .section-pied-page .row {
        display: block;
    }

    .pageid-157080 .att-pied-page-partenaire,
    .pageid-157080 .att-pied-page-ceu {
        justify-content: flex-start;
    }

    .pageid-157080 .att-pied-page-logo-quebec {
        width: 210px;
    }

    .pageid-157080 .att-pied-page-ceu {
        margin-top: 30px;
    }

    .pageid-157080 .att-pied-page-logo-ceu {
        width: 150px;
    }

}
/* =========================================================
   POPUP — SUIVRE LE DÉFI
   ========================================================= */


/* ---------------------------------------------------------
   BOUTON DANS LA NAVIGATION
   --------------------------------------------------------- */

.pageid-157080 .att-suivi-ouvrir {
    font-family: var(--att-police-texte);

    border: 0;
    cursor: pointer;
}


/* ---------------------------------------------------------
   FENÊTRE MODALE
   --------------------------------------------------------- */

.pageid-157080 .att-modal {
    width: min(1100px, calc(100vw - 40px));
    max-width: 1100px;

    max-height: calc(100vh - 40px);

    margin: auto;
    padding: 0;

    border: 0;

    background: transparent;

    overflow: visible;
}


/* Fond derrière le popup */

.pageid-157080 .att-modal::backdrop {
    background: rgba(31, 52, 106, 0.82);

    backdrop-filter: blur(3px);
}


/* ---------------------------------------------------------
   CONTENEUR PRINCIPAL
   --------------------------------------------------------- */

.pageid-157080 .att-modal-contenu {
    overflow: hidden;

    background-color: var(--att-blanc);

    box-shadow: 0 20px 60px rgba(31, 52, 106, 0.35);
}


/* ---------------------------------------------------------
   EN-TÊTE DU POPUP
   --------------------------------------------------------- */

.pageid-157080 .att-modal-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 20px 25px;

    background-color: var(--att-bleu-pale);
}

.pageid-157080 .att-modal-entete h2 {
    margin: 0;

    color: var(--att-bleu);

    font-family: var(--att-police-titre);
    font-size: 30px;
    font-weight: 900;
    line-height: 1.1;
}


/* ---------------------------------------------------------
   BOUTON FERMER
   --------------------------------------------------------- */

.pageid-157080 .att-modal-fermer {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    padding: 0;

    color: var(--att-blanc);
    background: transparent;

    border: 0;

    font-family: var(--att-police-texte);
    font-size: 34px;
    font-weight: 400;
    line-height: 1;

    cursor: pointer;
}

.pageid-157080 .att-modal-fermer:hover,
.pageid-157080 .att-modal-fermer:focus {
    color: var(--att-bleu);
}

.pageid-157080 .att-modal-message {
    padding: 50px 30px;

    background-color: var(--att-blanc);

    text-align: center;
}

.pageid-157080 .att-modal-message p {
    max-width: 620px;
    margin: 0 auto;

    color: var(--att-bleu-fonce);

    font-size: 20px;
    font-weight: 600;
    line-height: 1.5;
}


/* ---------------------------------------------------------
   AIRTABLE
   --------------------------------------------------------- */

.pageid-157080 .att-modal-airtable {
    width: 100%;
}

.pageid-157080 .att-modal-airtable iframe {
    display: block;

    width: 100%;
    height: min(70vh, 700px);

    border: 0;

    background-color: var(--att-blanc);
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 767px) {

    .pageid-157080 .att-modal {
        width: calc(100vw - 24px);
        max-height: calc(100vh - 24px);
    }

    .pageid-157080 .att-modal-entete {
        padding: 16px 18px;
    }

    .pageid-157080 .att-modal-entete h2 {
        font-size: 24px;
    }

    .pageid-157080 .att-modal-airtable iframe {
        height: 72vh;
    }

}

/* =========================================================
   PARTENAIRE TRANSIT
   ========================================================= */

.pageid-157080 .att-transit {
    max-width: 920px;
    margin: 0 auto;
}


/* ---------------------------------------------------------
   TITRE
   --------------------------------------------------------- */

.pageid-157080 .att-transit-titre {
    color: var(--att-bleu-fonce);

    font-family: var(--att-police-titre);
    font-size: 27px;
    font-weight: 900;
    line-height: 1.1;

    text-align: left;
}


/* ---------------------------------------------------------
   MISE EN PAGE
   --------------------------------------------------------- */

.pageid-157080 .att-transit-contenu {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;

    gap: 35px;

    align-items: center;
}


/* ---------------------------------------------------------
   TEXTE
   --------------------------------------------------------- */

.pageid-157080 .att-transit-texte {
    color: var(--att-bleu-fonce);

    font-size: 16px;
    line-height: 1.45;

    text-align: left;
}

.pageid-157080 .att-transit-texte p {
    margin: 0 0 14px;
}

.pageid-157080 .att-transit-texte p:last-child {
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   LOGO TRANSIT + PREMIER PARAGRAPHE
   --------------------------------------------------------- */

.pageid-157080 .att-transit-app {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);

    gap: 14px;

    align-items: start;

    margin-bottom: 14px;
}

.pageid-157080 img.att-transit-logo {
    display: block;

    width: 52px;
    height: 52px;

    margin: 0;
}

.pageid-157080 .att-transit-app p {
    margin: 0;

    text-align: left;
}


/* ---------------------------------------------------------
   LIENS
   --------------------------------------------------------- */

.pageid-157080 .att-transit-texte a {
    color: var(--att-bleu);
    font-weight: 700;

    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.pageid-157080 .att-transit-texte a:hover,
.pageid-157080 .att-transit-texte a:focus {
    color: var(--att-bleu-fonce);
}


/* ---------------------------------------------------------
   ILLUSTRATION TRANSIT
   --------------------------------------------------------- */

.pageid-157080 .att-transit-visuel {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pageid-157080 img.att-transit-illustration {
    display: block;

    width: 100%;
    max-width: 210px;
    height: auto;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 767px) {

    .pageid-157080 .att-transit-contenu {
        grid-template-columns: 1fr;

        gap: 25px;
    }

    .pageid-157080 .att-transit-titre {
        text-align: left;
    }

    .pageid-157080 .att-transit-app {
        grid-template-columns: 46px minmax(0, 1fr);

        gap: 12px;
    }

    .pageid-157080 img.att-transit-logo {
        width: 46px;
        height: 46px;
    }

    .pageid-157080 .att-transit-visuel {
        justify-content: flex-start;
    }

    .pageid-157080 img.att-transit-illustration {
        max-width: 160px;
    }

}

/* ---------------------------------------------------------
   TYPOGRAPHIE TRANSIT — HARMONISATION AVEC PLANIFICATION
   --------------------------------------------------------- */

.pageid-157080 .att-transit-texte,
.pageid-157080 .att-transit-texte p,
.pageid-157080 .att-transit-app p {
    color: var(--att-bleu-fonce);

    font-family: var(--att-police-texte);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.45;

    text-align: left;
}


/* Espacement entre les paragraphes */

.pageid-157080 .att-transit-texte p {
    margin: 0 0 12px;
}

.pageid-157080 .att-transit-texte p:last-child {
    margin-bottom: 0;
}


/* Liens — même apparence dans tous les états */

.pageid-157080 .att-transit-texte a,
.pageid-157080 .att-transit-texte a:visited {
    color: var(--att-bleu);

    font-family: var(--att-police-texte);
    font-size: inherit;
    font-weight: 700;

    text-decoration: none;
}

.pageid-157080 .att-transit-texte a:hover,
.pageid-157080 .att-transit-texte a:focus {
    color: var(--att-bleu);
    text-decoration: underline;
    text-underline-offset: 2px;
}