/* Correction : couleur du texte des blocs d'introduction sur fond clair */
.intro-content, .securite-content h2, .securite-content p, .legal-content h2, .legal-content p {
    color: var(--color-dark) !important;
}
/* Spécifique : image géologie entièrement visible dans le cadre de la vision-section */
.vision-section .vision-image img[src*="geologie"] {
    object-fit: contain;
    background: #fff;
    /* même taille que les autres images pour l'harmonie */
    width: 100%;
    max-width: 600px;
    height: 600px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: var(--border-radius);
}
/* ==========================================================================
   1. Base & Typographie
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=Lato:wght@300;400&display=swap');

:root {
    --font-serif: 'Cormorant Garamond', serif;
    --font-sans: 'Lato', sans-serif;
    --color-primary: #8B7355;
    --color-dark: #222222;
    --color-light: #fdfdfd;
    --color-gray: #f7f7f7;
    --border-radius: 8px;
    --spacing-s: 12px; --spacing-m: 24px; --spacing-l: 48px; --spacing-xl: 96px; --spacing-xxl: 150px;
    --transition-fast: 0.2s ease;
    --transition-slow: 0.5s ease;
}
html { 
    scroll-behavior: smooth; 
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: var(--color-light);
}
body {
    font-family: var(--font-sans);
    margin: 0;
    padding-top: 150px;
    padding-bottom: 0;
    background-color: var(--color-light);
    color: var(--color-dark);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    overflow-x: hidden;
}
img {
    max-width: 100%;
    height: auto;
}
h1,h2,h3,h4,h5,h6 { font-family: var(--font-serif); font-weight: 600; line-height: 1.2; margin-top: 0; }
h1 { font-size: 3.5rem; } h2 { font-size: 2.8rem; } h3 { font-size: 2.2rem; } h4 { font-size: 1.8rem; } h5 { font-size: 1.4rem; } h6 { font-size: 1.2rem; }
p { font-size: 1.1rem; }
a { color: var(--color-primary); text-decoration: none; }

/* ==========================================================================
   2. Header & Navigation (Desktop & Mobile)
   ========================================================================== */
.main-header {
    position: fixed; /* Fixed at the top */
    width: 100%; /* Full width */
    top: 0; left: 0; /* Align to top-left corner */
    background-color: rgba(255, 255, 255, 0.95); /* Semi-transparent white background */
    backdrop-filter: blur(8px); /* Blur effect for content behind header */
    box-shadow: 0 2px 10px rgba(0,0,0,0.08); /* Subtle shadow below the header */
    z-index: 1000; /* Ensure header is above other content */
    display: grid; 
    grid-template-columns: minmax(300px, auto) 1fr minmax(250px, auto); /* Colonnes avec tailles minimales */
    align-items: center; /* Vertically align grid items */
    padding: 0 4.5% 0 3%; /* Augmenté le padding pour plus d'espace */
    height: 150px; /* Augmenté de 100px à 150px */
    box-sizing: border-box; /* Inclut le padding dans la taille */
    gap: 20px; /* Espace entre les colonnes du grid */
    background-image: linear-gradient(rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.20)), url('../images/g1.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 33px; /* Augmenté l'espace entre logo et titre */
    justify-self: start; /* Pousse le logo complètement à gauche */
    white-space: nowrap; /* Empêche le passage à la ligne */
    flex-shrink: 0; /* Empêche la compression */
    max-width: 100%; /* Limite la largeur maximale */
    overflow: hidden; /* Cache le débordement */
}

.site-logo-image {
    height: 165px; /* Agrandit le logo de 110px à 165px */
    width: auto;
    object-fit: contain;
    flex-shrink: 0; /* Empêche la compression */
}

.site-logo {
    font-family: var(--font-serif); /* Apply the serif font */
    font-size: 3rem; /* Agrandi de 2.4rem à 3rem */
    text-decoration: none; /* Remove underline */
    color: var(--color-dark); /* Dark color for the logo */
    font-weight: 700;
    white-space: nowrap; /* Empêche le passage à la ligne du titre */
    flex-shrink: 1; /* Permet une légère réduction si nécessaire */
    min-width: 0; /* Permet la compression du texte */
    overflow: hidden; /* Cache le débordement */
    text-overflow: ellipsis; /* Ajoute ... si le texte est trop long */
}
.header-actions { 
    justify-self: end; 
}
nav { 
    justify-self: center; 
}

/* Default styles (for desktop) */
nav, .header-actions { display: flex; }
.menu-toggle { display: none; }

/* Amélioration de la lisibilité avec le fond SVG */
.main-header .site-logo,
.main-header .main-navigation .nav-list .nav-item a,
.main-header .main-navigation .nav-list .dropdown .dropdown-trigger {
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

.main-header .header-actions a {
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
}

/* Styles de base pour la navigation */
.main-navigation .nav-list {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-l);
    margin: 0;
    padding: 0;
    list-style: none;
    align-items: center;
}

.main-navigation .nav-list li {
    display: flex;
    align-items: center;
    position: relative;
}

.main-navigation .nav-list .nav-item a,
.main-navigation .nav-list .dropdown .dropdown-trigger {
    font-family: var(--font-sans);
    font-size: 1.1rem; /* Augmenté pour une meilleure lisibilité */
    color: var(--color-dark);
    text-decoration: none;
    padding: 15px 0;
    transition: color 0.3s ease;
    cursor: pointer;
    display: block;
}

.main-navigation .nav-list .nav-item a:hover,
.main-navigation .nav-list .dropdown:hover .dropdown-trigger {
    color: var(--color-primary);
}

/* Règles générales pour les dropdowns - CSS + JavaScript */
.nav-list .dropdown {
    position: relative;
}

.nav-list .dropdown .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: url('/assets/images/g1.svg') no-repeat center center;
    background-size: cover;
    background-color: white;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    list-style: none;
    padding: 12px 0;
    margin: 0;
    margin-top: 8px; /* Réduit de 5px à 8px */
    min-width: 390px;
    border-radius: var(--border-radius);
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.2s ease;
    visibility: hidden;
}

/* Zone invisible pour éviter la fermeture lors du passage */
.nav-list .dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 10px; /* Zone de transition invisible */
    background: transparent;
    z-index: 999;
}

/* Règle CSS hover pour assurer le fonctionnement de base */
.nav-list .dropdown:hover .dropdown-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Quand le menu est affiché par JavaScript */
.nav-list .dropdown .dropdown-menu[style*="display: block"] {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
}

.nav-list .dropdown .dropdown-menu li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-list .dropdown .dropdown-menu a {
    display: block;
    padding: 18px 30px;
    white-space: nowrap;
    transition: background-color 0.3s ease;
    color: var(--color-dark);
    text-decoration: none;
}

.nav-list .dropdown .dropdown-menu a:hover {
    background-color: var(--color-gray);
    color: var(--color-primary);
}

/* Styling for dropdown triggers */
.main-navigation .nav-list .dropdown .dropdown-trigger {
    cursor: pointer;
    position: relative;
}

.main-navigation .nav-list .dropdown .dropdown-trigger::after {
    content: ' ▾';
    font-size: 0.8em;
    margin-left: 5px;
}

/* Styles fixes pour desktop */
.menu-toggle { display: none; } /* Masquer le bouton menu mobile sur desktop */

/* Force la navigation et les actions à être visibles sur desktop */
nav, .header-actions { display: flex; }

/* Force horizontal layout sur desktop */
.main-navigation .nav-list {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-l);
    margin: 0;
    padding: 0;
    list-style: none;
    align-items: center;
}

.main-navigation .nav-list li {
    display: flex;
    align-items: center;
    position: relative;
}

.main-navigation .nav-list .nav-item a,
.main-navigation .nav-list .dropdown .dropdown-trigger {
    font-family: var(--font-sans);
    color: var(--color-dark);
    text-decoration: none;
    padding: 15px 0;
    transition: color 0.3s ease;
    cursor: pointer;
    display: block;
}

.main-navigation .nav-list .nav-item a:hover,
.main-navigation .nav-list .dropdown:hover .dropdown-trigger {
    color: var(--color-primary);
}

