/* =========================================================
   ELIACOM — Agence Web & Communication
   Palette extraite du logo : bleu #2a92c8 / vert #a5c82a
   ========================================================= */

:root{
  --e-blue: #2a92c8;
  --e-blue-dark: #1c6f9c;
  --e-blue-light: #eaf5fb;
  --e-green: #a5c82a;
  --e-green-dark: #86a622;
  --e-navy: #14232c;
  --e-navy-2: #1c2f3a;
  --e-gray: #5a6670;
  --e-gray-light: #f4f8fa;
  --e-radius: 18px;
  --e-shadow: 0 20px 45px -20px rgba(20, 35, 44, .25);
  --font-head: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;
}

*{ scroll-behavior: smooth; }

html{ overflow-x: hidden; }
body{
  font-family: var(--font-body);
  color: var(--e-navy);
  line-height: 1.65;
  overflow-x: hidden;
}

h1,h2,h3,h4,h5,.font-head{
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--e-navy);
}

a{ text-decoration: none; }

.text-gradient{
  background: linear-gradient(90deg, var(--e-blue), var(--e-green), var(--e-blue));
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: text-gradient-flow 5s linear infinite;
}
@keyframes text-gradient-flow{
  0%{ background-position: 0% 50%; }
  100%{ background-position: -250% 50%; }
}
@media (prefers-reduced-motion: reduce){
  .text-gradient{ animation: none; }
}
.text-gradient-light{
  background: linear-gradient(90deg, #fff, #eafbe2);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.section-py{ padding: 100px 0; }
.section-agence-teaser{
  padding-top: 170px;
  padding-bottom: 170px;
  position: relative;
  overflow: hidden;
}
.agence-blob-wrap{
  position: absolute;
  inset: 0;
  z-index: 0;
  animation: blob-swirl 28s linear infinite;
  transform-origin: 50% 50%;
}
@keyframes blob-swirl{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce){
  .agence-blob-wrap{ animation: none; }
}
.bg-soft{ background: var(--e-gray-light); }

.eyebrow{
  display:flex;
  align-items:center;
  gap:8px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--e-blue-dark);
  margin-bottom: 1rem;
}
.eyebrow i{ color: var(--e-green); }

.section-title{
  font-size: clamp(2.2rem, 4.2vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  margin-bottom: 1.3rem;
}
.section-text{ color: var(--e-gray); font-size: 1.15rem; }

/* Outlined / stroked text accent (Digitaal-style big headings) */
.text-outline{
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.5px currentColor;
}
.text-outline-navy{ -webkit-text-stroke-color: rgba(20,35,44,.35); }
.text-outline-white{ -webkit-text-stroke-color: rgba(255,255,255,.35); }

/* Grand titre "solide + contour" réutilisable (sections de l'accueil) */
.big-title{
  font-family: var(--font-head);
  font-weight: 800;
  text-transform: uppercase;
  line-height: .95;
  letter-spacing: -.02em;
  font-size: clamp(2.4rem, 5.4vw, 4.4rem);
  color: var(--e-navy);
  margin-bottom: 1.3rem;
}
.big-title.light{ color: #fff; }

/* Buttons — pastille pleine couleur, arrondie, avec bulle d'icône façon Digitaal */
.btn-eliacom-primary,
.btn-eliacom-outline,
.cta-band .btn-light{
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  padding: .5rem .5rem .5rem 1.5rem !important;
  font-size: .92rem;
  font-weight: 600;
}
.btn-lg.btn-eliacom-primary,
.btn-lg.btn-eliacom-outline,
.cta-band .btn-lg.btn-light{
  padding: .55rem .55rem .55rem 1.9rem !important;
  font-size: .98rem;
}
.btn-sm.btn-eliacom-primary{
  padding: .35rem .35rem .35rem 1.1rem !important;
  font-size: .82rem;
}
.btn-sm.btn-eliacom-primary .btn-icon-circle{ width: 26px; height: 26px; font-size: .75rem; }

.btn-eliacom-primary .btn-icon-circle,
.btn-eliacom-outline .btn-icon-circle,
.cta-band .btn-light .btn-icon-circle,
.btn-footer-contact .btn-icon-circle{
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  background: var(--e-navy);
  color: #fff;
  transition: transform .25s ease, background .25s ease, color .25s ease;
}

.btn-eliacom-primary{
  background: linear-gradient(135deg, var(--e-blue), var(--e-blue-dark));
  border: none;
  color: #fff;
  box-shadow: 0 12px 25px -8px rgba(42,146,200,.55);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn-eliacom-primary:hover{
  color:#fff;
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -8px rgba(42,146,200,.65);
  background: linear-gradient(135deg, var(--e-green), var(--e-blue));
}
.btn-eliacom-primary:hover .btn-icon-circle{ transform: rotate(45deg); }

/* Bouton "Demander un devis" de la nav : dégradé vert/bleu en permanence */
.btn-eliacom-primary.btn-nav-gradient{
  background: linear-gradient(135deg, var(--e-green), var(--e-blue));
  box-shadow: none;
}
.btn-eliacom-primary.btn-nav-gradient:hover{
  background: linear-gradient(135deg, var(--e-blue), var(--e-green));
  box-shadow: none;
}

.btn-eliacom-outline{
  border: none;
  color: #fff;
  background: linear-gradient(135deg, var(--e-navy), var(--e-navy-2));
  transition: all .25s ease;
}
.btn-eliacom-outline .btn-icon-circle{ background: var(--e-green); color: var(--e-navy); }
.btn-eliacom-outline:hover{
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -8px rgba(20,35,44,.35);
}
.btn-eliacom-outline:hover .btn-icon-circle{ transform: rotate(45deg); }

.cta-band .btn-light:hover .btn-icon-circle{ transform: rotate(45deg); }

/* Bouton "contour" (footer) — pas de fond, juste une bordure, plus grand */
.btn-footer-contact{
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: .55rem .55rem .55rem 2rem !important;
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
  background: transparent;
  border: 1.5px solid rgba(255,255,255,.45);
  transition: border-color .25s ease, background .25s ease;
}
.btn-footer-contact .btn-icon-circle{
  width: 42px;
  height: 42px;
  background: transparent;
  border: 1.5px solid var(--e-green);
  color: var(--e-green);
  font-size: 1rem;
}
.btn-footer-contact:hover{
  color: #fff;
  background: rgba(255,255,255,.06);
  border-color: var(--e-green);
}
.btn-footer-contact:hover .btn-icon-circle{
  background: var(--e-green);
  color: var(--e-navy);
  transform: rotate(45deg);
}

/* =================== NAVBAR =================== */
.navbar-eliacom{
  padding: 18px 0;
  transition: all .3s ease;
  background: transparent;
  /* couleurs pilotées par variables : une seule règle par élément plus bas,
     pas de guerre de spécificité entre états */
  --nav-link-color: var(--e-navy);
  --nav-link-active-color: var(--e-blue-dark);
  --nav-brand-filter: none;
  --nav-toggler-filter: none;
}
.navbar-eliacom.scrolled{
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px -12px rgba(20,35,44,.18);
  padding: 10px 0;
}
.navbar-brand img{ height: 56px; transition: height .3s ease; }
.navbar-eliacom.scrolled .navbar-brand img{ height: 44px; }

/* Pages intérieures (bannière sombre) : texte blanc tant qu'on n'a pas scrollé.
   La classe navbar-on-dark est retirée par le JS dès que .scrolled est ajoutée
   (cf. assets/js/script.js) : pas de :not() ici, les deux classes ne cohabitent jamais. */
.navbar-eliacom.navbar-on-dark{
  --nav-link-color: #fff;
  --nav-link-active-color: var(--e-green);
  --nav-brand-filter: brightness(0) invert(1);
  --nav-toggler-filter: invert(1);
}
.navbar-eliacom.navbar-on-dark .navbar-toggler{ border-color: rgba(255,255,255,.4); }

.navbar-eliacom .nav-link{
  font-weight: 700;
  color: var(--nav-link-color) !important;
  font-size: 1.05rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .5rem 1rem !important;
  position: relative;
}
.navbar-eliacom .nav-link.active{ color: var(--nav-link-active-color) !important; }
.navbar-eliacom .navbar-brand img{ filter: var(--nav-brand-filter); }

/* Icône burger maison : 3 traits qui se transforment en croix à l'ouverture */
.navbar-toggler{
  border: none;
  padding: 4px;
  box-shadow: none !important;
}
.navbar-toggler-x{
  position: relative;
  display: inline-block;
  width: 24px;
  height: 18px;
}
.toggler-line{
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--nav-link-color);
  transition: transform .3s ease, opacity .2s ease, top .3s ease;
}
.toggler-line:nth-child(1){ top: 0; }
.toggler-line:nth-child(2){ top: 8px; }
.toggler-line:nth-child(3){ top: 16px; }

/* Bootstrap retire la classe .collapsed du bouton quand le menu est ouvert */
.navbar-toggler:not(.collapsed) .toggler-line:nth-child(1){
  top: 8px;
  transform: rotate(45deg);
}
.navbar-toggler:not(.collapsed) .toggler-line:nth-child(2){
  opacity: 0;
}
.navbar-toggler:not(.collapsed) .toggler-line:nth-child(3){
  top: 8px;
  transform: rotate(-45deg);
}
.navbar-eliacom .nav-link::after{
  content:"";
  position:absolute;
  left:1rem; right:1rem; bottom:.2rem;
  height:2px;
  background: linear-gradient(90deg,var(--e-blue),var(--e-green));
  transform: scaleX(0);
  transform-origin:left;
  transition: transform .25s ease;
}
.navbar-eliacom .nav-link:hover::after{ transform: scaleX(1); }

/* =================== HERO =================== */
.hero{
  position: relative;
  min-height: 100vh;
  display:flex;
  align-items:center;
  padding-top: 110px;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, var(--e-blue-light) 100%);
  perspective: 1600px;
}
.hero-inner{ position: relative; z-index: 2; }
.hero-blob{
  position:absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .35;
  z-index: 1;
}
.hero-blob-blue{
  width: 480px; height: 480px;
  background: var(--e-blue);
  top: -120px; right: -100px;
}
.hero-blob-green{
  width: 360px; height: 360px;
  background: var(--e-green);
  bottom: -100px; left: -80px;
  opacity: .3;
}
.hero-title{
  font-size: clamp(3.2rem, 6.4vw, 5.6rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin-bottom: 1.5rem;
}
/* Partie secondaire de la phrase ("pour faire rayonner votre activité") :
   un peu plus petite que "Création de site internet à Gap", mais toujours en
   gras. Unité em : suit le clamp du parent à toutes les tailles d'écran.
   line-height explicite (et non hérité en ratio) pour que ce segment, plus
   petit, n'agrandisse pas la boîte de ligne et ne déséquilibre pas
   l'espacement entre les lignes du titre qui passe à la ligne. */
.hero-title-sub{
  font-size: .78em;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
}
.hero-lead{
  font-size: 1.25rem;
  color: var(--e-gray);
  max-width: 560px;
}
/* Grande forme de la marque (pétales du logo) : très grande, en arrière-plan,
   déborde sous le texte du hero. La forme s'incline en 3D (rotateX/rotateY, via
   la perspective posée sur .hero) avec une légère rotation et un zoom/dézoom
   continu ; la rotation liée au scroll (--mark-rotate, pilotée en JS) reste
   portée par .hero-mark, un cran plus bas, pour ne pas entrer en conflit avec
   l'animation CSS du wrapper. */
.hero-mark-wrap{
  position: absolute;
  top: 50%;
  right: -14%;
  width: min(88vw, 1300px);
  z-index: 1;
  opacity: .08;
  pointer-events: none;
  transform: translateY(-50%);
  backface-visibility: hidden;
  animation: mark-pulse 9s ease-in-out infinite;
}
.hero-mark{
  --mark-rotate: 0deg;
  display: block;
  width: 100%;
  height: auto;
  transform: rotate(calc(180deg + var(--mark-rotate)));
  transform-origin: center;
  will-change: transform;
}
@keyframes mark-pulse{
  0%, 100%{
    transform: translateY(-50%) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    opacity: .08;
  }
  50%{
    transform: translateY(-50%) scale(1.14) rotateX(14deg) rotateY(-17deg) rotateZ(5deg);
    opacity: .22;
  }
}
@media (prefers-reduced-motion: reduce){
  .hero-mark-wrap{ animation: none; }
}

.scroll-cue{
  position:absolute;
  bottom: 28px; left: 50%;
  transform: translateX(-50%);
  width: 40px; height:40px;
  border-radius:50%;
  border: 1px solid rgba(20,35,44,.2);
  display:flex; align-items:center; justify-content:center;
  color: var(--e-navy);
  animation: bounce 2s infinite;
  z-index: 2;
}
@keyframes bounce{
  0%,100%{ transform: translateX(-50%) translateY(0); }
  50%{ transform: translateX(-50%) translateY(8px); }
}

/* =================== PAGE BANNER (inner pages) =================== */
.page-banner{
  position: relative;
  background: linear-gradient(160deg, var(--e-navy), var(--e-navy-2));
  padding: 180px 0 100px;
  overflow: hidden;
}
.page-banner .hero-blob{ opacity: .25; }
.page-banner-eyebrow{
  display:flex; align-items:center; gap:8px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--e-green);
  margin-bottom: 1.2rem;
  position: relative; z-index: 2;
}
.page-banner-title{
  font-size: clamp(3rem, 8vw, 6.5rem);
  line-height: .95;
  letter-spacing: -.02em;
  color: #fff;
  text-transform: uppercase;
  margin: 0;
  position: relative; z-index: 2;
}
.page-banner-title .accent{ color: var(--e-green); }
.page-banner-lead{
  color: rgba(255,255,255,.7);
  font-size: 1.1rem;
  max-width: 560px;
  margin-top: 1.5rem;
  position: relative; z-index: 2;
}

/* =================== MARQUEE BAND =================== */
.marquee-wrap{
  position: relative;
  z-index: 5;
  /* Pas de overflow ici : "overflow-x:hidden" + "overflow-y:visible" sont
     tous les deux convertis en "auto" par le navigateur (règle du spec CSS
     dès que les deux axes diffèrent et que l'un n'est pas "visible"), ce qui
     recoupait quand même la rotation qui déborde verticalement des bandes.
     Le html/body{overflow-x:hidden} global suffit à éviter le scroll
     horizontal des bandes en 140vw. */
  padding: 18px 0;
  margin: -80px 0;
  pointer-events: none;
}
@media (max-width: 991.98px){
  .marquee-wrap{ margin: -55px 0; }
}
@media (max-width: 575.98px){
  .marquee-wrap{ margin: -40px 0; }
}
.marquee-band{
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  /* déborde largement du viewport pour que la rotation ne laisse jamais
     apparaître le fond derrière les coins (bande coupée à gauche/droite) */
  width: 140vw;
  margin-left: -20vw;
}
.marquee-band.row-dark{
  background: var(--e-navy);
  padding: 24px 0;
  transform: rotate(2.5deg);
  margin-top: 10px;
  margin-bottom: -4px;
}
.marquee-band.row-accent{
  background: linear-gradient(90deg, var(--e-green), var(--e-blue));
  padding: 24px 0;
  transform: rotate(-2.5deg);
  margin-top: -4px;
  margin-bottom: 10px;
}
.marquee-track{
  display: inline-flex;
  align-items: center;
  animation: marquee-scroll 28s linear infinite;
  will-change: transform;
}
.marquee-band.row-accent .marquee-track{ animation-direction: reverse; animation-duration: 24s; }
.marquee-item{
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: #fff;
  padding: 0 1.5rem;
  display:inline-flex;
  align-items:center;
  gap: 1.5rem;
}
.marquee-band.row-accent .marquee-item{ color: var(--e-navy); }
.marquee-item i{ font-size: 1.1rem; color: var(--e-green); }
.marquee-band.row-accent .marquee-item i{ color: var(--e-navy); opacity: .6; }

@keyframes marquee-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation: none; }
}

