/*
 * CSS CONSOLIDÉ GÉNÉRÉ DYNAMIQUEMENT
 * Généré le : 2026-01-15 16:13:41
 * Ce fichier combine automatiquement tous les fichiers CSS source
 * pour garantir que TOUTES les modifications sont prises en compte
 */

/* ============================================
   FICHIER : style.css
   Modifié le : 2026-01-14 18:22:25
   ============================================ */

/* 
 * Styles CSS pour le site d'esthéticienne
 * Palette de couleurs : rose foncé, blanc pur, gris clair
 * Design responsive et moderne
 */

/* Variables CSS pour la cohérence des couleurs */
:root {
    /* Couleurs principales */
    --primary-rose: #C2185B;        /* Rose foncé principal - meilleur contraste */
    --light-rose: #F48FB1;          /* Rose moyen - meilleure lisibilité */
    --dark-rose: #AD1457;           /* Rose très foncé pour les accents */
    --white: #FFFFFF;               /* Blanc pur */
    --light-gray: #FAFAFA;          /* Gris très clair proche du blanc */
    --medium-gray: #F0F0F0;         /* Gris moyen très clair */
    --dark-gray: #E0E0E0;           /* Gris foncé très clair */
    --text-dark: #888888;           /* Texte foncé plus clair */
    --text-light: #D0D0D0;          /* Texte clair plus clair */
    
    /* Couleurs de statut */
    --success: #4CAF50;             /* Vert pour les succès */
    --warning: #FF9800;             /* Orange pour les avertissements */
    --error: #F44336;               /* Rouge pour les erreurs */
    --info: #2196F3;                /* Bleu pour les informations */
    
    /* Typographie */
    --font-primary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-heading: 'Playfair Display', Georgia, serif;
    
    /* Espacements */
    --spacing-xs: 0.5rem;           /* 8px */
    --spacing-sm: 1rem;             /* 16px */
    --spacing-md: 1.5rem;           /* 24px */
    --spacing-lg: 2rem;             /* 32px */
    --spacing-xl: 3rem;             /* 48px */
    
    /* Rayons de bordure */
    --border-radius: 8px;
    --border-radius-lg: 12px;
    
    /* Ombres */
    --shadow-light: 0 2px 4px rgba(0,0,0,0.1);
    --shadow-medium: 0 4px 8px rgba(0,0,0,0.15);
    --shadow-heavy: 0 8px 16px rgba(0,0,0,0.2);
    
    /* Transitions */
    --transition: all 0.3s ease;
}

/* Reset CSS et styles de base */
* {
    margin: 0;                      /* Suppression des marges par défaut */
    padding: 0;                     /* Suppression des paddings par défaut */
    box-sizing: border-box;         /* Inclut padding et border dans la largeur */
}

html {
    font-size: 16px;                /* Taille de police de base */
    scroll-behavior: smooth;        /* Défilement fluide */
    overflow-x: hidden !important; /* Empêche le défilement horizontal */
    width: 100%;                    /* Largeur fixe à 100% */
    max-width: 100%;                /* Largeur maximale à 100% */
    position: relative;             /* Position relative */
}

body {
    font-family: var(--font-primary);  /* Police principale */
    line-height: 1.6;               /* Interligne pour la lisibilité */
    color: var(--text-dark);        /* Couleur du texte */
    background-color: var(--white); /* Fond blanc */
    overflow-x: hidden !important; /* Masque le défilement horizontal */
    width: 100%;                    /* Largeur fixe à 100% */
    max-width: 100%;                /* Largeur maximale à 100% */
    position: relative;             /* Position relative */
}

/* Empêcher tous les éléments de dépasser la largeur de leur conteneur */
section,
.section-enhanced,
.reviews-section,
.contact-section,
.hero,
.footer {
    overflow-x: hidden !important;
    box-sizing: border-box;
}

/* Supprimer toutes les barres de défilement internes des conteneurs */
.container {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    box-sizing: border-box;
}

/* Exception pour le menu mobile qui a besoin de scroll */
.nav {
    overflow-y: auto !important;
}

/* Supprimer les barres de défilement verticales indésirables sans modifier la structure */
.hero-banner,
.section-enhanced,
.services-grid-enhanced,
.section-header {
    overflow-x: hidden !important;
    overflow-y: visible !important;
}

/* Supprimer les barres de défilement verticales des conteneurs dans ces sections */
.hero .container,
.section-enhanced .container,
#services .container,
#apropos .container {
    overflow-y: visible !important;
}

/* Le carrousel garde son overflow pour fonctionner correctement mais sans barre de défilement visible */
.hero-carousel {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
}

/* Supprimer les barres de défilement verticales des slides du carrousel */
.carousel-slide {
    overflow-y: visible !important;
}

/* Supprimer les barres de défilement verticales indésirables des conteneurs et sections */
section,
.section-enhanced,
.hero,
.hero-banner,
.container,
div[class*="container"],
div[class*="section"],
div[class*="grid"] {
    overflow-y: visible !important;
}

/* Exception pour le menu mobile qui a besoin de scroll */
.nav {
    overflow-y: auto !important;
}

/* Exception pour le carrousel qui a besoin de overflow hidden */
.hero-carousel {
    overflow-y: hidden !important;
}

/* Exception pour les slides du carrousel */
.hero-carousel .carousel-slide {
    overflow-y: visible !important;
}

/* Typographie - Tous les textes importants utilisent Playfair Display */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading); /* Police pour les titres */
    font-weight: 600;               /* Poids de police pour les titres */
    line-height: 1.2;               /* Interligne réduit pour les titres */
    margin-bottom: var(--spacing-sm); /* Marge inférieure */
    color: var(--text-dark);        /* Couleur des titres */
}

/* Application de la police Playfair Display à tous les textes importants */
.section-title,
.section-subtitle,
.hero-banner h1,
.hero-banner-content h1,
.hero h1,
.hero-content h1,
.service-card-title,
.card-title,
.review-card h3,
.review-card h4,
.about-section h2,
.about-section h3,
.contact-section h2,
.contact-section h3,
.logo,
.logo span,
.logo a,
.nav a,
/* Application de la police Playfair Display à tous les textes importants */
.btn-primary,
.btn-secondary,
.btn-enhanced,
.card-enhanced-title,
.service-card-enhanced .service-card-title,
.footer h3,
.footer-section h3,
.service-card-price,
.review-card h3,
.review-card h4,
.about-section h2,
.about-section h3,
.contact-section h2,
.contact-section h3 {
    font-family: var(--font-heading) !important; /* Police Playfair Display pour tous les textes importants */
}

h1 { font-size: 2.5rem; }          /* Taille du titre principal */
h2 { font-size: 2rem; }            /* Taille du titre secondaire */
h3 { font-size: 1.5rem; }          /* Taille du titre tertiaire */
h4 { font-size: 1.25rem; }         /* Taille du titre quaternaire */
h5 { font-size: 1.125rem; }        /* Taille du titre quinaire */
h6 { font-size: 1rem; }            /* Taille du titre senaire */

p {
    margin-bottom: var(--spacing-sm); /* Marge inférieure pour les paragraphes */
    color: var(--text-dark);        /* Couleur du texte */
}

a {
    color: var(--dark-rose);        /* Couleur des liens */
    text-decoration: none;          /* Suppression du soulignement */
    transition: var(--transition);  /* Transition fluide */
}

a:hover {
    color: var(--primary-rose);     /* Couleur au survol */
    text-decoration: underline;     /* Soulignement au survol */
}

/* Structure de la page */
.container {
    width: 100%;                    /* Largeur complète */
    max-width: 1200px;              /* Largeur maximale du conteneur */
    margin: 0 auto;                 /* Centrage horizontal */
    padding: 0 var(--spacing-sm);   /* Padding horizontal */
    box-sizing: border-box;         /* Inclut padding dans la largeur */
    overflow-x: hidden !important; /* Empêche le débordement horizontal */
    position: relative;            /* Position relative pour les éléments enfants */
}

/* Sur mobile, réduire le padding pour éviter le débordement */
@media (max-width: 768px) {
    .container {
        padding: 0 1rem;           /* Padding réduit sur mobile */
        max-width: 100%;            /* Pas de limite de largeur sur mobile */
        width: 100%;                /* Largeur fixe à 100% */
    }
    
    /* S'assurer que tous les éléments respectent la largeur de l'écran */
    * {
        max-width: 100%;
    }
    
    /* Empêcher les images de dépasser */
    img {
        max-width: 100%;
        height: auto;
    }
}

/* En-tête */
.header {
    background: linear-gradient(135deg, var(--white) 0%, var(--light-rose) 100%); /* Dégradé subtil */
    box-shadow: var(--shadow-light); /* Ombre légère */
    position: sticky;               /* En-tête collant */
    top: 0;                         /* Position en haut */
    z-index: 99998;                /* Z-index élevé mais inférieur au menu */
    width: 100%;                    /* Largeur complète */
    max-width: 100%;                /* Largeur maximale */
    overflow-x: hidden;            /* Empêche le débordement horizontal */
    box-sizing: border-box;        /* Inclut padding dans la largeur */
}

.header-content {
    display: flex;                  /* Layout flexbox */
    align-items: center;            /* Alignement vertical */
    justify-content: space-between; /* Espacement entre les éléments */
    padding: var(--spacing-sm) 0;   /* Padding vertical */
    position: relative;             /* Position relative pour le menu absolu */
}

.logo {
    display: flex;                  /* Layout flexbox */
    align-items: center;            /* Alignement vertical */
    font-family: var(--font-heading); /* Police pour le logo */
    font-size: 1.5rem;             /* Taille du logo */
    font-weight: 700;               /* Poids de police */
    color: var(--dark-rose);        /* Couleur du logo */
}

.logo img {
    width: 40px !important;                    /* Largeur de l'image du logo */
    height: 40px !important;                   /* Hauteur de l'image du logo */
    margin-right: var(--spacing-xs); /* Marge à droite */
    border-radius: 50% !important;             /* Forme circulaire */
    object-fit: cover !important;              /* Ajustement de l'image pour remplir le cercle */
    flex-shrink: 0;                            /* Empêche la réduction du logo */
}

/* Lien du logo pour l'accès administrateur */
.logo a {
    display: flex;                  /* Layout flexbox */
    align-items: center;            /* Alignement vertical */
    text-decoration: none;          /* Suppression du soulignement */
    color: inherit;                 /* Hériter de la couleur du parent */
    transition: var(--transition);   /* Transition douce */
    cursor: pointer;                /* Curseur pointer */
}

.logo a:hover {
    color: var(--primary-rose);     /* Couleur rose au survol */
    transform: scale(1.05);         /* Légère augmentation de taille */
}

.logo a:focus {
    outline: 2px solid var(--primary-rose); /* Contour au focus */
    outline-offset: 2px;            /* Décallage du contour */
    border-radius: var(--border-radius); /* Coins arrondis */
}

/* Navigation - Desktop par défaut */
.nav {
    display: flex;                  /* Layout flexbox */
    list-style: none;               /* Suppression des puces */
    gap: var(--spacing-md);         /* Espacement entre les éléments */
    margin: 0;
    padding: 0;
}

.nav a {
    padding: var(--spacing-xs) var(--spacing-sm); /* Padding pour les liens */
    border-radius: var(--border-radius); /* Rayon de bordure */
    transition: var(--transition);  /* Transition fluide */
    font-weight: 500;               /* Poids de police */
}

.nav a:hover {
    background-color: var(--light-rose); /* Fond au survol */
    color: var(--dark-rose);        /* Couleur au survol */
    text-decoration: none;          /* Suppression du soulignement */
}

/* Bouton hamburger pour mobile */
.mobile-menu-toggle {
    display: none;                  /* Masqué par défaut - visible uniquement sur mobile */
    background: none;               /* Pas de fond */
    border: none;                   /* Pas de bordure */
    font-size: 1.5rem;             /* Taille de police */
    color: var(--dark-rose);        /* Couleur */
    cursor: pointer;                /* Curseur pointeur */
    padding: var(--spacing-xs);     /* Padding */
}

/* Section héro */
.hero {
    background: linear-gradient(135deg, var(--light-rose) 0%, var(--white) 100%); /* Dégradé */
    padding: var(--spacing-xl) 0;   /* Padding vertical */
    text-align: center;             /* Centrage du texte */
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
    box-sizing: border-box;
}

.hero-content h1 {
    font-size: 3rem;                /* Taille du titre principal */
    margin-bottom: var(--spacing-md); /* Marge inférieure */
    color: var(--dark-rose);        /* Couleur du titre */
}

.hero-content p {
    font-family: var(--font-heading) !important; /* Police Playfair Display */
    font-size: 1.25rem;             /* Taille du texte */
    margin-bottom: var(--spacing-lg); /* Marge inférieure */
    color: var(--text-dark);        /* Couleur du texte */
    max-width: 600px;               /* Largeur maximale */
    margin-left: auto;              /* Centrage horizontal */
    margin-right: auto;             /* Centrage horizontal */
}

/* Boutons */
.btn {
    display: inline-block;          /* Affichage en ligne */
    padding: var(--spacing-sm) var(--spacing-md); /* Padding */
    border: none;                   /* Pas de bordure */
    border-radius: var(--border-radius); /* Rayon de bordure */
    font-size: 1rem;                /* Taille de police */
    font-weight: 500;               /* Poids de police */
    text-align: center;             /* Centrage du texte */
    cursor: pointer;                /* Curseur pointeur */
    transition: var(--transition);  /* Transition fluide */
    text-decoration: none;          /* Suppression du soulignement */
}

