/* Polices de base */
        html {
            scroll-behavior: smooth;
        }
body {
    font-family: 'Open Sans', sans-serif;
    color: #333; /* Couleur de texte par défaut */
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
}

/* Couleurs principales du PAT */
.bg-pat-green-principal { background-color: #4CAF50; }
.text-pat-green-principal { color: #4CAF50; }
.border-pat-green-principal { border-color: #4CAF50; }
.hover\:bg-pat-green-dark:hover { background-color: #388E3C; }
.hover\:text-pat-green-dark:hover { color: #388E3C; }
.text-pat-green-darker { color: #2c522d; } /* Pour les titres des cartes d'action sur index.html */

/* Header Sticky (commun à toutes les pages thématiques) */
.sticky-header {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: #fff; /* Assurer un fond pour le header sticky */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Ombre standard pour le header */
}

.carte-interactive {
    /* Styles de base pour la mise en page et l'apparence */
    background-color: white;
    display: flex;
    align-items: center;
    gap: 1rem; /* Corresponds à gap-4 de Tailwind */
    
    /* Styles de base pour l'esthétique */
    padding: 1.5rem; /* Corresponds à p-6 */
    border-radius: 0.5rem; /* Corresponds à rounded-lg */
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* Corresponds à shadow-md */
    
    /* La transition pour l'animation */
    transition: all 300ms ease-in-out;
}

.carte-interactive:hover {
    /* L'ombre s'agrandit au survol */
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); /* Corresponds à shadow-xl */
    /* La carte se soulève légèrement */
    transform: translateY(-0.25rem); /* Corresponds à -translate-y-1 */
}

/* Cible l'image à l'intérieur de la carte */
.carte-interactive-image {
    /* Empêche l'image de rétrécir */
    flex-shrink: 0;
    /* Assure que l'image est contenue sans être déformée */
    object-fit: contain;
    
    /* La transition pour l'effet de zoom */
    transition: transform 300ms ease-in-out;
}

/* Applique le zoom sur l'image quand la carte est survolée */
.carte-interactive:hover .carte-interactive-image {
    transform: scale(1.1); /* Corresponds à group-hover:scale-110 */
}