# -*- coding: utf-8 -*-
"""Builds the three NBA Security landing pages. Run: python tools/build-pages.py"""
import io, os
OUT = os.path.join(os.path.dirname(os.path.abspath(__file__)), "..")
U = lambda id, w=1400: f"https://images.unsplash.com/photo-{id}?auto=format&fit=crop&w={w}&q=80"
IMG = {"racks": U("1558494949-ef010cbdcc31"), "cables": U("1544197150-b99a580bb7a8", 1000), "plant": U("1513828583688-c52646db42da", 1000),
       "electrician": U("1621905251189-08b45d6a269e", 1000), "plans": U("1581094288338-2314dddb7ece", 1000), "engineer": U("1581091226825-a6a2a5aee158", 1200),
       "power": U("1473341304170-971dccb5ac1e", 1000), "office": U("1497366216548-37526070297c", 1000), "earth": U("1451187580459-43490279c0fa", 1600)}

# ------------------------------------------------------------------ DATA
SOLUTIONS = [
    ("01", "Gaz inertes — grands espaces", "Azote, argon et mélanges stockés jusqu'à 300 bar en bouteilles de 80 L et 140 L. La référence des data centers et des archives.",
     ["Sans résidu, sans conductivité", "Sans danger pour les personnes", "Vannes directionnelles multizones"], ["IG-01", "IG-100", "IG-55", "IG-541"], "assets/img/cylinders-row.jpg", "wind", False),
    ("02", "Novec 1230 & FM-200 — espaces moyens", "Agents chimiques compacts à extinction ultra-rapide pour salles serveurs, locaux techniques et archives de taille intermédiaire.",
     ["Extinction en moins de 10 secondes", "Encombrement minimal", "Compatible équipements sensibles"], ["Novec 1230", "FM-200", "FK-5-1-12"], IMG["cables"], "server", False),
    ("03", "CO₂ avec système de pesage", "Batteries haute capacité pour salles électriques et process industriels, avec pesage permanent de chaque bouteille.",
     ["Pesage continu des bouteilles", "Sondes thermiques ATEX", "Supervision par automate Siemens"], ["CO2", "Pesage", "ATEX"], "assets/img/sergaz-room.jpg", "scale", False),
    ("04", "Armoires électriques", "Extinction ciblée à l'intérieur des baies et tableaux : le départ de feu est neutralisé avant toute propagation au local.",
     ["Détection précoce dans l'armoire", "Aucune interruption du local", "Novec, FM-200 ou CO₂"], ["Novec", "FM-200", "CO2"], IMG["electrician"], "zap", False),
    ("05", "Cuisines professionnelles", "Protection des hottes et appareils de cuisson : détection par fusibles thermiques, déclenchement automatique et coupure des énergies.",
     ["Hottes et friteuses", "Coupure automatique des énergies", "Redémarrage rapide de l'activité"], ["Hottes", "Restauration"], "assets/img/render-kitchen.jpg", "flame", True),
    ("06", "Détection & supervision", "Centrales de détection adressables à écran tactile, centrales d'extinction, évents de surpression et supervision en temps réel.",
     ["Centrales adressables Hochiki", "Détection gaz Oggioni", "Écrans tactiles et SIMATIC HMI"], ["Adressable", "SIMATIC", "Hochiki"], "assets/img/orange-panel-wide.jpg", "radar", False),
]
SECTORS = [("Data centers", IMG["racks"], "server"), ("Institutions financières", "assets/img/sonatel.jpg", "landmark"), ("Industries", IMG["plant"], "factory"), ("Transports", "assets/img/ferry.jpg", "ship"),
           ("Énergies", IMG["power"], "zap"), ("Commerces & services", "assets/img/concentrix.jpg", "store"), ("Administrations & bureaux", IMG["office"], "building-2"), ("Hôtels & restaurants", "assets/img/kitchen-fire.jpg", "utensils")]
FEATURED = [
    ("2024", False, "Orange", "Data center de Sousse", "Deux batteries IG-55 de 22 et 20 bouteilles 80 L à 200 bar, 10 vannes directionnelles, 9 centrales d'extinction, centrale de détection adressable à écran tactile et 18 évents de surpression.",
     [("42", "bouteilles IG-55"), ("10", "zones protégées"), ("18", "évents")], "assets/img/orange-panel-wide.jpg"),
    ("2026", True, "SONED", "Station de dessalement d'eau de mer de Sousse", "Deux batteries CO₂ de 37 et 16 bouteilles 80 L avec système de pesage pour les salles électriques, 4 centrales d'extinction automatique et une centrale de détection adressable.",
     [("53", "bouteilles CO₂"), ("2", "salles électriques"), ("4", "centrales")], "assets/img/soned-aerial.jpg"),
    ("2025", False, "Orange · Bizerte", "Câble sous-marin Medusa", "Trois batteries IG-55 80 L à 200 bar (9, 3 et 2 bouteilles), 4 centrales d'extinction, détection adressable et 5 évents de surpression pour la liaison Europe du Sud – Afrique du Nord.",
     [("14", "bouteilles IG-55"), ("3", "batteries"), ("5", "évents")], "assets/img/medusa-map.jpg"),
]
OTHERS = [
    ("2026", True, "Ministère de l'Éducation", "Centre national des examens", "IG-55 à 300 bar : batteries de 5 et 3 bouteilles 140 L pour deux salles d'archives.", "IG-55 · 300 bar", "assets/clients/ministere-education.png", True),
    ("2025", False, "Tribunal", "Salle d'archives", "14 bouteilles IG-100 à 300 bar, centrale d'extinction, détecteurs et évent de surpression.", "IG-100 · 300 bar", "assets/img/hero-ig55.jpg", False),
    ("2024", False, "Concentrix", "Trois sites", "Novec 1230 : 3 × 40 L sur deux sites, 2 × 40 L et 1 × 26 L sur le troisième.", "Novec 1230", "assets/img/concentrix.jpg", False),
    ("2024", False, "Misfat · Délice", "Industrie · Agroalimentaire", "IG-55 à 200 bar pour Misfat Filtration ; extinction Novec pour la Centrale Laitière du Cap Bon.", "IG-55 · Novec", "assets/img/misfat.jpg", False),
    ("2023", False, "Airbus Stelia", "Site aéronautique", "38 cylindres de gaz inerte 80 L à 200 bar, 3 systèmes Novec et 7 systèmes pour armoires électriques.", "Gaz inerte · Novec", "assets/img/airbus.jpg", False),
    ("2023", False, "Ministère de l'Intérieur", "Salle d'archives", "38 cylindres 80 L à 200 bar, 3 vannes directionnelles et système de détection incendie.", "IG-55 · 200 bar", "assets/img/cylinders-row.jpg", False),
    ("2023", False, "Tunisia Ferries", "Navire", "CO₂ 7 cylindres 67 L (45 kg) et système d'extinction par Novec.", "CO₂ · Novec", "assets/img/ferry.jpg", False),
    ("2021", False, "SCOGAT Sergaz", "Infrastructure gazière", "24 cylindres CO₂ 67 L avec pesage, supervision par automate Siemens et sondes ATEX.", "CO₂ · ATEX", "assets/img/sergaz-room.jpg", False),
    ("2021", False, "CNRPS", "Salle d'archives", "12 bouteilles IG-55 et système de détection incendie.", "IG-55", "assets/img/cnrps-ig55.jpg", False),
]
CLIENTS = ["orange", "stelia-airbus", "steg", "pfizer", "shell", "concentrix", "teleperformance", "wifak-bank", "delice", "yazaki", "sergaz", "cnrps",
           "ministere-interieur", "ministere-education", "arabsat", "asbu", "vermeg", "amilcar", "rfr", "sika", "sotacib", "geiser", "sartex", "misfat",
           "cpg", "cck", "universite-centrale", "polyclinique", "gat", "elsil"]
STRIP = ["orange", "stelia-airbus", "pfizer", "shell", "steg", "delice", "yazaki", "teleperformance", "concentrix", "sergaz", "wifak-bank", "arabsat", "sika", "vermeg", "cnrps", "misfat", "sonatrach", "credit-du-maroc"]
INTL = ["credit-du-maroc", "oncf", "inwi", "sonatrach", "mattel", "leaderfood", "bmce"]
PARTNERS = ["airfire", "hochiki", "oggioni", "puma", "optimus", "e2s", "mercor-tecresa"]
WHY = [("badge-check", "Équipements certifiés VdS", "Systèmes d'extinction AIRfire et détection Hochiki certifiés par l'organisme de référence européen.", "assets/img/hero-ig55.jpg"),
       ("package-check", "Projets clé en main", "Étude, fourniture, installation, mise en service et formation : un seul interlocuteur du début à la fin.", "assets/img/technician.jpg"),
       ("clock", "Réponse sous 48 heures", "Visite technique et proposition chiffrée rapidement, pour les projets neufs comme pour les mises à niveau.", IMG["plans"]),
       ("activity", "Maintenance & supervision", "Pesage permanent, supervision par automate et contrats de maintenance pour une protection fiable dans la durée.", "assets/img/hmi-siemens.jpg")]
METHOD = [("search", "Visite technique", "Relevé des volumes, des risques et des contraintes d'exploitation sur site."),
          ("drafting-compass", "Étude & dimensionnement", "Calcul des concentrations, choix de l'agent, plans d'exécution et note de calcul."),
          ("wrench", "Installation & réception", "Tuyauterie haute pression, centrales, essais documentés et formation des exploitants."),
          ("activity", "Maintenance & supervision", "Pesage permanent, supervision par automate et contrats de maintenance.")]
FAQ = [("Quel agent extincteur choisir pour un data center ?", "Pour les grands volumes, les gaz inertes (IG-55, IG-100) restent la référence : sans résidu, sans conductivité et sans danger pour les personnes. Pour les salles serveurs de taille moyenne, le Novec 1230 ou le FM-200 offrent une extinction très rapide avec un encombrement réduit. L'étude de dimensionnement tranche selon le volume, l'étanchéité et les contraintes d'exploitation."),
       ("Combien de temps prend une étude ?", "Après la visite technique, nous remettons une proposition détaillée avec note de calcul sous 48 heures pour la majorité des sites. Les projets multizones avec vannes directionnelles peuvent demander quelques jours supplémentaires."),
       ("Intervenez-vous en dehors de la Tunisie ?", "Oui. Nous avons réalisé des installations au Maroc, en Algérie, au Sénégal et en Mauritanie, pour des opérateurs télécoms, des banques et des industriels."),
       ("Assurez-vous la maintenance après installation ?", "Oui. Nous proposons des contrats de maintenance avec vérification périodique, pesage des bouteilles, essais des centrales et formation des exploitants. Les systèmes CO₂ peuvent être équipés d'un pesage permanent supervisé par automate."),
       ("Vos équipements sont-ils certifiés ?", "Les systèmes d'extinction AIRfire que nous intégrons sont certifiés VdS, et nos centrales de détection Hochiki et de détection gaz Oggioni répondent aux normes européennes en vigueur.")]
GALLERY = [("assets/img/cnrps-ig55.jpg", "CNRPS · IG-55"), ("assets/img/pipes-valves.jpg", "Orange · Vannes directionnelles"), ("assets/img/hero-ig55.jpg", "Ministère de l'Intérieur · IG-55"),
           ("assets/img/technician.jpg", "Installation · Sergaz"), ("assets/img/sergaz-site.jpg", "Sergaz · Site gazier"), ("assets/img/sergaz-room.jpg", "Sergaz · 24 cylindres CO₂"), ("assets/img/kitchen-pipe.jpg", "Cuisine · Buses d'extinction")]
ABOUT_P1 = "Fondée en 2020 à Tunis par <strong>Nabil Ben Ameur</strong>, NBA Security prolonge plus de dix-sept années passées à concevoir et piloter de grands projets de protection : responsable bureau de méthodes, puis responsable technico-commercial au sein de deux acteurs majeurs du secteur."
ABOUT_P2 = "De la Banque Centrale de Tunisie à la Banque Africaine de Développement, d'Orange à Eni, cette expérience a forgé une conviction simple : une protection fiable se construit sur une ingénierie rigoureuse, des équipements certifiés et un suivi sans compromis."
QUOTE = "« Nous mettons toute notre expérience, nos capacités techniques et nos formations au service d'une seule exigence : que votre activité ne s'arrête jamais. »"