.btn-primary {
    background-color: var(--dark-rose); /* Fond rose foncé */
    color: var(--white) !important;            /* Texte blanc - forcé avec !important */
    font-family: var(--font-heading) !important; /* Police Playfair Display */
}

.btn-primary:hover {
    background-color: var(--primary-rose); /* Fond rose au survol */
    color: var(--white) !important;            /* Texte blanc au survol - forcé avec !important */
    text-decoration: none;          /* Suppression du soulignement */
    transform: translateY(-2px);    /* Légère élévation */
    box-shadow: var(--shadow-medium); /* Ombre au survol */
}

.btn-secondary {
    background-color: transparent;  /* Fond transparent */
    color: var(--dark-rose);        /* Texte rose foncé */
    border: 2px solid var(--dark-rose); /* Bordure rose */
    font-family: var(--font-heading) !important; /* Police Playfair Display */
}

.btn-secondary:hover {
    background-color: var(--dark-rose); /* Fond rose au survol */
    color: var(--white);            /* Texte blanc au survol */
    text-decoration: none;          /* Suppression du soulignement */
}

.btn-large {
    padding: var(--spacing-md) var(--spacing-lg); /* Padding plus grand */
    font-size: 1.125rem;            /* Taille de police plus grande */
}

/* Grille de services */
.services-grid {
    display: grid;                  /* Layout en grille */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Colonnes adaptatives */
    gap: 2.5rem;                   /* Espacement horizontal et vertical généreux */
    padding: var(--spacing-xl) 0;   /* Padding vertical */
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
    box-sizing: border-box;
}

.service-card {
    background: var(--white);       /* Fond blanc */
    border-radius: var(--border-radius-lg); /* Rayon de bordure */
    padding: var(--spacing-lg);     /* Padding */
    box-shadow: var(--shadow-light); /* Ombre légère */
    transition: var(--transition);  /* Transition fluide */
    text-align: center;             /* Centrage du texte */
}

.service-card:hover {
    transform: translateY(-5px);    /* Élévation au survol */
    box-shadow: var(--shadow-heavy); /* Ombre plus prononcée */
}

.service-icon {
    width: 80px;                    /* Largeur de l'icône */
    height: 80px;                   /* Hauteur de l'icône */
    background-color: var(--light-rose); /* Fond rose clair */
    border-radius: 50%;             /* Forme circulaire */
    display: flex;                  /* Layout flexbox */
    align-items: center;            /* Alignement vertical */
    justify-content: center;        /* Alignement horizontal */
    margin: 0 auto var(--spacing-md); /* Marge automatique et inférieure */
    font-size: 2rem;                /* Taille de l'icône */
    color: var(--dark-rose);        /* Couleur de l'icône */
}

.service-price {
    font-size: 1.5rem;              /* Taille de police */
    font-weight: 700;               /* Poids de police */
    color: var(--dark-rose);        /* Couleur */
    margin: var(--spacing-sm) 0;    /* Marges */
}

/* Formulaire de réservation */
.booking-form {
    background: var(--light-gray);  /* Fond gris clair */
    padding: var(--spacing-xl);     /* Padding */
    border-radius: var(--border-radius-lg); /* Rayon de bordure */
    margin: var(--spacing-xl) 0;    /* Marges */
}

.form-group {
    margin-bottom: var(--spacing-md); /* Marge inférieure */
}

.form-label {
    display: block;                 /* Affichage en bloc */
    margin-bottom: var(--spacing-xs); /* Marge inférieure */
    font-weight: 500;               /* Poids de police */
    color: var(--text-dark);        /* Couleur du texte */
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;                    /* Largeur complète */
    padding: var(--spacing-sm);     /* Padding */
    border: 2px solid var(--medium-gray); /* Bordure grise */
    border-radius: var(--border-radius); /* Rayon de bordure */
    font-size: 1rem;                /* Taille de police */
    transition: var(--transition);  /* Transition fluide */
    background-color: var(--white); /* Fond blanc */
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;                  /* Suppression du contour */
    border-color: var(--dark-rose); /* Bordure rose au focus */
    box-shadow: 0 0 0 3px rgba(173, 20, 87, 0.1); /* Ombre rose */
}

.form-textarea {
    resize: vertical;               /* Redimensionnement vertical uniquement */
    min-height: 100px;              /* Hauteur minimale */
}

/* Calendrier */
.calendar {
    background: var(--white);       /* Fond blanc */
    border-radius: var(--border-radius-lg); /* Rayon de bordure */
    padding: var(--spacing-lg);     /* Padding */
    box-shadow: var(--shadow-light); /* Ombre légère */
}

.calendar-header {
    display: flex;                  /* Layout flexbox */
    justify-content: space-between; /* Espacement entre les éléments */
    align-items: center;            /* Alignement vertical */
    margin-bottom: var(--spacing-md); /* Marge inférieure */
}

.calendar-nav {
    background: none;               /* Pas de fond */
    border: none;                   /* Pas de bordure */
    font-size: 1.5rem;             /* Taille de police */
    color: var(--dark-rose);        /* Couleur */
    cursor: pointer;                /* Curseur pointeur */
    padding: var(--spacing-xs);     /* Padding */
    border-radius: var(--border-radius); /* Rayon de bordure */
    transition: var(--transition);  /* Transition fluide */
}

.calendar-nav:hover {
    background-color: var(--light-rose); /* Fond rose au survol */
}

.calendar-grid {
    display: grid;                  /* Layout en grille */
    grid-template-columns: repeat(7, 1fr); /* 7 colonnes (jours de la semaine) */
    gap: 1px;                       /* Espacement minimal */
    background-color: var(--medium-gray); /* Fond gris */
    border-radius: var(--border-radius); /* Rayon de bordure */
    overflow: hidden;               /* Masquage du débordement */
}

.calendar-day {
    background: var(--white);       /* Fond blanc */
    padding: var(--spacing-sm);     /* Padding */
    text-align: center;             /* Centrage du texte */
    cursor: pointer;                /* Curseur pointeur */
    transition: var(--transition);  /* Transition fluide */
    min-height: 40px;               /* Hauteur minimale */
    display: flex;                  /* Layout flexbox */
    align-items: center;            /* Alignement vertical */
    justify-content: center;        /* Alignement horizontal */
}

.calendar-day:hover {
    background-color: var(--light-rose); /* Fond rose au survol */
}

.calendar-day.available {
    background-color: var(--light-rose); /* Fond rose pour les jours disponibles */
}

.calendar-day.selected {
    background-color: var(--dark-rose); /* Fond rose foncé pour le jour sélectionné */
    color: var(--white);            /* Texte blanc */
}

.calendar-day.disabled {
    background-color: var(--light-gray); /* Fond gris pour les jours non disponibles */
    color: var(--text-light);       /* Texte clair */
    cursor: not-allowed;            /* Curseur interdit */
}

.calendar-day.past-with-slots {
    background-color: var(--light-rose); /* Fond rose pour les dates passées avec créneaux */
    border: 2px solid var(--dark-rose);  /* Bordure rose pour indiquer la disponibilité */
    color: var(--dark-rose);        /* Texte rose foncé */
    cursor: pointer;                /* Curseur pointeur */
    position: relative;             /* Position relative pour l'indicateur */
}

.calendar-day.past-with-slots::after {
    content: "⏰";                  /* Icône horloge pour indiquer les créneaux futurs */
    position: absolute;             /* Position absolue */
    top: 2px;                      /* En haut à droite */
    right: 2px;
    font-size: 0.7rem;             /* Taille réduite */
    color: var(--dark-rose);       /* Couleur rose foncé */
}

.calendar-day.weekend {
    background-color: var(--light-gray); /* Fond gris pour les week-ends */
}

/* Créneaux horaires */
.time-slots {
    display: grid;                  /* Layout en grille */
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Colonnes adaptatives */
    gap: var(--spacing-xs);         /* Espacement entre les éléments */
    margin-top: var(--spacing-md);  /* Marge supérieure */
}

.time-slot {
    padding: var(--spacing-sm);     /* Padding */
    border: 2px solid var(--medium-gray); /* Bordure grise */
    border-radius: var(--border-radius); /* Rayon de bordure */
    text-align: center;             /* Centrage du texte */
    cursor: pointer;                /* Curseur pointeur */
    transition: var(--transition);  /* Transition fluide */
    background-color: var(--white); /* Fond blanc */
}

.time-slot:hover {
    border-color: var(--dark-rose); /* Bordure rose au survol */
    background-color: var(--light-rose); /* Fond rose au survol */
}

.time-slot.selected {
    border-color: var(--dark-rose); /* Bordure rose */
    background-color: var(--dark-rose); /* Fond rose foncé */
    color: var(--white);            /* Texte blanc */
}

.time-slot.disabled {
    background-color: var(--light-gray); /* Fond gris */
    color: var(--text-light);       /* Texte clair */
    cursor: not-allowed;            /* Curseur interdit */
    border-color: var(--light-gray); /* Bordure grise */
}

/* Système d'avis */
.reviews-section {
    background: var(--light-gray);  /* Fond gris clair */
    padding: var(--spacing-xl) 0;   /* Padding vertical */
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
    box-sizing: border-box;
}

/* Conteneur du carrousel d'avis professionnel */
.reviews-carousel-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
}

.reviews-carousel-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
}

.reviews-carousel-track {
    display: flex;
    gap: 3rem; /* Espacement horizontal généreux entre les cartes */
    will-change: transform;
    backface-visibility: hidden;
    padding: 1rem 0; /* Espacement vertical pour aérer l'affichage */
}

.review-card {
    font-family: var(--font-heading) !important; /* Police Playfair Display pour les textes importants */
    background: var(--white);       /* Fond blanc */
    padding: var(--spacing-lg);     /* Padding */
    border-radius: var(--border-radius-lg); /* Rayon de bordure */
    margin-bottom: var(--spacing-lg); /* Marge inférieure augmentée */
    box-shadow: var(--shadow-light); /* Ombre légère */
}

/* Styles spécifiques pour les items du carrousel */
.reviews-carousel-track .carousel-item {
    margin-bottom: 0;
    min-width: 0;
}

.review-header {
    display: flex;                  /* Layout flexbox */
    justify-content: space-between; /* Espacement entre les éléments */
    align-items: center;            /* Alignement vertical */
    margin-bottom: var(--spacing-sm); /* Marge inférieure */
}

.review-rating {
    display: flex;                  /* Layout flexbox */
    gap: var(--spacing-xs);         /* Espacement entre les étoiles */
}

.star {
    color: #FFD700;                 /* Couleur dorée pour les étoiles */
    font-size: 1.2rem;              /* Taille des étoiles */
}

.star.empty {
    color: var(--medium-gray);      /* Couleur grise pour les étoiles vides */
}

/* Section Contact */
.contact-section {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
    box-sizing: border-box;
}

/* Logo circulaire avec effet de survol dans la section À propos */
.about-logo-container {
    width: 300px;
    height: 300px;
    min-width: 300px;
    min-height: 300px;
    max-width: 300px;
    max-height: 300px;
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg, var(--primary-rose), var(--light-rose));
    border-radius: 50% !important;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden !important;
    padding: 0;
    position: relative;
    transition: all 0.3s ease;
    cursor: pointer;
    clip-path: circle(50%);
    box-shadow: 0 0 30px rgba(244, 143, 177, 0.6),
                0 0 60px rgba(244, 143, 177, 0.4),
                0 0 90px rgba(244, 143, 177, 0.2);
}

/* Effet de survol - ajout d'un fond rose derrière le logo */
.about-logo-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--light-rose), var(--primary-rose));
    border-radius: 50% !important;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
    clip-path: circle(50%);
}

.about-logo-container:hover::before {
    opacity: 0.3;
}

/* Image du logo - FORCER la forme circulaire */
.about-logo-image {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 50% !important;
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    clip-path: circle(50%) !important;
}

.about-logo-container:hover .about-logo-image {
    transform: scale(1.05);
}

/* Icône de fallback */
.about-logo-icon {
    font-size: 4rem;
    color: var(--white);
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease;
}

.about-logo-container:hover .about-logo-icon {
    transform: scale(1.1);
}

/* Pied de page */
.footer {
    background: linear-gradient(135deg, var(--text-dark) 0%, var(--dark-gray) 100%); /* Dégradé foncé */
    color: var(--white);            /* Texte blanc */
    padding: var(--spacing-xl) 0;   /* Padding vertical */
    margin-top: var(--spacing-xl);  /* Marge supérieure */
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
    box-sizing: border-box;
}

.footer-content {
    display: grid;                  /* Layout en grille */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Colonnes adaptatives */
    gap: var(--spacing-lg);         /* Espacement entre les colonnes */
}

.footer-section h3 {
    font-family: var(--font-heading) !important; /* Police Playfair Display */
    color: var(--white);            /* Couleur des titres */
    margin-bottom: var(--spacing-sm); /* Marge inférieure */
}

.footer-section a {
    color: var(--light-gray);       /* Couleur des liens */
    display: block;                 /* Affichage en bloc */
    margin-bottom: var(--spacing-xs); /* Marge inférieure */
    transition: var(--transition);  /* Transition fluide */
}

.footer-section a:hover {
    color: var(--primary-rose);     /* Couleur rose au survol */
    text-decoration: none;          /* Suppression du soulignement */
}

.social-links {
    display: flex;                  /* Layout flexbox */
    gap: var(--spacing-sm);         /* Espacement entre les liens */
    margin-top: var(--spacing-sm);  /* Marge supérieure */
}

