/* ── Nous — The Grand Budapest Hotel aesthetic ── */

:root{
  --hotel-pink:#F0CDDA;
  --hotel-purple:#6B2D5E;
  --hotel-gold:#C8A44E;
  --hotel-cream:#FDF5EC;
  --hotel-red:#8B2E4F;
  --hotel-plum:#3D1F35;
  --hotel-blush:#F5E0E8;
  --hotel-green:#6B8E6A;
  --hotel-blue:#7FA5B8;
  --hotel-lavender:#C4B5CC;
  --hotel-ink:#2D1825;

  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'Josefin Sans', sans-serif;
  --mono:'Old Standard TT', serif;

  --frame:14px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--hotel-cream);
  color:var(--hotel-ink);
  font-family:var(--sans);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------- paper grain ---------- */
.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- outer film frame — hotel key plate style ---------- */
.film-frame{
  position:fixed; inset:var(--frame); z-index:50; pointer-events:none;
  border:2px solid var(--hotel-gold);
  box-shadow:inset 0 0 0 2px var(--hotel-purple), inset 0 0 0 6px var(--hotel-cream), inset 0 0 0 8px var(--hotel-purple);
}
.film-frame .corner{
  position:absolute; width:16px; height:16px; background:var(--hotel-gold);
  transform:rotate(45deg);
  box-shadow:0 0 0 3px var(--hotel-purple);
}
.film-frame .corner.tl{ top:-8px; left:-8px; }
.film-frame .corner.tr{ top:-8px; right:-8px; }
.film-frame .corner.bl{ bottom:-8px; left:-8px; }
.film-frame .corner.br{ bottom:-8px; right:-8px; }

/* ---------- shared decorative bits ---------- */
.loz{
  display:inline-block; width:8px; height:8px; background:var(--hotel-gold);
  transform:rotate(45deg); margin:0 .7em; vertical-align:middle;
}
.loz.hollow{ background:transparent; box-shadow:inset 0 0 0 1.5px var(--hotel-gold); }

.wrap{ max-width:1160px; margin:0 auto; padding:0 48px; }

/* ====================================================== */
/* HEADER — Grand Budapest Hotel cartouche                 */
/* ====================================================== */
.cartouche{
  background:linear-gradient(180deg, var(--hotel-pink) 0%, var(--hotel-blush) 100%);
  color:var(--hotel-plum);
  text-align:center;
  padding:100px 24px 96px;
  position:relative;
}
.cartouche .inner-border{
  position:absolute; inset:28px;
  border:2px solid var(--hotel-purple);
  pointer-events:none;
}
.cartouche .inner-border::before{
  content:""; position:absolute; inset:4px;
  border:1px solid var(--hotel-gold); opacity:.5;
  pointer-events:none;
}
.corner-diamond{
  position:absolute; width:12px; height:12px; background:var(--hotel-gold);
  transform:rotate(45deg);
  box-shadow:0 0 0 2px var(--hotel-purple);
}
.cd-tl{ top:22px; left:22px; } .cd-tr{ top:22px; right:22px; }
.cd-bl{ bottom:22px; left:22px; } .cd-br{ bottom:22px; right:22px; }

.reel{
  font-family:var(--sans); font-size:11px; letter-spacing:.5em;
  text-transform:uppercase; margin-bottom:28px; opacity:.8;
  color:var(--hotel-purple);
}
.presents{
  font-family:var(--sans); font-size:14px; letter-spacing:.55em;
  text-transform:uppercase; margin-bottom:28px;
  color:var(--hotel-purple);
}
.maintitle{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(72px,16vw,150px); line-height:.92; letter-spacing:.08em;
  margin:0 0 6px; display:flex; align-items:center; justify-content:center;
  color:var(--hotel-plum);
}
.maintitle .loz{ width:22px; height:22px; }
.tagline{
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:clamp(22px,3.4vw,32px); margin:20px 0 32px;
  color:var(--hotel-purple);
}
.place{
  font-family:var(--sans); font-size:12px; letter-spacing:.42em;
  text-transform:uppercase; color:var(--hotel-purple); opacity:.8;
}
.place::before, .place::after{ content:"·"; margin:0 16px; }