def chip(name, folder="clients"):
    return f'<div class="chip"><img src="assets/{folder}/{name}.png" alt="{name.replace("-", " ").title()}" loading="lazy"></div>'
def wall(items, cls=""):
    return f'<div class="wall {cls}" data-stagger>{"".join(items)}</div>'
CLIENT_WALL = lambda: wall([chip(c) for c in CLIENTS])
INTL_WALL = lambda: wall([chip(c) for c in INTL] + ['<div class="chip"><img src="assets/img/sonatel.jpg" alt="Sonatel" loading="lazy"></div>'], "small")
PART_WALL = lambda: wall([chip(p, "partners") for p in PARTNERS] + [chip("vds")], "small")
STRIP_SLIDES = lambda: "".join(f'<div class="swiper-slide chip"><img src="assets/clients/{n}.png" alt="{n}" loading="lazy"></div>' for n in STRIP)
NAV_LINKS = '<a href="#apropos">Entreprise</a><a href="#solutions">Solutions</a><a href="#secteurs">Secteurs</a><a href="#realisations">Réalisations</a><a href="#methode">Méthode</a><a href="#faq">FAQ</a>'
TBTN = '<button class="tbtn" id="tbtn" aria-label="Changer de thème"><i data-lucide="sun" class="sun"></i><i data-lucide="moon" class="moon"></i></button>'
BURGER = '<button class="burger" id="burger" aria-label="Menu" aria-expanded="false"><i data-lucide="menu"></i></button>'
MOBILE = f'''<div class="mobile-menu" id="mobileMenu">{NAV_LINKS}<a href="#contact">Contact</a>
    <div class="mm-actions"><a href="tel:+21621081282" class="btn btn-secondary"><i data-lucide="phone"></i>+216 21 081 282</a><a href="#contact" class="btn btn-primary">Demander une étude</a></div></div>'''
COMMON_TOP = '<a href="#main" class="skip-link">Aller au contenu</a><div class="progress" id="progress"></div>'
TOTOP = '<a href="#" class="totop" id="totop" aria-label="Retour en haut"><i data-lucide="arrow-up"></i></a>'
THEME_INIT = "<script>(function(){var t='light';try{t=new URLSearchParams(location.search).get('theme')||localStorage.getItem('nba-theme')||'light'}catch(e){}document.documentElement.dataset.theme=t==='dark'?'dark':'light'})();</script>"
FAQ_ITEMS = lambda: "".join(f'<details class="card"{" open" if i == 0 else ""}><summary>{q}<i data-lucide="plus"></i></summary><p>{a}</p></details>' for i, (q, a) in enumerate(FAQ))

# ================================================================== VERSION 1 — CORPORATE
def v1_body():
    sols = ""
    for i, (num, title, desc, bullets, tags, img, icon, contain) in enumerate(SOLUTIONS):
        bl = "".join(f'<li><i data-lucide="check-circle-2"></i>{b}</li>' for b in bullets)
        tg = "".join(f'<span class="tag">{t}</span>' for t in tags)
        sols += f'''<article class="zrow{" rev" if i % 2 else ""}" data-reveal><div class="zpic{" contain" if contain else ""}"><img src="{img}" alt="" loading="lazy"><span class="num">{num}</span></div>
        <div class="ztxt"><div class="ic"><i data-lucide="{icon}"></i></div><h3>{title}</h3><p>{desc}</p><ul>{bl}</ul><div class="tags">{tg}</div></div></article>'''
    why = "".join(f'<div class="why"><i data-lucide="{ic}"></i><h3>{t}</h3><p>{d}</p></div>' for ic, t, d, _ in WHY)
    sect = "".join(f'<div class="sec-item"><i data-lucide="{ic}"></i><span>{n}</span></div>' for n, _, ic in SECTORS)
    f0 = FEATURED[0]; metr = "".join(f'<div><b>{a}</b><span>{b}</span></div>' for a, b in f0[5])
    others = "".join(f'''<a href="#contact" class="prow"><div class="th{" logo" if lg else ""}"><img src="{img}" alt="" loading="lazy"></div><div><div class="pm"><span class="yr{" live" if live else ""}">{yr}{" · En cours" if live else ""}</span><span class="spec">{spec}</span></div><h4>{client} — {sub}</h4><p>{desc}</p></div><i data-lucide="chevron-right"></i></a>''' for yr, live, client, sub, desc, spec, img, lg in OTHERS)
    f2 = "".join(f'''<article class="pf"><div class="pic"><img src="{img}" alt="" loading="lazy"><span class="yr{" live" if live else ""}">{yr}{" · En cours" if live else ""}</span></div><div class="body"><span class="client">{client}</span><h3>{title}</h3><p>{desc}</p></div></article>''' for yr, live, client, title, desc, m, img in FEATURED[1:])
    steps = "".join(f'<div class="tstep"><div class="dot">{i+1}</div><h3>{t}</h3><p>{d}</p></div>' for i, (ic, t, d) in enumerate(METHOD))
    return f'''
{COMMON_TOP}
<div class="topbar"><div class="wrap"><span><i data-lucide="clock"></i>Lun – Ven · 8h00 – 18h00</span><span><i data-lucide="map-pin"></i>Immeuble Express A3-8, 1003 Tunis</span><a href="mailto:nabil.benameur@nbasecurity.com.tn"><i data-lucide="mail"></i>nabil.benameur@nbasecurity.com.tn</a><a href="tel:+21621081282"><i data-lucide="phone"></i>+216 21 081 282</a></div></div>
<header class="site-header" id="header"><div class="wrap nav">
  <a href="#" class="logo" aria-label="NBA Security"><img src="assets/logo.jpg" alt="NBA Security"></a>
  <nav class="nav-links" aria-label="Navigation principale">{NAV_LINKS}</nav>
  <div class="nav-actions">{TBTN}<a href="#contact" class="btn btn-primary nav-cta">Demander une étude</a>{BURGER}</div></div>{MOBILE}</header>

<section class="hero" id="main">
  <div class="bg"></div><div class="shade"></div>
  <div class="wrap">
    <div class="hero-copy">
      <span class="eyebrow" data-reveal>Intégrateur sécurité incendie · Tunisie & Afrique</span>
      <h1 data-reveal>La protection incendie de vos sites critiques, <em>sans compromis.</em></h1>
      <p class="lead" data-reveal>Systèmes d'extinction automatique par gaz et de détection incendie, conçus, installés et maintenus pour les data centers, salles électriques, archives et sites industriels.</p>
      <div class="hero-actions" data-reveal><a href="#contact" class="btn btn-primary btn-lg">Demander une étude gratuite <i data-lucide="arrow-right"></i></a><a href="#solutions" class="btn btn-ghost btn-lg">Découvrir les solutions</a></div>
    </div>
  </div>
  <div class="wrap"><div class="hero-stats card" data-stagger>
    <div class="hs cert"><i data-lucide="badge-check"></i><div><b>Certifié VdS</b><span>Extinction & détection</span></div></div>
    <div class="hs"><div><b><span data-count="17">0</span>+</b><span>années d'expertise</span></div></div>
    <div class="hs"><div><b><span data-count="45">0</span>+</b><span>clients de référence</span></div></div>
    <div class="hs"><div><b><span data-count="12">0</span></b><span>projets majeurs</span></div></div>
    <div class="hs"><div><b>5</b><span>pays d'intervention</span></div></div>
  </div></div>
</section>

<div class="trust-strip"><div class="wrap"><div class="strip-label">Ils nous font confiance</div><div class="swiper logo-swiper"><div class="swiper-wrapper">{STRIP_SLIDES()}</div></div></div></div>

<section id="apropos">
  <div class="wrap about-grid">
    <div class="about-copy">
      <span class="eyebrow" data-reveal>L'entreprise</span>
      <h2 class="h2" data-reveal>Une expertise née sur le terrain, au service de vos actifs les plus sensibles.</h2>
      <p data-reveal>{ABOUT_P1}</p><p data-reveal>{ABOUT_P2}</p>
      <blockquote data-reveal>{QUOTE}<cite>Nabil Ben Ameur — Fondateur & Directeur</cite></blockquote>
    </div>
    <div class="about-visual" data-reveal>
      <div class="a1"><img src="assets/img/technician.jpg" alt="" loading="lazy"></div>
      <div class="a2"><img src="assets/img/cnrps-ig55.jpg" alt="" loading="lazy"></div>
      <div class="a3"><img src="{IMG["plans"]}" alt="" loading="lazy"></div>
    </div>
  </div>
  <div class="wrap"><div class="why-row" data-stagger>{why}</div></div>
</section>

<section id="solutions" class="alt">
  <div class="wrap">
    <div class="sec-head center"><span class="eyebrow" data-reveal>Nos solutions</span><h2 class="h2" data-reveal>Un agent extincteur adapté à chaque risque, chaque volume.</h2><p class="lead" data-reveal>Des grands plateaux techniques aux armoires électriques, nous sélectionnons la technologie la plus efficace, la plus sûre pour les personnes et la plus respectueuse de vos équipements.</p></div>
    <div class="zlist">{sols}</div>
  </div>
</section>

<section id="secteurs">
  <div class="wrap sect-grid">
    <div><span class="eyebrow" data-reveal>Secteurs d'activité</span><h2 class="h2" data-reveal>Présents partout où la continuité d'activité est vitale.</h2><p class="lead" data-reveal>Huit secteurs, une même exigence : protéger les personnes, les équipements et l'activité sans jamais l'interrompre.</p><a href="#contact" class="btn btn-primary" data-reveal>Parler à un expert</a></div>
    <div class="sec-list card" data-stagger>{sect}</div>
  </div>
</section>

<section id="realisations" class="alt">
  <div class="wrap">
    <div class="sec-head"><span class="eyebrow" data-reveal>Réalisations</span><h2 class="h2" data-reveal>Des installations qui protègent des infrastructures nationales.</h2></div>
    <article class="pbig card" data-reveal><div class="pic"><img src="{f0[6]}" alt="" loading="lazy"></div><div class="body"><span class="yr">{f0[0]}</span><span class="client">{f0[2]}</span><h3>{f0[3]}</h3><p>{f0[4]}</p><div class="metrics">{metr}</div></div></article>
    <div class="pf-grid" data-stagger>{f2}</div>
    <h3 class="sub-h" data-reveal>Autres projets récents</h3>
    <div class="plist card" data-stagger>{others}</div>
  </div>
</section>

<section id="methode">
  <div class="wrap">
    <div class="sec-head center"><span class="eyebrow" data-reveal>Notre méthode</span><h2 class="h2" data-reveal>De l'analyse de risque à la maintenance, un seul interlocuteur.</h2></div>
    <div class="timeline" data-stagger>{steps}</div>
  </div>
</section>

<section id="references" class="alt">
  <div class="wrap">
    <div class="sec-head center"><span class="eyebrow" data-reveal>Références</span><h2 class="h2" data-reveal>Des organisations exigeantes, en Tunisie et à l'international.</h2></div>
    {CLIENT_WALL()}
    <div class="ref-two"><div><h3 class="sub-h">International — Maroc · Algérie · Sénégal · Mauritanie</h3>{INTL_WALL()}</div><div><h3 class="sub-h">Partenaires technologiques</h3>{PART_WALL()}</div></div>
  </div>
</section>

<section id="faq">
  <div class="wrap faq-narrow">
    <div class="sec-head center"><span class="eyebrow" data-reveal>Questions fréquentes</span><h2 class="h2" data-reveal>Les réponses aux questions que l'on nous pose le plus.</h2></div>
    <div class="faq-list" data-stagger>{FAQ_ITEMS()}</div>
  </div>
</section>

<section id="contact" class="contact-split">
  <div class="wrap cgrid">
    <div><span class="eyebrow" data-reveal>Contact</span><h2 class="h2" data-reveal>Parlons de la protection de votre site.</h2><p class="lead" data-reveal>Une visite technique et une étude préliminaire permettent d'identifier rapidement la solution la plus adaptée à vos risques. Réponse sous 48 heures.</p>
      <div class="c-list" data-stagger>
        <a href="tel:+21621081282" class="c-item"><i data-lucide="phone"></i><div><small>Téléphone</small><span>+216 21 081 282 · +216 51 026 197</span></div></a>
        <a href="mailto:nabil.benameur@nbasecurity.com.tn" class="c-item"><i data-lucide="mail"></i><div><small>E-mail</small><span>nabil.benameur@nbasecurity.com.tn</span></div></a>
        <a href="https://www.google.com/maps/search/?api=1&query=Immeuble+Express+A3-8+Tunis+1003" target="_blank" rel="noopener" class="c-item"><i data-lucide="map-pin"></i><div><small>Adresse</small><span>Immeuble Express A3-8, 1003 Tunis, Tunisie</span></div></a>
      </div></div>
    <div class="cta-dark" data-reveal><div class="bg"></div><h3>Audit gratuit de vos risques incendie</h3><p>Data center, salle électrique, archives, cuisine professionnelle : nous évaluons vos besoins et vous remettons une proposition technique détaillée.</p>
      <ul><li><i data-lucide="check"></i>Visite technique sur site</li><li><i data-lucide="check"></i>Calcul des concentrations et dimensionnement</li><li><i data-lucide="check"></i>Proposition chiffrée avec équipements certifiés VdS</li><li><i data-lucide="check"></i>Réponse sous 48 heures</li></ul>
      <a href="mailto:nabil.benameur@nbasecurity.com.tn?subject=Demande%20d'%C3%A9tude%20-%20NBA%20Security" class="btn btn-primary btn-lg">Demander une étude <i data-lucide="arrow-up-right"></i></a></div>
  </div>
</section>

<footer class="site-footer dark"><div class="wrap">
  <div class="f-grid">
    <div class="f-brand"><span class="logo"><img src="assets/logo.jpg" alt="NBA Security"></span><p>Intégrateur de solutions de sécurité incendie et d'extinction automatique, fondé en 2020 à Tunis. Équipements certifiés VdS.</p><img class="f-vds" src="assets/clients/vds.png" alt="VdS"></div>
    <div><h4>Navigation</h4>{NAV_LINKS}</div>
    <div><h4>Solutions</h4><a href="#solutions">Gaz inertes IG-55 / IG-100</a><a href="#solutions">Novec 1230 & FM-200</a><a href="#solutions">CO₂ avec pesage</a><a href="#solutions">Armoires électriques</a><a href="#solutions">Cuisines professionnelles</a><a href="#solutions">Détection & supervision</a></div>
    <div><h4>Contact</h4><a href="tel:+21621081282">+216 21 081 282</a><a href="tel:+21651026197">+216 51 026 197</a><a href="mailto:nabil.benameur@nbasecurity.com.tn">nabil.benameur@nbasecurity.com.tn</a><span>Immeuble Express A3-8<br>1003 Tunis, Tunisie</span></div>
  </div>
  <div class="f-bottom"><span>© 2026 NBA Security. Tous droits réservés.</span><span>Tunisie · Maroc · Algérie · Sénégal · Mauritanie</span></div>
</div></footer>{TOTOP}'''

