/* ==========================================================
   PaaS vitrine v2 — Pages styles
   Spécifique aux sections marketing (hero, orbites, how,
   security extract, cta final…)
   Étend components.css / base.css — pas de doublons sur
   .btn, .card, .pill, .terminal, .section-head, .eyebrow.
   ========================================================== */

/* ---------- HERO ---------- */
.hero{
  position:relative;
  padding:calc(var(--header-h) + 56px) 0 80px;
  overflow:hidden;
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0, 55fr) minmax(0, 45fr);
  gap:64px;
  align-items:center;
}
.hero-title{
  font:700 clamp(40px, 6vw, 82px)/1.04 var(--ff-display);
  letter-spacing:-0.022em;
  margin:0 0 24px;
  color:var(--c-text);
}
.hero-title .glow-text{
  text-shadow:0 0 80px rgba(0,229,255,.25);
}
.hero-sub{
  font:400 clamp(16px, 1.4vw, 19px)/1.55 var(--ff-body);
  color:var(--c-text-body);
  max-width:560px;
  margin:0 0 32px;
}
.hero-ctas{
  display:flex;flex-wrap:wrap;gap:14px;
  margin-bottom:32px;
}
.hero-pills{
  display:flex;flex-wrap:wrap;gap:10px;
  padding:0;margin:0;list-style:none;
}

/* ---------- HERO VISUAL : ORBITS + SHIELD ---------- */
.hero-visual{
  position:relative;
  aspect-ratio:1/1;
  min-height:380px;
}
.orbit{
  position:absolute;inset:0;
  display:grid;place-items:center;
}
.orbit-ring{
  position:absolute;
  border-radius:50%;
  border:1px dashed rgba(0,229,255,.18);
}
.orbit-ring.r1{width:82%;height:82%;border-color:rgba(0,229,255,.22)}
.orbit-ring.r2{width:62%;height:62%;border-color:rgba(139,92,246,.22);border-style:solid;opacity:.5}
.orbit-ring.r3{width:42%;height:42%;border-color:rgba(0,229,255,.32)}
.shield{
  position:relative;
  width:62%;height:62%;
  filter:drop-shadow(0 0 28px rgba(0,229,255,.35));
}
.orbit-node{
  position:absolute;
  width:14px;height:14px;border-radius:50%;
  background:var(--c-cyan);
  box-shadow:0 0 16px rgba(0,229,255,.9), 0 0 32px rgba(0,229,255,.4);
}
.orbit-node::after{
  content:attr(data-tip);
  position:absolute;left:18px;top:-2px;
  font:600 10px/1 var(--ff-mono);
  text-transform:uppercase;letter-spacing:.14em;
  color:var(--c-text);
  background:rgba(15,22,38,.85);
  border:1px solid rgba(255,255,255,.08);
  padding:4px 8px;border-radius:var(--r-xs);
  white-space:nowrap;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.orbit-node.n1{top:12%;left:50%;transform:translateX(-50%)}
.orbit-node.n2{top:30%;right:8%}
.orbit-node.n3{bottom:30%;right:8%}
.orbit-node.n4{bottom:12%;left:50%;transform:translateX(-50%)}
.orbit-node.n5{bottom:30%;left:8%}
.orbit-node.n6{top:30%;left:8%}
.orbit-node.n4::after,
.orbit-node.n5::after,
.orbit-node.n6::after{left:auto;right:18px}

/* ---------- HERO FLOAT CARDS (scan panel + findings) ---------- */
.float-card{
  position:absolute;
  background:var(--g-glass);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-md);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(0,229,255,.04) inset;
  overflow:hidden;
  /* perf : isole le repaint de la carte flottante animée (déjà overflow:hidden → aucun clip visuel) */
  contain:layout paint;
}
.card-scan{
  left:-12%;bottom:6%;
  width:62%;min-width:260px;max-width:340px;
}
.card-findings{
  right:-6%;top:8%;
  width:46%;min-width:220px;max-width:270px;
  padding:14px 16px;
}

/* ---------- SCAN panel (hero, remplace l'ancien terminal CLI) ---------- */
.card-scan .scan-head{
  display:flex;align-items:center;gap:9px;
  padding:12px 16px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.25);
}
.card-scan .scan-live{
  width:8px;height:8px;border-radius:50%;
  background:var(--c-green);
  box-shadow:0 0 12px rgba(0,255,163,.9);
  animation:pulse-live 1.8s infinite;
  flex:none;
}
.card-scan .scan-title{
  font:500 13px/1 var(--ff-body);
  color:var(--c-text);
}
.card-scan .scan-target{
  margin-left:auto;
  font:500 11px/1 var(--ff-mono);
  color:var(--c-cyan);
  background:rgba(0,229,255,.10);
  padding:4px 9px;border-radius:var(--r-full);
  letter-spacing:.02em;
}
.card-scan .scan-body{
  padding:15px 16px 4px;
  display:flex;flex-direction:column;gap:11px;
}
.scan-phase-top{
  display:flex;justify-content:space-between;align-items:center;
  font:500 12px/1 var(--ff-body);
  margin-bottom:5px;
}
.scan-phase-name{color:var(--c-text-body)}
.scan-phase-state{color:var(--c-text-muted)}
.scan-phase--done .scan-phase-name,
.scan-phase--done .scan-phase-state{color:var(--c-green)}
.scan-phase--active .scan-phase-name,
.scan-phase--active .scan-phase-state{color:var(--c-cyan)}
.scan-phase--wait .scan-phase-name,
.scan-phase--wait .scan-phase-state{color:var(--c-text-muted)}
.scan-bar{
  display:block;height:6px;border-radius:var(--r-full);
  background:rgba(255,255,255,.06);overflow:hidden;
}
.scan-fill{
  display:block;height:100%;border-radius:var(--r-full);
}
.scan-fill--done{background:var(--c-green)}
.scan-fill--active{
  background:var(--c-cyan);
  box-shadow:0 0 12px rgba(0,229,255,.6);
  width:62%;
}
.scan-fill--wait{background:var(--c-violet)}
.scan-w-100{width:100%}
.scan-w-0{width:0}
/* perf : anime transform (compositing GPU) au lieu de width (reflow chaque frame).
   width fixée à 68% (max) + scaleX ramène visuellement à 54%↔68%, rendu identique. */
.scan-anim{
  width:68%;
  transform-origin:left center;
  animation:scan-progress 3.2s ease-in-out infinite;
}
@keyframes scan-progress{
  0%,100%{transform:scaleX(.7941)}
  50%{transform:scaleX(1)}
}
.card-scan .scan-foot{
  margin:12px 16px 0;padding:12px 0 14px;
  border-top:1px solid rgba(255,255,255,.07);
  display:flex;justify-content:space-between;
  font:500 11px/1 var(--ff-body);
  color:var(--c-text-muted);
}