.dropdown { 
    position: relative;
}
.dropdown > span { 
    cursor: pointer;
    display: block;
    padding: 15px 0;
}
.dropdown > span::after { 
    content: ' ▾'; 
    font-size: 0.8em; 
    margin-left: 5px;
}
.dropdown-menu {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    list-style: none;
    padding: 12px 0;
    margin: 0;
    margin-top: 23px;
    min-width: 390px;
    border-radius: var(--border-radius);
    z-index: 1000;
}
.dropdown-menu li {
    list-style: none;
    margin: 0;
    padding: 0;
}
.dropdown-menu a {
    display: block;
    padding: 12px 20px;
    white-space: nowrap;
    transition: background-color 0.3s ease;
    color: var(--color-dark);
    text-decoration: none;
}
.dropdown-menu a:hover { 
    background-color: var(--color-gray); 
    color: var(--color-primary);
}

/* Styles Desktop */
@media (min-width: 1024px) {
    .menu-toggle { display: none !important; }
    nav, .header-actions { display: flex !important; }
}

/* Ajustements pour desktop de petite taille */
@media (min-width: 1024px) and (max-width: 1300px) {
    .main-header {
        padding: 0 2% 0 1.5%; /* Réduit le padding pour gagner de l'espace */
    }
    
    .site-logo {
        font-size: 2.8rem; /* Agrandi de 2.5rem à 2.8rem */
        white-space: nowrap; /* Force le titre sur une seule ligne */
    }
    
    .logo-container {
        gap: 25px; /* Réduit l'espace entre logo et titre */
        white-space: nowrap; /* Empêche le passage à la ligne */
        flex-shrink: 0; /* Empêche la compression */
    }
    
    .site-logo-image {
        height: 150px; /* Réduit légèrement la taille du logo */
        flex-shrink: 0; /* Empêche la compression du logo */
    }
    
    .main-navigation .nav-list {
        gap: var(--spacing-m); /* Réduit l'espace entre les éléments de navigation */
    }
    
    .main-navigation .nav-list .nav-item a,
    .main-navigation .nav-list .dropdown .dropdown-trigger {
        font-size: 0.95rem; /* Légèrement plus petit */
        padding: 12px 8px; /* Réduit le padding horizontal */
        white-space: nowrap; /* Force sur une ligne */
    }
    
    .header-actions .cta-button {
        font-size: 0.9rem; /* Réduit la taille des boutons */
        padding: 12px 16px; /* Ajuste le padding */
        white-space: nowrap; /* Force sur une ligne */
    }
}

@media (min-width: 1024px) and (max-width: 1150px) {
    .site-logo {
        font-size: 2.6rem; /* Agrandi de 2.2rem à 2.6rem */
    }
    
    .logo-container {
        gap: 20px; /* Réduit encore l'espace */
    }
    
    .site-logo-image {
        height: 140px; /* Logo plus petit */
    }
    
    .main-navigation .nav-list {
        gap: var(--spacing-s); /* Espace minimal entre nav items */
    }
    
    .main-navigation .nav-list .nav-item a,
    .main-navigation .nav-list .dropdown .dropdown-trigger {
        font-size: 0.9rem;
        padding: 10px 6px;
    }
    
    .header-actions .cta-button {
        font-size: 0.85rem;
        padding: 10px 14px;
    }
}

/* Styles Mobile */
@media (max-width: 1023px) {
    nav { display: none; }
    .header-actions { display: none; }
    .menu-toggle { display: block !important; background: none; border: none; cursor: pointer; justify-self: end; }
    
    .main-header {
        grid-template-columns: auto 1fr auto; /* Logo, espace, menu toggle */
    }
    
    /* Reset desktop navigation styles for mobile */
    nav.active .nav-list {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        margin: 0;
        padding: 0;
        list-style: none;
        width: 100%;
    }
    
    nav.active {
        display: flex; /* Use flexbox when active */
        position: fixed; /* Fixed position for the mobile menu */
        top: 150px; left: 0; /* Position below the header */
        width: 100%; height: calc(100vh - 150px); /* Full height minus header height */
        background: white; /* White background */
        flex-direction: column; /* Stack items vertically */
        align-items: stretch; /* Stretch items to full width */
        justify-content: flex-start; /* Align items to top */
        overflow-y: auto; /* Allow scrolling if menu is too long */
        padding: var(--spacing-l) 0; /* Add padding at top and bottom */
        z-index: 999;
    }
    
    nav.active > ul {
        display: flex !important; /* Force flex display */
        flex-direction: column !important; /* Stack list items vertically */
        text-align: left; /* Left align text for better mobile UX */
        gap: 0; /* Remove gap, use padding instead */
        list-style: none; 
        padding: 0; 
        margin: 0; /* Remove default list styles */
        width: 100%; /* Full width */
    }
    
    /* Style for main navigation items */
    nav.active .nav-list > li {
        display: block !important; /* Force block display */
        width: 100%;
        border-bottom: 1px solid #f0f0f0; /* Add subtle separator */
        position: relative;
    }
    
    nav.active .nav-list > li:last-child {
        border-bottom: none; /* Remove border from last item */
    }
    
    /* Force all navigation links and spans to display as block */
    nav.active .nav-list a, 
    nav.active .nav-list span,
    nav.active .nav-list .nav-item a,
    nav.active .nav-list .dropdown-trigger {
        font-size: 1.95rem !important; /* Slightly smaller but still readable */
        text-decoration: none; /* Remove underline */
        color: var(--color-dark); /* Dark text color */
        padding: var(--spacing-l) var(--spacing-l) !important; /* More generous padding */
        display: block !important; /* Full width clickable area */
        width: 100%;
        transition: background-color 0.3s ease;
        box-sizing: border-box;
        white-space: normal; /* Allow text wrapping on mobile */
    }
    
    /* Hover effects for mobile menu items */
    nav.active .nav-list > li > a:hover,
    nav.active .nav-list > li > span:hover,
    nav.active .nav-list > li > .dropdown-trigger:hover {
        background-color: var(--color-gray) !important;
        color: var(--color-primary) !important;
    }

    /* Mobile Dropdown Styles (initially hidden) */
    nav.active .dropdown-menu {
        display: none; /* Hidden by default */
        position: static; /* Remove absolute positioning */
        background: var(--color-gray); /* Light background for sub-items */
        box-shadow: none; /* No shadow */
        padding: 0; /* Remove padding */
        margin: 0; /* Remove margin */
        list-style: none; /* Remove list bullets */
        width: 100%;
    }
    
    /* Style for dropdown menu items */
    nav.active .dropdown-menu li {
        display: block !important; /* Force block display */
        width: 100%;
        border-bottom: 1px solid #e0e0e0;
    }
    
    nav.active .dropdown-menu li:last-child {
        border-bottom: none;
    }
    
    nav.active .dropdown-menu a {
        font-size: 1.65rem !important; /* Slightly smaller for sub-items */
        padding: var(--spacing-m) var(--spacing-xl) !important; /* Indent sub-items */
        color: var(--color-dark) !important;
        background-color: transparent;
        display: block !important;
        width: 100%;
        box-sizing: border-box;
    }
    
    nav.active .dropdown-menu a:hover {
        background-color: #e8e8e8 !important;
        color: var(--color-primary) !important;
    }
    
    /* Show mobile dropdown when the parent dropdown has the 'open' class (requires JS) */
    nav.active .dropdown.open .dropdown-menu { 
        display: block; 
        animation: slideDown 0.3s ease-out;
    }
    
    /* Add animation for dropdown opening */
    @keyframes slideDown {
        from {
            opacity: 0;
            max-height: 0;
        }
        to {
            opacity: 1;
            max-height: 450px;
        }
    }
    
    /* Style for dropdown triggers with arrow */
    nav.active .dropdown > .dropdown-trigger {
        position: relative;
    }
    
    nav.active .dropdown > .dropdown-trigger::after {
        content: '▸'; /* Right arrow by default */
        position: absolute;
        right: var(--spacing-l);
        transition: transform 0.3s ease;
    }
    
    nav.active .dropdown.open > .dropdown-trigger::after {
        content: '▾'; /* Down arrow when open */
    }
}

/* ==========================================================================
/* ==========================================================================
   3. Footer
   ========================================================================== */

footer {
    background-color: var(--color-dark);
    color: var(--color-light);
    position: relative;
    z-index: 1;
}

/* Reset any potential margin/padding issues */
* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

/* Ensure no space after footer */
footer:after {
    content: '';
    display: block;
    height: 0;
    clear: both;
}

