/* Rubriques des pages intérieures : un titre à gauche, le propos à droite sur grand écran. */

.rubrique {
    position: relative;
    display: grid;
    gap: var(--espace-3) var(--gouttiere);
    padding-block: var(--espace-6);
}

.rubrique__titre {
    font-size: var(--fs-3);
}

@media (min-width: 64rem) {
    .rubrique {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .rubrique__titre {
        grid-column: 1 / span 4;
    }

    .rubrique__corps {
        grid-column: 6 / -1;
    }
}

.rubrique__corps > * + * {
    margin-top: var(--espace-3);
}

/* Listes de définitions : pour qui, livrables, stack, rôle, résultat. */

.details {
    display: grid;
    gap: var(--espace-2);
}

.details div {
    display: grid;
    gap: var(--espace-1) var(--gouttiere);
}

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

@media (min-width: 48rem) {
    .details div {
        grid-template-columns: 9rem 1fr;
        align-items: baseline;
    }
}

.accroche {
    font-size: var(--fs-1);
    line-height: 1.4;
}

/* À propos */

.bio {
    display: grid;
    gap: var(--espace-6) var(--gouttiere);
    padding-bottom: var(--espace-6);
}

.bio__texte > * + * {
    margin-top: var(--espace-3);
}

@media (min-width: 64rem) {
    .bio {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .bio__texte {
        grid-column: 1 / span 6;
    }

    .bio .image {
        grid-column: 9 / -1;
    }
}

.etapes {
    display: grid;
    gap: var(--espace-5);
}

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

.etape__structure {
    font-size: var(--fs-2);
}

.etape__role {
    font-size: var(--fs-1);
    line-height: 1.35;
}

.etape__role + .date {
    margin-bottom: var(--espace-1);
}

.groupes {
    display: grid;
    gap: var(--espace-2);
}

.pratiques {
    display: grid;
    gap: var(--espace-6) var(--gouttiere);
}

@media (min-width: 48rem) {
    .pratiques {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pratiques li:nth-child(2) {
        margin-top: var(--espace-8);
    }
}

.pratique__nom {
    margin-top: var(--espace-3);
    font-size: var(--fs-2);
}

.pratique__texte,
.pratique__sources {
    margin-top: var(--espace-2);
}

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

/* Réalisations */

.projets {
    display: grid;
    gap: var(--espace-8);
    padding-bottom: var(--espace-6);
}

.projet {
    display: grid;
    gap: var(--espace-4) var(--gouttiere);
}

.projet__images {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gouttiere);
}

.projet__images > :first-child {
    grid-column: 1 / -1;
}

.projet__titre {
    font-size: var(--fs-3);
}

@media (min-width: 64rem) {
    .projet {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        align-items: end;
    }

    .projet__images {
        grid-column: 1 / span 7;
    }

    .projet__texte {
        grid-column: 9 / -1;
    }

    .projet:nth-child(even) .projet__images {
        grid-column: 6 / -1;
        grid-row: 1;
    }

    .projet:nth-child(even) .projet__texte {
        grid-column: 1 / span 4;
        grid-row: 1;
    }
}

.projet__texte > * + * {
    margin-top: var(--espace-3);
}

.projet__titre + .date {
    margin-top: var(--espace-1);
}

/* Mentions légales : une colonne de lecture. */

.legal {
    max-width: 48rem;
}

.legal > section + section {
    margin-top: var(--espace-7);
}

.legal h2 {
    font-size: var(--fs-3);
}

.legal h3 {
    margin-top: var(--espace-5);
    font-size: var(--fs-1);
}

.legal p,
.legal ul {
    margin-top: var(--espace-2);
}

/* Contact */

.contact {
    display: grid;
    gap: var(--espace-7) var(--gouttiere);
}

@media (min-width: 64rem) {
    .contact {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .formulaire {
        grid-column: 1 / span 7;
    }

    .contact__direct {
        grid-column: 9 / -1;
    }
}

.formulaire {
    display: grid;
    gap: var(--espace-4);
}

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

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

.champ input,
.champ textarea {
    width: 100%;
    padding: var(--espace-1) 0;
    border: 0;
    border-bottom: 1px solid var(--secondaire);
    border-radius: 0;
    background: transparent;
}

.champ textarea {
    resize: vertical;
    min-height: 10rem;
}

.champ input:focus-visible,
.champ textarea:focus-visible {
    outline: none;
    border-bottom-color: var(--accent);
    box-shadow: 0 1px 0 0 var(--accent);
}

.champ--case {
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: var(--espace-2);
}

.champ--case input {
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.25em;
    accent-color: var(--texte);
}

.champ--case label {
    font-size: var(--fs-0);
    color: var(--texte);
}

.champ--leurre {
    position: absolute;
    left: -100vw;
}

.erreurs,
.champ ul {
    padding: 0;
    list-style: none;
    font-size: var(--fs--1);
    color: var(--texte);
}

.erreurs li::before,
.champ ul li::before {
    content: "";
    display: inline-block;
    width: 0.45em;
    height: 0.45em;
    margin-right: 0.5em;
    border-radius: 50%;
    background: var(--texte);
}

.alerte {
    padding: var(--espace-3);
    border-left: 2px solid var(--texte);
    background: var(--fond-provisoire);
}

.alerte--succes {
    border-left-color: var(--secondaire);
}

.bouton {
    justify-self: start;
    padding: var(--espace-2) var(--espace-5);
    border: 1px solid var(--texte);
    background: var(--texte);
    color: var(--fond);
    cursor: pointer;
    transition: background var(--duree) var(--courbe);
}

.bouton:hover {
    background: transparent;
    color: var(--texte);
}

.contact__direct > * + * {
    margin-top: var(--espace-2);
}

.contact__email {
    font-size: var(--fs-2);
    overflow-wrap: anywhere;
}

/* Pages d'erreur */

.erreur {
    display: grid;
    gap: var(--espace-4);
    padding-block: var(--espace-6);
}

.erreur .ostinato {
    width: min(100%, 28rem);
    height: auto;
}

.erreur .titre-page {
    font-size: var(--fs-4);
}