/* ============================================================================
   Cadre iPhone en CSS, autour des vraies captures de l'app.
   Tout est proportionnel à la largeur du téléphone (unités cqw) : on règle
   seulement sa largeur, le reste suit. Les captures font 390 × 844 points,
   la taille d'écran d'un iPhone 15 ; la barre d'état est dessinée au-dessus.
   ============================================================================ */

/* L'enveloppe fixe la largeur et sert de conteneur : les unités cqw du
   corps, de l'écran et de la barre d'état se rapportent à elle. (Un élément
   ne peut pas mesurer ses propres cqw : ils viendraient de la page.) */
.iphone {
  container-type: inline-size;
  position: relative;
  width: 280px;
  max-width: 100%;
}

.iphone-corps {
  position: relative;
  width: 100%;
  aspect-ratio: 414 / 918;
  padding: 2.9cqw;
  border-radius: 15.5cqw;
  background: linear-gradient(145deg, #4a4a52 0%, #1a1a1f 35%, #2c2c33 62%, #101014 100%);
  box-shadow:
    inset 0 0 0 0.35cqw rgba(255, 255, 255, 0.18),
    inset 0 0 0 1.1cqw #0b0b0e,
    0 2.5cqw 7cqw rgba(0, 0, 0, 0.45);
}

/* Boutons latéraux */
.iphone-corps::before,
.iphone-corps::after {
  content: '';
  position: absolute;
  width: 0.9cqw;
  border-radius: 0.6cqw;
  background: linear-gradient(90deg, #2a2a30, #55555d);
}
.iphone-corps::before { right: -0.7cqw; top: 26%; height: 15%; }
.iphone-corps::after {
  left: -0.7cqw; top: 20%; height: 7%;
  box-shadow: 0 9cqw 0 #3a3a41, 0 17cqw 0 #3a3a41;
}

.iphone-ecran {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 12.6cqw;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.iphone-statut {
  flex: 0 0 auto;
  height: 12.1cqw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4cqw 7.5cqw 0 9cqw;
  font: 600 3.7cqw/1 -apple-system, 'SF Pro Text', 'Inter', system-ui, sans-serif;
  color: #000;
  letter-spacing: -0.01em;
}
.iphone-statut svg { height: 3.2cqw; width: auto; margin-left: 1.2cqw; }
.iphone-statut .icones { display: flex; align-items: center; }

.iphone-ecran img {
  display: block;
  width: 100%;
  height: auto;
  flex: 1 1 auto;
  object-fit: cover;
  object-position: top;
  min-height: 0;
}

/* Dynamic Island */
.iphone-ile {
  position: absolute;
  top: 5.3cqw;
  left: 50%;
  width: 29cqw;
  height: 8.4cqw;
  margin-left: -14.5cqw;
  border-radius: 999px;
  background: #000;
  z-index: 2;
}

/* Barre d'accueil */
.iphone-ecran::after {
  content: '';
  position: absolute;
  bottom: 2cqw;
  left: 50%;
  width: 34cqw;
  height: 1.3cqw;
  margin-left: -17cqw;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.8);
}

/* Héros : deux téléphones, la carte devant, la fiche article derrière */
.hero-visual .phones {
  position: relative;
  z-index: 2;
  width: 280px;
}
.hero-visual .phones .iphone { width: 280px; position: relative; z-index: 2; }
.hero-visual .phones .iphone.phone-back {
  position: absolute;
  z-index: 1;
  width: 230px;
  top: 9%;
  left: -34%;
  transform: rotate(-9deg);
  filter: brightness(0.82) saturate(0.9);
}
@media (max-width: 960px) {
  .hero-visual .phones .iphone.phone-back { left: -22%; }
}
@media (max-width: 520px) {
  .hero-visual .phones,
  .hero-visual .phones .iphone { width: 240px; }
  .hero-visual .phones .iphone.phone-back { width: 190px; left: -18%; }
}

/* Comment ça marche */
.zigzag-visual .iphone {
  position: relative;
  z-index: 1;
  width: min(46%, 270px);
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.4));
}
/* L'ancienne règle « .zigzag-visual img » (70 % de large, ombre) visait les
   captures seules : dans le cadre, la capture occupe tout l'écran. */
.zigzag-visual .iphone img {
  max-width: none;
  max-height: none;
  width: 100%;
  height: auto;
  filter: none;
}

/* Les notifications restent dans l'écran */
.hero-visual .float-card.f2 { right: -2%; }

/* Les notifications passent au-dessus d'écrans blancs : un verre sombre les
   garde lisibles (l'ancien verre clair ne marchait que sur fond noir). */
.hero-visual .float-card {
  background: rgba(12, 10, 9, 0.84);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--text);
}