/* =================== CLIENTS (logos défilants) =================== */
.clients-marquee-wrap{
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.clients-marquee-track{
  display: inline-flex;
  align-items: center;
  width: max-content;
  animation: marquee-scroll 32s linear infinite;
  will-change: transform;
}
.client-logo-item{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90px;
  padding: 0 3rem;
}
.client-logo-item img{
  max-height: 44px;
  max-width: 160px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%) opacity(.55);
  transition: filter .3s ease, transform .3s ease;
}
.client-logo-item img:hover{
  filter: grayscale(0%) opacity(1);
  transform: scale(1.05);
}
@media (prefers-reduced-motion: reduce){
  .clients-marquee-track{ animation: none; }
}
@media (max-width: 575.98px){
  .client-logo-item{ height: 70px; padding: 0 2rem; }
  .client-logo-item img{ max-height: 34px; max-width: 120px; }
}

/* =================== STATS STRIP (gros chiffres contour, cercles) =================== */
.stats-strip{
  background: linear-gradient(160deg, var(--e-navy), var(--e-navy-2));
  padding: 80px 0;
  position: relative;
  overflow: hidden;
  z-index: 3;
}
.stats-glow{
  top: 50%; right: -10%;
  transform: translateY(-50%);
  width: 520px; height: 520px;
  opacity: .18;
}
.stat-circle{
  width: 280px;
  height: 280px;
  max-width: 100%;
  aspect-ratio: 1/1;
  margin: 0 auto;
  border-radius: 50%;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: .75rem;
  position: relative;
  z-index: 2;
  transition: border-color .3s ease, transform .3s ease, background .3s ease;
}
.stat-circle:hover{
  border-color: var(--e-green);
  transform: translateY(-6px);
  background: rgba(255,255,255,.05);
}
.stat-number, .stat-number-static{
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(3.4rem, 6.2vw, 4.8rem);
  line-height: 1;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.5px var(--e-green);
  margin-bottom: .6rem;
  white-space: nowrap;
}
.stat-label{
  color: rgba(255,255,255,.65);
  font-size: .76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  line-height: 1.4;
}