/* ====================================================== */
/* SECTION scaffold                                        */
/* ====================================================== */
section{ position:relative; padding:100px 0 106px; }
.sec-head{ text-align:center; margin-bottom:64px; position:relative; }
.sec-num{
  font-family:var(--mono); font-style:italic;
  font-size:76px; line-height:1; opacity:.15; margin-bottom:4px;
  color:var(--hotel-purple);
}
.sec-title{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(30px,5vw,46px); letter-spacing:.2em;
  text-transform:uppercase; margin:0 0 24px;
  display:flex; align-items:center; justify-content:center;
  color:var(--hotel-plum);
}
.sec-rule{
  width:140px; height:0; margin:0 auto;
  border-top:2px solid var(--hotel-gold); position:relative;
}
.sec-rule::before{
  content:""; position:absolute; left:50%; top:50%;
  width:9px; height:9px; background:var(--hotel-gold);
  transform:translate(-50%,-50%) rotate(45deg);
}
.sec-rule::after{
  content:""; position:absolute; left:50%; top:50%;
  width:3px; height:3px; background:var(--hotel-cream);
  transform:translate(-50%,-50%) rotate(45deg);
}

/* ====================================================== */
/* SECTION 1 — LE CASTING (hotel staff portraits)          */
/* ====================================================== */
.cast{ background:var(--hotel-cream); }
.cast-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:38px 32px;
}
.cast-card{
  background:#fff; border:2px solid var(--hotel-purple);
  padding:28px 24px 32px; text-align:center; position:relative;
  transition:transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s;
  box-shadow:0 2px 0 var(--hotel-purple);
}
.cast-card::before{
  content:""; position:absolute; inset:4px; border:1px solid var(--hotel-gold);
  opacity:.35; pointer-events:none;
}
.cast-card:hover{
  transform:rotate(-1.4deg);
  box-shadow:10px 12px 0 var(--hotel-purple);
  z-index:2;
}
.cast-card:nth-child(even):hover{ transform:rotate(1.4deg); box-shadow:-10px 12px 0 var(--hotel-purple); }
.cast-frame{
  width:172px; height:210px; margin:0 auto 20px;
  border:6px solid var(--accent); padding:6px; background:var(--hotel-cream);
  position:relative;
}
.cast-frame::after{
  content:""; position:absolute; inset:-10px; border:1px solid var(--hotel-gold);
  pointer-events:none; opacity:.4;
}
.cast-frame img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.cast-frame .placeholder{
  width:100%; height:100%; display:flex; align-items:center;
  justify-content:center; font-family:var(--serif);
  font-size:64px; opacity:.45; font-style:italic;
}
.cast-id{
  font-family:var(--sans); font-weight:600; font-size:16px;
  letter-spacing:.26em; text-transform:uppercase; margin-bottom:8px;
  color:var(--hotel-purple);
}
.cast-role{
  font-family:var(--serif); font-style:italic; font-size:20px;
  margin-bottom:16px; color:var(--hotel-red);
}
.mini-rule{ width:50px; height:0; border-top:1.5px solid var(--hotel-gold); margin:0 auto 16px; }
.cast-bio{
  font-family:var(--serif); font-size:18px; line-height:1.5;
  text-align:center; text-wrap:pretty; margin:0 0 18px; color:var(--hotel-plum);
}
.loz-rule{ color:var(--accent); font-size:0; }
.loz-rule .line{ display:inline-block; width:34px; height:0; border-top:1.5px solid var(--accent); vertical-align:middle; }
.loz-rule .loz{ margin:0 6px; }

/* ====================================================== */
/* SECTION 2 — LA BÂTISSE                                  */
/* ====================================================== */
.batisse{ background:var(--hotel-blush); }
.batisse-cols{
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:stretch;
}
.photo-frame{
  border:2px solid var(--hotel-purple); padding:10px; background:var(--hotel-cream);
  box-shadow:4px 4px 0 var(--hotel-purple);
}
.photo-frame img{ width:100%; height:100%; min-height:460px; display:block; object-fit:cover; }

