/* ═══════════════════════════════════════════════════════
   Powrply — Design System Unifié
   Palette : Vert (#22C55E) + Navy (#1E3A5F)
   ═══════════════════════════════════════════════════════ */

:root {
  /* ── Brand ──────────────────────────────────────────── */
  --primary:        #22C55E;
  --primary-dark:   #16A34A;
  --primary-light:  #86EFAC;
  --secondary:      #1E3A5F;
  --secondary-dark: #0F1F33;
  --secondary-mid:  #2D5A8E;
  --accent:         #3B82F6;

  /* ── Gradients ──────────────────────────────────────── */
  --grad-brand:     linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
  --grad-dark:      linear-gradient(135deg, #0F1F33 0%, #1E3A5F 100%);
  --grad-hero:      linear-gradient(135deg, rgba(15,31,51,.88) 0%, rgba(30,58,95,.78) 100%);

  /* ── Text ───────────────────────────────────────────── */
  --text:           #1F2937;
  --text-light:     #6B7280;
  --text-lighter:   #9CA3AF;

  /* ── Backgrounds ────────────────────────────────────── */
  --bg:             #FFFFFF;
  --bg-light:       #F9FAFB;
  --bg-dark:        #F3F4F6;
  --surface:        #F9FAFB;

  /* ── Border & Shadow ────────────────────────────────── */
  --border:         #E5E7EB;
  --shadow:         0 4px 6px -1px rgba(0,0,0,.10), 0 2px 4px -2px rgba(0,0,0,.10);
  --shadow-md:      0 4px 16px rgba(0,0,0,.10);
  --shadow-lg:      0 10px 30px -5px rgba(34,197,94,.20), 0 4px 10px rgba(0,0,0,.08);
  --shadow-xl:      0 20px 40px -8px rgba(0,0,0,.15);

  /* ── Radius ─────────────────────────────────────────── */
  --radius-sm:      8px;
  --radius:         12px;
  --radius-md:      12px;
  --radius-lg:      20px;
  --radius-xl:      28px;
  --radius-full:    999px;

  /* ── Transition ─────────────────────────────────────── */
  --transition:     all .3s cubic-bezier(.4,0,.2,1);

  /* ── Legacy aliases (inner pages) ──────────────────── */
  --foreground:     #1F2937;
  --muted-fg:       #6B7280;
  --dark:           #0F1F33;
  --dark-2:         #1E3A5F;
}

/* ── Reset ──────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  font-family: 'Inter', 'Manrope', system-ui, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
/* Bloque le scroll quand le menu mobile est ouvert */
body.menu-open { overflow: hidden }

h1,h2,h3,h4,h5,h6 {
  font-family: 'Poppins', 'Sora', system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--secondary-dark);
}

a { text-decoration:none; color:inherit; transition:var(--transition) }
img { max-width:100%; height:auto; display:block }
ul { list-style:none }
button { font-family:inherit; cursor:pointer; border:0; background:transparent }
svg { flex-shrink:0 }

/* ── Container ──────────────────────────────────────── */
.container { max-width:1200px; margin:0 auto; padding:0 24px }
.container-page { max-width:80rem; margin-inline:auto; padding-inline:1.5rem }
.sp-container { max-width:1280px; margin-inline:auto; padding-inline:24px }

/* ── Section utilities ──────────────────────────────── */
.section       { padding-block:6rem }
.section-sm    { padding-block:4rem }
.sp-section    { padding:100px 0 }

.section-header, .sp-section-header { text-align:center; margin-bottom:60px }
.sp-section-header { margin-bottom:60px }

.section-tag, .sp-section-tag {
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 20px;
  background:rgba(34,197,94,.10);
  color:var(--primary-dark);
  border-radius:var(--radius-full);
  font-size:.875rem; font-weight:600;
  margin-bottom:16px;
}
.section-tag.light, .sp-section-tag-light {
  background:rgba(255,255,255,.15);
  color:var(--primary-light);
}

.section-title, .sp-section-title {
  font-size:clamp(2rem, 4vw, 3rem);
  color:var(--secondary-dark);
  margin-bottom:16px;
}
.section-title.light, .sp-title-light { color:#fff }

.section-subtitle, .sp-section-subtitle {
  font-size:1.05rem;
  color:var(--text-light);
  max-width:600px;
  margin:0 auto;
  line-height:1.7;
}
.section-subtitle.light, .sp-subtitle-light { color:rgba(255,255,255,.80) }

/* text helpers */
.text-gradient, .sp-text-gradient {
  background:linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.text-gradient-light, .sp-text-gradient-light {
  background:linear-gradient(135deg, var(--primary-light), #93C5FD);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.text-muted { color:var(--text-light) }
.text-center { text-align:center }

/* ═══════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════ */
/* ─── Header — toujours visible ─────────────────────── */
.site-header, .header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000;
  transition: background .35s ease, box-shadow .35s ease;
  padding: 0;
}

/* Sur hero (index.html) : fond navy semi-transparent */
.site-header.at-top, .header:not(.scrolled) {
  background: rgba(10, 20, 40, .85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: none;
}

/* Après scroll ou pages internes : blanc */
.site-header.scrolled, .header.scrolled {
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 var(--border), 0 4px 20px rgba(0,0,0,.08);
}

/* Pages internes sans .at-top ni .scrolled */
.site-header:not(.at-top) {
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 var(--border), 0 4px 20px rgba(0,0,0,.08);
}

.header-container {
  max-width: 1280px; margin: 0 auto;
  padding: 0 24px;
  height: 68px;
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Logo desktop */
.logo {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Poppins','Sora', sans-serif;
  font-weight: 800; font-size: 1.4rem;
  color: #fff; flex-shrink: 0;
  text-decoration: none;
}
.logo-img { width: 38px; height: 38px; object-fit: contain; border-radius: 8px; flex-shrink: 0 }
.logo-text {
  font-family: 'Poppins','Sora', sans-serif;
  font-weight: 800; font-size: 1.35rem;
  color: #fff; letter-spacing: -.02em;
  white-space: nowrap;
}
.logo-highlight { color: var(--primary-light) }

/* Quand scrollé : logo devient sombre */
.site-header.scrolled .logo-text { color: var(--secondary-dark) }
.site-header.scrolled .logo-highlight { color: var(--primary-dark) }
.header.scrolled .logo-text { color: var(--secondary-dark) }
.header.scrolled .logo-highlight { color: var(--primary-dark) }

/* ── Nav desktop ──────────────────────────────────────── */
.nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  justify-content: center;
  /* Caché sur mobile via media query */
}

/* nav-drawer-header : caché sur desktop */
.nav-drawer-header { display: none }
.nav-mobile-cta    { display: none }

.nav-link {
  padding: 7px 11px;
  border-radius: 8px;
  font-size: .82rem;
  font-weight: 500;
  color: rgba(255,255,255,.88);
  transition: var(--transition);
  white-space: nowrap;
}
.nav-link:hover, .nav-link.active {
  color: #fff;
  background: rgba(255,255,255,.14);
}
/* Scrollé → texte sombre */
.site-header.scrolled .nav-link { color: var(--text) }
.site-header.scrolled .nav-link:hover,
.site-header.scrolled .nav-link.active {
  color: var(--primary-dark);
  background: rgba(34,197,94,.08);
}

/* Bouton devis header */
.btn-devis-header {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 20px;
  background: var(--grad-brand); color: #fff;
  border-radius: var(--radius-full);
  font-weight: 700; font-size: .82rem;
  box-shadow: 0 4px 15px rgba(34,197,94,.35);
  transition: var(--transition);
  flex-shrink: 0; white-space: nowrap;
}
.btn-devis-header:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(34,197,94,.45);
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column; gap: 5px;
  background: none; border: none;
  cursor: pointer; padding: 8px;
  z-index: 1001; flex-shrink: 0;
}
.hamburger span {
  display: block; width: 26px; height: 2.5px;
  background: #fff; border-radius: 2px; transition: var(--transition);
}
/* Header scrollé → barres sombres */
.site-header.scrolled .hamburger span,
.header.scrolled .hamburger span { background: var(--secondary-dark) }
/* Animation X */
.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 6px) }
.hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0) }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -6px) }

/* ─── Mobile nav drawer ──────────────────────────────── */

/* Overlay sombre cliquable derrière le menu */
.nav-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 998;
  animation: overlayIn .25s ease;
}
.nav-overlay.active { display: block }
@keyframes overlayIn { from { opacity:0 } to { opacity:1 } }