@media (max-width: 575.98px){
  .stat-circle{ width: 180px; height: 180px; padding: .6rem; }
  .stat-number, .stat-number-static{ font-size: clamp(2rem, 11vw, 2.8rem); }
  .stat-label{ font-size: .62rem; }
}

/* =================== AGENCE =================== */
.agence-visual-card{
  background: linear-gradient(160deg, var(--e-blue), var(--e-green));
  border-radius: 28px;
  padding: 3.5rem 2.5rem;
  color: #fff;
  min-height: 320px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  box-shadow: var(--e-shadow);
}
.agence-visual-card i{ font-size: 2.6rem; margin-bottom: 1rem; }
.agence-visual-card h3{ color:#fff; }

.mini-stat{
  background: #fff;
  border: 1px solid #e8eef1;
  border-radius: 14px;
  padding: 1.2rem 1rem;
  text-align:center;
  height: 100%;
  transition: transform .25s ease, box-shadow .25s ease;
}
.mini-stat:hover{ transform: translateY(-4px); box-shadow: var(--e-shadow); }
.mini-stat .service-icon-outline{ margin: 0 auto .9rem; }
.mini-stat p{ margin:0; font-weight:600; font-size: .9rem; color: var(--e-navy); }

/* =================== SERVICES =================== */
.service-card{
  background:#fff;
  border-radius: var(--e-radius);
  padding: 0;
  height: 100%;
  border: 1px solid #eef2f4;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.service-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--e-shadow);
  border-color: transparent;
}
.service-card-img{
  position: relative;
  aspect-ratio: 465 / 332;
  overflow: hidden;
  background: var(--e-navy);
}
.service-card-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.service-card:hover .service-card-img img{ transform: scale(1.06); }
.service-card-body{
  padding: 0 1.9rem 2.2rem;
}
.service-icon{
  width: 58px; height: 58px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--e-blue), var(--e-blue-dark));
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size: 1.5rem;
  margin-top: -29px;
  margin-bottom: 1.2rem;
  border: 3px solid #fff;
  box-shadow: 0 8px 18px rgba(20,35,44,.18);
  position: relative;
  z-index: 2;
}
.service-icon-green{ background: linear-gradient(135deg, var(--e-green), var(--e-green-dark)); }
.service-card h3{ font-size: 1.15rem; margin-bottom:.6rem; }
.service-card p{ color: var(--e-gray); font-size: .93rem; margin-bottom: 1rem; }
.service-card ul{ list-style:none; padding:0; margin:0; }
.service-card ul li{
  font-size: .87rem;
  color: var(--e-navy);
  padding-left: 1.4rem;
  position: relative;
  margin-bottom: .45rem;
}
.service-card ul li::before{
  content: "\F26E";
  font-family: "bootstrap-icons";
  position:absolute; left:0; top:0;
  color: var(--e-green-dark);
  font-size: .85rem;
}

