@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&family=Roboto:wght@400;500&display=swap');

/* ============================================================
   VARIABLES CSS
   ============================================================ */
:root {
    /* Palette de Couleurs Principale */
    --vert-base: #f0f7f0;         /* Fond très clair, légèrement verdâtre */
    --vert-secondaire: #e1f0e1;   /* Un peu plus soutenu pour des sections */
    --vert-accent: #00BFA5;       /* Vert vif et moderne (Teal) */
    --vert-accent-hover: #008c7a; /* Version plus foncée pour le survol */
    --vert-fonce: #00695C;        /* Un vert plus profond pour textes ou accents */
    --vert-tres-clair: #E0F2F1;   /* Pour fonds discrets ou états hover légers */

    --texte-sombre: #263238;      /* Gris ardoise, très foncé (presque noir) */
    --texte-secondaire: #546E7A;  /* Gris moyen pour textes secondaires */
    --texte-discret: #78909C;     /* Gris plus clair pour informations peu importantes */
    --texte-clair: #ffffff;

    --fond-clair: #ffffff;        /* Fond blanc pour les cartes, modales, etc. */
    --fond-gris: #f4f6f8;        /* Fond général du body, légèrement bleuté/gris */
    
    --bordure-input: #B0BEC5;     /* Bordure pour les champs de formulaire */
    --bordure-discret: #ECEFF1;   /* Bordure très légère pour séparateurs fins */

    --ombre-couleur: rgba(38, 50, 56, 0.1); /* Ombre douce */
    --ombre-couleur-intense: rgba(38, 50, 56, 0.2); /* Ombre plus marquée */

    /* Layout global */
    --layout-max-width: 1140px;
    --layout-horizontal-gutter: clamp(1rem, 6vw, 3rem);

    /* Couleurs Sémantiques */
    --couleur-succes-texte: #1B5E20;
    --couleur-succes-fond: #E8F5E9;
    --couleur-succes-bordure: #A5D6A7;

    --couleur-erreur-texte: #B71C1C;
    --couleur-erreur-fond: #FFEBEE;
    --couleur-erreur-bordure: #EF9A9A;

    --couleur-avertissement-texte: #E65100;
    --couleur-avertissement-fond: #FFF3E0;
    --couleur-avertissement-bordure: #FFCC80;

    --couleur-info-texte: #01579B;
    --couleur-info-fond: #E1F5FE;
    --couleur-info-bordure: #81D4FA;

    --couleur-danger-fond: #D32F2F;
    --couleur-danger-fond-hover: #B71C1C;
    --couleur-danger-texte: var(--texte-clair);

    /* Transparences (exemples, peuvent être étendues) */
    --vert-accent-transparent: rgba(0, 191, 165, 0.15);
    --vert-clair-transparent: rgba(224, 242, 241, 0.7); /* Utilisé pour messages envoyés */
    --gris-moyen-transparent: rgba(245, 245, 245, 0.8); /* Utilisé pour messages reçus */

    /* NOUVELLES VARIABLES POUR STRUCTURE */
    --vert-structure-fond: #3A7D44; /* Vert moyen pour header/footer-banner */
    --texte-sur-vert-structure: #F5F5F5; /* Blanc cassé pour texte sur --vert-structure-fond */

    /* Typographie */
    --font-principale: 'Roboto', Arial, sans-serif;
    --font-titres: 'Montserrat', Arial, sans-serif;

    /* Espacements (échelle modulaire) */
    --spacing-xxs: 0.25rem; /* 4px */
    --spacing-xs:  0.5rem;  /* 8px */
    --spacing-sm:  0.75rem; /* 12px */
    --spacing-md:  1rem;    /* 16px */
    --spacing-lg:  1.5rem;  /* 24px */
    --spacing-xl:  2.5rem;  /* 40px */
    --spacing-xxl: 4rem;    /* 64px */

    /* Rayons de bordure */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-round: 50px; /* Pour les boutons pilules */

    /* Ombres */
    --shadow-xs: 0 1px 2px 0 var(--ombre-couleur);
    --shadow-sm: 0 2px 4px 0 var(--ombre-couleur);
    --shadow-md: 0 4px 8px -2px var(--ombre-couleur), 0 2px 4px -2px rgba(0,0,0,0.04);
    --shadow-lg: 0 10px 15px -3px var(--ombre-couleur-intense), 0 4px 6px -2px rgba(0,0,0,0.05);
    --shadow-xl: 0 20px 25px -5px var(--ombre-couleur-intense), 0 10px 10px -5px rgba(0,0,0,0.04);
}

/* ============================================================
   RESET & STYLES DE BASE
   ============================================================ */
html {
    box-sizing: border-box;
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent; /* Supprime le flash bleu sur mobile au clic */
}

*,
*::before,
*::after {
    box-sizing: inherit;
    margin: 0; /* Ajout d'un reset de marge plus strict */
    padding: 0; /* Ajout d'un reset de padding plus strict */
}

body {
    font-family: var(--font-principale);
    color: var(--texte-sombre);
    line-height: 1.65;
    background-color: var(--fond-gris);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Ajout padding pour la bannière fixe en bas (Desktop) */
    padding-bottom: 140px; 
}

img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    max-width: 100%;
    height: auto;
}

p {
    margin-bottom: var(--spacing-md);
}

ul, ol {
    list-style: none; /* Suppression des puces par défaut, à ajouter si besoin spécifique */
}

/* ============================================================
   TYPOGRAPHIE
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-titres);
    color: var(--texte-sombre);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: var(--spacing-lg);
}

h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin-top: var(--spacing-xl); }
h3 { font-size: clamp(1.25rem, 3vw, 1.75rem); font-weight: 500; }
/* h4, h5, h6 peuvent être définis si utilisés */

a {
    color: var(--vert-accent);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

a:hover,
a:focus {
    color: var(--vert-accent-hover);
    text-decoration: underline;
}

strong, b { font-weight: 700; } /* Assurer la cohérence du gras */

/* ============================================================
   LAYOUT & CONTENEURS GÉNÉRAUX
   ============================================================ */
.container {
    width: 90%;
    max-width: var(--layout-max-width); /* Max standard */
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--layout-horizontal-gutter);
    padding-right: var(--layout-horizontal-gutter);
}

.page-container { /* Conteneur principal pour le contenu de chaque page */
    width: 100%; /* S'assurer qu'il prend toute la largeur */
    max-width: var(--layout-max-width);
    margin-left: auto;
    margin-right: auto;
    padding: var(--spacing-lg) var(--layout-horizontal-gutter);
    overflow-x: hidden; /* Empêcher le défilement horizontal accidentel */
}

