/* ============================================================
   Voilà Immobilier — design "L'immobilier vitaminé"
   Inspiré de l'esthétique gerax.ch : toile crème, photo plein
   cadre bordée, serif fin, boutons rectangulaires, micro-labels.
   ============================================================ */

/* Typographie officielle de la charte : Knockout (Hoefler & Co) */
@font-face {
  font-family: "Knockout";
  src: url("fonts/Knockout-49.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Knockout Cond";
  src: url("fonts/Knockout-67.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}

:root {
  --cream: #fff8f3;           /* blanc cassé rosé (fonds clairs du wireframe) */
  --cream-2: #fdeae1;
  --ink: #17140f;
  --ink-soft: #55503f;
  --accent: #ea5b0c;          /* orange officiel de la charte Voilà (wireframe #EA5B0C) */
  --accent-deep: #c94a05;
  --blush: #fbc1ab;           /* saumon officiel du wireframe (#FBC1AB) */
  --blush-soft: #fde5da;      /* rose pâle : fonds doux demandés par Camille */
  --display: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  --line: rgba(23, 20, 15, .18);
  --line-soft: rgba(23, 20, 15, .10);
  --white: #ffffff;
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Inter", system-ui, sans-serif;
  --knock: "Knockout", "Inter", system-ui, sans-serif;
  /* --knock-cond redirigé vers Playfair Display : révision de la direction
     artistique (28/08) — les titres condensés « sport » sont abandonnés. */
  --knock-cond: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  --pad: clamp(20px, 3.5vw, 44px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: var(--cream); }

.wrap { max-width: 1280px; margin: 0 auto; }
.center { text-align: center; }

/* ---------------------------------------------------- typographie */

/* Titres : Playfair Display — direction plus douce, moins « sport ».
   (feedback Camille 28/08 : abandon du condensé capitales) */
h1, h2, h3, .hero-title, .loader-title {
  font-family: var(--display);
  font-weight: 500;
  text-transform: none;
  line-height: 1.12;
  letter-spacing: .005em;
}
.lede {
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.6;
}

h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); margin-bottom: 28px; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); margin-bottom: 34px; }
h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); margin-bottom: 14px; }

.micro {
  font-family: var(--knock);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1.9;
}

.eyebrow {
  font-family: var(--knock);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(30px, 5vw, 60px);
}
.eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }

/* ---------------------------------------------------- boutons */

.btn-rect, .btn {
  display: inline-block;
  padding: 16px 34px 15px;
  font-family: var(--knock);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--white);
  cursor: pointer;
  transition: background .35s, color .35s, border-color .35s;
}
.btn-rect:hover, .btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--white); }

.btn-white { background: var(--white); border-color: var(--white); color: var(--ink); }
.btn-white:hover { background: var(--accent); border-color: var(--accent); color: var(--white); }

.btn-dark { background: var(--cream); border-color: var(--accent); color: var(--accent-deep); }
.btn-dark:hover { background: var(--accent); border-color: var(--accent); color: var(--white); }

.btn-ghost { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-ghost:hover { background: var(--accent); border-color: var(--accent); color: var(--white); }

/* ---------------------------------------------------- loader */

.loader {
  position: fixed; inset: 0; z-index: 6000;
  background: var(--cream);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  transition: opacity .9s ease, visibility .9s;
}
body.loaded .loader { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-logo {
  width: clamp(120px, 16vw, 190px);
  margin: 0 auto 26px;
}
.loader-mid { text-align: center; }
.loader-title {
  font-size: clamp(2.2rem, 5.5vw, 4.2rem);
  color: var(--ink);
  text-align: center;
}
.loader-title em { font-style: italic; }
.loader-foot {
  position: absolute; left: var(--pad); right: var(--pad); bottom: 26px;
  display: flex; justify-content: space-between;
  border-top: 1px solid var(--line);
  padding-top: 14px;
  color: var(--ink-soft);
}

/* ---------------------------------------------------- header */

/* Header wireframe : bandeau orange, logo script blanc à gauche, liens blancs */
.site-header {
  position: sticky; top: 0; z-index: 900;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 26px;
  padding: 14px var(--pad);
  background: var(--accent);
  transition: padding .4s, box-shadow .4s;
}
body.scrolled .site-header { padding: 9px var(--pad); box-shadow: 0 1px 0 rgba(0,0,0,.12); }

.burger {
  display: flex; align-items: center; gap: 12px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--knock); font-size: 12px; font-weight: 400;
  letter-spacing: .2em; text-transform: uppercase; color: var(--white);
}
.burger-ico { display: flex; flex-direction: column; gap: 5px; width: 26px; }
.burger-ico i { display: block; height: 1px; background: var(--white); transition: transform .35s, width .35s; }
body.nav-open .burger-ico i:first-child { transform: translateY(3px) rotate(45deg); }
body.nav-open .burger-ico i:last-child { transform: translateY(-3px) rotate(-45deg); }
.burger-txt .t-close { display: none; }
body.nav-open .burger-txt .t-open { display: none; }
body.nav-open .burger-txt .t-close { display: inline; }

.hd-nav { display: flex; justify-content: center; align-items: center; gap: clamp(14px, 2vw, 30px); white-space: nowrap; }
.hd-nav a {
  font-family: var(--sans); font-size: 14px; font-weight: 700;
  color: var(--white);
  transition: opacity .3s;
}
.hd-nav a:hover, .hd-nav a.active { opacity: .75; }
.hd-nav { transition: opacity .3s; }
body.nav-open .hd-nav { opacity: 0; pointer-events: none; }

.logo { display: flex; align-items: center; gap: 16px; }
.logo-box {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 14px;
}
.logo-img { height: 38px; width: auto; display: block; }

.hd-right { justify-self: end; display: flex; align-items: center; gap: 22px; }
.hd-ico { color: var(--white); }
.hd-lang { color: var(--ink-soft); }

/* ---------------------------------------------------- menu overlay */

.nav-overlay {
  position: fixed; inset: 0; z-index: 800;
  background: var(--cream);
  display: flex; flex-direction: column;
  padding: 110px var(--pad) 40px;
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  transform: translateY(-3%);
  transition: opacity .5s ease, transform .5s ease, visibility .5s;
}
.nav-overlay .ov-nav { margin-top: auto; }
.nav-overlay .ov-foot { margin-bottom: auto; }
body.nav-open .nav-overlay { opacity: 1; visibility: visible; transform: none; }
body.nav-open { overflow: hidden; }

.ov-nav { display: flex; flex-direction: column; }
.ov-nav a {
  font-family: var(--knock-cond); font-weight: 400; text-transform: none;
  font-size: clamp(2rem, 5.2vh, 3.4rem);
  line-height: 1.25;
  border-bottom: 1px solid var(--line-soft);
  padding: 6px 0;
  display: flex; justify-content: space-between; align-items: center;
  transition: padding-left .3s, color .3s;
}
.ov-nav a::after { content: "→"; font-size: .55em; opacity: 0; transition: opacity .3s; }
.ov-nav a:hover, .ov-nav a.active { color: var(--accent); padding-left: 14px; }
.ov-nav a:hover::after, .ov-nav a.active::after { opacity: 1; }

.ov-foot {
  margin-top: 40px;
  display: flex; justify-content: space-between; gap: 30px;
  color: var(--ink-soft);
}

/* ---------------------------------------------------- hero encadré */

.hero-frame {
  position: relative;
  margin: 0 var(--pad) var(--pad);
  height: calc(100vh - 110px);
  min-height: 520px;
  overflow: hidden;
  background: var(--ink);
}
.hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: .82;
  transform: scale(1.06);
  transition: transform 2.4s ease, opacity 1.2s;
}
body.loaded .hero-img { transform: scale(1); }
.hero-frame::after {
  content: ""; position: absolute; inset: 0;
  /* voile vertical + halo sombre doux derrière le texte : la photo reste
     lisible sur les bords, le titre gagne un vrai contraste au centre */
  background:
    radial-gradient(ellipse 62% 52% at 50% 46%, rgba(10, 8, 5, .52), rgba(10, 8, 5, .18) 62%, rgba(10, 8, 5, 0) 78%),
    linear-gradient(180deg, rgba(10, 8, 5, .4), rgba(10, 8, 5, .22) 45%, rgba(10, 8, 5, .55));
}
/* serrure façon Gerax : la photo se découvre à travers un trou de
   serrure géant qui s'ouvre ensuite en plein cadre */
.keyhole-cover {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  pointer-events: none;
  transform-origin: 50% 42%;
  will-change: transform, opacity;
  transition: transform 2.2s cubic-bezier(.7, 0, .2, 1),
              opacity .7s 1.6s, visibility .7s 1.6s;
}
body.keyopen .keyhole-cover { transform: scale(9); opacity: 0; visibility: hidden; }

.hero-inner {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; color: var(--white);
  padding: 0 20px;
}
.hero-kicker {
  opacity: 0; transform: translateY(14px); transition: opacity .9s .5s, transform .9s .5s;
  text-shadow: 0 1px 18px rgba(10, 8, 5, .6);
}
.hero-title {
  font-size: clamp(3.4rem, 9vw, 7.6rem);
  line-height: .98;
  margin: 18px 0 44px;
  text-shadow: 0 2px 34px rgba(10, 8, 5, .55), 0 1px 8px rgba(10, 8, 5, .35);
  opacity: 0; transform: translateY(26px);
  transition: opacity 1.1s .7s, transform 1.1s .7s;
}
.hero-inner .btn-rect { opacity: 0; transform: translateY(14px); transition: opacity .9s 1.05s, transform .9s 1.05s, background .35s, color .35s; }
body.loaded .hero-kicker, body.loaded .hero-title, body.loaded .hero-inner .btn-rect {
  opacity: 1; transform: none;
}

.hero-play {
  position: absolute; z-index: 2;
  left: 50%; bottom: 42px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  color: var(--white);
}
.hero-play svg { width: 42px; height: 42px; transition: transform .4s; }
.hero-play:hover svg { transform: scale(1.12); }

/* ---------------------------------------------------- sections */

.section { padding: clamp(70px, 10vw, 130px) var(--pad); }
.section.narrow > * { max-width: 860px; margin-left: auto; margin-right: auto; }
.section.narrow h1 { margin-bottom: 28px; }

.intro { background: var(--cream-2); }
.lede {
  font-size: clamp(1.7rem, 3.4vw, 2.7rem);
  line-height: 1.28;
  max-width: 1050px;
}
.lede .w { display: inline-block; filter: blur(7px); opacity: .12; transition: filter .8s var(--d, 0s), opacity .8s var(--d, 0s); }
.lede.in .w { filter: blur(0); opacity: 1; }
.intro-note { margin-top: 46px; color: var(--ink-soft); }

/* stats */
.stats-sec { padding-top: 0; }
.stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.stats > div {
  padding: 40px 26px;
  text-align: center;
}
.stats > div + div { border-left: 1px solid var(--line-soft); }
.stats strong {
  display: block;
  font-family: "Knockout Cond", var(--serif); font-weight: 400;
  color: var(--accent);
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: 1;
  margin-bottom: 10px;
}
.stats span { color: var(--ink-soft); }

/* objets */
.obj-links { display: flex; gap: clamp(30px, 6vw, 90px); margin-bottom: clamp(40px, 6vw, 70px); }
.obj-links a {
  font-family: var(--sans); font-weight: 300; font-style: italic;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  display: flex; align-items: baseline; gap: 14px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
  transition: color .3s;
}
.obj-links a span { font-size: .6em; font-style: normal; transition: transform .3s; }
.obj-links a:hover { color: var(--accent); }
.obj-links a:hover span { transform: translateX(8px); }

/* ---------------------------------------------------- cartes biens */

/* Feedback 28/08 : maximum 3 biens par ligne, présentation plus aérée. */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(44px, 5vw, 64px) clamp(28px, 3vw, 44px);
  margin-bottom: 80px;
}
@media (max-width: 1024px) { .grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .grid { grid-template-columns: 1fr; } }

.card { display: block; }
.card-img {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--cream-2);
  margin-bottom: 18px;
}
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s ease, opacity .8s; }
.card:hover .card-img img { transform: scale(1.05); }

.badge {
  position: absolute; top: 0; left: 0; z-index: 2;
  padding: 8px 14px 7px;
  font-family: var(--knock);
  font-size: 11px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase;
  background: var(--cream); color: var(--ink);
}
.badge-statut { background: var(--ink); color: var(--cream); }
.badge-coeur { background: var(--accent); color: var(--cream); }
.badge.big { position: static; display: inline-block; margin-bottom: 14px; }

/* Filigranes officiels de la charte (C'est vendu ! / Sous compromis !) */
img.filigrane, .card-img img.filigrane {
  position: absolute; z-index: 2;
  top: 8px; right: 8px; left: auto; bottom: auto;
  width: clamp(84px, 34%, 130px);
  height: auto; object-fit: contain;
  transform: none;
  filter: drop-shadow(0 2px 8px rgba(23, 20, 15, .25));
}
.card:hover .card-img img.filigrane { transform: none; }

.card-price {
  font-family: var(--knock-cond); font-weight: 400;
  font-size: 1.55rem; line-height: 1.1;
  color: var(--accent);
  margin-bottom: 6px;
}
.card-title { font-size: 15px; font-weight: 500; margin-bottom: 3px; }
.card-city {
  font-size: 10.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 8px;
}
.card-meta { font-size: 13px; color: var(--ink-soft); border-top: 1px solid var(--line-soft); padding-top: 8px; }
.card-off { opacity: .55; }

/* ---------------------------------------------------- services */

.svc { border-top: 1px solid var(--line); }
.svc-row {
  display: grid;
  grid-template-columns: 90px 1.1fr 1.4fr auto;
  gap: 26px; align-items: start;
  padding: clamp(30px, 4vw, 52px) 0;
  border-bottom: 1px solid var(--line);
}
.svc-num { color: var(--accent); }
.svc-row h3 { margin-bottom: 0; }
.svc-list { list-style: none; }
.svc-list li {
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13.5px; color: var(--ink-soft);
}
.svc-list li:last-child { border-bottom: 0; }
.svc-more {
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 3px;
  transition: color .3s, border-color .3s;
  white-space: nowrap;
}
.svc-more:hover { color: var(--accent); border-color: var(--accent); }

/* bande contact */
.contact-band { text-align: center; background: var(--cream-2); }
.contact-band .eyebrow { justify-content: center; }
.contact-band .eyebrow::after { display: none; }

/* ---------------------------------------------------- listing + filtres */

.filters {
  display: flex; flex-wrap: wrap; gap: 12px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 18px 0;
  margin: 40px 0 18px;
}
.filters select {
  appearance: none;
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  background: transparent; color: var(--ink);
  border: 1px solid var(--line);
  padding: 12px 34px 12px 16px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M0 0l4.5 6L9 0z' fill='%2317140f'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.filters .btn-ghost { padding: 12px 20px; }
.count { color: var(--ink-soft); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 34px; }

.empty-state {
  border: 1px solid var(--line);
  padding: 60px 40px; text-align: center;
  max-width: 640px; margin: 60px auto;
}
.empty-state p { margin-bottom: 16px; }

/* ---------------------------------------------------- fiche bien */

.breadcrumb { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 34px; }
.breadcrumb a:hover { color: var(--accent); }

.fiche-grid {
  display: grid; grid-template-columns: 1.6fr 1fr;
  gap: clamp(30px, 4vw, 60px);
  align-items: start;
  margin-bottom: 70px;
}
.photo-main { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--cream-2); }
.photo-main img { width: 100%; height: 100%; object-fit: cover; transition: opacity .25s; }
.photo-thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 8px; }
.photo-thumbs img {
  aspect-ratio: 4 / 3; object-fit: cover; cursor: pointer;
  opacity: .55; transition: opacity .3s;
}
.photo-thumbs img:hover, .photo-thumbs img.sel { opacity: 1; }

.fiche-side { position: sticky; top: 110px; border: 1px solid var(--line); padding: clamp(24px, 3vw, 40px); }
.fiche-price { font-family: var(--knock-cond); font-weight: 400; font-size: 2.6rem; color: var(--accent); margin-bottom: 8px; }
.fiche-side h1 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-bottom: 8px; }
.fiche-city { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 12px; }
.fiche-hono { font-size: 12px; color: var(--ink-soft); margin-bottom: 20px; }
.fiche-tel { margin-top: 18px; font-size: 13px; color: var(--ink-soft); }
.fiche-tel a { border-bottom: 1px solid var(--line); }
.fiche-tel a:hover { color: var(--accent); }

.fiche-desc { max-width: 900px; }
.fiche-desc h3 { margin-top: 54px; padding-top: 26px; border-top: 1px solid var(--line); }
.fiche-desc p { white-space: pre-line; color: var(--ink-soft); }

.carac { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 30px; }
.carac > div { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.carac dt { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.carac dd { font-weight: 500; text-align: right; }

.feats { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.feats li {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid var(--line); padding: 8px 16px;
}

/* DPE */
.dpe-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }
.dpe-box h4 { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 14px; color: var(--ink-soft); }
.dpe-scale div {
  color: #fff; font-size: 12px; font-weight: 600;
  padding: 4px 10px; margin-bottom: 3px;
  opacity: .35;
}
.dpe-scale div.on { opacity: 1; outline: 1px solid var(--ink); outline-offset: 2px; }
.dpe-ges div { color: var(--ink); }
.dpe-val { margin-top: 10px; font-weight: 600; }
.dpe-note { font-size: 13px; color: var(--ink-soft); margin-top: 16px; }

/* ---------------------------------------------------- formulaires */

.lead-form h3 { margin-bottom: 16px; }
.lead-form input, .lead-form textarea, .lead-form select {
  width: 100%;
  font-family: var(--sans); font-size: 14px;
  background: transparent; color: var(--ink);
  border: 0; border-bottom: 1px solid var(--line);
  padding: 13px 2px;
  margin-bottom: 6px;
  transition: border-color .3s;
}
.lead-form input:focus, .lead-form textarea:focus, .lead-form select:focus {
  outline: none; border-color: var(--accent);
}
.lead-form ::placeholder { color: var(--ink-soft); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.lead-form button { margin-top: 22px; width: 100%; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.form-ok { margin-top: 16px; color: var(--accent-deep); font-weight: 500; }
.form-page { max-width: 760px; margin-top: 40px; }

.contact-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(30px, 5vw, 80px); margin-top: 40px; }
.agence-info { margin: 40px 0; }

.steps { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--line); margin: 40px 0 50px; }
.steps > div { padding: 30px 26px 30px 0; border-bottom: 1px solid var(--line); }
.steps strong {
  display: block;
  font-family: var(--knock-cond); text-transform: none; font-weight: 400; font-size: 1.5rem;
  margin-bottom: 8px;
}
.steps p { color: var(--ink-soft); font-size: 13.5px; }

.legal h3 { margin-top: 34px; }
.legal p { color: var(--ink-soft); margin-bottom: 12px; }

/* ---------------------------------------------------- footer */

/* Refonte 28/08 : footer clair rose pâle, orange en accent.
   Retour 09/09 : toute la typo du footer passe en Playfair Display. */
.site-footer {
  background: var(--blush-soft);
  color: var(--ink);
  border-top: 3px solid var(--accent);
  font-family: var(--display);
}
.site-footer .micro, .site-footer a { font-family: var(--display); }
.foot-slogan {
  text-align: center;
  padding: clamp(14px, 2vw, 22px) var(--pad) 0;
}
.foot-quote {
  font-family: var(--display); font-style: italic;
  font-size: clamp(1.05rem, 1.9vw, 1.35rem);
  color: var(--accent-deep);
  max-width: 34ch; margin: 0 auto;
}
.foot-top {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.1fr;
  gap: 24px;
  padding: clamp(16px, 2.2vw, 26px) var(--pad);
}
.foot-logo { display: inline-block; margin-bottom: 10px; padding: 0; }
.foot-logo .logo-img { height: 36px; }
.foot-brand { position: relative; }
.foot-brand .micro, .foot-info .micro { color: var(--ink-soft); }
.foot-timbre { width: 44px; margin-top: 8px; opacity: .9; }
.foot-col-t {
  color: var(--accent-deep) !important;
  margin-bottom: 8px;
}
.foot-info .micro + .micro { margin-top: 9px; }
.foot-links { display: flex; flex-direction: column; align-items: flex-start; }
.foot-links a {
  font-size: 13.5px; font-weight: 500;
  padding: 3px 0;
  color: var(--ink);
  transition: color .3s, padding-left .3s;
}
.foot-links a:hover, .foot-links a.active { color: var(--accent); padding-left: 8px; }
.foot-info a { color: var(--ink); transition: color .3s; }
.foot-info a:hover { color: var(--accent); }
.foot-rdv { color: var(--accent-deep) !important; font-weight: 600; }
.foot-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px;
  padding: 10px var(--pad);
  border-top: 1px solid rgba(201, 74, 5, .18);
  font-size: 12px;
  color: var(--ink-soft);
}
.foot-legal a { margin-left: 22px; transition: color .3s; }
.foot-legal a:first-child { margin-left: 0; }
.foot-legal a:hover { color: var(--accent); }

/* ---------------------------------------------------- révélations */

.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform .9s ease; }
.reveal.in { opacity: 1; transform: none; }

.top-btn {
  position: fixed; right: 26px; bottom: 26px; z-index: 1090;
  width: 46px; height: 46px;
  border: 1px solid var(--line); background: var(--cream); color: var(--ink);
  font-size: 16px; cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .4s, transform .4s, visibility .4s, background .3s, color .3s;
}
.top-btn.show { opacity: 1; visibility: visible; transform: none; }
.top-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--white); }

/* ---------------------------------------------------- responsive */

@media (max-width: 1360px) {
  .hd-nav { display: none; }
}

@media (max-width: 980px) {
  .svc-row { grid-template-columns: 60px 1fr; }
  .svc-row .svc-list { grid-column: 2; }
  .svc-row .svc-more { grid-column: 2; justify-self: start; }
  .fiche-grid, .contact-grid { grid-template-columns: 1fr; }
  .fiche-side { position: static; }
  .foot-top { grid-template-columns: 1fr 1fr; gap: 34px; }
}

@media (max-width: 720px) {
  .hd-lang { display: none; }
  .btn-rect, .btn { padding: 14px 22px; }
  .hero-frame { height: 78vh; margin: 0 12px 12px; }
  .stats { grid-template-columns: 1fr; }
  .stats > div + div { border-left: 0; border-top: 1px solid var(--line-soft); }
  .steps, .form-row { grid-template-columns: 1fr; }
  .obj-links { flex-direction: column; gap: 18px; }
  .photo-thumbs { grid-template-columns: repeat(4, 1fr); }
  .ov-foot { flex-direction: column; gap: 14px; }
  .foot-top { grid-template-columns: 1fr; }
  .foot-bottom { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .hero-kicker, .hero-title, .hero-inner .btn-rect { opacity: 1 !important; transform: none !important; }
  .lede .w { filter: none !important; opacity: 1 !important; }
  .loader { display: none; }
  .keyhole-cover { display: none; }
}

/* ====================================================================
   Cahier des charges 2026 — nouveaux composants
   ==================================================================== */

/* ------- bouton WhatsApp flottant ------- */
.wa-btn {
  position: fixed; right: 22px; bottom: 22px; z-index: 1100;
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--white);
  box-shadow: 0 8px 24px rgba(23, 20, 15, .22);
  transition: transform .3s, background .3s;
}
.wa-btn svg { width: 26px; height: 26px; display: block; }
.wa-btn:hover { transform: translateY(-3px) scale(1.05); background: var(--accent-deep); }

/* ------- icônes header (favoris / comparateur) ------- */
.hd-ico {
  position: relative; display: inline-flex; align-items: center;
  color: var(--ink); opacity: .75; transition: opacity .3s, color .3s;
}
.hd-ico:hover { opacity: 1; color: var(--accent); }
.hd-ico svg { width: 19px; height: 19px; }
.hd-count {
  position: absolute; top: -7px; right: -9px;
  min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 8px; background: var(--accent); color: var(--white);
  font-family: var(--sans); font-size: 9.5px; font-weight: 600;
  line-height: 15px; text-align: center;
}

/* ------- cœur favoris sur les cartes ------- */
.card-img { position: relative; }
.fav-btn {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 36px; height: 36px; border-radius: 50%; border: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .88); color: var(--ink);
  cursor: pointer; transition: background .25s, color .25s, transform .25s;
}
.fav-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.fav-btn:hover { transform: scale(1.1); color: var(--accent); }
.fav-btn.active { background: var(--accent); color: var(--white); }
.fav-btn.active svg { fill: currentColor; }

/* ------- clic rapide « comparer » sur les cartes ------- */
.card-cmp {
  position: absolute; top: 12px; right: 56px; z-index: 3;
  width: 36px; height: 36px; border-radius: 50%; border: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .88); color: var(--ink);
  cursor: pointer; transition: background .25s, color .25s, transform .25s;
}
.card-cmp svg { width: 17px; height: 17px; }
.card-cmp:hover { transform: scale(1.1); color: var(--accent); }
.card-cmp.active { background: var(--accent); color: var(--white); }

/* pastille flottante vers le comparateur (dès 2 biens cochés) */
.cmp-bar {
  position: fixed; right: 20px; bottom: 20px; z-index: 700;
  background: var(--accent-deep); color: var(--white); text-decoration: none;
  border-radius: 999px; padding: 13px 26px;
  font-family: var(--knock-cond); text-transform: none;
  letter-spacing: .05em; font-size: 15px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  transition: background .25s, transform .25s;
}
.cmp-bar:hover { background: var(--accent); transform: translateY(-2px); }

/* ------- actions de la fiche bien ------- */
.fiche-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 6px; }
.fiche-actions .labeled {
  position: static; width: auto; height: auto; border-radius: 999px;
  padding: 9px 16px; display: inline-flex; gap: 8px; align-items: center;
  border: 1px solid var(--line); background: transparent; color: var(--ink);
  font-family: var(--sans); font-size: 12px; letter-spacing: .04em;
  cursor: pointer; transition: background .25s, color .25s, border-color .25s;
}
.fiche-actions .labeled svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.fiche-actions .labeled:hover,
.fiche-actions .labeled.active { background: var(--accent); border-color: var(--accent); color: var(--white); }
.fiche-actions .labeled.active svg { fill: currentColor; }

/* ------- toast ------- */
.toast {
  position: fixed; left: 50%; bottom: 30px; transform: translate(-50%, 16px);
  z-index: 90; background: var(--ink); color: var(--cream);
  padding: 12px 22px; border-radius: 999px;
  font-family: var(--sans); font-size: 13px;
  opacity: 0; visibility: hidden; transition: opacity .35s, transform .35s, visibility .35s;
  max-width: 88vw; text-align: center;
}
.toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* ------- cartes Leaflet ------- */
.map-bien {
  width: 100%; height: 380px; border-radius: 4px; overflow: hidden;
  border: 1px solid var(--line-soft); background: var(--blush);
}
.map-note { margin-top: 10px; }
.prox { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 20px; }
.prox li { font-size: 13.5px; color: var(--ink-soft); }
.prox-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.prox-chip {
  font: inherit; font-size: 13px; font-weight: 600;
  background: #fff; color: var(--accent);
  border: 2px solid var(--accent); border-radius: 999px;
  padding: 8px 16px; cursor: pointer;
  transition: background .2s, color .2s;
}
.prox-chip:hover, .prox-chip.on { background: var(--accent); color: #fff; }
.prox-chip.busy { opacity: .55; cursor: wait; }
.prox-hint { margin-top: 10px; color: var(--ink-soft); }
/* Retour cliente 09/2026 : carte en noir et blanc (les repères restent orange). */
.map-bien .leaflet-tile-pane { filter: grayscale(1) contrast(1.04); }

.carte-main { padding-top: 20px; }
.carte-head { padding-bottom: 26px; }
.carte-note { max-width: 560px; color: var(--ink-soft); }
.map-monopoly {
  width: 100%; height: 70vh; min-height: 440px;
  border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
  background: var(--blush);
}
.carte-legende { padding: 14px 0 40px; color: var(--ink-soft); }
.map-house { background: none; border: 0; filter: drop-shadow(0 3px 4px rgba(23,20,15,.3)); }
.map-pop { display: block; text-decoration: none; color: var(--ink); font-family: var(--sans); width: 200px; }
.map-pop img { width: 100%; height: 110px; object-fit: cover; border-radius: 3px; margin-bottom: 8px; }
.map-pop strong { display: block; font-size: 13px; line-height: 1.3; }
.map-pop span { display: block; font-size: 12px; color: var(--ink-soft); margin-top: 3px; }
.map-pop em { display: block; font-style: normal; font-size: 11.5px; color: var(--accent); margin-top: 6px; }
.leaflet-popup-content-wrapper { border-radius: 6px; }

/* zones par commune (carte Monopoly) */
.map-zone-badge { background: none; border: 0; overflow: visible; }
.map-zone-badge .zb {
  position: absolute; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent); color: var(--white);
  font-family: var(--knock); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; white-space: nowrap;
  padding: 6px 12px; border-radius: 999px;
  box-shadow: 0 3px 8px rgba(23,20,15,.25);
  cursor: pointer;
}
.map-zone-pop { font-family: var(--sans); color: var(--ink); width: 230px; }
.mzp-title { display: block; font-size: 14px; }
.mzp-count { display: block; font-size: 11.5px; color: var(--ink-soft); margin: 2px 0 8px; }
.mzp-list { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.leaflet-container a.mzp-item {
  display: flex; gap: 10px; align-items: center;
  text-decoration: none; color: var(--ink);
  border: 1px solid var(--line-soft); border-radius: 4px; padding: 6px;
  transition: border-color .2s;
}
.mzp-item:hover { border-color: var(--accent); }
.mzp-item img { width: 58px; height: 44px; object-fit: cover; border-radius: 3px; flex: none; }
.mzp-item span { min-width: 0; }
.mzp-item strong { display: block; font-size: 12px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mzp-item em { font-style: normal; font-size: 11.5px; color: var(--accent); }

/* ------- section « biens vendus » ------- */
.vendus { border-top: 1px solid var(--line-soft); margin-top: 60px; padding-top: 50px; }
.vendus .card-off { opacity: .78; }
.vendus .card-off:hover { opacity: 1; }
.vendus-note { max-width: 560px; color: var(--ink-soft); margin-bottom: 30px; }
.vendus-note a { color: var(--accent); }

/* ------- espace propriétaire (louer) ------- */
.proprio { border-top: 1px solid var(--line-soft); }
.proprio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 28px; }
.proprio-grid > div { border: 1px solid var(--line-soft); padding: 30px; background: var(--white); }
.proprio-grid h3 { font-family: var(--knock-cond); text-transform: none; font-size: 24px; font-weight: 500; margin: 0 0 12px; }
.proprio-grid p { color: var(--ink-soft); font-size: 14.5px; }
.proprio-grid .btn, .proprio-grid .btn-rect { margin-top: 16px; }

/* ------- estimation : choix de RDV + Calendly ------- */
.rdv-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 26px 0; }
.rdv-opt { border: 1px solid var(--line); padding: 26px; background: var(--white); }
.rdv-opt h3 { font-family: var(--knock-cond); text-transform: none; font-size: 22px; font-weight: 500; margin: 0 0 8px; }
.rdv-opt p { color: var(--ink-soft); font-size: 14px; margin: 0; }
.calendly-block {
  border: 1px dashed var(--line); background: var(--blush);
  padding: 36px; text-align: center; margin: 26px 0;
  color: var(--ink-soft); font-size: 14px;
}

/* ------- équipe ------- */
.histoire-voila { max-width: 820px; }
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 34px; }
.team-card { border: 1px solid var(--line-soft); background: var(--white); padding: 28px; text-align: center; }
.team-photo {
  width: 130px; height: 130px; margin: 0 auto 18px; border-radius: 50%;
  background: var(--blush); display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.team-photo img, .team-ph-ico { width: 56px; height: 56px; object-fit: contain; opacity: .8; }
.team-photo img.real { width: 100%; height: 100%; object-fit: cover; opacity: 1; }
.team-card h3 { font-family: var(--knock-cond); text-transform: none; font-size: 24px; font-weight: 500; margin: 0; }
.team-role { color: var(--accent); margin: 4px 0 14px; }
.team-traits { list-style: none; margin: 0 0 16px; padding: 0; font-size: 13.5px; color: var(--ink-soft); }
.team-traits li { padding: 4px 0; border-top: 1px solid var(--line-soft); }
.team-traits li:first-child { border-top: 0; }
.team-playlist {
  border: 1px solid var(--line); background: none; border-radius: 999px;
  padding: 8px 18px; font-family: var(--sans); font-size: 12px; cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
}
.team-playlist:hover { background: var(--accent); border-color: var(--accent); color: var(--white); }
.vie { margin-top: 60px; }
.vie-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 24px; }
.vie-tile {
  aspect-ratio: 4 / 3; background: var(--blush); border: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: center;
}
.vie-tile img { width: 48px; height: 48px; object-fit: contain; opacity: .7; }
.recrutement { margin-top: 60px; max-width: 720px; }
.file-label {
  display: block; border: 1px dashed var(--line); padding: 18px;
  text-align: center; cursor: pointer; font-size: 13.5px; color: var(--ink-soft);
  transition: border-color .25s, background .25s; margin: 14px 0;
}
.file-label:hover { border-color: var(--accent); background: var(--blush); }
.file-label input { display: none; }

/* ------- investir ------- */
.invest-lead { max-width: 820px; }
.form-inline { margin-top: 22px; }
.invest-grid-sec { margin-top: 50px; }
.avant-apres { margin-top: 60px; }
.aa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 24px; }
.aa-tile { border: 1px solid var(--line-soft); background: var(--white); }
.aa-ph {
  aspect-ratio: 16 / 9; background: var(--blush);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-soft); font-family: var(--knock); letter-spacing: .1em;
  text-transform: uppercase; font-size: 13px;
}
.aa-tile p { padding: 14px 18px; margin: 0; font-size: 13.5px; color: var(--ink-soft); }
.artisans { margin-top: 60px; }
.artisans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 24px; }
.artisan {
  border: 1px solid var(--line-soft); background: var(--white); padding: 22px;
  display: flex; align-items: center; gap: 14px;
}
.artisan img { width: 30px; height: 30px; opacity: .75; }
.artisan span { font-family: var(--knock); letter-spacing: .08em; text-transform: uppercase; font-size: 13px; }

/* ------- magazine ------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 8px; }
.chip {
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 16px;
  font-family: var(--sans); font-size: 12.5px; color: var(--ink-soft);
}
.chip-o { border-color: var(--accent); color: var(--accent); }
/* Retour 09/09 : filtres city guide « orange peps » (accueil) */
.chip-peps {
  background: var(--accent); border-color: var(--accent);
  color: var(--white); font-weight: 600; cursor: pointer;
  transition: background .25s, transform .25s;
}
.chip-peps:hover { background: var(--accent-deep); transform: translateY(-2px); }
.home-guide { text-align: left; }
.home-guide .home-h2 { text-transform: uppercase; }
.guide-h3-home {
  font-family: var(--display); font-weight: 700; color: var(--ink);
  font-size: clamp(18px, 2vw, 26px);
  margin: clamp(10px, 1.4vw, 18px) 0 6px;
}
.home-guide .chips { justify-content: flex-start; }
/* Carte en noir et blanc (fond de plan désaturé, marqueurs conservés) */
.map-nb .leaflet-tile-pane { filter: grayscale(1) contrast(1.05); }
/* Retour 11/09 : carte du city guide accentuée dans une seule couleur (orange Voilà) */
.map-mono .leaflet-tile-pane { filter: grayscale(1) contrast(1.05); }
.map-mono .poi-dot { box-shadow: 0 1px 6px rgba(0,0,0,.5); }
.mag-grid-sec { margin-top: 40px; }
.mag-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 24px; }
.mag-card { border: 1px solid var(--line-soft); background: var(--white); display: block; color: var(--ink); text-decoration: none; }
.mag-ph {
  aspect-ratio: 4 / 3; background: var(--blush);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.mag-ph img { width: 90px; height: 90px; object-fit: contain; opacity: .85; }
.mag-card h3 { font-family: var(--knock-cond); text-transform: none; font-size: 21px; font-weight: 500; margin: 16px 18px 6px; }
.mag-card p { margin: 0 18px 18px; font-size: 13.5px; color: var(--ink-soft); }
.mag-soon { margin-top: 18px; }
.city-guide { margin-top: 60px; }
.newsletter {
  margin-top: 60px; background: var(--blush); border: 1px solid var(--line-soft);
  padding: 44px; text-align: center;
}
.newsletter h2 { font-family: var(--knock-cond); text-transform: none; font-weight: 500; font-size: clamp(26px, 3vw, 36px); margin: 0 0 8px; }
.newsletter p { color: var(--ink-soft); max-width: 480px; margin: 0 auto 20px; }
.newsletter form { display: flex; gap: 10px; max-width: 480px; margin: 0 auto; }
.newsletter input[type="email"] {
  flex: 1; border: 1px solid var(--line); background: var(--white);
  padding: 13px 16px; font-family: var(--sans); font-size: 14px;
}

/* ------- off market ------- */
.offmarket .story-intro { color: var(--ink-soft); }

/* ------- histoires / témoignages ------- */
.story-quote {
  border-left: 2px solid var(--accent); padding: 6px 0 6px 24px;
  font-family: var(--knock-cond); text-transform: none; font-size: clamp(19px, 2vw, 24px); font-style: italic;
  color: var(--ink-soft); max-width: 640px; margin: 20px 0 0;
}
.story-quote footer { font-family: var(--sans); font-style: normal; font-size: 12.5px; margin-top: 10px; color: var(--ink-soft); }

/* ------- coups de cœur ------- */
.coeur-note { color: var(--ink-soft); max-width: 560px; }
.badge-coeur { background: var(--accent); color: var(--white); }

/* ------- comparateur ------- */
.cmp-add {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  background: var(--blush-soft); border-radius: 12px;
  padding: 16px 18px; margin: 18px 0 24px;
}
.cmp-add label { font-family: var(--sans); font-size: 14px; color: var(--accent-deep); font-weight: 600; }
.cmp-add select {
  flex: 1 1 260px; max-width: 480px;
  background: var(--white); color: var(--ink);
  border: 1px solid rgba(201,74,5,.25); border-radius: 999px;
  padding: 11px 16px; font-family: var(--sans); font-size: 14px;
}
.cmp-scroll { overflow-x: auto; }
.cmp-table { border-collapse: collapse; width: 100%; min-width: 640px; font-family: var(--sans); font-size: 13.5px; }
.cmp-table th, .cmp-table td { border: 1px solid var(--line-soft); padding: 12px 14px; text-align: left; vertical-align: top; }
.cmp-table tbody th { font-family: var(--knock); letter-spacing: .06em; text-transform: uppercase; font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; }
.cmp-head { min-width: 180px; }
.cmp-head a { color: var(--ink); text-decoration: none; display: block; }
.cmp-head img { width: 100%; height: 110px; object-fit: cover; margin-bottom: 8px; }
.cmp-head span { font-family: var(--knock-cond); text-transform: none; font-size: 16px; display: block; }
.cmp-remove {
  margin-top: 10px; border: 1px solid var(--line); background: none; border-radius: 999px;
  padding: 5px 12px; font-size: 11px; cursor: pointer; font-family: var(--sans);
  transition: background .25s, color .25s, border-color .25s;
}
.cmp-remove:hover { background: var(--ink); border-color: var(--ink); color: var(--cream); }

/* ------- pôles services (vendre) ------- */
.poles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 28px; }
.poles > div { border: 1px solid var(--line-soft); background: var(--white); padding: 26px; }
.poles h3 { font-family: var(--knock-cond); text-transform: none; font-size: 21px; font-weight: 500; margin: 0 0 8px; }
.poles p { margin: 0; font-size: 13.5px; color: var(--ink-soft); }

/* ------- responsive nouveaux composants ------- */
@media (max-width: 980px) {
  .team-grid, .artisans-grid, .mag-grid { grid-template-columns: 1fr 1fr; }
  .vie-grid { grid-template-columns: repeat(2, 1fr); }
  .proprio-grid, .rdv-choice, .aa-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .team-grid, .artisans-grid, .mag-grid, .poles { grid-template-columns: 1fr; }
  .newsletter { padding: 30px 20px; }
  .newsletter form { flex-direction: column; }
  .wa-btn { right: 14px; bottom: 14px; width: 48px; height: 48px; }
  .fiche-actions .labeled { font-size: 11px; padding: 8px 13px; }
}

/* ---------------------------------------------------------------- */
/* La machine à histoires                                            */
.mh-main h1 { margin-bottom: 18px; }
.mh-lede { max-width: 640px; margin-bottom: 54px; }

.mh { max-width: 880px; }

.mh-progress {
  display: flex; align-items: center; gap: 18px;
  margin-bottom: 42px; color: var(--ink-soft);
}
.mh-bar {
  flex: 1; height: 2px; background: var(--line-soft);
  position: relative; overflow: hidden;
}
.mh-bar i {
  position: absolute; inset: 0 auto 0 0; width: 0;
  background: var(--accent); transition: width .5s cubic-bezier(.6,0,.2,1);
}

.mh-q-kicker { color: var(--accent); margin-bottom: 10px; }
.mh-q-title {
  font-family: var(--knock-cond); text-transform: none; font-weight: 400; font-size: clamp(26px, 3.4vw, 40px);
  margin-bottom: 30px;
}
.mh-q.mh-in, .mh-results.mh-in { animation: mh-rise .55s cubic-bezier(.2,.7,.2,1) both; }
@keyframes mh-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

.mh-opts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}
.mh-opt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 22px 20px 20px; text-align: left; cursor: pointer;
  background: var(--white); border: 1px solid var(--line-soft); border-radius: 6px;
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.mh-opt:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 10px 24px rgba(23,20,15,.08); }
.mh-opt.sel { border-color: var(--accent); background: var(--blush); }
.mh-opt-ico { width: 34px; height: 34px; color: var(--accent); }
.mh-opt-ico svg { width: 100%; height: 100%; }
.mh-opt-lbl {
  font-family: var(--knock); font-size: 12.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink);
}
.mh-opt-sub { font-family: var(--sans); font-style: italic; font-size: 15.5px; color: var(--ink-soft); }

/* le papier du récit */
.mh-story { margin-top: 10px; }
.mh-paper {
  position: relative; background: var(--blush);
  border: 1px solid rgba(234, 91, 12, .18); border-radius: 4px;
  padding: clamp(30px, 5vw, 60px) clamp(24px, 6vw, 76px);
  box-shadow: 0 18px 44px rgba(23,20,15,.10);
  background-image: repeating-linear-gradient(0deg, transparent 0 34px, rgba(234,91,12,.05) 34px 35px);
}
.mh-paper::before, .mh-paper::after {
  content: ""; position: absolute; top: -10px; width: 74px; height: 22px;
  background: rgba(234, 91, 12, .28); transform: rotate(-3deg);
}
.mh-paper::before { left: 8%; }
.mh-paper::after { right: 8%; transform: rotate(2.5deg); }
.mh-paper-head {
  display: block; color: var(--accent); margin-bottom: 26px;
  letter-spacing: .22em;
}
.mh-text {
  font-family: var(--sans); font-style: italic; font-weight: 400;
  font-size: clamp(20px, 2.6vw, 29px); line-height: 1.55; color: var(--ink);
  min-height: 4.6em;
}
.mh-caret {
  display: inline-block; width: 2px; height: 1em; margin-left: 2px;
  background: var(--accent); vertical-align: -0.15em;
  animation: mh-blink 1s steps(1) infinite;
}
@keyframes mh-blink { 50% { opacity: 0; } }
.mh-sign {
  display: block; margin-top: 28px; text-align: right;
  font-family: var(--sans); font-style: italic; font-size: 26px; color: var(--accent);
}

.mh-results { margin-top: 70px; }
.mh-res-title { font-family: var(--knock-cond); text-transform: none; font-weight: 400; font-size: clamp(24px, 3vw, 36px); margin: 8px 0 10px; }
.mh-results .grid { margin-top: 28px; }
.mh-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
#mh-restart { cursor: pointer; }

/* teaser accueil */
.mh-teaser-card {
  position: relative; overflow: hidden;
  background: var(--blush); border-radius: 6px;
  padding: clamp(36px, 6vw, 72px);
  text-align: center;
}
.mh-teaser-card h2 { margin: 10px 0 16px; }
.mh-teaser-txt {
  font-family: var(--sans); font-style: italic; font-size: clamp(17px, 2vw, 21px);
  color: var(--ink-soft); max-width: 480px; margin: 0 auto 28px;
}
.mh-teaser-key {
  position: absolute; right: 6%; bottom: -8px;
  font-size: 90px; color: rgba(234, 91, 12, .14);
  pointer-events: none; user-select: none;
}
@media (max-width: 640px) {
  .mh-opts { grid-template-columns: 1fr 1fr; }
  .mh-opt { padding: 16px 14px; }
}
.mh [hidden] { display: none !important; }

/* ---------------------------------------------------- simulateur de prix */

.simu {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: clamp(26px, 4vw, 46px);
  margin-top: 46px;
}
.simu .form-row { margin-bottom: 4px; }
.simu-field { display: block; margin-bottom: 22px; }
.simu-field .micro { display: block; color: var(--ink-soft); margin-bottom: 6px; }
.simu-field input, .simu-field select {
  width: 100%;
  font-family: var(--sans); font-size: 15px;
  background: transparent; color: var(--ink);
  border: 0; border-bottom: 1px solid var(--line);
  padding: 11px 2px;
  transition: border-color .3s;
  border-radius: 0;
  appearance: none; -webkit-appearance: none;
}
.simu-field select {
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2317140f' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding-right: 24px;
}
.simu-field input:focus, .simu-field select:focus { outline: none; border-color: var(--accent); }
.simu-field ::placeholder {
  color: var(--ink-soft);
  font-family: var(--knock);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
}
.simu button { margin-top: 10px; }

.simu-result {
  position: relative;
  background: var(--blush);
  border-radius: 6px;
  padding: clamp(30px, 5vw, 56px);
  margin-top: 34px;
  text-align: center;
}
.simu-result[hidden] { display: none !important; }
.simu-in { animation: mh-rise .7s cubic-bezier(.2, .7, .2, 1) both; }
.simu-res-kicker { color: var(--accent-deep); margin-bottom: 14px; }
.simu-fourchette {
  font-family: var(--knock-cond); text-transform: none; font-weight: 400;
  font-size: clamp(30px, 5.4vw, 54px);
  line-height: 1.1;
  color: var(--ink);
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
  gap: 6px 16px;
  margin: 0 0 14px;
}
.simu-fourchette #simu-bas, .simu-fourchette #simu-haut { white-space: nowrap; }
.simu-sep {
  font-style: italic;
  font-size: .5em;
  color: var(--accent);
}
.simu-detail { color: var(--ink-soft); margin-bottom: 18px; }
.simu-note {
  font-family: var(--sans); font-style: italic;
  font-size: 15.5px; color: var(--ink-soft);
  max-width: 520px; margin: 0 auto;
}
.simu-cta {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 14px; margin-top: 28px;
}
.simu-sep-line {
  border-top: 1px solid var(--line);
  margin: clamp(56px, 8vw, 90px) 0 0;
  scroll-margin-top: 110px;
}
.simu-h2 { margin: 44px 0 14px; }

/* promesse 2 minutes */
.simu-chrono {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 22px;
  padding: 11px 20px 10px;
  background: var(--blush); border-radius: 100px;
  font-family: var(--knock);
  font-size: 11.5px; font-weight: 400;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft);
}
.simu-chrono strong { color: var(--accent-deep); font-weight: 400; }
.simu-chrono-ico { display: inline-flex; width: 18px; height: 18px; color: var(--accent); }
.simu-chrono-ico svg { width: 100%; height: 100%; }

/* écran de chargement */
.simu-load {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: clamp(36px, 6vw, 64px);
  margin-top: 34px;
  text-align: center;
}
.simu-load[hidden] { display: none !important; }
.simu-load-kicker { color: var(--accent-deep); margin-bottom: 16px; }
.simu-load-msg {
  font-family: var(--sans); font-style: italic;
  font-size: clamp(18px, 2.4vw, 24px);
  color: var(--ink);
  min-height: 1.5em;
  margin-bottom: 26px;
  transition: opacity .3s;
}
.simu-load-bar {
  height: 4px; border-radius: 4px;
  background: var(--line-soft);
  max-width: 420px; margin: 0 auto;
  overflow: hidden;
}
.simu-load-bar i {
  display: block; height: 100%; width: 0;
  background: var(--accent);
  border-radius: 4px;
  transition: width .12s linear;
}
.simu-load-pct { color: var(--ink-soft); margin-top: 12px; }

/* récapitulatif */
.simu-recap {
  list-style: none;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px;
  margin: 0 0 30px; padding: 0;
}
.simu-recap li {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: 100px;
  padding: 8px 18px;
  display: inline-flex; align-items: baseline; gap: 8px;
  font-size: 14px;
}
.simu-recap li .micro { color: var(--ink-soft); font-size: 10.5px; }
.simu-recap li strong {
  font-family: var(--knock);
  font-size: 12.5px; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink);
}

/* estimation floutée / défloutée */
.simu-price { position: relative; padding: 6px 0 2px; }
.simu-locked .simu-fourchette,
.simu-locked .simu-detail {
  filter: blur(14px);
  user-select: none; pointer-events: none;
}
.simu-unblur .simu-fourchette,
.simu-unblur .simu-detail {
  animation: simu-focus 1.1s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes simu-focus {
  from { filter: blur(14px); opacity: .6; }
  to { filter: blur(0); opacity: 1; }
}
.simu-lock-badge {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink); color: var(--cream);
  border-radius: 100px;
  padding: 9px 20px;
  font-family: var(--knock, var(--sans));
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  white-space: nowrap;
}
.simu-lock-badge[hidden] { display: none !important; }
.simu-lock-badge svg { width: 14px; height: 14px; }

/* formulaire de déverrouillage */
.simu-unlock {
  max-width: 520px;
  margin: 26px auto 0;
  padding-top: 26px;
  border-top: 1px solid rgba(23, 20, 15, .08);
  text-align: left;
}
.simu-unlock[hidden] { display: none !important; }
.simu-unlock-txt {
  font-family: var(--sans); font-style: italic;
  font-size: 17px; color: var(--ink);
  text-align: center;
  margin-bottom: 22px;
}
.simu-consent {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 12.5px; color: var(--ink-soft);
  margin: 4px 0 18px;
  cursor: pointer;
}
.simu-consent input {
  margin-top: 2px;
  width: 15px; height: 15px; flex: none;
  accent-color: var(--accent);
  cursor: pointer;
}
.simu-consent a { color: var(--accent-deep); text-decoration: underline; }
.simu-unlock button { width: 100%; }

.simu-after[hidden] { display: none !important; }
.simu-after { margin-top: 26px; }
.simu-again {
  display: inline-block; margin-top: 22px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--knock);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: underline; text-underline-offset: 4px;
}
.simu-again:hover { color: var(--accent-deep); }

@media (max-width: 640px) {
  .simu { padding: 24px 18px; }
  .simu-cta .btn-rect { width: 100%; text-align: center; }
  .simu-recap li { padding: 7px 14px; font-size: 13px; }
}

/* ================================================================
   Wireframe 2026 — curseur orange, carrousels, éditorial, équipe
   ================================================================ */

/* --- Le curseur, c'est notre orange --- */
html, body {
  cursor: url("brand/cursor-orange.svg") 4 6, auto;
}
a, button, select, .btn, .btn-rect, .btn-ghost, [role="button"], .chip,
label.simu-consent, .fav-btn, .cmp-btn, .share-btn, .burger, .team-playlist,
input[type="checkbox"], input[type="submit"], .card, .hero-play, summary {
  cursor: url("brand/cursor-orange-point.svg") 6 8, pointer;
}
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], textarea { cursor: text; }

/* --- Hero « coup de boost » --- */
.hero-sub {
  font-family: var(--sans);
  font-style: italic; font-weight: 300;
  font-size: clamp(22px, 3.2vw, 34px);
  color: #fff; margin: 6px 0 22px;
  text-shadow: 0 2px 24px rgba(10,8,5,.55);
}
.hero-video-soon {
  position: absolute; left: 96px; bottom: 34px; z-index: 3;
  color: rgba(255,255,255,.85);
  letter-spacing: .14em; text-transform: uppercase; font-size: 10.5px;
  text-shadow: 0 1px 12px rgba(10,8,5,.6);
}

/* --- Carrousel horizontal (coups de cœur, équipe) --- */
.carousel {
  display: flex; gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 6px 4px 22px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--accent) transparent;
}
.carousel > * { flex: 0 0 min(320px, 78vw); scroll-snap-align: start; }
.carousel::-webkit-scrollbar { height: 5px; }
.carousel::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 3px; }
.carousel::-webkit-scrollbar-track { background: var(--line-soft); }

/* --- Négociateur sur les cartes / fiches --- */
.card-nego {
  margin-top: 8px;
  color: var(--accent-deep);
  letter-spacing: .12em; text-transform: uppercase; font-size: 10.5px;
}
.fiche-nego {
  color: var(--accent-deep);
  letter-spacing: .12em; text-transform: uppercase;
  margin: 2px 0 10px;
}

/* --- Emplacements médias (photos & vidéos à venir) --- */
.media-ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; text-align: center;
  min-height: 220px; padding: 26px;
  background: var(--blush);
  border: 1px dashed rgba(201,74,5,.45);
}
.media-ph img { width: 54px; height: 54px; object-fit: contain; opacity: .8; }
.media-ph .micro { color: var(--accent-deep); letter-spacing: .14em; text-transform: uppercase; font-size: 10.5px; }
.media-ph-video { min-height: 320px; width: 100%; }
.media-ph-tall { min-height: 380px; height: 100%; }
.media-ph-card { min-height: 190px; width: 100%; }
.equipe-video { margin: 34px 0 10px; }

/* --- Emplacement Calendly --- */
.calendly-ph {
  background: #fff;
  border: 1px solid var(--line-soft);
  padding: 34px 30px;
  display: flex; flex-direction: column; gap: 12px;
  align-items: flex-start;
}
.calendly-ph-ico svg { width: 40px; height: 40px; color: var(--accent); }
.calendly-ph-k { color: var(--accent); }
.calendly-ph-txt { font-family: var(--sans); font-size: 17px; line-height: 1.45; }
.calendly-ph-soon {
  margin-top: auto; padding: 8px 14px;
  background: var(--blush); color: var(--accent-deep);
  letter-spacing: .12em; text-transform: uppercase; font-size: 10.5px;
}

/* --- Visite / rendez-vous côte à côte --- */
.fiche-visite { margin: 60px 0 0; }
.visite-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 26px; align-items: stretch;
  margin-top: 26px;
}
.visite-grid .lead-form { margin: 0; }
.rdv-grid { margin-bottom: 10px; }

/* --- Outils fiche (comparer / favoris) --- */
.fiche-outils {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
  margin-top: 46px;
}
.outil-tile {
  display: flex; flex-direction: column; gap: 8px;
  padding: 28px 26px;
  background: #fff; border: 1px solid var(--line-soft);
  text-decoration: none; color: var(--ink);
  transition: border-color .25s ease, transform .25s ease;
}
.outil-tile:hover { border-color: var(--accent); transform: translateY(-3px); }
.outil-tile svg { width: 26px; height: 26px; color: var(--accent); }
.outil-tile strong {
  font-family: var(--knock);
  letter-spacing: .12em; text-transform: uppercase; font-size: 13px;
}

/* --- Nos biens : sections vente / location --- */
.biens-h2 { margin-top: 44px; }
.biens-loc { margin-top: 60px; }

/* --- Accueil : services en tuiles photo (wireframe p.1 §3) --- */
.svc-tiles {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  margin-top: 34px;
}
.svc-tile {
  display: block;
  background: #fff;
  overflow: hidden;
  transition: transform .3s;
}
.svc-tile:hover { transform: translateY(-4px); }
.svc-tile .svc-photo {
  display: block; width: 100%; height: 190px; object-fit: cover;
}
.svc-tile strong {
  display: block;
  font-family: var(--knock);
  letter-spacing: .12em; text-transform: uppercase; font-size: 13px;
  padding: 14px 16px; color: var(--ink);
}
.svc-tile p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; }
.svc-cta {
  display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
  margin-top: 38px;
}

/* --- Accueil : sections éditoriales --- */
.edito-blush { background: var(--blush); }
.edito-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 44px;
  align-items: center;
  max-width: 1100px; margin: 0 auto;
}
.edito-rev .edito-media { order: 2; }
.edito-rev .edito-txt { order: 1; }
.edito-txt h2 { margin: 10px 0 16px; }
.edito-txt p { color: var(--ink-soft); margin-bottom: 22px; max-width: 46ch; }
.edito-duo-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 26px;
  max-width: 1100px; margin: 0 auto;
}
.duo-card {
  display: block; text-decoration: none; color: var(--ink);
  background: #fff; border: 1px solid var(--line-soft);
  padding: 22px;
  transition: border-color .25s ease, transform .25s ease;
}
.duo-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.duo-card .media-ph { min-height: 200px; margin-bottom: 18px; }
.duo-card h3 { margin: 6px 0 8px; }

/* --- Page équipe : version orange --- */
.page-orange { background: var(--accent); }
.page-orange .equipe-orange h1,
.page-orange .equipe-orange h2,
.page-orange .equipe-orange h3:not(.lead-form h3):not(.cv-card h3),
.page-orange .equipe-orange .lede { color: var(--cream); }
.page-orange .equipe-orange .eyebrow { color: var(--blush); }
.page-orange .equipe-orange .micro { color: rgba(253,234,225,.85); }
.page-orange .equipe-orange .media-ph {
  background: rgba(253,234,225,.12);
  border-color: rgba(253,234,225,.5);
}
.page-orange .equipe-orange .media-ph .micro { color: var(--blush); }
.team-carousel { margin-top: 30px; }
.cv-card {
  background: var(--cream);
  padding: 22px;
  display: flex; flex-direction: column; gap: 10px;
}
.cv-card h3,
.page-orange .equipe-orange .cv-card h3 { color: var(--ink); margin: 6px 0 0; }
.cv-card .team-role { color: var(--accent-deep) !important; letter-spacing: .14em; text-transform: uppercase; }
.cv-card .media-ph { background: var(--blush); border-color: rgba(201,74,5,.45); }
.cv-card .media-ph .micro { color: var(--accent-deep) !important; }
.team-bulle {
  font-family: var(--sans); font-style: italic;
  font-size: 18px; line-height: 1.5; color: var(--ink);
  background: var(--blush);
  padding: 14px 16px;
  position: relative;
}
.team-bulle::after {
  content: ""; position: absolute; left: 26px; bottom: -9px;
  border: 9px solid transparent; border-top-color: var(--blush);
  border-bottom: 0;
}
.team-playlist {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: auto;
  background: var(--ink); color: var(--cream);
  border: 0; padding: 12px 18px;
  font-family: var(--knock);
  letter-spacing: .14em; text-transform: uppercase; font-size: 11px;
  transition: background .25s ease;
}
.team-playlist:hover { background: var(--accent-deep); }
.team-playlist svg { width: 18px; height: 18px; }
.team-spotify { border: 0; margin-top: auto; }
.team-note { margin: -6px 0 8px; }
.page-orange .equipe-orange .vie-tile {
  background: rgba(253,234,225,.12);
  border: 1px dashed rgba(253,234,225,.5);
}
.page-orange .equipe-orange .vie-tile .micro { color: var(--blush); }
.page-orange .site-footer { background: transparent; }
.page-orange .agence-info dt { color: rgba(253,234,225,.75); }
.page-orange .agence-info dd { color: var(--cream); }
.page-orange .recrutement > p { color: rgba(253,234,225,.9); }

/* --- Avis clients (placeholders) --- */
.avis-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  margin-top: 30px;
}
.avis-cta { margin-top: 26px; text-align: center; }
.avis-cta .btn {
  display: inline-block; padding: 13px 30px; border-radius: 999px;
  background: var(--accent); color: var(--cream); border: 0;
  font-weight: 600; letter-spacing: .06em;
}
.avis-cta .btn:hover { background: var(--accent-deep); }
.page-orange .avis-cta .btn { background: var(--cream); color: var(--accent-deep); }
.page-orange .avis-cta .btn:hover { background: var(--blush); }
.avis-tile {
  background: #fff; border: 1px solid var(--line-soft);
  padding: 26px 24px; margin: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.page-orange .avis-tile { border: 0; }
.avis-stars { color: var(--accent); letter-spacing: 4px; font-size: 15px; }
.avis-tile blockquote { margin: 0; }
.avis-tile blockquote p {
  font-family: var(--sans); font-style: italic;
  font-size: 17px; line-height: 1.5; color: var(--ink-soft);
}
.avis-tile figcaption { color: var(--ink-soft); letter-spacing: .12em; text-transform: uppercase; font-size: 10.5px; }
.avis-note { margin-top: 16px; text-align: center; }
/* Bouton « Contacter X » sur les cartes (wireframe) */
.card-contact {
  display: inline-block; align-self: flex-start; margin-top: 10px;
  padding: 7px 16px; border-radius: 999px;
  background: var(--accent); color: var(--cream);
  font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
  transition: background .2s;
}
.card:hover .card-contact { background: var(--accent-deep); }
.card-body { display: flex; flex-direction: column; align-items: flex-start; }
.card-body > div { width: 100%; }
/* Bouton « Programmer une visite » fiche bien */
.btn-visite { display: block; text-align: center; margin: 14px 0 18px; }
.page-orange .avis-note { color: var(--blush) !important; }

/* --- Louer ou gérer --- */
.gestion-col { background: #fff; border: 1px solid var(--line-soft); padding: 30px 28px; }
.gestion-col h3 { margin: 8px 0 12px; }
.gestion-col p { color: var(--ink-soft); margin-bottom: 20px; }
.gestion-quote { margin-top: 60px; }
.gestion-quote h2 { font-style: italic; }
.gestion-biens { margin-top: 56px; }

/* --- Blog voilà --- */
.evenements { margin: 60px 0; }
.evenements .media-ph-video { max-width: 860px; }
.news-h3 {
  font-family: var(--knock-cond); text-transform: none; font-weight: 400;
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.2; margin-bottom: 14px;
}
.news-h3 em { font-style: italic; color: var(--accent-deep); font-size: .72em; }

/* --- City guide --- */
.map-guide { margin-top: 26px; }
.guide-note { margin: 14px 0 6px; }
.agence-mosaic { margin-top: 64px; }
.mosaic-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  margin: 30px 0;
}
.mosaic-grid .media-ph { min-height: 200px; }
.mosaic-tile.mosaic-word {
  display: flex; align-items: center; justify-content: center;
  min-height: 200px;
  background: var(--accent); color: var(--cream);
  font-family: var(--knock);
  font-size: clamp(22px, 3vw, 34px);
  letter-spacing: .22em; text-transform: uppercase;
}
.tout-en-un {
  margin-top: 64px; text-align: center;
  max-width: 640px; margin-left: auto; margin-right: auto;
}
.tout-en-un h3 { font-size: clamp(24px, 3vw, 32px); margin-bottom: 14px; }
.tout-en-un p { color: var(--ink-soft); margin-bottom: 24px; }

/* --- Estimation : coups de cœur --- */
.estim-coeurs { margin-top: 70px; }
.estim-coeurs .carousel > * { flex-basis: min(300px, 74vw); }

/* --- Responsive wireframe --- */
@media (max-width: 900px) {
  .svc-tiles, .avis-grid, .mosaic-grid { grid-template-columns: 1fr 1fr; }
  .edito-grid, .edito-duo-grid, .visite-grid, .fiche-outils { grid-template-columns: 1fr; }
  .edito-rev .edito-media { order: 0; }
  .media-ph-tall { min-height: 260px; }
}
@media (max-width: 560px) {
  .svc-tiles, .avis-grid, .mosaic-grid { grid-template-columns: 1fr; }
  .carousel > * { flex-basis: 84vw; }
}

/* --- Vraies photos de l'agence --- */
.media-photo {
  margin: 0; overflow: hidden; border-radius: 4px;
  background: var(--blush);
}
.media-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-photo-tall { min-height: 380px; height: 100%; }
.media-photo-tall img { min-height: 380px; }
.media-photo-sq { aspect-ratio: 1 / 1; min-height: 200px; }
.media-photo-wide { max-width: 860px; margin: 30px 0 10px; }
.media-photo-wide img { aspect-ratio: 16 / 9; }
.media-photo-event img { min-height: 320px; height: 100%; }
.event-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; max-width: 1080px; }
.evenements .event-duo .media-ph-video { max-width: none; height: 100%; }

.vie-tile.vie-photo { padding: 0; overflow: hidden; position: relative; }
.vie-tile.vie-photo img {
  width: 100%; height: 220px; object-fit: cover; opacity: 1;
}
.vie-tile.vie-photo .micro {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 10px 12px; text-align: center;
  background: linear-gradient(transparent, rgba(20,10,4,.72));
  color: var(--cream);
}
.page-orange .equipe-orange .vie-tile.vie-photo { padding: 0; }

/* --- SVG déco Voilà --- */
main.wrap.section { position: relative; }
.deco-svg {
  position: absolute; pointer-events: none; user-select: none;
  width: 120px; opacity: .95; z-index: 1;
}
.services { position: relative; }
.deco-services { top: 34px; right: 4%; width: 130px; transform: rotate(12deg); }
.tout-en-un { position: relative; }
.deco-etoile { top: -26px; right: -70px; width: 84px; transform: rotate(-10deg); }
.equipe-video { position: relative; }
.deco-plante { top: -46px; right: 2%; width: 110px; transform: rotate(6deg); }
.deco-canape { top: 26px; right: 0; width: 150px; transform: rotate(-6deg); }
.deco-machine { top: 20px; right: 3%; width: 120px; transform: rotate(5deg); }
@media (max-width: 900px) {
  .event-duo { grid-template-columns: 1fr; }
  .deco-svg { display: none; }
}

/* --- Avis Google : lisibilité des auteurs sur cartes blanches --- */
.avis-tile figcaption.micro,
.page-orange .equipe-orange .avis-tile figcaption.micro,
.page-orange .avis-tile figcaption.micro {
  color: var(--accent-deep) !important;
}
.avis-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ================================================================
   ACCUEIL — reconstruction stricte du wireframe (pages 1-2)
   Sections pleine largeur : orange / orange / saumon / blanc / blanc / saumon
   ================================================================ */

.home { display: block; }
.home-sec {
  position: relative;
  padding: clamp(44px, 6vw, 84px) var(--pad);
  overflow: hidden;
}
/* Feedback 28/08 : l'orange devient un accent — fonds rose pâle / blanc. */
.sec-orange { background: var(--accent); color: var(--white); }
.sec-blush  { background: var(--blush-soft); color: var(--ink); }
.sec-white  { background: var(--white); color: var(--ink); }

.home-h1 {
  font-size: clamp(2rem, 4vw, 3.3rem);
  color: var(--ink);
  text-align: left;
  margin-bottom: clamp(26px, 3.5vw, 46px);
  line-height: 1.1;
}
.sec-orange .home-h1 { color: var(--white); }
.home-h2 {
  font-size: clamp(1.9rem, 3.8vw, 3.1rem);
  margin-bottom: clamp(22px, 3vw, 40px);
}
.sec-orange .home-h2 { color: var(--white); }

/* §1 — vidéo (placeholder n&b) + citation en surimpression.
   Wireframe : la vidéo est en retrait (orange visible de chaque côté)
   et le H1 est aligné sur son bord gauche, sur deux lignes. */
.home-hero { padding-bottom: clamp(50px, 6vw, 90px); }
.home-hero .home-h1 { max-width: 1000px; margin-left: auto; margin-right: auto; }
.hero-video { position: relative; max-width: 1000px; margin: 0 auto; }
.hero-video-img {
  display: block; width: 100%; height: clamp(320px, 52vw, 560px);
  object-fit: cover;
}
.hero-video-ov {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; text-align: center;
  background: rgba(0, 0, 0, .25);
  color: var(--white);
  padding: 20px;
}
.hero-play-ico { width: clamp(44px, 6vw, 64px); height: auto; }
.hero-quote {
  font-family: var(--sans); font-weight: 300; font-style: italic;
  font-size: clamp(1.1rem, 2.4vw, 1.7rem); line-height: 1.5;
  text-shadow: 0 1px 10px rgba(0,0,0,.4);
}
.hero-video-note {
  position: absolute; right: 14px; bottom: 12px;
  color: rgba(255,255,255,.85);
}

/* §2 — coups de coeur : cartes saumon sur fond orange */
.home-coeurs .carousel { margin-top: 6px; }
.home-coeurs .card { background: var(--blush); }
.home-coeurs .card .card-body { background: var(--blush); }

/* Cartes « pleines » des sections wireframe : image bord à bord
   + respiration intérieure généreuse pour le texte */
.home-sec .card { border-radius: 6px; overflow: hidden; }
.home-sec .card .card-img { margin-bottom: 0; }
.home-sec .card .card-body { padding: 20px 22px 24px; }
.home-sec .card .card-price { margin-bottom: 8px; }
.home-sec .card .card-meta { margin-top: 2px; }
.home-sec .card .card-contact { margin-top: 14px; }
.home-coeurs .card .card-meta { border-top-color: rgba(201, 74, 5, .25); }

/* Boutons pilule orange du wireframe */
.btn-pill {
  display: inline-block;
  padding: 14px 34px; border-radius: 999px;
  background: var(--accent); color: var(--white);
  font-weight: 600; letter-spacing: .05em; font-size: 15px;
  transition: background .25s, color .25s;
}
.btn-pill:hover { background: var(--accent-deep); }
.btn-pill-cream { background: var(--white); color: var(--accent-deep); }
.btn-pill-cream:hover { background: var(--blush); color: var(--accent-deep); }
.home-sec .center { margin-top: 34px; text-align: center; }

/* §3 — services : quartier d'orange en bas à droite */
.home-services { padding-bottom: clamp(70px, 8vw, 110px); }
.deco-svc-orange {
  position: absolute; right: -28px; bottom: -30px;
  width: clamp(110px, 14vw, 190px); transform: rotate(-14deg);
  pointer-events: none;
}
.home-services .svc-tile { background: var(--white); }

/* §4 — City guide : filtres + carte Google */
.guide-grid {
  display: grid; grid-template-columns: 240px 1fr;
  gap: clamp(24px, 4vw, 56px); align-items: start;
}
.guide-filtres-t {
  font-family: var(--knock-cond); text-transform: none;
  font-size: 1.3rem; margin-bottom: 14px;
}
.guide-filtres ul { list-style: none; padding: 0; margin: 0; }
.guide-filtres li + li { margin-top: 9px; }
.guide-filtres a {
  color: var(--ink); font-size: 15px;
  border-bottom: 1px solid transparent; transition: border-color .2s, color .2s;
}
.guide-filtres a:hover { color: var(--accent); border-color: var(--accent); }
.guide-map iframe {
  display: block; width: 100%; height: clamp(340px, 44vw, 480px);
  border: 0;
}

/* §5 — Notre agence : mosaïque 2 rangées × 5 tuiles */
.mosaic-agence {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.mos-tile { position: relative; height: clamp(120px, 15vw, 200px); overflow: hidden; }
.mos-tile .mos-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.mos-tile .mos-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mos-word {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  font-family: var(--knock-cond); text-transform: none;
  font-size: clamp(1.4rem, 2.4vw, 2.1rem); letter-spacing: .05em;
}
/* Retour 11/09 : camaïeu orange demandé par la cliente */
.mos-blush  { background: #f4a77c; color: var(--white); }
.mos-orange { background: #f48708; color: var(--white); }
.mos-deep   { background: #ea5b0c; color: var(--white); }

/* §6 — Une agence immobilière tout en un */
.home-toutenun { text-align: center; padding-bottom: clamp(70px, 8vw, 100px); }
.home-toutenun .home-h2 { color: var(--white); }
.toutenun-txt {
  max-width: 760px; margin: 0 auto;
  color: var(--white);
  font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.7;
}
.toutenun-txt p + p { margin-top: 16px; }
.deco-toutenun {
  position: absolute; right: 4%; top: 50%;
  width: clamp(60px, 7vw, 100px); transform: translateY(-50%) rotate(-8deg);
  pointer-events: none;
}

@media (max-width: 900px) {
  .guide-grid { grid-template-columns: 1fr; }
  .mosaic-agence { grid-template-columns: repeat(2, 1fr); }
  .deco-svc-orange, .deco-toutenun { display: block; }
}
@media (max-width: 560px) {
  .mosaic-agence { grid-template-columns: 1fr 1fr; }
}

/* ================================================================
   ESTIMATION — wireframe p.5 : orange / saumon / orange
   ================================================================ */

.estim-h1 { color: var(--accent-deep); }
/* v6 strict (02/09) — wireframe p.14 : titres en majuscules */
.estim-wire .home-h1, .estim-wire .home-h2 { text-transform: uppercase; }
/* v6 strict (02/09) — wireframe p.17 : LOCALISATION et COMPARER 2 BIENS en majuscules */
.fiche-loc .home-h2, .fiche-comparer .home-h2, .fiche-comparer-v6 .home-h2 { text-transform: uppercase; }
.estim-intro {
  color: var(--ink-soft);
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  max-width: 56ch;
  margin: -10px 0 34px;
}
.h2-orange { color: var(--accent); }

/* Deux tuiles saumon côte à côte : Calendly | Formulaire de rdv */
.estim-duo {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 44px);
  align-items: stretch;
}
.estim-tile {
  background: var(--white);
  border: 1px solid var(--line-soft); border-radius: 10px;
  padding: clamp(22px, 3vw, 38px);
  color: var(--ink);
}
.estim-tile-t {
  font-family: var(--knock-cond); text-transform: none;
  font-size: 1.35rem; margin-bottom: 18px; color: var(--accent-deep);
}
.estim-tile .calendly-ph { border: 0; background: transparent; height: 100%; }
.estim-tile .lead-form input,
.estim-tile .lead-form select,
.estim-tile .lead-form textarea {
  background: var(--white); border-color: transparent;
}
.estim-tile .btn-pill { border: 0; cursor: pointer; font-family: var(--sans); }

/* Coups de cœur sur saumon : cartes blanches */
.estim-coeurs .card, .estim-coeurs .card .card-body { background: var(--white); }

/* Biens vendus sur orange : titre blanc + canapé */
.estim-vendus { padding-bottom: clamp(90px, 12vw, 160px); }
.estim-vendus .home-h2 { color: var(--ink); }
.sec-orange .estim-vendus .home-h2 { color: var(--white); }
.estim-vendus .vendus-note { color: var(--ink-soft); margin-top: 22px; }
.deco-canape-estim {
  position: absolute; left: 50%; bottom: -6px;
  transform: translateX(-50%);
  width: clamp(220px, 30vw, 420px);
  pointer-events: none;
}

/* Simulateur conservé en bas, restylé sur fond saumon */
.estim-simu .simu-chrono { color: var(--ink); }
.estim-simu .simu,
.estim-simu .simu-load,
.estim-simu .simu-result {
  background: var(--white);
  padding: clamp(20px, 3vw, 34px);
  max-width: 820px;
}
.estim-simu .simu input, .estim-simu .simu select,
.estim-simu .simu-unlock input {
  background: var(--cream);
}

@media (max-width: 900px) {
  .estim-duo { grid-template-columns: 1fr; }
}

/* ================================================================
   ÉQUIPE — wireframe p.3-4 (blanc / orange / saumon / blanc)
   ================================================================ */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.h2-blush { color: var(--blush); }
.h2-white { color: var(--white); }

/* §1 — carrousel cartes de visite (fond blanc, cartes saumon, splash orange) */
.equipe-cartes { padding-top: clamp(30px, 4vw, 56px); }
.cv-carousel { align-items: flex-start; }
.cv-wire-item { min-width: clamp(220px, 24vw, 300px); scroll-snap-align: start; }
.cv-wire-card {
  background: var(--blush); min-height: clamp(260px, 30vw, 360px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 26px 20px; text-align: center;
}
.cv-wire-label {
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.9);
}
.cv-wire-card h3 {
  font-family: var(--knock-cond); text-transform: none;
  font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 500; margin: 0; color: var(--accent-deep);
}
.cv-wire-role { color: var(--accent-deep); letter-spacing: .14em; text-transform: uppercase; }
.cv-splash {
  position: relative; margin: 14px auto 0; max-width: 86%;
  background: var(--accent); color: var(--white);
  font-family: var(--sans); font-size: 13px; font-weight: 700; line-height: 1.45;
  text-align: center; padding: 16px 18px;
  border-radius: 58% 42% 55% 45% / 48% 55% 45% 52%;
}
.cv-note { text-align: center; margin-top: 18px; color: var(--ink-soft); }

/* §2 — Le quotidien de Voilà (fond orange, tuile vidéo saumon, plante) */
.equipe-quotidien { position: relative; }
.quotidien-video { max-width: 1080px; margin: 0 auto; }
.quotidien-ph {
  background: var(--blush); border: 0; min-height: clamp(280px, 38vw, 460px);
}
.quotidien-ph .micro { color: var(--accent-deep); }
.deco-plante-equipe {
  position: absolute; right: clamp(8px, 3vw, 48px); bottom: clamp(8px, 2vw, 30px);
  width: clamp(60px, 7vw, 110px); pointer-events: none;
}

/* §3 — Rejoindre notre équipe (fond saumon, photo + pilules oranges, fauteuil) */
.equipe-recrut { position: relative; }
.recrut-grid {
  display: grid; grid-template-columns: minmax(220px, 340px) 1fr;
  gap: clamp(26px, 4vw, 64px); align-items: start;
  max-width: 1080px; margin: 0 auto; position: relative; z-index: 1;
}
.recrut-photo { margin: 0; background: var(--accent); padding: 10px; }
.recrut-photo img { width: 100%; height: clamp(240px, 26vw, 340px); object-fit: cover; display: block; }
.recrut-photo .micro { display: block; text-align: center; color: var(--white); padding-top: 8px; }
.recrut-form { display: flex; flex-direction: column; gap: 14px; }
.recrut-form input, .recrut-form textarea, .recrut-cv {
  background: var(--accent); border: 0; border-radius: 999px;
  color: var(--white); font-family: var(--sans); font-size: 15px; font-weight: 700;
  text-align: center; padding: 15px 22px; width: 100%;
}
.recrut-form textarea { border-radius: 28px; resize: vertical; min-height: 96px; }
.recrut-form input::placeholder, .recrut-form textarea::placeholder { color: rgba(255,255,255,.92); opacity: 1; }
.recrut-form input:focus, .recrut-form textarea:focus { outline: 2px solid var(--accent-deep); background: var(--accent-deep); }
.recrut-cv { cursor: pointer; display: block; }
.recrut-cv input[type="file"] { display: none; }
.recrut-send { align-self: center; background: var(--accent-deep); margin-top: 4px; }
/* v6 strict (02/09) — wireframe p.8 : titre orange serif majuscules sur fond saumon,
   photo crayons/gourde nue, champs rectangulaires orange */
.recrut-h2-v6 { color: var(--accent); text-transform: uppercase; text-align: left; }
.equipe-mag-sec .home-h2 { text-transform: uppercase; }
.recrut-clair-v6 .recrut-photo { background: transparent; padding: 0; }
.recrut-clair-v6 .recrut-photo img { height: auto; aspect-ratio: 3/4; }
.recrut-v6 input, .recrut-v6 textarea, .recrut-v6 .recrut-cv { border-radius: 4px; }
.deco-fauteuil-equipe {
  position: absolute; left: clamp(8px, 3vw, 48px); bottom: clamp(8px, 2vw, 24px);
  width: clamp(80px, 9vw, 150px); pointer-events: none;
}

/* §4 — Des mots doux sur Voilà (fond blanc, avis saumon, pilule saumon) */
.equipe-avis .avis-grid { margin-top: clamp(22px, 3vw, 40px); }
.equipe-avis .avis-tile { background: var(--blush); border: 0; }
.equipe-avis .avis-tile blockquote p { color: var(--ink); }
.equipe-avis .avis-tile figcaption { color: var(--accent-deep); }
.equipe-avis .avis-stars { color: var(--accent); }
.equipe-avis .avis-cta { text-align: center; margin-top: clamp(20px, 3vw, 36px); }
.equipe-avis .avis-cta .btn {
  background: var(--blush); color: var(--accent); border: 0; border-radius: 999px;
  font-family: var(--sans); font-weight: 800; font-size: 16px; text-transform: none;
  letter-spacing: 0; padding: 14px 30px;
}
.equipe-avis .avis-cta .btn:hover { background: var(--accent); color: var(--white); }
.equipe-avis .avis-note { text-align: center; margin-top: 14px; }

@media (max-width: 900px) {
  .recrut-grid { grid-template-columns: 1fr; }
  .deco-fauteuil-equipe, .deco-plante-equipe { display: none; }
}

/* Corrections spécificité équipe */
.equipe-quotidien .home-h2 { color: var(--blush); }
.equipe-recrut .home-h2 { color: var(--accent); }
.cv-carousel { justify-content: safe center; }
.cv-wire-card .team-playlist { background: var(--accent); border: 0; color: var(--white); }
.cv-wire-card .team-playlist:hover { background: var(--accent-deep); }

/* ================================================================
   NOS BIENS — wireframe p.6 (page orange, filtres saumon, vendus saumon)
   ================================================================ */

.home-h2.h2-white-left { color: var(--ink); text-align: left; }
.sec-orange .home-h2.h2-white-left { color: var(--white); }

.biens-main .home-h1 { margin-bottom: clamp(24px, 3vw, 40px); }
.filters-blush {
  background: var(--blush);
  border: 0; border-radius: 12px;
  padding: clamp(18px, 2.5vw, 28px);
  margin-bottom: clamp(34px, 4.5vw, 56px);
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
}
.filters-blush select {
  background: var(--white); color: var(--ink);
  border: 0; border-radius: 999px;
  padding: 12px 18px; font-size: 14px;
  flex: 1 1 160px; min-width: 150px;
  cursor: pointer;
}
.f-reset-blush, .filters-blush .btn-ghost {
  background: var(--accent); color: var(--white);
  border: 0; border-radius: 999px;
  padding: 12px 22px; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: background .25s;
}
.f-reset-blush:hover { background: var(--accent-deep); color: var(--white); }
.count-white { color: rgba(255,255,255,.85); margin-bottom: 20px; }
.biens-main .card, .biens-main .card .card-body { background: var(--white); }
.biens-main .card { border: 1px solid var(--line-soft); border-radius: 8px; }
.biens-main .card .card-meta { border-top-color: rgba(201, 74, 5, .25); }
.biens-loc { margin-top: clamp(54px, 7vw, 90px); }
.biens-main .empty-state {
  background: var(--blush); border: 0; border-radius: 12px; color: var(--ink);
}
.biens-vendus .home-h2 { color: var(--accent); }
.vendus-note-blush { max-width: 760px; margin-bottom: 28px; color: var(--ink); }
.vendus-note-blush a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; }
.biens-vendus .card, .biens-vendus .card .card-body { background: var(--white); }

/* ================================================================
   FICHE BIEN — wireframe p.7-8 (page saumon, tuiles oranges)
   ================================================================ */

.fiche-hero { padding-bottom: clamp(54px, 7vw, 90px); }
.breadcrumb-blush, .breadcrumb-blush a { color: var(--accent-deep); }
.breadcrumb-blush { margin-bottom: 18px; }
.fiche-h1 {
  color: var(--accent);
  font-size: clamp(1.9rem, 3.8vw, 3.2rem);
  text-align: left; margin-bottom: 10px;
}
.fiche-ref-w {
  color: var(--accent-deep);
  font-family: var(--knock); font-size: 12.5px;
  letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 26px;
}
.fiche-wire .fiche-grid {
  display: grid; grid-template-columns: 1fr clamp(150px, 17vw, 210px);
  gap: 16px; align-items: stretch;
}
/* Retour 09/09 (image16) : pas de bords blancs ni d'angles arrondis —
   la photo remplit son cadre. */
.fiche-wire .photo-main {
  position: relative; overflow: hidden;
  aspect-ratio: auto;
  height: clamp(320px, 44vw, 560px);
  background: transparent; border-radius: 0;
}
.fiche-wire .photo-main img {
  width: 100%; height: 100%;
  object-fit: cover; border-radius: 0; background: transparent;
  display: block; cursor: zoom-in;
}
.thumbs-col {
  display: flex; flex-direction: column; gap: 12px;
  height: clamp(320px, 44vw, 560px); overflow-y: auto;
  scrollbar-width: thin;
}
.thumbs-col img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 0; cursor: pointer;
  opacity: .85; transition: opacity .2s, outline .2s;
  outline: 2px solid transparent; outline-offset: -2px;
}
.thumbs-col img:hover { opacity: 1; }
.thumbs-col img.sel { opacity: 1; outline-color: var(--accent); }
.fiche-wire .fiche-actions { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; }
.fiche-wire .fiche-actions .labeled {
  background: var(--white); color: var(--accent-deep);
  border: 0; border-radius: 999px; padding: 9px 16px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .2s, color .2s;
}
.fiche-wire .fiche-actions .labeled:hover { background: var(--accent); color: var(--white); }
.fiche-wire .fiche-actions svg { width: 16px; height: 16px; }
/* Retour cliente 09/2026 : description orange charte, intégrée au carré blanc,
   espaces resserrés entre photos et description. */
.fiche-desc-t { color: var(--accent); text-align: left; margin: 0 0 14px; }
.fiche-desc-txt {
  color: var(--accent); max-width: 940px; line-height: 1.75;
  margin: 0 0 clamp(22px, 3vw, 34px); white-space: pre-line;
}
.fiche-carac-blush {
  background: var(--white); border-radius: 0;
  padding: clamp(24px, 3.5vw, 40px);
  margin: clamp(18px, 2.6vw, 30px) 0 clamp(24px, 3.4vw, 38px);
}
.fiche-carac-blush h3 { color: var(--accent-deep); }
.fiche-duo {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.5vw, 26px);
  margin-bottom: clamp(26px, 4vw, 44px);
}
.fiche-trio { grid-template-columns: 1fr 1fr 1fr; }
.fiche-tile-orange .tile-lnk { color: var(--cream); text-decoration: underline; font-weight: 600; }
@media (max-width: 1100px) { .fiche-trio { grid-template-columns: 1fr; } }
/* Retour 09/09 (image4) : rectangles sans arrondi. */
.fiche-tile-orange {
  background: var(--accent); color: var(--white);
  border-radius: 0; padding: clamp(24px, 3.5vw, 38px);
}
.fiche-tile-orange h3 { color: var(--white); }
.fiche-tile-orange a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.fiche-tile-orange .dpe-note, .fiche-tile-orange .micro { color: rgba(255,255,255,.9); }
.fiche-tile-orange .calendly-block {
  background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.55);
  color: var(--white); margin: 10px 0 0;
}
.fiche-tile-orange .lead-form input,
.fiche-tile-orange .lead-form textarea {
  width: 100%; background: var(--white); color: var(--ink);
  border: 0; border-radius: 10px; padding: 13px 16px;
  margin-bottom: 10px; font-family: inherit; font-size: 14px;
}
.fiche-tile-orange .lead-form textarea { border-radius: 14px; resize: vertical; }
.fiche-tile-orange .btn-pill { background: var(--accent-deep); color: var(--white); border-color: var(--white); }
.fiche-tile-orange .btn-pill:hover { background: var(--cream); color: var(--accent-deep); }
.fiche-tile-orange .form-ok { color: var(--white); }
/* Variante douce (retour client : formulaire de visite moins orange) */
.fiche-tile-soft { background: var(--blush-soft); color: var(--ink); }
.fiche-tile-soft h3 { color: var(--accent); }
.fiche-calendly { padding: 0; display: flex; }
.fiche-calendly .calendly-ph {
  border: 0; width: 100%; height: 100%;
  padding: clamp(24px, 3.5vw, 38px);
}
.fiche-hero .h2-white-left { margin-top: clamp(6px, 1.4vw, 14px); }
.fiche-tile-soft a { color: var(--accent-deep); }
.fiche-tile-soft .dpe-note, .fiche-tile-soft .micro { color: var(--ink-soft); }
.fiche-tile-soft .calendly-block {
  background: var(--white); border-color: rgba(201,74,5,.35);
  color: var(--ink);
}
.fiche-tile-soft .lead-form input,
.fiche-tile-soft .lead-form textarea {
  background: var(--white); color: var(--ink);
  border: 1px solid rgba(201,74,5,.22);
}
.fiche-tile-soft .btn-pill { background: var(--accent); color: var(--white); }
.fiche-tile-soft .btn-pill:hover { background: var(--accent-deep); }
.fiche-tile-soft .form-ok { color: var(--accent-deep); }
.fiche-hero .home-h2 { margin-top: clamp(10px, 2vw, 20px); }

/* Localisation (section orange) */
.fiche-loc .map-bien {
  height: clamp(300px, 40vw, 460px);
  border-radius: 12px; overflow: hidden; background: var(--blush);
}
.map-note-w { color: var(--ink-soft); margin-top: 14px; }
.sec-orange .map-note-w { color: rgba(255,255,255,.9); }
.prox-w {
  list-style: none; padding: 0; margin-top: 14px;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.prox-w li {
  background: var(--white); color: var(--accent-deep);
  border: 1px solid rgba(201,74,5,.25);
  border-radius: 999px; padding: 7px 16px; font-size: 13px;
}
.sec-orange .prox-w li { background: rgba(255,255,255,.16); color: var(--white); border-color: transparent; }

/* Comparer / Favoris */
.fiche-outil-txt { max-width: 740px; color: var(--ink-soft); margin-bottom: 22px; }
.fiche-outil-w { color: rgba(255,255,255,.92); }
.sec-blush .fiche-outil-w, .sec-white .fiche-outil-w { color: var(--ink-soft); }
.fiche-comparer .home-h2, .fiche-favoris .home-h2 { text-align: left; }

/* ================================================================
   VOILÀ PATRIMOINE — wireframe p.9-10 (page orange)
   ================================================================ */

.patri-main .home-h2 { margin-top: clamp(46px, 6vw, 76px); }
.patri-main .home-h2:first-of-type { margin-top: clamp(36px, 5vw, 60px); }
.patri-main .home-h2.h2-blush { color: var(--accent-deep); }
/* v6 strict (02/09) — wireframe p.21 : H1/H2 orange, majuscules sauf
   « S'inscrire au programme Voilà Patrimoine », champs saumon sans tuile */
.patri-main .home-h1 { color: var(--accent); text-transform: uppercase; }
.patri-main .home-h2 { color: var(--accent); text-transform: uppercase; }
/* Retour cliente 02/09 : « S'inscrire au programme » centré (+ formulaire centré sous lui) */
.patri-main .home-h2#programme { text-transform: none; text-align: center; }
.patri-wire .patri-form-tile { margin-inline: auto; }
.patri-main .home-h2.h2-blush { color: var(--accent); }
.patri-form-tile {
  background: var(--blush); border-radius: 14px;
  padding: clamp(26px, 4vw, 46px);
  max-width: 920px;
}
.patri-wire .patri-main.sec-blush { background: var(--blush-soft); }
.patri-wire .patri-form-tile { background: transparent; border-radius: 0; padding: 0; }
.patri-wire .patri-form-tile input, .patri-wire .patri-form-tile textarea {
  background: var(--blush); color: var(--accent-deep); border-radius: 6px;
  text-align: center; font-weight: 600;
}
.patri-wire .patri-form-tile input::placeholder,
.patri-wire .patri-form-tile textarea::placeholder { color: var(--accent-deep); opacity: .9; }
.patri-wire .patri-form-tile .btn-pill { display: block; margin: 8px auto 0; width: auto; min-width: 180px; }
.patri-wire .aa-fig figcaption {
  color: var(--accent-deep); font-family: var(--sans);
  font-weight: 700; font-size: 1rem;
}
.patri-form-tile input, .patri-form-tile textarea {
  width: 100%; background: var(--white); color: var(--ink);
  border: 0; border-radius: 999px; padding: 14px 20px;
  margin-bottom: 12px; font-family: inherit; font-size: 14px;
}
.patri-form-tile textarea { border-radius: 18px; resize: vertical; }
.patri-form-tile .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.patri-form-tile .form-ok { color: var(--accent-deep); }
.invest-note-w { color: var(--ink-soft); margin-bottom: 18px; }
.sec-orange .invest-note-w { color: rgba(255,255,255,.85); }

/* Avant / Après */
.aa-grid-wire {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.5vw, 24px); margin-bottom: 18px;
}
.aa-tile-wire {
  position: relative; border-radius: 12px;
  min-height: clamp(180px, 22vw, 260px);
  background: linear-gradient(135deg, var(--blush) 0 50%, var(--accent-deep) 50% 100%);
  display: flex; align-items: center; justify-content: center;
}
.aa-tile-wire span {
  font-family: var(--knock-cond); text-transform: none;
  color: var(--white); font-size: clamp(1.2rem, 2vw, 1.7rem);
  letter-spacing: .04em; text-shadow: 0 1px 8px rgba(0,0,0,.25);
}

/* Boîte à artisans : mosaïque de tuiles colorées */
.artisans-mosaic {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.art-tile {
  min-height: clamp(120px, 15vw, 190px);
  border-radius: 10px; padding: 18px;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-family: var(--knock-cond); text-transform: none;
  font-size: clamp(1rem, 1.7vw, 1.45rem); letter-spacing: .04em; line-height: 1.15;
  color: var(--white);
  transition: transform .25s ease, filter .25s ease;
}
.art-tile:hover { transform: translateY(-4px); filter: brightness(1.06); }
.art-bois       { background: #8a6a4f; }
.art-gris       { background: #9a938c; }
.art-terracotta { background: #b4552d; }
.art-blush      { background: var(--blush); color: var(--accent-deep); }
.art-deep       { background: var(--accent-deep); }
.art-beton      { background: #b7b1a9; }
.art-orange     { background: var(--accent); border: 2px solid rgba(255,255,255,.6); }
.art-acier      { background: #7d8891; }
.art-taupe      { background: #8c7f72; }

/* Responsive p.6-10 */
@media (max-width: 900px) {
  .fiche-wire .fiche-grid { grid-template-columns: 1fr; }
  .thumbs-col {
    flex-direction: row; max-height: none; overflow-x: auto; overflow-y: hidden;
  }
  .thumbs-col img { width: 120px; flex: 0 0 auto; }
  .fiche-duo, .aa-grid-wire { grid-template-columns: 1fr; }
  .artisans-mosaic { grid-template-columns: repeat(2, 1fr); }
  .patri-form-tile .form-row { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .artisans-mosaic { grid-template-columns: 1fr; }
  .filters-blush select { flex-basis: 100%; }
}

/* ============================================================
   LES COULISSES — wireframe p.11-12
   ============================================================ */
.home-h1.h1-orange { color: var(--accent); }

.blog-hero .home-h1 { margin-bottom: 10px; }
.blog-h2-equipe { margin-bottom: clamp(26px, 3.5vw, 44px); }
.home-h2.h2-orange { color: var(--accent); text-align: left; }

.blog-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px); align-items: start;
}
.blog-hero-photo { margin: 0; }
.blog-hero-photo img {
  display: block; width: 100%; height: clamp(320px, 34vw, 480px);
  object-fit: cover; border-radius: 6px;
}
.blog-lede-w { color: var(--white); font-size: 17px; line-height: 1.55; max-width: 52ch; }
.blog-h2-projet { margin-top: clamp(28px, 4vw, 56px); margin-bottom: 14px; }
.blog-hero-txt .btn-pill { margin-top: 18px; display: inline-block; }

.blog-coeurs .home-h2 { margin-top: clamp(40px, 5.5vw, 70px); }
.blog-coeurs .home-h2:first-child { margin-top: 0; }
.blog-coeurs .card { background: var(--blush); }
.blog-coeurs .center { margin-top: clamp(22px, 3vw, 36px); text-align: center; }

.renov-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 24px);
}
.renov-tile {
  background: var(--blush); border-radius: 8px;
  min-height: clamp(220px, 26vw, 320px);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 20px;
}
.renov-tile span {
  font-family: var(--knock-cond); text-transform: none;
  letter-spacing: .04em; color: var(--white); font-size: clamp(17px, 1.6vw, 22px);
}

.blog-tips .home-h2 { margin-bottom: 16px; }
.blog-txt-w { color: var(--white); font-size: 17px; line-height: 1.55; max-width: 62ch; }
.blog-h2-avis { margin-top: clamp(40px, 5.5vw, 70px); }

/* Avis version orange (tuiles accent sur fond saumon ou crème) */
.avis-orange .avis-grid { margin-top: clamp(20px, 3vw, 36px); }
.avis-orange .avis-tile { background: var(--accent); border: 0; }
.avis-orange .avis-tile blockquote p { color: var(--white); }
.avis-orange .avis-tile figcaption { color: var(--blush); }
.avis-orange .avis-stars { color: var(--white); }
.avis-orange .avis-note { text-align: center; }
.avis-orange .avis-note a { color: var(--accent-deep); }
.avis-orange .avis-cta { text-align: center; }
.avis-orange .avis-cta .btn {
  background: var(--accent); color: var(--white); border-radius: 999px;
}
.avis-orange .avis-cta .btn:hover { background: var(--accent-deep); }

.blog-events .home-h2 { margin-bottom: clamp(20px, 3vw, 34px); }
.event-duo-wire {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px); align-items: start;
  margin-bottom: clamp(44px, 6vw, 76px);
}
.event-video-blush {
  background: var(--blush); border: 0; border-radius: 8px;
  min-height: clamp(240px, 26vw, 340px);
}
.event-video-blush .micro { color: var(--accent-deep); }

.events-bottom {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px); align-items: start;
}
.events-photo-tall { margin: 0; background: var(--white); padding: 12px; border-radius: 6px; }
.events-photo-tall img {
  display: block; width: 100%; height: clamp(380px, 40vw, 560px);
  object-fit: cover; border-radius: 3px;
}
.blog-news-h3 {
  font-family: var(--knock-cond); text-transform: none;
  color: var(--white); font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.14; margin: clamp(30px, 4vw, 50px) 0 18px;
}
.blog-news-form { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.blog-news-form input {
  flex: 1 1 260px; background: var(--white); border: 0; border-radius: 999px;
  padding: 14px 22px; font-family: var(--sans); font-size: 15px; color: var(--ink);
}
.blog-news-form .btn-pill {
  background: var(--accent-deep); color: var(--white); border: 0; cursor: pointer; font-family: var(--sans);
}
.blog-news-form .form-ok { flex-basis: 100%; color: var(--white); }

/* ============================================================
   LOCATION & GESTION — wireframe p.13
   ============================================================ */
.gestion-hero .home-h1 { max-width: 24ch; }
.gestion-form { max-width: 1040px; }
.gestion-form-cols {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 4vw, 90px);
}
.gestion-form-col { display: flex; flex-direction: column; gap: 16px; }
.gestion-form input, .gestion-form select {
  background: var(--accent); border: 0; border-radius: 999px;
  padding: 13px 24px; text-align: center;
  font-family: var(--sans); font-size: 16px; color: var(--white);
  appearance: none; -webkit-appearance: none; width: 100%;
}
.gestion-form input::placeholder { color: var(--white); opacity: 1; }
.gestion-form select:invalid { color: var(--white); }
.gestion-form select option { background: var(--white); color: var(--ink); }
.gestion-form input:focus, .gestion-form select:focus {
  outline: 2px solid var(--accent-deep); outline-offset: 2px;
}
.gestion-send-wrap { display: flex; justify-content: center; margin-top: 4px; }
.gestion-send {
  position: relative; width: 96px; height: 96px; border-radius: 50%;
  background: var(--accent); border: 0; color: var(--white);
  font-family: var(--sans); font-size: 16px; cursor: pointer;
  transition: transform .18s ease, background .18s ease;
}
.gestion-send:hover { background: var(--accent-deep); transform: translateY(-3px); }
.gestion-send-leaf {
  position: absolute; top: -12px; right: 6px; width: 34px; height: 18px;
  background: #47606b; border-radius: 0 90% 0 90%;
  transform: rotate(-24deg);
}
.gestion-form .form-ok { margin-top: 18px; color: var(--accent-deep); }

.gestion-rdv .estim-duo { margin-top: clamp(22px, 3vw, 38px); }
.estim-tile.tile-white { background: var(--white); }
.tile-white .estim-tile-t { color: var(--accent); }
.tile-white .calendly-ph-txt { color: var(--ink); }
.tile-white .lead-form input, .tile-white .lead-form select {
  background: var(--cream-2, var(--cream)); border: 0; border-radius: 10px;
  padding: 13px 16px; font-family: var(--sans); font-size: 15px; color: var(--ink);
  width: 100%;
}
.tile-white .lead-form { display: flex; flex-direction: column; gap: 12px; }
.tile-white .btn-pill { border: 0; cursor: pointer; font-family: var(--sans); align-self: flex-start; }
.gestion-locs-h2 { margin-top: clamp(46px, 6vw, 76px); }
.gestion-rdv .card { background: var(--blush); }

.gestion-avis .home-h2 { color: var(--white); text-align: left; }
.gestion-quote-wire { text-align: center; margin-top: clamp(54px, 7vw, 96px); }
.gestion-quote-txt {
  color: var(--accent); font-weight: 600;
  font-size: clamp(1.7rem, 3.4vw, 2.9rem); line-height: 1.2;
  margin-bottom: clamp(20px, 3vw, 34px);
}
.gestion-quote-logo { width: clamp(110px, 12vw, 170px); }

@media (max-width: 900px) {
  .blog-hero-grid, .event-duo-wire, .events-bottom, .gestion-form-cols { grid-template-columns: 1fr; }
  .renov-grid { grid-template-columns: 1fr; }
  .gestion-hero .home-h1 { max-width: none; }
}

/* ============================================================
   Habillage — illustrations & photos fournies (août 2026)
   ============================================================ */

/* Blog : croquis du « nouveau projet » d'agence */
.projet-duo {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 40px);
  margin-top: clamp(28px, 4vw, 56px);
}
.projet-duo .projet-illu { margin: 0; }
.projet-duo .projet-illu img {
  display: block; width: 100%; height: clamp(260px, 30vw, 420px);
  object-fit: cover; border-radius: 8px;
}

/* Blog : goodies (tote bag + casquette) */
.goodies-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 40px); align-items: center;
  margin-top: clamp(34px, 5vw, 60px);
}
.goodies-row .goodie-img { margin: 0; }
.goodies-row .goodie-img img {
  display: block; width: 100%; max-width: 260px; margin: 0 auto;
  border-radius: 8px;
}
.goodies-txt { text-align: center; max-width: 44ch; margin: 0 auto; }

/* Contact : façade illustrée */
.contact-illu { margin: 26px 0 0; }
.contact-illu img {
  display: block; width: 100%; max-width: 340px;
  border-radius: 8px;
}

/* Machine à histoires : croquis du fauteuil */
.mh-illu { margin: 0; }
.mh-illu img {
  display: block; width: clamp(160px, 18vw, 240px); border-radius: 8px;
}
@media (min-width: 901px) {
  .mh-illu { position: absolute; top: clamp(80px, 10vw, 140px); right: var(--pad); }
  .mh-main { position: relative; }
}
@media (max-width: 900px) {
  .mh-illu { margin: 18px 0; }
  .projet-duo, .goodies-row { grid-template-columns: 1fr; }
  .goodies-row .goodie-img img { max-width: 200px; }
}

/* Décos crème très pâles (plante, vase, bouquet, panier) */
.deco-cream { width: clamp(70px, 8vw, 120px); opacity: .9; }
.deco-gestion { right: clamp(16px, 4vw, 70px); top: clamp(20px, 4vw, 60px); }
.deco-estim { right: clamp(16px, 4vw, 70px); bottom: clamp(20px, 4vw, 60px); top: auto; }
.deco-blogtips { left: auto; right: clamp(16px, 4vw, 70px); top: clamp(18px, 3vw, 44px); }
.deco-recrut { right: clamp(16px, 4vw, 70px); bottom: clamp(18px, 3vw, 44px); }
@media (max-width: 700px) { .deco-cream { display: none; } }

/* Survol des cartes biens — encadrement orange + panneau technique
   (wireframe : les rectangles oranges dans la grille = état survolé) */
.card { outline: 3px solid transparent; outline-offset: 6px; transition: outline-color .3s ease; }
.card:hover { outline-color: var(--accent-deep); }
.sec-blush .card:hover, .sec-cream .card:hover { outline-color: var(--accent); }
.card-tech {
  position: absolute; inset: 0; z-index: 2;
  background: var(--accent);
  color: var(--white);
  padding: clamp(14px, 1.6vw, 22px) clamp(16px, 1.8vw, 24px);
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0; transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
.card:hover .card-tech { opacity: 1; transform: translateY(0); }
.card-tech-t {
  font-family: var(--knock); text-transform: uppercase;
  letter-spacing: .06em; font-size: 18px;
  color: var(--cream); margin: 0 0 12px;
}
.card-tech ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.card-tech li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-family: var(--sans); font-size: 13.5px; font-weight: 400;
  border-bottom: 2px solid rgba(255, 248, 243, .75); padding-bottom: 6px;
}
.card-tech li span { opacity: .85; }
.card-tech li strong {
  font-weight: 500; text-align: right;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%;
}
/* Le zoom photo est inutile sous le panneau ; on garde les boutons au-dessus */
.card:hover .card-img img { transform: none; }
/* Tactile : pas de survol, le panneau reste masqué */
@media (hover: none) { .card-tech { display: none; } .card { outline: none; } }

/* Visionneuse plein écran des photos de la fiche bien */
.lightbox {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(23, 20, 15, .93);
  display: none; align-items: center; justify-content: center;
}
.lightbox.on { display: flex; }
.lightbox img {
  max-width: 94vw; max-height: 86vh;
  object-fit: contain; border-radius: 6px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}
.lb-close, .lb-prev, .lb-next {
  position: absolute; z-index: 2;
  background: rgba(255, 255, 255, .12); color: var(--white);
  border: 0; border-radius: 50%; cursor: pointer;
  width: 46px; height: 46px; font-size: 26px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .25s;
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background: var(--accent); }
.lb-close { top: 18px; right: 18px; }
.lb-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 14px; top: 50%; transform: translateY(-50%); }
.lb-count {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  color: var(--white); font-family: var(--sans); font-weight: 300;
  font-size: 14px; letter-spacing: .08em; margin: 0; opacity: .85;
}
@media (max-width: 700px) {
  .lb-prev, .lb-next { width: 40px; height: 40px; }
  .lightbox img { max-height: 78vh; }
}

/* Optimisations mobile (août 2026) */
@media (max-width: 700px) {
  /* iOS zoome sur les champs < 16px : on force 16px au focus */
  input, select, textarea { font-size: 16px !important; }
  /* Zones tactiles confortables (44px mini recommandé) */
  .burger { padding: 14px 6px; margin: -14px -6px; }
  .hd-ico { padding: 10px; margin: -10px -4px; }
  .hd-ico svg { width: 21px; height: 21px; }
  .fav-btn, .card-cmp { width: 40px; height: 40px; }
  .card-cmp { right: 60px; }
  /* Le bouton WhatsApp ne doit pas gêner la barre comparateur */
  .cmp-bar { bottom: 84px; }
  /* Fiche bien : la photo principale garde une hauteur raisonnable */
  .fiche-wire .photo-main { height: auto; min-height: 220px; max-height: 62vw; }
  .fiche-wire .photo-main img { max-height: 62vw; }
}

/* ============================================================
   Wireframe v2 (demande cliente — août 2026)
   ============================================================ */

/* Header : bouton « Formulaire acquéreur ».
   Retour 22/09 : le style vit désormais en fin de feuille (bloc « PASTILLE
   D'EN-TÊTE »), après les surcharges v6/v8 qui le repeignaient. */

/* Accueil — Nos services : 6 tuiles colorées, libellés script */
.svc-grid-six {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 22px; max-width: 860px; margin: 0 auto;
}
.svc-six {
  display: flex; align-items: center; justify-content: center;
  min-height: 150px; border-radius: 14px;
  font-family: var(--serif, "Cormorant Garamond", serif); font-style: italic;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 400;
  transition: transform .25s ease, box-shadow .25s ease;
}
.svc-six:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(23,20,15,.14); }
.svc-o { background: var(--accent); color: #fff; }
.svc-b { background: var(--cream, #fdf1e7); color: var(--accent); }

/* Accueil — Notre belle destination */
.dest-h3 {
  text-align: center; font-family: var(--serif, "Cormorant Garamond", serif);
  font-style: italic; font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  color: var(--accent-deep); margin: -8px 0 26px;
}
.dest-duo {
  display: grid; grid-template-columns: 1fr 1fr; gap: 30px;
  max-width: 900px; margin: 0 auto 34px;
}
.dest-duo p {
  background: var(--blush); color: var(--accent-deep);
  border-radius: 14px; padding: 22px 24px; font-size: 15px; line-height: 1.65;
}
.dest-map { max-width: 900px; margin: 0 auto; }

/* Accueil — L'équipe vitaminée */
.vitaminee-duo {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 34px;
  align-items: center; max-width: 940px; margin: 0 auto;
}
.vitaminee-photo img { border-radius: 14px; width: 100%; display: block; }
.vitaminee-txt p:first-child { color: #fff; font-size: 16.5px; line-height: 1.7; margin-bottom: 22px; }

/* Équipe — blocs alternés texte orange / photo */
.eq-bloc { padding-top: 34px; padding-bottom: 34px; }
.eq-bloc-grid {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 34px;
  align-items: stretch; max-width: 1020px; margin: 0 auto;
}
.eq-bloc-rev .eq-bloc-grid .eq-bloc-txt { order: 2; }
.eq-bloc-rev .eq-bloc-grid .eq-bloc-photo { order: 1; }
.eq-bloc-txt {
  background: var(--accent); color: #fff;
  border-radius: 16px; padding: 30px 32px;
}
.eq-bloc-txt p { font-size: 14.5px; line-height: 1.7; margin-bottom: 14px; }
.eq-bloc-h2 {
  font-family: var(--knock-cond); font-weight: 400; text-transform: none;
  font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.05;
  color: var(--blush); margin-bottom: 18px;
}
.eq-bloc-photo { margin: 0; }
.eq-bloc-photo img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 16px; display: block; min-height: 260px;
}

/* Cartes — bulle prix orange (wireframe : étiquette prix sur la photo) */
.card-price {
  display: inline-block; background: var(--accent); color: #fff;
  font-size: 1.15rem; padding: 4px 16px 5px; border-radius: 4px;
  position: relative; z-index: 3; margin-top: -30px; margin-bottom: 8px;
  box-shadow: 0 3px 10px rgba(23,20,15,.18);
}
.card:hover .card-price { background: var(--accent-deep); }

/* Biens vendus : photos en noir et blanc (wireframe p.11) */
.biens-vendus .card-img img, .card-off .card-img img { filter: grayscale(1); }
.biens-vendus .card:hover .card-img img, .card-off:hover .card-img img { filter: grayscale(.35); }

/* Location-gestion : cases à cocher du formulaire acquéreur */
.gestion-checks {
  border: none; background: #fff; border-radius: 12px;
  padding: 12px 16px 14px; margin: 0 0 12px;
}
.gestion-checks legend {
  padding: 0 4px; color: var(--accent-deep);
  text-transform: uppercase; letter-spacing: .12em;
}
.gestion-checks label {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-size: 13.5px; color: var(--ink, #17140f);
  padding: 4px 0; cursor: pointer;
}
.gestion-checks input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); }

/* Blog — article, rénovations photos, investissement, newsletter */
.blog-article p { color: var(--accent-deep); font-size: 15px; line-height: 1.7; margin-bottom: 13px; }
.renov-grid-photos {
  display: grid; grid-template-columns: 1fr 1fr; gap: 26px;
  max-width: 900px; margin: 0 auto 30px;
}
.renov-fig { margin: 0; }
.renov-fig .renov-photo { margin: 0 0 10px; }
.renov-fig .renov-photo img { width: 100%; height: 240px; object-fit: cover; border-radius: 14px; display: block; }
.renov-fig figcaption strong { display: block; color: var(--accent); font-weight: 600; font-size: 15px; }
.renov-fig figcaption .micro { color: var(--ink-soft, #6f675c); }
/* v6 strict (02/09) — wireframe p.18 : H4 en gras blanc aligné à gauche, texte blanc à gauche */
.blog-invest-h4 {
  text-align: left; font-family: var(--sans); font-style: normal;
  font-weight: 700; font-size: clamp(1.05rem, 1.8vw, 1.3rem); color: var(--white); margin: 0 0 18px;
}
.blog-invest-txt { max-width: 72ch; margin: 0 0 26px; }
.blog-invest-txt p { color: #fff; font-size: 15px; line-height: 1.7; margin-bottom: 13px; text-align: left; }
.blog-invest-txt strong { color: var(--white); font-weight: 800; }
.h3-orange-news { color: var(--accent); }
.blog-news-form { max-width: 640px; margin: 22px auto 0; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.blog-news-form input { flex: 1 1 220px; }
.blog-news-form .form-ok { flex-basis: 100%; text-align: center; }

/* Patrimoine — avant/après photos */
.aa-grid-photos {
  display: grid; grid-template-columns: 1fr 1fr; gap: 26px;
  max-width: 860px; margin: 0 auto 26px;
}
.aa-fig { margin: 0; }
.aa-fig .aa-photo { margin: 0 0 10px; }
.aa-fig .aa-photo img { width: 100%; height: 250px; object-fit: cover; border-radius: 14px; display: block; }
.aa-fig figcaption {
  text-align: center; color: #fff; font-family: var(--knock-cond);
  text-transform: none; letter-spacing: .02em; font-size: 1.05rem;
}

@media (max-width: 700px) {
  .svc-grid-six { grid-template-columns: 1fr; gap: 14px; }
  .svc-six { min-height: 110px; }
  .dest-duo, .vitaminee-duo, .eq-bloc-grid,
  .renov-grid-photos, .aa-grid-photos { grid-template-columns: 1fr; }
  .card-price { margin-top: -26px; font-size: 1.05rem; }
}

/* ===================== Wireframe v2 — corrections (p.4-9 magazine, blog, formulaire acquéreur) */

/* Magazine « L'équipe vitaminée » — à faire défiler (p.4-9) */
.eq-mag {
  display: flex; gap: clamp(16px, 2.5vw, 28px);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 6px 4px 18px; margin-top: clamp(18px, 3vw, 30px);
}
.eq-mag > * {
  flex: 0 0 min(760px, 88vw); scroll-snap-align: center;
  border-radius: 18px; overflow: hidden; min-height: 440px;
}
.eq-mag-slide { background: var(--cream, #fdf3ec); }
.eq-mag-note { text-align: center; color: var(--accent-deep); letter-spacing: .14em; text-transform: uppercase; }

.eq-slide-cover {
  background: var(--accent); display: flex; align-items: center; justify-content: center;
  padding: clamp(24px, 4vw, 44px);
}
.eq-cover-frame { text-align: center; }
.eq-cover-logo { width: 130px; margin-bottom: 16px; }
.eq-cover-titre {
  font-family: var(--display); font-style: italic; font-weight: 400;
  color: var(--cream); font-size: clamp(22px, 2.6vw, 34px);
  margin: 0 0 14px;
}
.eq-cover-photo { margin: 0; }
.eq-cover-photo img {
  width: min(300px, 60vw); height: 320px; object-fit: cover;
  border: 6px solid var(--white); border-radius: 6px; display: block; margin: 0 auto;
}

.eq-slide-duo, .eq-slide-orange, .eq-slide-biens {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: clamp(16px, 2.5vw, 28px); padding: clamp(20px, 3vw, 34px);
  align-items: stretch;
}
.eq-mag-txt {
  background: var(--accent); color: var(--white); border-radius: 14px;
  padding: clamp(20px, 3vw, 30px);
}
.eq-mag-h3 {
  font-family: var(--knock-cond, var(--knock)); text-transform: uppercase;
  color: var(--blush); font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: .95; margin: 0 0 14px; letter-spacing: .02em;
}
.eq-mag-txt p { font-size: 13.5px; line-height: 1.65; margin-bottom: 11px; }
.eq-mag-txt strong { color: var(--blush); }
.eq-mag-photo { margin: 0; }
.eq-mag-photo img {
  width: 100%; height: 100%; min-height: 300px; object-fit: cover;
  border-radius: 14px; display: block;
}
.eq-ph-dessin {
  border-radius: 14px; background: var(--blush);
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--accent-deep); font-family: var(--sans); font-size: 14px;
  letter-spacing: .08em; text-transform: uppercase; min-height: 300px;
}
.eq-ph-dessin em { display: block; font-style: italic; text-transform: none; letter-spacing: 0; font-family: var(--serif); font-size: 15px; margin-top: 6px; }

.eq-slide-photos {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.5vw, 28px); padding: clamp(20px, 3vw, 34px);
}
.eq-slide-orange { background: var(--accent); position: relative; }
/* Retour cliente 14/09 : petits dessins blancs au trait, comme la maquette */
.eq-doodle { position: absolute; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .85; pointer-events: none; }
.eq-doo-vases  { left: 40%; top: 5%; width: clamp(64px, 7vw, 104px); }
.eq-doo-lampe  { right: 2.5%; top: 4%; width: clamp(30px, 3.4vw, 50px); }
.eq-doo-miroir { left: 42%; bottom: 4%; width: clamp(48px, 5.4vw, 80px); }
.eq-doo-plante { right: 3%; bottom: 3%; width: clamp(44px, 5vw, 74px); }
@media (max-width: 700px) { .eq-doodle { display: none; } }
.eq-slide-orange .eq-mag-txt { background: transparent; padding: clamp(8px, 1.5vw, 14px); }
.eq-slide-biens { grid-template-columns: 1.25fr 1fr; }
.eq-slide-biens .eq-mag-txt { align-self: start; }

/* Blog — jardins (placeholders) + newsletter fond crème */
.jardin-ph-tile {
  height: 240px; border-radius: 14px; background: var(--blush);
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--accent-deep); font-family: var(--sans); font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase;
}
.jardin-ph-tile em { display: block; font-family: var(--serif); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 15px; margin-top: 6px; }
.blog-news-white { text-align: left; }
.blog-news-h3-orange {
  font-family: var(--serif); color: var(--accent);
  font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.15; margin-bottom: 22px;
}
.blog-news-white .blog-news-form input {
  background: var(--blush); color: var(--accent-deep); border: 0;
}
.blog-news-white .blog-news-form input::placeholder { color: var(--accent-deep); opacity: 1; }
.blog-news-white .blog-news-form .form-ok { color: var(--accent-deep); }

/* Formulaire acquéreur (p.16) — champs saumon sur fond crème */
.gestion-form-blush input, .gestion-form-blush select {
  background: var(--blush); color: var(--accent-deep);
}
.gestion-form-blush input::placeholder { color: var(--accent-deep); opacity: 1; }
.gestion-form-blush select:invalid { color: var(--accent-deep); }
.gestion-form-blush .gestion-checks { background: var(--blush); }
.gestion-form-blush .gestion-checks label { color: var(--accent-deep); }
.gestion-hero { text-align: center; }
.gestion-hero .home-h1 { max-width: none; margin-left: auto; margin-right: auto; }
.gestion-hero .gestion-form { margin: clamp(22px, 3.5vw, 40px) auto 0; text-align: left; }

/* « Des mots doux sur Voilà » — avis façon petits papiers (p.16) */
.avis-papers {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 3vw, 34px); max-width: 980px;
  margin: clamp(24px, 4vw, 40px) auto 18px;
}
.avis-paper {
  position: relative; margin: 0; background: var(--white); color: var(--ink, #17140f);
  padding: 30px 20px 18px; border-radius: 3px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
  background-image: repeating-linear-gradient(transparent, transparent 25px, rgba(234, 91, 12, .12) 26px);
}
.avis-paper:nth-child(1) { transform: rotate(-1.6deg); }
.avis-paper:nth-child(2) { transform: rotate(1.2deg) translateY(10px); }
.avis-paper:nth-child(3) { transform: rotate(-.8deg); }
.avis-paper-tape {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%) rotate(-2deg);
  width: 74px; height: 22px; background: rgba(214, 178, 130, .85); border-radius: 2px;
}
.avis-paper blockquote { margin: 0; }
.avis-paper blockquote p { font-family: var(--serif); font-style: italic; font-size: 14.5px; line-height: 1.6; color: #3c342c; }
.avis-paper figcaption { margin-top: 10px; color: var(--accent-deep); letter-spacing: .12em; text-transform: uppercase; font-size: 10px; }
.avis-note-orange a { color: var(--white); }
.gestion-motsdoux .avis-cta { text-align: center; margin-top: 26px; }
.gestion-motsdoux .avis-note { text-align: center; }

@media (max-width: 760px) {
  .eq-mag > * { flex-basis: 92vw; min-height: 0; }
  .eq-slide-duo, .eq-slide-orange, .eq-slide-biens, .eq-slide-photos { grid-template-columns: 1fr; }
  .eq-mag-photo img { min-height: 220px; height: 220px; }
  .avis-papers { grid-template-columns: 1fr; }
  .avis-paper:nth-child(2) { transform: none; }
}

/* Magazine — effet livre : pages qui se tournent */
.equipe-mag-cadre { position: relative; }
.eq-book-pages { cursor: pointer; }
.eq-book { position: relative; max-width: 880px; margin: clamp(18px, 3vw, 30px) auto 0; outline: none; }
.eq-book-pages {
  position: relative; height: clamp(470px, 56vw, 580px);
  perspective: 2600px;
}
.eq-mag-slide {
  position: absolute; inset: 0; margin: 0;
  border-radius: 18px; overflow: hidden; overflow-y: auto;
  transform-origin: left center;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: transform 1s cubic-bezier(.45, .05, .3, 1), box-shadow 1s ease;
  will-change: transform;
  box-shadow: 2px 10px 28px rgba(0, 0, 0, .14);
}
.eq-mag-slide.flipped { transform: rotateY(-180deg); pointer-events: none; box-shadow: none; }
/* reliure : léger dégradé côté gauche, comme la pliure d'un magazine */
.eq-mag-slide::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 26px;
  background: linear-gradient(90deg, rgba(0, 0, 0, .10), transparent);
  pointer-events: none; z-index: 2;
}
.eq-slide-duo, .eq-slide-orange, .eq-slide-biens, .eq-slide-photos { height: 100%; box-sizing: border-box; }
.eq-book-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%; border: 0;
  background: var(--accent); color: var(--white);
  font-size: 26px; line-height: 1; cursor: pointer; z-index: 30;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
  transition: background .18s ease, transform .18s ease, opacity .18s ease;
}
.eq-book-arrow:hover:not(:disabled) { background: var(--accent-deep); transform: translateY(-50%) scale(1.08); }
.eq-book-arrow:disabled { opacity: .25; cursor: default; }
.eq-book-prev { left: -18px; }
.eq-book-next { right: -18px; }
.eq-book-dots { display: flex; justify-content: center; gap: 9px; margin-top: 16px; }
.eq-book-dot {
  width: 10px; height: 10px; border-radius: 50%; border: 0; padding: 0;
  background: var(--blush); cursor: pointer; transition: background .18s ease, transform .18s ease;
}
.eq-book-dot.on { background: var(--accent); transform: scale(1.25); }
@media (max-width: 760px) {
  .eq-book-pages { height: 560px; perspective: 1600px; }
  .eq-book-prev { left: 4px; }
  .eq-book-next { right: 4px; }
  .eq-book-arrow { width: 40px; height: 40px; font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .eq-mag-slide { transition: none; }
}

/* Magazine v2 — vrai feuillet recto/verso qui se tourne */
.eq-mag-slide {
  background: transparent; overflow: visible; border-radius: 0;
  box-shadow: none; backface-visibility: visible; -webkit-backface-visibility: visible;
  transform-style: preserve-3d;
  transition: transform 1.25s cubic-bezier(.32, .08, .18, 1);
}
.eq-mag-slide::before { content: none; }
/* Retour 09/09 — magazine sans rebords arrondis */
.pg-front, .pg-back {
  position: absolute; inset: 0; border-radius: 0; overflow: hidden; overflow-y: auto;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 2px 10px 28px rgba(0, 0, 0, .14);
  transition: box-shadow 1.25s ease;
}
.pg-front { background: var(--cream, #fdf3ec); }
/* pliure côté reliure */
.pg-front::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 26px;
  background: linear-gradient(90deg, rgba(0, 0, 0, .10), transparent);
  pointer-events: none; z-index: 2;
}
/* le verso, visible pendant que la page tourne */
.pg-back {
  transform: rotateY(180deg);
  background:
    radial-gradient(circle at 30% 25%, rgba(251, 193, 171, .35), transparent 55%),
    var(--cream, #fdf3ec);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; overflow: hidden;
}
.pg-back img { width: 110px; opacity: .8; }
.pg-back .micro { color: var(--accent-deep); letter-spacing: .16em; text-transform: uppercase; }
/* lumière rasante sur le verso, côté pliure */
.pg-back::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(0, 0, 0, .16), transparent 45%);
  pointer-events: none;
}
/* pendant la rotation : la page se soulève, grande ombre portée qui balaie la suivante */
.eq-mag-slide.turning .pg-front,
.eq-mag-slide.turning .pg-back {
  box-shadow: -26px 34px 48px rgba(0, 0, 0, .32);
}
.eq-mag-slide.flipped .pg-front,
.eq-mag-slide.flipped .pg-back { box-shadow: none; }

/* ===================== Magazine v3 — flipbook StPageFlip (papier qui se courbe, coin attrapable) */
/* Retour cliente 02/09 : magazine moins grand (ça faisait « couverture de magazine » géante) */
.eq-book { max-width: 640px; }
.eq-book-pages { height: auto; aspect-ratio: 880 / 620; perspective: none; }
.eq-mag-slide,
.eq-mag-slide.flipped,
.eq-mag-slide.turning {
  position: absolute;
  background: transparent;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  transition: none !important;
  transform-style: flat;
  transform-origin: 0 0;
  backface-visibility: visible;
  pointer-events: auto;
}
.eq-mag-slide::before { content: none; }
.pg-back { display: none; }
.pg-front {
  position: absolute;
  inset: 0;
  height: 100%;
  transition: none;
  backface-visibility: visible;
  overflow-y: auto;
}
.pg-front.eq-slide-cover,
.pg-front.eq-slide-orange { background: var(--accent); position: relative; }
/* Retour cliente 14/09 : petits dessins blancs au trait, comme la maquette */
.eq-doodle { position: absolute; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .85; pointer-events: none; }
.eq-doo-vases  { left: 40%; top: 5%; width: clamp(64px, 7vw, 104px); }
.eq-doo-lampe  { right: 2.5%; top: 4%; width: clamp(30px, 3.4vw, 50px); }
.eq-doo-miroir { left: 42%; bottom: 4%; width: clamp(48px, 5.4vw, 80px); }
.eq-doo-plante { right: 3%; bottom: 3%; width: clamp(44px, 5vw, 74px); }
@media (max-width: 700px) { .eq-doodle { display: none; } }
.eq-book-arrow { z-index: 40; }
@media (max-width: 760px) {
  /* page portrait sur mobile (le flipbook passe en 440 × 620) */
  .eq-book-pages { height: auto; aspect-ratio: 440 / 620; }
  .eq-book { max-width: 100%; }
  .eq-book-arrow { width: 38px; height: 38px; font-size: 21px; }
  .eq-book-prev { left: 6px; }
  .eq-book-next { right: 6px; }
  .eq-book-dot { width: 12px; height: 12px; }
  .eq-mag-h3 { font-size: clamp(1.35rem, 5.5vw, 1.7rem); }
  .eq-mag-txt { padding: 16px 18px; }
  .eq-mag-txt p { font-size: 12.5px; line-height: 1.55; margin-bottom: 9px; }
  .eq-mag-photo img { min-height: 170px; height: 200px; }
  .eq-ph-dessin { min-height: 190px; }
  .eq-cover-logo { width: 96px; margin-bottom: 10px; }
  .eq-cover-photo img { width: min(240px, 62vw); height: 260px; border-width: 5px; }
  .eq-slide-duo, .eq-slide-orange, .eq-slide-biens, .eq-slide-photos { padding: 16px; gap: 12px; }
}

/* ===================== Magazine v4 — Retour 09/09 : diaporama esprit kinfolk.com
   (fondu lent plein cadre, défilement auto, angles droits, plus de flipbook) */
.eq-mag-slide,
.eq-mag-slide.flipped,
.eq-mag-slide.turning {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0;
  border-radius: 0;
  transition: opacity 1.4s ease !important;
  pointer-events: none;
  z-index: 1;
}
.eq-mag-slide.on { opacity: 1; pointer-events: auto; z-index: 2; }
.pg-front { border-radius: 0; box-shadow: 0 14px 34px rgba(0, 0, 0, .10); }
.pg-front::before { content: none; }
.eq-book-arrow:disabled { opacity: 1; cursor: pointer; }
/* Couverture fermée A4 → ouverture en double page (wireframe p.12-13) :
   hauteur fixe, seule la largeur s'anime, comme un magazine qu'on ouvre. */
.eq-book .eq-book-pages {
  aspect-ratio: auto;
  height: clamp(420px, 33vw, 480px);
  width: min(660px, 100%);
  margin-left: auto; margin-right: auto;
  transition: width .9s cubic-bezier(.6, .05, .25, 1);
}
.eq-book.mag-closed .eq-book-pages {
  /* format A4 portrait : largeur = hauteur × 210/297 */
  width: min(340px, calc(clamp(420px, 33vw, 480px) * .707));
}
/* pas de barre de défilement dans les pages */
.eq-mag-slide { overflow: hidden !important; }
/* la couverture tient entièrement dans le format A4 */
.eq-slide-cover { flex-direction: column; padding: clamp(14px, 2vw, 24px); }
.eq-cover-logo { width: 92px; margin-bottom: 6px; }
.eq-slide-cover .eq-cover-titre { font-size: clamp(19px, 2.1vw, 26px); margin: 0 0 10px; }
.eq-cover-photo img {
  height: clamp(240px, 22vw, 300px); width: auto; max-width: 100%;
  object-fit: cover; border-width: 5px;
}
/* Angles droits aussi à l'intérieur des pages (retour 09/09) */
.eq-mag-txt, .eq-mag-photo img, .eq-ph-dessin, .eq-cover-photo img { border-radius: 0; }
/* Texte plus compact pour tenir dans le cadre réduit du magazine */
.eq-mag-h3 { font-size: clamp(1.35rem, 2.2vw, 1.8rem); margin-bottom: 10px; }
.eq-mag-txt { padding: clamp(16px, 2.2vw, 24px); overflow: hidden; }
.eq-mag-txt p { font-size: 12.5px; line-height: 1.5; margin-bottom: 8px; }
.eq-mag-photo img, .eq-ph-dessin { min-height: 0; }
@media (prefers-reduced-motion: reduce) {
  .eq-mag-slide, .eq-mag-slide.flipped, .eq-mag-slide.turning { transition: none !important; }
}

/* ===================== Blog — conformité wireframe p.14-15 */
/* Vignette façade : portrait entier, non recadré, comme la maquette */
.blog-hero-grid {
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  align-items: start;
}
.blog-hero-photo img {
  width: min(400px, 100%); height: auto; object-fit: contain;
  border-radius: 8px; margin: 0 auto;
}
/* Texte de l'article : blanc surligné sur bandeaux orange (maquette p.14) */
.blog-article p { margin-bottom: 14px; line-height: 2.05; }
.blog-article .hl {
  background: var(--accent); color: #fff;
  padding: 4px 9px; border-radius: 3px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  font-size: 13.5px; line-height: inherit;
}
.blog-hero-cta { text-align: right; }
.blog-hero-txt .btn-pill { margin-top: 8px; }
/* Parlons investissement : « Notre objectif » surligné blanc sur orange (p.15) */
.blog-invest-txt strong { color: #fff; }
.blog-invest-txt .hl-inv {
  background: #fff; color: var(--accent); font-weight: 700;
  padding: 2px 7px; border-radius: 3px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
@media (max-width: 900px) {
  .blog-hero-grid { grid-template-columns: 1fr; }
  .blog-hero-photo img { width: min(320px, 80vw); }
}
/* Colonne de texte étroite comme la maquette : les bandeaux se replient */
.blog-hero-txt { max-width: 600px; }
.blog-article .hl { font-size: 14px; }

/* ================================================================
   FEEDBACK 28/08 — services illustrés, destination dessinée
   ================================================================ */

/* Fond « dessiné » : traits crayon très légers, uniquement dans les marges
   latérales pour ne jamais passer sous les cartes (feedback 28/08 : le
   fauteuil dépassait sous « Déménager »). */
.svc-dessine {
  background-color: var(--blush-soft);
  background-image:
    url("deco/etoile.svg"), url("deco/plante.svg"), url("deco/orange.svg");
  background-repeat: no-repeat;
  background-position: 6% 18%, 94% 70%, 93% 10%;
  background-size: 80px, 100px, 60px;
}
@media (max-width: 1500px) {
  .svc-dessine { background-image: none; }
}

/* Cartes allégées (feedback 28/08 : « trop lourd ») : grille contenue et
   centrée, visuels plus petits, plus de blanc, cadre discret sans bordure. */
.svc-grid-illu {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(36px, 4vw, 56px) clamp(28px, 3vw, 44px);
  max-width: 1080px;
  margin-inline: auto;
}
.svc-illu {
  display: flex; flex-direction: column;
  background: transparent;
  border-radius: 0; overflow: visible;
  border: 0;
  text-align: center;
  transition: transform .3s;
}
.svc-illu:hover { transform: translateY(-4px); box-shadow: none; }
.svc-illu-img {
  display: block; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(23, 20, 15, .08);
  background: var(--white);
}
.svc-illu-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.svc-illu:hover .svc-illu-img img { transform: scale(1.03); }
.svc-illu-t {
  font-family: var(--display); font-size: 1.3rem; font-weight: 500;
  color: var(--accent-deep);
  padding: 18px 8px 2px;
}
.svc-illu-p {
  font-size: 13.5px; color: var(--ink-soft); line-height: 1.6;
  padding: 0 14px;
  max-width: 300px; margin-inline: auto;
}
.home-services .home-h2 { margin-bottom: clamp(36px, 4vw, 56px); }
.home-services .svc-ctas { margin-top: clamp(40px, 4.5vw, 64px); }
.svc-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.svc-ctas .btn-pill-cream { border: 1px solid rgba(201,74,5,.3); }

@media (max-width: 900px) { .svc-grid-illu { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .svc-grid-illu { grid-template-columns: 1fr; } }

/* Notre belle destination : dessin de la Cité + textes */
.dest-illu-duo {
  display: grid; grid-template-columns: minmax(280px, 46%) 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  margin-bottom: clamp(28px, 4vw, 48px);
}
.dest-illu { margin: 0; }
.dest-illu img {
  width: 100%; border-radius: 12px;
  border: 1px solid var(--line-soft);
}
.dest-illu figcaption { margin-top: 10px; color: var(--ink-soft); text-align: center; }
@media (max-width: 820px) { .dest-illu-duo { grid-template-columns: 1fr; } }

/* ================================================================
   BLOG — esprit journal (feedback 28/08, wireframe p.11-12)
   ================================================================ */

.jnl-masthead {
  text-align: center;
  border-top: 3px double var(--ink);
  border-bottom: 3px double var(--ink);
  padding: 18px 0 14px;
  margin-bottom: clamp(28px, 4vw, 48px);
}
.jnl-edition, .jnl-date { color: var(--ink-soft); letter-spacing: .22em; }
.jnl-titre {
  font-family: var(--display);
  font-size: clamp(1.9rem, 4.2vw, 3.4rem);
  font-weight: 600; line-height: 1.08;
  margin: 10px 0 8px; color: var(--ink);
}
.jnl-h2 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px; margin-bottom: 16px;
}
.jnl-h3 {
  font-family: var(--display); font-weight: 600; font-size: 1.15rem;
  margin-bottom: 10px; color: var(--accent-deep);
}

.jnl-grid {
  /* Retour 11/09 : la colonne de « carrés » a été retirée — une pleine largeur */
  display: grid; grid-template-columns: 1fr;
}
.jnl-lead-photo img { width: 100%; border: 1px solid var(--line-soft); margin-bottom: 16px; }
.jnl-cols {
  column-count: 2; column-gap: 28px;
  column-rule: 1px solid var(--line-soft);
  font-size: 14.5px; line-height: 1.7; color: var(--ink-soft);
}
.jnl-cols p { margin-bottom: 12px; break-inside: avoid; }
.jnl-cols p:first-child::first-letter {
  font-family: var(--display); font-size: 3.1em; font-weight: 600;
  float: left; line-height: .85; padding: 4px 8px 0 0; color: var(--accent);
}
.jnl-cta { margin-top: 18px; }

.jnl-side { display: flex; flex-direction: column; gap: 18px; }
.jnl-bloc {
  border: 1px solid var(--line); padding: 18px 20px;
  background: var(--white);
}
.jnl-bloc-rose { background: var(--blush-soft); border-color: rgba(201,74,5,.2); }
.jnl-bloc p { font-size: 14px; color: var(--ink-soft); margin-bottom: 10px; }
.jnl-bloc .micro a { color: var(--accent-deep); }
.jnl-breves { list-style: none; padding: 0; margin: 0 0 12px; }
.jnl-breves li { border-bottom: 1px dotted var(--line); padding: 9px 0; font-size: 13.5px; }
.jnl-breves li:last-child { border-bottom: 0; }
.jnl-breves strong { color: var(--accent-deep); text-transform: lowercase; }
.jnl-breve-prix { display: block; color: var(--ink); font-weight: 600; margin-top: 2px; }

.jnl-duo {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3.5vw, 48px); align-items: start;
}
.jnl-grid-3 {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.6vw, 32px); align-items: start;
}
.jnl-avis blockquote { font-family: var(--serif); font-style: italic; font-size: 15px; line-height: 1.55; margin-bottom: 6px; }
.jnl-avis { margin: 0 0 16px; }
.jnl-coupon { border: 2px dashed var(--accent); background: var(--blush-soft); }
.jnl-coupon .lead-form input { background: var(--white); margin-bottom: 10px; }

@media (max-width: 980px) {
  .jnl-grid { grid-template-columns: 1fr; }
  .jnl-grid-3 { grid-template-columns: 1fr; }
  .jnl-duo { grid-template-columns: 1fr; }
}
@media (max-width: 640px) { .jnl-cols { column-count: 1; } }

/* v6 strict (02/09) — wireframe p.18-19 : article illustration à gauche / texte à droite,
   section orange « Parlons investissement », rénovations puis jardins + newsletter empilés */
.jnl-lead-v6 .jnl-lead-duo {
  display: grid; grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(20px, 3vw, 44px); align-items: start;
}
.jnl-lead-v6 .jnl-cols { column-count: 1; }
/* Retour 11/09 : section centrée */
.blog-invest-v6 { color: var(--white); text-align: center; }
/* Retour cliente 14/09 : tout le bloc centré comme le titre */
.blog-invest-v6 .blog-invest-h4 { text-align: center; }
.blog-invest-v6 .blog-invest-txt { margin-left: auto; margin-right: auto; }
.blog-invest-v6 .blog-invest-txt p { margin-left: auto; margin-right: auto; text-align: center; }
.blog-invest-v6 .center { text-align: center; }
.jnl-renov-v6, .jnl-jardins-v6 { text-align: left; }
.jnl-renov-v6 .jnl-h2, .jnl-jardins-v6 .jnl-h2 {
  color: var(--accent); border-bottom: 0; text-align: left;
}
.jnl-renov-v6 > p:last-child { text-align: center; }
.jnl-renov-v6 .renov-grid-photos, .jnl-jardins-v6 .renov-grid-photos {
  margin-left: 0; margin-right: 0; max-width: none;
}
.jnl-renov-v6 .renov-fig .renov-photo img, .jnl-jardins-v6 .renov-fig .renov-photo img {
  height: auto; aspect-ratio: 3 / 2;
}
.blog-invest-h3 {
  font-family: var(--display); font-size: clamp(1.9rem, 4vw, 3.2rem);
  font-weight: 400; margin: 0 0 6px;
}
.blog-invest-h4 { font-size: clamp(1.05rem, 1.8vw, 1.3rem); font-weight: 700; margin: 0 0 18px; }
.blog-invest-txt p { max-width: 72ch; margin: 0 0 14px; line-height: 1.65; }
.blog-invest-txt strong { font-weight: 800; }
.jnl-jardins-v6 .jnl-news-h3 {
  font-family: var(--serif); color: var(--accent);
  font-size: clamp(1.3rem, 2.4vw, 1.9rem); margin: clamp(26px, 4vw, 48px) 0 16px;
}
/* Retour 11/09 : les deux blocs « tips » côte à côte */
.jnl-tips-v6 { padding-top: clamp(30px, 4vw, 54px); padding-bottom: clamp(30px, 4vw, 54px); }
.jnl-tips-duo {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 2.6vw, 32px); max-width: 1100px; margin: 0 auto;
}
@media (max-width: 860px) { .jnl-tips-duo { grid-template-columns: 1fr; } }
/* Retour 11/09 : newsletter plus petite et centrée */
.news-v6 { max-width: 560px; margin-left: auto; margin-right: auto; }
.jnl-jardins-v6 .jnl-news-h3 { text-align: center; }
.news-v6 .form-row { display: grid; grid-template-columns: 1fr; gap: 14px; width: 100%; flex-basis: 100%; }
.news-v6 { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.news-v6 input { width: 100%; }
.news-v6 input { background: var(--accent); color: var(--white); border-radius: 4px; }
.news-v6 input::placeholder { color: var(--white); opacity: .95; }
@media (max-width: 860px) { .jnl-lead-v6 .jnl-lead-duo { grid-template-columns: 1fr; } }
/* p.18 : une du journal sur fond saumon, H1/H2 orange, texte blanc */
.jnl-une { background: var(--blush); padding-top: clamp(26px, 3.2vw, 48px); padding-bottom: clamp(26px, 3.2vw, 48px); } /* Retour cliente 14/09 : moins épais */
.jnl-une .jnl-lead-photo { max-width: 360px; }
.jnl-une .jnl-lead-duo { grid-template-columns: auto 1fr; align-items: start; }
@media (max-width: 860px) {
  .jnl-une .jnl-lead-duo { grid-template-columns: 1fr; }
  .jnl-une .jnl-lead-photo { max-width: 100%; }
}
.jnl-une .jnl-masthead { border: 0; text-align: left; padding: 0; margin-bottom: 12px; }
.jnl-une .jnl-titre { color: var(--accent); }
.jnl-une .jnl-edition, .jnl-une .jnl-date { color: var(--white); }
.jnl-une .jnl-h2 { color: var(--accent); border-bottom: 0; }
.jnl-une .jnl-cols { color: var(--white); column-rule: 0; }
.jnl-une .blog-article p { color: #17140f; }
/* Retour cliente 02/09 : format « bullet journal » comme la maquette —
   chaque paragraphe de la une sur sa bande saumon foncée */
.jnl-une .blog-article p {
  /* Retour cliente 14/09 : plus de fond foncé — texte noir directement
     sur le fond saumon de la une */
  background: none;
  padding: 0; border-radius: 0;
  width: auto; max-width: 100%;
  margin-bottom: 12px;
}
.jnl-une .jnl-cols p:first-child::first-letter {
  float: none; font-size: inherit; font-weight: inherit;
  margin: 0; line-height: inherit;
}
.jnl-une .jnl-cols p:first-child::first-letter { color: var(--accent-deep); }
.jnl-une .jnl-lead-photo img { border: 0; }

/* Une du journal : image déjà recadrée sur la devanture (blog-une.png, archivée le 07/10),
   plus aucun crop CSS nécessaire (feedback 28/08 : photo mal cadrée). */
.jnl-lead-photo img { max-height: none; object-fit: unset; object-position: unset; }

/* « Notre belle destination » : le dessin garde sa composition entière
   (l'arche + la Cité) mais dans un cadre contenu — fini la grande photo
   qui écrase la section (feedback 28/08). */
.dest-illu-duo {
  grid-template-columns: minmax(240px, 340px) minmax(0, 620px);
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 4vw, 64px);
  max-width: 1080px;
  margin-inline: auto;
}
.dest-illu { justify-self: center; }
.dest-illu-duo .dest-duo { display: flex; flex-direction: column; gap: 20px; }
.dest-illu img {
  width: auto; max-width: 100%; max-height: 460px;
  margin: 0 auto;
  box-shadow: 0 12px 32px rgba(23, 20, 15, .10);
}
@media (max-width: 820px) {
  .dest-illu img { max-height: 380px; }
}

/* ================================================================
   Feedback 28/08 (bis) : page « Nos biens » plus aérée.
   - grille resserrée en largeur (max 1180px) et centrée → vraies marges
   - gouttières plus généreuses entre les biens
   - respiration dans la carte (padding, interlignes)
   - plus d'air autour des filtres et des titres de section
   ================================================================ */
.biens-wire .grid {
  max-width: 1180px;
  margin-inline: auto;
  gap: clamp(60px, 7vw, 96px) clamp(40px, 4.5vw, 64px);
}
.biens-wire .card .card-body { padding: 24px 26px 28px; }
.biens-wire .card .card-price { margin-bottom: 10px; }
.biens-wire .card .card-title { margin-bottom: 5px; }
.biens-wire .card .card-city { margin-bottom: 12px; }
.biens-wire .card .card-meta { padding-top: 12px; margin-bottom: 4px; }
.biens-wire .card .card-contact { margin-top: 14px; }
.biens-wire .filters-blush { margin-bottom: clamp(44px, 5vw, 72px); }
.biens-wire .home-h2 { margin-bottom: 10px; }
.biens-wire .count { margin-bottom: clamp(28px, 3.5vw, 48px); }
/* Retour cliente 02/09 : au survol d'un bien, les autres s'estompent */
@media (hover: hover) {
  .biens-wire .grid:hover .card,
  .biens-wire .grid:hover .filterable { transition: opacity .22s ease, filter .22s ease; }
  .biens-wire .grid:hover .filterable:not(:hover) .card,
  .biens-wire .grid:hover > .card:not(:hover) { opacity: .45; filter: saturate(.6); }
}
/* Bouton « Voir plus de biens » */
.voirplus-wrap { margin: clamp(30px, 4vw, 52px) 0 0; }
.biens-loc { margin-top: clamp(80px, 9vw, 130px); }
.biens-vendus { padding-top: clamp(60px, 7vw, 100px); }

/* Le compteur « 76 bien(s) » était blanc sur fond rose pâle : illisible. */
.count-white { color: var(--accent-deep); }

/* ===== Boîte à artisans — wireframe v2 p.18 : cartes polaroid (28/08) ===== */
.art-cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3.5vw, 48px) clamp(24px, 3vw, 40px);
  max-width: 1080px; margin-inline: auto;
  align-items: start;
  padding-top: 14px; /* place pour le ruban qui dépasse */
}
.art-card {
  position: relative;
  background: var(--blush-soft);
  border-radius: 6px;
  padding: 36px 26px 30px;
}
/* Disposition décalée du wireframe : 3 cartes en quinconce, puis 2 recentrées */
.art-card:nth-child(1) { margin-top: 26px; }
.art-card:nth-child(2) { margin-top: 58px; }
.art-card:nth-child(4) { grid-column: 1 / 2; justify-self: end; width: min(100%, 330px); }
.art-card:nth-child(5) { grid-column: 2 / 4; justify-self: center; width: min(100%, 440px); margin-top: 26px; }
.art-ruban {
  position: absolute; top: -13px; left: 50%;
  transform: translateX(-50%);
  width: 64%; height: 30px;
  background: var(--accent);
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%, 14px 50%);
}
.art-label {
  font-weight: 600; color: var(--accent-deep);
  font-size: 15.5px; line-height: 1.5;
  margin-bottom: 18px;
}
.art-photos { display: flex; gap: 14px; justify-content: center; }
.art-ph {
  display: block; flex: 1 1 0; max-width: 250px;
  background: var(--white);
  padding: 8px 8px 24px;
  box-shadow: 0 8px 20px rgba(23, 20, 15, .12);
}
.art-ph img { display: block; width: 100%; height: auto; }

/* Page artisans (fond blanc) — v6 strict (02/09) wireframe p.22 :
   H2 « NOTRE BOITE À ARTISANS » en majuscules orange, lede partenariat en orange,
   « Un projet de travaux ? » reste en minuscules (annotation p.22). */
.artisans-main .home-h1 { margin-bottom: 8px; text-transform: uppercase; }
.art-lede { color: var(--accent); max-width: 620px; margin-bottom: clamp(36px, 4.5vw, 60px); }
.artisans-main .home-h2 { margin-top: clamp(56px, 6.5vw, 90px); }
.art-form input {
  background: var(--blush); border: 0; border-radius: 8px;
  padding: 15px 20px; margin-bottom: 14px;
  text-align: center; font-weight: 600; color: var(--accent-deep);
}
.art-form input:focus { outline: 2px solid var(--accent); border: 0; }
.art-form ::placeholder {
  color: var(--accent-deep); font-weight: 600;
  font-size: 13.5px; letter-spacing: .02em; text-transform: none;
}
.art-form button { width: auto; display: block; margin: 22px auto 0; padding: 13px 44px; }

/* Sur la page patrimoine (fond rose pâle) : cartes blanches, polaroids crème */
.patri-main .art-card { background: var(--white); box-shadow: 0 8px 22px rgba(23, 20, 15, .06); }
.patri-main .art-ph { background: var(--cream); box-shadow: 0 6px 16px rgba(23, 20, 15, .12); }
.patri-main .art-cards { margin-bottom: 10px; }

@media (max-width: 900px) {
  .art-cards { grid-template-columns: 1fr; max-width: 440px; }
  .art-card:nth-child(n) { margin-top: 0; grid-column: auto; justify-self: stretch; width: auto; }
}

/* ============================================================
   Wireframe v6 (demande cliente — 01/09) : header crème,
   logo script orange, liens orange, retour des fonds orange.
   ============================================================ */
.site-header { background: var(--cream); }
body.scrolled .site-header { box-shadow: 0 1px 0 rgba(201, 74, 5, .18); }
.hd-nav a { color: var(--accent); }
.hd-nav a:hover, .hd-nav a.active { opacity: 1; color: var(--accent-deep); }
.burger { color: var(--accent); }
.burger-ico i { background: var(--accent); }
.hd-ico { color: var(--accent); }
/* La pastille « Formulaire acquéreur » est traitée en fin de feuille. */

/* --- Accueil v6 (p.1-2) : bandeau orange « Nos biens » qui défile --- */
.home-defile { padding-bottom: clamp(46px, 5vw, 70px); }
.home-defile .home-h2 { color: var(--cream); }
.defile-wrap { overflow: hidden; margin: clamp(26px, 3vw, 40px) calc(-1 * clamp(20px, 5vw, 84px)) 30px; }
.defile {
  display: flex; gap: clamp(18px, 2.2vw, 30px); width: max-content;
  animation: defile-loop 55s linear infinite; will-change: transform;
}
.defile-wrap:hover .defile { animation-play-state: paused; }
@keyframes defile-loop { to { transform: translateX(-50%); } }
.defile-tile {
  flex: 0 0 auto; width: clamp(240px, 24vw, 320px);
  background: var(--white); border-radius: 6px;
  padding: 10px 10px 12px; text-decoration: none; color: var(--ink);
  box-shadow: 0 12px 26px rgba(120, 40, 0, .22);
  transition: transform .25s ease;
}
.defile-tile:hover { transform: translateY(-4px); }
.defile-tile img {
  display: block; width: 100%; height: clamp(160px, 15vw, 210px);
  object-fit: cover; border-radius: 3px;
}
.defile-cap {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  margin-top: 9px; font-size: .82rem; line-height: 1.3;
}
.defile-cap span { font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.defile-cap strong { color: var(--accent-deep); white-space: nowrap; }

/* --- Accueil v6 : « Notre belle destination » sur fond orange --- */
.home-destination.sec-orange .home-h2,
.home-destination.sec-orange .dest-h3 { color: var(--cream); }
.home-destination.sec-orange .dest-duo {
  background: var(--cream); border-radius: 10px;
  padding: clamp(20px, 2.6vw, 32px) clamp(22px, 3vw, 38px); color: var(--ink);
}
.home-destination.sec-orange .dest-illu {
  background: var(--cream); border-radius: 10px; padding: 14px;
}
.home-destination.sec-orange .micro { color: var(--ink-soft); }
.home-destination.sec-orange .dest-map iframe { border: 6px solid var(--cream); border-radius: 10px; }
@media (prefers-reduced-motion: reduce) { .defile { animation: none; } }

/* --- Page agence v6 (p.3) : « Voilà, l'immobilier comme une maison » --- */
.sec-cream { background: var(--cream); }
.agence-maison .h1-orange { color: var(--accent); }
.agc-h2 {
  font-family: var(--display); color: var(--accent);
  font-size: clamp(24px, 2.6vw, 34px); font-weight: 600;
  margin: 6px 0 18px; line-height: 1.2;
}
.agc-strong { font-weight: 700; color: var(--accent-deep); margin-bottom: clamp(24px, 3vw, 40px); }
.agc-grid {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 4vw, 64px); align-items: start; max-width: 1080px;
}
.agc-txt p { color: var(--accent); margin-bottom: 1.1em; max-width: 46ch; }
.agc-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.agc-photos .media-photo { margin: 0; border-radius: 6px; overflow: hidden; box-shadow: 0 10px 24px rgba(23,20,15,.14); }
.agc-photos .media-photo:nth-child(2) { margin-top: 34px; }
.agc-photos img { display: block; width: 100%; height: clamp(220px, 24vw, 330px); object-fit: cover; }
.agence-services { position: relative; overflow: hidden; padding-bottom: clamp(60px, 7vw, 100px); }
.agence-services .home-h2 { color: var(--cream); }
.agc-svc-grid {
  display: flex; flex-wrap: wrap; gap: clamp(18px, 2.4vw, 32px);
  max-width: 860px; margin: clamp(26px, 3vw, 40px) auto 0; justify-content: center;
}
.agc-svc-btn {
  flex: 1 1 200px; max-width: 250px; text-align: center;
  background: var(--cream); color: var(--accent-deep);
  border: 2px solid var(--accent-deep); border-radius: 4px;
  padding: 18px 10px; text-decoration: none;
  font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .82rem;
  transition: transform .2s ease, background .2s ease;
}
.agc-svc-btn:hover { transform: translateY(-3px); background: var(--white); }
.deco-agc-orange { position: absolute; left: -40px; bottom: -46px; width: 190px; opacity: .9; }
@media (max-width: 900px) {
  .agc-grid { grid-template-columns: 1fr; }
  .agc-photos .media-photo:nth-child(2) { margin-top: 0; }
}

/* --- Pages services v6 (p.4-7) : store rayé + étapes numérotées --- */
.svc-main, .svc-second { position: relative; overflow: hidden; }
/* Retour cliente 09/2026 : store rayé supprimé des pages services. */
.svc-main .home-h1 { position: relative; }
.svc-duo {
  display: grid; grid-template-columns: minmax(300px, 420px) 1fr;
  gap: clamp(30px, 4.5vw, 70px); align-items: start;
  max-width: 1080px; margin-top: clamp(24px, 3vw, 40px); position: relative;
}
.svc-duo-inverse { grid-template-columns: 1fr minmax(300px, 420px); }
.svc-steps { display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 34px); }
.svc-step { display: flex; gap: 16px; align-items: flex-start; }
.svc-step-num {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent); color: var(--white);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .95rem; margin-top: -6px;
}
.svc-step-card {
  background: var(--blush-soft); border-radius: 4px;
  padding: 18px 22px 20px; flex: 1;
}
.svc-step-t {
  font-family: var(--display); color: var(--accent-deep);
  letter-spacing: .12em; text-transform: uppercase;
  font-size: .95rem; margin-bottom: 8px;
}
.svc-step-card p { color: var(--accent); font-size: .92rem; margin: 0; }
.svc-photo { margin: 0; align-self: center; }
/* v6 strict (02/09) : la photo se cale à droite, sous le store rayé */
.svc-main .svc-duo { max-width: none; }
.svc-main .svc-photo { justify-self: end; margin-right: clamp(10px, 4vw, 90px); }
.svc-photo img {
  display: block; width: 100%; max-width: 560px;
  border-radius: 6px; box-shadow: 0 12px 28px rgba(23,20,15,.14);
}
.svc-cta { margin-top: clamp(28px, 3.4vw, 46px); }
.svc-second .home-h2 { color: var(--cream); position: relative; text-transform: uppercase; }
.svc-second .svc-step-card { background: var(--cream); }
.svc-second .svc-step-num { background: var(--cream); color: var(--accent-deep); }
.svc-second .svc-photo img { box-shadow: 0 12px 28px rgba(120, 40, 0, .3); }
@media (max-width: 900px) {
  .svc-duo, .svc-duo-inverse { grid-template-columns: 1fr; }
  .svc-store { right: 0; width: 50vw; height: 110px; }
  .svc-duo-inverse .svc-photo { order: 2; }
}

/* --- Estimation v6 (p.14) : biens vendus n&b + vidéos avis --- */
/* Retour cliente 02/09 : 3 biens vendus visibles, le reste à faire défiler */
.vendus-grid {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * clamp(20px, 2.6vw, 36px)) / 3);
  gap: clamp(20px, 2.6vw, 36px); max-width: 1080px; margin-top: clamp(24px, 3vw, 40px);
  overflow-x: auto; padding-bottom: 14px;
  scroll-snap-type: x mandatory;
  scrollbar-color: var(--accent) transparent;
}
.vendus-grid .vendu-tile { scroll-snap-align: start; }
.vendu-tile { display: flex; flex-direction: column; }
.vendu-ph { display: block; overflow: hidden; border-radius: 4px 4px 0 0; }
.vendu-ph img {
  display: block; width: 100%; height: clamp(170px, 16vw, 230px);
  object-fit: cover; filter: grayscale(1); transition: filter .35s ease;
}
.vendu-tile:hover .vendu-ph img { filter: grayscale(0); }
.vendu-cap {
  display: flex; justify-content: space-between; gap: 14px; align-items: center;
  background: var(--accent); color: var(--white);
  padding: 12px 16px; border-radius: 0 0 4px 4px; font-size: .88rem;
}
.vendu-t { font-weight: 700; line-height: 1.25; }
.vendu-t small { font-weight: 500; opacity: .85; }
.vendu-cap strong { white-space: nowrap; font-size: 1rem; }
.videos-avis-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.6vw, 36px); max-width: 900px; margin: clamp(24px, 3vw, 40px) auto 18px;
}
.video-ph {
  display: flex; align-items: center; justify-content: center;
  height: clamp(150px, 14vw, 200px); border-radius: 8px;
  background: var(--blush); color: var(--accent-deep); font-size: 2rem;
  border: 2px dashed rgba(201, 74, 5, .4);
}
.estim-videos-note a { color: var(--accent-deep); }
@media (max-width: 900px) {
  .videos-avis-grid { grid-template-columns: 1fr; }
  .vendus-grid { grid-auto-columns: 82%; }
}

/* --- Nos biens v6 (p.15) : titres orange + barre de filtres orange --- */
.biens-main .biens-h1, .biens-main .home-h2.h2-white-left { color: var(--accent); }
.biens-main .count-white { color: var(--accent-deep); }
.biens-wire .filters-blush { background: var(--accent); border-radius: 14px; }
.biens-wire .f-reset-blush, .biens-wire .filters-blush .btn-ghost {
  background: var(--cream); color: var(--accent-deep);
}
.biens-wire .f-reset-blush:hover { background: var(--white); color: var(--accent-deep); }

/* ============ v6 — fiche bien p.16-17 : frais de notaire + comparer 2 biens */
.fiche-comparer-v6 .home-h2 { text-align: left; }
.cmp-duo {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px); margin-top: 26px;
}
.cmp-h3 { font: 700 clamp(17px, 1.6vw, 21px)/1.3 var(--display); margin: 0 0 12px; }
.cmp-h3 a { color: var(--cream); text-decoration: none; }
.cmp-h3 a:hover { text-decoration: underline; }
.cmp-mosaic { display: grid; gap: 10px; margin-top: 18px; }
.cmp-big {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 0; display: block;
}
.cmp-smalls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cmp-small {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 0; display: block;
}
/* Retour 09/09 (image8) : tableau à lignes blanches, valeur à droite. */
.cmp-tbl {
  list-style: none; margin: 4px 0 0; padding: 0;
  color: var(--white); font-size: clamp(14px, 1.2vw, 16px);
}
.cmp-tbl li {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 14px; padding: 9px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, .85);
}
.cmp-tbl li strong { font-weight: 700; white-space: nowrap; }
.fiche-comparer-v6 .center { margin-top: 30px; }
@media (max-width: 760px) {
  .cmp-duo { grid-template-columns: 1fr; }
}

/* ============ v6 — contact p.20 : formulaire tuiles oranges + mots doux */
.ct-h1 {
  font: 700 clamp(26px, 3.2vw, 44px)/1.15 var(--display);
  color: var(--accent); text-transform: uppercase; letter-spacing: .01em;
  margin: 0 0 30px;
}
.ct-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 3vw, 40px); align-items: start;
}
.ct-col { display: grid; gap: 14px; }
.ct-form input, .ct-form textarea {
  background: var(--accent); color: var(--white);
  border: 0; border-radius: 8px; padding: 13px 16px;
  font: 500 15px/1.4 var(--sans); width: 100%; box-sizing: border-box;
}
.ct-form input::placeholder, .ct-form textarea::placeholder {
  color: rgba(255,255,255,.92); opacity: 1;
}
.ct-form input:focus, .ct-form textarea:focus {
  outline: 2px solid var(--accent-deep); background: var(--accent-deep);
}
.ct-cases {
  border: 0; margin: 0; padding: 14px 16px;
  background: var(--accent); border-radius: 8px; color: var(--white);
  display: grid; gap: 8px;
}
.ct-cases legend {
  float: left; width: 100%; padding: 0 0 6px;
  font: 700 13px/1.2 var(--sans); text-transform: uppercase; letter-spacing: .06em;
}
.ct-case { display: flex; align-items: center; gap: 9px; font: 500 14px/1.35 var(--sans); cursor: pointer; }
.ct-case input {
  width: 17px; height: 17px; accent-color: var(--cream);
  flex: none; padding: 0; margin: 0;
}
.ct-send { margin-top: 22px; }
.ct-coord { margin-top: 26px; color: var(--ink-soft); text-align: center; }
.ct-coord a { color: var(--accent-deep); }

.contact-mots .mots-h2 { text-align: left; text-transform: uppercase; }
.mots-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3.4vw, 48px); margin: 34px 0 30px;
  align-items: start;
}
.mot-doux {
  margin: 0; position: relative; background: #fcfcf7;
  background-image: repeating-linear-gradient(to bottom, transparent 0 26px, rgba(90,120,180,.18) 26px 27px);
  padding: 34px 22px 22px; border-radius: 3px;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  color: var(--ink);
}
.mot-doux:nth-child(1) { transform: rotate(-2.2deg); }
.mot-doux:nth-child(2) { transform: rotate(1.6deg); margin-top: 18px; }
.mot-doux:nth-child(3) { transform: rotate(-1.2deg); }
.mot-doux::before {
  content: ""; position: absolute; top: -13px; left: 50%;
  width: 92px; height: 26px; transform: translateX(-50%) rotate(-1.5deg);
  background: rgba(214,177,132,.85); box-shadow: 0 2px 5px rgba(0,0,0,.15);
}
.mot-doux blockquote {
  margin: 0; font: italic 500 clamp(14px, 1.25vw, 16px)/26px var(--sans);
}
.mot-doux figcaption { margin-top: 10px; font: 700 13px/1.3 var(--sans); color: var(--accent-deep); }
.mots-note-avis { text-align: center; margin-top: 14px; }
.mots-note-avis a { color: var(--cream); }
@media (max-width: 860px) {
  .ct-grid, .mots-grid { grid-template-columns: 1fr; }
  .mot-doux:nth-child(2) { margin-top: 0; }
}

/* ============ v6 — artisans p.22 : éventail pantone interactif */
.pant-wrap {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(24px, 4vw, 60px); align-items: stretch;
  margin: 40px 0 60px;
}
.pant-fan {
  position: relative;
  min-height: clamp(340px, 34vw, 480px);
}
.pant-card {
  position: absolute; left: 28%; bottom: 10%;
  width: clamp(170px, 17vw, 250px); aspect-ratio: 3 / 4.1;
  border: 0; padding: 0; cursor: pointer; background: none;
  border-radius: 6px; overflow: hidden;
  transform-origin: 50% 130%;
  transform: rotate(calc(var(--i) * 14deg - 28deg));
  z-index: calc(10 - var(--i));
  box-shadow: 4px 6px 18px rgba(0,0,0,.28);
  transition: transform .3s ease, box-shadow .3s ease;
}
.pant-card .pant-img, .pant-card img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.pant-label {
  position: absolute; left: 10px; bottom: 8px; right: 8px;
  color: var(--white); text-align: left;
  font: 700 clamp(12px, 1.1vw, 15px)/1.2 var(--sans);
  letter-spacing: .04em; text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(0,0,0,.65);
  pointer-events: none;
}
.pant-card:hover { transform: rotate(calc(var(--i) * 14deg - 28deg)) translateY(-10px); }
.pant-card.active {
  transform: rotate(calc(var(--i) * 14deg - 28deg)) translateY(-26px) scale(1.05);
  z-index: 20; box-shadow: 6px 12px 28px rgba(0,0,0,.35);
}
.pant-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.pant-panel {
  background: var(--accent); color: var(--white);
  border-radius: 10px; padding: clamp(24px, 3vw, 44px);
  display: flex; flex-direction: column; justify-content: center;
  text-align: center; gap: 12px;
  transition: background .3s ease;
}
.pant-panel.on { background: var(--accent-deep); }
.pant-panel h3 {
  margin: 0; font: 700 clamp(19px, 1.9vw, 26px)/1.25 var(--display);
  color: var(--cream);
}
.pant-panel p { margin: 0; font: 500 clamp(14px, 1.25vw, 17px)/1.6 var(--sans); }
@media (max-width: 860px) {
  .pant-wrap { grid-template-columns: 1fr; }
  .pant-fan { min-height: clamp(300px, 78vw, 420px); }
  .pant-card { width: clamp(150px, 34vw, 210px); }
  .pant-panel { min-height: 160px; }
}

/* ===== Page agence v6 — wireframe p.3 exact ===== */
.agence-v6{position:relative;overflow:hidden;padding-bottom:clamp(70px,9vw,130px)}
.agc-h1{font-family:var(--display);color:var(--cream);text-transform:uppercase;font-weight:700;font-size:clamp(30px,4.2vw,50px);letter-spacing:.04em;margin:0 0 clamp(18px,2.5vw,34px)}
.agc-h2v6{font-family:var(--display);color:var(--cream);text-transform:uppercase;font-weight:700;font-size:clamp(19px,2.2vw,28px);letter-spacing:.05em;margin:0 0 clamp(14px,2vw,24px)}
.agc-strong-v6{color:#fff;font-family:var(--sans);font-weight:700;font-size:clamp(16px,1.6vw,20px);line-height:1.5;margin:0 0 clamp(20px,2.6vw,34px)}
.agc-grid-v6{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.4vw,52px);align-items:start}
.agc-txt-v6 p{color:var(--cream);font-family:var(--sans);font-size:clamp(15px,1.35vw,18px);line-height:1.75;margin:0 0 1.1em}
.agc-photos-v6{display:grid;gap:clamp(12px,1.4vw,18px)}
.agc-ph-big{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:10px;display:block}
.agc-ph-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.4vw,18px)}
.agc-ph-small{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;display:block}
.agc-full-v6{color:#fff;font-family:var(--sans);font-size:clamp(15px,1.4vw,18px);line-height:1.75;margin:clamp(26px,3.4vw,50px) 0 0;max-width:70ch}
/* Retour cliente 02/09 : moins d'espace avant « Nos services » + design des boutons revu
   (4 cartes crème sur une ligne, ombre douce, survol blanc) */
.agence-svc-v6{padding-top:clamp(30px,3.6vw,54px)}
.agc-svc-titre{margin-top:0;text-align:center;font-size:clamp(22px,2.6vw,32px)}
.agc-svc-grid-v6{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px);max-width:1100px;margin:clamp(18px,2.2vw,32px) auto 0;position:relative;z-index:2}
.agc-svc-grid-v6 .agc-svc-btn{flex:none;width:100%;max-width:none;min-height:clamp(88px,9vw,130px);background:var(--cream);border:0;border-radius:14px;color:var(--accent);font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.08em;text-align:center;font-size:clamp(16px,1.6vw,22px);padding:clamp(26px,3.2vw,44px) 14px;box-shadow:0 10px 24px rgba(0,0,0,.14);display:flex;align-items:center;justify-content:center;transition:background .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease;text-decoration:none}
.agc-svc-grid-v6 .agc-svc-btn:hover,.agc-svc-grid-v6 .agc-svc-btn:focus-visible{background:var(--white);color:var(--accent-deep);transform:translateY(-4px);box-shadow:0 16px 32px rgba(0,0,0,.2)}
.deco-agc-orange{position:absolute;left:-30px;bottom:-24px;width:clamp(120px,13vw,190px);opacity:1;pointer-events:none;z-index:1}
/* v6 strict (02/09) : p.3 haut sur fond clair, texte orange ;
   visuels = petite photo douche + grande illustration « Bonne nuit » */
/* Retour 09/09 : le texte passe en noir ; seuls les titres et la liste
   des services restent orange. */
.agence-clair-v6 .agc-h1{color:var(--accent)}
.agc-h1-net{font-family:var(--knock);letter-spacing:.03em;font-size:clamp(36px,4.8vw,64px);margin:0 0 4px}
.agc-slogan-net{
  font-family:var(--display);font-style:italic;font-weight:400;
  color:var(--accent);font-size:clamp(19px,2.2vw,28px);
  margin:0 0 clamp(20px,2.6vw,34px);
}
.agence-clair-v6 .agc-strong-v6{color:var(--ink)}
.agence-clair-v6 .agc-txt-v6 p{color:var(--ink)}
.agence-clair-v6 .agc-full-v6{color:var(--ink)}
.agence-clair-v6 .agc-txt-v6 p.agc-svc-list{
  color:var(--accent);font-weight:700;letter-spacing:.02em;
  font-family:var(--display);font-size:clamp(15px,1.5vw,19px);
}
/* Retour cliente 02/09 : visuels moins hauts + texte centré verticalement
   pour supprimer les grands vides sous le texte */
.agc-grid-v6{align-items:center}
/* Retour cliente 09/2026 : plus de store rayé — section « nos services »
   claire : titre + sous-titre manuscrit + 4 cartes numérotées. */
.agc-svc-net{
  background:var(--cream);
  padding:clamp(40px,5.5vw,84px) var(--pad) clamp(48px,6vw,96px);
}
.agc-svc-h2-net{
  font-family:var(--knock);color:var(--accent);
  text-transform:uppercase;font-weight:700;
  font-size:clamp(34px,4.6vw,64px);letter-spacing:.03em;
  text-align:center;margin:0 0 6px;
}
.agc-svc-sous-net{
  font-family:var(--display);font-style:italic;font-weight:400;
  color:var(--ink);font-size:clamp(18px,2vw,26px);
  text-align:center;margin:0 0 clamp(26px,3.2vw,44px);
}
.agc-svc-cartes{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,1.8vw,26px);
  max-width:1180px;margin:0 auto;
}
.agc-svc-carte{
  display:flex;flex-direction:column;gap:clamp(16px,2.2vw,34px);
  background:#fff;border:2px solid var(--accent);border-radius:16px;
  padding:clamp(18px,2.2vw,28px) clamp(18px,2vw,26px);
  text-decoration:none;
  transition:background .18s ease,transform .18s ease,box-shadow .18s ease;
}
.agc-svc-num{
  font-family:var(--sans);font-weight:700;font-size:13px;
  letter-spacing:.18em;color:var(--accent);
}
.agc-svc-nom{
  font-family:var(--knock);text-transform:uppercase;font-weight:700;
  font-size:clamp(22px,2.3vw,32px);letter-spacing:.04em;
  color:var(--accent);line-height:1;
}
.agc-svc-go{
  font-family:var(--sans);font-weight:700;font-size:20px;
  color:var(--accent);margin-top:auto;align-self:flex-end;
  transition:transform .18s ease;
}
.agc-svc-carte:hover,.agc-svc-carte:focus-visible{
  background:var(--accent);transform:translateY(-4px);
  box-shadow:0 14px 30px rgba(234,91,12,.24);
}
.agc-svc-carte:hover .agc-svc-num,
.agc-svc-carte:hover .agc-svc-nom,
.agc-svc-carte:hover .agc-svc-go,
.agc-svc-carte:focus-visible .agc-svc-num,
.agc-svc-carte:focus-visible .agc-svc-nom,
.agc-svc-carte:focus-visible .agc-svc-go{color:var(--cream)}
.agc-svc-carte:hover .agc-svc-go{transform:translateX(4px)}
@media (max-width:900px){
  .agc-svc-cartes{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .agc-svc-cartes{grid-template-columns:1fr}
}
/* Maquette image13 : grande illustration « Bonne nuit », petite photo douche
   qui la chevauche à gauche, centrée verticalement. */
/* Retour 09/09 : composition compacte comme la maquette, quelle que soit la
   largeur d'écran — texte ~60 %, illustration ~40 %, photo douche à cheval. */
.agence-clair-v6 .agc-grid-v6{max-width:1240px;margin:0 auto;grid-template-columns:1fr 1.15fr;align-items:center}
.agence-clair-v6.home-sec{padding-bottom:clamp(28px,3.6vw,52px)}
/* Maquette finale : grande illustration à droite, DEUX photos empilées à
   gauche (salon rayé en haut, salle d'eau en bas), légèrement à cheval sur
   le bord gauche de l'illustration, cadres blancs fins. */
/* Retour : sans superposition — photos posées à côté de l'illustration */
/* Retour 11/09 : trio de photos équilibré en haut de la page agence */
.agc-duo-v6{display:grid;grid-template-columns:1fr 1fr 1fr;gap:clamp(12px,1.4vw,20px);align-items:stretch;width:100%}
.agc-duo-v6 figure{margin:0}
.agc-duo-v6 figure img{width:100%;height:100%;aspect-ratio:3/4;object-fit:cover;display:block;border:6px solid #fff;box-shadow:0 10px 24px rgba(23,20,15,.18)}

/* Retour cliente 09/2026 : composition photo agence (fini les 3 photos alignées) */
.agc-compo { position: relative; min-height: clamp(380px, 40vw, 560px); }
.agc-compo .agc-c {
  position: absolute; object-fit: cover; display: block;
  border: 6px solid #fff; border-radius: 4px;
  box-shadow: 0 18px 44px rgba(120, 40, 0, .22);
  transition: transform .5s ease;
}
.agc-c1 { width: 68%; aspect-ratio: 4/3; left: 0; top: 4%; transform: rotate(-2.5deg); z-index: 1; }
.agc-c2 { width: 52%; aspect-ratio: 4/3; right: 0; top: 34%; transform: rotate(2deg); z-index: 2; }
.agc-c3 { width: 40%; aspect-ratio: 3/4; left: 8%; bottom: 0; transform: rotate(-1.5deg); z-index: 3; }
.agc-compo .agc-c:hover { transform: rotate(0) scale(1.03); z-index: 5; }
.agc-compo-badge {
  position: absolute; right: 4%; top: 8%; z-index: 4;
  background: var(--accent); color: #fff;
  font-family: var(--display); font-style: italic;
  font-size: clamp(14px, 1.4vw, 18px); line-height: 1.25;
  padding: 12px 16px; border-radius: 50%;
  width: clamp(96px, 9vw, 130px); height: clamp(96px, 9vw, 130px);
  display: flex; align-items: center; justify-content: center; text-align: center;
  transform: rotate(6deg);
  box-shadow: 0 10px 26px rgba(120, 40, 0, .25);
}

/* La maison Voilà — visite pièce par pièce (renders 3D) */
.maison-sec { text-align: center; }
.maison-h2 { text-transform: uppercase; }
.maison-sous {
  font-family: var(--display); font-style: italic; color: var(--ink-soft);
  max-width: 52ch; margin: 8px auto clamp(24px, 3vw, 40px);
}
.maison-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
  max-width: 1180px; margin: 0 auto;
}
.maison-tuile { margin: 0; }
.maison-tuile img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block;
  border: 6px solid #fff; border-radius: 4px;
  box-shadow: 0 14px 34px rgba(120, 40, 0, .16);
  transition: transform .45s ease, box-shadow .45s ease;
}
.mt-a img, .mt-d img { transform: rotate(-1.6deg); }
.mt-b img, .mt-e img { transform: rotate(1.2deg); }
.mt-c img, .mt-f img { transform: rotate(-0.8deg); }
.maison-tuile:hover img { transform: rotate(0) scale(1.035); box-shadow: 0 20px 44px rgba(120, 40, 0, .24); }
.maison-tuile figcaption {
  font-family: var(--display); font-style: italic;
  color: var(--accent-deep); font-size: 16px; margin-top: 10px;
}
.maison-note {
  font-family: var(--display); font-style: italic; color: var(--ink-soft);
  margin-top: clamp(22px, 3vw, 36px);
}
@media (max-width: 860px) {
  .maison-grid { grid-template-columns: 1fr 1fr; }
  .agc-compo { min-height: 78vw; }
}
@media (max-width: 560px) {
  .maison-grid { grid-template-columns: 1fr; }
}
.agc-illu-nuit{width:100%;display:block}
.agc-full-v6{margin-top:clamp(16px,2vw,28px)}
@media (max-width:860px){
  .agc-grid-v6{grid-template-columns:1fr}
  .agence-clair-v6 .agc-grid-v6{grid-template-columns:1fr}
  .agc-txt-v6{min-width:0}
  .agc-svc-grid-v6{grid-template-columns:1fr 1fr}
  .agc-svc-grid-v6 .agc-svc-btn:nth-child(4){grid-column:1 / -1}
}
@media (max-width:540px){
  .agc-svc-grid-v6{grid-template-columns:1fr}
  .agc-svc-grid-v6 .agc-svc-btn:nth-child(4){grid-column:auto}
}

/* ===== Accueil — Notre belle destination v6 (wireframe p.1 bas) ===== */
.dest-v6{position:relative;overflow:hidden;
  max-width:min(1380px,calc(100% - 2*clamp(14px,3.2vw,64px)));
  margin-left:auto;margin-right:auto;
  padding-top:clamp(30px,3.4vw,54px);padding-bottom:clamp(30px,3.4vw,54px)}
/* fin filet crème en retrait, façon carte postale */
.dest-v6::after{content:"";position:absolute;inset:clamp(10px,1.1vw,18px);
  border:1.5px solid rgba(255,244,230,.5);pointer-events:none}
.dest-h3-v6{font-family:var(--display);color:var(--cream);font-weight:700;font-size:clamp(19px,2.2vw,28px);margin:clamp(10px,1.4vw,18px) 0 clamp(18px,2.4vw,30px)}
.dest-grid-v6{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,3.6vw,60px);align-items:center;max-width:1240px;margin:0 auto}
/* Retour cliente 14/09 : disposition éditoriale — nom de la ville en titre,
   texte dessous, filet fin entre les deux blocs */
.dest-txt-v6{display:flex;flex-direction:column;gap:clamp(20px,2.4vw,34px);max-width:46ch}
.dest-item{position:relative}
.dest-item + .dest-item{padding-top:clamp(20px,2.4vw,34px);border-top:1px solid rgba(255,244,230,.4)}
.dest-city{font-family:var(--display);color:var(--cream);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:clamp(15px,1.4vw,19px);margin:0 0 .55em}
.dest-city::after{content:"";display:block;width:34px;height:3px;background:var(--cream);opacity:.85;margin-top:7px}
.dest-txt-v6 p{color:var(--cream);font-family:var(--sans);font-size:clamp(14px,1.35vw,17.5px);line-height:1.75;margin:0}
/* Retour 09/09 (v2, conforme maquette image5/image14) : 3 polaroïds à cadre
   blanc, inclinés et superposés, à la même hauteur que le bloc de texte. */
.dest-mood{position:relative;display:flex;align-items:center;justify-content:center;padding:clamp(8px,1vw,16px) 0}
/* Retour 11/09 : collage PNG fourni par la cliente (Image Home Page.png) */
.dest-mood-collage{display:flex;align-items:center;justify-content:center}
.dest-collage{display:block;width:100%;max-width:660px;height:auto;
  transform:rotate(1.6deg);
  filter:drop-shadow(0 16px 30px rgba(23,20,15,.22));
  transition:transform .4s ease}
.dest-mood-collage:hover .dest-collage{transform:rotate(0deg) scale(1.015)}
/* Retour cliente 14/09 : section moins épaisse */
.pola{margin:0;background:#fff;padding:clamp(6px,.7vw,11px) clamp(6px,.7vw,11px) clamp(11px,1.2vw,18px);box-shadow:0 12px 28px rgba(0,0,0,.22)}
.pola img{display:block;width:100%;height:100%;object-fit:cover}
.pola-1{width:32%;aspect-ratio:3/4;transform:rotate(-6deg);z-index:3;position:relative}
.pola-2{width:30%;aspect-ratio:3/4;transform:rotate(-1deg);margin:0 -4.5%;z-index:2}
.pola-3{width:33%;aspect-ratio:3/4;transform:rotate(5deg);z-index:4}
.pola-1 .pola-in{position:relative;display:block;width:100%;height:100%;background:#fff;overflow:hidden}
.pola-1 .p1-carte{position:absolute;left:-6%;bottom:-4%;width:96%;height:auto}
.pola-1 .p1-chaussons{position:absolute;left:-9%;top:-10%;width:62%;height:auto;transform:rotate(-6deg)}
.pola-1 .p1-tote{position:absolute;right:-10%;bottom:-8%;width:60%;height:auto;transform:rotate(4deg)}
.dm-verre{position:absolute;left:-3%;bottom:-6%;width:clamp(70px,7vw,110px);transform:rotate(6deg);filter:drop-shadow(0 8px 18px rgba(0,0,0,.22));z-index:5}
@media (max-width:860px){
  .dest-grid-v6{grid-template-columns:1fr}
  .dest-mood{max-width:480px;margin:0 auto}
  .dest-mood-collage{margin-top:0}
  .dest-collage{max-width:460px;margin:0 auto}
}

/* ===== Accueil v6 — conformité stricte wireframe p.1-2 (02/09) ===== */
/* p.1 haut : photo pleine largeur (femme au café), pas de titre visible */
.home-hero-v6{padding:0;background:var(--white)}
.hero-photo-v6{display:block;width:100%;height:clamp(340px,46vw,640px);object-fit:cover}
/* p.1 : bandeau saumon « NOS BIENS » (serif orange majuscules), carrousel sur fond clair */
.defile-v6{background:var(--white);padding-top:0;color:var(--ink)}
.defile-v6 .home-h2{
  background:var(--blush-soft);color:var(--accent);
  text-transform:uppercase;text-align:left;
  margin:0 calc(-1 * var(--pad)) 0;
  padding:clamp(26px,3.4vw,48px) var(--pad);
}
.defile-v6 .defile-wrap{margin-bottom:0}
/* p.1 bas : titres destination en majuscules */
.dest-v6 .home-h2{text-transform:uppercase}
/* p.2 : « NOTRE AGENCE » en majuscules, mosaïque 7 tuiles (3 + 4) */
.home-agence .home-h2{text-transform:uppercase}
.mosaic-v6{grid-template-columns:repeat(12,1fr)}
.mosaic-v6 .mos-tile:nth-child(1){grid-column:span 5}
.mosaic-v6 .mos-tile:nth-child(2){grid-column:span 3}
.mosaic-v6 .mos-tile:nth-child(3){grid-column:span 4}
.mosaic-v6 .mos-tile:nth-child(4){grid-column:span 3}
.mosaic-v6 .mos-tile:nth-child(5){grid-column:span 3}
.mosaic-v6 .mos-tile:nth-child(6){grid-column:span 3}
.mosaic-v6 .mos-tile:nth-child(7){grid-column:span 3}
.mosaic-v6 .mos-word{text-transform:uppercase;color:var(--white)}
/* Retour 11/09 : meilleur angle de cadrage des photos de la mosaïque */
.mosaic-v6 .mos-tile:nth-child(1) .mos-photo img{object-position:center 74%}
.mosaic-v6 .mos-tile:nth-child(3) .mos-photo img{object-position:center 28%}
.mosaic-v6 .mos-tile:nth-child(5) .mos-photo img{object-position:center 68%}
.mosaic-v6 .mos-tile:nth-child(7) .mos-photo img{object-position:center 50%}
@media (max-width:700px){
  .mosaic-v6 .mos-tile{grid-column:span 6 !important}
}

/* ===== Pages services : H1 majuscules + lien H2 section liée ===== */
.svc-main .home-h1{text-transform:uppercase}
.svc-h2-link{color:inherit;text-decoration:none}
.svc-h2-link:hover,.svc-h2-link:focus-visible{text-decoration:underline;text-underline-offset:6px}

/* ===== Page Nos biens v6 (wireframe p.15) ===== */
.biens-h1-v6{text-transform:uppercase}
.biens-v6 .filters-orange{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;background:var(--accent);padding:14px clamp(14px,2vw,24px);border-radius:4px;margin:clamp(14px,2vw,24px) 0 clamp(22px,3vw,36px)}
.biens-v6 .filters-orange select{background:var(--accent);color:#fff;border:1.5px solid rgba(255,255,255,.85);border-radius:4px;padding:9px 12px;font-family:var(--sans);font-size:14px;font-weight:600}
.biens-v6 .filters-orange select option{color:var(--ink);background:#fff}
.biens-v6 .filters-orange .f-reset-blush{background:var(--cream);color:var(--accent);border:none;border-radius:4px;padding:9px 16px;font-weight:700}
.biens-v6 .biens-h2-v6{text-align:left;text-transform:uppercase;margin-top:clamp(20px,2.6vw,34px)}
.biens-v6 .count-orange{color:var(--accent);font-weight:600;margin:4px 0 14px}
.biens-v6 .card{background:transparent;box-shadow:none;border:none;border-radius:0}
.biens-v6 .card:hover{transform:none;box-shadow:none}
.biens-v6 .card-img{border-radius:0}
.biens-v6 .card-img img{border-radius:0}
.biens-v6 .card .card-body{display:grid;grid-template-columns:1fr auto;gap:2px 14px;background:transparent;padding:12px 2px 0}
.biens-v6 .card .card-price{grid-column:2;grid-row:1;display:block;background:transparent;color:var(--ink);font-family:var(--sans);font-weight:700;font-size:clamp(15px,1.35vw,18px);padding:0;margin:0;box-shadow:none;border-radius:0;position:static;white-space:nowrap}
.biens-v6 .card:hover .card-price{background:transparent}
.biens-v6 .card .card-title{grid-column:1;grid-row:1;font-weight:700;color:var(--ink);font-size:clamp(15px,1.3vw,17px);margin:0}
.biens-v6 .card .card-city{grid-column:1;grid-row:2;color:var(--ink-soft);font-size:12px;margin:0}
.biens-v6 .card .card-meta{grid-column:1;grid-row:3;color:var(--ink-soft);font-size:12.5px;border-top:none;padding-top:2px;margin:0}
.biens-v6 .card-nego{display:none}
.biens-v6 .card-contact{display:none}
.biens-v6 .biens-loc{margin-top:clamp(34px,4.5vw,60px)}
.biens-v6 .empty-state{background:var(--blush-soft);border-radius:8px}
.biens-v6 .biens-vendus .card-img img{filter:grayscale(1)}
.biens-v6 .biens-vendus .card:hover .card-img img{filter:none}

/* ================================================================
   RETOURS 09/09 — équipe : cartes de visite flip, playlist, recrutement raffiné
   ================================================================ */
.equipe-cartes { text-align: center; }
.eq-cartes-note { color: var(--ink-soft); font-size: 14px; margin: 6px 0 26px; }
.vcards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(14px, 2vw, 24px); max-width: 1040px; margin: 0 auto;
}
.vcard { perspective: 1200px; outline: none; cursor: pointer; }
.vcard-inner {
  position: relative; width: 100%; aspect-ratio: 85 / 55;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.35, .1, .25, 1);
}
.vcard:hover .vcard-inner,
.vcard:focus .vcard-inner,
.vcard:focus-within .vcard-inner { transform: rotateY(180deg); }
.vcard-front, .vcard-back {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 16px 18px; border-radius: 6px;
  box-shadow: 0 8px 22px rgba(23, 20, 15, .12);
}
.vcard-front {
  background: var(--cream); border: 1px solid rgba(234, 91, 12, .25);
}
.vcard-mono {
  font-family: var(--display); font-style: italic; font-size: 30px;
  color: var(--accent); line-height: 1;
}
.vcard-name {
  font-family: var(--display); font-size: 17px; color: var(--ink);
  margin-top: 4px;
}
.vcard-role {
  font-family: var(--knock); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent-deep);
}
.vcard-draw {
  margin-top: 8px; font-size: 10.5px; color: var(--ink-soft);
  border: 1px dashed rgba(23, 20, 15, .3); border-radius: 999px;
  padding: 3px 10px; font-style: italic;
}
.vcard-back {
  transform: rotateY(180deg);
  background: var(--accent); color: var(--white); gap: 10px;
}
.vcard-back .vcard-logo { width: 64px; }
.vcard-back p {
  font-size: 12.5px; line-height: 1.5; margin: 0; color: var(--white);
}
.eq-playlist { margin-top: clamp(24px, 3vw, 36px); }
.center { text-align: center; }

/* Recrutement — maquette image12 : pilules oranges pleines, texte blanc
   centré, CTA discret en bas à droite. */
.recrut-lede {
  color: #b23a10; font-size: 14px; margin: 6px 0 20px;
  text-transform: uppercase; letter-spacing: .12em;
  font-family: var(--display); font-weight: 600;
}
.recrut-fin { max-width: 480px; gap: 14px; }
.recrut-fin input,
.recrut-fin textarea {
  background: var(--accent); border: none;
  border-radius: 999px; color: var(--white);
  font-size: 14.5px; font-weight: 600; text-align: center;
  padding: 13px 22px;
}
.recrut-fin textarea { border-radius: 28px; min-height: 74px; }
.recrut-fin input::placeholder,
.recrut-fin textarea::placeholder { color: var(--white); opacity: .95; }
.recrut-fin input:focus,
.recrut-fin textarea:focus {
  outline: none; background: var(--accent-deep);
  box-shadow: 0 0 0 3px rgba(234, 91, 12, .25);
}
.recrut-fin .recrut-cv {
  background: var(--accent); color: var(--white);
  border: none; border-radius: 999px;
  font-size: 14.5px; font-weight: 600; text-align: center;
  padding: 13px 22px;
}
.recrut-fin .recrut-send {
  align-self: center; margin-top: 8px;
  background: var(--accent); color: var(--white);
  border: 1.5px solid var(--accent);
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  padding: 11px 30px;
}
.recrut-fin .recrut-send:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--white); }
@media (max-width: 640px) {
  .vcards { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}

/* ================================================================
   RETOURS 09/09 — biens : comparateur explicite + vendus défilants
   ================================================================ */
/* Bouton « Comparer » sur les cartes : pill avec libellé, plus d'icône mystère */
.card-cmp.card-cmp-lbl {
  width: auto; height: 32px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 12px; right: 54px;
  font-family: var(--sans); font-size: 11.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.card-cmp.card-cmp-lbl svg { width: 14px; height: 14px; }
.card-cmp.card-cmp-lbl .cmp-txt { line-height: 1; }
.biens-tools {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin: 4px 0 14px;
}
.biens-tools .count { margin: 0; }
.btn-cmp-page {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px;
}
.btn-cmp-page svg { width: 16px; height: 16px; }

/* Biens vendus : 3 visibles, la bande défile toute seule au survol */
.vendus-scroll { overflow: hidden; position: relative; }
.vendus-track {
  display: flex; gap: clamp(14px, 2vw, 24px);
  width: max-content;
  animation: vendus-defile 40s linear infinite;
  animation-play-state: paused;
}
.vendus-scroll:hover .vendus-track,
.vendus-scroll:focus-within .vendus-track { animation-play-state: running; }
.vendus-item {
  /* Retour 09/09 : exactement 3 biens vendus visibles de premier abord */
  flex: 0 0 clamp(280px, 30.5vw, 440px);
}
@keyframes vendus-defile {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .vendus-track { animation: none; }
}
@media (max-width: 760px) {
  .vendus-item { flex-basis: 74vw; }
  .card-cmp.card-cmp-lbl .cmp-txt { display: none; }
  .card-cmp.card-cmp-lbl { width: 36px; height: 36px; padding: 0; justify-content: center; }
}

/* ================================================================
   RETOURS 09/09 — patrimoine : form centré + pantone Groupe LG
   ================================================================ */
.patri-form-tile {
  max-width: 620px; margin: 0 auto clamp(30px, 4vw, 50px);
}
.patri-form-tile .lead-form { text-align: center; }
.patri-main .home-h2 { text-align: center; }
.patri-main .invest-note-w { text-align: center; }

/* Pantone LG : cartes nuancier terracotta briques, bande blanche façon Pantone */
.pant-card.pant-lg { background: var(--white); overflow: hidden; }
.pant-lg .pant-color {
  position: absolute; inset: 0 0 27% 0;
  background:
    linear-gradient(color-mix(in srgb, var(--c) 82%, transparent), color-mix(in srgb, var(--c) 82%, transparent)),
    url("photos/texture-briques-lg.jpg") center / cover;
  background-blend-mode: multiply;
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .pant-lg .pant-color { background: var(--c); }
}
.pant-lg .pant-band {
  position: absolute; left: 0; right: 0; bottom: 0; height: 27%;
  background: var(--white); padding: 8px 12px 6px;
  display: flex; flex-direction: column; gap: 2px;
  text-align: left;
}
.pant-lg .pant-lg-name {
  font: 700 10px/1 var(--sans); letter-spacing: .18em;
  text-transform: uppercase; color: #7a2f1c;
}
.pant-lg .pant-lg-label {
  font: 600 clamp(11px, 1vw, 13.5px)/1.25 var(--sans);
  color: var(--ink);
}
.artisans-main .pant-panel { background: #93412a; }
.artisans-main .pant-panel.on { background: #7a2f1c; }

/* ================================================================
   RETOURS 09/09 — estimation : section Calendly plus petite
   ================================================================ */
.estim-hero .estim-duo { grid-template-columns: .72fr 1.28fr; }
.estim-hero .estim-tile .calendly-ph { padding: 20px 18px; gap: 8px; }
.estim-hero .calendly-ph-ico svg { width: 28px; height: 28px; }
.estim-hero .calendly-ph-txt { font-size: 14.5px; }
.estim-hero .calendly-ph-soon { padding: 6px 10px; font-size: 9.5px; }
@media (max-width: 860px) {
  .estim-hero .estim-duo { grid-template-columns: 1fr; }
}

/* ================================================================
   RETOURS 09/09 — pages services : alignements + « Découvrir aussi »
   ================================================================ */
/* La photo s'aligne sous le store rayé (même retrait droit que les rayures) */
.svc-main .svc-photo { margin-right: clamp(20px, 6vw, 120px); }
/* Texte gauche et image : calés en haut et en bas, écart réduit */
.svc-duo { align-items: stretch; gap: clamp(24px, 3.5vw, 52px); }
/* Retour 11/09 : trop d'espace entre les étapes — on resserre */
.svc-steps { justify-content: flex-start; gap: clamp(14px, 1.6vw, 22px); }
.svc-photo { align-self: stretch; display: flex; }
.svc-photo img {
  height: 100%; max-height: 560px; object-fit: cover; align-self: stretch;
}
@media (max-width: 900px) {
  .svc-photo img { height: auto; }
  .svc-main .svc-photo { margin-right: 0; }
}
/* Découvrir aussi — les autres services en fin de page */
.svc-decouvrir { text-align: center; }
.svc-autres {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: clamp(14px, 2vw, 24px); margin-top: clamp(18px, 2.5vw, 30px);
}
.svc-autre {
  display: inline-flex; align-items: baseline; gap: 10px;
  text-decoration: none; background: var(--white);
  border: 1px solid rgba(234, 91, 12, .35); border-radius: 6px;
  padding: 18px 26px; min-width: 180px; justify-content: space-between;
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.svc-autre-t {
  font-family: var(--display); font-size: clamp(17px, 1.6vw, 21px);
  color: var(--ink); letter-spacing: .04em; text-transform: uppercase;
}
.svc-autre-go { color: var(--accent); font-size: 18px; transition: transform .2s ease; }
.svc-autre:hover { background: var(--blush-soft); border-color: var(--accent); transform: translateY(-3px); }
.svc-autre:hover .svc-autre-go { transform: translateX(4px); }

/* ================================================================
   RETOURS 09/09 — formulaire de contact conforme maquette (image6) :
   pilules blush arrondies, encart « à cocher » blush, fruit « Envoyé »
   ================================================================ */
.ct-h1 { text-transform: none; letter-spacing: 0; }
.ct-form input, .ct-form textarea {
  background: var(--blush); color: #7b4a33;
  border-radius: 999px; padding: 14px 22px;
  font: 600 15px/1.3 var(--sans); text-align: center;
}
.ct-form textarea {
  border-radius: 999px; height: 50px; min-height: 50px;
  resize: none; overflow: hidden; padding-top: 15px;
}
.ct-form input::placeholder, .ct-form textarea::placeholder {
  color: #7b4a33; opacity: 1;
}
.ct-form input:focus, .ct-form textarea:focus {
  outline: 2px solid var(--accent); background: var(--blush-soft);
}
.ct-cases-blk { display: grid; gap: 7px; }
.ct-cases-lbl {
  margin: 4px 0 0 16px;
  font: 700 11.5px/1.2 var(--sans); text-transform: uppercase;
  letter-spacing: .08em; color: #7b4a33;
}
.ct-cases {
  background: var(--blush); border-radius: 28px; border: 0;
  padding: 20px 24px; margin: 0;
  display: grid; gap: 11px; color: #7b4a33;
}
.ct-case { font: 500 14px/1.35 var(--sans); }
.ct-case input { accent-color: var(--accent); }
.ct-form ::placeholder {
  text-transform: none; letter-spacing: 0; font-size: 15px; color: #7b4a33;
}
.ct-send-wrap { margin: 16px 0 0; display: flex; justify-content: center; }
.ct-form .ct-send, .ct-send {
  position: relative; width: 96px; height: 96px; margin: 0;
  border-radius: 50%; border: 0; cursor: pointer;
  background: var(--accent); color: #fff;
  font: 600 15px/1 var(--sans);
  transition: background .2s ease, transform .2s ease;
}
.ct-send::before {
  content: ""; position: absolute; top: -6px; right: 16px;
  width: 28px; height: 10px; border-radius: 999px;
  background: #5f6d64; transform: rotate(-20deg);
}
.ct-send:hover { background: var(--accent-deep); transform: translateY(-2px); }
.mots-cafe {
  color: var(--cream); font-family: var(--display); font-style: italic;
  font-size: clamp(16px, 1.6vw, 20px); text-align: center;
  max-width: 620px; margin: 26px auto 6px;
}

/* ============ Nos honoraires — barème (wireframe (8) p.6) ============ */
.honoraires-page { max-width: 880px; margin: 0 auto; padding-top: clamp(28px, 4vw, 56px); }
.honoraires-page h1 { text-transform: uppercase; margin-bottom: clamp(20px, 3vw, 36px); text-align: center; }
.bareme-table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 14px; background: #fff; }
.bareme-h2 {
  font-family: var(--knock); text-transform: uppercase; color: var(--accent);
  font-size: clamp(24px, 3vw, 34px); text-align: center;
  margin: clamp(34px, 4.5vw, 60px) 0 10px;
}
.bareme-intro { font-family: var(--sans); font-size: 13.5px; color: var(--ink-soft); text-align: center; margin: 0 0 14px; }
.bareme-table + .bareme-note, .bareme-note + .bareme-note { margin-top: 8px; }
.bareme-table th, .bareme-table td { border: 1px solid var(--accent); padding: 6px 12px; text-align: center; }
.bareme-table thead th { color: var(--accent); font-weight: 700; background: var(--cream); }
.bareme-note { font-family: var(--sans); font-size: 12.5px; text-align: center; margin-top: 10px; color: var(--ink); }

/* ============ Retour 09/09 — pages services (wireframe (8) p.8-11) ============
   La colonne rayée court sur toute la hauteur de la section, derrière la photo :
   les rayures apparaissent AU-DESSUS et EN-DESSOUS de la photo, comme la maquette. */
.svc-main .svc-store, .svc-second .svc-store-second {
  top: 0; bottom: 0; height: auto;
  right: clamp(30px, 5vw, 110px);
  width: clamp(260px, 28vw, 440px);
}
.svc-main .svc-photo, .svc-second .svc-photo {
  justify-self: end; align-self: center; position: relative;
  margin-right: clamp(60px, 7vw, 160px);
}
.svc-photo img { border-radius: 0; }
/* Bouton rectangulaire aligné à gauche sous les étapes, comme la maquette */
.svc-cta { justify-content: flex-start; margin-left: clamp(0px, 2vw, 50px); }
@media (max-width: 900px) {
  .svc-main .svc-store, .svc-second .svc-store-second { bottom: auto; height: 110px; }
}

/* ============ Retour 09/09 — boîte à artisans : nuancier photos, métiers visibles ============ */
.pant-row-title {
  margin: 34px 0 22px; text-align: center;
  font: 700 clamp(20px, 2vw, 28px)/1.25 var(--display); color: var(--accent);
}
.pant-row {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: clamp(14px, 1.6vw, 26px);
  margin: 0 0 56px; align-items: stretch;
}
.pant-card2 {
  background: var(--white); border-radius: 8px; overflow: hidden;
  box-shadow: 3px 5px 16px rgba(0,0,0,.16);
  display: flex; flex-direction: column;
  transform: rotate(calc((var(--i) - 2) * .9deg));
  transition: transform .25s ease, box-shadow .25s ease;
}
.pant-card2:hover { transform: rotate(0deg) translateY(-8px); box-shadow: 5px 10px 24px rgba(0,0,0,.22); }
.pant-photo2 { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.pant-photo2 img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pant-band2 {
  display: flex; flex-direction: column; gap: 6px; flex: 1;
  padding: 12px 14px 16px;
  border-top: 8px solid var(--c);
  text-align: left;
}
.pant-band2 .pant-lg-name {
  font: 700 10px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--c);
}
.pant-band2 .pant-lg-label {
  font: 700 clamp(14px, 1.15vw, 17px)/1.25 var(--display); color: var(--ink);
}
.pant-band2 .pant-metiers2 {
  font: 500 clamp(11.5px, .85vw, 13px)/1.5 var(--sans); color: var(--ink);
  opacity: .85;
}
@media (max-width: 1100px) { .pant-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .pant-row { grid-template-columns: 1fr 1fr; } .pant-card2 { transform: none; } }

/* ============ Retour 09/09 (bis) — éventail photos façon échantillons matière ============ */
.pant-row-title { display: none; }
.pant-fan { min-height: clamp(400px, 40vw, 560px); }
.pant-card.pant-photo-fan {
  left: auto; right: 24%; top: 6%; bottom: auto;
  transform-origin: 160% -35%;
  transform: rotate(calc(10deg + var(--i) * -15deg));
  z-index: calc(var(--i) + 1);
  background: var(--white);
}
.pant-photo-fan::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
  pointer-events: none;
}
.pant-photo-fan img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pant-photo-fan .pant-label {
  left: 10px; right: 42%; bottom: 9px;
  font-size: clamp(11px, .95vw, 14px);
  z-index: 2;
}
.pant-photo-fan:hover {
  transform: rotate(calc(10deg + var(--i) * -15deg)) translateY(-10px);
}
.pant-card.pant-photo-fan.active {
  transform: rotate(calc(10deg + var(--i) * -15deg)) translateY(-22px) scale(1.05);
  z-index: 20;
}
@media (max-width: 860px) {
  .pant-card.pant-photo-fan { right: 6%; top: 2%; }
}

/* « Un projet de travaux ? » centré */
.artisans-main #devis { text-align: center; }
.artisans-main .art-form { margin-left: auto; margin-right: auto; }

/* ============ Retour 09/09 — cartes de la Cité « sans fond » ============ */
/* Accueil : la carte blanche posée directement sur l'orange (wireframe p.1) */
.pola.pola-carte { background: transparent; padding: 0; box-shadow: none; }
.pola-carte .pola-in { background: transparent; overflow: visible; }
.pola-carte .p1-carte {
  position: static; display: block;
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.18));
}
.pola-carte .p1-chaussons { left: -12%; top: -6%; width: 56%; }

/* Fiche bien : Localisation façon wireframe p.21 — texte à gauche,
   Cité au trait orange à droite, carte interactive dessous */
.fiche-loc .loc-grid {
  display: grid; grid-template-columns: 1fr;
  margin-bottom: clamp(16px, 2vw, 28px);
}
.fiche-loc .loc-illu {
  display: block; width: 100%; max-width: 480px; height: auto;
  justify-self: center;
}
@media (max-width: 860px) {
  .fiche-loc .loc-grid { grid-template-columns: 1fr; }
  .fiche-loc .loc-illu { max-width: 360px; }
}

/* ============ Retour 11/09 — L'assistant Voilà (chat guidé) ============ */
.chat-fab {
  position: fixed; right: 22px; bottom: 88px; z-index: 1100;
  height: 50px; border-radius: 999px; padding: 0 18px 0 14px;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--accent); color: var(--white); border: 0; cursor: pointer;
  box-shadow: 0 8px 24px rgba(23, 20, 15, .22);
  transition: transform .3s, background .3s;
}
.chat-fab-txt {
  font-family: var(--display); font-weight: 700; font-size: 14.5px;
  letter-spacing: .02em; white-space: nowrap;
}
.chat-fab svg { width: 26px; height: 26px; display: block; }
.chat-fab:hover { transform: translateY(-3px) scale(1.05); background: var(--accent-deep); }
body.chat-ouvert .chat-fab { background: var(--accent-deep); }

.chat-panel[hidden] { display: none; }
.chat-panel {
  position: fixed; right: 22px; bottom: 150px; z-index: 1101;
  width: min(360px, calc(100vw - 44px));
  max-height: min(560px, calc(100vh - 120px));
  display: flex; flex-direction: column;
  background: var(--cream, #fdf1e7); border-radius: 14px; overflow: hidden;
  box-shadow: 0 18px 48px rgba(23, 20, 15, .3);
}
.chat-head {
  position: relative; background: var(--accent); color: var(--white);
  padding: 14px 44px 12px 16px;
}
.chat-head-t { display: block; font-family: var(--display); font-weight: 700; font-size: 17px; }
.chat-head-s { display: block; font-size: 12px; opacity: .85; margin-top: 2px; }
.chat-close {
  position: absolute; right: 8px; top: 8px; width: 32px; height: 32px;
  border: 0; background: transparent; color: var(--white);
  font-size: 22px; line-height: 1; cursor: pointer; border-radius: 50%;
}
.chat-close:hover { background: rgba(255,255,255,.18); }

.chat-log { flex: 1; overflow-y: auto; padding: 14px 12px 6px; }
.chat-msg {
  max-width: 86%; margin: 0 0 8px; padding: 9px 12px;
  background: var(--white); color: var(--ink);
  border-radius: 12px 12px 12px 3px;
  font-size: 14px; line-height: 1.45;
  box-shadow: 0 2px 6px rgba(23, 20, 15, .07);
  animation: chatpop .18s ease-out;
}
.chat-msg a { color: var(--accent); font-weight: 600; }
.chat-moi {
  margin-left: auto; background: var(--accent); color: var(--white);
  border-radius: 12px 12px 3px 12px;
}
@keyframes chatpop { from { opacity: 0; transform: translateY(5px); } }

.chat-typing { display: inline-flex; gap: 4px; align-items: center; min-height: 18px; }
.chat-typing span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  opacity: .4; animation: chatdot 1s infinite;
}
.chat-typing span:nth-child(2) { animation-delay: .18s; }
.chat-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes chatdot { 40% { opacity: 1; transform: translateY(-3px); } }

.chat-opts { display: flex; flex-wrap: wrap; gap: 7px; padding: 8px 12px 12px; }
.chat-chip {
  border: 1.5px solid var(--accent); color: var(--accent); background: var(--white);
  border-radius: 999px; padding: 7px 13px; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background .2s, color .2s;
}
.chat-chip:hover { background: var(--accent); color: var(--white); }

.chat-bien { display: flex; gap: 10px; align-items: center; text-decoration: none; color: var(--ink); }
.chat-bien img {
  width: 74px; height: 58px; object-fit: cover; border-radius: 8px; flex: none;
}
.chat-bien-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.chat-bien-tx strong { font-size: 13px; line-height: 1.25; }
.chat-bien-tx em { font-style: normal; font-size: 12px; color: var(--ink-soft); }
.chat-bien-tx b { color: var(--accent); font-size: 13.5px; }
.chat-msg:has(.chat-bien) { max-width: 100%; width: 100%; }

@media (max-width: 540px) {
  .chat-panel { right: 12px; bottom: 140px; }
  .chat-fab { right: 14px; bottom: 82px; }
}

/* ============================================================
   City guide interactif : chips cliquables + points orange (POI)
   et marqueur « orange » (le fruit) sur la fiche bien
   ============================================================ */
.chips-peps .chip, .chips .chip-o{cursor:pointer; user-select:none; transition:background .15s ease, color .15s ease, transform .12s ease}
.chips-peps .chip:hover, .chips .chip-o:hover{transform:translateY(-1px)}
.chip.chip-actif{background:#3b2d26 !important; color:#fff !important; border-color:#3b2d26 !important}
.poi-dot{display:block; width:14px; height:14px; border-radius:50%; background:#ea5b0c; border:2px solid #fff; box-shadow:0 1px 5px rgba(0,0,0,.4)}
.map-nb .poi-dot{box-shadow:0 1px 5px rgba(0,0,0,.55)}
.poi-theme{color:#ea5b0c; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em}
.map-orange svg, .map-house svg{display:block; filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}

/* ============================================================
   Équipe : cartes de visite illustrées + juke-box
   ============================================================ */
.vdeck{display:flex; gap:clamp(14px,1.6vw,26px); overflow-x:auto; padding:26px calc(50% - 130px) 30px;
  scroll-snap-type:x proximity; scrollbar-width:thin; scrollbar-color:#ea5b0c #fdeee2}
.vdeck::-webkit-scrollbar{height:8px}
.vdeck::-webkit-scrollbar-thumb{background:#ea5b0c; border-radius:4px}
.vdeck::-webkit-scrollbar-track{background:#fdeee2; border-radius:4px}
.vk{flex:0 0 auto; width:260px; padding:0; border:0; background:none; cursor:pointer;
  position:relative; scroll-snap-align:center; transition:transform .25s ease, filter .25s ease}
.vk:hover{transform:translateY(-6px)}
.vk:focus-visible{outline:3px solid #ea5b0c; outline-offset:4px; border-radius:14px}
.vk-img{display:block; width:100%; height:auto; border-radius:14px;
  box-shadow:0 8px 22px rgba(0,0,0,.12); background:#fff}
.vk-actif{transform:scale(1.06)}
.vk-actif:hover{transform:scale(1.06) translateY(-4px)}
.vk-actif .vk-img, .vk-actif .vk-attente{box-shadow:0 12px 30px rgba(234,91,12,.35), 0 0 0 3px #ea5b0c}
.vk-note{position:absolute; top:10px; right:10px; width:30px; height:30px; border-radius:50%;
  background:#ea5b0c; color:#fff; display:grid; place-items:center; font-size:15px;
  opacity:0; transform:scale(.6); transition:opacity .2s ease, transform .2s ease}
.vk:hover .vk-note, .vk-actif .vk-note{opacity:1; transform:scale(1)}
.vk-attente{display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; width:100%; aspect-ratio:820/1303; border-radius:14px; background:#fdeee2;
  border:2px dashed #ea5b0c; box-shadow:0 8px 22px rgba(0,0,0,.08); padding:18px; box-sizing:border-box}
.vk-attente .vcard-mono{font-size:56px; color:#ea5b0c; font-family:"Fraunces",serif}
.vk-attente .vcard-name{font-weight:700; font-size:20px; color:#43302b}
.vk-attente .vcard-role{color:#8a6a5c; font-size:14px}
.vk-attente .vcard-draw{margin-top:8px; font-style:italic; font-size:12px; color:#c0703f}
.vplayer{position:relative; max-width:560px; margin:6px auto 20px; text-align:center; background:#fdeee2;
  border-radius:999px; padding:10px 18px; display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap}
.vplayer[hidden]{display:none}
.vplayer-t{display:block; margin:0; color:#43302b}
.vplayer-t strong{color:#ea5b0c}
/* Retour 11/09 : pas de vidéo visible — la musique seulement.
   L'iframe reste dans la page (1 px, invisible) pour que le son continue. */
.vplayer-frame{position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none}
.vplayer-frame iframe{width:1px; height:1px; border:0}
.vplayer-stop{margin-top:0; border:1.5px solid #ea5b0c; background:#fff; color:#ea5b0c;
  border-radius:999px; padding:6px 16px; cursor:pointer; font-size:14px}
.vplayer-stop:hover{background:#ea5b0c; color:#fff}
@media (max-width:700px){
  .vdeck{padding:20px calc(50% - 110px) 24px}
  .vk{width:220px}
}


/* ================================================================
   RETOUR 11/09 v2 — Voilà Patrimoine : nuancier en éventail
   Vraies textures (brique, acier, béton, bois, pierre) qui se
   chevauchent, comme la maquette cliente.
   ================================================================ */
.pfan-nuancier {
  position: relative;
  max-width: 1150px;
  height: clamp(300px, 29vw, 450px);
  margin: clamp(90px, 8.5vw, 150px) auto clamp(30px, 3.4vw, 52px);
}
.pfan-card {
  position: absolute;
  width: clamp(180px, 19vw, 290px);
  aspect-ratio: 640 / 830;
  box-shadow: 0 16px 38px rgba(23, 20, 15, .28);
  overflow: hidden;
}
.pfan-card img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.pfan-label {
  position: absolute; right: 5%; bottom: clamp(14px, 1.8vw, 26px);
  width: 62%; text-align: right;
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(23, 20, 15, .82);
  font-size: clamp(11px, 1vw, 14.5px);
  line-height: 1.25;
  display: block;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .22);
}
/* Retour cliente 14/09 : écritures toutes au même niveau — éventail en
   main de cartes (pivot commun au-dessus), chaque étiquette au bas de sa
   carte, dans la bande visible. */
.pfan-card { left: 50%; top: 4%; margin-left: calc(clamp(180px, 19vw, 290px) / -2); transform-origin: 50% -55%; }
.pfan-brique { transform: rotate(-34deg); z-index: 1; }
.pfan-acier  { transform: rotate(-17deg); z-index: 2; }
.pfan-beton  { transform: rotate(0deg);   z-index: 3; }
.pfan-bois   { transform: rotate(17deg);  z-index: 4; }
.pfan-pierre { transform: rotate(34deg);  z-index: 5; }
/* béton & acier : étiquette plus étroite pour rester dans la bande visible */
.pfan-beton .pfan-label { width: 44%; }
.pfan-acier .pfan-label { width: 44%; }
@media (max-width: 900px) {
  .pfan-nuancier { height: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .pfan-card { position: static; width: 100%; margin-left: 0; transform: rotate(-1.5deg); }
  .pfan-card:nth-child(2n) { transform: rotate(1.5deg); }
  .pfan-card:nth-child(5) { grid-column: 1 / -1; max-width: 52%; margin: 0 auto; }
  .pfan-label { left: 6%; right: 6%; width: auto; bottom: 10px; text-align: center; }
  .pfan-beton .pfan-label, .pfan-acier .pfan-label { width: auto; }
}


/* ===== Retour cliente 14/09 : la playlist de l'équipe, accessible partout —
   audio seul (l'iframe YouTube reste cachée), bouton play/pause ===== */
.pl-fab {
  position: fixed; left: 22px; bottom: 88px; z-index: 1100;
  height: 46px; border-radius: 999px; padding: 0 17px 0 13px;
  display: flex; align-items: center; gap: 9px;
  background: var(--cream, #fdf1e7); color: var(--accent); border: 1.5px solid var(--accent);
  cursor: pointer; box-shadow: 0 8px 24px rgba(23, 20, 15, .2);
  transition: transform .3s, background .3s, color .3s;
}
.pl-fab:hover { transform: translateY(-3px) scale(1.04); background: var(--accent); color: var(--white); }
.pl-fab[data-state="playing"] { background: var(--accent); color: var(--white); }
.pl-fab-ico { font-size: 15px; line-height: 1; width: 18px; text-align: center; }
.pl-fab-txt { font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: .02em; white-space: nowrap; }
/* le lecteur YouTube tourne en tout petit, invisible mais actif */
.pl-audio { position: fixed; left: -9999px; bottom: 0; width: 2px; height: 2px; overflow: hidden; opacity: 0; pointer-events: none; }
.pl-audio iframe { width: 320px; height: 180px; border: 0; }
@media (max-width: 640px) {
  .pl-fab { left: 14px; bottom: 74px; height: 42px; padding: 0 13px 0 11px; }
  .pl-fab-txt { font-size: 12.5px; }
}
/* Très petits écrans : pastille icône seule pour ne pas gêner l'assistant */
@media (max-width: 480px) {
  .pl-fab { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%; }
  .pl-fab-txt { display: none; }
}

/* ============================================================
   v7 « ultra design » (15/09) — refonte accueil, carte blanche.
   DA : typo Knockout XXL en détourage vidéo (Bigflo/Dutertre),
   marquees (Mecs au Camion), pleine page + serif italique
   (Big Mamma), stickers dispersés (Corbineau).
   ============================================================ */

/* --- Loader d'entrée -------------------------------------- */
.v7-loader {
  position: fixed; inset: 0; z-index: 400;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  animation: v7-loader-out .6s ease .9s forwards;
  pointer-events: none;
}
.v7-loader-word {
  font-family: var(--knock); color: var(--cream);
  font-size: clamp(48px, 9vw, 140px); letter-spacing: .02em;
  animation: v7-loader-pop .5s cubic-bezier(.2, 1.4, .4, 1) both;
}
@keyframes v7-loader-pop { from { transform: scale(.6) rotate(-4deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes v7-loader-out { to { transform: translateY(-101%); } }
@media (prefers-reduced-motion: reduce) { .v7-loader { display: none; } }

/* --- Header flottant sur le hero --------------------------- */
.home-v7 .site-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 60;
  background: transparent; border-bottom: 0; box-shadow: none;
}

/* --- Hero : vidéo détourée dans « VOILÀ » ------------------- */
.v7-hero {
  position: relative; height: 100svh; min-height: 560px; max-height: 1080px;
  overflow: hidden; background: var(--ink);
}
.v7-hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.v7-hero-mask {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block;
}
.v7-mask-txt, .v7-mask-txt-m {
  font-family: var(--knock), "Knockout", sans-serif;
  letter-spacing: 2px; fill: #000;
}
.v7-mask-txt { font-size: 480px; }
.v7-mask-txt-m { font-size: 132px; letter-spacing: 1px; }
.v7-hero-mask-m { display: none; }
.v7-hero-kicker {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: clamp(84px, 12vh, 130px);
  font-family: var(--sans); font-size: 10.5px; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase; color: var(--ink-soft, #6b6258);
  opacity: .75; z-index: 5;
}
.v7-hero-tag {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: clamp(72px, 12vh, 120px); z-index: 5;
  font-family: var(--display); font-size: clamp(24px, 3.4vw, 46px);
  color: var(--ink); white-space: nowrap;
}
.v7-hero-tag em { color: var(--accent); font-style: italic; }
.v7-hero-scroll {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 18px; z-index: 5;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--ink); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; background: transparent;
  animation: v7-bounce 2.2s ease infinite;
}
@keyframes v7-bounce { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }
.v7-stick { position: absolute; z-index: 6; pointer-events: none; }
.v7-stick-orange { width: clamp(60px, 6vw, 110px); top: 16%; left: 7%; transform: rotate(-14deg); }
.v7-stick-etoile { width: clamp(46px, 4.6vw, 84px); bottom: 20%; right: 8%; transform: rotate(12deg); }

/* --- Ticker services ---------------------------------------- */
.v7-ticker {
  background: var(--accent); color: var(--cream);
  overflow: hidden; padding: clamp(10px, 1.4vw, 20px) 0;
  border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
}
.v7-tk-track { display: flex; width: max-content; animation: v7-scroll 26s linear infinite; }
.v7-tk-half { display: flex; align-items: center; }
.v7-tk-w {
  font-family: var(--knock); font-size: clamp(26px, 3.6vw, 56px);
  text-transform: uppercase; letter-spacing: .02em; white-space: nowrap;
  padding: 0 clamp(14px, 1.8vw, 30px);
}
/* Séparateur du bandeau défilant : petit losange dessiné en CSS.
   L'ancien caractère « ✳ » partait en police emoji et sortait en vert. */
.v7-tk-s {
  display: inline-block; flex: none;
  width: clamp(8px, .9vw, 13px); height: clamp(8px, .9vw, 13px);
  background: currentColor; transform: rotate(45deg);
  border-radius: 2px; opacity: .55;
  margin: 0 clamp(6px, .8vw, 14px);
}
@keyframes v7-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .v7-tk-track, .v7-cta-track { animation: none; } }

/* --- Titres géants ------------------------------------------ */
.v7-sec { padding-top: clamp(56px, 7vw, 120px); padding-bottom: clamp(56px, 7vw, 120px); }
.v7-title {
  position: relative;
  font-family: var(--knock); font-weight: 400;
  font-size: clamp(52px, 9.5vw, 160px); line-height: .92;
  text-transform: uppercase; letter-spacing: .01em;
  color: var(--ink); text-align: center; margin: 0 0 14px;
}
.v7-title::before {
  content: attr(data-txt);
  position: absolute; left: 50%; top: 50%;
  transform: translate(calc(-50% + .06em), calc(-50% + .07em));
  color: transparent; -webkit-text-stroke: 1.5px var(--accent);
  white-space: nowrap; z-index: -1; opacity: .55;
}
.v7-sub {
  text-align: center; font-family: var(--display); font-style: italic;
  font-size: clamp(16px, 1.6vw, 22px); color: var(--ink-soft);
  margin: 0 0 clamp(28px, 3.4vw, 54px);
}
.v7-sub-orange { color: var(--accent); }
.v7-btn-row { margin-top: clamp(28px, 3.2vw, 50px); }
.v7-btn {
  display: inline-block; font-family: var(--sans); font-weight: 600;
  font-size: 14px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cream); background: var(--ink);
  padding: 16px 34px; border-radius: 999px;
  border: 2px solid var(--ink);
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.v7-btn:hover { background: var(--accent); border-color: var(--accent); transform: rotate(-1.2deg) scale(1.03); }

/* --- Nos biens : défilé agrandi ----------------------------- */
.v7-biens .defile-tile { width: clamp(300px, 30vw, 480px); }
.v7-biens .defile-tile img { height: clamp(220px, 22vw, 340px); }

/* --- Destination pleine page (Big Mamma) -------------------- */
.v7-dest { position: relative; height: clamp(420px, 78vh, 760px); overflow: hidden; }
.v7-dest-photo { width: 100%; height: 100%; object-fit: cover; }
.v7-dest-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23,20,15,.05), rgba(23,20,15,.45)); }
.v7-dest-h {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(38px, 6.4vw, 96px); line-height: 1.05;
  color: var(--cream); text-align: center; padding: 0 5%;
  text-shadow: 0 4px 30px rgba(23, 20, 15, .35);
}
.v7-dest-h em { font-style: italic; color: var(--blush); }
.v7-villes { background: var(--accent); color: var(--cream); }
.v7-villes-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 90px); max-width: 1100px; margin: 0 auto;
}
.v7-ville-h {
  font-family: var(--knock); font-weight: 400; text-transform: uppercase;
  font-size: clamp(30px, 3.6vw, 56px); margin: 0 0 10px;
  border-bottom: 2px solid rgba(255, 248, 243, .5); padding-bottom: 8px;
}
.v7-ville p { font-size: clamp(14px, 1.2vw, 17px); line-height: 1.7; }

/* --- Agence : polaroids dispersés (Corbineau) ---------------- */
.v7-pol-field {
  position: relative; max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2.6vw, 44px); align-items: center;
  padding: 0 var(--pad);
}
.v7-pol {
  background: var(--white); padding: 10px 10px 14px;
  box-shadow: 0 14px 30px rgba(23, 20, 15, .18);
  transition: transform .35s ease;
}
.v7-pol img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.v7-pol figcaption {
  font-family: var(--display); font-style: italic; font-size: 14px;
  color: var(--ink-soft); text-align: center; padding-top: 8px;
}
.v7-pol-a { transform: rotate(-3.4deg); }
.v7-pol-b { transform: rotate(2.2deg) translateY(18px); }
.v7-pol-c { transform: rotate(-1.6deg); }
.v7-pol-d { transform: rotate(3.1deg) translateY(12px); }
.v7-pol:hover { transform: rotate(0) scale(1.04); z-index: 3; }
.v7-stick-fauteuil { width: clamp(50px, 5vw, 88px); top: -34px; right: 3%; transform: rotate(10deg); }
.v7-stick-plante { width: clamp(46px, 4.6vw, 80px); bottom: -30px; left: 2.5%; transform: rotate(-8deg); }

/* --- CTA marquee géant --------------------------------------- */
.v7-cta {
  display: block; overflow: hidden;
  background: var(--accent); color: var(--cream);
  padding: clamp(10px, 1.3vw, 20px) 0;
}
.v7-cta-track { display: flex; width: max-content; animation: v7-scroll 22s linear infinite; }
.v7-cta-half {
  font-family: var(--knock); text-transform: uppercase; white-space: nowrap;
  font-size: clamp(22px, 3vw, 48px); line-height: 1;
  transition: color .3s ease;
  display: inline-flex; align-items: center;
}
/* Retour cliente 09/2026 : le trait rose fait le défilé entre les phrases */
.v7-cta-sep {
  display: inline-block; width: clamp(60px, 7vw, 130px); height: 5px;
  background: var(--blush); border-radius: 3px;
  margin: 0 clamp(18px, 2.4vw, 40px);
}
.v7-cta:hover .v7-cta-half { color: var(--blush); }

/* --- Apparitions au scroll ----------------------------------- */
.home-v7 .v7-reveal { opacity: 0; transform: translateY(34px); transition: opacity .7s ease, transform .7s ease; }
.home-v7 .v7-reveal.v7-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .home-v7 .v7-reveal { opacity: 1; transform: none; } }

/* --- Mobile v7 ----------------------------------------------- */
@media (max-width: 760px) {
  .v7-hero { min-height: 480px; }
  /* Masque 16:9 recadré en portrait -> variante SVG dédiée mobile */
  .v7-hero-mask { display: none; }
  .v7-hero-mask-m { display: block; }
  .v7-stick-orange { top: 30%; left: 5%; width: 56px; }
  .v7-stick-etoile { bottom: 30%; right: 6%; width: 44px; }
  .v7-hero-kicker { top: 78px; width: 86%; text-align: center; }
  .v7-hero-tag { bottom: 150px; }
  .v7-hero-tag { white-space: normal; width: 92%; text-align: center; }
  .v7-villes-grid { grid-template-columns: 1fr; }
  .v7-pol-field { grid-template-columns: 1fr 1fr; }
  .v7-pol-b, .v7-pol-d { transform: rotate(2deg); }
  .v7-stick-fauteuil { top: -20px; }
}

/* ============================================================
   v7 global (15/09) — la DA XXL déployée sur toutes les pages.
   ============================================================ */

/* Titres géants à double frappe (classe posée par app.js) */
.v7-giant {
  position: relative; z-index: 0;
  font-family: var(--knock) !important; font-weight: 400 !important;
  font-style: normal !important;
  text-transform: uppercase; letter-spacing: .01em;
  line-height: .95;
}
h1.v7-giant { font-size: clamp(44px, 6.6vw, 112px); }
h2.v7-giant { font-size: clamp(32px, 4.6vw, 74px); }
.v7-giant::before {
  content: attr(data-txt);
  position: absolute; inset: 0; z-index: -1;
  transform: translate(.06em, .07em);
  color: transparent; -webkit-text-stroke: 1.5px var(--v7-ghost, var(--accent));
  opacity: .35; pointer-events: none;
}
@media (max-width: 760px) {
  h1.v7-giant { font-size: clamp(34px, 9.6vw, 52px); }
  h2.v7-giant { font-size: clamp(26px, 7.4vw, 40px); }
}

/* Boutons : pastilles orange fines (retour cliente J2 — plus de noir) */
.btn-pill {
  font-family: var(--sans); font-weight: 600; font-size: 13px;
  letter-spacing: .12em; text-transform: uppercase;
  background: var(--cream); color: var(--accent-deep);
  border-radius: 999px; border: 1.5px solid var(--accent);
  padding: 12px 30px;
  transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}
.btn-pill:hover { background: var(--accent); border-color: var(--accent); color: var(--white); transform: scale(1.03); }
.btn-pill-cream { background: var(--cream); color: var(--accent-deep); border-color: var(--accent); }
.btn-pill-cream:hover { background: var(--accent); color: var(--white); }

/* Footer : la devise en grand */
.foot-quote {
  font-family: var(--display) !important; font-style: italic;
  font-size: clamp(20px, 2.4vw, 36px) !important; line-height: 1.2;
  color: var(--accent);
}

/* ============================================================
   v7 effets globaux + montée en couleur (15/09)
   ============================================================ */

/* Reveal générique (classe posée par app.js) */
.v7-reveal { opacity: 0; transform: translateY(30px); transition: opacity .65s ease, transform .65s ease; }
.v7-reveal.v7-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .v7-reveal { opacity: 1; transform: none; transition: none; } }

/* Entrée de page : le h1 glisse en douceur */
@keyframes v7-h1-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
main h1 { animation: v7-h1-in .7s ease both; }
@media (prefers-reduced-motion: reduce) { main h1 { animation: none; } }

/* Stickers flottants des pages intérieures */
.v7-page-stick { position: absolute; z-index: 2; pointer-events: none; animation: v7-float 7s ease-in-out infinite; }
.v7-ps-a { width: clamp(54px, 4.6vw, 86px); top: 130px; right: 4%; transform: rotate(12deg); }
.v7-ps-b { width: clamp(36px, 2.8vw, 54px); top: 640px; left: 0.7%; transform: rotate(-10deg); animation-delay: 1.6s; opacity: .85; }
@media (max-width: 1280px) { .v7-ps-b { display: none; } }
@keyframes v7-float { 0%, 100% { margin-top: 0; } 50% { margin-top: 14px; } }
body { position: relative; }
@media (max-width: 900px) { .v7-page-stick { display: none; } }
@media (prefers-reduced-motion: reduce) { .v7-page-stick { animation: none; } }

/* Cartes biens : survol vivant + prix en pastille orange */
.card { transition: transform .3s ease, box-shadow .3s ease; }
.card:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(234, 91, 12, .18); }
.card:hover img { filter: saturate(1.12); }

/* Chips du city guide : palette qui tourne dans la charte */
.chip { transition: transform .25s ease, background .25s ease; }
.chip:hover { transform: rotate(-2deg) scale(1.06); }
.chips-peps .chip:nth-child(3n+2) { background: var(--blush); color: var(--accent-deep); border-color: var(--blush); }
.chips-peps .chip:nth-child(3n+3) { background: var(--white); color: var(--accent-deep); border-color: var(--accent); }

/* Montée en couleur : bandes alternées blush sur les pages intérieures */
body:not(.home-v7) main > .home-sec:nth-of-type(even):not(.sec-orange):not(.sec-white) { background: var(--blush-soft); }
body:not(.home-v7) main { --pad-sec: 1; }

/* Le header prend un fil orange et la barre de nav respire */
.site-header { border-bottom: 2px solid var(--accent); }
.home-v7 .site-header { border-bottom: 0; }

/* Liens de nav : soulignés à la main au survol */
.hd-nav a { position: relative; }
.hd-nav a::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: 2px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.hd-nav a:hover::after, .hd-nav a.active::after { transform: scaleX(1); }

/* Polaroids et tuiles : petit coup de peps au survol */
.mos-tile, .jnl-tuile, .art-card, .estim-tile { transition: transform .3s ease, box-shadow .3s ease; }
.mos-tile:hover, .jnl-tuile:hover, .art-card:hover, .estim-tile:hover { transform: translateY(-5px); box-shadow: 0 16px 30px rgba(23, 20, 15, .14); }

/* Illustrations générées : cadre sticker */
.v7-illu { display: block; margin: 0 auto; max-width: min(420px, 80%); transform: rotate(-2deg); filter: drop-shadow(0 12px 24px rgba(23, 20, 15, .16)); transition: transform .35s ease; }
.v7-illu:hover { transform: rotate(0) scale(1.03); }
.v7-illu-r { transform: rotate(2deg); }

/* Illustrations générées — placements */
.v7-illu-ville {
  max-width: clamp(150px, 15vw, 230px);
  border-radius: 50%; border: 3px solid var(--cream);
  margin-bottom: 18px;
}
.v7-illu-side {
  position: absolute; right: clamp(16px, 6vw, 120px); top: 110px;
  width: clamp(110px, 11vw, 190px); max-width: none;
  border-radius: 50%; border: 3px solid var(--accent);
  transform: rotate(4deg); z-index: 3;
}
.v7-illu-side:hover { transform: rotate(0) scale(1.05); }
@media (max-width: 900px) { .v7-illu-side { display: none; } }

/* ================================================================
   v8 — Jeux de souris « wahou » (desktop uniquement, pointer:fine)
   ================================================================ */

/* Traînée de petites mandarines derrière la souris */
.v8-star {
  position: fixed; z-index: 9998; pointer-events: none;
  width: 18px; height: 18px;
  background: url("brand/cursor-orange.svg") center / contain no-repeat;
  animation: v8-star .7s ease-out forwards;
}
@keyframes v8-star {
  0%   { transform: translate(-50%,-50%) scale(0) rotate(0deg); opacity: 1; }
  60%  { opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(1.5) rotate(160deg); opacity: 0; }
}

/* Explosion de confettis au clic */
.v8-burst {
  position: fixed; z-index: 9998; pointer-events: none;
  width: 9px; height: 9px; border-radius: 50%;
  margin: -4px 0 0 -4px;
  animation: v8-burst .6s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes v8-burst { to { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; } }

/* Boutons magnétiques + tilt 3D */
.v8-on .btn-pill, .v8-on .v7-btn, .v8-on .hd-nav a {
  display: inline-block;
  transition: transform .3s cubic-bezier(.2,.8,.3,1.4), background .25s ease, color .25s ease;
}
.v8-tilting { transition: transform .12s ease !important; }

/* Parallaxe des contours fantômes des titres géants */
.v7-giant::before {
  transform: translate(calc(.06em + var(--v8-gx, 0px)), calc(.07em + var(--v8-gy, 0px)));
}

@media (prefers-reduced-motion: reduce) {
  .v8-star, .v8-burst { display: none !important; }
}

/* ================================================================
   v9 — WAHOU maximal (inspiration heurebleue.studio)
   ================================================================ */

/* Rideau orange de transition entre pages */
.v8-curtain {
  position: fixed; inset: 0; z-index: 10000;
  background: linear-gradient(to bottom, var(--blush, #FBC1AB) 0 7%, var(--accent) 7%);
  transform: translateY(103%);
  pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
.v8-curtain-on {
  transition: transform .45s cubic-bezier(.7, 0, .3, 1);
  transform: translateY(0);
}
.v8-curtain span {
  display: block; width: 84px; height: 84px;
  animation: v9-spin 1.4s linear infinite;
  opacity: 0; transition: opacity .2s ease .15s;
}
.v8-curtain span img { width: 100%; height: 100%; display: block; }
.v8-curtain-on span { opacity: 1; }
@keyframes v9-spin { to { transform: rotate(360deg); } }

/* Image qui suit la souris sur le menu */
.v8-peek {
  position: fixed; top: 0; left: 0; z-index: 9997;
  width: 230px; aspect-ratio: 4 / 5; object-fit: cover;
  border: 4px solid var(--cream); border-radius: 10px;
  box-shadow: 0 18px 44px rgba(23, 20, 15, .28);
  pointer-events: none; opacity: 0; transform: scale(.6);
  transition: opacity .25s ease;
  will-change: transform;
}
.v8-peek.v8-peek-on { opacity: 1; }

/* Duotone orange + zoom des photos au survol */
@media (pointer: fine) {
  .card img, .mos-tile img, .jnl-tuile img, .art-card img, .svc-photo img {
    transition: filter .45s ease, transform .45s ease;
  }
  .card:hover img, .mos-tile:hover img, .jnl-tuile:hover img,
  .art-card:hover img, .svc-photo:hover img {
    filter: sepia(.55) saturate(1.9) hue-rotate(-16deg) contrast(1.03);
    transform: scale(1.06);
  }
}

/* Skew du contenu selon la vitesse de scroll */
.v9-skew { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .v8-split .v8-l { opacity: 1 !important; animation: none !important; }
  .v8-curtain, .v8-peek { display: none !important; }
}

/* ================================================================
   v10 — Zoom vidéo au scroll (effet accueil heurebleue.studio)
   ================================================================ */
.v10-zoom { height: 320vh; position: relative; background: radial-gradient(circle at 50% 40%, #f26f22, var(--accent) 70%); }
.v10-stick { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.v10-grid {
  position: absolute; left: 50%; top: 50%;
  width: 324vw; height: 330vh;
  display: grid;
  grid-template-columns: repeat(3, 100vw);
  grid-template-rows: repeat(3, 100vh);
  gap: 84px;
  transform: translate(-50%, -50%) scale(.30);
  will-change: transform;
}
.v10-cell {
  overflow: hidden;
  will-change: transform;
}
.v10-cell img, .v10-cell video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.v10-kick {
  position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%);
  color: var(--cream); font-family: var(--knock, sans-serif);
  text-transform: uppercase; letter-spacing: .3em; font-size: 13px;
  pointer-events: none;
}
.v10-fin {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  margin: 0; text-align: center; pointer-events: none;
  color: var(--cream); opacity: 0;
  font-family: var(--knock, sans-serif); text-transform: uppercase;
  font-size: clamp(40px, 7vw, 120px); line-height: .95;
  text-shadow: 0 6px 40px rgba(23, 20, 15, .45);
  will-change: transform, opacity;
}
.v10-fin em {
  display: block; text-transform: none;
  font-family: var(--display, serif); font-style: italic; font-weight: 400;
  font-size: clamp(26px, 3.4vw, 58px); color: var(--blush, #FBC1AB);
}
@media (max-width: 760px) {
  .v10-zoom { height: 260vh; }
  .v10-grid { gap: 40px; width: 316vw; height: 316vh; }
}
@media (prefers-reduced-motion: reduce) {
  .v10-zoom { height: auto; }
  .v10-stick { position: static; height: auto; }
  .v10-grid { position: static; width: 100%; height: auto; display: block; transform: none; }
  .v10-cell { display: none; }
  .v10-cell-video { display: block; height: 70vh; border-radius: 0; }
  .v10-kick, .v10-fin { display: none; }
}

/* ============================================================
   v11 — la face underground : grain global, tournée des cartes
   (section sombre épinglée), magazine feuilleté au scroll,
   tampons et pluie d'oranges. Charte : orange/blush/crème/ink.
   ============================================================ */

/* Grain photo léger sur tout le site (esprit fanzine imprimé) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 11000;
  opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.6'/></svg>");
}
@media (prefers-reduced-motion: reduce) { body::after { display: none; } }

/* --- Pluie d'oranges (3 clics sur le logo) --- */
.v11-orange {
  position: fixed;
  top: -70px;
  z-index: 12000;
  pointer-events: none;
  animation: v11-chute 3s cubic-bezier(.3,0,.8,1) forwards;
}
@keyframes v11-chute {
  to { transform: translateY(118vh) rotate(560deg); }
}

/* ================= La tournée des cartes (zone sombre) ============ */
html.v11-on .v11-deck-zone {
  padding: 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(251, 193, 171, .38), transparent 46%),
    radial-gradient(circle at 84% 86%, rgba(255, 248, 243, .16), transparent 52%),
    var(--accent);
  position: relative;
  /* overflow:hidden hérité de .home-sec casserait position:sticky ;
     clip coupe pareil sans créer de conteneur de défilement */
  overflow: clip;
}
html.v11-on .v11-stick {
  position: relative;
  min-height: 92vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 64px 16px 40px;
  box-sizing: border-box;
}
/* mot fantôme géant derrière la pile */
html.v11-on .v11-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--knock);
  font-size: clamp(90px, 17vw, 270px);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 2.5px rgba(255, 248, 243, .62);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
html.v11-on .v11-deck-zone .home-h2 {
  color: var(--cream);
  margin: 0;
  position: relative;
  z-index: 2;
  text-align: center;
}
html.v11-on .v11-deck-zone .home-h2 em {
  font-family: var(--display);
  font-style: italic;
  text-transform: none;
  color: var(--ink);
}
html.v11-on .v11-radio {
  position: relative;
  z-index: 35;
  font-family: var(--knock);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 15px;
  color: var(--cream);
  background: transparent;
  border: 2px solid var(--cream);
  border-radius: 999px;
  padding: 10px 22px;
  cursor: pointer;
  transition: background .25s, color .25s, transform .2s;
}
html.v11-on .v11-radio:hover { transform: scale(1.05); }
html.v11-on .v11-radio.v11-radio-on {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--accent);
  box-shadow: 0 0 0 6px rgba(255, 248, 243, .28);
}
/* la pile de cartes */
html.v11-on .v11-deck-zone .vdeck {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: min(340px, 72vw);
  height: min(44vh, 420px);
  overflow: visible;
  padding: 0;
  margin: 0;
}
html.v11-on .v11-deck-zone .vk {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(255px, 64vw);
  margin: 0;
  flex: none;
  transform: translate(-50%, -50%);
  transition: transform .65s cubic-bezier(.55, 0, .25, 1);
  will-change: transform;
  box-shadow: 0 22px 55px rgba(120, 40, 0, .45);
  border-radius: 14px;
}
/* tampon « EN SCÈNE » sur la carte active */
html.v11-on .v11-deck-zone .vk.vk-scene::after {
  content: "EN SCÈNE ★";
  position: absolute;
  top: -14px;
  right: -20px;
  font-family: var(--knock);
  font-size: 13px;
  letter-spacing: .14em;
  color: var(--accent);
  background: var(--cream);
  border: 2px solid var(--accent);
  border-radius: 6px;
  padding: 5px 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}
html.v11-on .v11-nom {
  position: relative;
  z-index: 35;
  margin: 4px 0 0;
  font-family: var(--knock);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: clamp(15px, 1.6vw, 21px);
  color: var(--cream);
  text-align: center;
}
html.v11-on .v11-kick {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--knock);
  letter-spacing: .28em;
  text-transform: uppercase;
  font-size: 11px;
  color: rgba(255, 248, 243, .55);
  white-space: nowrap;
}
/* tampons fanzine dans les coins */
html.v11-on .v11-stick::before,
html.v11-on .v11-stick::after {
  position: absolute;
  z-index: 3;
  font-family: var(--knock);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: clamp(12px, 1.3vw, 18px);
  padding: 7px 13px;
  border-radius: 6px;
  pointer-events: none;
  opacity: .85;
}
html.v11-on .v11-stick::before {
  content: "★ 100% CARCASSONNE ★";
  top: 11%;
  left: 4%;
  color: var(--cream);
  border: 3px solid var(--cream);
}
html.v11-on .v11-stick::after {
  content: "SIGNÉ VOILÀ";
  bottom: 7%;
  left: 4%;
  color: var(--cream);
  border: 3px solid var(--cream);
}
/* flèches de la tournée */
.vdeck-scene {
  position: relative;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 3vw, 40px);
  width: 100%;
}
html.v11-on .vdeck-arrow {
  z-index: 40;
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid var(--cream);
  background: transparent;
  color: var(--cream);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  transition: background .25s, color .25s, transform .2s, opacity .25s;
}
html.v11-on .vdeck-arrow:hover { background: var(--cream); color: var(--accent); transform: scale(1.08); }
html.v11-on .vdeck-arrow:disabled { opacity: .35; cursor: default; }
html.v11-on .v11-nom { margin-top: 14px; }
html.v11-on .v11-aide {
  position: relative;
  z-index: 35;
  color: rgba(255, 248, 243, .8);
  margin: 4px 0 0;
  text-align: center;
}
html:not(.v11-on) .vdeck-arrow, html:not(.v11-on) .v11-aide { display: none; }

/* le lecteur dans la zone sombre */
html.v11-on .v11-deck-zone .vplayer {
  position: relative;
  z-index: 36;
  margin-top: 2px;
}
html.v11-on .v11-deck-zone .vplayer-t { color: var(--cream); }

/* ============ Le magazine feuilleté par le scroll ============ */
html.v11-on .v11-mag-zone {
  height: 380vh;
  padding: 0;
  position: relative;
  overflow: clip;
  background:
    radial-gradient(circle at 80% 12%, rgba(251, 193, 171, .55), transparent 44%),
    radial-gradient(circle at 12% 85%, rgba(234, 91, 12, .14), transparent 46%),
    linear-gradient(180deg, var(--cream), #fde4d7);
}
/* mot fantôme derrière le magazine */
html.v11-on .v11-mag-stick::before {
  content: "LE MAG";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--knock);
  font-size: clamp(120px, 22vw, 360px);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(234, 91, 12, .16);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
/* ombre portée sous le livre */
html.v11-on .v11-mag-stick::after {
  content: "";
  position: absolute;
  top: calc(50% + min(19vw, 265px));
  left: 50%;
  transform: translateX(-50%);
  width: min(620px, 80vw);
  height: 60px;
  background: radial-gradient(ellipse at center, rgba(120, 40, 0, .30), transparent 62%);
  pointer-events: none;
  z-index: 0;
}
html.v11-on .v11-mag-stick {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px clamp(14px, 4vw, 60px);
  box-sizing: border-box;
  overflow: hidden;
}
html.v11-on .v11-mag-stick .eq-book { width: 100%; position: relative; z-index: 1; }
/* la tranche : l'épaisseur du magazine côté ouverture */
html.v11-on .v11-mag-stick .eq-book-pages::before {
  content: "";
  position: absolute;
  right: -7px;
  top: 8px;
  bottom: 8px;
  width: 7px;
  border-radius: 0 3px 3px 0;
  background: repeating-linear-gradient(90deg,
    #f3e4d8 0 1px, #ffffff 1px 2.4px);
  box-shadow: 3px 4px 10px rgba(120, 40, 0, .18);
  z-index: 0;
}
.v11-mag-barre {
  width: min(560px, 82vw);
  height: 7px;
  margin-top: 18px;
  position: relative;
  z-index: 1;
  box-shadow: inset 0 1px 3px rgba(120, 40, 0, .18);
  background: rgba(234, 91, 12, .18);
  border-radius: 99px;
  overflow: hidden;
}
.v11-mag-barre i {
  display: block;
  height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
}
/* sans JS / motion réduit : la barre disparaît, tout reste classique */
html:not(.v11-on) .v11-mag-barre { display: none; }

/* --- mobile : zones un peu plus courtes, tampons discrets --- */
@media (max-width: 760px) {
  html.v11-on .v11-mag-zone { height: 300vh; }
  html.v11-on .v11-bg { font-size: 24vw; }
  /* petits écrans : on retire tampons et sous-titre, place aux cartes */
  html.v11-on .v11-stick::before,
  html.v11-on .v11-stick::after,
  html.v11-on .v11-kick { display: none; }
  html.v11-on .v11-stick { padding: 76px 12px 30px; gap: 6px; }
  html.v11-on .v11-deck-zone .vk { width: min(200px, 55vw); }
  html.v11-on .v11-deck-zone .vdeck { height: 46vh; }
  html.v11-on .v11-radio { font-size: 13px; padding: 8px 16px; }
}

/* lecteur compact dans la tournée */
html.v11-on .v11-deck-zone .vplayer-frame,
html.v11-on .v11-deck-zone .vplayer-frame iframe {
  max-width: 300px;
  max-height: 150px;
}
html.v11-on .v11-deck-zone .home-h2.v11-deck-h2 {
  font-size: clamp(26px, 3.4vw, 52px);
}

/* fallback (motion réduit / sans JS) : les organes v11 disparaissent,
   le deck horizontal et le magazine automatique classiques reprennent */
html:not(.v11-on) .v11-bg,
html:not(.v11-on) .v11-radio,
html:not(.v11-on) .v11-kick,
html:not(.v11-on) .v11-nom { display: none; }

/* ============================================================
   v12 — intros underground au scroll (agence, biens, patrimoine,
   estimation, pause café) + magazine à VRAIES pages tournées.
   ============================================================ */

/* ---- Magazine : mode « vraie page qui se tourne » ---- */
html.v11-on .v11-mag-stick .eq-book-pages { perspective: 2400px; }
html.v11-on .v11-mag-stick .eq-mag-slide,
html.v11-on .v11-mag-stick .eq-mag-slide.on {
  opacity: 1 !important;
  transition: none !important;
  pointer-events: auto;
  transform-origin: left center;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  backface-visibility: visible;
  overflow: visible !important;
  will-change: transform;
  z-index: auto;
}
html.v11-on .v11-mag-stick .eq-mag-slide .pg-front {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* pliure côté reliure, comme un vrai feuillet */
html.v11-on .v11-mag-stick .eq-mag-slide .pg-front::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 26px;
  background: linear-gradient(90deg, rgba(0, 0, 0, .10), transparent);
  pointer-events: none; z-index: 2;
}
/* le verso crème avec le logo, visible pendant que la feuille tourne */
html.v11-on .v11-mag-stick .eq-mag-slide::after {
  content: "";
  position: absolute; inset: 0;
  transform: rotateY(180deg);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background:
    url("brand/voila-orange.svg") center / 130px no-repeat,
    repeating-linear-gradient(45deg, rgba(251, 193, 171, .20) 0 12px, transparent 12px 34px),
    radial-gradient(circle at 30% 25%, rgba(251, 193, 171, .30), transparent 55%),
    var(--cream, #fdf3ec);
  box-shadow: 2px 10px 28px rgba(0, 0, 0, .14);
}
/* plus de flèches : les pages tournent toutes seules */
html.v11-on .v11-mag-stick .eq-book-arrow { display: none; }
html.v11-on .v11-mag-stick .eq-mag-slide.turning .pg-front {
  box-shadow: -34px 8px 60px rgba(23, 20, 15, .30);
}



/* ============================================================
   v13 — intros éditoriales cinétiques : titre masqué lettre à
   lettre, photos qui déboulent, forme blush, étoile, marquee.
   ============================================================ */
html.v11-on .v13-zone {
  height: 195vh; /* Retour 22/09 : temps de pause en fin d'animation */
  background: linear-gradient(180deg, var(--cream), #ffe9db);
  position: relative;
  overflow: clip;
}
html.v11-on .v13-stick {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.6vh, 18px);
  padding: 70px 16px 60px;
  box-sizing: border-box;
}
/* sans l'expérience : l'intro disparaît, la page commence direct */
html:not(.v11-on) .v13-zone { display: none; }

/* grande pastille blush qui gonfle derrière */
.v13-shape {
  position: absolute;
  left: 50%;
  top: 52%;
  width: min(62vw, 64vh);
  height: min(62vw, 64vh);
  margin: calc(min(62vw, 64vh) / -2) 0 0 calc(min(62vw, 64vh) / -2);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #ffd9c4, var(--blush));
  transform: scale(.15);
  will-change: transform;
  z-index: 0;
}
/* mot fantôme en contour qui glisse en parallaxe */
.v13-ghost {
  position: absolute;
  top: 7%;
  left: 50%;
  font-family: var(--knock);
  font-size: clamp(90px, 16vw, 260px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(234, 91, 12, .5);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  will-change: transform;
  z-index: 2;
}
/* les photos façon tirages encadrés qui déboulent */
.v13-ph {
  position: absolute;
  width: clamp(150px, 17vw, 300px);
  height: clamp(112px, 12.7vw, 224px);
  object-fit: cover;
  border: 6px solid #fff;
  border-radius: 6px;
  box-shadow: 0 24px 55px rgba(120, 40, 0, .28);
  will-change: transform;
  z-index: 1;
}
.v13-ph-a { left: 6%; top: 17%; }
.v13-ph-b { right: 5%; top: 23%; }
.v13-ph-c { left: 13%; bottom: 15%; }

/* le titre : chaque lettre monte hors de son masque */
.v13-titre {
  position: relative;
  z-index: 2;
  font-family: var(--knock);
  font-weight: 400;
  font-size: clamp(60px, 12vw, 210px);
  line-height: .92;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--accent);
  text-align: center;
  margin: 0;
  white-space: nowrap;
}
.v13-titre .v13-lm { display: inline-block; overflow: hidden; vertical-align: bottom; }
.v13-titre .v13-lm i {
  display: inline-block;
  font-style: normal;
  transform: translateY(120%);
  will-change: transform;
}
.v13-sous {
  position: relative;
  z-index: 2;
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 34px);
  color: var(--ink);
  margin: 0;
  text-align: center;
  opacity: 0;
  will-change: transform, opacity;
}
/* l'étoile Voilà qui tourne */
.v13-etoile {
  position: absolute;
  top: 13%;
  right: 10%;
  font-size: clamp(48px, 6.5vw, 110px);
  line-height: 1;
  color: var(--accent);
  will-change: transform;
  z-index: 1;
  pointer-events: none;
}
/* le bandeau défilant du bas */
.v13-marquee {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  overflow: hidden;
  background: var(--accent);
  color: var(--cream);
  padding: 14px 0;
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  z-index: 3;
}
.v13-etoile img {
  width: 1em;
  height: 1em;
  display: block;
  filter: drop-shadow(0 6px 14px rgba(120,40,0,.20));
}
.v13-mq svg {
  width: .62em;
  height: .62em;
  vertical-align: -.02em;
  margin: 0 .12em;
}
.v13-mq {
  font-family: var(--knock);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: clamp(17px, 2vw, 27px);
  white-space: nowrap;
  flex: none;
  padding-right: 22px;
  animation: v13-defile 16s linear infinite;
}
@keyframes v13-defile {
  to { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .v13-mq { animation: none; }
}

@media (max-width: 760px) {
  html.v11-on .v13-zone { height: 150vh; }
  html.v11-on .v13-stick { padding: 64px 10px 54px; }
  .v13-titre { font-size: 15vw; }
  .v13-ghost { font-size: 26vw; top: 16%; }
  .v13-ph { width: 36vw; height: 27vw; border-width: 4px; }
  .v13-ph-a { left: 3%; top: 15%; }
  .v13-ph-b { right: 3%; top: 21%; }
  .v13-ph-c { display: none; }
  .v13-etoile { top: 10%; right: 6%; }
  .v13-shape { width: 82vw; height: 82vw; margin: -41vw 0 0 -41vw; }
}

/* Retour cliente 09/2026 : « Vos favoris » de la fiche resserré */
.fiche-favoris-slim { padding-top: clamp(30px, 4vw, 48px); padding-bottom: clamp(30px, 4vw, 48px); }
.fiche-favoris-slim .fiche-outil-txt { margin-bottom: 14px; }


/* ===================== Magazine v5 — Retour 09/2026 : la page se tourne
   vraiment (rotation 3D autour de la reliure gauche), plus stylé qu'un fondu. */
.eq-book .eq-book-pages { perspective: 1900px; }
@keyframes eq-page-avant {
  0%   { transform: rotateY(0); opacity: 1; filter: brightness(1); }
  55%  { opacity: 1; filter: brightness(.92); }
  100% { transform: rotateY(-150deg); opacity: 0; filter: brightness(.85); }
}
@keyframes eq-page-arriere {
  0%   { transform: rotateY(-150deg); opacity: 0; filter: brightness(.85); }
  45%  { opacity: 1; filter: brightness(.94); }
  100% { transform: rotateY(0); opacity: 1; filter: brightness(1); }
}
.eq-mag-slide.turn-out,
.eq-mag-slide.turn-in {
  transition: none !important;
  transform-origin: left center;
  backface-visibility: hidden;
  z-index: 6 !important;
  pointer-events: none;
  box-shadow: -26px 12px 54px rgba(23, 20, 15, .28);
}
.eq-mag-slide.turn-out { opacity: 1; animation: eq-page-avant .85s cubic-bezier(.55, .08, .35, 1) both; }
.eq-mag-slide.turn-in  { animation: eq-page-arriere .85s cubic-bezier(.55, .08, .35, 1) both; }
/* petit reflet de papier qui glisse pendant le tournage */
.eq-mag-slide.turn-out::after,
.eq-mag-slide.turn-in::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.35) 50%, rgba(0,0,0,.08) 78%);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .eq-mag-slide.turn-out, .eq-mag-slide.turn-in { animation: none; }
}


/* CTA vers l'ancien formulaire de contact (biens, patrimoine, estimation) */
.contact-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 18px;
  margin: clamp(30px, 4vw, 54px) auto;
  padding: clamp(20px, 2.6vw, 32px) var(--pad);
  max-width: 860px;
  border: 1.5px solid var(--accent); border-radius: 999px;
  background: var(--cream);
}
.contact-strip-txt {
  font-family: var(--display); font-style: italic;
  font-size: clamp(17px, 1.8vw, 22px); color: var(--accent-deep); margin: 0;
}
@media (max-width: 640px) { .contact-strip { border-radius: 26px; text-align: center; } }

/* Formulaire acquéreur */
.acq-sous {
  font-family: var(--display); font-style: italic; color: var(--accent-deep);
  text-align: center; max-width: 56ch; margin: -6px auto 26px;
}
.acq-autre { margin-top: 18px; font-family: var(--sans); font-size: 14px; }
.acq-autre a { color: var(--accent-deep); font-weight: 600; }


/* ================================================================
   RETOURS 22/09 — patrimoine hero calme + bandeaux défilants + estimation
   ================================================================ */

/* Bandeau défilant de transition (patrimoine, estimation) */
.sep-band {
  background: var(--accent);
  overflow: hidden;
  padding: 14px 0;
}
.sep-band-track {
  display: flex; width: max-content;
  animation: defile-loop 26s linear infinite;
}
.sep-band-track > span {
  font-family: var(--knock);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: clamp(.85rem, 1.4vw, 1.05rem);
  color: var(--cream);
  white-space: nowrap;
  padding-right: 8px;
}
@media (prefers-reduced-motion: reduce) {
  .sep-band-track { animation: none; }
}

/* Hero patrimoine statique (remplace l'intro animée) */
.patri-hero { text-align: center; padding-bottom: clamp(30px, 4vw, 56px); }
.patri-h1 { margin-bottom: 10px; }
.patri-h1 em { font-family: var(--display); font-style: italic; color: var(--accent); }
.patri-hero-sous {
  color: var(--accent-deep);
  font-family: var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: clamp(.8rem, 1.3vw, .95rem);
  margin: 0 auto clamp(26px, 3.5vw, 44px);
}
.patri-compo { max-width: 1080px; margin: 0 auto; }

/* Patrimoine : cases du formulaire arrondies partout (cohérence) */
.patri-wire .patri-form-tile input { border-radius: 999px; }
.patri-wire .patri-form-tile textarea { border-radius: 18px; }

/* Estimation : phrase d'intro sur une ligne, en orange (plus de noir) */
.estim-intro-ligne {
  color: var(--accent-deep);
  max-width: none;
  text-align: center;
  margin: -6px auto 30px;
}
@media (min-width: 980px) {
  .estim-intro-ligne { white-space: nowrap; font-size: clamp(1rem, 1.45vw, 1.25rem); }
}
.estim-wire .home-h1 + .estim-intro-ligne { margin-top: 2px; }

/* Estimation : espaces réduits entre les sections */
.estim-wire .home-sec { padding-top: clamp(34px, 4.5vw, 60px); padding-bottom: clamp(34px, 4.5vw, 60px); }
.estim-wire .estim-vendus { padding-bottom: clamp(50px, 7vw, 90px); }


/* Travaux / services : cohérence des arrondis + espaces resserrés */
.svc-step-card { border-radius: 10px; }
.svc-photo img { border-radius: 10px; }
.svc-wire .svc-main { padding-bottom: clamp(30px, 4vw, 54px); }
.svc-wire .svc-decouvrir { padding-top: clamp(30px, 4vw, 54px); }
.svc-cta { text-align: center; }

/* Pantone patrimoine cliquable vers le Groupe LG */
a.pfan-nuancier { display: block; text-decoration: none; cursor: pointer; }
a.pfan-nuancier:hover .pfan-card { filter: brightness(1.05); }


/* Retours 22/09 — menu plus épais et vraiment recentré */
.site-header { grid-template-columns: 1fr auto 1fr; }
.site-header .logo { justify-self: start; }
.site-header .hd-right { justify-self: end; }
.hd-nav a { font-size: 15.5px; letter-spacing: .01em; padding: 6px 2px; }
@media (max-width: 1280px) {
  .hd-nav a { font-size: 14px; }
}


/* Pause café fusionnée sur la page équipe */
.equipe-cafe { text-align: center; }
.equipe-cafe-lede {
  color: var(--ink-soft); max-width: 58ch;
  margin: 0 auto 22px;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
}


/* Hero patrimoine : pas de double frappe fantôme (l'italique s'y superpose mal) */
.patri-h1.v7-giant::before { content: none; }


/* ================================================================
   RETOURS 22/09 (bis) — « La tournée » remplacée par une galerie
   calme et élégante des cartes de visite.
   ================================================================ */
.vgal-zone { text-align: center; }
.vgal-h2 { margin-bottom: 8px; }
.vgal-h2 em { font-family: var(--display); font-style: italic; }
.vgal-sous {
  color: var(--ink-soft);
  font-family: var(--display); font-style: italic;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  margin: 0 auto clamp(30px, 4vw, 50px);
}
/* la galerie remplace le rail défilant : tout est visible, sans scroll */
.vgal.vdeck {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(22px, 2.6vw, 40px);
  overflow: visible; padding: 10px 0 26px;
  max-width: 1240px; margin: 0 auto;
}
.vgal .vk {
  width: clamp(190px, 16vw, 240px);
  transform: rotate(-1.6deg);
  transition: transform .3s ease;
}
.vgal .vk:nth-child(2n) { transform: rotate(1.8deg); }
.vgal .vk:hover { transform: rotate(0deg) translateY(-8px); }
.vgal .vk-img, .vgal .vk-attente {
  border-radius: 12px;
  box-shadow: 0 14px 30px rgba(120, 40, 0, .18);
  background: var(--white);
  /* Retour 22/09 : toutes les cartes au même format (celle d'Ingrid
     arrive dans un autre gabarit — on la recadre à l'affichage). */
  aspect-ratio: 820 / 1303;
  width: 100%;
  object-fit: cover;
}
.vgal .vk-actif { transform: rotate(0deg) scale(1.04); }
.vgal .vk-actif:hover { transform: rotate(0deg) scale(1.04) translateY(-4px); }
/* légende sous chaque carte */
.vk-son {
  display: block; margin-top: 10px;
  font-size: 12.5px; line-height: 1.35;
  color: var(--ink-soft);
}
.vk-son em { font-style: italic; color: var(--accent-deep); }
.vgal .vk-actif .vk-son { color: var(--accent-deep); font-weight: 600; }
/* carte en attente d'illustration : même gabarit que les autres */
.vgal .vk-attente { aspect-ratio: 820 / 1303; width: 100%; }
.vgal-zone .vplayer { margin-top: clamp(18px, 2.5vw, 30px); }
@media (max-width: 760px) {
  .vgal .vk { width: clamp(140px, 42vw, 170px); }
  .vk-son { font-size: 11.5px; }
}


/* titre de la galerie : centré, sans double frappe (l'italique s'y superpose mal) */
.vgal-zone .home-h2.vgal-h2 { text-align: center; }
.vgal-h2.v7-giant::before { content: none; }

/* ============================================================
   Retour 22/09 — fiche bien : moins de vide avant Localisation
   ============================================================ */
.fiche-hero { padding-bottom: clamp(26px, 3.2vw, 44px); }
.fiche-hero .fiche-duo:last-of-type { margin-bottom: 0; }
.fiche-loc.home-sec { padding-top: clamp(24px, 3vw, 44px); }

/* ============================================================
   Retour 22/09 — pied de page nettement plus compact
   ============================================================ */
.foot-slogan { padding: 10px var(--pad) 0; }
.foot-quote { font-size: clamp(.95rem, 1.4vw, 1.1rem); }
.foot-top {
  padding: 12px var(--pad) 8px; gap: 18px;
  /* 5 blocs = 5 colonnes : le bloc contact ne passe plus dessous */
  grid-template-columns: 1.2fr 1fr 1fr 1fr 1.1fr;
}
@media (max-width: 900px) { .foot-top { grid-template-columns: 1fr 1fr; } }
.foot-logo .logo-img { height: 26px; }
.foot-logo { margin-bottom: 4px; }
.foot-timbre { width: 30px; margin-top: 4px; }
.foot-links a { font-size: 12.5px; padding: 2px 0; }
.foot-col-t { margin-bottom: 4px; }
.foot-info .micro + .micro { margin-top: 6px; }
.foot-bottom { padding: 6px var(--pad); }
.site-footer .micro { font-size: 11.5px; }

/* Retour 22/09 : titre « Nos honoraires » centré par rapport au tableau */
.honoraires-page h1.home-h2.h2-orange { text-align: center; }

/* ============================================================
   Retour 22/09 — « Rejoindre notre équipe » façon carte postale
   ============================================================ */
.recrut-cp { text-align: center; }
.recrut-cp .home-h2.h2-orange.recrut-h2-cp { text-align: center; text-transform: uppercase; }
.recrut-h2-cp em { font-family: var(--display); font-style: italic; text-transform: none; }
.recrut-h2-cp.v7-giant::before { content: none; }
.recrut-lede-cp {
  font-family: var(--display); font-style: italic; color: var(--ink-soft);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  margin: 6px auto clamp(28px, 4vw, 46px); max-width: 52ch;
}
.cpost {
  display: grid; grid-template-columns: .9fr 1.1fr;
  max-width: 1040px; margin: 0 auto;
  background: var(--white); border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(120, 40, 0, .16);
  transform: rotate(-.6deg);
  text-align: left;
}
.cpost-photo { margin: 0; position: relative; }
.cpost-photo img { width: 100%; height: 100%; min-height: 340px; object-fit: cover; display: block; }
.cpost-photo figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(255, 248, 243, .92); color: var(--accent-deep);
  font-family: var(--display); font-style: italic; font-size: 13px;
  padding: 8px 14px;
}
.cpost-form {
  position: relative;
  padding: clamp(26px, 3.4vw, 46px) clamp(24px, 3vw, 44px) clamp(22px, 2.8vw, 38px);
  border-left: 2px dashed rgba(234, 91, 12, .35);
  display: flex; flex-direction: column; gap: clamp(14px, 1.8vw, 22px);
}
.cpost-timbre {
  position: absolute; top: 20px; right: 20px;
  width: clamp(44px, 4vw, 60px); transform: rotate(6deg); opacity: .95;
}
.cpost-l {
  display: block; font-family: var(--sans); font-weight: 700;
  font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent-deep); max-width: calc(100% - 70px);
}
.cpost-msg { max-width: 100%; }
.cpost-form .cpost-l input, .cpost-form .cpost-l textarea {
  display: block; width: 100%; margin-top: 2px;
  border: 0; border-bottom: 1.5px solid rgba(234, 91, 12, .4); border-radius: 0;
  background: transparent;
  font-family: var(--display); font-style: italic; font-size: 17px;
  color: var(--ink); padding: 6px 2px;
  transition: border-color .3s;
}
.cpost-form .cpost-l textarea {
  border-bottom: 0; resize: vertical; min-height: 104px; line-height: 30px;
  background-image: repeating-linear-gradient(transparent, transparent 29px,
    rgba(234, 91, 12, .35) 29px, rgba(234, 91, 12, .35) 30px);
}
.cpost-form .cpost-l input:focus, .cpost-form .cpost-l textarea:focus {
  outline: none; border-color: var(--accent);
}
.cpost-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-top: 4px;
}
.cpost-cv {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  color: var(--accent-deep); font-weight: 600; font-size: 13.5px;
  border: 1.5px dashed var(--accent); border-radius: 999px; padding: 9px 18px;
  transition: background .3s;
}
.cpost-cv:hover { background: var(--blush-soft); }
.cpost-cv svg { width: 16px; height: 16px; }
.cpost-cv input[type="file"] { display: none; }
.cpost-form .form-ok { margin-top: 4px; }
@media (max-width: 860px) {
  .cpost { grid-template-columns: 1fr; transform: none; }
  .cpost-photo img { min-height: 200px; max-height: 240px; }
  .cpost-form { border-left: 0; border-top: 2px dashed rgba(234, 91, 12, .35); }
  .cpost-l { max-width: 100%; }
  .cpost-timbre { top: 14px; right: 14px; }
}

/* ============================================================
   VOILÀ PATRIMOINE — refonte éditoriale premium (22/09/2026)
   Palette 100 % crème / blush / orange — aucun aplat noir.
   Préfixe .patri26- : n'impacte aucune autre page.
   ============================================================ */

.patri26 { background: var(--cream); }
.patri26-sec {
  padding: clamp(60px, 7vw, 118px) var(--pad);
  position: relative;
}
.patri26-eyebrow {
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent-deep); margin: 0 0 14px;
}
.patri26-eyebrow-ink { text-align: center; }

.patri26-h1, .patri26-h2 {
  position: relative; z-index: 1;
  font-family: var(--knock); font-weight: 400;
  text-transform: uppercase; letter-spacing: .01em;
  line-height: .9; margin: 0; color: var(--accent-deep);
}
.patri26-h1::before, .patri26-h2::before {
  content: attr(data-txt);
  position: absolute; left: 0; top: 0;
  transform: translate(.055em, .07em);
  color: transparent; -webkit-text-stroke: 1.5px var(--accent);
  white-space: nowrap; z-index: -1; opacity: .5; pointer-events: none;
}
.patri26-h2 {
  font-size: clamp(40px, 7vw, 108px);
  text-align: center; margin-bottom: 12px;
}
.patri26-h2::before { left: 50%; transform: translate(calc(-50% + .055em), .07em); }
.patri26-h2-cream { text-align: left; }
.patri26-h2-cream::before {
  left: 0; transform: translate(.055em, .07em);
  -webkit-text-stroke-color: var(--cream); opacity: .95;
}
.patri26-sub {
  text-align: center; max-width: 720px; margin: 0 auto clamp(32px, 4vw, 58px);
  font-family: var(--display); font-style: italic;
  font-size: clamp(16px, 1.55vw, 21px); line-height: 1.55; color: var(--ink-soft);
}
.patri26-sub-hint {
  display: block; margin-top: 8px; font-family: var(--sans); font-style: normal;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-deep);
}

/* --- Boutons ------------------------------------------------ */
.patri26-btns { display: flex; flex-wrap: wrap; gap: 12px; margin: clamp(26px, 3vw, 42px) 0 0; }
.patri26-sec .patri26-btns.center, .patri26-final .patri26-btns { justify-content: center; }
.patri26-btn {
  display: inline-block; font-family: var(--sans); font-weight: 600;
  font-size: 13.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cream); background: var(--accent);
  padding: 16px 32px; border-radius: 999px; border: 2px solid var(--accent);
  cursor: pointer; text-align: center;
  transition: background .25s ease, color .25s ease, transform .25s ease, border-color .25s ease;
}
.patri26-btn:hover {
  background: var(--accent-deep); border-color: var(--accent-deep);
  color: var(--cream); transform: rotate(-1.2deg) scale(1.03);
}
.patri26-btn-ghost { background: transparent; color: var(--accent-deep); border-color: var(--accent); }
.patri26-btn-ghost:hover { background: var(--blush-soft); color: var(--accent-deep); border-color: var(--accent-deep); }
.patri26-btn-ink { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--cream); }
.patri26-btn-ink:hover { background: var(--accent); border-color: var(--accent); }

/* --- Hero ---------------------------------------------------- */
.patri26-hero {
  background: var(--cream-2); color: var(--ink);
  padding: clamp(64px, 8vw, 132px) var(--pad) clamp(58px, 7vw, 110px);
  overflow: hidden;
}
.patri26-hero-in {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
/* Retour cliente 22/09 : le titre débordait sur les photos. On le cale
   dans sa colonne — la composition photo reste intacte à droite. */
.patri26-hero-txt { min-width: 0; }
.patri26-h1 {
  font-size: clamp(52px, 8vw, 128px);
  margin-bottom: 18px;
  max-width: 100%;
}
.patri26-h1::before { opacity: .8; }
.patri26-hero-it {
  font-family: var(--display); font-style: italic;
  font-size: clamp(20px, 2.4vw, 32px); line-height: 1.3;
  color: var(--accent-deep); margin: 0 0 18px;
}
.patri26-lede {
  font-family: var(--sans); font-size: clamp(15px, 1.25vw, 17.5px);
  line-height: 1.7; color: var(--ink-soft); max-width: 54ch; margin: 0;
}
.patri26-hero-compo { position: relative; min-height: clamp(300px, 34vw, 480px); }
.patri26-hero-p {
  position: absolute; margin: 0; overflow: hidden;
  border: 4px solid var(--cream); border-radius: 4px;
  box-shadow: 0 18px 38px rgba(201, 74, 5, .18);
}
.patri26-hero-p img { display: block; width: 100%; height: 100%; object-fit: cover; }
.patri26-hero-p1 { width: 72%; height: 78%; top: 0; left: 0; transform: rotate(-3deg); }
.patri26-hero-p2 { width: 52%; height: 54%; bottom: 0; right: 0; transform: rotate(4deg); }
.patri26-hero-badge {
  position: absolute; top: 58%; left: 58%;
  transform: translate(-50%, -50%) rotate(-12deg);
  background: var(--accent); color: var(--cream);
  font-family: var(--knock); text-transform: uppercase; line-height: .92;
  font-size: clamp(16px, 1.8vw, 26px); text-align: center;
  width: clamp(84px, 9vw, 128px); height: clamp(84px, 9vw, 128px);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  border: 3px solid var(--cream); z-index: 3;
  box-shadow: 0 10px 24px rgba(201, 74, 5, .28);
}
.patri26-ticker { border-top: 0; border-bottom-color: var(--accent-deep); }

/* --- Chiffres ------------------------------------------------ */
.patri26-chiffres { background: var(--blush-soft); padding-bottom: clamp(40px, 5vw, 76px); }
.patri26-nums {
  list-style: none; margin: 0 auto; padding: 0; max-width: 1180px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border: 2px solid var(--accent); border-radius: 22px; overflow: hidden;
  background: var(--cream);
}
.patri26-nums li {
  padding: clamp(24px, 3vw, 40px) clamp(14px, 1.6vw, 24px);
  text-align: center; border-right: 2px solid var(--blush);
  display: flex; flex-direction: column; gap: 8px; justify-content: center;
}
.patri26-nums li:last-child { border-right: 0; }
.patri26-nums strong {
  font-family: var(--knock); font-weight: 400;
  font-size: clamp(34px, 4.6vw, 70px); line-height: .95;
  color: var(--accent-deep); white-space: nowrap;
}
.patri26-nums span {
  font-family: var(--sans); font-size: 13px; line-height: 1.45;
  color: var(--ink-soft);
}
.patri26-nums-note {
  text-align: center; font-family: var(--sans); font-size: 11.5px;
  letter-spacing: .04em; color: var(--ink-soft); opacity: .75;
  margin: 16px 0 0;
}

/* --- Méthode ------------------------------------------------- */
.patri26-methode { background: var(--cream); }
.patri26-steps {
  list-style: none; margin: 0 auto; padding: 0; max-width: 1180px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 1.8vw, 26px);
}
.patri26-step {
  background: var(--cream-2); border: 2px solid var(--blush); border-radius: 20px;
  padding: clamp(22px, 2.4vw, 34px) clamp(18px, 2vw, 28px);
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.patri26-step:hover {
  transform: translateY(-6px) rotate(-.6deg);
  border-color: var(--accent);
  box-shadow: 0 16px 34px rgba(201, 74, 5, .16);
}
.patri26-step-n {
  font-family: var(--knock); font-size: clamp(30px, 3.4vw, 52px);
  line-height: .9; color: var(--accent);
}
.patri26-step-t {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(17px, 1.5vw, 21px); line-height: 1.25;
  color: var(--accent-deep); margin: 0;
}
.patri26-step-p {
  font-family: var(--sans); font-size: 14px; line-height: 1.65;
  color: var(--ink-soft); margin: 0;
}

/* --- Programme (conversion) ---------------------------------- */
.patri26-prog { background: var(--blush); color: var(--ink); scroll-margin-top: 90px; }
.patri26-prog .patri26-eyebrow { color: var(--accent-deep); }
.patri26-prog-in {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 4.5vw, 64px); align-items: center;
}
.patri26-prog-lede {
  font-family: var(--display); font-style: italic;
  font-size: clamp(17px, 1.7vw, 23px); color: var(--accent-deep);
  margin: 10px 0 24px;
}
.patri26-bullets { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.patri26-bullets li {
  position: relative; padding-left: 30px;
  font-family: var(--sans); font-size: 14.5px; line-height: 1.6;
  color: var(--ink-soft);
}
/* Sur le fond blush, on fonce l'orange pour garder un contraste lisible. */
.patri26-prog .patri26-h2, .patri26-prog .patri26-eyebrow { color: #8a3203; }
.patri26-prog .patri26-h2::before { -webkit-text-stroke-color: var(--cream); opacity: .9; }
.patri26-prog-lede { color: #8a3203; }
.patri26-bullets li strong { color: #8a3203; font-weight: 700; }
.patri26-bullets li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--cream);
}
.patri26-form-card {
  background: var(--cream); color: var(--ink);
  border: 2px solid var(--accent); border-radius: 24px;
  padding: clamp(24px, 3vw, 40px);
  box-shadow: 0 20px 44px rgba(201, 74, 5, .2);
}
.patri26-form-t {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(20px, 2vw, 27px); line-height: 1.2;
  margin: 0 0 18px; color: var(--accent-deep);
}
.patri26-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.patri26-form input, .patri26-form select, .patri26-form textarea {
  width: 100%; font-family: var(--sans); font-size: 14.5px; color: var(--ink);
  background: #fff; border: 1.5px solid var(--blush);
  border-radius: 12px; padding: 14px 16px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.patri26-form textarea { resize: vertical; min-height: 84px; margin-bottom: 14px; }
.patri26-form select { appearance: none; cursor: pointer; background-image: none; }
.patri26-form input:focus, .patri26-form select:focus, .patri26-form textarea:focus {
  outline: 0; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(234, 91, 12, .18);
}
.patri26-form input::placeholder, .patri26-form textarea::placeholder { color: rgba(85, 80, 63, .6); }
.patri26-btn-form { width: 100%; }
.patri26-form-legal {
  font-family: var(--sans); font-size: 11.5px; line-height: 1.5;
  color: var(--ink-soft); opacity: .8; text-align: center; margin: 12px 0 0;
}
.patri26-form .form-ok {
  margin-top: 14px; font-family: var(--sans); font-size: 13.5px; line-height: 1.6;
  color: var(--accent-deep); background: var(--blush-soft);
  border-radius: 12px; padding: 12px 14px;
}

/* --- Diptyques projet / résultat ----------------------------- */
.patri26-avap { background: var(--cream-2); }
.patri26-dips {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px);
}
.patri26-dip { margin: 0; cursor: pointer; }
.patri26-dip:focus-visible { outline: 3px solid var(--accent); outline-offset: 6px; border-radius: 18px; }
.patri26-dip-wrap {
  position: relative; display: block; overflow: hidden;
  border: 3px solid var(--cream); border-radius: 18px;
  aspect-ratio: 4 / 3; background: var(--blush-soft);
  box-shadow: 0 14px 30px rgba(201, 74, 5, .16);
}
.patri26-dip-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: opacity .5s ease;
}
.patri26-dip-a { opacity: 1; }
.patri26-dip-b { opacity: 0; }
.patri26-dip.is-after .patri26-dip-a { opacity: 0; }
.patri26-dip.is-after .patri26-dip-b { opacity: 1; }
.patri26-dip-tag {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 8px 16px; border-radius: 999px;
  border: 1.5px solid var(--accent); transition: opacity .35s ease;
}
.patri26-dip-tag-a { background: var(--cream); color: var(--accent-deep); opacity: 1; }
.patri26-dip-tag-b { background: var(--accent); color: var(--cream); opacity: 0; }
.patri26-dip.is-after .patri26-dip-tag-a { opacity: 0; }
.patri26-dip.is-after .patri26-dip-tag-b { opacity: 1; }
.patri26-dip figcaption {
  display: block; margin-top: 12px;
  font-family: var(--sans); font-size: 14px; color: var(--ink-soft);
}
.patri26-dip figcaption strong { font-weight: 700; display: block; color: var(--accent-deep); }
.patri26-dip-note {
  display: block; margin-top: 4px; font-size: 13px;
  color: var(--ink-soft); line-height: 1.5;
}

/* --- Artisans ------------------------------------------------ */
.patri26-artisans { background: var(--blush-soft); scroll-margin-top: 90px; }

/* --- FAQ ----------------------------------------------------- */
.patri26-faq { background: var(--cream); }
.patri26-faq-list { max-width: 820px; margin: 0 auto; }
.patri26-faq-item { border-bottom: 2px solid var(--blush); }
.patri26-faq-item:first-child { border-top: 2px solid var(--blush); }
.patri26-faq-item summary {
  list-style: none; cursor: pointer; position: relative;
  padding: clamp(18px, 2vw, 26px) 48px clamp(18px, 2vw, 26px) 0;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(17px, 1.55vw, 22px); line-height: 1.35; color: var(--accent-deep);
  transition: color .2s ease;
}
.patri26-faq-item summary::-webkit-details-marker { display: none; }
.patri26-faq-item summary:hover { color: var(--accent); }
.patri26-faq-item summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%;
  transform: translateY(-50%); font-family: var(--sans); font-weight: 400;
  font-size: 30px; line-height: 1; color: var(--accent);
  transition: transform .3s ease;
}
.patri26-faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.patri26-faq-r { padding: 0 48px clamp(20px, 2.2vw, 28px) 0; }
.patri26-faq-r p {
  margin: 0; font-family: var(--sans); font-size: 14.5px;
  line-height: 1.7; color: var(--ink-soft);
}
.patri26-faq-r a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; }

/* --- Bandeau final ------------------------------------------- */
.patri26-final {
  background: var(--accent); color: var(--cream);
  padding: clamp(58px, 7vw, 108px) var(--pad);
  text-align: center;
}
.patri26-final-t {
  font-family: var(--knock); font-weight: 400; text-transform: uppercase;
  font-size: clamp(32px, 5.4vw, 82px); line-height: .96;
  margin: 0 0 14px; color: var(--cream);
}
.patri26-final-p {
  font-family: var(--display); font-style: italic;
  font-size: clamp(16px, 1.6vw, 22px); color: rgba(255, 248, 243, .9); margin: 0;
}
.patri26-final .patri26-btn { background: var(--cream); color: var(--accent-deep); border-color: var(--cream); }
.patri26-final .patri26-btn:hover { background: var(--cream-2); color: var(--accent-deep); border-color: var(--cream-2); }

/* --- Responsive ---------------------------------------------- */
@media (max-width: 1080px) {
  .patri26-steps { grid-template-columns: repeat(2, 1fr); }
  .patri26-dips { grid-template-columns: 1fr 1fr; }
  .patri26-dips .patri26-dip:last-child { grid-column: 1 / -1; max-width: 560px; margin: 0 auto; width: 100%; }
}
@media (max-width: 900px) {
  .patri26-hero-in { grid-template-columns: 1fr; }
  .patri26-hero-compo { min-height: 320px; order: -1; }
  .patri26-prog-in { grid-template-columns: 1fr; }
  .patri26-h2-cream { text-align: center; }
  .patri26-h2-cream::before { left: 50%; transform: translate(calc(-50% + .055em), .07em); }
  .patri26-prog-txt .patri26-eyebrow { text-align: center; }
  .patri26-prog-lede { text-align: center; }
  .patri26-nums { grid-template-columns: 1fr 1fr; }
  .patri26-nums li:nth-child(2) { border-right: 0; }
  .patri26-nums li:nth-child(1), .patri26-nums li:nth-child(2) { border-bottom: 2px solid var(--blush); }
}
@media (max-width: 640px) {
  .patri26-steps { grid-template-columns: 1fr; }
  .patri26-dips { grid-template-columns: 1fr; }
  .patri26-dips .patri26-dip:last-child { max-width: none; }
  .patri26-form .form-row { grid-template-columns: 1fr; }
  .patri26-btns { justify-content: center; }
  .patri26-btn { width: 100%; }
  .patri26-hero-badge { width: 78px; height: 78px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .patri26-step:hover, .patri26-btn:hover { transform: none; }
  .patri26-dip-img, .patri26-dip-tag { transition: none; }
}

/* ============================================================
   FORMULAIRES VOILÀ — refonte « dossier » (22/09/2026)
   Préfixe .vf- : contact, location-gestion, formulaire acquéreur.
   Pas d'illustration tasse / orange, pas de gros aplat noir.
   ============================================================ */

.vf-page { background: var(--cream); }

/* --- Bandeau de tête ---------------------------------------- */
.vf-hero {
  background: var(--cream-2);
  padding: clamp(56px, 7vw, 108px) var(--pad) clamp(44px, 5vw, 76px);
  text-align: center; overflow: hidden;
}
.vf-hero-in { max-width: 860px; margin: 0 auto; }
.vf-eyebrow {
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent-deep); margin: 0 0 16px;
}
.vf-h1 {
  position: relative; z-index: 1; display: inline-block;
  font-family: var(--knock); font-weight: 400;
  text-transform: uppercase; letter-spacing: .01em;
  font-size: clamp(38px, 6.4vw, 96px); line-height: .92;
  margin: 0 0 16px; color: var(--accent-deep);
}
.vf-h1::before {
  content: attr(data-txt);
  position: absolute; left: 0; top: 0;
  transform: translate(.05em, .07em);
  color: transparent; -webkit-text-stroke: 1.5px var(--accent);
  z-index: -1; opacity: .45; pointer-events: none; white-space: pre-line;
}
.vf-hero-it {
  font-family: var(--display); font-style: italic;
  font-size: clamp(17px, 1.9vw, 25px); line-height: 1.35;
  color: var(--accent-deep); margin: 0 auto 14px; max-width: 30ch;
}
.vf-hero-p {
  font-family: var(--sans); font-size: clamp(14.5px, 1.2vw, 16.5px);
  line-height: 1.7; color: var(--ink-soft); margin: 0 auto; max-width: 62ch;
}

/* --- Corps ---------------------------------------------------- */
.vf-body {
  padding: clamp(42px, 5vw, 84px) var(--pad) clamp(52px, 6vw, 96px);
  background: var(--blush-soft);
}
.vf-card {
  max-width: 940px; margin: 0 auto;
  background: var(--cream); border: 2px solid var(--accent);
  border-radius: 28px; padding: clamp(24px, 3.4vw, 54px);
  box-shadow: 0 24px 52px rgba(201, 74, 5, .16);
}

/* --- Encart d'explication ------------------------------------ */
.vf-note {
  border: 1.5px solid var(--blush); border-left: 5px solid var(--accent);
  background: var(--cream-2); border-radius: 0 16px 16px 0;
  padding: clamp(16px, 1.8vw, 24px) clamp(18px, 2vw, 26px);
  margin: 0 0 clamp(26px, 3vw, 40px);
}
.vf-note-t {
  font-family: var(--display); font-weight: 700; font-size: 21px;
  color: var(--accent-deep); margin: 0 0 12px;
}
.vf-note p {
  font-family: var(--sans); font-size: 14.5px; line-height: 1.7;
  color: var(--ink-soft); margin: 0 0 10px;
}
.vf-note p:last-child { margin-bottom: 0; }
.vf-note strong { color: var(--accent-deep); font-weight: 700; }

/* --- Blocs numérotés ----------------------------------------- */
.vf-block { border: 0; margin: 0 0 clamp(28px, 3.2vw, 44px); padding: 0; }
.vf-block:last-of-type { margin-bottom: 0; }
.vf-block-h {
  display: flex; align-items: baseline; gap: 14px;
  margin: 0 0 clamp(16px, 1.8vw, 24px);
  padding-bottom: 12px; border-bottom: 2px solid var(--blush);
}
.vf-num {
  font-family: var(--knock); font-weight: 400; line-height: 1;
  font-size: clamp(24px, 2.4vw, 34px); color: var(--accent);
  flex: 0 0 auto;
}
.vf-block-t {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(18px, 1.7vw, 24px); line-height: 1.2;
  color: var(--accent-deep); margin: 0;
}
.vf-block-hint {
  font-family: var(--sans); font-style: normal; font-size: 12.5px;
  color: var(--ink-soft); margin-left: auto; text-align: right;
}

/* --- Champs --------------------------------------------------- */
.vf-rows { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.4vw, 18px); }
.vf-f { display: grid; gap: 7px; min-width: 0; }
.vf-f-w { grid-column: 1 / -1; }
.vf-lbl {
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent-deep);
}
.vf-lbl-opt { font-weight: 400; letter-spacing: .04em; text-transform: none; color: var(--ink-soft); }
.vf-f input, .vf-f select, .vf-f textarea {
  width: 100%; font-family: var(--sans); font-size: 15px; color: var(--ink);
  background: #fff; border: 1.5px solid var(--blush); border-radius: 12px;
  padding: 13px 16px; transition: border-color .2s ease, box-shadow .2s ease;
}
.vf-f textarea { resize: vertical; min-height: 104px; line-height: 1.6; }
.vf-f select {
  appearance: none; cursor: pointer; padding-right: 42px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23c94a05' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px;
}
.vf-f input::placeholder, .vf-f textarea::placeholder { color: rgba(85, 80, 63, .55); }
.vf-f input:focus, .vf-f select:focus, .vf-f textarea:focus {
  outline: 0; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(234, 91, 12, .18);
}
.vf-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* --- Cases à cocher en pastilles ------------------------------ */
.vf-chks { display: flex; flex-wrap: wrap; gap: 10px; }
.vf-chk { position: relative; cursor: pointer; }
.vf-chk input {
  position: absolute; opacity: 0; width: 100%; height: 100%;
  margin: 0; cursor: pointer; left: 0; top: 0;
}
.vf-chk span {
  display: block; font-family: var(--sans); font-size: 14px; font-weight: 500;
  color: var(--ink-soft); background: #fff;
  border: 1.5px solid var(--blush); border-radius: 999px;
  padding: 11px 20px; transition: all .2s ease;
}
.vf-chk:hover span { border-color: var(--accent); color: var(--accent-deep); }
.vf-chk input:checked + span {
  background: var(--accent); border-color: var(--accent);
  color: var(--cream); font-weight: 600;
}
.vf-chk input:focus-visible + span { box-shadow: 0 0 0 3px rgba(234, 91, 12, .3); }

/* --- Choix en cartes (radio) ---------------------------------- */
.vf-cards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.4vw, 18px); }
.vf-rc { position: relative; cursor: pointer; display: block; }
.vf-rc input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vf-rc-in {
  display: block; height: 100%; background: #fff;
  border: 2px solid var(--blush); border-radius: 18px;
  padding: clamp(18px, 2vw, 26px); transition: all .22s ease;
}
.vf-rc:hover .vf-rc-in { border-color: var(--accent); transform: translateY(-3px); }
.vf-rc input:checked + .vf-rc-in {
  border-color: var(--accent); background: var(--cream-2);
  box-shadow: 0 12px 26px rgba(201, 74, 5, .16);
}
.vf-rc input:focus-visible + .vf-rc-in { box-shadow: 0 0 0 3px rgba(234, 91, 12, .3); }
.vf-rc-t {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--display); font-weight: 700; font-size: 17px;
  color: var(--accent-deep); margin: 0 0 8px;
}
.vf-rc-t::before {
  content: ""; flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--accent); background: #fff; transition: all .2s ease;
}
.vf-rc input:checked + .vf-rc-in .vf-rc-t::before {
  background: var(--accent); box-shadow: inset 0 0 0 3px #fff;
}
.vf-rc-p {
  font-family: var(--sans); font-size: 13.5px; line-height: 1.6;
  color: var(--ink-soft); margin: 0;
}

/* --- Envoi ---------------------------------------------------- */
.vf-send-wrap {
  margin: clamp(28px, 3.2vw, 44px) 0 0; padding-top: clamp(22px, 2.6vw, 34px);
  border-top: 2px solid var(--blush); text-align: center;
}
.vf-send {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--sans); font-weight: 600; font-size: 14px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--cream); background: var(--accent);
  border: 2px solid var(--accent); border-radius: 999px;
  padding: 18px 44px; cursor: pointer;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.vf-send::after { content: "→"; font-size: 17px; letter-spacing: 0; }
.vf-send:hover { background: var(--accent-deep); border-color: var(--accent-deep); transform: translateY(-2px); }
.vf-send:disabled { opacity: .55; cursor: default; transform: none; }
.vf-legal {
  font-family: var(--sans); font-size: 12px; line-height: 1.6;
  color: var(--ink-soft); margin: 14px auto 0; max-width: 52ch;
}
.vf-form .form-ok {
  margin: 16px auto 0; max-width: 56ch;
  font-family: var(--sans); font-size: 14px; line-height: 1.6;
  color: var(--accent-deep); background: var(--blush-soft);
  border: 1.5px solid var(--accent); border-radius: 14px; padding: 14px 18px;
}

/* --- Trois façons de nous joindre ----------------------------- */
.vf-contacts {
  max-width: 940px; margin: clamp(30px, 3.4vw, 48px) auto 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.4vw, 18px);
}
.vf-ct {
  display: block; text-decoration: none; text-align: center;
  background: var(--cream); border: 1.5px solid var(--blush);
  border-radius: 18px; padding: clamp(18px, 2vw, 26px);
  transition: border-color .2s ease, transform .2s ease;
}
.vf-ct:hover { border-color: var(--accent); transform: translateY(-3px); }
.vf-ct-k {
  display: block; font-family: var(--sans); font-size: 11.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: 8px;
}
.vf-ct-v {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: clamp(15px, 1.35vw, 18px); line-height: 1.3; color: var(--accent-deep);
}
.vf-ct-s {
  display: block; margin-top: 6px; font-family: var(--sans);
  font-size: 12.5px; line-height: 1.5; color: var(--ink-soft);
}
.vf-autre {
  text-align: center; margin: clamp(22px, 2.6vw, 34px) auto 0;
  font-family: var(--sans); font-size: 14px; color: var(--ink-soft);
}
.vf-autre a { color: var(--accent-deep); font-weight: 600; text-underline-offset: 3px; }

/* --- Responsive ----------------------------------------------- */
@media (max-width: 760px) {
  .vf-rows, .vf-cards { grid-template-columns: 1fr; }
  .vf-block-h { flex-wrap: wrap; gap: 8px 12px; }
  .vf-block-hint { margin-left: 0; text-align: left; width: 100%; }
  .vf-contacts { grid-template-columns: 1fr; }
  .vf-send { width: 100%; padding: 18px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .vf-rc:hover .vf-rc-in, .vf-ct:hover, .vf-send:hover { transform: none; }
}

/* ============================================================
   ÉTIQUETTE D'EN-TÊTE « FORMULAIRE ACQUÉREUR » (22/09/2026)
   Retour cliente : ni le cercle contour ni l'aplat orange. Direction
   retenue : une étiquette papier — rectangle à coins à peine arrondis,
   fond blush clair, texte orange, légèrement de travers comme les photos
   scotchées du site. Au survol elle se redresse et passe en orange plein.
   Sélecteur `.hd-nav a.hd-form-btn` obligatoire : plus haut dans la feuille,
   `.hd-nav a` fixe la couleur, `.hd-nav a::after` pose le soulignement
   animé et `.v8-on .hd-nav a` force `display:inline-block`.
   ============================================================ */
.hd-nav a.hd-form-btn,
.v8-on .hd-nav a.hd-form-btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--blush); border-radius: 3px;
  padding: 9px 15px; line-height: 1;
  white-space: nowrap;
  font-family: var(--sans); font-size: 11.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  /* #b34103 et non --accent-deep : sur le blush clair, l'orange profond
     ne tient que 3,9:1 en contraste, insuffisant pour du gras en 11,5px.
     Ce ton-ci monte à 4,7:1 et passe le seuil WCAG AA. */
  background: var(--blush-soft); color: #b34103;
  transform: rotate(-1.6deg);
  box-shadow: 0 4px 12px rgba(201, 74, 5, .13);
  transition: transform .25s ease, background .25s ease,
              border-color .25s ease, box-shadow .25s ease, color .25s ease;
}
/* On remplace le soulignement animé par la flèche de l'étiquette. */
.hd-nav a.hd-form-btn::after {
  content: "→";
  position: static; left: auto; right: auto; bottom: auto;
  width: auto; height: auto; background: none;
  font-size: 13px; line-height: 1;
  transform: none; transition: transform .25s ease;
}
.hd-nav a.hd-form-btn:hover,
.hd-nav a.hd-form-btn:focus-visible {
  background: var(--accent); border-color: var(--accent);
  color: var(--cream); opacity: 1;
  transform: rotate(0deg) translateY(-1px);
  box-shadow: 0 8px 20px rgba(201, 74, 5, .28);
}
.hd-nav a.hd-form-btn:hover::after,
.hd-nav a.hd-form-btn:focus-visible::after { transform: translateX(3px); }
.hd-nav a.hd-form-btn:focus-visible {
  outline: 2px solid var(--accent-deep); outline-offset: 3px;
}
@media (max-width: 1180px) {
  .hd-nav a.hd-form-btn,
  .v8-on .hd-nav a.hd-form-btn { padding: 8px 12px; font-size: 10.5px; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .hd-nav a.hd-form-btn, .hd-nav a.hd-form-btn::after { transition: none; }
  .hd-nav a.hd-form-btn:hover { transform: rotate(-1.6deg); }
  .hd-nav a.hd-form-btn:hover::after { transform: none; }
}

/* ============================================================
   RETOURS CLIENTE — PAGE D'ACCUEIL (22/09/2026)
   1. Barre du haut en rose clair, pour qu'elle se détache du crème.
   2. « Agence immobilière — Carcassonne » passe sous le grand VOILÀ.
   3. La playlist de l'équipe rejoint la colonne de droite.
   4. Le menu de droite est trié en trois familles.
   Ce bloc est en fin de feuille : plus haut, les couches v6/v7/v8
   repeignent déjà le header et il faut passer après elles.
   ============================================================ */

/* --- 1. Barre du haut en rose clair -------------------------- */
.site-header { background: var(--blush-soft); }
/* Sur l'accueil le header est en absolute au-dessus du hero et donc
   transparent depuis la v7 : on lui redonne le même fond rose. */
.home-v7 .site-header { background: var(--blush-soft); }

/* Sur ce rose, l'orange vif ne tient que 2,9:1 en contraste — insuffisant
   pour du gras en 14px. #b34103 monte à 4,7:1 et passe le seuil WCAG AA
   sans quitter la famille orange de la charte. */
.hd-nav a { color: #b34103; }
.hd-nav a:hover, .hd-nav a.active { opacity: 1; color: #8c3202; }
.hd-nav a::after { background: #b34103; }
.burger { color: #b34103; }
.burger-ico i { background: #b34103; }
.hd-ico { color: #b34103; }
.hd-ico:hover { color: var(--accent-deep); }
body.scrolled .site-header { box-shadow: 0 1px 0 rgba(201, 74, 5, .22); }

/* L'étiquette « Formulaire acquéreur » était en blush clair : sur un header
   devenu rose, elle disparaissait. Elle passe en crème — le papier se
   détache alors du rose, et #b34103 sur crème donne 5,4:1. */
.hd-nav a.hd-form-btn,
.v8-on .hd-nav a.hd-form-btn {
  background: var(--cream);
  border-color: var(--blush);
  box-shadow: 0 4px 12px rgba(201, 74, 5, .10);
}
.hd-nav a.hd-form-btn:hover,
.hd-nav a.hd-form-btn:focus-visible {
  background: var(--accent); border-color: var(--accent); color: var(--cream);
}

/* --- 2. Le kicker sous le grand VOILÀ ------------------------ */
/* Il ne coiffe plus le hero : il vient juste au-dessus de la signature
   « L'immobilier vitaminé », donc sous les lettres géantes. */
.v7-hero-kicker {
  top: auto;
  bottom: calc(clamp(72px, 12vh, 120px) + clamp(46px, 4.6vw, 70px));
}

/* --- 3. La playlist passe à droite --------------------------- */
/* Elle s'empile au-dessus de l'assistant (bottom 88) et de WhatsApp
   (bottom 22), bord droit aligné sur les deux autres. */
.pl-fab { left: auto; right: 22px; bottom: 148px; }
/* Le panneau de l'assistant s'ouvrait à bottom:150px, pile à la place de la
   playlist — et il s'ouvre tout seul à l'arrivée sur grand écran. Plutôt que
   de masquer ou de décaler la playlist (elle retombait alors sur la signature
   « L'immobilier vitaminé »), c'est le panneau qui monte d'un cran. La colonne
   de droite reste une pile nette : WhatsApp, assistant, playlist, panneau. */
.chat-panel {
  bottom: 206px;
  max-height: min(560px, calc(100vh - 250px));
}
@media (max-width: 640px) {
  .pl-fab { left: auto; right: 14px; bottom: 140px; }
  /* Écran étroit : le panneau occupe presque toute la hauteur utile, le
     décaler le rendrait minuscule. La playlist s'efface le temps de la
     conversation, et revient dès qu'on referme l'assistant. */
  .pl-fab { transition: transform .3s, background .3s, color .3s, opacity .3s; }
  body.chat-ouvert .pl-fab {
    opacity: 0; pointer-events: none; transform: translateY(10px);
  }
  .chat-panel { bottom: 140px; max-height: min(560px, calc(100vh - 190px)); }
}
@media (max-width: 480px) {
  /* En pastille ronde, elle se cale au-dessus de l'assistant réduit. */
  .pl-fab { right: 14px; bottom: 134px; }
}

/* --- 4. Menu de droite : trois familles ---------------------- */
.ov-nav {
  display: grid; gap: clamp(22px, 3vw, 46px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}
.ov-grp { display: flex; flex-direction: column; min-width: 0; }
.ov-grp-t {
  font-family: var(--sans); font-size: 10.5px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  /* 10,5px en gras : --accent-deep plafonne à 4,47:1 sur le crème de
     l'overlay, tout juste sous le seuil AA. #b34103 monte à 5,4:1. */
  color: #b34103;
  margin: 0 0 10px; padding-bottom: 8px;
  border-bottom: 2px solid var(--blush);
}
/* Douze entrées réparties en colonnes : on peut descendre la taille,
   chaque famille reste lisible d'un coup d'œil. */
.ov-nav a { font-size: clamp(1.25rem, 2.5vh, 1.8rem); line-height: 1.2; }
@media (max-width: 900px) {
  .ov-nav { grid-template-columns: 1fr; gap: 26px; }
  .ov-nav a { font-size: clamp(1.3rem, 3.4vh, 1.9rem); }
}
@media (max-width: 760px) {
  /* En portrait la signature passe sur deux lignes : on décale le kicker
     d'autant pour qu'il reste franchement au-dessus. */
  .v7-hero-kicker { top: auto; bottom: 212px; }
}

/* Menu ouvert : les pastilles flottantes (assistant, playlist, WhatsApp)
   passaient par-dessus la troisième colonne du menu. On les range le temps
   de la navigation. */
body.nav-open .chat-fab,
body.nav-open .chat-panel,
body.nav-open .pl-fab,
body.nav-open .wa-btn {
  opacity: 0; pointer-events: none; visibility: hidden;
}

/* Sur l'accueil le header flotte au-dessus du hero avec un z-index bas (60) :
   menu ouvert, l'overlay (z-index 800) le recouvrait et le bouton « Fermer »
   devenait invisible. On le fait repasser au-dessus le temps du menu. */
body.nav-open .site-header { z-index: 900; }

/* ============================================================
   RETOURS CLIENTE — ACCUEIL, 2e passe (22/09/2026)
   2. Bandeau orange du haut : plus fin, petites étoiles, liserets roses.
   3. Mosaïque du film : façade recadrée, photo terne remplacée.
   4. « On vous emmène » en blanc.
   5. Titres de section : typo raffinée, sans la double frappe.
   6. Bouton « Voir les biens » : rectangle rose, plus de noir.
   8. Bandeau du bas : étoiles + rayures à la place des traits.
   Comme le bloc précédent, ce pavé est en fin de feuille : les couches
   v7/v10/v13 plus haut repeignent déjà ces éléments, il faut passer après.
   ============================================================ */

/* --- 2. Le bandeau orange du haut ---------------------------- */
/* Il faisait 2 px de bordure noire en haut et en bas, un gros losange plein
   entre les mots et une hauteur de bandeau de foire. On l'amincit : bordures
   remplacées par des liserets rose clair d'1 px, texte plus petit, plus espacé.
   Rose sur orange, c'est peu contrasté par construction — mais ce sont des
   liserets décoratifs, pas de l'information, et le bandeau est aria-hidden. */
.home-v7 .v7-ticker {
  padding: clamp(6px, .7vw, 11px) 0;
  border-top: 1px solid var(--blush);
  border-bottom: 1px solid var(--blush);
}
.home-v7 .v7-tk-w {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(12px, 1.15vw, 17px);
  letter-spacing: .26em;
}
/* Le losange CSS n'est plus posé par le HTML (il est remplacé par l'étoile),
   mais la règle existe plus haut : on la neutralise ici par sécurité. */
.home-v7 .v7-tk-s { display: none; }
/* La petite étoile à six branches, reprise de la page l'agence. */
.home-v7 .v7-ticker .etoile-sep {
  width: 1.05em; height: 1.05em; flex: none;
  margin: 0 clamp(14px, 1.8vw, 30px);
  color: var(--blush);
  stroke-width: 2.6;
}

/* --- 3. Mosaïque du film : cadrage de la façade -------------- */
/* La photo est un portrait 612×905 posé dans une tuile paysage : object-fit
   cover rogne le haut et le bas, et le centre tombe pile sur les fenêtres.
   On descend le point d'ancrage pour garder la vitrine et l'enseigne. */
.v10-cell-facade img { object-position: 50% 96%; }

/* --- 4. « Voilà, on vous emmène. » en blanc ------------------ */
/* Le crème tirait déjà vers le blanc, mais « on vous emmène » était en rose
   pâle sur fond orange : 1,9:1, il se noyait. En blanc pur on monte à 3,6:1
   et, avec l'ombre portée, la phrase se détache enfin. */
.v10-fin { color: #fff; }
.v10-fin em { color: #fff; text-shadow: 0 4px 30px rgba(120, 40, 0, .45); }

/* --- 5. Titres de section : plus raffinés -------------------- */
/* « Nos biens » et « City guide » étaient en Knockout capitales, doublés d'une
   frappe orange décalée. Camille : trop épais, et l'effet ne colle pas au
   reste du site. On reprend le Playfair des titres éditoriaux, en bas de casse,
   et on supprime la double frappe. */
.v7-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(38px, 6.2vw, 96px);
  line-height: 1.02;
  text-transform: none;
  letter-spacing: -.012em;
}
.v7-title::before { content: none; }

/* --- 6. Le bouton « Voir les biens » ------------------------- */
/* Pilule noire → rectangle rose. Le blush seul ne porte pas du texte crème
   (1,6:1) : on écrit donc en encre sur le rose, ce qui donne 11,9:1, et le
   survol bascule en orange profond avec du crème (5,9:1). */
.v7-btn {
  border-radius: 0;
  background: var(--blush);
  border-color: var(--blush);
  color: var(--ink);
  padding: 17px 40px;
}
.v7-btn:hover, .v7-btn:focus-visible {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: var(--cream);
  transform: translateY(-2px);
}

/* --- 8. Le bandeau d'appel en bas de page -------------------- */
/* Les longs traits roses deviennent les petites étoiles de la page l'agence.
   Pour la rayure, premier essai en rayant tout le fond : le texte passait
   alternativement sur orange et sur rose, effet code-barres, phrase difficile
   à lire. La rayure est donc reportée sur deux liserés, en haut et en bas du
   bandeau — la signature Voilà est là, le message reste net, et le texte garde
   le crème sur orange (5,9:1). */
.v7-cta {
  position: relative;
  background: var(--accent);
  padding: clamp(18px, 2.1vw, 30px) 0;
}
.v7-cta::before, .v7-cta::after {
  content: ""; position: absolute; left: 0; right: 0; height: 9px;
  background: repeating-linear-gradient(
    90deg,
    var(--blush) 0 11px,
    var(--cream) 11px 22px);
  z-index: 2;
}
.v7-cta::before { top: 0; }
.v7-cta::after { bottom: 0; }
.v7-cta-sep { display: none; }
.v7-cta .etoile-sep {
  width: .58em; height: .58em; flex: none;
  margin: 0 clamp(24px, 3vw, 50px);
  color: var(--blush);
  stroke-width: 3;
}
@media (max-width: 760px) {
  .v7-cta::before, .v7-cta::after {
    height: 6px;
    background: repeating-linear-gradient(90deg, var(--blush) 0 7px, var(--cream) 7px 14px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .v7-cta-track, .home-v7 .v7-tk-track { animation: none; }
}


/* ================================================================
   RETOUR CLIENTE 22/09/2026 — troisième passe Camille.
   Trois pages concernées : L'AGENCE, les pages SERVICES (vente…)
   et L'ÉQUIPE. Bloc placé en toute fin de feuille : les couches
   v6 → v13 au-dessus repeignent les mêmes éléments, c'est le seul
   endroit où ces corrections tiennent sans !important partout.
   ================================================================ */

/* ---------- AGENCE 1 : « enlever les lignes noires du bandeau » ----------
   Camille propose le rose ou le vert #098348. On prend son vert : sur
   l'orange du bandeau il tranche franchement là où le noir plombait. */
.v13-marquee {
  border-top-color: #098348;
  border-bottom-color: #098348;
}

/* ---------- AGENCE 2 : « rendre le texte de la section 1 plus aéré » ----
   Même texte, mais respirant : corps plus grand, interligne large et
   vrai blanc entre les paragraphes. La ligne des services garde sa
   mise en avant (déjà traitée par .agc-svc-list plus haut). */
.agence-clair-v6 .agc-txt-v6 p.agc-p-aere {
  font-family: var(--sans);
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 2;
  letter-spacing: .004em;
  max-width: 46ch;
  margin: 0 0 1.9em;
}
.agence-clair-v6 .agc-txt-v6 p.agc-svc-list {
  line-height: 1.85;
  max-width: 34ch;
  margin: 0 0 1.9em;
  padding: 18px 22px;
  border-top: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  background: rgba(251, 193, 171, .22);
}
.agence-clair-v6 .agc-txt-v6 p.agc-p-aere:last-of-type { margin-bottom: 0; }
@media (max-width: 760px) {
  .agence-clair-v6 .agc-txt-v6 p.agc-p-aere { line-height: 1.85; margin-bottom: 1.5em; }
  .agence-clair-v6 .agc-txt-v6 p.agc-svc-list { padding: 14px 16px; max-width: none; }
}

/* ---------- AGENCE 3 : « ajouter une transition avant les services » ----
   Un palier crème entre la visite de la maison et le bloc services :
   rayures maison, étoile, une phrase courte et une flèche qui invite
   à descendre. Ça coupe net l'enchaînement de deux grosses sections. */
.agc-trans {
  position: relative;
  padding: clamp(54px, 7vw, 104px) var(--pad) clamp(46px, 6vw, 88px);
  background: var(--cream);
  overflow: hidden;
  text-align: center;
}
.agc-trans-rayures {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg,
    rgba(251, 193, 171, .45) 0 16px, transparent 16px 42px);
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 22%, #000 78%);
          mask-image: radial-gradient(ellipse at center, transparent 22%, #000 78%);
  pointer-events: none;
}
.agc-trans-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(14px, 1.8vw, 22px);
}
.agc-trans-etoile img {
  width: clamp(34px, 3.4vw, 52px); height: auto; display: block;
  animation: agc-trans-tourne 14s linear infinite;
}
@keyframes agc-trans-tourne { to { transform: rotate(360deg); } }
.agc-trans-kicker {
  margin: 0;
  font-family: var(--sans); font-weight: 700;
  font-size: 11.5px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--accent-deep);
}
.agc-trans-phrase {
  margin: 0;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(30px, 4.6vw, 62px); line-height: 1.08;
  letter-spacing: -.012em; color: var(--ink);
}
.agc-trans-phrase em { font-style: italic; color: var(--accent); }
.agc-trans-fleche {
  display: block; color: var(--accent);
  width: clamp(20px, 1.8vw, 26px);
  animation: agc-trans-descend 1.9s ease-in-out infinite;
}
.agc-trans-fleche svg { width: 100%; height: auto; display: block; }
@keyframes agc-trans-descend {
  0%, 100% { transform: translateY(0); opacity: .55; }
  50%      { transform: translateY(9px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .agc-trans-etoile img, .agc-trans-fleche { animation: none; }
}

/* ---------- SERVICES 1 : « remettre les rayures en fond » ----------
   Le store rayé avait été retiré en septembre ; Camille le réclame.
   Le markup .svc-store n'existe plus : on le refait en pseudo-élément
   derrière la photo, colonne pleine hauteur calée à droite comme
   dans la maquette (rayures visibles au-dessus ET en-dessous). */
.svc-main::before,
.svc-second::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  right: clamp(30px, 5vw, 110px);
  width: clamp(260px, 28vw, 440px);
  background: repeating-linear-gradient(90deg,
    var(--blush) 0 18px, var(--cream) 18px 36px);
  opacity: .72;
  pointer-events: none;
  z-index: 0;
}
/* sur le fond orange de la 2ᵉ section, rayures crème sur crème sombre */
.svc-second::before {
  background: repeating-linear-gradient(90deg,
    rgba(255, 248, 243, .34) 0 18px, transparent 18px 36px);
  opacity: 1;
}
/* tout le contenu repasse devant les rayures */
.svc-main > *, .svc-second > * { position: relative; z-index: 1; }
@media (max-width: 900px) {
  /* en colonne, la bande pleine hauteur écrase la lecture :
     on la réduit à un bandeau haut, comme avant. */
  .svc-main::before, .svc-second::before {
    right: 0; left: auto; bottom: auto;
    width: 56vw; height: 120px;
  }
}

/* ---------- SERVICES 2 : « les titres plus voyant "expertise…" » ----
   Les intitulés d'étape étaient en petites capitales fines, presque
   invisibles à côté du chiffre. On les remonte en taille, en poids,
   et on les souligne d'un filet orange. */
.svc-step-t {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.15rem, 1.9vw, 1.55rem);
  line-height: 1.15;
  letter-spacing: .015em;
  text-transform: none;
  color: var(--accent-deep);
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(234, 91, 12, .28);
}
.svc-second .svc-step-t { color: var(--accent-deep); }
.svc-step-card { padding: 22px 26px 24px; }
.svc-step-card p { font-size: .98rem; line-height: 1.6; color: var(--ink-soft); }
.svc-second .svc-step-card p { color: var(--ink-soft); }
/* le chiffre suit, pour rester à l'échelle du titre */
.svc-step-num { flex-basis: 40px; width: 40px; height: 40px; font-size: 1.05rem; }

/* ---------- SERVICES 3 : « changer typo et effet des titres comme avant » ----
   Retour au Playfair du reste du site : plus de Knockout condensé ni de
   double-frappe détourée sur les pages services. Même traitement que les
   titres .v7-title validés au 2ᵉ passage. */
/* (sans dépendre de .v7-giant, ajoutée par le JS : sans JS le titre
   retombait sur sa petite taille d'origine) */
.svc-wire .home-h1,
.svc-wire .home-h2,
.svc-wire .home-h1.v7-giant,
.svc-wire .home-h2.v7-giant {
  font-family: var(--display) !important;
  font-weight: 400;
  font-size: clamp(44px, 6.4vw, 96px);
  line-height: 1.04;
  letter-spacing: -.012em;
  text-transform: none;
}
.svc-wire .v7-giant::before { content: none; }
.svc-main .home-h1 { text-transform: none; }
.svc-second .home-h2 { text-transform: none; }
.svc-wire .svc-decouvrir .home-h2 { font-size: clamp(28px, 3.6vw, 52px); }

/* ---------- SERVICES 4 : « enlever la mandarine à droite en haut » ----
   Les pages services reçoivent désormais body_class « svc-doc », qui
   coupe les stickers à la source. Ceinture et bretelles ici au cas où
   une page services serait générée autrement. */
body.svc-doc .v7-page-stick { display: none !important; }

/* ---------- ÉQUIPE 1 : couverture magazine façon VOGUE ----------
   Photo pleine page, masthead géant en travers, deux lignes de texte
   et rien d'autre. Le titre passe DEVANT le haut de l'image et
   DERRIÈRE le sujet n'étant pas détourable, on garde l'accroche en bas. */
.pg-front.eq-slide-cover {
  padding: 0 !important;
  background: var(--ink) !important;
  display: block !important;
}
.eq-cover-vogue {
  position: absolute; inset: 0;
  overflow: hidden;
  background: #2a1a10;
}
.eq-cover-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 38%;
  display: block;
}
/* voile discret : le blanc du masthead doit tenir sur l'image */
.eq-cover-voile {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(23, 20, 15, .42) 0%, rgba(23, 20, 15, 0) 34%),
    linear-gradient(0deg, rgba(23, 20, 15, .46) 0%, rgba(23, 20, 15, 0) 32%);
  pointer-events: none;
}
.eq-cover-masthead {
  position: absolute;
  top: clamp(16px, 3.5%, 30px);
  left: 50%;
  transform: translateX(-50%);
  width: 84%;
  max-width: 440px;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .40));
}
.eq-cover-issue {
  position: absolute;
  top: clamp(14px, 3%, 26px);
  right: clamp(12px, 3%, 22px);
  font-family: var(--sans); font-weight: 700;
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255, 248, 243, .92);
  writing-mode: vertical-rl;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}
.eq-cover-accroche {
  position: absolute;
  left: clamp(16px, 6%, 40px);
  bottom: clamp(18px, 6%, 44px);
  margin: 0;
  font-family: var(--display); font-weight: 400; font-style: italic;
  font-size: clamp(26px, 3.6vw, 46px);
  line-height: .98;
  letter-spacing: -.015em;
  color: var(--cream);
  text-shadow: 0 4px 22px rgba(0, 0, 0, .55);
}
@media (max-width: 760px) {
  .eq-cover-masthead { width: 80%; }
  .eq-cover-accroche { font-size: clamp(24px, 8vw, 34px); }
  .eq-cover-issue { font-size: 9px; }
}
/* anciennes pièces de couverture : plus aucun markup ne les utilise */
.eq-cover-frame, .eq-cover-logo, .eq-cover-titre, .eq-cover-photo { display: none !important; }

/* ---------- ÉQUIPE 2 : « remettre l'aspect tourner les pages de
   manière voyante » ----------
   La feuille pivotait bien, mais sa face arrière était masquée : à 90°
   elle disparaissait, on ne voyait qu'un demi-tour avalé. On lui rend
   un vrai verso crème et un tour quasi complet, avec l'ombre portée
   qui court sur la page en dessous. */
.eq-mag-slide.turn-out,
.eq-mag-slide.turn-in {
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
  overflow: visible !important;
  box-shadow: none;
}
.eq-mag-slide.turn-out .pg-front,
.eq-mag-slide.turn-in .pg-front {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: -30px 14px 60px rgba(23, 20, 15, .34);
}
/* le verso du feuillet : papier crème rayé, logo au centre */
.eq-mag-slide.turn-out::after,
.eq-mag-slide.turn-in::after {
  content: "";
  position: absolute; inset: 0;
  transform: rotateY(180deg);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background:
    url("brand/voila-orange.svg") center / 150px no-repeat,
    repeating-linear-gradient(45deg, rgba(251, 193, 171, .22) 0 12px, transparent 12px 34px),
    var(--cream);
  box-shadow: 26px 14px 60px rgba(23, 20, 15, .28);
}
/* Surtout : aucune opacité ni filtre dans ces images-clés. Dès qu'une
   animation touche l'opacité (ou un filter, comme la version précédente),
   Chrome aplatit la scène 3D : le backface-visibility des enfants est
   ignoré et, passé 90°, on voyait la couverture à l'envers en miroir au
   lieu du verso crème. L'opacité est donc figée à 1 en règle statique. */
.eq-mag-slide.turn-out,
.eq-mag-slide.turn-in { opacity: 1 !important; visibility: visible !important; }
@keyframes eq-page-avant {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(-168deg); }
}
@keyframes eq-page-arriere {
  0%   { transform: rotateY(-168deg); }
  100% { transform: rotateY(0deg); }
}
.eq-mag-slide.turn-out { animation: eq-page-avant 1s cubic-bezier(.52, .06, .32, 1) both; }
.eq-mag-slide.turn-in  { animation: eq-page-arriere 1s cubic-bezier(.52, .06, .32, 1) both; }
/* le reflet de papier passait par ::after, désormais occupé par le verso */
.eq-mag-slide.turn-out::after, .eq-mag-slide.turn-in::after { background-blend-mode: normal; }
.eq-book .eq-book-pages { perspective: 1400px; }
/* flèches nettement plus présentes : c'est le geste à faire comprendre */
.eq-book-arrow {
  width: 58px; height: 58px; font-size: 32px;
  box-shadow: 0 10px 24px rgba(120, 40, 0, .28);
}
.eq-book-prev { left: clamp(-26px, -2vw, -14px); }
.eq-book-next { right: clamp(-26px, -2vw, -14px); }
.eq-book-next { animation: eq-fleche-appel 2.6s ease-in-out infinite; }
@keyframes eq-fleche-appel {
  0%, 72%, 100% { transform: translateY(-50%) scale(1); }
  82%           { transform: translateY(-50%) scale(1.14); }
}
.eq-book-next:hover { animation: none; }
.eq-mag-note {
  font-size: 12px;
  font-weight: 700;
  margin-top: 14px;
}
@media (max-width: 760px) {
  .eq-book-arrow { width: 46px; height: 46px; font-size: 26px; }
  .eq-book-prev { left: 4px; }
  .eq-book-next { right: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .eq-book-next { animation: none; }
}

/* ---------- ÉQUIPE 3 : les nouvelles cartes de visite ----------
   Les visuels réajustés par Camille (dont celui de Philippe, inédit)
   sont un poil plus hauts que les anciens : on cale le cadre sur leur
   proportion réelle, sinon object-fit rognait le bas des cartes. */
.vgal .vk-img,
.vgal .vk-attente { aspect-ratio: 900 / 1550; }

/* ---------- ÉQUIPE 4 : « agrandir le timbre sur le formulaire » ---------- */
.cpost-timbre {
  width: clamp(76px, 7vw, 104px);
  top: 18px; right: 18px;
  transform: rotate(7deg);
  filter: drop-shadow(0 4px 12px rgba(120, 40, 0, .22));
}
/* le libellé se recule d'autant pour ne pas passer sous le timbre */
.cpost-l { max-width: calc(100% - 118px); }
@media (max-width: 860px) {
  .cpost-timbre { width: clamp(64px, 16vw, 86px); top: 12px; right: 12px; }
  .cpost-l { max-width: 100%; }
}


/* ================================================================
   RETOUR CLIENTE 22/09/2026 — bloc « LES BIENS ».
   Trois points : l'intro animée de la page biens, l'espace entre
   le texte et le bouton dans les tuiles orange de la fiche, et les
   grands rectangles orange vides de cette même fiche.
   ================================================================ */

/* ---------- BIENS 1 : « titre coupé avec la mandarine et la photo » ----------
   Le mot en contour était du texte libre : trop large pour l'écran, il
   sortait du cadre, et la mandarine comme la photo de droite lui
   passaient dessus. Il est maintenant tracé en SVG avec textLength :
   les lettres s'écartent pour occuper exactement la largeur donnée, donc
   le mot ne peut plus être coupé, quelle que soit la taille d'écran.
   Il se remplit de la gauche vers la droite au fil du défilement, le
   titre garde une bande centrale à lui seul, les tirages montent en rang
   tout en bas et la mandarine se range dans la marge de gauche.
   Variante `.v13-trace`, posée sur les intros des biens et du journal
   (22/09 : « titre coupé comme avant » sur Pause café). Les intros de
   l'agence et de l'estimation gardent l'ancienne chorégraphie. */
.v13-trace .v13-ghost { display: none; }
.v13-mot {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: clamp(62px, 9vh, 118px);
  width: 86vw;
  max-width: 1380px;
  z-index: 2;
  pointer-events: none; user-select: none;
}
/* le mot occupe toute la bande, sans jamais dépasser une hauteur
   raisonnable : au-delà, il se contente d'être centré. */
.v13-mot-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: clamp(70px, 19vh, 228px);
  overflow: visible;
}
.v13-mot-svg text {
  font-family: var(--knock);
  font-size: 130px;
  text-transform: uppercase;
}
/* le tracé fantôme, à peine posé sur le fond */
.v13-mot-l text {
  fill: none;
  stroke: rgba(234, 91, 12, .17);
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
}
/* le même mot, plus appuyé, dévoilé de la gauche vers la droite par le
   JS : on a l'impression que le mot se dessine au fil du défilement. */
.v13-mot-p {
  position: absolute;
  left: 0; top: 0; right: 0;
  clip-path: inset(0 100% 0 0);
  will-change: clip-path;
}
.v13-mot-p text {
  fill: none;
  stroke: rgba(234, 91, 12, .62);
  stroke-width: 2.4px;
  vector-effect: non-scaling-stroke;
}

/* les trois tirages en rang au ras du marquee du bas */
.v13-trace .v13-ph {
  width: clamp(124px, 13.5vw, 226px);
  height: clamp(92px, 10.1vw, 169px);
  top: auto;
  opacity: 0;
}
.v13-trace .v13-ph-a { left: 4%; bottom: 96px; }
.v13-trace .v13-ph-b { right: 4%; bottom: 96px; }
.v13-trace .v13-ph-c {
  left: 50%; bottom: 96px;
  margin-left: calc(clamp(124px, 13.5vw, 226px) / -2);
}
/* la mandarine se range dans la marge de gauche, sous le mot : elle ne
   croise plus ni les lettres ni le titre, c'était le reproche de Camille. */
.v13-trace .v13-etoile {
  top: clamp(200px, 29vh, 320px);
  right: auto; left: clamp(12px, 3.6vw, 58px);
  font-size: clamp(44px, 5vw, 88px);
  z-index: 3;
}
.v13-trace .v13-titre { max-width: 92vw; }

@media (prefers-reduced-motion: reduce) {
  .v13-mot-p { clip-path: none; }
}
@media (max-width: 760px) {
  .v13-mot { top: clamp(52px, 8vh, 92px); width: 90vw; }
  .v13-trace .v13-ph { width: 38vw; height: 28vw; border-width: 4px; }
  .v13-trace .v13-ph-a { left: 4%; bottom: 92px; }
  .v13-trace .v13-ph-b { right: 4%; bottom: 92px; }
  .v13-trace .v13-ph-c { display: none; }
  .v13-trace .v13-etoile { top: clamp(150px, 22vh, 230px); left: 5%; font-size: 13vw; }
}

/* ---------- BIENS 2 : « mettre plus d'espace entre le texte et le
   bouton » (tuile Travaux de la fiche bien) ---------- */
.fiche-tile-orange .tile-cta { margin-top: clamp(18px, 2.4vw, 30px); }
.fiche-tile-orange .tile-lnk { display: inline-block; margin-top: 4px; }

/* ---------- BIENS 3 : « les grands rectangles orange quand il n'y a
   pas de texte, pas utile et pas joli » ----------
   Le trio est une grille : les trois tuiles s'alignaient sur la plus
   haute (le diagnostic et ses deux réglettes), d'où deux grands à-plats
   orange vides à côté. Chaque tuile reprend sa propre hauteur. */
.fiche-trio { align-items: start; }


/* ============================================================
   RETOUR CLIENTE — 22/09, deuxième passe
   ============================================================ */

/* ---------- 1. « Mettre plus d'espace entre le texte et le bouton »
   (renvoyé une seconde fois, capture à l'appui : le lien « Découvrir
   notre pôle travaux » et le bouton se touchaient encore). On passe
   d'une marge à l'autre à une vraie respiration, et le lien reprend de
   l'air au-dessus de lui pour ne plus coller au paragraphe. */
.fiche-tile-orange .tile-lnk { display: inline-block; margin-top: 10px; }
.fiche-tile-orange .tile-cta { margin-top: clamp(30px, 4vw, 46px); }

/* ---------- 2. « Les CTA en rectangle » ----------
   Toute la papeterie de l'agence — le journal papier comme les
   plaquettes — est faite de rectangles. Les boutons pilule tranchaient.
   Ils gardent leurs couleurs, leur graisse et leurs marges : seuls les
   angles tombent (2px, l'arrondi d'une découpe au massicot, pas d'angle
   vif qui piquerait). Les puces d'interface qui ne sont pas des appels
   à l'action — pastilles de filtre, étiquette de l'en-tête, toast,
   bouton WhatsApp rond — ne sont pas concernées. */
.btn-pill,
.btn-pill-cream,
.btn, .btn-rect,
.v7-btn,
.card-contact,
.cmp-bar,
.avis-cta .btn,
.patri26-btn,
.estim-tile .btn-pill,
.blog-news-form .btn-pill,
.tile-white .btn-pill,
.prox-chip,
.fiche-actions .labeled { border-radius: 2px; }

/* Balayage de rattrapage : le site compte une quarantaine de boutons
   déclarés page par page, impossible de tous les nommer sans en oublier
   un. On attrape donc tout ce qui porte « btn » dans sa classe et tous
   les boutons d'envoi de formulaire. Exceptions gardées rondes : les
   pastilles icône seule (cœur des favoris, pastille comparer sur les
   cartes, partage) — ce sont des repères d'interface, pas des CTA, et
   un cœur dans un carré fait bouton d'ascenseur. */
a[class*="btn"]:not(.fav-btn):not(.share-btn),
button[class*="btn"]:not(.fav-btn):not(.share-btn),
button[type="submit"],
input[type="submit"],
.card-cmp.card-cmp-lbl { border-radius: 2px; }

/* Les cases à remplir suivent : dans le journal papier comme sur les
   mandats, on écrit toujours dans des rectangles. */
input[type="text"], input[type="email"], input[type="tel"],
input[type="search"], input[type="number"], input[type="date"],
select, textarea { border-radius: 2px; }
/* ceux-là sont déclarés plus haut avec deux classes, il faut le même
   poids pour les reprendre. */
.blog-news-form input,
.patri-wire .patri-form-tile input,
.patri-wire .patri-form-tile textarea,
.patri-form-tile textarea,
.fiche-tile-orange .lead-form textarea { border-radius: 2px; }

/* ---------- 3. « Cette section à revoir, pas assez lisible et arrêter
   l'aspect rond » (bande « Une question, un projet à nous confier ? »)
   ----------
   C'était une immense pilule au contour orange fin : le mot flottait au
   milieu du vide et le bouton se perdait dedans. On en fait un bloc
   franc — un encart de journal : filet orange épais à gauche, fond
   crème, la question en gros et le bouton posé à droite, plein orange
   pour qu'on le voie enfin. */
.contact-strip {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: clamp(18px, 2.4vw, 34px);
  margin: clamp(34px, 4.6vw, 62px) auto;
  padding: clamp(24px, 3vw, 38px) clamp(24px, 3.4vw, 44px);
  max-width: 980px;
  border: 1px solid var(--blush);
  border-left: 6px solid var(--accent);
  border-radius: 0;
  background: var(--white);
  text-align: left;
}
.contact-strip-txt {
  flex: 1 1 320px; margin: 0;
  font-family: var(--display); font-style: normal; font-weight: 600;
  font-size: clamp(21px, 2.5vw, 31px); line-height: 1.22;
  color: var(--ink);
}
.contact-strip .btn-pill {
  flex: 0 0 auto;
  background: var(--accent); color: var(--white); border-color: var(--accent);
  padding: 15px 32px; font-size: 13px;
}
.contact-strip .btn-pill:hover {
  background: var(--accent-deep); border-color: var(--accent-deep);
  color: var(--white); transform: none;
}
@media (max-width: 640px) {
  .contact-strip {
    border-radius: 0; text-align: left;
    border-left-width: 5px; padding: 24px 20px;
  }
  .contact-strip .btn-pill { width: 100%; text-align: center; }
}


/* ============================================================
   4. PAUSE CAFÉ — « vraiment donner un aspect journal pour rappeler
   celui que nous faisons en papier » (inspi fournie le 22/09)
   ============================================================
   La page empilait des sections de site. Elle devient une feuille de
   journal : bandeau de titre entre deux filets, rubriques en étiquettes
   vertes (la couleur de l'inspi, #098348), texte sérif en colonnes avec
   lettrine, colonne de petites annonces sur la droite, photos
   légendées et boutons rectangulaires. Tout est repris du wireframe
   papier de la cliente — mêmes titres, mêmes textes, mêmes rubriques. */
.jnl26 { --vert: #098348; background: var(--cream); }

/* la feuille : un bloc de papier centré, filets fins en haut et en bas */
.jnl26-feuille {
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(34px, 4.4vw, 62px) var(--pad);
  border-top: 1px solid rgba(23, 20, 15, .16);
  background: var(--cream);
  position: relative;
}
.jnl26-feuille:first-of-type { border-top: 0; }
.jnl26-feuille-blush { background: var(--blush-soft); max-width: none; }
.jnl26-feuille-blush > * { max-width: 1160px; margin-left: auto; margin-right: auto; }

/* ---- le bandeau de titre ---- */
.jnl26-mast {
  position: relative;
  padding: clamp(26px, 3vw, 40px) 0 clamp(20px, 2.4vw, 30px);
  border-top: 4px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  text-align: center;
  margin-bottom: clamp(26px, 3.4vw, 46px);
}
.jnl26-mast-meta {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px 22px; margin: 0 0 14px;
  font-family: var(--sans); font-size: 10.5px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft);
}
.jnl26-mast-meta span + span::before {
  content: "·"; margin-right: 22px; color: var(--accent);
}
.jnl26-mast-h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(30px, 5.2vw, 68px); line-height: 1.04;
  color: var(--accent); margin: 0; letter-spacing: -.01em;
}
.jnl26-mast-sous {
  margin: 12px 0 0;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(16px, 1.9vw, 23px); color: var(--ink-soft);
}
/* le tampon d'édition, posé de travers comme sur la maquette papier */
.jnl26-tampon {
  position: absolute; top: clamp(8px, 1.6vw, 22px); right: 0;
  display: inline-block; transform: rotate(-7deg);
  background: var(--vert); color: #fff;
  font-family: var(--sans); font-size: clamp(10px, 1.1vw, 13px);
  font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  padding: 7px 14px;
  box-shadow: 3px 3px 0 rgba(9, 131, 72, .22);
}

/* ---- les étiquettes de rubrique ---- */
.jnl26-tag {
  display: inline-block; margin: 0 0 14px;
  background: var(--vert); color: #fff;
  font-family: var(--sans); font-size: 12px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 6px 14px;
}
.jnl26-tag-clair { background: var(--cream); color: var(--accent-deep); }
/* variante filet : l'étiquette ouvre la rubrique, un trait la prolonge */
.jnl26-tag-ligne {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 18px; background: none; color: var(--vert);
  padding: 0; font-size: 11.5px;
}
.jnl26-tag-ligne::before {
  content: ""; width: 26px; height: 8px; background: var(--vert); flex: 0 0 auto;
}
.jnl26-tag-ligne::after {
  content: ""; flex: 1; height: 1px; background: rgba(23, 20, 15, .18);
}

/* ---- titres de rubrique ---- */
.jnl26-h2 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(25px, 3.4vw, 44px); line-height: 1.1;
  color: var(--accent); margin: 0 0 16px;
}
.jnl26-h2-clair { color: var(--cream); }
.jnl26-h3 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(19px, 2vw, 26px); color: var(--accent-deep);
  margin: 0 0 10px;
}

/* ---- la une : article + colonne d'annonces ---- */
.jnl26-une {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(26px, 3.4vw, 52px);
  align-items: start;
}
.jnl26-chapo {
  font-family: var(--serif); font-size: clamp(19px, 2.1vw, 26px);
  line-height: 1.38; color: var(--ink); margin: 0 0 20px;
  font-weight: 600;
}
.jnl26-art-corps { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.6vw, 36px); }
.jnl26-art-photo img, .jnl26-art-photo {
  width: 100%; height: auto; display: block; border-radius: 0;
}
.jnl26-colonnes p {
  font-family: var(--serif); font-size: 17.5px; line-height: 1.5;
  color: var(--ink); margin: 0 0 13px; text-align: justify;
  hyphens: auto;
}
/* la lettrine du premier paragraphe : la signature d'une page de journal */
.jnl26-colonnes p:first-child::first-letter {
  float: left; font-family: var(--display); font-weight: 700;
  font-size: 3.3em; line-height: .84; color: var(--accent);
  padding: 4px 9px 0 0;
}
.jnl26-cta { margin: clamp(22px, 2.8vw, 34px) 0 0; }
.jnl26-cta.center { text-align: center; }

/* la colonne de droite : les petites annonces, comme dans le papier */
.jnl26-rail {
  border: 1px solid rgba(23, 20, 15, .2);
  padding: 20px 20px 18px; background: var(--white);
}
.jnl26-rail .jnl26-tag-ligne { margin-bottom: 14px; }
.jnl26-breves { list-style: none; margin: 0; padding: 0; }
.jnl26-breves li { border-top: 1px dotted rgba(23, 20, 15, .28); }
.jnl26-breves li:first-child { border-top: 0; }
.jnl26-breves a {
  display: block; padding: 11px 0;
  font-family: var(--sans); font-size: 13.5px; line-height: 1.4;
  color: var(--ink); text-decoration: none;
}
.jnl26-breves a:hover { color: var(--accent-deep); }
.jnl26-breves strong {
  text-transform: uppercase; letter-spacing: .08em;
  font-size: 11px; color: var(--accent);
}
.jnl26-breve-prix, .jnl26-breves .jnl-breve-prix {
  display: block; margin-top: 3px;
  font-family: var(--knock-cond); font-size: 17px; color: var(--accent-deep);
}
.jnl26-rail-lien {
  margin: 16px 0 0; font-family: var(--sans); font-size: 12.5px;
  font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.jnl26-rail-lien a { color: var(--accent-deep); }

/* ---- l'encart orange pleine largeur ---- */
.jnl26-orange {
  background: var(--accent); color: var(--cream);
  padding: clamp(44px, 5.6vw, 84px) var(--pad);
}
.jnl26-orange-in { max-width: 820px; margin: 0 auto; text-align: center; }
.jnl26-orange .jnl26-tag { color: var(--accent-deep); }
.jnl26-orange-sous {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(19px, 2.3vw, 29px); margin: 0 0 22px; color: var(--cream);
}
.jnl26-orange-txt p {
  font-family: var(--serif); font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.55; margin: 0 0 14px; color: var(--cream);
}
.jnl26-orange-txt strong { color: #fff; }

/* ---- le carnet de conseils : deux colonnes séparées d'un filet ---- */
.jnl26-carnet { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 3.4vw, 52px); }
.jnl26-carnet-col + .jnl26-carnet-col {
  border-left: 1px solid rgba(23, 20, 15, .16);
  padding-left: clamp(26px, 3.4vw, 52px);
}
.jnl26-carnet-col p {
  font-family: var(--serif); font-size: 17px; line-height: 1.5; color: var(--ink);
  margin: 0 0 10px;
}
.jnl26-lien {
  font-family: var(--sans) !important; font-size: 12.5px !important;
  font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
}
.jnl26-lien a { color: var(--accent-deep); }

/* ---- les photos légendées ---- */
.jnl26-photos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(18px, 2.4vw, 32px); margin-top: 6px;
}
.jnl26-photos .renov-fig { margin: 0; }
.jnl26-photos .renov-photo, .jnl26-photos .renov-photo img {
  border-radius: 0; width: 100%; display: block;
}
.jnl26-photos figcaption {
  padding-top: 10px; border-top: 1px solid rgba(23, 20, 15, .2); margin-top: 10px;
}
.jnl26-photos figcaption strong {
  display: block; font-family: var(--display); font-size: 18px; color: var(--ink);
}
.jnl26-photos figcaption .micro {
  font-family: var(--sans); font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft);
}

/* ---- le courrier des lecteurs ---- */
.jnl26-avis { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(20px, 2.6vw, 34px); }
.jnl26-avis .jnl-avis {
  margin: 0; padding: 0 0 0 18px; border-left: 3px solid var(--blush);
}
.jnl26-avis blockquote {
  margin: 0 0 10px; font-family: var(--serif); font-style: italic;
  font-size: 17.5px; line-height: 1.45; color: var(--ink);
}
.jnl26-avis figcaption {
  font-family: var(--sans); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent-deep);
}

/* ---- l'abonnement, en bas de page comme au dos du journal ---- */
.jnl26-news {
  background: var(--cream-2);
  padding: clamp(40px, 5vw, 72px) var(--pad);
  border-top: 4px solid var(--ink);
}
.jnl26-news-in { max-width: 720px; margin: 0 auto; text-align: center; }
.jnl26-news-h3 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(22px, 2.9vw, 36px); line-height: 1.15;
  color: var(--accent); margin: 0 0 14px;
}
.jnl26-news-p {
  font-family: var(--serif); font-size: clamp(16px, 1.7vw, 19px);
  color: var(--ink-soft); margin: 0 0 24px;
}
.jnl26-form .form-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.jnl26-form input {
  flex: 1 1 240px; border: 1px solid var(--accent); border-radius: 0;
  background: var(--white); padding: 14px 16px;
  font-family: var(--sans); font-size: 14.5px; color: var(--ink);
}
.jnl26-form input::placeholder { color: rgba(85, 80, 63, .7); }
.jnl26-form .btn { width: 100%; }

@media (max-width: 980px) {
  .jnl26-une { grid-template-columns: 1fr; }
  .jnl26-rail { order: 2; }
}
@media (max-width: 760px) {
  .jnl26-art-corps { grid-template-columns: 1fr; }
  .jnl26-colonnes p { text-align: left; hyphens: manual; }
  .jnl26-carnet { grid-template-columns: 1fr; }
  .jnl26-carnet-col + .jnl26-carnet-col {
    border-left: 0; padding-left: 0;
    border-top: 1px solid rgba(23, 20, 15, .16); padding-top: 24px;
  }
  .jnl26-mast { padding-top: 54px; }
  .jnl26-tampon { top: 6px; right: auto; left: 50%; transform: translateX(-50%) rotate(-7deg); }
  .jnl26-cta .btn { display: block; text-align: center; }
}

/* ============================================================
   RETOUR CLIENTE — 22/09, page L'agence
   ============================================================ */

/* ---------- « Estimation immo etc., mettre sur la même largeur que le
   texte » — l'encadré des services était calé sur 34ch pendant que les
   paragraphes couraient jusqu'à 46ch : il rentrait le ventre au milieu
   de la colonne. Il prend maintenant exactement la largeur du texte,
   ses filets orange s'arrêtent où s'arrêtent les lignes du dessus. */
.agence-clair-v6 .agc-txt-v6 p.agc-svc-list { max-width: 46ch; }

/* ---------- « Enlever Visitez, laisser juste La maison Voilà et centrer
   le titre aux images » — le titre héritait d'un alignement à gauche
   commun à toutes les sections, alors que la grille de photos, elle,
   est centrée. Il se recale au-dessus d'elles, chapô compris. */
.home-h2.h2-orange.maison-h2 { text-align: center; }

/* ============================================================
   RETOUR CLIENTE — 22/09, page Vente
   ============================================================ */

/* « Pour la page vente, remettre les effets des titres comme avant. »
   Au passage précédent on avait coupé d'un coup la typo Knockout ET la
   double frappe détourée sur les quatre pages services (bloc
   « SERVICES 3 »). La typo Playfair reste — c'est elle qui avait été
   demandée — mais le contour fantôme revient sur Vente : le même que
   partout ailleurs sur le site, une copie du titre en filet orange
   décalée d'un cheveu en bas à droite, qui suit la souris.
   Posé sur body.svc-relief, donc sur cette page uniquement : Location,
   Gestion et Travaux gardent leurs titres nets. Un mot et je les
   aligne dessus. */
body.svc-relief .svc-wire .home-h1.v7-giant::before,
body.svc-relief .svc-wire .home-h2.v7-giant::before {
  content: attr(data-txt);
}

/* ============================================================
   RETOUR 23/09 — accueil, fin du zoom au scroll
   ============================================================ */

/* « Quand on scrolle sur la page d'accueil, la fin du scroll est mal
   cadrée sur la vidéo. »
   La mosaïque est une grille 3×3 de cases plein écran, séparées par un
   écart de 84 px, que le scroll agrandit jusqu'à ce que la case du
   centre — la vidéo — occupe l'écran. Sa boîte était déclarée en
   arrondi (324vw × 330vh) alors que ses trois colonnes et ses trois
   lignes n'en réclament que 300vw + 2 écarts et 300vh + 2 écarts. Le
   surplus, une vingtaine de vw et une trentaine de vh, se garait à
   droite et en bas ; la grille étant centrée sur sa boîte et non sur
   ses cases, la vidéo se retrouvait poussée vers la gauche et vers le
   haut. D'où, en fin de course, le bandeau de la photo voisine sur le
   bord droit et la bande orange sous la vidéo.
   On calcule donc la boîte à partir de l'écart lui-même : plus de
   surplus, la case centrale tombe pile sur le point de zoom et la
   vidéo remplit l'écran au pixel près. */
.v10-grid {
  --v10-gap: 84px;
  gap: var(--v10-gap);
  width: calc(300vw + 2 * var(--v10-gap));
  height: calc(300vh + 2 * var(--v10-gap));
}
@media (max-width: 760px) {
  .v10-grid { --v10-gap: 40px; width: calc(300vw + 2 * var(--v10-gap)); height: calc(300vh + 2 * var(--v10-gap)); }
}
/* Le bloc ci-dessus passant après la règle « animations réduites », on lui
   rend la main : sur ces machines la mosaïque reste une simple vidéo
   posée dans le flux, sans grille ni zoom. */
@media (prefers-reduced-motion: reduce) {
  .v10-grid { width: 100%; height: auto; }
}

/* ============================================================
   RETOUR 24/09 — fiche bien, catégories autour du bien
   ============================================================ */

/* « Enlever les arrondis et mettre uniquement des rectangles. »
   Le grand balayage anti-rondeurs avait bien mis au carré le bouton de
   chaque catégorie (.prox-chip), mais pas la puce de liste qui l'entoure :
   chaque bouton est posé dans un <li> qui, lui, portait encore son fond
   blanc et son arrondi de pastille (999 px). Résultat à l'écran, un
   rectangle orange enfermé dans une gélule blanche — deux cadres
   superposés, le mauvais des deux étant le plus visible.
   On retire donc au <li> tout rôle décoratif : il ne fait plus que tenir
   le bouton, lequel garde son fond blanc, son filet orange et ses angles
   droits, à l'identique des autres boutons du site. */
.prox-chips li,
.sec-orange .prox-chips li {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}

/* ============================================================
   RETOUR 24/09 — Pause café, tout le contenu en pages de journal
   ============================================================ */

/* « Pour le journal, l'intégralité du contenu doit ressembler à un
   journal. »
   Jusqu'ici, seule la une l'était : bandeau de titre, lettrine, colonne
   de petites annonces. Passé ce premier écran, on retombait sur des
   sections de site ordinaires — titres centrés, grandes photos, textes
   au fil de l'eau — et l'illusion tombait au moment précis où la cliente
   fait défiler. Ce sont les petits signes qui font le papier, pas la une
   toute seule : une signature sous le chapô, des colonnes justifiées
   séparées d'un filet, un chapeau en italique sous chaque rubrique, des
   légendes annoncées « Photo · », un encart de publicité encadré, un
   courrier des lecteurs en vraies colonnes, un coupon d'abonnement à
   découper, et surtout un pied de page numéroté au bas de chaque
   feuille. On les ajoute tous, sans déplacer un seul contenu : ce sont
   les mêmes textes, les mêmes photos, les mêmes rubriques, mis en page
   comme la gazette imprimée. */

/* la signature de l'article, entre deux filets comme au marbre */
.jnl26-sign {
  margin: 0 0 20px;
  padding: 9px 0;
  border-top: 1px solid rgba(23, 20, 15, .2);
  border-bottom: 1px solid rgba(23, 20, 15, .2);
  font-family: var(--sans); font-size: 10.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft);
}

/* le chapeau : l'italique qui annonce la rubrique avant le premier mot */
.jnl26-chapeau {
  max-width: 64ch;
  margin: 0 0 clamp(20px, 2.6vw, 32px);
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(23, 20, 15, .14);
  font-family: var(--serif); font-style: italic;
  font-size: clamp(16px, 1.8vw, 20px); line-height: 1.45;
  color: var(--ink-soft);
}

/* le pied de feuille : ours, édition, folio — le détail qui dit « page » */
.jnl26-folio {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: 8px 20px;
  margin: clamp(30px, 4vw, 52px) 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(23, 20, 15, .2);
  font-family: var(--sans); font-size: 10px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft);
}
.jnl26-folio span:last-child { color: var(--accent-deep); font-weight: 800; }
.jnl26-feuille-blush .jnl26-folio { border-top-color: rgba(201, 74, 5, .28); }

/* l'encart orange devient un placard publicitaire : double filet, mention
   « publi-information » et texte en deux colonnes justifiées */
.jnl26-placard .jnl26-orange-in {
  border: 2px solid rgba(255, 248, 243, .9);
  outline: 1px solid rgba(255, 248, 243, .5);
  outline-offset: 6px;
  padding: clamp(26px, 3.6vw, 48px) clamp(20px, 3vw, 42px);
}
.jnl26-placard-lbl {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 18px;
  font-family: var(--sans); font-size: 10.5px; font-weight: 800;
  letter-spacing: .2em; text-transform: uppercase; color: var(--cream);
}
.jnl26-placard-lbl::before,
.jnl26-placard-lbl::after {
  content: ""; flex: 1; height: 1px; background: rgba(255, 248, 243, .45);
}
.jnl26-deux-cols {
  column-count: 2; column-gap: clamp(22px, 2.8vw, 40px);
  column-rule: 1px solid rgba(255, 248, 243, .4);
  text-align: justify; hyphens: auto;
}
.jnl26-deux-cols p { break-inside: avoid; }

/* le carnet : chiffres romains en tête de colonne, texte justifié */
.jnl26-num {
  display: inline-block; margin-right: 10px;
  font-family: var(--display); font-weight: 700;
  font-size: 1.25em; color: var(--accent);
}
.jnl26-carnet-col p { text-align: justify; hyphens: auto; }
.jnl26-carnet-col .jnl26-lien { text-align: left; }

/* les légendes de reportage, annoncées comme au papier */
.jnl26-photos-legende figcaption .micro::before {
  content: "Photo · ";
  color: var(--accent);
}

/* le courrier des lecteurs : trois colonnes séparées d'un filet */
.jnl26-lettres {
  display: block;
  column-count: 3; column-gap: clamp(24px, 3vw, 44px);
  column-rule: 1px solid rgba(23, 20, 15, .16);
}
.jnl26-lettre {
  break-inside: avoid;
  margin: 0 0 clamp(18px, 2.2vw, 26px);
}
.jnl26-lettre-txt {
  margin: 0 0 8px;
  font-family: var(--serif); font-size: 16.5px; line-height: 1.5;
  color: var(--ink); text-align: justify; hyphens: auto;
}
.jnl26-lettre-txt::first-letter {
  font-family: var(--display); font-weight: 700;
  font-size: 1.7em; color: var(--accent); line-height: 1;
}
.jnl26-lettre-sign {
  margin: 0; text-align: right;
  font-family: var(--sans); font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent-deep);
}
.jnl26-lettre-sign::before { content: "— "; }

/* l'abonnement devient un coupon à découper, au dos du journal */
.jnl26-coupon .jnl26-news-in {
  position: relative;
  border: 2px dashed var(--accent);
  background: var(--white);
  padding: clamp(28px, 3.6vw, 46px) clamp(20px, 3vw, 40px);
}
.jnl26-coupon .jnl26-news-in::before {
  content: "\2702";
  position: absolute; top: -15px; left: 22px;
  padding: 0 9px; background: var(--cream-2);
  font-size: 19px; line-height: 1; color: var(--accent);
}
.jnl26-coupon-lbl {
  margin: 0 0 16px;
  font-family: var(--sans); font-size: 10.5px; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase; color: var(--accent-deep);
}

@media (max-width: 860px) {
  .jnl26-lettres { column-count: 2; }
}
@media (max-width: 640px) {
  .jnl26-deux-cols { column-count: 1; text-align: left; hyphens: manual; }
  .jnl26-lettres { column-count: 1; }
  .jnl26-lettre-txt, .jnl26-carnet-col p { text-align: left; hyphens: manual; }
  .jnl26-folio { justify-content: center; text-align: center; }
}

/* ============================================================
   RETOUR 24/09 — le « Voilà ! » d'ouverture sur fond orange
   ============================================================ */

/* « Pour le Voilà qui apparaît quand on ouvre le site sur fond orange,
   change de typographie. »
   Ce mot était en Knockout, la typo condensée de la charte — exactement celle
   du VOILÀ géant en détourage vidéo qui apparaît une seconde plus tard sur
   l'accueil. Le même mot, dans la même typo, deux fois en moins de deux
   secondes : l'ouverture ne faisait qu'annoncer la suite au lieu d'apporter
   quelque chose. On garde le Knockout là où il est un parti pris assumé, le
   grand titre en détourage, et on écrit l'ouverture dans l'autre voix du
   site : le Playfair Display en italique, celui du « immobilier vitaminé »
   sous le hero et des « version Voilà » du reste des pages. L'entrée devient
   une signature manuscrite plutôt qu'une affiche, et le contraste avec le
   VOILÀ géant qui suit joue en faveur des deux.
   Playfair est nettement plus étroit et plus fin que Knockout : à taille
   égale le mot paraîtrait maigre, surtout sur téléphone où c'est le plancher
   du clamp qui s'applique. On remonte donc la taille et on resserre
   l'interlettrage pour retrouver la même présence à l'écran. */
.v7-loader-word {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(64px, 11vw, 160px);
  letter-spacing: -.015em;
}

/* ============================================================
   CORRECTIF 24/09 — l'assistant passait par-dessus l'écran d'ouverture
   ============================================================ */

/* Pendant la seconde et demie du « Voilà ! » sur fond orange, le panneau de
   l'assistant, son bouton, le bouton de la playlist et celui de WhatsApp
   restaient visibles par-dessus. Cause : l'écran d'ouverture était posé à
   z-index 400, alors que ces boutons flottants vivent entre 700 et 1101.
   On le remonte juste au-dessus du plus haut d'entre eux (le panneau de
   l'assistant, 1101), et sous les effets volontairement au premier plan
   (traînée de mandarines, pluie d'oranges). Il reste transparent aux clics
   et disparaît toujours en mouvement réduit : la règle d'origine avec
   prefers-reduced-motion ne touche que display, elle n'est pas contredite. */
.v7-loader { z-index: 1200; }

/* ============================================================
   CORRECTIF 24/09 — navigation sans rechargement
   ============================================================ */

/* Après chaque changement de page, le contenu principal reçoit le focus
   (pour les lecteurs d'écran et la navigation au clavier, qui repartent
   ainsi du début de la nouvelle page). Ce focus n'a pas à se voir. */
main[tabindex="-1"]:focus { outline: none; }

/* ============================================================
   RETOUR V2 DE CAMILLE (28/09/2026) — page 1 du PDF « RETOUR V2 »
   ============================================================ */

/* --- 1. Le logo de l'en-tête, un peu plus grand ------------- */
.site-header .logo-img { height: 46px; }
@media (max-width: 760px) { .site-header .logo-img { height: 40px; } }

/* --- 2. Les onglets flottants en bas à droite : carrés ------- */
/* « mettre tout carré au lieu d'arrondi » : la playlist et l'assistant
   rejoignent le bouton WhatsApp, déjà carré. Y compris la pastille icône
   seule des très petits écrans. */
.pl-fab, .chat-fab { border-radius: 0; }
@media (max-width: 480px) { .pl-fab { border-radius: 0; } }

/* --- 3. Un seul orange : celui de la charte ------------------ */
/* « l'orange cracra foncé n'est pas beau, à vérifier partout ». Le site
   utilisait trois oranges foncés en plus de l'officiel #EA5B0C :
   --accent-deep (#C94A05, survols et textes), #B34103 (menu de l'en-tête,
   étiquette « Formulaire acquéreur », titres du menu de droite) et #8A3203
   (programme Patrimoine). Ils avaient été choisis pour le contraste de
   lecture sur les fonds rose et crème ; Camille préfère l'orange de la
   charte partout, on s'y range. Les survols gardent leur mouvement
   (léger soulèvement, soulignement animé) pour rester perceptibles.
   Les dessins (rondelle d'orange, étoile, plante) ont été repeints dans
   leurs fichiers SVG : leur contour #CB531C passe au même orange. */
:root { --accent-deep: var(--accent); }
.hd-nav a,
.burger,
.hd-ico { color: var(--accent); }
.hd-nav a:hover, .hd-nav a.active { color: var(--accent); }
.hd-nav a::after,
.burger-ico i { background: var(--accent); }
.hd-ico:hover { color: var(--accent); }
.hd-nav a.hd-form-btn,
.v8-on .hd-nav a.hd-form-btn { color: var(--accent); }
.ov-grp-t { color: var(--accent); }
.patri26-prog .patri26-h2, .patri26-prog .patri26-eyebrow,
.patri26-prog-lede,
.patri26-bullets li strong { color: var(--accent); }

/* --- 4. « Agence immobilière — Carcassonne — Toulouse — Occitanie »
   passe SOUS « L'immobilier vitaminé » -------------------------- */
.v7-hero-tag { bottom: calc(clamp(78px, 12vh, 120px) + 30px); }
.v7-hero-kicker {
  top: auto;
  bottom: clamp(78px, 12vh, 120px);
  white-space: nowrap;
}
@media (max-width: 760px) {
  /* Signature et sous-ligne passent chacune sur deux lignes. Sur mobile, la
     playlist, l'assistant et WhatsApp occupent le bas de l'écran jusqu'à
     ~180 px : les deux textes s'empilent juste au-dessus. */
  .v7-hero-tag { bottom: 236px; }
  .v7-hero-kicker { top: auto; bottom: 188px; white-space: normal; line-height: 1.7; }
}

/* --- 5 et 6. Les deux bandeaux défilants, identiques --------- */
/* Page 1 : le bandeau du haut (vente · location · gestion…) se fondait
   dans l'orange de la mosaïque juste dessous — « mettre un trait en bas
   plus épais, qu'on voie la démarcation ».
   Page 2 : le bandeau du bas (« Créez votre histoire avec Voilà ») était
   trop gros — « fais-le comme celui du haut, plus fin, mais celui d'en
   haut en écriture grasse… que les deux soient identiques en grosseur,
   typo ».
   Les deux prennent donc la même forme : bandeau fin, écriture grasse en
   capitales (la Knockout du bandeau du bas), et les liserés rayés rose et
   crème en haut et en bas. Celui du bas du bandeau d'accueil fait la
   démarcation demandée avec la mosaïque. */
.home-v7 .v7-ticker,
.v7-cta {
  position: relative;
  padding: 14px 0;
  border-top: 0; border-bottom: 0;
}
.home-v7 .v7-ticker::before, .home-v7 .v7-ticker::after,
.v7-cta::before, .v7-cta::after {
  content: ""; position: absolute; left: 0; right: 0; height: 6px;
  background: repeating-linear-gradient(90deg, var(--blush) 0 8px, var(--cream) 8px 16px);
  z-index: 2;
}
.home-v7 .v7-ticker::before, .v7-cta::before { top: 0; }
.home-v7 .v7-ticker::after, .v7-cta::after { bottom: 0; }
.home-v7 .v7-tk-w,
.v7-cta-half {
  font-family: var(--knock);
  font-weight: normal;
  font-size: clamp(18px, 1.7vw, 26px);
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.home-v7 .v7-tk-w { padding: 0; }
.home-v7 .v7-ticker .etoile-sep,
.v7-cta .etoile-sep {
  width: .62em; height: .62em; flex: none;
  margin: 0 clamp(18px, 2.2vw, 36px);
  color: var(--blush);
  stroke-width: 3;
}
@media (max-width: 760px) {
  .home-v7 .v7-ticker, .v7-cta { padding: 12px 0; }
  .home-v7 .v7-ticker::before, .home-v7 .v7-ticker::after,
  .v7-cta::before, .v7-cta::after { height: 5px; }
}

/* ============================================================
   RETOUR V2 DE CAMILLE (28/09/2026) — page 2 du PDF
   ============================================================ */

/* --- Le timbre du pied de page, plus gros -------------------- */
/* « Le timbre plus gros please » : 30 px, on ne distinguait pas le
   « voilà » dessus. */
.foot-timbre { width: 64px; margin-top: 10px; }

/* --- Les étiquettes de thèmes (city guide) : carrées --------- */
/* « On peut mettre carré stp les onglets » : Restaurants, Écoles,
   Pharmacies… sur l'accueil et la page city guide. */
.chip { border-radius: 0; }

/* ============================================================
   RETOUR V2 DE CAMILLE (28/09/2026) — pages 3 et 4 : le journal
   de l'équipe, refait en 3D (assets/journal3d.js, three.js)
   ============================================================ */
.jx { position: relative; margin: 8px auto 0; max-width: 1180px; outline: none; }
.jx-scene {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 320px;
}
.jx-toile { display: block; margin: 0 auto; cursor: pointer; touch-action: pan-y; }
/* en attendant la 3D : la couverture, à plat, à la taille où le journal
   apparaîtra */
.jx-attente {
  width: min(300px, 62%); aspect-ratio: 1000 / 1320; object-fit: cover;
  box-shadow: 0 18px 40px rgba(60, 35, 15, .22);
}
.jx-pret .jx-attente { display: none; }
/* flèches : des carrés, comme le reste du site */
.jx-fl {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 48px; height: 48px; border: 0; border-radius: 0;
  background: var(--accent); color: var(--white);
  font-size: 28px; line-height: 1; cursor: pointer;
  box-shadow: 0 8px 20px rgba(23, 20, 15, .18);
  transition: opacity .25s, transform .25s;
}
.jx-prev { left: 0; }
.jx-next { right: 0; }
.jx-fl:hover:not(:disabled) { transform: translateY(-50%) scale(1.06); }
.jx-fl:disabled { opacity: .28; cursor: default; }
.jx-points { display: flex; justify-content: center; gap: 8px; margin-top: 12px; min-height: 12px; }
.jx-points button {
  width: 24px; height: 5px; padding: 0; border: 0; border-radius: 0;
  background: var(--blush); cursor: pointer;
}
.jx-points button.on { background: var(--accent); }
@media (max-width: 700px) {
  /* Sur téléphone la page occupe toute la largeur : les flèches passent
     dessous, de part et d'autre des repères de page. */
  .jx {
    display: grid; grid-template-columns: 44px 1fr 44px;
    grid-template-areas: "scene scene scene" "prec points suiv";
    align-items: center; row-gap: 12px;
  }
  .jx-scene { grid-area: scene; }
  .jx-fl { position: static; transform: none; width: 44px; height: 44px; font-size: 24px; }
  .jx-fl:hover:not(:disabled) { transform: none; }
  .jx-prev { grid-area: prec; }
  .jx-next { grid-area: suiv; }
  .jx-points { grid-area: points; margin: 0; flex-wrap: wrap; gap: 6px; }
  .jx-points button { width: 16px; }
}

/* La version texte du journal : pour les lecteurs d'écran et les
   moteurs quand la 3D tourne, et affichée en clair sinon. */
.jx-texte {
  max-width: 760px; margin: 24px auto 0; padding: 28px 30px;
  background: #efe7d6; color: var(--ink);
  font-family: var(--serif); font-size: 19px; line-height: 1.5;
}
.jx-art + .jx-art { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(23, 20, 15, .25); }
.jx-art-rub {
  display: inline-block; margin: 0 0 10px; padding: 5px 12px;
  background: #098348; color: #fff;
  font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.jx-art-t { margin: 0 0 10px; font-family: var(--display); color: var(--accent); font-size: 28px; line-height: 1.15; }
.jx-art a { color: var(--accent); }
.jx-actif .jx-texte {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   RETOUR V2 DE CAMILLE (28/09/2026) — pages 7 et 8
   ============================================================ */

/* --- « Rejoindre notre équipe » : la carte postale, en plus petit ---
   « Ça fait trop gros, mais c'est trop canon ! En réduisant un peu on aura
   le titre et la carte sur une même page. » */
.recrut-cp { padding-top: clamp(34px, 4vw, 56px); padding-bottom: clamp(34px, 4vw, 56px); }
.recrut-cp .recrut-h2-cp { margin-bottom: 4px; }
.recrut-lede-cp { margin-bottom: clamp(16px, 2vw, 24px); }
.cpost { max-width: 840px; }
.cpost-photo img { min-height: 260px; }
.cpost-form {
  padding: clamp(20px, 2.2vw, 30px) clamp(20px, 2.4vw, 32px) clamp(18px, 2vw, 26px);
  gap: clamp(9px, 1vw, 13px);
}
.cpost-form .cpost-l textarea { height: 64px; min-height: 0; }
.cpost-timbre { width: clamp(52px, 5vw, 70px); }

/* --- Comparateur : des photos à la bonne taille ---
   « Dans comparer les photos sont toutes petites. » */
.cmp-head img { height: clamp(150px, 15vw, 220px); }

/* ============================================================
   RETOUR V2 DE CAMILLE (28/09/2026) — page 9 : la fiche bien
   ============================================================ */

/* --- Les trois encadrés (énergie, notaire, travaux) ---
   « Trop gros, de différentes tailles… on n'y comprend rien, les couleurs
   trop foncées. » Les aplats orange deviennent des cartes claires de même
   hauteur, titre orange et filet orange en tête ; le texte passe en encre. */
.fiche-trio { align-items: stretch; gap: clamp(14px, 1.8vw, 24px); }
.fiche-trio .fiche-tile-orange {
  background: var(--white); color: var(--ink);
  border-top: 4px solid var(--accent);
  box-shadow: 0 10px 26px rgba(120, 40, 0, .08);
  padding: clamp(20px, 2vw, 28px);
  display: flex; flex-direction: column;
}
.fiche-trio .fiche-tile-orange h3 {
  color: var(--accent); font-size: clamp(1.15rem, 1.5vw, 1.4rem); margin: 0 0 14px;
}
.fiche-trio .fiche-tile-orange p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.55; }
.fiche-trio .fiche-tile-orange strong { color: var(--accent); font-size: 1.15em; }
.fiche-trio .fiche-tile-orange a { color: var(--accent); }
.fiche-trio .fiche-tile-orange .micro { color: var(--ink-soft); }
.fiche-trio .tile-cta { margin-top: auto; padding-top: 10px; }
.fiche-trio .fiche-tile-orange a.btn-pill-cream {
  background: var(--accent); color: var(--white); border-color: var(--accent); border-radius: 0;
}
.fiche-trio .fiche-tile-orange a.btn-pill-cream:hover { background: var(--white); color: var(--accent); }

/* l'étiquette énergie : sept lettres en rang, la bonne en grand */
.dpe-bloc + .dpe-bloc { margin-top: 18px; }
.dpe-k {
  margin: 0 0 8px; font-family: var(--sans); font-size: 13px; font-weight: 600;
  color: var(--ink);
}
.dpe-k span { font-weight: 400; color: var(--ink-soft); }
.dpe-rang { display: flex; align-items: center; gap: 3px; }
.dpe-l {
  flex: 1 1 0; height: 26px; display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 12px; font-weight: 600; color: #fff;
  opacity: .55;
}
.dpe-l-encre { color: var(--ink); }
.dpe-l.on {
  flex: 1.6 1 0; height: 38px; font-size: 18px; opacity: 1;
  outline: 2px solid var(--ink); outline-offset: 2px;
}
.dpe-v { margin: 8px 0 0; font-size: 13.5px; color: var(--ink-soft); }
.dpe-v strong { color: var(--ink) !important; font-size: 1em !important; }
.fiche-trio .dpe-note { font-size: 12.5px; margin-top: 14px; }

/* --- Visiter le bien : un bloc fin et clair ---
   « Trop gros ; plus fin, plus lisible ; on ne sait pas ce qu'il faut
   remplir, ou cliquer. » */
/* le titre était en encre, presque noir — la règle la plus ferme du projet :
   aucun titre noir. Orange, comme les autres titres de la fiche. */
.fiche-visite-h2 { font-size: clamp(28px, 3.4vw, 46px); }
.home-h2.h2-white-left { color: var(--accent); }
.sec-orange .home-h2.h2-white-left { color: var(--white); }
.fiche-visite {
  max-width: 980px; margin: 0 auto 0 0;
  background: var(--white); border-top: 4px solid var(--accent);
  box-shadow: 0 10px 26px rgba(120, 40, 0, .08);
  padding: clamp(20px, 2.2vw, 30px);
}
.fiche-visite-intro { margin: 0 0 18px; font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
.fiche-visite-form {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 18px; align-items: end;
}
.fv-l {
  display: block;
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--accent);
}
.fv-l span { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink-soft); }
.fiche-visite-form input, .fiche-visite-form textarea {
  display: block; margin-top: 6px;
  width: 100%; border: 1px solid rgba(234, 91, 12, .35); border-radius: 0;
  background: var(--cream); padding: 10px 12px;
  font-family: var(--sans); font-size: 15px; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--ink);
}
.fiche-visite-form input:focus, .fiche-visite-form textarea:focus {
  outline: none; border-color: var(--accent); background: var(--white);
}
.fv-msg { grid-column: 1 / 3; }
.fiche-visite-form textarea { resize: vertical; min-height: 0; }
.fiche-visite-form .fiche-send {
  grid-column: 3; justify-self: stretch; border-radius: 0;
  background: var(--accent); color: var(--white); border-color: var(--accent);
  padding: 13px 18px;
}
.fiche-visite-form .form-ok { grid-column: 1 / -1; margin: 0; }
.fiche-visite-note { margin: 16px 0 0; font-size: 12.5px; font-style: italic; color: var(--ink-soft); }
@media (max-width: 760px) {
  .fiche-visite-form { grid-template-columns: 1fr; }
  .fv-msg, .fiche-visite-form .fiche-send { grid-column: auto; }
}

/* ============================================================
   RETOUR V2 DE CAMILLE (28/09/2026) — pages 12 et 13 : l'estimation
   ============================================================ */
/* le formulaire d'estimation reprend le bloc fin des fiches, centré */
.estim-rdv { margin: clamp(18px, 2.4vw, 30px) auto 0; text-align: left; }
.fiche-visite-form select {
  display: block; margin-top: 6px; width: 100%;
  border: 1px solid rgba(234, 91, 12, .35); border-radius: 0;
  background: var(--cream); padding: 10px 12px;
  font-family: var(--sans); font-size: 15px; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--ink);
}
/* le bandeau « nos biens vendus » : même bandeau que celui du haut de page,
   mais posé dans le flux de la page (pas en bas d'une scène animée) */
.v13-marquee.v13-marquee-bande { position: relative; }
/* « Vidéos avis » : tout sur le même axe, centré */
.estim-videos { text-align: center; }
.estim-videos .home-h2 { text-align: center; }
.estim-videos .estim-intro { margin-left: auto; margin-right: auto; max-width: 56ch; }
.fiche-visite-form ::placeholder { text-transform: none; letter-spacing: 0; font-size: 14px; }

/* ============================================================
   RETOUR 28/09 (Sylvain, sur téléphone) : « les écritures du titre ne
   doivent pas superposer les photos ». Sur petit écran, le mot en contour
   (« VOILÀ ») passait sur les deux tirages du haut. On descend les tirages
   sous le texte, assez haut pour ne pas passer sous les boutons flottants
   (playlist, assistant, WhatsApp).
   ============================================================ */
@media (max-width: 760px) {
  .v13-zone:not(.v13-trace) .v13-ph-a { top: auto; bottom: 190px; left: 4%; }
  .v13-zone:not(.v13-trace) .v13-ph-b { top: auto; bottom: 190px; right: 4%; }
}

/* ============================================================
   28/09 — formulaires acquéreur et locataire, « Pourquoi pas Voilà »
   ============================================================ */

/* « Autre » : un champ libre s'ouvre quand on coche la pastille */
.vf-autre-champ {
  display: none; flex: 1 1 220px; min-width: 200px;
  font-family: var(--sans); font-size: 14px; color: var(--ink);
  background: #fff; border: 1.5px solid var(--accent); border-radius: 0;
  padding: 10px 14px;
}
.vf-autre-champ:focus { outline: 0; box-shadow: 0 0 0 3px rgba(234, 91, 12, .18); }
.vf-chks:has(.vf-chk-autre input:checked) .vf-autre-champ { display: block; }
@supports not selector(:has(*)) {
  .vf-autre-champ { display: block; }
}

/* Pourquoi pas Voilà : la mosaïque de l'agence, mots cliquables */
.pv-agence { max-width: 1100px; margin: 0 auto; padding-top: clamp(30px, 4vw, 56px); }
.pv-agence .eyebrow { margin-bottom: 6px; }
a.mosaic-tile.mosaic-word { text-decoration: none; transition: background .25s, transform .25s; }
a.mosaic-tile.mosaic-word::after { content: " →"; letter-spacing: 0; margin-left: .3em; opacity: 0; transition: opacity .25s; }
a.mosaic-tile.mosaic-word:hover { background: var(--white); color: var(--accent); outline: 2px solid var(--accent); outline-offset: -2px; }
a.mosaic-tile.mosaic-word:hover::after { opacity: 1; }
.pv-tout-en-un { margin-top: clamp(34px, 4vw, 56px); padding: 0 20px; }
.pv-tout-en-un .home-h2 { font-size: clamp(30px, 4vw, 48px); margin-bottom: 14px; }
.pv-agence .home-h2, .pv-agence .eyebrow { text-align: center; }

/* Crédit discret du studio qui a réalisé le site (28/09) */
.foot-credit { opacity: .55; }
.foot-credit a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.foot-credit a:hover { opacity: 1; color: var(--accent); }
.foot-bottom { flex-wrap: wrap; row-gap: 6px; }

/* ============================================================
   28/09 — la playlist quitte le coin en bas à droite
   « Mets le bouton playlist autre part, ça fait trop de trucs en bas à
   droite » (WhatsApp, assistant, comparateur, playlist). Elle passe seule
   dans le coin en bas à GAUCHE, au ras du bord comme WhatsApp à droite.
   Le panneau de l'assistant, qui avait monté d'un cran pour lui laisser la
   place, redescend.
   ============================================================ */
.pl-fab { left: 22px; right: auto; bottom: 22px; }
.chat-panel { bottom: 150px; max-height: min(560px, calc(100vh - 190px)); }
@media (max-width: 640px) {
  .pl-fab { left: 14px; right: auto; bottom: 14px; }
  body.chat-ouvert .pl-fab { opacity: 1; pointer-events: auto; transform: none; }
}
@media (max-width: 480px) {
  .pl-fab { left: 14px; right: auto; bottom: 14px; }
}

/* ============================================================
   28/09 — la machine à histoires : intro courte, titre orange
   ============================================================ */
.mh-main h1 { color: var(--accent); }
.mh-lede { font-size: clamp(18px, 1.8vw, 22px); line-height: 1.45; max-width: 520px; margin-bottom: 40px; }

/* ============================================================
   28/09 — Agenda Voilà dans le formulaire d'estimation
   ============================================================ */
.rdv-agenda {
  grid-column: 1 / -1;
  padding: 16px 18px 18px; margin-bottom: 4px;
  background: var(--cream); border-left: 3px solid var(--accent);
}
.rdv-agenda .fv-l { margin: 0 0 10px; }
.rdv-jours, .rdv-heures { display: flex; flex-wrap: wrap; gap: 8px; }
.rdv-heures { margin-top: 10px; }
.rdv-j, .rdv-h {
  border: 1px solid rgba(234, 91, 12, .4); border-radius: 0; background: var(--white);
  color: var(--ink); font-family: var(--sans); cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.rdv-j { display: flex; flex-direction: column; align-items: center; min-width: 64px; padding: 7px 10px; font-size: 11px; line-height: 1.25; }
.rdv-j span { text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.rdv-j strong { font-size: 20px; font-family: var(--display); color: var(--accent); }
.rdv-h { padding: 8px 14px; font-size: 14px; }
.rdv-j:hover, .rdv-h:hover { border-color: var(--accent); }
.rdv-j.on, .rdv-h.on { background: var(--accent); border-color: var(--accent); color: var(--white); }
.rdv-j.on span, .rdv-j.on strong { color: var(--white); }
.rdv-choix { margin: 12px 0 0; font-size: 14px; font-weight: 600; color: var(--accent); }
.rdv-lien { display: inline-block; border-radius: 0; background: var(--accent); color: var(--white); border-color: var(--accent); }
/* les boutons des formulaires prennent toute la largeur par défaut :
   pas les jours ni les horaires de l'agenda */
.fiche-visite-form .rdv-agenda .rdv-j,
.fiche-visite-form .rdv-agenda .rdv-h {
  width: auto; flex: 0 0 auto; margin: 0; letter-spacing: 0; text-transform: none;
}
.fiche-visite-form .rdv-agenda .rdv-j { display: flex; }

/* ============================================================
   28/09 — page « Louer ou gérer votre bien » (propriétaires)
   ============================================================ */
.lg-sec { max-width: 1120px; margin: 0 auto; padding: clamp(30px, 4vw, 56px) 20px 0; }
.lg-sec .home-h2 { text-align: center; margin-bottom: clamp(18px, 2.4vw, 30px); }
.lg-offres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); }
.lg-offre {
  display: flex; flex-direction: column;
  background: var(--white); border-top: 4px solid var(--accent);
  box-shadow: 0 10px 26px rgba(120, 40, 0, .08);
  padding: clamp(20px, 2.2vw, 30px);
}
.lg-offre-k { margin: 0 0 6px; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.lg-offre-t { margin: 0 0 14px; font-family: var(--display); font-size: clamp(1.2rem, 1.6vw, 1.45rem); color: var(--accent); line-height: 1.2; }
.lg-offre ul { margin: 0 0 14px; padding: 0; list-style: none; }
.lg-offre li { position: relative; padding: 6px 0 6px 20px; font-size: 14.5px; color: var(--ink); border-bottom: 1px solid rgba(234, 91, 12, .14); }
.lg-offre li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 8px; height: 8px; background: var(--accent); }
.lg-offre-f { margin: 0 0 14px; font-family: var(--display); font-style: italic; color: var(--ink-soft); }
.lg-offre-l { margin-top: auto; align-self: flex-start; font-size: 14px; font-weight: 600; color: var(--accent); }
.lg-etapes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.lg-etape { padding: 18px 18px 20px; border-left: 3px solid var(--accent); background: rgba(255, 255, 255, .55); }
.lg-etape-n { font-family: var(--knock); font-size: 34px; color: var(--accent); line-height: 1; }
.lg-etape h3 { margin: 8px 0 6px; font-family: var(--display); font-size: 1.1rem; color: var(--accent); }
.lg-etape p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.lg-page .vf-body { padding-top: clamp(30px, 4vw, 56px); }
@media (max-width: 900px) {
  .lg-offres { grid-template-columns: 1fr; }
  .lg-etapes { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .lg-etapes { grid-template-columns: 1fr; } }

/* carte « Par téléphone » : le numéro et, dessous, WhatsApp */
div.vf-ct { cursor: default; }
.vf-ct a.vf-ct-v { color: var(--accent); text-decoration: none; }
.vf-ct-wa { display: inline-block; margin-top: 10px; font-size: 13.5px; font-weight: 600; color: var(--accent); text-decoration: none; border-bottom: 1px solid currentColor; }

/* 28/09 — « Une agence immobilière tout en un » : le « UN » tombait seul à
   la ligne. Le titre tient sur une ligne sur grand écran (cadre élargi) et se
   coupe en lignes équilibrées sur téléphone (text-wrap: balance) — le double
   contour, qui reprend le même texte, se coupe au même endroit. Centré comme
   son texte. */
.pv-tout-en-un .home-h2, .pv-tout-en-un .home-h2::before { text-wrap: balance; }
.pv-tout-en-un { max-width: 900px; margin-left: auto; margin-right: auto; }
.pv-tout-en-un .home-h2 { text-align: center; }

/* ============================================================
   28/09 — « WhatsApp chevauche le comparateur » : la pastille
   « Comparer (n) » était posée dans le même coin que WhatsApp. Elle
   rejoint la colonne de gauche, juste au-dessus de la playlist ; en bas à
   droite ne restent que l'assistant et WhatsApp.
   ============================================================ */
.cmp-bar { left: 22px; right: auto; bottom: 80px; padding: 12px 22px; }
@media (max-width: 640px) {
  .cmp-bar { left: 14px; right: auto; bottom: 68px; padding: 11px 18px; font-size: 14px; }
}

/* ============================================================
   29/09 — Camille : « j'avais demandé que les bandeaux soient de la même
   dimension, même police » — TOUS les bandeaux défilants prennent la
   forme de celui de la page d'accueil : 52 px de haut, Knockout en
   capitales 18 à 26 px, liserés rayés rose et crème en haut et en bas.
   Concernés : bandeaux des hauts de page (L'agence, Les biens,
   L'estimation, Pause café), « nos biens vendus », bandeau de Voilà
   Patrimoine, et celui du pied de page (déjà aligné le 28/09).
   ============================================================ */
.v13-marquee, .v7-ticker {
  padding: 14px 0;
  border-top: 0; border-bottom: 0;
}
.v7-ticker, .v13-marquee.v13-marquee-bande { position: relative; }
.v13-marquee::before, .v13-marquee::after,
.v7-ticker::before, .v7-ticker::after {
  content: ""; position: absolute; left: 0; right: 0; height: 6px;
  background: repeating-linear-gradient(90deg, var(--blush) 0 8px, var(--cream) 8px 16px);
  z-index: 2;
}
.v13-marquee::before, .v7-ticker::before { top: 0; }
.v13-marquee::after, .v7-ticker::after { bottom: 0; }
.v13-mq, .v7-tk-w {
  font-family: var(--knock); font-weight: normal;
  font-size: clamp(18px, 1.7vw, 26px); line-height: 1;
  letter-spacing: .04em; text-transform: uppercase;
}
.v7-tk-w { padding: 0 clamp(12px, 1.4vw, 22px); }
.v7-tk-s { width: .4em; height: .4em; margin: 0; }
@media (max-width: 760px) {
  .v13-marquee, .v7-ticker { padding: 12px 0; }
  .v13-marquee::before, .v13-marquee::after,
  .v7-ticker::before, .v7-ticker::after { height: 5px; }
}

/* 29/09 — « Timbre bien plus grand » */
.foot-timbre { width: 112px; }
@media (max-width: 760px) { .foot-timbre { width: 92px; } }

/* 29/09 — Voilà Patrimoine : le nombre de communes couvertes est retiré des
   chiffres (demande de Camille) ; trois chiffres, sur trois colonnes. */
.patri26-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .patri26-nums { grid-template-columns: 1fr; } }

/* ============================================================
   29/09 — Formulaires (acquéreur, locataire, propriétaire, contact) :
   « trop d'espace, ce serait bien de tout mettre sur une page ».
   Tête de page resserrée, carte plus large, champs sur quatre colonnes
   sur grand écran, espacements et champs plus compacts.
   ============================================================ */
.vf-hero { padding: clamp(26px, 3vw, 44px) var(--pad) clamp(18px, 2vw, 28px); }
.vf-eyebrow { margin-bottom: 8px; }
.vf-h1 { font-size: clamp(34px, 4.2vw, 62px); margin-bottom: 8px; }
.vf-hero-it { font-size: clamp(16px, 1.5vw, 20px); margin-bottom: 6px; max-width: none; }
.vf-hero-p { font-size: 14.5px; line-height: 1.55; }
.vf-body { padding-top: clamp(18px, 2vw, 28px); padding-bottom: clamp(30px, 3.4vw, 50px); }
.vf-card { max-width: 1120px; padding: clamp(18px, 2.2vw, 30px) clamp(20px, 2.6vw, 36px); border-radius: 18px; }
.vf-block { margin-bottom: clamp(14px, 1.6vw, 22px); }
.vf-block-h { margin-bottom: 10px; padding-bottom: 6px; gap: 10px; }
.vf-num { font-size: clamp(20px, 1.8vw, 26px); }
.vf-block-t { font-size: clamp(16px, 1.3vw, 19px); }
.vf-rows { gap: 10px 14px; }
@media (min-width: 1000px) { .vf-rows { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.vf-f { gap: 5px; }
.vf-lbl { font-size: 11px; }
.vf-f input, .vf-f select, .vf-f textarea { padding: 9px 12px; font-size: 14px; border-radius: 8px; }
.vf-f textarea { min-height: 62px; }
.vf-chks { gap: 7px; }
.vf-chk span { padding: 7px 14px; font-size: 13px; }
.vf-send-wrap { margin-top: 14px; padding-top: 14px; }
.vf-send { padding: 13px 34px; }
.vf-contacts { margin-top: clamp(18px, 2vw, 28px); }

/* ============================================================
   29/09 — « Pourquoi pas Voilà ? » : le courrier des lecteurs remplace
   les mots doux (même présentation que dans le journal Pause café)
   ============================================================ */
.pv-lettres {
  max-width: 1120px; margin: 0 auto;
  padding: clamp(36px, 4vw, 64px) var(--pad) clamp(40px, 4.6vw, 70px);
  background: var(--cream);
}
.pv-lettres .home-h2 { text-align: left; margin: 8px 0 6px; }
.pv-lettres-chapeau {
  margin: 0 0 clamp(20px, 2.4vw, 30px);
  font-family: var(--display); font-style: italic; font-size: clamp(16px, 1.4vw, 19px); color: var(--ink-soft);
}
.pv-lettres-cafe { margin: 10px 0 0; font-size: 14px; color: var(--ink-soft); }
.pv-lettres-cafe a { color: var(--accent); font-weight: 600; margin-left: 6px; }
@media (max-width: 760px) { .pv-lettres .jnl26-lettres { column-count: 1; } }

/* 29/09 — la carte des biens et le city guide sur une seule page */
.guide-uni .guide-part { padding-top: clamp(16px, 2vw, 28px); }
.guide-uni .guide-part + .guide-part { padding-top: clamp(40px, 4.6vw, 70px); }
.guide-uni .guide-part .home-h2 { margin-bottom: 6px; text-align: left; }
.guide-uni .guide-part .lede { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.5; max-width: 60ch; margin-bottom: 16px; }
/* thème actif du city guide : orange (l'aplat brun foncé faisait « noir ») */
.chip.chip-actif { background: var(--accent); border-color: var(--accent); color: var(--white); }
.carte-head h1 { color: var(--accent); }

/* 29/09 — étiquette énergie : couleurs sans lettres, la classe du bien en grand */
.dpe-rang { align-items: center; gap: 2px; }
.dpe-l { height: 22px; opacity: .9; }
.dpe-l.on {
  flex: 2.2 1 0; height: 54px; font-family: var(--knock); font-size: 34px; font-weight: normal;
  outline: 3px solid var(--ink); outline-offset: 2px; opacity: 1;
}
.dpe-v strong { font-size: 1.05em !important; }

/* ============================================================
   29/09 — « Nos plus belles rénovations » (Pause café) : les vraies
   photos avant / après, une paire par chantier
   ============================================================ */
.renov-paires { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.6vw, 36px); }
.renov-paire { margin: 0; }
.renov-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.renov-cote { position: relative; }
.renov-cote .media-photo { margin: 0; aspect-ratio: 3 / 4; overflow: hidden; }
.renov-cote .media-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.renov-tag {
  position: absolute; z-index: 2; top: 10px; left: 10px;
  padding: 4px 10px; background: var(--white); color: var(--accent);
  font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.renov-tag-apres { background: var(--accent); color: var(--white); }
.renov-paire figcaption { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; }
.renov-paire figcaption strong { font-family: var(--display); font-size: 18px; color: var(--accent); }
.renov-paire figcaption .micro { text-transform: uppercase; letter-spacing: .12em; color: var(--ink-soft); }
@media (max-width: 760px) { .renov-paires { grid-template-columns: 1fr; } }

/* ============================================================
   29/09 — « Notre agence » (page L'agence) : « réduire la page pour que
   tout rentre dans un écran ; réduire les espaces d'écriture ». Texte
   resserré, photos un peu moins hautes, marges réduites.
   ============================================================ */
.agence-clair-v6.home-sec { padding-top: clamp(24px, 3vw, 40px); padding-bottom: clamp(20px, 2.6vw, 36px); }
.agence-clair-v6 .agc-h1-net { font-size: clamp(34px, 4vw, 54px); }
.agence-clair-v6 .agc-slogan-net { margin-bottom: 10px; }
.agence-clair-v6 .agc-strong-v6 { margin-bottom: 12px; font-size: clamp(15px, 1.35vw, 18px); }
.agence-clair-v6 .agc-txt-v6 p.agc-p-aere {
  font-size: clamp(14.5px, 1.15vw, 16px); line-height: 1.5; margin-bottom: .65em;
}
.agence-clair-v6 .agc-txt-v6 p.agc-svc-list { margin: 12px 0; padding: 12px 16px; line-height: 1.55; }
.agence-clair-v6 .agc-compo { min-height: clamp(340px, 34vw, 470px); }
@media (max-width: 760px) {
  .agence-clair-v6 .agc-txt-v6 p.agc-p-aere { line-height: 1.55; margin-bottom: .7em; }
  .agence-clair-v6 .agc-compo { min-height: 70vw; }
}

/* 29/09 — page L'équipe : « c'est trop gros aussi » — journal plus compact
   (60 % de la hauteur d'écran, voir journal3d.js), titre et marges réduits,
   pour voir les cartes de l'équipe dès l'arrivée. */
.equipe-mag-sec.home-sec { padding-top: clamp(16px, 2vw, 28px); padding-bottom: clamp(18px, 2.2vw, 30px); }
.equipe-mag-sec .home-h2 { font-size: clamp(30px, 3.6vw, 48px); margin-bottom: 4px; }
.equipe-mag-sec .jx-scene { min-height: 260px; }
.equipe-mag-sec .jx-points { margin-top: 6px; }
.equipe-mag-sec .eq-mag-note { margin: 6px 0 0; }
.equipe-mag-sec .jx-attente { width: min(240px, 50%); }

/* ============================================================
   29/09 — « ça s'affiche en plus petit au début et ça redevient grand ».
   Pendant le chargement de la 3D, la couverture posée en attente n'avait
   pas la taille du journal 3D : elle faisait 240 px de large, puis le
   journal apparaissait bien plus grand. Elle prend désormais exactement la
   taille de la couverture 3D (même calcul que journal3d.js : hauteur de la
   scène plafonnée à 560 px ou 70 % de l'écran, couverture = hauteur / 1,17,
   format 1000 × 1320), et la scène réserve sa hauteur finale dès le départ :
   plus de saut.
   ============================================================ */
.equipe-mag-sec .jx-scene { min-height: max(340px, min(560px, 70vh)); }
.equipe-mag-sec .jx-attente {
  width: auto; height: calc(max(340px, min(560px, 70vh)) / 1.17);
  aspect-ratio: 1000 / 1320; box-shadow: 0 16px 34px rgba(60, 35, 15, .2);
}
@media (max-width: 700px) {
  .equipe-mag-sec .jx-scene { min-height: 0; }
  .equipe-mag-sec .jx-attente {
    height: auto; width: min(calc(100% / 1.05), calc(max(340px, 66vh) / 1.17 * 1000 / 1320));
  }
}
/* le journal 3D arrive en fondu à la place de la couverture */
.jx-toile { animation: jx-apparait .35s ease both; }
@keyframes jx-apparait { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .jx-toile { animation: none; } }

/* 29/09 — « Mets les timbres en plus gros, partout » : le timbre du pied de
   page et celui de la carte postale « Rejoindre notre équipe ». */
.foot-timbre { width: 150px; }
@media (max-width: 760px) { .foot-timbre { width: 118px; } }
.cpost-timbre { width: clamp(92px, 8.5vw, 124px); top: 14px; right: 14px; }
.cpost-form .cpost-l { max-width: calc(100% - 132px); }
.cpost-form .cpost-l ~ .cpost-l ~ .cpost-l ~ .cpost-l { max-width: none; }
@media (max-width: 860px) {
  .cpost-timbre { width: clamp(76px, 20vw, 96px); top: 10px; right: 10px; }
  .cpost-form .cpost-l { max-width: calc(100% - 96px); }
}

/* ============================================================
   29/09 — Léane et Camille, sur des écrans d'ordinateur portable plus
   petits (≈ 1280 × 680 utiles) : « réduire la taille du formulaire »
   (Rejoindre notre équipe) et « réduire aussi sur une page » (Visiter le
   bien, estimation). Ce n'était pas le cache : sur ces écrans, les blocs
   dépassaient d'environ 70 px.
   ============================================================ */

/* --- Visiter le bien / estimation : l'agenda À CÔTÉ des coordonnées
       (comme l'ancien Calendly que Camille voulait « à côté ») --- */
@media (min-width: 1000px) {
  .fiche-visite { max-width: 1120px; }
  .fiche-visite-form { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px; }
  .fiche-visite-form .rdv-agenda { grid-column: 1; grid-row: 1 / span 6; margin: 0; align-self: stretch; }
  .fiche-visite-form .fv-msg { grid-column: 2 / 4; }
  .fiche-visite-form .fiche-send { grid-column: 2 / 4; }
  .fiche-visite-form textarea { min-height: 0; height: 58px; }
  .fiche-visite-form input, .fiche-visite-form select { padding: 8px 11px; }
  .fiche-visite-intro { margin-bottom: 12px; }
  .fiche-visite-note { margin-top: 10px; }
  .fiche-visite { padding: clamp(16px, 1.8vw, 24px); }
  .rdv-jours { gap: 6px; }
  .fiche-visite-form .rdv-agenda .rdv-j { min-width: 58px; padding: 6px 8px; }
}

/* --- Rejoindre notre équipe : la carte postale suit la hauteur d'écran --- */
@media (min-width: 861px) {
  .recrut-cp { padding-top: clamp(22px, 3vh, 44px); padding-bottom: clamp(22px, 3vh, 44px); }
  .recrut-cp .recrut-h2-cp { font-size: clamp(32px, 5vh, 54px); }
  .recrut-lede-cp { margin-bottom: clamp(10px, 1.6vh, 20px); }
  .cpost-photo img { min-height: min(240px, 34vh); }
  .cpost-form { gap: clamp(6px, 1vh, 12px); padding-top: clamp(14px, 2vh, 26px); padding-bottom: clamp(14px, 2vh, 24px); }
  .cpost-form .cpost-l input { padding-top: 4px; padding-bottom: 4px; }
  .cpost-form .cpost-l textarea { height: clamp(40px, 6vh, 64px); }
}
@media (min-width: 1000px) {
  /* remplit les trous (Type de bien vient se placer à côté du téléphone) */
  .fiche-visite-form { grid-auto-flow: row dense; }
}
@media (min-width: 861px) {
  .recrut-lede-cp { font-size: clamp(14px, 2.2vh, 19px); line-height: 1.35; }
  .cpost-form { gap: clamp(5px, .8vh, 12px); }
  .cpost-form .cpost-l textarea { height: clamp(34px, 5vh, 60px); }
}

/* ============================================================
   05/10/2026 — « Pourquoi pas Voilà ? » : contenu de Camille et Léane,
   découpé pour ne pas faire « trop de texte »
   ============================================================ */
.pv-page { background: var(--cream); }
.pv-hero { max-width: 900px; margin: 0 auto; padding: clamp(34px, 4.4vw, 64px) var(--pad) clamp(16px, 2vw, 26px); text-align: center; }
.pv-hero .eyebrow { justify-content: center; }
.pv-h1 {
  margin: 10px 0 14px; font-family: var(--knock); font-weight: normal; text-transform: uppercase;
  font-size: clamp(40px, 6vw, 84px); line-height: .95; color: var(--accent);
}
.pv-lede { margin: 0 auto; max-width: 52ch; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; color: var(--ink-soft); }

.pv-piliers {
  max-width: 1120px; margin: clamp(18px, 2.4vw, 30px) auto 0; padding: 0 var(--pad);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px);
}
.pv-pilier { background: var(--white); border-top: 4px solid var(--accent); padding: 22px 20px 20px; box-shadow: 0 10px 24px rgba(120, 40, 0, .07); }
.pv-ico { width: 42px; height: 42px; color: var(--accent); }
.pv-pilier h3 { margin: 12px 0 6px; font-family: var(--display); font-size: 19px; line-height: 1.2; color: var(--accent); }
.pv-pilier p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }
.pv-signature {
  margin: clamp(20px, 2.6vw, 34px) auto 0; padding: 0 var(--pad); text-align: center;
  font-family: var(--display); font-style: italic; font-size: clamp(19px, 1.9vw, 26px); color: var(--accent);
}

.pv-visi { margin-top: clamp(34px, 4.4vw, 64px); background: var(--accent); color: var(--white); }
.pv-visi-in { max-width: 1120px; margin: 0 auto; padding: clamp(30px, 4vw, 56px) var(--pad); }
.pv-visi .home-h2 { color: var(--white); text-align: left; margin-bottom: clamp(16px, 2vw, 26px); }
.pv-visi-grille { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: clamp(20px, 3vw, 48px); align-items: center; }
.pv-chiffre { display: flex; flex-direction: column; }
.pv-chiffre strong { font-family: var(--knock); font-weight: normal; font-size: clamp(110px, 13vw, 190px); line-height: .85; }
.pv-chiffre span { font-size: 16px; line-height: 1.45; max-width: 22ch; }
.pv-visi-k { margin: 0 0 10px; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.pv-portails { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.pv-portails span { padding: 8px 16px; background: var(--white); color: var(--accent); font-weight: 700; font-size: 15px; }
.pv-visi-liste ul { margin: 0; padding: 0; list-style: none; }
.pv-visi-liste li { padding: 9px 0 9px 22px; position: relative; font-size: 15.5px; line-height: 1.45; border-top: 1px solid rgba(255, 255, 255, .3); }
.pv-visi-liste li::before { content: ""; position: absolute; left: 0; top: 16px; width: 9px; height: 9px; background: var(--white); }

.pv-outils { max-width: 1120px; margin: 0 auto; padding: clamp(34px, 4.4vw, 64px) var(--pad) 0; text-align: center; }
.pv-outils .home-h2 { text-align: center; margin-bottom: clamp(18px, 2.4vw, 30px); }
.pv-outils-l { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.pv-outils-l li { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 12px; background: var(--white); }
.pv-outils-l .pv-ico { width: 48px; height: 48px; }
.pv-outils-l span { font-family: var(--display); font-size: 16px; line-height: 1.3; color: var(--ink); }

.pv-az { max-width: 820px; margin: 0 auto; padding: clamp(34px, 4.4vw, 64px) var(--pad) 0; text-align: center; }
.pv-az .home-h2 { text-align: center; margin-bottom: 12px; }
.pv-az p { margin: 0; font-size: clamp(16px, 1.4vw, 18.5px); line-height: 1.6; color: var(--ink-soft); }

.pv-fin {
  margin: clamp(36px, 4.6vw, 70px) auto clamp(30px, 4vw, 60px); padding: 0 var(--pad); text-align: center;
  font-family: var(--knock); text-transform: uppercase; font-size: clamp(34px, 5vw, 72px); line-height: 1; color: var(--accent);
}
.pv-fin em { font-style: normal; color: var(--white); background: var(--accent); padding: 0 .18em; }
.pv-parlons { text-align: center; margin-bottom: 16px; }

@media (max-width: 960px) {
  .pv-piliers { grid-template-columns: 1fr 1fr; }
  .pv-outils-l { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pv-visi-grille { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .pv-piliers, .pv-outils-l { grid-template-columns: 1fr 1fr; }
}
/* tous les titres de section de la page dans la même police (Knockout) */
.pv-page .pv-outils .home-h2, .pv-page .pv-az .home-h2, .pv-page .pv-visi .home-h2 {
  font-family: var(--knock); font-weight: 400; text-transform: uppercase;
  font-size: clamp(34px, 4.6vw, 66px); letter-spacing: .01em;
}

/* ============================================================
   05/10/2026 — « tous les CTA du site en carré, jamais en arrondi ».
   Règle générale, posée en dernier : tout ce qui se clique ou se remplit
   (liens-boutons, boutons, pastilles de choix, champs de formulaire,
   cartes cliquables) a des angles droits.
   ============================================================ */
a, button, input, select, textarea, summary, [role="button"],
.chip, .vf-chk span, .chat-chip, label.cpost-cv, .mh-opt,
.agc-svc-carte, .defile-tile, .svc-autre, .vf-ct {
  border-radius: 0 !important;
}

/* ============================================================
   05/10 — intros des hauts de page : plus besoin de faire défiler.
   L'intro se joue seule à l'ouverture (voir app.js) et tient dans
   l'écran : la zone fait la hauteur de l'écran sous l'en-tête, plus
   de long parcours « collant ».
   ============================================================ */
html.v11-on .v13-zone { height: calc(100vh - 64px); min-height: 520px; }
html.v11-on .v13-stick { position: relative; height: 100%; }
@media (max-width: 760px) {
  html.v11-on .v13-zone { height: calc(100svh - 58px); min-height: 520px; }
}

/* 05/10 — mosaïque de l'accueil. « Changer les photos de la section 2 et
   mettre exactement celles-ci » (Camille) : huit photos fixes, une par case.
   Le fondu entre deux photos d'une même case (.v10-alt / .v10-bascule) est
   retiré avec les photos en trop ; le cadrage de chaque photo est posé en
   ligne dans la page (object-position), relevé sur sa maquette. */


/* 05/10 — Vente, Location, Gestion : bouton « Nos honoraires » à côté du bouton principal */
.svc-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.btn-rect.btn-rect-ligne { background: transparent; color: var(--accent); border: 2px solid var(--accent); }
.btn-rect.btn-rect-ligne:hover { background: var(--accent); color: var(--white); }


/* ============================================================
   05/10 — formulaire de contact (Camille) : « si je clique sur estimer
   mon bien, dessous on demande : je souhaite vendre mon bien ou avis de
   valeur notarié », « mettre l'adresse exacte pour l'estimation », « que
   l'on puisse mettre la référence du bien quand on clique sur visiter un
   bien ».
   Ces questions vivent dans un encart .vf-si posé juste sous les
   pastilles ; app.js l'ouvre quand la pastille est cochée. Un filet
   orange à gauche le rattache au choix qui l'a ouvert. L'attribut
   [hidden] est réaffirmé : la règle display ci-dessous l'écraserait.
   ============================================================ */
.vf-si {
  display: block; margin-top: 12px; padding: 12px 16px 14px;
  background: var(--blush-soft); border-left: 3px solid var(--accent);
  animation: vf-si-ouvre .28s ease both;
}
.vf-si[hidden] { display: none; }
.vf-si + .vf-si { margin-top: 8px; }
@keyframes vf-si-ouvre { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .vf-si { animation: none; } }

/* 05/10 — « Pourquoi pas Voilà », bande orange « Une visibilité sans
   frontières ». Camille : « pour l'AMEPI changer avec : une visibilité
   décuplée pour votre bien » + deux phrases. La ligne AMEPI porte donc un
   titre et, dessous, son explication en plus petit. */
.pv-visi-liste li .pv-visi-detail {
  display: block; margin-top: 4px;
  font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .92);
}

/* ============================================================
   06/10 — « Bug sur téléphone » (Camille, page d'accueil), puis
   « optimise sur téléphone » (Sylvain). Revue de l'accueil sur écran de
   téléphone, à la verticale et à l'horizontale ; cinq corrections.
   ============================================================ */

/* --- 1. En-tête : le cœur, le comparateur et « Menu » à droite -------
   L'en-tête est une grille à trois colonnes : logo, liens, icônes. Sur
   téléphone les liens sont masqués ; les icônes glissaient alors dans la
   colonne du milieu et restaient plantées au centre, le bord droit vide.
   Chaque élément a désormais sa colonne attitrée, liens présents ou non. */
.site-header .logo { grid-column: 1; }
.site-header .hd-nav { grid-column: 2; }
.site-header .hd-right { grid-column: 3; }

/* --- 2. Mosaïque : la hauteur d'écran qui existe vraiment ------------
   « 100vh », sur téléphone, c'est la hauteur de l'écran une fois les
   barres du navigateur rentrées. Tant qu'elles sont là, la scène dépassait
   donc par le bas : la rangée du bas de la mosaïque passait sous la barre
   et la grille n'était plus centrée. « svh » est la hauteur avec les
   barres : la scène et les cases s'y tiennent. Sur ordinateur les deux
   unités sont égales, rien ne change.
   (Sous « animations réduites », la mosaïque reste une simple vidéo : ce
   bloc ne s'applique pas.) */
@media (prefers-reduced-motion: no-preference) {
  @supports (height: 100svh) {
    .v10-zoom { height: 320svh; }
    .v10-stick { height: 100svh; }
    .v10-grid {
      grid-template-rows: repeat(3, 100svh);
      height: calc(300svh + 2 * var(--v10-gap));
    }
    @media (max-width: 760px) { .v10-zoom { height: 260svh; } }
  }
}

/* --- 3. Mosaïque en « mode léger » (voir app.js) ---------------------
   Sur écran tactile, la grille n'est plus une image de trois écrans sur
   trois que l'on rétrécit : ses cases prennent directement la taille
   voulue, pilotée par --v10-s (de 0,30 à 1). Même rendu, cent fois moins
   de mémoire graphique. */
.v10-leger .v10-grid {
  --v10-s: .30;
  --v10-ch: 100vh;
  grid-template-columns: repeat(3, calc(100vw * var(--v10-s)));
  grid-template-rows: repeat(3, calc(var(--v10-ch) * var(--v10-s)));
  gap: calc(var(--v10-gap) * var(--v10-s));
  width: auto; height: auto;
  transform: translate(-50%, -50%);
  will-change: auto;
}
@supports (height: 100svh) { .v10-leger .v10-grid { --v10-ch: 100svh; } }
.v10-leger .v10-cell { will-change: auto; }

/* --- 4. Boutons flottants sur téléphone ------------------------------
   « L'assistant Voilà », avec son libellé, mesurait 178 px de large : il
   passait sur les boutons des pages (« Voir les biens » sur l'accueil).
   Le bouton « haut de page », caché sous WhatsApp sur ordinateur, en
   dépassait ici de dix pixels — un coin blanc derrière le bouton orange.
   Sur téléphone : l'assistant devient un carré de 48 px, comme WhatsApp
   juste dessous (son nom reste lu par les lecteurs d'écran), et le bouton
   « haut de page » est retiré. Même régime pour un téléphone tenu à
   l'horizontale, où la hauteur manque encore plus. */
@media (max-width: 640px), (max-height: 520px) and (orientation: landscape) {
  .chat-fab { width: 48px; height: 48px; padding: 0; gap: 0; right: 14px; bottom: 74px; }
  .chat-fab-txt { display: none; }
  .wa-btn { right: 14px; bottom: 14px; width: 48px; height: 48px; }
  .top-btn { display: none; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .pl-fab { left: 14px; bottom: 14px; width: 44px; height: 44px; padding: 0; justify-content: center; }
  .pl-fab-txt { display: none; }
  /* le panneau de l'assistant se range à gauche de ses boutons et prend
     toute la hauteur disponible */
  .chat-panel { right: 74px; bottom: 10px; max-height: calc(100vh - 20px); }
}

/* Téléphone tenu à l'horizontale : l'écart de 84 px entre les cases, prévu
   pour les grands écrans, faisait dépasser la mosaïque de 6 px en haut et
   en bas. Écart ramené à 40 px quand la hauteur manque. */
@media (max-height: 520px) {
  .v10-grid { --v10-gap: 40px; }
}

/* --- 5. Pied de page : ne pas finir sous les boutons -----------------
   Les dernières lignes (mentions légales, crédit) restaient cachées par
   la playlist et WhatsApp, impossibles à lire même tout en bas. */
@media (max-width: 640px) {
  .site-footer { padding-bottom: 76px; }
}

/* --- 6. Comparateur : la liste « Ajouter un bien » -------------------
   Elle prenait la largeur de son plus long intitulé (480 px) et faisait
   déborder toute la page de 128 px sur téléphone : on pouvait la faire
   glisser de côté. Elle ne dépasse plus la largeur de l'écran. */
#cmp-select { max-width: 100%; }

/* ============================================================
   06/10 — retours de Camille sur les biens.
   ============================================================ */

/* « Mettre la référence stp et sur tél aussi on ne l'a pas » : la référence
   s'écrit sous chaque carte, à côté de la ville, en orange. */
.card-ref {
  font-family: var(--knock); font-size: 15px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent);
}
.biens-v6 .card .card-ref { grid-column: 1 / -1; grid-row: 3; margin: 2px 0 0; }
.biens-v6 .card .card-meta { grid-row: 4; }

/* « Référence en + grand et la mettre vers les caractéristiques en bas ». */
.fiche-ref-carac {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  margin: 0 0 18px; padding: 12px 16px;
  background: var(--white); border-left: 4px solid var(--accent);
}
.fiche-ref-carac span {
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
}
.fiche-ref-carac strong {
  font-family: var(--knock); font-weight: 400; font-size: clamp(26px, 3vw, 36px);
  line-height: 1; letter-spacing: .06em; color: var(--accent); overflow-wrap: anywhere;
}

/* « Rajouter une barre de recherche pour chercher la référence ou un prix ». */
.f-cherche { display: block; flex: 1 1 220px; min-width: 0; }
.f-cherche input {
  width: 100%; font-family: var(--sans); font-size: 15px; font-weight: 600;
  color: var(--ink); background: var(--white);
  border: 1.5px solid var(--line); border-radius: 0; padding: 9px 12px;
}
.f-cherche input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(234, 91, 12, .2); }
.biens-v6 .filters-orange .f-cherche { flex: 1 1 100%; }
.biens-v6 .filters-orange .f-cherche input { border-color: var(--white); padding: 11px 14px; }
.biens-v6 .filters-orange .f-cherche input:focus { box-shadow: 0 0 0 3px rgba(255, 255, 255, .55); }
@media (min-width: 900px) { .biens-v6 .filters-orange .f-cherche { flex: 0 1 300px; } }

/* ============================================================
   06/10 — « Louer ou gérer », « Comment ça se passe » : Camille,
   « revoir la mise en page ». Les quatre encadrés pâles deviennent un
   fil : numéros en carrés orange reliés par un trait.
   ============================================================ */
.lg-fil {
  list-style: none; margin: 0; padding: 0; position: relative;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 34px);
}
.lg-fil::before {           /* le fil, à mi-hauteur des carrés */
  content: ""; position: absolute; left: 0; right: 0; top: 31px; height: 2px; background: var(--blush);
}
.lg-pas { position: relative; }
.lg-pas-n {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; background: var(--accent); color: var(--white);
  font-family: var(--knock); font-size: 34px; line-height: 1; letter-spacing: .02em;
  box-shadow: 0 0 0 8px var(--cream);          /* le fil s'interrompt autour du carré */
}
.lg-pas h3 {
  margin: 18px 0 8px; font-family: var(--display); font-weight: 500;
  font-size: clamp(1.15rem, 1.5vw, 1.4rem); line-height: 1.2; color: var(--accent);
}
.lg-pas p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink); }
@media (max-width: 860px) {
  .lg-fil { grid-template-columns: 1fr; gap: 26px; }
  .lg-fil::before { left: 27px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .lg-pas { display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: start; }
  .lg-pas-n { width: 56px; height: 56px; font-size: 30px; }
  .lg-pas h3 { margin-top: 4px; }
}

/* ============================================================
   « Nos plus belles rénovations » — 06/10 : book ; 07/10 (Camille, de
   nouveau : « pouvoir mettre plus de photos avec un genre de book ») :
   PLANCHE DE PHOTOS. Un chantier à la fois (onglets) ; toutes ses photos
   sur une feuille blanche, en grille ; un clic les ouvre en grand dans
   une visionneuse sur fond crème.
   ============================================================ */
.rlivre { max-width: 980px; margin: 0 auto; }
.rlivre-onglets { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 18px; }
.rlivre-onglet {
  display: grid; gap: 3px; text-align: left; padding: 10px 18px; cursor: pointer;
  background: var(--white); color: var(--accent); border: 1.5px solid var(--accent); border-radius: 0;
  transition: background .2s, color .2s;
}
.rlivre-onglet strong { font-family: var(--display); font-weight: 500; font-size: 17px; line-height: 1.2; }
.rlivre-onglet span {
  font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft);
}
.rlivre-onglet:hover { background: var(--blush-soft); }
.rlivre-onglet.on { background: var(--accent); color: var(--white); }
.rlivre-onglet.on span { color: var(--white); }
.rlivre-onglet:focus-visible { outline: 3px solid rgba(234, 91, 12, .45); outline-offset: 2px; }

.rplanche[hidden] { display: none; }
/* la feuille : papier blanc, deux feuilles qui dépassent dessous */
.rplanche-feuille {
  background: var(--white); padding: 16px 16px 18px; margin: 0 12px 12px 0;
  box-shadow: 6px 6px 0 -1px var(--white), 6px 6px 0 0 var(--blush),
              12px 12px 0 -1px var(--white), 12px 12px 0 0 var(--blush),
              0 26px 44px rgba(120, 60, 20, .16);
}
.rplanche-tete { margin: 0 0 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.rplanche-tete strong { font-family: var(--display); font-weight: 500; font-size: clamp(1.15rem, 1.6vw, 1.45rem); color: var(--accent); }
.rplanche-tete .micro { text-transform: uppercase; letter-spacing: .12em; color: var(--ink-soft); }
.rplanche-compte { margin-left: auto; font-family: var(--knock); font-size: 15px; letter-spacing: .08em; color: var(--accent); }
.rplanche-grille { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 10px; }
.rplanche-photo {
  position: relative; display: block; padding: 0; border: 0; border-radius: 0; cursor: zoom-in;
  overflow: hidden; background: var(--blush-soft); aspect-ratio: 3 / 2;
}
.rplanche-portrait .rplanche-photo { aspect-ratio: 3 / 4; }
.rplanche-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.rplanche-photo:hover img, .rplanche-photo:focus-visible img { transform: scale(1.04); }
.rplanche-photo:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.rplanche-photo .renov-tag { position: absolute; left: 10px; top: 10px; z-index: 1; font-size: 11.5px; padding: 5px 11px; }
.rplanche-plus {
  position: absolute; right: 10px; bottom: 10px; width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--white); font-family: var(--sans); font-size: 24px; font-weight: 500; line-height: 1;
  box-shadow: 0 6px 14px rgba(120, 60, 20, .25);
}
/* peu de photos : la planche ne s'étale pas plus haut que l'écran */
.rplanche-paysage .rplanche-grille[style*="--cols:1"] { max-width: 760px; margin: 0 auto; }
.rplanche-portrait .rplanche-grille[style*="--cols:1"] { max-width: 380px; margin: 0 auto; }
.rplanche-portrait .rplanche-grille[style*="--cols:2"] { max-width: 760px; margin: 0 auto; }
.rplanche-portrait .rplanche-grille[style*="--cols:3"] { max-width: 880px; margin: 0 auto; }
@media (max-width: 760px) {
  .rlivre-onglets { justify-content: stretch; }
  .rlivre-onglet { flex: 1 1 100%; }
  .rplanche-feuille { padding: 10px 10px 12px; margin: 0 8px 8px 0;
    box-shadow: 4px 4px 0 -1px var(--white), 4px 4px 0 0 var(--blush),
                8px 8px 0 -1px var(--white), 8px 8px 0 0 var(--blush), 0 18px 30px rgba(120, 60, 20, .16); }
  .rplanche-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .rplanche-grille[style*="--cols:1"] { grid-template-columns: 1fr; }
  .rplanche-compte { margin-left: 0; flex-basis: 100%; }
  .rplanche-plus { width: 32px; height: 32px; font-size: 20px; right: 6px; bottom: 6px; }
  .rplanche-photo .renov-tag { left: 6px; top: 6px; font-size: 10px; padding: 4px 8px; }
}

/* ---- la visionneuse : la photo en grand, sur fond crème ---- */
html.rvisio-ouverte { overflow: hidden; }
.rvisio[hidden] { display: none; }
.rvisio {
  position: fixed; inset: 0; z-index: 1300;
  display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; align-items: center; justify-items: center;
  padding: 18px 10px; background: rgba(255, 244, 236, .97);
  animation: rvisio-entre .22s ease both;
}
@keyframes rvisio-entre { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rvisio { animation: none; } .rplanche-photo img { transition: none; } }
.rvisio-cadre {
  grid-column: 2; position: relative; margin: 0; padding: 12px 12px 0; background: var(--white);
  box-shadow: 0 30px 60px rgba(120, 60, 20, .28); max-width: 100%;
}
.rvisio-cadre img { display: block; max-width: 100%; max-height: calc(100vh - 150px); width: auto; height: auto; margin: 0 auto; }
@supports (height: 100svh) { .rvisio-cadre img { max-height: calc(100svh - 150px); } }
.rvisio-tag { position: absolute; left: 24px; top: 24px; z-index: 1; font-size: 12.5px; padding: 6px 13px; }
.rvisio-legende {
  padding: 12px 4px 14px; text-align: center;
  font-family: var(--knock); font-size: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
}
.rvisio-fl, .rvisio-fermer {
  width: 52px; height: 52px; border: 0; border-radius: 0; cursor: pointer;
  background: var(--accent); color: var(--white); font-size: 30px; line-height: 1;
  box-shadow: 0 8px 18px rgba(120, 60, 20, .25);
}
.rvisio-prec { grid-column: 1; grid-row: 1; } .rvisio-suiv { grid-column: 3; grid-row: 1; }
.rvisio-cadre { grid-row: 1; }
.rvisio-fermer { position: absolute; right: 16px; top: 16px; z-index: 2; }
.rvisio-fl[hidden] { display: none; }
.rvisio-fl:focus-visible, .rvisio-fermer:focus-visible { outline: 3px solid var(--white); outline-offset: -6px; }
@media (max-width: 760px) {
  .rvisio { grid-template-columns: minmax(0, 1fr); padding: 70px 8px 84px; }
  .rvisio-cadre { grid-column: 1; padding: 8px 8px 0; }
  .rvisio-cadre img { max-height: calc(100vh - 230px); }
  .rvisio-fl { position: absolute; bottom: 18px; grid-column: auto; width: 56px; height: 52px; }
  .rvisio-prec { left: calc(50% - 64px); } .rvisio-suiv { right: calc(50% - 64px); }
  .rvisio-tag { left: 16px; top: 16px; }
}

/* Les filtres sur téléphone : la liste « Ville » (« Carcassonne et
   alentours ») était plus large que l'écran et sortait du bandeau orange.
   Deux colonnes régulières, la recherche et « Réinitialiser » sur toute la
   largeur. */
.biens-v6 .filters-orange select { max-width: 100%; min-width: 0; }
@media (max-width: 640px) {
  .biens-v6 .filters-orange { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .biens-v6 .filters-orange select { width: 100%; }
  .biens-v6 .filters-orange .f-cherche,
  .biens-v6 .filters-orange .f-reset-blush { grid-column: 1 / -1; }
}

/* ============================================================
   06/10 — « Regarder à ce que ce soit vraiment responsive avec le
   téléphone !!! » (Camille). Passe sur les 23 pages en 390 px de large,
   captures pleine page relues une à une. Ce qui clochait :
   ============================================================ */

/* 1. La carte & le city guide : titres et textes collaient au bord de
   l'écran (le conteneur .wrap n'a pas de marge latérale, et sous 1280 px
   de large il touche les bords). Le titre, trop long, sortait de l'écran. */
.guide-uni .wrap { padding-left: var(--pad); padding-right: var(--pad); }
.guide-uni .carte-head h1 { font-size: clamp(30px, 8vw, 54px); line-height: 1.08; overflow-wrap: anywhere; }
.guide-uni .map-monopoly { overflow: hidden; }

/* 2. Voilà Patrimoine, le nuancier des matières : sur téléphone les cinq
   matières devaient se ranger en deux colonnes, mais une règle posée plus
   tard (le nuancier devenu un lien) annulait la grille : cinq dalles de
   460 px empilées, deux mètres de défilement. La grille est rétablie. */
@media (max-width: 900px) {
  a.pfan-nuancier { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
  a.pfan-nuancier .pfan-card { aspect-ratio: 4 / 3; }
  a.pfan-nuancier .pfan-card:nth-child(5) { max-width: none; aspect-ratio: 8 / 3; }
  a.pfan-nuancier .pfan-label { font-size: 11px; }
}

/* 3. Pied de page : « Mentions légales », « Barème d'honoraires » se
   coupaient au milieu de leur nom. Chaque lien reste d'un bloc, et les
   liens du pied de page sont plus faciles à viser du doigt. */
.foot-legal { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.foot-legal a { margin-left: 0; white-space: nowrap; }
@media (max-width: 640px) {
  .site-footer a { display: inline-block; padding-top: 4px; padding-bottom: 4px; }
}


/* ============================================================
   06/10 — musique sur iPhone et iPad (voir le module playlist d'app.js).
   Le lecteur YouTube doit y être touché du doigt pour démarrer : il
   s'affiche dans un petit volet au-dessus du bouton de la playlist.
   Replié, il garde sa place et sa taille (opacité 0) : le déplacer ou le
   réduire le relancerait.
   ============================================================ */
.pl-audio.pl-ios {
  left: 14px; bottom: 70px; width: min(300px, calc(100vw - 90px)); height: auto;
  z-index: 1150; overflow: hidden; background: var(--white);
  border: 2px solid var(--accent); box-shadow: 0 14px 34px rgba(60, 35, 15, .28);
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.pl-audio.pl-ios.pl-visible { opacity: 1; pointer-events: auto; }
.pl-audio.pl-ios iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.pl-volet-tete { display: none; }
.pl-ios .pl-volet-tete {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; background: var(--accent); color: var(--white);
  font-family: var(--sans); font-size: 12.5px; font-weight: 600; line-height: 1.3;
}
.pl-volet-reduire {
  flex: 0 0 auto; padding: 6px 10px; border: 1.5px solid var(--white); border-radius: 0;
  background: transparent; color: var(--white); font: inherit; cursor: pointer;
}

/* ============================================================
   06/10 — fiche bien, « Diagnostic énergétique ». Camille : « pas beau »,
   puis le modèle à suivre (l'étiquette de son logiciel). Deux rangées
   centrées de sept petites cases à lettre blanche, la case du bien plus
   grande, la classe écrite dessous. Les deux rangées se placent côte à
   côte dès que la carte est assez large, l'une sous l'autre sinon.
   ============================================================ */
.dpe-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 34px; }
.dpe-jauge { flex: 0 1 auto; min-width: 0; text-align: center; }
.dpe-jauge-t { margin: 0 0 12px; font-family: var(--sans); font-size: 14.5px; font-weight: 700; color: var(--ink); }
.dpe-cases { display: flex; align-items: center; justify-content: center; gap: 4px; height: 46px; }
.dpe-case {
  display: flex; align-items: center; justify-content: center;
  width: clamp(26px, 8.2vw, 34px); height: 26px; border-radius: 0;
  font-family: var(--sans); font-size: 12.5px; font-weight: 700; line-height: 1; color: var(--white);
}
.dpe-case-encre { color: var(--ink); }
.dpe-case.on {
  width: clamp(36px, 11vw, 46px); height: 46px; font-size: 22px;
  box-shadow: 0 6px 14px rgba(120, 60, 20, .22);
}
.dpe-jauge-v { margin: 10px 0 0; font-size: 14px; color: var(--ink-soft); }
.dpe-jauge-v strong { color: var(--ink) !important; font-size: 1.1em !important; font-weight: 700; }
.dpe-val2 { display: block; margin-top: 2px; font-size: 12.5px; }
.fiche-trio .dpe-note { text-align: center; }

/* ============================================================
   Retours de Camille du 07/10 (lot de onze tickets)
   ============================================================ */

/* --- « J'aime pas trop comment c'est fait, c'est pas joli » (la référence
   de la fiche). Le pavé blanc à grosse barre orange, posé seul au-dessus du
   tableau, faisait pièce rapportée. La référence devient une étiquette en
   deux tons — onglet orange « Référence », nom en capitales — alignée à
   droite du titre « Caractéristiques », sur la même ligne. ---------------- */
.fiche-carac-tete {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 24px; margin: 0 0 20px;
}
.fiche-carac-blush .fiche-carac-tete h3 { margin: 0; }
.fiche-ref-carac {
  display: inline-flex; align-items: stretch; flex-wrap: nowrap; gap: 0;
  max-width: 100%; margin: 0; padding: 0;
  background: none; border: 1.5px solid var(--accent); border-left-width: 1.5px;
}
.fiche-ref-carac span {
  display: flex; align-items: center; padding: 0 12px;
  background: var(--accent); color: var(--cream);
  font-family: var(--sans); font-size: 10.5px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; white-space: nowrap;
}
.fiche-ref-carac strong {
  display: block; min-width: 0; padding: 8px 16px 6px;
  background: var(--cream); color: var(--accent);
  font-family: var(--knock); font-weight: 400; font-size: clamp(20px, 2.1vw, 25px);
  line-height: 1.1; letter-spacing: .1em; overflow-wrap: anywhere;
}

/* --- « Laisser un petit peu plus d'espace là, c'est très collé avec la
   section du dessous » (Comment ça se passe). La section n'avait aucune
   marge basse : le texte des étapes touchait le bloc rose du formulaire. -- */
.lg-sec-etapes { padding-bottom: clamp(44px, 6vw, 88px); }

/* --- « Mettre "Baisse de prix", "Nouveauté"… quand c'est le cas ». Les
   étiquettes se posent en haut à gauche de la photo (le cœur et « Comparer »
   sont à droite) ; elles s'empilent s'il y en a deux. ---------------------- */
.card-badges {
  position: absolute; top: 0; left: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  pointer-events: none;
}
.card-badges .badge { position: static; }
.badge-nouveaute { background: var(--accent); color: var(--white); }
.badge-baisse { background: var(--cream); color: #b34103; box-shadow: inset 0 0 0 1.5px var(--accent); }
.badge-baisse::before { content: "\2193\00a0"; }

/* Filet de sécurité : une photo du flux qui ne répond plus ne laisse pas
   son texte de remplacement s'afficher en travers de la carte. */
img.photo-absente { visibility: hidden; }
.photo-thumbs img.photo-absente { display: none; }

/* --- « Rajouter la loupe de recherche ici aussi » (l'en-tête). Le volet de
   recherche s'ouvre sous l'en-tête, calé à droite sous la loupe ; sa
   position verticale est donnée par app.js (--hd-bas). --------------------- */
.hd-loupe { cursor: pointer; }
.hd-loupe[aria-expanded="true"] { opacity: 1; color: var(--accent-deep); }
.hd-cherche {
  position: fixed; top: var(--hd-bas, 72px); right: var(--pad); z-index: 899;
  display: flex; align-items: stretch; gap: 8px;
  width: min(430px, calc(100vw - 2 * var(--pad)));
  padding: 12px; background: var(--cream);
  border: 2px solid var(--accent); border-top: 0;
  box-shadow: 0 14px 30px rgba(120, 40, 0, .16);
}
.hd-cherche[hidden] { display: none; }
.hd-cherche input {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--sans); font-size: 16px; font-weight: 600; color: var(--ink);
  background: var(--white); border: 1.5px solid var(--line); border-radius: 0; padding: 9px 12px;
}
/* La croix du navigateur ferait doublon avec le bouton « fermer ». */
.hd-cherche input::-webkit-search-cancel-button { display: none; }
.hd-cherche input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(234, 91, 12, .2); }
.hd-cherche-ok {
  flex: none; cursor: pointer; border: 0; border-radius: 0; padding: 0 16px;
  background: var(--accent); color: var(--white);
  font-family: var(--knock); font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
}
.hd-cherche-ok:hover { background: var(--accent-deep); }
.hd-cherche-x {
  flex: none; cursor: pointer; width: 38px; border: 1.5px solid var(--line); border-radius: 0;
  background: none; color: var(--accent); font-size: 22px; line-height: 1;
}
.hd-cherche-x:hover { border-color: var(--accent); }
.hd-cherche-ok:focus-visible, .hd-cherche-x:focus-visible { outline: 3px solid var(--accent-deep); outline-offset: 2px; }
/* Une icône de plus dans l'en-tête : sur téléphone, le logo n'avait plus sa
   place et s'écrasait (71 px au lieu de 80 à 375 px de large, 16 px à 320).
   La colonne des liens, masquée, gardait ses deux gouttières de 26 px : on
   les resserre, et sous 350 px le mot « Menu » laisse la place à ses deux
   traits. */
@media (max-width: 760px) {
  .site-header { column-gap: 10px; }
  .site-header .hd-right { gap: 14px; }
}
@media (max-width: 350px) {
  .site-header .hd-right { gap: 10px; }
  .site-header .burger-txt { display: none; }
}

/* --- « Rajouter à cocher estimation ou avis de valeur* » (page estimation
   et formulaire « Pourquoi pas Voilà »), avec la mention du tarif. Dans le
   formulaire fin, tous les champs sont étirés en pleine largeur : les cases
   à cocher reprennent ici leur taille de case. ----------------------------- */
.fv-choix { border: 0; margin: 0; padding: 0; min-width: 0; }
.fv-choix legend { padding: 0; margin: 0 0 8px; }
.fv-case {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 22px 6px 0; cursor: pointer;
}
.fiche-visite-form .fv-case input {
  display: inline-block; flex: none; width: 18px; height: 18px; margin: 0; padding: 0;
  accent-color: var(--accent);
}
.fv-l .fv-case span {
  font-size: 15px; font-weight: 500; color: var(--ink);
  text-transform: none; letter-spacing: 0;
}
.fv-note, .vf-note-tarif {
  margin: 4px 0 0; font-family: var(--sans); font-size: 12.5px; line-height: 1.5;
  font-weight: 400; font-style: italic; text-transform: none; letter-spacing: 0;
  color: var(--ink-soft);
}
.vf-note-tarif { grid-column: 1 / -1; margin: 0; font-size: 13px; }


/* --- 07/10 — « Voici la vidéo avis, intègre-la ». Les trois cases vides en
   pointillés (.video-ph) laissent la place aux vraies vidéos. Une seule pour
   l'instant : elle est centrée, en grand ; à deux ou trois, elles se rangent
   en colonnes. Cadre au format 4/3 de la vidéo, coins carrés, bouton de
   lecture orange par-dessus l'affiche. ----------------------------------- */
.videos-avis-grid.vag-1 { grid-template-columns: minmax(0, 640px); justify-content: center; max-width: none; }
.videos-avis-grid.vag-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.avis-video { margin: 0; text-align: left; }
.avis-video-cadre {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--blush); border: 2px solid var(--accent);
  box-shadow: 0 14px 30px rgba(201, 74, 5, .16);
}
.avis-video video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; object-fit: cover; background: var(--ink);
}
.avis-video-jouer {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: clamp(64px, 9vw, 84px); height: clamp(64px, 9vw, 84px);
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 0; cursor: pointer;
  background: var(--accent); color: var(--white);
  box-shadow: 0 8px 22px rgba(120, 40, 0, .3);
  transition: background .25s, transform .25s;
}
.avis-video-jouer svg { width: 46%; height: 46%; }
.avis-video-jouer:hover { background: var(--accent-deep); transform: translate(-50%, -50%) scale(1.06); }
.avis-video-jouer:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
.avis-video.joue .avis-video-jouer { display: none; }
.avis-video figcaption { margin-top: 12px; font-family: var(--sans); font-size: 14px; color: var(--ink-soft); }
.avis-video figcaption strong {
  display: block; font-family: var(--display); font-weight: 500;
  font-size: clamp(19px, 2vw, 23px); color: var(--accent-deep);
}
@media (max-width: 900px) {
  .videos-avis-grid.vag-2 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .avis-video-jouer { transition: none; }
}

/* ============================================================
   Retours de Camille du 08/10 — surtout sur téléphone
   ============================================================ */

/* --- #39 « Enlève cet effet sur les photos de ces pages » : au survol, les
   photos viraient à l'orange (filtre sépia + teinte, posé le 11/09 sur les
   cartes, les mosaïques, le journal et les pages services) et zoomaient.
   « Que ça reste toujours la photo de base » : plus de virage de couleur
   nulle part ; sur les pages services, plus de zoom non plus. ------------ */
@media (pointer: fine) {
  .card:hover img, .mos-tile:hover img, .jnl-tuile:hover img,
  .art-card:hover img, .svc-photo:hover img { filter: none; }
  .svc-photo:hover img { transform: none; }
}

/* --- « Galère de mettre la musique » : sur téléphone, le bouton n'était
   qu'un carré avec ▶, qu'on prenait pour celui d'une vidéo. Il dit
   désormais « Musique ». Sur iPhone, le volet où il faut toucher la vidéo
   s'élargit à tout l'écran, et la consigne se lit d'un coup d'œil. ------- */
.pl-fab-court { display: none; }
@media (max-width: 640px), (max-height: 520px) and (orientation: landscape) {
  .pl-fab { width: auto; padding: 0 13px 0 11px; gap: 7px; }
  .pl-fab-court {
    display: inline; font-family: var(--sans); font-size: 12.5px; font-weight: 700;
    letter-spacing: .04em;
  }
}
@media (max-width: 640px) {
  .pl-audio.pl-ios { left: 14px; right: 14px; width: auto; bottom: 68px; }
  .pl-ios .pl-volet-tete { font-size: 14px; padding: 10px 12px; }
}

/* --- « Le footer un peu long » (téléphone) : les trois listes de liens
   (Explorer, Nos services, Outils — seize liens) se replient ; leur titre
   devient un bouton qui les ouvre (app.js). Le timbre se range à côté du
   logo au lieu d'occuper sa propre ligne. -------------------------------- */
.foot-col-bouton {
  all: unset; display: inline-flex; align-items: center; gap: 10px; cursor: default;
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
}
.foot-col-plus { display: none; }
@media (max-width: 640px) {
  .site-footer .foot-top { display: flex; flex-direction: column; gap: 0; padding-bottom: 14px; }
  .site-footer .foot-brand {
    display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 14px;
    padding-bottom: 14px;
  }
  .site-footer .foot-brand .foot-timbre { grid-row: 1 / 3; grid-column: 2; width: 74px; margin: 0; }
  .foot-replie .foot-links { border-top: 1px solid rgba(201, 74, 5, .25); }
  .foot-replie .foot-col-t { margin: 0; align-self: stretch; width: 100%; }
  .foot-replie .foot-col-bouton {
    display: flex; justify-content: space-between; width: 100%; box-sizing: border-box;
    padding: 13px 0; cursor: pointer;
  }
  .foot-replie .foot-col-bouton:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .foot-replie .foot-col-plus { display: inline; font-size: 18px; line-height: 1; transition: transform .2s; }
  .foot-replie .foot-links.ouvert .foot-col-plus { transform: rotate(45deg); }
  .foot-replie .foot-links:not(.ouvert) > a { display: none; }
  .foot-replie .foot-links.ouvert { padding-bottom: 10px; }
  .foot-replie .foot-info { border-top: 1px solid rgba(201, 74, 5, .25); padding-top: 14px; }
}

/* --- Pourquoi pas Voilà, téléphone ---------------------------------------
   « Les photos du moodboard sont les unes après les autres, ça rend pas
   bien » : la mosaïque reste une mosaïque, trois colonnes comme sur
   ordinateur, les mots plus petits. « Certains éléments pas centrés,
   section 1 par exemple » : les quatre piliers passent sur une colonne,
   centrés comme le titre au-dessus ; le cinquième outil, seul sur sa ligne,
   prend toute la largeur au lieu de rester calé à gauche. ---------------- */
@media (max-width: 640px) {
  .pv-agence .mosaic-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 20px 0; }
  .pv-agence .mosaic-grid .media-photo-sq { min-height: 0; border-radius: 0; }
  .pv-agence .mosaic-tile.mosaic-word {
    min-height: 0; aspect-ratio: 1 / 1; font-size: 12px; letter-spacing: .14em;
  }
  .pv-agence a.mosaic-tile.mosaic-word::after { display: none; }
  .pv-piliers { grid-template-columns: 1fr; gap: 12px; }
  .pv-pilier { text-align: center; padding: 20px 18px 18px; }
  .pv-pilier .pv-ico { margin: 0 auto; display: block; }
  .pv-outils-l li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .pv-visi .home-h2 { text-align: center; }
  .pv-chiffre { align-items: center; text-align: center; }
  .pv-chiffre span { max-width: 26ch; }
}

/* --- Pages services (Vente, Location, Gestion, Travaux), téléphone :
   « pas optimisé, ça fait pas beau ». Les photos restaient à la largeur
   prévue pour l'ordinateur, calées à gauche dans leur bande, avec un vide à
   droite ; les numéros d'étape mangeaient une colonne entière. Les photos
   prennent toute la largeur, au format 4/3 ; le numéro d'étape se pose sur
   le coin de sa carte ; les liens « Découvrir aussi » font la largeur de
   l'écran. -------------------------------------------------------------- */
@media (max-width: 640px) {
  .svc-wire .svc-duo, .svc-wire .svc-duo-inverse { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .svc-wire .svc-photo, .svc-wire .svc-main .svc-photo {
    width: 100%; margin: 0; justify-self: stretch; align-self: start;
  }
  .svc-wire .svc-photo img {
    width: 100%; max-width: none; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  }
  .svc-wire .svc-steps { gap: 16px; }
  .svc-wire .svc-step { display: block; position: relative; }
  .svc-wire .svc-step-num {
    position: absolute; top: -10px; left: 14px; z-index: 1; margin: 0;
    width: 32px; height: 32px; font-size: .95rem;
  }
  .svc-wire .svc-step-card { padding: 26px 18px 18px; }
  .svc-wire .svc-cta { margin-left: 0; justify-content: center; }
  .svc-wire .svc-cta .btn-rect { flex: 1 1 100%; text-align: center; }
  .svc-wire .svc-autres { display: grid; grid-template-columns: 1fr; gap: 10px; width: 100%; }
  .svc-wire .svc-autre { width: 100%; box-sizing: border-box; justify-content: space-between; }
}

/* --- Le journal de Voilà, téléphone : « on perd l'aspect journal ». Sur
   petit écran, les colonnes avaient été retirées et le texte remis au fer
   à gauche : on lisait une page web, pas une gazette. On rend au papier ce
   qui le fait reconnaître : texte justifié et coupé en fin de ligne,
   illustration d'ouverture encadrée par le texte, petites annonces en deux
   colonnes séparées d'un filet, photos du reportage en planche de deux,
   filets entre les rubriques du carnet. ---------------------------------- */
@media (max-width: 640px) {
  .jnl26-colonnes p, .jnl26-lettre-txt, .jnl26-carnet-col p, .jnl26-deux-cols {
    text-align: justify; hyphens: auto; -webkit-hyphens: auto;
  }
  .jnl26-colonnes p { font-size: 16px; line-height: 1.48; margin-bottom: 10px; }
  .jnl26-art-corps { display: block; }
  .jnl26-art-corps::after { content: ""; display: block; clear: both; }
  .jnl26-art-photo {
    float: left; width: 46% !important; margin: 4px 14px 6px 0;
    border: 1px solid rgba(23, 20, 15, .25); padding: 3px; background: var(--white);
  }
  .jnl26-art-photo img { width: 100%; }
  .jnl26-breves { column-count: 2; column-gap: 18px; column-rule: 1px solid rgba(23, 20, 15, .16); }
  .jnl26-breves li { break-inside: avoid; }
  .jnl26-breves li:first-child, .jnl26-breves li { border-top: 0; border-bottom: 1px dotted rgba(23, 20, 15, .28); }
  .jnl26-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
  .jnl26-photos figcaption strong { font-size: 15px; }
  .jnl26-photos figcaption .micro { font-size: 10px; letter-spacing: .06em; }
  .jnl26-lettre { border-bottom: 1px solid rgba(23, 20, 15, .16); padding-bottom: 14px; }
  .jnl26-lettre:last-child { border-bottom: 0; }
}

/* --- Voilà Patrimoine. « Mettre le titre avant les photos, c'est bizarre
   sinon » : sur téléphone et tablette, les photos passaient au-dessus du
   titre (order: -1) ; elles reviennent dessous. « Le pantone des matières
   disparaît en format téléphone » : sous 900 px, l'éventail devenait une
   grille de dalles plates. L'éventail revient, en plus petit et plus
   resserré, pour tenir dans la largeur. --------------------------------- */
@media (max-width: 1100px) {
  .patri26-hero-compo { order: 0; margin-top: 26px; }
}
@media (max-width: 900px) {
  a.pfan-nuancier, .pfan-nuancier {
    display: block; position: relative; height: calc(min(40vw, 230px) * 1.3 + 40px);
    max-width: 100%; margin: 26px auto 20px; overflow: visible;
  }
  a.pfan-nuancier .pfan-card, .pfan-card {
    position: absolute; left: 50%; top: 10px; width: min(40vw, 230px);
    margin-left: calc(min(40vw, 230px) / -2); aspect-ratio: 640 / 830;
    max-width: none; transform-origin: 50% -45%;
  }
  a.pfan-nuancier .pfan-card:nth-child(5) { aspect-ratio: 640 / 830; max-width: none; margin: 0 0 0 calc(min(40vw, 230px) / -2); grid-column: auto; }
  .pfan-brique { transform: rotate(-22deg) !important; }
  .pfan-acier  { transform: rotate(-11deg) !important; }
  .pfan-beton  { transform: rotate(0deg) !important; }
  .pfan-bois   { transform: rotate(11deg) !important; }
  .pfan-pierre { transform: rotate(22deg) !important; }
  a.pfan-nuancier .pfan-label, .pfan-label {
    left: auto; right: 6%; width: 60%; bottom: 10px; text-align: right; font-size: 9.5px;
  }
}

/* --- Les biens, téléphone : les filtres repliés derrière un bouton. ----- */
.f-plier { display: none; }
@media (max-width: 640px) {
  .biens-v6 .filters-orange .f-plier {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 1.5px solid var(--white); border-radius: 0; background: transparent; color: var(--white);
    font-family: var(--knock); font-size: 14px; letter-spacing: .14em; text-transform: uppercase;
    padding: 0 16px; cursor: pointer; align-self: stretch; min-height: 44px;
  }
  .biens-v6 .filters-orange .f-plier[hidden] { display: none; }
  .biens-v6 .filters-orange .f-plier::after { content: "+"; font-family: var(--sans); font-size: 18px; letter-spacing: 0; }
  .biens-v6 .filters-orange .f-plier[aria-expanded="true"]::after { content: "–"; }
  .f-plier-n {
    min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--white); color: var(--accent); font-family: var(--sans); font-size: 12px; letter-spacing: 0;
  }
  .f-plier-n[hidden] { display: none; }
  .biens-v6 .filters-orange.f-avec-plier { grid-template-columns: minmax(0, 1fr) auto; }
  .biens-v6 .filters-orange.f-avec-plier .f-cherche { grid-column: 1; }
  .biens-v6 .filters-orange.f-avec-plier .f-plier { grid-column: 2; }
  .biens-v6 .filters-orange.f-replies > select,
  .biens-v6 .filters-orange.f-replies > .f-reset-blush { display: none; }
}

/* --- Fiche d'un bien : « les photos en dessous sont en portrait, pas ouf :
   les mettre en format carré, même si plus petites, et des flèches sur la
   photo principale ». Sur téléphone, la rangée de vignettes héritait de la
   hauteur de la colonne d'ordinateur (320 px) : 120 × 320, des portraits.
   Vignettes carrées partout — deux par rang sur ordinateur, une rangée qui
   défile sur téléphone — et deux flèches carrées sur la photo, avec le
   numéro de la photo. ----------------------------------------------------- */
.fiche-wire .thumbs-col {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: min-content;
  align-content: start; gap: 8px;
}
.fiche-wire .thumbs-col img { aspect-ratio: 1 / 1; width: 100%; height: auto; }
@media (max-width: 900px) {
  .fiche-wire .thumbs-col {
    display: flex; flex-direction: row; height: auto; gap: 6px;
    overflow-x: auto; overflow-y: hidden; padding-bottom: 4px;
  }
  .fiche-wire .thumbs-col img { width: 64px; height: 64px; flex: 0 0 64px; }
}
.pm-fleche {
  position: absolute; top: 50%; z-index: 3; transform: translateY(-50%);
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 0; cursor: pointer; padding: 0;
  background: rgba(255, 248, 243, .92); color: var(--accent);
  box-shadow: 0 6px 16px rgba(23, 20, 15, .18); transition: background .2s, color .2s;
}
.pm-fleche svg { width: 22px; height: 22px; }
.pm-fleche:hover { background: var(--accent); color: var(--white); }
.pm-fleche:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.pm-prec { left: 12px; }
.pm-suiv { right: 12px; }
.pm-compte {
  position: absolute; right: 12px; bottom: 12px; z-index: 3; padding: 5px 10px;
  background: rgba(23, 20, 15, .62); color: var(--white);
  font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
}
/* Sur téléphone, les vignettes passent juste sous la photo, avant les
   boutons Favori / Comparer / Partager. */
@media (max-width: 900px) {
  .fiche-wire .fiche-photos { display: contents; }
  .fiche-wire .fiche-photos .photo-main { order: 1; }
  .fiche-wire .thumbs-col { order: 2; }
  .fiche-wire .fiche-photos .fiche-actions { order: 3; margin-top: 4px; }
}
@media (max-width: 640px) {
  .pm-fleche { width: 38px; height: 38px; }
  .pm-prec { left: 8px; } .pm-suiv { right: 8px; }
}

/* --- La machine à histoires : « un carré rose clair de nulle part à côté
   de l'image ». Le cadre du croquis prenait toute la largeur de la page
   sur téléphone, avec le fond rose des photos, alors que le croquis n'en
   occupe que 160 px. Le cadre colle au croquis, centré. ----------------- */
.mh-illu { background: none; width: fit-content; }
@media (max-width: 900px) {
  .mh-illu { margin: 18px auto; }
}

/* --- 08/10 — machine à histoires : « proposer des biens ou nous envoyer
   les réponses comme un formulaire ». Sous les biens proposés, un coupon
   « Recevoir ma sélection » : les réponses en clair, trois champs, un
   bouton. Coins carrés, fond blanc, filet orange en tête (même famille que
   le formulaire de visite des fiches). ------------------------------------ */
.mh-form {
  margin-top: clamp(30px, 4vw, 48px); padding: clamp(20px, 2.4vw, 30px);
  background: var(--white); border-top: 4px solid var(--accent);
  box-shadow: 0 10px 26px rgba(120, 40, 0, .08);
}
.mh-form-t { margin: 0 0 6px; font-family: var(--display); font-size: clamp(21px, 2.2vw, 27px); color: var(--accent); }
.mh-form-p { margin: 0 0 12px; font-size: 15px; line-height: 1.55; color: var(--ink-soft); max-width: 62ch; }
.mh-form-resume {
  margin: 0 0 18px; padding: 10px 14px; background: var(--cream);
  border-left: 3px solid var(--accent); font-family: var(--display); font-style: italic;
  font-size: 16px; color: var(--ink);
}
.mh-form-resume:empty { display: none; }
.mh-form-champs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; margin-bottom: 16px; }
.mh-form-champs label {
  display: block; font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--accent);
}
.mh-form-champs input {
  display: block; width: 100%; box-sizing: border-box; margin-top: 6px; padding: 10px 12px;
  border: 1px solid rgba(234, 91, 12, .35); border-radius: 0; background: var(--cream);
  font-family: var(--sans); font-size: 15px; color: var(--ink); text-transform: none; letter-spacing: 0;
}
.mh-form-champs input:focus { outline: none; border-color: var(--accent); background: var(--white); }
.mh-form .btn-rect { cursor: pointer; }
.mh-form .form-ok { margin: 12px 0 0; }
@media (max-width: 760px) {
  .mh-form-champs { grid-template-columns: 1fr; }
  .mh-form .btn-rect { width: 100%; text-align: center; }
}