/* Bannière Cookie — même identité "Ligne" que le FAB (assets/css/core.css) :
   filet quasi invisible et ombre diffuse plutôt qu'une bordure épaisse et
   une ombre portée dure. Couleurs de marque (--eh-color-*, définies dans
   assets/css/core.css) reprises du thème Beleco de jozzbeauty.com. */
.bcc-banner-card, .bcc-banner-card *, .bcc-banner-card *::before, .bcc-banner-card *::after,
.bcc-modal-overlay, .bcc-modal-overlay *, .bcc-modal-overlay *::before, .bcc-modal-overlay *::after {
    box-sizing: border-box;
}

.bcc-banner-card {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 380px;
    max-width: calc(100% - 40px);

    /* Sans limite de hauteur, une carte trop grande pour un écran laptop
       (souvent moins haut qu'un grand moniteur) dépasse par le haut du
       viewport : le logo, premier élément de la carte, devient invisible
       et impossible à faire défiler (élément fixed). */
    max-height: calc(100vh - 40px);
    overflow: hidden auto;
    background: var(--eh-color-surface);
    border: 1px solid rgba(var(--eh-color-ink-rgb), 0.12);
    box-shadow: 0 18px 40px rgba(var(--eh-color-ink-rgb), 0.14);
    padding: 20px;
    z-index: 999999;
    font-family: sans-serif;
    border-radius: 0;
}
.bcc-logo { max-height: 65px; margin-bottom: 15px; }

/* Police héritée du thème hôte (inherit) : les 3 panneaux du FAB doivent se
   lire comme un seul système, cohérent avec la typographie de n'importe
   quel site, plutôt qu'imposer une police tierce jamais chargée par le
   plugin (voir assets/css/sticky-cart.css, accessibility.css, core.css). */
