/* ═══════════════════════════════════════════════
   LE BANDEAU DE CONSENTEMENT

   Charge sur les deux pages (landing et /join), qui n'ont pourtant pas la
   meme feuille de style : c'est pour ca qu'il est autonome et ne depend
   d'aucun jeton de l'une ou de l'autre.

   Parti pris, revu le 13/08 apres mesure de dix sites dans un vrai
   navigateur : la carte ne s'affiche que la ou la loi exige une reponse
   avant de poser quoi que ce soit (voir EUROPE dans js/mesure.js). La ou
   elle s'affiche, elle doit etre VUE : une carte de coin sans contraste
   derriere elle est ignoree par la quasi-totalite des gens sur grand ecran.

   D'ou le voile. Il assombrit la page pour que la carte ne puisse pas etre
   ratee, et il ne capte JAMAIS un clic : pointer-events reste a none, en
   toutes circonstances. Il se retire au premier geste, la carte reste
   jusqu'a la reponse. Insister, pas empecher.

   Le bouton d'inscription reste l'element le plus fort de la page : ce
   bandeau n'emprunte donc PAS le degrade de marque, il se contente d'un
   contraste franc en noir et blanc.
   ═══════════════════════════════════════════════ */

.tk-voile {
  position: fixed;
  inset: 0;
  z-index: 8990;

  /* La ligne la plus importante du fichier. Le voile est un poids visuel,
     jamais une barriere : le champ email reste cliquable a la milliseconde
     ou la page s'affiche. */
  pointer-events: none;

  background: rgba(6, 6, 5, 0.55);
  -webkit-backdrop-filter: saturate(0.75);
  backdrop-filter: saturate(0.75);

  opacity: 0;
  transition: opacity 320ms ease-out;
}

.tk-voile.est-la { opacity: 1; }

.tk-bandeau {
  position: fixed;
  /* A DROITE sur grand ecran. On lit de gauche a droite : la carte se pose
     donc au bout du regard, pas devant lui. C'est aussi le coin choisi par
     Anthropic, Figma et Supabase parmi les dix sites mesures ; seul Framer
     va a gauche. */
  right: 20px;
  bottom: 20px;
  z-index: 9000;
  /* 460px et pas 380 : plus la carte est large, moins le texte fait de
     lignes, et moins elle remonte vers ce qui se clique. C'est aussi la
     largeur de celle d'Anthropic, mesuree a 456px. */
  width: min(460px, calc(100vw - 40px));

  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Chaque pixel de hauteur compte : la carte est ancree en bas, donc plus
     elle est haute, plus elle remonte vers ce qui se clique. A 250px elle
     mordait de 13px sur le bouton principal de la landing en 1280x800. La
     recette verifie ce chevauchement sur cinq tailles d'ecran. */
  padding: 18px 20px 17px;

  border-radius: 18px;
  background: rgba(16, 16, 14, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.14);
  /* Deux ombres : une proche qui pose la carte, une lointaine qui la
     decolle du voile. Une seule ombre a plat lui donnait l'air d'un
     autocollant. */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.36), 0 26px 64px rgba(0, 0, 0, 0.58);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);

  font-family: 'Sora', system-ui, sans-serif;

  /* L'etat d'arrivee. La classe est posee par le script une fois la page
     presentee, ce qui evite qu'il apparaisse pendant le chargement. */
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 260ms ease-out, transform 260ms ease-out;
}

.tk-bandeau.est-la {
  opacity: 1;
  transform: none;
}

/* Un seul battement, au moment ou le voile se retire : l'oeil suit la carte
   vers son coin au lieu de la perdre avec l'assombrissement. */
@keyframes tk-bat {
  0%, 100% { transform: none; }
  40%      { transform: translateY(-5px) scale(1.015); }
}
.tk-bandeau.est-la.bat { animation: tk-bat 620ms cubic-bezier(0.22, 1, 0.36, 1); }

.tk-bandeau__texte {
  margin: 0;
  /* La graisse est FORCEE : les deux pages hotes ont chacune la leur, et sans
     cette ligne le corps du bandeau ressortait aussi gras que son titre,
     c'est-a-dire tout sauf discret. */
  font-weight: 400;
  font-size: 12.5px;
  line-height: 1.55;
  letter-spacing: 0.005em;
  color: rgba(255, 255, 255, 0.66);
}