/* Force no margin or padding after footer */
footer,
footer *,
footer .footer-content,
footer .footer-bottom {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Ensure body ends with footer */
body > *:last-child {
    margin-bottom: 0 !important;
}

/* Remove any default spacing from footer container */
.footer-content:last-child,
.footer-bottom:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Ensure footer placeholder has no margins */
#footer-placeholder {
    margin: 0 !important;
    padding: 0 !important;
}

/* Force footer to be at the very bottom */
#footer-placeholder footer {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.footer-content {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: var(--spacing-l) var(--spacing-m); /* Augmenté le padding pour plus d'espace */
    display: grid;
    grid-template-columns: 2.5fr 1.2fr 1.2fr 1.8fr 1.3fr 2fr; /* Réajusté les proportions pour un meilleur équilibre */
    gap: var(--spacing-l); /* Augmenté l'espacement entre sections */
    margin-bottom: 0;
    align-items: start; /* Alignement en haut pour une meilleure disposition */
}

.footer-section h3 {
    font-family: var(--font-serif);
    font-size: 1.4rem; /* Réduit de 2.4rem à 1.4rem */
    color: var(--color-primary);
    margin-bottom: var(--spacing-m); /* Augmenté pour plus d'espace sous les titres */
    font-weight: 600;
}

.footer-section p {
    font-size: 1rem; /* Réduit de 1.65rem à 1rem */
    line-height: 1.7;
    margin-bottom: var(--spacing-m); /* Augmenté pour plus d'espacement */
    opacity: 0.9;
}

.footer-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-section ul li {
    margin-bottom: 16px; /* Augmenté de 12px à 16px pour encore plus d'espacement vertical */
}

.footer-section ul li a {
    color: var(--color-light);
    text-decoration: none;
    font-size: 1rem; /* Réduit de 1.58rem à 1rem */
    line-height: 1.6; /* Maintien du line-height pour l'espacement */
    opacity: 0.8;
    transition: opacity 0.3s ease;
    display: block; /* Maintien du block pour un meilleur espacement */
    padding: 6px 0; /* Augmenté de 4px à 6px pour plus d'espace cliquable */
}

.footer-section ul li a:hover {
    opacity: 1;
    color: var(--color-primary);
}

.social-links {
    display: flex;
    gap: var(--spacing-s);
    margin-top: var(--spacing-s);
}

.social-links a {
    color: var(--color-light);
    text-decoration: none;
    font-size: 1.3rem; /* Réduit de 2.25rem à 1.3rem */
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.social-links a:hover {
    opacity: 1;
    color: var(--color-primary);
}

.contact-info {
    margin-bottom: calc(var(--spacing-s) / 2); /* Réduit encore la marge */
}

.contact-info p {
    margin-bottom: 12px; /* Augmenté de 8px à 12px pour plus d'espacement vertical */
    font-size: 1rem; /* Réduit de 1.5rem à 1rem */
    line-height: 1.6; /* Maintien du line-height */
}

.business-hours {
    margin-top: calc(var(--spacing-s) / 2); /* Maintien de la marge supérieure */
}

.business-hours p {
    margin-bottom: 12px; /* Augmenté de 8px à 12px pour plus d'espacement vertical */
    font-size: 1rem; /* Réduit de 1.5rem à 1rem */
    line-height: 1.6; /* Maintien du line-height */
}

.footer-bottom {
    background-color: rgba(0, 0, 0, 0.3);
    border-top: 1px solid #333;
    padding: calc(var(--spacing-s) / 3) 0; /* Réduit encore plus le padding */
}

.footer-bottom-content {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 var(--spacing-s); /* Maintien du padding réduit */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-legal ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: var(--spacing-m);
}

.footer-legal ul li a {
    color: var(--color-light);
    text-decoration: none;
    font-size: 1.5rem; /* Agrandi de 1rem à 1.5rem */
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.footer-legal ul li a:hover {
    opacity: 1;
    color: var(--color-primary);
}

.copyright p {
    margin: 0;
    font-size: 1rem; /* Agrandi de 0.85rem à 1rem */
    opacity: 0.8;
}

/* Footer logo styles */
.footer-logo {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: calc(var(--spacing-s) / 3); /* Réduit encore plus le padding */
    padding-right: 0;
    margin-left: auto; /* Force le logo complètement à droite */
}

.footer-logo-image {
    max-width: 240px; /* Réduit encore de 280px à 240px */
    height: auto;
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.footer-logo-image:hover {
    opacity: 1;
}

/* Responsive Design */
@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr;
        gap: calc(var(--spacing-s) / 2); /* Réduit encore l'espacement mobile */
        padding: 0 calc(var(--spacing-s) / 2); /* Réduit encore le padding mobile */
    }
    
    .footer-logo {
        order: -1; /* Place logo at the top on mobile */
        margin-bottom: calc(var(--spacing-s) / 2); /* Réduit la marge inférieure */
        justify-content: center;
        padding: calc(var(--spacing-s) / 3); /* Maintien du padding réduit */
    }
    
    .footer-logo-image {
        max-width: 150px; /* Réduit encore de 120px à 150px sur mobile */
    }
    
    .footer-bottom-content {
        flex-direction: column;
        gap: calc(var(--spacing-s) / 2); /* Réduit l'espacement */
        text-align: center;
        padding: 0 calc(var(--spacing-s) / 2); /* Réduit le padding mobile */
    }
    
    .footer-legal ul {
        flex-direction: column;
        gap: calc(var(--spacing-s) / 2); /* Réduit l'espacement */
    }
}

.footer-links a {
    color: var(--color-light);
    text-decoration: none;
    font-size: 1.35rem;
    transition: color 0.3s ease;
    opacity: 0.9;
}

.footer-links a:hover {
    color: var(--color-primary);
    opacity: 1;
}

.footer-contact .contact-item {
    margin-bottom: var(--spacing-s);
}

.footer-contact .contact-item strong {
    display: block;
    color: var(--color-primary);
    font-family: var(--font-serif);
    font-size: 1.43rem;
    margin-bottom: 6px;
}

.footer-contact .contact-item p {
    margin: 0;
    font-size: 1.35rem;
    opacity: 0.9;
    line-height: 1.4;
}

.footer-contact .contact-item a {
    color: var(--color-light);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-contact .contact-item a:hover {
    color: var(--color-primary);
}

.footer-cta {
    margin-top: var(--spacing-s);
}

.footer-cta-button {
    display: inline-block;
    background-color: var(--color-primary);
    color: var(--color-light);
    padding: 10px 20px;
    border: 1px solid var(--color-primary);
    text-decoration: none;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    border-radius: var(--border-radius);
}

.footer-cta-button:hover {
    background-color: transparent;
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.footer-bottom {
    border-top: 1px solid #333;
    padding-top: var(--spacing-s);
    padding-bottom: 0;
    margin-top: var(--spacing-l);
    margin-bottom: 0;
}

.footer-bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-s);
}

.footer-legal p {
    margin: 0;
    font-size: 0.85rem;
    opacity: 0.7;
}

.footer-legal-links {
    display: flex;
    gap: var(--spacing-s);
    margin-top: 4px;
}

.footer-legal-links a {
    color: var(--color-light);
    text-decoration: none;
    font-size: 0.85rem;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.footer-legal-links a:hover {
    opacity: 1;
    color: var(--color-primary);
}

.footer-legal-links a:not(:last-child)::after {
    content: '|';
    margin-left: var(--spacing-s);
    opacity: 0.5;
}

.footer-external-links {
    display: flex;
    gap: var(--spacing-s);
    align-items: center;
}

.external-link {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--color-light);
    text-decoration: none;
    font-size: 0.85rem;
    opacity: 0.8;
    transition: all 0.3s ease;
}

.external-link:hover {
    opacity: 1;
    color: var(--color-primary);
}

.external-link svg {
    transition: transform 0.3s ease;
}

.external-link:hover svg {
    transform: translate(1px, -1px);
}

/* Responsive Footer */
@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-m);
    }
    
    .footer-bottom-content {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-m);
        text-align: center;
        padding: 0 calc(var(--spacing-s) / 2); /* Réduit le padding mobile */
    }
    
    .footer-legal-links {
        flex-direction: column;
        gap: var(--spacing-s);
    }
    
    .footer-legal-links a:not(:last-child)::after {
        display: none;
    }
    
    .footer-external-links {
        align-self: stretch;
        justify-content: flex-start;
    }
}

