/* ═══════════════════════════════════════════════════════════
   TEMPLATE — site bien immobilier de luxe
   ┌─────────────────────────────────────────────────────────┐
   │  ÉDITER UNIQUEMENT LE BLOC :root CI-DESSOUS (tokens DA).  │
   │  Tout le reste consomme ces variables → ne pas toucher.  │
   └─────────────────────────────────────────────────────────┘
   Presets de DA prêts à coller : voir DA-FRAMEWORK.md
   ═══════════════════════════════════════════════════════════ */

:root{
  /* ░░ TOKENS DA — Bleu Omega — « Bleu Profond & Blanc Cassé » (DA claire, aucun doré) ░░ */
  --c-bg:      #F5F1E9;   /* blanc cassé — fond principal */
  --c-panel:   #ECE6D9;   /* panneaux / sections alternées */
  --c-surface: #D8D0BE;   /* surface stone (bordures, cadres) */
  --c-text:    #14161C;   /* noir très doux — texte principal sur fond clair */
  --c-text-dim:#82807A;   /* gris pierre — texte secondaire */
  --c-accent:  #10203E;   /* bleu profond — accent unique (filets, CTA) */
  --c-line:    rgba(16,32,62,.16); /* bordures = accent dilué */

  /* Voile sombre sur médias photo/vidéo (indépendant du fond clair de la page) */
  --c-scrim:   #0A1220;   /* bleu-noir profond, ambiance nuit */
  --c-onmedia: #F5F1E9;   /* texte clair posé sur médias sombres = --c-bg */

  --ff-display:'Cormorant Garamond', Georgia, serif;
  --ff-sans:   'Jost', 'Helvetica Neue', Arial, sans-serif;

  --ease: cubic-bezier(.22,1,.36,1);
  --reveal-y: 28px;
  --pad: clamp(1.4rem, 5vw, 6rem);
  --radius: 1px;

  /* Voiles sur médias — DA claire : voile renforcé (voir DA-FRAMEWORK §4 preset C) */
  --scrim-top: 30%; --scrim-mid: 8%; --scrim-bot: 72%;

  /* ── Dérivés (ne pas éditer) ── */
  --c-accent-soft: color-mix(in srgb, var(--c-accent) 65%, var(--c-text));
  --c-accent-onmedia: color-mix(in srgb, var(--c-accent) 35%, var(--c-onmedia));
}

/* ═══════════ BASE (structurel — ne pas toucher) ═══════════ */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{background:var(--c-bg);color:var(--c-text);font-family:var(--ff-sans);font-weight:300;line-height:1.7;overflow-x:hidden;cursor:none}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--c-accent);color:var(--c-bg)}
.lenis.lenis-smooth{scroll-behavior:auto!important}

.display{font-family:var(--ff-display);font-weight:400;line-height:1.02;letter-spacing:.005em;font-size:clamp(2.6rem,7vw,6rem)}
.eyebrow{font-family:var(--ff-sans);font-weight:400;font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;color:var(--c-accent);display:inline-block}
p{font-size:clamp(1rem,1.15vw,1.18rem);color:var(--c-text-dim);max-width:42ch}

/* Overlays */
.grain{position:fixed;inset:-50%;z-index:9000;pointer-events:none;opacity:.05;
  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='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}30%{transform:translate(3%,-6%)}50%{transform:translate(-3%,5%)}70%{transform:translate(5%,2%)}100%{transform:translate(0,0)}}
.vignette{position:fixed;inset:0;z-index:8900;pointer-events:none;box-shadow:inset 0 0 220px color-mix(in srgb,var(--c-scrim) 32%,transparent)}

/* Curseur */
.cursor{position:fixed;top:0;left:0;z-index:9500;pointer-events:none;width:9px;height:9px;border-radius:50%;background:var(--c-accent);transform:translate(-50%,-50%);transition:width .4s var(--ease),height .4s var(--ease),background .4s var(--ease);display:flex;align-items:center;justify-content:center}
.cursor.is-hover{width:64px;height:64px;background:color-mix(in srgb,var(--c-accent) 16%,transparent);border:1px solid var(--c-accent-soft)}
.cursor.is-media{width:90px;height:90px;background:color-mix(in srgb,var(--c-text) 8%,transparent);border:1px solid var(--c-text-dim)}
.cursor-label{font-family:var(--ff-sans);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--c-text);opacity:0;transition:opacity .3s;white-space:nowrap}
.cursor.is-media .cursor-label{opacity:.9}
@media(hover:none){.cursor{display:none}body{cursor:auto}}

