/* ═══════════════════════════════════════════════════════════
   THE SOUTH — DA reprise de The South Antiques
   Noir chaud, doré, Bodoni / Jost / EB Garamond.
   La seule chose qu'on ajoute : le mur de sable et son arche.
   ═══════════════════════════════════════════════════════════ */
:root{
  --bg:#0D0B08;
  --gold:#C9A060;
  --gold-l:#DDB87A;
  --cream:#F2EBE0;
  --sable:#C9B896;      /* la pierre sèche, sous la photo */
  --sable-o:#B3A181;
  --serif:'Bodoni Moda',serif;
  --eb:'EB Garamond',serif;
  --sans:'Jost',sans-serif;
  --frame:44px;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{background:var(--bg);overflow-x:hidden;overscroll-behavior:none}
body{font-family:var(--eb);font-weight:400;color:var(--cream)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
[hidden]{display:none!important}
*{-webkit-tap-highlight-color:transparent}
:where(a,button,summary,[tabindex]):focus{outline:none}
:where(a,button,summary,[tabindex]):focus-visible{
  outline:1px solid var(--gold);outline-offset:4px}

/* ── Curseur ─────────────────────────────────────────────── */
html.fin,html.fin body{cursor:none}
#cur{position:fixed;width:5px;height:5px;background:var(--gold);border-radius:50%;
  pointer-events:none;z-index:9999;transform:translate(-50%,-50%);display:none}
#cur-ring{position:fixed;width:26px;height:26px;border:1px solid rgba(201,160,96,.4);
  border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);
  display:none;transition:width .4s,height .4s,border-color .4s}
html.fin #cur,html.fin #cur-ring{display:block}
html.fin .lien:hover ~ #cur-ring,#cur-ring.gros{width:52px;height:52px;border-color:var(--gold-l)}

/* ── Splash ──────────────────────────────────────────────── */
#splash{position:fixed;inset:0;z-index:1000;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  pointer-events:none}
#splash .clip{overflow:hidden;padding:.08em 0}
#splash .mot{font-family:var(--serif);font-weight:300;letter-spacing:.02em;
  font-size:clamp(38px,7vw,86px);line-height:1;color:var(--cream);
  transform:translateY(105%)}
#splash .tag{margin-top:26px;font-family:var(--sans);font-weight:200;font-size:11px;
  letter-spacing:.44em;text-transform:uppercase;color:var(--gold);
  overflow:hidden;white-space:nowrap;width:0}

/* ── Nav ─────────────────────────────────────────────────── */
nav{position:fixed;top:0;left:0;right:0;z-index:300;
  padding:38px var(--frame) 0;display:flex;justify-content:space-between;align-items:center;
  background:linear-gradient(to bottom,rgba(13,11,8,.72) 0%,rgba(13,11,8,0) 100%)}
nav .marque{font-family:var(--serif);font-weight:300;font-size:19px;letter-spacing:.06em;
  line-height:1;color:var(--cream)}
nav .marque small{display:block;font-family:var(--sans);font-weight:200;font-size:8px;
  letter-spacing:.42em;text-transform:uppercase;color:var(--gold);margin-bottom:5px}
nav ul{list-style:none;display:flex;gap:40px}
nav ul a,nav .lang button{font-family:var(--sans);font-weight:200;font-size:10px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--cream);opacity:.6;
  transition:opacity .3s,color .3s}
nav ul a:hover,nav .lang button[aria-pressed=true]{opacity:1;color:var(--gold)}
nav .lang{display:flex;gap:10px;align-items:center}
nav .lang b{font-weight:200;opacity:.25;color:var(--cream)}

/* ── Le cadre doré ───────────────────────────────────────── */
.cadre{position:absolute;inset:var(--frame);border:1px solid rgba(201,160,96,.18);
  z-index:5;pointer-events:none}
.cadre i{position:absolute;width:18px;height:18px}
.cadre .tl{top:-1px;left:-1px;border-top:1px solid rgba(201,160,96,.6);border-left:1px solid rgba(201,160,96,.6)}
.cadre .tr{top:-1px;right:-1px;border-top:1px solid rgba(201,160,96,.6);border-right:1px solid rgba(201,160,96,.6)}
.cadre .bl{bottom:-1px;left:-1px;border-bottom:1px solid rgba(201,160,96,.6);border-left:1px solid rgba(201,160,96,.6)}
.cadre .br{bottom:-1px;right:-1px;border-bottom:1px solid rgba(201,160,96,.6);border-right:1px solid rgba(201,160,96,.6)}

