/* --------- Thème minimal & pro (scope : #klaro) --------- */
#klaro .cm-powered-by,
.cm-klaro .cm-powered-by {
    display: none !important;
}

#klaro {
    --sc-bg: #ffffff;
    --sc-fg: #0f172a;              /* gris-bleu très sombre */
    --sc-muted: #6b7280;           /* texte secondaire */
    --sc-line: #e5e7eb;            /* lignes/traits */
    --sc-accent: #0ea5e9;          /* bleu pro (primary) */
    --sc-accent-hover: #0284c7;
    --sc-danger: #ef4444;          /* option refus */
    --sc-radius: 14px;
    --sc-shadow: 0 8px 28px rgba(2, 6, 23, 0.18);
    --sc-font: ui-sans-serif, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

/* Container overlay + modal */
#klaro .cm-modal {
    font-family: Arial, sans-serif, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    color: var(--sc-fg);
    background: var(--sc-bg);
    border-radius: var(--sc-radius);
    box-shadow: var(--sc-shadow);
    border: 1px solid var(--sc-line);
    max-width: 720px;
    width: calc(100% - 24px);
    margin: 12px;
}

/* Overlay léger et non distrayant */
#klaro .cm-modal.cm-bg {
    background: rgba(15, 23, 42, 0.42);
}

/* En-tête : titre fort, pas de bordures lourdes */
#klaro .cm-header {
    padding: 22px 24px 12px;
    border: none;
}
#klaro .cm-title,
#klaro .cm-title h1,
#klaro .cm-title h2 {
    margin: 0;
    font-weight: 700;
    font-size: 1.125rem; /* 18px */
    line-height: 1.35;
}
#klaro .cm-intro,
#klaro .cm-description {
    margin-top: 8px;
    color: var(--sc-muted);
    font-size: 0.9375rem; /* 15px */
}

/* Corps : listes plus aérées, séparateurs fins */
#klaro .cm-body {
    padding: 6px 24px 8px;
}
#klaro .cm-list,
#klaro .cm-purposes,
#klaro .cm-services {
    margin: 6px 0 0;
    padding: 0;
    border: none;
}
#klaro .cm-purpose,
#klaro .cm-service {
    border-top: 1px solid var(--sc-line);
    padding: 14px 0;
}
#klaro .cm-purpose:first-child,
#klaro .cm-service:first-child {
    border-top: none;
}
#klaro .cm-item-title {
    font-weight: 600;
    margin: 0 0 2px;
}
#klaro .cm-item-desc {
    color: var(--sc-muted);
    margin: 0;
    font-size: 0.9375rem;
}

/* Switch/checkbox : compacts et nets */
#klaro .cm-switch,
#klaro .cm-toggle {
    accent-color: var(--sc-accent);
    width: 6.6666%;
}
#klaro .cm-toggle-btn,
#klaro .cm-switch-btn {
    border-radius: 999px !important;
}

/* Pied : rangée de boutons épurée */
#klaro .cm-footer {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 16px 24px 22px;
    border-top: 1px solid var(--sc-line);
}

/* Boutons — tailles, poids, états */
#klaro .cm-btn {
    font-weight: 600;
    border-radius: 10px;
    padding: 10px 14px;
    line-height: 1.1;
    border: 1px solid var(--sc-line);
    background: #fff;
    color: var(--sc-fg);
    transition: transform .02s ease, box-shadow .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
}
#klaro .cm-btn:hover { transform: translateY(-1px); }
#klaro .cm-btn:active { transform: translateY(0); }

/* Primaire : "Tout accepter" (ou ton bouton principal) */
#klaro .cm-btn-accept,
#klaro .cm-btn-save.cm-primary {
    background: var(--sc-accent);
    border-color: var(--sc-accent);
    color: #fff;
    box-shadow: 0 6px 14px rgba(14, 165, 233, 0.28);
}
#klaro .cm-btn-accept:hover,
#klaro .cm-btn-save.cm-primary:hover { background: var(--sc-accent-hover); border-color: var(--sc-accent-hover); }

/* Secondaire : "Enregistrer" */
#klaro .cm-btn-save {
    background: #fff;
    color: var(--sc-fg);
}

/* Tertiaire/danger : "Tout refuser" si présent */
#klaro .cm-btn-deny {
    background: #fff;
    color: var(--sc-danger);
    border-color: #fecaca; /* rouge clair discret */
}

