/* ==========================================================================
   AMARA — direction 2026
   Une seule famille (Inter). Palette inspirée de Highstay : crème, sable, taupe, anthracite. Grille 12 colonnes,
   filets fins, photographies pleine largeur. Aucun ornement.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face { font-family: "Inter Fallback"; src: local("Arial"); size-adjust: 107%; ascent-override: 90%; descent-override: 22%; }

:root {
  --bg: #F9F8F4;              /* crème */
  --tint: #F4F2EB;            /* sable */
  --taupe: #9C9081;           /* taupe (décor, pied de page) */
  --taupe-d: #6F6557;         /* taupe foncé (boutons) — 5,4:1 avec le crème */
  --ink: #272727;             /* anthracite, à la place du noir */
  --ink-2: #6C6C6C;           /* texte secondaire — 4,9:1 sur --bg */
  --line: rgba(39, 39, 39, .14);
  --line-2: rgba(39, 39, 39, .75);
  --font: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --m: clamp(1rem, 2.6vw, 2.75rem);      /* marge latérale */
  --g: clamp(.75rem, 1.4vw, 1.25rem);    /* gouttière */
  --sec: clamp(4.75rem, 10.5vw, 9.5rem);     /* respiration verticale */
  --hd: 4rem;
  --ease: cubic-bezier(.2, .7, 0, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 5rem; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-optical-sizing: auto; font-size: clamp(1rem, .95rem + .15vw, 1.0625rem);
  line-height: 1.55; letter-spacing: -.006em; -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss03";
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: 400; }
ul, ol, dl, dd, figure { margin: 0; padding: 0; list-style: none; }
b { font-weight: 600; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
main:focus { outline: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; z-index: 100; top: .75rem; left: .75rem; padding: .75rem 1rem; background: var(--ink); color: var(--bg); transform: translateY(-200%); }
.skip:focus { transform: none; }

/* ---------- Grille ---------- */
.wrap { width: 100%; max-width: 120rem; margin-inline: auto; padding-inline: var(--m); }
.hero__grid, .split, .head2, .terr, .duo, .cta__row, .ft__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--g);
}
@media (min-width: 64em) {
  .hero__grid, .split, .head2, .terr, .duo, .cta__row, .ft__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

/* ---------- Typographie ---------- */
.h-display, .h-1, .h-2, .h-3 { text-transform: uppercase; font-weight: 400; text-wrap: balance; }
.h-display { font-size: clamp(2.75rem, .5rem + 7vw, 9rem); line-height: .94; letter-spacing: -.048em; }
.h-display--m { font-size: clamp(2.1rem, .9rem + 4.4vw, 5.75rem); line-height: 1.07; letter-spacing: -.04em; }
.h-1 { font-size: clamp(2.3rem, 1rem + 4.2vw, 5.75rem); line-height: 1.07; letter-spacing: -.042em; }
.h-2 { font-size: clamp(1.75rem, 1.1rem + 2.1vw, 3.25rem); line-height: 1.08; letter-spacing: -.035em; }
.h-3 { font-size: clamp(1.2rem, 1rem + .7vw, 1.75rem); line-height: 1.05; letter-spacing: -.02em; }
.lead { font-size: clamp(1.125rem, 1rem + .45vw, 1.5rem); line-height: 1.38; letter-spacing: -.015em; max-width: 32em; }
.fine { font-size: .8125rem; color: var(--ink-2); max-width: 40em; }

/* Étiquette de section : filet pleine largeur + carré plein */
.label {
  position: relative; display: flex; align-items: center; gap: .6rem;
  font-size: .75rem; font-weight: 500; letter-spacing: .045em; text-transform: uppercase; color: var(--ink-2);
  margin: 0 0 clamp(2rem, 4vw, 3.5rem);
}
.label::before { content: ""; width: .5rem; height: .5rem; background: var(--taupe); flex: none; }
.label[data-rule] { padding-top: 1rem; }
.label[data-rule]::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line);
  transform-origin: left; transition: transform 1.2s var(--ease);
}
.ft .label::before { display: none; }

/* ---------- Liens & boutons ---------- */
.arr { display: inline-block; transition: transform .5s var(--ease); }
.ln { position: relative; display: inline-block; }
.ln::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ease);
}
.ln:hover::after, .ln[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

.btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  min-height: 3.25rem; font-size: .8125rem; font-weight: 500; letter-spacing: .045em; text-transform: uppercase;
}
.btn:hover .arr, .more:hover .arr, .row a:hover .arr { transform: translateX(.35rem); }
.btn--dark { padding: 1rem 1.4rem; background: var(--taupe-d); color: var(--bg); transition: background-color .4s var(--ease); }
.btn--dark:hover { background: var(--ink); }
.btn--line { position: relative; padding: .5rem 0; min-height: 2.75rem; }
.btn--line::after { content: ""; position: absolute; left: 0; right: 0; bottom: .35rem; height: 1px; background: currentColor; transform-origin: left; transition: transform .6s var(--ease); }
.btn--line:hover::after { transform: scaleX(.3); }
.more { display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; font-size: .8125rem; font-weight: 500; letter-spacing: .045em; text-transform: uppercase; }

/* ---------- En-tête ---------- */
.hd { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--hd); transition: transform .6s var(--ease), background-color .4s, box-shadow .4s; }
.hd.is-solid { background: rgba(249, 248, 244, .92); box-shadow: 0 1px 0 var(--line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.hd.is-hidden { transform: translateY(-100%); }
.hd__in { height: 100%; max-width: 120rem; margin-inline: auto; padding-inline: var(--m); display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.wordmark { font-size: 1.3rem; font-weight: 600; letter-spacing: .14em; line-height: 1; }
.hd__nav ul { display: flex; gap: clamp(1.25rem, 2.6vw, 2.75rem); }
.hd__nav a, .hd__lang, .hd__menu { font-size: .8125rem; font-weight: 450; letter-spacing: .035em; text-transform: uppercase; }
.hd__nav .ln--strong { font-weight: 600; }
.hd__end { display: flex; align-items: center; gap: 1.5rem; }
.hd__lang { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--ink-2); }
.hd__lang b { color: var(--ink); font-weight: 450; }
.hd__lang:hover b { text-decoration: underline; text-underline-offset: .2em; }
.hd__menu { display: none; min-height: 2.75rem; padding: 0; background: none; border: 0; color: inherit; font-family: inherit; cursor: pointer; }
@media (min-width: 64em) { .hd__end { gap: 0; } .hd__lang { margin-left: clamp(1.25rem, 2.6vw, 2.75rem); } }

/* Menu mobile */
.menu { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0 var(--m) max(1.25rem, env(safe-area-inset-bottom)); border: 0; background: var(--bg); color: var(--ink); display: none; flex-direction: column; overflow-y: auto; }
.menu[open] { display: flex; animation: menu-in .5s var(--ease); }
@keyframes menu-in { from { opacity: 0; } to { opacity: 1; } }
.menu__top { height: var(--hd); display: flex; justify-content: space-between; align-items: center; flex: none; }
.menu__close { background: none; border: 0; font: inherit; font-size: .8125rem; letter-spacing: .035em; text-transform: uppercase; min-height: 2.75rem; padding: 0; color: inherit; cursor: pointer; }
.menu__list { margin-top: 2rem; border-top: 1px solid var(--line); }
.menu__list a { display: grid; grid-template-columns: 2.5rem 1fr; align-items: baseline; padding: 1.1rem 0; border-bottom: 1px solid var(--line); font-size: clamp(1.9rem, 8vw, 2.6rem); line-height: 1; letter-spacing: -.035em; text-transform: uppercase; }
.menu__list a[aria-current="page"] { color: var(--ink-2); }
.menu__n { font-size: .75rem; letter-spacing: .04em; color: var(--ink-2); }
.menu__foot { margin-top: auto; padding-top: 2.5rem; display: grid; gap: 1.5rem; }
.menu__foot .btn { width: 100%; }
.menu__links a { display: inline-flex; min-height: 2.75rem; align-items: center; font-size: .9375rem; }

/* ---------- 00 · Ouverture ---------- */
.hero { padding-top: calc(var(--hd) + clamp(3rem, 9vh, 7rem)); }
.hero__title { grid-column: 1 / -1; }
.ln-mask { display: block; overflow: hidden; padding-bottom: .04em; margin-bottom: -.04em; }
.ln-mask > span { display: inline-block; }
.hero__side { grid-column: 1 / -1; margin-top: 2.5rem; }
.hero__lead { font-size: clamp(1.0625rem, 1rem + .35vw, 1.3rem); line-height: 1.42; letter-spacing: -.012em; max-width: 30em; margin-bottom: 1.25rem; }
.hero__meta { margin-top: 1rem; display: grid; gap: 0; border-top: 1px solid var(--line); }
.hero__meta > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--line); font-size: .8125rem; }
.hero__meta dt { color: var(--ink-2); text-transform: uppercase; letter-spacing: .045em; font-size: .75rem; padding-top: .1em; }
.hero__photo { position: relative; margin-top: clamp(2rem, 5vh, 3.5rem); overflow: hidden; }
.hero__photo img, .full img, .split__media img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 64em) {
  .hero__title { grid-column: 1 / span 8; }
  .hero__side { grid-column: 9 / span 4; align-self: end; margin: 0; padding-bottom: .6rem; }
  .hero__meta { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--g); border-bottom: 1px solid var(--line); }
  .hero__meta > div { grid-template-columns: 1fr; gap: .2rem; border-bottom: 0; }
}
@media (max-width: 63.99em) {
  .hero__side .btn--line { width: 100%; padding: 1rem 1.4rem; background: var(--taupe-d); color: var(--bg); }
  .hero__side .btn--line::after { display: none; }
}

/* ---------- Sections ---------- */
.sec { padding-block: var(--sec); }
.sec--tint { background: var(--tint); }

/* 01 · Approche */
.split { row-gap: 3rem; align-items: center; }
.split__media { grid-column: 1 / -1; aspect-ratio: 1 / 1; overflow: hidden; }
.split__body { grid-column: 1 / -1; }
.split__body .h-1 { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 64em) {
  .split__media { grid-column: 1 / span 6; }
  .split__body { grid-column: 8 / span 5; }
}

/* Fiche technique */
.spec { margin: clamp(2rem, 4vw, 3rem) 0 1.5rem; border-top: 1px solid var(--line-2); }
.spec > div { display: grid; grid-template-columns: minmax(8rem, 2fr) 3fr; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.spec dt { font-size: .75rem; letter-spacing: .045em; text-transform: uppercase; color: var(--ink-2); padding-top: .15em; }
.spec dd { font-size: .9375rem; }
.spec--wide > div { grid-template-columns: 1fr; }
@media (min-width: 48em) { .spec--wide > div { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); } .spec--wide dt { grid-column: span 4; } .spec--wide dd { grid-column: span 8; } }

/* En-tête de section en deux colonnes */
.head2 { row-gap: 1.5rem; align-items: end; margin-bottom: clamp(3rem, 6vw, 5.5rem); }
.head2 .h-1 { grid-column: 1 / -1; }
.head2 .lead { grid-column: 1 / -1; margin: 0; }
@media (min-width: 64em) { .head2 .h-1 { grid-column: 1 / span 7; } .head2 .lead { grid-column: 8 / span 5; } }

/* 02 · Services : index */
.rows { border-top: 1px solid var(--line-2); }
.row a, .row > div {
  display: grid; grid-template-columns: 2.5rem 1fr 1.5rem; column-gap: var(--g); row-gap: .4rem; align-items: baseline;
  padding: 1.35rem 0; border-bottom: 1px solid var(--line); transition: padding .6s var(--ease);
}
.row__n { font-size: .75rem; letter-spacing: .045em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.row__t { font-size: clamp(1.3rem, 1rem + 1.1vw, 2.1rem); line-height: 1.05; letter-spacing: -.03em; text-transform: uppercase; }
.row__d { grid-column: 2; font-size: .9375rem; color: var(--ink-2); }
.row .arr { grid-column: 3; grid-row: 1; justify-self: end; }
@media (min-width: 64em) {
  .row a, .row > div { grid-template-columns: repeat(12, minmax(0, 1fr)); padding: 1.6rem 0; }
  .row__n { grid-column: 1; }
  .row__t { grid-column: 2 / span 5; }
  .row__d { grid-column: 7 / span 5; grid-row: 1; text-align: right; color: var(--ink); text-transform: uppercase; font-size: .875rem; letter-spacing: .01em; }
  .row .arr { grid-column: 12; }
  .row a:hover { padding-left: .75rem; }
}

/* 03 · Méthode */
.steps { margin-top: clamp(3rem, 6vw, 5rem); display: grid; border-top: 1px solid var(--line-2); }
.steps li { padding: 1.5rem 0 2.25rem; border-bottom: 1px solid var(--line); }
.steps__n { display: block; font-size: clamp(2.5rem, 1.6rem + 2.6vw, 4.5rem); line-height: 1; letter-spacing: -.05em; margin-bottom: clamp(2rem, 5vw, 4.5rem); font-variant-numeric: tabular-nums; }
.steps .h-3 { margin-bottom: .75rem; }
.steps p { margin: 0; max-width: 24em; color: var(--ink-2); }
@media (min-width: 48em) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps li { padding: 1.5rem var(--g) 0 0; border-bottom: 0; }
  .steps li + li { padding-left: var(--g); border-left: 1px solid var(--line); }
}

/* 04 · Photo pleine largeur + territoire */
.full { position: relative; overflow: hidden; aspect-ratio: 3 / 2; }
@media (min-width: 48em) { .full { aspect-ratio: 5 / 2; } }
.terr { row-gap: 3.5rem; align-items: start; }
.terr__text { grid-column: 1 / -1; }
.terr__text .h-1 { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.sig { grid-column: 1 / -1; position: relative; }
.sig svg { width: 100%; height: auto; color: var(--ink); }
.sig path { vector-effect: non-scaling-stroke; stroke-width: 1.1; }
.sig__l, .sig__cap span {
  position: absolute; font-size: .6875rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2);
  transition: opacity .8s var(--ease);
}
.sig__l--valbonne { left: 40.3%; top: 18.1%; }
.sig__l--mougins { left: 36.2%; top: 33.3%; }
.sig__l--cannes { left: 44%; top: 49%; }
.sig__cap span:first-child { left: 2%; bottom: 0; }
.sig__cap span:last-child { right: 0; top: 4%; }
@media (min-width: 64em) {
  .terr__text { grid-column: 1 / span 5; position: sticky; top: calc(var(--hd) + 2rem); }
  .sig { grid-column: 7 / span 6; }
}

/* 05 · Transparence */
.flow { display: grid; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line); counter-reset: f; }
.flow li { position: relative; display: grid; gap: .3rem; padding: 1.4rem 0; }
.flow li + li { border-top: 1px solid var(--line); }
.flow__k { font-size: clamp(1.4rem, 1rem + 1.4vw, 2.5rem); line-height: 1; letter-spacing: -.035em; text-transform: uppercase; }
.flow__v { font-size: .875rem; color: var(--ink-2); }
@media (min-width: 48em) {
  .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--g); }
  .flow li + li { border-top: 0; }
  .flow li:not(:last-child)::after { content: "→"; position: absolute; right: 0; top: 1.4rem; font-size: clamp(1.4rem, 1rem + 1.4vw, 2.5rem); line-height: 1; }
}
.flow + .spec { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* 06 · Fondatrice */
.duo { row-gap: 1rem; }
.duo .label { grid-column: 1 / -1; }
.duo__body { grid-column: 1 / -1; }
.duo__body .h-2 { margin-bottom: 1.5rem; }
@media (min-width: 64em) {
  .duo .label { grid-column: 1 / -1; }
  .duo__body { grid-column: 5 / span 7; }
}

/* 07 · Appel final */
.cta { padding-block: var(--sec); border-top: 1px solid var(--line); }
.cta .h-display--m { max-width: 16em; }
.cta__row { margin-top: clamp(2.5rem, 5vw, 4rem); row-gap: 1.5rem; align-items: center; }
.cta__row p { grid-column: 1 / -1; margin: 0; color: var(--ink-2); max-width: 26em; }
.cta__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
@media (min-width: 64em) { .cta__row p { grid-column: 1 / span 5; } .cta__actions { grid-column: 8 / span 5; justify-content: flex-end; } }
@media (max-width: 40em) { .cta__actions .btn { width: 100%; } }

/* ---------- Pied de page (fond noir) ---------- */
.ft { padding: clamp(3rem, 6vw, 5rem) 0 0; background: var(--taupe); color: var(--ink); }
.ft a { color: inherit; }
.ft__logo { display: inline-block; font-size: clamp(2.5rem, 1.2rem + 4.2vw, 5rem); font-weight: 700; letter-spacing: -.035em; line-height: 1; }
.ft__cols { display: grid; gap: 3rem var(--g); margin-top: clamp(3rem, 8vw, 7rem); }
.ft__col { display: grid; grid-template-columns: 1fr; gap: .75rem; align-content: start; }
.ft__k { margin: 0; padding-top: .45em; font-size: .75rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: rgba(39, 39, 39, .78); white-space: nowrap; }
.ft__big li { white-space: nowrap; font-size: clamp(1.5rem, .6rem + 1.85vw, 2.9rem); line-height: 1.12; letter-spacing: -.04em; text-transform: uppercase; }
.ft__big a { display: inline-block; transition: color .4s var(--ease), transform .5s var(--ease); }
.ft__big a:hover { transform: translateX(.35rem); }
.ft__big a[aria-current="page"] { color: var(--bg); }
.ft__dash { font-weight: 300; }
.ft__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; margin-top: clamp(4rem, 9vw, 8rem); padding: 1.25rem 0 1.75rem; border-top: 1px solid rgba(39, 39, 39, .25); font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.ft__base p { margin: 0; }
.ft__base a { display: inline-flex; min-height: 2.75rem; align-items: center; }
.ft__legal { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.ft :focus-visible { outline-color: var(--ink); }
@media (min-width: 40em) { .ft__col { grid-template-columns: auto 1fr; gap: 1.25rem; } }
@media (min-width: 64em) { .ft__cols { grid-template-columns: 1.3fr .95fr 1.1fr; } }

/* ---------- Emplacements photo (en attente) ---------- */
.ph { width: 100%; background: #EBE7DE; }
.sec--tint .ph { background: #E5E0D5; }
.ph--pano { aspect-ratio: 4 / 3; }
.ph--square { aspect-ratio: 1 / 1; }
@media (min-width: 64em) { .ph--pano { aspect-ratio: 21 / 9; } }

/* ---------- En-tête des pages intérieures ---------- */
.phd { padding-top: calc(var(--hd) + clamp(3.5rem, 11vh, 8rem)); padding-bottom: clamp(3.5rem, 8vw, 6.5rem); }
.phd .label { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.head2--page { margin-bottom: 0; }
.head2--page .btn { margin-top: 1.5rem; }
.h-display--page { font-size: clamp(2.6rem, .8rem + 5.4vw, 7.25rem); line-height: 1.02; letter-spacing: -.045em; }
.head2--page .h-display--page { grid-column: 1 / -1; }
.head2--page > :last-child:not(h1) { grid-column: 1 / -1; }
@media (min-width: 64em) { .head2--page .h-display--page { grid-column: 1 / span 8; } .head2--page > :last-child:not(h1) { grid-column: 9 / span 4; } }
.phd__photo { margin-top: clamp(3rem, 7vw, 5rem); }
.sec--top0 { padding-top: 0; }

/* ---------- Vos propriétés ---------- */
.showcase { display: grid; gap: 3rem var(--g); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.showcase__text { grid-column: 1 / -1; }
.showcase__text > p:first-child { font-size: clamp(1.05rem, 1rem + .25vw, 1.2rem); line-height: 1.5; max-width: 34em; }
.showcase__media { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--g); align-self: start; }
@media (min-width: 64em) { .showcase { grid-template-columns: repeat(12, minmax(0, 1fr)); } .showcase__text { grid-column: 1 / span 5; } .showcase__media { grid-column: 7 / span 6; } }

/* ---------- Pages intérieures : composants ---------- */
.pillar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--g); row-gap: 1rem; padding-bottom: clamp(4rem, 9vw, 8rem); }
.pillar:last-child { padding-bottom: 0; }
.pillar__head, .pillar__body { grid-column: 1 / -1; }
.pillar__body .lead { margin-bottom: 1.75rem; }
@media (min-width: 64em) {
  .pillar { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .pillar__head { grid-column: 1 / span 5; }
  .pillar__body { grid-column: 7 / span 6; padding-top: 3.25rem; }
}
.list { border-top: 1px solid var(--line-2); }
.list li { position: relative; padding: .85rem 0 .85rem 1.25rem; border-bottom: 1px solid var(--line); }
.list li::before { content: ""; position: absolute; left: 0; top: 1.45rem; width: .35rem; height: .35rem; background: var(--taupe); }
.note { margin-top: 1.25rem; font-size: .9375rem; color: var(--ink-2); max-width: 40em; }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--g); margin-top: 2rem; border-top: 1px solid var(--line-2); }
.compare > div { display: grid; gap: .35rem; padding-top: 1rem; }
.compare__k { font-size: .75rem; letter-spacing: .045em; text-transform: uppercase; color: var(--ink-2); }
.compare__v { font-size: clamp(1.25rem, 1rem + .9vw, 1.9rem); letter-spacing: -.03em; line-height: 1.1; text-transform: uppercase; }
.compare__r { font-size: .875rem; color: var(--ink-2); }
.tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.tags li { padding: .7rem 1rem; border: 1px solid var(--line-2); font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase; }
.statement { margin: 0; font-size: clamp(1.5rem, 1rem + 1.9vw, 2.75rem); line-height: 1.22; letter-spacing: -.025em; max-width: 24em; }
.split--text { align-items: start; row-gap: 2.5rem; }
.split__aside { grid-column: 1 / -1; }
@media (min-width: 64em) { .split--text .split__body { grid-column: 1 / span 6; } .split--text .split__aside { grid-column: 8 / span 5; padding-top: 3.25rem; } }
.areas li { font-size: clamp(2rem, 1rem + 3.4vw, 4.25rem); line-height: 1.08; letter-spacing: -.045em; text-transform: uppercase; }
.areas .areas__more { font-size: clamp(1rem, .9rem + .5vw, 1.35rem); letter-spacing: -.01em; text-transform: none; color: var(--ink-2); margin-top: .75rem; }
.cols2 { display: grid; gap: 3rem var(--g); }
.cols2__t { margin-bottom: 1.25rem; }
.cols2--gap { margin-top: clamp(4rem, 8vw, 6rem); }
@media (min-width: 48em) { .cols2 { grid-template-columns: 1fr 1fr; } }

/* Étapes sur 6 */
@media (min-width: 48em) {
  .steps--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 3rem; }
  .steps--6 li:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
  .steps--6 li:nth-child(n + 4) { border-top: 1px solid var(--line); padding-top: 1.5rem; }
}

/* Rémunération */
.fee { display: grid; gap: 3rem var(--g); grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; }
.fee__main, .fee__side { grid-column: 1 / -1; }
.fee__fig { margin: 0 0 1.5rem; font-size: clamp(6rem, 2rem + 13vw, 17rem); line-height: .82; letter-spacing: -.07em; }
.tbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; border-top: 1px solid var(--line-2); }
.tbl caption { text-align: left; font-size: .75rem; letter-spacing: .045em; text-transform: uppercase; color: var(--ink-2); padding-bottom: .75rem; }
.tbl th, .tbl td { padding: .95rem 0; border-bottom: 1px solid var(--line); font-weight: 400; text-align: left; }
.tbl td { text-align: right; white-space: nowrap; }
.tbl tr:last-child th, .tbl tr:last-child td { font-weight: 600; border-bottom-color: var(--line-2); }
@media (min-width: 64em) { .fee { grid-template-columns: repeat(12, minmax(0, 1fr)); } .fee__main { grid-column: 1 / span 6; } .fee__side { grid-column: 8 / span 5; } }

