/* Draft Studio — Skin de la bannière cookies Complianz au design « ds-cc ».
   Reproduit styles/cookies.css (maquette cookie-consent.jsx) sur le DOM de
   Complianz (.cmplz-cookiebanner …). Chargé APRÈS le CSS de Complianz.
   Réutilise les tokens du thème (--ds-ink/--ds-paper/--font-display…). */

/* Icône cookie de la charte (cercles), en data-URI, couleur paper. */
:root {
  --ds-cc-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='9' stroke='%23fafafa' stroke-width='1.6'/%3E%3Ccircle cx='9.5' cy='9' r='1.1' fill='%23fafafa'/%3E%3Ccircle cx='14.5' cy='11' r='1.1' fill='%23fafafa'/%3E%3Ccircle cx='10' cy='14.5' r='1.1' fill='%23fafafa'/%3E%3Ccircle cx='15' cy='15.5' r='1' fill='%23fafafa'/%3E%3C/svg%3E");
}

/* ── Conteneur / panneau ─────────────────────────────────────── */
.cmplz-cookiebanner.banner-1 {
  width: 420px !important;
  max-width: calc(100vw - 32px) !important;
  background: var(--ds-ink) !important;
  color: var(--ds-paper) !important;
  border: 1px solid rgba(250,250,250,0.12) !important;
  border-radius: var(--r-md, 15px) !important;
  box-shadow: var(--ds-shadow-deep, 0 10px 30px 0 rgba(0,0,0,0.75)) !important;
  padding: 26px 26px 24px !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  right: 24px !important;
  bottom: 24px !important;
  left: auto !important;
}
/* Panneau élargi quand les catégories (préférences) sont visibles. */
.cmplz-cookiebanner.banner-1.cmplz-categories-visible { width: 460px !important; }

/* ── En-tête : pastille cookie + titre ───────────────────────── */
.cmplz-cookiebanner.banner-1 .cmplz-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
  padding: 0 !important;
  position: relative;
}
.cmplz-cookiebanner.banner-1 .cmplz-header::before {
  content: "";
  width: 34px; height: 34px; flex-shrink: 0;
  border: 1.5px solid rgba(250,250,250,0.25);
  border-radius: 8px;
  background: var(--ds-cc-mark) center / 19px 19px no-repeat;
}
.cmplz-cookiebanner.banner-1 .cmplz-logo { display: none !important; }
.cmplz-cookiebanner.banner-1 .cmplz-title {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 19px !important;
  letter-spacing: -0.01em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--ds-paper) !important;
}
/* Pas de croix ni de séparateurs dans la maquette. */
.cmplz-cookiebanner.banner-1 .cmplz-close,
.cmplz-cookiebanner.banner-1 .cmplz-divider { display: none !important; }

/* ── Corps ───────────────────────────────────────────────────── */
.cmplz-cookiebanner.banner-1 .cmplz-body { padding: 0 !important; }
.cmplz-cookiebanner.banner-1 .cmplz-message {
  font-size: 14px !important;
  line-height: 1.62 !important;
  color: rgba(250,250,250,0.78) !important;
  margin: 0 0 20px !important;
}
.cmplz-cookiebanner.banner-1 .cmplz-message a,
.cmplz-cookiebanner.banner-1 a.cmplz-link {
  color: var(--ds-paper) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(250,250,250,0.35) !important;
}
.cmplz-cookiebanner.banner-1 .cmplz-message a:hover { border-color: var(--ds-paper) !important; }

/* Liens « documents / information » : absents de la maquette. */
.cmplz-cookiebanner.banner-1 .cmplz-links,
.cmplz-cookiebanner.banner-1 .cmplz-documents { display: none !important; }

/* ── Catégories (vue préférences) ────────────────────────────────
   On NE force PAS l'affichage du conteneur : Complianz le masque en
   vue bannière et le révèle au clic sur « Personnaliser ». On stylise
   seulement sa mise en page une fois affiché. */
.cmplz-cookiebanner.banner-1 .cmplz-categories {
  grid-column: span 3 !important;     /* respecte la grille interne du bandeau */
  margin: 4px 0 16px !important;
  max-height: 46vh; overflow-y: auto; padding-right: 2px;
}
/* La maquette n'a que 3 catégories : pas de « Préférences ».
   (Spécificité portée au-dessus de la règle grid des catégories.) */
.cmplz-cookiebanner.banner-1 .cmplz-categories .cmplz-category.cmplz-preferences { display: none !important; }

