/* Oriel — démo SGA. Polices hébergées localement (aucun appel externe). */
/* Clash Display : Indian Type Foundry, licence ITF FFL (auto-hébergement autorisé pour nos propres sites), fichier non modifié */
@font-face { font-family: "Clash Display"; src: url("assets/fonts/ClashDisplay-Variable.woff2") format("woff2"); font-weight: 200 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("assets/fonts/ibm-plex-sans-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("assets/fonts/ibm-plex-sans-latin-200-normal.woff2") format("woff2"); font-weight: 200; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --encre: #16120e;
  --encre-2: #2a231c;
  --sable: #f1e9dd;
  --pierre: #ddd0bd;
  --laiton: #c79a5b;
  --laiton-fonce: #7d5626;
  --texte-doux: #5c4f41;
  --clair: #fbf7f0;
  --clair-doux: rgba(251, 247, 240, .78);
  --display: "Clash Display", "Arial Narrow", "Helvetica Neue", sans-serif;
  --sans: "IBM Plex Sans", "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;
  --entete: 64px;
  --sortie: cubic-bezier(.16, 1, .3, 1);
  --marge: clamp(20px, 5vw, 72px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--entete); }
body { margin: 0; background: var(--encre); color: var(--clair); font: 300 1.0625rem/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
em { font-style: normal; font-weight: 200; }
::selection { background: var(--laiton); color: var(--encre); }
:focus-visible { outline: 2px solid var(--laiton); outline-offset: 3px; }
html { scrollbar-color: var(--laiton-fonce) var(--encre); }

.saut { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--clair); color: var(--encre); padding: 10px 16px; font-weight: 300; }
.saut:focus { top: 12px; }

/* Bandeau démo SGA */
.bandeau { position: relative; z-index: 60; background: var(--clair); color: var(--encre); }
.bandeau p { margin: 0 auto; max-width: 72rem; padding: 9px var(--marge); font: 400 .8125rem/1.45 var(--mono); letter-spacing: -.01em; }
.bandeau a { font-weight: 400; color: var(--laiton-fonce); }
.bandeau strong { font-weight: 400; color: var(--laiton-fonce); }

/* En-tête */
.entete { position: sticky; top: 0; z-index: 50; height: var(--entete); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 var(--marge); transition: background-color .5s var(--sortie), color .5s var(--sortie); }
.entete.sur-sombre { background: rgba(22, 18, 14, .72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.entete.sur-clair { background: rgba(241, 233, 221, .92); color: var(--encre); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.marque { font: 600 1.5rem/1 var(--display); letter-spacing: -.01em; text-decoration: none; }
.entete nav { display: flex; align-items: center; gap: clamp(12px, 3vw, 36px); }
.entete nav a:not(.bouton) { display: none; font-size: .9375rem; text-decoration: none; padding: 10px 0; }
.entete nav a:not(.bouton):hover { text-decoration: underline; }
@media (min-width: 720px) { .entete nav a:not(.bouton) { display: inline-block; } }

.bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; border: 1px solid currentColor; border-radius: 2px; font: 400 .8125rem/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color .3s var(--sortie), color .3s var(--sortie), transform .3s var(--sortie); }
.bouton:active { transform: translateY(1px); }
.bouton-clair:hover { background: var(--clair); color: var(--encre); border-color: var(--clair); }
.sur-clair .bouton-clair:hover { background: var(--encre); color: var(--clair); border-color: var(--encre); }
.bouton-plein { background: var(--encre); color: var(--clair); border-color: var(--encre); }
.bouton-plein:hover { background: var(--laiton-fonce); border-color: var(--laiton-fonce); }
.bouton[disabled], .bouton[aria-busy="true"] { opacity: .55; cursor: progress; }

/* Récit vidéo */
.recit { position: relative; margin-top: calc(-1 * var(--entete)); }
.scene { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; background: #3a3027 url("assets/poster.jpg") center / cover no-repeat; }
#film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s var(--sortie); }
#film.pret { opacity: 1; }
.voile { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(22,18,14,.62) 0, rgba(22,18,14,0) 26%),
    linear-gradient(to top, rgba(22,18,14,.78) 0, rgba(22,18,14,.25) 38%, rgba(22,18,14,0) 60%); }
.grain { position: absolute; inset: -50%; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.hud.cache { opacity: 0; }
.hud { transition: opacity .6s var(--sortie); position: absolute; left: var(--marge); right: var(--marge); bottom: 18px; display: flex; align-items: center; gap: 20px; font: 400 .75rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--clair-doux); }
.hud b { font-weight: 400; color: var(--clair); font-variant-numeric: tabular-nums; }
.hud-barre { flex: 1; height: 1px; background: rgba(251,247,240,.25); position: relative; }
.hud-barre span { position: absolute; inset: 0; background: var(--laiton); transform-origin: left; transform: scaleX(0); }
.hud > span:first-child { display: none; }
@media (min-width: 720px) { .hud > span:first-child { display: inline; } }

.chapitres { position: relative; margin-top: -100vh; margin-top: -100lvh; z-index: 2; }
.chapitre { min-height: 150vh; padding: 0 var(--marge); display: flex; align-items: center; }
.chapitre > :not(.fiche):not(.titre-une) { max-width: 34rem; }

.chapitre-une { min-height: 130vh; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding-bottom: calc(30vh + 120px); }
.titre-une { margin: 0; font: 700 clamp(4.5rem, 24vw, 16rem)/.84 var(--display); letter-spacing: -.028em; }
.titre-une .ligne { display: block; overflow: hidden; padding-bottom: .06em; }
.titre-une .ligne > span { display: block; }
.titre-une .ligne-fine { font-size: .3em; font-weight: 200; letter-spacing: -.01em; line-height: 1; margin-top: .1em; }
.titre-une strong { font-weight: 600; }
.chapitre-une .chapeau { max-width: 26rem; margin: 28px 0 0; font-size: 1.125rem; color: var(--clair); }
.indice { margin-top: 32px; font: 400 .75rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--clair-doux); display: inline-flex; align-items: center; gap: 12px; }
.indice::after { content: ""; width: 48px; height: 1px; background: currentColor; transform-origin: left; animation: fil 2.4s var(--sortie) 3 both; }
@keyframes fil { 0% { transform: scaleX(0); } 60%, 100% { transform: scaleX(1); opacity: 0; } }

.chapitre-droite { justify-content: flex-end; }
.carton { padding: clamp(24px, 3.4vw, 48px); background: var(--encre); box-shadow: 0 30px 60px -24px rgba(0,0,0,.6); }
.carton p { color: var(--clair-doux); }
.chapitre p { margin: 0; }
.titre-chapitre { margin: 0 0 20px; font: 700 clamp(2.125rem, 5vw, 4.25rem)/1 var(--display); letter-spacing: -.012em; word-spacing: .04em; text-wrap: balance; }
.titre-chapitre em { display: block; }

.chapitre-fiche { min-height: 170vh; align-items: flex-end; padding-bottom: calc(40vh + 48px); }
.fiche { width: min(100%, 30rem); background: var(--sable); color: var(--encre); padding: clamp(24px, 3.4vw, 44px); box-shadow: 0 30px 60px -20px rgba(22,18,14,.55); }
.fiche .titre-chapitre { font-size: clamp(2.5rem, 6vw, 4.25rem); }
.fiche > p { color: var(--texte-doux); }
.donnees { margin: 28px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--pierre); }
.donnees div { padding: 14px 0; border-bottom: 1px solid var(--pierre); }
.donnees div:nth-child(odd) { padding-right: 16px; }
.donnees dt { font: 400 .6875rem/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--texte-doux); }
.donnees dd { margin: 6px 0 0; white-space: nowrap; font: 600 clamp(1.25rem, 5.4vw, 1.625rem)/1 var(--display); letter-spacing: 0; word-spacing: .12em; font-variant-numeric: tabular-nums lining-nums; }

