/* ==========================================================================
 * Bandeau cookies — extension « Cookie Notice / Cookie Compliance »
 * (Hu-manity.co). 28/10/2026.
 *
 * Le thème parent retire la CSS de l'extension (verdon_acf_deregister_styles)
 * et ne stylait que « a.cn-button » : l'extension sort désormais des
 * <button>, rendus bruts par le navigateur (« Ok » de 22 × 20 px, croix de
 * 4 px). Ce fichier remplace ce bandeau gris pleine largeur par une carte
 * flottante dans le langage du toast Apidae (css/apidae-popup.css) : fond
 * blanc, coins 3 px, ombre portée, bouton teal du .verdon-cta.
 *
 * Balisage de l'extension (non modifiable, couleurs en style inline d'où les
 * !important) :
 *   #cookie-notice[role=dialog] > .cookie-notice-container
 *     #cn-notice-text            texte (+ a#cn-more-info si lien « dans le message »)
 *     #cn-notice-buttons         #cn-accept-cookie, #cn-refuse-cookie (option),
 *                                #cn-more-info (option, lien « dans le bandeau »)
 *     #cn-close-notice           croix (option)
 * Affichage piloté par le JS de l'extension : .cookie-notice-visible,
 * .cn-animated pendant les animations (il attend « animationend » pour poser
 * .cookie-notice-hidden), classes cookies-not-set / cookies-set sur <body>.
 * Fonctionnement et réglages de l'admin : docs/bandeau-cookies.md.
 * ========================================================================== */

#cookie-notice {
    --cookies-teal: #1F5C56;
    --cookies-teal-mid: #2D7A72;
    --cookies-teal-light: #3A9C92;
    --cookies-text: #2e2e2e;

    position: fixed;
    top: auto;
    right: 24px;
    bottom: 24px;
    left: auto;
    z-index: 10012;
    width: 420px;
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 0;
    background: #ffffff !important;
    border-radius: 3px;
    box-shadow:
        0 18px 40px -12px rgba(0, 0, 0, 0.3),
        0 6px 18px -6px rgba(0, 0, 0, 0.16);
    text-align: left;
}

/* ---------- Apparition / disparition ----------
   Sortie : l'extension retire .cookie-notice-visible, garde .cn-animated
   jusqu'à « animationend », puis pose .cookie-notice-hidden. */
@keyframes verdon-cookies-in {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes verdon-cookies-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(16px);
    }
}

#cookie-notice.cookie-notice-visible {
    display: block;
    animation: verdon-cookies-in 0.38s cubic-bezier(0.16, 1, 0.3, 1) both;
}

#cookie-notice.cn-animated:not(.cookie-notice-visible):not(.cookie-notice-hidden) {
    display: block;
    animation: verdon-cookies-out 0.22s ease-in both;
}

/* ---------- Contenu ---------- */
#cookie-notice .cookie-notice-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 22px 22px;
    color: var(--cookies-text) !important;
}

/* En-tête : pictogramme cookie + « Cookies » (même mot en français et en
   anglais ; « Cookie » en italien). */
#cookie-notice .cookie-notice-container::before {
    content: "Cookies";
    display: flex;
    align-items: center;
    min-height: 32px;
    padding: 0 40px 0 44px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='16' fill='%23E3F0EE'/%3E%3Cg transform='translate(6 6) scale(.8333)' fill='none' stroke='%231F5C56' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5'/%3E%3Cpath d='M8.5 8.5v.01M16 15.5v.01M12 12v.01M11 17v.01M7 14v.01'/%3E%3C/g%3E%3C/svg%3E") no-repeat left center / 32px 32px;
    font-family: 'Gravity', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--cookies-teal-mid);
}

html[lang|="it"] #cookie-notice .cookie-notice-container::before {
    content: "Cookie";
}

#cookie-notice .cn-text-container {
    display: block;
    margin: 0;
    font-family: 'Gravity Book', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--cookies-text);
}

#cookie-notice .cn-text-container a,
#cookie-notice #cn-more-info {
    color: var(--cookies-teal);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

#cookie-notice .cn-text-container a:hover,
#cookie-notice #cn-more-info:hover {
    color: var(--cookies-teal-mid);
}

/* ---------- Boutons ---------- */
#cookie-notice .cn-buttons-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-top: 4px;
}

/* Accepter et Refuser : même format (CNIL, choix aussi simple dans les
   deux sens). Déclinaison compacte du .verdon-cta teal du Bloc Encart. */