/* ---------- HOW panel (phase 3, remplace l'ancien terminal CLI) ---------- */
.how-panel-head{
  display:flex;align-items:center;gap:9px;
  padding:12px 16px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.25);
}
.how-panel-live{
  width:8px;height:8px;border-radius:50%;
  background:var(--c-violet);
  box-shadow:0 0 12px rgba(139,92,246,.9);
  animation:pulse-live 1.8s infinite;
  flex:none;
}
.how-panel-title{font:500 13px/1 var(--ff-body);color:var(--c-text)}
.how-panel-target{
  margin-left:auto;font:500 11px/1 var(--ff-mono);
  color:var(--c-violet);letter-spacing:.02em;
}
.how-panel-body{
  padding:14px 16px 16px;
  display:flex;flex-direction:column;gap:10px;
}
.how-line{
  display:flex;align-items:center;gap:10px;
  font:500 12.5px/1.3 var(--ff-body);
  color:var(--c-text-body);
}
.how-line .how-ico{
  width:16px;text-align:center;flex:none;
  font:600 12px/1 var(--ff-mono);
}
.how-line--ok .how-ico{color:var(--c-green)}
.how-line--warn .how-ico{color:var(--c-amber)}
.how-line--move .how-ico,
.how-line--next .how-ico{color:var(--c-cyan)}

/* ---------- FINDINGS card ---------- */
.findings-head{
  display:flex;align-items:center;gap:8px;
  font:600 11px/1 var(--ff-mono);
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--c-text);
  margin-bottom:12px;
}
.dot-live{
  width:8px;height:8px;border-radius:50%;
  background:var(--c-green);
  box-shadow:0 0 12px rgba(0,255,163,.9);
  animation:pulse-live 1.8s infinite;
}
@keyframes pulse-live{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.6;transform:scale(.85)}
}
.findings-row{
  display:grid;
  grid-template-columns:64px 1fr 28px;
  align-items:center;gap:10px;
  font:500 12px/1.2 var(--ff-mono);
  color:var(--c-text-muted);
  margin-bottom:8px;
}
.findings-row:last-child{margin-bottom:0}
.findings-label{letter-spacing:.04em}
.findings-bar{
  height:6px;border-radius:var(--r-full);
  background:rgba(255,255,255,.06);
  overflow:hidden;position:relative;
}
.findings-bar .bar{
  position:absolute;left:0;top:0;bottom:0;
  border-radius:var(--r-full);
  box-shadow:0 0 12px currentColor;
}
.findings-bar .bar-red{background:#FF5577;color:rgba(255,85,119,.7)}
.findings-bar .bar-amber{background:#FFB547;color:rgba(255,181,71,.7)}
.findings-bar .bar-cyan{background:var(--c-cyan);color:rgba(0,229,255,.7)}
.findings-val{
  text-align:right;
  color:var(--c-text);
  font-weight:600;
}

/* ---------- HERO STRIP (stats compact) ---------- */
.hero-strip{
  margin-top:64px;padding:24px 32px;
  background:var(--g-glass);
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--r-md);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.strip-item{
  display:flex;flex-direction:column;gap:4px;
  min-width:120px;
}
.strip-val{
  font:700 clamp(24px, 2.5vw, 32px)/1 var(--ff-display);
  letter-spacing:-0.02em;
  background:var(--g-brand);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.strip-lbl{
  font:500 12px/1.3 var(--ff-mono);
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--c-text-muted);
}
.strip-sep{
  width:1px;height:36px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.18),transparent);
}

/* ---------- SECTION ALT (band sombre alternée) ---------- */
.section-alt{
  background:linear-gradient(180deg,
    rgba(15,22,38,0) 0%,
    rgba(15,22,38,.55) 50%,
    rgba(15,22,38,0) 100%);
}
.section-head .section-lead{
  font:400 17px/1.55 var(--ff-body);
  color:var(--c-text-body);
  max-width:640px;margin:0 auto;
}

/* ---------- GRIDS ---------- */
.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* ---------- CARDS overrides locaux ---------- */
.card h3{
  font:600 19px/1.3 var(--ff-display);
  color:var(--c-text);
  margin:0 0 10px;
  letter-spacing:-0.01em;
}
.card p{
  font:400 15px/1.55 var(--ff-body);
  color:var(--c-text-body);
  margin:0;
}
.card-persona .persona-tag{
  display:inline-flex;align-items:center;gap:6px;
  font:600 11px/1 var(--ff-mono);
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--c-violet);
  padding:6px 10px;border-radius:var(--r-full);
  border:1px solid rgba(139,92,246,.28);
  background:rgba(139,92,246,.08);
  margin-bottom:14px;
}
.card-persona h3{
  font-size:18px;
  margin-bottom:12px;
}

/* ====================================================================
   OFFRES (modes) — cartes alignées, CTA en pied, offre centrale mise en avant
   ==================================================================== */
.modes-grid{
  gap:28px;
  align-items:stretch;
}
.card-mode{
  display:flex;
  flex-direction:column;
  padding:var(--sp-8) var(--sp-7);
}
.card-mode .card-badge{
  align-self:flex-start;
  margin-bottom:var(--sp-5);
}
.card-mode .card-icon{
  margin-bottom:var(--sp-5);
}
.card-mode .card-icon--cyan{
  color:var(--c-cyan);
  background:rgba(0,229,255,0.10);
  border:1px solid rgba(0,229,255,0.22);
}
.card-mode .card-icon--violet{
  color:var(--c-violet);
  background:rgba(139,92,246,0.10);
  border:1px solid rgba(139,92,246,0.24);
}
.card-mode .card-icon--amber{
  color:var(--c-amber);
  background:rgba(255,180,84,0.10);
  border:1px solid rgba(255,180,84,0.24);
}
.card-mode .card-title{
  margin:0 0 8px;
  font-size:21px;
}
.card-mode .card-tagline{
  margin:0 0 var(--sp-6);
  font:400 15px/1.55 var(--ff-body);
  color:var(--c-text-body);
}
/* Bloc méta : prend l'espace flexible pour pousser le CTA en bas */
.card-mode .card-meta{
  flex:1 1 auto;
  margin:0 0 var(--sp-6);
  padding:var(--sp-5) 0 0;
  border-top:1px solid var(--c-border);
  display:flex;
  flex-direction:column;
  gap:var(--sp-5);
}
.card-meta-row{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.card-meta-row dt{
  font:600 11px/1 var(--ff-mono);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--c-cyan);
  margin:0;
}
.card-meta-row dd{
  margin:0;
  font:400 14px/1.55 var(--ff-body);
  color:var(--c-text-body);
}
/* CTA : aligné en pied sur les 3 cartes, pleine largeur */
.card-mode .card-cta{
  margin-top:auto;
  width:100%;
  justify-content:center;
}
/* Offre centrale : accent cyan, surélevée, badge distinct */
.card-mode--featured{
  border-color:rgba(0,229,255,0.35);
  box-shadow:0 0 0 1px rgba(0,229,255,0.22), 0 18px 50px -20px rgba(0,229,255,0.40);
  transform:translateY(-12px);
}
.card-mode--featured::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(150deg, rgba(0,229,255,0.45), rgba(139,92,246,0.20) 60%, transparent);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
}

