/* ==========================================================================
   StadiyaLab — Design System v2 ("Soft Fintech" — inspiré Dribbble)
   Display: Poppins / Body: Inter / Labels: JetBrains Mono
   Signature : dégradés mesh doux, cartes flottantes, boutons pilule,
   gros chiffres, badges circulaires teintés.
   ========================================================================== */

:root{
  --brand: #DF634C;
  --brand-600: #C4523D;
  --brand-700: #A8412F;
  --brand-50: #FDF0EC;
  --brand-100: #FADDD4;
  --brand-200: #F5C6B8;
  --ink: #161616;
  --ink-700: #2B2A28;
  --ink-500: #57544F;
  --paper: #FFFFFF;
  --mist: #F7F4F1;
  --line: #ECE6E0;
  --radius-lg: 1.75rem;
  --radius-xl: 2.25rem;
  --shadow-float: 0 40px 80px -30px rgba(22,22,22,.22), 0 10px 24px -12px rgba(22,22,22,.12);
  --shadow-soft: 0 20px 45px -25px rgba(22,22,22,.18);
}

html{scroll-behavior:smooth;}
body{
  font-family:'Inter', sans-serif;
  color:var(--ink-700);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.font-display{
  font-family:'Poppins', sans-serif;
  letter-spacing:-0.015em;
}
.font-mono-label{
  font-family:'JetBrains Mono', monospace;
  letter-spacing:0.14em;
  text-transform:uppercase;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- Mesh gradient (fond de hero) ---------- */
.mesh{
  position:relative;
  background:
    radial-gradient(600px 400px at 8% 15%, rgba(223,99,76,.16), transparent 60%),
    radial-gradient(500px 380px at 92% 0%, rgba(223,99,76,.12), transparent 55%),
    radial-gradient(700px 500px at 50% 100%, rgba(223,99,76,.08), transparent 60%),
    #FBF8F6;
}
.mesh-dark{
  background:
    radial-gradient(600px 400px at 85% 10%, rgba(223,99,76,.35), transparent 60%),
    radial-gradient(500px 400px at 10% 90%, rgba(223,99,76,.18), transparent 55%),
    #161616;
}

/* ---------- Eyebrow / label ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:'JetBrains Mono', monospace;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brand-700); font-weight:600;
  background:var(--brand-50);
  padding:.4rem .85rem;
  border-radius:999px;
}
.eyebrow.on-dark{ background:rgba(255,255,255,.1); color:#fff; }
.eyebrow::before{
  content:''; width:6px; height:6px; border-radius:999px; background:var(--brand);
}

/* ---------- Buttons (pilule) ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:600; font-size:.95rem; padding:.95rem 1.75rem; border-radius:999px;
  transition:all .22s cubic-bezier(.2,.8,.2,1); white-space:nowrap; cursor:pointer; border:1px solid transparent;
}
.btn-primary{background:var(--ink); color:#fff; box-shadow:0 14px 28px -14px rgba(22,22,22,.45);}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 18px 34px -14px rgba(22,22,22,.5);}
.btn-brand{background:var(--brand); color:#fff; box-shadow:0 14px 28px -14px rgba(223,99,76,.55);}
.btn-brand:hover{background:var(--brand-700); transform:translateY(-2px);}
.btn-outline{background:transparent; border-color:var(--line); color:var(--ink);}
.btn-outline:hover{border-color:var(--ink); background:var(--mist);}
.btn-ghost-light{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.28); color:#fff; backdrop-filter:blur(8px);}
.btn-ghost-light:hover{background:rgba(255,255,255,.16);}
.btn-sm{padding:.65rem 1.2rem; font-size:.82rem;}

/* ---------- Cards flottantes ---------- */
.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg);
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-soft); border-color:transparent;}

.float-card{
  position:absolute; background:#fff; border-radius:1.25rem; box-shadow:var(--shadow-float);
  padding:1rem 1.25rem; display:flex; align-items:center; gap:.75rem;
}
@keyframes float-y{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }
.float-anim{ animation:float-y 5s ease-in-out infinite; }
.float-anim-delay{ animation:float-y 5.5s ease-in-out infinite; animation-delay:.6s; }

/* ---------- Icon badge circulaire ---------- */
.icon-badge{
  width:3rem; height:3rem; border-radius:999px; display:flex; align-items:center; justify-content:center;
  background:var(--brand-50); color:var(--brand-700); flex:none;
}
.icon-badge.dark{ background:rgba(255,255,255,.1); color:#fff; }

/* ---------- Nav ---------- */
.nav-link{position:relative; font-weight:500; color:var(--ink-700); padding:.4rem 0; font-size:.92rem;}
.nav-link::after{
  content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--brand);
  transition:width .2s ease; border-radius:2px;
}
.nav-link:hover::after, .nav-link.active::after{width:100%;}
.nav-link.active{color:var(--ink); font-weight:600;}

