/* ═══════════════════════════════════════════════════════
   Skillearn — Tarte au Citron override v4
   Design complet : bandeau + icone + panel modal DA Skillearn
   ═══════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────
   1. BANDEAU PRINCIPAL (carte blanche translucide)
   ────────────────────────────────────────────────────── */
#tarteaucitronRoot div#tarteaucitronAlertBig {
  position: fixed !important;
  bottom: 20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  max-width: 460px !important;
  width: calc(100% - 32px) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(22px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%) !important;
  color: #12013a !important;
  border-radius: 14px !important;
  border: 1px solid rgba(154, 103, 254, 0.2) !important;
  box-shadow: 0 12px 36px rgba(14, 2, 32, 0.18), 0 2px 8px rgba(154, 103, 254, 0.1) !important;
  font-family: 'Montserrat', -apple-system, sans-serif !important;
  padding: 14px 16px !important;
  text-align: left !important;
  z-index: 2147483645 !important;
  animation: tac-slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
@keyframes tac-slideUp {
  from { opacity: 0; transform: translate(-50%, 24px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

#tarteaucitronRoot #tarteaucitronDisclaimerAlert {
  display: block !important;
  font-size: 0.78rem !important;
  line-height: 1.45 !important;
  color: #3d2c6e !important;
  font-weight: 500 !important;
  margin: 0 0 10px 0 !important;
  text-align: left !important;
}
#tarteaucitronRoot #tarteaucitronDisclaimerAlert strong { color: #12013a !important; font-weight: 700 !important; }
#tarteaucitronRoot #tarteaucitronDisclaimerAlert a {
  color: #9a67fe !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  font-weight: 600 !important;
}

/* Boutons base */
#tarteaucitronRoot #tarteaucitronAlertBig .tarteaucitronCTAButton,
#tarteaucitronRoot #tarteaucitronAlertBig button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  padding: 8px 16px !important;
  border-radius: 50px !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
  white-space: nowrap !important;
  letter-spacing: 0.01em !important;
  margin: 0 5px 0 0 !important;
  line-height: 1.2 !important;
}

/* "Accepter" gradient DA */
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPersonalize,
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronAllAllowed,
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronAllAllowed2 {
  background: linear-gradient(135deg, #9a67fe 0%, #23a9ff 55%, #00fac2 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(154, 103, 254, 0.35) !important;
}
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPersonalize:hover,
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronAllAllowed:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(154, 103, 254, 0.5) !important;
}

/* "Refuser" outline violet */
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronAllDenied,
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronAllDenied2,
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronCloseAlert {
  background: #ffffff !important;
  color: #9a67fe !important;
  border: 1.5px solid rgba(154, 103, 254, 0.4) !important;
}
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronAllDenied:hover {
  background: rgba(154, 103, 254, 0.08) !important;
  border-color: #9a67fe !important;
  transform: translateY(-1px) !important;
}

/* "Personnaliser" link */
#tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronCustomize {
  background: transparent !important;
  color: #9a67fe !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  padding: 8px 10px !important;
}

/* ──────────────────────────────────────────────────────
   2. ICONE FLOTTANTE COOKIE (bas-droite)
   - Petit, propre, 1 seul element visible
   ────────────────────────────────────────────────────── */

/* Reset complet : on cache l'image par defaut.
   Icone positionnee a GAUCHE et SURELEVEE pour ne pas chevaucher
   le sticky CTA de bas de page */
#tarteaucitronIcon {
  position: fixed !important;
  bottom: 80px !important;
  left: 16px !important;
  right: auto !important;
  z-index: 2147483644 !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  opacity: 0.85 !important;
  transition: all 0.2s !important;
}
#tarteaucitronIcon:hover { opacity: 1 !important; transform: scale(1.08) !important; }

/* Cacher l'image par défaut (jaune) de Tarte au Citron */
#tarteaucitronIcon img,
#tarteaucitronIcon svg {
  display: none !important;
}

/* Bouton unique au centre — Skillearn style avec icone CSS pure */
#tarteaucitronIcon button#tarteaucitronManager {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  background: linear-gradient(135deg, #9a67fe 0%, #23a9ff 100%) !important;
  border: none !important;
  border-radius: 50% !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(154, 103, 254, 0.35) !important;
  font-size: 0 !important; /* hide any default text */
  color: transparent !important;
  position: relative !important;
}