V1_CSS = '''
:root{--font-body:'Manrope',system-ui,sans-serif;--font-head:'Sora',sans-serif;--max:1180px;--sec-pad:96px;--r:16px;--r-btn:10px;
  --red:#E30613;--red-2:#B8050F;--red-soft:#FDECEE;--ink:#0F1114;--ink-2:#3F444C;--muted:#6B7280;--bg:#FFFFFF;--bg-2:#F4F6F9;--card:#FFFFFF;--line:#E3E6EB;--dark:#0F1114;
  --nav:rgba(255,255,255,.95);--shadow:0 20px 44px rgba(15,17,20,.12);--shadow-sm:0 2px 10px rgba(15,17,20,.05)}
:root[data-theme="dark"]{--red-soft:rgba(227,6,19,.16);--ink:#F2F4F7;--ink-2:#C9CDD3;--muted:#8A909A;--bg:#0F1114;--bg-2:#161A20;--card:#1A1F27;--line:rgba(255,255,255,.1);--nav:rgba(15,17,20,.95);--shadow:0 20px 44px rgba(0,0,0,.5);--shadow-sm:0 2px 10px rgba(0,0,0,.3)}
.eyebrow{background:none;padding:0;border-radius:0;letter-spacing:.14em;font-size:12px}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--red)}
.topbar{background:var(--dark);color:#C9CDD3;font-size:12.5px}
.topbar .wrap{display:flex;gap:26px;height:38px;align-items:center}
.topbar span,.topbar a{display:inline-flex;align-items:center;gap:6px}
.topbar a:hover{color:#fff}
.topbar a:last-child{margin-left:auto;color:#fff;font-weight:600}
.topbar i{width:13px;height:13px;color:var(--red)}
.hero{position:relative;color:#fff;padding:120px 0 0}
.hero .bg{position:absolute;inset:0;background:url(assets/img/cnrps-ig55.jpg) center 40%/cover}
.hero .shade{position:absolute;inset:0;background:linear-gradient(100deg,rgba(8,10,14,.94) 0%,rgba(8,10,14,.8) 50%,rgba(8,10,14,.45))}
.hero .wrap{position:relative}
.hero-copy{max-width:680px;padding-bottom:70px}
.hero .eyebrow{color:#ff8a92}.hero .eyebrow::before{background:#ff8a92}
.hero h1{font-size:clamp(38px,5vw,62px);margin:22px 0 20px}
.hero h1 em{font-style:normal;color:var(--red)}
.hero .lead{color:#D6DAE0;margin-bottom:30px;font-size:18px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.btn-ghost{border-color:rgba(255,255,255,.45);color:#fff}.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.hero-stats{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr 1fr;color:var(--ink);transform:translateY(50%);position:relative;z-index:2;padding:6px 10px}
.hs{padding:20px 22px;border-right:1px solid var(--line);display:flex;gap:12px;align-items:center;min-width:0}
.hs:last-child{border-right:0}
.hs>i{width:34px;height:34px;color:var(--red);flex:none}
.hs b{font-family:var(--font-head);font-size:28px;line-height:1;display:block;white-space:nowrap}
.hs.cert b{font-size:17px}
.hs>div>span{display:block;font-size:12.5px;color:var(--muted);margin-top:5px}
.trust-strip{padding:120px 0 40px;border-bottom:1px solid var(--line)}
.about-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}
.about-copy p{color:var(--ink-2);font-size:16.5px}.about-copy p+p{margin-top:14px}
blockquote{margin-top:26px;padding:22px 26px;border-left:4px solid var(--red);background:var(--bg-2);border-radius:0 var(--r) var(--r) 0;font-family:var(--font-head);font-weight:600;font-size:16.5px;line-height:1.5}
blockquote cite{display:block;font-style:normal;font-family:var(--font-body);font-weight:600;font-size:13px;color:var(--muted);margin-top:10px}
.about-visual{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:260px 200px;gap:14px}
.about-visual div{border-radius:var(--r);overflow:hidden}
.about-visual .a1{grid-row:span 2}
.about-visual img{width:100%;height:100%;object-fit:cover}
.why-row{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:80px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.why{padding:32px 26px;border-right:1px solid var(--line)}
.why:last-child{border-right:0}
.why>i{width:30px;height:30px;color:var(--red);margin-bottom:16px}
.why h3{font-size:17px;margin-bottom:8px}.why p{font-size:14.5px;color:var(--ink-2)}
.zlist{display:grid;gap:28px}
.zrow{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm)}
.zrow.rev .zpic{order:2}
.zpic{position:relative;min-height:340px;background:#fff}
.zpic img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.zpic.contain img{object-fit:contain;padding:30px}
.zpic .num{position:absolute;top:18px;left:18px;background:var(--dark);color:#fff;font-family:var(--font-head);font-weight:700;font-size:12px;padding:6px 10px;border-radius:8px}
.ztxt{padding:44px 48px}
.ztxt .ic{width:48px;height:48px;border-radius:12px;background:var(--red-soft);color:var(--red);display:grid;place-items:center;margin-bottom:18px}
.ztxt .ic i{width:22px;height:22px}
.ztxt h3{font-size:24px;margin-bottom:10px}.ztxt p{font-size:15px;color:var(--ink-2)}
.ztxt ul{list-style:none;margin-top:16px;display:grid;gap:8px}
.ztxt li{display:flex;gap:9px;align-items:flex-start;font-size:14.5px}
.ztxt li i{width:17px;height:17px;color:var(--red);flex:none;margin-top:3px}
.sect-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center}
.sect-grid .btn{margin-top:22px}
.sec-list{display:grid;grid-template-columns:1fr 1fr;padding:8px}
.sec-item{display:flex;align-items:center;gap:14px;padding:20px 18px;border-bottom:1px solid var(--line);font-weight:600;font-size:15.5px}
.sec-item:nth-child(odd){border-right:1px solid var(--line)}
.sec-item:nth-last-child(-n+2){border-bottom:0}
.sec-item i{width:22px;height:22px;color:var(--red);flex:none}
.pbig{display:grid;grid-template-columns:1.15fr .85fr;overflow:hidden;margin-bottom:18px}
.pbig .pic{min-height:380px;position:relative}.pbig .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pbig .body{padding:44px}
.yr{display:inline-block;background:var(--bg-2);color:var(--ink);font-family:var(--font-head);font-weight:700;font-size:12px;padding:6px 10px;border-radius:8px;border:1px solid var(--line)}
.yr.live{background:#DCFCE7;color:#166534;border-color:#bbf7d0}
.client{display:block;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--red);margin-top:14px}
.pbig h3{font-size:26px;margin:8px 0 10px}.pbig p,.pf p{font-size:14.5px;color:var(--ink-2)}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px}
.metrics div{padding:12px;border-radius:12px;background:var(--bg-2)}
.metrics b{display:block;font-family:var(--font-head);font-size:20px}.metrics span{font-size:11.5px;color:var(--muted)}
.pf-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pf{display:grid;grid-template-columns:200px 1fr;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.pf .pic{position:relative}.pf .pic img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.pf .pic .yr{position:absolute;top:12px;left:12px}
.pf .body{padding:22px 24px}.pf .client{margin-top:0}.pf h3{font-size:18px;margin:6px 0 8px}
.plist{padding:6px 0}
.prow{display:grid;grid-template-columns:120px 1fr 24px;gap:20px;align-items:center;padding:16px 22px;border-bottom:1px solid var(--line);transition:.2s}
.prow:last-child{border-bottom:0}.prow:hover{background:var(--bg-2)}
.prow .th{width:120px;height:80px;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#fff}
.prow .th img{width:100%;height:100%;object-fit:cover}.prow .th.logo img{object-fit:contain;padding:8px}
.prow .pm{display:flex;gap:10px;align-items:center;margin-bottom:6px}
.prow .spec{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--red)}
.prow h4{font-size:15.5px}.prow p{font-size:13.5px;color:var(--ink-2)}
.prow>i{width:22px;height:22px;color:var(--muted)}
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative;padding-top:10px}
.timeline::before{content:"";position:absolute;left:5%;right:5%;top:32px;height:2px;background:var(--line)}
.tstep{position:relative;padding-top:0}
.tstep .dot{width:46px;height:46px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-family:var(--font-head);font-weight:700;margin-bottom:20px;position:relative;box-shadow:0 0 0 8px var(--bg)}
.tstep h3{font-size:18px;margin-bottom:8px}.tstep p{font-size:14.5px;color:var(--ink-2)}
.faq-narrow{max-width:860px}
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.c-list{display:grid;gap:12px;margin-top:26px}
.c-item{display:flex;gap:16px;align-items:center;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);transition:.2s}
.c-item:hover{border-color:var(--red)}
.c-item>i{width:40px;height:40px;padding:10px;border-radius:10px;background:var(--red-soft);color:var(--red);flex:none}
.c-item small{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.c-item span{font-weight:600;font-size:15px}
.cta-dark{position:relative;color:#fff;padding:44px;border-radius:24px;overflow:hidden;isolation:isolate}
.cta-dark .bg{position:absolute;inset:0;background:url(assets/img/pipes-valves.jpg) center/cover;z-index:-2}
.cta-dark::after{content:"";position:absolute;inset:0;background:rgba(10,12,16,.9);z-index:-1}
.cta-dark h3{font-size:26px;margin-bottom:12px}.cta-dark p{color:#C9CDD3;font-size:15.5px}
.cta-dark ul{list-style:none;display:grid;gap:10px;margin:22px 0 26px}
.cta-dark li{display:flex;gap:10px;align-items:center;font-size:14.5px;font-weight:600}
.cta-dark li i{width:18px;height:18px;color:#ff8a92}
.site-footer.dark{background:var(--dark);color:#C9CDD3;border:0}
.site-footer.dark .f-grid>div>a,.site-footer.dark .f-grid>div>span,.site-footer.dark .f-brand p{color:#C9CDD3}
.site-footer.dark .f-grid h4{color:#8A909A}.site-footer.dark .f-bottom{border-color:rgba(255,255,255,.12);color:#8A909A}
@media(max-width:1000px){.hero-stats{grid-template-columns:1fr 1fr;transform:none;margin:0 0 -40px}.hs{border-bottom:1px solid var(--line)}.hs:nth-child(2n){border-right:0}.trust-strip{padding-top:80px}
  .about-grid,.sect-grid,.cgrid,.pf-grid,.pbig{grid-template-columns:1fr}.why-row{grid-template-columns:1fr 1fr}.why:nth-child(2n){border-right:0}.why:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .zrow{grid-template-columns:1fr}.zrow.rev .zpic{order:0}.zpic{min-height:240px}.ztxt{padding:30px}.timeline{grid-template-columns:1fr 1fr}.timeline::before{display:none}.topbar span:nth-child(2){display:none}}
@media(max-width:760px){.topbar{display:none}.hero{padding-top:70px}.hero-stats{grid-template-columns:1fr}.hs{border-right:0}.why-row,.sec-list{grid-template-columns:1fr}.why{border-right:0;border-bottom:1px solid var(--line)}.sec-item{border-right:0!important}
  .pf{grid-template-columns:1fr}.pf .pic{height:180px}.prow{grid-template-columns:1fr}.prow>i{display:none}.timeline{grid-template-columns:1fr}.about-visual{grid-template-rows:200px 160px}}
'''