.tk-bandeau__texte b {
  display: block;
  margin-bottom: 6px;
  font-size: 15.5px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.96);
}

/* Sous le trait, le lien seul. */
.tk-bandeau__note {
  margin: -2px 0 0;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  font-weight: 400;
  font-size: 11.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.42);
}

.tk-bandeau__note a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(255, 255, 255, 0.28);
}
.tk-bandeau__note a:hover { color: #FFFFFF; text-decoration-color: rgba(255, 255, 255, 0.7); }

.tk-bandeau__boutons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tk-bandeau button {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  border-radius: 999px;
  transition: background-color 160ms ease-out, color 160ms ease-out;
}

.tk-bandeau__oui {
  height: 36px;
  padding: 0 22px;
  background: #FFFFFF;
  color: #14140F;
}
.tk-bandeau__oui:hover { background: rgba(255, 255, 255, 0.86); }

.tk-bandeau__non {
  height: 36px;
  padding: 0 14px;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
}
.tk-bandeau__non:hover { color: rgba(255, 255, 255, 0.82); }

.tk-bandeau button:focus-visible,
.tk-bandeau__note a:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.75);
  outline-offset: 2px;
}

/* Le mode jour de la landing. /join n'a pas de mode jour, la regle ne s'y
   applique donc jamais, mais elle ne coute rien. */
:root[data-theme="light"] .tk-bandeau {
  background: rgba(255, 255, 255, 0.94);
  border-color: #ECE8E1;
  box-shadow: 0 18px 44px rgba(20, 20, 15, 0.12);
}
:root[data-theme="light"] .tk-bandeau__texte { color: #6F6B65; }
:root[data-theme="light"] .tk-bandeau__texte b { color: #14140F; }
:root[data-theme="light"] .tk-bandeau__note { border-top-color: #ECE8E1; color: #A8A39C; }
:root[data-theme="light"] .tk-bandeau__note a { color: #6F6B65; text-decoration-color: #D9D4CC; }
:root[data-theme="light"] .tk-bandeau__note a:hover { color: #14140F; text-decoration-color: #14140F; }
:root[data-theme="light"] .tk-bandeau__oui { background: #14140F; color: #FAF7F2; }
:root[data-theme="light"] .tk-bandeau__oui:hover { background: #2A2A24; }
:root[data-theme="light"] .tk-bandeau__non { color: #A8A39C; }
:root[data-theme="light"] .tk-bandeau__non:hover { color: #14140F; }
:root[data-theme="light"] .tk-bandeau button:focus-visible,
:root[data-theme="light"] .tk-bandeau__note a:focus-visible { outline-color: #14140F; }

/* Le voile reste sombre en mode jour : assombrir une page claire est ce qui
   la met en retrait. L'eclaircir ne ferait que la delaver. */
:root[data-theme="light"] .tk-voile { background: rgba(20, 20, 15, 0.44); }

@media (max-width: 620px) {
  .tk-bandeau {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    gap: 9px;
    padding: 16px 16px 14px;
    /* La barre de gestes des telephones recents mange le bas de l'ecran. */
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }
  .tk-bandeau__oui, .tk-bandeau__non { flex: 1; padding: 0; height: 34px; }

  /* Un cran de corps en moins : sur un ecran de 360px de large, le francais
     prend une ligne de plus que l'anglais et l'espagnol, et cette ligne
     suffisait a mordre sur le second bouton de la landing. */
  .tk-bandeau__texte { font-size: 12px; line-height: 1.5; }
  .tk-bandeau__texte b { font-size: 15px; }

  /* Sur la page d'inscription, le bas de l'ecran EST le formulaire. Mesure :
     sur un ecran de 360x740 le bouton finit a 593px, il ne reste que 135px
     sous lui, et aucune carte lisible ne tient dans 135px. Le probleme n'est
     donc pas la hauteur, c'est le cote. La carte passe en haut, sous la
     barre, ou il n'y a que le titre. La landing garde le bas : son coin
     inferieur ne porte rien qu'on clique. */
  body.wl .tk-bandeau { top: 84px; bottom: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .tk-bandeau { transition: opacity 260ms ease-out; transform: none; }
  .tk-bandeau.est-la.bat { animation: none; }
  .tk-voile { transition: opacity 260ms ease-out; }
}