/* ============================================================
   Singulr — V2 expérimentale (URL de test /v2/)
   Surcouche additive par-dessus /home.css.
   Réutilise tous les tokens, animations et composants existants.
   N'introduit QUE les composants nouveaux à la V2 :
     - grille « Nos missions »
     - grille « Nos solutions » (extensible, CTA par carte)
     - visualisation animée « La fédération »
     - grille « Au-delà du code »
   Aucun token redéfini : tout hérite de :root de home.css.
   ============================================================ */

/* ---------- éléments partagés réintroduits ---------- */
.eyebrow{display:inline-block;font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.2em;color:var(--accent);margin-bottom:1rem}

/* ============================================================
   NOS MISSIONS — grille de 4 cartes (reveal + stagger)
   ============================================================ */
.missions{padding:6rem 2rem}
.missions-inner{margin:0 auto;max-width:72rem}
.missions-grid{margin-top:3.5rem;display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:640px){.missions-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.missions-grid{grid-template-columns:repeat(4,1fr)}}
.mission-card{position:relative;overflow:hidden;display:flex;flex-direction:column;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);padding:1.75rem;transition:border-color .4s var(--ease),transform .5s var(--ease),background-color .4s var(--ease)}
.mission-card:hover{border-color:var(--line-2);transform:translateY(-3px);background:var(--surface-2)}
.mission-ico{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:13px;background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line);color:var(--accent);margin-bottom:1.5rem}
.mission-num{position:absolute;top:1.4rem;right:1.4rem;font-family:var(--mono);font-size:.78rem;font-weight:600;color:var(--ink-3)}
.mission-h{font-size:1.2rem;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.mission-p{margin-top:.6rem;font-size:.95rem;line-height:1.55;color:var(--ink-2)}
/* stagger d'apparition */
.missions-grid .mission-card:nth-child(2){--d:.08s}
.missions-grid .mission-card:nth-child(3){--d:.16s}
.missions-grid .mission-card:nth-child(4){--d:.24s}

/* ============================================================
   NOS SOLUTIONS — grille extensible, CTA propre par carte
   auto-fit : ajouter une carte ne casse pas la mise en page.
   ============================================================ */
.sol{padding:6rem 2rem}
.sol-inner{margin:0 auto;max-width:72rem}
.sol-grid{margin-top:3.5rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:1rem}
.sol-card{position:relative;overflow:hidden;display:flex;flex-direction:column;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);padding:2rem;transition:border-color .4s var(--ease),transform .5s var(--ease)}
.sol-card:hover{border-color:var(--line-2);transform:translateY(-3px)}
.sol-card-glow{position:absolute;right:-5rem;top:-5rem;width:16rem;height:16rem;border-radius:999px;filter:blur(48px);opacity:0;transition:opacity .5s;pointer-events:none;background:radial-gradient(circle,var(--accent-soft) 0%,transparent 65%)}
.sol-card:hover .sol-card-glow{opacity:1}
.sol-tag{align-self:flex-start;font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);border:1px solid var(--line-2);border-radius:7px;padding:.25rem .55rem;margin-bottom:1.25rem}
.sol-tag--soon{color:var(--ink-3);border-color:var(--line)}
.sol-ico{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:13px;background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line);color:var(--accent);margin-bottom:1.5rem}
.sol-h{font-size:1.3rem;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.sol-p{margin-top:.75rem;flex:1;font-size:.97rem;line-height:1.6;color:var(--ink-2)}
.sol-cta{margin-top:1.75rem;align-self:flex-start}
.sol-cta.btn-ghost{height:2.75rem;font-size:.88rem}
.sol-grid .sol-card:nth-child(2){--d:.08s}
.sol-grid .sol-card:nth-child(3){--d:.16s}

/* ---------- preuve concrète : bloc vidéo premium (sous la carte Forge) ----------
   Démonstration de la forge présentée comme une réalisation, pas comme le centre
   de la page. Panneau horizontal : vidéo + légende + texte court + CTA.
   Hérite des tokens et du style de carte ; aucun effet flashy. */
.sol-proof-lead{margin-top:3.5rem;max-width:46rem;font-size:1.02rem;line-height:1.65;color:var(--ink-2)}
.sol-proof{position:relative;overflow:hidden;margin-top:1.5rem;display:grid;grid-template-columns:1fr;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface)}
@media(min-width:880px){.sol-proof{grid-template-columns:1.3fr 1fr}}
.sol-proof-media{position:relative;background:#0b0b0d}
.sol-proof-glow{position:absolute;left:-4rem;bottom:-4rem;width:14rem;height:14rem;border-radius:999px;filter:blur(52px);opacity:.5;pointer-events:none;background:radial-gradient(circle,var(--accent-soft) 0%,transparent 65%)}
.sol-proof-video{position:relative;z-index:1;display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#0b0b0d}
.sol-proof-text{display:flex;flex-direction:column;justify-content:center;padding:2rem;border-top:1px solid var(--line)}
@media(min-width:880px){.sol-proof-text{border-top:0;border-left:1px solid var(--line)}}
.sol-proof-h{margin-top:.85rem;font-size:1.2rem;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.sol-proof-p{margin-top:.6rem;font-size:.95rem;line-height:1.6;color:var(--ink-2)}
.sol-proof-cap{margin-top:.85rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--ink-3)}
.sol-proof-cta{margin-top:1.5rem;align-self:flex-start;height:2.75rem;font-size:.88rem}

/* ============================================================
   POURQUOI REJOINDRE — argumentaire fédération (4 cartes)
   Réutilise .missions-grid + .mission-card : mêmes layout,
   animations reveal et stagger que les autres sections.
   ============================================================ */
.join{padding:6rem 2rem}
.join-inner{margin:0 auto;max-width:72rem}

/* ============================================================
   LA FÉDÉRATION — visualisation animée (Singulr au centre)
   SVG : lignes reliant le centre à 7 acteurs.
   Animation lente uniquement, coupée par prefers-reduced-motion
   (règle globale de home.css).
   ============================================================ */
.fedviz{position:relative;overflow:hidden;padding:7rem 2rem;background:#100f0c}
@media(min-width:640px){.fedviz{padding:9rem 2rem}}
.fedviz-beam{position:absolute;border-radius:999px;pointer-events:none;filter:blur(120px)}
.fedviz-beam--1{left:50%;top:30%;width:46vw;height:46vw;transform:translateX(-50%);background:radial-gradient(circle,rgba(255,210,63,.22) 0%,transparent 62%)}
.fedviz-inner{position:relative;margin:0 auto;max-width:64rem;text-align:center}
.fedviz-inner .section-title{margin:0 auto}
.fedviz-inner .section-intro{margin:1.25rem auto 0;text-align:center}

.fedviz-stage{position:relative;width:min(680px,100%);aspect-ratio:1;margin:3.5rem auto 0}
/* lignes SVG en fond */
.fedviz-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fedviz-line{stroke:rgba(255,255,255,.14);stroke-width:1}
.fedviz-line-pulse{stroke:var(--accent);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:14 240;filter:drop-shadow(0 0 4px rgba(255,210,63,.6));animation:fedviz-travel 7s linear infinite}
@keyframes fedviz-travel{from{stroke-dashoffset:254}to{stroke-dashoffset:0}}
.fedviz-line-pulse.l1{animation-delay:0s}
.fedviz-line-pulse.l2{animation-delay:1s}
.fedviz-line-pulse.l3{animation-delay:2s}
.fedviz-line-pulse.l4{animation-delay:3s}
.fedviz-line-pulse.l5{animation-delay:4s}
.fedviz-line-pulse.l6{animation-delay:5s}
.fedviz-line-pulse.l7{animation-delay:6s}

/* nœud central */
.fedviz-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;width:7.5rem;height:7.5rem;border-radius:50%;background:radial-gradient(circle at 50% 35%,#241c08,#0e0e11);border:1px solid var(--accent);box-shadow:0 0 0 6px rgba(255,210,63,.06),0 0 40px rgba(255,210,63,.25)}
.fedviz-core-name{font-weight:600;font-size:1.05rem;letter-spacing:-.02em;color:var(--ink)}
.fedviz-core-dots{display:inline-flex;gap:3px}
.fedviz-core-dots span{width:6px;height:6px;border-radius:999px}
.fedviz-core-dots .d-k{background:#1c1c20;box-shadow:0 0 0 1px rgba(255,255,255,.22)}
.fedviz-core-dots .d-y{background:var(--accent)}
.fedviz-core-dots .d-r{background:var(--rouge)}
.fedviz-core-ring{position:absolute;inset:-.9rem;border-radius:50%;border:1px dashed rgba(255,210,63,.25);animation:spin 40s linear infinite}

/* nœuds acteurs : positionnés via --x / --y (en %) */
.fedviz-node{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);z-index:10;display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .9rem;border-radius:999px;border:1px solid var(--line-2);background:rgba(20,20,22,.85);backdrop-filter:blur(6px);font-size:.86rem;font-weight:500;color:var(--ink-2);white-space:nowrap;animation:fedviz-float 9s ease-in-out infinite}
.fedviz-node:hover{border-color:var(--accent);color:var(--ink)}
.fedviz-node-dot{width:7px;height:7px;border-radius:999px;background:var(--accent);flex:none;box-shadow:0 0 10px rgba(255,210,63,.7)}
@keyframes fedviz-float{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 6px))}}
.fedviz-node:nth-of-type(odd){animation-delay:-4.5s}

@media(max-width:560px){
  .fedviz-node{font-size:.74rem;padding:.4rem .7rem;gap:.35rem}
  .fedviz-core{width:5.5rem;height:5.5rem}
  .fedviz-core-name{font-size:.86rem}
}

/* ============================================================
   AU-DELÀ DU CODE — domaines souverains (chips premium)
   ============================================================ */
.beyond{padding:6rem 2rem}
.beyond-inner{margin:0 auto;max-width:64rem}
.beyond-domains{margin-top:2.5rem;display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}
.domain{display:inline-flex;align-items:center;gap:.55rem;border-radius:12px;border:1px solid var(--line);background:var(--surface);padding:.7rem 1.1rem;font-size:.95rem;font-weight:500;color:var(--ink-2);transition:border-color .3s,color .3s,transform .4s var(--ease)}
.domain:hover{border-color:var(--line-2);color:var(--ink);transform:translateY(-2px)}
.domain--live{border-color:rgba(255,210,63,.3);color:var(--ink)}
.domain-ico{color:var(--accent);flex:none}
.domain-badge{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);border:1px solid var(--line-2);border-radius:6px;padding:.1rem .35rem}
.beyond-note{margin:2.5rem auto 0;max-width:40rem;text-align:center;font-size:1.05rem;line-height:1.6;color:var(--ink-2)}
.beyond-note strong{color:var(--ink)}