/* Header */
.header{position:fixed;top:0;left:0;width:100%;z-index:6000;display:flex;align-items:center;justify-content:space-between;padding:1.7rem var(--pad);transition:padding .5s var(--ease),background .5s var(--ease),color .5s var(--ease);color:var(--c-onmedia)}
.header.is-solid{padding:1rem var(--pad);background:color-mix(in srgb,var(--c-bg) 84%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--c-line);color:var(--c-text)}
.brand{display:flex;align-items:center;gap:.65rem;font-family:var(--ff-display);font-size:1.3rem;letter-spacing:.03em;color:inherit}
.brand-logo{position:relative;width:30px;height:19px;flex:none}
.brand-logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .5s var(--ease)}
.brand-logo .is-dark{opacity:0}
.header.is-solid .brand-logo .is-light{opacity:0}
.header.is-solid .brand-logo .is-dark{opacity:1}
.nav{display:flex;gap:2.4rem}
.nav a{font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:inherit;position:relative;padding-bottom:4px;opacity:.85;transition:opacity .3s}
.nav a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:currentColor;transition:width .4s var(--ease)}
.nav a:hover{opacity:1}.nav a:hover::after{width:100%}
@media(max-width:860px){.nav{display:none}}
.lang{background:none;border:1px solid color-mix(in srgb,currentColor 35%,transparent);color:inherit;font-family:var(--ff-sans);font-size:.7rem;letter-spacing:.16em;padding:.5rem .8rem;border-radius:40px;display:flex;gap:.35rem;align-items:center;transition:border-color .3s;cursor:none}
.lang:hover{border-color:currentColor}
.lang span{opacity:.4;transition:opacity .3s}
.lang span.is-active{opacity:1}
.lang-sep{opacity:.3!important}

/* HERO — vidéo seule, aucun autre élément (cf. brief) */
.hero{position:relative;height:100svh;width:100%;overflow:hidden;background:var(--c-scrim)}
.hero-media,.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--c-scrim) var(--scrim-top),transparent) 0%,color-mix(in srgb,var(--c-scrim) var(--scrim-mid),transparent) 35%,color-mix(in srgb,var(--c-scrim) var(--scrim-bot),transparent) 100%)}
.hero-foot{position:absolute;left:50%;bottom:2.4rem;transform:translateX(-50%);z-index:3}
.scroll-cue{display:block;width:1px;height:54px;background:color-mix(in srgb,var(--c-onmedia) 35%,transparent);position:relative;overflow:hidden}
.scroll-cue span{position:absolute;top:0;left:0;width:100%;height:40%;background:var(--c-onmedia);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(-100%)}100%{transform:translateY(250%)}}

/* CHAPTERS */
.chapter{background:var(--c-bg)}
.chapter-stage{position:relative;height:100svh;width:100%;overflow:hidden}
.chapter-video,.chapter-still-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.chapter-scrim{position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--c-scrim) var(--scrim-bot),transparent),color-mix(in srgb,var(--c-scrim) var(--scrim-mid),transparent) 40%,color-mix(in srgb,var(--c-scrim) var(--scrim-bot),transparent))}
.chapter-caption{position:absolute;left:var(--pad);bottom:clamp(4rem,10vh,8rem);z-index:3;max-width:min(90vw,640px)}
.chapter-caption.align-right{left:auto;right:var(--pad);text-align:right}
.chapter-caption.align-right p{margin-left:auto}
.chapter-caption .eyebrow{color:var(--c-accent-onmedia)}
.chapter-caption .display{margin:.5rem 0 1.2rem;color:var(--c-onmedia)}
.chapter-caption p{color:var(--c-onmedia);opacity:.85}