/* ---------- Stat row (gros chiffres + séparateurs) ---------- */
.stat-block{ padding:0 1.75rem; border-left:1px solid var(--line); }
.stat-block:first-child{ border-left:none; padding-left:0; }
.stat-number{ font-family:'Poppins',sans-serif; font-weight:700; letter-spacing:-0.02em; line-height:1; }

/* ---------- Sector / trust strip ---------- */
.sector-chip{
  display:inline-flex; align-items:center; gap:.5rem; padding:.55rem 1.1rem; border-radius:999px;
  border:1px solid var(--line); font-size:.8rem; font-weight:600; color:var(--ink-500);
  background:#fff;
}
.trust-word{
  font-family:'Poppins', sans-serif; font-weight:600; font-size:1rem; color:var(--ink-500);
  opacity:.55; letter-spacing:-0.01em; transition:opacity .2s ease;
}
.trust-word:hover{ opacity:1; color:var(--ink); }

/* ---------- Accordion (FAQ / approche) ---------- */
.acc-item{ border-bottom:1px solid var(--line); }
.acc-trigger{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.5rem 0; text-align:left; cursor:pointer; background:none; border:none; }
.acc-num{ font-family:'JetBrains Mono',monospace; font-size:.75rem; color:var(--brand); font-weight:700; margin-right:1rem; }
.acc-chevron{transition:transform .25s ease; flex:none;}
.acc-trigger[aria-expanded="true"] .acc-chevron{transform:rotate(45deg);}
.acc-panel{overflow:hidden; max-height:0; transition:max-height .35s ease;}
.acc-panel.open{max-height:600px;}
.acc-panel-inner{ padding:0 0 1.75rem; color:var(--ink-500); line-height:1.7; }

/* ---------- Tag pill ---------- */
.tag-pill{
  display:inline-flex; align-items:center; font-size:.72rem; font-weight:600; padding:.25rem .65rem;
  border-radius:999px; background:var(--brand-50); color:var(--brand-700);
  max-width:200px;
  /* Pas de overflow:hidden ici : ça couperait le tooltip (::after), qui doit
     pouvoir dépasser de cette pastille. La troncature se fait sur le span
     texte interne (.tag-pill-text) à la place. */
}
.tag-pill-text{
  display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;
}

/* ---------- Tooltip (ex: nom complet d'un tag tronqué) ---------- */
[data-tooltip]{ position:relative; cursor:default; }
[data-tooltip]::after{
  content:attr(data-tooltip);
  position:absolute; bottom:100%; left:50%; transform:translateX(-50%); margin-bottom:10px;
  background:#161616; color:#fff; font-size:.72rem; font-weight:500; line-height:1.4;
  padding:.45rem .7rem; border-radius:.5rem; white-space:normal; width:max-content; max-width:240px;
  text-align:center; box-shadow:0 10px 24px -10px rgba(22,22,22,.4);
  opacity:0; visibility:hidden; pointer-events:none; z-index:40;
  transition:opacity .15s ease, transform .15s ease, visibility .15s;
}
[data-tooltip]::before{
  content:''; position:absolute; bottom:100%; left:50%; transform:translateX(-50%); margin-bottom:4px;
  border:5px solid transparent; border-top-color:#161616;
  opacity:0; visibility:hidden; pointer-events:none; z-index:40;
  transition:opacity .15s ease, visibility .15s;
}
[data-tooltip]:hover::after, [data-tooltip]:focus-visible::after,
[data-tooltip]:hover::before, [data-tooltip]:focus-visible::before{
  opacity:1; visibility:visible;
}

/* ---------- Course card image ratio ---------- */
.ratio-16-10{aspect-ratio:16/10; object-fit:cover;}

/* ---------- Testimonial dots ---------- */
.t-dot{width:8px; height:8px; border-radius:999px; background:var(--line); cursor:pointer; transition:all .2s;}
.t-dot.active{background:var(--brand); width:24px; border-radius:999px;}

/* ---------- Reveal on load ---------- */
.reveal{opacity:0; transform:translateY(16px); animation:reveal-in .7s cubic-bezier(.2,.8,.2,1) forwards;}
@keyframes reveal-in{ to{opacity:1; transform:translateY(0);} }

/* ---------- Mobile nav ---------- */
#mobile-nav{transition:max-height .3s ease, opacity .2s ease;}

/* ---------- Utility ---------- */
.text-balance{text-wrap:balance;}
.blob{ position:absolute; border-radius:999px; filter:blur(60px); opacity:.55; pointer-events:none; }

/* ---------- Phone mockup frame ---------- */
.device-frame{
  border-radius:2.5rem; border:10px solid var(--ink); background:var(--ink);
  box-shadow:var(--shadow-float);
}