/*
NextBlockWins.com — feuille de style du site.
Reprend la charte de la maquette : kawaii + comic book, gros caractères,
aplats pastel, ombres portées franches. Les tokens sont ceux de la maquette,
complétés de ce qu'il a fallu pour les pages ajoutées (fonctionnalités,
Premium, support) et pour la liste d'attente.
*/
:root{
--ink:#10111f;
--muted:#5f6070;
--bg:#fffaf3;
--paper:#fffdf9;
--pink:#ff72ad;
--pink-soft:#ffe8f2;
--purple:#7557f4;
--purple-2:#a789ff;
--purple-deep:#5035c8;
--yellow:#ffd65c;
--yellow-soft:#fff3c0;
--blue:#66cfff;
--blue-soft:#e5f7ff;
--mint:#86dfc1;
--mint-soft:#e8faf3;
--line:#191a2f;
--shadow:0 18px 50px rgba(42,33,92,.10);
--radius:30px;
--max:1180px;
--rythme:52px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;
background:
radial-gradient(circle at 12% 8%, rgba(255,214,92,.13), transparent 21%),
radial-gradient(circle at 90% 18%, rgba(102,207,255,.12), transparent 20%),
var(--bg);
color:var(--ink);
font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif;
line-height:1.28;
}
a{text-decoration:none;color:inherit}
/* `height:auto` n'est pas cosmétique : les ![]()
portent leurs dimensions
en attributs (width=1000 height=750), et sans cette règle la hauteur de
l'attribut est CONSERVÉE quand le CSS réduit la largeur. L'illustration
de l'accroche occupait ainsi une boîte de 750 px de haut pour 276 px de
dessin — 470 px de vide qui poussaient tout le premier tableau. */
img{display:block;max-width:100%;height:auto}
button,select,input,textarea{font:inherit}
.wrap{width:min(calc(100% - 44px),var(--max));margin:auto}
.visually-hidden{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0
}
/* ---------- barre du haut ---------- */
.topbar{
position:sticky;top:0;z-index:50;
background:rgba(255,250,243,.92);
backdrop-filter:blur(16px);
border-bottom:1px solid rgba(16,17,31,.08)
}
.nav{min-height:78px;display:flex;align-items:center;gap:24px}
/* `flex:none` : dans une barre chargée, le mot-symbole est un élément
flexible comme un autre et se fait COMPRIMER — 168 px de large pour une
image de 192, soit un logo écrasé que personne ne relie au CSS du menu. */
.brand{display:flex;align-items:center;gap:11px;white-space:nowrap;flex:none}
.brand-logo{height:64px;width:auto;display:block}
.menu{margin-left:auto;display:flex;gap:25px;align-items:center;font-size:14px;font-weight:800}
.menu a[aria-current="page"]{color:var(--purple);text-decoration:underline;text-underline-offset:5px}
.actions{display:flex;align-items:center;gap:10px}
/* Le bouton du menu. Caché au-dessus de 980 px, où les liens tiennent dans la
barre ; c'est la seule chose qui le fait apparaître. */
.burger{
display:none;width:44px;height:44px;flex:none;padding:0;cursor:pointer;
border:1px solid rgba(16,17,31,.10);border-radius:12px;background:#fff;
align-items:center;justify-content:center;flex-direction:column;gap:5px
}
.burger span{display:block;width:20px;height:2.5px;border-radius:2px;background:var(--ink);
transition:transform .2s ease,opacity .18s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.lang{border:1px solid rgba(16,17,31,.10);background:white;border-radius:12px;padding:10px 12px;font-weight:850}
/* `hidden` doit gagner contre toute classe qui pose un `display`.
Sans cette ligne, `.cta{display:inline-flex}` bat la règle du navigateur et
un bouton marqué `hidden` reste parfaitement visible : le jour où la vente
s'ouvre, la carte Premium montrerait à la fois « rejoindre la liste
d'attente » et « passer en Premium ». Constaté ici, pas deviné. */
[hidden]{display:none !important}
/* ---------- boutons ---------- */
.cta{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
padding:14px 21px;border-radius:13px;border:0;cursor:pointer;
background:linear-gradient(180deg,var(--purple-2),var(--purple));
color:#fff;font-weight:950;
box-shadow:0 7px 0 var(--purple-deep);
transition:transform .18s ease, box-shadow .18s ease
}
.cta:hover{transform:translateY(-2px);box-shadow:0 9px 0 var(--purple-deep)}
.cta:active{transform:translateY(2px);box-shadow:0 4px 0 var(--purple-deep)}
.cta.outline{background:#fff;color:var(--ink);box-shadow:none;border:2px solid var(--ink)}
.cta.outline:hover{transform:translateY(-2px);box-shadow:3px 3px 0 var(--ink)}
.cta.gold{
background:linear-gradient(180deg,#ffe28a,var(--yellow));
color:#4a3400;box-shadow:0 7px 0 #d8a520
}
.cta.gold:hover{box-shadow:0 9px 0 #d8a520}
.cta.small{padding:11px 16px;font-size:14px}
/* Le bouton d'appel du panneau : il ne sert que quand le panneau existe. */
.menu-cta{display:none}
/* ---------- titres ---------- */
/* UN seul rythme vertical. Avant, chaque section portait son propre
`padding-top` en attribut `style` et les écarts entre deux tableaux allaient
de 72 à 176 px sur la même page — irrégularité qu'on voit sans savoir la
nommer. Tout écart entre deux sections vaut désormais 2 × --rythme. */
section{padding:var(--rythme) 0}
/* Un titre de page appartient à ce qui le suit : c'est la seule exception,
et elle est écrite ici plutôt que dispersée dans le HTML. */
.page-head + section{padding-top:16px}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(40px,5.8vw,72px);line-height:.92;letter-spacing:-3.6px;font-weight:1000;margin-bottom:28px;
/* « A chance to win » doit tenir sur UNE ligne : à 92 px la phrase
débordait la colonne et se coupait après « to ». Quand une langue
plus longue doit quand même passer à la ligne, `balance` coupe au
moins à un endroit qui se lit. */
text-wrap:balance}
h2{font-size:clamp(36px,5.1vw,62px);line-height:.95;letter-spacing:-3px;font-weight:1000;margin-bottom:18px;text-wrap:balance}
h3{font-size:25px;line-height:1.05;letter-spacing:-1.1px;font-weight:950;margin-bottom:10px}
.lead{font-size:21px;color:#27283b;max-width:640px;margin-bottom:26px}
.small{font-size:14px;color:var(--muted)}
.eyebrow{
display:inline-flex;padding:7px 13px;border-radius:999px;background:var(--pink);
font-size:12px;font-weight:1000;text-transform:uppercase;letter-spacing:.6px;margin-bottom:17px
}
.eyebrow.mint{background:var(--mint)}
.eyebrow.blue{background:var(--blue)}
.eyebrow.gold{background:var(--yellow)}
.marker{position:relative;display:inline-block}
.marker::after{
content:"";position:absolute;left:-4px;right:-10px;bottom:-7px;height:15px;
background:var(--yellow);border-radius:6px;transform:rotate(-1.5deg);z-index:-1
}
.handnote{font-family:"Comic Sans MS",cursive;font-size:22px;font-weight:900;text-align:center;transform:rotate(-5deg)}
/* ---------- panneaux ---------- */
.panel{padding:44px 48px;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid rgba(16,17,31,.07)}
.blue{background:linear-gradient(90deg,#e9f8ff,#dff4ff)}
.pink-panel{background:linear-gradient(90deg,#fff1f6,#ffe8f2)}
.green{background:linear-gradient(90deg,#eefcf6,#e4f8ef)}
.gold-panel{background:linear-gradient(90deg,#fff7dd,#ffeeb4)}
.info{display:flex;gap:10px;align-items:flex-start;color:var(--muted);font-size:14px;max-width:620px}
/* Les deux paragraphes de l'encadré honnête, côte à côte : seuls, ils
laissaient la moitié droite d'un panneau de 1180 px vide. */
.honest-grid{display:grid;gap:26px}
@media (min-width:900px){ .honest-grid{grid-template-columns:1fr 1fr} }
.honest-grid .lead{margin-bottom:0}
/* ---------- accueil ---------- */
.hero{padding-top:40px;padding-bottom:var(--rythme)}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:36px;align-items:center}
.hero-title .pink{color:var(--pink);text-shadow:3px 3px 0 var(--ink)}
.hero-title .underline{position:relative;display:inline-block}
.hero-title .underline::after{
content:"";position:absolute;left:1%;right:-1%;bottom:-10px;height:8px;
border-radius:999px;background:var(--purple-2);transform:rotate(-1.4deg);z-index:-1
}
.hero-art img{width:100%;object-fit:contain;filter:drop-shadow(0 24px 22px rgba(49,40,91,.14))}
.trust{display:flex;gap:26px;flex-wrap:wrap;margin-top:32px;font-size:14px;font-weight:900}
.trust span{display:flex;gap:8px;align-items:center}
.trust i{font-style:normal;font-size:22px}
.reward-grid{display:grid;grid-template-columns:1.03fr .97fr;gap:56px;align-items:center}
.reward-number{font-size:clamp(64px,7.8vw,104px);letter-spacing:-5px;line-height:.88;font-weight:1000;margin-bottom:14px}
.reward-sub{font-size:36px;font-weight:1000;letter-spacing:-1.8px;margin-bottom:17px}
.reward-grid img{max-height:340px;width:auto;margin:auto}
.network-grid{display:grid;grid-template-columns:.78fr 1.55fr .7fr;gap:34px;align-items:center}
.network-grid img{max-height:240px;width:auto;margin:auto}
.deal-grid{display:grid;grid-template-columns:.95fr 1.2fr;gap:42px;align-items:center}
.deal-grid img{max-height:330px;width:auto;margin:auto}
.micro{font-size:13px;color:var(--muted);margin-top:14px}
/* ---------- anyone can participate ---------- */
.anyone{text-align:center}
.anyone h2{font-size:clamp(34px,5.6vw,68px);letter-spacing:-3px}
.anyone .lead{margin-left:auto;margin-right:auto}
.anyone-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:34px}
.anyone-grid div{background:rgba(255,255,255,.75);border:1px solid rgba(16,17,31,.07);border-radius:20px;padding:22px}
.anyone-grid i{font-style:normal;font-size:34px;display:block;margin-bottom:8px}
.anyone-grid b{display:block;font-size:17px;margin-bottom:4px}
.anyone-grid span{font-size:14px;color:var(--muted)}
/* ---------- comment ça marche ---------- */
.how h2{text-align:center;margin-bottom:50px}
.steps{display:grid;grid-template-columns:repeat(4,1fr)}
.step{text-align:center;padding:6px 26px;position:relative}
.step:not(:last-child)::after{content:"";position:absolute;right:0;top:46px;bottom:4px;width:1px;background:rgba(16,17,31,.15)}
.num{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;margin:0 auto 15px;font-size:22px;font-weight:1000;background:var(--pink)}
.step:nth-child(2) .num{background:var(--blue)}
.step:nth-child(3) .num{background:var(--yellow)}
.step:nth-child(4) .num{background:var(--mint)}
.icon{font-size:56px;height:66px;display:grid;place-items:center;margin-bottom:12px}
.step p{font-size:15px;color:var(--muted)}
/* ---------- smart mode + fonctionnalités ---------- */
.smart-grid{display:grid;grid-template-columns:1fr .9fr;gap:36px;align-items:center}
.smart-art img{max-height:330px;width:auto;margin:auto}
.feature-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.fcard{background:#fff;border:1px solid rgba(16,17,31,.08);border-radius:22px;padding:26px;box-shadow:0 10px 26px rgba(42,33,92,.06)}
.fcard i{font-style:normal;font-size:34px;display:block;margin-bottom:10px}
.fcard b{display:block;font-size:19px;letter-spacing:-.5px;margin-bottom:6px}
.fcard p{font-size:15px;color:var(--muted);margin:0}
.center-cta{text-align:center;margin-top:40px}
/* ---------- électricité ---------- */
/* Le titre de ce panneau vit dans une colonne de 445 px : à 62 px il s'y
casse en trois lignes. Ce n'est pas un titre de section, c'est le titre
d'un encadré — il a le droit d'être plus petit. */
.electric h2{font-size:clamp(32px,3.6vw,46px);letter-spacing:-2px}
.electric-grid{display:grid;grid-template-columns:1.15fr 1.7fr;gap:36px;align-items:center}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.plan{background:rgba(255,255,255,.82);border:1px solid rgba(16,17,31,.08);border-radius:18px;padding:23px;text-align:center}
.plan .emoji{font-size:38px}
.plan b{display:block;font-size:20px;margin:6px 0}
.plan strong{display:block;font-size:26px;letter-spacing:-1px}
.plan span{font-size:14px;color:var(--muted)}
.kwh-note{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between;margin-top:12px}
.kwh-note .price{font-size:14px;font-weight:900}
/* ---------- FAQ ---------- */
.faq-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.faq-list{display:grid;gap:12px;margin-top:28px}
details{background:white;border:1px solid rgba(16,17,31,.10);border-radius:14px;padding:18px 20px}
summary{cursor:pointer;font-weight:900;font-size:18px}
/* Les réponses prennent toute la largeur disponible — demande de Jeremy,
2026-09-16 : la liste est déjà bornée par `.wrap`. */
details p{margin:12px 0 0;color:var(--muted)}
/* `a{color:inherit}` rend les liens invisibles : dans une réponse, un lien
qui ne se voit pas est un lien qui n'existe pas. */
details p a{color:var(--purple);font-weight:800;text-decoration:underline;text-underline-offset:3px}
/* ---------- bande contact ---------- */
.contact{background:linear-gradient(90deg,#eee8ff,#f5edff);padding:var(--rythme) 0}
.contact-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:28px;align-items:center}
.contact-copy{display:flex;align-items:center;gap:18px}
.contact-copy .bubble{font-size:52px}
/* ---------- pages intérieures ---------- */
.page-head{padding:var(--rythme) 0 0;text-align:center}
.page-head .lead{margin-left:auto;margin-right:auto}
.prose{max-width:760px;margin:0 auto}
/* Les h2 de l'accueil font jusqu'à 62 px parce qu'ils titrent des tableaux
illustrés. Au-dessus d'un paragraphe de 18 px, la même taille écrase le
texte qu'elle annonce. */
.prose h2{font-size:clamp(28px,3.2vw,40px);letter-spacing:-1.6px;margin-bottom:14px}
/* L'illustration flotte DANS la colonne de texte plutôt que dans une grille à
côté : deux blocs de texte qui commencent à deux abscisses différentes sur
la même page, ça se voit sans qu'on sache le nommer. */
.prose-art{float:right;width:250px;margin:0 0 18px 30px;shape-outside:circle()}
@media (max-width:700px){ .prose-art{float:none;width:200px;margin:0 auto 18px} }
.prose p{font-size:18px;color:#27283b;margin-bottom:18px}
/* Un encadré posé sous une colonne de 760 px doit avoir la même mesure :
deux largeurs de texte sur la même page se lisent comme deux pages. */
.panel.narrow{max-width:760px;margin:0 auto}
.panel.narrow h2{font-size:clamp(28px,3.2vw,40px);letter-spacing:-1.6px}
.panel.narrow .lead{font-size:18px}
.feature-table{display:grid;gap:14px;margin-top:26px}
/* Deux colonnes dès qu'il y a la place. En une seule, chaque description
s'étalait sur 1180 px — environ 150 caractères par ligne, le double de ce
qui se lit confortablement — et les 24 entrées faisaient une page de près
de quatre mille pixels. */
@media (min-width:900px){
.feature-table{grid-template-columns:1fr 1fr}
.group-title{grid-column:1/-1}
}
.frow{display:grid;grid-template-columns:54px 1fr;gap:16px;background:#fff;border:1px solid rgba(16,17,31,.08);border-radius:18px;padding:20px 22px}
.frow i{font-style:normal;font-size:32px;line-height:1}
.frow b{display:block;font-size:19px;letter-spacing:-.4px;margin-bottom:5px}
/* Entre 700 et 900 px, la liste est encore sur une colonne de 836 px : sans
cette borne, une description y courait sur 115 caractères. */
.frow p{margin:0;font-size:15px;color:var(--muted);max-width:62ch}
.group-title{margin:44px 0 6px;font-size:15px;font-weight:1000;text-transform:uppercase;letter-spacing:1.2px;color:var(--purple)}
/* ---------- premium ---------- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:10px}
.offer{border-radius:26px;padding:32px;border:1px solid rgba(16,17,31,.08);background:#fff;
box-shadow:var(--shadow);display:flex;flex-direction:column}
.offer.best{background:linear-gradient(180deg,#fff9e6,#fff2cc);border:2px solid var(--yellow)}
/* La carte est une colonne flex : ses enfants directs s'étirent, et c'est ce
qui donne au bouton toute la largeur. Un bouton enveloppé dans un