/*
 * Le bandeau de consentement InMobi Choice (TCF 2.2), habillé aux couleurs
 * de Radio Actu et dans la forme de celui de dycast.fr : une carte posée en
 * bas de l'écran, « J'accepte » en avant, « Plus d'options · Refuser » en
 * dessous.
 *
 * Le moteur reste InMobi : c'est le seul à émettre le signal TCF sans lequel
 * la régie (Assertive Yield / YoungID) ne lance aucune enchère. On ne change
 * que l'apparence. InMobi rend son interface dans la page (ni iframe ni
 * shadow DOM) avec des classes générées et une feuille « cleanslate » en
 * !important : d'où le préfixe par identifiants et les !important partout.
 * Les noms stables sur lesquels on s'appuie : #qc-cmp2-container,
 * #qc-cmp2-ui, les classes qc-cmp2-*, les identifiants des boutons et
 * l'attribut `mode` (primary / secondary / link).
 *
 * Les couleurs viennent des variables du site (les mêmes noms sur le forum et
 * sur radioactu.com) : le bandeau suit donc le thème clair ou sombre.
 *
 * MÊME FICHIER des deux côtés — le forum (`src/app/cmp-inmobi.css`) et le
 * thème WordPress (`assets/css/cmp-inmobi.css`). Modifier l'un, recopier
 * l'autre.
 */

#qc-cmp2-container {
  --cmp-police: var(--font-sans, var(--police, "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif));
  --cmp-fond: var(--surface, #ffffff);
  --cmp-fond-2: var(--surface-2, #fafaf5);
  --cmp-bord: var(--bord, #e3e3da);
  --cmp-texte: var(--texte, #0b0d0c);
  --cmp-doux: var(--texte-doux, #53605a);
  --cmp-faible: var(--texte-faible, #8a938d);
  --cmp-accent: var(--accent, #b2ef00);
  --cmp-encre: var(--sur-accent, #0b0d0c);
  --cmp-lien: var(--lien, #6b8f00);
}

/* --- Le voile et la police ------------------------------------------------ */

#qc-cmp2-container .qc-cmp-cleanslate {
  background-color: rgb(11 13 12 / 0.55) !important;
  padding: 12px !important;
}
#qc-cmp2-container .qc-cmp-cleanslate,
#qc-cmp2-container .qc-cmp-cleanslate * {
  font-family: var(--cmp-police) !important;
  letter-spacing: normal !important;
}

/* --- La carte ------------------------------------------------------------- */

#qc-cmp2-container #qc-cmp2-ui {
  background: var(--cmp-fond) !important;
  color: var(--cmp-texte) !important;
  border: 1px solid var(--cmp-bord) !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 80px rgb(0 0 0 / 0.18) !important;
}
/* Deux aplats blancs pleine largeur, qui prolongent le bandeau d'origine
   d'un bord à l'autre de l'écran. */
#qc-cmp2-container #qc-cmp2-ui::before,
#qc-cmp2-container #qc-cmp2-ui::after {
  display: none !important;
}

/* Textes : InMobi fige ses gris en dur, on les rend au thème. */
#qc-cmp2-container #qc-cmp2-ui :is(div, p, li, ul, span, h2, h3, h4, strong, em, label, legend, figure, dt, dd, th, td) {
  color: var(--cmp-texte) !important;
  border-color: var(--cmp-bord) !important;
}
#qc-cmp2-container #qc-cmp2-ui :is(div, p, li, ul, span, section, header, footer, figure):not(.toggle) {
  background-color: transparent !important;
}
#qc-cmp2-container #qc-cmp2-ui :is(.description, .qc-cmp2-expandable-info, .qc-cmp2-summary-info) :is(div, p, li, span, strong, em, ul),
#qc-cmp2-container #qc-cmp2-ui :is(.description, .qc-cmp2-expandable-info) {
  color: var(--cmp-doux) !important;
}
#qc-cmp2-container #qc-cmp2-ui :is(a, button[mode="link"]),
#qc-cmp2-container #qc-cmp2-ui :is(a, button[mode="link"]) * {
  color: var(--cmp-lien) !important;
}
#qc-cmp2-container #qc-cmp2-ui span.qc-cmp2-loading-message {
  background-color: var(--cmp-fond) !important;
}
#qc-cmp2-container #qc-cmp2-ui input {
  background-color: var(--cmp-fond-2) !important;
  color: var(--cmp-texte) !important;
  border: 1px solid var(--cmp-bord) !important;
  border-radius: 10px !important;
}

