@layer layout {
.conteneur {
    width: 100%;
    max-width: 76rem;
    margin-inline: auto;
    padding-inline: var(--e-5);
}

@media (min-width: 64rem) {
    .conteneur {
        padding-inline: var(--e-6);
    }
}

.conteneur-auth {
    max-width: 34rem;
    text-align: center;
}

.conteneur-auth h1 {
    margin-bottom: var(--e-6);
}

.conteneur-auth .carte {
    text-align: left;
}

.lien-evitement {
    position: absolute;
    top: var(--e-3);
    left: var(--e-3);
    z-index: 300;
    padding: var(--e-3) var(--e-4);
    border-radius: var(--r-md);
    background: var(--texte);
    color: var(--blanc);
    font-weight: 700;
    transform: translateY(-200%);
}

.lien-evitement:focus {
    transform: none;
}

.entete {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--surface);
    border-bottom: 1px solid var(--bordure);
}

.entete .conteneur {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--e-4);
    min-height: 4.5rem;
}

.entete nav {
    display: contents;
}

.pied {
    background: var(--fond-alt);
    border-top: 1px solid var(--bordure);
    font-size: 0.9375rem;
}

.pied-grille {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--e-6);
    padding-block: var(--e-8) var(--e-7);
}

@media (min-width: 48rem) {
    .pied-grille {
        grid-template-columns: 1.6fr 1fr 1.3fr;
        gap: var(--e-7);
    }
}

.pied-texte {
    margin-top: var(--e-4);
    max-width: 34ch;
    color: var(--texte-discret);
}

.pied-titre {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0;
    margin-bottom: var(--e-4);
}

.pied-liens {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--e-3);
}

.pied-liens li {
    display: flex;
    align-items: flex-start;
    gap: var(--e-3);
    color: var(--texte-corps);
}

.pied-liens .icone {
    display: flex;
    flex-shrink: 0;
    margin-top: 0.2rem;
    color: var(--primaire);
}

.pied-liens svg {
    width: 1.125rem;
    height: 1.125rem;
}

.pied-liens a {
    color: var(--texte-corps);
}

.pied-liens a:hover {
    color: var(--primaire);
}

.pied-bas {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--e-2) var(--e-5);
    padding-block: var(--e-5);
    border-top: 1px solid var(--bordure);
}

.pied-bas p {
    font-size: var(--t-petit);
    color: var(--texte-discret);
}

.pied-legal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-2) var(--e-4);
    order: 1;
}

@media (min-width: 48rem) {
    .pied-legal {
        order: 0;
    }
}

.pied-legal a {
    font-size: var(--t-petit);
    color: var(--texte-discret);
}

.pied-legal a:hover {
    color: var(--primaire);
}

.section {
    padding-block: var(--e-8);
}

@media (min-width: 64rem) {
    .section {
        padding-block: var(--e-9);
    }
}

.section-alt {
    background: var(--fond-alt);
}

.section-tete {
    max-width: 46rem;
    margin-bottom: var(--e-7);
}

.section-tete h2 {
    margin-bottom: 0;
}

.section-tete h1 + p,
.section-tete h2 + p {
    margin-top: var(--e-3);
    font-size: var(--t-grand);
    color: var(--texte-discret);
}

.section-tete-centre {
    margin-inline: auto;
    text-align: center;
}

.surtitre {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    margin-bottom: var(--e-3);
    font-size: var(--t-petit);
    font-weight: 700;
    color: var(--primaire);
}

.surtitre::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--accent);
}

.grille-vehicules {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: var(--e-5);
}

.duo {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--e-6);
}

@media (min-width: 48rem) {
    .duo {
        grid-template-columns: 3fr 2fr;
    }
}
}