/* ─── Responsive nav — règles propres ─────────────────
   < 1100px  : drawer hamburger (tablette + mobile)
   ≥ 1100px  : nav desktop horizontale
──────────────────────────────────────────────────── */

/* Par défaut (desktop ≥ 1100px) : nav visible, hamburger caché */
.nav-drawer-header { display: none }
.nav-mobile-cta    { display: none }
.nav-close-btn     { display: none }

/* Tablette & mobile : drawer latéral */
@media (max-width: 1099px) {
  .hamburger { display: flex }
  .btn-devis-header { display: none !important }

  /* Drawer hors écran par défaut */
  .nav {
    display: flex !important;
    position: fixed;
    top: 0; right: 0;
    width: min(82vw, 300px);
    height: 100dvh;
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    padding: 0; gap: 0;
    box-shadow: -8px 0 40px rgba(0,0,0,.22);
    z-index: 999;
    overflow-y: auto; overflow-x: hidden;
    transform: translateX(100%);
    transition: transform .32s cubic-bezier(.16,1,.3,1);
  }
  .nav.active, .nav.nav-open { transform: translateX(0) }

  /* En-tête drawer */
  .nav-drawer-header {
    display: flex; align-items: center;
    justify-content: space-between;
    padding: 0 18px; height: 68px;
    background: var(--secondary-dark);
    flex-shrink: 0; position: sticky; top: 0; z-index: 1;
  }
  .nav-drawer-header .logo-text  { color: #fff; font-size: 1.15rem }
  .nav-drawer-header .logo-highlight { color: var(--primary-light) }

  .nav-close-btn {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255,255,255,.12); color: #fff;
    font-size: 1.1rem; cursor: pointer; border: 0;
    transition: background .2s; flex-shrink: 0;
  }
  .nav-close-btn:hover { background: rgba(255,255,255,.22) }

  /* Liens */
  .nav-link {
    display: block;
    font-size: .9375rem; font-weight: 500;
    padding: 14px 24px;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    border-radius: 0; white-space: normal;
    transition: background .15s, color .15s, padding-left .15s;
  }
  .nav-link:first-of-type { border-top: 1px solid var(--border) }
  .nav-link:hover        { background: rgba(34,197,94,.07); color: var(--primary-dark); padding-left: 30px }
  .nav-link.active       { color: var(--primary-dark); font-weight: 700; background: rgba(34,197,94,.06); border-left: 3px solid var(--primary) }

  /* CTA bas du drawer */
  .nav-mobile-cta {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin: 20px 16px 28px;
    padding: 14px 20px;
    background: var(--grad-brand); color: #fff;
    border-radius: var(--radius-full);
    font-weight: 700; font-size: .9375rem;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(34,197,94,.35);
    transition: opacity .2s, transform .2s; flex-shrink: 0;
  }
  .nav-mobile-cta:hover { opacity: .9; transform: translateY(-2px) }

  body.menu-open { overflow: hidden }
}

/* Desktop : nav horizontale */
@media (min-width: 1100px) {
  .hamburger        { display: none }
  .btn-devis-header { display: inline-flex }
  .nav-overlay      { display: none !important }
  .nav {
    display: flex !important;
    position: static;
    width: auto; height: auto;
    background: transparent;
    flex-direction: row;
    transform: none;
    box-shadow: none;
    overflow: visible;
    flex: 1; justify-content: center;
    gap: 2px; padding: 0;
    align-items: center;
  }
  .nav-drawer-header { display: none }
  .nav-mobile-cta    { display: none }
  .nav-close-btn     { display: none }
  .nav-link {
    font-size: .82rem; font-weight: 500;
    padding: 7px 11px; border-radius: 8px;
    color: rgba(255,255,255,.88);
    border: none; white-space: nowrap;
    transition: var(--transition);
  }
  .nav-link:hover, .nav-link.active {
    color: #fff; background: rgba(255,255,255,.14);
  }
  .site-header.scrolled .nav-link               { color: var(--text) }
  .site-header.scrolled .nav-link:hover,
  .site-header.scrolled .nav-link.active         { color: var(--primary-dark); background: rgba(34,197,94,.08) }
}
/* ═══════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════ */
.btn, .sp-btn {
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 28px; border-radius:var(--radius-full);
  font-weight:600; font-size:1rem;
  cursor:pointer; border:2px solid transparent;
  text-align:center; justify-content:center;
  transition:var(--transition);
  text-decoration:none; white-space:nowrap;
}

.btn-primary, .sp-btn-primary {
  background:var(--grad-brand); color:#fff;
  border-color:transparent;
  box-shadow:0 4px 15px rgba(34,197,94,.40);
}
.btn-primary:hover, .sp-btn-primary:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(34,197,94,.52);
  color:#fff;
}

.btn-outline, .sp-btn-outline {
  background:transparent; color:#fff;
  border-color:rgba(255,255,255,.50);
}
.btn-outline:hover, .sp-btn-outline:hover {
  background:rgba(255,255,255,.12);
  border-color:#fff; transform:translateY(-2px);
}

.btn-outline-dark, .sp-btn-outline-dark {
  background:transparent; color:var(--secondary-dark);
  border-color:var(--border);
}
.btn-outline-dark:hover, .sp-btn-outline-dark:hover {
  border-color:var(--primary);
  color:var(--primary-dark);
  background:rgba(34,197,94,.06);
  transform:translateY(-2px);
}

.btn-lg, .sp-btn-lg { padding:16px 36px; font-size:1.05rem }
.btn-full, .sp-btn-full { width:100%; justify-content:center }

/* ═══════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════ */
.hero, .sp-hero {
  position:relative; min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; padding:120px 24px 80px;
}

.hero-bg, .sp-hero-bg {
  position:absolute; inset:0; z-index:0;
}
.hero-bg-img, .sp-hero-bg-img {
  width:100%; height:100%;
  object-fit:cover; opacity:.45;
}
.hero-overlay, .sp-hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(135deg,
    rgba(15,31,51,.88) 0%,
    rgba(30,58,95,.78) 50%,
    rgba(15,31,51,.92) 100%);
}
.hero-particles, .sp-hero-particles {
  position:absolute; inset:0; z-index:1; pointer-events:none;
}

.hero-content, .sp-hero-content {
  position:relative; z-index:2;
  text-align:center; max-width:920px;
  margin:0 auto; width:100%;
  padding-inline:24px;
}

/* Badge */
.hero-badge, .sp-hero-badge {
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 24px;
  background:rgba(34,197,94,.15);
  border:1px solid rgba(34,197,94,.35);
  border-radius:var(--radius-full);
  color:var(--primary-light);
  font-size:.875rem; font-weight:600;
  margin-bottom:24px;
  animation:fadeInDown .8s ease both;
}

/* Title */
.hero-title, .sp-hero-title {
  font-family:'Poppins','Sora',sans-serif;
  font-size:clamp(2.4rem, 6vw, 4.2rem);
  color:#fff; font-weight:800;
  line-height:1.1; letter-spacing:-.02em;
  margin-bottom:24px;
  animation:fadeInUp .8s ease .2s both;
}
.hero-title-highlight, .sp-hero-highlight {
  background:linear-gradient(135deg, var(--primary), var(--primary-light));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* Subtitle */
.hero-subtitle, .sp-hero-subtitle {
  font-size:1.15rem; color:rgba(255,255,255,.85);
  max-width:680px; margin:0 auto 36px; line-height:1.75;
  animation:fadeInUp .8s ease .4s both;
}

/* Buttons row */
.hero-buttons, .sp-hero-buttons {
  display:flex; gap:16px; justify-content:center;
  flex-wrap:wrap; margin-bottom:60px;
  animation:fadeInUp .8s ease .6s both;
}

/* Stats grid */
.hero-stats, .sp-hero-stats {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:20px; max-width:800px; margin:0 auto;
  padding:28px 32px;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.15);
  border-radius:var(--radius-lg);
  animation:fadeInUp .8s ease .8s both;
}
@media (max-width:640px) {
  .hero-stats, .sp-hero-stats {
    grid-template-columns:repeat(2,1fr);
    padding:20px;
  }
}
.stat-item, .sp-stat-item { text-align:center }

