@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');:root{--night:#101b28;--navy:#152338;--green:#c8ff70;--paper:#f5f7fb;--ink:#142033;--muted:#69788d;--line:#e3e8ef}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 'DM Sans',Arial,sans-serif}a{color:inherit}.shell{max-width:1180px;margin:auto;padding:0 24px}.top{background:#0b1420;color:#b9c5d5;font-size:12px;padding:8px 0}.top .shell{display:flex;justify-content:space-between}.head{position:sticky;top:0;z-index:5;background:#fffE;backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}.nav{height:76px;display:flex;align-items:center;justify-content:space-between}.logo{font:800 23px Manrope;text-decoration:none;letter-spacing:-1px}.logo i{font-style:normal;color:#6b9c32}.links{display:flex;align-items:center;gap:25px}.links a{text-decoration:none;font-weight:700;font-size:14px}.button{display:inline-flex;align-items:center;justify-content:center;background:var(--green);color:#162217;padding:13px 20px;border-radius:99px;text-decoration:none;font-weight:800;box-shadow:0 8px 22px #9fc95c28}.hero{position:relative;overflow:hidden;background:radial-gradient(ellipse at 85% 20%,#365b6b 0,transparent 37%),linear-gradient(120deg,#101b28,#1d3047);color:white;padding:78px 0 66px}.hero:after{content:"";position:absolute;width:360px;height:360px;border:1px solid #ffffff16;border-radius:50%;right:7%;top:15%;box-shadow:0 0 0 38px #ffffff08,0 0 0 76px #ffffff05}.heroGrid{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}.eyebrow{color:#96c957;text-transform:uppercase;letter-spacing:2px;font-size:12px;font-weight:800}.hero h1{font:800 clamp(42px,6vw,70px)/1.02 Manrope;letter-spacing:-3px;margin:15px 0}.hero p{max-width:630px;color:#cfdae7;font-size:18px}.heroActions{display:flex;gap:14px;align-items:center;margin-top:26px}.ghost{color:#fff;text-decoration:none;font-weight:700;padding:12px}.pricePanel{background:#ffffff12;border:1px solid #ffffff25;border-radius:26px;padding:28px;backdrop-filter:blur(10px)}.pricePanel .big{font:800 52px Manrope;color:var(--green)}.pricePanel p{font-size:14px}.chips{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px}.chip{border:1px solid #ffffff30;padding:7px 11px;border-radius:40px;color:#e7eef5;font-size:12px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:-24px;position:relative;z-index:2}.stat{background:#fff;padding:19px;border:1px solid var(--line);border-radius:16px;box-shadow:0 10px 30px #10233a0c}.stat strong{display:block;font:800 19px Manrope}.stat span{font-size:12px;color:var(--muted)}section.block{padding:74px 0}.sectionTitle{font:800 clamp(30px,4vw,44px)/1.12 Manrope;letter-spacing:-1.5px;margin:8px 0 10px}.sub{color:var(--muted);max-width:720px}.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}.plan{background:#fff;border:1px solid var(--line);border-radius:22px;padding:25px;position:relative}.plan.pop{border:2px solid #9bce50;box-shadow:0 16px 40px #8eb54b23}.badge{position:absolute;right:16px;top:16px;background:#eff8e4;color:#537929;padding:5px 10px;border-radius:40px;font-size:11px;font-weight:800}.plan h3{font:700 21px Manrope;margin:0}.money{font:800 48px Manrope;letter-spacing:-2px;margin:15px 0 0}.monthly{color:var(--muted);font-size:14px}.plan ul{list-style:none;padding:0;margin:20px 0;color:#526176}.plan li{padding:8px 0;border-bottom:1px solid #eef1f4}.plan li:before{content:"✓";color:#60922b;font-weight:bold;margin-right:10px}.plan .button{width:100%}.trust{background:#eaf0e8;border-radius:24px;padding:26px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.trust h3{font:700 17px Manrope;margin:4px 0}.trust p{font-size:14px;color:var(--muted);margin:0}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px}.step{background:white;border:1px solid var(--line);border-radius:18px;padding:22px}.num{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--green);font-weight:800}.step h3{font:700 17px Manrope}.step p{color:var(--muted);font-size:14px}.devices{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:24px}.device{background:white;border:1px solid var(--line);border-radius:18px;padding:19px}.device b{font:700 16px Manrope}.device p{color:var(--muted);font-size:13px}.faq{max-width:850px}.faq details{background:#fff;border:1px solid var(--line);padding:18px 20px;border-radius:14px;margin:10px 0}.faq summary{font-weight:700;cursor:pointer}.faq p{color:var(--muted)}.blogGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}.blogCard{background:white;border:1px solid var(--line);padding:20px;border-radius:18px;text-decoration:none}.blogCard:hover{border-color:#8eb54b}.blogCard h3{font:700 17px Manrope;margin:6px 0}.blogCard p{font-size:13px;color:var(--muted)}.cta{background:var(--green);padding:34px;border-radius:22px;display:flex;justify-content:space-between;align-items:center;gap:22px}.cta h2{font:800 28px Manrope;margin:0}.cta p{margin:5px 0 0}.darkbtn{background:var(--night);color:#fff;padding:13px 20px;border-radius:30px;text-decoration:none;font-weight:800;white-space:nowrap}.footer{background:var(--night);color:#cbd6e3;padding:46px 0;margin-top:70px}.footergrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px}.footer a{color:#d3f6a1}.note{font-size:12px;color:#aebaca;margin-top:20px}.legal{font-size:12px;color:#8796aa}@media(max-width:800px){.heroGrid{grid-template-columns:1fr}.plans{grid-template-columns:1fr}.steps{grid-template-columns:repeat(2,1fr)}.devices{grid-template-columns:repeat(2,1fr)}.blogGrid{grid-template-columns:1fr 1fr}.trust{grid-template-columns:1fr}.stats{margin-top:16px}.links{gap:12px}.links a:nth-child(2),.links a:nth-child(3){display:none}.hero{padding:54px 0}.footergrid{grid-template-columns:1fr 1fr}}@media(max-width:520px){.shell{padding:0 17px}.hero h1{letter-spacing:-2px}.steps,.devices,.blogGrid{grid-template-columns:1fr}.cta{align-items:flex-start;flex-direction:column}.top .shell span:last-child{display:none}}
:root{--night:#17152b;--green:#ff795d;--paper:#f8f6fb;--ink:#201d35;--muted:#77748b;--line:#e9e4ef}.button{background:#ff795d;color:#fff;box-shadow:0 8px 22px #ed715455}.hero{background:radial-gradient(ellipse at 82% 10%,#704a91 0,transparent 40%),linear-gradient(122deg,#1a1832,#382459 58%,#243552)}.eyebrow{color:#ff9a76}.plan.pop{border-color:#ff795d;box-shadow:0 16px 42px #ff795d26}.badge{background:#fff0ec;color:#c14f3a}.plan li:before{color:#ee7058}.trust{background:#eee9f7}.cta{background:#ff795d;color:#fff}.num{background:#ff795d;color:white}.footer{background:#17152b}.footer a{color:#ffb29c}.heroVisual{position:relative;border-radius:26px;padding:15px;background:#ffffff13;border:1px solid #ffffff33;box-shadow:0 25px 70px #0c0d1e66;transform:rotate(1deg)}.heroVisualTop{display:flex;justify-content:space-between;align-items:center;color:#e9dcf4;font-size:10px;letter-spacing:1.7px;font-weight:800;padding:2px 5px 12px}.livePill{padding:5px 9px;border-radius:40px;background:#ff795d;color:white;letter-spacing:.5px}.livePill i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#fff;margin-right:4px}.heroArtwork{width:100%;display:block;border-radius:16px}.floatingOffer{position:absolute;left:30px;right:30px;bottom:54px;background:#fff;color:#211d36;border:1px solid #ffffffaa;border-radius:17px;padding:13px 15px;display:flex;align-items:center;gap:11px;box-shadow:0 12px 32px #11162944}.floatingOffer b,.floatingOffer small{display:block}.floatingOffer b{font-size:13px}.floatingOffer small{font-size:10px;color:#77748b}.floatingOffer strong{margin-left:auto;color:#32214c;font-size:17px}.floatingOffer strong small{display:inline;color:#77748b;font-weight:500}.offerIcon{width:31px;height:31px;border-radius:10px;background:#fff0ec;color:#eb7259;display:grid;place-items:center}.visualCaption{text-align:center;color:#e7dff1;font-size:11px;padding:13px 0 0}.plan .button{background:#ff795d}.faq details[open]{border-color:#ff9a76}table th{background:#f4eff9}table td,table th{border-bottom:1px solid #ece7f0} .blogCard:hover{border-color:#ff795d}@media(max-width:800px){.heroVisual{max-width:600px}.floatingOffer{bottom:48px}}
/* French landing page refinements */
.photoHero{position:relative;overflow:hidden;border-radius:26px;min-height:420px;box-shadow:0 24px 60px #130e2b66;border:6px solid #ffffff24}.photoHero img{width:100%;height:440px;display:block;object-fit:cover}.photoHero:after{content:"";position:absolute;inset:30% 0 0;background:linear-gradient(transparent,#17152bd9)}.photoLabel{position:absolute;z-index:1;bottom:22px;left:23px;color:#fff;display:flex;flex-direction:column}.photoLabel span{font-size:12px;letter-spacing:1px;text-transform:uppercase}.photoLabel b{font:800 25px Manrope}.photoSection{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}.photoBlock{position:relative}.photoBlock img{width:100%;height:360px;object-fit:cover;border-radius:25px;box-shadow:0 20px 50px #17152b24}.photoCredit{font-size:11px;color:#77748b;text-align:right;padding:5px}.photoCredit a{color:#694d8d}.whatsappFloat{position:fixed;right:22px;bottom:22px;z-index:9;background:#20c769;color:#fff;text-decoration:none;font-weight:800;padding:14px 20px;border-radius:40px;box-shadow:0 10px 28px #102b2360}.hero{background:radial-gradient(ellipse at 82% 10%,#755293 0,transparent 42%),linear-gradient(122deg,#1a1832,#382459 58%,#243552)}.button{background:#ff795d;color:white}.plan.pop{border-color:#ff795d}.cta{background:#ff795d;color:white}.cta .darkbtn{background:#17152b;color:white}.plan li{padding:8px 0}.plan ul{min-height:210px}@media(max-width:800px){.photoSection{grid-template-columns:1fr}.photoHero img{height:340px}.plan ul{min-height:0}}@media(max-width:520px){.photoHero img{height:280px}.whatsappFloat{right:12px;bottom:12px;padding:11px 16px}}

/* Reference-inspired transparent streaming navigation and language menu */
.top{display:none}.head{position:absolute;left:0;right:0;top:0;z-index:10;background:linear-gradient(180deg,#10121de8,#10121d58,transparent);border:0;color:#fff}.nav{height:82px}.links a{color:#f7f5fb}.links .activeNav{color:#ffca28}.logo{color:#fff}.logo i{color:#ffca28}.langMenu{position:relative;font-weight:700;color:white;cursor:pointer}.langMenu summary{list-style:none;padding:9px 10px;border:1px solid #ffffff48;border-radius:30px}.langMenu summary::-webkit-details-marker{display:none}.langChoices{position:absolute;right:0;top:46px;min-width:185px;padding:7px;background:#19182a;border:1px solid #ffffff35;border-radius:14px;box-shadow:0 12px 30px #08091488}.langChoices button{display:block;width:100%;border:0;background:transparent;color:white;text-align:left;padding:11px;border-radius:9px;cursor:pointer;font:600 14px Arial}.langChoices button:hover,.langChoices button.selected{background:#ffffff1f;color:#ffca28}.signButton,.subscribeButton{padding:11px 17px;border-radius:14px!important;background:#ffffff32!important;color:#fff!important}.links .subscribeButton{background:#ffbd13!important;color:#17151c!important;border-radius:18px!important;padding:12px 20px}.hero{padding-top:145px;min-height:620px}.heroGrid{align-items:center}.photoHero{border-color:#ffffff43}.categoryGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:25px}.categoryTile{min-height:150px;border-radius:19px;padding:22px;text-decoration:none;color:white;background:linear-gradient(145deg,#35295b,#1b233a);display:flex;flex-direction:column;justify-content:flex-end;gap:5px;box-shadow:0 10px 25px #20154222;transition:transform .2s,box-shadow .2s}.categoryTile:hover{transform:translateY(-4px);box-shadow:0 16px 30px #20154233}.categoryTile span{font-size:28px;color:#ffbd13;margin-bottom:auto}.categoryTile b{font:700 18px Manrope}.categoryTile small{color:#d5cfe4}.block{scroll-margin-top:90px}.whatsappFloat{z-index:20}@media(max-width:1000px){.links{gap:12px}.links a:nth-child(5),.links a:nth-child(6){display:none}.categoryGrid{grid-template-columns:repeat(3,1fr)}}@media(max-width:650px){.nav{height:auto;min-height:76px;align-items:flex-start;padding-top:15px;padding-bottom:15px}.links{flex-wrap:wrap;justify-content:flex-end}.links a:nth-child(2),.links a:nth-child(3){display:none}.signButton{display:none!important}.hero{padding-top:135px}.categoryGrid{grid-template-columns:repeat(2,1fr)}}
/* High-contrast noir and yellow theme */
:root{--night:#050505;--navy:#111;--green:#ffd400;--paper:#f6f6f3;--ink:#111;--muted:#666;--line:#e2e2df}.top{background:#050505}.head{background:linear-gradient(180deg,#030303ee,#08080890,transparent);color:#fff}.hero{background:radial-gradient(ellipse at 78% 12%,#463900 0,transparent 38%),linear-gradient(112deg,#030303 0%,#111 62%,#25200a 100%);color:#fff}.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#030303e8 0%,#030303aa 48%,#03030332 100%);pointer-events:none}.hero .shell{position:relative;z-index:1}.hero .eyebrow,.block .eyebrow{color:#ffd400}.button{background:#ffd400;color:#080808;box-shadow:0 9px 26px #ffd40033}.links .activeNav{color:#ffd400}.logo i{color:#ffd400}.links .subscribeButton{background:#ffd400!important;color:#080808!important}.links .signButton{background:#ffffff22!important;color:#fff!important}.langMenu summary{background:#1119;border-color:#ffffff45}.langChoices{background:#101010;border-color:#ffffff2a}.langChoices button.selected,.langChoices button:hover{color:#ffd400;background:#ffffff15}.categoryTile{background:linear-gradient(145deg,#25220f,#090909);border:1px solid #ffd40042;color:#fff}.categoryTile span{color:#ffd400}.categoryTile small{color:#bdb9a5}.stat,.plan,.device,.faq details,.blogCard{border-color:#deded8}.plan.pop{border:2px solid #ffd400;box-shadow:0 18px 44px #b7930024}.badge{background:#fff7cc;color:#4b3c00}.plan li:before{color:#9b7800}.num{background:#ffd400;color:#090909}.trust{background:#eeeee8}.photoHero{border-color:#ffd40066;box-shadow:0 24px 68px #000b}.photoHero:after{background:linear-gradient(transparent,#050505e8)}.photoLabel b{color:#ffd400}.photoBlock img{box-shadow:0 20px 50px #0003}.photoCredit a{color:#755900}.cta{background:#ffd400;color:#111}.cta .darkbtn{background:#080808;color:#ffd400}.footer{background:#050505;color:#d5d5cf}.footer a{color:#ffd400}.whatsappFloat{background:#1fbd62;color:#fff}.categoryTile:hover{border-color:#ffd400;box-shadow:0 17px 35px #ffd40022}.photoHero img{filter:brightness(.76) contrast(1.08)}.heroArtwork{filter:grayscale(.3)}.plan .button{background:#ffd400;color:#080808}@media(prefers-reduced-motion:no-preference){.categoryTile,.plan,.button{transition:transform .18s ease,box-shadow .18s ease}.plan:hover{transform:translateY(-5px);box-shadow:0 18px 38px #1112}}

/* Direct purchase callout: all channels included */
.allChannelsBlock { padding-top: 18px; }
.allChannelsCard { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 24px; align-items: center; padding: 30px 34px; border: 1px solid rgba(255,202,0,.55); border-radius: 24px; background: linear-gradient(115deg,#17150c,#090909 70%); box-shadow: 0 18px 50px rgba(0,0,0,.22); }
.allChannelsIcon { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: #ffca00; color: #111; font-size: 30px; font-weight: 900; }
.allChannelsCard .eyebrow { margin: 0 0 6px; }
.allChannelsCard .sectionTitle { margin: 0 0 8px; color: #fff; }
.allChannelsCard p { max-width: 760px; margin: 0; color: #c8c5bb; line-height: 1.65; }
@media(max-width:760px) { .allChannelsCard { grid-template-columns: auto 1fr; gap: 18px; padding: 24px; } .allChannelsCard .button { grid-column: 1 / -1; text-align: center; } }

/* Highlight the annual offer in the center with a restrained black and gold finish */
.plan.annualPlan { background: linear-gradient(155deg,#171717,#050505 78%); border: 2px solid #c5a900; color: #fff; box-shadow: 0 18px 44px rgba(0,0,0,.22); }
.plan.annualPlan h3, .plan.annualPlan .money { color: #fff; }
.plan.annualPlan .money { color: #ffd400; }
.plan.annualPlan .monthly { color: #c2c0b6; }
.plan.annualPlan ul { color: #e2e0d6; }
.plan.annualPlan li { border-color: #ffffff20; }
.plan.annualPlan li:before { color: #ffd400; }
.plan.annualPlan .badge { background: #2a250c; color: #ffd400; }
.plan.annualPlan .button { background: #ffd400; color: #080808; }

/* Centered framed benefits block */
#offre { text-align: center; }
#offre > .sub { margin: 14px auto 0; }
#offre .trust { width: min(100%, 1080px); margin: 30px auto 0; padding: 30px; text-align: center; background: linear-gradient(145deg,#111 0%,#070707 100%); border: 1px solid #b99d24; border-radius: 24px; box-shadow: 0 20px 48px rgba(0,0,0,.12), inset 0 0 0 5px rgba(255,212,0,.035); }
#offre .trust > div { padding: 14px 12px; }
#offre .trust h3 { color: #f6f3e6; }
#offre .trust p { color: #c2c0b6; }
@media(max-width:800px) { #offre .trust { padding: 20px; } }

/* Make section labels readable on light backgrounds */
.block > .eyebrow { display: inline-flex; align-items: center; padding: 5px 10px; border: 1px solid #9a7600; border-radius: 999px; background: #fff2b8; color: #654d00 !important; font-size: 13px; font-weight: 900; letter-spacing: 2px; text-shadow: none; }
#offre .eyebrow { color: #654d00 !important; }
.allChannelsCard .eyebrow { display: inline-flex; align-items: center; padding: 6px 12px; border: 1px solid transparent; border-radius: 8px; background: linear-gradient(110deg, #211d0a, #14120a) padding-box, linear-gradient(100deg, #ffd400, #ff9d00 52%, #fff0a0) border-box; color: #ffd400 !important; }
#parrainage .eyebrow { display: inline-flex; align-items: center; padding: 6px 12px; border: 1px solid transparent; border-radius: 8px; background: linear-gradient(110deg, #211d0a, #14120a) padding-box, linear-gradient(100deg, #ffd400, #ff9d00 52%, #fff0a0) border-box; color: #ffd400 !important; }
.logo .domainTld { color: #e2c843; font: 700 .55em 'DM Sans',Arial,sans-serif; letter-spacing: 0; }

/* Keep the card groups visually framed and centered in their sections */
#appareils, #fonctionnement, #formules { text-align: center; }
#appareils .devices { width: min(100%, 1120px); margin: 26px auto 0; text-align: left; }
#fonctionnement .steps { width: min(100%, 1080px); margin: 26px auto 0; text-align: left; }
#formules > .sub { margin: 12px auto 0; }
#formules .plans { width: min(100%, 1240px); margin: 28px auto 0; text-align: left; }
#formules .legal { width: min(100%, 1240px); margin: 16px auto 0; text-align: left; }
.stats { width: min(calc(100% - 48px), 1240px); margin-left: auto; margin-right: auto; }
@media(max-width:800px) { .stats { width: auto; } #appareils .devices, #fonctionnement .steps, #formules .plans, #formules .legal { width: 100%; } }

/* Center the text inside the four card groups as requested */
#appareils .device, #fonctionnement .step, #formules .plan, .stats .stat { text-align: center; }
#formules .plan .badge { left: 50%; right: auto; transform: translateX(-50%); white-space: nowrap; }
#formules .plan h3 { padding-top: 20px; }
#formules .plan ul { text-align: center; }
#formules .plan li { text-align: center; }
#appareils .device p, #fonctionnement .step p { margin-left: auto; margin-right: auto; }

/* Improve readability of secondary and small text across the site */
body { font-size: 17px; font-weight: 500; }
.top { font-size: 14px; font-weight: 600; }
.eyebrow { font-size: 14px; font-weight: 900; }
.chip { font-size: 14px; font-weight: 600; }
.stat span { font-size: 14px; font-weight: 600; color: #4e4e4b; }
.monthly { font-size: 15px; font-weight: 600; color: #4d4d49; }
.plan ul { font-size: 16px; font-weight: 500; }
.device p, .step p, .faq p { font-size: 15px; font-weight: 500; color: #4e4e4b; }
.blogCard p { font-size: 14px; font-weight: 500; }
.legal { font-size: 14px; font-weight: 600; color: #44443f; }
.note { font-size: 14px; font-weight: 500; color: #d0d0c8; }
.footer p, .footer a { font-weight: 500; }
@media(max-width:520px) { body { font-size: 16px; } .device p, .step p, .faq p, .plan ul { font-size: 15px; } }

/* Center numbered step markers inside each card */
#fonctionnement .step .num { margin: 0 auto 14px; }

/* Center the FAQ heading, cards, questions and answers */
#faq { width: min(100%, 1040px); margin-left: auto; margin-right: auto; text-align: center; }
#faq details { width: min(100%, 920px); margin: 12px auto; text-align: center; }
#faq summary { list-style: none; text-align: center; }
#faq summary::-webkit-details-marker { display: none; }
#faq summary::before { content: "▶"; display: inline-block; margin-right: 10px; color: #8a6800; font-size: 13px; vertical-align: 1px; }
#faq details[open] summary::before { content: "▼"; }
#faq details p { max-width: 720px; margin: 12px auto 0; text-align: center; }

/* Helpful, readable article pages */
.articleWrap { max-width: 900px; padding-top: 55px; }
.articleWrap article { background: #fff; border: 1px solid #e2e2df; border-radius: 26px; padding: clamp(24px,5vw,58px); }
.articleLead { color: #44443f; font-size: 20px; font-weight: 600; line-height: 1.65; }
.articleBody { max-width: 740px; margin: 34px auto 0; }
.articleBody h2 { margin: 32px 0 10px; font: 800 25px/1.25 Manrope,Arial,sans-serif; }
.articleBody p { color: #45453f; font-size: 17px; line-height: 1.8; }
.articleTip { margin-top: 30px; padding: 22px; border: 1px solid #c5a900; border-radius: 18px; background: #fff9d9; }
.articleTip p { margin-bottom: 0; }
.articleNav { display: flex; justify-content: space-between; gap: 18px; margin-top: 32px; font-weight: 800; }
.articleNav a { color: #654d00; }
.referralSection { padding-top: 20px !important; }
.referralCard { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 24px; padding: 30px; border: 1px solid #b99d24; border-radius: 24px; background: linear-gradient(130deg,#151515,#050505); box-shadow: 0 18px 45px rgba(0,0,0,.16); color: #fff; }
.referralIcon { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: #ffd400; color: #111; font-size: 27px; }
.referralCard .sectionTitle { color: #fff; margin: 8px 0; }
.referralCard p { max-width: 760px; color: #e3e1d7; line-height: 1.7; }
.referralCard small { color: #c2c0b6; font-size: 14px; font-weight: 600; }
@media(max-width:800px) { .referralCard { grid-template-columns: auto 1fr; } .referralCard .button { grid-column: 1/-1; text-align: center; } }
@media(max-width:520px) { .articleLead { font-size: 18px; } .articleNav { flex-direction: column; } }

/* User-provided living-room image as the homepage hero background */
.hero { background-image: linear-gradient(90deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.62) 43%,rgba(0,0,0,.18) 100%),url("assets/hero-living-room.webp"); background-position: center; background-size: cover; }
.hero:before { background: linear-gradient(90deg,rgba(0,0,0,.54) 0%,rgba(0,0,0,.27) 45%,rgba(0,0,0,.05) 100%); }
.hero:after { display: none; }
.hero .photoHero { visibility: hidden; }
@media(max-width:800px) { .hero { background-position: 58% center; } .hero:before { background: linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.40)); } }

/* Shift the hero image down slightly so the TV screen is more visible */
.hero { background-position: center 38%; }
@media(max-width:800px) { .hero { background-position: 58% 40%; } }

/* Align the source image at the top to reveal the complete TV screen */
.hero { background-position: center top; }
@media(max-width:800px) { .hero { background-position: 58% top; } }

/* Move the background photo farther down without changing the hero layout */
.hero { background-position: center top, center 80px; }
@media(max-width:800px) { .hero { background-position: 58% top, 58% 40px; } }




/* Use the updated living-room image and keep the whole TV in view */
.hero { background-image: linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.58) 43%,rgba(0,0,0,.12) 100%),url("assets/hero-living-room.webp"); background-size: cover; background-position: center top, center 80px; }
@media(max-width:800px) { .hero { background-position: 58% top, 58% 40px; } }

/* Blog articles live together as expandable entries on the site */
.blogPage { max-width: 1080px; padding-top: 48px; }
.blogIntro { margin: 12px auto 28px; }
.blogArticleList { display: grid; gap: 12px; }
.blogEntry { background: #fff; border: 1px solid #deded8; border-radius: 18px; padding: 20px 24px; }
.blogEntry[open] { border-color: #b99d24; box-shadow: 0 12px 32px rgba(0,0,0,.07); }
.blogEntry summary { cursor: pointer; list-style: none; text-align: center; font: 800 18px/1.45 Manrope,Arial,sans-serif; }
.blogEntry summary::-webkit-details-marker { display: none; }
.blogEntry summary::after { content: "+"; display: inline-grid; place-items: center; width: 26px; height: 26px; margin-left: 10px; border-radius: 50%; background: #fff2b8; color: #654d00; }
.blogEntry[open] summary::after { content: "−"; }
.guideNumber { color: #765b00; font-size: 13px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }
.blogEntryBody { max-width: 820px; margin: 20px auto 0; text-align: left; }
.blogEntryBody .articleBody { margin-top: 18px; }
.blogPageCta { margin: 38px auto 0; padding: 30px; text-align: center; background: #111; color: #fff; border: 1px solid #b99d24; border-radius: 22px; }
.blogPageCta p { color: #d0d0c8; }
.homeBlog { text-align: center; }
.homeBlog > .sub { margin: 12px auto; }
.homeBlog .blogGrid { max-width: 1050px; margin: 24px auto; text-align: left; }
@media(max-width:700px) { .blogEntry { padding: 17px; } .blogEntry summary { font-size: 16px; } }

/* Thirty complete blog cards embedded directly in the homepage */
.homeBlog .blogGrid { width: min(100%, 1180px); grid-template-columns: repeat(3,minmax(0,1fr)); align-items: stretch; }
.blogArticleCard { display: block; min-height: 250px; text-align: left; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.blogArticleCard:hover { transform: translateY(-3px); border-color: #b99d24; box-shadow: 0 14px 30px rgba(0,0,0,.08); }
.blogArticleCard summary { list-style: none; }
.blogArticleCard summary::-webkit-details-marker { display: none; }
.blogArticleCard summary h3 { margin: 13px 0 8px; font: 800 19px/1.35 Manrope,Arial,sans-serif; color: #111; }
.blogArticleCard summary p { margin: 0; color: #4e4e4b; font-size: 15px; line-height: 1.6; }
.readArticle { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; color: #654d00; font-weight: 800; }
.readArticle b { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #ffd400; color: #111; }
.blogArticleCard[open] { grid-column: span 2; background: linear-gradient(145deg,#fff,#fffdf5); border-color: #b99d24; }
.blogArticleCard[open] .readArticle { display: none; }
.blogArticleCard .blogEntryBody { margin-top: 18px; border-top: 1px solid #deded8; padding-top: 8px; }
.blogArticleCard .articleBody { margin-top: 12px; }
.blogArticleCard .articleBody h2 { font: 800 18px/1.35 Manrope,Arial,sans-serif; margin: 20px 0 6px; }
.blogArticleCard .articleBody p { color: #45453f; font-size: 15px; line-height: 1.7; }
.blogArticleCard .articleTip { padding: 14px; margin-top: 18px; }
@media(max-width:800px) { .homeBlog .blogGrid { grid-template-columns: repeat(2,minmax(0,1fr)); } .blogArticleCard[open] { grid-column: span 2; } }
@media(max-width:520px) { .homeBlog .blogGrid { grid-template-columns: 1fr; } .blogArticleCard[open] { grid-column: span 1; } .blogArticleCard { min-height: 0; } }

/* Increase contrast for the two light subscription cards */
#formules .plan:not(.annualPlan) { background: linear-gradient(150deg,#fffefa 0%,#fff9df 100%); border: 1.5px solid #c5a900; box-shadow: 0 14px 34px rgba(112,88,0,.12); }
#formules .plan:not(.annualPlan) .badge { border: 1px solid #d7b800; background: #fff1b8; color: #554200; }
#formules .plan:not(.annualPlan):hover { border-color: #8a6800; box-shadow: 0 18px 40px rgba(112,88,0,.2); }

/* Give stats, step and device cards the same warm gold framing as the plans */
.stats .stat, #fonctionnement .step, #appareils .device { background: linear-gradient(150deg,#fffefa 0%,#fff9df 100%); border: 1.5px solid #c5a900; box-shadow: 0 12px 28px rgba(112,88,0,.10); }
.stats .stat:hover, #fonctionnement .step:hover, #appareils .device:hover { border-color: #8a6800; box-shadow: 0 16px 34px rgba(112,88,0,.16); }
/* Show three blog cards first; reveal the rest below with Voir plus */
#guides .blogGrid > .blogArticleCard:nth-child(n+4) { display: none; }
#guides.showAllBlogs .blogGrid > .blogArticleCard:nth-child(n+4) { display: block; }
.moreBlogsButton { margin-top: 28px; border: 0; cursor: pointer; font: 800 16px 'DM Sans',Arial,sans-serif; }

/* Solid black background for the 49 euro annual plan */
#formules .plan.annualPlan { background: #000 !important; }

/* Match the article cards to the framed device and plan cards */
#guides .blogArticleCard { display: block; overflow: hidden; padding: 0; border: 1.5px solid #c5a900; border-radius: 18px; background: linear-gradient(150deg,#fffefa 0%,#fff9df 100%); box-shadow: 0 12px 28px rgba(112,88,0,.10); transition: border-color .2s, box-shadow .2s, transform .2s; }
#guides .blogArticleCard:hover { border-color: #8a6800; box-shadow: 0 16px 34px rgba(112,88,0,.16); transform: translateY(-2px); }
#guides .blogArticleCard > summary { display: block; padding: 22px; cursor: pointer; list-style: none; }
#guides .blogArticleCard > summary::-webkit-details-marker { display: none; }
#guides .blogArticleCard > summary h3 { margin: 9px 0 8px; }
#guides .blogArticleCard > summary p { margin: 0 0 14px; font-size: 15px; line-height: 1.65; color: #565268; }
#guides .blogArticleCard .readArticle { display: flex; justify-content: space-between; align-items: center; color: #705500; font-weight: 800; }
#guides .blogArticleCard .readArticle b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #ffedaa; }
#guides .blogArticleCard[open] { background: #fff; }
#guides .blogEntryBody { padding: 0 22px 22px; border-top: 1px solid #e7dcae; }
#guides .blogArticleCard > summary .eyebrow { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 11px; border: 1px solid #c5a900; border-radius: 999px; background: #fff0b8; color: #674f00; font-size: 12px; letter-spacing: 1.5px; }
body { text-transform: capitalize; }

/* Temporary black-background experiment; cards stay light for clear contrast */
body { background: #080808 !important; color: #f5f3eb; }
section.block { background: transparent; }
.sectionTitle { color: #fff; }
.sub { color: #c3c0b7; }
.stat, .step, .device, .faq details, #guides .blogArticleCard, #formules .plan:not(.annualPlan) { color: #201d35; }
.stat span, .step p, .device p, .faq p { color: #625e6e; }
#guides .blogArticleCard > summary p { color: #565268; }
#faq details { background: linear-gradient(150deg,#fffefa 0%,#fff9df 100%); border: 1.5px solid #c5a900; box-shadow: 0 12px 28px rgba(112,88,0,.10); }
#faq details:hover, #faq details[open] { border-color: #8a6800; box-shadow: 0 16px 34px rgba(112,88,0,.16); }
.footer { background: transparent; }
.footer .footergrid { position: relative; overflow: hidden; padding: 38px 40px; border: 1px solid transparent; border-radius: 24px; background: linear-gradient(145deg,#171717,#0d0d0d) padding-box, linear-gradient(115deg,#f0c900,#645300 42%,#302800 70%,#d7b400) border-box; box-shadow: 0 18px 44px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,224,80,.12); }
.footerPayment { padding-top: 18px; color: #d4d0c3; text-align: center; font-size: 14px; font-weight: 700; }
.orderDialog { width: min(460px, calc(100% - 28px)); max-height: min(90vh, 720px); padding: 0; border: 1px solid #d7b400; border-radius: 22px; color: #f8f5e5; background: linear-gradient(145deg,#171717,#090909); box-shadow: 0 24px 80px #000b; }
.orderDialog::backdrop { background: #000a; backdrop-filter: blur(4px); }
.orderDialog form { position: relative; display: grid; gap: 11px; padding: 28px; }
.orderDialogClose { position: absolute; top: 14px; right: 16px; width: 36px; height: 36px; border: 1px solid #ffffff30; border-radius: 50%; color: #fff; background: #ffffff10; font-size: 24px; cursor: pointer; }
.orderDialog .eyebrow { color: #ffd400; font-weight: 800; }
.orderDialog h2 { margin: 0; color: #fff; font: 800 25px Manrope,Arial,sans-serif; }
.orderDialog p { margin: 0 0 5px; color: #d4d0c3; font-size: 14px; }
.orderSelection { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; align-items: center; margin: 3px 0 4px; padding: 13px 15px; border: 1px solid #ffd40055; border-radius: 13px; background: linear-gradient(110deg,#ffd40018,#ffffff08); }
.orderSelection span { grid-column: 1 / -1; color: #c7c1ae; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.orderSelection strong { color: #fff; font-size: 14px; }
.orderSelection b { color: #ffd400; font: 800 20px Manrope,Arial,sans-serif; white-space: nowrap; }
.orderDialog label:not(.orderConsent) { color: #f5e7a0; font-size: 13px; font-weight: 700; }
.orderDialog input:not([type=checkbox]) { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid #ffffff35; border-radius: 10px; outline-color: #ffd400; color: #fff; background: #111; font: inherit; }
.orderConsent { display: flex; align-items: flex-start; gap: 9px; margin: 7px 0; color: #d4d0c3; font-size: 12px; line-height: 1.5; }
.orderConsent input { flex: 0 0 auto; margin-top: 4px; accent-color: #ffd400; }
.orderDialog .button { width: 100%; min-height: 48px; border: 0; border-radius: 12px; font: inherit; font-weight: 800; cursor: pointer; }
.orderDialog small { color: #aaa696; font-size: 11px; line-height: 1.5; text-align: center; }
@media(max-width:520px) { .orderDialog form { padding: 24px 20px; } }
.footer .footergrid > div:not(:first-child) { border-left: 1px solid rgba(197,169,0,.24); padding-left: 28px; }
.footer .footergrid > div > b { display: inline-block; margin-bottom: 8px; color: #f5e7a0; font: 800 13px Manrope,Arial,sans-serif; letter-spacing: 1.2px; text-transform: uppercase; }
.footer .footergrid p { color: #d4d0c3; }
.footer .footergrid a:not(.logo) { text-decoration: none; transition: color .2s ease; }
.footer .footergrid a:not(.logo):hover { color: #fff1a3; }
.footerBrandCard { display: grid; gap: 7px; max-width: 390px; margin-top: 18px; padding: 15px 17px; border: 1px solid rgba(255,212,0,.3); border-left: 3px solid #ffd400; border-radius: 13px; background: linear-gradient(110deg,rgba(255,212,0,.09),rgba(255,255,255,.025)); }
.footerBrandCard span { color: #ffd400; font-size: 10px; font-weight: 800; letter-spacing: 1.5px; }
.footerBrandCard strong { color: #fff; font: 700 15px Manrope,Arial,sans-serif; }
.footerBrandCard a { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; color: #f2dc73 !important; font-size: 13px; font-weight: 800; }
.footerBrandCard a b { font-size: 18px; transition: transform .2s ease; }
.footerBrandCard a:hover b { transform: translateX(4px); }
@media(max-width:800px) { .footer .footergrid { padding: 28px; } .footer .footergrid > div:not(:first-child) { padding-left: 18px; } }
@media(max-width:520px) {
  .footer .footergrid { grid-template-columns: 1fr; gap: 14px; padding: 23px 20px; }
  .footer .footergrid > div:not(:first-child) { border-left: 0; border-top: 1px solid rgba(197,169,0,.24); padding: 14px 0 0; }
  #guides .blogArticleCard > summary { padding: 18px; }
  #guides .blogEntryBody { padding: 0 18px 18px; }
  #faq details { padding: 16px; }
  #formules .plan { min-width: 0; }
}

/* Restore the original section spacing; keep the plan cards slightly more compact. */
#channels { padding-bottom: 74px; }
#formules { padding-top: 74px; }
#formules .plans { margin-top: 18px; }
#formules .plan ul { margin-top: 12px; }
#formules .plan li { padding-top: 5px; padding-bottom: 5px; }
@media (max-width: 520px) {
  #channels { padding-bottom: 48px; }
  #formules { padding-top: 48px; }
}

/* Homepage proof strip: use confirmed offer details, not unverified audience metrics. */
.stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stats .stat strong { color: #9b7800; font-size: clamp(19px, 2vw, 25px); line-height: 1.2; }
.stats .stat span { display: block; margin-top: 7px; }
.stats .stat span { margin: 0 0 8px; font-size: 30px; line-height: 1; }
.planValueBadge { background: #ffd400 !important; color: #171717 !important; border: 1px solid #bd9700 !important; font-size: 12px; font-weight: 800; padding: 7px 12px; }
#formules .plan h3 { padding-top: 48px; }
#formules .plan ul { text-align: left; }
#formules .plan li { position: relative; padding-left: 19px; text-align: left; }
#formules .plan li:before { content: "•"; position: absolute; left: 0; margin-right: 0; color: #a98500; }
#formules .plan .monthly { display: inline-flex; align-items: center; max-width: 100%; margin-top: 9px; padding: 7px 12px; border: 1px solid #c5a900; border-radius: 999px; background: #fff6d2; color: #4d430f; line-height: 1.35; }
#formules .plan.annualPlan .monthly { border-color: #d3ad00; background: #171717; color: #f2e6b0; }
.deviceIcon { width: 48px; height: 48px; display: grid; place-items: center; margin: 0 auto 13px; border: 1px solid #d5ae00; border-radius: 16px; background: linear-gradient(145deg,#171717,#30302d); box-shadow: 0 7px 16px rgba(25,22,8,.18), inset 0 0 0 3px rgba(255,212,0,.08); font-size: 24px; line-height: 1; }
#appareils .device { transition: transform .2s ease, box-shadow .2s ease; }
#appareils .device:hover { transform: translateY(-4px); }
@media (max-width: 800px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  #formules .plan h3 { padding-top: 8px; }
}

/* Small-screen layout refinements across the complete landing page */
@media (max-width: 520px) {
  html, body { max-width: 100%; overflow-x: clip; }
  .shell { width: 100%; padding-left: 16px; padding-right: 16px; }
  .nav { gap: 8px; }
  .links { max-width: 76%; gap: 7px; }
  .links .langMenu summary { padding: 7px 9px; }
  .links .subscribeButton { padding: 10px 13px; }
  .hero { min-height: 0; padding: 150px 0 42px; background-position: 58% top, 58% 40px; }
  .heroGrid { grid-template-columns: minmax(0,1fr); gap: 0; }
  .hero .photoHero { display: none; }
  .hero h1 { max-width: 100%; font-size: clamp(34px,10vw,44px); line-height: 1.04; letter-spacing: -1.5px; overflow-wrap: anywhere; }
  .hero p { font-size: 16px; line-height: 1.55; }
  .heroActions { align-items: stretch; flex-direction: column; gap: 8px; }
  .heroActions .button, .heroActions .ghost { justify-content: center; text-align: center; }
  .chips { gap: 7px; }
  .chip { font-size: 11px; }
  .stats { grid-template-columns: minmax(0,1fr); gap: 9px; margin: 14px 16px 0; }
  section.block { padding-top: 48px; padding-bottom: 48px; }
  .sectionTitle { font-size: clamp(28px,8vw,36px); letter-spacing: -1px; overflow-wrap: anywhere; }
  .sub { font-size: 15px; }
  .trust { padding: 18px; gap: 15px; }
  .allChannelsCard, .referralCard { grid-template-columns: minmax(0,1fr); gap: 14px; padding: 21px 18px; }
  .allChannelsCard .button, .referralCard .button { grid-column: auto; width: 100%; }
  .allChannelsIcon, .referralIcon { justify-self: start; }
  .plans, .steps, .devices, .homeBlog .blogGrid { grid-template-columns: minmax(0,1fr); }
  #formules .plan { padding: 21px 18px; }
  #formules .plan .badge { position: static; display: inline-flex; margin: 0 0 12px; }
  .plan h3 { padding-right: 0; font-size: 19px; }
  .money { font-size: 42px; }
  .plan ul { min-height: 0; }
  .photoSection { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .photoBlock img { height: auto; aspect-ratio: 4 / 3; }
  .faq { width: 100%; }
  #guides .blogArticleCard, #faq details, .device, .step, .plan, .stat { min-width: 0; }
  #guides .blogArticleCard > summary h3, #guides .blogArticleCard > summary p,
  .plan li, .faq summary, .device p, .step p { overflow-wrap: anywhere; }
  .moreBlogsButton { width: 100%; min-height: 46px; }
  .footer { padding-top: 34px; }
}

/* Keep navigation and card grids comfortable on tablets and phones. */
@media (max-width: 800px) {
  .nav { height: auto; min-height: 66px; flex-wrap: wrap; row-gap: 4px; padding-top: 8px; padding-bottom: 6px; justify-content: center; }
  .nav .logo { margin-left: auto; margin-right: auto; text-align: center; }
  .links { order: 2; width: 100%; max-width: 100%; gap: 8px 16px; justify-content: flex-start; flex-wrap: wrap; overflow: visible; white-space: normal; padding: 5px 0 8px; }
  .links > a, .links .langMenu { flex: 0 0 auto; }
  .plans, #formules .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps, .devices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .nav { padding-top: 7px; }
  .logo { font-size: 21px; }
  .links { gap: 14px; font-size: 13px; }
  .links a { font-size: 13px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 16px 0; }
  .stats .stat { padding: 14px 10px; text-align: center; }
  .stats .stat span { font-size: 27px; margin-bottom: 7px; }
  .stats .stat strong { font-size: clamp(17px, 5vw, 21px); overflow-wrap: anywhere; }
  .plans, #formules .plans, .trust, .steps, .devices, .homeBlog .blogGrid { grid-template-columns: minmax(0, 1fr); }
  .allChannelsCard .sectionTitle, .referralCard .sectionTitle { font-size: clamp(25px, 7vw, 32px); }
  .allChannelsCard p, .referralCard p, .referralCard small { overflow-wrap: anywhere; }
  .hero { padding-top: 96px; }
  .faq summary { line-height: 1.45; }
  body { text-align: center; }
  .top .shell, .links { justify-content: center; }
  .heroGrid > div, .hero, .hero h1, .hero p, .hero .eyebrow,
  section.block, .sectionTitle, .sub, .trust, .trust h3, .trust p,
  .allChannelsCard, .allChannelsCard p, .referralCard, .referralCard p,
  .photoSection, #fonctionnement .step, #appareils .device,
  #guides, #guides .blogArticleCard, #faq, #faq details,
  .footer, .footer .footergrid > div { text-align: center; }
  .heroActions, .chips { justify-content: center; }
  .allChannelsIcon, .referralIcon { justify-self: center; }
  #formules .plan ul { text-align: center; }
  #formules .plan li { position: static; padding: 8px 0; text-align: center; }
  #formules .plan li:before { position: static; margin-right: 8px; }
  #guides .blogArticleCard > summary { text-align: center; }
  #guides .blogEntryBody, #guides .blogArticleBody { text-align: center; }
  .footer .footerBrandCard { margin-left: auto; margin-right: auto; text-align: center; }
  .cta { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 16px; padding: 26px 18px; }
  .cta .darkbtn { align-self: center; min-width: 150px; border: 1px solid #111; outline: 2px solid #fff2a8; outline-offset: 3px; }
}
.stats .stat span { display: grid; width: 42px; height: 42px; place-items: center; margin: 0 auto 8px; border: 1px solid #d5ae00; border-radius: 13px; background: linear-gradient(145deg,#171717,#30302d); box-shadow: 0 7px 16px rgba(25,22,8,.18), inset 0 0 0 3px rgba(255,212,0,.08); color: #fff; font-size: 23px; line-height: 1; }
.stats .stat:first-child > span { font-size: 0; }
.stats .stat:first-child > span::before { content: "👥"; font-size: 23px; filter: brightness(0) saturate(100%) invert(63%) sepia(96%) saturate(1800%) hue-rotate(3deg) brightness(105%) contrast(106%) drop-shadow(0 0 2px #ff8c0088); }
/* WhatsApp contact links use the recognizable logo without a text label. */
.whatsappIconLink{display:inline-flex;align-items:center;justify-content:center;min-width:42px;min-height:42px;padding:9px!important}
.whatsappLogo{display:block;width:25px;height:25px;flex:none}
.whatsappFloat{width:58px;height:58px;box-sizing:border-box;padding:0!important;display:grid;place-items:center;border-radius:50%;}
.whatsappFloat .whatsappLogo{width:31px;height:31px}
#formules .plan{display:flex;flex-direction:column}
#formules .plan ul{flex:1}
#formules .plan .button{margin-top:auto}

/* Premium dark-and-gold treatment for the homepage proof strip. */
.stats .stat {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 148px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 16px;
  border: 1px solid transparent;
  border-radius: 22px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,212,0,.12), transparent 62%) padding-box,
    linear-gradient(145deg,#191919,#0b0b0b 72%,#17140a) padding-box,
    linear-gradient(135deg,#ffe36b,#8b7100 30%,rgba(255,255,255,.15) 58%,#bd9900) border-box;
  box-shadow: 0 16px 36px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.09);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.stats .stat::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 22%;
  width: 56%;
  height: 1px;
  background: linear-gradient(90deg,transparent,rgba(255,222,74,.85),transparent);
}
.stats .stat:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 42px rgba(0,0,0,.42), 0 0 24px rgba(255,212,0,.09), inset 0 1px 0 rgba(255,255,255,.12);
}
.stats .stat span {
  width: 46px;
  height: 46px;
  margin: 0;
  border: 1px solid rgba(255,212,0,.65);
  border-radius: 15px;
  background: linear-gradient(145deg,#342c13,#151515 72%);
  box-shadow: 0 0 0 5px rgba(255,212,0,.045), 0 8px 18px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.12);
  font-size: 25px;
}
.stats .stat strong {
  color: #ffe16a;
  font-size: clamp(21px,2.1vw,27px);
  line-height: 1.15;
  letter-spacing: -.3px;
  text-shadow: 0 2px 18px rgba(255,212,0,.16);
}
@media (max-width: 520px) {
  .stats .stat { min-height: 126px; gap: 9px; padding: 15px 9px; border-radius: 19px; }
  .stats .stat span { width: 42px; height: 42px; font-size: 23px; }
  .stats .stat strong { font-size: clamp(18px,5vw,22px); }
}

/* Carry the same premium charcoal-and-gold system through the lower card sections. */
#fonctionnement .step,
#appareils .device,
#guides .blogArticleCard,
#faq details {
  color: #f6f2e5;
  border: 1px solid transparent;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,212,0,.10), transparent 64%) padding-box,
    linear-gradient(145deg,#191919,#0b0b0b 72%,#17140a) padding-box,
    linear-gradient(135deg,#ffe36b,#8b7100 34%,rgba(255,255,255,.14) 62%,#bd9900) border-box;
  box-shadow: 0 14px 32px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
#fonctionnement .step:hover,
#appareils .device:hover,
#guides .blogArticleCard:hover,
#faq details:hover,
#faq details[open] {
  transform: translateY(-3px);
  box-shadow: 0 19px 38px rgba(0,0,0,.25), 0 0 22px rgba(255,212,0,.07), inset 0 1px 0 rgba(255,255,255,.11);
}
#fonctionnement .step h3,
#appareils .device b,
#guides .blogArticleCard > summary h3,
#faq summary { color: #fff9e6; }
#fonctionnement .step p,
#appareils .device p,
#faq details p,
#guides .blogArticleCard > summary p { color: #cbc6b8; }
#fonctionnement .step .num {
  border: 1px solid #ffe36b;
  box-shadow: 0 0 0 5px rgba(255,212,0,.07), 0 7px 18px rgba(0,0,0,.35);
}
#guides .blogArticleCard > summary .eyebrow {
  border-color: rgba(255,212,0,.5);
  background: rgba(255,212,0,.10);
  color: #ffe16a;
}
#guides .blogArticleCard .readArticle { color: #ffe16a; }
#guides .blogArticleCard .readArticle b {
  color: #15130b;
  background: linear-gradient(145deg,#ffe36b,#d3a900);
}
#guides .blogArticleCard[open] { background: linear-gradient(145deg,#191919,#0b0b0b 72%,#17140a); }
#guides .blogArticleCard .blogEntryBody { border-color: rgba(255,212,0,.25); }
#guides .blogArticleCard .articleBody h2 { color: #fff2b4; }
#guides .blogArticleCard .articleBody p { color: #d2cdbf; }
#guides .blogArticleCard .articleTip {
  border-color: rgba(255,212,0,.48);
  background: linear-gradient(145deg,#28230f,#15140f);
  color: #ffe9a0;
}
#guides .blogArticleCard .articleTip p { color: #d8d0b8; }
#faq details { border-radius: 16px; }
@media (max-width: 520px) {
  #fonctionnement .step,
  #appareils .device,
  #faq details { border-radius: 17px; }
  #guides .blogArticleCard > summary { padding: 18px; }
}

/* Keep the same breathing room from the top edge to the content in similar cards. */
.stats .stat { padding-top: 32px; }
#formules .plan { padding-top: 32px; }
#fonctionnement .step { padding-top: 32px; }
#appareils .device { padding-top: 32px; }
#guides .blogArticleCard > summary { padding-top: 32px; }
#faq details { padding-top: 32px; }
@media (max-width: 520px) {
  .stats .stat { padding-top: 26px; }
  #formules .plan { padding-top: 26px; }
  #fonctionnement .step { padding-top: 26px; }
  #appareils .device { padding-top: 26px; }
  #guides .blogArticleCard > summary { padding-top: 26px; }
  #faq details { padding-top: 26px; }
}

/* Refined section-label pills to replace the plain badge treatment. */
.hero .eyebrow,
section.block > .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: 100%;
  padding: 8px 15px;
  border: 1px solid #c49b00;
  border-radius: 999px;
  background: linear-gradient(135deg,#fff9e4 0%,#ffe88a 54%,#f7d34a 100%);
  color: #4f3d00;
  box-shadow: 0 6px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 3px rgba(255,212,0,.09);
  font-size: 11px;
  line-height: 1.25;
  letter-spacing: 1.6px;
}
.hero .eyebrow::before,
section.block > .eyebrow::before {
  content: "";
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #745900;
  box-shadow: 0 0 0 3px rgba(116,89,0,.12);
}
#heroEyebrow { display: none !important; }
@media (max-width: 520px) {
  .hero .eyebrow,
  section.block > .eyebrow { padding: 7px 12px; font-size: 10px; letter-spacing: 1.2px; }
}

/* Fade the header into the hero so its bottom divider does not read as a hard line. */
.head {
  border: 0 !important;
  box-shadow: none !important;
}
.head::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: -38px;
  height: 38px;
  pointer-events: none;
  background: linear-gradient(180deg,rgba(5,5,5,.78) 0%,rgba(5,5,5,.48) 42%,rgba(5,5,5,.18) 76%,transparent 100%);
}

/* Align each guide action along the bottom edge of its card row. */
#guides .blogArticleCard {
  display: flex;
  flex-direction: column;
}
#guides .blogArticleCard > summary {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}
#guides .blogArticleCard > summary .readArticle {
  margin-top: auto;
  padding-top: 18px;
}
@media (max-width: 520px) {
  #guides .blogArticleCard > summary .readArticle { padding-top: 14px; }
}

#faq summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  list-style: none;
}
#faq summary::-webkit-details-marker { display: none; }
#faq summary::before {
  content: "▶";
  flex: 0 0 auto;
  color: #c49b00;
  font-size: 12px;
  transition: transform .18s ease;
}
#faq details[open] summary::before { transform: rotate(90deg); }
#faq details:not([open]) {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 84px;
  padding: 14px 20px;
}
#faq details:not([open]) summary { width: 100%; }
#faq details[open] { padding-top: 18px; padding-bottom: 18px; }
@media (max-width: 520px) {
  #faq details:not([open]) { min-height: 78px; padding: 12px 15px; }
}

#guides .blogArticleCard > summary {
  align-items: center;
  text-align: center;
}
#guides .blogArticleCard > summary h3 { margin-top: 30px; }
#guides .blogArticleCard > summary .eyebrow { align-self: stretch; justify-content: center; }
#guides .blogArticleCard > summary .readArticle {
  align-self: stretch;
  justify-content: center;
  gap: 12px;
  text-align: center;
  margin-bottom: 18px;
}
@media (max-width: 520px) {
  #guides .blogArticleCard > summary .readArticle { margin-bottom: 12px; }
  #guides .blogArticleCard > summary h3 { margin-top: 24px; }
}

/* Header CTA for the 24-hour WhatsApp trial request. */
.links .trialButton{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;padding:10px 14px;border:1px solid #ffd400;border-radius:16px;color:#ffd400;text-decoration:none;font-weight:800;line-height:1.2}
.links .trialButton:hover{background:#ffd400;color:#080808}
@media(max-width:520px){.links .trialButton{padding:9px 11px;font-size:12px}}

/* Keep the Dutch overview card descriptions as text, not icon tiles. */
html[lang="nl"] .stats .stat:nth-child(n + 2) > span,
html[lang="nl-NL"] .stats .stat:nth-child(n + 2) > span {
  display: block;
  width: auto;
  height: auto;
  margin: 7px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}


/* Keep the blog index readable on the dark site theme. */
.blogPage .blogEntry{background:linear-gradient(145deg,#191919,#0b0b0b 72%,#17140a);color:#f7f5ed;border-color:rgba(255,212,0,.35)}.blogPage .blogEntry[open]{border-color:#ffd400}.blogPage .blogEntry summary{color:#fff}.blogPage .blogEntry .guideNumber{color:#ffd400}.blogPage .blogEntry .articleLead,.blogPage .blogEntry .articleBody p{color:#d2cdbf}.blogPage .blogEntry .articleBody h2{color:#fff2b4}