/* ============================================================
   Contact. — le début de la page d'accueil (« la une »)
   Le titre, puis le téléphone passe par les occasions : les activités
   autour de toi, les envies et les hobbies des amis, les personnes autour,
   les sorties proposées dans les groupes, créer l'occasion, la phrase de fin.
   Complète home.css (mis en ligne le 26/10/2026).
   ============================================================ */

/* ── Mise en page de la scène ─────────────────────────────── */

.une-scene {
  --tel-h: min(700px, calc(100svh - var(--header-h) - 84px));
  --tel-w: calc(var(--tel-h) * .485);
  --tel-cx: calc(50% + min(var(--max), 100vw - 2 * var(--gutter)) * .26);
}

.une__pin {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--header-h) + 48px) var(--gutter) 96px;
  background: var(--creme);
}

.une {
  position: relative;
  z-index: 3;
  width: 100%;
  text-align: center;
}

.une__titre {
  font-size: clamp(2.6rem, .9rem + 4.7vw, 5.7rem);
  line-height: .96;
  letter-spacing: -.026em;
}

.une__titre .ligne {
  display: block;
  overflow: hidden;
  padding: .12em .08em .1em;
  margin: -.12em -.08em -.1em;
}

.une__titre .ligne > span {
  display: inline-block;
}

.une__lead {
  max-width: 40ch;
  margin: clamp(16px, 2.4svh, 28px) auto 0;
  color: var(--gris);
  font-size: var(--t-lead);
  line-height: 1.45;
}

.une__stores {
  margin-top: clamp(18px, 3svh, 32px);
}

/* Version fixe (sans animation) : tout se lit de haut en bas */
.tel {
  position: relative;
  z-index: 2;
  flex: none;
  width: var(--tel-w);
  height: var(--tel-h);
  margin-top: 56px;
  font-size: calc(var(--tel-h) / 45);
}

.occasions {
  position: relative;
  z-index: 3;
  width: min(var(--max), 100%);
  margin-top: 64px;
}

.occasions__liste {
  display: grid;
  gap: 36px;
  margin: 0;
  padding: 0;
}

.occasions__liste li {
  margin: 0;
  padding: 0;
}

.occasions__liste li::before {
  content: none;
}

.occasion h2 {
  max-width: 13em;
  font-size: clamp(2.2rem, 1.2rem + 2.9vw, 4.2rem);
  line-height: .98;
  letter-spacing: -.02em;
}

.occasion p {
  max-width: 34ch;
  color: var(--gris);
}

.occasions__suivi {
  display: none;
}

/* Avec les animations : la scène reste à l'écran pendant le défilement */
.anim .une__pin {
  display: block;
  padding: 0;
}

.anim .une {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--header-h) + clamp(22px, 5.5svh, 72px));
  padding: 0 var(--gutter);
  opacity: calc(1 - var(--u, 0));
  transform: translate3d(0, calc(var(--u, 0) * -8svh), 0);
}

.anim .tel {
  position: absolute;
  left: var(--tel-cx);
  top: calc(50% + var(--header-h) / 2);
  margin: calc(var(--tel-h) / -2) 0 0 calc(var(--tel-w) / -2);
  transform: translate3d(calc(var(--dx0, 0px) * (1 - var(--t, 0))), calc(var(--dy0, 0px) * (1 - var(--t, 0))), 0);
  will-change: transform;
}

.anim .occasions {
  position: absolute;
  left: max(var(--gutter), calc(50% - var(--max) / 2));
  top: calc(50% + var(--header-h) / 2);
  width: min(44%, 540px);
  margin: 0;
  transform: translateY(-50%);
}

.anim .occasions__liste {
  gap: 0;
}

.anim .occasion {
  grid-area: 1 / 1;
  align-self: center;
}

.anim .occasions__suivi {
  display: flex;
  gap: 8px;
  margin-top: 40px;
  transition: opacity .4s ease;
}

.occasions__suivi i {
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: rgba(17, 17, 17, .16);
  transition: width .45s var(--ease), background-color .3s ease;
}

.une__pin[data-etat="0"] .occasions__suivi,
.une__pin[data-etat="6"] .occasions__suivi {
  opacity: 0;
}

.une__pin[data-etat="1"] .occasions__suivi i:nth-child(1),
.une__pin[data-etat="2"] .occasions__suivi i:nth-child(2),
.une__pin[data-etat="3"] .occasions__suivi i:nth-child(3),
.une__pin[data-etat="4"] .occasions__suivi i:nth-child(4),
.une__pin[data-etat="5"] .occasions__suivi i:nth-child(5) {
  width: 40px;
  background: var(--encre);
}

