/* Housse Faction — Guide des Casinos en Ligne
   Design system. One CTA accent color (green) reserved for action buttons only.
   Navy = brand/structure. Gold = ratings/badges only. */
:root{
  --navy:#0f1b2d;
  --navy-2:#16263f;
  --ink:#1a2333;
  --muted:#5b6676;
  --line:#e4e8ee;
  --bg:#f6f8fb;
  --card:#ffffff;
  --gold:#f0b429;      /* ratings / badges ONLY */
  --cta:#16a34a;       /* CTA green — reserved for action buttons */
  --cta-hover:#128a3e;
  --danger:#c0392b;
  --radius:12px;
  --shadow:0 2px 10px rgba(15,27,45,.07);
  --shadow-lg:0 8px 30px rgba(15,27,45,.12);
  --wrap:1120px;
  --font:'Segoe UI',Roboto,-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden;max-width:100%}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.65;font-size:17px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
a{color:#1259c3;text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
h1,h2,h3,h4{color:var(--navy);line-height:1.25;margin:1.4em 0 .5em}
h1{font-size:2.1rem;margin-top:.3em}
h2{font-size:1.55rem;border-bottom:2px solid var(--line);padding-bottom:.25em}
h3{font-size:1.2rem}
p{margin:.7em 0}

/* ---------- top strip + 18+ ---------- */
.topbar{background:var(--navy);color:#cdd6e4;font-size:.82rem}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 20px;flex-wrap:wrap}
.topbar strong{color:#fff}
.tb-min{display:none}
.badge18{display:inline-block;background:var(--danger);color:#fff;font-weight:700;border-radius:6px;padding:1px 7px;font-size:.8rem}

/* ---------- header / nav ---------- */
header.site{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;box-shadow:var(--shadow)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 20px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--navy);font-size:1.15rem}
.brand img{width:34px;height:34px}
.brand span small{display:block;font-size:.62rem;font-weight:600;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
nav.main ul{list-style:none;display:flex;gap:18px;margin:0;padding:0;align-items:center}
nav.main a{color:var(--ink);font-weight:600;font-size:.95rem;white-space:nowrap}
nav.main a:hover{color:var(--cta);text-decoration:none}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:1.2rem;cursor:pointer}

/* ---------- hero ---------- */
.hero{background:linear-gradient(160deg,var(--navy),var(--navy-2));color:#eaf0f8;padding:34px 0 26px}
.hero h1{color:#fff}
.hero p.lede{font-size:1.1rem;color:#c5d1e2;max-width:760px}
.trust-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.trust-row .chip{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#eaf0f8;border-radius:30px;padding:6px 14px;font-size:.85rem;font-weight:600}
.trust-row .chip b{color:var(--gold)}
.hero-lede{color:#dfe7f3;font-size:1.06rem;line-height:1.6;margin:.6em 0 0;max-width:820px}
.hero-lede strong{color:#fff}
.hero-byline{color:#c5d1e2;font-size:.92rem;margin:.5em 0 0}
.hero-byline a{color:#fff;text-decoration:underline}
.hero-byline strong{color:#fff}
/* E-E-A-T trust bar (above the fold) */
.eeat-bar{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin:14px 0 0;padding:12px 14px;font-size:.86rem;color:#dbe4f2;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:10px}
.eeat-bar li{display:flex;align-items:center;gap:6px}
.eeat-bar b{color:var(--gold);font-size:.95rem}
.eeat-bar a{color:#fff;font-weight:700;text-decoration:underline}
/* first-person "tested" note under the table H2 */
.test-note{background:#f2f6fc;border-left:4px solid var(--gold);border-radius:0 8px 8px 0;padding:11px 15px;margin:12px 0;font-size:.98rem;color:var(--ink)}
.test-note b{color:var(--gold);margin-right:4px}
.test-note .by{color:var(--muted);font-style:italic;font-size:.9rem}
/* light trust row on white background (below the toplist) */
.trust-row.light{margin:14px 0 4px}
.trust-row.light .chip{background:#f2f6fc;border:1px solid var(--line);color:var(--navy)}
.trust-row.light .chip b{color:var(--cta)}
.lede-txt{font-size:1.08rem;color:var(--muted)}

/* ---------- toplist table ---------- */
.toplist{width:100%;border-collapse:separate;border-spacing:0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);margin:18px 0}
.toplist thead th{background:var(--navy);color:#fff;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;padding:12px 10px;text-align:left}
.toplist td{padding:14px 10px;border-top:1px solid var(--line);vertical-align:middle}
.toplist tr:hover td{background:#fbfcfe}
.rank{font-weight:800;color:var(--navy);font-size:1.1rem;width:38px;text-align:center}
.rank .pick{display:block;font-size:.6rem;color:var(--cta);font-weight:700;text-transform:uppercase}
.op-logo{width:92px;height:52px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:8px;padding:5px}
.op-name{font-weight:700;color:var(--navy)}
.bonus{font-weight:600}
.stars{color:var(--gold);font-weight:700;white-space:nowrap}
.note-num{color:var(--muted);font-size:.82rem}
.btn{display:inline-block;background:var(--cta);color:#fff !important;font-weight:700;padding:11px 18px;border-radius:9px;text-align:center;text-decoration:none !important;transition:background .15s;white-space:nowrap;border:none;cursor:pointer}
.btn:hover{background:var(--cta-hover)}
.btn.small{padding:8px 14px;font-size:.9rem}
.btn.block{display:block;width:100%}

/* ---------- mobile stacked operator cards ---------- */
.toplist-cards{display:none}
.op-card{border:1.5px solid var(--gold);border-radius:16px;background:#fff;padding:22px 18px;margin:16px 0;text-align:center;box-shadow:var(--shadow)}
.op-card-logo{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:14px;padding:20px 26px;box-shadow:var(--shadow);background:#fff;margin-bottom:6px}
.op-card-logo img{max-height:52px;width:auto;object-fit:contain}
.op-card-name{font-size:1.5rem;font-weight:800;color:var(--navy);margin:10px 0 6px}
.op-card-badge{display:inline-block;white-space:nowrap;background:var(--gold);color:#3a2c00;font-weight:800;line-height:1;letter-spacing:.09em;text-transform:uppercase;padding:10px 22px;border-radius:22px;font-size:.8rem;margin:2px 0 12px}
.op-card-badge.rank{background:#eef2f8;color:var(--navy);letter-spacing:.04em;min-width:64px;text-align:center}
.op-card-bonus{font-size:1.5rem;font-weight:800;color:var(--navy);line-height:1.25;margin:4px 0 16px}
.op-card-pills{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.op-card-pills span{border:1px solid var(--line);border-radius:26px;padding:11px 18px;color:var(--ink);font-size:.98rem;background:#fbfcfe;white-space:nowrap}
.op-card-rating{margin:2px 0 16px;font-size:1.15rem}
.op-card-rating .stars{font-size:1.35rem;vertical-align:middle}
.op-card-rating b{color:var(--navy);vertical-align:middle;margin-left:6px}
.op-card .btn.block{font-size:1.05rem;padding:16px 18px;letter-spacing:.05em;text-transform:uppercase}
.rg-mini{color:var(--muted);font-size:.84rem;margin:12px 0 0}

/* highlighted #1 pick card */
.pick-card{display:grid;grid-template-columns:120px 1fr auto;gap:18px;align-items:center;background:var(--card);border:2px solid var(--cta);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-lg);margin:18px 0;position:relative}
.pick-card .flag{position:absolute;top:-12px;left:16px;background:var(--cta);color:#fff;font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:20px;text-transform:uppercase;letter-spacing:.05em}
.pick-card img.logo{width:120px;height:70px;object-fit:contain}

/* ---------- content cards / reviews ---------- */
.section{padding:8px 0 4px}
.review{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin:16px 0;box-shadow:var(--shadow)}
.review-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.review-head img{width:100px;height:56px;object-fit:contain;border:1px solid var(--line);border-radius:8px;padding:5px;background:#fff}
.review-head .r-rank{background:var(--navy);color:#fff;border-radius:8px;font-weight:800;padding:4px 10px}
.pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:12px 0}
.pros-cons ul{margin:.3em 0;padding-left:1.1em}
.pros h4{color:var(--cta)}.cons h4{color:var(--danger)}
.spec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:12px 0}
.spec{background:#f9fafc;border:1px solid var(--line);border-radius:8px;padding:8px 12px}
.spec b{display:block;font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}

/* ---------- callouts ---------- */
.callout{border-left:4px solid var(--gold);background:#fffdf5;padding:12px 16px;border-radius:0 8px 8px 0;margin:16px 0}
.callout.legal{border-color:#1259c3;background:#f3f8ff}
.callout.rg{border-color:var(--danger);background:#fdf4f3}

/* mandatory RG tagline near CTAs */
.rg-tag{font-size:.78rem;color:var(--muted);margin:6px 0 0;line-height:1.4}
.rg-tag b{color:var(--danger)}

/* ---------- generic tables ---------- */
.tbl{width:100%;border-collapse:collapse;margin:14px 0;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.tbl th,.tbl td{padding:10px 12px;border:1px solid var(--line);text-align:left;font-size:.94rem}
.tbl th{background:var(--navy);color:#fff}
.tbl tr:nth-child(even) td{background:#fafbfd}

/* ---------- FAQ ---------- */
.faq details{background:#fff;border:1px solid var(--line);border-radius:8px;margin:8px 0;padding:0 16px}
.faq summary{font-weight:700;color:var(--navy);cursor:pointer;padding:14px 0;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--cta);font-weight:800}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq details p{padding-bottom:12px}

/* ---------- TOC ---------- */
.toc{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px;margin:16px 0}
.toc b{color:var(--navy)}
.toc ol{margin:.4em 0;padding-left:1.3em}
.toc a{color:#1259c3}

/* ---------- author box ---------- */
.author-box{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin:20px 0}
.author-box img{width:64px;height:64px;border-radius:50%;object-fit:cover;background:var(--navy)}
.author-box .meta{font-size:.9rem}
.author-box .meta b{color:var(--navy)}
.updated{font-size:.85rem;color:var(--muted);margin:4px 0 14px}

/* ---------- footer ---------- */
footer.site{background:var(--navy);color:#b8c4d6;margin-top:40px;padding:34px 0 16px;font-size:.92rem}
footer.site a{color:#cdd8e8}
footer.site .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:24px}
footer.site h4{color:#fff;font-size:1rem;border:0;margin:.2em 0 .6em}
footer.site ul{list-style:none;padding:0;margin:0}
footer.site ul li{margin:5px 0}
.rg-footer{background:#0a1320;border-top:1px solid rgba(255,255,255,.08);margin-top:22px;padding:14px 0;color:#aeb9cb;font-size:.82rem}
.rg-footer .wrap{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.rg-footer .badge18{background:var(--danger)}
.copyright{text-align:center;color:#7f8ba0;font-size:.8rem;margin-top:12px}

/* ---------- misc ---------- */
.breadcrumb{font-size:.83rem;color:var(--muted);margin:14px 0 2px}
.breadcrumb a{color:#1259c3}
.grid-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:16px 0}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.card h3{margin-top:0}
.center{text-align:center}
.mt0{margin-top:0}

/* ---------- responsive ---------- */
@media(max-width:860px){
  /* responsible-gambling top strip on ONE line */
  .tb-full{display:none}
  .tb-min{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
  .topbar{font-size:.72rem}
  .topbar .wrap{flex-wrap:nowrap;justify-content:center;gap:0;overflow:hidden}
  nav.main{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
  nav.main.open{display:block}
  nav.main ul{flex-direction:column;padding:10px 20px;gap:0}
  nav.main li{border-top:1px solid var(--line)}
  nav.main a{display:block;padding:12px 0}
  .nav-toggle{display:block}
  footer.site .cols{grid-template-columns:1fr}
  .pick-card{grid-template-columns:1fr;text-align:center}
  .pros-cons{grid-template-columns:1fr}
  h1{font-size:1.55rem;margin-top:.1em}
  /* keep H1 + byline compact so the H2 + toplist land above the fold */
  .hero{padding:16px 0 14px}
  .hero-byline{font-size:.82rem}
  #comparatif{padding-top:0}
  #comparatif h2{font-size:1.3rem;margin-top:.5em}
  .toplist{margin-top:10px}
  /* table → make horizontally scrollable */
  .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .toplist{min-width:640px}
}
/* swap the desktop table for stacked cards on phones */
@media(max-width:768px){
  .toplist-desktop{display:none}
  .toplist-cards{display:block}
  .pick-card{display:none} /* #1 already highlighted as first card */
  /* Mobile above-the-fold priority: H1 → author+date → H2 → table.
     Lede + full E-E-A-T bar move out of the way (kept on desktop). */
  .hero-lede{display:none}
  .eeat-bar{display:none}
  .hero{padding:14px 0 12px}
}