/* Reset et base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

}



html {
  color-scheme: dark !important;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;

}



body {
  font-family: 'Outfit', sans-serif;
  background: linear-gradient(350deg, #050A17 0%, #030814 100%);
  background-color: #030814;
  color: white;
  min-height: 100vh;
  position: relative;
}



.angle-deco {
  position: absolute;
  top: -12px;
  left: -12px;
  width: auto;
  height: auto;
  z-index: 2;
  pointer-events: none;
}




.angle-deco-1 {
  position: absolute;
  top: 354px;
  right: -85px;
  width: 50px;
  height: 50px;
  transform: rotate(180deg);
}



.angle-deco-2 {
  position: absolute;
  top: -56px;
  right: -55px;
  width: 40px;
  height: 40px;
  transform: rotate(90deg);
}



.container {
  max-width: 1330px;
  margin: 0 auto;
  padding: 0 24px;
}




/* Background decorative dots */
.bg-dots {
  position: absolute;
  top: 0%;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}



/* Header */
header {
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 15px 0;
  margin-top: 0px;
  width: 100%;
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);

  border-bottom: none;
  box-shadow: none;
}

/* Offset ancres pour compenser le header sticky */
#realisations,
#expertise,
#presentation,
#avis,
#call {
  scroll-margin-top: 100px;
}



.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  flex-wrap: wrap;
  gap: 20px;
}

/* 2. On groupe le téléphone et le bouton ensemble */
.header-actions {
  display: flex;
  align-items: center;
  gap: 45px;
  /* Espace propre entre le 06 et le bouton */
}

/* 3. Style du numéro de téléphone (Plus pro) */
.phone-link {
  color: #ffffff;
  font-weight: 600;
  /* Gras pour la lisibilité */
  font-size: 15px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  /* Espace entre l'icône et le chiffre */
  transition: color 0.3s ease;
  white-space: nowrap;
  /* Empêche le numéro de se couper */
}

.phone-link:hover {
  color: #1FFFBD;
  /* Devient Cyan au survol */
}

/* Optionnel : petite animation sur l'icône téléphone */
.phone-icon {
  font-size: 16px;
}



.logo-container {
  display: flex;
  align-items: center;
  gap: 12px;
}



.logo-svg {
  height: 70px;
  width: auto;
  display: block;
}



.border-highlight {
  border: 1px solid #ffffff;
  /* ou #1FFFBD si tu préfères du bleu */
  border-radius: 12px;
  z-index: 2;
}


nav {
  display: none;
  gap: 64px;
}





@media (min-width: 768px) {
  nav {
    display: flex;
  }


}

nav a {
  position: relative;
  text-decoration: none;
  color: rgba(255,255,255,0.65);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.5px;
  transition: color 0.3s ease;
}

nav a::after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: #1FFFBD;
  border-radius: 2px;
  transition: width 0.3s ease;
}

nav a:hover {
  color: #fff;
}

nav a:hover::after {
  width: 16px;
}

/* Lien actif — page courante ou section visible */
nav a.active,
nav a[aria-current="page"] {
  color: #fff;
  font-weight: 500;
}

nav a.active::after,
nav a[aria-current="page"]::after {
  width: 16px;
}



.btn {
  display: flex;
  letter-spacing: 0.5px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 14px;
  padding-right: 10px;
  padding-left: 20px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s;
  border: none;
  cursor: pointer;
  font-size: 14px;
  line-height: .2;
}


.btn-lg {
  padding: 16px 32px;
}

.btn-outline {
  background: transparent;
  color: white;
  border: 1px solid white;
}

.btn-outline {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  /* << important */
  align-items: center;
  justify-content: center;
  background: transparent;
  color: white;
  border: 1px solid white;
  z-index: 0;
}

.btn-outline::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: white;
  z-index: -1;
  transition: left 0.8s ease;
  /* ⏳ fluide mais immédiat */
}

.btn-outline:hover::before {
  left: 0;
}

.btn-outline:hover {
  color: #090C12;
  border-color: white;
}

.btn-outline>* {
  position: relative;
  z-index: 1;
}



.icon-truelle {
  width: 16px;
  height: 16px;
  transition: filter 0.3s ease;
}

.btn-outline:hover .icon-truelle {
  filter: brightness(0) saturate(100%) invert(7%) sepia(6%) saturate(740%) hue-rotate(178deg) brightness(95%) contrast(95%);
}


.btn-primary {
  position: relative;
  overflow: hidden;
  z-index: 0;
  background: linear-gradient(to right, #1FFFBD, #2AC5E1);
  color: #090C12;
  transition: color 0.3s ease;
  box-shadow: 0 0 10px rgba(47, 255, 221, 0.1), 0 0 25px rgba(31, 255, 189, 0.1);
}

.btn-primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: #1FFFBD;
  z-index: -1;
  transform: skewX(-20deg);
  transform-origin: left;
  transition: width 0.4s ease;
}

.btn-primary:hover::before {
  width: 120%;
}

.btn-primary:hover {
  color: #090C12;
}

.btn-primary>* {
  position: relative;
  z-index: 1;
}


.btn-outline {
  background-color: transparent;
  color: white;
  border: 1px solid white;
}



.btn-outline:hover {
  background-color: white;
  color: #090C12;
}



/* Main content */
main {
  position: relative;
  z-index: 10;
  padding: 120px 0;
}



.hero-grid {
  display: grid;
  gap: 8px;
  align-items: center;
}




@media (min-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr 1fr;
  }


}

.hero-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}



.location-badge {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 3px 18px 3px 18px;
  border-radius: 16px;
  background: linear-gradient(to right, rgba(42, 197, 225, 0.08), rgba(31, 255, 189, 0.08));
  color: #ffff;
  font-size: 13px;
  letter-spacing: 0.3px;
  font-weight: 300;
  line-height: 1.6;
  width: fit-content;
}






.gradient-text {
  background: linear-gradient(45deg, #1FFFBD, #3b82f6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}



.chevron-bounce {
  animation: bounce 2s ease-in-out infinite;
  display: block;
  margin: 0 auto;
}



@keyframes bounce {

  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }



  40% {
    transform: translateY(-8px);
  }



  60% {
    transform: translateY(-4px);
  }


}

.hero-description {
  letter-spacing: 0.5px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  font-weight: 300;
  max-width: 900px;
}



.highlight {
  color: #FFFFFF;
  font-weight: 500;
}



.hero-buttons {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}



@media (min-width: 640px) {
  .hero-buttons {
    flex-direction: row;
    justify-content: start;
    gap: 24px;
  }


}

.btn-lg {
  padding: 16px 32px;
  font-size: 14px;
}

@keyframes glow-brightness {

  0%,
  100% {
    filter: blur(100px) brightness(0.5);
  }

  50% {
    filter: blur(100px) brightness(1.3);
  }
}

/* Images */
.image-stack {
  position: relative;
  width: fit-content;
  margin: 0 auto;
  z-index: 1;
}

.image-stack::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, #1FFFBD, transparent 35%);
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  filter: blur(200px);
  border-radius: 50%;
  animation: glow-brightness 10s ease-in-out infinite;

}

.folio-image,
.sub-image {
  position: relative;
  z-index: 2;
  display: block;
}



.bento-wrapper {
  position: relative;
  z-index: 1;
}


.folio-image {
  width: auto;
  max-width: 250px;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 32px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  z-index: 2;
  filter: brightness(1) contrast(1.2) saturate(1.1);

}



.sub-image {
  position: absolute;
  width: 150px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.12);
}



.sub-image-1 {
  top: 200px;
  right: -80px;
  z-index: 2;
}



.sub-image-2 {
  top: -50px;
  right: -50px;
  z-index: 2;
  border-radius: 10px;
}



.chevron-icon {
  display: block;
  width: 18px;
  height: 18px;
  border-right: 2px solid rgba(255,255,255,0.55);
  border-bottom: 2px solid rgba(255,255,255,0.55);
  transform: rotate(45deg);
  margin: 0 auto;
}



/* Bottom section */
.bottom-section {
  position: relative;
  z-index: 10;
  padding: 0px 0 40px;
  text-align: center;
}



.bottom-section h3 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 25px;
}



.icon-house {
  width: 20px;
  height: 20px;
  margin-left: 8px;
  vertical-align: middle;
  filter: brightness(0) saturate(100%) invert(7%) sepia(6%) saturate(740%) hue-rotate(178deg) brightness(95%) contrast(95%);
}






.hero-description {
  animation: fadeInUp 1s ease-out 0.2s both;
}



.hero-buttons {
  animation: fadeInUp 1s ease-out 0.4s both;
}



.hero-buttons {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 48px;
  width: 100%;
}



.hero-buttons .btn {
  flex: 1 1 0;
  width: auto;
  justify-content: center;
}



@media (min-width: 640px) {
  .hero-buttons {
    flex-direction: row;
  }



  .hero-buttons .btn {
    width: 100%;
  }


}

.icon-house {
  width: 18px;
  height: 16px;
  margin-right: 8px;
  vertical-align: middle;
}












*,
:before,
:after {
  box-sizing: border-box
}



body {
  -webkit-font-smoothing: antialiased
}



textarea:focus-visible {
  outline: none
}



button {

  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
}


/** Pour éviter que NOUS DECOUVRIR soit en hyperlink**/
a {
  color: inherit;
  -webkit-text-decoration: inherit;
  text-decoration: inherit
}



#_Background {
  --f2w-order: 0;
  width: 1474px;
  height: 845.7px;
  position: absolute;
  top: -106px;
  left: 0
}



#Grid {
  --f2w-order: 0;
  width: 1440px;
  height: 554px;
  position: absolute;
  top: 292px;
  left: -.1px
}



#BG {
  --f2w-order: 2;
  width: 245px;
  height: 189.8px;
  position: absolute;
  top: 0;
  right: 115px
}



#BG_0 {
  --f2w-order: 3;
  width: 414.1px;
  height: 320.8px;
  position: absolute;
  top: 409px;
  right: 232.9px
}





@media only screen and (max-width:768px) {
  #made-with-f2w-logo {
    width: 32px;
    height: 32px
  }


}


.sparkles-background {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}



.sparkles-background img {
  background-attachment: fixed;
  background-position: center;
  position: absolute;
  pointer-events: none;
  top: 25%;
  right: 18%;
  transform: translateY(-50%);
  width: 600px;
  opacity: 0.5;
}

html {
  scroll-behavior: smooth;
}


.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 300;
  color: white;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  backdrop-filter: blur(6px);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.05);
  margin: 0 auto 24px;
  text-align: center;
}

/* =========================================
   SECTION PRÉSENTATION (FINAL : ZOOM & VISION GAUCHE)
   ========================================= */

.presentation-archi-final {
  padding: 140px 0;
  margin-bottom: 70px;
  position: relative;
  overflow: hidden;
}

.relative-z {
  position: relative;
  z-index: 2;
}

/* --- 1. TEXTURE VISION (Gauche & Discret) --- */
.bg-texture-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.giant-vision-text {
  position: absolute;
  top: 10%;
  left: 8%;
  /* ✅ Décalé à gauche cette fois */
  font-family: 'Outfit', sans-serif;
  font-size: 13vw;
  font-weight: 800;
  color: white;
  opacity: 0.005;
  /* ✅ Encore plus discret */
  line-height: 1;
}

/* --- LAYOUT --- */
.archi-split-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* --- GAUCHE : TEXTE --- */
.archi-text-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tech-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 0.7rem;
  letter-spacing: 1px;
  font-weight: 500;
  margin-bottom: 24px;
}

.pill-icon {
  height: 12px;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.archi-title {
  font-family: 'Outfit', sans-serif;
  font-size: 3.2rem;
  font-weight: 700;
  color: white;
  line-height: 1.1;
  margin-bottom: 24px;
}

.gradient-text {
  background: linear-gradient(45deg, #1FFFBD, #3b82f6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.no-wrap {
  white-space: nowrap;
}

.archi-bio {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 300;
  margin-bottom: 50px;
  max-width: 500px;
}

.archi-bio strong {
  font-weight: 500;
  color: white;
}

/* STATS */
.archi-stats-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
  margin-bottom: 40px;
  /* Espace avant signature */
  padding: 20px 25px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  width: fit-content;
}

.stat-unit {
  display: flex;
  align-items: center;
  gap: 12px;
}

.su-icon {
  font-size: 1.4rem;
}

.su-data {
  display: flex;
  flex-direction: column;
}

.su-val {
  font-size: 1rem;
  font-weight: 700;
  color: white;
  line-height: 1.1;
}

.su-label {
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

.stat-unit.highlight .su-val {
  color: #1FFFBD;
}

.stat-divider {
  width: 1px;
  height: 30px;
  background: rgba(255, 255, 255, 0.1);
}

/* SIGNATURE (ÉPURÉE) */
.archi-signature-clean {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 35px;
  /* On l'éloigne un peu plus des stats */
  width: fit-content;

  /* Le cadre "Pillule" élégant */
  padding: 8px 24px 8px 8px;
  /* Padding plus large à droite pour le texte */
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.03), transparent);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50px;
  /* Arrondi total */

  cursor: default;
  transition: all 0.3s ease;
}

.archi-signature-clean:hover {
  background: linear-gradient(90deg, rgba(31, 255, 189, 0.05), transparent);
  border-color: rgba(31, 255, 189, 0.3);
  /* S'allume en Cyan au survol */
  transform: translateX(10px);
  /* Petit mouvement fluide */
}


/* L'Avatar avec Indicateur de Statut */
.sig-avatar-glow {
  width: 48px;
  height: 48px;
  background: #0C121D;
  color: #1FFFBD;

  /* Bordure technique */
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  position: relative;
  /* Pour placer la pastille */
}

/* ✅ La Pastille "En Ligne/Validé" (Le détail pro) */
.sig-avatar-glow::after {
  content: "";
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 12px;
  height: 12px;
  background: #1FFFBD;
  /* Vert Cyan */
  border: 2px solid #0C121D;
  /* Contour pour la détacher de l'avatar */
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(31, 255, 189, 0.6);
  /* Petit glow */
}

/* Les Textes */
.sig-infos {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.3;
}

.sig-infos strong {
  display: block;
  font-size: 0.95rem;
  color: white;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
}

.sig-infos span {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 400;
}

/* --- DROITE : IMAGE AVEC ZOOM --- */
.archi-visual-col {
  position: relative;
  height: 550px;
  display: flex;
  justify-content: flex-end;
  padding: 20px;
  z-index: 1;
}