#cookie-notice .cn-set-cookie {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    min-height: 44px;
    margin: 0;
    padding: 10px 24px;
    border: none !important;
    border-radius: 3px;
    background-color: var(--cookies-teal) !important;
    background-image: linear-gradient(to right,
            var(--cookies-teal-mid) 0%,
            var(--cookies-teal) 50%,
            #143F3A 100%) !important;
    background-size: 200% 100% !important;
    background-position: 0% 0%;
    box-shadow: 0 6px 16px -8px rgba(31, 92, 86, 0.6);
    color: #ffffff !important;
    font-family: 'Gravity', sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-position 0.4s ease, transform 0.12s ease, filter 0.15s ease;
}

#cookie-notice .cn-set-cookie:hover,
#cookie-notice .cn-set-cookie:focus-visible {
    background-position: 100% 0% !important;
}

#cookie-notice .cn-set-cookie:active {
    transform: scale(0.97);
    filter: brightness(0.88);
}

#cookie-notice .cn-set-cookie:focus-visible,
#cookie-notice #cn-more-info:focus-visible,
#cookie-notice .cn-text-container a:focus-visible,
#cookie-notice .cn-close-icon:focus-visible {
    outline: 2px solid var(--cookies-teal-light);
    outline-offset: 3px;
}

/* Lien « Politique de confidentialité » placé dans le bandeau : l'extension
   en fait un bouton ; il reste un lien texte. */
#cookie-notice .cn-buttons-container #cn-more-info {
    margin: 0;
    padding: 4px 0;
    border: none;
    background: none !important;
    box-shadow: none;
    font-family: 'Gravity Book', sans-serif;
    font-size: 13px;
    line-height: 1.4;
    cursor: pointer;
}

/* ---------- Croix ---------- */
#cookie-notice .cn-close-icon {
    position: absolute;
    top: 20px;
    right: 18px;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #F1F5F4;
    color: var(--cookies-text);
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

#cookie-notice .cn-close-icon::before,
#cookie-notice .cn-close-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 2px;
    margin: -1px 0 0 -7px;
    border-radius: 1px;
    background: currentColor;
    transform: rotate(45deg);
}

#cookie-notice .cn-close-icon::after {
    transform: rotate(-45deg);
}

#cookie-notice .cn-close-icon:hover {
    background: #E3F0EE;
    transform: scale(1.08);
}

/* Bouton « Révoquer » (option non activée) : sans la CSS de l'extension, il
   s'afficherait dans la carte. */
#cookie-notice .cookie-revoke-container {
    display: none;
}

/* ---------- Un seul message en bas de l'écran à la fois ----------
   Tant que le choix n'est pas fait (classe posée par l'extension), le toast
   du vote et la pop-up Apidae attendent : ils couvraient la carte (pop-up
   Apidae au-dessus, z-index 99990) ou passaient dessous (toast du vote). Ils
   s'affichent dès le choix fait ; leur cookie de fermeture n'est posé qu'à
   la fermeture, rien n'est perdu. */
body.cookies-not-set .vs-promo,
body.cookies-not-set .verdon-apidae-popup {
    display: none;
}

/* ---------- Mobile : carte pleine largeur, boutons pleine largeur ---------- */
@media (max-width: 700px) {
    #cookie-notice {
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        left: 12px;
        width: auto;
        max-width: none;
        max-height: calc(100vh - 24px);
    }

    #cookie-notice .cookie-notice-container {
        gap: 10px;
        padding: 16px 16px 18px;
    }

    #cookie-notice .cn-text-container {
        font-size: 13.5px;
        line-height: 1.5;
    }

    #cookie-notice .cn-set-cookie {
        flex: 1 1 0;
    }

    #cookie-notice .cn-buttons-container #cn-more-info {
        flex: 1 0 100%;
        text-align: center;
    }

    #cookie-notice .cn-close-icon {
        top: 16px;
        right: 14px;
    }
}

/* ---------- Accessibilité : réduction des animations ----------
   Sans animation, pas d'« animationend » : l'extension ne pose jamais
   .cookie-notice-hidden, la carte est masquée dès qu'elle perd
   .cookie-notice-visible. */
@media (prefers-reduced-motion: reduce) {
    #cookie-notice.cookie-notice-visible {
        animation: none;
    }

    #cookie-notice.cn-animated:not(.cookie-notice-visible):not(.cookie-notice-hidden) {
        display: none;
        animation: none;
    }

    #cookie-notice .cn-set-cookie,
    #cookie-notice .cn-close-icon {
        transition: none;
    }
}

@media print {
    #cookie-notice {
        display: none !important;
    }
}