# ================================================================== VERSION 2 — TECHNICAL
def v2_body():
    cells = ""
    spans = ["c-4 big", "c-2", "c-2", "c-2", "c-2", "c-4 full"]
    arts = ["assets/img/render-ig.jpg", "assets/img/render-valve.jpg", "assets/img/render-weighing.jpg", "assets/img/render-cabinet.jpg", "assets/img/render-kitchen.jpg", "assets/img/orange-panel-wide.jpg"]
    for i, (num, title, desc, bullets, tags, img, icon, contain) in enumerate(SOLUTIONS):
        tg = "".join(f'<span class="mchip{" red" if j == 0 else ""}">{t}</span>' for j, t in enumerate(tags))
        bl = "".join(f'<li>{b}</li>' for b in bullets)
        photo = ' photo' if i == 5 else ''
        cells += f'''<div class="cell {spans[i]}"><span class="code">SOL / {num} — {title.split(" — ")[0].upper()}</span><div class="art{photo}"><img src="{arts[i]}" alt="" loading="lazy"></div><h3>{title.split(" — ")[0]}</h3><p>{desc}</p><ul>{bl}</ul><div class="mchips">{tg}</div></div>'''
    why = "".join(f'<div class="spec-row"><span class="k">0{i+1}</span><i data-lucide="{ic}"></i><div><b>{t}</b><p>{d}</p></div></div>' for i, (ic, t, d, _) in enumerate(WHY))
    sect = "".join(f'<div class="sec"><span class="mono">0{i+1}</span><h4>{n}</h4></div>' for i, (n, _, _) in enumerate(SECTORS))
    rows = "".join(f'''<div class="row"><div class="th{" logo" if lg else ""}"><img src="{img}" alt="" loading="lazy"></div><div class="y">{yr}{"<small>En cours</small>" if live else ""}</div><div class="n"><h4>{client}</h4><small>{sub}</small></div><p>{desc}</p><div class="t">{spec}</div></div>''' for yr, live, client, sub, desc, spec, img, lg in [(f[0], f[1], f[2], f[3], f[4], " · ".join(a + " " + b for a, b in f[5][:1]), f[6], False) for f in FEATURED] + OTHERS)
    tl = "".join(f'<div class="tl"><div><b>ÉTAPE 0{i+1}</b><h3>{t}</h3><p>{d}</p></div><img src="{im}" alt="" loading="lazy"></div>' for i, ((ic, t, d), im) in enumerate(zip(METHOD, [IMG["engineer"], IMG["plans"], "assets/img/technician.jpg", "assets/img/hmi-siemens.jpg"])))
    gal = "".join(f'<figure class="swiper-slide"><img src="{s}" alt="" loading="lazy"><figcaption>{c}</figcaption></figure>' for s, c in GALLERY)
    chips = "".join(f'<div class="swiper-slide chip"><img src="assets/clients/{n}.png" alt="{n}" loading="lazy"></div>' for n in STRIP)
    return f'''
{COMMON_TOP}
<header class="site-header" id="header"><div class="wrap nav">
  <a href="#" class="logo" aria-label="NBA Security"><img src="assets/logo.jpg" alt="NBA Security"></a>
  <nav class="nav-links" aria-label="Navigation principale">{NAV_LINKS}</nav>
  <div class="nav-actions"><a href="tel:+21621081282" class="btn btn-secondary nav-phone"><i data-lucide="phone"></i><span>+216 21 081 282</span></a>{TBTN}<a href="#contact" class="btn btn-primary nav-cta">Demander un devis</a>{BURGER}</div></div>{MOBILE}</header>

<section class="hero" id="main">
  <div class="scan" id="scan"></div>
  <div class="wrap hero-grid">
    <div>
      <span class="mono-tag" data-reveal><i></i>Intégrateur sécurité incendie · Tunis · Depuis 2020</span>
      <h1 data-reveal>Extinction automatique.<br><span class="ol">Zéro interruption.</span></h1>
      <p class="lead" data-reveal>Systèmes d'extinction par gaz certifiés VdS pour data centers, salles électriques, archives et sites industriels : conçus, installés et maintenus par NBA Security.</p>
      <div class="hero-actions" data-reveal><a href="#contact" class="btn btn-primary btn-lg">Demander un devis <i data-lucide="arrow-right"></i></a><a href="#realisations" class="btn btn-secondary btn-lg">Projets livrés</a></div>
    </div>
    <div class="spec-panel card" data-reveal>
      <div class="sp-head"><span class="mono">// FICHE TECHNIQUE</span><span class="dot"></span></div>
      <div class="sp-row"><span>Agents extincteurs</span><b>IG-55 · IG-100 · IG-01 · IG-541</b></div>
      <div class="sp-row"><span>Agents chimiques</span><b>Novec 1230 · FM-200</b></div>
      <div class="sp-row"><span>CO₂</span><b>67 L · 80 L avec pesage</b></div>
      <div class="sp-row"><span>Pression de stockage</span><b>200 bar · 300 bar</b></div>
      <div class="sp-row"><span>Détection</span><b>Adressable Hochiki · Gaz Oggioni</b></div>
      <div class="sp-row"><span>Supervision</span><b>Siemens SIMATIC HMI · ATEX</b></div>
      <div class="sp-row"><span>Certification</span><b><img src="assets/clients/vds.png" alt="VdS"> VdS Schadenverhütung</b></div>
      <div class="sp-foot"><span><b data-count="17">0</b>+ ans</span><span><b data-count="45">0</b>+ clients</span><span><b data-count="12">0</b> projets</span><span><b>5</b> pays</span></div>
    </div>
  </div>
  <div class="wrap"><div class="hero-band" data-reveal><img src="assets/img/cylinders-row.jpg" alt="Batterie de bouteilles IG-55 AIRfire" loading="lazy"><div class="hb-cap"><span class="mono">IG-55 · 200 BAR</span><b>Batterie AIRfire 38 × 80 L — Ministère de l'Intérieur</b></div></div></div>
</section>

<div class="trust-strip"><div class="wrap"><div class="swiper logo-swiper"><div class="swiper-wrapper">{chips}</div></div></div></div>

<section id="solutions">
  <div class="wrap">
    <span class="mono" data-reveal>// Solutions</span><h2 class="h2" data-reveal>Le bon agent extincteur, <span class="dim">au bon endroit.</span></h2>
    <p class="lead" data-reveal>Chaque risque appelle une technologie précise. Nous dimensionnons, fournissons et intégrons des systèmes certifiés VdS, de l'armoire électrique au data center.</p>
    <div class="bento" data-stagger>{cells}</div>
  </div>
</section>

<section id="apropos" class="alt">
  <div class="wrap two">
    <div><span class="mono" data-reveal>// Entreprise</span><h2 class="h2" data-reveal>Une expertise née sur le terrain.</h2><p data-reveal>{ABOUT_P1}</p><p data-reveal>{ABOUT_P2}</p>
      <div class="founder card" data-reveal><div class="av">NB</div><div><b>Nabil Ben Ameur</b><span>Fondateur & Directeur — NBA Security</span></div></div></div>
    <div><span class="mono" data-reveal>// Pourquoi NBA Security</span><div class="spec-list card" data-stagger>{why}</div></div>
  </div>
</section>

<section id="methode">
  <div class="wrap">
    <span class="mono" data-reveal>// Méthode</span><h2 class="h2" data-reveal>Quatre étapes, <span class="dim">un seul interlocuteur.</span></h2>
    <div class="timeline"><div class="tl-line"><i id="tlprog"></i></div><div class="tl-steps" data-stagger>{tl}</div></div>
  </div>
</section>

<section class="alt" style="padding-bottom:40px"><div class="wrap"><span class="mono" data-reveal>// Sur le terrain</span><h2 class="h2" data-reveal>Nos installations, <span class="dim">en images.</span></h2></div>
  <div class="swiper gal" data-reveal><div class="swiper-wrapper">{gal}</div></div></section>

<section id="secteurs" class="alt" style="padding-top:60px">
  <div class="wrap"><span class="mono" data-reveal>// Domaines d'activité</span><h2 class="h2" data-reveal>Huit secteurs, <span class="dim">une même exigence.</span></h2><div class="sectors" data-stagger>{sect}</div></div>
</section>

<section id="realisations">
  <div class="wrap"><span class="mono" data-reveal>// Réalisations</span><h2 class="h2" data-reveal>Journal des projets <span class="dim">2021 → 2026</span></h2>
    <p class="lead" data-reveal>Étude, fourniture, installation, mise en service et formation : chaque ligne est une installation livrée clé en main.</p>
    <div class="ledger" data-stagger>{rows}</div></div>
</section>

<section id="references" class="alt">
  <div class="wrap"><span class="mono" data-reveal>// Références</span><h2 class="h2" data-reveal>Ils nous confient <span class="dim">leurs infrastructures critiques.</span></h2>
    {CLIENT_WALL()}
    <div class="ref-two"><div><h3 class="mono sub">International</h3>{INTL_WALL()}</div><div><h3 class="mono sub">Partenaires technologiques</h3>{PART_WALL()}</div></div></div>
</section>

<section id="faq">
  <div class="wrap"><span class="mono" data-reveal>// FAQ</span><h2 class="h2" data-reveal>Questions <span class="dim">fréquentes.</span></h2><div class="faq-cols" data-stagger>{FAQ_ITEMS()}</div></div>
</section>

<section id="contact" class="alt">
  <div class="wrap two">
    <div><span class="mono" data-reveal>// Contact</span><h2 class="h2" data-reveal>Sécurisons <span class="dim">votre site.</span></h2><p class="lead" data-reveal>Visite technique, étude de dimensionnement et proposition chiffrée sous 48 heures.</p>
      <div class="cl" data-stagger>
        <a href="tel:+21621081282" class="ci card"><i data-lucide="phone"></i><div><small>Téléphone</small><span>+216 21 081 282 · +216 51 026 197</span></div></a>
        <a href="mailto:nabil.benameur@nbasecurity.com.tn" class="ci card"><i data-lucide="mail"></i><div><small>E-mail</small><span>nabil.benameur@nbasecurity.com.tn</span></div></a>
        <a href="https://www.google.com/maps/search/?api=1&query=Immeuble+Express+A3-8+Tunis+1003" target="_blank" rel="noopener" class="ci card"><i data-lucide="map-pin"></i><div><small>Adresse</small><span>Immeuble Express A3-8, 1003 Tunis, Tunisie</span></div></a>
        <div class="ci card"><i data-lucide="clock"></i><div><small>Horaires</small><span>Lundi – Vendredi · 8h00 – 18h00</span></div></div>
      </div></div>
    <div class="terminal" data-reveal><div class="bar"><i></i><i></i><i></i></div><div class="body" id="term"></div></div>
  </div>
</section>

<footer class="site-footer"><div class="wrap f-compact">
  <div><span class="logo"><img src="assets/logo.jpg" alt="NBA Security"></span><p>© 2026 NBA Security — Intégrateur de solutions de sécurité incendie et d'extinction automatique · Tunis</p></div>
  <nav class="f-links">{NAV_LINKS}<a href="#contact">Contact</a></nav>
</div></footer>{TOTOP}'''

