/* ==========================================================================
   NanoClip — style-light.css (base LIGHT)
   But: même UI/HTML, rendu clair propre (pas un patch du dark).
   - Tokens LIGHT
   - mêmes composants que style-dark.css, adaptés
   ========================================================================== */

/* -----------------------------
   0) TOKENS (LIGHT only)
------------------------------ */
:root{
  --ink:#f5f7fb;          /* fond page */
  --ink-2:#ffffff;        /* fond footer / panneaux clairs */
  --panel:#ffffff;        /* cartes */

  --text:#0b0f17;         /* texte principal */
  --muted:#475569;        /* texte secondaire */

  --brand:#00c2ff;
  --brand-2:#ffcb6b;
  --grad: linear-gradient(90deg, rgba(0, 194, 255, 1), rgba(0, 126, 255, 1)) !important;

  --radius:16px;
  --radius-sm:12px;

  --ring:0 0 0 3px rgba(0,194,255,.22);

  --shadow-lg: 0 20px 60px rgba(15,23,42,.12);
  --shadow-md: 0 10px 30px rgba(15,23,42,.10);

  --border: rgba(15,23,42,.10);
  --border-soft: rgba(15,23,42,.08);

  /* demo / bridge */
  --nc-cyan: 16,184,255;
  --nc-gold: 255,203,107;
  --_typography---font--script: "Gloria Hallelujah", Arial, sans-serif;
}
h1 {
    margin: 10px 0 10px;
    font-weight: 950;
    letter-spacing: -0.03em;
    line-height: 1.02;
    font-size: clamp(38px, 4.3vw, 66px);
}
h2 {
    margin: .65rem 0 .35rem;
    font-weight: 950;
    letter-spacing: -.03em;
    line-height: 1.05;
    font-size: clamp(28px, 3.2vw, 44px);
    color: rgba(11, 16, 32, .95);
}
.gloria {
  font-family: var(--_typography---font--script);
}

/* -----------------------------
   1) BASE / RESET
------------------------------ */
html, body{ height:100%; }
*{ outline:0; }
body{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--ink);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a{ color: inherit; text-decoration:none; }
a:hover{ opacity:.92; }

:focus-visible{
  box-shadow: var(--ring);
  transition: box-shadow .15s ease;
}

::selection{ background: rgba(0,194,255,.22); color:#0b0f17; }

/* Scrollbar (WebKit) */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background: rgba(15,23,42,.18); border-radius: 999px; }

/* Helpers */
.fw-800{ font-weight:800; }
.fw-600{ font-weight:600; }
.text-muted{ color: var(--muted) !important; }
.muted-balance, .hero-subtle, .hero-note{ color: var(--muted) !important; }

section{ position:relative; z-index:1; }
.border-gradient{ border-top:1px solid var(--border-soft); }

/* Particules fond (si tu les gardes en light: très discret) */
.sf-particles{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events:none;
  opacity:.12;
  filter: saturate(.9);
}

.tabx.is-active {
    border-color: rgba(0, 194, 255, .22);
    background: radial-gradient(120% 140% at 18% 22%, rgba(0, 194, 255, .12), transparent 62%), radial-gradient(120% 140% at 82% 78%, rgba(255, 203, 107, .10), transparent 60%), rgba(255, 255, 255, .84);
}


/* -----------------------------
   2) NAVBAR
------------------------------ */
.navbar{
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: linear-gradient(to bottom, rgba(255,255,255,.78), rgba(255,255,255,0));
}
.navbar .nav-link{ color: rgba(15,23,42,.70); }
.navbar .nav-link:hover{ color: #0b0f17; }

element.style {
}
.nc-navbar .nav-link {color: rgb(0 0 0 / 80%);font-weight: 600;}

.sf-logo{ font-weight:800; letter-spacing:.2px; }
.grad{ background: var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
 span.nc-count-num.grad {background: linear-gradient(90deg, rgba(0, 194, 255, 1), rgba(0, 194, 255, 1));}


/* -----------------------------
   3) BUTTONS
------------------------------ */
.grad-btn{
  background-image: var(--grad);
  border:none;
  color:#07131c;
}
.grad-btn:hover{ filter: brightness(1.03); }

.btn-outline-light{
  border-color: rgba(15,23,42,.18) !important;
  color: #0b0f17;
}
.btn-outline-light:hover{ background: rgba(15,23,42,.06); }

.btn-contrast{
  color: var(--text);
  background: transparent;
  border: 1px solid rgba(15,23,42,.18);
}
.btn-contrast:hover{ background: rgba(15,23,42,.06); }

.btn-ghost{
  color:#0b0f17;
  background: transparent;
  border: 1px solid rgba(15,23,42,.18);
}
.btn-ghost:hover{ background: rgba(15,23,42,.06); }

/* hover stable */
.btn-check+.btn:hover{
  border: 1px solid rgba(15,23,42,.20);
  background: rgba(15,23,42,.06);
  color:#0b0f17;
  font-weight:600;
}


/* -----------------------------
   4) HERO
------------------------------ */
.hero{
  position:relative;
  min-height:92vh;
  display:grid;
  place-items:center;
  text-align:center;
  padding-top: 96px;
  z-index:1;
}
.hero-page{
  position:relative;
  min-height:92vh;
  display:grid;
  place-items:center;
  text-align:left;
  padding-top: 96px;
  z-index:1;
}

/* Glow clair (moins “baveux”, plus premium) */
.hero-glow,
.hero-page-glow{
  position:absolute;
  inset:-18% -10% auto -10%;
  height:70%;
  background:
    radial-gradient(60% 55% at 50% 45%, rgba(0,194,255,.22), rgba(255,203,107,.16) 45%, rgba(245,247,251,0) 72%);
  filter: blur(46px);
  animation: heroPulse 6s ease-in-out infinite alternate;
  pointer-events:none;
  z-index:0;
}
@keyframes heroPulse{
  from{ transform: translateY(-10px) scale(1); opacity:.92; }
  to{ transform: translateY(10px) scale(1.04); opacity:1; }
}

.hero-pill{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.45rem .8rem;
  border-radius:999px;
  border:1px solid rgba(0,194,255,.38);
  color:#046e8f;
  background: rgba(0,194,255,.12);
  font-weight:650;
  font-size:.92rem;
}

.hero-title{
  font-size: clamp(2rem, 5.2vw, 3.8rem);
  line-height:1.05;
  margin: 1rem auto .75rem;
  color:#0b0f17;
}

.hero-cta{
  background: linear-gradient(90deg, #00c2ff, #33d8ff);
  border: 1px solid rgba(0,194,255,.65);
  color:#07131c;
  font-weight:650;
  box-shadow: 0 0 0 1px rgba(0,194,255,.18), 0 12px 30px rgba(0,194,255,.18);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease, background .25s ease, border-color .25s ease;
}
.hero-cta:hover{
  background: linear-gradient(90deg, #00c2ff, #ffcb6b);
  border-color: rgba(255,203,107,.55);
  transform: translateY(-2px);
  box-shadow:
    0 0 20px rgba(0,194,255,.20),
    0 0 36px rgba(255,203,107,.18),
    0 14px 34px rgba(15,23,42,.10);
}

.hero-stats{
  display:flex;
  gap: clamp(1rem, 6vw, 4rem);
  justify-content:center;
  align-items:flex-start;
  margin-top: clamp(1.2rem, 3vw, 2rem);
}
.hero-stats .stat{ text-align:center; }
.hero-stats .stat-value{
  font-weight:850;
  font-size: clamp(1.25rem, 3.5vw, 1.6rem);
  background: var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-stats .stat-label{ color: var(--muted); font-size:.95rem; }


/* -----------------------------
   5) CARDS / FEATURES GRID
------------------------------ */
.sf-card,
.feature-card,
.price-card,
.t-card{
  background: radial-gradient(1100px 520px at 12% 8%, rgba(0, 133, 255, .18), transparent 60%), radial-gradient(1100px 520px at 88% 10%, rgba(155, 92, 255, .16), transparent 60%), radial-gradient(1100px 520px at 55% 96%, rgba(51, 211, 154, .14), transparent 62%), linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .64)) !important;
  border:1px solid var(--border);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius);
}

.sf-card{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sf-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(0,194,255,.28);
}

.features-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1.2rem;
}
@media (max-width: 991.98px){
  .features-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 575.98px){
  .features-grid{ grid-template-columns: 1fr; }
}

.feature-card{
  position:relative;
  padding: 1.25rem 1.15rem;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  display:flex;
  flex-direction:column;
  height:100%;
}
.feature-card:hover,
.feature-card:focus-within{
  transform: translateY(-2px);
  border-color: rgba(0,194,255,.55);
  box-shadow:
    0 0 0 1px rgba(0,194,255,.18),
    0 14px 44px rgba(0,194,255,.08),
    var(--shadow-lg);
}

.feature-icon{
  width: 52px; height: 52px;
  display:grid; place-items:center;
  border-radius: 12px;
  background: rgba(0,194,255,.06);
  border: 1px solid rgba(0,194,255,.35);
  margin-bottom: .85rem;
  color: #047aa0;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.feature-icon svg{ color: currentColor; }
.feature-card:hover .feature-icon,
.feature-card:focus-within .feature-icon{
  background: var(--brand);
  border-color: var(--brand);
  color:#07131c;
  transform: translateY(-1px);
}

.feature-title{
  font-weight:750;
  margin: .15rem 0 .25rem;
  color: var(--text);
}
.feature-description{
  color: var(--muted);
  margin:0;
  line-height:1.55;
}

.uc-tags{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:auto;
  padding-top:12px;
}
.uc-tag{
  font-size:12px;
  padding:4px 10px;
  border-radius:999px;
  background: rgba(0,194,255,.08);
  border:1px solid rgba(0,194,255,.18);
  color: rgba(11,15,23,.78);
}

.feature-card::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px;
  background: linear-gradient(90deg, rgba(0,194,255,0), rgba(0,194,255,.22), rgba(255,203,107,.18), rgba(0,194,255,0));
  opacity:.35;
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  pointer-events:none;
}

.icon-wrap{
  width:44px; height:44px;
  display:grid; place-items:center;
  border-radius:10px;
  background: rgba(15,23,42,.06);
  margin-bottom: 10px;
  font-size:20px;
  color:#0b0f17;
}

.verse{
  font-style: italic;
  color: #52627a;
  font-size:.95rem;
}


/* -----------------------------
   6) DEMO — DEVICE / CONTROLS
------------------------------ */
.sf-seg .btn{
  --bs-btn-padding-y: .42rem;
  --bs-btn-padding-x: .95rem;
  border-radius:999px;
}
.sf-seg .btn + .btn{ margin-left: .25rem; }

.demo-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top: 24px;
  width:100%;
}

.sf-device{
  position:relative;
  width:100%;
  max-width: 960px;
  margin-inline:auto;

  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow:hidden;

  border:1px solid rgba(15,23,42,.14);
  background: #0b0f17; /* device reste “noir vidéo” */
  box-shadow: 0 26px 70px rgba(15,23,42,.14);

  transition: aspect-ratio .25s ease, box-shadow .2s ease, border-color .2s ease;
}
.demo-wrap.is-169 .sf-device{ aspect-ratio:16/9; max-width: 800px; }
.demo-wrap.is-1x1 .sf-device{ aspect-ratio:1/1;  max-width: 520px; }
.demo-wrap.is-11  .sf-device{ aspect-ratio:1/1;  max-width: 520px; }
.demo-wrap.is-916 .sf-device{ aspect-ratio:9/16; max-width: 450px; max-height: 620px; }

.sf-device:hover{ border-color: rgba(0,194,255,.28); }

.sf-video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  background:#000;
}

.sf-play{
  position:absolute;
  inset:0;
  margin:auto;
  width:84px;height:84px;
  border-radius:50%;
  display:grid; place-items:center;
  background: rgba(255,255,255,.16);
  color:#07131c;
  border:1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(6px);
  font-size:44px;
  transition: transform .15s ease, opacity .2s ease, background .2s ease;
  z-index: 6;
}
.sf-play:hover{ transform: scale(1.04); background: rgba(255,255,255,.22); }
.sf-play.hidden{ opacity:0; pointer-events:none; }

.sf-skel{ position:absolute; inset:0; background:#0c0c0c; z-index:5; }
.sf-skel .bar{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.14) 50%, rgba(255,255,255,0) 100%);
  animation: skel 1.15s infinite linear;
}
@keyframes skel{
  from{ transform: translateX(-100%); }
  to{ transform: translateX(100%); }
}

.sf-controls{
  position:absolute;
  left:0; right:0; bottom:0;
  display:flex;
  align-items:center;
  gap:.35rem;
  padding:.5rem .75rem;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
  z-index: 7;
}
.sf-ctl{
  display:inline-grid; place-items:center;
  width:36px;height:36px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  color:#ffffff;
  transition: background .15s ease, transform .12s ease;
}
.sf-ctl:hover{ background: rgba(255,255,255,.16); transform: translateY(-1px); }
.sf-ctl.active{ outline: 2px solid #00c2ff; }
#ctlSeek{ height:6px; accent-color:#00c2ff; }

.sf-thumbs{ display:grid; gap:.8rem; }
.sf-thumb{
  position:relative;
  display:block;
  width:100%;
  text-align:left;
  border-radius:14px;
  overflow:hidden;

  background: var(--panel);
  border:1px solid var(--border);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
  box-shadow: var(--shadow-md);
}
.sf-thumb:hover{
  transform: translateY(-1px);
  border-color: rgba(0,194,255,.30);
  box-shadow: var(--shadow-lg);
}
.sf-thumb img{ display:block; width:100%; height:150px; object-fit:cover; }
.sf-thumb .badge{ position:absolute; top:8px; left:8px; }
.sf-thumb.active{ outline: 2px solid #00c2ff; }

/* Logo overlays */
.feature-card .nc-logo-mark{
  position:absolute;
  top:10px;
  right:10px;
  z-index: 8;
  width: 42px;
  height: 42px;
  object-fit:contain;
  opacity:.92;
  pointer-events:none;
}
.sf-device .nc-logo-mark{
  position:absolute;
  top:10px;
  right:10px;
  z-index: 8;
  width: 42px;
  height: 42px;
  object-fit:contain;
  opacity:.92;
  pointer-events:none;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.35));
}


/* -----------------------------
   7) DEMO — SPLIT + AGENT PANEL (light)
------------------------------ */
.demo-split{ position:relative; }

.demo-agent-panel{
  height:100%;
  border-radius: 22px;
  border:1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 16px;
  box-shadow: 0 26px 70px rgba(15,23,42,.12);
}

.demo-agent-head{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.demo-agent-avatar{
  width:52px; height:52px;
  border-radius:16px;
  object-fit:cover;
  border:1px solid rgba(15,23,42,.12);
  background: rgba(15,23,42,.04);
}
.demo-agent-name{ font-weight:950; color: rgba(11,15,23,.92); line-height:1.05; }
.demo-agent-role{ font-size:.9rem; color: rgba(71,85,105,.95); }

.demo-agent-status{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.12);
  background: rgba(15,23,42,.04);
  color: rgba(11,15,23,.78);
  font-weight:900;
  font-size:.85rem;
  white-space:nowrap;
}
.demo-agent-status .dot{
  width:8px; height:8px; border-radius:999px;
  background: rgba(var(--nc-cyan), .78);
  box-shadow: 0 0 0 4px rgba(var(--nc-cyan), .10);
}
.demo-agent-status.is-done .dot{
  background: rgba(34,197,94,.80);
  box-shadow: 0 0 0 4px rgba(34,197,94,.10);
}

.demo-agent-chat{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:220px;
}
.demo-agent-chat .bubble{
  max-width:92%;
  border-radius:16px;
  padding:9px 11px;
  font-size:.95rem;
  line-height:1.3;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.70);
  color: rgba(11,15,23,.88);
  opacity:0;
  transform: translateY(10px);
}
.demo-agent-chat .bubble.user{
  margin-left:auto;
  background: rgba(var(--nc-cyan), .12);
  border-color: rgba(var(--nc-cyan), .20);
}
.demo-agent-chat .bubble.agent{
  background: rgba(15,23,42,.04);
}
.demo-agent-chat .bubble.is-in{ animation: bubbleIn .22s ease forwards; }
@keyframes bubbleIn{ to{ opacity:1; transform:none; } }
.demo-agent-chat .meta{
  display:block;
  margin-top:4px;
  font-size:.82rem;
  color: rgba(71,85,105,.95);
}

/* Prompt */
.demo-prompt{ margin-top:12px; border-top:1px solid rgba(15,23,42,.10); padding-top:12px; }
.demo-prompt-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.demo-prompt-head .t{ font-weight:950; color: rgba(11,15,23,.86); }