@media (max-width: 768px) {
    .page-container {
        padding: var(--spacing-md) clamp(0.75rem, 4vw, var(--spacing-md));
    }
}

/* Nouveaux ajustements pour les écrans encore plus petits */
@media (max-width: 600px) {
    .container {
        width: 95%; /* Augmenter un peu la largeur pour les petits écrans */
        padding-left: clamp(0.75rem, 6vw, var(--spacing-md));
        padding-right: clamp(0.75rem, 6vw, var(--spacing-md));
    }
    .page-container {
        padding: var(--spacing-sm) clamp(0.65rem, 5vw, var(--spacing-md));
    }

    h1 { font-size: clamp(1.8rem, 7vw, 2.5rem); }
    h2 { font-size: clamp(1.5rem, 6vw, 2rem); }
    h3 { font-size: clamp(1.1rem, 5vw, 1.5rem); }

    .content-card {
        padding: var(--spacing-md);
    }

    .hero-content h1 { font-size: clamp(2rem, 8vw, 3rem); }
    .hero-content p { font-size: 1rem; }

    .cta-section { padding: var(--spacing-xl) 0; }
    .cta-section { padding-inline: clamp(0.75rem, 6vw, var(--spacing-md)); }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    textarea,
    select {
        font-size: 1rem; /* Assurer une bonne lisibilité sur mobile */
    }

    .button-group {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    .button-group .cta-button {
        width: 100%; /* Boutons pleine largeur dans un groupe */
    }
}

/* ============================================================
   CARDS & BOXES DE CONTENU
   ============================================================ */
.content-card {
    background-color: var(--fond-clair);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--spacing-xl); /* Espace par défaut sous une carte */
}

.content-card--narrow { max-width: 700px; margin-left: auto; margin-right: auto; }
.content-card--medium { max-width: 800px; margin-left: auto; margin-right: auto; }
.content-card--wide { max-width: 1140px; margin-left: auto; margin-right: auto; } /* Si besoin d'une carte pleine largeur de container */

@media (max-width: 600px) {
    .content-card--narrow,
    .content-card--medium,
    .content-card--wide {
        margin-left: 0;
        margin-right: 0;
        width: 100%; /* Forcer la pleine largeur dans le conteneur parent */
    }
}

/* ============================================================
   HEADER (EN-TÊTE)
   ============================================================ */
header {
    background-color: var(--vert-structure-fond); /* Modifié */
    padding: var(--spacing-sm) 0;
    box-shadow: var(--shadow-md); /* Ombre plus prononcée et moderne */
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

header .nav-container { /* Spécificité pour le .container dans le header */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--texte-sur-vert-structure); /* Assurer que le conteneur parent a la bonne couleur de base */
    padding: var(--spacing-xs) 0;
}

.nav-logo a { 
    text-decoration: none !important; /* Ajout !important */
    display: flex; 
    align-items: center; 
    gap: var(--spacing-sm);
    color: var(--texte-sur-vert-structure) !important; /* Forcer la couleur pour le lien lui-même avec !important */
}
.nav-logo a:hover, .nav-logo a:focus { 
    text-decoration: none !important; /* Ajout !important */
    color: var(--texte-sur-vert-structure) !important; /* Maintenir la couleur au survol avec !important */
}

.nav-logo img {
    height: 30px; /* Taille du logo */
    width: auto;
}

/* Règle plus spécifique pour le H1 du logo */
header.nav-container .nav-logo a h1, /* Ciblage plus spécifique */
.nav-logo a h1 { /* Maintien de l'ancienne règle pour compatibilité si header.nav-container n'est pas toujours là */
    font-family: var(--font-titres) !important; /* Assure l'utilisation de Montserrat avec !important */
    font-size: 1.5rem !important; /* Assure la taille desktop avec !important */
    font-weight: 700 !important; /* Assure la graisse avec !important */
    color: var(--texte-sur-vert-structure) !important; /* Forcé à blanc cassé avec !important */
    margin: 0 !important; /* Annule le margin-bottom par défaut des h1 avec !important */
    line-height: 1 !important; /* Pour un meilleur alignement vertical avec l'image avec !important */
}

/* Styles pour le lien "Accueil" spécifique à côté du logo dans header.php (connecté) */
.nav-logo a.nav-accueil-logo {
    width: auto; 
    box-sizing: content-box; /* ou initial */
    padding: var(--spacing-xs) var(--spacing-sm); /* Padding plus léger qu'un bouton */
    font-size: 0.9rem; 
    font-weight: 500; /* Un peu plus marqué qu'un lien de menu */
    white-space: nowrap; /* Empêcher le saut à la ligne du texte */
    border: none; /* Pas de bordure */
    display: inline-flex; /* Aligner avec le logo */
    align-items: center; 
    color: var(--texte-sur-vert-structure); /* CHANGÉ ICI pour blanc cassé */
    border-radius: var(--radius-sm); 
    gap: var(--spacing-xxs);
    text-decoration: none; 
    background-color: transparent; /* Pas de fond */
}

.nav-logo a.nav-accueil-logo:hover,
.nav-logo a.nav-accueil-logo:focus {
    /* Style de survol simple */
    background-color: var(--vert-accent-transparent); /* Léger fond vert accent au survol */
    color: var(--texte-sur-vert-structure); /* Garder le texte blanc cassé, ou le rendre plus vif */
}

.nav-menu { /* Style PC par défaut */
    display: flex;
    align-items: center;
    gap: var(--spacing-xs); 
    /* Annuler les propriétés de grille potentiellement héritées ou appliquées par erreur globalement */
    grid-template-columns: none;
    grid-template-rows: none;
    grid-auto-flow: initial;
    width: auto; /* Le menu ne prend pas toute la largeur sur PC */
    padding: initial; /* Ou 0 si aucun padding par défaut pour le conteneur menu sur PC */
}

.nav-menu a { /* Style PC par défaut pour les liens */
    color: var(--texte-sur-vert-structure); /* Modifié */
    font-size: 0.9rem;
    font-weight: 500;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    display: inline-flex; 
    align-items: center;
    gap: var(--spacing-xxs); 
    /* Annuler les propriétés mobiles spécifiques */
    width: auto;
    border: none; /* Pas de bordure par défaut sur PC */
    white-space: nowrap; /* Les liens PC ne passent pas à la ligne */
    /* background-color: transparent; */ /* Assurer que le fond est transparent par défaut */
}

.nav-menu a:hover,
.nav-menu a:focus,
.nav-menu a.active { /* 'active' peut être une classe PHP-driven */
    background-color: var(--vert-accent);
    color: var(--texte-clair);
}

