/* Variables */
:root {
  --primary-color: #bfa16d;
  --secondary-color: #f7eddd;
  --accent-color: #7b4f3d;
  --text-color: #2a2a2a;
  --btn-color: #bfa16d;
  --btn-hover: #d4b97a;
}

/* Reset global */
* { margin:0; padding:0; box-sizing:border-box; font-family:'Roboto',sans-serif; }
body { color: var(--text-color); background: var(--secondary-color); line-height:1.6; overflow-x:hidden; padding-top:80px; }

/* Header */
header { position:fixed; top:0; width:100%; background:#f7eddd; z-index:600; }
header nav { display:flex; justify-content:space-between; align-items:center;backdrop-filter:blur(10px); box-shadow:0 4px 20px rgba(0,0,0,0.1);}
header .logo img { height:100px; width:auto; box-shadow:none; }
header ul { list-style:none; display:flex; gap:30px; }
header ul li a { text-decoration:none; color:var(--text-color); font-weight:500; position:relative; transition:0.3s; }
header ul li a.btn { background-color: var(--btn-color); color:white; padding:12px 25px; border-radius:25px; font-weight:bold; box-shadow:0 0 15px rgba(191,161,109,0.5); transition:all 0.3s; }
header ul li a.btn:hover { transform: translateY(-3px) scale(1.05); box-shadow:0 0 25px rgba(191,161,109,0.8); background-color: var(--btn-hover); }

/* Hero */
.hero { display:flex; align-items:center; justify-content:center; padding:150px 50px; text-align:center; position:relative; background:url('SAAS.JPG') center/cover no-repeat; border-radius:0 0 50px 50px; color:white; overflow:hidden;}
.hero::before { content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.4); z-index:1; }
.hero-container { position:relative; z-index:2; max-width:900px; animation:fadeInUp 1.2s ease forwards; }
.hero-text h1 { font-size:3rem; margin-bottom:20px; line-height:1.2; color:#fff; }
.hero-text p { font-size:1.2rem; margin-bottom:30px; color:#fdfaf6; }
.launch-btn { background-color:var(--primary-color); color:white; padding:15px 35px; font-size:1.3rem; font-weight:bold; border-radius:50px; box-shadow:0 0 15px var(--btn-color); animation:pulse 2s infinite; transition: transform 0.3s, box-shadow 0.3s; }
.launch-btn:hover { transform:scale(1.1); box-shadow:0 0 30px var(--btn-color); }

/* Services */
.services { background: linear-gradient(135deg, #fff7e8, #f7e0c5); }
.services h2 { text-align:center; font-size:3rem; margin-bottom:40px; color:var(--primary-color); }
.service-intro { font-size:1.2rem; margin-bottom:50px; text-align:center; }
.service-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:30px; }
.card { padding:30px; border-radius:25px; color:white; text-align:center; box-shadow:0 12px 30px rgba(0,0,0,0.3); transition:0.4s; background:linear-gradient(135deg, #bfa16d, #7b4f3d); }
.card:hover { transform:translateY(-15px) scale(1.03); box-shadow:0 20px 40px rgba(0,0,0,0.5); background:linear-gradient(135deg, #d4b97a, #a15d42); }
.card h3 { font-size:1.8rem; margin-bottom:15px; }

/* About */
.about { background: linear-gradient(135deg, #f7e0c5, #f0d6b2); }
.about-container { display:flex; align-items:center; justify-content:space-between;  padding:50px 50px; flex-wrap:wrap; }
.about-text { flex:1; min-width:300px; text-align:left; animation:fadeInUp 1s ease forwards; }
.about-image { flex:1; min-width:300px; text-align:center; }
.about-image img { max-width:100%; border-radius:25px; box-shadow:0 20px 30px rgba(0,0,0,0.25); transition:0.5s; }
.about-image img:hover { transform:scale(1.05); box-shadow:0 20px 40px rgba(0,0,0,0.35); }

/* Mission */
/* ================= PREMIUM SOLUTIONS DESIGN ================= */
/* ================= MISSION SECTION FINAL ================= */
/* ================= MISSION SECTION FINAL ================= */

.mission-container-full {
  width: 100%;
  padding: 80px 50px;
  background: #1e1e1e; /* arrière-plan sombre */
  color: #fff; /* texte clair */
}


.mission-title {
  font-size: 3rem;
  color: var(--primary-color);
  margin-bottom: 20px;
}

.mission-intro {
  font-size: 1.1rem;
  margin-bottom: 50px;
  max-width: 700px;
}

/* ===== GRID 2 BLOCS PAR LIGNE ===== */

.mission-double {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-bottom: 40px;
}

/* ===== BLOCS SOLUTIONS ===== */

.double-block {
  position: relative;
  min-height: 260px;
  border-radius: 20px;
  overflow: hidden;
  padding: 30px;
  display: flex;
  align-items: flex-start;
  color: #ffffff;
  transition: all 0.4s ease;
  box-shadow: 0 15px 35px rgba(0,0,0,0.25);
  background-size: cover;
  background-position: center;
}

/* Overlay dégradé premium */
.double-block .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.85) 20%,
    rgba(0,0,0,0.5) 50%,
    rgba(0,0,0,0.1) 100%
  );
}


/* Contenu */
.double-block .block-content {
  position: relative;
  z-index: 2;
}

.double-block h3 {
  font-size: 1.5rem;
  margin-bottom: 12px;
  font-weight: 600;
}

.double-block p {
  font-size: 0.95rem;
  margin-bottom: 12px;
  opacity: 0.95;
}

.double-block ul {
  list-style: none;
  padding: 0;
  font-size: 0.9rem;
}

.double-block ul li {
  margin-bottom: 8px;
  padding-left: 18px;
  position: relative;
}

.double-block ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #00bcd4;
  font-weight: bold;
}

/* Hover élégant */
.double-block:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(0,0,0,0.35);
}

/* ===== MAINTENANCE = MEME STYLE ===== */

.maintenance-block {
  min-height: 260px;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 900px) {
  .mission-double {
    grid-template-columns: 1fr;
  }
}


/* FORMULAIRE */
.form-section { padding:120px 50px 80px; background: linear-gradient(135deg,#fff7e8,#f7e0c5); }
.form-section .container { max-width:700px; margin:0 auto; background:#fffaf0; padding:40px 30px; border-radius:20px; box-shadow:0 12px 30px rgba(0,0,0,0.2); }
.form-section h2 { font-size:2.5rem; margin-bottom:20px; color:var(--primary-color); text-align:center; }
.form-section p { font-size:1.1rem; margin-bottom:30px; text-align:center; color:#2a2a2a; }
.form-section label { display:block; margin-bottom:8px; font-weight:500; color:var(--text-color); }
.form-section input[type="text"],
.form-section input[type="file"],
.form-section select,
.form-section textarea { width:100%; padding:12px 15px; margin-bottom:20px; border-radius:10px; border:1px solid #ccc; font-size:1rem; }
.form-section textarea { resize:none; }
.form-section .submit-btn { display:block; width:100%; padding:15px; background:var(--primary-color); color:#fff; font-weight:bold; border:none; border-radius:50px; font-size:1.2rem; cursor:pointer; box-shadow:0 8px 25px rgba(191,161,109,0.5); transition:all 0.3s; }
.form-section .submit-btn:hover { background:var(--btn-hover); transform:scale(1.03); box-shadow:0 12px 30px rgba(191,161,109,0.7); }

/* Responsive */
@media(max-width:900px) {
  .mission-double {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-bottom: 40px;
}

  .single-block .block-image img, .form-section .container { max-width:100%; }
}

/* Animations */
.fade-slide { opacity:0; transform:translateY(30px); transition: all 0.8s ease; }
.fade-slide.show { opacity:1; transform:translateY(0); }
@keyframes fadeInUp {0%{opacity:0;transform:translateY(50px);}100%{opacity:1;transform:translateY(0);}}
@keyframes pulse {0%,100%{box-shadow:0 0 10px var(--btn-color);}50%{box-shadow:0 0 30px var(--btn-color);}}
footer { text-align:center; padding:40px 0; background:linear-gradient(135deg,#7b4f3d,#bfa16d); color:#fff8e7; font-weight:500; letter-spacing:1px; }
/* Wrapper pour gérer largeur et alignement */
/* Wrapper pour les boutons */
.custom-file-input-wrapper {
  display: flex;
  flex-direction: column; /* empilement vertical */
  align-items: flex-start; /* PDF à gauche */
  margin-bottom: 40px; /* espace avec les champs supérieurs et inférieurs */
  gap: 20px; /* espace vertical entre PDF et Envoyer */
}

/* Bouton PDF */
.custom-file-input {
  width: 25%; /* quart du formulaire */
  position: relative;
  padding-bottom: 2%;
}

.custom-file-input input[type="file"] {
  opacity: 0;
  position: absolute;
  top:0; left:0; width:100%; height:100%;
  cursor: pointer;
}

.custom-file-input span {
  display: block;
  padding: 12px 15px;
  background: linear-gradient(135deg, #7b4f3d, #bfa16d); /* dégradé marron -> doré -> turquoise */
  color: #fff;
  font-weight: 600;
  border-radius: 50px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 6px 15px rgba(123,79,61,0.4);
  transition: all 0.3s;
}

.custom-file-input span:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(191,161,109,0.5);
}

/* Bouton normal (PAS d’animation par défaut) */
.submit-btn {
  opacity: 0.6;
  cursor: not-allowed;
  animation: none;
  transition: 0.3s ease;
}

/* Bouton activé (quand formulaire complet) */
.submit-btn.active {
  opacity: 1;
  cursor: pointer;
  animation: pulse 1.5s infinite;
}

/* Animation clignotement */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Responsive : sur petit écran */
@media (max-width: 900px) {
  .custom-file-input {
    width: 100%;
  }
  .submit-btn {
    width: 100%;
  }
}
/* Inverser image et texte sur desktop */
.double-block.reverse .block-content {
  order: 2;
}

.double-block.reverse {
  flex-direction: row-reverse; /* image à gauche, texte à droite */
}

/* Responsive : empilement normal sur mobile */
@media (max-width: 900px) {
  .double-block.reverse {
    flex-direction: column;
  }
  .double-block.reverse .block-content {
    order: 0;
  }
}

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

.footer {
  background: linear-gradient(135deg, #1a1a1a, #222);
  color: #fff;
  
  margin-top: 100px;
}

.footer-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.footer-left {
  flex: 1;
}

.footer-logo {
  width: 150px;
}

/* CENTER CONTACT */
.footer-center {
  flex: 1;
  text-align: center;
}

.contact-item {
  margin-bottom: 15px;
}

.contact-item i {
  font-size: 1.5rem;
  background: linear-gradient(135deg,#7b4f3d,#bfa16d,#00bcd4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 5px;
}

.contact-item p {
  margin: 0;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
}

/* RIGHT LINKS */
.footer-right {
  flex: 1;
  text-align: right;
  padding-right: 40px
}

.footer-right a {
  display: block;
  margin-bottom: 10px;
  text-decoration: none;
  color: #bfa16d;
  font-weight: 500;
  transition: all 0.4s ease;
}

.footer-right a:hover {
  color: #00bcd4;
  transform: translateX(-5px);
}

/* Bottom */
.footer-bottom {
  text-align: center;
  margin-top: 40px;
  
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 0.9rem;
  color: #aaa;
}

/* ================= MODAL ================= */

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(5px);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease;
  z-index: 9999;
}

.modal.active {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  background: #111;
  color: #fff;
  width: 600px;
  max-width: 90%;
  padding: 40px;
  border-radius: 20px;
  transform: translateY(40px);
  transition: all 0.4s ease;
  box-shadow: 0 20px 50px rgba(0,0,0,0.6);
}

.modal.active .modal-content {
  transform: translateY(0);
}

.modal-content h2 {
  margin-bottom: 20px;
  background: linear-gradient(135deg,#7b4f3d,#bfa16d,#00bcd4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.modal-content p {
  line-height: 1.7;
  margin-bottom: 15px;
  font-size: 0.95rem;
}

.close {
  position: absolute;
  right: 30px;
  top: 20px;
  font-size: 1.5rem;
  cursor: pointer;
  transition: 0.3s;
}

.close:hover {
  color: #00bcd4;
}
.footer-left img {
  width: 120px; /* taille actuelle du logo */
  height: auto;
  border-radius: 10px; /* si tu veux un léger arrondi */
  box-shadow: 0 0 20px rgba(191,161,109,0.7), /* glow doré */
              0 0 40px rgba(123,79,61,0.5),   /* glow marron */
              0 0 60px rgba(191,161,109,0.3); /* halo léger supplémentaire */
  transition: box-shadow 0.5s ease;
}

/* Optionnel : léger effet au hover */
.footer-left img:hover {
  box-shadow: 0 0 30px rgba(191,161,109,0.9),
              0 0 50px rgba(123,79,61,0.7),
              0 0 70px rgba(191,161,109,0.5);
}
.stats-section {
  display: flex;
  gap: 40px;
  margin: 50px 0;
  flex-wrap: wrap;
}

.stat {
  flex: 1;
  min-width: 200px;
  padding: 30px;
  background: rgba(255,255,255,0.05);
  border-radius: 15px;
  text-align: center;
  backdrop-filter: blur(10px);
  transition: 0.3s;
}

.stat:hover {
  transform: translateY(-5px);
  background: rgba(0,188,212,0.1);
}

.stat h3 {
  font-size: 2.5rem;
  background: linear-gradient(135deg,#bfa16d,#00bcd4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stat p {
  color: #ccc;
}
.maintenance-block {
  height: 400px;
  margin-bottom: 40px;
}

.maintenance-block p {
  margin-bottom: 15px;
  font-size: 1rem;
  opacity: 0.9;
}
/* ===== TITRE POURQUOI NOUS CHOISIR ===== */
.about h3 {
  font-size: 3rem; /* même taille que les autres titres principaux */
  margin-bottom: 20px;
  color: var(--primary-color); /* si tu veux garder la couleur principale du site */
}
/* ================= SUCCESS MODAL PREMIUM ================= */

.success-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease;
  z-index: 9999;
}

.success-modal.active {
  opacity: 1;
  visibility: visible;
}

.success-box {
  position: relative;
  width: 500px;
  max-width: 90%;
  padding: 50px 40px;
  border-radius: 25px;
  background: linear-gradient(135deg,#1a1a1a,#222);
  box-shadow: 
    0 0 30px rgba(191,161,109,0.3),
    0 0 60px rgba(123,79,61,0.2);
  text-align: center;
  transform: translateY(40px);
  transition: all 0.4s ease;
}

.success-modal.active .success-box {
  transform: translateY(0);
}

/* Croix fermer */
.close-success {
  position: absolute;
  top: 20px;
  right: 25px;
  font-size: 1.5rem;
  cursor: pointer;
  color: #bfa16d;
  transition: 0.3s;
}

.close-success:hover {
  color: #00bcd4;
}

/* Icône */
.success-icon i {
  font-size: 70px;
  margin-bottom: 25px;
  background: linear-gradient(135deg,#7b4f3d,#bfa16d,#00bcd4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Titre */
.success-box h2 {
  font-size: 2rem;
  margin-bottom: 15px;
  background: linear-gradient(135deg,#7b4f3d,#bfa16d,#00bcd4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Texte */
.success-box p {
  color: #ccc;
  font-size: 1rem;
  margin-bottom: 30px;
}

/* Bouton */
.success-box button {
  padding: 12px 30px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  font-weight: bold;
  background: linear-gradient(135deg,#7b4f3d,#bfa16d,#00bcd4);
  color: #fff;
  box-shadow: 0 8px 25px rgba(191,161,109,0.4);
  transition: 0.3s;
}

.success-box button:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 35px rgba(191,161,109,0.6);
}
/* ================= SUCCESS POPUP ================= */
.success-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(5px);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease;
  z-index: 9999;
}

.success-popup.active {
  opacity: 1;
  visibility: visible;
}

.success-content {
  background: #111;
  padding: 40px;
  border-radius: 20px;
  text-align: center;
  width: 400px;
  max-width: 90%;
  color: white;
  box-shadow: 0 0 40px rgba(191,161,109,0.5);
  animation: popUp 0.4s ease;
}

.success-icon i {
  font-size: 60px;
  margin-bottom: 20px;
  background: linear-gradient(135deg,#7b4f3d,#bfa16d,#00bcd4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.success-content h2 {
  margin-bottom: 15px;
  font-size: 22px;
  background: linear-gradient(135deg,#7b4f3d,#bfa16d,#00bcd4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.success-content p {
  font-size: 16px;
  margin-bottom: 25px;
  opacity: 0.9;
}

.success-content button {
  padding: 10px 25px;
  border: none;
  border-radius: 30px;
  background: linear-gradient(45deg,#7b4f3d,#bfa16d,#00bcd4);
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}

.success-content button:hover {
  transform: scale(1.05);
}

@keyframes popUp {
  from { transform: scale(0.7); opacity:0; }
  to { transform: scale(1); opacity:1; }
}
/* Étoile rouge pour les champs obligatoires */
label.required::after {
  content: " *";
  color: red;
  margin-left: 3px;
  font-weight: bold;
}

.nos-solutions {
  background: #000;   /* ou la couleur noire que tu utilises */
  padding: 250px 0;   /* augmente l’espace en haut et en bas */
}
.nos-solutions {
  background: #000;
  padding: 120px 0;
  margin: 0;
}

.footer {
  margin-top: 0;
}
/* Effet lumière dorée autour du footer */
.footer {
  position: relative; /* nécessaire pour que le pseudo-élément soit relatif au footer */
  z-index: 1;
  overflow: visible; /* pour que l'ombre dépasse */
}

/* Création d'un glow doré autour du footer */
.footer::before {
  content: "";
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
  border-radius: 20px; /* arrondi identique au footer si besoin */
  box-shadow:
    0 0 30px rgba(191,161,109,0.5),
    0 0 60px rgba(191,161,109,0.3),
    0 0 90px rgba(191,161,109,0.2);
  pointer-events: none; /* pour que le footer reste cliquable */
  z-index: -1; /* derrière le footer */
  transition: all 0.5s ease;
}

/* Optionnel : effet plus intense au hover */
.footer:hover::before {
  box-shadow:
    0 0 50px rgba(191,161,109,0.7),
    0 0 80px rgba(191,161,109,0.5),
    0 0 120px rgba(191,161,109,0.3);
}
/* Bloc nos solutions */
.nos-solutions {
  background: #000; /* bloc noir */
  padding: 150px 20px 100px; /* padding haut/bas pour espace visuel */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Wrapper pour centrer le bouton */
.cta-nos-solutions {
  text-align: center;
}

/* Bouton CTA pulsé doré */
.cta-btn {
  background-color: var(--primary-color);
  color: #fff;
  padding: 18px 45px;
  font-size: 1.3rem;
  font-weight: bold;
  border-radius: 50px;
  text-align: center;
  box-shadow: 0 0 15px var(--btn-color);
  animation: pulse 2s infinite;
  transition: transform 0.3s, box-shadow 0.3s;
  
}

/* Hover bouton */
.cta-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 0 30px var(--btn-color);
}

/* Pulse animation */
@keyframes pulse {
  0%, 100% {
    box-shadow: 0 0 10px var(--btn-color);
  }
  50% {
    box-shadow: 0 0 30px var(--btn-color);
  }
}
.lang-switch {
  display: flex;
  gap: 8px;
}

.lang-btn {
  padding: 5px 10px;
  border: 1px solid var(--primary-color);
  background: transparent;
  color: var(--primary-color);
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  transition: 0.3s;
}

.lang-btn.active,
.lang-btn:hover {
  background: var(--primary-color);
  color: #fff;
}
/* ===== FORM INPUT STYLE ===== */

.form-wrapper input,
.form-wrapper select,
.form-wrapper textarea {
  width: 100%;
  padding: 14px 16px;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  background-color: #fff;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

/* Focus effect */
.form-wrapper input:focus,
.form-wrapper select:focus,
.form-wrapper textarea:focus {
  border-color: #2f80ed; /* adapte à ta couleur principale */
  outline: none;
  box-shadow: 0 0 0 3px rgba(47,128,237,0.15);
}
.contact-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 6px;
}

.contact-line i {
  font-size: 1.2rem;
  background: linear-gradient(135deg,#7b4f3d,#bfa16d,#00bcd4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
header ul li a.btn {
  white-space: nowrap;
}
@media (max-width: 900px) {
  header ul li a.btn {
    padding: 8px 15px;  /* moins large */
    font-size: 1rem;    /* réduire la taille du texte si nécessaire */
    border-radius: 25px; /* garder un arrondi correct */
  }
}
@media (max-width: 900px) {
  header ul li a {
    font-size: 0.9rem;      /* réduit un peu la taille du texte */
    white-space: nowrap;    /* empêche le texte de se couper */
  }
}
/* ================== LANG BUTTONS MOBILE ================== */
@media (max-width: 480px) {
  .lang-switch {
    display: flex !important;
    flex-direction: column !important; /* empile verticalement */
    align-items: flex-start !important; /* décale à gauche */
    gap: 0.3rem !important;
    margin-top: 0.5rem !important;
  }

  .lang-btn {
    width: auto !important;
    font-size: 0.8rem !important;
    padding: 0.3rem 0.6rem !important;
  }
}
@media (max-width: 480px) {
  .lang-switch {
    flex-direction: column; /* empile verticalement */
    align-items: flex-start; /* décale à gauche */
    gap: 0.5rem; /* espace entre les boutons */
  }

  .lang-btn {
    white-space: normal; /* permet de couper le texte si nécessaire */
    width: auto;         /* ne force plus une largeur fixe */
    font-size: 0.8rem;   /* un peu plus petit */
    padding: 0.3rem 0.6rem;
  }
}
.lang-switch > * {
  margin-bottom: 0.3rem; /* espace vertical pour chaque bouton */
}
@media (max-width: 480px) {
  .lang-switch {
    display: flex !important;
    flex-direction: column !important; /* empile verticalement */
    align-items: flex-start !important; /* boutons alignés à gauche */
    width: 100% !important;              /* prend toute la largeur mobile */
    gap: 0.5rem !important;
  }

  .lang-btn {
    width: 100% !important;  /* chaque bouton prend toute la largeur */
    max-width: 200px;        /* optionnel : limite la largeur pour les très grands mobiles */
    font-size: 0.85rem !important;
    padding: 6px 10px !important; 
    box-sizing: border-box !important;
    white-space: normal !important; /* texte visible sur 2 lignes si nécessaire */
  }
}
.lang-dropdown {
  position: relative;
  display: inline-block;
}

.lang-btn {
  cursor: pointer;
  padding: 8px 15px;
  border: 1px solid var(--primary-color);
  background: var(--secondary-color);
  color: var(--primary-color);
  border-radius: 8px;
  font-weight: bold;
  min-width: 60px;
  text-align: center;
  transition: all 0.3s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Flèche */
.lang-btn::after {
  content: "▼";
  margin-left: 8px;
  font-size: 0.7rem;
  transition: transform 0.3s ease;
}

/* Liste déroulante */
.lang-dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  color: #2a2a2a;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  overflow: hidden;
  min-width: 100%;
  z-index: 999;
  transition: all 0.3s ease;
}

/* Option */
.lang-dropdown-content button {
  width: 100%;
  padding: 10px 15px;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
}

.lang-dropdown-content button:hover {
  background: var(--primary-color);
  color: #fff;
  transform: translateX(5px);
}

/* Dropdown ouvert */
.lang-dropdown.active .lang-dropdown-content {
  display: block;
}

.lang-dropdown.active .lang-btn::after {
  transform: rotate(180deg);
}

/* Responsive : mobile full-width */
@media (max-width: 480px) {
  .lang-dropdown {
    width: 100%;
  }
  .lang-btn {
    width: 100%;
  }
  .lang-dropdown-content button {
    text-align: center;
  }
}
.lang-dropdown-content {
    flex-direction: column; /* sans display */
}

.lang-switch {
  margin-left: 50px; /* décale vers la droite */
 
}

.lang-dropdown {
  position: relative; /* nécessaire pour le dropdown */
  display: inline-block;
}
a.btn,
.launch-btn {
    text-decoration: none;
}
a.btn:hover,
.launch-btn:hover {
    text-decoration: none;
}
/* Animation d'apparition douce au scroll */
.scroll-anim {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-anim.visible {
    opacity: 1;
    transform: translateY(0);
}
.lang-dropdown {
    position: relative;
    display: inline-block;
    margin-right: 70px; /* décale vers la gauche */
}
.scroll-anim {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-anim.visible {
  opacity: 1;
  transform: translateY(0);
}


/* ================== RESPONSIVE GLOBAL ================== */

/* HEADER + NAVIGATION */
@media (max-width: 900px) {
  header nav {
    flex-wrap: wrap;
    padding: 10px 15px;
  }

  header .logo img {
    height: 70px;
  }

  header ul {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px 0;
  }

  header ul li a {
    font-size: 0.9rem;
    white-space: nowrap;
  }

  header ul li a.btn {
    padding: 8px 15px;
    font-size: 0.9rem;
    border-radius: 25px;
    white-space: nowrap;
  }
}

/* HERO + BOUTON LANCER VOTRE PROJET */
@media (max-width: 900px) {
  .hero {
    padding: 120px 20px 80px;
  }

  .hero-text h1 {
    font-size: 2rem;
  }

  .hero-text p {
    font-size: 1rem;
  }

  .launch-btn {
    width: 100%;
    max-width: 260px;
    font-size: 1.05rem;
    padding: 12px 20px;
  }
}

/* BLOCS SERVICES / ABOUT / MISSION / MAINTENANCE */
@media (max-width: 900px) {
  .service-cards {
    grid-template-columns: 1fr;
  }

  .about-container {
    flex-direction: column;
    gap: 30px;
    padding: 40px 20px;
  }

  .mission-container-full {
    padding: 60px 20px;
  }

  .mission-double {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }

  .double-block {
    min-height: auto;
    padding: 20px;
    flex-direction: column;
  }

  .double-block.reverse {
    flex-direction: column;
  }

  .maintenance-block {
    height: auto;
    margin-bottom: 30px;
  }
}

/* FORMULAIRE FULL-WIDTH */
@media (max-width: 900px) {
  .form-section {
    padding: 80px 15px 60px;
  }

  .form-section .container {
    padding: 25px 20px;
    width: 100%;
    max-width: 100%;
  }

  .form-section h2 {
    font-size: 1.8rem;
  }

  .form-section p {
    font-size: 0.95rem;
  }

  .custom-file-input-wrapper {
    align-items: stretch;
    gap: 15px;
  }

  .custom-file-input {
    width: 100%;
    padding-bottom: 0;
  }

  .form-section .submit-btn {
    width: 100%;
    font-size: 1rem;
    padding: 12px;
  }
}

/* FOOTER EN COLONNE */
@media (max-width: 900px) {
  .footer-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 25px;
    padding: 30px 20px;
  }

  .footer-left,
  .footer-center,
  .footer-right {
    flex: 1 1 100%;
    text-align: center;
    padding: 0;
  }

  .footer-right a {
    text-align: center;
  }

  .footer-bottom {
    margin-top: 20px;
    padding-top: 10px;
  }
}

/* SWITCH DE LANGUE (HEADER) */
@media (max-width: 900px) {
  .lang-dropdown {
    margin-right: 0;
    margin-top: 10px;
    width: 100%;
  }

  .lang-switch {
    display: flex;
    justify-content: center;
    width: 100%;
  }
}

/* LANGUE ULTRA-MOBILE (PETITS TÉLÉPHONES) */
@media (max-width: 480px) {
  .lang-dropdown {
    width: 100%;
  }

  .lang-btn {
    width: 100%;
    font-size: 0.8rem;
    padding: 6px 10px;
    box-sizing: border-box;
  }

  .lang-dropdown-content button {
    text-align: center;
  }
}
/* SWITCH DE LANGUE (HEADER) – reste sur la même ligne */
@media (max-width: 900px) {
  .lang-dropdown {
    margin-right: 10px;   /* petit espace à droite */
    margin-top: 0;
    width: auto;          /* pas 100%, sinon ça passe à la ligne */
  }

  .lang-switch {
    display: flex;
    justify-content: flex-end;
    width: auto;
  }
}
/* =============== MENU BURGER PREMIUM =============== */

/* Bouton burger stylé (caché en desktop) */
.burger-btn {
  display: none;
  position: relative;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--primary-color), var(--btn-hover));
  border: none;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 4px 15px rgba(191,161,109,0.4);
  transition: all 0.3s ease;
}

.burger-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(191,161,109,0.6);
}

.burger-btn span {
  display: block;
  height: 3px;
  width: 22px;
  background: white;
  border-radius: 2px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
}

.burger-btn span:nth-child(1) { top: 35%; }
.burger-btn span:nth-child(2) { top: 50%; }
.burger-btn span:nth-child(3) { top: 65%; }

/* Animation en croix quand ouvert */
.burger-btn.active span:nth-child(1) {
  transform: translate(-50%, -50%) rotate(45deg) translate(0, 4px);
}
.burger-btn.active span:nth-child(2) {
  opacity: 0;
}
.burger-btn.active span:nth-child(3) {
  transform: translate(-50%, -50%) rotate(-45deg) translate(0, -4px);
}

/* Menu vertical premium (caché par défaut) */
.mobile-menu {
  display: none;
  position: fixed;
  top: 80px;
  right: -300px; /* complètement caché à droite */
  width: 280px;
  height: calc(100vh - 80px);
  background: linear-gradient(135deg, #f7eddd, #fff7e8);
  box-shadow: -8px 0 30px rgba(0,0,0,0.3);
  padding: 30px 20px;
  z-index: 999;
  transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border-left: 4px solid var(--primary-color);
}

.mobile-menu.open {
  right: 0; /* glisse depuis la droite */
}

.mobile-menu ul {
  list-style: none;
  padding: 0;
}

.mobile-menu li {
  margin-bottom: 18px;
}

.mobile-menu a {
  display: block;
  padding: 12px 15px;
  color: var(--text-color);
  text-decoration: none;
  font-weight: 500;
  border-radius: 12px;
  transition: all 0.3s ease;
  position: relative;
}

.mobile-menu a:hover,
.mobile-menu a.btn {
  background: rgba(191,161,109,0.1);
  transform: translateX(8px);
  box-shadow: 0 4px 12px rgba(191,161,109,0.2);
  color: var(--primary-color);
}

.mobile-menu a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 0;
  background: var(--primary-color);
  border-radius: 2px;
  transition: height 0.3s ease;
  transform: translateY(-50%);
}

.mobile-menu a:hover::before {
  height: 24px;
}

/* MOBILE SEULEMENT */
@media (max-width: 900px) {
  /* CACHE COMPLÈTEMENT le menu horizontal */
  header nav ul {
    display: none !important;
  }

  /* Affiche le burger */
  .burger-btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Logo + langue + burger sur une ligne propre */
  header nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
  }

  .logo {
    flex-shrink: 0;
  }

  .lang-dropdown {
    flex-shrink: 0;
    margin-left: auto;
  }
}
/* =============== MENU BURGER CORRIGÉ =============== */
.burger-btn {
  display: none;
  position: relative;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--primary-color), var(--btn-hover));
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(191,161,109,0.4);
  transition: all 0.3s ease;
}

.burger-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(191,161,109,0.6);
}

.burger-btn span {
  display: block;
  height: 3px;
  width: 22px;
  background: white;
  border-radius: 2px;
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.3s ease;
}

.burger-btn span:nth-child(1) { top: 12px; }
.burger-btn span:nth-child(2) { top: 20px; }
.burger-btn span:nth-child(3) { top: 28px; }

.burger-btn.active span:nth-child(1) {
  transform: translateY(-50%) rotate(45deg) translate(6px, 6px);
}
.burger-btn.active span:nth-child(2) {
  opacity: 0;
}
.burger-btn.active span:nth-child(3) {
  transform: translateY(-50%) rotate(-45deg) translate(6px, -6px);
}

/* MENU MOBILE CORRIGÉ - cible exactement ta structure */
header nav .mobile-menu {
  position: fixed !important;
  top: 80px;
  right: -300px;
  width: 280px;
  height: calc(100vh - 80px);
  background: linear-gradient(135deg, #f7eddd, #fff7e8) !important;
  box-shadow: -8px 0 30px rgba(0,0,0,0.3);
  padding: 30px 20px !important;
  z-index: 999 !important;
  transition: right 0.4s ease;
  border-left: 4px solid var(--primary-color);
  border-radius: 0 15px 15px 0;
  display: block !important; /* toujours visible mais caché à droite */
}

header nav .mobile-menu.open {
  right: 0 !important;
}

header nav .mobile-menu ul {
  list-style: none;
  padding: 0 !important;
  margin: 20px 0 0 0 !important;
}

header nav .mobile-menu li {
  margin-bottom: 12px !important;
}

header nav .mobile-menu a {
  display: block !important;
  padding: 15px 20px !important;
  color: var(--text-color) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 1.1rem !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,0.6) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

header nav .mobile-menu a:hover,
header nav .mobile-menu a.btn {
  background: var(--primary-color) !important;
  color: white !important;
  transform: translateX(8px) !important;
  box-shadow: 0 4px 15px rgba(191,161,109,0.4) !important;
}

/* MOBILE */
@media (max-width: 900px) {
  header nav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 15px !important;
  }
  
  header nav > ul {
    display: none !important;
  }
  
  .burger-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
  
  .logo {
    flex-shrink: 0;
  }
  
  .lang-dropdown {
    margin-left: auto;
    flex-shrink: 0;
  }
}

/* FORCE MENU VERTICAL EN MOBILE */
@media (max-width: 900px) {
  header nav .mobile-menu ul {
    display: block !important;  /* force affichage */
    flex-direction: column !important;  /* VERTICAL */
    width: 100% !important;
  }
  
  header nav .mobile-menu li {
    display: block !important;  /* chaque li sur sa ligne */
    width: 100% !important;
    margin-bottom: 12px !important;
  }
  
  header nav .mobile-menu a {
    display: block !important;
    width: 100% !important;
    white-space: normal !important;  /* texte sur plusieurs lignes si besoin */
  }
}

/* ÉCRASER TOUS les anciens styles ul/li qui forcent horizontal */
header nav .mobile-menu ul,
header nav .mobile-menu ul li,
header nav .mobile-menu ul li a {
  display: block !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
}
/* ================= ANIMATIONS BLOCS SCROLL ================= */

/* Animation de base pour les blocs */
.scroll-anim {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-anim.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* SEULEMENT les blocs qui doivent s'animer */
.service-cards .card,
.double-block,
.about-container,
.stats-section,
.mission-double {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.service-cards .card.visible,
.double-block.visible,
.about-container.visible,
.stats-section.visible,
.mission-double.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Délai progressif pour les cards */
.service-cards .card:nth-child(1).visible { transition-delay: 0.1s; }
.service-cards .card:nth-child(2).visible { transition-delay: 0.2s; }
.service-cards .card:nth-child(3).visible { transition-delay: 0.3s; }
.service-cards .card:nth-child(4).visible { transition-delay: 0.4s; }

/* Mobile : plus rapide */
@media (max-width: 900px) {
  .scroll-anim,
  .service-cards .card,
  .double-block {
    transition-duration: 0.6s !important;
  }
}
/* BOOST MISSION BLOCKS */
.mission .double-block {
  opacity: 0 !important;
  transform: translateY(50px) !important;
  transition: all 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.mission .double-block.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Délais progressifs pour tes 4 blocs mission */
.mission .double-block:nth-of-type(1).visible { transition-delay: 0.1s !important; }
.mission .double-block:nth-of-type(2).visible { transition-delay: 0.2s !important; }
.mission .double-block:nth-of-type(3).visible { transition-delay: 0.3s !important; }
.mission .double-block:nth-of-type(4).visible { transition-delay: 0.4s !important; }

/* Stats aussi */
.stats-section .stat {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.stats-section .stat:nth-child(1).visible { transition-delay: 0.1s; }
.stats-section .stat:nth-child(2).visible { transition-delay: 0.2s; }
.stats-section .stat:nth-child(3).visible { transition-delay: 0.3s; }

.stats-section .stat.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}