/* ==================================== */
/* 1. RÉINITIALISATION ET FONDAMENTAUX */
/* ==================================== */

:root {
    /* Couleurs mises à jour pour plus de chaleur et de luxe */
    --couleur-primaire: #2C3E50; /* Gris Anthracite (Robuste, Professionnel) */
    --couleur-secondaire: #9A9A9A; /* Gris neutre pour les bordures et textes secondaires */
    --couleur-accent: #B8860B; /* Or/Bronze Foncée (Richesse, élégance) */
    --couleur-texte: #333333; 
    --couleur-fond: #FFFFFF; /* Blanc pur pour un contraste élevé */
    --couleur-footer: #1C2833; /* Noir/bleu très sombre pour le pied de page */
    --couleur-blanc: #FFFFFF;

    /* Typographie */
    --font-titre: 'Playfair Display', serif; /* Élégance, Patrimoine */
    --font-corps: 'Roboto', sans-serif; /* Lisibilité, Professionnalisme */
}

/* Importation des polices Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Roboto:wght@300;400;500&display=swap');


/* Réinitialisation de base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-corps);
    color: var(--couleur-texte);
    background-color: var(--couleur-fond);
    line-height: 1.6;
    overflow-x: hidden; 
}

/* Conteneur principal et mise en page */
main {
    max-width: 75rem; /* 1200px */
    margin: 0 auto;
    padding-top: 5rem; /* 80px */
    padding: 0 2rem;
}

.section-conteneur {
    padding: 2rem 1.25rem;
}


/* ==================================== */
/* 2. TYPOGRAPHIE ET EN-TÊTES */
/* ==================================== */

h1, h2, h3 {
    max-width: 75rem; /* 1200px */
    margin: 0 auto;
    font-family: var(--font-titre);
    color: var(--couleur-primaire);
    margin-bottom: 1.25rem; /* 20px */
    line-height: 1.2;
}

h1 {
    font-size: 2.8rem;
    color: var(--couleur-primaire);
}

h2 {
    font-size: 2rem;
    text-align: left; /* Aligner à gauche (plus moderne) */
    margin-bottom: 1.5rem;
    margin-top: 1.5rem;
    position: relative;
    padding-bottom: 0.8rem; /* 15px */
}

/* Ajout d'un trait souligné élégant en couleur accent sous les titres H2 */
h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 3.75rem; /* 60px */
    height: 3px;
    background-color: var(--couleur-accent);
}

h3 {
    font-size: 1.5rem;
    color: var(--couleur-accent);
}

p {
    margin-bottom: 0.8rem;
}


/* ==================================== */
/* 3. EN-TÊTE ET NAVIGATION */
/* ==================================== */

header {
    background-color: var(--couleur-blanc);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
    width: 100%;
    top: 0;
    z-index: 1000;
}

nav {
    max-width: 75rem; /* 1200px */
    margin: 0 auto;
    width: 100%;
    display: flex;
    justify-content: center; /* Espacement entre Logo et Menu */
    align-items: center;
    height: auto;
    min-height: 5rem; /* 80px */
    padding: 0 1.25rem;
}

.logo {
    font-family: var(--font-titre);
    font-size: 1.8rem;
    color: var(--couleur-primaire);
    text-decoration: none;
    font-weight: 700;
}

.logo span {
    color: var(--couleur-accent); /* Le "Dauphinoise" en doré */
    font-weight: 400;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    margin: 0; 
    padding: 0;
}

nav ul li a {
    text-decoration: none;
    color: var(--couleur-primaire);
    font-weight: 500;
    padding: 0rem 0.8rem 0rem 0.8rem;
    transition: color 0.3s;
    position: relative; 
    
    /* 💥 NOUVEAU : Afficher comme un bloc pour que la position: relative fonctionne bien avec le padding */
    display: block;
}

nav ul li a::after {
    content: '';
    position: absolute;
    /* Place le trait en bas du lien */
    left: 50%; 
    bottom: 0; /* Déplacez-le légèrement au-dessus du bord inférieur du padding */
    transform: translateX(-50%); /* Centre le trait horizontalement */
    
    width: 60%;
    height: 2px;
    background-color: var(--couleur-accent);
    
    transform: scaleX(1) translateX(-50%);
    transition: transform 0.3s ease-out;
}

nav ul li a:hover,
nav ul li a.active {
    color: var(--couleur-accent);
}

nav ul li a:hover::after,
nav ul li a.active::after {
    transform: scaleX(0) translateX(-50%); 
}


