/*
 * Deograce BTP Website Styles
 *
 * Ce fichier définit l'apparence du site web pour l'entreprise de BTP
 * Deograce BTP. Il contient des styles pour la navigation, les sections
 * principales, les cartes de services, la section « Pourquoi nous choisir »,
 * et le pied de page. Les styles sont adaptés pour être responsives et
 * fonctionnent sur les écrans mobiles et de bureau.
 */

/* Reset & base styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Montserrat', sans-serif;
  line-height: 1.6;
  color: #333;
  /*
   * Fond général clair pour favoriser la lisibilité.
   * Nous utilisons un blanc cassé très léger qui contraste avec les éléments
   * plus sombres (cartes, bandeau, etc.)
   */
  background: #f7f9fc;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 0;
}

/* Navigation Bar */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 5%;
  background: transparent; /* overlay au chargement sur le hero */
  box-shadow: none;
  transition: background .25s ease, padding .2s ease, box-shadow .25s ease;
}

/* Nav opaque après scroll */
.navbar--solid {
  background: rgba(255,255,255,0.98);
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.navbar--shrink { padding-top: 10px; padding-bottom: 10px; }

/* Couleurs des liens selon l'état */
.navbar--overlay .nav-links a { color: #ffffff; }
.navbar--solid   .nav-links a { color: #0d253f; }

/* Burger couleur */
.burger span { background: #0d253f; }
.navbar--overlay .burger span { background: #ffffff; }
/* En mode "solid", burger en foncé (passe après la règle overlay) */
.navbar.navbar--solid .burger span { background: #0d253f; }

/* Logo double (clair/sombre sans changer la taille) */
.logo__img { height: 100px; width: auto; display: none; }
.navbar--overlay .logo__img--light { display: block; filter: brightness(0) invert(1); }
.navbar--overlay .logo__img--dark  { display: none; }
.navbar--solid   .logo__img--light { display: none; }
.navbar--solid   .logo__img--dark  { display: block; }

/*
 * Logo dans la barre de navigation
 *
 * Agrandi à 80 px de hauteur pour renforcer la visibilité de la marque
 * sans pour autant augmenter considérablement la hauteur du menu. La
 * largeur s'ajuste automatiquement pour conserver les proportions.
 */
/*
 * Logo dans la barre de navigation
 *
 * Agrandi à 90 px de hauteur pour renforcer davantage la visibilité de la marque.
 * La largeur s'adapte automatiquement pour préserver les proportions.
 */
/*
 * Logo dans la barre de navigation
 *
 * Agrandi à 100 px de hauteur pour assurer une visibilité maximale du logo
 * sans obscurcir les autres éléments de la barre. La largeur reste
 * proportionnelle pour conserver les proportions du logo original.
 */
.navbar .logo img {
  height: 100px;
  width: auto;
  display: block;
}

.navbar .nav-links {
  display: flex;
  list-style: none;
}

.navbar .nav-links li {
  margin-left: 30px;
}

.navbar .nav-links li a {
  text-decoration: none;
  /* Les liens du menu sont sombres sur fond clair */
  color: #0d253f;
  font-weight: 500;
  transition: color 0.3s ease;
}

/* Bouton d'appel à l'action dans la barre de navigation */
.nav-cta {
  display: none;
}

@media (min-width: 700px) {
  .nav-cta {
    display: inline-block;
  }
}

.navbar .nav-links li a:hover {
  color: #00b0a8;
}

/* État actif pour le lien du menu */
.navbar .nav-links li a.active {
  color: #00b0a8;
  border-bottom: 2px solid #00b0a8;
  padding-bottom: 3px;
}

/*
 * Conteneur pour le logo dans la barre de navigation. Nous utilisons un
 * fond clair et une bordure arrondie afin de faire ressortir le logo sur
 * le fond sombre de la barre de navigation. Cette approche permet
 * d'améliorer la visibilité tout en conservant une allure professionnelle.
 */
.logo-container {
  height: 90px;
  width: 90px;
  background: #ffffff;
  border-radius: 10px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  /* Animation subtile pour attirer l'œil sur le logo. La pulsation est très légère
     afin de rester professionnelle. */
  animation: logoPulse 6s ease-in-out infinite;
}

@keyframes logoPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}

.logo-container img {
  max-width: 100%;
  max-height: 100%;
}

/* Mobile burger icon */
.burger {
  display: none;
  flex-direction: column;
  cursor: pointer;
}

.burger span {
  height: 3px;
  width: 25px;
  background: #0d253f;
  margin-bottom: 5px;
  border-radius: 5px;
  transition: all 0.3s ease;
}

/*
 * Section héroïque
 *
 * L'en-tête affiche une image de fond couvrant toute la fenêtre. La zone
 * principale de la section héroïque est centrée verticalement et
 * horizontalement, avec un voile sombre pour améliorer la visibilité du
 * contenu. Cette section occupe toute la hauteur de l'écran afin de
 * donner plus d'impact à l'introduction. Les styles sont conçus pour être
 * réactifs sur les petits écrans.
 */

header {
  /* Le header par défaut ne spécifie pas de hauteur ni d'image de fond.
     Ces propriétés sont définies spécifiquement pour la page d'accueil
     via la classe .home-header. */
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  /* overflow hidden n'est pas nécessaire ici pour les pages internes */
}

/*
 * Header spécifique à la page d'accueil
 *
 * Sur la page d'accueil, le header occupe toute la hauteur de l'écran et
 * affiche l'image de fond. La classe home-header doit être ajoutée à
 * l'élément <header> dans index.html pour appliquer ces styles. Les pages
 * internes (about, services, why, contact) utilisent un header standard
 * sans image de fond ni hauteur fixe.
 */
.home-header {
  height: 100vh;
  /*
   * Le bandeau d'accueil ne définit pas d'image de fond ici. L'image est
   * appliquée directement sur la section .hero.
   */
  background: none;
  overflow: hidden;
}

.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #ffffff;
  /*
   * Fond de la section héroïque
   *
   * Pour mettre immédiatement en avant le secteur d'activité, la section
   * héroïque utilise désormais une image d'illustration de bâtiments.
   * Un voile sombre en dégradé est appliqué par-dessus afin d'améliorer
   * la lisibilité du texte.
   */
  background: linear-gradient(rgba(13, 37, 63, 0.7), rgba(13, 37, 63, 0.7)), url("images/hero-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0 20px;
  position: relative;
  overflow: hidden;
}

/* Le logo en filigrane a été supprimé à la demande du client, les styles
   précédents ont été retirés pour ne pas afficher de pseudo-élément
   dans la section héroïque. */

.hero h1 {
  font-size: 3rem;
  margin-bottom: 15px;
  font-weight: 700;
}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 30px;
  max-width: 600px;
}

/* Garantit que le contenu textuel dans la section héroïque s'affiche
   au-dessus du logo en filigrane. */
.hero h1,
.hero p,
.hero a {
  position: relative;
  z-index: 2;
}

/* Logo dans la section héroïque sur la page d'accueil */
/*
 * Logo sur la page d'accueil
 *
 * Le logo dans la section héroïque est affiché en grand pour mettre en avant
 * l'identité de l'entreprise sans augmenter la hauteur du menu. Sur les
 * écrans de bureau, on lui accorde une taille généreuse, tandis que sur
 * mobile elle est réduite pour préserver l'espace.
 */
/*
 * Logo sur la page d'accueil
 *
 * Pour mettre clairement en valeur l'identité visuelle, le logo apparaît en
 * grand format au centre du bandeau d'accueil. La hauteur est ajustée
 * dynamiquement selon la taille de l'écran afin d'assurer une bonne
 * lisibilité tout en préservant la réactivité.
 */
/*
 * Logo sur la page d'accueil
 *
 * On spécifie une largeur fixe plutôt qu'une hauteur pour garantir que
 * l'image occupe un espace généreux sans être contrainte par des règles
 * héritées. La hauteur s'ajuste automatiquement selon les proportions de
 * l'image, assurant une présentation nette et réactive.
 */
.hero-logo {
  width: 300px;
  height: auto;
  margin-bottom: 20px;
}

@media (max-width: 900px) {
  .hero-logo {
    width: 220px;
  }
}

@media (max-width: 600px) {
  .hero-logo {
    width: 150px;
  }
}

.btn {
  padding: 12px 30px;
  border: none;
  border-radius: 50px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.3s ease;
}

.primary-btn {
  background: #009688;
  color: #ffffff;
}

.primary-btn:hover {
  background: #00b0a8;
}

/*
 * Actions dans les cartes de service
 * Aligne horizontalement le lien "En savoir plus" et le bouton de devis.
 */
/*
 * Actions dans les cartes de service
 * Les boutons sont centrés et uniformes. En retirant le mode flex et la
 * distribution en espace entre, le lien vers le devis s'aligne
 * automatiquement au centre de la carte. Si plusieurs boutons sont
 * présents à l'avenir, ils s'afficheront les uns sous les autres.
 */
.card-actions {
  margin-top: 20px;
  text-align: center;
}

/* S'assurer que les boutons de carte sont alignés et occupent une largeur
   cohérente dans toutes les cartes de service. */
.card-actions a.btn {
  display: inline-block;
  min-width: 60%;
  margin: 0 auto;
}

/* Bouton tertiaire : simple lien texte pour afficher la modale de détail */
.tertiary-btn {
  background: transparent;
  color: #00b0a8;
  border: none;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  transition: color 0.3s ease;
  border-radius: 0;
}

.tertiary-btn:hover {
  text-decoration: underline;
  color: #00796b;
}

/* Section Headings */
.about h2,
.services h2,
.why h2,
.contact h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 20px;
  color: #0d253f;
}

.about p {
  max-width: 900px;
  margin: 0 auto;
  font-size: 1rem;
  color: #555;
  text-align: center;
}

/* Services Section */
.services {
  background: #ffffff;
}

/* Pourquoi nous choisir : utiliser un fond clair légèrement différent pour
   alterner les couleurs entre les sections et améliorer la lisibilité */
.why {
  background: #f7f9fc;
}

.service-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 40px;
}

.service-card {
  flex: 1 1 calc(33.333% - 20px);
  /* Fond sombre des cartes de service pour contraster avec la section claire */
  background: #0f2a4b;
  border-radius: 10px;
  padding: 30px 20px;
  margin: 10px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
  transition: transform 0.3s ease;
  position: relative;
  /* Laisser le contenu déborder lorsque la carte est agrandie pour afficher les détails */
  overflow: visible;
  /* Augmenter la hauteur minimale pour permettre à la description complète d'apparaître */
  /* Hauteur ajustée : le résumé est visible et les détails sont dans une modale */
  min-height: 360px;
}

.service-card:hover {
  /*
   * Effet d'élévation plus marqué sur les cartes au survol. Nous ajoutons une
   * légère translation vers le haut et un zoom pour donner l'impression
   * d'une carte volante. L'ombre est aussi renforcée pour renforcer la
   * profondeur.
   */
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* Détails supplémentaires des services
   Les descriptions complètes sont cachées par défaut et se déplient au survol */

.service-card i {
  font-size: 2.5rem;
  color: #009688;
  margin-bottom: 20px;
}

.service-card h3 {
  font-size: 1.3rem;
  margin-bottom: 15px;
  /* Texte en blanc dans les titres des cartes de service */
  color: #ffffff;
}

.service-card p {
  font-size: 0.95rem;
  /* Texte en gris clair pour un contraste confortable */
  color: #e0e0e0;
}

/* Carte volante pour les services
   Cette carte s'affiche en survolant la carte principale et donne une impression
   de flottement. Elle est masquée par défaut et apparaît en douceur lors du survol. */
.service-popup {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* Laisser la popup s'étendre verticalement selon son contenu tout en occupant
     toute la largeur de la carte. Lorsque le texte est long, une barre de
     défilement apparaît pour lire l'intégralité du contenu. */
  height: 100%;
  background: rgba(255, 255, 255, 0.97);
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-y: auto;
}

.service-card:hover .service-popup {
  opacity: 1;
  transform: translateY(0);
}

/* Styles spécifiques pour les éléments à l'intérieur des détails des services */
.service-card .service-details h4 {
  font-size: 1.1rem;
  color: #0d253f;
  margin-bottom: 10px;
}
.service-card .service-details p {
  font-size: 0.95rem;
  color: #555;
}

/* Why Choose Section */
.why {
  background: #f7f9fc;
}

.why-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 40px;
}

.why-card {
  flex: 1 1 calc(33.333% - 20px);
  /* Fond sombre des cartes « Pourquoi nous choisir » pour harmoniser avec les cartes de services */
  background: #0f2a4b;
  border-radius: 10px;
  padding: 30px 20px;
  margin: 10px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
  transition: transform 0.3s ease;
}

.why-card:hover {
  transform: translateY(-5px);
}

.why-card i {
  font-size: 2.5rem;
  color: #009688;
  margin-bottom: 20px;
}

.why-card h3 {
  font-size: 1.3rem;
  margin-bottom: 15px;
  color: #ffffff;
}

.why-card p {
  font-size: 0.95rem;
  color: #e0e0e0;
}

/* Contact Section */
.contact {
  background: #0d253f;
  color: #ffffff;
  padding-top: 80px;
  padding-bottom: 80px;
}

.contact h2 {
  color: #ffffff;
}

/* Section contact pour la page contact (fond clair).
   Cette section possède un style différent de celle utilisée en pied de page
   afin d'assurer la lisibilité lorsque le fond de la page est clair. */
.contact-page {
  background: #f7f9fc;
  color: #333;
  padding: 80px 0;
}

.contact-page .contact-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-bottom: 40px;
}

.contact-page .contact-item {
  color: #0d253f;
  font-size: 1.1rem;
  text-decoration: none;
  padding: 12px 25px;
  border: 2px solid #009688;
  border-radius: 50px;
  transition: background 0.3s ease, color 0.3s ease;
}

.contact-page .contact-item i {
  margin-right: 10px;
  font-size: 1.3rem;
}

.contact-page .contact-item:hover {
  background: #009688;
  color: #ffffff;
}

.contact p {
  text-align: center;
  margin-bottom: 30px;
  color: #e0e0e0;
}

.contact-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.contact-item {
  display: flex;
  align-items: center;
  color: #ffffff;
  font-size: 1.1rem;
  text-decoration: none;
  padding: 12px 20px;
  border: 2px solid #009688;
  border-radius: 50px;
  transition: background 0.3s ease, color 0.3s ease;
}

.contact-item i {
  margin-right: 10px;
  font-size: 1.3rem;
}

.contact-item:hover {
  background: #009688;
  color: #ffffff;
}

/* Sélection de services dans le formulaire de contact */
.service-selection {
  /*
   * Légère transparence pour la sélection de services afin de contraster
   * avec le fond sombre sans donner un effet trop lumineux. Ajustée à 0.1
   * pour renforcer la lisibilité.
   */
  /* Fond translucide pour la zone de sélection des services. Nous utilisons une
     opacité plus élevée sur fond sombre pour assurer la lisibilité des cases
     à cocher et des labels. */
  background: rgba(255, 255, 255, 0.85);
  color: #0d253f;
  padding: 20px;
  border-radius: 8px;
  margin-top: 30px;
}

.service-checkbox {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  font-size: 0.95rem;
}

.service-checkbox input {
  margin-right: 12px;
  width: 18px;
  height: 18px;
  accent-color: #009688;
}

.service-checkbox label {
  cursor: pointer;
  color: #0d253f;
}

/*
 * Les paragraphes à l'intérieur de la zone de sélection des services sont
 * forcés en sombre pour garantir une lisibilité optimale quel que soit
 * l'arrière‑plan (clair ou sombre).
 */
.service-selection p {
  color: #0d253f;
}

.contact .service-selection p {
  color: #0d253f;
}

/*
 * Ajustements pour la section contact en bas de la page d'accueil
 * Sur un fond sombre (#0d253f), nous appliquons un panneau clair pour la
 * sélection de services afin d'améliorer la lisibilité. Les couleurs des
 * libellés sont forcées en sombre pour contraster.
 */
.contact .service-selection {
  background: #f1f5f9;
  color: #0d253f;
}

.contact .service-checkbox label {
  color: #0d253f;
}

/* Couleurs adaptées en mode sombre pour les étiquettes de la sélection de services */
.dark-mode .service-selection label {
  color: #e0e0e0;
}

/* Portfolio grid */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 40px;
}

