/* ==========================================================================
   ASSETS/CSS/HOME.CSS - Styles Spécifiques à la Page d'Accueil (index.html)
   (Ajustements du Sofa)
   ========================================================================== */

/* -------------------------------------------------------------------------- */
/* SECTION HERO (ACCUEIL) - CONSOLIDÉE                                        */
/* -------------------------------------------------------------------------- */

.hero-section { /* Styles de base de la section Hero */ /* <--- MODIFIÉE */
    background-color: var(--white-rock-medium); /* Fond de la section */
    padding: clamp(140px, 16vw, 180px) 0 8rem; /* Espacement haut/bas ajusté pour le header */
    position: relative; /* Pour positionner les éléments enfants */
    overflow: hidden; /* Empêche les décorations de déborder sans contrôle */
}

.hero-container { /* Conteneur interne, grille ou flex */
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 24px;
    display: flex; /* Utilise flexbox pour les colonnes texte/image */
    flex-direction: row; /* Texte à gauche, image à droite par défaut */
    position: relative; /* Permet de positionner le sofa en absolute par rapport à ce grand conteneur */
    align-items: center; /* Centre verticalement les colonnes */
    gap: 4rem; /* Espace entre les colonnes texte et image */
}

.hero-text { /* Colonne Texte */
    flex: 1; /* Prend l'espace disponible */
    padding-right: 40px; /* Espace à droite du texte (pour éviter que le sofa le touche) */
    position: relative;
    z-index: 2; /* Au-dessus de l'image/déco */
}

.hero-image { /* Colonne Image */
    flex: 1; /* Prend l'espace disponible */
    display: flex; /* Utile si le contenu n'est pas absolute */
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Cache la partie du sofa qui dépasse du côté texte */
}

.sofa {
    position: absolute;
    height: 140%;      /* Exemple: Hauteur réduite */
    width: auto;
    bottom: -15%;     /* Exemple: Moins bas (plus haut sur la page) */
    left: 45%;        /* Exemple: Décalé de 5% depuis la droite (plus vers l'intérieur) */
    max-width: none;
    transform: none;
    object-fit: cover;
    pointer-events: none;
    z-index: 1;
}

/* Titre spécifique du Héro */
.hero-title {
    font-size: clamp(4.2rem, 6vw, 7.2rem); /* Taille de police spécifique */
    margin-bottom: 2.4rem;
}

/* Texte descriptif du Héro */
.hero-text p { /* Cible spécifiquement le paragraphe P dans .hero-text */
    font-size: 2rem;
    font-weight: 300;
    margin-bottom: 5.6rem; /* Augmenté pour plus d'espace avec les boutons */
    color: var(--black-pearl-light);
}

/* Conteneur pour les boutons du Héro */
.hero-buttons {
    display: flex;
    gap: 1.6rem;
    flex-wrap: wrap; /* Permet aux boutons de passer à la ligne si manque de place */
}

/* Forme décorative abstraite en fond */
.hero-decoration {
    position: absolute;
    bottom: -10%; /* Dépasse en bas */
    right: -5%; /* Dépasse à droite */
    width: 60%;
    height: 80%;
    background: radial-gradient(circle at center, var(--quicksand-light) 0%, transparent 70%);
    opacity: 0.4;
    z-index: 0; /* Derrière le contenu texte et l'image canapé */
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; /* Forme initiale */
    animation: morphBlob 20s infinite alternate ease-in-out; /* Animation */
    pointer-events: none; /* Ignore les clics */
}

/* Animation de la forme décorative */
@keyframes morphBlob {
    0% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
    25% { border-radius: 50% 50% 70% 30% / 50% 50% 50% 50%; }
    50% { border-radius: 70% 30% 50% 50% / 40% 60% 40% 60%; }
    75% { border-radius: 40% 60% 30% 70% / 60% 40% 60% 40%; }
    100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
}


/* -------------------------------------------------------------------------- */
/* SECTION SERVICES (PRÉSENTATION DES MODULES SUR L'ACCUEIL)                  */
/* -------------------------------------------------------------------------- */

.services {
    padding: var(--section-spacing) 0; /* Espacement vertical standard */
    background-color: white; /* Fond blanc pour cette section */
    position: relative;
    overflow: hidden;
}

/* Décoration légère en fond */
.services-decoration {
    position: absolute;
    top: -10%;
    left: -5%;
    width: 40%;
    height: 40%;
    background: radial-gradient(circle at center, var(--quicksand-light) 0%, transparent 70%);
    opacity: 0.3;
    z-index: 1; /* Derrière les cartes */
    border-radius: 50%;
    pointer-events: none;
}

/* Grille pour les cartes de service/module */
.services-grid {
    display: grid;
    /* Crée autant de colonnes que possible avec une largeur min de 34rem */
    grid-template-columns: repeat(auto-fill, minmax(34rem, 1fr));
    gap: 3.2rem; /* Espace entre les cartes */
    margin-top: 6.4rem; /* Espace après le titre de section */
    position: relative; /* Pour le z-index */
    z-index: 2; /* Au-dessus de la décoration */
}

/* Carte individuelle de service/module */
.service-card {
    /* Hérite de .card défini dans style.css */
    padding: 4rem; /* Espacement intérieur spécifique */
    display: flex; /* Permet d'utiliser flex-grow pour le texte */
    flex-direction: column; /* Éléments empilés verticalement */
    height: 100%; /* Assure que les cartes dans une ligne ont la même hauteur */
}

/* Icône du service */
.service-icon {
    width: 6.4rem;
    height: 6.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2.4rem;
    border-radius: var(--border-radius-sm);
    background: linear-gradient(135deg, var(--white-rock-light), white); /* Fond dégradé léger */
    color: var(--walnut); /* Couleur de l'icône */
    font-size: 2.8rem; /* Taille de l'icône */
    box-shadow: var(--box-shadow-sm); /* Ombre sur l'icône */
}
.service-icon i { /* Style de l'icône Feather elle-même */
    width: 2.8rem;
    height: 2.8rem;
}