@media (max-width: 480px) {
    .main-footer {
        padding: var(--spacing-l) 0 var(--spacing-s) 0;
    }
    
    .footer-certifications {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .certification-badge {
        align-self: flex-start;
    }
    
    .footer-external-links {
        flex-direction: column;
        gap: var(--spacing-s);
        align-items: flex-start;
    }
}

/* ==========================================================================
   4. Structure, Animations & Composants
   ========================================================================== */
.container { width: 90%; max-width: 1800px; margin: 0 auto; }
.section-wrapper { padding: var(--spacing-l) 0; }
@media (min-width: 769px) { .section-wrapper { padding: var(--spacing-xl) 0; } }
.section-wrapper.bg-gray { background-color: var(--color-gray); }
.section-title { text-align: center; margin-bottom: var(--spacing-l); }

.fade-in-up { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; }
.fade-in-up.visible { opacity: 1; transform: translateY(0); }

.cta-button { display: inline-block; padding: 18px 36px; border: 1px solid var(--color-primary); color: var(--color-primary); text-transform: uppercase; letter-spacing: 1.5px; transition: all 0.4s ease; }
.cta-button:hover { background-color: var(--color-primary); color: var(--color-light); }
.main-cta-button { background-color: var(--color-primary); color: var(--color-light); }
.main-cta-button:hover { background-color: var(--color-dark); border-color: var(--color-dark); color: var(--color-light); }

/* Style for header action links */
.header-actions a {
    font-family: var(--font-sans); /* Apply sans-serif font */
    font-size: 0.9rem; /* Slightly smaller font */
    margin-left: var(--spacing-m); /* Space between action links */
    /* Inherits styles from .cta-button if applicable, or define specific styles here */
}
/* ==========================================================================
   3. Mise en page moderne et responsive
   ========================================================================== */

/* Conteneur principal */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-m);
}

/* Section wrapper pour espacement cohérent */
.section-wrapper {
    padding: var(--spacing-l) 0;
    min-height: 120px;
}

.section-wrapper.bg-gray {
    background-color: var(--color-gray);
}

/* Sections avant "Donnez vie à votre projet" - espacement réduit */
.section-wrapper.intro-section {
    padding-top: var(--spacing-m);
    padding-bottom: var(--spacing-m);
    position: relative;
    z-index: 10;
}

.section-wrapper.services-section {
    padding-top: var(--spacing-l);
    padding-bottom: var(--spacing-l);
    position: relative;
    z-index: 10;
}

/* Section "Donnez vie à votre projet" avec image de fond */
.section-wrapper.bg-project {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('../images/atelier_création.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: var(--spacing-l);
}

.section-wrapper.bg-project .container {
    position: relative;
    z-index: 2;
}

.section-wrapper.bg-project .section-title,
.section-wrapper.bg-project p {
    color: var(--color-light);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Grid pour services (page d'accueil) */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--spacing-xl);
    margin-top: var(--spacing-l);
}

.service-block {
    position: relative;
    padding: var(--spacing-xl);
    background: var(--color-light);
    border-radius: var(--border-radius);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-block:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

.service-content h2 {
    color: var(--color-primary);
    margin-bottom: var(--spacing-m);
    font-size: 2.4rem;
}

.service-content p {
    margin-bottom: var(--spacing-l);
    line-height: 1.6;
    font-size: 1.2rem;
}

/* Grille pour le savoir-faire */
.savoir-faire-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-l);
    margin-top: var(--spacing-l);
}

.savoir-faire-item {
    text-align: center;
    padding: var(--spacing-l);
}

.savoir-faire-item img {
    width: 100%;
    height: 320px;
    max-width: 450px;
    object-fit: cover;
    margin-bottom: var(--spacing-l);
    border-radius: var(--border-radius);
}

.savoir-faire-item h3 {
    color: var(--color-primary);
    margin-bottom: var(--spacing-s);
}

/* Centrage des CTA */
.cta-center {
    text-align: center;
    margin-top: var(--spacing-xl);
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .savoir-faire-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-m);
    }
}

@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-l);
    }
    
    .savoir-faire-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-m);
    }
    
    .savoir-faire-item img {
        width: 100%;
        height: 280px;
        max-width: 400px;
    }
    
    .team-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-l);
    }
    
    .section-wrapper {
        padding: var(--spacing-l) 0;
    }
}

/* ==========================================================================
   4. Hero Section et styles spécifiques
   ========================================================================== */
/* Hero Section */
 .hero {
 height: 60vh; /* Doubled from 30vh to 60vh */
 position: relative;
 display: flex;
 align-items: center;
 justify-content: center;
 text-align: center;
 color: white;
 overflow: hidden;
 padding-top: 80px; /* Account for fixed header */
 background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('/assets/images/accueil_hero.png') center center/cover no-repeat;
}

.hero h1, .hero p {
 opacity: 0;
 transform: translateY(20px);
 animation: fadeInUp 1s ease forwards;
 text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
 z-index: 2;
}

.hero h1 {
 font-size: 3.5rem;
 font-weight: 700;
 margin-bottom: 1rem;
}

.hero p {
 animation-delay: 0.5s;
 font-size: 1.3rem;
 font-weight: 300;
 max-width: 600px;
 margin: 0 auto;
 line-height: 1.6;
}

.hero-content {
 z-index: 2;
 position: relative;
 padding: 0 2rem;
}

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

/* Style for the product hero banner */
.product-hero-banner {
    height: 60vh;
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), 
                url('../images/montre_hero.png') center center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    position: relative;
}

.product-hero-banner.pendentif {
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
                url('../images/pendentif_hero.png') center center/cover no-repeat;
}

.product-hero-banner h1 {
    font-size: 3rem;
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

/* Customization sections */
.customization-category {
    margin-bottom: var(--spacing-xl);
}

.customization-category h2 {
    text-align: center;
    margin-bottom: var(--spacing-l);
    color: var(--color-primary);
}

.customization-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-l);
    margin-top: var(--spacing-l);
}

.custom-card {
    background: var(--color-gray);
    padding: var(--spacing-l);
    text-align: center;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.custom-card:hover {
    transform: translateY(-5px);
}

.custom-card h3 {
    color: var(--color-primary);
    margin-bottom: var(--spacing-m);
}

.custom-card p {
    line-height: 1.6;
    margin: 0;
}

/* Gallery grid */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-m);
    margin-top: var(--spacing-l);
}

.gallery-grid img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: var(--border-radius);
    transition: transform 0.3s ease;
    height: 320px;
    max-height: 340px;
}

.gallery-grid img:hover {
    transform: scale(1.05);
}

/* Responsive adjustments for product pages */
@media (max-width: 768px) {
    .product-hero-banner {
        height: 50vh;
    }
    
    .product-hero-banner h1 {
        font-size: 2rem;
    }
    
    .customization-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-m);
    }
    
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .gallery-grid {
        grid-template-columns: 1fr;
    }
}

.hero-content {
    z-index: 1; /* Ensure content is above the background */
}

/* Hero Background with Parallax (existing) - Now applied directly to .hero */
/* .hero-background { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url('../images/montre_hero.png') center center/cover no-repeat; 
    z-index: -1; 
    will-change: transform; 
} */
.intro-content { max-width: 800px; margin: 0 auto; text-align: center; }

/* Style for the introductory text paragraph */
.intro-content {
    font-size: 1.2rem; /* Set the font size */
 margin: var(--spacing-l) auto; /* Add appropriate vertical margins and center horizontally */
}

/* Style for the customization category container */
.customization-category {
    margin-bottom: var(--spacing-xxl); /* Add space between customization categories */
}

/* Style for the heading within the customization category */
.customization-category h2 {
 text-align: center; /* Center align the heading */
    margin-bottom: var(--spacing-l); /* Space below the heading */
}

/* Style for the gallery grid container */
.gallery-grid {
 display: grid; /* Use grid for the layout */
 grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Responsive columns */
 gap: var(--spacing-m); /* Gap between grid items */
}
.gallery-grid img,
.customization-grid {
    display: grid; /* Use grid for the layout */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive columns: minimum 280px, up to 1fr */
    gap: var(--spacing-l); /* Gap between grid items */
    margin-top: var(--spacing-l); /* Add space above the grid */
}

/* Style for individual custom cards */
.custom-card {
 background: var(--color-gray); /* Background color */
 padding: var(--spacing-l); /* Padding inside the card */
 text-align: center; /* Center align text */
}