/* Le Halo "Magique" derrière l'image */
.archi-visual-col::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -50%);
  /* On le décale un peu vers le centre */
  width: 80%;
  height: 80%;

  /* Lumière Cyan diffuse */
  background: radial-gradient(circle, rgba(31, 255, 189, 0.15), transparent 70%);
  filter: blur(60px);
  /* Le flou qui donne l'ambiance */
  z-index: -1;
  /* Derrière l'image */
  pointer-events: none;
}

.visual-container-zoom {
  position: relative;
  width: 100%;
  height: 100%;
  /* Important : z-index pour passer devant le contour arrière */
  z-index: 2;
  border-radius: 32px;
  /* Ombre portée nette pour décoller l'image du plan arrière */
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);

  /* On s'assure qu'il n'y a pas de débordement pour le zoom */
  overflow: hidden;
}

.visual-container-zoom::before {
  content: "";
  position: absolute;
  /* On le décale vers le haut et la gauche */
  top: -15px;
  left: -15px;
  /* Il fait la même taille que l'image */
  width: 100%;
  height: 100%;
  /* Le style du trait : Fin, Cyan, semi-transparent */
  border-radius: 32px;
  /* Même arrondi */
  /* On le place DERRIÈRE l'image */
  z-index: -1;
  /* Petit effet de transition si besoin */
  transition: all 0.3s ease;
}

.visual-container-zoom:hover::before {
  top: -8px;
  left: -8px;
}

.archi-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Image lumineuse et contrastée */
  filter: brightness(1) contrast(1.2) saturate(1.1);
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border-radius: 32px;
  border: 5px solid rgba(22, 31, 48, 0.377);
}

/* L'EFFET ZOOM AU SURVOL */
.visual-container-zoom:hover .archi-img {
  transform: scale(1.06);
}

/* BADGE VERRE (Coin Bas Droit) */
.badge-glass-corner {
  position: absolute;
  bottom: 30px;
  right: 30px;
  /* ✅ À l'intérieur de l'image */

  /* Effet Verre */
  background: rgba(12, 18, 29, 0.562);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);

  padding: 12px 24px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.808);
}

.bgc-num {
  font-size: 2.2rem;
  font-weight: 800;
  color: #1FFFBD;
  line-height: 1;
}

.bgc-text {
  display: flex;
  flex-direction: column;
}

.bgc-text span {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 1px;
}

.bgc-text strong {
  font-size: 0.85rem;
  font-weight: 700;
  color: white;
  letter-spacing: 1px;
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 1100px) {
  .archi-split-wrapper {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .archi-text-col {
    text-align: center;
    align-items: center;
  }

  .archi-bio {
    margin: 0 auto 40px;
  }

  .archi-stats-row {
    flex-direction: column;
    width: 100%;
    align-items: center;
    gap: 20px;
  }

  .stat-divider {
    display: none;
  }

  .archi-visual-col {
    height: 400px;
    padding: 0;
  }

  .archi-title {
    font-size: 2.5rem;
  }

  .no-wrap {
    white-space: normal;
  }

  /* Sur mobile, Vision repasse derrière tout doucement */
  .giant-vision-text {
    font-size: 30vw;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0.005;
  }

  /* Badge plus petit sur mobile */
  .badge-glass-corner {
    bottom: 20px;
    right: 20px;
    padding: 10px 20px;
  }

  .bgc-num {
    font-size: 1.8rem;
  }
}


/* --- TEXTURE EXPERTISE CENTRÉE --- */
.bg-texture-layer-centered {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  padding-top: -30px;
  justify-content: center;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.giant-expertise-text {
  font-family: 'Outfit', sans-serif;
  font-size: 13vw;
  /* Taille monumentale basée sur la largeur de l'écran */
  font-weight: 900;
  color: white;
  opacity: 0.005;
  /* Très discret pour la texture uniquement */
  letter-spacing: 2vw;
  line-height: 1;
  text-transform: uppercase;
  user-select: none;
}

/* S'assurer que le contenu passe devant le texte géant */
.why-ceram {
  position: relative;
  background: transparent;
  padding: 100px 0 40px;
  overflow: visible;
  /* Laisse l'image déborder en bas */
}

.why-ceram .relative-z {
  position: relative;
  z-index: 2;
}


.why-ceram .container {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 10;
  position: relative;
}

.why-ceram h2 {
  line-height: 1.1;
  font-weight: 500;
  /* ou 500 pour un rendu plus léger */
  letter-spacing: 0.5px;
  font-size: 56px;
  margin-bottom: 1.25rem;

}

.badge-icon {
  height: 16px;
  width: auto;
  display: block;
}

.why-subtitle {
  letter-spacing: .5px;
  font-size: 14px;
  line-height: 1.6;
  max-width: 900px;
  margin: 0 auto 3rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 300;
  padding-bottom: 1rem;
}

/* Grille */
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin: 0 auto;
  margin-top: 40px;
  max-width: 1200px;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 2rem;
  padding-bottom: 30px;
  z-index: 1;
}

.why-card {
  position: relative !important;
  overflow: hidden !important;
  /* Coupe la lumière aux bords */
  z-index: 1;
}

.why-card::before {
  content: "";
  position: absolute;
  bottom: -280px;
  /* Un peu plus bas pour diffuser doucement */
  width: 100%;
  /* Assez large pour faire un beau halo */
  height: 280px;

  /* Cyan un peu plus soutenu pour bien marquer le coup */
  background: radial-gradient(circle, rgba(31, 255, 189, 0.22) 0%, transparent 65%);
  filter: blur(60px);

  z-index: -1;
  pointer-events: none;
  transition: all 0.5s ease;
}

.custom-curve-divider {
  position: absolute;
  /* On le descend de moitié pour qu'il morde sur la section Avis */
  bottom: -250px;
  left: 0;
  width: 100%;
  z-index: 5;
  /* Passe derrière le texte mais devant le fond */
  pointer-events: none;
  /* Pour ne pas bloquer les clics sur les boutons */

  /* ✅ L'effet Figma : Soft Light + Opacité réduite */
  mix-blend-mode: soft-light;
  opacity: 0.15;
  /* Ajuste ici pour que ce soit "moins visible" selon tes goûts */
}

.curve-image {
  width: 100%;
  height: auto;
  display: block;
}

/* On ajuste la marge du bouton pour qu'il soit bien placé au-dessus de l'image */
.expertise-footer-action {
  margin-bottom: 0;
}

/* --- VERSION ORDINATEUR (Directionnelle) --- */
@media (min-width: 1024px) {

  /* Carte GAUCHE (n°1) -> Lumière à Droite (vers le centre de l'écran) */
  .why-card:nth-child(1)::before {
    left: auto;
    right: -100px;
    /* On colle la lumière sur le bord intérieur */
    transform: none;
  }

  /* Carte CENTRE (n°2) -> Lumière au Centre */
  .why-card:nth-child(2)::before {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    /* Centrage parfait */
  }

  /* Carte DROITE (n°3) -> Lumière à Gauche (vers le centre de l'écran) */
  .why-card:nth-child(3)::before {
    left: -100px;
    /* On colle la lumière sur le bord intérieur */
    right: auto;
    transform: none;
  }
}

/* 3. Sécurité : Le texte et l'image doivent passer DEVANT la lueur */
.card-internal-visual,
.card-header-group,
.why-card p,
.card-link {
  position: relative;
  z-index: 2;
  /* Ils flottent au-dessus de la lumière */
}

.expertise-footer-action {
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 5;
  margin-top: 0;
  /* Pas de marge supplémentaire en haut */
  margin-bottom: 160px;
  /* On augmente de 120px à 160px pour bien aérer */
}


/* Cartes */
/* --- STYLE FINAL : PHOTO + ICÔNE + TEXTE GAUCHE --- */

.why-card {
  display: flex !important;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start !important;
  /* Tout à gauche */
  text-align: left !important;

  padding: 24px;
  background-color: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  height: 100%;
  text-decoration: none;
  transition: all 0.3s ease;
}

/* 1. LA PHOTO INTERNE */
.card-internal-visual {
  width: 100%;
  height: 180px;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 24px;
  /* Espace sous la photo */
  border: 1px solid rgba(255, 255, 255, 0.315);
}

.card-internal-visual img {
  filter: brightness(0.9) contrast(1.1) saturate(1.3);
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

/* 2. LE GROUPE ICONE + TITRE */
.card-header-group {
  display: flex;
  align-items: center;
  /* Aligne l'icône et le texte verticalement */
  gap: 12px;
  /* Espace entre icône et titre */
  margin-bottom: 12px;
  width: 100%;
}

/* La petite icône */
.why-icon-small {
  width: 24px;
  /* Plus petite que l'originale pour ne pas voler la vedette à la photo */
  height: 24px;
  filter: brightness(0) invert(1);
  /* Blanc pur */
  opacity: 0.9;
  flex-shrink: 0;
  /* Empêche l'icône de s'écraser */
  transition: filter 0.3s ease;
}

/* Le Titre */
.why-card h3 {
  font-size: 1.1rem;
  font-weight: 500;
  color: white;
  margin: 0;
  /* On retire les marges car géré par le flex gap */
  line-height: 1.3;
}

/* Le Texte descriptif */
.why-card p {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
  font-weight: 300;
  flex-grow: 1;
}

/* Le Lien */
.card-link {
  font-size: 0.9rem;
  color: #1FFFBD;
  font-weight: 600;
  margin-top: 25px;
  display: inline-block;
  transition: transform 0.3s;
}



/* --- HOVER EFFECTS --- */
.why-card:hover {
  background-color: rgba(255, 255, 255, 0.04);
  border-color: rgba(31, 255, 189, 0.3);
  transform: translateY(-5px);
}

.why-card:hover .card-internal-visual img {
  transform: scale(1.08);
  filter: brightness(1);
}

/* L'icône devient Cyan au survol */
.why-card:hover .why-icon-small {
  filter: brightness(0) saturate(100%) invert(60%) sepia(54%) saturate(1080%) hue-rotate(125deg) brightness(102%) contrast(102%);
}

.why-card:hover .card-link {
  transform: translateX(8px);
  text-decoration: underline;
}


.why-icon {
  grid-row: 1;
  grid-column: 1;
  filter: brightness(0) invert(1);
  transition: filter 0.3s ease;
}

.why-card h3 {
  grid-row: 1;
  grid-column: 2;
  font-size: 14px;
  font-weight: 500;
  color: #D8D8D8;
  margin: 0;
  letter-spacing: 0.5px;
}


.chantier-steps-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}


.btn-step {
  font-family: 'Outfit', sans-serif;
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: transparent;
  border: 1px solid transparent;
  color: #1FFFBD;
  font-weight: 500;
  letter-spacing: 0.5px;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 8px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.25s ease;
  margin-bottom: 120px;

}

.btn-icon {
  height: 14px;
  width: 14px;
  margin-right: 0;
  object-fit: contain;
  filter: brightness(1.2) saturate(1.5);
  position: relative;
  top: 1px
}

.btn-step img[src*="contact.svg"] {
  width: 14px !important;
  /* On le force à être plus petit (15px au lieu de 18px) */
  height: 14px !important;
  margin-right: 2px;
  /* Petit ajustement pour compenser la taille */
  position: relative;
  top: 2px
}

.btn-step img[src*="see.svg"] {
  width: 18px !important;
  /* On le force à être plus petit (15px au lieu de 18px) */
  height: 18px !important;
  margin-right: 2px;
  /* Petit ajustement pour compenser la taille */
  position: relative;
  top: 1px
}

.btn-step:hover .btn-icon {
  filter: brightness(0) saturate(100%) invert(60%) sepia(54%) saturate(1080%) hue-rotate(125deg) brightness(102%) contrast(102%);
  transition: none;
}

.btn-step:hover {
  border: 1px solid rgba(255, 255, 255, 0.02);
  background-color: rgba(255, 255, 255, 0.01);
}

.btn-step.active {
  background-color: rgba(255, 255, 255, 0.01);
  border: 1px solid rgba(255, 255, 255, 0.02);
  font-weight: 300;
  color: #1FFFBD;
}

.chantier-stage {
  position: relative;
  isolation: isolate;
  display: flex;
  z-index: 1;
  justify-content: center;
  align-items: flex-start;
  margin: 80px auto;
  width: 100%;
  max-width: 1200px;
}



.chantier-stage-content {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 280px;
  z-index: 3;
}

.chantier-content {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 24px;
}

/* Wrapper global pour texte + progress bar */
.chantier-info-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* Partie gauche avec le h4 + p */
.chantier-infos {
  display: flex;
  flex-direction: column;
}

.chantier-card img.chantier-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

/* Conteneur progress bar (texte + barre) */
.progress-container {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 180px;
}

#progress-text {
  font-size: 13px;
  font-weight: 500;
  color: #ffffff;
}

/* Fond de la progress bar */
.progress-bar {
  flex: 1;
  height: 8px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}



/* =========================================
   SECTION ROADMAP (STYLE FINAL 1400px)
   ========================================= */

/* --- AJUSTEMENT SPÉCIFIQUE POUR LE BLOC PLANIFICATION --- */
.planification {
  position: relative;
  overflow: hidden;
  /* Empêche le texte géant de créer un scroll horizontal */
}

.planification .giant-expertise-text {
  /* On réduit légèrement la taille car le mot est plus long qu'EXPERTISE */
  font-size: 13vw;
  /* On le remonte pour qu'il soit bien derrière le titre principal */
  transform: translateY(-10%);
  opacity: 0.005;
  /* On reste sur la même discrétion que VISION */
}

/* On s'assure que la timeline (roadmap) reste au-dessus */
.planification .relative-z {
  position: relative;
  z-index: 2;
}

.roadmap-wide-section {
  position: relative;
  padding: 100px 0 170px;
  overflow: hidden;
}


/* 1. CONTENEUR GLOBAL (Largeur XXL) */
.roadmap-wide-container {
  position: relative;
  width: 100%;
  max-width: 1400px;
  margin: 40px auto;
  display: flex;
  flex-direction: column;
  z-index: 1;
  padding: 0 20px;
}

/* 2. LA LIGNE CENTRALE (Néon Vertical) */
.roadmap-center-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg,
      rgba(31, 255, 189, 0) 0%,
      #2AC5E1 10%,
      #1FFFBD 90%,
      rgba(31, 255, 189, 0) 100%);
  transform: translateX(-50%);
  z-index: 0;
  /* Elle passe derrière les ronds */
}

/* 3. L'ÉTAGE (Ligne horizontale invisible) */
.roadmap-row {
  position: relative;
  /* Important pour le positionnement absolu du rond */
  display: flex;
  width: 100%;
  margin-bottom: 60px;
  /* Espace entre les étages */
  min-height: 160px;
  /* Hauteur minimale pour l'harmonie */
}