.nav-menu a > svg,
.nav-menu a > img { /* Icônes dans la nav */
    height: 1.1em;
    width: 1.1em;
    fill: currentColor; /* Pour les SVGs inline ou masqués */
}

/* Ajustements pour l'affichage du .nav-menu sur mobile */
@media (max-width: 768px) {
    header .nav-container {
        /* Retour à la disposition en colonne pour logo et menu */
        flex-direction: column; 
        align-items: flex-start; 
        /* Annuler la grille */
        /* display: grid; */
        /* grid-template-columns: 1fr 1fr; */
        /* gap: var(--spacing-sm); */
        /* align-items: start; */
    }

    .nav-logo {
        /* Rétablir la prise de largeur et la marge inférieure */
        width: 100%; 
        margin-bottom: var(--spacing-xs); /* Réduit de sm à xs */
        /* Annuler display: contents */
        /* display: contents; */
        /* Les styles flex de base (non-mobile) pour aligner logo et accueil s'appliquent */
        display: flex; /* S'assurer qu'il est flex */
        align-items: center; /* Centrer verticalement logo et accueil */
        gap: var(--spacing-xs); /* Réduit de sm à xs */
        flex-wrap: wrap; /* Permettre au lien accueil de passer en dessous si pas de place */
    }

    /* Cible le H1 dans le premier lien du logo sur mobile */
    /* .nav-logo a:first-child .site-name-logo, */ /* Commenté car HTML utilise H1 */
    header.nav-container .nav-logo a:first-child h1, /* Ciblage plus spécifique pour mobile */
    .nav-logo a:first-child h1 {
        font-family: var(--font-titres) !important; /* Assure l'utilisation de Montserrat sur mobile avec !important */
        font-size: 1.3rem !important; /* Assure la taille mobile avec !important */
        font-weight: 700 !important; /* Assure la graisse pour Montserrat sur mobile avec !important */
        color: var(--texte-sur-vert-structure) !important; /* Forcé à blanc cassé aussi sur mobile avec !important */
        /* margin: 0; et line-height: 1; devraient être hérités ou non nécessaires si déjà sur .nav-logo a h1 global */
    }
    
    .nav-logo a:first-child img {
        height: 32px; /* Réduit de 36px */
        width: 32px; /* Réduit de 36px */
    }
    
    /* Style pour le lien "Accueil" (.nav-accueil-logo) dans le nav-logo */
    /* Il doit ressembler à un lien normal, pas un bouton de menu */
    .nav-logo a.nav-accueil-logo {
        /* Annuler les styles de bouton */
        width: auto; 
        box-sizing: content-box; /* ou initial */
        padding: var(--spacing-xs) var(--spacing-sm); /* Padding plus léger qu'un bouton */
        font-size: 0.9rem; 
        font-weight: 500; /* Un peu plus marqué qu'un lien de menu */
        white-space: nowrap; /* Empêcher le saut à la ligne du texte */
        border: none; /* Pas de bordure */
        display: inline-flex; /* Aligner avec le logo */
        align-items: center; 
        color: var(--texte-sur-vert-structure); /* CHANGÉ ICI pour blanc cassé (MOBILE) */
        border-radius: var(--radius-sm); 
        gap: var(--spacing-xxs);
        text-decoration: none; 
        background-color: transparent; /* Pas de fond */
    }

    .nav-logo a.nav-accueil-logo:hover,
    .nav-logo a.nav-accueil-logo:focus {
        /* Style de survol simple */
        background-color: var(--vert-accent-transparent); /* Léger fond vert accent au survol (MOBILE) */
        color: var(--texte-sur-vert-structure); /* Garder le texte blanc cassé (MOBILE) */
    }

    /* Annuler les styles spécifiques pour img/span dans .nav-accueil-logo s'ils existent */
    /* .nav-logo a.nav-accueil-logo img { ... } */
    /* .nav-logo a.nav-accueil-logo span { ... } */

    .nav-menu { /* Règle spécifique pour mobile */
        /* Rétablir la grille pour nav-menu SEULEMENT */
        display: grid;                           
        grid-template-columns: 1fr 1fr;          
        /* grid-template-rows: repeat(3, auto); Pas nécessaire, la grille s'adapte */
        /* grid-auto-flow: column; Pas nécessaire non plus */
        gap: var(--spacing-xs); /* Réduit de sm à xs */
        width: 100%;                           
        padding: 0;  
        /* Annuler display: contents */
        /* display: contents; */
    }

    .nav-menu a { /* Style des liens DANS nav-menu sur mobile */
        /* Ces styles étaient corrects et doivent rester pour les boutons */
        width: auto; 
        box-sizing: border-box; 
        padding: var(--spacing-xs) var(--spacing-md); /* Padding vertical réduit de sm à xs */
        font-size: 0.9rem; 
        font-weight: normal; 
        white-space: normal; 
        border: 1px solid var(--bordure-discret); 
        display: flex; 
        align-items: center; 
        color: var(--texte-sombre); 
        border-radius: var(--radius-sm); 
        gap: var(--spacing-xs); /* Réduit de sm à xs */
        text-decoration: none;
    }
    
    .nav-menu a:hover,
    .nav-menu a:focus,
    .nav-menu a.active { 
        background-color: var(--vert-accent);
        color: var(--texte-clair);
    }

    .nav-menu a img {
        height: 18px; /* Réduit de 20px */
        width: 18px; /* Réduit de 20px */
        /* margin-right: var(--spacing-sm); Supprimé, géré par gap sur .nav-menu a */
    }
    
    .nav-menu a span {
        display: inline;
    }
}

/* Masquer des liens spécifiques du menu de navigation sur mobile (ex: sur index.php) */
@media (max-width: 768px) {
    .nav-menu .hide-on-mobile-nav-link {
        display: none !important; /* Utiliser !important pour s'assurer de surcharger d'autres display: flex/block */
    }
}

/* ============================================================
   BOUTONS (CTA - Call To Action)
   ============================================================ */
.cta-button {
    display: inline-block;
    padding: var(--spacing-md) var(--spacing-xl);
    background-image: linear-gradient(45deg, var(--vert-accent), var(--vert-accent-hover));
    color: var(--texte-clair) !important; /* Important pour surcharger les liens <a> par défaut */
    border-radius: var(--radius-round);
    text-decoration: none;
    font-weight: 700;
    font-family: var(--font-titres);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease-in-out, background-image 0.3s ease;
    border: none;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    text-align: center;
    font-size: 1.05rem;
    line-height: 1.5; /* Assurer une bonne hauteur de ligne */
    letter-spacing: 0.5px;
}

