body {
  background-color: #05080a;
  background-image:
    linear-gradient(rgba(4, 7, 9, .82), rgba(4, 7, 9, .91)),
    url('assets/cosmic-clockwork-v2.webp');
  background-size: auto, 1900px auto;
  background-attachment: fixed;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .28;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255, 232, 181, .025) 4px),
    radial-gradient(circle at 50% 40%, transparent 0 35%, #020304 100%);
  mix-blend-mode: screen;
}

.topbar {
  background: linear-gradient(#030405f5, #070909d9 72%, transparent);
}

.topbar.scrolled {
  background:
    linear-gradient(90deg, rgba(70, 30, 8, .2), transparent 35%, rgba(70, 30, 8, .2)),
    #060708f5;
  border-bottom: 1px solid #d18335;
  box-shadow: 0 6px 28px #000, inset 0 -1px 0 #5c2a10;
}

.brand-mark {
  overflow: hidden;
  border: 2px solid #d49142;
  background: #050708;
  box-shadow: 0 0 0 2px #291007, 0 0 18px #db7a28a3;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
  transform: scale(1.35);
}

.hero {
  min-height: 1080px;
  border-bottom: 2px solid #8f461d;
  box-shadow: 0 20px 80px #000;
}

.hero::after {
  content: '';
  position: absolute;
  z-index: 2;
  inset: auto 0 0;
  height: 145px;
  pointer-events: none;
  background:
    linear-gradient(transparent, #050709),
    url('assets/cosmic-clockwork-v2.webp') center bottom / cover;
  opacity: .92;
  mask-image: linear-gradient(transparent, #000 40%);
}

.hero-shade {
  background:
    linear-gradient(90deg, #020304f5 0%, #050607be 35%, transparent 68%),
    linear-gradient(0deg, #040608 0%, transparent 32%, #02030466 82%);
}

.hero-copy {
  width: min(660px, 91vw);
  margin-left: clamp(22px, 5.8vw, 104px);
  padding-top: 76px;
}

.hero-logo {
  position: relative;
  width: min(540px, 78vw);
  height: 300px;
  margin: .4rem 0 .8rem -1.6rem;
  overflow: hidden;
  filter: drop-shadow(0 14px 18px #000) drop-shadow(0 0 18px rgba(239, 143, 44, .36));
  -webkit-mask-image: radial-gradient(ellipse 65% 45% at 50% 61%, #000 35%, transparent 76%);
  mask-image: radial-gradient(ellipse 65% 45% at 50% 61%, #000 35%, transparent 76%);
}

.hero-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}

.hero .lead {
  color: #f2e6d1;
  text-shadow: 0 2px 3px #000, 0 0 14px #000, 0 0 24px #000;
}

.hero h1 {
  max-width: 610px;
  margin-top: -1.1rem;
  font-family: var(--ornate);
  font-size: clamp(2.05rem, 3.5vw, 3.8rem);
  line-height: 1.04;
  text-transform: uppercase;
  letter-spacing: -.02em;
}

.hero h1 em {
  display: block;
  font-family: var(--display);
  font-size: 1.05em;
  margin-top: .18em;
}

.eyebrow {
  color: #efb459;
  text-shadow: 0 1px 0 #2b1106, 0 0 9px #f08b2f55;
}

.section {
  position: relative;
}

.intro::before,
.eras::before,
.stay::before {
  content: '';
  position: absolute;
  inset: 22px;
  pointer-events: none;
  border: 1px solid #78401d70;
  box-shadow: inset 0 0 70px #0008;
}

.intro {
  margin: 0;
  max-width: none;
  padding-left: max(7vw, 22px);
  padding-right: max(7vw, 22px);
  background:
    linear-gradient(90deg, rgba(5, 8, 10, .95), rgba(5, 8, 10, .58), rgba(5, 8, 10, .95)),
    url('assets/cosmic-clockwork-v2.webp') center / cover;
}

.section-heading h2,
.poster-copy h2,
.final-cta h2 {
  text-transform: uppercase;
  color: #f7e8c6;
  -webkit-text-stroke: .5px #8d461d;
  text-shadow: 0 3px 0 #321306, 0 8px 24px #000, 0 0 14px #cf76273b;
}

.mission,
.stay-card {
  border: 2px solid #9c5528;
  outline: 1px solid #e0a55455;
  outline-offset: 6px;
  background:
    linear-gradient(135deg, rgba(31, 16, 8, .95), rgba(4, 10, 13, .96)),
    url('assets/cosmic-clockwork-v2.webp') center / cover;
}

.poster-break {
  position: relative;
  min-height: 780px;
  display: grid;
  grid-template-columns: minmax(360px, .86fr) minmax(420px, 1.14fr);
  align-items: center;
  gap: clamp(2rem, 7vw, 8rem);
  padding: clamp(55px, 8vw, 120px) clamp(22px, 8vw, 145px);
  overflow: hidden;
  background:
    radial-gradient(circle at 70% 45%, rgba(4, 116, 166, .23), transparent 30%),
    linear-gradient(90deg, #030506 0 28%, rgba(3, 5, 6, .64) 55%, #030506 100%),
    url('assets/cosmic-clockwork-v2.webp') center / cover;
  border-block: 2px solid #a15b29;
  box-shadow: inset 0 0 100px #000;
}

.poster-break::before,
.poster-break::after {
  content: '⚙';
  position: absolute;
  color: #c4722c40;
  font-size: 18rem;
  line-height: 1;
}

.poster-break::before { left: -5rem; bottom: -5rem; transform: rotate(18deg); }
.poster-break::after { right: -4rem; top: -5rem; transform: rotate(-12deg); }

.poster-visual {
  position: relative;
  z-index: 1;
  height: 620px;
  padding: 9px;
  background: linear-gradient(135deg, #f5c36d, #5a260e 22%, #cc7a32 50%, #3f1809 76%, #f0b859);
  box-shadow: 0 24px 70px #000, 0 0 35px #d87b2d4f;
  transform: rotate(-2.2deg);
}

.poster-visual::before {
  content: '';
  position: absolute;
  inset: 17px;
  z-index: 1;
  pointer-events: none;
  border: 1px solid #ffd48399;
  box-shadow: inset 0 0 45px #000;
}

.poster-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.poster-copy { position: relative; z-index: 1; max-width: 680px; }
.poster-copy h2 { margin: 0; font: 900 clamp(3.1rem, 6vw, 6.5rem)/.92 var(--ornate); }
.poster-copy h2 em { display: block; color: #efaa47; font: 400 .82em/1 var(--display); }
.poster-copy > p:not(.eyebrow) { max-width: 580px; color: #c7b9a4; font: 1.15rem/1.75 Georgia, serif; }
.ornament { display: block; color: #dc8734; font-size: 1.2rem; letter-spacing: .7em; margin-bottom: 1.5rem; }

.eras {
  background:
    linear-gradient(rgba(3, 6, 8, .84), rgba(3, 6, 8, .94)),
    url('assets/cosmic-clockwork-v2.webp') center / cover;
}

.frame {
  padding: 12px;
  border-radius: 4px;
  background: linear-gradient(135deg, #ffce73, #542008 17%, #df8632 39%, #2b0e04 61%, #b85c1f 82%, #ffd787);
  box-shadow: 0 22px 45px #000, 0 0 28px #e27f2c3d, inset 0 0 0 2px #2d0e03;
}

.frame::before {
  content: '◆';
  position: absolute;
  z-index: 2;
  left: 50%;
  top: -12px;
  transform: translateX(-50%);
  width: 30px;
  height: 22px;
  display: grid;
  place-items: center;
  color: #ffe0a0;
  background: #713412;
  border: 1px solid #e99b46;
}

.frame img { filter: saturate(1.08) contrast(1.04) brightness(.78); }
.era-meta strong { font-family: var(--ornate); font-size: 1.48rem; text-transform: uppercase; }

.stay {
  background:
    linear-gradient(rgba(4, 6, 7, .75), rgba(4, 6, 7, .95)),
    url('assets/cosmic-clockwork-v2.webp') center / cover;
}

.final-cta {
  background:
    radial-gradient(circle at 50% 45%, rgba(32, 156, 210, .24), transparent 31%),
    radial-gradient(circle at 50% 45%, rgba(226, 137, 44, .12), transparent 55%);
}

.book {
  position: relative;
  border: 2px solid #eca64e;
  outline: 1px solid #5e260c;
  outline-offset: 3px;
  background:
    linear-gradient(180deg, rgba(255, 220, 152, .18), transparent 36%),
    linear-gradient(135deg, #682a0e, #bc6728 52%, #69280d);
  box-shadow: 0 8px 26px #000, inset 0 0 0 2px #271006, 0 0 16px #e07b2736;
}

@media (max-width: 900px) {
  .poster-break { grid-template-columns: 1fr; }
  .poster-visual { height: min(740px, 110vw); max-width: 620px; width: 100%; margin: auto; }
  .poster-copy { text-align: center; margin: auto; }
  .poster-copy > p:not(.eyebrow) { margin-inline: auto; }
}

@media (max-width: 700px) {
  body { background-attachment: scroll; }
  .hero { min-height: 930px; }
  .hero-copy { padding-bottom: 92px; }
  .hero-logo { width: 104vw; height: 270px; margin-left: -12vw; margin-bottom: 0; }
  .hero-logo img { object-position: 50% 55%; }
  .hero h1 { margin-top: -.5rem; font-size: clamp(1.9rem, 8.7vw, 2.7rem); text-align: center; }
  .hero .eyebrow, .hero .lead { text-align: center; }
  .hero .lead { margin-inline: auto; }
  .poster-break { padding: 72px 22px; }
  .poster-visual { height: 118vw; max-height: 590px; transform: rotate(-1deg); }
  .poster-copy h2 { font-size: clamp(2.5rem, 12vw, 4rem); }
  .intro::before, .eras::before, .stay::before { inset: 10px; }
}

/* Direction artistique validée — affiche Docteur Tempus */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.topbar {
  height: 92px;
  border-bottom: 1px solid rgba(231, 158, 69, .48);
  background:
    linear-gradient(90deg, rgba(72, 27, 7, .42), transparent 30%, transparent 70%, rgba(72, 27, 7, .42)),
    linear-gradient(#030405f8, #060708e9);
  box-shadow: 0 8px 28px #000b, inset 0 -1px 0 #351306;
}

.brand-mark {
  width: 52px;
  height: 52px;
  border-radius: 4px;
  transform: rotate(-2deg);
}

.brand strong,
.topbar nav a {
  font-family: var(--ornate);
  color: #fff0c8;
  text-shadow: 0 2px 0 #401707, 0 0 12px #e8872f42;
}

.brand strong { font-size: 1.28rem; }
.brand small { color: #d99e50; }
.topbar nav a { font-size: .68rem; }

.hero {
  min-height: max(760px, 100svh);
  background: #020304;
}

.hero-image {
  object-position: center center;
  filter: saturate(1.04) contrast(1.03);
}

.hero-shade {
  z-index: 1;
  background:
    linear-gradient(0deg, #030506 0, transparent 18%, transparent 78%, rgba(0, 0, 0, .5) 100%),
    radial-gradient(circle at 69% 47%, transparent 0 28%, rgba(0, 0, 0, .05) 48%, rgba(0, 0, 0, .25) 100%);
}

.hero-ticket {
  position: absolute;
  left: clamp(20px, 4vw, 70px);
  right: auto;
  bottom: clamp(28px, 5vh, 58px);
  width: min(620px, calc(100vw - 120px));
  margin: 0;
  padding: 1.15rem 1.4rem 1.2rem;
  border: 1px solid #b8682c;
  outline: 1px solid rgba(244, 184, 91, .38);
  outline-offset: 4px;
  background: linear-gradient(135deg, rgba(8, 9, 9, .94), rgba(28, 13, 6, .91));
  box-shadow: 0 16px 46px #000e, inset 0 0 28px rgba(204, 111, 38, .1);
  backdrop-filter: blur(8px);
}

.hero-ticket::before,
.hero-ticket::after {
  content: '◆';
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  color: #f2b457;
  font-size: .75rem;
}

.hero-ticket::before { left: -9px; }
.hero-ticket::after { right: -9px; }
.hero-ticket .eyebrow { margin-bottom: .35rem; }
.hero-ticket .lead { margin: 0 0 .85rem; max-width: 570px; font-size: 1rem; line-height: 1.45; }
.hero-ticket .quick-facts { display: none; }
.hero-ticket .book { min-height: 45px; }

.section-heading h2,
.poster-copy h2,
.final-cta h2,
.era-dialog h2 {
  color: #fff0cc;
  -webkit-text-stroke: .65px #8a431a;
  text-shadow: 0 2px 0 #7a3514, 0 5px 0 #1b0903, 0 9px 24px #000, 0 0 16px #d0772633;
}

.section-heading h2 em,
.poster-copy h2 em,
.final-cta h2 em,
.era-dialog h2 em {
  color: #efb052;
  -webkit-text-fill-color: #efb052;
  -webkit-text-stroke: .45px #5b270d;
}

@media (max-width: 1050px) {
  .topbar { height: 76px; }
  .brand-mark { width: 46px; height: 46px; }
  .hero { min-height: max(680px, 78vw); }
  .hero-ticket { width: min(560px, calc(100vw - 52px)); left: 26px; bottom: 28px; }
}

@media (max-width: 700px) {
  .topbar { height: 68px; }
  .brand { gap: .55rem; }
  .brand-mark { width: 41px; height: 41px; }
  .brand strong { font-size: .84rem; }
  .hero {
    min-height: 0;
    padding-top: 68px;
    display: block;
    overflow: visible;
    background: #030506;
  }
  .hero-image {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1672 / 941;
    object-fit: contain;
  }
  .hero-shade { display: none; }
  .hero-ticket {
    position: relative;
    left: auto;
    bottom: auto;
    width: calc(100% - 28px);
    margin: -2px auto 34px;
    padding: 1rem;
    text-align: center;
    border-top-width: 2px;
    backdrop-filter: none;
  }
  .hero-ticket .eyebrow { font-size: .58rem; }
  .hero-ticket .lead { font-size: .96rem; }
  .hero-ticket .hero-actions { display: flex; justify-content: center; }
  .hero-ticket .ghost { display: inline-flex; }
  .scroll-cue { display: none; }
}

/* Le cartouche reste hors de l’affiche afin de préserver son slogan. */
.hero {
  display: block;
  min-height: 0;
  padding-top: 92px;
  overflow: visible;
}

.hero::after { display: none; }

.hero-image {
  position: relative;
  inset: auto;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1672 / 941;
  object-fit: contain;
}

.hero-shade { display: none; }

.hero-ticket {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  width: min(1120px, calc(100% - 48px));
  margin: 18px auto 44px;
  padding: 1.15rem clamp(1.25rem, 3vw, 2.4rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}

.hero-ticket .eyebrow { grid-column: 1 / -1; }
.hero-ticket .lead { margin: 0; max-width: 760px; }
.hero-ticket .hero-actions { justify-content: flex-end; }
.scroll-cue { display: none; }

@media (max-width: 1050px) {
  .hero { padding-top: 76px; }
  .hero-ticket { grid-template-columns: 1fr; row-gap: 1rem; }
  .hero-ticket .hero-actions { justify-content: flex-start; }
}

@media (max-width: 700px) {
  .hero { padding-top: 68px; }
  .hero-ticket {
    width: calc(100% - 28px);
    margin: 12px auto 34px;
    display: block;
  }
  .hero-ticket .lead { margin-bottom: 1rem; }
  .hero-ticket .hero-actions { justify-content: center; }
}

.portal-story {
  position: relative;
  display: grid;
  gap: 1.35rem;
}

.portal-photo {
  position: relative;
  margin: 0;
  padding: 9px;
  overflow: hidden;
  background: linear-gradient(135deg, #f0bd66, #57230c 24%, #c96f2a 52%, #351207 76%, #e6a44c);
  box-shadow: 0 24px 58px #000c, 0 0 28px rgba(55, 178, 231, .18);
  transform: rotate(1deg);
}

.portal-photo::after {
  content: '';
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(255, 213, 135, .72);
  box-shadow: inset 0 0 38px #0009;
  pointer-events: none;
}

.portal-photo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 720px;
  object-fit: contain;
  object-position: center;
  filter: saturate(1.02) contrast(1.015) brightness(.96);
}

.portal-photo figcaption {
  position: absolute;
  z-index: 2;
  left: 28px;
  bottom: 25px;
  padding: .58rem .85rem;
  border: 1px solid #d78c3b;
  background: rgba(5, 8, 10, .9);
  color: #f4c36c;
  font: 700 .62rem/1 var(--ornate);
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: 0 8px 24px #000;
}

.portal-story .mission {
  margin: -2.2rem 1.2rem 0;
  z-index: 2;
}

.photo-count { position:absolute; z-index:2; left:22px; bottom:24px; padding:.35rem .65rem; color:#ffe5b3; background:#080b0de8; border:1px solid #b67432; font-size:.65rem; letter-spacing:.08em; }
.photo-color-filters { position:absolute; pointer-events:none; }
.era-dialog img.salon-color-harmony { filter:url('#salon-color-harmony'); }
.era-dialog img.nineties-color-harmony { filter:url('#nineties-color-harmony'); }
body.dialog-open { overflow:hidden; }
.era-dialog { width:min(1200px,94vw); max-height:90svh; overflow-y:auto; overscroll-behavior:contain; }
.era-dialog[open] { grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); }
.era-dialog .era-gallery { padding:0; min-width:0; align-self:start; background:#06090b; }
.gallery-stage { margin:0; background:#040608; }
.era-dialog .gallery-stage img { display:block; width:100%; height:clamp(280px,50vh,580px); object-fit:contain; }
.gallery-stage figcaption { padding:.7rem 1.2rem; color:#e4c38b; font-size:.75rem; text-align:center; border-bottom:1px solid var(--line); }
.gallery-nav { display:flex; align-items:center; justify-content:center; gap:1.25rem; padding:.75rem 1rem; color:#e8cd9e; font-size:.72rem; }
.gallery-nav button { width:44px; height:44px; border:1px solid #bc7c39; color:#f9da9c; background:#1c130c; font-size:1.4rem; cursor:pointer; }
.gallery-thumbs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding:0 14px 14px; }
.gallery-thumbs button { min-width:0; padding:3px; border:2px solid transparent; background:#17110d; cursor:pointer; }
.era-dialog .gallery-thumbs img { display:block; width:100%; height:72px; object-fit:cover; }
.gallery-thumbs button[aria-pressed="true"] { border-color:#f4bb60; box-shadow:0 0 12px #d7843044; }
.gallery-nav button:hover,.gallery-thumbs button:hover { filter:brightness(1.2); }
.gallery-nav button:focus-visible,.gallery-thumbs button:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }
.gallery-nav[hidden],.gallery-thumbs[hidden] { display:none; }
.era-dialog .era-details { min-width:0; padding:clamp(28px,3vw,48px); }
.era-dialog .era-details h2 { font-size:clamp(1.9rem,3.5vw,3.2rem); line-height:1.12; overflow-wrap:break-word; }
.era-dialog .era-details p:not(.eyebrow) { font-size:.93rem; line-height:1.8; }
.dialog-close { position:sticky; float:right; grid-column:1/-1; justify-self:end; top:8px; margin:8px 8px -52px 0; }
@media(max-width:800px) {
  .era-dialog[open] { display:block; }
  .era-dialog .gallery-stage img { height:42svh; min-height:230px; }
  .era-dialog .era-details { padding:26px; }
  .era-dialog .gallery-thumbs img { height:62px; }
}

@media (max-width: 700px) {
  .portal-photo img { height: auto; max-height: none; object-position: center; }
  .portal-story .mission { margin: -1.4rem .65rem 0; padding: 1.5rem 1.25rem 1.5rem 4.5rem; }
  .portal-photo figcaption { left: 20px; bottom: 20px; }
}

/* Five destinations share the same gallery treatment. */
.frames { max-width:1600px; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(14px,1.6vw,26px); }
.era-card { min-width:0; }
.era-meta strong { font-size:clamp(1.05rem,1.5vw,1.6rem); }
.era-meta small { line-height:1.6; }
#histoire,#univers,#experiences,#sejour,#cuisine { scroll-margin-top:110px; }
.topbar { padding-inline:clamp(18px,2.5vw,44px); gap:1.2rem; }
.topbar nav { gap:1.1rem; align-items:center; }
.topbar nav .portal-nav { max-width:175px; text-align:center; line-height:1.65; }
.streaming-services { grid-column:1/-1; border-top:1px solid #bd8b4f55; padding-top:1.6rem; margin-top:-1.5rem; }
.stay-card .arcade-amenity { grid-column:1/-1; }
.streaming-services p { margin:0 0 1.1rem; color:#e8c992; font:700 .72rem/1.6 var(--ornate); letter-spacing:.08em; text-transform:uppercase; }
.streaming-logos { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.streaming-logos span { display:flex; min-width:0; height:82px; align-items:center; justify-content:center; padding:18px 22px; background:#f9f5ed; border:1px solid #c69757; border-radius:3px; }
.streaming-logos img { display:block; width:100%; max-width:135px; max-height:49px; object-fit:contain; }
@media(max-width:1350px) {
  .topbar { height:120px; flex-wrap:wrap; align-content:center; row-gap:8px; }
  .topbar nav { display:flex; order:2; flex:0 0 100%; max-width:100%; justify-content:center; gap:1.4rem; overflow-x:auto; padding:5px 0; }
  .topbar nav a { flex-shrink:0; white-space:nowrap; }
  .topbar nav .portal-nav { max-width:none; }
  .hero { padding-top:120px; }
  #histoire,#univers,#experiences,#sejour,#cuisine { scroll-margin-top:136px; }
}
@media(max-width:1100px) {
  .frames { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .era-card:nth-child(even) { margin-top:0; }
}
@media(max-width:900px) {
  .frames { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .streaming-services { margin-top:0; }
}
@media(max-width:700px) {
  .topbar { height:130px; padding-inline:16px; }
  .topbar nav { display:grid; grid-template-columns:max-content minmax(0,1fr); justify-content:stretch; gap:10px 18px; overflow:visible; }
  .topbar nav a { font-size:.56rem; line-height:1.6; }
  .topbar nav .portal-nav { text-align:left; white-space:normal; }
  .hero { padding-top:130px; }
  #histoire,#univers,#experiences,#sejour,#cuisine { scroll-margin-top:146px; }
  .mobile-book { position:fixed; left:12px; right:12px; bottom:10px; z-index:50; }
  .streaming-logos { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .streaming-logos span { height:74px; padding:16px; }
}
@media(max-width:600px) {
  .frames { grid-template-columns:minmax(0,1fr); }
}