.bcc-title { margin: 0 0 10px 0; font-size: 1rem; font-weight: bold; color: var(--eh-color-ink); font-family: inherit; }
.bcc-desc { margin: 0 0 15px 0; font-size: 0.8125rem; color: #333; line-height: 1.4; }
.bcc-links { margin-bottom: 15px; font-size: 0.6875rem; }
.bcc-links a { color: var(--eh-color-ink); text-decoration: underline; }

/* "Accepter" et "Refuser" sur la même rangée, même taille, même poids de
   police : voir la note dans public-display.php sur la prééminence CNIL. */
.bcc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bcc-btn { padding: 10px; font-size: 0.8125rem; font-weight: bold; cursor: pointer; border: 1.5px solid rgba(var(--eh-color-ink-rgb), 0.55); background: var(--eh-color-surface); color: var(--eh-color-ink); transition: all 0.2s; text-transform: uppercase; font-family: inherit; }
.bcc-btn-accepter { background: var(--eh-color-ink); color: var(--eh-color-surface); border-color: var(--eh-color-ink); }
.bcc-btn-accepter:hover { background: var(--eh-color-surface); color: var(--eh-color-ink); }
.bcc-btn-refuser:hover { background: rgba(var(--eh-color-ink-rgb), 0.06); }

/* "Personnaliser" : action secondaire, un simple lien sous les deux boutons
   principaux plutôt qu'un troisième bouton de même poids visuel. */
.bcc-btn-link {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 6px;
    background: none;
    border: none;
    text-decoration: underline;
    font-size: 0.75rem;
    color: #333;
    cursor: pointer;
    text-align: center;
}

.bcc-btn-link:hover {
    color: #000;
}

/* Panneau de préférences : un simple bloc de contenu affiché à l'intérieur
   du slot partagé #eh-fab-detail (voir includes/core/frontend.php et
   assets/css/core.css) plutôt qu'une modale flottante indépendante — la
   réouverture après consentement se lit comme le MÊME objet que l'engrenage,
   pas une fenêtre à part. Position, taille et habillage (fond flouté, ombre,
   bordure) sont désormais portés par #eh-fab lui-même. */
.bcc-modal-overlay {
    width: 100%;

    /* max-height (pas height:100%) : #eh-fab grandit selon son propre contenu
       (height: auto), donc un pourcentage ici ne se résoudrait jamais et la
       zone de défilement plus bas ne saurait jamais quand s'activer — le
       bouton "Annuler" se retrouvait coupé, sans aucun moyen d'y accéder. */
    max-height: calc(100vh - 140px);
    font-family: sans-serif;
}

/* .bcc-modal reste un simple conteneur flex interne (plus d'habillage
   propre : celui-ci vient de #eh-fab, l'objet visuel unique). */
.bcc-modal {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
}

/* Seule cette zone défile si le contenu dépasse : la croix, elle, reste
   toujours en place et cliquable dans son intégralité. */
.bcc-modal-scroll {
    flex: 1;
    min-height: 0;
    overflow: hidden auto;

    /* Marge droite plus large que les autres côtés : laisse de la place à la
       barre de défilement, pour qu'elle n'arrive pas juste sous la croix de
       fermeture (position: absolute, hors de cette zone qui défile). */
    padding: 34px 20px 16px 16px;
}

.bcc-modal-close {
    position: absolute;
    top: 8px;
    right: 14px;
    width: 28px;
    height: 28px;
    border-radius: 0;
    border: none;
    background: rgba(0, 0, 0, 0.06);
    color: #333;
    font-size: 0.875rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 2;
    flex-shrink: 0;
}

.bcc-modal-close:hover {
    background: rgba(0, 0, 0, 0.12);
}

.bcc-cookie-type { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #ddd; gap: 15px; }
.bcc-cookie-type label { cursor: pointer; }
.bcc-cookie-type strong { font-size: 0.8125rem; }

/* Le thème du site peut appliquer des styles globaux agressifs aux checkboxes
   (reset, toggle personnalisé) : on force explicitement leur affichage natif. */
.bcc-modal input[type="checkbox"] {
    appearance: auto;
    display: inline-block !important;
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px;
    flex-shrink: 0;
    margin: 0;
    accent-color: var(--eh-color-ink);
    cursor: pointer;
}

/* Largeur du panneau de préférences gérée par #eh-fab (assets/css/core.css) ;
   seule sa hauteur max doit rester alignée sur les mêmes points de rupture,
   pour que la zone de défilement ci-dessus sache quand s'activer. */
@media (max-width: 1440px) {
    .bcc-modal-overlay {
        max-height: calc(100vh - 120px);
    }
}

@media (max-width: 480px) {
    /* max-width doit être surchargé ici aussi, pas seulement width : sans
       ça, le max-width: calc(100% - 40px) du bloc desktop ci-dessus reste
       actif et prend le dessus sur width: 100% (un max-width plus étroit
       gagne toujours sur width). Résultat observé : la carte restait
       calée à ~335px sur un écran de 375px, avec ~40px de vide à gauche —
       "bizarrement placée dans le coin", au lieu de couvrir toute la largeur. */
    .bcc-banner-card { width: 100%; max-width: 100%; bottom: 0; right: 0; border: none; border-top: 1px solid rgba(var(--eh-color-ink-rgb), 0.12); box-shadow: none; }

    .bcc-modal-overlay {
        max-height: calc(100vh - 110px);
    }
}

/* Confirmation brève après un choix enregistré (assets/js/cookie-consent.js,
   showSavedToast). */
.bcc-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%, 12px);
    background: var(--eh-color-ink);
    color: var(--eh-color-surface);
    padding: 10px 18px;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-family: sans-serif;
    z-index: 999999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.bcc-toast-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
    .bcc-toast {
        transition: opacity 0.01ms;
    }
}

/* Focus clavier visible, cohérent avec les panneaux panier/accessibilité. */
.bcc-modal-close:focus-visible,
.bcc-btn:focus-visible,
.bcc-btn-link:focus-visible,
.bcc-modal input[type="checkbox"]:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}