/* La page app reprend les blocs que la home portait (bento, recompenses,
   comparatifs): elle charge la feuille de la home juste avant celle-ci,
   via la liste pageCss du layout, plutot qu'un @import qui bloquait le
   rendu le temps d'un second aller-retour reseau. */

.app-hero h1 {
  font-size: var(--dop-fs-hero);
  font-weight: 800;
  line-height: var(--dop-lh-tight);
  letter-spacing: var(--dop-tracking-hero);
}
/* Deux ecrans de la beta, poses l'un sur l'autre. Les captures sont des
   exports a 1x: elles restent petites pour rester nettes. */
.app-hero-shots {
  display: grid;
  justify-items: center;
  align-items: center;
  margin: 0;
  padding-block: 12px;
}
.app-shot {
  grid-area: 1 / 1;
  width: 230px;
  height: auto;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .5);
}
.app-shot--front { z-index: 2; transform: translateX(-46px) rotate(-1.4deg); }
.app-shot--back { z-index: 1; transform: translate(64px, 26px) rotate(5deg); filter: brightness(.82); }

@media (max-width: 560px) {
  .app-shot { width: 180px; border-radius: 24px; }
  .app-shot--front { transform: translateX(-36px) rotate(-1.4deg); }
  .app-shot--back { transform: translate(50px, 20px) rotate(5deg); }
}

#beta .discord-cta { margin-top: clamp(36px, 4vw, 52px); }

/* ---------- ECOSYSTEME ----------
   Texte a gauche, Dopa a droite: detoure, donc pas de cadre, juste une
   ombre qui suit son alpha. La legende manuscrite est le geste de la section. */
.eco-split {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.eco-copy h2 {
  margin: 0;
  font-size: var(--dop-fs-section);
  font-weight: 800;
  line-height: var(--dop-lh-snug);
  letter-spacing: var(--dop-tracking-section);
}
.eco-copy p:not(.eyebrow) {
  margin: 22px 0 0;
  max-width: 600px;
  font-size: var(--dop-fs-lead);
  line-height: var(--dop-lh-normal);
  color: var(--dop-ink-2);
}
.eco-dopa { margin: 0; text-align: center; }
.eco-dopa img {
  width: min(320px, 100%);
  height: auto;
  filter: drop-shadow(0 0 40px rgba(221, 75, 149, .3)) drop-shadow(0 22px 34px rgba(0, 0, 0, .45));
}
.eco-dopa figcaption {
  margin-top: 14px;
  color: var(--dop-ink-3);
  font-family: var(--dop-font-hand);
  font-weight: 700;
  font-size: 24px;
  transform: rotate(-3deg);
}

@media (max-width: 920px) {
  .eco-split { grid-template-columns: 1fr; }
  .eco-dopa img { width: min(240px, 70%); }
}

/* ---------- Recompenses sur telephone ----------
   Les trois coffres empiles en grand faisaient presque deux ecrans: chaque
   etape devient une ligne, le coffre a gauche, le texte a droite. */
@media (max-width: 620px) {
  .chest-flow { grid-template-columns: 1fr; gap: 14px; }
  .chest-step { flex-direction: row; align-items: center; gap: 16px; text-align: left; }
  .chest-step img { width: 108px; flex: none; }
  .chest-step::before { width: 108px; top: 50%; left: 54px; transform: translate(-50%, -50%); }
  .chest-step figcaption { margin-top: 0; max-width: none; gap: 4px; }
}

/* ---------- Le parcours de la beta ----------
   Cinq ecrans dans l'ordre ou on les traverse: le numero porte l'accent.
   Les captures suivent la regle des screenshots (-1.4deg, rayon 30px,
   bord blanc 12%) et restent a 220px, leur taille d'export. */
.screen-flow {
  list-style: none;
  counter-reset: screen;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 32px);
  max-width: 1360px;
  margin: 0 auto;
  padding: 12px clamp(20px, 4vw, 48px) 16px;
}
.screen-step {
  counter-increment: screen;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.screen-step img {
  width: min(100%, 220px);
  height: auto;
  margin-bottom: 22px;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 24px 48px rgba(0, 0, 0, .45);
  transform: rotate(-1.4deg);
}
.screen-step b {
  font-family: var(--dop-font-display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: var(--dop-tracking-tight);
}
.screen-step b::before {
  content: counter(screen, decimal-leading-zero);
  display: block;
  margin-bottom: 4px;
  color: var(--dop-primary);
  font-size: 14px;
}
.screen-step span {
  margin-top: 6px;
  max-width: 230px;
  color: var(--dop-ink-2);
  font-size: 14px;
  line-height: 1.6;
}
.screens-more { margin-top: clamp(28px, 3vw, 40px); text-align: center; color: var(--dop-ink-2); }
.screens-more a { display: inline-block; padding-block: 10px; color: var(--dop-primary); font-weight: 700; }

/* Sous 1100px, cinq colonnes deviennent trop etroites: le parcours passe
   en bande qu'on fait glisser, l'ecran suivant depasse pour l'annoncer. */
@media (max-width: 1100px) {
  .screen-flow {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: clamp(20px, 4vw, 48px);
    scrollbar-width: none;
  }
  .screen-flow::-webkit-scrollbar { display: none; }
  .screen-step { flex: 0 0 min(62vw, 240px); scroll-snap-align: start; }
}

/* ---------- La beta en schema ----------
   Deux etapes qu'on ne fait qu'une fois (rejoindre, postuler), relieees par
   une fleche, puis une boucle entre "installer" et "signaler": c'est le
   vrai fonctionnement de la beta. Les visuels sont detoures, sans cadre;
   seule la capture garde le sien. Le numero porte l'accent. */
.beta-map {
  list-style: none;
  counter-reset: beta;
  display: grid;
  grid-template-columns:
    minmax(0, 1fr) 72px minmax(0, 1fr) 72px
    minmax(0, 1fr) 150px minmax(0, 1fr);
  align-items: start;
  margin: 0;
  padding: 0;
}
.beta-stop {
  counter-increment: beta;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.beta-visual {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 170px;
  margin-bottom: 20px;
}
/* Un halo rose sous chaque visuel; il s'intensifie dans la boucle. */
.beta-visual::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 170px;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(221, 75, 149, .18), transparent 68%);
  z-index: -1;
}
.beta-stop--loop .beta-visual::before {
  background: radial-gradient(circle, rgba(221, 75, 149, .30), transparent 70%);
}
.beta-visual > img {
  width: auto;
  height: 140px;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .45));
}
.beta-visual > img.beta-phone {
  height: 170px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  transform: rotate(-1.4deg);
  filter: none;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .5);
}
.beta-icon { position: relative; display: block; width: 116px; margin-bottom: 12px; }
.beta-icon img { display: block; width: 100%; height: auto; filter: drop-shadow(0 12px 28px rgba(221, 75, 149, .35)); }
.beta-badge {
  position: absolute;
  right: -10px;
  bottom: -10px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--dop-primary);
  color: #fff;
  box-shadow: 0 0 0 4px var(--dop-bg);
}
.beta-badge svg { width: 22px; height: 22px; }