/* Titre du service */
.service-title {
    font-size: 2.4rem;
    font-weight: 600;
    margin-bottom: 1.6rem;
    color: var(--black-pearl);
}

/* Texte descriptif du service */
.service-text {
    color: var(--black-pearl-light);
    margin-bottom: 2.4rem;
    flex-grow: 1; /* Fait en sorte que le texte prenne l'espace dispo, alignant les liens en bas */
    font-size: 1.5rem; /* Légèrement plus petit */
}

/* Lien "En savoir plus" */
.service-link {
    font-weight: 500;
    color: var(--walnut);
    text-decoration: none;
    display: inline-flex; /* Pour aligner texte et icône */
    align-items: center;
    gap: 0.8rem;
    transition: all var(--transition-fast);
    margin-top: auto; /* Pousse le lien en bas de la carte grâce à flex-grow sur .service-text */
}

.service-link:hover {
    gap: 1.2rem; /* Augmente l'espace au survol */
    color: var(--walnut-light);
}

.service-link i { /* Style icône flèche */
    width: 1.6rem;
    height: 1.6rem;
}

/* -------------------------------------------------------------------------- */
/* CARROUSEL DES MODULES                                                      */
/* -------------------------------------------------------------------------- */

.modules-carousel {
    position: relative;
    margin: 5rem 0;
    height: 40rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Boutons de navigation */
.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 50%;
    background-color: white;
    border: none;
    box-shadow: var(--box-shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    transition: all var(--transition-fast);
}

.carousel-nav:hover {
    background-color: var(--quicksand-light);
    box-shadow: var(--box-shadow-md);
    transform: translateY(-50%) scale(1.05);
}

.carousel-nav i {
    color: var(--walnut);
    width: 2rem;
    height: 2rem;
}

.carousel-prev {
    left: 0;
}

.carousel-next {
    right: 0;
}

/* Conteneur principal du carrousel */
.carousel-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

/* Styles pour les cartes de module */
.module-card {
    position: absolute;
    background-color: white;
    border-radius: var(--border-radius-md);
    box-shadow: var(--box-shadow-sm);
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
}

/* Carte active (centrale) */
.module-card.active {
    width: 50%;
    height: auto;
    z-index: 10;
    box-shadow: var(--box-shadow-md);
    opacity: 1;
    padding: 3.2rem;
}

/* Carte active (centrale) */
.module-card.active {
    width: 500px; /* Taille fixe en pixels */
    height: auto;
    z-index: 10;
    box-shadow: var(--box-shadow-md);
    opacity: 1;
    padding: 3.2rem;
    transform: none !important; /* Empêche les transformations non désirées */
}

/* Cartes adjacentes (avant/après) */
.module-card.prev, .module-card.next {
    width: 270px; /* Réduit à 250px */
    height: auto;
    opacity: 0.5;
    z-index: 5;
    padding: 1.5rem; /* Padding réduit pour plus d'espace pour le texte */
    cursor: pointer;
    transform-origin: center;
    background-color: white;
    /* Désactivation des transitions de taille */
    transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.module-card.prev {
    transform: translateX(-380px); /* Position ajustée */
}

.module-card.next {
    transform: translateX(380px); /* Position ajustée */
}

/* Adaptation du texte dans les cartes latérales */
.module-card.prev .module-title, 
.module-card.next .module-title {
    font-size: 1.6rem; /* Taille réduite pour les titres des cartes latérales */
    margin-bottom: 0.5rem;
}

.module-card.prev .module-description, 
.module-card.next .module-description {
    font-size: 1.2rem; /* Taille réduite pour les descriptions des cartes latérales */
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Limite à 3 lignes */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.module-card.prev .module-header, 
.module-card.next .module-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem; /* Espace réduit entre l'icône et le texte */
}

.module-card.prev .module-icon, 
.module-card.next .module-icon {
    width: 4rem; /* Taille d'icône réduite */
    height: 4rem;
    min-width: 4rem; /* Assure que l'icône ne rétrécit pas */
}

.module-card.prev .module-link, 
.module-card.next .module-link {
    font-size: 1.2rem; /* Taille réduite pour les liens */
    margin-top: 0.8rem;
}

.module-card.prev:hover, .module-card.next:hover {
    opacity: 0.8;
    /* Pas de changement de taille au survol */
}

/* Empêcher le redimensionnement des cartes lors du zoom */
.modules-carousel {
    transform-style: flat !important; /* Désactive les effets 3D */
}

.module-card {
    transform-style: flat !important;
    backface-visibility: hidden; /* Réduit les problèmes de rendu */
    -webkit-backface-visibility: hidden;
    perspective: none !important;
    -webkit-perspective: none !important;
}

/* Autres cartes (cachées) */
.module-card.hidden {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.8);
}

/* Contenu des cartes */
.module-header {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.6rem;
}

.module-icon {
    width: 6rem;
    height: 6rem;
    margin-right: 1.6rem;
    border-radius: var(--border-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.module-card.active .module-icon {
    background-color: var(--quicksand-light);
    color: var(--walnut);
}

.module-card.prev .module-icon, .module-card.next .module-icon {
    background-color: var(--white-rock-light);
    color: var(--black-pearl-light);
}

.module-icon i {
    width: 2.4rem;
    height: 2.4rem;
}

.module-title {
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--black-pearl);
    margin-bottom: 0.8rem;
}

.module-card.prev .module-title, .module-card.next .module-title {
    margin-bottom: 0;
}

.module-description {
    color: var(--black-pearl-light);
    font-size: 1.5rem;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.module-link {
    color: var(--walnut);
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    transition: gap var(--transition-fast);
}

.module-link:hover {
    gap: 1.2rem;
}

.module-link i {
    width: 1.6rem;
    height: 1.6rem;
}

/* Indicateurs du carrousel */
.carousel-indicators {
    display: flex;
    justify-content: center;
    gap: 0.8rem;
    margin-top: 2rem;
    position: relative;
    z-index: 30; /* Valeur supérieure pour s'assurer qu'ils sont au-dessus d'autres éléments */
    width: 100%;
    left: 0;
    right: 0;
}

.carousel-indicator {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background-color: var(--quicksand-light);
    cursor: pointer;
    transition: all var(--transition-fast);
    margin: 0 0.4rem; /* Ajout de marge horizontale pour un meilleur espacement */
}

.carousel-indicator.active {
    width: 2.4rem;
    border-radius: 1rem;
    background-color: var(--walnut);
}

/* ==========================================================================
   == STYLES POUR LA SECTION "À PROPOS" TEMPORAIRE (SANS IMAGES) ========
   ========================================================================== */

.about-content-single-column {
    max-width: 85ch; /* Limite la largeur du texte pour une meilleure lisibilité */
    margin: 0 auto;  /* Centre le bloc de contenu dans la page */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centre les éléments comme le titre et le divider */
    text-align: center;  /* Centre les paragraphes */
}

/* Assure que les "features" (points forts) restent alignés à gauche,
   ce qui est plus lisible, même si le bloc global est centré. */
.about-content-single-column .about-features {
    text-align: left;
    width: 100%; /* Prend la largeur de son conteneur (.about-content-single-column) */
    max-width: 600px; /* On peut lui donner une largeur max pour ne pas qu'il s'étire trop */
}

/* -------------------------------------------------------------------------- */
/* SECTION À PROPOS (ABOUT)                                                    */
/* -------------------------------------------------------------------------- */

.about {
    padding: var(--section-spacing) 4rem;
    position: relative;
    overflow: hidden; /* Cache les éléments qui pourraient déborder (décoration) */
}

/* Grille principale pour la section "À propos" (texte et images) */
.about-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr); /* Grille à 12 colonnes */
    gap: 3.2rem; /* Espace entre les colonnes */
    align-items: center; /* Alignement vertical du contenu */
}

/* Contenu texte */
.about-content {
    grid-column: 1 / 7; /* Prend les 6 premières colonnes */
}

/* Conteneur des images */
.about-images {
    grid-column: 8 / 13; /* Prend les 5 dernières colonnes */
    position: relative; /* Pour positionner les images et la déco */
    height: 60rem; /* Hauteur fixe pour le conteneur des images */
}

/* Image individuelle */
.about-image {
    position: absolute; /* Positionnement libre dans .about-images */
    border-radius: var(--border-radius-md);
    box-shadow: var(--box-shadow-md);
    overflow: hidden; /* Cache les bords de l'image si nécessaire */
}
.about-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Remplit le conteneur en coupant si besoin */
}