/* Icone cookie en pure CSS via pseudo */
#tarteaucitronIcon button#tarteaucitronManager::before {
  content: "" !important;
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  background-color: #ffffff !important;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 17a4 4 0 0 1-4 4H5a3 3 0 0 1-3-3V8a4 4 0 0 1 4-4h3a4 4 0 0 1 4-4'/><circle cx='8' cy='14' r='1' fill='currentColor'/><circle cx='14' cy='17' r='1' fill='currentColor'/><circle cx='17' cy='10' r='1' fill='currentColor'/><circle cx='11' cy='8' r='1' fill='currentColor'/></svg>") !important;
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'><circle cx='12' cy='12' r='10'/><circle cx='8.5' cy='10.5' r='1' fill='currentColor'/><circle cx='15' cy='9.5' r='1' fill='currentColor'/><circle cx='14' cy='14.5' r='1' fill='currentColor'/><circle cx='9.5' cy='14.5' r='1' fill='currentColor'/></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;
}

/* Tooltip "Gérer mes cookies" optionnel via title attr */
#tarteaucitronIcon button#tarteaucitronManager span {
  display: none !important;
}

/* Mobile */
@media (max-width: 600px) {
  #tarteaucitronRoot div#tarteaucitronAlertBig {
    bottom: 12px !important;
    left: 12px !important;
    right: 12px !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    padding: 12px 14px !important;
    animation: tac-slideUpMob 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
  @keyframes tac-slideUpMob {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  #tarteaucitronIcon { bottom: 76px !important; left: 12px !important; right: auto !important; }
}

/* ══════════════════════════════════════════════════════
   3. PANEL "Gérer mes cookies" (modal complet)
   ══════════════════════════════════════════════════════ */

/* Overlay sombre derrière le modal */
#tarteaucitronRoot::before,
#tarteaucitronRoot.tarteaucitronBeforeVisible::before {
  background: rgba(14, 2, 32, 0.6) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* Container modal */
#tarteaucitron {
  font-family: 'Montserrat', sans-serif !important;
  border-radius: 20px !important;
  border: 1px solid rgba(154, 103, 254, 0.15) !important;
  box-shadow: 0 32px 80px rgba(14, 2, 32, 0.45) !important;
  background: #ffffff !important;
  overflow: hidden !important;
  max-width: 720px !important;
}

/* Bandeau d'en-tete du panel */
#tarteaucitronServices_mandatory,
#tarteaucitronInfo,
#tarteaucitron .tarteaucitronH1,
#tarteaucitronRoot .tarteaucitronH1 {
  font-family: 'Montserrat', sans-serif !important;
  color: #12013a !important;
  font-weight: 800 !important;
}

/* Titre principal du panel */
#tarteaucitron .tarteaucitronH1 {
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  padding: 26px 28px 14px !important;
  background: linear-gradient(135deg, rgba(154,103,254,0.1), rgba(35,169,255,0.06), rgba(0,250,194,0.04)) !important;
  border-bottom: 1px solid rgba(154,103,254,0.1) !important;
  margin: 0 !important;
  position: relative !important;
}
/* Petite barre gradient sous le titre */
#tarteaucitron .tarteaucitronH1::after {
  content: '' !important;
  display: block !important;
  width: 40px !important;
  height: 3px !important;
  background: linear-gradient(90deg, #9a67fe, #23a9ff, #00fac2) !important;
  border-radius: 2px !important;
  margin-top: 8px !important;
}

/* Bouton FERMER : croix visible coin haut droite */
#tarteaucitron #tarteaucitronClosePanel,
button#tarteaucitronClosePanel {
  background: rgba(18, 1, 58, 0.06) !important;
  color: transparent !important;            /* hide texte "X" par defaut */
  font-size: 0 !important;                  /* hide texte natif */
  border: 1px solid rgba(154, 103, 254, 0.2) !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: all 0.18s !important;
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  box-shadow: 0 2px 6px rgba(14, 2, 32, 0.06) !important;
  font-family: 'Montserrat', sans-serif !important;
}

/* La VRAIE croix : SVG en mask pour controle parfait */
#tarteaucitron #tarteaucitronClosePanel::before,
button#tarteaucitronClosePanel::before {
  content: "" !important;
  display: block !important;
  width: 14px !important;
  height: 14px !important;
  background-color: #12013a !important;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='currentColor' stroke-width='2.4' stroke-linecap='round'><line x1='4' y1='4' x2='16' y2='16'/><line x1='16' y1='4' x2='4' y2='16'/></svg>") !important;
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='currentColor' stroke-width='2.4' stroke-linecap='round'><line x1='4' y1='4' x2='16' y2='16'/><line x1='16' y1='4' x2='4' y2='16'/></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;
  transition: background-color 0.18s !important;
}

button#tarteaucitronClosePanel:hover {
  background: linear-gradient(135deg, #9a67fe, #23a9ff) !important;
  border-color: transparent !important;
  box-shadow: 0 4px 12px rgba(154, 103, 254, 0.35) !important;
  transform: scale(1.05) !important;
}
button#tarteaucitronClosePanel:hover::before {
  background-color: #ffffff !important;
}

