/* --- CSS COMPLET PROFESSIONNEL --- */

/* Noir / Gris clair / Blanc - VERSION MOBILE CORRIGÉE */



* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



:root {

  --primary-color: #000000;

  --accent-color: #222222;

  --text-color: #1a1a1a;

  --text-light: #555555;

  --text-muted: #888888;

  --bg-light: #f8f9fa;

  --bg-white: #ffffff;

  --border-color: #e5e5e5;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);

  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);

  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.12);

  --transition: all 0.3s ease;

  --radius: 12px;

  --radius-sm: 8px;

}



html {

  scroll-behavior: smooth;

  -webkit-text-size-adjust: 100%;

}



body {

  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  color: var(--text-color);

  background: var(--bg-white);

  line-height: 1.7;

  font-size: 16px;

  overflow-x: hidden;

}



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



.container {

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 16px;

}



h1, h2, h3, h4 {

  font-weight: 700;

  line-height: 1.3;

  color: var(--primary-color);

}



h1 { font-size: 42px; }

h2 { font-size: 32px; margin-bottom: 14px; }

h3 { font-size: 20px; }

h4 { font-size: 17px; }



p { color: var(--text-light); }



/* ========== HEADER & NAV ========== */

.header {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  background: rgba(255, 255, 255, 0.98);

  backdrop-filter: blur(10px);

  box-shadow: var(--shadow-sm);

  z-index: 1000;

  transition: var(--transition);

  height: 70px;

}



.navbar-container {

  display: flex;

  justify-content: space-between;

  align-items: center;

  height: 100%;

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 16px;

}



.navbar-logo {

  display: flex;

  align-items: center;

  gap: 10px;

  font-weight: 700;

  color: var(--primary-color);

  text-decoration: none;

  font-size: 18px;

  z-index: 1001;

}



.logo-icon {

  width: 40px;

  height: 40px;

  background: var(--primary-color);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  color: white;

  font-size: 20px;

}



.logo-img {

  height: 50px;

  width: auto;

  object-fit: contain;

}



/* Navigation Menu */

.nav-menu {
  display: none; /* Cela cache totalement les liens sur mobile */
}

.nav-menu.active {

  opacity: 1;

  visibility: visible;

  display: flex;

  pointer-events: auto;

}



.nav-menu li {

  width: 100%;

  max-width: 300px;

  text-align: center;

  margin-bottom: 8px;

}



.nav-menu li a {

  display: block;

  padding: 16px 24px;

  color: var(--text-color);

  text-decoration: none;

  font-weight: 500;

  font-size: 18px;

  border-radius: var(--radius-sm);

  transition: var(--transition);

}



.nav-menu li a:hover {

  background: var(--bg-light);

}



.nav-menu li a.btn-call {

  background: var(--primary-color);

  color: white !important;

  margin-top: 10px;

}



.nav-menu li a.btn-call:hover {

  background: var(--accent-color);

}



/* ========== HERO SECTION ========== */

.hero {

  margin-top: 70px;

  min-height: auto;

  padding: 80px 20px;

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);

  overflow: hidden;

}



.hero::before {

  content: '';

  position: absolute;

  inset: 0;

  background: url('https://images.pexels.com/photos/1571460/pexels-photo-1571460.jpeg?auto=compress&cs=tinysrgb&w=800') center/cover;

  opacity: 0.1;

}



.hero-overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.7) 100%);

}



.hero-content {

  position: relative;

  z-index: 3;

  max-width: 100%;

  width: 100%;

  padding: 0;

  display: flex;

  flex-direction: column;

  align-items: center;

}



.hero-title {

  font-size: 28px;

  margin-bottom: 16px;

  line-height: 1.2;

  color: white;

}



.hero-title span {

  color: #d4d4d4;

}



.hero-subtitle {

  font-size: 16px;

  margin-bottom: 24px;

  color: rgba(255,255,255,0.85);

}



.hero-badges {

  display: flex;

  justify-content: center;

  gap: 10px;

  margin-bottom: 24px;

  flex-wrap: wrap;

}



.badge {

  background: rgba(255,255,255,0.1);

  backdrop-filter: blur(10px);

  padding: 8px 14px;

  border-radius: 50px;

  font-size: 12px;

  border: 1px solid rgba(255,255,255,0.15);

  color: white;

}