.social-link {
    width: 40px;                    /* Largeur */
    height: 40px;                   /* Hauteur */
    background-color: var(--dark-gray); /* Fond gris foncé */
    border-radius: 50%;             /* Forme circulaire */
    display: flex;                  /* Layout flexbox */
    align-items: center;            /* Alignement vertical */
    justify-content: center;        /* Alignement horizontal */
    color: var(--white);            /* Couleur */
    transition: var(--transition);  /* Transition fluide */
}

.social-link:hover {
    background-color: var(--primary-rose); /* Fond rose au survol */
    transform: translateY(-2px);    /* Légère élévation */
}

/* Alertes et messages */
.alert {
    padding: var(--spacing-sm) var(--spacing-md); /* Padding */
    border-radius: var(--border-radius); /* Rayon de bordure */
    margin-bottom: var(--spacing-md); /* Marge inférieure */
    border-left: 4px solid;         /* Bordure gauche */
}

.alert-success {
    background-color: rgba(76, 175, 80, 0.1); /* Fond vert clair */
    border-left-color: var(--success); /* Bordure verte */
    color: #2E7D32;                 /* Texte vert foncé */
}

.alert-warning {
    background-color: rgba(255, 152, 0, 0.1); /* Fond orange clair */
    border-left-color: var(--warning); /* Bordure orange */
    color: #E65100;                 /* Texte orange foncé */
}

.alert-error {
    background-color: rgba(244, 67, 54, 0.1); /* Fond rouge clair */
    border-left-color: var(--error); /* Bordure rouge */
    color: #C62828;                 /* Texte rouge foncé */
}

.alert-info {
    background-color: rgba(33, 150, 243, 0.1); /* Fond bleu clair */
    border-left-color: var(--info); /* Bordure bleue */
    color: #1565C0;                 /* Texte bleu foncé */
}

/* Système de notifications unifié */
.notifications-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    max-width: 400px;
    pointer-events: none;
}

.notification {
    background: var(--white);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    margin-bottom: 12px;
    overflow: hidden;
    pointer-events: auto;
    transform: translateX(100%);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    border-left: 4px solid;
}

.notification-show {
    transform: translateX(0);
    opacity: 1;
}

.notification-hide {
    transform: translateX(100%);
    opacity: 0;
}

.notification-content {
    display: flex;
    align-items: flex-start;
    padding: 16px;
    gap: 12px;
}

.notification-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 14px;
}

.notification-message {
    flex: 1;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 500;
}

.notification-close {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    color: inherit;
    opacity: 0.6;
    transition: all 0.2s ease;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.notification-close:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.1);
}

.notification-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.3);
    animation: notification-progress 4s linear forwards;
}

/* Types de notifications */
.notification-success {
    border-left-color: #4CAF50;
    background: linear-gradient(135deg, #E8F5E8 0%, #F1F8E9 100%);
    color: #2E7D32;
}

.notification-success .notification-icon {
    background: #4CAF50;
    color: white;
}

.notification-error {
    border-left-color: #F44336;
    background: linear-gradient(135deg, #FFEBEE 0%, #F48FB1 100%);
    color: #C62828;
}

.notification-error .notification-icon {
    background: #F44336;
    color: white;
}

.notification-warning {
    border-left-color: #FF9800;
    background: linear-gradient(135deg, #FFF3E0 0%, #FEF7E0 100%);
    color: #E65100;
}

.notification-warning .notification-icon {
    background: #FF9800;
    color: white;
}

.notification-info {
    border-left-color: #2196F3;
    background: linear-gradient(135deg, #E3F2FD 0%, #F3E5F5 100%);
    color: #1565C0;
}

.notification-info .notification-icon {
    background: #2196F3;
    color: white;
}

/* Animation de la barre de progression */
@keyframes notification-progress {
    from {
        width: 100%;
    }
    to {
        width: 0%;
    }
}

/* Responsive */
@media (max-width: 768px) {
    /* Empêcher tout défilement horizontal sur mobile */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        position: relative;
    }
    
    /* S'assurer que tous les éléments respectent la largeur */
    * {
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* Empêcher les images de dépasser */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* S'assurer que toutes les sections respectent la largeur */
    section {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* S'assurer que tous les conteneurs respectent la largeur */
    .container {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* S'assurer que le header respecte la largeur */
    .header, .header-content {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* S'assurer que le footer respecte la largeur */
    footer {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    .notifications-container {
        top: 10px;
        right: 10px;
        left: 10px;
        max-width: none;
    }
    
    .notification {
        transform: translateY(-100%);
    }
    
    .notification-show {
        transform: translateY(0);
    }
    
    .notification-hide {
        transform: translateY(-100%);
    }
}

/* Styles pour les notifications existantes (compatibilité) */
.alert.notification {
    position: relative;
    padding-right: 40px;
}

.alert.notification .notification-close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.alert.notification .notification-close:hover {
    opacity: 1;
}

/* Tableau de bord administrateur */
.admin-dashboard {
    padding: var(--spacing-xl) 0;   /* Padding vertical */
}

.dashboard-stats {
    display: grid;                  /* Layout en grille */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Colonnes adaptatives */
    gap: var(--spacing-lg);         /* Espacement entre les éléments */
    margin-bottom: var(--spacing-xl); /* Marge inférieure */
}

.stat-card {
    background: var(--white);       /* Fond blanc */
    padding: var(--spacing-lg);     /* Padding */
    border-radius: var(--border-radius-lg); /* Rayon de bordure */
    box-shadow: var(--shadow-light); /* Ombre légère */
    text-align: center;             /* Centrage du texte */
}

.stat-number {
    font-size: 2.5rem;              /* Taille de police */
    font-weight: 700;               /* Poids de police */
    color: var(--dark-rose);        /* Couleur */
    margin-bottom: var(--spacing-xs); /* Marge inférieure */
}

.stat-label {
    color: var(--text-light);       /* Couleur du texte */
    font-size: 0.9rem;              /* Taille de police */
    text-transform: uppercase;      /* Texte en majuscules */
    letter-spacing: 1px;            /* Espacement des lettres */
}

/* Tableaux */
.table {
    width: 100%;                    /* Largeur complète */
    border-collapse: collapse;      /* Fusion des bordures */
    background: var(--white);       /* Fond blanc */
    border-radius: var(--border-radius-lg); /* Rayon de bordure */
    overflow: hidden;               /* Masquage du débordement */
    box-shadow: var(--shadow-light); /* Ombre légère */
}

.table th,
.table td {
    padding: var(--spacing-sm);     /* Padding */
    text-align: left;               /* Alignement à gauche */
    border-bottom: 1px solid var(--light-gray); /* Bordure inférieure */
}

.table th {
    background-color: var(--light-rose); /* Fond rose clair */
    font-weight: 600;               /* Poids de police */
    color: var(--text-dark);        /* Couleur du texte */
}

.table tr:hover {
    background-color: var(--light-gray); /* Fond gris au survol */
}

/* ========================================
   RESPONSIVE DESIGN - MOBILE FIRST
   ======================================== */

/* Variables pour les breakpoints */
:root {
    --mobile-xs: 320px;
    --mobile-sm: 375px;
    --mobile-md: 414px;
    --tablet: 768px;
    --desktop: 1024px;
    --desktop-lg: 1200px;
}

/* ========================================
   STYLES DE BASE POUR MOBILE
   ======================================== */

/* Overlay sombre pour le menu mobile (style Apple) */
/* Overlay supprimé - plus nécessaire, le menu fonctionne sans */

/* Navigation mobile - Styles spécifiques pour mobile (style Apple) */
@media (max-width: 768px) {
    /* Navigation masquée par défaut sur mobile */
    .nav {
        display: none !important;       /* Masqué par défaut sur mobile - priorité maximale */
        position: fixed !important;     /* Position fixe pour occuper tout l'écran */
        top: 0 !important;              /* Depuis le haut de l'écran */
        left: 0 !important;             /* Alignement à gauche */
        right: 0 !important;            /* Alignement à droite */
        bottom: 0 !important;           /* Jusqu'en bas de l'écran */
        width: 100% !important;        /* Largeur complète */
        height: 100vh !important;       /* Hauteur complète de l'écran */
        background: var(--white) !important;      /* Fond blanc */
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.2) !important; /* Ombre à droite (style Apple) */
        z-index: 99999 !important;    /* Z-index très élevé pour être au-dessus de tout */
        flex-direction: column !important;        /* Direction verticale */
        padding: 1.5rem 1rem 0 1rem !important;    /* Padding réduit en haut, pas de padding en bas */
        justify-content: flex-start !important;   /* Alignement en haut */
        align-items: stretch !important;         /* Étirement des éléments */
        overflow-y: auto !important;              /* Défilement si nécessaire */
        margin: 0 !important;
        list-style: none !important;
        border-radius: 0 !important;   /* Pas de coins arrondis pour occuper tout l'écran */
        transform: translateX(-100%) !important; /* Menu caché à gauche par défaut */
        -webkit-transform: translateX(-100%) !important; /* Support WebKit pour Samsung A15 */
        transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) !important; /* Animation fluide style Apple */
        -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) !important; /* Support WebKit */
        will-change: transform !important; /* Optimisation pour Samsung A15 */
    }
    
    /* Navigation affichée quand active - slide depuis la gauche */
    .nav.active {
        display: flex !important;      /* Affiché quand actif - priorité maximale */
        visibility: visible !important;
        opacity: 1 !important;
        transform: translateX(0) !important; /* Menu visible - slide depuis la gauche */
        -webkit-transform: translateX(0) !important; /* Support WebKit pour Samsung A15 */
        will-change: transform !important; /* Optimisation pour Samsung A15 */
    }
}

/* Styles pour les éléments de navigation sur mobile */
@media (max-width: 768px) {
    .nav li {
        width: 100% !important;                   /* Largeur complète */
        margin-bottom: 0 !important;              /* Pas de marge entre les champs */
        list-style: none !important;
    }

    .nav a {
        display: block !important;                /* Affichage en bloc */
        padding: 1rem var(--spacing-md) !important; /* Padding réduit pour rapprocher les champs */
        text-align: center !important;            /* Centrage du texte */
        border-radius: 0 !important;              /* Pas de coins arrondis pour que les champs se rejoignent */
        transition: var(--transition) !important; /* Transition fluide */
        font-size: 1.15rem !important;               /* Taille de police légèrement plus grande */
        font-weight: 500 !important;              /* Poids de police */
        width: 100% !important;
        box-sizing: border-box !important;
        border-bottom: 1px solid var(--medium-gray) !important; /* Ligne de séparation subtile */
    }
    
    /* Dernier élément sans bordure en bas */
    .nav li:last-child a {
        border-bottom: none !important;
    }
    
    /* Style spécial pour le bouton "Prendre RDV" dans le menu mobile */
    .nav a.btn-primary,
    .nav a.btn.btn-primary {
        color: var(--white) !important;           /* Texte en blanc */
        background: linear-gradient(135deg, var(--dark-rose), var(--primary-rose)) !important; /* Fond rose dégradé */
        border-radius: var(--border-radius-lg) !important; /* Bords arrondis */
        border: none !important;                  /* Pas de bordure */
        border-bottom: none !important;          /* Pas de bordure en bas */
        margin-top: 0.5rem !important;           /* Petit espacement en haut */
    }
    
    /* Hover pour le bouton "Prendre RDV" */
    .nav a.btn-primary:hover,
    .nav a.btn.btn-primary:hover {
        background: linear-gradient(135deg, var(--primary-rose), var(--dark-rose)) !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 12px rgba(var(--dark-rose-rgb), 0.3) !important;
    }
}

/* Styles desktop pour les éléments de navigation */
.nav li {
    width: auto;                   /* Largeur automatique sur desktop */
    margin-bottom: 0;              /* Pas de marge sur desktop */
}

.nav a {
    display: inline-block;         /* Affichage en ligne sur desktop */
    padding: var(--spacing-xs) var(--spacing-sm); /* Padding réduit sur desktop */
    text-align: left;              /* Alignement à gauche sur desktop */
    border-radius: var(--border-radius); /* Rayon de bordure */
    transition: var(--transition); /* Transition fluide */
    font-size: 1rem;               /* Taille de police */
    font-weight: 500;              /* Poids de police */
}

.nav a:hover,
.nav a.active {
    background-color: var(--light-rose); /* Fond rose */
    color: var(--dark-rose);       /* Couleur rose foncé */
    text-decoration: none;         /* Pas de soulignement */
}

/* Bouton hamburger */
/* Bouton hamburger - Style Apple */
.mobile-menu-toggle {
    display: block !important;    /* Affiché sur mobile - priorité maximale */
    background: none !important;              /* Pas de fond */
    border: none !important;                  /* Pas de bordure */
    font-size: 1.5rem !important;            /* Taille de police */
    color: var(--dark-rose) !important;       /* Couleur */
    cursor: pointer !important;               /* Curseur pointeur */
    padding: var(--spacing-xs) !important;    /* Padding */
    border-radius: var(--border-radius) !important; /* Rayon de bordure */
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) !important; /* Transition fluide style Apple */
    z-index: 100000 !important;                /* Z-index très élevé pour être au-dessus de tout */
    position: relative !important;
    -webkit-tap-highlight-color: transparent !important; /* Supprime le highlight sur mobile */
    touch-action: manipulation !important; /* Améliore la réactivité sur mobile */
    width: 44px !important;                   /* Taille fixe pour faciliter le clic */
    height: 44px !important;                 /* Taille fixe pour faciliter le clic */
    display: flex !important;                 /* Flex pour centrer l'icône */
    align-items: center !important;           /* Centrage vertical */
    justify-content: center !important;      /* Centrage horizontal */
}

/* Animation du bouton hamburger quand le menu est ouvert */
.mobile-menu-toggle i {
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) !important; /* Animation fluide */
}

/* Style du bouton quand le menu est ouvert (sur mobile) */
@media (max-width: 768px) {
    .header:has(.nav.active) .mobile-menu-toggle {
        color: var(--dark-rose) !important;  /* Couleur visible */
        z-index: 100001 !important;          /* Au-dessus du menu */
    }
    
    .header:has(.nav.active) .mobile-menu-toggle i.fa-times {
        transform: rotate(90deg) !important;  /* Rotation de l'icône X */
    }
}

.mobile-menu-toggle:hover {
    background-color: var(--light-rose); /* Fond rose au survol */
}

/* En-tête responsive */
.header-content {
    position: relative;            /* Position relative */
    display: flex;                 /* Layout flexbox */
    align-items: center;           /* Alignement vertical */
    justify-content: space-between; /* Espacement entre les éléments */
    padding: var(--spacing-sm) 0;  /* Padding vertical */
    min-height: 60px;             /* Hauteur minimale */
}

.logo {
    font-size: 1.25rem;           /* Taille réduite sur mobile */
    z-index: 1001;                /* Z-index élevé */
    flex-shrink: 0;                /* Empêche la réduction du logo */
}

.logo img {
    width: 40px !important;        /* Largeur fixe */
    height: 40px !important;       /* Hauteur fixe */
    border-radius: 50% !important; /* Forme circulaire */
    object-fit: cover !important;  /* Ajustement de l'image */
    flex-shrink: 0;                /* Empêche la réduction */
}

/* ========================================
   BREAKPOINTS RESPONSIVE
   ======================================== */

/* Tablettes et Desktop (768px et plus) */
@media (min-width: 768px) {
    .mobile-menu-toggle {
        display: none !important;             /* Masqué sur tablettes et PC */
    }
    
    .nav {
        display: flex !important;             /* Toujours affiché sur tablettes et PC */
        position: static !important;          /* Position statique */
        flex-direction: row !important;       /* Direction horizontale */
        background: none !important;          /* Pas de fond */
        box-shadow: none !important;          /* Pas d'ombre */
        padding: 0 !important;                /* Pas de padding */
        gap: var(--spacing-md) !important;    /* Espacement entre les éléments */
        transform: none !important;          /* Pas de transformation */
        height: auto !important;              /* Hauteur automatique */
        width: auto !important;              /* Largeur automatique */
        top: auto !important;                /* Position normale */
        left: auto !important;               /* Position normale */
        right: auto !important;              /* Position normale */
        bottom: auto !important;             /* Position normale */
        overflow: visible !important;         /* Overflow visible */
    }
    
    /* S'assurer que le menu est toujours visible sur desktop */
    .nav.active {
        display: flex !important;
        transform: none !important;
    }
    
    .nav li {
        width: auto;               /* Largeur automatique */
        margin-bottom: 0;          /* Pas de marge inférieure */
    }
    
    .nav a {
        display: inline-block;     /* Affichage en ligne */
        padding: var(--spacing-xs) var(--spacing-sm); /* Padding réduit */
        text-align: left;          /* Alignement à gauche */
    }
    
    .header-content {
        flex-direction: row;       /* Direction horizontale */
        justify-content: space-between; /* Espacement entre les éléments */
    }
    
    .logo {
        font-size: 1.5rem;        /* Taille normale */
    }
    
    .hero-content h1 {
        font-size: 2.5rem;        /* Taille normale du titre */
    }
    
    .hero-content p {
    font-family: var(--font-heading) !important; /* Police Playfair Display */
        font-size: 1.25rem;       /* Taille normale du texte */
    }
    
    .services-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Colonnes adaptatives */
        gap: var(--spacing-lg);   /* Espacement normal */
    }
    
    .calendar-grid {
        font-size: 1rem;          /* Taille normale */
    }
    
    .calendar-day {
        min-height: 40px;         /* Hauteur normale */
        padding: var(--spacing-sm); /* Padding normal */
    }
    
    .time-slots {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Colonnes normales */
    }
    
    .dashboard-stats {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Colonnes adaptatives */
    }
    
    .footer-content {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Colonnes adaptatives */
        text-align: left;         /* Alignement à gauche */
    }
    
    /* Réduction de la hauteur du footer sur mobile - TRÈS COMPACT */
    .footer {
        padding: 0.75rem 0 !important; /* Padding vertical très réduit */
        margin-top: 0.75rem !important; /* Marge supérieure très réduite */
    }
    
    .footer-content {
        gap: 0.875rem !important; /* Espacement très réduit entre les colonnes */
    }
    
    .footer-section {
        margin-bottom: 0.625rem !important; /* Marge très réduite entre les sections */
    }
    
    .footer-section h3 {
        margin-bottom: 0.4rem !important; /* Marge très réduite sous les titres */
        font-size: clamp(0.95rem, 2.5vw, 1.15rem) !important; /* Taille très réduite */
    }
    
    .footer-section p {
        margin-bottom: 0.3rem !important; /* Marge très réduite entre les paragraphes */
        font-size: clamp(0.75rem, 2vw, 0.85rem) !important; /* Taille très réduite */
        line-height: 1.3 !important; /* Interligne très réduit */
    }
    
    .footer-section a {
        margin-bottom: 0.25rem !important; /* Marge très réduite entre les liens */
        font-size: clamp(0.75rem, 2vw, 0.85rem) !important; /* Taille très réduite */
    }
    
    /* Réduction de la section copyright - cible les styles inline */
    .footer .container > div[style*="text-align: center"],
    .footer .container > div[style*="margin-top: 2rem"],
    .footer .container > div[style*="padding-top: 2rem"] {
        margin-top: 0.625rem !important;
        padding-top: 0.625rem !important;
        padding-bottom: 0.3rem !important;
        border-top-width: 1px !important;
    }
    
    .footer .container > div[style*="text-align: center"] p,
    .footer .container > div[style*="margin-top: 2rem"] p,
    .footer .container > div[style*="padding-top: 2rem"] p {
        font-size: clamp(0.7rem, 1.6vw, 0.8rem) !important; /* Taille très réduite */
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .social-links {
        gap: 0.5rem !important; /* Espacement très réduit entre les icônes */
        margin-top: 0.5rem !important; /* Marge très réduite */
    }
    
    .social-link {
        width: 30px !important; /* Taille très réduite */
        height: 30px !important; /* Taille très réduite */
        font-size: 0.8rem !important; /* Taille d'icône très réduite */
    }
}

/* Desktop (1024px et plus) */
@media (min-width: 1024px) {
    .container {
        max-width: 1200px;        /* Largeur maximale */
        padding: 0 var(--spacing-md); /* Padding normal */
    }
    
    .hero-content h1 {
        font-size: 3rem;          /* Taille grande du titre */
    }
    
    .hero-content p {
    font-family: var(--font-heading) !important; /* Police Playfair Display */
        font-size: 1.25rem;       /* Taille normale du texte */
        max-width: 600px;         /* Largeur maximale */
    }
    
    .services-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 colonnes fixes */
        gap: var(--spacing-xl);   /* Espacement large */
    }
    
    .dashboard-stats {
        grid-template-columns: repeat(3, 1fr); /* 3 colonnes fixes */
    }
}

/* ========================================
   STYLES SPÉCIFIQUES MOBILE
   ======================================== */

/* Petits mobiles (320px - 374px) */
@media (max-width: 374px) {
    .container {
        padding: 0 var(--spacing-xs); /* Padding minimal */
    }
    
    .hero {
        padding: var(--spacing-md) 0; /* Padding réduit */
    }
    
    .hero-content h1 {
        font-size: 1.5rem;        /* Taille très réduite */
        line-height: 1.2;         /* Interligne réduit */
    }
    
    .hero-content p {
    font-family: var(--font-heading) !important; /* Police Playfair Display */
        font-size: 0.9rem;        /* Taille très réduite */
    }
    
    .service-card {
        padding: var(--spacing-sm); /* Padding minimal */
        margin-bottom: var(--spacing-sm); /* Marge inférieure */
    }
    
    .service-icon {
        width: 60px;              /* Icône plus petite */
        height: 60px;             /* Icône plus petite */
        font-size: 1.5rem;        /* Taille d'icône réduite */
    }
    
    .btn {
        padding: var(--spacing-sm) var(--spacing-sm); /* Padding réduit */
        font-size: 0.9rem;        /* Taille de police réduite */
    }
    
    .btn-large {
        padding: var(--spacing-sm) var(--spacing-md); /* Padding réduit */
        font-size: 1rem;          /* Taille normale */
    }
    
    .calendar-day {
        min-height: 20px;         /* Hauteur minimale */
        font-size: 0.7rem;        /* Taille très réduite */
        padding: 2px;             /* Padding minimal */
    }
    
    .time-slot {
        padding: var(--spacing-xs); /* Padding minimal */
        font-size: 0.8rem;        /* Taille réduite */
    }
    
    .form-input,
    .form-select,
    .form-textarea {
        padding: var(--spacing-sm); /* Padding normal */
        font-size: 1rem;          /* Taille normale pour la lisibilité */
    }
}

/* Mobiles moyens (375px - 413px) */
@media (min-width: 375px) and (max-width: 413px) {
    .hero-content h1 {
        font-size: 1.75rem;       /* Taille légèrement plus grande */
    }
    
    .hero-content p {
    font-family: var(--font-heading) !important; /* Police Playfair Display */
        font-size: 1rem;          /* Taille normale */
    }
    
    .service-card {
        padding: var(--spacing-md); /* Padding normal */
    }
    
    .calendar-day {
        min-height: 25px;         /* Hauteur légèrement plus grande */
        font-size: 0.8rem;        /* Taille légèrement plus grande */
    }
}

/* Mobiles larges (414px - 767px) */
@media (min-width: 414px) and (max-width: 767px) {
    .hero-content h1 {
        font-size: 2rem;          /* Taille plus grande */
    }
    
    .hero-content p {
    font-family: var(--font-heading) !important; /* Police Playfair Display */
        font-size: 1.1rem;        /* Taille légèrement plus grande */
    }
    
    .services-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Colonnes adaptatives */
        gap: var(--spacing-md);   /* Espacement normal */
    }
    
    .calendar-day {
        min-height: 30px;         /* Hauteur normale */
        font-size: 0.9rem;        /* Taille normale */
    }
    
    .time-slots {
        grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); /* Colonnes adaptatives */
    }
}

