/* ============================================================
   IMAGES — photos d'arrière-plan et structurelles
   Inspiré de Maison Lou : Unsplash, transparence, overlays.
   Chargé après decor.css pour empiler sur les textures.
   ============================================================ */

/* ────────────── HERO — image atelier en split droit ────────────── */
.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-1607400201515-c2c41c07d307?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: .35;
  filter: saturate(.8) contrast(1.05);
}
[data-mode="dark"] .hero::after { opacity: .25; filter: brightness(.6) saturate(.7); }

/* léger voile pour garder le texte lisible côté gauche */
.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);
}
/* la teinte d'origine du frame n'a plus lieu d'être derrière une photo */
.portrait-frame { background: #2a3038; }

/* ────────────── ABOUT — photo d'atelier en arrière-plan ────────────── */
.about::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 50%;
  z-index: 0;
  background-image: url('https://images.unsplash.com/photo-1530124566582-a618bc2615dc?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 — photo d'outils + tuile par carte ────────────── */
.services::after {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 50%;
  z-index: 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: .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 illustration dans une carte service au hover (couche très subtile) */
.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-1585704032915-c3400ca199e7?w=900&q=80&auto=format&fit=crop'); }
.service-card:nth-child(2)::after { background-image: url('https://images.unsplash.com/photo-1584622650111-993a426fbf0a?w=900&q=80&auto=format&fit=crop'); }
.service-card:nth-child(3)::after { background-image: url('https://images.unsplash.com/photo-1581094271901-8022df4466f9?w=900&q=80&auto=format&fit=crop'); }
.service-card:nth-child(4)::after { background-image: url('https://images.unsplash.com/photo-1503387762-592deb58ef4e?w=900&q=80&auto=format&fit=crop'); }
.service-card:nth-child(5)::after { background-image: url('https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?w=900&q=80&auto=format&fit=crop'); }
.service-card:nth-child(6)::after { background-image: url('https://images.unsplash.com/photo-1497440001374-f26997328c1b?w=900&q=80&auto=format&fit=crop'); }
.service-card:hover::after { opacity: .25; }
.service-card > * { position: relative; z-index: 1; }

/* ────────────── PREMIUM — image industrielle en arrière-plan ────────────── */
.premium {
  background-image:
    linear-gradient(135deg, rgba(20,32,46,.92), rgba(20,32,46,.78)),
    url('https://images.unsplash.com/photo-1568227459816-ff8e0a08c450?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 — vraies photos remplacent les SVG ────────────── */
.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(15,76,117,.85); }

/* ────────────── ADVICE / TIPS — bandeau image fixed sur la liste ────────────── */
.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-1584622781564-1d987f7333c1?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(13,22,32,.92), rgba(13,22,32,.96)),
    url('https://images.unsplash.com/photo-1584622781564-1d987f7333c1?w=1600&q=80&auto=format&fit=crop');
}
.advice-grid { position: relative; z-index: 2; }

/* ────────────── REVIEWS — photo plombier au travail en filigrane ────────────── */
.reviews::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url('https://images.unsplash.com/photo-1584622781564-1d987f7333c1?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 { position: relative; }
.reviews .section-head, .reviews-marquee { position: relative; z-index: 2; }

/* ────────────── CONTACT — photo robinet floutée derrière le gradient ────────────── */
.contact {
  background-image:
    linear-gradient(135deg, rgba(15,76,117,.95), rgba(20,32,46,.96)),
    url('https://images.unsplash.com/photo-1584622650111-993a426fbf0a?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,12,22,.97), rgba(10,16,28,.98)),
    url('https://images.unsplash.com/photo-1584622650111-993a426fbf0a?w=1800&q=80&auto=format&fit=crop');
}
@media (max-width: 1100px) { .contact { background-attachment: scroll; } }

/* Renforce le fond du formulaire pour qu'il ne soit pas transparent sur la photo */
.contact-form {
  background: rgba(15,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;
}
/* Inputs : trait inférieur plus contrasté */
.contact-form .field input,
.contact-form .field select,
.contact-form .field textarea {
  border-bottom-color: rgba(255,255,255,.35) !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 en mode sombre — forcer des couleurs claires car le fond est
   toujours un gradient sombre ; sans ça, var(--paper) devient navy = invisible
   ─── */
.contact, .contact * { /* baseline pour que tout texte colonnaire soit clair */
  /* on garde les couleurs explicites définies plus bas */
}
.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; }

/* Inputs en clair, peu importe le mode */
.contact-form .field input,
.contact-form .field select,
.contact-form .field textarea {
  color: #fff !important;
}
.contact-form .field select option {
  color: #14202e;
  background: #fff;
}
.form-note { color: rgba(255,255,255,.7) !important; }

/* ─── Fix label « Sujet » : un select n'a pas de placeholder à afficher,
   donc son label doit toujours être en position haute, sans dépendre de :valid
   ─── */
.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;
}

/* ────────────── FOOTER — image discrète d'atelier en 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="annees80"] .premium {
  background-image:
    linear-gradient(135deg, rgba(26,2,51,.85), rgba(107,16,113,.8)),
    url('https://images.unsplash.com/photo-1568227459816-ff8e0a08c450?w=1800&q=80&auto=format&fit=crop');
}

[data-theme="futuriste"] .hero::after { filter: hue-rotate(180deg) brightness(.7) saturate(1.2); opacity: .3; }
[data-theme="futuriste"] .portrait-photo { filter: hue-rotate(180deg) saturate(.8) brightness(.95); }
[data-theme="futuriste"] .ba-image img { filter: hue-rotate(180deg) saturate(.85) contrast(1.1); }
[data-theme="futuriste"] .premium {
  background-image:
    linear-gradient(135deg, rgba(5,9,18,.92), rgba(12,29,58,.88)),
    url('https://images.unsplash.com/photo-1568227459816-ff8e0a08c450?w=1800&q=80&auto=format&fit=crop');
}
[data-theme="futuriste"] .contact {
  background-image:
    linear-gradient(135deg, rgba(5,9,18,.95), rgba(26,10,58,.9)),
    url('https://images.unsplash.com/photo-1584622650111-993a426fbf0a?w=1800&q=80&auto=format&fit=crop');
}