#qc-cmp2-container #qc-cmp2-ui .span-heading {
  display: block !important;
  margin: 0 0 8px !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  text-align: left !important;
  color: var(--cmp-texte) !important;
}

/* --- Boutons --------------------------------------------------------------- */

/* inline-block et non flex : `::first-letter`, plus bas, ne s'applique qu'à
   un conteneur de type bloc. */
#qc-cmp2-container #qc-cmp2-ui button[mode="primary"] {
  display: inline-block !important;
  height: 44px !important;
  min-width: 0 !important;
  padding: 0 22px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--cmp-accent) !important;
  box-shadow: none !important;
  color: var(--cmp-encre) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 44px !important;
  text-align: center !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: filter 140ms ease !important;
}
#qc-cmp2-container #qc-cmp2-ui button[mode="primary"] * {
  color: var(--cmp-encre) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 44px !important;
}
#qc-cmp2-container #qc-cmp2-ui button[mode="secondary"] {
  display: inline-block !important;
  height: 44px !important;
  padding: 0 22px !important;
  border: 1px solid var(--cmp-bord) !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--cmp-texte) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 42px !important;
  cursor: pointer !important;
}
#qc-cmp2-container #qc-cmp2-ui button[mode="secondary"] * {
  color: var(--cmp-texte) !important;
  font-size: 15px !important;
  line-height: 42px !important;
}
/* InMobi double certains boutons, l'un pour le téléphone, l'autre pour
   l'ordinateur : le `display` ci-dessus ne doit pas faire réapparaître celui
   qu'il cache. */
@media (min-width: 768px) {
  #qc-cmp2-container #qc-cmp2-ui button.qc-cmp2-hide-desktop[mode] { display: none !important; }
}
@media (max-width: 767px) {
  #qc-cmp2-container #qc-cmp2-ui button.qc-cmp2-hide-mobile[mode] { display: none !important; }
}
#qc-cmp2-container #qc-cmp2-ui button[mode]:hover {
  filter: brightness(1.06) !important;
}
#qc-cmp2-container #qc-cmp2-ui :is(button, a):focus-visible {
  outline: 2px solid var(--cmp-texte) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* InMobi écrit ses libellés EN CAPITALES dans le texte même : « J'ACCEPTE ».
   On les rend en minuscules, première lettre en capitale. La liste est
   fermée, pour ne jamais toucher aux noms des partenaires. */
#qc-cmp2-container #qc-cmp2-ui :is(#accept-btn, #more-options-btn, #disagree-btn, #save-and-exit, #reject-all-btn, #accept-all-btn, #partners-link, #legitimate-interest, #reject-all-vendors, #accept-all-vendors),
#qc-cmp2-container #qc-cmp2-ui :is(#accept-btn, #more-options-btn, #disagree-btn, #save-and-exit) > span,
#qc-cmp2-container #qc-cmp2-ui :is(.qc-cmp2-list-item-status, .qc-cmp2-toggle .text) {
  text-transform: lowercase !important;
}
#qc-cmp2-container #qc-cmp2-ui :is(#partners-link, #legitimate-interest, #reject-all-vendors, #accept-all-vendors) {
  display: inline-block !important;
}
#qc-cmp2-container #qc-cmp2-ui :is(#accept-btn, #more-options-btn, #disagree-btn, #save-and-exit, #reject-all-btn, #accept-all-btn, #partners-link, #legitimate-interest, #reject-all-vendors, #accept-all-vendors)::first-letter,
#qc-cmp2-container #qc-cmp2-ui :is(#accept-btn, #more-options-btn, #disagree-btn, #save-and-exit) > span::first-letter,
#qc-cmp2-container #qc-cmp2-ui :is(.qc-cmp2-list-item-status, .qc-cmp2-toggle .text)::first-letter {
  text-transform: uppercase !important;
}

/* --- Premier écran : la carte du bas --------------------------------------- */

/* Le voile reste, plus léger : la régie attend une réponse pour lancer ses
   enchères, un bandeau qu'on peut ignorer coûterait la publicité. */
