/* =========================================================================
 * Galvaneo — Klaro! override (S-11)
 *
 * Surcharge des classes `.klaro .cookie-notice`, `.cookie-modal`,
 * `.cm-btn-*` pour appliquer les tokens charte (light theme, violet
 * brand, font Inter, ombre Galvaneo). Chargé APRÈS klaro.css.
 *
 * Les variables `--gv-*` proviennent de globals.css (tokens S-04).
 * On importe uniquement les couleurs/ombres dont on a besoin ici.
 * ========================================================================= */

.klaro,
.klaro *,
.klaro *:before,
.klaro *:after {
  font-family: var(--font-inter, "Inter", system-ui, sans-serif);
}

.klaro .cookie-notice,
.klaro .cookie-modal .cm-modal {
  background: var(--color-gv-bg, #ffffff);
  color: var(--color-gv-text, #0b0f1a);
  border: 1px solid var(--color-gv-border, #e5e8ee);
  box-shadow: var(--shadow-gv-lg, 0 20px 40px -10px rgba(11, 15, 26, 0.2));
  border-radius: 16px;
}

.klaro .cookie-notice .cn-body,
.klaro .cookie-modal .cm-modal .cm-body,
.klaro .cookie-modal .cm-modal .cm-header {
  color: var(--color-gv-text, #0b0f1a);
}

.klaro .cookie-notice .cn-body p,
.klaro .cookie-modal .cm-modal p,
.klaro .cookie-modal .cm-modal li {
  color: var(--color-gv-text-soft, #3a4154);
}

/* Titres */
.klaro .cookie-modal .cm-modal .cm-header h1,
.klaro .cookie-modal .cm-modal .cm-header h2,
.klaro .cookie-notice .cn-body h2 {
  font-family: var(--font-montserrat, "Montserrat", system-ui, sans-serif);
  font-weight: 800;
  color: var(--color-gv-text, #0b0f1a);
}

/* Boutons "Tout accepter" / "Enregistrer" → gradient brand */
.klaro .cookie-notice .cn-ok .cm-btn.cm-btn-success,
.klaro .cookie-notice .cn-ok .cm-btn.cm-btn-accept-all,
.klaro .cookie-modal .cm-btn.cm-btn-success,
.klaro .cookie-modal .cm-btn.cm-btn-accept-all {
  background: var(
    --gv-gradient-brand,
    linear-gradient(135deg, #00c2ff 0%, #386bff 35%, #af13ff 70%, #fe00b3 100%)
  );
  color: #ffffff;
  border: 0;
  box-shadow: var(--shadow-gv-md, 0 4px 12px rgba(175, 19, 255, 0.25));
  border-radius: 9999px;
  padding: 0.625rem 1.25rem;
  font-weight: 600;
  transition:
    transform 200ms ease-out,
    box-shadow 200ms ease-out;
}

.klaro .cookie-notice .cn-ok .cm-btn.cm-btn-success:hover,
.klaro .cookie-notice .cn-ok .cm-btn.cm-btn-accept-all:hover,
.klaro .cookie-modal .cm-btn.cm-btn-success:hover,
.klaro .cookie-modal .cm-btn.cm-btn-accept-all:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-gv-lg, 0 10px 25px rgba(175, 19, 255, 0.35));
}

/* Boutons "Refuser" / "Personnaliser" → outline */
.klaro .cookie-notice .cn-ok .cm-btn,
.klaro .cookie-modal .cm-btn {
  border-radius: 9999px;
  padding: 0.625rem 1.25rem;
  font-weight: 600;
}

.klaro .cookie-notice .cn-ok .cm-btn.cm-btn-decline,
.klaro .cookie-notice .cn-ok .cm-btn.cm-btn-info,
.klaro .cookie-modal .cm-btn.cm-btn-decline,
.klaro .cookie-modal .cm-btn.cm-btn-info {
  background: transparent;
  color: var(--color-gv-text, #0b0f1a);
  border: 1px solid var(--color-gv-border-strong, #c9cfd9);
}

.klaro .cookie-notice .cn-ok .cm-btn.cm-btn-decline:hover,
.klaro .cookie-modal .cm-btn.cm-btn-decline:hover {
  border-color: var(--color-gv-text, #0b0f1a);
}

/* Focus visible : ring glow Galvaneo (WCAG 2.4.7) */
.klaro .cookie-notice .cm-btn:focus-visible,
.klaro .cookie-modal .cm-btn:focus-visible,
.klaro .cookie-modal input[type="checkbox"]:focus-visible + label {
  outline: none;
  box-shadow: var(--shadow-gv-glow, 0 0 0 3px rgba(175, 19, 255, 0.35));
}

/* Switch des services → accent violet */
.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider {
  background: var(--color-gv-violet, #af13ff);
}