/* ==================================== */
/* 4. BOUTONS D'APPEL À L'ACTION (CTA) */
/* ==================================== */

.cta-primaire, .cta-secondaire, .cta-tertiaire {
    display: inline-block;
    padding: 0.75rem 1.5625rem; /* 12px 25px */
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 500;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
    text-align: center;
}

/* CTA Principal (Utilise l'Or/Bronze pour l'impact) */
.cta-primaire {
    background-color: var(--couleur-accent);
    color: var(--couleur-blanc); 
    border: 2px solid var(--couleur-accent);
}

.cta-primaire:hover {
    background-color: var(--couleur-primaire);
    color: var(--couleur-blanc);
    border-color: var(--couleur-primaire);
}

/* CTA Secondaire (Gris Anthracite) */
.cta-secondaire {
    background-color: var(--couleur-primaire);
    color: var(--couleur-blanc);
    border: 2px solid var(--couleur-primaire);
}

.cta-secondaire:hover {
    background-color: var(--couleur-accent);
    color: var(--couleur-blanc);
    border-color: var(--couleur-accent);
}

/* CTA Tertiaire */
.cta-tertiaire {
    color: var(--couleur-accent);
    border: none;
    padding: 0.3125rem 0; /* 5px 0 */
    text-transform: none;
    text-decoration: underline;
}

.cta-tertiaire:hover {
    color: var(--couleur-primaire);
}


/* ==================================== */
/* 5. SECTIONS SPÉCIFIQUES À L'ACCUEIL */
/* ==================================== */

/* Bannière d'Accueil */
#banniere-accueil {
    background-image: url('../images/granit.webp'); 
    background-size: cover;
    background-position: center;
    height: auto;
    min-height: 45vh; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0.5rem 1.25rem;
    position: relative;
    z-index: 1;
}

.logo-banniere {
    position: absolute;
    display: block;
    width: 8rem;
    height: auto;
    opacity: 0.9;
    z-index: -1; 
    top: 80%;
    transform: translateY(-50%);
}

.logo-banniere.gauche {
    left: 2rem; /* Marge à gauche */
}

.logo-banniere.droite {
    right: 2rem; /* Marge à droite */
}

#banniere-accueil h1, #banniere-accueil p {
    color: var(--couleur-blanc);
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

/* Présentation des Services */
#nos-services {
    background-color: var(--couleur-fond);
}

.service-wrapper {
    display: flex;
    gap: 2.5rem; /* 40px */
    justify-content: center;
    text-align: center;
}

.service-bloc {
    flex-basis: 45%;
    padding: 1.875rem; /* 30px */
    border: 1px solid var(--couleur-secondaire);
    border-radius: 5px;
    transition: box-shadow 0.3s;
}

.service-bloc:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Effet d'élévation au survol */
}

/* Section À Propos */
#a-propos {
    background-color: var(--couleur-fond);
    text-align: center;
}

.texte-apropos {
    max-width: 50rem; /* 800px */
    margin: 0 auto;
    text-align: left; /* Permet un meilleur alignement du texte */
}

/* Aperçu des Réalisations */
#apercu-realisations {
    text-align: center;
    background-color: #F4F4F4; /* Légère couleur de fond pour distinguer la section */
}

.mini-galerie {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15.625rem, 1fr)); /* 250px */
    gap: 1.25rem; /* 20px */
    margin-bottom: 1.875rem; /* 30px */
}

.mini-galerie img {
    width: 100%;
    height: 15.625rem; /* 250px */
    object-fit: cover; 
    border: 1px solid var(--couleur-secondaire);
}

.mini-galerie .align-top {
    object-position: top;
}

/* Témoignages */
#temoignages {
    background-color: var(--couleur-primaire);
    color: var(--couleur-blanc);
    text-align: center;
    padding: 2.5rem 1.25rem; /* 40px 20px */
}

#temoignages h2 {
    color: var(--couleur-accent);
    text-align: center;
}

#temoignages h2::after {
    left: 50%;
    transform: translateX(-50%);
}

blockquote {
    font-style: italic;
    font-size: 1.1rem;
    margin-top: 1.25rem; /* 20px */
}

/* ==================================== */
/* 6. PAGE RÉALISATIONS (GALERIE) */
/* ==================================== */

#intro-portfolio {
    text-align: center;
    padding-bottom: 0;
}

.filtres {
    text-align: center;
    margin-bottom: 2.5rem; /* 40px */
}

