/* ==========================================================================
   NanoClip.fr — Styles globaux (dark par défaut)
   ========================================================================== */

/* Si tu ajoutes Inter localement (assets/fonts/Inter/*), active @font-face ici.
@font-face{
  font-family: 'Inter';
  src: url('../fonts/Inter-VariableFont_slnt,wght.ttf') format('truetype');
  font-display: swap;
}
*/

:root{
  --ink:#0b0f17;
  --ink-2:#121826;
  --panel:#0e1422;
  --text:#ffffff;
  --muted:#b4bdd1;
  --brand:#00c2ff;
  --brand-2:#ffcb6b;
  --grad: linear-gradient(90deg, #00c2ff, #ffcb6b);

  --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);
}

html[data-theme="light"]{
  --ink:#f7fafc;
  --ink-2:#ffffff;
  --panel:#ffffff;
  --text:#0b0f17;
  --muted:#505b72;
  --border: rgba(0,0,0,.08);
  --border-soft: rgba(0,0,0,.06);
  --shadow-lg: 0 20px 60px rgba(0,0,0,.12);
  --shadow-md: 0 10px 30px rgba(0,0,0,.12);
}

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;
}

/* Liens, focus, accessibilité */
a{ color: inherit; text-decoration: none; }
a:hover{ opacity:.9; }
:focus-visible{
  box-shadow: var(--ring);
  transition: box-shadow .15s ease;
}
::selection{ background: rgba(0,194,255,.28); color:#fff; }

/* Scrollbar (WebKit) */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.18); border-radius: 999px; }
html[data-theme="light"] *::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.18); }

/* Particules en fond */
.sf-particles{
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .26;
}

/* ------------------------------------------
   Navbar
------------------------------------------- */
.navbar{
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,0));
}
.navbar .nav-link{ color: var(--muted); }
.navbar .nav-link:hover{ color:#fff; }
.sf-logo{ font-weight: 800; letter-spacing:.2px; }
.grad{ background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Boutons */
.grad-btn{
  background-image: var(--grad);
  border: none;
  color:#0b0f17;
}
.grad-btn:hover{ filter: brightness(1.05); }
.btn-outline-light{ border-color: var(--border) !important; }
.btn-outline-light:hover{ background: rgba(255,255,255,.08); }

/* ------------------------------------------
   Hero
------------------------------------------- */
.hero{
  position: relative;
  min-height: 92vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-top: 80px;
  z-index:1;
}
.hero-page{
  position: relative;
  min-height: 92vh;
  display: grid;
  place-items: center;
  text-align: left;
  padding-top: 80px;
  z-index:1;
}
.fw-800{ font-weight:800; }
.fw-600{ font-weight:600; }
.text-muted{ color: var(--muted) !important; }

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

.sf-card{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  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(255,255,255,.18);
}
.icon-wrap{
  width: 44px; height: 44px; display:grid; place-items:center;
  border-radius: 10px; background: rgba(255,255,255,.06); margin-bottom: 10px;
  font-size: 20px; color:#fff;
}
.verse {
  font-style: italic;
  color: #a9bdd6;
  font-size: .95rem
}

/* ------------------------------------------
   DEMO — Player “device”, overlay, controls
------------------------------------------- */
.sf-seg .btn{
  --bs-btn-padding-y: .42rem; --bs-btn-padding-x: .95rem;
  border-radius: 999px;
}
.sf-seg .btn + .btn{ margin-left: .25rem; }

/* Cadre “device” (piloté par #demoWrap) */
.sf-device{
  position: relative;
  background: #000;
  border-radius: 18px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9; /* défaut */
  transition: aspect-ratio .25s ease, box-shadow .2s ease, border-color .2s ease;
  width: 100%;
  max-width: 960px;
  margin-inline: auto;
}

/* Formats via wrapper */
.demo-wrap.is-169 .sf-device{ aspect-ratio: 16 / 9;  max-width: 800px; } /* Large */
.demo-wrap.is-1x1 .sf-device{ aspect-ratio: 1 / 1;   max-width: 500px; } /* Intermédiaire */
.demo-wrap.is-916 .sf-device{ aspect-ratio: 9 / 16;  max-width: 450px; } /* Étroit */

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

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

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

/* Skeleton (chargement) */
.sf-skel{ position:absolute; inset:0; background: #0c0c0c; z-index:1; }
.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;
}
@keyframes skel{ from{ transform: translateX(-100%);} to{transform: translateX(100%);} }

/* Contrôles “light” */
.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,.65), rgba(0,0,0,0));
  z-index:2;
}
.sf-ctl{
  display:inline-grid; place-items:center;
  width:36px; height:36px;
  border-radius:10px; border:1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.04);
  color:#fff;
  transition: background .15s ease, transform .12s ease;
}
.sf-ctl:hover{ background: rgba(255,255,255,.08); transform: translateY(-1px); }
.sf-ctl.active{ outline: 2px solid #00c2ff; }
#ctlSeek{ height: 6px; accent-color:#00c2ff; }

/* Thumbnails colonne droite */
.sf-thumbs{ display:grid; gap:.8rem; }
.sf-thumb{
  position:relative; display:block; width:100%;
  background: var(--panel); border:1px solid var(--border);
  border-radius:14px; overflow:hidden; text-align:left;
  transition: border-color .15s ease, transform .15s ease;
}
.sf-thumb:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.18); }
.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; }

