:root{
--ink:#141726;--ink-soft:#4a5068;--line:#e7e9f2;--line2:#eef0f7;
--bg:#ffffff;--bg-soft:#f6f7fb;--bg-card:#ffffff;
--brand:#4f2ec9;--brand-2:#7c4dff;--gold:#f4b81e;--green:#12a150;--green-d:#0e8542;--red:#e0454b;
--shadow:0 1px 2px rgba(20,23,38,.05),0 8px 26px rgba(20,23,38,.07);
--radius:16px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,.masthead__logo,.tcard__name,.chip-ring,.tcard__score{font-family:"Jost","Plus Jakarta Sans",Arial,sans-serif}
a{color:var(--brand);text-decoration:none}a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px;top:0;background:var(--brand);color:#fff;padding:10px 16px;border-radius:0 0 10px 0;z-index:200}
.skip:focus{left:0}
/* masthead */
.masthead{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
.masthead__in{display:flex;align-items:center;justify-content:space-between;height:70px}
.masthead__logo{display:inline-flex;flex-direction:column;align-items:flex-start;gap:0;font-weight:700;font-size:22px;color:var(--ink);letter-spacing:.2px}
.masthead__logo:hover{text-decoration:none}
.masthead__logo-img{height:38px;width:auto;display:block;margin-bottom:-6px}
.masthead__tag{align-self:stretch;display:block;font-size:9.5px;font-weight:700;letter-spacing:.14em;line-height:1;color:var(--brand-2);text-transform:uppercase;white-space:nowrap;padding-top:3px;border-top:1px solid var(--line)}
@media(max-width:360px){.masthead__tag{font-size:8.5px;letter-spacing:.08em}}
.nav{display:flex;align-items:center;gap:14px}
.nav__list{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.nav__item{position:relative}
.nav__top{display:inline-flex;align-items:center;gap:4px;color:var(--ink-soft);font-size:15px;font-weight:600;padding:10px 12px;border-radius:10px;cursor:pointer;white-space:nowrap}
.nav__top::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-1px);opacity:.6}
.nav__item:hover>.nav__top,.nav__item:focus-within>.nav__top{color:var(--brand);background:var(--bg-soft)}
.nav__caret{display:none}
.nav__sub{position:absolute;top:calc(100% + 8px);left:0;min-width:238px;list-style:none;margin:0;padding:8px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .16s ease,transform .16s ease;z-index:120}
.nav__sub::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}
.nav__item:hover>.nav__sub,.nav__item:focus-within>.nav__sub{opacity:1;visibility:visible;transform:translateY(0)}
.nav__sub a{display:block;padding:9px 12px;border-radius:9px;color:var(--ink-soft);font-size:14px;font-weight:600}
.nav__sub a:hover{color:var(--brand);background:var(--bg-soft);text-decoration:none}
.burger{display:none;background:none;border:0;flex-direction:column;gap:5px;cursor:pointer;padding:8px}
.burger span{width:24px;height:2px;background:var(--ink);border-radius:2px}
.cta{display:inline-block;background:linear-gradient(180deg,var(--green),var(--green-d));color:#fff;font-weight:700;padding:12px 20px;border-radius:10px;font-size:15px;text-align:center;box-shadow:0 6px 16px rgba(18,161,80,.28);border:0;cursor:pointer;transition:transform .06s ease,filter .15s}
.cta:hover{filter:brightness(1.06);text-decoration:none;color:#fff}
.cta:active{transform:translateY(1px)}
.cta--sm{padding:9px 15px;font-size:14px}
.cta--full{display:block;width:100%}
.ghost{display:inline-block;font-weight:700;color:var(--brand)}
/* sections */
main{display:block}
.sec{padding:34px 0}
.sec--alt{background:var(--bg-soft);border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.sec__lead{color:var(--ink-soft);font-size:18px;max-width:820px}
h1{font-size:38px;line-height:1.12;margin:.15em 0 .35em;letter-spacing:-.4px}
h2{font-size:27px;line-height:1.2;margin:.2em 0 .5em;letter-spacing:-.2px}
h3{font-size:20px;margin:1.5em 0 .35em}
p{margin:.75em 0}
ul,ol{margin:.6em 0 1em;padding-left:1.25em}li{margin:.34em 0}
.sec p,.sec li{max-width:none}
/* hero */
.hero{position:relative;overflow:hidden;padding-top:40px;
 background:
  radial-gradient(1100px 520px at 80% -25%,rgba(124,77,255,.30),transparent 60%),
  radial-gradient(760px 380px at 3% -5%,rgba(244,184,30,.22),transparent 55%),
  radial-gradient(620px 360px at 55% 125%,rgba(79,46,201,.18),transparent 60%),
  linear-gradient(180deg,#f7f4ff,#ffffff 70%);
 background-size:220% 220%,220% 220%,220% 220%,auto;
 animation:heroHue 20s ease-in-out infinite}
@keyframes heroHue{0%,100%{background-position:0% 0%,100% 0%,50% 100%,0 0}
 50%{background-position:100% 55%,0% 45%,50% 0%,0 0}}
.hero .wrap{position:relative;z-index:2}
.hero::before{content:"";position:absolute;inset:-45% -12%;pointer-events:none;z-index:1;
 background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.35) 46%,rgba(255,255,255,.85) 50%,rgba(255,255,255,.35) 54%,transparent 68%);
 transform:translateX(-75%) rotate(2deg);animation:heroShine 7s ease-in-out infinite}
@keyframes heroShine{0%{transform:translateX(-75%) rotate(2deg);opacity:0}
 30%{opacity:.95}62%{opacity:.95}100%{transform:translateX(125%) rotate(2deg);opacity:0}}
.hero::after{content:"";position:absolute;top:-130px;right:-70px;width:360px;height:360px;
 pointer-events:none;z-index:0;filter:blur(14px);
 background:radial-gradient(circle at 32% 30%,rgba(124,77,255,.38),transparent 70%);
 animation:heroFloat 11s ease-in-out infinite}
@keyframes heroFloat{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-26px,20px) scale(1.06)}}
.hero h1{background:linear-gradient(100deg,var(--ink) 0%,var(--brand) 34%,var(--brand-2) 50%,var(--gold) 64%,var(--ink) 100%);
 background-size:220% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
 animation:heroText 7.5s linear infinite}
