/* =========================================================
   PAGE — NOTRE APPROCHE
   ========================================================= */


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

.approche-hero {
    padding: var(--esp-h-1) var(--esp-h-2);
}

.approche-hero-contenu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: var(--esp-h-2);
}

.approche-hero-texte,
.approche-hero-image {
    min-width: 0;
}

.approche-hero h1 {
    max-width: 760px;
    margin-top: 0;
}

.approche-hero-texte p {
    max-width: 700px;
    line-height: 1.6;
}

.approche-hero-image img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;

    border-radius: 6px;

    box-shadow: 0 12px 32px rgb(10 20 47 / 16%);
}


/* =========================================================
   INTRODUCTION
   ========================================================= */

.approche-introduction {
    padding: var(--esp-h-1) var(--esp-h-2);

    color: var(--couleur-blanc);
    background-color: var(--couleur-bleu-fonce);
}

.approche-introduction-contenu {
    max-width: 900px;
    margin-inline: auto;
}

.approche-introduction h2 {
    margin-top: 0;
    color: var(--couleur-blanc);
}

.approche-introduction p {
    line-height: 1.6;
}


/* =========================================================
   PARCOURS
   ========================================================= */

.approche-parcours {
    padding: var(--esp-h-1) var(--esp-h-2);
}

.approche-parcours-entete {
    max-width: 800px;
    margin-bottom: var(--esp-h-1);
}

.approche-parcours-entete h2 {
    margin-top: 0;
}


/* =========================================================
   ÉTAPES
   ========================================================= */

.approche-etape {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: var(--esp-h-2);

    padding-block: var(--esp-h-2);

    border-bottom: 1px solid var(--couleur-bordure-claire);
}

.approche-etape-visuel {
    flex: 2 1 320px;
    min-width: 0;
}

.approche-etape-contenu {
    flex: 3 1 420px;
    min-width: 0;
}

.approche-etape-visuel img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;

    border-radius: 6px;

    box-shadow: 0 10px 28px rgb(10 20 47 / 12%);
}

.approche-etape-contenu h3 {
    margin-top: 0;
}

.approche-etape-contenu p {
    line-height: 1.6;
}


/* Alternance image / texte */

.approche-etape.inverse .approche-etape-visuel {
    order: 2;
}

.approche-etape.inverse .approche-etape-contenu {
    order: 1;
}


/* =========================================================
   ÉTAPES SANS IMAGE
   ========================================================= */

.approche-etape-simple {
    justify-content: center;
}

.approche-etape-simple .approche-etape-contenu {
    flex: 0 1 900px;
    max-width: 900px;
}


/* =========================================================
   NUMÉRO DES ÉTAPES
   ========================================================= */

.approche-etape-numero {
    display: block;

    margin-bottom: 10px;

    color: var(--couleur-orange-principal);

    font-size: clamp(2rem, 5vw, 4.5rem);
    font-weight: 700;
    line-height: 1;
}


/* =========================================================
   ACTIVITÉS
   ========================================================= */

.approche-activites {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin-top: 20px;
}

.approche-activites span {
    padding: 7px 12px;

    border: 1px solid var(--couleur-orange-principal);
    border-radius: 999px;

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

    font-size: 0.9rem;
    font-weight: 600;
}


/* =========================================================
   SYNTHÈSE DU PARCOURS
   ========================================================= */

.approche-synthese {
    padding: var(--esp-h-1) var(--esp-h-2);

    color: var(--couleur-blanc);
    background-color: var(--couleur-bleu-fonce);
}

.approche-synthese-contenu {
    max-width: 1100px;
    margin-inline: auto;

    text-align: center;
}

.approche-synthese h2 {
    max-width: 800px;
    margin: 0 auto;

    color: var(--couleur-blanc);
}

.approche-synthese-parcours {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    gap: 10px;

    margin-top: var(--esp-h-2);
}

.approche-synthese-parcours span {
    display: flex;
    align-items: center;

    gap: 10px;

    font-weight: 600;
}

.approche-synthese-parcours span:not(:last-child)::after {
    content: "→";

    color: var(--couleur-orange-principal);

    font-size: 1.2rem;
}


/* =========================================================
   APPEL À L'ACTION
   ========================================================= */

.approche-contact {
    padding: var(--esp-h-1) var(--esp-h-2);
}

.approche-contact-contenu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;

    gap: var(--esp-h-3);

    max-width: 1200px;
    margin-inline: auto;

    padding: var(--esp-h-2);

    border: 1px solid var(--couleur-bordure-claire);
    border-radius: 6px;

    background-color: rgb(255 150 0 / 10%);
}

.approche-contact-contenu > div {
    flex: 1 1 500px;
    min-width: 0;
}

.approche-contact-contenu h2 {
    margin-top: 0;
}

.approche-contact-contenu .bouton {
    flex: 0 0 auto;
}