/* ═══════════════════════════════════════════════════════════════════════════
   Thème Previa pour tarteaucitron.

   Chargé AVANT la feuille de tarteaucitron (que son JS injecte à l'init) : les
   règles portent donc un !important et une spécificité `html body #…` calquée
   sur la sienne, pour reprendre la main sans dépendre de l'ordre d'insertion.

   Deux principes :

   1. Le site n'a pas de thème sombre — `darkMode: ["class"]` dans la config
      Tailwind, et la classe `.dark` n'est jamais posée. Ce fichier ne doit donc
      contenir AUCUN bloc `prefers-color-scheme: dark` : sur une machine réglée
      en sombre, le panneau devenait noir au milieu d'une page crème. D'où aussi
      le `color-scheme: light` forcé plus bas.

   2. Aucune règle ne touche `display` sur les conteneurs que le JS montre et
      cache par style inline (#tarteaucitronAlertBig, #tarteaucitron, #tarteaucitronBack) :
      un `display:flex!important` les rendrait impossibles à fermer.

   Couleurs reprises de src/index.css, écrites en dur : le panneau vit hors de
   l'arbre React et doit s'afficher même sans la feuille de l'app.
   ═══════════════════════════════════════════════════════════════════════════ */

#tarteaucitronRoot {
  --previa-terracotta: hsl(16 65% 45%);
  --previa-terracotta-fonce: hsl(16 65% 38%);
  --previa-or: hsl(38 60% 55%);
  --previa-creme: hsl(40 33% 97%);
  --previa-carte: hsl(40 30% 99%);
  --previa-encre: hsl(25 30% 12%);
  --previa-gris: hsl(25 10% 45%);
  --previa-bordure: hsl(35 18% 88%);
  --previa-sourdine: hsl(35 20% 93%);
  --previa-sauge: hsl(145 20% 42%);
  --previa-degrade: linear-gradient(135deg, hsl(16 65% 45%), hsl(38 60% 55%));
  --previa-ombre: 0 20px 44px -14px hsl(25 30% 12% / 0.26);

  /* Empêche le mode sombre du système de repeindre les contrôles natifs. */
  color-scheme: light !important;
}

html body #tarteaucitronRoot *,
html body #tarteaucitronRoot *::before,
html body #tarteaucitronRoot *::after {
  box-sizing: border-box !important;
  font-family: "DM Sans", ui-sans-serif, system-ui, -apple-system, sans-serif !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}

/* ═══ Bandeau ══════════════════════════════════════════════════════════ */

html body #tarteaucitronRoot #tarteaucitronAlertBig {
  background: var(--previa-degrade) top left / 100% 4px no-repeat, var(--previa-carte) !important;
  color: var(--previa-encre) !important;
  border: 1px solid var(--previa-bordure) !important;
  border-radius: 20px !important;
  box-shadow: var(--previa-ombre) !important;
  width: auto !important;
  max-width: 880px !important;
  left: 16px !important;
  right: 16px !important;
  bottom: 16px !important;
  margin: 0 auto !important;
  padding: 24px 26px 20px !important;
  text-align: left !important;
  box-sizing: border-box !important;
  font-size: 15px !important;
  overflow: hidden !important;
}

html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronDisclaimerAlert {
  display: block !important;
  color: var(--previa-gris) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  text-align: left !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  max-width: 68ch !important;
}

/* Le <strong> en tête de alertBigPrivacy tient lieu de titre du bandeau. */
html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronDisclaimerAlert strong {
  display: block !important;
  font-family: "Playfair Display", ui-serif, Georgia, serif !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  color: var(--previa-encre) !important;
  margin: 0 0 8px !important;
  line-height: 1.25 !important;
}

/* ─── Boutons du bandeau ─── */

html body #tarteaucitronRoot #tarteaucitronAlertBig button {
  display: inline-block !important;
  vertical-align: middle !important;
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  padding: 12px 22px !important;
  margin: 0 10px 8px 0 !important;
  cursor: pointer !important;
  transition: background-color 0.18s ease, box-shadow 0.2s ease, transform 0.12s ease !important;
}

html body #tarteaucitronRoot #tarteaucitronAlertBig button:active {
  transform: scale(0.98) !important;
}

