/* Polices hébergées sur le site (plus de dépendance à Google Fonts) */
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/playfair-400.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/playfair-500.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/playfair-400i.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 500; font-display: swap; src: url("/fonts/playfair-500i.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/dmsans-400.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/dmsans-500.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/dmsans-600.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/dmmono-400.woff2") format("woff2"); }

/* Lynca Samui Build
   Scène : un acheteur français, le soir, sur son ordinateur ou son téléphone,
   qui regarde de loin un chantier qu'il ne peut pas visiter. Ambiance : la nuit
   chaude d'une villa éclairée, et le trait net d'un plan d'architecte. */

:root {
  --night: oklch(0.165 0.018 55);
  --night-2: oklch(0.21 0.022 55);
  --night-3: oklch(0.27 0.026 55);
  --line-d: oklch(0.36 0.026 60);
  --bone: oklch(0.955 0.014 80);
  --bone-2: oklch(0.80 0.025 75);
  --linen: oklch(0.962 0.014 80);
  --linen-2: oklch(0.925 0.022 78);
  --line-l: oklch(0.83 0.03 75);
  --ink: oklch(0.225 0.03 50);
  --ink-2: oklch(0.42 0.035 50);
  --gold: oklch(0.76 0.115 82);
  --terra: oklch(0.67 0.10 50);
  --terra-deep: oklch(0.47 0.10 42);
  --terra-bg: oklch(0.40 0.085 40);
  --ok: oklch(0.74 0.11 150);

  --serif: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --pad: clamp(1.25rem, 5vw, 5rem);
  --maxw: 82rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--night);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
[hidden] { display: none !important; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent, var(--gold)); outline-offset: 3px; }
::selection { background: var(--gold); color: var(--night); }

.skip { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--gold); color: var(--night); padding: .6rem 1rem; }
.skip:focus { left: 0; }

/* ---------- Thèmes de section ---------- */
.hero, .manifeste, .methode, .rapport, .reals, .contact, .foot {
  --bg: var(--night); --fg: var(--bone); --mut: var(--bone-2); --accent: var(--gold); --line: var(--line-d);
}
.role, .portail, .simu, .faq, .avis {
  --bg: var(--linen); --fg: var(--ink); --mut: var(--ink-2); --accent: var(--terra-deep); --line: var(--line-l);
}
.partn { --bg: var(--terra-bg); --fg: var(--bone); --mut: oklch(0.88 0.035 70); --accent: oklch(0.86 0.10 85); --line: oklch(0.55 0.08 45); }
section, .foot { background: var(--bg); color: var(--fg); }

/* ---------- Éléments communs ---------- */
.tag {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
}
.tag span { display: inline-flex; align-items: center; gap: .9rem; }
.tag span::before { content: ""; width: 2.5rem; height: 1px; background: currentColor; opacity: .7; }

