/* ========================================================
   VERROUILLAGE GÉOMÉTRIQUE ANTI-DÉBORDEMENT DE LA BOULE
   ======================================================== */

/* 1. On nettoie les éléments génériques de Klaro pour couper l'héritage du thème */
.klaro .cm-switch,
.klaro .cm-switch * {
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    line-height: 0 !important;
}

/* 2. Le rail (l'arrière-plan arrondi) */
.klaro .cm-switch .slider {
    position: relative !important;
    display: inline-block !important;
    width: 44px !important;
    height: 20px !important; /* Hauteur fixe */
    background-color: #cbd5e1 !important; /* Couleur quand désactivé */
    border-radius: 20px !important;
    transition: background-color 0.2s ease !important;
    cursor: pointer !important;
}

/* 3. La boule (Le handle interne de Klaro) */
.klaro .cm-switch .slider .handle,
.klaro .cm-switch .slider::before {
    position: absolute !important;
    content: "" !important;
    
    /* On lui donne la hauteur exacte du rail (20px) */
    height: 20px !important;
    width: 20px !important;
    top: 0 !important;
    left: 0 !important;
    
    background-color: #ffffff !important;
    /* On utilise un angle arrondi à 4px au lieu d'un rond parfait (50%) */
    /* De cette manière, elle épouse les bords intérieurs du rail sans déborder ! */
    border-radius: 10px !important; 
    
    transition: transform 0.2s ease !important;
    box-shadow: 1px 0 4px rgba(0,0,0,0.15) !important;
}

/* --- ÉTAT ACTIVÉ --- */

/* Couleur du rail en vert */
.klaro .cm-switch input:checked + .slider {
    background-color: #38a169 !important; /* Vert conforme */
}

/* Déplacement horizontal millimétré de la forme vers la droite */
/* Largeur rail (44px) - Largeur boule (20px) = 24px de décalage parfait */
.klaro .cm-switch input:checked + .slider .handle,
.klaro .cm-switch input:checked + .slider::before {
    transform: translateX(24px) !important;
}

/* --- SÉCURITÉ DE ZONE DE CLIC --- */
.klaro .cm-switch input {
    position: absolute !important;
    top: 0; left: 0;
    width: 44px !important;
    height: 20px !important;
    opacity: 0 !important;
    z-index: 10 !important;
    cursor: pointer !important;
}


/* ========================================================
   BOUTON FLOTTANT COOKIE EN BAS À GAUCHE
   ======================================================== */
.cookie-floating-btn {
    position: fixed !important;
    bottom: 20px !important;
    left: 20px !important;
    z-index: 99999 !important; /* Reste toujours au-dessus du site */
    
    /* Design du rond vert */
    width: 46px !important;
    height: 46px !important;
    background-color: #68e07b !important; /* Votre couleur verte */
    color: #ffffff !important; /* Icône blanche */
    border-radius: 50% !important;
    border: none !important;
    
    /* Alignement parfait de l'icône au centre */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    transition: transform 0.2s ease, background-color 0.2s ease !important;
}

/* Petit effet de zoom sympathique au survol de la souris */
.cookie-floating-btn:hover {
    transform: scale(1.1) !important;
    background-color: #55ca68 !important; /* Vert un peu plus foncé au survol */
}

.issuu-responsive-container {
    position: relative !important;
    width: 100% !important;
    padding-top: max(60%, 326px) !important;
    min-height: 500px !important;
    height: 0 !important; /* Indispensable pour bloquer l'étirement */
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* 2. On force l'iframe d'Issuu à occuper tout l'espace absolu du conteneur */
.issuu-responsive-container iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    z-index: 1 !important;
}

/* 3. On force l'écran d'attente gris de Klaro! à faire EXACTEMENT la même taille */
.issuu-responsive-container .context-notice {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    z-index: 2 !important; /* Passe par-dessus l'iframe masquée */
    
    /* Centrage parfait du texte explicatif et du bouton au milieu des 500px+ */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    padding: 20px !important;
}

/* CHATBOT */
#salesforce-chat-blocker-box {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    width: 320px !important;
    height: 180px !important;
    z-index: 99999 !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
    overflow: hidden !important;
}

.chat-blocker-content {
    padding: 20px !important;
    text-align: center !important;
    font-family: sans-serif !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

.chat-blocker-content p {
    font-size: 14px !important;
    color: #4a5568 !important;
    margin: 0 0 15px 0 !important;
    line-height: 1.4 !important;
}

.chat-blocker-content .chat-blocker-btn {
    background: #3182ce !important;
    color: #ffffff !important;
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    transition: background 0.2s !important;
    display: inline-block !important;
}

.chat-blocker-content .chat-blocker-btn:hover {
    background: #2b6cb0 !important;
}