<?php
// Layout SPA principal pour Green Business Consulting
// Charge dynamiquement les pages via AJAX sans rechargement complet
require_once __DIR__ . '/admin/db.php';
require_once __DIR__ . '/php/i18n.php';
require_once __DIR__ . '/php/services-list.php';
$nav_services = green_services_list();
$current_lang = ogapiCurrentLang();
ob_start(static fn(string $html): string => ogapiApplyTranslations($html, $current_lang));

$topbar_contact_row = db()->prepare("SELECT content FROM pages WHERE slug = ? LIMIT 1");
$topbar_contact_row->execute(['contact']);
$topbar_contact_row = $topbar_contact_row->fetch();
$topbar_contact = $topbar_contact_row ? ogapi_content_json($topbar_contact_row, $current_lang) : [];
$topbar_email = $topbar_contact['email'] ?? '';
$topbar_phone = $topbar_contact['phones'][0] ?? '';

// Petits textes d'habillage du site geres via admin/crud.php?type=settings (cle => valeur),
// avec repli sur le texte d'origine si aucune valeur n'a encore ete definie en admin.
$ministry_name = ogapi_setting('topbar_ministry_name', "CONSEIL • MANAGEMENT • PERFORMANCE", $current_lang);
$social_facebook = ogapi_setting('social_facebook', 'https://www.facebook.com/profile.php?id=100063521455870', $current_lang);
$social_linkedin = ogapi_setting('social_linkedin', '', $current_lang);
$social_youtube = ogapi_setting('social_youtube', '', $current_lang);
$footer_brand_text = ogapi_setting('footer_brand_text', "Cabinet de conseil en stratégie RSE, développement durable et performance responsable, au Gabon, en Afrique et au-delà.", $current_lang);
$footer_copyright = ogapi_setting('footer_copyright', '© 2026 Green Business Consulting — Conseil • Management • Performance. Tous droits réservés.', $current_lang);
$chatbot_title = ogapi_setting('chatbot_title', 'Assistant Green Business Consulting', $current_lang);
$chatbot_greeting = ogapi_setting('chatbot_greeting', "Bonjour ! Je suis l'assistant de Green Business Consulting. Comment puis-je vous aider aujourd'hui ?", $current_lang);
$chatbot_placeholder = ogapi_setting('chatbot_placeholder', 'Posez votre question...', $current_lang);
$site_logo_header = ogapi_setting('site_logo_header', '');
$site_logo_footer = ogapi_setting('site_logo_footer', '');
// Image utilisee pour les apercus reseaux sociaux (og:image) et le logo dans les donnees
// structurees : le logo uploade dans admin/header-footer.php, en URL absolue (les robots qui
// recuperent ces balises ne resolvent pas les chemins relatifs). Vide si aucun logo n'est
// encore defini, plutot que de pointer vers une image qui n'existe pas.
$og_image = $site_logo_header !== '' ? 'https://greenbusinessconsulting.ga/' . ltrim($site_logo_header, '/') : '';
$whatsapp_number = ogapi_setting('whatsapp_number', '+241 66 01 67 40');
$whatsapp_digits = preg_replace('/[^0-9]/', '', $whatsapp_number);

// Sous-menu "Nos projets" : genere depuis la table `projects` (admin/crud.php?type=projects)
// pour rester toujours synchronise avec les vraies initiatives, sans liste codee en dur.
$nav_projects = db()->query("SELECT slug, title, title_en FROM projects WHERE is_active = 1 ORDER BY display_order ASC, id ASC")->fetchAll();
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Green Business Consulting | Conseil en stratégie RSE au Gabon</title>
<meta name="description" content="Green Business Consulting accompagne entreprises et institutions au Gabon, en Afrique et au-delà : stratégie RSE, audit énergétique, ACV, reporting ESG, éco-conception, innovation verte.">
<link rel="canonical" href="https://greenbusinessconsulting.ga/">
<link rel="icon" href="<?php echo h(ogapi_favicon_url()); ?>">

<!-- Open Graph / reseaux sociaux -->
<meta property="og:site_name" content="Green Business Consulting">
<meta property="og:type" content="website">
<meta property="og:locale" content="fr_FR">
<meta property="og:url" content="https://greenbusinessconsulting.ga/">
<meta property="og:title" content="Green Business Consulting | Conseil en stratégie RSE au Gabon">
<meta property="og:description" content="Stratégie RSE, audit énergétique, analyse du cycle de vie, reporting ESG, éco-conception, innovation verte : notre expertise au service de votre performance durable.">
<?php if ($og_image !== ''): ?><meta property="og:image" content="<?php echo h($og_image); ?>"><?php endif; ?>
<meta name="twitter:card" content="<?php echo $og_image !== '' ? 'summary_large_image' : 'summary'; ?>">
<meta name="twitter:title" content="Green Business Consulting | Conseil en stratégie RSE au Gabon">
<meta name="twitter:description" content="Stratégie RSE, audit énergétique, ACV, reporting ESG, éco-conception, innovation verte : notre expertise au service de votre performance durable.">
<?php if ($og_image !== ''): ?><meta name="twitter:image" content="<?php echo h($og_image); ?>"><?php endif; ?>

<!-- Donnees structurees (organisation) : nom, logo et coordonnees affiches par Google dans les
     resultats de recherche (bandeau titre + description ci-dessus). -->