.h2 {
  font-family: var(--serif); font-weight: 400; letter-spacing: -0.015em;
  font-size: clamp(2.1rem, 5.2vw, 4.4rem); line-height: 1.05; text-wrap: balance;
}
.h2 em, .hero-title em { font-style: italic; color: var(--accent); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 3.1rem; padding: .7rem 1.5rem; border: 1px solid transparent; border-radius: 2px;
  font-family: var(--mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; white-space: nowrap; background: transparent;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-gold { background: var(--gold); color: var(--night); }
.btn-gold:hover { background: var(--bone); }
.btn-line { border-color: oklch(0.955 0.014 80 / .55); color: var(--bone); }
.btn-line:hover { background: var(--bone); color: var(--night); border-color: var(--bone); }
.btn-ink { background: var(--bone); color: var(--ink); }
.btn-ink:hover { background: var(--gold); }
.btn-xl { min-height: 3.7rem; padding-inline: 2.2rem; font-size: .84rem; }

.lnk {
  font-family: var(--mono); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; color: var(--accent); display: inline-flex; align-items: center; gap: .7rem;
  padding-block: .5rem; border-bottom: 1px solid currentColor; width: fit-content;
}
.lnk::after { content: "→"; transition: transform .35s var(--ease); }
.lnk:hover::after { transform: translateX(.35rem); }

/* Révélations au défilement */
.js .rv { opacity: 0; transform: translateY(1.75rem); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--dl, 0s); }
.js .rv.in { opacity: 1; transform: none; }

/* ---------- En-tête ---------- */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; gap: 2rem;
  padding: .9rem var(--pad);
  color: var(--bone);
  transition: background-color .4s var(--ease), padding .4s var(--ease), transform .4s var(--ease);
}
.top.solid { background: var(--night); padding-block: .55rem; box-shadow: 0 1px 0 var(--line-d); }
.brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; margin-right: auto; }
.brand img { width: 2.75rem; height: 2.75rem; }
.brand-txt { display: grid; line-height: 1.1; }
.brand-txt b { white-space: nowrap; font-family: var(--serif); font-weight: 500; font-size: 1.15rem; letter-spacing: .02em; }
.brand-txt i { font-family: var(--mono); font-style: normal; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.nav { display: none; gap: 2rem; }
.nav a { font-size: .9rem; text-decoration: none; opacity: .85; padding-block: .4rem; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .4s var(--ease), opacity .3s; }
.nav a:hover { opacity: 1; background-size: 100% 1px; }
.top-cta { min-height: 2.6rem; padding: .5rem 1.1rem; font-size: .7rem; }
.lang { font-family: var(--mono); font-size: .74rem; letter-spacing: .14em; text-decoration: none; padding: .55rem .5rem; margin-inline: -1rem -.9rem; opacity: .85; border-bottom: 1px solid transparent; transition: opacity .3s, border-color .3s; }
.lang:hover { opacity: 1; border-color: var(--gold); }
@media (min-width: 62rem) { .nav { display: flex; } }
@media (max-width: 61.99rem) { .top { gap: 1.1rem; } .lang { margin-inline: 0 -.3rem; } }
@media (max-width: 26rem) { .brand-txt i { display: none; } .top-cta { padding-inline: .8rem; letter-spacing: .08em; } }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100svh; overflow: hidden; isolation: isolate;
  display: grid; grid-template-rows: 1fr auto;
}
.hero-media { position: absolute; inset: -8% 0; z-index: -2; will-change: transform; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; animation: settle 2.6s var(--ease) both; }
@keyframes settle { from { transform: scale(1.14); } to { transform: scale(1); } }
.hero-shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom, oklch(0.165 0.018 55 / .72) 0%, oklch(0.165 0.018 55 / .18) 34%, oklch(0.165 0.018 55 / .55) 68%, oklch(0.165 0.018 55 / .96) 100%),
    linear-gradient(to right, oklch(0.165 0.018 55 / .55), transparent 62%);
}
.hero-body { padding: clamp(7rem, 17vh, 11rem) var(--pad) clamp(1.5rem, 4vh, 3rem); display: flex; flex-direction: column; justify-content: flex-end; gap: clamp(1.25rem, 3vh, 2.25rem); }
.hero-tag { color: var(--gold); }
.hero-title {
  font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em;
  font-size: clamp(2.4rem, min(8vw, 13.2vh), 7.4rem); line-height: 1;
}
.hero-title .ln { display: block; overflow: hidden; padding-bottom: .09em; margin-bottom: -.09em; }
.hero-title .ln > span { display: block; transform: translateY(108%); animation: up 1.15s var(--ease) forwards; }
.hero-title .ln:nth-child(1) > span { animation-delay: .05s; }
.hero-title .ln:nth-child(2) > span { animation-delay: .14s; }
.hero-title .ln:nth-child(3) > span { animation-delay: .26s; }
.hero-title .ln:nth-child(4) > span { animation-delay: .35s; }
@keyframes up { to { transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.hero-foot { display: grid; gap: 1.5rem; align-items: end; animation: fade 1s .5s both; }
.hero-lede { max-width: 46ch; text-wrap: pretty; font-size: clamp(1rem, 1.25vw, 1.2rem); color: oklch(0.93 0.015 80); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (min-width: 60rem) { .hero-foot { grid-template-columns: 1fr auto; } }
@media (max-width: 47.99rem) {
  .hero-shade { background: linear-gradient(to bottom, oklch(0.165 0.018 55 / .7) 0%, oklch(0.165 0.018 55 / .3) 22%, oklch(0.165 0.018 55 / .78) 48%, oklch(0.165 0.018 55 / .97) 100%); }
  .hero-media img { object-position: 38% 50%; }
}

.hero-strip {
  display: flex; flex-wrap: wrap; gap: .4rem 2.5rem;
  padding: 1.1rem var(--pad); border-top: 1px solid oklch(0.955 0.014 80 / .22);
  font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-2);
  animation: fade 1s .7s both;
}
.hero-strip li { display: flex; align-items: center; gap: .7rem; }
.hero-strip li::before { content: ""; width: .4rem; height: .4rem; background: var(--gold); transform: rotate(45deg); }
.scroll-cue { position: absolute; right: var(--pad); bottom: 5.5rem; width: 1px; height: 4.5rem; background: oklch(0.955 0.014 80 / .25); overflow: hidden; display: none; }
.scroll-cue span { position: absolute; inset: 0; background: var(--gold); transform: translateY(-100%); animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }
@media (min-width: 60rem) { .scroll-cue { display: block; } }

/* ---------- Manifeste ---------- */
.manifeste { padding: clamp(6rem, 20vh, 14rem) var(--pad); }
.manifeste .tag { margin-bottom: clamp(2rem, 5vh, 4rem); }
.manifeste-txt {
  font-family: var(--serif); font-weight: 400; letter-spacing: -0.012em;
  font-size: clamp(1.7rem, 4.3vw, 3.9rem); line-height: 1.18; max-width: 24em;
}
.manifeste-txt .w { opacity: var(--o, 1); transition: opacity .25s linear; }
.js .manifeste-txt .w { --o: .3; }

/* ---------- Rôle ---------- */
.role { padding: clamp(5rem, 14vh, 10rem) var(--pad); }
.role-head { max-width: var(--maxw); margin-inline: auto; display: grid; gap: 1.75rem; }
.role-head .h2 { max-width: 17em; }
.role-grid { max-width: var(--maxw); margin: clamp(3rem, 8vh, 6rem) auto 0; display: grid; gap: 3rem; }
.role-txt { display: grid; gap: 1.25rem; align-content: start; max-width: 34rem; font-size: 1.2rem; line-height: 1.55; color: var(--mut); }
.role-txt p:first-child { color: var(--fg); }
.role-list li { display: grid; grid-template-columns: 3.5rem 1fr; gap: .35rem 1rem; padding-block: 1.75rem; border-top: 1px solid var(--line); }
.role-list li:last-child { border-bottom: 1px solid var(--line); }
.role-list .num { grid-row: span 2; font-family: var(--serif); font-style: italic; font-size: 2.4rem; line-height: 1; color: var(--accent); }
.role-list h3 { font-family: var(--serif); font-weight: 500; font-size: 1.45rem; line-height: 1.2; }
.role-list p { color: var(--mut); max-width: 46ch; }
@media (min-width: 60rem) { .role-grid { grid-template-columns: 5fr 7fr; gap: 6rem; } }

/* ---------- Offres ---------- */
.offres { --bg: var(--night-2); --fg: var(--bone); --mut: var(--bone-2); --accent: var(--gold); --line: var(--line-d); position: relative; }
.offres-intro { padding: clamp(5rem, 14vh, 9rem) var(--pad) clamp(3rem, 8vh, 5rem); display: grid; gap: 1.75rem; max-width: calc(var(--maxw) + 2 * var(--pad)); margin-inline: auto; }
.offre { display: grid; background: var(--bg); color: var(--fg); position: relative; }
.offre:nth-of-type(1) { --bg: var(--night); --fg: var(--bone); --mut: var(--bone-2); --accent: var(--gold); --line: var(--line-d); }
.offre:nth-of-type(2) { --bg: var(--linen-2); --fg: var(--ink); --mut: var(--ink-2); --accent: var(--terra-deep); --line: var(--line-l); }
.offre:nth-of-type(3) { --bg: var(--terra-bg); --fg: var(--bone); --mut: oklch(0.89 0.03 70); --accent: oklch(0.87 0.10 85); --line: oklch(0.56 0.08 45); }
.offre-media { overflow: hidden; min-height: 15rem; }
.offre-media img { width: 100%; height: 100%; object-fit: cover; }
.offre-body { padding: clamp(2.25rem, 6vw, 5rem) var(--pad); display: grid; gap: 1.1rem; align-content: center; }
.offre-n { font-family: var(--mono); font-size: .8rem; letter-spacing: .18em; color: var(--accent); }
.offre-t { font-family: var(--serif); font-weight: 400; font-size: clamp(2.2rem, 4.6vw, 4rem); line-height: 1.02; letter-spacing: -0.015em; }
.offre-who { font-family: var(--serif); font-style: italic; font-size: 1.25rem; color: var(--mut); }
.ticks { display: grid; gap: .55rem; margin-block: .6rem; max-width: 34rem; }
.ticks li { display: grid; grid-template-columns: 1.4rem 1fr; gap: .6rem; padding-top: .55rem; border-top: 1px solid var(--line); }
.ticks li::before { content: ""; width: .5rem; height: .9rem; margin: .2rem 0 0 .3rem; border: solid var(--accent); border-width: 0 1.5px 1.5px 0; transform: rotate(40deg); }
.offre-prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .9rem; margin-top: .4rem; }
.offre-prix span { font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mut); }
.offre-prix b { font-family: var(--serif); font-weight: 500; font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1; color: var(--accent); }
@media (min-width: 60rem) {
  .offre { grid-template-columns: 1.1fr 1fr; min-height: 100vh; }
  .offre:nth-of-type(2) .offre-media { order: 2; }
  .offre:nth-of-type(2) { grid-template-columns: 1fr 1.1fr; }
}
@media (min-width: 60rem) and (min-height: 44rem) {
  .js:not(.rm) .offre { position: sticky; top: 0; height: 100vh; box-shadow: 0 -2.5rem 5rem oklch(0.1 0.02 55 / .45); }
}