/* Liens (ex: Politique de confidentialité) */
#klaro a {
    color: var(--sc-accent);
    text-decoration: none;
}
#klaro a:hover { text-decoration: underline; }

/* Coins & responsive */
@media (max-width: 480px) {
    #klaro .cm-modal { border-radius: 10px; }
    #klaro .cm-footer { flex-wrap: wrap; }
    #klaro .cm-btn { flex: 1 1 auto; text-align: center; }
}

/* Réduction de mouvement pour accessibilité */
@media (prefers-reduced-motion: reduce) {
    #klaro .cm-btn { transition: none; }
}

/* Optionnel : “barre” en bas au lieu de modale centrée (si tu utilises ce mode) */
#klaro .cm-bar {
    font-family: var(--sc-font);
    border-top: 1px solid var(--sc-line);
    box-shadow: 0 -6px 18px rgba(2,6,23,.08);
}


/* ================== KLARO x BOOTSTRAP FIX (ciblé sur .cm-klaro) ================== */
/* Base / reset anti-pollution */
.cm-klaro, .cm-klaro * { text-shadow: none !important; opacity: 1 !important; }
.cm-klaro {
    --sc-fg: #0f172a;        /* texte principal */
    --sc-muted: #64748b;     /* texte secondaire */
    --sc-line: #e5e7eb;      /* séparateurs */
    --sc-accent: #0ea5e9;    /* bouton primaire / liens */
    font-family: system-ui ui-sans-serif,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji" !important;
    color: var(--sc-fg) !important;
    background: #fff !important;
    border: 1px solid var(--sc-line) !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 28px rgba(2,6,23,.18) !important;
}

/* Header */
.cm-klaro .cm-header { padding: 22px 24px 12px !important; border: 0 !important; }
.cm-klaro .cm-header h1.title {
    margin: 0 0 6px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--sc-fg) !important;
}
.cm-klaro .cm-header p {
    margin: 0 !important;
    font-size: 15px !important;
    color: var(--sc-muted) !important;
}
.cm-klaro .cm-header button.hide {
    color: var(--sc-muted) !important;
    background: transparent !important;
    border: 0 !important;
}
.cm-klaro .cm-header svg line { stroke: currentColor !important; }

/* Corps */
.cm-klaro .cm-body { padding: 14px 24px 8px !important; }
.cm-klaro .cm-purposes { margin: 0 !important; padding: 0 !important; border: 0 !important; list-style: none !important; }

.cm-klaro .cm-purpose,
.cm-klaro .cm-service {
    border-top: 1px solid var(--sc-line) !important;
    padding: 14px 0 !important;
}
.cm-klaro .cm-purpose:first-child { border-top: 0 !important; }

/* Titre & textes */
.cm-klaro .cm-list-title {
    color: var(--sc-fg) !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
}
.cm-klaro .cm-list-description,
.cm-klaro #purpose-item-analytics-description,
.cm-klaro #purpose-item-video-description,
.cm-klaro #purpose-item-disableAll-description,
.cm-klaro #service-item-ga4-description,
.cm-klaro #service-item-youtube-description,
.cm-klaro .purposes,
.cm-klaro .cm-purpose p,
.cm-klaro .cm-service p {
    color: var(--sc-muted) !important;
    font-size: 15px !important;
    margin: 6px 0 0 !important;
}

/* Services (la liste à l’intérieur d’un purpose) */
.cm-klaro .cm-services {
    margin-top: 8px !important;
    padding-left: 16px !important;
    border-left: 2px solid var(--sc-line) !important;
    border-top: 0 !important;
}
.cm-klaro .cm-services .cm-service { border: 0 !important; padding: 10px 0 !important; }

/* Caret "↓ 1 service" */
.cm-klaro .cm-caret a {
    color: var(--sc-accent) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}
.cm-klaro .cm-caret a:hover { text-decoration: underline !important; }

/* Switches à droite */
.cm-klaro .cm-list-label { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 12px !important; }
.cm-klaro .cm-switch { margin-left: 12px !important; }
.cm-klaro .cm-switch .slider { width: 38px !important; height: 20px !important; border-radius: 999px !important; }