.demo-copy{
  border:1px solid rgba(15,23,42,.14);
  background: rgba(255,255,255,.65);
  color: rgba(11,15,23,.86);
  font-weight:900;
  border-radius:12px;
  padding:7px 10px;
  transition: transform .15s ease, filter .15s ease;
}
.demo-copy:hover{ filter: brightness(1.03); transform: translateY(-1px); }

.demo-prompt-box{
  margin:0;
  border-radius:16px;
  border:1px solid rgba(15,23,42,.12);
  background: rgba(15,23,42,.04);
  padding:10px 12px;
  color: rgba(11,15,23,.80);
  font-size:.92rem;
  line-height:1.35;
  max-height:160px;
  overflow:auto;
  white-space: pre-wrap;
}

.demo-result-panel{ position:relative; height:100%; }


/* -----------------------------
   8) DEMO — BRIDGE (light)
------------------------------ */
.demo-bridge{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
  opacity:.95;
  contain: layout paint;
}

.demo-bridge span{
  position:absolute;
  left: var(--x1, 44%);
  width: var(--w, 44%);
  height: 1px;
  background: rgba(15,23,42,.10);
  opacity: .35;
}

.demo-bridge span:nth-child(1){ top:46%; opacity:.35; }
.demo-bridge span:nth-child(2){ top:50%; opacity:.55; }
.demo-bridge span:nth-child(3){ top:54%; opacity:.42; }
.demo-bridge span:nth-child(4){ top:58%; opacity:.30; }
.demo-bridge span:nth-child(5){ top:62%; opacity:.22; }

.demo-bridge span::after{
  content:"";
  position:absolute;
  top:50%;
  left:0;
  transform: translate3d(-35%, -50%, 0);
  width: min(220px, 45%);
  height: 1px;

  background: linear-gradient(90deg,
    rgba(var(--nc-cyan), 0),
    rgba(var(--nc-cyan), .90),
    rgba(var(--nc-gold), .85),
    rgba(var(--nc-gold), 0)
  );

  filter:
    drop-shadow(0 0 6px rgba(var(--nc-cyan), .22))
    drop-shadow(0 0 10px rgba(var(--nc-gold), .14));

  opacity: 1;
  will-change: transform;
  animation: ncBridgeFlow 1.6s linear infinite;
}
.demo-bridge span:nth-child(1)::after{ animation-delay: 0s; }
.demo-bridge span:nth-child(2)::after{ animation-delay: .25s; }
.demo-bridge span:nth-child(3)::after{ animation-delay: .5s; }
.demo-bridge span:nth-child(4)::after{ animation-delay: .75s; }
.demo-bridge span:nth-child(5)::after{ animation-delay: 1s; }

@keyframes ncBridgeFlow{
  0%   { transform: translate3d(-35%, -50%, 0); }
  100% { transform: translate3d(calc(100% + 35%), -50%, 0); }
}

@media (prefers-reduced-motion: reduce){
  .demo-bridge span::after{ animation: none !important; opacity:.65; }
}
@media (max-width: 991.98px){
  .demo-bridge{ display:none; }
}


/* -----------------------------
   9) DEMO — Overlay “Préparation…” (light)
------------------------------ */
.demo-nc-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 9;
  pointer-events:none;
  opacity:0;
  transition: opacity .18s ease;
}
.demo-nc-overlay.is-on{ opacity:1; }

.demo-nc-card{
  width: min(560px, 92%);
  border-radius:18px;
  border:1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 26px 70px rgba(15,23,42,.18);
  padding:14px;
}

.demo-nc-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.demo-nc-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.75);
  color: rgba(11,15,23,.86);
  font-weight:950;
  font-size:.88rem;
}
.demo-nc-pill .spark{
  width:8px;height:8px;border-radius:999px;
  background: rgba(var(--nc-cyan), .85);
  box-shadow: 0 0 0 4px rgba(var(--nc-cyan), .10);
}
.demo-nc-mini{ color: rgba(71,85,105,.95); font-weight:900; font-size:.88rem; }
.demo-nc-bar{
  height:10px;
  border-radius:999px;
  overflow:hidden;
  border:1px solid rgba(15,23,42,.12);
  background: rgba(15,23,42,.04);
}
.demo-nc-bar span{
  display:block;
  height:100%;
  width:0%;
  background: linear-gradient(90deg,#0ea5e9,#16a34a);
  transition: width .22s ease;
}
.demo-nc-lines{ margin-top:10px; display:grid; gap:6px; }
.demo-nc-line{ display:flex; justify-content:space-between; gap:10px; font-size:.92rem; }
.demo-nc-line .k{ color: rgba(71,85,105,.95); font-weight:900; }
.demo-nc-line .v{ color: rgba(11,15,23,.86); font-weight:900; }
.demo-nc-hint{ margin-top:10px; color: rgba(71,85,105,.95); font-size:.92rem; }


/* -----------------------------
   10) DEMO — Sound button (light)
------------------------------ */
.sf-sound,
#demoSoundBtn{
  position:absolute;
  right:12px;
  bottom:12px;
  z-index: 10;
  width:42px;
  height:42px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  line-height:1;
}

.sf-sound{
  border:1px solid rgba(255,255,255,.22);
  background:
    radial-gradient(120% 140% at 20% 25%, rgba(var(--nc-cyan), .22), transparent 55%),
    radial-gradient(120% 140% at 80% 70%, rgba(var(--nc-gold), .18), transparent 60%),
    rgba(255,255,255,.16);
  box-shadow:
    0 14px 34px rgba(15,23,42,.16),
    inset 0 1px 0 rgba(255,255,255,.55);
  color: rgba(11,15,23,.92);
  cursor:pointer;
  transition: transform .15s ease, filter .15s ease;
}
.sf-sound:hover{ filter: brightness(1.03); transform: translateY(-1px); }
.sf-sound:active{ transform: translateY(0); filter: brightness(1.01); }
.sf-sound.is-on{ border-color: rgba(var(--nc-cyan), .35); }
.sf-sound i{ font-size:1.1rem; line-height:1; }


/* -----------------------------
   11) MODALS (light)
------------------------------ */
.sf-modal{
  background: var(--panel);
  color: var(--text);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.btn-close.btn-close-white{ filter: none; } /* en light, pas d’invert */

.progress{
  background: rgba(15,23,42,.08);
  height:.8rem;
  border-radius:999px;
  overflow:hidden;
}
.progress-bar{ background-image: var(--grad); }


/* -----------------------------
   12) FAQ (Bootstrap accordion)
------------------------------ */
.accordion-header {margin-bottom: 0;margin-top: 0;}
.accordion-item{
  background: var(--panel);
  color: var(--text);
  border:1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow:hidden;
}
.accordion-button{
  background: transparent;
  color: var(--text);
}
.accordion-button:not(.collapsed){
  color:#0b0f17;
  background: linear-gradient(90deg, rgba(0,194,255,.16), rgba(255,203,107,.16));
}
.accordion-button:focus{ box-shadow: var(--ring); }

/* Version “faq-accordion” minimal */
.faq-accordion .accordion-item{
  background: transparent;
  border:0;
  border-bottom: 1px solid var(--border);
  border-radius:0;
}
.faq-accordion .accordion-button{
  background: transparent;
  color: var(--text);
  padding: 1rem 0;
  border:0;
  box-shadow:none !important;
}
.faq-accordion .accordion-button::after{
  filter: none;
  opacity: .7;
}
.faq-accordion .accordion-body{
  color: var(--muted);
  padding: .5rem 0 1rem 0;
  max-width: 780px;
}

/* Callout bas */
.faq-callout{
  border: 1px solid rgba(0,194,255,.28);
  background: rgba(0,194,255,.10);
  border-radius: 12px;
  padding: 1.6rem 1.2rem;
}
.faq-cta-link{
  color: #047aa0;
  text-decoration: none;
  font-weight: 800;
}
.faq-cta-link:hover{ text-decoration: underline; }


/* -----------------------------
   13) PRICING (light)
------------------------------ */
.pricing-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1.5rem;
  margin-inline:auto;
}
@media (max-width: 991.98px){
  .pricing-grid{ grid-template-columns: 1fr; max-width: 680px; }
}

.price-card{
  position:relative;
  border-radius:14px;
  padding: 1.4rem 1.2rem 1.2rem;
  display:flex;
  flex-direction:column;
  transition: border-color .2s ease, box-shadow .2s ease, transform .18s ease;
}
.price-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(0,194,255,.25);
}

.price-card.is-featured{
  border-color: rgba(0,194,255,.55);
  box-shadow: 0 0 0 1px rgba(0,194,255,.18), 0 18px 50px rgba(0,194,255,.08), var(--shadow-lg);
  background:
    linear-gradient(180deg, rgba(0,194,255,.07), rgba(0,194,255,.03)),
    var(--panel);
}

.ribbon{
  position:absolute;
  top:-12px;
  left:16px;
  background: rgba(0,194,255,.14);
  color:#046e8f;
  border:1px solid rgba(0,194,255,.25);
  border-radius:999px;
  padding:.25rem .6rem;
  font-size:.85rem;
  font-weight:800;
  display:flex;
  align-items:center;
  gap:.35rem;
}