/* ── L'immersion : une section épinglée, des scènes ──────── */
.immersion{position:relative}
.pin{position:sticky;top:0;height:100svh;overflow:hidden}
.scene{position:absolute;inset:0;overflow:hidden}
.scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform-origin:center;will-change:transform,opacity}
.vign{position:absolute;inset:0;z-index:1;opacity:var(--vg,1);
  background:linear-gradient(105deg,rgba(13,11,8,.86) 0%,rgba(13,11,8,.4) 40%,rgba(13,11,8,0) 66%)}
.vign-bas{position:absolute;inset:0;z-index:1;opacity:var(--vg,1);
  background:linear-gradient(to top,rgba(13,11,8,.5) 0%,transparent 28%)}

/* ── La grammaire d'une scène ────────────────────────────── */
.txt{position:absolute;left:calc(var(--frame) + 28px);bottom:calc(var(--frame) + 36px);
  z-index:20;max-width:540px;pointer-events:none}
.sur{font-family:var(--sans);font-weight:200;font-size:9px;letter-spacing:.42em;
  text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.h{font-family:var(--serif);font-optical-sizing:auto;font-weight:300;
  font-size:clamp(46px,7.5vw,104px);line-height:.86;letter-spacing:-.01em;margin-bottom:22px}
.h em{font-style:italic;color:var(--gold-l);font-weight:300}
.p{font-family:var(--eb);font-size:15.5px;line-height:1.95;letter-spacing:.015em;
  color:rgba(242,235,224,.72)}
.txt .lien{pointer-events:auto;display:inline-block;margin-top:26px;
  font-family:var(--sans);font-weight:200;font-size:10px;letter-spacing:.32em;
  text-transform:uppercase;color:var(--gold);
  border-bottom:1px solid rgba(201,160,96,.3);padding-bottom:5px;
  transition:color .3s,border-color .3s}
.txt .lien:hover{color:var(--gold-l);border-color:var(--gold-l)}

/* Les scènes apparaissent : sans JS elles sont déjà là. */
html.js .scene .sur,html.js .scene .h,html.js .scene .p,html.js .scene .lien{
  opacity:0;transform:translateY(14px)}
html.js .scene.on .sur,html.js .scene.on .h,html.js .scene.on .p,html.js .scene.on .lien{
  opacity:1;transform:none;
  transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
html.js .scene.on .h{transition-delay:.08s}
html.js .scene.on .p{transition-delay:.16s}
html.js .scene.on .lien{transition-delay:.24s}

/* ── Les repères latéraux ────────────────────────────────── */
.reperes{position:absolute;right:calc(var(--frame) + 28px);top:50%;
  transform:translateY(-50%);z-index:10;display:flex;flex-direction:column;gap:12px;
  pointer-events:none}
.reperes i{display:block;width:1px;height:20px;background:rgba(201,160,96,.25);
  transition:height .45s ease,background .45s ease}
.reperes i.on{height:40px;background:var(--gold)}

.cue{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--frame) + 12px);
  z-index:10;display:flex;align-items:center;gap:14px}
.cue span{font-family:var(--sans);font-weight:200;font-size:8px;letter-spacing:.32em;
  text-transform:uppercase;color:var(--gold)}
.cue i{display:block;width:48px;height:1px;
  background:linear-gradient(to right,var(--gold),transparent);
  animation:battement 2s ease-in-out infinite}
@keyframes battement{0%,100%{opacity:1;transform:scaleX(1)}50%{opacity:.3;transform:scaleX(.6)}}

/* ── LE MUR DE SABLE ET SON ARCHE ────────────────────────── */
/* La photo est vue à travers une ouverture percée dans un mur de sable.
   Au défilement on entre dedans, jusqu'à ce qu'elle occupe l'écran. */
.mur{position:absolute;inset:0;z-index:8;pointer-events:none;opacity:1;
  -webkit-mask-image:var(--decoupe);mask-image:var(--decoupe);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  /* Le masque, la pierre et le chambranle sont dans le MÊME élément : quand
     il grandit, l'ouverture grandit avec lui, à l'identique. L'arche ne peut
     donc pas se déformer — elle ne fait que se rapprocher. */
  transform:scale(var(--mk,1));transform-origin:50% 50%;
  will-change:transform;backface-visibility:hidden}

