/**
 * NutriByClaire — Habillage du bandeau de consentement
 * Partagé par index.html et legal.html : une seule source de vérité
 * pour l'apparence du bandeau.
 *
 * À charger APRÈS cookieconsent.css.
 * Voir docs/decisions.md → D-003
 */

/* index.html applique `strong { color: white }` globalement, ce qui rendrait
   le texte du bandeau invisible sur fond crème. Neutralisé ici. */
#cc-main strong,
#cc-main b { color: inherit; }

#cc-main {
  --cc-font-family: 'DM Sans', sans-serif;

  --cc-bg: #fffbef;
  --cc-primary-color: #2a5f5f;
  --cc-secondary-color: #3d6b6b;

  --cc-btn-primary-bg: #56b4a6;
  --cc-btn-primary-color: #fffbef;
  --cc-btn-primary-border-color: #56b4a6;
  --cc-btn-primary-hover-bg: #2a5f5f;
  --cc-btn-primary-hover-color: #fffbef;
  --cc-btn-primary-hover-border-color: #2a5f5f;

  --cc-btn-secondary-bg: #f5e6d3;
  --cc-btn-secondary-color: #2a5f5f;
  --cc-btn-secondary-border-color: #f5e6d3;
  --cc-btn-secondary-hover-bg: #ecd9c2;
  --cc-btn-secondary-hover-color: #2a5f5f;
  --cc-btn-secondary-hover-border-color: #ecd9c2;

  --cc-separator-border-color: rgba(86, 180, 166, 0.22);

  --cc-toggle-on-bg: #56b4a6;
  --cc-toggle-off-bg: #a9c4c0;
  --cc-toggle-on-knob-bg: #fffbef;
  --cc-toggle-off-knob-bg: #fffbef;
  --cc-toggle-readonly-bg: #d9e6e3;
  --cc-toggle-readonly-knob-bg: #fffbef;

  --cc-cookie-category-block-bg: #f9f1e4;
  --cc-cookie-category-block-border: rgba(86, 180, 166, 0.18);
  --cc-cookie-category-block-hover-bg: #f5e6d3;
  --cc-cookie-category-block-hover-border: rgba(86, 180, 166, 0.30);
  --cc-cookie-category-expanded-block-bg: transparent;

  --cc-overlay-bg: rgba(42, 95, 95, 0.55);
  --cc-footer-bg: #f9f1e4;
  --cc-footer-color: #3d6b6b;
  --cc-footer-border-color: rgba(86, 180, 166, 0.20);

  --cc-link-color: #56b4a6;
  --cc-modal-border-radius: 14px;

  /* ⚠️ NE PAS mettre 999px ici : la bibliothèque réutilise cette variable
     pour les blocs de catégorie et le conteneur du tableau (overflow:hidden).
     Une valeur trop grande les transforme en ovales qui rognent le texte.
     La forme pilule est appliquée aux seuls boutons, plus bas. */
  --cc-btn-border-radius: 8px;
}

/* Forme pilule réservée aux boutons, comme les CTA du site. */
#cc-main .cm__btn,
#cc-main .pm__btn {
  border-radius: 999px;
}

/* Le bloc déplié doit rester lisible : fond franc et texte non rogné. */
#cc-main .pm__section-desc-wrapper {
  background: #fffdf6;
}

/* Tableaux de cookies : de la place pour respirer, et pas de débordement. */
#cc-main .pm__section-table { font-size: 0.88em; }

#cc-main .pm__table-td,
#cc-main .pm__table-th,
#cc-main .pm__table-caption {
  padding: 0.7em 1.1em;
  overflow-wrap: anywhere;
}

/* Le fond du bandeau est celui de la page : sans un filet, il ne se lit pas
   comme une couche distincte. On renforce aussi légèrement l'ombre native. */
#cc-main .cm {
  border: 1px solid rgba(86, 180, 166, 0.28);
  box-shadow: 0 14px 40px rgba(42, 95, 95, 0.22);
}

/* Les titres reprennent la serif de la marque, comme les titres du site. */
#cc-main .cm__title,
#cc-main .pm__title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  letter-spacing: 0.01em;
}

#cc-main .pm__badge {
  background: rgba(86, 180, 166, 0.16);
  color: #2a5f5f;
}