/* Ouverture : le logo en grand au milieu de l'écran, djembé à gauche, mot-symbole sur deux lignes. */

.ouverture__scene {
    display: grid;
    place-content: center;
    min-height: calc(100svh - var(--hauteur-barre));
    padding: var(--espace-4) var(--marge);
    /*
     * Des frappes rapides sur la peau sont des doubles et triples clics : sans ça, ils surlignent « Rythme »,
     * ou le texte de la section suivante quand ils tombent à côté du tambour.
     */
    -webkit-user-select: none;
    user-select: none;
}

/* Proportions mesurées sur le logo : deux lignes de 0,84 em, djembé de la hauteur du titre, à 0,1 em du texte. */
.ouverture__logo {
    display: flex;
    align-items: flex-start;
    gap: 0.1em;
    font-size: var(--fs-ouverture);
}

.ouverture__tambour .djembe {
    width: auto;
    height: 1.68em;
    overflow: visible;
}

.ouverture__titre {
    font-size: 1em;
    line-height: 0.84;
}

.ouverture__mot {
    display: block;
    white-space: nowrap;
}

.lettre {
    display: inline-block;
}

.ouverture__texte,
.ouverture__lien {
    font-size: var(--fs-1);
    text-align: center;
}

.ouverture__texte {
    margin-top: var(--espace-5);
}

.ouverture__lien {
    margin-top: var(--espace-3);
}

/* Introduction : Tom se présente, ses quatre offres en cartes, ses compétences clés. */

.introduction {
    display: grid;
    gap: clamp(var(--espace-5), 5vw, var(--espace-6));
}

.introduction__entete {
    max-width: 44rem;
}

.introduction__entete .section__titre {
    margin-bottom: var(--espace-3);
}

.introduction__texte {
    font-size: var(--fs-1);
    line-height: 1.45;
}

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

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

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

/* Sous-grille : les résumés d'une même rangée s'alignent, qu'un titre tienne sur une ligne ou deux. */
.introduction__offre {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    row-gap: var(--espace-1);
    padding-top: var(--espace-3);
    border-top: 1px solid var(--secondaire);
}

.introduction__nom {
    font-size: var(--fs-1);
}

.introduction__offre p {
    color: var(--secondaire);
}

.introduction__liens {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace-1) var(--espace-4);
    margin-top: var(--espace-3);
    font-size: var(--fs-1);
}

/* Espacement entre les sections de l'accueil. */

.introduction,
.manifeste,
.choix,
.pitch,
.appel {
    margin-top: var(--entre-sections);
}

/* Le manifeste : trois temps décalés, comme des frappes en contretemps. */

.manifeste__entete {
    max-width: 36rem;
}

.manifeste__intro {
    font-size: var(--fs-1);
    line-height: 1.45;
}

.manifeste__temps {
    display: grid;
    gap: var(--espace-7);
    margin-top: var(--espace-7);
}

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

.temps p {
    margin-top: var(--espace-2);
    color: var(--secondaire);
}

.manifeste__sources {
    max-width: 64rem;
    margin-top: var(--espace-7);
}

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

    .temps:nth-child(1) {
        grid-column: 1 / span 4;
    }

    .temps:nth-child(2) {
        grid-column: 6 / span 3;
        margin-top: var(--espace-8);
    }

    .temps:nth-child(3) {
        grid-column: 10 / span 3;
        margin-top: var(--espace-9);
    }
}

/* Dernières réalisations */

.choix__liste {
    display: grid;
    gap: var(--espace-6) var(--gouttiere);
    margin-bottom: var(--espace-5);
}

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

    .choix__projet:nth-child(2) {
        margin-top: var(--espace-6);
    }
}

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

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

.choix__role {
    margin-top: var(--espace-1);
    color: var(--secondaire);
}

/* Pitch : une réplique par ligne, puis le lien vers le parcours complet. */

.pitch__texte {
    font-size: var(--fs-1);
    line-height: 1.45;
    max-width: 44rem;
}

.pitch__texte p + p {
    margin-top: var(--espace-1);
}

.pitch__lien {
    margin-top: var(--espace-4);
    font-size: var(--fs-1);
}

/* Appel au contact */

.appel__titre {
    font-size: var(--fs-4);
    max-width: 16ch;
}

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