@keyframes heroText{to{background-position:220% center}}
@media (prefers-reduced-motion:reduce){.hero,.hero::before,.hero::after,.hero h1,.notch-band--grad{animation:none}
 .hero h1{-webkit-text-fill-color:var(--ink);color:var(--ink)}}
.byline{display:flex;align-items:center;gap:14px;margin-top:20px}
.byline--card{display:inline-flex;align-items:center;gap:15px;margin-top:22px;padding:14px 20px 14px 18px;max-width:100%;background:var(--bg-card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.byline--card::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:linear-gradient(180deg,var(--brand),var(--brand-2),var(--gold))}
.byline img{border-radius:50%;object-fit:cover}
.byline--card img{border-radius:50%;flex:none}
.byline>img{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:var(--shadow)}
.byline__who a{font-weight:700;color:var(--ink)}
.byline__role{color:var(--ink-soft);font-size:14px}
.byline__meta{color:var(--ink-soft);font-size:13px;margin-top:2px;display:flex;flex-wrap:wrap;gap:4px 14px}
.byline__meta span{position:relative}
.byline__meta span+span::before{content:"·";position:absolute;left:-9px;color:#c3c7d6}
/* disclosure banners */
.aff-disclosure{background:#f3f0ff;border:1px solid #e3dcff;border-radius:12px;padding:12px 16px;font-size:14px;color:#4a4470;margin:18px 0}
.rg-tagline{background:#fff5f4;border:1px solid #f6d9d7;border-left:4px solid var(--red);border-radius:12px;padding:12px 16px;font-size:14px;color:#8a3b3b;margin:16px 0}
.rg-tagline b{color:#6f2b2b}
/* notch band */
.notch-band{height:14px}
.notch-band--grad{background:linear-gradient(90deg,var(--brand),var(--brand-2),var(--gold),var(--brand-2),var(--brand));background-size:220% 100%;opacity:.92;animation:bandSlide 9s linear infinite}
@keyframes bandSlide{to{background-position:220% 0}}
/* tldr / callout */
.tldr{background:linear-gradient(180deg,#faf8ff,#fff);border:1px solid #e6ddff;border-radius:var(--radius);padding:6px 22px 14px;margin:6px 0 22px;box-shadow:var(--shadow)}
.tldr h2{font-size:19px;margin:.8em 0 .2em}
/* TOPLIST cards */
.toplist{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:14px;counter-reset:none}
/* ---- Carte operateur : mobile-first (colonne centree facon fiche) ---- */
.tcard{position:relative;background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center;gap:11px;padding:22px 18px 18px}
.tcard--top{border-color:#d8c6ff;box-shadow:0 2px 4px rgba(79,46,201,.08),0 14px 34px rgba(79,46,201,.14)}
.tcard__notch{position:absolute;inset:0 auto 0 0;width:5px;background:linear-gradient(180deg,var(--green),var(--green-d))}
.tcard__ribbon{display:none;position:absolute;top:0;right:0;background:linear-gradient(180deg,var(--gold),#eaa20d);color:#3a2a00;font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;padding:5px 12px;border-radius:0 var(--radius) 0 12px}
.tcard__rank{position:absolute;top:12px;left:15px}
.chip-ring{display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;color:#b1810c}
.tcard--top .chip-ring{color:#a9790b}
.tcard__logo{display:inline-flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 18px;box-sizing:border-box;width:224px;height:112px;flex:none}
.tcard__logo img{width:100%;height:100%;object-fit:contain;display:block}
.tcard__badge{display:inline-block;background:#141726;color:#fff;font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;padding:5px 13px;border-radius:8px}
.tcard__name{font-weight:800;font-size:23px;color:var(--ink);letter-spacing:.3px}
.tcard__rating{display:flex;align-items:center;justify-content:center;gap:8px}
.tcard__stars{color:var(--gold);font-size:16px;letter-spacing:1px}
.tcard__score{font-weight:800;font-size:16px;color:var(--green-d)}
.tcard__tags{width:100%;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.pill{background:#fff;border:1px solid var(--line);border-radius:8px;padding:4px 12px;font-size:11px;color:var(--ink-soft);font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.tcard__bonus{width:100%;border:1px solid var(--line);border-radius:14px;background:var(--bg-soft);padding:15px 16px;display:flex;flex-direction:column;align-items:center;gap:3px}
.bonus__label{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--ink-soft);font-weight:700}
.bonus__amt{font-weight:800;font-size:21px;color:var(--ink);line-height:1.15}
.bonus__sub{font-size:14px;color:var(--ink-soft)}
.bonus__specs{display:flex;justify-content:center;gap:34px;margin-top:8px}
.spec{display:flex;flex-direction:column;gap:2px}
.spec__k{font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--ink-soft);font-weight:700}
.spec__v{font-size:14px;color:var(--ink);font-weight:700}
.bonus__code{margin-top:8px;font-size:12px;font-weight:800;color:var(--green-d);text-transform:uppercase;letter-spacing:.3px}
.tcard__desc{width:100%;padding-top:14px;border-top:1px dashed var(--line);font-size:13.5px;color:var(--ink-soft);line-height:1.55}
.tcard__desc b{color:var(--ink)}
.tcard__act{width:100%;display:flex;flex-direction:column;gap:6px}
.tcard__terms{font-size:11px;color:var(--ink-soft);text-align:center}
/* ---- Desktop : retour a une ligne compacte ---- */
@media(min-width:861px){
 .tcard{display:grid;align-items:center;text-align:left;gap:2px 18px;padding:16px 20px 16px 22px;grid-template-columns:46px 158px minmax(104px,1fr) 1.55fr 1.3fr;grid-template-areas:"rank logo name bonus act" "rank logo rating bonus act" "rank logo tags bonus act"}
 .tcard__notch{background:linear-gradient(180deg,var(--brand),var(--brand-2))}
 .tcard--top .tcard__notch{background:linear-gradient(180deg,var(--gold),#f79b1e)}
 .tcard__ribbon{display:block}
 .tcard__badge{display:none}
 .tcard__rank{position:static;grid-area:rank;justify-self:center}
 .chip-ring{width:38px;height:38px;border-radius:50%;border:2px solid var(--brand);color:var(--brand);font-size:17px}
 .tcard--top .chip-ring{border-color:var(--gold);color:#a9790b;background:#fff9e9}
 .tcard__logo{grid-area:logo;justify-self:start;width:150px;height:80px;padding:9px 12px}
 .tcard__name{grid-area:name;font-size:17px;align-self:end}
 .tcard__rating{grid-area:rating;justify-content:flex-start}
 .tcard__stars{font-size:15px}
 .tcard__score{font-size:20px;color:var(--ink)}
 .tcard__tags{grid-area:tags;justify-content:flex-start;align-self:start;margin-top:2px}
 .pill{text-transform:none;letter-spacing:0;border-radius:999px;background:var(--bg-soft);font-size:12px;padding:3px 11px}
 .tcard__bonus{grid-area:bonus;border:0;background:none;padding:0;align-items:flex-start;text-align:left;gap:1px}
 .bonus__amt{font-size:17px;color:var(--green-d)}
 .bonus__sub{font-size:13px}
 .bonus__specs,.bonus__code,.tcard__desc{display:none}
 .tcard__act{grid-area:act}
}
/* reviews pros/cons */
.rev{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:14px 0 6px}
.rev__col{border:1px solid var(--line);border-radius:14px;padding:14px 18px;background:var(--bg-card)}
.rev__col--pro{background:#f2fbf5;border-color:#cdefd8}
.rev__col--con{background:#fff6f5;border-color:#f5dad8}
.rev__h{display:block;font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.rev__h--pro{color:var(--green-d)}.rev__h--con{color:var(--red)}
.rev__list{list-style:none;padding:0;margin:0}
.rev__col--pro li::before{content:"✓ ";color:var(--green);font-weight:800}
.rev__col--con li::before{content:"✕ ";color:var(--red);font-weight:800}
.rev__meta{font-size:13px;color:var(--ink-soft);background:var(--bg-soft);border-radius:10px;padding:9px 14px;margin-top:8px}
/* generic + comparison tables */
.tbl-scroll{overflow-x:auto;margin:18px 0;border:1px solid var(--line);border-radius:14px}
.tbl-scroll table,table.dtable{width:100%;border-collapse:collapse;min-width:560px;font-size:14px}
.tbl-scroll th,table.dtable th{background:#0e1116;color:#fff;text-align:left;padding:11px 13px;font-weight:600;font-size:13px}
.tbl-scroll td,table.dtable td{padding:11px 13px;border-bottom:1px solid var(--line);color:var(--ink)}
.tbl-scroll tr:nth-child(even) td,table.dtable tr:nth-child(even) td{background:var(--bg-soft)}
table.dtable{border:1px solid var(--line);border-radius:14px;overflow:hidden}
/* cards grid */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin:18px 0}
.card{background:var(--bg-card);border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:var(--shadow)}
.card h3{margin-top:0}
/* faq */
.faq{background:var(--bg-card);border:1px solid var(--line);border-radius:12px;margin:9px 0;overflow:hidden}
.faq__q{cursor:pointer;font-weight:700;padding:15px 18px;font-size:16px;list-style:none}
.faq__q::-webkit-details-marker{display:none}
.faq__q::after{content:"+";float:right;color:var(--brand);font-weight:800}
.faq[open] .faq__q::after{content:"−"}
.faq__body{padding:0 18px 14px}.faq__body p{margin:0;color:var(--ink-soft)}
/* author box */
.authorbox__h{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--ink-soft);font-weight:800;margin:0}
.keyed{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius)}
/* related */
.related{background:linear-gradient(180deg,#faf8ff,#fff);border:1px solid #e6ddff;border-radius:var(--radius);padding:18px 22px;margin:8px 0}
.related h2{font-size:18px;margin:0 0 .4em}
.related a{display:inline-block;margin:4px 12px 4px 0;font-weight:600}
.logo-fallback{display:inline-flex;align-items:center;justify-content:center;background:#0e1116;color:var(--gold);border-radius:8px;width:112px;height:58px;font-weight:800;font-size:14px;text-align:center;padding:4px}
/* legacy content classes */
.meta-line{color:var(--ink-soft);font-size:14px}
.author{display:flex;gap:14px;align-items:center;background:var(--bg-card);border:1px solid var(--line);border-radius:14px;padding:16px;margin:14px 0;font-size:14px;color:var(--ink-soft);box-shadow:var(--shadow)}
.author .av{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--brand-2),var(--brand));display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;flex:0 0 52px}
.author .av--img{padding:0;background:none;object-fit:cover}
.author b{color:var(--ink)}
.pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:12px 0}
.pros-cons ul{list-style:none;padding:14px 18px;margin:0;border:1px solid var(--line);border-radius:14px}
.pros-cons .pros{background:#f2fbf5;border-color:#cdefd8}
.pros-cons .cons{background:#fff6f5;border-color:#f5dad8}
.pros li::before{content:"✓ ";color:var(--green);font-weight:800}
.cons li::before{content:"✕ ";color:var(--red);font-weight:800}
@media(max-width:680px){.pros-cons{grid-template-columns:1fr}}
/* footer */
.foot{background:#0e1116;color:#aab1c4;margin-top:10px;padding:36px 0 26px;font-size:14px}
.foot a{color:#c7cede}.foot a:hover{color:#fff}
.foot__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-bottom:20px}
.foot__h{color:#fff;font-weight:700;margin-bottom:8px;font-size:15px}
.foot__list{list-style:none;padding:0;margin:0}.foot__list li{margin:6px 0}
.disclosure{color:#8b93a7;font-size:13px;border-top:1px solid #232838;padding-top:14px;line-height:1.6}
.disclosure a{color:var(--gold)}
@media(max-width:860px){
 .rev{grid-template-columns:1fr}.foot__cols{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
 .nav{position:fixed;inset:70px 0 auto 0;background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 18px;border-bottom:1px solid var(--line);box-shadow:var(--shadow);display:none;max-height:calc(100vh - 70px);overflow-y:auto}
 .nav.is-open{display:flex}.burger{display:flex}
 .nav__list{flex-direction:column;align-items:stretch;gap:0;width:100%}
 .nav__item{border-bottom:1px solid var(--line2)}
 .nav__top{flex:1;padding:13px 2px}.nav__top::after{display:none}
 .nav__item{display:flex;flex-wrap:wrap;align-items:center}
 .nav__caret{display:inline-flex;align-items:center;justify-content:center;width:40px;height:44px;background:none;border:0;cursor:pointer;margin-left:auto}
 .nav__caret::after{content:"";width:8px;height:8px;border-right:2px solid var(--ink-soft);border-bottom:2px solid var(--ink-soft);transform:rotate(45deg);transition:transform .18s ease}
 .nav__item.is-open .nav__caret::after{transform:rotate(-135deg)}
 .nav__sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:0 0 8px;min-width:0;width:100%;display:none;background:transparent}
 .nav__item.is-open>.nav__sub{display:block}
 .nav__sub a{padding:11px 12px;background:var(--bg-soft);border-radius:9px;margin:3px 0}
 .nav .cta--sm{margin-top:14px;width:100%}
 h1{font-size:27px}h2{font-size:22px}
 /* Above-the-fold mobile : H1 + auteur/date, puis le tableau d'affiliation et son H2 */
 .hero{padding-top:14px}
 .hero .crumb{display:none}
 .hero .sec__lead{display:none}
 .byline{margin-top:12px;gap:11px}
 .byline img{width:40px;height:40px}
 .byline__meta{gap:2px 12px;margin-top:3px}
 .byline__meta span:nth-child(2),.byline__meta span:nth-child(3){display:none}
 .notch-band{height:8px}
 .sec{padding:18px 0}
 .sec--toplist>.wrap>p{display:none}
 .tcard__tags{gap:6px}
 .tcard__tags .pill{font-size:10px;padding:3px 9px;letter-spacing:.2px}
 .aff-disclosure,.rg-tagline{margin:12px 0}
 .foot__cols{grid-template-columns:1fr}
}