/* ====================================================================
    SECTION 1 : VARIABLES CSS
   ==================================================================== */

:root {
    /* -- PALETTE DE COULEURS "NATURE & SÉRÉNITÉ" -- */

    --primary: #7A9E7E;         /* Vert sauge : couleur principale, évoque calme et équilibre */
    --primary-dark: #5F7C62;    /* Version plus foncée pour les états hover/active */
    --accent: #D4A373;          /* Sable/doré doux : pour les accents et mises en valeur */
    --text-dark: #2C3E50;       /* Gris foncé doux : plus agréable que le noir pur pour le texte */
    --text-light: #666666;      /* Gris moyen : pour les textes secondaires */
    --bg-light: #F9F8F6;        /* Blanc cassé très léger : pour les arrière-plans alternés */
    --white: #ffffff;           /* Blanc pur */


    /* -- POLICES DE CARACTÈRES --- */

    --font-heading: 'Playfair Display', serif;  /* Police élégante pour les titres */
    --font-body: 'Lato', sans-serif;            /* Police lisible pour le corps du texte */


    /* -- DIMENSIONS --- */
    --container-width: 1100px;  /* Largeur maximale du contenu principal */

     /* Nouvelles pour cohérence : */
    --border-light: rgba(0,0,0,0.3);    /* Pour bordures subtiles */
    --shadow-subtle: 0 5px 15px rgba(0,0,0,0.3);

}


html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}


/* ====================================================================

    SECTION 2 : RÉINITIALISATION ET STYLES GLOBAUX

    ====================================================================

    Cette partie "reset" supprime les styles par défaut des navigateurs
    et définit les bases typographiques et structurelles du site.

   ==================================================================== */


* { 
    box-sizing: border-box; /* Inclut padding/border dans le calcul des dimensions */
    margin: 0;              /* Supprime les marges par défaut */
    padding: 0;             /* Supprime les paddings par défaut */
}

body {
    font-family: var(--font-body);   /* Applique la police corps de texte */
    color: var(--text-dark);         /* Couleur principale du texte */
    line-height: 1.8;                /* Hauteur de ligne confortable pour la lecture */
    background-color: var(--white);  /* Fond blanc */
    font-size: 16px;                 /* Taille de base (1rem = 16px) */
}

/* Styles pour les titres (héritent de la police heading) */
h1, h2, h3, h4 { 
    font-family: var(--font-heading); /* Police élégante pour les titres */
    color: var(--text-dark);          /* Couleur foncée */
    margin-bottom: 1rem;              /* Espacement sous les titres */
}

/* Style des liens */
a { 
    text-decoration: none;  /* Supprime le soulignement par défaut */
    color: inherit;         /* Hérite de la couleur du parent */
    transition: 0.3s;       /* Animation douce pour les états hover */
}

/* Supprime les puces des listes non ordonnées */
ul { list-style: none; }

/* Optimise l'affichage des images */
img { 
    max-width: 100%;  /* Empêche les images de dépasser leur conteneur */
    display: block;   /* Évite l'espace blanc sous les images */
}



/* ====================================================================

    SECTION 3 : CLASSES UTILITAIRES

    ====================================================================

    Classes réutilisables dans tout le site pour des styles communs.

   ==================================================================== */


/* -- HÉRO SPÉCIAL PAGE INTERNE -- */
.page-hero {
    padding: 6rem 0 4rem;
    text-align: center;
    background-color: var(--primary-dark);
    color: var(--white);
}

.page-hero h1 {
    font-size: 3rem;
    color: var(--white);
    margin-bottom: 0.5rem;
}

.lead-text-white {
    font-size: 1.2rem;
    opacity: 0.9;
    font-weight: 300;
}

/* Conteneur centralisé */
.container { 
    width: 90%;                   /* Prend 90% de l'écran sur mobile */
    max-width: var(--container-width); /* Mais ne dépasse pas 1100px */
    margin: 0 auto;               /* Centre le conteneur horizontalement */
}

/* Espacement vertical pour les sections */
.section-padding { padding: 4rem 0; } /* 64px en haut et en bas */

/* Classe pour les arrière-plans clairs */
.bg-light { background-color: var(--bg-light); }

/* Centrage du texte */
.text-center { text-align: center; }



