/* ============================================================
   ETANSUR — index.css v2
   Thème mi-dark BTP Premium — alternance clair / sombre
   IS COM Agency
   ============================================================ */

/* ============================================================
   1. HERO — fond sombre
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: var(--sticky-offset);
  background: var(--color-dark);
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero__bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}

.hero__bg-glow--1 {
  width: 600px; height: 600px;
  top: -100px; right: -80px;
  background: radial-gradient(circle, rgba(48,164,208,0.10) 0%, transparent 70%);
  animation: heroGlow1 8s ease-in-out infinite alternate;
}

.hero__bg-glow--2 {
  width: 400px; height: 400px;
  bottom: 60px; left: -60px;
  background: radial-gradient(circle, rgba(48,164,208,0.06) 0%, transparent 70%);
  animation: heroGlow2 10s ease-in-out infinite alternate;
}

.hero__bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(48,164,208,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(48,164,208,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 0%, transparent 100%);
}

@keyframes heroGlow1 {
  from { transform:translate(0,0) scale(1); opacity:.8; }
  to   { transform:translate(30px,20px) scale(1.1); opacity:1; }
}
@keyframes heroGlow2 {
  from { transform:translate(0,0) scale(1); opacity:.6; }
  to   { transform:translate(-20px,15px) scale(1.08); opacity:.9; }
}

.hero__container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
  padding-block: var(--space-20);
}

.hero__left {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.hero__badge { align-self: flex-start; }

.hero__badge .badge__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
  animation: dotBlink 2s ease-in-out infinite;
}

@keyframes dotBlink {
  0%,100% { opacity:1; box-shadow:0 0 0 0 rgba(48,164,208,0.4); }
  50%      { opacity:.7; box-shadow:0 0 0 5px rgba(48,164,208,0); }
}

.hero__title {
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: var(--fw-black);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--color-white);
}

.hero__title-accent {
  color: var(--color-accent);
  position: relative;
  display: inline-block;
}

.hero__title-accent::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--color-accent), transparent);
  border-radius: 2px;
}

.hero__desc {
  font-size: var(--fs-md);
  color: rgba(255,255,255,0.65);
  line-height: var(--lh-loose);
  max-width: 52ch;
}

.hero__actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.hero__right { display:flex; justify-content:flex-end; }

.hero__certif-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  width: 100%;
  max-width: 440px;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
}

.hero__certif-card::before {
  content: '';
  position: absolute;
  top:0; left:0; right:0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
}

.hero__certif-label { margin-bottom: var(--space-6); }

.hero__certif-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.hero__certif-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  transition: background var(--dur-fast) var(--ease-out);
}
.hero__certif-item:hover { background: rgba(255,255,255,0.05); }

.hero__certif-icon {
  width: 36px; height: 36px; min-width: 36px;
  border-radius: var(--radius-md);
  background: rgba(48,164,208,0.14);
  border: 1px solid rgba(48,164,208,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
}
.hero__certif-icon svg { width:16px; height:16px; }

.hero__certif-item > div:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hero__certif-item strong {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-white);
}
.hero__certif-item span {
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.45);
}

/* Certif logos */
.hero__certif-logo {
  width: 70px; height: 70px; min-width: 70px;
  object-fit: contain;
  background: #ffffff;
  border-radius: var(--radius-md);
  padding: 4px;
}

