/* Page d'accueil de Clicspot (maquette Claude Design « landing », validée le 19/10/2026).
   CSS de la maquette repris tel quel ; les styles propres à chaque bloc restent dans le HTML (landing-view.ts).
   Polices servies par nous : Plus Jakarta Sans et Pacifico (SIL Open Font License 1.1, paquets @fontsource). */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/fonts/plus-jakarta-sans-var.woff2) format('woff2-variations'),url(/assets/fonts/plus-jakarta-sans-var.woff2) format('woff2')}
@font-face{font-family:'Pacifico';font-style:normal;font-display:swap;font-weight:400;src:url(/assets/fonts/pacifico.woff2) format('woff2')}

/* --- CSS de la maquette --- */
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{margin:0;background:#fff}
.lead,.check{text-wrap:pretty}
a{color:#635bff}a:hover{color:#0a2540}
@keyframes drift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes pulse{0%{opacity:.9;transform:scale(.9)}100%{opacity:0;transform:scale(1.6)}}
.wrap{max-width:1080px;margin:0 auto;padding:0 32px;box-sizing:border-box}
.sec{padding:112px 0}
.kicker{font-size:15px;font-weight:700;color:#3b5bdb;margin:0 0 14px}
.h2{text-wrap:balance;font-weight:700;font-size:44px;line-height:1.12;letter-spacing:-.022em;margin:0 0 18px;color:#0a2540;max-width:720px}
.lead{font-size:18px;line-height:1.65;color:#425466;margin:0;max-width:600px}
.btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;border-radius:999px;font-weight:600;font-size:15px;text-decoration:none;box-sizing:border-box;transition:background .15s,transform .15s}
.btn-dark{background:#0a2540;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 6px 16px -6px rgba(10,37,64,.45)}.btn-dark:hover{color:#fff;background:#1a3a5f}
.btn-brand{background:#3b5bdb;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 16px -6px rgba(59,91,219,.6)}.btn-brand:hover{color:#fff;background:#2f4bc4}
.btn-light{background:#fff;color:#0a2540}.btn-light:hover{color:#0a2540;background:#fff}
.btn-link{color:#3b5bdb;font-weight:600;text-decoration:none}
.panel{background:#fff;border-radius:16px;box-shadow:0 1px 2px rgba(10,37,64,.06),0 30px 60px -24px rgba(50,50,93,.28),0 18px 36px -24px rgba(0,0,0,.22)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.5;color:#425466}
.field{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;color:#0a2540}
.input{height:46px;border:1px solid #8792a2;border-radius:10px;padding:0 14px;font:inherit;font-weight:400;background:#fff}
.terrasse{background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.1) 22%,rgba(0,0,0,.35) 45%,rgba(0,0,0,.8) 70%),url(/assets/site/terrasse.webp) center 35%/cover no-repeat}
.slant-a{clip-path:polygon(0 80px,100% 0,100% calc(100% - 80px),0 100%)}
.slant-b{clip-path:polygon(0 0,100% 80px,100% 100%,0 calc(100% - 80px))}
.slant-c{clip-path:polygon(0 80px,100% 0,100% 100%,0 100%)}
.navpill{display:flex;gap:28px;padding:10px 22px;border-radius:999px;background:rgba(255,255,255,.72);backdrop-filter:blur(12px);box-shadow:0 4px 20px rgba(10,37,64,.08)}
.navpill a{color:#0a2540;text-decoration:none;font-weight:600}
@media (max-width:860px){.grid2,.grid3{grid-template-columns:minmax(0,1fr)}.h2{font-size:34px}.hide-sm{display:none!important}.wrap{padding:0 16px}.sec{padding:72px 0}.hero-h1{font-size:44px!important}
.hero-visual{height:500px!important;flex:1 1 100%!important}.hero-visual .hv-phone{right:auto!important;left:50%!important;margin-left:-120px}
.dash-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.stats>div{border-right:0!important;border-bottom:1px solid #e3e8ee;padding:24px 0!important}
.slant-a,.slant-b,.slant-c{clip-path:none}}
.btn:active{transform:scale(.97)}.btn-link:hover{opacity:.75}
a:focus-visible,button:focus-visible,summary:focus-visible,.input:focus-visible{outline:3px solid #3b5bdb;outline-offset:2px}
#comment a:focus-visible,#rappel a:focus-visible{outline-color:#fff}
.input:focus{outline:none;border-color:#3b5bdb;box-shadow:0 0 0 4px rgba(59,91,219,.15)}
.num{font-variant-numeric:tabular-nums}
@keyframes led{0%,100%{opacity:1}50%{opacity:.55}}.leds{filter:drop-shadow(0 0 3px #38bdf8) drop-shadow(0 0 7px #38bdf8);animation:led 2.4s ease-in-out infinite}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}.rise{animation:rise .7s cubic-bezier(.22,1,.36,1) both;animation-delay:var(--d,0ms)}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.96)}}.pop{animation:pop .45s cubic-bezier(.22,1,.36,1) both}
summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}summary::-webkit-details-marker{display:none}
summary::after{content:'+';font-size:24px;font-weight:400;color:#3b5bdb;transition:transform .2s}details[open] summary::after{transform:rotate(45deg)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}

/* --- Ajouts pour rendre la maquette fonctionnelle --- */
/* Boutons de formulaire au même dessin que les liens .btn de la maquette. */
button.btn{border:0;font-family:inherit;cursor:pointer}
button.btn:disabled{cursor:default;opacity:.7}
.input::placeholder{color:#8792a2}
/* Formule qui intéresse le commerçant (formulaire « Être rappelé »). */
.plans{display:flex;gap:10px;margin:0;padding:0;border:0;min-width:0}
.plans legend{padding:0;margin-bottom:6px;font-size:14px;font-weight:600;color:#0a2540}
.plan{flex:1 1 0;display:flex;align-items:center;gap:8px;height:46px;padding:0 14px;border:1px solid #8792a2;border-radius:10px;font-size:15px;font-weight:600;color:#0a2540;cursor:pointer;box-sizing:border-box}
.plan input{margin:0;accent-color:#3b5bdb}
.plan:has(input:checked){border-color:#3b5bdb;background:#eef2ff}
.plan:has(input:focus-visible){outline:3px solid #3b5bdb;outline-offset:2px}
/* Champ piège pour les robots, hors de l'écran. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Roue du jeu : la zone annoncée aux lecteurs d'écran reste dans la page ; vide, elle ne décale rien. */
.roue-status{width:100%}
.roue-status:empty{margin-bottom:-16px}
[hidden]{display:none!important}