gaea21_v2/gaea21-v2-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(trajectoire): intégration complète de la page et des sous-composants Figma

Browse Source
This commit is contained in:
MohamedLoum1001
2026-09-25 20:04:07 +02:00
parent cd6a66893a
commit f66e39ab09
20 changed files with 894 additions and 292 deletions
Download Patch File Download Diff File Expand all files Collapse all files

163
assets/styles/human-employment.css
View File

@ -1,113 +1,130 @@
/* ==========================================================================
SECTION HUMAN EMPLOYMENT MODEL (FIGMA)
========================================================================== */
.hem-wrapper {
/* --- Human Employment Model --- */
.hem-section {
width: 100%;
background-color: #ffffff;
padding: 1rem 2rem 5rem 2rem;
background-color: white;
padding: 5rem 2rem;
box-sizing: border-box;
}
.hem-inner {
max-width: 1240px;
.hem-container {
max-width: 1180px;
margin: 0 auto;
}
.hem-header {
margin-bottom: 2.5rem;
}
.hem-line {
display: block;
width: 48px;
height: 4px;
background-color: #436034;
margin-bottom: 1.5rem;
}
.hem-uptitle {
display: block;
font-size: 0.95rem;
font-weight: 600;
color: #111827;
margin-bottom: 0.5rem;
}
.hem-banner-wrapper {
width: 100%;
margin-top: 3.5rem;
display: flex;
flex-direction: column;
justify-content: center;
}
/* Texte d'intro gris */
.hem-description {
.hem-banner-image {
width: 100%;
max-width: 1080px;
height: 380px;
object-fit: cover;
border-radius: 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
display: block;
}
@media (max-width: 768px) {
.hem-banner-image {
height: 220px;
border-radius: 12px;
}
}
.hem-main-title {
font-size: 2rem;
font-weight: 700;
color: #111827;
margin: 0 0 1rem 0;
}
.hem-intro-text {
font-size: 0.85rem;
line-height: 1.55;
color: #6b7280;
max-width: 780px;
margin: 0 0 2.5rem 0;
line-height: 1.6;
color: #4b5563;
margin: 0;
max-width: 800px;
}
/* Grille 4 colonnes alignées */
/* Grille 4 colonnes */
.hem-cards-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
width: 100%;
margin-bottom: 3.5rem;
box-sizing: border-box;
margin-bottom: 3rem;
}
/* Chaque carte beige */
.hem-card {
background-color: #F4F1EA;
background-color: #ede9e1;
border-radius: 12px;
padding: 1.75rem 1.4rem;
box-sizing: border-box;
min-height: 160px;
padding: 2rem 1.5rem;
min-height: 220px;
display: flex;
flex-direction: column;
}
.hem-card-title {
font-size: 0.95rem;
font-weight: 700;
color: #4B6A4A;
margin: 0 0 1rem 0;
font-size: 1.05rem;
font-weight: 600;
color: #436034;
margin: 0 0 1.25rem 0;
}
.hem-card-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.35rem;
.hem-card-content p {
font-size: 0.85rem;
line-height: 1.5;
color: #6b7280;
margin: 0 0 0.35rem 0;
}
.hem-card-list li {
font-size: 0.8rem;
color: #9A9595;
line-height: 1.45;
}
/* Phrase centrale */
.hem-phrase {
/* Phrase finale */
.hem-footer {
text-align: center;
font-size: 0.95rem;
}
.hem-footer-text {
font-size: 1rem;
color: #111827;
margin: 0 0 2rem 0;
margin: 0;
}
.hem-phrase strong {
font-weight: 700;
.hem-footer-text strong {
color: #436034;
font-weight: 600;
}
/* Image arrondie */
.hem-banner-container {
width: 100%;
max-width: 1000px;
margin: 0 auto;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.hem-banner-img {
width: 100%;
height: 480px;
object-fit: cover;
display: block;
}
/* Responsive : passage en 2 colonnes uniquement sur smartphone / écran très étroit */
@media (max-width: 720px) {
/* Responsive */
@media (max-width: 992px) {
.hem-cards-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.hem-banner-img {
height: 280px;
}
}
@media (max-width: 480px) {
@media (max-width: 600px) {
.hem-cards-grid {
grid-template-columns: 1fr;
}