/* Carte : titre + description à gauche, interrupteur à droite (centré). */
.cmplz-cookiebanner.banner-1 .cmplz-categories .cmplz-category {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  column-gap: 16px !important;
  align-items: start !important;
  background: rgba(250,250,250,0.04) !important;
  border: 1px solid rgba(250,250,250,0.10) !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  margin: 0 0 12px !important;
}
.cmplz-cookiebanner.banner-1 .cmplz-categories .cmplz-category-header {
  display: contents !important;       /* titre/switch/chevron deviennent items de la carte */
}
.cmplz-cookiebanner.banner-1 .cmplz-categories .cmplz-category-title {
  grid-column: 1 !important; grid-row: 1 !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: var(--ds-paper) !important;
  margin: 0 !important; justify-self: start !important;
}
.cmplz-cookiebanner.banner-1 .cmplz-categories .cmplz-banner-checkbox {
  grid-column: 2 !important; grid-row: 1 / span 2 !important;
  align-self: center !important;
}
.cmplz-cookiebanner.banner-1 .cmplz-categories .cmplz-description {
  grid-column: 1 !important; grid-row: 2 !important;
  display: block !important;
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  color: rgba(250,250,250,0.6) !important;
  margin: 4px 0 0 !important; padding: 0 !important;
  max-width: 100% !important;
}
.cmplz-cookiebanner.banner-1 .cmplz-categories .cmplz-always-active {
  grid-column: 2 !important; grid-row: 1 !important;
  justify-self: end !important;
  font-family: var(--font-display) !important; font-weight: 600 !important;
  font-size: 10px !important; letter-spacing: 0.08em !important; text-transform: uppercase !important;
  color: rgba(250,250,250,0.5) !important;
  /* Sur 2 lignes (« TOUJOURS » / « ACTIVÉ ») pour laisser de la place au texte à gauche. */
  white-space: normal !important;
  max-width: 64px !important;
  text-align: right !important;
  line-height: 1.35 !important;
}
/* Pas de chevron d'expansion : la description est toujours visible. */
.cmplz-cookiebanner.banner-1 .cmplz-category-toggle,
.cmplz-cookiebanner.banner-1 .cmplz-icon.cmplz-open { display: none !important; }

/* ── Interrupteurs (switch de la charte) ─────────────────────── */
.cmplz-cookiebanner.banner-1 .cmplz-banner-checkbox {
  position: relative !important;
  flex-shrink: 0 !important;
  width: 44px !important;
  height: 26px !important;
  margin-top: 2px !important;
}
.cmplz-cookiebanner.banner-1 .cmplz-banner-checkbox input {
  position: absolute !important; inset: 0 !important;
  opacity: 0 !important; width: 100% !important; height: 100% !important;
  margin: 0 !important; cursor: pointer !important; z-index: 2;
}
.cmplz-cookiebanner.banner-1 .cmplz-banner-checkbox .cmplz-label {
  position: absolute !important; inset: 0 !important;
  border-radius: 999px !important;
  background: rgba(250,250,250,0.18) !important;
  border: 1px solid rgba(250,250,250,0.22) !important;
  transition: background .15s ease, border-color .15s ease !important;
  margin: 0 !important; padding: 0 !important;
}
/* Complianz pose un rail ::before (28x15) qui doublonne notre switch : on le neutralise. */
.cmplz-cookiebanner.banner-1 .cmplz-banner-checkbox .cmplz-label::before { display: none !important; content: none !important; }
.cmplz-cookiebanner.banner-1 .cmplz-banner-checkbox .cmplz-label::after {
  content: "" !important;
  position: absolute !important; top: 3px !important; left: 3px !important;
  width: 18px !important; height: 18px !important; border-radius: 50% !important;
  background: var(--ds-paper) !important;
  transition: transform .18s cubic-bezier(.2,.8,.2,1) !important;
}
.cmplz-cookiebanner.banner-1 .cmplz-banner-checkbox input:checked + .cmplz-label {
  background: var(--ds-paper) !important; border-color: var(--ds-paper) !important;
}
.cmplz-cookiebanner.banner-1 .cmplz-banner-checkbox input:checked + .cmplz-label::after {
  transform: translateX(18px) !important; background: var(--ds-ink) !important;
}
/* Nécessaires : verrouillé (toujours actif). */
.cmplz-cookiebanner.banner-1 .cmplz-category.cmplz-functional .cmplz-label {
  background: rgba(250,250,250,0.4) !important; border-color: rgba(250,250,250,0.4) !important;
}
.cmplz-cookiebanner.banner-1 .cmplz-category.cmplz-functional .cmplz-label::after { background: var(--ds-ink) !important; }

