/* Hero visual — 2 iPhones (gpt-image-2, 09/11/2026). Remplace les maquettes CSS.
   Deux rendus (fond blanc / vraie transparence alpha pour le sombre) affichés selon html[data-theme] ;
   la version sombre est en loading=lazy : masquée (display:none), Chrome ne la
   télécharge pas en thème clair. Le masque fond les bords dans la page. */
.hero-showcase.hero-phones { aspect-ratio: auto; padding: 0; }
.hero-phones picture { display: block; }
.hero-phones img {
  display: block; width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 15%, #000 85%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 15%, #000 85%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-composite: intersect;
}
.hero-phones .hp-dark { display: none; }
:root[data-theme="dark"] .hero-phones .hp-light { display: none; }
:root[data-theme="dark"] .hero-phones .hp-dark { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .hero-phones picture { animation: hpFloat 7s ease-in-out infinite; }
  @keyframes hpFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
}
/* L'image embarque ~9 % de marge fondue : on déborde de la colonne pour garder
   des téléphones à la bonne taille. */
@media (min-width: 1025px) { .hero-showcase.hero-phones { width: 136%; margin-left: -30%; margin-top: -56px; } }
@media (max-width: 1024px) { .hero-showcase.hero-phones { max-width: 520px; margin: 0 auto; } }