/* ====================================================================

    SECTION 4 : BOUTONS

    ====================================================================

    Styles pour les différents types de boutons utilisés sur le site.

   ==================================================================== */

.btn {
    display: inline-block;          /* Permet de définir width/padding */
    padding: 12px 25px;            /* Espacement intérieur */
    border-radius: 30px;           /* Coins arrondis (forme "pill") */
    font-weight: 700;              /* Texte en gras */
    text-transform: uppercase;     /* Texte en majuscules */
    font-size: 0.9rem;             /* Taille légèrement réduite */
    letter-spacing: 0.5px;         /* Espacement entre lettres */
    cursor: pointer;               /* Curseur main au survol */
}

/* Bouton principal (Call To Action) */
.btn-primary { 
    background: var(--primary);     /* Fond vert sauge */
    color: var(--white);            /* Texte blanc */
    border: 2px solid var(--primary); /* Bordure de même couleur */
}
.btn-primary:hover { 
    background: var(--primary-dark);  /* Assombrit au survol */
    border-color: var(--primary-dark);
}

/* Bouton avec contour (version secondaire) */
.btn-outline { 
    background: transparent;       /* Fond transparent */
    color: var(--white);           /* Texte blanc */
    border: 2px solid var(--white); /* Bordure blanche */
    margin-left: 10px;             /* Séparation avec le bouton précédent */
}
.btn-outline:hover { 
    background: var(--white);      /* Devient blanc au survol */
    color: var(--text-dark);       /* Texte devient foncé */
}

/* Version réduite des boutons */
.btn-sm { 
    padding: 8px 18px;  /* Moins de padding */
    font-size: 0.8rem;  /* Texte plus petit */
}



/* ====================================================================

    SECTION 5 : EN-TÊTE ET NAVIGATION

    ====================================================================

    Styles pour la barre de navigation fixe en haut du site.

   ==================================================================== */

.site-header { 
    background: var(--white);                     /* Fond blanc */
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);     /* Ombre légère pour la profondeur */
    position: sticky;                             /* Reste visible au défilement */
    top: 0;                                       /* Collé en haut */
    z-index: 1000;                                /* Au-dessus des autres éléments */
    padding: 0.8rem 0;                            /* Espacement vertical */
}

/* Conteneur flex pour aligner logo et navigation */
.header-container { 
    display: flex;                  /* Disposition en ligne */
    justify-content: space-between; /* Logo à gauche, nav à droite */
    align-items: center;            /* Alignement vertical au centre */
}

/* Logo texte */
.logo-text { 
    font-family: var(--font-heading); /* Même police que les titres */
    font-size: 1.5rem;                /* Taille légèrement agrandie */
    font-weight: 700;                 /* En gras */
    color: var(--text-dark);          /* Couleur foncée */
}


/* Sous-titre sous le logo */
.job-role { 
    display: block;            /* Sur sa propre ligne */
    font-size: 0.75rem;       /* Petit texte */
    color: var(--text-light); /* Couleur discrète */
    letter-spacing: 1px;      /* Espacement entre lettres */
}

/* Navigation desktop */
.nav-links { 
    display: flex;              /* Aligne les liens horizontalement */
    align-items: center;        /* Centre verticalement */
    gap: 30px;                  /* Espace entre les liens */
}
.nav-links a { 
    font-weight: 400;           /* Poids normal (pas en gras) */
    font-size: 0.95rem;         /* Taille légèrement réduite */
    position: relative;         /* Pour les pseudo-éléments (soulignement) */
}
.nav-links a:hover, 
.nav-links a.active { 
    color: var(--primary);      /* Devient vert sauge au survol/actif */
}

/* Masquage des éléments mobile sur desktop */
.mobile-nav, .burger-menu { display: none; }




/* ====================================================================

    SECTION 6 : SECTION HÉRO

    ====================================================================

    Grande bannière d'accueil avec image de fond et message principal.

   ==================================================================== */

.hero-section {
    position: relative;          /* Pour positionner l'overlay */
    /* 80% de la hauteur de l'écran */
    /* height: 80vh;                 */
    min-height: 500px;           /* Mais au minimum 500px */
    background: url('../images/hero-nature.jpg') center/cover no-repeat; /* Image de fond */
    background-color: #aebdb0;   /* Couleur de secours si l'image ne charge pas */
    display: flex;               /* Flex pour centrer le contenu */
    align-items: center;         /* Centre verticalement */
    justify-content: center;     /* Centre horizontalement */
    text-align: center;          /* Texte centré */
    color: var(--white);         /* Texte blanc pour contraster */
}

