/* ══════════════════════════════════════
   MODULE 3 · Arnaques financières
   visuel de tête (notifications suspectes), scénarios en conversation,
   signaux à révéler, parcours STOP / VÉRIFIER / DÉCIDER, cartes à retourner
══════════════════════════════════════ */

/* ── Visuel de tête : les messages arrivent les uns après les autres ── */
.hv-m3 .phone{transform:rotate(3deg)}
.notif-stack{display:grid;gap:.45rem}
.notif-scam{animation:drop-in 800ms var(--spring) both;animation-delay:calc(.6s + var(--d) * .9s)}
.notif-app--lov{background:#25A35A}
.notif-app--fin{background:var(--brique)}
.notif-app--mob{background:#6C5BD4}
.notif-app--emp{background:#3F7A47}
@keyframes drop-in{from{opacity:0;transform:translateY(-20px) scale(.96)}}
.fc-warn{bottom:10%;left:0;animation-delay:-2.5s}
.fc-warn > .i{background:var(--alert-soft);color:var(--alert)}

/* ── Scénarios ── */
.scams-howto{display:flex;align-items:center;gap:.6rem;font-weight:600}
.scams-howto .i{color:var(--violet)}
.scam{
  --fam:#25A35A;--fam-soft:#E7F6EC;
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:2.5rem;align-items:center;
  padding:2rem;margin-bottom:1.4rem;border-radius:calc(var(--r-card) + 6px);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);
}
.scam:nth-of-type(even){grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.scam:nth-of-type(even) .scam-visual{order:2}
.scam--fin{--fam:var(--brique);--fam-soft:var(--warn-soft)}
.scam--mob{--fam:#6C5BD4;--fam-soft:#EEEBFD}
.scam--emp{--fam:#3F7A47;--fam-soft:var(--ok-soft)}
.scam-visual{display:grid;place-items:center;padding:1rem;border-radius:var(--r-card);background:var(--fam-soft);min-height:22rem}

/* téléphone en mode conversation */
.phone-chat{width:15rem}
.phone-chat .phone-screen{background:#EFE7DE;padding:2.2rem 0 0;color:var(--ink)}
.chat-head{display:flex;align-items:center;gap:.55rem;padding:.6rem .75rem;background:var(--fam-solid,var(--fam));color:#fff}
.chat-head b{display:block;font-size:.78rem}
.chat-head span{font-size:.62rem;opacity:.85}
.ch-avatar{display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:50%;background:rgba(255,255,255,.25)}
.ch-avatar .i{width:1rem;height:1rem}
.chat-body{flex:1;display:flex;flex-direction:column;justify-content:flex-start;gap:.5rem;padding:1rem .7rem}
.bubble{
  position:relative;max-width:92%;padding:.7rem .8rem .75rem;border-radius:.2rem 1rem 1rem 1rem;
  background:#fff;color:#2A1B22;font-size:.78rem;line-height:1.45;box-shadow:0 2px 4px rgba(0,0,0,.08);   /* écran de téléphone : mêmes couleurs dans les deux thèmes */
}
.typing-dots{display:inline-flex;gap:.25rem;align-self:flex-start;padding:.6rem .75rem;border-radius:.2rem 1rem 1rem 1rem;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.08)}
.typing-dots i{width:.38rem;height:.38rem;border-radius:50%;background:#9A8C95;animation:dot 1.1s ease-in-out infinite}
.typing-dots i:nth-child(2){animation-delay:.15s}.typing-dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-3px);opacity:1}}
/* avant l'arrivée du message : on voit l'interlocuteur écrire */
.js .phone-chat .bubble{opacity:0;transform:translateY(10px) scale(.97);transform-origin:top left;transition:opacity .4s ease, transform .5s var(--spring)}
.js .phone-chat.is-received .bubble{opacity:1;transform:none}
.js .phone-chat.is-received .typing-dots{display:none}

/* récit (arnaque sentimentale) */
.story-card{display:grid;gap:1rem;width:100%;max-width:22rem}
.story-icon{display:grid;place-items:center;width:3rem;height:3rem;border-radius:var(--r-mini);background:#fff;color:var(--fam)}
.bubble--story{max-width:none;font-size:.95rem;border-radius:var(--r-card);padding:1.1rem 1.2rem}
.story-timeline{display:grid;gap:.45rem}
.story-timeline span{display:flex;align-items:center;gap:.55rem;padding:.55rem .8rem;border-radius:var(--r-pill);background:rgba(255,255,255,.75);font-size:.82rem;font-weight:700;color:#5B4650}
.story-timeline span:last-child{background:var(--alert);color:#fff}
.story-timeline .i{width:1rem;height:1rem}

/* partie analyse */
.scam-body{display:grid;gap:.9rem;align-content:start}
.scam-tags{display:flex;align-items:center;gap:.6rem}
.scam-app{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:var(--r-mini);background:var(--fam-soft);color:var(--fam)}
.scam-app .i{width:1.25rem;height:1.25rem}
.scam .tag{background:var(--fam-soft);color:var(--fam)}
.scam-title{font-family:var(--serif);font-size:2rem;font-weight:700;line-height:1.1}
.scam-sub{font-size:1.05rem;font-weight:600;color:var(--ink-2);margin-top:-.4rem}
.scam-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.3rem}
.scam-actions .btn-primary{background:var(--fam);box-shadow:0 10px 22px -12px var(--fam)}
.scam.is-complete .scam-actions{display:none}

.sig-list{list-style:none;display:grid;gap:.55rem}
.sig-item{
  display:grid;grid-template-columns:1.2rem 1fr;gap:.7rem;align-items:start;
  padding:.8rem 1rem;border-radius:var(--r-mini);border:1.5px dashed var(--line-2);
  font-size:.98rem;font-weight:600;line-height:1.45;color:transparent;
  transition:color .35s ease, background-color .35s ease, border-color .35s ease, transform .5s var(--spring);
}
.sig-item .i{width:1.1rem;height:1.1rem;margin-top:.15rem;color:var(--alert);opacity:0;transform:scale(.4) rotate(-20deg);transition:opacity .25s, transform .5s var(--spring)}
.sig-item.is-shown{color:var(--ink);background:var(--alert-soft);border:1.5px solid rgba(184,66,76,.18)}
.sig-item.is-shown .i{opacity:1;transform:none}
.sig-item.just-shown{animation:sig-pop .55s var(--spring)}
@keyframes sig-pop{0%{transform:translateX(-8px) scale(.98)}100%{transform:none}}

.scam-faire{
  display:grid;grid-template-columns:1.5rem 1fr;gap:.7rem;padding:1rem 1.15rem;border-radius:var(--r-card);
  background:var(--ok-soft);color:var(--ok-ink);font-weight:700;line-height:1.5;
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .45s ease, transform .6s var(--spring);
}
.scam-faire .i{width:1.4rem;height:1.4rem;color:var(--ok)}
.scam.is-complete .scam-faire{opacity:1;transform:none;pointer-events:auto}

/* ── Parcours STOP / VÉRIFIER / DÉCIDER ── */
.stepper{padding:1.6rem;margin-bottom:1.6rem;border-radius:calc(var(--r-card) + 6px);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.stepper-tabs{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-bottom:1.4rem}
.stepper-line{position:absolute;left:16.6%;right:16.6%;top:1.6rem;height:3px;border-radius:3px;background:var(--line);z-index:0}
.stepper-line span{display:block;height:100%;border-radius:inherit;background:var(--violet);transform-origin:left;transform:scaleX(var(--p,0));transition:transform .6s var(--ease-out)}
.stepper-tab{
  position:relative;z-index:1;display:grid;justify-items:center;gap:.5rem;padding:0;border:0;background:none;cursor:pointer;
  font:inherit;font-weight:800;font-size:.95rem;letter-spacing:.06em;color:var(--muted);transition:color .3s ease;
}
.st-icon{
  display:grid;place-items:center;width:3.2rem;height:3.2rem;border-radius:50%;
  background:var(--surface);border:2px solid var(--line-2);color:var(--muted);
  transition:background-color .35s ease, border-color .35s ease, color .35s ease, transform .5s var(--spring);
}
.st-icon .i{width:1.35rem;height:1.35rem}
.stepper-tab.is-reached .st-icon{background:var(--violet-soft);border-color:var(--violet);color:var(--violet)}
.stepper-tab[aria-selected="true"]{color:var(--violet-ink)}
.stepper-tab[aria-selected="true"] .st-icon{background:var(--violet);border-color:var(--violet);color:#fff;transform:scale(1.08)}
.stepper-panel{
  display:grid;grid-template-columns:4rem 1fr;gap:1.2rem;align-items:start;padding:1.4rem;border-radius:var(--r-card);
  background:var(--violet-tint);animation:panel-in .5s var(--ease-out);
}
.sp-icon{display:grid;place-items:center;width:4rem;height:4rem;border-radius:var(--r-card);background:var(--violet);color:#fff}
.sp-icon .i{width:1.8rem;height:1.8rem}
.stepper-panel h3{font-family:var(--serif);font-size:1.6rem;margin-bottom:.3rem;letter-spacing:.02em}
.stepper-panel p{font-size:1.08rem;color:var(--ink-2)}
.stepper-nav{display:flex;justify-content:space-between;gap:.6rem;margin-top:1.1rem}
.stepper-nav .btn[disabled]{opacity:.4;cursor:default}

/* ── Cartes à retourner ── */
.flip-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-bottom:1.6rem}
.flip{
  position:relative;min-height:12.5rem;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;
  perspective:1000px;
}
.flip-inner{position:relative;display:block;width:100%;height:100%;min-height:inherit;transform-style:preserve-3d;transition:transform .7s var(--ease-out)}
.flip[aria-pressed="true"] .flip-inner{transform:rotateY(180deg)}
.flip-front,.flip-back{
  position:absolute;inset:0;display:flex;flex-direction:column;gap:.6rem;padding:1.3rem;border-radius:var(--r-card);
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.flip-front{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.flip-front .feature-icon{background:var(--alert-soft);color:var(--alert)}
.flip-back{transform:rotateY(180deg);background:linear-gradient(140deg,var(--violet-deep),var(--violet));color:#fff;justify-content:center}
.flip-title{font-weight:800;font-size:1.08rem;line-height:1.3;color:var(--ink)}
.flip-back .flip-title{color:#fff}
.flip-text{font-size:.96rem;line-height:1.5;color:rgba(255,255,255,.92)}
.flip-hint{display:inline-flex;align-items:center;gap:.35rem;margin-top:auto;font-size:.82rem;font-weight:700;color:var(--violet)}
.flip-hint .i{width:.95rem;height:.95rem}
@media (hover:hover) and (pointer:fine){
  .flip:hover .flip-front{box-shadow:var(--shadow-md)}
  .flip:hover .flip-hint .i{transform:rotate(-180deg);transition:transform .5s var(--ease-out)}
}

@media (max-width:900px){
  .scam,.scam:nth-of-type(even){grid-template-columns:1fr;padding:1.3rem}
  .scam:nth-of-type(even) .scam-visual{order:0}
  .flip-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .flip-grid{grid-template-columns:1fr}
  .stepper-tab span:last-child{font-size:.78rem}
}

/* ── Thème sombre : teintes des canaux plus claires, fonds translucides ── */
.scam{--fam-solid:#25A35A}
.scam--fin{--fam-solid:#C9572F}
.scam--mob{--fam-solid:#6C5BD4}
.scam--emp{--fam-solid:#3F7A47}
:root[data-theme="dark"] .scam{--fam:#7FD3A0;--fam-soft:rgba(127,211,160,.12)}
:root[data-theme="dark"] .scam--fin{--fam:#F2A27F;--fam-soft:rgba(242,162,127,.12)}
:root[data-theme="dark"] .scam--mob{--fam:#B3A8F5;--fam-soft:rgba(179,168,245,.12)}
:root[data-theme="dark"] .scam--emp{--fam:#A9D3A1;--fam-soft:rgba(169,211,161,.12)}
:root[data-theme="dark"] .scam-actions .btn-primary{color:#151014}
:root[data-theme="dark"] .bubble--story{background:#2B2129;color:var(--ink)}
:root[data-theme="dark"] .story-timeline span{background:rgba(255,255,255,.08);color:var(--ink-2)}
:root[data-theme="dark"] .story-timeline span:last-child{background:#B8424C;color:#fff}

/* scénarios et démonstrations : plus courts qu'au départ, mais aérés */
.scam{padding:1.6rem 1.8rem;gap:2.2rem;margin-bottom:1.3rem}
.scam-visual{min-height:0;padding:1.2rem}
.phone-chat{width:13.5rem}
.scam-title{font-size:1.75rem}
.scam-sub{font-size:1rem}
.scam-body{gap:.8rem}
.sig-item{padding:.7rem .95rem;font-size:.95rem}
.scam-faire{padding:.9rem 1.1rem;font-size:.96rem}
.stepper{padding:1.4rem 1.5rem;margin-bottom:1.4rem}
.stepper-tabs{margin-bottom:1.2rem}
.st-icon{width:2.8rem;height:2.8rem}
.stepper-line{top:1.4rem}
.stepper-panel{padding:1.2rem 1.3rem;grid-template-columns:3.4rem 1fr;gap:1.1rem}
.sp-icon{width:3.4rem;height:3.4rem}
.stepper-panel h3{font-size:1.35rem}
.stepper-panel p{font-size:1rem}
.flip-grid{gap:1rem;margin-bottom:1.4rem}
.flip{min-height:11rem}
.flip-front,.flip-back{padding:1.15rem 1.2rem;gap:.5rem}