.btn-check+.btn:hover {
    --padY: .55rem;
    --padX: 1rem;
    padding: var(--padY) var(--padX);
    border: 1px solid var(--border);
    background: #1c222f;
    color: #cfe9f5;
    font-weight: 600;
}

/* logo sur images et videos */
/* Logo affiché en permanence sur chaque bloc */
.feature-card .nc-logo-mark {position: absolute;top: 10px;right: 10px;z-index: 3;width: 42px; height: 42px;object-fit: contain;opacity: 1; pointer-events: none; }
.sf-device {position: relative; /* normalement déjà le cas, mais on sécurise */}
.sf-device .nc-logo-mark {position: absolute;top: 10px;right: 10px;z-index: 5;width: 42px;height: 42px;object-fit: contain;pointer-events: none; /* ne bloque pas les clics sur la vidéo */opacity: 0.9;}


/* ------------------------------------------
   Modal “Générer une vidéo” (mock)
------------------------------------------- */
.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: invert(1); }

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

/* ------------------------------------------
   FAQ (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,.25), rgba(255,203,107,.25));
}
.accordion-button:focus{ box-shadow: var(--ring); }

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

/* ------------------------------------------
   Utilities
------------------------------------------- */
.kbd, kbd{
  background:#111827; color:#e5e7eb; padding:.18rem .38rem; border-radius:6px;
  border:1px solid rgba(255,255,255,.12); font-size:.9em;
}
.badge.bg-dark-subtle{ background: rgba(255,255,255,.08) !important; color: #cbd5e1 !important; }
.small, .text-small{ font-size:.94rem; }

/* ------------------------------------------
   Responsive
------------------------------------------- */
@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; }
}

/* ------------------------------------------
   Réduction de mouvements (A11Y)
------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}


/* ---- Patches lisibilité + Hero + Démo ---- */

/* Bouton "contraste" qui marche en clair/sombre */
.btn-contrast{
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border);
}
.btn-contrast:hover{ background: rgba(255,255,255,.08); }