/* ============================================================
   BADGE VIDÉO — preuve « En production » (chip discret en overlay)
   ============================================================ */
.sol-proof-badge{position:absolute;left:1rem;top:1rem;z-index:2;display:inline-flex;align-items:center;gap:.45rem;padding:.35rem .7rem;border-radius:999px;border:1px solid var(--line-2);background:rgba(11,11,13,.72);backdrop-filter:blur(6px);font-family:var(--mono);font-size:.64rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.sol-proof-badge::before{content:"";width:7px;height:7px;border-radius:999px;background:var(--accent);box-shadow:0 0 10px rgba(255,210,63,.8);animation:proof-pulse 2.6s ease-in-out infinite}
@keyframes proof-pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ============================================================
   POURQUOI MAINTENANT — texte + chaîne souveraine animée
   NL → DE → UE → BE, impulsion lente le long du connecteur.
   ============================================================ */
.now{padding:6rem 2rem}
.now-inner{margin:0 auto;max-width:50rem;text-align:center}
.now-body{margin:1.75rem auto 0;max-width:42rem;font-size:1.05rem;line-height:1.7;color:var(--ink-2)}
.now-body strong{color:var(--ink);font-weight:600}
.now-chain{position:relative;margin:3rem auto 0;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.5rem}
.now-node{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .95rem;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);font-family:var(--mono);font-size:.8rem;font-weight:600;letter-spacing:.06em;color:var(--ink-2)}
.now-node[data-self]{border-color:var(--accent);color:var(--ink);background:var(--accent-tint)}
.now-node-dot{width:7px;height:7px;border-radius:999px;background:var(--ink-3);flex:none}
.now-node[data-self] .now-node-dot{background:var(--accent);box-shadow:0 0 10px rgba(255,210,63,.7)}
.now-link{position:relative;width:1.75rem;height:1px;background:var(--line-2);overflow:visible}
.now-link::after{content:"";position:absolute;top:50%;left:0;width:.5rem;height:1px;transform:translateY(-50%);background:var(--accent);box-shadow:0 0 6px rgba(255,210,63,.7);animation:now-travel 4s linear infinite}
.now-link.n2::after{animation-delay:1s}
.now-link.n3::after{animation-delay:2s}
@keyframes now-travel{from{left:-.5rem;opacity:0}10%{opacity:1}90%{opacity:1}to{left:1.75rem;opacity:0}}
@media(max-width:520px){.now-link{width:1.1rem}.now-node{font-size:.72rem;padding:.45rem .75rem}}

/* ============================================================
   FONDATIONS ÉPROUVÉES — bloc de confiance (briques libres)
   ============================================================ */
.stack{padding:6rem 2rem}
.stack-inner{margin:0 auto;max-width:64rem;text-align:center}
.stack-grid{margin-top:2.5rem;display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}
.stack-chip{display:inline-flex;align-items:center;gap:.55rem;border-radius:12px;border:1px solid var(--line);background:var(--surface);padding:.7rem 1.15rem;font-size:.95rem;font-weight:500;color:var(--ink-2);transition:border-color .3s,color .3s,transform .4s var(--ease)}
.stack-chip:hover{border-color:var(--line-2);color:var(--ink);transform:translateY(-2px)}
.stack-chip-dot{width:7px;height:7px;border-radius:999px;background:var(--accent);flex:none;opacity:.8}
.stack-note{margin:2.5rem auto 0;max-width:42rem;font-size:1rem;line-height:1.65;color:var(--ink-2)}
.stack-note strong{color:var(--ink)}