.mur .pierre{position:absolute;inset:0;
  background-color:#C9B896;
  background-image:url("https://images.unsplash.com/photo-1603621062552-1029ca1aece2?w=3200&q=86&auto=format&fit=crop"),linear-gradient(rgba(201,184,150,.62),rgba(201,184,150,.62)),url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'700'%20height%3D'700'%3E%3Cfilter%20id%3D'p'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.009%200.016'%20numOctaves%3D'5'%20seed%3D'9'%20result%3D'gros'%2F%3E%3CfeDiffuseLighting%20in%3D'gros'%20lighting-color%3D'%23F4F2F7'%20surfaceScale%3D'2.6'%20diffuseConstant%3D'1.02'%20result%3D'relief'%3E%3CfeDistantLight%20azimuth%3D'125'%20elevation%3D'54'%2F%3E%3C%2FfeDiffuseLighting%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.42'%20numOctaves%3D'4'%20seed%3D'4'%20result%3D'fin'%2F%3E%3CfeColorMatrix%20in%3D'fin'%20type%3D'matrix'%20result%3D'fing'%20values%3D'0%200%200%200%200.93%20%200%200%200%200%200.92%200%200%200%200%200.95%20%200%200%200%200%201'%2F%3E%3CfeBlend%20in%3D'relief'%20in2%3D'fing'%20mode%3D'multiply'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'700'%20height%3D'700'%20filter%3D'url(%23p)'%2F%3E%3C%2Fsvg%3E");
  background-size:cover,cover,760px 760px;
  background-position:50% 50%,0 0,0 0;
  background-repeat:no-repeat,repeat,repeat}

/* Le grain fin annule l'agrandissement du parent : il reste à la même
   taille à l'écran quelle que soit la distance. Les gros reliefs zooment
   (c'est eux qui donnent l'approche), le grain garde la pierre nette. */
.mur .grain{position:absolute;inset:-160%;opacity:.19;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'700'%20height%3D'700'%3E%3Cfilter%20id%3D'p'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.009%200.016'%20numOctaves%3D'5'%20seed%3D'9'%20result%3D'gros'%2F%3E%3CfeDiffuseLighting%20in%3D'gros'%20lighting-color%3D'%23F4F2F7'%20surfaceScale%3D'2.6'%20diffuseConstant%3D'1.02'%20result%3D'relief'%3E%3CfeDistantLight%20azimuth%3D'125'%20elevation%3D'54'%2F%3E%3C%2FfeDiffuseLighting%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.42'%20numOctaves%3D'4'%20seed%3D'4'%20result%3D'fin'%2F%3E%3CfeColorMatrix%20in%3D'fin'%20type%3D'matrix'%20result%3D'fing'%20values%3D'0%200%200%200%200.93%20%200%200%200%200%200.92%200%200%200%200%200.95%20%200%200%200%200%201'%2F%3E%3CfeBlend%20in%3D'relief'%20in2%3D'fing'%20mode%3D'multiply'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'700'%20height%3D'700'%20filter%3D'url(%23p)'%2F%3E%3C%2Fsvg%3E");
  background-size:540px 540px;background-repeat:repeat;
  transform:scale(var(--inv,1));transform-origin:50% 50%;
  will-change:transform}

/* Le chambranle : l'épaisseur du mur dans l'embrasure. Posé dans le mur, il
   suit exactement la même échelle que l'ouverture. */
.mur .chambranle{position:absolute;z-index:3;
  left:var(--ax,35%);top:var(--ay,18%);width:var(--aw,30%);height:var(--ah,64%);
  border-radius:50% 50% 0 0 / var(--ar,40%) var(--ar,40%) 0 0;
  box-shadow:
    inset 0 5px 26px rgba(58,42,22,.55),
    inset 5px 0 30px rgba(58,42,22,.36),
    inset -5px 0 30px rgba(58,42,22,.28),
    inset 0 -3px 16px rgba(58,42,22,.22),
    inset 0 0 0 1px rgba(58,42,22,.38),
    0 2px 0 0 rgba(255,252,244,.6),
    0 0 22px 2px rgba(58,42,22,.16)}

/* La lumière vient du ciel : elle se pose sur le mur, elle ne bouge pas. */
.mur::before{content:'';position:absolute;inset:0;z-index:2;
  background-image:
    radial-gradient(130% 95% at 20% 2%, rgba(255,248,230,.40), rgba(255,248,230,0) 52%),
    radial-gradient(95% 85% at 86% 99%, rgba(70,54,32,.34), rgba(70,54,32,0) 58%)}