/* Sections claires */
.cadre { max-width: 110rem; margin: 0 auto; padding: 0 var(--marge); }
.titre-section { margin: 0; font: 700 clamp(2.5rem, 7vw, 6rem)/.96 var(--display); letter-spacing: -.018em; word-spacing: .04em; text-wrap: balance; }
.titre-section em { display: block; font-weight: 200; }

.residences, .agence { position: relative; background: var(--sable); color: var(--encre); }
.residences::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 40vh; background: linear-gradient(to bottom, rgba(241,233,221,0), var(--sable)); pointer-events: none; z-index: 3; }
.residences { padding: clamp(64px, 9vw, 120px) 0 clamp(48px, 6vw, 80px); }
.residences .titre-section { max-width: 12ch; margin-bottom: clamp(48px, 7vw, 96px); }
.liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--encre); }
.bien { border-bottom: 1px solid var(--pierre); }
.bien a { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 24px 0; text-decoration: none; }
.bien-nom { font: 700 clamp(1.75rem, 4.4vw, 3.5rem)/1 var(--display); letter-spacing: -.012em; transition: transform .6s var(--sortie), font-weight .6s var(--sortie); }
.bien-lieu { grid-column: 1; color: var(--texte-doux); }
.bien-surface, .bien-prix { font: 400 .875rem/1.4 var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.bien-surface { grid-row: 1; grid-column: 2; align-self: end; color: var(--texte-doux); }
.bien-prix { grid-column: 2; }
.bien-image { grid-column: 1 / -1; margin-top: 16px; aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
@media (min-width: 900px) {
  .bien a { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 7rem 9rem; align-items: baseline; padding: 36px 0; }
  .bien-lieu, .bien-surface, .bien-prix { grid-column: auto; grid-row: auto; align-self: baseline; }
  .bien-image { position: absolute; right: 18rem; top: 50%; width: 22rem; margin: 0; z-index: 3; pointer-events: none; opacity: 0; clip-path: inset(50% 0 50% 0); transform: translateY(-50%) rotate(-2deg); transition: clip-path .7s var(--sortie), opacity .3s, transform .7s var(--sortie); box-shadow: 0 24px 48px -16px rgba(22,18,14,.5); }
  .bien a:hover .bien-image, .bien a:focus-visible .bien-image { opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(-50%) rotate(0); }
  .bien a:hover .bien-nom, .bien a:focus-visible .bien-nom { transform: translateX(16px); font-weight: 200; }
}

.agence { padding: clamp(48px, 6vw, 96px) 0 clamp(96px, 14vw, 180px); }
.agence-grille { display: grid; gap: 40px; }
.agence-texte > p { margin: 0; max-width: 36rem; font-size: 1.1875rem; color: var(--encre-2); }
.services { margin: 48px 0 0; display: grid; gap: 0; }
.services div { display: grid; grid-template-columns: 7rem 1fr; gap: 16px; padding: 18px 0; border-top: 1px solid var(--pierre); }
.services dt { font: 700 1.25rem/1.3 var(--display); letter-spacing: -.02em; }
.services dd { margin: 0; color: var(--texte-doux); }
@media (min-width: 900px) { .agence-grille { grid-template-columns: 1fr 1fr; gap: 64px; } }

/* Contact */
.contact { position: relative; padding: clamp(96px, 13vw, 170px) 0; background: var(--encre); overflow: hidden; isolation: isolate; }
.contact::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .22; background: url("assets/interieur.jpg") center / cover; filter: grayscale(.4) blur(2px); mask-image: linear-gradient(to left, #000 0, transparent 70%); -webkit-mask-image: linear-gradient(to left, #000 0, transparent 70%); }
.contact-grille { display: grid; gap: 56px; }
.contact-intro { max-width: 28rem; margin: 28px 0 0; font-size: 1.125rem; color: var(--clair-doux); }
.coordonnees { display: grid; gap: 6px; margin: 36px 0 0; font: 400 .875rem/1.5 var(--mono); color: var(--clair-doux); }
@media (min-width: 900px) { .contact-grille { grid-template-columns: 1fr minmax(0, 30rem); gap: 80px; align-items: start; } }

.formulaire { display: grid; gap: 22px; background: var(--sable); color: var(--encre); padding: clamp(24px, 3.4vw, 44px); box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); }
.champ { display: grid; gap: 8px; }
.champ label { font: 400 .75rem/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.optionnel { text-transform: none; letter-spacing: 0; color: var(--texte-doux); }
.champ input, .champ select, .champ textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid #a8977f; border-radius: 2px; background: var(--clair); color: var(--encre); font: 300 1rem/1.4 var(--sans); caret-color: var(--laiton-fonce); transition: border-color .2s, box-shadow .2s; }
.champ textarea { resize: vertical; }
.champ input:hover, .champ select:hover, .champ textarea:hover { border-color: var(--encre); }
.champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible { outline: none; border-color: var(--encre); box-shadow: 0 0 0 3px rgba(125, 86, 38, .35); }
.champ [aria-invalid="true"] { border-color: #9b2c1f; }
.erreur { margin: 0; font-size: .875rem; color: #9b2c1f; }
.formulaire .bouton { justify-self: start; }
.statut { margin: 0; font-size: .9375rem; color: var(--encre-2); }
.statut:empty { display: none; }

.pied { background: var(--encre); border-top: 1px solid rgba(251,247,240,.12); padding: 32px 0; color: var(--clair-doux); font-size: .9375rem; }
.pied-grille { display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: baseline; justify-content: space-between; }
.pied .marque { color: var(--clair); }
.pied p { margin: 0; max-width: 60ch; }

/* Chargement de page : une seule entrée orchestrée */
.js .titre-une .ligne > span { transform: translateY(105%); animation: monte 1.3s var(--sortie) forwards; }
.js .titre-une .ligne:nth-child(2) > span { animation-delay: .14s; }
.js .apparition { opacity: 0; animation: fondu 1.1s var(--sortie) forwards; animation-delay: .5s; }
.js .indice.apparition { animation-delay: .75s; }
@keyframes monte { to { transform: none; } }
@keyframes fondu { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Chapitres : apparition liée à l'entrée dans l'écran */
.js .chapitre:not(.chapitre-une) > * { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--sortie), transform 1.2s var(--sortie); }
.js .chapitre.visible > * { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .titre-une .ligne > span, .js .apparition { animation: none; transform: none; opacity: 1; }
  .js .chapitre:not(.chapitre-une) > * { opacity: 1; transform: none; transition: none; }
  .indice::after { animation: none; }
  .bien-image, .bien-nom { transition: none !important; }
}