/* =============================================================================
   MAISON CLEOPATRE — Accueil : section APPLICATION (Phase 5), avant 01 — LE SEUIL.
   Feuille séparée. Le bouton « INSTALLER MAISON » n'est PAS stylé ici : c'est le
   composant partagé .mc-app-entry du menu mobile (maison.css, V39), à l'identique.

   LANGAGE DE LA CÉRÉMONIE — la séquence reprend la Cérémonie de première entrée
   de l'app (maison-app/src/styles/ceremony.css, screens/FirstEntryCeremony.tsx) :
   mêmes courbes (tokens --ease-out / --ease-in-out), mêmes durées, délais et
   amplitudes pour le fond (noir → blanc, 0,9 s), le logo (apparition 1,2 s depuis
   scale .94, vol 1 s vers le coin haut droit, couleur 0,9 s), les CLEOPATRE
   (entrée par la droite 22 % / 1,035, sortie par la gauche −18 % / .985, délai
   .14 s) et les textes (12 px, 0,62 s + n × 0,08 s).
   Mêmes fichiers que la Cérémonie : /app/looks/look-N-{640,1100,1800}.webp
   (srcset complet), /app/brand/cleopatre-head-{256,512}.webp, /app/brand/wordmark.svg.
   maison-app/tests/unit/showcase.test.ts vérifie ces égalités.

   Composition propre à l'accueil conservée : textes à gauche, iPhone à droite
   (dessous sur mobile). Dans l'écran : la mise en page de la Cérémonie
   (CLEOPATRE à gauche, logo en haut à droite, repères de progression).

   ÉTATS — sans attribut data-seq (sans JS, ou mouvement réduit) : ÉTAT FINAL
   direct, rien n'est retiré (les trois textes lisibles, écran blanc, dernière
   CLEOPATRE, logo au coin). assets/js/app-showcase.js pose data-seq = armed →
   intro → 0 → 1 → 2 une seule fois, puis s'arrête sur 2 (aucune boucle).

   EMPLACEMENT DU MOCKUP : .app-device porte data-device-slot et la variable
   --device-frame (cadre iPhone fourni, écran transparent). Pour changer de
   mockup : nouvelle image (nouveau nom : cache long), --screen-* ci-dessous, puis
   recalculer --as-logo-open / --as-logo-corner (écran de ce mockup :
   hauteur = 2,1687 × largeur).
============================================================================= */
.app-showcase{
  --as-ink:#080807;
  --as-muted:#55524d;
  --as-ease-out:cubic-bezier(0.16, 1, 0.3, 1);
  --as-ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
  /* Focus du composant partagé sur fond blanc (#8f89ff du menu noir : 2,9:1 ici). */
  --mc-app-entry-focus:#342eaa;
  position:relative;
  background:#fff;
  color:var(--as-ink);
  padding:clamp(72px,10vw,150px) var(--pad);
  overflow:hidden;
}
.app-showcase__inner{
  width:min(1200px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(40px,7vw,110px);
  align-items:center;
}
.app-showcase__kicker{
  display:flex;
  gap:16px;
  align-items:center;
  margin:0 0 28px;
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--as-muted);
}
.app-showcase__kicker::before{content:"";width:52px;height:1px;background:currentColor}
.app-showcase__states{
  position:relative;
  display:grid;
  gap:28px;
  margin:0 0 36px;
  padding:0;
  list-style:none;
}
.app-showcase__headline{
  margin:0 0 14px;
  font-family:"MC Archivo Black","Arial Black",var(--sans);
  font-weight:400;
  font-size:clamp(30px,4.6vw,64px);
  line-height:.98;
  letter-spacing:-.01em;
  text-transform:uppercase;
}
.app-showcase__sub{
  margin:0;
  max-width:30ch;
  font-size:clamp(15px,1.4vw,19px);
  line-height:1.5;
  color:var(--as-muted);
}
/* Lignes révélées l'une après l'autre (.cer-line : --n = rang de la ligne). */
.app-showcase__line{display:block}
.app-showcase__sub.app-showcase__line{--n:1}
.app-showcase__headline .app-showcase__line:nth-child(2){--n:1}
.app-showcase__headline .app-showcase__line:nth-child(3){--n:2}
.app-showcase__headline .app-showcase__line:nth-child(4){--n:3}
/* Largeur du bouton : celle du menu sur téléphone (colonne pleine), plafonnée
   à celle d'un grand téléphone au-delà (mêmes proportions). */
