/* Réinitialise tous les espacements par défaut du navigateur */
* {
    margin: 0;  /* Enlève les marges par défaut */
    padding: 0;  /* Enlève les espacements intérieurs par défaut */
    box-sizing: border-box;  /* Inclut les bordures dans la taille totale */
}

/* ===================================
   COULEURS PRINCIPALES DE L'APPLICATION
   =================================== */
:root {
    /* Couleurs violettes/indigo */
    --indigo-50: #EEF2FF;   /* Très clair */
    --indigo-100: #E0E7FF;  /* Clair */
    --indigo-600: #4F46E5;  /* Normal */
    --indigo-700: #4338CA;  /* Foncé */
    
    /* Couleurs violettes/purple */
    --purple-100: #F3E8FF;  /* Clair */
    --purple-600: #9333EA;  /* Normal */
    --purple-700: #7E22CE;  /* Foncé */
    
    /* Couleurs vertes */
    --green-100: #DCFCE7;   /* Clair */
    --green-600: #16A34A;   /* Normal */
    --green-800: #166534;   /* Foncé */
    
    /* Couleurs bleues */
    --blue-100: #DBEAFE;    /* Clair */
    --blue-800: #1E40AF;    /* Foncé */
    
    /* Couleurs rouges */
    --red-100: #FEE2E2;     /* Clair */
    --red-700: #B91C1C;     /* Foncé */
    
    /* Couleurs grises */
    --gray-50: #F9FAFB;     /* Très clair */
    --gray-200: #E5E7EB;    /* Clair */
    --gray-300: #D1D5DB;    /* Moyen clair */
    --gray-500: #6B7280;    /* Moyen */
    --gray-600: #4B5563;    /* Moyen foncé */
    --gray-700: #374151;    /* Foncé */
    --gray-800: #1F2937;    /* Très foncé */
    --gray-900: #111827;    /* Presque noir */
}

/* ===================================
   PAGE PRINCIPALE
   =================================== */
body {
    font-family: Arial, sans-serif;  /* Police de caractères */
    background: linear-gradient(135deg, var(--indigo-50) 0%, var(--purple-100) 100%);  /* Dégradé de fond */
    color: var(--gray-900);  /* Couleur du texte */
    min-height: 100vh;  /* Hauteur minimale = hauteur de l'écran */
    padding-bottom: 70px;  /* Espace en bas pour la navigation */
}

/* ===================================
   GESTION DES PAGES
   =================================== */
.page {
    display: none;  /* Cacher toutes les pages par défaut */
    padding: 20px 0;  /* Espace en haut et en bas */
}

.page.active {
    display: block;  /* Afficher la page active */
}

.container {
    max-width: 1200px;  /* Largeur maximale du contenu */
    margin: 0 auto;  /* Centrer horizontalement */
    padding: 0 16px;  /* Espace à gauche et à droite */
}

/* ===================================
   SECTION HÉRO (HAUT DE PAGE D'ACCUEIL)
   =================================== */
.hero {
    text-align: center;  /* Centrer le texte */
    margin: 40px 0 50px;  /* Espace en haut et en bas */
}

.hero-icon img {
    width: 120px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
}

.hero-title {
    font-size: 48px;  /* Taille du titre principal */
    font-weight: bold;  /* Texte en gras */
    color: var(--indigo-700);  /* Couleur violette */
    margin-bottom: 12px;  /* Espace en dessous */
}

.hero-subtitle {
    font-size: 22px;  /* Taille du sous-titre */
    color: var(--gray-700);  /* Couleur grise foncée */
    margin-bottom: 8px;  /* Espace en dessous */
}

.hero-description {
    font-size: 18px;  /* Taille de la description */
    color: var(--gray-600);  /* Couleur grise moyenne */
}

/* ===================================
   CARTES (BLOCS DE CONTENU)
   =================================== */
.card {
    background: white;  /* Fond blanc */
    border-radius: 16px;  /* Coins arrondis */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);  /* Ombre portée */
    padding: 32px;  /* Espace intérieur */
    margin-bottom: 32px;  /* Espace en dessous */
}

.section-title {
    font-size: 24px;  /* Taille du titre de section */
    font-weight: bold;  /* Texte en gras */
    color: var(--gray-800);  /* Couleur grise très foncée */
    margin-bottom: 24px;  /* Espace en dessous */
    text-align: center;
}