.portfolio-grid img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

.portfolio-grid img:hover {
  transform: scale(1.03);
}

/* Ensure sections reveal properly when using anchor navigation */
section {
  scroll-margin-top: 100px;
}

/* Footer */
.footer {
  background: #0d253f;
  padding: 20px 0;
  color: #ffffff;
  text-align: center;
  font-size: 0.9rem;
}

.footer .footer-content p {
  margin: 5px 0;
}

/* Section d'introduction sur la page d'accueil */
.intro {
  padding: 80px 0;
  background: #ffffff;
  text-align: center;
}

.intro h2 {
  color: #0d253f;
  font-size: 2rem;
  margin-bottom: 15px;
}

.intro p {
  color: #555;
  max-width: 800px;
  margin: 0 auto 25px;
  font-size: 1rem;
}

.intro-links .btn {
  margin: 5px;
}

/*
 * Sur les écrans étroits, les liens d'introduction sont empilés verticalement pour
 * éviter que les boutons ne se chevauchent. Chaque bouton occupe une large
 * portion de la largeur disponible et est séparé par un espacement suffisant.
 */
@media (max-width: 600px) {
  .intro-links {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .intro-links .btn {
    width: 80%;
    margin: 5px 0;
  }
}

/* Responsive styles */
@media (max-width: 900px) {
  .service-card,
  .why-card {
    flex: 1 1 calc(50% - 20px);
  }
}

@media (max-width: 600px) {
  .navbar .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    height: 100%;
    width: 60%;
    background: #ffffff;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    transition: right 0.3s ease;
  }

  .navbar .nav-links li {
    margin: 15px 0;
  }

  .burger {
    display: flex;
  }

  .hero h1 {
    font-size: 2.5rem;
  }

  .hero p {
    font-size: 1rem;
    padding: 0 20px;
  }

  .service-card,
  .why-card {
    flex: 1 1 100%;
  }
}

