/* ══════════════════════════════════════════════════════════════════
   GROOMLY — « Ce que ça donne sur votre téléphone »

   Une section qui descend etape par etape. La colonne de gauche est
   collee (position: sticky) et porte un telephone dessine ; la colonne
   de droite fait defiler cinq etapes. Quand une etape passe la ligne de
   lecture, l'ecran du telephone change.

   TROIS CHOIX QUI COMPTENT

   1. Le telephone est DESSINE, pas photographie. Aucune image a charger,
      il est net sur tous les ecrans, et le jour ou l'application change
      il se corrige dans le gabarit. Les cinq photos du site sont deja
      utilisees dans le hero et dans le bloc du dessus : en remettre ici
      aurait donne la meme page trois fois.

   2. Les etapes inactives ne sont PAS grisees. Baisser l'opacite d'un
      paragraphe pour « mettre en avant » celui du milieu casse le
      contraste et rend le texte illisible pour une partie des gens.
      L'etape active se signale autrement : carte blanche, ombre, point
      plein sur le rail. Le texte reste lisible partout.

   3. Sans JavaScript, le premier ecran reste affiche et les cinq etapes
      sont lisibles d'affilee. La classe « est-pilote » n'est posee par
      le script que lorsqu'il peut effectivement piloter l'ecran.
   ══════════════════════════════════════════════════════════════════ */