/* Positionnement spécifique des images */
.about-image-1 {
    width: 70%; /* Largeur relative à .about-images */
    height: 60%; /* Hauteur relative à .about-images */
    top: 0;
    right: 0;
    z-index: 2; /* Au-dessus de la déco et de l'image 2 */
}

.about-image-2 {
    width: 60%;
    height: 50%;
    bottom: 0;
    left: 0;
    z-index: 3; /* Au-dessus de tout */
}

/* Forme décorative derrière les images */
.about-decoration {
    position: absolute;
    width: 80%;
    height: 80%;
    background-color: var(--quicksand-light);
    opacity: 0.2;
    border-radius: var(--border-radius-lg);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-8deg); /* Centre et incline */
    z-index: 1; /* Derrière les images */
}

/* Grille pour les caractéristiques (points forts) */
.about-features {
    display: grid;
    grid-template-columns: 1fr; /* Une colonne par défaut */
    gap: 2.4rem;
    margin-top: 4rem; /* Espace après le texte principal */
}

/* Caractéristique individuelle (icône + texte) */
.feature {
    display: flex;
    align-items: flex-start; /* Aligne le haut de l'icône avec le haut du texte */
    gap: 1.6rem; /* Espace entre icône et texte */
}

/* Icône de la caractéristique */
.feature-icon {
    width: 4.8rem;
    height: 4.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; /* Cercle */
    background: linear-gradient(135deg, var(--walnut-light), var(--walnut));
    color: white;
    font-size: 2rem; /* Taille de l'icône Feather */
    flex-shrink: 0; /* Empêche l'icône de rétrécir */
}
.feature-icon i {
    width: 2rem;
    height: 2rem;
}

/* Contenu texte de la caractéristique */
.feature-content h3 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 0.8rem;
    color: var(--black-pearl);
}

/* Contenu textuel de la caractéristique */
.feature-content p {
    color: var(--black-pearl-light);
    font-size: 1.5rem;
}

/* ==========================================================================
   == SECTION RÉSEAUX SOCIAUX ===============================================
   ========================================================================== */

.social-media-section {
    padding: var(--section-spacing) 0;
    background-color: white; /* Un fond blanc pour contraster avec le footer et la section Discovery */
}

.social-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 3.2rem;
    margin-top: 6.4rem;
    /* Marge inférieure augmentée pour plus d'espace avant le carrousel */
    margin-bottom: 8rem; /* Valeur augmentée de 8rem à 12rem */
}

.social-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 4rem 3rem;
    background-color: var(--white-rock-light);
    border-radius: var(--border-radius-md);
    text-decoration: none;
    transition: all var(--transition-fast);
    border: 1px solid transparent;
}

.social-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--box-shadow-md);
    border-color: var(--quicksand-light);
    background-color: white;
}

/* Conteneur commun pour l'icône qui garantit un espacement et une taille uniformes */
.social-card-icon-wrapper {
    width: 4rem;
    height: 4rem;
    margin-bottom: 2.4rem; /* La marge est maintenant ici */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Styles pour les icônes (i et img) à l'intérieur du conteneur */
.social-card-icon-wrapper i,
.social-card-icon-wrapper .social-icon-svg {
    width: 100%; /* L'icône prend toute la taille de son conteneur */
    height: 100%;
}

/* Styles spécifiques aux icônes Feather (couleur, épaisseur) */
.social-card-icon-wrapper i {
    color: var(--walnut);
    stroke-width: 1.5px;
}

/* Le filtre TikTok reste appliqué directement à l'image */
.social-card-icon-wrapper .social-icon-svg {
    filter: invert(27%) sepia(20%) saturate(2954%) hue-rotate(352deg) brightness(94%) contrast(90%);
}

.social-card-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.8rem;
    color: var(--black-pearl);
    margin-bottom: 1.2rem;
}