.filtres button {
    background-color: var(--couleur-fond);
    color: var(--couleur-primaire);
    border: 1px solid var(--couleur-secondaire);
    padding: 0.625rem 1.25rem; /* 10px 20px */
    margin: 0 0.625rem; /* 0 10px */
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s, color 0.3s;
}

.filtres button.actif {
    background-color: var(--couleur-primaire);
    color: var(--couleur-blanc);
    border-color: var(--couleur-primaire);
}

#conteneur-galerie {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr)); /* 300px */
    gap: 1.875rem; /* 30px */
}

.galerie-item {
    border: 1px solid var(--couleur-secondaire);
    overflow: hidden;
    background-color: var(--couleur-blanc);
    /* L'état initial "display: none;" sera géré par le script.js */
}

.galerie-item img {
    width: 100%;
    height: 18.75rem; /* 300px */
    object-fit: cover;
}

figcaption {
    padding: 0.9375rem; /* 15px */
    font-size: 0.9rem;
    color: var(--couleur-texte);
}

/* ==================================== */
/* 6.1. STYLISATION DU CARROUSEL (OPTIMISÉ ET CORRIGÉ) */
/* ==================================== */

#conteneur-carrousel {
    position: relative;
    max-width: 56.25rem; /* 900px : La largeur de référence pour desktop */
    margin: 0 auto 3.125rem auto; /* 50px */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--couleur-secondaire);
    height: auto;
    overflow: hidden; 
}

/* La BANDE GLISSANTE : doit pouvoir contenir tous les éléments */
#carrousel-images {
    display: flex; 
    height: 31.25rem; /* 500px : Hauteur fixe pour desktop */
    width: 100%; 
    transition: transform 0.5s ease-in-out; 
    align-items: stretch; /* Les enfants prennent la hauteur complète */
}

/* Les DIAPOSITIVES : forcent la largeur et refusent de se rétrécir */
.carrousel-item {
    /* Largeur FIXE (correspondant au max-width de 900px) */
    /*min-width: 56.25rem;*/
    width: 100%;
    min-width: 100%;
    flex-shrink: 0; /* CRUCIAL pour le glissement */
    height: 100%; /* Prend la hauteur de #carrousel-images */
    overflow: hidden;
    display: flex;
    flex-direction: column; 
    align-items: center;
    justify-content: flex-start;
}

/* Gestion du Caption */
.carrousel-item figcaption {
    width: 100%;
    text-align: center;
    padding: 1rem 0.9375rem; 
    background-color: var(--couleur-primaire); /* Gris Anthracite */
    color: var(--couleur-blanc); /* Texte Blanc */
    min-height: 5rem; /* 80px : Hauteur minimale pour la légende */
    flex-shrink: 0; /* GARANTIT que la légende a toujours cette taille */
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-size: 1.1rem; /* Texte légèrement plus grand */
    font-family: var(--font-titre); /* Utiliser la police élégante des titres */
    font-style: italic; /* Pour un effet de citation */
}

.carrousel-item figcaption::before,
.carrousel-item figcaption::after {
    content: '—'; /* Petit tiret décoratif */
    color: var(--couleur-accent);
    margin: 0 0.5rem;
    font-size: 1.5rem;
    line-height: 1;
}

/* --------------------------------- */
/* AFFICHAGE SPÉCIFIQUE CRÉATION     */
/* --------------------------------- */
.creation-images-wrapper {
    display: flex;
    width: 100%;
    flex-grow: 1;
    overflow: hidden;
    align-items: center; 
    justify-content: center;
}

.creation-images-wrapper img {
    width: auto;
    height: 100%; 
    max-width: 100%; /*56.25rem;*/
    object-fit: contain; 
    box-sizing: border-box;
}

/* --------------------------------- */
/* AFFICHAGE SPÉCIFIQUE AVANT/APRÈS */
/* --------------------------------- */

.restauration-images-wrapper {
    display: flex; 
    width: 100%;
    height: calc(31.25rem - 5rem);
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
}

.restauration-images-wrapper img {
    width: 28.125rem;
    height: 100%;
    object-fit: contain;
    border-right: 2px solid var(--couleur-accent); 
    box-sizing: border-box;
}

.restauration-images-wrapper img:last-child {
    border-right: none;
}