/* Mobile nav active state */
/* ===== FIX : liens visibles dans le tiroir mobile ===== */
@media (max-width: 600px) {
  /* Quand le tiroir est ouvert (.nav-active) on force une couleur sombre */
  .navbar .nav-links.nav-active a {
    color: #0d253f !important;      /* lisible sur fond blanc */
  }

  /* Si tu as un bouton styled (ex: .nav-cta), on s'assure qu'il s'affiche bien */
  .navbar .nav-links.nav-active .nav-cta {
    display: inline-block;
  }
}
.nav-active {
  right: 0 !important;
}

/* Burger animation when toggled */
.burger.toggle span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.burger.toggle span:nth-child(2) {
  opacity: 0;
}

.burger.toggle span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/*
 * Scroll reveal animation
 * Les éléments portant la classe 'reveal' commenceront masqués
 * et apparaîtront en douceur lorsque l'utilisateur fait défiler la page.
 */
.reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Effet décalé pour les images du portfolio */
.portfolio .p-item.reveal { transition-delay: 0s; }
.portfolio .p-item.reveal:nth-child(2)  { transition-delay: .05s; }
.portfolio .p-item.reveal:nth-child(3)  { transition-delay: .10s; }
.portfolio .p-item.reveal:nth-child(4)  { transition-delay: .15s; }
.portfolio .p-item.reveal:nth-child(5)  { transition-delay: .20s; }
.portfolio .p-item.reveal:nth-child(6)  { transition-delay: .25s; }
.portfolio .p-item.reveal:nth-child(7)  { transition-delay: .30s; }
.portfolio .p-item.reveal:nth-child(8)  { transition-delay: .35s; }
.portfolio .p-item.reveal:nth-child(9)  { transition-delay: .40s; }
.portfolio .p-item.reveal:nth-child(10) { transition-delay: .45s; }
.portfolio .p-item.reveal:nth-child(11) { transition-delay: .50s; }
.portfolio .p-item.reveal:nth-child(12) { transition-delay: .55s; }

