/* Surcouche de style Aesthederme pour tarteaucitron.js — ne modifie jamais
   les fichiers vendor (tarteaucitron.min.css, etc.), chargée après eux.
   Réutilise les couleurs et la police du site (voir src/styles/global.css)
   plutôt que d'en introduire de nouvelles, et garde les coins nets propres
   à la charte au lieu des coins arrondis du thème par défaut de TAC. */

/* ---------- Bandeau initial (avant consentement) ----------
   Ancré en bas, pleine largeur, une seule ligne sur desktop et deux lignes
   compactes sur mobile plutôt qu'une carte empilée — nettement moins haut
   (~60px sur desktop, ~140px sur mobile contre 315px pour la carte). */
html body #tarteaucitronRoot.tarteaucitronSize-bottom #tarteaucitronAlertBig {
  /* Sans ça, le CSS vendor par défaut (content-box) ajoute le padding
     par-dessus width:100%, et la barre déborde de la largeur du padding
     (64px) au-delà de l'écran — vu sur mobile, texte tronqué à droite. */
  box-sizing: border-box !important;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  max-width: none !important;
  width: 100% !important;
  background: var(--color-cream) !important;
  border-radius: 0 !important;
  box-shadow: 0 -10px 30px -18px rgba(41, 41, 41, 0.3) !important;
  border: none !important;
  border-top: 1px solid var(--color-linen) !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px 18px !important;
  /* Marges latérales qui grandissent avec l'écran pour recentrer le
     contenu sur une largeur proche de max-w-6xl (celle du reste du
     site) : sans ça, sur un très grand écran, le texte à gauche et les
     boutons à droite se retrouvent séparés par un vide disproportionné. */
  padding: 12px max(44px, calc((100% - 1152px) / 2)) 12px max(20px, calc((100% - 1152px) / 2)) !important;
}

#tarteaucitronAlertBig #tarteaucitronDisclaimerAlert,
#tarteaucitronAlertBig #tarteaucitronDisclaimerAlert strong {
  color: var(--color-ink) !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

#tarteaucitronAlertBig #tarteaucitronDisclaimerAlert {
  /* Ni grow ni un flex-basis forcé : le texte garde sa largeur naturelle
     au lieu de s'étirer et de laisser un vide avant les boutons. */
  flex: 0 1 auto !important;
  margin: 0 !important;
}

/* Un seul écart flexible avant le groupe de boutons/liens (au lieu
   d'étirer le texte) : le texte reste à gauche à sa taille naturelle,
   les actions restent groupées et collées à droite. */
#tarteaucitronAlertBig .tarteaucitronCTAButton.tarteaucitronAllow {
  margin-left: auto !important;
}

#tarteaucitronAlertBig #tarteaucitronDisclaimerAlert strong {
  font-weight: 700 !important;
}

/* La croix de fermeture flotte en haut à droite du bandeau plutôt que de
   rester dans le flux — sinon elle retombe seule sur sa propre ligne une
   fois le texte et les boutons enroulés sur plusieurs lignes en mobile. */
#tarteaucitronAlertBig #tarteaucitronCloseCross {
  position: absolute !important;
  top: 8px !important;
  right: 12px !important;
}

/* Sur mobile, tout est centré plutôt qu'aligné à gauche (texte) / à droite
   (boutons) : le bandeau s'enroule de toute façon sur plusieurs lignes
   (texte, puis boutons, puis liens), autant que chacune soit centrée
   plutôt que collée à un bord. */
@media (max-width: 767px) {
  html body #tarteaucitronRoot.tarteaucitronSize-bottom #tarteaucitronAlertBig {
    justify-content: center !important;
    text-align: center !important;
    padding-top: 16px !important;
    padding-bottom: 14px !important;
  }
  #tarteaucitronAlertBig #tarteaucitronDisclaimerAlert {
    text-align: center !important;
    width: 100% !important;
  }
  /* L'écart flexible qui pousse les boutons à droite sur desktop n'a plus
     lieu d'être une fois le contenu centré. */
  #tarteaucitronAlertBig .tarteaucitronCTAButton.tarteaucitronAllow {
    margin-left: 0 !important;
  }
}

/* ---------- Boutons (popup + panneau détaillé) ---------- */
#tarteaucitronRoot .tarteaucitronCTAButton,
#tarteaucitronAlertBig #tarteaucitronCloseAlert,
#tarteaucitronAlertBig #tarteaucitronPrivacyUrl {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  border-radius: 0 !important;
  font-size: 11.5px !important;
  padding: 10px 16px !important;
  margin: 6px 6px 0 0 !important;
  border: 1px solid var(--color-ink) !important;
  transition:
    background-color 0.2s ease,
    color 0.2s ease !important;
}

/* Boutons plus compacts dans le bandeau (pas dans le panneau détaillé,
   qui garde la taille générale ci-dessus) : cohérent avec un bandeau fin
   plutôt qu'une carte.

   Piège rencontré : le CSS vendor force "Tout accepter" (#tarteaucitronPersonalize2)
   à 16px via une règle !important ciblée par ID (#tarteaucitronAlertBig
   #tarteaucitronPersonalize2), plus spécifique que .tarteaucitronCTAButton
   seul — "Tout refuser" n'est pas visé par cette règle vendor et recevait
   donc la bonne taille, d'où les deux boutons de tailles différentes.
   On cible maintenant chaque bouton par ID en plus de la classe pour
   gagner sans ambiguïté sur toutes les règles vendor, quel que soit
   l'élément qu'elles nomment explicitement. */