.et {
  --et-encre:      var(--encre, #18181b);
  --et-gris:       var(--gris, #71717a);
  --et-gris-clair: var(--gris-clair, #a1a1aa);
  --et-trait:      var(--trait, #e7e7ec);
  --et-fond:       var(--fond, #fbfbfd);
  --et-blanc:      var(--blanc, #ffffff);
  --et-rose:       var(--rose, #f43f5e);
  --et-rose-fonce: var(--rose-fonce, #e11d48);
  --et-max:        var(--max, 1180px);

  position: relative; isolation: isolate;
  background: var(--et-fond);
  border-top: 1px solid var(--et-trait);
  padding: 76px 20px 88px;
}
@media (min-width: 900px) { .et { padding: 108px 24px 120px; } }

/* ── Les nappes colorees, dans leur propre calque ─────────────────
   PAS d'« overflow: hidden » sur la section pour les rogner, comme sur
   le bloc du dessus. Un ascendant en overflow autre que « visible »
   devient le conteneur de defilement d'un element colle : le telephone
   se serait colle a une boite qui ne defile pas, donc pas colle du
   tout, et il serait parti des la deuxieme etape. Le rognage est
   confie a un calque de fond dedie — c'est deja ce que fait le hero. */
.et-fond { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.et-fond span { position: absolute; border-radius: 50%; }
.et-fond span:nth-child(1) {
  top: -14%; left: -16%; width: 54vw; height: 54vw; max-width: 640px; max-height: 640px;
  background: radial-gradient(circle, rgba(139,92,246,.14) 0%, rgba(139,92,246,0) 70%);
}
.et-fond span:nth-child(2) {
  bottom: -20%; right: -14%; width: 50vw; height: 50vw; max-width: 600px; max-height: 600px;
  background: radial-gradient(circle, rgba(244,63,94,.15) 0%, rgba(244,63,94,0) 70%);
}

/* ══ LA GRILLE ═══════════════════════════════════════════════════
   En une colonne c'est « display: block », PAS une grille a une
   colonne — et ce n'est pas un detail de style. Un element colle est
   retenu par son bloc conteneur : dans une grille, c'est sa propre
   case. La scene se serait retrouvee collee a une case exactement de
   sa taille, c'est-a-dire pas collee du tout, et elle serait partie
   avec le defilement des la premiere etape. En bloc, son conteneur est
   toute la zone — elle tient jusqu'a la derniere etape. */
.et-grille { display: block; margin-top: 38px; }
.et-grille > * { min-width: 0; }
@media (min-width: 900px) {
  .et-grille {
    display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
    gap: 64px; align-items: start; margin-top: 54px;
  }
}

/* ══ LA SCENE COLLEE ═════════════════════════════════════════════
   En colonne (telephone au-dessus du texte), la scene a besoin d'un
   fond opaque : sinon les etapes defilent visiblement derriere le
   telephone. En deux colonnes, plus rien ne passe dessous, on rend le
   fond a la section et ses nappes colorees reapparaissent. */
.et-scene {
  /* Le decalage vaut exactement la hauteur de la barre, et l'air se met
     en PADDING a l'interieur : ainsi le fond opaque de la scene
     commence pile sous la barre. Avec « top: barre + 10px », il restait
     dix pixels ou le texte de l'etape precedente defilait a decouvert. */
  position: sticky; top: var(--nv-hauteur, 68px); z-index: 2;
  display: flex; justify-content: center;
  padding: 22px 0 16px; background: var(--et-fond);
}
.et-scene::after {
  content: ""; position: absolute; left: -20px; right: -20px; top: 100%; height: 28px;
  background: linear-gradient(var(--et-fond), rgba(251,251,253,0)); pointer-events: none;
}
@media (min-width: 900px) {
  .et-scene { top: calc(var(--nv-hauteur, 68px) + 54px); background: none; padding: 0; }
  .et-scene::after { display: none; }
}

/* Le halo derriere le telephone. Enfant de la scene, donc peint
   au-dessus de son fond opaque — sinon il disparaissait sur mobile. */
.et-halo {
  position: absolute; z-index: 0; top: 8%; left: 50%; transform: translateX(-50%);
  width: 108%; max-width: 420px; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(244,63,94,.30) 0%, rgba(139,92,246,.18) 42%, rgba(244,63,94,0) 70%);
  filter: blur(34px); pointer-events: none;
}

/* ══ LE TELEPHONE ════════════════════════════════════════════════
   Bords fins, coins tres arrondis, ile dynamique : la silhouette d'un
   iPhone recent. Tout est en CSS — aucune image d'appareil a charger,
   et rien qui appartienne a Apple n'est copie : c'est une silhouette,
   pas un logo.

   La bordure claire sur le cadre noir imite le chant en titane qui
   accroche la lumiere. Sans elle, un telephone dessine ressemble a un
   rectangle noir pose sur la page. */
.et-tel {
  position: relative; z-index: 1;
  width: clamp(178px, 50vw, 268px); aspect-ratio: 9 / 19.3;
  background: linear-gradient(150deg, #44444f, #16161f 20%, #0c0c14 68%, #35353f);
  padding: 1.3%;
  border-radius: 15% / 7%;
  box-shadow: 0 44px 88px -44px rgba(12, 12, 30, .62),
              0 3px 10px rgba(12, 12, 30, .16);
}
@media (min-width: 900px) { .et-tel { width: clamp(228px, 23vw, 268px); } }

/* Les boutons physiques, en relief sur la tranche. */
.et-tel::before, .et-tel::after {
  content: ""; position: absolute; width: 2px; border-radius: 2px;
  background: linear-gradient(#4a4a55, #23232c);
}
.et-tel::before { left: -2px; top: 17%; height: 7%; }
.et-tel::after  { right: -2px; top: 21%; height: 11%; }

.et-ecrans {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  /* Le rayon de la dalle suit celui du cadre moins l'epaisseur du
     bord : sinon un lisere noir apparait dans les quatre coins. */
  border-radius: 14.2% / 6.6%; background: var(--et-blanc);
}

/* L'ile dynamique et la barre d'onglets appartiennent a l'application,
   pas a un ecran : posees une fois au-dessus de la pile, elles ne
   clignotent pas a chaque changement d'etape. */
.et-ile {
  position: absolute; z-index: 5; top: 2.2%; left: 50%; transform: translateX(-50%);
  width: 30%; height: 3.4%; min-height: 13px; border-radius: 99px; background: #08080d;
}

.et-onglets {
  position: absolute; z-index: 4; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-around; align-items: center;
  padding: 5px 4px 9px;
  background: rgba(255,255,255,.94); border-top: 1px solid #ececf1;
  backdrop-filter: blur(8px);
}
.et-onglets span {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: .38rem; font-weight: 600; color: var(--et-gris-clair);
}
.et-onglets svg { width: 11px; height: 11px; }
.et-onglets .est-la { color: var(--et-rose-fonce); }

.et-poignee {
  position: absolute; z-index: 6; bottom: 3px; left: 50%; transform: translateX(-50%);
  width: 32%; height: 2.5px; border-radius: 2px; background: rgba(12,12,22,.32);
}

.et-ecran {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  padding: 7.5% 6% 0; text-align: left;
  opacity: 0; transform: translateY(9px);
  transition: opacity .42s cubic-bezier(.25,.4,.25,1), transform .42s cubic-bezier(.25,.4,.25,1);
}
.et-ecran-1 { opacity: 1; transform: none; }          /* etat sans JavaScript */
.et-ecrans.est-pilote .et-ecran { opacity: 0; transform: translateY(9px); }
.et-ecrans.est-pilote .et-ecran.est-actif { opacity: 1; transform: none; }

/* Le corps defile sous la barre d'onglets : la marge du bas lui laisse
   la place, sinon la derniere ligne de chaque ecran passait dessous. */
.et-corps {
  flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px;
  padding-bottom: 40px;
}

/* ── La barre d'etat ──────────────────────────────────────────── */
.et-etat {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .5rem; font-weight: 700; color: var(--et-encre); letter-spacing: -.02em;
  margin-bottom: 6px; padding: 0 2px;
}
.et-icones { display: flex; align-items: center; gap: 3px; }
.et-icones svg { width: 9px; height: 9px; color: var(--et-encre); }

/* ── Les briques d'interface ──────────────────────────────────── */
.et-ecran h4 {
  margin: 0 0 2px; font-size: .74rem; font-weight: 800; letter-spacing: -.03em;
  color: var(--et-encre); line-height: 1.2;
}
.et-ecran p { margin: 0; }

.et-label {
  font-size: .38rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--et-gris-clair); margin-top: 2px;
}

.et-carte {
  border: 1px solid #ececf1; border-radius: 9px; background: #fff;
  box-shadow: 0 2px 5px -3px rgba(20,20,45,.14);
  padding: 7px 8px; display: flex; flex-direction: column; gap: 5px;
}

.et-champ {
  display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
  font-size: .46rem; color: var(--et-gris);
}
.et-champ b { font-size: .52rem; font-weight: 700; color: var(--et-encre); }
.et-champ + .et-champ { border-top: 1px solid #f1f1f5; padding-top: 5px; }

.et-puces { display: flex; flex-wrap: wrap; gap: 4px; }
.et-puce {
  font-size: .42rem; font-weight: 600; padding: 3px 6px; border-radius: 99px;
  background: rgba(244,63,94,.09); color: var(--et-rose-fonce);
  border: 1px solid rgba(244,63,94,.22);
}
.et-puce-gris { background: #f4f4f7; color: var(--et-gris); border-color: #ececf1; }

.et-total {
  margin-top: auto; padding: 8px 9px; border-radius: 10px;
  background: linear-gradient(140deg, #1b1b28, #0f0f18); color: #fff;
}
.et-total span { display: block; font-size: .38rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.52); }
.et-total b { display: block; font-size: .88rem; font-weight: 800; letter-spacing: -.03em; margin-top: 1px; }
.et-total em { display: block; font-style: normal; font-size: .42rem; color: rgba(255,255,255,.60); margin-top: 2px; }

.et-bouton {
  display: block; text-align: center; padding: 7px; border-radius: 9px;
  background: var(--et-rose-fonce); color: #fff;
  font-size: .5rem; font-weight: 700;
  box-shadow: 0 6px 14px -8px rgba(225,29,72,.85);
}
.et-bouton-ligne {
  background: #fff; color: var(--et-encre);
  border: 1px solid #e4e4ea; box-shadow: none;
}

/* Le bandeau d'etat de la mission. */
.et-bandeau {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 8px; border-radius: 8px;
  background: rgba(244,63,94,.08); border: 1px solid rgba(244,63,94,.2);
  font-size: .46rem; font-weight: 700; color: var(--et-rose-fonce);
}
.et-bandeau svg { width: 10px; height: 10px; flex: none; }

/* Le Groom */
.et-groom { display: flex; align-items: center; gap: 7px; }
.et-avatar {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(140deg, #f43f5e, #8b5cf6);
  display: flex; align-items: center; justify-content: center;
}
.et-avatar svg { width: 13px; height: 13px; color: #fff; }
.et-groom div b { display: block; font-size: .52rem; font-weight: 700; color: var(--et-encre); }
.et-groom div span { display: block; font-size: .42rem; color: var(--et-gris); margin-top: 1px; }

.et-ligne {
  display: flex; align-items: flex-start; gap: 5px;
  font-size: .45rem; line-height: 1.35; color: var(--et-encre);
}
.et-ligne svg { flex: none; width: 9px; height: 9px; margin-top: 1px; color: var(--et-rose-fonce); }
.et-ligne span { color: var(--et-gris); }

/* « .et-ecran p » vaut (0,2,1) et « .et-note » (0,1,0) : sans ce
   prefixe, la remise a zero des marges gagnait et la note remontait
   se coller aux lignes du dessus au lieu de descendre en pied d'ecran. */
.et-ecran .et-note {
  font-size: .4rem; line-height: 1.4; color: var(--et-gris-clair);
  margin-top: auto; padding-top: 6px;
}

/* Les photos : des paves dessines, pas des images a telecharger. */
.et-vues { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.et-vue {
  position: relative; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden;
  background: linear-gradient(135deg, #e6e6ec, #f3f3f6 55%, #dcdce4);
}
.et-vue::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 12px; height: 10px;
  border: 1.4px solid rgba(24,24,27,.22); border-radius: 2.5px;
}
.et-vue b {
  position: absolute; left: 3px; bottom: 3px; z-index: 1;
  font-size: .36rem; font-weight: 700; color: #fff;
  background: rgba(12,12,22,.62); padding: 1px 3px; border-radius: 3px;
}

/* Fin de mission */
.et-fini { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; text-align: center; }
.et-sceau {
  width: 52px; height: 52px; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(244,63,94,.18), rgba(244,63,94,.07));
  border: 1.6px solid rgba(244,63,94,.34);
  display: flex; align-items: center; justify-content: center; margin-bottom: 3px;
}
.et-sceau svg { width: 24px; height: 24px; color: var(--et-rose-fonce); }
.et-fini > b { font-size: .78rem; font-weight: 800; letter-spacing: -.03em; color: var(--et-encre); }
.et-fini > span { font-size: .46rem; color: var(--et-gris); }

/* ══ LES ETAPES ══════════════════════════════════════════════════ */
/* --et-queue : du vide APRES la derniere etape. Sans lui, la zone que
   le telephone a le droit d'occuper s'arrete pile a la derniere carte,
   et le telephone commence a remonter pendant qu'on lit encore cette
   etape. Le rail compense la meme valeur pour ne pas courir dans ce
   vide : ses deux extremites restent sur le premier et le dernier
   point. */
.et-liste {
  --et-queue: 8vh;
  position: relative; list-style: none; margin: 28px 0 0; padding: 0 0 var(--et-queue) 30px;
}
@media (min-width: 900px) { .et-liste { --et-queue: 16vh; margin-top: 0; padding-left: 34px; } }

/* Le rail, et sa part parcourue. */
.et-liste::before, .et-liste::after {
  content: ""; position: absolute; left: 5px; width: 2px; border-radius: 2px;
  top: 44px; bottom: calc(44px + var(--et-queue));
}
@media (min-width: 900px) { .et-liste::before, .et-liste::after { left: 9px; } }
.et-liste::before { background: var(--et-trait); }
.et-liste::after {
  background: linear-gradient(var(--et-rose), var(--et-rose-fonce));
  transform: scaleY(var(--et-parcours, 0)); transform-origin: top center;
  transition: transform .5s cubic-bezier(.25,.4,.25,1);
}

/* L'espace entre deux etapes est une MARGE, pas une hauteur minimale.
   Avec « min-height », la carte blanche s'etirait sur 40 % de l'ecran
   autour de trois lignes de texte : un grand rectangle vide. Avec une
   marge, la carte epouse son texte et le vide reste du vide. */
.et-pas {
  position: relative; padding: 24px 22px; border-radius: 16px;
  margin-block: 11vh;
  border: 1px solid transparent;
  transition: background .42s ease, box-shadow .42s ease, border-color .42s ease;
}
.et-pas:first-child { margin-top: 0; }
.et-pas:last-child { margin-bottom: 0; }
@media (min-width: 900px) { .et-pas { margin-block: 15vh; padding: 28px 26px; } }
.et-pas.est-actif {
  background: var(--et-blanc); border-color: var(--et-trait);
  box-shadow: 0 24px 50px -34px rgba(20, 20, 45, .34);
}

/* Le point du rail, a hauteur du numero de l'etape. Le decalage est le
   meme aux deux mises en page : le rail se deplace de 4 px et le
   retrait de la liste de 4 px aussi, les deux se compensent. */
.et-pas::before {
  content: ""; position: absolute; left: -30px; top: 38px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--et-fond); border: 2px solid var(--et-trait);
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.et-pas.est-actif::before {
  background: var(--et-rose-fonce); border-color: var(--et-rose-fonce);
  box-shadow: 0 0 0 5px rgba(244, 63, 94, .15);
}

.et-num {
  font-size: .7rem; font-weight: 800; letter-spacing: .1em;
  color: var(--et-gris-clair); transition: color .3s ease;
}
.et-pas.est-actif .et-num { color: var(--et-rose-fonce); }

.et-pas h3 {
  margin: 8px 0 0; font-size: clamp(1.12rem, 2.4vw, 1.4rem); font-weight: 800;
  letter-spacing: -.03em; line-height: 1.2; color: var(--et-encre);
}
.et-pas p {
  margin: 10px 0 0; font-size: .95rem; line-height: 1.62;
  color: var(--et-gris); max-width: 46ch;
}

/* ══ LE PIED DE SECTION ══════════════════════════════════════════ */
.et-pied {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px;
  margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--et-trait);
}
.et-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 22px; border-radius: 12px;
  background: var(--et-encre); color: #fff;
  font-size: .95rem; font-weight: 600; letter-spacing: -.01em;
  transition: background .2s ease, transform .2s ease;
}
.et-btn:hover { background: #000; transform: translateY(-1px); }
.et-btn svg { width: 17px; height: 17px; }
.et-mention { margin: 0; font-size: .85rem; line-height: 1.55; color: var(--et-gris-clair); max-width: 46ch; }

/* ══ PREFERENCE SYSTEME ══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .et-ecran, .et-pas, .et-liste::after, .et-pas::before, .et-btn { transition: none; }
  .et-ecran { transform: none; }
  .et-ecrans.est-pilote .et-ecran { transform: none; }
  .et-btn:hover { transform: none; }
}