V2_CSS = '''
:root{--font-body:'IBM Plex Sans',system-ui,sans-serif;--font-head:'Space Grotesk',sans-serif;--font-mono:'IBM Plex Mono',monospace;--max:1220px;--sec-pad:96px;--r:14px;--r-btn:8px;
  --red:#E30613;--red-2:#B8050F;--red-soft:rgba(227,6,19,.09);--ink:#0F1114;--ink-2:#3A3F47;--muted:#6B7280;--bg:#F5F6F9;--bg-2:#FFFFFF;--card:#FFFFFF;--line:rgba(15,17,20,.1);--dark:#0A0C10;
  --nav:rgba(245,246,249,.88);--shadow:0 20px 50px rgba(15,17,20,.1);--shadow-sm:none;--chip-bg:#fff}
:root[data-theme="dark"]{--red:#FF1E2D;--red-2:#E30613;--red-soft:rgba(255,30,45,.14);--ink:#F2F4F7;--ink-2:#A7AEBB;--muted:#6E7585;--bg:#0A0C10;--bg-2:#10131A;--card:#141821;--line:rgba(255,255,255,.1);--nav:rgba(10,12,16,.85);--shadow:0 20px 50px rgba(0,0,0,.6);--chip-bg:#1A1F2A}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;opacity:.25;mask-image:radial-gradient(ellipse at top,#000 10%,transparent 60%)}
.site-header,section,.trust-strip,.site-footer{position:relative;z-index:1}.site-header{z-index:100}
.mono{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.h2 .dim{color:var(--muted)}
.mono-tag{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--card)}
.mono-tag i{width:7px;height:7px;border-radius:50%;background:#22C55E;box-shadow:0 0 12px #22C55E;animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.4}}
.hero{padding:70px 0 70px;overflow:hidden}
.hero .scan{position:absolute;left:0;right:0;height:1px;top:0;background:linear-gradient(90deg,transparent,var(--red),transparent);opacity:.5}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.hero h1{font-size:clamp(40px,5.6vw,72px);margin:24px 0 20px;letter-spacing:-.035em}
.hero h1 .ol{-webkit-text-stroke:1.5px var(--ink);color:transparent}
.hero .lead{margin-bottom:30px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.spec-panel{padding:8px 0;font-family:var(--font-mono);font-size:13px}
.sp-head{display:flex;justify-content:space-between;align-items:center;padding:14px 22px;border-bottom:1px solid var(--line)}
.sp-head .dot{width:9px;height:9px;border-radius:50%;background:var(--red);box-shadow:0 0 10px var(--red)}
.sp-row{display:grid;grid-template-columns:150px 1fr;gap:14px;padding:12px 22px;border-bottom:1px solid var(--line);align-items:center}
.sp-row span{color:var(--muted);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase}
.sp-row b{font-weight:500;color:var(--ink);display:flex;align-items:center;gap:8px}
.sp-row img{height:22px;border-radius:3px}
.sp-foot{display:flex;gap:22px;padding:16px 22px 10px;flex-wrap:wrap;color:var(--muted)}
.sp-foot b{font-family:var(--font-head);font-size:22px;color:var(--ink);margin-right:3px}
.hero-band{margin-top:56px;height:300px;border-radius:var(--r);overflow:hidden;position:relative;border:1px solid var(--line)}
.hero-band img{width:100%;height:100%;object-fit:cover}
.hb-cap{position:absolute;left:20px;bottom:20px;background:var(--card);padding:12px 16px;border-radius:10px;border:1px solid var(--line)}
.hb-cap b{display:block;font-family:var(--font-head);font-size:14px;margin-top:2px}
.trust-strip{padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-2)}
.chip{background:var(--chip-bg)}
:root[data-theme="dark"] .chip{background:#fff}
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:40px}
.cell{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:60px 28px 28px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;min-height:300px}
.cell .code{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;color:var(--muted);position:absolute;top:22px;left:28px;z-index:2}
.cell h3{font-size:21px;margin-bottom:8px;position:relative;z-index:2}.cell p{font-size:14px;color:var(--ink-2);position:relative;z-index:2}
.cell ul{list-style:none;margin-top:12px;display:grid;gap:5px;position:relative;z-index:2}
.cell li{font-size:13px;color:var(--ink-2);padding-left:14px;position:relative}
.cell li::before{content:"›";position:absolute;left:0;color:var(--red)}
.cell .art{position:absolute;right:0;top:0;bottom:0;width:42%;display:grid;place-items:center;padding:30px;z-index:1}
.cell .art img{max-height:100%;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 20px 40px rgba(0,0,0,.25))}
.cell .art.photo{width:100%;padding:0}
.cell .art.photo img{width:100%;height:100%;object-fit:cover;filter:none;opacity:.45;max-width:none}
.cell .art.photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,var(--card) 70%)}
.mchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;position:relative;z-index:2}
.mchip{font-family:var(--font-mono);font-size:10.5px;padding:5px 9px;border:1px solid var(--line);border-radius:5px;background:var(--bg)}
.mchip.red{border-color:var(--red);color:var(--red)}
.c-4{grid-column:span 4}.c-2{grid-column:span 2}
.cell.big{min-height:380px}.cell.big h3{font-size:28px;max-width:55%}.cell.big p,.cell.big ul{max-width:52%}
.cell.c-2 .art{width:36%;align-items:start;padding:52px 20px 0}.cell.c-2 .art img{max-height:130px}
.cell.c-2 h3,.cell.c-2 p,.cell.c-2 ul{max-width:62%}
.cell.full h3,.cell.full p,.cell.full ul{max-width:560px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.two p{color:var(--ink-2);font-size:16px}.two p+p{margin-top:14px}
.founder{margin-top:24px;display:flex;gap:16px;align-items:center;padding:16px 18px}
.founder .av{width:48px;height:48px;border-radius:10px;background:var(--dark);color:#fff;display:grid;place-items:center;font-family:var(--font-mono);font-weight:600}
.founder b{display:block;font-size:15px}.founder span{font-size:13px;color:var(--muted)}
.spec-list{margin-top:16px}
.spec-row{display:grid;grid-template-columns:40px 28px 1fr;gap:14px;padding:20px 22px;border-bottom:1px solid var(--line);align-items:start}
.spec-row:last-child{border-bottom:0}
.spec-row .k{font-family:var(--font-mono);color:var(--red);font-size:12px;padding-top:4px}
.spec-row>i{width:22px;height:22px;color:var(--ink);margin-top:2px}
.spec-row b{display:block;font-family:var(--font-head);font-size:16px;margin-bottom:4px}.spec-row p{font-size:14px;margin:0}
.timeline{display:grid;grid-template-columns:70px 1fr;gap:30px;margin-top:40px}
.tl-line{position:relative}.tl-line::before{content:"";position:absolute;left:34px;top:0;bottom:0;width:2px;background:var(--line)}
.tl-line i{position:absolute;left:34px;top:0;width:2px;height:0;background:var(--red);box-shadow:0 0 16px var(--red)}
.tl-steps{display:grid;gap:18px}
.tl{display:grid;grid-template-columns:1fr 300px;gap:26px;align-items:center;padding:26px;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.tl b{font-family:var(--font-mono);color:var(--red);font-size:11.5px;letter-spacing:.14em}
.tl h3{font-size:22px;margin:8px 0 6px}.tl p{font-size:14.5px;color:var(--ink-2)}
.tl img{width:100%;height:160px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.gal{margin-top:30px;padding:0 24px}
.gal .swiper-slide{width:440px;height:300px;border-radius:var(--r);overflow:hidden;position:relative;border:1px solid var(--line)}
.gal .swiper-slide:nth-child(even){width:330px}
.gal img{width:100%;height:100%;object-fit:cover}
.gal figcaption{position:absolute;left:14px;bottom:14px;color:#fff;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;background:rgba(10,12,16,.75);padding:7px 10px;border-radius:7px}
.sectors{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:36px}
.sec{background:var(--card);padding:28px 24px;display:flex;flex-direction:column;gap:12px}
.sec .mono{color:var(--muted)}.sec h4{font-size:17px}
.ledger{margin-top:40px;border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:110px 80px 1fr 1.5fr 160px;gap:22px;padding:18px 0;border-bottom:1px solid var(--line);align-items:center}
.th{width:110px;height:76px;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#fff}
.th img{width:100%;height:100%;object-fit:cover}.th.logo img{object-fit:contain;padding:8px}
.row .y{font-family:var(--font-mono);color:var(--red);font-size:14px}
.row .y small{display:block;color:#16a34a;font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.row h4{font-size:16px}.row .n small{display:block;color:var(--muted);font-size:12.5px}
.row p{font-size:13.5px;color:var(--ink-2)}
.row .t{font-family:var(--font-mono);font-size:11.5px;text-align:right;font-weight:600}
.mono.sub{display:block;margin:44px 0 14px;color:var(--muted)}
.faq-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:36px;align-items:start}
.cl{display:grid;gap:10px;margin-top:26px}
.ci{display:flex;gap:14px;align-items:center;padding:14px 16px}
.ci>i{width:38px;height:38px;padding:9px;border-radius:8px;background:var(--red);color:#fff;flex:none}
.ci small{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
.ci span{font-weight:600;font-size:14.5px}
.terminal{background:#07090C;border:1px solid rgba(255,255,255,.14);border-radius:var(--r);overflow:hidden;font-family:var(--font-mono);font-size:13.5px;color:#A7AEBB}
.terminal .bar{display:flex;gap:7px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.08)}
.terminal .bar i{width:11px;height:11px;border-radius:50%;background:#2A2F3A}.terminal .bar i:first-child{background:var(--red)}
.terminal .body{padding:24px 26px;line-height:2.1;min-height:320px}
.terminal .k{color:#6E7585;display:inline-block;width:90px}.terminal .v{color:#fff}
.terminal .cur{display:inline-block;width:8px;height:16px;background:var(--red);vertical-align:middle;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.f-compact{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.f-compact p{font-size:13px;color:var(--muted);margin-top:10px}
.f-links{display:flex;gap:4px;flex-wrap:wrap}.f-links a{padding:8px 12px;font-size:13.5px;color:var(--ink-2);border-radius:8px}.f-links a:hover{color:var(--red)}
.site-footer{padding:40px 0}
@media(max-width:1000px){.hero-grid,.two,.timeline,.faq-cols{grid-template-columns:1fr}.tl-line{display:none}.tl{grid-template-columns:1fr}.bento{grid-template-columns:1fr 1fr}.c-4,.c-2{grid-column:span 2}.sectors{grid-template-columns:1fr 1fr}
  .row{grid-template-columns:110px 1fr;gap:12px}.row .y,.row p,.row .t{grid-column:2}.row .t{text-align:left}}
@media(max-width:760px){.bento,.sectors{grid-template-columns:1fr}.c-4,.c-2{grid-column:span 1}.cell .art{display:none}.cell.big h3,.cell.big p,.cell.big ul,.cell.c-2 h3,.cell.c-2 p,.cell.c-2 ul{max-width:none}.cell{min-height:auto}
  .sp-row{grid-template-columns:1fr}.hero-band{height:200px}.row{grid-template-columns:1fr}.row .y,.row p,.row .t{grid-column:1}.gal .swiper-slide,.gal .swiper-slide:nth-child(even){width:280px;height:200px}}
'''

