/* Manrope, hébergée ici et non chez Google (22/09/2026) : charger une
   police depuis un tiers lui transmet l'adresse de chaque visiteur, sans
   son accord, et la page affirme le contraire. Licence OFL, dans
   assets/polices/OFL.txt. La version variable : un fichier pour toutes
   les graisses, 25 ko. */
@font-face{
  font-family:'Manrope';font-style:normal;font-weight:300 800;font-display:swap;
  src:url('/assets/polices/manrope-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Manrope';font-style:normal;font-weight:300 800;font-display:swap;
  src:url('/assets/polices/manrope-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* via7ia.fr : la maison et ses pages d'une minute.
   Même famille que fsprospection.com, l'autre produit de la maison : Manrope,
   bleu nuit pour le texte, vert WhatsApp pour ce qui parle de WhatsApp, bleu
   pour les petits boutons, fonds clairs en dégradé, verre dépoli, cartes qui
   flottent, révélations douces au défilement. */
:root{
  --nuit:#0a2540; --texte:#3f5570; --gris:#64748b; --gris2:#5b7186; --bord:rgba(15,23,42,.06);
  --vert:#25d366; --vert1:#35dc79; --vert2:#1ebd5f; --vert-texte:#053019;
  --bleu:#0ea5e9; --bleu2:#0b5fd4; --orange:#ff8a00;
  --fond:#ffffff; --fond2:#f4f8fd;
  --police:Manrope,-apple-system,BlinkMacSystemFont,Inter,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--fond);color:var(--texte);font:16px/1.55 var(--police);-webkit-font-smoothing:antialiased}
a{color:inherit}
.enveloppe{max-width:1180px;margin:0 auto;padding:0 24px}

/* En-tête */
header.site{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.82);backdrop-filter:blur(14px) saturate(160%);border-bottom:1px solid var(--bord)}
header.site .enveloppe{display:flex;align-items:center;justify-content:space-between;height:70px;gap:20px}
.marque{font-weight:800;font-size:1.3rem;color:var(--nuit);text-decoration:none;letter-spacing:-.02em}
.marque span{color:var(--orange)}
header.site nav{display:flex;align-items:center;gap:26px}
header.site nav a{text-decoration:none;color:var(--nuit);font-size:.92rem;font-weight:500}
.bouton-bleu{display:inline-flex;align-items:center;background:var(--bleu);color:#fff !important;font-weight:700;border-radius:10px;padding:10px 18px;text-decoration:none;
  box-shadow:0 8px 20px -8px var(--bleu);transition:transform .15s,box-shadow .15s;border:0;cursor:pointer;font:inherit;font-weight:700;font-size:.92rem}
.bouton-bleu:hover{transform:translateY(-1px);box-shadow:0 12px 24px -8px var(--bleu)}

/* Boutons */
.bouton{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(160deg,var(--vert1) 0%,var(--vert2) 100%);color:var(--vert-texte);
  font-weight:700;font-size:.95rem;text-decoration:none;padding:15px 26px;border-radius:13px;border:0;cursor:pointer;font-family:inherit;
  box-shadow:0 16px 36px -10px rgba(31,189,95,.6),0 1px 0 rgba(255,255,255,.3);transition:transform .15s,box-shadow .15s}
.bouton:hover{transform:translateY(-2px);box-shadow:0 20px 40px -10px rgba(31,189,95,.7),0 1px 0 rgba(255,255,255,.3)}
.bouton:disabled{opacity:.6;cursor:default;transform:none}
.bouton svg{flex:0 0 auto}

/* Titres */
.sur-titre{display:inline-block;font-size:13px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--vert)}
.sur-titre.bleu{color:var(--bleu);font-weight:500;font-size:12px;letter-spacing:2px}
h1{font-size:clamp(40px,5.2vw,66px);font-weight:600;line-height:1.05;letter-spacing:-.035em;color:var(--nuit);margin:22px 0;max-width:12ch;text-wrap:balance}
h1 em{font-style:italic;font-weight:500;color:var(--vert)}
h2{font-size:clamp(32px,4.2vw,48px);font-weight:300;color:var(--nuit);margin:14px 0 16px;letter-spacing:-.03em;line-height:1.1;text-wrap:balance}
.chapeau{font-size:19px;line-height:1.55;color:var(--texte);margin:0 0 38px;max-width:520px}
.centre{text-align:center;max-width:720px;margin:0 auto}
.centre p{font-size:17px;color:var(--gris2);line-height:1.55;margin:0}