/* Style for the heading (h3) within the custom card */
.custom-card h3 { color: var(--color-primary); }

/* Style for the paragraph (p) within the custom card */
.custom-card p {
 font-family: var(--font-sans); /* Apply the sans-serif font */
 font-size: 1rem; /* Set the font size */
 margin-bottom: 0; /* Remove bottom margin if needed */
}

/* Style for the inspiration gallery container */
.inspiration-gallery {
    margin-bottom: var(--spacing-xxl); /* Add space below the gallery section */
}

/* Style for the heading within the inspiration gallery section */
.inspiration-gallery h2 {
    text-align: center; /* Center align the heading */
    margin-bottom: var(--spacing-l); /* Space below the heading */
}

/* Style for individual gallery items */
.gallery-item {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1/1; /* Set aspect ratio for consistent sizing */
}

/* Style for the image within the gallery item */
.gallery-item img {
 width: 100%; /* Image fills the container width */
    height: 100%; /* Image fills the container height */
 object-fit: cover; /* Image covers the area without distortion */
    transition: transform 0.5s ease; /* Smooth transition for scale effect */
}

.comparison-item img, 
.partner-card img,
.article-banner {
    object-fit: cover;
}


.contact-map img,
.logos-container img,
.app-intro img,
.partner-intro img,
.featured-article img,
.vision-section img,
.team-member-card img,
.step-item img {
    object-fit: cover;
}

/* Style for the gallery filters container */
.gallery-filters {
 text-align: center; /* Center align filter buttons */
 margin-bottom: var(--spacing-l); /* Space below the filter buttons */
}

/* Style for the filter buttons */
.filter-btn {
 background: none; /* No background by default */
 border: 1px solid #ccc; /* Subtle border */
 padding: 10px 20px; /* Padding inside buttons */
 margin: 0 5px; /* Horizontal margin between buttons */
 cursor: pointer; /* Indicate clickable */
 transition: all 0.3s ease; /* Smooth transition for hover/active states */
}

/* Style for the active filter button */
.filter-btn.active {
 background-color: var(--color-primary); /* Primary color background */
 color: white; /* White text color */
 border-color: var(--color-primary); /* Primary color border */
}

/* Hover effect for gallery item images */
.gallery-item:hover img {
 transform: scale(1.05); /* Slightly scale up the image on hover */
}

/* Style for the overlay within the gallery items */
.gallery-item .overlay {
 position: absolute; /* Position relative to the gallery item */
 bottom: 0; /* Align to the bottom */
 left: 0; /* Align to the left */
 right: 0; /* Align to the right */
 background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); /* Gradient from dark at the bottom to transparent at the top */
 color: white; /* Text color for the overlay */
 padding: var(--spacing-l) var(--spacing-m) var(--spacing-m); /* Padding inside the overlay */
 opacity: 0; /* Initially hidden */
 transform: translateY(20px); /* Start slightly below its final position */
 transition: all 0.5s ease; /* Smooth transition for opacity and transform */
}

/* Style for the overlay on hover of the gallery item */
.gallery-item:hover .overlay {
 opacity: 1; /* Make the overlay visible on hover */
 transform: translateY(0); /* Move to its final position on hover */
}

/* Style for the heading (h3) within the overlay */
.gallery-item .overlay h3 {
    font-family: var(--font-serif); /* Apply the serif font */
    font-size: 1.4rem; /* Appropriate font size for the title */
    margin-bottom: var(--spacing-s); /* Space below the heading */
}

/* Style for the paragraph (p) within the overlay */
.gallery-item .overlay p {
    font-size: 1rem; /* Smaller font size for description */
}

/* Grilles et mises en page responsives */
/* Style for the services grid container (used on services page) */
.services-grid {
    display: grid; /* Use grid for the layout */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive columns: minimum 300px, up to 1fr */
    gap: var(--spacing-l); /* Gap between grid items */
}

/* Style for the service cards */
.service-card {
    border: 1px solid #eee; /* Subtle border */
    padding: var(--spacing-l); /* Padding inside the card */
    background-color: var(--color-light); /* White background */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); /* Subtle shadow */
    border-radius: var(--border-radius); /* Rounded corners */
}

/* Style for the heading (h3) within the service card */
.service-card h3 {
    color: var(--color-primary); /* Primary color for heading */
    margin-bottom: var(--spacing-m); /* Space below the heading */
}

/* Style for the paragraph (p) within the service card */
.service-card p {
    font-family: var(--font-sans); /* Apply the sans-serif font */
    font-size: 1.1rem; /* Consistent with body text */
    line-height: 1.6; /* Good line height for readability */
    margin-bottom: 0; /* Remove bottom margin if needed */
}

/* Style for the network section container */
.network-section {
    margin-bottom: var(--spacing-xxl); /* Add space below the section */
}

/* Style for the network content (two-column layout) */
.network-content {
    display: grid; /* Use grid for the layout */
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    gap: var(--spacing-xl); /* Larger gap between columns */
    align-items: center; /* Vertically align items */
}
/* Responsive grid layouts for various sections */
.services, /* Used on services page for individual service feature sections */
.future-pillars-grid,
.comparison-slider,
.network-content,
.contact-layout,
.app-intro, .partner-intro { display: grid; gap: var(--spacing-l); }
@media (min-width: 769px) { 
    .services { grid-template-columns: 1fr 1fr; }
    .future-pillars-grid { grid-template-columns: 1fr 1fr; }
    .comparison-slider, .network-content, .contact-layout, .app-intro { grid-template-columns: 1fr 1fr; }
    .partner-intro { grid-template-columns: 1fr 2fr; align-items: center; }
    .partner-intro.reverse { grid-template-columns: 2fr 1fr; }
    .featured-article { grid-template-columns: 1.5fr 1fr; align-items: center; }

}

/* Style for the network text container */
.network-text {
    /* No specific styling needed for the container unless adding padding/border */
}

/* Style for the heading (h2) within the network text */
.network-text .section-title { /* Targeting with section-title for consistency */
    text-align: left !important; /* Left align the heading */
    margin-bottom: var(--spacing-m); /* Space below the heading */
}

/* Style for the paragraph (p) within the network text */
.network-text p {
    font-family: var(--font-sans); /* Apply the sans-serif font */
    font-size: 1.1rem; /* Consistent with body text */
    line-height: 1.6; /* Good line height for readability */
}
/* Styles pour la grille d'équipe */
 .team-grid {
 display: grid;
    gap: var(--spacing-l);
 grid-template-columns: 1fr; /* Une colonne par défaut */
}

/* Style for the team member images */
.team-member-card img {
    width: 150px; /* Set a consistent width */
    height: 150px; /* Set a consistent height to make them circular */
    border-radius: 50%; /* Make the images circular */
    display: block; /* Make the image a block element */
    margin: 0 auto var(--spacing-m); /* Center the image and add bottom margin */
}

/* Style for the name (h3) within the team member cards */
.team-member-card h3 {
    font-size: 1.6rem; /* Consistent with H3 typography */
    margin-bottom: var(--spacing-s); /* Space below the name */
}

/* Style for the role within the team member cards */
.team-member-card .role {
    font-size: 1rem; /* Slightly smaller font size for the role */
    margin-bottom: var(--spacing-m); /* Space below the role */
    color: #555; /* Subtle color for the role */
}

/* Style for the bio within the team member cards */
.team-member-card .bio {
    font-size: 1.1rem; /* Consistent with body text */
    line-height: 1.6; /* Good line height for readability */
    margin-bottom: var(--spacing-m); /* Space below the bio */
}

/* Style for the quote within the team member cards */
.team-member-card .quote {
 font-family: var(--font-serif); /* Use the serif font for the quote */
    font-style: italic; /* Make the quote italic */
    font-size: 1.2rem; /* Slightly larger font size for the quote */
 margin-top: var(--spacing-m); /* Space above the quote */
}
/* Journal - Featured Article */
.article-header {
    text-align: center;
    margin-bottom: var(--spacing-l);
}

.article-header h1 {
    font-size: 3rem;
    margin-bottom: var(--spacing-s);
}

.article-meta {
    margin-top: var(--spacing-m);
    font-family: var(--font-sans);
    font-size: 1rem;
    color: #666;
}

