/* ==========================================================================
   style.css — avis-invest.com
   - Mobile-first, modern, accessible
   - Branding: eToro-like green #21CE99
   - Shared header/footer across all pages
   - Sticky CFD risk banner
   ========================================================================== */

/* --------- CSS Variables --------- */
:root{
  --brand: #21CE99;
  --brand-600: #17b885;
  --brand-700: #0fa877;
  --text: #0e1412;
  --muted: #5b6b66;
  --bg: #ffffff;
  --bg-alt: #f5f7f6;
  --border: #e2e8e6;
  --shadow: 0 10px 25px rgba(0,0,0,.08);
  --radius: 16px;
  --maxw: 1200px;
  --focus: 2px solid #1b9e79;

  /* NEW: height token for the risk banner (desktop = 48px like before) */
  --risk-h: 48px;
}
@media (max-width:720px){
  :root{ --risk-h: 34px; } /* mobile, smaller banner footprint */
}

/* --------- Reset / Base --------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font: 400 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
img,svg,video,iframe{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:var(--focus);outline-offset:3px}
.nowrap{white-space:nowrap}

/* Containers */
.container{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:16px;
}

/* Buttons */
.btn{
  --btn-bg:#111;
  --btn-fg:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem;
  padding:.75rem 1.1rem;
  border-radius:999px;
  border:1px solid transparent;
  background:var(--btn-bg);
  color:var(--btn-fg);
  font-weight:600;
  text-decoration:none;
  box-shadow:var(--shadow);
  transition:.2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.cta{--btn-bg:var(--brand);--btn-fg:#042d20}
.btn.cta:hover{background:var(--brand-600)}
.btn.ghost{
  --btn-bg:transparent; --btn-fg:var(--text);
  border-color:var(--border); box-shadow:none;
}
.btn.ghost:hover{background:#f0f4f3}

/* Chips / badges */
.chip{
  display:inline-block; padding:.4rem .8rem; border-radius:999px;
  border:1px solid var(--border); color:var(--muted); font-weight:600;
}
.chip.active{background:var(--brand); color:#042d20; border-color:transparent}

/* Headings */
h1,h2,h3{line-height:1.2}
h1{font-size:clamp(1.6rem, 2.5vw, 2.4rem); margin:.2rem 0 .6rem}
h2{font-size:clamp(1.3rem, 2vw, 1.8rem); margin:1.2rem 0 .8rem}
h3{font-size:clamp(1.1rem, 1.6vw, 1.25rem); margin:1rem 0 .6rem}
.lead{color:var(--muted);font-size:1.05rem}
.small{font-size:.92rem;color:var(--muted)}
.subtitle{color:var(--muted)}

/* Tables */
.table-responsive{overflow:auto;border-radius:12px;border:1px solid var(--border);background:#fff}
table{width:100%;border-collapse:collapse;min-width:640px}
th,td{padding:.8rem 1rem;border-bottom:1px solid var(--border);text-align:left}
thead th{background:var(--bg-alt);font-weight:700}

/* Lists */
ul,ol{padding-left:1.2rem}
.ref,.ref-list,.risk-list{color:var(--muted)}

/* Cards / grid */
.card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:1rem; box-shadow:var(--shadow); height:100%;
}
.grid-2{display:grid; gap:1rem; grid-template-columns:1fr}
.grid-3{display:grid; gap:1rem; grid-template-columns:1fr}
@media (min-width:720px){
  .grid-2{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:repeat(3, 1fr)}
}

/* ---------------- Sticky Risk Banner (discreet) ---------------- */
.risk-banner{
  position: sticky; top:0; z-index:1000;
  background:#0f201a; color:#e8fff7; border-bottom:2px solid var(--brand);
  padding:.35rem .75rem;
  font-size:.85rem;
}
.risk-banner a{color:#a4ffe1;text-decoration:underline}
.risk-banner p{margin:0;max-width:var(--maxw);margin-inline:auto}
@media (max-width:420px){
  .risk-banner{ font-size:.82rem; padding:.3rem .6rem; }
  .risk-banner p{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}

/* ---------------- Header ---------------- */
.site-header{
  position:sticky; top:var(--risk-h); z-index:999; /* sits under banner */
  background:#ffffffcc; backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid var(--border);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  min-height:64px;
}
.logo{display:inline-flex; align-items:center; gap:.5rem; color:inherit; font-weight:800}
.logo img{width:32px;height:32px;border-radius:8px}
.logo span{text-transform:lowercase;letter-spacing:.2px}

.main-nav{display:flex; align-items:center; gap:1rem}
.burger{
  width:42px; height:42px; display:inline-flex; flex-direction:column; justify-content:center; align-items:center;
  gap:5px; border-radius:12px; border:1px solid var(--border); background:#fff;
}
.burger span{display:block;width:20px;height:2px;background:#0e1412;border-radius:2px}
#nav-menu{
  position:fixed; inset:0 0 auto auto; top:64px; /* under header */
  background:#ffffff; border-top:1px solid var(--border);
  padding:16px; display:none; flex-direction:column; gap:.5rem;
}
#nav-menu.open{display:flex}
#nav-menu a{display:block;padding:.5rem .25rem;border-radius:8px}
#nav-menu a.active{color:#042d20;background:#e6fbf5}
@media (min-width:960px){
  .burger{display:none}
  #nav-menu{
    position:static; display:flex !important; background:transparent; border:0; padding:0; flex-direction:row; gap:.75rem;
  }
}

.header-actions{display:flex; align-items:center; gap:.6rem}
.lang-switch{display:inline-flex; align-items:center; gap:.35rem; padding:.2rem .4rem; border:1px solid var(--border); border-radius:999px; background:#fff}
.lang-switch .sep{color:#b6c4c0}
.lang-switch button{
  border:0; background:transparent; padding:.25rem .5rem; border-radius:999px; font-weight:700; color:#3a4743; cursor:pointer
}
.lang-switch button.active{background:#e8fff7; color:#064d39}

/* ---------------- Hero ---------------- */
.hero{padding:28px 0 14px;background:linear-gradient(180deg,#f5fbf8 0,#fff 100%)}
.hero-inner{display:grid; gap:1rem; grid-template-columns:1fr}
.hero-actions{display:flex; gap:.6rem; flex-wrap:wrap; margin:.6rem 0}
.hero-media{display:none}
@media (min-width:880px){
  .hero-inner{grid-template-columns:1.1fr .9fr; align-items:center}
  .hero-media{display:block; justify-self:end}
}

/* ---------------- Regulators ---------------- */
.regulators{padding:20px 0}
.reg-list{list-style:none;margin:0;padding:0;display:grid; gap:12px}
.reg-list li{display:grid; grid-template-columns:auto 1fr; gap:.8rem; align-items:center; padding:12px; border:1px solid var(--border); border-radius:12px; background:#fff}
.reg-list img{width:44px;height:auto}

/* ---------------- Features ---------------- */
.features{padding:20px 0}
.features .card h3{margin-top:.2rem}
.tickers{display:flex;gap:.9rem;flex-wrap:wrap;list-style:none;padding:0;margin:.6rem 0 0}
.tickers li{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .6rem;border:1px solid var(--border);border-radius:999px;background:#fff}
.tickers img{width:20px}

/* ---------------- Fees ---------------- */
.fees{padding:16px 0}
.fees .table-responsive{margin-top:.6rem}

/* ---------------- How it works ---------------- */
.how-it-works{padding:18px 0;background:var(--bg-alt);border-block:1px solid var(--border)}
.steps{display:grid; gap:.5rem; padding-left:1.2rem}
.steps li{margin-bottom:.3rem}

/* ---------------- Video ---------------- */
.video-section{padding:18px 0}
.video-container{border-radius:12px; overflow:hidden; border:1px solid var(--border); background:#000}
.video-container iframe{width:100%; height: clamp(220px, 45vw, 500px); display:block}

/* ---------------- FAQ ---------------- */
.faq{padding:18px 0}
details{border:1px solid var(--border); border-radius:12px; padding:.75rem 1rem; background:#fff; margin:.6rem 0}
summary{cursor:pointer; font-weight:700; list-style:none}
summary::-webkit-details-marker{display:none}

/* ---------------- Sources ---------------- */
.sources{padding:8px 0 24px}
.sources ul{display:grid; gap:.4rem}

/* ---------------- Footer ---------------- */
.site-footer{border-top:1px solid var(--border); background:#ffffff}
.footer-inner{display:grid; gap:1rem; grid-template-columns:1fr}
.footer-col .logo{margin-bottom:.4rem}
.site-footer nav ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.site-footer .btn{margin-top:.4rem}
@media (min-width:860px){
  .footer-inner{grid-template-columns:1.2fr 1fr 1fr; align-items:start; padding:10px 0}
}

/* ---------------- Blog hub ---------------- */
.blog-hero{padding:20px 0; background:linear-gradient(180deg,#f5fbf8 0,#fff 100%)}
.blog-filters{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.6rem}
.blog-grid{padding:16px 0}
.post-card{
  background:#fff; border:1px solid var(--border); border-radius:12px; overflow:hidden; transition:.2s ease; height:100%;
  display:flex; flex-direction:column;
}
.post-card:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
.post-card .thumb{aspect-ratio:16/9; overflow:hidden}
.post-card .thumb img{width:100%; height:100%; object-fit:cover}
.post-card .post-body{padding:12px}
.post-title{margin:.1rem 0 .3rem; font-size:1.05rem}
.post-meta{color:var(--muted); font-size:.9rem}
.post-link{display:flex; flex-direction:column; height:100%; color:inherit}
.post-card.ghost .post-body{padding:20px}

/* ---------------- Article page ---------------- */
.article .article-head{padding:16px 0 8px; border-bottom:1px solid var(--border); margin-bottom:12px}
.toc{margin:12px 0; border:1px dashed var(--border); border-radius:12px; padding:12px; background:#fff}
.toc a{color:#2a3d38}
.article .grid-2{margin-top:8px}

/* ---------------- Cookie Banner (modal style) ---------------- */
.cookie-banner{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  display:none; place-items:center; padding:12px; z-index:2000;
}
.cookie-banner:not([hidden]){display:grid}
.cookie-content{
  width:min(720px, 96vw); background:#fff; color:var(--text);
  border-radius:16px; border:1px solid var(--border);
  box-shadow:0 30px 60px rgba(0,0,0,.25); padding:16px;
}
.cookie-actions{display:flex; gap:.5rem; flex-wrap:wrap; margin:.6rem 0}
.cookie-preferences{
  margin-top:.4rem; border-top:1px solid var(--border); padding-top:.6rem; display:grid; gap:.5rem
}
.cookie-preferences label{display:flex; gap:.6rem; align-items:center}

/* ---------------- YouTube consent overlay (fallback if JS inject missing) ---------------- */
.yt-consent-overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.6); color:#fff; text-align:center; padding:1rem; z-index:2;
}
.yt-consent-box{ max-width:720px; background:rgba(0,0,0,0.35); backdrop-filter:saturate(120%) blur(2px); border-radius:16px; padding:1rem; }

/* ---------------- Utilities ---------------- */
.ref a{white-space:nowrap}
.note{background:#f2fbf8; border:1px solid #d7f3e9; border-radius:10px; padding:.6rem;}

/* ---------------- Print basics ---------------- */
@media print{
  .risk-banner,.site-header,.cookie-banner,.btn,.burger{display:none !important}
  a::after{content:" (" attr(href) ")"; font-size:.85em}
  body{background:#fff}
}

/* Fix RGPD: n'afficher la section préférences que lorsqu'elle N'EST PAS "hidden".
   Permet à main.js de la rendre visible au clic (et évite le blocage CSS global). */
.cookie-preferences[hidden]{ display:none !important; }

/* ---------------- MOBILE: hide risk banner on scroll ---------------- */
@media (max-width:720px){
  /* Reserve space for the fixed risk banner so content doesn't jump */
  body{ padding-top: var(--risk-h); transition: padding-top .2s ease; }

  /* Risk banner becomes fixed and can slide out */
  .risk-banner{
    position: fixed; inset: 0 0 auto 0; width: 100%;
    transform: translateY(0); transition: transform .25s ease;
  }

  /* When scrolling down, hide the banner; restore space */
  body.risk-hidden .risk-banner{ transform: translateY(-100%); }
  body.risk-hidden{ padding-top: 0; }

  /* Header sits at top on mobile (banner is fixed above) */
  .site-header{ top: 0; }
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce){
  .risk-banner{ transition: none; }
  body{ transition: none; }
}