V2_EXTRA_JS = '''
  const lines=[['$','nba-security --contact'],['société','NBA SECURITY'],['tel','+216 21 081 282'],['tel','+216 51 026 197'],['email','nabil.benameur@nbasecurity.com.tn'],['adresse','Immeuble Express A3-8, 1003 Tunis'],['pays','Tunisie'],['délai','réponse sous 48h']];
  const term=document.getElementById('term');
  const render=n=>{term.innerHTML=lines.slice(0,n).map(l=>`<div><span class="k">${l[0]}</span><span class="v">${l[1]}</span></div>`).join('')+'<div style="margin-top:14px"><span class="k">$</span> <span class="cur"></span></div>'};
  render(lines.length);
  if(window.Swiper) new Swiper('.gal',{slidesPerView:'auto',spaceBetween:14,loop:true,speed:9000,autoplay:{delay:0,disableOnInteraction:false},allowTouchMove:false});
  if(window.gsap&&window.ScrollTrigger&&!matchMedia('(prefers-reduced-motion: reduce)').matches){
    gsap.to('#tlprog',{height:'100%',ease:'none',scrollTrigger:{trigger:'.tl-steps',start:'top 60%',end:'bottom 60%',scrub:true}});
    gsap.to('#scan',{top:'100%',duration:7,repeat:-1,ease:'none'});
    ScrollTrigger.create({trigger:term,start:'top 85%',once:true,onEnter:()=>{let n=0;render(0);const iv=setInterval(()=>{n++;render(n);if(n>=lines.length)clearInterval(iv)},220)}});
  }'''

# ================================================================== VERSION 3 — PREMIUM EDITORIAL
def v3_body():
    sols = "".join(f'''<div class="sol{" on" if i == 0 else ""}" data-sol="{i}"><span class="idx">{num}</span><h3>{title}</h3><p>{desc}</p><div class="agents">{"".join(f'<span class="{"hot" if j == 0 else ""}">{t}</span>' for j, t in enumerate(tags))}</div></div>''' for i, (num, title, desc, bullets, tags, img, icon, contain) in enumerate(SOLUTIONS))
    imgs = "".join(f'<img src="{img}" alt="" class="{"on" if i == 0 else ""}" data-i="{i}" loading="lazy">' for i, (_, _, _, _, _, img, _, _) in enumerate(SOLUTIONS))
    why = "".join(f'<div class="wcard"><img src="{im}" alt="" loading="lazy"><div class="wtxt"><i data-lucide="{ic}"></i><h3>{t}</h3><p>{d}</p></div></div>' for ic, t, d, im in WHY)
    sect = "".join(f'<div class="swiper-slide"><div class="sec-card"><img src="{img}" alt="" loading="lazy"><small>0{i+1}</small><h4>{n}</h4></div></div>' for i, (n, img, _) in enumerate(SECTORS))
    cases = "".join(f'''<article class="case"><div class="pic" data-clip><img src="{img}" alt="" loading="lazy"><span class="yr{" live" if live else ""}">{yr}{" · En cours" if live else ""}</span></div><div data-reveal><span class="client">{client}</span><h3>{title}</h3><p>{desc}</p><div class="specs">{"".join(f'<div><b>{a}</b><span>{b}</span></div>' for a, b in m)}</div></div></article>''' for yr, live, client, title, desc, m, img in FEATURED)
    minis = "".join(f'''<article class="mini"><div class="pic{" logo" if lg else ""}"><img src="{img}" alt="" loading="lazy"><span class="yr{" live" if live else ""}">{yr}</span></div><div class="body"><h4>{client}</h4><small>{sub}</small><p>{desc}</p></div></article>''' for yr, live, client, sub, desc, spec, img, lg in OTHERS)
    steps = "".join(f'<div class="bigstep"><span class="num">0{i+1}</span><h3>{t}</h3><p>{d}</p></div>' for i, (ic, t, d) in enumerate(METHOD))
    band = "".join(f'<div class="swiper-slide">{t}</div>' for t in ["Gaz inertes", "Novec 1230", "FM-200", "CO₂ avec pesage", "Cuisines", "Armoires électriques", "Détection adressable", "Certifié VdS"])
    return f'''
{COMMON_TOP}
<header class="site-header" id="header"><div class="nav">
  <a href="#" class="logo" aria-label="NBA Security"><img src="assets/logo.jpg" alt="NBA Security"></a>
  <nav class="nav-links" aria-label="Navigation principale">{NAV_LINKS}</nav>
  <div class="nav-actions">{TBTN}<a href="#contact" class="btn btn-primary nav-cta">Contact</a>{BURGER}</div></div>{MOBILE}</header>

<section class="hero" id="main">
  <div class="wrap hero-center">
    <span class="eyebrow" data-reveal><i data-lucide="shield-check"></i>Intégrateur sécurité incendie · Tunis</span>
    <h1 data-reveal>La protection incendie des sites qui ne s'arrêtent <em>jamais.</em></h1>
    <p class="lead" data-reveal>Extinction automatique par gaz et détection incendie pour data centers, salles électriques, archives et sites industriels. Conçu, installé et maintenu par NBA Security.</p>
    <div class="hero-actions" data-reveal><a href="#contact" class="btn btn-primary btn-lg">Demander une étude gratuite <i data-lucide="arrow-right"></i></a><a href="#realisations" class="btn btn-secondary btn-lg">Voir nos réalisations</a></div>
  </div>
  <div class="wrap"><div class="hero-image" data-clip><img src="assets/img/cnrps-ig55.jpg" alt="Batterie IG-55 installée par NBA Security">
    <div class="pill p1"><b><span data-count="17">0</span>+</b><span>ans d'expertise</span></div>
    <div class="pill p2"><b><span data-count="45">0</span>+</b><span>clients de référence</span></div>
    <div class="pill p3"><img src="assets/clients/vds.png" alt="VdS"><span>Équipements certifiés VdS</span></div>
  </div></div>
</section>
<div class="band"><div class="swiper band-swiper"><div class="swiper-wrapper">{band}</div></div></div>

<section id="apropos">
  <div class="wrap about-grid">
    <div class="about-visual" data-reveal><div class="a1"><img src="assets/img/technician.jpg" alt="" loading="lazy"></div><div class="a2"><img src="{IMG["plans"]}" alt="" loading="lazy"></div></div>
    <div><span class="eyebrow" data-reveal><i data-lucide="building-2"></i>L'entreprise</span><h2 class="h2" data-reveal>Dix-sept ans de grands projets, réunis dans une entreprise fondée pour ne faire aucun compromis.</h2><p data-reveal>{ABOUT_P1}</p><p data-reveal>{ABOUT_P2}</p>
      <div class="founder" data-reveal><div class="av">NB</div><div><b>Nabil Ben Ameur</b><span>Fondateur & Directeur — NBA Security</span></div></div></div>
  </div>
  <div class="wrap"><div class="sec-head center" style="margin-top:100px"><span class="eyebrow" data-reveal><i data-lucide="sparkles"></i>Pourquoi NBA Security</span><h2 class="h2" data-reveal>Quatre engagements, une seule promesse.</h2></div><div class="why-cards" data-stagger>{why}</div></div>
</section>

<section id="solutions" class="dark-sec">
  <div class="wrap">
    <div class="head"><div><span class="eyebrow" data-reveal><i data-lucide="flame"></i>Solutions</span><h2 class="h2" data-reveal>Six réponses à un seul risque.</h2></div><p class="lead" data-reveal>Chaque volume, chaque équipement et chaque contrainte d'exploitation appelle un agent extincteur précis. Nous choisissons celui qui éteint vite, sans dommage et sans danger pour les personnes.</p></div>
    <div class="sol-layout"><div class="sol-sticky" id="solSticky">{imgs}<div class="cap" id="solCap">01 · Gaz inertes</div></div><div class="sol-list">{sols}</div></div>
  </div>
</section>

<section id="secteurs" style="padding-bottom:70px">
  <div class="wrap"><div class="head"><div><span class="eyebrow" data-reveal><i data-lucide="layers"></i>Secteurs</span><h2 class="h2" data-reveal>Partout où l'activité ne peut pas s'arrêter.</h2></div></div></div>
  <div class="wrap"><div class="swiper sec-swiper" data-reveal><div class="swiper-wrapper">{sect}</div></div></div>
</section>

<section id="realisations" class="alt">
  <div class="wrap">
    <div class="head"><div><span class="eyebrow" data-reveal><i data-lucide="briefcase"></i>Réalisations</span><h2 class="h2" data-reveal>Des projets qui comptent.</h2></div><p class="lead" data-reveal>De 2021 à aujourd'hui, chaque installation est livrée clé en main : étude, fourniture, installation, mise en service et formation.</p></div>
    <div class="cases">{cases}</div>
    <h3 class="sub-h" data-reveal>Autres projets</h3><div class="mini-grid" data-stagger>{minis}</div>
  </div>
</section>

<section id="methode">
  <div class="wrap"><div class="head"><div><span class="eyebrow" data-reveal><i data-lucide="route"></i>Méthode</span><h2 class="h2" data-reveal>Un seul interlocuteur, du premier relevé à la maintenance.</h2></div></div><div class="bigsteps" data-stagger>{steps}</div></div>
</section>

<section id="references" class="alt">
  <div class="wrap"><div class="head"><div><span class="eyebrow" data-reveal><i data-lucide="award"></i>Références</span><h2 class="h2" data-reveal>Ils nous font confiance.</h2></div><p class="lead" data-reveal>Banques, opérateurs télécoms, industriels, énergéticiens et administrations : en Tunisie et dans quatre autres pays d'Afrique.</p></div>
    {CLIENT_WALL()}<div class="ref-two"><div><h3 class="sub-h">International — Maroc · Algérie · Sénégal · Mauritanie</h3>{INTL_WALL()}</div><div><h3 class="sub-h">Partenaires technologiques</h3>{PART_WALL()}</div></div></div>
</section>

<section id="faq"><div class="wrap faq-narrow"><div class="sec-head center"><span class="eyebrow" data-reveal><i data-lucide="circle-help"></i>Questions fréquentes</span><h2 class="h2" data-reveal>Vos questions, nos réponses.</h2></div><div class="faq-list" data-stagger>{FAQ_ITEMS()}</div></div></section>

<section id="contact" style="padding-top:0"><div class="wrap"><div class="contact-card" data-reveal>
  <div><span class="eyebrow"><i data-lucide="mail"></i>Contact</span><h2>Parlons de votre site.</h2><p>Une visite technique et une étude préliminaire suffisent pour identifier la solution la plus adaptée à vos risques. Réponse sous 48 heures.</p>
    <a href="mailto:nabil.benameur@nbasecurity.com.tn?subject=Demande%20d'%C3%A9tude%20-%20NBA%20Security" class="btn btn-light btn-lg">Demander une étude <i data-lucide="arrow-up-right"></i></a></div>
  <div class="c-list"><div class="c-item"><small>Téléphone</small><a href="tel:+21621081282">+216 21 081 282</a><a href="tel:+21651026197">+216 51 026 197</a></div><div class="c-item"><small>E-mail</small><a href="mailto:nabil.benameur@nbasecurity.com.tn">nabil.benameur@nbasecurity.com.tn</a></div><div class="c-item"><small>Adresse</small><span>Immeuble Express A3-8, 1003 Tunis, Tunisie</span></div><div class="c-item"><small>Horaires</small><span>Lundi – Vendredi · 8h00 – 18h00</span></div></div>
</div></div></section>

<footer class="site-footer"><div class="wrap">
  <div class="f-grid"><div class="f-brand"><span class="logo"><img src="assets/logo.jpg" alt="NBA Security"></span><p>Intégrateur de solutions de sécurité incendie et d'extinction automatique. Équipements certifiés VdS.</p></div>
    <div><h4>Navigation</h4>{NAV_LINKS}</div><div><h4>Solutions</h4><a href="#solutions">Gaz inertes</a><a href="#solutions">Novec 1230 & FM-200</a><a href="#solutions">CO₂ avec pesage</a><a href="#solutions">Armoires électriques</a><a href="#solutions">Cuisines</a><a href="#solutions">Détection & supervision</a></div>
    <div><h4>Contact</h4><a href="tel:+21621081282">+216 21 081 282</a><a href="mailto:nabil.benameur@nbasecurity.com.tn">nabil.benameur@nbasecurity.com.tn</a><span>Immeuble Express A3-8, 1003 Tunis</span></div></div>
  <div class="f-bottom"><span>© 2026 NBA Security</span><span>Tunisie · Maroc · Algérie · Sénégal · Mauritanie</span></div>
</div></footer>{TOTOP}'''