/* ========================================
   OPTIMISATIONS TOUCH MOBILE
   ======================================== */

/* Zones de touch optimisées */
@media (max-width: 767px) {
    .btn,
    .nav a,
    .mobile-menu-toggle,
    .calendar-day,
    .time-slot,
    .service-card {
        min-height: 44px;         /* Hauteur minimale pour le touch */
        min-width: 44px;          /* Largeur minimale pour le touch */
        display: flex;            /* Layout flexbox */
        align-items: center;      /* Alignement vertical */
        justify-content: center;  /* Alignement horizontal */
    }
    
    /* Espacement entre les éléments tactiles */
    .nav li {
        margin-bottom: var(--spacing-xs); /* Espacement minimal */
    }
    
    .time-slots {
        gap: var(--spacing-xs);   /* Espacement minimal */
    }
    
    /* Formulaires optimisés pour mobile */
    .form-group {
        margin-bottom: var(--spacing-md); /* Espacement normal */
    }
    
    .form-input,
    .form-select,
    .form-textarea {
        font-size: 16px;          /* Évite le zoom automatique sur iOS */
        padding: var(--spacing-sm); /* Padding confortable */
        border-radius: var(--border-radius); /* Rayon de bordure */
    }
    
    /* Tableaux responsives */
    .table {
        font-size: 0.8rem;        /* Taille réduite */
    }
    
    .table th,
    .table td {
        padding: var(--spacing-xs); /* Padding réduit */
    }
    
    /* Cartes et sections */
    .service-card,
    .review-card,
    .stat-card {
        margin-bottom: var(--spacing-md); /* Espacement normal */
    }
    
    /* Réduction supplémentaire de la hauteur du footer sur mobile - ULTRA COMPACT */
    .footer {
        padding: 0.625rem 0 !important; /* Padding ultra réduit */
        margin-top: 0.625rem !important; /* Marge ultra réduite */
    }
    
    .footer-content {
        gap: 0.75rem !important; /* Espacement ultra réduit */
    }
    
    .footer-section {
        margin-bottom: 0.5rem !important; /* Marge ultra réduite */
    }
    
    .footer-section h3 {
        margin-bottom: 0.35rem !important; /* Marge ultra réduite */
        font-size: clamp(0.9rem, 2.3vw, 1.1rem) !important; /* Taille ultra réduite */
    }
    
    .footer-section p {
        margin-bottom: 0.25rem !important; /* Marge ultra réduite */
        font-size: clamp(0.7rem, 1.8vw, 0.8rem) !important; /* Taille ultra réduite */
        line-height: 1.25 !important; /* Interligne ultra réduit */
    }
    
    .footer-section a {
        margin-bottom: 0.2rem !important; /* Marge ultra réduite */
        font-size: clamp(0.7rem, 1.8vw, 0.8rem) !important; /* Taille ultra réduite */
    }
    
    /* Réduction de la section copyright - cible les styles inline */
    .footer .container > div[style*="text-align: center"],
    .footer .container > div[style*="margin-top: 2rem"],
    .footer .container > div[style*="padding-top: 2rem"] {
        margin-top: 0.5rem !important;
        padding-top: 0.5rem !important;
        padding-bottom: 0.25rem !important;
        border-top-width: 1px !important;
    }
    
    .footer .container > div[style*="text-align: center"] p,
    .footer .container > div[style*="margin-top: 2rem"] p,
    .footer .container > div[style*="padding-top: 2rem"] p {
        font-size: clamp(0.65rem, 1.5vw, 0.75rem) !important; /* Taille ultra réduite */
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .social-links {
        gap: 0.4rem !important; /* Espacement ultra réduit */
        margin-top: 0.4rem !important; /* Marge ultra réduite */
    }
    
    .social-link {
        width: 28px !important; /* Taille ultra réduite */
        height: 28px !important; /* Taille ultra réduite */
        font-size: 0.75rem !important; /* Taille d'icône ultra réduite */
    }
    
    /* Section avis - Réduction de la hauteur sur mobile */
    .reviews-section {
        padding: 1.5rem 0 !important; /* Padding vertical réduit sur mobile */
    }
    
    .reviews-section .container > .text-center {
        margin-bottom: 1.5rem !important; /* Marge réduite sous le titre */
    }
    
    .reviews-section .text-center h2 {
        margin-bottom: 0.5rem !important; /* Marge réduite sous le titre */
        font-size: clamp(1.5rem, 4vw, 2rem) !important; /* Taille réduite */
    }
    
    .reviews-section .text-center p {
        margin-bottom: 0 !important; /* Pas de marge en bas */
        font-size: clamp(0.9rem, 2.5vw, 1rem) !important; /* Taille réduite */
    }
    
    /* Carrousel d'avis sur mobile - Réduction de la hauteur */
    .reviews-carousel-track {
        gap: 1.5rem !important; /* Espacement horizontal réduit */
        padding: 0.75rem 0 !important; /* Espacement vertical réduit */
    }
    
    .reviews-carousel-track .carousel-item {
        width: 100% !important;
        min-width: 100% !important;
        margin-bottom: 1rem !important; /* Espacement vertical réduit */
    }
    
    .reviews-carousel-container {
        padding: 0 1rem;
    }
    
    .review-card {
        margin-bottom: 1rem !important; /* Espacement vertical réduit */
        padding: 1rem !important; /* Padding réduit */
    }
    
    .review-header {
        margin-bottom: 0.75rem !important; /* Marge réduite */
    }
    
    .review-card p {
        margin: 0.5rem 0 !important; /* Marges réduites */
        line-height: 1.4 !important; /* Interligne réduit */
    }
    
    /* Réduction de la marge du header de la section avis sur mobile */
    .reviews-section-header {
        margin-bottom: 1.5rem !important;
    }
    
    .reviews-section-header h2 {
        margin-bottom: 0.5rem !important; /* Marge réduite sous le titre */
        font-size: clamp(1.5rem, 4vw, 2rem) !important; /* Taille réduite */
    }
    
    .reviews-section-header p {
        margin-bottom: 0 !important; /* Pas de marge en bas */
        font-size: clamp(0.9rem, 2.5vw, 1rem) !important; /* Taille réduite */
    }
    
    /* Réduction supplémentaire pour très petits écrans */
    @media (max-width: 480px) {
        .reviews-section {
            padding: 1rem 0 !important; /* Padding encore plus réduit */
        }
        
        .reviews-section-header {
            margin-bottom: 1rem !important;
        }
        
        .reviews-carousel-track {
            padding: 0.5rem 0 !important; /* Padding encore plus réduit */
            gap: 1rem !important; /* Gap réduit */
        }
        
        .review-card {
            padding: 0.875rem !important; /* Padding encore plus réduit */
            margin-bottom: 0.875rem !important;
        }
    }
    
    /* Navigation admin mobile */
    .admin-nav ul {
        flex-direction: column;   /* Direction verticale */
        gap: var(--spacing-xs);   /* Espacement minimal */
    }
    
    .admin-nav a {
        padding: var(--spacing-sm) var(--spacing-md); /* Padding confortable */
        text-align: center;       /* Centrage du texte */
    }
}

/* ========================================
   ORIENTATION LANDSCAPE MOBILE
   ======================================== */

@media (max-width: 767px) and (orientation: landscape) {
    .hero {
        padding: var(--spacing-sm) 0; /* Padding réduit */
    }
    
    .hero-content h1 {
        font-size: 1.5rem;        /* Taille réduite */
    }
    
    .hero-content p {
    font-family: var(--font-heading) !important; /* Police Playfair Display */
        font-size: 0.9rem;        /* Taille réduite */
    }
    
    .services-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 colonnes en paysage */
        gap: var(--spacing-sm);   /* Espacement réduit */
    }
    
    .calendar-day {
        min-height: 20px;         /* Hauteur réduite */
        font-size: 0.7rem;        /* Taille réduite */
    }
}

