/* ==========================================================================
   Power 21 — page « La web app » (route 'app', content/<lang>/p_app.php)
   Compléments de layout.css : hero avec illustration détourée, inspirations,
   visite de l'app (téléphone collé + écrans, app.js), offres. Préfixe : .app-
   ========================================================================== */

/* 1. Hero : illustration détourée à droite (pas de fondu comme les photos) --- */
/* l'illustration déborde sur la section suivante (au lieu d'être coupée par le hero) */
.app-hero { min-height: min(88vh, 780px); overflow: visible; z-index: 2; }
.app-hero + .lyt-intro .lyt-intro__statement { max-width: min(1180px, 58%); }   /* droite libre sous les téléphones */
.app-hero__art {
  position: absolute; top: max(150px, 18vh); right: max(16px, calc((100vw - var(--shell)) / 2 - 8vw));   /* haut, et décalée vers le bord droit */
  width: min(44vw, 800px); height: auto; object-fit: contain; object-position: right top;   /* déborde sur la section suivante si le hero est moins haut */
  pointer-events: none; filter: drop-shadow(0 30px 50px rgba(15,17,21,.25));
}
.app-hero .lyt-hero__title { max-width: 54%; font-size: clamp(44px, 5.4vw, 92px); line-height: .95; }
.app-hero .lyt-hero__title em { white-space: normal; }
.app-hero .lyt-hero__foot { max-width: 54%; align-items: center; }

/* 2. Learning by doing : repères + inspirations ------------------------------- */
.lyt-intro__body p + .app-facts { margin-top: 24px; }
.app-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.app-facts li { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 700; color: var(--c-ink); }
.app-facts li::before { content: ''; flex: none; width: 18px; height: 2px; background: var(--c-yellow); }
.app-inspire { flex: 1.6 1 420px; }
.app-inspire__title { margin-bottom: 18px; font-size: clamp(20px, 1.7vw, 26px); line-height: 1.3; font-weight: 700; letter-spacing: -.02em; }
.app-inspire__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(15,17,21,.12); }
.app-inspire__list li {
  padding: 18px 0; border-bottom: 1px solid rgba(15,17,21,.12);
  font-size: 17px; line-height: 1.6; color: var(--c-body); text-wrap: pretty;
}
.app-inspire__list strong { font-family: var(--ff-serif); font-style: italic; font-weight: 400; font-size: 1.3em; color: var(--c-blue); }

/* 3. Visite : téléphone collé à gauche, fonctionnalités à droite --------------- */
.app-tour { background: var(--c-blue); color: var(--c-white); padding: clamp(64px, 8vw, 112px) var(--gutter) clamp(80px, 10vw, 140px); }
.app-tour__inner { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 110px); align-items: start; }
.app-tour__device { position: sticky; top: max(96px, calc(50vh - 19.3vw)); display: flex; justify-content: center; }   /* téléphone (19vw × 2,03) centré à l'écran */
.app-phone { position: relative; width: clamp(240px, 19vw, 360px); aspect-ratio: 392 / 796; filter: drop-shadow(0 40px 60px rgba(15,17,21,.35)); }
/* mascotte de la web app : en bas à droite, déborde du téléphone (hauteur ≈ 30 % du téléphone) */
.app-phone__mascot {
  position: absolute; z-index: 2; right: -23%; bottom: -8%;
  width: 66%; height: auto; pointer-events: none;
}
.app-phone__frame { position: absolute; inset: 0; width: 100%; height: 100%; }
/* zone d'écran du cadre (phone-frame.webp, 392×796) */
.app-phone__screen {
  position: absolute; left: 4.6%; top: 2.3%; width: 90.8%; height: 95.4%;
  border-radius: 11% / 5.4%; object-fit: cover; opacity: 0; transition: opacity .5s ease;
}
.app-phone__screen.is-active { opacity: 1; }

.app-tour__body { display: grid; gap: 40px; justify-items: start; }
.app-tour .lyt-h2 em { color: var(--c-yellow); }
.app-tour__body .lyt-h2 { font-size: clamp(36px, 4vw, 60px); }   /* colonne étroite à côté du téléphone */
.app-features { list-style: none; margin: 0; padding: 0; width: 100%; counter-reset: feat; }
.app-feature {
  counter-increment: feat; display: grid; align-content: center; gap: 14px;
  min-height: 30vh; padding: 28px 0; border-top: 1px solid rgba(255,255,255,.25);   /* était 46vh / 36px */
  opacity: .4; transition: opacity .4s ease;
}
.app-feature:last-child { border-bottom: 1px solid rgba(255,255,255,.25); }
.app-feature.is-active { opacity: 1; }
.app-feature h3 { display: flex; align-items: baseline; gap: 16px; margin: 0; font-size: clamp(22px, 2vw, 30px); line-height: 1.2; font-weight: 700; letter-spacing: -.02em; }
.app-feature h3::before { content: '0' counter(feat); font-family: var(--ff-mono); font-size: 12px; letter-spacing: .1em; color: var(--c-yellow); }
.app-feature p { max-width: 620px; font-size: 17px; line-height: 1.7; color: rgba(255,255,255,.86); text-wrap: pretty; }

/* 4. Offres ----------------------------------------------------------------- */
.app-offers { padding: clamp(64px, 8vw, 112px) var(--gutter) clamp(80px, 10vw, 140px); }
.app-offers .lyt-h2 { margin-bottom: clamp(40px, 5vw, 64px); }
.app-offers .lyt-h2 em { color: var(--c-blue); }
.app-offers__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.app-offer {
  display: flex; flex-direction: column; gap: 14px; padding: 32px 30px 34px;
  background: var(--c-white); border: 1px solid rgba(15,17,21,.08);
}
.app-offer p { font-size: 16px; line-height: 1.65; color: var(--c-body); text-wrap: pretty; }
.app-offer .app-offer__kicker { font-family: var(--ff-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--c-grey); }
.app-offer__title { margin: 0; font-size: clamp(26px, 2.4vw, 36px); line-height: 1.05; font-weight: 800; letter-spacing: -.04em; }
.app-offer .app-offer__tagline { font-family: var(--ff-serif); font-style: italic; font-size: 22px; line-height: 1.3; color: var(--c-blue); }
.app-offer .link-rule { margin-top: auto; }
.app-offer > p:last-of-type { margin-bottom: 12px; }
.app-offer--blue { background: var(--c-blue); border-color: transparent; color: var(--c-white); }
.app-offer--blue p { color: rgba(255,255,255,.86); }
.app-offer--blue .app-offer__kicker { color: rgba(255,255,255,.65); }
.app-offer--blue .app-offer__tagline { color: var(--c-yellow); }
.app-offer--blue .link-rule, .app-offer--blue .link-rule:hover { color: var(--c-white); }

/* Responsive ---------------------------------------------------------------- */
@media (max-width: 1100px) {
  .app-offers__list { grid-template-columns: 1fr; max-width: 640px; }
}
@media (max-width: 900px) {
  .app-hero { min-height: 0; }
  .app-hero__art { top: 90px; width: auto; height: 46%; max-width: 70vw; opacity: .3; }
  .app-hero .lyt-hero__title, .app-hero .lyt-hero__foot,
  .app-hero + .lyt-intro .lyt-intro__statement { max-width: none; }
  .app-tour__inner { grid-template-columns: 1fr; }
  .app-tour__device { position: relative; top: auto; }
  .app-feature { min-height: 0; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .app-phone__screen, .app-feature { transition: none; }
}