.article-banner {
    width: 100%;
    height: 500px; /* Adjust height as needed */
    object-fit: cover;
    margin: var(--spacing-l) 0;
}

.article-content {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.1rem; /* Consistent with body text */
    line-height: 1.8;
}

.article-content .intro {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-style: italic;
    color: #555;
}
.articles-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 gap: var(--spacing-l);
}

.article-card {
    border: 1px solid #eee; /* Subtle border for cards */
    padding: var(--spacing-m); /* Padding inside the card */
    transition: box-shadow 0.3s ease; /* Smooth transition for hover effect */
}

.article-card img {
    width: 100%; /* Make image fill its container */
    height: auto; /* Maintain aspect ratio */
}

.article-card .card-content {
 padding: 0 var(--spacing-m) var(--spacing-m);
}


.article-card h3 {
    font-size: 1.5rem;
    margin-bottom: var(--spacing-m);
}

.article-card .read-more {
    display: inline-block;
    font-weight: bold;
    margin-bottom: var(--spacing-m);
}

.featured-article {
    background-color: var(--color-light); /* Example background */
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--spacing-xl);
    align-items: center;
}

.featured-article .article-image img {
    width: 100%;
    height: auto; /* Maintain aspect ratio */
}

.featured-article .article-category {
    font-family: var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-primary);
    font-weight: bold;
}

.article-content h2,
.featured-article h2  {
    font-size: 2.5rem; /* Slightly larger for featured */
    margin-bottom: var(--spacing-m);
 color: var(--color-dark);
}

.article-content p,
.featured-article p {
    font-size: 1.1rem; /* Consistent with body text */
    line-height: 1.6; /* Consistent with body text */
}
.featured-article .read-more.cta-button {
 margin-top: var(--spacing-m); /* Add some space above the button */
 text-decoration: none; /* Remove underline from link */
}

/* Style for each step item in the creation process */
.step-item {
 display: grid; /* Use grid for the layout of image and description */
 grid-template-columns: 1fr 1fr; /* Default layout: image on left, text on right */
 gap: var(--spacing-xl); /* Gap between grid items */
 align-items: center; /* Vertically align content */
}

/* Add space between different step items */
.step-item:not(:last-child) {
 margin-bottom: var(--spacing-xxl);
}

/* Style for even-numbered step items to reverse the order */
.step-item:nth-child(even) .step-media {
 grid-column: 2; /* Move image to the second column */
    /* Inherits styles from .cta-button */
    margin-top: var(--spacing-m); /* Add some space above the button */
    text-decoration: none; /* Remove underline from link */
}
.article-content h2 { margin-top: var(--spacing-xl); margin-bottom: var(--spacing-m); }
.article-content figure { margin: var(--spacing-l) 0; }
.article-content figcaption { text-align: center; font-size: 0.9rem; color: #666; }
.article-content blockquote {
    border-left: 3px solid var(--color-primary); padding-left: var(--spacing-l); font-style: italic; font-size: 1.4rem; margin: var(--spacing-l) 0; /* Add some space */
    text-decoration: none; /* Remove underline from link */
}

.featured-article .read-more.cta-button:hover {
    /* Inherits hover styles from .cta-button:hover */
}
/* Style for the description in even-numbered step items */
.step-item:nth-child(even) .step-description {
 grid-column: 1; /* Move description to the first column */
 grid-row: 1; /* Keep description in the first row */
 text-align: right;
}

/* Style for the step media container */
.step-media {
    /* No specific styling needed for the container unless adding padding/border around the image */
}

/* Style for the image within the step media */
.step-media img {
    width: 100%; /* Make the image fill the width of its grid area */
    height: auto; /* Maintain aspect ratio */
}

/* Style for the step description container */
.step-description {
    /* No specific styling needed for the container unless adding padding/border */
}

/* Style for the step number */
.step-number {
 font-size: 5rem; /* Large font size */
 font-weight: 700; /* Bold font weight */
 color: var(--color-primary); /* Primary color */
 opacity: 0.2; /* Subtle opacity */
 line-height: 1; /* Adjust line height */
}
/* Accordéon (FAQ) */
/* Style for the heading (h2) within the step description */
.step-description h2 {
    font-size: 2.2rem; /* Consistent with H2 typography */
    margin-bottom: var(--spacing-m); /* Space below the heading */
}

/* Style for the paragraph (p) within the step description */
.step-description p {
 font-size: 1.1rem; /* Consistent with body text */
 line-height: 1.6; /* Good line height for readability */
    margin-bottom: var(--spacing-m); /* Add space below the paragraph */
}

/* Style for the final call to action section */
.final-cta {
    text-align: center;
    padding: var(--spacing-xl) 0;
    background: none;
    max-width: 900px;
    margin: 0 auto;
}
/* Style for the heading within the final call to action */
.final-cta h2 {
    margin-bottom: var(--spacing-m); /* Space below the heading */
    font-size: 2.5rem; /* Slightly larger font for emphasis */
}

/* Style for the paragraph within the final call to action */
.final-cta p {
    margin-bottom: var(--spacing-l); /* Space below the paragraph */
    font-size: 1.2rem; /* Slightly larger font for readability */
}

/* Styling for the FAQ section container */
.faq-section {
    max-width: 900px; /* Limit width for readability */
    margin: 0 auto; /* Center the content */
    padding: var(--spacing-l) 0; /* Add vertical padding */
}

/* Styling for individual accordion items */
.accordion-item {
    border-bottom: 1px solid #eee; /* Subtle separator between items */
}

/* Styling for accordion headers (the clickable part) */
.accordion-header {
    padding: var(--spacing-m) 0; /* Vertical padding */
    cursor: pointer; /* Indicate interactivity */
    display: flex; /* Use flexbox to align heading and icon */
    justify-content: space-between; /* Space out heading and icon */
    align-items: center; /* Vertically center items */
    color: var(--color-dark); /* Header text color */
    transition: color 0.3s ease; /* Smooth transition for hover effect */
}
/* Timeline Styles */
.timeline {
 position: relative;
 padding: var(--spacing-xl) 0;
}

.timeline::after {
 content: '';
 position: absolute;
 width: 4px;
 background-color: var(--color-primary);
 top: 0;
 bottom: 0;
 left: 50%;
 margin-left: -2px;
    z-index: 0; /* Ensure timeline is behind content */
}

/* Styling for the heading within accordion headers */
.accordion-header h3 {
    margin: 0; /* Remove default margin */
    font-size: 1.4rem; /* Font size for the question */
    font-family: var(--font-sans); /* Use sans-serif for clarity */
    font-weight: 400; /* Lighter weight for question */
}

/* Styling for the indicator icon (plus/minus) */
.accordion-header::after {
    content: '+'; /* Default plus icon */
    font-size: 2rem; /* Size of the icon */
    transition: transform 0.3s ease; /* Smooth rotation transition */
    color: var(--color-primary); /* Icon color */
    font-weight: 300; /* Lighter weight for the icon */
    margin-left: var(--spacing-m); /* Space between heading and icon */
}

/* Styling for the indicator icon when the accordion item is active */
.accordion-item.active .accordion-header::after {
    transform: rotate(45deg); /* Rotate to form an 'x' or close icon */
}

/* Styling for the accordion content (the answer) */
.accordion-content {
    max-height: 0; /* Initially hidden */
    overflow: hidden; /* Hide overflowing content */
    transition: max-height 0.4s ease-out; /* Smooth height transition */
}

/* Styling for the inner content of the accordion (padding for the answer) */
.method-phase:not(:last-child) {
 margin-bottom: var(--spacing-xxl); /* Add space between method phases */
}

/* Style for the header of each method phase */
.method-header {
 text-align: center; /* Center align header content */
 margin-bottom: var(--spacing-l); /* Space below the header */
}

/* Style for the phase number within the method header */
.method-header .phase-number {
 font-size: 2rem; /* Font size for the phase number */
 font-weight: 700; /* Bold font weight */
 color: var(--color-primary); /* Primary color */
 display: block; /* Make it a block element */
}

/* Style for the heading (h2) within the method header */
.method-header h2 {
 font-size: 2.2rem; /* Consistent with H2 typography */
 margin-top: var(--spacing-s); /* Space above the heading */
 margin-bottom: 0; /* Remove bottom margin */
}

/* Style for the details section of each method phase */
.phase-details {
 display: grid; /* Use grid for the two-column layout */
 grid-template-columns: 1fr 1fr; /* Two equal columns */
 gap: var(--spacing-xl); /* Gap between columns */
 background-color: var(--color-gray); /* Background color for the details */
 padding: var(--spacing-l); /* Padding inside the details section */
 border-radius: var(--border-radius); /* Add rounded corners */
}

/* Style for the role and implication column headings (h3) */
.role-column h3,
.implication-column h3 {
 border-bottom: 2px solid var(--color-primary); /* Bottom border */
 padding-bottom: var(--spacing-s); /* Space below the heading and border */
 margin-bottom: var(--spacing-m); /* Space below the heading */
}

/* Remove default list styling for ul within columns */
.role-column ul,
.implication-column ul { list-style-type: none; padding: 0; }
.accordion-content .content-inner {
    padding-bottom: var(--spacing-m); /* Padding below the answer */
}

/* Partenaires Page */
/* Style for each partner category section */
.partner-category:not(:last-child) {
    margin-bottom: var(--spacing-xxl); /* Add space between different partner categories */
}

/* Style for the introduction section within each partner category */
.partner-intro {
    display: grid; /* Use grid for the layout of image and text */
    grid-template-columns: 1fr 2fr; /* Default layout: smaller image column, larger text column */
    gap: var(--spacing-xl); /* Gap between grid items */
    align-items: center; /* Vertically align content */
}

/* Style for the reverse layout of the introduction section */
.partner-intro.reverse {
    grid-template-columns: 2fr 1fr; /* Reverse layout: larger text column, smaller image column */
}

/* Ensure the image stays in the second column for the reverse layout */
.partner-intro.reverse .partner-image {
    grid-column: 2;
    grid-row: 1;
}

/* Style for the heading within the partner introduction text */
.partner-intro h2 {
    font-size: 3rem; /* Larger font size for introduction headings */
    color: var(--color-primary); /* Primary color for emphasis */
    margin-bottom: var(--spacing-l); /* Space below the heading */
}

/* Style for the image container in the introduction */
.partner-intro .partner-image img {
    width: 100%; /* Make image fill its container */
 height: auto; /* Maintain aspect ratio */
    object-fit: cover; /* Cover the area without distortion */
    border-radius: var(--border-radius); /* Add rounded corners to the image */
}

/* Style for the grid of individual partners within the introduction */
.partner-grid {
    display: grid; /* Use grid for the partner cards */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive columns */
    gap: var(--spacing-l); /* Gap between partner cards */
    margin-top: var(--spacing-l); /* Space above the partner grid */
    padding-top: var(--spacing-l); /* Add padding to the top of the grid */
 border-top: 1px solid #eee; /* Subtle separator line */
}

/* Style for individual partner cards */
.partner-card {
    text-align: center; /* Center align text within the card */
}

.timeline-vertical-item {
 padding: 10px 40px;
 position: relative;
 background-color: inherit;
 width: 50%;
}

.timeline-vertical-item::after {
 content: '';
 position: absolute;
 width: 25px;
 height: 25px;
 right: -17px;
 background-color: var(--color-primary);
 border: 4px solid var(--color-light);
 top: 15px;
 border-radius: 50%;
 z-index: 1;
}

/* Style for list items (li) within columns */
.role-column li,
.implication-column li {
 position: relative; /* Needed for positioning the ::before pseudo-element */
 padding-left: 25px; /* Space for the custom marker */
 margin-bottom: var(--spacing-s); /* Space between list items */
 font-size: 1.1rem; /* Consistent with body text */
 line-height: 1.6; /* Good line height */
 color: var(--color-dark); /* Text color */
}

.timeline-vertical-item:nth-child(odd) {
 left: 0;
}

.timeline-vertical-item:nth-child(even) {
 left: 50%;
}

.timeline-vertical-item:nth-child(even)::after {
 left: -16px;
}

/* Applications - Espace Client */
.app-intro img {
    width: 100%;
    height: auto;
}

.app-intro .app-cta h2 {
    margin-bottom: var(--spacing-s);
}

.app-intro .app-cta p {
    margin-bottom: var(--spacing-m);
}
/* Style for the custom list item marker (::before) */
.role-column li::before,
.implication-column li::before {
 content: '✓'; /* The checkmark character */
 position: absolute; /* Position relative to the list item */
 left: 0; /* Align to the left */
 color: var(--color-primary); /* Color of the marker */
 font-weight: bold; /* Bold marker */
}

/* Applications - Features Grid */
.app-features-grid .grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 gap: var(--spacing-l);
}