V3_CSS = '''
:root{--font-body:'Inter',system-ui,sans-serif;--font-head:'Outfit',sans-serif;--max:1200px;--sec-pad:110px;--r:24px;--r-btn:14px;
  --red:#E30613;--red-2:#B8050F;--red-soft:rgba(227,6,19,.08);--ink:#141414;--ink-2:#4B4B4B;--muted:#8A8A86;--bg:#FAFAF8;--bg-2:#F1F1ED;--card:#FFFFFF;--line:#E4E3DD;--dark:#121212;
  --nav:rgba(250,250,248,.8);--glass:rgba(255,255,255,.85);--shadow:0 24px 60px rgba(20,20,20,.1);--shadow-sm:0 8px 24px rgba(20,20,20,.05)}
:root[data-theme="dark"]{--red-soft:rgba(227,6,19,.16);--ink:#F3F4F6;--ink-2:#C5C9D0;--muted:#8B919C;--bg:#0D0F12;--bg-2:#13161B;--card:#171B21;--line:rgba(255,255,255,.1);--nav:rgba(13,15,18,.8);--glass:rgba(23,27,33,.85);--shadow:0 24px 60px rgba(0,0,0,.5);--shadow-sm:0 8px 24px rgba(0,0,0,.3)}
html{scroll-padding-top:110px}
.site-header{position:fixed;top:14px;background:transparent;backdrop-filter:none;border:0;padding:0 16px}
.site-header.scrolled{box-shadow:none;border:0}
.nav{max-width:var(--max);margin:0 auto;height:68px;padding:0 10px 0 16px;border-radius:20px;background:var(--nav);backdrop-filter:blur(18px);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.mobile-menu{top:96px}
.hero{padding:160px 0 0}
.hero-center{text-align:center;max-width:860px}
.hero h1{font-size:clamp(42px,6.2vw,80px);margin:24px auto 22px;letter-spacing:-.035em;line-height:1.02}
.hero h1 em{font-style:normal;color:var(--red)}
.hero .lead{margin:0 auto 32px;max-width:620px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.hero-image{margin-top:64px;height:560px;border-radius:36px;overflow:hidden;position:relative;box-shadow:var(--shadow)}
.hero-image>img{width:100%;height:100%;object-fit:cover}
.pill{position:absolute;background:var(--glass);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:18px;padding:14px 18px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow)}
.pill b{font-family:var(--font-head);font-size:26px;line-height:1}.pill>span{font-size:13px;color:var(--ink-2);font-weight:500}
.pill img{height:34px;border-radius:5px}
.p1{left:30px;top:30px}.p2{left:30px;top:100px}.p3{right:30px;bottom:30px}
.band{background:var(--dark);color:#fff;padding:18px 0;margin-top:70px;overflow:hidden}
.band .swiper-slide{width:auto;font-family:var(--font-head);font-weight:600;font-size:18px;text-transform:uppercase;letter-spacing:.04em;display:flex;align-items:center;gap:30px;padding-right:30px;white-space:nowrap}
.band .swiper-slide::after{content:"";width:8px;height:8px;background:var(--red);border-radius:50%}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.about-grid p{color:var(--ink-2);font-size:16.5px}.about-grid p+p{margin-top:14px}
.about-visual{position:relative;height:540px}
.about-visual .a1{position:absolute;left:0;top:0;width:68%;height:80%;border-radius:32px;overflow:hidden;box-shadow:var(--shadow)}
.about-visual .a2{position:absolute;right:0;bottom:0;width:50%;height:50%;border-radius:26px;overflow:hidden;border:6px solid var(--bg);box-shadow:var(--shadow)}
.about-visual img{width:100%;height:100%;object-fit:cover}
.founder{margin-top:28px;display:flex;gap:16px;align-items:center;padding:18px 20px;border-radius:18px;background:var(--bg-2)}
.founder .av{width:54px;height:54px;border-radius:50%;background:var(--dark);color:#fff;display:grid;place-items:center;font-family:var(--font-head);font-weight:700}
.founder b{display:block;font-size:15px}.founder span{font-size:13px;color:var(--muted)}
.why-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.wcard{border-radius:var(--r);overflow:hidden;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.wcard>img{width:100%;height:170px;object-fit:cover}
.wtxt{padding:24px}
.wtxt i{width:26px;height:26px;color:var(--red);margin-bottom:14px}
.wtxt h3{font-size:18px;margin-bottom:8px}.wtxt p{font-size:14px;color:var(--ink-2)}
.head{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;margin-bottom:56px}
.head .lead{max-width:440px}
.dark-sec{background:var(--dark);color:#F3F4F6}
.dark-sec .lead{color:#B8B3AC}.dark-sec .eyebrow{background:rgba(255,255,255,.08);color:#ff8a92}
.sol-layout{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.sol-sticky{position:sticky;top:110px;height:calc(100vh - 160px);min-height:460px;max-height:640px;border-radius:28px;overflow:hidden;background:#1a1a1a}
.sol-sticky img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s,transform 1.2s;transform:scale(1.06)}
.sol-sticky img.on{opacity:1;transform:none}
.sol-sticky .cap{position:absolute;left:20px;bottom:20px;background:#fff;color:#141414;padding:10px 14px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;border-radius:8px}
.sol-list{border-top:1px solid rgba(255,255,255,.14)}
.sol{padding:36px 0 36px 28px;border-bottom:1px solid rgba(255,255,255,.14);position:relative;opacity:.45;transition:.3s}
.sol.on{opacity:1}
.sol::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--red);transform:scaleY(0);transition:.4s;transform-origin:top}
.sol.on::before{transform:none}
.sol .idx{font-family:var(--font-head);font-weight:700;font-size:13px;color:#ff8a92;letter-spacing:.1em}
.sol h3{font-size:clamp(22px,2.2vw,30px);margin:10px 0 8px}.sol p{font-size:15px;color:#B8B3AC;max-width:520px}
.agents{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.agents span{font-size:11.5px;font-weight:600;letter-spacing:.06em;padding:6px 10px;border:1px solid rgba(255,255,255,.25);border-radius:999px;text-transform:uppercase}
.agents span.hot{background:var(--red);border-color:var(--red)}
.sec-swiper .swiper-slide{width:300px}
.sec-card{height:280px;border-radius:26px;overflow:hidden;position:relative;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:22px;isolation:isolate}
.sec-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.sec-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.85));z-index:-1}
.sec-card small{font-size:11px;letter-spacing:.14em;font-weight:600;color:#ff8a92}.sec-card h4{font-size:20px;margin-top:4px}
.case{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;padding:34px 0;border-top:1px solid var(--line)}
.case:first-child{border-top:0;padding-top:0}
.case:nth-child(even) .pic{order:2}
.case .pic{height:420px;border-radius:32px;overflow:hidden;box-shadow:var(--shadow);position:relative}
.case .pic img{width:100%;height:100%;object-fit:cover}
.yr{position:absolute;top:18px;left:18px;background:var(--glass);backdrop-filter:blur(10px);color:var(--ink);font-family:var(--font-head);font-weight:700;font-size:13px;padding:8px 12px;border-radius:10px;border:1px solid var(--line)}
.yr.live{background:#22C55E;color:#052e16;border:0}
.client{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--red)}
.case h3{font-size:clamp(26px,2.6vw,36px);margin:12px 0 12px}.case p{font-size:16px;color:var(--ink-2)}
.specs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px}
.specs div{padding:14px 16px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.specs b{display:block;font-family:var(--font-head);font-size:20px}.specs span{font-size:12px;color:var(--muted)}
.mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.mini{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.mini .pic{height:170px;position:relative;background:#fff}.mini .pic img{width:100%;height:100%;object-fit:cover}
.mini .pic.logo img{object-fit:contain;padding:20px}
.mini .pic .yr{top:12px;left:12px;font-size:12px}
.mini .body{padding:20px 22px}.mini h4{font-size:17px}.mini small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}.mini p{font-size:13.5px;color:var(--ink-2);margin-top:8px}
.bigsteps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1.5px solid var(--ink)}
.bigstep{padding:34px 28px 10px 0;border-right:1px solid var(--line)}
.bigstep:last-child{border-right:0}.bigstep+.bigstep{padding-left:28px}
.bigstep .num{font-family:var(--font-head);font-size:52px;font-weight:700;color:var(--red);line-height:1;display:block;letter-spacing:-.03em}
.bigstep h3{font-size:20px;margin:18px 0 8px}.bigstep p{font-size:14.5px;color:var(--ink-2)}
.faq-narrow{max-width:820px}
.contact-card{border-radius:40px;overflow:hidden;position:relative;color:#fff;padding:70px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;background:linear-gradient(135deg,#E30613,#8E030C)}
.contact-card::before{content:"NBA";position:absolute;right:-30px;bottom:-90px;font-family:var(--font-head);font-weight:700;font-size:380px;letter-spacing:-.06em;color:rgba(0,0,0,.1);line-height:1;pointer-events:none}
.contact-card>div{position:relative}
.contact-card .eyebrow{background:rgba(255,255,255,.14);color:#fff}
.contact-card h2{font-size:clamp(34px,4.4vw,56px);margin:18px 0 16px;letter-spacing:-.035em}
.contact-card p{color:#FFD9DB;font-size:17px;max-width:460px;margin-bottom:28px}
.contact-card .btn-light{color:var(--red)}
.c-list{display:grid;border-top:1.5px solid rgba(255,255,255,.4)}
.c-item{padding:18px 0;border-bottom:1.5px solid rgba(255,255,255,.4)}
.c-item small{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:#FFD9DB;margin-bottom:4px}
.c-item a,.c-item span{display:block;font-family:var(--font-head);font-weight:600;font-size:19px}
.c-item a:hover{color:#141414}
@media(max-width:1000px){.about-grid,.sol-layout,.case,.case:nth-child(even),.contact-card,.head{grid-template-columns:1fr}.sol-sticky{display:none}.sol{opacity:1}.case:nth-child(even) .pic{order:0}.case .pic{height:320px}
  .why-cards,.mini-grid,.bigsteps{grid-template-columns:1fr 1fr}.bigstep:nth-child(2n){border-right:0}.hero-image{height:420px}.about-visual{height:440px}.contact-card{padding:40px}}
@media(max-width:760px){.hero{padding-top:120px}.hero-image{height:300px;border-radius:24px}.pill{padding:10px 12px}.pill b{font-size:20px}.p2{top:84px}.why-cards,.mini-grid,.bigsteps{grid-template-columns:1fr}.bigstep{border-right:0;padding-left:0!important}
  .contact-card{padding:30px;border-radius:28px}.contact-card::before{font-size:200px}.specs{grid-template-columns:1fr 1fr}.about-visual{height:360px}}
'''