html body #tarteaucitronRoot #tarteaucitronAlertBig button:focus-visible {
  outline: 2px solid var(--previa-terracotta) !important;
  outline-offset: 2px !important;
}

/* Accepter — dégradé chaud */
html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPersonalize2 {
  background: var(--previa-degrade) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px -8px hsl(16 65% 45% / 0.6) !important;
}

/* Refuser — même taille, même poids typographique, même hauteur de clic que
   « Tout accepter ». La CNIL demande que refuser soit aussi simple qu'accepter :
   ce bouton ne doit jamais devenir un lien discret. */
html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronAllDenied2 {
  background: var(--previa-sourdine) !important;
  color: var(--previa-encre) !important;
  border-color: var(--previa-bordure) !important;
}

html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronAllDenied2:hover {
  background: hsl(35 18% 88%) !important;
}

/* Personnaliser — action tertiaire, contour seul */
html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronCloseAlert {
  background: transparent !important;
  color: var(--previa-encre) !important;
  border-color: var(--previa-bordure) !important;
  text-decoration: none !important;
}

html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronCloseAlert:hover {
  border-color: var(--previa-terracotta) !important;
  color: var(--previa-terracotta) !important;
}

/* Politique de confidentialité — lien, pas bouton */
html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPrivacyUrl {
  background: transparent !important;
  border: none !important;
  color: var(--previa-gris) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 12px 4px !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPrivacyUrl:hover {
  color: var(--previa-terracotta) !important;
}

/* Barre de décompte : sans objet en highPrivacy (aucune acceptation implicite). */
html body #tarteaucitronRoot #tarteaucitronPercentage {
  display: none !important;
}

/* ═══ Panneau de réglages ══════════════════════════════════════════════ */

html body #tarteaucitronRoot #tarteaucitronBack {
  background: hsl(25 30% 12%) !important;
  opacity: 0.5 !important;
}

html body #tarteaucitronRoot #tarteaucitron {
  width: min(820px, calc(100vw - 32px)) !important;
  max-width: none !important;
  max-height: min(84vh, 900px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  top: 8% !important;
  background: var(--previa-creme) !important;
  border: 1px solid var(--previa-bordure) !important;
  border-radius: 20px !important;
  box-shadow: var(--previa-ombre) !important;
  overflow: hidden !important;
  padding: 0 !important;
}

html body #tarteaucitronRoot #tarteaucitronClosePanel {
  background: var(--previa-encre) !important;
  color: var(--previa-creme) !important;
  border: none !important;
  border-radius: 0 20px 0 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 10px 18px !important;
  cursor: pointer !important;
  transition: background-color 0.18s ease !important;
}

html body #tarteaucitronRoot #tarteaucitronClosePanel:hover {
  background: var(--previa-terracotta) !important;
}

/* ─── En-tête du panneau ─── */

html body #tarteaucitronRoot #tarteaucitronServices .tarteaucitronMainLine {
  background: var(--previa-carte) !important;
  border: none !important;
  border-bottom: 1px solid var(--previa-bordure) !important;
  border-left: none !important;
  padding: 26px 28px 22px !important;
  margin: 0 !important;
}

html body #tarteaucitronRoot #tarteaucitronServices .tarteaucitronMainLine .tarteaucitronH1 {
  display: block !important;
  font-family: "Playfair Display", ui-serif, Georgia, serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--previa-encre) !important;
  margin: 0 0 10px !important;
  text-align: left !important;
}

html body #tarteaucitronRoot #tarteaucitronInfo {
  background: transparent !important;
  color: var(--previa-gris) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  text-align: left !important;
  padding: 0 !important;
  max-width: 70ch !important;
}

html body #tarteaucitronRoot #tarteaucitronInfo p {
  margin: 0 0 6px !important;
  color: var(--previa-gris) !important;
}

html body #tarteaucitronRoot #tarteaucitronPrivacyUrlDialog {
  background: transparent !important;
  border: none !important;
  color: var(--previa-terracotta) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 0 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  cursor: pointer !important;
}

html body #tarteaucitronRoot .tarteaucitronMainLine .tarteaucitronName .tarteaucitronH2 {
  display: block !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--previa-gris) !important;
  margin: 18px 0 10px !important;
  text-align: left !important;
}