.fiche{
  border:2px solid var(--hotel-purple); background:var(--hotel-cream);
  padding:34px 36px; display:flex; flex-direction:column;
  box-shadow:4px 4px 0 var(--hotel-purple);
}
.fiche-tag{
  font-family:var(--sans); font-size:11px; letter-spacing:.44em;
  text-transform:uppercase; text-align:center; margin-bottom:6px;
  color:var(--hotel-purple);
}
.fiche-title{
  font-family:var(--serif); font-style:italic; font-weight:600; font-size:32px;
  text-align:center; margin:0 0 28px; color:var(--hotel-plum);
}
.spec-row{ display:flex; align-items:baseline; gap:6px; margin-bottom:16px; }
.spec-row .k{
  font-family:var(--sans); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; white-space:nowrap; color:var(--hotel-purple);
}
.spec-row .dots{ flex:1; border-bottom:1.5px dotted var(--hotel-gold); transform:translateY(-4px); }
.spec-row .v{ font-family:var(--serif); font-size:21px; white-space:nowrap; color:var(--hotel-plum); }
.fiche-divider{ border-top:1.5px solid var(--hotel-gold); margin:18px 0 26px; opacity:.5; }
.plan-cap{
  font-family:var(--sans); font-size:10px; letter-spacing:.36em;
  text-transform:uppercase; text-align:center; margin-bottom:14px;
  color:var(--hotel-purple); opacity:.6;
}
.plan svg{ display:block; margin:0 auto; width:200px; height:auto; }
.plan svg line, .plan svg path, .plan svg rect{ stroke:var(--hotel-plum); }
.batisse-quote{
  font-family:var(--serif); font-style:italic; font-size:clamp(22px,3vw,30px);
  text-align:center; margin:58px auto 0; max-width:720px; line-height:1.4;
  color:var(--hotel-purple);
}

