/* ══════════════════════════════════════
   MODULE 1 · Sécurisation avancée
   visuel de tête (validation en deux étapes), e-mail au centre des comptes,
   notifications d'intrusion, démonstration du mot de passe maître, check-list cliquable
══════════════════════════════════════ */

/* ── Visuel de tête : téléphone verrouillé qui reçoit une demande de validation ── */
.hv-m1 .phone{transform:rotate(-4deg)}
.notif-2fa{
  grid-template-columns:2rem 1fr;
  animation:drop-in 900ms var(--spring) 600ms both, nudge 5s ease-in-out 2.2s infinite;
}
.notif-2fa .notif-app{background:linear-gradient(140deg,var(--violet),var(--fraise))}
.notif-actions{display:flex;gap:.35rem;margin-top:.5rem}
.notif-actions span{
  display:inline-flex;align-items:center;gap:.2rem;padding:.25rem .55rem;border-radius:var(--r-pill);
  font-size:.62rem;font-weight:800;
}
.notif-actions .i{width:.7rem;height:.7rem}
.na-yes{background:var(--ok);color:#fff !important}
.na-no{background:#fff;color:var(--alert) !important;border:1px solid rgba(184,66,76,.3)}
.otp{display:flex;justify-content:center;gap:.4rem;margin-top:auto;margin-bottom:.6rem}
.otp span{width:.75rem;height:.75rem;border-radius:50%;border:1.5px solid rgba(255,255,255,.8);animation:otp 3.2s ease-in-out infinite}
.otp span:nth-child(2){animation-delay:.18s}.otp span:nth-child(3){animation-delay:.36s}
.otp span:nth-child(4){animation-delay:.54s}.otp span:nth-child(5){animation-delay:.72s}.otp span:nth-child(6){animation-delay:.9s}
@keyframes otp{0%,15%{background:transparent}30%,80%{background:#fff}100%{background:transparent}}
@keyframes drop-in{from{opacity:0;transform:translateY(-24px) scale(.96)}}
@keyframes nudge{0%,88%,100%{transform:none}92%{transform:translateX(-3px)}96%{transform:translateX(3px)}}

.fc-lock{top:14%;left:2%;animation-delay:-2s}
.fc-lock .meter{display:block;width:7rem;height:.38rem;border-radius:var(--r-pill);background:var(--violet-soft);margin-top:.35rem;overflow:hidden}
.fc-lock .meter i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--fraise),var(--peche),var(--ok));animation:meter 4s var(--ease-out) infinite}
@keyframes meter{0%{width:8%}55%,100%{width:100%}}
.fc-shield{bottom:12%;right:0;animation-delay:-4s}
.fc-shield > .i{background:var(--warn-soft);color:var(--warn);animation:ring 3s ease-in-out infinite}
@keyframes ring{0%,80%,100%{transform:rotate(0)}84%{transform:rotate(14deg)}88%{transform:rotate(-12deg)}92%{transform:rotate(8deg)}}

/* ── L'e-mail au centre de tous les comptes ── */
.split--hub{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:center}
.mail-hub{position:relative;width:100%;max-width:19rem;aspect-ratio:1;justify-self:center;container-type:inline-size}
.hub-lines{position:absolute;inset:0;width:100%;height:100%}
.hub-lines line{stroke:var(--violet);stroke-width:1.2;stroke-dasharray:4 5;opacity:.45;animation:dash 1.6s linear infinite}
@keyframes dash{to{stroke-dashoffset:-18}}
.hub-core{
  position:absolute;left:50%;top:50%;z-index:2;display:grid;place-items:center;width:5rem;height:5rem;border-radius:50%;
  transform:translate(-50%,-50%);background:linear-gradient(140deg,var(--violet),var(--fraise));color:#fff;
  box-shadow:0 0 0 .7rem rgba(158,85,157,.12), 0 18px 30px -14px var(--violet);
  animation:pulse-core 2.6s ease-in-out infinite;
}
.hub-core .i{width:2rem;height:2rem}
@keyframes pulse-core{50%{box-shadow:0 0 0 1.2rem rgba(158,85,157,.06), 0 18px 30px -14px var(--violet)}}
.hub-node{
  position:absolute;left:50%;top:50%;z-index:2;display:grid;place-items:center;width:3rem;height:3rem;margin:-1.5rem 0 0 -1.5rem;
  border-radius:50%;background:var(--surface);border:1px solid var(--line-2);color:var(--violet-ink);box-shadow:var(--shadow-sm);
  transform:rotate(var(--a)) translateY(-39cqw) rotate(calc(-1 * var(--a)));   /* même rayon que les traits (39 %) */
}
.hub-node .i{width:1.2rem;height:1.2rem}
.mail-hub.is-in .hub-node{animation:node-pop 2.6s ease-in-out infinite}
.hub-node:nth-of-type(2){animation-delay:.2s !important}.hub-node:nth-of-type(3){animation-delay:.4s !important}
.hub-node:nth-of-type(4){animation-delay:.6s !important}.hub-node:nth-of-type(5){animation-delay:.8s !important}
.hub-node:nth-of-type(6){animation-delay:1s !important}.hub-node:nth-of-type(7){animation-delay:1.2s !important}
@keyframes node-pop{0%,70%,100%{background:var(--surface);color:var(--violet-ink)}80%{background:var(--violet);color:#fff}}

/* ── Notifications d'intrusion ── */
.notif-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin-bottom:1.6rem}
.notif-card{
  display:grid;grid-template-columns:2.6rem 1fr auto;gap:.9rem;align-items:start;
  padding:1rem 1.1rem;border-radius:var(--r-card);background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--shadow-sm);
}
.js .notif-card[data-reveal]{transform:translate3d(24px,0,0) scale(.98)}
.js .notif-card[data-reveal].is-in{transform:none}
.nc-icon{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:var(--r-mini);background:var(--warn-soft);color:var(--warn)}
.nc-icon .i{width:1.2rem;height:1.2rem}
.notif-card h3{font-size:1rem;margin-bottom:.2rem}
.notif-card p{font-size:.92rem;color:var(--ink-2);line-height:1.5}
.nc-time{font-size:.72rem;font-weight:700;color:var(--muted);white-space:nowrap}

/* ── Démonstration : mot de passe maître ── */
.pw-demo{
  display:grid;gap:.75rem;padding:1.4rem 1.5rem;margin-bottom:1.6rem;border-radius:var(--r-card);
  background:linear-gradient(135deg,#2B1A2A,#4A2648);color:#fff;box-shadow:var(--shadow-md);cursor:pointer;
}
.pw-label{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#E9C8EE}
.pw-field{
  display:flex;align-items:center;gap:.7rem;padding:.9rem 1.1rem;border-radius:var(--r-mini);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);font-family:ui-monospace,Consolas,monospace;font-size:1.15rem;
}
.pw-field .i{color:#E9C8EE}
.pw-text{min-height:1.4em;letter-spacing:.02em}
.caret{display:inline-block;width:2px;height:1.2em;background:currentColor;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.pw-meter{height:.55rem;border-radius:var(--r-pill);background:rgba(255,255,255,.12);overflow:hidden}
.pw-meter span{
  display:block;height:100%;border-radius:inherit;transform-origin:left;transform:scaleX(var(--s,0));
  background:var(--c,#E06B6B);transition:transform .35s var(--ease-out), background-color .35s ease;
}
.pw-legend{display:flex;justify-content:space-between;align-items:center;font-size:.88rem;font-weight:700}
.pw-vault{display:inline-flex;align-items:center;gap:.35rem;color:#BDE3C1;opacity:0;transform:translateY(4px);transition:opacity .4s ease, transform .5s var(--ease-out)}
.pw-demo.is-strong .pw-vault{opacity:1;transform:none}

/* ── Check-list de réduction des risques : cartes à cocher ── */
.feature--check{cursor:pointer}
.fc-tick{
  position:absolute;top:1rem;right:1rem;display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:50%;
  border:2px solid var(--line-2);color:#fff;transition:background-color .25s ease, border-color .25s ease;
}
.fc-tick .i{width:1rem;height:1rem;stroke-width:3;opacity:0;transform:scale(.4);transition:opacity .2s, transform .4s var(--spring)}
.feature--check[aria-pressed="true"]{border-color:color-mix(in srgb,var(--ok) 45%,transparent);background:var(--ok-soft)}
.feature--check[aria-pressed="true"] .fc-tick{background:var(--ok);border-color:var(--ok)}
.feature--check[aria-pressed="true"] .fc-tick .i{opacity:1;transform:none}
.feature--check[aria-pressed="true"] .feature-icon{background:var(--ok-soft);color:var(--ok)}
.feature--check:active{transform:scale(.985)}

@media (max-width:760px){
  .split--hub,.notif-list{grid-template-columns:1fr}
  .mail-hub{max-width:15rem}
}

/* e-mail au centre : les quatre cartes en grille 2 × 2 à côté du schéma */
.split--hub{grid-template-columns:minmax(0,1.6fr) minmax(0,.75fr);gap:2rem}
.mail-hub{max-width:16rem}
.notif-list{gap:1rem;margin-bottom:1.4rem}
.notif-card{padding:.95rem 1.1rem;gap:.85rem;grid-template-columns:2.2rem 1fr auto}
.nc-icon{width:2.2rem;height:2.2rem;border-radius:.65rem}
.notif-card h3{font-size:.98rem}
.notif-card p{font-size:.92rem;line-height:1.55}

/* ── Générateur de mots de passe ── */
.pw-demo{padding:1.4rem 1.5rem;gap:.8rem;margin-bottom:1.4rem;cursor:default}
.pw-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.pw-count{font-size:.8rem;color:#C9A8CF;font-variant-numeric:tabular-nums}
.pw-count b{color:#fff;font-weight:800}
.pw-field{padding:.85rem 1.1rem;font-size:1.15rem;min-height:3.3rem}
.pw-text{letter-spacing:.04em;word-break:break-all}
.pw-demo.is-paused .caret{animation:none;opacity:0}
.pw-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.3rem}
.pw-btn{
  display:inline-flex;align-items:center;gap:.45rem;padding:.55rem .95rem;border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.22);background:transparent;color:#F3E3F5;
  font:inherit;font-size:.85rem;font-weight:700;cursor:pointer;
  transition:transform .16s var(--ease-out), background-color .2s ease, border-color .2s ease;
}
.pw-btn .i{width:.95rem;height:.95rem}
.pw-btn:active{transform:scale(.97)}
.pw-btn--main{background:#fff;color:#4A2648;border-color:#fff}
.pw-btn[aria-pressed="true"]{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4)}
.pw-btn--main .i{transition:transform .5s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .pw-btn:not(.pw-btn--main):hover{background:rgba(255,255,255,.1)}
  .pw-btn--main:hover .i{transform:rotate(180deg)}
}
.pw-btn .i-play{display:none}
.pw-btn[aria-pressed="true"] .i-play{display:block}
.pw-btn[aria-pressed="true"] .i-pause{display:none}