/* style.css */

/* Variables CSS pour les couleurs et transitions */
:root {
  --primary: #0f2027;                  /* Couleur primaire du dégradé */
  --secondary: #2c5364;                /* Couleur secondaire du dégradé */
  --accent: #E07A5F;                   /* Couleur d’accentuation */
  --dark-bg: rgba(27,38,44,0.9);       /* Fond sombre pour sections */
  --dark-bg2: rgba(44,83,100,0.9);     /* Fond sombre secondaire */
  --light-text: #fff;                  /* Couleur du texte clair */
  --radius: 10px;                      /* Rayon de bordure global */
  --transition: 0.3s cubic-bezier(.47,1.64,.41,.8); /* Durée et easing */
}

/* Style général de la page */
body {
  font-family: 'Segoe UI', Arial, Helvetica, sans-serif; /* Police de base */
  background: linear-gradient(135deg, var(--primary), var(--secondary)); /* Fond en dégradé */
  color: var(--light-text);           /* Texte clair */
  min-height: 100vh;                  /* Hauteur minimale pour tout l’écran */
}

/* Container centré horizontalement */
.container {
  width: 90%;                         /* 90% de la largeur de la fenêtre */
  max-width: 1200px;                  /* Largeur max */
  margin: auto;                       /* Centrage horizontal */
}

/* HEADER fixe en haut */
header {
  position: fixed;                    /* Fixe en haut lors du scroll */
  top: 0; left: 0;                    /* Position en haut à gauche */
  width: 100%;                        /* Prend toute la largeur */
  background: rgba(0,0,0,0.5);        /* Fond semi‑transparent */
  padding: 1rem 0;                    /* Padding vertical */
  z-index: 1000;                      /* Au‑dessus du contenu */
}

/* Wrapper pour logo et nav */
.nav-wrapper {
  display: flex;                      /* Flexbox pour alignement */
  justify-content: space-between;    /* Espacement entre logo et nav */
  align-items: center;               /* Alignement vertical */
}

/* Logo (image + texte) */
.logo {
  display: flex;                      /* Flex pour image + span */
  align-items: center;               /* Centre verticalement */
  gap: 0.5rem;                        /* Espace entre éléments */
  text-decoration: none;              /* Pas de soulignement */
}
.logo img {
  height: 60px;                       /* Hauteur de l’image */
}
.logo span {
  font-size: 1.75rem;                 /* Taille du texte */
  font-family: 'Montserrat', sans-serif; /* Police Montserrat */
  font-weight: 900;                   /* Poids ultra-bold */
  color: var(--accent);               /* Couleur d’accent */
  letter-spacing: 1px;                /* Espacement des lettres */
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3); /* Ombre de texte */
}

/* Navigation principale */
nav ul {
  display: flex;                      /* Menu horizontal */
  gap: 2rem;                          /* Écart entre items */
  list-style: none;                   /* Sans puces */
}
nav a {
  color: var(--light-text);           /* Texte clair */
  text-decoration: none;              /* Pas de soulignement */
  font-weight: 600;                   /* Semi-bold */
  position: relative;                 /* Pour pseudo-élément */
  font-family: 'Montserrat', sans-serif; /* Police Montserrat */
}
nav a::after {
  content: "";                        /* Ligne animée */
  position: absolute; left: 0; bottom: -4px; /* Sous chaque lien */
  width: 0; height: 2px;              /* Hauteur 2px, largeur animée */
  background: var(--accent);          /* Couleur d’accent */
  transition: width var(--transition);/* Animation au hover */
}
nav a:hover::after {
  width: 100%;                        /* Ligne pleine largeur au hover */
}

/* Burger menu (mobile) */
.burger {
  display: none;                      /* Caché par défaut */
  flex-direction: column;             /* Barres empilées */
  gap: 5px;                           /* Espacement entre barres */
  cursor: pointer;                    /* Curseur pointeur */
}
.burger span {
  width: 25px; height: 3px;           /* Dimensions des barres */
  background: var(--light-text);      /* Couleur des barres */
}

