/**
 * B - Bâtiment - Conseils — Habillage du bandeau de consentement
 * Partagé par index, mentions-legales et politique-confidentialite :
 * une seule source de vérité pour l'apparence.
 *
 * À charger APRÈS cookieconsent.css.
 *
 * Parti pris : le bandeau reprend le vocabulaire des surfaces sombres du site
 * (pied de page, .nav-cta, .c-submit) — fond quasi noir, texte crème, capitales
 * interlettrées, titres en Playfair, filets sauge. Monochrome : la sauge n'est
 * utilisée qu'en accent (filet, liens, survol), jamais en aplat.
 *
 * Jetons repris de index-dev.html :
 *   --ink #1c1c1e   --paper #fbfaf6   --sage #b8c8c0   --deep #4e6459
 */

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

  --cc-bg: #1c1c1e;
  --cc-primary-color: #fbfaf6;
  --cc-secondary-color: rgba(251, 250, 246, 0.72);

  /* « Tout accepter » ET « Tout refuser » partagent le style primaire
     (data-role="all" et data-role="necessary" reçoivent la même classe .cm__btn).
     Ne jamais séparer leurs styles : la prominence égale des deux choix est une
     exigence CNIL, et c'est le point le plus contrôlé. */
  --cc-btn-primary-bg: #fbfaf6;
  --cc-btn-primary-color: #1c1c1e;
  --cc-btn-primary-border-color: #fbfaf6;
  --cc-btn-primary-hover-bg: #b8c8c0;
  --cc-btn-primary-hover-color: #1c1c1e;
  --cc-btn-primary-hover-border-color: #b8c8c0;

  /* Secondaire = « Personnaliser » dans le bandeau, « Enregistrer mes choix »
     dans la fenêtre de préférences : contour seul, jamais d'aplat. */
  --cc-btn-secondary-bg: transparent;
  --cc-btn-secondary-color: #fbfaf6;
  --cc-btn-secondary-border-color: rgba(251, 250, 246, 0.38);
  --cc-btn-secondary-hover-bg: transparent;
  --cc-btn-secondary-hover-color: #b8c8c0;
  --cc-btn-secondary-hover-border-color: #b8c8c0;

  --cc-separator-border-color: rgba(251, 250, 246, 0.14);

  --cc-toggle-on-bg: #fbfaf6;
  --cc-toggle-on-knob-bg: #1c1c1e;
  --cc-toggle-off-bg: rgba(251, 250, 246, 0.20);
  --cc-toggle-off-knob-bg: #fbfaf6;
  --cc-toggle-readonly-bg: rgba(251, 250, 246, 0.10);
  --cc-toggle-readonly-knob-bg: rgba(251, 250, 246, 0.55);

  --cc-cookie-category-block-bg: #232327;
  --cc-cookie-category-block-border: rgba(251, 250, 246, 0.10);
  --cc-cookie-category-block-hover-bg: #2a2a2f;
  --cc-cookie-category-block-hover-border: rgba(184, 200, 192, 0.34);
  --cc-cookie-category-expanded-block-bg: transparent;

  --cc-overlay-bg: rgba(28, 28, 30, 0.74);
  --cc-footer-bg: #161618;
  --cc-footer-color: rgba(251, 250, 246, 0.62);
  --cc-footer-border-color: rgba(251, 250, 246, 0.12);

  --cc-link-color: #b8c8c0;

  /* Angles vifs pour les blocs : le site oppose déjà des surfaces franches
     (.nav-cta carrée) à des boutons en pilule. C'est ce contraste qui porte
     l'allure, pas les arrondis. */
  --cc-modal-border-radius: 0;

  /* ⚠️ 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 pilule est réservée aux boutons, plus bas. */
  --cc-btn-border-radius: 2px;
}

/* ── Boutons : la pilule capitale du site (.c-submit) ── */
#cc-main .cm__btn,
#cc-main .pm__btn {
  border-radius: 999px;
  padding: 14px 20px;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  /* Sans nowrap, « TOUT ACCEPTER » passe sur deux lignes quand « TOUT REFUSER »
     tient sur une : les deux boutons n'ont plus la même hauteur, et la
     prominence égale exigée par la CNIL n'est plus tenue visuellement. */
  white-space: nowrap;
  transition: background-color 0.2s ease-out, color 0.2s ease-out,
              border-color 0.2s ease-out;
}

/* Largeurs strictement identiques pour « Tout accepter » et « Tout refuser ».
   Le groupe est une grille a colonnes egales, mais la bibliotheque ecarte le
   second bouton avec un margin-left qui rogne sa cellule : il finit 6 px plus
   etroit que le premier. On remplace cette marge par un gap, qui n'entame
   aucune cellule. « Personnaliser » vit dans un second groupe, non concerne. */
#cc-main .cm--inline .cm__btn-group { column-gap: 0.375rem; }
#cc-main .cm--inline .cm__btn + .cm__btn { margin-left: 0; }

/* ── Le bandeau : un bloc franc, posé sur la page ── */
#cc-main .cm {
  border: 1px solid rgba(251, 250, 246, 0.12);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}

/* ── Titres en Playfair, comme les titres de section ── */
#cc-main .cm__title,
#cc-main .pm__title {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: 21px;
  letter-spacing: 0.01em;
  color: #fbfaf6;
}

/* Filet sauge sous le titre du bandeau — le même signe que sous les titres
   de section du site. La bibliothèque applique `all: unset` à tous les ::after
   de #cc-main : chaque propriété doit donc être redéclarée. */
#cc-main .cm__title::after {
  content: "";
  display: block;
  width: 48px;
  height: 1px;
  margin-top: 14px;
  background: rgba(184, 200, 192, 0.75);
}

#cc-main .cm__desc,
#cc-main .pm__section-desc {
  font-weight: 300;
  line-height: 1.65;
}

/* ── Fenêtre de préférences ── */
#cc-main .pm__section-desc-wrapper {
  background: #1f1f22;
}

#cc-main .pm__section-title {
  font-weight: 500;
  letter-spacing: 0.6px;
}

/* 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;
}

#cc-main .pm__table-th {
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-size: 0.86em;
  color: rgba(251, 250, 246, 0.62);
}

/* Étiquette « Toujours actifs » : un filet, pas une pastille colorée. */
#cc-main .pm__badge {
  background: transparent;
  border: 1px solid rgba(184, 200, 192, 0.45);
  color: #b8c8c0;
  font-size: 0.72em;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

/* ── Liens légaux du pied du bandeau ── */
#cc-main .cm__footer a,
#cc-main .pm__section-desc a {
  color: #b8c8c0;
  text-decoration: none;
  border-bottom: 1px solid rgba(184, 200, 192, 0.35);
  transition: border-color 0.2s ease-out;
}
#cc-main .cm__footer a:hover,
#cc-main .pm__section-desc a:hover {
  border-bottom-color: #b8c8c0;
}
#cc-main .cm__footer a + a { margin-left: 18px; }