/* =========================================================
 * ARDÈS — Services simple (v3) avec animations d'entrée + hover coloré
 * ========================================================= */

/* Hero — neutralisation du wrapper paragraph autour du CTA */
.ardes-hero-content .ardes-hero-cta-wrap {
  margin: 0;
  padding: 0;
}

/* =========================================================
 * V5 — Fix mobile : éviter que le titre passe sous le header sticky
 * ========================================================= */
@media (max-width: 900px) {
  .ardes-hero-content {
    top: clamp(110px, 14vh, 180px) !important;
  }
}

/* Sur très petits écrans, on laisse encore plus de marge */
@media (max-width: 600px) {
  .ardes-hero-content {
    top: clamp(120px, 16vh, 180px) !important;
  }
  .ardes-hero-content h1 {
    font-size: clamp(34px, 8vw, 56px) !important;
  }
}

/* =========================================================
 * V5 — Fix bande bleue : SOLUTION DÉFINITIVE
 *
 * COMMENT ÇA MARCHE :
 * - Le hero fait 150vh de haut, contient un wrapper sticky de 100vh
 * - Pendant les 100 premiers vh de scroll, le sticky retient la page
 *   → la page semble ne pas descendre, mais l'animation s'éclaire
 *   au fur et à mesure du scroll (alimentée par le scroll position)
 * - À 100vh de scroll, le sticky se libère et part vers le haut avec la page
 *
 * PROBLÈME : .ardes-light-hero a un `background: #05083a` qui couvre
 * toute la hauteur 150vh. Quand le sticky se détache à 100vh, on voit
 * encore 50vh de fond bleu nuit avant la section suivante = bande bleue.
 *
 * FIX : on rend le fond du hero TRANSPARENT. Le bleu est porté uniquement
 * par `.ardes-light-bg` qui est À L'INTÉRIEUR du sticky. Quand le sticky
 * se détache, le bleu part avec lui → plus de bande bleue, transition
 * directe vers la section blanche "Notre histoire".
 * ========================================================= */
.ardes-light-hero {
  background: transparent !important;
}

/* Section container */
.ardes-services-simple {
  padding: clamp(96px, 12vw, 160px) clamp(20px, 4vw, 48px);
  background: #f7f5f2;
}

.ardes-services-simple-inner {
  max-width: 1360px;
  margin: 0 auto;
}

/* En-tête */
.ardes-services-simple-head {
  margin-bottom: clamp(48px, 6vw, 88px);
}

.ardes-services-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 24px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #2a2eb6;
}

.ardes-services-eyebrow .rule {
  width: 28px;
  height: 1.5px;
  background: #2a2eb6;
  display: inline-block;
}

.ardes-services-title {
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0;
  color: #0e1330;
  max-width: 900px;
}

.ardes-services-title .muted {
  color: #787b8c;
  display: block;
}

/* Grille 4 + 1 */
.ardes-services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

@media (max-width: 1100px) {
  .ardes-services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .ardes-services-grid { grid-template-columns: 1fr; }
}

/* Carte — état de base */
.ardes-svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px 28px 32px;
  background: #ffffff;
  border: 1px solid rgba(14, 19, 48, 0.08);
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.45s ease;
  /* État initial pour l'animation d'entrée */
  opacity: 0;
  transform: translateY(28px);
}

/* Animation d'entrée au scroll (déclenchée par JS qui ajoute .is-visible) */
.ardes-svc-card.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.45s ease;
}

/* Délai en cascade — chaque carte apparaît avec ~80ms de décalage */
.ardes-svc-card[data-svc="01"] { transition-delay: 0ms; }
.ardes-svc-card[data-svc="02"] { transition-delay: 80ms; }
.ardes-svc-card[data-svc="03"] { transition-delay: 160ms; }
.ardes-svc-card[data-svc="04"] { transition-delay: 240ms; }
.ardes-svc-card[data-svc="05"] { transition-delay: 320ms; }

/* Hover — élévation subtile */
.ardes-svc-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -20px rgba(14, 19, 48, 0.18);
  border-color: rgba(14, 19, 48, 0.14);
}

/* Top : numéro + icône */
.ardes-svc-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 56px;
}

.ardes-svc-num {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: #787b8c;
  margin-top: 6px;
}

/* Icône — pastille */
.ardes-svc-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eef0fa;
  color: #2a2eb6;
  transition:
    background 0.4s ease,
    color 0.4s ease,
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s ease;
}

.ardes-svc-icon svg {
  width: 22px;
  height: 22px;
}

/* Hover : chaque carte a sa couleur d'accent (comme dans tes captures) */
.ardes-svc-card--electricite:hover .ardes-svc-icon {
  background: #facc15;
  color: #0e1330;
  box-shadow: 0 8px 22px -6px rgba(250, 204, 21, 0.6);
  transform: scale(1.06);
}
.ardes-svc-card--domotique:hover .ardes-svc-icon {
  background: #2a2eb6;
  color: #ffffff;
  box-shadow: 0 8px 22px -6px rgba(42, 46, 182, 0.5);
  transform: scale(1.06);
}
.ardes-svc-card--video:hover .ardes-svc-icon {
  background: #ef4444;
  color: #ffffff;
  box-shadow: 0 8px 22px -6px rgba(239, 68, 68, 0.5);
  transform: scale(1.06);
}
.ardes-svc-card--borne:hover .ardes-svc-icon {
  background: #10b981;
  color: #ffffff;
  box-shadow: 0 8px 22px -6px rgba(16, 185, 129, 0.5);
  transform: scale(1.06);
}
.ardes-svc-card--reseau:hover .ardes-svc-icon {
  background: #f97316;
  color: #ffffff;
  box-shadow: 0 8px 22px -6px rgba(249, 115, 22, 0.5);
  transform: scale(1.06);
}