/* ─── Corps : catégories et services ─── */

html body #tarteaucitronRoot .tarteaucitronBorder {
  background: var(--previa-creme) !important;
  border: none !important;
  overflow-y: auto !important;
}

html body #tarteaucitronRoot #tarteaucitronServices .tarteaucitronTitle {
  background: var(--previa-sourdine) !important;
  border: none !important;
  border-radius: 12px !important;
  margin: 14px 20px 0 !important;
  padding: 0 !important;
  display: block !important;
}

html body #tarteaucitronRoot #tarteaucitronServices .tarteaucitronTitle button {
  background: transparent !important;
  color: var(--previa-encre) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-align: left !important;
  width: 100% !important;
  padding: 13px 16px !important;
  border: none !important;
  cursor: pointer !important;
}

html body #tarteaucitronRoot .tarteaucitronDetails {
  background: var(--previa-carte) !important;
  color: var(--previa-gris) !important;
  border: 1px solid var(--previa-bordure) !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  margin: 8px 20px 0 !important;
  padding: 12px 16px !important;
}

html body #tarteaucitronRoot .tarteaucitronBorder ul li .tarteaucitronLine,
html body #tarteaucitronRoot li.tarteaucitronLine {
  background: var(--previa-carte) !important;
  border: 1px solid var(--previa-bordure) !important;
  border-left: 4px solid var(--previa-bordure) !important;
  border-radius: 12px !important;
  margin: 10px 20px !important;
  padding: 16px 18px !important;
  list-style: none !important;
}

html body #tarteaucitronRoot li.tarteaucitronLine.tarteaucitronIsAllowed {
  border-left-color: var(--previa-sauge) !important;
}

html body #tarteaucitronRoot li.tarteaucitronLine.tarteaucitronIsDenied {
  border-left-color: var(--previa-terracotta) !important;
}

html body #tarteaucitronRoot .tarteaucitronLine .tarteaucitronName,
html body #tarteaucitronRoot .tarteaucitronLine .tarteaucitronName .tarteaucitronH3 {
  color: var(--previa-encre) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  text-align: left !important;
}

html body #tarteaucitronRoot .tarteaucitronLine .tarteaucitronListCookies,
html body #tarteaucitronRoot .tarteaucitronServiceDescription {
  color: var(--previa-gris) !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

/* ─── Boutons autoriser / interdire ─── */

html body #tarteaucitronRoot .tarteaucitronAsk button,
html body #tarteaucitronRoot .tarteaucitronAllow,
html body #tarteaucitronRoot .tarteaucitronDeny {
  background: var(--previa-sourdine) !important;
  color: var(--previa-gris) !important;
  border: 1px solid var(--previa-bordure) !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 9px 16px !important;
  margin: 6px 8px 0 0 !important;
  opacity: 1 !important;
  cursor: pointer !important;
  transition: background-color 0.18s ease, color 0.18s ease !important;
}

html body #tarteaucitronRoot .tarteaucitronAllow:hover,
html body #tarteaucitronRoot .tarteaucitronDeny:hover {
  background: hsl(35 18% 88%) !important;
}

html body #tarteaucitronRoot .tarteaucitronIsSelected.tarteaucitronAllow {
  background: var(--previa-sauge) !important;
  border-color: var(--previa-sauge) !important;
  color: #fff !important;
}

html body #tarteaucitronRoot .tarteaucitronIsSelected.tarteaucitronDeny {
  background: var(--previa-terracotta) !important;
  border-color: var(--previa-terracotta) !important;
  color: #fff !important;
}

/* En-tête du panneau : les deux boutons globaux sont les actions principales. */
html body #tarteaucitronRoot .tarteaucitronMainLine #tarteaucitronAllAllowed {
  background: var(--previa-degrade) !important;
  border-color: transparent !important;
  color: #fff !important;
  padding: 11px 20px !important;
}

html body #tarteaucitronRoot .tarteaucitronMainLine #tarteaucitronAllDenied {
  background: var(--previa-carte) !important;
  border-color: var(--previa-bordure) !important;
  color: var(--previa-encre) !important;
  padding: 11px 20px !important;
}