/* 4. LE ROND CENTRAL (Position Absolue au Centre) */
.roadmap-circle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* ✅ C'est ça qui le centre parfaitement */

  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #0C121D;
  /* Couleur de fond du site pour masquer la ligne */
  border: 2px solid #1FFFBD;
  color: #1FFFBD;
  font-weight: 700;
  font-size: 14px;

  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  /* Passe DEVANT la ligne */
  box-shadow: 0 0 50px rgba(59, 63, 62, 0.25);
}

/* On cache l'élément "spacer" qui ne sert plus avec cette méthode */
.roadmap-spacer {
  display: none;
}


/* 5. LA CARTE (Style Expertise Harmonisé) */
.roadmap-card {
  position: relative;
  width: 45%;
  /* Laisse 10% au centre pour le rond */
  z-index: 1;

  box-shadow: 0 0 25px rgba(0, 0, 0, 0.158);

  display: flex;
  /* Mode Flex pour mettre l'icône à gauche */
  align-items: flex-start;
  gap: 24px;
  /* Espace entre icône et texte */

  background-color: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.02);
  box-shadow: #00ffc2;
  border-radius: 12px;
  backdrop-filter: blur(8px);
  padding: 30px 35px;

  transition: transform 0.3s ease, border-color 0.3s ease;
}

/* Positionnement Gauche / Droite automatique */
.roadmap-card.left {
  margin-right: auto;
  /* Pousse la carte à gauche */
  margin-left: 0;
  text-align: left;
}

.roadmap-card.right {
  margin-left: auto;
  /* Pousse la carte à droite */
  margin-right: 0;
  text-align: left;
}

/* --- CONTENU DE LA CARTE --- */

/* Colonne Icône (Simple sans boîte) */
.card-icon-col {
  flex-shrink: 0;
  padding-top: 4px;
  /* Petit alignement optique avec le titre */
  margin-top: -5px
}

.roadmap-icon {
  width: 20px;
  /* Plus petite que l'originale pour ne pas voler la vedette à la photo */
  height: 20px;
  filter: brightness(0) invert(1);
  /* Blanc pur */
  opacity: 0.9;
  flex-shrink: 0;
  /* Empêche l'icône de s'écraser */
  transition: filter 0.3s ease;
}

/* Colonne Texte */
.card-text-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.card-text-col h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  /* Taille validée */
  font-weight: 500;
  color: white;
  margin: 0;
  line-height: 1.3;
}

.card-text-col p {
  font-family: 'Outfit', sans-serif;
  font-size: 0.8125rem;
  /* Taille validée */
  color: rgba(255, 255, 255, 0.65);
  font-weight: 300;
  line-height: 1.6;
  margin: 0;
  margin-bottom: 12px;
}

/* Le Badge Résultat */
.card-result {
  font-size: 0.85rem;
  color: #1FFFBD;
  font-weight: 300;
  background: rgba(31, 255, 189, 0.05);
  padding: 8px 14px;
  border-radius: 6px;
  display: inline-block;
  width: fit-content;
  border: 1px solid rgba(78, 87, 84, 0.1);
}

.card-result strong {
  color: white;
  font-weight: 600;
}


/* --- INTERACTIONS (Survol) --- */
.roadmap-card:hover {
  background-color: rgba(255, 255, 255, 0.04);
  border-color: rgba(59, 63, 62, 0.3);
  transform: translateY(-5px);
}

.roadmap-card:hover .roadmap-icon {
  /* Filtre Cyan au survol */
  filter: brightness(0) saturate(100%) invert(60%) sepia(54%) saturate(1080%) hue-rotate(125deg) brightness(102%) contrast(102%);
}


/* --- MOBILE RESPONSIVE (Tablettes & Téléphones) --- */
@media (max-width: 1024px) {

  /* La ligne passe à gauche */
  .roadmap-center-line {
    left: 24px;
    transform: none;
  }

  /* L'étage devient vertical */
  .roadmap-row {
    flex-direction: column;
    margin-bottom: 40px;
    min-height: auto;
    padding-left: 60px;
    /* On laisse la place à gauche pour la ligne */
  }

  /* Le rond se place sur la ligne à gauche */
  .roadmap-circle {
    background: #090C12;
    left: 24px;
    top: 0;
    /* Collé en haut de la carte */
    transform: translateX(-50%);
    /* Juste centré horizontalement */
    box-shadow: 0 0 15px rgba(31, 255, 189, 0.3), inset 0 0 10px rgba(31, 255, 189, 0.1);
    margin-top: 0;
  }

  /* La carte prend toute la largeur restante */
  .roadmap-card.left,
  .roadmap-card.right {
    width: 100%;
    margin: 0;
  }

  /* Sur mobile très petit, on empile icône et texte */
  @media (max-width: 480px) {
    .roadmap-card {
      flex-direction: column;
      gap: 16px;
    }
  }
}

/* --- AMBIANCE LUMINEUSE --- */
.ambient-glow {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  filter: blur(100px);
  /* Le flou magique */
  opacity: 0.15;
  /* Juste assez pour être subtil */
  z-index: 0;
  /* Derrière tout */
  pointer-events: none;
}

.glow-top {
  background: radial-gradient(circle, #1FFFBD 0%, transparent 70%);
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
}

.glow-bottom {
  background: radial-gradient(circle, #00C2FF 0%, transparent 70%);
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
}

/* CTA FINAL EN BAS */
.roadmap-footer-cta {
  text-align: center;
  margin-top: -20px;
  margin-bottom: 120px;
  position: relative;
  z-index: 2;
}

.roadmap-footer-cta .btn {
  display: inline-flex;
  /* S'adapte au contenu du texte */
  width: auto;
  /* Sécurité pour annuler le 100% */
  margin-top: 0px;
  /* Un peu d'air avec le texte au-dessus */
}

.roadmap-footer-cta p {
  color: rgba(255, 255, 255, 1);
  font-size: 1rem;
  margin-bottom: 24px;
}

/* Remplissage de la progress bar */
.progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(to right, #2AC5E1, #1FFFBD);
  border-radius: 10px;
  transition: width 0.3s ease-in-out;
}

/* Fond cyan arrière */
.chantier-stage-base {
  position: absolute;
  top: 150px;
  width: 100%;
  height: 500px;
  background: linear-gradient(180deg, #04788D 0%, #1FFFBD 150%);
  box-shadow: 0 12px 60px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 0 1px #ffffff28;
  border-radius: 16px;
  overflow: hidden;
  /* masque tout débordement */
  z-index: 0;
}

/* Logo contour dans fond cyan */
.chantier-stage-base::before {
  content: "";
  position: absolute;
  top: 120%;
  left: 52%;
  transform: translate(-50.5%, -50%);
  width: 1900px;
  height: 1900px;
  background: url("../images/logo_background_opacity6.png") center/contain no-repeat;
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
}


/* Boîte sombre flottante */
.chantier-stage-box {
  position: absolute;
  margin-top: 12px;
  top: -180px;
  width: 100%;
  max-width: 1044px;
  height: auto;
  border-radius: 16px;
  background-color: #0C121D;
  box-shadow: 0 12px 60px rgba(0, 0, 0, 0.6);
  box-shadow: inset 0 0 0 1px #ffffff07;
  z-index: 2;
  padding: 26px 24px 24px 24px;
  /* 26px top pour alignement avec boutons */
  overflow: hidden;
}

/* Barre "navigateur" centrée */
.chantier-stage-barre {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  padding: 6px 80px;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 200;
  color: #ffffff;
}

.chantier-stage-barre img {
  height: 12px;
  filter: brightness(0) invert(1) opacity(0.7);
}

.chantier-stage-title {
  text-align: center;
  z-index: 3;
  position: relative;
}

.chantier-stage-title h3 {
  font-size: 16px;
  color: #090C12;
  font-weight: 400;
}



/* Pastilles en haut à droite */
.chantier-window-buttons {
  position: absolute;
  top: 24px;
  right: 32px;
  display: flex;
  gap: 10px;
  z-index: 3;
}

.btn-win {
  width: 28px;
  height: 28px;
  border-radius: 25%;
  background-color: rgba(255, 255, 255, 0.04);
  transition: background-color 0.3s ease;
}

.btn-win:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

.chantier-stage-menu {
  margin-left: 60px;
  margin-right: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 80px;
  margin-bottom: 40px;
}

.chantier-logo img {
  height: 40px;
  opacity: 0.4;
  filter: blur(4px);
}

.chantier-tabs {
  display: flex;
  gap: 16px;
}

.tab-placeholder {
  width: 64px;
  height: 18px;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.08);
  filter: blur(1px);
  opacity: 0.3;
}


.chantier-boxes {
  display: flex;
  gap: 42px;
}

.chantier-box {
  width: 70px;
  height: 26px;
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 0.06);
  opacity: 0.4;
  filter: blur(4px);
}

.chantier-box.long {
  width: 110px;
  margin-left: 64px;
}

.chantier-tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.group-center {
  display: flex;
  gap: 38px;
}

.chantier-content {
  margin: 0 auto;
  margin-top: 40px;
  max-width: 90%;
  background-color: rgba(217, 217, 217, 0.05);
  padding: 32px 40px;
  border-radius: 16px;
  color: white;
  text-align: left;
}

.chantier-content h4 {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
  letter-spacing: 0.5px;
}

.chantier-content p {
  letter-spacing: 0.5;
  font-size: 0.8125rem;
  line-height: 1.5;
  font-weight: 200;
  color: rgba(255, 255, 255, 0.5);
}

.chantier-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  align-items: stretch;
  margin-top: 0px;
}

.chantier-card {
  flex: 1;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  padding: 24px;
  color: white;
  position: relative;
  border: 1px solid transparent;
  /* ✅ ligne stable */
  transition: all 0.3s ease;
}

.card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.card-icon {
  width: 20px;
  height: 20px;
  opacity: 0.8;
}

.chantier-card .card-check {
  width: 16px;
  height: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  display: inline-block;
  transition: all 0.3s ease;
}

.chantier-card .card-check.active {
  background-color: #00ffc2;
  border-color: #00ffc2;
}

.card-check {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background-color: transparent;
}

.card-check.active {
  background-color: #1fffbd;
  border-color: #1fffbd;
  mask: url("/images/checkbox.svg") center / contain no-repeat;
  -webkit-mask: url("/images/checkbox.svg") center / contain no-repeat;
}

.chantier-card.completed {
  background-color: rgba(255, 255, 255, 0.05);
}

.chantier-card h5 {
  font-size: 12px;
  letter-spacing: 0.5px;
  font-weight: 400;
  margin-top: 20px;
  margin-bottom: 4px;
}

/* Texte card description */
.chantier-card p {
  letter-spacing: 0.5;
  font-size: 0.8125rem;
  line-height: 1.5;
  font-weight: 200;
  color: rgba(255, 255, 255, 0.5);
}


/* 🟤 état repos sombre */
.chantier-card {
  background-color: rgba(255, 255, 255, 0.02);
  border: 1px solid transparent;
  transition: all 0.3s ease;
}

/* 🌕 hover plus clair */
.why-card:hover,
.why-card.active,
.chantier-card:hover,
.chantier-card.active {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.02);
}

/* Texte éclairci au hover */
.why-card:hover h3,
.why-card:hover p,
.chantier-card:hover h5,
.chantier-card:hover p {
  color: rgba(255, 255, 255, 0.85);
}

.xp-right{
  display: block;
  text-align: right;
  margin-top: .25rem;
  font-size: .9rem;
  letter-spacing: .03em;
    font-style: italic;

}

.xp-years{
  color: #00ffc2;          /* ton vert/turquoise */
  font-weight: 400;
  font-size: 1.1em;
  position: relative;
}




/* Nouvelle amélioration du CSS */

/* grands titres */
h1,
.section-title {
  font-size: 3.5rem;
  font-weight: 500;
  color: #ffffff;
  line-height: 1.2;
}

/* descriptions titres */
h2,
.section-subtitle {
  font-size: 0.875rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.8;
  margin-bottom: 16px;
  margin-top: 10px;
}

.section-title-small {
  font-size: 2.5rem;
  font-weight: 400;
  color: #FFFFFF;

}

.chantier-card h5 {
  font-size: 14px;
  font-weight: 600;
  color: #D8D8D8;
}

.trust {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0px 0
}


.trust .pill {
  font-size: 13px;
  padding: 8px 24px;
  border: 1px dashed #b3cfc746;
  border-radius: 999px;
  color: #E9F0F5
}

.pill:hover {
  background: rgba(31, 255, 188, 0.027);
}


.why-card p {
  grid-row: 2;
  grid-column: 1 / span 2;
  margin: 0.5rem 0 0;
  letter-spacing: 0.5;
  font-size: 0.8125rem;
  line-height: 1.5;
  font-weight: 200;
  color: rgba(255, 255, 255, 0.5);
}

.chantier-cta-impact {
  margin-top: 725px;
  padding: 80px 20px;
  text-align: center;
  position: relative;
  z-index: 3;
}

.cta-subtitle-wide {
  font-size: 12px;
  margin-top: 140px;
  text-transform: uppercase;
  letter-spacing: 6px;
  /* ✅ pour étirer visuellement */
  color: #010E16;
  font-weight: 600;
}

.cta-text {
  font-size: 2rem;
  font-weight: 600;
  color: #010E16;
  margin-top: 8px;
  margin-bottom: 32px;
  line-height: 1.2;
  max-width: 600px;
  margin-inline: auto;
}

.btn-dark {
  background-color: #0C121D;
  color: #00ffc2;
  padding: 16px 78px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.8px;
  border: none;
  border-radius: 8px;
  transition: all 0.3s ease;
  margin-bottom: 250px;

}

.btn-dark:hover {
  background-color: #010E16;
  color: #00ffc2;
}

@media (max-width: 768px) {
  .btn-dark {
    padding: 16px 42px;
  }
}

.filter-menu {
  margin-top: 100px;
  margin-bottom: 35px;
}