/* Titre */
.ardes-svc-title {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: #0e1330;
}

/* Description */
.ardes-svc-desc {
  margin: 0 0 20px;
  font-size: 14.5px;
  line-height: 1.55;
  color: #4b5063;
  flex-grow: 1;
}

/* CTA */
.ardes-svc-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #2a2eb6;
  transition: color 0.4s ease;
}

.ardes-svc-arrow {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.ardes-svc-card:hover .ardes-svc-arrow {
  transform: translateX(4px);
}

/* CTA prend la couleur de l'accent au hover */
.ardes-svc-card--electricite:hover .ardes-svc-cta { color: #b88500; }
.ardes-svc-card--domotique:hover  .ardes-svc-cta { color: #2a2eb6; }
.ardes-svc-card--video:hover      .ardes-svc-cta { color: #dc2626; }
.ardes-svc-card--borne:hover      .ardes-svc-cta { color: #059669; }
.ardes-svc-card--reseau:hover     .ardes-svc-cta { color: #ea580c; }

/* Désactiver les animations si l'utilisateur préfère */
@media (prefers-reduced-motion: reduce) {
  .ardes-svc-card,
  .ardes-svc-icon,
  .ardes-svc-arrow {
    transition: none !important;
  }
  .ardes-svc-card {
    opacity: 1;
    transform: none;
  }
}

/* =========================================================
 * V5 — Animations SVG dans les icônes services
 * ========================================================= */

/* SVG : taille standard */
.ardes-svc-svg {
  width: 22px;
  height: 22px;
  overflow: visible;
}

/* ===== ICÔNE 02 : DOMOTIQUE — fenêtre qui s'éclaire ===== */
/* La fenêtre est invisible au repos (fill transparent), s'éclaire en jaune chaud au hover */
.ardes-svc-svg--home .anim-window {
  fill: transparent;
  transition: fill 0.35s ease;
}
.ardes-svc-card--domotique:hover .ardes-svc-svg--home .anim-window {
  fill: #fcd34d;
  animation: ardesWindowGlow 1.4s ease-in-out infinite;
}
@keyframes ardesWindowGlow {
  0%, 100% { fill: #fcd34d; }
  50%      { fill: #fef3c7; }
}

/* ===== ICÔNE 03 : VIDÉOPHONIE — ondes sonores qui sortent ===== */
.ardes-svc-svg--voice .anim-wave {
  stroke-linecap: round;
  transform-origin: 14px 12px;
  transition: opacity 0.2s ease;
}
.ardes-svc-card--video:hover .ardes-svc-svg--voice .anim-wave-1 {
  animation: ardesWavePulse 1.4s ease-in-out infinite;
  animation-delay: 0s;
}
.ardes-svc-card--video:hover .ardes-svc-svg--voice .anim-wave-2 {
  animation: ardesWavePulse 1.4s ease-in-out infinite;
  animation-delay: 0.45s;
}
@keyframes ardesWavePulse {
  0%   { opacity: 0;   transform: translateX(-2px) scale(0.85); }
  40%  { opacity: 1;   transform: translateX(0)    scale(1); }
  100% { opacity: 0;   transform: translateX(2px)  scale(1.1); }
}

/* ===== ICÔNE 04 : BORNES — câble qui apparaît au hover ===== */
/* Au repos : le câble et la prise sont invisibles (la borne reste épurée) */
.ardes-svc-svg--ev .anim-cable,
.ardes-svc-svg--ev .anim-cable-plug {
  opacity: 0;
  transition: opacity 0.35s ease;
}
/* Au hover : ils apparaissent et le câble oscille subtilement */
.ardes-svc-card--borne:hover .ardes-svc-svg--ev .anim-cable {
  opacity: 1;
  transform-origin: 12px 18px;
  animation: ardesCableSway 2.2s ease-in-out infinite;
}
.ardes-svc-card--borne:hover .ardes-svc-svg--ev .anim-cable-plug {
  opacity: 1;
  transition-delay: 0.15s;
  transform-origin: 18px 20px;
  animation: ardesCableSway 2.2s ease-in-out infinite;
}
@keyframes ardesCableSway {
  0%, 100% { transform: rotate(0deg);   }
  50%      { transform: rotate(-4deg);  }
}

/* ===== ICÔNE 05 : CÂBLAGE — ronds qui circulent en sens opposés ===== */
.ardes-svc-svg--rack .anim-dot {
  /* État de repos : positions de départ */
}
.ardes-svc-card--reseau:hover .ardes-svc-svg--rack .anim-dot-top {
  animation: ardesDotLR 1.8s ease-in-out infinite;
}
.ardes-svc-card--reseau:hover .ardes-svc-svg--rack .anim-dot-bottom {
  animation: ardesDotRL 1.8s ease-in-out infinite;
}
/* Rond du HAUT : glisse de gauche → droite (cx 7 → 17) */
@keyframes ardesDotLR {
  0%   { transform: translateX(0);    }
  50%  { transform: translateX(10px); }
  100% { transform: translateX(0);    }
}
/* Rond du BAS : glisse de droite → gauche (cx 17 → 7) */
@keyframes ardesDotRL {
  0%   { transform: translateX(0);     }
  50%  { transform: translateX(-10px); }
  100% { transform: translateX(0);     }
}

/* Désactiver les animations SVG si reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .ardes-svc-svg .anim-window,
  .ardes-svc-svg .anim-wave,
  .ardes-svc-svg .anim-cable,
  .ardes-svc-svg .anim-dot {
    animation: none !important;
  }
}