.beta-stop b {
  font-family: var(--dop-font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: var(--dop-tracking-tight);
}
.beta-stop b::before {
  content: counter(beta, decimal-leading-zero);
  display: block;
  margin-bottom: 4px;
  color: var(--dop-primary);
  font-size: 14px;
}
.beta-stop span {
  margin-top: 6px;
  max-width: 240px;
  color: var(--dop-ink-2);
  font-size: 15px;
  line-height: 1.6;
}

/* Les fleches et la boucle se calent sur le milieu des visuels (85px). */
.beta-link {
  display: flex;
  justify-content: center;
  padding-top: 66px;
  color: var(--dop-ink-3);
}
.beta-arrow { width: 64px; height: 30px; }

.beta-cycle {
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: 25px;
  color: var(--dop-primary);
}
.beta-ring { display: block; }
.beta-ring--h { width: 150px; height: 120px; }
.beta-ring--v { display: none; }
/* La seule annotation manuscrite de la section, au centre de la boucle. */
.beta-cycle-label {
  position: absolute;
  left: 50%;
  top: 85px;
  transform: translate(-50%, -50%) rotate(-3deg);
  white-space: nowrap;
  color: var(--dop-ink-2);
  font-family: var(--dop-font-hand);
  font-weight: 700;
  font-size: 20px;
}

/* ---------- La fiche pratique ----------
   Six reponses rapides, une icone au trait chacune, separees par des
   filets: pas de cartes. */
.beta-specs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(20px, 3vw, 40px);
  margin: clamp(52px, 6vw, 80px) 0 0;
  border-top: 1px solid var(--dop-rule);
}
.beta-specs > div {
  padding: 20px 0;
  border-bottom: 1px solid var(--dop-rule);
}
.beta-specs dt {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--dop-ink-3);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--dop-tracking-eyebrow);
  text-transform: uppercase;
}
.beta-spec-icon { flex: none; width: 22px; height: 22px; color: var(--dop-primary); }
.beta-specs dd { margin: 8px 0 0 32px; color: var(--dop-ink-1); font-size: 16px; line-height: 1.5; }

/* ---------- Telephone et tablette: le schema s'empile ----------
   Visuel a gauche, texte a droite; fleches et boucle passent a la
   verticale dans la colonne des visuels. */
@media (max-width: 980px) {
  .beta-map { grid-template-columns: minmax(0, 1fr); }
  .beta-stop {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    column-gap: 18px;
    align-items: center;
    text-align: left;
  }
  .beta-visual { grid-row: 1 / span 2; height: 112px; margin: 0; }
  .beta-visual::before { width: 112px; }
  .beta-visual > img { height: 92px; }
  .beta-visual > img.beta-phone { height: 112px; border-radius: 10px; }
  .beta-icon { width: 78px; margin-bottom: 8px; }
  .beta-badge { width: 32px; height: 32px; right: -8px; bottom: -8px; box-shadow: 0 0 0 3px var(--dop-bg); }
  .beta-badge svg { width: 17px; height: 17px; }
  .beta-stop b { align-self: end; }
  .beta-stop span { align-self: start; max-width: none; }

  .beta-link { width: 104px; padding: 10px 0; }
  .beta-arrow { width: 44px; height: 22px; transform: rotate(90deg); }

  .beta-cycle {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    column-gap: 18px;
    align-items: center;
    padding: 6px 0;
  }
  .beta-ring--h { display: none; }
  .beta-ring--v { display: block; width: 84px; height: 105px; justify-self: center; }
  .beta-cycle-label { position: static; transform: rotate(-3deg); justify-self: start; }

  .beta-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Sur deux colonnes etroites, le retrait sous l'icone coutait une ligne. */
  .beta-specs dd { margin-left: 0; font-size: 15px; }
}

@media (max-width: 380px) {
  .beta-specs { grid-template-columns: minmax(0, 1fr); }
}