/* SPLIT (image + texte côte à côte — casse la répétition d'images plein cadre,
   utilisé par 01-Vision et 06-Estimates pour ne pas enchaîner deux blocs plein format) */
.split{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:clamp(2rem,5vw,5rem);padding:clamp(6rem,14vh,12rem) var(--pad);background:var(--c-bg)}
.split-reverse{grid-template-columns:.9fr 1.1fr}
.split-reverse .split-media{order:2}
.split-media{overflow:hidden;border-radius:var(--radius)}
.split-media img{width:100%;height:clamp(360px,58vh,640px);object-fit:cover}
.split-text .eyebrow{margin-bottom:.2rem}
.split-text .display{margin:.6rem 0 1.4rem}
.split-text p+p{margin-top:1.2rem}
@media(max-width:860px){.split,.split-reverse{grid-template-columns:1fr}.split-reverse .split-media{order:0}}

/* GALLERY */
.gallery{display:grid;gap:clamp(.5rem,1vw,1rem);padding:clamp(.5rem,1vw,1rem);background:var(--c-bg)}
.gallery-2{grid-template-columns:repeat(2,1fr)}
.gallery-3{grid-template-columns:repeat(3,1fr)}
.gallery-4{grid-template-columns:repeat(4,1fr)}
.gallery figure{overflow:hidden}
.gallery img{width:100%;height:clamp(260px,42vh,560px);object-fit:cover;transition:transform 1.2s var(--ease)}
.gallery figure:hover img{transform:scale(1.05)}
@media(max-width:860px){.gallery-3,.gallery-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.gallery-2,.gallery-3,.gallery-4{grid-template-columns:1fr}}

/* SECTION-HEAD (en-tête centré générique : eyebrow + display + intro) */
.section-head{padding:clamp(5rem,12vh,9rem) var(--pad) 0;text-align:center;background:var(--c-panel)}
.section-head.on-bg{background:var(--c-bg);padding-bottom:0}
.section-head .display{margin:.6rem 0 1.4rem}
.section-head p{margin:0 auto;max-width:52ch}

/* COMPARE (section 2 — comparateur avant/après) */
.compare-wrap{background:var(--c-panel);padding-bottom:clamp(5rem,12vh,9rem)}
.compare{position:relative;max-width:1160px;margin:3.2rem auto 0;aspect-ratio:16/10;overflow:hidden;border-radius:var(--radius);cursor:ew-resize;touch-action:none;background:var(--c-scrim)}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none;pointer-events:none}
.compare-after{clip-path:inset(0 0 0 50%)}
.compare-handle{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);pointer-events:none}
.compare-handle::before{content:'';position:absolute;top:0;bottom:0;left:0;width:1px;background:var(--c-onmedia)}
.compare-grip{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:var(--c-onmedia);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 26px rgba(10,18,32,.35)}
.compare-grip::before,.compare-grip::after{content:'';width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent}
.compare-grip::before{border-right:7px solid var(--c-accent);margin-right:3px}
.compare-grip::after{border-left:7px solid var(--c-accent);margin-left:3px}
.compare-tag{position:absolute;top:1.2rem;z-index:2;font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--c-onmedia);background:color-mix(in srgb,var(--c-scrim) 55%,transparent);padding:.55rem 1.1rem}
.compare-tag.is-before{left:1.2rem}
.compare-tag.is-after{right:1.2rem}
@media(max-width:860px){.compare{aspect-ratio:3/4}}

