/* danslaforet.be — template design system (DM Serif/DM Sans, red-navy) */
*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#ffffff;--surface:#f7f2ef;--ink:#1b1f2a;--muted:#5a6374;--border:#e4e0e6;
--primary:#a6192e;--accent:#a6192e;--secondary:#14213d;--ctabg:#a6192e;--ctatext:#ffffff;
--navbg:#a6192e;--navtext:#ffffff;--footerbg:#14213d;--footertext:#c6cde0;--radius:12px}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:'DM Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:1120px;margin:0 auto;padding-left:20px;padding-right:20px}
section{padding-top:56px;padding-bottom:56px}
h1,h2,h3,h4{font-family:'DM Serif Display',Georgia,serif;line-height:1.15;color:var(--ink);font-weight:700}
h2{font-size:clamp(1.5rem,3.4vw,2.15rem);margin-bottom:.55em}
h3{font-size:1.25rem;margin-bottom:.4em}
p{margin-bottom:1rem} a{color:var(--secondary)}
img{max-width:100%;display:block}
ul,ol{margin:0 0 1rem 1.2em} li{margin-bottom:.4em}
.btn{display:inline-block;background:var(--ctabg);color:var(--ctatext);font-weight:700;text-decoration:none;
padding:13px 22px;border-radius:var(--radius);border:0;text-align:center;min-height:44px;line-height:1.3;transition:filter .15s}
.btn:hover{filter:brightness(.94)}
.btn small{display:block;font-weight:600;font-size:.66rem;opacity:.85}
.btn-ghost,.btn.ghost{background:transparent;color:var(--primary);border:2px solid var(--primary)}
.btn.block{display:block;width:100%}
.muted{color:var(--muted)}
.bonus-pill{display:inline-block;background:linear-gradient(135deg,#f6c453,#d99514);color:#3a2a05;font-weight:800;
padding:7px 14px;border-radius:999px;font-size:.92rem;white-space:nowrap}
/* NAV */
.nav{background:var(--navbg);position:sticky;top:0;z-index:50}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px}
.sg-nav-logo{display:flex;align-items:center;gap:9px;color:#fff;text-decoration:none;font-family:'DM Serif Display';font-weight:700;font-size:1.15rem}
.sg-nav-logo .dot{width:34px;height:34px;border-radius:8px;background:#fff;color:var(--primary);display:grid;place-items:center;font-weight:800}
.sg-nav-logo .dot svg{width:21px;height:21px;display:block}
.sg-nav-logo b{color:#f6c453}
.nav-links{display:flex;align-items:center;gap:15px;flex-wrap:nowrap;white-space:nowrap}
.nav-links a{color:var(--navtext);text-decoration:none;font-weight:600;font-size:.82rem;opacity:.92}
.nav-links a:hover,.nav-links a.active,.nav-links a.top.active{opacity:1;text-decoration:underline}
.nav-links .has-sub{position:relative;display:flex;align-items:center}
.nav-links .has-sub > a.top::after{content:'▾';font-size:.7em;margin-left:4px;opacity:.8}
.nav-links .sub{display:none;position:absolute;top:100%;left:0;background:var(--navbg);border-radius:0 0 10px 10px;padding:8px 0;min-width:230px;box-shadow:0 16px 34px rgba(0,0,0,.28);z-index:60}
.nav-links .has-sub:hover .sub,.nav-links .has-sub:focus-within .sub{display:block}
.nav-links .sub a{display:block;white-space:nowrap;padding:9px 16px;font-size:.82rem;opacity:.9}
.nav-links .sub a:hover{background:rgba(255,255,255,.12);opacity:1;text-decoration:none}
.hamb{display:none}
/* HERO */
.hero{background:var(--surface);padding-top:26px;padding-bottom:30px}
.hero h1{font-size:clamp(1.65rem,5vw,3rem);margin-bottom:.3em}
.hero-copy{text-align:center;max-width:820px;margin:0 auto}
.byline{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:12px 0;font-size:.74rem;color:var(--muted);font-weight:500}
.hero-copy .byline{justify-content:center}
.byline img,.byline .av{width:30px;height:30px;border-radius:50%;object-fit:cover;border:2px solid var(--accent);flex-shrink:0;display:grid;place-items:center;background:var(--secondary);color:#fff;font-weight:800;font-size:.8rem}
.byline a{color:var(--secondary);font-weight:700;text-decoration:underline}
.hero-lede,.hero .lede{font-size:1.06rem;max-width:680px;color:var(--ink)}
.hero-copy .hero-lede,.hero-copy .lede{margin:0 auto}
.updated{font-size:.74rem;color:var(--muted);margin-top:8px}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0;justify-content:center}
.badge{background:#fff;border:1px solid var(--border);color:var(--secondary);padding:5px 11px;border-radius:999px;font-size:.76rem;font-weight:700}
.badge.gold{background:linear-gradient(135deg,#f6c453,#d99514);color:#3a2a05;border:0}
.badge.warn{background:#fdeef0;border-color:#e7b3ba;color:var(--primary)}
/* toplist */
.tl-intro{max-width:760px;color:var(--muted)}
.rank-num{font-family:'DM Serif Display';font-weight:800;color:var(--primary)}
.stars{color:var(--accent);font-size:.9rem;letter-spacing:1px}
.tcs{font-size:.7rem;color:var(--muted);margin-top:6px}
.podium{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:16px;align-items:end;margin-bottom:20px}
.pod{border:1px solid var(--border);border-radius:var(--radius);padding:18px;background:#fff;text-align:center}
.pod:nth-child(1){order:2}.pod:nth-child(2){order:1}.pod:nth-child(3){order:3}
.pod.first{border:2px solid var(--primary);box-shadow:0 14px 32px rgba(166,25,46,.16);padding-top:24px}
.pod-rank{font-family:'DM Serif Display';font-size:1.5rem;color:var(--primary);font-weight:700}
.pod-logo{background:#fff;border:1px solid var(--border);border-radius:8px;padding:6px;height:54px;display:flex;align-items:center;justify-content:center;margin:10px auto}
.pod-logo img{max-height:42px;max-width:130px}
.pod-name{font-family:'DM Serif Display';font-weight:700;font-size:1.1rem;margin:4px 0}
.tl-drow{display:grid;grid-template-columns:46px 128px 1fr auto 148px;gap:14px;align-items:center;
border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;margin-bottom:10px;background:#fff}
.tl-logo{background:#fff;border:1px solid var(--border);border-radius:8px;padding:5px;height:50px;display:flex;align-items:center;justify-content:center}
.tl-logo img{max-height:38px;max-width:118px}
.tl-name{font-family:'DM Serif Display';font-weight:700;font-size:1.02rem}
.mc{position:relative;border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:14px;background:#fff;display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px}
.mc.top1{border:2px solid var(--accent)}
.mc-rank{position:absolute;left:10px;top:10px;background:var(--primary);color:#fff;font-weight:800;border-radius:8px;padding:3px 9px;font-size:.85rem;font-family:'DM Serif Display'}
.mc-logo{background:#fff;border:1px solid var(--border);border-radius:8px;padding:8px;height:64px;max-width:80%;display:flex;align-items:center;justify-content:center}
.mc-logo img{max-height:46px;max-width:100%}
.mc-name{font-family:'DM Serif Display';font-weight:800;font-size:1.15rem}
.mc .btn{width:100%}
.tl-mobile{display:none}
/* comparison */
.cmp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.cmp-card{border:1px solid var(--border);border-radius:var(--radius);padding:16px;background:#fff}
.cmp-table{width:100%;border-collapse:collapse;font-size:.92rem}
.cmp-table th,.cmp-table td{padding:12px 10px;border-bottom:1px solid var(--border);text-align:left;vertical-align:middle}
.cmp-table th{background:var(--surface);font-family:'DM Serif Display'}
/* reviews */
.rev{border:1px solid var(--border);border-radius:var(--radius);padding:22px;margin-bottom:22px;background:#fff}
.rev-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.rev-logo{background:#fff;border:1px solid var(--border);border-radius:8px;padding:6px;height:56px;width:120px;display:flex;align-items:center;justify-content:center}
.rev-logo img{max-height:42px;max-width:106px}
.rev-score{margin-left:auto;text-align:right}
.rev-verdict{font-weight:700;color:var(--primary);font-size:1.05rem;margin:6px 0 10px}
.proscons{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:14px 0}
.proscons ul{list-style:none;margin:0}.proscons li{padding-left:22px;position:relative;margin-bottom:6px;font-size:.92rem}
.pros li::before{content:'✓';position:absolute;left:0;color:#1a9e5f;font-weight:800}
.cons li::before{content:'✕';position:absolute;left:0;color:#d1495b;font-weight:800}
.pc-h{font-weight:800;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
/* takeaways */
.kt{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px}
.kt ul{list-style:none;margin:0}.kt li{padding-left:26px;position:relative;margin-bottom:9px}
.kt li::before{content:'◆';position:absolute;left:0;color:var(--accent)}
.two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:26px;align-items:start}
.two-col > :only-child{grid-column:1 / -1}
.section-alt{background:var(--surface)}
/* faq */
.faq-acc details{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:10px;background:#fff}
.faq-acc summary{padding:15px 16px;font-weight:700;font-family:'DM Serif Display';cursor:pointer;list-style:none}
.faq-acc summary::-webkit-details-marker{display:none}
.faq-acc summary::after{content:'+';float:right;color:var(--primary);font-weight:800}
.faq-acc details[open] summary::after{content:'–'}
.faq-acc .fa{padding:0 16px 15px}
/* author */
.authorbox{display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:start;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px}
.authorbox img,.authorbox .av{width:120px;height:120px;border-radius:12px;object-fit:cover;border:2px solid var(--accent);display:grid;place-items:center;background:var(--secondary);color:#fff;font-family:'DM Serif Display';font-size:2.4rem;font-weight:800}
/* footer */
.footer{background:var(--footerbg);color:var(--footertext);padding:40px 0 24px;margin-top:10px}
.footer a{color:var(--footertext);text-decoration:none;opacity:.85}.footer a:hover{opacity:1}
.footer h4{color:#fff;font-size:1rem;margin-bottom:10px}
.footer-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:26px}
.footer-logo{background:#fff;display:inline-block;padding:8px 12px;border-radius:8px;font-family:'DM Serif Display';font-weight:700;color:var(--primary)}
.disclaim{background:var(--surface);border-top:1px solid var(--border);font-size:.82rem;color:var(--muted)}
/* mobile menu */
.mobile-menu{position:relative}
.mobile-menu summary{list-style:none;cursor:pointer;width:44px;height:44px;display:flex;align-items:center;justify-content:center}
.mobile-menu summary::-webkit-details-marker{display:none}
.mobile-menu .bars{width:24px;height:2px;background:var(--navtext);position:relative;display:block}
.mobile-menu .bars::before,.mobile-menu .bars::after{content:'';position:absolute;left:0;width:24px;height:2px;background:var(--navtext)}
.mobile-menu .bars::before{top:-7px}.mobile-menu .bars::after{top:7px}
.mobile-menu[open] .panel{display:block}
.mobile-menu .panel{display:none;position:absolute;right:0;top:48px;background:var(--navbg);border:1px solid var(--border);border-radius:10px;padding:8px 6px;min-width:250px;max-height:76vh;overflow:auto;box-shadow:0 14px 34px rgba(0,0,0,.22);z-index:60}
.mobile-menu .panel a{display:block;color:var(--navtext);text-decoration:none;padding:9px 14px;font-weight:600}
.mobile-menu .panel a.grp{font-weight:800;border-top:1px solid rgba(255,255,255,.14);margin-top:4px;padding-top:11px}
.mobile-menu .panel a.grp:first-child{border-top:0;margin-top:0}
.mobile-menu .panel a.sub-link{padding-left:28px;font-weight:500;font-size:.85rem;opacity:.85}
.mobile-menu .panel a.sub-link::before{content:'– ';opacity:.5}

/* ============ legacy fragment components, themed to the template ============ */
.content{background:transparent;padding:0;margin:0 0 8px}
.crumb{font-size:.78rem;color:var(--muted);padding-top:14px}
.crumb a{color:var(--muted)}
.disclosure{font-size:.86rem;color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px 16px;margin:18px 0}
.toc{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 20px;margin:0 0 24px}
.toc h2{font-size:.95rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.5em;color:var(--secondary)}
.toc ul{columns:2;list-style:none;margin:0}
.toc a{color:var(--secondary);font-size:.92rem;font-weight:600}
.callout{border-left:4px solid var(--accent);background:var(--surface);padding:14px 18px;border-radius:0 10px 10px 0;margin:1.2em 0}
.callout.warn{border-color:#d99514;background:#fdf5e7}
.callout.danger{border-color:var(--primary);background:#fdeef0}
.optable{width:100%;border-collapse:collapse;margin:1em 0;font-size:.92rem}
.optable th{background:var(--secondary);color:#fff;text-align:left;padding:10px 12px;font-size:.76rem;text-transform:uppercase;letter-spacing:.03em;font-family:'DM Sans'}
.optable td{padding:11px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
.optable tr:nth-child(even) td{background:var(--surface)}
.optable .rank{font-family:'DM Serif Display';font-weight:800;color:var(--primary);font-size:1.1rem;text-align:center}
.optable img.logo{width:112px;height:46px;object-fit:contain;background:#fff;border:1px solid var(--border);border-radius:8px;padding:5px}
.optable .score{font-family:'DM Serif Display';font-weight:800;color:var(--primary)}
.op-card{display:flex;gap:18px;align-items:flex-start;border:1px solid var(--border);border-radius:var(--radius);padding:18px;margin:16px 0;background:#fff}
.op-card .lead{flex:0 0 130px;text-align:center}
.op-card .lead img{width:120px;height:50px;object-fit:contain;margin:0 auto 8px;background:#fff;border:1px solid var(--border);border-radius:8px;padding:5px}
.op-card .rankpill{display:inline-block;background:var(--primary);color:#fff;font-family:'DM Serif Display';font-weight:800;border-radius:8px;padding:2px 10px;font-size:.85rem}
.op-card .body{flex:1;min-width:0}
.op-card .meta{display:flex;flex-wrap:wrap;gap:6px;margin:.5em 0}
.op-card .tag{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:3px 8px;font-size:.76rem;color:var(--muted)}
.op-card .cta{flex:0 0 160px;text-align:center}
.data{width:100%;border-collapse:collapse;margin:1em 0;font-size:.9rem}
.data th,.data td{border:1px solid var(--border);padding:9px 12px;text-align:left}
.data th{background:var(--surface);font-family:'DM Serif Display'}
.data tr:nth-child(even) td{background:var(--surface)}
.scroll-x{overflow-x:auto}
.grid{display:grid;gap:18px}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.tile{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:18px}
.tile h3{margin-top:0}
/* the build injects RG strip before footer */
.rg-strip{background:var(--secondary);color:#fff;text-align:center;padding:12px;font-weight:600;font-size:.88rem}
.rg-strip a{color:#f6c453}

/* ============ responsive ============ */
@media(max-width:900px){
 .two-col,.proscons,.faq-grid,.footer-cols,.podium{grid-template-columns:1fr!important}
 .podium .pod:nth-child(1),.podium .pod:nth-child(2),.podium .pod:nth-child(3){order:0}
 .cmp-desktop,.tl-desktop{display:none!important}
 .tl-mobile{display:block!important}
 .cmp-grid{grid-template-columns:1fr 1fr}
 .nav-links{display:none}
 .hamb{display:block}
 .authorbox{grid-template-columns:1fr;text-align:center;justify-items:center}
 .toc ul{columns:1}
 .op-card{flex-direction:column}.op-card .lead,.op-card .cta{flex:1;width:100%}
 h1{font-size:26px!important}h2{font-size:22px!important}
 section{padding-top:40px;padding-bottom:40px}
 .hero{padding-top:16px!important;padding-bottom:16px!important}
 .optable img.logo{width:78px}
}
@media(min-width:901px){.tl-mobile{display:none}}

/* ===== mobile above-the-fold: H1 + author + updated + affiliate table (H2) ===== */
@media(max-width:900px){
 .hero{padding-top:10px!important;padding-bottom:8px!important}
 .hero h1{margin-bottom:.12em}
 /* keep author + updated; trim secondary hero content that pushes the table down */
 .badges{display:none!important}
 .lede-more,.lede-toggle{display:none!important}
 .hero-lede,.hero .lede{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.92rem;margin:6px auto 0}
 .byline{margin:6px 0}
 .updated{margin:6px 0 2px}
 /* pull the ranking H2 + table up */
 #toplist{padding-top:12px!important}
 .tl-intro{display:none!important}
 /* disclosure + Sommaire now sit BELOW the table, so they no longer block the fold */
 .disclosure{margin:14px 0 8px;font-size:.82rem}
 #toplist h2,.content h2:first-of-type{margin-top:0}
 .hero + div .content > h2:first-child{margin-top:0}
}