.social-card-text {
    color: var(--black-pearl-light);
    font-size: 1.5rem;
    line-height: 1.5;
    flex-grow: 1; /* Pousse le @handle en bas */
    margin-bottom: 2.4rem;
}

.social-card-handle {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.6rem;
    color: var(--quicksand);
    margin-top: auto; /* S'assure qu'il reste en bas */
}
.video-carousel-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.video-carousel-track-container {
    overflow: hidden;
}

.video-carousel-track {
    display: flex;
    align-items: center; /* Aligne les slides verticalement */
    /* Pas de gap, le JS calculera la position exacte */
    transition: transform var(--transition-medium);
}

.video-slide {
    flex-shrink: 0; /* Empêche les slides de se compresser */
    width: 325px; /* Largeur de base */
    margin: 0 1.2rem; /* Marge remplacera le gap pour un calcul plus simple */
    aspect-ratio: 9 / 16;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: var(--box-shadow-sm);
    background-color: var(--white-rock);
    cursor: pointer;
    
    /* État par défaut (sur le côté) */
    transform: scale(0.85);
    opacity: 0.5;
    filter: blur(4px);
    transition: all var(--transition-medium);
}

.video-slide.is-active {
    /* État actif (au centre) */
    transform: scale(1);
    opacity: 1;
    filter: blur(0);
    box-shadow: var(--box-shadow-lg);
}

.video-slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(5px);
    border: none;
    box-shadow: var(--box-shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all var(--transition-fast);
}

.video-carousel-nav:hover { background-color: white; transform: translateY(-50%) scale(1.05); }
.video-carousel-nav i { color: var(--walnut); width: 2.4rem; height: 2.4rem; }
.video-carousel-nav.prev { 
    left: 2.4rem; /* On ajoute une marge intérieure */
}
.video-carousel-nav.next { 
    right: 2.4rem; /* On ajoute une marge intérieure */
}

/* Style pour le bouton de contrôle du son sur les vidéos */
.video-sound-toggle {
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    z-index: 5;
    /* Le bouton est maintenant visible par défaut */
    opacity: 1;
    transform: scale(1);
    transition: all var(--transition-fast);
}

.video-sound-toggle i {
    width: 2rem;
    height: 2rem;
}

/* Gestion de l'affichage des icônes de son */
.video-sound-toggle[data-state="muted"] .icon-unmuted,
.video-sound-toggle[data-state="unmuted"] .icon-muted {
    display: none;
}

/* Responsive Mobile : on simplifie avec un scroll-snap */
@media (max-width: 768px) {
    .video-carousel-nav { display: none; }

    .video-carousel-track-container {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        padding: 0; 
    }

    .video-carousel-track-container::-webkit-scrollbar { display: none; }

    .video-slide {
        scroll-snap-align: center;
        transform: scale(1);
        opacity: 1;
        filter: none;
    }

    .video-carousel-track {
        padding: 0; /* Important: pas de padding ici */
        gap: 1.2rem;
    }
    .carousel-spacer {
        display: block;
        flex-shrink: 0;
        /* On leur donne la largeur exacte pour centrer les vidéos de 325px */
        width: calc(50vw - 162.5px - 0.6rem); /* 50% de l'écran - moitié de la vidéo - moitié du gap */
        height: 1px; /* Juste pour qu'ils existent dans le flux */
    }
    .social-grid {
        display: flex; /* On passe de 'grid' à 'flex' */
        overflow-x: auto; /* Active le défilement horizontal */
        padding: 1rem 2rem 2rem; /* Espace pour le scroll et l'ombre */
        margin-left: -2rem; /* Compense le padding pour s'aligner à gauche */
        margin-right: -2rem; /* Compense le padding pour s'aligner à droite */
        /* Cache la barre de défilement */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE */
    }
    .social-grid::-webkit-scrollbar {
        display: none; /* Chrome, Safari */
    }

    .social-card {
        flex: 0 0 280px; /* Donne une largeur fixe à chaque carte */
        /* Vous pouvez ajuster 280px si vous voulez des cartes plus ou moins larges */
    }
}

@media (min-width: 769px) {
    .video-slide:not(.is-active) .video-sound-toggle {
        opacity: 0;
        transform: scale(0.8);
        pointer-events: none;
    }
}

/* -------------------------------------------------------------------------- */
/* SECTION TÉMOIGNAGES (TESTIMONIALS)                                         */
/* -------------------------------------------------------------------------- */

.testimonials {
    padding: 8rem;
    background-color: white;
    position: relative;
    overflow: hidden;
}

/* Décoration de fond pour les témoignages */
.testimonial-decoration {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%); /* Centre verticalement */
    width: 100%;
    height: 60%; /* Hauteur de la déco */
    background: linear-gradient(90deg, var(--quicksand-light) 0%, transparent 50%, var(--quicksand-light) 100%);
    opacity: 0.15;
    z-index: 1; /* Derrière le slider */
    pointer-events: none;
}

/* Conteneur principal du slider */
.testimonial-slider {
    position: relative;
    z-index: 2; /* Au-dessus de la déco */
    margin-top: 6.4rem; /* Espace après le titre */
    padding: 2.4rem 0; /* Espace pour les ombres des cartes */
    cursor: grab; /* Indique qu'on peut faire glisser */
}
.testimonial-slider:active {
    cursor: grabbing; /* Curseur pendant le clic/glisser */
}

/* Piste contenant les cartes (avec défilement horizontal) */
.testimonial-track {
    display: flex; /* Cartes alignées horizontalement */
    gap: 3.2rem; /* Espace entre les cartes */
    width: max-content; /* Permet au contenu de dépasser */
    transform: translateX(0); /* Position initiale */
    transition: transform 0.5s ease; /* Animation fluide du défilement */
    padding: 2.4rem 0; /* Espace pour ombres */
    cursor: grab; /* Indique que l'élément peut être glissé */
    /* Supprimer les propriétés de défilement automatique pour notre nouvelle approche */
    /* overflow-x: auto; */
    /* scroll-snap-type: x mandatory; */
    /* scrollbar-width: none; */
    /* -ms-overflow-style: none; */
}