/* ========================================
   ACCESSIBILITÉ MOBILE
   ======================================== */

/* Focus visible sur mobile */
@media (max-width: 767px) {
    .btn:focus,
    .nav a:focus,
    .mobile-menu-toggle:focus,
    .form-input:focus,
    .form-select:focus,
    .form-textarea:focus {
        outline: 3px solid var(--primary-rose); /* Contour visible */
        outline-offset: 2px;      /* Décallage du contour */
    }
    
    /* Amélioration de la lisibilité */
    .text-center {
        text-align: center;       /* Centrage du texte */
    }
    
    .text-left {
        text-align: left;         /* Alignement à gauche */
    }
    
    .text-right {
        text-align: right;        /* Alignement à droite */
    }
}

/* ========================================
   PERFORMANCE MOBILE
   ======================================== */

/* Optimisations pour les performances mobiles */
@media (max-width: 767px) {
    /* Réduction des animations sur mobile */
    .service-card:hover {
        transform: none;           /* Pas de transformation */
    }
    
    .btn:hover {
        transform: none;           /* Pas de transformation */
    }
    
    /* Optimisation des ombres */
    .service-card,
    .review-card,
    .stat-card {
        box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* Ombre simplifiée */
    }
    
    .service-card:hover,
    .review-card:hover,
    .stat-card:hover {
        box-shadow: 0 2px 6px rgba(0,0,0,0.15); /* Ombre simplifiée */
    }
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;                 /* Opacité de départ */
        transform: translateY(20px); /* Translation de départ */
    }
    to {
        opacity: 1;                 /* Opacité finale */
        transform: translateY(0);   /* Position finale */
    }
}

.fade-in {
    animation: fadeIn 0.6s ease-out; /* Animation d'apparition */
}

@keyframes slideIn {
    from {
        transform: translateX(-100%); /* Translation de départ */
    }
    to {
        transform: translateX(0);   /* Position finale */
    }
}

.slide-in {
    animation: slideIn 0.5s ease-out; /* Animation de glissement */
}

/* Utilitaires */
.text-center { text-align: center; }        /* Centrage du texte */
.text-left { text-align: left; }            /* Alignement à gauche */
.text-right { text-align: right; }          /* Alignement à droite */
.mb-0 { margin-bottom: 0; }                 /* Pas de marge inférieure */
.mb-1 { margin-bottom: var(--spacing-xs); } /* Petite marge inférieure */
.mb-2 { margin-bottom: var(--spacing-sm); } /* Marge inférieure normale */
.mb-3 { margin-bottom: var(--spacing-md); } /* Grande marge inférieure */
.mb-4 { margin-bottom: var(--spacing-lg); } /* Très grande marge inférieure */
.mt-0 { margin-top: 0; }                    /* Pas de marge supérieure */
.mt-1 { margin-top: var(--spacing-xs); }    /* Petite marge supérieure */
.mt-2 { margin-top: var(--spacing-sm); }    /* Marge supérieure normale */
.mt-3 { margin-top: var(--spacing-md); }    /* Grande marge supérieure */
.mt-4 { margin-top: var(--spacing-lg); }    /* Très grande marge supérieure */
.hidden { display: none; }                  /* Masquage */
.visible { display: block; }                /* Affichage */



/* ============================================
   FICHIER : teccart-enhanced.css
   Modifié le : 2026-01-14 18:22:25
   ============================================ */

/* 
 * Styles CSS enrichis inspirés de Teccart
 * Design moderne avec palette contrastée, animations et effets visuels
 * Compatible avec le système de couleurs personnalisables existant
 */

/* ============================================
   VARIABLES CSS ENRICHIES - PALETTE TECCART
   ============================================ */
