BONJOUR

cat > /mnt/user-data/outputs/index.php << 'PHPEOF'
<?php
session_start();
error_reporting(E_ALL);
ini_set('display_errors', 1);

define('DB_HOST', 'localhost');
define('DB_USER', 'beel3811_arthum2026');
define('DB_PASS', 'tedqih-jyvXu1-boxmec');
define('DB_NAME', 'beel3811_arthum');

function getDB() {
static $pdo = null;
if (!$pdo) {
try {
$pdo = new PDO(
"mysql:host=".DB_HOST.";dbname=".DB_NAME.";charset=utf8mb4",
DB_USER, DB_PASS,
[
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
PDO::ATTR_EMULATE_PREPARES => false,
]
);
} catch (PDOException $e) {
error_log("DB connection failed: ".$e->getMessage());
$pdo = null;
}
}
return $pdo;
}

function fetchRows($sql, $params = []) {
$db = getDB();
if (!$db) return [];
try {
$st = $db->prepare($sql);
$st->execute($params);
return $st->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
error_log("fetchRows error: ".$e->getMessage()." | SQL: ".$sql);
return [];
}
}

function fetchOne($sql, $params = []) {
$rows = fetchRows($sql, $params);
return $rows ? $rows[0] : null;
}

function col($row, ...$candidates) {
foreach ($candidates as $c) {
if (isset($row[$c]) && $row[$c] !== '') return $row[$c];
}
return '';
}

// ?? DATA avec colonnes corrigées ??????????????????????????????????????????????
// members: colonnes réelles = firstname, lastname, member_type, country, artistic_discipline, label_aped, is_active
$members = fetchRows("SELECT * FROM members WHERE is_active = 1 ORDER BY id DESC LIMIT 6");

// aped_members: JOIN avec members pour récupérer les prénoms
$aped = fetchRows("
SELECT a.*, m.firstname, m.lastname, m.artistic_discipline, m.country as member_country
FROM aped_members a
LEFT JOIN members m ON a.member_id = m.id
WHERE a.is_active = 1
ORDER BY a.id DESC LIMIT 6
");

// services: colonnes réelles = title, description, category, price_info, is_public, icon_class
$services = fetchRows("SELECT * FROM services WHERE is_public = 1 ORDER BY id ASC LIMIT 9");

// events: colonnes réelles = title, description, event_type, start_date, end_date, location, is_virtual, status, is_featured
$events = fetchRows("SELECT * FROM events WHERE status = 'publie' ORDER BY start_date ASC LIMIT 4");

// articles: colonnes réelles = title, slug, content, excerpt, category, is_published, published_at
$articles = fetchRows("SELECT * FROM articles WHERE is_published = 1 ORDER BY published_at DESC LIMIT 3");

// Comptes
$memberCountRow = fetchOne("SELECT COUNT(*) as c FROM members WHERE is_active = 1");
$apedCountRow = fetchOne("SELECT COUNT(*) as c FROM aped_members WHERE is_active = 1");
$serviceCountRow = fetchOne("SELECT COUNT(*) as c FROM services WHERE is_public = 1");
$eventCountRow = fetchOne("SELECT COUNT(*) as c FROM events WHERE status = 'publie'");

$memberCount = isset($memberCountRow['c']) ? (int)$memberCountRow['c'] : 0;
$apedCount = isset($apedCountRow['c']) ? (int)$apedCountRow['c'] : 0;
$serviceCount = isset($serviceCountRow['c']) ? (int)$serviceCountRow['c'] : 0;
$eventCount = isset($eventCountRow['c']) ? (int)$eventCountRow['c'] : 0;

// Fallbacks si BD vide
if ($memberCount === 0) $memberCount = 3;
if ($apedCount === 0) $apedCount = 32;

$og_title = "Art'hum — Art, Culture, Éducation · Montréal";
$og_description = "Art'hum mobilise l'art et la culture comme leviers de développement humain, d'intégration sociale et de vivre-ensemble. Montréal · Bénin · France · Maroc.";
$og_url = "https://art-hum.org";
$og_image = "https://art-hum.org/assets/arthum-og.jpg";
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= htmlspecialchars($og_title) ?></title>
<meta name="description" content="<?= htmlspecialchars($og_description) ?>">
<meta name="keywords" content="Art'hum, art, culture, éducation, Montréal, Label APÉD, OCVE, vivre-ensemble, interculturel, Bénin, artistes">
<meta name="author" content="Art'hum">
<meta name="robots" content="index, follow">
<meta name="theme-color" content="#7B2D8B">
<meta property="og:type" content="website">
<meta property="og:url" content="<?= $og_url ?>">
<meta property="og:title" content="<?= htmlspecialchars($og_title) ?>">
<meta property="og:description" content="<?= htmlspecialchars($og_description) ?>">
<meta property="og:image" content="<?= $og_image ?>">
<meta property="og:locale" content="fr_CA">
<meta property="og:site_name" content="Art'hum">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="<?= htmlspecialchars($og_title) ?>">
<meta name="twitter:description" content="<?= htmlspecialchars($og_description) ?>">
<meta name="twitter:image" content="<?= $og_image ?>">
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"NGO","name":"Art'hum","url":"https://art-hum.org","logo":"https://art-hum.org/assets/arthum-logo.png","description":"<?= addslashes($og_description) ?>","address":{"@type":"PostalAddress","addressLocality":"Montréal","addressRegion":"QC","addressCountry":"CA"},"foundingDate":"2008","contactPoint":{"@type":"ContactPoint","email":"info@art-hum.org","contactType":"customer service"}}
</script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=Nunito:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<style>
/* ???????????????????????????????????????????????????????????????
DESIGN SYSTEM — Art'hum 2025
??????????????????????????????????????????????????????????????? */
:root {
--violet: #7B2D8B;
--violet-dk: #5A1D68;
--violet-lt: #A94EBB;
--violet-xl: #F2E4F7;
--orange: #F0A030;
--orange-dk: #C97E10;
--orange-lt: #FFB84D;
--orange-xl: #FFF3DC;
--green: #5AAD3C;
--green-dk: #3D7D28;
--green-lt: #7ECB5A;
--green-xl: #EDF7E8;
--blue: #2D7CC0;
--blue-lt: #55A0E0;
--blue-xl: #E4F0FA;
--ink: #1A0A20;
--ink-70: rgba(26,10,32,.70);
--ink-40: rgba(26,10,32,.40);
--ink-12: rgba(26,10,32,.12);
--ink-06: rgba(26,10,32,.06);
--cream: #FDFAFF;
--white: #FFFFFF;
--ff-head: 'Syne', sans-serif;
--ff-body: 'Nunito', sans-serif;
--ff-mono: 'Space Mono', monospace;
--r: cubic-bezier(.16,1,.3,1);
--shadow-soft: 0 4px 24px rgba(123,45,139,.12);
--shadow-med: 0 12px 48px rgba(123,45,139,.18);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--ff-body);background:var(--cream);color:var(--ink);overflow-x:hidden;line-height:1.6}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--violet-xl)}
::-webkit-scrollbar-thumb{background:var(--violet);border-radius:2px}

/* ?? Progress bar ?? */
#pbar{position:fixed;top:0;left:0;height:3px;z-index:9999;background:linear-gradient(90deg,var(--violet),var(--orange),var(--green));width:0;transition:width .06s linear}

