.section--page-header {
    padding: 150px 0 50px 0;
    position: relative;
}

.section--page-header__badges-wrap {
    position: absolute;
    top: 95px;
    right: 24px;
    z-index: 2;
    max-width: 50%;
    text-align: right;
}

.section--page-header__badges-label {
    margin: 0 6px 8px 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.section--page-header__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: flex-end;
}

.section--page-header__badge-item {
    margin: 0;
}

.section--page-header__badge {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--color-white);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: background 0.2s, border-color 0.2s;
}

.section--page-header__badge:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    color: var(--color-white);
}

@media (max-width: 768px) {
    .section--page-header__badges-wrap {
        position: static;
        max-width: 100%;
        text-align: left;
        padding: 0 16px;
        margin-bottom: 16px;
    }
    .section--page-header__badges {
        justify-content: flex-start;
    }
    .section--page-header__badges-label {
        text-align: left;
    }
}

.section--page-header .section__image {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.section--page-header .section__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1;
}

.section--page-header .section__title {
    color: var(--color-white);
    padding-left:24px;
    /* Etait fige a 36px. Le fichier contenait bien des paliers pour reduire un
       titre d'en-tete, mais ils ciblaient .section--header — la classe du hero
       d'accueil, jamais presente sur une page — et n'ont donc jamais touche ce
       titre-ci. Ils ont ete retires, l'echelle fluide les remplace. */
    font-size: var(--fs-2xl);
}
.section--page-header .section__title::before{
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    width: 3px;
    border-radius: 2px;
    background: var(--color-white);
}

.section--page-header .section__introduction {
    color: var(--color-white);
    margin-top:24px;
    max-width: 950px;
    font-size: var(--fs-text);
}

.section--page-header .section__introduction strong {
    color: var(--color-white);
}

.section--navigation {
    padding: 20px 0;
    width: 100%;
    background:var(--color-grey);
    border-bottom: 1px solid #D5E3EC;
}

.section--navigation .container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap:32px;
}

.section--navigation .container p {
    display: inline;
    color: var(--color-text);
    font-size: 14px;
    transition: 0.2s;

}

.section--navigation .container ul {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 32px;
}

.section--navigation .container ul li {
}

.section--navigation .container ul li a {
    color: var(--color-text);
    text-decoration: none;
    font-size: 14px;
    transition: 0.2s;
}

.section--navigation .container ul li span {
}

.section--navigation .container ul li a:hover span {
    text-decoration: underline;
}


@media all and (max-width:  768px){
    /* Bandeau de navigation sous l'en-tête : intitulé puis liens, tous sur une
       même ligne avec 32px de gouttière. Sur un téléphone, l'intitulé mange la
       largeur et les liens se coupent n'importe où. On empile l'ensemble, et
       les liens entre eux, avec des écarts ramenés à l'échelle. */
    .section--navigation .container {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .section--navigation .container ul {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 10px;
        width: 100%;
    }

    /* Cible tactile confortable une fois les liens empilés. */
    .section--navigation .container ul li a {
        display: inline-block;
        padding: 4px 0;
    }
}