/* Arrivée de la page */
@keyframes tel-arrive {
  from { opacity: 0; transform: translate3d(0, 26svh, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes flot-arrive {
  from { opacity: 0; transform: translate3d(0, 2.2em, 0) scale(.9); }
  to { opacity: 1; transform: none; }
}

.anim .une__titre .ligne > span {
  animation: monte 1.1s var(--ease) both;
}

.anim .une__titre .ligne + .ligne > span {
  animation-delay: .1s;
}

.anim .une__lead {
  animation: apparait .9s var(--ease) .42s both;
}

.anim .une__stores {
  animation: apparait .9s var(--ease) .54s both;
}

.anim .tel__in {
  animation: tel-arrive 1.3s var(--ease) .2s both;
}

.anim .une__pin[data-etat="0"] .flot--sortie {
  animation: flot-arrive .9s var(--ease) .95s backwards;
}

.anim .une__pin[data-etat="0"] .flot--envie {
  animation: flot-arrive .9s var(--ease) 1.12s backwards;
}

/* ── Le téléphone ─────────────────────────────────────────── */

.tel__in {
  position: relative;
  width: 100%;
  height: 100%;
}

.tel__cadre {
  position: absolute;
  inset: 0;
  padding: .6em;
  border-radius: 3.4em;
  background: #141414;
  box-shadow:
    inset 0 0 0 .12em #343434,
    0 4.5em 7em -3.4em rgba(17, 17, 17, .5),
    0 1.4em 3em -1.6em rgba(17, 17, 17, .3);
}

.tel__ecran {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 2.85em;
  background: #ecebe7;
  color: #111;
  isolation: isolate;
}

.tel__ilot {
  position: absolute;
  left: 50%;
  top: 1.35em;
  z-index: 8;
  width: 5.4em;
  height: 1.6em;
  margin-left: -2.7em;
  border-radius: 1em;
  background: #000;
}

/* L'écran du téléphone : la carte (activités, gens autour, sortie d'un groupe) ;
   pour les envies des amis, le téléphone s'efface derrière de grandes cartes */
.ecr {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease, visibility 0s linear .45s;
}

.ecr--carte {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* Barre d'état */
.app-barre {
  position: absolute;
  top: 1.45em;
  left: 2.1em;
  right: 1.7em;
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #111;
}

.app-barre > span {
  font: 600 .78em/1 var(--sans);
}

.app-barre--clair {
  color: #fff;
}

.app-barre__ic {
  position: relative;
  width: 3.1em;
  height: .72em;
  background:
    linear-gradient(currentColor, currentColor) 0 100% / .16em 40% no-repeat,
    linear-gradient(currentColor, currentColor) .26em 100% / .16em 60% no-repeat,
    linear-gradient(currentColor, currentColor) .52em 100% / .16em 80% no-repeat,
    linear-gradient(currentColor, currentColor) .78em 100% / .16em 100% no-repeat;
}

.app-barre__ic::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 1.55em;
  height: 100%;
  border-radius: .22em;
  background: currentColor;
}

/* 1. La carte */
.carte-app__fond {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 270%;
  max-width: none;
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.app-recherche {
  position: absolute;
  top: 3.5em;
  left: .9em;
  right: .9em;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: .6em;
  height: 2.5em;
  padding: 0 1em;
  border-radius: 1.25em;
  background: rgba(255, 255, 255, .94);
  color: #8b8783;
  box-shadow: 0 .35em 1em -.45em rgba(0, 0, 0, .3);
}

.app-recherche svg {
  flex: none;
  width: 1.05em;
  height: 1.05em;
}

.app-recherche span {
  flex: 1;
  font: 500 .78em/1 var(--sans);
}

.app-bascule {
  position: absolute;
  top: 6.5em;
  left: .9em;
  z-index: 3;
  display: flex;
  gap: .4em;
}

.app-bascule span {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .5em .85em;
  border-radius: 1em;
  background: rgba(255, 255, 255, .9);
  color: #8b8783;
  font: 600 .66em/1 var(--sans);
}

.app-bascule span {
  transition: color .35s ease;
}

.app-bascule__act,
.une__pin[data-etat="3"] .app-bascule__gens {
  color: #111;
}

.une__pin[data-etat="3"] .app-bascule__act {
  color: #8b8783;
}

.app-bascule i {
  width: 0;
  height: .55em;
  margin-right: -.4em;
  border-radius: 50%;
  background: var(--orange);
  transition: width .35s var(--ease), margin .35s var(--ease);
}

.app-bascule__act i,
.une__pin[data-etat="3"] .app-bascule__gens i {
  width: .55em;
  margin-right: 0;
}

.une__pin[data-etat="3"] .app-bascule__act i {
  width: 0;
  margin-right: -.4em;
}

.app-pins {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0;
  padding: 0;
}

.app-pins li {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  display: flex;
  align-items: center;
  gap: .45em;
  margin: 0;
  padding: .28em .75em .28em .28em;
  border-radius: 1.4em;
  background: #fff;
  box-shadow: 0 .45em 1.1em -.45em rgba(0, 0, 0, .38);
  white-space: nowrap;
}

.app-pins li::before {
  content: none;
}

.app-pins img {
  flex: none;
  width: 2.15em;
  height: 2.15em;
  border-radius: 50%;
  object-fit: cover;
}

.app-pins b {
  display: block;
  color: #111;
  font: 600 .72em/1.2 var(--sans);
}

.app-pins small {
  display: block;
  color: #8b8783;
  font: 500 .58em/1.25 var(--sans);
}

.app-pins em {
  color: var(--orange);
  font-style: normal;
}

.app-pins li {
  transition: opacity .35s ease, transform .55s var(--ease);
}

.une__pin[data-etat="3"] .app-pins li,
.une__pin[data-etat="4"] .app-pins li,
.une__pin[data-etat="5"] .app-pins li {
  opacity: 0;
  transform: scale(.85);
}

.app-toi {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25em;
}

.app-toi i {
  width: 1.05em;
  height: 1.05em;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 .25em #fff, 0 0 0 1.4em rgba(255, 107, 44, .14);
}

.app-toi b {
  padding: .25em .5em;
  border-radius: .5em;
  background: #111;
  color: #fff;
  font: 700 .55em/1 var(--sans);
}

/* 3. Les gens autour de toi : l'onde part de toi, les visages apparaissent */
.app-toi i {
  position: relative;
}

.app-toi i::before,
.app-toi i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: 17em;
  height: 17em;
  margin: -8.5em 0 0 -8.5em;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.app-toi i::before {
  border: .12em solid rgba(255, 107, 44, .5);
  background: rgba(255, 107, 44, .07);
  transform: scale(.25);
  transition: opacity .4s ease, transform 1s var(--ease);
}

.app-toi i::after {
  border: .12em solid rgba(255, 107, 44, .45);
}

.une__pin[data-etat="3"] .app-toi i::before,
.une__pin[data-etat="5"] .app-toi i::before {
  opacity: 1;
  transform: none;
}

.anim .une__pin[data-etat="3"] .app-toi i::after,
.anim .une__pin[data-etat="5"] .app-toi i::after {
  animation: onde 2.6s ease-out 1.1s infinite;
}

@keyframes onde {
  from { opacity: .8; transform: scale(.12); }
  to { opacity: 0; transform: scale(1); }
}

.app-gens {
  position: absolute;
  inset: 0;
  z-index: 3;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.app-gens li {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  display: flex;
  align-items: center;
  gap: .45em;
  margin: 0;
  padding: 0;
  opacity: 0;
  transform: scale(.4);
  transition: opacity .25s ease, transform .45s var(--ease);
}

.app-gens li::before {
  content: none;
}

.app-gens img {
  display: block;
  flex: none;
  width: 2.5em;
  height: 2.5em;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 .2em #fff, 0 .55em 1.1em -.45em rgba(0, 0, 0, .5);
}

.app-gens__lea img {
  width: 3.2em;
  height: 3.2em;
  box-shadow: 0 0 0 .2em #fff, 0 0 0 .4em var(--orange), 0 .7em 1.4em -.5em rgba(0, 0, 0, .5);
}

.app-gens__lea span {
  padding: .45em .75em;
  border-radius: 1em;
  background: #fff;
  color: #111;
  font: 700 .64em/1 var(--sans);
  box-shadow: 0 .45em 1.1em -.45em rgba(0, 0, 0, .38);
}

.une__pin[data-etat="3"] .app-gens li {
  opacity: 1;
  transform: none;
  transition-delay: calc(.3s + var(--d, 0) * 1s);
}

/* 5. Créer l'occasion : les personnes qui ont envie de poker s'allument */
.une__pin[data-etat="5"] .app-gens li.is-poker {
  opacity: 1;
  transform: none;
  transition-delay: calc(.9s + var(--d, 0) * 1.4s);
}

.une__pin[data-etat="5"] .app-gens li.is-poker img {
  box-shadow: 0 0 0 .2em #fff, 0 0 0 .4em var(--orange), 0 .7em 1.4em -.5em rgba(0, 0, 0, .5);
}

/* 4. La sortie d'un groupe : le lieu sur la carte, la proposition en bas */
.app-lieu {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: .45em;
  padding: .28em .85em .28em .28em;
  border-radius: 1.4em;
  background: #fff;
  box-shadow: 0 .6em 1.3em -.5em rgba(0, 0, 0, .42);
  white-space: nowrap;
  opacity: 0;
  transform: translate3d(0, .8em, 0) scale(.85);
  transition: opacity .3s ease, transform .55s var(--ease);
}

.app-lieu img {
  flex: none;
  width: 2.3em;
  height: 2.3em;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 .17em var(--orange);
}

.app-lieu b {
  display: block;
  color: #111;
  font: 700 .74em/1.2 var(--sans);
}

.app-lieu small {
  display: block;
  color: #8b8783;
  font: 500 .6em/1.25 var(--sans);
}

.une__pin[data-etat="4"] .app-lieu:not(.app-poker),
.une__pin[data-etat="5"] .app-poker {
  opacity: 1;
  transform: none;
  transition-delay: .3s;
}

/* Une onde sur le lieu de la sortie */
.app-lieu::after {
  content: "";
  position: absolute;
  left: 1.43em;
  top: 50%;
  width: 2.3em;
  height: 2.3em;
  margin: -1.15em 0 0 -1.15em;
  border: .14em solid var(--orange);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.anim .une__pin[data-etat="4"] .app-lieu::after {
  animation: lieu-onde 2.2s ease-out 1s infinite;
}

@keyframes lieu-onde {
  from { opacity: .7; transform: scale(1); }
  to { opacity: 0; transform: scale(2.6); }
}

.app-decouverte {
  position: absolute;
  left: .9em;
  right: .9em;
  bottom: 5.1em;
  z-index: 4;
  transition: opacity .3s ease, transform .5s var(--ease);
  display: flex;
  align-items: center;
  gap: .7em;
  height: 3.3em;
  padding: 0 .4em 0 .45em;
  border-radius: 1.7em;
  background: #1d1c1b;
  color: #fff;
  box-shadow: 0 .6em 1.4em -.6em rgba(0, 0, 0, .5);
}

.app-decouverte__ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5em;
  height: 2.5em;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
}

.app-decouverte__ic svg {
  width: 1.2em;
  height: 1.2em;
}

.app-decouverte__txt {
  flex: 1;
  min-width: 0;
}

.app-decouverte__txt b {
  display: flex;
  align-items: center;
  gap: .5em;
  font: 700 .74em/1.2 var(--sans);
}

.app-decouverte__txt b i {
  width: .5em;
  height: .5em;
  border-radius: 50%;
  background: #3ecf6e;
}

.app-decouverte__txt small {
  display: block;
  color: rgba(255, 255, 255, .62);
  font: 500 .58em/1.3 var(--sans);
}

.app-decouverte__gens,
.une__pin[data-etat="3"] .app-decouverte__act {
  display: none;
}

.une__pin[data-etat="3"] .app-decouverte__gens {
  display: inline;
}

.une__pin[data-etat="4"] .app-decouverte,
.une__pin[data-etat="5"] .app-decouverte {
  opacity: 0;
  transform: translate3d(0, 1em, 0);
}

.app-decouverte__go {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5em;
  height: 2.5em;
  border-radius: 50%;
  background: var(--orange);
}

.app-decouverte__go svg {
  width: 1.15em;
  height: 1.15em;
}

.app-onglets {
  position: absolute;
  left: .7em;
  right: .7em;
  bottom: .9em;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 3.6em;
  border-radius: 1.8em;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 .4em 1.2em -.6em rgba(0, 0, 0, .3);
}

.app-onglets span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25em;
  padding: .45em .55em;
  border-radius: 1.2em;
  color: #3a3835;
  font: 500 .5em/1 var(--sans);
}

.app-onglets svg {
  width: 2.3em;
  height: 2.3em;
}

.app-onglets .is-on {
  background: #ecebe7;
  color: #111;
  font-weight: 700;
}

.flot--envie img {
  flex: none;
  width: 3.5em;
  height: 3.5em;
  border-radius: .85em;
  object-fit: cover;
}

.flot--envie b {
  color: #111;
  font: 700 .74em/1.2 var(--sans);
}

.flot--envie small {
  color: #8b8783;
  font: 500 .6em/1.2 var(--sans);
}

.flot--envie p {
  margin-top: .2em;
  color: #111;
  font: 500 .82em/1.25 var(--sans);
}

.app-btn {
  display: inline-flex;
  margin-top: .55em;
  padding: .5em .95em;
  border-radius: 1em;
  background: #1d1c1b;
  color: #fff;
  font: 700 .6em/1 var(--sans);
}

.app-puces {
  display: flex;
  flex-wrap: wrap;
  gap: .3em;
  margin-top: .35em;
}

.app-puces > * {
  padding: .4em .65em;
  border-radius: 1em;
  background: #edebe7;
  color: #55524e;
  font: 500 .56em/1 var(--sans);
  font-style: normal;
}

.app-puces em {
  background: #fde4d4;
  color: #e4570f;
  font-weight: 600;
}

/* 2. Les envies et les hobbies des amis : le téléphone s'efface, trois cartes en grand */
.tel__cadre {
  transition: opacity .45s ease, transform .8s var(--ease);
}

.une__pin[data-etat="2"] .tel__cadre {
  opacity: 0;
  transform: scale(.94);
}

.envies-amis {
  position: absolute;
  inset: 0;
  z-index: 10;
  font-size: 1.2em;
  pointer-events: none;
}

html:not(.anim) .envies-amis {
  display: none;
}

.ea {
  position: absolute;
  left: 50%;
  display: flex;
  align-items: flex-start;
  gap: .95em;
  width: 23em;
  margin-left: -11.5em;
  padding: .95em;
  border-radius: 1.5em;
  background: #fff;
  box-shadow: 0 2.6em 4.6em -2.4em rgba(17, 17, 17, .42), 0 .6em 1.5em -1em rgba(17, 17, 17, .18);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(var(--dx), 2.6em, 0) scale(.94);
  transition: opacity .4s ease, transform .8s var(--ease), visibility 0s linear .8s;
}

.ea--1 {
  --dx: -2.8em;
  --i: 0;
  top: 15%;
}

.ea--2 {
  --dx: 2.6em;
  --i: 1;
  top: 40%;
}

.ea--3 {
  --dx: -1.4em;
  --i: 2;
  top: 65%;
}

.une__pin[data-etat="2"] .ea {
  opacity: 1;
  visibility: visible;
  transform: translate3d(var(--dx), 0, 0);
  transition-delay: calc(.2s + var(--i) * .14s), calc(.2s + var(--i) * .14s), 0s;
}

.ea > img {
  flex: none;
  width: 4.6em;
  height: 4.6em;
  border-radius: 1.15em;
  object-fit: cover;
}

.ea__corps {
  flex: 1;
  min-width: 0;
}

.ea__qui {
  display: block;
  color: #8b8783;
  font: 500 .66em/1.2 var(--sans);
}

.ea__qui b {
  color: #111;
  font-weight: 700;
}

.ea__envie {
  margin: .25em 0 0;
  color: #111;
  font: 700 1.25em/1.15 var(--sans);
  letter-spacing: -.012em;
}

.ea .app-puces {
  align-items: center;
  margin-top: .65em;
}

.ea .app-puces > .ea__label {
  padding: 0 .35em 0 0;
  background: none;
  color: #8b8783;
  font: 700 .5em/1 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* « Tu leur réponds en un geste » : ta réponse arrive sur la carte de Nora */
.ea__rep {
  position: absolute;
  right: -.9em;
  bottom: -1em;
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .7em 1.1em;
  border-radius: 1.2em;
  background: var(--orange);
  color: #fff;
  font: 700 .7em/1 var(--sans);
  white-space: nowrap;
  box-shadow: 0 1.2em 2em -1em rgba(228, 87, 15, .55);
  opacity: 0;
  transform: translate3d(0, .6em, 0) scale(.7);
  transition: opacity .3s ease, transform .5s var(--ease);
}

.ea__rep svg {
  width: 1.25em;
  height: 1.25em;
}

.une__pin[data-etat="2"] .ea__rep {
  opacity: 1;
  transform: none;
  transition-delay: 1.5s;
}

/* La proposition de sortie d’un groupe (posée sur la carte) */
.prop-app {
  display: block;
  padding: .75em .85em .8em;
  border-radius: 1.15em;
  background: #fff;
  box-shadow: 0 .4em 1.2em -.8em rgba(0, 0, 0, .3);
}

.prop-app__label {
  display: block;
  color: #8b8783;
  font: 700 .5em/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.prop-app > b {
  display: block;
  margin-top: .45em;
  color: #111;
  font: 700 .74em/1.2 var(--sans);
}

.prop-app > small {
  display: block;
  margin-top: .3em;
  color: #8b8783;
  font: 500 .58em/1.2 var(--sans);
}

.prop-app__vote {
  display: flex;
  gap: .4em;
  margin-top: .65em;
}

.prop-app__vote > span {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: .5em .8em;
  border-radius: 1em;
  font: 700 .6em/1 var(--sans);
}

.prop-app__oui {
  background: var(--orange);
  color: #fff;
}

.prop-app__oui svg {
  width: 1.2em;
  height: 1.2em;
}

.prop-app__non {
  background: #edebe7;
  color: #3a3835;
}

.chat-ok {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: .4em;
  margin-left: 3.9em;
  padding: .5em .8em;
  border-radius: 1em;
  background: #fde4d4;
  color: #d4500c;
  font: 700 .58em/1 var(--sans);
}

.chat-ok svg {
  width: 1.2em;
  height: 1.2em;
}

.anim .chat-ok {
  opacity: 0;
  transform: translate3d(0, .8em, 0);
  transition: opacity .4s ease, transform .6s var(--ease);
}

.anim .une__pin[data-etat="4"] .chat-ok {
  opacity: 1;
  transform: none;
  transition-delay: 1.5s;
}

.app-sortie {
  position: absolute;
  left: .9em;
  right: .9em;
  bottom: 5.1em;
  z-index: 5;
  padding: .85em .95em .95em;
  border-radius: 1.5em;
  box-shadow: 0 1em 2.4em -1em rgba(0, 0, 0, .45);
  opacity: 0;
  transform: translate3d(0, 3em, 0);
  transition: opacity .3s ease, transform .6s var(--ease);
}

.une__pin[data-etat="4"] .app-sortie:not(.app-cree),
.une__pin[data-etat="5"] .app-cree {
  opacity: 1;
  transform: none;
  transition-delay: .1s;
}

.app-sortie__groupe {
  display: flex;
  align-items: center;
  gap: .55em;
  padding-bottom: .7em;
  box-shadow: inset 0 -1px 0 rgba(17, 17, 17, .08);
}

.app-sortie__groupe img {
  flex: none;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  object-fit: cover;
}

.app-sortie__groupe b {
  display: block;
  color: #111;
  font: 700 .64em/1.2 var(--sans);
}

.app-sortie__groupe small {
  display: block;
  color: #8b8783;
  font: 500 .55em/1.25 var(--sans);
}

.app-sortie > b {
  margin-top: .8em;
  font-size: .86em;
}

.app-sortie .prop-app__vote {
  align-items: center;
}

.app-sortie .flot__faces {
  margin-left: auto;
}

.app-sortie .flot__faces img {
  width: 1.75em;
  height: 1.75em;
  box-shadow: 0 0 0 .15em #fff;
}

.app-sortie .flot__faces img + img {
  margin-left: -.55em;
}

.app-sortie .chat-ok {
  margin: .7em 0 0;
}

.app-cree__ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background: #1d1c1b;
  color: #fff;
}

.app-cree__ic svg {
  width: 1.05em;
  height: 1.05em;
}

.app-poker .app-cree__ic {
  width: 2.3em;
  height: 2.3em;
  box-shadow: 0 0 0 .17em var(--orange);
}

.app-cree__etat {
  display: grid;
  margin-top: .75em;
}

.app-cree__etat > span {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  gap: .45em;
  font: 600 .6em/1.2 var(--sans);
}

.app-cree__cherche {
  color: #8b8783;
}

.app-cree__cherche i {
  flex: none;
  width: .7em;
  height: .7em;
  border-radius: 50%;
  background: var(--orange);
}

.anim .une__pin[data-etat="5"] .app-cree__cherche i {
  animation: cherche .8s ease-in-out infinite alternate;
}

@keyframes cherche {
  from { opacity: .25; transform: scale(.7); }
  to { opacity: 1; transform: scale(1.1); }
}

.app-cree__propose {
  color: #d4500c;
}

.app-cree__propose svg {
  flex: none;
  width: 1.25em;
  height: 1.25em;
}

.app-cree__partants {
  display: flex;
  align-items: center;
  gap: .55em;
  margin-top: .7em;
}

.app-cree__partants b {
  color: #111;
  font: 700 .66em/1 var(--sans);
}

.app-cree .flot__faces {
  margin-left: 0;
}

.app-cree .flot__faces img {
  width: 1.9em;
  height: 1.9em;
  box-shadow: 0 0 0 .15em #fff;
}

.app-cree .flot__faces img + img {
  margin-left: -.55em;
}

/* La recherche, puis l'activité proposée, puis les premiers partants */
.anim .app-cree__propose,
.anim .app-cree__partants {
  opacity: 0;
  transform: translate3d(0, .5em, 0);
  transition: opacity .35s ease, transform .5s var(--ease);
}

.anim .une__pin[data-etat="5"] .app-cree__cherche {
  animation: cherche-fin 1.6s ease forwards;
}

@keyframes cherche-fin {
  0%, 80% { opacity: 1; }
  100% { opacity: 0; }
}

.anim .une__pin[data-etat="5"] .app-cree__propose {
  opacity: 1;
  transform: none;
  transition-delay: 1.55s;
}

.anim .une__pin[data-etat="5"] .app-cree__partants {
  opacity: 1;
  transform: none;
  transition-delay: 2.4s;
}

/* ── Les cartes qui sortent du téléphone ─────────────────── */

.flot {
  position: absolute;
  z-index: 9;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 1.4em, 0) scale(.94);
  transition: opacity .45s ease, transform .75s var(--ease), visibility 0s linear .75s;
  pointer-events: none;
}

.une__pin[data-etat="0"] .flot--sortie,
.une__pin[data-etat="1"] .flot--sortie,
.une__pin[data-etat="6"] .flot--sortie,
.une__pin[data-etat="0"] .flot--envie,
.une__pin[data-etat="6"] .flot--envie,
.une__pin[data-etat="3"] .flot--lea,
.une__pin[data-etat="4"] .flot--ok:not(.flot--poker),
.une__pin[data-etat="5"] .flot--poker {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: .15s, .15s, 0s;
}

.une__pin[data-etat="4"] .flot--ok {
  transition-delay: 1.9s, 1.9s, 0s;
}

.une__pin[data-etat="5"] .flot--poker {
  transition-delay: 2.9s, 2.9s, 0s;
}

.une__pin[data-etat="3"] .flot--lea {
  transition-delay: 1.05s, 1.05s, 0s;
}

.flot--sortie {
  left: -60%;
  top: 43%;
  width: 17em;
  overflow: hidden;
  border-radius: 1.45em;
  background: #fff;
  box-shadow: 0 2.6em 4.4em -2.2em rgba(17, 17, 17, .45), 0 .6em 1.5em -1em rgba(17, 17, 17, .2);
}

.flot__photo {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.flot__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

.flot__photo span {
  position: absolute;
  left: .75em;
  top: .75em;
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .45em .8em;
  border-radius: 1em;
  background: #fff;
  color: #111;
  font: 700 .62em/1 var(--sans);
}

.flot__photo svg {
  width: 1.3em;
  height: 1.3em;
}

.flot__corps {
  padding: .85em 1em 1em;
}

.flot__corps > b {
  display: block;
  color: #111;
  font: 700 1.15em/1.1 var(--sans);
  letter-spacing: -.01em;
}

.flot__corps > small {
  display: block;
  margin-top: .3em;
  color: #8b8783;
  font: 500 .66em/1.3 var(--sans);
}

.flot__bas {
  display: flex;
  align-items: center;
  gap: .5em;
  margin-top: .75em;
  color: #3a3835;
  font: 600 .62em/1 var(--sans);
}

.flot__faces {
  display: flex;
  flex: none;
}

.flot__faces img {
  width: 2.6em;
  height: 2.6em;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 .2em #fff;
}

.flot__faces img + img {
  margin-left: -.8em;
}

.flot__go {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  margin-left: auto;
  padding: .6em .9em;
  border-radius: 1.2em;
  background: var(--orange);
  color: #fff;
  font-weight: 700;
}

.flot__go svg {
  width: 1.3em;
  height: 1.3em;
}

.flot--envie {
  right: -56%;
  top: 15%;
  display: flex;
  gap: .7em;
  width: 15.5em;
  padding: .65em;
  border-radius: 1.2em;
  background: #fff;
  box-shadow: 0 2.4em 4.2em -2.2em rgba(17, 17, 17, .45), 0 .6em 1.5em -1em rgba(17, 17, 17, .2);
}

.flot--lea {
  right: -50%;
  top: 21%;
  display: flex;
  gap: .75em;
  width: 15.5em;
  padding: .65em;
  border-radius: 1.2em;
  background: #fff;
  box-shadow: 0 2.4em 4.2em -2.2em rgba(17, 17, 17, .45), 0 .6em 1.5em -1em rgba(17, 17, 17, .2);
}

.flot--lea > img {
  flex: none;
  width: 4.4em;
  height: 5.6em;
  border-radius: .85em;
  object-fit: cover;
  object-position: 61% 24%;
}

.flot--lea b {
  color: #111;
  font: 700 .9em/1.15 var(--sans);
}

.flot--lea small {
  color: #8b8783;
  font: 500 .6em/1.2 var(--sans);
}

.flot--lea .app-puces {
  margin-top: .5em;
}

.flot__commun {
  display: flex;
  align-items: center;
  gap: .35em;
  margin-top: .6em;
  color: #e4570f;
  font: 700 .6em/1.2 var(--sans);
}

.flot__commun svg {
  flex: none;
  width: 1.3em;
  height: 1.3em;
}

.flot--ok {
  left: -58%;
  bottom: 37%;
  display: flex;
  align-items: center;
  gap: .7em;
  padding: .95em 1.15em;
  border-radius: 1.1em;
  background: var(--encre);
  color: var(--creme);
  font: 500 .78em/1.3 var(--sans);
  white-space: nowrap;
  box-shadow: 0 2em 3.6em -2em rgba(17, 17, 17, .6);
}

/* Version fixe : pas de cartes volantes, le téléphone suffit */
html:not(.anim) .flot {
  display: none;
}

/* Version fixe sur grand écran : les occasions à gauche, le téléphone à droite */
@media (min-width: 1000px) {
  html:not(.anim) .une__pin {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: clamp(56px, 7vw, 140px);
    align-items: center;
    padding-left: max(var(--gutter), calc(50% - var(--max) / 2));
    padding-right: max(var(--gutter), calc(50% - var(--max) / 2));
  }

  html:not(.anim) .une {
    grid-column: 1 / -1;
  }

  html:not(.anim) .occasions {
    width: auto;
    margin-top: 88px;
  }

  html:not(.anim) .tel {
    margin: 88px clamp(0px, 4vw, 64px) 0 0;
  }
}

/* ── Écrans moyens ─────────────────────────────────────────── */

@media (max-width: 1199px) and (min-width: 1000px) {
  .une-scene {
    --tel-cx: calc(50% + min(var(--max), 100vw - 2 * var(--gutter)) * .3);
  }

  .anim .occasions {
    width: 40%;
  }

  .flot--sortie {
    left: -36%;
  }

  .flot--envie {
    right: -22%;
  }

  .flot--lea {
    right: -26%;
  }

  .ea--1 {
    --dx: -3.4em;
  }

  .ea--2 {
    --dx: .6em;
  }

  .ea--3 {
    --dx: -2.2em;
  }
}

/* ── Tablette et téléphone : le texte en haut, le téléphone dessous ── */

@media (max-width: 999px) {
  .une-scene {
    --zone-texte: clamp(150px, 26svh, 230px);
    --tel-h: min(680px, calc(100svh - var(--header-h) - var(--zone-texte) - 22px));
    --tel-cx: 50%;
  }

  .anim .tel {
    top: calc(var(--header-h) + var(--zone-texte) + 8px);
    margin-top: 0;
  }

  .anim .occasions {
    left: var(--gutter);
    right: var(--gutter);
    top: calc(var(--header-h) + 14px);
    width: auto;
    height: var(--zone-texte);
    transform: none;
  }

  .anim .occasions__liste {
    height: 100%;
  }

  .anim .occasion {
    align-self: start;
  }

  .occasion h2 {
    max-width: 14em;
    font-size: clamp(1.8rem, 1.15rem + 3.2vw, 2.7rem);
  }

  .occasion p {
    margin-top: 10px;
    font-size: 1rem;
  }

  .anim .occasions__suivi {
    position: absolute;
    left: 0;
    bottom: 4px;
    margin: 0;
  }

  .flot--sortie {
    left: -15%;
    top: 47%;
    width: 14em;
  }

  .flot--envie {
    right: -14%;
    top: 14%;
    width: 14em;
  }

  .flot--lea {
    right: -16%;
    top: 4%;
    width: 14.5em;
  }

  .envies-amis {
    font-size: 1.06em;
  }

  .ea {
    width: 21.5em;
    margin-left: -10.75em;
  }

  .ea--1 {
    --dx: -1.2em;
    top: 10%;
  }

  .ea--2 {
    --dx: 1.2em;
    top: 36%;
  }

  .ea--3 {
    --dx: -.6em;
    top: 62%;
  }

  /* La conversation affiche déjà « Confirmée » : pas de carte en plus sur petit écran */
  .flot--ok {
    display: none;
  }
}

/* Tablette : le texte des occasions centré au-dessus du téléphone */
@media (min-width: 700px) and (max-width: 999px) {
  .occasion {
    text-align: center;
  }

  .occasion h2,
  .occasion p {
    margin-left: auto;
    margin-right: auto;
  }

  .anim .occasions__suivi {
    left: 50%;
    transform: translateX(-50%);
  }
}

@media (max-width: 640px) {
  .une__titre {
    font-size: clamp(2.35rem, 1.2rem + 5.4vw, 3.2rem);
  }

  .une__lead {
    font-size: 1.0625rem;
  }

  .tel {
    margin-top: 40px;
  }
}

/* ── Après le début : plus de vidéo, une phrase en un seul bloc court ── */
.ville-court {
  padding: clamp(40px, 7svh, 88px) 0 clamp(56px, 9svh, 110px);
  background: var(--creme);
}

.ville-court__texte {
  max-width: 26em;
  margin: 0 auto;
  color: var(--encre);
  font: 500 clamp(1.55rem, 1.05rem + 1.8vw, 2.5rem)/1.22 var(--sans);
  letter-spacing: -.015em;
  text-align: center;
  text-wrap: balance;
}

.ville-court__texte span {
  display: block;
  color: var(--gris);
}