.hero__scroll {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero__scroll-line {
  width: 1px; height: 60px;
  background: linear-gradient(to bottom, var(--color-accent), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%   { opacity:1; transform:scaleY(1) translateY(0); }
  100% { opacity:0; transform:scaleY(.5) translateY(20px); }
}

/* ============================================================
   2. CLIENTS — fond clair
   ============================================================ */
.clients {
  background: var(--color-white);
  border-top: 1px solid var(--color-light-border);
  border-bottom: 1px solid var(--color-light-border);
  overflow: hidden;
}

.clients__header {
  text-align: center;
  margin-bottom: var(--space-10);
}
.clients__header .section-title {
  font-size: clamp(var(--fs-xl), 3vw, var(--fs-2xl));
  color: var(--color-text-dark);
}

.clients__track-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-inline: var(--container-pad);
  max-width: var(--container-max);
  margin-inline: auto;
}

.clients__track-clip {
  flex: 1;
  overflow: hidden;
  position: relative;
}
.clients__track-clip::before,
.clients__track-clip::after {
  content: '';
  position: absolute;
  top:0; bottom:0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.clients__track-clip::before { left:0;  background: linear-gradient(90deg, var(--color-white), transparent); }
.clients__track-clip::after  { right:0; background: linear-gradient(-90deg, var(--color-white), transparent); }

.clients__track {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  transition: transform 0.4s var(--ease-out);
  padding-block: var(--space-4);
}

.client-item {
  flex-shrink: 0;
  min-width: 160px;
  height: 70px;
  background: #ffffff;
  border: 1px solid var(--color-light-border);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-4);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.client-item:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-card);
}

.client-item img {
  max-height: 48px;
  max-width: 140px;
  object-fit: contain;
}

.client-item__placeholder {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-align: center;
}

.clients__arrow {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--color-white);
  border: 1px solid var(--color-light-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  box-shadow: var(--shadow-xs);
  transition:
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
  cursor: pointer;
  z-index: 3;
}
.clients__arrow:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
  box-shadow: var(--shadow-glow);
}
.clients__arrow svg { width:15px; height:15px; }

/* ============================================================
   3. PRESTATIONS — fond warm clair
   ============================================================ */
.prestations {
  background: var(--color-light-warm);
  border-top: 1px solid var(--color-light-border);
  border-bottom: 1px solid var(--color-light-border);
}

.prestations__header { margin-bottom: var(--space-12); }

.prestations__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.prestation-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-8);
  background: var(--color-white);
  border: 1px solid var(--color-light-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition:
    border-color var(--dur-mid) var(--ease-out),
    box-shadow var(--dur-mid) var(--ease-out),
    transform var(--dur-mid) var(--ease-out);
}
.prestation-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
}

.prestation-card::before {
  content: '';
  position: absolute;
  top:0; bottom:0; left:0;
  width: 3px;
  background: var(--color-accent);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--dur-mid) var(--ease-out);
}
.prestation-card:hover::before { transform: scaleY(1); }

.prestation-card__icon {
  width: 46px; height: 46px;
  border-radius: var(--radius-md);
  background: rgba(48,164,208,0.08);
  border: 1px solid rgba(48,164,208,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.prestation-card__icon svg { width:21px; height:21px; }
.prestation-card:hover .prestation-card__icon {
  background: rgba(48,164,208,0.14);
  border-color: var(--color-accent);
}

.prestation-card__num {
  position: absolute;
  top: var(--space-5); right: var(--space-5);
  font-size: 2.8rem;
  font-weight: var(--fw-black);
  color: var(--color-light-2);
  line-height: 1;
  letter-spacing: -0.04em;
  pointer-events: none;
}

.prestation-card__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-text-dark);
  padding-right: var(--space-10);
}

.prestation-card__sub {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-accent);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  margin-top: calc(-1 * var(--space-2));
}

.prestation-card__desc {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-loose);
  flex: 1;
}

.prestation-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-light-border);
}
.prestation-card__tags li {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  background: var(--color-light-warm);
  border: 1px solid var(--color-light-border);
  border-radius: var(--radius-full);
  padding: 3px var(--space-3);
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.prestation-card:hover .prestation-card__tags li {
  color: var(--color-accent);
  border-color: rgba(48,164,208,0.25);
  background: rgba(48,164,208,0.06);
}

/* ============================================================
   4. CHIFFRES CLÉS — fond sombre
   ============================================================ */
.chiffres {
  background: var(--color-dark);
  position: relative;
  overflow: hidden;
}

.chiffres__bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(48,164,208,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.chiffres .container { position:relative; z-index:1; }

.chiffres__header {
  text-align: center;
  margin-bottom: var(--space-16);
}

.chiffres__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.chiffre-item {
  background: var(--color-dark-surface);
  padding: var(--space-10) var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  position: relative;
  transition: background var(--dur-mid) var(--ease-out);
}
.chiffre-item:hover { background: var(--color-dark-surface-2); }

.chiffre-item::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 50%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease-out);
}
.chiffre-item:hover::before { opacity: 1; }

