/* Bonne Aventure Paris — page d'attente.
   Desktop d'abord, puis une seule section mobile (≤ 700 px) en fin de fichier. */

@font-face {
  font-family: 'Amarieta';
  src: url('../assets/amarieta.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
  /* Lettres uniquement : la ponctuation et les chiffres d'Amarieta sont vides.
     Tout le reste passe automatiquement à la police suivante de la liste (Newsreader). */
  unicode-range: U+0041-005A, U+0061-007A, U+00C0-00D6, U+00D8-00F6, U+00F8-017F;
}

/* Newsreader droite (300), hébergée ici plutôt que chez Google Fonts : mêmes fichiers,
   mais l'adresse IP des visiteurs n'est transmise à aucun service tiers. Police libre (SIL OFL). */
@font-face {
  font-family: 'Newsreader'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('../assets/fonts/newsreader-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('../assets/fonts/newsreader-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Vraie italique de Newsreader pour le formulaire (messages, champs, « à bientôt »).
   Nom de famille à part pour ne pas toucher « maison du hasard et du temps »,
   dont le rendu italique actuel est validé. Police libre (SIL OFL), hébergée ici. */
@font-face {
  font-family: 'Newsreader Italic'; font-style: italic; font-weight: 300; font-display: swap;
  src: url('../assets/fonts/newsreader-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader Italic'; font-style: italic; font-weight: 300; font-display: swap;
  src: url('../assets/fonts/newsreader-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Le document ne défile jamais : la timeline est pilotée par un défilement virtuel (js/scroll.js). */
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: #100906; overscroll-behavior: none;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;   /* pas d'agrandissement automatique du texte (Android) */
}

/* Présent pour Google et les lecteurs d'écran, invisible à l'écran. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

#stage { position: fixed; left: 0; top: 0; background: #000; overflow: hidden; }
canvas { display: block; }
#c { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: none; max-height: none; }

/* ----- Chargement -----
   Image d'attente (porte + serrure au cadrage de la vue A, placées par js/main.js),
   puis la 3D apparaît par-dessus en fondu : la lumière s'allume. */
#poster { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; pointer-events: none; }
#poster.shown { opacity: 1; }
#poster img { position: absolute; display: block; max-width: none; filter: brightness(.42); }   /* pénombre avant l'éclairage */
#c { opacity: 0; transition: opacity 1.4s ease-in-out; }
#stage.lit #c { opacity: 1; }
#titleCanvas, #parisCanvas { opacity: 0; transition: opacity .8s ease; }
#titleCanvas.painted, #parisCanvas.painted { opacity: 1; }

/* ----- Titre et « Paris » (canvas éclairés lettre par lettre) ----- */
#titleMark, #parisMark { position: absolute; z-index: 18; transform: translate(-50%, -50%); pointer-events: none; }
#titleMark { left: 50%; top: 17.5%; width: 23.7%; aspect-ratio: 1263 / 715; will-change: opacity; }
#parisMark { left: 59.7%; top: 30.5%; width: 3.7%; aspect-ratio: 254 / 92; }
#titleCanvas, #parisCanvas { display: block; width: 100%; height: 100%; }

/* ----- Lignes d'information ----- */
#descriptor, #openingSoon, #paris6 {
  position: absolute; z-index: 19; transform: translate(-50%, -50%);
  white-space: nowrap; pointer-events: none; text-align: center;
}
#descriptor  { left: 49.9%; top: 41.2%; font: italic 300 24px/1.05 'Newsreader', Georgia, 'Times New Roman', serif; color: #aa7942; will-change: opacity; }
#openingSoon { left: 49.8%; top: 51.8%; font: 300 26.1px/1.05 'Newsreader', Georgia, 'Times New Roman', serif; color: #be874e; }
#paris6      { left: 50%;   top: 56.5%; font: 300 20.6px/1.05 'Newsreader', Georgia, 'Times New Roman', serif; color: #c78d52; }
.domRibbonLine span { -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; }

/* ----- Bouton « prévenez-moi » (position et opacité animées par js/main.js) ----- */
#notifyBtn {
  position: absolute; left: 50%; bottom: 35.5%; z-index: 20;
  transform: translate(-50%, 140vh) scale(1); transform-origin: center;
  opacity: 0; pointer-events: none;
  border: 0; border-radius: 0; background: rgba(255, 194, 115, .55); color: #32151f;
  padding: .62em 1.55em .7em;
  font-family: 'Amarieta', 'Newsreader', Georgia, 'Times New Roman', serif; font-size: clamp(18px, 2.05vw, 30px); font-weight: 400;
  line-height: 1; letter-spacing: .015em; white-space: nowrap; cursor: pointer;
  will-change: transform, opacity; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none;
}
#notifyBtn:focus-visible { outline: 1px solid rgba(50, 21, 31, .75); outline-offset: 4px; }

/* ----- Formulaire ----- */
#newsletterOverlay { position: absolute; inset: 0; z-index: 30; display: none; pointer-events: none; will-change: opacity; }
#newsletterOverlay.open { display: block; }
#newsletterCard {
  position: absolute; left: 50%; top: 55.5%; width: min(430px, 82vw); box-sizing: border-box;
  padding: 30px 34px 26px; background: rgba(16, 7, 10, .80); color: #ffecd5;
  transform: translate(-50%, -50%) scale(1); transform-origin: center; pointer-events: auto;
  font-family: 'Amarieta', 'Newsreader', Georgia, 'Times New Roman', serif;
}
#newsletterForm { display: flex; flex-direction: column; gap: 17px; }
.formError {
  display: none; align-self: center; max-width: 92%; box-sizing: border-box;
  background: rgba(183, 170, 154, .96); color: #32151f; padding: 6px 10px 7px;
  font: italic 300 13px/1.25 'Newsreader Italic', Georgia, 'Times New Roman', serif; text-align: center; letter-spacing: .005em;
}
.formError.show { display: block; }
.hp { display: none; }
#sendBtn:disabled { opacity: .5; cursor: wait; }
.newsField {
  width: 100%; box-sizing: border-box; border: 0; border-bottom: 1px solid rgba(255, 236, 213, .5); border-radius: 0;
  background: transparent; color: #ffecd5; text-align: center;
  font: 400 18px/1.3 'Amarieta', 'Newsreader', Georgia, 'Times New Roman', serif; padding: 8px 5px 9px; outline: none;
}
.newsField::placeholder { color: #8d7f76; opacity: 1; font-family: 'Newsreader Italic', Georgia, serif; font-style: italic; font-weight: 300; text-align: center; }
.newsField:focus { border-bottom-color: currentColor; }
#consentRow {
  display: flex; align-items: flex-start; justify-content: center; gap: 9px; max-width: 350px; margin: 2px auto 0;
  color: #8d7f76; font: 300 14px/1.35 'Newsreader', Georgia, 'Times New Roman', serif; text-align: left;
}
#consentRow input {
  margin-top: 2px; flex: 0 0 auto; appearance: none; -webkit-appearance: none;
  width: 14px; height: 14px; border: 1px solid rgba(255, 236, 213, .9); background: #ffecd5;
  display: grid; place-content: center; cursor: pointer;
}
#consentRow input::before {
  content: ''; width: 7px; height: 4px;
  border-left: 1.5px solid #10070a; border-bottom: 1.5px solid #10070a;
  transform: rotate(-45deg) scale(0); transform-origin: center; transition: transform .08s ease;
}
#consentRow input:checked::before { transform: rotate(-45deg) scale(1); }
#sendBtn {
  align-self: center; border: 1px solid currentColor; background: transparent; color: #ffecd5;
  font: 400 16px/1 'Amarieta', 'Newsreader', Georgia, 'Times New Roman', serif; padding: 9px 18px 10px; cursor: pointer;
}
#newsletterClose {
  position: absolute; right: 9px; top: 7px; border: 0; background: transparent; color: #8d7f76;
  font: 20px/1 Georgia, serif; cursor: pointer; padding: 5px 8px;
}
#thanks { display: none; color: #ffecd5; text-align: center; font: italic 300 24px/1.3 'Newsreader Italic', Georgia, 'Times New Roman', serif; padding: 34px 10px; }

