/* ===== OJEXA Brand Theme (Black + Red) - Pro UX Polish ===== */
:root{
  --bg:#0b0c10;
  --surface:#111218;
  --card:#16171f;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --accent:#e11d48;      /* primary red */
  --accent-700:#be123c;  /* darker red */
  --accent-900:#9f1239;
  --border:#1f2937;
  --ring: 0 0 0 3px rgba(225, 29, 72, .45);
}

html{ color-scheme:dark; }
*{ box-sizing:border-box; }
body{ background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; }

/* Links: remove default underline, keep tasteful hover + strong focus */
a{ color:inherit; text-decoration:none; transition: color .2s, opacity .2s, border-color .2s, transform .2s; }
a:hover{ color:var(--accent); }
a:focus-visible{ outline:var(--ring); border-radius:.25rem; }

/* Sections & containers */
.section{ padding:4rem 1rem; }
.section.alt{ background:var(--surface); }
.container{ max-width:1120px; margin:0 auto; }

/* Typography */
.h2{ font-size: clamp(1.75rem, 2.5vw, 2.25rem); font-weight:800; letter-spacing:-0.01em; }
.h3{ font-weight:700; letter-spacing:-0.01em; }

/* Header */
.header-blur{
  background: rgba(13,13,18,.85);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--border);
}
.header-accent{
  position:relative;
}
.header-accent::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background: linear-gradient(90deg, transparent 0 10%, var(--accent) 10% 90%, transparent 90% 100%);
}