.app-showcase__actions{width:min(100%,390px)}
.app-showcase__note{margin:16px 0 0;font-size:13px;color:var(--as-muted)}

/* ---- Appareil (emplacement remplaçable) ---- */
.app-device{
  /* Cadre iPhone fourni (WebP transparent 660×1173) ; écran mesuré sur l'image. */
  --device-frame:url("../img/app-iphone-mockup-v1.webp");
  --screen-left:11.67%;
  --screen-right:11.97%;
  --screen-top:3.41%;
  --screen-bottom:3.41%;
  justify-self:center;
  position:relative;
  width:min(330px,76vw);
  aspect-ratio:660/1173;
  filter:drop-shadow(0 30px 50px rgba(8,8,7,.14));
}
.app-device::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  background:var(--device-frame) center/100% 100% no-repeat;
  pointer-events:none;
}
.app-device__screen{
  position:absolute;
  left:var(--screen-left);
  right:var(--screen-right);
  top:var(--screen-top);
  bottom:var(--screen-bottom);
  border-radius:11% / 5.2%;
  overflow:hidden;
  container-type:size;
  background:#fff;
}

/* CLEOPATRE (.cer-figure) : à gauche, pieds en bas ; le haut tient compte de la
   barre d'état simulée (safe-top + 8 % dans la Cérémonie). */
.app-device__look{
  position:absolute;
  left:2%;
  width:58%;
  top:15%;
  bottom:9%;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  opacity:0;
}
.app-device__look[data-as-step="2"]{opacity:1}
.app-device__look img{
  height:100%;
  width:auto;
  max-width:100%;
  object-fit:contain;
  object-position:bottom center;
  translate:calc(var(--figure-shift, 0) * 1cqw) 0;
  -webkit-user-drag:none;
  user-select:none;
}
/* Même décalage que l'écran « verbes » de la Cérémonie (content/onboarding.ts). */
.app-device__look--shift{--figure-shift:-2.5}

/* Logo (.cer-logo + MaisonLogo) : tête et wordmark de l'app, une seule instance.
   Taille de référence = ancre d'ouverture (52 % de l'écran) : le logo n'est
   jamais agrandi, seulement réduit (net). Positions exprimées en % du logo :
   ouverture centrée (padding-bottom 6 %), coin = .cer-side (top safe + 5 % ≈ 12 %,
   right 6 %, largeur 35 %). */
.app-device__logo{
  --as-logo-open:translate(46.154%, 94.447%) scale(1);
  --as-logo-corner:translate(113.462%, 36.88%) scale(0.673077);
  position:absolute;
  top:0;
  left:0;
  z-index:2;
  width:52%;
  transform-origin:0 0;
  transform:var(--as-logo-corner);
  color:#000;
  pointer-events:none;
}
.app-device__mark{display:flex;flex-direction:column;align-items:center}
.app-device__head{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1;
  -webkit-user-drag:none;
  user-select:none;
}
.app-device__wordmark{
  display:block;
  width:86%;
  margin-top:6%;
  aspect-ratio:533.24 / 184.18;
  background-color:currentColor;
  -webkit-mask:url("/app/brand/wordmark.svg") center / contain no-repeat;
  mask:url("/app/brand/wordmark.svg") center / contain no-repeat;
}
/* Wordmark chargé seulement à l'approche de la section (app-showcase.js). */
.app-showcase[data-seq="armed"]:not(.is-near) .app-device__wordmark{-webkit-mask:none;mask:none}

/* Repères de progression (.cer-progress), à l'échelle de l'écran. */
.app-device__ticks{
  position:absolute;
  left:0;
  right:0;
  bottom:5.5%;
  display:flex;
  justify-content:center;
  gap:4px;
  gap:1.5cqw;
  color:#000;
}
.app-device__ticks span{
  width:12px;
  width:4.6cqw;
  height:2px;
  border-radius:2px;
  background:currentColor;
  opacity:.18;
  transition:opacity .4s,width .4s var(--as-ease-out);
}
.app-device__ticks [data-as-step="0"],
.app-device__ticks [data-as-step="1"]{opacity:.5}
.app-device__ticks [data-as-step="2"]{width:20px;width:7.7cqw;opacity:1}

@keyframes as-logo-in{
  from{opacity:0;transform:scale(0.94)}
}