/* ===================================
   GRILLE DES ÉTAPES (3 COLONNES)
   =================================== */
.steps-grid {
    display: grid;  /* Utiliser une grille */
    grid-template-columns: 1fr;  /* 1 colonne sur mobile */
    gap: 24px;  /* Espace entre les éléments */
}

/* Sur tablette et plus grand : 3 colonnes */
@media (min-width: 768px) {
    .steps-grid {
        grid-template-columns: repeat(3, 1fr);  /* 3 colonnes égales */
    }
}

.step {
    text-align: center;  /* Centrer le contenu */
}

.step-icon {
    width: 64px;  /* Largeur de l'icône */
    height: 64px;  /* Hauteur de l'icône */
    border-radius: 50%;  /* Forme ronde */
    display: flex;  /* Utiliser flexbox */
    align-items: center;  /* Centrer verticalement */
    justify-content: center;  /* Centrer horizontalement */
    margin: 0 auto 16px;  /* Centrer et ajouter espace en dessous */
    font-size: 32px;  /* Taille de l'emoji/icône */
    background: var(--indigo-100);  /* Fond violet clair */
}

.step-title {
    font-size: 18px;  /* Taille du titre */
    font-weight: bold;  /* Texte en gras */
    margin-bottom: 8px;  /* Espace en dessous */
}

.step-text {
    color: var(--gray-600);  /* Couleur grise */
    font-size: 14px;  /* Taille du texte */
}

/* ===================================
   GRILLE DES ACTIONS (2 COLONNES)
   =================================== */
.action-grid {
    display: grid;  /* Utiliser une grille */
    grid-template-columns: 1fr;  /* 1 colonne sur mobile */
    gap: 24px;  /* Espace entre les boutons */
}

/* Sur tablette et plus grand : 2 colonnes */
@media (min-width: 768px) {
    .action-grid {
        grid-template-columns: repeat(2, 1fr);  /* 2 colonnes égales */
    }
}

.action-btn {
    border: none;  /* Pas de bordure */
    border-radius: 16px;  /* Coins arrondis */
    padding: 32px;  /* Espace intérieur */
    text-align: center;  /* Centrer le texte */
    color: white;  /* Texte blanc */
    cursor: pointer;  /* Curseur en forme de main */
    transition: all 0.3s;  /* Transition douce de 0.3 secondes */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);  /* Ombre portée */
}

/* Au survol de la souris */
.action-btn:hover {
    transform: translateY(-2px);  /* Déplacer vers le haut de 2px */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);  /* Ombre plus prononcée */
}

/* Couleurs des boutons d'action */
.action-btn.bg-indigo { 
    background: var(--indigo-600);  /* Fond violet */
}

.action-btn.bg-indigo:hover { 
    background: var(--indigo-700);  /* Fond violet plus foncé au survol */
}

.action-btn.bg-purple { 
    background: var(--purple-600);  /* Fond violet */
}

.action-btn.bg-purple:hover { 
    background: var(--purple-700);  /* Fond violet plus foncé au survol */
}

.action-icon {
    font-size: 48px;  /* Taille de l'icône */
    display: block;  /* Afficher en bloc */
    margin-bottom: 16px;  /* Espace en dessous */
}

.action-title {
    font-size: 24px;  /* Taille du titre */
    font-weight: bold;  /* Texte en gras */
    margin-bottom: 8px;  /* Espace en dessous */
}

.action-desc {
    font-size: 14px;  /* Taille de la description */
    opacity: 0.9;  /* Légèrement transparent */
}

/* ===================================
   TITRE DE PAGE
   =================================== */
.page-title {
    font-size: 36px;  /* Taille du titre */
    font-weight: bold;  /* Texte en gras */
    color: var(--gray-900);  /* Couleur presque noire */
    margin-bottom: 32px;  /* Espace en dessous */
}

/* ===================================
   GRILLE DES ESPACES (1, 2 ou 3 COLONNES)
   =================================== */
.workspace-grid {
    display: grid;  /* Utiliser une grille */
    grid-template-columns: 1fr;  /* 1 colonne sur mobile */
    gap: 24px;  /* Espace entre les cartes */
}