/* ---------- Méthode : la villa se dessine ---------- */
.methode { position: relative; }
.methode-pin { padding: clamp(5rem, 12vh, 7rem) var(--pad) clamp(2rem, 5vh, 3rem); display: grid; gap: clamp(1rem, 3vh, 2rem); }
.methode-head { display: grid; gap: 1rem; }
.methode-head .h2 { font-size: clamp(2rem, 4.4vw, 3.6rem); }
.methode-sub { color: var(--mut); max-width: 52ch; }
.methode-stage { display: grid; gap: 1.5rem; min-height: 0; align-items: center; align-content: center; }
.plan { position: relative; min-height: 0; aspect-ratio: 1020 / 440; max-height: 100%; width: 100%; border: 1px solid var(--line); background: var(--night-2); }
.plan svg { width: 100%; height: 100%; }
.plan .grid path { stroke: var(--line-d); stroke-width: 1; opacity: .55; }
.plan .st path {
  stroke: var(--bone); stroke-width: 2.2;
  stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--d, 1));
  transition: stroke .5s var(--ease);
}
.js .plan .st { --d: 0; }
.plan .st.is-now path { stroke: var(--gold); }
.plan .notes text { font-family: var(--mono); font-size: 13px; letter-spacing: .18em; fill: var(--bone-2); stroke: none; opacity: .7; }