/* Pastilles d'état */
html body #tarteaucitronRoot .tarteaucitronDotGreen { background-color: var(--previa-sauge) !important; }
html body #tarteaucitronRoot .tarteaucitronDotYellow { background-color: var(--previa-or) !important; }
html body #tarteaucitronRoot .tarteaucitronDotRed { background-color: var(--previa-terracotta) !important; }

/* ─── Pied du panneau ─── */

html body #tarteaucitronRoot #tarteaucitronSave {
  background: var(--previa-carte) !important;
  border-top: 1px solid var(--previa-bordure) !important;
  padding: 16px 20px !important;
  text-align: right !important;
}

html body #tarteaucitronRoot #tarteaucitronSaveButton {
  background: var(--previa-degrade) !important;
  border-color: transparent !important;
  color: #fff !important;
  padding: 12px 26px !important;
  margin: 0 !important;
  box-shadow: 0 8px 20px -8px hsl(16 65% 45% / 0.6) !important;
}

/* ═══ Pastille de rappel ═══════════════════════════════════════════════ */

html body #tarteaucitronRoot #tarteaucitronIcon #tarteaucitronManager {
  background: var(--previa-carte) !important;
  color: var(--previa-encre) !important;
  border: 1px solid var(--previa-bordure) !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 20px -10px hsl(25 30% 12% / 0.35) !important;
  padding: 8px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

html body #tarteaucitronRoot #tarteaucitronIcon #tarteaucitronManager:hover {
  border-color: var(--previa-terracotta) !important;
  color: var(--previa-terracotta) !important;
}

html body #tarteaucitronRoot #tarteaucitronIcon #tarteaucitronManager img {
  width: 16px !important;
  height: 16px !important;
  vertical-align: -3px !important;
  margin-right: 6px !important;
}

/* ═══ Mobile ═══════════════════════════════════════════════════════════ */

@media screen and (max-width: 767px) {
  html body #tarteaucitronRoot #tarteaucitronAlertBig {
    left: 10px !important;
    right: 10px !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    padding: 20px 18px 14px !important;
    border-radius: 18px !important;
    max-height: 76vh !important;
    overflow-y: auto !important;
  }

  html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronDisclaimerAlert strong {
    font-size: 17px !important;
  }

  html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronDisclaimerAlert {
    font-size: 14px !important;
    margin-bottom: 16px !important;
  }

  /* Pleine largeur : au pouce, une rangée de boutons de 14 px est inutilisable. */
  html body #tarteaucitronRoot #tarteaucitronAlertBig button {
    display: block !important;
    width: 100% !important;
    margin: 0 0 8px !important;
    padding: 14px 16px !important;
    text-align: center !important;
  }

  html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPrivacyUrl {
    padding: 6px 0 0 !important;
  }

  html body #tarteaucitronRoot #tarteaucitron {
    width: calc(100vw - 20px) !important;
    top: 4% !important;
    max-height: 90vh !important;
  }

  html body #tarteaucitronRoot #tarteaucitronServices .tarteaucitronTitle,
  html body #tarteaucitronRoot li.tarteaucitronLine,
  html body #tarteaucitronRoot .tarteaucitronDetails {
    margin-left: 14px !important;
    margin-right: 14px !important;
  }

  html body #tarteaucitronRoot .tarteaucitronMainLine {
    padding: 22px 18px 18px !important;
  }
}

/* ═══ Correctifs de structure du panneau ═══════════════════════════════
   Constatés au rendu : le bouton « Fermer » débordait du coin arrondi, des
   filets parasites traversaient l'en-tête, et surtout le pied « Enregistrer »
   sortait de l'écran — le panneau était donc inutilisable jusqu'au bout.

   La mise en colonne est portée par `body.tarteaucitron-modal-open`, la classe
   que tarteaucitron pose sur <body> à l'ouverture : elle n'existe que panneau
   ouvert, donc un `display:flex` ici ne peut jamais empêcher sa fermeture (le
   JS pilote #tarteaucitron par style inline).
   ═══════════════════════════════════════════════════════════════════════ */

html body.tarteaucitron-modal-open #tarteaucitronRoot #tarteaucitron {
  display: flex !important;
  flex-direction: column !important;
}

/* En-tête et pied fixes, corps défilant : « Enregistrer » reste atteignable. */
html body #tarteaucitronRoot #tarteaucitronServices .tarteaucitronMainLine {
  flex: 0 0 auto !important;
}