/* Ligne "Activer/désactiver tous les services" */
.cm-klaro .cm-toggle-all .cm-list-title { font-weight: 600 !important; }
.cm-klaro .cm-toggle-all { color: var(--sc-fg) !important; }

/* Footer & boutons */
.cm-klaro .cm-footer {
    padding: 18px 24px 22px !important;
    border-top: 1px solid var(--sc-line) !important;
    display: flex !important; align-items: center !important; justify-content: space-between !important;
}
.cm-klaro .cm-footer-buttons { display: flex !important; gap: 10px !important; }
.cm-klaro .cm-btn {
    background: #fff !important;
    color: var(--sc-fg) !important;
    border: 1px solid var(--sc-line) !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    padding: 10px 14px !important;
}
.cm-klaro .cm-btn-accept {
    background: var(--sc-accent) !important;
    border-color: var(--sc-accent) !important;
    color: #fff !important;
    box-shadow: 0 6px 14px rgba(14,165,233,.28) !important;
}
.cm-klaro .cm-powered-by,
.cm-klaro .cm-powered-by a { color: var(--sc-muted) !important; }
.cm-klaro .cm-powered-by a:hover { color: var(--sc-accent) !important; }

/* Liens internes Klaro */
.cm-klaro a { color: var(--sc-accent) !important; }
.cm-klaro a:hover { text-decoration: underline !important; }

/* === Fix fort: label + switch stables, texte lisible === */

/* 1) Chaque item (purpose/service) : structure propre */
.cm-klaro .cm-purpose,
.cm-klaro .cm-service {
    position: relative !important;
    padding: 14px 0 !important;
    border-top: 1px solid var(--sc-line) !important;
}
.cm-klaro .cm-purpose:first-child { border-top: 0 !important; }

/* 2) Le label occupe toute la ligne; on réserve la place du switch à droite */
.cm-klaro .cm-list-label {
    position: relative !important;
    display: block !important;
    padding-right: 56px !important;          /* espace pour le switch */
    min-height: 28px !important;
    cursor: pointer !important;
}

/* 3) Titre/texte lisibles et non écrasés */
.cm-klaro .cm-list-title {
    display: block !important;
    color: var(--sc-fg) !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    line-height: 1.25 !important;
    margin: 0 !important;
}
.cm-klaro .cm-list-description,
.cm-klaro .cm-purpose p,
.cm-klaro .cm-service p,
.cm-klaro .purposes {
    color: var(--sc-muted) !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
    margin: 6px 0 0 !important;
}

/* 4) Le switch: ABSOLU à droite, centré verticalement */
.cm-klaro .cm-switch {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
}
.cm-klaro .cm-switch .slider {
    width: 40px !important;
    height: 22px !important;
    border-radius: 999px !important;
}

/* 5) Liste de services sous un purpose: propre et lisible */
.cm-klaro .cm-services {
    margin-top: 8px !important;
    padding-left: 0 !important;
    border-left: 0 !important;                  /* on retire la barre verticale */
}
.cm-klaro .cm-services .cm-content {
    list-style: none !important;
    margin: 6px 0 0 !important;
    padding: 0 0 0 12px !important;             /* léger retrait seulement */
    border-left: 2px solid var(--sc-line) !important;
}
.cm-klaro .cm-services .cm-service { border: 0 !important; }

/* 6) Lien “↓ 1 service” aligné et discret */
.cm-klaro .cm-caret { margin-top: 4px !important; }
.cm-klaro .cm-caret a {
    display: inline-block !important;
    color: var(--sc-accent) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
}
.cm-klaro .cm-caret a:hover { text-decoration: underline !important; }

/* 7) Section “Activer/désactiver tous les services” */
.cm-klaro .cm-toggle-all .cm-list-title { font-weight: 700 !important; }

/* 8) Petits resets anti-Bootstrap restants */
.cm-klaro .cm-purposes,
.cm-klaro .cm-content { list-style: none !important; }
.cm-klaro .cm-header h1.title { margin: 0 0 6px !important; }
.cm-klaro .cm-header p { margin: 0 !important; }

/* 1) Cacher l'input natif (Bootstrap le stylise sinon) */
.cm-klaro .cm-list-input {
    position: absolute !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* 2) Label = grille : 1 colonne texte, 1 colonne switch (pas de superposition) */
.cm-klaro .cm-list-label {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    column-gap: 12px !important;
    padding-right: 0 !important;   /* plus besoin de réserver de la place */
    min-height: 28px !important;
}