/* ── Boutons (pilules de la charte) ──────────────────────────── */
.cmplz-cookiebanner.banner-1 .cmplz-buttons {
  display: flex !important;
  /* Complianz met flex-direction:column + wrap → « Personnaliser » (basis 100%)
     partait dans une 2e colonne hors écran. On force le sens ligne : refuser |
     accepter côte à côte (basis 50%), puis Personnaliser pleine largeur dessous. */
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 0 !important;
}
.cmplz-cookiebanner.banner-1 .cmplz-btn {
  height: 50px !important;
  border-radius: 6px !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: 0.03em !important;
  text-transform: none !important;
  cursor: pointer !important;
  border: none !important;
  transition: background .12s, color .12s !important;
  margin: 0 !important;
}
/* Ligne « refuser | accepter » : chacun la moitié. */
.cmplz-cookiebanner.banner-1 .cmplz-btn.cmplz-accept,
.cmplz-cookiebanner.banner-1 .cmplz-btn.cmplz-deny,
.cmplz-cookiebanner.banner-1 .cmplz-btn.cmplz-save-preferences {
  flex: 1 1 calc(50% - 5px) !important;
  min-width: 0 !important;
}
/* Accepter = pilule pleine (paper / ink). */
.cmplz-cookiebanner.banner-1 .cmplz-btn.cmplz-accept {
  background: var(--ds-paper) !important; color: var(--ds-ink) !important;
  order: 2;
}
.cmplz-cookiebanner.banner-1 .cmplz-btn.cmplz-accept:hover { background: #e6e6e6 !important; color: var(--ds-ink) !important; }
/* Refuser = pilule contour. */
.cmplz-cookiebanner.banner-1 .cmplz-btn.cmplz-deny {
  background: transparent !important; color: var(--ds-paper) !important;
  border: 2px solid var(--ds-paper) !important;
  order: 1;
}
.cmplz-cookiebanner.banner-1 .cmplz-btn.cmplz-deny:hover { background: rgba(250,250,250,0.10) !important; color: var(--ds-paper) !important; }
/* Enregistrer mes choix = pilule pleine (vue préférences). */
.cmplz-cookiebanner.banner-1 .cmplz-btn.cmplz-save-preferences {
  background: var(--ds-paper) !important; color: var(--ds-ink) !important;
  order: 2;
}
.cmplz-cookiebanner.banner-1 .cmplz-btn.cmplz-save-preferences:hover { background: #e6e6e6 !important; color: var(--ds-ink) !important; }
/* Personnaliser = lien souligné, pleine largeur sous la ligne. */
.cmplz-cookiebanner.banner-1 .cmplz-btn.cmplz-view-preferences {
  flex: 1 0 100% !important;
  order: 3;
  height: auto !important;
  background: none !important;
  color: rgba(250,250,250,0.7) !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
  padding: 8px 4px 2px !important;
}
.cmplz-cookiebanner.banner-1 .cmplz-btn.cmplz-view-preferences:hover { color: var(--ds-paper) !important; }

/* ── Vue PRÉFÉRENCES (catégories ouvertes) : agencement maquette ──
   Ligne [ Tout refuser | Enregistrer mes choix ] + « Tout accepter » en lien. */
.cmplz-cookiebanner.banner-1.cmplz-categories-visible .cmplz-btn.cmplz-save-preferences {
  order: 2 !important;
  background: var(--ds-paper) !important; color: var(--ds-ink) !important;
  flex: 1 1 calc(50% - 5px) !important;
}
.cmplz-cookiebanner.banner-1.cmplz-categories-visible .cmplz-btn.cmplz-accept {
  order: 3 !important;
  flex: 1 0 100% !important;
  height: auto !important;
  background: none !important;
  color: rgba(250,250,250,0.7) !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
  padding: 8px 4px 2px !important;
}
.cmplz-cookiebanner.banner-1.cmplz-categories-visible .cmplz-btn.cmplz-accept:hover {
  background: none !important; color: var(--ds-paper) !important;
}

/* ── Onglet de réouverture = pastille ronde cookie ───────────── */
.cmplz-cookiebanner-container .cmplz-manage-consent.manage-consent-1,
button.cmplz-manage-consent.manage-consent-1 {
  position: fixed !important;
  right: 24px !important; bottom: 24px !important; left: auto !important;
  width: 48px !important; height: 48px !important;
  min-width: 48px !important; max-width: 48px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: var(--ds-ink) center / 22px 22px no-repeat var(--ds-cc-mark) !important;
  border: 1px solid rgba(250,250,250,0.16) !important;
  box-shadow: var(--ds-shadow-card, 5px 5px 10px 0 rgba(0,0,0,0.4)) !important;
  color: transparent !important;
  font-size: 0 !important;
  overflow: hidden !important;
  transition: transform .12s, background-color .12s !important;
}
button.cmplz-manage-consent.manage-consent-1:hover { background-color: #303030 !important; transform: translateY(-2px) !important; }
/* Complianz laisse la pastille en display:none même après consentement (classe
   cmplz-show). On l'affiche quand cmplz-show est posée, et on la garde masquée
   tant que la bannière est ouverte (cmplz-dismissed). → permet de rouvrir la
   popup à tout moment. */
.cmplz-manage-consent.manage-consent-1.cmplz-show,
button.cmplz-manage-consent.manage-consent-1.cmplz-show {
  display: flex !important; align-items: center !important; justify-content: center !important;
}
.cmplz-manage-consent.manage-consent-1.cmplz-dismissed {
  display: none !important;
}

@media (max-width: 520px) {
  .cmplz-cookiebanner.banner-1 { right: 12px !important; left: 12px !important; bottom: 12px !important; width: auto !important; }
}