.cta-button:hover,
.cta-button:focus {
    background-image: linear-gradient(45deg, var(--vert-accent-hover), var(--vert-accent));
    transform: translateY(-3px) scale(1.03);
    box-shadow: var(--shadow-md);
    color: var(--texte-clair) !important;
    text-decoration: none;
}

.cta-button.secondary {
    background-image: none;
    background-color: transparent;
    color: var(--vert-accent) !important;
    border: 2px solid var(--vert-accent);
    box-shadow: none;
}

.cta-button.secondary:hover,
.cta-button.secondary:focus {
    background-color: var(--vert-accent);
    color: var(--texte-clair) !important;
    border-color: var(--vert-accent);
    /* transform et box-shadow hérités du .cta-button:hover ou peuvent être spécifiques */
}

.cta-button.danger {
    background-image: none;
    background-color: var(--couleur-danger-fond);
    color: var(--couleur-danger-texte) !important;
    border: 2px solid var(--couleur-danger-fond); /* Ou transparent si pas de bordure voulue */
    box-shadow: none;
}

.cta-button.danger:hover,
.cta-button.danger:focus {
    background-color: var(--couleur-danger-fond-hover);
    color: var(--couleur-danger-texte) !important;
    border-color: var(--couleur-danger-fond-hover);
}

/* Pour les groupes de boutons */
.button-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Ou left/right selon le contexte */
    gap: var(--spacing-md);
    margin-top: var(--spacing-sm); /* Ajuster si besoin */
}

/* ============================================================
   FORMULAIRES
   ============================================================ */
.form-group {
    margin-bottom: var(--spacing-md);
}

.form-label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: 500;
    color: var(--texte-secondaire);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
select,
textarea {
    font-family: var(--font-principale);
    font-size: 1rem;
    color: var(--texte-sombre);
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--bordure-input);
    border-radius: var(--radius-sm);
    background-color: var(--fond-clair);
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    width: 100%;
    /* margin-bottom: var(--spacing-md); -> Géré par .form-group */
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--vert-accent);
    box-shadow: 0 0 0 3px var(--vert-accent-transparent);
}

textarea {
    min-height: 100px; /* Hauteur minimale pour les textareas */
    resize: vertical; /* Permettre redimensionnement vertical */
}

select {
    appearance: none; /* Style de base pour select, peut nécessiter une icône custom */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23546E7A'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--spacing-sm) center;
    background-size: 1.2em;
    padding-right: calc(var(--spacing-md) + 1.5em); /* Espace pour la flèche */
}

/* Style de base pour les boutons de formulaire non CTA */
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
    font-family: var(--font-titres);
    cursor: pointer;
    /* Si ce ne sont pas des .cta-button, ils auront le style par défaut du navigateur.
       Il est souvent préférable d'appliquer .cta-button ou une autre classe de bouton. */
}

/* Styles pour l'autocomplétion (depuis inscription.php) */
.autocomplete-container {
    position: relative;
}

.autocomplete-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--fond-clair);
    border: 1px solid var(--bordure-input);
    border-radius: var(--radius-sm);
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000; /* Assurer que c'est au-dessus des autres éléments */
    display: none; /* Caché par défaut */
    box-shadow: var(--shadow-sm);
}

.autocomplete-item {
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    color: var(--texte-sombre);
}

.autocomplete-item:hover, .autocomplete-item.active {
    background-color: var(--vert-tres-clair);
    color: var(--texte-sombre);
}

/* ============================================================
   MESSAGES (Erreur, Succès, Info, Avertissement)
   ============================================================ */
.message-box { /* Classe de base pour tous les types de messages */
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-lg);
    text-align: center;
    border: 1px solid transparent; /* Bordure par défaut */
    font-size: 0.95rem;
}

.message-box h1, .message-box h2, .message-box h3 { /* Titres dans les messages */
    font-size: 1.3rem;
    color: inherit; /* Hérite la couleur du parent .message-box */
    margin-bottom: var(--spacing-sm);
}

.message-box p {
    margin-bottom: var(--spacing-sm);
}
.message-box p:last-child {
    margin-bottom: 0;
}

.message-box--success {
    color: var(--couleur-succes-texte);
    background-color: var(--couleur-succes-fond);
    border-color: var(--couleur-succes-bordure);
}

.message-box--error,
.alert.alert-danger { /* Support pour ancienne classe Bootstrap-like */
    color: var(--couleur-erreur-texte);
    background-color: var(--couleur-erreur-fond);
    border-color: var(--couleur-erreur-bordure);
}
.alert.alert-danger { text-align: left; /* Spécificité pour .alert.alert-danger si multi-lignes */ }


.message-box--warning {
    color: var(--couleur-avertissement-texte);
    background-color: var(--couleur-avertissement-fond);
    border-color: var(--couleur-avertissement-bordure);
}

.message-box--info {
    color: var(--couleur-info-texte);
    background-color: var(--couleur-info-fond);
    border-color: var(--couleur-info-bordure);
}

/* ============================================================
   CLASSES UTILITAIRES
   ============================================================ */
.text-center { text-align: center !important; }
.text-left   { text-align: left !important; }
.text-right  { text-align: right !important; }