.stat-number, .sp-stat-number {
  font-family:'Poppins','Sora',sans-serif;
  font-size:clamp(1.8rem,4vw,2.6rem);
  font-weight:800;
  color:var(--primary-light);
  display:inline;
  line-height:1;
}
.stat-suffix, .sp-stat-suffix {
  font-family:'Poppins','Sora',sans-serif;
  font-size:1.1rem; font-weight:700;
  color:var(--primary-light);
}
.stat-label, .sp-stat-label {
  display:block; font-size:.8rem;
  color:rgba(255,255,255,.70);
  margin-top:6px; text-transform:uppercase;
  letter-spacing:.08em;
}

/* Scroll arrow */
.hero-scroll, .sp-hero-scroll {
  position:absolute; bottom:32px;
  left:50%; transform:translateX(-50%);
  z-index:2; animation:bounce 2.5s infinite;
}
.hero-scroll a, .sp-hero-scroll a {
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  border:2px solid rgba(255,255,255,.35);
  color:rgba(255,255,255,.70); font-size:1.1rem;
  transition:var(--transition);
}
.hero-scroll a:hover, .sp-hero-scroll a:hover {
  border-color:var(--primary-light);
  color:var(--primary-light);
}

/* Particles */
.particle, .sp-particle {
  position:absolute; border-radius:50%;
  background:rgba(34,197,94,.28);
  animation:sp-float-particle linear infinite;
  pointer-events:none;
}
@keyframes sp-float-particle {
  0%   { transform:translateY(0) scale(1); opacity:.4 }
  50%  { transform:translateY(-70px) scale(1.1); opacity:.55 }
  100% { transform:translateY(-140px) scale(.85); opacity:0 }
}

/* ═══════════════════════════════════════════════════════
   SERVICES
   ═══════════════════════════════════════════════════════ */
.services, .sp-services { padding:100px 0; background:var(--bg-light) }

.services-grid, .sp-services-grid {
  display:grid; gap:28px;
  grid-template-columns:repeat(3,1fr);
}
@media (max-width:1024px) { .services-grid,.sp-services-grid { grid-template-columns:repeat(2,1fr) } }
@media (max-width:640px)  { .services-grid,.sp-services-grid { grid-template-columns:1fr } }

.service-card, .sp-service-card {
  background:var(--bg); border-radius:var(--radius-lg);
  padding:32px; position:relative; overflow:hidden;
  transition:var(--transition); border:1.5px solid var(--border);
  display:flex; flex-direction:column;
}
.service-card:hover, .sp-service-card:hover {
  transform:translateY(-8px);
  box-shadow:var(--shadow-xl);
  border-color:var(--primary);
}
.service-card.featured, .sp-service-featured {
  border-color:var(--primary);
  box-shadow:0 0 0 1px var(--primary), var(--shadow-lg);
}
.service-badge, .sp-service-badge {
  position:absolute; top:16px; right:16px;
  padding:6px 14px;
  background:var(--grad-brand); color:#fff;
  border-radius:var(--radius-full);
  font-size:.72rem; font-weight:700; text-transform:uppercase;
}
.service-icon, .sp-service-icon {
  width:58px; height:58px; border-radius:14px;
  background:linear-gradient(135deg,rgba(34,197,94,.12),rgba(59,130,246,.08));
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; color:var(--primary); margin-bottom:18px;
}
.service-img, .sp-service-img {
  border-radius:var(--radius); overflow:hidden;
  margin-bottom:18px; height:175px;
}
.service-img img, .sp-service-img img {
  width:100%; height:100%; object-fit:cover; transition:var(--transition);
}
.service-card:hover .service-img img,
.sp-service-card:hover .sp-service-img img { transform:scale(1.05) }

.service-card h3, .sp-service-card h3 {
  font-size:1.35rem; color:var(--secondary-dark); margin-bottom:10px;
}
.service-card p, .sp-service-card p {
  color:var(--text-light); margin-bottom:14px; font-size:.95rem; line-height:1.65;
}
.service-features li, .sp-service-features li {
  display:flex; align-items:center; gap:10px;
  padding:5px 0; font-size:.9rem; color:var(--text);
}
.service-features li i, .sp-service-features li i {
  color:var(--primary); font-size:.8rem; flex-shrink:0;
}
.service-link, .sp-service-link {
  display:inline-flex; align-items:center; gap:8px;
  color:var(--primary-dark); font-weight:600; font-size:.95rem;
  margin-top:auto;
}
.service-link:hover, .sp-service-link:hover { gap:12px; color:var(--primary) }
.sp-service-features { display:flex; flex-direction:column; margin:8px 0 }

/* ═══════════════════════════════════════════════════════
   MAINTENANCE
   ═══════════════════════════════════════════════════════ */
.maintenance, .sp-maintenance-section { padding:100px 0; background:var(--bg) }

.maintenance-grid, .sp-maint-grid {
  display:grid; gap:28px;
  grid-template-columns:repeat(3,1fr);
  margin-bottom:60px;
}
@media (max-width:1024px) { .maintenance-grid,.sp-maint-grid { grid-template-columns:repeat(2,1fr) } }
@media (max-width:640px)  { .maintenance-grid,.sp-maint-grid { grid-template-columns:1fr } }

.maintenance-card, .sp-maint-card {
  background:var(--bg); border:1.5px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden;
  transition:var(--transition); display:flex; flex-direction:column;
}
.maintenance-card:hover, .sp-maint-card:hover {
  transform:translateY(-8px); box-shadow:var(--shadow-xl); border-color:var(--primary);
}
.maintenance-img, .sp-maint-img {
  position:relative; height:210px; overflow:hidden;
}
.maintenance-img img, .sp-maint-img img {
  width:100%; height:100%; object-fit:cover; transition:var(--transition);
}
.maintenance-card:hover .maintenance-img img,
.sp-maint-card:hover .sp-maint-img img { transform:scale(1.06) }

.maintenance-img-tag, .sp-maint-tag {
  position:absolute; top:12px; left:12px;
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 14px;
  background:rgba(15,31,51,.82); backdrop-filter:blur(6px);
  color:var(--primary-light); border-radius:var(--radius-full);
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
}
.maintenance-img-tag.urgent, .sp-maint-tag-urgent {
  background:rgba(185,28,28,.85); color:#fee2e2;
}

.maintenance-body, .sp-maint-body { padding:26px; flex:1 }
.maintenance-body h3, .sp-maint-body h3 {
  font-size:1.25rem; color:var(--secondary-dark); margin-bottom:10px;
}
.maintenance-body p, .sp-maint-body p {
  color:var(--text-light); font-size:.95rem; margin-bottom:14px; line-height:1.65;
}

/* Plans */
.maintenance-plans, .sp-plans-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:24px; margin-bottom:60px;
}
@media (max-width:768px) {
  .maintenance-plans,.sp-plans-grid {
    grid-template-columns:1fr; max-width:460px;
    margin-left:auto; margin-right:auto;
  }
}

.plan-card, .sp-plan-card {
  position:relative; background:var(--bg-light);
  border:1.5px solid var(--border); border-radius:var(--radius-lg);
  padding:32px 28px; display:flex; flex-direction:column;
  transition:var(--transition);
}
.plan-card:hover, .sp-plan-card:hover {
  transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary);
}
.plan-card.featured, .sp-plan-featured {
  background:var(--bg); border-color:var(--primary);
  box-shadow:0 0 0 2px var(--primary), var(--shadow-lg);
}
.plan-badge, .sp-plan-badge {
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  padding:6px 20px; background:var(--grad-brand); color:#fff;
  border-radius:var(--radius-full);
  font-size:.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; white-space:nowrap;
}
.plan-header { text-align:center; padding-bottom:20px; margin-bottom:20px; border-bottom:1.5px solid var(--border) }
.plan-header h3, .sp-plan-header h3 {
  font-size:1.3rem; color:var(--secondary-dark); margin-bottom:10px;
}
.plan-price, .sp-plan-price {
  display:flex; align-items:baseline; justify-content:center; gap:4px; margin-bottom:8px;
}
.plan-amount, .sp-plan-amount {
  font-family:'Poppins','Sora',sans-serif;
  font-size:2.4rem; font-weight:800; color:var(--primary-dark); line-height:1;
}
.plan-period, .sp-plan-period { font-size:.9rem; font-weight:500; color:var(--text-light) }
.plan-target, .sp-plan-target { font-size:.85rem; color:var(--text-light) }