/* Texte intro du panel */
#tarteaucitron #tarteaucitronInfo {
  background: #ffffff !important;
  color: #3d2c6e !important;
  padding: 16px 28px !important;
  font-size: 0.86rem !important;
  line-height: 1.6 !important;
  border-bottom: 1px solid rgba(154,103,254,0.08) !important;
}
#tarteaucitron #tarteaucitronInfo a {
  color: #9a67fe !important;
  text-decoration: underline !important;
  font-weight: 600 !important;
}

/* Liste des services */
#tarteaucitronServices,
div#tarteaucitronServices {
  background: #ffffff !important;
  padding: 16px 28px !important;
  max-height: 60vh !important;
  overflow-y: auto !important;
}

/* Lignes de chaque service */
#tarteaucitron #tarteaucitronServices .tarteaucitronLine,
#tarteaucitron .tarteaucitronLine {
  background: #fafaff !important;
  border: 1px solid rgba(154, 103, 254, 0.1) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  margin: 10px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  transition: all 0.2s !important;
}
#tarteaucitron #tarteaucitronServices .tarteaucitronLine:hover {
  border-color: rgba(154, 103, 254, 0.25) !important;
  background: #fff !important;
}
#tarteaucitron #tarteaucitronServices .tarteaucitronLine.tarteaucitronIsAllowed {
  background: linear-gradient(135deg, rgba(154,103,254,0.04), rgba(35,169,255,0.02)) !important;
  border-color: rgba(154, 103, 254, 0.2) !important;
}

/* Titres categories services (e.g., "Analytics", "Marketing") */
#tarteaucitron #tarteaucitronServices .tarteaucitronTitle,
#tarteaucitron .tarteaucitronTitle {
  background: linear-gradient(135deg, #9a67fe, #23a9ff) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  margin: 16px 0 8px !important;
  text-align: left !important;
  border: none !important;
}
#tarteaucitron .tarteaucitronTitle button {
  background: transparent !important;
  color: #ffffff !important;
  border: none !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
}

/* Nom du service */
#tarteaucitron .tarteaucitronName,
#tarteaucitron #tarteaucitronServices .tarteaucitronName {
  flex: 1 !important;
  min-width: 200px !important;
}
#tarteaucitron .tarteaucitronName .tarteaucitronH2,
#tarteaucitron .tarteaucitronH2 {
  color: #12013a !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  margin: 0 0 4px !important;
  font-family: 'Montserrat', sans-serif !important;
}
#tarteaucitron .tarteaucitronName .tarteaucitronH3,
#tarteaucitron .tarteaucitronH3 {
  color: #7b6ca0 !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  margin: 0 !important;
  font-family: 'Montserrat', sans-serif !important;
}
#tarteaucitron .tarteaucitronName a {
  color: #9a67fe !important;
  font-size: 0.74rem !important;
  text-decoration: underline !important;
}

/* Boutons Allow / Deny du service */
#tarteaucitron .tarteaucitronAsk {
  display: flex !important;
  gap: 6px !important;
}

/* État par défaut : "Autoriser" pré-sélectionné visuellement (gradient DA)
   "Interdire" reste outline gris  */
#tarteaucitronRoot .tarteaucitronAllow,
#tarteaucitron .tarteaucitronAllow {
  background: linear-gradient(135deg, #9a67fe, #23a9ff) !important;
  color: #ffffff !important;
  border-radius: 50px !important;
  border: none !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.72rem !important;
  padding: 6px 14px !important;
  cursor: pointer !important;
  transition: all 0.18s !important;
  box-shadow: 0 2px 8px rgba(154, 103, 254, 0.3) !important;
  opacity: 0.96 !important;
}
#tarteaucitronRoot .tarteaucitronDeny,
#tarteaucitron .tarteaucitronDeny {
  background: #ffffff !important;
  color: rgba(18, 1, 58, 0.55) !important;
  border-radius: 50px !important;
  border: 1.5px solid rgba(18, 1, 58, 0.15) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.72rem !important;
  padding: 6px 14px !important;
  cursor: pointer !important;
  transition: all 0.18s !important;
}
#tarteaucitron .tarteaucitronAllow:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(154, 103, 254, 0.4) !important;
  opacity: 1 !important;
}
#tarteaucitron .tarteaucitronDeny:hover {
  border-color: rgba(18, 1, 58, 0.3) !important;
  color: #12013a !important;
}

/* État ACTIVÉ : badge gradient brillant */
#tarteaucitron .tarteaucitronIsAllowed .tarteaucitronAllow,
.tarteaucitronIsAllowed .tarteaucitronAllow,
#tarteaucitron #tarteaucitronServices .tarteaucitronLine.tarteaucitronIsAllowed .tarteaucitronAllow,
#tarteaucitron #tarteaucitronServices #tarteaucitronServices_mandatory .tarteaucitronLine button.tarteaucitronAllow {
  background: linear-gradient(135deg, #9a67fe, #23a9ff, #00fac2) !important;
  color: #ffffff !important;
  border: none !important;
  opacity: 1 !important;
  box-shadow: 0 4px 14px rgba(154, 103, 254, 0.45) !important;
}

