/* ================================================
   KLARO — Surcharge marque Weibel Chouquettes
   Palette & typo issues de global.css
   ================================================ */

/* ---- Bannière (notice) ---- */
.klaro a {
    border-bottom: 0 !important;
}

.klaro .cookie-notice {
    background: #ffffff !important;
    border-top: 1px solid #e0e0e0 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    box-shadow: 0 -4px 24px rgba(27, 27, 27, 0.07) !important;
    padding: 1.25rem 2rem !important;
    max-width: 100% !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}

.klaro .cookie-notice .cn-body {
    font-family: 'ABC Arizona Text', Roboto, Arial, sans-serif !important;
    color: #1B1B1B !important;
    display: flex !important;
    align-items: center !important;
    gap: 2rem !important;
    flex-wrap: wrap !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

.klaro .cookie-notice .cn-body p.cn-changes {
    display: none !important;
}

.klaro .cookie-notice .cn-body p {
    font-family: 'ABC Arizona Text', Roboto, Arial, sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 300 !important;
    color: rgba(27, 27, 27, 0.72) !important;
    margin-bottom: 0 !important;
    flex: 1 !important;
    min-width: 220px !important;
    line-height: 1.55 !important;
}

.klaro .cookie-notice .cn-body p strong {
    font-family: 'ABC Arizona Serif', Roboto, Arial, sans-serif !important;
    font-weight: 400 !important;
    font-size: 1rem !important;
    color: #1B1B1B !important;
    display: block !important;
    margin-bottom: 0.25rem !important;
}

.klaro .cookie-notice a.cn-learn-more {
    color: #8986D5 !important;
    font-family: 'Figtree', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    border-bottom: 1px solid #8986D5 !important;
    text-decoration: none !important;
    padding-bottom: 0 !important;
    width: auto !important;
    margin: 0 !important;
}

/* ---- Boutons de la bannière ---- */
.klaro .cookie-notice .cn-buttons {
    display: flex !important;
    gap: 0.625rem !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    flex-wrap: wrap !important;
}

.klaro .cookie-notice .cn-ok,
.klaro .cookie-notice .cn-decline {
    border-radius: 999px !important;
    font-family: 'Figtree', sans-serif !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.04em !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: opacity 0.2s ease !important;
    line-height: 1 !important;
}

.klaro .cookie-notice .cn-ok {
    color: #ffffff !important;
    gap: .8rem !important;
}

.klaro .cookie-notice .cn-ok:hover {
    opacity: 0.88 !important;
}

.klaro .cookie-notice .cn-decline {
    background: transparent !important;
    color: rgba(27, 27, 27, 0.65) !important;
    border: 1px solid #e0e0e0 !important;
}

.klaro .cookie-notice .cn-decline:hover {
    background: #f9f9f9 !important;
    color: #1B1B1B !important;
    opacity: 1 !important;
}

/* ---- Overlay modal ---- */
.klaro .cookie-modal {
    background: rgba(42, 37, 65, 0.55) !important;
    backdrop-filter: blur(2px) !important;
}

/* ---- Fenêtre modale ---- */
.klaro .cookie-modal .cm-modal {
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: 0 12px 48px rgba(27, 27, 27, 0.18) !important;
    font-family: 'ABC Arizona Text', Roboto, Arial, sans-serif !important;
    max-width: 540px !important;
    overflow: hidden !important;
}

.klaro .cookie-modal .cm-header {
    background: #ffffff !important;
    border-bottom: 1px solid #e0e0e0 !important;
    padding: 1.5rem 1.75rem 1.25rem !important;
}

.klaro .cookie-modal .cm-header h1 {
    font-family: 'ABC Arizona Serif', Roboto, Arial, sans-serif !important;
    font-size: 1.35rem !important;
    font-weight: 400 !important;
    color: #1B1B1B !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.25 !important;
}

.klaro .cookie-modal .cm-header p {
    font-size: 0.875rem !important;
    color: rgba(27, 27, 27, 0.65) !important;
    font-weight: 300 !important;
    margin-bottom: 0 !important;
    line-height: 1.55 !important;
}

.klaro .cookie-modal .cm-header a {
    color: #8986D5 !important;
    font-family: 'Figtree', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    border-bottom: 1px solid #8986D5 !important;
    text-decoration: none !important;
    padding-bottom: 0 !important;
    width: auto !important;
    margin: 0 !important;
}

.klaro .cookie-modal .cm-body {
    padding: 1.25rem 1.75rem !important;
    background: #ffffff !important;
}

/* ---- Service item ---- */
.klaro .cookie-modal .cm-list-item {
    border-bottom: 1px solid #e0e0e0 !important;
    padding: 1rem 0 !important;
}

.klaro .cookie-modal .cm-list-item:last-child {
    border-bottom: none !important;
}

.klaro .cookie-modal .cm-list-title {
    font-family: 'Figtree', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    color: #1B1B1B !important;
}

.klaro .cookie-modal .cm-list-description {
    font-family: 'ABC Arizona Text', Roboto, Arial, sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 300 !important;
    color: rgba(27, 27, 27, 0.65) !important;
    line-height: 1.5 !important;
    margin-top: 0.25rem !important;
}

/* ---- Toggle switch ---- */
.klaro .cookie-modal .cm-list-label input:checked + .slider {
    background: #8986D5 !important;
}

.klaro .cookie-modal .cm-list-label input:disabled + .slider {
    background: #A19EDD !important;
    opacity: 0.6 !important;
}

/* ---- Pied de la modale ---- */
.klaro .cookie-modal .cm-footer {
    background: #F3F0FA !important;
    border-top: 1px solid #EBE8F7 !important;
    padding: 1.25rem 1.75rem !important;
}



/* ---- Boutons de la modale ---- */
.klaro .cookie-modal .cm-btn {
    border-radius: 999px !important;
    font-family: 'Figtree', sans-serif !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.04em !important;
    padding: 11px 22px !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: opacity 0.2s ease !important;
    line-height: 1 !important;
    border: none !important;
}

/* Tout accepter */
.klaro .cookie-modal .cm-btn.cm-btn-success {
    background: #8986D5 !important;
    color: #ffffff !important;
}

.klaro .cookie-modal .cm-btn.cm-btn-success:hover {
    opacity: 0.88 !important;
}

/* Accepter la sélection */
.klaro .cookie-modal .cm-btn.cm-btn-info {
    background: #221E34 !important;
    color: #ffffff !important;
}

.klaro .cookie-modal .cm-btn.cm-btn-info:hover {
    opacity: 0.88 !important;
}

/* Tout refuser */
.klaro .cookie-modal .cm-btn.cm-btn-danger,
.klaro .cookie-modal .cm-btn.cm-btn-decline {
    background: transparent !important;
    color: rgba(27, 27, 27, 0.65) !important;
    border: 1px solid #e0e0e0 !important;
}

.klaro .cookie-modal .cm-btn.cm-btn-danger:hover,
.klaro .cookie-modal .cm-btn.cm-btn-decline:hover {
    background: #f9f9f9 !important;
    color: #1B1B1B !important;
    opacity: 1 !important;
}

/* Fermer */
.klaro .cookie-modal .cm-header .hide {
    color: rgba(27, 27, 27, 0.5) !important;
}

.klaro .cookie-modal .cm-header .hide:hover {
    color: #1B1B1B !important;
}

/* Powered by */
.klaro .cookie-modal .cm-footer p {
    font-family: 'Figtree', sans-serif !important;
    font-size: 0.75rem !important;
    color: rgba(27, 27, 27, 0.4) !important;
    margin-bottom: 0 !important;
}

.klaro .cm-powered-by {
    display: none !important;
}

/* ================================================
   DARK MODE (prefers-color-scheme)
   ================================================ */
@media (prefers-color-scheme: dark) {
    .klaro .cookie-notice {
        background: #1B1B1B !important;
        border-top-color: #3d3845 !important;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.3) !important;
    }

    .klaro .cookie-notice .cn-body p {
        color: rgba(255, 255, 255, 0.65) !important;
    }

    .klaro .cookie-notice .cn-body p strong {
        color: #ffffff !important;
    }

    .klaro .cookie-notice .cn-decline {
        color: rgba(255, 255, 255, 0.6) !important;
        border-color: #3d3845 !important;
    }

    .klaro .cookie-notice .cn-decline:hover {
        background: #2a2730 !important;
        color: #ffffff !important;
    }

    .klaro .cookie-modal {
        background: rgba(27, 27, 27, 0.7) !important;
    }

    .klaro .cookie-modal .cm-modal {
        background: #1B1B1B !important;
        box-shadow: 0 12px 48px rgba(0, 0, 0, 0.45) !important;
    }

    .klaro .cookie-modal .cm-header {
        background: #1B1B1B !important;
        border-bottom-color: #3d3845 !important;
    }

    .klaro .cookie-modal .cm-header h1 {
        color: #ffffff !important;
    }

    .klaro .cookie-modal .cm-header p {
        color: rgba(255, 255, 255, 0.55) !important;
    }

    .klaro .cookie-modal .cm-body {
        background: #1B1B1B !important;
    }

    .klaro .cookie-modal .cm-list-item {
        border-bottom-color: #3d3845 !important;
    }

    .klaro .cookie-modal .cm-list-title {
        color: #ffffff !important;
    }

    .klaro .cookie-modal .cm-list-description {
        color: rgba(255, 255, 255, 0.55) !important;
    }

    .klaro .cookie-modal .cm-list-label .slider {
        background: #3d3845 !important;
    }

    .klaro .cookie-modal .cm-footer {
        background: #2a2730 !important;
        border-top-color: #3d3845 !important;
    }

    .klaro .cookie-modal .cm-footer p {
        color: rgba(255, 255, 255, 0.3) !important;
    }

    .klaro .cookie-modal .cm-btn.cm-btn-danger,
    .klaro .cookie-modal .cm-btn.cm-btn-decline {
        color: rgba(255, 255, 255, 0.6) !important;
        border-color: #3d3845 !important;
    }

    .klaro .cookie-modal .cm-btn.cm-btn-danger:hover,
    .klaro .cookie-modal .cm-btn.cm-btn-decline:hover {
        background: #2a2730 !important;
        color: #ffffff !important;
    }
}

/* ================================================
   DARK MODE (classe html.dark-mode du toggle)
   ================================================ */
html.dark-mode .klaro .cookie-notice {
    background: #1B1B1B !important;
    border-top-color: #3d3845 !important;
}

html.dark-mode .klaro .cookie-notice .cn-body p {
    color: rgba(255, 255, 255, 0.65) !important;
}

html.dark-mode .klaro .cookie-notice .cn-body p strong {
    color: #ffffff !important;
}

html.dark-mode .klaro .cookie-notice .cn-decline {
    color: rgba(255, 255, 255, 0.6) !important;
    border-color: #3d3845 !important;
}

html.dark-mode .klaro .cookie-notice .cn-decline:hover {
    background: #2a2730 !important;
    color: #ffffff !important;
}

html.dark-mode .klaro .cookie-modal .cm-modal {
    background: #1B1B1B !important;
}

html.dark-mode .klaro .cookie-modal .cm-header {
    background: #1B1B1B !important;
    border-bottom-color: #3d3845 !important;
}

html.dark-mode .klaro .cookie-modal .cm-header h1 {
    color: #ffffff !important;
}

html.dark-mode .klaro .cookie-modal .cm-body {
    background: #1B1B1B !important;
}

html.dark-mode .klaro .cookie-modal .cm-list-item {
    border-bottom-color: #3d3845 !important;
}

html.dark-mode .klaro .cookie-modal .cm-list-title {
    color: #ffffff !important;
}

html.dark-mode .klaro .cookie-modal .cm-list-description {
    color: rgba(255, 255, 255, 0.55) !important;
}

html.dark-mode .klaro .cookie-modal .cm-list-label .slider {
    background: #3d3845 !important;
}

html.dark-mode .klaro .cookie-modal .cm-footer {
    background: #2a2730 !important;
    border-top-color: #3d3845 !important;
}

html.dark-mode .klaro .cookie-modal .cm-btn.cm-btn-danger,
html.dark-mode .klaro .cookie-modal .cm-btn.cm-btn-decline {
    color: rgba(255, 255, 255, 0.6) !important;
    border-color: #3d3845 !important;
}

html.dark-mode .klaro .cookie-modal .cm-btn.cm-btn-danger:hover,
html.dark-mode .klaro .cookie-modal .cm-btn.cm-btn-decline:hover {
    background: #2a2730 !important;
    color: #ffffff !important;
}

/* ================================================
   MOBILE
   ================================================ */
@media (max-width: 640px) {
    .klaro .cookie-notice {
        padding: 1.25rem 1.25rem !important;
    }

    .klaro .cookie-notice .cn-body {
        flex-direction: column !important;
        gap: 1rem !important;
        align-items: flex-start !important;
    }

    .klaro .cookie-notice .cn-buttons {
        width: 100% !important;
        justify-content: stretch !important;
    }

    .klaro .cookie-notice .cn-ok,
    .klaro .cookie-notice .cn-decline {
        flex: 1 !important;
        text-align: center !important;
        justify-content: center !important;
    }

    .klaro .cookie-modal .cm-modal {
        border-radius: 12px 12px 0 0 !important;
        max-height: 90dvh !important;
    }

    .klaro .cookie-modal .cm-footer-buttons {
        flex-direction: column-reverse !important;
    }

    .klaro .cookie-modal .cm-btn {
        width: 100% !important;
        text-align: center !important;
    }
}