.btn {

  padding: 14px 24px;

  border-radius: var(--radius-sm);

  font-weight: 600;

  cursor: pointer;

  transition: var(--transition);

  text-decoration: none;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  border: none;

  font-size: 14px;

  width: 100%;

  max-width: 280px;

}



.btn-primary {

  background: white;

  color: var(--primary-color);

}



.btn-outline {

  background: transparent;

  color: white;

  border: 2px solid rgba(255,255,255,0.4);

}



.hero-buttons {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 12px;

  width: 100%;

}



/* ========== SECTIONS ========== */

.section-header {

  text-align: center;

  max-width: 100%;

  margin: 0 auto 40px;

  padding: 0 10px;

}



.section-subtitle {

  color: var(--text-muted);

  font-size: 12px;

  text-transform: uppercase;

  letter-spacing: 2px;

  margin-bottom: 10px;

  font-weight: 600;

}



.section-title {

  font-size: 26px;

}



/* Why Us */

.why-us {

  padding: 60px 0;

  background: var(--bg-white);

}



.why-grid {

  display: grid;

  grid-template-columns: 1fr;

  gap: 20px;

}



.why-card {

  text-align: center;

  padding: 30px 20px;

  background: var(--bg-light);

  border-radius: var(--radius);

  transition: var(--transition);

}



.why-icon {

  width: 60px;

  height: 60px;

  background: var(--primary-color);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 0 auto 16px;

  font-size: 24px;

}



/* Services */

.services {

  padding: 60px 0;

  background: var(--bg-light);

}



.services-grid {

  display: grid;

  grid-template-columns: 1fr;

  gap: 20px;

}



.service-card {

  background: var(--bg-white);

  padding: 30px 20px;

  border-radius: var(--radius);

  transition: var(--transition);

  border: 1px solid var(--border-color);

}



.service-icon {

  font-size: 36px;

  margin-bottom: 16px;

  display: block;

}



/* Portfolio */

.portfolio {

  padding: 60px 0;

  background: var(--bg-white);

}



.portfolio-grid {

  display: grid;

  grid-template-columns: 1fr;

  gap: 20px;

}



.portfolio-item {

  position: relative;

  border-radius: var(--radius);

  overflow: hidden;

  aspect-ratio: 16/9;

}



.portfolio-item img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.portfolio-overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.8) 100%);

  opacity: 0;

  transition: var(--transition);

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  padding: 20px;

}



.portfolio-item:hover .portfolio-overlay {

  opacity: 1;

}



.portfolio-overlay h4 {

  color: white;

  font-size: 18px;

}



.portfolio-overlay p {

  color: rgba(255,255,255,0.8);

  font-size: 14px;

}



/* Testimonials */

.testimonials {

  padding: 60px 0;

  background: var(--bg-light);

}



.testimonials-grid {

  display: grid;

  grid-template-columns: 1fr;

  gap: 20px;

}



.testimonial-card {

  background: var(--bg-white);

  padding: 24px;

  border-radius: var(--radius);

  box-shadow: var(--shadow-sm);

}



.testimonial-stars {

  color: #fbbf24;

  font-size: 16px;

  margin-bottom: 16px;

}



.testimonial-text {

  font-style: italic;

  font-size: 14px;

  margin-bottom: 20px;

}



.testimonial-author {

  display: flex;

  align-items: center;

  gap: 12px;

}



.testimonial-avatar {

  width: 44px;

  height: 44px;

  background: var(--primary-color);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  color: white;

  font-weight: 700;

  font-size: 16px;

}



.testimonial-info h5 {

  font-size: 15px;

  margin-bottom: 2px;

}



.testimonial-info span {

  font-size: 13px;

  color: var(--text-muted);

}



/* ========== CONTACT FORM ========== */

.contact-section {

  padding: 60px 0;

  background: var(--bg-white);

}



.contact-wrapper {

  display: flex;

  flex-direction: column;

  gap: 40px;

}



.contact-info {

  padding-right: 0;

  text-align: center;

}



.contact-info h2 {

  margin-bottom: 16px;

}



.contact-info > p {

  margin-bottom: 30px;

}



.contact-details {

  display: flex;

  flex-direction: column;

  gap: 20px;

}



.contact-item {

  display: flex;

  align-items: center;

  gap: 14px;

  text-align: left;

}



.contact-icon {

  width: 44px;

  height: 44px;

  background: var(--bg-light);

  border-radius: var(--radius-sm);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 18px;

  flex-shrink: 0;

}