.methode-side { display: grid; gap: 1rem; align-content: center; }
.meter { display: flex; align-items: baseline; gap: .5rem; }
.meter-l { font-family: var(--mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--mut); margin-right: auto; }
.meter-v { font-family: var(--serif); font-weight: 400; font-size: clamp(3rem, 6vw, 5.2rem); line-height: .9; color: var(--gold); font-variant-numeric: tabular-nums; }
.meter-u { font-family: var(--serif); font-size: 1.6rem; color: var(--gold); }
.bar { height: 2px; background: var(--line); }
.bar i { display: block; height: 100%; width: 100%; background: var(--gold); transform-origin: left; transform: scaleX(var(--p, .2)); }
.steps li { display: grid; grid-template-columns: 2.2rem 1fr auto; gap: .75rem; align-items: baseline; padding-block: .5rem; border-bottom: 1px solid var(--line); color: var(--mut); transition: color .4s var(--ease); }
.steps .s-n, .steps .s-p { font-family: var(--mono); font-size: .76rem; letter-spacing: .08em; }
.steps .s-t { font-size: .98rem; line-height: 1.35; }
.steps li.is-done { color: var(--bone); }
.steps li.is-now { color: var(--gold); }
.steps li.is-now .s-t { font-weight: 500; }

@media (min-width: 60rem) {
  .methode-stage { grid-template-columns: 2fr 1fr; gap: clamp(2rem, 4vw, 4rem); }
}
/* Version épinglée : le défilement pilote le dessin */
.js:not(.rm) .methode { height: 520vh; }
.js:not(.rm) .methode-pin { position: sticky; top: 0; height: 100vh; height: 100svh; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
@media (max-width: 59.99rem) {
  .js:not(.rm) .methode-stage { grid-template-rows: auto auto; gap: 2rem; }
  .js:not(.rm) .steps li { display: none; }
  .js:not(.rm) .steps li.is-now { display: grid; border-bottom: 0; }
  .js:not(.rm) .methode-sub { display: none; }
}
@media (max-height: 43rem) { .js:not(.rm) .methode-sub { display: none; } .steps li { padding-block: .3rem; } }

/* ---------- Compte rendu de visite ---------- */
.rapport { --bg: var(--night-2); padding: clamp(5rem, 14vh, 10rem) var(--pad); }
.rapport-head { max-width: var(--maxw); margin-inline: auto; display: grid; gap: 1.5rem; }
.rapport-sub { max-width: 54ch; color: var(--mut); font-size: 1.1rem; }
.rapport-grid { max-width: var(--maxw); margin: clamp(2.5rem, 7vh, 5rem) auto 0; display: grid; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.rapport-ph { position: relative; overflow: hidden; max-height: 44rem; }
.rapport-ph img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 4; }
.rapport-ph figcaption { position: absolute; left: 0; bottom: 0; padding: .55rem .9rem; background: oklch(0.165 0.018 55 / .85); font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bone); }
.doc {
  --fg: var(--ink); --mut: var(--ink-2); --line: var(--line-l); --accent: var(--terra-deep);
  background: var(--linen); color: var(--ink); padding: clamp(1.5rem, 3.5vw, 3rem); display: grid; gap: 1.4rem;
  box-shadow: .6rem .6rem 0 var(--night-3), 0 2rem 4rem -1.5rem oklch(0.1 0.02 55 / .7);
}
.doc-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: 1.1rem; border-bottom: 2px solid var(--ink); flex-wrap: wrap; }
.doc-kicker { font-family: var(--serif); font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.1; }
.doc-kicker b { font-weight: 500; font-style: normal; color: var(--terra-deep); }
.doc-spec { font-family: var(--mono); font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; padding: .25rem .55rem; border: 1px solid var(--terra-deep); color: var(--terra-deep); border-radius: 2px; }
.doc-meta { display: grid; gap: .9rem 2rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.doc-meta dt, .doc-h { font-family: var(--mono); font-weight: 400; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--mut); }
.doc-meta dd { font-size: 1rem; margin-top: .15rem; }
.doc-h { margin-top: .4rem; }
.doc-checks { display: grid; margin-top: -.6rem; }
.doc-checks li { display: grid; grid-template-columns: 1fr auto; gap: .5rem 1.25rem; align-items: baseline; padding-block: .8rem; border-bottom: 1px solid var(--line); }
.doc-checks small { display: block; margin-top: .3rem; font-size: .88rem; line-height: 1.45; color: var(--mut); max-width: 44ch; }
.doc-checks em { font-family: var(--mono); font-style: normal; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.doc-checks .ok em { color: oklch(0.45 0.11 150); }
.doc-checks .res em { color: var(--terra-deep); }
.doc-checks .wait em { color: var(--mut); }
.doc-concl { padding: 1rem 1.15rem; background: var(--linen-2); font-size: 1rem; }
.doc-concl b { font-weight: 600; }
@media (min-width: 60rem) { .rapport-grid { grid-template-columns: 4fr 6fr; } .rapport-ph { position: sticky; top: 6rem; } }
@media (max-width: 30rem) { .doc-checks li { grid-template-columns: 1fr; } }

/* ---------- Portail ---------- */
.portail { padding: clamp(5rem, 14vh, 10rem) var(--pad); }
.portail-head { max-width: var(--maxw); margin-inline: auto; display: grid; gap: 1.5rem; }
.portail-sub { max-width: 52ch; color: var(--mut); font-size: 1.1rem; }
.app {
  --bg: var(--night); --fg: var(--bone); --mut: var(--bone-2); --accent: var(--gold); --line: var(--line-d);
  max-width: 62rem; margin: clamp(2.5rem, 7vh, 5rem) auto 0; background: var(--night); color: var(--bone);
  border-radius: 14px; overflow: hidden; box-shadow: 0 2.5rem 6rem -2rem oklch(0.25 0.04 50 / .55);
}
.app-bar { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.app-dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px oklch(0.74 0.11 150 / .18); }
.app-name { font-family: var(--serif); font-size: 1.15rem; margin-right: auto; }
.app-demo { font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--night); background: var(--bone-2); padding: .25rem .55rem; border-radius: 2px; }
.app-tabs { display: flex; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.app-tabs::-webkit-scrollbar { display: none; }
.app-tabs button {
  flex: 1 0 auto; background: none; border: 0; cursor: pointer; padding: 1rem 1.25rem; color: var(--mut);
  font-family: var(--mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  box-shadow: inset 0 -2px 0 transparent; transition: color .3s, box-shadow .3s;
}
.app-tabs button:hover { color: var(--bone); }
.app-tabs button[aria-selected="true"] { color: var(--gold); box-shadow: inset 0 -2px 0 var(--gold); }
.app-tabs button:focus-visible { outline-offset: -3px; }
.app-pan { padding: clamp(1.25rem, 3.5vw, 2.5rem); min-height: 26rem; animation: fade .5s var(--ease); }
.app-pan[hidden] { display: none; }
.av-top { display: grid; gap: 1rem; padding-bottom: 1.5rem; }
.av-big { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.av-big b { font-family: var(--serif); font-weight: 400; font-size: clamp(3.2rem, 7vw, 5rem); line-height: .9; color: var(--gold); }
.av-big span { color: var(--mut); }
.av-next { color: var(--mut); }
.av-next strong { color: var(--bone); font-weight: 500; }
.av-list li { display: grid; grid-template-columns: 2.2rem 1fr auto; gap: .75rem; align-items: baseline; padding-block: .7rem; border-top: 1px solid var(--line); color: var(--mut); }
.av-list span { font-family: var(--mono); font-size: .76rem; }
.av-list em { font-family: var(--mono); font-style: normal; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
.av-list .done { color: var(--bone); }
.av-list .done em { color: var(--ok); }
.av-list .now { color: var(--gold); }
.tbl { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tbl th { text-align: left; font-family: var(--mono); font-weight: 400; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mut); padding: 0 .5rem .8rem 0; }
.tbl td:nth-child(2), .tbl td:nth-child(3) { white-space: nowrap; }
.tbl td { padding: .7rem .5rem .7rem 0; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.pill { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.pill.ok { color: var(--ok); }
.pill.wait { color: var(--gold); }
.app-note { margin-top: 1.25rem; color: var(--mut); font-size: .92rem; }
.docs li { display: grid; grid-template-columns: 6rem 1fr auto; gap: 1rem; align-items: baseline; padding-block: .95rem; border-top: 1px solid var(--line); }
.docs li:first-child, .av-list li:first-child { border-top: 0; }
.doc-k { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.docs em { font-family: var(--mono); font-style: normal; font-size: .68rem; letter-spacing: .1em; color: var(--mut); }
.journal li { display: grid; gap: .4rem; padding-block: 1.2rem; border-top: 1px solid var(--line); }
.journal li:first-child { border-top: 0; padding-top: 0; }
.j-d { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.journal p { color: var(--mut); max-width: 62ch; }
.j-b { display: grid; gap: .9rem; align-items: start; }
.j-ph { width: 9rem; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; }
@media (min-width: 48rem) { .j-b { grid-template-columns: 1fr 9rem; gap: 1.5rem; } }
.journal strong { color: var(--bone); font-weight: 500; }
@media (min-width: 48rem) { .journal li { grid-template-columns: 8rem 1fr; } }
@media (max-width: 34rem) { .av-list li { grid-template-columns: 2.2rem 1fr; } .av-list em { grid-column: 2; } }
@media (max-width: 30rem) { .docs li { grid-template-columns: 1fr auto; } .doc-k { grid-column: 1 / -1; } .tbl th:nth-child(3), .tbl td:nth-child(3) { display: none; } }

/* ---------- Réalisations ---------- */
.reals { position: relative; }
.reals-pin { padding-block: clamp(4rem, 10vh, 7rem); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--line-d) transparent; }
.reals-track { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.5rem); padding-inline: var(--pad); width: max-content; will-change: transform; }
.reals-intro { width: min(34rem, 82vw); display: grid; gap: 1.5rem; flex: none; padding-right: 2rem; scroll-snap-align: start; }
.reals-intro > p:not(.tag) { color: var(--mut); font-size: 1.1rem; }
.reals-hint { font-family: var(--mono); font-size: .72rem !important; letter-spacing: .16em; text-transform: uppercase; display: flex; align-items: center; gap: .8rem; }
.reals-hint::after { content: "→"; color: var(--gold); animation: nudge 1.8s var(--ease) infinite; }
@keyframes nudge { 50% { transform: translateX(.5rem); } }
.shot { --h: min(62vh, 34rem); flex: none; height: var(--h); position: relative; overflow: hidden; scroll-snap-align: center; }
.shot img, .shot video { width: 100%; height: 100%; object-fit: cover; }
.shot-w { aspect-ratio: 16 / 10; }
.shot-t, .shot-video { aspect-ratio: 9 / 16; }
.shot-p { aspect-ratio: 3 / 4; }
.shot-video.shot-land { aspect-ratio: 16 / 9; }
.shot figcaption {
  position: absolute; left: 0; bottom: 0; padding: .5rem .8rem; background: oklch(0.165 0.018 55 / .82);
  font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bone);
}
.shot-title { width: min(21rem, 70vw); height: auto; overflow: visible; display: grid; gap: 1rem; padding-inline: clamp(.5rem, 2vw, 2rem); }
.shot-title h3 { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: clamp(2.6rem, 5vw, 4.2rem); line-height: 1; color: var(--gold); }
.shot-title p:not(.tag) { color: var(--mut); }
.play { position: absolute; inset: 0; margin: auto; width: 4.5rem; height: 4.5rem; border-radius: 50%; border: 1px solid var(--bone); background: oklch(0.165 0.018 55 / .5); cursor: pointer; display: grid; place-items: center; transition: transform .4s var(--ease), background-color .3s; }
.play:hover { transform: scale(1.08); background: var(--gold); border-color: var(--gold); }
.play span { width: 0; height: 0; border-left: 1rem solid var(--bone); border-block: .65rem solid transparent; margin-left: .25rem; }
.play:hover span { border-left-color: var(--night); }
.shot-video.playing .play { opacity: 0; }
.shot-video.playing .play:focus-visible { opacity: 1; }
/* Défilement horizontal épinglé (activé par JS sur grand écran) */
.reals.hz { height: var(--hz-h, 300vh); }
.reals.hz .reals-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; padding-block: 0; }
.reals.hz .reals-hint { display: flex; }

/* ---------- Simulateur ---------- */
.simu { padding: clamp(5rem, 14vh, 10rem) var(--pad); }
.simu-head { max-width: var(--maxw); margin-inline: auto; display: grid; gap: 1.5rem; }
.simu-head > p:not(.tag) { color: var(--mut); font-size: 1.1rem; max-width: 48ch; }
.simu-box { max-width: var(--maxw); margin: clamp(2.5rem, 7vh, 4.5rem) auto 0; display: grid; border: 1px solid var(--line); }
.simu-ctl { padding: clamp(1.5rem, 4vw, 3.5rem); display: grid; gap: 2.75rem; align-content: center; }
.fld { display: grid; gap: .6rem; }
.fld > label, .fld > legend, .q > legend {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mut);
}
.simu .fld > label { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.simu output { font-family: var(--serif); font-size: 2.4rem; letter-spacing: 0; text-transform: none; color: var(--fg); line-height: 1; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 2.75rem; background: transparent; cursor: pointer; margin: 0; }
input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(to right, var(--terra-deep) var(--fill, 24%), var(--line-l) var(--fill, 24%)); }
input[type="range"]::-moz-range-track { height: 2px; background: var(--line-l); }
input[type="range"]::-moz-range-progress { height: 2px; background: var(--terra-deep); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 1.6rem; height: 1.6rem; margin-top: calc(-.8rem + 1px); border-radius: 50%; background: var(--linen); border: 2px solid var(--terra-deep); transition: transform .3s var(--ease); }
input[type="range"]::-moz-range-thumb { width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--linen); border: 2px solid var(--terra-deep); }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.2); }
.range-scale { display: flex; justify-content: space-between; font-family: var(--mono); font-size: .68rem; color: var(--mut); }
.seg { display: grid; gap: .6rem; margin-top: .4rem; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; inset: 0; }
.seg span { display: grid; gap: .15rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 2px; transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s; }
.seg b { font-family: var(--serif); font-weight: 500; font-size: 1.3rem; }
.seg i { font-family: var(--mono); font-style: normal; font-size: .7rem; letter-spacing: .04em; color: var(--mut); }
.seg label:hover span { border-color: var(--terra-deep); }
.seg input:checked + span { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.seg input:checked + span i { color: var(--bone-2); }
.seg input:focus-visible + span { outline: 2px solid var(--terra-deep); outline-offset: 3px; }
@media (min-width: 40rem) { .seg { grid-template-columns: repeat(3, 1fr); } }
.simu-res { --accent: var(--gold); background: var(--ink); color: var(--bone); padding: clamp(1.5rem, 4vw, 3.5rem); display: grid; gap: 1.5rem; align-content: center; }
.res-big { font-family: var(--serif); display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .9rem; line-height: .95; }
.res-big span { font-size: clamp(3.4rem, 8vw, 6.4rem); color: var(--gold); font-variant-numeric: tabular-nums; }
.res-big i { font-size: 1.5rem; color: var(--bone-2); }
.res-big small { font-family: var(--mono); font-size: .8rem; letter-spacing: .16em; color: var(--bone-2); }
.res-dl { display: grid; }
.res-dl div { display: flex; justify-content: space-between; gap: 1.5rem; padding-block: .8rem; border-top: 1px solid var(--line-d); flex-wrap: wrap; }
.res-dl dt { color: var(--bone-2); font-size: .95rem; }
.res-dl dd { font-variant-numeric: tabular-nums; }
.res-note { font-size: .86rem; color: var(--bone-2); max-width: 52ch; }
.simu-res .btn { width: fit-content; }
@media (min-width: 60rem) { .simu-box { grid-template-columns: 1fr 1fr; } }

/* ---------- Partenaires ---------- */
.partn { padding: clamp(5rem, 14vh, 10rem) var(--pad); display: grid; gap: 3.5rem; }
.partn-l { display: grid; gap: 1.5rem; align-content: start; max-width: 40rem; }
.partn-l > p:not(.tag) { color: var(--mut); font-size: 1.1rem; }
.metiers { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.metiers li { font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; padding: .45rem .8rem; border: 1px solid var(--line); border-radius: 2px; }
.partn-f { --fg: var(--ink); --mut: var(--ink-2); --line: var(--line-l); --accent: var(--terra-deep); background: var(--linen); color: var(--ink); padding: clamp(1.5rem, 4vw, 3rem); display: grid; gap: 1.4rem; align-content: start; }
.partn-f h3 { font-family: var(--serif); font-weight: 400; font-size: 2rem; line-height: 1.1; }
.partn-f > p:not(.err) { color: var(--mut); margin-top: -.8rem; }
.partn-f .btn { width: fit-content; background: var(--ink); color: var(--bone); }
.partn-f .btn:hover { background: var(--terra-deep); }
@media (min-width: 60rem) { .partn { grid-template-columns: 1.1fr 1fr; gap: 6rem; max-width: none; } }

/* Champs */
.fld input[type="text"], .fld select, .fld textarea {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  padding: .7rem 0; font-size: 1.05rem; color: var(--fg); transition: border-color .3s;
}
.fld textarea { resize: vertical; min-height: 5rem; }
.fld select { appearance: none; background: no-repeat right .2rem center / .7rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%23806858' stroke-width='1.4'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E"); padding-right: 1.5rem; }
.fld select option { color: var(--ink); background: var(--linen); }
.fld input:hover, .fld select:hover, .fld textarea:hover { border-color: var(--mut); }
.fld input:focus-visible, .fld select:focus-visible, .fld textarea:focus-visible { outline: 0; border-color: var(--accent); box-shadow: 0 1px 0 var(--accent); }
.fld label i { font-style: normal; text-transform: none; letter-spacing: 0; opacity: .8; }
.err { color: oklch(0.55 0.17 28); font-size: .95rem; }
.contact .err { color: oklch(0.78 0.12 40); }

/* ---------- Contact ---------- */
.contact { padding: clamp(5rem, 14vh, 10rem) var(--pad); }
.contact-head { max-width: var(--maxw); margin-inline: auto; display: grid; gap: 1.5rem; }
.contact-head > p:not(.tag) { color: var(--mut); font-size: 1.1rem; max-width: 50ch; }
.qform { max-width: var(--maxw); margin: clamp(2.5rem, 7vh, 4.5rem) auto 0; display: grid; }
.q { padding-block: 1.9rem; border-top: 1px solid var(--line); display: grid; gap: 1.1rem; }
.q > legend { display: flex; align-items: center; gap: 1rem; padding: 0; float: left; width: 100%; margin-bottom: 1.1rem; color: var(--bone); font-size: .8rem; }
.q > legend span { font-family: var(--serif); font-style: italic; font-size: 1.7rem; letter-spacing: 0; color: var(--gold); width: 1.6rem; }
.chips { display: flex; flex-wrap: wrap; gap: .6rem; clear: both; }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; opacity: 0; inset: 0; }
.chips span { display: block; padding: .8rem 1.3rem; border: 1px solid var(--line); border-radius: 2px; transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s; }
.chips label:hover span { border-color: var(--bone-2); }
.chips input:checked + span { background: var(--gold); color: var(--night); border-color: var(--gold); }
.chips input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 3px; }
.q-id { grid-template-columns: 1fr; gap: 1.6rem; }
.q-id .fld > label { color: var(--bone-2); }
@media (min-width: 48rem) { .q-id { grid-template-columns: 1fr 1fr; } .fld-w { grid-column: 1 / -1; } }
.qform-end { display: grid; gap: 1.2rem; padding-top: 2rem; border-top: 1px solid var(--line); align-items: center; }
.qform-end p { color: var(--mut); font-size: .95rem; max-width: 46ch; }
.qform-end a { color: var(--gold); }
@media (min-width: 48rem) { .qform-end { grid-template-columns: auto 1fr; gap: 2rem; } }

/* ---------- Pied de page ---------- */
.foot { padding: clamp(3rem, 8vh, 6rem) var(--pad) 2rem; border-top: 1px solid var(--line-d); overflow: hidden; }
.foot-word { font-family: var(--serif); font-style: italic; font-size: clamp(3.6rem, 17.5vw, 17rem); line-height: .9; letter-spacing: -0.03em; color: var(--night-3); white-space: nowrap; margin-left: -.04em; user-select: none; }
.foot-row { display: grid; gap: 1.5rem; margin-top: clamp(2rem, 5vh, 3.5rem); padding-top: 1.75rem; border-top: 1px solid var(--line-d); color: var(--bone-2); font-size: .95rem; }
.foot-row p { max-width: 52ch; }
.foot-row ul { display: flex; flex-wrap: wrap; gap: .5rem 2rem; }
.foot-row a { text-decoration: none; border-bottom: 1px solid var(--line-d); padding-bottom: .15rem; transition: color .3s, border-color .3s; }
.foot-row a:hover { color: var(--gold); border-color: var(--gold); }
.foot-legal { margin-top: 2rem; font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: oklch(0.72 0.025 70); }
@media (min-width: 60rem) { .foot-row { grid-template-columns: 1fr auto; align-items: end; } }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
  .hero-title .ln > span { transform: none; }
  .js .rv { opacity: 1; transform: none; }
  .js .manifeste-txt .w { --o: 1; }
  .js .plan .st { --d: 1; }
}