.testimonial-track::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Opera */
}

/* Carte de témoignage individuelle */
.testimonial-card {
    /* Hérite du .card de base */
    flex: 0 0 40rem; /* Ne grandit pas, ne rétrécit pas, base de 40rem */
    padding: 4.8rem;
    position: relative; /* Pour le guillemet décoratif */
    overflow: hidden; /* Cache le guillemet qui dépasse */
    scroll-snap-align: start; /* Alignement pour scroll-snap */
}

/* Guillemet décoratif géant */
.testimonial-card::before {
    content: "“"; /* Guillemet ouvrant */
    position: absolute;
    top: 1.5rem; /* Ajustement position */
    left: 2rem;
    font-family: 'Playfair Display', serif; /* Police spécifique pour le guillemet */
    font-size: 12rem; /* Très grand */
    line-height: 1;
    color: var(--quicksand-light);
    opacity: 0.3;
    z-index: 1; /* Derrière le contenu */
    pointer-events: none;
}

/* Contenu réel du témoignage */
.testimonial-content {
    position: relative;
    z-index: 2; /* Au-dessus du guillemet */
}

/* Texte du témoignage */
.testimonial-text {
    font-size: 1.8rem;
    font-weight: 300;
    font-style: italic;
    color: var(--black-pearl);
    margin-bottom: 2.4rem;
    line-height: 1.5;
}

/* Bloc auteur (avatar + nom) */
.testimonial-author {
    display: flex;
    align-items: center; /* Alignement vertical */
    gap: 1.6rem; /* Espace avatar/texte */
}

/* Avatar de l'auteur */
.testimonial-avatar {
    width: 6.4rem;
    height: 6.4rem;
    border-radius: 50%; /* Cercle */
    overflow: hidden; /* Cache les bords de l'image */
    flex-shrink: 0; /* Ne rétrécit pas */
}
.testimonial-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Remplit le cercle */
}

/* Informations textuelles de l'auteur */
.testimonial-info h4 { /* Nom */
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--black-pearl);
    margin-bottom: 0.4rem;
}

/* Info supplémentaire (ex: "Ensemble depuis X ans") */
.testimonial-info p {
    font-size: 1.4rem;
    color: var(--quicksand);
}

/* Conteneur des boutons de navigation du slider */
.testimonial-navigation {
    display: flex;
    justify-content: center; /* Centre les boutons */
    gap: 1.6rem;
    margin-top: 3.2rem; /* Espace après le slider */
}

/* Bouton de navigation individuel */
.testimonial-button {
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    color: var(--black-pearl);
    border: 1px solid var(--quicksand-light);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.testimonial-button:hover {
    background-color: var(--walnut);
    color: white;
    border-color: var(--walnut);
}

.testimonial-button i { /* Icône flèche */
    width: 2rem;
    height: 2rem;
}

/* NOUVEAUX STYLES POUR CENTRER PEU DE TÉMOIGNAGES */
.testimonial-track.center-single-testimonial,
.testimonial-track.center-double-testimonials {
    justify-content: center; /* Centre les cartes flex horizontalement */
    width: 100%;             /* Permet à justify-content de fonctionner correctement */
    /* On retire le transform translateX qui pourrait interférer avec le centrage simple */
    transform: translateX(0) !important;
}

/* Optionnel : si vous voulez un comportement spécifique pour une seule carte,
   par exemple, s'assurer qu'elle ne prend pas toute la largeur si elle est petite. */
.testimonial-track.center-single-testimonial .testimonial-card {
    /* flex-grow: 0; */ /* Empêche la carte de grandir pour remplir l'espace si besoin */
    /* max-width: 45rem; */ /* Ou une largeur maximale pour une seule carte */
}

/* Pour deux cartes, elles devraient se placer côte à côte et être centrées ensemble.
   La propriété 'gap' sur .testimonial-track devrait gérer l'espacement entre elles. */

/* S'assurer que le glissement est désactivé si les cartes sont centrées et ne scrollent pas */
.testimonial-track.center-single-testimonial,
.testimonial-track.center-double-testimonials {
    cursor: default; /* Change le curseur car pas de glissement */
    /* Pour être sûr, on pourrait aussi désactiver les écouteurs d'événements de drag
       dans le JS si ces classes sont présentes, mais le CSS suffit souvent pour l'UX. */
}


/* -------------------------------------------------------------------------- */
/* SECTION DISCOVERY CALL (APPEL DÉCOUVERTE)                                  */
/* -------------------------------------------------------------------------- */

.discovery {
    padding: 8rem 0; /* Applique 4rem en haut ET en bas, et 0 à gauche/droite */
    background-color: var(--black-pearl); /* Fond sombre */
    color: white; /* Texte blanc par défaut */
    position: relative;
    overflow: hidden;
}

/* Décoration de fond */
.discovery-decoration {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(45deg, transparent 0%, rgba(155, 98, 58, 0.1) 100%); /* Dégradé subtil */
    z-index: 1; /* Derrière le contenu */
    pointer-events: none;
}

/* Grille pour le contenu et Calendly */
.discovery-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr); /* Grille 12 colonnes */
    gap: 4rem; /* Espace entre les colonnes */
    align-items: center; /* Alignement vertical */
    position: relative;
    z-index: 2; /* Au-dessus de la décoration */
}

/* Contenu texte de gauche */
.discovery-content {
    grid-column: 1 / 6; /* Prend 5 colonnes */
}

/* Titre spécifique (déjà stylé par .title, mais on force la couleur) */
.discovery-title {
    color: white;
}

/* Texte descriptif */
.discovery-text {
    color: rgba(255, 255, 255, 0.8); /* Blanc légèrement transparent */
    margin-bottom: 4rem;
    font-size: 1.8rem;
}

