/* ═══════════════════════════════════════════════════════════
   KLERVIO — Animation du téléphone du héros
   « Le téléphone se sécurise » : menaces → installation →
   interception → protection active (état final = écran actuel).
   CSS pur, se joue une fois au chargement puis se fige.
   À charger APRÈS assets/style.css.
   ═══════════════════════════════════════════════════════════ */

.phone-anim{ position:relative; isolation:isolate; }
.phone-anim .screen{ position:relative; }
.phone-anim .screen > *{ min-height:0; }

/* ---------- Génériques ---------- */
@keyframes pa-on{ from{ opacity:0; } to{ opacity:1; } }
@keyframes pa-off{ to{ opacity:0; } }
@keyframes pa-pop{ from{ transform:scale(1.22); } to{ transform:scale(1); } }

/* ---------- Anneau de protection autour du châssis ---------- */
.phone-anim::before{
  content:""; position:absolute; inset:-18px; z-index:-1; border-radius:60px;
  border:1.5px solid rgba(124,59,236,.5);
  box-shadow:0 0 44px rgba(124,59,236,.4), inset 0 0 26px rgba(124,59,236,.16);
  opacity:0; animation:pa-halo 5.5s linear 6.1s both;
}
@keyframes pa-halo{
  0%{ opacity:0; } 12.7%{ opacity:.22; }
  22.7%{ opacity:.6; } 30.9%{ opacity:.22; }
  48.2%{ opacity:.6; } 56.4%{ opacity:.22; }
  73.6%{ opacity:.6; } 81.8%{ opacity:.22; }
  100%{ opacity:.22; }
}