:root {
    /* Couleurs principales contrastées (inspirées Teccart) */
    /* Utilisation des couleurs personnalisables du système existant */
    --primary-color: var(--primary-rose, #C2185B);           /* Rose principal (personnalisable) */
    --primary-dark: var(--dark-rose, #AD1457);              /* Rose foncé (personnalisable) */
    --primary-light: var(--light-rose, #F48FB1);             /* Rose clair (personnalisable) */
    --secondary-color: #00CC66;         /* Vert vif secondaire */
    --secondary-dark: #009944;          /* Vert foncé */
    --secondary-light: #33FF99;         /* Vert clair */
    --accent-color: #FF6600;            /* Orange accent */
    --accent-dark: #CC4400;             /* Orange foncé */
    
    /* Arrière-plans */
    --bg-light: #F8F9FA;                /* Fond clair */
    --bg-dark: #1A1A1A;                 /* Fond foncé */
    --bg-white: #FFFFFF;                /* Blanc pur */
    --bg-overlay: rgba(0, 0, 0, 0.5);   /* Overlay semi-transparent */
    --bg-overlay-light: rgba(255, 255, 255, 0.9); /* Overlay clair */
    
    /* Texte */
    --text-primary: #2C3E50;            /* Texte principal foncé */
    --text-secondary: #6C757D;          /* Texte secondaire */
    --text-light: #FFFFFF;              /* Texte clair sur fond foncé */
    --text-muted: #ADB5BD;              /* Texte atténué */
    
    /* Ombres améliorées */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.16);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.20);
    --shadow-colored: 0 8px 24px rgba(0, 102, 204, 0.25); /* Ombre colorée */
    
    /* Rayons de bordure */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;
    
    /* Transitions et animations */
    --transition-fast: 0.15s ease-out;
    --transition-base: 0.3s ease-out;
    --transition-slow: 0.5s ease-out;
    --transition-bounce: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* Espacements */
    --spacing-xs: 0.5rem;    /* 8px */
    --spacing-sm: 1rem;      /* 16px */
    --spacing-md: 1.5rem;    /* 24px */
    --spacing-lg: 2rem;      /* 32px */
    --spacing-xl: 3rem;      /* 48px */
    --spacing-2xl: 4rem;     /* 64px */
    --spacing-3xl: 6rem;     /* 96px */
    
    /* Z-index layers */
    --z-base: 1;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal: 1040;
    --z-tooltip: 1050;
}

/* ============================================
   CARROUSEL DE PROMOTIONS
   ============================================ */
.hero-carousel {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-height: 600px;
    height: 600px;
    overflow-x: hidden;
    overflow-y: hidden;
    box-sizing: border-box;
    /* PAS de bords arrondis sur le carrousel lui-même */
    border-radius: 0 !important;
    /* Utiliser flexbox pour centrer les slides */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Fond rose dégradé identique au hero pour cohérence visuelle - FORCÉ pour être visible */
    background: linear-gradient(135deg, #F48FB1 0%, #FFFFFF 100%) !important;
    background-image: linear-gradient(135deg, #F48FB1 0%, #FFFFFF 100%) !important;
}

.carousel-slide {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 600px !important;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    pointer-events: none;
    z-index: 1;
    /* PAS de bords arrondis par défaut - seulement sur les photos de promotion */
    /* NE PAS appliquer border-radius: 0 aux slides de promotion */
    border-radius: 0;
}

/* Sur mobile, structure flex column avec contenu centré verticalement */
@media (max-width: 768px) {
    .carousel-slide {
        align-items: center !important;
        justify-content: center !important;
        padding: 0.5rem 1rem !important;
        padding-top: 0.5rem !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        padding-bottom: 1rem !important;
        position: relative !important;
        top: auto !important;
        /* NE PAS écraser les bordures arrondies des slides de promotion */
    }
    
    /* S'assurer que les slides de promotion gardent leurs bordures arrondies sur mobile */
    /* PRIORITÉ MAXIMALE - ces règles doivent écraser toutes les autres */
    .hero-carousel .carousel-slide.promotion-slide,
    .hero-carousel .carousel-slide[style*="background-image"],
    .carousel-slide.promotion-slide,
    .carousel-slide[style*="background-image"],
    .hero-carousel .carousel-slide.promotion-slide.active,
    .hero-carousel .carousel-slide[style*="background-image"].active,
    .carousel-slide.promotion-slide.active,
    .carousel-slide[style*="background-image"].active {
        /* Bordures arrondies FORCÉES - priorité maximale sur mobile - DOIT ÉCRASER border-radius: 0 */
        border-radius: 15px !important;
        -webkit-border-radius: 15px !important;
        -moz-border-radius: 15px !important;
        overflow: hidden !important;
        -webkit-mask-image: -webkit-radial-gradient(white, black) !important;
        mask-image: radial-gradient(white, black) !important;
        -webkit-mask-clip: padding-box !important;
        mask-clip: padding-box !important;
        clip-path: inset(0 round 15px) !important;
        -webkit-clip-path: inset(0 round 15px) !important;
    }
}

/* Pour les slides avec images de promotion - ENCADREMENT PROFESSIONNEL AVEC FOND BLANC */
.hero-carousel .carousel-slide.promotion-slide,
.hero-carousel .carousel-slide[style*="background-image"],
.carousel-slide.promotion-slide,
.carousel-slide[style*="background-image"] {
    /* Utiliser contain pour voir toute la photo en entier sans la couper */
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    /* Fond blanc supprimé - transparent pour voir le fond rose du carrousel */
    background-color: transparent !important;
    /* Pas de padding pour éviter l'espace blanc */
    padding: 0 !important;
    /* Bords arrondis - ENCADREMENT PROFESSIONNEL */
    border-radius: 20px !important;
    -webkit-border-radius: 20px !important;
    -moz-border-radius: 20px !important;
    overflow: hidden !important;
    /* S'assurer que les images de fond respectent les bordures arrondies */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: radial-gradient(white, black);
    -webkit-mask-clip: padding-box;
    mask-clip: padding-box;
    /* Centrage parfait - utiliser flexbox pour centrer le contenu */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* Position absolue pour centrer parfaitement l'encadrement */
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    padding: 2rem !important;
    /* Dimensions de l'encadrement - seront ajustées dynamiquement par JavaScript */
    /* Les styles inline du JavaScript auront priorité grâce à !important dans le JS */
    /* Garder la taille originale de l'encadrement */
    width: 55%;
    max-width: 650px;
    height: 70%;
    max-height: 450px;
    min-height: 350px;
    /* Le ratio sera calculé dynamiquement selon chaque photo */
    box-sizing: border-box !important;
    /* Ombre pour effet professionnel - sans bordure blanche */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
}

/* Fond rose dégradé visible derrière les encadrements - pas de fond blanc */

/* S'assurer que les slides de promotion sont au-dessus du fond rose */
.hero-carousel .carousel-slide.promotion-slide,
.hero-carousel .carousel-slide[style*="background-image"],
.carousel-slide.promotion-slide,
.carousel-slide[style*="background-image"] {
    z-index: 2 !important;
}

.carousel-slide.active {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 2 !important;
    pointer-events: auto !important;
}

.carousel-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Overlay très léger ou complètement transparent pour garder les photos claires */
    background: transparent;
    z-index: 1;
}

/* Optionnel : overlay très léger uniquement si nécessaire pour la lisibilité */
.carousel-slide .carousel-overlay {
    background: transparent;
}

.carousel-slide .container {
    position: relative;
    z-index: 2;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem !important;
    box-sizing: border-box !important;
}

/* Sur mobile, structure flex column avec contenu centré verticalement */
@media (max-width: 768px) {
    .carousel-slide .container {
        display: flex !important;
        flex-direction: column !important;
        visibility: visible !important;
        opacity: 1 !important;
        padding: 0.5rem 1rem !important;
        padding-top: 0.5rem !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        padding-bottom: 0.5rem !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        /* Contenu centré verticalement */
        align-items: center !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        min-height: auto !important;
        height: auto !important;
        overflow: visible !important;
        margin-top: 0 !important;
    }
}

/* Améliorer la lisibilité du texte sur les photos sans assombrir les images */
.carousel-slide .hero-banner-content {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.carousel-slide .hero-banner-content h1 {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.carousel-slide .hero-banner-content p {
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}

/* Indicateurs de carrousel */
.carousel-indicators {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex !important;
    gap: 0.75rem;
    z-index: 10;
    visibility: visible !important;
    opacity: 1 !important;
}

.carousel-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.carousel-indicator:hover {
    background: rgba(255, 255, 255, 0.5);
    border-color: rgba(255, 255, 255, 0.8);
}

.carousel-indicator.active {
    background: var(--white);
    border-color: var(--white);
    width: 32px;
    border-radius: 6px;
}

/* Boutons de navigation */
.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.5);
    color: var(--white);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    font-size: 1.2rem;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.carousel-nav:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: var(--white);
    transform: translateY(-50%) scale(1.1);
}

.carousel-prev {
    left: 2rem;
}

.carousel-next {
    right: 2rem;
}

/* Responsive pour le carrousel - Tablettes (iPad) */
@media (max-width: 1024px) and (min-width: 769px) {
    .hero-carousel,
    .carousel-slide {
        min-height: 500px;
        height: 500px;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Encadrement professionnel sur iPad - sans espaces blancs */
    .hero-carousel .carousel-slide.promotion-slide,
    .hero-carousel .carousel-slide[style*="background-image"],
    .carousel-slide.promotion-slide,
    .carousel-slide[style*="background-image"] {
        width: 65% !important;
        max-width: 600px !important;
        height: 70% !important;
        max-height: 420px !important;
        min-height: 320px !important;
        aspect-ratio: 4 / 3 !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        padding: 0 !important;
        background-size: contain !important;
        background-position: center center !important;
        background-color: transparent !important;
    }
}

/* Responsive pour le carrousel - Mobile */
@media (max-width: 768px) {
    /* Hauteur réduite pour mobile - SECTION COMPACTE */
    .hero-carousel,
    .carousel-slide {
        min-height: 65vh !important;
        height: 65vh !important;
        max-height: 70vh !important;
        width: 100% !important;
        max-width: 100% !important;
        /* Structure flex pour centrer le contenu verticalement */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 0.5rem 1rem !important;
        padding-top: 0.5rem !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        padding-bottom: 1rem !important;
        box-sizing: border-box !important;
        overflow-y: visible !important;
        overflow-x: hidden !important;
    }
    
    /* Ajustement de la hauteur du hero-banner sur mobile */
    .hero-banner .hero-carousel,
    .hero .hero-carousel {
        height: 65vh !important;
        min-height: 65vh !important;
        max-height: 70vh !important;
        padding: 0 !important;
        padding-top: 0 !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        padding-bottom: 1rem !important;
    }
    
    /* Ajustement des slides pour la nouvelle hauteur - CONTENU CENTRÉ VERTICALEMENT */
    .hero-carousel .carousel-slide {
        min-height: 65vh !important;
        max-height: 70vh !important;
        height: 65vh !important;
        /* Structure flex pour centrer le contenu verticalement */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 0.5rem 1rem !important;
        padding-top: 0.5rem !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        padding-bottom: 1rem !important;
        box-sizing: border-box !important;
        overflow-y: visible !important;
        overflow-x: hidden !important;
    }
    
    .carousel-slide {
        background-size: cover;
        background-position: center center;
        left: 0 !important;
        right: 0 !important;
        /* Position relative pour le centrage */
        position: relative !important;
        top: auto !important;
    }
    
    /* Structure flex column pour le contenu Hero sur mobile - CENTRÉ VERTICALEMENT */
    .carousel-slide .hero-banner-content,
    .hero-banner-content {
        padding: 0.5rem 1rem !important;
        padding-top: 0.5rem !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        padding-bottom: 0.5rem !important;
        margin: 0 auto !important;
        margin-top: 0 !important;
        /* Structure flex column avec contenu centré verticalement */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0.5rem !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 3 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        text-align: center !important;
        overflow: visible !important;
        align-self: center !important;
        flex: 0 0 auto !important;
        /* Pas de transformation - contenu centré naturellement */
        transform: none !important;
    }
    
    /* Réduction de la taille du titre h1 sur mobile - COMPACT ET TRÈS REMONTÉ */
    .carousel-slide .hero-banner-content h1,
    .hero-banner-content h1,
    .hero-banner h1,
    .carousel-slide h1 {
        font-size: clamp(1.3rem, 4.8vw, 1.65rem) !important;
        margin: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0.25rem !important;
        padding: 0 !important;
        line-height: 1.25 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: var(--dark-rose, #AD1457) !important;
        font-weight: 700 !important;
        text-align: center !important;
        width: 100% !important;
        order: 1 !important;
        flex-shrink: 0 !important;
    }
    
    /* Réduction de la taille du paragraphe sur mobile - COMPACT ET TRÈS REMONTÉ */
    .carousel-slide .hero-banner-content p,
    .hero-banner-content p,
    .hero-banner p,
    .carousel-slide p {
        font-size: clamp(0.8rem, 2.8vw, 0.95rem) !important;
        margin: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0.3rem !important;
        padding: 0 0.5rem !important;
        line-height: 1.35 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: var(--text-dark, #2C3E50) !important;
        text-align: center !important;
        width: 100% !important;
        order: 2 !important;
        flex-shrink: 0 !important;
    }
    
    /* Structure flex column pour les boutons sur mobile - TRÈS REMONTÉS */
    .carousel-slide .hero-banner-content > div,
    .hero-banner-content > div,
    .carousel-slide .hero-banner-content div[style*="margin-top"],
    .hero-banner-content div[style*="margin-top"],
    .carousel-slide .hero-banner-content div[style*="display: flex"],
    .hero-banner-content div[style*="display: flex"] {
        margin: 0 !important;
        margin-top: 0 !important;
        padding: 0 !important;
        gap: 0.35rem !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        flex-wrap: wrap !important;
        order: 3 !important;
        flex-shrink: 0 !important;
        position: relative !important;
        z-index: 5 !important;
        overflow: visible !important;
    }
    
    /* Réduction de la taille des boutons sur mobile - COMPACT ET VISIBLES */
    .carousel-slide .hero-banner-content .btn,
    .hero-banner-content .btn,
    .carousel-slide .hero-banner-content .btn-enhanced,
    .hero-banner-content .btn-enhanced,
    .carousel-slide .hero-banner-content a.btn,
    .hero-banner-content a.btn,
    .carousel-slide .hero-banner-content .btn-primary-enhanced,
    .hero-banner-content .btn-primary-enhanced,
    .carousel-slide .hero-banner-content .btn-outline-enhanced,
    .hero-banner-content .btn-outline-enhanced {
        padding: 0.55rem 1rem !important;
        font-size: 0.85rem !important;
        width: 100% !important;
        max-width: 250px !important;
        min-width: 170px !important;
        min-height: 40px !important;
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 6 !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        cursor: pointer !important;
        pointer-events: auto !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: ellipsis !important;
        flex-shrink: 0 !important;
    }
    
    /* S'assurer que les icônes dans les boutons sont visibles */
    .carousel-slide .hero-banner-content .btn i,
    .hero-banner-content .btn i,
    .carousel-slide .hero-banner-content .btn-enhanced i,
    .hero-banner-content .btn-enhanced i {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-right: 0.5rem !important;
    }
    
    /* Encadrement professionnel sur mobile - ajusté pour la nouvelle hauteur avec bordures arrondies */
    /* PRIORITÉ MAXIMALE - ces règles doivent écraser toutes les autres */
    .hero-carousel .carousel-slide.promotion-slide,
    .hero-carousel .carousel-slide[style*="background-image"],
    .carousel-slide.promotion-slide,
    .carousel-slide[style*="background-image"],
    .hero-carousel .carousel-slide.promotion-slide.active,
    .hero-carousel .carousel-slide[style*="background-image"].active,
    .carousel-slide.promotion-slide.active,
    .carousel-slide[style*="background-image"].active {
        width: 85% !important;
        max-width: 100% !important;
        height: 75% !important;
        max-height: 250px !important;
        min-height: 200px !important;
        aspect-ratio: 4 / 3 !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        padding: 0 !important;
        background-size: contain !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-color: transparent !important;
        /* Bordures arrondies FORCÉES - priorité maximale - DOIT ÉCRASER border-radius: 0 */
        border-radius: 15px !important;
        -webkit-border-radius: 15px !important;
        -moz-border-radius: 15px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) !important;
        /* S'assurer que l'image respecte les bordures arrondies */
        -webkit-mask-image: -webkit-radial-gradient(white, black) !important;
        mask-image: radial-gradient(white, black) !important;
        -webkit-mask-clip: padding-box !important;
        mask-clip: padding-box !important;
        /* Forcer le clip-path pour les bordures arrondies */
        clip-path: inset(0 round 15px) !important;
        -webkit-clip-path: inset(0 round 15px) !important;
    }
    
    /* S'assurer que les images de fond respectent les bordures arrondies */
    .hero-carousel .carousel-slide.promotion-slide::before,
    .hero-carousel .carousel-slide[style*="background-image"]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 15px !important;
        -webkit-border-radius: 15px !important;
        -moz-border-radius: 15px !important;
        overflow: hidden !important;
        pointer-events: none;
        z-index: -1;
    }
    
    /* Réduction de la taille des boutons de navigation sur mobile - VISIBLES */
    .carousel-nav {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.85rem !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 15 !important;
        position: absolute !important;
        background: rgba(255, 255, 255, 0.25) !important;
        border: 2px solid rgba(255, 255, 255, 0.6) !important;
        cursor: pointer !important;
        pointer-events: auto !important;
    }
    
    .carousel-prev {
        left: 0.5rem !important;
    }
    
    .carousel-next {
        right: 0.5rem !important;
    }
    
    /* Ajustement des indicateurs de carrousel sur mobile - REMONTER POUR NE PAS MASQUER LES BOUTONS */
    .carousel-indicators {
        bottom: 0.25rem !important;
        gap: 0.4rem !important;
        z-index: 15 !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        /* S'assurer que les indicateurs ne masquent pas les boutons */
        position: absolute !important;
    }
    
    .carousel-indicator {
        width: 8px !important;
        height: 8px !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .carousel-indicator.active {
        width: 20px !important;
    }
}

/* S'assurer que les images s'adaptent sur très petits écrans - 60vh ET CENTRÉ */
@media (max-width: 480px) {
    /* Hauteur réduite sur très petits écrans */
    .hero-carousel,
    .carousel-slide {
        min-height: 60vh !important;
        height: 60vh !important;
        max-height: 65vh !important;
        width: 100% !important;
        max-width: 100% !important;
        /* Structure flex column avec centrage vertical */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 0.875rem 0.75rem !important;
        box-sizing: border-box !important;
        overflow-y: visible !important;
        overflow-x: hidden !important;
    }
    
    /* Ajustement de la hauteur du hero-banner sur très petits écrans */
    .hero-banner .hero-carousel,
    .hero .hero-carousel {
        height: 60vh !important;
        min-height: 60vh !important;
        max-height: 65vh !important;
        padding: 0.875rem 0.75rem !important;
    }
    
    /* Ajustement des slides pour la nouvelle hauteur - CENTRAGE VERTICAL */
    .hero-carousel .carousel-slide {
        min-height: 60vh !important;
        max-height: 65vh !important;
        height: 60vh !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 0.875rem 0.75rem !important;
        box-sizing: border-box !important;
        overflow-y: visible !important;
        overflow-x: hidden !important;
    }
    
    /* Règle générale pour .carousel-slide - NE PAS écraser les bordures arrondies des slides de promotion */
    .carousel-slide:not(.promotion-slide):not([style*="background-image"]) {
        background-size: cover;
        background-position: center center;
        left: 0 !important;
        right: 0 !important;
        position: relative !important;
        top: auto !important;
    }
    
    /* Structure flex column sur très petits écrans */
    .carousel-slide .hero-banner-content,
    .hero-banner-content {
        padding: 0.4rem 0.75rem 0.5rem 0.75rem !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0.5rem !important;
        visibility: visible !important;
        opacity: 1 !important;
        overflow: visible !important;
    }
    
    /* Titre encore plus compact sur très petits écrans - STRUCTURE FLEX */
    .carousel-slide .hero-banner-content h1,
    .hero-banner-content h1,
    .hero-banner h1 {
        font-size: clamp(1.15rem, 4.5vw, 1.5rem) !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        order: 1 !important;
        flex-shrink: 0 !important;
    }
    
    /* Paragraphe encore plus compact - STRUCTURE FLEX */
    .carousel-slide .hero-banner-content p,
    .hero-banner-content p,
    .hero-banner p {
        font-size: clamp(0.75rem, 2.5vw, 0.9rem) !important;
        margin: 0 !important;
        padding: 0 0.5rem !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        order: 2 !important;
        flex-shrink: 0 !important;
    }
    
    /* Boutons encore plus compacts - STRUCTURE FLEX - TOUJOURS VISIBLES */
    .carousel-slide .hero-banner-content > div,
    .hero-banner-content > div {
        margin: 0 !important;
        padding: 0 !important;
        gap: 0.4rem !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
        opacity: 1 !important;
        order: 3 !important;
        flex-shrink: 0 !important;
        position: relative !important;
        z-index: 5 !important;
        overflow: visible !important;
    }
    
    .carousel-slide .hero-banner-content .btn,
    .hero-banner-content .btn,
    .carousel-slide .hero-banner-content .btn-enhanced,
    .hero-banner-content .btn-enhanced,
    .carousel-slide .hero-banner-content a.btn,
    .hero-banner-content a.btn {
        padding: 0.6rem 0.95rem !important;
        font-size: 0.8rem !important;
        max-width: 240px !important;
        min-width: 160px !important;
        min-height: 38px !important;
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 6 !important;
        flex-shrink: 0 !important;
    }
    
    /* Encadrement professionnel sur très petits écrans - avec bordures arrondies */
    /* PRIORITÉ MAXIMALE - ces règles doivent écraser toutes les autres */
    .hero-carousel .carousel-slide.promotion-slide,
    .hero-carousel .carousel-slide[style*="background-image"],
    .carousel-slide.promotion-slide,
    .carousel-slide[style*="background-image"],
    .hero-carousel .carousel-slide.promotion-slide.active,
    .hero-carousel .carousel-slide[style*="background-image"].active,
    .carousel-slide.promotion-slide.active,
    .carousel-slide[style*="background-image"].active {
        width: 90% !important;
        max-width: 100% !important;
        height: 70% !important;
        max-height: 220px !important;
        min-height: 180px !important;
        aspect-ratio: 4 / 3 !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        padding: 0 !important;
        background-size: contain !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-color: transparent !important;
        /* Bordures arrondies FORCÉES - priorité maximale sur très petits écrans - DOIT ÉCRASER border-radius: 0 */
        border-radius: 12px !important;
        -webkit-border-radius: 12px !important;
        -moz-border-radius: 12px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15) !important;
        /* S'assurer que l'image respecte les bordures arrondies */
        -webkit-mask-image: -webkit-radial-gradient(white, black) !important;
        mask-image: radial-gradient(white, black) !important;
        -webkit-mask-clip: padding-box !important;
        mask-clip: padding-box !important;
        /* Forcer le clip-path pour les bordures arrondies */
        clip-path: inset(0 round 12px) !important;
        -webkit-clip-path: inset(0 round 12px) !important;
    }
    
    /* Boutons de navigation encore plus petits mais VISIBLES */
    .carousel-nav {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.75rem !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 15 !important;
        position: absolute !important;
        background: rgba(255, 255, 255, 0.25) !important;
        border: 2px solid rgba(255, 255, 255, 0.6) !important;
        cursor: pointer !important;
        pointer-events: auto !important;
    }
    
    .carousel-prev {
        left: 0.4rem !important;
    }
    
    .carousel-next {
        right: 0.4rem !important;
    }
    
    /* Indicateurs encore plus compacts mais VISIBLES - NE PAS MASQUER LES BOUTONS */
    .carousel-indicators {
        bottom: 0.15rem !important;
        gap: 0.3rem !important;
        z-index: 4 !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
        /* S'assurer que les indicateurs ne masquent pas les boutons */
        pointer-events: auto !important;
    }
    
    .carousel-indicator {
        width: 6px !important;
        height: 6px !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .carousel-indicator.active {
        width: 18px !important;
    }
}

/* ============================================
   BANNIÈRES AVEC OVERLAY
   ============================================ */
.hero-banner {
    position: relative;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Effet parallaxe */
    overflow-x: hidden !important;
}

/* Si le carrousel est présent, masquer le background par défaut et s'assurer qu'il n'y a pas de padding */
.hero-banner:has(.hero-carousel),
.hero:has(.hero-carousel) {
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
}

/* S'assurer que le carrousel prend toute la hauteur */
.hero-banner .hero-carousel,
.hero .hero-carousel {
    position: relative;
    width: 100%;
    height: 600px;
    min-height: 600px;
    max-height: 600px;
    overflow-x: hidden;
    overflow-y: hidden;
    display: block;
}

/* Media query pour maintenir la hauteur sur PC et tablette */
@media (min-width: 769px) {
    .hero-banner .hero-carousel,
    .hero .hero-carousel {
        height: 600px;
        min-height: 600px;
        max-height: 600px;
    }
}

/* Forcer le positionnement absolu des slides - CRITIQUE pour éviter l'empilement vertical */
.hero-carousel .carousel-slide {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 600px !important;
    max-height: 600px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
}

/* EXCEPTION : Les slides de promotion doivent être centrées, pas en haut à gauche */
.hero-carousel .carousel-slide.promotion-slide,
.hero-carousel .carousel-slide[style*="background-image"] {
    /* Surcharger les règles précédentes pour centrer */
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: 70% !important;
    height: 80% !important;
    max-width: 800px !important;
    max-height: 500px !important;
    min-height: 400px !important;
}

/* Désactiver l'overlay bleu quand le carrousel est présent - pour voir le fond rose */
.hero-banner:has(.hero-carousel)::before,
.hero:has(.hero-carousel)::before {
    display: none !important;
}

.hero-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--bg-overlay) 0%, rgba(0, 102, 204, 0.6) 100%);
    z-index: var(--z-base);
}

.hero-banner.light-overlay::before {
    background: linear-gradient(135deg, var(--bg-overlay-light) 0%, rgba(255, 255, 255, 0.7) 100%);
}

.hero-banner-content {
    position: relative;
    z-index: calc(var(--z-base) + 1);
    text-align: center;
    color: var(--text-light);
    padding: var(--spacing-xl);
    max-width: 800px;
    margin: 0 auto;
    overflow-x: hidden !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.hero-banner.light-overlay .hero-banner-content {
    color: var(--text-primary);
}

.hero-banner h1 {
    font-family: var(--font-heading) !important; /* Police Playfair Display */
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
    animation: fadeInUp 0.8s ease-out;
}

.hero-banner p {
    font-family: var(--font-heading) !important; /* Police Playfair Display */
    font-size: clamp(1rem, 2vw, 1.25rem);
    margin-bottom: var(--spacing-lg);
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
    animation: fadeInUp 0.8s ease-out 0.2s both;
}

/* ============================================
   BOUTONS STYLISÉS AVEC EFFETS HOVER
   ============================================ */
.btn-enhanced {
    font-family: var(--font-heading) !important; /* Police Playfair Display */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.btn-enhanced::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn-enhanced:hover::before {
    width: 300px;
    height: 300px;
}

.btn-enhanced:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-enhanced:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

/* Variantes de boutons */
.btn-primary-enhanced {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: var(--text-light);
}

.btn-primary-enhanced:hover {
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-color) 100%);
    box-shadow: var(--shadow-colored);
}

.btn-secondary-enhanced {
    font-family: var(--font-heading) !important; /* Police Playfair Display */
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--secondary-dark) 100%);
    color: var(--text-light);
}