/* Liste des bénéfices */
.discovery-benefits {
    margin-bottom: 4rem;
}

/* Bénéfice individuel (icône + texte) */
.discovery-benefit {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 1.6rem;
    color: rgba(255, 255, 255, 0.9); /* Un peu plus opaque */
    font-size: 1.6rem;
}

.discovery-benefit i { /* Icône check */
    color: var(--walnut-light); /* Couleur contrastante */
    width: 1.8rem;
    height: 1.8rem;
    flex-shrink: 0;
}

/* Conteneur pour l'iframe Calendly */
.discovery-calendly {
    grid-column: 7 / 13; /* Prend les 6 colonnes restantes */
    height: 60rem; /* Hauteur fixe pour Calendly */
    background-color: white; /* Fond pendant le chargement de l'iframe */
    border-radius: var(--border-radius-md);
    overflow: hidden; /* Cache les bords de l'iframe si dépasse */
    box-shadow: var(--box-shadow-lg);
}

.discovery-calendly iframe {
    width: 100%;
    height: 100%;
    border: none; /* Supprime la bordure de l'iframe */
}

/* ==========================================================================
   == STYLES POUR LA SECTION CTA - OUTILS GRATUITS ============
   ========================================================================== */

/* Conteneur principal de la section */
.cta-tools-section {
    padding-top: 4rem;
    padding-bottom: var(--section-padding);
    background-color: transparent;
    border: none;
    margin-top: 0; /* << MARGE HAUTE AJOUTÉE ICI */
}

/* Le contenu intérieur, qui forme la "carte" */
.cta-tools-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    flex-wrap: wrap; 
    
    max-width: var(--container-width);
    margin: 0 auto;
    
    /* MODIFIÉ : Padding uniforme pour créer les marges internes */
    padding: 2.5rem 4rem;
    background-color: var(--white-rock);
    border-radius: var(--border-radius-md);
    box-shadow: 0 8px 30px rgba(var(--black-pearl-rgb), 0.07);
}

/* L'icône cadeau sur la gauche */
.cta-tools-icon {
    flex-shrink: 0;
    background-color: var(--walnut);
    color: var(--white-rock-light);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(112, 58, 24, 0.3);
}

.cta-tools-icon i {
    width: 35px;
    height: 35px;
    stroke-width: 1.5px;
}

/* La partie texte (titre et paragraphe) */
.cta-tools-text {
    flex-grow: 1;
}

.cta-tools-text .overline {
    color: var(--walnut);
    font-weight: 500;
}

.cta-tools-text .title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2.4rem, 4vw, 3rem);
    color: var(--black-pearl);
    margin-top: 0.2rem;
    margin-bottom: 0.8rem;
    line-height: 1.2;
}

.cta-tools-text p {
    font-size: 1.6rem;
    color: var(--black-pearl-light);
    max-width: 65ch;
    margin-bottom: 0;
}

/* La partie avec le bouton d'action */
.cta-tools-action {
    flex-shrink: 0;
    /* La marge à gauche n'est plus nécessaire grâce au padding du parent */
    /* margin-left: 2rem; */
}

/* -------------------------------------------------------------------------- */
/* RESPONSIVE - AJUSTEMENTS SPÉCIFIQUES À L'ACCUEIL                           */
/* -------------------------------------------------------------------------- */

/* Larges desktops (ajustements mineurs si besoin) */
@media (max-width: 1200px) {
    /* .sofa-container { */
    /*     width: 51.75%; */
    /*     right: -2%; */
    /* } */
    .about-images {
        height: 50rem; /* Réduit la hauteur */
    }
    .discovery-grid {
        /* Empilement sur écrans larges mais pas immenses */
        grid-template-columns: 1fr;
        gap: 6rem; /* Augmente l'espace vertical */
    }
    .discovery-content, .discovery-calendly {
        grid-column: 1 / -1; /* Prend toute la largeur */
    }
    .discovery-calendly {
        height: 70rem; /* Augmente hauteur car prend toute largeur */
    }
}

/* Tablettes et petits desktops */
@media (max-width: 992px) {
    .hero-section {
        padding: 14rem 0 10rem; /* Ajuste le padding */
    }
    /* .sofa-container { */
    /*     opacity: 0.2; */
    /*     width: 80.5%; */
    /*     right: -15%; */
    /* } */
    .about-grid {
        grid-template-columns: 1fr; /* Empile texte et images */
    }
    .about-content {
       text-align: center; /* Centre le texte quand il est seul */
    }
    .about-content .section-divider {
        margin-left: auto; margin-right: auto; /* Centre le divider */
    }
     .about-features {
        text-align: left; /* Réaligne les features à gauche */
     }
    .about-images {
        grid-row: 1; /* Place les images AVANT le texte */
        margin-bottom: 4.8rem; /* Espace sous les images */
        height: 40rem; /* Réduit encore la hauteur */
    }
    .testimonial-card {
         flex-basis: 35rem; /* Cartes un peu moins larges */
    }
}

/* Mobiles larges et tablettes verticales */
@media (max-width: 768px) {
    .hero-section {
        padding: 12rem 0 8rem;
    }
    /* .sofa-container { */
    /*     opacity: 0.1; */
    /*     width: 100%; */
    /*     right: -25%; */
    /* } */
    .hero-buttons {
        flex-direction: column; /* Empile les boutons */
        align-items: flex-start; /* Alignement à gauche */
    }
    .service-card {
        padding: 3.2rem; /* Moins de padding interne */
    }
    .services-grid {
        grid-template-columns: 1fr; /* Une seule colonne pour les services */
    }
     .about-images {
        height: 35rem;
     }
}