/* ?? NAV ?? */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;padding:0 48px;height:72px;display:flex;align-items:center;justify-content:space-between}
.nav-bg{position:absolute;inset:0;background:rgba(253,250,255,0);backdrop-filter:blur(0);border-bottom:1px solid transparent;transition:all .4s var(--r);pointer-events:none}
.nav.scrolled .nav-bg{background:rgba(253,250,255,.96);backdrop-filter:blur(32px) saturate(1.8);border-bottom-color:var(--ink-12);box-shadow:0 2px 24px rgba(123,45,139,.08)}
.nav-logo{display:flex;align-items:center;gap:12px;z-index:1;cursor:pointer}
.nav-logo-img-wrap{position:relative;width:48px;height:48px;flex-shrink:0}
.nav-logo-img-wrap::before{content:'';position:absolute;inset:-3px;border-radius:50%;background:linear-gradient(135deg,var(--violet-lt),var(--orange));opacity:0;transition:opacity .3s;z-index:0}
.nav-logo:hover .nav-logo-img-wrap::before{opacity:1}
.nav-logo img{height:44px;width:auto;position:relative;z-index:1;transition:transform .4s var(--r)}
.nav-logo:hover img{transform:scale(1.05) rotate(-2deg)}
.nav-logo-name{font-family:var(--ff-head);font-size:1.1rem;font-weight:800;color:rgba(255,255,255,.9);letter-spacing:-.02em;transition:color .3s}
.nav.scrolled .nav-logo-name{color:var(--violet)}
.nav-logo-name em{font-style:normal;color:var(--orange)}
.nav-links{display:flex;align-items:center;gap:2px;z-index:1}
.ni{position:relative}
.nl{font-family:var(--ff-head);font-size:.77rem;font-weight:600;padding:7px 14px;border-radius:28px;color:rgba(255,255,255,.75);transition:all .2s;cursor:pointer;display:flex;align-items:center;gap:5px;background:none;border:none}
.nav.scrolled .nl{color:var(--ink-70)}
.nl:hover,.nav.scrolled .nl:hover{color:var(--violet);background:rgba(123,45,139,.08)}
.nl .chv{font-size:.48rem;opacity:.6;transition:transform .22s}
.ni:hover>.nl .chv{transform:rotate(180deg)}
.ndrop{position:absolute;top:calc(100%+8px);left:50%;transform:translateX(-50%) translateY(6px);background:#fff;border:1px solid var(--ink-12);border-radius:18px;padding:7px;min-width:220px;box-shadow:var(--shadow-med);opacity:0;pointer-events:none;transition:all .2s var(--r)}
.ni:hover .ndrop{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.ndrop a{display:flex;align-items:center;gap:9px;padding:9px 13px;border-radius:11px;color:var(--ink-70);font-size:.78rem;font-weight:600;font-family:var(--ff-body);transition:all .2s}
.ndrop a:hover{background:var(--violet-xl);color:var(--violet)}
.ndrop a i{color:var(--violet);width:15px;font-size:.75rem;flex-shrink:0}
.ndrop-sep{height:1px;background:var(--ink-06);margin:4px 8px}
.nav-badge{font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.08em;padding:2px 8px;border-radius:10px;background:var(--orange);color:#fff;margin-left:4px}
.nav-actions{display:flex;gap:8px;align-items:center;z-index:1}
.nav-ghost{font-family:var(--ff-head);font-size:.77rem;font-weight:600;color:rgba(255,255,255,.7);border:1.5px solid rgba(255,255,255,.28);padding:8px 20px;border-radius:28px;transition:all .25s;display:flex;align-items:center;gap:6px}
.nav-ghost:hover{border-color:rgba(255,255,255,.65);color:#fff;background:rgba(255,255,255,.1)}
.nav.scrolled .nav-ghost{color:var(--ink-70);border-color:var(--ink-12)}
.nav.scrolled .nav-ghost:hover{background:var(--violet-xl);color:var(--violet);border-color:var(--violet)}
.nav-cta{font-family:var(--ff-head);font-size:.77rem;font-weight:700;background:linear-gradient(135deg,var(--violet),var(--violet-lt));color:#fff;padding:8px 22px;border-radius:28px;box-shadow:0 4px 20px rgba(123,45,139,.38);transition:all .28s;display:flex;align-items:center;gap:7px}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(123,45,139,.52)}
.nav-burger{display:none;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.25);align-items:center;justify-content:center;color:rgba(255,255,255,.8);font-size:.9rem;cursor:pointer;z-index:1;transition:all .2s}
.nav.scrolled .nav-burger{background:var(--violet-xl);color:var(--violet);border-color:var(--violet)}

/* ?? HERO — plus lumineux ?? */
.hero{min-height:100vh;position:relative;overflow:hidden;display:flex;align-items:center;
/* gradient éclairci : violet-rose au lieu de presque noir */
background:linear-gradient(155deg, #2D0D40 0%, #4A1870 35%, #1E2C60 65%, #0F3020 100%);
}
.hero-orb{position:absolute;border-radius:50%;filter:blur(80px);animation:orbFloat 12s ease-in-out infinite;pointer-events:none}
.orb1{width:600px;height:600px;background:rgba(169,78,187,.40);top:-150px;right:-100px;animation-duration:14s}
.orb2{width:400px;height:400px;background:rgba(240,160,48,.28);bottom:60px;left:-80px;animation-duration:18s;animation-delay:-6s}
.orb3{width:320px;height:320px;background:rgba(90,173,60,.22);top:45%;right:22%;animation-duration:20s;animation-delay:-3s}
.orb4{width:250px;height:250px;background:rgba(45,124,192,.25);top:18%;left:28%;animation-duration:16s;animation-delay:-9s}
/* orb central lumière */
.orb5{width:700px;height:700px;background:radial-gradient(circle,rgba(169,78,187,.22) 0%,rgba(123,45,139,.08) 50%,transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%);animation:none;filter:blur(40px)}
@keyframes orbFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-40px) scale(1.08)}}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:48px 48px}
.hero-inner{position:relative;z-index:2;max-width:1300px;margin:0 auto;width:100%;padding:140px 52px 100px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.hero-left{animation:fadeUp .9s var(--r) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(48px)}to{opacity:1;transform:translateY(0)}}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:24px;font-family:var(--ff-mono);font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;color:var(--orange)}
.hero-eyebrow::before{content:'';width:20px;height:1px;background:var(--orange)}
.hero h1{font-family:var(--ff-head);font-size:clamp(2.8rem,5.2vw,4.8rem);font-weight:800;color:#fff;line-height:1.02;letter-spacing:-.03em}
.hero h1 .accent-v{color:#D68BF0}
.hero h1 .accent-o{color:var(--orange)}
.hero h1 .accent-g{color:var(--green-lt)}
.hero-sub{font-size:clamp(1rem,1.5vw,1.2rem);font-style:italic;color:rgba(255,255,255,.42);margin:14px 0 0;font-family:var(--ff-body);font-weight:300}
.hero-rule{width:60px;height:3px;margin:26px 0;border-radius:2px;background:linear-gradient(90deg,#D68BF0,var(--orange))}
.hero-desc{font-size:.92rem;color:rgba(255,255,255,.58);line-height:1.9;max-width:480px;margin-bottom:36px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.btn-primary{font-family:var(--ff-head);font-weight:700;font-size:.86rem;background:linear-gradient(135deg,var(--violet),var(--violet-lt));color:#fff;padding:14px 32px;border-radius:50px;box-shadow:0 10px 40px rgba(123,45,139,.45);transition:all .3s var(--r);display:inline-flex;align-items:center;gap:9px}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 18px 56px rgba(123,45,139,.6)}
.btn-secondary{font-family:var(--ff-head);font-weight:600;font-size:.86rem;color:rgba(255,255,255,.72);border:1.5px solid rgba(255,255,255,.25);padding:14px 30px;border-radius:50px;transition:all .3s;display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.06)}
.btn-secondary:hover{border-color:rgba(255,255,255,.55);color:#fff;background:rgba(255,255,255,.12);transform:translateY(-2px)}
.hero-flags{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:40px;padding-top:28px;border-top:1px solid rgba(255,255,255,.08)}
.hf-label{font-size:.64rem;color:rgba(255,255,255,.3);font-family:var(--ff-mono);letter-spacing:.1em;text-transform:uppercase;flex-shrink:0}
.hf-pill{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);padding:5px 13px;border-radius:20px;font-size:.73rem;color:rgba(255,255,255,.52);transition:all .25s}
.hf-pill:hover{background:rgba(169,78,187,.22);border-color:rgba(214,139,240,.4);color:rgba(255,255,255,.88)}

/* Hero right — logo élégant */
.hero-right{display:flex;justify-content:center;align-items:center;animation:fadeUp .9s .25s var(--r) both;position:relative}
.hero-logo-scene{position:relative;width:420px;height:420px;display:flex;align-items:center;justify-content:center}
/* anneau décoratif rotatif */
.logo-ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(214,139,240,.15);animation:ringRotate 20s linear infinite}
.logo-ring::before{content:'';position:absolute;top:-4px;left:50%;width:8px;height:8px;border-radius:50%;background:var(--violet-lt);transform:translateX(-50%)}
.logo-ring-2{position:absolute;inset:30px;border-radius:50%;border:1px dashed rgba(240,160,48,.12);animation:ringRotate 32s linear infinite reverse}
/* cercle glow derrière logo */
.logo-glow-bg{position:absolute;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(169,78,187,.35) 0%,rgba(123,45,139,.15) 50%,transparent 70%);filter:blur(24px);animation:pulse 4s ease-in-out infinite}
@keyframes ringRotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.12);opacity:1}}
/* logo glass card */
.logo-card{position:relative;z-index:2;width:220px;height:220px;border-radius:32px;background:rgba(255,255,255,.08);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;box-shadow:0 24px 80px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.2);animation:logoFloat 8s ease-in-out infinite}
@keyframes logoFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-14px) rotate(1.5deg)}}
.logo-card img{width:160px;height:auto;filter:drop-shadow(0 8px 24px rgba(123,45,139,.6))}
.logo-card-fallback{font-family:var(--ff-head);font-size:2.2rem;font-weight:800;color:#fff;text-align:center;line-height:1.1}
.logo-card-fallback em{color:var(--orange);font-style:normal}
/* badges flottants */
.fcard{position:absolute;border-radius:16px;padding:14px 18px;backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.12);z-index:3}
.fc-members{top:24px;right:0;background:rgba(169,78,187,.25);border-color:rgba(214,139,240,.3);animation:fl1 7s ease-in-out infinite}
.fc-aped{bottom:40px;left:-10px;background:rgba(240,160,48,.22);border-color:rgba(240,160,48,.38);animation:fl2 9s ease-in-out infinite}
.fc-intl{top:50%;left:-20px;transform:translateY(-50%);background:rgba(90,173,60,.2);border-color:rgba(90,173,60,.35);animation:fl3 11s ease-in-out infinite}
@keyframes fl1{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes fl2{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}
@keyframes fl3{0%,100%{transform:translateY(-50%)}50%{transform:translateY(calc(-50% - 12px))}}
.fcard-num{font-family:var(--ff-head);font-size:1.8rem;font-weight:800;color:#fff;line-height:1}
.fcard-lbl{font-size:.65rem;color:rgba(255,255,255,.48);margin-top:3px;font-family:var(--ff-mono);text-transform:uppercase;letter-spacing:.08em}
.scroll-hint{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:6px;color:rgba(255,255,255,.22);font-size:.58rem;font-family:var(--ff-mono);letter-spacing:.15em;animation:fadeUp 1.2s 1.5s var(--r) both}
.s-mouse{width:17px;height:28px;border:1px solid rgba(255,255,255,.2);border-radius:8px;position:relative}
.s-mouse::after{content:'';position:absolute;top:5px;left:50%;transform:translateX(-50%);width:2px;height:5px;background:#D68BF0;border-radius:1px;animation:sd 2.2s ease-in-out infinite}
@keyframes sd{0%,100%{opacity:1;top:5px}50%{opacity:0;top:16px}}

/* ?? TICKER ?? */
.ticker{overflow:hidden;padding:13px 0;white-space:nowrap;background:linear-gradient(135deg,var(--violet),var(--violet-dk))}
.tick-inner{display:inline-flex;animation:tick 36s linear infinite}
.tick-item{font-family:var(--ff-mono);font-size:.68rem;font-weight:700;color:rgba(255,255,255,.8);padding:0 48px;letter-spacing:.1em;text-transform:uppercase}
.tick-item::before{content:'? '}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ?? SECTIONS ?? */
.s{padding:100px 52px}
.s-white{background:var(--white)}
.s-cream{background:var(--cream)}
.s-violet{background:linear-gradient(155deg,#1A0A20 0%,#2D1048 50%,#1A0A20 100%);color:var(--white)}
.s-parchment{background:linear-gradient(135deg,#FDF5FF 0%,#F7F0FF 100%)}
.wrap{max-width:1300px;margin:0 auto}
.kicker{font-family:var(--ff-mono);font-size:.63rem;letter-spacing:.18em;text-transform:uppercase;color:var(--violet);margin-bottom:14px;display:flex;align-items:center;gap:11px}
.kicker::before{content:'';width:16px;height:1.5px;background:var(--violet);flex-shrink:0}
.kicker-c{justify-content:center}
.kicker-c::before,.kicker-c::after{content:'';width:16px;height:1.5px;background:currentColor;flex-shrink:0}
.kicker-o{color:var(--orange)}
.kicker-o::before,.kicker-o::after{background:var(--orange)}
.kicker-g{color:var(--green)}
.kicker-g::before,.kicker-g::after{background:var(--green)}
.h2{font-family:var(--ff-head);font-size:clamp(2rem,3.5vw,3rem);font-weight:800;line-height:1.1;letter-spacing:-.02em}
.h2 em{font-style:italic;color:var(--violet);font-weight:800}
.h2-c{text-align:center}
.h2-light em{color:#D68BF0}
.lead{font-size:.97rem;color:var(--ink-40);line-height:1.88;max-width:580px;margin:16px auto 48px;text-align:center}
.lead-dark{color:rgba(255,255,255,.42)}
.rv{opacity:0;transform:translateY(24px);transition:opacity .65s var(--r),transform .65s var(--r)}
.rv.on{opacity:1;transform:translateY(0)}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}
.d4{transition-delay:.32s}.d5{transition-delay:.40s}.d6{transition-delay:.48s}

/* ?? ILLUSTRATION sections ?? */
.section-illus{width:100%;display:flex;justify-content:center;margin-bottom:48px}
.section-illus svg{max-width:100%;height:auto}

/* ?? STATS ?? */
.stats-band{background:var(--white);border-top:1px solid var(--ink-06);border-bottom:1px solid var(--ink-06)}
.stats-inner{max-width:1300px;margin:0 auto;padding:0 52px;display:grid;grid-template-columns:repeat(4,1fr)}
.stat-item{padding:36px 24px;text-align:center;border-right:1px solid var(--ink-06);position:relative;overflow:hidden;transition:background .3s}
.stat-item:last-child{border-right:none}
.stat-item::before{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:0;height:2px;background:var(--violet);transition:width .4s var(--r)}
.stat-item:hover{background:var(--violet-xl)}
.stat-item:hover::before{width:60%}
.stat-n{font-family:var(--ff-head);font-size:2.4rem;font-weight:800;line-height:1;color:var(--violet)}
.stat-n.orange{color:var(--orange-dk)}
.stat-n.green{color:var(--green-dk)}
.stat-n.blue{color:var(--blue)}
.stat-l{font-size:.7rem;color:var(--ink-40);text-transform:uppercase;letter-spacing:.08em;margin-top:5px;font-family:var(--ff-mono)}

/* ?? SERVICES ?? */
.stabs{display:flex;gap:4px;margin-bottom:36px;flex-wrap:wrap}
.stab{font-family:var(--ff-head);font-size:.77rem;font-weight:700;padding:10px 22px;border-radius:50px;cursor:pointer;color:var(--ink-40);border:1.5px solid var(--ink-12);transition:all .22s;background:transparent}
.stab.on,.stab:hover{background:var(--violet);color:#fff;border-color:var(--violet);box-shadow:0 4px 20px rgba(123,45,139,.3)}
.stab-pane{display:none}
.stab-pane.on{display:grid}
.sg{grid-template-columns:repeat(3,1fr);gap:18px}
.scard{background:var(--white);border-radius:20px;padding:30px 26px;border:1.5px solid var(--ink-06);transition:all .32s var(--r);position:relative;overflow:hidden}
.scard::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--violet),var(--orange));transform:scaleX(0);transform-origin:left;transition:transform .32s var(--r)}
.scard:hover{transform:translateY(-6px);box-shadow:var(--shadow-med);border-color:rgba(123,45,139,.15)}
.scard:hover::before{transform:scaleX(1)}
.scard-ico{width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:18px;background:var(--violet-xl)}
.scard-ico.o{background:var(--orange-xl)}
.scard-ico.g{background:var(--green-xl)}
.scard-ico.b{background:var(--blue-xl)}
.scard h3{font-family:var(--ff-head);font-size:1.02rem;font-weight:700;margin-bottom:9px;color:var(--ink)}
.scard p{font-size:.8rem;color:var(--ink-40);line-height:1.65}
.stag{display:inline-block;font-size:.6rem;font-weight:700;padding:4px 11px;border-radius:20px;margin-top:13px;font-family:var(--ff-mono);letter-spacing:.05em}
.stag-v{background:var(--violet-xl);color:var(--violet)}
.stag-o{background:var(--orange-xl);color:var(--orange-dk)}
.stag-g{background:var(--green-xl);color:var(--green-dk)}
.stag-b{background:var(--blue-xl);color:var(--blue)}

/* ?? PROGRAMMES ?? */
.prog-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.pc{border-radius:24px;padding:42px;position:relative;overflow:hidden;transition:all .32s var(--r)}
.pc:hover{transform:translateY(-6px)}
.pc-aped{background:linear-gradient(140deg,#0E2A1E,#1C5538)}
.pc-ocve{background:linear-gradient(140deg,#1A0730,#321060)}
.pc-intl{grid-column:span 2;background:linear-gradient(140deg,#1A0A20,#3D1060,#0A1F14)}
.pc::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.015) 0,rgba(255,255,255,.015) 1px,transparent 1px,transparent 28px)}
.pc-badge{display:inline-flex;align-items:center;gap:7px;font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.48);border:1px solid rgba(255,255,255,.12);padding:5px 13px;border-radius:20px;margin-bottom:18px;position:relative}
.pc-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;animation:blink 2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.pc h3{font-family:var(--ff-head);font-size:1.6rem;font-weight:800;color:#fff;line-height:1.1;margin-bottom:12px;position:relative}
.pc h3 em{font-style:italic;color:var(--orange)}
.pc p{font-size:.83rem;color:rgba(255,255,255,.46);line-height:1.75;position:relative;max-width:480px}
.pc-feats{display:flex;flex-direction:column;gap:8px;margin-top:18px;position:relative}
.pc-feat{display:flex;align-items:center;gap:9px;font-size:.78rem;color:rgba(255,255,255,.6)}
.pc-feat i{color:var(--green-lt);font-size:.73rem}
.pc-link{position:relative;margin-top:22px;display:inline-flex;align-items:center;gap:7px;font-family:var(--ff-head);font-size:.78rem;font-weight:700;color:rgba(255,255,255,.45);border-bottom:1px solid rgba(255,255,255,.16);padding-bottom:2px;transition:all .25s}
.pc-link:hover{color:#fff;gap:12px;border-bottom-color:rgba(255,255,255,.55)}
.intl-inner{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.country-chips{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.cchip{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:18px 14px;text-align:center;transition:all .3s}
.cchip:hover{background:rgba(123,45,139,.22);border-color:rgba(169,78,187,.4);transform:translateY(-4px)}
.cchip .fl{font-size:1.9rem;margin-bottom:7px;display:block}
.cchip h5{font-size:.78rem;font-weight:700;color:rgba(255,255,255,.82);margin-bottom:3px;font-family:var(--ff-head)}
.cchip p{font-size:.65rem;color:rgba(255,255,255,.3)}

/* ?? EVENTS ?? */
.events-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.ev-card{background:var(--white);border-radius:20px;overflow:hidden;border:1.5px solid var(--ink-06);transition:all .32s var(--r)}
.ev-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-med);border-color:rgba(123,45,139,.15)}
.ev-head{height:110px;background:linear-gradient(135deg,var(--violet-dk),var(--violet-lt));display:flex;align-items:center;justify-content:center;font-size:2.5rem;position:relative;overflow:hidden}
.ev-head::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0,rgba(255,255,255,.03) 1px,transparent 1px,transparent 16px)}
.ev-date{position:absolute;top:12px;right:12px;background:#fff;border-radius:10px;padding:6px 10px;text-align:center}
.ev-day{font-family:var(--ff-head);font-size:1.2rem;font-weight:800;color:var(--violet);line-height:1}
.ev-month{font-family:var(--ff-mono);font-size:.58rem;color:var(--ink-40);text-transform:uppercase;letter-spacing:.06em}
.ev-body{padding:20px}
.ev-body h4{font-family:var(--ff-head);font-size:.92rem;font-weight:700;margin-bottom:6px;color:var(--ink)}
.ev-body p{font-size:.75rem;color:var(--ink-40);line-height:1.55}

/* ?? ARTICLES ?? */
.articles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.art-card{background:var(--white);border-radius:22px;overflow:hidden;border:1.5px solid var(--ink-06);transition:all .32s var(--r);display:flex;flex-direction:column}
.art-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-med)}
.art-head{height:160px;background:linear-gradient(135deg,var(--violet-dk) 0%,var(--orange-dk) 100%);display:flex;align-items:center;justify-content:center;font-size:3rem;position:relative;overflow:hidden}
.art-head::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.025) 0,rgba(255,255,255,.025) 1px,transparent 1px,transparent 20px)}
.art-body{padding:24px;flex:1;display:flex;flex-direction:column}
.art-meta{display:flex;gap:12px;align-items:center;margin-bottom:11px}
.art-tag{font-family:var(--ff-mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;color:var(--violet);background:var(--violet-xl);padding:3px 10px;border-radius:20px}
.art-date{font-family:var(--ff-mono);font-size:.6rem;color:var(--ink-40)}
.art-body h3{font-family:var(--ff-head);font-size:.96rem;font-weight:700;line-height:1.35;margin-bottom:9px;color:var(--ink)}
.art-body p{font-size:.78rem;color:var(--ink-40);line-height:1.65;flex:1}
.art-link{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-family:var(--ff-head);font-size:.75rem;font-weight:700;color:var(--violet);border-bottom:1px solid rgba(123,45,139,.2);padding-bottom:1px;transition:all .22s;align-self:flex-start}
.art-link:hover{gap:11px;border-bottom-color:var(--violet)}

/* ?? MEMBERS ?? */
.members-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.mem-card{background:var(--white);border-radius:18px;padding:22px 16px;border:1.5px solid var(--ink-06);text-align:center;transition:all .3s var(--r)}
.mem-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-soft);border-color:rgba(123,45,139,.2)}
.mem-av{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--ff-head);font-size:1.1rem;font-weight:800;color:#fff;margin:0 auto 12px}
.mem-name{font-family:var(--ff-head);font-size:.82rem;font-weight:700;color:var(--ink);line-height:1.2;margin-bottom:4px}
.mem-type{font-family:var(--ff-mono);font-size:.62rem;color:var(--ink-40);text-transform:uppercase;letter-spacing:.06em}
.mem-badge{display:inline-block;font-family:var(--ff-mono);font-size:.58rem;padding:3px 9px;border-radius:20px;margin-top:10px}

/* ?? FORUM ?? */
.forum-section{background:linear-gradient(135deg,#F7F0FF,#FFF5E8)}
.forum-inner{display:grid;grid-template-columns:1fr 1.8fr;gap:52px;align-items:center}
.forum-feats{display:flex;flex-direction:column;gap:12px;margin-bottom:28px}
.ff-item{display:flex;align-items:center;gap:12px;font-size:.82rem;color:var(--ink-70);font-weight:600}
.ff-item i{color:var(--violet);width:18px;font-size:.85rem}
.forum-preview{display:flex;flex-direction:column;gap:12px}
.forum-thread{background:var(--white);border-radius:16px;padding:18px 20px;border:1.5px solid var(--ink-06);transition:all .28s;display:flex;gap:14px;align-items:flex-start}
.forum-thread:hover{border-color:rgba(123,45,139,.2);box-shadow:var(--shadow-soft);transform:translateX(4px)}
.ft-av{width:40px;height:40px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--ff-head);font-size:.85rem;font-weight:700;color:#fff}
.ft-av.v{background:linear-gradient(135deg,var(--violet),var(--violet-lt))}
.ft-av.o{background:linear-gradient(135deg,var(--orange-dk),var(--orange-lt))}
.ft-av.g{background:linear-gradient(135deg,var(--green-dk),var(--green-lt))}
.ft-content{flex:1;min-width:0}
.ft-title{font-family:var(--ff-head);font-size:.85rem;font-weight:700;color:var(--ink);margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ft-meta{font-size:.68rem;color:var(--ink-40)}
.ft-meta span{color:var(--violet);font-weight:600}
.ft-right{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0}
.ft-count{display:flex;align-items:center;gap:4px;font-family:var(--ff-mono);font-size:.68rem;color:var(--ink-40)}
.ft-new{background:var(--orange);color:#fff;font-family:var(--ff-mono);font-size:.58rem;padding:2px 8px;border-radius:10px}
.forum-cta-btn{display:inline-flex;align-items:center;gap:9px;background:linear-gradient(135deg,var(--violet),var(--violet-lt));color:#fff;padding:14px 30px;border-radius:50px;font-family:var(--ff-head);font-weight:700;font-size:.88rem;box-shadow:0 8px 32px rgba(123,45,139,.38);transition:all .3s}
.forum-cta-btn:hover{transform:translateY(-3px);box-shadow:0 16px 48px rgba(123,45,139,.55)}

/* ?? APÉD ?? */
.aped-2col{display:grid;grid-template-columns:1.1fr 1fr;gap:72px;align-items:center}
.aped-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.aped-c{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:17px;padding:22px 18px;transition:all .3s}
.aped-c:hover{background:rgba(123,45,139,.2);border-color:rgba(169,78,187,.35);transform:translateY(-4px)}
.aped-c-ico{font-size:1.5rem;margin-bottom:10px}
.aped-c h4{font-family:var(--ff-head);font-size:.92rem;font-weight:700;color:#fff;margin-bottom:5px}
.aped-c p{font-size:.75rem;color:rgba(255,255,255,.38);line-height:1.5}
.aped-stat{display:flex;align-items:baseline;gap:7px;margin:20px 0 28px}
.aped-n{font-family:var(--ff-head);font-size:3rem;font-weight:800;color:var(--orange);line-height:1}
.aped-l{font-size:.82rem;color:rgba(255,255,255,.4);line-height:1.4}

/* ?? TÉMOIGNAGES ?? */
.temo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.temo-c{background:var(--white);border-radius:22px;padding:32px 28px;border:1.5px solid var(--ink-06);transition:all .32s;position:relative;overflow:hidden}
.temo-c::before{content:'\201C';position:absolute;top:-10px;right:16px;font-family:var(--ff-head);font-size:7rem;color:var(--violet);opacity:.06;line-height:1}
.temo-c:hover{box-shadow:var(--shadow-med);transform:translateY(-5px);border-color:rgba(123,45,139,.15)}
.temo-stars{display:flex;gap:2px;margin-bottom:14px}
.star{color:var(--orange);font-size:.8rem}
.temo-txt{font-family:var(--ff-body);font-style:italic;font-size:.9rem;color:var(--ink);line-height:1.75;margin-bottom:18px}
.temo-author{display:flex;align-items:center;gap:12px}
.temo-av{width:42px;height:42px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--ff-head);font-weight:800;font-size:.95rem;color:#fff}
.temo-name{font-family:var(--ff-head);font-size:.82rem;font-weight:700}
.temo-role{font-size:.71rem;color:var(--ink-40)}

/* ?? CTA ?? */
.cta-band{background:linear-gradient(135deg,var(--violet-dk) 0%,var(--violet) 50%,#B060C8 100%);padding:90px 52px;text-align:center;position:relative;overflow:hidden}
.cta-band::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.025) 0,rgba(255,255,255,.025) 1px,transparent 1px,transparent 22px)}
.cta-orb{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none}
.cta-o1{width:300px;height:300px;background:rgba(240,160,48,.18);top:-60px;right:10%;animation:orbFloat 10s ease-in-out infinite}
.cta-o2{width:200px;height:200px;background:rgba(90,173,60,.15);bottom:-40px;left:8%;animation:orbFloat 13s ease-in-out infinite;animation-delay:-5s}
.cta-band h2{font-family:var(--ff-head);font-size:clamp(2rem,4vw,3.2rem);font-weight:800;color:#fff;margin-bottom:14px;position:relative;letter-spacing:-.02em}
.cta-band p{font-size:.97rem;color:rgba(255,255,255,.62);max-width:500px;margin:0 auto 34px;position:relative;line-height:1.78}
.newsletter-form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;position:relative;margin-bottom:20px}
.newsletter-form input{background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.2);color:#fff;padding:13px 24px;border-radius:50px;font-size:.86rem;font-family:var(--ff-body);width:300px;outline:none;transition:all .25s}
.newsletter-form input::placeholder{color:rgba(255,255,255,.38)}
.newsletter-form input:focus{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.5)}
.btn-cta-w{background:#fff;color:var(--violet);padding:13px 32px;border-radius:50px;font-family:var(--ff-head);font-weight:800;font-size:.88rem;box-shadow:0 8px 36px rgba(0,0,0,.2);transition:all .3s;display:inline-flex;align-items:center;gap:9px;border:none;cursor:pointer}
.btn-cta-w:hover{transform:translateY(-3px);box-shadow:0 16px 52px rgba(0,0,0,.3)}
.cta-links{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;position:relative}
.cta-link{font-size:.8rem;color:rgba(255,255,255,.48);transition:color .2s;display:flex;align-items:center;gap:6px;font-family:var(--ff-head);font-weight:600}
.cta-link:hover{color:rgba(255,255,255,.88)}

/* ?? FOOTER ?? */
.footer{background:var(--ink);color:#fff;padding:88px 52px 44px}
.ft-grid{max-width:1300px;margin:0 auto 60px;display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr;gap:52px}
.ft-brand img{height:60px;width:auto;margin-bottom:16px;filter:brightness(0) invert(1) opacity(.85)}
.ft-desc{font-size:.78rem;color:rgba(255,255,255,.3);line-height:1.85;max-width:250px}
.ft-tagline{font-style:italic;font-size:.8rem;color:rgba(255,255,255,.18);margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.06)}
.ft-social{display:flex;gap:8px;margin-top:20px}
.ft-soc{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.3);font-size:.82rem;transition:all .25s}
.ft-soc:hover{border-color:var(--violet-lt);color:var(--violet-lt);background:rgba(123,45,139,.15)}
.ft-col h5{font-family:var(--ff-mono);font-size:.62rem;color:var(--violet-lt);letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px}
.ft-col a{display:block;font-size:.78rem;color:rgba(255,255,255,.3);margin-bottom:10px;transition:color .2s;font-weight:500}
.ft-col a:hover{color:rgba(255,255,255,.8)}
.ft-col p{display:block;font-size:.78rem;color:rgba(255,255,255,.3);margin-bottom:10px}
.ft-bottom{max-width:1300px;margin:0 auto;padding-top:30px;border-top:1px solid rgba(255,255,255,.06);display:flex;justify-content:space-between;align-items:center;font-size:.67rem;color:rgba(255,255,255,.18);font-family:var(--ff-mono);flex-wrap:wrap;gap:10px}
.ft-bottom a{color:rgba(255,255,255,.28);transition:color .2s}
.ft-bottom a:hover{color:rgba(255,255,255,.65)}

/* ?? UTILS ?? */
.btn-more{display:inline-flex;align-items:center;gap:8px;font-family:var(--ff-head);font-size:.8rem;font-weight:700;padding:12px 28px;border-radius:40px;border:2px solid var(--violet);color:var(--violet);transition:all .25s}
.btn-more:hover{background:var(--violet);color:#fff;box-shadow:0 6px 24px rgba(123,45,139,.3)}
.btn-more-inv{border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.5)}
.btn-more-inv:hover{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.5)}
.more-wrap{text-align:center;margin-top:48px}

/* ?? RESPONSIVE ?? */
@media(max-width:1100px){
.events-grid{grid-template-columns:1fr 1fr}
.members-grid{grid-template-columns:repeat(3,1fr)}
.ft-grid{grid-template-columns:1fr 1fr}
.country-chips{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
.nav-links,.nav-ghost{display:none}
.nav-burger{display:flex}
.nav{padding:0 20px}
.hero-inner{grid-template-columns:1fr;padding:120px 20px 80px}
.hero-right{display:none}
.prog-grid,.intl-inner,.aped-2col{grid-template-columns:1fr;gap:24px}
.pc-intl{grid-column:1}
.sg,.temo-grid,.articles-grid{grid-template-columns:1fr 1fr}
.forum-inner{grid-template-columns:1fr}
.s{padding:72px 20px}
.stats-inner{grid-template-columns:repeat(2,1fr)}
.stat-item{border-bottom:1px solid var(--ink-06);border-right:none}
.stat-item:nth-child(odd){border-right:1px solid var(--ink-06)}
}
@media(max-width:640px){
.sg,.temo-grid,.articles-grid,.events-grid,.aped-grid{grid-template-columns:1fr}
.members-grid{grid-template-columns:1fr 1fr}
.hero h1{font-size:2.6rem}
.cta-band{padding:60px 20px}
.ft-grid{grid-template-columns:1fr;gap:28px}
.stats-inner{grid-template-columns:1fr 1fr}
.country-chips{grid-template-columns:1fr 1fr}
}

/* ?? MOBILE MENU ?? */
.mob-menu{position:fixed;inset:0;z-index:999;background:rgba(26,10,32,.97);backdrop-filter:blur(20px);display:flex;flex-direction:column;padding:80px 32px 40px;transform:translateX(100%);transition:transform .4s var(--r);overflow-y:auto}
.mob-menu.open{transform:translateX(0)}
.mob-menu a,.mob-menu span{display:block;font-family:var(--ff-head);font-size:1.2rem;font-weight:700;color:rgba(255,255,255,.7);padding:14px 0;border-bottom:1px solid rgba(255,255,255,.06);transition:color .2s;cursor:pointer}
.mob-menu a:hover,.mob-menu span:hover{color:#D68BF0}
.mob-menu-close{position:absolute;top:20px;right:20px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.5);font-size:1rem;cursor:pointer;transition:all .2s}
.mob-menu-close:hover{background:rgba(255,255,255,.1);color:#fff}
.mob-menu-sub{padding-left:18px!important;font-size:1rem!important;color:rgba(255,255,255,.4)!important}

/* ?? ILLUS DÉCORATIVE — wave entre sections ?? */
.wave-divider{line-height:0;overflow:hidden;margin-bottom:-2px}
.wave-divider svg{display:block;width:100%}
</style>
</head>
<body>
<div id="pbar"></div>


<div class="mob-menu" id="mobMenu">
<div class="mob-menu-close" onclick="closeMob()"><i class="fas fa-times"></i></div>
<a href="#accueil" onclick="closeMob()">? Accueil</a>
<span>Services ?</span>
<a href="#services" class="mob-menu-sub" onclick="closeMob()">? Aux artistes</a>
<a href="#services" class="mob-menu-sub" onclick="closeMob()">? Aux communautés</a>
<a href="#services" class="mob-menu-sub" onclick="closeMob()">? Aux écoles</a>
<span>Programmes ?</span>
<a href="#aped" class="mob-menu-sub" onclick="closeMob()">? Label APÉD</a>
<a href="#ocve-prog" class="mob-menu-sub" onclick="closeMob()">? Observatoire OCVE</a>
<a href="#international" class="mob-menu-sub" onclick="closeMob()">? International</a>
<a href="#evenements" onclick="closeMob()">? Événements</a>
<a href="#forum" onclick="closeMob()">? Forum</a>
<a href="#articles" onclick="closeMob()">? Actualités</a>
<a href="/connexion.php" class="mob-menu-sub" onclick="closeMob()">? Se connecter</a>
<a href="#contact" onclick="closeMob()">? Contact</a>
<a href="/adhesion.php" style="color:var(--orange-lt)!important;margin-top:12px" onclick="closeMob()">? Adhérer</a>
</div>


<nav class="nav" id="nav">
<div class="nav-bg"></div>
<a href="/" class="nav-logo">
<div class="nav-logo-img-wrap">
<img src="arthum-logo.png" alt="Art'hum" onerror="this.style.display='none'">
</div>
<span class="nav-logo-name">Art<em>'</em>hum</span>
</a>
<div class="nav-links">
<div class="ni">
<span class="nl">Services <span class="chv">?</span></span>
<div class="ndrop">
<a href="#services" onclick="switchTabAndScroll('artistes')"><i class="fas fa-palette"></i> Aux artistes</a>
<a href="#services" onclick="switchTabAndScroll('communautes')"><i class="fas fa-users"></i> Aux communautés</a>
<a href="#services" onclick="switchTabAndScroll('ecoles')"><i class="fas fa-school"></i> Aux écoles</a>
</div>
</div>
<div class="ni">
<span class="nl">Programmes <span class="chv">?</span></span>
<div class="ndrop">
<a href="#aped"><i class="fas fa-tag"></i> Label APÉD</a>
<a href="#ocve"><i class="fas fa-eye"></i> Observatoire OCVE</a>
<a href="#international"><i class="fas fa-globe-americas"></i> International</a>
</div>
</div>
<a href="#evenements" class="nl">Événements</a>
<a href="#forum" class="nl">Forum <span class="nav-badge">New</span></a>
<a href="#articles" class="nl">Actualités</a>
<div class="ni">
<span class="nl">Espace membre <span class="chv">?</span></span>
<div class="ndrop">
<a href="/connexion.php"><i class="fas fa-sign-in-alt"></i> Se connecter</a>
<a href="/espace-membre.php"><i class="fas fa-user-circle"></i> Mon espace</a>
<div class="ndrop-sep"></div>
<a href="/admin/"><i class="fas fa-cog"></i> Administration</a>
</div>
</div>
<a href="#contact" class="nl">Contact</a>
</div>
<div class="nav-actions">
<a href="/connexion.php" class="nav-ghost"><i class="fas fa-lock" style="font-size:.7rem"></i> Connexion</a>
<a href="/adhesion.php" class="nav-cta"><i class="fas fa-heart" style="font-size:.7rem"></i> Adhérer</a>
<div class="nav-burger" onclick="openMob()"><i class="fas fa-bars"></i></div>
</div>
</nav>


<section id="accueil" class="hero">
<div class="hero-orb orb1"></div>
<div class="hero-orb orb2"></div>
<div class="hero-orb orb3"></div>
<div class="hero-orb orb4"></div>
<div class="hero-orb orb5"></div>
<div class="hero-grid"></div>
<div class="hero-inner">
<div class="hero-left">
<div class="hero-eyebrow">Montréal, Canada · Fondé en 2008</div>
<h1>
L'<span class="accent-v">art</span>,<br>
la <span class="accent-o">culture</span>,<br>
l'<span class="accent-g">éducation</span>
</h1>
<div class="hero-sub">Là où la créativité rencontre la cohésion humaine.</div>
<div class="hero-rule"></div>
<p class="hero-desc">Art'hum mobilise l'art et les rencontres interculturelles comme leviers de développement humain, d'intégration sociale et de vivre-ensemble — de Montréal au Bénin, de Paris au Maroc.</p>
<div class="hero-actions">
<a href="#services" class="btn-primary"><i class="fas fa-compass"></i> Explorer nos programmes</a>
<a href="/adhesion.php" class="btn-secondary"><i class="fas fa-user-plus"></i> Devenir membre</a>
</div>
<div class="hero-flags">
<span class="hf-label">Présent en</span>
<span class="hf-pill">?? Canada</span>
<span class="hf-pill">?? Bénin</span>
<span class="hf-pill">?? France</span>
<span class="hf-pill">?? Maroc</span>
<span class="hf-pill">?? Côte d'Ivoire</span>
</div>
</div>


<div class="hero-right">
<div class="hero-logo-scene">
<div class="logo-ring"></div>
<div class="logo-ring-2"></div>
<div class="logo-glow-bg"></div>
<div class="logo-card">
<img src="arthum-logo.png" alt="Art'hum Logo"
onerror="this.style.display='none';this.parentNode.querySelector('.logo-card-fallback').style.display='block'">
<div class="logo-card-fallback" style="display:none">Art<em>'</em><br>hum</div>
</div>
<div class="fcard fc-members">
<div class="fcard-num"><?= $memberCount ?>+</div>
<div class="fcard-lbl">Membres actifs</div>
</div>
<div class="fcard fc-aped">
<div class="fcard-num"><?= $apedCount ?>+</div>
<div class="fcard-lbl">Artistes labellisés</div>
</div>
<div class="fcard fc-intl">
<div class="fcard-num">4</div>
<div class="fcard-lbl">Pays</div>
</div>
</div>
</div>
</div>
<div class="scroll-hint">
<div class="s-mouse"></div>
SCROLL
</div>
</section>


<div class="ticker" aria-hidden="true">
<div class="tick-inner">
<?php
$ticks = ['Art & Culture','Développement humain','Label APÉD','Observatoire OCVE','Ateliers interculturels','Résidences artistiques','Vivre ensemble','Neuro-citoyenneté','Forum communautaire','Montréal · Bénin · France · Maroc'];
foreach(array_merge($ticks,$ticks) as $t):
?><span class="tick-item"><?= $t ?></span><?php endforeach; ?>
</div>
</div>


<div class="stats-band">
<div class="stats-inner">
<div class="stat-item rv"><div class="stat-n"><?= $memberCount ?>+</div><div class="stat-l">Membres actifs</div></div>
<div class="stat-item rv d1"><div class="stat-n orange"><?= $apedCount ?>+</div><div class="stat-l">Artistes APÉD</div></div>
<div class="stat-item rv d2"><div class="stat-n green">4</div><div class="stat-l">Pays partenaires</div></div>
<div class="stat-item rv d3"><div class="stat-n blue">500+</div><div class="stat-l">Participants / an</div></div>
</div>
</div>


<section id="mission" class="s s-white">
<div class="wrap">
<div style="display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center" class="resp-1col">
<div class="rv" style="font-family:var(--ff-head);font-size:clamp(1.1rem,1.8vw,1.5rem);font-weight:700;line-height:1.65;color:var(--ink);padding:44px;background:linear-gradient(135deg,#F7F0FF,#FFF5E8);border-radius:24px;border-left:4px solid var(--violet);position:relative;overflow:hidden">
<span style="position:absolute;top:-20px;left:12px;font-size:9rem;color:var(--violet);opacity:.06;line-height:1;font-family:Georgia">"</span>
Mettre les arts et la culture au service du <strong style="color:var(--violet)">développement humain</strong> et du vivre-ensemble harmonieux — avec l'innovation artistique et sociale comme boussole.
<cite style="display:block;font-family:var(--ff-mono);font-style:normal;font-size:.68rem;color:var(--ink-40);margin-top:16px;letter-spacing:.06em;text-transform:uppercase">— Fondatrice, Art'hum · Montréal, 2008</cite>
</div>
<div>
<div class="kicker rv">Notre ADN</div>
<h2 class="h2 rv d1">Ce qui nous anime<br><em>profondément</em></h2>
<div style="height:22px"></div>
<?php
$pillars = [
['?','L\'art comme vecteur social','La pratique artistique transforme individus, groupes et territoires — bien au-delà de l\'esthétique.','var(--violet-xl)'],
['?','Interculturalité assumée','Les rencontres entre cultures sont notre matière première — sources d\'innovation et d\'humanité partagée.','var(--orange-xl)'],
['?','Accessibilité universelle','Nos programmes touchent toutes les communautés : artistes, enfants, aînés, écoles, institutions publiques.','var(--green-xl)'],
['?','Innovation socio-artistique','Sémiotique, neurosciences et intelligence collective — aux frontières de l\'art, de la science et de l\'humain.','var(--blue-xl)'],
];
foreach($pillars as $i => $p): ?>
<div class="rv d<?= $i+2 ?>" style="display:flex;gap:16px;align-items:flex-start;padding:18px 20px;border-radius:16px;background:var(--cream);border:1.5px solid var(--ink-06);transition:all .3s;margin-bottom:14px"
onmouseover="this.style.transform='translateX(7px)';this.style.boxShadow='0 8px 32px rgba(123,45,139,.1)';this.style.borderColor='rgba(123,45,139,.2)'"
onmouseout="this.style.transform='';this.style.boxShadow='';this.style.borderColor=''">
<div style="width:48px;height:48px;flex-shrink:0;border-radius:13px;background:<?= $p[3] ?>;display:flex;align-items:center;justify-content:center;font-size:1.3rem"><?= $p[0] ?></div>
<div>
<h4 style="font-family:var(--ff-head);font-size:1rem;font-weight:700;margin-bottom:4px"><?= $p[1] ?></h4>
<p style="font-size:.78rem;color:var(--ink-40);line-height:1.6"><?= $p[2] ?></p>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
</section>


<div class="wave-divider" style="background:var(--white)">
<svg viewBox="0 0 1440 60" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<path d="M0,30 C360,60 1080,0 1440,30 L1440,60 L0,60 Z" fill="#FDF5FF"/>
</svg>
</div>


<section id="services" class="s s-parchment">
<div class="wrap">

<div style="display:flex;justify-content:center;margin-bottom:8px">
<svg width="320" height="80" viewBox="0 0 320 80" xmlns="http://www.w3.org/2000/svg" class="rv">

<ellipse cx="160" cy="48" rx="110" ry="28" fill="none" stroke="rgba(123,45,139,.12)" stroke-width="1.5"/>
<circle cx="90" cy="44" r="12" fill="rgba(240,160,48,.15)" stroke="rgba(240,160,48,.4)" stroke-width="1.5"/>
<circle cx="128" cy="36" r="10" fill="rgba(123,45,139,.12)" stroke="rgba(123,45,139,.35)" stroke-width="1.5"/>
<circle cx="168" cy="32" r="14" fill="rgba(90,173,60,.12)" stroke="rgba(90,173,60,.35)" stroke-width="1.5"/>
<circle cx="210" cy="38" r="11" fill="rgba(45,124,192,.12)" stroke="rgba(45,124,192,.35)" stroke-width="1.5"/>
<circle cx="244" cy="48" r="9" fill="rgba(240,160,48,.15)" stroke="rgba(240,160,48,.4)" stroke-width="1.5"/>

<line x1="160" y1="5" x2="160" y2="32" stroke="rgba(123,45,139,.3)" stroke-width="2" stroke-linecap="round"/>
<path d="M154,5 Q160,2 166,5 L162,18 Q160,20 158,18 Z" fill="rgba(240,160,48,.5)"/>
<text x="160" y="74" text-anchor="middle" font-family="'Space Mono',monospace" font-size="9" fill="rgba(123,45,139,.4)" letter-spacing="3">? SERVICES ?</text>
</svg>
</div>
<div class="kicker kicker-c rv">Ce que nous offrons</div>
<h2 class="h2 h2-c rv d1">Nos <em>services</em></h2>
<p class="lead">Art'hum est incubateur artistique, espace communautaire et laboratoire d'innovation sociale.</p>
<div class="stabs rv">
<button class="stab on" onclick="switchTab('artistes',this)">? Aux artistes</button>
<button class="stab" onclick="switchTab('communautes',this)">?? Aux communautés</button>
<button class="stab" onclick="switchTab('ecoles',this)">? Aux écoles & bibliothèques</button>
</div>


<div id="tab-artistes" class="stab-pane on sg">
<?php
$svc_icons = ['?','?','?','?','?','?','??','?','?'];
$svc_colors = ['','o','g','b','','o','g','b',''];
$svc_tag = ['v','o','g','b','v','o','g','b','v'];
if (!empty($services)):
foreach($services as $i => $srv):
$title = col($srv,'title');
$desc = col($srv,'description');
$cat = col($srv,'category');
// icon_class est une classe FA (ex: "fas fa-handshake") — on peut l'utiliser ou fallback emoji
$icon_class = col($srv,'icon_class');
$emoji = $svc_icons[$i % 9];
?>
<div class="scard rv d<?= ($i%3)+1 ?>">
<div class="scard-ico <?= $svc_colors[$i%9] ?>">
<?php if($icon_class): ?>
<i class="<?= htmlspecialchars($icon_class) ?>"></i>
<?php else: ?>
<?= $emoji ?>
<?php endif; ?>
</div>
<h3><?= htmlspecialchars($title ?: 'Service') ?></h3>
<p><?= htmlspecialchars(mb_substr($desc,0,140)) ?><?= mb_strlen($desc)>140?'...':'' ?></p>
<?php if($cat): ?><span class="stag stag-<?= $svc_tag[$i%9] ?>"><?= htmlspecialchars($cat) ?></span><?php endif; ?>
</div>
<?php endforeach;
else: // Fallback ?>
<div class="scard rv d1"><div class="scard-ico">?</div><h3>Accompagnement personnalisé</h3><p>Soutien individualisé, gestion de projets artistiques, mentorat socio-professionnel et développement de carrière.</p><span class="stag stag-v">Individuel</span></div>
<div class="scard rv d2"><div class="scard-ico o">?</div><h3>Formations professionnelles</h3><p>Démarche artistique, mise en marché, export, communication, acquisition de nouvelles techniques artistiques.</p><span class="stag stag-o">Certification</span></div>
<div class="scard rv d3"><div class="scard-ico g">?</div><h3>Communication & promotion</h3><p>Design graphique, image de marque, kit promotionnel, vidéo institutionnelle, émissions live sur Art'hum TV.</p><span class="stag stag-g">Médias</span></div>
<div class="scard rv d1"><div class="scard-ico b">?</div><h3>Diffusion internationale</h3><p>Réseau de salons (France, Bénin, Côte d'Ivoire, Maroc), festivals, expositions et tournées à l'étranger.</p><span class="stag stag-b">Export</span></div>
<div class="scard rv d2"><div class="scard-ico">?</div><h3>Microcrédit artistique</h3><p>Soutien financier sur dossier. Accompagnement à la rédaction de demandes de subvention.</p><span class="stag stag-v">Financement</span></div>
<div class="scard rv d3"><div class="scard-ico o">?</div><h3>Résidences artistiques</h3><p>Résidences internationales au Bénin, France, Maroc et Canada. Création en immersion culturelle.</p><span class="stag stag-o">Résidence</span></div>
<?php endif; ?>
</div>

<div id="tab-communautes" class="stab-pane sg">
<div class="scard rv d1"><div class="scard-ico">?</div><h3>Programmation culturelle saisonnière</h3><p>Expositions, débats, projections, spectacles et événements en présentiel et virtuel tout au long de l'année.</p><span class="stag stag-v">Événements</span></div>
<div class="scard rv d2"><div class="scard-ico o">?</div><h3>Spectacles & animations</h3><p>Créations artistiques thématiques pour enfants, familles et communautés avec participation active du public.</p><span class="stag stag-o">Communauté</span></div>
<div class="scard rv d3"><div class="scard-ico g">??</div><h3>Programmes municipaux</h3><p>Services de production thématique dans les parcs, maisons de la culture et espaces publics de la ville.</p><span class="stag stag-g">Institutions</span></div>
<div class="scard rv d1"><div class="scard-ico b">?</div><h3>Mentorat socio-artistique</h3><p>Accompagnement personnalisé pour la relève et les jeunes dans leur parcours artistique et professionnel.</p><span class="stag stag-b">Jeunesse</span></div>
<div class="scard rv d2"><div class="scard-ico">?</div><h3>Recherche sémiotique</h3><p>Art'hum est un centre de recherche en sémiotique des arts et de la culture ouvert aux collaborations académiques.</p><span class="stag stag-v">Recherche</span></div>
<div class="scard rv d3"><div class="scard-ico o">?</div><h3>Incubateur intersectionnel</h3><p>Accompagnement de projets portés par des jeunes à la croisée de l'art, du social et du civique.</p><span class="stag stag-o">Innovation</span></div>
</div>

<div id="tab-ecoles" class="stab-pane sg">
<div class="scard rv d1"><div class="scard-ico">?</div><h3>Classes PÉDAGO-ART & CULTURE</h3><p>Programmes artistiques en milieu scolaire : architecture, cinéma, danse, design, littérature, patrimoine, photographie, théâtre.</p><span class="stag stag-v">Primaire & Secondaire</span></div>
<div class="scard rv d2"><div class="scard-ico o">?</div><h3>Ateliers en bibliothèques</h3><p>Animation d'ateliers créatifs et interculturels pour tous les publics. Accès universel à la culture et à l'éducation.</p><span class="stag stag-o">Bibliothèques</span></div>
<div class="scard rv d3"><div class="scard-ico g">?</div><h3>Formation des formateurs</h3><p>Certification en ludopédagogie artistique pour enseignants et intervenants communautaires engagés.</p><span class="stag stag-g">Formation</span></div>
</div>
</div>
</section>


<section id="programmes" class="s s-white">
<div class="wrap">
<div class="kicker kicker-c rv">Programmes phares</div>
<h2 class="h2 h2-c rv d1">Nos initiatives <em>structurantes</em></h2>
<p class="lead">Trois programmes d'envergure qui font la signature d'Art'hum : un label certifiant, un observatoire et un rayonnement international grandissant.</p>
<div class="prog-grid">
<div class="pc pc-aped rv d1" id="aped">
<div class="pc-badge" style="color:rgba(144,230,130,.7);border-color:rgba(144,230,130,.2)">?? Label certifiant · Actif</div>
<h3>Label <em>APÉD</em></h3>
<p>Artistes pour une Éducation Durable. Certification internationale reconnaissant les artistes engagés dans les enjeux éducatifs contemporains.</p>
<div class="pc-feats">
<div class="pc-feat"><i class="fas fa-check-circle"></i> Certification en ludopédagogie artistique</div>
<div class="pc-feat"><i class="fas fa-check-circle"></i> Résidences au Canada, France & Bénin</div>
<div class="pc-feat"><i class="fas fa-check-circle"></i> <?= $apedCount ?>+ artistes labellisés actifs</div>
<div class="pc-feat"><i class="fas fa-check-circle"></i> Expositions et ventes dans 3 pays</div>
</div>
<a href="/adhesion.php" class="pc-link">Rejoindre le label APÉD <i class="fas fa-arrow-right"></i></a>
</div>
<div class="pc pc-ocve rv d2" id="ocve-prog">
<div class="pc-badge" style="color:rgba(180,150,255,.65);border-color:rgba(180,150,255,.2)">? Observatoire · En action</div>
<h3>OCVE — <em>Vivre Ensemble</em></h3>
<p>L'Observatoire Canadien du Vivre Ensemble — cadre structuré pour le dialogue interculturel, la lutte contre le racisme et la gouvernance inclusive.</p>
<div class="pc-feats">
<div class="pc-feat"><i class="fas fa-check-circle"></i> La Fabrique du Vivre-Ensemble (jeunesse)</div>
<div class="pc-feat"><i class="fas fa-check-circle"></i> PABE — Résilience & santé psychosociale</div>
<div class="pc-feat"><i class="fas fa-check-circle"></i> OCVE 2.0 — Gouvernance & IA éthique</div>
<div class="pc-feat"><i class="fas fa-check-circle"></i> Cartographie anti-haine interactive</div>
</div>
<a href="/ocve.php" class="pc-link" style="color:rgba(180,150,255,.5);border-bottom-color:rgba(180,150,255,.25)">Explorer l'OCVE <i class="fas fa-arrow-right"></i></a>
</div>
<div class="pc pc-intl rv" id="international">
<div class="intl-inner">
<div>
<div class="pc-badge" style="color:rgba(255,200,80,.65);border-color:rgba(255,200,80,.2)">? Rayonnement · 4 pays</div>
<h3>Présence <em>internationale</em></h3>
<p>D'un organisme montréalais, Art'hum est devenu un acteur de rayonnement international. Festivals, résidences, expositions et partenariats stratégiques.</p>
<div class="pc-feats">
<div class="pc-feat"><i class="fas fa-check-circle"></i> Centre Culturel Canadien au Bénin</div>
<div class="pc-feat"><i class="fas fa-check-circle"></i> Patrimoine Mosaïque Maroc 2025</div>
<div class="pc-feat"><i class="fas fa-check-circle"></i> Festivals off et tournées en France</div>
<div class="pc-feat"><i class="fas fa-check-circle"></i> Partenariat Université Hassan II · Casablanca</div>
</div>
<a href="#contact" class="pc-link" style="color:rgba(255,200,80,.5);border-bottom-color:rgba(255,200,80,.22)">Devenir partenaire <i class="fas fa-arrow-right"></i></a>
</div>
<div class="country-chips">
<div class="cchip"><span class="fl">??</span><h5>Canada</h5><p>Siège social Montréal</p></div>
<div class="cchip"><span class="fl">??</span><h5>Bénin</h5><p>Centre Culturel Canadien</p></div>
<div class="cchip"><span class="fl">??</span><h5>France</h5><p>Résidences & festivals</p></div>
<div class="cchip"><span class="fl">??</span><h5>Maroc</h5><p>Patrimoine Mosaïque</p></div>
<div class="cchip"><span class="fl">??</span><h5>Côte d'Ivoire</h5><p>Salons & expositions</p></div>
<div class="cchip" style="border-style:dashed;border-color:rgba(255,200,80,.22);background:rgba(255,200,80,.04)"><span class="fl">?</span><h5>En cours</h5><p>Nouveau partenariat</p></div>
</div>
</div>
</div>
</div>
</div>
</section>


<section id="evenements" class="s s-parchment">
<div class="wrap">

<div style="display:flex;justify-content:center;margin-bottom:8px">
<svg width="280" height="64" viewBox="0 0 280 64" xmlns="http://www.w3.org/2000/svg" class="rv">

<line x1="20" y1="32" x2="260" y2="32" stroke="rgba(240,160,48,.2)" stroke-width="1.5" stroke-dasharray="4,6"/>
<?php foreach([['40','20','rgba(240,160,48,.25)','rgba(240,160,48,.7)'],['100','28','rgba(123,45,139,.2)','rgba(169,78,187,.6)'],['160','22','rgba(90,173,60,.2)','rgba(90,173,60,.6)'],['220','26','rgba(45,124,192,.2)','rgba(45,124,192,.6)']] as $p): ?>
<circle cx="<?= $p[0] ?>" cy="32" r="<?= $p[1] ?>" fill="<?= $p[2] ?>" stroke="<?= $p[3] ?>" stroke-width="1.5"/>
<circle cx="<?= $p[0] ?>" cy="32" r="4" fill="<?= $p[3] ?>"/>
<?php endforeach; ?>
<text x="140" y="58" text-anchor="middle" font-family="'Space Mono',monospace" font-size="8" fill="rgba(240,160,48,.5)" letter-spacing="3">? AGENDA ?</text>
</svg>
</div>
<div class="kicker kicker-c kicker-o rv">Agenda</div>
<h2 class="h2 h2-c rv d1">Prochains <em style="color:var(--orange-dk)">événements</em></h2>
<p class="lead">Concerts, ateliers, résidences et festivals — rejoignez la communauté Art'hum en personne ou en ligne.</p>
<div class="events-grid">
<?php
$ev_gradients = [
'var(--violet-dk),var(--violet-lt)',
'var(--orange-dk),var(--orange-lt)',
'var(--green-dk),var(--green-lt)',
'var(--blue),var(--blue-lt)',
];
$ev_icons = ['?','?','?','?'];
$ev_tags = ['stag-v','stag-o','stag-g','stag-b'];
if (!empty($events)):
foreach($events as $i => $ev):
// Colonnes réelles : title, description, event_type, start_date, location, is_virtual
$ev_title = col($ev,'title');
$ev_desc = col($ev,'description');
$ev_loc = col($ev,'location');
$ev_date = col($ev,'start_date');
$ev_type = col($ev,'event_type');
$evday = $ev_date ? date('d',strtotime($ev_date)) : '—';
$evmonth = $ev_date ? strtoupper(date('M',strtotime($ev_date))) : '';
$virtual_badge = (!empty($ev['is_virtual']) && $ev['is_virtual']) ? ' · En ligne' : '';
?>
<div class="ev-card rv d<?= ($i%4)+1 ?>">
<div class="ev-head" style="background:linear-gradient(135deg,<?= $ev_gradients[$i%4] ?>)">
<?= $ev_icons[$i%4] ?>
<?php if($ev_date): ?>
<div class="ev-date"><div class="ev-day"><?= $evday ?></div><div class="ev-month"><?= $evmonth ?></div></div>
<?php endif; ?>
</div>
<div class="ev-body">
<h4><?= htmlspecialchars($ev_title ?: 'Événement') ?></h4>
<p><?= htmlspecialchars(mb_substr($ev_desc,0,100)) ?><?= mb_strlen($ev_desc)>100?'...':'' ?></p>
<?php if($ev_loc || $ev_type): ?>
<span class="stag <?= $ev_tags[$i%4] ?>"><?= htmlspecialchars($ev_loc ?: $ev_type) ?><?= $virtual_badge ?></span>
<?php endif; ?>
</div>
</div>
<?php endforeach;
else: $fb_ev=[['?','Gala Art\'hum 2025','Soirée annuelle de célébration artistique et remise du Label APÉD.','07','JUIN','Montréal'],['?','Exposition Mosaïque','Patrimoine Mosaïque — 15 artistes du Canada, Bénin, Maroc et France.','14','JUIN','Casablanca'],['?','Résidence Bénin','Résidence internationale — artistes en immersion culturelle au Centre Culturel.','01','SEPT','Cotonou'],['?','Festival off Paris','Tournée d\'artistes certifiés APÉD dans les festivals off de France.','22','AOÛT','Paris']];
foreach($fb_ev as $i => $ev): ?>
<div class="ev-card rv d<?= $i+1 ?>">
<div class="ev-head" style="background:linear-gradient(135deg,<?= $ev_gradients[$i] ?>)">
<?= $ev[0] ?>
<div class="ev-date"><div class="ev-day"><?= $ev[3] ?></div><div class="ev-month"><?= $ev[4] ?></div></div>
</div>
<div class="ev-body">
<h4><?= $ev[1] ?></h4><p><?= $ev[2] ?></p>
<span class="stag <?= $ev_tags[$i] ?>"><?= $ev[5] ?></span>
</div>
</div>
<?php endforeach; endif; ?>
</div>
<div class="more-wrap"><a href="/evenements.php" class="btn-more"><i class="fas fa-calendar"></i> Voir tous les événements</a></div>
</div>
</section>


<section id="articles" class="s s-white">
<div class="wrap">
<div class="kicker kicker-c rv">Actualités</div>
<h2 class="h2 h2-c rv d1">Les nouvelles de notre <em>communauté</em></h2>
<p class="lead">Articles, reportages, réflexions — restez connecté à la vie d'Art'hum et aux enjeux de l'art interculturel.</p>
<div class="articles-grid">
<?php
$art_icons = ['?','?','?'];
$art_gradients= ['var(--violet-dk),var(--orange-dk)','var(--green-dk),var(--blue)','var(--orange-dk),var(--violet-lt)'];
if (!empty($articles)):
foreach($articles as $i => $art):
// Colonnes réelles : title, slug, content, excerpt, category, is_published, published_at, author_id
$art_title = col($art,'title');
$art_desc = col($art,'excerpt','content'); // excerpt en priorité
$art_cat = col($art,'category');
$art_date = col($art,'published_at','created_at');
$art_slug = col($art,'slug');
?>
<div class="art-card rv d<?= $i+1 ?>">
<div class="art-head" style="background:linear-gradient(135deg,<?= $art_gradients[$i%3] ?>)"><?= $art_icons[$i%3] ?></div>
<div class="art-body">
<div class="art-meta">
<span class="art-tag"><?= htmlspecialchars($art_cat ?: 'Actualité') ?></span>
<span class="art-date"><?= $art_date ? date('d M Y',strtotime($art_date)) : date('d M Y') ?></span>
</div>
<h3><?= htmlspecialchars($art_title ?: 'Article') ?></h3>
<p><?= htmlspecialchars(mb_substr(strip_tags($art_desc),0,120)) ?><?= mb_strlen(strip_tags($art_desc))>120?'...':'' ?></p>
<a href="/articles.php?<?= $art_slug ? 'slug='.urlencode($art_slug) : 'id='.(int)$art['id'] ?>" class="art-link">Lire l'article <i class="fas fa-arrow-right"></i></a>
</div>
</div>
<?php endforeach;
else: $fb_arts=[['L\'art interculturel comme pont','Décryptage de la dynamique interculturelle montréalaise à travers l\'art contemporain.','Violet & Or'],['Les 32 artistes certifiés APÉD 2025','Après une sélection rigoureuse, Art\'hum annonce la nouvelle promotion de son label phare.','Actualité APÉD'],['Patrimoine Mosaïque Maroc : retour','Une édition exceptionnelle réunissant artistes canadiens, marocains et africains.','International']];
foreach($fb_arts as $i => $art): ?>
<div class="art-card rv d<?= $i+1 ?>">
<div class="art-head" style="background:linear-gradient(135deg,<?= $art_gradients[$i] ?>)"><?= $art_icons[$i] ?></div>
<div class="art-body">
<div class="art-meta"><span class="art-tag"><?= $art[2] ?></span><span class="art-date"><?= date('d M Y') ?></span></div>
<h3><?= $art[0] ?></h3><p><?= $art[1] ?></p>
<a href="/articles.php" class="art-link">Lire l'article <i class="fas fa-arrow-right"></i></a>
</div>
</div>
<?php endforeach; endif; ?>
</div>
<div class="more-wrap"><a href="/articles.php" class="btn-more"><i class="fas fa-newspaper"></i> Voir toutes les actualités</a></div>
</div>
</section>


<section id="forum" class="s forum-section">
<div class="wrap">
<div class="forum-inner">
<div class="forum-promo rv">
<div class="kicker kicker-g">Forum communautaire</div>
<h2 class="h2">Rejoignez<br>nos <em style="color:var(--violet)">conversations</em></h2>
<p style="font-size:.9rem;color:var(--ink-40);line-height:1.85;margin:18px 0 28px;max-width:380px">Le forum Art'hum est un espace de dialogue, de partage et d'entraide pour tous nos membres — artistes, éducateurs, partenaires et passionnés de culture.</p>
<div class="forum-feats">
<div class="ff-item"><i class="fas fa-comments"></i> Discussions thématiques par programme</div>
<div class="ff-item"><i class="fas fa-handshake"></i> Mise en réseau et collaborations</div>
<div class="ff-item"><i class="fas fa-lightbulb"></i> Partage de ressources et bonnes pratiques</div>
<div class="ff-item"><i class="fas fa-globe"></i> Communautés locales et internationales</div>
</div>
<a href="/forum.php" class="forum-cta-btn"><i class="fas fa-comments"></i> Accéder au forum</a>
<?php if (!isset($_SESSION['user_id'])): ?>
<p style="margin-top:12px;font-size:.76rem;color:var(--ink-40)"><i class="fas fa-lock" style="color:var(--violet)"></i> Connexion requise · <a href="/adhesion.php" style="color:var(--violet);font-weight:700;text-decoration:underline">Devenir membre</a></p>
<?php endif; ?>
</div>
<div class="rv d2">
<div class="forum-preview">
<div class="forum-thread"><div class="ft-av v">A</div><div class="ft-content"><div class="ft-title">Appel à candidatures — Résidence Bénin 2025</div><div class="ft-meta">Par <span>Admin Art'hum</span> · Label APÉD · il y a 2h</div></div><div class="ft-right"><div class="ft-count"><i class="fas fa-eye"></i> 142</div><span class="ft-new">Nouveau</span></div></div>
<div class="forum-thread"><div class="ft-av o">S</div><div class="ft-content"><div class="ft-title">Retour sur Patrimoine Mosaïque Maroc</div><div class="ft-meta">Par <span>Sanaa M.</span> · International · il y a 1j</div></div><div class="ft-right"><div class="ft-count"><i class="fas fa-comment"></i> 24</div></div></div>
<div class="forum-thread"><div class="ft-av g">J</div><div class="ft-content"><div class="ft-title">Stratégies de financement pour artistes</div><div class="ft-meta">Par <span>Julie L.</span> · Artistes · il y a 3j</div></div><div class="ft-right"><div class="ft-count"><i class="fas fa-comment"></i> 18</div></div></div>
<div class="forum-thread"><div class="ft-av v">T</div><div class="ft-content"><div class="ft-title">OCVE 2.0 — IA éthique : vos questions</div><div class="ft-meta">Par <span>Thomas K.</span> · OCVE · il y a 5j</div></div><div class="ft-right"><div class="ft-count"><i class="fas fa-comment"></i> 31</div><span class="ft-new">Chaud</span></div></div>
<div class="forum-thread" style="border-style:dashed;justify-content:center;cursor:pointer" onclick="window.location='/forum.php'"><span style="font-family:var(--ff-head);font-size:.83rem;font-weight:700;color:var(--violet);display:flex;align-items:center;gap:8px"><i class="fas fa-plus-circle"></i> Voir toutes les discussions</span></div>
</div>
</div>
</div>
</div>
</section>


<section id="ocve" class="s s-violet">
<div class="wrap">

<div style="display:flex;justify-content:center;margin-bottom:24px">
<svg width="200" height="60" viewBox="0 0 200 60" xmlns="http://www.w3.org/2000/svg" class="rv">

<circle cx="70" cy="30" r="22" fill="none" stroke="rgba(169,78,187,.35)" stroke-width="1.5"/>
<circle cx="100" cy="30" r="22" fill="none" stroke="rgba(240,160,48,.3)" stroke-width="1.5"/>
<circle cx="130" cy="30" r="22" fill="none" stroke="rgba(90,173,60,.3)" stroke-width="1.5"/>

<path d="M85,18 Q100,10 115,18 Q108,30 100,34 Q92,30 85,18Z" fill="rgba(255,255,255,.05)" stroke="rgba(255,255,255,.1)" stroke-width="1"/>
<circle cx="100" cy="30" r="5" fill="rgba(255,255,255,.25)"/>
</svg>
</div>
<div class="kicker kicker-c kicker-o rv" style="color:var(--orange)">Observatoire national</div>
<h2 class="h2 h2-c h2-light rv d1" style="color:#fff">OCVE — <em>Vivre Ensemble</em></h2>
<p class="lead lead-dark">Un cadre fondé sur la recherche-action pour construire des sociétés plus inclusives, plus résilientes et profondément humaines.</p>
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:18px">
<?php
$ocve_items = [
['01','Jeunesse & engagement','??','La Fabrique du Vivre-Ensemble','Formation d\'ambassadeurs du vivre-ensemble. Incubateur de projets communautaires intersectionnels portés par des jeunes.'],
['02','Bien-être & résilience','?','PABE — Penser & Agir pour le Bien-Être','Résilience, santé psychosociale et dignité partagée. Ateliers de guérison sociale et espaces de parole sécurisés.'],
['03','Numérique & gouvernance','?','OCVE 2.0 — Gouvernance & IA éthique','Gouvernance partagée, intelligence collective, veille numérique éthique et cartographie anti-haine interactive.'],
];
foreach($ocve_items as $i => $item): ?>
<div class="rv d<?= $i+1 ?>" style="background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:30px 24px;position:relative;overflow:hidden;transition:all .32s var(--r)"
onmouseover="this.style.background='rgba(123,45,139,.15)';this.style.borderColor='rgba(169,78,187,.3)';this.style.transform='translateY(-6px)'"
onmouseout="this.style.background='';this.style.borderColor='';this.style.transform=''">
<div style="position:absolute;top:-14px;right:14px;font-family:var(--ff-head);font-size:7rem;font-weight:800;color:rgba(255,255,255,.025);line-height:1"><?= $item[0] ?></div>
<div style="font-family:var(--ff-mono);font-size:.58rem;color:var(--orange);letter-spacing:.12em;text-transform:uppercase;margin-bottom:9px">Axe <?= $item[0] ?> · <?= $item[1] ?></div>
<div style="font-size:1.9rem;margin-bottom:14px"><?= $item[2] ?></div>
<h3 style="font-family:var(--ff-head);font-size:1.08rem;color:#fff;font-weight:700;margin-bottom:9px"><?= $item[3] ?></h3>
<p style="font-size:.78rem;color:rgba(255,255,255,.4);line-height:1.65"><?= $item[4] ?></p>
</div>
<?php endforeach; ?>
</div>
<div class="more-wrap"><a href="/ocve.php" class="btn-more btn-more-inv"><i class="fas fa-arrow-right"></i> Découvrir l'Observatoire OCVE</a></div>
</div>
</section>


<section class="s s-white">
<div class="wrap">
<div class="kicker kicker-c rv">Communauté</div>
<h2 class="h2 h2-c rv d1">Nos <em>membres</em></h2>
<p class="lead">Des artistes, éducateurs, chercheurs et passionnés — une communauté vivante et internationale.</p>
<div class="members-grid">
<?php
$mem_gradients = [
'linear-gradient(135deg,var(--violet),var(--violet-lt))',
'linear-gradient(135deg,var(--orange-dk),var(--orange-lt))',
'linear-gradient(135deg,var(--green-dk),var(--green-lt))',
'linear-gradient(135deg,var(--blue),var(--blue-lt))',
'linear-gradient(135deg,var(--violet-lt),var(--orange))',
'linear-gradient(135deg,var(--green),var(--blue))',
];
$mem_tags = ['stag-v','stag-o','stag-g','stag-b','stag-v','stag-o'];
if (!empty($members)):
foreach($members as $i => $mem):
// Colonnes réelles : firstname, lastname, member_type, country, artistic_discipline
$first = col($mem,'firstname');
$last = col($mem,'lastname');
$type = col($mem,'artistic_discipline','member_type');
$country = col($mem,'country');
$label_aped = !empty($mem['label_aped']);
$initials = strtoupper(mb_substr($first,0,1).mb_substr($last,0,1));
if (!$initials) $initials = '??';
?>
<div class="mem-card rv d<?= ($i%6)+1 ?>">
<div class="mem-av" style="background:<?= $mem_gradients[$i%6] ?>"><?= htmlspecialchars($initials) ?></div>
<div class="mem-name"><?= htmlspecialchars(trim("$first $last") ?: 'Membre') ?></div>
<div class="mem-type"><?= htmlspecialchars(mb_substr($type,0,28) ?: 'Membre') ?></div>
<?php if($country): ?><span class="mem-badge <?= $mem_tags[$i%6] ?>"><?= htmlspecialchars($country) ?></span><?php endif; ?>
<?php if($label_aped): ?><span class="mem-badge stag-g" style="display:block;margin-top:4px">?? APÉD</span><?php endif; ?>
</div>
<?php endforeach;
else: $fb_m=[['SM','Sanaa Mirchi','Artiste visuelle','Maroc'],['TK','Thomas Konan','Photographe','Côte d\'Ivoire'],['JL','Julie Langevin','Éducatrice','Montréal'],['AB','Arnaud Bah','Musicien','Bénin'],['MC','Marie Côté','Directrice','Montréal'],['KN','Koffi N\'Guessan','Peintre','France']];
foreach($fb_m as $i => $m): ?>
<div class="mem-card rv d<?= $i+1 ?>">
<div class="mem-av" style="background:<?= $mem_gradients[$i] ?>"><?= $m[0] ?></div>
<div class="mem-name"><?= $m[1] ?></div>
<div class="mem-type"><?= $m[2] ?></div>
<span class="mem-badge <?= $mem_tags[$i] ?>"><?= $m[3] ?></span>
</div>
<?php endforeach; endif; ?>
</div>
<div class="more-wrap"><a href="/membres.php" class="btn-more"><i class="fas fa-users"></i> Voir tous les membres</a></div>
</div>
</section>


<section class="s s-violet">
<div class="wrap">
<div class="aped-2col">
<div class="rv">
<div class="kicker" style="color:var(--orange)">Label APÉD</div>
<h2 class="h2 h2-light" style="color:#fff">Artistes pour<br>une <em>Éducation Durable</em></h2>
<p style="font-size:.9rem;color:rgba(255,255,255,.45);line-height:1.88;margin:18px 0 24px;max-width:420px">Le Label APÉD reconnaît et certifie les artistes qui intègrent une démarche pédagogique durable dans leur pratique. Résidences, expositions, ventes et formation — un écosystème complet sur 3 pays.</p>
<div class="aped-stat">
<div class="aped-n"><?= $apedCount ?>+</div>
<div class="aped-l">Artistes certifiés<br>Canada, France & Bénin</div>
</div>
<?php if(!empty($aped)): ?>
<div style="margin-bottom:22px">
<?php foreach(array_slice($aped,0,3) as $i => $ap):
// JOIN result : firstname, lastname depuis members
$ap_first = col($ap,'firstname');
$ap_ini = strtoupper(mb_substr($ap_first,0,1));
?>
<span style="display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:<?= ['var(--orange)','var(--green)','var(--violet-lt)'][$i%3] ?>;color:#fff;font-family:var(--ff-head);font-weight:800;font-size:.88rem;margin-right:-8px;border:2px solid var(--violet-dk)"><?= $ap_ini ?: 'A' ?></span>
<?php endforeach; ?>
<span style="font-size:.78rem;color:rgba(255,255,255,.4);margin-left:16px">et <?= max(0,$apedCount-3) ?>+ autres artistes</span>
</div>
<?php endif; ?>
<a href="/adhesion.php" class="btn-primary"><i class="fas fa-tag"></i> Rejoindre le label</a>
</div>
<div class="aped-grid rv d2">
<div class="aped-c"><div class="aped-c-ico">?</div><h4>Formation certifiante</h4><p>Ludopédagogie artistique — certification reconnue dans 3 pays</p></div>
<div class="aped-c"><div class="aped-c-ico">?</div><h4>Résidences internationales</h4><p>Bénin, France, Canada — création en immersion profonde</p></div>
<div class="aped-c"><div class="aped-c-ico">??</div><h4>Expositions & ventes</h4><p>Vitrine dans 3 pays — accès aux marchés artistiques internationaux</p></div>
<div class="aped-c"><div class="aped-c-ico">?</div><h4>Réseau professionnel</h4><p>Communauté d'artistes engagés et partenaires institutionnels</p></div>
</div>
</div>
</div>
</section>


<section class="s s-parchment">
<div class="wrap">
<div class="kicker kicker-c rv">Ce qu'ils en disent</div>
<h2 class="h2 h2-c rv d1">Voix de notre <em>communauté</em></h2>
<p class="lead">Artistes, participants, partenaires — ce que l'expérience Art'hum change vraiment.</p>
<div class="temo-grid">
<?php
$temos = [
['SM','Sanaa Mirchi','Artiste visuelle, Maroc · Labellisée APÉD 2023','Le Label APÉD a changé ma façon de percevoir mon travail. J\'ai compris que mon art pouvait véritablement transformer des vies — pas seulement émouvoir.','var(--violet),var(--violet-lt)'],
['JL','Julie Langevin','Directrice d\'école, Montréal','Grâce aux ateliers Art\'hum, nos élèves ont développé une confiance en eux et une ouverture à l\'autre que nous n\'avions jamais vue auparavant.','var(--orange-dk),var(--orange-lt)'],
['TK','Thomas Konan','Photographe, Côte d\'Ivoire · Résident 2024','La résidence au Bénin a été la plus grande expérience artistique de ma vie. Art\'hum m\'a ouvert des portes que je ne savais même pas qu\'elles existaient.','var(--green-dk),var(--green-lt)'],
];
foreach($temos as $i => $t): ?>
<div class="temo-c rv d<?= $i+1 ?>">
<div class="temo-stars"><?php for($s=0;$s<5;$s++) echo '<span class="star">?</span>'; ?></div>
<p class="temo-txt">« <?= $t[3] ?> »</p>
<div class="temo-author">
<div class="temo-av" style="background:linear-gradient(135deg,<?= $t[4] ?>)"><?= $t[0] ?></div>
<div>
<div class="temo-name"><?= $t[1] ?></div>
<div class="temo-role"><?= $t[2] ?></div>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</section>


<div class="cta-band rv">
<div class="cta-orb cta-o1"></div>
<div class="cta-orb cta-o2"></div>
<h2>Rejoignez le mouvement Art'hum</h2>
<p>Artiste, éducateur·trice, organisme communautaire ou passionné·e de culture ? Inscrivez-vous à notre infolettre et devenez membre.</p>
<div class="newsletter-form">
<input type="email" placeholder="Votre adresse courriel" aria-label="Adresse courriel" id="nl-email">
<button class="btn-cta-w" onclick="subscribeNewsletter(this)">
<i class="fas fa-paper-plane"></i> S'inscrire
</button>
</div>
<div class="cta-links">
<a href="/adhesion.php" class="cta-link"><i class="fas fa-heart"></i> Adhérer maintenant</a>
<a href="/forum.php" class="cta-link"><i class="fas fa-comments"></i> Rejoindre le forum</a>
<a href="#contact" class="cta-link"><i class="fas fa-envelope"></i> Nous contacter</a>
</div>
</div>


<footer class="footer" id="contact">
<div class="ft-grid">
<div class="ft-brand rv">
<img src="arthum-logo.png" alt="Art'hum" onerror="this.style.display='none'">
<p style="font-family:var(--ff-head);font-size:1.3rem;font-weight:800;color:rgba(255,255,255,.85);margin-bottom:12px">Art'hum</p>
<p class="ft-desc">Organisme communautaire canadien fondé en 2008. L'art et la culture au service du développement humain et du vivre-ensemble harmonieux.</p>
<div class="ft-tagline">« Là où la créativité rencontre l'humanité. »</div>
<div class="ft-social">
<a href="#" class="ft-soc" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="ft-soc" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
<a href="#" class="ft-soc" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
<a href="#" class="ft-soc" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
</div>
</div>
<div class="ft-col rv d1">
<h5>Services</h5>
<a href="#services">Aux artistes</a>
<a href="#services">Aux communautés</a>
<a href="#services">Aux écoles</a>
<a href="#">Microcrédit artistique</a>
<a href="#">Résidences internationales</a>
</div>
<div class="ft-col rv d2">
<h5>Programmes</h5>
<a href="#aped">Label APÉD</a>
<a href="#ocve">Observatoire OCVE</a>
<a href="#international">Rayonnement international</a>
<a href="#forum">Forum communautaire</a>
<a href="/adhesion.php">Adhérer</a>
</div>
<div class="ft-col rv d3">
<h5>Contact</h5>
<p><i class="fas fa-envelope" style="color:var(--violet-lt);margin-right:8px"></i> info@art-hum.org</p>
<p><i class="fas fa-map-marker-alt" style="color:var(--violet-lt);margin-right:8px"></i> Montréal, Québec, Canada</p>
<a href="/connexion.php">Espace membre</a>
<a href="/admin/">Administration</a>
<a href="/mentions-legales.php">Mentions légales</a>
</div>
</div>
<div class="ft-bottom">
<span>© <?= date('Y') ?> Art'hum · Organisme communautaire canadien à but non lucratif</span>
<span><a href="/sitemap.xml">Plan du site</a> · <a href="/confidentialite.php">Confidentialité</a></span>
<span>Montréal · Bénin · France · Maroc</span>
</div>
</footer>

<script>
const pbar = document.getElementById('pbar');
const nav = document.getElementById('nav');
window.addEventListener('scroll', () => {
const d = document.documentElement;
pbar.style.width = (d.scrollTop/(d.scrollHeight-d.clientHeight)*100)+'%';
nav.classList.toggle('scrolled', window.scrollY > 60);
}, {passive:true});

const io = new IntersectionObserver(entries => {
entries.forEach(e => { if(e.isIntersecting){e.target.classList.add('on');io.unobserve(e.target)} });
}, {threshold:0.06, rootMargin:'0px 0px -28px 0px'});
document.querySelectorAll('.rv').forEach(el => io.observe(el));

function switchTab(name, btn) {
document.querySelectorAll('.stab-pane').forEach(c => c.classList.remove('on'));
document.querySelectorAll('.stab').forEach(b => b.classList.remove('on'));
const pane = document.getElementById('tab-'+name);
if(pane) pane.classList.add('on');
if(btn) btn.classList.add('on');
}
function switchTabAndScroll(name) {
event.preventDefault();
document.querySelector('#services').scrollIntoView({behavior:'smooth'});
setTimeout(() => {
const btn = document.querySelector('.stab[onclick*="'+name+'"]');
switchTab(name, btn);
}, 600);
}

const mobMenu = document.getElementById('mobMenu');
function openMob() { mobMenu.classList.add('open'); document.body.style.overflow='hidden'; }
function closeMob() { mobMenu.classList.remove('open'); document.body.style.overflow=''; }
window.addEventListener('keydown', e => { if(e.key==='Escape') closeMob(); });

function subscribeNewsletter(btn) {
const input = document.getElementById('nl-email');
if(!input||!input.value||!input.value.includes('@')) {
if(input){input.style.borderColor='#ff6b6b';setTimeout(()=>input.style.borderColor='',1500);}
return;
}
btn.innerHTML='<i class="fas fa-check"></i> Merci !';
btn.style.background='var(--green)'; btn.style.color='#fff';
setTimeout(()=>{
btn.innerHTML='<i class="fas fa-paper-plane"></i> S\'inscrire';
btn.style.background=''; btn.style.color=''; input.value='';
},3000);
}
</script>
</body>
</html>
PHPEOF
echo "File written, checking size..."
wc -l /mnt/user-data/outputs/index.php
Sortie
File written, checking size...
1319 /mnt/user-data/outputs/index.php
Terminé

Actualités

Articles récents