/* =============================================================================
   layout.css — En-tête (logo + menu) et pied de page, communs à toutes les pages,
   + mise en page propre à l'accueil (body.page-home).
   ============================================================================= */

/* ---------- EN-TÊTE ---------- */

/* En-tête flottant : décollé des bords, toujours visible au même endroit.
   Largeur ajustée à son contenu (logo + menu) et centré, sans dépasser l'écran. */
   header {
    position: fixed;
    top: var(--header-gap);
    left: var(--header-gap);
    right: var(--header-gap);
    z-index: 1000;
    display: flex;
    align-items: center;
    width: fit-content;
    max-width: calc(100% - 2 * var(--header-gap));
    margin: 0 auto;                  /* centré entre left et right */
    height: var(--header-height);
    padding: 0 1.5rem 0 1.25rem;
    border-radius: var(--radius-pill);
    background: radial-gradient(var(--green-dark), var(--green-dark-2));
    box-shadow: 0 4px 15px rgba(15, 56, 52, 0.35);
}

.header-favicon {
    flex: none;
    padding-right: 1.25rem;
}

.header-favicon img {
    width: 1.6rem;
    height: auto;
}

.nav-list {
    display: flex;
    align-items: center;
    gap: 1.75rem;                    /* espace entre les entrées du menu */
}

/* Mobile : icônes */
.nav-bar-desktop {
    display: none;
}

.nav-bar-mobile img {
    width: 1.5rem;
}

/* ---------- PIED DE PAGE ---------- */

footer {
    padding: 2rem 0;
    text-align: center;
    background-color: var(--green-dark);
}

.footer-nav-item {
    margin: 0.3rem 0;
}

.footer-nav-link {
    font-size: 0.875rem;
    color: #E7E9F1;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.footer-nav-link:hover,
.footer-nav-link:focus-visible {
    opacity: 1;
}

/* ---------- PAGE D'ACCUEIL (body.page-home) ----------
   Pas d'image de fond : c'est le splashscreen flouté qui sert de fond.
   Chaque section a sa propre feuille : splashscreen.css, le-livre.css, reviews.css,
   agenda.css, socials.css (formulaire de contact : forms.css). */

   body.page-home {
    background: var(--green-dark);
}

/* Le pied de page passe lui aussi au-dessus du splashscreen */
.page-home footer {
    position: relative;
    z-index: 1;
}

/* Le titre d'une section ne passe pas sous le menu flottant */
.home-section {
    scroll-margin-top: calc(var(--header-offset) + 1rem);
}

/* ---------- TABLETTE ET PLUS ---------- */

@media (min-width: 768px) {
    /* Menu texte à la place des icônes */
    .nav-bar-mobile {
        display: none;
    }

    header{
        padding: 0 3rem 0 3rem;
    }

    .nav-bar-desktop {
        display: flex;
    }

    .header-favicon {
        padding-right: 4.5rem;
    }

    .nav-list {
        gap: 4.5rem;
    }

    .nav-link {
        white-space: nowrap;
    }

    .nav-link {
        font-size: 1rem;
        letter-spacing: 1px;
        color: #fbfbfd;
        padding-bottom: 0.3rem;
        transition: 0.3s ease;
    }

    .nav-link:hover {
        color: #cce2d6; 
    }

    footer {
        padding: 3.5rem 0;
    }

    .footer-nav-bar {
        display: flex;
        justify-content: space-evenly;
    }
}