/* Hero */
.hero-surface{
  background:
    radial-gradient(1200px 400px at 10% -10%, rgba(225, 29, 72,.18), transparent 60%),
    radial-gradient(800px 300px at 90% 10%, rgba(225, 29, 72,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 30%);
  border-bottom:1px solid var(--border);
  padding:3.5rem 0;
}
.chip{
  display:inline-block; font-size:.75rem; font-weight:700; letter-spacing:.02em;
  color:#fff; background:linear-gradient(90deg,var(--accent),var(--accent-700));
  padding:.35rem .6rem; border-radius:9999px;
}
.hero-title{ font-size:clamp(2rem, 5vw, 3.25rem); font-weight:900; letter-spacing:-.02em; line-height:1.05; }
.hero-sub{ color:var(--muted); font-size: clamp(1rem, 2vw, 1.125rem); margin-top:.75rem; }

/* Cards */
.card{
  background:var(--card); border:1px solid var(--border); border-radius:.9rem; padding:1rem;
  box-shadow: 0 1px 0 rgba(255,255,255,.02), 0 24px 48px -24px rgba(0,0,0,.6);
  transform: translateZ(0);
}
.card:hover{ border-color:#2b3342; transform: translateY(-1px); }

/* Badges (benefits) */
.badge{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .6rem; border:1px solid #2b3342; border-radius:9999px; font-size:.75rem; background:#0f1117;
}
.badge::before{
  content:""; width:.5rem; height:.5rem; border-radius:9999px; background:var(--accent);
  box-shadow: 0 0 0 2px rgba(225, 29, 72, .25);
}

/* Buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-weight:800; border-radius:.6rem; padding:.8rem 1rem; }
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-weight:800; border-radius:.6rem; padding:.8rem 1rem;
  background:linear-gradient(180deg,var(--accent),var(--accent-700));
  color:#fff; box-shadow: 0 12px 26px rgba(225,29,72,.28);
}
.btn-primary:hover{ background:linear-gradient(180deg,var(--accent-700),var(--accent-900)); transform: translateY(-1px); }
.btn-primary:active{ transform: translateY(0); }

.btn-secondary{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-weight:800; border-radius:.6rem; padding:.8rem 1rem;
  background:#0f1117; color:#f3f4f6; border:1px solid var(--border);
}
.btn-secondary:hover{ border-color:#353f52; transform: translateY(-1px); }

/* Forms (generic) */
.input, .form-select{
  width:100%; padding:.7rem .8rem; border:1px solid var(--border);
  border-radius:.6rem; background:#0f1117; color:var(--text);
}
.label{ display:block; margin-bottom:.35rem; font-size:.9rem; color:var(--muted); }

/* Stars (unchanged) */
.stars{
  height:1rem;
  background: linear-gradient(90deg,#f59e0b 0 80%,#374151 80% 100%);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox=\\'0 0 100 20\\'><text y=\\'16\\' font-size=\\'18\\'>★★★★★</text></svg>') no-repeat center/contain;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox=\\'0 0 100 20\\'><text y=\\'16\\' font-size=\\'18\\'>★★★★★</text></svg>') no-repeat center/contain;
}

/* Sticky mobile CTA */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background: rgba(13,13,18,.96); border-top:1px solid var(--border); padding:.55rem .75rem;
  backdrop-filter: blur(6px);
}
.sticky-cta .close{
  position:absolute; right:.75rem; top:.5rem; font-size:1rem; color:var(--muted);
}
.sticky-cta .close:hover{ color:#fff; }

/* Utility */
.divider{ height:1px; background:var(--border); }

/* ===== Why OJEXA vs Bulky Barbell ===== */
.kpi-grid{ display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:1rem; margin-top:1rem; }
@media (max-width: 768px){ .kpi-grid{ grid-template-columns: 1fr; } }

.kpi{
  background:var(--card); border:1px solid var(--border); border-radius:.9rem; padding:1rem;
  box-shadow: 0 1px 0 rgba(255,255,255,.02), 0 24px 48px -24px rgba(0,0,0,.6);
}
.kpi h3{ font-weight:800; font-size:1.125rem; letter-spacing:-.01em; }
.kpi p{ color:var(--muted); font-size:.9rem; margin-top:.25rem; }

.check-row{
  display:flex; align-items:flex-start; gap:.6rem; margin-top:.5rem; color:var(--text);
}
.check-dot{
  width:.9rem; height:.9rem; border-radius:9999px; flex:0 0 auto;
  background:linear-gradient(180deg,var(--accent),var(--accent-700));
  box-shadow:0 0 0 3px rgba(225, 29, 72, .2);
}

.compare{
  width:100%; border-collapse:separate; border-spacing:0; margin-top:1rem; font-size:.95rem;
}
.compare th, .compare td{ padding:.75rem .75rem; border-bottom:1px solid var(--border); }
.compare thead th{ text-align:left; color:#f3f4f6; font-weight:800; background:#0f1117; }
.compare tbody tr:hover{ background:#0f1117; }
.compare .neg{ color:#f87171; }  /* points faibles */
.compare .pos{ color:#34d399; }  /* points forts */

.trust-strip{
  display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1rem;
}
.trust-pill{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem .75rem; border:1px solid var(--border); border-radius:9999px; background:#0f1117;
  font-size:.85rem; color:#e5e7eb;
}
.trust-dot{ width:.5rem; height:.5rem; border-radius:9999px; background:var(--accent); box-shadow:0 0 0 2px rgba(225,29,72,.25); }

/* ===== How to set up (30s) ===== */
.steps-grid{ display:grid; gap:1rem; grid-template-columns: repeat(3,minmax(0,1fr)); margin-top:1rem; }
@media (max-width: 768px){ .steps-grid{ grid-template-columns:1fr; } }
.step-card{ background:var(--card); border:1px solid var(--border); border-radius:.9rem; padding:1rem; }
.step-head{ display:flex; align-items:center; gap:.6rem; font-weight:800; }
.step-num{
  width:1.75rem; height:1.75rem; border-radius:.5rem;
  background:linear-gradient(180deg,var(--accent),var(--accent-700)); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:900;
  box-shadow: 0 8px 18px rgba(225,29,72,.28);
}
.step-icon{ width:28px; height:28px; color:#fff; opacity:.9; }
.step-txt{ color:var(--muted); margin-top:.5rem; font-size:.95rem; }

/* ===== FAQ (dark, pro) ===== */
.faq-accordion{ display:grid; gap:.75rem; margin-top:1rem; }
.faq{ background:var(--card); border:1px solid var(--border); border-radius:.9rem; overflow:hidden; }
.faq summary{
  list-style:none; /* cache le marqueur natif */
  display:flex; align-items:flex-start; gap:.75rem;
  padding:1rem .95rem; cursor:pointer; font-weight:800; letter-spacing:-.01em;
  color:#f3f4f6; transition: background .2s ease, border-color .2s ease;
}
.faq summary::-webkit-details-marker{ display:none; } /* Safari/Chromium */
.faq summary:focus{ outline:none; }                  /* supprime le focus bleu UA */
.faq:focus-within{ outline:var(--ring); outline-offset:2px; } /* focus brand */
.faq summary:hover{ background:#0f1117; }
.faq summary .q{
  flex:1 1 auto;
}
/* Chevron */
.faq summary::after{
  content:"▸"; /* droite */
  font-size:1.1rem; line-height:1; color:#e5e7eb; opacity:.9;
  transform: translateY(.05rem);
  transition: transform .2s ease, opacity .2s ease;
}
.faq[open] summary::after{
  content:"▾"; /* bas */
  transform: translateY(.05rem);
}
/* Answer */
.faq .answer{
  padding: .25rem 1rem 1rem 1rem;
  color:var(--muted); line-height:1.6; font-size:.95rem;
  animation: faqReveal .22s ease;
  border-top:1px solid var(--border);
}
@keyframes faqReveal{ from{ opacity:0; transform: translateY(-4px);} to{opacity:1; transform: translateY(0);} }

/* ===== Brand wordmark (Anton) ===== */
.brand{
  display:inline-flex; align-items:center;
  font-family:'Anton', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:400;           /* Anton is a display face; keep 400 */
  letter-spacing:.06em;      /* tighter than before for Anton */
  text-transform:uppercase;
  line-height:1;             /* crisp, no vertical jitter */
  color:#fff;
  position:relative;
  padding:.35rem .1rem .42rem .1rem;
  font-size:1.08rem;         /* mobile */
}
@media (min-width:768px){
  .brand{ font-size:1.18rem; }
}
/* underline accent stays */
.brand::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-700));
  border-radius:2px;
}

/* ===== FAQ Quick answers (filters) ===== */
.qa-header{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-top:.75rem; flex-wrap:wrap; }
.qa-title{ font-weight:800; color:#f3f4f6; }
.qa-filters{ display:flex; gap:.5rem; flex-wrap:wrap; }
.qa-btn{
  display:inline-flex; align-items:center; gap:.35rem; font-weight:800; font-size:.85rem;
  padding:.45rem .7rem; border-radius:9999px; border:1px solid var(--border);
  background:#0f1117; color:#e5e7eb; transition:transform .15s, border-color .2s;
}
.qa-btn:hover{ border-color:#353f52; transform:translateY(-1px); }
.qa-btn:focus-visible{ outline:var(--ring); }

/* subtle highlight flash when auto-opening an answer */
.faq.flash{ box-shadow: 0 0 0 2px rgba(225,29,72,.35) inset; animation: qaFlash .8s ease; }
@keyframes qaFlash{ 0%{box-shadow:0 0 0 2px rgba(225,29,72,.45) inset;} 100%{box-shadow:none;} }

/* ===== Testimonials (Cards, readable) ===== */
.t-grid{
  display:grid; gap:1rem; margin-top:1rem;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 1024px){ .t-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){ .t-grid{ grid-template-columns: 1fr; } }

.t-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:1rem;
  padding:1rem;
  box-shadow: 0 1px 0 rgba(255,255,255,.02), 0 24px 48px -24px rgba(0,0,0,.6);
  display:flex; flex-direction:column; min-height: 180px;
}

.t-topline{
  height:6px; border-radius:9999px;
  background: linear-gradient(90deg, #f59e0b, #f59e0b 75%, #374151 75%); /* "rating" stripe */
  margin-bottom:.75rem;
}

.t-lead{ font-weight:800; color:#f3f4f6; letter-spacing:-.01em; }
.t-text{ color:#cbd5e1; margin-top:.4rem; line-height:1.55; }
.t-foot{ margin-top:auto; font-size:.85rem; color:var(--muted); }

.t-stars-row{
  display:flex; align-items:center; gap:.5rem; margin:.25rem 0 .5rem 0;
}
.t-rating{ font-size:.85rem; color:#e5e7eb; opacity:.85; }

/* Optional quote mark */
.t-quote{
  display:inline-block; width:1.15rem; height:1.15rem; border-radius:.3rem;
  background:linear-gradient(180deg, var(--accent), var(--accent-700));
  color:#fff; font-weight:900; text-align:center; line-height:1.15rem; margin-right:.45rem;
}

/* ===== Testimonials Carousel ===== */
.t-carousel{ position:relative; margin-top:1rem; }
.t-track{
  display:flex; gap:1rem; padding: .25rem 0 1rem 0;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
}
.t-slide{ scroll-snap-align:start; flex:0 0 84%; }
@media (min-width:640px){ .t-slide{ flex-basis: 48%; } }
@media (min-width:1024px){ .t-slide{ flex-basis: 32%; } }

/* hide scrollbar (non vital) */
.t-track::-webkit-scrollbar{ height:8px; }
.t-track::-webkit-scrollbar-thumb{ background:#232835; border-radius:9999px; }
.t-track{ scrollbar-color:#232835 transparent; scrollbar-width:thin; }

.t-card{
  background:var(--card); border:1px solid var(--border);
  border-radius:1rem; padding:1rem; min-height:200px;
  box-shadow: 0 1px 0 rgba(255,255,255,.02), 0 24px 48px -24px rgba(0,0,0,.6);
  display:flex; flex-direction:column;
}
.t-topline{ height:6px; border-radius:9999px; background:linear-gradient(90deg,#f59e0b,#f59e0b 75%,#374151 75%); margin-bottom:.75rem; }
.t-stars-row{ display:flex; align-items:center; gap:.5rem; margin:.25rem 0 .5rem 0; }
.t-rating{ font-size:.85rem; color:#e5e7eb; opacity:.85; }
.t-lead{ font-weight:800; color:#f3f4f6; letter-spacing:-.01em; }
.t-text{ color:#cbd5e1; margin-top:.4rem; line-height:1.55; }
.t-foot{ margin-top:auto; font-size:.85rem; color:var(--muted); }

/* nav buttons */
.t-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:9999px; border:1px solid var(--border);
  background:#0f1117; color:#fff; display:grid; place-items:center; cursor:pointer;
  box-shadow:0 8px 18px rgba(0,0,0,.35);
}
.t-prev{ left:-6px; } .t-next{ right:-6px; }
.t-nav:hover{ border-color:#353f52; }
.t-nav:focus-visible{ outline:var(--ring); }
@media (max-width:640px){ .t-prev{ left:4px; } .t-next{ right:4px; } }

/* dots (optionnel) */
.t-dots{ display:flex; gap:.35rem; justify-content:center; margin-top:.5rem; }
.t-dot{ width:8px; height:8px; border-radius:9999px; background:#2b3342; }
.t-dot[aria-selected="true"]{ background:var(--accent); }

/* ===== Carousel dots as mini avatars ===== */
.t-dots{
  display:flex; gap:.5rem; justify-content:center; margin-top:.5rem;
}
.t-dot-avatar{
  width:28px; height:28px; border-radius:9999px;
  border:1px solid var(--border); background:#0f1117; color:#e5e7eb;
  display:grid; place-items:center; font-weight:900; font-size:.72rem; letter-spacing:.02em;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
  cursor:pointer;
}
.t-dot-avatar:hover{ border-color:#353f52; transform:translateY(-1px); transition:transform .15s, border-color .2s; }
.t-dot-avatar:focus-visible{ outline:var(--ring); }
.t-dot-avatar[aria-selected="true"]{
  background:linear-gradient(180deg, var(--accent), var(--accent-700));
  color:#fff; border-color:transparent; transform:translateY(-1px);
}

/* ===== Founders' note ===== */
.fn{
  background:var(--surface); border:1px solid var(--border);
  border-radius:1rem; padding:1rem;
}
.fn-head{ display:flex; align-items:center; gap:.6rem; }
.fn-badge{
  min-width:34px; height:34px; border-radius:.5rem;
  background:linear-gradient(180deg,var(--accent),var(--accent-700));
  color:#fff; font-weight:900; display:grid; place-items:center; letter-spacing:.02em;
}
.fn-title{ font-weight:900; letter-spacing:-.01em; }
.fn-text{ color:#cbd5e1; margin-top:.5rem; line-height:1.7; }
.fn-sign{ margin-top:.6rem; color:#e5e7eb; font-weight:800; }

/* Founders' badge — wide word version */
.fn-badge--wide{
  min-width:auto;
  height:34px;
  padding:0 .5rem;
  font-family:'Anton', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:.85rem;
  letter-spacing:.06em;   /* better tracking for full word */
}

/* ===== Legal / Privacy page typography ===== */
.legal {
  max-width: 880px;
  margin: 2rem auto;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem); /* ~17px desktop */
  line-height: 1.8;
  color: #e9eef6;
}
.legal .meta { color: var(--muted); font-size: .9rem; }
.legal p { margin-top: .75rem; }
.legal h1, .legal .h1 { font-size: clamp(2rem, 2.2vw, 2.25rem); font-weight: 900; letter-spacing: -0.02em; }
.legal h2, .legal .h2, .legal .h3 { margin-top: 1.25rem; }
.legal ul, .legal ol { margin: .5rem 0 0 1.25rem; color: #cbd5e1; }
.legal a {
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.45);
  text-underline-offset: 3px;
}
.legal a:hover { text-decoration-color: #fff; }
.legal .card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1rem 1.25rem;
}

/* Highly readable "Back" button for dark header */
.btn-ghost{
  background: transparent;
  color: #fff;
  border: 1px solid rgba(229,231,235,.65);
  border-radius: .6rem;
  padding: .6rem .9rem;
  font-weight: 800;
}
.btn-ghost:hover { background: #111827; border-color: #fff; }
.btn-ghost:focus-visible { outline: var(--ring); }

/* Footer small-print links become clearer */
.footer a { color: #e5e7eb; }
.footer a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ===== Cookie banner (dark, readable) ===== */
#cookie-banner{
  position: fixed; z-index: 70;
  right: 1rem; bottom: 1rem; left: auto;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: .9rem 1rem;
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
  width: min(560px, calc(100vw - 2rem));
}
@media (max-width: 640px){
  #cookie-banner{ left: 1rem; right: 1rem; bottom: .75rem; }
}

#cookie-banner .cb-wrap{ display: grid; grid-template-columns: 1fr auto; gap: .75rem; }
#cookie-banner .cb-text{ color: #e9eef6; line-height: 1.5; font-size: .95rem; }
#cookie-banner .cb-link{
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.6);
  text-underline-offset: 3px;
}
#cookie-banner .cb-link:hover{ text-decoration-color: #fff; }

#cookie-banner .cb-actions{ display: flex; gap: .5rem; align-items: center; }
#cookie-banner .cb-accept{
  background: linear-gradient(180deg, var(--accent), var(--accent-700));
  color: #fff; font-weight: 800;
  border: none; border-radius: .6rem; padding: .55rem .9rem; cursor: pointer;
}
#cookie-banner .cb-accept:hover{ transform: translateY(-1px); }
#cookie-banner .cb-accept:focus-visible{ outline: var(--ring); }

#cookie-banner .cb-close{
  background: #0f1117; color: #e5e7eb;
  border: 1px solid var(--border);
  border-radius: .6rem; padding: .55rem .8rem; cursor: pointer;
  font-weight: 800;
}
#cookie-banner .cb-close:hover{ border-color: #353f52; }
#cookie-banner .cb-close:focus-visible{ outline: var(--ring); }

/* === Dark image frame (border + inner shadow) === */
.img-frame-dark{
  background:#0f1117;                 /* même ton que les images */
  border:1px solid rgba(229,231,235,.14);
  border-radius:12px;
  padding:8px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    inset 0 24px 48px rgba(0,0,0,.35); /* inner shadow douce */
}
.img-frame-dark img{
  display:block;
  width:100%;
  height:auto;
  border-radius:8px;
}