/* ---- Séquence (JS, mouvement autorisé) : valeurs de ceremony.css ---- */
@media(prefers-reduced-motion:no-preference){
  /* En attente : mise en place instantanée (hors écran), aucune transition. */
  .app-showcase[data-seq="armed"] .app-device *,
  .app-showcase[data-seq="armed"] .app-showcase__line{transition:none!important}

  /* Textes : un seul à la fois, dans la même cellule (.cer-line). */
  .app-showcase[data-seq] .app-showcase__states{gap:0}
  .app-showcase[data-seq] .app-showcase__state{grid-area:1/1}
  .app-showcase[data-seq] .app-showcase__line{
    opacity:0;
    transform:translate3d(0,12px,0);
    transition:opacity .22s ease-in,transform .22s ease-in;
  }
  .app-showcase[data-seq] .is-active .app-showcase__line{
    opacity:1;
    transform:none;
    transition:opacity .5s var(--as-ease-out),transform .7s var(--as-ease-out);
    transition-delay:calc(0.62s + var(--n, 0) * 0.08s);
  }
  /* Avant et pendant l'ouverture, le premier texte est déjà lisible. */
  .app-showcase[data-seq="armed"] [data-as-step="0"] .app-showcase__line,
  .app-showcase[data-seq="intro"] [data-as-step="0"] .app-showcase__line{opacity:1;transform:none;transition:none}

  /* Fond (.cer__bg) : ouverture noire, puis blanc. */
  .app-showcase[data-seq] .app-device__screen{transition:background-color .9s var(--as-ease-in-out)}
  .app-showcase[data-seq="armed"] .app-device__screen,
  .app-showcase[data-seq="intro"] .app-device__screen{background:#000}

  /* Logo : apparition au centre, puis vol vers le coin (.cer-logo.is-animated). */
  .app-showcase[data-seq] .app-device__logo{transition:transform 1s var(--as-ease-out),color .9s var(--as-ease-in-out)}
  .app-showcase[data-seq="armed"] .app-device__logo,
  .app-showcase[data-seq="intro"] .app-device__logo{transform:var(--as-logo-open);color:#fff}
  .app-showcase[data-seq] .app-device__wordmark{transition:background-color .9s var(--as-ease-in-out)}
  .app-showcase[data-seq="armed"] .app-device__mark{opacity:0}
  .app-showcase[data-seq="intro"] .app-device__mark{animation:as-logo-in 1.2s .1s var(--as-ease-out) both}

  /* CLEOPATRE : entrée par la droite, sortie par la gauche (.cer-figure__img). */
  .app-showcase[data-seq] .app-device__look{opacity:1}
  .app-showcase[data-seq] .app-device__look img{
    opacity:0;
    transform:translate3d(22%,0,0) scale(1.035);
    transform-origin:50% 100%;
    transition:opacity .6s var(--as-ease-out),transform 1s var(--as-ease-out);
    will-change:transform,opacity;
  }
  .app-showcase[data-seq] .app-device__look.is-before img{
    transform:translate3d(-18%,0,0) scale(0.985);
    transition-duration:.45s,.7s;
    transition-timing-function:ease-in,var(--as-ease-in-out);
  }
  .app-showcase[data-seq] .app-device__look.is-active img{
    opacity:1;
    transform:none;
    transition-delay:.14s;
  }

  /* Repères : masqués pendant l'ouverture (.cer-controls.is-hidden). */
  .app-showcase[data-seq] .app-device__ticks{transition:opacity .6s .5s var(--as-ease-out),transform .8s .5s var(--as-ease-out)}
  .app-showcase[data-seq="armed"] .app-device__ticks,
  .app-showcase[data-seq="intro"] .app-device__ticks{opacity:0;transform:translateY(12px);transition-delay:0s}
  .app-showcase[data-seq] .app-device__ticks span{opacity:.18;width:12px;width:4.6cqw}
  .app-showcase[data-seq] .app-device__ticks .is-before{opacity:.5}
  .app-showcase[data-seq] .app-device__ticks .is-active{opacity:1;width:20px;width:7.7cqw}
}

@media(max-width:900px){
  .app-showcase__inner{grid-template-columns:1fr;gap:48px}
  /* Mobile / tablette (une colonne) : le mockup d'abord, puis les textes, puis
     INSTALLER MAISON et les informations. Ordinateur : composition inchangée. */
  .app-device{grid-row:1}
  .app-showcase__copy{grid-row:2}
}