diff --git a/css/social.css b/css/social.css
new file mode 100644
index 0000000..880f6ce
--- /dev/null
+++ b/css/social.css
@@ -0,0 +1,784 @@
+/* ============================================================
+ HERO SECTION
+ ============================================================ */
+
+.social-hero {
+ background: linear-gradient(135deg, #0a0a0a 0%, #1a0000 60%, #2d0000 100%);
+ border-radius: 12px;
+ padding: 48px 40px;
+ color: white;
+ margin-bottom: 0;
+}
+
+.social-hero-inner {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 32px;
+ text-align: center;
+}
+
+.social-hero-brand {
+ display: flex;
+ align-items: center;
+ gap: 24px;
+ flex-wrap: wrap;
+ justify-content: center;
+}
+
+.social-hero-logo {
+ height: 90px;
+ width: auto;
+ filter: drop-shadow(0 4px 16px rgba(255, 0, 0, 0.4));
+}
+
+.social-hero-text h1 {
+ font-size: 2.2rem;
+ font-weight: 800;
+ color: white;
+ margin-bottom: 8px;
+ letter-spacing: -0.5px;
+}
+
+.social-hero-text p {
+ font-size: 1rem;
+ color: rgba(255, 255, 255, 0.75);
+ max-width: 480px;
+ line-height: 1.5;
+}
+
+/* Platform Navigation Badges */
+.platform-nav {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 12px;
+ justify-content: center;
+ align-items: flex-start;
+}
+
+.platform-badge-wrap {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 5px;
+}
+
+.platform-badge-count {
+ font-size: 12px;
+ font-weight: 700;
+ color: rgba(255, 255, 255, 0.85);
+ letter-spacing: 0.3px;
+ line-height: 1;
+}
+
+.platform-badge {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ padding: 11px 22px;
+ border-radius: 50px;
+ font-size: 15px;
+ font-weight: 600;
+ text-decoration: none;
+ transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+ border: 2px solid transparent;
+ color: white !important;
+ letter-spacing: 0.2px;
+}
+
+.platform-badge:hover {
+ transform: translateY(-4px);
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+}
+
+.platform-badge:active {
+ transform: scale(0.93) translateY(0);
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+ transition-duration: 0.08s;
+}
+
+.platform-badge.platform-youtube { background: #FF0000; }
+.platform-badge.platform-instagram {
+ background: linear-gradient(135deg, #F58529, #DD2A7B, #8134AF);
+}
+.platform-badge.platform-tiktok {
+ background: #000;
+ border-color: #EE1D52;
+}
+.platform-badge.platform-wp {
+ background: linear-gradient(135deg, #1a0000, #2d0000);
+ border-color: rgba(255, 255, 255, 0.2);
+}
+
+/* ============================================================
+ SOCIAL SECTIONS
+ ============================================================ */
+
+.social-section {
+ margin-bottom: 0;
+}
+
+.social-section-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 18px 24px;
+ border-radius: 10px 10px 0 0;
+ flex-wrap: wrap;
+ gap: 12px;
+}
+
+.social-section-header-left {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ min-width: 0;
+}
+
+.social-section-header h2 {
+ font-size: 22px;
+ font-weight: 700;
+ color: white;
+ margin: 0;
+ white-space: nowrap;
+}
+
+.social-section-header > .social-section-header-left > i {
+ font-size: 26px;
+ color: white;
+ flex-shrink: 0;
+}
+
+.platform-handle {
+ font-size: 13px;
+ color: rgba(255, 255, 255, 0.75);
+ font-weight: 400;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.platform-stat-badge {
+ display: inline-flex;
+ align-items: center;
+ gap: 5px;
+ font-size: 12px;
+ font-weight: 600;
+ color: white;
+ background: rgba(255, 255, 255, 0.18);
+ border: 1px solid rgba(255, 255, 255, 0.25);
+ border-radius: 20px;
+ padding: 3px 10px;
+ white-space: nowrap;
+ flex-shrink: 0;
+}
+
+.platform-stat-badge i {
+ font-size: 11px;
+ opacity: 0.85;
+}
+
+/* Platform header gradients */
+.platform-youtube-header { background: linear-gradient(135deg, #a80000, #FF0000); }
+.platform-facebook-header { background: linear-gradient(135deg, #0d47a1, #1877F2); }
+.platform-instagram-header {
+ background: linear-gradient(135deg, #6a0dad, #DD2A7B, #F77737);
+}
+.platform-tiktok-header {
+ background: linear-gradient(135deg, #010101, #1a1a1a);
+ border-bottom: 3px solid #EE1D52;
+}
+.platform-x-header {
+ background: linear-gradient(135deg, #000, #1a1a1a);
+ border-bottom: 3px solid rgba(255, 255, 255, 0.15);
+}
+
+/* CTA Buttons */
+.platform-cta-btn {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ padding: 10px 20px;
+ border-radius: 6px;
+ font-size: 14px;
+ font-weight: 600;
+ text-decoration: none;
+ transition: all 0.2s ease;
+ color: white !important;
+ flex-shrink: 0;
+ white-space: nowrap;
+}
+
+.platform-cta-btn:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+}
+
+.platform-youtube-btn { background: rgba(255, 255, 255, 0.2); }
+.platform-youtube-btn:hover { background: rgba(255, 255, 255, 0.3); }
+
+.platform-facebook-btn { background: rgba(255, 255, 255, 0.2); }
+.platform-facebook-btn:hover { background: rgba(255, 255, 255, 0.3); }
+
+.platform-instagram-btn { background: rgba(255, 255, 255, 0.2); }
+.platform-instagram-btn:hover { background: rgba(255, 255, 255, 0.3); }
+
+.platform-tiktok-btn { background: rgba(238, 29, 82, 0.7); }
+.platform-tiktok-btn:hover { background: #EE1D52; }
+
+.platform-x-btn { background: rgba(255, 255, 255, 0.15); }
+.platform-x-btn:hover { background: rgba(255, 255, 255, 0.25); }
+
+/* ============================================================
+ TWO-COLUMN LAYOUT
+ ============================================================ */
+
+.social-two-col {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 30px;
+ margin-bottom: 0;
+}
+
+/* Colonnes alignées en haut (chacune prend sa hauteur naturelle) */
+.social-two-col--top {
+ align-items: start;
+}
+
+@media (max-width: 900px) {
+ .social-two-col {
+ grid-template-columns: 1fr;
+ }
+}
+
+/* ============================================================
+ EMBED CONTAINERS (Facebook, X)
+ ============================================================ */
+
+.social-embed-container {
+ background: var(--card-bg);
+ border-radius: 0 0 10px 10px;
+ overflow: hidden;
+ min-height: 500px;
+ display: flex;
+ align-items: flex-start;
+ justify-content: center;
+ box-shadow: var(--card-shadow);
+ padding: 12px;
+ max-width: 100%;
+ box-sizing: border-box;
+}
+
+/* Empêche les iframes tierces de dépasser du conteneur */
+.social-embed-container iframe,
+.social-embed-container > div {
+ max-width: 100%;
+}
+
+.social-embed-container .twitter-timeline {
+ display: block;
+ width: 100%;
+}
+
+/* Profile iframes (TikTok creator embed, Instagram profile embed) */
+.platform-profile-embed {
+ padding: 0;
+ min-height: unset;
+ align-items: stretch;
+}
+
+.platform-profile-iframe {
+ width: 100%;
+ height: 560px;
+ border: 0;
+ display: block;
+}
+
+.platform-profile-iframe--instagram {
+ height: 360px;
+}
+
+@media (max-width: 768px) {
+ .platform-profile-iframe {
+ height: 480px;
+ }
+
+ .platform-profile-iframe--instagram {
+ height: 300px;
+ }
+}
+
+/* ============================================================
+ YOUTUBE VIDEO GRID
+ ============================================================ */
+
+.social-video-grid {
+ background: var(--card-bg);
+ border-radius: 0 0 10px 10px;
+ padding: 20px;
+ box-shadow: var(--card-shadow);
+}
+
+.social-video-card {
+ display: flex;
+ flex-direction: column;
+ text-decoration: none !important;
+ color: var(--text-color) !important;
+ transition: transform 0.25s ease, box-shadow 0.25s ease;
+ border-radius: 8px;
+ overflow: hidden;
+ background: var(--card-bg);
+ box-shadow: var(--card-shadow);
+}
+
+.social-video-card:hover {
+ transform: translateY(-6px);
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+ color: var(--text-color) !important;
+}
+
+.social-video-card .video-thumbnail {
+ position: relative;
+ padding-top: 56.25%;
+ overflow: hidden;
+ background: #000;
+}
+
+.social-video-card .video-thumbnail img {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ transition: transform 0.3s ease;
+}
+
+.social-video-card:hover .video-thumbnail img {
+ transform: scale(1.05);
+}
+
+/* Sous-titre de section (Shorts / Vidéos) */
+.yt-subgrid-label {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ font-size: 13px;
+ font-weight: 600;
+ color: var(--text-muted, #888);
+ text-transform: uppercase;
+ letter-spacing: 0.8px;
+ padding: 16px 20px 4px;
+}
+
+.yt-subgrid-label i {
+ font-size: 12px;
+}
+
+/* Grille Shorts : cartes portrait centrées */
+.social-shorts-grid {
+ grid-template-columns: repeat(auto-fit, minmax(160px, 220px));
+ justify-content: center;
+}
+
+/* Shorts — ratio portrait 9:16 */
+.video-card--short .video-thumbnail {
+ padding-top: 177.78%;
+}
+
+.short-badge {
+ position: absolute;
+ bottom: 8px;
+ left: 8px;
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ background: #FF0000;
+ color: white;
+ font-size: 11px;
+ font-weight: 700;
+ padding: 3px 8px;
+ border-radius: 4px;
+ letter-spacing: 0.3px;
+ pointer-events: none;
+ text-transform: uppercase;
+}
+
+.youtube-play-icon {
+ font-size: 44px !important;
+ color: #FF0000 !important;
+ filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.6));
+}
+
+/* ============================================================
+ FALLBACK CARDS
+ ============================================================ */
+
+.platform-fallback-card {
+ display: flex;
+ align-items: center;
+ gap: 32px;
+ padding: 48px 40px;
+ background: var(--card-bg);
+ border-radius: 0 0 10px 10px;
+ box-shadow: var(--card-shadow);
+ flex-wrap: wrap;
+ justify-content: center;
+ text-align: center;
+ min-height: 240px;
+}
+
+.platform-fallback-icon {
+ font-size: 90px;
+ line-height: 1;
+ flex-shrink: 0;
+ opacity: 0.9;
+}
+
+.youtube-fallback-icon i { color: #FF0000; }
+
+.instagram-fallback-icon i {
+ background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+}
+
+.tiktok-fallback-icon i { color: #010101; }
+[data-theme="dark"] .tiktok-fallback-icon i { color: #ffffff; }
+
+.platform-fallback-content h3 {
+ font-size: 24px;
+ font-weight: 700;
+ margin-bottom: 10px;
+}
+
+.platform-fallback-content p {
+ font-size: 16px;
+ color: var(--text-secondary);
+ margin-bottom: 24px;
+ max-width: 380px;
+ line-height: 1.5;
+}
+
+/* ============================================================
+ INSTAGRAM POSTS GRID
+ ============================================================ */
+
+.instagram-posts-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+ gap: 20px;
+ background: var(--card-bg);
+ border-radius: 0 0 10px 10px;
+ padding: 24px;
+ box-shadow: var(--card-shadow);
+}
+
+.instagram-post-wrapper {
+ display: flex;
+ justify-content: center;
+}
+
+/* ============================================================
+ TIKTOK VIDEOS GRID
+ ============================================================ */
+
+.tiktok-videos-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+ gap: 20px;
+ background: var(--card-bg);
+ border-radius: 0 0 10px 10px;
+ padding: 24px;
+ box-shadow: var(--card-shadow);
+}
+
+.tiktok-video-wrapper {
+ display: flex;
+ justify-content: center;
+}
+
+/* ============================================================
+ WORDPRESS ARTICLES
+ ============================================================ */
+
+.wp-section-header { background: linear-gradient(135deg, #0a0a0a 0%, #1a0000 60%, #2d0000 100%); }
+
+.wp-section-logo {
+ height: 28px;
+ width: auto;
+ filter: drop-shadow(0 2px 6px rgba(255, 0, 0, 0.4));
+ flex-shrink: 0;
+}
+
+.wp-cta-btn { background: rgba(255, 255, 255, 0.2); }
+.wp-cta-btn:hover { background: rgba(255, 255, 255, 0.3); }
+
+.wp-posts-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+ gap: 20px;
+ background: var(--card-bg);
+ border-radius: 0 0 10px 10px;
+ padding: 24px;
+ box-shadow: var(--card-shadow);
+}
+
+.wp-post-card {
+ display: flex;
+ flex-direction: column;
+ text-decoration: none !important;
+ color: var(--text-color) !important;
+ border-radius: 8px;
+ overflow: hidden;
+ background: var(--card-bg);
+ box-shadow: var(--card-shadow);
+ transition: transform 0.25s ease, box-shadow 0.25s ease;
+}
+
+.wp-post-card:hover {
+ transform: translateY(-6px);
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+ color: var(--text-color) !important;
+}
+
+.wp-post-thumbnail {
+ position: relative;
+ padding-top: 56.25%;
+ overflow: hidden;
+ background: var(--border-color);
+}
+
+.wp-post-thumbnail img {
+ position: absolute;
+ top: 0; left: 0;
+ width: 100%; height: 100%;
+ object-fit: cover;
+ transition: transform 0.3s ease;
+}
+
+.wp-post-card:hover .wp-post-thumbnail img {
+ transform: scale(1.05);
+}
+
+.wp-post-thumbnail--placeholder {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.wp-post-thumbnail--placeholder i {
+ position: absolute;
+ top: 50%; left: 50%;
+ transform: translate(-50%, -50%);
+ font-size: 40px;
+ color: var(--text-secondary);
+ opacity: 0.4;
+}
+
+.wp-post-info {
+ padding: 14px 16px 16px;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ flex: 1;
+}
+
+.wp-post-title {
+ font-size: 15px;
+ font-weight: 700;
+ line-height: 1.4;
+ margin: 0;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+}
+
+.wp-post-excerpt {
+ font-size: 13px;
+ color: var(--text-secondary);
+ line-height: 1.5;
+ margin: 0;
+ display: -webkit-box;
+ -webkit-line-clamp: 3;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ flex: 1;
+}
+
+.wp-post-meta {
+ display: flex;
+ gap: 14px;
+ font-size: 12px;
+ color: var(--text-secondary);
+ margin-top: auto;
+ flex-wrap: wrap;
+}
+
+.wp-post-meta span {
+ display: flex;
+ align-items: center;
+ gap: 5px;
+}
+
+@media (max-width: 768px) {
+ .wp-posts-grid {
+ grid-template-columns: 1fr;
+ padding: 16px;
+ }
+}
+
+/* ============================================================
+ HEADER BRAND
+ ============================================================ */
+
+.header-brand {
+ display: flex;
+ align-items: center;
+ flex-shrink: 0;
+}
+
+.header-logo-link {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ text-decoration: none;
+ color: var(--text-color);
+}
+
+.header-logo-img {
+ height: 40px;
+ width: auto;
+}
+
+.header-site-name {
+ font-size: 16px;
+ font-weight: 700;
+ white-space: nowrap;
+}
+
+/* ============================================================
+ DARK THEME
+ ============================================================ */
+
+[data-theme="dark"] .social-embed-container,
+[data-theme="dark"] .platform-fallback-card,
+[data-theme="dark"] .social-video-grid,
+[data-theme="dark"] .instagram-posts-grid,
+[data-theme="dark"] .tiktok-videos-grid {
+ background: var(--card-bg);
+}
+
+/* ============================================================
+ RESPONSIVE
+ ============================================================ */
+
+@media (max-width: 1000px) {
+ .header-site-name {
+ display: none;
+ }
+}
+
+@media (max-width: 768px) {
+ .social-hero {
+ padding: 28px 20px;
+ border-radius: 8px;
+ }
+
+ .social-hero-text h1 {
+ font-size: 1.6rem;
+ }
+
+ .social-hero-logo {
+ height: 70px;
+ }
+
+ .platform-badge span {
+ display: none;
+ }
+
+ .platform-badge {
+ width: 50px;
+ height: 50px;
+ padding: 0;
+ justify-content: center;
+ border-radius: 50%;
+ font-size: 18px;
+ }
+
+ .platform-badge-count {
+ font-size: 10px;
+ }
+
+ .social-section-header {
+ padding: 14px 16px;
+ }
+
+ .social-section-header h2 {
+ font-size: 18px;
+ }
+
+ .platform-handle {
+ display: none;
+ }
+
+ .platform-fallback-card {
+ padding: 32px 20px;
+ flex-direction: column;
+ gap: 20px;
+ }
+
+ .platform-fallback-icon {
+ font-size: 70px;
+ }
+
+ .platform-fallback-content h3 {
+ font-size: 20px;
+ }
+
+ .instagram-posts-grid,
+ .tiktok-videos-grid {
+ grid-template-columns: 1fr;
+ padding: 16px;
+ }
+
+ .social-embed-container {
+ min-height: 400px;
+ padding: 4px;
+ }
+
+ .platform-profile-embed {
+ padding: 0;
+ }
+}
+
+@media (max-width: 480px) {
+ .platform-nav {
+ gap: 8px;
+ }
+
+ .social-hero-brand {
+ flex-direction: column;
+ }
+
+ .social-hero-logo {
+ height: 60px;
+ }
+}
+
+/* ============================================================
+ SCROLL ARRIVAL HIGHLIGHT
+ ============================================================ */
+
+@keyframes section-arrive {
+ 0% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.5); }
+ 40% { box-shadow: 0 0 0 10px rgba(255, 0, 0, 0.15); }
+ 100% { box-shadow: 0 0 0 18px rgba(255, 0, 0, 0); }
+}
+
+.section-arrive {
+ animation: section-arrive 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+ border-radius: 12px;
+}
diff --git a/includes/footer.php b/includes/footer.php
index 40fef0d..84612cb 100644
--- a/includes/footer.php
+++ b/includes/footer.php
@@ -1,80 +1,72 @@
-
+
diff --git a/includes/header.php b/includes/header.php
index 9011b87..c913dca 100644
--- a/includes/header.php
+++ b/includes/header.php
@@ -1,47 +1,30 @@
-
+
+