.btn-secondary-enhanced:hover {
    background: linear-gradient(135deg, var(--secondary-light) 0%, var(--secondary-color) 100%);
}

.btn-outline-enhanced {
    background: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
}

.btn-outline-enhanced:hover {
    background: var(--primary-color);
    color: var(--text-light);
    border-color: var(--primary-color);
}

.btn-ghost {
    background: transparent;
    border: 2px solid transparent;
    color: var(--text-light);
    box-shadow: none;
}

.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Liens avec soulignement animé */
.link-animated {
    position: relative;
    color: var(--primary-color);
    text-decoration: none;
    transition: color var(--transition-base);
}

.link-animated::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary-color);
    transition: width var(--transition-base);
}

.link-animated:hover {
    color: var(--primary-dark);
}

.link-animated:hover::after {
    width: 100%;
}

/* ============================================
   CARTES ET SECTIONS VISUELLES
   ============================================ */
.card-enhanced {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
    overflow: hidden;
    position: relative;
}

.card-enhanced::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    /* Dégradé rose du site : de rose clair à rose foncé */
    background: linear-gradient(90deg, var(--primary-rose, #C2185B), var(--light-rose, #F48FB1));
    transform: scaleX(0);
    transition: transform var(--transition-base);
}

.card-enhanced:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.card-enhanced:hover::before {
    transform: scaleX(1);
}

.card-enhanced-header {
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--bg-light);
}

.card-enhanced-header h1,
.card-enhanced-header h2,
.card-enhanced-header h3,
.card-enhanced-header h4,
.card-enhanced-title {
    font-family: var(--font-heading) !important; /* Police Playfair Display */
}

.card-enhanced-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Dégradé rose du site : de rose clair à rose foncé */
    background: linear-gradient(135deg, var(--primary-rose, #C2185B), var(--light-rose, #F48FB1));
    border-radius: var(--radius-md);
    color: var(--text-light);
    font-size: 1.5rem;
    margin-bottom: var(--spacing-sm);
    box-shadow: var(--shadow-md);
    overflow: hidden; /* Pour que l'image respecte les coins arrondis */
}

.service-image-container {
    padding: 0; /* Retirer le padding pour que l'image remplisse tout l'espace */
}

.service-image {
    transition: transform 0.3s ease;
}

.service-image:hover {
    transform: scale(1.05); /* Légère animation au survol */
}

/* Grille de services améliorée */
/* Accordéons par catégorie de services - Style épuré et professionnel */
.services-accordion {
    padding: var(--spacing-lg) 0;
}

.service-category-accordion {
    margin-bottom: var(--spacing-lg);
    border: none;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--bg-white);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
}

.service-category-accordion:hover {
    box-shadow: var(--shadow-lg);
}

.service-category-header {
    width: 100%;
    padding: var(--spacing-lg) var(--spacing-xl);
    background: var(--bg-white);
    border: 2px solid var(--light-rose);
    border-radius: var(--radius-xl);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--dark-rose);
    transition: all var(--transition-base);
    text-align: left;
}

.service-category-header:hover {
    background: linear-gradient(135deg, var(--light-rose) 0%, var(--white) 100%);
    border-color: var(--primary-rose);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.service-category-header[aria-expanded="true"] {
    background: linear-gradient(135deg, var(--primary-rose) 0%, var(--light-rose) 100%);
    color: var(--white);
    border-color: var(--primary-rose);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.service-category-header[aria-expanded="true"] .accordion-icon {
    transform: rotate(180deg);
}

.category-title {
    font-family: var(--font-heading) !important;
    flex: 1;
}

.category-count {
    margin: 0 var(--spacing-md);
    font-size: 0.95rem;
    opacity: 0.9;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.2);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
}

.service-category-header[aria-expanded="true"] .category-count {
    background: rgba(255, 255, 255, 0.3);
}

.accordion-icon {
    transition: transform var(--transition-base);
    font-size: 1rem;
    margin-left: var(--spacing-sm);
}

.service-category-content {
    padding: var(--spacing-xl);
    background: var(--bg-white);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    animation: slideDown 0.3s ease-out;
    border: 2px solid var(--light-rose);
    border-top: none;
}

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
    to {
        opacity: 1;
        max-height: 5000px;
        padding-top: var(--spacing-xl);
        padding-bottom: var(--spacing-xl);
    }
}

