/* =========================================================
   Bandeau de consentement (mesure publicitaire Google Ads)

   Chargé sur toutes les pages, mais le bandeau n'est construit
   que si un identifiant Google Ads est renseigné dans
   js/mesure.js. Sans identifiant, ce fichier ne peint rien.

   Les couleurs sont écrites en dur plutôt qu'en var(--gold) :
   la page d'accueil définit ses jetons dans son propre bloc
   <style>, les autres pages dans css/pages.css, et ce bandeau
   doit s'afficher à l'identique dans les deux cas.
   ========================================================= */

.ts-consentement {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* Au-dessus de la barre d'appel mobile (z-index 999) : le choix
     doit rester atteignable, jamais recouvert. */
  z-index: 2000;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 28px;
  padding: 18px 24px calc(18px + env(safe-area-inset-bottom));
  background: rgba(8, 12, 20, 0.96);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 -18px 60px rgba(0, 0, 0, 0.55);
  color: #F0F2F8;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  font-size: 0.9rem;
  line-height: 1.55;
  animation: ts-consentement-entree 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes ts-consentement-entree {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ts-consentement { animation: none; }
}

.ts-consentement__texte {
  flex: 1 1 420px;
  min-width: 0;
  color: rgba(240, 242, 248, 0.86);
}

.ts-consentement__titre {
  display: block;
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: #F0F2F8;
  margin-bottom: 4px;
}

.ts-consentement__texte a {
  color: #D4AF6A;
  text-decoration: underline;
  text-underline-offset: 2px;
}

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

/* Refuser et accepter ont le même poids visuel : c'est une exigence
   de la CNIL, refuser doit être aussi simple qu'accepter. */
.ts-consentement__btn {
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 11px 22px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: #F0F2F8;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.ts-consentement__btn:hover {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.26);
}

.ts-consentement__btn:active { transform: translateY(1px); }

.ts-consentement__btn:focus-visible {
  outline: 2px solid #D4AF6A;
  outline-offset: 2px;
}

.ts-consentement__btn--accepter {
  background: linear-gradient(135deg, #F0CB88, #D4AF6A);
  border-color: transparent;
  color: #04050A;
}

.ts-consentement__btn--accepter:hover {
  background: linear-gradient(135deg, #F5D89E, #DDBA78);
  border-color: transparent;
}

/* Tant que le bandeau est affiché, la barre d'appel fixe de
   l'accueil est retirée : deux barres empilées en bas d'un écran
   de téléphone ne laissent plus rien voir de la page. */
body.ts-consentement-ouvert .mobile-cta { display: none !important; }

@media (max-width: 700px) {
  .ts-consentement {
    padding: 16px 18px calc(16px + env(safe-area-inset-bottom));
    font-size: 0.85rem;
  }

  .ts-consentement__actions { width: 100%; }

  .ts-consentement__btn {
    flex: 1 1 140px;
    padding: 12px 16px;
  }
}