/* Variables de couleurs pour un design moderne */
:root {
    --couleur-or: #B3983D;
    --fond-principal: #FAFAFA; /* Blanc très légèrement gris */
    --texte-sombre: #2C3E50; /* Gris anthracite très élégant */
    --texte-clair: #FFFFFF;
    --carte-fond: #FFFFFF;
}

/* Réinitialisation de base pour que ça s'affiche bien partout */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

body {
    background-color: var(--fond-principal);
    color: var(--texte-sombre);
    line-height: 1.6;
}

/* Conteneur pour centrer le contenu et éviter qu'il soit trop large */
.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

/* En-tête (Header) */
header {
    background-color: var(--texte-sombre);
    color: var(--texte-clair);
    text-align: center;
    padding: 60px 20px;
    border-bottom: 5px solid var(--couleur-or);
}

header h1 {
    font-size: 2.5rem;
    color: var(--couleur-or);
    margin-bottom: 10px;
}

.tagline {
    font-size: 1.2rem;
    font-weight: 300;
}

/* Sections communes */
section {
    margin: 60px 0;
}

h2 {
    color: var(--couleur-or);
    margin-bottom: 20px;
    font-size: 1.8rem;
    border-left: 4px solid var(--texte-sombre);
    padding-left: 10px;
}

h3 {
    color: var(--texte-sombre);
    margin-bottom: 10px;
}

ul {
    list-style-type: none;
}

ul li {
    margin-bottom: 15px;
    padding-left: 20px;
    position: relative;
}

ul li::before {
    content: "■";
    color: var(--couleur-or);
    position: absolute;
    left: 0;
    top: 0;
    font-size: 0.8rem;
}

/* Introduction */
.intro {
    font-size: 1.3rem;
    text-align: center;
    font-weight: bold;
    color: var(--texte-sombre);
}

/* Grille pour les expertises */
.grid-services {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 30px;
}

.service-card {
    background-color: var(--carte-fond);
    flex: 1 1 calc(33.333% - 20px);
    min-width: 250px;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    border-top: 3px solid var(--couleur-or);
    transition: transform 0.3s ease;
}

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

/* Contact */
.contact-action {
    background-color: var(--carte-fond);
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    text-align: center;
}

.contact-action h2 {
    border: none;
    padding: 0;
}

.contact-info {
    margin-top: 20px;
    font-size: 1.1rem;
    display: inline-block;
    text-align: left;
    background-color: var(--fond-principal);
    padding: 20px 40px;
    border-radius: 8px;
    border-left: 4px solid var(--couleur-or);
}

.contact-info a {
    color: var(--couleur-or);
    text-decoration: none;
    font-weight: bold;
}

.contact-info a:hover {
    text-decoration: underline;
}

/* Pied de page */
footer {
    text-align: center;
    padding: 20px;
    background-color: var(--texte-sombre);
    color: var(--texte-clair);
    font-size: 0.9rem;
}
/* --- Style pour la galerie de réalisations (Correction des tailles) --- */
.galerie {
    display: flex;
    flex-wrap: wrap; /* Permet aux images de passer à la ligne si l'écran est petit */
    gap: 20px;
    margin-top: 30px;
    justify-content: center; /* Centre les images sur la page */
}

.photo-container {
    /* Nous fixons des dimensions strictes pour que tous les cadres soient identiques */
    width: 300px; 
    height: 250px; 
    flex: 0 0 300px; /* Empêche la boîte de grandir ou de rétrécir de manière inégale */
    
    overflow: hidden; /* Règle d'or : on cache tout ce qui déborde du cadre */
    border-radius: 8px; /* Coins arrondis pour l'élégance */
    border: 3px solid var(--couleur-or); /* Ta couleur personnalisée */
}

.photo-container img {
    /* L'image doit prendre 100% de la place disponible dans son cadre de 300x250 */
    width: 100%;
    height: 100%;
    
    /* C'est ici que la magie opère pour ne pas déformer l'image */
    object-fit: cover; 
    
    transition: transform 0.3s ease; /* Prépare une animation fluide au survol */
}

/* Effet de zoom quand on passe la souris sur la photo */
.photo-container img:hover {
    transform: scale(1.1);
}
/* --- Style pour le logo de l'en-tête --- */
.logo-img {
    max-width: 250px; /* Tu pourras augmenter ou diminuer ce chiffre selon tes goûts */
    height: auto; /* Permet au logo de ne pas être déformé ou écrasé */
    margin-bottom: 10px;
}

/* --- Style pour la fenêtre d'agrandissement (Modale) --- */
.modale {
    display: none; /* La boîte est invisible par défaut */
    position: fixed; /* Reste figée à l'écran même si on scrolle */
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* Fond noir semi-transparent */
    z-index: 1000; /* S'assure que la photo passe au-dessus de tout le reste du site */
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
    cursor: zoom-out; /* Affiche une loupe avec un "moins" pour indiquer qu'on peut fermer */
}

.modale img {
    /* C'EST ICI QU'ON FIXE LA TAILLE STANDARD MAXIMALE */
    max-width: 900px; /* L'image agrandie ne dépassera jamais 900 pixels de large */
    max-height: 80vh; /* L'image ne dépassera jamais 80% de la hauteur de ton écran */
    
    border: 4px solid var(--couleur-or);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    object-fit: contain; /* Garde les proportions de l'image entière sans la rogner */
}

/* Petit bonus : on change le curseur sur les petites photos pour inviter au clic */
.photo-container img {
    cursor: zoom-in;
}

/* --- Amélioration 1 : Le filigrane (Watermark) en arrière-plan --- */
body::before {
    content: ""; /* Crée un élément virtuel vide */
    position: fixed; /* Fixe le logo par rapport à l'écran, il ne bougera pas au scroll */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Ces trois lignes centrent parfaitement l'image */
    
    width: 60%; /* Le logo prendra 60% de la largeur de l'écran */
    height: 60%;
    
    /* On appelle ton fichier logo (vérifie bien que c'est le bon nom, .png ou .jpg) */
    background-image: url('logo.jpg'); 
    background-repeat: no-repeat; /* Empêche le logo de se multiplier comme un motif */
    background-position: center;
    background-size: contain; /* Garde les proportions du logo */
    
    opacity: 0.03; /* RÉGLAGE MAGIQUE : 3% de visibilité pour ne pas gêner la lecture */
    z-index: -1; /* Assure que le logo reste tout au fond, derrière le texte */
    pointer-events: none; /* Empêche le filigrane de bloquer la souris quand on veut cliquer sur la page */
}

/* --- Amélioration 2 : L'animation d'apparition douce au chargement --- */
body {
    /* Demande au corps de la page de jouer l'animation "fonduHaut" pendant 1 seconde */
    animation: fonduHaut 1s ease-out forwards;
}

@keyframes fonduHaut {
    0% {
        opacity: 0; /* Au départ, la page est invisible */
        transform: translateY(20px); /* Et elle est décalée de 20 pixels vers le bas */
    }
    100% {
        opacity: 1; /* À la fin, elle est totalement visible */
        transform: translateY(0); /* Et elle a repris sa position normale */
    }
}