/* ---------- RESET DE BASE ---------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Advent Pro", sans-serif;
    background: #fff;
    color: #000;
}


/* ======== BARRE DE NAVIGATION ======== */
nav {
  position: fixed;
  top: 0;
  margin-left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1400px;
  background-color: rgba(4, 14, 22, 0.85);
  border-radius: 10px;
  z-index: 10;
  padding: 0px 0;
  backdrop-filter: blur(1px);
}

/* ======== MENU ======== */

nav h3 {
    text-transform: uppercase;
    font-size: 20px;
    text-decoration: none;
    text-align: center;
}

nav ul {
    list-style: none;
    font-size: 13px;
    text-decoration: underline;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}


nav li {
    margin: 5px 10px;
}

nav a {
    color: #f9f9f9;
    text-decoration:underline;
    font-size: 1em;
     font-weight: bold;
  transition: color 0.3s ease, background-color 0.3s ease;
  padding: 1px 1px;
  border-radius: 5px;
}



nav a:hover {
  background-color: #0066cc;
  color: #fff;
}

/* ======== RESPONSIVE TABLETTE ======== */
@media (max-width: 768px) {
  nav ul {
    flex-direction:row;
    gap: 1px;
    padding: 1px 0;
  }
  nav a {
    
    width: 100%;
    text-align: center;
    padding: 1px;
  }
}

/* ======== RESPONSIVE MOBILE PETIT ÉCRAN ======== */
@media (max-width: 480px) {
  nav {
    width: 95%;
    border-radius: 0;
  }
  nav a {
    font-size: 0.9em;
  }
}


/* ---------- IMAGE D’ACCUEIL ---------- */

#imagePrincipale {
    padding-top: 80%; /* Réduit l’espace au-dessus */
    background: url(images/PowertpointImages/Affiche2.png) no-repeat center center;
    background-size: 100%; /* Réduit la taille de l’image */
    height: 650px; /* Hauteur réduite */ 
   background-color: #0e1a09;   /* fond sombre Dounia-Services */

}

/* ---------- SECTIONS GÉNÉRALES ---------- */


#presentation div {
    text-align: center;          /* centre tout le contenu */
    margin: 0 auto;              /* centre le bloc lui-même */
     padding-top: 80%; 
}

#presentation div ol {
    display: inline-block;       /* pour centrer la liste */
    text-align: left;            /* garde les puces alignées à gauche */
    line-height: 1em;            /* espace vertical entre les lignes */
    margin-bottom: 20px;         /* espace entre la liste et le lien Contactez-nous */
}

#presentation div ol li {
    margin: 10px 0;              /* ajoute un petit espace entre les éléments */
}



/* ---------------- Main ---------------- */
div#centre main {
    margin-left: 14%;
    max-width: calc(100% - 16%);
    position: relative;
}

/* ---------------- Sections ---------------- */
span {
    display: block;
    border-bottom: 2px solid #0044ff;
    width: 50%;
    height: 1px;
    margin: 60px auto;
}


h2 {
    font-size: 50px;
    text-align: center;
}

/* ---------------- Présentation ---------------- */
section#presentation img {
    width: 95%;
    max-width: 1500px;
    display: block;
    margin: 20px auto;
    height: auto;
    border-radius: 10px;
}


/* ---------- SECTION PUBLICITÉ CONSTRUCTION ---------- */
#pubconstruction {
    display: flex;               /* aligne image + texte horizontalement */
    align-items: flex-start;     /* alignement vertical en haut */
    justify-content: flex-start; /* alignement horizontal à gauche */
    gap: 40px;                   /* espace entre image et texte */
    padding: 50px 20px;          /* espace intérieur */
    background-color: #0e1a09;   /* fond sombre Dounia-Services */
    color: #e6f5db;              /* couleur de texte par défaut */
    flex-wrap: wrap;             /* retour à la ligne si écran petit */
}