/* Overlay semi-transparent pour améliorer la lisibilité du texte */
.hero-overlay {
    position: absolute;           /* Couvre toute la section */
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.3); /* Noir à 30% d'opacité */
}

/* Contenu textuel au-dessus de l'overlay */
.hero-content { 
    position: relative;  /* Au-dessus de l'overlay */
    z-index: 1;          /* S'assure d'être visible */
}
.hero-content h1 { 
    font-size: 3.5rem;    /* Très gros titre */
    margin-bottom: 0.5rem; /* Petit espacement */
    color: var(--white);  /* Blanc pur */
}
.hero-slogan { 
    font-size: 1.5rem;    /* Taille moyenne */
    font-style: italic;   /* En italique pour la citation */
    margin-bottom: 2rem;  /* Espace avant les boutons */
    font-weight: 300;     /* Poids léger */
}



/* ====================================================================

    SECTION 7 : SECTION DE BIENVENUE

    ====================================================================

    Section à 2 colonnes présentant le texte d'introduction et la photo.

   ==================================================================== */


.grid-2-col { 
    display: grid;                       /* Utilise CSS Grid */
    grid-template-columns: 1fr 1fr;      /* Deux colonnes de largeur égale */
    gap: 4rem;                           /* Grand espace entre colonnes */
    align-items: center;                 /* Aligne verticalement au centre */
}

.section-title { 
    font-size: 2.2rem;    /* Gros titre mais plus petit que hero */
    margin-bottom: 3rem;  /* Espacement standard */
}

.lead-text { 
    font-size: 1.1rem;          /* Texte légèrement agrandi */
    color: var(--text-light);   /* Couleur secondaire */
    margin-bottom: 1.5rem;      /* Espacement augmenté */
}

/* Liste horizontale d'icônes et textes */
.features-list { 
    display: flex;        /* Disposition en ligne */
    gap: 20px;           /* Espace entre les éléments */
    margin: 2rem 0;      /* Espacement vertical */
}
.feature-item { 
    display: flex;               /* Flex pour icône + texte */
    flex-direction: column;      /* Empile verticalement */
    align-items: center;         /* Centre horizontalement */
    gap: 5px;                   /* Petit espace icône/texte */
    font-size: 0.9rem;          /* Texte petit */
    color: var(--primary);      /* Couleur principale */
    font-weight: 700;           /* En gras */
}
.feature-item i { 
    font-size: 1.5rem;          /* Icônes plus grandes */
}

/* Photo de profil */
.profile-img { 
    border-radius: 10px;                 /* Coins légèrement arrondis */
    box-shadow: 10px 10px 0px var(--bg-light); /* Ombre décalée originale */
    max-height: 450px;                   /* Limite la hauteur */
    object-fit: cover;                   /* Recadre l'image si nécessaire */
    width: 100%;                         /* Prend toute la largeur disponible */
}



/* ====================================================================

    SECTION 8 : CARTES DE SERVICES

    ====================================================================

    Grille de cartes présentant les différents services/offres.

   ==================================================================== */


.cards-grid { 
    display: grid;                                      /* CSS Grid */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* S'adapte automatiquement */
    gap: 2rem;                                          /* Espace entre cartes */
    margin-top: 3rem;                                   /* Espace depuis le titre */
}

.card { 
    background: var(--white);                           /* Fond blanc */
    padding: 2rem;                                      /* Espacement intérieur */
    border-radius: 8px;                                 /* Coins arrondis */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);           /* Ombre légère */
    transition: transform 0.3s;                         /* Animation au survol */
    border-bottom: 3px solid transparent;               /* Bordure invisible par défaut */
}
.card:hover { 
    transform: translateY(-5px);                       /* Légère élévation */
    border-bottom: 3px solid var(--primary);           /* Bordure colorée apparaît */
}

.card-icon { 
    font-size: 2rem;      /* Grandes icônes */
    color: var(--accent); /* Couleur dorée/sable */
    margin-bottom: 1rem;  /* Espace sous l'icône */
}