/* Flèches de navigation */
.nav-carrousel {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(44, 62, 80, 0.7); 
    color: var(--couleur-blanc);
    border: none;
    padding: 0.625rem 0.9375rem;
    cursor: pointer;
    font-size: 1.5rem;
    z-index: 10;
    transition: background-color 0.3s;
}

#prev-btn {
    left: 0.625rem; /* 10px */
}

#next-btn {
    right: 0.625rem; /* 10px */
}

/* ==================================== */
/* 7. PAGE CONTACT ET FORMULAIRE */
/* ==================================== */

#formulaire-devis {
    max-width: 38rem; /* 600px */
    margin: 2.5rem auto; /* 40px */
    background-color: var(--couleur-blanc);
    padding: 2.5rem; /* 40px */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

#formulaire-devis label {
    display: block;
    margin-bottom: 0.3125rem; /* 5px */
    font-weight: 500;
}

#formulaire-devis input,
#formulaire-devis textarea,
#formulaire-devis select {
    width: 100%;
    padding: 0.625rem; /* 10px */
    margin-bottom: 1.25rem; /* 20px */
    border: 1px solid var(--couleur-secondaire);
    border-radius: 4px;
    font-family: var(--font-corps);
    font-size: 1rem;
}

#formulaire-devis textarea {
    resize: vertical;
}

#coordonnees {
    text-align: center;
    margin-top: 2.5rem; /* 40px */
}


/* ==================================== */
/* 8. FOOTER */
/* ==================================== */

footer {
    background-color: var(--couleur-footer);
    color: var(--couleur-secondaire);
    text-align: center;
    padding: 1.25rem 1.25rem 0.45rem 1.25rem;
    font-size: 0.9rem;
    margin-top: 2.5rem; /* 40px */
}

footer a {
    color: var(--couleur-accent);
    text-decoration: none;
    margin-left: 0.8rem;
}

footer a:hover {
    text-decoration: underline;
}


/* ==================================== */
/* 9. MEDIA QUERIES (ADAPTATION MOBILE/TABLETTE) */
/* ==================================== */

@media (max-width: 950px) { 
    /* Point de rupture pour la tablette/grand mobile */

    /* ================================= */
    /*     CARROUSEL                     */
    /* ================================= */
    /* 1. La fenêtre visible du carrousel devient fluide */
    #conteneur-carrousel {
        max-width: 90vw; 
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); 
    }

    /* 2. La hauteur et la taille de la diapositive s'adaptent */
    #carrousel-images {
        height: 25rem; /* 400px de haut */
    }
    
    /* 3. Les diapositives reprennent la taille de la fenêtre visible */
    .carrousel-item {
        /* CRUCIAL : Remplace la valeur fixe (900px) par la valeur fluide (90vw) */
        /*min-width: 90vw; 
        width: 90vw;*/
        width: 100%; 
        min-width: 100%;
    }

    /* 4. Les images Avant/Après (Restauration) repassent en pourcentage */
    .restauration-images-wrapper img {
        /* Remplace 450px par 50% */
        width: 50%; 
        /* AJOUT: Permettre aux images de réduire leur taille si le conteneur l'exige */
        flex-shrink: 1; 
        /* AJOUT: S'assurer qu'elles ne s'étirent pas au-delà de leur 50% même si l'espace est là */
        max-width: 50%; 
        height: 100%;
        object-fit: contain; 
        box-sizing: border-box;
    }

    /* 5. Légende et Wrapper d'image s'adaptent (la hauteur est déjà gérée par flex-grow) */
    .restauration-images-wrapper {
        height: calc(25rem - 5rem);
    }
}

@media (max-width: 740px) { 
    /* Point de rupture pour mobile */
    
    nav {
        display: block; /* S'assurer qu'il prend toute la largeur */
        width: 100%; 
        padding-bottom: 0.625rem;
    }
    
    nav ul {
        width: 100%;
        flex-wrap: wrap;
        justify-content: center; /* Centre les éléments sur chaque ligne */
    }
    
    /* Optionnel, pour donner un peu de marge entre les lignes */
    nav ul li {
        margin-bottom: 0.5rem; /* 8px */
    }

    .service-wrapper {
        flex-direction: column;
        gap: 0;
    }

    .service-bloc {
        flex-basis: 100%;
        margin-bottom: 1.25rem; /* 20px */
    }
}


/* Petit mobile */
@media (max-width: 480px) {

    #carrousel-images {
        height: 18.75rem; /* 300px de haut */
    }

    .restauration-images-wrapper {
        height: calc(18.75rem - 5rem);
    }
}