.tel {
  position: relative;
  width: 100%;
  padding: 9px;
  border-radius: 40px;
  background: linear-gradient(168deg, #26222d 0%, #131118 62%, #0d0b11 100%);
  box-shadow:
    0 40px 70px rgba(0, 0, 0, 0.66),
    0 0 44px rgba(255, 45, 111, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.6);
  transform-origin: 50% 100%;
  transform:
    translateY(calc((1 - var(--p, 1)) * 12px))
    rotateY(calc(var(--dx, 0) * -11deg))
    scale(calc(var(--base, 1) * (0.86 + 0.14 * var(--p, 1))));
  opacity: calc(0.46 + 0.54 * var(--p, 1));
}
.tel-sceau {
  position: absolute;
  z-index: 2;
  left: var(--sx, -30px);
  bottom: var(--sy, 86px);
  width: 84px;
  height: auto;
  filter: drop-shadow(0 0 26px rgba(255, 45, 111, 0.42));
}
.tel-ecran {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 9 / 18.5;
  border-radius: 32px;
  overflow: hidden;
  background: #0b0a0d;
}
.tel-ecran {
  --accent: #ff2d6f;
  --ligne: rgba(255, 255, 255, 0.12);
  --gris: rgba(255, 255, 255, 0.72);
  --gris-bas: rgba(255, 255, 255, 0.46);
  --fa: "Anton", Impact, "Haettenschweiler", sans-serif;
  --fd: "Archivo", -apple-system, BlinkMacSystemFont, sans-serif;
  color: #fff;
}
.punch--attente { display: none; }
.essai[data-etat="attente"] .punch--attente { display: block; }
.essai[data-etat="attente"] .punch--tombe { display: none; }
.onde-choc {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  border-radius: 50%;
  border: 1px solid rgba(255, 45, 111, 0.55);
  pointer-events: none;
  opacity: 0;
}
.essai[data-etat="tombe"] .onde-choc { animation: choc 0.9s ease-out 1 both; }
.essai[data-etat="tombe"] .onde-choc + .onde-choc { animation-delay: 0.14s; }
@keyframes choc {
  from { transform: scale(0.4); opacity: 0.55; }
  to   { transform: scale(2.4); opacity: 0; }
}
.ec:not(.ec--debat) { padding: 13px 12px 14px; gap: 8px; text-align: left; }
.fr-carte { text-align: left; }
.ec-tete {
  flex: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.ec-etiq {
  margin: 0;
  font-family: var(--fd);
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.3;
  color: #9c9b9f;
}
.ec-etiq--seule { flex: none; margin: 0 0 2px; }
.ec-chrono {
  flex: none;
  font-family: var(--fa);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: #9c9b9f;
}
.ec-pied {
  flex: none;
  margin: 0;
  font-family: var(--fd);
  font-size: 8px;
  line-height: 1.35;
  color: #9c9b9f;
  text-align: center;
}
.ec-pied--gauche { text-align: left; }
.ec-btn {
  flex: none;
  margin-top: auto;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-family: var(--fa);
  font-size: 13px;
  letter-spacing: 0.01em;
}
.cb-question {
  margin: 2px 0 0;
  font-family: var(--fa);
  font-size: 15px;
  line-height: 1.08;
  text-transform: uppercase;
  color: #fff;
}
.cb-pile {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.cb-bande {
  flex: none;
  height: 46px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid rgba(245, 244, 248, 0.11);
  border-radius: 10px;
  background: #1e1d20;
}
.cb-bande[data-pris="oui"] { border-color: var(--accent); }
.cb-nom {
  font-family: var(--fa);
  font-size: 15px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #fff;
}
.in-duo {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.in-mot {
  margin: 0;
  font-family: var(--fa);
  font-size: 46px;
  line-height: 0.98;
  text-transform: uppercase;
  color: #fff;
}
.in-pastilles {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.in-pastille {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 14px;
  border: 1px solid var(--ligne);
  font-family: var(--fd);
  font-size: 10px;
  color: #fff;
}
.in-pastille[data-pris="oui"] {
  background: var(--accent);
  border-color: var(--accent);
}
.qz-question {
  flex: none;
  margin: 6px 0 0;
  font-family: var(--fa);
  font-size: 13px;
  line-height: 1.06;
  color: #fff;
  text-wrap: balance;
}
.qz-mur {
  flex: 1;
  min-height: 0;
  margin: 10px -12px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: rgba(245, 244, 248, 0.12);
}
.qz-porte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  padding: 12px 11px;
  background: #1e1d20;
  text-align: left;
  overflow-wrap: anywhere;
}
.qz-porte i {
  font-family: var(--fa);
  font-style: normal;
  font-size: 12px;
  color: #9c9b9f;
}
.qz-porte em {
  font-family: var(--fd);
  font-style: normal;
  font-weight: 600;
  font-size: 11px;
  line-height: 1.14;
  color: #f5f4f8;
}
.cm-q {
  flex: none;
  margin: 6px 0 0;
  font-family: var(--fa);
  font-size: 17px;
  line-height: 1.06;
  text-transform: uppercase;
  color: #fff;
}
.cm-billet {
  flex: none;
  margin: auto 0 14px;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 12px;
  background: #17151c;
  border: 1px solid rgba(255, 255, 255, 0.16);
  transform: rotate(-0.8deg);
}
.cm-champ {
  font-family: var(--fa);
  font-size: 23px;
  line-height: 1.02;
  text-transform: uppercase;
  color: #fff;
}
.my-milieu {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
}
.my-plaque {
  width: calc(100% + 24px);
  margin: 0 -12px;
  padding: 16px 12px 18px;
  border-top: 1px solid rgba(245, 244, 248, 0.12);
  border-bottom: 1px solid rgba(245, 244, 248, 0.12);
}
.my-sous {
  margin: 0 0 6px;
  font-family: var(--fd);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #9c9b9f;
}
.my-prenom {
  margin: 0;
  font-family: var(--fa);
  font-size: 44px;
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}
.my-choix {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.my-cible {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  border: 1px solid rgba(245, 244, 248, 0.12);
  background: #1e1d20;
  font-family: var(--fd);
  font-weight: 700;
  font-size: 12px;
  color: #f5f4f8;
}
.mi-qui {
  flex: none;
  margin: 6px 0 0;
  font-family: var(--fd);
  font-size: 9.5px;
  color: #9c9b9f;
}
.mi-qualite {
  flex: none;
  margin: 2px 0 0;
  font-family: var(--fa);
  font-size: 22px;
  line-height: 1.02;
  text-transform: uppercase;
  color: #fff;
}
.mi-pile {
  flex: 1;
  min-height: 0;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
}
.mi-barre {
  flex: none;
  height: 26px;
  width: calc(34px + (100% - 34px) * var(--n) / 10);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 8px;
  border: 1px solid var(--ligne);
  border-radius: 0 7px 7px 0;
  background: rgba(255, 255, 255, 0.05);
}
.mi-barre b {
  font-family: var(--fa);
  font-weight: 400;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: #9c9b9f;
}
.mi-barre[data-pris="oui"] { background: #2f80ff; border-color: #2f80ff; }
.mi-barre[data-pris="oui"] b { color: #fff; }
.ds-cadre {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4px;
  padding: 2px 0;
}
.ds-guillemet {
  flex: none;
  font-family: var(--fa);
  font-size: 34px;
  line-height: 1;
  color: var(--accent);
}
.ds-guillemet--fin { align-self: flex-end; }
.ds-aveu {
  margin: 0;
  font-family: var(--fa);
  line-height: 1.14;
  font-size: 23px;
  text-transform: uppercase;
  color: #fff;
}
.pg-nom {
  flex: 1;
  min-height: 0;
  margin: 0;
  display: flex;
  align-items: center;
  font-family: var(--fa);
  font-size: 44px;
  line-height: 0.94;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #fff;
}
.pg-consigne {
  flex: none;
  margin: 0;
  font-family: var(--fd);
  font-size: 11px;
  color: #9c9b9f;
}
.pg-consigne b {
  font-family: var(--fa);
  font-weight: 400;
  font-size: 16px;
  text-transform: uppercase;
  color: var(--accent);
}
.pg-cases {
  flex: none;
  margin-top: 10px;
  display: flex;
  gap: 6px;
  height: 5px;
}
.pg-cases span {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: #1e1d20;
}
.pg-cases span[data-prise="oui"] { background: var(--accent); }
.ec--commun .ec-btn { margin-top: 0; }
.fr-carte {
  flex: 0 0 auto;
  margin: 12px 11px 0;
  padding: 12px;
  border-radius: 12px;
  background: rgba(23, 21, 28, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.fr-bandeau {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.fr-etiq {
  margin: 0;
  font-family: var(--fd);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
.fr-etiq--vote { display: none; }
.essai[data-etat="attente"] .fr-etiq--vote { display: inline; }
.essai[data-etat="attente"] .fr-etiq--fin { display: none; }
.fr-chrono {
  font-family: var(--fa);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.62);
}
.essai:not([data-etat="attente"]) .fr-chrono { visibility: hidden; }
.fr-affirmation {
  margin: 7px 0 0;
  font-family: var(--fa);
  font-size: 15.5px;
  line-height: 1.06;
  text-transform: uppercase;
  color: #fff;
}
.fr-zones {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  margin-top: 10px;
  display: grid;
  grid-template-rows: var(--haut, 60%) 1fr;
  transition: grid-template-rows 0.45s ease;
}
.essai[data-etat="attente"] .fr-zones { --haut: 50%; }
.fr-zone {
  position: relative;
  margin: 0;
  border: 0;
  padding: 0 10px;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: #fff;
  overflow: hidden;
  cursor: pointer;
  transition: filter 0.35s ease;
}
.fr-zone[data-camp="POUR"] { background: linear-gradient(180deg, #ff2d6f 0%, #c31350 100%); }
.fr-zone[data-camp="CONTRE"] { background: linear-gradient(180deg, #1d3f7a 0%, #0f2447 100%); }
.essai:not([data-etat="attente"]) .fr-zone[data-camp="CONTRE"] {
  filter: saturate(0.32) brightness(0.78);
}
.fr-label {
  font-family: var(--fa);
  font-size: 30px;
  line-height: 0.92;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.essai[data-etat="attente"] .fr-label { font-size: 26px; }
.essai:not([data-etat="attente"]) .fr-zone[data-camp="CONTRE"] .fr-label { font-size: 23px; }
.fr-compte {
  font-family: var(--fa);
  font-size: 26px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  opacity: 0.88;
}
.essai:not([data-etat="attente"]) .fr-zone[data-camp="CONTRE"] .fr-compte { font-size: 20px; }
.essai[data-etat="attente"] .fr-compte { display: none; }
.fr-mien {
  display: none;
  margin-top: 3px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.42);
  font-family: var(--fd);
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.essai[data-choix="oui"] .fr-zone[data-v="oui"] .fr-mien,
.essai[data-choix="non"] .fr-zone[data-v="non"] .fr-mien { display: inline-block; }
.fr-veilleuses {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--haut, 60%);
  transform: translateY(-50%);
  display: flex;
  gap: 6px;
  justify-content: center;
  pointer-events: none;
}
.fr-veilleuses i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.28);
}
.essai[data-etat="attente"] .fr-veilleuses i:nth-child(n + 4) {
  background: rgba(0, 0, 0, 0.45);
}
@media (prefers-reduced-motion: reduce) {
  .fr-zones,
  .fr-zone { transition: none; }
  .essai[data-etat="tombe"] .onde-choc { animation: none; }
}
.rail-ecrans {
  --carte-w: min(66vw, 250px);
  display: flex;
  align-items: flex-start;
  gap: clamp(18px, 6vw, 40px);
  padding: 40px max(var(--marge), calc(50% - var(--carte-w) / 2)) 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.js--rail-vu .rail-ecrans,
.js--rail-vu .rail { scroll-snap-type: x mandatory; }
.rail-ecrans::-webkit-scrollbar { display: none; }
.carte {
  position: relative;
  flex: 0 0 var(--carte-w);
  width: var(--carte-w);
  scroll-snap-align: center;
}
.carte::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 1%;
  width: 118%;
  height: 74%;
  translate: -50% 0;
  border-radius: 46%;
  background: conic-gradient(
    from 0deg,
    rgba(255, 45, 111, 0) 0deg,
    rgba(255, 45, 111, 0.5) 48deg,
    rgba(255, 45, 111, 0.06) 130deg,
    rgba(255, 45, 111, 0) 250deg
  );
  filter: blur(28px);
  opacity: calc(var(--p, 1) * 0.55);
  animation: tourne 9s linear infinite;
  pointer-events: none;
  z-index: 0;
}
.carte > * { position: relative; z-index: 1; }
.carte-scene {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: calc(var(--carte-w) * 18.5 / 9 + 20px);
  perspective: 1400px;
  text-decoration: none;
}
.legende {
  display: block;
  margin: 20px 0 0;
  text-align: center;
  transform-origin: 50% 0;
  transform: scale(calc(0.9 + 0.1 * var(--p, 1)));
  opacity: calc(0.4 + 0.6 * var(--p, 1));
}
.jeu-lien { position: relative; display: block; text-decoration: none; }
.jeu-lien::after { content: ""; position: absolute; inset: -13px -8px; }
.jeu-nom {
  display: block;
  font-family: var(--fa);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.08;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--cartel-encre, #fff);
  text-wrap: balance;
}
.jeu-nom span { display: inline-block; transform-origin: 50% 100%; }
.js .jeu-nom span {
  transform: scale(0.84) translateY(2px);
  opacity: 0.5;
  transition:
    transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.42s ease;
  transition-delay: calc(var(--l, 0) * var(--pas, 24ms));
}
.js .carte[data-centre] .jeu-nom span { transform: none; opacity: 1; }
.jeu-quoi {
  display: block;
  margin-top: 7px;
  font-family: var(--fd);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--cartel-gris, rgba(255, 255, 255, 0.46));
  text-wrap: balance;
}
.legende .punch {
  position: relative;
  margin: 0;
  font-family: var(--fd);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--punch, var(--accent));
  text-wrap: balance;
}
.legende .punch--attente { color: var(--cartel-gris, rgba(255, 255, 255, 0.46)); }
.legende .onde-choc { width: 150px; height: 150px; }