/* LA MAISON — ART DIRECTION V4 */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Archivo:wdth,wght@62..125,100..900&family=IBM+Plex+Mono:wght@300;400&display=swap');

:root{
  --nuit:#0a0a0b;
  --fumee:#161514;
  --porcelaine:#f2efe9;
  --cendre:#8b857b;
  --rouge:#c33f2e;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--nuit);
  color:var(--porcelaine);
  font-family:'Archivo',sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--rouge);color:var(--porcelaine)}
::-webkit-scrollbar{width:0;height:0}

.serif{font-family:'Instrument Serif',serif;font-weight:400}
.mono{font-family:'IBM Plex Mono',monospace;font-weight:300}
.caps{
  font-family:'Archivo',sans-serif;
  font-variation-settings:'wdth' 118;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.34em;
  font-size:.66rem;
  color:var(--cendre);
}
.caps.lit{color:var(--porcelaine)}
.caps.rouge{color:var(--rouge)}

/* grain + vignette, always on */
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.06'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(3) infinite;
}
@keyframes grain{0%{transform:translate(0,0)}33%{transform:translate(-6px,4px)}66%{transform:translate(4px,-6px)}100%{transform:translate(0,0)}}
.vignette{position:fixed;inset:0;pointer-events:none;z-index:89;
  background:radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0,0,0,.55) 100%)}

/* scene primitives */
.scene{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center}
.reveal{opacity:0;transform:translateY(26px);transition:opacity 1.4s cubic-bezier(.22,1,.36,1),transform 1.4s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}
.reveal.slow{transition-duration:2.4s}

.media-full{position:absolute;inset:0;overflow:hidden}
.media-full video,.media-full img{width:100%;height:100%;object-fit:cover;display:block}
.media-shade{position:absolute;inset:0;background:
  linear-gradient(180deg, rgba(10,10,11,.72) 0%, rgba(10,10,11,.12) 34%, rgba(10,10,11,.16) 62%, rgba(10,10,11,.88) 100%)}

.hairline{width:1px;height:72px;background:linear-gradient(180deg,transparent,var(--cendre),transparent);margin:0 auto}
.hairline-h{height:1px;width:min(240px,40vw);background:linear-gradient(90deg,transparent,rgba(242,239,233,.5),transparent);margin:0 auto}

a{color:inherit;text-decoration:none}

.btn-ligne{
  display:inline-block;padding:1.05rem 2.6rem;border:1px solid rgba(242,239,233,.28);
  border-radius:999px;font-family:'Archivo';font-variation-settings:'wdth' 116;
  text-transform:uppercase;letter-spacing:.3em;font-size:.62rem;color:var(--porcelaine);
  transition:background .5s,border-color .5s,color .5s;background:transparent;cursor:pointer;
}
.btn-ligne:hover{background:var(--porcelaine);color:var(--nuit);border-color:var(--porcelaine)}
.btn-ligne.rouge{border-color:rgba(195,63,46,.75);color:#e8a79c}
.btn-ligne.rouge:hover{background:var(--rouge);color:var(--porcelaine)}

@media (max-width:760px){
  .caps{letter-spacing:.24em;font-size:.6rem}
}

.retour{padding:.5rem .9rem;background:rgba(10,10,11,.55);backdrop-filter:blur(6px);border-radius:999px}