.services-grid-enhanced {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--spacing-lg);
    overflow-x: hidden !important;
    box-sizing: border-box;
}

.service-card-enhanced {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(244, 143, 177, 0.2);
}

.service-card-enhanced:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
    border-color: var(--light-rose);
}

.service-card-image {
    width: 100%;
    height: 140px;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.service-card-enhanced:hover .service-card-image {
    transform: scale(1.05);
}

.service-card-body {
    padding: var(--spacing-md);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.service-card-title {
    font-family: var(--font-heading) !important;
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: var(--spacing-xs);
    color: var(--text-primary);
    line-height: 1.3;
}

.service-card-description {
    font-size: 0.9rem;
    color: var(--text-light);
    margin-bottom: var(--spacing-xs);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.service-card-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin: var(--spacing-xs) 0;
}

/* ============================================
   ANIMATIONS ET TRANSITIONS
   ============================================ */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* Classes d'animation */
.animate-fade-in {
    animation: fadeIn 0.6s ease-out;
}

.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out;
}

.animate-fade-in-down {
    animation: fadeInDown 0.8s ease-out;
}

.animate-slide-in-left {
    animation: slideInLeft 0.8s ease-out;
}

.animate-slide-in-right {
    animation: slideInRight 0.8s ease-out;
}

.animate-scale-in {
    animation: scaleIn 0.6s ease-out;
}

.animate-delay-1 { animation-delay: 0.1s; }
.animate-delay-2 { animation-delay: 0.2s; }
.animate-delay-3 { animation-delay: 0.3s; }
.animate-delay-4 { animation-delay: 0.4s; }

/* Animation au scroll (sera complétée par AOS) */
.fade-in-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   SECTIONS AVEC ARRIÈRE-PLAN ALTERNÉ
   ============================================ */
.section-enhanced {
    padding: var(--spacing-3xl) 0;
    position: relative;
    overflow-x: hidden !important;
    box-sizing: border-box;
}

.section-enhanced.alt-bg {
    background: var(--bg-light);
}

.section-enhanced.dark-bg {
    background: var(--bg-dark);
    color: var(--text-light);
}

.section-enhanced.dark-bg h2,
.section-enhanced.dark-bg h3 {
    color: var(--text-light);
}

.section-header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

.section-title {
    font-family: var(--font-heading) !important; /* Police Playfair Display */
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    position: relative;
    display: inline-block;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    /* Dégradé rose du site : de rose clair à rose foncé */
    background: linear-gradient(90deg, var(--light-rose, #F48FB1), var(--primary-rose, #C2185B));
    border-radius: var(--radius-full);
}

.section-subtitle {
    font-family: var(--font-heading) !important; /* Police Playfair Display */
    font-size: 1.25rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

.section-enhanced.dark-bg .section-subtitle {
    color: var(--text-muted);
}

/* ============================================
   EN-TÊTE AMÉLIORÉ
   ============================================ */
.header-enhanced {
    background: var(--bg-white);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    transition: all var(--transition-base);
}

.header-enhanced.scrolled {
    box-shadow: var(--shadow-md);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
}

.nav-link-enhanced {
    position: relative;
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--transition-base);
}

.nav-link-enhanced::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: var(--primary-color);
    transition: width var(--transition-base);
}

.nav-link-enhanced:hover,
.nav-link-enhanced.active {
    color: var(--primary-color);
}

.nav-link-enhanced:hover::after,
.nav-link-enhanced.active::after {
    width: 80%;
}

/* ============================================
   RESPONSIVE DESIGN AMÉLIORÉ
   ============================================ */
@media (max-width: 768px) {
    /* Réduction de la hauteur minimale du hero-banner sur mobile */
    .hero-banner {
        min-height: 320px !important;
        background-attachment: scroll; /* Désactiver parallaxe sur mobile */
    }
    
    /* Ajustement du hero-banner-content sur mobile - VERSION SANS CARROUSEL - ENCORE DAVANTAGE REMONTÉ */
    .hero-banner:not(:has(.hero-carousel)),
    .hero:not(:has(.hero-carousel)) {
        min-height: 65vh !important;
        height: 65vh !important;
        max-height: 70vh !important;
        padding: 0 !important;
        padding-top: 0 !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        padding-bottom: 1rem !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
        overflow-y: visible !important;
        overflow-x: hidden !important;
    }
    
    .hero-banner:not(:has(.hero-carousel)) .hero-banner-content,
    .hero:not(:has(.hero-carousel)) .hero-banner-content {
        padding: 0.5rem 1rem !important;
        padding-top: 0.5rem !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        padding-bottom: 0.5rem !important;
        margin: 0 auto !important;
        margin-top: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0.5rem !important;
        visibility: visible !important;
        opacity: 1 !important;
        overflow: visible !important;
        transform: none !important;
    }
    
    /* Container sans carrousel - contenu centré verticalement */
    .hero-banner:not(:has(.hero-carousel)) .container,
    .hero:not(:has(.hero-carousel)) .container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0.5rem 1rem !important;
        padding-top: 0.5rem !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        padding-bottom: 0.5rem !important;
        gap: 0.5rem !important;
        height: auto !important;
        overflow: visible !important;
        margin-top: 0 !important;
    }
    
    /* Réduction des tailles pour la version sans carrousel - BIEN VISIBLE */
    .hero-banner:not(:has(.hero-carousel)) h1,
    .hero:not(:has(.hero-carousel)) h1 {
        font-size: clamp(1.4rem, 5.5vw, 1.9rem) !important;
        margin-bottom: 0.75rem !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: var(--dark-rose, #AD1457) !important;
    }
    
    .hero-banner:not(:has(.hero-carousel)) p,
    .hero:not(:has(.hero-carousel)) p {
        font-size: clamp(0.875rem, 3vw, 1rem) !important;
        margin-bottom: 1rem !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: var(--text-dark, #2C3E50) !important;
    }
    
    .hero-banner:not(:has(.hero-carousel)) .btn,
    .hero:not(:has(.hero-carousel)) .btn,
    .hero-banner:not(:has(.hero-carousel)) .btn-enhanced,
    .hero:not(:has(.hero-carousel)) .btn-enhanced {
        padding: 0.75rem 1.25rem !important;
        font-size: 0.9rem !important;
        max-width: 280px !important;
        min-width: 200px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .services-accordion {
        padding: var(--spacing-md) 0;
    }
    
    .service-category-accordion {
        margin-bottom: var(--spacing-md);
    }
    
    .service-category-header {
        padding: var(--spacing-md) var(--spacing-lg);
        font-size: 1.1rem;
        border-radius: var(--radius-lg);
    }
    
    .service-category-header[aria-expanded="true"] {
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }
    
    .service-category-content {
        padding: var(--spacing-lg);
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    }
    
    .services-grid-enhanced {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: var(--spacing-md);
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
        box-sizing: border-box;
    }
    
    .section-enhanced {
        padding: var(--spacing-xl) 0;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
        box-sizing: border-box;
    }
}

/* ============================================
   UTILITAIRES
   ============================================ */
.text-gradient {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.shadow-colored {
    box-shadow: var(--shadow-colored);
}

.gradient-border {
    position: relative;
    padding: 2px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: var(--radius-lg);
}

.gradient-border > * {
    background: var(--bg-white);
    border-radius: calc(var(--radius-lg) - 2px);
}

/* ============================================
   COMPATIBILITÉ ACCESSIBILITÉ WCAG
   ============================================ */
/* Contraste amélioré pour l'accessibilité */
.btn-enhanced:focus,
.link-animated:focus,
.nav-link-enhanced:focus {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
}

/* Mode sombre (si nécessaire) */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-light: #2C3E50;
        --bg-white: #34495E;
        --text-primary: #ECF0F1;
        --text-secondary: #BDC3C7;
    }
}

/* ============================================
   RÈGLE FINALE - GARANTIR LES BORDURES ARRONDIES SUR MOBILE
   ============================================ */
/* Cette règle finale garantit que les bordures arrondies sont toujours appliquées
   aux slides de promotion sur mobile, même si d'autres règles tentent de les écraser */
@media (max-width: 768px) {
    .hero-carousel .carousel-slide.promotion-slide,
    .hero-carousel .carousel-slide[style*="background-image"],
    .carousel-slide.promotion-slide,
    .carousel-slide[style*="background-image"],
    .hero-carousel .carousel-slide.promotion-slide.active,
    .hero-carousel .carousel-slide[style*="background-image"].active,
    .carousel-slide.promotion-slide.active,
    .carousel-slide[style*="background-image"].active,
    .hero-carousel .carousel-slide[style*="background-image"].carousel-slide,
    .carousel-slide[style*="background-image"].carousel-slide {
        /* Bordures arrondies FORCÉES - PRIORITÉ ABSOLUE */
        border-radius: 15px !important;
        -webkit-border-radius: 15px !important;
        -moz-border-radius: 15px !important;
        overflow: hidden !important;
        -webkit-mask-image: -webkit-radial-gradient(white, black) !important;
        mask-image: radial-gradient(white, black) !important;
        -webkit-mask-clip: padding-box !important;
        mask-clip: padding-box !important;
        clip-path: inset(0 round 15px) !important;
        -webkit-clip-path: inset(0 round 15px) !important;
    }
}

@media (max-width: 480px) {
    .hero-carousel .carousel-slide.promotion-slide,
    .hero-carousel .carousel-slide[style*="background-image"],
    .carousel-slide.promotion-slide,
    .carousel-slide[style*="background-image"],
    .hero-carousel .carousel-slide.promotion-slide.active,
    .hero-carousel .carousel-slide[style*="background-image"].active,
    .carousel-slide.promotion-slide.active,
    .carousel-slide[style*="background-image"].active,
    .hero-carousel .carousel-slide[style*="background-image"].carousel-slide,
    .carousel-slide[style*="background-image"].carousel-slide {
        /* Bordures arrondies FORCÉES - PRIORITÉ ABSOLUE */
        border-radius: 12px !important;
        -webkit-border-radius: 12px !important;
        -moz-border-radius: 12px !important;
        overflow: hidden !important;
        -webkit-mask-image: -webkit-radial-gradient(white, black) !important;
        mask-image: radial-gradient(white, black) !important;
        -webkit-mask-clip: padding-box !important;
        mask-clip: padding-box !important;
        clip-path: inset(0 round 12px) !important;
        -webkit-clip-path: inset(0 round 12px) !important;
    }
}

/* ============================================
   FICHIER : fix-vertical-scrollbars.css
   Modifié le : 2026-01-14 18:22:23
   ============================================ */

/* 
 * Correction FORCÉE des barres de défilement verticales indésirables
 * Suppression ciblée des barres de défilement dans les trois sections problématiques
 */

/* 1. CARROUSEL - Forcer la suppression des barres de défilement */
.hero-carousel,
.hero-carousel .carousel-slide,
.hero-carousel .carousel-slide .container,
.hero-carousel .carousel-slide .container > div,
.hero-carousel .carousel-slide .hero-banner-content,
.hero-carousel .carousel-slide .hero-banner-content > div {
    overflow-y: visible !important;
    overflow: visible !important;
}

/* 2. SECTION SERVICES - Forcer la suppression des barres de défilement */
#services,
#services .container,
#services .container > div,
#services .section-header {
    overflow-y: visible !important;
    overflow: visible !important;
}

/* EXCEPTIONS : Les cartes et conteneurs doivent garder overflow hidden pour éviter les débordements */
.service-category-accordion,
.service-category-content {
    overflow-x: hidden !important; /* Empêcher uniquement le débordement horizontal */
    overflow-y: hidden !important; /* Pas de scrollbar vertical */
    scrollbar-width: none !important; /* Firefox - Pas de scrollbar */
    -ms-overflow-style: none !important; /* IE et Edge - Pas de scrollbar */
}

.services-grid-enhanced {
    overflow-x: hidden !important; /* Empêcher uniquement le débordement horizontal */
    overflow-y: hidden !important; /* Pas de scrollbar vertical */
    align-items: start !important; /* Aligner les cartes en haut */
    scrollbar-width: none !important; /* Firefox - Pas de scrollbar */
    -ms-overflow-style: none !important; /* IE et Edge - Pas de scrollbar */
}

.service-card-enhanced {
    overflow: hidden !important; /* Pas de scrollbar */
    min-height: auto !important; /* Hauteur minimale automatique */
    height: auto !important; /* Hauteur automatique selon le contenu */
    scrollbar-width: none !important; /* Firefox - Pas de scrollbar */
    -ms-overflow-style: none !important; /* IE et Edge - Pas de scrollbar */
}

.service-card-enhanced * {
    overflow: hidden !important; /* Pas de scrollbar sur les éléments enfants */
}

/* Masquer les scrollbars WebKit (Chrome, Safari) */
.service-category-content::-webkit-scrollbar,
.services-grid-enhanced::-webkit-scrollbar,
.service-card-enhanced::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Permettre le scroll vertical uniquement pour la grille si nécessaire */
.services-grid-enhanced {
    overflow-x: hidden !important;
    overflow-y: visible !important; /* Permettre le scroll vertical si beaucoup de cartes */
}

/* 3. SECTION À PROPOS - Forcer la suppression des barres de défilement */
#apropos,
#apropos *,
#apropos .container,
#apropos .container > div,
#apropos .container > div[style*="grid"] {
    overflow-y: visible !important;
    overflow: visible !important;
}

/* Exception pour le menu mobile */
.nav {
    overflow-y: auto !important;
}

/* Le carrousel lui-même garde overflow hidden pour fonctionner */
.hero-carousel {
    overflow: hidden !important;
}