/* ====================================================================
   SCÉNARIOS — cartes aérées, rythme vertical badge → titre → texte
   ==================================================================== */
.scenarios-grid{
  gap:28px;
}
.card-scenario{
  display:flex;
  flex-direction:column;
  gap:var(--sp-4);
  padding:var(--sp-8) var(--sp-7);
  border-radius:var(--r-xl);
}
.card-scenario .card-badge{
  align-self:flex-start;
  margin:0;
}
.card-scenario .card-title{
  margin:0;
  font-size:20px;
}
.card-scenario .card-tagline{
  margin:0;
  font:400 15px/1.65 var(--ff-body);
  color:var(--c-text-body);
}

/* ---------- HOW IT WORKS ---------- */
.how-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap:56px;
  align-items:start;
}
.how-steps{
  list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:28px;
}
.how-step{
  display:grid;
  grid-template-columns:64px 1fr;
  gap:20px;
  padding:24px;
  background:var(--g-glass);
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--r-md);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:border-color var(--t-base), transform var(--t-base);
}
.how-step:hover{
  border-color:rgba(0,229,255,.25);
  transform:translateX(4px);
}
.how-num{
  font:700 32px/1 var(--ff-display);
  letter-spacing:-0.02em;
  background:var(--g-brand);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.how-body h3{
  font:600 18px/1.3 var(--ff-display);
  color:var(--c-text);
  margin:0 0 6px;
}
.how-body p{
  font:400 14.5px/1.55 var(--ff-body);
  color:var(--c-text-body);
  margin:0;
}
.how-panel{
  position:sticky;top:120px;
  background:var(--g-glass);
  border:1px solid rgba(139,92,246,.16);
  border-radius:var(--r-md);
  overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
}

/* ---------- SECURITY EXTRACT ---------- */
.security-grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:64px;
  align-items:center;
}
.security-copy h2{
  font:700 clamp(28px, 3.2vw, 40px)/1.12 var(--ff-display);
  letter-spacing:-0.02em;
  color:var(--c-text);
  margin:16px 0 20px;
}
.security-copy p{
  font:400 16px/1.6 var(--ff-body);
  color:var(--c-text-body);
  margin:0 0 24px;
  max-width:540px;
}
.security-list{
  list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:14px;
}
.sec-item{
  display:grid;
  grid-template-columns:36px 1fr;gap:14px;
  align-items:start;
  padding:18px 20px;
  background:var(--g-glass);
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--r-sm);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.sec-ic{
  width:32px;height:32px;
  display:grid;place-items:center;
  border-radius:var(--r-xs);
  background:rgba(0,255,163,.1);
  border:1px solid rgba(0,255,163,.28);
  color:var(--c-green);
}
.sec-ic svg{width:16px;height:16px}
.sec-item h4{
  font:600 15px/1.3 var(--ff-display);
  color:var(--c-text);
  margin:0 0 4px;
}
.sec-item p{
  font:400 13.5px/1.5 var(--ff-body);
  color:var(--c-text-body);
  margin:0;
}

/* ---------- CTA FINAL ---------- */
.section-cta{
  padding:clamp(72px,8vw,120px) 0 clamp(80px,9vw,140px);
}
.cta-final{
  max-width:780px;margin:0 auto;
  text-align:center;
  padding:64px 48px;
  background:radial-gradient(120% 100% at 50% 0%,
    rgba(0,229,255,.12) 0%,
    rgba(139,92,246,.08) 40%,
    transparent 75%);
  border:1px solid rgba(0,229,255,.22);
  border-radius:var(--r-xl);
  position:relative;overflow:hidden;
}
.cta-final::before{
  content:"";position:absolute;inset:0;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' opacity='.04'><path d='M0 0h40v1H0zM0 0v40h1V0z' fill='%2300E5FF'/></svg>");
  pointer-events:none;
}
.cta-final h2{
  font:700 clamp(28px, 3.6vw, 44px)/1.1 var(--ff-display);
  letter-spacing:-0.02em;
  color:var(--c-text);
  margin:0 0 14px;
  position:relative;
}
.cta-final > p{
  font:400 16px/1.55 var(--ff-body);
  color:var(--c-text-body);
  margin:0 0 28px;
  position:relative;
}
.cta-actions{
  display:inline-flex;flex-wrap:wrap;gap:14px;justify-content:center;
  position:relative;
}
.cta-note{
  margin-top:20px !important;
  font:500 12px/1.4 var(--ff-mono) !important;
  letter-spacing:.06em;
  color:var(--c-text-faint) !important;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1080px){
  .hero-grid{grid-template-columns:1fr;gap:48px}
  .hero-visual{max-width:480px;margin:0 auto}
  .how-grid{grid-template-columns:1fr;gap:32px}
  .how-panel{position:static}
  .security-grid{grid-template-columns:1fr;gap:40px}
  .grid-3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 720px){
  .hero{padding-top:calc(var(--header-h) + 32px)}
  .hero-strip{flex-wrap:wrap;gap:18px 24px;padding:20px 24px}
  .strip-sep{display:none}
  .strip-item{min-width:42%}
  .section-cta{padding:80px 0 100px}
  .cta-final{padding:40px 24px}
  .grid-3,.grid-2{grid-template-columns:1fr}
  .card-mode--featured{transform:none}
  .how-step{grid-template-columns:48px 1fr;gap:14px;padding:20px}
  .how-num{font-size:26px}

  /* Hero visual : reflow en flux normal, orbit recentré, cartes empilées */
  .hero-visual{
    max-width:100%;
    width:100%;
    aspect-ratio:auto;
    height:auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:20px;
    position:static;
  }
  .orbit{
    position:relative;
    width:min(86vw, 320px);
    height:min(86vw, 320px);
    margin:0 auto;
    inset:auto;
  }
  /* Orbits décoratives r2/r3 cachées en mobile (moins de bruit visuel) */
  .orbit-ring.r2,
  .orbit-ring.r3{display:none}
  /* Garde le shield et 4 nodes visibles (pas 6 surchargés) */
  .orbit-node.n5,
  .orbit-node.n6{display:none}
  .orbit-node::after{display:none} /* tooltips off mobile (touch) */

  /* Cartes flottantes → empilées sous l'orbit, pleine largeur */
  .float-card{
    position:static !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    inset:auto !important;
    transform:none !important;
  }
  .card-scan,
  .card-findings{
    width:100% !important;
    max-width:100% !important;
  }
}

/* Très petits écrans : tightening final */
@media (max-width: 420px){
  .hero-ctas{flex-direction:column;align-items:stretch}
  .hero-ctas .btn{width:100%;justify-content:center}
  .hero-pills{gap:6px}
  .hero-pills li{font-size:11px;padding:5px 9px}
  .container{padding-left:16px;padding-right:16px}
  .eyebrow{font-size:10px;padding:5px 10px}
  .section-head .section-lead{font-size:15px}
}

