/* ==========================================================================
   Ambiance « Pierre, plan et lumière » (CroisierWeb, 2026-10-20, validée)
   --------------------------------------------------------------------------
   Dernière couche CSS (après mv-immo.css), voir ambiance_preview().
   1. Matière : fond blanc cassé chaud + grain de pierre sur les sections pierre.
   2. Motif signature : la façade de l'Allée des Soupirs 2 en dessin d'architecte
      (bandeaux de titre, bandeau d'appel, pied de page) — remplace la croix.
   3. Trame de plan (papier millimétré) dans les zones "techniques".
   4. Courbes de niveau de l'Ajoie dans le pied de page.
   5. Bandeaux photo pleine largeur (accueil, Notre histoire).
   Règle : un seul motif par écran.
   ========================================================================== */
:root {
  --amb-page: #FCFAF7;
  --amb-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .36 0 0 0 0 .3 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --amb-grid:
    linear-gradient(rgba(122, 106, 92, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122, 106, 92, .07) 1px, transparent 1px),
    linear-gradient(rgba(122, 106, 92, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122, 106, 92, .035) 1px, transparent 1px);
}

/* 1. Matière ---------------------------------------------------------------- */
body.ambiance { background: var(--amb-page); }
html:has(body.ambiance) { overflow-x: clip; }
.ambiance .section, .ambiance main { background-color: transparent; }
.ambiance .section-grey, .ambiance .home-trust-band, .ambiance .stats-band,
.ambiance .reno-gallery-section, .ambiance .page-hero, .ambiance .site-footer {
  background-image: var(--amb-grain);
}
.ambiance .listing-card, .ambiance .home-service-card:not(.home-service-card--service),
.ambiance .home-step, .ambiance .service-detail, .ambiance .value-card { background-color: #fff; }

/* 2. Motif signature : façade en dessin d'architecte -------------------------- */
.ambiance .page-hero {
  /* façade en filigrane au pied du bandeau (fondu vers le haut, intégré au SVG) */
  background-image: url("../img/ambiance/facade-soupirs-filigrane.svg?v=2"), var(--amb-grain);
  background-repeat: no-repeat, repeat;
  background-size: 820px auto, auto;
  background-position: left -30px bottom 0, 0 0;
}
.ambiance .page-hero:not(.has-photo) { background-position: right -40px bottom 0, 0 0; }
@media (max-width: 860px) {
  .ambiance .page-hero.has-photo { background-size: 560px auto, auto; }
}

/* Bandeau rouge d'appel : la façade remplace la croix suisse. */
.ambiance .section-cta-band::after {
  right: -40px; top: auto; bottom: -6px; transform: none; width: 640px; height: 210px; opacity: .2;
  background: url("../img/ambiance/facade-soupirs-blanc.svg") right bottom / contain no-repeat;
}

/* 3. Trame de plan ------------------------------------------------------------ */
.ambiance .home-sites, .ambiance .listings-section-sites {
  background-image: var(--amb-grid);
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
}
.ambiance .listing-facts {
  background-color: #fff;
  background-image: var(--amb-grid);
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
  border: 1px solid var(--color-stone-line); border-radius: 12px; padding: 6px 16px;
}

/* 4. Courbes de niveau de l'Ajoie (pied de page) ------------------------------- */
.ambiance .site-footer {
  background-image: url("../img/ambiance/topo-ajoie.svg"), var(--amb-grain);
  background-size: cover, auto; background-position: center bottom, 0 0;
}
.ambiance .stats-band { border-bottom: 0; }

/* 5. Bandeaux photo pleine largeur -------------------------------------------- */
.ambiance-band {
  position: relative; width: 100vw; margin-left: calc(50% - 50vw); min-height: 440px;
  display: flex; align-items: flex-end; background-size: cover; background-position: center 60%;
  isolation: isolate;
}
.ambiance-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(34, 30, 27, .72) 0%, rgba(34, 30, 27, .35) 55%, rgba(34, 30, 27, .05) 100%);
}
.ambiance-band-inner { width: 100%; max-width: 1160px; margin: 0 auto; padding: 64px 20px; }
.ambiance-band-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; color: #fff; font: 600 .78rem var(--font-body);
  letter-spacing: .16em; text-transform: uppercase;
}
.ambiance-band-eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--color-red); }
.ambiance-band-text {
  margin: 14px 0 0; max-width: 20ch; color: #fff; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.8rem, 3.6vw, 3rem); line-height: 1.08; letter-spacing: -.02em;
}
@media (hover: hover) and (min-width: 1024px) {
  .ambiance-band { background-attachment: fixed; } /* défilement légèrement décalé */
}
@media (max-width: 760px) {
  .ambiance-band { min-height: 320px; }
  .ambiance-band-inner { padding: 40px 16px; }
}
.page-about .ambiance-band { margin-top: 56px; margin-bottom: 56px; border-radius: 0; }

/* =====================================================================
   Chaleur (2026-10-20, retour CroisierWeb : "le fond reste très blanc,
   rajouter de la chaleur") — trois niveaux de tons chauds :
   fond crème (pages, en-tête) → pierre plus soutenue (sections
   alternées, bandeaux, pied de page) → blanc pur réservé aux cartes et
   aux champs de formulaire, qui ressortent ainsi nettement.
   ===================================================================== */
:root {
  --amb-page: #F7F1E7;
  --color-stone: #EFE6D8;
  --color-stone-2: #E6DACA;
  --color-stone-line: #DCCDB8;
  --color-light-grey: #EFE6D8;
  --color-border: #E3D8C8;
}
body.ambiance { background-color: var(--amb-page); background-image: var(--amb-grain); }
.ambiance .site-header, .ambiance .header-inner { background-color: var(--amb-page); }
.ambiance .site-header { border-bottom-color: var(--color-stone-line); }
@media (max-width: 960px) {
  .ambiance .main-nav { background-color: var(--amb-page); }
}
.ambiance .listing-card, .ambiance .home-service-card:not(.home-service-card--service),
.ambiance .home-step, .ambiance .service-detail, .ambiance .value-card, .ambiance .history-timeline-section,
.ambiance .reno-chapter-media, .ambiance .map-consent-inner, .ambiance .listing-contact-box input,
.ambiance .contact-form input, .ambiance .contact-form textarea, .ambiance .contact-form select {
  background-color: #fff;
}
.ambiance .listing-card, .ambiance .home-service-card:not(.home-service-card--service), .ambiance .service-detail {
  border-color: #EADFD0;
}
.ambiance .listing-contact-box, .ambiance .reno-facts, .ambiance .page-services .services-index { background-color: #F3EBDF; }
.ambiance .map-consent { background-color: #EFE6D8; }