/* =========================================================================
   cookiecustom.css - habillage CookieConsent aux couleurs DamElec Nord.
   Repose sur les tokens de style.css (--de-*) : si la palette bouge,
   l'encart suit. Chargé APRÈS cookieconsent.css pour primer dessus.
   ========================================================================= */

#cc-main {
  /* Reprise des variables du plugin avec nos tokens. */
  --cc-font-family: var(--de-font-sans);
  --cc-bg: #fff;
  --cc-primary-color: var(--de-ink);
  --cc-secondary-color: var(--de-body);

  --cc-modal-border-radius: var(--de-radius);
  --cc-btn-border-radius: 13px;
  --cc-pm-toggle-border-radius: 100px;

  /* Bouton principal = noir (comme .de-btn--indigo, l'indigo valant #000). */
  --cc-btn-primary-bg: var(--de-indigo);
  --cc-btn-primary-color: #fff;
  --cc-btn-primary-border-color: var(--de-indigo);
  --cc-btn-primary-hover-bg: #fff;
  --cc-btn-primary-hover-color: var(--de-ink);
  --cc-btn-primary-hover-border-color: var(--de-ink);

  /* Bouton secondaire = aplat bleu clair (comme .de-card). */
  --cc-btn-secondary-bg: var(--de-lilac);
  --cc-btn-secondary-color: var(--de-ink);
  --cc-btn-secondary-border-color: var(--de-lilac);
  --cc-btn-secondary-hover-bg: #fff;
  --cc-btn-secondary-hover-color: var(--de-ink);
  --cc-btn-secondary-hover-border-color: var(--de-ink);

  --cc-separator-border-color: var(--de-line);
  --cc-link-color: var(--de-indigo);

  --cc-toggle-on-bg: var(--de-indigo);
  --cc-toggle-off-bg: #c9c6d4;
  --cc-toggle-on-knob-bg: #fff;
  --cc-toggle-off-knob-bg: #fff;
  --cc-toggle-readonly-bg: var(--de-lilac);
  --cc-toggle-readonly-knob-bg: #fff;

  --cc-cookie-category-block-bg: var(--de-lilac);
  --cc-cookie-category-block-border: var(--de-lilac);
  --cc-cookie-category-block-hover-bg: #a5d8f3;
  --cc-cookie-category-block-hover-border: #a5d8f3;
  --cc-cookie-category-expanded-block-hover-bg: #a5d8f3;

  --cc-footer-bg: var(--de-cream);
  --cc-footer-color: var(--de-muted);
  --cc-footer-border-color: var(--de-line);

  --cc-overlay-bg: rgba(0,0,0,.55);
}

/* ------------------------------------------------------- encart (banner) */

#cc-main .cm {
  /* Même ombre portée que les cartes du site. */
  box-shadow: 0 28px 66px rgba(30,20,80,.22);
  max-width: 25rem;
}

#cc-main .cm__body {
  padding: 6px 4px 4px;
}

/* Titres : police des titres du site. */

#cc-main .cm__title,
#cc-main .pm__title {
  font-family: var(--de-font-title);
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--de-ink);
}

#cc-main .cm__title {
  font-size: 1.2em;
}

#cc-main .cm__desc {
  font-size: .88em;
  line-height: 1.55;
  color: var(--de-body);
}

/* Boutons : mêmes proportions que .de-btn du site. */

#cc-main .cm__btn,
#cc-main .pm__btn {
  font-family: var(--de-font-sans);
  font-weight: 700;
  font-size: .85em;
  min-height: 46px;
  transition: transform .18s ease, filter .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}

/* « Tout accepter » = action principale -> rouge, comme les CTA du site. */

#cc-main .cm__btn[data-role="all"],
#cc-main .pm__btn[data-role="all"] {
  background: var(--de-red);
  border-color: var(--de-red);
  color: #fff;
}

#cc-main .cm__btn[data-role="all"]:hover,
#cc-main .pm__btn[data-role="all"]:hover {
  background: var(--de-red);
  border-color: var(--de-red);
  color: #fff;
  filter: brightness(1.08);
  transform: translateY(-2px);
}

/* « Tout refuser » : même poids visuel que l'acceptation (exigence CNIL :
   refuser doit être aussi simple qu'accepter). */

#cc-main .cm__btn[data-role="necessary"],
#cc-main .pm__btn[data-role="necessary"] {
  background: var(--de-lilac);
  border-color: var(--de-lilac);
  color: var(--de-ink);
}

#cc-main .cm__btn[data-role="necessary"]:hover,
#cc-main .pm__btn[data-role="necessary"]:hover {
  background: #a5d8f3;
  border-color: #a5d8f3;
  color: var(--de-ink);
}

/* « Gérer les cookies » */

#cc-main .cm__btn[data-role="show"] {
  background: transparent;
  border-color: var(--de-line-2);
  color: var(--de-ink);
}

#cc-main .cm__btn[data-role="show"]:hover {
  background: var(--de-lilac);
  border-color: var(--de-lilac);
  color: var(--de-ink);
}

/* « Accepter la sélection » (panneau de préférences) */

#cc-main .pm__btn[data-role="save"] {
  background: var(--de-indigo);
  border-color: var(--de-indigo);
  color: #fff;
}

#cc-main .pm__btn[data-role="save"]:hover {
  background: #fff;
  border-color: var(--de-ink);
  color: var(--de-ink);
}

/* Pied de l'encart (lien mentions légales) */

#cc-main .cm__link-group a,
#cc-main .cm__footer a {
  color: var(--de-indigo);
  font-weight: 600;
}

/* --------------------------------------------- panneau des préférences */

#cc-main .pm {
  box-shadow: 0 28px 66px rgba(30,20,80,.22);
}

#cc-main .pm__section--toggle .pm__section-title {
  font-family: var(--de-font-sans);
  font-weight: 700;
}

#cc-main .pm__section:not(:first-child):hover {
  background: transparent;
  cursor: default;
}

#cc-main .pm__section--expandable .pm__section-arrow {
  background: var(--de-indigo);
}

#cc-main .pm__section--expandable .pm__section-arrow svg {
  stroke: #fff;
}

#cc-main .pm__badge {
  background: var(--de-lilac);
  color: var(--de-ink);
}

#cc-main .toggle__icon-on svg {
  stroke: var(--de-indigo);
}

#cc-main .toggle__icon-circle {
  box-shadow: none;
}

#cc-main .pm__close-btn {
  background: var(--de-lilac);
  border-color: var(--de-lilac);
}

#cc-main .pm__close-btn:hover {
  background: #a5d8f3;
  border-color: #a5d8f3;
}

/* -------------------------------------------------------------- mobile */

@media screen and (max-width: 640px) {
  #cc-main .cm {
    max-width: none !important;
  }
}