/* Sections */
section{padding:110px 0}
section.doux{background:var(--fond2)}
section.degrade{background:linear-gradient(135deg,#e4eefb 0%,#eef5fe 48%,#f3fbf5 100%)}
.hero{padding:124px 0 100px;background:linear-gradient(165deg,#eff7ff 0%,#f3fbf5 55%,#edf6ff 100%);overflow:hidden}
.hero .enveloppe{display:grid;grid-template-columns:minmax(300px,1fr) minmax(300px,420px);gap:64px;align-items:center}
.points{display:flex;flex-direction:column;gap:20px;margin:0 0 40px;padding:0;list-style:none}
.points li{display:flex;gap:14px;align-items:flex-start}
.points li span.coche{width:22px;height:22px;border-radius:50%;flex-shrink:0;margin-top:2px;background:rgba(37,211,102,.12);display:flex;align-items:center;justify-content:center}
.points b{display:block;font-size:15.5px;font-weight:600;color:var(--nuit);margin-bottom:3px}
.points small{font-size:14.5px;color:var(--gris);line-height:1.5}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero .note{font-size:13.5px;color:var(--gris);margin:14px 0 0}

/* Le téléphone en verre, ses halos, ses cartes qui flottent */
.scene{position:relative;justify-self:center;width:100%;max-width:380px}
.halos{position:absolute;inset:-90px -110px;z-index:0;pointer-events:none;filter:blur(46px)}
.halo{position:absolute;border-radius:50%}
.halo.a{top:4%;left:-8%;width:330px;height:330px;background:radial-gradient(circle,rgba(37,211,102,.42),transparent 65%);animation:haloA 16s ease-in-out infinite}
.halo.b{bottom:2%;right:-10%;width:300px;height:300px;background:radial-gradient(circle,rgba(56,189,248,.38),transparent 65%);animation:haloB 20s ease-in-out infinite}
.halo.c{top:38%;left:26%;width:260px;height:260px;background:radial-gradient(circle,rgba(110,231,183,.4),transparent 65%);animation:haloC 24s ease-in-out infinite}
@keyframes haloA{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,-24px)}}
@keyframes haloB{0%,100%{transform:translate(0,0)}50%{transform:translate(-28px,22px)}}
@keyframes haloC{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(18px,16px) scale(1.08)}}
.flotte{position:absolute;z-index:3;padding:12px 14px;border-radius:15px;background:rgba(255,255,255,.45);backdrop-filter:blur(24px) saturate(180%);
  box-shadow:0 28px 60px -18px rgba(15,23,42,.42),inset 0 1px 0 rgba(255,255,255,.7);animation:flotteY 5.2s ease-in-out infinite}
.flotte .et{display:flex;align-items:center;gap:8px;margin-bottom:5px;font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--gris2)}
.flotte b{display:block;font-size:13px;font-weight:600;color:var(--nuit)}
.flotte small{font-size:11.5px;color:var(--gris2)}
.flotte.f1{top:8px;left:-190px;width:195px}
.flotte.f2{bottom:110px;left:-170px;width:175px;animation-duration:6.4s;animation-delay:1.1s}
.flotte.f3{bottom:38px;right:-150px;width:180px;animation-duration:5.8s;animation-delay:.6s}
@keyframes flotteY{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.telephone{position:relative;z-index:1;border-radius:32px;padding:11px;width:100%;max-width:380px;background:rgba(255,255,255,.4);backdrop-filter:blur(30px) saturate(180%);
  box-shadow:0 48px 100px -30px rgba(15,23,42,.5),0 18px 40px -20px rgba(15,23,42,.28),inset 0 1px 0 rgba(255,255,255,.7)}
.telephone::before{content:"";position:absolute;inset:0;border-radius:32px;background:linear-gradient(115deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.12) 34%,transparent 55%);pointer-events:none}
.ecran{position:relative;border-radius:23px;overflow:hidden;background:rgba(255,255,255,.22);backdrop-filter:blur(6px)}
.ecran .barre{display:flex;align-items:center;gap:11px;padding:14px 16px;background:rgba(255,255,255,.45)}
.ecran .avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(160deg,var(--vert1),var(--vert2));box-shadow:0 8px 18px -6px rgba(31,189,95,.65);color:var(--vert-texte);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;flex-shrink:0}
.ecran .barre b{display:block;font-size:14px;font-weight:600;color:var(--nuit)}
.ecran .barre small{font-size:11.5px;color:var(--vert);font-weight:600;animation:pulse 2.4s ease infinite}
.ecran .barre svg{margin-left:auto}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}
.fil{padding:18px 14px 10px;display:flex;flex-direction:column;gap:9px;height:430px;overflow:hidden;justify-content:flex-end}
.bulle{max-width:86%;padding:10px 13px;font-size:13.5px;line-height:1.45;opacity:0;transform:translateY(10px) scale(.97);transition:opacity .35s,transform .35s;display:none}
.bulle.vue{opacity:1;transform:none;display:block}
.bulle.agent{align-self:flex-end;border-radius:15px 15px 5px 15px;background:linear-gradient(160deg,var(--vert1),var(--vert2));color:var(--vert-texte);box-shadow:0 14px 30px -8px rgba(31,189,95,.6),inset 0 1px 0 rgba(255,255,255,.35)}
.bulle.client{align-self:flex-start;border-radius:15px 15px 15px 5px;background:rgba(255,255,255,.6);color:#1e3a52;box-shadow:0 12px 28px -12px rgba(15,23,42,.32),inset 0 1px 0 rgba(255,255,255,.6);backdrop-filter:blur(14px)}
.bulle time{display:block;text-align:right;font-size:10px;opacity:.6;margin-top:3px}
.frappe{align-self:flex-start;display:none;gap:4px;padding:11px 14px;border-radius:14px 14px 14px 4px;background:rgba(255,255,255,.6);box-shadow:0 12px 28px -12px rgba(15,23,42,.32),inset 0 1px 0 rgba(255,255,255,.6);backdrop-filter:blur(14px)}
.frappe.agent{align-self:flex-end;border-radius:14px 14px 4px 14px;background:linear-gradient(160deg,var(--vert1),var(--vert2))}
.frappe.vue{display:flex}
.frappe span{width:6px;height:6px;border-radius:50%;background:var(--gris);animation:point 1.2s ease infinite}
.frappe.agent span{background:var(--vert-texte)}
.frappe span:nth-child(2){animation-delay:.16s}.frappe span:nth-child(3){animation-delay:.32s}
@keyframes point{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.ecran .saisie{display:flex;align-items:center;gap:8px;padding:10px 12px 12px}
.ecran .saisie span{flex:1;background:rgba(255,255,255,.7);border-radius:999px;padding:8px 14px;font-size:12.5px;color:var(--gris)}
.ecran .saisie i{width:34px;height:34px;border-radius:50%;background:linear-gradient(160deg,var(--vert1),var(--vert2));display:grid;place-items:center}

/* Le dossier : ce que le traiteur récupère */
.deux{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:center}
.fiche{border-radius:18px;padding:22px 24px;background:rgba(255,255,255,.7);backdrop-filter:blur(20px) saturate(160%);
  box-shadow:0 30px 70px -22px rgba(15,23,42,.3),0 12px 28px -14px rgba(15,23,42,.16),inset 0 1px 0 rgba(255,255,255,.7)}
.fiche .et{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--gris2);margin-bottom:12px}
.fiche dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0;font-size:14px}
.fiche dt{color:var(--gris);font-weight:500}
.fiche dd{margin:0;color:var(--nuit);font-weight:600}
.fiche .rappel{margin-top:16px;padding-top:14px;border-top:1px solid var(--bord);display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--nuit);font-weight:600}
.fiche .rappel i{width:10px;height:10px;border-radius:50%;background:var(--vert);box-shadow:0 0 0 0 rgba(37,211,102,.55);animation:clignote 2s infinite}
@keyframes clignote{0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}70%{box-shadow:0 0 0 8px rgba(37,211,102,0)}}
.deux .points{margin-top:26px;margin-bottom:0}