.price-head .plan{ font-weight:800; margin: .2rem 0 .4rem; }
.price-line{ display:flex; align-items:baseline; gap:.2rem; }
.price-main{ font-size:2rem; font-weight:900; color:#047aa0; }
.price-num{ font-size:2.4rem; font-weight:900; }
.price-euro{ font-size:1.6rem; font-weight:900; margin-left:.05rem; }
.price-cycle{ color: var(--muted); margin-left:.35rem; }

.price-card hr{
  border:0;
  height:1px;
  background: var(--border);
  opacity:.85;
  margin: 1rem 0 1.1rem;
}

.price-list{
  list-style:none;
  padding:0;
  margin:0 0 1.1rem 0;
  flex:1;
}
.price-list li{
  display:flex;
  align-items:flex-start;
  gap:.55rem;
  padding:.35rem 0;
  color: var(--text);
}
.price-list i{ color:#00a7de; margin-top:.2rem; font-size:1.1rem; }

.btn-block{ width:100%; padding:.85rem 1rem; font-weight:800; border-radius:10px; }

.btn-ghost-contrast{
  background: transparent;
  border: 1px solid rgba(15,23,42,.18);
  color: var(--text);
}
.btn-ghost-contrast:hover{ background: rgba(15,23,42,.06); }

.btn-cyan{
  background:#00b3ee;
  color:#07131c;
  border:1px solid rgba(0,0,0,.10);
  box-shadow: 0 10px 24px rgba(0,179,238,.22);
  transition: transform .2s ease, box-shadow .2s ease, background .25s ease, border-color .25s ease;padding: 12px;
}
.btn-cyan:hover{
  background:  rgba(0,126,255,1) !important;
  border-color: rgba(0,126,255,1) !important;
  transform: translateY(-2px);
  box-shadow:
    0 0 18px rgba(0,194,255,.22),
    0 0 28px rgba(255,203,107,.18),
    0 14px 34px rgba(15,23,42,.10);
}
.hero-cta:hover {background: rgba(0,126,255,1) !important;
  border-color:rgba(0,126,255,1) !important;color:#fff !important;transition:none !important;}

.pricing-note{ margin-top: 1.25rem; }
.pay-badges{ display:flex; gap:.5rem; justify-content:center; margin-top:.7rem; flex-wrap:wrap; }
.pay-badge{
  font-size:.9rem;
  color: var(--muted);
  border:1px solid rgba(15,23,42,.12);
  border-radius:8px;
  padding:.35rem .6rem;
  background: rgba(255,255,255,.60);
}


/* -----------------------------
   14) TESTIMONIALS (light)
------------------------------ */
.t-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1.5rem;
  width: min(1120px, 100%);
  margin-inline:auto;
}
@media (max-width: 991.98px){
  .t-grid{ grid-template-columns: 1fr; max-width: 720px; }
}

.t-card{
  padding: 1.5rem 1.4rem;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  min-height: 240px;
}
.t-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(0,194,255,.25);
}

.t-stars{ color:#ffb020; letter-spacing:.08rem; margin-bottom:.6rem; }
.t-quote{
  font-style: italic;
  color: var(--text);
  opacity:.95;
  margin-bottom: 1rem;
  line-height:1.6;
}

.t-user{
  display:flex;
  align-items:center;
  gap:.8rem;
  margin-top:auto;
  padding-top:1rem;
  border-top: 1px solid rgba(15,23,42,.08);
}

.t-avatar{
  width:46px; height:46px;
  border-radius:50%;
  object-fit:cover;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 3px #00c2ff;
}
.t-name{ font-weight:900; line-height:1.2; }
.t-role{ color: var(--muted); font-size:.95rem; }


/* -----------------------------
   15) FOOTER (light)
------------------------------ */
footer{ border-top: 1px solid var(--border); }

.sf-footer{
  background: #f9fafb;
  color: #0b0f17;
  font-size:.95rem;
}

.sf-icon{
  width:36px;height:36px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, #00c2ff, #ffcb6b);
  color:#07131c;
  font-weight:800;
  border-radius:6px;
  font-size:.9rem;
}

.text-gradient{
  background: linear-gradient(90deg, #00c2ff, #ffcb6b);
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}

.sf-footer a{
  color: rgba(71,85,105,.95);
  text-decoration:none;
  transition: color .2s ease;
}
.sf-footer a:hover{ color: #047aa0; }

.sf-social{
  width:36px;height:36px;
  border: 1px solid rgba(15,23,42,.12);
  border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  color: rgba(71,85,105,.95);
  transition: all .2s ease;
}
.sf-social:hover{
  color: #047aa0;
  border-color: rgba(0,194,255,.35);
  transform: translateY(-2px);
}


/* -----------------------------
   16) FORMS — Autofill fix (light)
------------------------------ */
.auth-card input:-webkit-autofill,
.auth-card input:-webkit-autofill:hover,
.auth-card input:-webkit-autofill:focus,
.auth-card textarea:-webkit-autofill{
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  box-shadow: 0 0 0 1000px transparent inset !important;
  -webkit-text-fill-color: #0b0f17 !important;
  caret-color: #0b0f17 !important;
  transition: background-color 9999s ease-in-out 0s !important;
  background-clip: padding-box !important;
}
.auth-card input:-moz-autofill,
.auth-card textarea:-moz-autofill{
  box-shadow: 0 0 0 1000px transparent inset !important;
  -moz-text-fill-color: #0b0f17 !important;
  caret-color: #0b0f17 !important;
}
.auth-card input::placeholder,
.auth-card textarea::placeholder{
  background-color: transparent !important;
  color: rgba(71,85,105,.70) !important;
}

.input-group-text{
  background: rgba(15,23,42,.04) !important;
  border-color: rgba(15,23,42,.12) !important;
  color: rgba(11,15,23,.78) !important;
}


/* -----------------------------
   17) VIDEO TEXT — Karaoke (light)
------------------------------ */
.karaoke{
  text-align:center;
  font-weight:800;
  line-height:1.35;
  font-size: clamp(16px, 2.2vw, 28px);
  padding: .35rem .6rem;
  color: var(--karaoke-base, #0b0f17);
  text-shadow: 0 2px 12px rgba(15,23,42,.18);
  user-select:none;
}
.karaoke .w.active{ color: var(--karaoke-hl, #00a7de); }
.karaoke .w.progressive{
  background: linear-gradient(90deg,
    var(--karaoke-hl, #00a7de) 0%,
    var(--karaoke-hl, #00a7de) var(--p, 0%),
    transparent var(--p, 0%)
  );
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}


/* -----------------------------
   18) MUSIC PREVIEW (light)
------------------------------ */
#music-preview .ratio{
  border-radius: 1rem;
  box-shadow: 0 24px 60px rgba(15,23,42,.12);
  width:100%;
  max-width:100%;
}

.ratio-9x16{ --bs-aspect-ratio: 177.7777778%; }
.object-fit-cover{ object-fit: cover; }

#music-preview .mp-viewport{ overflow:hidden; width:100%; }
#music-preview .mp-track{ display:flex; gap:16px; transition: transform .35s ease; will-change: transform; }

@media (min-width: 1400px){
  #music-preview .mp-item{ flex:0 0 calc(20% - 13px); max-width: calc(20% - 13px); }
}
@media (min-width: 992px) and (max-width: 1399.98px){
  #music-preview .mp-item{ flex:0 0 calc(33.333% - 11px); max-width: calc(33.333% - 11px); }
}
@media (min-width: 576px) and (max-width: 991.98px){
  #music-preview .mp-item{ flex:0 0 calc(50% - 8px); max-width: calc(50% - 8px); }
}
@media (max-width: 575.98px){
  #music-preview .mp-item{ flex:0 0 100%; max-width: 100%; }
}

.mp-card{
  border-radius:16px;
  overflow:hidden;
  background: rgba(255,255,255,.80);
  backdrop-filter: blur(6px);
  box-shadow: 0 16px 40px rgba(15,23,42,.10);
  display:flex;
  flex-direction:column;
  height:100%;
  transition: filter .15s ease, transform .15s ease, background .15s ease;
}
.mp-card:hover{
  filter: brightness(1.02);
  transform: translateY(-1px);
  background: rgba(255,255,255,.92);
}

.mp-body{ padding:12px; color:#131313; }
.mp-title{ font-weight:800; margin:0 0 2px; font-size:.95rem; }
.mp-artist{ opacity:.7; font-size:.8rem; margin-bottom:.35rem; color: rgba(71,85,105,.95); }
.mp-buy{ margin-top:.5rem; }
.mp-verse{ margin-top:2px; margin-bottom:4px; color: rgba(71,85,105,.95); }

@media (max-width: 575.98px){
  #music-preview .ratio{ max-width:100%; width:100%; }
}


/* -----------------------------
   19) MISC / RESPONSIVE / A11Y
------------------------------ */
@media (max-width: 991.98px){
  .sf-thumbs{ grid-template-columns: 1fr 1fr; }
  .sf-thumb img{ height: 120px; }
}
@media (max-width: 575.98px){
  .hero{ min-height: 88vh; }
  .sf-thumbs{ grid-template-columns: 1fr; }
  .sf-device{ border-radius: 14px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* Utilities */
.kbd, kbd{
  background: rgba(15,23,42,.06);
  color: rgba(11,15,23,.92);
  padding:.18rem .38rem;
  border-radius:6px;
  border:1px solid rgba(15,23,42,.12);
  font-size:.9em;
}
.badge.bg-dark-subtle{
  background: rgb(255, 255, 255) !important;
  color: rgba(11,15,23,.78) !important;
}
.small, .text-small{ font-size:.94rem; }

/* “hidden-*” legacy (ok) */
@media (max-width: 767.98px){ .hidden-xs{ display:none !important; } }
@media (min-width: 768px) and (max-width: 991.98px){ .hidden-sm{ display:none !important; } }
@media (min-width: 992px) and (max-width: 1199.98px){ .hidden-md{ display:none !important; } }
@media (min-width: 1200px){ .hidden-lg{ display:none !important; } }

#ptop{ padding-top:90px; }
@media (max-width: 991.98px){
  #ptop{ padding-top:30px; }
}

/* Caption sur cartes 9:16 (light) */
.hero .reel-card .reel-cap{
  position:absolute;
  left:12px;
  bottom:12px;
  z-index:6;
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.2px;
  color:#0b0f17;
  background: rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.55);
  box-shadow: 0 10px 24px rgba(15,23,42,.10);
  pointer-events:none;
}
.hero .reel-card .reel-cap::before{
  content:"";
  display:inline-block;
  width:8px;height:8px;
  margin-right:8px;
  border-radius:999px;
  background: linear-gradient(90deg, #00c2ff, #ffcb6b);
  vertical-align:middle;
  box-shadow: 0 0 0 3px rgba(0,194,255,.10);
}
.hero .reel-card.active .reel-cap{
  background: rgba(255,255,255,.88);
  border-color: rgba(0,194,255,.22);
}
@media (max-width:576px){
  .hero .reel-card .reel-cap{
    left:10px; bottom:10px;
    font-size:11px;
    padding:5px 10px;
  }
}



.nc-int-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:18px;
}
@media (max-width: 991.98px){
  .nc-int-grid{ grid-template-columns: 1fr; }
}

.nc-int-card{
  position:relative;
  border-radius:18px;
  padding:18px;
  background: rgba(255,255,255,.82);
  border:1px solid rgba(15,23,42,.10);
  box-shadow: 0 18px 60px rgba(15,23,42,.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow:hidden;
}

.nc-int-top{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
}
.nc-int-ic{
  width:44px; height:44px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(90% 110% at 20% 15%, rgba(var(--nc-cyan), .18), transparent 55%),
    radial-gradient(90% 110% at 80% 75%, rgba(var(--nc-gold), .14), transparent 55%),
    rgba(15,23,42,.04);
  border:1px solid rgba(15,23,42,.10);
}
.nc-int-ic i{ font-size:20px; color: rgba(11,15,23,.92); }

.nc-int-kicker{
  font-size:.82rem;
  color: rgba(71,85,105,.95);
  letter-spacing:.02em;
  line-height:1.1;
}
.nc-int-title{
  margin-top:2px;
  font-weight:950;
  color:#0b0f17;
  line-height:1.1;
}
.nc-int-badge{
  margin-left:auto;
  font-size:.78rem;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(15,23,42,.04);
  border:1px solid rgba(15,23,42,.10);
  color: rgba(11,15,23,.78);
}
.nc-int-desc{
  margin:0 0 14px 0;
  color: rgba(71,85,105,.95);
  line-height:1.35;
  min-height:48px;
}
.nc-int-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  text-decoration:none;
  color:#0b0f17;
  font-weight:900;
  background: rgba(15,23,42,.04);
  border:1px solid rgba(15,23,42,.10);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.nc-int-btn:hover{
  transform: translateY(-1px);
  background: rgba(15,23,42,.06);
  border-color: rgba(0,194,255,.25);
}
 :root {
    --ink: #0b0f17;
    --ink-2: #121826;
    --panel: #0e1422;
    --text: #ffffff;
    --muted: #b4bdd1;
    --brand: #00c2ff;
    --brand-2: #ffcb6b;
    --grad: linear-gradient(90deg, rgba(0, 194, 255, 1), rgba(0, 126, 255, 1));
    --radius: 16px;
    --radius-sm: 12px;
    --ring: 0 0 0 3px rgba(0, 194, 255, .25);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, .35);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, .25);
    --border: rgba(255, 255, 255, .08);
    --border-soft: rgba(255, 255, 255, .06);
  }

  /* ===== HERO LIGHT base ===== */
  .nc-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(64px, 7vw, 110px) 0;
    z-index: 1;
  }

  .nc-hero--light {
    background: #f6f8fc;
    color: #0b1020;
  }

  /* ===== FULL WIDTH BG ===== */
  .nc-hero-bg {
    position: absolute;
    inset: 0;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
  }

  /* Aura */
  .nc-hero-aura {
    position: absolute;
    inset: -22%;
    background:
      radial-gradient(560px 460px at var(--ax, 55%) var(--ay, 30%),
        rgba(0, 194, 255, .18) 0%,
        rgba(0, 194, 255, .08) 30%,
        rgba(0, 194, 255, 0) 64%),
      radial-gradient(560px 460px at calc(var(--ax, 55%) + 12%) calc(var(--ay, 30%) + 18%),
        rgba(255, 203, 107, .16) 0%,
        rgba(255, 203, 107, .07) 32%,
        rgba(255, 203, 107, 0) 66%);
    filter: blur(10px);
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  /* ===== TEXTE BIBLE FULL WIDTH ===== */
  .nc-bible {
    position: absolute;
    inset: 0;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(14px, 2.2vw, 42px);
  }

  .nc-bible-ref {
    position: absolute;
    top: clamp(18px, 2vw, 26px);
    left: clamp(14px, 2.2vw, 44px);
    font-weight: 900;
    letter-spacing: .08em;
    font-size: .78rem;
    color: rgba(11, 16, 32, .45);
  }

  .nc-bible-text {
    max-width: none !important;
    width: 100vw;
    padding: 0 clamp(14px, 2.2vw, 44px);
    font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
    font-weight: 750;
    line-height: 1.10;
    font-size: clamp(34px, 4.2vw, 70px);
    color: rgba(11, 16, 32, .12);
    filter: contrast(1.12);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .38);

    -webkit-mask-image: radial-gradient(clamp(420px, 30vw, 820px) clamp(320px, 24vw, 680px) at var(--ax, 55%) var(--ay, 30%),
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, .78) 26%,
        rgba(0, 0, 0, .28) 52%,
        rgba(0, 0, 0, 0) 82%);
    mask-image: radial-gradient(clamp(420px, 30vw, 820px) clamp(320px, 24vw, 680px) at var(--ax, 55%) var(--ay, 30%),
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, .78) 26%,
        rgba(0, 0, 0, .28) 52%,
        rgba(0, 0, 0, 0) 82%);
  }

  /* Vignette */
  .nc-hero-vignette {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(1100px 620px at 50% 35%,
        rgba(246, 248, 252, 0) 0%,
        rgba(246, 248, 252, .38) 56%,
        rgba(246, 248, 252, .88) 100%),
      linear-gradient(180deg,
        rgba(246, 248, 252, .88) 0%,
        rgba(246, 248, 252, .16) 30%,
        rgba(246, 248, 252, .90) 100%);
  }

  /* ===== Title ===== */
  .nc-hero-title {
    margin: 10px 0 10px;
    font-weight: 950;
    letter-spacing: -0.03em;
    line-height: 1.02;
    font-size: clamp(38px, 4.3vw, 66px);
  }

  .nc-hero-title .grad {
    background: linear-gradient(90deg, rgba(0, 194, 255, 1), rgba(0, 126, 255, 1));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  /* Dégradé sur le texte (comme ton .grad) */
  span.nc-count-num.grad {
    background: linear-gradient(90deg, rgba(0, 194, 255, 1), rgba(0, 194, 255, 1));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    /* Safari */
    font-size: 1.2rem;
    font-weight: 800;
  }

  .nc-hero-sub {
    margin: 0 0 18px;
    font-size: 1.05rem;
    color: rgba(11, 16, 32, .70);
  }

  /* ===== Agents pill ===== */
  :root {
    --nc-avatar: 3.1em;
  }

  .nc-hero-pill-agents {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }

  .nc-hero-pill-avatars {
    display: flex;
    align-items: center;
    padding-left: 2px;
  }

  .nc-hero-pill-avatars img {
    width: var(--nc-avatar);
    height: var(--nc-avatar);
    border-radius: 999px;
    object-fit: cover;
    margin-left: -12px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .12), 0 0 0 3px rgba(255, 255, 255, .75);
    filter: saturate(1.02) contrast(1.02);
    background: #fff;
  }

  .nc-hero-pill-avatars img:first-child {
    margin-left: 0;
  }

  /* ✅ BG image + blur DANS le span */
  .nc-hero-pill-count {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: var(--nc-avatar);
    padding: 12px 18px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, .10);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .10);
  }

.nc-count-bg {
  position: absolute;
  inset: -10%;
  background: url("/assets/img/agents/agent-multiple.png") center / cover no-repeat;
  filter: blur(4px) saturate(0.85) contrast(1.08);
  opacity: .75;
  transform: scale(0.70);
}


  .nc-hero-pill-count::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 194, 255, .55), rgba(0, 126, 255, .75));
    opacity: .50;
  }

  /* foreground au-dessus du bg */
  .nc-count-fg {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff !important;
    font-weight: 950;
    white-space: nowrap;
  }

  .nc-count-num {
    font-weight: 1000;
    color: #fff;
  }

  .nc-count-label {
    color: rgb(255, 255, 255) important;
    font-weight: 900;
  }

  /* ===== Proof card ===== */
  .nc-proof-card {
    background: rgb(255 255 255 / 19%);
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 16px;
    padding: 12px 14px;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 0 1px rgba(15, 23, 42, .06), 0 16px 34px rgba(0, 0, 0, .06);
  }

  .nc-proof-k {
    font-weight: 900;
    color: #0f172a;
  }

  .nc-proof-v {
    color: #334155;
  }

  .nc-proof-card hr {
    margin: 10px 0;
    border-color: rgba(15, 23, 42, .10);
  }

  /* ===== Metrics ===== */
  .nc-hero-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    max-width: 520px;
  }

  .nc-hero-metrics .m {
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(11, 16, 32, .10);
    background: rgba(255, 255, 255, .62);
    backdrop-filter: blur(10px);
  }

  .nc-hero-metrics .m strong {
    display: block;
    font-weight: 950;
    font-size: .95rem;
  }

  .nc-hero-metrics .m span {
    display: block;
    margin-top: 2px;
    font-size: .85rem;
    color: rgba(11, 16, 32, .62);
  }

  /* ===== REEL ===== */
  .hero-reel {
    width: min(520px, 100%);
    height: 520px;
    position: relative;
  }

  @media (max-width:992px) {
    .hero-reel {
      height: 420px;
    }
  }

  .reel-card {
    position: absolute;
    width: 240px;
    aspect-ratio: 9/16;
    border-radius: 18px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .18);
    transition: transform .35s ease, box-shadow .35s ease, z-index .35s ease;
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, .92);
  }

  .reel-card video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 18px;
  }

  .reel-card.is-left {
    left: 20%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-6deg) scale(.95);
    z-index: 1;
  }

  .reel-card.is-center {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(0) scale(1);
    z-index: 2;
  }

  .reel-card.is-right {
    left: 80%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(6deg) scale(.95);
    z-index: 1;
  }

  .reel-card.active {
    z-index: 5 !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .22);
  }

  .reel-cap {
    position: absolute;
    left: 10px;
    bottom: 10px;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 900;
    font-size: .82rem;
    color: #fff;
    background: rgba(0, 0, 0, .42);
    backdrop-filter: blur(10px);
  }

  .hero-sound {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 10;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(6, 10, 18, .50);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
  }

  .hero-sound:hover {
    background: rgba(6, 10, 18, .68);
  }

  /* Right card */
  .nc-right-card {
    position: relative;
    background: rgba(255, 255, 255, .90);
    border-radius: 24px;
    padding: 20px;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08), 0 20px 40px rgba(0, 0, 0, 0.08), 0 40px 80px rgba(0, 0, 0, 0.06);
  }

  .nc-right-hint {
    color: #64748b;
    font-size: 13px;
  }

  .demo-stats {
    display: flex;
    gap: 24px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
  }

  .demo-stat {
    flex: 1;
    text-align: center;
  }

  .demo-stat-value {
    font-size: 24px;
    font-weight: 800;
    color: #0f172a;
    display: block;
  }

  .demo-stat-label {
    font-size: 13px;
    color: #64748b;
    margin-top: 4px;
  }

  /* ===== Responsive ===== */
  @media (max-width: 992px) {
    .nc-bible-text {
      font-size: clamp(28px, 6.2vw, 46px);
    }

    .nc-hero-metrics {
      grid-template-columns: 1fr;
      max-width: 360px;
    }
  }

  @media (max-width: 576px) {
    :root {
      --nc-avatar: 2.55em;
    }

    .nc-hero-pill-avatars img {
      margin-left: -10px;
    }

    .nc-hero-pill-count {
      padding: 7px 10px;
      font-size: .86rem;
    }

    .reel-card {
      border-radius: 14px;
    }

    .reel-card video {
      border-radius: 14px;
    }
  }

  /* reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .nc-hero-aura {
      filter: none;
    }

    .nc-bible-text {
      -webkit-mask-image: none;
      mask-image: none;
      color: rgba(11, 16, 32, .12);
    }
  }

   /* ===== GRID ===== */
  .nc-features-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  @media (max-width: 992px) {
    .nc-features-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 576px) {
    .nc-features-grid {
      grid-template-columns: 1fr;
    }
  }

  /* ===== CARD (100% LIGHT) ===== */
  .nc-feature-card {
    position: relative;
    border-radius: 18px;
    padding: 16px 16px 14px;
    overflow: hidden;

    /* ✅ jamais noir */
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(11, 16, 32, .10);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .07);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }

  /* 2e bordure animée : fine, lumineuse, SUBTILE (sur blanc) */
  .nc-feature-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 20px;
    padding: 1px;
    background:
      conic-gradient(from var(--nc-br-a, 0deg),
        rgba(0, 194, 255, 0) 0deg,
        rgba(0, 194, 255, .40) 70deg,
        rgba(255, 203, 107, .30) 140deg,
        rgba(96, 214, 180, .26) 210deg,
        rgba(0, 126, 255, .40) 280deg,
        rgba(0, 194, 255, 0) 360deg);
    opacity: .35;

    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    pointer-events: none;
  }

  /* glow interne très léger (sur BLANC) */
  .nc-feature-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 18px;
    background:
      radial-gradient(520px 240px at 15% 10%, rgba(0, 194, 255, .10), transparent 60%),
      radial-gradient(520px 240px at 85% 90%, rgba(255, 203, 107, .09), transparent 62%);
    opacity: .60;
    pointer-events: none;
  }

  .nc-feature-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .10);
    border-color: rgba(0, 194, 255, .18);
  }

  .nc-feature-card:hover::before {
    opacity: .55;
  }

  /* ===== HEAD ===== */
  .nc-feature-head {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .nc-feature-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;

    background:
      radial-gradient(120% 140% at 20% 25%, rgba(0, 194, 255, .14), transparent 55%),
      radial-gradient(120% 140% at 80% 70%, rgba(255, 203, 107, .12), transparent 60%),
      rgba(255, 255, 255, .86);
    border: 1px solid rgba(11, 16, 32, .10);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .06);
    color: rgba(11, 16, 32, .82);
  }

  .nc-feature-kicker {
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(11, 16, 32, .52);
  }

  .nc-feature-name {
    margin-top: 4px;
    font-size: 1.15rem;
    font-weight: 950;
    letter-spacing: -0.02em;
    color: rgba(11, 16, 32, .92);
  }

  .nc-feature-desc {
    position: relative;
    z-index: 2;
    margin: 0;
    color: rgba(11, 16, 32, .70);
  }

  /* ===== TAGS ===== */
  .nc-tags {
    position: relative;
    z-index: 2;
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .nc-tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 800;
    border: 1px solid rgba(11, 16, 32, .10);
    background: rgba(255, 255, 255, .86);
    color: rgba(11, 16, 32, .72);
  }

  /* ===== FIX alignement footer tags ===== */
