/* Console de supervision souveraine (accueil Pro) - suite complete + multi-utilisateurs, cle fcp- */
.hero .fc-heroanim{display:block;width:100%;height:520px;max-height:80vh;border:0;background:transparent;border-radius:16px}@media(max-width:900px){.hero .fc-heroanim{height:500px}}

.hero .hviz{min-height:430px}
.hero .fcp-win{position:relative;width:100%;max-width:492px;margin-left:auto;background:linear-gradient(180deg,#0E1526,#0A1020);border:1px solid var(--line2);border-radius:20px;box-shadow:0 46px 92px rgba(0,0,0,.55);overflow:hidden}
.hero .fcp-top{display:flex;align-items:center;gap:7px;padding:12px 15px;border-bottom:1px solid rgba(255,255,255,.06)}
.hero .fcp-top .fcp-dot{width:10px;height:10px;border-radius:50%}
.hero .fcp-dot.r{background:#FF5F57}.hero .fcp-dot.y{background:#FEBC2E}.hero .fcp-dot.g{background:#28C840}
.hero .fcp-url{font-size:11.5px;color:#8595AE;font-weight:700;background:rgba(255,255,255,.05);padding:4px 12px;border-radius:7px;margin-left:5px}
.hero .fcp-pres{margin-left:auto;display:flex;align-items:center}
.hero .fcp-pres .av{width:21px;height:21px;border-radius:99px;border:2px solid #0E1526;margin-left:-7px}
.hero .fcp-pres .av.a1{background:linear-gradient(160deg,#3B6EF6,#2348D6)}.hero .fcp-pres .av.a2{background:linear-gradient(160deg,#19C7CB,#0F9AA0)}.hero .fcp-pres .av.a3{background:linear-gradient(160deg,#5B8DEF,#2E5BF6)}.hero .fcp-pres .av.a4{background:linear-gradient(160deg,#7C8AA8,#54617E)}
.hero .fcp-online{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;color:#19D3CB;margin-left:9px}
.hero .fcp-online i{width:7px;height:7px;border-radius:99px;background:#19D3CB;animation:fcpBlink 2.2s ease-in-out infinite}
@keyframes fcpBlink{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(25,211,203,.5)}50%{opacity:.4;box-shadow:0 0 0 5px rgba(25,211,203,0)}}
.hero .fcp-main{padding:14px 15px 4px}
.hero .fcp-main .vrow{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;margin-bottom:8px;background:rgba(255,255,255,.04)}
.hero .fcp-main .vic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:#2E5BF6;flex:none}
.hero .fcp-main .vnm{font-size:13px;font-weight:700;color:#DCE5FA}
.hero .fcp-main .vnm i{display:block;font-style:normal;font-size:11px;font-weight:500;color:#8595B8;margin-top:1px}
.hero .chip{display:inline-flex;font-size:11px;font-weight:800;border-radius:99px;padding:5px 11px}
.hero .fcp-nodes{margin-left:auto;display:inline-flex;gap:6px}
.hero .fcp-nodes b{width:9px;height:9px;border-radius:99px;background:#2E5BF6;opacity:.28}
.hero .fcp-nodes b:nth-child(1){animation:fcpNode 3.6s ease-in-out infinite}.hero .fcp-nodes b:nth-child(2){animation:fcpNode 3.6s ease-in-out .5s infinite}.hero .fcp-nodes b:nth-child(3){animation:fcpNode 3.6s ease-in-out 1s infinite}
@keyframes fcpNode{0%,60%,100%{opacity:.28;transform:scale(1)}20%{opacity:1;transform:scale(1.18);box-shadow:0 0 8px rgba(46,91,246,.7)}}
.hero .fcp-repbar{height:6px;border-radius:9px;background:rgba(255,255,255,.06);margin:0 2px 10px;overflow:hidden;position:relative}
.hero .fcp-sweep{position:absolute;top:0;left:0;height:100%;width:36%;border-radius:9px;background:linear-gradient(90deg,transparent,#2E5BF6,#19D3CB,transparent);animation:fcpSweep 3.2s ease-in-out infinite}
@keyframes fcpSweep{0%{transform:translateX(-110%)}55%,100%{transform:translateX(320%)}}
.hero .fcp-count{margin-left:auto;color:#8FB2FF;background:rgba(46,91,246,.14)}
.hero .fcp-log{margin:10px 0 2px;display:flex;flex-direction:column;gap:6px}
.hero .fcp-line{display:flex;align-items:center;gap:9px;font-size:11.5px;font-weight:600;color:#C4D2EC;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);border-radius:9px;padding:7px 10px;opacity:0;transform:translateY(6px);animation:fcpLine .55s ease-out forwards}
.hero .fcp-line .fcp-t{font-style:normal;color:#7C8AA8;font-weight:700;font-variant-numeric:tabular-nums}
.hero .fcp-line span{flex:1}.hero .fcp-line span b{color:#EAF0FF;font-weight:800}
.hero .fcp-line .fcp-ok{color:#19D3CB;font-weight:900}
.hero .fcp-line.l1{animation-delay:.7s}.hero .fcp-line.l2{animation-delay:1.5s}.hero .fcp-line.l3{animation-delay:2.3s}
@keyframes fcpLine{to{opacity:1;transform:translateY(0)}}
.hero .fcp-dock{display:flex;align-items:flex-end;justify-content:center;gap:9px;padding:26px 12px 14px;border-top:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.015)}
.hero .fcp-dock .app{position:relative;width:33px;height:33px;border-radius:10px;display:grid;place-items:center;background:rgba(46,91,246,.13);border:1px solid rgba(120,150,220,.16);animation:fcpDock 12.1s ease-in-out infinite}
.hero .fcp-dock .app svg{width:16px;height:16px}
.hero .fcp-dock .app:after{content:attr(data-n);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%) translateY(4px);z-index:5;white-space:nowrap;font-size:10px;font-weight:800;color:#EAF0FF;background:rgba(8,12,22,.96);border:1px solid var(--line2);padding:3px 8px;border-radius:7px;opacity:0;pointer-events:none;animation:fcpDockLbl 12.1s ease-in-out infinite}
@keyframes fcpDock{0%,2%{transform:translateY(0) scale(1);background:rgba(46,91,246,.13);box-shadow:none}5%,8%{transform:translateY(-9px) scale(1.16);background:#2E5BF6;box-shadow:0 8px 20px rgba(46,91,246,.5)}11%,100%{transform:translateY(0) scale(1);background:rgba(46,91,246,.13);box-shadow:none}}
@keyframes fcpDockLbl{0%,3%{opacity:0;transform:translateX(-50%) translateY(4px)}6%,8%{opacity:1;transform:translateX(-50%) translateY(0)}11%,100%{opacity:0;transform:translateX(-50%) translateY(4px)}}
.hero .fcp-dock .app:nth-child(1),.hero .fcp-dock .app:nth-child(1):after{animation-delay:-0.0s}.hero .fcp-dock .app:nth-child(2),.hero .fcp-dock .app:nth-child(2):after{animation-delay:-1.1s}.hero .fcp-dock .app:nth-child(3),.hero .fcp-dock .app:nth-child(3):after{animation-delay:-2.2s}.hero .fcp-dock .app:nth-child(4),.hero .fcp-dock .app:nth-child(4):after{animation-delay:-3.3s}.hero .fcp-dock .app:nth-child(5),.hero .fcp-dock .app:nth-child(5):after{animation-delay:-4.4s}.hero .fcp-dock .app:nth-child(6),.hero .fcp-dock .app:nth-child(6):after{animation-delay:-5.5s}.hero .fcp-dock .app:nth-child(7),.hero .fcp-dock .app:nth-child(7):after{animation-delay:-6.6s}.hero .fcp-dock .app:nth-child(8),.hero .fcp-dock .app:nth-child(8):after{animation-delay:-7.7s}.hero .fcp-dock .app:nth-child(9),.hero .fcp-dock .app:nth-child(9):after{animation-delay:-8.8s}.hero .fcp-dock .app:nth-child(10),.hero .fcp-dock .app:nth-child(10):after{animation-delay:-9.9s}.hero .fcp-dock .app:nth-child(11),.hero .fcp-dock .app:nth-child(11):after{animation-delay:-11.0s}
.hero .fcp-foot{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;padding:11px 12px;border-top:1px solid rgba(255,255,255,.05);font-size:10.5px;font-weight:700;color:#7F8DA8}
.hero .fcp-foot span{display:inline-flex;align-items:center;gap:6px}
.hero .fcp-foot span:before{content:"";width:6px;height:6px;border-radius:99px;background:#19D3CB}
.hero .fcp-scan{position:absolute;left:0;right:0;top:0;height:64px;pointer-events:none;background:linear-gradient(180deg,rgba(46,91,246,.14),transparent);opacity:.9;animation:fcpScan 7s ease-in-out infinite}
@keyframes fcpScan{0%{transform:translateY(-70px)}60%,100%{transform:translateY(470px)}}
@media(prefers-reduced-motion:reduce){
.hero .fcp-online i,.hero .fcp-nodes b,.hero .fcp-sweep,.hero .fcp-scan,.hero .fcp-dock .app,.hero .fcp-dock .app:after{animation:none!important}
.hero .fcp-nodes b{opacity:1!important}.hero .fcp-scan{display:none!important}
.hero .fcp-dock .app{transform:none!important}.hero .fcp-dock .app:after{opacity:0!important}
.hero .fcp-line{opacity:1!important;transform:none!important;animation:none!important}
}

/* ══ TEXTE EN DÉGRADÉ — RETIRÉ DE TOUT CE QUI PORTE DE L'INFORMATION ══════
   Historique, parce qu'il explique la décision :

   31/07, 23 h 59 — le prix « 0 € » de Share Free s'affiche en vert foncé sur
   un pavé bleu-turquoise. Cause : `background-clip:text` non appliqué, le
   dégradé peint donc un rectangle.
   1er/08 — après avoir mis la règle sous `@supports`, le prix ne s'affiche
   plus DU TOUT : le pavé reste seul. Ce second état est instructif — la règle
   protégée s'est appliquée, donc le moteur a répondu OUI au test de prise en
   charge, tout en ne découpant rien.

   Un test de fonctionnalité qui répond oui à tort ne protège de rien. Il n'y
   a donc pas de garde-fou possible pour cette technique, et deux tentatives
   ont suffi à l'établir. On la retire de tout ce qui doit être LU : prix,
   chiffres clés, mots de titre.

   Le moyen retenu est le seul qui ne dépende d'aucune prise en charge :
   `-webkit-text-fill-color: currentColor` — l'encre suit toujours `color`,
   quoi qu'il arrive au fond — et le dégradé est supprimé. Les blocs
   @supports plus haut deviennent inertes ; ils sont laissés en place, sans
   effet, pour que l'historique reste lisible dans le fichier.

   Ce qu'on perd : un effet de dégradé sur une dizaine de mots et de chiffres.
   Ce qu'on gagne : un prix qui s'affiche sur tous les navigateurs. */
.kz h1 .g,.kz .g,body.fcmq .g,.fcnum,.kz .stat b,.kz .zl .stat b,
.hero h1 .u,.stat .v,.kz .tier .price,.fcgp .tier .price{
  background-image:none !important;
  -webkit-text-fill-color:currentColor !important;
}
/* Chaque contexte garde une encre pleine lisible. */
.kz h1 .g,.kz .g{color:#6D9BFF}
body.fcmq .g,.kz .zl .g{color:#2E5BF6}
body.fcmq .hero .g,body.fcmq .ohero .g,body.fcmq .blk.dark .g,body.fcmq .blk.final .g{color:#6D9BFF}
.fcnum{color:#2E5BF6}
.kz .stat b{color:#EAF0FF}
.kz .zl .stat b{color:#0B1524}
.hero h1 .u,.stat .v{color:#2E5BF6}
/* Les prix payants gardent l'encre foncée du dessin d'origine ; seul le
   « 0 € » de l'offre gratuite est en turquoise, comme il l'était (en dégradé)
   avant. Ma première neutralisation les avait tous teintés — une correction
   ne doit pas emporter avec elle ce qui n'était pas cassé. */
.kz .tier .price,.fcgp .tier .price{color:#0B1524}
.kz .tier .price-free,.fcgp .tier .price-free{color:#075E5A}
.kz .tier .price small,.fcgp .tier .price small{color:#54637E}

/* ── Lien d'évitement ──────────────────────────────────────────────────────
   Il doit être invisible sans être retiré de l'ordre de tabulation :
   `display:none` ou `visibility:hidden` le rendraient inatteignable au
   clavier, ce qui est exactement l'inverse du but. On le sort donc du cadre,
   et il revient au premier coup de tabulation. */
.fc-evitement,.kz a.fc-evitement,body a.fc-evitement{
  position:absolute;left:-9999px;top:0;z-index:10000;
  background:#0B1524;color:#FFFFFF;padding:12px 20px;border-radius:0 0 10px 0;
  font-size:14px;font-weight:700;text-decoration:none}
.fc-evitement:focus,.kz a.fc-evitement:focus{left:0}
/* La cible reçoit le focus par programme (tabindex="-1") : sans cette règle,
   certains navigateurs y dessinent un contour permanent. */
main#contenu:focus{outline:none}

/* ── Focus visible ─────────────────────────────────────────────────────────
   `:focus-visible` ne s'affiche qu'à la navigation au clavier — la souris ne
   déclenche donc aucun contour, et l'usage au doigt non plus. */
.kz a:focus-visible,.kz button:focus-visible,.kz input:focus-visible,
.kz select:focus-visible,.kz textarea:focus-visible,.kz summary:focus-visible{
  outline:3px solid #6D9BFF;outline-offset:2px;border-radius:4px}
