/* Boulo landing v2 — portage fidèle de la maquette « Boulo - Access and Landing v2 »
   (Claude Design). Styles = helmet de la maquette + @font-face auto-hébergées
   (offline-first) + ajouts (formulaire d'essai, WhatsApp, nav mobile). */
@font-face { font-family: 'Poppins'; font-weight: 400; font-display: swap; src: url('assets/fonts/poppins-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 500; font-display: swap; src: url('assets/fonts/poppins-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 600; font-display: swap; src: url('assets/fonts/poppins-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 700; font-display: swap; src: url('assets/fonts/poppins-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 800; font-display: swap; src: url('assets/fonts/poppins-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Sora'; font-weight: 600; font-display: swap; src: url('assets/fonts/sora-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Sora'; font-weight: 700; font-display: swap; src: url('assets/fonts/sora-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Sora'; font-weight: 800; font-display: swap; src: url('assets/fonts/sora-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Spline Sans Mono'; font-weight: 500; font-display: swap; src: url('assets/fonts/spline-sans-mono-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Spline Sans Mono'; font-weight: 600; font-display: swap; src: url('assets/fonts/spline-sans-mono-latin-600-normal.woff2') format('woff2'); }
html { overflow-x: clip; scroll-behavior: smooth; }
/* Largeur max de la landing (le design est « encadré », pas plein écran) */
.scr { max-width: 1200px; margin-inline: auto; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--green); color: #04100d; padding: 10px 16px; font-weight: 700; z-index: 100; }
.skip-link:focus { left: 0; }
:root{
  --deep:#0E6B5B;--green:#2BC7AD;--teal:#3DE8CD;--teal-soft:#0F2B24;
  --coral:#FF8A66;--coral-soft:#2E1B14;--bg:#070E0C;--card:#0F1A16;
  --ink:#ECFDF7;--ink2:#96AFA7;--ink3:#5E736C;--border:#1C2B26;--soft:#14231E;--field:#0B1512;--coral-text:#FF9E80;--danger-solid:#D65A38;
  --shadow:0 0 0 1px rgba(61,232,205,.08),0 18px 40px -20px rgba(0,0,0,.75);--shadow-sm:0 0 0 1px rgba(61,232,205,.06),0 8px 22px -12px rgba(0,0,0,.65);
  --shadow-pop:0 0 0 1px rgba(61,232,205,.14),0 24px 60px -16px rgba(0,0,0,.85);--glow:0 0 26px rgba(61,232,205,.35);
  --r-card:20px;--r-field:14px;--r-pill:999px;
  --ease-out:cubic-bezier(0.23,1,0.32,1);--ease-in-out:cubic-bezier(0.77,0,0.175,1);--ease-drawer:cubic-bezier(0.32,0.72,0,1);
}
[data-theme="light"]{--deep:#0B4A3F;--green:#0E8A76;--teal:#14B8A0;--teal-soft:#DDF5EF;--coral:#E07A5F;--coral-soft:#FBEAE4;--bg:#F4FAF8;--card:#FFFFFF;--ink:#0E1B17;--ink2:#647A73;--ink3:#93A5A0;--border:#E0ECE8;--field:#FFFFFF;--soft:#EAF3F0;--coral-text:#BF4A2C;--danger-solid:#BF4A2C;--shadow:0 18px 40px -28px rgba(11,74,63,.35);--shadow-sm:0 6px 18px -12px rgba(11,74,63,.30);--shadow-pop:0 24px 60px -20px rgba(11,74,63,.45);--glow:0 0 22px rgba(20,184,160,.30);}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);font-family:'Poppins',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--green);text-decoration:none}a:hover{color:var(--deep)}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.tnum{font-variant-numeric:tabular-nums}
::-webkit-scrollbar{width:0;height:0}
@keyframes bfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.scr{animation:bfade .3s ease both}
@keyframes bscreen1{0%,4%{opacity:0;transform:translateY(10px)}8%,30%{opacity:1;transform:none}36%,100%{opacity:0;transform:translateY(-10px)}}
@keyframes bscreen2{0%,36%{opacity:0;transform:translateY(10px)}40%,63%{opacity:1;transform:none}69%,100%{opacity:0;transform:translateY(-10px)}}
@keyframes bscreen3{0%,69%{opacity:0;transform:translateY(10px)}73%,96%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-10px)}}
.phscreen{position:absolute;inset:0;padding:16px 15px;display:flex;flex-direction:column;opacity:0}
.phs1{animation:bscreen1 12s cubic-bezier(.23,1,.32,1) infinite}
.phs2{animation:bscreen2 12s cubic-bezier(.23,1,.32,1) infinite}
.phs3{animation:bscreen3 12s cubic-bezier(.23,1,.32,1) infinite}
@keyframes bdot{0%,100%{opacity:.3}33%{opacity:1}}
.pdot{width:6px;height:6px;border-radius:999px;background:var(--teal);animation:bdot 12s infinite}
.pdot2{animation-delay:-4s}.pdot3{animation-delay:-8s}
@keyframes bfloaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes brise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes bsqfloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-16px) rotate(12deg)}}
@keyframes bsqspin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.sync-spin{animation:bspin2 .9s linear infinite}@keyframes bspin2{to{transform:rotate(360deg)}}
.sync-dot2{animation:bpulse2 1.6s ease-in-out infinite}@keyframes bpulse2{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes bkenburns{0%{transform:scale(1) translate(0,0)}100%{transform:scale(1.12) translate(-1.5%,-1.5%)}}
.kb{animation:bkenburns 14s ease-in-out infinite alternate}.kb2{animation-duration:17s;animation-direction:alternate-reverse}.kb3{animation-duration:20s}
@media (prefers-reduced-motion:reduce){.kb,.kb2,.kb3{animation:none}}
.floaty{animation:bfloaty 5s ease-in-out infinite}
.patt{background-image:radial-gradient(var(--teal-soft) 1.6px,transparent 1.6px);background-size:20px 20px}
@keyframes baurora{0%{transform:translate(-8%,-6%) scale(1)}50%{transform:translate(8%,6%) scale(1.18)}100%{transform:translate(-8%,-6%) scale(1)}}
@keyframes baurora2{0%{transform:translate(6%,4%) scale(1.1)}50%{transform:translate(-6%,-8%) scale(1)}100%{transform:translate(6%,4%) scale(1.1)}}
@keyframes borbit{from{transform:rotate(0) translateX(var(--orb-r,90px)) rotate(0)}to{transform:rotate(360deg) translateX(var(--orb-r,90px)) rotate(-360deg)}}
.aurora{will-change:transform}
.hero-grid{background-image:linear-gradient(rgba(79,179,169,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(79,179,169,.13) 1px,transparent 1px);background-size:44px 44px}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.reveal.rv-scale{transform:scale(.94)}
.reveal.rv-scale.in{transform:none}
.ritem{opacity:0;transform:translateY(26px) scale(.97);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.reveal.in .ritem{opacity:1;transform:none}
.reveal.in .ritem:nth-child(1){transition-delay:.05s}.reveal.in .ritem:nth-child(2){transition-delay:.13s}.reveal.in .ritem:nth-child(3){transition-delay:.21s}.reveal.in .ritem:nth-child(4){transition-delay:.29s}.reveal.in .ritem:nth-child(5){transition-delay:.37s}.reveal.in .ritem:nth-child(6){transition-delay:.45s}
.glow-hover{transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out)}
@media (hover:hover){.glow-hover:hover{transform:translateY(-4px);box-shadow:0 20px 44px -22px rgba(20,125,114,.5),0 0 0 1px rgba(79,179,169,.35)}}
.hero-h1 span{display:inline-block;opacity:0;transform:translateY(18px);animation:brise .7s var(--ease-out) forwards}
@keyframes bmarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee-track{display:flex;gap:14px;width:max-content;animation:bmarquee 22s linear infinite}
.glass{background:rgba(255,255,255,.10);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.18)}
.paused,.paused *{animation-play-state:paused!important}
.nomotion .floaty,.nomotion .aurora,.nomotion [class*=orb] span,.nomotion .marquee-track,.nomotion .kb,.nomotion .kb2,.nomotion .kb3,.nomotion .pdot,.nomotion .phs2,.nomotion .phs3{animation:none!important}
.nomotion .phs1{opacity:1!important}.nomotion .phs2,.nomotion .phs3{display:none!important}
@media (prefers-reduced-motion:reduce){.hero-grid,.marquee-track,.hero-h1 span,.aurora,[class*=orb] span,.floaty,.kb,.kb2,.kb3{animation:none!important}.hero-h1 span{opacity:1;transform:none}.reveal,.ritem{opacity:1;transform:none;transition:none}}
@media (prefers-reduced-motion:reduce){.phs1,.phs2,.phs3,.pdot,.floaty{animation:none}.phs1{opacity:1}.phs2,.phs3{display:none}}

/* ── Ajouts pour la page statique ────────────────────────────────────────── */
.wa-fab { position: fixed; right: 20px; bottom: 20px; z-index: 40; display: flex; align-items: center; gap: 9px; background: #25d366; color: #fff; font: 700 13px 'Poppins'; padding: 12px 18px 12px 14px; border-radius: 999px; box-shadow: 0 16px 34px -12px rgba(0,0,0,.45); text-decoration: none; }
.wa-fab svg { width: 22px; height: 22px; }
.wa-fab:hover { color: #fff; }
.nav-toggle { display: none; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 11px; padding: 8px; color: #fff; cursor: pointer; }
.nav-toggle svg { width: 22px; height: 22px; display: block; }
.nav-mobile { position: fixed; top: 62px; left: 12px; right: 12px; z-index: 30; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 8px; box-shadow: var(--shadow-pop); display: none; flex-direction: column; }
.nav-mobile[data-open="true"] { display: flex; }
.nav-mobile a { padding: 12px 14px; border-radius: 10px; font: 600 14px 'Poppins'; color: var(--ink); text-decoration: none; }
.nav-mobile a:hover { background: var(--soft); color: var(--green); }
@media (max-width: 720px) { .nav-desktop-links { display: none !important; } .nav-toggle { display: inline-flex; } }

/* Champ honeypot anti-bot (formulaire « Demander un essai ») : masqué visuellement
   et pour les lecteurs d'écran, mais présent dans le DOM/tabindex pour piéger les bots. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Champs de formulaire (écran « essai » — mêmes tokens que la maquette : var(--field)/
   var(--border)/var(--r-field)), avec un état focus (non spécifié par la maquette statique
   mais requis pour l'accessibilité). */
.f-input { width: 100%; background: var(--field); border: 1px solid var(--border); border-radius: var(--r-field); padding: 12px 14px; font: 500 13.5px 'Poppins'; color: var(--ink); }
.f-input::placeholder { color: var(--ink3); }
.f-input:focus-visible { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(61,232,205,.18); }
textarea.f-input { resize: none; font-family: 'Poppins', sans-serif; }
.f-select-wrap { position: relative; }
.f-select-wrap select.f-input { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; }
.f-select-wrap svg { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--ink3); }
.form-status { margin: 8px 0 0; font: 600 13px 'Poppins'; color: var(--teal); min-height: 1.2em; }
.form-status.err { color: var(--coral-text); }

/* Case CGU (écran « essai ») : checkbox native masquée + boîte stylée comme la
   maquette (22px, rayon 7px, verte quand cochée). Les liens internes (<a>) sont
   du contenu interactif : les cliquer ne coche pas la case (comportement natif). */
.cgu-check { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; margin-bottom: 14px; }
.cgu-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cgu-box { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 7px; border: 2px solid var(--border); background: var(--card); display: flex; align-items: center; justify-content: center; transition: all .15s; }
.cgu-box svg { opacity: 0; }
.cgu-check input:checked ~ .cgu-box { background: var(--green); border-color: var(--green); }
.cgu-check input:checked ~ .cgu-box svg { opacity: 1; }
.cgu-check input:focus-visible ~ .cgu-box { outline: 2px solid var(--green); outline-offset: 2px; }

/* Bouton « Envoyer la demande » : grisé tant que la case CGU n'est pas cochée
   (mêmes deux états que la maquette), activé via main.js. */
.trial-submit { width: 100%; border: none; border-radius: 14px; padding: 14px; font: 600 14.5px 'Poppins'; box-shadow: var(--shadow-sm); background: var(--soft); color: var(--ink3); cursor: not-allowed; }
.trial-submit.enabled { background: var(--deep); color: #fff; cursor: pointer; }

/* Écran « essai » (essai.html) : grille formulaire / contact direct. */
@media (max-width: 760px) {
  [style*="1.4fr 1fr"] { grid-template-columns: 1fr !important; }
  [style*="max-width: 900px"] { max-width: 100% !important; }
}

/* Robustesse : ne JAMAIS masquer le contenu derrière une animation qui peut caler
   (compositeur chargé / bas de gamme). Le contenu est visible par défaut ;
   l'entrée n'est qu'un enrichissement transform-only. */
.scr { animation: none !important; opacity: 1 !important; }
.hero-h1 span { opacity: 1 !important; animation: rise-t .7s var(--ease-out) backwards !important; }
@keyframes rise-t { from { transform: translateY(18px); } to { transform: none; } }

/* Perf : le flou lourd des auroras sature le compositeur (bas de gamme / rendu
   logiciel) et fait ramer les autres animations (écrans du téléphone). On
   allège le flou et on réduit les particules en orbite. */
.aurora { filter: blur(34px) !important; }
.anim-sec [style*="borbit"]:nth-child(n+4) { display: none; }
/* Le téléphone montre TOUJOURS l'écran dashboard (la rotation des 3 écrans
   dépend du GPU et casse en rendu logiciel/bas de gamme → on la désactive au
   profit d'un écran statique fiable). */
.phs1 { opacity: 1 !important; animation: none !important; }
.phs2, .phs3 { display: none !important; }
.pdot { animation: none; }
.pdot:first-child { background: var(--teal); }
.pdot:not(:first-child) { opacity: .3; }

/* ── Responsive : la maquette est en styles inline « desktop ». On adapte les
   grilles et les blocs en ligne via des sélecteurs d'attribut ciblés. ──────── */
@media (max-width: 980px) {
  [style*="repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 760px) {
  /* Paddings de section resserrés */
  [style*="padding: 48px 44px"] { padding: 34px 20px !important; }
  [style*="padding: 24px 44px 8px"] { padding: 14px 20px 6px !important; }
  [style*="padding: 20px 44px"] { padding: 16px 20px !important; }
  [style*="margin: 0px 44px"] { margin: 0 16px !important; }
  /* Hero, Diaspora, Offline, témoignage : empilement vertical */
  [style*="flex-direction: row"] { flex-direction: column !important; align-items: stretch !important; }
  [style*="width: 42%"] { width: 100% !important; }
  [style*="width: 340px"], [style*="width: 240px"] { width: 100% !important; }
  /* Grilles 3 et 4 colonnes → 1 colonne */
  [style*="repeat(3, 1fr)"], [style*="repeat(4, 1fr)"] { grid-template-columns: 1fr !important; }
  /* Téléphone du hero recentré, cartes diaspora dans le flux */
  #tilt-wrap { margin: 8px auto 0 !important; }
  .hero-h1 { font-size: 36px !important; }
  /* Cartes flottantes Diaspora : éviter le débordement hors écran */
  [style*="left: -12px"] { left: 8px !important; }
  [style*="right: -8px"] { right: 8px !important; }
}
@media (max-width: 480px) {
  .gallery-grid { grid-template-columns: 1fr !important; }
}

/* En-tête : FR + thème + Se connecter + menu ☰ ne tiennent plus sur une seule
   ligne à côté du logo sur les petits téléphones (cible bas de gamme) → on
   les laisse passer à la ligne plutôt que de déborder/se chevaucher. */
@media (max-width: 420px) {
  .nav-actions { flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; }
}