/* Effet haut de gamme sur les images du portfolio */
.portfolio .p-item.reveal {
  transform: translateY(50px) scale(0.98);
  opacity: 0;
  transition: opacity 0.8s ease-out, transform 0.8s ease-out, box-shadow 0.8s ease-out;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.portfolio .p-item.reveal.active {
  transform: translateY(0) scale(1);
  opacity: 1;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

/* Stagger un peu plus lent (0.08s) */
.portfolio .p-item.reveal:nth-child(2)  { transition-delay: 0.08s; }
.portfolio .p-item.reveal:nth-child(3)  { transition-delay: 0.16s; }
.portfolio .p-item.reveal:nth-child(4)  { transition-delay: 0.24s; }
.portfolio .p-item.reveal:nth-child(5)  { transition-delay: 0.32s; }
.portfolio .p-item.reveal:nth-child(6)  { transition-delay: 0.40s; }
.portfolio .p-item.reveal:nth-child(7)  { transition-delay: 0.48s; }
.portfolio .p-item.reveal:nth-child(8)  { transition-delay: 0.56s; }
.portfolio .p-item.reveal:nth-child(9)  { transition-delay: 0.64s; }
.portfolio .p-item.reveal:nth-child(10) { transition-delay: 0.72s; }
.portfolio .p-item.reveal:nth-child(11) { transition-delay: 0.80s; }
.portfolio .p-item.reveal:nth-child(12) { transition-delay: 0.88s; }

/* Accessibilité */
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; transform: none; opacity: 1; }
}

/*
 * Bouton « retour en haut »
 * Ce bouton apparaît lorsque l'utilisateur défile vers le bas
 * et permet de revenir rapidement en haut de la page.
 */
.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: #009688;
  color: #ffffff;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: background 0.3s ease;
}

.back-to-top:hover {
  background: #00b0a8;
}

/*
 * Bouton de bascule du mode sombre
 * Le bouton "darkToggle" est positionné en bas à droite de l'écran pour
 * rester visible quel que soit l'endroit où l'utilisateur se trouve sur la page.
 * Il reprend la forme et le style du bouton de retour en haut pour assurer une
 * cohérence visuelle. Lorsque le mode sombre est activé, la couleur du bouton
 * s'inverse pour fournir un contraste suffisant.
 */
#darkToggle {
  /*
   * Le bouton de bascule du mode sombre est masqué car le thème sombre est
   * désormais permanent. Les propriétés de positionnement et de style
   * restent définies au cas où un jour le bouton serait réintroduit.
   */
  display: none;
}
#darkToggle i {
  pointer-events: none;
}
.dark-mode #darkToggle {
  background: #00b0a8;
  color: #031e3e;
}

/* Mode sombre : en appliquant la classe 'dark-mode' sur le body, les couleurs
   principales sont inversées pour offrir un thème plus foncé. Les arrière‑plans
   deviennent plus sombres et le texte plus clair. */