.filter-menu ul {
  display: flex;
  gap: 8px;
  background-color: #0C121D;
  padding: 4px 4px;
  border-radius: 14px;
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 12px;
  letter-spacing: 0.5px;
  padding: 16px 24px;
  font-size: 0.95rem;
  font-weight: 300;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-item img {
  height: 20px;
  width: 20px;
  filter: brightness(1.2);
}

.filter-item:hover {
  background-color: #090C12;
}

.filter-item.active {
  background-color: #090C12;
  color: #1FFFBD;
  font-weight: 300;
}


/* Conteneur global de la section témoignages/réalisations */
.realisation-section {
  display: flex;
  gap: 80px;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 80px;
  margin-bottom: 120px;
}

.realisation-description {
  max-width: 480px;
  margin-bottom: 3rem;
  text-align: left;
}

.realisation-tags {
  margin: 1rem 0 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.tag {
  background-color: #540096;
  color: #D2AFEE;
  font-size: 0.75rem;
  padding: 2px 10px;
  border-radius: 4px;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.button-secondary {
  margin-top: 50px;
  display: inline-flex;
  align-items: center;
  background-color: #f1f5f9;
  color: #010E16;
  padding: 12px 48px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: background 0.3s ease;
  text-decoration: none;
}

.button-secondary:hover {
  background-color: #b8bcc0;
}


.project-card {
  width: 330px;
  height: 430px;
  background: #010e16;
  border-radius: 1.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  margin-bottom: 150px;
}

.card-tag {
  position: absolute;
  top: 1rem;
  height: 32px;
  line-height: 32px;
  right: 1rem;
  background: rgba(255, 255, 255, 0.8);
  /* blanc avec 85% d'opacité */
  color: #090C12;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 10px;
  z-index: 2;
}

.card-tag img {
  filter: brightness(0) invert(0.05) sepia(1) saturate(1000%) hue-rotate(180deg);
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: inherit;
}

.card-image-wrapper {
  height: 200px;
  border-radius: 1rem 1rem 0 0;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.2);
  position: relative;
}

.card-content {
  padding: 1.2rem;
  color: white;
  position: relative;
  z-index: 1;
}

.card-location {
  text-align: left;
  font-weight: 300;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.7);
  /* Blanc à 60% */
  margin-bottom: 0.2rem;
}

.card-title {
  text-align: left;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 0.4rem;
  letter-spacing: 0.5px;
  line-height: 1.2;
}

.card-quote {
  line-height: 2;
  text-align: left;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.75);
  /* Blanc à 75% */
  margin-bottom: 0.1rem;
}

.card-quote img {
  width: 14px;
  font-weight: 300;
  letter-spacing: 1px;
  margin-right: 0.4rem;
  vertical-align: middle;
}

.card-rating {
  color: #1fffbd;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.btn-card {
  display: inline-block;
  align-items: center;
  background: linear-gradient(to right, #1fffbd, #00c6ff);
  color: #090C12;
  font-weight: 700;
  padding: 8px 20px 6px 20px;
  /* haut 8px, droite 20px, bas 8px, gauche 20px */
  border-radius: 8px;
  font-size: 12px;
  text-decoration: none;
  transition: background 0.3s ease;
  line-height: 1;
}

.btn-card:hover {
  background: #1fffbd;
}

.project-card.has-background {
  position: relative;
  background-image: url('/images/St-jean-illac.jpg');
  filter: brightness(0.8) contrast(1.3);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: white;
  padding: 0.2rem;
  border-radius: 1.5rem;
  width: 330px;
  height: 430px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);
}

.project-card.has-background::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
      rgba(156, 70, 21, 0.2) 8%,
      rgba(8, 16, 21, 0.7) 80%);

  z-index: 0;
}

.project-card.has-background::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid rgba(255, 255, 255, 0.3);
  mix-blend-mode: soft-light;
  pointer-events: none;
  z-index: 1;
}

.project-card .card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  text-align: left;
}

.card-quote-rating {
  display: flex;
  align-items: center;
  gap: 0px;
  margin-bottom: 12px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 300;
  flex-wrap: wrap;
  /* pour éviter overflow si espace trop petit */
}

.card-quote-rating p.card-quote {
  margin: 0;
  display: flex;
  align-items: center;
  font-style: italic;
}

.card-quote-rating p.card-quote img {
  width: 14px;
  height: auto;
  vertical-align: middle;
}

.quote-author {
  margin-left: 4px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
  /* pour éviter que Laura ne passe à la ligne */
}

.stars-img {
  height: 14px;
  align-items: center;
  margin-left: auto;
  /* pousse les étoiles à l'extrême droite */
}

.btn-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
  margin-left: 12px;
  transform: translateY(-1.5px);
  /* décale l'icône vers le bas */
}

/* --- SLIDER AVIS (CAROUSEL) --- */

.avis-slider-wrapper {
  position: relative;
  width: 100%;
  max-width: 1400px;
  margin: 40px auto 0;
  display: flex;
  align-items: center;
}

/* La piste qui défile */
.avis-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  /* Permet le scroll horizontal */
  scroll-behavior: smooth;
  /* Défilement fluide */
  padding: 40px 10px;
  /* Espace pour l'ombre et le hover */

  /* Snap pour que les cartes s'alignent bien à l'arrêt */
  scroll-snap-type: x mandatory;

  /* Cacher la scrollbar */
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE/Edge */
}

.avis-track::-webkit-scrollbar {
  display: none;
  /* Chrome/Safari */
}

/* Force les cartes à garder leur largeur et ne pas s'écraser */
.avis-card {
  flex: 0 0 350px;
  /* Largeur fixe de la carte */
  scroll-snap-align: center;
  /* La carte se cale au milieu */
  height: auto;
  overflow: visible !important;
  margin-top: 15px;
}

/* Responsive mobile : cartes un peu moins larges */
@media (max-width: 768px) {
  .avis-card {
    flex: 0 0 300px;
  }
}

/* BOUTONS DE NAVIGATION */
.slider-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.05);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 5;
  flex-shrink: 0;
  /* Empêche le bouton de s'écraser */
}

.slider-btn img {
  width: 14px;
  filter: brightness(0) invert(1);
}

.slider-btn:hover {
  background: #1FFFBD;
  border-color: #1FFFBD;
  box-shadow: 0 0 15px rgba(31, 255, 189, 0.4);
}

.slider-btn:hover img {
  filter: brightness(0);
  /* Devient noir sur fond cyan */
}

/* Positionnement des boutons */
.slider-btn.prev {
  margin-right: 16px;
}

.slider-btn.next {
  margin-left: 16px;
}

/* Mobile : on cache les boutons (le swipe suffit) */
@media (max-width: 768px) {
  .slider-btn {
    display: none;
  }

  .avis-slider-wrapper {
    width: 100%;
    padding: 0 20px;
  }

  .avis-track {
    padding-right: 40px;
  }

  /* Espace pour voir qu'il y a une suite */
}

/* La carte en colonne, pour contrôler l’ordre visuel */
.why-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: 36px;
  /* pour ne pas que le badge chevauche le h3 */
}

/* Badge en haut */
.avis-badge {
  position: absolute;
  top: -15px;
  right: 52px;
  /* ou right:12px si tu préfères */
  background: #6d4aff;
  color: #fff;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(109, 74, 255, 0.3);
  z-index: 10;
}

/* --- CORRECTION TITRE AVIS --- */

/* --- OPTIMISATION POUR LA SECTION AVIS --- */
.section-avis {
  position: relative;
  overflow: hidden;
  z-index: 2;
  padding: 100px 0;
}

.section-avis .avis-head {
  width: 100%;
  max-width: 900px;
  margin: 0 auto 60px;
  text-align: center;
}

.section-avis .why-card::before {
  content: "❝";
  position: absolute;
  top: -10px;
  right: 20px;
  font-size: 120px;
  line-height: 1;
  color: #ffffff;
  opacity: 0.05;
  font-family: serif;
  pointer-events: none;
  z-index: 0;
  /* Niveau 0 */
}

.user {
  display: flex;
  align-items: center;
  gap: 10px;
  /* espace entre la photo et le texte */
}

/* Titre + description restent collés en haut */
.why-card h3 {
  margin: 0 0 5px;
}

.avis-text {
  margin: 0 0 12px;
  color: #a9b7c7;
}

.avis-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.avis-client {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* gauche ↔ droite */
  gap: 64px;
  width: 100%;
}

/* On cible spécifiquement le sous-titre de la section contact */
.contact .section-subtitle {
  margin-bottom: 60px !important;
  /* Augmente l'espace avant la carte prestige */
  max-width: 700px;
  /* Optionnel : resserre le texte pour plus d'élégance */
  margin-left: auto;
  margin-right: auto;
}


.contact .avis-head {
  position: relative;
  text-align: center;
  max-width: 800px;
  /* optionnel : largeur max pour le paragraphe */
  margin-left: auto;
  margin-right: auto;
}

.contact .avis-head h1 {
  margin-bottom: 12px;
  /* espace entre le titre et le texte */
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.contact .avis-head p {
  margin: 0 auto 24px;
  /* espace dessous + centré */
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}


.avis-link {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  text-decoration: none;
  padding-bottom: 2px;
  transition: all 0.3s ease;
}

.avis-link:hover {
  text-decoration: underline;
  color: #1fffbd;
  /* ton cyan */
}

.avis-note {

  color: #1FFFBD;
  font-weight: 400;
  font-size: 15px;
  text-shadow: 0 0 12px rgba(31, 255, 189, 0.4);
  margin-bottom: 16px;
  margin-top: 16px;
  display: inline-block;
}

.user .name {
  font-weight: 500;
}

.user .city {
  font-size: 12px;
  color: #9fb0bf;
}

.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  /* cercle */
  object-fit: cover;
  /* recadre bien */
  border: 1px solid rgba(255, 255, 255, 0.15);
  /* petit contour subtil */
}


/* Grille de cartes */
/* --- SECTION CONTACT PRESTIGE --- */

/* On centre le tout et on ajoute une lueur derrière */
.contact {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 100px 0 150px;
  /* Espace avant le footer */
}

/* LA CARTE GLOBALE (Unifiée) */
.contact-prestige-card {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  /* Mobile d'abord */
  width: 100%;
  max-width: 1100px;
  /* Largeur contenue pour l'élégance */
  background: rgba(255, 255, 255, 0.02);
  /* Fond très sombre */
  backdrop-filter: blur(12px);
  /* Effet verre */
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 40px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  /* Grosse ombre portée */
  margin: 0 auto;
}

/* Lueur Cyan derrière la carte (Subtile) */
.contact-prestige-card::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -50%;
  width: 80%;
  height: 200%;
  background: radial-gradient(circle, rgba(31, 255, 189, 0.05), transparent 70%);
  transform: rotate(30deg);
  pointer-events: none;
}

/* --- CÔTÉ GAUCHE (Texte) --- */
.contact-text-side {
  margin-bottom: 32px;
  text-align: center;
}

/* Titre : Même taille que les autres cartes (Expertise/Avis) */
.contact-text-side h3 {
  font-size: 22px;
  /* Était à 28px, on réduit */
  font-weight: 600;
  color: white;
  margin-bottom: 12px;
  letter-spacing: 0.5px;
}

/* Paragraphe : Plus fin et discret */
.contact-text-side p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  /* Taille standard du corps de texte */
  line-height: 1.6;
  font-weight: 300;
  max-width: 400px;
  /* Évite que les lignes soient trop longues */
}

.contact-availability {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 6px 16px;
  background: rgba(31, 255, 189, 0.1);
  border-radius: 20px;
  color: #1FFFBD;
  font-size: 12px;
  font-weight: 500;
}

.dot-live {
  width: 8px;
  height: 8px;
  background-color: #1FFFBD;
  border-radius: 50%;
  box-shadow: 0 0 8px #1FFFBD;
  animation: pulse 2s infinite;
}

/* --- SÉPARATEUR --- */
.contact-divider {
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  margin: 0 0 32px 0;
}

/* --- CÔTÉ DROIT (Actions) --- */
.contact-action-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

/* Les Lignes Cliquables */
.action-row {
  display: flex;
  align-items: center;
  padding: 16px 24px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.icon-box {
  font-size: 20px;
  margin-right: 16px;
  filter: grayscale(1);
  transition: filter 0.3s ease;
}

.action-details {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  /* Pousse la flèche à droite */
}

.action-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 2px;
}

.action-value {
  color: white;
  font-weight: 600;
  font-size: 16px;
}

.action-arrow {
  color: rgba(255, 255, 255, 0.3);
  font-size: 18px;
  transition: transform 0.3s ease, color 0.3s ease;
}

/* --- HOVER EFFECTS (L'interaction) --- */
.action-row:hover {
  background: rgba(31, 255, 189, 0.05);
  border-color: rgba(31, 255, 189, 0.3);
  transform: translateX(5px);
}

.action-row:hover .action-arrow {
  color: #1FFFBD;
  transform: translateX(5px);
}

.action-row:hover .icon-box {
  filter: grayscale(0);
}

/* --- RESPONSIVE DESKTOP (Mise en page horizontale) --- */
@media (min-width: 900px) {
  .contact-prestige-card {
    flex-direction: row;
    /* On passe en ligne */
    align-items: center;
    padding: 50px;
    gap: 40px;
  }

  .contact-text-side {
    text-align: left;
    margin-bottom: 0;
    flex: 1;
    /* Prend la moitié */
  }

  .contact-divider {
    width: 1px;
    height: 150px;
    /* Hauteur verticale */
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    margin: 0;
  }

  .contact-action-side {
    flex: 1;
    /* Prend l'autre moitié */
  }
}


/* --- FOOTER SIGNATURE --- */

/* --- FOOTER : VERTICALITÉ & HARMONIE --- */
.site-footer {
  position: relative;
  background-color: #03070E;
  padding: 100px 0 40px;
  overflow: hidden;
}

/* ✅ LE UNIQUE EN SOCLE (Tout en bas) */
.site-footer::before {
  content: "UNIQUE";
  position: absolute;
  bottom: -100px;
  /* ✅ Calé au niveau des mentions légales */
  right: -150px;
  font-size: 20vw;
  font-weight: 900;
  color: white;
  opacity: 0.002;
  pointer-events: none;
  z-index: 0;
}

/* Grille 4 colonnes stable */
.footer-grid {
  display: grid !important;
  grid-template-columns: 1.4fr 0.8fr 1.2fr 1fr;
  gap: 50px;
  position: relative;
  z-index: 1;
  margin-bottom: 80px;
}

/* ✅ NAVIGATION & CONTACT : Strictement Vertical */
.footer-nav,
.footer-contact-list {
  margin-top: 25px;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px;
}

.footer-nav a,
.contact-item {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  font-size: 14px;
  font-weight: 300;
  transition: color 0.3s ease;
  display: block;
}

/* ✅ SUPPRESSION DU TIRET AU HOVER */
.footer-nav a::after {
  content: none !important;
  /* Retire la ligne du header */
}

.footer-nav a:hover,
.contact-item:hover {
  color: #1FFFBD;
}

/* ✅ STYLE DES TAGS TECHNIQUES */
.footer-tags {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 24px;
}

.tag-pro {
  display: flex;
  justify-content: left;
  /* Centre le texte dans le badge */
  width: 50%;
  /* ✅ Force les deux à la même largeur que le parent */
  font-size: 11px;
  color: #1FFFBD;
  background: rgba(31, 255, 189, 0.03);
  border: 1px solid rgba(31, 255, 189, 0.1);
  padding: 8px 16px;
  border-radius: 6px;
  white-space: nowrap;
  /* Évite les retours à la ligne */
}

