/* Container wrap for pastille button */
.bio-cc-icon {
    position: fixed;
    bottom: 24px;
    left: 24px;
    height: 48px;
    width: 48px; /* Largeur fixe pour faire un rond parfait au départ */
    border-radius: 24px;
    background: var(--bio-cc-accent, var(--bio-green, #8CB93F));
    color: #ffffff;
    border: none; /* Plus de contour blanc */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    z-index: 99999;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 13px; /* Permet de centrer l'icône de 22px */
    gap: 8px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
    white-space: nowrap;
    font-family: inherit;
}

.bio-cc-icon[hidden] {
    display: none !important;
}

/* Lien discret « Gérer les cookies » en pied de page (remplace la pastille flottante permanente).
   RGPD : le retrait du consentement doit rester possible à tout moment.

   Masqué par défaut. Émis après le pied de page, sur le fond du document, il ajoutait
   une bande blanche de 64 px sous un pied de page sombre — le raccord était visible sur
   toutes les pages. Le script ne le révèle que si aucun autre point d'entrée n'existe
   (la plupart des pieds de page ont déjà un lien « Gestion des cookies », que le script
   branche automatiquement). */
.bio-cc-reopen-bar { display: none; text-align: center; padding: 18px 14px; }
.bio-cc-reopen-bar.is-needed { display: block; }
.bio-cc-reopen {
    display: inline-flex; align-items: center; gap: 7px;
    background: none; border: 0; cursor: pointer;
    font-family: inherit; font-size: 13px; font-weight: 600;
    color: var(--bio-cc-text, #3E302B);
    padding: 6px 12px; border-radius: 999px;
    transition: opacity .2s ease, background-color .2s ease;
}
.bio-cc-reopen:hover, .bio-cc-reopen:focus-visible { opacity: 1; background: rgba(0,0,0,.05); }
.bio-cc-reopen svg { width: 15px; height: 15px; }

.bio-cc-icon svg {
    flex-shrink: 0;
    transition: transform 0.4s ease;
}

.bio-cc-icon-label {
    font-size: 13px;
    font-weight: 700;
    opacity: 0;
    max-width: 0;
    overflow: hidden; /* Empêche le texte de forcer le bouton à s'élargir hors survol */
    transition: all 0.4s ease;
    display: inline-block;
}

/* Hover effects */
.bio-cc-icon:hover {
    width: auto; /* S'élargit pour révéler le texte */
    padding-right: 20px;
    transform: scale(1.05);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.bio-cc-icon-close {
    font-size: 18px;
    font-weight: normal;
    color: #ffffff;
    opacity: 0;
    margin-left: 5px;
    transition: opacity 0.3s ease;
    display: none;
    line-height: 1;
}

.bio-cc-icon:hover .bio-cc-icon-close {
    display: inline-block;
    opacity: 0.5;
}

.bio-cc-icon-close:hover {
    opacity: 1 !important;
}

.bio-cc-icon:hover svg {
    transform: rotate(15deg);
}

.bio-cc-icon:hover .bio-cc-icon-label {
    opacity: 1;
    max-width: 150px;
}

/* Banner Overlay */
.bio-cc {
    position: fixed;
    bottom: 24px;
    left: 24px;
    width: calc(100% - 48px);
    max-width: 440px; /* Plus compact (style La Fourche/Axeptio) */
    background: var(--bio-cc-bg, #ffffff);
    color: var(--bio-cc-text, #3E302B);
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(62, 48, 43, 0.15);
    z-index: 100000;
    overflow: hidden;
    font-family: inherit;
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.bio-cc.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.bio-cc-inner {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

.bio-cc-content {
    flex: 1;
    padding: 24px; /* Plus serré */
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bio-cc-illustration {
    width: 130px; /* Plus petit */
    background: var(--bio-cream, #FAF8F3);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-left: 1px solid rgba(0, 0, 0, 0.05);
}

.bio-cc-reject-link {
    position: absolute;
    top: 20px;
    right: 24px;
    background-color: transparent !important;
    background: none !important;
    border: none !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    cursor: pointer !important;
    color: rgba(62, 48, 43, 0.8) !important;
    transition: color 0.2s ease !important;
    font-family: inherit !important;
    padding: 0 !important;
    z-index: 10 !important;
    box-shadow: none !important;
}

.bio-cc-reject-link:hover {
    color: var(--bio-cc-text, #3E302B) !important;
}

.bio-cc-title {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--bio-cc-text, #3E302B);
    line-height: 1.2;
    padding-right: 120px; /* Évite de chevaucher le lien "Continuer sans accepter" */
}

.bio-cc-title svg {
    color: var(--bio-cc-accent, var(--bio-green, #8CB93F));
}

.bio-cc-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(62, 48, 43, 0.8);
}

.bio-cc-link {
    color: var(--bio-cc-accent, var(--bio-green, #8CB93F));
    text-decoration: underline;
    font-weight: 700;
}

/* Prefs panel (collapsible categories) */
.bio-cc-prefs {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--bio-cream, #FAF8F3);
    padding: 20px;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.bio-cc-prefs[hidden] {
    display: none !important; /* Force le masquage par défaut malgré le display: flex */
}

.bio-cc-cat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(62, 48, 43, 0.08);
}

.bio-cc-cat:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.bio-cc-cat-head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.bio-cc-cat-head input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--bio-cc-accent, var(--bio-green, #8CB93F));
    cursor: pointer;
}

.bio-cc-cat-desc {
    font-size: 12px;
    color: rgba(62, 48, 43, 0.6);
    padding-left: 28px;
}

/* Actions buttons */
.bio-cc-actions {
    display: flex;
    flex-direction: row; /* Alignement horizontal */
    gap: 10px;
    margin-top: 8px;
}

.bio-cc-btn {
    flex: 1 1 0%;
    min-width: 0; /* Permet un rétrécissement propre */
    padding: 10px 14px;
    border-radius: 12px;
    border: none;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
    white-space: nowrap;
}

.bio-cc-btn--ghost {
    background: var(--bio-cream, #FAF8F3);
    color: var(--bio-cc-text, #3E302B);
    border: 1px solid rgba(62, 48, 43, 0.15);
}

.bio-cc-btn--ghost:hover {
    background: #FAF8F3;
    border-color: var(--bio-cc-text, #3E302B);
}

.bio-cc-btn--accept {
    background: var(--bio-cc-accent, var(--bio-green, #8CB93F));
    color: #ffffff;
}

.bio-cc-btn--accept:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(140, 185, 63, 0.25);
}

.bio-cc-btn--save {
    background: var(--bio-cc-accent, var(--bio-green, #8CB93F));
    color: #ffffff;
}

.bio-cc-btn--save:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(140, 185, 63, 0.25);
}

/* Reopen footer link (fallback/mandatory) */
.bio-cc-reopen-wrap {
    display: block;
    text-align: center;
    margin: 20px 0;
}

.bio-cc-reopen {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    color: var(--bio-cc-text, #3E302B);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    transition: opacity 0.2s ease;
    font-family: inherit;
}

.bio-cc-reopen:hover {
    opacity: 1;
}

.bio-cc-reopen svg {
    color: var(--bio-cc-accent, var(--bio-green, #8CB93F));
}

/* Responsive */
@media (max-width: 640px) {
    .bio-cc {
        bottom: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        border-radius: 24px 24px 0 0;
    }
    
    .bio-cc-illustration {
        display: none; /* Hide illustration on mobile to save vertical space */
    }
    
    .bio-cc-content {
        padding: 24px;
    }
    
    .bio-cc-title {
        font-size: 18px;
    }
    
    .bio-cc-icon {
        bottom: 16px;
        left: 16px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   REPRISE DE LA FENÊTRE DE CONSENTEMENT (2026-08-04)

   Trois défauts constatés en production :

   1. LE TITRE SE CASSAIT SUR QUATRE LIGNES. Le lien de refus était accroché en haut
      à droite, ce qui obligeait à réserver 120 px à droite du titre. Sur 440 px de
      large, illustration comprise, il ne restait que 142 px de texte utile. Le lien
      passe sous les boutons, le titre récupère toute la largeur.

   2. LES DEUX BOUTONS ÉTAIENT IDENTIQUES, tous les deux bruns : impossible de voir
      quelle action est la principale. Une règle de bouton globale du site écrasait le
      vert prévu ici. On repasse devant avec la même arme, et on assume la hiérarchie :
      accepter en plein, personnaliser en contour.

   3. L'ILLUSTRATION mangeait un tiers de la largeur pour un décor. Elle rétrécit et
      disparaît quand la place manque, le texte passe avant.
   ═══════════════════════════════════════════════════════════════════════════ */

.bio-cc { max-width: 470px; }

.bio-cc-content { padding: 26px 26px 22px; gap: 14px; }

/* Le titre reprend toute la largeur disponible. */
.bio-cc-title {
    padding-right: 0;
    font-size: 21px;
    line-height: 1.25;
    align-items: flex-start;
    gap: 9px;
}
.bio-cc-title svg { flex: 0 0 auto; margin-top: 2px; }
.bio-cc-title span { flex: 1 1 auto; }

.bio-cc-text { font-size: 13.5px; }

/* Illustration : décorative, elle cède la place au contenu. */
.bio-cc-illustration { width: 118px; padding: 12px; }

/* ── Boutons : une action principale, une secondaire ─────────────────────── */
.bio-cc-actions { gap: 10px; margin-top: 4px; }

.bio-cc-btn { padding: 12px 16px; font-size: 13.5px; border-radius: 12px; }

/* Secondaire : contour discret. */
.bio-cc-btn--ghost {
    background: #fff !important;
    color: var(--bio-cc-text, #3E302B) !important;
    border: 1.5px solid rgba(62, 48, 43, 0.20) !important;
    box-shadow: none !important;
}
.bio-cc-btn--ghost:hover {
    background: var(--bio-cream, #FAF8F3) !important;
    border-color: rgba(62, 48, 43, 0.38) !important;
}

/* Principale : le vert assombri de la charte (sur le vert brut, le libellé blanc tombe
   à 2:1, et un bouton de consentement doit rester lisible pour tout le monde). Le
   !important est nécessaire : une règle de bouton globale repeindrait sinon en brun. */
.bio-cc-btn--accept,
.bio-cc-btn--save {
    background: var(--bio-cc-accent, var(--bio-green-dark, #687a00)) !important;
    color: #fff !important;
    border: 1.5px solid transparent !important;
    flex: 1.35 1 0% !important;
}
.bio-cc-btn--accept:hover,
.bio-cc-btn--save:hover {
    background: var(--bio-green-dark, #6BA032) !important;
    color: #fff !important;
}

/* ── Refus : sous les boutons, lisible mais volontairement discret ───────── */
.bio-cc-reject-link {
    position: static !important;
    display: block !important;
    width: 100% !important;
    margin: 2px 0 0 !important;
    text-align: center !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    color: rgba(62, 48, 43, 0.8) !important;
    padding: 6px 0 !important;
}
.bio-cc-reject-link:hover { color: var(--bio-cc-text, #3E302B) !important; }

@media (max-width: 640px) {
    .bio-cc { max-width: 100%; }
    .bio-cc-title { font-size: 19px; }
    /* Sur téléphone, le décor passe après le message. */
    .bio-cc-illustration { display: none !important; }
    .bio-cc-actions { flex-direction: column; }
    .bio-cc-btn { width: 100%; }
}

/* Fenêtre de consentement sans décor : la colonne d'illustration disparaît, le texte
   occupe toute la largeur. Règle conservée en CSS pour neutraliser aussi les rendus
   mis en cache qui contiendraient encore l'ancien balisage. */
.bio-cc-illustration { display: none !important; }
.bio-cc-title svg { display: none !important; }
.bio-cc-inner { display: block !important; }
.bio-cc-content { padding: 26px !important; }

/* Fenêtre de consentement plus compacte : sans illustration, elle n'a plus besoin
   d'autant de place. On resserre la largeur, les marges et la typographie. */
.bio-cc { max-width: 396px !important; }
.bio-cc-content { padding: 20px !important; gap: 10px !important; }
.bio-cc-title { font-size: 17.5px !important; line-height: 1.3 !important; }
.bio-cc-text { font-size: 12.5px !important; line-height: 1.45 !important; }
.bio-cc-actions { gap: 8px !important; margin-top: 2px !important; }
.bio-cc-btn { padding: 10px 14px !important; font-size: 13px !important; border-radius: 11px !important; }
.bio-cc-reject-link { font-size: 12px !important; padding: 4px 0 0 !important; }
.bio-cc-prefs { padding: 14px !important; border-radius: 13px !important; gap: 9px !important; }

/* ── Bandeau de consentement : hauteur maitrisee sur telephone ──────────────────
   Mesure du 14/08/2026 sur une fiche produit en 375x812 : le bandeau faisait
   254 px, soit 31 % de l'ecran, et recouvrait A LA FOIS la barre « Ajouter au
   panier » (638→745) et la barre de navigation basse (757→812). Un premier
   visiteur ne voyait donc pas le bouton d'achat de la fiche qu'il consultait.

   On ne peut PAS supprimer ce recouvrement : pour laisser la barre d'achat
   visible, le bandeau devrait tenir en 67 px, ce qu'aucun bandeau de
   consentement lisible ne permet. On le REDUIT donc la ou c'est possible sans
   rien retirer au message ni aux choix offerts : les deux boutons passent cote
   a cote (ils pesaient 84 px a eux seuls, empiles) et les marges internes sont
   resserrees. Le texte, le lien « Continuer sans accepter » et les trois
   options restent strictement identiques.

   flex-wrap: wrap — si un troisieme bouton apparait (panneau de reglages), la
   rangee se replie d'elle-meme au lieu d'ecraser les libelles.
   Bloc place en FIN de feuille : les regles compactes plus haut portent toutes
   !important, seul l'ordre source permet de les completer proprement. */
@media (max-width: 640px) {
    .bio-cc-content { padding: 16px !important; gap: 8px !important; }
    .bio-cc-actions {
        -webkit-box-orient: horizontal;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row !important;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .bio-cc-btn {
        width: auto !important;
        -webkit-flex: 1 1 140px;
        -ms-flex: 1 1 140px;
        flex: 1 1 140px !important;
        min-width: 0 !important;
    }
}