.plan-features, .sp-plan-features {
  flex:1; margin-bottom:24px;
  display:flex; flex-direction:column;
}
.plan-features li, .sp-plan-features li {
  display:flex; align-items:flex-start; gap:10px;
  padding:8px 0; font-size:.9rem; color:var(--text);
  border-bottom:1px solid var(--bg-dark);
}
.plan-features li:last-child, .sp-plan-features li:last-child { border-bottom:0 }
.plan-features li i, .sp-plan-features li i {
  color:var(--primary); font-size:.8rem; margin-top:4px; flex-shrink:0;
}
.plan-features li.disabled, .sp-plan-disabled { color:var(--text-lighter) }
.plan-features li.disabled i, .sp-plan-disabled i { color:var(--text-lighter) !important }

/* Maintenance CTA banner */
.maintenance-cta, .sp-maint-cta {
  display:flex; align-items:center; justify-content:space-between;
  gap:32px; flex-wrap:wrap; padding:40px;
  border-radius:var(--radius-lg);
  background:var(--grad-dark);
  position:relative; overflow:hidden;
}
.maintenance-cta::before, .sp-maint-cta::before {
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(circle,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:28px 28px; pointer-events:none;
}
.maintenance-cta-text h3, .sp-maint-cta h3 {
  display:flex; align-items:center; gap:10px;
  font-size:1.5rem; color:#fff; margin-bottom:8px;
}
.maintenance-cta-text h3 i { color:var(--primary-light) }
.maintenance-cta-text p, .sp-maint-cta p { color:rgba(255,255,255,.75); font-size:.95rem }
.maintenance-cta-actions, .sp-maint-cta-actions { display:flex; gap:14px; flex-wrap:wrap; flex-shrink:0 }

/* ═══════════════════════════════════════════════════════
   PROCESS / TIMELINE
   ═══════════════════════════════════════════════════════ */
.process, .sp-process-section { padding:100px 0; background:var(--bg-light) }

.process-timeline {
  position:relative; max-width:820px; margin:0 auto;
}
.process-line {
  position:absolute; left:50%; top:0; bottom:0;
  width:3px; background:linear-gradient(to bottom,var(--primary),var(--accent));
  transform:translateX(-50%); border-radius:3px;
}
.process-step {
  display:flex; align-items:center;
  margin-bottom:60px; position:relative;
}
.process-step:last-child { margin-bottom:0 }
.process-step:nth-child(odd)  { flex-direction:row;        padding-right:calc(50% + 44px) }
.process-step:nth-child(even) { flex-direction:row-reverse; padding-left:calc(50% + 44px) }

.step-number {
  position:absolute; left:50%; transform:translateX(-50%);
  width:52px; height:52px; border-radius:50%;
  background:var(--grad-brand); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:'Poppins','Sora',sans-serif; font-weight:800; font-size:1rem;
  box-shadow:0 4px 18px rgba(34,197,94,.45); z-index:2;
}
.step-content {
  background:var(--bg); padding:28px; border-radius:var(--radius-lg);
  border:1.5px solid var(--border); transition:var(--transition); width:100%;
}
.step-content:hover { border-color:var(--primary); box-shadow:var(--shadow-lg) }
.step-icon {
  width:48px; height:48px; border-radius:12px;
  background:linear-gradient(135deg,rgba(34,197,94,.12),rgba(59,130,246,.08));
  display:flex; align-items:center; justify-content:center;
  font-size:1.25rem; color:var(--primary); margin-bottom:14px;
}
.step-content h3 { font-size:1.2rem; color:var(--secondary-dark); margin-bottom:10px }
.step-content p  { color:var(--text-light); font-size:.95rem; line-height:1.65 }

/* ═══════════════════════════════════════════════════════
   ADVANTAGES
   ═══════════════════════════════════════════════════════ */
.advantages, .sp-advantages {
  position:relative; padding:100px 0; overflow:hidden;
  background:var(--secondary-dark);
}
.advantages-bg, .sp-adv-bg {
  position:absolute; inset:0; z-index:0;
  background:var(--grad-dark);
}
.advantages-bg-img, .sp-adv-bg-img {
  width:100%; height:100%; object-fit:cover; opacity:.18;
}
.advantages-overlay, .sp-adv-overlay {
  position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(15,31,51,.92),rgba(30,58,95,.88));
}
.advantages .container,
.sp-advantages .sp-container { position:relative; z-index:1 }

.advantages-grid, .sp-adv-grid {
  display:grid; gap:24px; grid-template-columns:repeat(3,1fr);
}
@media (max-width:1024px) { .advantages-grid,.sp-adv-grid { grid-template-columns:repeat(2,1fr) } }
@media (max-width:640px)  { .advantages-grid,.sp-adv-grid { grid-template-columns:1fr } }