/* Formulaire */

.contact-form {

  background: var(--bg-light);

  padding: 24px;

  border-radius: var(--radius);

  border: 1px solid var(--border-color);

}



.form-row {

  display: flex;

  flex-direction: column;

  gap: 0;

}



.form-group {

  margin-bottom: 18px;

}



.form-group label {

  display: block;

  margin-bottom: 8px;

  font-weight: 600;

  font-size: 14px;

}



.form-group input,

.form-group select,

.form-group textarea {

  width: 100%;

  padding: 12px 14px;

  border: 1px solid var(--border-color);

  border-radius: var(--radius-sm);

  background: var(--bg-white);

  color: var(--text-color);

  font-size: 16px;

  font-family: inherit;

  transition: var(--transition);

}



.form-group textarea {

  min-height: 100px;

}



/* File Upload */

.file-upload-area {

  border: 2px dashed var(--border-color);

  border-radius: var(--radius-sm);

  padding: 24px;

  text-align: center;

  cursor: pointer;

  transition: var(--transition);

  background: var(--bg-white);

}



.file-upload-icon {

  font-size: 28px;

  margin-bottom: 8px;

}



.file-upload-text {

  font-size: 13px;

  color: var(--text-muted);

}



.file-list {

  margin-top: 12px;

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

}



.file-item {

  display: flex;

  align-items: center;

  gap: 6px;

  background: var(--bg-white);

  padding: 6px 12px;

  border-radius: 50px;

  font-size: 12px;

  border: 1px solid var(--border-color);

}



.form-submit .btn {

  width: 100%;

  padding: 16px;

}



.form-note {

  text-align: center;

  margin-top: 14px;

  font-size: 12px;

  color: var(--text-muted);

}



/* Messages */

.form-message {

  padding: 14px;

  border-radius: var(--radius-sm);

  margin-bottom: 18px;

  font-size: 14px;

  display: none;

}



.form-message.success {

  display: block;

  background: #d4edda;

  color: #155724;

  border: 1px solid #c3e6cb;

}



.form-message.error {

  display: block;

  background: #f8d7da;

  color: #721c24;

  border: 1px solid #f5c6cb;

}



/* ========== FOOTER ========== */

.footer {

  background: var(--primary-color);

  color: white;

  padding: 50px 0 24px;

}



.footer-grid {

  display: flex;

  flex-direction: column;

  gap: 30px;

  margin-bottom: 40px;

  text-align: center;

}



.footer-brand .navbar-logo {

  justify-content: center;

  margin-bottom: 16px;

}



.footer-brand .logo-img {

  height: 45px;

}



.footer-brand p {

  color: rgba(255,255,255,0.7);

  font-size: 14px;

}



.footer h4 {

  color: white;

  font-size: 17px;

  margin-bottom: 16px;

  position: relative;

  padding-bottom: 10px;

}



.footer h4::after {

  content: '';

  position: absolute;

  bottom: 0;

  left: 50%;

  transform: translateX(-50%);

  width: 40px;

  height: 2px;

  background: white;

}



.footer-links {

  list-style: none;

}



.footer-links li {

  margin-bottom: 10px;

}



.footer-links a {

  color: rgba(255,255,255,0.7);

  text-decoration: none;

  font-size: 14px;

  transition: var(--transition);

}



.footer-links a:hover {

  color: white;

}



.footer-contact p {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  color: rgba(255,255,255,0.7);

  margin-bottom: 12px;

  font-size: 14px;

}



.footer-social {

  display: flex;

  justify-content: center;

  gap: 10px;

  margin-top: 16px;

}



.social-link {

  width: 38px;

  height: 38px;

  background: rgba(255,255,255,0.1);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  color: white;

  text-decoration: none;

  font-size: 16px;

  transition: var(--transition);

}



.footer-bottom {

  border-top: 1px solid rgba(255,255,255,0.1);

  padding-top: 20px;

  text-align: center;

  color: rgba(255,255,255,0.5);

  font-size: 12px;

}



/* ========== ANIMATIONS ========== */

.why-card, .service-card, .portfolio-item, .testimonial-card {

  opacity: 0;

  transform: translateY(20px);

  transition: all 0.5s ease;

}



.why-card.visible, .service-card.visible, .portfolio-item.visible, .testimonial-card.visible {

  opacity: 1;

  transform: translateY(0);

}



/* ========== TABLETTE (768px et plus) ========== */