<script type="application/ld+json">
<?php echo json_encode(array_filter([
  '@context' => 'https://schema.org',
  '@type' => 'Organization',
  'name' => 'Green Business Consulting',
  'url' => 'https://greenbusinessconsulting.ga/',
  'logo' => $og_image ?: null,
  'description' => 'Cabinet de conseil en stratégie RSE, développement durable et performance responsable, au Gabon, en Afrique et au-delà.',
  'address' => [
    '@type' => 'PostalAddress',
    'addressLocality' => 'Libreville',
    'addressCountry' => 'GA',
  ],
  'contactPoint' => array_filter([
    '@type' => 'ContactPoint',
    'telephone' => $topbar_phone ?: null,
    'email' => $topbar_email ?: null,
    'contactType' => 'customer service',
  ]),
  'sameAs' => array_values(array_filter([$social_facebook, $social_linkedin, $social_youtube])),
]), JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES | JSON_PRETTY_PRINT); ?>
</script>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=Source+Sans+3:wght@300;400;600;700&display=swap" rel="stylesheet">
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--green:#2e8b2e;--green-dark:#1a5c1a;--green-light:#e8f5e8;--yellow:#f5c500;--white:#ffffff;--gray-100:#f7f9f7;--gray-200:#eef2ee;--gray-600:#5a6b5a;--gray-800:#2a362a;--text:#1e2e1e;--radius:8px;--radius-lg:16px}
html{scroll-behavior:smooth}
body{font-family:'Source Sans 3',sans-serif;color:var(--text);background:#fff;line-height:1.6}
a{text-decoration:none;color:inherit}
button{font:inherit}
.topbar{background:var(--green-dark);padding:8px 0;font-size:13px;color:rgba(255,255,255,.85)}
.topbar-inner{max-width:1200px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.topbar-links a{color:rgba(255,255,255,.85);margin-right:18px;transition:color .2s}
.topbar-links a:hover{color:var(--yellow)}
.topbar-links{justify-self:center;text-align:center;min-width:0}
.topbar-title{color:#fff;font-weight:700;font-size:12.5px;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.topbar-contact{display:flex;align-items:center;gap:20px;justify-self:start;min-width:0}
.topbar-contact a{display:inline-flex;align-items:center;gap:6px;color:rgba(255,255,255,.85);font-size:12.5px;white-space:nowrap;transition:color .2s}
.topbar-contact a:hover{color:var(--yellow)}
.topbar-contact svg{width:13px;height:13px;flex:0 0 auto}
.topbar-socials{display:flex;align-items:center;gap:6px;justify-self:end;min-width:0}
.topbar-socials a{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:12px;margin-left:0;transition:background .2s}
.topbar-socials a:hover{background:var(--yellow);color:var(--green-dark)}
.topbar-search-mobile{display:none!important}
.topbar-search-mobile svg{width:13px!important;height:13px!important}
body > header{background:#fff!important;border-bottom:2px solid var(--green)!important;position:sticky!important;top:0!important;z-index:100!important;box-shadow:0 2px 12px rgba(46,139,46,.08)!important}
body > header .header-inner{max-width:1460px!important;margin:0 auto!important;padding:0 24px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:14px!important;min-height:88px!important;height:auto!important}
body > header .logo-area{display:flex!important;align-items:center!important;gap:12px!important;text-decoration:none!important;flex:0 0 auto!important}
body > header .logo-text{line-height:1.2!important}
body > header .logo-text strong{display:block!important;font-family:'Playfair Display',serif!important;font-size:18px!important;color:var(--green-dark)!important;letter-spacing:.5px!important}
body > header .logo-text span{font-size:11px!important;color:var(--gray-600)!important;font-weight:400!important}
.brand-mark{display:inline-flex!important;align-items:center!important;gap:10px!important}
.brand-mark-img{display:block!important;max-height:100px!important;width:auto!important}
@media(max-width:900px){.brand-mark-img{max-height:64px!important}}
.brand-mark-icon{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:44px!important;height:44px!important;flex:0 0 auto!important;border-radius:50%!important;background:linear-gradient(135deg,var(--green) 0%,var(--green-dark) 100%)!important;font-size:22px!important;line-height:1!important;box-shadow:0 4px 12px rgba(46,139,46,.28)!important}
.brand-mark-text{display:flex!important;flex-direction:column!important;line-height:1.15!important}
.brand-mark-text strong{font-family:'Playfair Display',serif!important;font-size:17px!important;font-weight:900!important;color:var(--green-dark)!important;letter-spacing:.2px!important;white-space:nowrap!important}
.brand-mark-text em{font-style:normal!important;font-size:11px!important;font-weight:700!important;color:var(--yellow-dark,#c9a200)!important;letter-spacing:.14em!important;text-transform:uppercase!important}
.footer .brand-mark-text strong{color:#fff!important}
.footer .brand-mark-text em{color:var(--yellow)!important}
@media(max-width:900px){.brand-mark-icon{width:36px!important;height:36px!important;font-size:18px!important}.brand-mark-text strong{font-size:15px!important}.brand-mark-text em{font-size:9px!important}}
body > header .menu-links{display:flex!important;align-items:center!important;justify-content:center!important;gap:4px!important;list-style:none!important;flex:1 1 auto!important;flex-wrap:nowrap!important;min-width:0!important}
body > header .menu-links li{position:relative!important;flex:0 0 auto!important}
body > header .menu-links li a{display:inline-flex!important;align-items:center!important;gap:5px!important;padding:9px 8px!important;border-radius:999px!important;color:var(--gray-800)!important;font-size:13.5px!important;font-weight:600!important;line-height:1.2!important;white-space:nowrap!important;transition:all .2s!important;background:transparent!important}
body > header .menu-links li a svg{width:10px!important;height:6px!important;transition:transform .2s!important}
body > header .menu-links li:hover > a svg{transform:rotate(180deg)!important}
body > header .menu-links li.active > a,
body > header .menu-links li a:hover{background:var(--green-light)!important;color:var(--green)!important}
body > header .menu-links li ul{display:none!important;position:absolute!important;top:100%!important;left:0!important;background:#fff!important;border:1px solid #e0eee0!important;border-radius:var(--radius)!important;box-shadow:0 12px 36px rgba(0,0,0,.12)!important;min-width:220px!important;padding:8px 0!important;z-index:200!important}
body > header .menu-links li:hover ul{display:block!important}
body > header .menu-links li ul li{display:block!important}
body > header .menu-links li ul li a{display:block!important;padding:9px 16px!important;border-radius:0!important}
body > header .menu-links li ul li a:hover{background:var(--green-light)!important;color:var(--green)!important}
body > header .header-cta{display:flex!important;align-items:center!important;gap:16px!important;flex:0 0 auto!important}
body > header .btn{display:inline-flex!important;align-items:center!important;gap:8px!important;padding:10px 18px!important;border-radius:8px!important;font-size:13px!important;font-weight:600!important;line-height:1.2!important;text-decoration:none!important;transition:all .2s!important;cursor:pointer!important;border:2px solid transparent!important}
body > header .btn-primary{background:var(--green)!important;color:#fff!important;border-color:var(--green)!important}
body > header .btn-primary:hover{background:var(--green-dark)!important}
body > header .btn-outline{border-color:var(--green)!important;color:var(--green)!important;background:transparent!important}
body > header .btn-outline:hover{background:var(--green)!important;color:#fff!important}
body > header .btn-search-icon{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:42px!important;height:42px!important;flex:0 0 auto!important;border-radius:50%!important;border:2px solid var(--green)!important;color:var(--green)!important;background:#fff!important;transition:all .2s!important}
body > header .btn-search-icon:hover{background:var(--green)!important;color:#fff!important;transform:scale(1.06)!important}
body > header .btn-search-icon svg{width:18px!important;height:18px!important}
body > header .header-badge{display:inline-flex!important;align-items:center!important;flex:0 0 auto!important;border-radius:0!important;overflow:visible!important;transition:transform .2s!important;box-shadow:none!important}
body > header .header-badge:hover{transform:translateY(-2px)!important}
body > header .header-badge img{display:block!important;width:auto!important;height:auto!important;max-height:72px!important;object-fit:contain!important;border-radius:0!important}
.lang-switch{display:inline-flex!important;align-items:center!important;gap:4px!important;border:1px solid #d0e4d0!important;border-radius:999px!important;background:#fff!important;padding:3px!important}
.lang-switch a{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:34px!important;height:30px!important;border-radius:999px!important;font-size:12px!important;font-weight:800!important;color:var(--green-dark)!important;text-decoration:none!important;line-height:1!important;opacity:.55!important;transition:opacity .2s,background .2s!important}
.lang-switch a.active{background:var(--yellow)!important;color:var(--green-dark)!important;opacity:1!important}
.lang-switch a:not(.active):hover{background:var(--green-light)!important;color:var(--green)!important;opacity:.85!important}
.lang-switch a img{width:20px!important;height:14px!important;object-fit:cover!important;border-radius:2px!important;display:block!important;box-shadow:0 0 0 1px rgba(0,0,0,.15)!important}
.topbar .lang-switch{border-color:rgba(255,255,255,.22)!important;background:rgba(255,255,255,.1)!important;padding:2px!important;margin-right:8px!important}
.topbar .lang-switch a{width:auto!important;min-width:32px!important;height:24px!important;background:transparent!important;color:#fff!important;font-size:11px!important}
.topbar .lang-switch a.active{background:var(--yellow)!important;color:var(--green-dark)!important}
.topbar .lang-switch a:not(.active):hover{background:rgba(255,255,255,.16)!important;color:#fff!important}
.spa-loader{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,.7);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity .2s;z-index:500}
.spa-loader.active{opacity:1;pointer-events:auto}
.spa-loader-ring{width:54px;height:54px;border:6px solid var(--green-light);border-top-color:var(--green);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes ogapiFooterBlueprint{
  0%{background-position:0 0,24px 12px,0 18px,0 0,0 0,0 0;transform:translate3d(-1%,-1%,0)}
  50%{background-position:28px 18px,0 40px,42px 0,0 0,18px 12px,12px 18px;transform:translate3d(1%,1%,0)}
  100%{background-position:58px 34px,34px 0,84px 38px,0 0,34px 24px,24px 34px;transform:translate3d(2%,-1%,0)}
}
@keyframes ogapiFooterSeal{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg) scale(1)}
  50%{transform:translate3d(-28px,24px,0) rotate(10deg) scale(1.05)}
}
.main-content{min-height:calc(100vh - 220px);padding:0}
.footer{background:linear-gradient(135deg,#123f18 0%,var(--green-dark) 46%,#257b28 100%);color:rgba(255,255,255,.8);padding:48px 0 24px;position:relative;overflow:hidden;isolation:isolate}
.footer::before{content:"";position:absolute;inset:-30%;z-index:0;pointer-events:none;background:radial-gradient(circle at 14% 24%,rgba(245,197,0,.18) 0 3px,transparent 4px),radial-gradient(circle at 34% 72%,rgba(255,255,255,.13) 0 3px,transparent 4px),radial-gradient(circle at 74% 34%,rgba(245,197,0,.15) 0 3px,transparent 4px),linear-gradient(32deg,transparent 0 28%,rgba(255,255,255,.08) 28.1% 28.35%,transparent 28.5% 100%),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px);background-size:360px 220px,420px 260px,500px 300px,100% 100%,42px 42px,42px 42px;opacity:.86;animation:ogapiFooterBlueprint 22s ease-in-out infinite alternate}
.footer::after{content:"";position:absolute;right:-180px;top:-180px;width:420px;height:420px;border-radius:50%;z-index:0;pointer-events:none;background:radial-gradient(circle,rgba(245,197,0,.18) 0 34%,transparent 35%),repeating-conic-gradient(from 18deg,rgba(255,255,255,.1) 0deg 4deg,transparent 4deg 12deg);opacity:.75;animation:ogapiFooterSeal 24s ease-in-out infinite}
.footer-inner{max-width:1200px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:32px;position:relative;z-index:1}
.footer-brand p,.footer-col p{font-size:14px;line-height:1.75;color:rgba(255,255,255,.75)}
.footer-brand .logo-text strong,.footer-brand .logo-text span{color:#fff;opacity:.9}
.footer-col h4{font-family:'Playfair Display',serif;font-size:15px;color:#fff;margin-bottom:16px}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:10px}
.footer-col a{color:rgba(255,255,255,.75);font-size:14px}
  .footer .logo-img{width:auto!important;height:48px!important;max-height:48px!important;object-fit:contain!important;display:block!important}
.footer-col a:hover{color:var(--yellow)}
.footer-newsletter{margin-top:18px}
.footer-newsletter label{display:block;font-size:13px;font-weight:700;color:#fff;margin-bottom:8px}
.footer-newsletter-row{display:flex;gap:8px}
.footer-newsletter-row input{flex:1;min-width:0;padding:10px 12px;border-radius:6px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;font-size:13.5px;outline:none}
.footer-newsletter-row input::placeholder{color:rgba(255,255,255,.55)}
.footer-newsletter-row input:focus{border-color:var(--yellow)}
.footer-newsletter-row button{flex:0 0 auto;padding:10px 16px;border-radius:6px;border:none;background:var(--yellow);color:var(--green-dark);font-weight:700;font-size:13.5px;cursor:pointer}
.footer-newsletter-row button:hover{background:#ffe033}
.footer-newsletter-result{margin-top:8px;font-size:12.5px;color:rgba(255,255,255,.85)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding:20px 24px 0;margin:24px auto 0;max-width:1200px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:rgba(255,255,255,.55);position:relative;z-index:1}

/* Animations d'entrée */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.reveal { animation: fadeInUp 0.6s ease-out forwards; }
.reveal-delayed { animation: fadeInUp 0.6s ease-out 0.2s forwards; opacity: 0; }

/* Styles des icônes IP */
.ip-icon-wrapper { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: var(--green-light); border-radius: 6px; color: var(--green); margin-right: 12px; flex-shrink: 0; transition: transform 0.3s ease; }
li:hover .ip-icon-wrapper { transform: scale(1.2) rotate(5deg); background: var(--yellow); color: var(--green-dark); }
.ip-icon-wrapper svg { width: 14px; height: 14px; }

@media(max-width:992px){
  .topbar-inner{display:flex!important;flex-direction:row!important;align-items:center!important;gap:10px!important;justify-content:space-between!important;flex-wrap:nowrap!important}
  .topbar-contact{display:none!important}
  .topbar-links{display:none!important}
  .topbar-links a{margin-right:0;white-space:nowrap}
  .topbar-socials{display:flex!important;justify-content:flex-end;gap:6px;margin:0!important;order:2}
  .topbar-socials a{margin:0!important;margin-right:0!important}
  .topbar{padding:6px 0}
  body > header .menu-toggle{display:block!important}
  body > header .menu-links{display:none!important;position:absolute;top:100%;left:0;width:100%;background:#fff;flex-direction:column;padding:8px 0;box-shadow:0 10px 15px rgba(0,0,0,0.1);z-index:1000;max-height:0;overflow:hidden;opacity:0}
  body > header .menu-links.mobile-active{display:flex!important;max-height:800px;opacity:1}
  body > header .menu-links li{width:100%;padding:0 20px}
  body > header .menu-links li a{display:block;padding:12px 0;width:100%;font-size:14px}
  body > header .menu-links li ul{position:static!important;box-shadow:none!important;border:none!important;padding-left:15px!important;padding-top:8px;display:none!important}
  body > header .menu-links li.submenu-open ul{display:block!important}
  body > header .menu-links li.submenu-open > a svg{transform:rotate(180deg)!important}
  body > header .header-inner{justify-content:space-between!important;align-items:center!important;gap:12px!important;min-height:60px!important;padding:0 20px!important}
  body > header .logo-area{flex:0 0 auto;gap:6px!important}
  body > header .logo-img{width:140px!important;max-height:50px!important}
  body > header .header-badge img{width:auto!important;max-height:50px!important}
  body > header .header-cta{gap:14px;padding:0;display:flex!important}
  body > header .btn{padding:8px 12px!important;font-size:12px!important}
  body > header .menu-toggle{order:2;font-size:24px;padding:4px}
  body > header .menu-links{order:3;}
  body > header .header-cta{order:4}
}
@media(max-width:900px){
  body > header .header-inner{height:auto!important;padding:8px 16px!important}
  body > header .logo-img{width:120px!important;max-height:44px!important}
  body > header .header-cta{display:none!important}
  .topbar-search-mobile{display:inline-flex!important}
  .footer-inner{grid-template-columns:1fr;}
  .topbar-socials{gap:3px}
  .topbar-socials a{width:22px!important;height:22px!important;font-size:9px!important}
}

/* Style du bouton toggle mobile */
.menu-toggle{display:none;background:none;border:none;color:var(--green);font-size:28px;cursor:pointer;order:2;padding:6px;transition:all .3s ease;line-height:1}
.menu-toggle:hover{color:var(--green-dark);transform:scale(1.1)}
body > header .menu-links{transition:max-height .3s ease,opacity .3s ease}
body > header .menu-links li{transition:transform .2s ease}
body > header .menu-links li:hover > a{background:var(--green-light)!important;color:var(--green)!important}

/* Chatbot Styles */
.chatbot-widget { position: fixed; bottom: 30px; right: 30px; z-index: 1000; font-family: 'Source Sans 3', sans-serif; }
.chatbot-button { width: 60px; height: 60px; background: var(--green); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.2); transition: transform 0.3s; }
.chatbot-button:hover { transform: scale(1.1); }
.chatbot-window { position: absolute; bottom: 80px; right: 0; width: 350px; height: 450px; background: white; border-radius: var(--radius-lg); box-shadow: 0 10px 25px rgba(0,0,0,0.15); display: none; flex-direction: column; overflow: hidden; border: 1px solid var(--gray-200); }
.chatbot-window.active { display: flex; }
.chatbot-header { background: var(--green); color: white; padding: 15px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.chatbot-messages { flex: 1; padding: 15px; overflow-y: auto; background: var(--gray-100); font-size: 14px; }
.msg { margin-bottom: 10px; padding: 10px; border-radius: 10px; max-width: 85%; }
.msg-bot { background: white; color: var(--text); align-self: flex-start; border-bottom-left-radius: 2px; }
.msg-bot a { color: var(--green); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.msg-bot a:hover { color: var(--green-dark); }
.msg-bot ul { margin: 8px 0 0; padding-left: 18px; }
.msg-bot li { margin-bottom: 8px; }
.msg-bot li:last-child { margin-bottom: 0; }
.msg-user { background: var(--green); color: white; align-self: flex-end; margin-left: auto; border-bottom-right-radius: 2px; }
.chatbot-input { padding: 15px; border-top: 1px solid var(--gray-200); display: flex; gap: 10px; }
.chatbot-input input { flex: 1; border: 1px solid var(--gray-200); padding: 8px; border-radius: 4px; outline: none; }

/* Retour en haut */
.scrolltop{position:fixed;bottom:30px;left:30px;width:44px;height:44px;background:var(--green);color:#fff;border:none;border-radius:50%;cursor:pointer;font-size:18px;box-shadow:0 4px 16px rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center;z-index:999;transition:all .2s;opacity:0;pointer-events:none}
.scrolltop.visible{opacity:1;pointer-events:all}
.scrolltop:hover{background:var(--green-dark);transform:translateY(-2px)}

/* Widget WhatsApp */
.whatsapp-widget{position:fixed;bottom:100px;right:30px;z-index:998;font-family:'Source Sans 3',sans-serif}
.whatsapp-button{width:54px;height:54px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.25);transition:transform .2s;border:none}
.whatsapp-button:hover{transform:scale(1.08)}
.whatsapp-panel{position:absolute;bottom:66px;right:0;width:320px;max-width:calc(100vw - 40px);background:#fff;border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.22);overflow:hidden;display:none}
.whatsapp-panel.active{display:block}
.whatsapp-panel-head{background:linear-gradient(135deg,#25D366,#1fa855);color:#fff;padding:20px;display:flex;gap:12px;align-items:flex-start}
.whatsapp-panel-head svg{width:30px;height:30px;flex:0 0 auto;margin-top:2px}
.whatsapp-panel-head strong{display:block;font-size:17px;margin-bottom:4px}
.whatsapp-panel-head p{margin:0;font-size:13px;color:rgba(255,255,255,.92);line-height:1.5}
.whatsapp-panel-body{padding:16px}
.whatsapp-panel-body > p{margin:0 0 12px;font-size:12.5px;color:var(--gray-600)}
.whatsapp-contact{display:flex;align-items:center;gap:12px;border:1px solid var(--gray-200);border-left:4px solid #25D366;border-radius:10px;padding:12px 14px;text-decoration:none;color:var(--text);transition:background .15s}
.whatsapp-contact:hover{background:var(--gray-100)}
.whatsapp-contact-icon{width:38px;height:38px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;color:#fff;flex:0 0 auto}
.whatsapp-contact-icon svg{width:20px;height:20px}
.whatsapp-contact-name{flex:1;font-weight:700;font-size:15px}
.whatsapp-contact-go{width:18px;height:18px;color:#25D366;flex:0 0 auto}
.chatbot-input button { background: var(--green); color: white; border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer; }
@media(max-width:480px){
  /* Sur mobile, le clavier virtuel reduit la hauteur visible de l'ecran : une fenetre de chat
     "flottante" en position absolue (ancree en bas-a-droite d'un parent fixed) se retrouve
     alors partiellement hors ecran, avec l'en-tete et les messages pousses hors du cadre visible.
     On passe donc a un panneau plein-largeur ancre directement au viewport, dont la hauteur en
     dvh (dynamic viewport height) suit correctement le retrecissement du au clavier. */
  .chatbot-window{
    position:fixed;
    inset:auto 0 0 0;
    width:100%;
    height:min(80dvh,520px);
    max-height:80dvh;
    border-radius:16px 16px 0 0;
  }
}

.brevet-hero,.marques-hero,.nc-hero,.ig-hero,.mu-hero,.ci-hero,.dm-hero,.ov-hero,.docs-hero,.contact-hero,.actualites-hero,.article-hero,.missions-hero,.director-hero,.produit-hero,.labeled-hero,.gallery-hero,.video-hero,.presentation-hero,.search-hero,.faqp-hero,.taxh-hero,.taxp-hero,.ctry-hero,.orgcp-hero,.arp-hero,.asp-hero,.agd-hero,.pub-hero,.nlp-hero,.arch-hero,.pbrev-hero,.lith-hero,.resq-hero,.projp-hero,.svc-hero,.car-hero,.faq-hero,.frm-hero,.legal-hero,.news-hero,.team-hero{
  isolation:isolate!important;
  background:
    linear-gradient(124deg,rgba(26,92,26,.98) 0%,rgba(37,127,42,.96) 39%,rgba(47,151,48,.95) 60%,rgba(245,197,0,.98) 60.25%,rgba(255,213,32,.98) 100%)!important;
  background-size:170% 170%!important;
  animation:ogapiHeroGradient 13s ease-in-out infinite!important;
}
.brevet-hero::before,.marques-hero::before,.nc-hero::before,.ig-hero::before,.mu-hero::before,.ci-hero::before,.dm-hero::before,.ov-hero::before,.docs-hero::before,.contact-hero::before,.actualites-hero::before,.article-hero::before,.missions-hero::before,.director-hero::before,.produit-hero::before,.labeled-hero::before,.gallery-hero::before,.video-hero::before,.presentation-hero::before,.search-hero::before,.faqp-hero::before,.taxh-hero::before,.taxp-hero::before,.ctry-hero::before,.orgcp-hero::before,.arp-hero::before,.asp-hero::before,.agd-hero::before,.pub-hero::before,.nlp-hero::before,.arch-hero::before,.pbrev-hero::before,.lith-hero::before,.resq-hero::before,.projp-hero::before,.svc-hero::before,.car-hero::before,.faq-hero::before,.frm-hero::before,.legal-hero::before,.news-hero::before,.team-hero::before{
  content:""!important;
  position:absolute!important;
  inset:-18%!important;
  z-index:0!important;
  pointer-events:none!important;
  background:
    radial-gradient(circle at 12% 26%,rgba(255,224,82,.2) 0 3px,transparent 4px),
    radial-gradient(circle at 27% 62%,rgba(255,255,255,.18) 0 3px,transparent 4px),
    radial-gradient(circle at 47% 36%,rgba(245,197,0,.2) 0 3px,transparent 4px),
    radial-gradient(circle at 72% 28%,rgba(255,255,255,.18) 0 3px,transparent 4px),
    radial-gradient(circle at 84% 68%,rgba(26,92,26,.22) 0 4px,transparent 5px),
    linear-gradient(32deg,transparent 0 19%,rgba(255,255,255,.16) 19.1% 19.35%,transparent 19.5% 100%),
    linear-gradient(146deg,transparent 0 33%,rgba(255,255,255,.13) 33.1% 33.35%,transparent 33.5% 100%),
    linear-gradient(90deg,rgba(255,255,255,.075) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.075) 1px,transparent 1px)!important;
  background-size:
    420px 260px,
    360px 300px,
    520px 340px,
    460px 280px,
    390px 300px,
    100% 100%,
    100% 100%,
    46px 46px,
    46px 46px!important;
  opacity:.82!important;
  transform:translate3d(-2%,0,0) rotate(0.001deg);
  animation:ogapiHeroBlueprint 18s ease-in-out infinite alternate!important;
}
.brevet-hero::after,.marques-hero::after,.nc-hero::after,.ig-hero::after,.mu-hero::after,.ci-hero::after,.dm-hero::after,.ov-hero::after,.docs-hero::after,.contact-hero::after,.actualites-hero::after,.article-hero::after,.missions-hero::after,.director-hero::after,.labeled-hero::after,.produit-hero::after,.gallery-hero::after,.video-hero::after,.presentation-hero::after,.search-hero::after,.faqp-hero::after,.taxh-hero::after,.taxp-hero::after,.ctry-hero::after,.orgcp-hero::after,.arp-hero::after,.asp-hero::after,.agd-hero::after,.pub-hero::after,.nlp-hero::after,.arch-hero::after,.pbrev-hero::after,.lith-hero::after,.resq-hero::after,.projp-hero::after,.svc-hero::after,.car-hero::after,.faq-hero::after,.frm-hero::after,.legal-hero::after,.news-hero::after,.team-hero::after{
  content:""!important;
  position:absolute!important;
  right:-130px!important;
  bottom:-230px!important;
  width:500px!important;
  height:500px!important;
  z-index:0!important;
  pointer-events:none!important;
  border-radius:50%!important;
  background:
    radial-gradient(circle,transparent 0 27%,rgba(255,255,255,.18) 27.4% 28.1%,transparent 28.5% 39%,rgba(255,255,255,.13) 39.4% 40.2%,transparent 40.7%),
    repeating-conic-gradient(from 0deg,rgba(255,255,255,.18) 0deg 3deg,transparent 3deg 9deg),
    radial-gradient(circle,rgba(255,255,255,.16) 0 36%,rgba(255,238,122,.12) 37% 55%,transparent 56%)!important;
  filter:saturate(1.08)!important;
  opacity:.78!important;
  animation:ogapiHeroSeal 20s ease-in-out infinite!important;
}
.brevet-hero [class$="-container"],.marques-hero [class$="-container"],.nc-hero [class$="-container"],.ig-hero [class$="-container"],.mu-hero [class$="-container"],.ci-hero [class$="-container"],.dm-hero [class$="-container"],.ov-hero [class$="-container"],.docs-hero [class$="-container"],.contact-hero [class$="-container"],.actualites-hero [class$="-container"],.article-hero [class$="-container"],.missions-hero [class$="-container"],.director-hero [class$="-container"],.labeled-hero [class$="-container"],.produit-hero [class$="-container"],.gallery-hero [class$="-container"],.video-hero [class$="-container"],.presentation-hero [class$="-container"],.search-hero [class$="-container"],.faqp-hero [class$="-container"],.taxh-hero [class$="-container"],.taxp-hero [class$="-container"],.ctry-hero [class$="-container"],.orgcp-hero [class$="-container"],.arp-hero [class$="-container"],.asp-hero [class$="-container"],.agd-hero [class$="-container"],.pub-hero [class$="-container"],.nlp-hero [class$="-container"],.arch-hero [class$="-container"],.pbrev-hero [class$="-container"],.lith-hero [class$="-container"],.resq-hero [class$="-container"],.projp-hero [class$="-container"],.svc-hero [class$="-container"],.car-hero [class$="-container"],.faq-hero [class$="-container"],.frm-hero [class$="-container"],.legal-hero [class$="-container"],.news-hero [class$="-container"],.team-hero [class$="-container"]{
  position:relative!important;
  z-index:1!important;
}
@keyframes ogapiHeroGradient{
  0%,100%{background-position:0% 48%}
  50%{background-position:100% 54%}
}
@keyframes ogapiHeroBlueprint{
  0%{background-position:0 0,20px 10px,0 0,30px 12px,0 20px,0 0,0 0,0 0,0 0;transform:translate3d(-2%,-1%,0)}
  50%{background-position:36px 18px,0 42px,44px 20px,0 34px,28px 0,0 0,0 0,18px 10px,10px 18px;transform:translate3d(1%,1%,0)}
  100%{background-position:68px 32px,30px 0,82px 46px,52px 0,0 38px,0 0,0 0,32px 22px,22px 32px;transform:translate3d(3%,-1%,0)}
}
@keyframes ogapiHeroSeal{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg) scale(1)}
  50%{transform:translate3d(-34px,-18px,0) rotate(12deg) scale(1.04)}
}

#page-content :is([class$="-panel"],[class$="-section"],[class$="-card"],[class$="-type"],[class$="-step"],.doc-card,.value-card,.stat-card,.faq-item){
  border-color:rgba(46,139,46,.22)!important;
  box-shadow:0 14px 38px rgba(46,139,46,.08),inset 0 1px 0 rgba(245,197,0,.18)!important;
}
#page-content :is([class$="-section"],[class$="-panel"],.doc-card,.value-card,.faq-item){
  background:
    linear-gradient(135deg,rgba(255,255,255,.96),rgba(247,249,247,.96)),
    radial-gradient(circle at 96% 0%,rgba(245,197,0,.16),transparent 34%)!important;
}
#page-content :is([class$="-card"],[class$="-type"],.doc-card,.value-card,.faq-item){
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease!important;
}
#page-content :is([class$="-card"],[class$="-type"],.doc-card,.value-card,.faq-item):hover{
  border-color:rgba(245,197,0,.62)!important;
  box-shadow:0 18px 44px rgba(46,139,46,.12),0 0 0 1px rgba(245,197,0,.18)!important;
}
#page-content :is([class$="-panel"],[class$="-section"],[class$="-card"],[class$="-type"],.doc-card,.value-card,.faq-item) :is(h2,h3){
  color:var(--green-dark)!important;
  background-image:linear-gradient(90deg,rgba(245,197,0,.54),rgba(245,197,0,0))!important;
  background-repeat:no-repeat!important;
  background-size:100% 7px!important;
  background-position:0 calc(100% - 2px)!important;
  box-decoration-break:clone!important;
  -webkit-box-decoration-break:clone!important;
}
#page-content :is([class*="-list"] li)::before{
  background:var(--yellow)!important;
  color:var(--yellow)!important;
  box-shadow:0 0 0 4px rgba(46,139,46,.13),0 0 0 7px rgba(245,197,0,.14)!important;
}
#page-content :is([class$="-step"])::before{
  background:linear-gradient(135deg,var(--green),var(--yellow))!important;
  color:#fff!important;
  box-shadow:0 8px 20px rgba(46,139,46,.16)!important;
}
#page-content :is([class$="-badges"],[class$="-filters"],[class$="-oapi"]) span,
#page-content :is(.doc-cat,.product-chip,.hero-pill,.hero-badge){
  border-color:rgba(245,197,0,.34)!important;
  background:linear-gradient(135deg,rgba(232,245,232,.9),rgba(245,197,0,.15))!important;
  color:var(--green-dark)!important;
}
#page-content :is([class$="-cta"] a,[class$="-note"] a,.doc-actions .primary,.search-button,.article-btn.primary){
  background:linear-gradient(135deg,var(--green) 0%,var(--green-dark) 58%,var(--yellow) 58.5%,var(--yellow) 100%)!important;
  color:#fff!important;
  border:0!important;
  box-shadow:0 12px 28px rgba(46,139,46,.16)!important;
}
#page-content :is([class$="-cta"] a,[class$="-note"] a,.doc-actions .primary,.search-button,.article-btn.primary):hover{
  filter:saturate(1.06) brightness(1.03)!important;
  transform:translateY(-2px)!important;
}
#page-content :is(.doc-actions .outline,.article-btn.outline){
  border-color:var(--yellow)!important;
  color:var(--green-dark)!important;
  background:rgba(245,197,0,.08)!important;
}
#page-content .contact-section .contact-card{
  background:rgba(255,255,255,.1)!important;
  border-color:rgba(255,255,255,.22)!important;
  box-shadow:none!important;
}
#page-content .contact-section{
  background:linear-gradient(135deg,#1a5c1a 0%,var(--green) 100%)!important;
  color:#fff!important;
  box-shadow:none!important;
}
#page-content .contact-section :is(.section-tag){
  background:rgba(255,255,255,.15)!important;
  border-color:rgba(245,197,0,.38)!important;
  color:var(--yellow)!important;
}
#page-content .contact-section :is(.section-title,.section-title .accent){
  color:#fff!important;
  background-image:none!important;
}
#page-content .contact-section .section-lead,
#page-content .contact-section .contact-cta-area p{
  color:rgba(255,255,255,.88)!important;
}
#page-content .contact-section .contact-card:hover{
  background:rgba(255,255,255,.18)!important;
  border-color:rgba(245,197,0,.46)!important;
}
#page-content .contact-section .contact-card :is(h2,h3,h4){
  color:#fff!important;
  background-image:none!important;
}
#page-content .contact-section .contact-card :is(p,a){
  color:rgba(255,255,255,.86)!important;
}
#page-content .contact-section .contact-icon{
  background:var(--yellow)!important;
  color:var(--green-dark)!important;
}
#page-content .diag-section{
  background:linear-gradient(135deg,#1a5c1a 0%,var(--green) 100%)!important;
  color:#fff!important;
  box-shadow:none!important;
}
#page-content .diag-section :is(.section-tag){
  background:rgba(255,255,255,.15)!important;
  border-color:rgba(245,197,0,.38)!important;
  color:var(--yellow)!important;
}
#page-content .diag-section :is(.section-title,.section-title .accent){
  color:#fff!important;
  background-image:none!important;
}
#page-content .projet-card.spa-anchor-target{
  border-color:var(--yellow)!important;
  box-shadow:0 0 0 3px rgba(245,197,0,.35),0 12px 40px rgba(0,0,0,.1)!important;
}
@media(max-width:700px){
  .brevet-hero,.marques-hero,.nc-hero,.ig-hero,.mu-hero,.ci-hero,.dm-hero,.ov-hero,.docs-hero,.contact-hero,.actualites-hero,.article-hero,.missions-hero,.director-hero,.labeled-hero,.gallery-hero,.video-hero,.presentation-hero,.search-hero,.faqp-hero,.taxh-hero,.taxp-hero,.ctry-hero,.orgcp-hero,.arp-hero,.asp-hero,.agd-hero,.pub-hero,.nlp-hero,.arch-hero,.pbrev-hero,.lith-hero,.resq-hero,.projp-hero,.svc-hero,.car-hero,.faq-hero,.frm-hero,.legal-hero,.news-hero,.team-hero{
    background:
      linear-gradient(145deg,rgba(26,92,26,.98) 0%,rgba(46,139,46,.96) 66%,rgba(245,197,0,.98) 66.35%,rgba(255,215,42,.98) 100%)!important;
  }
  .brevet-hero::after,.marques-hero::after,.nc-hero::after,.ig-hero::after,.mu-hero::after,.ci-hero::after,.dm-hero::after,.ov-hero::after,.docs-hero::after,.contact-hero::after,.actualites-hero::after,.article-hero::after,.missions-hero::after,.director-hero::after,.labeled-hero::after,.gallery-hero::after,.video-hero::after,.presentation-hero::after,.search-hero::after,.faqp-hero::after,.taxh-hero::after,.taxp-hero::after,.ctry-hero::after,.orgcp-hero::after,.arp-hero::after,.asp-hero::after,.agd-hero::after,.pub-hero::after,.nlp-hero::after,.arch-hero::after,.pbrev-hero::after,.lith-hero::after,.resq-hero::after,.projp-hero::after,.svc-hero::after,.car-hero::after,.faq-hero::after,.frm-hero::after,.legal-hero::after,.news-hero::after,.team-hero::after{
    width:360px!important;
    height:360px!important;
    right:-190px!important;
    bottom:-175px!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .brevet-hero,.marques-hero,.nc-hero,.ig-hero,.mu-hero,.ci-hero,.dm-hero,.ov-hero,.docs-hero,.contact-hero,.actualites-hero,.article-hero,.missions-hero,.director-hero,.labeled-hero,.gallery-hero,.video-hero,.presentation-hero,.search-hero,.faqp-hero,.taxh-hero,.taxp-hero,.ctry-hero,.orgcp-hero,.arp-hero,.asp-hero,.agd-hero,.pub-hero,.nlp-hero,.arch-hero,.pbrev-hero,.lith-hero,.resq-hero,.projp-hero,.svc-hero,.car-hero,.faq-hero,.frm-hero,.legal-hero,.news-hero,.team-hero,
  .brevet-hero::before,.marques-hero::before,.nc-hero::before,.ig-hero::before,.mu-hero::before,.ci-hero::before,.dm-hero::before,.ov-hero::before,.docs-hero::before,.contact-hero::before,.actualites-hero::before,.article-hero::before,.missions-hero::before,.director-hero::before,.labeled-hero::before,.gallery-hero::before,.video-hero::before,.presentation-hero::before,.search-hero::before,.faqp-hero::before,.taxh-hero::before,.taxp-hero::before,.ctry-hero::before,.orgcp-hero::before,.arp-hero::before,.asp-hero::before,.agd-hero::before,.pub-hero::before,.nlp-hero::before,.arch-hero::before,.pbrev-hero::before,.lith-hero::before,.resq-hero::before,.projp-hero::before,.svc-hero::before,.car-hero::before,.faq-hero::before,.frm-hero::before,.legal-hero::before,.news-hero::before,.team-hero::before,
  .brevet-hero::after,.marques-hero::after,.nc-hero::after,.ig-hero::after,.mu-hero::after,.ci-hero::after,.dm-hero::after,.ov-hero::after,.docs-hero::after,.contact-hero::after,.actualites-hero::after,.article-hero::after,.missions-hero::after,.director-hero::after,.labeled-hero::after,.gallery-hero::after,.video-hero::after,.presentation-hero::after,.search-hero::after,.faqp-hero::after,.taxh-hero::after,.taxp-hero::after,.ctry-hero::after,.orgcp-hero::after,.arp-hero::after,.asp-hero::after,.agd-hero::after,.pub-hero::after,.nlp-hero::after,.arch-hero::after,.pbrev-hero::after,.lith-hero::after,.resq-hero::after,.projp-hero::after,.svc-hero::after,.car-hero::after,.faq-hero::after,.frm-hero::after,.legal-hero::after,.news-hero::after,.team-hero::after,
  .footer::before,.footer::after{
    animation:none!important;
  }
}
</style>
</head>
<body>
<div class="topbar">
  <div class="topbar-inner">
    <div class="topbar-contact">
      <?php if ($topbar_email !== ''): ?>
        <a href="mailto:<?php echo htmlspecialchars($topbar_email, ENT_QUOTES, 'UTF-8'); ?>">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16v16H4z"/><path d="M22 6l-10 7L2 6"/></svg>
          <?php echo htmlspecialchars($topbar_email, ENT_QUOTES, 'UTF-8'); ?>
        </a>
      <?php endif; ?>
      <?php if ($topbar_phone !== ''): ?>
        <a href="tel:<?php echo htmlspecialchars(preg_replace('/\s+/', '', $topbar_phone), ENT_QUOTES, 'UTF-8'); ?>">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.362 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.338 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg>
          <?php echo htmlspecialchars($topbar_phone, ENT_QUOTES, 'UTF-8'); ?>
        </a>
      <?php endif; ?>
    </div>
    <div class="topbar-links">
      <span class="topbar-title"><?php echo htmlspecialchars($ministry_name, ENT_COMPAT, 'UTF-8'); ?></span>
    </div>
    <div class="topbar-socials">
      <div class="lang-switch" aria-label="Choix de langue">
        <a href="<?php echo htmlspecialchars(ogapiLangUrl('fr'), ENT_QUOTES, 'UTF-8'); ?>" class="<?php echo $current_lang === 'fr' ? 'active' : ''; ?>" data-lang-switch="fr" title="Français" aria-label="Français">
          <img src="https://flagcdn.com/w40/fr.png" alt="FR">
        </a>
        <a href="<?php echo htmlspecialchars(ogapiLangUrl('en'), ENT_QUOTES, 'UTF-8'); ?>" class="<?php echo $current_lang === 'en' ? 'active' : ''; ?>" data-lang-switch="en" title="English" aria-label="English">
          <img src="https://flagcdn.com/w40/gb.png" alt="EN">
        </a>
      </div>
      <?php if ($social_facebook !== ''): ?><a href="<?php echo htmlspecialchars($social_facebook, ENT_QUOTES, 'UTF-8'); ?>" target="_blank" rel="noopener" title="Facebook">f</a><?php endif; ?>
      <?php if ($social_linkedin !== ''): ?><a href="<?php echo htmlspecialchars($social_linkedin, ENT_QUOTES, 'UTF-8'); ?>" target="_blank" rel="noopener" title="LinkedIn">in</a><?php endif; ?>
      <?php if ($social_youtube !== ''): ?><a href="<?php echo htmlspecialchars($social_youtube, ENT_QUOTES, 'UTF-8'); ?>" target="_blank" rel="noopener" title="YouTube">▶</a><?php endif; ?>
    </div>
  </div>
</div>
<header>
  <div class="header-inner">
    <a href="layout.php?page=index" class="logo-area">
      <?php if ($site_logo_header !== ''): ?>
        <img src="<?php echo h($site_logo_header); ?>" alt="Green Business Consulting" class="brand-mark-img">
      <?php else: ?>
      <span class="brand-mark">
        <span class="brand-mark-icon" aria-hidden="true">🌱</span>
        <span class="brand-mark-text"><strong>Green Business</strong><em>Consulting</em></span>
      </span>
      <?php endif; ?>
    </a>
    <button class="menu-toggle" onclick="toggleMobileMenu()" aria-label="Menu">☰</button>
    <ul class="menu-links">
      <li><a href="layout.php?page=index" class="nav-link"><?php echo $current_lang === 'en' ? 'Home' : 'Accueil'; ?></a></li>
      <li>
        <a href="layout.php?page=presentation" class="nav-link"><?php echo $current_lang === 'en' ? 'About us' : 'Qui sommes-nous'; ?>
          <svg viewBox="0 0 10 6" fill="currentColor"><path d="M0 0l5 6 5-6z"/></svg>
        </a>
        <ul>
          <li><a href="layout.php?page=presentation" data-spa-link="true"><?php echo $current_lang === 'en' ? 'Overview' : 'Présentation'; ?></a></li>
          <li><a href="layout.php?page=missions" data-spa-link="true"><?php echo $current_lang === 'en' ? 'Our mission' : 'Notre mission'; ?></a></li>
          <li><a href="layout.php?page=equipe" data-spa-link="true"><?php echo $current_lang === 'en' ? 'Our team' : 'Notre équipe'; ?></a></li>
          <li><a href="layout.php?page=faq" data-spa-link="true">FAQ</a></li>
          <li><a href="layout.php?page=carrieres" data-spa-link="true"><?php echo $current_lang === 'en' ? 'Careers' : 'Carrières'; ?></a></li>
        </ul>
      </li>
      <li>
        <a href="layout.php?page=index#services" class="nav-link"><?php echo $current_lang === 'en' ? 'Our services' : 'Nos services'; ?>
          <svg viewBox="0 0 10 6" fill="currentColor"><path d="M0 0l5 6 5-6z"/></svg>
        </a>
        <ul>
          <?php foreach ($nav_services as $svc): ?>
            <li><a href="layout.php?page=service-<?php echo h($svc['slug']); ?>" data-spa-link="true"><?php echo h($current_lang === 'en' ? $svc['title_en'] : $svc['title']); ?></a></li>
          <?php endforeach; ?>
        </ul>
      </li>
      <li><a href="layout.php?page=formations" class="nav-link" data-spa-link="true"><?php echo $current_lang === 'en' ? 'Trainings' : 'Formations'; ?></a></li>
      <li><a href="layout.php?page=actualites" class="nav-link" data-spa-link="true"><?php echo $current_lang === 'en' ? 'News' : 'Actualités'; ?></a></li>
      <li><a href="layout.php?page=contact" class="nav-link" data-spa-link="true"><?php echo $current_lang === 'en' ? 'Contact' : 'Contact'; ?></a></li>
    </ul>
    <div class="header-cta">
      <a href="layout.php?page=contact" class="btn btn-primary" data-spa-link="true"><?php echo $current_lang === 'en' ? 'Contact us' : 'Nous contacter'; ?></a>
    </div>
  </div>
</header>
<div id="spa-loader" class="spa-loader" aria-hidden="true"><div class="spa-loader-ring"></div></div>
<main id="page-content" class="main-content"></main>

<!-- Chatbot Interface -->
<div class="chatbot-widget">
    <div class="chatbot-window" id="chatbot-window">
        <div class="chatbot-header">
            <span><?php echo htmlspecialchars($chatbot_title, ENT_COMPAT, 'UTF-8'); ?></span>
            <button onclick="toggleChat()" style="background:none; border:none; color:white; cursor:pointer;">✕</button>
        </div>
        <div class="chatbot-messages" id="chatbot-messages">
            <div class="msg msg-bot"><?php echo htmlspecialchars($chatbot_greeting, ENT_COMPAT, 'UTF-8'); ?></div>
        </div>
        <div class="chatbot-input">
            <input type="text" id="chat-input" placeholder="<?php echo htmlspecialchars($chatbot_placeholder, ENT_COMPAT, 'UTF-8'); ?>">
            <button onclick="sendMessage()"><?php echo $current_lang === 'en' ? 'Send' : 'Envoyer'; ?></button>
        </div>
    </div>
    <div class="chatbot-button" onclick="toggleChat()">
        <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
    </div>
</div>

<?php if ($whatsapp_digits !== ''): ?>
<div class="whatsapp-widget">
    <div class="whatsapp-panel" id="whatsapp-panel">
        <div class="whatsapp-panel-head">
            <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12.04 2c-5.52 0-10 4.48-10 10 0 1.77.46 3.45 1.32 4.95L2 22l5.2-1.36c1.44.78 3.07 1.2 4.84 1.2 5.52 0 10-4.48 10-10s-4.48-10-10-10zm5.87 14.24c-.25.7-1.45 1.33-2 1.42-.51.08-1.15.11-1.86-.12-.43-.14-.98-.32-1.68-.63-2.96-1.28-4.89-4.26-5.04-4.46-.15-.2-1.2-1.6-1.2-3.05 0-1.45.76-2.16 1.03-2.46.27-.3.6-.37.8-.37.2 0 .4 0 .58.01.19.01.44-.07.68.53.25.6.85 2.08.92 2.23.07.15.12.33.02.53-.1.2-.15.32-.3.5-.15.18-.31.4-.44.53-.15.15-.3.31-.13.6.17.3.76 1.27 1.64 2.06 1.13 1.02 2.08 1.34 2.38 1.49.3.15.47.13.65-.08.18-.2.75-.87.95-1.17.2-.3.4-.25.68-.15.27.1 1.75.83 2.05.98.3.15.5.22.57.35.08.13.08.72-.17 1.42z"/></svg>
            <div>
                <strong><?php echo $current_lang === 'en' ? 'Start a conversation' : 'Entamer une conversation'; ?></strong>
                <p><?php echo $current_lang === 'en'
                    ? 'Click Green Business Consulting below to chat with us on WhatsApp'
                    : 'Cliquez sur Green Business Consulting ci-dessous pour discuter avec nous sur WhatsApp'; ?></p>
            </div>
        </div>
        <div class="whatsapp-panel-body">
            <p><?php echo $current_lang === 'en' ? 'Our team usually replies within a few minutes.' : 'L\'équipe répond généralement en quelques minutes.'; ?></p>
            <a class="whatsapp-contact" href="https://wa.me/<?php echo htmlspecialchars($whatsapp_digits, ENT_QUOTES, 'UTF-8'); ?>?text=<?php echo urlencode($current_lang === 'en' ? 'Hello, I have a question for Green Business Consulting.' : "Bonjour, j'ai une question pour Green Business Consulting."); ?>" target="_blank" rel="noopener">
                <span class="whatsapp-contact-icon">
                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12.04 2c-5.52 0-10 4.48-10 10 0 1.77.46 3.45 1.32 4.95L2 22l5.2-1.36c1.44.78 3.07 1.2 4.84 1.2 5.52 0 10-4.48 10-10s-4.48-10-10-10zm5.87 14.24c-.25.7-1.45 1.33-2 1.42-.51.08-1.15.11-1.86-.12-.43-.14-.98-.32-1.68-.63-2.96-1.28-4.89-4.26-5.04-4.46-.15-.2-1.2-1.6-1.2-3.05 0-1.45.76-2.16 1.03-2.46.27-.3.6-.37.8-.37.2 0 .4 0 .58.01.19.01.44-.07.68.53.25.6.85 2.08.92 2.23.07.15.12.33.02.53-.1.2-.15.32-.3.5-.15.18-.31.4-.44.53-.15.15-.3.31-.13.6.17.3.76 1.27 1.64 2.06 1.13 1.02 2.08 1.34 2.38 1.49.3.15.47.13.65-.08.18-.2.75-.87.95-1.17.2-.3.4-.25.68-.15.27.1 1.75.83 2.05.98.3.15.5.22.57.35.08.13.08.72-.17 1.42z"/></svg>
                </span>
                <span class="whatsapp-contact-name">Green Business Consulting</span>
                <svg class="whatsapp-contact-go" viewBox="0 0 24 24" fill="currentColor"><path d="M12.04 2c-5.52 0-10 4.48-10 10 0 1.77.46 3.45 1.32 4.95L2 22l5.2-1.36c1.44.78 3.07 1.2 4.84 1.2 5.52 0 10-4.48 10-10s-4.48-10-10-10zm5.87 14.24c-.25.7-1.45 1.33-2 1.42-.51.08-1.15.11-1.86-.12-.43-.14-.98-.32-1.68-.63-2.96-1.28-4.89-4.26-5.04-4.46-.15-.2-1.2-1.6-1.2-3.05 0-1.45.76-2.16 1.03-2.46.27-.3.6-.37.8-.37.2 0 .4 0 .58.01.19.01.44-.07.68.53.25.6.85 2.08.92 2.23.07.15.12.33.02.53-.1.2-.15.32-.3.5-.15.18-.31.4-.44.53-.15.15-.3.31-.13.6.17.3.76 1.27 1.64 2.06 1.13 1.02 2.08 1.34 2.38 1.49.3.15.47.13.65-.08.18-.2.75-.87.95-1.17.2-.3.4-.25.68-.15.27.1 1.75.83 2.05.98.3.15.5.22.57.35.08.13.08.72-.17 1.42z"/></svg>
            </a>
        </div>
    </div>
    <button class="whatsapp-button" id="whatsapp-toggle" title="WhatsApp" aria-label="WhatsApp">
        <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor"><path d="M12.04 2c-5.52 0-10 4.48-10 10 0 1.77.46 3.45 1.32 4.95L2 22l5.2-1.36c1.44.78 3.07 1.2 4.84 1.2 5.52 0 10-4.48 10-10s-4.48-10-10-10zm5.87 14.24c-.25.7-1.45 1.33-2 1.42-.51.08-1.15.11-1.86-.12-.43-.14-.98-.32-1.68-.63-2.96-1.28-4.89-4.26-5.04-4.46-.15-.2-1.2-1.6-1.2-3.05 0-1.45.76-2.16 1.03-2.46.27-.3.6-.37.8-.37.2 0 .4 0 .58.01.19.01.44-.07.68.53.25.6.85 2.08.92 2.23.07.15.12.33.02.53-.1.2-.15.32-.3.5-.15.18-.31.4-.44.53-.15.15-.3.31-.13.6.17.3.76 1.27 1.64 2.06 1.13 1.02 2.08 1.34 2.38 1.49.3.15.47.13.65-.08.18-.2.75-.87.95-1.17.2-.3.4-.25.68-.15.27.1 1.75.83 2.05.98.3.15.5.22.57.35.08.13.08.72-.17 1.42z"/></svg>
    </button>
</div>
<?php endif; ?>

<button class="scrolltop" id="scrolltop" onclick="window.scrollTo({top:0,behavior:'smooth'})" title="<?php echo $current_lang === 'en' ? 'Back to top' : 'Retour en haut'; ?>">↑</button>

<footer class="footer">
  <div class="footer-inner">
    <div class="footer-brand">
      <a href="layout.php?page=index" class="logo-area" style="margin-bottom:12px;display:inline-flex">
        <?php if ($site_logo_footer !== ''): ?>
          <img src="<?php echo h($site_logo_footer); ?>" alt="Green Business Consulting" class="brand-mark-img">
        <?php else: ?>
        <span class="brand-mark">
          <span class="brand-mark-icon" aria-hidden="true">🌱</span>
          <span class="brand-mark-text"><strong>Green Business</strong><em>Consulting</em></span>
        </span>
        <?php endif; ?>
      </a>
      <p><?php echo htmlspecialchars($footer_brand_text, ENT_COMPAT, 'UTF-8'); ?></p>
      <form class="footer-newsletter" id="footer-newsletter-form">
        <input type="hidden" name="lang" value="<?php echo h($current_lang); ?>">
        <label for="footer-newsletter-email"><?php echo $current_lang === 'en' ? 'Subscribe to our newsletter' : 'Abonnez-vous à notre newsletter'; ?></label>
        <div class="footer-newsletter-row">
          <input type="email" id="footer-newsletter-email" name="email" placeholder="<?php echo $current_lang === 'en' ? 'Your email address' : 'Votre adresse email'; ?>" required>
          <button type="submit"><?php echo $current_lang === 'en' ? 'Subscribe' : "S'inscrire"; ?></button>
        </div>
        <div class="footer-newsletter-result" id="footer-newsletter-result"></div>
      </form>
    </div>
    <div class="footer-col">
      <h4><?php echo $current_lang === 'en' ? 'About us' : 'Qui sommes-nous'; ?></h4>
      <ul>
        <li><a href="layout.php?page=presentation" data-spa-link="true"><?php echo $current_lang === 'en' ? 'Overview' : 'Présentation'; ?></a></li>
        <li><a href="layout.php?page=missions" data-spa-link="true"><?php echo $current_lang === 'en' ? 'Our mission' : 'Notre mission'; ?></a></li>
        <li><a href="layout.php?page=equipe" data-spa-link="true"><?php echo $current_lang === 'en' ? 'Our team' : 'Notre équipe'; ?></a></li>
        <li><a href="layout.php?page=carrieres" data-spa-link="true"><?php echo $current_lang === 'en' ? 'Careers' : 'Carrières'; ?></a></li>
      </ul>
    </div>
    <div class="footer-col">
      <h4><?php echo $current_lang === 'en' ? 'Our services' : 'Nos services'; ?></h4>
      <ul>
        <?php foreach ($nav_services as $svc): ?>
          <li><a href="layout.php?page=service-<?php echo h($svc['slug']); ?>" data-spa-link="true"><?php echo h($current_lang === 'en' ? $svc['title_en'] : $svc['title']); ?></a></li>
        <?php endforeach; ?>
      </ul>
    </div>
    <div class="footer-col">
      <h4><?php echo $current_lang === 'en' ? 'Useful links' : 'Liens utiles'; ?></h4>
      <ul>
        <li><a href="layout.php?page=index" data-spa-link="true"><?php echo $current_lang === 'en' ? 'Home' : 'Accueil'; ?></a></li>
        <li><a href="layout.php?page=formations" data-spa-link="true"><?php echo $current_lang === 'en' ? 'Trainings' : 'Formations'; ?></a></li>
        <li><a href="layout.php?page=actualites" data-spa-link="true"><?php echo $current_lang === 'en' ? 'News' : 'Actualités'; ?></a></li>
        <li><a href="layout.php?page=faq" data-spa-link="true">FAQ</a></li>
        <li><a href="layout.php?page=contact" data-spa-link="true">Contact</a></li>
      </ul>
    </div>
  </div>
  <div class="footer-bottom">
    <p><?php echo htmlspecialchars($footer_copyright, ENT_COMPAT, 'UTF-8'); ?> — <?php echo $current_lang === 'en' ? 'Developed by' : 'Développé par'; ?> Akewa Group</p>
    <div style="display:flex;gap:20px;flex-wrap:wrap;">
      <a href="layout.php?page=mentions-legales" data-spa-link="true"><?php echo $current_lang === 'en' ? 'Legal notice' : 'Mentions légales'; ?></a>
      <a href="layout.php?page=politique-confidentialite" data-spa-link="true"><?php echo $current_lang === 'en' ? 'Privacy policy' : 'Politique de confidentialité'; ?></a>
      <a href="admin/login.php">Administration</a>
    </div>
  </div>
</footer>
<script src="js/spa-router.js"></script>
<script>
(function() {
  var newsletterForm = document.getElementById('footer-newsletter-form');
  if (newsletterForm) {
    newsletterForm.addEventListener('submit', function(e) {
      e.preventDefault();
      var result = document.getElementById('footer-newsletter-result');
      var btn = newsletterForm.querySelector('button');
      btn.disabled = true;
      fetch('php/newsletter-subscribe.php', { method: 'POST', body: new FormData(newsletterForm) })
        .then(function(r) { return r.json(); })
        .then(function(data) {
          result.textContent = data.message || '';
          btn.disabled = false;
          if (data.ok) { newsletterForm.reset(); }
        })
        .catch(function() {
          result.textContent = newsletterForm.lang && newsletterForm.lang.value === 'en'
            ? 'Something went wrong. Please try again.'
            : 'Une erreur est survenue. Merci de réessayer.';
          btn.disabled = false;
        });
    });
  }
})();
</script>
<script>
(function() {
  // Gestion du menu mobile
  window.toggleMobileMenu = function() {
    document.querySelector('.menu-links').classList.toggle('mobile-active');
  }

  function isMobileNav() {
    var toggle = document.querySelector('.menu-toggle');
    return toggle && getComputedStyle(toggle).display !== 'none';
  }

  // Sous-menus mobiles : le survol CSS ne fonctionnant pas au toucher, un tap
  // sur un lien parent ouvre/ferme son sous-menu au lieu de naviguer.
  document.querySelectorAll('.menu-links > li').forEach(function(li) {
    var submenu = li.querySelector(':scope > ul');
    var parentLink = li.querySelector(':scope > a');
    if (!submenu || !parentLink) return;
    parentLink.addEventListener('click', function(e) {
      if (!isMobileNav()) return;
      e.preventDefault();
      e.stopImmediatePropagation();
      var wasOpen = li.classList.contains('submenu-open');
      document.querySelectorAll('.menu-links > li.submenu-open').forEach(function(openLi) {
        openLi.classList.remove('submenu-open');
      });
      if (!wasOpen) li.classList.add('submenu-open');
    });
  });

  // Referme le menu mobile des qu'un lien de destination reelle est selectionne.
  document.querySelectorAll('.menu-links a').forEach(function(link) {
    link.addEventListener('click', function() {
      document.querySelector('.menu-links').classList.remove('mobile-active');
    });
  });

  // Chatbot Logic
  window.toggleChat = function() {
    const win = document.getElementById('chatbot-window');
    win.classList.toggle('active');
  }

  window.sendMessage = async function() {
    const input = document.getElementById('chat-input');
    const container = document.getElementById('chatbot-messages');
    if (!input.value.trim()) return;

    // Ajout message utilisateur (textContent pour eviter toute injection HTML)
    const userMsg = input.value;
    const userMsgEl = document.createElement('div');
    userMsgEl.className = 'msg msg-user';
    userMsgEl.textContent = userMsg;
    container.appendChild(userMsgEl);
    input.value = '';
    container.scrollTop = container.scrollHeight;

    // Indicateur de chargement
    const loadingId = 'loading-' + Date.now();
    const loadingEl0 = document.createElement('div');
    loadingEl0.className = 'msg msg-bot';
    loadingEl0.id = loadingId;
    loadingEl0.innerHTML = '<i><?php echo $current_lang === 'en' ? 'Thinking…' : 'En train de réfléchir…'; ?></i>';
    container.appendChild(loadingEl0);
    container.scrollTop = container.scrollHeight;

    try {
        const response = await fetch('api/chatbot-query.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ query: userMsg, lang: '<?php echo $current_lang; ?>' })
        });

        const data = await response.json();
        const loadingEl = document.getElementById(loadingId);

        // Reponse HTML de confiance : generee par notre propre backend (php/i18n.php + h()),
        // jamais a partir du texte tape par l'utilisateur.
        if (data.answer) {
            loadingEl.innerHTML = data.answer;
        } else {
            loadingEl.textContent = <?php echo json_encode($current_lang === 'en' ? "Sorry, I'm having trouble answering." : "Désolé, je rencontre une difficulté pour répondre."); ?>;
        }
    } catch (error) {
        console.error('Chatbot error:', error);
        const loadingEl = document.getElementById(loadingId);
        loadingEl.textContent = <?php echo json_encode($current_lang === 'en' ? 'Sorry, the service is temporarily unavailable.' : "Désolé, le service est temporairement indisponible."); ?>;
    }
    container.scrollTop = container.scrollHeight;
  }

  // Retour en haut
  const scrollBtn = document.getElementById('scrolltop');
  if (scrollBtn) {
    window.addEventListener('scroll', () => {
      scrollBtn.classList.toggle('visible', window.scrollY > 300);
    });
  }

  // Widget WhatsApp
  const waToggle = document.getElementById('whatsapp-toggle');
  const waPanel = document.getElementById('whatsapp-panel');
  if (waToggle && waPanel) {
    waToggle.addEventListener('click', () => {
      waPanel.classList.toggle('active');
    });
    document.addEventListener('click', (e) => {
      if (waPanel.classList.contains('active') && !e.target.closest('.whatsapp-widget')) {
        waPanel.classList.remove('active');
      }
    });
  }

  // Chemin de base du site, calcule cote serveur (fiable quelle que soit l'URL utilisee pour
  // atteindre layout.php : "/", "/layout.php", une URL conviviale, DirectoryIndex...). Une
  // deduction cote client depuis window.location.pathname se casse des que la page est chargee
  // via "/" (DirectoryIndex) plutot que via l'URL explicite "/layout.php" : basePath devient
  // alors "/" et l'URL d'API resultante "//api/load-page.php" est interpretee par le navigateur
  // comme une URL vers un hote nomme "api" au lieu d'un chemin local.
  const basePath = <?php echo json_encode(rtrim(str_replace('\\', '/', dirname($_SERVER['SCRIPT_NAME'])), '/'), JSON_UNESCAPED_SLASHES); ?>;

  spaRouter.baseUrl = window.location.origin + basePath;
  spaRouter.apiEndpoint = basePath + '/api/load-page.php';

  function getCurrentRoute() {
    const params = new URLSearchParams(window.location.search);
    const page = params.get('page') || 'index';
    params.delete('page');
    return { page, params, hash: window.location.hash || '' };
  }

  function loadCurrentPage(pushState = false, silent = true) {
    const route = getCurrentRoute();
    spaRouter.loadPage(route, pushState, silent);
  }

  document.addEventListener('click', function(event) {
    const switcher = event.target.closest('[data-lang-switch]');
    if (!switcher) return;

    event.preventDefault();
    const lang = switcher.getAttribute('data-lang-switch') === 'en' ? 'en' : 'fr';
    const route = getCurrentRoute();
    route.params.set('lang', lang);

    window.location.href = spaRouter.buildBrowserUrl(route);
  });

  window.addEventListener('popstate', function(event) {
    if (event.state && event.state.page) {
      const params = new URLSearchParams(event.state.params || {});
      spaRouter.loadPage({ page: event.state.page, params, hash: event.state.hash || '' }, false, true);
    } else {
      loadCurrentPage(false, true);
    }
  });

  document.addEventListener('DOMContentLoaded', function() {
    loadCurrentPage(false, true);
  });
})();
</script>
</body>
</html>
<?php ob_end_flush(); ?>
