/* ============================================================
   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 ────────────── */
.hero {
  position: relative;
  isolation: isolate;
}
/* le hero collage est désormais en visuel principal côté droit ;
   on garde un léger voile pour la lisibilité du texte */
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--bg) 80%, transparent) 0%,
    color-mix(in srgb, var(--bg) 50%, transparent) 30%,
    transparent 65%);
  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 de peintre 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-1556228453-efd6c1ff04f6?w=1600&q=80&auto=format&fit=crop');
  background-size: cover;
  background-position: center;
  opacity: .06;
  -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: .10; }

/* ────────────── PRESTATIONS — photo d'atelier de peintre subtile ────────────── */
.services::after {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 45%;
  z-index: 0;
  background-image: url('https://images.unsplash.com/photo-1556228453-efd6c1ff04f6?w=1400&q=80&auto=format&fit=crop');
  background-size: cover;
  background-position: center;
  opacity: .05;
  -webkit-mask-image: linear-gradient(270deg, #000 0%, transparent 90%);
          mask-image: linear-gradient(270deg, #000 0%, transparent 90%);
  pointer-events: none;
}
[data-mode="dark"] .services::after { opacity: .10; }

/* 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-1572552635104-daf938e0aa1f?w=900&q=80&auto=format&fit=crop'); }
.service-card:nth-child(2)::after { background-image: url('https://images.unsplash.com/photo-1578749556568-bc2c40e68b61?w=900&q=80&auto=format&fit=crop'); }
.service-card:nth-child(3)::after { background-image: url('https://images.unsplash.com/photo-1565183997392-2f6f122e5912?w=900&q=80&auto=format&fit=crop'); }
.service-card:nth-child(4)::after { background-image: url('https://images.unsplash.com/photo-1584622650111-993a426fbf0a?w=900&q=80&auto=format&fit=crop'); }
.service-card:nth-child(5)::after { background-image: url('https://images.unsplash.com/photo-1556228720-195a672e8a03?w=900&q=80&auto=format&fit=crop'); }
.service-card:nth-child(6)::after { background-image: url('https://images.unsplash.com/photo-1611175694989-4870fafa4494?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(199,123,91,.92); }

/* ────────────── CONSEILS — bandeau image atelier en filigrane ────────────── */
.advice {
  position: relative;
}
.advice::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(245,239,230,.88), rgba(245,239,230,.96)),
    url('https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?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(26,19,14,.92), rgba(26,19,14,.96)),
    url('https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?w=1600&q=80&auto=format&fit=crop');
}
.advice-grid { position: relative; z-index: 2; }

/* ────────────── REVIEWS — photo peintre 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-1562259949-e8e7689d7828?w=1600&q=80&auto=format&fit=crop');
  background-size: cover;
  background-position: center;
  opacity: .05;
  -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 atelier de peintre derrière gradient terracotta ────────────── */
.contact {
  background-image:
    linear-gradient(135deg, rgba(42,31,26,.92), rgba(30,85,112,.94)),
    url('https://images.unsplash.com/photo-1556228720-195a672e8a03?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(20,12,8,.97), rgba(10,16,24,.98)),
    url('https://images.unsplash.com/photo-1556228720-195a672e8a03?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(42,31,26,.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(20,14,10,.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 atelier de peintre en filigrane ────────────── */
.site-footer {
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('https://images.unsplash.com/photo-1556228453-efd6c1ff04f6?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"] .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"] .contact {
  background-image:
    linear-gradient(135deg, rgba(26,2,51,.92), rgba(107,16,113,.85)),
    url('https://images.unsplash.com/photo-1556228720-195a672e8a03?w=1800&q=80&auto=format&fit=crop');
}

[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"] .contact {
  background-image:
    linear-gradient(135deg, rgba(5,9,18,.95), rgba(26,10,58,.9)),
    url('https://images.unsplash.com/photo-1556228720-195a672e8a03?w=1800&q=80&auto=format&fit=crop');
}