:root{
  --bg:#ffffff;
  --text:#1d1f23;
  --muted:#6b7280;
  --primary:#b71c1c; /* rouge foncé */
  --primary-700:#8e1515;
  --dark:#111418;
  --card:#f5f6f7;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: 'Roboto', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji','Segoe UI Emoji';
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}

.container{max-width:1100px;margin:0 auto;padding:0 20px}
.mt-40{margin-top:40px}

/* === HEADER === */
.site-header{
  position:sticky;top:0;z-index:50;background:var(--dark);color:#fff;border-bottom:1px solid #000;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:700}
.logo-text{font-family:'Montserrat', sans-serif;letter-spacing:.3px;color:#fff}
.nav .menu{list-style:none;margin:0;padding:0;display:flex;gap:24px}
.nav a{color:#fff;text-decoration:none}
.nav a.cta{background:var(--primary);padding:10px 14px;border-radius:999px;color:#fff}
.nav a.cta:hover{background:var(--primary-700)}
.nav-toggle{display:none}










@media (max-width: 800px){
  .nav-toggle{display:block;background:none;border:1px solid #444;color:#fff;padding:8px 10px;border-radius:8px}
  .nav .menu{display:none;flex-direction:column;background:#0e1116;position:absolute;top:64px;right:20px;padding:16px;border-radius:12px;border:1px solid #222}
  .nav .menu.open{display:flex}
}

/* === HERO === */
.hero{
  position:relative;
  height:100vh;
  background-image:linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3)), url('../img/fondecran/fe1.jpg');
  background-size:cover;background-position:center;
  color:#fff;display:flex;align-items:center;
}


/* --- .hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55))} */
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35))}
.hero-content{position:relative}
.hero h1{font-family:'Montserrat', sans-serif;font-size:clamp(28px,5vw,48px);margin:0 0 10px}
.hero p{opacity:.9;margin:0 0 20px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}

/* === BOUTONS === */
.btn{display:inline-block;border:none;cursor:pointer;padding:12px 18px;border-radius:14px;font-weight:600;text-decoration:none}
.btn.primary{background:var(--primary);color:#fff}
.btn.primary:hover{background:var(--primary-700)}
.btn.secondary{background:#1f2937;color:#fff}
.btn.secondary:hover{background:#111827}
.btn.ghost{border:1px solid rgba(255,255,255,.7);color:#fff;background:transparent}


.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.95);
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 1000;
}

.lightbox img {
  max-width: 80%;
  max-height: 70%;
  margin-bottom: 20px;
  border-radius: 6px;
}

.lightbox .controls {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}

.lightbox button {
  background: #fff;
  border: none;
  padding: 8px 16px;
  font-size: 18px;
  cursor: pointer;
  border-radius: 5px;
}

.lightbox .close {
  position: absolute;
  top: 15px;
  right: 25px;
  font-size: 40px;
  color: #fff;
  cursor: pointer;
}

.lightbox .back {
  background: #f44336;
  color: #fff;
}


/* === SERVICES === */

.services{padding:50px 0}
.services h2{font-family:'Montserrat', sans-serif;margin-bottom:16px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.card{background:var(--card);padding:18px;border-radius:16px;border:1px solid #e5e7eb;box-shadow:0 2px 10px rgba(0,0,0,.03)}


.lightbox img {
  max-width: 80%;
  max-height: 80%;
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(255,255,255,0.2);
}

.lightbox .controls {
  display: flex;
  gap: 10px;
}

.lightbox button {
  background: #fff;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 18px;
  border-radius: 5px;
  transition: background 0.3s;
}

.lightbox button:hover {
  background: #ddd;
}

.close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 40px;
  color: #fff;
  cursor: pointer;
}

/* FIN SERVICES */





/* === CTA BAND === */
.cta-band{background:#0f172a;color:#fff;margin:40px 0}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:26px 0;flex-wrap:wrap}
.cta-inner h2{margin:0}

/* === FOOTER === */
.site-footer{background:#0b0f14;color:#cbd5e1;margin-top:60px}
.site-footer h4{color:#fff;margin-top:0}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px;padding:28px 0}
.footer-links{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.footer-links a{color:#cbd5e1;text-decoration:none}
.footer-links a:hover{color:#fff}
.footer-bottom{border-top:1px solid #1f2937;padding:12px 0;color:#94a3b8}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr}}

/* === TITRES === */
.main-title{font-family:'Montserrat', sans-serif}

/* === SLIDER SIMPLE === */
.slider{position:relative;margin:20px 0;border-radius:16px;overflow:hidden;border:1px solid #e5e7eb}
.slides{display:flex;transition:transform .5s ease}
.slides img{width:100%;max-height:480px;object-fit:cover;flex-shrink:0}

/* === DIAPORAMA === */
.slideshow-container {
  position: relative;
  width: 50%;
  max-width: 600px;
  margin: 30px auto;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.mySlides {display: none;width: 100%;animation: fade 1s;}
.mySlides img {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  display: block;
}
@keyframes fade {
  from { opacity: 0.4; }
  to { opacity: 1; }
}

/* Boutons précédent/suivant */
.prev,.next {
  cursor:pointer;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  padding:12px;
  color:white;
  font-weight:bold;
  font-size:18px;
  border-radius:3px;
  background:rgba(0,0,0,0.5);
  user-select:none;
}
.next{right:0}
.prev:hover,.next:hover{background-color:rgba(0,0,0,0.8)}

/* Points indicateurs */
.dot-container {text-align:center;padding:10px;}
.dot {
  cursor:pointer;
  height:12px;
  width:12px;
  margin:0 4px;
  background-color:#bbb;
  border-radius:50%;
  display:inline-block;
}
.active,.dot:hover {background-color:#717171;}

/* Responsive */
@media screen and (max-width:768px){
  .slideshow-container{max-width:100%;}
  .mySlides img{max-height:250px;}
  .prev,.next{font-size:14px;padding:8px;}
}
@media screen and (max-width:480px){
  .mySlides img{max-height:180px;}
}

/* === GALLERY === */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:14px 0 40px}
.gallery figure{margin:0}
.gallery img{width:100%;height:200px;object-fit:cover;border-radius:12px;border:1px solid #e5e7eb}

/* === ABOUT === */
.about-grid{display:grid;grid-template-columns:2fr 1fr;gap:24px}
.pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:12px}
.pillar{background:var(--card);border:1px solid #e5e7eb;border-radius:12px;padding:12px}
.aside{background:#0f172a;color:#cbd5e1;border-radius:16px;padding:16px;border:1px solid #1f2937}
.checklist{padding-left:18px}
@media (max-width:900px){.about-grid{grid-template-columns:1fr}.pillars{grid-template-columns:1fr}}

/* === FORMULAIRE CONTACT === */
/* .contact-form{margin-top:10px;background:var(--card);padding:18px;border-radius:16px;border:1px solid #e5e7eb} */
.contact-form {
  max-width: 600px;         /* largeur maximale du formulaire */
  margin: 2rem auto;        /* centré horizontalement avec marge verticale */
  padding: 2rem;            /* espace intérieur confortable */
  background: var(--card);
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  box-sizing: border-box;
}

/* Champs input, select, textarea */
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #d1d5db;
  background: #fff;
  font-size: 1rem;
  margin-bottom: 1rem;
  box-sizing: border-box;
}

.contact-form label{display:block;font-weight:600;margin-bottom:6px}
/* .contact-form input,.contact-form select,.contact-form textarea{ */
/*  width:100%;padding:10px;border-radius:10px;border:1px solid #d1d5db;background:#fff */
/* } */

a {
    color: #00ffcc; /* couleur normale du lien (turquoise clair) */
    text-decoration: none; /* supprime le soulignement */
}

a:hover {
    color: #00ffaa; /* couleur quand on survole */
    text-decoration: underline; /* souligne au survol pour montrer que c’est cliquable */
}

/* a:visited {
    color: #00cc99; /* couleur si le lien a déjà été visité */
 }
*/

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:800px){.grid-2{grid-template-columns:1fr}}
.form-actions{display:flex;align-items:center;gap:12px;margin-top:10px}
.form-note{color:var(--muted);margin:0}
.alert{padding:14px;border-radius:12px;margin:14px 0}
.alert.error{background:#F2A5A6;border:1px solid #fecdd3}
.honeypot{position:absolute;left:-5000px;visibility:hidden}

/* === MAP === */
.map-embed iframe{width:100%;height:350px;border:0;border-radius:16px;margin-top:18px}

/* === LEGAL === */
.legal{padding-top:20px}



/* === MENU HAMBURGER === */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

.hamburger {
  width: 24px;
  height: 2px;
  background: #fff;
  transition: transform 0.3s, opacity 0.3s;
}

/* Animation croix quand menu ouvert */
.nav-toggle.open .hamburger:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav-toggle.open .hamburger:nth-child(2) {
  opacity: 0;
}
.nav-toggle.open .hamburger:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 800px) {
  .nav-toggle {
    display: flex;
    border: 1px solid #444;
    padding: 8px 10px;
    border-radius: 8px;
  }
}


.tricolor-bar {
  display: flex;
  height: 3px; /* Épaisseur de la ligne – modifiable */
    position: relative;
  z-index: 9999;
}

.tricolor-bar div {
  flex: 1;
}

.tricolor-bar .blue { background: #0055A4; }
.tricolor-bar .white { background: #FFFFFF; }
.tricolor-bar .red { background: #F5260A; }