/* ============================================================
   DECOR — textures de fond + silhouettes en transparence
   Toutes les couleurs utilisent les tokens de thème (currentColor)
   ou rgba() pour rester lisible sur clair / sombre / 80s / futur.
   ============================================================ */

/* ────────────── 1. GRAIN GLOBAL ────────────── */
/* fin grain SVG, posé sur le body en fixed pour traverser toutes les sections */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.45 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
[data-mode="dark"] body::after { mix-blend-mode: screen; opacity: .12; }

/* ────────────── 2. SECTION : HERO — silhouettes & drafting ────────────── */
.hero { position: relative; }
.hero-deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-deco svg { position: absolute; }

/* Grille papier millimétré derrière le hero */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(15,76,117,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,76,117,.06) 1px, transparent 1px),
    linear-gradient(to right, rgba(15,76,117,.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,76,117,.10) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
[data-mode="dark"] .hero::before {
  background-image:
    linear-gradient(to right, rgba(187,225,250,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(187,225,250,.05) 1px, transparent 1px),
    linear-gradient(to right, rgba(187,225,250,.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(187,225,250,.10) 1px, transparent 1px);
}

/* ────────────── 3. SECTION : ABOUT — papier calque + grand robinet ────────────── */
.about {
  background-image:
    radial-gradient(circle at 12% 8%, rgba(15,76,117,.06), transparent 20%),
    radial-gradient(circle at 88% 96%, rgba(15,76,117,.05), transparent 22%),
    repeating-linear-gradient(45deg, transparent 0 12px, rgba(15,76,117,.025) 12px 13px);
}
.about::before {
  content: '';
  position: absolute;
  right: -120px; top: 50%;
  transform: translateY(-50%);
  width: 540px; height: 540px;
  pointer-events: none;
  z-index: 0;
  opacity: .07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%230F4C75' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M40 30 L40 90 L160 90 L160 30'/><path d='M100 90 L100 130 L70 130 L70 158 L130 158 L130 130 L100 130'/><path d='M20 30 L60 30 M140 30 L180 30'/><circle cx='100' cy='65' r='8'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
}
.about-inner { position: relative; z-index: 2; }

/* ────────────── 4. SECTION : SERVICES — hachures techniques ────────────── */
.services {
  background-image:
    repeating-linear-gradient(135deg, transparent 0 18px, rgba(15,76,117,.025) 18px 19px),
    repeating-linear-gradient(45deg, transparent 0 18px, rgba(15,76,117,.025) 18px 19px);
}
.services::before {
  content: '';
  position: absolute;
  left: -80px; top: 40px;
  width: 360px; height: 360px;
  pointer-events: none;
  z-index: 0;
  opacity: .08;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%230F4C75' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><path d='M150 30 A 50 50 0 0 0 100 80 L 30 150 L 50 170 L 120 100 A 50 50 0 0 0 170 50 L 145 75 L 130 60 L 110 50 Z'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  transform: rotate(-12deg);
}
.services-grid { position: relative; z-index: 2; }
.services .section-head { position: relative; z-index: 2; }

/* ────────────── 5. SECTION : PREMIUM — circuit blueprint ────────────── */
.premium::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 80px, rgba(255,255,255,.04) 80px 81px),
    repeating-linear-gradient(90deg, transparent 0 80px, rgba(255,255,255,.04) 80px 81px);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 80%);
          mask-image: radial-gradient(ellipse at center, #000 40%, transparent 80%);
  z-index: 0;
}
.premium .section-head, .premium-grid, .premium-foot { position: relative; z-index: 2; }
/* gros tuyaux fantôme dans le coin */
.premium-deco {
  position: absolute;
  right: -80px; bottom: -60px;
  width: 480px; height: 480px;
  opacity: .06;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23BBE1FA' stroke-width='6' stroke-linecap='round'><path d='M0 60 H80 Q100 60 100 80 V200'/><circle cx='80' cy='60' r='6' fill='%23BBE1FA'/><circle cx='100' cy='80' r='6' fill='%23BBE1FA'/><path d='M40 200 V140 Q40 120 60 120 H140'/><circle cx='60' cy='120' r='6' fill='%23BBE1FA'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
}

/* ────────────── 6. SECTION : AVANT/APRÈS — ondulations eau ────────────── */
.ba {
  background-image:
    radial-gradient(circle at 15% 30%, rgba(50,130,184,.10) 0, transparent 35%),
    radial-gradient(circle at 85% 70%, rgba(187,225,250,.18) 0, transparent 35%),
    repeating-radial-gradient(circle at 15% 30%, transparent 0 40px, rgba(50,130,184,.04) 40px 41px),
    repeating-radial-gradient(circle at 85% 70%, transparent 0 40px, rgba(50,130,184,.04) 40px 41px);
}

/* ────────────── 7. SECTION : ADVICE — papier graphique ────────────── */
.advice {
  background-image:
    linear-gradient(to right, rgba(15,76,117,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,76,117,.04) 1px, transparent 1px);
  background-size: 32px 32px, 32px 32px;
}
.advice::before {
  content: '';
  position: absolute;
  left: 4%; bottom: 8%;
  width: 320px; height: 320px;
  pointer-events: none;
  z-index: 0;
  opacity: .055;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%230F4C75' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='M100 20 C 70 60 50 90 50 120 C 50 152 75 175 100 175 C 125 175 150 152 150 120 C 150 90 130 60 100 20 Z'/><path d='M70 125 C 70 145 80 155 95 158'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
}
.advice { position: relative; }
.advice-grid { position: relative; z-index: 2; }

/* ────────────── 8. SECTION : REVIEWS — fond perforé ────────────── */
.reviews {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(15,76,117,.08) 1px, transparent 1.6px);
  background-size: 22px 22px;
}

