/*
 * ╔══════════════════════════════════════════════════════════════════════════╗
 * ║ LE BANDEAU DE CONSENTEMENT À LA MESURE D'AUDIENCE.                       ║
 * ╚══════════════════════════════════════════════════════════════════════════╝
 *
 * Chargée par `app/layouts/default.vue`, pas par le composant — à la
 * différence de `legal-modal.css`, dont le composant suit TROIS points de
 * montage sous deux familles CSS différentes. Celui-ci n'en a qu'un, dans la
 * mise en page publique, et il n'entre jamais dans le dashboard : la feuille
 * peut donc être chargée là où le composant est monté, une fois.
 *
 * ⚠️ AUCUNE COULEUR EN DUR AU PREMIER RANG, comme `legal-modal.css`. Les
 * canaux du site (`--paper-rgb`, `--ink-rgb`, `--brand-rgb`) basculent seuls en
 * mode sombre via `dark.css` ; un littéral écrit ici échapperait au garde de
 * `tests/theme-site.test.ts` et resterait clair sur fond nuit. Le repli en
 * second rang n'existe que pour qu'une chaîne rompue ne s'effondre pas en
 * déclaration invalide — les onze pages publiques chargent toutes `base.css`.
 *
 * ⚠️ AUCUN DES SEPT NOMS DE CLASSES PARTAGÉS PAR LES DEUX FAMILLES CSS DU
 * PROJET N'APPARAÎT ICI : tout est préfixé `.consentement…`. Même raison que
 * pour la modale légale — la collision devient impossible plutôt
 * qu'improbable.
 */

.consentement {
  --cs-paper-rgb: var(--paper-rgb, 255, 255, 255);
  --cs-ink-rgb: var(--ink-rgb, 15, 23, 42);
  --cs-brand-rgb: var(--brand-rgb, 109, 40, 217);

  position: fixed;
  inset: auto 0 0;
  /*
   * Au-dessus de l'en-tête collant (30) et du maximum du tunnel (80), sous la
   * modale légale (1000) : une modale ouverte doit peindre PAR-DESSUS ce
   * bandeau, jamais l'inverse — c'est elle qui porte le texte qu'on vient
   * d'ouvrir pour décider.
   */
  z-index: 90;
  display: flex;
  justify-content: center;
  padding: 0 16px 16px;
  /*
   * Le bandeau ne recouvre pas la page : il flotte au-dessus d'elle, et le
   * conteneur laisse passer les clics partout ailleurs que sur la carte.
   */
  pointer-events: none;
}

.consentement__carte {
  pointer-events: auto;
  width: min(var(--container, 1180px), 100%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 22px;
  border: 1px solid rgba(var(--cs-ink-rgb), 0.12);
  border-radius: 20px;
  background: rgba(var(--cs-paper-rgb), 0.97);
  backdrop-filter: blur(10px);
  box-shadow: 0 24px 56px rgba(2, 6, 23, 0.18);
}

.consentement__texte {
  flex: 1 1 420px;
  min-width: 0;
}

.consentement__titre {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: rgba(var(--cs-ink-rgb), 0.96);
}

.consentement__corps {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(var(--cs-ink-rgb), 0.74);
}

.consentement__note {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: rgba(var(--cs-ink-rgb), 0.6);
}

.consentement__lien {
  color: rgba(var(--cs-brand-rgb), 0.95);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.consentement__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/*
 * ⚠️ LES DEUX BOUTONS PARTAGENT TOUTE LEUR GÉOMÉTRIE, ET C'EST LA RÈGLE.
 * Même hauteur, même rembourrage, même graisse, même taille de texte : seul le
 * remplissage change. Un refus rendu plus petit ou plus pâle que l'acceptation
 * vicie le consentement recueilli (CNIL). Toute modification de l'un des deux
 * modificateurs ci-dessous doit rester une question de COULEUR.
 */
.consentement__bouton {
  min-width: 132px;
  padding: 11px 20px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

.consentement__bouton:hover {
  transform: translateY(-1px);
}

.consentement__bouton--refus {
  border: 1px solid rgba(var(--cs-ink-rgb), 0.2);
  background: rgba(var(--cs-paper-rgb), 0.9);
  color: rgba(var(--cs-ink-rgb), 0.86);
}

.consentement__bouton--accord {
  border: 1px solid rgba(var(--cs-brand-rgb), 0.9);
  background: rgba(var(--cs-brand-rgb), 0.95);
  color: rgba(var(--cs-paper-rgb), 0.98);
  box-shadow: 0 10px 24px rgba(var(--cs-brand-rgb), 0.28);
}

@media (width <= 720px) {
  .consentement__carte {
    align-items: stretch;
    padding: 16px 18px;
  }

  .consentement__actions {
    width: 100%;
  }

  /* Toujours à égalité : la moitié de la largeur pour chacun. */
  .consentement__bouton {
    flex: 1 1 0;
    min-width: 0;
  }
}

/*
 * `transform` et `transition` disparaissent pour qui a demandé moins
 * d'animation — le bandeau reste entièrement utilisable, ce qui est la seule
 * chose qui compte ici.
 */
@media (prefers-reduced-motion: reduce) {
  .consentement__bouton {
    transition: none;
  }

  .consentement__bouton:hover {
    transform: none;
  }
}