/* Bandeau de consentement : bandeau fixé en bas sur téléphone, carte en haut à droite sur grand écran (le bas de l'accueil porte le bouton du quiz) ; même poids pour « Refuser » et « Accepter ». Le texte est posé par mq-consent.js. */
.mq-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-l); padding: var(--space-s) var(--space-m) calc(var(--space-s) + env(safe-area-inset-bottom, 0px)); background: var(--night); color: var(--night-text); border-top: 1px solid var(--night-soft); box-shadow: 0 -0.4rem 2.4rem rgba(0, 0, 0, 0.25); }
.mq-consent-text { flex: 1 1 42rem; max-width: 96rem; margin: 0; font-size: var(--text-s); line-height: 1.5; color: var(--night-text); }
.mq-consent-text a { color: var(--night-text); text-decoration: underline; }
.mq-consent-actions { display: flex; flex: 0 0 auto; gap: var(--space-xs); }
.mq-consent .mq-ghost { justify-content: center; min-width: 12rem; min-height: 4.8rem; padding: 0.8rem var(--space-m); font-family: inherit; font-size: var(--text-s); cursor: pointer; background: transparent; }
.mq-consent .mq-ghost:focus-visible, .mq-consent-text a:focus-visible { outline: 0.3rem solid var(--night-text); outline-offset: 0.2rem; }
/* tant que le bandeau est là, on garde la place de le dépasser en bas de page : rien de ce qui est affiché ne bouge */
html.mq-consent-open body { padding-bottom: var(--mq-consent-h, 0px); }
@media (min-width: 768px) {
  .mq-consent { left: auto; right: var(--space-m); top: 9rem; bottom: auto; width: min(46rem, calc(100vw - 2 * var(--space-m))); flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: var(--space-s); padding: var(--space-m); border: 1px solid var(--night-soft); border-radius: 0.8rem; }
  .mq-consent-text { flex: 0 0 auto; }
  .mq-consent-actions { width: 100%; }
  .mq-consent .mq-ghost { flex: 1 1 0; min-width: 0; }
  html.mq-consent-open body { padding-bottom: 0; }
}
@media (max-width: 767px) {
  .mq-consent { padding: var(--space-xs) var(--space-s) calc(var(--space-xs) + env(safe-area-inset-bottom, 0px)); gap: var(--space-xs); }
  .mq-consent-text { flex-basis: 100%; font-size: 1.3rem; line-height: 1.4; }
  .mq-consent-actions { width: 100%; }
  .mq-consent .mq-ghost { flex: 1 1 0; min-width: 0; min-height: 4.4rem; }
}