.nc-feature-card{
  display:flex;
  flex-direction:column;
  height:100%;
}

.nc-feature-desc{
  flex-grow:1;
}

.nc-tags{
  margin-top:auto;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding-top:12px;
  border-top:1px solid var(--border-soft);
}

.nc-tags span{
  font-size:12px;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(0,194,255,.08);
  border:1px solid rgba(0,194,255,.18);
  color:rgba(11,15,23,.78);
  font-weight:600;
}

  /* ===== VERSE ===== */
  .nc-verse {
    text-align: center;
    max-width: 84ch;
    margin-left: auto;
    margin-right: auto;
    color: rgba(11, 16, 32, .70);
    font-weight: 650;
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .nc-feature-card::before {
      display: none;
    }

    .nc-feature-card {
      transition: none;
    }
  }

  /* ===== FORCE FEATURES EN LIGHT (écrase ton fond noir actuel) ===== */
  #features {
    position: relative;
    background: #f6f8fc !important;
    color: #0b1020 !important;
    overflow: hidden;
  }

  /* petit glow comme ton hero (optionnel mais propre) */
  #features::before {
    content: "";
    position: absolute;
    inset: -20%;
    background:
      radial-gradient(720px 520px at 20% 10%, rgba(0, 194, 255, .14), transparent 60%),
      radial-gradient(720px 520px at 80% 75%, rgba(255, 203, 107, .12), transparent 62%);
    filter: blur(10px);
    opacity: .95;
    pointer-events: none;
  }

  #features::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(1100px 620px at 50% 35%,
        rgba(246, 248, 252, 0) 0%,
        rgba(246, 248, 252, .35) 56%,
        rgba(246, 248, 252, .92) 100%),
      linear-gradient(180deg,
        rgba(246, 248, 252, .88) 0%,
        rgba(246, 248, 252, .14) 30%,
        rgba(246, 248, 252, .92) 100%);
    pointer-events: none;
  }

  #features .container {
    position: relative;
    z-index: 2;
  }

  /* titres & texte */
  #features h2 {
    color: rgba(11, 16, 32, .95) !important;
  }

  #features p {
    color: rgba(11, 16, 32, .70) !important;
  }

 /* ==========================================================================
   NanoClip — style-light.css (base LIGHT)
   But: même UI/HTML, rendu clair propre (pas un patch du dark).
   - Tokens LIGHT
   - mêmes composants que style-dark.css, adaptés
   ========================================================================== */

/* -----------------------------
   0) TOKENS (LIGHT only)
------------------------------ */
:root{
  --ink:#f5f7fb;          /* fond page */
  --ink-2:#ffffff;        /* fond footer / panneaux clairs */
  --panel:#ffffff;        /* cartes */

  --text:#0b0f17;         /* texte principal */
  --muted:#475569;        /* texte secondaire */

  --brand:#00c2ff;
  --brand-2:#ffcb6b;
  --grad: linear-gradient(90deg, rgba(0, 194, 255, 1), rgba(0, 194, 255, 1));

  --radius:16px;
  --radius-sm:12px;

  --ring:0 0 0 3px rgba(0,194,255,.22);

  --shadow-lg: 0 20px 60px rgba(15,23,42,.12);
  --shadow-md: 0 10px 30px rgba(15,23,42,.10);

  --border: rgba(15,23,42,.10);
  --border-soft: rgba(15,23,42,.08);

  /* demo / bridge */
  --nc-cyan: 16,184,255;
  --nc-gold: 255,203,107;
}

/* -----------------------------
   1) BASE / RESET
------------------------------ */
html, body{ height:100%; }
*{ outline:0; }
body{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--ink);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a{ color: inherit; text-decoration:none; }
a:hover{ opacity:.92; }

:focus-visible{
  box-shadow: var(--ring);
  transition: box-shadow .15s ease;
}

::selection{ background: rgba(0,194,255,.22); color:#0b0f17; }

/* Scrollbar (WebKit) */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background: rgba(15,23,42,.18); border-radius: 999px; }

/* Helpers */
.fw-800{ font-weight:800; }
.fw-600{ font-weight:600; }
.text-muted{ color: var(--muted) !important; }
.muted-balance, .hero-subtle, .hero-note{ color: var(--muted) !important; }

section{ position:relative; z-index:1; }
.border-gradient{ border-top:1px solid var(--border-soft); }

/* Particules fond (si tu les gardes en light: très discret) */
.sf-particles{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events:none;
  opacity:.12;
  filter: saturate(.9);
}

.tabx.is-active {
    border-color: rgba(0, 194, 255, .22);
    background: radial-gradient(120% 140% at 18% 22%, rgba(0, 194, 255, .12), transparent 62%), radial-gradient(120% 140% at 82% 78%, rgba(255, 203, 107, .10), transparent 60%), rgba(255, 255, 255, .84);
}


/* -----------------------------
   2) NAVBAR
------------------------------ */
.navbar{
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: linear-gradient(to bottom, rgba(255,255,255,.78), rgba(255,255,255,0));
}
.navbar .nav-link{ color: rgba(15,23,42,.70); }
.navbar .nav-link:hover{ color: #0b0f17; }

element.style {
}
.nc-navbar .nav-link {color: rgb(0 0 0 / 80%);font-weight: 600;}

.sf-logo{ font-weight:800; letter-spacing:.2px; }
.grad{ background: var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
 span.nc-count-num.grad {background: linear-gradient(90deg, rgba(0, 194, 255, 1), rgba(0, 194, 255, 1));}


/* -----------------------------
   3) BUTTONS
------------------------------ */
.grad-btn{
  background-image: var(--grad);
  border:none;
  color:#07131c;
}
.grad-btn:hover{ filter: brightness(1.03); }

.btn-outline-light{
  border-color: rgba(15,23,42,.18) !important;
  color: #0b0f17;
}
.btn-outline-light:hover{ background: rgba(15,23,42,.06); }

.btn-contrast{
  color: var(--text);
  background: transparent;
  border: 1px solid rgba(15,23,42,.18);
}
.btn-contrast:hover{ background: rgba(15,23,42,.06); }

.btn-ghost{
  color:#0b0f17;
  background: transparent;
  border: 1px solid rgba(15,23,42,.18);
}
.btn-ghost:hover{ background: rgba(15,23,42,.06); }

/* hover stable */
.btn-check+.btn:hover{
  border: 1px solid rgba(15,23,42,.20);
  background: rgba(15,23,42,.06);
  color:#0b0f17;
  font-weight:600;
}


/* -----------------------------
   4) HERO
------------------------------ */
.hero{
  position:relative;
  min-height:92vh;
  display:grid;
  place-items:center;
  text-align:center;
  padding-top: 96px;
  z-index:1;
}
.hero-page{
  position:relative;
  min-height:92vh;
  display:grid;
  place-items:center;
  text-align:left;
  padding-top: 96px;
  z-index:1;
}

/* Glow clair (moins “baveux”, plus premium) */
.hero-glow,
.hero-page-glow{
  position:absolute;
  inset:-18% -10% auto -10%;
  height:70%;
  background:
    radial-gradient(60% 55% at 50% 45%, rgba(0,194,255,.22), rgba(255,203,107,.16) 45%, rgba(245,247,251,0) 72%);
  filter: blur(46px);
  animation: heroPulse 6s ease-in-out infinite alternate;
  pointer-events:none;
  z-index:0;
}
@keyframes heroPulse{
  from{ transform: translateY(-10px) scale(1); opacity:.92; }
  to{ transform: translateY(10px) scale(1.04); opacity:1; }
}

.hero-pill{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.45rem .8rem;
  border-radius:999px;
  border:1px solid rgba(0,194,255,.38);
  color:#046e8f;
  background: rgba(0,194,255,.12);
  font-weight:650;
  font-size:.92rem;
}

.hero-title{
  font-size: clamp(2rem, 5.2vw, 3.8rem);
  line-height:1.05;
  margin: 1rem auto .75rem;
  color:#0b0f17;
}

.hero-cta{
  background: linear-gradient(90deg, #00c2ff, #33d8ff);
  border: 1px solid rgba(0,194,255,.65);
  color:#07131c;
  font-weight:650;
  box-shadow: 0 0 0 1px rgba(0,194,255,.18), 0 12px 30px rgba(0,194,255,.18);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease, background .25s ease, border-color .25s ease;padding: 12px;
}
.hero-cta:hover{
  background: linear-gradient(90deg, #00c2ff, #ffcb6b);
  border-color: rgba(255,203,107,.55);
  transform: translateY(-2px);
  box-shadow:
    0 0 20px rgba(0,194,255,.20),
    0 0 36px rgba(255,203,107,.18),
    0 14px 34px rgba(15,23,42,.10);
}

.hero-stats{
  display:flex;
  gap: clamp(1rem, 6vw, 4rem);
  justify-content:center;
  align-items:flex-start;
  margin-top: clamp(1.2rem, 3vw, 2rem);
}
.hero-stats .stat{ text-align:center; }
.hero-stats .stat-value{
  font-weight:850;
  font-size: clamp(1.25rem, 3.5vw, 1.6rem);
  background: var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-stats .stat-label{ color: var(--muted); font-size:.95rem; }


/* -----------------------------
   5) CARDS / FEATURES GRID
------------------------------ */
.sf-card,
.feature-card,
.price-card,
.t-card{
  background: var(--panel);
  border:1px solid var(--border);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius);
}

.sf-card{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sf-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(0,194,255,.28);
}

.features-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1.2rem;
}
@media (max-width: 991.98px){
  .features-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 575.98px){
  .features-grid{ grid-template-columns: 1fr; }
}

.feature-card{
  position:relative;
  padding: 1.25rem 1.15rem;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  display:flex;
  flex-direction:column;
  height:100%;
}
.feature-card:hover,
.feature-card:focus-within{
  transform: translateY(-2px);
  border-color: rgba(0,194,255,.55);
  box-shadow:
    0 0 0 1px rgba(0,194,255,.18),
    0 14px 44px rgba(0,194,255,.08),
    var(--shadow-lg);
}

.feature-icon{
  width: 52px; height: 52px;
  display:grid; place-items:center;
  border-radius: 12px;
  background: rgba(0,194,255,.06);
  border: 1px solid rgba(0,194,255,.35);
  margin-bottom: .85rem;
  color: #047aa0;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.feature-icon svg{ color: currentColor; }
.feature-card:hover .feature-icon,
.feature-card:focus-within .feature-icon{
  background: var(--brand);
  border-color: var(--brand);
  color:#07131c;
  transform: translateY(-1px);
}

.feature-title{
  font-weight:750;
  margin: .15rem 0 .25rem;
  color: var(--text);
}
.feature-description{
  color: var(--muted);
  margin:0;
  line-height:1.55;
}

.uc-tags{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:auto;
  padding-top:12px;
}
.uc-tag{
  font-size:12px;
  padding:4px 10px;
  border-radius:999px;
  background: rgba(0,194,255,.08);
  border:1px solid rgba(0,194,255,.18);
  color: rgba(11,15,23,.78);
}

.feature-card::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px;
  background: linear-gradient(90deg, rgba(0,194,255,0), rgba(0,194,255,.22), rgba(255,203,107,.18), rgba(0,194,255,0));
  opacity:.35;
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  pointer-events:none;
}

.icon-wrap{
  width:44px; height:44px;
  display:grid; place-items:center;
  border-radius:10px;
  background: rgba(15,23,42,.06);
  margin-bottom: 10px;
  font-size:20px;
  color:#0b0f17;
}

.verse{
  font-style: italic;
  color: #52627a;
  font-size:.95rem;
}


/* -----------------------------
   6) DEMO — DEVICE / CONTROLS
------------------------------ */
.sf-seg .btn{
  --bs-btn-padding-y: .42rem;
  --bs-btn-padding-x: .95rem;
  border-radius:999px;
}
.sf-seg .btn + .btn{ margin-left: .25rem; }

.demo-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top: 24px;
  width:100%;
}

.sf-device{
  position:relative;
  width:100%;
  max-width: 960px;
  margin-inline:auto;

  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow:hidden;

  border:1px solid rgba(15,23,42,.14);
  background: #0b0f17; /* device reste “noir vidéo” */
  box-shadow: 0 26px 70px rgba(15,23,42,.14);

  transition: aspect-ratio .25s ease, box-shadow .2s ease, border-color .2s ease;
}
.demo-wrap.is-169 .sf-device{ aspect-ratio:16/9; max-width: 800px; }
.demo-wrap.is-1x1 .sf-device{ aspect-ratio:1/1;  max-width: 520px; }
.demo-wrap.is-11  .sf-device{ aspect-ratio:1/1;  max-width: 520px; }
.demo-wrap.is-916 .sf-device{ aspect-ratio:9/16; max-width: 450px; max-height: 620px; }

.sf-device:hover{ border-color: rgba(0,194,255,.28); }

.sf-video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  background:#000;
}

.sf-play{
  position:absolute;
  inset:0;
  margin:auto;
  width:84px;height:84px;
  border-radius:50%;
  display:grid; place-items:center;
  background: rgba(255,255,255,.16);
  color:#07131c;
  border:1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(6px);
  font-size:44px;
  transition: transform .15s ease, opacity .2s ease, background .2s ease;
  z-index: 6;
}
.sf-play:hover{ transform: scale(1.04); background: rgba(255,255,255,.22); }
.sf-play.hidden{ opacity:0; pointer-events:none; }

.sf-skel{ position:absolute; inset:0; background:#0c0c0c; z-index:5; }
.sf-skel .bar{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.14) 50%, rgba(255,255,255,0) 100%);
  animation: skel 1.15s infinite linear;
}
@keyframes skel{
  from{ transform: translateX(-100%); }
  to{ transform: translateX(100%); }
}

.sf-controls{
  position:absolute;
  left:0; right:0; bottom:0;
  display:flex;
  align-items:center;
  gap:.35rem;
  padding:.5rem .75rem;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
  z-index: 7;
}
.sf-ctl{
  display:inline-grid; place-items:center;
  width:36px;height:36px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  color:#ffffff;
  transition: background .15s ease, transform .12s ease;
}
.sf-ctl:hover{ background: rgba(255,255,255,.16); transform: translateY(-1px); }
.sf-ctl.active{ outline: 2px solid #00c2ff; }
#ctlSeek{ height:6px; accent-color:#00c2ff; }

.sf-thumbs{ display:grid; gap:.8rem; }
.sf-thumb{
  position:relative;
  display:block;
  width:100%;
  text-align:left;
  border-radius:14px;
  overflow:hidden;

  background: var(--panel);
  border:1px solid var(--border);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
  box-shadow: var(--shadow-md);
}
.sf-thumb:hover{
  transform: translateY(-1px);
  border-color: rgba(0,194,255,.30);
  box-shadow: var(--shadow-lg);
}
.sf-thumb img{ display:block; width:100%; height:150px; object-fit:cover; }
.sf-thumb .badge{ position:absolute; top:8px; left:8px; }
.sf-thumb.active{ outline: 2px solid #00c2ff; }

/* Logo overlays */
.feature-card .nc-logo-mark{
  position:absolute;
  top:10px;
  right:10px;
  z-index: 8;
  width: 42px;
  height: 42px;
  object-fit:contain;
  opacity:.92;
  pointer-events:none;
}
.sf-device .nc-logo-mark{
  position:absolute;
  top:10px;
  right:10px;
  z-index: 8;
  width: 42px;
  height: 42px;
  object-fit:contain;
  opacity:.92;
  pointer-events:none;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.35));
}


/* -----------------------------
   7) DEMO — SPLIT + AGENT PANEL (light)
------------------------------ */
.demo-split{ position:relative; }

.demo-agent-panel{
  height:100%;
  border-radius: 22px;
  border:1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 16px;
  box-shadow: 0 26px 70px rgba(15,23,42,.12);
}