/* ============ EXPERTISES (teaser accueil, version sombre) ============ */
.services-dark-section{
  background: linear-gradient(160deg, var(--e-navy), var(--e-navy-2));
  position: relative;
  overflow: hidden;
}
.services-glow{
  top: auto;
  bottom: -18%;
  right: -8%;
  width: 480px;
  height: 480px;
  opacity: .2;
}
.eyebrow-light{ color: var(--e-green) !important; }
.expertises-heading{ padding-top: 70px; }
@media (max-width: 575.98px){
  .expertises-heading{ padding-top: 50px; }
}
.eyebrow-light i{ color: #fff; }

.service-card-dark{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--e-radius);
  padding: 2.5rem 2.1rem;
  height: 100%;
  position: relative;
  z-index: 2;
  transition: border-color .3s ease, transform .3s ease, background .3s ease;
}
.service-card-dark:hover,
.service-card-dark.active{
  border-color: var(--e-green);
  background: rgba(255,255,255,.05);
  transform: translateY(-6px);
}
.service-icon-outline{
  width: 62px;
  height: 62px;
  border: 1.5px solid var(--e-green);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: var(--e-green);
  margin-bottom: 1.6rem;
}
.service-card-dark h3{
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: .8rem;
}
.service-card-dark p{
  color: rgba(255,255,255,.55);
  font-size: .96rem;
  line-height: 1.6;
  margin: 0;
}

