<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- ═══════════════════════════════════════════════════════════════
SEO - TITLE & DESCRIPTION POUR GOOGLE
═══════════════════════════════════════════════════════════════ -->
<title>MaSup : Éducation Premium - Programme Marocain 2026</title>
<meta name="description" content="Formations et cours premium HD pour étudiants marocains toutes les spécialités - Hébergement premium pour instructeurs. Le savoir bien transmis." />
<meta name="keywords" content="cours en ligne Maroc, CPGE, FST, ENSA, formations premium, cours vidéo HD, devenir formateur, plateforme éducative, programme marocain 2026" />
<meta name="author" content="MaSup" />
<meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />
<link rel="canonical" href="https://www.masup.ma" />
<!-- ═══════════════════════════════════════════════════════════════
OPEN GRAPH (Facebook, WhatsApp, LinkedIn, Messenger)
═══════════════════════════════════════════════════════════════ -->
<meta property="og:title" content="MaSup : Éducation Premium - Programme Marocain 2026" />
<meta property="og:description" content="Formations et cours premium HD pour étudiants marocains - Hébergement premium pour instructeurs." />
<meta property="og:image" content="https://www.masup.ma/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://www.masup.ma" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="MaSup" />
<meta property="og:locale" content="fr_MA" />
<!-- ═══════════════════════════════════════════════════════════════
TWITTER/X
═══════════════════════════════════════════════════════════════ -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="MaSup : Éducation Premium - Programme Marocain 2026" />
<meta name="twitter:description" content="Formations et cours premium HD pour étudiants marocains - Hébergement premium pour instructeurs." />
<meta name="twitter:image" content="https://www.masup.ma/og-image.png" />
<!-- ═══════════════════════════════════════════════════════════════
SCHEMA.ORG - DONNÉES STRUCTURÉES POUR GOOGLE SITELINKS
═══════════════════════════════════════════════════════════════ -->
<!-- Organization Schema -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "EducationalOrganization",
"name": "MaSup",
"alternateName": "MaSup : Éducation Premium",
"url": "https://www.masup.ma",
"logo": "https://www.masup.ma/logo.png",
"image": "https://www.masup.ma/og-image.png",
"description": "Formations et cours premium HD pour étudiants marocains toutes les spécialités - Hébergement premium pour instructeurs",
"slogan": "Le savoir bien transmis",
"foundingDate": "2024",
"areaServed": {
"@type": "Country",
"name": "Morocco"
},
"contactPoint": {
"@type": "ContactPoint",
"contactType": "customer service",
"url": "https://www.masup.ma/contact",
"availableLanguage": ["French", "Arabic"]
}
}
</script>
<!-- WebSite Schema -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "MaSup",
"alternateName": "MaSup : Éducation Premium - Programme Marocain 2026",
"url": "https://www.masup.ma",
"description": "Formations et cours premium HD pour étudiants marocains toutes les spécialités - Hébergement premium pour instructeurs",
"inLanguage": "fr-MA",
"potentialAction": {
"@type": "SearchAction",
"target": "https://www.masup.ma/search?q={search_term_string}",
"query-input": "required name=search_term_string"
}
}
</script>
<!-- SiteNavigationElement Schema (pour les Sitelinks) -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@graph": [
{
"@type": "SiteNavigationElement",
"position": 1,
"name": "Se connecter",
"description": "Connectez-vous à votre espace MaSup",
"url": "https://www.masup.ma/login"
},
{
"@type": "SiteNavigationElement",
"position": 2,
"name": "S'inscrire étudiant",
"description": "Créez votre compte étudiant gratuitement",
"url": "https://www.masup.ma/signup/student"
},
{
"@type": "SiteNavigationElement",
"position": 3,
"name": "S'inscrire formateur",
"description": "Rejoignez notre équipe de formateurs",
"url": "https://www.masup.ma/signup/instructor"
},
{
"@type": "SiteNavigationElement",
"position": 4,
"name": "Formations",
"description": "Découvrez toutes nos formations premium",
"url": "https://www.masup.ma/allformations"
},
{
"@type": "SiteNavigationElement",
"position": 5,
"name": "Devenir formateur",
"description": "Enseignez sur MaSup et partagez votre savoir",
"url": "https://www.masup.ma/enseigner"
},
{
"@type": "SiteNavigationElement",
"position": 6,
"name": "Contact",
"description": "Contactez l'équipe MaSup",
"url": "https://www.masup.ma/contact"
}
]
}
</script>
<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<!-- ✅ PRECONNECT - Ordre important ! -->
<!-- 1. Supabase (API + images) - CRITIQUE pour LCP -->
<link rel="preconnect" href="https://api.masup.ma" />
<!-- 2. Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<!-- 3. CDN -->
<link rel="preconnect" href="https://cdnjs.cloudflare.com" />
<!-- ✅ FONTS - Une seule famille (Poppins), chargement optimisé -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"
rel="stylesheet"
media="print"
onload="this.media='all'"
/>
<noscript>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet" />
</noscript>
<!-- ✅ FONT AWESOME - Chargement différé -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
media="print"
onload="this.media='all'"
/>
<noscript>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
</noscript>
<!-- ✅ CRITICAL CSS - Styles inline pour éviter le flash -->
<style>
/* Reset minimal */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Font fallback pendant le chargement */
body {
font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
background: #fff;
}
/* Loader skeleton pour éviter CLS */
#root:empty {
min-height: 100vh;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
</style>
<!-- ✅ Bunny Player - Différé (pas besoin immédiatement) -->
<script
type="text/javascript"
src="https://assets.mediadelivery.net/playerjs/playerjs-latest.min.js"
defer
></script>
<script type="module" crossorigin src="/assets/index-DIlbN1Cd.js"></script>
<link rel="modulepreload" crossorigin href="/assets/vendor-react-D8ujXLZF.js">
<link rel="modulepreload" crossorigin href="/assets/vendor-supabase-CJ3t3V4m.js">
<link rel="stylesheet" crossorigin href="/assets/index-DAWJ6YV0.css">
</head>
<body>
<div id="root"></div>
<!-- ✅ Script pour gérer le Smart App Banner iOS natif (Safari uniquement) -->
<script>
(function() {
// Fonction pour ajouter/retirer le meta tag iOS selon la page
function updateIOSBanner() {
const isStudentDashboard = window.location.pathname === '/student/dashboard';
const existingMeta = document.querySelector('meta[name="apple-itunes-app"]');
if (isStudentDashboard && !existingMeta) {
// Ajouter le meta tag sur /student/dashboard
const meta = document.createElement('meta');
meta.name = 'apple-itunes-app';
meta.content = 'app-id=6756632388';
document.head.appendChild(meta);
} else if (!isStudentDashboard && existingMeta) {
// Retirer le meta tag sur les autres pages
existingMeta.remove();
}
}
// Vérifier au chargement initial
updateIOSBanner();
// Écouter les changements de navigation (pour les SPAs)
let lastPath = window.location.pathname;
const observer = new MutationObserver(() => {
if (window.location.pathname !== lastPath) {
lastPath = window.location.pathname;
updateIOSBanner();
}
});
observer.observe(document.querySelector('#root'), {
childList: true,
subtree: true
});
})();
</script>
</body>
</html>