.dark-mode {
  background: #031e3e;
  color: #e0e0e0;
}
.dark-mode .navbar {
  background: #031e3e;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.dark-mode .navbar .nav-links li a {
  color: #e0e0e0;
}
.dark-mode .navbar .nav-links li a:hover,
.dark-mode .navbar .nav-links li a.active {
  color: #00b0a8;
  border-bottom-color: #00b0a8;
}
.dark-mode .hero {
  /*
   * En mode sombre, la section héroïque conserve l'image de bâtiments mais
   * avec un voile plus sombre pour assurer le contraste. La variation
   * dynamique a été supprimée.
   */
  background: linear-gradient(rgba(3, 30, 62, 0.8), rgba(3, 30, 62, 0.8)), url("images/hero-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #ffffff;
}
.dark-mode .services {
  background: #0a2040;
}
.dark-mode .service-card {
  background: #0f2a4b;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}
.dark-mode .service-card p,
.dark-mode .service-card h3,
.dark-mode .service-card i {
  color: #e0e0e0;
}
.dark-mode .service-popup {
  background: rgba(13, 37, 63, 0.97);
  color: #e0e0e0;
  overflow-y: auto;
}
.dark-mode .why {
  background: #0a2040;
}
.dark-mode .why-card {
  background: #0f2a4b;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}
.dark-mode .why-card h3,
.dark-mode .why-card p,
.dark-mode .why-card i {
  color: #e0e0e0;
}
.dark-mode .contact {
  background: #031e3e;
  color: #e0e0e0;
}
.dark-mode .contact .contact-item {
  border-color: #00b0a8;
  color: #e0e0e0;
}
.dark-mode .contact .contact-item:hover {
  background: #00b0a8;
  color: #031e3e;
}
.dark-mode .service-selection {
  /* Fond légèrement translucide pour contraster avec le fond sombre de la page de contact */
  background: rgba(255, 255, 255, 0.1);
}
.dark-mode .footer {
  background: #031e3e;
  color: #e0e0e0;
}

/* Mode sombre pour la page de contact à fond clair */
.dark-mode .contact-page {
  background: #031e3e;
  color: #e0e0e0;
}
.dark-mode .contact-page .contact-info .contact-item {
  border-color: #00b0a8;
  color: #e0e0e0;
}
.dark-mode .contact-page .contact-info .contact-item:hover {
  background: #00b0a8;
  color: #031e3e;
}
.dark-mode .contact-page .service-selection {
  background: rgba(255, 255, 255, 0.05);
  color: #e0e0e0;
}
.dark-mode .contact-page .service-checkbox label {
  color: #e0e0e0;
}
.dark-mode .contact-page .whatsapp-form textarea {
  background: #0a2040;
  color: #e0e0e0;
  border-color: #0f2a4b;
}
.dark-mode .contact-page button#sendWa {
  background: #009688;
  color: #ffffff;
}

/* Styles spécifiques pour l'introduction et la section À propos en mode sombre */
.dark-mode .intro {
  background: #0a2040;
}
.dark-mode .intro h2,
.dark-mode .intro p {
  color: #e0e0e0;
}
.dark-mode .intro .btn {
  background: #009688;
  color: #ffffff;
}

.dark-mode .about {
  background: #0a2040;
}
.dark-mode .about h2,
.dark-mode .about p {
  color: #e0e0e0;
}

/*
 * Modals pour les détails des services
 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(13, 37, 63, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 2000;
}

.modal.active {
  display: flex;
}

.modal-content {
  background: #ffffff;
  padding: 30px;
  border-radius: 8px;
  max-width: 600px;
  width: 100%;
  position: relative;
  color: #333;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.modal-content .close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 1.5rem;
  color: #0d253f;
  cursor: pointer;
}

/*
 * Page banner
 * Utilisé pour les pages secondaires (about, services, why, contact).
 */
.page-banner {
  background: url('images/hero-bg.png') center/cover no-repeat;
  height: 40vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  text-align: center;
}

.page-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(13, 37, 63, 0.6);
  z-index: 0;
}

.page-banner h1 {
  position: relative;
  font-size: 2.5rem;
  font-weight: 700;
  z-index: 1;
}


/* --- Portfolio --- */
.portfolio {
  background: #f7f9fc;
  padding: 80px 5%;
}

/* Alignement strict du titre Portfolio sur les autres h2 */
.portfolio h2,
#portfolio h2 {
  font-size: 2rem;      /* même valeur que le h2 global */
  line-height: 1.25;    /* cohérent avec tes autres titres */
  font-weight: 700;     /* équivalent du "bold" par défaut des h2 */
  letter-spacing: normal;
  color: #0d253f;       /* identique au h2 global */
  margin-bottom: 20px;  /* même espacement vertical */
  text-align: center;
}


.portfolio .grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.portfolio .p-item {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

.portfolio .p-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.35s ease;
}

.portfolio .p-item:hover img {
  transform: scale(1.04);
}

@media (max-width:900px) {
  .portfolio .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width:600px) {
  .portfolio .grid {
    grid-template-columns: 1fr;
  }
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.lightbox.open {
  display: flex;
}

.lightbox-content {
  position: relative;
  max-width: 92vw;
  max-height: 90vh;
}

.lightbox-content img {
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.lightbox-close {
  top: -14px;
  right: -14px;
  transform: none;
}

.lightbox-prev {
  left: -50px;
}

.lightbox-next {
  right: -50px;
}

@media (max-width:600px) {
  .lightbox-prev { left: 10px; }
  .lightbox-next { right: 10px; }
}

/* ===== HERO SLIDER (fondu + ken-burns) ===== */
.hero-slider { position: relative; height: 100vh; width: 100%; overflow: hidden; }
.hero-slide  { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .7s ease; }
.hero-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.hero-slide.is-leaving{ opacity: 0; visibility: hidden; z-index: 0; }

.hero-slide picture, .hero-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-slide img { transform: scale(1.06); transition: transform 5.5s ease; }
.hero-slide.is-active img { transform: scale(1); }

.hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.55) 100%); }

