/* ============================================================
   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; }

/* Trame papier blanchi à la chaux derrière le hero (fond peintre) */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    /* coups de pinceau verticaux fins */
    repeating-linear-gradient(95deg,
      transparent 0,
      rgba(199,123,91,.04) 1px,
      transparent 3px,
      transparent 24px),
    /* trame légère cardboard */
    radial-gradient(circle at 30% 20%, rgba(212,165,116,.07), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(156,171,145,.06), transparent 50%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 80%);
          mask-image: radial-gradient(ellipse at center, #000 35%, transparent 80%);
}
[data-mode="dark"] .hero::before {
  background-image:
    repeating-linear-gradient(95deg,
      transparent 0,
      rgba(226,146,117,.06) 1px,
      transparent 3px,
      transparent 24px),
    radial-gradient(circle at 30% 20%, rgba(212,165,116,.10), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(156,171,145,.08), transparent 50%);
}

/* ────────────── 3. SECTION : ABOUT — chaux + grand pinceau silhouette ────────────── */
.about {
  background-image:
    radial-gradient(circle at 12% 8%, rgba(199,123,91,.07), transparent 22%),
    radial-gradient(circle at 88% 96%, rgba(212,165,116,.08), transparent 24%),
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(199,123,91,.03) 14px 15px);
}
.about::before {
  content: '';
  position: absolute;
  right: -120px; top: 50%;
  transform: translateY(-50%);
  width: 520px; height: 520px;
  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='%23C77B5B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><rect x='90' y='10' width='20' height='90' rx='2'/><rect x='84' y='100' width='32' height='18' rx='1'/><path d='M86 118 L 78 188 M 92 118 L 90 192 M 100 118 L 100 195 M 108 118 L 110 192 M 114 118 L 122 188'/><path d='M78 188 Q 100 200 122 188'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
}
.about-inner { position: relative; z-index: 2; }

/* ────────────── 4. SECTION : PRESTATIONS — hachures coup de pinceau ────────────── */
.services {
  background-image:
    repeating-linear-gradient(135deg, transparent 0 20px, rgba(199,123,91,.03) 20px 22px),
    repeating-linear-gradient(45deg, transparent 0 20px, rgba(30,85,112,.025) 20px 22px);
}
.services::before {
  content: '';
  position: absolute;
  left: -80px; top: 40px;
  width: 360px; height: 360px;
  pointer-events: none;
  z-index: 0;
  opacity: .09;
  /* grand rouleau silhouette */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23C77B5B' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><path d='M30 170 L 80 120'/><path d='M80 120 L 100 100 L 130 130 L 110 150 Z'/><rect x='90' y='30' width='66' height='70' rx='4' transform='rotate(45 123 65)'/><line x1='100' y1='44' x2='130' y2='74'/><line x1='114' y1='30' x2='144' y2='60'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  transform: rotate(-8deg);
}
.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 — éclaboussures peinture ────────────── */
.ba {
  background-image:
    radial-gradient(circle at 15% 30%, rgba(199,123,91,.10) 0, transparent 35%),
    radial-gradient(circle at 85% 70%, rgba(156,171,145,.14) 0, transparent 35%),
    repeating-radial-gradient(circle at 15% 30%, transparent 0 40px, rgba(199,123,91,.04) 40px 41px),
    repeating-radial-gradient(circle at 85% 70%, transparent 0 40px, rgba(156,171,145,.04) 40px 41px);
}

/* ────────────── 7. SECTION : ADVICE — papier kraft + grande goutte ────────────── */
.advice {
  background-image:
    repeating-linear-gradient(0deg, transparent 0 32px, rgba(199,123,91,.04) 32px 33px),
    repeating-linear-gradient(90deg, transparent 0 32px, rgba(199,123,91,.04) 32px 33px);
}
.advice::before {
  content: '';
  position: absolute;
  left: 4%; bottom: 8%;
  width: 320px; height: 320px;
  pointer-events: none;
  z-index: 0;
  opacity: .07;
  /* grosse goutte de peinture */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='%23C77B5B'><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'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
}
.advice { position: relative; }
.advice-grid { position: relative; z-index: 2; }

/* ────────────── 8. SECTION : REVIEWS — fond pointillé pigment ────────────── */
.reviews {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(199,123,91,.10) 1px, transparent 1.6px);
  background-size: 22px 22px;
}

/* ────────────── 9. SECTION : CONTACT — éclaboussures de peinture ────────────── */
.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'><circle cx='30' cy='50' r='6' fill='rgba(255,255,255,.12)'/><circle cx='42' cy='44' r='2' fill='rgba(255,255,255,.10)'/><circle cx='180' cy='90' r='5' fill='rgba(255,255,255,.10)'/><circle cx='168' cy='100' r='2.5' fill='rgba(255,255,255,.08)'/><circle cx='100' cy='180' r='7' fill='rgba(255,255,255,.10)'/><circle cx='115' cy='190' r='2' fill='rgba(255,255,255,.08)'/><circle cx='200' cy='30' r='3' fill='rgba(255,255,255,.10)'/></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,
.methode, .nuancier { position: relative; }

/* ────────────── 11. PAINT SPLASH ENTRE SECTIONS ────────────── */
/* Petite éclaboussure décorative en haut de chaque section principale */
.methode + .services::before,
.services + .nuancier::before,
.nuancier + .ba::before,
.ba + .advice::before {
  /* géré par les ::before existants déjà recolorés */
}

/* Discrète signature de pigments en bas du body (couleurs de la maison) */
body::before {
  /* déjà géré par theme-classique.css avec les radials terracotta/ocre/sauge */
}