/* =====================================================================
   Mockup tablette — composant partage
   ---------------------------------------------------------------------
   Cadre de tablette + diaporama des ecrans de la demo Villa Sel & Sable.
   Classes prefixees lp-ipad, independantes des .tablet-* de v2.css.
   4 captures en fondu enchaine, 20 s de cycle, 5 s par ecran.

   Utilise par /lp-standing-4, /lp-revenu et /merci-pdv. Une modification
   ici touche les trois pages.

   Comme les autres composants partages : bumper le ?v=N apres
   modification (_headers sert /css/* en immutable pendant un an).
   ===================================================================== */

.lp-ipad-wrap { max-width: 500px; margin: 36px auto 0; }
.lp-ipad {
    position: relative; background: #14110e; border-radius: 28px; padding: 18px;
    box-shadow: 0 34px 80px rgba(20,15,10,0.3), inset 0 0 0 1px rgba(255,255,255,0.06);
}
.lp-ipad-cam {
    position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
    width: 7px; height: 7px; border-radius: 50%; background: #2e2a25;
    box-shadow: inset 0 0 2px rgba(0,0,0,0.8); z-index: 2;
}
.lp-ipad-screen { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: #f5f0e8; }
.lp-ipad-screen img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;
    opacity: 0; animation: lpIpadCycle 20s ease-in-out infinite;
}
/* Une seule capture : pas de diaporama, l'ecran reste affiche (sinon le
   cycle la ferait clignoter). Cas utilise par la section revenus de l'accueil. */
.lp-ipad-screen img:only-child { opacity: 1; animation: none; }

.lp-ipad-screen img:nth-child(2) { animation-delay: 5s; }
.lp-ipad-screen img:nth-child(3) { animation-delay: 10s; }
.lp-ipad-screen img:nth-child(4) { animation-delay: 15s; }

/* Le cycle de 20 s et ses paliers supposent QUATRE captures. Avec deux ou
   trois, l'ecran restait blanc une partie du cycle (bug vu sur /merci-pdv
   le 20/08/2026). On detecte le nombre reel d'images et on bascule sur un
   cycle taille pour lui, chaque ecran restant visible 5 s. */
.lp-ipad-screen img:first-child:nth-last-child(2),
.lp-ipad-screen img:first-child:nth-last-child(2) ~ img {
    animation-name: lpIpadCycle2; animation-duration: 10s;
}
.lp-ipad-screen img:first-child:nth-last-child(3),
.lp-ipad-screen img:first-child:nth-last-child(3) ~ img {
    animation-name: lpIpadCycle3; animation-duration: 15s;
}
@keyframes lpIpadCycle2 {
    0%   { opacity: 1; }
    42%  { opacity: 1; }
    50%  { opacity: 0; }
    92%  { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes lpIpadCycle3 {
    0%    { opacity: 1; }
    28%   { opacity: 1; }
    33.3% { opacity: 0; }
    94.5% { opacity: 0; }
    100%  { opacity: 1; }
}

/* Chaque image : visible ~5 s, fondu enchaine doux entre les ecrans. */
@keyframes lpIpadCycle {
    0%   { opacity: 1; }
    21%  { opacity: 1; }
    29%  { opacity: 0; }
    94%  { opacity: 0; }
    100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .lp-ipad-screen img { animation: none; }
    .lp-ipad-screen img:first-child { opacity: 1; }
}
@media (max-width: 767px) {
    .lp-ipad-wrap { margin-top: 40px; }
    .lp-ipad { padding: 10px; border-radius: 18px; }
    .lp-ipad-cam { top: 4px; width: 5px; height: 5px; }
    /* Reste en 4:3 paysage : les captures sont en paysage. */
    .lp-ipad-screen { border-radius: 10px; }
}

/* =====================================================================
   Variante « ecran vivant » : au lieu d'un diaporama de captures, la
   tablette contient de vrais elements (les cards de services). L'ecran
   defile doucement, tout seul, et reste manipulable a la main.
   Utilise par /merci-pdv et /propal-500.
   ===================================================================== */
.lp-ipad-wrap--large { max-width: 760px; }
.lp-ipad-ecran {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 14px;
    overflow-y: auto;
    overflow-x: hidden;
    background: #FAF8F5;
    -webkit-overflow-scrolling: touch;
    /* La barre de defilement casserait l'illusion de la tablette. */
    scrollbar-width: none;
}
.lp-ipad-ecran::-webkit-scrollbar { display: none; }
/* Variante sans hauteur imposee : le cadre s'adapte a ce qu'il contient.
   Sert quand on veut montrer un nombre precis de cards sans defilement. */
.lp-ipad-ecran--auto { aspect-ratio: auto; overflow: visible; }
@media (max-width: 767px) {
    .lp-ipad-ecran { border-radius: 10px; aspect-ratio: 3 / 4; }
    .lp-ipad-ecran--auto { aspect-ratio: auto; }
}