/* Règles communes à (quasi) toutes les pages : header au scroll, burger menu,
   menu mobile, boutons CTA, typographie de base. Extrait des <style> inline
   dupliqués sur les 22 pages du site — une ligne n'est retirée d'une page que
   si elle correspondait ici mot pour mot ; toute page qui a une valeur
   différente (ex: timing de .reveal, hauteur de #mobile-menu.is-open) garde
   sa règle en local, où elle prime normalement sur celle-ci (cascade :
   <link> avant <style> dans le <head> de chaque page). */

/* Manrope auto-hébergée (fichier variable unique, poids 400-800, sous-ensemble latin
   suffisant pour le français — les caractères accentués français sont tous dans
   Latin-1 Supplement U+00C0-00FF). Remplace la chaîne preconnect + feuille CSS
   Google Fonts + fichier de poids (~750ms de chaîne de requêtes selon PageSpeed)
   par un seul fichier servi depuis ce domaine. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/manrope-latin.woff2') format('woff2');
}

html, body { background-color: #FFFFFF; }

/* Honeypot anti-bot (formulaires de capture de leads) : invisible et
   inaccessible pour un humain (hors écran + aria-hidden + tabindex -1),
   volontairement pas display:none — certains bots l'ignorent justement
   parce que ce pattern est trop reconnaissable. */
.hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
body { font-family: 'Manrope', system-ui, sans-serif; color: #17171A; }
.text-display { font-family: 'Manrope', system-ui, sans-serif; font-weight: 700; letter-spacing: -0.02em; line-height: 1.06; }
.text-section { font-family: 'Manrope', system-ui, sans-serif; font-weight: 700; letter-spacing: -0.01em; line-height: 1.14; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
#site-header { background-color: rgba(255,255,255,0); transition: background-color .4s ease, backdrop-filter .4s ease, border-color .4s ease; border-bottom: 1px solid transparent; }
#site-header.header-scrolled { background-color: rgba(255,255,255,0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: rgba(23,23,26,0.08); }
.burger-line { display: block; height: 2px; width: 22px; background-color: #17171A; transition: transform .3s ease, opacity .3s ease; }
.burger-line + .burger-line { margin-top: 5px; }
#burger-btn.is-active .burger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#burger-btn.is-active .burger-line:nth-child(2) { opacity: 0; }
#burger-btn.is-active .burger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
#mobile-menu { max-height: 0; overflow: hidden; background-color: #fff; border-radius: 0 0 16px 16px; box-shadow: 0 16px 32px -10px rgba(23,23,26,0.16); transition: max-height .45s cubic-bezier(.16,1,.3,1); }
/* Assez de marge pour le menu le plus long (6 liens + "Démarrer un projet" + CTA,
   ex: index.html) sans jamais rogner le dernier item — mieux vaut une petite marge
   morte en bas sur les menus plus courts qu'un lien inaccessible sur le plus long. */
#mobile-menu.is-open { max-height: 560px; }
/* Séparateurs fins entre liens (pas de trait avant la zone CTA, qui a son propre
   border-top) — Tailwind divide-y n'est pas compilé dans ce build statique. */
.mobile-menu-links > a { border-bottom: 1px solid rgba(23,23,26,0.08); }
.mobile-menu-links > a:last-child { border-bottom: none; }
::selection { background-color: #E8FF5B; color: #17171A; }
.cta-btn { background-color: #0F6B62; color: #fff; transition: background-color .18s ease, color .18s ease, transform .18s ease; }
.cta-btn:hover, .cta-btn:focus-visible { background-color: #E8FF5B; color: #17171A; transform: translateY(-1px); }
.cta-btn:focus-visible { outline: 2px solid #17171A; outline-offset: 3px; }
.hl { background: #E8FF5B; color: #17171A; padding: 2px 10px; box-decoration-break: clone; -webkit-box-decoration-break: clone; display: inline-block; transform: rotate(-1deg); }

/* Mot "fantôme" (contour seul, pas de remplissage) — écart de graisse/contraste
   dans un même titre, plutôt qu'un aplat de couleur systématique. */
.ghost { color: transparent; -webkit-text-stroke: 1.5px rgba(23,23,26,0.32); }
.ghost-light { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,0.55); }

/* Pages à hero photo plein écran assombri (body.hero-dark) : tant que le header
   n'a pas encore son fond blanc au scroll, logo/nav/burger passent en clair
   pour rester lisibles sur la photo sombre. Sans effet sur les autres pages. */
body.hero-dark #site-header:not(.header-scrolled) .text-ink,
body.hero-dark #site-header:not(.header-scrolled) .text-ink\/70 { color: rgba(255,255,255,.92); }
body.hero-dark #site-header:not(.header-scrolled) .burger-line { background-color: rgba(255,255,255,.92); }

/* Cartes (constat, offres, cas clients...) : liseré teal + léger soulèvement au survol. */
.card { background: #FAFAF8; border: 1px solid rgba(23,23,26,0.08); border-bottom: 3px solid #0F6B62; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(23,23,26,0.14), 0 0 0 2px #0F6B62; border-color: #0F6B62; }

/* Bouton "retour en haut" : coin bas-droit par défaut, masqué tant qu'on n'a pas
   scrollé. Empilé au-dessus de la bulle de chat FAQ (#faq-chat-toggle, 56px,
   right-5/6 bottom-5/6) quand elle est présente, pour ne jamais la recouvrir. */
#back-to-top { position: fixed; right: 20px; bottom: 20px; z-index: 55; width: 44px; height: 44px; border: none; border-radius: 9999px; background: #17171A; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; cursor: pointer; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .25s ease, transform .25s ease, background-color .18s ease; }
#back-to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
#back-to-top:hover, #back-to-top:focus-visible { background: #0F6B62; }
#back-to-top:focus-visible { outline: 2px solid #17171A; outline-offset: 3px; }
#back-to-top.stacked-above-chat { bottom: 84px; }
@media (min-width: 768px) {
  #back-to-top { right: 24px; bottom: 24px; }
  #back-to-top.stacked-above-chat { bottom: 92px; }
}
@media (prefers-reduced-motion: reduce) { #back-to-top { transition: opacity .01ms; } }