#qc-cmp2-container .qc-cmp-cleanslate:has(.qc-cmp2-summary-section) {
  align-items: flex-end !important;
  justify-content: center !important;
  background-color: rgb(11 13 12 / 0.28) !important;
}
#qc-cmp2-container #qc-cmp2-ui:has(.qc-cmp2-summary-section) {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 32rem !important;
  height: auto !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 20px !important;
  overflow: hidden !important;
}
#qc-cmp2-container #qc-cmp2-ui .qc-cmp2-summary-section {
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
#qc-cmp2-container #qc-cmp2-ui .qc-cmp2-summary-section :is(.qc-cmp2-consent-info, .qc-cmp2-publisher-logo-container, figure) {
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}
#qc-cmp2-container #qc-cmp2-ui .qc-cmp2-summary-info {
  max-height: min(32vh, 15rem) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  padding-right: 6px !important;
}
#qc-cmp2-container #qc-cmp2-ui .qc-cmp2-summary-info,
#qc-cmp2-container #qc-cmp2-ui .qc-cmp2-summary-info * {
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  text-align: left !important;
}
#qc-cmp2-container #qc-cmp2-ui .qc-cmp2-summary-info div {
  margin: 0 !important;
  padding: 0 !important;
}
#qc-cmp2-container #qc-cmp2-ui .qc-cmp2-summary-section ~ .qc-cmp2-footer {
  flex: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 16px 0 0 !important;
  border: 0 !important;
}
#qc-cmp2-container #qc-cmp2-ui .qc-cmp2-summary-section ~ .qc-cmp2-footer::before {
  display: none !important;
}
#qc-cmp2-container #qc-cmp2-ui .qc-cmp2-summary-buttons {
  display: flex !important;
  flex-flow: row wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px 8px !important;
  width: 100% !important;
  padding: 0 !important;
}
#qc-cmp2-container #qc-cmp2-ui .qc-cmp2-summary-buttons #accept-btn {
  order: 1 !important;
  flex: 1 0 100% !important;
  width: 100% !important;
  margin: 0 0 8px !important;
}
/* « Plus d'options » et « Refuser » : deux liens discrets sous le bouton,
   comme « Personnaliser · Refuser » sur dycast.fr. */
#qc-cmp2-container #qc-cmp2-ui #more-options-btn,
#qc-cmp2-container #qc-cmp2-ui #disagree-btn,
#qc-cmp2-container #qc-cmp2-ui .ra-cmp-refuser {
  display: inline-block !important;
  flex: none !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 6px 4px !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--cmp-doux) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  text-decoration: underline transparent !important;
  text-underline-offset: 3px !important;
  cursor: pointer !important;
}
#qc-cmp2-container #qc-cmp2-ui #more-options-btn *,
#qc-cmp2-container #qc-cmp2-ui #disagree-btn * {
  color: inherit !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
}
#qc-cmp2-container #qc-cmp2-ui :is(#more-options-btn, #disagree-btn, .ra-cmp-refuser):hover {
  color: var(--cmp-texte) !important;
  text-decoration-color: currentColor !important;
  filter: none !important;
}
#qc-cmp2-container #qc-cmp2-ui #more-options-btn { order: 2 !important; }
#qc-cmp2-container #qc-cmp2-ui .ra-cmp-sep { order: 3 !important; color: var(--cmp-faible) !important; font-size: 13px !important; }
#qc-cmp2-container #qc-cmp2-ui .ra-cmp-sep::before { content: "\00b7"; }
#qc-cmp2-container #qc-cmp2-ui :is(#disagree-btn, .ra-cmp-refuser) { order: 4 !important; }

/* Le temps que « Refuser » passe par l'écran détaillé (voir le script), rien
   ne doit clignoter. */
html[data-cmp-refus] #qc-cmp2-container {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* --- Écran détaillé (Plus d'options, Gérer mes cookies) -------------------- */

