{"id":10,"date":"2026-03-21T20:45:56","date_gmt":"2026-03-21T20:45:56","guid":{"rendered":"https:\/\/centre-socio-culturel-berthier.ideapp.top\/?page_id=10"},"modified":"2026-03-21T20:49:08","modified_gmt":"2026-03-21T20:49:08","slug":"home","status":"publish","type":"page","link":"https:\/\/centre-socio-culturel-berthier.ideapp.top\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nCSC P\u00e8re Berthier Tul\u00e9ar \u2014 Centre Socio-Culturel \u00e0 Madagascar<\/title>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Fraunces:ital,wght@0,300;0,600;0,800;1,300;1,600&family=Outfit:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n:root {\r\n --forest: #1a3a2a;\r\n --leaf: #2d6a4f;\r\n --mint: #52b788;\r\n --sand: #f8f3e8;\r\n --clay: #c47c2b;\r\n --terracotta: #d4572a;\r\n --charcoal: #1c1c1c;\r\n --mist: #eaf4ee;\r\n --white: #ffffff;\r\n --text-muted: #6b7c74;\r\n --border: rgba(45,106,79,0.15);\r\n}\r\n\r\n*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }\r\nhtml { scroll-behavior: smooth; }\r\nbody { font-family:'Outfit',sans-serif; background:var(--sand); color:var(--charcoal); overflow-x:hidden; }\r\n\r\n\/* REVEAL *\/\r\n.reveal { opacity:0; transform:translateY(28px); transition:opacity 0.7s ease, transform 0.7s ease; }\r\n.reveal.visible { opacity:1; transform:none; }\r\n.rd1{transition-delay:.1s} .rd2{transition-delay:.2s} .rd3{transition-delay:.3s}\r\n.rd4{transition-delay:.4s} .rd5{transition-delay:.5s} .rd6{transition-delay:.6s}\r\n\r\n@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }\r\n@keyframes fadeDown { from{opacity:0;transform:translateY(-16px)} to{opacity:1;transform:none} }\r\n\r\n\/* PAGE TRANSITION *\/\r\n#app { opacity:1; transition:opacity 0.2s ease; }\r\n#app.fading { opacity:0; }\r\n\r\n\/* NAVBAR *\/\r\nnav {\r\n position:fixed; top:0; left:0; right:0; z-index:999;\r\n display:flex; justify-content:space-between; align-items:center;\r\n padding:1.1rem 5%;\r\n background:rgba(248,243,232,0.95);\r\n backdrop-filter:blur(16px);\r\n border-bottom:1px solid var(--border);\r\n transition:box-shadow 0.3s;\r\n}\r\nnav.scrolled { box-shadow:0 4px 24px rgba(0,0,0,0.08); }\r\n.nav-brand { display:flex; align-items:center; gap:0.7rem; cursor:pointer; text-decoration:none; }\r\n.nav-logo-icon { width:38px; height:38px; background:var(--leaf); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.1rem; }\r\n.nav-brand-text { font-family:'Fraunces',serif; font-size:1.05rem; font-weight:600; color:var(--forest); line-height:1.15; }\r\n.nav-brand-text span { display:block; font-size:0.68rem; font-weight:300; color:var(--text-muted); font-family:'Outfit',sans-serif; letter-spacing:0.08em; }\r\n.nav-links { display:flex; align-items:center; gap:2rem; list-style:none; }\r\n.nav-links a {\r\n text-decoration:none; font-size:0.88rem; font-weight:500;\r\n color:var(--text-muted); transition:color 0.25s; letter-spacing:0.02em; cursor:pointer;\r\n}\r\n.nav-links a:hover, .nav-links a.active { color:var(--leaf); }\r\n.nav-donate { background:var(--terracotta) !important; color:var(--white) !important; padding:0.55rem 1.4rem; border-radius:100px; font-weight:600 !important; }\r\n.nav-donate:hover { background:var(--clay) !important; transform:translateY(-1px); }\r\n.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:4px; }\r\n.hamburger span { display:block; width:22px; height:2px; background:var(--charcoal); transition:0.3s; border-radius:2px; }\r\n\r\n\/* BUTTONS *\/\r\n.btn {\r\n display:inline-flex; align-items:center; gap:0.5rem;\r\n padding:0.9rem 2rem; border-radius:100px; font-size:0.88rem; font-weight:600;\r\n cursor:pointer; transition:all 0.3s; text-decoration:none; border:none; font-family:'Outfit',sans-serif;\r\n}\r\n.btn-primary { background:var(--mint); color:var(--forest); }\r\n.btn-primary:hover { background:var(--white); transform:translateY(-2px); box-shadow:0 8px 24px rgba(82,183,136,0.4); }\r\n.btn-ghost { background:rgba(255,255,255,0.1); color:var(--white); border:1px solid rgba(255,255,255,0.25); }\r\n.btn-ghost:hover { background:rgba(255,255,255,0.2); }\r\n.btn-forest { background:var(--forest); color:var(--white); }\r\n.btn-forest:hover { background:var(--leaf); transform:translateY(-2px); }\r\n\r\n\/* SECTION *\/\r\n.section { padding:6rem 5%; }\r\n.section-alt { background:var(--mist); }\r\n.section-dark { background:var(--forest); }\r\n.section-eyebrow {\r\n display:inline-flex; align-items:center; gap:0.6rem;\r\n font-size:0.75rem; font-weight:700; letter-spacing:0.15em;\r\n text-transform:uppercase; color:var(--leaf); margin-bottom:0.8rem;\r\n}\r\n.section-eyebrow::before { content:''; display:block; width:24px; height:2px; background:var(--mint); border-radius:2px; }\r\n.section-dark .section-eyebrow { color:var(--mint); }\r\n.section-h2 { font-family:'Fraunces',serif; font-size:clamp(2rem,3vw,3rem); font-weight:800; line-height:1.1; color:var(--forest); }\r\n.section-h2 em { font-style:italic; font-weight:300; }\r\n.section-dark .section-h2 { color:var(--white); }\r\n.section-desc { font-size:1rem; line-height:1.8; color:var(--text-muted); max-width:580px; margin-top:0.8rem; }\r\n\r\n\/* HERO *\/\r\n.hero { min-height:100vh; display:grid; grid-template-columns:1fr 1fr; position:relative; overflow:hidden; }\r\n.hero-left { background:var(--forest); display:flex; flex-direction:column; justify-content:center; padding:9rem 5% 7rem; position:relative; overflow:hidden; }\r\n.hero-left::before { content:''; position:absolute; bottom:-80px; right:-80px; width:320px; height:320px; border-radius:50%; background:var(--leaf); opacity:0.15; }\r\n.hero-left::after { content:''; position:absolute; top:100px; left:-60px; width:180px; height:180px; border-radius:50%; background:var(--mint); opacity:0.1; }\r\n.hero-tag { display:inline-flex; align-items:center; gap:0.5rem; background:rgba(82,183,136,0.2); color:var(--mint); font-size:0.72rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; padding:0.4rem 1rem; border-radius:100px; border:1px solid rgba(82,183,136,0.3); margin-bottom:1.8rem; width:fit-content; }\r\n.hero-tag-dot { font-size:0.5rem; animation:pulse 2s infinite; }\r\n.hero h1 { font-family:'Fraunces',serif; font-size:clamp(2.4rem,4vw,4.5rem); font-weight:800; line-height:1.08; color:var(--white); margin-bottom:1.5rem; }\r\n.hero h1 em { font-style:italic; color:var(--mint); font-weight:300; }\r\n.hero-desc { font-size:1rem; line-height:1.8; color:rgba(255,255,255,0.65); max-width:420px; margin-bottom:2.5rem; }\r\n.hero-actions { display:flex; gap:1rem; flex-wrap:wrap; }\r\n.hero-stats { display:flex; gap:2rem; margin-top:3.5rem; padding-top:2rem; border-top:1px solid rgba(255,255,255,0.1); }\r\n.stat-num { font-family:'Fraunces',serif; font-size:2rem; font-weight:800; color:var(--mint); line-height:1; }\r\n.stat-label { font-size:0.75rem; color:rgba(255,255,255,0.5); margin-top:0.3rem; letter-spacing:0.05em; }\r\n.hero-right { position:relative; background:linear-gradient(160deg,#2d6a4f 0%,#1a3a2a 100%); overflow:hidden; }\r\n.hero-img-mosaic { position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:3px; opacity:0.6; }\r\n.mc1{background:linear-gradient(135deg,#3d8b6f,#1a5240)}\r\n.mc2{background:linear-gradient(135deg,#c47c2b,#8a5010)}\r\n.mc3{background:linear-gradient(135deg,#1a5240,#0d2a1e)}\r\n.mc4{background:linear-gradient(135deg,#52b788,#2d6a4f)}\r\n.hero-overlay-card { position:absolute; bottom:3rem; left:50%; transform:translateX(-50%); background:rgba(248,243,232,0.95); backdrop-filter:blur(12px); padding:1.5rem 2rem; border-radius:16px; width:78%; box-shadow:0 20px 60px rgba(0,0,0,0.25); display:flex; align-items:center; gap:1.2rem; }\r\n.oc-icon { width:48px; height:48px; border-radius:12px; background:linear-gradient(135deg,var(--mint),var(--leaf)); display:flex; align-items:center; justify-content:center; font-size:1.4rem; flex-shrink:0; }\r\n.oc-title { font-weight:600; font-size:0.9rem; color:var(--forest); margin-bottom:0.25rem; }\r\n.oc-sub { font-size:0.78rem; color:var(--text-muted); line-height:1.5; }\r\n.oc-badge { margin-left:auto; background:var(--terracotta); color:var(--white); font-size:0.7rem; font-weight:700; padding:0.35rem 0.8rem; border-radius:100px; white-space:nowrap; flex-shrink:0; }\r\n\r\n\/* INTRO STRIP *\/\r\n.intro-strip { background:var(--mist); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:2.5rem 5%; display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }\r\n.intro-strip p { font-size:1.05rem; line-height:1.7; color:var(--forest); max-width:700px; }\r\n.intro-strip p strong { font-weight:600; color:var(--leaf); }\r\n.strip-watermark { font-family:'Fraunces',serif; font-size:2.5rem; font-weight:800; color:var(--forest); opacity:0.06; letter-spacing:-0.02em; white-space:nowrap; }\r\n\r\n\/* ABOUT *\/\r\n.about-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:5rem; align-items:start; }\r\n.big-quote { font-family:'Fraunces',serif; font-size:clamp(1.1rem,2vw,1.4rem); font-style:italic; font-weight:300; color:var(--leaf); line-height:1.6; padding-left:1.5rem; border-left:3px solid var(--mint); margin-bottom:2rem; }\r\n.about-body { font-size:0.95rem; line-height:1.9; color:var(--text-muted); margin-bottom:1rem; }\r\n.founder-card { display:flex; align-items:center; gap:1rem; background:var(--white); border-radius:12px; padding:1.2rem 1.5rem; margin-top:2rem; border:1px solid var(--border); }\r\n.founder-name { font-weight:700; font-size:0.9rem; color:var(--forest); }\r\n.founder-sub { font-size:0.78rem; color:var(--text-muted); line-height:1.5; }\r\n.about-visual { position:relative; }\r\n.about-card-main { background:linear-gradient(135deg,var(--forest) 0%,#0e2018 100%); border-radius:20px; padding:2.5rem; box-shadow:0 24px 64px rgba(0,0,0,0.18); position:relative; overflow:hidden; }\r\n.about-card-main::before { content:'\u271d'; position:absolute; top:-20px; right:20px; font-size:8rem; color:var(--white); opacity:0.04; }\r\n.acm-label { font-size:0.72rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--mint); margin-bottom:0.5rem; }\r\n.acm-date { font-family:'Fraunces',serif; font-size:2.8rem; font-weight:800; color:var(--white); line-height:1; }\r\n.acm-date span { font-size:1rem; font-style:italic; font-weight:300; display:block; color:rgba(255,255,255,0.5); margin-top:0.3rem; }\r\n.acm-sep { height:1px; background:rgba(255,255,255,0.1); margin:1.5rem 0; }\r\n.acm-text { font-size:0.88rem; line-height:1.7; color:rgba(255,255,255,0.6); }\r\n.acm-text strong { color:var(--mint); }\r\n.about-mini-card { position:absolute; bottom:-1.5rem; right:-1.5rem; background:var(--mint); border-radius:14px; padding:1.2rem 1.5rem; box-shadow:0 12px 32px rgba(82,183,136,0.4); text-align:center; }\r\n.amc-num { font-family:'Fraunces',serif; font-size:1.8rem; font-weight:800; color:var(--forest); line-height:1; }\r\n.amc-label { font-size:0.72rem; font-weight:700; color:rgba(26,58,42,0.7); text-transform:uppercase; letter-spacing:0.08em; }\r\n\r\n\/* SERVICES *\/\r\n.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:3.5rem; }\r\n.service-card { background:var(--white); border-radius:16px; padding:2rem; border:1px solid var(--border); transition:transform 0.35s,box-shadow 0.35s; position:relative; overflow:hidden; }\r\n.service-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--leaf),var(--mint)); transform:scaleX(0); transform-origin:left; transition:transform 0.35s; }\r\n.service-card:hover { transform:translateY(-6px); box-shadow:0 16px 48px rgba(45,106,79,0.12); }\r\n.service-card:hover::before { transform:scaleX(1); }\r\n.service-num { font-family:'Fraunces',serif; font-size:3rem; font-weight:800; color:var(--border); line-height:1; margin-bottom:1rem; position:absolute; top:1.5rem; right:1.5rem; }\r\n.service-icon { font-size:2rem; margin-bottom:1rem; }\r\n.service-title { font-weight:700; font-size:1rem; color:var(--forest); margin-bottom:0.6rem; padding-right:3rem; }\r\n.service-title em { font-style:italic; color:var(--leaf); font-family:'Fraunces',serif; }\r\n.service-desc { font-size:0.86rem; line-height:1.7; color:var(--text-muted); }\r\n\r\n\/* MVV *\/\r\n.mvv-grid { display:grid; grid-template-columns:1fr 1fr; gap:0; border-radius:20px; overflow:hidden; border:1px solid var(--border); }\r\n.mvv-panel { padding:3.5rem; position:relative; overflow:hidden; }\r\n.mvv-panel:nth-child(1) { background:var(--forest); border-right:1px solid rgba(255,255,255,0.08); border-bottom:1px solid rgba(255,255,255,0.08); }\r\n.mvv-panel:nth-child(2) { background:var(--leaf); border-bottom:1px solid rgba(255,255,255,0.08); }\r\n.mvv-panel:nth-child(3) { background:var(--mist); grid-column:span 2; border-top:1px solid var(--border); }\r\n.mvv-panel::before { content:''; position:absolute; top:-60px; right:-60px; width:180px; height:180px; border-radius:50%; opacity:0.08; background:var(--mint); }\r\n.mvv-icon { font-size:2.5rem; margin-bottom:1.2rem; }\r\n.mvv-label { font-family:'Fraunces',serif; font-size:1.6rem; font-weight:800; color:var(--white); margin-bottom:0.8rem; }\r\n.mvv-panel:nth-child(3) .mvv-label { color:var(--forest); }\r\n.mvv-text { font-size:0.92rem; line-height:1.8; color:rgba(255,255,255,0.65); }\r\n.mvv-panel:nth-child(3) .mvv-text { color:var(--text-muted); }\r\n.valeurs-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; margin-top:2rem; }\r\n.valeur-chip { background:var(--white); border:1px solid var(--border); border-radius:12px; padding:1.5rem; text-align:center; transition:transform 0.3s,box-shadow 0.3s; }\r\n.valeur-chip:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,0.08); }\r\n.valeur-icon { font-size:1.8rem; margin-bottom:0.5rem; }\r\n.valeur-name { font-weight:700; font-size:0.88rem; color:var(--forest); }\r\n\r\n\/* APPEL *\/\r\n.appel-section { background:linear-gradient(135deg,var(--terracotta) 0%,var(--clay) 100%); padding:6rem 5%; display:grid; grid-template-columns:1fr auto; gap:4rem; align-items:center; }\r\n.appel-section .section-eyebrow { color:rgba(255,255,255,0.7); }\r\n.appel-section .section-eyebrow::before { background:rgba(255,255,255,0.5); }\r\n.appel-section .section-h2 { color:var(--white); }\r\n.appel-desc { font-size:1.05rem; line-height:1.8; color:rgba(255,255,255,0.75); max-width:540px; margin-top:0.8rem; }\r\n.appel-box { background:rgba(255,255,255,0.1); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,0.2); border-radius:20px; padding:2.5rem; min-width:280px; text-align:center; }\r\n.appel-amounts { display:flex; gap:0.75rem; margin-bottom:1.2rem; flex-wrap:wrap; justify-content:center; }\r\n.amount-btn { background:rgba(255,255,255,0.15); color:var(--white); border:1px solid rgba(255,255,255,0.3); padding:0.6rem 1.2rem; border-radius:100px; font-size:0.9rem; font-weight:600; cursor:pointer; transition:all 0.25s; font-family:'Outfit',sans-serif; }\r\n.amount-btn:hover, .amount-btn.active { background:var(--white); color:var(--terracotta); border-color:var(--white); }\r\n.appel-btn { width:100%; background:var(--white); color:var(--terracotta); border:none; padding:1rem; border-radius:100px; font-size:0.95rem; font-weight:700; cursor:pointer; transition:all 0.3s; font-family:'Outfit',sans-serif; }\r\n.appel-btn:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.2); }\r\n.appel-secure { font-size:0.72rem; color:rgba(255,255,255,0.5); margin-top:0.8rem; }\r\n\r\n\/* PAGE HERO (inner pages) *\/\r\n.page-hero { background:var(--forest); padding:10rem 5% 5rem; position:relative; overflow:hidden; }\r\n.page-hero::before { content:''; position:absolute; bottom:-80px; right:-80px; width:320px; height:320px; border-radius:50%; background:var(--leaf); opacity:0.15; }\r\n.page-hero-title { font-family:'Fraunces',serif; font-size:clamp(2.5rem,5vw,4rem); font-weight:800; color:var(--white); line-height:1.08; margin-bottom:1rem; }\r\n.page-hero-title em { font-style:italic; color:var(--mint); font-weight:300; }\r\n.page-hero-desc { font-size:1.05rem; line-height:1.8; color:rgba(255,255,255,0.65); max-width:560px; }\r\n.breadcrumb { display:flex; align-items:center; gap:0.5rem; font-size:0.78rem; color:rgba(255,255,255,0.4); margin-bottom:1.5rem; }\r\n.breadcrumb a { color:var(--mint); cursor:pointer; text-decoration:none; }\r\n.breadcrumb span { color:rgba(255,255,255,0.25); }\r\n\r\n\/* CONTACT *\/\r\n.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; }\r\n.contact-info-item { display:flex; align-items:flex-start; gap:1rem; margin-bottom:2rem; }\r\n.contact-info-icon { width:44px; height:44px; background:var(--mist); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0; }\r\n.contact-info-label { font-size:0.75rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--leaf); margin-bottom:0.3rem; }\r\n.contact-info-val { font-size:0.95rem; color:var(--forest); font-weight:500; }\r\n.contact-form { background:var(--white); border-radius:20px; padding:2.5rem; border:1px solid var(--border); }\r\n.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }\r\n.form-group { margin-bottom:1.2rem; }\r\n.form-group label { display:block; font-size:0.8rem; font-weight:600; color:var(--forest); margin-bottom:0.4rem; letter-spacing:0.05em; }\r\n.form-group input, .form-group textarea, .form-group select { width:100%; padding:0.8rem 1rem; border:1.5px solid var(--border); border-radius:10px; font-family:'Outfit',sans-serif; font-size:0.9rem; color:var(--charcoal); background:var(--sand); transition:border-color 0.25s,box-shadow 0.25s; outline:none; }\r\n.form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color:var(--mint); box-shadow:0 0 0 3px rgba(82,183,136,0.15); }\r\n.form-group textarea { resize:vertical; min-height:120px; }\r\n.success-box { text-align:center; padding:3rem 0; }\r\n.success-box .s-icon { font-size:3rem; margin-bottom:1rem; }\r\n.success-box h3 { font-family:'Fraunces',serif; font-size:1.5rem; color:var(--forest); margin-bottom:0.75rem; }\r\n.success-box p { color:var(--text-muted); }\r\n\r\n\/* FOOTER *\/\r\nfooter { background:var(--charcoal); color:rgba(255,255,255,0.6); padding:4rem 5% 2rem; }\r\n.footer-top { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:3rem; margin-bottom:3rem; padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,0.08); }\r\n.footer-logo { font-family:'Fraunces',serif; font-size:1.2rem; font-weight:800; color:var(--white); margin-bottom:0.75rem; }\r\n.footer-logo span { color:var(--mint); font-style:italic; }\r\n.footer-tagline { font-size:0.88rem; line-height:1.7; margin-bottom:1.5rem; }\r\n.social-links { display:flex; gap:0.75rem; }\r\n.social-btn { width:36px; height:36px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:0.9rem; cursor:pointer; transition:background 0.25s; text-decoration:none; color:rgba(255,255,255,0.6); }\r\n.social-btn:hover { background:var(--leaf); color:var(--white); }\r\n.footer-col h5 { font-size:0.78rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--white); margin-bottom:1.2rem; }\r\n.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:0.6rem; }\r\n.footer-col a { text-decoration:none; font-size:0.85rem; color:rgba(255,255,255,0.45); transition:color 0.25s; cursor:pointer; }\r\n.footer-col a:hover { color:var(--mint); }\r\n.footer-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }\r\n.footer-bottom p { font-size:0.8rem; }\r\n.footer-bottom-links { display:flex; gap:1.5rem; }\r\n.footer-bottom-links a { font-size:0.78rem; color:rgba(255,255,255,0.3); text-decoration:none; transition:color 0.25s; }\r\n.footer-bottom-links a:hover { color:var(--mint); }\r\n.footer-credit { text-align:center; font-size:0.75rem; color:rgba(255,255,255,0.2); margin-top:1rem; }\r\n\r\n\/* RESPONSIVE *\/\r\n@media(max-width:1024px){\r\n .about-grid{grid-template-columns:1fr;gap:3rem}\r\n .about-mini-card{position:static;margin-top:1.5rem;display:inline-block}\r\n .services-grid{grid-template-columns:1fr 1fr}\r\n .appel-section{grid-template-columns:1fr;gap:2.5rem}\r\n .footer-top{grid-template-columns:1fr 1fr}\r\n .contact-grid{grid-template-columns:1fr}\r\n .valeurs-grid{grid-template-columns:repeat(4,1fr)}\r\n}\r\n@media(max-width:768px){\r\n nav{padding:1rem 5%}\r\n .nav-links{display:none;position:fixed;top:65px;left:0;right:0;background:var(--sand);flex-direction:column;align-items:center;padding:2rem;gap:1.5rem;box-shadow:0 20px 40px rgba(0,0,0,0.1);border-bottom:1px solid var(--border);z-index:998}\r\n .nav-links.open{display:flex}\r\n .hamburger{display:flex}\r\n .hero{grid-template-columns:1fr}\r\n .hero-left{padding:7rem 5% 3rem}\r\n .hero-right{height:280px}\r\n .services-grid{grid-template-columns:1fr}\r\n .mvv-grid{grid-template-columns:1fr}\r\n .mvv-panel:nth-child(3){grid-column:span 1}\r\n .valeurs-grid{grid-template-columns:1fr 1fr}\r\n .footer-top{grid-template-columns:1fr 1fr}\r\n .section{padding:4rem 5%}\r\n .intro-strip{flex-direction:column}\r\n .strip-watermark{display:none}\r\n .form-row{grid-template-columns:1fr}\r\n .footer-bottom{flex-direction:column;text-align:center}\r\n .footer-bottom-links{flex-wrap:wrap;justify-content:center}\r\n}\r\n@media(max-width:480px){\r\n .hero h1{font-size:2.2rem}\r\n .hero-stats{gap:1.5rem}\r\n .footer-top{grid-template-columns:1fr}\r\n .hero-actions{flex-direction:column}\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- NAVBAR -->\r\n<nav id=\"navbar\">\r\n <a class=\"nav-brand\" onclick=\"navigate('home')\">\r\n <div class=\"nav-logo-icon\">\u271d<\/div>\r\n <div class=\"nav-brand-text\">\r\n CSC P\u00e8re Berthier\r\n <span>Centre Socio-Culturel \u2014 Tul\u00e9ar<\/span>\r\n <\/div>\r\n <\/a>\r\n <ul class=\"nav-links\" id=\"navLinks\">\r\n <li><a onclick=\"navigate('home')\" data-page=\"home\">Accueil<\/a><\/li>\r\n <li><a onclick=\"navigate('about')\" data-page=\"about\">Qui sommes-nous<\/a><\/li>\r\n <li><a onclick=\"navigate('values')\" data-page=\"values\">Nos Valeurs<\/a><\/li>\r\n <li><a onclick=\"navigate('actions')\" data-page=\"actions\">Nos Actions<\/a><\/li>\r\n <li><a onclick=\"navigate('contact')\" data-page=\"contact\">Contact<\/a><\/li>\r\n <li><a class=\"nav-donate\" onclick=\"navigate('contact')\">Nous soutenir<\/a><\/li>\r\n <\/ul>\r\n <button class=\"hamburger\" id=\"hamburger\" aria-label=\"Menu\">\r\n <span><\/span><span><\/span><span><\/span>\r\n <\/button>\r\n<\/nav>\r\n\r\n<!-- APP -->\r\n<div id=\"app\" style=\"padding-top:65px; min-height:100vh; display:flex; flex-direction:column;\"><\/div>\r\n\r\n<!-- FOOTER TEMPLATE -->\r\n<template id=\"footer-tpl\">\r\n<footer>\r\n <div class=\"footer-top\">\r\n <div>\r\n <div class=\"footer-logo\">CSC P\u00e8re <span>Berthier<\/span><\/div>\r\n <p class=\"footer-tagline\">Centre Socio-Culturel \u00e0 Madagascar \u2014 d\u00e9di\u00e9 \u00e0 la solidarit\u00e9, au d\u00e9veloppement humain et au soutien des communaut\u00e9s locales depuis 2018.<\/p>\r\n <div class=\"social-links\">\r\n <a href=\"#\" class=\"social-btn\">f<\/a>\r\n <a href=\"#\" class=\"social-btn\">\ud835\udd4f<\/a>\r\n <a href=\"#\" class=\"social-btn\">\ud83d\udcf7<\/a>\r\n <a href=\"#\" class=\"social-btn\">\u25b6<\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"footer-col\">\r\n <h5>Navigation<\/h5>\r\n <ul>\r\n <li><a onclick=\"navigate('home')\">Accueil<\/a><\/li>\r\n <li><a onclick=\"navigate('about')\">Qui sommes-nous<\/a><\/li>\r\n <li><a onclick=\"navigate('values')\">Nos Valeurs<\/a><\/li>\r\n <li><a onclick=\"navigate('actions')\">Nos Actions<\/a><\/li>\r\n <li><a onclick=\"navigate('contact')\">Contact<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"footer-col\">\r\n <h5>Nos Programmes<\/h5>\r\n <ul>\r\n <li><a href=\"#\">\u00c9ducation & Alphab\u00e9tisation<\/a><\/li>\r\n <li><a href=\"#\">Animation Culturelle<\/a><\/li>\r\n <li><a href=\"#\">Assistance Sociale<\/a><\/li>\r\n <li><a href=\"#\">Formation Qualifiante<\/a><\/li>\r\n <li><a href=\"#\">Animation Spirituelle<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"footer-col\">\r\n <h5>Contact<\/h5>\r\n <ul>\r\n <li><a href=\"#\">\ud83d\udccd Tul\u00e9ar, Madagascar<\/a><\/li>\r\n <li><a href=\"#\">\u2709\ufe0f contact@cscberthier.mg<\/a><\/li>\r\n <li><a href=\"#\">\ud83d\udcde Nous appeler<\/a><\/li>\r\n <li><a onclick=\"navigate('contact')\">Devenir b\u00e9n\u00e9vole<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <div class=\"footer-bottom\">\r\n <p>\u00a9 2026 CSC P\u00e8re Berthier Tul\u00e9ar | Centre Socio-Culturel \u00e0 Madagascar<\/p>\r\n <div class=\"footer-bottom-links\">\r\n <a href=\"#\">Mentions l\u00e9gales<\/a>\r\n <a href=\"#\">Politique de confidentialit\u00e9<\/a>\r\n <a href=\"#\">Transparence financi\u00e8re<\/a>\r\n <\/div>\r\n <\/div>\r\n <p class=\"footer-credit\">Con\u00e7u par Voni Randria<\/p>\r\n<\/footer>\r\n<\/template>\r\n\r\n<script>\r\n\/\/ \u2500\u2500\u2500 PAGES HTML \u2500\u2500\u2500\r\nconst pages = {\r\n\r\nhome: `\r\n<section class=\"hero\">\r\n <div class=\"hero-left\">\r\n <div class=\"hero-tag\"><span class=\"hero-tag-dot\">\u25cf<\/span> Centre Socio-Culturel \u00e0 Madagascar<\/div>\r\n <h1>Forger une communaut\u00e9 o\u00f9 la jeunesse est <em>prot\u00e9g\u00e9e, \u00e9panouie<\/em> et actrice de son destin.<\/h1>\r\n <p class=\"hero-desc\">Au service des populations de Tul\u00e9ar et de ses environs, nous accompagnons les familles les plus vuln\u00e9rables avec dignit\u00e9, solidarit\u00e9 et esp\u00e9rance.<\/p>\r\n <div class=\"hero-actions\">\r\n <button class=\"btn btn-primary\" onclick=\"navigate('contact')\">\u2764\ufe0f Nous soutenir<\/button>\r\n <button class=\"btn btn-ghost\" onclick=\"navigate('about')\">Qui sommes-nous \u2192<\/button>\r\n <\/div>\r\n <div class=\"hero-stats\">\r\n <div><div class=\"stat-num\">2018<\/div><div class=\"stat-label\">Fond\u00e9e le 10 f\u00e9v.<\/div><\/div>\r\n <div><div class=\"stat-num\">6<\/div><div class=\"stat-label\">Programmes actifs<\/div><\/div>\r\n <div><div class=\"stat-num\">100%<\/div><div class=\"stat-label\">\u00c0 but non lucratif<\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"hero-right\">\r\n <div class=\"hero-img-mosaic\">\r\n <div class=\"mc1\"><\/div><div class=\"mc2\"><\/div><div class=\"mc3\"><\/div><div class=\"mc4\"><\/div>\r\n <\/div>\r\n <div class=\"hero-overlay-card\">\r\n <div class=\"oc-icon\">\u2728<\/div>\r\n <div>\r\n <div class=\"oc-title\">Association active depuis 2018<\/div>\r\n <div class=\"oc-sub\">Solidarit\u00e9, d\u00e9veloppement humain et soutien des communaut\u00e9s locales<\/div>\r\n <\/div>\r\n <div class=\"oc-badge\">Tul\u00e9ar<\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<div class=\"intro-strip\">\r\n <p>Depuis 2018, la <strong>CSC P\u00e8re Berthier Tul\u00e9ar<\/strong> est une association \u00e0 but non lucratif d\u00e9di\u00e9e \u00e0 la solidarit\u00e9, au d\u00e9veloppement humain et au soutien des communaut\u00e9s locales, avec une attention particuli\u00e8re port\u00e9e aux familles les plus vuln\u00e9rables.<\/p>\r\n <div class=\"strip-watermark\">CSC<\/div>\r\n<\/div>\r\n\r\n<section class=\"section\">\r\n <div class=\"about-grid\">\r\n <div class=\"reveal\">\r\n <div style=\"margin-bottom:2rem\">\r\n <div class=\"section-eyebrow\">\u00c0 notre sujet<\/div>\r\n <h2 class=\"section-h2\">Qui <em>sommes-nous<\/em> ?<\/h2>\r\n <\/div>\r\n <p class=\"big-quote\">Inspir\u00e9e par l'esprit et les valeurs du P\u00e8re Jean Baptiste Berthier MS, l'association place la dignit\u00e9 humaine, la solidarit\u00e9 et l'esp\u00e9rance au c\u0153ur de ses actions.<\/p>\r\n <p class=\"about-body\">La CSC P\u00e8re Berthier Tul\u00e9ar, fond\u00e9e le 10 f\u00e9vrier 2018, est une association \u00e0 but non lucratif d\u00e9di\u00e9e \u00e0 la solidarit\u00e9, au d\u00e9veloppement humain et au soutien des communaut\u00e9s locales, avec une attention particuli\u00e8re port\u00e9e aux familles les plus vuln\u00e9rables.<\/p>\r\n <p class=\"about-body\">Elle s'engage \u00e0 accompagner les familles afin de favoriser leur autonomie, leur \u00e9panouissement et leur participation active au d\u00e9veloppement local.<\/p>\r\n <div class=\"founder-card\">\r\n <span style=\"font-size:2rem\">\u271d<\/span>\r\n <div>\r\n <div class=\"founder-name\">P\u00e8re Jean Baptiste Berthier MS<\/div>\r\n <div class=\"founder-sub\">Fondateur des Missionnaires de la Sainte Famille \u2014 source d'inspiration de notre association<\/div>\r\n <\/div>\r\n <\/div>\r\n <br>\r\n <button class=\"btn btn-forest\" onclick=\"navigate('about')\">En savoir plus \u2192<\/button>\r\n <\/div>\r\n <div class=\"about-visual reveal rd2\" style=\"padding-bottom:2rem\">\r\n <div class=\"about-card-main\">\r\n <div class=\"acm-label\">Fond\u00e9e officiellement le<\/div>\r\n <div class=\"acm-date\">10 F\u00e9v. 2018<span>Tul\u00e9ar, Madagascar<\/span><\/div>\r\n <div class=\"acm-sep\"><\/div>\r\n <p class=\"acm-text\">Association <strong>\u00e0 but non lucratif<\/strong> d\u00e9di\u00e9e \u00e0 la solidarit\u00e9 et au d\u00e9veloppement humain, port\u00e9e par les valeurs de la <strong>Sainte Famille<\/strong>.<\/p>\r\n <\/div>\r\n <div class=\"about-mini-card\">\r\n <div class=\"amc-num\">6<\/div>\r\n <div class=\"amc-label\">Programmes<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<section class=\"section section-alt\">\r\n <div class=\"reveal\">\r\n <div class=\"section-eyebrow\">Ce que nous faisons<\/div>\r\n <h2 class=\"section-h2\">Nos <em>Actions<\/em><\/h2>\r\n <p class=\"section-desc\">Des programmes concrets pour accompagner les familles, \u00e9duquer la jeunesse et renforcer la solidarit\u00e9 communautaire \u00e0 Tul\u00e9ar.<\/p>\r\n <\/div>\r\n <div class=\"services-grid\">\r\n <div class=\"service-card reveal rd1\">\r\n <div class=\"service-num\">01<\/div>\r\n <div class=\"service-icon\">\ud83d\udcda<\/div>\r\n <div class=\"service-title\">\u00c9ducation & <em>Alphab\u00e9tisation<\/em><\/div>\r\n <p class=\"service-desc\">R\u00e9insertion scolaire et cours pour enfants et adultes \u00e0 Tul\u00e9ar.<\/p>\r\n <\/div>\r\n <div class=\"service-card reveal rd2\">\r\n <div class=\"service-num\">02<\/div>\r\n <div class=\"service-icon\">\ud83c\udfad<\/div>\r\n <div class=\"service-title\">Animation <em>Culturelle<\/em><\/div>\r\n <p class=\"service-desc\">Organisation d'\u00e9v\u00e9nements et de spectacles pour le vivre-ensemble.<\/p>\r\n <\/div>\r\n <div class=\"service-card reveal rd3\">\r\n <div class=\"service-num\">03<\/div>\r\n <div class=\"service-icon\">\ud83e\udd1d<\/div>\r\n <div class=\"service-title\">Assistance <em>Sociale<\/em><\/div>\r\n <p class=\"service-desc\">Soutien direct aux familles les plus vuln\u00e9rables de la r\u00e9gion.<\/p>\r\n <\/div>\r\n <div class=\"service-card reveal rd4\">\r\n <div class=\"service-num\">04<\/div>\r\n <div class=\"service-icon\">\ud83d\udcac<\/div>\r\n <div class=\"service-title\">\u00c9coute & <em>Accompagnement<\/em><\/div>\r\n <p class=\"service-desc\">Un espace s\u00e9curis\u00e9 pour le conseil et le suivi des personnes.<\/p>\r\n <\/div>\r\n <div class=\"service-card reveal rd5\">\r\n <div class=\"service-num\">05<\/div>\r\n <div class=\"service-icon\">\ud83e\uddfa<\/div>\r\n <div class=\"service-title\">Formation <em>Qualifiante<\/em><\/div>\r\n <p class=\"service-desc\">Apprentissage de m\u00e9tiers (ex: vannerie) pour l'autonomie financi\u00e8re.<\/p>\r\n <\/div>\r\n <div class=\"service-card reveal rd6\">\r\n <div class=\"service-num\">06<\/div>\r\n <div class=\"service-icon\">\ud83d\ude4f<\/div>\r\n <div class=\"service-title\">Animation <em>Spirituelle<\/em><\/div>\r\n <p class=\"service-desc\">Partage et r\u00e9flexion bas\u00e9s sur les valeurs de la Sainte Famille.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div style=\"text-align:center;margin-top:3rem\">\r\n <button class=\"btn btn-forest reveal\" onclick=\"navigate('actions')\">D\u00e9couvrir tous nos programmes \u2192<\/button>\r\n <\/div>\r\n<\/section>\r\n\r\n<div class=\"appel-section\">\r\n <div class=\"reveal\">\r\n <div class=\"section-eyebrow\">Agissez maintenant<\/div>\r\n <h2 class=\"section-h2\">Donnez de l'<em>Espoir<\/em>, Transformez une Vie<\/h2>\r\n <p class=\"appel-desc\">Chaque enfant m\u00e9rite une chance de grandir dans la dignit\u00e9 et d'acc\u00e9der \u00e0 l'\u00e9ducation. Au Centre Socio-Culturel P\u00e8re Berthier, votre g\u00e9n\u00e9rosit\u00e9 se transforme imm\u00e9diatement en actions concr\u00e8tes \u00e0 Tul\u00e9ar : un repas \u00e9quilibr\u00e9 \u00e0 la cantine, un kit scolaire pour la rentr\u00e9e ou une formation qualifiante pour un jeune en qu\u00eate d'avenir.<\/p>\r\n <\/div>\r\n <div class=\"appel-box reveal rd2\">\r\n <p style=\"color:rgba(255,255,255,0.75);font-size:0.82rem;margin-bottom:1rem;font-weight:500\">Choisissez votre montant<\/p>\r\n <div class=\"appel-amounts\">\r\n <button class=\"amount-btn\" onclick=\"selectAmt(this)\">10\u20ac<\/button>\r\n <button class=\"amount-btn active\" onclick=\"selectAmt(this)\">25\u20ac<\/button>\r\n <button class=\"amount-btn\" onclick=\"selectAmt(this)\">50\u20ac<\/button>\r\n <button class=\"amount-btn\" onclick=\"selectAmt(this)\">100\u20ac<\/button>\r\n <\/div>\r\n <button class=\"appel-btn\" onclick=\"navigate('contact')\">\u2764\ufe0f Faire un don maintenant<\/button>\r\n <p class=\"appel-secure\">\ud83d\udd12 Paiement 100% s\u00e9curis\u00e9 \u00b7 Re\u00e7u fiscal fourni<\/p>\r\n <\/div>\r\n<\/div>`,\r\n\r\nabout: `\r\n<div class=\"page-hero\">\r\n <div class=\"breadcrumb\"><a onclick=\"navigate('home')\">Accueil<\/a><span>\/<\/span><span>Qui sommes-nous<\/span><\/div>\r\n <h1 class=\"page-hero-title\">Qui <em>sommes-nous<\/em> ?<\/h1>\r\n <p class=\"page-hero-desc\">Une association fond\u00e9e sur la dignit\u00e9 humaine, la solidarit\u00e9 et l'esp\u00e9rance, au service des communaut\u00e9s de Tul\u00e9ar.<\/p>\r\n<\/div>\r\n<section class=\"section\">\r\n <div class=\"about-grid\">\r\n <div class=\"reveal\">\r\n <p class=\"big-quote\">Inspir\u00e9e par l'esprit et les valeurs du P\u00e8re Jean Baptiste Berthier MS, fondateur des Missionnaires de la Sainte Famille, l'association place la dignit\u00e9 humaine, la solidarit\u00e9 et l'esp\u00e9rance au c\u0153ur de ses actions.<\/p>\r\n <p class=\"about-body\">La CSC P\u00e8re Berthier Tul\u00e9ar, fond\u00e9e le 10 f\u00e9vrier 2018, est une association \u00e0 but non lucratif d\u00e9di\u00e9e \u00e0 la solidarit\u00e9, au d\u00e9veloppement humain et au soutien des communaut\u00e9s locales, avec une attention particuli\u00e8re port\u00e9e aux familles les plus vuln\u00e9rables.<\/p>\r\n <p class=\"about-body\">Elle s'engage \u00e0 accompagner les familles afin de favoriser leur autonomie, leur \u00e9panouissement et leur participation active au d\u00e9veloppement local.<\/p>\r\n <p class=\"about-body\">Au service des populations de Tul\u00e9ar et de ses environs, la CSC P\u00e8re Berthier met en \u0153uvre des projets sociaux concrets qui r\u00e9pondent aux besoins sociaux, \u00e9ducatifs et spirituels des communaut\u00e9s.<\/p>\r\n <p class=\"about-body\">Depuis sa cr\u00e9ation, l'association d\u00e9veloppe des initiatives visant \u00e0 am\u00e9liorer durablement les conditions de vie des familles, \u00e0 renforcer la solidarit\u00e9 et \u00e0 encourager la participation communautaire. \u00c0 travers des actions sociales, des programmes \u00e9ducatifs, des formations et des projets de d\u00e9veloppement local, la CSC P\u00e8re Berthier contribue \u00e0 b\u00e2tir une soci\u00e9t\u00e9 plus juste, solidaire et inclusive.<\/p>\r\n <p class=\"about-body\">Gr\u00e2ce \u00e0 l'engagement de ses membres, b\u00e9n\u00e9voles, partenaires et bienfaiteurs, l'association continue d'\u00e9largir son impact et d'apporter soutien, espoir et opportunit\u00e9s aux personnes qui en ont le plus besoin.<\/p>\r\n <div class=\"founder-card\">\r\n <span style=\"font-size:2rem\">\u271d<\/span>\r\n <div>\r\n <div class=\"founder-name\">P\u00e8re Jean Baptiste Berthier MS<\/div>\r\n <div class=\"founder-sub\">Fondateur des Missionnaires de la Sainte Famille \u2014 source d'inspiration de notre association et de ses valeurs fondatrices.<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"about-visual reveal rd2\" style=\"padding-bottom:2rem\">\r\n <div class=\"about-card-main\">\r\n <div class=\"acm-label\">Fond\u00e9e officiellement le<\/div>\r\n <div class=\"acm-date\">10 F\u00e9v. 2018<span>Tul\u00e9ar, Madagascar<\/span><\/div>\r\n <div class=\"acm-sep\"><\/div>\r\n <p class=\"acm-text\">Association <strong>\u00e0 but non lucratif<\/strong> d\u00e9di\u00e9e \u00e0 la solidarit\u00e9, au d\u00e9veloppement humain et au soutien des communaut\u00e9s locales, port\u00e9e par les valeurs de la <strong>Sainte Famille<\/strong>.<\/p>\r\n <\/div>\r\n <div class=\"about-mini-card\">\r\n <div class=\"amc-num\">6<\/div>\r\n <div class=\"amc-label\">Programmes actifs<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>`,\r\n\r\nvalues: `\r\n<div class=\"page-hero\">\r\n <div class=\"breadcrumb\"><a onclick=\"navigate('home')\">Accueil<\/a><span>\/<\/span><span>Nos Valeurs<\/span><\/div>\r\n <h1 class=\"page-hero-title\">Nos <em>Valeurs<\/em><\/h1>\r\n <p class=\"page-hero-desc\">Les principes qui guident chacune de nos actions et d\u00e9finissent notre identit\u00e9 en tant qu'association.<\/p>\r\n<\/div>\r\n<section class=\"section\">\r\n <div class=\"section-header reveal\" style=\"margin-bottom:3.5rem\">\r\n <div class=\"section-eyebrow\">Ce qui nous guide<\/div>\r\n <h2 class=\"section-h2\">Mission, Vision & <em>Valeurs<\/em><\/h2>\r\n <\/div>\r\n <div class=\"mvv-grid reveal\">\r\n <div class=\"mvv-panel\">\r\n <div class=\"mvv-icon\">\ud83c\udfaf<\/div>\r\n <div class=\"mvv-label\">Mission<\/div>\r\n <p class=\"mvv-text\">Am\u00e9liorer durablement les conditions de vie des communaut\u00e9s vuln\u00e9rables de Tul\u00e9ar en leur donnant les outils, les connaissances et les ressources n\u00e9cessaires pour se d\u00e9velopper. Accompagner les familles pour favoriser leur autonomie, leur \u00e9panouissement et leur participation active au d\u00e9veloppement local.<\/p>\r\n <\/div>\r\n <div class=\"mvv-panel\">\r\n <div class=\"mvv-icon\">\ud83c\udf05<\/div>\r\n <div class=\"mvv-label\">Vision<\/div>\r\n <p class=\"mvv-text\">Une communaut\u00e9 o\u00f9 la jeunesse est prot\u00e9g\u00e9e, \u00e9panouie et actrice de son destin. Un monde o\u00f9 chaque enfant a acc\u00e8s \u00e0 l'\u00e9ducation et chaque famille peut vivre dans la dignit\u00e9, port\u00e9e par la solidarit\u00e9 et l'esp\u00e9rance h\u00e9rit\u00e9es du P\u00e8re Berthier.<\/p>\r\n <\/div>\r\n <div class=\"mvv-panel\">\r\n <div class=\"mvv-icon\">\ud83d\udc8e<\/div>\r\n <div class=\"mvv-label\">Nos Valeurs<\/div>\r\n <div class=\"valeurs-grid\">\r\n <div class=\"valeur-chip\"><div class=\"valeur-icon\">\ud83e\udd1d<\/div><div class=\"valeur-name\">Solidarit\u00e9<\/div><\/div>\r\n <div class=\"valeur-chip\"><div class=\"valeur-icon\">\ud83d\udd4a\ufe0f<\/div><div class=\"valeur-name\">Dignit\u00e9<\/div><\/div>\r\n <div class=\"valeur-chip\"><div class=\"valeur-icon\">\ud83d\udca1<\/div><div class=\"valeur-name\">Esp\u00e9rance<\/div><\/div>\r\n <div class=\"valeur-chip\"><div class=\"valeur-icon\">\ud83d\udd0d<\/div><div class=\"valeur-name\">Transparence<\/div><\/div>\r\n <div class=\"valeur-chip\"><div class=\"valeur-icon\">\u2764\ufe0f<\/div><div class=\"valeur-name\">Respect<\/div><\/div>\r\n <div class=\"valeur-chip\"><div class=\"valeur-icon\">\u26a1<\/div><div class=\"valeur-name\">Engagement<\/div><\/div>\r\n <div class=\"valeur-chip\"><div class=\"valeur-icon\">\ud83c\udf0d<\/div><div class=\"valeur-name\">Inclusion<\/div><\/div>\r\n <div class=\"valeur-chip\"><div class=\"valeur-icon\">\ud83c\udfc6<\/div><div class=\"valeur-name\">Excellence<\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>`,\r\n\r\nactions: `\r\n<div class=\"page-hero\">\r\n <div class=\"breadcrumb\"><a onclick=\"navigate('home')\">Accueil<\/a><span>\/<\/span><span>Nos Actions<\/span><\/div>\r\n <h1 class=\"page-hero-title\">Nos <em>Actions<\/em><\/h1>\r\n <p class=\"page-hero-desc\">Six programmes concrets pour accompagner les familles, \u00e9duquer la jeunesse et renforcer la solidarit\u00e9 communautaire \u00e0 Tul\u00e9ar.<\/p>\r\n<\/div>\r\n<section class=\"section\">\r\n <div class=\"services-grid\">\r\n <div class=\"service-card reveal rd1\">\r\n <div class=\"service-num\">01<\/div>\r\n <div class=\"service-icon\">\ud83d\udcda<\/div>\r\n <div class=\"service-title\">\u00c9ducation & <em>Alphab\u00e9tisation<\/em><\/div>\r\n <p class=\"service-desc\">R\u00e9insertion scolaire et cours pour enfants et adultes \u00e0 Tul\u00e9ar. Nous croyons que l'\u00e9ducation est la cl\u00e9 d'un avenir meilleur pour chaque enfant et chaque adulte souhaitant apprendre \u00e0 lire et \u00e9crire.<\/p>\r\n <\/div>\r\n <div class=\"service-card reveal rd2\">\r\n <div class=\"service-num\">02<\/div>\r\n <div class=\"service-icon\">\ud83c\udfad<\/div>\r\n <div class=\"service-title\">Animation <em>Culturelle<\/em><\/div>\r\n <p class=\"service-desc\">Organisation d'\u00e9v\u00e9nements et de spectacles pour le vivre-ensemble et le renforcement du lien social dans la communaut\u00e9 de Tul\u00e9ar.<\/p>\r\n <\/div>\r\n <div class=\"service-card reveal rd3\">\r\n <div class=\"service-num\">03<\/div>\r\n <div class=\"service-icon\">\ud83e\udd1d<\/div>\r\n <div class=\"service-title\">Assistance <em>Sociale<\/em><\/div>\r\n <p class=\"service-desc\">Soutien direct aux familles les plus vuln\u00e9rables de la r\u00e9gion \u2014 aide alimentaire, soutien mat\u00e9riel et accompagnement personnalis\u00e9 pour les foyers en difficult\u00e9.<\/p>\r\n <\/div>\r\n <div class=\"service-card reveal rd4\">\r\n <div class=\"service-num\">04<\/div>\r\n <div class=\"service-icon\">\ud83d\udcac<\/div>\r\n <div class=\"service-title\">\u00c9coute & <em>Accompagnement<\/em><\/div>\r\n <p class=\"service-desc\">Un espace s\u00e9curis\u00e9 pour le conseil et le suivi des personnes en difficult\u00e9. Parce que chacun m\u00e9rite d'\u00eatre entendu, compris et soutenu dans ses \u00e9preuves.<\/p>\r\n <\/div>\r\n <div class=\"service-card reveal rd5\">\r\n <div class=\"service-num\">05<\/div>\r\n <div class=\"service-icon\">\ud83e\uddfa<\/div>\r\n <div class=\"service-title\">Formation <em>Qualifiante<\/em><\/div>\r\n <p class=\"service-desc\">Apprentissage de m\u00e9tiers (ex : vannerie) pour l'autonomie financi\u00e8re. Des comp\u00e9tences concr\u00e8tes pour construire un avenir ind\u00e9pendant et digne.<\/p>\r\n <\/div>\r\n <div class=\"service-card reveal rd6\">\r\n <div class=\"service-num\">06<\/div>\r\n <div class=\"service-icon\">\ud83d\ude4f<\/div>\r\n <div class=\"service-title\">Animation <em>Spirituelle<\/em><\/div>\r\n <p class=\"service-desc\">Partage et r\u00e9flexion bas\u00e9s sur les valeurs de la Sainte Famille \u2014 nourrir l'\u00e2me autant que le corps pour un \u00e9panouissement int\u00e9gral de la personne.<\/p>\r\n <\/div>\r\n <\/div>\r\n<\/section>`,\r\n\r\ncontact: `\r\n<div class=\"page-hero\">\r\n <div class=\"breadcrumb\"><a onclick=\"navigate('home')\">Accueil<\/a><span>\/<\/span><span>Contact<\/span><\/div>\r\n <h1 class=\"page-hero-title\">Nous <em>Contacter<\/em><\/h1>\r\n <p class=\"page-hero-desc\">Une question, un projet de partenariat ou l'envie de nous soutenir ? Nous sommes l\u00e0 pour vous r\u00e9pondre.<\/p>\r\n<\/div>\r\n<section class=\"section\">\r\n <div class=\"contact-grid\">\r\n <div class=\"reveal\">\r\n <div style=\"margin-bottom:2.5rem\">\r\n <div class=\"section-eyebrow\">Coordonn\u00e9es<\/div>\r\n <h2 class=\"section-h2\">Parlons-<em>nous<\/em><\/h2>\r\n <\/div>\r\n <div class=\"contact-info-item\">\r\n <div class=\"contact-info-icon\">\ud83d\udccd<\/div>\r\n <div><div class=\"contact-info-label\">Adresse<\/div><div class=\"contact-info-val\">Tul\u00e9ar, Madagascar<\/div><\/div>\r\n <\/div>\r\n <div class=\"contact-info-item\">\r\n <div class=\"contact-info-icon\">\u2709\ufe0f<\/div>\r\n <div><div class=\"contact-info-label\">Email<\/div><div class=\"contact-info-val\">contact@cscberthier.mg<\/div><\/div>\r\n <\/div>\r\n <div class=\"contact-info-item\">\r\n <div class=\"contact-info-icon\">\ud83d\udcde<\/div>\r\n <div><div class=\"contact-info-label\">T\u00e9l\u00e9phone<\/div><div class=\"contact-info-val\">Nous appeler<\/div><\/div>\r\n <\/div>\r\n <div class=\"contact-info-item\">\r\n <div class=\"contact-info-icon\">\ud83d\udd50<\/div>\r\n <div><div class=\"contact-info-label\">Horaires<\/div><div class=\"contact-info-val\">Lun \u2013 Ven, 8h \u2013 17h<\/div><\/div>\r\n <\/div>\r\n <div style=\"margin-top:3rem\">\r\n <div class=\"section-eyebrow\">Faire un don<\/div>\r\n <h3 style=\"font-family:'Fraunces',serif;font-size:1.5rem;font-weight:800;color:var(--forest);margin:0.5rem 0 1rem\">Soutenez <em style=\"font-style:italic;font-weight:300;color:var(--terracotta)\">notre mission<\/em><\/h3>\r\n <div class=\"appel-amounts\" style=\"justify-content:flex-start\">\r\n <button class=\"amount-btn\" style=\"background:rgba(45,106,79,0.1);color:var(--forest);border-color:var(--border)\" onclick=\"selectDonContact(this,'10\u20ac')\">10\u20ac<\/button>\r\n <button class=\"amount-btn active\" style=\"background:var(--terracotta);color:white;border-color:var(--terracotta)\" onclick=\"selectDonContact(this,'25\u20ac')\">25\u20ac<\/button>\r\n <button class=\"amount-btn\" style=\"background:rgba(45,106,79,0.1);color:var(--forest);border-color:var(--border)\" onclick=\"selectDonContact(this,'50\u20ac')\">50\u20ac<\/button>\r\n <button class=\"amount-btn\" style=\"background:rgba(45,106,79,0.1);color:var(--forest);border-color:var(--border)\" onclick=\"selectDonContact(this,'100\u20ac')\">100\u20ac<\/button>\r\n <\/div>\r\n <button id=\"don-contact-btn\" class=\"btn btn-forest\" style=\"margin-top:1rem;width:100%;justify-content:center\" onclick=\"alert('Merci pour votre g\u00e9n\u00e9rosit\u00e9 ! Le syst\u00e8me de paiement sera bient\u00f4t disponible.')\">\u2764\ufe0f Faire un don de 25\u20ac<\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"contact-form reveal rd2\" id=\"contact-form-wrap\">\r\n <h3 style=\"font-family:'Fraunces',serif;font-size:1.4rem;font-weight:700;color:var(--forest);margin-bottom:1.5rem\">Envoyez-nous un message<\/h3>\r\n <div class=\"form-row\">\r\n <div class=\"form-group\"><label>Pr\u00e9nom<\/label><input type=\"text\" placeholder=\"Jean\"><\/div>\r\n <div class=\"form-group\"><label>Nom<\/label><input type=\"text\" placeholder=\"Rakoto\"><\/div>\r\n <\/div>\r\n <div class=\"form-group\"><label>Email<\/label><input type=\"email\" placeholder=\"jean@exemple.mg\"><\/div>\r\n <div class=\"form-group\">\r\n <label>Objet<\/label>\r\n <select>\r\n <option>Information g\u00e9n\u00e9rale<\/option>\r\n <option>Faire un don<\/option>\r\n <option>Devenir b\u00e9n\u00e9vole<\/option>\r\n <option>Partenariat<\/option>\r\n <option>Autre<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-group\"><label>Message<\/label><textarea placeholder=\"Votre message ici...\"><\/textarea><\/div>\r\n <button class=\"btn btn-forest\" style=\"width:100%;justify-content:center\" onclick=\"submitForm()\">Envoyer le message \u2192<\/button>\r\n <\/div>\r\n <\/div>\r\n<\/section>`\r\n};\r\n\r\n\/\/ \u2500\u2500\u2500 ROUTER \u2500\u2500\u2500\r\nlet currentPage = 'home';\r\n\r\nfunction navigate(pageId) {\r\n const app = document.getElementById('app');\r\n app.classList.add('fading');\r\n setTimeout(() => {\r\n currentPage = pageId;\r\n renderPage(pageId);\r\n app.classList.remove('fading');\r\n window.scrollTo({ top: 0, behavior: 'instant' });\r\n updateNav(pageId);\r\n initReveal();\r\n }, 200);\r\n}\r\n\r\nfunction renderPage(pageId) {\r\n const app = document.getElementById('app');\r\n const footer = document.getElementById('footer-tpl').content.cloneNode(true);\r\n app.innerHTML = '';\r\n const main = document.createElement('main');\r\n main.style.flex = '1';\r\n main.innerHTML = pages[pageId] || pages['home'];\r\n app.appendChild(main);\r\n app.appendChild(footer);\r\n}\r\n\r\nfunction updateNav(pageId) {\r\n document.querySelectorAll('.nav-links a[data-page]').forEach(a => {\r\n a.classList.toggle('active', a.dataset.page === pageId);\r\n });\r\n}\r\n\r\n\/\/ \u2500\u2500\u2500 SCROLL REVEAL \u2500\u2500\u2500\r\nfunction initReveal() {\r\n const els = document.querySelectorAll('.reveal:not(.visible)');\r\n const obs = new IntersectionObserver((entries) => {\r\n entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('visible'); obs.unobserve(e.target); } });\r\n }, { threshold: 0.1 });\r\n els.forEach(el => obs.observe(el));\r\n}\r\n\r\n\/\/ \u2500\u2500\u2500 DON BUTTONS \u2500\u2500\u2500\r\nfunction selectAmt(btn) {\r\n document.querySelectorAll('.appel-amounts .amount-btn').forEach(b => b.classList.remove('active'));\r\n btn.classList.add('active');\r\n}\r\n\r\nfunction selectDonContact(btn, amt) {\r\n document.querySelectorAll('#contact-form-wrap ~ div .amount-btn, .contact-grid .amount-btn').forEach(b => {\r\n b.style.background = 'rgba(45,106,79,0.1)';\r\n b.style.color = 'var(--forest)';\r\n b.style.borderColor = 'var(--border)';\r\n });\r\n btn.style.background = 'var(--terracotta)';\r\n btn.style.color = 'white';\r\n btn.style.borderColor = 'var(--terracotta)';\r\n const donBtn = document.getElementById('don-contact-btn');\r\n if (donBtn) donBtn.textContent = '\u2764\ufe0f Faire un don de ' + amt;\r\n}\r\n\r\nfunction submitForm() {\r\n const wrap = document.getElementById('contact-form-wrap');\r\n if (wrap) {\r\n wrap.innerHTML = `\r\n <div class=\"success-box\">\r\n <div class=\"s-icon\">\u2705<\/div>\r\n <h3>Message envoy\u00e9 !<\/h3>\r\n <p>Merci de nous avoir contact\u00e9s. Nous vous r\u00e9pondrons dans les meilleurs d\u00e9lais.<\/p>\r\n <button class=\"btn btn-forest\" style=\"margin-top:2rem\" onclick=\"navigate('contact')\">Nouveau message<\/button>\r\n <\/div>`;\r\n }\r\n}\r\n\r\n\/\/ \u2500\u2500\u2500 NAVBAR SCROLL \u2500\u2500\u2500\r\nwindow.addEventListener('scroll', () => {\r\n document.getElementById('navbar').classList.toggle('scrolled', window.scrollY > 50);\r\n});\r\n\r\n\/\/ \u2500\u2500\u2500 HAMBURGER \u2500\u2500\u2500\r\ndocument.getElementById('hamburger').addEventListener('click', () => {\r\n document.getElementById('navLinks').classList.toggle('open');\r\n});\r\n\r\n\/\/ \u2500\u2500\u2500 INIT \u2500\u2500\u2500\r\nrenderPage('home');\r\ninitReveal();\r\nupdateNav('home');\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>CSC P\u00e8re Berthier Tul\u00e9ar \u2014 Centre Socio-Culturel \u00e0 Madagascar \u271d CSC P\u00e8re Berthier Centre Socio-Culturel \u2014 Tul\u00e9ar Accueil Qui sommes-nous […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-10","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/centre-socio-culturel-berthier.ideapp.top\/index.php?rest_route=\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/centre-socio-culturel-berthier.ideapp.top\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/centre-socio-culturel-berthier.ideapp.top\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/centre-socio-culturel-berthier.ideapp.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/centre-socio-culturel-berthier.ideapp.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=10"}],"version-history":[{"count":4,"href":"https:\/\/centre-socio-culturel-berthier.ideapp.top\/index.php?rest_route=\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":15,"href":"https:\/\/centre-socio-culturel-berthier.ideapp.top\/index.php?rest_route=\/wp\/v2\/pages\/10\/revisions\/15"}],"wp:attachment":[{"href":"https:\/\/centre-socio-culturel-berthier.ideapp.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}