/**
 * Chaussmart — habillage du bandeau tarteaucitron.
 *
 * Carte flottante en bas de page, aux couleurs Chaussmart, en une seule colonne : titre, message,
 * puis les boutons alignés à droite (pleine largeur sous 768px). La structure (.cs-consent,
 * titre compris) est posée par views/js/consent.js.
 *
 * SPÉCIFICITÉ. La CSS de tarteaucitron est injectée par la librairie elle-même, donc APRÈS
 * celle-ci : on ne gagne que par la spécificité. Ses règles les plus fortes sur le bandeau vont
 * jusqu'à deux id et une classe, avec font-size … !important sur les boutons. D'où les
 * préfixes html body #tarteaucitronRoot #tarteaucitronAlertBig, et !important sur font-size
 * seulement.
 *
 * On ne touche jamais au display de #tarteaucitronAlertBig : tarteaucitron l'ouvre et le ferme
 * en style inline.
 *
 * BOUTONS. Les trois ont la même taille et la même forme : « Tout accepter » plein rose,
 * « Tout refuser » et « Personnaliser » en contour rose sur fond blanc (choix de design). Garder
 * « Tout refuser » aussi visible et accessible qu'« Tout accepter » (CNIL).
 *
 * Couleurs : tokens --cs-* du thème enfant (custom.css), avec repli si le thème change.
 */