#qc-cmp2-container #qc-cmp2-ui:has(.qc-cmp2-scrollable-section) {
  overflow: hidden auto !important;
}
#qc-cmp2-container #qc-cmp2-ui .qc-cmp2-consent-info {
  padding: 20px 20px 4px !important;
}
#qc-cmp2-container #qc-cmp2-ui .qc-cmp2-consent-info .description {
  margin-top: 4px !important;
  padding: 14px 16px !important;
  border: 1px solid var(--cmp-bord) !important;
  border-radius: 12px !important;
  background-color: var(--cmp-fond-2) !important;
}
#qc-cmp2-container #qc-cmp2-ui .qc-cmp2-consent-info .description * {
  font-size: 13.5px !important;
  text-align: left !important;
}
/* « Retour », sur les écrans Partenaires et Intérêt légitime : InMobi le
   pose en absolu par-dessus le titre ; on le remet au-dessus. */
#qc-cmp2-container #qc-cmp2-ui .qc-cmp2-home-button {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  color: var(--cmp-lien) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
}
#qc-cmp2-container #qc-cmp2-ui .qc-cmp2-home-button * {
  color: var(--cmp-lien) !important;
  fill: currentColor !important;
}
/* « Tout refuser » et « Tout accepter » : deux boutons de même poids. */
#qc-cmp2-container #qc-cmp2-ui .qc-cmp2-header-links {
  gap: 8px !important;
  margin-top: 14px !important;
}
#qc-cmp2-container #qc-cmp2-ui .qc-cmp2-header-links button {
  display: inline-block !important;
  margin: 0 !important;
  padding: 7px 16px !important;
  border: 1px solid var(--cmp-bord) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--cmp-texte) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}
#qc-cmp2-container #qc-cmp2-ui .qc-cmp2-header-links button:hover {
  border-color: var(--cmp-texte) !important;
}
#qc-cmp2-container #qc-cmp2-ui .qc-cmp2-close-icon {
  width: 32px !important;
  height: 32px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--cmp-doux) !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / 18px 18px no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / 18px 18px no-repeat !important;
}
#qc-cmp2-container #qc-cmp2-ui .qc-cmp2-close-icon:hover {
  background: var(--cmp-texte) !important;
}
#qc-cmp2-container #qc-cmp2-ui .qc-cmp2-list-item {
  border-color: var(--cmp-bord) !important;
}
#qc-cmp2-container #qc-cmp2-ui .qc-cmp2-list-item-title {
  color: var(--cmp-texte) !important;
}
#qc-cmp2-container #qc-cmp2-ui .qc-cmp2-list-item-status {
  color: var(--cmp-faible) !important;
  font-size: 12px !important;
}
#qc-cmp2-container #qc-cmp2-ui .qc-cmp2-list-item-header svg,
#qc-cmp2-container #qc-cmp2-ui .qc-cmp2-list-item-header svg * {
  color: var(--cmp-doux) !important;
  fill: currentColor !important;
}
#qc-cmp2-container #qc-cmp2-ui .qc-cmp2-toggle {
  background-color: var(--cmp-faible) !important;
  border-color: var(--cmp-faible) !important;
}
#qc-cmp2-container #qc-cmp2-ui .qc-cmp2-toggle[aria-checked="true"] {
  background-color: var(--cmp-accent) !important;
  border-color: var(--cmp-accent) !important;
}
#qc-cmp2-container #qc-cmp2-ui .qc-cmp2-toggle .toggle {
  background-color: #ffffff !important;
}
#qc-cmp2-container #qc-cmp2-ui .qc-cmp2-toggle .text {
  color: var(--cmp-faible) !important;
}
#qc-cmp2-container #qc-cmp2-ui .qc-cmp2-scrollable-section ~ .qc-cmp2-footer,
#qc-cmp2-container #qc-cmp2-ui .qc-cmp2-footer:not(.qc-cmp2-summary-section ~ *) {
  border-top: 1px solid var(--cmp-bord) !important;
}
#qc-cmp2-container #qc-cmp2-ui .qc-cmp2-footer-overlay::before {
  background: linear-gradient(0deg, var(--cmp-fond), transparent) !important;
}

@media (min-width: 640px) {
  #qc-cmp2-container .qc-cmp-cleanslate:has(.qc-cmp2-summary-section) {
    padding: 24px !important;
  }
  #qc-cmp2-container #qc-cmp2-ui:has(.qc-cmp2-summary-section) {
    padding: 24px !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  #qc-cmp2-container #qc-cmp2-ui:has(.qc-cmp2-summary-section) {
    animation: ra-cmp-monte 240ms ease-out both;
  }
}
@keyframes ra-cmp-monte {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}