/* Horaires */
.opening-hours {
  list-style: none;
  padding: 0;
  margin-top: 25px;
}

.opening-hours li {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 12px;
}

/* Bas de page harmonisé */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 30px;
  position: relative;
  z-index: 1;
}

.footer-bottom-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.38);
}

.legal-links-bottom {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}

.legal-links-bottom a {
  margin-left: 20px;
  text-decoration: none;
  color: inherit;
  padding: 6px 0;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}

.legal-links-bottom a:hover {
  color: white;
}

/* Lien téléchargement attestation décennale */
.footer-pdf-link {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  color: rgba(31, 255, 189, 0.6) !important;
  margin-left: 12px !important;
  padding-left: 18px !important;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  transition: color 0.2s;
  white-space: nowrap;
}

.footer-pdf-link:hover {
  color: #1FFFBD !important;
}

.footer-pdf-icon {
  flex-shrink: 0;
  display: block;
}

@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-tags,
  .footer-nav,
  .opening-hours li {
    align-items: center;
    justify-content: center;
  }

  .footer-bottom-flex {
    flex-direction: column;
    gap: 15px;
  }
}

/* Barre de statut en bas de la carte contact */
/* --- FOOTER CONFIANCE (SÉCURITÉ) --- */

.card-footer-trust {
  /* Ligne fine de séparation */
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 40px;
  padding-top: 25px;

  display: flex;
  justify-content: center;
  /* Centré pour faire "Sceau de qualité" */
  align-items: center;
  gap: 30px;

  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 400;
  width: 100%;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Garantie décennale cliquable (téléchargement) */
.trust-dl-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}
.trust-dl-link strong {
  color: #fff;
  transition: color 0.2s;
}
.trust-dl-link:hover {
  color: rgba(255, 255, 255, 0.85);
}
.trust-dl-link:hover strong {
  color: #1FFFBD;
}
.trust-dl-hint {
  font-size: 10px;
  color: rgba(31, 255, 189, 0.55);
  font-weight: 600;
  margin-left: 3px;
  letter-spacing: 0.2px;
  transition: color 0.2s;
}
.trust-dl-link:hover .trust-dl-hint {
  color: #1FFFBD;
}

/* Icône Bouclier (Décennale) */
.shield-icon {
  font-size: 16px;
  /* On peut mettre une couleur dorée ou cyan pour le prestige */
  filter: drop-shadow(0 0 5px rgba(31, 255, 189, 0.2));
}

.check-icon {
  color: #1FFFBD;
  font-weight: bold;
}

/* Petit point de séparation */
.sep-dot {
  width: 3px;
  height: 3px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
}

/* Mobile */
@media (max-width: 600px) {
  .card-footer-trust {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .sep-dot {
    display: none;
  }
}

/* Page mentions légales améliorée */
.legal-page {
  padding: 100px 0 100px;
  counter-reset: legal-sec;
}

.legal-hero {
  text-align: center;
  margin-bottom: 56px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.legal-hero .tech-pill {
  margin-bottom: 28px;
}

.legal-hero h1 {
  margin-bottom: 14px;
}

.section-subtitle {
  color: rgba(255, 255, 255, .7);
  font-size: 14px;
}

.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
  /* <-- ajoute ça */
  margin-top: 12px;
  font-size: 12px;
  color: rgba(255, 255, 255, .6);
}

.badge-soft {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(31, 255, 189, .14);
  color: #1FFFBD;
  border: 1px solid rgba(31, 255, 189, .28);
}

.legal-block {
  counter-reset: none !important;
  background: linear-gradient(160deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,.02) 100%);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px;
  padding: 24px 28px;
  margin-bottom: 16px;
  transition: border-color 0.25s;
}
.legal-block:hover {
  border-color: rgba(255,255,255,.14);
}

.legal-block h2::before {
  counter-increment: legal-sec;
  content: counter(legal-sec) ". ";
  color: #1FFFBD;
  font-weight: 800;
  opacity: 1;
  margin-right: 2px;
}

.legal-block h2 {
  font-size: 16px;
  font-weight: 600;
  color: rgba(255,255,255,0.92);
  letter-spacing: -0.1px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.legal-block p {
  color: rgba(255,255,255,.75);
  line-height: 1.65;
}

.legal-block a {
  color: #1FFFBD;
  text-decoration: none;
}

.legal-block a:hover {
  text-decoration: underline;
}

/* Liste alignée type "fiche pro" */
.legal-dl {
  display: grid;
  grid-template-columns: 200px 1fr;
  row-gap: 8px;
  column-gap: 16px;
  margin-top: 10px;
}

.legal-dl dt {
  color: rgba(255, 255, 255, .65);
}

.legal-dl dd {
  margin: 0;
  color: rgba(255, 255, 255, .9);
}

@media(max-width:680px) {
  .legal-dl {
    grid-template-columns: 1fr;
  }
}

/* Encadré style "callout" */
.callout {
  margin-top: 16px;
  padding: 14px;
  background: rgba(255, 255, 255, .03);
  border: 1px dashed rgba(255, 255, 255, .12);
  border-radius: 10px;
  font-size: 14px;
  color: rgba(255, 255, 255, .8);
}

/* --- Badges compacts --- */
.badge-soft.badge-compact {
  padding: 4px 8px;
  font-size: 11px;
  border-radius: 10px;
}

/* --- TOC ancres en haut de page légale --- */
.legal-toc {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 24px;
}
.legal-toc a.badge-soft {
  text-decoration: none;
  transition: opacity 0.2s;
}
.legal-toc a.badge-soft:hover {
  opacity: 0.7;
}

/* --- Séparateur de parties --- */
.legal-part-label {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #1FFFBD;
  margin: 48px 0 24px;
}
.legal-part-label::before,
.legal-part-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(31,255,189,0.25), transparent);
}

/* --- Liste à puces légale --- */
.legal-ul {
  color: rgba(255,255,255,0.75);
  line-height: 2;
  padding-left: 20px;
  margin: 10px 0;
}

/* --- Règle dégradée entre blocs --- */
.legal-block+.legal-block {
  position: relative;
}

.legal-block+.legal-block::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 16px;
  right: 16px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #1FFFBD33, transparent);
}

/* --- Liste fiche pro --- */
.legal-dl {
  display: grid;
  grid-template-columns: 200px 1fr;
  row-gap: 8px;
  column-gap: 16px;
  margin-top: 10px;
}

.legal-dl dt {
  color: rgba(255, 255, 255, .65);
  min-width: 200px;
}

.legal-dl dd {
  margin: 0;
  color: rgba(255, 255, 255, .92);
}

.legal-dl dd code {
  background: #0002;
  padding: 2px 6px;
  border-radius: 6px;
}

@media (max-width:680px) {
  .legal-dl {
    grid-template-columns: 1fr;
  }
}

/* --- Callout info --- */
.callout {
  margin-top: 16px;
  padding: 14px;
  background: rgba(255, 255, 255, .03);
  border: 1px dashed rgba(255, 255, 255, .12);
  border-radius: 10px;
  font-size: 14px;
  color: rgba(255, 255, 255, .8);
}

/* --- Icône légère devant le h2 (en utilisant data-icon) --- */
.legal-block[data-icon] h2 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legal-block[data-icon] h2::before {
  content: attr(data-icon) " ";
  color: rgba(255, 255, 255, .9);
}

/* --- Version impression propre --- */
@media print {

  header,
  .site-footer,
  nav,
  .btn {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .legal-page {
    padding: 0;
  }

  .legal-block {
    background: #fff;
    border: 1px solid #ddd;
  }

  a {
    color: #000;
    text-decoration: underline;
  }
}


/* --- TEXTURE GLOBALE (EFFET GRAIN/MATIÈRE) --- */
body::before {
  content: "";
  position: fixed;
  /* Reste fixe quand on scroll */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* Laisse passer les clics */
  z-index: 9999;
  /* Au-dessus de tout */
  opacity: 0.02;
  /* Très subtil (règle entre 0.03 et 0.07) */
  mix-blend-mode: overlay;

  /* Motif de bruit généré en SVG (pas besoin de fichier image externe) */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.80' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='1'/%3E%3C/svg%3E");
}

.one-central-glow {
  position: absolute;
  left: 50%;
  top: 20%;
  transform: translate(-50%, -50%);
  /* Centrage parfait H/V */

  /* Taille imposante pour baigner la section sans faire "tache" */
  width: 800px;
  height: 800px;

  /* Dégradé radial doux : Cyan au centre -> Transparent sur les bords */
  background: radial-gradient(circle, rgba(85, 0, 150, 0.274) 0%, rgba(31, 184, 255, 0) 70%);

  /* Le flou indispensable pour l'effet "Ambiance" */
  filter: blur(500px);

  z-index: 0;
  /* Derrière tout le reste */
  pointer-events: none;
  /* Ne gêne pas les clics */
}

/* 3. LA GRILLE DE POINTS (Texture de fond) */
.roadmap-dot-grid {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  /* Au même niveau que le fond */
  pointer-events: none;

  /* Création des points : un rond de 1.5px tous les 40px */
  background-image: radial-gradient(rgba(255, 255, 255, 0.048) 1px, transparent 1px);
  background-size: 40px 40px;
  /* Espacement des points */

  /* Masque dégradé pour que les points disparaissent doucement en haut et en bas */
  mask-image: radial-gradient(ellipse at center,
      black 0%,
      /* Visibilité maximale au centre */
      transparent 70%
      /* Disparition douce vers les bords */
    );
}


/* --- SECTION FAQ : RAFFINEMENT & VISIBILITÉ --- */
.section-faq {
  padding: 0 0 140px 0;
  position: relative;
  overflow: hidden;
  /* ✅ Coupe le texte géant proprement */
}

.faq-head {
  text-align: center;
  margin-bottom: 50px;
}

.faq-wrapper {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-item {
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  overflow: hidden;
  /* ✅ Nécessaire pour l'animation max-height */
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.faq-question {
  width: 100%;
  padding: 32px 40px;
  background: transparent;
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  font-family: 'Outfit', sans-serif;
  font-size: 1.15rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
}

.faq-icon-wrapper {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform 0.4s ease;
}

.faq-icon-line {
  position: absolute;
  background: #1FFFBD;
  border-radius: 2px;
  transition: all 0.4s ease;
}

.faq-icon-line.horizontal {
  width: 100%;
  height: 2px;
  top: 9px;
  left: 0;
}

.faq-icon-line.vertical {
  width: 2px;
  height: 100%;
  top: 0;
  left: 9px;
}

/* ✅ LA RÉPONSE : Fixée pour réapparaître au clic */
.faq-answer {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.5s ease, opacity 0.4s ease;
  background: rgba(31, 255, 189, 0.01);
}

.answer-content {
  padding: 0 40px 40px 40px;
  color: rgba(255, 255, 255, 0.7);
  /* Gris clair lisible */
  font-weight: 300;
  line-height: 1.8;
  font-size: 1rem;
}

/* --- ÉTATS ACTIFS --- */
.faq-item.active {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(31, 255, 189, 0.3);
}

.faq-item.active .faq-question {
  color: #1FFFBD;
}

.faq-item.active .faq-icon-wrapper {
  transform: rotate(135deg);
}

.faq-item.active .vertical {
  opacity: 0;
}

/* ✅ Force l'affichage du texte au clic */
.faq-item.active .faq-answer {
  max-height: 500px;
  opacity: 1;
}

.faq-item:hover:not(.active) {
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateX(10px);
}

/* ✅ Correction spécifique pour le texte géant de fond */
.section-faq .giant-expertise-text {
  font-size: 13vw;
  opacity: 0.005;
  /* Très discret comme VISION */
  transform: translateY(0%);
}

/* --- BANDEAU COOKIES GLASSMORPHISM --- */
.cookie-overlay {
  position: fixed;
  bottom: 30px;
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: translateY(100px);
  z-index: 9999;
  width: 90%;
  max-width: 500px;
  opacity: 0;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  pointer-events: none;
}

/* État affiché via JS */
.cookie-overlay.show {
  transform: translateY(0);
  opacity: 1;
  pointer-events: all;
}

.cookie-card {
  background: rgba(12, 18, 29, 0.85);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.cookie-content { display: flex; gap: 16px; align-items: flex-start; }
.cookie-icon { font-size: 24px; }
.cookie-text h4 { color: white; margin-bottom: 4px; font-weight: 600; font-size: 16px; }
.cookie-text p { color: rgba(255, 255, 255, 0.6); font-size: 13px; line-height: 1.5; }

.cookie-actions { display: flex; gap: 12px; justify-content: flex-end; align-items: center; }

/* Bouton format réduit pour le bandeau */
.btn-sm { padding: 10px 24px; font-size: 13px; line-height: 1; }

.btn-ghost {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 13px;
  cursor: pointer;
  transition: color 0.3s ease;
  font-family: 'Outfit', sans-serif;
}
.btn-ghost:hover { color: white; }

/* ✅ NOUVEAU STYLE : Bouton "Accepter" épuré */
.btn-simple-accept {
  background: transparent;
  border: none;
  color: #1FFFBD;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Outfit', sans-serif;
}


@media (max-width: 600px) {
  .cookie-card { padding: 16px; }
  .cookie-actions { width: 100%; flex-direction: column; }
  .cookie-actions .btn { width: 100%; }
}


/* ✅ UNIFICATION CHROMATIQUE ET FOND ARCHITECTE */

.page-projet {
    background: linear-gradient(350deg, #050A17 0%, #030814 100%) !important;
    background-color: #030814 !important;
    min-height: 100vh;
    position: relative;
}

/* FOND ARCHITECTE FILIGRANE */
.page-projet::before {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('../images/fond-architecte.jpg'); 
    background-size: cover;
    background-attachment: fixed;
    opacity: 0.03; 
    pointer-events: none;
    z-index: 0;
}

main.container {
    padding-bottom: 300px !important; 
    position: relative;
    z-index: 1;
}

/* SECTION FORMULAIRE */
.etude-form-container {
    max-width: 800px;
    margin: 60px auto 100px;
    background: rgba(12, 18, 29, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(25px);
    border-radius: 24px;
    padding: 50px;
}

.form-row { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 25px; 
}

.premium-form input, .premium-form select, .premium-form textarea {
    width: 100%;
    background-color: #0c121d !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px 20px;
    color: white !important;
    margin-bottom: 24px;
}

.form-footer {
    display: flex;
    flex-direction: column;
    align-items: center; 
    margin-top: 40px;
    gap: 10px;
}

.validation-note { font-size: 13px; color: #1FFFBD; font-weight: 500; }
.security-note { font-size: 13px; color: #ffffff; margin-top: 20px; }

/* GALERIE XXL */
.gallery-preview { margin-bottom: 120px; text-align: center; }
.gallery-title { margin-bottom: 40px; font-weight: 400; letter-spacing: 1px; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1100px; margin: 0 auto; }
.gallery-item { height: 260px; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.8); transition: 0.4s; }
.gallery-item:hover img { filter: brightness(1); transform: scale(1.05); }

/* CARDS BENTO */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto 220px;
    padding: 0 20px;
}

.benefit-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    border-radius: 20px;
    padding: 45px 35px;
    text-align: center;
    transition: 0.3s;
}

.benefit-card:hover { transform: translateY(-10px); border-color: rgba(31, 255, 189, 0.3); }

/* PARTENAIRES */
.partners-section { padding: 60px 0; border-top: 1px solid rgba(255,255,255,0.05); text-align: center; }
.partners-label { font-size: 12px; text-transform: uppercase; color: rgba(255,255,255,0.4); letter-spacing: 2px; margin-bottom: 40px; }
.partners-logos { display: flex; justify-content: center; gap: 60px; flex-wrap: wrap; opacity: 0.5; filter: grayscale(1); }
.partner-logo { height: 35px; }

.partners-text-badges {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.partner-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 400;
  color: rgba(255,255,255,0.8);
  white-space: nowrap;
}

@media (max-width: 768px) {
    .form-row, .gallery-grid, .benefits-grid { grid-template-columns: 1fr; }
    main.container { padding-bottom: 150px !important; }
}

/* ===== PAGE RÉALISATIONS ===== */

.page-realisations main {
    padding-top: 0;
}

/* -- Cartes de découverte par besoin -- */
.project-needs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin: 48px 0 52px;
}

.need-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    height: 310px;
    cursor: pointer;
    transition: transform 0.35s ease, box-shadow 0.3s ease;
    background: rgba(255,255,255,0.03);
}

.need-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 36px rgba(0,0,0,0.35);
}

/* Cartes inactives légèrement assombries */
.need-card:not(.active) .need-bg-img {
    filter: brightness(0.75);
}

.need-card.active {
    box-shadow: 0 10px 40px rgba(0,0,0,0.45);
}

.need-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.55s ease;
    display: block;
}

.need-card:hover .need-bg-img {
    transform: scale(1.07);
}

.need-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(3,8,20,0.92) 0%, rgba(3,8,20,0.35) 55%, rgba(3,8,20,0.1) 100%);
    transition: background 0.3s ease;
}