/* Section HERO */
.hero {
  position: relative;                 /* Pour overlay centré */
  height: 100vh;                      /* Hauteur plein écran */
  background-size: cover;             /* Couvre tout */
  background-position: center;        /* Centré */
  transition: background-image 0.7s cubic-bezier(.4,0,.2,1); /* Transition d’image */
  background-image: url('photofond1.jpg'); /* Image de fond initiale */
}
.hero-overlay {
  position: absolute; top: 50%; left: 50%; /* Centre vertical/horizontal */
  transform: translate(-50%, -50%);  /* Ajuste le positionnement */
  text-align: center;                 /* Texte centré */
  padding: 1rem;                      /* Padding interne */
}
.hero-overlay h1 {
  font-family: 'Montserrat', sans-serif; /* Police Montserrat */
  font-size: 3rem;                    /* Taille du titre */
  font-weight: 900;                   /* Ultra-bold */
  color: #fff;                        /* Blanc */
  letter-spacing: 2px;                /* Espacement des lettres */
  margin-bottom: 2rem;                /* Espace sous le titre */
  text-shadow: 0 4px 24px rgba(0,0,0,0.23); /* Ombre portée */
}
.hero-overlay .subtitle {
  font-size: 1.25rem;                 /* Taille du sous-titre */
  font-family: 'Segoe UI', sans-serif;/* Police Segoe UI */
  color: #fff;                        /* Blanc */
  max-width: 700px;                   /* Largeur maximale */
  margin: 0 auto 1.5rem;              /* Centre horizontal et marge bas */
  text-shadow: 0 1px 6px rgba(0,0,0,0.12); /* Ombre légère */
  line-height: 1.7;                   /* Interligne */
}
@media (max-width:600px) {
  .hero-overlay h1 { font-size: 1.55rem; } /* Plus petit texte sur mobile */
  .hero-overlay .subtitle { font-size: 1rem; }
}

/* Grille équipe */
.team-grid {
  display: flex;                      /* Horizontal */
  justify-content: space-between;    /* Écart entre cartes */
  align-items: flex-start;           /* Alignement en haut */
  gap: 1.5rem;                        /* Espacement */
  margin-top: 2.2rem;                /* Marge haute */
  width: 100%;                        /* Pleine largeur */
}
.team-card {
  display: flex; flex-direction: column; /* Carte en colonne */
  align-items: center;                 /* Centré horizontalement */
  flex: 1 1 0;                         /* Flex grow/shrink */
  margin: 0 0.5rem;                    /* Marges latérales */
}
.team-card img {
  width: 100%;                         /* Pleine largeur */
  max-width: 270px;                    /* Largeur max */
  min-width: 180px;                    /* Largeur min */
  height: 320px;                       /* Hauteur fixe */
  object-fit: cover;                   /* Recadrage */
  border-radius: 12px;                 /* Arrondi */
  margin-bottom: 1rem;                 /* Marge basse */
  box-shadow: 0 2px 24px rgba(30,40,50,0.09); /* Ombre */
  border: 3.5px solid #E07A5F;         /* Bordure accentuée */
  background: #eee;                    /* Fond fallback */
}
.team-nom {
  font-family: 'Montserrat', sans-serif; /* Police Montserrat */
  font-size: 1.18rem;                  /* Taille texte */
  font-weight: 700;                    /* Bold */
  color: #2c5364;                      /* Couleur secondaire */
  margin-top: 0.2rem;                  /* Marge haute */
}
.team-poste {
  font-family: 'Montserrat', sans-serif;
  color: #E07A5F;                      /* Accent */
  font-size: 1rem;                     /* Taille normale */
  margin-bottom: 0.2rem;               /* Marge basse */
}
.team-desc {
  text-align: center;                  /* Centré */
  color: white;                        /* Blanc */
  font-size: 1rem;                     /* Taille texte */
  font-family: 'Lora', serif;          /* Police Lora */
  margin: 0.15rem 0 0.8rem;            /* Marges verticales */
  min-height: 80px;                    /* Hauteur min */
  max-width: 260px;                    /* Largeur max */
}
@media(max-width:900px){
  .team-grid { flex-direction: column; align-items: center; } /* Colonne mobile */
  .team-card { width: 95%; max-width: 350px; }
  .team-card img { max-width: 340px; }
}

/* Section À PROPOS */
.about {
  padding: 6rem 0 2.5rem;             /* Padding vertical */
  background: var(--dark-bg);         /* Fond sombre */
}
.about h2 {
  text-align: center;                 /* Centré */
  color: var(--accent);               /* Accent */
  font-size: 2.2rem;                  /* Taille titre */
  font-family: 'Montserrat', sans-serif;
  margin-bottom: 1.2rem;              /* Marge basse */
}
.about p {
  text-align: center;                 /* Centré */
  font-size: 1.1rem;                  /* Taille texte */
  margin-bottom: 1.7rem;              /* Marge basse */
  color: #f2f2f2;                     /* Gris clair */
}

