/**********      OUTILS DE NAVIGATION (toutes les pages)      **********/
/* Bouton musique et bouton « haut de page » (créés par JSS/navigation.js),
   liens « précédent / suivant » en bas des années et des pages de l'historique.
   Tailles en px : identiques sur toutes les pages. */

/* ----- Bouton musique (dans le bandeau, ou à côté du nom du chœur à l'accueil) ----- */
.bouton-musique {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    width: 40px;
    height: 40px;
    margin: 0 0 0 auto;
    padding: 0;
    color: #00689c;
    background: linear-gradient(180deg, #ffffff, #c6ecff);
    border: 1px solid #005f91;
    border-radius: 50%;
    box-shadow: inset 0 1px 1px #ffffff, 0 2px 6px #003c5f29;
    cursor: pointer;
    transition: color .18s ease, background .18s ease, border-color .18s ease;
}

.bouton-musique svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bouton-musique .hp {
    fill: currentColor;
}

.bouton-musique .croix {
    display: none;
}

.bouton-musique.est-coupee {
    color: #6b6f78;
    background: linear-gradient(180deg, #ffffff, #e6e8ec);
    border-color: #8a8f99;
}

.bouton-musique.est-coupee .ondes {
    display: none;
}

.bouton-musique.est-coupee .croix {
    display: inline;
}

/* Musique bloquée par le navigateur : le bouton clignote doucement pour inviter à cliquer. */
.bouton-musique.en-attente {
    animation: musique-attente 1.6s ease-in-out infinite;
}

@keyframes musique-attente {
    0%, 100% {
        box-shadow: inset 0 1px 1px #ffffff, 0 0 0 0 #00689c66;
    }

    50% {
        box-shadow: inset 0 1px 1px #ffffff, 0 0 0 6px #00689c00;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bouton-musique.en-attente {
        animation: none;
    }
}

.bouton-musique:hover,
.bouton-musique:focus-visible {
    color: #006615;
    background: linear-gradient(180deg, #ffffff, #d8ffd9);
    border-color: #006615;
    outline: none;
}

.bouton-musique:focus-visible {
    box-shadow: 0 0 0 3px #0b5d4580;
}

/* À l'accueil, le bouton se met juste à côté du nom du chœur. */
.barre_adix .bouton-musique {
    margin: 0;
}

@media all and (max-width: 640px) {
    .bouton-musique {
        width: 34px;
        height: 34px;
    }

    .bouton-musique svg {
        width: 21px;
        height: 21px;
    }
}

@media all and (max-width: 380px) {
    .bouton-musique {
        width: 31px;
        height: 31px;
    }

    .bouton-musique svg {
        width: 19px;
        height: 19px;
    }
}

/* ----- Bouton « haut de page » : rond, en bas à gauche, visible après un écran de défilement ----- */
.haut-page {
    position: fixed;
    left: 12px;
    bottom: 14px;
    z-index: 4500;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    color: #fff;
    background: #00689ce6;
    border: 2px solid #ffffffd9;
    border-radius: 50%;
    box-shadow: 0 3px 10px #00223066;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s, background .18s ease;
}

.haut-page.est-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.haut-page svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.haut-page:hover,
.haut-page:focus-visible {
    background: #006615;
    outline: none;
}

.haut-page:focus-visible {
    box-shadow: 0 0 0 3px #0b5d4580, 0 3px 10px #00223066;
}

@media all and (max-width: 640px) {
    .haut-page {
        left: 8px;
        bottom: 10px;
        width: 40px;
        height: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .haut-page {
        transition: none;
    }
}

/* ----- Précédent / suivant en bas des années et des pages de l'historique ----- */
.suite-pages {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    width: min(760px, calc(100% - 20px));
    margin: 24px auto 18px;
    padding: 10px;
    font: 400 17px/1.15 haritzaga, Arial, sans-serif;
    letter-spacing: .03em;
    background: #ffffffb3;
    border: 1px solid #ffffffd9;
    border-radius: 16px;
    box-shadow: 0 4px 14px #003c5f26;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.suite-pages a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 6px 14px;
    color: #002e80;
    background: linear-gradient(180deg, #ffffff, #c6ecff);
    border: 1px solid #005f91;
    border-radius: 999px;
    box-shadow: inset 0 1px 1px #ffffff, 0 2px 6px #003c5f29;
    text-decoration: none;
    text-shadow: none;
    transition: color .18s ease, background .18s ease, border-color .18s ease;
}

.suite-pages a svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.suite-pages a:hover,
.suite-pages a:focus-visible {
    color: #006615;
    background: linear-gradient(180deg, #ffffff, #d8ffd9);
    border-color: #006615;
    outline: none;
}

.suite-pages a:focus-visible {
    box-shadow: 0 0 0 3px #0b5d4580;
}

.suite-pages .suite-prec {
    justify-self: start;
}

.suite-pages .suite-tout {
    justify-self: center;
    color: #fff;
    background: linear-gradient(180deg, #1a7fb3, #00689c);
    border-color: #00507a;
}

.suite-pages .suite-tout:hover,
.suite-pages .suite-tout:focus-visible {
    color: #fff;
    background: linear-gradient(180deg, #1a8a3f, #006615);
    border-color: #004d10;
}

.suite-pages .suite-suiv {
    justify-self: end;
    text-align: right;
}

.suite-pages a span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Téléphone : « tout » sur sa ligne, précédent et suivant dessous, côte à côte. */
@media all and (max-width: 640px) {
    .suite-pages {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "tout tout" "prec suiv";
        gap: 8px;
        padding: 8px;
        font-size: 15px;
    }

    .suite-pages .suite-tout {
        grid-area: tout;
    }

    .suite-pages .suite-prec {
        grid-area: prec;
    }

    .suite-pages .suite-suiv {
        grid-area: suiv;
    }

    .suite-pages a {
        justify-content: center;
        gap: 5px;
        max-width: 100%;
        padding: 6px 8px;
    }

    .suite-pages .suite-prec,
    .suite-pages .suite-suiv {
        justify-self: stretch;
        align-self: stretch;
    }

    /* noms longs (« Rencontre Agache ») : sur deux lignes plutôt que coupés */
    .suite-pages a span {
        overflow: visible;
        white-space: normal;
        text-overflow: clip;
        text-align: center;
    }
}

@media all and (max-width: 380px) {
    .suite-pages {
        font-size: 14px;
        letter-spacing: .01em;
    }

    .suite-pages a svg {
        width: 15px;
        height: 15px;
    }
}