/* ---------- Écran verrouillé (avant Klervio) ---------- */
.pa-lock{
  position:absolute; inset:0; z-index:2; display:flex; flex-direction:column;
  align-items:center; padding-top:38%; animation:pa-lockout .55s ease 4.4s both;
}
.pa-heure{ font-size:2.75rem; font-weight:600; letter-spacing:-.03em; line-height:1; }
.pa-date{ font-size:.8rem; color:var(--text-2); margin-top:6px; }
.pa-etat{
  display:inline-flex; align-items:center; gap:6px; margin-top:14px;
  padding:5px 11px; border-radius:999px; background:#FFFFFF;
  border:1px solid var(--border); font-size:.62rem; color:var(--text-3);
}
.pa-etat span{ width:6px; height:6px; border-radius:50%; background:#C9C9D2; }
@keyframes pa-lockout{ to{ opacity:0; transform:translateY(-8px); } }

/* ---------- Bannière SMS piégé ---------- */
.pa-sms{
  position:absolute; left:9px; right:9px; top:30px; z-index:6;
  background:#FFFFFF; border:1px solid var(--border); border-radius:14px;
  padding:10px 11px; box-shadow:0 12px 28px rgba(14,14,18,.14);
  display:flex; gap:10px;
  animation:pa-smsin .55s cubic-bezier(.2,.8,.3,1) .7s both,
            pa-smsout .5s ease-in 4.4s both;
}
.pa-sms .b{ width:26px; height:26px; border-radius:8px; display:grid; place-items:center; flex:none; }
.pa-sms .b svg{ width:13px; height:13px; }
.pa-sms .tx{ min-width:0; }
.pa-sms .hd{ display:flex; justify-content:space-between; gap:8px; }
.pa-sms .hd b{ font-size:.7rem; font-weight:600; }
.pa-sms .hd span{ font-size:.56rem; color:var(--text-3); flex:none; }
.pa-sms .d{ margin-top:2px; font-size:.62rem; color:var(--text-2); line-height:1.45; }
.pa-sms .lien{ color:#0B57D0; text-decoration:underline; }
@keyframes pa-smsin{ from{ opacity:0; transform:translateY(-110px); } to{ opacity:1; transform:none; } }
@keyframes pa-smsout{ to{ opacity:0; transform:translateY(-120px); } }

/* ---------- Appel entrant usurpé ---------- */
.pa-call{
  position:absolute; left:0; right:0; bottom:0; height:57%; z-index:5;
  background:#FFFFFF; border-radius:22px 22px 0 0;
  box-shadow:0 -14px 36px rgba(14,14,18,.16);
  display:flex; flex-direction:column; align-items:center; padding:18px 16px 20px;
  animation:pa-callin .6s cubic-bezier(.2,.8,.25,1) 2s both,
            pa-callout .5s ease-in 4.5s both;
}
.pa-call .et{ font-size:.56rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--text-3); }
.pa-call .av{
  width:50px; height:50px; border-radius:50%; background:#F1F1F5; color:var(--text-2);
  display:grid; place-items:center; margin-top:12px;
}
.pa-call .av svg{ width:22px; height:22px; }
.pa-call .nom{ font-size:.92rem; font-weight:700; letter-spacing:-.02em; margin-top:9px; }
.pa-call .num{ font-size:.66rem; color:var(--text-3); margin-top:2px; }
.pa-call .acts{ display:flex; gap:52px; margin-top:auto; }
.pa-call .acts > div{ display:flex; flex-direction:column; align-items:center; gap:5px; }
.pa-call .rond{ width:44px; height:44px; border-radius:50%; color:#FFFFFF; display:grid; place-items:center; }
.pa-call .rond svg{ width:18px; height:18px; }
.pa-call .r-rouge{ background:var(--err); }
.pa-call .r-rouge svg{ transform:rotate(135deg); }
.pa-call .r-verte{ background:var(--ok); animation:pa-verte 1.6s infinite; }
.pa-call .acts span{ font-size:.58rem; color:var(--text-3); }
@keyframes pa-callin{ from{ transform:translateY(110%); } to{ transform:none; } }
@keyframes pa-callout{ to{ transform:translateY(112%); } }
@keyframes pa-verte{
  0%{ box-shadow:0 0 0 0 rgba(15,157,110,.28); }
  70%{ box-shadow:0 0 0 12px rgba(15,157,110,0); }
  100%{ box-shadow:0 0 0 0 rgba(15,157,110,0); }
}

/* ---------- Vignette rouge : le danger monte ---------- */
.pa-vignette{
  position:absolute; inset:0; z-index:7; pointer-events:none; border-radius:inherit;
  box-shadow:inset 0 0 70px rgba(217,56,56,.42); opacity:0;
  animation:pa-vig 3.9s ease-in-out 1s both;
}
@keyframes pa-vig{ 0%{ opacity:0; } 77%{ opacity:1; } 100%{ opacity:0; } }

/* ---------- Installation de Klervio ---------- */
.pa-install{
  position:absolute; left:0; right:0; top:24%; z-index:4;
  display:flex; flex-direction:column; align-items:center;
  animation:pa-instin .45s cubic-bezier(.34,1.56,.64,1) 5s both,
            pa-instout .45s ease 6.6s both;
}
.pa-puce{ position:relative; width:106px; height:106px; display:grid; place-items:center; }
.pa-puce .cercle{ position:absolute; inset:0; transform:rotate(-90deg); }
.pa-puce .cercle .fond{ stroke:var(--border); }
.pa-puce .cercle .prog{
  stroke:var(--acc); stroke-dasharray:283; stroke-dashoffset:283;
  animation:pa-ring .85s cubic-bezier(.4,0,.2,1) 5.2s both;
}
.pa-ico{
  width:68px; height:68px; border-radius:17px; background:var(--acc);
  display:grid; place-items:center; box-shadow:0 14px 30px rgba(124,59,236,.35);
}
.pa-ico svg{ width:40px; height:40px; }
.pa-lbl{ position:relative; margin-top:10px; font-size:.68rem; font-weight:500; color:var(--text-2); }
.pa-l2{ position:absolute; left:50%; top:0; transform:translateX(-50%); white-space:nowrap; opacity:0; animation:pa-on .2s 6.05s both; }
.pa-l1{ display:inline-block; animation:pa-off .2s 6.05s both; }
@keyframes pa-instin{ from{ opacity:0; transform:scale(.4); } to{ opacity:1; transform:scale(1); } }
@keyframes pa-instout{ to{ opacity:0; transform:translateY(-18px); } }
@keyframes pa-ring{ to{ stroke-dashoffset:0; } }

/* ---------- Onde d'activation ---------- */
.pa-sweep{
  position:absolute; left:50%; top:calc(24% + 53px); z-index:3; width:140px; height:140px;
  margin:-70px 0 0 -70px; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(124,59,236,.32), rgba(124,59,236,0));
  opacity:0; transform:scale(0);
  animation:pa-sweep .7s ease-out 6.05s both;
}
@keyframes pa-sweep{ 0%{ opacity:.9; transform:scale(0); } 100%{ opacity:0; transform:scale(8); } }

/* ---------- En-tête, cartes, récap : nouveau tempo ---------- */
.phone-anim .shead{ opacity:0; animation:rise .5s 6.5s both; }
.phone-anim .hbar{ opacity:0; animation:pa-on .4s 6.5s both; }

.phone-anim .alrt{ position:relative; animation:pa-card 1.15s cubic-bezier(.25,.7,.25,1) both; }
.phone-anim .alrt:nth-child(1){ animation-delay:7.3s; }
.phone-anim .alrt:nth-child(2){ animation-delay:8.7s; }
.phone-anim .alrt:nth-child(3){ animation-delay:10.1s; }
@keyframes pa-card{
  0%{ opacity:0; transform:translateY(-110px); }
  40%{ opacity:1; transform:translateY(12px); }
  66%{ transform:translateY(12px); }
  100%{ transform:none; }
}

/* Contenu « avant analyse » posé par-dessus la carte */
.pa-pre{
  position:absolute; inset:0; z-index:2; background:#FFFFFF; border-radius:15px;
  padding:12px 13px; display:flex; gap:11px;
}
.phone-anim .alrt:nth-child(1) .pa-pre{ animation:pa-off .3s 7.85s both; }
.phone-anim .alrt:nth-child(2) .pa-pre{ animation:pa-off .3s 9.25s both; }
.phone-anim .alrt:nth-child(3) .pa-pre{ animation:pa-off .3s 10.65s both; }

/* Contenu « verdict » révélé au même instant */
.phone-anim .alrt > .b, .phone-anim .alrt > .b + div{ opacity:0; animation:pa-on .35s both; }
.phone-anim .alrt:nth-child(1) > .b, .phone-anim .alrt:nth-child(1) > .b + div{ animation-delay:7.85s; }
.phone-anim .alrt:nth-child(2) > .b, .phone-anim .alrt:nth-child(2) > .b + div{ animation-delay:9.25s; }
.phone-anim .alrt:nth-child(3) > .b, .phone-anim .alrt:nth-child(3) > .b + div{ animation-delay:10.65s; }

/* Éclair de verdict sur le pourtour de la carte */
.phone-anim .alrt::after{
  content:""; position:absolute; inset:-1px; border-radius:16px; pointer-events:none;
  box-shadow:0 0 0 3px var(--pa-eclair, rgba(124,59,236,.25)); opacity:0;
}
.phone-anim .alrt:nth-child(1)::after{ --pa-eclair:rgba(217,56,56,.30); animation:pa-eclair .55s ease-out 7.85s both; }
.phone-anim .alrt:nth-child(2)::after{ --pa-eclair:rgba(78,78,88,.22); animation:pa-eclair .55s ease-out 9.25s both; }
.phone-anim .alrt:nth-child(3)::after{ --pa-eclair:rgba(15,157,110,.30); animation:pa-eclair .55s ease-out 10.65s both; }
@keyframes pa-eclair{ 0%{ opacity:1; } 100%{ opacity:0; } }

.phone-anim .alrt .pill{
  opacity:0; transform-origin:left center;
  animation:pa-pill .4s cubic-bezier(.34,1.56,.64,1) both;
}
.phone-anim .alrt:nth-child(1) .pill{ animation-delay:7.97s; }
.phone-anim .alrt:nth-child(2) .pill{ animation-delay:9.37s; }
.phone-anim .alrt:nth-child(3) .pill{ animation-delay:10.77s; }
@keyframes pa-pill{ from{ opacity:0; transform:scale(.5); } to{ opacity:1; transform:scale(1); } }

/* Récap : entrée + compteur 1 → 2 → 3 */
.phone-anim .recap{ animation:rise .5s 8s both; }
.phone-anim .recap .n{
  position:relative; font-variant-numeric:tabular-nums; transform-origin:left center;
  animation:pa-pop .4s 8.05s both, pa-pop .4s 9.45s both, pa-pop .4s 10.85s both;
}
.pa-n1, .pa-n2{ position:absolute; left:0; top:0; }
.pa-n1{ animation:pa-win 1.4s linear 8.05s both; }
.pa-n2{ animation:pa-win 1.4s linear 9.45s both; }
.pa-n3{ opacity:0; animation:pa-on .06s linear 10.85s both; }
@keyframes pa-win{ 0%{ opacity:0; } 2%{ opacity:1; } 98%{ opacity:1; } 100%{ opacity:0; } }

/* ---------- Mouvement réduit : état final immédiat ---------- */
@media (prefers-reduced-motion:reduce){
  .pa-lock, .pa-sms, .pa-call, .pa-install, .pa-sweep, .pa-vignette, .pa-pre{ display:none !important; }
  .phone-anim::before, .phone-anim .shead, .phone-anim .hbar,
  .phone-anim .alrt, .phone-anim .alrt::after, .phone-anim .alrt > .b,
  .phone-anim .alrt > .b + div, .phone-anim .alrt .pill,
  .phone-anim .recap, .phone-anim .recap .n, .pa-n1, .pa-n2, .pa-n3{ animation-delay:0s !important; }
}

/* ---------- Impression : état final, sans couches ---------- */
@media print{
  .pa-lock, .pa-sms, .pa-call, .pa-install, .pa-sweep, .pa-vignette, .pa-pre{ display:none !important; }
  .phone-anim::before{ display:none !important; }
  .phone-anim .shead, .phone-anim .hbar, .phone-anim .alrt, .phone-anim .alrt > .b,
  .phone-anim .alrt > .b + div, .phone-anim .alrt .pill, .phone-anim .recap{
    animation:none !important; opacity:1 !important; transform:none !important;
  }
  .pa-n1, .pa-n2{ opacity:0 !important; }
  .pa-n3{ opacity:1 !important; }
}