/* ============================================================
   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 de joints de carrelage derrière le hero (fond carreleur) */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    /* lignes de joints horizontales */
    repeating-linear-gradient(0deg,
      transparent 0,
      rgba(58,58,61,.05) 1px,
      transparent 3px,
      transparent 60px),
    /* lignes de joints verticales */
    repeating-linear-gradient(90deg,
      transparent 0,
      rgba(58,58,61,.05) 1px,
      transparent 3px,
      transparent 60px),
    /* halos de lumière */
    radial-gradient(circle at 30% 20%, rgba(197,106,63,.07), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(166,196,184,.07), 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(0deg,
      transparent 0,
      rgba(232,218,200,.06) 1px,
      transparent 3px,
      transparent 60px),
    repeating-linear-gradient(90deg,
      transparent 0,
      rgba(232,218,200,.06) 1px,
      transparent 3px,
      transparent 60px),
    radial-gradient(circle at 30% 20%, rgba(224,138,92,.10), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(166,196,184,.08), transparent 50%);
}

/* ────────────── 3. SECTION : ABOUT — pierre + grand carreau silhouette ────────────── */
.about {
  background-image:
    radial-gradient(circle at 12% 8%, rgba(58,58,61,.07), transparent 22%),
    radial-gradient(circle at 88% 96%, rgba(197,106,63,.08), transparent 24%),
    repeating-linear-gradient(0deg, transparent 0 40px, rgba(58,58,61,.03) 40px 41px),
    repeating-linear-gradient(90deg, transparent 0 40px, rgba(58,58,61,.03) 40px 41px);
}
.about::before {
  content: '';
  position: absolute;
  right: -120px; top: 50%;
  transform: translateY(-50%);
  width: 520px; height: 520px;
  pointer-events: none;
  z-index: 0;
  opacity: .07;
  /* grand carreau 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='%233A3A3D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><rect x='20' y='20' width='160' height='160' rx='3'/><rect x='40' y='40' width='120' height='120' rx='2' opacity='.6'/><line x1='100' y1='20' x2='100' y2='180' opacity='.4'/><line x1='20' y1='100' x2='180' y2='100' opacity='.4'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
}
.about-inner { position: relative; z-index: 2; }

/* ────────────── 4. SECTION : PRESTATIONS — calepinage hexagonal ────────────── */
.services {
  background-image:
    repeating-linear-gradient(0deg, transparent 0 30px, rgba(58,58,61,.03) 30px 31px),
    repeating-linear-gradient(60deg, transparent 0 30px, rgba(197,106,63,.025) 30px 31px),
    repeating-linear-gradient(-60deg, transparent 0 30px, rgba(166,196,184,.025) 30px 31px);
}
.services::before {
  content: '';
  position: absolute;
  left: -80px; top: 40px;
  width: 360px; height: 360px;
  pointer-events: none;
  z-index: 0;
  opacity: .08;
  /* grande truelle 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='%233A3A3D' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><path d='M140 20 L 180 20 L 180 36 L 158 36 L 154 56'/><rect x='130' y='52' width='40' height='20' rx='3' transform='rotate(-30 150 62)'/><path d='M124 72 L 24 168 L 48 184 L 156 108 Z'/><line x1='40' y1='150' x2='136' y2='90' opacity='.5'/></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 — joints + croisillons ────────────── */
.ba {
  background-image:
    radial-gradient(circle at 15% 30%, rgba(58,58,61,.10) 0, transparent 35%),
    radial-gradient(circle at 85% 70%, rgba(166,196,184,.14) 0, transparent 35%),
    repeating-linear-gradient(0deg, transparent 0 50px, rgba(58,58,61,.04) 50px 51px),
    repeating-linear-gradient(90deg, transparent 0 50px, rgba(58,58,61,.04) 50px 51px);
}

/* ────────────── 7. SECTION : ADVICE — calepinage trame + grand carreau ────────────── */
.advice {
  background-image:
    repeating-linear-gradient(0deg, transparent 0 32px, rgba(58,58,61,.04) 32px 33px),
    repeating-linear-gradient(90deg, transparent 0 32px, rgba(58,58,61,.04) 32px 33px);
}
.advice::before {
  content: '';
  position: absolute;
  left: 4%; bottom: 8%;
  width: 320px; height: 320px;
  pointer-events: none;
  z-index: 0;
  opacity: .07;
  /* grand carreau silhouette + croisillon */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23C56A3F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><rect x='20' y='20' width='80' height='80' rx='2'/><rect x='110' y='20' width='80' height='80' rx='2'/><rect x='20' y='110' width='80' height='80' rx='2'/><rect x='110' y='110' width='80' height='80' rx='2'/><path d='M100 100 L 100 90 L 90 90 L 90 110 L 100 110 L 100 100 L 110 100 L 110 90 L 100 90 M 100 110 L 110 110 L 110 100' fill='%23C56A3F'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
}
.advice { position: relative; }
.advice-grid { position: relative; z-index: 2; }

/* ────────────── 8. SECTION : REVIEWS — trame de croisillons ────────────── */
.reviews {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(58,58,61,.10) 1px, transparent 1.6px);
  background-size: 22px 22px;
}

/* ────────────── 9. SECTION : CONTACT — petits carreaux disséminés ────────────── */
.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'><rect x='28' y='44' width='14' height='14' rx='1' fill='rgba(255,255,255,.10)'/><rect x='176' y='86' width='12' height='12' rx='1' fill='rgba(255,255,255,.09)'/><rect x='98' y='176' width='16' height='16' rx='1' fill='rgba(255,255,255,.10)'/><rect x='196' y='28' width='10' height='10' rx='1' fill='rgba(255,255,255,.08)'/><rect x='60' y='140' width='12' height='12' rx='1' fill='rgba(255,255,255,.07)'/><rect x='150' y='200' width='10' height='10' rx='1' fill='rgba(255,255,255,.08)'/></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, .calepinages { 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 */
}