/* Comment ça marche */
.etapes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin-top:60px}
.etape{padding:32px;background:#fff;border-radius:14px;position:relative;overflow:hidden;box-shadow:0 30px 70px -22px rgba(15,23,42,.3),0 12px 28px -14px rgba(15,23,42,.16)}
.etape .num{font-size:64px;font-weight:300;background:linear-gradient(135deg,var(--bleu) 0%,var(--bleu2) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1;margin-bottom:16px;letter-spacing:-.03em}
.etape h3{font-size:19px;font-weight:700;color:var(--nuit);margin:0 0 10px}
.etape p{font-size:14.5px;color:var(--gris2);margin:0;line-height:1.55}

/* Le formulaire de demande d'essai */
form.demande{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:48px auto 0;max-width:760px;padding:32px;background:rgba(255,255,255,.7);backdrop-filter:blur(20px) saturate(160%);border-radius:18px;
  box-shadow:0 30px 70px -22px rgba(15,23,42,.3),0 12px 28px -14px rgba(15,23,42,.16),inset 0 1px 0 rgba(255,255,255,.7)}
form.demande label{display:block;font-size:13px;color:var(--nuit);font-weight:600;margin-bottom:6px}
form.demande input,form.demande textarea{width:100%;border:1px solid rgba(15,23,42,.1);border-radius:10px;padding:12px 13px;font:inherit;font-size:15px;background:#fff;color:var(--nuit)}
form.demande input:focus,form.demande textarea:focus{outline:2px solid var(--bleu);outline-offset:1px;border-color:transparent}
form.demande .large{grid-column:1/-1}
form.demande .piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
form.demande .pied{grid-column:1/-1;display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:4px}
form.demande .pied small{font-size:13px;color:var(--gris)}
.retour{grid-column:1/-1;padding:12px 14px;border-radius:10px;font-size:14.5px;display:none}
.retour.ok{display:block;background:rgba(37,211,102,.12);color:#0b5a37}
.retour.ko{display:block;background:rgba(255,138,0,.12);color:#9a3412}

/* Questions */
.questions{max-width:820px;margin:48px auto 0}
details.q{border-bottom:1px solid var(--bord);padding:20px 0}
details.q summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;color:var(--nuit);font-size:16px;font-weight:600}
details.q summary::-webkit-details-marker{display:none}
details.q summary::after{content:"+";color:var(--bleu);font-size:22px;font-weight:300;line-height:1;transition:transform .2s}
details.q[open] summary::after{transform:rotate(45deg)}
details.q p{color:var(--gris2);font-size:15px;line-height:1.6;margin:12px 0 0;max-width:70ch}

/* Accueil */
.offres{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin-top:48px}
.offre{display:block;text-decoration:none;padding:32px;background:#fff;border-radius:14px;box-shadow:0 30px 70px -22px rgba(15,23,42,.3),0 12px 28px -14px rgba(15,23,42,.16);transition:transform .2s}
.offre:hover{transform:translateY(-3px)}
.offre b{display:block;font-size:19px;font-weight:700;color:var(--nuit);margin-bottom:8px}
.offre span{font-size:14.5px;color:var(--gris2);line-height:1.55}
.offre .lien{display:inline-block;margin-top:14px;color:var(--bleu);font-weight:700;font-size:14.5px}
.offre.bientot{opacity:.75}

/* Pied */
footer.site{padding:36px 0;color:var(--gris);font-size:13.5px;border-top:1px solid var(--bord);background:#fff}
footer.site .enveloppe{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
footer.site a{color:var(--gris)}

/* Révélations au défilement */
.reveler{opacity:0;transform:translateY(22px);transition:opacity .55s,transform .6s cubic-bezier(.22,1,.36,1)}
.reveler.vu{opacity:1;transform:none}
.reveler.r2{transition-delay:.14s}.reveler.r3{transition-delay:.28s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .halo,.flotte,.ecran .barre small,.fiche .rappel i,.frappe span{animation:none}
  .reveler{opacity:1;transform:none;transition:none}
  .bulle{transition:none}
}
@media (max-width:980px){
  .hero .enveloppe{grid-template-columns:1fr;gap:70px}
  .scene{max-width:340px}
  .flotte.f1{left:-8px;top:-46px}.flotte.f2{left:-10px;bottom:-30px}.flotte.f3{right:-10px;bottom:-56px}
  .deux{grid-template-columns:1fr;gap:40px}
}
@media (max-width:640px){
  section{padding:70px 0}
  .hero{padding:56px 0 90px}
  header.site nav a:not(.bouton-bleu){display:none}
  h1{max-width:none}
  form.demande{grid-template-columns:1fr;padding:22px}
  .flotte.f1{width:170px}.flotte.f3{right:-4px}
}