.card h3 { 
    font-size: 1.3rem;    /* Taille intermédiaire */
}

.card-link { 
    color: var(--primary);  /* Lien en vert sauge */
    font-weight: 700;       /* En gras */
    font-size: 0.9rem;      /* Petit texte */
    margin-top: 1rem;       /* Espace depuis le paragraphe */
    display: inline-block;  /* Permet les marges */
}



/* ====================================================================

    SECTION 9 : SECTION CITATION

    ====================================================================

    Zone de citation inspirante avec fond coloré.

   ==================================================================== */

.quote-section { 
    background: var(--primary);  /* Fond vert sauge */
    color: var(--white);         /* Texte blanc */
    text-align: center;          /* Centré */
    padding: 4rem 0;             /* Grand espacement vertical */
}

blockquote { 
    font-family: var(--font-heading);  /* Police élégante comme les titres */
    font-size: 1.8rem;                 /* Gros texte */
    font-style: italic;                /* En italique pour la citation */
    max-width: 800px;                  /* Limite la largeur pour la lisibilité */
    margin: 0 auto;                    /* Centre le bloc */
}

cite { 
    display: block;                    /* Sur sa propre ligne */
    font-size: 1rem;                   /* Taille normale */
    margin-top: 1rem;                  /* Espace depuis la citation */
    opacity: 0.8;                      /* Légère transparence */
    font-family: var(--font-body);     /* Retour à la police corps */
    font-style: normal;                /* Pas en italique */
}



/* ====================================================================

    SECTION 10 : PIED DE PAGE

    ====================================================================

    Zone d'informations importantes en bas de chaque page.

   ==================================================================== */

.site-footer { 
    background: var(--text-dark);  /* Fond gris très foncé */
    color: #dcdcdc;                /* Texte gris clair pour contraste */
    padding-top: 4rem;             /* Grand espacement en haut */
}

.footer-grid { 
    display: grid;                                  /* CSS Grid */
    grid-template-columns: 1.5fr 1fr 1fr;          /* 3 colonnes (la première plus large) */
    gap: 2rem;                                      /* Espace entre colonnes */
    padding-bottom: 3rem;                           /* Espace en bas */
    border-bottom: 1px solid rgba(255,255,255,0.1); /* Ligne de séparation subtile */
}

.footer-col h3 { 
    color: var(--white);      /* Titres en blanc */
    font-size: 1.2rem;        /* Taille intermédiaire */
    margin-bottom: 1.5rem;    /* Espace sous les titres */
}

.footer-contact li, 
.footer-links li { 
    margin-bottom: 0.8rem;    /* Espace entre les lignes */
}

.footer-contact i { 
    color: var(--accent);     /* Icônes en doré/sable */
    width: 20px;              /* Largeur fixe pour l'alignement */
}

.footer-bottom { 
    padding: 1.5rem 0;        /* Espacement vertical réduit */
    text-align: center;       /* Texte centré */
    font-size: 0.8rem;        /* Petit texte */
    opacity: 0.6;             /* Légère transparence */
}



/* ====================================================================

    SECTION 11 : RESPONSIVE MOBILE

    ====================================================================

    Adaptations pour les écrans de téléphone (largeur ≤ 768px).

   ==================================================================== */


@media (max-width: 768px) {
    /* Cache la navigation desktop sur mobile */
    .nav-links { display: none; }
    
    /* Affiche le menu burger */
    .burger-menu { 
        display: block;          /* Devient visible */
        font-size: 1.5rem;      /* Taille de l'icône */
        cursor: pointer;        /* Curseur main au survol */
    }
    
    /* Passage à une seule colonne pour la section bienvenue */
    .grid-2-col { grid-template-columns: 1fr; }
    
    /* Réduction des titres hero */
    .hero-content h1 { font-size: 2.5rem; }
    .hero-slogan { font-size: 1.1rem; }
    
    /* Passage à une colonne pour le footer */
    .footer-grid { grid-template-columns: 1fr; }
    
    /* Styles pour le menu mobile (quand il est ouvert via JS) */
    .mobile-nav { 
        display: none;              /* Caché par défaut (ouvert via JS) */
        background: var(--white);   /* Fond blanc */
        padding: 1rem;              /* Espacement intérieur */
        border-top: 1px solid #eee; /* Ligne de séparation */
    }
    .mobile-nav ul li { 
        margin-bottom: 1rem;                /* Espace entre liens */
        border-bottom: 1px solid #f9f9f9;   /* Ligne de séparation */
        padding-bottom: 0.5rem;             /* Espace sous le texte */
    }
}