.privacyLink {
  align-self: center; margin-top: -8px; color: #8d7f76;
  font: italic 300 12px/1.2 'Newsreader Italic', Georgia, serif;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.privacyLink:hover, .privacyLink:focus-visible { color: #ffecd5; }

/* ----- Mentions légales et confidentialité (panneau par-dessus la scène) ----- */
#legalOverlay { position: absolute; inset: 0; z-index: 45; display: none; background: rgba(16, 7, 10, .55); }
#legalOverlay.open { display: block; }
#legalCard {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(560px, 88vw); max-height: 78%; box-sizing: border-box; display: flex;
  background: rgba(16, 7, 10, .94); color: #ffecd5;
}
#legalScroll {
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 34px 38px 30px;
  font: 300 14px/1.55 'Newsreader', Georgia, 'Times New Roman', serif; color: #d7c1b3;
}
#legalScroll h2 {
  margin: 0 0 14px; font: 400 26px/1.1 'Amarieta', 'Newsreader', Georgia, serif; color: #ffecd5; letter-spacing: .015em;
}
#legalScroll section + section { margin-top: 38px; padding-top: 30px; border-top: 1px solid rgba(255, 236, 213, .14); }
#legalScroll h3 { margin: 20px 0 4px; font: italic 300 15px/1.3 'Newsreader Italic', Georgia, serif; color: #be874e; }
#legalScroll p { margin: 0; }
#legalScroll:focus { outline: none; }
#legalScroll a { color: #ffecd5; text-underline-offset: 3px; text-decoration-thickness: 1px; }
#legalClose {
  position: absolute; right: 9px; top: 7px; z-index: 1; border: 0; background: transparent; color: #8d7f76;
  font: 20px/1 Georgia, serif; cursor: pointer; padding: 5px 8px;
}