.demo-agent-head{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.demo-agent-avatar{
  width:52px; height:52px;
  border-radius:16px;
  object-fit:cover;
  border:1px solid rgba(15,23,42,.12);
  background: rgba(15,23,42,.04);
}
.demo-agent-name{ font-weight:950; color: rgba(11,15,23,.92); line-height:1.05; }
.demo-agent-role{ font-size:.9rem; color: rgba(71,85,105,.95); }

.demo-agent-status{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.12);
  background: rgba(15,23,42,.04);
  color: rgba(11,15,23,.78);
  font-weight:900;
  font-size:.85rem;
  white-space:nowrap;
}
.demo-agent-status .dot{
  width:8px; height:8px; border-radius:999px;
  background: rgba(var(--nc-cyan), .78);
  box-shadow: 0 0 0 4px rgba(var(--nc-cyan), .10);
}
.demo-agent-status.is-done .dot{
  background: rgba(34,197,94,.80);
  box-shadow: 0 0 0 4px rgba(34,197,94,.10);
}

.demo-agent-chat{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:220px;
}
.demo-agent-chat .bubble{
  max-width:92%;
  border-radius:16px;
  padding:9px 11px;
  font-size:.95rem;
  line-height:1.3;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.70);
  color: rgba(11,15,23,.88);
  opacity:0;
  transform: translateY(10px);
}
.demo-agent-chat .bubble.user{
  margin-left:auto;
  background: rgba(var(--nc-cyan), .12);
  border-color: rgba(var(--nc-cyan), .20);
}
.demo-agent-chat .bubble.agent{
  background: rgba(15,23,42,.04);
}
.demo-agent-chat .bubble.is-in{ animation: bubbleIn .22s ease forwards; }
@keyframes bubbleIn{ to{ opacity:1; transform:none; } }
.demo-agent-chat .meta{
  display:block;
  margin-top:4px;
  font-size:.82rem;
  color: rgba(71,85,105,.95);
}

/* Prompt */
.demo-prompt{ margin-top:12px; border-top:1px solid rgba(15,23,42,.10); padding-top:12px; }
.demo-prompt-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.demo-prompt-head .t{ font-weight:950; color: rgba(11,15,23,.86); }

.demo-copy{
  border:1px solid rgba(15,23,42,.14);
  background: rgba(255,255,255,.65);
  color: rgba(11,15,23,.86);
  font-weight:900;
  border-radius:12px;
  padding:7px 10px;
  transition: transform .15s ease, filter .15s ease;
}
.demo-copy:hover{ filter: brightness(1.03); transform: translateY(-1px); }

.demo-prompt-box{
  margin:0;
  border-radius:16px;
  border:1px solid rgba(15,23,42,.12);
  background: rgba(15,23,42,.04);
  padding:10px 12px;
  color: rgba(11,15,23,.80);
  font-size:.92rem;
  line-height:1.35;
  max-height:160px;
  overflow:auto;
  white-space: pre-wrap;
}

.demo-result-panel{ position:relative; height:100%; }


/* -----------------------------
   8) DEMO — BRIDGE (light)
------------------------------ */
.demo-bridge{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
  opacity:.95;
  contain: layout paint;
}

.demo-bridge span{
  position:absolute;
  left: var(--x1, 44%);
  width: var(--w, 44%);
  height: 1px;
  background: rgba(15,23,42,.10);
  opacity: .35;
}

.demo-bridge span:nth-child(1){ top:46%; opacity:.35; }
.demo-bridge span:nth-child(2){ top:50%; opacity:.55; }
.demo-bridge span:nth-child(3){ top:54%; opacity:.42; }
.demo-bridge span:nth-child(4){ top:58%; opacity:.30; }
.demo-bridge span:nth-child(5){ top:62%; opacity:.22; }

.demo-bridge span::after{
  content:"";
  position:absolute;
  top:50%;
  left:0;
  transform: translate3d(-35%, -50%, 0);
  width: min(220px, 45%);
  height: 1px;

  background: linear-gradient(90deg,
    rgba(var(--nc-cyan), 0),
    rgba(var(--nc-cyan), .90),
    rgba(var(--nc-gold), .85),
    rgba(var(--nc-gold), 0)
  );

  filter:
    drop-shadow(0 0 6px rgba(var(--nc-cyan), .22))
    drop-shadow(0 0 10px rgba(var(--nc-gold), .14));

  opacity: 1;
  will-change: transform;
  animation: ncBridgeFlow 1.6s linear infinite;
}
.demo-bridge span:nth-child(1)::after{ animation-delay: 0s; }
.demo-bridge span:nth-child(2)::after{ animation-delay: .25s; }
.demo-bridge span:nth-child(3)::after{ animation-delay: .5s; }
.demo-bridge span:nth-child(4)::after{ animation-delay: .75s; }
.demo-bridge span:nth-child(5)::after{ animation-delay: 1s; }

@keyframes ncBridgeFlow{
  0%   { transform: translate3d(-35%, -50%, 0); }
  100% { transform: translate3d(calc(100% + 35%), -50%, 0); }
}

@media (prefers-reduced-motion: reduce){
  .demo-bridge span::after{ animation: none !important; opacity:.65; }
}
@media (max-width: 991.98px){
  .demo-bridge{ display:none; }
}


/* -----------------------------
   9) DEMO — Overlay “Préparation…” (light)
------------------------------ */
.demo-nc-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 9;
  pointer-events:none;
  opacity:0;
  transition: opacity .18s ease;
}
.demo-nc-overlay.is-on{ opacity:1; }

.demo-nc-card{
  width: min(560px, 92%);
  border-radius:18px;
  border:1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 26px 70px rgba(15,23,42,.18);
  padding:14px;
}

.demo-nc-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.demo-nc-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.75);
  color: rgba(11,15,23,.86);
  font-weight:950;
  font-size:.88rem;
}
.demo-nc-pill .spark{
  width:8px;height:8px;border-radius:999px;
  background: rgba(var(--nc-cyan), .85);
  box-shadow: 0 0 0 4px rgba(var(--nc-cyan), .10);
}
.demo-nc-mini{ color: rgba(71,85,105,.95); font-weight:900; font-size:.88rem; }
.demo-nc-bar{
  height:10px;
  border-radius:999px;
  overflow:hidden;
  border:1px solid rgba(15,23,42,.12);
  background: rgba(15,23,42,.04);
}
.demo-nc-bar span{
  display:block;
  height:100%;
  width:0%;
  background: linear-gradient(90deg,#0ea5e9,#16a34a);
  transition: width .22s ease;
}
.demo-nc-lines{ margin-top:10px; display:grid; gap:6px; }
.demo-nc-line{ display:flex; justify-content:space-between; gap:10px; font-size:.92rem; }
.demo-nc-line .k{ color: rgba(71,85,105,.95); font-weight:900; }
.demo-nc-line .v{ color: rgba(11,15,23,.86); font-weight:900; }
.demo-nc-hint{ margin-top:10px; color: rgba(71,85,105,.95); font-size:.92rem; }


/* -----------------------------
   10) DEMO — Sound button (light)
------------------------------ */
.sf-sound,
#demoSoundBtn{
  position:absolute;
  right:12px;
  bottom:12px;
  z-index: 10;
  width:42px;
  height:42px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  line-height:1;
}

.sf-sound{
  border:1px solid rgba(255,255,255,.22);
  background:
    radial-gradient(120% 140% at 20% 25%, rgba(var(--nc-cyan), .22), transparent 55%),
    radial-gradient(120% 140% at 80% 70%, rgba(var(--nc-gold), .18), transparent 60%),
    rgba(255,255,255,.16);
  box-shadow:
    0 14px 34px rgba(15,23,42,.16),
    inset 0 1px 0 rgba(255,255,255,.55);
  color: rgba(11,15,23,.92);
  cursor:pointer;
  transition: transform .15s ease, filter .15s ease;
}
.sf-sound:hover{ filter: brightness(1.03); transform: translateY(-1px); }
.sf-sound:active{ transform: translateY(0); filter: brightness(1.01); }
.sf-sound.is-on{ border-color: rgba(var(--nc-cyan), .35); }
.sf-sound i{ font-size:1.1rem; line-height:1; }


/* -----------------------------
   11) MODALS (light)
------------------------------ */
.sf-modal{
  background: var(--panel);
  color: var(--text);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.btn-close.btn-close-white{ filter: none; } /* en light, pas d’invert */

.progress{
  background: rgba(15,23,42,.08);
  height:.8rem;
  border-radius:999px;
  overflow:hidden;
}
.progress-bar{ background-image: var(--grad); }


/* -----------------------------
   12) FAQ (Bootstrap accordion)
------------------------------ */
.accordion-item{
  background: var(--panel);
  color: var(--text);
  border:1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow:hidden;
}
.accordion-button{
  background: transparent;
  color: var(--text);
}
.accordion-button:not(.collapsed){
  color:#0b0f17;
  background: linear-gradient(90deg, rgba(0,194,255,.16), rgba(255,203,107,.16));
}
.accordion-button:focus{ box-shadow: var(--ring); }

/* Version “faq-accordion” minimal */
.faq-accordion .accordion-item{
  background: transparent;
  border:0;
  border-bottom: 1px solid var(--border);
  border-radius:0;
}
.faq-accordion .accordion-button{
  background: transparent;
  color: var(--text);
  padding: 1rem 0;
  border:0;
  box-shadow:none !important;
}
.faq-accordion .accordion-button::after{
  filter: none;
  opacity: .7;
}
.faq-accordion .accordion-body{
  color: var(--muted);
  padding: .5rem 0 1rem 0;
  max-width: 780px;
}

/* Callout bas */
.faq-callout{
  border: 1px solid rgba(0,194,255,.28);
  background: rgba(0,194,255,.10);
  border-radius: 12px;
  padding: 1.6rem 1.2rem;
}
.faq-cta-link{
  color: #047aa0;
  text-decoration: none;
  font-weight: 800;
}
.faq-cta-link:hover{ text-decoration: underline; }


/* -----------------------------
   13) PRICING (light)
------------------------------ */
.pricing-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1.5rem;
  margin-inline:auto;
}
@media (max-width: 991.98px){
  .pricing-grid{ grid-template-columns: 1fr; max-width: 680px; }
}

.price-card{
  position:relative;
  border-radius:14px;
  padding: 1.4rem 1.2rem 1.2rem;
  display:flex;
  flex-direction:column;
  transition: border-color .2s ease, box-shadow .2s ease, transform .18s ease;
}
.price-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(0,194,255,.25);
}

.price-card.is-featured{
  border-color: rgba(0,194,255,.55);
  box-shadow: 0 0 0 1px rgba(0,194,255,.18), 0 18px 50px rgba(0,194,255,.08), var(--shadow-lg);
  background:
    linear-gradient(180deg, rgba(0,194,255,.07), rgba(0,194,255,.03)),
    var(--panel);
}

.ribbon{
  position:absolute;
  top:-12px;
  left:16px;
  background: rgba(0,194,255,.14);
  color:#046e8f;
  border:1px solid rgba(0,194,255,.25);
  border-radius:999px;
  padding:.25rem .6rem;
  font-size:.85rem;
  font-weight:800;
  display:flex;
  align-items:center;
  gap:.35rem;
}

.price-head .plan{ font-weight:800; margin: .2rem 0 .4rem; }
.price-line{ display:flex; align-items:baseline; gap:.2rem; }
.price-main{ font-size:2rem; font-weight:900; color:#047aa0; }
.price-num{ font-size:2.4rem; font-weight:900; }
.price-euro{ font-size:1.6rem; font-weight:900; margin-left:.05rem; }
.price-cycle{ color: var(--muted); margin-left:.35rem; }

.price-card hr{
  border:0;
  height:1px;
  background: var(--border);
  opacity:.85;
  margin: 1rem 0 1.1rem;
}

.price-list{
  list-style:none;
  padding:0;
  margin:0 0 1.1rem 0;
  flex:1;
}
.price-list li{
  display:flex;
  align-items:flex-start;
  gap:.55rem;
  padding:.35rem 0;
  color: var(--text);
}
.price-list i{ color:#00a7de; margin-top:.2rem; font-size:1.1rem; }

.btn-block{ width:100%; padding:.85rem 1rem; font-weight:800; border-radius:10px; }

.btn-ghost-contrast{
  background: transparent;
  border: 1px solid rgba(15,23,42,.18);
  color: var(--text);
}
.btn-ghost-contrast:hover{ background: rgba(15,23,42,.06); }

.btn-cyan{
  background:#00b3ee;
  color:#07131c;
  border:1px solid rgba(0,0,0,.10);
  box-shadow: 0 10px 24px rgba(0,179,238,.22);
  transition: transform .2s ease, box-shadow .2s ease, background .25s ease, border-color .25s ease;
}


.pricing-note{ margin-top: 1.25rem; }
.pay-badges{ display:flex; gap:.5rem; justify-content:center; margin-top:.7rem; flex-wrap:wrap; }
.pay-badge{
  font-size:.9rem;
  color: var(--muted);
  border:1px solid rgba(15,23,42,.12);
  border-radius:8px;
  padding:.35rem .6rem;
  background: rgba(255,255,255,.60);
}


/* -----------------------------
   14) TESTIMONIALS (light)
------------------------------ */
.t-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1.5rem;
  width: min(1120px, 100%);
  margin-inline:auto;
}
@media (max-width: 991.98px){
  .t-grid{ grid-template-columns: 1fr; max-width: 720px; }
}

.t-card{
  padding: 1.5rem 1.4rem;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  min-height: 240px;
}
.t-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(0,194,255,.25);
}

