/* ============================================================
   IMAGES — Atelier Volta — photos d'arrière-plan & structurelles
   Thématique : tableau électrique, câbles, atelier, outils.
   Chargé après decor.css pour empiler sur les textures.
   ============================================================ */

/* ────────────── HERO — atelier électricien en split ────────────── */
.hero { position: relative; isolation: isolate; }
.hero::after {
  content: '';
  position: absolute;
  inset: 0 0 0 45%;
  z-index: -2;
  background-image: url('https://images.unsplash.com/photo-1565514020179-026b92b84bb6?w=1600&q=80&auto=format&fit=crop');
  background-size: cover;
  background-position: center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 100%);
  opacity: .32;
  filter: saturate(.85) contrast(1.05);
}
[data-mode="dark"] .hero::after { opacity: .25; filter: brightness(.6) saturate(.7); }

.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--bg) 10%, transparent 60%);
  pointer-events: none;
}

/* ────────────── PORTRAIT (about) — vraie photo ────────────── */
.portrait-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.05) saturate(.95);
  transition: filter .8s cubic-bezier(.5,.1,.2,1), transform .8s cubic-bezier(.5,.1,.2,1);
}
.portrait-frame:hover .portrait-photo {
  transform: scale(1.05);
  filter: contrast(1.1) saturate(1.05);
}
.portrait-frame { background: #2a2418; }

/* ────────────── ABOUT — atelier électricien en filigrane ────────────── */
.about::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 50%;
  z-index: 0;
  background-image: url('https://images.unsplash.com/photo-1581092335397-9583eb92d232?w=1600&q=80&auto=format&fit=crop');
  background-size: cover;
  background-position: center;
  opacity: .07;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 70%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 70%);
  pointer-events: none;
}
[data-mode="dark"] .about::after { opacity: .12; }

/* ────────────── SERVICES — tableau électrique en filigrane ────────────── */
.services::after {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 50%;
  z-index: 0;
  background-image: url('https://images.unsplash.com/photo-1581092580497-e0d23cbdf1dc?w=1400&q=80&auto=format&fit=crop');
  background-size: cover;
  background-position: center;
  opacity: .06;
  -webkit-mask-image: linear-gradient(270deg, #000 0%, transparent 80%);
          mask-image: linear-gradient(270deg, #000 0%, transparent 80%);
  pointer-events: none;
}
[data-mode="dark"] .services::after { opacity: .12; }

/* Photo en hover sur chaque carte service (subtil) */
.service-card { position: relative; overflow: hidden; }
.service-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity .5s ease;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: overlay;
}
.service-card:nth-child(1)::after { background-image: url('https://images.unsplash.com/photo-1545454675-3531b543be5d?w=900&q=80&auto=format&fit=crop'); }
.service-card:nth-child(2)::after { background-image: url('https://images.unsplash.com/photo-1581094271901-8022df4466f9?w=900&q=80&auto=format&fit=crop'); }
.service-card:nth-child(3)::after { background-image: url('https://images.unsplash.com/photo-1565514020179-026b92b84bb6?w=900&q=80&auto=format&fit=crop'); }
.service-card:nth-child(4)::after { background-image: url('https://images.unsplash.com/photo-1558002038-1055907df827?w=900&q=80&auto=format&fit=crop'); }
.service-card:nth-child(5)::after { background-image: url('https://images.unsplash.com/photo-1593941707882-a5bba14938c7?w=900&q=80&auto=format&fit=crop'); }
.service-card:nth-child(6)::after { background-image: url('https://images.unsplash.com/photo-1509391366360-2e959784a276?w=900&q=80&auto=format&fit=crop'); }
.service-card:hover::after { opacity: .25; }
.service-card > * { position: relative; z-index: 1; }

/* ────────────── PREMIUM — fond industriel ────────────── */
.premium {
  background-image:
    linear-gradient(135deg, rgba(14,26,43,.93), rgba(14,26,43,.80)),
    url('https://images.unsplash.com/photo-1581092446327-9b52bd1570c2?w=1800&q=80&auto=format&fit=crop');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
@media (max-width: 1100px) { .premium { background-attachment: scroll; } }

/* ────────────── AVANT/APRÈS ────────────── */
.ba-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.ba-label {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 18px;
  background: rgba(0,0,0,.7);
  color: #fff;
  font-size: .8rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  white-space: nowrap;
}
.ba-label--after { background: rgba(201,127,41,.85); }

/* ────────────── ADVICE — bandeau image ────────────── */
.advice { position: relative; }
.advice::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.85), rgba(255,255,255,.95)),
    url('https://images.unsplash.com/photo-1581094271901-8022df4466f9?w=1600&q=80&auto=format&fit=crop');
  background-size: cover;
  background-position: center;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 100%);
}
[data-mode="dark"] .advice::after {
  background-image:
    linear-gradient(rgba(10,18,30,.92), rgba(10,18,30,.96)),
    url('https://images.unsplash.com/photo-1581094271901-8022df4466f9?w=1600&q=80&auto=format&fit=crop');
}
.advice-grid { position: relative; z-index: 2; }