/* Sur tablette : 2 colonnes */
@media (min-width: 768px) {
    .workspace-grid {
        grid-template-columns: repeat(2, 1fr);  /* 2 colonnes égales */
    }
}

/* Sur grand écran : 3 colonnes */
@media (min-width: 1024px) {
    .workspace-grid {
        grid-template-columns: repeat(3, 1fr);  /* 3 colonnes égales */
    }
}

.workspace-card {
    background: white;  /* Fond blanc */
    border-radius: 16px;  /* Coins arrondis */
    overflow: hidden;  /* Cacher ce qui dépasse */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);  /* Ombre portée */
    transition: all 0.3s;  /* Transition douce */
}

/* Au survol de la carte */
.workspace-card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);  /* Ombre plus prononcée */
    transform: translateY(-2px);  /* Déplacer vers le haut */
}

.workspace-header {
    background: linear-gradient(135deg, var(--indigo-600) 0%, var(--purple-600) 100%);  /* Dégradé violet */
    height: 120px;  /* Hauteur fixe */
    display: flex;  /* Utiliser flexbox */
    align-items: center;  /* Centrer verticalement */
    justify-content: center;  /* Centrer horizontalement */
    font-size: 64px;  /* Taille de l'icône */
}

.workspace-body {
    padding: 24px;  /* Espace intérieur */
}

.workspace-title {
    font-size: 20px;  /* Taille du titre */
    font-weight: bold;  /* Texte en gras */
    color: var(--gray-900);  /* Couleur presque noire */
    margin-bottom: 16px;  /* Espace en dessous */
}

.workspace-desc {
    color: var(--gray-600);  /* Couleur grise */
    font-size: 14px;  /* Taille du texte */
    margin-bottom: 16px;  /* Espace en dessous */
}

/* ===================================
   BADGES DE STATUT
   =================================== */
/* Badge "Réservé" (rouge) */
.reserved-badge {
    display: inline-block;  /* Afficher en ligne mais avec dimensions */
    background: var(--red-100);  /* Fond rouge clair */
    color: var(--red-700);  /* Texte rouge foncé */
    padding: 6px 12px;  /* Espace intérieur */
    border-radius: 20px;  /* Coins très arrondis (forme de pilule) */
    font-size: 12px;  /* Taille du texte */
    font-weight: bold;  /* Texte en gras */
    margin-bottom: 12px;  /* Espace en dessous */
}

/* Badge "Disponible" (vert) */
.available-badge {
    display: inline-block;  /* Afficher en ligne mais avec dimensions */
    background: var(--green-100);  /* Fond vert clair */
    color: var(--green-800);  /* Texte vert foncé */
    padding: 6px 12px;  /* Espace intérieur */
    border-radius: 20px;  /* Coins très arrondis */
    font-size: 12px;  /* Taille du texte */
    font-weight: bold;  /* Texte en gras */
    margin-bottom: 12px;  /* Espace en dessous */
}

/* ===================================
   BOUTONS
   =================================== */
.btn {
    width: 100%;  /* Prendre toute la largeur */
    padding: 14px;  /* Espace intérieur */
    border: none;  /* Pas de bordure */
    border-radius: 12px;  /* Coins arrondis */
    font-size: 16px;  /* Taille du texte */
    font-weight: bold;  /* Texte en gras */
    cursor: pointer;  /* Curseur en forme de main */
    transition: all 0.3s;  /* Transition douce */
}

/* Bouton principal (violet) */
.btn-primary {
    background: var(--indigo-600);  /* Fond violet */
    color: white;  /* Texte blanc */
}

.btn-primary:hover {
    background: var(--indigo-700);  /* Fond plus foncé au survol */
    transform: translateY(-1px);  /* Déplacer légèrement vers le haut */
}

/* Bouton secondaire (rouge) */
.btn-secondary {
    background: var(--red-100);  /* Fond rouge clair */
    color: var(--red-700);  /* Texte rouge foncé */
}

.btn-secondary:hover {
    background: var(--red-700);  /* Fond rouge foncé au survol */
    color: white;  /* Texte blanc au survol */
}

/* Bouton désactivé (gris) */
.btn-disabled {
    background: var(--gray-300);  /* Fond gris */
    color: var(--gray-500);  /* Texte gris moyen */
    cursor: not-allowed;  /* Curseur d'interdiction */
    opacity: 0.7;  /* Légèrement transparent */
}