/* ────────────── 9. SECTION : CONTACT — réseau de gouttes ────────────── */
.contact::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240' fill='none' stroke='rgba(255,255,255,0.10)' stroke-width='1.4'><path d='M30 40 C 26 50 22 56 22 64 C 22 72 26 76 30 76 C 34 76 38 72 38 64 C 38 56 34 50 30 40 Z'/><path d='M180 80 C 176 90 172 96 172 104 C 172 112 176 116 180 116 C 184 116 188 112 188 104 C 188 96 184 90 180 80 Z'/><path d='M90 160 C 86 170 82 176 82 184 C 82 192 86 196 90 196 C 94 196 98 192 98 184 C 98 176 94 170 90 160 Z'/></svg>");
  background-size: 280px 280px;
  background-repeat: repeat;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
          mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  z-index: 0;
}
.contact-grid { position: relative; z-index: 2; }

/* ────────────── 10. ADAPTATIONS PAR THÈME ────────────── */

/* Années 80 — textures plus saturées, fond grille néon */
[data-theme="annees80"] .about,
[data-theme="annees80"] .services,
[data-theme="annees80"] .advice,
[data-theme="annees80"] .reviews,
[data-theme="annees80"] .ba {
  background-image:
    repeating-linear-gradient(90deg, transparent 0 40px, rgba(255,0,122,.08) 40px 41px),
    repeating-linear-gradient(0deg, transparent 0 40px, rgba(0,240,255,.08) 40px 41px);
}
[data-theme="annees80"] .about::before,
[data-theme="annees80"] .services::before,
[data-theme="annees80"] .advice::before {
  filter: hue-rotate(280deg) saturate(2);
  opacity: .14;
}
[data-theme="annees80"] body::after { opacity: .08; }
[data-theme="annees80"] .premium::before {
  background-image:
    repeating-linear-gradient(0deg, transparent 0 60px, rgba(0,240,255,.18) 60px 61px),
    repeating-linear-gradient(90deg, transparent 0 60px, rgba(255,0,122,.18) 60px 61px);
}

/* Futuriste — grilles cyan plus fines, silhouettes glow */
[data-theme="futuriste"] .about,
[data-theme="futuriste"] .services,
[data-theme="futuriste"] .advice {
  background-image:
    linear-gradient(rgba(0,229,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,.05) 1px, transparent 1px);
  background-size: 50px 50px;
}
[data-theme="futuriste"] .reviews {
  background-image: radial-gradient(circle at 1px 1px, rgba(0,229,255,.18) 1px, transparent 1.6px);
}
[data-theme="futuriste"] .ba {
  background-image:
    radial-gradient(circle at 20% 30%, rgba(0,229,255,.08), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(179,136,255,.08), transparent 45%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 50px, rgba(0,229,255,.05) 50px 51px);
}
[data-theme="futuriste"] .about::before,
[data-theme="futuriste"] .services::before,
[data-theme="futuriste"] .advice::before {
  filter: hue-rotate(180deg) brightness(1.4) drop-shadow(0 0 12px rgba(0,229,255,.4));
  opacity: .12;
}
[data-theme="futuriste"] body::after { opacity: .08; mix-blend-mode: screen; }

/* Garde l'image silhouette toujours sous le contenu */
.about, .services, .advice, .premium, .ba, .reviews, .contact { position: relative; }