/* ==========================================================
   PRICING — 3 plans · comparatif · FAQ · trust · CTA
   ========================================================== */

/* ---------- Section plans ---------- */
.section-plans{ padding:48px 0 96px; }

.plans-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:24px;
  align-items:stretch;
}

.card-plan{
  position:relative;
  overflow:visible; /* badgefix 2026-05-26 — let .plan-badge top:-12px show above card (override .card overflow:hidden) */
  display:flex;flex-direction:column;
  padding:32px 28px;
  background:linear-gradient(180deg, rgba(15,22,49,.72) 0%, rgba(10,14,39,.6) 100%);
  border:1px solid rgba(120,140,200,.16);
  border-radius:var(--r-xl);
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.card-plan:hover{
  transform:translateY(-4px);
  border-color:rgba(120,140,200,.32);
  box-shadow:0 24px 48px -20px rgba(0,0,0,.55);
}

/* Accent par plan (barre top 2px) */
.card-plan::before{
  content:"";
  position:absolute;left:0;right:0;top:0;height:2px;
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  opacity:.85;
}
.card-plan--discovery::before{ background:linear-gradient(90deg, #00D9FF 0%, #00E5FF 100%); }
.card-plan--pme::before{       background:linear-gradient(90deg, #00D9FF 0%, #7C3AED 100%); }
.card-plan--ent::before{       background:linear-gradient(90deg, #FFB454 0%, #FF7A45 100%); }

/* Carte mise en avant (PaaS PME) */
.card-plan--featured{
  border-color:rgba(124,58,237,.45);
  background:linear-gradient(180deg, rgba(124,58,237,.10) 0%, rgba(10,14,39,.6) 60%);
  box-shadow:0 0 0 1px rgba(124,58,237,.15), 0 24px 60px -28px rgba(124,58,237,.4);
}
.card-plan--featured:hover{
  border-color:rgba(124,58,237,.6);
  box-shadow:0 0 0 1px rgba(124,58,237,.25), 0 32px 72px -28px rgba(124,58,237,.55);
}

.plan-badge{
  position:absolute;
  top:-12px;left:50%;transform:translateX(-50%);
  padding:6px 14px;
  font:600 11px/1 var(--ff-mono);
  letter-spacing:.08em;text-transform:uppercase;
  color:#fff;
  background:linear-gradient(90deg, #00D9FF 0%, #7C3AED 100%);
  border-radius:999px;
  box-shadow:0 8px 24px -8px rgba(124,58,237,.55);
  white-space:nowrap;
}

.plan-head{ margin-bottom:24px; }
.plan-name{
  font:700 24px/1.2 var(--ff-display);
  letter-spacing:-0.012em;
  margin:0 0 8px;
  color:var(--c-text);
}
.plan-tagline{
  font:400 14px/1.45 var(--ff-body);
  color:var(--c-text-muted);
  margin:0;
}

.plan-price{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;
  margin-bottom:28px;
  padding-bottom:24px;
  border-bottom:1px solid rgba(120,140,200,.12);
}
.price-amount{
  font:700 clamp(40px, 5vw, 56px)/1 var(--ff-display);
  letter-spacing:-0.025em;
  background:linear-gradient(135deg, #00D9FF 0%, #7C3AED 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
.price-quote{
  font:600 clamp(28px, 3.4vw, 36px)/1 var(--ff-display);
}
.price-unit{
  font:500 14px/1.4 var(--ff-body);
  color:var(--c-text-muted);
}

.plan-features{
  list-style:none;padding:0;margin:0 0 28px;
  display:flex;flex-direction:column;gap:12px;
  flex:1;
}
.plan-features li{
  display:flex;align-items:flex-start;gap:10px;
  font:400 14px/1.5 var(--ff-body);
  color:var(--c-text-body);
}
.plan-features .check{
  flex:0 0 18px;width:18px;height:18px;
  margin-top:2px;
  color:#00FFA3;
}
.card-plan--pme .plan-features .check,
.card-plan--featured .plan-features .check{ color:#7C3AED; }
.card-plan--ent .plan-features .check{ color:#FFB454; }

.btn-block{ width:100%;justify-content:center; }

/* ---------- Comparatif tabulé ---------- */
.compare-wrap{
  overflow-x:auto;
  background:linear-gradient(180deg, rgba(15,22,49,.6) 0%, rgba(10,14,39,.5) 100%);
  border:1px solid rgba(120,140,200,.16);
  border-radius:var(--r-xl);
  padding:8px;
}
.compare-table{
  width:100%;
  border-collapse:separate;border-spacing:0;
  min-width:680px;
}
.compare-table thead th{
  text-align:left;
  padding:16px 18px;
  font:600 13px/1.3 var(--ff-body);
  letter-spacing:.02em;
  color:var(--c-text-muted);
  border-bottom:1px solid rgba(120,140,200,.18);
}
.compare-table thead th:first-child{ color:var(--c-text-faint); }
.compare-table thead .th-featured{
  color:#a78bfa;
  background:linear-gradient(180deg, rgba(124,58,237,.12) 0%, rgba(124,58,237,.05) 100%);
  border-top-left-radius:8px;border-top-right-radius:8px;
}
.compare-table tbody th[scope="row"]{
  text-align:left;
  padding:14px 18px;
  font:500 14px/1.4 var(--ff-body);
  color:var(--c-text);
  border-bottom:1px solid rgba(120,140,200,.08);
  background:rgba(255,255,255,.012);
}
.compare-table tbody td{
  padding:14px 18px;
  font:400 14px/1.4 var(--ff-body);
  color:var(--c-text-body);
  border-bottom:1px solid rgba(120,140,200,.08);
  vertical-align:top;
}
.compare-table tbody .td-featured{
  background:rgba(124,58,237,.06);
  color:var(--c-text);
}
.compare-table tbody .td-dash{ color:var(--c-text-faint); }
.compare-table tbody .td-check{
  color:#00FFA3;
  font-weight:600;
}
.compare-table tbody .td-check.td-featured{
  color:#a78bfa;
}
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td{ border-bottom:none; }

/* ---------- FAQ ---------- */
.faq-grid{
  /* faqalign 2026-05-26 — align-items:start so a closed sibling on the
     same row does not stretch when its neighbour <details> opens. */
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  align-items:start;
  gap:16px;
}
.faq-item{
  padding:20px 24px;
  background:rgba(15,22,49,.5);
  border:1px solid rgba(120,140,200,.14);
  border-radius:var(--r-lg);
  transition:border-color .2s ease, background .2s ease;
}
.faq-item:hover{ border-color:rgba(0,217,255,.28); }
.faq-item[open]{
  border-color:rgba(0,217,255,.32);
  background:rgba(15,22,49,.72);
}
.faq-item summary{
  cursor:pointer;
  font:600 16px/1.4 var(--ff-body);
  letter-spacing:-0.005em;
  color:var(--c-text);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  list-style:none;
  position:relative;
  padding-right:24px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"";
  position:absolute;right:0;top:50%;transform:translateY(-50%) rotate(0deg);
  width:14px;height:14px;
  background:no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300D9FF' stroke-width='2.5'><polyline points='6 9 12 15 18 9'/></svg>");
  transition:transform .25s ease;
}
.faq-item[open] summary::after{ transform:translateY(-50%) rotate(180deg); }
.faq-item p{
  margin:14px 0 0;
  font:400 14px/1.6 var(--ff-body);
  color:var(--c-text-body);
}

/* ---------- Trust band ---------- */
.grid-4{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:18px;
}
.trust-grid{ margin-top:8px; }
.card-trust{
  padding:24px 22px;
  background:rgba(15,22,49,.55);
  border:1px solid rgba(120,140,200,.14);
  border-radius:var(--r-lg);
  display:flex;flex-direction:column;gap:12px;
  transition:transform .2s ease, border-color .2s ease;
}
.card-trust:hover{
  transform:translateY(-3px);
  border-color:rgba(0,217,255,.28);
}
.trust-icon{
  width:42px;height:42px;
  display:flex;align-items:center;justify-content:center;
  border-radius:10px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(120,140,200,.14);
}
.trust-icon svg{ width:22px;height:22px; }
.trust-icon--cyan{   color:#00D9FF; border-color:rgba(0,217,255,.35);   background:rgba(0,217,255,.06); }
.trust-icon--violet{ color:#a78bfa; border-color:rgba(124,58,237,.35); background:rgba(124,58,237,.08); }
.trust-icon--green{  color:#00FFA3; border-color:rgba(0,255,163,.30);  background:rgba(0,255,163,.06); }
.trust-icon--amber{  color:#FFB454; border-color:rgba(255,180,84,.32); background:rgba(255,180,84,.07); }
.card-trust h3{
  font:600 16px/1.3 var(--ff-display);
  letter-spacing:-0.005em;
  color:var(--c-text);
  margin:0;
}
.card-trust p{
  font:400 13px/1.55 var(--ff-body);
  color:var(--c-text-body);
  margin:0;
}

/* ---------- Pricing CTA card (réutilise .cta-final / .cta-card / .cta-lead) ---------- */
.cta-card{
  text-align:center;
  max-width:760px;
  margin:0 auto;
  position:relative;
}
.cta-lead{
  font:400 16px/1.55 var(--ff-body);
  color:var(--c-text-body);
  margin:0 0 28px;
  position:relative;
}

/* ---------- Responsive pricing ---------- */
@media (max-width: 1080px){
  .plans-grid{ grid-template-columns:1fr;gap:20px;max-width:520px;margin:0 auto; }
  .card-plan--featured{ order:-1; }
  .grid-4{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .faq-grid{ grid-template-columns:1fr; }
}
@media (max-width: 560px){
  .grid-4{ grid-template-columns:1fr; }
  .compare-table{ font-size:13px; }
  .compare-table thead th,
  .compare-table tbody th,
  .compare-table tbody td{ padding:12px 14px; }
  .card-plan{ padding:28px 22px; }
  .plan-name{ font-size:22px; }
}

/* ==========================================================
   CONTACT PAGE — sections, form, sidebar, FAQ
   Réutilise .pill / .card / .btn / .faq-item / .cta-card
   ========================================================== */

/* ---------- Hero contact (variantes light) ---------- */
.section-contact-hero{ padding-top:72px;padding-bottom:48px; }

/* ---------- Layout principal form + sidebar ---------- */
.section-contact-main{ padding-top:32px;padding-bottom:72px; }
.contact-layout{
  display:grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap:36px;
  align-items:start;
}

/* ---------- Carte formulaire ---------- */
/* contactformrefine 2026-05-26 — calmer form chrome, more whitespace,
   muted required mark, softer focus state. */
.card-form{
  padding:40px 38px;
  position:relative;
}
.card-form .section-head{
  margin:0 0 10px;
  font-size:24px;
  font-weight:600;
  letter-spacing:-0.01em;
}
.form-subtitle{
  margin:0 0 32px;
  color:var(--c-text-muted);
  font-size:14px;
  line-height:1.55;
}

/* ---------- Honeypot anti-spam ---------- */
.hp-trap{
  position:absolute;
  left:-10000px;
  width:1px;
  height:1px;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
}

/* ---------- Champs ---------- */
.field-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-bottom:22px;
}
.field{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:22px;
}
.field-row .field{ margin-bottom:0; }
.field label{
  font:500 13.5px/1.4 var(--ff-body);
  color:var(--c-text);
  display:flex;
  align-items:baseline;
  gap:5px;
}
.field .req{
  color:var(--c-text-muted);
  font-weight:500;
  font-size:13px;
}
.field-optional{
  font:400 12px/1 var(--ff-body);
  color:var(--c-text-muted);
  letter-spacing:0;
  opacity:.85;
}
.field input,
.field select,
.field textarea{
  width:100%;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(120,140,200,.16);
  border-radius:10px;
  padding:13px 15px;
  font:400 14.5px/1.5 var(--ff-body);
  color:var(--c-text);
  transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;
  font-family:inherit;
}
.field textarea{
  resize:vertical;
  min-height:140px;
}
.field select{
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2378879b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:38px;
}
.field input::placeholder,
.field textarea::placeholder{
  color:#52617c;
  opacity:1;
}
.field input:hover,
.field select:hover,
.field textarea:hover{
  border-color:rgba(120,140,200,.28);
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:rgba(0,217,255,.40);
  background:rgba(255,255,255,.035);
  box-shadow:0 0 0 3px rgba(0,217,255,.08);
}
.field.error input,
.field.error select,
.field.error textarea{
  border-color:rgba(255,90,90,.6);
  background:rgba(255,90,90,.05);
}

/* ---------- Consent checkbox ---------- */
.field-consent{
  margin-top:6px;
  margin-bottom:22px;
}
.consent-label{
  display:flex;
  align-items:flex-start;
  gap:10px;
  cursor:pointer;
}
.consent-label input[type="checkbox"]{
  flex-shrink:0;
  width:16px;
  height:16px;
  margin-top:3px;
  accent-color:#00D9FF;
  cursor:pointer;
}
.consent-text{
  font:400 13px/1.55 var(--ff-body);
  color:var(--c-text-body);
}
.link-inline{
  color:#00D9FF;
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-thickness:1px;
}
.link-inline:hover{ color:#7df1ff; }

/* ---------- Actions + statut ---------- */
.form-actions{
  margin-top:8px;
}
.form-actions .btn-large{
  width:100%;
}
.form-status{
  margin-top:18px;
  padding:12px 14px;
  border-radius:10px;
  font:500 13px/1.45 var(--ff-body);
  border:1px solid transparent;
}
.form-status-pending{
  background:rgba(0,217,255,.08);
  border-color:rgba(0,217,255,.28);
  color:#9eeaff;
}
.form-status-ok{
  background:rgba(0,255,163,.07);
  border-color:rgba(0,255,163,.32);
  color:#7dffce;
}
.form-status-error{
  background:rgba(255,90,90,.06);
  border-color:rgba(255,90,90,.36);
  color:#ff9a9a;
}

/* ---------- Sidebar ---------- */
.contact-aside{
  position:sticky;
  top:96px;
}
.aside-title{
  font:600 22px/1.25 var(--ff-display);
  letter-spacing:-0.015em;
  color:var(--c-text);
  margin:8px 0 8px;
}
.aside-lead{
  font:400 14px/1.55 var(--ff-body);
  color:var(--c-text-body);
  margin:0 0 20px;
}
.aside-cards{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.card-aside{
  display:grid;
  grid-template-columns:40px 1fr;
  gap:14px;
  align-items:start;
  padding:18px 18px;
}
.aside-icon{
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(120,140,200,.14);
}
.aside-icon--cyan{   color:#00D9FF; border-color:rgba(0,217,255,.35);   background:rgba(0,217,255,.06); }
.aside-icon--violet{ color:#a78bfa; border-color:rgba(124,58,237,.35); background:rgba(124,58,237,.08); }
.aside-icon--green{  color:#00FFA3; border-color:rgba(0,255,163,.30);  background:rgba(0,255,163,.06); }
.aside-body{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}
.aside-h{
  font:500 12px/1.2 var(--ff-body);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--c-text-muted);
  margin:0;
}
.aside-value{
  font:600 15px/1.3 var(--ff-display);
  color:var(--c-text);
  margin:0;
  word-break:break-word;
}
.aside-desc{
  font:400 13px/1.5 var(--ff-body);
  color:var(--c-text-body);
  margin:2px 0 0;
}

/* ---------- FAQ contact (réutilise .faq-item) ---------- */
.section-contact-faq{ padding-top:32px;padding-bottom:64px; }
.section-contact-faq .section-head-wrap{
  text-align:center;
  margin-bottom:32px;
}

/* ---------- Responsive contact ---------- */
/* Aligné sur 1080px (cf. hero/plans/security) — supprime la zone morte 980-1080px (bpalign 2026-07-01) */
@media (max-width: 1080px){
  .contact-layout{
    grid-template-columns:1fr;
    gap:28px;
  }
  .contact-aside{
    position:static;
    top:auto;
  }
}
@media (max-width: 640px){
  .field-row{
    grid-template-columns:1fr;
    gap:0;
    margin-bottom:0;
  }
  .field-row .field{ margin-bottom:18px; }
  .card-form{ padding:28px 22px; }
  /* 16px mini pour éviter l'auto-zoom iOS au focus (antizoom 2026-07-01) */
  .field input,
  .field select,
  .field textarea{ font-size:16px; }
}

/* ==========================================================
   SECURITY PAGE (security.html)
   Hero 3 pills + 6 pillars grid + 4 docs grid + CTA final
   ========================================================== */

/* ---------- SECURITY HERO ---------- */
.section-security-hero{
  padding-top:72px;
  padding-bottom:48px;
}

/* ---------- SECURITY PILLARS GRID ---------- */
.section-security-pillars{ padding-top:32px;padding-bottom:48px; }
.pillars-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}
.card-pillar{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:28px 24px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(120,140,200,.14);
  border-radius:14px;
  transition:transform .2s ease, border-color .2s ease, background .2s ease;
}
.card-pillar:hover{
  transform:translateY(-2px);
  border-color:rgba(0,217,255,.30);
  background:rgba(255,255,255,.035);
}
.pillar-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:10px;
  border:1px solid currentColor;
  flex-shrink:0;
}
.pillar-icon--cyan{   color:#00D9FF; border-color:rgba(0,217,255,.35); background:rgba(0,217,255,.06); }
.pillar-icon--violet{ color:#a78bfa; border-color:rgba(124,58,237,.35); background:rgba(124,58,237,.08); }
.pillar-icon--green{  color:#00FFA3; border-color:rgba(0,255,163,.30); background:rgba(0,255,163,.06); }
.pillar-icon--amber{  color:#FFB454; border-color:rgba(255,180,84,.30); background:rgba(255,180,84,.06); }
.pillar-title{
  font:600 18px/1.3 var(--ff-display);
  color:var(--c-text);
  margin:0;
  letter-spacing:-0.005em;
}
.pillar-desc{
  font:400 14px/1.55 var(--ff-body);
  color:var(--c-text-body);
  margin:0;
}
.pillar-desc a{
  color:#00D9FF;
  text-decoration:underline;
  text-decoration-color:rgba(0,217,255,.45);
  text-underline-offset:2px;
  transition:text-decoration-color .15s ease;
}
.pillar-desc a:hover{ text-decoration-color:#00D9FF; }

/* ---------- SECURITY DOCS GRID ---------- */
.section-security-docs{ padding-top:48px;padding-bottom:48px; }
.section-security-docs .section-head-wrap{
  text-align:center;
  margin-bottom:36px;
}
.docs-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:20px;
}
.card-doc{
  /* carddocfix 2026-05-26 — flex row + wrap so 3 sibling children
     (title/desc/link) stack on right of icon instead of overlapping. */
  display:flex;
  flex-wrap:wrap;
  gap:6px 18px;
  align-items:flex-start;
  padding:24px 24px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(120,140,200,.14);
  border-radius:14px;
  text-decoration:none;
  color:inherit;
  transition:transform .2s ease, border-color .2s ease, background .2s ease;
}
.card-doc > .doc-icon{ flex:0 0 48px; }
.card-doc > .doc-title,
.card-doc > .doc-desc,
.card-doc > .doc-link{
  flex:1 1 calc(100% - 48px - 18px);
  max-width:calc(100% - 48px - 18px);
  margin-left:auto;
}
.card-doc:hover{
  transform:translateY(-2px);
  border-color:rgba(0,217,255,.30);
  background:rgba(255,255,255,.035);
}
.doc-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border-radius:10px;
  color:#00D9FF;
  border:1px solid rgba(0,217,255,.30);
  background:rgba(0,217,255,.06);
}
.doc-body{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}
.doc-title{
  font:600 17px/1.3 var(--ff-display);
  color:var(--c-text);
  margin:0;
  letter-spacing:-0.005em;
}
.doc-desc{
  font:400 13.5px/1.55 var(--ff-body);
  color:var(--c-text-body);
  margin:0;
}
.doc-link{
  font:600 13px/1.2 var(--ff-body);
  color:#00D9FF;
  margin-top:4px;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.doc-link::after{
  content:"→";
  transition:transform .15s ease;
}
.card-doc:hover .doc-link::after{ transform:translateX(3px); }

/* ---------- Responsive security ---------- */
@media (max-width: 980px){
  .pillars-grid{ grid-template-columns:repeat(2, 1fr); }
  .docs-grid{ grid-template-columns:1fr; }
}
@media (max-width: 640px){
  .pillars-grid{ grid-template-columns:1fr; }
  .card-pillar{ padding:24px 20px; }
  .card-doc{ padding:22px 20px; }
}

/* ==========================================================
   LEGAL PAGES (privacy.html / /legal/*)
   Hero court + corps texte legal + CTA final
   ========================================================== */
.section-privacy-hero{ padding-top:72px;padding-bottom:40px; }
.section-legal-body{ padding-top:24px;padding-bottom:64px; }
.legal-content{
  max-width:760px;
  margin:0 auto;
  padding:36px 36px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(120,140,200,.14);
  border-radius:16px;
}
.legal-content .legal-updated{
  font:500 13px/1.4 var(--ff-body);
  color:var(--c-text-muted);
  margin:0 0 24px;
  padding:8px 14px;
  display:inline-block;
  border-radius:999px;
  background:rgba(0,217,255,.06);
  border:1px solid rgba(0,217,255,.20);
  color:#7be2ff;
}
.legal-content h2{
  font:600 19px/1.3 var(--ff-display);
  color:var(--c-text);
  margin:28px 0 12px;
  letter-spacing:-0.005em;
}
.legal-content h2:first-of-type{ margin-top:8px; }
.legal-content p{
  font:400 15px/1.65 var(--ff-body);
  color:var(--c-text-body);
  margin:0 0 14px;
}
.legal-content p strong{ color:var(--c-text); font-weight:600; }
.legal-content ul{
  margin:0 0 16px;
  padding:0 0 0 22px;
  list-style:none;
}
.legal-content ul li{
  position:relative;
  font:400 15px/1.6 var(--ff-body);
  color:var(--c-text-body);
  margin:0 0 8px;
  padding-left:6px;
}
.legal-content ul li::before{
  content:"";
  position:absolute;
  left:-14px;top:10px;
  width:6px;height:6px;
  border-radius:50%;
  background:#00D9FF;
  box-shadow:0 0 8px rgba(0,217,255,.55);
}
.legal-content a:not(.link-inline){
  color:#00D9FF;
  text-decoration:underline;
  text-decoration-color:rgba(0,217,255,.45);
  text-underline-offset:2px;
}
@media (max-width: 640px){
  .legal-content{ padding:28px 22px; }
  .legal-content h2{ font-size:17px; }
}

/* ==========================================================
   404 PAGE
   ========================================================== */
.section-404{
  padding:calc(var(--header-h) + 80px) 0 96px;
  text-align:center;
}
.error-block{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}
.error-glyph{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:0 0 12px;
  user-select:none;
  filter:drop-shadow(0 12px 40px rgba(0,217,255,.18));
}
.error-digit{
  font:800 clamp(86px, 14vw, 168px)/1 var(--ff-display);
  letter-spacing:-0.04em;
  background:linear-gradient(180deg, #00D9FF 0%, #7C3AED 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 0 0 transparent;
}
.error-digit--0{
  background:linear-gradient(180deg, #7C3AED 0%, #00FFA3 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.error-title{
  font-size:clamp(28px, 4vw, 42px);
  margin:8px 0 8px;
}
.error-lead{
  max-width:560px;
  margin:0 auto 24px;
}
.error-ctas{
  justify-content:center;
  margin-bottom:0;
}
@media (max-width: 640px){
  .section-404{ padding:calc(var(--header-h) + 56px) 0 64px; }
}

/* ==========================================================
   LEGAL FOLDER PAGES (legal/*.html)
   Breadcrumb + h1 + meta + intro + TOC sidebar + sections + footnote
   ========================================================== */
.legal-page main.legal-container{
  max-width:1200px;
  padding:calc(var(--header-h) + 48px) 24px 80px;
}
.legal-header{
  max-width:840px;
  margin:0 0 36px;
}
.legal-breadcrumb{
  font:500 13px/1.5 var(--ff-body);
  color:var(--c-text-muted);
  margin:0 0 14px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.legal-breadcrumb a{
  color:var(--c-text-body);
  text-decoration:none;
  transition:color .15s ease;
}
.legal-breadcrumb a:hover{ color:#00D9FF; }
.legal-breadcrumb span[aria-hidden]{ color:var(--c-text-muted); opacity:.55; }
.legal-page h1{
  font:700 clamp(32px, 4.4vw, 48px)/1.1 var(--ff-display);
  letter-spacing:-0.018em;
  color:var(--c-text);
  margin:0 0 14px;
}
.legal-meta{
  font:500 13px/1.5 var(--ff-body);
  color:var(--c-text-muted);
  margin:0 0 16px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}
.legal-meta time{
  color:#7be2ff;
  font-weight:600;
}
.legal-intro{
  font:400 clamp(16px, 1.3vw, 18px)/1.6 var(--ff-body);
  color:var(--c-text-body);
  margin:0;
  max-width:720px;
}

/* ---------- LAYOUT TOC + CONTENT ---------- */
.legal-layout{
  display:grid;
  grid-template-columns:240px 1fr;
  gap:48px;
  align-items:start;
}
.legal-toc{
  position:sticky;
  top:96px;
  padding:24px 22px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(120,140,200,.14);
  border-radius:14px;
  max-height:calc(100vh - 120px);
  overflow-y:auto;
}
.legal-toc h2{
  font:500 12px/1.2 var(--ff-body);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--c-text-muted);
  margin:0 0 14px;
}
.legal-toc ol{
  list-style:none;
  margin:0;padding:0;
  counter-reset:tocitem;
}
.legal-toc ol li{
  counter-increment:tocitem;
  margin:0 0 6px;
}
.legal-toc ol li a{
  display:block;
  font:500 13.5px/1.4 var(--ff-body);
  color:var(--c-text-body);
  text-decoration:none;
  padding:7px 10px;
  border-radius:6px;
  border-left:2px solid transparent;
  transition:color .15s ease, background .15s ease, border-color .15s ease;
}
.legal-toc ol li a:hover{
  color:#00D9FF;
  background:rgba(0,217,255,.05);
  border-left-color:#00D9FF;
}
.legal-toc ol li a:focus-visible{
  outline:2px solid #00D9FF;
  outline-offset:2px;
}

/* ---------- CONTENT BLOCKS ---------- */
.legal-content-v2{
  max-width:none;
  padding:0;
  background:transparent;
  border:0;
}
.legal-content-v2 .legal-section{
  margin:0 0 36px;
  padding:28px 30px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(120,140,200,.14);
  border-radius:14px;
  scroll-margin-top:96px;
}
.legal-content-v2 .legal-section h2{
  font:600 20px/1.3 var(--ff-display);
  letter-spacing:-0.005em;
  color:var(--c-text);
  margin:0 0 14px;
}
.legal-content-v2 .legal-section p,
.legal-content-v2 .legal-section li{
  font:400 14.5px/1.65 var(--ff-body);
  color:var(--c-text-body);
}
.legal-content-v2 .legal-section p{ margin:0 0 12px; }
.legal-content-v2 .legal-section ul,
.legal-content-v2 .legal-section ol{
  margin:0 0 14px;
  padding:0 0 0 22px;
}
.legal-content-v2 .legal-section ul{ list-style:none; }
.legal-content-v2 .legal-section ul li{
  position:relative;
  margin:0 0 8px;
  padding-left:6px;
}
.legal-content-v2 .legal-section ul li::before{
  content:"";
  position:absolute;
  left:-14px;top:10px;
  width:6px;height:6px;
  border-radius:50%;
  background:#00D9FF;
  box-shadow:0 0 6px rgba(0,217,255,.5);
}
.legal-content-v2 .legal-section ol li{ margin:0 0 8px; }
.legal-content-v2 .legal-section strong{ color:var(--c-text); font-weight:600; }
.legal-content-v2 .legal-section a{
  color:#00D9FF;
  text-decoration:underline;
  text-decoration-color:rgba(0,217,255,.45);
  text-underline-offset:2px;
  transition:text-decoration-color .15s ease;
}
.legal-content-v2 .legal-section a:hover{ text-decoration-color:#00D9FF; }
.legal-content-v2 .legal-section table{
  width:100%;
  border-collapse:collapse;
  margin:8px 0 14px;
  font:400 13.5px/1.5 var(--ff-body);
}
.legal-content-v2 .legal-section th,
.legal-content-v2 .legal-section td{
  text-align:left;
  padding:9px 12px;
  border:1px solid rgba(120,140,200,.16);
  color:var(--c-text-body);
}
.legal-content-v2 .legal-section th{
  background:rgba(0,217,255,.07);
  color:var(--c-text);
  font-weight:600;
}
.legal-footnote{
  font:400 12.5px/1.55 var(--ff-body);
  color:var(--c-text-muted);
  text-align:center;
  margin:24px 0 0;
  padding:18px 20px;
  border-top:1px dashed rgba(120,140,200,.18);
}

/* ---------- Responsive legal ---------- */
@media (max-width: 980px){
  .legal-layout{
    grid-template-columns:1fr;
    gap:24px;
  }
  .legal-toc{
    position:static;
    max-height:none;
    top:auto;
  }
}
@media (max-width: 640px){
  .legal-page main.legal-container{ padding:calc(var(--header-h) + 32px) 18px 56px; }
  .legal-content-v2 .legal-section{ padding:22px 20px; }
}

/* ============================================================
 * CSP-strict: inline-style elimination (security headers v2)
 * ============================================================ */
.float-delay-3{ animation-delay:-3s; }
.bar-w-14{ width:14%; }
.bar-w-38{ width:38%; }
.bar-w-62{ width:62%; }

/* contactform2 2026-05-26 — neutraliser uppercase legacy components.css
   sur .field label + alléger consent + calmer btn submit form. */
.field label{
  text-transform:none;
  letter-spacing:0;
}
.field-consent{
  margin-top:14px;
  padding:14px 16px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(120,140,200,.10);
  border-radius:10px;
}
.consent-text{
  font:400 12.5px/1.6 var(--ff-body);
  color:var(--c-text-muted);
}
.form-actions{ margin-top:14px; }
.form-actions .btn-large{
  width:100%;
  padding:14px 22px;
  font-size:14.5px;
  letter-spacing:-0.005em;
}

/* ctafinalfix 2026-05-26 — refonte .section-cta-final: carte visuelle,
   padding section, btn padding forcé même sans -lg, btn-ghost visible. */
.section-cta-final{
  padding:clamp(72px,8vw,120px) 0 clamp(80px,9vw,140px);
}
.section-cta-final .cta-card{
  padding:56px 44px;
  background:radial-gradient(120% 100% at 50% 0%,
    rgba(0,229,255,.10) 0%,
    rgba(139,92,246,.06) 40%,
    transparent 75%);
  border:1px solid rgba(0,229,255,.18);
  border-radius:var(--r-xl);
  position:relative;
  overflow:hidden;
}
.section-cta-final .cta-title{
  font:700 clamp(26px,3.2vw,38px)/1.15 var(--ff-display);
  letter-spacing:-0.02em;
  color:var(--c-text);
  margin:0 0 14px;
  text-align:center;
}
.section-cta-final .cta-lead{
  text-align:center;
  margin:0 auto 28px;
  max-width:560px;
}
.section-cta-final .cta-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  justify-content:center;
}
.section-cta-final .cta-note{
  margin:22px auto 0;
  text-align:center;
  font:500 12px/1.4 var(--ff-mono);
  letter-spacing:.06em;
  color:var(--c-text-faint);
}
.section-cta-final .cta-actions .btn{
  padding:14px 22px;
  font-size:14.5px;
}
.section-cta-final .cta-actions .btn-ghost{
  border:1px solid rgba(199,208,224,.16);
  background:rgba(15,22,38,.45);
  color:var(--c-text);
}
.section-cta-final .cta-actions .btn-ghost:hover{
  background:rgba(15,22,38,.78);
  border-color:rgba(0,229,255,.32);
  color:var(--c-cyan);
  transform:translateY(-1px);
}
@media (max-width: 640px){
  .section-cta-final .cta-card{ padding:40px 24px; }
  .section-cta-final .cta-actions .btn{ width:100%; }
}

/* selectoptfix 2026-05-26 — options dropdown lisibles (fond OS blanc => fond
   foncé explicite + texte clair + accent cyan sur :checked/:hover). */
.field select option,
select option{
  background-color:#0e1729;
  color:#f5f7fb;
  padding:8px 12px;
}
.field select option:checked,
.field select option:hover,
select option:checked,
select option:hover{
  background-color:#00d9ff;
  color:#03101a;
}
.field select option:disabled,
select option:disabled{
  color:rgba(199,208,224,.35);
  background-color:#0a0e1a;
}

/* enginecolfix 2026-05-26 — espacement titre .engine-col-title pour ne pas
   coller au bloc précédent (phases). */
.engine-col-title{
  margin:48px 0 24px;
}
.engine-col:first-child .engine-col-title{
  margin-top:0;
}
@media (max-width: 880px){
  .engine-col-title{ margin-top:40px; }
}

/* ============================================================
 * Lot 3 (perf3) — allègement GPU sur tactile / faibles machines.
 * Cible : (hover:none) OU (pointer:coarse) = mobiles/tablettes tactiles.
 * Le desktop pointeur-fin garde le rendu premium intact.
 *   - retrait des backdrop-filter:blur (re-sampling GPU par frame de scroll)
 *   - fonds opacifiés (--g-glass laisse passer l'aurora sous .62 sans blur)
 *   - aurora animée figée (mesh-drift infini = GPU au repos)
 *   - drop-shadows lourds allégés
 * ============================================================ */
@media (hover:none),(pointer:coarse){
  .float-card,.hero-strip,.how-step,.sec-item{
    backdrop-filter:none;-webkit-backdrop-filter:none;
    background:linear-gradient(180deg,rgba(14,21,36,0.94),rgba(11,17,32,0.90));
  }
  .orbit-node::after{backdrop-filter:none;-webkit-backdrop-filter:none;}
  .bg-stack .aurora{animation:none !important;}
  .shield{filter:drop-shadow(0 0 12px rgba(0,229,255,.28));}
}