:root{color-scheme:light}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}

/* Concept: une page qui montre les deux métiers côte à côte. Un site (fenêtre de navigateur) et une campagne (tableau de bord) dans le hero, puis les services, la méthode en 4 étapes ordonnées, les offres et un formulaire qui prépare le message WhatsApp. Bleu Majorelle comme couleur principale, safran en repère. Deux langues : français (par défaut) et anglais. */
:root{
  --bg:#F3F5FA; --surface:#FFFFFF; --ink:#0E1330; --muted:#566079; --line:#D9DEEC;
  --accent:#2433C7; --accent-ink:#FFFFFF; --sun:#FFB400; --sun-ink:#1A1400;
  --band:#0E1330; --band-ink:#EEF0FA; --band-muted:#A4ACCB; --band-line:#2B3260;
  --good:#127A4B; --bar:#C4CBE3; --plate:#FFFFFF; --step:"Étape";
  --f-display:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;
  --f-body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0B0F24; --surface:#131938; --ink:#EEF0FA; --muted:#9AA3C4; --line:#272E57;
  --accent:#8C99FF; --accent-ink:#0B0F24; --band:#070A1A; --good:#4CD08F; --bar:#2C3566; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0B0F24; --surface:#131938; --ink:#EEF0FA; --muted:#9AA3C4; --line:#272E57;
  --accent:#8C99FF; --accent-ink:#0B0F24; --band:#070A1A; --good:#4CD08F; --bar:#2C3566; color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:16px/1.6 var(--f-body);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--f-display);line-height:1.08;margin:0;text-wrap:balance;letter-spacing:-.02em}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px;border-radius:4px}
.wrap{max-width:1120px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.eyebrow{font:500 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.35rem;border-radius:999px;font-weight:600;text-decoration:none;border:2px solid transparent;cursor:pointer;font-family:var(--f-body);font-size:1rem}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{filter:brightness(1.1)}
.btn-ghost{border-color:var(--line);background:transparent;color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink)}

/* adresse e-mail et boutons de copie */
.mail{font:500 .88rem var(--f-mono);color:var(--sun);text-decoration:none;overflow-wrap:anywhere}
.mail:hover{text-decoration:underline}
.mini{font:inherit;font-size:.8rem;border:1px solid var(--band-line);background:transparent;color:var(--band-ink);border-radius:99px;padding:.2rem .75rem;cursor:pointer}
.mini:hover{border-color:var(--band-ink)}
.mailrow{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;margin-top:1.6rem}

/* header */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);border-bottom:1px solid var(--line)}
.bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1rem;padding-block:.9rem}
.bar-right{display:flex;align-items:center;gap:1.2rem}
.logo{display:inline-flex;align-items:center;background:var(--plate);border:1px solid var(--line);border-radius:10px;padding:.4rem .75rem;text-decoration:none}
.logo img{display:block;height:1.6rem;width:auto;max-width:100%}
.plate{display:inline-flex;background:var(--plate);border-radius:14px;padding:.5rem}
.plate img{display:block;height:7.5rem;width:auto;max-width:100%}
.hero-logo .plate img{height:clamp(7rem,16vw,10.5rem)}
nav{display:flex;gap:1.5rem;align-items:center}
nav a{text-decoration:none;font-weight:500;color:var(--muted)}
nav a:hover{color:var(--ink)}
nav .btn{padding:.55rem 1.1rem;color:var(--accent-ink)}
@media (max-width:760px){nav a:not(.btn){display:none}.logo img{height:1.3rem}}
.lang{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:2px;background:var(--surface)}
.lang button{font:600 .8rem var(--f-mono);letter-spacing:.06em;border:0;background:transparent;color:var(--muted);padding:.35rem .75rem;border-radius:999px;cursor:pointer}
.lang button:hover{color:var(--ink)}
.lang button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}

/* hero */
.hero{padding-block:clamp(2.5rem,6vw,5rem)}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}
.hero-grid>*{min-width:0}
h1{font-size:clamp(2.5rem,6.4vw,4.6rem);font-weight:800}
h1 mark{background:linear-gradient(transparent 62%,var(--sun) 62% 92%,transparent 92%);color:inherit;padding:0 .08em}
.lead{font-size:1.15rem;color:var(--muted);max-width:34em;margin-top:1.4rem}
.cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.proof{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-top:2rem;padding:0;list-style:none;font-size:.92rem;color:var(--muted)}
.proof li::before{content:"";display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:var(--accent);margin-right:.5rem}