html body #tarteaucitronRoot #tarteaucitronServices {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
}

html body #tarteaucitronRoot .tarteaucitronBorder {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  padding-bottom: 8px !important;
}

html body #tarteaucitronRoot #tarteaucitronSave {
  flex: 0 0 auto !important;
}

/* Bouton Fermer : ancré dans le coin du panneau, sans déborder de l'arrondi. */
html body #tarteaucitronRoot button#tarteaucitronClosePanel {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  width: auto !important;
  border-radius: 0 20px 0 14px !important;
  margin: 0 !important;
  z-index: 2 !important;
}

/* Filets parasites de l'en-tête. */
html body #tarteaucitronRoot .tarteaucitronH1,
html body #tarteaucitronRoot #tarteaucitronInfo,
html body #tarteaucitronRoot #tarteaucitronInfo p,
html body #tarteaucitronRoot #tarteaucitronServices .tarteaucitronMainLine .tarteaucitronName {
  border: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

/* Le lien de politique reste un lien de la largeur de son texte. */
html body #tarteaucitronRoot #tarteaucitronPrivacyUrlDialog {
  display: inline-block !important;
  width: auto !important;
  margin: 10px 0 0 !important;
  border: none !important;
}

/* L'en-tête doit pouvoir porter le bouton Fermer en absolu. */
html body #tarteaucitronRoot #tarteaucitron {
  position: fixed !important;
}

/* Fermer : à ras du coin, et anneau de focus propre — tarteaucitron met le
   focus dessus à l'ouverture, le pointillé du navigateur ressortait comme un
   défaut d'affichage. */
html body #tarteaucitronRoot button#tarteaucitronClosePanel:focus {
  outline: none !important;
}

html body #tarteaucitronRoot button#tarteaucitronClosePanel:focus-visible {
  outline: 2px solid var(--previa-or) !important;
  outline-offset: -4px !important;
}

/* L'en-tête laisse la place au bouton pour qu'aucun texte ne passe dessous. */
html body #tarteaucitronRoot #tarteaucitronServices .tarteaucitronMainLine {
  padding-right: 110px !important;
}

@media screen and (max-width: 767px) {
  html body #tarteaucitronRoot #tarteaucitronServices .tarteaucitronMainLine {
    padding-right: 96px !important;
  }
}

/* Sur mobile, on ne centre plus par `left:50% + translateX(-50%)` avec une
   largeur en 100vw : le calcul dépend de la barre de défilement et débordait à
   droite. Deux ancrages gauche/droite et une largeur automatique ne peuvent pas
   se tromper. */
@media screen and (max-width: 767px) {
  html body #tarteaucitronRoot #tarteaucitron {
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    margin: 0 !important;
  }

  /* Aucune liste interne ne doit dépasser du panneau. */
  html body #tarteaucitronRoot #tarteaucitron ul,
  html body #tarteaucitronRoot #tarteaucitron li,
  html body #tarteaucitronRoot .tarteaucitronBorder {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Les deux boutons globaux passent sous le titre plutôt qu'à côté. */
  html body #tarteaucitronRoot .tarteaucitronMainLine .tarteaucitronAsk {
    display: block !important;
    float: none !important;
    margin: 12px 0 0 !important;
    text-align: left !important;
  }
}

/* Le bouton Fermer doit rester visible et cliquable sur mobile : sans lui, la
   seule sortie est le fond ou « Enregistrer », ce qui n'est pas évident. */
@media screen and (max-width: 767px) {
  html body #tarteaucitronRoot button#tarteaucitronClosePanel {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    border-radius: 0 18px 0 14px !important;
    z-index: 3 !important;
  }
}

/* Les listes du panneau gardaient le `padding-inline-start: 40px` par défaut du
   navigateur : chaque ligne de service était décalée de 40 px vers la droite et
   sortait du panneau, texte tronqué et bouton « Enregistrer » rogné — très
   visible sur mobile, discret mais présent sur grand écran. */
html body #tarteaucitronRoot #tarteaucitron ul,
html body #tarteaucitronRoot #tarteaucitron ol {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

html body #tarteaucitronRoot #tarteaucitron li {
  list-style: none !important;
}