/**
 * Bannière cookies — policarpa.ch (plg_system_policarpacookies)
 *
 * Bandeau discret fixé en bas de page. Les variables --pol-* sont celles du
 * template tpl_policarpa ; les fallbacks reprennent la charte vérifiée
 * (dev/synthese/02) pour que la bannière reste correcte si le plugin est
 * actif avant l'installation du template.
 */

.pol-cookie-banner {
    /* Variables locales, surchargées par le template si présent */
    --pol-cookie-bg: var(--pol-color-creme, #FAF9F5);
    --pol-cookie-text: var(--pol-color-texte, #1E1E1E);
    --pol-cookie-accent: var(--pol-accent-fonce, #D32F2E); /* rouge AA (audit phase 8) : lien, bouton, focus de la bannière */
    --pol-cookie-radius: var(--pol-radius-pilule, 30px);

    position: fixed;
    inset-inline: 0;
    bottom: 0;
    /* Au-dessus du contenu et d'une éventuelle lightbox de galerie */
    z-index: 1050;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
    padding: 1rem 1.25rem;
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
    background: var(--pol-cookie-bg);
    color: var(--pol-cookie-text);
    box-shadow: 0 -2px 12px rgba(30, 30, 30, 0.12);
    font-size: 0.9375rem;
    line-height: 1.5;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* État masqué animé — l'attribut hidden prend le relais après la transition */
.pol-cookie-banner--hidden {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
}

.pol-cookie-banner[hidden] {
    display: none;
}

.pol-cookie-banner__text {
    margin: 0;
    text-align: center;
    /* Aligné sur le conteneur 1280px de la charte */
    max-width: 1280px;
}

.pol-cookie-banner__link {
    color: var(--pol-cookie-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

.pol-cookie-banner__link:hover,
.pol-cookie-banner__link:focus-visible {
    text-decoration: none;
}

/* Bouton pilule rouge de la charte (radius 30px) */
.pol-cookie-banner__btn {
    flex-shrink: 0;
    /* Verticales asymétriques : calage optique Hind (l'encre siège ~0.09em
       au-dessus du centre de ligne — token du template, repli local). */
    padding: calc(0.5rem + var(--pol-cale-texte, 0.09em)) 1.75rem
        calc(0.5rem - var(--pol-cale-texte, 0.09em));
    border: 0;
    border-radius: var(--pol-cookie-radius);
    background: var(--pol-cookie-accent);
    color: #FFFFFF;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.pol-cookie-banner__btn:hover {
    opacity: 0.85;
}

/* Focus clavier visible (bannière tabindex="-1" comprise) */
.pol-cookie-banner:focus-visible,
.pol-cookie-banner__btn:focus-visible,
.pol-cookie-banner__link:focus-visible {
    outline: 2px solid var(--pol-cookie-accent);
    outline-offset: 2px;
}

/* Desktop : texte et bouton sur une seule ligne (breakpoint charte : 767px) */
@media (min-width: 768px) {
    .pol-cookie-banner {
        flex-direction: row;
        justify-content: center;
        gap: 2rem;
    }

    .pol-cookie-banner__text {
        text-align: left;
    }
}

/* Pas d'animation pour les utilisateurs qui la refusent */
@media (prefers-reduced-motion: reduce) {
    .pol-cookie-banner,
    .pol-cookie-banner__btn {
        transition: none;
    }
}