.hero-content {
  position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; padding: 0 5%;
  height: 100%; display: flex; flex-direction: column; justify-content: center; text-align: left; color: #fff;
}
.hero-content h1, .hero-content h2 { line-height: 1.1; margin-bottom: 12px; text-shadow: 0 2px 20px rgba(0,0,0,0.45); }
.hero-content h1 { font-size: clamp(28px, 5vw, 54px); }
.hero-content h2 { font-size: clamp(24px, 4.2vw, 40px); }
.hero-content p  { font-size: clamp(15px, 2.2vw, 20px); max-width: 780px; opacity: .95; }
.hero-ctas { margin-top: 18px; display: flex; gap: 12px; flex-wrap: wrap; }

.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); border: none; background: rgba(0,0,0,0.45);
  color: #fff; font-size: 28px; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; z-index: 3;
}
.hero-arrow:hover { background: rgba(0,0,0,0.6); }
.hero-arrow.prev { left: 18px; } .hero-arrow.next { right: 18px; }

.hero-dots { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; justify-content: center; gap: 8px; z-index: 3; }
.hero-dots button { width: 10px; height: 10px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.5); }
.hero-dots button[aria-selected="true"] { background: #ffffff; }

@media (max-width: 768px) { .hero-arrow{ display:none; } }

/* ===== PATCH NAV OVERLAY → SOLID (FORCE) ===== */

/* Dimensions logo identiques partout */
.logo__img { height: 100px; width: auto; display: block; }

/* Par défaut, on cache la version claire */
.logo__img--light { display: none; }

/* État overlay (sur le hero) : liens/burger blancs + logo clair */
.navbar.navbar--overlay .nav-links a { color: #ffffff !important; }
.navbar.navbar--overlay .burger span { background: #ffffff !important; }

/* Bascule des deux variantes logo (avec priorité) */
.navbar.navbar--overlay .logo__img--light { display: block !important; filter: brightness(0) invert(1); }
.navbar.navbar--overlay .logo__img--dark  { display: none  !important; }

/* État solid (après scroll) : liens sombres + logo sombre */
.navbar.navbar--solid .nav-links a { color: #0d253f !important; }
.burger span { background: #0d253f; } /* couleur par défaut hors overlay */

.navbar.navbar--solid .logo__img--light { display: none  !important; }
.navbar.navbar--solid .logo__img--dark  { display: block !important; }

/* Comportement et couche */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 5%;
  background: transparent;
  transition: background .25s ease, padding .2s ease, box-shadow .25s ease;
}

/* Quand on scrolle : fond opaque + bande plus basse */
.navbar--solid {
  background: rgba(255,255,255,0.98);
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.navbar--shrink { padding-top: 10px; padding-bottom: 10px; }

/* --- FONDU + ZOOM PLUS DOUX --- */
.hero-slide{
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 1.05s cubic-bezier(.22,.61,.36,1),  /* fondu plus long et plus doux */
    visibility 0s linear 1.05s;                  /* cache la slide après le fondu */
  will-change: opacity;
  backface-visibility: hidden;
}
.hero-slide.is-active{
  opacity: 1;
  visibility: visible;
  transition:
    opacity 1.05s cubic-bezier(.22,.61,.36,1),
    visibility 0s; /* visible immédiatement */
}
.hero-slide.is-active img{
  transform: scale(1);               /* zoom out léger pendant l’affichage */
  transition: transform 6.5s ease;   /* zoom un peu plus long = plus “ciné” */
}
/* Option accessibilité : réduit les anim. si l’utilisateur l’a demandé */
@media (prefers-reduced-motion: reduce){
  .hero-slide,
  .hero-slide.is-active{ transition: none; }
  .hero-slide img{ transition: none; transform: none; }
}

@media (max-width: 600px) {
  .navbar .nav-links.nav-active a { color: #0d253f; }
}

/* Burger FONCÉ dès que le tiroir mobile est ouvert */
.navbar .nav-links.nav-active ~ .burger span {
  background-color: #0d253f !important;
}

/* Liens sombres dans le tiroir, pour éviter le blanc sur blanc */
@media (max-width: 600px) {
  .navbar .nav-links.nav-active a {
    color: #0d253f !important;
  }
}

/* ========== Couleur du burger selon état ========== */

/* 1. Overlay (haut de page, menu fermé) → burger blanc */
.navbar.navbar--overlay .burger span {
  background-color: #ffffff !important;
}

/* 2. Solid (après scroll, menu fermé) → burger foncé */
.navbar.navbar--solid .burger span {
  background-color: #0d253f !important;
}

/* 3. Menu ouvert → burger foncé dans tous les cas */
.navbar .nav-links.nav-active ~ .burger span {
  background-color: #0d253f !important;
}

/* ===== Anti-débordements & anti-zoom mobile ===== */
html, body { overflow-x: hidden; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Sécurité : ne jamais dépasser la largeur de l'écran */
.hero-slider,
.hero-content,
.navbar,
.container,
.section,
footer { max-width: 100%; }

/* Navbar toujours au-dessus du hero & du tiroir */
.navbar { z-index: 10000; }

/* iPhone à encoche : respecter la safe-area */
:root {
  --safe-top: env(safe-area-inset-top);
  --safe-left: env(safe-area-inset-left);
  --safe-right: env(safe-area-inset-right);
}
.navbar { padding-top: calc(18px + var(--safe-top, 0px)); }
body {
  padding-left: var(--safe-left, 0px);
  padding-right: var(--safe-right, 0px);
}

/* Lisibilité burger/tiroir (trois cas) */
.navbar.navbar--overlay .burger span { background-color: #ffffff !important; }
.navbar.navbar--solid   .burger span { background-color: #0d253f !important; }
.navbar .nav-links.nav-active ~ .burger span { background-color: #0d253f !important; }

@media (max-width: 600px) {
  /* Liens sombres quand le tiroir est ouvert (fond clair) */
  .navbar .nav-links.nav-active a { color: #0d253f !important; }
}

/* (Option) si tu veux que le texte du hero ne crée pas de faux "bord blanc"
   réduis le padding latéral du contenu du hero sur mobile */
@media (max-width: 600px) {
  .hero-content { padding-left: 16px; padding-right: 16px; }
}

/* === PATCH RESPONSIVE PROPRE — 15‑08‑2025 === */

/* Bases fluides */
img { max-width: 100%; height: auto; display: block; }
section { padding-block: clamp(48px, 6vw, 100px); }
.container { width: min(92%, 1200px); margin-inline: auto; }

/* iPhone safe-areas */
:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}
.navbar{
  padding-left: calc(5% + var(--safe-left));
  padding-right: calc(5% + var(--safe-right));
}

/* Couleurs du menu selon le contexte */
.navbar.navbar--overlay .nav-links a{ color:#ffffff !important; }
.navbar.navbar--solid   .nav-links a{ color:#0d253f !important; }
.navbar.navbar--overlay .burger span{ background:#ffffff !important; }
.navbar.navbar--solid   .burger span{ background:#0d253f !important; }

/* ===== Menu mobile & tablette (jusqu'à 900px) ===== */
@media (max-width: 900px){
  /* Tiroir (UL) fermé par défaut */
  .navbar .nav-links{
    position: fixed;
    top: 0;
    right: -100%;
    height: 100dvh;
    width: min(86vw, 420px);
    background: #ffffff !important;     /* fond OPAQUE pour le tiroir */
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    overflow-y: auto;
    box-shadow: -20px 0 40px rgba(0,0,0,.12);
    transition: right .3s ease;
    z-index: 1100;
  }
  /* État ouvert */
  .navbar .nav-links.nav-active{ right: 0; }

  /* Liens : texte seulement, pas de rectangles */
  .navbar .nav-links li,
  .navbar .nav-links li a{
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    color: #0d253f !important;          /* lisible sur fond blanc du tiroir */
  }

  /* Burger visible et au-dessus du tiroir */
  .burger{
    display: flex !important;
    position: fixed;
    top: calc(12px + var(--safe-top));
    right: calc(12px + var(--safe-right));
    z-index: 1201;
  }
}

/* Voile sombre derrière le tiroir quand ouvert */
body.nav-open::before{
  content:"";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 1090; /* sous le tiroir (1100) & burger (1201) */
  pointer-events: none;
}

/* Mode paysage compact (téléphones/tablettes) */
@media (orientation:landscape) and (max-height: 480px){
  .navbar{ padding-top: calc(8px + var(--safe-top)); padding-bottom: 8px; }
  .navbar .logo img{ height: clamp(36px, 10vh, 56px) !important; }
}

/* Hero + ancrages */
.hero{ min-height: 100dvh; }
@supports not (height: 100dvh){ .hero{ min-height: -webkit-fill-available; } }
section[id]{ scroll-margin-top: clamp(70px, 12vh, 110px); }

/* Boutons proportionnels */
.btn{
  padding: clamp(10px, 1.2vw, 14px) clamp(20px, 2.2vw, 32px);
  font-size: clamp(14px, 1.4vw, 16px);
}

/* Nettoyage: on s'assure que tout "badge debug" est masqué s'il restait du code */
.responsive-badge{ display:none !important; }
/* === FIN PATCH === */

/* === PORTFOLIO FULLSCREEN FIX — toujours au-dessus de la navbar === */

/* Ta barre fixe reste autour de 1200. On passe le lightbox bien plus haut. */
.navbar{ z-index: 1200; }

/* Tous conteneurs connus de lightbox/modale (couvre glightbox, fslightbox, photoswipe, lightGallery, custom) */
.glightbox-container,
.fslightbox-container,
.pswp,                /* PhotoSwipe */
.lg-outer, .lg-backdrop,   /* lightGallery */
.lightbox.is-open,
.modal.is-open,
.lightbox-open,
[data-lightbox].is-open {
  position: fixed !important;
  inset: 0 !important;
  z-index: 5000 !important;
}

/* Boutons “fermer” des différentes libs + cas custom */
.gclose,                    /* GLightbox */
.pswp__button--close,       /* PhotoSwipe */
.lg-close,                  /* lightGallery */
.fslightbox-toolbar-button, /* fslightbox */
.lightbox__close,
.modal__close {
  position: fixed !important;
  top: calc(16px + env(safe-area-inset-top, 0px)) !important;
  right: calc(16px + env(safe-area-inset-right, 0px)) !important;
  z-index: 5001 !important;              /* au-dessus de l’overlay */
}

/* Quand un lightbox est ouvert, on rend la navbar intouchable pour éviter les clics par dessus */
body.lb-open .navbar{
  pointer-events: none;
  /* optionnel: abaisse le z-index si une lib serait capricieuse */
  z-index: 0;
}

/* === LIGHTBOX FIX (au-dessus du header + fermetures accessibles) === */
.navbar{ z-index: 1200; } /* ok */

.lightbox{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.7);
  z-index: 5000 !important;            /* > à la barre */
}

.lightbox.open{ display: flex; }

.lightbox-close{
  position: fixed !important;
  top: calc(16px + env(safe-area-inset-top, 0px)) !important;
  right: calc(16px + env(safe-area-inset-right, 0px)) !important;
  z-index: 5001 !important;
}

.lightbox-prev, .lightbox-next{
  z-index: 5001 !important;
}

/* Empêche la barre de capter des clics par-dessus quand le lightbox est ouvert */
body.lb-open .navbar{ pointer-events: none; }

/* === LIGHTBOX — flèches lisibles en mobile/tablette === */
.lightbox-prev,
.lightbox-next{
  position: fixed !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 5001 !important;

  /* Zone de clic confortable */
  width: 56px !important;
  height: 56px !important;
  line-height: 56px !important;
  text-align: center !important;

  /* Icône (‹ ›) visible */
  font-size: 30px !important;
  font-weight: 700 !important;
  color: #fff !important;

  /* Lisibilité sur image claire/sombre */
  background: rgba(0,0,0,.45) !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 18px rgba(0,0,0,.25) !important;

  /* Confort tactile */
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* Positionnement latéral + safe-area */
.lightbox-prev{ left: calc(max(12px, 2vw) + env(safe-area-inset-left, 0px)) !important; }
.lightbox-next{ right: calc(max(12px, 2vw) + env(safe-area-inset-right, 0px)) !important; }

/* Effet focus clavier (accessibilité) */
.lightbox-prev:focus-visible,
.lightbox-next:focus-visible{
  outline: 3px solid #00b0a8 !important;
  outline-offset: 2px;
}

/* Hover/pression (si pointeur) */
@media (hover:hover){
  .lightbox-prev:hover,
  .lightbox-next:hover{ background: rgba(0,0,0,.6) !important; }
  .lightbox-prev:active,
  .lightbox-next:active{ transform: translateY(-50%) scale(.96) !important; }
}

/* TABLETTE (≥600px) : un peu plus grand */
@media (min-width:600px) and (max-width:900px){
  .lightbox-prev,
  .lightbox-next{
    width: 64px !important;
    height: 64px !important;
    line-height: 64px !important;
    font-size: 34px !important;
  }
}

/* TRÈS PETITS TÉLÉPHONES (≤360px) : on rapproche un peu du centre */
@media (max-width:360px){
  .lightbox-prev{ left: calc(8px + env(safe-area-inset-left, 0px)) !important; }
  .lightbox-next{ right: calc(8px + env(safe-area-inset-right, 0px)) !important; }
}

/* Icônes sociales sous le bouton WhatsApp (section contact sombre) */
.contact-social{
  margin-top: 18px;
  display: flex;
  justify-content: center;
  gap: 16px;
}

.contact-social .cs-btn{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;                        /* icône blanche */
  background: rgba(255,255,255,.06);  /* pastille translucide */
  border: 2px solid #00b0a8;          /* turquoise de ta charte (hover .primary-btn) */
  transition: transform .15s ease, background .2s ease, border-color .2s ease, color .2s;
}

.contact-social .cs-btn:hover{
  background: #00b0a8;
  border-color: #00b0a8;
  color: #0d253f;                     /* contrasté sur hover */
}

/* petit espace entre le bouton WA existant et les icônes */
.contact .btn-wa{ margin-bottom: 10px; }

.footer .footer-social{ display:none !important; }

/* Réduire l'espace vertical entre les sections */
section {
  padding-top: clamp(20px, 4vw, 40px);
  padding-bottom: clamp(20px, 4vw, 40px);
}

/* Pour la section contact (garde un peu plus d’air) */
#contact {
  padding-top: clamp(20px, 4vw, 40px);
  padding-bottom: clamp(20px, 4vw, 40px);
}

/* Empêche un gros vide avant le footer */
section:last-of-type {
  padding-bottom: clamp(10px, 2vw, 20px);
}

/* Fallback reveal — limité à la section contact (ne pollue pas le reste) */
#contact .force-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .45s ease, transform .45s ease;
  will-change: opacity, transform;
}
#contact .force-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ==== Contact : supprimer le "trou" sous le bouton ==== */

/* 1) Neutralise les hauteurs forcées qui créent le vide */
#contact,
section.contact {
  min-height: auto !important;   /* si "100vh" était défini quelque part */
  height: auto !important;
}

/* 2) Resserre le padding bas de la section contact */
#contact {
  padding-bottom: 12px !important;    /* ajuste à 8–16px selon ton goût */
}

/* 3) Empêche la fusion de marge avec le footer et les derniers enfants */
#contact > *:last-child,
#contact .contact-wa > *:last-child {
  margin-bottom: 0 !important;
}
#contact { border-bottom: 1px solid transparent; }

/* 4) Si un conteneur interne porte du padding bas, on le coupe */
#contact .container {
  padding-bottom: 0 !important;
}

/* 5) Le bouton et (éventuelles) icônes sociales juste au-dessus du footer */
#contact .btn-wa { margin-bottom: 6px !important; }
#contact .contact-social { margin-top: 6px !important; margin-bottom: 0 !important; }

/* 6) Footer : rapproche le contenu sans coller */
footer { padding-top: 10px; margin-top: 0; }

/* 1) Éliminer le délai de tap et l’effet hover piégeux sur mobile */
button, .btn, a {
  touch-action: manipulation;               /* stoppe le 300ms delay iOS/Android */
  -webkit-tap-highlight-color: transparent; /* évite le flash gris sur iOS */
  cursor: pointer;
}

/* Empêcher que le premier tap n’active que :hover sur écrans tactiles */
@media (hover: none) and (pointer: coarse) {
  .btn:hover,
  a.btn:hover { /* garde l’état “normal” au premier tap */
    filter: none;
    transform: none;
  }
}

/* 3) Les icônes ne doivent PAS “manger” les taps */
a i, button i { pointer-events: none; }

/* 4) Ancres internes : éviter que la navbar fixe masque la cible */
header[id], section[id] { scroll-margin-top: 90px; } /* ajuste si ta nav change de taille */

/* (optionnel) robustesse : s’assure que le contenu héro reste cliquable au-dessus des décorations */
.hero, .hero * { position: relative; z-index: 2; }