.hidden { display: none !important; }
.visually-hidden { /* Pour masquer visuellement mais garder accessible aux lecteurs d'écran */
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/* Espacements utilitaires (marges) */
.mt-xs { margin-top: var(--spacing-xs) !important; } .mb-xs { margin-bottom: var(--spacing-xs) !important; }
.mt-sm { margin-top: var(--spacing-sm) !important; } .mb-sm { margin-bottom: var(--spacing-sm) !important; }
.mt-md { margin-top: var(--spacing-md) !important; } .mb-md { margin-bottom: var(--spacing-md) !important; }
.mt-lg { margin-top: var(--spacing-lg) !important; } .mb-lg { margin-bottom: var(--spacing-lg) !important; }
.mt-xl { margin-top: var(--spacing-xl) !important; } .mb-xl { margin-bottom: var(--spacing-xl) !important; }
.mt-xxl{ margin-top: var(--spacing-xxl) !important;} .mb-xxl{ margin-bottom: var(--spacing-xxl) !important;}
/* Paddings peuvent être ajoutés de la même manière (pt-xs, pb-xs, etc.) */

/* ============================================================
   STYLES SPÉCIFIQUES AUX COMPOSANTS/PAGES
   ============================================================ */

/* --- Hero Section (index.php) --- */
.hero {
    background-color: var(--vert-secondaire);
    padding: var(--spacing-xxl) 0;
    padding-inline: var(--layout-horizontal-gutter);
    text-align: center;
    position: relative;
    overflow: hidden; /* Pour les décorations futures */
}
.hero > * {
    max-width: var(--layout-max-width);
    margin-left: auto;
    margin-right: auto;
}
.hero .container { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.hero-content h1 { font-size: clamp(2.5rem, 7vw, 4rem); line-height: 1.15; margin-bottom: var(--spacing-md); color: var(--texte-sombre); font-weight: 700; text-shadow: 1px 1px 2px rgba(0,0,0,0.1); }
.hero-content p { font-size: 1.2rem; color: var(--texte-secondaire); max-width: 700px; margin-left: auto; margin-right: auto; margin-bottom: var(--spacing-lg); line-height: 1.7; }

/* --- Grilles d'information (index.php, etc.) --- */
.info-grid, .benefits-grid { /* Peuvent être fusionnées si le style est identique */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: var(--spacing-lg);
}
.info-item, .benefit-item { /* Items spécifiques pour les info-grid et benefits-grid */
    background-color: var(--fond-clair);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
    margin-bottom: 0; /* Les items de grid n'ont pas de margin-bottom par défaut ici */
}
.info-item:hover, .benefit-item:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.info-item img, .benefit-item img { max-width: 50px; height: 50px; object-fit: contain; margin-left: auto; margin-right: auto; margin-bottom: var(--spacing-md); }
.info-item h3, .benefit-item h3 { font-size: 1.2rem; margin-bottom: var(--spacing-xs); font-weight: 500; }
.info-item p, .benefit-item p { font-size: 0.9rem; line-height: 1.5; color: var(--texte-secondaire); margin-bottom: 0; }


/* --- Carte d'information spécifique (index.php) --- */
.info-card-detailed { /* Renommée pour éviter confusion avec .content-card */
    background-color: var(--fond-clair);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    align-items: center;
    margin-top: var(--spacing-lg); /* Ou margin-bottom sur l'élément précédent */
}
.info-card-detailed img { width: 100%; max-width: 250px; border-radius: var(--radius-sm); object-fit: cover; }
.info-card-detailed div { flex: 1; text-align: center; }
.info-card-detailed p { font-size: 1rem; margin-bottom: var(--spacing-lg); color: var(--texte-secondaire); }
.info-card-detailed .cta-button { margin-top: var(--spacing-sm); }

@media (min-width: 768px) {
    .info-card-detailed { flex-direction: row; text-align: left; }
    .info-card-detailed img { flex: 0 0 250px; }
    .info-card-detailed div { text-align: left; }
}

/* --- Sections génériques et CTA Section (index.php) --- */
.content-section { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); }
.content-section { padding-inline: var(--layout-horizontal-gutter); }
.content-section > * {
    max-width: var(--layout-max-width);
    margin-left: auto;
    margin-right: auto;
}
.content-section > h2 { /* Titre direct d'une .content-section */
    text-align: center;
    margin-bottom: var(--spacing-xl);
}
.cta-section { background-color: var(--vert-secondaire); padding: var(--spacing-xxl) 0; padding-inline: var(--layout-horizontal-gutter); text-align: center; margin-top: var(--spacing-xl); }
.cta-section > * {
    max-width: var(--layout-max-width);
    margin-left: auto;
    margin-right: auto;
}
.cta-section h2 { margin-bottom: var(--spacing-xl); }
.cta-section p { color: var(--texte-secondaire); max-width: 600px; margin-left: auto; margin-right: auto; margin-bottom: var(--spacing-lg); font-size: 1.1rem; }

/* --- Footer --- */
footer {
    background-color: var(--vert-base);
    color: var(--texte-secondaire);
    padding: var(--spacing-xl) var(--spacing-md); /* Ajout padding horizontal ici */
    border-top: 1px solid var(--bordure-discret);
    text-align: center;
    font-size: 0.85rem;
}
.footer-content {
    width: 90%; /* Largeur du contenu */
    max-width: 1140px; /* Max standard */
    margin-left: auto; /* Centrage */
    margin-right: auto; /* Centrage */
    /* padding-left et padding-right sont maintenant sur l'élément footer global */
}
.footer-content p { margin-bottom: var(--spacing-xs); }
.footer-content nav { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--spacing-sm) var(--spacing-md); margin-top: var(--spacing-sm); }
.footer-content nav a { color: var(--texte-secondaire); text-decoration: none; }
.footer-content nav a:hover, .footer-content nav a:focus { color: var(--vert-accent); text-decoration: underline; }

/* Styles pour la zone de promotion (anciennement .banner-ad) */
.promo-area {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--vert-structure-fond);
    padding: var(--spacing-sm) 0;
    z-index: 999; /* Réduit de 1000 à 999 */
    box-shadow: var(--shadow-md);
    border-top: 1px solid var(--vert-accent);
}

.promo-area .promo-content-wrapper { /* ancien .ad-container */
    display: flex;
    align-items: center; /* Centre verticalement les enfants */
    justify-content: center; /* MODIFIÉ: était space-between, maintenant centré horizontalement */
    max-width: 728px; /* MODIFIÉ: était 900px, taille standard pour bannière leaderboard */
    min-height: 50px; /* AJOUTÉ: Hauteur minimale pour la zone, pour une présence constante */
    margin: 0 auto;
    padding: 0 var(--spacing-md);
    color: var(--texte-sur-vert-structure); /* Texte clair sur fond foncé */
}

.promo-designation { /* ancien .ad-label */
    font-size: 0.8rem;
    font-weight: 500;
    margin-right: var(--spacing-md); /* Espace à droite du label */
    margin-bottom: 0; /* Annuler la marge par défaut des <p> */
    opacity: 0.8;
    flex-shrink: 0; /* Empêche le label de rétrécir */
}

.promo-actual-content { /* ancien .ad-content - Le contenu de la pub elle-même */
    flex-grow: 1;
    display: flex; /* AJOUTÉ: Pour centrer le <p> à l'intérieur */
    align-items: center; /* AJOUTÉ: Pour centrer le <p> à l'intérieur */
    justify-content: center; /* AJOUTÉ: Pour centrer le <p> à l'intérieur */
    text-align: center; /* MODIFIÉ: était right, maintenant centré */
}
.promo-actual-content p {
    margin-bottom: 0; /* Annuler la marge par défaut des <p> */
    font-size: 0.9rem;
}

