@font-face{font-family:"Clash Display";src:url("fonts/clash-display-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Clash Display";src:url("fonts/clash-display-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Satoshi";src:url("fonts/satoshi-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Satoshi";src:url("fonts/satoshi-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Satoshi";src:url("fonts/satoshi-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Caveat";src:url("fonts/caveat-600-latin.woff2") format("woff2");font-weight:600;font-display:swap}

/* Règles de forme : boutons en pilule, cartes 20px, images 16px. Un seul accent : mauve. */
:root{
  --ink:#0b1733; --text:#1e293b; --muted:#475569; --line:#e2e8f0;
  --bg:#ffffff; --soft:#eef4ff; --soft-2:#f8fafc;
  --accent:#0a5cf0; --accent-dark:#0747c7; --accent-ink:#0b2a6b;
  --ok:#15803d;
  --r-card:20px; --r-img:16px;
  --shadow:0 24px 48px -24px rgba(11,42,107,.32);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Satoshi",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--text);background:var(--bg);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:"Clash Display","Satoshi",sans-serif;font-weight:700;color:var(--ink);letter-spacing:-.015em;line-height:1.06;margin:0}
.wrap{width:min(1180px,100% - 40px);margin-inline:auto}
.icon{width:1.25em;height:1.25em;flex:none}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:#fff;padding:8px 12px;z-index:99;border-radius:8px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;border-radius:999px;padding:.95em 1.5em;font-weight:700;font-size:1rem;text-decoration:none;white-space:nowrap;border:2px solid transparent;cursor:pointer;font-family:inherit;transition:transform .15s ease,background .2s ease,color .2s ease,box-shadow .2s ease}
.btn:active{transform:translateY(1px) scale(.99)}
.btn .icon{width:1.15em;height:1.15em}
.btn-main{background:var(--accent);color:#fff;box-shadow:0 12px 26px -12px rgba(10,92,240,.6)}
.btn-main:hover{background:var(--accent-dark)}
.btn-ghost{border-color:var(--ink);color:var(--ink);background:#fff}
.btn-ghost:hover{background:var(--ink);color:#fff}
:focus-visible{outline:3px solid #93c5fd;outline-offset:3px;border-radius:8px}

.note{font-family:"Caveat",cursive;font-weight:600;color:var(--accent);font-size:1.6rem;line-height:1.1;display:inline-flex;align-items:flex-end;gap:8px;transform:rotate(-2deg)}
.note svg{width:48px;height:34px;flex:none}

/* En-tête */
.top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:saturate(160%) blur(10px);-webkit-backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:70px;gap:20px}
.logo{display:inline-flex;align-items:center;text-decoration:none}
.logo img{height:40px;width:auto}
@media (max-width:640px){.logo img{height:34px}}
.top nav{display:flex;gap:28px;font-weight:500}
.top nav a{text-decoration:none;color:var(--muted)}
.top nav a:hover{color:var(--ink)}
.top .btn{padding:.7em 1.2em}
.top-cta .short{display:none}
@media (max-width:640px){.top-cta .long{display:none}.top-cta .short{display:inline}}

/* Héros */
.hero{padding:56px 0 64px;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:52px;align-items:center}
.hero h1{font-size:clamp(2.4rem,4.3vw,3.9rem);margin:18px 0 22px;max-width:13ch}
.pill{display:inline-block;background:var(--soft);color:var(--accent-ink);font-weight:700;border-radius:999px;padding:.45em 1em;font-size:.98rem}
.hero h1 em{font-style:normal;color:var(--accent);display:inline-block;position:relative}
.hero h1 em svg{position:absolute;left:-2%;bottom:-.24em;width:104%;height:.36em;color:#b9d3ff}
.hero .lead{font-size:1.22rem;color:var(--muted);max-width:33ch;margin:0 0 30px}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap}
.devices{position:relative;padding:10px 0 40px 0}
.browser{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.browser .bar{height:34px;display:flex;align-items:center;gap:7px;padding:0 14px;background:var(--soft-2);border-bottom:1px solid var(--line)}
.browser .bar i{width:10px;height:10px;border-radius:50%;background:#cbd5e1}
.browser .bar span{margin-left:12px;font-size:.78rem;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:999px;padding:2px 12px}
.phone{position:absolute;right:-8px;bottom:-6px;width:31%;border-radius:30px;background:#0f172a;padding:9px;box-shadow:0 30px 60px -20px rgba(15,23,42,.55)}
.phone img{border-radius:22px}
.devices .note{position:absolute;left:4%;bottom:-18px}

/* Bande locale */
.local{background:var(--soft)}
.local .wrap{display:flex;align-items:center;gap:16px;padding:22px 0;flex-wrap:wrap;font-weight:500;color:var(--accent-ink)}
.local .icon{color:var(--accent);width:24px;height:24px}

section{padding:96px 0}
.sec-title{font-size:clamp(2rem,3.8vw,3rem);margin-bottom:16px}
.sec-sub{color:var(--muted);max-width:58ch;font-size:1.1rem;margin:0 0 44px}

/* Étapes : ligne du temps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;position:relative;counter-reset:s}
.steps::before{content:"";position:absolute;left:0;right:0;top:27px;height:2px;background:repeating-linear-gradient(90deg,var(--accent) 0 10px,transparent 10px 18px);opacity:.45}
.step{padding-right:36px;position:relative}
.step .num{width:56px;height:56px;border-radius:50%;background:#fff;border:2px solid var(--accent);display:grid;place-items:center;font-family:"Clash Display",sans-serif;font-weight:700;font-size:1.35rem;color:var(--accent);margin-bottom:22px;position:relative;z-index:1}
.step h3{font-size:1.45rem;margin-bottom:8px}
.step p{margin:0;color:var(--muted)}
.steps-foot{margin-top:40px}

/* Vitrine exemple */
.showcase{background:var(--soft-2)}
.showcase .wrap{display:grid;grid-template-columns:.8fr 1fr;gap:64px;align-items:center}
.tall-phone{width:min(330px,100%);margin-inline:auto;border-radius:38px;background:#0f172a;padding:11px;box-shadow:0 40px 70px -30px rgba(15,23,42,.5)}
.tall-phone img{border-radius:28px}
.features{display:grid;gap:26px;margin:0;padding:0;list-style:none}
.features li{display:grid;grid-template-columns:48px 1fr;gap:16px;align-items:start}
.features .ic{width:48px;height:48px;border-radius:14px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;color:var(--accent)}
.features .ic .icon{width:24px;height:24px}
.features b{display:block;font-size:1.12rem;color:var(--ink)}
.features span{color:var(--muted)}
.showcase .btn{margin-top:34px}

/* Tout compris : grille bento */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cell{border-radius:var(--r-card);padding:26px;border:1px solid var(--line);background:#fff;display:flex;flex-direction:column;gap:10px;min-height:190px}
.cell .icon{width:30px;height:30px;color:var(--accent)}
.cell h3{font-size:1.3rem}
.cell p{margin:0;color:var(--muted);font-size:.98rem}
.cell.wide{grid-column:span 2}
.cell.visual{padding:0;overflow:hidden;background:var(--soft);border:0;display:grid;grid-template-columns:1fr 1.1fr;align-items:end}
.cell.visual .txt{padding:26px;align-self:center}
.cell.visual img{align-self:end;border-radius:12px 0 0 0;box-shadow:var(--shadow)}
.cell.violet{background:var(--accent);border:0;color:#fff}
.cell.violet h3,.cell.violet p{color:#fff}
.cell.violet .icon{color:#fff}
.cell.violet .note{color:#fff;font-size:1.7rem;margin-top:auto}
.cell.ink{background:var(--ink);border:0}
.cell.ink h3{color:#fff}
.cell.ink p{color:#cbd5e1}
.cell.ink .icon{color:#7cc4ff}

/* Prix */
.pricing .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.price-card{border-radius:28px;padding:40px;background:#fff;border:2px solid var(--accent);box-shadow:var(--shadow)}
.price-card .start{display:inline-block;background:var(--soft);color:var(--accent-ink);font-weight:700;border-radius:999px;padding:.35em .9em;margin-bottom:18px}
.price-card .big{font-family:"Clash Display",sans-serif;font-weight:700;color:var(--ink);font-size:clamp(3.4rem,7vw,5rem);line-height:1}
.price-card .big small{font-family:"Satoshi",sans-serif;font-size:1.1rem;font-weight:500;color:var(--muted);letter-spacing:0}
.price-card ul{list-style:none;padding:0;margin:26px 0 30px;display:grid;gap:12px}
.price-card li{display:flex;gap:10px;align-items:flex-start}
.price-card li .icon{color:var(--ok);margin-top:.2em}
.price-card .btn{width:100%}
.price-card .fine{margin:14px 0 0;color:var(--muted);font-size:.93rem;text-align:center}
.compare h2{margin-bottom:18px}
.compare p{color:var(--muted);font-size:1.1rem;margin:0 0 18px;max-width:46ch}
.compare .vs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
.compare .vs div{border-radius:16px;padding:18px 20px;background:var(--soft-2)}
.compare .vs div:last-child{background:var(--soft)}
.compare .vs b{display:block;font-family:"Clash Display",sans-serif;font-size:1.6rem;color:var(--ink)}
.compare .vs small{color:var(--muted)}

/* À propos */
.about{background:var(--soft)}
.about .wrap{max-width:780px}
.about p{font-size:1.25rem;color:var(--text);margin:0 0 18px}
.about .sign{font-family:"Caveat",cursive;font-weight:600;font-size:2.4rem;color:var(--accent);transform:rotate(-3deg);display:inline-block;margin-top:6px}
.about .who{color:var(--muted);font-size:1rem;margin:0}

/* Questions */
.faq .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.faq details{border-bottom:1px solid var(--line);padding:6px 0}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:18px;align-items:center;padding:16px 0;font-weight:700;font-size:1.12rem;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:"Clash Display",sans-serif;font-size:1.6rem;color:var(--accent);line-height:1;transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 18px;color:var(--muted);max-width:60ch}

/* Formulaire d'aperçu */
.ask{background:var(--ink);color:#e2e8f0}
.ask h2{color:#fff}
.ask .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.ask .sec-sub{color:#cbd5e1}
.ask .promise{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.ask .promise li{display:flex;gap:10px;align-items:center;color:#f1f5f9}
.ask .promise .icon{color:#7cc4ff}
form.card{background:#fff;color:var(--text);border-radius:24px;padding:32px;display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
form.card .full{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-weight:700;font-size:.95rem;color:var(--ink)}
.field label small{font-weight:500;color:var(--muted)}
.field input,.field select,.field textarea{font:inherit;font-size:1rem;color:var(--ink);background:#fff;border:1.5px solid #cbd5e1;border-radius:12px;padding:.75em .9em;width:100%}
.field textarea{min-height:96px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(10,92,240,.18)}
.field .err{color:#b91c1c;font-size:.88rem;min-height:1em}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.95rem;color:var(--muted)}
.consent input{margin-top:.3em;width:18px;height:18px;accent-color:var(--accent)}
.hp{position:absolute;left:-9999px}
.form-status{border-radius:12px;padding:14px 16px;font-weight:500}
.form-status.ok{background:#ecfdf3;color:#14532d}
.form-status.bad{background:#fef2f2;color:#991b1b}
form.card .btn{width:100%}

footer.site{padding:44px 0 56px;border-top:1px solid var(--line)}
footer.site .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-start}
footer.site p{margin:.3em 0;color:var(--muted)}
footer.site nav{display:flex;gap:22px;flex-wrap:wrap}
footer.site nav a{color:var(--muted);text-decoration:none}
footer.site nav a:hover{color:var(--ink)}

/* Apparition douce au défilement */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
  .reveal.in{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

@media (max-width:980px){
  .top nav{display:none}
  .hero .wrap,.showcase .wrap,.pricing .wrap,.faq .wrap,.ask .wrap{grid-template-columns:1fr;gap:40px}
  .hero{padding-top:34px}
  .bento{grid-template-columns:1fr 1fr}
  .cell.visual{grid-column:span 2}
  .steps{grid-template-columns:1fr;gap:34px}
  .steps::before{left:27px;right:auto;top:0;bottom:0;width:2px;height:auto;background:repeating-linear-gradient(180deg,var(--accent) 0 10px,transparent 10px 18px)}
  .step{padding:0 0 0 80px}
  .step .num{position:absolute;left:0;top:0}
  section{padding:72px 0}
}
@media (max-width:640px){
  body{font-size:16px}
  .top-cta .icon{display:none}
  .hero .ctas .btn{flex:1}
  .bento{grid-template-columns:1fr}
  .cell.wide,.cell.visual{grid-column:auto}
  .cell.visual{grid-template-columns:1fr}
  .cell.visual img{border-radius:12px 12px 0 0;margin-left:26px}
  .compare .vs{grid-template-columns:1fr}
  form.card{grid-template-columns:1fr;padding:22px}
  .phone{width:36%}
  .price-card{padding:28px}
}