/* 3) Titre lisible, sans écrasement */
.cm-klaro .cm-list-title {
    margin: 0 !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: #0f172a !important;
    overflow-wrap: anywhere !important; /* évite qu'un long nom casse la mise en page */
}

/* 4) Switch calé à droite, sans float Bootstrap */
.cm-klaro .cm-switch {
    justify-self: end !important;
    float: none !important;
    margin: 0 !important;
}
.cm-klaro .cm-switch .slider {
    width: 40px !important;
    height: 22px !important;
    border-radius: 999px !important;
}

/* 5) Les rangées purpose/service restent propres */
.cm-klaro .cm-purpose,
.cm-klaro .cm-service {
    border-top: 1px solid #e5e7eb !important;
    padding: 14px 0 !important;
    position: relative !important;
}
.cm-klaro .cm-purpose:first-child { border-top: none !important; }

/* 6) La liste des services sous un purpose */
.cm-klaro .cm-services { margin-top: 8px !important; }
.cm-klaro .cm-services .cm-content {
    list-style: none !important;
    margin: 6px 0 0 !important;
    padding-left: 12px !important;       /* léger retrait */
    border-left: 2px solid #e5e7eb !important;
}
.cm-klaro .cm-services .cm-service { border: 0 !important; padding: 10px 0 !important; }

/* 7) Boutons/lien Bootstrap: pas d'override gênant */
.cm-klaro .cm-btn { border-radius: 10px !important; font-weight: 600 !important; }
.cm-klaro .cm-powered-by { display:none !important; } /* si tu veux cacher le lien */
.klaro .cookie-notice p {padding: 25px 15px !important; }

/* 0) Conteneur plein écran + centrage robuste (évite les débordements) */
#klaro .cookie-modal {
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    z-index: 2147483647 !important;
    padding: 12px !important;           /* pour respirer sur petits écrans */
}

/* 1) Box sizing + largeur/hauteur sûres pour la modale */
.cm-klaro,
.cm-klaro * {
    box-sizing: border-box !important;  /* évite que les bordures fassent dépasser */
}

.cm-klaro {
    max-width: 720px !important;
    width: 100% !important;             /* pas de calc() + marge = pas de dépassement */
    margin: 0 !important;
    max-height: calc(100vh - 24px) !important; /* jamais plus haute que l’écran */
    overflow: auto !important;          /* scroll interne si contenu long */
}

/* 2) Évite tout décalage horizontal des listes internes */
.cm-klaro .cm-body {
    padding: 16px 20px 12px !important;   /* un poil moins large */
}
.cm-klaro .cm-purposes,
.cm-klaro .cm-content {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;                /* supprime les retraits qui poussent le contenu */
}

/* 3) Label en grille: colonne texte + colonne switch (zéro chevauchement) */
.cm-klaro .cm-list-input {
    position: absolute !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.cm-klaro .cm-list-label {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    column-gap: 12px !important;
    min-height: 28px !important;
}
.cm-klaro .cm-switch {
    justify-self: end !important;
    float: none !important;
    margin: 0 !important;
}
.cm-klaro .cm-switch .slider {
    width: 40px !important;
    height: 22px !important;
    border-radius: 999px !important;
}

/* 4) Éléments susceptibles de “pousser” la largeur → on force le wrap */
.cm-klaro .cm-list-title,
.cm-klaro .cm-list-description,
.cm-klaro .cm-caret a,
.cm-klaro .cm-footer,
.cm-klaro .cm-header {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

/* 5) Les services en dessous : léger retrait sans dépasser */
.cm-klaro .cm-services { margin-top: 8px !important; }
.cm-klaro .cm-services .cm-content {
    padding-left: 12px !important;
    border-left: 2px solid #e5e7eb !important;
    margin-top: 6px !important;
}

/* 6) Boutons: pas de dépassement sur mobile (wrapping) */
.cm-klaro .cm-footer {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: space-between !important;
}
.cm-klaro .cm-footer-buttons {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
}
.cm-klaro .cm-btn {
    flex: 1 1 auto !important;
    min-width: 140px !important;
}

/* 7) Safety: pas d’ombres/transform globales qui dépassent */
#klaro .cm-bg { background: rgba(15,23,42,.42) !important; }
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok {padding: 0 12px}