/* Responsive pour le bandeau de promotion */
@media (max-width: 768px) {
    body {
        padding-bottom: 100px; /* Réduit pour mobile */
    }
    
    body.has-cookie-banner {
        padding-bottom: 160px; /* 100px pour le bandeau de pub + 60px pour le bandeau de cookies */
    }
    
    .cookie-banner {
        bottom: 100px; /* Ajusté pour mobile */
    }
    
    .promo-area .promo-content-wrapper { /* ancien .ad-container */
        flex-direction: column; /* Empiler les éléments sur mobile */
        text-align: center;
    }
    .promo-designation { /* ancien .ad-label */
        margin-right: 0;
        margin-bottom: var(--spacing-xxs); /* Petit espace entre label et contenu sur mobile */
    }
    .promo-actual-content { /* ancien .ad-content */
        text-align: center; /* Centrer le contenu sur mobile */
    }
}

/* Data Grid */
.data-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Ajuster minmax si besoin */
    gap: var(--spacing-lg); /* Ou --spacing-md si plus compact */
    margin-bottom: var(--spacing-xl); /* Espace après la grille */
}

.data-grid-item {
    background-color: var(--vert-base); /* Ou --fond-clair si contraste souhaité */
    padding: var(--spacing-md);
    border-radius: var(--radius-sm);
    border: 1px solid var(--bordure-discret);
    /* transition: box-shadow .2s, transform .2s; */ /* Si effets hover souhaités */
}
/* .data-grid-item:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } */

.data-grid-item strong { /* Pour les labels dans les items de la grille */
    display: block;
    margin-bottom: var(--spacing-xxs);
    color: var(--texte-sombre);
    font-weight: 500;
    font-size: 0.9rem;
}
.data-grid-item p { /* Pour les valeurs dans les items */
    font-size: 1rem;
    color: var(--texte-secondaire);
    margin-bottom: 0;
}


/* --- Page Userhome (userhome.php) --- */
.profil-card { margin-bottom: var(--spacing-xl); }

.search-container h2 {
    margin-bottom: var(--spacing-lg); /* Un peu plus d'espace que md */
}

.search-container .search-group {
    display: flex;
    flex-wrap: wrap; /* Passage à la ligne sur petits écrans */
    align-items: center;
    gap: var(--spacing-md);
}

.search-container .search-group .form-group {
    display: flex;
    flex-grow: 1;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: 0; /* Annuler la marge par défaut des .form-group */
}

.search-container .search-group .form-label {
    margin-bottom: 0; /* Annuler la marge par défaut des .form-label */
    flex-shrink: 0; /* Empêcher le label de rétrécir */
}

.search-container .search-group input[type="range"] {
    flex-grow: 1;
    min-width: 150px;
}

.search-container .search-group #distance_value {
    font-weight: bold;
    min-width: 60px; /* Un peu plus d'espace pour "100 km" */
    text-align: right;
    flex-shrink: 0;
}

.search-container .search-group .cta-button {
    align-self: center; /* Bien centrer le bouton verticalement */
    padding-top: var(--spacing-xs); /* Ajustement padding pour petits boutons */
    padding-bottom: var(--spacing-xs);
}

/* Style pour l'icône à côté du titre 'Filtrer par distance' */
.search-container h2 .filter-icon {
    height: 3.6em; /* Taille de l'image doublée */
    width: auto; /* Garde les proportions de l'image */
    vertical-align: baseline; /* Aligne l'image avec la ligne de base du texte */
    margin-left: var(--spacing-xs); /* Ajoute un petit espace à gauche de l'icône */
}

.matches-container { margin-top: var(--spacing-xl); }

/* Styles pour .match-card afin de le rendre plus compact */
.match-card {
    padding: var(--spacing-md); /* Padding interne réduit */
    margin-bottom: var(--spacing-lg); /* Marge inférieure ajustée */
    /* La classe .content-card est toujours appliquée, donc background, border-radius, shadow sont hérités */
}

/* Styles spécifiques pour les cartes de vendeurs et acquéreurs */
.match-card--vendeur {
    background-color: var(--vert-fonce) !important; /* #00695C - Vert plus foncé */
    /* Plus de color: var(--texte-clair); ici pour éviter l'héritage global */
}

.match-card--vendeur h3,
.match-card--vendeur .user-type-indicator {
    color: var(--texte-clair) !important; /* Titre et type en clair sur fond foncé */
}

/* Forcer le texte des data-grid-item dans une carte vendeur à être sombre */
.match-card--vendeur .data-grid-item strong,
.match-card--vendeur .data-grid-item p,
.match-card--vendeur .data-grid-item .match-distance { /* Inclure .match-distance ici */
    color: var(--texte-sombre) !important; /* Texte sombre sur le fond clair des data-grid-item */
}

.match-card--acquereur {
    background-color: var(--couleur-info-fond) !important; /* #E1F5FE - Bleu clair pour les acquéreurs */
    /* Le texte sombre par défaut (var(--texte-sombre)) sera lisible ici */
}

/* S'assurer que le h3 des cartes acquéreur est bien sombre si ce n'est pas le défaut */
.match-card--acquereur h3,
.match-card--acquereur .user-type-indicator {
    color: var(--texte-sombre) !important; /* Ou var(--couleur-info-texte) si on veut un bleu foncé spécifique */
}

.match-card h3 { 
    font-size: clamp(1.1rem, 2.5vw, 1.5rem); /* Police du titre réduite */
    margin-bottom: var(--spacing-sm); /* Marge inférieure du titre réduite */
    /* Les autres styles de h3 (couleur, font-family) sont hérités ou déjà définis */
}

/* Styles spécifiques pour les data-grid dans les match-cards pour un affichage plus compact */
.match-card .data-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Taille minimale des items réduite */
    gap: var(--spacing-sm); /* Espacement réduit entre les items */
}

/* Styles spécifiques pour les data-grid-item dans les match-cards */
.match-card .data-grid-item {
    padding: var(--spacing-sm); /* Padding interne des items réduit */
    font-size: 0.85rem; /* Taille de police générale pour l'item réduite (affectera p si non surchargé) */
}

.match-card .data-grid-item strong { 
    font-size: 0.8rem; /* Police des labels réduite */
    margin-bottom: var(--spacing-xxs); /* Marge inférieure du label ajustée */
}
.match-card .data-grid-item p { 
    font-size: 0.85rem; /* Police des valeurs réduite */
}

/* Les media queries @media (min-width: 768px) et (min-width: 992px) pour .match-card .data-grid */
/* peuvent nécessiter un ajustement si les tailles minimales ci-dessus sont trop petites pour elles */
/* Ou elles peuvent continuer à s'appliquer pour redimensionner sur des écrans plus larges. */
/* Pour l'instant, on garde leurs définitions existantes qui commencent à 150px min. */