/* ====================================================================
    SECTION 12 : NOUVEAUX STYLES POUR LA PAGE D'ACCUEIL
    ====================================================================
    Styles spécifiques ajoutés pour les nouvelles sections de index.php
   ==================================================================== */


/* -- CLASSES UTILITAIRES SUPPLÉMENTAIRES --- */

.text-small-mute { 
    font-size: 0.9rem;                 /* Texte légèrement plus petit */
    color: var(--text-light);          /* Utilise la variable existante */
    margin-top: 1rem;                  /* Espace au-dessus */
}

.mb-4 { 
    margin-bottom: 3rem;               /* Marge inférieure utilitaire */
}

/* ====================================================================
    GRID DES 3 PILIERS DE L'ACCOMPAGNEMENT
   ==================================================================== */
.pillars-grid {
    display: grid;                              
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 2rem;                                  
    margin-top: 2rem;                           
    text-align: center;                         
}

.pillar-card {
    padding: 1.5rem;          
    border: 1px solid rgba(0,0,0,0.1);   /* Utilise rgba pour transparence */
    border-radius: 8px;       
    transition: all 0.3s;     /* 'all' pour animer ombre ET bordure */     
}

.pillar-card:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);  
    border-color: var(--primary);            
}

.pillar-icon {
    font-size: 2.5rem;      
    color: var(--primary);  
    margin-bottom: 1rem;    
}

.pillar-card h4 {
    font-size: 1.2rem;        
    margin-bottom: 0.5rem;    
    color: var(--text-dark);  
}

/* ====================================================================
    SECTION AVEC FOND VERT FONCÉ
   ==================================================================== */
.bg-primary-dark {                   /* Nom plus cohérent que bg-sage */
    background-color: var(--primary-dark); 
    color: var(--white);                   
}

.bg-primary-dark h2 { 
    color: var(--white); 
}

/* ====================================================================
    AMÉLIORATIONS D'ACCESSIBILITÉ
   ==================================================================== */


a[href^="#"] {                      /* Pour TOUTES les ancres, pas juste #at-section */
    scroll-behavior: smooth;        /* Scroll doux */
}

/* Pour éviter le "scroll-behavior" sur mobile si performance */
@media (prefers-reduced-motion: reduce) {
    a[href^="#"] {
        scroll-behavior: auto;
    }
}

/* ====================================================================
    RESPONSIVE POUR LES NOUVEAUX ÉLÉMENTS
   ==================================================================== */