/* PORTFOLIO (section 4 — Selected Presentations) */
.portfolio{padding:clamp(5rem,12vh,9rem) var(--pad);background:var(--c-bg)}
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.1rem,2.2vw,2rem);margin-top:3.6rem}
.portfolio-card{position:relative;display:block;overflow:hidden;border-radius:var(--radius);aspect-ratio:4/5}
.portfolio-card img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.portfolio-card:hover img{transform:scale(1.08)}
.portfolio-scrim{position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,color-mix(in srgb,var(--c-scrim) 92%,transparent) 100%);transition:opacity .4s var(--ease)}
.portfolio-info{position:absolute;left:1.7rem;right:1.7rem;bottom:1.6rem;color:var(--c-onmedia)}
.portfolio-location{display:block;font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--c-accent-onmedia);margin-bottom:.5rem}
.portfolio-title{font-family:var(--ff-display);font-size:clamp(1.25rem,1.8vw,1.7rem);margin-bottom:.5rem}
.portfolio-desc{font-size:.84rem;color:color-mix(in srgb,var(--c-onmedia) 82%,transparent);max-width:32ch;margin-bottom:1.1rem}
.portfolio-link{display:inline-flex;align-items:center;gap:.5rem;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--c-onmedia);border-bottom:1px solid color-mix(in srgb,var(--c-onmedia) 50%,transparent);padding-bottom:2px;opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.portfolio-card:hover .portfolio-link{opacity:1;transform:translateY(0)}
@media(max-width:1000px){.portfolio-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.portfolio-grid{grid-template-columns:1fr}.portfolio-card{aspect-ratio:4/5}}

/* Carte portfolio "à venir" — non cliquable, blur + mention au survol */
.portfolio-card.is-coming-soon{cursor:default}
.portfolio-card.is-coming-soon img{transition:transform 1.4s var(--ease),filter .5s var(--ease)}
.portfolio-card.is-coming-soon:hover img{transform:none;filter:blur(6px)}
.portfolio-soon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2;opacity:0;transition:opacity .4s var(--ease);pointer-events:none}
.portfolio-card.is-coming-soon:hover .portfolio-soon{opacity:1}
.portfolio-soon span{font-family:var(--ff-sans);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--c-onmedia);border:1px solid color-mix(in srgb,var(--c-onmedia) 55%,transparent);padding:.75rem 1.6rem;border-radius:48px;background:color-mix(in srgb,var(--c-scrim) 45%,transparent)}

/* CONTACT (réutilisé pour le CTA final) */
.contact{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden;text-align:center}
.contact-bg,.contact-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.contact-scrim{position:absolute;inset:0;background:color-mix(in srgb,var(--c-scrim) 66%,transparent)}
.contact-inner{position:relative;z-index:3;padding:var(--pad);max-width:760px}
.contact-inner .eyebrow{color:var(--c-accent-onmedia)}
.contact-title{font-family:var(--ff-display);font-weight:400;color:var(--c-onmedia);font-size:clamp(2.4rem,6vw,5rem);line-height:1.05;margin:.8rem 0 1.4rem}
.contact-inner p{color:var(--c-onmedia);opacity:.85;max-width:46ch;margin:0 auto 2.6rem}
.cta{display:inline-block;border:1px solid var(--c-onmedia);color:var(--c-onmedia);padding:1.1rem 2.8rem;border-radius:48px;font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;transition:background .5s var(--ease),color .5s var(--ease);cursor:none}
.cta:hover{background:var(--c-onmedia);color:var(--c-scrim)}

/* FOOTER */
.footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding:2.4rem var(--pad);background:var(--c-bg);border-top:1px solid var(--c-line)}
.footer-brand{font-family:var(--ff-display);font-size:1.3rem;color:var(--c-text)}
.footer-meta,.footer-legal{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--c-text-dim)}

/* REVEAL */
.reveal{opacity:0;transform:translateY(var(--reveal-y))}
.reveal-media{overflow:hidden;position:relative}
.reveal-media img{transform:scale(1.12);transition:transform 1.4s var(--ease)}
.reveal-media.is-in img{transform:scale(1)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}.grain{display:none}}