/* Petits mobiles */
@media (max-width: 576px) {
    .hero-section {
        padding: 12rem 0 8rem;
    }
     .hero-text {
        max-width: 100%; /* Prend toute la largeur */
        text-align: center; /* Centre le texte */
     }
     .hero-title {
        font-size: 3.6rem; /* Titre plus petit */
     }
     .hero-text {
        font-size: 1.8rem;
     }
    .hero-buttons {
        align-items: center; /* Centre les boutons empilés */
    }
    /* .sofa-container { */
    /*     opacity: 0.08; */
    /*     right: -30%; */
    /* } */
    .about-images {
        height: 30rem;
    }
    .testimonial-card {
        flex-basis: calc(100% - 4rem); /* Prend presque toute la largeur, moins padding */
        padding: 3.2rem;
    }
    .testimonial-track {
        padding-left: 2rem; /* Ajoute padding pour voir l'ombre */
        padding-right: 2rem;
    }
    .discovery-calendly {
        height: 60rem; /* Hauteur réduite pour mobile */
    }
}

/* ==========================================================================
   == CORRECTIONS RESPONSIVE POUR LES PETITS ÉCRANS (TABLETTES & MOBILES) ==
   ========================================================================== */

@media (max-width: 992px) {

    /* --- Section Héros --- */
    .hero-container {
        flex-direction: column-reverse; /* Met l'image au-dessus du texte */
        gap: 0;
    }

    .hero-text {
        text-align: center; /* Centre le texte */
        padding-right: 0;
        flex-basis: auto; /* Annule la base flex du desktop */
    }

    .hero-image {
        overflow: visible; /* Permet à l'image de dépasser si besoin */
        flex-basis: auto;
        width: 135%; 
        position: relative; /* Nécessaire pour que le positionnement fonctionne bien */
        left: 56%;          /* On déplace le point de départ du coin gauche à 50% (au centre) */
        transform: translateX(-50%); /* On le tire vers la gauche de la moitié de SA PROPRE largeur */
        margin-top: -40px;
    }
    
    .sofa {
        position: relative; /* LA CORRECTION LA PLUS IMPORTANTE : annule la position absolue */
        left: auto;
        bottom: auto;
        height: auto;
        width: 100%;
        margin: 0 auto 0px auto; /* Centre et crée le chevauchement */
        object-fit: contain;
    }

    .hero-buttons {
        justify-content: center; /* Centre les boutons */
    }

    .hero-title {
        font-size: clamp(4.5rem, 12vw, 6rem); /* << AJOUT : Police plus grande sur mobile/tablette */
        margin-bottom: 2.4rem; /* << AJOUT : On s'assure que la marge sous le titre est cohérente */
    }

    /* --- Section CTA Outils Gratuits --- */
    .cta-tools-content {
        flex-direction: column; /* Empile les éléments */
        text-align: center;     /* Centre le texte */
        gap: 2.5rem;            /* Espace vertical entre les éléments */
        padding: 3rem;          /* Un padding confortable pour mobile */
    }

    .cta-tools-action {
        margin-top: 1rem; /* Ajoute un petit espace au-dessus du bouton */
    }

    /* --- Section À Propos (Notre Philosophie) --- */
    .about-grid {
        display: flex; /* On passe en flexbox pour un meilleur contrôle de l'ordre */
        flex-direction: column; /* On empile les éléments verticalement */
        gap: 4.8rem; /* Espace vertical entre les blocs texte et image */
    }

    .about-content {
        order: 1; /* << CORRECT : Le texte vient en premier */
        text-align: center; 
    }
    
    .about-content .section-divider {
        margin-left: auto;
        margin-right: auto;
    }

    .about-images {
        order: 2; /* << CORRECT : Les images viennent en deuxième */
        height: 35rem; 
        width: 100%; /* S'assure que le conteneur prend toute la largeur */
    }

    .about-features {
        text-align: left;
    }

    /* --- Section Modules (Notre Approche) --- */
    .modules-carousel {
        padding: 0;
        position: relative;
    }

    /* On cache les cartes non actives sur mobile */
    .module-card.prev,
    .module-card.next,
    .module-card.hidden {
        display: none;
    }

    /* On modifie la carte active pour qu'elle soit un conteneur flex vertical */
    .module-card.active {
        width: 90%;
        max-width: 400px;
        margin: 0 auto;
        padding: 3rem; /* Padding un peu plus généreux */
        position: relative;
        display: flex;         /* << IMPORTANT : la carte devient un conteneur flex */
        flex-direction: column; /* << IMPORTANT : on empile ses enfants verticalement */
    }

    /* On réorganise le header de la carte (icône + titre) */
    .module-header {
        flex-direction: column; /* << On empile l'icône et le titre */
        align-items: center;    /* << On les centre horizontalement */
        gap: 1rem;              /* Espace entre l'icône et le titre */
    }

    /* On s'assure que le titre lui-même est centré (s'il passe sur deux lignes) */
    .module-title {
        text-align: center;
    }

    .module-icon {
        width: 5rem;   /* Taille réduite (original 6rem) */
        height: 5rem;  /* Taille réduite (original 6rem) */
    }

    .module-icon i {
        width: 2.2rem; /* On ajuste la taille de l'icône interne aussi */
        height: 2.2rem;
    }

    /* On centre la description */
    .module-description {
        font-size: 1.4rem;
        line-height: 1.5;
        margin-bottom: 1.5rem;
        text-align: center;
    }

    /* On aligne le lien "En savoir plus" à droite */
    .module-link {
        margin-top: auto;        /* << Pousse le lien tout en bas de la carte */
        align-self: center;    /* << ALIGNE LE LIEN À DROITE */
    }

    /* On garde les flèches transparentes */
    .carousel-nav {
        z-index: 25;
        background-color: transparent;
        border: none;
        box-shadow: none;
    }

    .carousel-prev,
    .carousel-next {
        top: auto;
        bottom: 2rem;   /* Distance depuis le bas de la carte (à ajuster) */
        transform: none;
        /* On retire le fond */
        background: transparent;
        border: none;
        box-shadow: none;
    }

    /* On place la flèche gauche */
    .carousel-prev {
        left: 1.5rem;
        margin-left: 0;
    }

    /* On place la flèche droite */
    .carousel-next {
        right: 1.5rem;
        margin-right: 0;
    }

    /* --- Section Discovery Call --- */
    .discovery-grid {
        display: flex; /* On utilise flex pour un contrôle simple */
        flex-direction: column; /* On empile les éléments */
        gap: 4rem; /* Espace entre le texte et le bloc Calendly */
    }

    .discovery-content {
        text-align: center; /* On centre le texte */
    }

    .discovery-content .section-divider {
        margin-left: auto; /* On centre le trait de séparation */
        margin-right: auto;
    }

    .discovery-benefits {
        display: inline-flex; /* Permet aux bénéfices de ne pas prendre toute la largeur */
        flex-direction: column; /* Empile les bénéfices */
        align-items: flex-start; /* Aligne le texte des bénéfices à gauche */
        text-align: left; /* Assure que le texte interne est bien à gauche */
    }

    /* On masque la décoration qui n'est plus pertinente sur mobile */
    .discovery-decoration {
        display: none;
    }
}