.chiffre-item__value {
  font-size: clamp(2.8rem, 5vw, 4rem);
  font-weight: var(--fw-black);
  color: var(--color-white);
  line-height: 1;
  letter-spacing: -0.04em;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.chiffre-item__unit {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  color: var(--color-accent);
  font-weight: var(--fw-bold);
}
.chiffre-item__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: rgba(255,255,255,0.7);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.chiffre-item__desc {
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.38);
  line-height: var(--lh-loose);
  max-width: 20ch;
}

/* ============================================================
   5. ZONES D'INTERVENTION — fond clair
   ============================================================ */
.zones {
  background: var(--color-white);
  border-top: 1px solid var(--color-light-border);
}

.zones__header { margin-bottom: var(--space-12); }

.zones__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
}

.zones__map-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
}

.zones__map-container {
  position: relative;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 500px !important;
  background: var(--color-light-warm);
  border: 1px solid var(--color-light-border);
  border-radius: var(--radius-xl);
  padding: var(--space-4) !important;
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  justify-content: center;
}

.idf-map {
  width: 100% !important;
  height: 500px !important;
  min-height: 500px !important;
  display: block !important;
}

.idf-region {
  stroke: var(--color-accent);
  stroke-width: 1.5;
  fill: rgba(48,164,208,0.04);
  opacity: .6;
}

/* Map points */
.map-point { cursor:pointer; }
.map-point .map-tooltip {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out);
  pointer-events: none;
}
.map-point:hover .map-tooltip,
.map-point:focus .map-tooltip,
.map-point.focused .map-tooltip { opacity:1; transform:translateY(0); }

.map-point__pulse { animation: mapPulse 2.5s ease-in-out infinite; }
@keyframes mapPulse {
  0%   { r:7;  opacity:.55; }
  70%  { r:20; opacity:0; }
  100% { r:7;  opacity:0; }
}
.map-point__dot  { filter: drop-shadow(0 0 5px rgba(48,164,208,0.7)); }
.map-point__ring { animation: mapRing 2.5s ease-in-out infinite .4s; }
@keyframes mapRing {
  0%   { r:8;  opacity:.45; }
  100% { r:18; opacity:0; }
}

/* Tooltips HTML */
.map-tip {
  position: absolute;
  left: 42%; top: 36%;
  background: #0f1319;
  border: 1.5px solid #30a4d0;
  border-radius: 10px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 10;
  min-width: 200px;
  max-width: 240px;
}
.map-tip--right { left:auto; right:5%; top:42%; }
.map-tip.visible { opacity:1; transform:translateY(0); }
.map-tip__title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #30a4d0;
}
.map-tip__line { font-size:0.78rem; color:#7a8fa8; line-height:1.5; }

/* Adresses zones */
.zones__addresses {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.zones__address-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  padding: var(--space-6);
  background: var(--color-white);
  border: 1px solid var(--color-light-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.zones__address-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.zones__address-icon {
  width: 44px; height: 44px; min-width: 44px;
  background: rgba(48,164,208,0.08);
  border: 1px solid rgba(48,164,208,0.18);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
}
.zones__address-icon svg { width:19px; height:19px; }

.zones__address-type {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-1);
}
.zones__address-name {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-text-dark);
  margin-bottom: var(--space-2);
}
.zones__address-text {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-loose);
}

.zones__delay {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-accent);
  margin-top: var(--space-3);
  letter-spacing: var(--ls-wide);
}
.zones__delay svg   { width:13px; height:13px; }
.zones__delay strong { font-weight: var(--fw-black); }