.t-stars{ color:#ffb020; letter-spacing:.08rem; margin-bottom:.6rem; }
.t-quote{
  font-style: italic;
  color: var(--text);
  opacity:.95;
  margin-bottom: 1rem;
  line-height:1.6;
}

.t-user{
  display:flex;
  align-items:center;
  gap:.8rem;
  margin-top:auto;
  padding-top:1rem;
  border-top: 1px solid rgba(15,23,42,.08);
}

.t-avatar{
  width:46px; height:46px;
  border-radius:50%;
  object-fit:cover;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 3px #00c2ff;
}
.t-name{ font-weight:900; line-height:1.2; }
.t-role{ color: var(--muted); font-size:.95rem; }


/* -----------------------------
   15) FOOTER (light)
------------------------------ */
footer{ border-top: 1px solid var(--border); }

.sf-footer{
  background: #f9fafb;
  color: #0b0f17;
  font-size:.95rem;
}

.sf-icon{
  width:36px;height:36px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, #00c2ff, #ffcb6b);
  color:#07131c;
  font-weight:800;
  border-radius:6px;
  font-size:.9rem;
}

.text-gradient{
  background: linear-gradient(90deg, #00c2ff, #ffcb6b);
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}

.sf-footer a{
  color: rgba(71,85,105,.95);
  text-decoration:none;
  transition: color .2s ease;
}
.sf-footer a:hover{ color: #047aa0; }

.sf-social{
  width:36px;height:36px;
  border: 1px solid rgba(15,23,42,.12);
  border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  color: rgba(71,85,105,.95);
  transition: all .2s ease;
}
.sf-social:hover{
  color: #047aa0;
  border-color: rgba(0,194,255,.35);
  transform: translateY(-2px);
}


/* -----------------------------
   16) FORMS — Autofill fix (light)
------------------------------ */
.auth-card input:-webkit-autofill,
.auth-card input:-webkit-autofill:hover,
.auth-card input:-webkit-autofill:focus,
.auth-card textarea:-webkit-autofill{
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  box-shadow: 0 0 0 1000px transparent inset !important;
  -webkit-text-fill-color: #0b0f17 !important;
  caret-color: #0b0f17 !important;
  transition: background-color 9999s ease-in-out 0s !important;
  background-clip: padding-box !important;
}
.auth-card input:-moz-autofill,
.auth-card textarea:-moz-autofill{
  box-shadow: 0 0 0 1000px transparent inset !important;
  -moz-text-fill-color: #0b0f17 !important;
  caret-color: #0b0f17 !important;
}
.auth-card input::placeholder,
.auth-card textarea::placeholder{
  background-color: transparent !important;
  color: rgba(71,85,105,.70) !important;
}

.input-group-text{
  background: rgba(15,23,42,.04) !important;
  border-color: rgba(15,23,42,.12) !important;
  color: rgba(11,15,23,.78) !important;
}


/* -----------------------------
   17) VIDEO TEXT — Karaoke (light)
------------------------------ */
.karaoke{
  text-align:center;
  font-weight:800;
  line-height:1.35;
  font-size: clamp(16px, 2.2vw, 28px);
  padding: .35rem .6rem;
  color: var(--karaoke-base, #0b0f17);
  text-shadow: 0 2px 12px rgba(15,23,42,.18);
  user-select:none;
}
.karaoke .w.active{ color: var(--karaoke-hl, #00a7de); }
.karaoke .w.progressive{
  background: linear-gradient(90deg,
    var(--karaoke-hl, #00a7de) 0%,
    var(--karaoke-hl, #00a7de) var(--p, 0%),
    transparent var(--p, 0%)
  );
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}


/* -----------------------------
   18) MUSIC PREVIEW (light)
------------------------------ */
#music-preview .ratio{
  border-radius: 1rem;
  box-shadow: 0 24px 60px rgba(15,23,42,.12);
  width:100%;
  max-width:100%;
}

.ratio-9x16{ --bs-aspect-ratio: 177.7777778%; }
.object-fit-cover{ object-fit: cover; }

#music-preview .mp-viewport{ overflow:hidden; width:100%; }
#music-preview .mp-track{ display:flex; gap:16px; transition: transform .35s ease; will-change: transform; }

@media (min-width: 1400px){
  #music-preview .mp-item{ flex:0 0 calc(20% - 13px); max-width: calc(20% - 13px); }
}
@media (min-width: 992px) and (max-width: 1399.98px){
  #music-preview .mp-item{ flex:0 0 calc(33.333% - 11px); max-width: calc(33.333% - 11px); }
}
@media (min-width: 576px) and (max-width: 991.98px){
  #music-preview .mp-item{ flex:0 0 calc(50% - 8px); max-width: calc(50% - 8px); }
}
@media (max-width: 575.98px){
  #music-preview .mp-item{ flex:0 0 100%; max-width: 100%; }
}

.mp-card{
  border-radius:16px;
  overflow:hidden;
  background: rgba(255,255,255,.80);
  backdrop-filter: blur(6px);
  box-shadow: 0 16px 40px rgba(15,23,42,.10);
  display:flex;
  flex-direction:column;
  height:100%;
  transition: filter .15s ease, transform .15s ease, background .15s ease;
}
.mp-card:hover{
  filter: brightness(1.02);
  transform: translateY(-1px);
  background: rgba(255,255,255,.92);
}

.mp-body{ padding:12px; color:#131313; }
.mp-title{ font-weight:800; margin:0 0 2px; font-size:.95rem; }
.mp-artist{ opacity:.7; font-size:.8rem; margin-bottom:.35rem; color: rgba(71,85,105,.95); }
.mp-buy{ margin-top:.5rem; }
.mp-verse{ margin-top:2px; margin-bottom:4px; color: rgba(71,85,105,.95); }

@media (max-width: 575.98px){
  #music-preview .ratio{ max-width:100%; width:100%; }
}


/* -----------------------------
   19) MISC / RESPONSIVE / A11Y
------------------------------ */
@media (max-width: 991.98px){
  .sf-thumbs{ grid-template-columns: 1fr 1fr; }
  .sf-thumb img{ height: 120px; }
}
@media (max-width: 575.98px){
  .hero{ min-height: 88vh; }
  .sf-thumbs{ grid-template-columns: 1fr; }
  .sf-device{ border-radius: 14px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* Utilities */
.kbd, kbd{
  background: rgba(15,23,42,.06);
  color: rgba(11,15,23,.92);
  padding:.18rem .38rem;
  border-radius:6px;
  border:1px solid rgba(15,23,42,.12);
  font-size:.9em;
}
.badge.bg-dark-subtle{
  background: rgb(255, 255, 255) !important;
  color: rgba(11,15,23,.78) !important;
}
.small, .text-small{ font-size:.94rem; }

/* “hidden-*” legacy (ok) */
@media (max-width: 767.98px){ .hidden-xs{ display:none !important; } }
@media (min-width: 768px) and (max-width: 991.98px){ .hidden-sm{ display:none !important; } }
@media (min-width: 992px) and (max-width: 1199.98px){ .hidden-md{ display:none !important; } }
@media (min-width: 1200px){ .hidden-lg{ display:none !important; } }

#ptop{ padding-top:90px; }
@media (max-width: 991.98px){
  #ptop{ padding-top:30px; }
}

/* Caption sur cartes 9:16 (light) */
.hero .reel-card .reel-cap{
  position:absolute;
  left:12px;
  bottom:12px;
  z-index:6;
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.2px;
  color:#0b0f17;
  background: rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.55);
  box-shadow: 0 10px 24px rgba(15,23,42,.10);
  pointer-events:none;
}
.hero .reel-card .reel-cap::before{
  content:"";
  display:inline-block;
  width:8px;height:8px;
  margin-right:8px;
  border-radius:999px;
  background: linear-gradient(90deg, #00c2ff, #ffcb6b);
  vertical-align:middle;
  box-shadow: 0 0 0 3px rgba(0,194,255,.10);
}
.hero .reel-card.active .reel-cap{
  background: rgba(255,255,255,.88);
  border-color: rgba(0,194,255,.22);
}
@media (max-width:576px){
  .hero .reel-card .reel-cap{
    left:10px; bottom:10px;
    font-size:11px;
    padding:5px 10px;
  }
}

/* Integrations section (light) */
.nc-integrations{ position:relative; }
.nc-integrations::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 420px at 20% 0%, rgba(var(--nc-cyan), .10), transparent 55%),
    radial-gradient(900px 420px at 85% 60%, rgba(var(--nc-gold), .09), transparent 55%);
  opacity:.9;
}

.nc-int-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:18px;
}
@media (max-width: 991.98px){
  .nc-int-grid{ grid-template-columns: 1fr; }
}

.nc-int-card{
  position:relative;
  border-radius:18px;
  padding:18px;
  background: rgba(255,255,255,.82);
  border:1px solid rgba(15,23,42,.10);
  box-shadow: 0 18px 60px rgba(15,23,42,.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow:hidden;
}

.nc-int-top{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
}
.nc-int-ic{
  width:44px; height:44px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(90% 110% at 20% 15%, rgba(var(--nc-cyan), .18), transparent 55%),
    radial-gradient(90% 110% at 80% 75%, rgba(var(--nc-gold), .14), transparent 55%),
    rgba(15,23,42,.04);
  border:1px solid rgba(15,23,42,.10);
}
.nc-int-ic i{ font-size:20px; color: rgba(11,15,23,.92); }

.nc-int-kicker{
  font-size:.82rem;
  color: rgba(71,85,105,.95);
  letter-spacing:.02em;
  line-height:1.1;
}
.nc-int-title{
  margin-top:2px;
  font-weight:950;
  color:#0b0f17;
  line-height:1.1;
}
.nc-int-badge{
  margin-left:auto;
  font-size:.78rem;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(15,23,42,.04);
  border:1px solid rgba(15,23,42,.10);
  color: rgba(11,15,23,.78);
}
.nc-int-desc{
  margin:0 0 14px 0;
  color: rgba(71,85,105,.95);
  line-height:1.35;
  min-height:48px;
}
.nc-int-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  text-decoration:none;
  color:#0b0f17;
  font-weight:900;
  background: rgba(15,23,42,.04);
  border:1px solid rgba(15,23,42,.10);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.nc-int-btn:hover{
  transform: translateY(-1px);
  background: rgba(15,23,42,.06);
  border-color: rgba(0,194,255,.25);
}


/* NEW INDEX */
.tabx.is-active {
  border: 1px solid rgba(106, 107, 107, 0.7);
 }

.tabx {
  border: 1px solid rgba(106, 107, 107, 0.7);
  background: rgba(255, 255, 255, .62);
  border-radius: 14px;
  padding: 8px 10px;
  font-weight: 650;
  color: rgba(11, 15, 23, .82);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: none;
  transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}


  /* ===== HERO LIGHT base ===== */
  .nc-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(64px, 7vw, 110px) 0;
  }

  .nc-hero--light {
    background: #f6f8fc;
    color: #0b1020;
  }

  /* ===== FULL WIDTH BG ===== */
  .nc-hero-bg {
    position: absolute;
    inset: 0;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
  }

  /* Aura */
  .nc-hero-aura {
    position: absolute;
    inset: -22%;
    background:
      radial-gradient(560px 460px at var(--ax, 55%) var(--ay, 30%),
        rgba(0, 194, 255, .18) 0%,
        rgba(0, 194, 255, .08) 30%,
        rgba(0, 194, 255, 0) 64%),
      radial-gradient(560px 460px at calc(var(--ax, 55%) + 12%) calc(var(--ay, 30%) + 18%),
        rgba(255, 203, 107, .16) 0%,
        rgba(255, 203, 107, .07) 32%,
        rgba(255, 203, 107, 0) 66%);
    filter: blur(10px);
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  /* ===== TEXTE BIBLE FULL WIDTH ===== */
  .nc-bible {
    position: absolute;
    inset: 0;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(14px, 2.2vw, 42px);
  }

  .nc-bible-ref {
    position: absolute;
    top: clamp(18px, 2vw, 26px);
    left: clamp(14px, 2.2vw, 44px);
    font-weight: 900;
    letter-spacing: .08em;
    font-size: .78rem;
    color: rgba(11, 16, 32, .45);
  }

  .nc-bible-text {
    max-width: none !important;
    width: 100vw;
    padding: 0 clamp(14px, 2.2vw, 44px);
    font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
    font-weight: 750;
    line-height: 1.10;
    font-size: clamp(34px, 4.2vw, 70px);
    color: rgba(11, 16, 32, .12);
    filter: contrast(1.12);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .38);

    -webkit-mask-image: radial-gradient(clamp(420px, 30vw, 820px) clamp(320px, 24vw, 680px) at var(--ax, 55%) var(--ay, 30%),
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, .78) 26%,
        rgba(0, 0, 0, .28) 52%,
        rgba(0, 0, 0, 0) 82%);
    mask-image: radial-gradient(clamp(420px, 30vw, 820px) clamp(320px, 24vw, 680px) at var(--ax, 55%) var(--ay, 30%),
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, .78) 26%,
        rgba(0, 0, 0, .28) 52%,
        rgba(0, 0, 0, 0) 82%);
  }

  /* Vignette */
  .nc-hero-vignette {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(1100px 620px at 50% 35%,
        rgba(246, 248, 252, 0) 0%,
        rgba(246, 248, 252, .38) 56%,
        rgba(246, 248, 252, .88) 100%),
      linear-gradient(180deg,
        rgba(246, 248, 252, .88) 0%,
        rgba(246, 248, 252, .16) 30%,
        rgba(246, 248, 252, .90) 100%);
  }

  /* ===== Title ===== */
  .nc-hero-title {
    margin: 10px 0 10px;
    font-weight: 950;
    letter-spacing: -0.03em;
    line-height: 1.02;
    font-size: clamp(38px, 4.3vw, 66px);
  }

  .nc-hero-title .grad {
    background: linear-gradient(90deg, rgba(0, 194, 255, 1), rgba(0, 126, 255, 1));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  /* Dégradé sur le texte (comme ton .grad) */
  span.nc-count-num.grad {
    background: linear-gradient(90deg, rgba(0, 194, 255, 1), rgba(0, 194, 255, 1));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    /* Safari */
    font-size: 1.2rem;
    font-weight: 800;
  }

  .nc-hero-sub {
    margin: 0 0 18px;
    font-size: 1.05rem;
    color: rgba(11, 16, 32, .70);
  }

  /* ===== Agents pill ===== */
  :root {
    --nc-avatar: 3.1em;
  }

  .nc-hero-pill-agents {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }

  .nc-hero-pill-avatars {
    display: flex;
    align-items: center;
    padding-left: 2px;
  }

  .nc-hero-pill-avatars img {
    width: var(--nc-avatar);
    height: var(--nc-avatar);
    border-radius: 999px;
    object-fit: cover;
    margin-left: -12px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .12), 0 0 0 3px rgba(255, 255, 255, .75);
    filter: saturate(1.02) contrast(1.02);
    background: #fff;
  }

  .nc-hero-pill-avatars img:first-child {
    margin-left: 0;
  }

  /* foreground au-dessus du bg */
  .nc-count-fg {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff !important;
    font-weight: 950;
    white-space: nowrap;
  }

  .nc-count-num {
    font-weight: 1000;
    color: #fff;
  }

  .nc-count-label {
    color: rgb(255, 255, 255) important;
    font-weight: 900;
  }

  /* ===== Proof card ===== */
  .nc-proof-card {
    background: rgb(255 255 255 / 19%);
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 16px;
    padding: 12px 14px;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 0 1px rgba(15, 23, 42, .06), 0 16px 34px rgba(0, 0, 0, .06);
  }

  .nc-proof-k {
    font-weight: 900;
    color: #0f172a;
  }

  .nc-proof-v {
    color: #334155;
  }

  .nc-proof-card hr {
    margin: 10px 0;
    border-color: rgba(15, 23, 42, .10);
  }

  /* ===== Metrics ===== */
  .nc-hero-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    max-width: 520px;
  }

  .nc-hero-metrics .m {
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(11, 16, 32, .10);
    background: rgba(255, 255, 255, .62);
    backdrop-filter: blur(10px);
  }

  .nc-hero-metrics .m strong {
    display: block;
    font-weight: 950;
    font-size: .95rem;
  }

  .nc-hero-metrics .m span {
    display: block;
    margin-top: 2px;
    font-size: .85rem;
    color: rgba(11, 16, 32, .62);
  }

  /* ===== REEL ===== */
  .hero-reel {
    width: min(520px, 100%);
    height: 520px;
    position: relative;
  }

  @media (max-width:992px) {
    .hero-reel {
      height: 420px;
    }
  }

  .reel-card {
    position: absolute;
    width: 240px;
    aspect-ratio: 9/16;
    border-radius: 18px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .18);
    transition: transform .35s ease, box-shadow .35s ease, z-index .35s ease;
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, .92);
  }

  .reel-card video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 18px;
  }

  .reel-card.is-left {
    left: 20%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-6deg) scale(.95);
    z-index: 1;
  }

  .reel-card.is-center {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(0) scale(1);
    z-index: 2;
  }

  .reel-card.is-right {
    left: 80%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(6deg) scale(.95);
    z-index: 1;
  }

  .reel-card.active {
    z-index: 5 !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .22);
  }

  .reel-cap {
    position: absolute;
    left: 10px;
    bottom: 10px;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 900;
    font-size: .82rem;
    color: #fff;
    background: rgba(0, 0, 0, .42);
    backdrop-filter: blur(10px);
  }

  .hero-sound {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 10;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(6, 10, 18, .50);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
  }

  .hero-sound:hover {
    background: rgba(6, 10, 18, .68);
  }

  /* Right card */
  .nc-right-card {
    position: relative;
    background: rgba(255, 255, 255, .90);
    border-radius: 24px;
    padding: 20px;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08), 0 20px 40px rgba(0, 0, 0, 0.08), 0 40px 80px rgba(0, 0, 0, 0.06);
  }

  .nc-right-hint {
    color: #64748b;
    font-size: 13px;
  }

  .demo-stats {
    display: flex;
    gap: 24px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
  }

  .demo-stat {
    flex: 1;
    text-align: center;
  }

  .demo-stat-value {
    font-size: 24px;
    font-weight: 800;
    color: #0f172a;
    display: block;
  }

  .demo-stat-label {
    font-size: 13px;
    color: #64748b;
    margin-top: 4px;
  }

  /* ===== Responsive ===== */
  @media (max-width: 992px) {
    .nc-bible-text {
      font-size: clamp(28px, 6.2vw, 46px);
    }

    .nc-hero-metrics {
      grid-template-columns: 1fr;
      max-width: 360px;
    }
  }

  @media (max-width: 576px) {
    :root {
      --nc-avatar: 2.55em;
    }

    .nc-hero-pill-avatars img {
      margin-left: -10px;
    }

    .nc-hero-pill-count {
      padding: 7px 10px;
      font-size: .86rem;
    }

    .reel-card {
      border-radius: 14px;
    }

    .reel-card video {
      border-radius: 14px;
    }
  }

  /* reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .nc-hero-aura {
      filter: none;
    }

    .nc-bible-text {
      -webkit-mask-image: none;
      mask-image: none;
      color: rgba(11, 16, 32, .12);
    }
  }

   /* ===== GRID ===== */
  .nc-features-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  @media (max-width: 992px) {
    .nc-features-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 576px) {
    .nc-features-grid {
      grid-template-columns: 1fr;
    }
  }

  /* ===== CARD (100% LIGHT) ===== */
  .nc-feature-card {
    position: relative;
    border-radius: 18px;
    padding: 16px 16px 14px;
    overflow: hidden;

    /* ✅ jamais noir */
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(11, 16, 32, .10);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .07);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }

  /* 2e bordure animée : fine, lumineuse, SUBTILE (sur blanc) */
  .nc-feature-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 20px;
    padding: 1px;
    background:
      conic-gradient(from var(--nc-br-a, 0deg),
        rgba(0, 194, 255, 0) 0deg,
        rgba(0, 194, 255, .40) 70deg,
        rgba(255, 203, 107, .30) 140deg,
        rgba(96, 214, 180, .26) 210deg,
        rgba(0, 126, 255, .40) 280deg,
        rgba(0, 194, 255, 0) 360deg);
    opacity: .35;

    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    pointer-events: none;
  }

  /* glow interne très léger (sur BLANC) */
  .nc-feature-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 18px;
    background:
      radial-gradient(520px 240px at 15% 10%, rgba(0, 194, 255, .10), transparent 60%),
      radial-gradient(520px 240px at 85% 90%, rgba(255, 203, 107, .09), transparent 62%);
    opacity: .60;
    pointer-events: none;
  }

  .nc-feature-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .10);
    border-color: rgba(0, 194, 255, .18);
  }

  .nc-feature-card:hover::before {
    opacity: .55;
  }

  /* ===== HEAD ===== */
  .nc-feature-head {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .nc-feature-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;

    background:
      radial-gradient(120% 140% at 20% 25%, rgba(0, 194, 255, .14), transparent 55%),
      radial-gradient(120% 140% at 80% 70%, rgba(255, 203, 107, .12), transparent 60%),
      rgba(255, 255, 255, .86);
    border: 1px solid rgba(11, 16, 32, .10);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .06);
    color: rgba(11, 16, 32, .82);
  }

  .nc-feature-kicker {
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(11, 16, 32, .52);
  }

  .nc-feature-name {
    margin-top: 4px;
    font-size: 1.15rem;
    font-weight: 950;
    letter-spacing: -0.02em;
    color: rgba(11, 16, 32, .92);
  }

  .nc-feature-desc {
    position: relative;
    z-index: 2;
    margin: 0;
    color: rgba(11, 16, 32, .70);
  }

  /* ===== TAGS ===== */
  .nc-tags {
    position: relative;
    z-index: 2;
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .nc-tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 800;
    border: 1px solid rgba(11, 16, 32, .10);
    background: rgba(255, 255, 255, .86);
    color: rgba(11, 16, 32, .72);
  }

  /* ===== VERSE ===== */
  .nc-verse {
    text-align: center;
    max-width: 84ch;
    margin-left: auto;
    margin-right: auto;
    color: rgba(11, 16, 32, .70);
    font-weight: 650;
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .nc-feature-card::before {
      display: none;
    }

    .nc-feature-card {
      transition: none;
    }
  }

  /* ===== FORCE FEATURES EN LIGHT (écrase ton fond noir actuel) ===== */
  #features {
    position: relative;
    background: #f6f8fc !important;
    color: #0b1020 !important;
    overflow: hidden;
  }

  /* petit glow comme ton hero (optionnel mais propre) */
  #features::before {
    content: "";
    position: absolute;
    inset: -20%;
    background:
      radial-gradient(720px 520px at 20% 10%, rgba(0, 194, 255, .14), transparent 60%),
      radial-gradient(720px 520px at 80% 75%, rgba(255, 203, 107, .12), transparent 62%);
    filter: blur(10px);
    opacity: .95;
    pointer-events: none;
  }

  #features::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(1100px 620px at 50% 35%,
        rgba(246, 248, 252, 0) 0%,
        rgba(246, 248, 252, .35) 56%,
        rgba(246, 248, 252, .92) 100%),
      linear-gradient(180deg,
        rgba(246, 248, 252, .88) 0%,
        rgba(246, 248, 252, .14) 30%,
        rgba(246, 248, 252, .92) 100%);
    pointer-events: none;
  }

  #features .container {
    position: relative;
    z-index: 2;
  }

  /* titres & texte */
  #features h2 {
    color: rgba(11, 16, 32, .95) !important;
  }

  #features p {
    color: rgba(11, 16, 32, .70) !important;
  }

  /* =========================
   AGENTS — NanoClip Light (v3)
   Objectif: cercle gris 1px + "lumière bleue" qui tourne (visible)
   ========================= */