/* IMAGE */
#pubconstruction .pub-image img {
    width: 100%;
    max-width: 500px;
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.5);
    transition: transform 0.3s;
}

#pubconstruction .pub-image img:hover {
    transform: scale(1.05);      /* léger zoom au survol */
}

/* TEXTE */
#pubconstruction .pub-texte {
    max-width: 700px;
}

#pubconstruction .pub-texte h2 {
    color: #9ccf7a;             /* titre vert clair */
    margin-bottom: 10px;
}

#pubconstruction .pub-texte h3 {
    color: #b8f7a0;             /* sous-titre vert clair */
    margin-bottom: 20px;
}

#pubconstruction .pub-texte p {
    color: #ffffff;             /* paragraphe blanc */
    line-height: 1.6;           /* interligne confortable */
    margin-bottom: 20px;
}

#pubconstruction ul {
    list-style: none;           /* supprime puces par défaut */
    padding: 0;
    margin-bottom: 25px;
}

#pubconstruction ul li {
    margin-bottom: 10px;
    font-weight: 500;
}

/* BOUTON DEVIS */
#pubconstruction .btn-devis {
    display: inline-block;
    padding: 12px 25px;
    background-color: #2f6c2f;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    border-radius: 12px;
    transition: background 0.3s, transform 0.2s;
}

#pubconstruction .btn-devis:hover {
    background-color: #45a145;
    transform: translateY(-2px);
}

/* ---------- RESPONSIVITÉ ---------- */
@media (max-width: 768px) {
    #pubconstruction {
        flex-direction: column;  /* empile verticalement image + texte */
        text-align: center;      /* centre le texte */
    }

    #pubconstruction .pub-texte {
        max-width: 100%;         /* texte prend toute la largeur */
    }

    #pubconstruction .pub-image img {
        max-width: 90%;          /* image légèrement plus petite */
        margin: 0 auto;          /* centre l’image */
    }
}


/* ---------------- Services / Produits ---------------- */

section#presentation,
section#produit,
section#LocationM,
section#achatVenteM,
section#VenteVoiture,
section#achatVenteP {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    background-color: rgba(198, 220, 221, 0.9);
    padding-top: 5em;
    margin: 10px 5px;
}

section#produit div.service,
section#LocationM div.locase,
section#achatVenteM div.achatvente,
section#VenteVoiture div.voiture,
section#achatVenteP div.parcelle {
    flex: 1 1 30%;
    max-width: 30%;
    text-align: center;
    margin: 10px;
 
}

section#produit div img,
section#LocationM div img,
section#achatVenteM div img,
section#VenteVoiture div img,
section#achatVenteP div img {
    border-radius: 15px;
    box-shadow: 5px 8px 5px 4px rgba(0, 0, 0, 0.8);
    width: 100%;
    height: 200px;
    object-fit: cover;
}

section#produit div h3,
section#LocationM div h3,
section#achatVenteM div h3,
section#VenteVoiture div h3,
section#achatVenteP div h3 {
    font-size: 15px;
    margin: 20px 0 0 0;
}

h2 {
    line-height: 1.4; /* augmente l’interligne du titre */
    margin-bottom: 15px;
    color: #0804e2df;
}

p {
    line-height: 1.5; /* interligne du texte normal */
    margin-bottom: 15px;
    color: #0b02fd;
}

p.secteurs {
    background-color: #fff176; /* jaune clair */
    color: #000000;            /* texte noir pour bien contraster */
    padding: 15px 20px;        /* espace intérieur */
    border-radius: 10px;       /* coins arrondis */
    line-height: 1.8;          /* interligne confortable */
    margin-bottom: 20px;
}


/* ---------------- Contact ---------------- */
section#contact {
    padding: 2em;
    background-color: #d7d8cf;
    padding-top: 3em;
}
section#contact div.haut {
      margin-top: 0.5em;
}

section#contact h2 {
    font-size: 2em;
    text-align: center;
    text-decoration: underline;
}