.btn-disabled:hover {
    background: var(--gray-300);  /* Garder la même couleur au survol */
    transform: none;  /* Pas de déplacement au survol */
}

/* Bouton texte (sans fond) */
.btn-text {
    background: none;  /* Pas de fond */
    border: none;  /* Pas de bordure */
    color: var(--indigo-600);  /* Texte violet */
    font-weight: bold;  /* Texte en gras */
    padding: 12px;  /* Espace intérieur */
    cursor: pointer;  /* Curseur en forme de main */
    font-size: 14px;  /* Taille du texte */
    width: 100%;  /* Prendre toute la largeur */
    transition: all 0.3s;  /* Transition douce */
}

.btn-text:hover {
    color: var(--indigo-700);  /* Couleur plus foncée au survol */
    text-decoration: underline;  /* Souligner au survol */
}

/* ===================================
   FENÊTRE MODALE (POPUP)
   =================================== */
.modal {
    display: none;  /* Cacher par défaut */
    position: fixed;  /* Position fixe sur l'écran */
    top: 0;  /* Coller en haut */
    left: 0;  /* Coller à gauche */
    right: 0;  /* Coller à droite */
    bottom: 0;  /* Coller en bas */
    background: rgba(0, 0, 0, 0.5);  /* Fond noir semi-transparent */
    z-index: 1000;  /* Passer au-dessus de tout */
    align-items: center;  /* Centrer verticalement */
    justify-content: center;  /* Centrer horizontalement */
    padding: 16px;  /* Espace intérieur */
}

.modal.active {
    display: flex;  /* Afficher en flexbox quand active */
}

.modal-content {
    background: white;  /* Fond blanc */
    border-radius: 16px;  /* Coins arrondis */
    padding: 32px;  /* Espace intérieur */
    max-width: 450px;  /* Largeur maximale */
    width: 100%;  /* Prendre toute la largeur disponible */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);  /* Grande ombre portée */
}

.modal-title {
    font-size: 32px;  /* Taille du titre */
    font-weight: bold;  /* Texte en gras */
    color: var(--gray-900);  /* Couleur presque noire */
    margin-bottom: 24px;  /* Espace en dessous */
}

/* ===================================
   SÉLECTEUR DE TYPE D'UTILISATEUR
   =================================== */
.user-type-selector {
    display: flex;  /* Afficher en ligne */
    gap: 8px;  /* Espace entre les boutons */
    margin-bottom: 24px;  /* Espace en dessous */
}

.type-btn {
    flex: 1;  /* Prendre l'espace disponible de manière égale */
    padding: 14px;  /* Espace intérieur */
    border: none;  /* Pas de bordure */
    border-radius: 12px;  /* Coins arrondis */
    font-size: 15px;  /* Taille du texte */
    font-weight: bold;  /* Texte en gras */
    cursor: pointer;  /* Curseur en forme de main */
    background: var(--gray-200);  /* Fond gris par défaut */
    color: var(--gray-700);  /* Texte gris foncé */
    transition: all 0.3s;  /* Transition douce */
}

.type-btn:hover {
    background: var(--gray-300);  /* Fond plus foncé au survol */
}

/* Bouton "Étudiant" sélectionné */
.type-btn.active {
    background: var(--indigo-600);  /* Fond violet */
    color: white;  /* Texte blanc */
}

/* Bouton "Entreprise" sélectionné */
.type-btn.company-active {
    background: var(--green-600);  /* Fond vert */
    color: white;  /* Texte blanc */
}

/* ===================================
   FORMULAIRE
   =================================== */
.form-group {
    margin-bottom: 24px;  /* Espace en dessous */
}

.input {
    width: 100%;  /* Prendre toute la largeur */
    padding: 14px;  /* Espace intérieur */
    border: 2px solid var(--gray-300);  /* Bordure grise */
    border-radius: 12px;  /* Coins arrondis */
    font-size: 15px;  /* Taille du texte */
    margin-bottom: 12px;  /* Espace en dessous */
    transition: all 0.3s;  /* Transition douce */
}