V3_EXTRA_JS = '''
  if(window.Swiper){new Swiper('.band-swiper',{slidesPerView:'auto',loop:true,speed:5000,autoplay:{delay:0,disableOnInteraction:false},allowTouchMove:false});
    new Swiper('.sec-swiper',{slidesPerView:'auto',spaceBetween:16,loop:true,speed:9000,autoplay:{delay:0,disableOnInteraction:false},allowTouchMove:false});}
  if(window.gsap&&window.ScrollTrigger&&!matchMedia('(prefers-reduced-motion: reduce)').matches){
    gsap.utils.toArray('[data-clip]').forEach(el=>gsap.from(el,{clipPath:'inset(0 0 100% 0)',duration:1.4,ease:'power4.out',scrollTrigger:{trigger:el,start:'top 85%'}}));
    const imgs=gsap.utils.toArray('#solSticky img'),cap=document.getElementById('solCap'),caps=['01 · Gaz inertes','02 · Novec 1230 & FM-200','03 · CO₂ avec pesage','04 · Armoires électriques','05 · Cuisines','06 · Détection & supervision'];
    gsap.utils.toArray('.sol').forEach(s=>{const i=+s.dataset.sol;const on=()=>{document.querySelectorAll('.sol').forEach(x=>x.classList.toggle('on',x===s));imgs.forEach(im=>im.classList.toggle('on',+im.dataset.i===i));cap.textContent=caps[i]};ScrollTrigger.create({trigger:s,start:'top 55%',end:'bottom 55%',onEnter:on,onEnterBack:on});});
  }'''

# ================================================================== SHARED CSS + JS
BASE_CSS = '''
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{font-family:var(--font-body);background:var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .3s,color .3s}
body.menu-open{overflow:hidden}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.15;letter-spacing:-.02em;font-weight:700}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
section{padding:var(--sec-pad) 0;position:relative}
section.alt{background:var(--bg-2)}
.skip-link{position:absolute;left:16px;top:-60px;background:var(--red);color:#fff;padding:10px 16px;border-radius:10px;z-index:200;font-weight:600}
.skip-link:focus{top:16px}
.progress{position:fixed;top:0;left:0;height:3px;background:var(--red);width:0;z-index:120}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--red);background:var(--red-soft);padding:8px 14px;border-radius:999px}
.eyebrow i{width:14px;height:14px}
.h2{font-size:clamp(30px,4vw,46px);margin:18px 0 16px}
.lead{font-size:17.5px;color:var(--ink-2);max-width:640px}
.sec-head{max-width:720px;margin-bottom:48px}
.sec-head.center{text-align:center;margin-left:auto;margin-right:auto}
.sec-head.center .lead{margin:0 auto}
.sub-h{font-size:20px;margin:56px 0 20px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:var(--r-btn);font-weight:600;font-size:14.5px;transition:.25s;border:1.5px solid transparent;cursor:pointer;line-height:1.2;white-space:nowrap}
.btn i{width:18px;height:18px}
.btn-lg{padding:16px 26px;font-size:15.5px}
.btn-primary{background:var(--red);color:#fff}
.btn-primary:hover{background:var(--red-2);transform:translateY(-2px);box-shadow:0 12px 30px rgba(227,6,19,.3)}
.btn-secondary{background:var(--card);color:var(--ink);border-color:var(--line)}
.btn-secondary:hover{border-color:var(--ink)}
.btn-light{background:#fff;color:#141414}.btn-light:hover{background:#eee}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm)}
.tag{font-size:12px;font-weight:600;padding:6px 11px;border-radius:999px;background:var(--red-soft);color:var(--red)}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.swiper-wrapper{transition-timing-function:linear!important}
.site-header{position:sticky;top:0;z-index:100;background:var(--nav);backdrop-filter:blur(16px);border-bottom:1px solid transparent;transition:.3s}
.site-header.scrolled{border-bottom-color:var(--line);box-shadow:var(--shadow-sm)}
.nav{height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{background:#fff;border-radius:10px;padding:4px 8px;display:inline-block;border:1px solid var(--line)}
.logo img{height:40px;width:auto}
.nav-links{display:flex;gap:2px}
.nav-links a{padding:9px 13px;border-radius:10px;font-weight:600;font-size:14px;color:var(--ink-2);transition:.2s}
.nav-links a:hover{background:var(--bg-2);color:var(--ink)}
.nav-actions{display:flex;align-items:center;gap:8px}
.nav-phone{padding:10px 14px}.nav-cta{padding:11px 18px}
.tbtn,.burger{width:42px;height:42px;border-radius:var(--r-btn);border:1px solid var(--line);background:var(--card);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:.2s}
.tbtn:hover,.burger:hover{border-color:var(--red)}
.tbtn i,.burger i{width:18px;height:18px}
.burger{display:none}
:root[data-theme="dark"] .tbtn .sun{display:none}
:root:not([data-theme="dark"]) .tbtn .moon{display:none}
.mobile-menu{display:none;position:fixed;top:76px;left:0;right:0;bottom:0;background:var(--bg);padding:20px 24px;flex-direction:column;gap:4px;overflow:auto;z-index:99}
.mobile-menu.open{display:flex}
.mobile-menu>a{padding:14px 12px;border-bottom:1px solid var(--line);font-weight:600;font-size:17px}
.mm-actions{display:grid;gap:10px;margin-top:20px}.mm-actions .btn{justify-content:center}
.strip-label{text-align:center;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--muted);margin-bottom:20px}
.logo-swiper{mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logo-swiper .swiper-slide{width:auto}
.chip{background:#fff;border-radius:12px;padding:10px 18px;height:62px;display:grid;place-items:center;border:1px solid var(--line)}
.chip img{max-height:38px;max-width:120px;width:auto;object-fit:contain}
.wall{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.wall .chip{height:92px;padding:16px}.wall .chip img{max-height:50px;max-width:100%}
.ref-two{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.ref-two .sub-h{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:44px 0 14px;font-family:var(--font-body)}
.wall.small{grid-template-columns:repeat(4,1fr)}.wall.small .chip{height:78px}.wall.small .chip img{max-height:42px}
.faq-list{display:grid;gap:12px}
details{padding:6px 24px}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;font-family:var(--font-head);font-weight:600;font-size:17px}
summary::-webkit-details-marker{display:none}
summary i{width:20px;height:20px;color:var(--red);flex:none;transition:.3s}
details[open] summary i{transform:rotate(45deg)}
details p{padding:0 0 18px;color:var(--ink-2);font-size:15px}
.site-footer{padding:60px 0 30px;border-top:1px solid var(--line);background:var(--bg-2)}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px}
.f-grid h4{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.f-grid>div>a,.f-grid>div>span{display:block;font-size:14.5px;color:var(--ink-2);padding:5px 0}
.f-grid>div>a:hover{color:var(--red)}
.f-brand p{font-size:14px;color:var(--ink-2);margin:16px 0}.f-brand .logo img{height:36px}.f-vds{height:40px;border-radius:5px}
.f-bottom{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13px;color:var(--muted)}
.totop{position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:50%;background:var(--dark);color:#fff;display:grid;place-items:center;opacity:0;pointer-events:none;transition:.3s;z-index:90;box-shadow:var(--shadow)}
.totop.show{opacity:1;pointer-events:auto}.totop i{width:20px;height:20px}
@media(max-width:1100px){.nav-phone span{display:none}.nav-phone{width:42px;padding:0;justify-content:center}}
@media(max-width:1000px){.ref-two{grid-template-columns:1fr}.wall{grid-template-columns:repeat(4,1fr)}.f-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){section{padding:70px 0}.nav-links,.nav-cta,.nav-phone{display:none}.burger{display:grid}.wall,.wall.small{grid-template-columns:repeat(3,1fr)}.f-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
'''

def scripts(extra):
    return f'''
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
<script>
(function(){{
  if(window.lucide) lucide.createIcons();
  const root=document.documentElement;
  document.getElementById('tbtn').addEventListener('click',()=>{{const t=root.dataset.theme==='dark'?'light':'dark';root.dataset.theme=t;try{{localStorage.setItem('nba-theme',t)}}catch(e){{}}}});
  const burger=document.getElementById('burger'),mm=document.getElementById('mobileMenu'),header=document.getElementById('header');
  burger.addEventListener('click',()=>{{const o=mm.classList.toggle('open');burger.setAttribute('aria-expanded',o);document.body.classList.toggle('menu-open',o)}});
  mm.querySelectorAll('a').forEach(a=>a.addEventListener('click',()=>{{mm.classList.remove('open');burger.setAttribute('aria-expanded','false');document.body.classList.remove('menu-open')}}));
  const prog=document.getElementById('progress'),totop=document.getElementById('totop');
  const onScroll=()=>{{const h=document.documentElement;const p=h.scrollTop/(h.scrollHeight-h.clientHeight);prog.style.width=(p*100)+'%';header.classList.toggle('scrolled',h.scrollTop>20);totop.classList.toggle('show',h.scrollTop>600)}};
  onScroll();window.addEventListener('scroll',onScroll,{{passive:true}});
  totop.addEventListener('click',e=>{{e.preventDefault();window.scrollTo({{top:0,behavior:'smooth'}})}});
  if(window.Swiper&&document.querySelector('.logo-swiper')) new Swiper('.logo-swiper',{{slidesPerView:'auto',spaceBetween:14,loop:true,speed:6000,autoplay:{{delay:0,disableOnInteraction:false}},allowTouchMove:false}});
  if(window.gsap&&window.ScrollTrigger){{
    gsap.registerPlugin(ScrollTrigger);gsap.ticker.lagSmoothing(0);
    if(!matchMedia('(prefers-reduced-motion: reduce)').matches){{
      gsap.utils.toArray('[data-reveal]').forEach(el=>gsap.from(el,{{y:28,opacity:0,duration:.9,ease:'power3.out',scrollTrigger:{{trigger:el,start:'top 90%'}}}}));
      gsap.utils.toArray('[data-stagger]').forEach(g=>gsap.from(g.children,{{y:24,opacity:0,duration:.7,stagger:.06,ease:'power3.out',scrollTrigger:{{trigger:g,start:'top 88%'}}}}));
      gsap.utils.toArray('[data-count]').forEach(el=>{{const v=+el.dataset.count;const o={{n:0}};gsap.to(o,{{n:v,duration:1.8,ease:'power2.out',scrollTrigger:{{trigger:el,start:'top bottom'}},onUpdate:()=>el.textContent=Math.round(o.n)}})}});
      window.addEventListener('load',()=>ScrollTrigger.refresh());
    }}
  }}
{extra}
}})();
</script>'''

VERSIONS = {
    "version-1-corporate.html": dict(title="NBA Security — Sécurité incendie & extinction automatique", fonts="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Sora:wght@500;600;700&display=swap", css=V1_CSS, body=v1_body, js=""),
    "version-2-dark.html": dict(title="NBA Security — Extinction automatique & détection incendie", fonts="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@500&display=swap", css=V2_CSS, body=v2_body, js=V2_EXTRA_JS),
    "version-3-editorial.html": dict(title="NBA Security — Protection incendie & extinction automatique", fonts="https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700&family=Inter:wght@400;500;600&display=swap", css=V3_CSS, body=v3_body, js=V3_EXTRA_JS),
}

for fname, v in VERSIONS.items():
    html = f'''<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{v["title"]}</title>
<meta name="description" content="NBA Security, intégrateur tunisien de solutions de détection incendie et d'extinction automatique par gaz : gaz inertes, Novec 1230, FM-200, CO2, cuisines et armoires électriques. Équipements certifiés VdS.">
{THEME_INIT}
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="{v["fonts"]}" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
<style>{v["css"]}{BASE_CSS}</style>
</head>
<body>
{v["body"]()}
{scripts(v["js"])}
</body>
</html>'''
    io.open(os.path.join(OUT, fname), "w", encoding="utf-8").write(html)
    print("wrote", fname, len(html))