section#contact form {
    width: 80%; /* Le formulaire prend 90% de la largeur de son conteneur parent */
    max-width: 700px; /* Largeur maximale = 700px pour ne pas trop étirer sur grand écran */
    margin: 2em auto; /* Centre le formulaire horizontalement (auto) et ajoute un espace vertical de 2em */
    text-align: center; /* Centre le texte et les éléments à l'intérieur du formulaire */
    font-size: 16px; /* Taille du texte à l'intérieur du formulaire */
    background-color: #a6ff00; /* Couleur de fond du formulaire (vert clair) */
    padding: 20px; /* Espace intérieur entre le bord du formulaire et son contenu */
    border-radius: 25px; /* Coins arrondis du formulaire */
    box-shadow: 15px 8px 25px 14px rgba(0, 0, 0, 0.5); /* Ombre portée autour du formulaire :15px horizontal, 8px vertical, 25px flou, 14px étendue, couleur noire semi-transparente */
    padding-top: 4em;
}

input,
textarea,
button {
    border: none;
    width: 90%;
    max-width: 100%;
    padding: 15px;
    margin: 10px 0;
    font-size: 1em;
    border-radius: 8px;
}

/* Conteneur des boutons */
.form-buttons {
    display: flex;              /* active flex pour aligner le bouton */
    justify-content: center;    /* centre horizontalement le bouton */
    margin-bottom: 15px;        /* espace sous les boutons */
}

/* Boutons Envoyer et Lire */
.btn-envoi,
.btn-lire {
    padding: 8px 12px;          /* réduit hauteur et largeur */
    font-size: 14px;             /* texte plus petit */
    border-radius: 8px;          /* coins arrondis */
    cursor: pointer;
    background-color: #2f6c2f;  /* fond vert */
    color: #ffffff;              /* texte blanc */
    border: none;
    transition: background 0.3s, transform 0.2s;
    min-width: 100px;            /* largeur minimale du bouton */
}

/* Effet au survol */
.btn-envoi:hover,
.btn-lire:hover {
    background-color: #45a145;
    transform: translateY(-1px);
}


textarea {
    height: 100px;
}

button {
    font-size: 1.8em;
    background-color: rgb(180, 224, 231);
    cursor: pointer;
    transition: 0.3s ease-in-out;
}

button:hover {
    background-color: rgb(219, 221, 86);
    color: aliceblue;
}

/* ---------------- Footer ---------------- */
footer {
    width: 100%;
    color: rgb(219, 215, 208);
    padding: 1%;
    text-align: center;
}

#copryrightEtIcon {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 0 10%;
}

#icons a {
    display: inline-block;
    padding: 0 10px;
    font-size: 2em;
    color: #f3eded;
    transition: transform 0.3s ease;
}

#icons a:hover {
    transform: scale(1.5);
}



/* ---------------- Responsive ---------------- */
@media (max-width: 1024px) {
    div#centre aside {
        width: 18%;
    }

    section#produit div.service,
    section#LocationM div.locase,
    section#achatVenteM div.achatvente,
    section#VenteVoiture div.voiture,
    section#achatVenteP div.parcelle {
        flex: 1 1 45%;
        max-width: 45%;
    }
}

@media (max-width: 768px) {
    #hamburger {
        display: block;
    }

    div#centre aside {
        top: 60px;
        left: -250px;
        width: 200px;
        height: 100%;
        border-radius: 0;
    }

    div#centre aside.active {
        left: 0;
    }

    #overlay.active {
        display: block;
    }

    div#centre main {
        margin-left: 0;
    }

    section#produit div.service,
    section#LocationM div.locase,
    section#achatVenteM div.achatvente,
    section#VenteVoiture div.voiture,
    section#achatVenteP div.parcelle {
        flex: 1 1 100%;
        max-width: 100%;
    }

    #imagePrincipale {
        height: 200px;
        background-size: contain;
    }

    section#presentation img {
        width: 90%;
    }

    h1 {
        font-size: 2em;
    }
}