@media (min-width: 768px) { /* À partir de tablettes */
    .match-card .data-grid {
        /* Ajustement pour viser 2 à 4 colonnes en fonction de la place disponible */
        grid-template-columns: repeat(auto-fit, minmax(min(100%/2, max(150px, 100%/4)), 1fr));
    }
}

@media (min-width: 992px) { /* Pour les écrans plus larges */
    .match-card .data-grid {
         /* S'assurer que cela peut aller jusqu'à 4 colonnes ou plus si la place le permet */
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
    .match-card .data-grid-item {
        font-size: 0.9rem; /* Réduire légèrement la police pour que ça tienne */
        padding: var(--spacing-sm); /* Ajuster le padding si besoin */
    }
    .match-card .data-grid-item strong {
        font-size: 0.85rem; /* Réduire aussi le label */
    }
}

.match-distance { font-size: 0.9rem; color: var(--texte-secondaire); margin-top: var(--spacing-xs); }

@media (max-width: 768px) {
    /* .profil-info, .match-info, .search-form deviennent .data-grid qui est déjà responsive par défaut */
    /* .action-buttons (.button-group) reste flex-wrap par défaut */
}

/* --- Page Contact (contact.php) --- */
/* .contact-section h2 hérite de .content-section h2 */
.contact-grid { /* Est une .content-card qui est un grid */
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
    /* background-color, padding, border-radius, box-shadow de .content-card */
}
@media (min-width: 768px) {
    .contact-grid { grid-template-columns: 1fr 1.5fr; }
}
.contact-info h3 { font-size: 1.5rem; color: var(--texte-sombre); margin-bottom: var(--spacing-lg); }
.contact-info p { margin-bottom: var(--spacing-sm); line-height: 1.7; }
.contact-info p strong { color: var(--texte-sombre); }
/* .contact-form .form-group et .contact-form label héritent des styles globaux de formulaire */
/* .contact-form .cta-button peut avoir width: 100% si besoin via une classe utilitaire .w-100 ou un style inline */

/* --- Pages Légales (mentions-legales.php, etc.) --- */
/* .legal-section est une .content-card */
.legal-section h1 { text-align: center; margin-bottom: var(--spacing-xl); font-size: clamp(2rem, 5vw, 2.8rem); }
.legal-section h2 { font-size: clamp(1.5rem, 4vw, 2rem); margin-top: var(--spacing-xl); margin-bottom: var(--spacing-md); color: var(--texte-sombre); border-bottom: 2px solid var(--vert-accent); padding-bottom: var(--spacing-xs); }
.legal-section h3 { font-size: clamp(1.2rem, 3vw, 1.6rem); margin-top: var(--spacing-lg); margin-bottom: var(--spacing-xs); color: var(--texte-secondaire); }
.legal-section p, .legal-section ul, .legal-section ol { margin-bottom: var(--spacing-md); line-height: 1.7; }
.legal-section ul, .legal-section ol { padding-left: var(--spacing-lg); list-style: revert; /* Remettre les puces pour les listes légales */ }
.legal-section li { margin-bottom: var(--spacing-xs); }

/* --- Page Validation Compte (valider_compte.php) --- */
/* .validation-container est une .content-card.content-card--narrow */
/* Styles spécifiques pour .cta-button dans ce conteneur si besoin, sinon il hérite */
.validation-container .cta-button {
    /* display: inline-block; width: auto; -> comportement par défaut de .cta-button */
    /* padding-left/right peuvent être ajustés si un bouton plus petit est voulu via une classe modif */
}

/* --- Page Supprimer Compte (supprimer_compte.php) --- */
/* .delete-container est une .content-card.content-card--narrow */
.delete-container h1 { text-align: center; color: var(--couleur-danger-fond); margin-bottom: var(--spacing-lg); }
/* .warning-box - OBSOLETE */
/*
.warning-box { 
    background-color: var(--couleur-avertissement-fond);
    border: 1px solid var(--couleur-avertissement-bordure);
    color: var(--couleur-avertissement-texte);
    padding: var(--spacing-lg);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-xl); 
}
*/
/* .warning-box h3, .warning-box ul, .warning-box p strong héritent des styles de .message-box */
/* .delete-button est .cta-button.danger */
.cancel-link { /* Lien d'annulation standard */
    display: block;
    text-align: center;
    margin-top: var(--spacing-md);
    color: var(--texte-secondaire);
    text-decoration: none;
    font-size: 0.9rem;
}
.cancel-link:hover, .cancel-link:focus { color: var(--vert-accent); text-decoration: underline; }

/* --- Page Profil & Modifier Profil (profil.php, modifier_profil.php) --- */
/* .profil-container est une .content-card.content-card--medium */
.profil-container h1 { text-align: center; margin-bottom: var(--spacing-xl); }
/* .profil-info est .data-grid */
/* .profil-info-item est .data-grid-item */
.profil-container form { margin-bottom: var(--spacing-xl); }
.profil-container form h2 { font-size: 1.8rem; margin-bottom: var(--spacing-lg); border-bottom: 1px solid var(--bordure-discret); padding-bottom: var(--spacing-sm); }
/* .profil-container .form-group hérite */
.ville-info { margin-top: var(--spacing-xs); font-size: 0.9rem; color: var(--texte-discret); }
.profil-actions { /* Est un .button-group */
    border-top: 1px solid var(--bordure-discret); /* Ajout spécifique pour cette section d'actions */
    padding-top: var(--spacing-lg);
}
/* .edit-profile-link devient .cta-button.secondary */
/* .profil-container .delete-account-link devient .cta-button.danger */

/* --- Page Messages (messages.php) --- */
/* .messages-page-container .messages-container est une .content-card.content-card--medium */
/* Il a un fond var(--gris-clair) spécifique vs var(--fond-clair) de .content-card. Surcharge nécessaire. */
.messages-page-container .messages-container.content-card {
    background-color: var(--fond-gris); /* Surcharge pour cette page spécifique */
}
.messages-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-lg); padding-bottom: var(--spacing-md); border-bottom: 1px solid var(--bordure-discret); }
.messages-header h1 { font-size: 1.8rem; color: var(--vert-fonce); margin: 0; }
.back-link { display: flex; align-items: center; color: var(--vert-accent); text-decoration: none; font-weight: 500; }
.back-link:hover { text-decoration: underline; color: var(--vert-accent-hover); }
.back-link-icon { width: 20px; height: 20px; margin-right: var(--spacing-xs); }