/* ── Pied ────────────────────────────────────────────────── */
footer{position:relative;z-index:20;background:var(--bg);
  padding:44px var(--frame);display:flex;justify-content:space-between;
  gap:18px;flex-wrap:wrap;
  font-family:var(--sans);font-weight:200;font-size:9px;letter-spacing:.3em;
  text-transform:uppercase;color:rgba(242,235,224,.4);
  border-top:1px solid rgba(201,160,96,.12)}
footer a:hover{color:var(--gold)}

/* ── Le relevé et le contact ─────────────────────────────── */
.releve{display:flex;flex-direction:column;margin-top:8px}
.releve div{display:flex;align-items:flex-start;gap:20px;
  border-bottom:1px solid rgba(201,160,96,.1);padding:14px 0}
.releve div:first-child{border-top:1px solid rgba(201,160,96,.1)}
.releve .k{font-family:var(--sans);font-weight:200;font-size:8px;letter-spacing:.38em;
  text-transform:uppercase;color:var(--gold);opacity:.7;min-width:82px;flex-shrink:0;padding-top:4px}
.releve .v{font-family:var(--eb);font-size:15px;color:rgba(242,235,224,.8);line-height:1.6}
.releve a{pointer-events:auto}
.releve a:hover .v{color:var(--gold-l)}

@media(max-width:900px){
  :root{--frame:20px}
  nav{padding:24px var(--frame) 0}
  nav ul{gap:16px}
  nav ul a{font-size:8px;letter-spacing:.12em}
  .txt{left:calc(var(--frame) + 12px);bottom:calc(var(--frame) + 22px);max-width:86vw}
  .p{font-size:14.5px;line-height:1.85}
  .reperes{right:calc(var(--frame) + 10px)}
  .releve .k{min-width:64px}
}
@media(prefers-reduced-motion:reduce){
  .cue i{animation:none}
  html.js .scene .sur,html.js .scene .h,html.js .scene .p,html.js .scene .lien{
    opacity:1;transform:none}
}

/* La première scène : son texte n'arrive qu'une fois l'arche franchie. */
html.js .immersion .scene:first-of-type .txt{opacity:0}

/* ── Quand le mur de sable occupe l'écran, l'interface passe à l'encre ── */
html.sur-sable nav{background:none}
html.sur-sable nav .marque,
html.sur-sable nav ul a,
html.sur-sable nav .lang button,
html.sur-sable nav .lang b{color:#2E2618}
html.sur-sable nav .marque small,
html.sur-sable nav ul a:hover,
html.sur-sable nav .lang button[aria-pressed=true]{color:#F2E4C4}
html.sur-sable .cue span{color:#F2E4C4}
html.sur-sable .cue i{background:linear-gradient(to right,#F2E4C4,transparent)}
html.sur-sable .reperes i{background:rgba(64,48,28,.26)}
html.sur-sable .reperes i.on{background:#F2E4C4}
html.sur-sable #cur{background:#2E2618}
html.sur-sable #cur-ring{border-color:rgba(46,38,24,.45)}
html.sur-sable .cadre{opacity:0}
nav,.cadre{transition:opacity .5s,color .5s}

/* ── Le clic : les scènes en attente laissent passer ─────── */
/* Une scène à opacité 0 reste cliquable : c'est ce qui bloquait
   « Voir la maison ». Seule la scène courante reçoit les clics. */
.scene{pointer-events:none}
.scene.on{pointer-events:auto}
.scene .txt{pointer-events:none}
.scene.on .txt .lien{pointer-events:auto}


/* ── Le champ vu par l'arche ─────────────────────────────── */
/* Dans la photo de référence, l'ouverture est un bleu profond qui tranche sur
   la pierre claire. Une lavande rose pâle ne tiendrait pas ce rôle : on la
   refroidit vers le bleu-violet et on la fonce, pour qu'elle fasse le même
   bloc de couleur que la ferronnerie bleue. */
.immersion .scene:first-of-type img{
  filter:saturate(1.02) hue-rotate(-5deg) brightness(.96) contrast(1.03);
}

/* Vue par une petite ouverture, la première scène ne doit pas être voilée.
   Le script relève ce voile à mesure que l'arche s'ouvre ; cette valeur par
   défaut évite le trou noir si le script n'a pas encore la main. */
.immersion .scene:first-of-type .vign,
.immersion .scene:first-of-type .vign-bas{opacity:var(--vg,.14)}