#tarteaucitronAlertBig .tarteaucitronCTAButton,
#tarteaucitronAlertBig #tarteaucitronPersonalize2,
#tarteaucitronAlertBig #tarteaucitronAllDenied2 {
  font-size: 10.5px !important;
  padding: 8px 14px !important;
  margin: 0 !important;
  min-width: 118px !important;
  text-align: center !important;
}

#tarteaucitronRoot .tarteaucitronCTAButton.tarteaucitronAllow,
#tarteaucitronRoot .tarteaucitronAllow#tarteaucitronPersonalize2 {
  background: var(--color-ink) !important;
  color: var(--color-cream) !important;
}
#tarteaucitronRoot .tarteaucitronCTAButton.tarteaucitronAllow:hover,
#tarteaucitronRoot .tarteaucitronAllow#tarteaucitronPersonalize2:hover {
  background: var(--color-cream) !important;
  color: var(--color-ink) !important;
}

#tarteaucitronRoot .tarteaucitronCTAButton.tarteaucitronDeny {
  background: var(--color-sand) !important;
  color: var(--color-ink) !important;
  border-color: var(--color-linen) !important;
}
#tarteaucitronRoot .tarteaucitronCTAButton.tarteaucitronDeny:hover {
  background: var(--color-linen) !important;
}

#tarteaucitronAlertBig #tarteaucitronCloseAlert,
#tarteaucitronAlertBig #tarteaucitronPrivacyUrl,
html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPrivacyUrl {
  /* "Politique de confidentialité" a le même piège de spécificité que les
     boutons ci-dessus : une règle vendor "html #tarteaucitronRoot
     #tarteaucitronPrivacyUrl { font-size: 16px!important }" gagnait sur la
     nôtre grâce à son sélecteur "html" en plus — "Personnaliser" n'est pas
     concerné par cette règle précise et affichait donc la bonne taille. La
     troisième variante ci-dessus (avec html body #tarteaucitronRoot en
     préfixe) gagne sans ambiguïté sur cette règle vendor. */
  background: transparent !important;
  color: var(--color-gold) !important;
  border: none !important;
  padding: 6px 4px !important;
  font-size: 11px !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--color-gold) 40%, transparent);
  text-underline-offset: 3px;
}

/* ---------- Panneau détaillé ("Personnaliser") ---------- */
#tarteaucitronRoot div#tarteaucitron {
  border-radius: 0 !important;
  overflow: hidden !important;
  box-shadow: 0 30px 80px -30px rgba(41, 41, 41, 0.45) !important;
}

#tarteaucitron .tarteaucitronBorder {
  background: var(--color-cream) !important;
  border: none !important;
}

#tarteaucitron #tarteaucitronDisclaimer,
#tarteaucitron #tarteaucitronDisclaimer a {
  color: var(--color-cocoa) !important;
  font-family: var(--font-sans) !important;
}

#tarteaucitronRoot .tarteaucitronH1,
#tarteaucitronRoot .tarteaucitronH2,
#tarteaucitron #tarteaucitronServices .tarteaucitronTitle,
span.tarteaucitronH3 {
  font-family: var(--font-display) !important;
  color: var(--color-ink) !important;
}

#tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronClosePanelCookie,
#tarteaucitron #tarteaucitronClosePanel {
  background: var(--color-ink) !important;
  color: var(--color-cream) !important;
  font-family: var(--font-display) !important;
  border-radius: 0 !important;
}

#tarteaucitronRoot .tarteaucitronBorder button.tarteaucitron-toggle-group {
  font-family: var(--font-display) !important;
  color: var(--color-ink) !important;
}

#tarteaucitronRoot .tarteaucitronAllow,
#tarteaucitronRoot .tarteaucitronDeny {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  border-radius: 0 !important;
  border: 1px solid var(--color-ink) !important;
}

#tarteaucitronRoot .tarteaucitronAllow {
  background: var(--color-ink) !important;
  color: var(--color-cream) !important;
}

#tarteaucitronRoot .tarteaucitronDeny {
  background: var(--color-sand) !important;
  color: var(--color-ink) !important;
  border-color: var(--color-linen) !important;
}

html body #tarteaucitronRoot button#tarteaucitronSaveButton {
  background: var(--color-gold) !important;
  color: var(--color-cream) !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  border-radius: 0 !important;
}

/* ---------- Placeholder Google Maps avant consentement (Contact.astro) ---------- */
.googlemapsembed {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-sand) !important;
}
/* .tac_activate porte le fond sombre par défaut de TAC (#333) : il faut
   le neutraliser en même temps que la couleur de texte, sinon le texte
   clair prévu pour ce fond sombre devient illisible une fois recoloré
   en gris sur fond resté noir (contraste 1,83:1 constaté en audit). */
.googlemapsembed .tac_activate {
  background: var(--color-sand) !important;
  color: var(--color-cocoa) !important;
}
.googlemapsembed .tac_float {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 13.5px;
}
.googlemapsembed .tac_float .tarteaucitronAllow {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-size: 11.5px !important;
  padding: 12px 20px !important;
  border: 1px solid var(--color-ink) !important;
  background: var(--color-ink) !important;
  color: var(--color-cream) !important;
  cursor: pointer;
}
.googlemapsembed .tac_float .tarteaucitronAllow:hover {
  background: var(--color-cream) !important;
  color: var(--color-ink) !important;
}
.googlemapsembed .tac_float .tarteaucitronCheck {
  display: none;
}