/* État REFUSÉ : interdire actif (dark ink) */
#tarteaucitron .tarteaucitronIsDenied .tarteaucitronDeny,
.tarteaucitronIsDenied .tarteaucitronDeny,
#tarteaucitron #tarteaucitronServices .tarteaucitronLine.tarteaucitronIsDenied .tarteaucitronDeny {
  background: #12013a !important;
  color: #ffffff !important;
  border: none !important;
}

/* Quand service refusé : autoriser redevient outline (plus pré-sélectionné) */
#tarteaucitron .tarteaucitronIsDenied .tarteaucitronAllow,
#tarteaucitron #tarteaucitronServices .tarteaucitronLine.tarteaucitronIsDenied .tarteaucitronAllow {
  background: #ffffff !important;
  color: rgba(18, 1, 58, 0.55) !important;
  border: 1.5px solid rgba(154, 103, 254, 0.25) !important;
  box-shadow: none !important;
  opacity: 0.85 !important;
}

/* Boutons en-tete "Tout accepter / Tout refuser" */
#tarteaucitron #tarteaucitronAllAllowed,
#tarteaucitron #tarteaucitronAllAllowed2,
#tarteaucitron #tarteaucitronAllDenied,
#tarteaucitron #tarteaucitronAllDenied2 {
  background: #ffffff !important;
  color: #9a67fe !important;
  border: 1.5px solid rgba(154, 103, 254, 0.35) !important;
  border-radius: 50px !important;
  padding: 8px 18px !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
}
#tarteaucitron #tarteaucitronAllAllowed.tarteaucitronIsSelected {
  background: linear-gradient(135deg, #9a67fe, #23a9ff) !important;
  color: #ffffff !important;
  border: none !important;
}
#tarteaucitron #tarteaucitronAllDenied.tarteaucitronIsSelected,
#tarteaucitron #tarteaucitronAllDenied2.tarteaucitronIsSelected {
  background: #12013a !important;
  color: #ffffff !important;
  border: none !important;
}

/* Container Sauvegarder : pas de bandeau, juste centrer le bouton */
html body #tarteaucitronRoot div#tarteaucitronSave,
#tarteaucitron #tarteaucitronSave,
#tarteaucitronSave {
  background: transparent !important;
  text-align: center !important;
  padding: 20px 28px 24px !important;
  border-top: 1px solid rgba(154, 103, 254, 0.08) !important;
  margin: 0 !important;
}

/* Le BOUTON enregistrer lui-meme — compact, gradient DA */
html body #tarteaucitronRoot button#tarteaucitronSaveButton,
#tarteaucitronSaveButton,
#tarteaucitronSave button {
  background: linear-gradient(135deg, #9a67fe, #23a9ff, #00fac2) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 10px 22px !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(154, 103, 254, 0.4) !important;
  font-family: 'Montserrat', sans-serif !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
  transition: all 0.2s !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
}
html body #tarteaucitronRoot button#tarteaucitronSaveButton:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(154, 103, 254, 0.55) !important;
}

/* tac_activate (overlay sur services bloqués) */
.tac_activate .tarteaucitronAllow,
.tac_activate .tac_float .tarteaucitronAllow {
  background: linear-gradient(135deg, #9a67fe 0%, #23a9ff 55%, #00fac2 100%) !important;
  color: #ffffff !important;
  border-radius: 50px !important;
  border: none !important;
  font-family: 'Montserrat', sans-serif !important;
  padding: 8px 18px !important;
  font-weight: 700 !important;
}

/* Magic block */
.tarteaucitron-magic-block button {
  background: linear-gradient(135deg, #9a67fe, #23a9ff) !important;
  color: #ffffff !important;
  border-radius: 50px !important;
  font-family: 'Montserrat', sans-serif !important;
}

/* Liste cookies au survol */
#tarteaucitronCookiesList,
#tarteaucitronCookiesListContainer {
  background: #fafaff !important;
  color: #3d2c6e !important;
  border-radius: 12px !important;
  font-family: 'Montserrat', sans-serif !important;
}
#tarteaucitronCookiesNumber,
#tarteaucitronCookiesNumberBis {
  background: #9a67fe !important;
  color: #ffffff !important;
  border-radius: 50px !important;
  padding: 2px 10px !important;
  font-family: 'Montserrat', sans-serif !important;
}

/* Sécurité résiduelle */
[style*="#fbd600"] { background-color: #9a67fe !important; color: #fff !important; }