/* Texte subtil lisible dans les 2 thèmes */
.hero-subtle, .muted-balance, .hero-note{ color: var(--muted) !important; }
html[data-theme="light"] .hero-note{ color: #475569 !important; }

/* Effet glow Hero (dégradé animé) */
.hero .hero-glow{
  position:absolute; inset:-20% -10% auto -10%;
  height: 70%;
  background: radial-gradient(60% 50% at 50% 50%, rgba(0,194,255,.25), rgba(255,203,107,.18) 45%, rgba(0,0,0,0) 70%);
  filter: blur(40px);
  animation: heroPulse 6s ease-in-out infinite alternate;
  pointer-events:none; z-index:0;
}
@keyframes heroPulse{
  from{ transform: translateY(-10px) scale(1); opacity:.9; }
  to{ transform: translateY(10px) scale(1.04); opacity:1; }
}

/* Navbar liens lisibles dans les 2 thèmes */
.navbar .nav-link{ color: var(--muted); }
.navbar .nav-link:hover{ color: #fff; }
html[data-theme="light"] .navbar .nav-link:hover{ color: #0b0f17; }

/* Démo: boutons de segment actifs visibles */
.seg-btn.active{
  color:#0b0f17;
  background-image: var(--grad);
  border: none !important;
}
html[data-theme="light"] .seg-btn{ color:#0b0f17; border-color: rgba(0,0,0,.2) !important; }
html[data-theme="light"] .seg-btn.active{ color:#0b0f17; }

/* Device: force un fond en light aussi */
html[data-theme="light"] .sf-device{ border-color: rgba(0,0,0,.12); }


/* ===== Features Grid (look screenshot + light/dark OK) ===== */
.features-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr); /* 3 colonnes sur desktop */
  gap: 1.2rem;
}

@media (max-width: 991.98px){
  .features-grid{
    grid-template-columns: repeat(2, 1fr); /* 2 colonnes tablette */
  }
}

@media (max-width: 575.98px){
  .features-grid{
    grid-template-columns: 1fr; /* 1 colonne mobile */
  }
}

.feature-card{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.15rem;
  box-shadow: var(--shadow-md);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
html[data-theme="light"] .feature-card{ background:#fff; }

.feature-card:hover,
.feature-card:focus-within{
  transform: translateY(-2px);
  border-color: rgba(0,194,255,.75); /* cyan visible */
  box-shadow:
    0 0 0 1px rgba(0,194,255,.35),
    0 14px 44px rgba(0,194,255,.08),
    var(--shadow-lg);
}


/* Icone : état par défaut = contour cyan + icône cyan */
.feature-icon{
  width: 52px; height: 52px;
  display:grid; place-items:center;
  border-radius: 12px;
  background: transparent;
  border: 1px solid rgba(0,194,255,.45);
  margin-bottom: .85rem;
  color: var(--brand); /* stroke currentColor */
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.feature-icon svg{ color: currentColor; } /* lucide utilise stroke=currentColor */

.feature-card:hover .feature-icon,
.feature-card:focus-within .feature-icon{
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;                 /* icône blanche sur fond cyan */
  transform: translateY(-1px);
}

/* Titres & descriptions (contraste stable) */
.feature-title{
  font-weight: 700;
  margin: .15rem 0 .25rem;
  color: var(--text);
}
.feature-description{
  color: var(--muted);
  margin: 0;
  line-height: 1.55;
}

/* Fine-tuning light mode pour garder le même rendu que le dark */
html[data-theme="light"] .feature-description{ color:#505b72; }
html[data-theme="light"] .feature-card:hover .feature-title{ color:#0b0f17; }

/* Option : léger halo interne (quasi invisible par défaut) */
.feature-card::after{
  content:"";
  position:absolute; inset:auto 0 0 0; height:2px;
  background: linear-gradient(90deg, rgba(0,194,255,.0), rgba(0,194,255,.25), rgba(255,203,107,.2), rgba(0,194,255,.0));
  opacity:.25; border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius);
  pointer-events:none;
}

/* ===== HERO (look screenshot) ===== */
.hero,{
  min-height: 92vh;
  padding-top: 96px;
  display:grid; place-items:center;
  text-align:center;
}
.hero-glow{
  position:absolute; inset:-10% -10% auto -10%;
  height:70%;
  background: radial-gradient(60% 50% at 50% 50%, rgba(0,194,255,.22), rgba(255,203,107,.18) 45%, rgba(0,0,0,0) 70%);
  filter: blur(42px); pointer-events:none; animation: heroPulse 6s ease-in-out infinite alternate;
}
.hero-page-glow{
  position:absolute; inset:-10% -10% auto -10%;
  height:70%;
  background: radial-gradient(60% 50% at 50% 50%, rgba(0,194,255,.22), rgba(255,203,107,.18) 45%, rgba(0,0,0,0) 70%);
  filter: blur(42px); pointer-events:none; animation: heroPulse 6s ease-in-out infinite alternate;
}
@keyframes heroPulse{ from{ transform:translateY(-8px) scale(1);} to{ transform:translateY(8px) scale(1.03);} }

.hero-pill{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.45rem .8rem; border-radius:999px;
  border:1px solid rgba(0,194,255,.35);
  color:#8bdcff; background: rgba(0,194,255,.08);
  font-weight:600; font-size:.92rem;
}
html[data-theme="light"] .hero-pill{
  color:#046e8f; background: rgba(0,194,255,.12); border-color: rgba(0,194,255,.45);
}

.hero-title{
  font-size: clamp(2rem, 5.2vw, 3.8rem);
  line-height: 1.05; margin: 1rem auto .75rem;
}
.hero-subtle{
  color: var(--muted) !important;
  max-width: 920px; margin: 0 auto 1rem;
}

/* CTA */
.hero-cta{
  background: linear-gradient(90deg, #00c2ff, #33d8ff);
  border: 1px solid rgba(0,194,255,.8);
  color: #07131c;
  font-weight: 600;
  box-shadow: 0 0 0 1px rgba(0,194,255,.3), 0 10px 30px rgba(0,194,255,.25);
  transition: all .25s ease;
}
.hero-cta svg{ stroke: currentColor; }

.hero-cta:hover{
  background: linear-gradient(90deg, #00c2ff, #ffcb6b);
  border-color: rgba(255,203,107,.7);
  transform: translateY(-2px);
  box-shadow:
    0 0 20px rgba(0,194,255,.4),
    0 0 40px rgba(255,203,107,.25),
    0 12px 32px rgba(0,194,255,.25);
}

.btn-ghost{
  color:#cfe9f5;
  background: transparent;
  border: 1px solid rgba(207,233,245,.25);
}
.btn-ghost:hover{ background: rgba(255,255,255,.08); }
html[data-theme="light"] .btn-ghost{
  color:#0b0f17; border-color: rgba(0,0,0,.18);
}
html[data-theme="light"] .btn-ghost:hover{
  background: rgba(0,0,0,.06);
}

/* Stats */
.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:800; font-size: clamp(1.25rem, 3.5vw, 2rem);
  background: var(--grad); -webkit-background-clip:text; background-clip:text; color: transparent;
}
.hero-stats .stat-label{
  color: var(--muted); font-size:.95rem;
}

/* Ajustements lisibilité clair */
html[data-theme="light"] .hero-title{ color:#0b0f17; }

/* ===== DEMO (look screenshots) ===== */

/* Segmented buttons */
.seg-group .seg-btn{
  --padY:.55rem; --padX:1rem;
  padding: var(--padY) var(--padX);
  border:1px solid var(--border);
  background:#1c222f;
  color:#cfe9f5;
  font-weight:600;
}
html[data-theme="light"] .seg-group .seg-btn{
  background:#f5f7fb; color:#0b0f17; border-color: rgba(0,0,0,.18);
}
.seg-group .seg-btn.active{
  background:#00b3ee;
  border-color:#00b3ee;
  color:#08131c;
}

/* Wrapper centre + tailles selon format */
.demo-wrap{
  display:flex; justify-content:center; align-items:center;
  margin-top: 24px;
}
.demo-wrap .sf-device{
  background:#000;
  border:1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  box-shadow: 0 8px 36px rgba(0,0,0,.35);
  overflow:hidden;
  transition: aspect-ratio .25s ease, width .25s ease, height .25s ease, border-color .2s ease;
}

/* 16:9 large (desktop) */
.demo-wrap.is-169 .sf-device{
  aspect-ratio:16/9;
  width: min(100%, 920px);
}

/* 9:16 étroit type “phone” */
.demo-wrap.is-916 .sf-device{
  aspect-ratio:9/16;
  width: min(100%, 380px);
}

/* Points de rupture */
@media (max-width: 991.98px){
  .demo-wrap.is-169 .sf-device{ width:min(100%, 780px); }
}
@media (max-width: 575.98px){
  .seg-group .seg-btn{ --padY:.5rem; --padX:.8rem; font-weight:600; }
  .demo-wrap.is-169 .sf-device{ width:100%; }
  .demo-wrap.is-916 .sf-device{ width:min(100%, 320px); }
}

/* Overlay Play cyan (gros bouton) */
.play-cyan{
  width:86px; height:86px; border-radius:50%;
  background:#00b3ee; color:#08131c;
  border:1px solid rgba(0,0,0,.15);
  box-shadow: 0 10px 25px rgba(0,179,238,.35);
  font-size: 46px;
}
.play-cyan:hover{ filter:brightness(1.05); transform: translateY(-1px); }

/* Skeleton fin (barre balayage) */
.sf-skel{ position:absolute; inset:0; background:#0c0c0c; z-index:1; }
.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;
}
@keyframes skel{ from{ transform: translateX(-100%);} to{transform: translateX(100%);} }

/* En thème clair, bord plus sombre pour le device */
html[data-theme="light"] .demo-wrap .sf-device{ border-color: rgba(0,0,0,.18); }

/* === Demo CTA (sous le player) === */
.demo-sep{
  border: 0; height: 1px;
  background: var(--border);
  opacity: .6;
  width: min(100%, 960px);
  margin: 40px auto 28px;
}

.demo-cta-title{
  margin-bottom: 14px;
  letter-spacing: .2px;
}

.demo-cta-btn{
  background: #00b3ee;
  color: #08131c;
  border: 1px solid rgba(0,0,0,.18);
  padding: .85rem 1.25rem;
  font-weight: 600;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0,179,238,.35);
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease, background .25s ease, border-color .25s ease;
}
.demo-cta-btn:hover{
  background: linear-gradient(90deg, #00c2ff, #ffcb6b);
  border-color: rgba(255,203,107,.7);
  transform: translateY(-2px);
  box-shadow:
    0 0 20px rgba(0,194,255,.35),
    0 0 30px rgba(255,203,107,.22),
    0 12px 32px rgba(0,194,255,.25);
}

/* Light mode tweaks */
html[data-theme="light"] .demo-cta-btn{
  color:#07131c; border-color: rgba(0,0,0,.18);
}
/* ===== Pricing (match screenshot) ===== */
.pricing-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  width: min(1100px, 100%);
  margin-inline: auto;
}
@media (max-width: 991.98px){ .pricing-grid{ grid-template-columns: 1fr; max-width: 680px; } }

.price-card{
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.4rem 1.2rem 1.2rem;
  box-shadow: var(--shadow-md);
  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); }

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

.ribbon{
  position:absolute; top:-12px; left: 16px;
  background: rgb(0, 195, 255);
  color:#1b343f;
  border:1px solid rgba(0,194,255,.35);
  border-radius: 999px;
  padding:.25rem .6rem;
  font-size:.85rem; font-weight:700;
  display:flex; align-items:center; gap:.35rem;
}
html[data-theme="light"] .ribbon{ color:#046e8f; background: rgba(0,194,255,.14); }

.price-head .plan{ font-weight:700; margin: .2rem 0 .4rem; }
.price-line{ display:flex; align-items:baseline; gap:.2rem; }
.price-main{ font-size: 2rem; font-weight:800; color: #1fd1ff; } /* Starter "Gratuit" */
.price-num{ font-size: 2.4rem; font-weight:800; }
.price-euro{ font-size: 1.6rem; font-weight:800; margin-left:.05rem; }
.price-cycle{ color: var(--muted); margin-left:.35rem; }

.price-card hr{
  border:0; height:1px; background: var(--border); opacity:.7; 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:#16c2ff; margin-top:.2rem; font-size:1.1rem;
}
html[data-theme="light"] .price-list li{ color:#0b0f17; }
html[data-theme="light"] .price-card{ background:#fff; }

/* Boutons */
.btn-block{ width:100%; padding:.85rem 1rem; font-weight:700; border-radius:10px; }
.btn-ghost-contrast{
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}
.btn-ghost-contrast:hover{ background: rgba(255,255,255,.08); }
html[data-theme="light"] .btn-ghost-contrast{ color:#0b0f17; }
html[data-theme="light"] .btn-ghost-contrast:hover{ background: rgba(0,0,0,.06); }

.btn-cyan{
  background:#00b3ee; color:#08131c; border:1px solid rgba(0,0,0,.15);
  box-shadow: 0 10px 24px rgba(0,179,238,.35);
  transition: transform .2s ease, box-shadow .2s ease, background .25s ease, border-color .25s ease;
}
.btn-cyan:hover{
  background: linear-gradient(90deg, #00c2ff, #ffcb6b);
  border-color: rgba(255,203,107,.7);
  transform: translateY(-2px);
  box-shadow:
    0 0 20px rgba(0,194,255,.35),
    0 0 30px rgba(255,203,107,.22),
    0 12px 32px rgba(0,194,255,.25);
}

/* Note + badges paiement */
.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 var(--border); border-radius:8px;
  padding:.35rem .6rem; background: transparent;
}
html[data-theme="light"] .pay-badge{ color:#475569; }

/* ===== FAQ (look screenshot) ===== */
.faq-accordion .accordion-item{
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
}
.faq-accordion .accordion-item:last-child{
  border-bottom-color: var(--border);
}
.faq-accordion .accordion-button{
  background: transparent;
  color: var(--text);
  padding: 1rem 0;
  border: 0;
  box-shadow: none !important;
}
.faq-accordion .accordion-button.collapsed{
  color: var(--text);
}
.faq-accordion .accordion-button::after{
  /* chevron à droite, discret */
  filter: invert(1) opacity(.7);
}
html[data-theme="light"] .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,.25);
  background: rgba(0,194,255,.08);
  border-radius: 12px;
  padding: 1.6rem 1.2rem;
}
.faq-cta-link{
  color: #5fd9ff;
  text-decoration: none;
  font-weight: 700;
}
.faq-cta-link:hover{ text-decoration: underline; }

html[data-theme="light"] .faq-callout{
  background: rgba(0,194,255,.10);
  border-color: rgba(0,194,255,.35);
}

/* ===== Testimonials (version fixe hauteur + bottom aligned) ===== */
.t-grid{
  display: grid;
  grid-template-columns: repeat(3, 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{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  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: 0 8px 30px rgba(0,0,0,.25);
  border-color: rgba(0,194,255,.25);
}
html[data-theme="light"] .t-card{ background: #fff; }

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

/* Zone utilisateur fixée en bas */
.t-user{
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.05);
}
html[data-theme="light"] .t-user{
  border-top-color: rgba(0,0,0,.08);
}

.t-avatar{
  width: 46px; height: 46px; border-radius: 50%; object-fit: cover;
  box-shadow:
    0 0 0 2px var(--panel),
    0 0 0 3px #00c2ff;
}
html[data-theme="light"] .t-avatar{
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 3px #00c2ff;
}
.t-name{ font-weight: 800; line-height: 1.2; }
.t-role{ color: var(--muted); font-size: .95rem; }

/* ===== Footer ===== */
.sf-footer{
  background: var(--ink-2);
  color: var(--text);
  font-size: .95rem;
}
html[data-theme="light"] .sf-footer{ background: #f9fafb; color: #111; }

.sf-icon{
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #00c2ff, #ffcb6b);
  color: #000; font-weight: 700;
  border-radius: 6px;
  font-size: .9rem;
}
.text-gradient{
  background: linear-gradient(90deg, #00c2ff, #ffcb6b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sf-footer a{
  color: var(--muted);
  text-decoration: none;
  transition: color .2s ease;
}
.sf-footer a:hover{ color: var(--brand); }

.sf-social{
  width: 36px; height: 36px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
  transition: all .2s ease;
}
.sf-social:hover{
  color: var(--brand);
  border-color: var(--brand);
  transform: translateY(-2px);
}
html[data-theme="light"] .sf-social{ border-color: rgba(0,0,0,.1); }

/* Demo – état actif des labels (radios) */
.seg-group .seg-btn { border-radius:999px; }
#fmt169:checked + label,
#fmt1x1:checked + label,
#fmt916:checked + label{
  background:#00b3ee; border-color:#00b3ee; color:#08131c;
}

/* =======================================================
   NanoClip — Corrige le fond et la couleur des champs autofill
   (Chrome, Edge, Safari, Firefox)
   ======================================================= */

/* Chrome / Edge / Safari */
.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: #fff !important; /* texte clair */
  caret-color: #fff !important;
  transition: background-color 9999s ease-in-out 0s !important;
  background-clip: padding-box !important;
}

/* Firefox */
.auth-card input:-moz-autofill,
.auth-card textarea:-moz-autofill {
  box-shadow: 0 0 0 1000px transparent inset !important;
  -moz-text-fill-color: #fff !important; /* texte clair */
  caret-color: #fff !important;
}

/* Placeholders normaux : fond transparent + texte clair */
.auth-card input::placeholder,
.auth-card textarea::placeholder {
  background-color: transparent !important;
  color: rgba(255,255,255,.65) !important;
}
.input-group-text {
    background-color: #ffffff !important;
    border-color: rgba(255, 255, 255, .22) !important;
    color: rgb(255 255 255) !important;
}

/* =======================================================
   text video + surbrillance pour <video>
   ======================================================= */
/* === Karaoké (texte + surbrillance) === */
.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, #e5f0ff);
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
  user-select:none;
}

/* Mode simple : change juste la couleur du mot actif */
.karaoke .w.active{
  color: var(--karaoke-hl, #00c2ff);
}

/* Mode fluide : remplissage progressif */
.karaoke .w.progressive{
  color: var(--karaoke-base, #e5f0ff);
  background: linear-gradient(90deg,
    var(--karaoke-hl, #00c2ff) 0%,
    var(--karaoke-hl, #00c2ff) var(--p, 0%),
    transparent var(--p, 0%)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: background-size .05s linear;
}

/* Music path */
#music-preview .ratio { border-radius: 1rem;box-shadow: 0 24px 60px rgba(0, 0, 0, .25);width: 100%; max-width: 100%;}
/* Bootstrap n'a pas 9:16 : on l'ajoute */
.ratio-9x16 { --bs-aspect-ratio: 177.7777778%; } /* 16/9 * 100 */

/* Sécurité si ton bundle n'inclut pas object-fit utilities */
.object-fit-cover { object-fit: cover; }

/* 9:16 utilitaires */
.ratio-9x16{ --bs-aspect-ratio:177.7777778% }
.object-fit-cover{ object-fit:cover }

/* 5 colonnes desktop, 3 sur ≥992px, 2 sur ≥576px, 1 sur mobile */
#music-preview .mp-viewport { overflow:hidden; width:100%;}
#music-preview .mp-track    { display:flex; gap:16px; transition:transform .35s ease; will-change:transform }

/* Desktop large (≥1400px) → 5 colonnes */
@media (min-width: 1400px){
  #music-preview .mp-item{ flex:0 0 calc(20% - 13px); max-width:calc(20% - 13px) }
}

/* Desktop / Tablet large (992–1399px) → 3 colonnes */
@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) }
}

/* Tablet (576–991px) → 2 colonnes */
@media (min-width: 576px) and (max-width: 991.98px){
  #music-preview .mp-item{ flex:0 0 calc(50% - 8px); max-width:calc(50% - 8px) }
}

/* Mobile (<576px) → 1 colonne */
@media (max-width: 575.98px){
  #music-preview .mp-item{ flex:0 0 100%; max-width:100% }
}


/* Carte */
.mp-card{ border-radius:16px; overflow:hidden; background:rgba(0,0,0,.55); backdrop-filter: blur(4px);
          box-shadow:0 16px 40px rgba(0,0,0,.25); display:flex; flex-direction:column; height:100%;}
.mp-card:hover{ transform: none !important;background: #f1f1f1;}       
.mp-body{ padding:12px; color:#fff }
.mp-title{ font-weight:700; margin:0 0 2px; font-size:.95rem }
.mp-artist{ opacity:.7; font-size:.8rem; margin-bottom:.35rem }
.mp-buy{ margin-top:.5rem }
.mp-verse {margin-top: 2px;margin-bottom: 4px;color: rgba(0,0,0,0.6);}
html[data-bs-theme="dark"] .mp-verse {color: rgba(255,255,255,0.6);}


/*.modal-backdrop.fade.show {display: none;}*/

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



/* PAGE SIMULATEUR */
option.option {color: #171d2b;}
option {color: #5e5e5e;}

/* Responsive */
/*
  Classes pour masquer un élément sur différentes tailles d'écran (responsive).
  Basé sur les breakpoints de Bootstrap 3.
*/

/**
 * 💻 Classes de Masquage (Hidden) basées sur la logique des points de rupture Bootstrap 3.
 * * Les points de rupture (Breakpoints) standards sont :
 * - XS: < 768px (Ciblé par max-width)
 * - SM: ≥ 768px et < 992px (Ciblé par min-width ET max-width)
 * - MD: ≥ 992px et < 1200px (Ciblé par min-width ET max-width)
 * - LG: ≥ 1200px (Ciblé par min-width)
 */

/* --- 1. Masquer sur Extra Small (XS) --- */
/* Masquer tout ce qui est < 768px */
@media (max-width: 767.98px) {
    .hidden-xs { 
        display: none !important; 
    }
}

/* --- 2. Masquer sur Small (SM) --- */
/* Masquer entre 768px et 991.98px */
@media (min-width: 768px) and (max-width: 991.98px) {
    .hidden-sm {
        display: none !important;
    }
}

/* --- 3. Masquer sur Medium (MD) --- */
/* Masquer entre 992px et 1199.98px */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .hidden-md {
        display: none !important;
    }
}

/* --- 4. Masquer sur Large (LG) --- */
/* Masquer tout ce qui est ≥ 1200px */
@media (min-width: 1200px) {
    .hidden-lg { 
        display: none !important; 
    }
}

#ptop {padding-top:90px;}
@media (max-width: 991.98px) { /* iPad et smartphones */
  #ptop {
    padding-top: 30px;
  }
}