.need-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 18px 20px;
}

.need-count {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #1FFFBD;
    margin-bottom: 5px;
}

.need-title {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 4px;
    line-height: 1.2;
}

.need-desc {
    font-size: 12px;
    color: rgba(255,255,255,0.55);
    margin: 0;
    line-height: 1.4;
}

/* Indicateur actif — trait bas cyan */
.need-card.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #1FFFBD, #0EA5E9);
}

/* -- Séparateur section galerie -- */
.gallery-section-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.gallery-section-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    white-space: nowrap;
    transition: color 0.3s ease;
}

.gallery-section-line {
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,0.07);
}

/* -- Galerie éditoriale -- */
.gallery-editorial {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin-bottom: 36px;
}


/* Bouton "Voir plus" */
.gallery-more-wrap {
    text-align: center;
    margin-bottom: 80px;
}

.gallery-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 30px;
    border-radius: 100px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.8);
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
    backdrop-filter: blur(8px);
}

.gallery-more-btn:hover {
    border-color: rgba(31,255,189,0.45);
    background: rgba(31,255,189,0.06);
    color: #fff;
}

.gallery-more-wrap.is-hidden {
    display: none;
}

.more-count {
    font-size: 11px;
    font-weight: 700;
    background: rgba(31,255,189,0.14);
    color: #1FFFBD;
    padding: 2px 9px;
    border-radius: 20px;
}

.gallery-tile {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    cursor: pointer;
    background: rgba(255,255,255,0.03);
}

.gallery-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block;
}

.gallery-tile:hover img {
    transform: scale(1.06);
}

.tile-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(3,8,20,0.88) 0%, rgba(3,8,20,0.2) 55%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
    opacity: 1;
    transition: background 0.35s ease;
}

.gallery-tile:hover .tile-overlay {
    background: linear-gradient(to top, rgba(3,8,20,0.95) 0%, rgba(3,8,20,0.3) 55%, transparent 100%);
}

.tile-cat {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #1FFFBD;
    font-weight: 600;
    margin-bottom: 4px;
}

.tile-title {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===== CARDS CHANTIER ===== */
.project-card {
    position: relative;
    display: block;
    border-radius: 20px;
    overflow: hidden;
    height: 440px;
    text-decoration: none;
    background: #0c1322;
    border: 2px solid rgba(255,255,255,0.08);
    transition: transform 0.35s ease, box-shadow 0.35s ease, opacity 0.5s ease;
}

.project-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

.project-card > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block;
}

.project-card:hover > img {
    transform: scale(1.05);
}

.project-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(3,8,20,1) 0%, rgba(3,8,20,0.75) 38%, rgba(3,8,20,0.15) 68%, transparent 100%);
    z-index: 1;
}

.card-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.3px;
}

.card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.card-location {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255,255,255,0.4);
    letter-spacing: 0.5px;
    margin-bottom: -3px;
}

.card-date-pill {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.3px;
}

.card-title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    margin: 0;
}

.card-review {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    margin-bottom: 15px;
}

.card-stars {
    flex-shrink: 0;
    color: #FFB800;
    font-size: 12px;
    letter-spacing: 2px;
}

.card-quote-text {
    flex: 1;
    min-width: 0;
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.card-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 14px;
    background: linear-gradient(135deg, #1FFFBD 0%, #0EA5E9 100%);
    border-radius: 10px;
    color: #030814;
    font-size: 12px;
    font-weight: 700;
    transition: opacity 0.2s ease;
}

.project-card:hover .card-cta { opacity: 0.88; }

.card-cta-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    background: rgba(3,8,20,0.15);
    border-radius: 50%;
    font-size: 0;
}

.card-cta-arrow::after {
    content: '';
    display: block;
    width: 5px;
    height: 5px;
    border-top: 2px solid #030814;
    border-right: 2px solid #030814;
    transform: rotate(45deg);
    margin-left: -2px;
}

@media (max-width: 640px) {
    .project-card { height: 380px; }
}

/* ===== PAGE CHANTIER ===== */
.page-chantier main { padding-top: 0; padding-bottom: 0; }

.chantier-hero {
    position: relative;
    height: 70vh;
    min-height: 460px;
    overflow: hidden;
}

.chantier-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chantier-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(3,8,20,0.97) 0%, rgba(3,8,20,0.45) 50%, rgba(3,8,20,0.15) 100%);
}

.chantier-hero-content {
    position: absolute;
    bottom: 52px;
    left: 0;
    right: 0;
    z-index: 2;
}

.chantier-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(255,255,255,0.45);
    text-decoration: none;
    margin-bottom: 20px;
    transition: color 0.2s;
}
.chantier-back:hover { color: #fff; }

.chantier-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: rgba(31,255,189,0.12);
    border: 1px solid rgba(31,255,189,0.25);
    border-radius: 100px;
    color: #1FFFBD;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.chantier-hero-title {
    font-size: clamp(1.8rem, 4.5vw, 3rem);
    font-weight: 700;
    color: #fff;
    margin: 0 0 10px;
    line-height: 1.15;
}

.chantier-hero-location {
    font-size: 14px;
    color: rgba(255,255,255,0.45);
}

/* Barre d'infos */
.chantier-info-bar {
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    padding: 28px 0;
}

.chantier-info-grid {
    display: flex;
    flex-wrap: wrap;
}

.chantier-info-item {
    flex: 1;
    min-width: 100px;
    padding: 0 32px;
    border-right: 1px solid rgba(255,255,255,0.07);
}
.chantier-info-item:first-child { padding-left: 0; }
.chantier-info-item:last-child { border-right: none; }

.chantier-info-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
    margin-bottom: 5px;
}

.chantier-info-value {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}

.chantier-budget-val {
    color: #1FFFBD;
    font-size: 16px;
}

.chantier-info-sub {
    font-size: 10px;
    color: rgba(255,255,255,0.38);
    margin-top: 3px;
    letter-spacing: 0.3px;
}

/* Corps de page */
.chantier-body { padding: 64px 0 80px; }

.chantier-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    margin-bottom: 56px;
}

.chantier-section-tag {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #1FFFBD;
    margin-bottom: 10px;
}

.chantier-section h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 16px;
}

.chantier-section p {
    font-size: 15px;
    color: rgba(255,255,255,0.6);
    line-height: 1.8;
    margin: 0;
}

.challenges-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.challenges-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    color: rgba(255,255,255,0.65);
    line-height: 1.5;
}

.challenges-list li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #1FFFBD;
    flex-shrink: 0;
    margin-top: 8px;
}

/* Galerie photos du chantier */
.chantier-gallery-section { margin-bottom: 56px; }

.chantier-gallery-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.chantier-photo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.chantier-photo {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 4/3;
    background: rgba(255,255,255,0.03);
}

.chantier-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.chantier-photo {cursor: pointer;}
.chantier-photo:hover img { transform: scale(1.04); }

.chantier-photo-zoom {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s;
    background: rgba(3,8,20,0.35);
    z-index: 2;
}
.chantier-photo:hover .chantier-photo-zoom { opacity: 1; }
.chantier-photo-zoom svg {
    width: 40px; height: 40px;
    color: #fff;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
}

/* Lightbox */
.lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(3,8,20,0.95);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    padding: 20px;
}
.lightbox-overlay.open { display: flex; }
.lightbox-overlay img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.6);
    cursor: default;
}
.lightbox-close {
    position: absolute;
    top: 20px;
    right: 28px;
    color: rgba(255,255,255,0.7);
    font-size: 2.4rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s;
}
.lightbox-close:hover { color: #fff; }

.chantier-photo-label {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(3,8,20,0.65);
    backdrop-filter: blur(8px);
    padding: 4px 10px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.75);
}

/* Citation client */
.chantier-quote {
    margin: 0 0 56px;
    padding: 40px 48px;
    background: rgba(31,255,189,0.04);
    border: 1px solid rgba(31,255,189,0.1);
    border-radius: 20px;
    text-align: center;
}

.chantier-quote-stars {
    font-size: 16px;
    color: #FFB800;
    margin-bottom: 16px;
    letter-spacing: 2px;
}

.chantier-quote-text {
    font-size: 1.3rem;
    font-weight: 300;
    color: rgba(255,255,255,0.9);
    font-style: italic;
    line-height: 1.65;
    margin: 0 0 16px;
}

.chantier-quote-author {
    font-size: 13px;
    color: rgba(255,255,255,0.35);
}

/* CTA bas de page */
.chantier-footer-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40px 48px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 20px;
    gap: 24px;
}

.chantier-footer-cta-text h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 4px;
}

.chantier-footer-cta-text p {
    font-size: 14px;
    color: rgba(255,255,255,0.4);
    margin: 0;
}

.chantier-footer-actions {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.btn-ghost-light {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.7);
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.25s ease;
}
.btn-ghost-light:hover { border-color: rgba(255,255,255,0.35); color: #fff; }

@media (max-width: 900px) {
    .chantier-cols { grid-template-columns: 1fr; gap: 36px; }
    .chantier-photo-grid { grid-template-columns: repeat(2, 1fr); }
    .chantier-info-item { padding: 10px 16px; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.07); }
    .chantier-footer-cta { flex-direction: column; text-align: center; padding: 28px 24px; }
    .chantier-footer-actions { flex-direction: column; width: 100%; }
}

@media (max-width: 600px) {
    .chantier-hero { height: 58vh; }
    .chantier-photo-grid { grid-template-columns: 1fr; }
    .chantier-quote { padding: 28px 20px; }
    .chantier-quote-text { font-size: 1.05rem; }
}

.realisations-cta {
    padding: 80px 0 100px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.realisations-cta .btn {
    display: inline-flex;
    width: auto;
}

@media (max-width: 1100px) {
    .project-needs { grid-template-columns: repeat(2, 1fr); }
    .need-card { height: 260px; }
}

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

@media (max-width: 640px) {
    .project-needs {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 12px;
        padding-bottom: 8px;
        margin: 32px 0 40px;
    }
    .project-needs::-webkit-scrollbar { display: none; }
    .need-card {
        min-width: 210px;
        height: 230px;
        scroll-snap-align: start;
        flex-shrink: 0;
    }
    .gallery-editorial {
        grid-template-columns: 1fr;
        gap: 4px;
    }

}


/* ================================================================
   MOBILE — CERAM UNIQUE
   Hamburger menu, hero, sections, typo, cards, contact, footer
   ================================================================ */

/* ── HAMBURGER BUTTON ── */
.burger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  cursor: pointer;
  padding: 8px;
  flex-shrink: 0;
}

.burger-btn span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: white;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}

.burger-btn.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger-btn.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.burger-btn.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }


/* ── MOBILE NAV OVERLAY (<768px) ── */
@media (max-width: 767px) {
  .burger-btn { display: flex; }

  #main-nav {
    display: none;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    background: rgba(3, 8, 20, 0.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 36px;
    z-index: 999;
    padding: 80px 24px 40px;
  }

  #main-nav.open {
    display: flex;
  }

  #main-nav a {
    font-size: 22px;
    font-weight: 300;
    letter-spacing: 1px;
    opacity: 0.9;
    transition: color 0.2s, opacity 0.2s;
  }

  #main-nav a:hover {
    color: #1FFFBD;
    opacity: 1;
  }

  #main-nav a::after { display: none; }

  /* Masquer le numéro de téléphone dans le header */
  .header-actions .phone-link { display: none; }

  /* Réduire le CTA header */
  .header-actions .btn {
    font-size: 12px;
    padding: 10px 14px;
    white-space: nowrap;
  }

  .header-actions { gap: 12px; }
}