/* =================== METHODE =================== */
.step-card{
  background:#fff;
  border-radius: var(--e-radius);
  padding: 2rem 1.6rem;
  height:100%;
  border: 1px solid #eef2f4;
  position: relative;
  overflow:hidden;
}
.step-number{
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 2.4rem;
  background: linear-gradient(90deg, var(--e-blue), var(--e-green));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display:block;
  margin-bottom: .6rem;
}
.step-card h3{ font-size: 1.05rem; margin-bottom:.5rem; }
.step-card p{ color: var(--e-gray); font-size: .9rem; margin:0; }

/* =================== PORTFOLIO =================== */
.portfolio-card{
  display:block;
  position:relative;
  border-radius: var(--e-radius);
  overflow:hidden;
  aspect-ratio: 4/5;
  box-shadow: 0 10px 24px -14px rgba(20,35,44,.3);
}
.portfolio-card img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .5s ease;
}
.portfolio-card:hover img{ transform: scale(1.08); }
.portfolio-overlay{
  position:absolute; inset:0;
  /* Dégradé resserré près du bas : au-delà de ~45% de la hauteur, la photo
     reste totalement claire pour ne pas voiler le logo du client, souvent
     placé au centre ou dans le tiers supérieur du visuel. */
  background: linear-gradient(0deg, rgba(20,35,44,.94) 0%, rgba(20,35,44,.5) 24%, rgba(20,35,44,0) 45%);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding: 1.1rem 1.3rem;
  color:#fff;
  /* La photo reste seule et nette par défaut ; le bandeau (dégradé + tag +
     titre) n'apparaît qu'au survol de la carte, sur l'accueil comme sur la
     page réalisations. */
  opacity: 0;
  transition: opacity .3s ease;
}
.portfolio-card:hover .portfolio-overlay{ opacity: 1; }
.portfolio-tag{
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing:.05em;
  color: #a5e0c8;
  font-weight:700;
}
.portfolio-overlay h3{ color:#fff; font-size: 1.05rem; margin: .3rem 0 .5rem; }
.portfolio-link{
  font-size: .82rem;
  font-weight:600;
  color:#fff;
  opacity: 0;
  transform: translateY(6px);
  transition: all .3s ease;
}
.portfolio-card:hover .portfolio-link{ opacity:1; transform:translateY(0); }

/* Modificateur utilisé sur la page "réalisations" : on garde les proportions
   naturelles de chaque photo (pas de recadrage 4/5 + object-fit:cover). */
.portfolio-card-natural{ aspect-ratio: auto; }
.portfolio-card-natural img{ height: auto; object-fit: initial; display: block; }

/* =================== PORTFOLIO - GRILLE PLEIN ÉCRAN (page réalisations) =================== */
.portfolio-full-bleed{ padding-left: 2.5vw; padding-right: 2.5vw; }
/* Grille (et non colonnes CSS façon masonry) : les projets restent dans l'ordre
   de lecture 1-2-3-4 / 5-6-7-8 plutôt que d'être répartis colonne par colonne.
   align-items:start laisse chaque carte à sa hauteur naturelle (proportions
   de la photo conservées), sans étirement sur la hauteur de la ligne. */
.portfolio-masonry{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 1199.98px){ .portfolio-masonry{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767.98px){ .portfolio-masonry{ grid-template-columns: repeat(2, 1fr); gap: 1rem; } }
@media (max-width: 575.98px){
  .portfolio-masonry{ grid-template-columns: 1fr; }
  .portfolio-full-bleed{ padding-left: 1rem; padding-right: 1rem; }
}

/* =================== RÉALISATIONS - SLIDER PLEIN ÉCRAN (accueil) =================== */
.realisations-slider-section{
  background: #fff;
  overflow: hidden;
}

.realisations-slider-wrap{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.realisations-slider{
  display: flex;
  align-items: flex-start;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0 4vw 8px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.realisations-slider::-webkit-scrollbar{ display: none; }
.realisations-slider.is-dragging{
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
}

/* Les slides réutilisent le composant .portfolio-card (même visuel, même
   source de données que la page "réalisations") : ici on ne définit que
   la mise en page horizontale (largeur, défilement). */
.slider-slide{
  flex: 0 0 auto;
  width: 26vw;
  max-width: 340px;
  scroll-snap-align: start;
}

.slider-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #e2e8ea;
  color: var(--e-navy);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  cursor: pointer;
  box-shadow: 0 12px 28px -14px rgba(20,35,44,.3);
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.slider-arrow:hover{
  background: var(--e-green);
  border-color: var(--e-green);
  color: var(--e-navy);
}
.slider-arrow-prev{ left: 3vw; }
.slider-arrow-next{ right: 3vw; }

@media (max-width: 991.98px){
  .slider-slide{ width: 35vw; }
}
@media (max-width: 767.98px){
  .realisations-slider{ padding: 0 8vw 8px; gap: 16px; }
  .slider-slide{ width: 52vw; }
  .slider-arrow{ width: 44px; height: 44px; font-size: 1rem; }
  .slider-arrow-prev{ left: 10px; }
  .slider-arrow-next{ right: 10px; }
}
@media (max-width: 575.98px){
  .slider-slide{ width: 84vw; }
}

/* =================== CTA BAND =================== */
.cta-band{
  background: linear-gradient(120deg, var(--e-blue), var(--e-green));
  padding: 80px 0;
  color:#fff;
}
.cta-band h2{ color:#fff; font-size: clamp(1.8rem,3.4vw,2.6rem); margin-bottom: .8rem; }
.cta-band p{ opacity:.92; margin-bottom: 1.8rem; font-size: 1.05rem; }
.cta-band .btn-light{ color: var(--e-navy); }

/* =================== CONTACT =================== */
.contact-info-card{
  background: var(--e-navy);
  color:#fff;
  border-radius: var(--e-radius);
  padding: 2.4rem;
  height:100%;
}
.contact-info-item{
  display:flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.contact-info-item i{
  width: 42px; height:42px;
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  color: var(--e-green);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.contact-info-item h4{ color:#fff; font-size: .95rem; margin-bottom:.2rem; }
.contact-info-item p{ margin:0; color: rgba(255,255,255,.75); font-size: .92rem; }
.contact-info-item a{ color: rgba(255,255,255,.85); }
.contact-info-item a:hover{ color: var(--e-green); }
.contact-map{ border-radius: 14px; overflow:hidden; margin-top: .5rem; }

.contact-form{
  background:#fff;
  border: 1px solid #eef2f4;
  border-radius: var(--e-radius);
  padding: 2.4rem;
  box-shadow: var(--e-shadow);
}
.contact-form .form-label{ font-weight:600; font-size:.88rem; }
.contact-form .form-control, .contact-form .form-select{
  border-radius: 10px;
  border: 1px solid #dfe6ea;
  padding: .65rem .9rem;
}
.contact-form .form-control:focus, .contact-form .form-select:focus{
  border-color: var(--e-blue);
  box-shadow: 0 0 0 .2rem rgba(42,146,200,.15);
}
.sendmessage{
  color: var(--e-green-dark);
  font-size: 1.1rem;
  line-height: 1.6;
}
.echec{
  color: #c0392b;
  background: #fdecea;
  border-radius: 10px;
  padding: .75rem 1rem;
  font-size: .92rem;
  margin-bottom: 1rem;
}

/* =================== FOOTER =================== */
.site-footer{
  background: var(--e-navy);
  color: rgba(255,255,255,.7);
  font-size: .92rem;
}

/* ---- Bandeau CTA en haut du footer ---- */
.footer-cta{
  position: relative;
  overflow: hidden;
  padding: 120px 0 90px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(135deg, rgba(42,146,200,.7), rgba(165,200,42,.6)),
    linear-gradient(160deg, var(--e-navy), var(--e-navy-2));
}
.footer-cta .container{ position: relative; z-index: 1; }

.footer-cta-title{
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(2.6rem, 5.4vw, 4.6rem);
  line-height: 1.05;
  letter-spacing: -.01em;
  color: #fff;
  margin: 0;
}
.text-accent-green{ color: var(--e-green); }

.footer-cta-divider{
  opacity: 1; /* Bootstrap met opacity:.25 par défaut sur les <hr>, ce qui rendait le trait invisible */
  border: none;
  border-top: 1px solid rgba(255,255,255,.22);
  margin: 4.5rem 0 4rem;
}

.footer-cta-desc{
  color: rgba(255,255,255,.6);
  font-size: 1rem;
  line-height: 1.65;
  max-width: 380px;
  margin: 0;
}

.footer-phone-big{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .7rem;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.7rem, 2.8vw, 2.3rem);
  color: #fff;
  transition: color .2s ease;
}
.footer-phone-big:hover{ color: var(--e-green); }
@media (min-width: 992px){
  .text-lg-end .footer-phone-big{ justify-content: flex-end; }
}
.footer-phone-icon{
  background: linear-gradient(135deg, var(--e-blue), var(--e-green));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: .8em;
  flex-shrink: 0;
}

.footer-info-text{
  color: rgba(255,255,255,.65);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}
.footer-info-text a{
  color: rgba(255,255,255,.9);
  font-weight: 600;
  transition: color .2s ease;
}
.footer-info-text a:hover{ color: var(--e-green); }

.site-footer h5{ color:#fff; font-size: 1rem; margin-bottom: 1.1rem; }
.footer-links{ list-style:none; padding:0; margin:0; }
.footer-links li{ margin-bottom: .7rem; }
.footer-links a{ color: rgba(255,255,255,.7); transition: color .2s ease; }
.footer-links a:hover{ color: var(--e-green); }
.footer-legal-link{ color: rgba(255,255,255,.7) !important; transition: color .2s ease; }
.footer-legal-link:hover{ color: var(--e-green) !important; }

/* =================== BACK TO TOP =================== */
.back-to-top{
  position: fixed;
  right: 24px; bottom: 24px;
  width: 46px; height:46px;
  border-radius:50%;
  background: linear-gradient(135deg, var(--e-blue), var(--e-green));
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transform: translateY(10px);
  transition: all .3s ease;
  z-index: 999;
  box-shadow: var(--e-shadow);
}
.back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }

/* =================== REVEAL ANIMATION =================== */
[data-reveal]{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
[data-reveal].in-view{
  opacity: 1;
  transform: translateY(0);
}

/* =================== RESPONSIVE =================== */
@media (max-width: 991.98px){
  .section-py{ padding: 70px 0; }
  .section-agence-teaser{ padding-top: 100px; padding-bottom: 100px; }
  .navbar-eliacom{ background: rgba(255,255,255,.96); padding: 12px 0; }
  /* le fond de la navbar mobile est toujours clair : le logo et le menu doivent donc
     toujours rester en couleur/foncé ici, même sur les pages intérieures (bannière sombre) */
  .navbar-eliacom.navbar-on-dark{
    --nav-link-color: var(--e-navy);
    --nav-link-active-color: var(--e-blue-dark);
    --nav-brand-filter: none;
    --nav-toggler-filter: none;
  }
  .navbar-eliacom.navbar-on-dark .navbar-toggler{ border-color: rgba(20,35,44,.2); }
  .navbar-collapse{ margin-top: 1rem; }

  /* Menu mobile : liens plus gros et centrés, bouton pleine largeur */
  .navbar-eliacom .nav-item{ text-align: center; }
  .navbar-eliacom .nav-link{ font-size: 1.35rem; padding: .65rem 1rem !important; }
  .navbar-eliacom .nav-link::after{ display: none; }
  .navbar-eliacom .nav-item.ms-lg-2{ margin-top: .75rem; }
  .navbar-eliacom .nav-item.ms-lg-2 .btn{
    width: 100%;
    justify-content: center;
    padding-left: 1.5rem !important;
  }

  .hero{ padding-top: 130px; text-align:center; }
  .hero-lead{ margin-left:auto; margin-right:auto; }
  .hero-mark-wrap{ display: none; }

  /* Footer : centré et condensé en dessous de lg */
  .footer-cta{ padding: 70px 0 50px; text-align: center; }
  .footer-cta-title{ font-size: clamp(2.1rem, 9vw, 2.8rem); }
  .footer-cta-desc{ margin-left: auto; margin-right: auto; }
  .footer-cta-divider{ margin: 2.5rem 0 2.25rem; }
  .footer-row-top .footer-phone-big{ justify-content: center; }
  .footer-row-top .btn-footer-contact{ margin-left: auto; margin-right: auto; }
  .footer-row-info{ text-align: center; --bs-gutter-y: 2rem; }
  .footer-row-contact{ --bs-gutter-y: 1.25rem; }
  .site-footer h5{ margin-bottom: .6rem; }
  .footer-info-text{ font-size: .95rem; }
}

@media (max-width: 575.98px){
  .footer-cta{ padding: 56px 0 40px; }
  .footer-cta-divider{ margin: 2rem 0 1.75rem; }
}