/* ---------- Ajustements téléphone ---------- */
@media (max-width: 59.99rem) {
  .shot-w, .shot-video.shot-land { height: auto; width: min(86vw, 34rem); }
}
@media (max-width: 30rem) {
  .top { gap: .55rem; padding-inline: 1rem; }
  .brand { gap: .5rem; }
  .brand img { width: 2.3rem; height: 2.3rem; }
  .brand-txt b { font-size: 1rem; }
  .brand-txt i { display: none; }
  .lang { margin: 0; padding-inline: .35rem; }
  .top-cta { padding: .45rem .6rem; font-size: .62rem; letter-spacing: .06em; min-height: 2.4rem; }
}
@media (max-width: 30rem) { .hero-title { font-size: clamp(1.9rem, 8.6vw, 2.4rem); } }

/* ---------- FAQ ---------- */
.faq { padding: clamp(5rem, 14vh, 10rem) var(--pad); }
.faq-head { max-width: var(--maxw); margin-inline: auto; display: grid; gap: 1.5rem; }
.faq-list { max-width: var(--maxw); margin: clamp(2.5rem, 7vh, 4.5rem) auto 0; border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 1.5rem; gap: 1.5rem; align-items: center; padding-block: 1.5rem; font-family: var(--serif); font-size: clamp(1.25rem, 2.2vw, 1.7rem); line-height: 1.25; transition: color .3s var(--ease); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ""; width: .7rem; height: .7rem; justify-self: end; border: solid var(--accent); border-width: 0 1.5px 1.5px 0; transform: translateY(-.2rem) rotate(45deg); transition: transform .4s var(--ease); }
.qa[open] summary::after { transform: translateY(.15rem) rotate(-135deg); }
.qa summary:hover { color: var(--accent); }
.qa > p { max-width: 68ch; color: var(--mut); font-size: 1.08rem; padding-bottom: 1.5rem; }
.qa > .lnk { margin: -.6rem 0 1.6rem; }