@media (max-width: 768px) {
    .hero-buttons {
        flex-direction: column; /* Empile les boutons sur les très petits écrans */
        align-items: center;
    }

    .sofa {
        margin-bottom: -40px; /* Réduit le chevauchement */
    }

    /* --- Section À Propos (Notre Philosophie) --- */
    .about-grid {
        display: flex; /* On passe en flexbox pour un meilleur contrôle de l'ordre */
        flex-direction: column; /* On empile les éléments verticalement */
        gap: 4.8rem; /* Espace vertical entre les blocs texte et image */
    }

    .about-content {
        order: 1; /* << CORRECT : Le texte vient en premier */
        text-align: center; 
    }
    
    .about-content .section-divider {
        margin-left: auto;
        margin-right: auto;
    }

    .about-images {
        order: 2; /* << CORRECT : Les images viennent en deuxième */
        height: 35rem; 
        width: 100%; /* S'assure que le conteneur prend toute la largeur */
    }

    .about-features {
        text-align: left;
    }

    /* --- Section CTA Outils Gratuits --- */
    .cta-tools-content {
        flex-direction: column; /* Empile les éléments */
        text-align: center;     /* Centre le texte */
        gap: 2.5rem;            /* Espace vertical entre les éléments */
        padding: 3rem;          /* Un padding confortable pour mobile */
    }

    .cta-tools-action {
        margin-top: 1rem; /* Ajoute un petit espace au-dessus du bouton */
    }
    
    /* --- Section Modules (Notre Approche) --- */
    .modules-carousel {
        padding: 0;
        position: relative;
    }

    /* On cache les cartes non actives sur mobile */
    .module-card.prev,
    .module-card.next,
    .module-card.hidden {
        display: none;
    }

    /* On modifie la carte active pour qu'elle soit un conteneur flex vertical */
    .module-card.active {
        width: 90%;
        max-width: 400px;
        margin: 0 auto;
        padding: 3rem; /* Padding un peu plus généreux */
        position: relative;
        display: flex;         /* << IMPORTANT : la carte devient un conteneur flex */
        flex-direction: column; /* << IMPORTANT : on empile ses enfants verticalement */
    }

    /* On réorganise le header de la carte (icône + titre) */
    .module-header {
        flex-direction: column; /* << On empile l'icône et le titre */
        align-items: center;    /* << On les centre horizontalement */
        gap: 1rem;              /* Espace entre l'icône et le titre */
    }

    /* On s'assure que le titre lui-même est centré (s'il passe sur deux lignes) */
    .module-title {
        text-align: center;
    }

    .module-icon {
        width: 5rem;   /* Taille réduite (original 6rem) */
        height: 5rem;  /* Taille réduite (original 6rem) */
    }

    .module-icon i {
        width: 2.2rem; /* On ajuste la taille de l'icône interne aussi */
        height: 2.2rem;
    }

    /* On centre la description */
    .module-description {
        font-size: 1.4rem;
        line-height: 1.5;
        margin-bottom: 1.5rem;
        text-align: center;
    }

    /* On aligne le lien "En savoir plus" à droite */
    .module-link {
        margin-top: auto;        /* << Pousse le lien tout en bas de la carte */
        align-self: center;    /* << ALIGNE LE LIEN À DROITE */
    }

    /* On garde les flèches transparentes */
    .carousel-nav {
        z-index: 25;
        background-color: transparent;
        border: none;
        box-shadow: none;
    }

    .carousel-prev,
    .carousel-next {
        top: auto;
        bottom: 2rem;   /* Distance depuis le bas de la carte (à ajuster) */
        transform: none;
        /* On retire le fond */
        background: transparent;
        border: none;
        box-shadow: none;
    }

    /* On place la flèche gauche */
    .carousel-prev {
        left: 1.5rem;
        margin-left: 0;
    }

    /* On place la flèche droite */
    .carousel-next {
        right: 1.5rem;
        margin-right: 0;
    }
    
    /* --- Section Discovery Call --- */
    .discovery-grid {
        display: flex; /* On utilise flex pour un contrôle simple */
        flex-direction: column; /* On empile les éléments */
        gap: 4rem; /* Espace entre le texte et le bloc Calendly */
    }

    .discovery-content {
        text-align: center; /* On centre le texte */
    }

    .discovery-content .section-divider {
        margin-left: auto; /* On centre le trait de séparation */
        margin-right: auto;
    }

    .discovery-benefits {
        display: inline-flex; /* Permet aux bénéfices de ne pas prendre toute la largeur */
        flex-direction: column; /* Empile les bénéfices */
        align-items: flex-start; /* Aligne le texte des bénéfices à gauche */
        text-align: left; /* Assure que le texte interne est bien à gauche */
    }

    /* On masque la décoration qui n'est plus pertinente sur mobile */
    .discovery-decoration {
        display: none;
    }
}

@media (max-width: 500px) {
    /* Sur les très petits écrans, on sort les flèches pour éviter les superpositions */
    .carousel-prev {
        left: 1rem; /* On la colle à gauche */
        margin-left: 0; /* On annule la marge négative */
    }

    .carousel-next {
        right: 1rem; /* On la colle à droite */
        margin-right: 0; /* On annule la marge négative */
    }
}