/* ========================================
   ACCUEIL — ÉDITION POÏMEN
======================================== */


/* ===== 1. HERO ===== */

.hero {
    overflow: hidden;
}

.hero-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 72px;
    padding-block: clamp(40px, 5vw, 72px) clamp(120px, 12vw, 168px);
}

.hero-text {
    flex: 999 1 520px;
    min-width: 0;
}

.hero-meta {
    margin-top: 48px;
    font-size: 17px;
    line-height: 1.6;
    color: var(--muted);
}

.hero-meta span {
    color: var(--fg);
}

.hero-fan {
    flex: 1 1 460px;
    min-width: 0;
}

.hero-fan picture {
    display: contents;
}


/* ===== 2. CATALOGUE ===== */

.catalogue {
    padding-bottom: var(--section);
}

.book-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 72px 56px;
    margin-top: 64px;
}

.book {
    display: flex;
    flex-direction: column;
}

.book .cover {
    padding: 0 12%;
}

.book-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    margin-top: 36px;
    font-size: 15px;
}

.book-label a {
    transition: color 0.4s ease;
}

.book-label a:hover {
    color: var(--muted);
}

.book-desc {
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--muted);
}

.price {
    margin-top: 12px;
    font-size: 15px;
}


/* ===== 4. LA MAISON + PUBLIER ===== */

.split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 96px;
}

.split .lead {
    margin-top: 28px;
}

.split .btn {
    margin-top: 36px;
}


/* ===== 5. AUTEUR ===== */

.author-figure {
    display: contents;
}


/* ===== TÉMOIGNAGES (à venir) ===== */

.testimonials {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 56px;
    margin-top: 56px;
}

.testimonial blockquote {
    font-size: 22px;
    font-weight: 300;
    font-style: italic;
    line-height: 1.45;
}

.testimonial figcaption {
    margin-top: 16px;
    font-size: 15px;
    color: var(--muted);
}


/* ===== ÉCRANS MOYENS ET MOBILE ===== */

@media (max-width: 1000px) {

    .hero-fan {
        max-width: 560px;
        margin-inline: auto;
    }

    .split {
        grid-template-columns: 1fr;
        gap: 72px;
    }
}

@media (max-width: 700px) {

    .book-grid {
        grid-template-columns: 1fr;
        gap: 80px;
    }

    .book .cover {
        padding: 0 18%;
    }

    .hero-inner {
        gap: 40px;
    }
}