.role-kw { font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; line-height: 1.7; text-transform: uppercase; color: var(--mut); }

/* ---------- Avis ---------- */
.avis { --bg: var(--linen-2); padding: clamp(5rem, 14vh, 10rem) var(--pad); }
.avis-head { max-width: var(--maxw); margin-inline: auto; display: grid; gap: 1.5rem; }
.avis-head > p:not(.tag) { color: var(--mut); font-size: 1.1rem; }
.avis-grid { max-width: var(--maxw); margin: clamp(2.5rem, 7vh, 4.5rem) auto 0; display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
.avis-q { display: grid; gap: 1.5rem; align-content: space-between; padding-top: 1.75rem; border-top: 1px solid var(--ink); }
.avis-q blockquote { margin: 0; }
.avis-q blockquote p { font-family: var(--serif); font-size: 1.3rem; line-height: 1.45; text-wrap: pretty; }
.avis-big blockquote p { font-style: italic; font-size: clamp(1.6rem, 3.1vw, 2.6rem); line-height: 1.25; letter-spacing: -0.01em; }
.avis-q figcaption { display: grid; gap: .2rem; }
.avis-q figcaption b { font-family: var(--serif); font-weight: 500; font-size: 1.25rem; }
.avis-q figcaption span { font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }
@media (min-width: 60rem) {
  .avis-grid { grid-template-columns: 7fr 5fr; }
  .avis-big { grid-row: span 2; }
}