@media (max-width: 768px) {
    .pillars-grid {
        grid-template-columns: 1fr;  /* 1 colonne sur mobile */
        gap: 1.5rem;
    }
    
    .pillar-card {
        padding: 1.25rem;
    }
    
    .pillar-icon {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .features-list {
        flex-direction: column;      /* Icônes en colonne sur très petit mobile */
        gap: 1rem;
    }
}

/* ====================================================================
   SECTION 12 : NOUVEAUX STYLES POUR L'ANALYSE TRANSACTIONNELLE
   ====================================================================
   Styles spécifiques pour la présentation pédagogique de l'AT
   ==================================================================== */

/* --- LAYOUT INVERSE POUR LA SECTION AT --- */
/* Grille à 2 colonnes inversées (visuel à gauche, texte à droite) */
.grid-2-col-reverse { 
    display: grid;                     /* Utilise CSS Grid */
    grid-template-columns: 1fr 1fr;   /* Deux colonnes égales */
    gap: 4rem;                        /* Grand espace entre colonnes */
    align-items: center;              /* Aligne verticalement */
}

/* --- CONTENEUR VISUEL POUR L'AT --- */
/* Encadré pour présenter le schéma des 3 États du Moi */
.at-visual-container {
    padding: 2rem;                    /* Espacement intérieur généreux */
    background: var(--bg-light);      /* Fond léger pour distinction */
    border-radius: 10px;              /* Coins arrondis doux */
    border: 1px solid rgba(0,0,0,0.05); /* Bordure très subtile */
}

/* Style pour l'image du schéma AT */
.at-visual-container img {
    border: 3px solid var(--accent);   /* Bordure accent coloré */
    border-radius: 8px;                /* Coins légèrement arrondis */
    max-width: 100%;                   /* Adaptative */
    height: auto;                      /* Conserve les proportions */
}

/* --- SOUS-TITRE STYLISÉ --- */
/* Utilisé pour les titres intermédiaires moins importants */
.section-subtitle {
    font-size: 1.1rem;                /* Plus petit que section-title */
    font-family: var(--font-body);    /* Police corps pour différence */
    font-weight: 700;                 /* En gras pour visibilité */
    color: var(--primary-dark);       /* Vert plus foncé */
    text-align: center;               /* Centré dans son conteneur */
    margin-bottom: 1rem;              /* Espace avant le contenu */
}



/* ====================================================================
    SECTION 13 : STYLES POUR LES TÉMOIGNAGES
    ====================================================================
    Mise en forme des avis clients pour crédibilité et confiance
   ==================================================================== */

/* -- GRILLE DE TÉMOIGNAGES -- */
.testimonials-grid {
    display: grid;                                   /* CSS Grid */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive */
    gap: 2rem;                                       /* Espacement régulier */
    margin-top: 3rem;                                /* Séparation du titre */
}

/* -- CARTE DE TÉMOIGNAGE INDIVIDUELLE -- */
.testimonial-card {
    background: var(--white);                        /* Fond blanc pur */
    padding: 2rem;                                   /* Espace confortable */
    border-radius: 8px;                              /* Coins arrondis */
    box-shadow: var(--shadow-subtle);                /* Ombre légère */
    border-left: 5px solid var(--accent);            /* Ligne d'accentuation à gauche */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
}

.testimonial-card:hover {
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
    border-left-width: 8px;
}

/* -- TEXTE DE LA CITATION -- */
.quote-text {
    font-style: italic;              /* Italique pour distinction citation */
    color: var(--text-dark);         /* Couleur principale du texte */
    margin-bottom: 1rem;             /* Espace avant l'auteur */
}

/* -- GUILDEMETS (MISE EN VALEUR DES GUILLEMETS) -- */
.quote-text i {
    color: var(--primary);           /* Couleur verte pour les guillemets */
    font-size: 1.2rem;               /* Légèrement agrandis */
    margin-right: 5px;               /* Petit espace avant le texte */
}

/* -- AUTEUR DU TÉMOIGNAGE -- */
.quote-author {
    font-weight: 700;                /* En gras pour mise en valeur */
    color: var(--primary-dark);      /* Vert foncé pour distinction */
    text-align: right;               /* Aligné à droite (convention) */
    display: block;                  /* Sur sa propre ligne */
}


/* ====================================================================
    SECTION 14 : RESPONSIVE SUPPLÉMENTAIRE
    ====================================================================
    Adaptations spécifiques pour les nouvelles sections sur mobile
   ==================================================================== */


@media (max-width: 768px) {

    /* -- ADAPTATION DE LA GRILLE AT SUR MOBILE -- */
    .grid-2-col-reverse { 
        grid-template-columns: 1fr;   /* Passage à 1 colonne */
        gap: 2rem;                    /* Espacement réduit */
    }
    
    /* -- INVERSION DE L'ORDRE DES ÉLÉMENTS -- */
    /* Priorité au texte explicatif, visuel en second */
    .grid-2-col-reverse > :nth-child(1) { 
        order: 2;  /* Le visuel passe en 2e position */
    }
    .grid-2-col-reverse > :nth-child(2) { 
        order: 1;  /* Le texte passe en 1ère position */
    }
    
    /* -- RÉDUCTION DU CONTENEUR VISUEL AT -- */
    .at-visual-container {
        padding: 1rem;  /* Moins d'espace sur petit écran */
    }
    
    /* -- TÉMOIGNAGES EN COLONNE UNIQUE -- */
    .testimonials-grid {
        grid-template-columns: 1fr;   /* 1 carte par ligne */
        gap: 1.5rem;                  /* Espacement réduit */
    }
    
    /* -- RÉDUCTION DE LA TAILLE DES CITATIONS -- */
    .quote-section blockquote {
        font-size: 1.5rem;  /* Plus petit sur mobile */
    }
}