/* ====================================================== */
/* SECTION 3 — LE JARDIN                                   */
/* ====================================================== */
.jardin{ background:var(--hotel-green); position:relative; }
.jardin::before{
  content:""; position:absolute; inset:0;
  background:var(--hotel-cream); opacity:.85; pointer-events:none;
}
.jardin .wrap{ position:relative; z-index:1; }
.jardin-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:34px; }
.herb{
  border:2px solid var(--hotel-purple); background:var(--hotel-cream);
  padding:34px 30px 38px; text-align:center;
  box-shadow:3px 3px 0 var(--hotel-purple);
}
.herb:nth-child(1){ background:#FEFAF5; }
.herb:nth-child(2){ background:#FDF6EE; }
.herb:nth-child(3){ background:#FCFAF5; }
.herb-ill{ height:78px; display:flex; align-items:flex-end; justify-content:center; margin-bottom:18px; color:var(--hotel-green); }
.herb-ill svg{ height:74px; width:auto; }
.herb-title{
  font-family:var(--sans); font-weight:600; font-size:13px; letter-spacing:.28em;
  text-transform:uppercase; margin:0 0 6px; color:var(--hotel-purple);
}
.herb-sub{ font-family:var(--mono); font-style:italic; font-size:14px; opacity:.5; margin-bottom:22px; color:var(--hotel-plum); }
.herb ul{ list-style:none; margin:0; padding:0; }
.herb li{
  font-family:var(--serif); font-size:21px; line-height:1.85;
  display:flex; align-items:center; justify-content:center; gap:10px;
  color:var(--hotel-plum);
}
.herb li::before{ content:""; width:6px; height:6px; background:var(--hotel-gold); transform:rotate(45deg); display:inline-block; }
.jardin-quote{
  font-family:var(--serif); font-style:italic; font-size:clamp(22px,3vw,30px);
  text-align:center; margin:58px auto 0; max-width:760px; line-height:1.4;
  color:var(--hotel-plum);
}

/* ====================================================== */
/* SECTION 4 — DES ENVIRONS                                */
/* ====================================================== */
.environs{ background:var(--hotel-blue); position:relative; }
.environs::before{
  content:""; position:absolute; inset:0;
  background:var(--hotel-cream); opacity:.82; pointer-events:none;
}
.environs .wrap{ position:relative; z-index:1; }
.map-card{
  max-width:560px; margin:0 auto; border:2px solid var(--hotel-purple);
  background:var(--hotel-cream); padding:48px 52px 54px; position:relative;
  box-shadow:4px 4px 0 var(--hotel-purple);
}
.map-card::before{
  content:""; position:absolute; inset:4px; border:1px solid var(--hotel-gold);
  opacity:.3; pointer-events:none;
}
.map-card::after{
  content:"PLAN DES ENVIRONS"; position:absolute; top:-11px; left:50%;
  transform:translateX(-50%); background:var(--hotel-cream); padding:0 14px;
  font-family:var(--sans); font-size:10px; letter-spacing:.36em;
  color:var(--hotel-purple);
}
.metro{ list-style:none; margin:0; padding:0; position:relative; }
.metro::before{
  content:""; position:absolute; left:13px; top:14px; bottom:14px;
  width:4px; background:var(--hotel-gold);
}
.stop{ display:flex; align-items:flex-start; gap:24px; padding:16px 0; position:relative; }
.dot{
  width:30px; height:30px; flex:none; border-radius:50%;
  background:#fff; border:4px solid var(--c,var(--hotel-purple)); z-index:1;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; color:var(--hotel-plum); margin-left:-1px;
}
.dot.star{ background:var(--hotel-gold); border-color:var(--hotel-purple); }
.stop-txt b{
  font-family:var(--sans); font-weight:600; font-size:16px; letter-spacing:.14em;
  text-transform:uppercase; display:block; line-height:1.3; color:var(--hotel-plum);
}
.stop-txt i{ font-family:var(--serif); font-style:italic; font-size:18px; opacity:.7; color:var(--hotel-purple); }
.stop.start .stop-txt i{ color:var(--hotel-red); font-weight:600; }

/* ====================================================== */
/* FOOTER — Hotel letterhead                              */
/* ====================================================== */
.fin{
  background:linear-gradient(180deg, var(--hotel-blush) 0%, var(--hotel-pink) 100%);
  color:var(--hotel-plum); text-align:center;
  padding:80px 24px 88px; position:relative;
}
.fin .inner-border{
  position:absolute; inset:28px; border:2px solid var(--hotel-purple); pointer-events:none;
}
.fin .inner-border::before{
  content:""; position:absolute; inset:4px; border:1px solid var(--hotel-gold);
  opacity:.4; pointer-events:none;
}
.fin-word{
  font-family:var(--serif); font-weight:600; font-size:clamp(48px,9vw,84px);
  letter-spacing:.14em; display:flex; align-items:center; justify-content:center;
  margin:0 0 18px; color:var(--hotel-plum);
}
.fin-word .loz{ width:14px; height:14px; }
.fin-credit{ font-family:var(--sans); font-size:11px; letter-spacing:.4em; text-transform:uppercase; color:var(--hotel-purple); }
.fin-reel{ font-family:var(--mono); font-style:italic; font-size:14px; margin-top:14px; opacity:.7; color:var(--hotel-purple); }

/* CTA */
.fin-cta{ margin-top:38px; }
.fin-cta a{
  font-family:var(--sans); font-size:13px; font-weight:500;
  letter-spacing:.3em; text-transform:uppercase; color:var(--hotel-cream);
  text-decoration:none; padding:14px 36px;
  background:var(--hotel-purple); border:2px solid var(--hotel-purple);
  display:inline-block; transition:all .25s;
}
.fin-cta a:hover{ background:var(--hotel-plum); border-color:var(--hotel-plum); }

/* ====================================================== */
/* scroll reveal                                           */
/* ====================================================== */
.reveal{ opacity:0; transform:translateY(22px) scale(.975); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.3,1); }
.reveal.in{ opacity:1; transform:none; }

/* ====================================================== */
/* main.css override — kill topbar on nous page            */
/* ====================================================== */
.nous-page .wrap{ max-width:1160px; margin:0 auto; padding:0 48px; }

/* ====================================================== */
/* responsive                                              */
/* ====================================================== */
@media (max-width:900px){
  .wrap{ padding:0 30px; }
  .cast-grid{ grid-template-columns:repeat(2,1fr); }
  .batisse-cols{ grid-template-columns:1fr; }
  .photo-frame img{ min-height:340px; }
  .jardin-cols{ grid-template-columns:1fr; max-width:420px; margin:0 auto; }
}
@media (max-width:560px){
  :root{ --frame:6px; }
  .wrap{ padding:0 20px; }
  .cartouche{ padding:70px 16px 64px; }
  .cartouche .inner-border{ inset:16px; }
  .cd-tl,.cd-bl{ left:12px; } .cd-tr,.cd-br{ right:12px; }
  .cd-tl,.cd-tr{ top:12px; } .cd-bl,.cd-br{ bottom:12px; }
  .cast-grid{ grid-template-columns:1fr; max-width:340px; margin:0 auto; }
  section{ padding:72px 0 76px; }
  .map-card{ padding:40px 24px 44px; }
  .film-frame{ inset:4px; }
  .film-frame .corner{ width:12px; height:12px; }
  .film-frame .corner.tl{ top:-6px; left:-6px; }
  .film-frame .corner.tr{ top:-6px; right:-6px; }
  .film-frame .corner.bl{ bottom:-6px; left:-6px; }
  .film-frame .corner.br{ bottom:-6px; right:-6px; }
}