/* ────────────── REVIEWS — filigrane ────────────── */
.reviews { position: relative; }
.reviews::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url('https://images.unsplash.com/photo-1545454675-3531b543be5d?w=1600&q=80&auto=format&fit=crop');
  background-size: cover;
  background-position: center;
  opacity: .06;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
}
.reviews .section-head, .reviews-marquee { position: relative; z-index: 2; }

/* ────────────── CONTACT — fond câbles flouté ────────────── */
.contact {
  background-image:
    linear-gradient(135deg, rgba(201,127,41,.92), rgba(14,26,43,.95)),
    url('https://images.unsplash.com/photo-1565514020179-026b92b84bb6?w=1800&q=80&auto=format&fit=crop');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
[data-mode="dark"] .contact {
  background-image:
    linear-gradient(135deg, rgba(5,10,18,.97), rgba(10,16,28,.98)),
    url('https://images.unsplash.com/photo-1565514020179-026b92b84bb6?w=1800&q=80&auto=format&fit=crop');
}
@media (max-width: 1100px) { .contact { background-attachment: scroll; } }

/* Form sur fond image — opaque & lisible */
.contact-form {
  background: rgba(20,30,52,.55) !important;
  border-color: rgba(255,255,255,.18) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}
[data-mode="dark"] .contact-form {
  background: rgba(8,14,24,.78) !important;
  border-color: rgba(255,255,255,.14) !important;
}
.contact-form .field input,
.contact-form .field select,
.contact-form .field textarea {
  border-bottom-color: rgba(255,255,255,.35) !important;
  color: #fff !important;
}
.contact-form .field label {
  color: rgba(255,255,255,.7) !important;
}
[data-mode="dark"] .contact-form .field label {
  color: rgba(255,255,255,.6) !important;
}
.contact-form .field select option {
  color: #14202e;
  background: #fff;
}

/* Sujet — label flotté en permanence */
.contact-form .field select { padding-top: 22px !important; }
.contact-form .field select + label {
  top: 0 !important;
  font-size: .72rem !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
  color: var(--accent-3) !important;
}

/* Couleurs claires obligatoires en mode sombre sur fond toujours sombre */
.contact .section-title { color: #fff; }
.contact .section-title em { color: var(--accent-3); }
.contact-lead { color: rgba(255,255,255,.85) !important; }
.contact-list .ci-label { color: rgba(255,255,255,.6) !important; }
.contact-list .ci-value { color: #fff !important; }
.contact-list li { border-color: rgba(255,255,255,.18) !important; }
.contact .kicker { color: var(--accent-3) !important; }
.form-note { color: rgba(255,255,255,.7) !important; }

/* ────────────── FOOTER — filigrane ────────────── */
.site-footer { position: relative; overflow: hidden; }
.site-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('https://images.unsplash.com/photo-1581094271901-8022df4466f9?w=1400&q=80&auto=format&fit=crop');
  background-size: cover;
  background-position: center;
  opacity: .04;
  pointer-events: none;
}
[data-mode="dark"] .site-footer::before { opacity: .08; }
.site-footer .foot-grid { position: relative; z-index: 2; }

/* ────────────── ADAPTATIONS PAR THÈME ────────────── */
[data-theme="annees80"] .hero::after { filter: hue-rotate(280deg) saturate(2) contrast(1.2); opacity: .25; }
[data-theme="annees80"] .portrait-photo { filter: hue-rotate(280deg) saturate(1.6) contrast(1.1); }
[data-theme="annees80"] .ba-image img { filter: saturate(1.3) contrast(1.05); }

[data-theme="futuriste"] .hero::after { filter: hue-rotate(60deg) brightness(.7) saturate(1.2); opacity: .3; }
[data-theme="futuriste"] .portrait-photo { filter: hue-rotate(60deg) saturate(.8) brightness(.95); }
[data-theme="futuriste"] .ba-image img { filter: hue-rotate(60deg) saturate(.85) contrast(1.1); }