/* 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 minimog/minimog-child de
   pureden.fr. */
.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: #fff;
    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: inherit;
    border-radius: 12px;
}
.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, pas trois designs juxtaposés. */
.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; }

/* height: auto explicite : sans lui, le thème force height:45px sur tout
   <button>, plus grand que nécessaire à côté de "Annuler" à sa hauteur
   naturelle. */
.bcc-btn { height: auto; padding: 10px; border-radius: 5px; font-size: 0.8125rem; font-weight: bold; cursor: pointer; border: 1.5px solid rgba(var(--eh-color-ink-rgb), 0.55); background: #fff; color: var(--eh-color-ink); transition: all 0.2s; text-transform: uppercase; font-family: inherit; }
.bcc-btn-accepter { background: var(--eh-color-ink); color: #fff; border-color: var(--eh-color-ink); }

/* box-shadow explicitement neutralisé sur les deux boutons : le thème pose
   un anneau vert (box-shadow) sur TOUT <button:hover> du site. */
.bcc-btn-accepter:hover { background: #fff; color: var(--eh-color-ink); box-shadow: none; }
.bcc-btn-refuser:hover { background: rgba(var(--eh-color-ink-rgb), 0.06); border-color: rgba(var(--eh-color-ink-rgb), 0.55); box-shadow: none; color: var(--eh-color-ink); }

/* "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%;
    height: auto;
    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 {
    background: none;
    border-color: transparent;
    box-shadow: none;
    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: inherit;
}

/* .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: 50%;
    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);
    border-color: transparent;
    box-shadow: none;
    color: #333;
}

.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-accent);
    cursor: pointer;
}

/* Le thème dessine sa PROPRE case à cocher via ::before/::after (checkbox
   native rendue invisible ailleurs dans son CSS, remplacée par un carré
   positionné en absolute, qui passe au noir plein une fois coché) — un
   second carré se superposait ainsi à notre checkbox native forcée
   ci-dessus (confirmé en direct sur pureden.fr : un carré noir flottant à
   côté du vrai damier vert). content:none désactive ces pseudo-éléments
   uniquement pour nos checkboxes, sans toucher au reste du site. */
.bcc-modal input[type="checkbox"]::before,
.bcc-modal input[type="checkbox"]::after {
    content: none !important;
}

/* 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 plus haut reste
       actif et prend le dessus sur width: 100% (un max-width plus étroit
       gagne toujours sur width) — la carte restait calée à ~335px sur un
       écran de 375px, avec ~40px de vide à gauche. Même bug déjà corrigé
       sur Hub Jozz, jamais reporté sur Hub LSG dont ce fork hérite.

       Coins carrés sur mobile uniquement : la carte devient plate contre les
       3 bords de l'écran (gauche, droite, bas), des coins arrondis
       flotteraient bizarrement au milieu de ces bords. */
    .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; border-radius: 0; }

    .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: #fff;
    padding: 10px 18px;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-family: inherit;
    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;
}