/* Quand on clique dans le champ */
.input:focus {
    outline: none;  /* Enlever le contour par défaut du navigateur */
    border-color: var(--indigo-600);  /* Bordure violette */
}

/* Au survol du champ */
.input:hover {
    border-color: var(--gray-400);  /* Bordure grise plus foncée */
}

/* Zone de texte (textarea) */
textarea.input {
    resize: vertical;  /* Permettre de redimensionner seulement verticalement */
}

/* ===================================
   PROFIL
   =================================== */
.profile-card {
    background: white;  /* Fond blanc */
    border-radius: 16px;  /* Coins arrondis */
    padding: 32px;  /* Espace intérieur */
    margin-bottom: 24px;  /* Espace en dessous */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);  /* Ombre portée */
}

.profile-name {
    font-size: 32px;  /* Taille du nom */
    font-weight: bold;  /* Texte en gras */
    color: var(--gray-900);  /* Couleur presque noire */
    margin-bottom: 12px;  /* Espace en dessous */
}

.badge {
    display: inline-block;  /* Afficher en ligne mais avec dimensions */
    padding: 8px 16px;  /* Espace intérieur */
    border-radius: 20px;  /* Coins très arrondis */
    font-size: 14px;  /* Taille du texte */
    font-weight: bold;  /* Texte en gras */
}

/* Badge étudiant (bleu) */
.badge.student {
    background: var(--blue-100);  /* Fond bleu clair */
    color: var(--blue-800);  /* Texte bleu foncé */
}

/* Badge entreprise (vert) */
.badge.company {
    background: var(--green-100);  /* Fond vert clair */
    color: var(--green-800);  /* Texte vert foncé */
}

.logout-btn {
    padding: 12px 20px;  /* Espace intérieur */
    background: var(--red-100);  /* Fond rouge clair */
    color: var(--red-700);  /* Texte rouge foncé */
    border: none;  /* Pas de bordure */
    border-radius: 12px;  /* Coins arrondis */
    font-weight: bold;  /* Texte en gras */
    cursor: pointer;  /* Curseur en forme de main */
    margin-top: 16px;  /* Espace en haut */
    transition: all 0.3s;  /* Transition douce */
}

.logout-btn:hover {
    background: var(--red-700);  /* Fond rouge foncé au survol */
    color: white;  /* Texte blanc au survol */
}

/* ===================================
   RÉSERVATIONS
   =================================== */
.reservations-section {
    background: white;  /* Fond blanc */
    border-radius: 16px;  /* Coins arrondis */
    padding: 32px;  /* Espace intérieur */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);  /* Ombre portée */
}

.reservation-item {
    border: 2px solid var(--gray-200);  /* Bordure grise */
    border-radius: 12px;  /* Coins arrondis */
    padding: 16px;  /* Espace intérieur */
    margin-bottom: 16px;  /* Espace en dessous */
    transition: all 0.3s;  /* Transition douce */
}

/* Au survol de la réservation */
.reservation-item:hover {
    background: var(--gray-50);  /* Fond gris très clair */
    border-color: var(--indigo-200);  /* Bordure violette claire */
}

.reservation-header {
    display: flex;  /* Afficher en ligne */
    justify-content: space-between;  /* Espacer les éléments aux extrémités */
    align-items: flex-start;  /* Aligner en haut */
    margin-bottom: 8px;  /* Espace en dessous */
}

.status-badge {
    background: var(--green-100);  /* Fond vert clair */
    color: var(--green-800);  /* Texte vert foncé */
    padding: 4px 12px;  /* Espace intérieur */
    border-radius: 12px;  /* Coins arrondis */
    font-size: 12px;  /* Taille du texte */
    font-weight: bold;  /* Texte en gras */
}

#addWorkspaceBtn {
    margin-bottom: 24px;
    
}

/* ===================================
   SECTION DE FILTRES (ÉTUDIANTS)
   =================================== */
.filter-section {
    background: white;  /* Fond blanc */
    border-radius: 16px;  /* Coins arrondis */
    padding: 24px;  /* Espace intérieur */
    margin-bottom: 32px;  /* Espace en dessous */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);  /* Ombre portée */
}

.filter-title {
    font-size: 20px;  /* Taille du titre */
    font-weight: bold;  /* Texte en gras */
    color: var(--gray-800);  /* Couleur grise foncée */
    margin-bottom: 16px;  /* Espace en dessous */
}