/* ── HERO SECTION MOBILE ── */
@media (max-width: 1023px) {
  main {
    padding: 80px 0 40px;
  }

  .hero-grid {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  /* Masquer les images décoratives sur mobile */
  .bento-wrapper {
    display: none;
  }

  .section-title h1,
  .section-title {
    font-size: clamp(2rem, 7vw, 3rem);
    line-height: 1.2;
  }

  .hero-content {
    gap: 16px;
  }

  .location-badge {
    font-size: 12px;
    gap: 10px;
  }

  .hero-buttons {
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
  }

  .hero-buttons .btn {
    width: 100%;
    justify-content: center;
  }

  .trust {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
}


/* ── SECTION PRÉSENTATION ── */
@media (max-width: 900px) {
  .presentation-archi-final {
    padding: 80px 0 60px;
  }

  .archi-split-layout {
    flex-direction: column;
    gap: 40px;
  }

  .archi-content-col,
  .archi-visual-col {
    width: 100%;
    max-width: 100%;
  }

  .archi-visual-col {
    display: none;
  }

  .archi-stats-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .stat-divider { display: none; }

  .giant-vision-text,
  .giant-expertise-text {
    font-size: 20vw;
    opacity: 0.004;
  }
}


/* ── BENTO H2 + WHY-CERAM H2 ── */
@media (max-width: 767px) {
  .why-ceram h2 {
    font-size: clamp(1.8rem, 6vw, 2.4rem);
  }
}


/* ── EXPERTISE / WHY-CARDS ── */
@media (max-width: 768px) {
  .why-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .why-card {
    max-width: 100%;
  }

  .card-internal-visual {
    height: 200px;
  }

  .expertise-footer-action {
    text-align: center;
  }

  .expertise-footer-action .btn {
    width: 100%;
    justify-content: center;
  }
}


/* ── AVIS / TÉMOIGNAGES ── */
@media (max-width: 767px) {
  .avis-slider-wrapper {
    gap: 12px;
  }

  .slider-btn {
    display: none;
  }

  .avis-track {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 8px 0;
  }

  .avis-card {
    min-width: 85vw;
    max-width: 85vw;
    scroll-snap-align: center;
  }

  .avis-head h1 {
    font-size: clamp(1.6rem, 6vw, 2.2rem);
  }
}


/* ── CONTACT CARD ── */
@media (max-width: 767px) {
  .contact-prestige-card {
    flex-direction: column;
    gap: 0;
    padding: 28px 20px;
  }

  .contact-divider {
    display: none;
  }

  .contact-text-side {
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 24px;
  }

  .contact-action-side {
    width: 100%;
  }

  .action-row {
    padding: 16px 14px;
  }

  .action-value {
    font-size: 13px;
  }

  .card-footer-trust {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .sep-dot { display: none; }
}


/* ── FAQ ── */
@media (max-width: 767px) {
  .faq-question {
    font-size: 14px;
    padding: 18px 16px;
    padding-right: 40px;
  }

  .answer-content {
    font-size: 13px;
    padding: 0 16px 16px;
  }
}


/* ── FOOTER ── */
@media (max-width: 767px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }

  .footer-tags {
    justify-content: center;
    flex-wrap: wrap;
  }

  .footer-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .footer-contact-list {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .opening-hours {
    text-align: center;
  }

  .footer-bottom-flex {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }

  .legal-links-bottom {
    justify-content: center;
    flex-wrap: wrap;
  }

  .legal-links-bottom a {
    min-height: 44px;
    padding: 8px 4px;
  }

  .footer-pdf-link {
    border-left: none !important;
    padding-left: 4px !important;
    margin-left: 16px !important;
    min-height: 44px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
}


/* ── FORM (PAGE PROJET) ── */
@media (max-width: 767px) {
  .etude-form-container {
    padding: 28px 20px;
    margin: 32px auto 60px;
    border-radius: 16px;
  }

  .form-section-title {
    font-size: 13px;
  }

  .premium-form input,
  .premium-form select,
  .premium-form textarea {
    font-size: 16px; /* évite le zoom automatique iOS */
    padding: 14px 16px;
  }

  .form-footer .btn {
    width: 100%;
    justify-content: center;
  }

  .gallery-preview {
    margin-bottom: 60px;
  }

  .benefits-grid {
    margin-bottom: 60px !important;
  }
}


/* ── SECTION TITRES (global) ── */
@media (max-width: 767px) {
  h1.section-title {
    font-size: clamp(1.8rem, 6.5vw, 2.5rem);
    line-height: 1.25;
  }

  h2 {
    font-size: clamp(1.4rem, 5vw, 1.8rem);
  }

  .section-subtitle {
    font-size: 14px;
  }

  .tech-pill {
    font-size: 11px;
    padding: 6px 14px;
  }

  .container {
    padding: 0 16px;
  }

  /* Espacement sections */
  .section-avis,
  .why-ceram,
  .section-engagements,
  .section-entreprise,
  .contact {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .presentation-archi-final {
    padding-top: 60px;
    padding-bottom: 40px;
  }
}


/* ── MENTIONS LÉGALES MOBILE ── */
@media (max-width: 767px) {
  .legal-page {
    padding: 70px 0 60px;
  }

  .legal-block {
    padding: 16px;
  }

  .legal-dl {
    grid-template-columns: 1fr;
    row-gap: 6px;
  }

  .legal-dl dt {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.5);
    margin-top: 10px;
  }

  .legal-dl dd {
    font-size: 14px;
  }
}


/* ── TOUCH : suppression hover states ── */
@media (hover: none) {
  .why-card:hover,
  .benefit-card:hover {
    transform: none;
  }

  .gallery-item:hover img {
    filter: brightness(0.85);
    transform: none;
  }
}

/* ===== SECTION ENTREPRISE ===== */
.section-entreprise {
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}
.section-entreprise::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -150px;
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(31,255,189,0.06) 0%, transparent 65%);
  pointer-events: none;
}

.entreprise-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.entreprise-text {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.entreprise-text .tech-pill {
  align-self: flex-start;
}

.entreprise-quote {
  font-size: 16px;
  font-style: italic;
  color: rgba(255,255,255,0.75);
  line-height: 1.7;
  border-left: 3px solid #1FFFBD;
  padding-left: 20px;
  margin: 0;
}
.entreprise-quote cite {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.entreprise-desc {
  font-size: 15px;
  line-height: 1.8;
  color: rgba(255,255,255,0.55);
}
.entreprise-desc strong {
  color: rgba(255,255,255,0.85);
  font-weight: 600;
}

.entreprise-stats {
  display: flex;
  align-items: center;
  padding: 28px 0;
  border-top: 1px solid rgba(255,255,255,0.07);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.estat {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.estat-number {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.estat-val {
  font-size: 44px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  letter-spacing: -1px;
}

.estat-unit {
  display: inline;
  font-size: 20px;
  font-weight: 700;
  color: rgba(255,255,255,0.5);
}

.estat-label {
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
}

.estat-sep {
  width: 1px;
  height: 48px;
  background: rgba(255,255,255,0.1);
  margin: 0 28px;
  flex-shrink: 0;
}

.entreprise-certs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.entreprise-certs span {
  flex: 1;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 9px 10px;
  white-space: nowrap;
}

.entreprise-visual {
  position: relative;
  height: 540px;
}
.entreprise-visual::before {
  content: '';
  position: absolute;
  inset: -40px;
  background: radial-gradient(ellipse at 60% 50%, rgba(31,255,189,0.13) 0%, transparent 65%);
  border-radius: 30px;
  z-index: 0;
  pointer-events: none;
}

.entreprise-visual-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  z-index: 1;
  border: 1px solid rgba(255,255,255,0.08);
}

.entreprise-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.entreprise-visual-inner:hover .entreprise-img {
  transform: scale(1.06);
}

.entreprise-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(3,8,20,0.65) 0%, transparent 50%);
  pointer-events: none;
}

.entreprise-img-badge {
  position: absolute;
  bottom: 20px;
  left: 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(3,8,20,0.7);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(31,255,189,0.25);
  border-radius: 12px;
  padding: 12px 18px;
}
.img-badge-val {
  font-size: 22px;
  font-weight: 700;
  color: #1FFFBD;
  line-height: 1;
}
.img-badge-label {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.entreprise-visual-tag {
  position: absolute;
  top: -14px;
  right: 20px;
  z-index: 2;
  background: rgba(3,8,20,0.85);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 100px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.65);
  white-space: nowrap;
}

@media (max-width: 1000px) {
  .entreprise-grid { grid-template-columns: 1fr; gap: 48px; }
  .entreprise-visual { height: 380px; }
}
@media (max-width: 640px) {
  .section-entreprise { padding: 80px 0; }
  .entreprise-visual { height: 300px; }
}

/* ─── Filtre par année ───────────────────────────────── */
.year-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 28px auto 0;
    justify-content: center;
}
.year-filter-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.25);
    padding-right: 4px;
}
.year-btn {
    padding: 7px 20px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.4);
    cursor: pointer;
    transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.1s;
}
.year-btn:hover {
    background: rgba(255,255,255,0.09);
    color: rgba(255,255,255,0.85);
    border-color: rgba(255,255,255,0.2);
}
.year-btn.active {
    background: rgba(31,255,189,0.12);
    color: #1FFFBD;
    border-color: rgba(31,255,189,0.3);
}
.year-btn:active { transform: scale(0.95); }

/* ─── Scroll reveal ──────────────────────────────────── */
.js-ready .project-card:not(.is-revealed) {
    opacity: 0;
}

/* ════════════════════════════════════════════════════════
   CONFIGURATEUR DE DEVIS — page-projet.php
   ════════════════════════════════════════════════════════ */

/* Hero */
.config-hero {
  padding: 120px 0 60px;
  text-align: center;
}
.config-hero-sub {
  max-width: 580px;
  margin: 16px auto 24px;
  color: rgba(255,255,255,0.5);
  font-size: 15px;
  line-height: 1.6;
}
.config-hero-badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
.config-hero-badges span {
  font-size: 12px;
  font-weight: 600;
  color: #1FFFBD;
  background: rgba(31,255,189,0.08);
  border: 1px solid rgba(31,255,189,0.2);
  border-radius: 100px;
  padding: 5px 14px;
}

/* Layout 2 colonnes */
.configurateur-section { padding: 0 0 80px; }
.configurateur-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 32px;
  align-items: start;
}

/* ─── Note petits chantiers ──────────────────────────── */
.config-small-note {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: rgba(31,255,189,0.05);
  border: 1px solid rgba(31,255,189,0.18);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 32px;
}
.config-small-note-icon {
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 1px;
}
.config-small-note strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #1FFFBD;
  margin-bottom: 5px;
}
.config-small-note p {
  font-size: 12.5px;
  color: rgba(255,255,255,0.65);
  line-height: 1.55;
  margin: 0;
}
.config-small-note p a {
  color: #1FFFBD;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ─── Catégories (gauche) ─────────────────────────────── */
.config-category {
  margin-bottom: 28px;
}
.config-category-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 12px 2px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 12px;
}
.config-category-icon { font-size: 18px; }
.config-category-name {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.config-category-count {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.05);
  border-radius: 20px;
  padding: 2px 8px;
  margin-left: auto;
}

.config-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

/* ─── Carte prestation ────────────────────────────────── */
.config-item {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
  user-select: none;
}
.config-item:hover {
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.05);
}
.config-item.selected {
  border-color: #1FFFBD;
  background: rgba(31,255,189,0.05);
}
.config-item:active { transform: scale(0.98); }

.config-item-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* Checkbox custom */
.config-item-check {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 2px solid rgba(255,255,255,0.2);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  transition: border-color 0.2s, background 0.2s;
}
.config-item.selected .config-item-check {
  background: #1FFFBD;
  border-color: #1FFFBD;
}
.check-svg {
  width: 10px;
  height: 10px;
  color: #030814;
  display: none;
}
.config-item.selected .check-svg { display: block; }

.config-item-info { flex: 1; min-width: 0; }
.config-item-name {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  line-height: 1.35;
}
.config-item-desc {
  font-size: 10px;
  color: rgba(255,255,255,0.28);
  margin-top: 3px;
  line-height: 1.4;
}
.config-item.selected .config-item-desc { display: none; }

.config-item-price-hint {
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  margin-top: 3px;
}

/* Zone quantité (visible seulement si sélectionné) */
.config-item-qty {
  display: none;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.07);
  align-items: center;
  gap: 8px;
}
.config-item.selected .config-item-qty { display: flex; }

.qty-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: rgba(255,255,255,0.3);
  flex-shrink: 0;
}
.qty-controls {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  overflow: hidden;
}
.qty-btn {
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.6);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.qty-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
.qty-input {
  width: 52px;
  background: none;
  border: none;
  border-left: 1px solid rgba(255,255,255,0.08);
  border-right: 1px solid rgba(255,255,255,0.08);
  color: #fff;
  font-size: 13px;
  font-family: inherit;
  font-weight: 600;
  text-align: center;
  padding: 5px 0;
  outline: none;
}
.qty-unit {
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  font-weight: 600;
}

/* ─── Panel estimation (droite) ──────────────────────── */
.estimate-panel {
  background: #0c1322;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 24px;
  position: sticky;
  top: 88px;
}
.estimate-panel-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.35);
  margin-bottom: 16px;
}
.estimate-lines {
  min-height: 80px;
  margin-bottom: 12px;
}
.estimate-empty {
  color: rgba(255,255,255,0.2);
  font-size: 12px;
  text-align: center;
  padding: 20px 0;
  line-height: 1.5;
}
.estimate-line {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.estimate-line-info { flex: 1; min-width: 0; }
.estimate-line-name {
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  line-height: 1.3;
}
.estimate-line-detail {
  font-size: 11px;
  color: rgba(255,255,255,0.25);
  margin-top: 2px;
}
.estimate-line-price {
  font-size: 11px;
  font-weight: 700;
  color: #1FFFBD;
  white-space: nowrap;
  text-align: right;
}
.estimate-total-row {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 14px;
  margin-top: 4px;
  margin-bottom: 10px;
}
.estimate-total-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: rgba(255,255,255,0.3);
  margin-bottom: 4px;
}
.estimate-total-value {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.5px;
  line-height: 1.1;
}
.estimate-total-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.25);
  margin-top: 3px;
}
.estimate-disclaimer {
  font-size: 10px;
  color: rgba(255,255,255,0.2);
  line-height: 1.45;
  margin: 12px 0 16px;
}
.btn-full { width: 100%; justify-content: center; }
/* Durée estimée */
.estimate-duration {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(14,165,233,0.07);
  border: 1px solid rgba(14,165,233,0.18);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 10px 0 4px;
}
.duration-icon { font-size: 16px; flex-shrink: 0; }
.duration-body { display: flex; flex-direction: column; gap: 1px; }
.duration-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: rgba(14,165,233,0.7);
}
.duration-value {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
}

/* Trust badges */
.estimate-trust {
  display: flex;
  gap: 6px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.trust-badge {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 10px 6px;
  text-align: center;
}
.trust-badge-icon { font-size: 18px; line-height: 1; }
.trust-badge-text { display: flex; flex-direction: column; gap: 2px; }
.trust-badge-main {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.75);
  line-height: 1.2;
}
.trust-badge-sub {
  font-size: 10px;
  color: rgba(255,255,255,0.3);
}

