/* ============================================================
   Bandeau de consentement Complianz à la charte de La Salle.
   Chargé seulement quand le plugin est actif (inc/assets.php).

   Complianz écrit ses réglages de style dans des variables CSS sur
   :root (wp-content/uploads/complianz/css/banner-…css) : les
   redéfinir suffit pour la plus grande partie, sans !important.
   ============================================================ */

:root {
  /* Surface : fond chaud du site, filet blanc à 15 %, angles à 2px */
  --cmplz_banner_width: 460px;
  --cmplz_banner_background_color: #171314;
  --cmplz_banner_border_color: rgba(255, 255, 255, 0.15);
  --cmplz_banner_border_width: 1px 1px 1px 1px;
  --cmplz_banner_border_radius: 2px 2px 2px 2px;
  --cmplz_banner_margin: 24px;

  /* Texte : blanc sur fond sombre, échelle du site */
  --cmplz_text_color: #FFFFFF;
  --cmplz_hyperlink_color: #FFFFFF;
  --cmplz_title_font_size: 20px;
  --cmplz_text_font_size: 15px;
  --cmplz_link_font_size: 13px;
  --cmplz_category_body_font_size: 14px;
  --cmplz_category_header_title_font_size: 12px;
  --cmplz_category_header_active_font_size: 12px;
  --cmplz_category_header_always_active_color: rgba(255, 255, 255, 0.68);

  /* Boutons : mêmes formes que .btn du site */
  --cmplz_button_font_size: 13px;
  --cmplz_button_border_radius: 2px 2px 2px 2px;
  --cmplz_button_accept_background_color: #DD0026;
  --cmplz_button_accept_border_color: #DD0026;
  --cmplz_button_accept_text_color: #FFFFFF;
  /* Refus et réglages : même taille que « accepter », contour clair.
     Le refus doit rester aussi lisible que l'acceptation (CNIL). */
  --cmplz_button_deny_background_color: transparent;
  --cmplz_button_deny_border_color: rgba(255, 255, 255, 0.4);
  --cmplz_button_deny_text_color: #FFFFFF;
  --cmplz_button_settings_background_color: transparent;
  --cmplz_button_settings_border_color: rgba(255, 255, 255, 0.4);
  --cmplz_button_settings_text_color: #FFFFFF;

  /* Interrupteurs des catégories */
  --cmplz_slider_active_color: #DD0026;
  --cmplz_slider_inactive_color: rgba(255, 255, 255, 0.28);
  --cmplz_slider_bullet_color: #FFFFFF;

  --cmplz-manage-consent-height: 44px;
}

/* ------------------------------------------------------------
   Plans : le rideau d'ouverture est à 1000, l'en-tête fixe à 100.
   Le bandeau passe dessous : il ne recouvre jamais l'intro.
   ------------------------------------------------------------ */
.cmplz-cookiebanner { z-index: 95 !important; }
#cmplz-manage-consent .cmplz-manage-consent { z-index: 90 !important; }

/* Tant que le rideau est à l'écran, rien n'apparaît : le bandeau
   attend la fin de l'intro au lieu de s'animer derrière. */
html.is-loading #cmplz-cookiebanner-container,
html.is-loading #cmplz-manage-consent { visibility: hidden; }

/* Menu plein écran ouvert : le bandeau s'efface le temps de la navigation */
#cmplz-cookiebanner-container { transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
body.menu-open #cmplz-cookiebanner-container { opacity: 0; pointer-events: none; }

/* ------------------------------------------------------------
   Typographie
   ------------------------------------------------------------ */
.cmplz-cookiebanner {
  font-family: "Archivo", system-ui, sans-serif;
  box-shadow: none;
}
.cmplz-cookiebanner .cmplz-title {
  font-weight: 800;
  font-variation-settings: "wdth" 112;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.cmplz-cookiebanner .cmplz-message {
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
}
.cmplz-cookiebanner .cmplz-category-title {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.cmplz-cookiebanner .cmplz-description,
.cmplz-cookiebanner .cmplz-description span {
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.68);
}

/* ------------------------------------------------------------
   Composition : titre fer à gauche, respiration du site
   ------------------------------------------------------------ */
.cmplz-cookiebanner { padding: 24px 26px; gap: 16px; }
/* L'en-tête est une grille logo | titre | fermeture, qui centre le titre.
   Sans logo, la première colonne est repliée : le titre part à gauche. */
.cmplz-cookiebanner .cmplz-header:has(.cmplz-logo:empty) {
  grid-template-columns: 0 minmax(0, 1fr) auto;
  align-items: center;
}
.cmplz-cookiebanner .cmplz-header .cmplz-title {
  text-align: left;
  justify-self: start;
}

/* ------------------------------------------------------------
   Boutons : le dessin des .btn du site
   ------------------------------------------------------------ */
.cmplz-cookiebanner .cmplz-buttons { flex-wrap: wrap; gap: 12px; }
/* Accepter et refuser occupent la même largeur : refuser doit être aussi
   accessible qu'accepter (recommandation CNIL). Seulement quand les boutons
   sont en ligne : empilés, une base de 130px les étirerait en hauteur. */
@media (min-width: 761px) {
  .cmplz-cookiebanner .cmplz-btn.cmplz-accept,
  .cmplz-cookiebanner .cmplz-btn.cmplz-deny { flex: 1 1 130px; }
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
  padding: 15px 26px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.2;
  border-width: 1px;
  border-style: solid;
  transition:
    background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Sur le rouge, le survol bascule sur la brique (le corail est trop clair) */
.cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover {
  background-color: #842B1D;
  border-color: #842B1D;
}
.cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover,
.cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences:hover,
.cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences:hover {
  background-color: #DD0026;
  border-color: #DD0026;
  color: #FFFFFF;
}

/* ------------------------------------------------------------
   Liens, filets, fermeture
   ------------------------------------------------------------ */
.cmplz-cookiebanner .cmplz-links a,
.cmplz-cookiebanner .cmplz-documents a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.3s ease;
}
.cmplz-cookiebanner .cmplz-links a:hover,
.cmplz-cookiebanner .cmplz-documents a:hover { color: #E56140; }
.cmplz-cookiebanner .cmplz-divider {
  border-color: rgba(255, 255, 255, 0.15);
  background-color: rgba(255, 255, 255, 0.15);
}
.cmplz-cookiebanner .cmplz-close { color: rgba(255, 255, 255, 0.7); }
.cmplz-cookiebanner .cmplz-close:hover { color: #FFFFFF; }
.cmplz-cookiebanner .cmplz-category-toggle { color: rgba(255, 255, 255, 0.7); }

/* ------------------------------------------------------------
   Onglet « Gérer le consentement », une fois le choix fait
   ------------------------------------------------------------ */
#cmplz-manage-consent .cmplz-manage-consent {
  background-color: #171314;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 2px 2px 0 0;
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
#cmplz-manage-consent .cmplz-manage-consent:hover { background-color: #842B1D; }

/* ------------------------------------------------------------
   Mobile : le bandeau occupe la largeur, marges du site
   ------------------------------------------------------------ */
@media (max-width: 760px) {
  :root {
    --cmplz_banner_width: calc(100vw - 32px);
    --cmplz_banner_margin: 16px;
  }
  .cmplz-cookiebanner .cmplz-buttons .cmplz-btn { padding: 14px 20px; }
}