/* Section SERVICES */
.services {
  padding: 6rem 0;                     /* Padding vertical */
  background: var(--dark-bg2);         /* Fond sombre secondaire */
}
.services h2 {
  text-align: center;                  /* Centré */
  margin-bottom: 2rem;                 /* Marge basse */
  font-family: 'Montserrat', sans-serif;
}
.services-grid {
  display: grid;                       
  grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); /* Responsive */
  gap: 2rem;                           /* Espacement */
}
.service-card {
  background: #fff; color: #000;       /* Carte blanche */
  border-radius: var(--radius);        /* Arrondi */
  overflow: hidden;                    
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: transform var(--transition);
}
.service-card:hover {
  transform: translateY(-5px);         /* Lève la carte au hover */
}
.service-card img {
  width: 100%; height: 180px;           /* Dimensions de l’image */
  object-fit: cover;                    
}
.service-card h3 {
  margin: 1rem;                        
  color: var(--secondary);             
  font-family: 'Montserrat', sans-serif;
}
.service-card p {
  margin: 0 1rem 1rem;                 
}

/* SECTION PROJETS PHARES */
.projets-premium {
  padding: 6rem 0 5rem;               /* Padding vertical */
  background: #253344;                /* Fond foncé */
}
.projets-premium h2 {
  text-align: center;                 
  font-size: 2.2rem;                  
  color: var(--accent);               
  margin-bottom: 2.5rem;              
  font-family: 'Montserrat', sans-serif;
}
.projets-flex {
  display: flex;                      
  flex-wrap: wrap;                    
  gap: 3rem;                          
  justify-content: center;            
}
.proj-card {
  background: #fff;                  
  border-radius: 18px;               
  box-shadow: 0 8px 38px rgba(50,62,85,0.07);
  max-width: 440px;                  
  min-width: 315px;                  
  flex: 1 1 320px;                   
  display: flex;                     
  flex-direction: column;            
  align-items: center;               
  margin-bottom: 2.5rem;             
  transition: transform 0.21s, box-shadow 0.22s;
  border: 2px solid #e8e8e8;         
}
.proj-card:hover {
  transform: scale(1.025) translateY(-8px); /* Effet hover */
  box-shadow: 0 16px 44px rgba(60,80,110,0.14);
}
.proj-img {
  width: 100%; height: 190px;          /* Visuel projet */
  background-size: cover;             
  background-position: center;        
  border-radius: 16px 16px 0 0;       
  border-bottom: 3px solid #E07A5F;   
}
.proj-desc {
  padding: 2.1rem 1.5rem 1.2rem;       
  text-align: left;                   
}
.proj-desc h3 {
  color: #0f2027;                     
  font-size: 1.18rem;                 
  margin-bottom: 0.65rem;             
  font-weight: 800;                   
  font-family: 'Montserrat', sans-serif;
}
.proj-paragraph {
  font-family: 'Lora', serif;         
  font-size: 1.08rem;                 
  line-height: 1.72;                  
  color: #32323a;                     
}
.proj-mission {
  font-weight: bold;                  
  font-style: italic;                 
  color: #E07A5F;                     
}
.proj-value {
  color: #2c5364;                     
  font-weight: 600;                   
}

/* SECTION CONTACT */
.contact {
  padding: 6rem 0 4rem;                
  background: var(--primary);         
}
.contact h2 {
  text-align: center;                 
  color: var(--accent);               
  margin-bottom: 2rem;                
  font-family: 'Montserrat', sans-serif;
}
.contact-cards.only-main-contact {
  display: flex;                      
  flex-wrap: wrap;                    
  justify-content: center;            
  gap: 2.2rem;                        
  align-items: center;                
}
.contact-info {
  background: #fff; color: #253344;   
  border-radius: 14px;                
  padding: 1.1rem 2.2rem;             
  display: flex; align-items: center; 
  gap: 0.8rem;                        
  box-shadow: 0 2px 12px rgba(60,80,110,0.11);
}
.contact-info i {
  color: var(--accent);               
  font-size: 1.22rem;                 
}

/* FOOTER */
footer {
  text-align: center;                 
  padding: 2rem 0;                    
  background: var(--secondary);       
  color: #fff;                        
}

/* Responsive navigation (mobile) */
@media(max-width: 768px) {
  .burger {
    display: flex;                     /* Affiche le burger */
  }
  nav ul {
    position: absolute;                /* Positionné sous header */
    top: 100%; left: 0; right: 0;      
    background: rgba(0,0,0,0.85);      
    flex-direction: column;            
    max-height: 0; overflow: hidden;   
    transition: max-height var(--transition);
  }
  nav ul.open {
    max-height: 350px;                 /* Menu déployé */
  }
}