/* --- Carte ---------------------------------------------------------------- */
html body #tarteaucitronRoot #tarteaucitronAlertBig {
  left: 50%;
  right: auto;
  bottom: 16px;
  transform: translateX(-50%);
  box-sizing: border-box;
  width: min(1100px, calc(100% - 32px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  margin: 0;
  padding: 20px 24px;
  border: 1px solid var(--cs-border, #dddddd);
  border-radius: 12px;
  background: var(--cs-pure-white, #ffffff);
  box-shadow: 0 12px 40px rgba(16, 16, 16, 0.18);
  color: var(--cs-text-dark, #404040);
  font-family: inherit;
  font-size: 0.9375rem !important;
  text-align: left;
}

/* Titre : élément posé par consent.js (role="heading"), texte = middleBarHead. La marge basse
   complète le gap de .cs-consent pour rapprocher le titre du message. */
html body #tarteaucitronRoot #tarteaucitronAlertBig .cs-consent__title {
  margin: 0 0 -10px;
  padding: 0;
  color: var(--cs-text-accent, #101010);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
}

/* --- Colonne : message, puis boutons (posée par consent.js) ----------------- */
html body #tarteaucitronRoot #tarteaucitronAlertBig .cs-consent {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

html body #tarteaucitronRoot #tarteaucitronAlertBig .cs-consent__body {
  min-width: 0;
}

html body #tarteaucitronRoot #tarteaucitronAlertBig .cs-consent__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* --- Message ---------------------------------------------------------------- */
html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronDisclaimerAlert {
  display: block;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  color: var(--cs-text-dark, #404040);
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* --- Boutons : forme commune ------------------------------------------------ */
html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPersonalize2,
html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronAllDenied2,
html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronCloseAlert {
  box-sizing: border-box;
  min-width: 10rem;
  margin: 0;
  padding: 11px 20px;
  border: 1px solid var(--cs-secondary-strong, #ef4b8f);
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.9375rem !important;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

/* Tout accepter : plein rose, violet au survol (comme les .btn-primary du thème). */
html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPersonalize2 {
  background: var(--cs-secondary-strong, #ef4b8f);
  color: var(--cs-pure-white, #ffffff);
}

html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPersonalize2:hover {
  border-color: var(--cs-main-strong, #6b3689);
  background: var(--cs-main-strong, #6b3689);
}

/* Tout refuser, Personnaliser : contour rose sur blanc, rempli au survol (comme les
   .btn-outline-primary du thème). */
html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronAllDenied2,
html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronCloseAlert {
  background: var(--cs-pure-white, #ffffff);
  color: var(--cs-secondary-strong, #ef4b8f);
}

html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronAllDenied2:hover,
html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronCloseAlert:hover {
  background: var(--cs-secondary-strong, #ef4b8f);
  color: var(--cs-pure-white, #ffffff);
}

/* Coche et croix de tarteaucitron : retirées. */
html body #tarteaucitronRoot #tarteaucitronAlertBig .tarteaucitronCheck,
html body #tarteaucitronRoot #tarteaucitronAlertBig .tarteaucitronCross {
  display: none;
}

/* --- Focus clavier ----------------------------------------------------------- */
html body #tarteaucitronRoot #tarteaucitronAlertBig button:focus-visible,
html body #tarteaucitronRoot #tarteaucitronAlertBig a:focus-visible {
  outline: 2px solid var(--cs-main-strong, #6b3689);
  outline-offset: 2px;
}

/* --- Mobile : boutons pleine largeur, empilés -------------------------------- */
@media (max-width: 767.98px) {
  html body #tarteaucitronRoot #tarteaucitronAlertBig {
    bottom: 8px;
    width: calc(100% - 16px);
    max-height: calc(100vh - 16px);
    padding: 16px;
  }

  html body #tarteaucitronRoot #tarteaucitronAlertBig .cs-consent__actions {
    flex-direction: column;
    align-items: stretch;
  }

  html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPersonalize2,
  html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronAllDenied2,
  html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronCloseAlert {
    width: 100%;
  }
}

/* --- Panneau de détail (#tarteaucitron) -------------------------------------- *
 * Boutons de choix (Tout accepter, Tout refuser, Autoriser / Interdire par service) : contour
 * rose sur blanc, remplis de rose au survol et quand le choix est actif (tarteaucitron pose
 * tarteaucitronIsSelected sur les boutons globaux, tarteaucitronIsAllowed / IsDenied sur la ligne
 * du service). « Enregistrer » : plein rose, violet au survol. Pictos coche / croix retirés. */
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronAllAllowed,
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronAllDenied,
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronLine .tarteaucitronAsk .tarteaucitronAllow,
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronLine .tarteaucitronAsk .tarteaucitronDeny,
html body #tarteaucitronRoot #tarteaucitron button#tarteaucitronSaveButton {
  box-sizing: border-box;
  padding: 6px 12px;
  border: 1px solid var(--cs-secondary-strong, #ef4b8f);
  border-radius: 4px;
  background: var(--cs-pure-white, #ffffff);
  color: var(--cs-secondary-strong, #ef4b8f);
  font-family: inherit;
  font-size: 0.875rem !important;
  font-weight: 400;
  line-height: 1.3;
  text-transform: none;
  opacity: 1;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

html body #tarteaucitronRoot #tarteaucitron #tarteaucitronAllAllowed:hover,
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronAllDenied:hover,
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronLine .tarteaucitronAsk .tarteaucitronAllow:hover,
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronLine .tarteaucitronAsk .tarteaucitronDeny:hover,
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronAllAllowed.tarteaucitronIsSelected,
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronAllDenied.tarteaucitronIsSelected,
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronLine.tarteaucitronIsAllowed .tarteaucitronAsk .tarteaucitronAllow,
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronLine.tarteaucitronIsDenied .tarteaucitronAsk .tarteaucitronDeny,
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices #tarteaucitronServices_mandatory .tarteaucitronLine button.tarteaucitronAllow {
  background: var(--cs-secondary-strong, #ef4b8f);
  color: var(--cs-pure-white, #ffffff);
}

/* Enregistrer : l'action qui valide, pleine. */
html body #tarteaucitronRoot #tarteaucitron button#tarteaucitronSaveButton {
  padding: 8px 16px;
  background: var(--cs-secondary-strong, #ef4b8f);
  color: var(--cs-pure-white, #ffffff);
}

html body #tarteaucitronRoot #tarteaucitron button#tarteaucitronSaveButton:hover {
  border-color: var(--cs-main-strong, #6b3689);
  background: var(--cs-main-strong, #6b3689);
}

html body #tarteaucitronRoot #tarteaucitron .tarteaucitronCheck,
html body #tarteaucitronRoot #tarteaucitron .tarteaucitronCross {
  display: none;
}

html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronLine.tarteaucitronIsAllowed,
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronLine.tarteaucitronIsDenied {
  border-color: var(--cs-secondary-strong, #ef4b8f);
}

html body #tarteaucitronRoot #tarteaucitron button:focus-visible {
  outline: 2px solid var(--cs-main-strong, #6b3689);
  outline-offset: 2px;
}