/**
 * Klaro CMP — Styles personnalisés pour ms-associes.com
 * Version 1.0.5 — Palette corrigée 24/03/2026
 *
 * Palette réelle du site :
 *   Accent principal  → #69055D  (violet / prune foncé)
 *   Accent hover      → #850773  (prune plus vif)
 *   Fond notice       → #1a0d19  (prune très sombre)
 *   Fond modal header → #200a1e
 *   Fond modal body   → #f7f5f7  (blanc cassé légèrement teinté)
 *   Texte clair       → #f0e8ef
 *   Texte atténué     → #b89fb7
 *   Séparateur        → #3d1a3b
 *   Police            → neue-haas-grotesk-display, sans-serif
 */

/* ── Variables ───────────────────────────────────────────────────── */
:root {
    --ms-accent:       #69055D;
    --ms-accent-hover: #850773;
    --ms-accent-light: rgba(105, 5, 93, 0.12);
    --ms-dark:         #1a0d19;   /* fond notice                   */
    --ms-dark-header:  #200a1e;   /* fond header modale            */
    --ms-dark-mid:     #2e1029;   /* surfaces secondaires          */
    --ms-off-white:    #f7f5f7;   /* fond corps modale             */
    --ms-footer-bg:    #ede8ed;   /* fond footer modale            */
    --ms-white:        #ffffff;
    --ms-text-light:   #f0e8ef;   /* texte sur fond sombre         */
    --ms-text-muted:   #b89fb7;   /* texte secondaire              */
    --ms-border:       #3d1a3b;   /* séparateurs                   */
    --ms-border-light: #ddd0dc;   /* séparateurs sur fond clair    */
    --ms-radius:       6px;
}

/* ═══════════════════════════════════════════════════════════════════
   BANNIÈRE (notice)
   ═══════════════════════════════════════════════════════════════════ */
.klaro .cookie-notice {
    background:    var(--ms-dark) !important;
    color:         var(--ms-text-light) !important;
    border-top:    2px solid var(--ms-accent) !important;
    box-shadow:    0 -6px 32px rgba(105, 5, 93, 0.25) !important;
    border-radius: 0 !important;
    padding:       20px 32px !important;
    font-family:   'neue-haas-grotesk-display', 'Inter', sans-serif !important;
}

/* Texte de la notice */
.klaro .cookie-notice .cn-body,
.klaro .cookie-notice .cn-body p {
    color:       var(--ms-text-light) !important;
    font-size:   13.5px !important;
    line-height: 1.65 !important;
    margin:      0 !important;
}

/* Titre */
.klaro .cookie-notice .cn-body p.cn-title {
    color:          var(--ms-white) !important;
    font-size:      14px !important;
    font-weight:    600 !important;
    letter-spacing: 0.01em !important;
    margin-bottom:  6px !important;
}

/* Liens */
.klaro .cookie-notice .cn-body a,
.klaro .cookie-notice .cn-body a:visited {
    color:                 var(--ms-accent-hover) !important;
    text-decoration:       underline !important;
    text-decoration-color: transparent !important;
    transition:            text-decoration-color 0.2s !important;
}
.klaro .cookie-notice .cn-body a:hover {
    text-decoration-color: var(--ms-accent-hover) !important;
}