.advantage-card, .sp-adv-card {
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-lg); padding:32px; text-align:center;
  transition:var(--transition);
}
.advantage-card:hover, .sp-adv-card:hover {
  background:rgba(255,255,255,.10);
  border-color:rgba(34,197,94,.45);
  transform:translateY(-5px);
}
.advantage-icon, .sp-adv-icon {
  width:70px; height:70px; border-radius:50%;
  background:linear-gradient(135deg,rgba(34,197,94,.22),rgba(34,197,94,.06));
  display:flex; align-items:center; justify-content:center;
  font-size:1.85rem; color:var(--primary-light);
  margin:0 auto 20px;
}
.advantage-card h3, .sp-adv-card h3 { color:#fff; font-size:1.2rem; margin-bottom:12px }
.advantage-card p, .sp-adv-card p { color:rgba(255,255,255,.72); font-size:.9rem; line-height:1.65 }

/* ═══════════════════════════════════════════════════════
   BORNES / PRODUCTS
   ═══════════════════════════════════════════════════════ */
.bornes, .sp-bornes-section { padding:100px 0; background:var(--bg-light) }

.bornes-showcase, .sp-bornes-showcase {
  display:grid; grid-template-columns:1fr 1fr;
  gap:40px; margin-bottom:50px; align-items:start;
}
@media (max-width:1024px) { .bornes-showcase,.sp-bornes-showcase { grid-template-columns:1fr } }

.borne-main, .sp-borne-main {
  border-radius:var(--radius-lg); overflow:hidden; position:relative;
}
.borne-main img, .sp-borne-main img {
  width:100%; height:400px; object-fit:cover;
}
.borne-main-info, .sp-borne-main-info {
  padding:24px; background:var(--bg); border-radius:var(--radius);
  margin-top:-48px; position:relative; z-index:1;
  margin-left:20px; margin-right:20px;
  box-shadow:var(--shadow-lg);
}
.borne-main-info h3, .sp-borne-main-info h3 {
  font-size:1.15rem; color:var(--secondary-dark); margin-bottom:8px;
}
.borne-main-info p, .sp-borne-main-info p { color:var(--text-light); font-size:.9rem }

.bornes-brands, .sp-bornes-brands {
  display:grid; grid-template-columns:repeat(2,1fr); gap:16px;
}
@media (max-width:1024px) {
  .bornes-brands, .sp-bornes-brands { grid-template-columns:repeat(3,1fr) }
}
@media (max-width:480px) {
  .bornes-brands, .sp-bornes-brands { grid-template-columns:repeat(2,1fr) }
}

.brand-card, .sp-brand-card {
  background:var(--bg); border:1.5px solid var(--border);
  border-radius:var(--radius); padding:20px; transition:var(--transition);
}
.brand-card:hover, .sp-brand-card:hover {
  border-color:var(--primary); box-shadow:var(--shadow); transform:translateY(-3px);
}
.brand-icon, .sp-brand-icon {
  width:42px; height:42px; border-radius:10px;
  background:linear-gradient(135deg,rgba(34,197,94,.12),rgba(59,130,246,.08));
  display:flex; align-items:center; justify-content:center;
  color:var(--primary); margin-bottom:12px; font-size:1.1rem;
}
.brand-card h4, .sp-brand-card h4 { font-size:1rem; color:var(--secondary-dark); margin-bottom:6px }
.brand-card p, .sp-brand-card p  { font-size:.85rem; color:var(--text-light) }

.bornes-features, .sp-bornes-features {
  display:flex; justify-content:center; flex-wrap:wrap; gap:14px;
}
.borne-feature, .sp-borne-feature {
  display:flex; align-items:center; gap:10px;
  padding:12px 22px; background:var(--bg);
  border:1.5px solid var(--border); border-radius:var(--radius-full);
  font-size:.9rem; font-weight:600; color:var(--text); transition:var(--transition);
}
.borne-feature:hover, .sp-borne-feature:hover { border-color:var(--primary); color:var(--primary-dark) }
.borne-feature i, .sp-borne-feature i { color:var(--primary) }

/* ═══════════════════════════════════════════════════════
   TESTIMONIALS / SLIDER
   ═══════════════════════════════════════════════════════ */
.testimonials, .sp-testimonials { padding:100px 0; background:var(--bg) }

.testimonials-slider, .sp-slider {
  position:relative; overflow:hidden; margin-bottom:50px;
}
.testimonials-track, .sp-slider-track {
  display:flex; gap:24px;
  transition:transform .5s cubic-bezier(.4,0,.2,1);
}
.testimonial-card, .sp-testi-card {
  flex-shrink:0;
  min-width:calc(33.333% - 16px);
  background:var(--bg-light); border:1.5px solid var(--border);
  border-radius:var(--radius-lg); padding:32px; transition:var(--transition);
}
@media (max-width:1024px) { .testimonial-card,.sp-testi-card { min-width:calc(50% - 12px) } }
@media (max-width:640px)  { .testimonial-card,.sp-testi-card { min-width:100% } }
.testimonial-card:hover, .sp-testi-card:hover {
  border-color:var(--primary); box-shadow:var(--shadow-lg);
}

.testimonial-stars, .sp-testi-stars { margin-bottom:14px }
.testimonial-stars i, .sp-testi-stars i { color:#FBBF24; font-size:1rem; margin-right:2px }

.testimonial-text, .sp-testi-text {
  color:var(--text); font-size:.95rem; line-height:1.75;
  margin-bottom:20px; font-style:italic;
}
.testimonial-author, .sp-testi-author {
  display:flex; align-items:center; gap:12px;
  padding-top:16px; border-top:1px solid var(--border);
}
.author-avatar, .sp-testi-avatar {
  width:44px; height:44px; border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:.85rem; font-weight:700;
  font-family:'Poppins','Sora',sans-serif; flex-shrink:0;
}
.author-info strong, .sp-testi-info strong {
  display:block; font-size:.95rem; color:var(--secondary-dark);
}
.author-info span, .sp-testi-info span { font-size:.8rem; color:var(--text-light) }

/* Slider controls */
.slider-controls, .sp-slider-controls {
  display:flex; align-items:center; justify-content:center; gap:16px; margin-top:28px;
}
.slider-btn, .sp-slider-btn {
  width:44px; height:44px; border-radius:50%;
  border:2px solid var(--border); background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:var(--transition); color:var(--text);
}
.slider-btn:hover, .sp-slider-btn:hover {
  border-color:var(--primary); color:var(--primary);
  background:rgba(34,197,94,.06);
}
.slider-dots, .sp-slider-dots { display:flex; gap:8px }
.slider-dot, .sp-slider-dot {
  width:10px; height:10px; border-radius:50%;
  background:var(--border); cursor:pointer; transition:var(--transition);
}
.slider-dot.active, .sp-slider-dot.active {
  background:var(--primary); width:28px; border-radius:5px;
}

/* Trust badges */
.trust-badges, .sp-trust-badges {
  display:flex; justify-content:center; flex-wrap:wrap; gap:20px;
  padding:36px; background:var(--bg-light);
  border-radius:var(--radius-lg); border:1.5px solid var(--border);
}
.trust-badge, .sp-trust-badge {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  min-width:90px; text-align:center;
}
.trust-badge img { height:48px; width:auto; object-fit:contain }
.badge-icon, .sp-badge-icon {
  width:52px; height:52px; border-radius:50%;
  background:linear-gradient(135deg,rgba(34,197,94,.12),rgba(59,130,246,.08));
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; color:var(--primary);
}
.trust-badge span, .sp-trust-badge span {
  font-size:.85rem; font-weight:600; color:var(--text);
}

/* ═══════════════════════════════════════════════════════
   FAQ
   ═══════════════════════════════════════════════════════ */
.faq, .sp-faq-section { padding:100px 0; background:var(--bg-light) }

.faq-container, .sp-faq-list {
  max-width:820px; margin:0 auto;
  display:flex; flex-direction:column; gap:12px;
}
.faq-item, .sp-faq-item {
  background:var(--bg); border:1.5px solid var(--border);
  border-radius:var(--radius); overflow:hidden; transition:var(--transition);
}
.faq-item:hover, .sp-faq-item:hover { border-color:var(--primary) }
.faq-item.active, .faq-item.open,
.sp-faq-item.open {
  border-color:var(--primary);
  box-shadow:0 4px 18px rgba(34,197,94,.12);
}
.faq-question, .sp-faq-q {
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:20px 24px; background:none; border:none; cursor:pointer; text-align:left;
  font-size:1rem; font-weight:600; color:var(--secondary-dark);
  font-family:inherit; transition:var(--transition);
}
.faq-question:hover, .sp-faq-q:hover { color:var(--primary-dark) }
.faq-question i, .sp-faq-q i { font-size:.9rem; color:var(--text-light); transition:var(--transition); flex-shrink:0 }
.faq-item.active .faq-question i,
.faq-item.open  .faq-question i,
.sp-faq-item.open .sp-faq-q i { transform:rotate(180deg); color:var(--primary) }
.faq-item.active .faq-question,
.sp-faq-item.open .sp-faq-q { color:var(--primary-dark) }

.faq-answer, .sp-faq-a {
  max-height:0; overflow:hidden;
  transition:max-height .4s ease, padding .35s ease;
  color:var(--text-light); font-size:.95rem; line-height:1.75;
}
.faq-item.active .faq-answer,
.faq-item.open  .faq-answer,
.sp-faq-item.open .sp-faq-a { max-height:600px; padding:0 24px 22px }
.faq-answer p strong, .sp-faq-a strong { color:var(--secondary-dark) }

/* ═══════════════════════════════════════════════════════
   CONTACT
   ═══════════════════════════════════════════════════════ */
.contact, .sp-contact-section { padding:100px 0; background:var(--bg) }

.contact-grid, .sp-contact-grid {
  display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:start;
}
@media (max-width:1024px) { .contact-grid,.sp-contact-grid { grid-template-columns:1fr } }

.contact-form, .sp-contact-form-wrapper {
  background:var(--bg-light); padding:40px;
  border-radius:var(--radius-lg); border:1.5px solid var(--border);
  box-shadow:var(--shadow-md);
}
.sp-contact-form { display:flex; flex-direction:column; gap:0 }

.form-row, .sp-form-row {
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
@media (max-width:540px) { .form-row,.sp-form-row { grid-template-columns:1fr } }

.form-group, .sp-form-group { margin-bottom:18px; display:flex; flex-direction:column; gap:6px }
.form-group label, .sp-form-group label {
  font-size:.875rem; font-weight:600; color:var(--text);
}
.form-group input, .form-group select, .form-group textarea,
.sp-form-group input, .sp-form-group select, .sp-form-group textarea {
  width:100%; padding:13px 18px;
  border:1.5px solid var(--border); border-radius:var(--radius);
  font-size:.95rem; font-family:inherit; color:var(--text); background:var(--bg);
  transition:var(--transition);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus,
.sp-form-group input:focus, .sp-form-group select:focus, .sp-form-group textarea:focus {
  outline:none; border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(34,197,94,.12);
}
.form-group textarea, .sp-form-group textarea { resize:vertical; min-height:100px }
.form-note, .sp-form-note {
  text-align:center; font-size:.8rem; color:var(--text-lighter); margin-top:10px;
}

/* Contact sent state */
.sp-contact-sent { text-align:center; padding:3rem 1rem }
.sp-sent-icon { font-size:3.5rem; color:var(--primary); margin-bottom:1rem }
.sp-contact-sent h3 { font-size:1.5rem; color:var(--secondary-dark); margin-bottom:.75rem }
.sp-contact-sent p  { color:var(--text-light); font-size:1rem }

/* Info cards */
.contact-info, .sp-contact-info { display:flex; flex-direction:column; gap:14px }
.info-card, .sp-info-card {
  display:flex; align-items:flex-start; gap:16px;
  padding:20px; background:var(--bg-light);
  border:1.5px solid var(--border); border-radius:var(--radius); transition:var(--transition);
}
.info-card:hover, .sp-info-card:hover { border-color:var(--primary); box-shadow:var(--shadow) }
.info-icon, .sp-info-icon {
  width:48px; height:48px; border-radius:12px; flex-shrink:0;
  background:linear-gradient(135deg,rgba(34,197,94,.12),rgba(59,130,246,.08));
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; color:var(--primary);
}
.info-content h4, .sp-info-content h4 { font-size:.95rem; color:var(--secondary-dark); margin-bottom:4px }
.info-content p, .sp-info-content p   { font-size:.9rem; color:var(--text); line-height:1.5 }
.info-content p a, .sp-info-content p a { color:var(--primary-dark); font-weight:600 }
.info-content p a:hover, .sp-info-content p a:hover { color:var(--primary) }
.info-content span, .sp-info-content span { font-size:.8rem; color:var(--text-light) }

/* ═══════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════ */
.footer, .site-footer, .sp-footer {
  background:var(--secondary-dark);
  padding:80px 0 30px;
  color:rgba(255,255,255,.80);
}
.site-footer { margin-top:0 }

.footer-grid, .sp-footer-grid {
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:40px; margin-bottom:50px;
}
@media (max-width:1024px) { .footer-grid,.sp-footer-grid { grid-template-columns:repeat(2,1fr) } }
@media (max-width:640px)  { .footer-grid,.sp-footer-grid { grid-template-columns:1fr; gap:28px } }

.footer-logo, .sp-footer-logo {
  display:flex; align-items:center; gap:10px;
  font-family:'Poppins','Sora',sans-serif;
  font-weight:800; font-size:1.45rem; color:#fff;
  margin-bottom:16px; text-decoration:none;
}
.footer-logo-img { width:38px; height:38px; object-fit:contain }
.footer-logo img { width:38px; height:38px; border-radius:8px }
.footer-logo span, .sp-footer-logo span { color:#fff }
.logo-highlight,
.sp-footer-highlight { color:var(--primary-light) }

.footer-brand p, .sp-footer-brand p {
  font-size:.9rem; line-height:1.75; margin-bottom:20px;
  color:rgba(255,255,255,.70);
}
.footer-social, .sp-footer-social { display:flex; gap:12px }
.footer-social a, .sp-footer-social a {
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.10); color:rgba(255,255,255,.70);
  display:flex; align-items:center; justify-content:center;
  font-size:.9rem; transition:var(--transition);
}
.footer-social a:hover, .sp-footer-social a:hover {
  background:var(--primary); color:#fff; transform:translateY(-3px);
}

.footer-links h4, .sp-footer-links h4 {
  color:#fff; font-size:1.05rem; margin-bottom:20px;
}
.footer-links ul li, .sp-footer-links ul li { margin-bottom:10px }
.footer-links ul li a, .sp-footer-links ul li a {
  font-size:.9rem; color:rgba(255,255,255,.62); transition:var(--transition);
}
.footer-links ul li a:hover, .sp-footer-links ul li a:hover {
  color:var(--primary-light); padding-left:5px;
}
.footer-links ul li i { width:1rem; margin-right:.4rem; color:var(--primary-light) }

.footer-certifs, .sp-footer-certifs { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px }
.certif-badge, .sp-certif-badge {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 14px;
  background:rgba(34,197,94,.15); border:1px solid rgba(34,197,94,.30);
  border-radius:var(--radius-full);
  font-size:.75rem; font-weight:600; color:var(--primary-light);
}

.footer-bottom, .sp-footer-bottom {
  padding-top:28px; border-top:1px solid rgba(255,255,255,.10);
  display:flex; justify-content:space-between; flex-wrap:wrap;
  gap:10px; font-size:.82rem; color:rgba(255,255,255,.45);
}
.footer-bottom a:hover, .sp-footer-bottom a:hover { color:var(--primary-light) }

/* legacy site-footer cols */
.site-footer .cols { display:grid; gap:2.5rem; grid-template-columns:2fr 1fr 1fr 1fr }
@media (max-width:768px) { .site-footer .cols { grid-template-columns:1fr } }
.site-footer h4 { color:#fff; margin-bottom:1.25rem }
.site-footer ul  { display:flex; flex-direction:column; gap:.6rem }
.site-footer a:hover { color:var(--primary-light) }
.site-footer .brand-block .row { display:flex; align-items:center; gap:.75rem; margin-bottom:1rem }
.site-footer .brand-block img { width:2.5rem; height:2.5rem; border-radius:8px }
.site-footer .brand-block .txt { font-family:'Poppins','Sora',sans-serif; font-weight:800; font-size:1.25rem; color:var(--primary-light) }
.site-footer .bottom { border-top:1px solid rgba(255,255,255,.08); margin-top:3rem; padding-top:1.5rem }
.site-footer .bottom .row { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.75rem; color:rgba(255,255,255,.45) }
.footer-cert { display:flex; align-items:center; gap:.5rem; margin-top:1rem; font-size:.75rem; color:var(--primary-light) }

/* ═══════════════════════════════════════════════════════
   BACK TO TOP
   ═══════════════════════════════════════════════════════ */
.back-to-top {
  position:fixed; bottom:30px; right:30px;
  width:50px; height:50px; border-radius:50%;
  background:var(--grad-brand); color:#fff;
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
  box-shadow:0 4px 18px rgba(34,197,94,.45);
  opacity:0; visibility:hidden; transform:translateY(20px);
  transition:var(--transition); z-index:999;
}
.back-to-top.visible { opacity:1; visibility:visible; transform:translateY(0) }
.back-to-top:hover   { transform:translateY(-3px); box-shadow:0 8px 28px rgba(34,197,94,.55) }

/* ═══════════════════════════════════════════════════════
   MOBILE CTA BAR
   ═══════════════════════════════════════════════════════ */
.mobile-cta-bar, .sp-mobile-cta {
  display:none;
  position:fixed; bottom:0; left:0; right:0;
  padding:10px 16px; gap:10px;
  background:rgba(255,255,255,.98);
  border-top:1px solid var(--border);
  backdrop-filter:blur(14px); z-index:80;
}
@media (max-width:767px) { .mobile-cta-bar,.sp-mobile-cta { display:flex } }

.mobile-cta-bar .btn-primary, .sp-mobile-cta .btn-primary,
.mobile-cta-bar .sp-btn-primary, .sp-mobile-cta .sp-btn-primary { flex:1; justify-content:center }
.mobile-cta-bar .btn-ghost, .mobile-cta-bar .sp-btn-ghost-dark { padding:14px 16px }
.sp-mobile-cta .sp-btn-ghost-dark {
  background:transparent; color:var(--secondary-dark);
  border:2px solid var(--border); padding:14px 18px;
}
.sp-mobile-cta .sp-btn-ghost-dark:hover { border-color:var(--primary); color:var(--primary-dark) }

/* ═══════════════════════════════════════════════════════
   PAGE HERO (inner pages)
   ═══════════════════════════════════════════════════════ */
.page-hero {
  background:var(--grad-dark); color:#fff;
  position:relative; overflow:hidden; padding-top:80px;
}
.page-hero::after {
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(circle,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:28px 28px; pointer-events:none;
}
.page-hero .container-page { padding-block:5rem; position:relative; z-index:1 }
@media (min-width:768px) { .page-hero .container-page { padding-block:6.5rem } }
.page-hero h1 { color:#fff }
.page-hero .eyebrow { color:var(--primary-light) }
.page-hero .lead { color:rgba(255,255,255,.78) }

/* ═══════════════════════════════════════════════════════
   INNER-PAGE COMPONENTS (bornes, aides, etc.)
   ═══════════════════════════════════════════════════════ */
.eyebrow {
  font-size:.75rem; text-transform:uppercase; letter-spacing:.15em;
  color:var(--primary-dark); font-weight:700;
}
.eyebrow-light { color:var(--primary-light) }
.lead { font-size:1.1rem; color:var(--text-light); line-height:1.7 }
.check-list { display:flex; flex-direction:column; gap:.85rem; margin-top:2rem }
.check-list li { display:flex; align-items:flex-start; gap:.75rem; font-size:.9375rem; line-height:1.55 }
.check-list li svg { color:var(--primary); flex-shrink:0; margin-top:2px }

/* Twocol */
.twocol { display:grid; gap:3rem; align-items:center; grid-template-columns:1fr }
@media (min-width:1024px) { .twocol { grid-template-columns:1fr 1fr } .twocol.wide-left { grid-template-columns:1.2fr 1fr } }

/* Cards generic */
.card {
  background:#fff; border:1.5px solid var(--border);
  border-radius:var(--radius-lg); padding:1.75rem;
  transition:transform .35s, box-shadow .35s, border-color .35s;
}
.card-hover:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--primary) }

.icon-badge {
  display:inline-flex; align-items:center; justify-content:center;
  width:3rem; height:3rem; border-radius:var(--radius);
  background:rgba(34,197,94,.12); color:var(--primary); margin-bottom:1rem; flex-shrink:0;
}
.icon-badge.lg { width:3.5rem; height:3.5rem }

.chip {
  font-size:.75rem; font-weight:700;
  padding:.25rem .8rem; border-radius:var(--radius-full);
  background:rgba(34,197,94,.12); color:var(--primary-dark);
}

/* Solution cards */
.solution-card {
  display:block; background:#fff; border:1.5px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden;
  transition:transform .35s, box-shadow .35s;
}
.solution-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-xl) }
.solution-card .cover { aspect-ratio:16/9; overflow:hidden; position:relative }
.solution-card .cover img { width:100%; height:100%; object-fit:cover; transition:transform .6s }
.solution-card:hover .cover img { transform:scale(1.07) }
.solution-card .body { padding:1.5rem }
.solution-card .link { display:inline-flex; align-items:center; gap:.35rem; margin-top:1rem; font-weight:600; font-size:.875rem; color:var(--primary-dark) }
.solution-card:hover .link { color:var(--primary) }

/* Why-us */
.why-card {
  background:#fff; border:1.5px solid var(--border);
  border-radius:var(--radius-lg); padding:2rem;
  transition:transform .35s, box-shadow .35s, border-color .35s;
}
.why-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--primary) }
.why-card .num { font-family:'Poppins','Sora',sans-serif; font-size:3rem; font-weight:800; color:var(--primary); line-height:1; margin-bottom:.75rem; opacity:.2 }

/* Process cards (inner pages) */
.process-card {
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-lg); padding:2rem 1.75rem; position:relative; transition:background .3s;
}
.process-card:hover { background:rgba(255,255,255,.10) }
.process-card h3 { color:#fff; margin-top:.75rem }
.process-card p  { color:rgba(255,255,255,.68) }
.process-card .num { font-family:'Poppins','Sora',sans-serif; font-size:2.75rem; font-weight:800; color:var(--primary); line-height:1; margin-bottom:.5rem; opacity:.25 }

/* Art blocks */
.art { position:relative }
.art img { border-radius:var(--radius-xl); box-shadow:var(--shadow-xl); position:relative; z-index:1 }
.art .glow { position:absolute; inset:-1.5rem; background:linear-gradient(135deg,var(--primary),var(--accent)); opacity:.14; border-radius:2.5rem; filter:blur(48px); z-index:0 }
.floating-badge {
  position:absolute; bottom:-1.5rem; right:-1rem;
  background:#fff; padding:1rem 1.25rem; border-radius:var(--radius);
  box-shadow:var(--shadow-xl); display:flex; align-items:center; gap:.75rem;
  z-index:2; animation:float 5s ease-in-out infinite;
}
.floating-badge .ico { color:var(--primary) }

/* CTA blocks */
.cta-brand {
  background:var(--grad-brand); color:#fff;
  border-radius:var(--radius-xl); padding:4rem 2.5rem;
  position:relative; overflow:hidden;
  box-shadow:0 20px 60px rgba(34,197,94,.35); text-align:center;
}
.cta-brand h2 { color:#fff }
.cta-dark {
  background:var(--grad-dark); color:#fff;
  border-radius:var(--radius-xl); padding:4rem 2.5rem; text-align:center;
  position:relative; overflow:hidden;
}
.cta-dark::before {
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(circle,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:28px 28px; pointer-events:none;
}
.cta-dark h2 { color:#fff }

/* Aide cards */
.aide-card { display:flex; gap:1.25rem; align-items:flex-start }
.aide-tag { font-size:.6875rem; text-transform:uppercase; letter-spacing:.1em; color:var(--text-light); font-weight:700 }
.aide-amount { font-family:'Poppins','Sora',sans-serif; font-weight:800; font-size:1.625rem; color:var(--primary-dark); line-height:1 }

/* Borne cards */
.borne-card .cover { position:relative; aspect-ratio:4/3; background:var(--bg-light); border-radius:var(--radius); overflow:hidden; margin-bottom:1rem }
.borne-card .cover img { width:100%; height:100%; object-fit:cover }
.borne-card .cover .chip { position:absolute; top:.75rem; right:.75rem; background:#fff }
.borne-card .power { display:inline-flex; align-items:center; gap:.4rem; color:var(--primary-dark); font-weight:700; font-size:.875rem; margin-top:.5rem }
.borne-card .feats { display:flex; flex-direction:column; gap:.5rem; margin-top:1rem }
.borne-card .feats li { display:flex; align-items:center; gap:.5rem; font-size:.875rem; color:var(--text-light) }
.borne-card .feats svg { color:var(--primary); flex-shrink:0 }
.borne-card .foot { display:flex; align-items:center; justify-content:space-between; margin-top:1.25rem; padding-top:1.25rem; border-top:1.5px solid var(--border) }
.borne-card .foot small { font-size:.75rem; color:var(--text-light) }
.borne-card .price { font-family:'Poppins','Sora',sans-serif; font-weight:800; font-size:1.375rem; color:var(--secondary-dark) }

/* Grids */
.grid   { display:grid; gap:1.5rem }
.grid-2 { grid-template-columns:1fr }
.grid-3 { grid-template-columns:1fr }
.grid-4 { grid-template-columns:1fr }
@media (min-width:640px)  { .grid-2 { grid-template-columns:repeat(2,1fr) } }
@media (min-width:768px)  { .grid-3 { grid-template-columns:repeat(2,1fr) } .grid-4 { grid-template-columns:repeat(2,1fr) } }
@media (min-width:1024px) { .grid-3 { grid-template-columns:repeat(3,1fr) } .grid-4 { grid-template-columns:repeat(4,1fr) } }

/* Testimonials (inner pages) */
.testimonial { position:relative; overflow:hidden }
.testimonial .stars { color:#FBBF24; font-size:1rem; letter-spacing:3px; margin-bottom:.75rem }
.testimonial blockquote { margin:0; font-size:.9375rem; line-height:1.7; color:var(--text-light); font-style:italic }
.testimonial .who { margin-top:1.25rem; padding-top:1.25rem; border-top:1px solid var(--border); display:flex; align-items:center; gap:.75rem }
.testimonial .avatar { width:2.5rem; height:2.5rem; border-radius:50%; background:var(--grad-brand); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:.875rem; flex-shrink:0 }
.testimonial .who-info strong { display:block; font-size:.9375rem }
.testimonial .who-info small { color:var(--text-light); font-size:.75rem }

/* Nav (inner pages) */
.site-header { padding:0 }
.site-header.at-top { background:transparent; box-shadow:none }
.site-header.scrolled {
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  box-shadow:0 1px 0 var(--border), 0 4px 20px rgba(0,0,0,.08);
}
.site-header .bar {
  display:flex; align-items:center; justify-content:space-between;
  padding-block:1.125rem; gap:1.5rem;
}
.brand-link { display:flex; align-items:center; gap:.75rem }
.brand-link img { border-radius:8px; width:36px; height:36px }
.brand-name strong { font-family:'Poppins','Sora',sans-serif; font-size:1.25rem; font-weight:800; color:var(--secondary-dark); letter-spacing:-.02em; display:block; line-height:1 }
.brand-name strong span { color:var(--primary-dark) }
.brand-name small { font-size:.6rem; color:var(--text-light); letter-spacing:.08em; text-transform:uppercase; display:block; margin-top:2px }
.site-header.at-top .brand-name strong { color:#fff }
.site-header.at-top .brand-name strong span { color:var(--primary-light) }
.site-header.at-top .brand-name small { color:rgba(255,255,255,.50) }
.nav-main { display:none; gap:1.75rem; font-size:.875rem; font-weight:500; align-items:center }
.nav-main a { color:var(--text-light); transition:color .2s; position:relative; padding-block:.25rem }
.nav-main a:hover { color:var(--primary-dark) }
.nav-main a.active { color:var(--primary-dark) }
.nav-main a.active::after { content:''; position:absolute; bottom:-4px; left:0; right:0; height:2px; background:var(--grad-brand); border-radius:1px }
.site-header.at-top .nav-main a { color:rgba(255,255,255,.80) }
.site-header.at-top .nav-main a:hover, .site-header.at-top .nav-main a.active { color:#fff }
.nav-cta { display:none }
.menu-btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:.5rem; border-radius:8px; color:var(--secondary-dark); transition:background .2s;
}
.site-header.at-top .menu-btn { color:#fff }
.menu-btn:hover { background:var(--bg-light) }
.nav-mobile { display:none; background:#fff; border-top:1px solid var(--border); box-shadow:var(--shadow-xl) }
.nav-mobile.open { display:block }
.nav-mobile .inner { display:flex; flex-direction:column; padding:1rem 1.5rem 1.5rem; gap:.25rem }
.nav-mobile a { padding:.75rem 1rem; color:var(--text-light); border-radius:8px; font-size:.9375rem; font-weight:500 }
.nav-mobile a:hover { background:var(--bg-light); color:var(--primary-dark) }
.nav-mobile a.active { color:var(--primary-dark) }
.nav-mobile .btn-primary { margin-top:.75rem; justify-content:center; border-radius:var(--radius-full) }
@media (min-width:1024px) { .nav-main { display:flex } .nav-cta { display:flex } .menu-btn { display:none } }

/* Button variants (inner pages) */
.btn-primary-inner {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.875rem 1.75rem; border-radius:var(--radius-full);
  font-weight:600; font-size:.9375rem; cursor:pointer;
  background:var(--grad-brand); color:#fff;
  box-shadow:0 4px 15px rgba(34,197,94,.35); transition:var(--transition);
}
.btn-primary-inner:hover { transform:translateY(-3px); box-shadow:0 8px 28px rgba(34,197,94,.50) }
.btn-ghost {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.875rem 1.75rem; border-radius:var(--radius-full);
  font-weight:600; font-size:.9375rem; cursor:pointer;
  background:transparent; color:var(--text); border:1.5px solid var(--border); transition:var(--transition);
}
.btn-ghost:hover { background:var(--bg-light); border-color:var(--primary) }
.btn-on-dark { color:#fff; border-color:rgba(255,255,255,.35) }
.btn-on-dark:hover { background:rgba(255,255,255,.12) }
.btn-white { background:#fff; color:var(--text); border:0; box-shadow:var(--shadow-md) }
.btn-white:hover { transform:translateY(-2px); box-shadow:var(--shadow-xl) }
.btn-sm { padding:.5rem 1.1rem; font-size:.875rem }

/* Icons (inner pages) */
.icon-sm  { width:1rem;    height:1rem }
.icon     { width:1.25rem; height:1.25rem }
.icon-lg  { width:1.5rem;  height:1.5rem }
.icon-xl  { width:2rem;    height:2rem }
.icon-2xl { width:2.5rem;  height:2.5rem }
.icon-3xl { width:3rem;    height:3rem }

/* Utilities */
.bg-surface  { background:var(--bg-light) }
.bg-dark     { background:var(--secondary-dark); color:#fff }
.bg-dark h2, .bg-dark h3 { color:#fff }
.bg-secondary { background:var(--secondary-dark); color:#fff }
.max-w-xl  { max-width:36rem }
.max-w-2xl { max-width:42rem }
.max-w-3xl { max-width:52rem }
.max-w-4xl { max-width:64rem }
.mx-auto { margin-inline:auto }
.mt-1{margin-top:.25rem} .mt-2{margin-top:.5rem} .mt-3{margin-top:.75rem} .mt-4{margin-top:1rem}
.mt-5{margin-top:1.25rem} .mt-6{margin-top:1.5rem} .mt-8{margin-top:2rem} .mt-10{margin-top:2.5rem}
.mt-12{margin-top:3rem} .mb-4{margin-bottom:1rem} .mb-6{margin-bottom:1.5rem}
.mb-8{margin-bottom:2rem} .mb-12{margin-bottom:3rem}
.section-xs { padding-block:2.5rem }
.cta-row { display:flex; gap:.75rem; flex-wrap:wrap }

/* Contact form (inner pages) */
input, select, textarea {
  font-family:inherit; font-size:.95rem;
  padding:13px 18px; border:1.5px solid var(--border);
  border-radius:var(--radius); width:100%;
  background:#fff; color:var(--text); transition:var(--transition);
}
input:focus, select:focus, textarea:focus {
  outline:none; border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(34,197,94,.12);
}
.field label { display:block; font-size:.8125rem; font-weight:600; margin-bottom:.4rem; color:var(--text) }
.form-grid { display:flex; flex-direction:column; gap:1.25rem }
.contact-layout { display:grid; gap:2rem; grid-template-columns:1fr }
@media (min-width:1024px) { .contact-layout { grid-template-columns:2fr 1fr } }
.side-cta { background:var(--grad-dark); color:#fff; border-radius:var(--radius-lg); padding:1.75rem; display:flex; flex-direction:column; gap:1rem }
.side-cta h3 { color:#fff }
.side-cta .item { display:flex; align-items:center; gap:.75rem; color:#fff }
.side-cta .item .ico { width:2.5rem; height:2.5rem; border-radius:.625rem; background:rgba(34,197,94,.2); display:flex; align-items:center; justify-content:center; color:var(--primary-light); flex-shrink:0 }
.side-cta small { font-size:.7rem; color:rgba(255,255,255,.55); display:block }
.side-cta .val  { font-weight:600; font-size:.9375rem }

/* Maint card (inner) */
.maint-grid { display:grid; gap:1.25rem }

/* ═══════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════ */
@keyframes fadeInUp   { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:none} }
@keyframes fadeInDown { from{opacity:0;transform:translateY(-30px)} to{opacity:1;transform:none} }
@keyframes bounce {
  0%,20%,50%,80%,100% { transform:translateX(-50%) translateY(0) }
  40%  { transform:translateX(-50%) translateY(-10px) }
  60%  { transform:translateX(-50%) translateY(-5px) }
}
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes pageIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
@keyframes spin { from{transform:rotate(0)} to{transform:rotate(360deg)} }
body { animation:pageIn .5s cubic-bezier(.16,1,.3,1) both }

/* Scroll-reveal */
[data-animate] {
  opacity:0; transform:translateY(28px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1);
}
[data-animate].animated, [data-animate].visible {
  opacity:1; transform:none !important;
}
[data-animate="fade-right"] { transform:translateX(-28px) }
[data-animate="fade-left"]  { transform:translateX(28px) }
[data-animate="zoom-in"]    { transform:scale(.92) }

.sp-animate {
  opacity:0; transform:translateY(24px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1);
}
.sp-animate.sp-visible { opacity:1; transform:none !important }
[data-animate="fade-right"].sp-animate { transform:translateX(-24px) }
[data-animate="fade-left"].sp-animate  { transform:translateX(24px) }
[data-animate="zoom-in"].sp-animate    { transform:scale(.94) }

.animate-fade-up { animation:fadeInUp .8s cubic-bezier(.16,1,.3,1) both; opacity:1 !important }

@media (prefers-reduced-motion:reduce) {
  [data-animate], .sp-animate { opacity:1; transform:none }
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE — global
   ═══════════════════════════════════════════════════════ */
@media (max-width:1024px) {
  .process-step:nth-child(odd),
  .process-step:nth-child(even) { padding-right:0; padding-left:0 }
  .process-step { flex-direction:column; align-items:flex-start; padding-left:70px }
  .process-line { left:25px; top:0; bottom:0; width:3px }
  .step-number { left:25px; transform:translateX(-50%); width:44px; height:44px; font-size:.9rem }
}

@media (max-width:768px) {
  .hero-buttons,.sp-hero-buttons { flex-direction:column; align-items:center }
  .maintenance-cta,.sp-maint-cta { flex-direction:column; align-items:flex-start; padding:28px }
  .maintenance-cta-actions,.sp-maint-cta-actions { width:100%; flex-direction:column }
  .maintenance-cta-actions .btn,
  .maintenance-cta-actions .sp-btn,
  .sp-maint-cta-actions .btn,
  .sp-maint-cta-actions .sp-btn { width:100% }
  .footer-bottom,.sp-footer-bottom { text-align:center; justify-content:center }
  .bornes-features,.sp-bornes-features { gap:10px }
  .borne-feature,.sp-borne-feature { padding:10px 16px; font-size:.85rem }
  .trust-badges,.sp-trust-badges { gap:14px; padding:24px }
}

@media (max-width:480px) {
  .hero-title,.sp-hero-title { font-size:2.1rem }
  .hero-subtitle,.sp-hero-subtitle { font-size:1rem }
  .section-title,.sp-section-title { font-size:1.8rem }
  .contact-form,.sp-contact-form-wrapper { padding:24px }
  .hero-stats,.sp-hero-stats { padding:18px }
  .stat-number,.sp-stat-number { font-size:1.7rem }
}