*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font-b);
background: var(--blue-deep);
color: var(--white);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
/* ──────────────────────────────────────
GLOBAL HELPERS
────────────────────────────────────── */
.container {
max-width: 1140px;
margin: 0 auto;
padding: 0 24px;
}
.tag-pill {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.15);
border-radius: 40px;
padding: 8px 20px;
font-size: 13px;
font-weight: 600;
color: var(--white-70);
letter-spacing: 0.3px;
backdrop-filter: blur(8px);
}
.tag-pill .dot {
width: 6px; height: 6px;
background: var(--cyan);
border-radius: 50%;
animation: pulse 2s infinite;
}
.btn-primary {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--blue-bright);
color: #fff;
font-family: var(--font-b);
font-size: 15px;
font-weight: 700;
padding: 14px 28px;
border-radius: 40px;
border: none;
cursor: pointer;
transition: background 0.25s, transform 0.2s, box-shadow 0.25s;
box-shadow: 0 4px 24px rgba(41,82,255,0.45);
text-decoration: none;
}
.btn-primary:hover {
background: var(--blue-glow);
transform: translateY(-2px);
box-shadow: 0 8px 36px rgba(41,82,255,0.6);
}
.btn-primary .arrow {
width: 30px; height: 30px;
background: rgba(255,255,255,0.2);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
}
.btn-ghost {
display: inline-flex;
align-items: center;
gap: 8px;
background: transparent;
border: 1.5px solid var(--card-border);
color: var(--white-70);
font-size: 14px;
font-weight: 600;
padding: 10px 20px;
border-radius: 40px;
cursor: pointer;
transition: border-color 0.2s, color 0.2s;
text-decoration: none;
}
.btn-ghost:hover { border-color: var(--blue-light); color: #fff; }
/* ──────────────────────────────────────
NAVBAR
────────────────────────────────────── */
.navbar {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
padding: 18px 0;
background: rgba(10,14,42,0.7);
backdrop-filter: blur(20px);
border-bottom: 1px solid var(--card-border);
transition: padding 0.3s;
}
.navbar-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.logo {
font-family: var(--font-h);
font-size: 20px;
font-weight: 800;
color: #fff;
letter-spacing: -0.5px;
display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
}
.logo-icon {
width: 32px; height: 32px;
background: var(--blue-bright);
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
font-size: 16px;
}
.nav-links {
display: flex;
gap: 32px;
list-style: none;
}
.nav-links a {
color: var(--white-70);
font-size: 14px;
font-weight: 500;
text-decoration: none;
transition: color 0.2s;
}
.nav-links a:hover { color: #fff; }
.nav-cta { display: flex; align-items: center; gap: 12px; }
/* ──────────────────────────────────────
HERO
────────────────────────────────────── */
.hero {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 140px 0 80px;
position: relative;
text-align: center;
overflow: hidden;
}
/* Background glows */
.hero::before {
content: '';
position: absolute;
top: 10%; left: 50%;
transform: translateX(-50%);
width: 700px; height: 500px;
background: radial-gradient(ellipse, rgba(41,82,255,0.35) 0%, transparent 65%);
pointer-events: none;
}
.hero::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 300px;
background: linear-gradient(to top, var(--blue-deep) 0%, transparent 100%);
pointer-events: none;
}
/* Vertical columns (like AirLume) */
.hero-columns {
position: absolute;
inset: 0;
display: flex;
gap: 3px;
pointer-events: none;
opacity: 0.18;
}
.hero-col {
flex: 1;
background: linear-gradient(to bottom, transparent 0%, rgba(41,82,255,0.5) 50%, transparent 100%);
border-radius: 4px;
}
.hero-content {
position: relative;
z-index: 2;
max-width: 760px;
}
.hero-tag { margin-bottom: 28px; }
.hero-title {
font-family: var(--font-h);
font-size: clamp(42px, 6vw, 72px);
font-weight: 800;
line-height: 1.08;
letter-spacing: -2px;
color: #fff;
margin-bottom: 24px;
}
.hero-title .accent { color: var(--blue-light); }
.hero-subtitle {
font-size: 17px;
color: var(--white-70);
max-width: 520px;
margin: 0 auto 40px;
line-height: 1.7;
}
.hero-cta { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
/* Floating cards */
.hero-cards {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
margin-top: 72px;
flex-wrap: wrap;
}
.float-card {
background: rgba(255,255,255,0.06);
border: 1px solid var(--card-border);
border-radius: 20px;
backdrop-filter: blur(20px);
padding: 24px;
min-width: 210px;
animation: float 6s ease-in-out infinite;
}
.float-card:nth-child(2) { animation-delay: -2s; }
.float-card:nth-child(3) { animation-delay: -4s; }
.float-card-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--white-40);
margin-bottom: 6px;
}
.float-card-title {
font-family: var(--font-h);
font-size: 28px;
font-weight: 800;
color: #fff;
margin-bottom: 4px;
}
.float-card-sub {
font-size: 13px;
color: var(--white-70);
}
.float-card-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(77,223,255,0.1);
border: 1px solid rgba(77,223,255,0.25);
border-radius: 20px;
padding: 4px 12px;
font-size: 12px;
font-weight: 600;
color: var(--cyan);
margin-bottom: 12px;
}
.float-card-badge svg { width: 12px; }
/* middle card (phone mockup style) */
.center-card {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(41,82,255,0.3);
border-radius: 28px;
padding: 28px 24px;
min-width: 260px;
box-shadow: 0 0 60px rgba(41,82,255,0.25);
}
.center-card-head {
font-family: var(--font-h);
font-size: 13px;
font-weight: 700;
color: var(--white-70);
text-align: center;
margin-bottom: 20px;
}
.scan-title {
font-family: var(--font-h);
font-size: 26px;
font-weight: 800;
color: #fff;
line-height: 1.2;
margin-bottom: 16px;
}
.scan-title span { color: var(--blue-light); }
.progress-row {
display: flex;
align-items: center;
gap: 12px;
}
.progress-circle {
width: 54px; height: 54px;
border-radius: 50%;
background: conic-gradient(var(--blue-bright) 94%, rgba(255,255,255,0.1) 0%);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
position: relative;
}
.progress-circle::before {
content: '';
position: absolute;
inset: 6px;
background: var(--blue-deep);
border-radius: 50%;
}
.progress-circle span {
position: relative; z-index: 1;
font-size: 13px; font-weight: 800; color: #fff;
}
.progress-text { font-size: 13px; color: var(--white-70); line-height: 1.5; }
/* ──────────────────────────────────────
SECTION HEADERS
────────────────────────────────────── */
.section-tag { text-align: center; margin-bottom: 20px; }
.section-title {
font-family: var(--font-h);
font-size: clamp(30px, 4vw, 48px);
font-weight: 800;
letter-spacing: -1.5px;
color: #fff;
text-align: center;
line-height: 1.15;
margin-bottom: 16px;
}
.section-sub {
text-align: center;
font-size: 16px;
color: var(--white-40);
max-width: 480px;
margin: 0 auto 60px;
line-height: 1.7;
}
/* ──────────────────────────────────────
FEATURES SECTION
────────────────────────────────────── */
.features-section {
padding: 100px 0;
background: #fff;
color: var(--blue-deep);
}
.features-section .section-title { color: var(--blue-deep); }
.features-section .section-sub { color: #6B7280; }
.features-section .tag-pill {
background: rgba(41,82,255,0.08);
border-color: rgba(41,82,255,0.2);
color: var(--blue-bright);
}
.features-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
@media (max-width: 900px) { .features-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .features-grid { grid-template-columns: 1fr; } }
.feat-card {
background: #F8F9FF;
border: 1.5px solid #E8EBF8;
border-radius: 20px;
padding: 28px 24px;
transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
cursor: default;
}
.feat-card:hover {
border-color: var(--blue-bright);
transform: translateY(-4px);
box-shadow: 0 8px 32px rgba(41,82,255,0.12);
}
.feat-card.featured {
background: var(--blue-bright);
border-color: transparent;
}
.feat-card.featured .feat-title,
.feat-card.featured .feat-text,
.feat-card.featured .feat-link { color: #fff; }
.feat-card.featured .feat-icon-wrap { background: rgba(255,255,255,0.15); }
.feat-card.featured .feat-icon-wrap svg { color: #fff; }
.feat-icon-wrap {
width: 44px; height: 44px;
background: rgba(41,82,255,0.08);
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
margin-bottom: 16px;
}
.feat-icon-wrap svg { width: 22px; height: 22px; color: var(--blue-bright); }
.feat-title {
font-family: var(--font-h);
font-size: 16px;
font-weight: 700;
color: var(--blue-deep);
margin-bottom: 10px;
}
.feat-text {
font-size: 13.5px;
color: #6B7280;
line-height: 1.65;
margin-bottom: 18px;
}
.feat-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 600;
color: var(--blue-bright);
text-decoration: none;
transition: gap 0.2s;
}
.feat-link:hover { gap: 10px; }
/* ──────────────────────────────────────
PROJECT INFO (dark)
────────────────────────────────────── */
.project-section {
padding: 100px 0;
background: var(--blue-deep);
position: relative;
overflow: hidden;
}
.project-section::before {
content: '';
position: absolute;
top: -100px; right: -100px;
width: 500px; height: 500px;
background: radial-gradient(circle, rgba(41,82,255,0.2) 0%, transparent 65%);
pointer-events: none;
}
.project-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
position: relative;
z-index: 1;
}
@media (max-width: 768px) { .project-grid { grid-template-columns: 1fr; } }
.info-card {
background: var(--white-05);
border: 1px solid var(--card-border);
border-radius: 24px;
padding: 36px 32px;
backdrop-filter: blur(16px);
transition: border-color 0.3s, transform 0.3s;
}
.info-card:hover {
border-color: rgba(41,82,255,0.4);
transform: translateY(-4px);
}
.info-card-icon {
width: 48px; height: 48px;
background: var(--blue-soft);
border: 1px solid rgba(41,82,255,0.3);
border-radius: 14px;
display: flex; align-items: center; justify-content: center;
margin-bottom: 20px;
}
.info-card-icon svg { width: 24px; height: 24px; color: var(--blue-light); }
.info-card-title {
font-family: var(--font-h);
font-size: 18px;
font-weight: 700;
color: #fff;
margin-bottom: 12px;
}
.info-card-text {
font-size: 15px;
color: var(--white-70);
line-height: 1.75;
}
/* solution list */
.sol-list { list-style: none; display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.sol-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: var(--white-70); line-height: 1.65; }
.sol-dot {
flex-shrink: 0;
width: 20px; height: 20px;
border-radius: 50%;
background: var(--blue-soft);
border: 1.5px solid var(--blue-light);
display: flex; align-items: center; justify-content: center;
margin-top: 2px;
}
.sol-dot svg { width: 10px; height: 10px; color: var(--blue-light); }
/* full row */
.full-col { grid-column: 1 / -1; }
/* ──────────────────────────────────────
TECH SECTION
────────────────────────────────────── */
.tech-bar {
background: var(--blue-mid);
border: 1px solid var(--card-border);
border-radius: 24px;
padding: 36px 36px;
}
.tech-bar-title {
font-family: var(--font-h);
font-size: 16px;
font-weight: 700;
color: var(--white-70);
margin-bottom: 20px;
}
.tech-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.tech-tag {
background: rgba(41,82,255,0.12);
border: 1.5px solid rgba(41,82,255,0.3);
color: var(--blue-light);
font-family: var(--font-h);
font-size: 13px;
font-weight: 700;
padding: 8px 18px;
border-radius: 40px;
letter-spacing: 0.3px;
transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}
.tech-tag:hover {
background: var(--blue-bright);
color: #fff;
border-color: var(--blue-bright);
transform: translateY(-2px);
}
/* ──────────────────────────────────────
FOOTER
────────────────────────────────────── */
.site-footer {
background: var(--blue-mid);
border-top: 1px solid var(--card-border);
padding: 28px 0;
}
.footer-inner {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
}
.footer-brand {
font-family: var(--font-h);
font-size: 13px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--white-40);
}
.footer-brand span { color: var(--blue-light); }
.footer-link {
color: var(--white-40);
font-size: 13px;
font-weight: 500;
text-decoration: none;
transition: color 0.2s;
}
.footer-link:hover { color: #fff; }
/* ──────────────────────────────────────
ANIMATIONS
────────────────────────────────────── */
@keyframes float {
0%,100% { transform: translateY(0px); }
50% { transform: translateY(-12px); }
}
@keyframes pulse {
0%,100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.8); }
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
.hero-tag { animation: fadeUp 0.6s 0.0s ease both; }
.hero-title { animation: fadeUp 0.6s 0.1s ease both; }
.hero-subtitle { animation: fadeUp 0.6s 0.2s ease both; }
.hero-cta { animation: fadeUp 0.6s 0.3s ease both; }
.hero-cards { animation: fadeUp 0.7s 0.5s ease both; }
/* ──────────────────────────────────────
RESPONSIVE NAV
────────────────────────────────────── */
@media (max-width: 768px) {
.nav-links { display: none; }
.navbar-inner .btn-ghost { display: none; }
}
Connecte tesCompétences
DIAGORIENTE est une plateforme interactive qui aide les jeunes à analyser leurs compétences,
obtenir des formations ciblées et accéder aux meilleures opportunités d'emploi.
Jeunes orientés
24 500
Profils analysés via IA
🔍 Analyse DIAGORIENTE
Scan de 200+
94%
Précision de matching emploi-formation IA 🎯
Recommandation IA
Formation → CDDÉconomisez 28%
en temps de recherche
Fonctionnalités IA
Fonctionnalités Puissantes,
Bénéficiez d'une analyse de profil précise, de recommandations personnalisées et d'un suivi intelligent propulsé par l'IA.
Analyse IA en Temps Réel
Analyse instantanée de vos compétences pour identifier les meilleures opportunités de carrière.
En savoir plus →
Matching Emploi Intelligent
L'IA suggère des postes compatibles, plus rapides à obtenir et mieux rémunérés.
En savoir plus →
Suivi de Progression
Visualisez l'évolution de vos compétences en temps réel au fil de vos formations.
En savoir plus →
Alertes Personnalisées
Recevez des alertes sur les nouvelles offres et formations selon votre profil unique.
En savoir plus →
Intégration Employeurs
Interface admin dédiée aux recruteurs pour identifier des talents en adéquation.
En savoir plus →
Comparateur de Formations
Comparez des centaines de formations en quelques secondes pour trouver la meilleure option.
En savoir plus →
Recommandations de Postes
L'IA identifie les meilleurs postes selon vos préférences et votre secteur cible.
En savoir plus →
Candidature en 1 Clic
Postulez rapidement aux offres correspondant à votre profil avec des paiements sécurisés.
En savoir plus →
Détails du Projet
DIAGORIENTE par MYNDS
Un projet complet alliant pédagogie, IA et marché du travail pour les jeunes.
Description
Une plateforme interactive permettant aux jeunes d'analyser leurs compétences, de les valoriser grâce à des orientations, des formations ciblées et des opportunités d'emploi adaptées à leurs attentes et aspirations.
Challenge
Conception et développement d'une plateforme reliant efficacement les jeunes aux employeurs pour faciliter leur intégration rapide et durable sur le marché du travail via des outils IA avancés.
Solution
Technologies utilisées
ReactJS
React Native
NodeJS
GraphQL
Tailwind CSS
MongoDB
Express JS
