.conteneur {
    width: min(100% - 2 * var(--marge), var(--largeur-max));
    margin-inline: auto;
}

/* Barre */

.barre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espace-4);
    min-height: var(--hauteur-barre);
    padding-inline: var(--marge);
}

/* La composition du logo, aux proportions de l'ouverture de l'accueil : deux lignes de 0,84 em, le djembé de leur hauteur. */
.marque {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.1em;
    font-family: var(--police-titre);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 0.84;
    color: var(--texte);
    text-decoration: none;
}

.marque .djembe {
    flex: none;
    width: auto;
    height: 1.68em;
}

.marque__mot {
    display: block;
}

.barre > .marque {
    view-transition-name: marque;
}

.barre__nav ul {
    display: flex;
    gap: clamp(var(--espace-3), 3vw, var(--espace-5));
}

.barre__nav a,
.pied__nav a {
    text-decoration-color: transparent;
}

.barre__nav a:hover,
.barre__nav a[aria-current="page"],
.pied__nav a:hover {
    text-decoration-color: var(--accent);
}

.barre__menu,
.menu__fermer {
    padding: var(--espace-1) 0;
    border: 0;
    background: none;
    cursor: pointer;
    text-decoration: underline 1px var(--secondaire);
    text-underline-offset: 0.25em;
}

.barre__menu {
    display: none;
}

@media (max-width: 47.99rem) {
    .barre__nav {
        display: none;
    }

    .barre__menu {
        display: block;
    }
}

/* Menu mobile : <dialog> modal, fond inerte et Échap fournis par le navigateur. */

.menu {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    padding: var(--espace-2) var(--marge) var(--espace-6);
    border: 0;
    background: var(--fond);
    color: var(--texte);
}

.menu[open] {
    display: flex;
    flex-direction: column;
}

.menu::backdrop {
    background: var(--fond);
}

.menu__fermer {
    align-self: flex-end;
    min-height: calc(var(--hauteur-barre) - var(--espace-2) * 2);
}

.menu nav {
    margin-block: auto;
}

.menu ul {
    display: grid;
    gap: var(--espace-3);
}

.menu a {
    font-size: var(--fs-3);
    text-decoration-color: transparent;
}

.menu a[aria-current="page"] {
    text-decoration-color: var(--accent);
}

/* Pied de page */

.pied {
    display: grid;
    gap: var(--espace-5) var(--espace-4);
    margin-top: var(--entre-sections);
    position: relative;
    padding: var(--espace-6) var(--marge) var(--espace-5);
    font-size: var(--fs--1);
    color: var(--secondaire);
}

.pied > .marque {
    justify-self: start;
}

/* Séparateur : l'ostinato en petit, à la place d'un filet. */
.rubrique > .ostinato,
.pied > .ostinato {
    position: absolute;
    top: 0;
    left: 0;
    width: 8rem;
    height: auto;
    translate: 0 -50%;
}

.pied > .ostinato {
    left: var(--marge);
}

.ostinato {
    color: var(--secondaire);
}

.ostinato circle:first-child {
    color: var(--accent);
}

.pied__contact,
.pied__reseaux,
.pied__nav ul {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--espace-1) var(--espace-4);
}

.pied__email {
    color: var(--texte);
    font-size: var(--fs-1);
}

@media (min-width: 64rem) {
    .pied {
        grid-template-columns: 1fr auto;
        align-items: center;
        row-gap: var(--espace-6);
    }
}

/* Titres de page et de section */

.entete-page {
    padding-block: var(--espace-7) var(--espace-6);
}

.titre-page {
    view-transition-name: titre-page;
}

.entete-page .titre-page {
    font-size: var(--fs-4);
    letter-spacing: -0.01em;
}

.chapo {
    margin-top: var(--espace-4);
    font-size: var(--fs-1);
    line-height: 1.45;
    max-width: 38ch;
}

.section__titre {
    font-size: var(--fs-3);
    margin-bottom: var(--espace-4);
}

.note {
    font-size: var(--fs--1);
    color: var(--secondaire);
}

.date,
.stack {
    font-family: var(--police-mono);
    font-size: var(--fs--1);
    color: var(--secondaire);
    letter-spacing: 0;
}

/* Images : découpées au bon format, le ratio vient des attributs width et height. */

.image {
    display: grid;
    gap: var(--espace-1);
}

.image img {
    width: 100%;
    height: auto;
}