.stage{position:relative;display:grid;gap:1rem}
.win{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.win-top{display:flex;align-items:center;gap:.4rem;padding:.6rem .8rem;border-bottom:1px solid var(--line)}
.win-top b{width:.6rem;height:.6rem;border-radius:50%;background:var(--line)}
.win-top span{margin-left:.6rem;font:500 11px var(--f-mono);color:var(--muted);background:var(--bg);padding:.2rem .6rem;border-radius:99px}
.site{padding:1.1rem}
.site h3{font-size:1.35rem}
.site p{font-size:.85rem;color:var(--muted);margin-top:.4rem}
.site-row{display:flex;gap:.6rem;margin-top:.9rem;flex-wrap:wrap}
.pill{font-size:.78rem;font-weight:600;padding:.4rem .8rem;border-radius:99px}
.pill.a{background:var(--accent);color:var(--accent-ink)}
.pill.b{background:var(--sun);color:var(--sun-ink)}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-top:1rem}
.tiles div{height:3.2rem;border-radius:8px;background:var(--bg);border:1px solid var(--line)}
.dash{padding:1.1rem}
.dash-head{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.tag{font:500 10.5px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px dashed var(--line);padding:.2rem .5rem;border-radius:6px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin:.9rem 0 .4rem}
.kpi small{display:block;font-size:.72rem;color:var(--muted)}
.kpi strong{font:700 1.25rem var(--f-display);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.kpi strong.g{color:var(--good)}
.chart{width:100%;height:auto;display:block}
.chart .b{fill:var(--bar)}
.chart .b.hi{fill:var(--accent)}
.chart text{fill:var(--muted);font:500 9px var(--f-mono)}
.chart line{stroke:var(--line);stroke-width:1}
@media (max-width:420px){.kpi strong{font-size:1.05rem}}

/* sections */
section{padding-block:clamp(3rem,7vw,5.5rem)}
.sec-head{display:grid;gap:.9rem;max-width:40rem;margin-bottom:2.5rem}
h2{font-size:clamp(1.9rem,4.2vw,3rem);font-weight:800}
.sec-head p{color:var(--muted);font-size:1.08rem}

.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:1.2rem}
.svc{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:clamp(1.4rem,3vw,2.2rem);display:flex;flex-direction:column;gap:1.1rem;min-width:0}
.svc.hot{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.svc.hot .eyebrow,.svc.hot p,.svc.hot li{color:inherit}
.svc.hot .eyebrow{opacity:.8}
.svc h3{font-size:clamp(1.6rem,3vw,2.1rem)}
.svc ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.svc li{display:flex;gap:.7rem}
.svc li::before{content:"";flex:none;width:.9rem;height:2px;background:currentColor;margin-top:.8em;opacity:.6}
.svc .meta{margin-top:auto;padding-top:1rem;border-top:1px solid var(--line);font-size:.9rem;color:var(--muted)}
.svc.hot .meta{border-color:color-mix(in srgb,currentColor 30%,transparent);color:inherit}

.band{background:var(--band);color:var(--band-ink)}
.band .eyebrow,.band .sec-head p{color:var(--band-muted)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:0;counter-reset:s}
.steps li{counter-increment:s;padding:1.4rem 1.4rem 1.4rem 0;border-top:1px solid var(--band-line);display:grid;gap:.6rem;align-content:start}
.steps li::before{content:var(--step) " " counter(s);font:500 12px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--sun)}
.steps h3{font-size:1.35rem}
.steps p{color:var(--band-muted);font-size:.97rem}

.flow{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:2.5rem;padding:1.2rem 1.4rem;border:1px solid var(--band-line);border-radius:14px}
.flow span{font:500 13px var(--f-mono);letter-spacing:.04em}
.flow .arr{color:var(--sun)}
.flow .end{background:var(--sun);color:var(--sun-ink);padding:.3rem .7rem;border-radius:99px}

.plats{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem;padding:0;list-style:none}
.plats li{border:1px solid var(--line);background:var(--surface);padding:.45rem .95rem;border-radius:99px;font-weight:600;font-size:.92rem}

.offers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1.2rem}
.offer{border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:1.6rem;display:flex;flex-direction:column;gap:1rem;min-width:0}
.offer.pack{border:2px solid var(--accent)}
.offer h3{font-size:1.5rem}
.offer .for{color:var(--muted);font-size:.95rem}
.offer ul{margin:0;padding:0;list-style:none;display:grid;gap:.55rem;font-size:.97rem}
.offer li{display:flex;gap:.6rem}
.offer li::before{content:"✓";color:var(--accent);font-weight:700}
.offer .price{margin-top:auto;font:500 12px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-top:.8rem;border-top:1px solid var(--line)}

.faq{max-width:46rem;display:grid;gap:.7rem}
details{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:1rem 1.2rem}
summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:1rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:500 1.3rem/1 var(--f-mono);color:var(--accent)}
details[open] summary::after{content:"–"}
details p{margin-top:.8rem;color:var(--muted)}

.contact{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
@media (max-width:900px){.contact{grid-template-columns:1fr}}
.contact>*{min-width:0}
form{display:grid;gap:1rem;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:18px;padding:clamp(1.2rem,3vw,2rem)}
label{display:grid;gap:.35rem;font-weight:600;font-size:.92rem}
input,select,textarea{font:inherit;font-weight:400;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:.7rem .85rem;width:100%}
textarea{min-height:5.5rem;resize:vertical}
.two{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:520px){.two{grid-template-columns:1fr}}
.out{display:grid;gap:.8rem;margin-top:.4rem}
.out[hidden]{display:none}
.out pre{white-space:pre-wrap;word-break:break-word;margin:0;font:400 .92rem/1.55 var(--f-body);background:var(--bg);border:1px dashed var(--line);border-radius:10px;padding:.9rem}
.out .row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.note{font-size:.85rem;color:var(--muted)}

footer{border-top:1px solid var(--line);padding-block:2rem;color:var(--muted);font-size:.9rem}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem 1.5rem}
.foot-brand{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;min-width:0}
@media (prefers-reduced-motion:no-preference){.btn{transition:filter .15s,border-color .15s}}