.zones__coverage {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: rgba(48,164,208,0.06);
  border: 1px solid rgba(48,164,208,0.15);
  border-radius: var(--radius-lg);
}
.zones__coverage svg   { width:17px; height:17px; color:var(--color-accent); flex-shrink:0; }
.zones__coverage span  { font-size:var(--fs-sm); color:var(--color-text-mid); }
.zones__coverage strong { color:var(--color-accent); font-weight:var(--fw-semibold); }

/* Contour France */
.france-outline { transition: stroke 0.3s ease; }

/* ============================================================
   6. CERTIFICATIONS — fond sombre
   ============================================================ */
.certifs {
  background: var(--color-dark-2);
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  overflow: hidden;
}

.certifs__header {
  text-align: center;
  margin-bottom: var(--space-10);
}
.certifs__header .section-title {
  font-size: clamp(var(--fs-xl), 3vw, var(--fs-2xl));
  color: var(--color-white);
}

.certifs__static {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  flex-wrap: wrap;
  padding-inline: var(--container-pad);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-block: var(--space-4);
}

.certif-item {
  flex-shrink: 0;
  min-width: 160px;
  height: 88px;
  background: #ffffff;
  border: 1px solid var(--color-light-border);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4) var(--space-6);
  transition: box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.certif-item:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}
.certif-item img {
  max-height: 52px;
  max-width: 140px;
  object-fit: contain;
}

/* ============================================================
   7. POURQUOI ETANSUR — fond clair warm
   ============================================================ */
.why {
  background: var(--color-light-warm);
  border-top: 1px solid var(--color-light-border);
  border-bottom: 1px solid var(--color-light-border);
}

.why__header { margin-bottom: var(--space-12); }

.why__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}

.why-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-8);
  background: var(--color-white);
  border: 1px solid var(--color-light-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  transition:
    border-color var(--dur-mid) var(--ease-out),
    box-shadow var(--dur-mid) var(--ease-out),
    transform var(--dur-mid) var(--ease-out);
}
.why-item:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
}

.why-item__icon {
  width: 50px; height: 50px;
  border-radius: var(--radius-md);
  background: rgba(48,164,208,0.08);
  border: 1px solid rgba(48,164,208,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.why-item__icon svg { width:22px; height:22px; }
.why-item:hover .why-item__icon {
  background: rgba(48,164,208,0.14);
  border-color: var(--color-accent);
}

.why-item__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--color-text-dark);
}
.why-item__desc {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-loose);
  flex: 1;
}

/* ============================================================
   8. CONTACT — fond sombre
   ============================================================ */
.contact {
  background: var(--color-dark);
  border-top: 1px solid rgba(255,255,255,0.05);
}

.contact__header { margin-bottom: var(--space-12); }

.contact__layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-12);
  align-items: stretch;
}

.contact__form-wrapper {
  background: var(--color-dark-surface);
  border: 1px solid var(--color-dark-border);
  border-radius: var(--radius-xl);
  padding: var(--space-10);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.contact__form-wrapper::before {
  content: '';
  position: absolute;
  top:0; left:0; right:0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-accent), transparent);
}

.contact__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  flex: 1;
}

.contact__form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

.contact__submit { width:100%; margin-top:var(--space-2); }

.contact__form-mention {
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.28);
  text-align: center;
  line-height: var(--lh-loose);
}
.contact__form-mention a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact__feedback {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-align: center;
}
.contact__feedback.success {
  background: rgba(48,164,208,0.12);
  border: 1px solid rgba(48,164,208,0.3);
  color: var(--color-accent-light);
}
.contact__feedback.error {
  background: rgba(220,60,60,0.1);
  border: 1px solid rgba(220,60,60,0.3);
  color: #f87171;
}

.contact__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.contact__coord-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-dark-surface);
  border: 1px solid var(--color-dark-border);
  border-radius: var(--radius-lg);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}
.contact__coord-item:hover {
  border-color: var(--color-dark-border-hover);
  background: var(--color-dark-surface-2);
}

.contact__coord-icon {
  width: 42px; height: 42px; min-width: 42px;
  background: rgba(48,164,208,0.12);
  border: 1px solid rgba(48,164,208,0.22);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
}
.contact__coord-icon svg { width:18px; height:18px; }

