/*
 * Design system Tarteaucitron — Davindie
 * ---------------------------------------
 * Carte flottante (pas une barre plein écran), boutons Accepter/Refuser à poids visuel
 * STRICTEMENT identique (fond, contraste, taille, graisse) — la CNIL interdit un bouton
 * "Refuser" moins visible que "Accepter" (dark pattern). Ne jamais casser cette égalité
 * en adaptant les couleurs à la charte d'un client.
 *
 * DÉPLOIEMENT CLIENT : copier ce fichier tel quel, ne rien éditer dedans. Pour adapter
 * aux couleurs du client, définir ces variables dans le <style> de SA page (jamais ici) :
 *
 *   :root {
 *     --tac-bg: #0f2942;              couleur de fond de la carte
 *     --tac-text: #ffffff;            texte sur la carte (laisser si --tac-bg est foncé)
 *     --tac-button-text: #0f2942;     texte des boutons (= --tac-bg par défaut, inversion auto)
 *     --tac-radius: 16px;             rayon de la carte
 *     --tac-button-radius: 10px;      rayon des boutons (aligner sur les boutons du site)
 *     --tac-choice-width: 150px;      largeur d'Accepter/Refuser — AJUSTER si le client
 *       traduit les libellés par un texte plus long que "Tout accepter"/"Tout refuser",
 *       jamais laisser un texte plus long rendre un bouton plus large que l'autre.
 *   }
 *   [data-tac-position="right"] { } -- ajouter cet attribut sur <html> ou <body> si le
 *     site a déjà un widget flottant (chat, appel) en bas à GAUCHE — par défaut la carte
 *     se place en bas à GAUCHE, pour rester loin d'un widget d'appel/chat classique à
 *     droite. Vérifier qu'aucun widget du site n'occupe le coin choisi (voir fiche
 *     process "Tracking client (GTM + bandeau cookies)" pour la méthode de vérification).
 *
 * Voir 4 TOOLS/Systems/Process - Tracking client (GTM + bandeau cookies).md pour le
 * process de déploiement complet et les pièges déjà trouvés.
 */

:root {
  --tac-bg: #0f2942;
  --tac-text: #ffffff;
  --tac-button-bg: #ffffff;
  --tac-button-text: var(--tac-bg);
  --tac-link-color: #c3ceda;
  --tac-radius: 16px;
  --tac-button-radius: 10px;
  --tac-choice-width: 150px;
  --tac-icon-radius: 14px;
  --tac-shadow: 0 16px 40px rgba(10, 29, 48, .35);
  --tac-icon-shadow: 0 8px 20px rgba(10, 29, 48, .3);
  --tac-max-width: 380px;
  --tac-gap: 10px;
  --tac-offset: 16px;
}

/* Tarteaucitron réinitialise box-sizing à content-box sur ses propres éléments (son CSS
   source ne dépend pas du host page) — tout le padding/max-width ci-dessous suppose
   border-box. Sans cette ligne, la carte dépasse sa max-width réelle de 2× le padding
   (trouvé le 2026-10-01 : 424px rendus au lieu de 380px, chevauchement avec un widget
   flottant du site dès que les boutons tenaient sur une seule ligne). */
#tarteaucitronRoot,
#tarteaucitronRoot * {
  box-sizing: border-box !important;
}

/* --- Carte principale --- */
#tarteaucitronRoot #tarteaucitronAlertBig[style*="display: none"] {
  display: none !important;
}

#tarteaucitronRoot #tarteaucitronAlertBig {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: var(--tac-gap) !important;
  position: fixed !important;
  left: var(--tac-offset) !important;
  right: auto !important;
  bottom: var(--tac-offset) !important;
  top: auto !important;
  width: auto !important;
  max-width: var(--tac-max-width) !important;
  margin: 0 !important;
  padding: 22px !important;
  background: var(--tac-bg) !important;
  border-radius: var(--tac-radius) !important;
  box-shadow: var(--tac-shadow) !important;
}
[data-tac-position="right"] #tarteaucitronRoot #tarteaucitronAlertBig {
  left: auto !important;
  right: var(--tac-offset) !important;
}

#tarteaucitronRoot #tarteaucitronDisclaimerAlert {
  display: block !important;
  flex-basis: 100% !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--tac-text) !important;
  padding: 0 !important;
  margin: 0 0 4px !important;
}