/* Grille des filtres (2 ou 3 colonnes selon l'écran) */
.filter-grid {
    display: grid;  /* Utiliser une grille */
    grid-template-columns: 1fr;  /* 1 colonne sur mobile */
    gap: 16px;  /* Espace entre les filtres */
    margin-bottom: 20px;  /* Espace en dessous */
}

/* Sur tablette : 2 colonnes */
@media (min-width: 768px) {
    .filter-grid {
        grid-template-columns: repeat(2, 1fr);  /* 2 colonnes égales */
    }
}

/* Sur grand écran : 3 colonnes */
@media (min-width: 1024px) {
    .filter-grid {
        grid-template-columns: repeat(3, 1fr);  /* 3 colonnes égales */
    }
}

.filter-item {
    display: flex;  /* Utiliser flexbox */
    flex-direction: column;  /* Empiler verticalement */
    gap: 8px;  /* Espace entre le label et l'input */
}

.filter-item label {
    font-size: 14px;  /* Taille du texte */
    font-weight: bold;  /* Texte en gras */
    color: var(--gray-700);  /* Couleur grise foncée */
}

/* Boutons d'action des filtres */
.filter-actions {
    display: flex;  /* Afficher en ligne */
    gap: 12px;  /* Espace entre les boutons */
    flex-wrap: wrap;  /* Permettre le retour à la ligne sur mobile */
}

/* Texte du compteur de résultats */
.filter-results {
    margin-top: 16px;  /* Espace en haut */
    font-size: 14px;  /* Taille du texte */
    color: var(--indigo-600);  /* Couleur violette */
    font-weight: bold;  /* Texte en gras */
}


/* ===================================
   NAVIGATION DU BAS (MENU FIXE)
   =================================== */
.bottom-nav {
    position: fixed;  /* Position fixe sur l'écran */
    bottom: 0;  /* Coller en bas */
    left: 0;  /* Coller à gauche */
    right: 0;  /* Coller à droite */
    background: white;  /* Fond blanc */
    border-top: 1px solid var(--gray-200);  /* Bordure en haut */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);  /* Ombre vers le haut */
    display: flex;  /* Afficher en ligne */
    justify-content: space-around;  /* Répartir l'espace également */
    align-items: center;  /* Centrer verticalement */
    height: 70px;  /* Hauteur fixe */
    z-index: 100;  /* Passer au-dessus du contenu */
}

.nav-btn {
    display: flex;  /* Utiliser flexbox */
    flex-direction: column;  /* Empiler verticalement */
    align-items: center;  /* Centrer horizontalement */
    justify-content: center;  /* Centrer verticalement */
    gap: 4px;  /* Espace entre icône et texte */
    padding: 8px 20px;  /* Espace intérieur */
    border: none;  /* Pas de bordure */
    background: none;  /* Pas de fond */
    color: var(--gray-500);  /* Couleur grise par défaut */
    cursor: pointer;  /* Curseur en forme de main */
    transition: all 0.3s;  /* Transition douce */
}

.nav-btn:hover {
    color: var(--indigo-600);  /* Couleur violette au survol */
}

.nav-btn.active {
    color: var(--indigo-600);  /* Couleur violette quand actif */
}

.nav-icon {
    font-size: 24px;  /* Taille de l'icône */
}

.nav-label {
    font-size: 12px;  /* Taille du texte */
    font-weight: bold;  /* Texte en gras */
}

/* ===================================
   RESPONSIVE (POUR MOBILE)
   =================================== */
/* Sur écran de moins de 768px de large */
@media (max-width: 767px) {
    .hero-title {
        font-size: 36px;  /* Titre plus petit sur mobile */
    }

    .hero-subtitle {
        font-size: 18px;  /* Sous-titre plus petit */
    }

    .hero-description {
        font-size: 16px;  /* Description plus petite */
    }

    .page-title {
        font-size: 28px;  /* Titre de page plus petit */
    }

    .action-title {
        font-size: 20px;  /* Titre d'action plus petit */
    }

    .modal-content {
        padding: 24px;  /* Moins d'espace intérieur */
    }

    .modal-title {
        font-size: 24px;  /* Titre de la modale plus petit */
    }
}