.contact__coord-item > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.contact__coord-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: rgba(255,255,255,0.32);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.contact__coord-value {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--color-white);
}

.contact__address-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-dark-surface);
  border: 1px solid var(--color-dark-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.contact__address-item:hover {
  border-color: var(--color-dark-border-hover);
  background: var(--color-dark-surface-2);
}
.contact__address-item > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.contact__coord-sub {
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.32);
}

.contact__map {
  flex: 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-dark-border);
  line-height: 0;
  min-height: 200px;
}
.contact__map iframe {
  width: 100%;
  height: 100%;
  min-height: 200px;
  display: block;
  filter: grayscale(1) invert(0.90) hue-rotate(175deg) brightness(0.82);
  transition: filter var(--dur-mid) var(--ease-out);
}
.contact__map:hover iframe {
  filter: grayscale(0.5) invert(0.90) hue-rotate(175deg) brightness(0.88);
}

/* ============================================================
   9. FOOTER
   ============================================================ */
.footer__baseline {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.42);
  line-height: var(--lh-loose);
  margin-top: var(--space-4);
  margin-bottom: var(--space-5);
}
.footer__contact-links { display:flex; flex-direction:column; gap:var(--space-2); }
.footer__contact-links a,
.footer__address,
.footer__siren {
  font-size: var(--fs-sm);
  color: rgba(122,143,168,1);
  line-height: var(--lh-loose);
  font-style: normal;
  margin-top: 0;
  letter-spacing: normal;
}
.footer__credit { font-size:var(--fs-xs); color:rgba(255,255,255,0.2); }
.footer__credit a { text-decoration:underline; text-underline-offset:3px; }

/* ============================================================
   10. RESPONSIVE
   ============================================================ */
@media (max-width:1024px) {
  .hero__container     { grid-template-columns:1fr; gap:var(--space-12); }
  .hero__right         { justify-content:stretch; }
  .hero__certif-card   { max-width:100%; }
  .prestations__grid   { grid-template-columns:repeat(2,1fr); }
  .chiffres__grid      { grid-template-columns:repeat(2,1fr); }
  .zones__layout       { grid-template-columns:1fr; gap:var(--space-8); }
  .zones__map-container { min-height:380px !important; }
  .idf-map             { height:380px !important; min-height:380px !important; }
  .why__grid           { grid-template-columns:repeat(2,1fr); }
  .contact__layout     { grid-template-columns:1fr; }
}

@media (max-width:768px) {
  .hero { min-height:auto; padding-bottom:var(--space-16); }
  .hero__container { padding-block:var(--space-12); gap:var(--space-10); }
  .hero__title     { font-size:clamp(2rem,8vw,2.8rem); }
  .hero__actions   { flex-direction:column; }
  .hero__actions .btn { width:100%; justify-content:center; }
  .prestations__grid { grid-template-columns:1fr; }
  .chiffres__grid  { grid-template-columns:1fr 1fr; }
  .zones__layout   { grid-template-columns:1fr; gap:var(--space-6); }
  .zones__map-container { min-height:300px !important; padding:var(--space-3) !important; }
  .idf-map         { height:300px !important; min-height:300px !important; }
  .zones__addresses { gap:var(--space-4); }
  .zones__address-card { padding:var(--space-4); }
  .why__grid       { grid-template-columns:1fr; }
  .contact__form-row { grid-template-columns:1fr; }
  .contact__form-wrapper { padding:var(--space-6); }
  .clients__track-wrapper { padding-inline:var(--space-4); }
}

@media (max-width:480px) {
  .hero__certif-card { padding:var(--space-5); }
  .chiffres__grid    { grid-template-columns:1fr; }
  .chiffre-item      { padding:var(--space-8) var(--space-6); }
  .zones__map-container { min-height:240px !important; }
  .idf-map           { height:240px !important; min-height:240px !important; }
  .zones__address-card { flex-direction:column; gap:var(--space-3); }
  .zones__address-icon { width:36px; height:36px; min-width:36px; }
}