/* --- Boutons Accepter / Refuser : même règle, poids identique, pas d'exception --- */
#tarteaucitronRoot .tarteaucitronCTAButton {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 44px !important;
  padding: 0 18px !important;
  border-radius: var(--tac-button-radius) !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  font-family: inherit !important;
  margin: 0 !important;
}
/* CNIL, recommandation cookies (section "apparence du bandeau") : "boutons [...] de
   même taille, offrant la même facilité de lecture, et mis en évidence de manière
   identique" — pas seulement même couleur/graisse. "Tout accepter" et "Tout refuser"
   n'ont pas le même nombre de caractères : sans largeur minimale commune, le texte plus
   long rend mécaniquement le bouton Accepter plus large que Refuser. --tac-choice-width
   fixe la même largeur aux deux, quel que soit le texte exact choisi par le client. */
#tarteaucitronRoot .tarteaucitronAllow,
#tarteaucitronRoot .tarteaucitronDeny {
  background: var(--tac-button-bg) !important;
  border: none !important;
  color: var(--tac-button-text) !important;
  min-width: var(--tac-choice-width) !important;
}

/* --- Liens tertiaires : "Personnaliser" (un choix, garde une taille lisible) et
   "Politique de confidentialité" (une référence, en petit, mention légale classique). */
#tarteaucitronRoot #tarteaucitronCloseAlert,
#tarteaucitronRoot #tarteaucitronPrivacyUrl {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-weight: 600 !important;
  color: var(--tac-link-color) !important;
  text-decoration: underline !important;
}
#tarteaucitronRoot #tarteaucitronCloseAlert {
  font-size: 12px !important;
}
#tarteaucitronRoot #tarteaucitronPrivacyUrl {
  font-size: 10px !important;
  font-weight: 400 !important;
  opacity: .8 !important;
}

@media (max-width: 480px) {
  #tarteaucitronRoot #tarteaucitronAlertBig {
    left: var(--tac-offset) !important;
    right: var(--tac-offset) !important;
    max-width: none !important;
    padding: 18px !important;
  }
  [data-tac-position="right"] #tarteaucitronRoot #tarteaucitronAlertBig {
    left: var(--tac-offset) !important;
  }
}

/* --- Icône de réouverture des choix, une fois un choix fait ---
   #tarteaucitronIcon n'est qu'un conteneur de positionnement (sans fond) ; l'élément
   visible est #tarteaucitronManager, qui embarque par défaut une image PNG RONDE propre
   à Tarteaucitron. Cette image est masquée et remplacée par une icône "préférences"
   dessinée en CSS pur (pas de fichier à gérer par client), dans un carré arrondi —
   jamais un rond, qui se lit comme un vieux widget de chat générique. */
#tarteaucitronRoot #tarteaucitronIcon {
  right: auto !important;
  left: var(--tac-offset) !important;
  bottom: var(--tac-offset) !important;
}
[data-tac-position="right"] #tarteaucitronRoot #tarteaucitronIcon {
  left: auto !important;
  right: var(--tac-offset) !important;
}
#tarteaucitronRoot #tarteaucitronManager {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  padding: 0 !important;
  border-radius: var(--tac-icon-radius) !important;
  background: var(--tac-bg) !important;
  box-shadow: var(--tac-icon-shadow) !important;
}
#tarteaucitronRoot #tarteaucitronManager img { display: none !important; }
#tarteaucitronRoot #tarteaucitronManager::before {
  content: '' !important;
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  background-color: var(--tac-text) !important;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3' y='5' width='18' height='2' rx='1'/><circle cx='8' cy='6' r='3'/><rect x='3' y='11' width='18' height='2' rx='1'/><circle cx='16' cy='12' r='3'/><rect x='3' y='17' width='18' height='2' rx='1'/><circle cx='10' cy='18' r='3'/></svg>") !important;
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3' y='5' width='18' height='2' rx='1'/><circle cx='8' cy='6' r='3'/><rect x='3' y='11' width='18' height='2' rx='1'/><circle cx='16' cy='12' r='3'/><rect x='3' y='17' width='18' height='2' rx='1'/><circle cx='10' cy='18' r='3'/></svg>") !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
}