/* FAQ */
.faqwrap { display: grid; gap: 2rem var(--g); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.faqwrap__head, .faq { grid-column: 1 / -1; }
@media (min-width: 64em) { .faqwrap { grid-template-columns: repeat(12, minmax(0, 1fr)); } .faqwrap__head { grid-column: 1 / span 5; position: sticky; top: calc(var(--hd) + 2rem); align-self: start; } .faq { grid-column: 7 / span 6; padding-top: 3.25rem; } }
.faq { border-top: 1px solid var(--line-2); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 1.25rem; gap: 1.5rem; align-items: center; padding: 1.25rem 0; font-size: clamp(1.05rem, 1rem + .35vw, 1.3rem); letter-spacing: -.015em; }
.faq summary::-webkit-details-marker { display: none; }
.faq__i { position: relative; width: 1.25rem; height: 1.25rem; }
.faq__i::before, .faq__i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--ink); transition: transform .5s var(--ease); }
.faq__i::after { transform: rotate(90deg); }
.faq details[open] .faq__i::after { transform: rotate(0deg); }
.faq summary:hover span:first-child { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.faq__a { padding: 0 2.75rem 1.5rem 0; color: var(--ink-2); max-width: 42em; }
.faq__a p { margin: 0; }

/* Contact */
.channels { border-top: 1px solid var(--line-2); }
.channels a { display: grid; grid-template-columns: 1fr auto; column-gap: var(--g); row-gap: .35rem; align-items: baseline; padding: 1.5rem 0; border-bottom: 1px solid var(--line); transition: padding .6s var(--ease); }
.channels__k { grid-column: 1; font-size: .75rem; letter-spacing: .045em; text-transform: uppercase; color: var(--ink-2); }
.channels__v { grid-column: 1; font-size: clamp(1.6rem, 1rem + 2.6vw, 3.5rem); line-height: 1.05; letter-spacing: -.04em; overflow-wrap: anywhere; }
.channels .arr { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 1.5rem; }
.channels a:hover { padding-left: .75rem; }
.channels a:hover .arr { transform: translateX(.35rem); }
@media (min-width: 64em) { .channels a { grid-template-columns: repeat(12, minmax(0, 1fr)); } .channels__k { grid-column: 1 / span 2; } .channels__v { grid-column: 3 / span 9; grid-row: 1; } .channels .arr { grid-column: 12; grid-row: 1; justify-self: end; } }

/* Pages légales */
.prose { max-width: 46rem; }
.prose h2 { margin: 3rem 0 1rem; font-size: clamp(1.25rem, 1rem + .8vw, 1.75rem); letter-spacing: -.025em; text-transform: uppercase; }
.prose h2:first-child { margin-top: 0; }
.prose ul { margin: 0 0 1em; border-top: 1px solid var(--line); }
.prose ul li { padding: .6rem 0; border-bottom: 1px solid var(--line); }
.prose a { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
mark.todo { background: #F1E3C4; color: #4A3510; padding: .05em .3em; }

/* 404 */
.nf { min-height: 80vh; display: flex; align-items: center; padding: calc(var(--hd) + 4rem) 0 5rem; }
.nf .lead { margin-top: 2rem; }
.nf__actions { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; margin-top: 2.5rem; }

/* ---------- WhatsApp flottant (mobile) ---------- */
.wa-float {
  position: fixed; z-index: 40; left: var(--m); right: var(--m); bottom: max(.75rem, env(safe-area-inset-bottom));
  display: none; justify-content: space-between; align-items: center; min-height: 3.25rem; padding: 0 1.25rem;
  background: var(--taupe-d); color: var(--bg); font-size: .8125rem; font-weight: 500; letter-spacing: .045em; text-transform: uppercase;
  transform: translateY(150%); transition: transform .6s var(--ease);
}
.wa-float.is-visible { transform: none; }

@media (max-width: 63.99em) {
  .hd__nav { display: none; }
  .hd__menu { display: inline-flex; align-items: center; }
  .js .wa-float { display: flex; }
}

/* ---------- Mouvement ---------- */
.js .reveal { opacity: 0; transform: translateY(1.5rem); transition: opacity 1s var(--ease), transform 1.2s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .label[data-rule]::after { transform: scaleX(0); }
.js .label[data-rule].is-in::after { transform: scaleX(1); }

.js .ln-mask > span { transform: translateY(104%); transition: transform 1.25s var(--ease); }
.js .ln-mask:nth-child(2) > span { transition-delay: .08s; }
.js .ln-mask:nth-child(3) > span { transition-delay: .16s; }
.js .ln-mask:nth-child(4) > span { transition-delay: .24s; }
.js.is-ready .ln-mask > span { transform: none; }
.js .hero__side, .js .hero__meta { opacity: 0; transition: opacity 1.2s var(--ease) .5s; }
.js.is-ready .hero__side, .js.is-ready .hero__meta { opacity: 1; }

/* Photos : ouverture depuis une ligne d'horizon, puis léger recadrage */
.js [data-reveal-img] { clip-path: inset(50% 0 50% 0); transition: clip-path 1.4s var(--ease); }
.js [data-reveal-img].is-in { clip-path: inset(0 0 0 0); }
.js [data-reveal-img] img { transform: scale(1.12) translateY(var(--py, 0px)); transition: transform 1.8s var(--ease); will-change: transform; }
.js [data-reveal-img].is-in img { transform: scale(1.04) translateY(var(--py, 0px)); }

/* Dessin signature : tracé lié au défilement (piloté en JS) */
.js .sig path { stroke-dasharray: 1; stroke-dashoffset: var(--draw, 1); }
.js .sig .sig__l, .js .sig .sig__cap span { opacity: 0; }
.js .sig.is-drawn .sig__l, .js .sig.is-drawn .sig__cap span { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal, .js .hero__side, .js .hero__meta { opacity: 1; transform: none; }
  .js .ln-mask > span { transform: none; }
  .js [data-reveal-img] { clip-path: none; }
  .js [data-reveal-img] img { transform: none; }
  .js .sig path { stroke-dashoffset: 0; }
  .js .sig .sig__l, .js .sig .sig__cap span { opacity: 1; }
  .js .label[data-rule]::after { transform: none; }
}

/* ---------- Photos dans les cadres ---------- */
.ph--img { position: relative; overflow: hidden; }
.ph--img picture, .ph--img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ph--portrait { aspect-ratio: 4 / 5; }
.pos-mid img { object-position: 50% 55%; }
.inline-photo { padding-bottom: clamp(4rem, 9vw, 8rem); }
.inline-photo--contact { padding-bottom: var(--sec); }
.pair { display: grid; gap: var(--g); grid-template-columns: 1fr 1fr; }
@media (max-width: 40em) { .pair { grid-template-columns: 1fr; } }
.trio { display: grid; gap: var(--g); grid-template-columns: 1fr; }
@media (min-width: 48em) { .trio { grid-template-columns: repeat(3, 1fr); } }
.pos-high img { object-position: 50% 38%; }
.pos-hero img { object-position: 50% 42%; }
.ph--thin { aspect-ratio: 16 / 9; }
@media (min-width: 64em) { .ph--thin { aspect-ratio: 3 / 1; } }

/* ---------- Communes (liste typographique, esprit Highstay) ---------- */
:root { --terracotta: #904926; --stone: #CAC7C0; }
.places { padding-block: var(--sec) calc(var(--sec) * .6); overflow: hidden; }
.places__eyebrow { margin: 0 0 clamp(2.5rem, 6vw, 5rem); text-align: center; font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--terracotta); }
.places__list { margin: 0; padding: 0; }
.places__name { --x: 0%; display: block; padding-left: var(--x); font-size: clamp(2.5rem, .6rem + 7.4vw, 8.25rem); font-weight: 300; line-height: 1.04; letter-spacing: -.035em; text-transform: uppercase; white-space: nowrap; color: var(--stone); transition: color .9s var(--ease); }
.places__name > span { display: inline-block; transition: transform 1.1s var(--ease); }
.places__name.is-focus { color: var(--ink); }
.places__name--1 { --x: 10%; } .places__name--2 { --x: 22%; } .places__name--3 { --x: 4%; } .places__name--4 { --x: 34%; }
.places__name--5 { --x: 16%; } .places__name--6 { --x: 26%; } .places__name--7 { --x: 2%; }
@media (min-width: 64em) {
  .places__name--1 { --x: 18%; } .places__name--2 { --x: 34%; } .places__name--3 { --x: 8%; } .places__name--4 { --x: 48%; }
  .places__name--5 { --x: 28%; } .places__name--6 { --x: 40%; } .places__name--7 { --x: 12%; }
}
.places__text { max-width: 36em; margin: clamp(3rem, 7vw, 5.5rem) auto 0; text-align: center; font-size: clamp(1.02rem, .95rem + .3vw, 1.2rem); line-height: 1.6; color: var(--ink); }
.js .places__name > span { transform: translateX(-2.5rem); }
.js .places__name.is-in > span { transform: none; }
@media (prefers-reduced-motion: reduce) { .js .places__name > span { transform: none; } }

/* Dessin : libellé Cap d'Antibes */
.sig__l--cap { left: 77%; top: 51%; }

/* ==========================================================================
   v3 — Esthétique inspirée de Highstay
   Grands titres en Bodoni Moda (empattements), Inter partout ailleurs.
   Ouvertures plein écran, en-tête en capsule, cartes photo, diaporama,
   collage, bloc anthracite, symboles au trait.
   ========================================================================== */
@font-face { font-family: "Bodoni Moda"; src: url("/assets/fonts/bodoni-moda-latin-wght-normal.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("/assets/fonts/bodoni-moda-latin-wght-italic.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Serif Fallback"; src: local("Georgia"); size-adjust: 94%; ascent-override: 92%; }
:root { --serif: "Bodoni Moda", "Serif Fallback", Georgia, serif; --light-ac: #D9BBA6; }

.serif { font-family: var(--serif); font-weight: 400; text-transform: uppercase; letter-spacing: 0; line-height: 1.02; text-wrap: balance; }
.serif em { font-style: italic; text-transform: none; }
.ico { width: 1.5rem; height: 1.5rem; flex: none; }
.ico--s { width: 1rem; height: 1rem; }
.ico--m { width: 1.25rem; height: 1.25rem; }
.cover { display: block; width: 100%; height: 100%; }
.cover img { width: 100%; height: 100%; object-fit: cover; }

/* Étiquettes terre cuite centrées */
.kicker { display: flex; justify-content: center; align-items: center; gap: .75rem; margin: 0 0 1.75rem; font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--terracotta); }
.kicker--left { justify-content: flex-start; }
.kicker--light { color: #fff; }

/* Boutons */
.btn--light { padding: 1rem 1.6rem; background: var(--bg); color: var(--ink); transition: background-color .4s var(--ease); }
.btn--light:hover { background: #fff; }
.more { gap: .5rem; }
.more .ico { transition: transform .5s var(--ease); }
.more:hover .ico { transform: translate(2px, -2px); }
.more--light { color: var(--bg); }

/* ---------- En-tête : blanc sur photo, capsule au défilement ---------- */
.hd { height: 4.75rem; }
.hd__in { transition: max-width .6s var(--ease), height .6s var(--ease), margin .6s var(--ease), background-color .5s var(--ease), box-shadow .5s var(--ease), border-radius .6s var(--ease); }
.hd.is-solid { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.hd.is-solid .hd__in {
  max-width: 64rem; height: 3.4rem; margin-top: .7rem; border-radius: 999px; padding-inline: 1.6rem;
  background: rgba(249, 248, 244, .94); box-shadow: 0 10px 30px -18px rgba(39, 39, 39, .45), 0 0 0 1px rgba(39, 39, 39, .06);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
@media (max-width: 63.99em) { .hd.is-solid .hd__in { margin-inline: .75rem; width: auto; padding-inline: 1.25rem; } }
.has-hx .hd:not(.is-solid) { color: #fff; }
.has-hx .hd:not(.is-solid) .hd__lang { color: rgba(255, 255, 255, .75); }
.has-hx .hd:not(.is-solid) .hd__lang b { color: #fff; }
.has-hx .hd:not(.is-solid) :focus-visible { outline-color: #fff; }

/* ---------- Ouverture plein écran ---------- */
.hx { position: relative; display: flex; flex-direction: column; min-height: 100svh; color: #fff; overflow: hidden; background: #3a3631; }
.hx--page { min-height: 82svh; }
.hx__media { position: absolute; inset: 0; }
.hx__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 18, 16, .5) 0%, rgba(20, 18, 16, .18) 38%, rgba(20, 18, 16, .28) 62%, rgba(20, 18, 16, .62) 100%); }
.hx__in { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding-top: calc(var(--hd) + 3rem); padding-bottom: 3.5rem; }
.hx__brand { margin: 0 0 1.5rem; font-size: clamp(1rem, .8rem + .9vw, 1.6rem); font-weight: 500; letter-spacing: .5em; padding-left: .5em; }
.hx__title { margin: 0; font-size: clamp(2.5rem, .8rem + 5.6vw, 6.75rem); line-height: 1; max-width: 15ch; }
.hx__title em { display: block; }
.hx__title--page { font-size: clamp(2.3rem, .9rem + 4.4vw, 5.5rem); max-width: 17ch; }
.hx__lead { max-width: 36em; margin: 1.75rem auto 2.25rem; font-size: clamp(1rem, .95rem + .3vw, 1.2rem); line-height: 1.6; color: rgba(255, 255, 255, .92); }
.hx--page .hx__lead { margin-bottom: 0; }
.hx__strip { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem 3.5rem; margin: 0; padding: 1.15rem var(--m); list-style: none; border-top: 1px solid rgba(255, 255, 255, .22); background: rgba(20, 18, 16, .22); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: .75rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.hx__strip li { display: flex; align-items: center; gap: .65rem; }
.hx__strip .ico { width: 1.35rem; height: 1.35rem; }
.js .hx__media img { transform: scale(1.1); transition: transform 2.8s var(--ease); }
.js.is-ready .hx__media img { transform: scale(1.02); }
.js .hx__brand, .js .hx__lead, .js .hx__in > .btn, .js .hx__in > .kicker, .js .hx__strip { opacity: 0; transition: opacity 1.4s var(--ease) .55s; }
.js.is-ready .hx__brand, .js.is-ready .hx__lead, .js.is-ready .hx__in > .btn, .js.is-ready .hx__in > .kicker, .js.is-ready .hx__strip { opacity: 1; }

/* ---------- Titre éditorial centré + colonnes à symboles ---------- */
.ed { padding-block: var(--sec); text-align: center; }
.ed__title { margin: 0 auto; font-size: clamp(2.3rem, .9rem + 4.6vw, 5.75rem); max-width: 14ch; }
.ed__title em { display: block; }
.ed__lead { max-width: 38em; margin: 2rem auto 0; font-size: clamp(1.05rem, 1rem + .35vw, 1.3rem); line-height: 1.6; }
.ed__text { max-width: 42em; margin: 1.25rem auto 0; color: var(--ink-2); line-height: 1.7; }
.ed__more { margin: 2.75rem 0 0; }
.ed__fine { margin: 2.5rem auto 0; text-align: center; }
.icols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.75rem var(--g); max-width: 76rem; margin: clamp(3.5rem, 7vw, 5.5rem) auto 0; padding: 0; list-style: none; text-align: center; }
.icols li { display: grid; justify-items: center; align-content: start; gap: .55rem; }
.icols .ico { width: 2.1rem; height: 2.1rem; margin-bottom: .5rem; color: var(--taupe-d); }
.icols strong { font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.icols span { max-width: 17em; font-size: .9375rem; line-height: 1.5; color: var(--ink-2); }
@media (min-width: 64em) { .icols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- En-tête de section à deux colonnes ---------- */
.sechead { display: grid; gap: 1.5rem var(--g); margin-bottom: clamp(2.75rem, 5vw, 4.5rem); align-items: end; }
.sechead .lead { margin: 0; }
@media (min-width: 64em) { .sechead { grid-template-columns: 7fr 5fr; } }

/* ---------- Cartes photo (services) ---------- */
.cards { display: grid; grid-template-columns: 1fr; gap: 3rem var(--g); margin: 0; padding: 0; list-style: none; }
@media (min-width: 40em) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.card a { display: grid; gap: .45rem; }
.card__img { display: block; aspect-ratio: 3 / 4; overflow: hidden; margin-bottom: 1rem; background: #EBE7DE; }
.card__img picture, .card__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card__img img { transition: transform 1.3s var(--ease); }
.card a:hover .card__img img { transform: scale(1.06); }
.card__n { font-size: .75rem; font-weight: 600; letter-spacing: .12em; color: var(--terracotta); }
.card__t { font-size: 1rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.card__d { font-size: .9375rem; line-height: 1.5; color: var(--ink-2); }
.card__go { display: inline-flex; align-items: center; gap: .4rem; margin-top: .35rem; font-size: .8125rem; font-weight: 500; }
.card__go .ico { transition: transform .5s var(--ease); }
.card a:hover .card__go .ico { transform: translate(2px, -2px); }

/* ---------- Diaporama plein écran + carte ---------- */
.slides { position: relative; display: grid; place-items: center; min-height: min(100svh, 58rem); padding: 7rem var(--m); overflow: hidden; background: #3a3631; }
.slides__media { position: absolute; inset: 0; }
.slides__img { position: absolute; inset: 0; opacity: 0; transform: scale(1.06); transition: opacity 1.3s var(--ease), transform 7s linear; }
.slides__img.is-on { opacity: 1; transform: scale(1); }
.slides__card { position: relative; z-index: 1; width: min(34rem, 100%); padding: clamp(2rem, 4vw, 3.25rem); background: var(--bg); text-align: center; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .55); }
.slides__title { margin: 0; font-family: var(--serif); font-weight: 400; text-transform: uppercase; font-size: clamp(1.55rem, 1.1rem + 1.5vw, 2.4rem); line-height: 1.08; text-wrap: balance; }
.slides__steps { margin: 2rem 0 0; padding: 0; list-style: none; min-height: 8.5rem; }
.slides__step[hidden] { display: none; }
.slides__step.is-on { animation: slide-in .8s var(--ease); }
@keyframes slide-in { from { opacity: 0; transform: translateY(.75rem); } to { opacity: 1; transform: none; } }
.slides__n { font-size: .75rem; font-weight: 600; letter-spacing: .14em; color: var(--terracotta); }
.slides__h { margin: .5rem 0 .6rem; font-size: .9375rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.slides__step p { margin: 0 auto; max-width: 24em; color: var(--ink-2); }
.slides__nav { display: flex; justify-content: center; align-items: center; gap: 1.5rem; margin-top: 1.75rem; }
.slides__btn { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid var(--line-2); border-radius: 50%; background: none; color: var(--ink); cursor: pointer; transition: background-color .4s var(--ease), color .4s var(--ease); }
.slides__btn:hover { background: var(--ink); color: var(--bg); }
.slides__btn .ico { width: 1.1rem; height: 1.1rem; }
.slides__count { font-size: .8125rem; letter-spacing: .12em; font-variant-numeric: tabular-nums; }

/* ---------- Collage de photos (profondeur au défilement) ---------- */
.ed--collage { padding-bottom: var(--sec); }
.collage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g); max-width: 96rem; margin: clamp(3.5rem, 7vw, 6rem) auto 0; padding-inline: var(--m); align-items: start; }
.collage__item { margin: 0; overflow: hidden; background: #EBE7DE; transform: translateY(var(--sy, 0px)); will-change: transform; }
.collage__item picture, .collage__item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.collage__item--c1 { aspect-ratio: 4 / 5; }
.collage__item--c2 { aspect-ratio: 3 / 4; margin-top: 3rem; }
.collage__item--c3 { aspect-ratio: 4 / 5; }
.collage__item--c4 { aspect-ratio: 3 / 4; margin-top: 3rem; }
.collage__item--c5 { aspect-ratio: 16 / 10; grid-column: 1 / -1; }
@media (min-width: 64em) {
  .collage { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .collage__item--c1 { grid-column: 1 / 4; margin-top: 7rem; }
  .collage__item--c2 { grid-column: 4 / 7; margin-top: 0; }
  .collage__item--c3 { grid-column: 7 / 10; margin-top: 3.5rem; }
  .collage__item--c4 { grid-column: 10 / 13; margin-top: 2.5rem; }
  .collage__item--c5 { grid-column: 4 / 10; margin-top: -3.5rem; aspect-ratio: 16 / 9; }
}

/* ---------- Bloc anthracite ---------- */
.dark { padding-block: var(--sec); background: var(--ink); color: var(--bg); }
.dark .h-1 { color: var(--bg); }
.dark .lead { color: rgba(249, 248, 244, .82); }
.dark .kicker { color: var(--light-ac); }
.dark :focus-visible { outline-color: var(--bg); }
.dark__pics { display: grid; grid-template-columns: 1fr; gap: var(--g); margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.dark__pics .ph { background: #333; }
@media (min-width: 48em) { .dark__pics { grid-template-columns: 1fr 1fr; } }
.dflow { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(249, 248, 244, .2); border-bottom: 1px solid rgba(249, 248, 244, .2); }
.dflow li { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; row-gap: .2rem; align-items: center; padding: 1.4rem 0; }
.dflow li + li { border-top: 1px solid rgba(249, 248, 244, .12); }
.dflow .ico { grid-row: span 2; width: 2rem; height: 2rem; color: var(--light-ac); }
.dflow__k { font-size: .9375rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.dflow__v { font-size: .9rem; color: rgba(249, 248, 244, .72); }
.dflow__arr { display: none; }
@media (min-width: 48em) {
  .dflow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dflow li { padding: 1.6rem 2rem 1.6rem 0; }
  .dflow li + li { border-top: 0; padding-left: 1.6rem; border-left: 1px solid rgba(249, 248, 244, .12); }
  .dflow__arr { display: block; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); color: var(--light-ac); font-size: 1.25rem; }
}
.dspec { margin: 2.5rem 0 2rem; }
.dspec > div { display: grid; gap: .3rem 2rem; padding: 1.05rem 0; border-bottom: 1px solid rgba(249, 248, 244, .14); }
.dspec dt { font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(249, 248, 244, .7); padding-top: .15em; }
.dspec dd { margin: 0; }
@media (min-width: 48em) { .dspec > div { grid-template-columns: 4fr 8fr; } }

/* ---------- Fondatrice ---------- */
.founder { padding-block: var(--sec); text-align: center; }
.founder__name { margin: 0; font-size: clamp(1.4rem, 1.1rem + 1vw, 2.1rem); font-weight: 500; letter-spacing: .22em; text-transform: uppercase; }
.founder__text { max-width: 44em; margin: 1.5rem auto 0; font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); line-height: 1.7; }
.founder__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2.75rem; margin: 2.75rem 0 0; padding: 0; list-style: none; font-size: .78rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.founder__tags li { display: flex; align-items: center; gap: .6rem; }
.founder__tags .ico { color: var(--taupe-d); }

/* ---------- Appel final ---------- */
.cta { border-top: 0; background: var(--tint); text-align: center; }
.cta__in { display: grid; justify-items: center; }
.cta__title { margin: 0 auto; font-size: clamp(2.1rem, .9rem + 4vw, 5rem); max-width: 17ch; }
.cta__title em { display: block; }
.cta__text { max-width: 30em; margin: 1.75rem auto 2.25rem; color: var(--ink-2); }
.cta__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 2rem; }
@media (max-width: 40em) { .cta__actions .btn { width: 100%; } }

/* ---------- En-têtes des pages sans photo ---------- */
.phd__in { display: grid; justify-items: center; text-align: center; }
.phd__title { margin: 0 auto; font-size: clamp(2.3rem, .9rem + 4.4vw, 5.5rem); max-width: 16ch; }
.phd__lead { max-width: 36em; margin: 1.75rem auto 0; font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); line-height: 1.6; }
.head2--page .phd__title { margin: 0; text-align: left; max-width: none; }

/* ---------- Pied de page anthracite ---------- */
.ft { background: var(--ink); color: var(--bg); }
.ft__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; }
.ft__tag { margin: 0; font-size: .75rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: rgba(249, 248, 244, .65); }
.ft__k { color: rgba(249, 248, 244, .6); }
.ft__big a[aria-current="page"] { color: var(--taupe); }
.ft__base { border-top-color: rgba(249, 248, 244, .18); color: rgba(249, 248, 244, .75); }
.ft :focus-visible { outline-color: var(--bg); }
.ft__ic, .ft__icl { display: inline-flex; align-items: center; gap: .55rem; }
.ft__icl .ico { opacity: .8; }

@media (prefers-reduced-motion: reduce) {
  .js .hx__media img { transform: none; }
  .js .hx__brand, .js .hx__lead, .js .hx__in > .btn, .js .hx__in > .kicker, .js .hx__strip { opacity: 1; }
  .slides__img { transform: none; }
  .collage__item { transform: none; }
}
/* Lisibilité du texte sur les photos d'ouverture */
.hx__shade { background:
  radial-gradient(ellipse 60% 55% at 50% 50%, rgba(20, 18, 16, .42) 0%, rgba(20, 18, 16, 0) 100%),
  linear-gradient(180deg, rgba(20, 18, 16, .5) 0%, rgba(20, 18, 16, .22) 38%, rgba(20, 18, 16, .3) 62%, rgba(20, 18, 16, .66) 100%); }
.hx__in { text-shadow: 0 1px 24px rgba(0, 0, 0, .35); }
.hx__in .btn { text-shadow: none; }
.ft__big a.ft__icl { display: inline-flex; align-items: center; gap: .6rem; }
/* En-têtes de pages : voile plus soutenu (photos d'intérieur claires) */
.hx--page .hx__shade { background: radial-gradient(ellipse 65% 60% at 50% 52%, rgba(20, 18, 16, .5) 0%, rgba(20, 18, 16, .12) 100%), linear-gradient(180deg, rgba(20, 18, 16, .55) 0%, rgba(20, 18, 16, .3) 45%, rgba(20, 18, 16, .55) 100%); }
/* Contact : le titre occupe les 2/3 gauches */
.head2--page > .phd__title { grid-column: 1 / -1; max-width: none; text-align: left; font-size: clamp(2.3rem, .9rem + 4vw, 5rem); }
@media (min-width: 64em) { .head2--page > .phd__title { grid-column: 1 / span 7; } }
/* Titre d'accueil : première phrase en Inter, seconde en Bodoni (capitales droites) */
.hx__title--mix { max-width: none; text-transform: uppercase; text-wrap: balance; }
.hx__sans { font-family: var(--font); font-weight: 400; letter-spacing: -.035em; line-height: 1.02; font-size: clamp(2.2rem, .6rem + 5vw, 6rem); }
.hx__serif { font-family: var(--serif); font-weight: 400; font-style: normal; letter-spacing: 0; line-height: 1.02; font-size: clamp(2.4rem, .7rem + 5.4vw, 6.5rem); margin-top: .1em; }
/* « Profitez du reste. » : même style que les étiquettes (Inter semi-gras, capitales espacées), plus petit que la 1re phrase */
.hx__serif { font-family: var(--font); font-weight: 600; letter-spacing: .22em; line-height: 1.3; font-size: clamp(1rem, .8rem + .9vw, 1.6rem); margin-top: 1.1em; padding-left: .22em; }

/* Titres : même police que « Faites vivre votre bien. » (Inter, capitales, graisse normale) */
:root { --serif: var(--font); }
.serif, .slides__title { font-family: var(--font); font-weight: 400; letter-spacing: -.035em; }
.serif em { font-style: normal; text-transform: uppercase; }
/* Collage sur mobile : pas de décalage au défilement, pour garder un espace régulier entre les photos */
@media (max-width: 47.99em) { .collage__item { transform: none; } }
/* Collage : cuisine (3e photo) recadrée par le bas */
.collage__item--c3 img { object-position: 50% 0%; }
.pos-low img { object-position: 50% 90%; }
/* Trio de la page Approche : cadres plus hauts pour montrer les photos entières */
.trio .ph--portrait { aspect-ratio: 2 / 3; }
/* Maison en pierre : recadrage pour écarter le câble (en haut) et la pergola (en bas à gauche) */
.trio .ph:has(img[src*="pierre-bougainvillier"]) picture { display: block; height: 100%; transform: scale(1.43); transform-origin: 100% 13%; }
/* Fondatrice : paragraphes et sous-partie */
.founder__text + .founder__text { margin-top: 1.1rem; }
.founder__sub { max-width: 40em; margin: 2.5rem auto 0; padding-top: 2.25rem; border-top: 1px solid var(--line-2); }
.founder__sub p { margin: 0; font-size: clamp(1rem, .95rem + .25vw, 1.15rem); line-height: 1.7; color: var(--ink-2); }
.founder__sub p + p { margin-top: .9rem; }
.founder__sub p:first-child { color: var(--ink); font-weight: 500; }

/* Fondatrice : le texte contourne le portrait de Clara (photo entière, jamais recouverte) */
.founder--g { text-align: left; }
.founder__body { max-width: 68rem; margin-inline: auto; }
.founder--g .founder__name { margin-top: .6rem; }
.founder--g .founder__text, .founder--g .founder__sub { max-width: none; margin-left: 0; margin-right: 0; }
.founder--g .founder__sub { padding: 0 0 0 1.25rem; border-top: 0; border-left: 2px solid var(--taupe); }
.founder__photo { margin: 1.5rem 0; width: min(62%, 16rem); aspect-ratio: 3 / 4; overflow: hidden; background: #EBE7DE; }
.founder__photo img { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: auto; }
.js .founder__photo[data-reveal-img].is-in img { transform: none; will-change: auto; }
@media (min-width: 40em) {
  .founder__photo { float: right; width: clamp(15rem, 29vw, 20.5rem); margin: .4rem 0 1.5rem clamp(2rem, 4vw, 3.5rem); shape-outside: margin-box; }
  .founder__sub { overflow: hidden; }
}
.founder__body::after { content: ""; display: block; clear: both; }
/* Ouverture de l'accueil : photo plus vivante (couleurs, contraste) et voile un peu plus léger */
.hx:not(.hx--page) .hx__media img { filter: saturate(1.4) contrast(1.08) brightness(1.06); }
.hx:not(.hx--page) .hx__shade { background: radial-gradient(ellipse 58% 52% at 50% 50%, rgba(20, 18, 16, .58) 0%, rgba(20, 18, 16, .2) 70%, rgba(20, 18, 16, .08) 100%), linear-gradient(180deg, rgba(20, 18, 16, .4) 0%, rgba(20, 18, 16, .08) 40%, rgba(20, 18, 16, .12) 65%, rgba(20, 18, 16, .45) 100%); }
.hx:not(.hx--page) .hx__in { text-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 28px rgba(0, 0, 0, .55); }
.hx:not(.hx--page) .hx__lead { font-weight: 400; }
/* Ouverture de l accueil : voile blanc très léger sur la photo (sous le voile sombre du texte) */
.hx:not(.hx--page) .hx__media::after { content: ""; position: absolute; inset: 0; background: rgba(249, 248, 244, .14); pointer-events: none; }
/* Diaporama : villa à tourelle (photo verticale), cadrée sur la maison */
/* Bloc anthracite : 4 photos verticales */
.dark__pics--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dark__pics--4 .ph { aspect-ratio: 3 / 4; }
.dark__pics--4 img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 48em) { .dark__pics--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Diaporama : une seule photo, qui glisse et se rapproche doucement à chaque étape */
.slides__img--solo { transition: transform 2.4s cubic-bezier(.22, .61, .36, 1); transform-origin: 50% 55%; }
.slides[data-step="0"] .slides__img--solo, .slides:not([data-step]) .slides__img--solo { transform: scale(1.04); }
.slides[data-step="1"] .slides__img--solo { transform: scale(1.12) translateX(-3%); }
.slides[data-step="2"] .slides__img--solo { transform: scale(1.2) translateX(-7%); }
@media (prefers-reduced-motion: reduce) { .slides__img--solo { transition: none; } }
/* Sélecteur de langue : la langue affichée est en évidence, l'autre est cliquable */
.hd__lang b { color: var(--ink); font-weight: 600; }
.hd__lang i { font-style: normal; color: var(--ink-2); }
.hd__lang:hover b { text-decoration: none; }
.hd__lang:hover i { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
.has-hx .hd:not(.is-solid) .hd__lang b { color: #fff; }
.has-hx .hd:not(.is-solid) .hd__lang i { color: rgba(255, 255, 255, .7); }
.has-hx .hd:not(.is-solid) .hd__lang:hover i { color: #fff; }
.inline-photo img[src*="ilot-marbre"] { object-position: 50% 60%; }
.dark__pics--4 img[src*="nb-cote"] { object-position: 22% 50%; }
.sig__l--opio { left: 32.5%; top: 6%; }
.sig__l--biot { left: 63%; top: 25%; }

/* ==========================================================================
   06 — Le marché (version travaillée)
   ========================================================================== */
.market { position: relative; overflow: hidden; }
.market::before { content: "365"; position: absolute; right: -.04em; top: .2em; font-size: clamp(9rem, 4rem + 22vw, 26rem); line-height: .8; font-weight: 200; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1px rgba(156, 144, 129, .28); pointer-events: none; }
.market .wrap { position: relative; }

/* Chiffres */
.mfigs { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-2); }
.mfig { display: grid; align-content: start; gap: 1rem; padding: clamp(1.75rem, 3vw, 2.5rem) 0; border-bottom: 1px solid var(--line); }
.mfig__k { display: flex; align-items: center; gap: .6rem; font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--terracotta); }
.mfig__k::before { content: ""; width: 1.5rem; height: 1px; background: currentColor; }
.mfig__n { font-size: clamp(4rem, 2rem + 6vw, 7.75rem); line-height: .9; font-weight: 300; letter-spacing: -.06em; color: var(--ink); font-variant-numeric: tabular-nums; }
.mfig__t { max-width: 24em; font-size: .9375rem; line-height: 1.6; color: var(--ink-2); }
.mfig__viz { display: flex; align-items: center; height: 1.5rem; max-width: 15rem; color: var(--terracotta); }
.mfig__viz--months { gap: 4px; }
.mfig__viz--months i { flex: 1; height: 10px; border: 1px solid rgba(144, 73, 38, .35); transform: scaleY(.3); transform-origin: bottom; transition: transform .6s var(--ease), background .6s var(--ease); }
.mfig__viz--months i.on { background: var(--terracotta); border-color: var(--terracotta); }
.mfig__viz--months i.part { background: linear-gradient(90deg, var(--terracotta) 44%, transparent 44%); border-color: var(--terracotta); }
.mfig__viz--dots { gap: 6px; }
.mfig__viz--dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--terracotta); transform: scale(0); transition: transform .4s var(--ease); }
.mfig.is-in .mfig__viz--months i { transform: scaleY(1); }
.mfig.is-in .mfig__viz--dots i { transform: scale(1); }
@media (min-width: 48em) {
  .mfigs { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
  .mfig { padding-inline: clamp(1.25rem, 2.5vw, 2.5rem); border-bottom: 0; border-left: 1px solid var(--line); }
  .mfig:first-child { padding-left: 0; border-left: 0; }
}

/* Frise des temps forts */
.tl { margin-top: clamp(4rem, 8vw, 6.5rem); }
.tl__k { display: flex; align-items: center; gap: .75rem; margin: 0 0 2rem; font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.tl__k::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.tl__row { position: relative; margin: 0; padding: 0; list-style: none; }
.tl__m { position: relative; }
.tl__dot { display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--terracotta); box-shadow: 0 0 0 4px var(--tint); }
.tl__m--empty .tl__dot { background: var(--tint); border: 1px solid var(--stone); }
.tl__name { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.tl__ev { display: block; font-size: .875rem; line-height: 1.35; color: var(--ink); }
.tl__m--peak .tl__ev { font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.tl__m--peak .tl__dot { display: none; }

/* Téléphone / tablette : frise verticale */
@media (max-width: 63.99em) {
  .tl__row::before { content: ""; position: absolute; left: 5.5rem; top: .4rem; bottom: .4rem; width: 1px; background: var(--stone); }
  .tl__m { display: grid; grid-template-columns: 4.6rem 9px 1fr; align-items: start; column-gap: .9rem; padding: .7rem 0; }
  .tl__name { grid-column: 1; grid-row: 1; padding-top: .05rem; }
  .tl__dot { grid-column: 2; grid-row: 1; margin-top: .3rem; position: relative; z-index: 1; }
  .tl__evs { grid-column: 3; grid-row: 1; display: grid; gap: .3rem; }
  .tl__m--peak { margin: .4rem 0; padding: 1rem 0; background: var(--terracotta); }
  .tl__m--peak .tl__name { color: rgba(255, 255, 255, .85); padding-left: .75rem; }
  .tl__m--peak .tl__evs { grid-column: 2 / 4; }
}

/* Ordinateur : frise horizontale, événements au-dessus de la ligne */
@media (min-width: 64em) {
  .tl__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
  .tl__row::before { content: ""; position: absolute; left: 0; right: 0; bottom: 2.15rem; height: 1px; background: var(--stone); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ease); }
  .tl.is-in .tl__row::before { transform: scaleX(1); }
  .tl__m { display: flex; flex-direction: column; justify-content: flex-end; min-height: 11rem; padding-right: .75rem; }
  .tl__evs { display: grid; gap: .45rem; padding: 0 0 .9rem .75rem; border-left: 1px solid var(--stone); margin-left: 4px; }
  .tl__m--empty .tl__evs { border-left: 0; }
  .tl__dot { position: relative; z-index: 1; margin: 0 0 1.1rem; opacity: 0; transform: scale(0); transition: transform .5s var(--ease), opacity .5s var(--ease); transition-delay: calc(var(--d, 0) * 90ms + .3s); }
  .tl.is-in .tl__dot { opacity: 1; transform: scale(1); }
  .tl__evs { opacity: 0; transform: translateY(8px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--d, 0) * 90ms + .5s); }
  .tl.is-in .tl__evs { opacity: 1; transform: none; }
  .tl__m--peak { grid-column: span 2; z-index: 0; margin-bottom: 1.6rem; padding: 1.1rem 1rem; justify-content: space-between; min-height: 9.4rem; background: var(--terracotta); }
  .tl__m--peak .tl__evs { border-left: 0; margin: 0; padding: 0; }
  .tl__m--peak .tl__ev { font-size: .8125rem; }
  .tl__m--peak .tl__name { color: rgba(255, 255, 255, .85); }
}
@media (prefers-reduced-motion: reduce) {
  .tl__row::before, .tl__dot, .tl__evs, .mfig__viz i, .mfig__viz--up path, .mfig__viz--up circle { transition: none !important; }
}
/* Ajustements : courbe pleine largeur, frise aérée */
.mfig__viz--up { width: 100%; }
.tl { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.market__src { margin-top: 0; }
@media (min-width: 64em) {
  .tl__m { min-height: 12.5rem; }
  .tl__ev { font-size: .8125rem; }
  .tl__name { display: block; min-height: 1rem; }
}
/* « +7 % » : trait qui se trace puis flèche montante */
.mfig__viz--up { gap: .5rem; max-width: 15rem; }
.mfig__viz--up i { flex: 1; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease) .2s; }
.mfig__viz--up .ico { width: 1.35rem; height: 1.35rem; opacity: 0; transform: translate(-6px, 6px); transition: opacity .5s var(--ease) 1.2s, transform .5s var(--ease) 1.2s; }
.mfig.is-in .mfig__viz--up i { transform: scaleX(1); }
.mfig.is-in .mfig__viz--up .ico { opacity: 1; transform: none; }

/* ==========================================================================
   07 — Transparence (version travaillée)
   ========================================================================== */
.tr { position: relative; overflow: hidden; }
.tr::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 45% at 85% 12%, rgba(217, 187, 166, .10), transparent 70%), radial-gradient(ellipse 50% 40% at 10% 85%, rgba(156, 144, 129, .10), transparent 70%); pointer-events: none; }
.tr .wrap { position: relative; }

/* Photos en décalé, légère profondeur au défilement */
.tr__pics { align-items: start; margin-bottom: clamp(4rem, 8vw, 7rem); }
.tr__pics figure { transform: translateY(var(--sy, 0px)); will-change: transform; }
@media (min-width: 48em) {
  .tr__pics figure:nth-child(2) { margin-top: 3.5rem; }
  .tr__pics figure:nth-child(3) { margin-top: 1.25rem; }
  .tr__pics figure:nth-child(4) { margin-top: 5rem; }
}
@media (max-width: 47.99em) { .tr__pics figure { transform: none; } .tr__pics figure:nth-child(even) { margin-top: 2rem; } }

/* Circuit de l'argent */
.trflow { position: relative; padding: clamp(2.5rem, 5vw, 3.5rem) 0 0; }
.trflow__track { position: relative; z-index: 1; display: grid; gap: 2.75rem; margin: 0; padding: 0; list-style: none; }
.trflow__node { display: grid; justify-items: start; gap: .55rem; }
.trflow__ring { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border: 1px solid rgba(249, 248, 244, .35); border-radius: 50%; background: var(--ink); transition: border-color .6s var(--ease), box-shadow .6s var(--ease); }
.trflow__ring .ico { width: 1.75rem; height: 1.75rem; color: var(--light-ac); }
.trflow__node--2 .trflow__ring { border-color: var(--light-ac); box-shadow: 0 0 0 8px rgba(217, 187, 166, .08), 0 0 40px rgba(217, 187, 166, .18); }
.trflow__k { margin-top: .4rem; font-size: .9375rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.trflow__v { font-size: .9rem; line-height: 1.5; color: rgba(249, 248, 244, .7); max-width: 16em; }
.trflow__line { position: absolute; z-index: 0; left: 2.25rem; top: calc(clamp(2.5rem, 5vw, 3.5rem) + 2.25rem); bottom: 7.5rem; width: 1px; background: linear-gradient(to bottom, rgba(249, 248, 244, .35), var(--light-ac)); }
.trflow__coin { position: absolute; left: -4px; top: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--light-ac); box-shadow: 0 0 14px 3px rgba(217, 187, 166, .55); opacity: 0; }
.trflow__tag { display: none; }
.trflow.is-in .trflow__coin { animation: coin-v 3.2s cubic-bezier(.45, 0, .25, 1) infinite; }
.trflow.is-in .trflow__coin--b { animation-delay: 1.6s; }
@keyframes coin-v { 0% { top: 0; opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.trflow__amara { position: relative; display: flex; align-items: center; gap: 1rem; margin-top: 2.5rem; }
.trflow__dash { flex: 0 0 2.5rem; height: 0; border-top: 1px dashed rgba(249, 248, 244, .35); }
.trflow__pill { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .6rem; padding: .7rem 1.1rem; border: 1px dashed rgba(249, 248, 244, .35); border-radius: 999px; font-size: .875rem; color: rgba(249, 248, 244, .78); }
.trflow__pill strong { font-weight: 600; letter-spacing: .14em; color: var(--bg); }

@media (min-width: 64em) {
  .trflow__track { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g); }
  .trflow__node { justify-items: center; text-align: center; }
  .trflow__line { left: calc(100% / 6); right: calc(100% / 6); top: calc(clamp(2.5rem, 5vw, 3.5rem) + 2.25rem); bottom: auto; width: auto; height: 1px; background: linear-gradient(to right, rgba(249, 248, 244, .35), var(--light-ac)); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease) .2s; }
  .trflow.is-in .trflow__line { transform: scaleX(1); }
  .trflow__coin { left: 0; top: -4px; }
  .trflow.is-in .trflow__coin { animation-name: coin-h; animation-delay: 1.4s; }
  .trflow.is-in .trflow__coin--b { animation-delay: 3s; }
  @keyframes coin-h { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
  .trflow__tag { display: block; position: absolute; left: 50%; top: -1.9rem; transform: translateX(-50%); font-size: .6875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--light-ac); white-space: nowrap; }
  .trflow__amara { justify-content: center; margin-top: 3rem; }
  .trflow__dash { display: none; }
}

/* Chiffres-clés */
.trspec { display: grid; margin: clamp(4rem, 8vw, 6rem) 0 0; border-top: 1px solid rgba(249, 248, 244, .2); }
.trspec__item { display: grid; align-content: start; gap: .7rem; padding: 2rem 0; border-bottom: 1px solid rgba(249, 248, 244, .12); }
.trspec dt { font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--light-ac); }
.trspec__big { margin: 0; font-size: clamp(3rem, 1.6rem + 4.4vw, 5.5rem); line-height: .95; font-weight: 300; letter-spacing: -.05em; color: var(--bg); font-variant-numeric: tabular-nums; }
.trspec__v { margin: 0; max-width: 22em; font-size: .9375rem; line-height: 1.6; color: rgba(249, 248, 244, .72); }
@media (min-width: 48em) {
  .trspec { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid rgba(249, 248, 244, .12); }
  .trspec__item { padding: 2.25rem clamp(1.25rem, 2.5vw, 2.5rem); border-bottom: 0; border-left: 1px solid rgba(249, 248, 244, .12); }
  .trspec__item:first-child { padding-left: 0; border-left: 0; }
}

/* Lien final */
.trcta { display: inline-flex; align-items: center; gap: .9rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); padding: 1rem 1.5rem; border: 1px solid rgba(249, 248, 244, .45); color: var(--bg); font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease); }
.trcta .ico { transition: transform .4s var(--ease); }
.trcta:hover { background: var(--bg); color: var(--ink); border-color: var(--bg); }
.trcta:hover .ico { transform: translate(3px, -3px); }

@media (prefers-reduced-motion: reduce) {
  .trflow__coin { display: none; }
  .trflow__line { transform: none !important; transition: none; }
  .tr__pics figure { transform: none; }
}
@media (min-width: 64em) { .trflow__tag { left: 75%; } }
/* Circuit sur téléphone / tablette : icône à gauche, texte à droite, ligne entre les icônes seulement */
@media (max-width: 63.99em) {
  .trflow__line { display: none; }
  .trflow__node { grid-template-columns: 4.5rem 1fr; column-gap: 1.25rem; row-gap: .25rem; align-items: center; }
  .trflow__ring { grid-row: span 2; }
  .trflow__k { margin-top: 0; align-self: end; }
  .trflow__v { align-self: start; }
  .trflow__track::before { content: ""; position: absolute; z-index: -1; left: 2.25rem; top: 2.25rem; bottom: 2.25rem; width: 1px; background: linear-gradient(to bottom, rgba(249, 248, 244, .35), var(--light-ac)); }
  .trflow__track::after { content: ""; position: absolute; z-index: 0; left: calc(2.25rem - 4px); top: 2.25rem; width: 9px; height: 9px; border-radius: 50%; background: var(--light-ac); box-shadow: 0 0 14px 3px rgba(217, 187, 166, .55); opacity: 0; }
  .trflow.is-in .trflow__track::after { animation: coin-m 3.2s cubic-bezier(.45, 0, .25, 1) infinite; }
  @keyframes coin-m { 0% { top: 2.25rem; opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { top: calc(100% - 2.25rem); opacity: 0; } }
  .trflow__ring { position: relative; z-index: 1; }
}
@media (max-width: 63.99em) and (prefers-reduced-motion: reduce) { .trflow__track::after { display: none; } }

/* ==========================================================================
   Palette beige / blanc / noir pour 06 (marché) et 07 (transparence)
   ========================================================================== */
/* 06 — Le marché : accents noirs et taupes, plus de terracotta */
.market { --terracotta: var(--ink); }
.market .kicker { color: var(--taupe-d); }
.market .mfig__k { color: var(--taupe-d); }
.mfig__viz--months i { border-color: rgba(39, 39, 39, .25); }
.mfig__viz--months i.part { background: linear-gradient(90deg, var(--ink) 44%, transparent 44%); }
.tl__m--peak { background: var(--taupe); }
.tl__m--empty .tl__dot { background: var(--tint); border-color: var(--taupe); }

/* 07 — Transparence : fond taupe, textes crème, circuit sur carte crème */
.tr { --light-ac: #F3EEE6; background: #7A6F62; color: var(--bg); }
.tr::before { background: radial-gradient(ellipse 55% 45% at 88% 8%, rgba(255, 255, 255, .10), transparent 70%), radial-gradient(ellipse 45% 40% at 6% 92%, rgba(39, 39, 39, .10), transparent 70%); }
.tr::after { content: "DIRECT"; position: absolute; right: -.05em; top: .35em; font-size: clamp(6rem, 2rem + 17vw, 20rem); line-height: .8; font-weight: 200; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1px rgba(249, 248, 244, .22); pointer-events: none; }
.tr .kicker { color: rgba(249, 248, 244, .85); }
.tr .lead { color: rgba(249, 248, 244, .9); }
.tr__pics .ph { background: #6A6054; box-shadow: 0 30px 60px -30px rgba(30, 26, 22, .45); }

/* Carte crème du circuit */
.trflow { margin-inline: calc(-1 * clamp(0rem, 1vw, .5rem)); padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3.5rem) clamp(2.25rem, 4vw, 3.25rem); background: var(--bg); color: var(--ink); box-shadow: 0 40px 80px -40px rgba(30, 26, 22, .5); counter-reset: step; }
.trflow::before { content: attr(aria-label); display: block; margin-bottom: clamp(2rem, 4vw, 3rem); font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--taupe-d); }
.trflow__node { counter-increment: step; }
.trflow__ring { position: relative; background: var(--bg); border-color: rgba(39, 39, 39, .22); }
.trflow__ring::after { content: "0" counter(step); position: absolute; top: -.35rem; right: -.6rem; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--ink); color: var(--bg); font-size: .625rem; font-weight: 600; letter-spacing: .04em; }
.trflow__ring .ico { color: var(--taupe-d); }
.trflow__node--2 .trflow__ring { border-color: var(--ink); background: var(--ink); box-shadow: 0 0 0 8px rgba(39, 39, 39, .06), 0 18px 40px -12px rgba(39, 39, 39, .35); }
.trflow__node--2 .trflow__ring .ico { color: var(--bg); }
.trflow__node--2 .trflow__ring::after { background: var(--taupe); }
.trflow__k { color: var(--ink); }
.trflow__v { color: var(--ink-2); }
.trflow__line { background: linear-gradient(to right, rgba(39, 39, 39, .18), var(--ink)); }
.trflow__coin { background: var(--ink); box-shadow: 0 0 0 4px rgba(39, 39, 39, .08); }
.trflow__tag { color: var(--taupe-d); }
.trflow__dash { border-top-color: rgba(39, 39, 39, .3); }
.trflow__pill { border-color: rgba(39, 39, 39, .3); color: var(--ink-2); background: var(--tint); }
.trflow__pill strong { color: var(--ink); }
@media (max-width: 63.99em) {
  .trflow__track::before { background: linear-gradient(to bottom, rgba(39, 39, 39, .18), var(--ink)); }
  .trflow__track::after { background: var(--ink); box-shadow: 0 0 0 4px rgba(39, 39, 39, .08); }
}

/* Chiffres-clés sur fond taupe : trait qui se trace au-dessus de chacun */
.trspec { border-top: 0; }
.trspec__item { position: relative; border-color: rgba(249, 248, 244, .22) !important; }
.trspec__item::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--bg); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease); }
.trspec__item.is-in::before { transform: scaleX(1); }
.trspec dt { color: rgba(249, 248, 244, .8); }
.trspec__big { color: #fff; }
.trspec__v { color: rgba(249, 248, 244, .88); }
.trcta { border-color: rgba(249, 248, 244, .6); }
.trcta:hover { color: #7A6F62; }
@media (prefers-reduced-motion: reduce) { .trspec__item::before { transform: none; transition: none; } }
.trflow__rail { position: relative; }
@media (min-width: 64em) { .trflow__line { top: 2.25rem; } }
.tr::after { font-size: clamp(4.5rem, 1.5rem + 11vw, 13rem); top: auto; bottom: .1em; right: -.04em; -webkit-text-stroke-color: rgba(249, 248, 244, .2); }


/* 07 — Photo en couleur, floutée, en fond du bloc (sous un voile taupe) */
.tr__bg { position: absolute; inset: -40px; z-index: 0; overflow: hidden; }
.tr__bg picture, .tr__bg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tr__bg img { filter: blur(26px) saturate(1.15); transform: scale(1.1); }
.tr__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(122, 111, 98, .55) 0%, rgba(122, 111, 98, .68) 55%, rgba(110, 100, 88, .78) 100%); }
.tr::before, .tr::after { z-index: 1; }
.tr .wrap { z-index: 2; }

/* ==========================================================================
   Pied de page — fond taupe, style retravaillé
   ========================================================================== */
.ft { position: relative; overflow: hidden; padding-top: clamp(4rem, 8vw, 6.5rem); background: #7A6F62; color: var(--bg); }
.ft::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 90% 0%, rgba(255, 255, 255, .10), transparent 70%), radial-gradient(ellipse 50% 45% at 0% 100%, rgba(39, 39, 39, .14), transparent 70%); pointer-events: none; }
.ft .wrap { position: relative; }

/* En-tête du pied de page : petit logo + accroche */
.ft__top { align-items: center; padding-bottom: clamp(2rem, 4vw, 3rem); border-bottom: 1px solid rgba(249, 248, 244, .25); }
.ft__logo { font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem); letter-spacing: .28em; font-weight: 600; }
.ft__tag { max-width: 100%; white-space: normal; color: rgba(249, 248, 244, .8); }

/* Colonnes */
.ft__cols { margin-top: clamp(2.5rem, 5vw, 4rem); gap: 2.75rem var(--g); }
.ft__col { grid-template-columns: 1fr !important; gap: 1.1rem; }
.ft__k { display: flex; align-items: center; gap: .6rem; padding: 0; font-size: .6875rem; font-weight: 600; letter-spacing: .16em; color: rgba(249, 248, 244, .7); }
.ft__big { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.ft__big li { white-space: normal; font-size: clamp(1.35rem, .9rem + 1.3vw, 2.2rem); line-height: 1.15; letter-spacing: -.03em; }
.ft__big a { position: relative; transform: none !important; }
.ft__big a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.08em; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.ft__big a:hover::after, .ft__big a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.ft__big a[aria-current="page"] { color: var(--bg); }
.ft__big a.ft__icl .ico { width: 1.1em; height: 1.1em; opacity: .85; }
/* Communes : liste en ligne, séparées par des points fins */
.ft__areas { display: flex !important; flex-wrap: wrap; gap: .2rem 0; }
.ft__areas li { font-size: clamp(1.1rem, .85rem + .7vw, 1.5rem); letter-spacing: -.01em; }
.ft__areas li:not(:last-child)::after { content: "·"; margin: 0 .55em; opacity: .55; }
@media (min-width: 64em) { .ft__cols { grid-template-columns: 1fr 1fr 1.25fr; } }

/* Ligne du bas */
.ft__base { display: grid; grid-template-columns: 1fr; gap: .25rem 2rem; margin-top: clamp(3.5rem, 7vw, 5.5rem); padding: 1.25rem 0 0; border-top-color: rgba(249, 248, 244, .25); color: rgba(249, 248, 244, .85); }
.ft__base a { transition: color .3s var(--ease); }
.ft__base a:hover { color: #fff; }
@media (min-width: 48em) { .ft__base { grid-template-columns: repeat(2, auto); justify-content: space-between; } }
@media (min-width: 72em) { .ft__base { grid-template-columns: auto auto auto 1fr auto; } .ft__legal { justify-content: flex-end; } }

/* Grand AMARA en filigrane, coupé en bas */
.ft__mark { margin: clamp(1.5rem, 3vw, 2.5rem) 0 0; font-size: clamp(5rem, 1rem + 21vw, 22rem); line-height: .74; font-weight: 700; letter-spacing: -.055em; text-align: center; color: rgba(249, 248, 244, .13); white-space: nowrap; user-select: none; transform: translateY(18%); }

/* ==========================================================================
   Ouverture de l'accueil — photo floutée, ambiance taupe / beige / blanc
   ========================================================================== */
.hx:not(.hx--page) .hx__media { overflow: hidden; background: #9C9081; }
.hx:not(.hx--page) .hx__media picture { display: block; width: 100%; height: 100%; animation: hx-drift 26s ease-in-out infinite alternate; }
.hx:not(.hx--page) .hx__media img { filter: blur(14px) saturate(1.05) brightness(1.08); transform: scale(1.12); }
@keyframes hx-drift { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.06) translate3d(-1.5%, -1%, 0); } }
/* Voile taupe clair, plus lumineux au centre */
.hx:not(.hx--page) .hx__media::after { background: linear-gradient(180deg, rgba(156, 144, 129, .58) 0%, rgba(140, 129, 115, .52) 50%, rgba(122, 111, 98, .7) 100%); }
.hx:not(.hx--page) .hx__shade { background: radial-gradient(ellipse 55% 45% at 50% 48%, rgba(249, 248, 244, .14) 0%, rgba(249, 248, 244, 0) 70%); }
.hx:not(.hx--page) .hx__in { text-shadow: 0 1px 18px rgba(60, 52, 44, .28); }
/* Cadre fin crème autour du contenu */
.hx:not(.hx--page)::before { content: ""; position: absolute; z-index: 1; inset: clamp(5.5rem, 9vw, 7.5rem) clamp(1rem, 3vw, 2.5rem) clamp(5.5rem, 8vw, 6.5rem); border: 1px solid rgba(249, 248, 244, .35); pointer-events: none; }
.hx:not(.hx--page) .hx__brand { display: inline-flex; align-items: center; gap: 1.1rem; }
.hx:not(.hx--page) .hx__brand::before, .hx:not(.hx--page) .hx__brand::after { content: ""; width: clamp(2rem, 4vw, 3.5rem); height: 1px; background: rgba(249, 248, 244, .7); }
.hx:not(.hx--page) .hx__lead { color: rgba(255, 255, 255, .95); }
/* Bouton crème, et bandeau du bas en verre clair */
.hx:not(.hx--page) .btn { box-shadow: 0 18px 40px -18px rgba(60, 52, 44, .55); }
.hx:not(.hx--page) .hx__strip { background: rgba(249, 248, 244, .16); border-top-color: rgba(249, 248, 244, .35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
@media (prefers-reduced-motion: reduce) { .hx:not(.hx--page) .hx__media picture { animation: none; } }
@media (max-width: 47.99em) { .hx:not(.hx--page)::before { display: none; } }

/* ==========================================================================
   Ouverture de l'accueil — claire, aérée : texte + photo dans une arche
   ========================================================================== */
.hl { position: relative; overflow: hidden; padding: calc(var(--hd, 4.75rem) + clamp(2.5rem, 6vw, 5rem)) 0 0; background: radial-gradient(ellipse 60% 55% at 78% 40%, rgba(156, 144, 129, .16), transparent 70%), linear-gradient(180deg, var(--bg) 0%, var(--tint) 100%); }
.hl__grid { display: grid; gap: clamp(3rem, 6vw, 4rem); align-items: center; }
.hl__text { position: relative; z-index: 2; }
.hl__brand { display: flex; align-items: center; gap: 1rem; margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); font-size: .8125rem; font-weight: 600; letter-spacing: .42em; color: var(--taupe-d); }
.hl__brand::before { content: ""; width: 2.5rem; height: 1px; background: currentColor; }
.hl__title { margin: 0; color: var(--ink); }
.hl__l1 { font-size: clamp(2.6rem, 1rem + 5.2vw, 6.25rem); line-height: .98; font-weight: 400; letter-spacing: -.045em; text-transform: uppercase; }
.hl__l2 { margin-top: 1.1rem; font-size: clamp(.95rem, .8rem + .6vw, 1.3rem); font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--taupe-d); }
.hl__lead { max-width: 30em; margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; font-size: clamp(1rem, .95rem + .3vw, 1.2rem); line-height: 1.7; color: var(--ink-2); }
.hl__cta { margin-top: clamp(2rem, 4vw, 2.75rem); }

/* Visuel : arche, petite photo, badge tournant, soleil */
.hl__visual { position: relative; justify-self: center; width: min(100%, 34rem); padding: 0 8% 10% 0; }
.hl__arch { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 999px 999px 0 0; background: var(--stone); box-shadow: 0 50px 90px -50px rgba(60, 52, 44, .45); }
.hl__arch picture, .hl__arch img, .hl__small picture, .hl__small img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hl__arch img { object-position: 55% 50%; }
.hl__small { position: absolute; left: -12%; bottom: 0; width: 38%; aspect-ratio: 3 / 4; overflow: hidden; border: clamp(5px, .7vw, 9px) solid var(--bg); background: var(--stone); box-shadow: 0 30px 60px -30px rgba(60, 52, 44, .5); }
.hl__badge { position: absolute; right: 0; top: 8%; width: clamp(6.5rem, 10vw, 8.5rem); height: auto; fill: var(--ink); font-size: 9.2px; font-weight: 600; letter-spacing: .22em; }
.hl__badge text { fill: var(--ink); }
.hl__badge circle { fill: var(--taupe); }
.hl__sun { position: absolute; z-index: -1; right: -6%; top: -6%; width: 46%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(217, 187, 166, .45), rgba(217, 187, 166, 0) 70%); }

/* Bandeau du bas, clair */
.hl__strip { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem 3.5rem; margin: clamp(3.5rem, 7vw, 5.5rem) 0 0; padding: 1.4rem var(--m); list-style: none; border-top: 1px solid var(--line); font-size: .75rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.hl__strip li { display: flex; align-items: center; gap: .65rem; }
.hl__strip .ico { width: 1.25rem; height: 1.25rem; color: var(--taupe-d); }

@media (min-width: 64em) {
  .hl { min-height: 100svh; display: flex; flex-direction: column; }
  .hl__grid { flex: 1; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); }
  .hl__visual { justify-self: end; }
  .hl__strip { margin-top: clamp(2.5rem, 4vw, 3.5rem); }
}

/* Animations d'arrivée */
.js .hl__brand, .js .hl__lead, .js .hl__cta { opacity: 0; transform: translateY(14px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js .hl__lead { transition-delay: .45s; }
.js .hl__cta { transition-delay: .6s; }
.js.is-ready .hl__brand, .js.is-ready .hl__lead, .js.is-ready .hl__cta { opacity: 1; transform: none; }
.js .hl__arch { clip-path: inset(100% 0 0 0 round 999px 999px 0 0); transition: clip-path 1.6s cubic-bezier(.7, 0, .2, 1) .2s; }
.js.is-ready .hl__arch { clip-path: inset(0 0 0 0 round 999px 999px 0 0); }
.hl__arch picture { animation: hl-zoom 22s ease-in-out infinite alternate; }
@keyframes hl-zoom { from { transform: scale(1.04); } to { transform: scale(1.14); } }
.js .hl__small { opacity: 0; transform: translate(-20px, 30px); transition: opacity 1.1s var(--ease) 1.1s, transform 1.1s var(--ease) 1.1s; }
.js.is-ready .hl__small { opacity: 1; transform: none; }
.hl__badge { animation: hl-spin 28s linear infinite; }
@keyframes hl-spin { to { transform: rotate(360deg); } }
.hl__sun { animation: hl-breathe 9s ease-in-out infinite alternate; }
@keyframes hl-breathe { from { transform: scale(.92); opacity: .75; } to { transform: scale(1.06); opacity: 1; } }
.js .hl__strip { opacity: 0; transition: opacity 1.2s var(--ease) 1.4s; }
.js.is-ready .hl__strip { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hl__arch picture, .hl__badge, .hl__sun { animation: none; }
  .js .hl__arch { clip-path: none; transition: none; }
  .js .hl__brand, .js .hl__lead, .js .hl__cta, .js .hl__small, .js .hl__strip { opacity: 1; transform: none; transition: none; }
}
.hl__badge { font-size: 8.6px; letter-spacing: 0; }
.hl__arch img { object-position: 50% 60%; }
.hl__small { aspect-ratio: 1; }
.hl__small img { object-position: 45% 70%; }
@media (max-width: 63.99em) { .hl__visual { padding: 0 0 12% 10%; } .hl__small { left: 0; width: 42%; } .hl__badge { right: -2%; } }
.hl__badge .hl__badge-bg { fill: var(--bg); }
.hl__badge { filter: drop-shadow(0 12px 24px rgba(60, 52, 44, .22)); }

/* ==========================================================================
   Ouverture « C » — titre géant, la fenêtre photo s'ouvre au défilement
   ========================================================================== */
.hc { --p: 0; --win-h: 26svh; --win-w: 46vw; position: relative; height: 250svh; background: var(--bg); }
.hc__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
/* La photo occupe tout l'écran mais n'est visible que par la « fenêtre » (clip-path) */
.hc__photo { position: absolute; inset: 0; clip-path: inset(calc((50svh - var(--win-h) / 2) * (1 - var(--p))) calc((50vw - var(--win-w) / 2) * (1 - var(--p))) round calc(2px * (1 - var(--p)))); will-change: clip-path; }
.hc__photo picture, .hc__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hc__photo img { object-position: 50% 62%; transform: scale(calc(1.18 - .18 * var(--p))); }
.hc__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(39, 39, 39, .05) 30%, rgba(39, 39, 39, .45) 100%); opacity: clamp(0, calc((var(--p) - .5) * 2.2), 1); }

/* Titre : deux lignes de part et d'autre de la fenêtre, qui s'écartent */
.hc__title { margin: 0; }
.hc__l { position: absolute; left: 0; right: 0; text-align: center; font-size: clamp(2.9rem, .5rem + 8.6vw, 9.5rem); line-height: .9; font-weight: 400; letter-spacing: -.055em; text-transform: uppercase; color: var(--ink); opacity: clamp(0, calc(1 - var(--p) * 2.4), 1); }
.hc__l--top { bottom: calc(50svh + var(--win-h) / 2 + clamp(.8rem, 2vw, 1.6rem)); transform: translateY(calc(var(--p) * -24svh)); }
.hc__l--bot { top: calc(50svh + var(--win-h) / 2 + clamp(.8rem, 2vw, 1.6rem)); transform: translateY(calc(var(--p) * 24svh)); }
.hc__brand { position: absolute; left: 0; right: 0; top: calc(var(--hd, 4.75rem) + 1.5svh); display: flex; justify-content: center; align-items: center; gap: 1rem; margin: 0; font-size: .75rem; font-weight: 600; letter-spacing: .5em; color: var(--taupe-d); opacity: clamp(0, calc(1 - var(--p) * 3), 1); }
.hc__brand::before, .hc__brand::after { content: ""; width: 2.5rem; height: 1px; background: currentColor; }
.hc__hint { position: absolute; left: 0; right: 0; bottom: 3svh; display: flex; flex-direction: column; align-items: center; gap: .6rem; margin: 0; font-size: .6875rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--taupe-d); opacity: clamp(0, calc(1 - var(--p) * 5), 1); }
.hc__hint span { width: 1px; height: 2.5rem; background: linear-gradient(var(--taupe-d), transparent); animation: hc-hint 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes hc-hint { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* Fin du défilement : promesse, phrase et bouton sur la photo */
.hc__l2 { position: absolute; left: 0; right: 0; top: 34svh; text-align: center; font-size: clamp(1.4rem, .8rem + 2.2vw, 2.6rem); font-weight: 600; letter-spacing: .3em; padding-left: .3em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, .25); opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.hc__end { position: absolute; left: 50%; top: 46svh; width: min(36rem, 88vw); transform: translate(-50%, 18px); display: grid; justify-items: center; gap: 1.75rem; text-align: center; opacity: 0; pointer-events: none; transition: opacity .9s var(--ease) .12s, transform .9s var(--ease) .12s; }
.hc__lead { margin: 0; font-size: clamp(1rem, .95rem + .3vw, 1.2rem); line-height: 1.7; color: #fff; text-shadow: 0 1px 18px rgba(0, 0, 0, .3); }
.hc.is-open .hc__l2 { opacity: 1; transform: none; }
.hc.is-open .hc__end { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

/* Bandeau sous l'ouverture */
.hc__strip { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem 3.5rem; margin: 0; padding: 1.4rem var(--m); list-style: none; background: var(--bg); border-bottom: 1px solid var(--line); font-size: .75rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.hc__strip li { display: flex; align-items: center; gap: .65rem; }
.hc__strip .ico { width: 1.25rem; height: 1.25rem; color: var(--taupe-d); }

@media (max-width: 47.99em) { .hc { --win-w: 72vw; --win-h: 24svh; height: 220svh; } }

/* Sans animation : la photo est simplement affichée en grand sous le titre */
.hc.is-static { height: auto; }
.hc.is-static .hc__stage { position: relative; height: auto; display: grid; justify-items: center; gap: 1.5rem; padding: calc(var(--hd, 4.75rem) + 2rem) var(--m) 3rem; }
.hc.is-static .hc__photo, .hc.is-static .hc__l, .hc.is-static .hc__brand, .hc.is-static .hc__l2, .hc.is-static .hc__end { position: static; transform: none; opacity: 1; clip-path: none; }
.hc.is-static .hc__photo { width: 100%; aspect-ratio: 16 / 9; }
.hc.is-static .hc__l2, .hc.is-static .hc__lead { color: var(--ink); text-shadow: none; }
.hc.is-static .hc__hint { display: none; }
.hc__photo img { object-position: 50% 58%; }
.hc__photo img { object-position: 50% 50%; }
.hc__photo::after { background: radial-gradient(ellipse 50% 42% at 50% 48%, rgba(39, 36, 32, .5), rgba(39, 36, 32, 0) 75%), linear-gradient(180deg, rgba(39, 36, 32, .18), rgba(39, 36, 32, .4)); }
.hc__l2, .hc__lead { text-shadow: 0 2px 22px rgba(0, 0, 0, .45); }
/* Ouverture : couleurs plus vives et chaudes, voile allégé (seulement derrière le texte en fin d'ouverture) */
.hc__photo img { filter: saturate(1.35) contrast(1.1) brightness(1.05); image-rendering: auto; }
.hc__photo::after { background: radial-gradient(ellipse 46% 38% at 50% 48%, rgba(39, 36, 32, .42), rgba(39, 36, 32, 0) 72%); opacity: clamp(0, calc((var(--p) - .6) * 3), 1); }
.hc__photo::after { background: radial-gradient(ellipse 34% 26% at 50% 50%, rgba(39, 36, 32, .55), rgba(39, 36, 32, 0) 78%); }
.hc__lead { font-weight: 400; }


/* ==========================================================================
   02 — Cartes services : texte sur photo (base commune)
   ========================================================================== */
.cards { display: flex; gap: clamp(.5rem, 1vw, .9rem); }
.card { position: relative; overflow: hidden; background: #EBE7DE; }
.card a { position: relative; height: 100%; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; gap: .55rem; padding: clamp(1.25rem, 2vw, 1.75rem); }
.card__img { position: absolute; inset: 0; aspect-ratio: auto; margin: 0; }
.card__img img { transform: scale(1.04); transition: transform 1.4s var(--ease), filter .9s var(--ease); }
.card__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(39, 36, 32, 0) 35%, rgba(39, 36, 32, .72) 100%); }
.card__n, .card__t, .card__d, .card__go { position: relative; z-index: 1; }
.card__n { color: rgba(249, 248, 244, .85); }
.card__t { color: #fff; }
.card__d { color: rgba(249, 248, 244, .88); max-width: 26em; }
.card__go { color: #fff; }

@media (max-width: 63.99em) {
  .cards { overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--m)); padding: 0 var(--m) .5rem; scrollbar-width: none; }
  .cards::-webkit-scrollbar { display: none; }
  .card { flex: 0 0 min(78vw, 22rem); height: 26rem; scroll-snap-align: start; }
}


.js .cards .card.reveal { opacity: 0; transform: translateY(30px); transition: opacity .9s var(--ease), transform .9s var(--ease), flex-grow .9s cubic-bezier(.65, 0, .25, 1); }
.js .cards .card.reveal.is-in { opacity: 1; transform: none; }
.js .cards .card:nth-child(2) { transition-delay: .1s, .1s, 0s; }
.js .cards .card:nth-child(3) { transition-delay: .2s, .2s, 0s; }
.js .cards .card:nth-child(4) { transition-delay: .3s, .3s, 0s; }
@media (prefers-reduced-motion: reduce) {
  .card, .card__img img, .card__d, .card__go, .js .cards .card.reveal { transition: none !important; }
  .js .cards .card.reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   02 — Cartes services en accordéon (photos plus basses)
   ========================================================================== */
@media (max-width: 63.99em) { .card { height: 21rem; } }
@media (min-width: 64em) {
  .cards { height: clamp(27rem, 35vw, 37rem); }
  .card { flex: 1 1 0; min-width: 0; transition: flex-grow .9s cubic-bezier(.65, 0, .25, 1); }
  .card.is-active { flex-grow: 2.8; }
  .card__img img { filter: saturate(.75) brightness(.92); }
  .card.is-active .card__img img { transform: scale(1); filter: none; }
  .card__t { white-space: nowrap; }
  .card__d, .card__go { opacity: 0; transform: translateY(10px); max-height: 0; overflow: hidden; transition: opacity .5s var(--ease), transform .5s var(--ease), max-height .6s var(--ease); }
  .card.is-active .card__d, .card.is-active .card__go { opacity: 1; transform: none; max-height: 6rem; transition-delay: .35s; }
  .card__go .ico { transition: transform .5s var(--ease); }
  .card.is-active a:hover .card__go .ico { transform: translate(3px, -3px); }
  .card:not(.is-active) .card__t { writing-mode: vertical-rl; transform: rotate(180deg); align-self: flex-start; font-size: .8125rem; letter-spacing: .14em; }
  .card:not(.is-active) .card__n { align-self: flex-start; }
}
/* Accordéon plus doux : la photo garde toujours la même taille (la carte s'ouvre comme une fenêtre), pas de zoom */
@media (min-width: 64em) {
  .card { transition: flex-grow 1.1s cubic-bezier(.45, 0, .2, 1); }
  .card__img picture { position: absolute; top: 0; bottom: 0; left: 50%; width: calc(min(100vw, 120rem) * .52); height: 100%; transform: translateX(-50%); }
  .card__img img, .card.is-active .card__img img, .card a:hover .card__img img { transform: none; transition: filter .9s var(--ease); }
}

/* ===== Méthode : onglets d'étapes 01/02/03 + lien « Confier son bien » ===== */
.slides__tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin: 2rem 0 0; }
.slides__tab { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; padding: .5rem 0 0; border: 0; background: none; color: var(--taupe); font: inherit; text-align: left; cursor: pointer; transition: color .4s var(--ease); }
.slides__tab:hover, .slides__tab.is-on { color: var(--ink); }
.slides__tn { font-size: .6875rem; font-weight: 600; letter-spacing: .14em; font-variant-numeric: tabular-nums; }
.slides__tl { font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.slides__bar { position: relative; order: -1; width: 100%; height: 2px; margin-bottom: .45rem; background: rgba(156, 144, 129, .28); overflow: hidden; }
.slides__bar i { position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.slides__tab.is-done .slides__bar i { transform: scaleX(1); background: var(--taupe); }
.slides__tab.is-on .slides__bar i { animation: slides-bar 6.5s linear forwards; }
[data-slides].is-paused .slides__tab.is-on .slides__bar i { animation-play-state: paused; }
[data-slides].is-static .slides__tab.is-on .slides__bar i { animation: none; transform: scaleX(1); }
@keyframes slides-bar { to { transform: scaleX(1); } }
.slides__tab:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

.slides__steps { margin-top: 1.75rem; min-height: 9.5rem; }
.slides__n { display: block; font-family: var(--font); font-size: clamp(2.6rem, 2rem + 2vw, 3.4rem); font-weight: 300; line-height: 1; letter-spacing: -.04em; color: var(--taupe); }
.slides__step.is-on { animation: step-in .9s cubic-bezier(.22, .61, .36, 1); }
.slides__step.is-on .slides__n { animation: step-n .9s cubic-bezier(.22, .61, .36, 1); }
@keyframes step-in { from { opacity: 0; transform: translateX(1.5rem); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes step-n { from { opacity: 0; transform: translateY(60%); } to { opacity: 1; transform: none; } }

.slides__nav { gap: 1rem; margin-top: 2rem; }
.slides__cta { display: inline-flex; align-items: center; gap: .75rem; padding: .95rem 1.4rem; background: var(--ink); color: var(--bg); font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; transition: background .4s var(--ease); }
.slides__cta .ico { transition: transform .4s var(--ease); }
.slides__cta:hover { background: var(--taupe-d); }
.slides__cta:hover .ico { transform: translate(3px, -3px); }
@media (max-width: 30em) {
  .slides__tabs { gap: .5rem; }
  .slides__tl { font-size: .625rem; letter-spacing: .04em; }
  .slides__nav { gap: .6rem; }
  .slides__cta { padding: .9rem 1rem; gap: .5rem; letter-spacing: .06em; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .slides__step.is-on, .slides__step.is-on .slides__n { animation: none; } }

.cards .card:nth-child(2) .card__img img { object-position: 40% 40%; }

/* Services : trio de photos de piscines */
.pair--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pair--3 img[src*="piscine-palmiers"] { object-position: 55% 60%; }
.pair--3 img[src*="transat-cocktail"] { object-position: 50% 45%; }
.pair--3 img[src*="piscine-tropicale"] { object-position: 50% 50%; }
.pair--3 img[src*="fillette-chapeau"] { object-position: 50% 68%; }
@media (max-width: 40em) {
  .pair--3 { grid-template-columns: 1fr 1fr; }
  .pair--3 > :first-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
}
/* Bande des palmiers : plus fine, moins d'espace avant et après */
.full { aspect-ratio: 16 / 9; }
@media (min-width: 48em) { .full { aspect-ratio: 3 / 1; } }
.ed--collage { padding-bottom: calc(var(--sec) * .5); }
.full + .places { padding-top: calc(var(--sec) * .5); }
/* Nos services : en-tête photo plus fin */
.hx--slim { min-height: clamp(30rem, 62svh, 44rem); }
.hx--slim .hx__media img { object-position: 50% 55%; }
.hx--slim .hx__media img[src*="cuisine-noyer"] { object-position: 50% 60%; }
.hx--slim .hx__media img[src*="fleurs-rouges"] { object-position: 50% 25%; }


/* ===== Confier son bien : Rémunération — « vous gagnez, nous gagnons » ===== */
.rem__head { display: grid; gap: 1.75rem var(--g); align-items: end; }
.rem__head .h-1, .rem__head .lead { margin: 0; }
@media (min-width: 64em) { .rem__head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.rem__k { margin: 0 0 1rem; font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--taupe-d); }
.rem__head + .rem__k { margin-top: clamp(4rem, 8vw, 6.5rem); }
.rem__pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0 var(--g); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-2); }
.rem__pillars li { padding: 1.5rem 0 1.75rem; border-bottom: 1px solid var(--line); }
.rem__n { display: block; margin-bottom: .9rem; font-size: .75rem; font-weight: 600; letter-spacing: .14em; color: var(--taupe); font-variant-numeric: tabular-nums; }
.rem__pillars .h-3 { margin: 0 0 .6rem; }
.rem__pillars p { margin: 0; color: var(--ink-2); max-width: 22em; }

.rem__terms { display: grid; gap: 3rem; margin-top: clamp(4.5rem, 9vw, 7.5rem); align-items: center; }
@media (min-width: 64em) { .rem__terms { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(3rem, 7vw, 7rem); } }
.rem__win { margin: 0 0 1.75rem; font-size: clamp(2.6rem, 1.3rem + 3.8vw, 5rem); line-height: 1; letter-spacing: -.045em; text-transform: uppercase; }
.rem__win em { font-style: normal; color: var(--taupe); }
.rem__lede { margin: 0 0 .9rem; font-size: clamp(1.05rem, .98rem + .3vw, 1.25rem); line-height: 1.5; max-width: 30em; }
.rem__lede strong { font-weight: 600; }
.rem__rate .fine { margin: 0; }
.rem__flow { margin: 1.75rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--line); color: var(--ink-2); max-width: 32em; }

/* Carte exemple : taupe, deux barres proportionnelles qui avancent ensemble */
.rem__ex { padding: clamp(1.75rem, 3.5vw, 3rem); background: #7A6F62; color: #F9F8F4; }
.rem__ex .rem__k { color: rgba(249, 248, 244, .75); margin-bottom: 1.75rem; }
.rem__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .5rem 1.5rem; }
.rem__lab { margin: 0; font-size: .9375rem; }
.rem__lab span { display: block; margin-top: .2rem; font-size: .8125rem; color: rgba(249, 248, 244, .7); }
.rem__val { margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: -.035em; line-height: 1; }
.rem__row--you .rem__val { font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.75rem); }
.rem__row--us .rem__val { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); }
.rem__bar { grid-column: 1 / -1; position: relative; display: block; height: .55rem; margin-top: .9rem; background: rgba(249, 248, 244, .14); overflow: hidden; }
.rem__bar i { position: absolute; inset: 0 auto 0 0; width: 100%; background: #F9F8F4; transform-origin: left; }
.rem__row--us .rem__bar i { width: 25%; background: #D9CFC2; }
.js .rem__ex .rem__bar i { transform: scaleX(0); transition: transform 1.4s cubic-bezier(.22, .61, .36, 1); }
.js .rem__ex.is-in .rem__bar i { transform: scaleX(1); }
.js .rem__ex.is-in .rem__row--us .rem__bar i { transition-delay: .55s; }
.rem__link { position: relative; display: flex; align-items: center; gap: .9rem; margin: 1.1rem 0; font-size: .75rem; font-weight: 600; letter-spacing: .14em; color: rgba(249, 248, 244, .85); }
.rem__link::before, .rem__link::after { content: ""; flex: 1; border-top: 1px dashed rgba(249, 248, 244, .35); }
.rem__link span { padding: .35rem .8rem; border: 1px solid rgba(249, 248, 244, .45); border-radius: 999px; }
.rem__ex .fine { margin: 1.75rem 0 0; color: rgba(249, 248, 244, .7); }
@media (prefers-reduced-motion: reduce) { .js .rem__ex .rem__bar i { transform: none; transition: none; } }

.rem__more { margin-top: clamp(4.5rem, 9vw, 7.5rem); }
.rem__accord { font-weight: 600; }
.hx--slim .hx__media img[src*="salon-beige"] { object-position: 50% 60%; }
.hx--slim .hx__media img[src*="cuisine-blanche"] { object-position: 50% 55%; }
.hx--slim .hx__media img[src*="salon-canapes"] { object-position: 50% 55%; }

/* ===== Confier son bien : version visuelle ===== */
/* Symboles au trait qui se dessinent à l'apparition */
.ico--draw { width: 100%; height: 100%; }
.js .ico--draw .d { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.45, 0, .2, 1) .15s; }
.js .is-in .ico--draw .d, .js .is-in.ico--draw .d { stroke-dashoffset: 0; }

/* 01 — Parcours : ligne qui se trace au défilement + photo qui suit l'étape */
.jr { display: grid; gap: 3rem; margin-top: clamp(3rem, 6vw, 5rem); }
@media (min-width: 64em) { .jr { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(3rem, 7vw, 7rem); align-items: start; } }
.jr__steps { position: relative; margin: 0; padding: 0; list-style: none; --jp: 0; }
.jr__steps::before, .jr__steps::after { content: ""; position: absolute; left: 1.75rem; top: 1.75rem; bottom: 1.75rem; width: 1px; background: var(--line-2); }
.jr__steps::after { background: var(--taupe-d); transform-origin: top; transform: scaleY(var(--jp)); }
.jr__step { position: relative; display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 1.5rem; padding: 0 0 clamp(2.5rem, 5vw, 3.75rem); }
.jr__step:last-child { padding-bottom: 0; }
.jr__ico { position: relative; z-index: 1; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; padding: .85rem; border: 1px solid var(--line-2); border-radius: 50%; background: var(--bg); color: var(--taupe-d); transition: background .6s var(--ease), color .6s var(--ease), border-color .6s var(--ease); }
.jr__step.is-active .jr__ico { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.jr__n { display: block; margin: .35rem 0 .5rem; font-size: .75rem; font-weight: 600; letter-spacing: .14em; color: var(--taupe); font-variant-numeric: tabular-nums; }
.jr__step .h-3 { margin: 0 0 .5rem; transition: color .6s var(--ease); }
.jr__step p { margin: 0; color: var(--ink-2); max-width: 30em; }
.js .jr__step:not(.is-active) .h-3 { color: var(--ink-2); }
.jr__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #EBE7DE; }
@media (min-width: 64em) { .jr__media { position: sticky; top: calc(var(--hd, 5rem) + 2rem); } }
@media (max-width: 63.99em) { .jr__media { order: -1; aspect-ratio: 16 / 10; } }
.jr__ph { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.03); transition: opacity 1.1s var(--ease), transform 2.4s var(--ease); }
.jr__ph.is-on { opacity: 1; transform: none; }
.jr__ph picture, .jr__ph img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 02 — Rémunération : symbole au-dessus de chaque volet */
.rem__ico { display: block; width: 2.25rem; height: 2.25rem; margin-bottom: 1.1rem; color: var(--taupe-d); }
.rem__pillars li:nth-child(2) .ico--draw .d { transition-delay: .35s; }
.rem__pillars li:nth-child(3) .ico--draw .d { transition-delay: .55s; }
.rem__pillars li:nth-child(4) .ico--draw .d { transition-delay: .75s; }

/* Bande photo fine entre deux sections */
.full--band { aspect-ratio: 16 / 9; }
@media (min-width: 48em) { .full--band { aspect-ratio: 5 / 2; } }

/* 03 — Ce qui reste entre vos mains : cartes + photo */
.ctl { display: grid; gap: 2.5rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 64em) { .ctl { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2.5rem, 5vw, 5rem); align-items: stretch; } }
.ctl__list { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--line); border: 1px solid var(--line); }
.ctl__item { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 1.25rem; align-items: start; padding: clamp(1.25rem, 2.5vw, 1.75rem); background: var(--tint); transition: background .5s var(--ease); }
.ctl__item:hover { background: var(--bg); }
.ctl__ico { display: block; width: 2.75rem; height: 2.75rem; color: var(--taupe-d); }
.ctl__t { margin: .2rem 0 .35rem; font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem); font-weight: 500; letter-spacing: -.01em; }
.ctl__item p { margin: 0; font-size: .9375rem; color: var(--ink-2); max-width: 34em; }
.js .ctl__item:nth-child(2) { transition-delay: .08s; }
.ctl__ph { margin: 0; min-height: 24rem; overflow: hidden; background: #EBE7DE; }
.ctl__ph picture, .ctl__ph img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
@media (max-width: 63.99em) { .ctl__ph { min-height: 0; aspect-ratio: 4 / 3; } }

/* 04 — Potentiel locatif : photo en fond */
.est { position: relative; overflow: hidden; color: #F9F8F4; background: #3A3631; }
.est__bg { position: absolute; inset: 0; }
.est__bg picture, .est__bg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.est__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(28, 25, 22, .25), rgba(28, 25, 22, .72) 55%); }
.est .wrap { position: relative; z-index: 1; }
.est .label { color: rgba(249, 248, 244, .85); }
.est .label::before { background: #D9CFC2; }
.est .label[data-rule]::after { background: rgba(249, 248, 244, .3); }
.est .duo__body p:not(.est__cta) { color: rgba(249, 248, 244, .88); }
.est .lead { color: #F9F8F4 !important; }
.est__cta { margin: 2rem 0 0; }

/* 05 — Questions fréquentes : bulle au trait, ouverture fluide */
.faq__sym { display: block; width: 2.75rem; height: 2.75rem; margin-bottom: 1.25rem; color: var(--taupe-d); }
.faq details > .faq__a { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .js .ico--draw .d { stroke-dashoffset: 0; transition: none; }
  .jr__steps::after { transform: none; }
  .jr__ph { transition: none; }
}

/* ===== Rémunération : plus d'air (cartes, bande, tuiles) ===== */
.rem { padding-bottom: var(--sec); }
.rem__cards { display: grid; gap: var(--g); margin: 0; padding: 0; list-style: none; }
@media (min-width: 40em) { .rem__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .rem__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rem__card { padding: clamp(1.75rem, 2.5vw, 2.25rem); background: var(--tint); transition: background .5s var(--ease), transform .5s var(--ease); }
.rem__card:hover { background: #EDE9E0; transform: translateY(-4px); }
.rem__card .rem__ico { width: 2.5rem; height: 2.5rem; margin-bottom: 2.5rem; }
.rem__card .rem__n { margin-bottom: .6rem; }
.rem__card .h-3 { margin: 0 0 .7rem; }
.rem__card p { margin: 0; color: var(--ink-2); }
.js .rem__card:nth-child(2) .ico--draw .d { transition-delay: .3s; }
.js .rem__card:nth-child(3) .ico--draw .d { transition-delay: .45s; }
.js .rem__card:nth-child(4) .ico--draw .d { transition-delay: .6s; }

.rem__band { margin-top: clamp(5rem, 10vw, 8rem); padding-block: clamp(4.5rem, 9vw, 7.5rem); background: var(--tint); }
.rem__band .rem__terms { margin-top: 0; }
.rem__flow { display: flex; gap: 1rem; align-items: flex-start; margin-top: 2.25rem; padding: 1.25rem 0 0; border-top: 1px solid var(--line-2); }
.rem__flowico { flex: none; display: block; width: 2rem; height: 2rem; color: var(--taupe-d); }

.rem__costs { margin-top: clamp(5rem, 10vw, 8rem); }
.rem__costhead { display: grid; gap: 1.25rem var(--g); align-items: end; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.rem__costhead .h-2 { margin: 0; }
.rem__costhead p { margin: 0; color: var(--ink-2); max-width: 34em; }
@media (min-width: 64em) { .rem__costhead { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.rem__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); gap: var(--g); margin: 0; padding: 0; list-style: none; }
.rem__tile { display: flex; flex-direction: column; gap: .4rem; padding: 1.5rem 1.25rem 1.6rem; border: 1px solid var(--line-2); transition: border-color .5s var(--ease), background .5s var(--ease); }
.rem__tile:hover { border-color: var(--taupe); background: var(--tint); }
.rem__tico { display: block; width: 2.1rem; height: 2.1rem; margin-bottom: 1.25rem; color: var(--taupe-d); }
.rem__tile strong { font-weight: 500; font-size: 1rem; letter-spacing: -.01em; }
.rem__tile span:not(.rem__tico) { font-size: .875rem; color: var(--ink-2); line-height: 1.45; }
.rem__costs .note { margin-top: 1.75rem; }
@media (prefers-reduced-motion: reduce) { .rem__card:hover { transform: none; } }
@media (max-width: 40em) {
  .rem__tiles { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .rem__tile { padding: 1.1rem 1rem 1.2rem; }
  .rem__tico { margin-bottom: .8rem; width: 1.8rem; height: 1.8rem; }
  .rem__tile:last-child { grid-column: 1 / -1; }
}
/* En-tête « Confier son bien » : couleurs de la photo conservées, voile très léger */
.hx--light .hx__shade { background: radial-gradient(ellipse 46% 42% at 50% 58%, rgba(30, 26, 22, .5) 0%, rgba(30, 26, 22, .22) 55%, rgba(30, 26, 22, 0) 100%), linear-gradient(180deg, rgba(30, 26, 22, .28) 0%, rgba(30, 26, 22, 0) 22%, rgba(30, 26, 22, 0) 80%, rgba(30, 26, 22, .18) 100%); }
.hx--light .hx__in { text-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 26px rgba(0, 0, 0, .45); }
.hx--light .hx__lead { font-weight: 500; }
/* Cadre de texte des en-têtes : neutre par défaut, panneau crème sur « Confier son bien » */
.hx__card { display: contents; }
.hx--light .hx__shade { background: linear-gradient(180deg, rgba(30, 26, 22, .4) 0%, rgba(30, 26, 22, 0) 24%); }
.hx--light .hx__card { display: flex; flex-direction: column; align-items: center; max-width: 52rem; padding: clamp(1.75rem, 3.5vw, 3rem) clamp(1.5rem, 4.5vw, 4rem); background: rgba(249, 248, 244, .84); -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1); box-shadow: 0 30px 60px -30px rgba(40, 34, 28, .35); }
.hx--light .hx__in { text-shadow: none; }
.hx--light .hx__card .kicker { color: var(--taupe-d); }
.hx--light .hx__card .hx__title { color: var(--ink); }
.hx--light .hx__card .hx__lead { color: var(--ink-2); font-weight: 400; margin-top: 1.25rem; }
.full--band img[src*="maison-jardin"] { object-position: 50% 38%; }

/* ===== Nos services : version visuelle ===== */
/* Sommaire des quatre volets */
.svc-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g); margin-bottom: clamp(4.5rem, 9vw, 7.5rem); }
@media (min-width: 64em) { .svc-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.svc-nav__i { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 1rem; align-items: center; padding: clamp(1.1rem, 2vw, 1.5rem); background: var(--tint); color: inherit; text-decoration: none; transition: background .5s var(--ease), transform .5s var(--ease); }
.svc-nav__i:hover { background: #EDE9E0; transform: translateY(-3px); }
.svc-nav__ico { grid-row: 1 / span 2; display: block; width: 2.4rem; height: 2.4rem; color: var(--taupe-d); }
.svc-nav__n { font-size: .6875rem; font-weight: 600; letter-spacing: .14em; color: var(--taupe); }
.svc-nav__t { font-size: clamp(.9rem, .85rem + .25vw, 1.05rem); letter-spacing: -.01em; }

/* Les volets : plus d'air, un visuel sous chaque titre */
.pillar { padding-bottom: clamp(5.5rem, 11vw, 10rem); }
.svc-vis { margin: clamp(2rem, 4vw, 3rem) 0 0; }
.svc-k { margin: 0 0 1.25rem; font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--taupe-d); }
.pillar__body .list li { padding-block: 1rem; }

/* 01 — photo + étiquettes */
.svc-photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #EBE7DE; }
.svc-photo picture, .svc-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.svc-chips { position: absolute; left: 1rem; bottom: 1rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.svc-chips span { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .8rem; background: rgba(249, 248, 244, .9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: .75rem; letter-spacing: .04em; }
.svc-chips .ico { width: 1rem; height: 1rem; color: var(--taupe-d); }

/* 02 — courbe de saison (illustration) sur carte taupe */
.svc-chart { padding: clamp(1.5rem, 3vw, 2.25rem); background: #7A6F62; color: #F9F8F4; }
.svc-chart .svc-k { color: rgba(249, 248, 244, .8); }
.svc-chart__svg { display: block; width: 100%; height: auto; }
.svc-chart__area { fill: rgba(249, 248, 244, .1); stroke: none; }
.svc-chart__base { stroke: rgba(249, 248, 244, .3); stroke-width: 1; }
.svc-chart__line { fill: none; stroke: #F9F8F4; stroke-width: 2.5; stroke-linecap: round; }
.svc-chart__ev { fill: #D9CFC2; stroke: #7A6F62; stroke-width: 2; }
.svc-chart__lab { fill: rgba(249, 248, 244, .85); font-size: 15px; letter-spacing: .06em; }
.svc-chart__m text { fill: rgba(249, 248, 244, .65); font-size: 14px; }
.js .svc-chart__line { transition-duration: 2.4s !important; }
.svc-chart figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; margin-top: 1rem; font-size: .8125rem; }
.svc-chart__key { display: inline-flex; align-items: center; gap: .5rem; }
.svc-chart__key i { width: .7rem; height: .7rem; border-radius: 50%; background: #D9CFC2; }
.svc-chart .fine { color: rgba(249, 248, 244, .65); margin: 0; }

/* 03 — liste de contrôle qui se coche */
.svc-check { padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--tint); }
.svc-check ul { margin: 0; padding: 0; list-style: none; }
.svc-check li { display: flex; align-items: center; gap: .9rem; padding: .8rem 0; border-top: 1px solid var(--line); font-size: 1rem; }
.svc-check__ok { flex: none; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; padding: .3rem; border-radius: 50%; background: var(--ink); color: var(--bg); }
.svc-check li:nth-child(2) .ico--draw .d { transition-delay: .35s; }
.svc-check li:nth-child(3) .ico--draw .d { transition-delay: .55s; }
.svc-check li:nth-child(4) .ico--draw .d { transition-delay: .75s; }
.svc-check li:nth-child(5) .ico--draw .d { transition-delay: .95s; }

/* 04 — avant / pendant / après */
.svc-tl { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(2rem, 4vw, 3rem); padding: 0; list-style: none; }
.svc-tl::before { content: ""; position: absolute; top: 1.75rem; left: 16%; right: 16%; height: 1px; background: var(--taupe); transform-origin: left; transform: scaleX(0); transition: transform 1.6s var(--ease) .2s; }
.svc-tl.is-in::before, html:not(.js) .svc-tl::before { transform: none; }
.svc-tl li { position: relative; display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center; }
.svc-tl__ico { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin-bottom: .6rem; padding: .85rem; border: 1px solid var(--taupe); border-radius: 50%; background: var(--bg); color: var(--taupe-d); }
.svc-tl strong { font-weight: 500; font-size: 1.05rem; }
.svc-tl span:not(.svc-tl__ico) { font-size: .8125rem; color: var(--ink-2); max-width: 12em; }

/* Reporting : tuiles illustrées */
.svc-rep { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--g); margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; }
.svc-rep__i { padding: clamp(1.4rem, 2.5vw, 1.9rem); background: var(--bg); transition: transform .5s var(--ease); }
.svc-rep__i:hover { transform: translateY(-3px); }
.svc-rep__ico { display: block; width: 2.3rem; height: 2.3rem; margin-bottom: 1.5rem; color: var(--taupe-d); }
.svc-rep dt { margin-bottom: .45rem; font-size: 1.05rem; letter-spacing: -.01em; }
.svc-rep dd { margin: 0; font-size: .875rem; color: var(--ink-2); }

/* Expérience voyageur : services en tuiles */
.svc-tags { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--g); margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; list-style: none; }
.svc-tags li { display: flex; flex-direction: column; gap: 1.1rem; padding: 1.4rem 1.2rem; border: 1px solid var(--line-2); font-size: .9375rem; transition: background .5s var(--ease), border-color .5s var(--ease); }
.svc-tags li:hover { background: var(--tint); border-color: var(--taupe); }
.svc-tags__ico { display: block; width: 2.1rem; height: 2.1rem; color: var(--taupe-d); }

@media (max-width: 40em) {
  .svc-tl { grid-template-columns: 1fr; gap: 1.5rem; }
  .svc-tl::before { display: none; }
  .svc-tl li { flex-direction: row; text-align: left; gap: 1rem; align-items: center; }
  .svc-tl__ico { margin: 0; flex: none; }
  .svc-tags { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { .svc-tl::before { transform: none; transition: none; } .svc-nav__i:hover, .svc-rep__i:hover { transform: none; } }
@media (min-width: 64em) {
  .svc-rep { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .svc-rep__i:first-child { grid-column: span 2; }
}
@media (min-width: 40em) and (max-width: 63.99em) { .svc-rep { grid-template-columns: repeat(2, minmax(0, 1fr)); } .svc-rep__i:first-child { grid-column: span 2; } }
.svc-rep__i:first-child { background: #7A6F62; color: #F9F8F4; }
.svc-rep__i:first-child .svc-rep__ico { color: #F9F8F4; }
.svc-rep__i:first-child dt { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.75rem); }
.svc-rep__i:first-child dd { color: rgba(249, 248, 244, .8); }

/* ===== Notre approche : version visuelle ===== */
/* 01 — ce que l'on apporte */
.apr-gives { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g); margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; padding: 0; list-style: none; }
@media (min-width: 64em) { .apr-gives { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.apr-gives li { display: flex; flex-direction: column; gap: .3rem; padding-top: 1.25rem; border-top: 1px solid var(--line-2); }
.apr-gives__ico { display: block; width: 2.3rem; height: 2.3rem; margin-bottom: .9rem; color: var(--taupe-d); }
.apr-gives strong { font-weight: 500; font-size: 1.1rem; letter-spacing: -.01em; }
.apr-gives span:not(.apr-gives__ico) { font-size: .875rem; color: var(--ink-2); }
.apr-gives li:nth-child(2) .ico--draw .d { transition-delay: .3s; }
.apr-gives li:nth-child(3) .ico--draw .d { transition-delay: .45s; }
.apr-gives li:nth-child(4) .ico--draw .d { transition-delay: .6s; }

/* 02 — principes en cartes */
.apr-princ { display: grid; gap: var(--g); margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; padding: 0; list-style: none; }
@media (min-width: 48em) { .apr-princ { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.apr-princ__i { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 1.5rem; padding: clamp(1.75rem, 3.5vw, 2.75rem); background: var(--bg); transition: transform .5s var(--ease); }
.apr-princ__i:hover { transform: translateY(-3px); }
.apr-princ__ico { grid-row: 1 / span 3; display: grid; place-items: center; width: 4rem; height: 4rem; padding: 1rem; border-radius: 50%; background: var(--tint); color: var(--taupe-d); }
.apr-princ__n { font-size: .75rem; font-weight: 600; letter-spacing: .14em; color: var(--taupe); }
.apr-princ__i .h-2 { margin: .3rem 0 .7rem; text-transform: uppercase; }
.apr-princ__i p { margin: 0; color: var(--ink-2); max-width: 30em; }

/* 03 — chiffre clé + dossier de la maison */
.apr-count { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.75rem; }
.apr-count__n { font-size: clamp(3rem, 2rem + 4vw, 5.5rem); line-height: 1; letter-spacing: -.05em; color: var(--taupe-d); }
.apr-count__t { font-size: .9375rem; color: var(--ink-2); max-width: 14em; }
.apr-file { padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--tint); }
.apr-file__k { display: flex; align-items: center; gap: .8rem; margin: 0 0 1.25rem; font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--taupe-d); }
.apr-file__ico { display: block; width: 1.8rem; height: 1.8rem; }
.apr-file dl { margin: 0; }
.apr-file dl > div { display: grid; grid-template-columns: 1.9rem minmax(6rem, auto) 1fr; gap: .9rem; align-items: center; padding: .85rem 0; border-top: 1px solid var(--line); }
.apr-file__ri { display: block; width: 1.6rem; height: 1.6rem; color: var(--taupe-d); }
.apr-file dt { font-weight: 500; font-size: .9375rem; }
.apr-file dd { margin: 0; font-size: .875rem; color: var(--ink-2); }
@media (max-width: 40em) { .apr-file dl > div { grid-template-columns: 1.9rem 1fr; } .apr-file dd { grid-column: 2; } }

/* 04 — types de biens, et ce qui peut faire dire non */
.apr-props { align-items: stretch; }
.apr-yes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g); margin: 0; padding: 0; list-style: none; }
.apr-yes li { display: flex; flex-direction: column; gap: 1rem; padding: 1.4rem 1.25rem; background: var(--tint); font-size: .9375rem; }
.apr-yes__ico { display: block; width: 2.3rem; height: 2.3rem; color: var(--taupe-d); }
.apr-props > div:last-child { padding: clamp(1.75rem, 3.5vw, 2.5rem); background: #7A6F62; color: #F9F8F4; }
.apr-props > div:last-child .cols2__t { color: #F9F8F4; border-color: rgba(249, 248, 244, .3); }
.apr-no { margin: 0; padding: 0; list-style: none; }
.apr-no li { display: flex; gap: .9rem; align-items: flex-start; padding: .95rem 0; border-top: 1px solid rgba(249, 248, 244, .22); font-size: .9375rem; }
.apr-no__ico { flex: none; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border: 1px solid rgba(249, 248, 244, .5); border-radius: 50%; }
.apr-no__ico .ico { width: 1rem; height: 1rem; }
.apr-props > div:last-child .note { color: rgba(249, 248, 244, .8); }
@media (max-width: 30em) { .apr-yes { grid-template-columns: 1fr; } }
/* Nos services : photo de l'îlot en marbre, bande plus fine */
.inline-photo:has(img[src*="ilot-marbre"]) .ph--pano { aspect-ratio: 16 / 9; }
@media (min-width: 64em) { .inline-photo:has(img[src*="ilot-marbre"]) .ph--pano { aspect-ratio: 7 / 2; } }
.svc-photo img[src*="reflex-main"] { object-position: 50% 58%; }
.svc-chart__evl { stroke: rgba(249, 248, 244, .35); stroke-width: 1; stroke-dasharray: 3 4; }
/* Courbe de saison, version soignée */
.svc-chart__area { stroke: none; }
.svc-chart__grid { stroke: rgba(249, 248, 244, .1); stroke-width: 1; stroke-dasharray: 2 6; }
.svc-chart__line { stroke-width: 2.25; filter: drop-shadow(0 6px 10px rgba(40, 34, 28, .25)); }
.svc-chart__tick { stroke: rgba(249, 248, 244, .45); stroke-width: 1; }
.svc-chart__halo { fill: rgba(249, 248, 244, .14); stroke: rgba(249, 248, 244, .35); stroke-width: 1; }
.svc-chart__ev { fill: #F9F8F4; stroke: none; }
.svc-chart__lab { font-size: 14px; letter-spacing: .12em; text-transform: uppercase; }
.svc-chart__lab--lo { fill: rgba(249, 248, 244, .6); font-size: 12px; }
.svc-chart__m text { font-size: 12px; letter-spacing: .1em; }
/* Nos services : photo de l'appareil plus petite */
@media (min-width: 64em) { .svc-photo { width: 72%; aspect-ratio: 3 / 2; } }
@media (min-width: 64em) {
  .svc-photo { overflow: visible; background: none; aspect-ratio: auto; }
  .svc-photo picture { aspect-ratio: 3 / 2; overflow: hidden; background: #EBE7DE; }
  .svc-photo picture, .svc-photo img { height: auto; }
  .svc-photo img { aspect-ratio: 3 / 2; height: 100%; }
  .svc-chips { position: static; margin-top: .9rem; }
  .svc-chips span { background: var(--tint); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* Nos services : texte aligné sur le titre (haut) et le visuel (bas) */
@media (min-width: 64em) {
  .pillar { row-gap: 0; align-items: start; }
  .pillar__head { display: contents; }
  .pillar__head > .label { grid-column: 1 / -1; grid-row: 1; }
  .pillar__head > .h-1 { grid-column: 1 / span 5; grid-row: 2; margin-top: 0; }
  .pillar__head > .svc-vis { grid-column: 1 / span 5; grid-row: 3; }
  .pillar__body { grid-column: 7 / span 6; grid-row: 2 / span 2; align-self: stretch; display: flex; flex-direction: column; padding-top: .45rem; }
  .pillar__body .lead { margin-top: 0; }
  .pillar__body > .note { margin-top: auto; padding-top: 1.25rem; margin-bottom: 0; }
}
/* Nos services : texte de droite centré verticalement face au titre et au visuel */
@media (min-width: 64em) {
  .pillar__body { justify-content: center; padding-top: 0; }
  .pillar__body > .note { margin-top: 1.5rem; padding-top: 0; }
}
/* Nos services, volet 02 : texte sous le titre à gauche, graphique à droite */
@media (min-width: 64em) {
  #strategie .pillar__head > .svc-vis, #strategy .pillar__head > .svc-vis { grid-column: 7 / span 6; grid-row: 2 / span 2; align-self: center; margin-top: 0; }
  #strategie .pillar__body, #strategy .pillar__body { grid-column: 1 / span 5; grid-row: 3; justify-content: flex-start; margin-top: clamp(2rem, 4vw, 3rem); }
}
/* Volet 02 en miroir : titre + graphique à droite, texte à gauche */
@media (min-width: 64em) {
  #strategie .pillar__head > .h-1, #strategy .pillar__head > .h-1 { grid-column: 7 / span 6; grid-row: 2; }
  #strategie .pillar__head > .svc-vis, #strategy .pillar__head > .svc-vis { grid-column: 7 / span 6; grid-row: 3; align-self: start; margin-top: clamp(2rem, 4vw, 3rem); }
  #strategie .pillar__body, #strategy .pillar__body { grid-column: 1 / span 5; grid-row: 2 / span 2; justify-content: center; margin-top: 0; }
}
/* Notre approche, 01 : dessin de maison à gauche */
.apr-house { display: none; color: var(--taupe-d); }
@media (min-width: 64em) {
  .apr-house { display: block; grid-column: 1 / span 3; grid-row: 2; align-self: center; }
  .apr-house__svg { display: block; width: 100%; height: auto; }
  .js .apr-house .ico--draw .d { transition-duration: 2.6s; }
}
.jr__ph img[src*="clavier-noir"] { object-position: 50% 68%; }
.jr__ph img[src*="plan-maison"] { object-position: 62% 50%; }
.jr__ph img[src*="reservation-en-ligne"] { object-position: 50% 40%; }
.jr__ph img[src*="ordinateur-bois"] { object-position: 50% 50%; }
.jr__ph img[src*="rapport-resultats"] { object-position: 50% 45%; }
.jr__ph img[src*="telephone-annonce"] { object-position: 50% 45%; }
.card__img img[src*="rochers-couchant"] { object-position: 50% 40%; }
/* « Ce qui reste entre vos mains » : cartes compactes, photo à la hauteur des cartes */
@media (min-width: 64em) {
  .ctl { align-items: stretch; }
  .ctl__list { align-self: start; align-content: start; }
  .ctl__ph { position: relative; min-height: 0; }
  .ctl__ph picture { position: absolute; inset: 0; }
}
.ctl__item { padding: clamp(1rem, 1.8vw, 1.35rem) clamp(1.1rem, 2vw, 1.5rem); gap: 1rem; }
.ctl__ico { width: 2.2rem; height: 2.2rem; }
.market__cta { margin: 2rem 0 0; }
.sig svg { color: var(--taupe-d); }
.sig path { stroke-width: 1.4; }
/* Fondatrice : photo aux coins arrondis, rendu net */
.founder__photo { border-radius: 1.25rem; -webkit-mask-image: -webkit-radial-gradient(white, black); }
.founder__photo img { border-radius: inherit; transform: none !important; -webkit-backface-visibility: hidden; }
/* Moins d'espace entre la liste des villes et « Notre secteur » */
.sec--terr { padding-bottom: calc(var(--sec) * .35); }
.sec--terr + .places { padding-top: calc(var(--sec) * .35); }

/* Accueil 01 — Approche : titre souligné à la main, cartes animées */
.ed--ap { position: relative; overflow: hidden; }
.ed--ap::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 45% at 50% 28%, rgba(156, 144, 129, .16), transparent 70%), radial-gradient(40% 35% at 85% 85%, rgba(156, 144, 129, .1), transparent 70%); }
.ed--ap .ed__title em { color: var(--taupe-d); }
.ap-hl { position: relative; display: inline-block; }
.ap-hl__sw { position: absolute; left: -2%; bottom: -.26em; width: 104%; height: .3em; color: var(--taupe); overflow: visible; }
.ap-hl__sw path { fill: none; stroke: currentColor; stroke-width: 3.5; stroke-linecap: round; }
.js .ap-hl__sw .d { transition-duration: 1.3s; transition-delay: .7s; }

.apc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g); max-width: 76rem; margin: clamp(3rem, 6vw, 4.75rem) auto 0; padding: 0; list-style: none; text-align: left; }
@media (min-width: 64em) { .apc { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 30em) { .apc { grid-template-columns: 1fr; } }
.apc__i { position: relative; display: grid; align-content: start; gap: .6rem; padding: clamp(1.4rem, 2.4vw, 2rem); background: #fff; border: 1px solid var(--line); border-radius: 1.25rem; overflow: hidden;
  transition: opacity 1s var(--ease), transform 1.2s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease); }
.apc__i::after { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--taupe-d), var(--taupe), transparent); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease) .4s; }
.js .apc__i.is-in::after, html:not(.js) .apc__i::after { transform: scaleX(1); }
.apc__i:nth-child(2) { transition-delay: .1s; } .apc__i:nth-child(2)::after { transition-delay: .55s; }
.apc__i:nth-child(3) { transition-delay: .2s; } .apc__i:nth-child(3)::after { transition-delay: .7s; }
.apc__i:nth-child(4) { transition-delay: .3s; } .apc__i:nth-child(4)::after { transition-delay: .85s; }
.apc__i:nth-child(2) .ico--draw .d { transition-delay: .3s; }
.apc__i:nth-child(3) .ico--draw .d { transition-delay: .45s; }
.apc__i:nth-child(4) .ico--draw .d { transition-delay: .6s; }
.apc__n { position: absolute; top: 1.1rem; right: 1.3rem; font-size: .75rem; font-weight: 500; letter-spacing: .12em; color: var(--taupe); }
.apc__ico { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; margin-bottom: .6rem; border-radius: 50%; background: var(--tint); color: var(--taupe-d); transition: background .5s var(--ease), color .5s var(--ease), transform .6s var(--ease); }
.apc__ico .ico { width: 1.6rem; height: 1.6rem; }
.apc__i strong { font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.apc__t { font-size: .9375rem; line-height: 1.5; color: var(--ink-2); }
@media (hover: hover) {
  .apc__i:hover { transform: translateY(-.35rem); box-shadow: 0 1.5rem 3rem -1.5rem rgba(39, 39, 39, .22); border-color: rgba(111, 101, 87, .35); transition-delay: 0s; }
  .apc__i:hover .apc__ico { background: var(--taupe-d); color: #fff; transform: rotate(-6deg) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) { .apc__i::after { transform: scaleX(1); transition: none; } }
/* Cartes approche : angles droits, en relief, sans barre */
.apc__i { border-radius: 0; border-color: rgba(39, 39, 39, .06); box-shadow: 0 1px 2px rgba(39, 39, 39, .04), 0 .75rem 1.5rem -.5rem rgba(39, 39, 39, .1), 0 2rem 3.5rem -2rem rgba(111, 101, 87, .28); }
.apc__i::after { display: none; }
@media (hover: hover) { .apc__i:hover { box-shadow: 0 1px 2px rgba(39, 39, 39, .05), 0 1.25rem 2.25rem -.75rem rgba(39, 39, 39, .16), 0 3rem 4.5rem -2.5rem rgba(111, 101, 87, .38); } }

/* Mobile — fin d'ouverture de l'accueil : titre qui tient dans l'écran, texte lisible sur la photo */
@media (max-width: 40em) {
  .hc__l2 { font-size: 1.2rem; letter-spacing: .22em; padding-inline: 1rem; padding-left: calc(1rem + .22em); }
  .hc__photo::after { background: linear-gradient(180deg, rgba(39, 36, 32, .25) 0%, rgba(39, 36, 32, .55) 35%, rgba(39, 36, 32, .6) 70%, rgba(39, 36, 32, .35) 100%); }
  .hc__lead { font-size: 1rem; line-height: 1.6; }
}
/* Mobile — cadrage de la photo d'ouverture : plus à gauche et plus bas (pots, canapé, fauteuil) */
@media (max-width: 47.99em) {
  .hc__photo img { object-position: 43% 50%; transform: translateY(calc(-4svh * (1 - var(--p)))) scale(calc(1.13 - .13 * var(--p))); }
}
/* Mobile — ouverture en format paysage : la photo s'ouvre en bandeau rectangulaire (toute la largeur, sans zoom),
   la promesse au-dessus, le texte et le bouton en dessous */
@media (max-width: 47.99em) {
  .hc:not(.is-static) { --c: calc(49svh - 7svh * var(--p)); --bh: 64vw; --win-w: 72vw; --win-h: 44vw; }
  .hc:not(.is-static) .hc__photo { inset: auto 0; top: calc(var(--c) - var(--bh) / 2); height: var(--bh);
    clip-path: inset(calc((var(--bh) - var(--win-h)) / 2 * (1 - var(--p))) calc((100vw - var(--win-w)) / 2 * (1 - var(--p))) round calc(2px * (1 - var(--p)))); }
  .hc:not(.is-static) .hc__photo img { object-position: 50% 55%; transform: scale(calc(1.05 - .05 * var(--p))); }
  .hc:not(.is-static) .hc__photo::after { display: none; }
  .hc:not(.is-static) .hc__l--top { bottom: calc(100svh - var(--c) + var(--win-h) / 2 + .9rem); }
  .hc:not(.is-static) .hc__l--bot { top: calc(var(--c) + var(--win-h) / 2 + .9rem); }
  .hc:not(.is-static) .hc__l2 { top: calc(var(--c) - var(--bh) / 2 - 3.4rem); color: var(--ink); text-shadow: none; }
  .hc:not(.is-static) .hc__end { top: calc(var(--c) + var(--bh) / 2 + 1.75rem); gap: 1.4rem; }
  .hc:not(.is-static) .hc__lead { color: var(--ink-2); text-shadow: none; }
  .hc:not(.is-static) .hc__end .btn--light { background: var(--ink); color: #fff; }
}
/* Mobile — bandeau sous l'ouverture : trois lignes centrées, symbole au-dessus du texte, séparées par un fin trait */
@media (max-width: 47.99em) {
  .hc__strip { flex-direction: column; align-items: center; gap: 0; padding: 1.75rem 2rem; font-size: .6875rem; letter-spacing: .14em; line-height: 1.75; }
  .hc__strip li { flex-direction: column; gap: .55rem; max-width: 19rem; text-align: center; padding: 1.1rem 0; }
  .hc__strip li + li { position: relative; }
  .hc__strip li + li::before { content: ""; position: absolute; top: -2px; left: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--taupe); opacity: .8; transform: translateX(-50%); }
  .hc__strip .ico { width: 1.35rem; height: 1.35rem; }
}

/* Mobile — typographie : tailles plus mesurées, lignes équilibrées, sans justification */
@media (max-width: 47.99em) {
  body { font-size: .9375rem; }
  .h-1 { font-size: 1.9rem; }
  .ed__title { font-size: 1.95rem; max-width: none; }
  .ed__lead, .ed__text, .places__text, .hc__lead, .cta__text { padding-inline: .75rem; text-wrap: pretty; }
  .cta__title { font-size: 1.75rem; }
  .places__name { font-size: 2.15rem; }
  .mfig__n { font-size: 3.25rem; }
  .trspec__big { font-size: 2.5rem; }
  .ed__lead, .places__text, .founder__text, .lead, .hc__lead, .cta__text, .ed__text { font-size: .96875rem; line-height: 1.65; }
  main p { text-wrap: pretty; }
}
/* Mobile — marges latérales plus généreuses : les textes ne vont plus jusqu'au bord de l'écran */
@media (max-width: 47.99em) { :root { --m: 1.6rem; } }
/* Mobile — circuit des revenus : la mention AMARA devient une note sobre sous un filet, alignée avec le reste */
@media (max-width: 47.99em) {
  .trflow__amara { display: block; margin-top: 1.75rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
  .trflow__dash { display: none; }
  .trflow__pill { display: grid; gap: .45rem; padding: 0; border: 0; border-radius: 0; background: none; font-size: .875rem; line-height: 1.55; }
  .trflow__pill strong { display: flex; align-items: center; gap: .6rem; font-size: .75rem; }
  .trflow__pill strong::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: var(--taupe); }
}

/* Mobile — Fondatrice : portrait mis en avant, nom centré, phrase sur l'hospitalité en encadré */
@media (max-width: 47.99em) {
  .founder--g .founder__body { display: flex; flex-direction: column; }
  .founder__body > :nth-child(1) { order: 1; align-self: center; }
  .founder__body > .founder__photo { order: 2; }
  .founder__body > :nth-child(2) { order: 3; }
  .founder__body > :nth-child(3) { order: 4; }
  .founder__body > :nth-child(5) { order: 5; }
  .founder__body > :nth-child(6) { order: 6; }
  .founder__body > .founder__sub { order: 7; }
  .founder--g .founder__photo { align-self: center; width: 78%; max-width: 20rem; aspect-ratio: 4 / 5; margin: 1.75rem 0 0; border-radius: 1.5rem;
    box-shadow: 0 1.75rem 3rem -1.75rem rgba(39, 39, 39, .45); outline: 1px solid rgba(156, 144, 129, .55); outline-offset: .55rem; }
  .founder--g .founder__name { align-self: center; margin-top: 2.25rem; font-size: 1.5rem; letter-spacing: .3em; padding-left: .3em; }
  .founder--g .founder__name::after { content: ""; display: block; width: 2rem; height: 1px; margin: .9rem auto 0; background: var(--taupe); }
  .founder--g .founder__body > :nth-child(3) { margin-top: 1.5rem; }
  .founder--g .founder__body > :nth-child(5) { position: relative; margin: 1.75rem 0 .5rem; padding: 1.6rem 1.4rem 1.4rem 1.4rem; background: #fff; border-radius: 1rem; box-shadow: 0 1rem 2.5rem -1.5rem rgba(39, 39, 39, .25); color: var(--ink); font-size: 1.02rem; }
  .founder--g .founder__body > :nth-child(5)::before { content: "“"; position: absolute; top: -.85rem; left: 1.1rem; font-size: 3.2rem; line-height: 1; color: var(--taupe); }
  .founder--g .founder__sub { margin-top: 2rem; }
  .founder__sub p { font-size: .96875rem; line-height: 1.65; }
}
/* Mobile — Fondatrice (v2) : portrait recentré sur Clara ; phrase sur l'hospitalité en exergue sobre, centrée entre deux points */
@media (max-width: 47.99em) {
  .founder--g .founder__photo picture { display: block; width: 100%; height: 100%; }
  .founder--g .founder__photo img { width: 116%; max-width: none; height: 100%; margin-left: -2.5%; object-fit: cover; object-position: 50% 22%; }
  .founder--g .founder__body > :nth-child(5) { margin: 2.25rem 0 1.75rem; padding: 1.6rem .5rem; background: none; border-radius: 0; box-shadow: none;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; font-size: 1.1rem; line-height: 1.6; color: var(--taupe-d); text-wrap: balance; }
  .founder--g .founder__body > :nth-child(5)::before { content: ""; top: -3px; left: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--taupe); transform: translateX(-50%); }
  .founder--g .founder__body > :nth-child(5)::after { content: ""; position: absolute; bottom: -3px; left: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--taupe); transform: translateX(-50%); }
}
/* Mobile — Fondatrice (v3) : portrait recadré buste, angles droits, plus petit, effet surélevé */
@media (max-width: 47.99em) {
  .founder--g .founder__photo { width: 64%; max-width: 15.5rem; aspect-ratio: 474 / 580; margin-top: 2rem; border-radius: 0; outline: 0; overflow: hidden; -webkit-mask-image: none; mask-image: none;
    transform: translateY(-.25rem);
    box-shadow: 0 1px 2px rgba(39, 39, 39, .06), 0 .9rem 1.6rem -.6rem rgba(39, 39, 39, .22), 0 2.6rem 3.6rem -2rem rgba(111, 101, 87, .55); }
  .founder--g .founder__photo img { width: 108%; height: auto; max-width: none; margin: -15.2% 0 0 -3.5%; object-fit: fill; border-radius: 0; }
}
@media (max-width: 47.99em) { .js .founder--g .founder__photo[data-reveal-img].is-in { clip-path: inset(-3rem -3rem -4.5rem -3rem); } }
/* Mobile — Fondatrice : prénom en signature (Bodoni italique), légende discrète, sans trait */
@media (max-width: 47.99em) {
  .founder--g .founder__name { margin-top: 2.1rem; padding-left: .28em; font-size: 1.15rem; line-height: 1.2; letter-spacing: .28em; text-align: center; }
  .founder--g .founder__name::after { content: "Fondatrice d’AMARA"; width: auto; height: auto; margin: .85rem 0 0; background: none; font-family: var(--font); font-style: normal; font-size: .6875rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--taupe-d); }
  :lang(en) .founder--g .founder__name::after { content: "Founder of AMARA"; }
}
/* Mobile — en-têtes des pages intérieures : titre et texte plus petits, mieux centrés */
@media (max-width: 47.99em) {
  .hx--page .hx__title { font-size: 1.85rem; line-height: 1.05; }
  .hx--page .hx__lead { max-width: 21rem; margin-inline: auto; padding-inline: .5rem; font-size: .9375rem; line-height: 1.6; text-wrap: pretty; }
  .hx--page .kicker { font-size: .6875rem; }
}
/* Mobile — sommaire des quatre volets (Nos services) : tuiles compactes, symbole au-dessus, texte centré et plus petit */
@media (max-width: 47.99em) {
  .svc-nav { gap: .6rem; margin-bottom: 3.5rem; }
  .svc-nav__i { grid-template-columns: 1fr; grid-template-rows: auto; justify-items: center; align-content: start; row-gap: .4rem; padding: 1.25rem .75rem 1.1rem; text-align: center; }
  .svc-nav__ico { grid-row: auto; width: 1.75rem; height: 1.75rem; margin-bottom: .3rem; }
  .svc-nav__n { font-size: .625rem; }
  .svc-nav__t { font-size: .8125rem; line-height: 1.35; letter-spacing: 0; }
}
/* Mobile — pages intérieures : tailles harmonisées avec l'accueil */
@media (max-width: 47.99em) {
  .statement { font-size: 1.2rem; line-height: 1.5; }
  .h-2 { font-size: 1.4rem; }
  .h-3 { font-size: 1.05rem; }
  .phd__title { font-size: 1.85rem; }
  .rem__val { font-size: 1.2rem; }
  .rem__win { font-size: 2.1rem; }
  .svc-rep dt { font-size: 1rem; }
  .apr-count__n { font-size: 2.4rem; }
  .channels__v { font-size: 1.05rem; overflow-wrap: anywhere; }
  .channels .arr { font-size: 1.1rem; }
}
/* Parcours (Confier son bien) — mobile/tablette : chaque étape a sa photo juste en dessous, qui s'ouvre au défilement */
.jr__inph { display: none; }
@media (max-width: 63.99em) {
  .jr__media { display: none; }
  .jr__inph { display: block; margin: 1.1rem 0 0; aspect-ratio: 16 / 10; overflow: hidden; background: #EBE7DE; }
  .jr__inph picture, .jr__inph img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .jr__inph img[src*="plan-maison"] { object-position: 62% 50%; }
  .jr__inph img[src*="rapport-resultats"], .jr__inph img[src*="telephone-annonce"] { object-position: 50% 45%; }
}
/* Ce qui reste entre vos mains : sans photo, les quatre cartes occupent toute la largeur (2 × 2 sur grand écran) */
@media (min-width: 64em) { .ctl { grid-template-columns: 1fr; } .ctl__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Questionnaire WhatsApp (fenêtre) — volet du bas sur téléphone, carte centrée sur ordinateur */
.wa-q { width: min(34rem, 100%); max-width: 100%; max-height: 100%; margin: auto auto 0; padding: 0; border: 0; background: transparent; color: var(--ink); overflow: visible; }
.wa-q::backdrop { background: rgba(39, 36, 32, 0); transition: background .3s var(--ease); }
.wa-q.is-open::backdrop { background: rgba(39, 36, 32, .45); }
.wa-q__box { position: relative; max-height: 92svh; overflow-y: auto; overscroll-behavior: contain; padding: 1.75rem 1.4rem calc(1.5rem + env(safe-area-inset-bottom)); background: var(--bg); border-radius: 1.25rem 1.25rem 0 0; box-shadow: 0 -1rem 3rem -1rem rgba(39, 39, 39, .3);
  transform: translateY(100%); transition: transform .45s var(--ease); }
.wa-q.is-open .wa-q__box { transform: none; }
@media (min-width: 48em) {
  .wa-q { margin: auto; }
  .wa-q__box { padding: 2.25rem 2.25rem 2rem; border-radius: 1.25rem; transform: translateY(1.5rem); opacity: 0; transition: transform .45s var(--ease), opacity .35s var(--ease); }
  .wa-q.is-open .wa-q__box { opacity: 1; }
}
.wa-q__x { position: absolute; top: .9rem; right: .9rem; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; padding: 0; border: 0; border-radius: 50%; background: var(--tint); color: var(--ink); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.wa-q__k { margin: 0 0 .5rem; font-size: .6875rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--taupe-d); }
.wa-q__t { margin: 0; font-size: 1.35rem; font-weight: 500; letter-spacing: -.01em; }
.wa-q__s { margin: .5rem 0 1.25rem; font-size: .875rem; line-height: 1.5; color: var(--ink-2); }
.wa-q__f { margin: 0; padding: .9rem 0 0; border: 0; border-top: 1px solid var(--line); }
.wa-q__f + .wa-q__f { margin-top: .9rem; }
.wa-q__f legend { float: left; width: 100%; margin: 0 0 .6rem; padding: 0; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.wa-q__in { width: 100%; padding: .8rem .95rem; border: 1px solid var(--line-2); border-radius: .6rem; background: #fff; color: var(--ink); font: inherit; font-size: 1rem; }
.wa-q__in:focus { outline: 2px solid var(--taupe-d); outline-offset: 1px; }
.wa-q__chips { clear: both; display: flex; flex-wrap: wrap; gap: .45rem; }
.wa-q__chip { position: relative; cursor: pointer; }
.wa-q__chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wa-q__chip span { display: inline-block; padding: .55rem .95rem; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; font-size: .875rem; transition: background .2s, color .2s, border-color .2s; }
.wa-q__chip input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.wa-q__chip input:focus-visible + span { outline: 2px solid var(--taupe-d); outline-offset: 2px; }
.wa-q__act { display: grid; gap: .9rem; justify-items: center; margin-top: 1.6rem; }
.wa-q__go { width: 100%; justify-content: space-between; }
.wa-q__skip { font-size: .8125rem; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .wa-q__box, .wa-q::backdrop { transition: none; } }

/* Pages communes (« Conciergerie à … ») */
.cy__head { display: grid; gap: 1.25rem; margin-top: 1.5rem; }
@media (min-width: 64em) { .cy__head { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(3rem, 6vw, 6rem); align-items: end; } }
.cy__head .lead { margin: 0; }
.cy__fine { margin: 1.75rem 0 0; }
.cy__more { margin: 2.25rem 0 0; }

.cy-ev { display: grid; gap: 1px; margin: clamp(2.5rem, 5vw, 3.75rem) 0 0; padding: 0; list-style: none; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 40em) { .cy-ev { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .cy-ev { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cy-ev__i { display: grid; align-content: start; gap: .4rem; padding: clamp(1.25rem, 2.4vw, 1.75rem); background: var(--bg); transition: background .4s var(--ease); }
.cy-ev__i:hover { background: #fff; }
.cy-ev__m { font-size: .6875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--taupe-d); }
.cy-ev__n { font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem); font-weight: 500; letter-spacing: -.01em; }
.cy-ev__d { font-size: .9375rem; line-height: 1.5; color: var(--ink-2); }

.cy-q { display: flex; flex-wrap: wrap; gap: .6rem; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; list-style: none; }
.cy-q li { display: inline-flex; align-items: center; gap: .5rem; padding: .65rem 1.1rem .65rem .9rem; border: 1px solid var(--line-2); border-radius: 999px; background: var(--bg); font-size: .875rem; }
.cy-q .ico { width: 1rem; height: 1rem; color: var(--taupe-d); }

.cy-r { display: grid; gap: clamp(1rem, 2vw, 1.5rem); margin: clamp(2.5rem, 5vw, 3.75rem) 0 0; padding: 0; list-style: none; }
@media (min-width: 40em) { .cy-r { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cy-r__i { padding: clamp(1.4rem, 2.6vw, 2rem); background: #fff; border: 1px solid rgba(39, 39, 39, .06); box-shadow: 0 1px 2px rgba(39, 39, 39, .04), 0 .75rem 1.5rem -.75rem rgba(39, 39, 39, .1); }
.cy-r__ico { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 1rem; border-radius: 50%; background: var(--tint); color: var(--taupe-d); }
.cy-r__ico .ico { width: 1.5rem; height: 1.5rem; }
.cy-r__t { margin: 0 0 .5rem; font-size: 1.05rem; font-weight: 500; }
.cy-r__i p { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--ink-2); }

.cy-a { display: grid; gap: 1.5rem; margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; padding: 0; list-style: none; }
@media (min-width: 40em) { .cy-a { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cy-a__i { display: grid; gap: .35rem; padding-top: 1.25rem; border-top: 1px solid var(--line-2); }
.cy-a__ico { display: block; width: 2rem; height: 2rem; margin-bottom: .6rem; color: var(--taupe-d); }
.cy-a__i strong { font-size: 1rem; font-weight: 500; }
.cy-a__i span:last-child { font-size: .9375rem; color: var(--ink-2); }

.cy-o { padding: clamp(3rem, 6vw, 4.5rem) 0; border-top: 1px solid var(--line); text-align: center; }
.cy-o ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.cy-o a { display: inline-block; padding: .6rem 1.15rem; border: 1px solid var(--line-2); border-radius: 999px; font-size: .875rem; transition: background .3s, color .3s; }
.cy-o a:hover { background: var(--ink); color: #fff; }
.places__link { color: inherit; text-decoration: none; }
.places__link:hover span, .places__link:focus-visible span { color: var(--ink); }
.cy-s { display: grid; gap: 1px; margin: clamp(2.5rem, 5vw, 3.75rem) 0 0; padding: 0; list-style: none; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 40em) { .cy-s { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .cy-s { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cy-s__i { padding: clamp(1.4rem, 2.6vw, 2rem); background: var(--tint); }
.cy-s__ico { display: block; width: 2.2rem; height: 2.2rem; margin-bottom: 1rem; color: var(--taupe-d); }
.cy-s__t { margin: 0 0 .45rem; font-size: 1.05rem; font-weight: 500; }
.cy-s__i p { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--ink-2); }
.cy-w { margin: clamp(2rem, 4vw, 3rem) 0 0; padding: clamp(1.4rem, 2.6vw, 2rem); background: #fff; border: 1px solid rgba(39, 39, 39, .06); box-shadow: 0 1px 2px rgba(39, 39, 39, .04), 0 .75rem 1.5rem -.75rem rgba(39, 39, 39, .1); }
.cy-w__t { margin: 0 0 1rem; font-size: 1rem; font-weight: 500; }
.cy-w ul { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 48em) { .cy-w ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; } }
.cy-w li { display: flex; align-items: baseline; gap: .6rem; font-size: .9375rem; color: var(--ink-2); }
.cy-w .ico { flex: none; width: 1rem; height: 1rem; color: var(--taupe-d); transform: translateY(.15em); }

/* Page « Notre secteur » : cartes des communes */
.ar { display: grid; gap: 1px; margin: clamp(2.5rem, 5vw, 3.75rem) 0 0; padding: 0; list-style: none; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 40em) { .ar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .ar { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ar__i a { display: grid; align-content: start; gap: .5rem; height: 100%; padding: clamp(1.5rem, 2.8vw, 2.25rem); background: var(--bg); color: inherit; text-decoration: none; transition: background .4s var(--ease); }
.ar__i a:hover { background: #fff; }
.ar__n { font-size: .6875rem; font-weight: 600; letter-spacing: .16em; color: var(--taupe); }
.ar__name { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); font-weight: 400; letter-spacing: -.03em; text-transform: uppercase; line-height: 1.05; }
.ar__d { font-size: .9375rem; line-height: 1.55; color: var(--ink-2); }
.ar__go { display: inline-flex; align-items: center; gap: .4rem; margin-top: .75rem; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--taupe-d); }
.ar__i a:hover .ar__go { color: var(--ink); }
.terr__more { margin: 1.5rem 0 0; }
.ft__k a { color: inherit; }
.ft__areas a { color: inherit; text-decoration: none; transition: opacity .3s; }
.ft__areas a:hover { opacity: .65; }

/* Journal : liste des articles */
.jl { display: grid; gap: clamp(2rem, 4vw, 3rem) var(--g); margin: 0; padding: 0; list-style: none; }
@media (min-width: 48em) { .jl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72em) { .jl { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.jl__i a { display: grid; gap: .65rem; color: inherit; text-decoration: none; }
.jl__ph { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #EBE7DE; margin-bottom: .5rem; }
.jl__ph picture, .jl__ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.jl__i a:hover .jl__ph img { transform: scale(1.04); }
.jl__meta { font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--taupe-d); }
.jl__t { font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); font-weight: 500; line-height: 1.3; letter-spacing: -.01em; }
.jl__d { font-size: .9375rem; line-height: 1.6; color: var(--ink-2); }
.jl__go { display: inline-flex; align-items: center; gap: .4rem; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }

/* Journal : article */
.art__head { padding-top: calc(var(--hd) + clamp(2.5rem, 7vh, 5rem)); }
.art__col { max-width: 50rem; }
.art__bc { font-size: .75rem; color: var(--ink-2); }
.art__bc a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.art__meta { margin: 1.5rem 0 0; font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--taupe-d); line-height: 1.8; }
.art__t { margin: 1rem 0 0; font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3.2rem); font-weight: 400; line-height: 1.1; letter-spacing: -.035em; text-wrap: balance; }
.art__lead { margin: 1.5rem 0 0; font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); line-height: 1.65; color: var(--ink-2); }
.art__cover { margin: clamp(2rem, 5vw, 3.5rem) auto 0; max-width: 64rem; }
.art__cover picture { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #EBE7DE; }
.art__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.art__toc { margin: clamp(2.5rem, 5vw, 3.5rem) 0; padding: 1.5rem 1.75rem; background: var(--tint); }
.art__toc-t { margin: 0 0 .75rem; font-size: .6875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--taupe-d); }
.art__toc ol { margin: 0; padding-left: 1.25rem; display: grid; gap: .45rem; font-size: .9375rem; }
.art__toc a { color: inherit; text-decoration: none; }
.art__toc a:hover { text-decoration: underline; text-underline-offset: 3px; }
.art__body { max-width: none; font-size: 1.0625rem; line-height: 1.75; }
.art__body h2 { scroll-margin-top: calc(var(--hd) + 1.5rem); margin-top: 3.5rem; font-size: clamp(1.25rem, 1rem + .9vw, 1.7rem); text-transform: none; font-weight: 500; letter-spacing: -.02em; line-height: 1.25; }
.art__body p { margin: 0 0 1.1em; }
.art__body ol { margin: 0 0 1.25em; padding-left: 1.25rem; display: grid; gap: .75rem; }
.art__body ul li { line-height: 1.6; }
.art__table { margin: 1.5rem 0 2rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.art__table table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: .9375rem; line-height: 1.5; }
.art__table th, .art__table td { padding: .85rem 1rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.art__table thead th { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); border-bottom-color: var(--line-2); }
.art__table tbody th { font-weight: 500; }
.art__cta { margin: clamp(3rem, 6vw, 4.5rem) 0; padding: clamp(1.75rem, 4vw, 2.75rem); background: var(--ink); color: var(--bg); }
.art__cta p { margin: 0 0 1rem; color: rgba(249, 248, 244, .8); }
.art__cta .art__cta-k { font-size: .6875rem; font-weight: 600; letter-spacing: .18em; color: var(--taupe); }
.art__cta .art__cta-t { font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem); line-height: 1.3; color: var(--bg); }
.art__cta .btn { margin-top: .5rem; background: var(--bg); color: var(--ink); }
.art__src, .art__more { margin: 0 0 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.art__src-t { margin: 0 0 .9rem; font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.art__src ol { margin: 0; padding-left: 1.25rem; display: grid; gap: .5rem; font-size: .875rem; color: var(--ink-2); }
.art__more ul { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.art__more a { display: inline-block; padding: .55rem 1rem; border: 1px solid var(--line-2); border-radius: 999px; font-size: .8125rem; color: inherit; text-decoration: none; }
.art__more a:hover { background: var(--ink); color: #fff; }
.art { padding-bottom: clamp(3rem, 6vw, 5rem); }
.cy__read { grid-column: 1 / -1; margin: 2rem 0 0; font-size: .9375rem; color: var(--ink-2); }
.cy__read a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* Liste des communes : huit lignes (Roquefort-les-Pins ajoutée) */
.places__name--5 { --x: 0%; } .places__name--6 { --x: 30%; } .places__name--7 { --x: 14%; } .places__name--8 { --x: 2%; }
@media (min-width: 64em) { .places__name--5 { --x: 6%; } .places__name--6 { --x: 44%; } .places__name--7 { --x: 26%; } .places__name--8 { --x: 12%; } }
@media (max-width: 47.99em) { .places__name--5 { font-size: 1.7rem; } }
.sig__l--roquefort { left: 50%; top: 8%; }
.hx__media img[src*="ville-cannes"] { object-position: 62% 50%; }
.hx__media img[src*="ville-mougins"] { object-position: 50% 58%; }

/* Pages communes : en-tête sobre (fond crème), texte et petite photo côte à côte */
.cyh { padding: calc(var(--hd) + clamp(3rem, 9vh, 6.5rem)) 0 clamp(3rem, 7vw, 5.5rem); }
.cyh__in { display: grid; gap: clamp(2rem, 5vw, 3rem); align-items: center; }
@media (min-width: 64em) { .cyh__in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(3rem, 7vw, 7rem); } }
.cyh__t { margin: 1.25rem 0 0; font-size: clamp(2.2rem, 1rem + 4vw, 4.75rem); line-height: 1; }
.cyh__lead { max-width: 36em; margin: 1.5rem 0 0; font-size: clamp(1rem, .95rem + .3vw, 1.2rem); line-height: 1.65; color: var(--ink-2); }
.cyh__cta { margin: 2rem 0 0; }
.cyh__ph { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: #EBE7DE;
  box-shadow: 0 1px 2px rgba(39, 39, 39, .05), 0 1rem 2rem -1rem rgba(39, 39, 39, .25), 0 2.5rem 4rem -2.5rem rgba(111, 101, 87, .45); }
.cyh__ph picture, .cyh__ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.js .cyh__ph[data-reveal-img].is-in { clip-path: inset(-3rem -3rem -4.5rem -3rem); }
@media (max-width: 63.99em) { .cyh__ph { max-width: 34rem; } }
@media (max-width: 47.99em) { .cyh__t { font-size: 2.1rem; } .cyh__lead { font-size: .96875rem; } }

/* Page « Notre secteur » : en-tête sans photo, texte + carte dessinée */
.arh__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.arh__chips a { display: inline-block; padding: .55rem 1.05rem; border: 1px solid var(--line-2); border-radius: 999px; font-size: .8125rem; color: inherit; text-decoration: none; transition: background .3s, color .3s; }
.arh__chips a:hover { background: var(--ink); color: #fff; }
.arh__map .sig { margin: 0; }
@media (max-width: 63.99em) { .arh__map { max-width: 30rem; } }
/* Carte « Et alentours » (page Notre secteur) */
.ar__i--more a { background: var(--ink); color: var(--bg); }
.ar__i--more a:hover { background: #33302c; }
.ar__i--more .ar__n, .ar__i--more .ar__go { color: var(--taupe); }
.ar__i--more .ar__d { color: rgba(249, 248, 244, .75); }
.ar__i--more a:hover .ar__go { color: var(--bg); }
@media (min-width: 40em) and (max-width: 63.99em) { .ar__i--more { grid-column: 1 / -1; } }
/* Accueil, 04 — Notre secteur : encart « Et alentours » */
.terr__near { max-width: 30rem; margin: 2rem 0 0; padding: 1.25rem 1.4rem; background: #fff; border-left: 2px solid var(--taupe);
  box-shadow: 0 1px 2px rgba(39, 39, 39, .04), 0 .75rem 1.5rem -.75rem rgba(39, 39, 39, .12); }
.terr__near p { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--ink-2); }
.terr__near .terr__near-k { margin-bottom: .4rem; font-size: .6875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--taupe-d); }
.terr__near-go { display: inline-block; margin-top: .75rem; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.terr__near-go:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Encart « Et alentours » de l'accueil : même fond foncé que la carte de la page Notre secteur */
.terr__near { background: var(--ink); border-left-color: var(--taupe); box-shadow: 0 1rem 2rem -1.25rem rgba(39, 39, 39, .45); }
.terr__near p { color: rgba(249, 248, 244, .78); }
.terr__near .terr__near-k { color: var(--taupe); }
.terr__near-go { color: var(--bg); }

/* Fondatrice (ordinateur) : portrait à gauche, texte à droite, citation mise en avant, repères en pied */
.founder__facts { display: flex; flex-wrap: wrap; gap: .75rem 2rem; margin: 2.25rem 0 0; padding: 1.5rem 0 0; list-style: none; border-top: 1px solid var(--line); }
.founder__facts li { display: inline-flex; align-items: center; gap: .55rem; font-size: .75rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.founder__facts .ico { width: 1.1rem; height: 1.1rem; color: var(--taupe-d); }
@media (max-width: 47.99em) { .founder__facts { order: 8; flex-direction: column; gap: .7rem; } }
@media (min-width: 48em) {
  .founder--g .founder__body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(3rem, 7vw, 7rem); max-width: 72rem; }
  .founder--g .founder__body > * { grid-column: 2; }
  .founder--g .founder__body > .founder__photo { grid-column: 1; grid-row: 1 / span 8; align-self: start; position: sticky; top: calc(var(--hd) + 2rem);
    float: none; width: 100%; max-width: 26rem; margin: 0; aspect-ratio: 4 / 5; border-radius: 0; -webkit-mask-image: none; mask-image: none;
    box-shadow: 0 1px 2px rgba(39, 39, 39, .05), 0 1.25rem 2.5rem -1.25rem rgba(39, 39, 39, .28), 0 3rem 5rem -3rem rgba(111, 101, 87, .5); }
  .js .founder--g .founder__photo[data-reveal-img].is-in { clip-path: inset(-3rem -3rem -5rem -3rem); }
  .founder--g .founder__photo img { border-radius: 0; object-fit: cover; object-position: 50% 25%; }
  .founder--g .founder__name { margin-top: .75rem; font-size: clamp(1.6rem, 1.2rem + 1vw, 2.2rem); letter-spacing: .28em; }
  .founder--g .founder__name::after { content: "Fondatrice d’AMARA"; display: block; margin-top: .85rem; font-size: .6875rem; font-weight: 500; letter-spacing: .22em; color: var(--taupe-d); }
  :lang(en) .founder--g .founder__name::after { content: "Founder of AMARA"; }
  .founder--g .founder__text { max-width: 36em; font-size: 1.0625rem; line-height: 1.75; }
  .founder--g .founder__body > :nth-child(3) { margin-top: 2rem; }
  .founder--g .founder__body > :nth-child(5) { position: relative; margin: 2rem 0; padding: 1.5rem 0 1.5rem 1.75rem; border-left: 2px solid var(--taupe);
    font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); line-height: 1.55; color: var(--taupe-d); }
  .founder--g .founder__sub { margin-top: 2rem; padding: 1.5rem 1.75rem; border-left: 0; background: var(--tint); }
  .founder--g .founder__sub p { font-size: .96875rem; }
}
@media (min-width: 48em) {
  .founder--g .founder__photo picture { display: block; width: 100%; height: 100%; }
  .founder--g .founder__photo img { width: 118%; height: auto; max-width: none; margin: -15% 0 0 -10.8%; object-fit: fill; }
}
/* Ordinateur — ouverture de l'accueil : fenêtre un peu plus haute et photo dézoomée (toute la pièce visible), comme sur téléphone */
@media (min-width: 48em) {
  .hc:not(.is-static) { --win-w: 50vw; --win-h: 34svh; }
  .hc:not(.is-static) .hc__photo img { object-position: 50% 50%; transform: scale(calc(var(--s0, 1) + (1 - var(--s0, 1)) * var(--p))); }
}
/* Ordinateur — fin de l'ouverture : voile doux derrière le texte, phrase plus fine, bouton en contour léger */
@media (min-width: 48em) {
  .hc:not(.is-static) .hc__photo::after { background: radial-gradient(ellipse 48% 44% at 50% 50%, rgba(28, 26, 23, .74), rgba(28, 26, 23, .32) 65%, rgba(28, 26, 23, .18)); }
  .hc:not(.is-static) .hc__end { width: min(32rem, 80vw); gap: 2rem; }
  .hc:not(.is-static) .hc__lead { font-size: 1rem; line-height: 1.75; letter-spacing: .01em; color: rgba(255, 255, 255, .94); text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
  .hc:not(.is-static) .hc__end .btn { padding: .95rem 1.6rem; gap: 1.25rem; background: rgba(255, 255, 255, .08); color: #fff; border: 1px solid rgba(255, 255, 255, .7);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: .75rem; letter-spacing: .16em; transition: background .4s var(--ease), color .4s var(--ease); }
  .hc:not(.is-static) .hc__end .btn:hover { background: #fff; color: var(--ink); }
}
/* Fondatrice : portrait en noir et blanc doux, légèrement réchauffé (plus éditorial, moins « retouché ») */
.founder--g .founder__photo img { filter: grayscale(1) sepia(.08) contrast(.96) brightness(1.04); }
/* Fondatrice — option A : couleur d'origine, portrait plus petit et moins zoomé (ordinateur) */
.founder--g .founder__photo img { filter: none; }
@media (min-width: 48em) {
  .founder--g .founder__body { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); column-gap: clamp(3rem, 6vw, 6rem); max-width: 64rem; }
  .founder--g .founder__body > .founder__photo { max-width: 17rem; margin-top: .4rem; }
  .founder--g .founder__photo img { width: 100%; height: 100%; margin: 0; object-fit: cover; object-position: 50% 45%; }
}
/* Fondatrice (ordinateur) : moins de décor au-dessus de la tête */
@media (min-width: 48em) {
  .founder--g .founder__body > .founder__photo { aspect-ratio: 6 / 7; }
  .founder--g .founder__photo img { object-position: 50% 90%; }
}
@media (min-width: 48em) {
  .hc:not(.is-static) .hc__photo img { transform: translateY(calc(var(--ty, 0px) * (1 - var(--p)))) scale(calc(var(--s0, 1) + (1 - var(--s0, 1)) * var(--p))); }
}

/* Pages communes : la carte du secteur, la ville mise en avant, et ses coordonnées */
.cyh__geo { margin: 1rem 0 0; font-size: .75rem; font-weight: 500; letter-spacing: .18em; color: var(--taupe-d); font-variant-numeric: tabular-nums; }
.cyh__map { width: 100%; max-width: 34rem; justify-self: center; }
.sig--city { margin: 0; }
.sig__l--antibes { left: 62%; top: 37%; }
.sig--city .sig__l, .js .sig--city.is-drawn .sig__l { opacity: .45; }
.sig--city .sig__l.is-here, .js .sig--city.is-drawn .sig__l.is-here { opacity: 1; color: var(--ink); font-weight: 600; }
.sig--city .sig__l.is-here::before {
  content: ""; position: absolute; left: -.9rem; top: 50%; width: .4rem; height: .4rem; margin-top: -.2rem;
  border-radius: 50%; background: var(--taupe-d); box-shadow: 0 0 0 0 rgba(111, 101, 87, .45); animation: cym-pulse 2.4s ease-out infinite;
}
.js .sig--city path { stroke-dashoffset: 1; animation: cym-draw 2.6s var(--ease) .2s forwards; }
.js .sig--city .sig__l { transition: opacity 1s var(--ease) 1.4s; }
@keyframes cym-draw { to { stroke-dashoffset: 0; } }
@keyframes cym-pulse { 0% { box-shadow: 0 0 0 0 rgba(111, 101, 87, .45); } 70%, 100% { box-shadow: 0 0 0 .7rem rgba(111, 101, 87, 0); } }
@media (prefers-reduced-motion: reduce) { .js .sig--city path { stroke-dashoffset: 0; } }