/* ============================================================
 * Layout principal — app-main wrapper + bottom-nav
 * ============================================================ */

.app-main {
    /* Padding-top : header-h uniquement (le safe-top est déjà dans le
       padding du header fixed lui-même). Pas d'espace additionnel. */
    padding:
        var(--header-h)
        max(var(--space-4), var(--safe-left))
        calc(var(--bottom-nav-h) + var(--safe-bottom) + var(--space-6))
        max(var(--space-4), var(--safe-right));
    max-width: 760px;
    margin: 0 auto;
}

body.no-bottom-nav .app-main {
    padding-bottom: calc(var(--safe-bottom) + var(--space-6));
}

/* Layout desktop : pages qui veulent exploiter plus de largeur (fiche livre,
   profil, listes...) peuvent override la max-width via body class .page-wide.
   Mobile reste inchangé. */
@media (min-width: 1024px) {
    body.page-wide .app-main {
        max-width: 1100px;
    }
}
@media (min-width: 1400px) {
    body.page-wide .app-main {
        max-width: 1280px;
    }
}

@media (min-width: 720px) {
    .app-main { padding-top: calc(var(--header-h) + var(--space-4)); }
}

/* === Bottom navigation === */

.bottom-nav {
    position: fixed;
    bottom: calc(var(--space-3) + var(--safe-bottom));
    left: max(var(--space-3), var(--safe-left));
    right: max(var(--space-3), var(--safe-right));
    z-index: 20;
    background: color-mix(in srgb, var(--bg-elevated, var(--white)) 72%, transparent);
    backdrop-filter: saturate(180%) blur(26px);
    -webkit-backdrop-filter: saturate(180%) blur(26px);
    border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
    border-radius: 999px;
    box-shadow: var(--shadow-lg), inset 0 1px 0 color-mix(in srgb, var(--white) 32%, transparent);
    padding: 6px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2px;
}

.bottom-nav__item {
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2);
    text-decoration: none;
    color: var(--muted);
    border-radius: 999px;
    min-height: 46px;
    transition: color 120ms, background 120ms;
}
/* Île flottante façon app mobile : icônes seules. Le libellé reste pour les
   lecteurs d'écran (masqué visuellement), et réapparaît sur la nav desktop. */
.bottom-nav__item span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.bottom-nav__item:hover {
    color: var(--ink);
    text-decoration: none;
}
.bottom-nav__item[aria-current="page"] {
    color: var(--violet);
}
/* Pastille active en ::before pour lui donner un view-transition-name : au
   changement d'onglet, Turbo 8 (+ meta view-transition) la fait GLISSER de
   l'ancien onglet vers le nouveau. Seule cette pastille est animee (l'anim
   racine est coupee en bas de fichier). Masquee sur desktop (nav en ligne
   dans le header, pas d'ilot). */
.bottom-nav__item[aria-current="page"]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 999px;
    background: var(--violet-soft);
    view-transition-name: nav-pill;
}
.bottom-nav__item--disabled {
    color: var(--subtle);
    pointer-events: none;
}
.bottom-nav__item svg {
    width: 22px;
    height: 22px;
}

/* Desktop : bottom-nav se déplace en top-right du header (position fixed),
   à la place du bouton "Connexion" pour les visiteurs anonymes. Les items
   deviennent compacts horizontaux. Cohérent avec le pattern "navigation
   minimaliste en haut" type Linear/Stripe. */
@media (min-width: 900px) {
    .app-main { padding-bottom: var(--space-7); }
    .bottom-nav {
        position: fixed;
        top: 0;
        right: max(var(--space-4), var(--safe-right));
        left: auto;
        bottom: auto;
        height: var(--header-h);
        max-width: none;
        width: auto;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        z-index: 30;
        display: flex;
        gap: 2px;
        align-items: center;
    }
    .bottom-nav__item {
        flex-direction: row;
        gap: 6px;
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--muted);
        padding: 6px 10px;
        min-height: 36px;
        border-radius: var(--radius-sm);
    }
    /* Libellés ré-affichés sur la nav desktop (icon+texte). */
    .bottom-nav__item span {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        clip: auto;
        overflow: visible;
    }
    .bottom-nav__item[aria-current="page"] {
        background: transparent;
    }
    .bottom-nav__item[aria-current="page"]::before { display: none; }
    .bottom-nav__item:hover {
        background: var(--bg-elevated);
    }
    .bottom-nav__item svg {
        width: 16px;
        height: 16px;
    }
}

/* ============================================================
 * View Transitions (Turbo 8)
 * On n'anime QUE la pastille de nav (nav-pill), qui glisse d'un onglet a
 * l'autre. La racine bascule instantanement : pas de cross-fade global de
 * page (discretion, cf. manifeste « zero animation gratuite »).
 * ============================================================ */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
}
/* Duree/courbe douce pour le glissement de la pastille. */
::view-transition-group(nav-pill) {
    animation-duration: 260ms;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(nav-pill),
    ::view-transition-old(nav-pill),
    ::view-transition-new(nav-pill) {
        animation: none !important;
    }
}