.nc-agents{
  position:relative;
  background:#f6f8fc;
  overflow:hidden;
}
.nc-agents::before{
  content:"";
  position:absolute;
  inset:-18%;
  pointer-events:none;
  background:
    radial-gradient(900px 520px at 18% 10%, rgba(0,194,255,.12), transparent 60%),
    radial-gradient(900px 520px at 86% 70%, rgba(255,203,107,.10), transparent 62%);
  filter: blur(10px);
  opacity:.95;
}
.nc-agents::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(1100px 620px at 50% 35%,
      rgba(246,248,252,0) 0%,
      rgba(246,248,252,.35) 56%,
      rgba(246,248,252,.92) 100%),
    linear-gradient(180deg,
      rgba(246,248,252,.88) 0%,
      rgba(246,248,252,.10) 32%,
      rgba(246,248,252,.92) 100%);
}
.nc-agents .container{ position:relative; z-index:2; }

.nc-agents-pill{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.42rem .75rem; border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.75);
  box-shadow: 0 10px 28px rgba(15,23,42,.06);
  color: rgba(15,23,42,.72);
  font-weight: 800; letter-spacing:.02em; font-size:.82rem;
}
.nc-agents-pill .dot{
  width:8px;height:8px;border-radius:999px;
  background: rgba(0,194,255,1);
  box-shadow: 0 0 0 4px rgba(0,194,255,.10);
}
.nc-agents-title{
  margin:.65rem 0 .35rem;
  font-weight:950;
  letter-spacing:-.03em;
  line-height:1.05;
  font-size: clamp(28px, 3.2vw, 44px);
  color: rgba(11,16,32,.95);
}
.nc-agents-sub{
  margin:0 auto;
  max-width: 70ch;
  color: rgba(11,16,32,.70);
}
.nc-agents .grad{
  background: linear-gradient(90deg, rgba(0,194,255,1), rgba(0,126,255,1));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* =========================
   TABS (avatars)
   ========================= */
.nc-agent-tabs{
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
  margin: 18px 0 18px;
  align-items:flex-start; /* no jump */
}
.nc-agent-tab{
  border:0;
  background:transparent;
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  user-select:none;

  position:relative;
  width:66px;
  padding-bottom:64px; /* reserve label */
}
.nc-agent-tab .nc-avatar{
  position:relative;
  width:54px; height:54px;
  border-radius:999px;
  display:grid;
  place-items:center;
}

/* base halo */
.nc-agent-tab .nc-avatar::before{
  content:"";
  position:absolute;
  inset:-7px;
  border-radius:999px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(255,255,255,0) 62%);
  opacity:.55;
  filter: blur(2px);
}

/* avatar image */
.nc-agent-tab img{
  width:54px; height:54px;
  border-radius:999px;
  object-fit:cover;
  background:#fff;
  box-shadow:
    0 0 0 3px rgba(255,255,255,.95),
    0 10px 26px rgba(15,23,42,.12);
  transition: filter .18s ease, transform .18s ease, opacity .18s ease, box-shadow .18s ease;
}

/* =========================
   ORBIT — ring gris fixe + 1 seul “serpent” bleu (tête devant)
   - ring gris 1px via ::before (toujours)
   - segment bleu fin (1px) via background conic (SANS box-shadow global)
   - tête à 100% (devant), queue derrière sur ~1/4 qui s’éteint
   ========================= */

.nc-agent-tab .nc-orbit{
  position:absolute;
  inset:-10px;
  border-radius:999px;
  pointer-events:none;
  opacity:0;

  /* important: pas de border ici (sinon glow/blur dégueule) */
  border:0;
  background:none;

  /* rotation */
  animation:ncOrbit 2.4s linear infinite;

  /* on ne garde qu’un anneau ULTRA fin (≈1px) */
  -webkit-mask: radial-gradient(circle, transparent 67.35%, #000 67.55%);
          mask: radial-gradient(circle, transparent 67.35%, #000 67.55%);

  /* pas de glow global => pas de “traînée fantôme” après la queue */
  filter:none;
}

/* ring gris pâle fixe (1px) */
.nc-agent-tab .nc-orbit::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.16);
}

/* segment lumineux (1 seul) */
.nc-agent-tab .nc-orbit::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;

  /* ✅ segment sur ~25% (75 -> 100)
     queue = faible -> moyen -> fort -> tête max à 100% */
  background: conic-gradient(
    from 0deg,
    rgba(0,194,255,0) 0%,
    rgba(0,194,255,0) 75%,

    rgba(0,194,255,.08) 76%,
    rgba(0,194,255,.14) 78%,
    rgba(0,194,255,.22) 80%,
    rgba(0,194,255,.32) 82%,
    rgba(0,194,255,.46) 85%,
    rgba(0,194,255,.62) 88%,
    rgba(0,194,255,.80) 92%,
    rgba(0,194,255,.92) 96%,

    rgba(0,194,255,1) 100%
  );

  /* finesse + un peu de “spark” sans contaminer tout l’anneau */
  filter: blur(.06px) saturate(1.15);
  opacity:1;
}

@keyframes ncOrbit{ to{ transform: rotate(360deg); } }

/* INACTIVE = agents gris (remis) */
.nc-agent-tab:not(.is-active) img{
  filter: grayscale(1) contrast(.95) brightness(.96);
  opacity:.72;
  transform: translateY(0);
}

/* ACTIVE */
.nc-agent-tab.is-active img{
  filter:none;
  opacity:1;
  transform: translateY(-1px);
  box-shadow:
    0 0 0 3px rgba(255,255,255,.98),
    0 0 0 6px rgba(0,194,255,.12),
    0 18px 38px rgba(15,23,42,.16);
}
.nc-agent-tab.is-active .nc-orbit{ opacity:1; }
.nc-agent-tab.is-active .nc-avatar::before{ opacity:.75; }

/* =========================
   Label (only active, but no layout shift)
   ========================= */
.nc-active-meta{
  position:absolute;
  left:50%;
  bottom:0;
  transform: translateX(-50%);
  margin:0;

  display:block;
  padding: 8px 12px;
  border-radius: 14px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.80);
  box-shadow: 0 14px 30px rgba(15,23,42,.10);
  text-align:center;
  line-height:1.05;
  min-width: 140px;

  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.nc-agent-tab.is-active .nc-active-meta{
  opacity:1;
  visibility:visible;
}
.nc-active-role{
  display:block;
  font-weight:950;
  font-size:.90rem;
  color: rgba(0,126,255,.98);
  letter-spacing:-.01em;
}
.nc-active-name{
  display:block;
  margin-top:4px;
  font-weight:950;
  font-size:1.04rem;
  color: rgba(11,16,32,.92);
  letter-spacing:-.02em;
}

.nc-agent-tab.is-soon{
  opacity:.75;
  cursor:not-allowed;
}
.nc-agent-tab.is-soon .nc-active-meta{ display:none !important; }

/* =========================
   CARD
   ========================= */
.nc-agent-card{
  --agent-bg: rgba(215, 244, 255, .55);
  position: relative;
  border-radius: 22px;
  border: 1px solid rgba(15,23,42,.10);
  background:
    radial-gradient(1200px 620px at 12% 15%, rgba(255,255,255,.75), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.70));
  box-shadow: 0 22px 60px rgba(15,23,42,.10);
  overflow:hidden;
}
.nc-agent-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 18% 20%, var(--agent-bg), transparent 60%),
    radial-gradient(900px 520px at 82% 70%, rgba(255,203,107,.10), transparent 62%);
  opacity:.95;
  pointer-events:none;
}

.nc-agent-card-inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns: 360px 1fr;
  gap: 18px;
  align-items: stretch;
  padding: clamp(16px, 2vw, 22px);
}

/* LEFT */
.nc-agent-left{
  position:relative;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.10);
  background:
    radial-gradient(120% 140% at 20% 20%, rgba(255,255,255,.80), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.60), rgba(255,255,255,.35));
  box-shadow: 0 16px 44px rgba(15,23,42,.08);
  overflow:hidden;
  min-height: 360px;
}
.nc-left-bible{
  position:absolute;
  inset: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:left;
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.05;
  font-size: clamp(22px, 1.8vw, 34px);
  color: rgba(11,16,32,.12);
  white-space: pre-line;
  pointer-events:none;
  padding: 10px 6px;
  -webkit-mask-image: radial-gradient(420px 360px at 52% 50%,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,.70) 34%,
    rgba(0,0,0,.18) 60%,
    rgba(0,0,0,0) 86%);
  mask-image: radial-gradient(320px 260px at 52% 50%,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,.70) 34%,
    rgba(0,0,0,.18) 60%,
    rgba(0,0,0,0) 86%);
}
.nc-agent-visual{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding: 18px 14px 10px;
}
.nc-agent-visual img{
  width: min(320px, 92%);
  height:auto;
  transform: translateY(8px);
  filter: saturate(1.02) contrast(1.02);
}

/* RIGHT */
.nc-agent-content{
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.74);
  box-shadow: 0 16px 44px rgba(15,23,42,.08);
  padding: 18px 18px 16px;
  display:flex;
  flex-direction:column;
}
.nc-agent-kicker{
  font-weight: 950;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: .74rem;
  color: rgba(15,23,42,.55);
}
.nc-agent-h{
  margin: 6px 0 6px;
  font-weight: 950;
  letter-spacing: -.02em;
  color: rgba(11,16,32,.95);
}
.nc-agent-desc{
  margin: 0 0 10px;
  color: rgba(11,16,32,.72);
  max-width: 72ch;
}

.nc-agent-chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin: 8px 0 14px;
}
.nc-agent-chips .chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.86);
  color: rgba(15,23,42,.78);
  font-weight: 900;
  font-size: .95rem;
}
.nc-agent-chips .chip i{ color: rgba(0,126,255,.95); }

/* Buttons */
.nc-agent-cta{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  margin-top: 4px;
}
.nc-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 950;
  letter-spacing: -.01em;
  text-decoration:none;
  border: 1px solid rgba(15,23,42,.10);
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease, background .14s ease, border-color .14s ease;
  white-space:nowrap;
}
.nc-btn i{ font-size: 1.05em; }

.nc-btn-soft{
  background: rgba(255,255,255,.88);
  color: rgba(11,16,32,.90);
  box-shadow: 0 12px 26px rgba(15,23,42,.08);
}
.nc-btn-soft:hover{
  transform: translateY(-1px);
  border-color: rgba(0,194,255,.24);
  box-shadow: 0 16px 34px rgba(15,23,42,.10);
}

.nc-btn-primary{
  border:0;
  color:#fff;
  background: linear-gradient(90deg, rgba(0,194,255,1), rgba(0,126,255,1));
  box-shadow: 0 16px 34px rgba(0,126,255,.18);
}
.nc-btn-primary:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
  box-shadow: 0 20px 44px rgba(0,126,255,.22);
}
.nc-btn-primary:disabled{
  opacity:.65;
  transform:none !important;
  box-shadow:none !important;
  cursor:not-allowed;
}

/* Scenario block */
.nc-agent-scenario{
  margin-top: 12px;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.78);
  box-shadow: 0 12px 34px rgba(15,23,42,.06);
  position: relative;
  overflow: hidden;
}
.nc-agent-scenario::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(520px 280px at 20% 20%, var(--agent-bg, rgba(0,194,255,.18)), transparent 60%);
  opacity: .55;
  pointer-events:none;
  filter: blur(10px);
}
.nc-agent-scenario .ttl{
  position:relative;
  z-index:1;
  font-weight: 950;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: .74rem;
  color: rgba(15,23,42,.62);
  margin-bottom: 6px;
}
.nc-agent-scenario .q{
  position:relative;
  z-index:1;
  font-weight: 950;
  letter-spacing: -.015em;
  line-height: 1.15;
  font-size: 1.02rem;
  color: rgba(11,16,32,.92);
  background: rgba(15,23,42,.03);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 14px;
  padding: 10px 12px;
}
.nc-agent-scenario .q::before{
  content:"“";
  margin-right: 6px;
  color: rgba(0,194,255,.95);
}

.nc-agent-foot{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-top: 14px;
  border-top: 1px solid rgba(15,23,42,.10);
  color: rgba(15,23,42,.62);
  font-size: .92rem;
  flex-wrap:wrap;
}
.badge-note{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.86);
  color: rgba(15,23,42,.78);
  font-weight: 900;
}
.muted-note{ color: rgba(15,23,42,.55); }