.feature-card {
 background: white;
 padding: var(--spacing-l);
}

.feature-card h3 {
 margin-bottom: var(--spacing-s);
}

.feature-card p {
 margin-bottom: 0;
}

/* Contact Page */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    align-items: center;
}

.contact-info p {
    margin-bottom: var(--spacing-l);
}

.contact-info .main-cta-button {
 margin-top: var(--spacing-m); /* Add some space above the button */
    display: inline-block; /* Ensure button respects margins/padding */
}

.contact-map img {
 width: 100%; /* Make image fill its container */
    height: 500px; /* Set a fixed height or adjust as needed */
    object-fit: cover; /* Ensure the image covers the area without distortion */
}

/* Style for the image within a partner card */
.vision-section {
    display: grid; /* Use grid for the layout */
    grid-template-columns: 1fr 1fr; /* Two columns */
    gap: var(--spacing-xl); /* Gap between grid items */
    align-items: center; /* Vertically align grid items */
}

/* ==========================================================================
   Animations et améliorations UX
   ========================================================================== */

/* Animation pour les éléments reveal */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-up {
    opacity: 0;
    transform: translateY(50px);
    animation: slideUp 1s ease forwards;
}

@keyframes slideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animation pour les éléments fade-in-up */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

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

/* Amélioration des hover effects */
.cta-button {
    display: inline-block;
    background-color: var(--color-primary);
    color: white;
    padding: 12px 24px;
    border-radius: var(--border-radius);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 2px solid var(--color-primary);
}

.cta-button:hover {
    background-color: transparent;
    color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(139, 115, 85, 0.3);
}

.main-cta-button {
    display: inline-block;
    background-color: var(--color-primary);
    color: white;
    padding: 16px 32px;
    border-radius: var(--border-radius);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    border: 2px solid var(--color-primary);
}

.main-cta-button:hover {
    background-color: transparent;
    color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(139, 115, 85, 0.3);
}

/* Amélioration du page-header */
.page-header {
    padding: var(--spacing-xxl) 0;
    text-align: center;
    background: var(--color-gray);
}

.page-header h1 {
    color: var(--color-primary);
    margin-bottom: var(--spacing-m);
    font-size: 2.5rem;
}