/* ─── Section formulaire ──────────────────────────────── */
.devis-form-section {
  padding: 80px 0 0;
  background: rgba(255,255,255,0.015);
  border-top: 1px solid rgba(255,255,255,0.05);
}
.devis-form-header {
  margin-bottom: 28px;
}

/* Récap estimation */
.devis-recap {
  max-width: 680px;
  margin: 0 auto 28px;
  background: rgba(31,255,189,0.04);
  border: 1px solid rgba(31,255,189,0.15);
  border-radius: 12px;
  padding: 18px 20px;
}
.devis-recap-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: rgba(31,255,189,0.6);
  margin-bottom: 12px;
}
.recap-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 12px;
}
.recap-line-name { color: rgba(255,255,255,0.6); }
.recap-line-price { color: #1FFFBD; font-weight: 600; white-space: nowrap; }
.devis-recap-total {
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

/* ─── Barre mobile ────────────────────────────────────── */
.mobile-estimate-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #0c1322;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 12px 20px;
  z-index: 90;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
.mobile-estimate-bar.visible {
  transform: translateY(0);
}
.mobile-bar-total {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

/* ─── Section finaliser — layout 2 colonnes ──────────── */
.devis-layout {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 48px;
  align-items: start;
}
.devis-form-header .tech-pill { align-self: flex-start; margin-bottom: 14px; }

/* Carte formulaire */
.devis-form-card {
  background: #0c1322;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Champs formulaire dans la carte devis */
.devis-form-card .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.devis-form-card .form-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 16px;
}
.devis-form-card .form-group:last-child { margin-bottom: 0; }
.devis-form-card label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.7px;
}
.devis-form-card input,
.devis-form-card select,
.devis-form-card textarea {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 12px 14px;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 0;
}
.devis-form-card input:focus,
.devis-form-card select:focus,
.devis-form-card textarea:focus {
  border-color: #1FFFBD;
  background: rgba(31,255,189,0.03);
}
.devis-form-card select option { background: #0c1322; }
.devis-form-card textarea {
  resize: vertical;
  min-height: 80px;
}
.devis-form-card input::placeholder,
.devis-form-card textarea::placeholder {
  color: rgba(255,255,255,0.2);
}

/* Checkbox consentement */
.devis-form-card .consent-group { margin-top: 4px; }
.devis-form-card .checkbox-container {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.devis-form-card .checkbox-container input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  margin-top: 2px;
  accent-color: #1FFFBD;
  cursor: pointer;
  border-radius: 4px;
}
.devis-form-card .consent-text {
  font-size: 12px;
  color: rgba(255,255,255,0.35);
  line-height: 1.5;
}
.devis-step-block {
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.devis-step-block:last-of-type { border-bottom: none; }
.devis-step-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: rgba(255,255,255,0.35);
  margin-bottom: 18px;
}
.devis-step-num {
  width: 22px;
  height: 22px;
  background: linear-gradient(135deg, #1FFFBD, #0EA5E9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #030814;
  flex-shrink: 0;
}

/* Bouton submit redesigné */
.devis-submit-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: linear-gradient(135deg, #1FFFBD, #0EA5E9);
  border: none;
  border-radius: 12px;
  padding: 16px 24px;
  cursor: pointer;
  font-family: inherit;
  margin-top: 20px;
  transition: opacity 0.2s, transform 0.15s;
}
.devis-submit-btn:hover { opacity: 0.88; }
.devis-submit-btn:active { transform: scale(0.98); }
.submit-btn-text {
  font-size: 15px;
  font-weight: 700;
  color: #030814;
}
.submit-btn-arrow {
  font-size: 20px;
  color: #030814;
  font-weight: 700;
}
.devis-submit-note {
  font-size: 11px;
  color: rgba(255,255,255,0.25);
  text-align: center;
  margin-top: 10px;
}

/* Colonne proof */
.devis-proof-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 88px;
}
.devis-availability {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(31,255,189,0.07);
  border: 1px solid rgba(31,255,189,0.2);
  border-radius: 100px;
  padding: 7px 16px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(31,255,189,0.8);
  width: fit-content;
}

/* Galerie proof */
.devis-proof-gallery {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.proof-img {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
}
.proof-img img {
  width: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.proof-img:hover img { transform: scale(1.04); }
.proof-img-main img { height: 220px; }
.proof-img-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.proof-img-sm img { height: 120px; }
.proof-img-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(3,8,20,0.85));
  padding: 20px 12px 10px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
}

/* Stats proof */
.devis-proof-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  padding: 16px 20px;
}
.proof-stat { text-align: center; }
.proof-stat-val {
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.5px;
  line-height: 1;
}
.proof-stat-label {
  font-size: 10px;
  color: rgba(255,255,255,0.3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}
.proof-stat-sep {
  width: 1px;
  height: 32px;
  background: rgba(255,255,255,0.08);
}

/* Mini testimonial */
.devis-proof-quote {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-left: 3px solid #1FFFBD;
  border-radius: 0 12px 12px 0;
  padding: 14px 16px;
  margin: 0;
}
.devis-proof-quote p {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  font-style: italic;
  line-height: 1.5;
  margin-bottom: 6px;
}
.devis-proof-quote cite {
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  font-style: normal;
  font-weight: 600;
}

/* ─── Section processus ──────────────────────────────── */
.devis-process-section {
  padding: 64px 0 48px;
}
.devis-process-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #0c1322;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  padding: 32px 36px;
  margin-bottom: 28px;
}
.process-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex: 1;
  min-width: 0;
}
.process-step-num {
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg, #1FFFBD, #0EA5E9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  flex-shrink: 0;
}
.process-step-title {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}
.process-step-desc {
  font-size: 12px;
  color: rgba(255,255,255,0.35);
  line-height: 1.45;
}
.process-arrow {
  font-size: 20px;
  color: rgba(255,255,255,0.12);
  flex-shrink: 0;
  padding: 0 4px;
}

/* Certifications row */
.devis-certs-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.devis-cert {
  font-size: 12px;
  font-weight: 600;
  color: #1FFFBD;
  background: rgba(31,255,189,0.06);
  border: 1px solid rgba(31,255,189,0.18);
  border-radius: 100px;
  padding: 7px 16px;
}

/* ─── Modale confirmation devis ───────────────────────── */
.devis-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(3, 8, 20, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.devis-modal-overlay.show {
  display: flex;
}

.devis-modal-card {
  background: linear-gradient(145deg, #0e1d30 0%, #081525 100%);
  border: 1px solid rgba(31, 255, 189, 0.22);
  border-radius: 22px;
  padding: 48px 40px 36px;
  max-width: 480px;
  width: 100%;
  text-align: center;
  position: relative;
  box-shadow: 0 40px 100px rgba(0,0,0,0.65), 0 0 0 1px rgba(31,255,189,0.07);
  animation: modalIn 0.38s cubic-bezier(0.34, 1.5, 0.64, 1) both;
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(0.86) translateY(20px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}

.devis-modal-icon {
  margin-bottom: 22px;
}
.devis-modal-icon svg {
  display: block;
  margin: 0 auto;
}
.modal-check-bg {
  animation: checkBgPop 0.3s ease both;
}
@keyframes checkBgPop {
  from { opacity: 0; r: 0; }
  to   { opacity: 1; r: 24; }
}
.modal-check-mark {
  stroke-dasharray: 34;
  stroke-dashoffset: 34;
  animation: checkDraw 0.45s ease 0.28s forwards;
}
@keyframes checkDraw {
  to { stroke-dashoffset: 0; }
}

.devis-modal-title {
  font-size: clamp(24px, 4vw, 30px);
  font-weight: 800;
  color: #fff;
  margin: 0 0 12px;
  letter-spacing: -0.3px;
}

.devis-modal-msg {
  font-size: 15px;
  color: rgba(255,255,255,0.68);
  line-height: 1.65;
  margin: 0 0 30px;
}
.devis-modal-msg strong {
  color: #fff;
  font-weight: 600;
}

.devis-modal-btn {
  display: inline-block;
  background: #1FFFBD;
  color: #030814;
  border: none;
  border-radius: 12px;
  padding: 15px 0;
  width: 100%;
  max-width: 260px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
  letter-spacing: 0.1px;
}
.devis-modal-btn:hover {
  opacity: 0.88;
  transform: translateY(-2px);
}
.devis-modal-btn:active {
  transform: translateY(0);
}

.devis-modal-reassurance {
  margin: 22px 0 0;
  font-size: 10px;
  color: rgba(255,255,255,0.28);
  line-height: 1.55;
  letter-spacing: 0.1px;
}

@media (max-width: 600px) {
  .devis-modal-overlay { padding: 16px; }
  .devis-modal-card {
    width: 90%;
    max-width: 100%;
    padding: 36px 22px 28px;
    border-radius: 18px;
  }
  .devis-modal-title { font-size: 22px; }
}

/* ─── Responsive ──────────────────────────────────────── */
@media (max-width: 960px) {
  .configurateur-layout {
    grid-template-columns: 1fr;
  }
  .config-right { order: -1; }
  .estimate-panel { position: static; }
  .mobile-estimate-bar { display: flex; }

  .devis-layout {
    grid-template-columns: 1fr;
  }
  .devis-proof-col { position: static; }
  .devis-process-strip {
    flex-wrap: wrap;
    gap: 24px;
    padding: 24px;
  }
  .process-arrow { display: none; }
  .process-step { flex: 0 0 calc(50% - 12px); }
}
@media (max-width: 640px) {
  .config-items { grid-template-columns: 1fr; }
  .config-hero { padding: 100px 0 48px; }
  .devis-form-card { padding: 20px; }
  .process-step { flex: 0 0 100%; }
  .proof-img-main img { height: 180px; }
}

/* ============================================================
   BENTO ENGAGEMENTS
   ============================================================ */
.section-engagements {
  padding: 100px 0;
  position: relative;
}

.engagements-header {
  text-align: center;
  margin-bottom: 80px;
}

/* Grille bento : 3 colonnes égales
   Card 1 (zéro)      : col 1-2  (2/3)
   Card 2 (accent 48h): col 3    (1/3)
   Card 3 (grille)    : col 1    (1/3)
   Card 4 (décennale) : col 2-3  (2/3)
*/
.engagements-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.bento-card--zero      { grid-column: 1 / 3; }
.bento-card--accent    { grid-column: 3 / 4; }
.bento-card--grid      { grid-column: 1 / 2; }
.bento-card--decennale { grid-column: 2 / 4; }

/* Base card */
.bento-card {
  position: relative;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 40px;
  overflow: hidden;
  transition: border-color 0.35s ease, transform 0.35s ease;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bento-card:hover {
  border-color: rgba(31, 255, 189, 0.3);
  transform: translateY(-5px);
}

.bento-card h3 {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  margin: 0;
  position: relative;
  z-index: 1;
}

.bento-card p {
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  line-height: 1.7;
  margin: 0;
  position: relative;
  z-index: 1;
}

/* Petit badge label */
.bento-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 4px 12px;
  width: fit-content;
  position: relative;
  z-index: 1;
}

/* Grand chiffre fantôme en fond */
.bento-ghost-text {
  position: absolute;
  font-size: 240px;
  font-weight: 900;
  line-height: 1;
  right: -10px;
  bottom: -30px;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.bento-card--zero .bento-ghost-text {
  color: rgba(31, 255, 189, 0.05);
}
.bento-card--decennale .bento-ghost-text {
  color: rgba(14, 165, 233, 0.06);
}

/* Ligne teal animée en bas de card */
.bento-bottom-line {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 35%;
  background: linear-gradient(90deg, #1FFFBD, transparent);
  transition: width 0.5s ease;
  border-radius: 0 2px 0 0;
}
.bento-card--zero:hover .bento-bottom-line { width: 100%; }

/* Badge décennale */
.bento-shield {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(31, 255, 189, 0.8);
  background: rgba(31, 255, 189, 0.07);
  border: 1px solid rgba(31, 255, 189, 0.15);
  border-radius: 20px;
  padding: 5px 14px;
  width: fit-content;
  position: relative;
  z-index: 1;
}

/* Lien téléchargement attestation dans la bento card décennale */
.bento-decennale-dl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
  padding-bottom: 1px;
  position: relative;
  z-index: 1;
  transition: color 0.2s, border-color 0.2s;
  letter-spacing: 0.2px;
}
.bento-decennale-dl:hover {
  color: #1FFFBD;
  border-bottom-color: rgba(31, 255, 189, 0.4);
}

/* ── Card 2 : accent teal sobre ── */
.bento-card--accent {
  background: linear-gradient(145deg, rgba(31,255,189,0.08) 0%, rgba(14,165,233,0.05) 100%);
  border-color: rgba(31, 255, 189, 0.25);
  justify-content: space-between;
}
.bento-card--accent:hover {
  border-color: rgba(31, 255, 189, 0.5);
  transform: translateY(-5px);
  box-shadow: 0 0 40px rgba(31, 255, 189, 0.08);
}

.bento-big-num {
  font-size: 80px;
  font-weight: 900;
  color: #1FFFBD;
  line-height: 1;
}
.bento-big-num sup {
  font-size: 34px;
  font-weight: 700;
  vertical-align: super;
}

.bento-accent-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(31, 255, 189, 0.5);
}
.bento-card--accent p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.6;
}

/* ── Card 3 : motif grille carrelage ── */
.bento-card--grid {
  background: rgba(255,255,255,0.02);
}
.bento-grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 30px 30px;
  border-radius: 20px;
  transition: opacity 0.35s ease;
}
.bento-card--grid:hover .bento-grid-overlay {
  opacity: 0;
}
.bento-card-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bento-icon {
  width: 30px;
  opacity: 0.5;
  filter: brightness(0) invert(1);
  transition: opacity 0.3s;
}
.bento-card--grid:hover .bento-icon { opacity: 0.9; }

/* ── Mobile ── */
@media (max-width: 768px) {
  .engagements-bento {
    grid-template-columns: 1fr 1fr;
  }
  .bento-card--zero,
  .bento-card--accent,
  .bento-card--grid,
  .bento-card--decennale {
    grid-column: auto;
  }
  .bento-card--zero,
  .bento-card--decennale {
    grid-column: span 2;
  }
  .bento-card { padding: 28px; }
  .bento-card h3 { font-size: 22px; }
  .bento-ghost-text { font-size: 150px; }
}

@media (max-width: 560px) {
  .engagements-bento { grid-template-columns: 1fr; }
  .bento-card--zero,
  .bento-card--decennale { grid-column: auto; }
  .bento-card { padding: 28px; }
  .bento-big-num { font-size: 64px; }
  .bento-ghost-text { font-size: 120px; }
}