/* Polices auto-hébergées (licence SIL OFL) : aucun appel à Google, conforme RGPD */
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-condensed-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/barlow-condensed-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/barlow-condensed-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:Barlow;font-style:normal;font-weight:400;font-display:swap;src:url(fonts/barlow-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Barlow;font-style:normal;font-weight:500;font-display:swap;src:url(fonts/barlow-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Barlow;font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Barlow;font-style:normal;font-weight:700;font-display:swap;src:url(fonts/barlow-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:Barlow;font-style:normal;font-weight:800;font-display:swap;src:url(fonts/barlow-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Martian Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/martian-mono-latin-500-normal.woff2) format("woff2")}
/* Pied Plume — site de vente
   Concept : le langage de la route et de la pompe. Titres en capitales condensées façon panneau,
   chiffres en afficheur de pompe (mono), jaune pistolet pour l'argent économisé, vert pour le gain, rouge pour le gaspillage. */
:root{
  --bg:#EEF1F3; --surface:#FFFFFF; --ink:#0F1F33; --muted:#55657A; --line:#D5DDE5;
  --pump:#FFC629; --pump-ink:#0F1F33; --gain:#1E9E61; --waste:#E5482F; --panel:#0F1F33; --panel-ink:#EEF1F3;
  --f-display:"Barlow Condensed","Arial Narrow",system-ui,sans-serif; --f-body:Barlow,system-ui,-apple-system,"Segoe UI",sans-serif; --f-num:"Martian Mono",ui-monospace,Menlo,monospace;
  --r:14px; --max:1140px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0B1624;--surface:#132235;--ink:#EEF1F3;--muted:#9FB0C2;--line:#22344A;--gain:#3CC983;--waste:#FF6B4F;--panel:#060E18;--panel-ink:#EEF1F3;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0B1624;--surface:#132235;--ink:#EEF1F3;--muted:#9FB0C2;--line:#22344A;--gain:#3CC983;--waste:#FF6B4F;--panel:#060E18;--panel-ink:#EEF1F3;color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 var(--f-body);-webkit-font-smoothing:antialiased}
img,svg,video{max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--f-display);font-weight:800;line-height:1.02;letter-spacing:-.005em;text-wrap:balance;margin:0 0 .4em}
h1{font-size:clamp(42px,6.6vw,84px);text-transform:uppercase}
h2{font-size:clamp(34px,5vw,56px);text-transform:uppercase}
h3{font-size:24px}
p{margin:0 0 1em;max-width:65ch}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:20px}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.eyebrow{font:700 13px/1 var(--f-body);text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin:0 0 14px}
.lead{font-size:20px;color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 24px;border-radius:999px;border:2px solid var(--ink);background:var(--ink);color:var(--bg);font:700 17px var(--f-body);text-decoration:none;cursor:pointer;transition:transform .15s}
.btn:hover{transform:translateY(-2px)}
.btn.pump{background:var(--pump);border-color:var(--pump);color:var(--pump-ink)}
.btn.line{background:transparent;color:var(--ink)}
.btn.sm{min-height:42px;font-size:15px;padding:0 18px}
:focus-visible{outline:3px solid var(--pump);outline-offset:3px}
/* en-tête */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:18px;min-height:66px}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;font:800 25px/1 var(--f-display);text-transform:uppercase;letter-spacing:.01em}
.logo svg{width:34px;height:34px}
.nav{display:flex;gap:4px;margin-left:auto;align-items:center}
.nav a{text-decoration:none;font-weight:600;font-size:15.5px;padding:8px 12px;border-radius:999px}
.nav a:hover{background:var(--surface)}
.nav .btn{margin-left:6px}
.burger{display:none;margin-left:auto;background:none;border:0;color:var(--ink);font:700 15px var(--f-body);padding:10px;cursor:pointer}
@media (max-width:860px){.burger{display:block}.nav{display:none;position:absolute;left:0;right:0;top:66px;background:var(--bg);flex-direction:column;align-items:stretch;padding:12px 20px 20px;border-bottom:1px solid var(--line)}.nav.open{display:flex}.nav .btn{margin:8px 0 0}}
/* héro */
.hero{padding:56px 0 40px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}
.hero h1 .strike{color:var(--waste);text-decoration:line-through;text-decoration-thickness:6px}
.hero h1 em{font-style:normal;background:var(--pump);color:var(--pump-ink);padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 14px}
.trust{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14.5px;color:var(--muted);margin:0;padding:0;list-style:none}
.trust li::before{content:"✓ ";color:var(--gain);font-weight:800}
/* afficheur de pompe */
.pump-display{background:var(--panel);color:var(--panel-ink);border-radius:22px;padding:26px;box-shadow:0 30px 60px -30px rgba(15,31,51,.55)}
.pump-display .row{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid rgba(238,241,243,.14);padding:12px 0}
.pump-display .row:last-child{border:0}
.pump-display .k{font:600 13px var(--f-body);text-transform:uppercase;letter-spacing:.12em;opacity:.7}
.pump-display .v{font:500 clamp(24px,3.4vw,36px)/1 var(--f-num);font-variant-numeric:tabular-nums;white-space:nowrap}
.pump-display .k{padding-right:12px}
.pump-display .v.y{color:var(--pump)}
.pump-display .note{font-size:12.5px;opacity:.65;margin:10px 0 0}
/* bandes */
section{padding:72px 0}
.band{background:var(--surface);border-block:1px solid var(--line)}
.dark{background:var(--panel);color:var(--panel-ink)}
.dark .eyebrow,.dark .lead{color:color-mix(in srgb,var(--panel-ink) 70%,transparent)}
.dark .btn.line{color:var(--panel-ink);border-color:var(--panel-ink)}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.facts div{padding:22px;border-left:1px solid var(--line);min-width:0}
.facts div:first-child{border-left:0}
.facts b{display:block;font:500 clamp(22px,3vw,32px)/1.1 var(--f-num);letter-spacing:-.04em;margin-bottom:6px}
.facts span{font-size:14.5px;color:var(--muted)}
.facts a.src{font-size:12px;color:var(--muted)}
@media (max-width:860px){.facts{grid-template-columns:1fr 1fr}.facts div:nth-child(3){border-left:0}.facts div:nth-child(n+3){border-top:1px solid var(--line)}}
/* simulateur */
.sim{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
@media (max-width:900px){.sim{grid-template-columns:1fr}}
.sim-in{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:24px;display:grid;gap:20px}
.field label{display:flex;justify-content:space-between;font-weight:700;font-size:15px;margin-bottom:8px;gap:10px}
.field output{font:500 15px var(--f-num)}
input[type=range]{width:100%;accent-color:var(--gain);height:28px}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{border:1.5px solid var(--line);background:var(--bg);color:var(--ink);border-radius:999px;padding:8px 14px;font:600 14px var(--f-body);cursor:pointer}
.seg button[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.sim-out{position:sticky;top:90px}
.sim-out .pump-display .v{font-size:clamp(30px,4.6vw,46px)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.split div{background:rgba(238,241,243,.07);border-radius:12px;padding:12px}
.split b{display:block;font:500 22px var(--f-num)}
.split span{font-size:13px;opacity:.75}
/* cartes et grilles */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media (max-width:860px){.grid3,.grid2{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;min-width:0}
.card h3{margin-top:4px}
.step-n{font:500 14px var(--f-num);color:var(--muted)}
.vs{display:grid;grid-template-columns:1fr 1fr;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.vs>div{padding:24px;min-width:0}
.vs .old{background:var(--bg)}
.vs .new{background:var(--surface)}
.vs ul{margin:0;padding-left:20px}.vs li{margin:6px 0}
.vs .old li::marker{content:"✕  ";color:var(--waste)}.vs .new li::marker{content:"✓  ";color:var(--gain)}
@media (max-width:700px){.vs{grid-template-columns:1fr}}
/* offres */
.offers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
@media (max-width:960px){.offers{grid-template-columns:1fr}}
.offer{background:var(--surface);border:1.5px solid var(--line);border-radius:22px;padding:26px;display:flex;flex-direction:column;gap:12px;min-width:0}
.offer.hot{border-color:var(--ink);box-shadow:0 0 0 4px var(--pump)}
.offer .tag{align-self:flex-start;font:700 12px var(--f-body);text-transform:uppercase;letter-spacing:.1em;background:var(--pump);color:var(--pump-ink);padding:4px 10px;border-radius:999px}
.price{font:500 40px/1 var(--f-num);letter-spacing:-.04em;margin:4px 0}.price .pre{font:700 18px var(--f-body);letter-spacing:0;color:var(--muted)}.price small{display:block;font:600 14px var(--f-body);letter-spacing:0;color:var(--muted);margin-top:8px}
.offer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:15.5px}
.offer li::before{content:"✓";color:var(--gain);font-weight:800;margin-right:8px}
.offer .btn{margin-top:auto}
.tiers{width:100%;border-collapse:collapse;font-size:15.5px}
.tiers th,.tiers td{padding:12px 10px;border-bottom:1px solid var(--line);text-align:left}
.tiers td.num{white-space:nowrap}
.tbl-wrap{overflow-x:auto}
/* témoignages : emplacements */
.testi{border:2px dashed var(--line);border-radius:var(--r);padding:22px;color:var(--muted);font-size:15px}
.testi b{color:var(--ink)}
/* FAQ */
details.faq{border-bottom:1px solid var(--line);padding:16px 0}
details.faq summary{cursor:pointer;font-weight:700;font-size:18px;list-style:none;display:flex;justify-content:space-between;gap:12px}
details.faq summary::after{content:"+";font:500 22px var(--f-num)}
details.faq[open] summary::after{content:"–"}
details.faq p{margin:12px 0 0;color:var(--muted)}
/* formulaires */
form .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:600px){form .row2{grid-template-columns:1fr}}
form label{display:block;font-weight:600;font-size:15px;margin-bottom:12px}
form input,form select,form textarea{display:block;width:100%;margin-top:6px;font:inherit;font-size:16px;color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:12px;padding:12px}
form .chk{display:flex;gap:10px;font-weight:500;font-size:14px;align-items:flex-start}
form .chk input{width:auto;margin-top:4px}
.form-ok{background:color-mix(in srgb,var(--gain) 14%,var(--surface));border:1.5px solid var(--gain);border-radius:var(--r);padding:18px}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:6px 0 14px}
.slots button{border:1.5px solid var(--line);background:var(--bg);color:var(--ink);border-radius:10px;padding:10px;font:600 14px var(--f-body);cursor:pointer;text-align:left}
.slots button[aria-pressed=true]{border-color:var(--gain);background:color-mix(in srgb,var(--gain) 14%,var(--surface))}
/* pied de page */
footer{background:var(--panel);color:var(--panel-ink);padding:50px 0 30px;font-size:15px}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px}
@media (max-width:760px){footer .cols{grid-template-columns:1fr 1fr}}
footer a{text-decoration:none;opacity:.85}footer a:hover{opacity:1;text-decoration:underline}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
footer h4{font:700 13px var(--f-body);text-transform:uppercase;letter-spacing:.12em;opacity:.6;margin:0 0 12px}
footer .legal{border-top:1px solid rgba(238,241,243,.15);margin-top:34px;padding-top:18px;font-size:13px;opacity:.7}
.sources{font-size:13px;color:var(--muted)}.sources ol{padding-left:20px}.sources a{word-break:break-word}
sup a{font-size:11px;color:var(--muted);text-decoration:none;font-weight:700}
/* pages légales */
.legal-page{padding:48px 0 80px}.legal-page h1{font-size:clamp(36px,6vw,60px)}.legal-page h2{font-size:26px;text-transform:none;margin-top:1.6em}.legal-page p,.legal-page li{max-width:75ch}
/* bandeau cookies */
.cookie{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:50;max-width:560px;margin:0 auto;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:0 20px 50px -20px rgba(15,31,51,.45);font-size:14.5px}
.cookie .acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.cookie .acts .btn{flex:1;min-height:44px;font-size:15px}
.cookie fieldset{border:0;padding:0;margin:10px 0 0}
.cookie label{display:flex;gap:8px;align-items:flex-start;margin:6px 0}
.sticky-cta{display:none}
@media (max-width:700px){.sticky-cta{display:flex;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:25}.sticky-cta .btn{flex:1}body.has-sticky{padding-bottom:80px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

@media (max-width:520px){.facts{grid-template-columns:1fr}.facts div{border-left:0!important;border-top:1px solid var(--line)}.facts div:first-child{border-top:0}.pump-display .row{flex-wrap:wrap;gap:4px 12px}.pump-display{padding:20px}}

/* ===== Version « défi 21 jours » ===== */
.hero h1 .hl{background:var(--pump);color:var(--pump-ink);padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
/* téléphone : mission du jour */
.phone{width:min(330px,100%);margin:0 auto;background:#060E18;border-radius:42px;padding:12px;box-shadow:0 40px 80px -40px rgba(15,31,51,.7)}
.phone .scr{background:var(--panel);border-radius:32px;overflow:hidden;color:var(--panel-ink)}
.phone .notif{margin:14px;background:rgba(238,241,243,.1);border-radius:16px;padding:12px 14px;font-size:14px;line-height:1.35;animation:notif 6s infinite}
.phone .notif b{display:block;color:var(--pump);font:700 12px var(--f-body);letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px}
@keyframes notif{0%{transform:translateY(-30px);opacity:0}8%,90%{transform:none;opacity:1}100%{opacity:0}}
.phone .body{padding:6px 18px 20px}
.phone .day{font:500 44px/1 var(--f-num);color:var(--pump)}
.phone .day small{font-size:16px;opacity:.6}
.phone .dots{display:flex;flex-wrap:wrap;gap:5px;margin:12px 0 16px}
.phone .dots i{width:16px;height:16px;border-radius:50%;border:2px solid rgba(238,241,243,.25)}
.phone .dots i.g{background:var(--gain);border-color:var(--gain)}.phone .dots i.y{background:var(--pump);border-color:var(--pump)}.phone .dots i.t{box-shadow:0 0 0 3px var(--pump)}
.phone .card-m{background:#fff;color:var(--ink);border-radius:18px;padding:14px}
.phone .card-m .tag{display:inline-block;background:var(--pump);color:var(--pump-ink);font:700 11px var(--f-body);letter-spacing:.1em;text-transform:uppercase;border-radius:99px;padding:3px 9px}
.phone .card-m h4{font:800 22px/1.05 var(--f-display);text-transform:uppercase;margin:8px 0 6px}
.phone .card-m p{font-size:14px;margin:0;color:var(--muted)}
.phone .btns{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px}
.phone .btns span{border:1.5px solid var(--line);border-radius:12px;text-align:center;padding:8px 2px;font-size:12.5px;font-weight:700}
.phone .btns span.on{border-color:var(--ink);background:#FFF6D6}
/* frise des 3 temps */
.timeline{display:grid;grid-template-columns:1fr 2fr 1fr;gap:0;border-radius:22px;overflow:hidden;border:1px solid var(--line);margin-top:28px}
.timeline>div{padding:24px;background:var(--surface);min-width:0}
.timeline>div+div{border-left:1px solid var(--line)}
.timeline .mid{background:var(--panel);color:var(--panel-ink)}
.timeline .mid .eyebrow{color:var(--pump)}
.timeline .mini{display:flex;flex-wrap:wrap;gap:5px;margin-top:14px}
.timeline .mini i{width:18px;height:18px;border-radius:50%;background:var(--gain)}
.timeline .mini i:nth-child(5),.timeline .mini i:nth-child(12){background:var(--pump)}
.timeline .mini i:nth-child(17){background:var(--waste)}
@media (max-width:860px){.timeline{grid-template-columns:1fr}.timeline>div+div{border-left:0;border-top:1px solid var(--line)}}
/* gestes */
.gestes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px}
@media (max-width:860px){.gestes{grid-template-columns:1fr 1fr}}@media (max-width:520px){.gestes{grid-template-columns:1fr}}
.geste{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.geste .n{font:500 14px var(--f-num);color:var(--muted)}
.geste h3{margin:6px 0 6px;font-size:24px;text-transform:uppercase}
.geste p{margin:0;font-size:15.5px;color:var(--muted)}
.geste b.fig{display:inline-block;margin-top:10px;font:500 13px/1.45 var(--f-num);background:var(--bg);border-radius:8px;padding:3px 8px}
/* rapport d'économies (aperçu) */
.report{background:#fff;color:#0F1F33;border-radius:18px;padding:22px;box-shadow:0 30px 60px -30px rgba(15,31,51,.45);border-top:6px solid var(--pump)}
.report .r-k{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}
.report .r-k div{background:var(--panel);color:var(--panel-ink);border-radius:12px;padding:10px}
.report .r-k b{display:block;font:500 20px var(--f-num);color:var(--pump)}
.report .r-k span{font-size:12px;opacity:.8}
.report .big{display:flex;justify-content:space-between;align-items:center;border:2px solid var(--gain);background:#F1FAF5;border-radius:12px;padding:12px 14px;font-weight:700}
.report .big b{font:500 26px var(--f-num);color:var(--gain)}
.report table{width:100%;border-collapse:collapse;font-size:14px;margin-top:12px}
.report td{padding:7px 4px;border-bottom:1px solid #D5DDE5}.report td.n{text-align:right;font-family:var(--f-num)}
.report .demo{font-size:11.5px;color:#55657A;margin:10px 0 0}
.check-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.check-list li{padding-left:28px;position:relative}
.check-list li::before{content:"✓";position:absolute;left:0;color:var(--gain);font-weight:800}
.form-card{background:var(--surface);border:1.5px solid var(--line);border-radius:22px;padding:24px}
.total-box{display:flex;justify-content:space-between;align-items:baseline;background:var(--panel);color:var(--panel-ink);border-radius:14px;padding:14px 18px;margin:6px 0 14px}
.total-box b{font:500 30px var(--f-num);color:var(--pump)}
.msg{border-radius:12px;padding:12px 14px;margin:0 0 14px;font-weight:600}
.msg.err{background:color-mix(in srgb,var(--waste) 12%,var(--surface));border:1.5px solid var(--waste)}
.msg.ok{background:color-mix(in srgb,var(--gain) 12%,var(--surface));border:1.5px solid var(--gain)}
.hp{position:absolute;left:-9999px}
.cred{background:var(--panel);color:var(--panel-ink);border-radius:16px;padding:18px;font-family:var(--f-num);font-size:15px;word-break:break-all}
.cred b{color:var(--pump)}
.mission-list{columns:2;column-gap:28px;padding-left:22px}
@media (max-width:700px){.mission-list{columns:1}}
.mission-list li{break-inside:avoid;margin-bottom:8px}