.messages-list {
    max-height: 500px;
    overflow-y: auto;
    padding: var(--spacing-md);
    background-color: var(--fond-clair); /* Liste des messages sur fond blanc */
    border: 1px solid var(--bordure-discret);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-lg);
}
.message {
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm); /* Remis */
    max-width: 75%;
    line-height: 1.6;
    word-wrap: break-word; 
}
.message.sent { 
    background-color: var(--vert-accent); /* Vert accent pour l'envoyeur */
    margin-left: auto; 
    color: var(--texte-clair); /* Texte clair sur vert accent */
}
.message.received { 
    background-color: var(--vert-base); /* Vert base (très clair) pour le destinataire */
    margin-right: auto; 
    color: var(--texte-sombre); /* Texte sombre sur vert clair */
}

.message-form { 
    display: flex; 
    flex-direction: column; 
    gap: var(--spacing-sm); 
    align-items: stretch; /* Changer pour que les enfants (form-group) s'étirent */
    margin-top: var(--spacing-lg); /* Ajouter un espace au-dessus du formulaire */
}

.message-form textarea {
    width: 100%; 
    min-height: 80px; /* Légèrement plus haut */
    font-family: inherit;
    resize: vertical; 
    /* Assurer que le padding/border est standard */
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--bordure-input);
    border-radius: var(--radius-sm);
    background-color: var(--fond-clair);
    color: var(--texte-sombre);
}
.message-form textarea:focus {
    outline: none;
    border-color: var(--vert-accent);
    box-shadow: 0 0 0 3px var(--vert-accent-transparent);
}

.message-form .cta-button {
    margin-top: var(--spacing-xs); 
    width: auto; 
}


.cookie-banner {
    position: fixed;
    bottom: 140px; /* Positionné au-dessus du bandeau de pub */
    left: 0;
    width: 100%;
    background-color: #2c3e50;
    color: #ecf0f1;
    padding: 15px;
    text-align: center;
    z-index: 1000; /* Plus élevé que le bandeau de pub */
    box-shadow: 0 -2px 5px rgba(0,0,0,0.2);
    font-size: 0.9rem;
}

.cookie-banner p {
    margin: 0 0 10px 0;
    color: #ecf0f1; /* Assurez-vous que le paragraphe hérite de la bonne couleur */
}

.cookie-banner a {
    color: #3498db; /* Couleur pour les liens, à ajuster */
    text-decoration: underline;
}

.cookie-banner a:hover {
    color: #5dade2;
}


.cookie-banner .button-group {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.cookie-banner .cta-button {
    background-color: #3498db;
    background-image: none;
    color: white;
    padding: 8px 18px;
    border-radius: 4px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    margin: 0;
}

.cookie-banner .cta-button.secondary {
    background-color: transparent;
    background-image: none;
    color: #ecf0f1 !important;
    border: 2px solid #ecf0f1;
}

.cookie-banner .cta-button:hover {
    background-color: #2980b9;
}

.cookie-banner .cta-button.secondary:hover,
.cookie-banner .cta-button.secondary:focus {
    background-color: rgba(236, 240, 241, 0.15);
    color: #ecf0f1 !important;
    border-color: #ecf0f1;
}

/* Ajout de style pour les sections de résultats */
.matches-section {
    margin-bottom: var(--spacing-xl); /* Ajoute de l'espace entre la section vendeur et acquéreur */
}

.matches-section h3 {
    /* Style pour les titres de section "Vendeurs à proximité" et "Acquéreurs à proximité" */
    font-size: clamp(1.3rem, 3.5vw, 1.8rem); /* Taille de police intermédiaire */
    color: var(--texte-sombre);
    margin-bottom: var(--spacing-xs); /* Réduire la marge pour le texte explicatif */
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--bordure-discret);
}

.user-type-indicator {
    font-size: 0.85rem;
    font-weight: 500;
    /* color: var(--texte-clair); // Géré par des règles plus spécifiques maintenant */
    margin-left: var(--spacing-xs);
}

.match-card--vendeur .user-type-indicator {
    /* color: var(--texte-clair); // Déplacé plus haut et combiné */
}

.section-explanation {
    font-size: 0.9rem;
    color: var(--texte-secondaire);
    margin-bottom: var(--spacing-lg);
    margin-top: calc(-1 * var(--spacing-sm)); /* Rapprocher du titre */
}

/* Styles pour le carrousel */
.carousel-section {
    padding: var(--spacing-xl) 0;
    background-color: var(--vert-secondaire);
}

.carousel-container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.carousel-slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.carousel-slide {
    min-width: 100%;
    position: relative;
    display: none;
}

.carousel-slide.active {
    display: block;
}

.carousel-image {
    width: 100%;
    height: 500px;
    object-fit: contain; /* Changé de 'cover' à 'contain' pour éviter le zoom */
    background-color: var(--fond-clair); /* Ajout d'un fond blanc pour les images */
}

.carousel-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: var(--texte-clair);
    padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-lg);
    text-align: center;
}

.carousel-caption h3 {
    font-size: 2rem;
    margin-bottom: var(--spacing-sm);
    color: var(--texte-clair);
}

.carousel-caption p {
    font-size: 1.2rem;
    margin-bottom: 0;
    opacity: 0.9;
}

.carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 191, 165, 0.8); /* Utilisation de la couleur d'accent */
    border: none;
    width: 60px; /* Augmenté de 50px à 60px */
    height: 60px; /* Augmenté de 50px à 60px */
    border-radius: 50%;
    cursor: pointer;
    color: var(--texte-clair);
    font-size: 2rem; /* Augmenté de 1.5rem à 2rem */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10; /* Assurer que les flèches sont au-dessus des images */
}

.carousel-control:hover {
    background: var(--vert-accent); /* Utilisation de la couleur d'accent pleine */
    transform: translateY(-50%) scale(1.1); /* Ajout d'un effet de zoom au survol */
}

.carousel-control.prev {
    left: var(--spacing-lg); /* Augmenté de md à lg */
}

.carousel-control.next {
    right: var(--spacing-lg); /* Augmenté de md à lg */
}

.carousel-indicators {
    position: absolute;
    bottom: var(--spacing-md);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: var(--spacing-sm);
}

.indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--texte-clair);
    background: transparent;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.indicator.active {
    background-color: var(--texte-clair);
}

@media (max-width: 768px) {
    .carousel-image {
        height: 350px;
    }

    .carousel-caption h3 {
        font-size: 1.5rem;
    }

    .carousel-caption p {
        font-size: 1rem;
    }

    .carousel-control {
        width: 50px; /* Augmenté de 40px à 50px */
        height: 50px; /* Augmenté de 40px à 50px */
        font-size: 1.5rem; /* Augmenté de 1.2rem à 1.5rem */
    }

    .carousel-control.prev {
        left: var(--spacing-md);
    }

    .carousel-control.next {
        right: var(--spacing-md);
    }
}