/* ----- Bulle « contact » : l'adresse, à copier ou pour écrire ----- */
#contactPop {
  position: absolute; left: 22%; bottom: 38px; z-index: 46;
  display: flex; flex-direction: column; gap: 9px; padding: 13px 16px 12px;
  background: rgba(16, 7, 10, .94); border: 1px solid rgba(255, 236, 213, .14);
  color: #ffecd5; font: 300 15px/1.2 'Newsreader', Georgia, 'Times New Roman', serif;
}
#contactPop[hidden] { display: none; }
#contactAddr { user-select: all; -webkit-user-select: all; letter-spacing: .01em; }
.contactActions { display: flex; gap: 18px; }
#contactCopy, #contactWrite {
  appearance: none; -webkit-appearance: none; border: 0; padding: 2px 0; background: transparent; cursor: pointer;
  color: #be874e; font: italic 300 14px/1.2 'Newsreader Italic', Georgia, serif;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
#contactCopy:hover, #contactWrite:hover, #contactCopy:focus-visible, #contactWrite:focus-visible { color: #ffecd5; }
.popLegal {
  margin-top: 3px; padding-top: 9px; border-top: 1px solid rgba(255, 236, 213, .12);
  color: #8d7f76; font: 300 11.5px/1.2 'Newsreader', Georgia, serif; letter-spacing: .04em;
}
.popLegal a { color: inherit; text-decoration: none; }
.popLegal a:hover, .popLegal a:focus-visible { color: #ffecd5; text-decoration: underline; text-underline-offset: 3px; }

/* ----- Bandeau bas : contact, flèche, langue ----- */
#contactBar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 35;
  height: 32px; padding: 0 22%; box-sizing: border-box;
  display: flex; align-items: flex-end; justify-content: flex-start;
  background: linear-gradient(to bottom, rgba(16, 7, 10, 0), rgba(16, 7, 10, .78) 58%, rgba(16, 7, 10, .92));
  pointer-events: none;
}
#contactLink {
  pointer-events: auto; margin: 0 0 6px 0; color: #ffecd5;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif; font-size: 12px; font-weight: 300; line-height: 1; letter-spacing: .035em;
  opacity: .82; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
#contactLink:hover, #contactLink:focus-visible { opacity: 1; }

#langSwitch {
  position: absolute; right: 22%; bottom: 6px; z-index: 40;
  display: flex; align-items: center; gap: 7px;
  color: #ffecd5; font-family: 'Amarieta', 'Newsreader', Georgia, 'Times New Roman', serif; font-size: 11px; line-height: 1; letter-spacing: .08em;
  opacity: .88; user-select: none; -webkit-user-select: none;
}
#langSwitch button {
  appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: inherit; font: inherit; line-height: 1;
  padding: 4px 1px 3px; cursor: pointer; opacity: .62; text-transform: uppercase;
  text-decoration: none; text-underline-offset: 3px; text-decoration-thickness: 1px;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
#langSwitch button.active { opacity: 1; text-decoration: underline; }
#langSwitch .sep { opacity: .42; font-size: 9px; }

#scrollCue {
  position: absolute; left: 50%; bottom: 4px; z-index: 41; transform: translateX(-50%);
  color: #aa7942; font-family: Georgia, 'Times New Roman', serif; font-size: 24px; line-height: 1;
  opacity: .92; pointer-events: none; transition: opacity .22s ease;
}
#scrollCue span { display: block; transform: translateY(0); }
#scrollCue.wiggle span { animation: scrollCueWiggle 1.05s cubic-bezier(.4, 0, .2, 1); }
#scrollCue.gone { opacity: 0; }
@keyframes scrollCueWiggle {
  0%, 100% { transform: translateY(0); }
  20% { transform: translateY(5px); }
  42% { transform: translateY(0); }
  66% { transform: translateY(8px); }
  84% { transform: translateY(1px); }
}

/* ===== Mobile ===== */
@media (max-width: 700px) {
  #titleMark { left: 50.8%; top: 16.8%; width: 62.7%; }
  #parisMark { left: 84.3%; top: 29%; width: 7.8%; }
  #descriptor  { top: 42.8%; font-size: 20.3px; }
  #openingSoon { top: 82.9%; }
  #paris6      { top: 87.6%; font-size: 16.5px; }

  #notifyBtn {
    top: 50%; bottom: auto;
    font-size: clamp(18.7px, 5.72vw, 25.3px); font-weight: 700; padding: .682em 1.485em .748em;
  }

  #newsletterCard { width: min(360px, 86vw); padding: 27px 25px 23px; }
  #legalCard { max-height: 82%; }
  #legalScroll { padding: 30px 24px 26px; font-size: 13.5px; }
  #legalScroll h2 { font-size: 23px; }
  .newsField { font-size: 17px; }
  #consentRow { font-size: 13px; }

  #contactBar { height: 38px; padding-left: 18px; padding-right: 18px; }
  #contactLink { font-size: 13px; margin: 0 0 7px 0; }
  #contactPop { left: 18px; bottom: 44px; font-size: 14.5px; }
  #langSwitch { right: 18px; bottom: 7px; font-size: 10px; }
  #scrollCue { bottom: 3px; font-size: 23px; }
}