.page-header p {
    font-size: 1.2rem;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Amélioration des sections */
.section-title {
    color: var(--color-primary);
    text-align: center;
    margin-bottom: var(--spacing-l);
    font-size: 2.8rem;
}

/* Configurator CTA styling */
.configurator-cta {
    text-align: center;
    padding: var(--spacing-xl);
}

.configurator-cta h2 {
    margin-bottom: var(--spacing-m);
}

.configurator-cta p {
    font-size: 1.1rem;
    margin-bottom: var(--spacing-l);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Style for the image within the vision section */
.vision-section .vision-image img {
    width: 100%;
    max-width: 400px;
    height: 400px;
    object-fit: cover;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: var(--border-radius);
}

/* Style for the heading within the vision text area */
.vision-text h2 {
    font-size: 2.5rem; /* Slightly larger heading for the vision */
    margin-bottom: var(--spacing-m); /* Space below the heading */
}

/* Style for the paragraph within the vision text area */
.vision-text p {
    font-size: 1.1rem; /* Consistent with body text size */
    line-height: 1.6; /* Good line height for readability */
}
.partner-card img {
    width: 100%; /* Make image fill the width of the card */
 height: 150px; /* Fixed height for partner logos */
    object-fit: contain; /* Contain the entire logo within the area */
    margin-bottom: var(--spacing-m); /* Space below the logo */
 filter: grayscale(100%); /* Display logos in grayscale */
    opacity: 0.8; /* Slightly reduce opacity */
    transition: all 0.3s ease; /* Smooth transition for hover effects */
 padding: 20px; /* Add padding around the logo */
}

/* Hover effect for partner card images to show color */
.partner-card img:hover {
 filter: grayscale(0%); /* Show original colors on hover */
 opacity: 1; /* Full opacity on hover */
}

/* Style for the heading within a partner card */
.partner-card h3 { margin-bottom: var(--spacing-s); font-size: 1.2rem; }
/* Style for the paragraph within a partner card */
.partner-card p { font-size: 1rem; color: #555; }

/* Mentions Légales et Pages Juridiques Similaires */
.legal-content {
    max-width: 800px; /* Limit width for readability */
    margin: 0 auto; /* Center the content */
 padding: var(--spacing-l) 0; /* Add vertical padding */
}

.legal-content h2 {
    font-size: 1.8rem; /* Slightly smaller heading for legal text */
    margin-top: var(--spacing-xl); /* Space above main sections */
    margin-bottom: var(--spacing-m); /* Space below heading */
    border-bottom: 1px solid #eee; /* Subtle separator */
    padding-bottom: var(--spacing-s); /* Padding below separator */
    color: var(--color-dark);
}

.legal-content p {
    font-size: 1.1rem; /* Consistent body text size */
    line-height: 1.8; /* Good line height for readability */
    margin-bottom: var(--spacing-m); /* Space between paragraphs */
 color: var(--color-dark);
}

.legal-content p strong {
    font-weight: bold;
    color: var(--color-dark); /* Ensure strong text is clearly visible */
}

.legal-content a {
    color: var(--color-primary); /* Use primary color for links */
}

/* Protection des Données et Pages Juridiques Similaires */
.legal-content {
 max-width: 800px; /* Limit width for readability */
 margin: 0 auto; /* Center the content */
 padding: var(--spacing-l) 0; /* Add vertical padding */
}

.legal-content h2 {
 font-size: 1.8rem; /* Slightly smaller heading for legal text */
 margin-top: var(--spacing-xl); /* Space above main sections */
 margin-bottom: var(--spacing-m); /* Space below heading */
 border-bottom: 1px solid #eee; /* Subtle separator */
 padding-bottom: var(--spacing-s); /* Padding below separator */
 color: var(--color-dark);
}

.legal-content p {
 font-size: 1.1rem; /* Consistent body text size */
 line-height: 1.8; /* Good line height for readability */
 margin-bottom: var(--spacing-m); /* Space between paragraphs */
 color: var(--color-dark);
}

.legal-content p strong {
 font-weight: bold;
 color: var(--color-dark); /* Ensure strong text is clearly visible */
}

.legal-content a {
 color: var(--color-primary); /* Use primary color for links */
}

/* Assurance, Certificat et Contrat Page */
.legal-content ul {
    list-style: disc; /* Use default disc style */
    margin-bottom: var(--spacing-m); /* Space below the list */
    padding-left: var(--spacing-l); /* Indent the list */
}

.legal-content ul li {
    font-size: 1.1rem; /* Consistent body text size */
    line-height: 1.8; /* Good line height for readability */
    margin-bottom: var(--spacing-s); /* Space between list items */
    color: var(--color-dark);
}

.legal-content ul li strong {
    font-weight: bold;
    color: var(--color-dark); /* Ensure strong text is clearly visible */
}


/* Sécurité des Biens Page */
.page-content.legal-page > img {
    width: 100%;
    height: auto; /* Maintain aspect ratio */
    display: block; /* Ensure image is a block element for margin control */
    margin-bottom: var(--spacing-l); /* Add space below the banner image */
}

.legal-content h3 {
    font-size: 1.6rem; /* Consistent with H3 styles */
    margin-top: var(--spacing-l); /* Space above subheadings */
    margin-bottom: var(--spacing-m); /* Space below subheadings */
    color: var(--color-dark);
}

/* Reusing .legal-content styles for consistency */
/* .legal-content {
 max-width: 800px;
 margin: 0 auto;
 padding: var(--spacing-l) 0;
}

.legal-content p {
 font-size: 1.1rem;
 line-height: 1.8;
 margin-bottom: var(--spacing-m);
 color: var(--color-dark);
}

.legal-content p strong {
 font-weight: bold;
 color: var(--color-dark);
} */

/* Style for the future pillars grid container */
.future-pillars-grid {
 display: grid; /* Use grid for the layout */
 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive columns */
 gap: var(--spacing-l); /* Gap between pillar cards */
}

/* Style for individual pillar cards */
.pillar-card {
    background-color: var(--color-gray); /* Background color for the card */
    padding: var(--spacing-l); /* Padding inside the card */
    border-left: 3px solid var(--color-primary); /* Accent border on the left */
    border-radius: var(--border-radius); /* Subtle rounded corners */
}
/* Style for individual value cards */
.value-card {
    text-align: center; /* Center align text within the card */
    padding: var(--spacing-l); /* Padding inside the card */
    background-color: var(--color-gray); /* Subtle background color */
    border-radius: var(--border-radius); /* Add rounded corners */
}

/* Style for the icon within a value card */
.value-card .icon {
 font-size: 3rem; /* Large font size for the icon */
 color: var(--color-primary); /* Primary color for the icon */
 margin-bottom: var(--spacing-m); /* Space below the icon */
}

/* Style for the heading (h3) within a value card */
.value-card h3 {
 font-size: 1.6rem; /* Consistent with H3 typography */
 margin-bottom: var(--spacing-m); /* Space below the heading */
}

/* Style for the paragraph (p) within a value card */
.value-card p {
    font-size: 1.1rem; /* Consistent with body text size */
    line-height: 1.6; /* Good line height for readability */
}

/* Style for the heading (h3) within a pillar card */
.pillar-card h3 {
    margin-bottom: var(--spacing-s); /* Space below the heading */
    font-size: 1.5rem; /* Appropriate font size */
}

/* Style for the paragraph (p) within a pillar card */
.pillar-card p {
    font-size: 1rem; /* Slightly smaller font for description */
    color: #555; /* Subtle color */
}

/* Style for the closing quote section */
.closing-quote { text-align: center; padding: var(--spacing-xl) 0; }
.closing-quote blockquote {
 font-family: var(--font-serif); font-size: 2rem; font-style: italic; max-width: 800px; margin: 0 auto var(--spacing-m) auto; line-height: 1.5; color: var(--color-dark);
}
.closing-quote footer { margin-top: var(--spacing-m); font-family: var(--font-sans); font-size: 1rem; color: #666; }

/* Style for the heading (h3) within the comparison items inside the 'dream-to-reality' section */
.dream-to-reality .comparison-item h3 {
    font-family: var(--font-serif); /* Apply the serif font for the heading */
    font-size: 1.6rem; /* Consistent with H3 typography */
    margin-bottom: var(--spacing-m); /* Space below the heading */
}

/* Style for the comparison section container */
.dream-to-reality {
    margin-bottom: var(--spacing-xxl); /* Add space below the section */
}

/* Style for the heading (h2) within the comparison section */
.dream-to-reality h2 {
    text-align: center; /* Center align the heading */
    margin-bottom: var(--spacing-xl); /* Space below the heading, consistent with section titles */
}

/* Style for the comparison slider container */
.comparison-slider {
 display: grid; /* Use grid for the layout */
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    gap: var(--spacing-m); /* Gap between grid items */
    align-items: center; /* Vertically align items */
}

/* Style for the comparison items */
.comparison-item { text-align: center; }

/* ==========================================================================
   Mobile Zoom Optimization (50% scale)
   ========================================================================== */

/* Amélioration de l'affichage mobile avec zoom 50% */
@media screen and (max-width: 768px) {
    /* Assurer que les éléments restent lisibles avec le zoom 50% */
    body {
        min-width: 320px;
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
    }
    
    /* Optimisation des tailles de police pour le zoom 50% */
    .hero h1 {
        font-size: clamp(1.8rem, 4vw, 2.5rem);
        line-height: 1.2;
    }
    
    .section-title {
        font-size: clamp(1.5rem, 3.5vw, 2rem);
    }
    
    /* Assurer que les boutons restent cliquables */
    .btn, .cta-button, button {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 20px;
    }
    
    /* Optimisation des images pour le nouveau viewport */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Amélioration de l'espacement pour la vue mobile zoomée */
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* Navigation mobile optimisée */
    .main-navigation {
        font-size: 16px;
    }
    
    /* Formulaires optimisés */
    input, textarea, select {
        font-size: 16px; /* Évite le zoom automatique sur iOS */
        min-height: 44px;
    }
}