@media (min-width: 768px) {

  .container {

    padding: 0 24px;

  }

 

  h1 { font-size: 48px; }

  h2 { font-size: 36px; }

  h3 { font-size: 22px; }

 

  .navbar-logo {

    font-size: 20px;

  }

 

  .logo-img {

    height: 55px;

  }

 

  /* Menu desktop */

  .menu-toggle {

    display: none !important;

  }

 

  @media (min-width: 768px) {
  .nav-menu {
    display: flex; /* Le menu réapparaît sur tablette et ordinateur */
    list-style: none;
    gap: 20px;
  }
}

 

  .nav-menu li {

    width: auto;

    max-width: none;

    margin-bottom: 0;

  }

 

  .nav-menu li a {

    display: inline-block;

    padding: 10px 14px;

    font-size: 15px;

    border-radius: var(--radius-sm);

  }

 

  .nav-menu li a.btn-call {

    margin-top: 0;

    padding: 10px 18px;

  }

 

  /* Hero */

  .hero {

    min-height: 600px;

    padding: 100px 40px;

  }

 

  .hero-title {

    font-size: 42px;

  }

 

  .hero-subtitle {

    font-size: 18px;

  }

 

  .hero-badges {

    gap: 16px;

  }

 

  .badge {

    padding: 10px 18px;

    font-size: 13px;

  }

 

  .btn {

    width: auto;

    max-width: none;

    padding: 14px 28px;

    font-size: 15px;

  }

 

  .hero-buttons {

    flex-direction: row;

    justify-content: center;

    gap: 16px;

  }

 

  /* Sections */

  .section-header {

    max-width: 600px;

    margin-bottom: 50px;

  }

 

  .section-subtitle {

    font-size: 13px;

  }

 

  .section-title {

    font-size: 34px;

  }

 

  .why-us, .services, .portfolio, .testimonials, .contact-section {

    padding: 80px 0;

  }

 

  /* Grilles */

  .why-grid {

    grid-template-columns: repeat(2, 1fr);

  }

 

  .services-grid {

    grid-template-columns: repeat(2, 1fr);

  }

 

  .portfolio-grid {

    grid-template-columns: repeat(2, 1fr);

  }

 

  .testimonials-grid {

    grid-template-columns: repeat(2, 1fr);

  }

 

  /* Contact */

  .contact-wrapper {

    display: grid;

    grid-template-columns: 1fr 1.2fr;

    gap: 50px;

    align-items: start;

  }

 

  .contact-info {

    text-align: left;

    padding-right: 30px;

  }

 

  .contact-item {

    text-align: left;

  }

 

  .contact-icon {

    width: 48px;

    height: 48px;

  }

 

  .contact-form {

    padding: 36px;

  }

 

  .form-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 16px;

  }

 

  /* Footer */

  .footer {

    padding: 70px 0 30px;

  }

 

  .footer-grid {

    display: grid;

    grid-template-columns: 1.5fr 1fr 1fr 1fr;

    gap: 30px;

    text-align: left;

  }

 

  .footer h4::after {

    left: 0;

    transform: none;

  }

 

  .footer-contact p {

    justify-content: flex-start;

  }

 

  .footer-social {

    justify-content: flex-start;

  }

}



/* ========== DESKTOP ========== */

@media (min-width: 1024px) {

  h1 { font-size: 52px; }

  h2 { font-size: 40px; }



  .hero-title {

    font-size: 48px;

  }



  .services-grid {

    grid-template-columns: repeat(3, 1fr);

  }



  .portfolio-grid {

    grid-template-columns: repeat(3, 1fr);

  }



  .why-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}



  .testimonials-grid {

    grid-template-columns: repeat(3, 1fr);

  }



  .nav-menu {

    gap: 0;

  }



  .nav-menu li {

    margin-left: 2px;

  }



  .nav-menu li a {

    padding: 12px 18px;

    font-size: 15px;

  }

}



/* ========== GRAND ÉCRAN ========== */

@media (min-width: 1200px) {

  .container {

    max-width: 1200px;

    padding: 0 24px;

  }



  h1 { font-size: 56px; }

  h2 { font-size: 42px; }



  .hero-title {

    font-size: 52px;

  }



  .nav-menu {

    gap: 4px;

  }



  .nav-menu li {

    margin-left: 6px;

  }



  .nav-menu li a {

    padding: 12px 22px;

    font-size: 16px;

  }

}