/* Zone boutons */
.klaro .cookie-notice .cn-buttons {
    display:     flex !important;
    gap:         10px !important;
    align-items: center !important;
    flex-wrap:   wrap !important;
    margin-top:  16px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   BOUTONS — base commune
   ═══════════════════════════════════════════════════════════════════ */
.klaro .cm-btn {
    font-family:    'neue-haas-grotesk-display', 'Inter', sans-serif !important;
    font-size:      12px !important;
    font-weight:    500 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    border-radius:  var(--ms-radius) !important;
    padding:        9px 20px !important;
    cursor:         pointer !important;
    transition:     background 0.2s, opacity 0.2s, border-color 0.2s, color 0.2s !important;
    white-space:    nowrap !important;
}

/* ── Tout accepter / OK ──────────────────────────────────────────── */
.klaro .cm-btn.cm-btn-success,
.klaro .cm-btn.cm-btn-accept-all {
    background: var(--ms-accent) !important;
    color:      var(--ms-white) !important;
    border:     none !important;
}
.klaro .cm-btn.cm-btn-success:hover,
.klaro .cm-btn.cm-btn-accept-all:hover {
    background: var(--ms-accent-hover) !important;
}

/* ── Tout refuser (classes réelles Klaro v0.7) ───────────────────── */
.klaro .cm-btn.cm-btn-decline,
.klaro .cm-btn.cm-btn-danger,
.klaro .cm-btn.cn-decline {
    background: transparent !important;
    color:      var(--ms-text-muted) !important;
    border:     1px solid var(--ms-border) !important;
}
.klaro .cm-btn.cm-btn-decline:hover,
.klaro .cm-btn.cm-btn-danger:hover,
.klaro .cm-btn.cn-decline:hover {
    border-color: var(--ms-accent) !important;
    color:        var(--ms-text-light) !important;
}

/* ── Personnaliser ───────────────────────────────────────────────── */
.klaro .cn-learn-more .cm-btn,
.klaro .cm-btn.cn-learn-more {
    background: transparent !important;
    color:      var(--ms-accent-hover) !important;
    border:     1px solid var(--ms-accent) !important;
    padding:    8px 18px !important;
}
.klaro .cn-learn-more .cm-btn:hover,
.klaro .cm-btn.cn-learn-more:hover {
    background: var(--ms-accent-light) !important;
}

/* ── Enregistrer mes choix (modale) ─────────────────────────────── */
.klaro .cm-btn.cm-btn-accept {
    background: var(--ms-dark-mid) !important;
    color:      var(--ms-text-light) !important;
    border:     1px solid var(--ms-border) !important;
}
.klaro .cm-btn.cm-btn-accept:hover {
    background: #3d1a3b !important;
    border-color: var(--ms-accent) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   MODAL DE PARAMÉTRAGE
   ═══════════════════════════════════════════════════════════════════ */
.klaro .cookie-modal {
    font-family: 'neue-haas-grotesk-display', 'Inter', sans-serif !important;
}

/* Overlay */
.klaro .cookie-modal .cm-overlay {
    background:      rgba(26, 13, 25, 0.85) !important;
    backdrop-filter: blur(3px) !important;
}

/* Conteneur */
.klaro .cookie-modal .cm-modal {
    background:    var(--ms-off-white) !important;
    border-radius: 10px !important;
    border:        none !important;
    box-shadow:    0 20px 60px rgba(105, 5, 93, 0.30) !important;
    max-width:     580px !important;
    overflow:      hidden !important;
}

/* Header */
.klaro .cookie-modal .cm-header {
    background: var(--ms-dark-header) !important;
    padding:    24px 28px 20px !important;
    border-bottom: 2px solid var(--ms-accent) !important;
}
.klaro .cookie-modal .cm-header h1,
.klaro .cookie-modal .cm-header .title {
    color:          var(--ms-white) !important;
    font-size:      16px !important;
    font-weight:    600 !important;
    letter-spacing: -0.01em !important;
}
.klaro .cookie-modal .cm-header p {
    color:      var(--ms-text-light) !important;
    font-size:  13px !important;
    margin-top: 6px !important;
    opacity:    0.80 !important;
}

/* Corps */
.klaro .cookie-modal .cm-body {
    padding:    20px 28px !important;
    background: var(--ms-off-white) !important;
}

/* Titres de catégories */
.klaro .cookie-modal .cm-purpose > .cm-header,
.klaro .cookie-modal .cm-list-title {
    color:          #3d0237 !important;
    font-size:      11px !important;
    font-weight:    700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    border-bottom:  1px solid var(--ms-border-light) !important;
    padding-bottom: 8px !important;
    margin-bottom:  12px !important;
}

/* Items de service */
.klaro .cookie-modal .cm-list-item {
    background:    var(--ms-white) !important;
    border:        1px solid var(--ms-border-light) !important;
    border-radius: var(--ms-radius) !important;
    padding:       12px 14px !important;
    margin-bottom: 8px !important;
}

/* Nom du service */
.klaro .cookie-modal .cm-list-item .cm-service-title,
.klaro .cookie-modal .cm-app-title {
    color:       #1a0d19 !important;
    font-weight: 600 !important;
    font-size:   13.5px !important;
}

/* Description */
.klaro .cookie-modal .cm-list-item p,
.klaro .cookie-modal .cm-app-description {
    color:       #5a4558 !important;
    font-size:   12.5px !important;
    line-height: 1.5 !important;
    margin-top:  4px !important;
}
.klaro .cookie-modal .cm-list-item p a,
.klaro .cookie-modal .cm-app-description a {
    color: var(--ms-accent) !important;
}

/* Toggles */
.klaro .cm-list-item .slider,
.klaro .cookie-modal .slider {
    background:    #cbbecb !important;
    border-radius: 20px !important;
    transition:    background 0.25s !important;
}
.klaro .cm-list-item input:checked ~ .cm-service-header .slider,
.klaro .cm-list-item input:checked + .cm-app-label .slider,
.klaro .cookie-modal .slider.active {
    background: var(--ms-accent) !important;
}
.klaro .cookie-modal .slider::before {
    background: var(--ms-white) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.20) !important;
}
/* Requis (non désactivable) */
.klaro .cm-list-item input:disabled ~ .cm-service-header .slider,
.klaro .cm-list-item input:disabled + .cm-app-label .slider {
    background: rgba(105, 5, 93, 0.30) !important;
    cursor:     not-allowed !important;
}

/* Footer modale */
.klaro .cookie-modal .cm-footer {
    background:  var(--ms-footer-bg) !important;
    border-top:  1px solid var(--ms-border-light) !important;
    padding:     16px 28px !important;
}
.klaro .cookie-modal .cm-footer-buttons {
    display:         flex !important;
    gap:             10px !important;
    justify-content: flex-end !important;
    flex-wrap:       wrap !important;
}
.klaro .cookie-modal .cm-footer a {
    color:     var(--ms-accent) !important;
    font-size: 12px !important;
}

/* Masquer "Géré par Klaro" */
.klaro .cm-powered-by,
.klaro .cookie-modal .cm-footer .cn-changes { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE MOBILE
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .klaro .cookie-notice {
        padding: 16px 20px !important;
    }
    .klaro .cookie-notice .cn-buttons {
        flex-direction: column !important;
        align-items:    stretch !important;
    }
    .klaro .cookie-notice .cn-buttons .cm-btn {
        text-align: center !important;
        width:      100% !important;
    }
    .klaro .cookie-modal .cm-modal {
        border-radius: 10px 10px 0 0 !important;
        max-height:    90vh !important;
        overflow-y:    auto !important;
    }
}