/* En-tête de l'accueil */

.accueil-tete {
    padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3.5rem, 7vw, 6rem);
}

.accueil-tete__grille {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    gap: clamp(2.5rem, 6vw, 5rem);
}

.accueil-tete h1 {
    max-width: 14ch;
    font-size: var(--t-4xl);
    line-height: 1.08;
}

.accueil-tete .chapo {
    max-width: 46ch;
    margin-top: var(--e-5);
}

.accueil-tete__visuel {
    display: grid;
    justify-items: center;
}

.accueil-tete__cadre {
    position: relative;
    width: min(100%, 30rem);
}

.accueil-tete__photo {
    transform: rotate(1.6deg);
}

.accueil-tete__photo img {
    aspect-ratio: 5 / 4;
}

.accueil-tete__photo[hidden] {
    display: none;
}

/* Le logo posé en tampon sur le coin de la photo */
.accueil-tete__tampon {
    position: absolute;
    top: -2.25rem;
    left: -2.5rem;
    width: clamp(6.5rem, 11vw, 8.5rem);
    height: auto;
    border-radius: 50%;
    transform: rotate(-10deg);
    box-shadow: 0 10px 24px -10px rgba(29, 52, 35, 0.6);
}

/* Sans photo (catalogue vide ou injoignable), le logo prend la place */
.accueil-tete__photo[hidden] + .accueil-tete__tampon {
    position: static;
    display: block;
    width: min(100%, 22rem);
    margin-inline: auto;
    transform: none;
}

/* Qui suis-je ? */

.presentation {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: start;
    gap: clamp(2.5rem, 6vw, 5.5rem);
}

.presentation__portrait {
    position: sticky;
    top: calc(var(--haut-colle) + 2rem);
    width: min(100%, 24rem);
    justify-self: center;
    transform: rotate(-2deg);
}

.presentation__portrait--logo img {
    object-fit: contain;
    padding: 12%;
    background: var(--teinte-beige-1);
}

.presentation__texte {
    max-width: 62ch;
}

.presentation__texte h2 {
    margin-bottom: var(--e-2);
}

.presentation__texte h3 {
    color: var(--texte-vert);
}

.presentation__signature {
    margin-top: var(--e-5);
    font-family: var(--police-main);
    font-size: 2.3rem;
    line-height: 1;
    color: var(--texte-vert);
}

/* Avant / Après */

.avant-apres {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
}

.avant-apres__texte h2 {
    margin-bottom: var(--e-4);
}

.avant-apres__texte h3 {
    margin-bottom: var(--e-2);
    color: var(--texte-vert);
}

.avant-apres__texte p {
    margin-bottom: var(--e-5);
    color: var(--encre-doux);
}

/* Sans réalisation publiée, la section est masquée : on garde l'alternance des fonds */
[data-section-avant-apres][hidden] + .section {
    background: var(--fond-alt);
}

@media (max-width: 900px) {
    .accueil-tete__grille,
    .presentation,
    .avant-apres {
        grid-template-columns: 1fr;
    }

    .accueil-tete__cadre {
        width: min(100% - 2rem, 26rem);
        margin-top: 1.5rem;
    }

    .accueil-tete__tampon {
        top: -1.75rem;
        left: -1.25rem;
        width: 5.5rem;
    }

    .presentation__portrait {
        position: static;
        width: min(80%, 18rem);
    }
}