/* Responsive */
@media (max-width: 991.98px){
  .nc-agent-card-inner{ grid-template-columns: 1fr; }
  .nc-agent-left{ min-height: 320px; }
  .nc-left-bible{
    font-size: clamp(20px, 4.8vw, 30px);
    -webkit-mask-image: radial-gradient(360px 260px at 52% 44%,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,.66) 34%,
      rgba(0,0,0,.14) 60%,
      rgba(0,0,0,0) 86%);
    mask-image: radial-gradient(360px 260px at 52% 44%,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,.66) 34%,
      rgba(0,0,0,.14) 60%,
      rgba(0,0,0,0) 86%);
  }
  .nc-active-meta{ min-width: 132px; }
}
@media (max-width: 576px){
  .nc-agent-tab{ width: 60px; padding-bottom: 58px; }
  .nc-active-meta{ min-width: 128px; }
}
@media (prefers-reduced-motion: reduce){
  .nc-agent-tab img{ transition:none; }
  .nc-orbit{ animation:none; }
  .nc-btn{ transition:none; }
}

  /* =======================================================
   INTEGRATIONS — LIGHT (NanoClip)
   Section: .nc-integrations / .nc-int-*
   ======================================================= */

  .nc-integrations {
    position: relative;
    background: transparent;
  }

  section#integrations {
    border: 1px solid var(--line);
    position: relative;
    overflow: hidden;
    /*box-shadow: 0 22px 80px rgba(15, 23, 42, .10);*/
  }


  /* grid */
  .nc-int-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }

  @media (max-width: 991.98px) {
    .nc-int-grid {
      grid-template-columns: 1fr;
    }
  }

  /* card */
  .nc-int-card {
    position: relative;
    border-radius: 18px;
    padding: 18px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .86));
    border: 1px solid rgba(15, 23, 42, .10);
    box-shadow:
      0 18px 55px rgba(15, 23, 42, .08),
      inset 0 1px 0 rgba(255, 255, 255, .65);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }

  /* liseré bas très fin */
  .nc-int-card::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 10px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg,
        rgba(var(--nc-cyan), 0),
        rgba(var(--nc-cyan), .22),
        rgba(var(--nc-gold), .18),
        rgba(var(--nc-cyan), 0));
    opacity: .55;
    pointer-events: none;
  }

  /* hover premium */
  .nc-int-card:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--nc-cyan), .38);
    box-shadow:
      0 0 0 1px rgba(var(--nc-cyan), .18),
      0 22px 70px rgba(15, 23, 42, .12);
  }

  /* top row */
  .nc-int-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
  }

  /* icone */
  .nc-int-ic {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
      radial-gradient(90% 110% at 20% 15%, rgba(var(--nc-cyan), .22), transparent 55%),
      radial-gradient(90% 110% at 80% 75%, rgba(var(--nc-gold), .18), transparent 55%),
      rgba(255, 255, 255, .78);
    border: 1px solid rgba(15, 23, 42, .10);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .70),
      0 10px 24px rgba(15, 23, 42, .08);
  }

  .nc-int-ic i {
    font-size: 20px;
    color: rgba(15, 23, 42, .90);
  }

  /* meta */
  .nc-int-kicker {
    font-size: .82rem;
    color: rgba(15, 23, 42, .55);
    letter-spacing: .02em;
    line-height: 1.1;
  }

  .nc-int-title {
    margin-top: 2px;
    font-weight: 950;
    color: rgba(15, 23, 42, .95);
    line-height: 1.1;
  }

  /* badge (Bientôt / En cours) */
  .nc-int-badge {
    margin-left: auto;
    font-size: .78rem;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .05);
    border: 1px solid rgba(15, 23, 42, .10);
    color: rgba(15, 23, 42, .70);
    font-weight: 800;
    white-space: nowrap;
  }

  /* description */
  .nc-int-desc {
    margin: 0 0 14px 0;
    color: rgba(15, 23, 42, .70);
    line-height: 1.35;
    min-height: 48px;
  }

  /* bouton details */
  .nc-int-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    text-decoration: none;
    color: rgba(15, 23, 42, .92);
    font-weight: 900;
    background: rgba(255, 255, 255, .70);
    border: 1px solid rgba(15, 23, 42, .12);
    box-shadow: 0 10px 22px rgba(15, 23, 42, .06);
    transition: transform .15s ease, background .15s ease, border-color .15s ease;
  }

  .nc-int-btn:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, .92);
    border-color: rgba(var(--nc-cyan), .32);
  }

  /* petit hover “glow” sur bouton */
  .nc-int-btn i {
    opacity: .85;
  }

  /* CTA "Voir toutes les intégrations" (si tu gardes btn-ghost) */
  .nc-integrations .btn.btn-ghost {
    background: rgba(255, 255, 255, .60);
    border: 1px solid rgba(15, 23, 42, .12);
    color: rgba(15, 23, 42, .95);
    backdrop-filter: blur(10px);
  }

  .nc-integrations .btn.btn-ghost:hover {
    background: rgba(255, 255, 255, .85);
    border-color: rgba(var(--nc-cyan), .28);
  }

  /* =======================================================
   TESTIMONIALS — LIGHT (NanoClip) — 0 fond noir garanti
   ======================================================= */

#testimonials.nc-testimonials{
  position: relative;
  overflow: hidden;
  background: #f6f8fc !important; /* <- force light (corrige ton fond noir actuel) */
  color: rgba(15,23,42,.92);
}

/* Glow de section (même signature que ton hero, mais soft) */
#testimonials.nc-testimonials::before{
  content:"";
  position:absolute;
  inset:-22% -10% -22% -10%;
  pointer-events:none;
  background:
    radial-gradient(820px 520px at 18% 18%, rgba(0,194,255,.14), transparent 62%),
    radial-gradient(820px 520px at 86% 75%, rgba(255,203,107,.12), transparent 64%);
  filter: blur(10px);
  opacity: .95;
}

/* Vignette ultra légère pour “premium” (évite le blanc plat) */
#testimonials.nc-testimonials::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(1100px 620px at 50% 35%,
      rgba(246,248,252,0) 0%,
      rgba(246,248,252,.34) 56%,
      rgba(246,248,252,.92) 100%),
    linear-gradient(180deg,
      rgba(246,248,252,.92) 0%,
      rgba(246,248,252,.18) 30%,
      rgba(246,248,252,.94) 100%);
  opacity: .95;
}

#testimonials .container{ position: relative; z-index: 2; }

/* kicker */
#testimonials .nc-kicker{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.42rem .75rem;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.75);
  box-shadow: 0 10px 28px rgba(15,23,42,.06);
  color: rgba(15,23,42,.72);
  font-weight: 800;
  letter-spacing:.02em;
  font-size:.82rem;
}
#testimonials .nc-kicker .dot{
  width:8px;height:8px;border-radius:999px;
  background: radial-gradient(circle at 30% 30%, rgba(0,194,255,.95), rgba(255,203,107,.88));
  box-shadow: 0 0 0 4px rgba(0,194,255,.08);
}

/* badge header */
#testimonials .t-badge{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.42rem .75rem;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.70);
  color: rgba(15,23,42,.90);
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
}

/* flèches */
#testimonials .btn.btn-ghost{
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(15,23,42,.12);
  color: rgba(15,23,42,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
#testimonials .btn.btn-ghost:hover{
  background: rgba(255,255,255,.92);
  border-color: rgba(0,194,255,.30);
}

/* viewport */
#testimonials .ts-viewport{
  border-radius: 20px;
  overflow: hidden;
}

/* track */
#testimonials .ts-track{
  display:flex;
  flex-wrap:nowrap;
  gap: 18px;
  transition: transform .32s cubic-bezier(.2,.9,.2,1);
  will-change: transform;
  padding: 2px; /* évite clip ombres */
}

/* items */
#testimonials .ts-item{ flex:0 0 100%; max-width:100%; }
@media (min-width: 992px){
  #testimonials .ts-item{ flex:0 0 calc(50% - 9px); max-width: calc(50% - 9px); }
}

/* card premium */
#testimonials .t-card{
  position: relative;
  min-height: 320px;
  border-radius: 20px;
  padding: 18px 18px 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.86)) !important;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow:
    0 18px 55px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.70);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow: hidden;
}
#testimonials .t-card:hover{
  transform: translateY(-2px);
  border-color: rgba(0,194,255,.34);
  box-shadow:
    0 0 0 1px rgba(0,194,255,.14),
    0 22px 70px rgba(15,23,42,.12);
}

/* micro glow interne (propre) */
#testimonials .t-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(520px 220px at 18% 12%, rgba(0,194,255,.10), transparent 60%),
    radial-gradient(520px 220px at 82% 86%, rgba(255,203,107,.09), transparent 62%);
  opacity: .55;
  pointer-events:none;
}
/*#testimonials .t-card::after{
  content:"";
  position:absolute;
  left: 16px; right: 16px; bottom: 12px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(0,194,255,0),
    rgba(0,194,255,.22),
    rgba(255,203,107,.18),
    rgba(0,194,255,0)
  );
  opacity:.55;
  pointer-events:none;
}*/

/* CTA card (col gauche) */
#testimonials .t-card--cta{
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.86)) !important;
}
#testimonials .t-cta-hint{
  font-size: .85rem;
  color: rgba(15,23,42,.62);
  text-align:center;
}

/* étoiles */
#testimonials .t-stars{
  display:inline-flex;
  gap: 3px;
  align-items:center;
  margin-bottom: 10px;
  font-size: .95rem;
  color: #ffc94f;
  letter-spacing: .06rem;
}

/* quote */
#testimonials .t-quote{
  position: relative;
  z-index: 2;
  font-style: italic;
  color: rgba(15,23,42,.82);
  line-height: 1.6;
  margin: 0;
}

/* user row */
#testimonials .t-user{
  position: relative;
  z-index: 2;
  display:flex;
  align-items:center;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(15,23,42,.08);
}
#testimonials .t-avatar{
  width: 48px; height: 48px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.95),
    0 0 0 3px rgba(0,194,255,.55);
}
#testimonials .t-name{
  font-weight: 950;
  line-height: 1.2;
  color: rgba(15,23,42,.92);
}
#testimonials .t-role{
  color: rgba(15,23,42,.62);
  font-size: .95rem;
  line-height: 1.2;
}

/* chip */
#testimonials .t-chip{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.35rem .6rem;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.70);
  color: rgba(15,23,42,.78);
  font-weight: 900;
  font-size: .82rem;
  white-space: nowrap;
}

/* dots */
#testimonials .t-dots .dot{
  width: 8px; height: 8px; border-radius: 999px;
  background: rgba(15,23,42,.20);
  box-shadow: 0 6px 16px rgba(15,23,42,.10);
  transition: transform .18s ease, background .18s ease, width .18s ease;
}
#testimonials .t-dots .dot.is-active{
  background: rgba(0,194,255,.65);
  width: 18px;
}

/* mobile polish */
@media (max-width: 575.98px){
  #testimonials .t-card{ min-height: 300px; }
}

  /* ==========================================================
   FAQ — LIGHT (align Hero) — clean, premium, readable
   ========================================================== */

  .nc-faq {
    position: relative;
    /*background:
      radial-gradient(900px 520px at 15% 0%, rgba(0, 194, 255, .10), transparent 55%),
      radial-gradient(900px 520px at 90% 65%, rgba(255, 203, 107, .10), transparent 55%),
      linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(245, 247, 251, .92));*/
  }

  .nc-faq .nc-faq-kicker {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .42rem .75rem;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, .10);
    background: rgba(255, 255, 255, .75);
    box-shadow: 0 10px 28px rgba(15, 23, 42, .06);
    color: rgba(15, 23, 42, .72);
    font-weight: 800;
    letter-spacing: .02em;
    font-size: .82rem;
  }

  .nc-faq .nc-faq-kicker .dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 30%, rgba(0, 194, 255, .95), rgba(255, 203, 107, .85));
    box-shadow: 0 0 0 4px rgba(0, 194, 255, .08);
  }

  .nc-faq .nc-faq-wrap {
    position: relative;
  }

  /* Accordion container */
  .nc-faq-acc {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* Accordion item */
  .nc-faq-acc .accordion-item {
    border: 1px solid rgba(15, 23, 42, .10);
    background: rgba(255, 255, 255, .80);
    border-radius: 18px;
    overflow: hidden;
    box-shadow:
      0 18px 50px rgba(15, 23, 42, .08),
      inset 0 1px 0 rgba(255, 255, 255, .70);
  }

  /* Remove bootstrap defaults that fight */
  .nc-faq-acc .accordion-item+.accordion-item {
    border-top: 1px solid rgba(15, 23, 42, .10);
  }

  .nc-faq-acc .accordion-button {
    padding: 16px 18px;
    background: transparent !important;
    color: rgba(11, 15, 23, .92);
    font-weight: 900;
    border: 0;
    box-shadow: none !important;
    gap: 12px;
  }

  .nc-faq-acc .accordion-button:focus {
    box-shadow: none !important;
  }

  .nc-faq-acc .accordion-button:hover {
    background: linear-gradient(180deg, rgba(0, 194, 255, .06), rgba(255, 255, 255, 0)) !important;
  }

  /* Left icon */
  .nc-faq-acc .q-ic {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;

    background:
      radial-gradient(120% 140% at 20% 25%, rgba(0, 194, 255, .16), transparent 55%),
      radial-gradient(120% 140% at 80% 70%, rgba(255, 203, 107, .14), transparent 60%),
      rgba(15, 23, 42, .04);
    border: 1px solid rgba(15, 23, 42, .08);
    color: rgba(15, 23, 42, .72);
  }

  .nc-faq-acc .q-ic i {
    font-size: 1.05rem;
  }

  /* Title */
  .nc-faq-acc .q-txt {
    flex: 1 1 auto;
    line-height: 1.25;
  }

  /* Custom + / x indicator (no Bootstrap chevron) */
  .nc-faq-acc .accordion-button::after {
    display: none !important;
  }

  .nc-faq-acc .q-plus {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, .10);
    background: rgba(255, 255, 255, .70);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
    flex: 0 0 30px;
    position: relative;
  }

  .nc-faq-acc .q-plus::before,
  .nc-faq-acc .q-plus::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 2px;
    background: rgba(15, 23, 42, .60);
    transform: translate(-50%, -50%);
    border-radius: 99px;
  }

  .nc-faq-acc .q-plus::after {
    width: 2px;
    height: 12px;
  }

  /* Open state */
  .nc-faq-acc .accordion-button:not(.collapsed) .q-plus {
    background:
      radial-gradient(120% 140% at 20% 25%, rgba(0, 194, 255, .18), transparent 55%),
      radial-gradient(120% 140% at 80% 70%, rgba(255, 203, 107, .16), transparent 60%),
      rgba(255, 255, 255, .85);
    border-color: rgba(0, 194, 255, .18);
  }

  .nc-faq-acc .accordion-button:not(.collapsed) .q-plus::after {
    opacity: 0;
    /* plus -> minus */
  }

  .nc-faq-acc .accordion-button:not(.collapsed) {
    background: linear-gradient(180deg, rgba(0, 194, 255, .08), rgba(255, 255, 255, 0)) !important;
  }

  /* Body */
  .nc-faq-acc .accordion-body {
    padding: 0 18px 16px 64px;
    /* align under text (icon width + gap) */
    color: rgba(15, 23, 42, .75);
    line-height: 1.55;
  }

  /* Divider feel */
  .nc-faq-acc .accordion-collapse {
    border-top: 1px solid rgba(15, 23, 42, .08);
  }

  /* Callout */
  .nc-faq-callout {
    border-radius: 22px;
    border: 1px solid rgba(15, 23, 42, .10);
    background:
      radial-gradient(900px 520px at 15% 0%, rgba(0, 194, 255, .12), transparent 55%),
      radial-gradient(900px 520px at 90% 65%, rgba(255, 203, 107, .12), transparent 55%),
      rgba(255, 255, 255, .85);
    box-shadow: 0 22px 60px rgba(15, 23, 42, .10);
    overflow: hidden;
  }

  .nc-faq-callout-inner {
    padding: 18px 18px;
    text-align: center;
  }

  .nc-faq-callout-title {
    font-weight: 900;
    color: rgba(11, 15, 23, .92);
    margin-bottom: 6px;
  }

  .nc-faq-callout-sub {
    color: rgba(15, 23, 42, .72);
  }

  .nc-faq-callout .faq-cta-link {
    font-weight: 900;
    text-decoration: none;
    background: linear-gradient(90deg, rgba(0, 194, 255, 1), rgba(0, 194, 255, 1));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    border-bottom: 1px dashed rgba(0, 194, 255, .35);
  }

  .nc-faq-callout .faq-cta-link:hover {
    border-bottom-color: rgba(255, 203, 107, .55);
  }

  /* Responsive */
  @media (max-width: 575.98px) {
    .nc-faq-acc .accordion-button {
      padding: 14px 14px;
    }

    .nc-faq-acc .accordion-body {
      padding: 0 14px 14px 56px;
    }

    .nc-faq-acc .q-ic {
      width: 30px;
      height: 30px;
      border-radius: 11px;
      flex-basis: 30px;
    }
  }

  /* RAJOUT pour index integrations */ 
  /* ===== Integrations icons (PNG) ===== */
.nc-int-ic{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
  overflow:hidden;
}

.nc-int-ic img{
    width: 42px;
    height: 42px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .10));
    border-radius: 14px;
}

/* fallback bootstrap icon, gardé au cas où */
.nc-int-ic i{
  font-size: 18px;
}