/* ============================================================================
   Me & MyRoom — scene.css
   Styles front-office : overlay d'accueil, HUD, lightbox photo, mode édition
   ============================================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: #e8c97a;
  overflow: hidden;
}

canvas { display: block; }

/* ─── Écran de chargement ────────────────────────────────────────────────── */
#loading-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: #0d0b08;
  z-index: 50;
}
#loading-logo {
  width: 96px;
  height: auto;
  opacity: 0.6;
  margin-bottom: 8px;
}
#loading-bar-wrap {
  width: 180px;
  height: 2px;
  background: rgba(240, 210, 140, 0.15);
  border-radius: 2px;
  overflow: hidden;
}
#loading-bar {
  height: 100%;
  width: 0%;
  background: #f0d28c;
  border-radius: 2px;
  transition: width .25s ease;
}
#loading-label {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 11px;
  letter-spacing: 1px;
  color: rgba(240, 210, 140, 0.3);
}

/* ─── Overlay d'accueil ──────────────────────────────────────────────────── */
#overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 10, 4, 0.90);
  cursor: default;
  z-index: 20;
  transition: opacity 0.6s;
  padding: 24px;
}
#overlay.hidden { opacity: 0; pointer-events: none; }

#overlay-inner {
  display: grid;
  grid-template-columns: 1fr 1px minmax(260px, 360px);
  max-width: 860px;
  width: 100%;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}

#overlay-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 48px 32px 0;
  cursor: pointer;
  gap: 10px;
}

#overlay-sep {
  background: rgba(240, 210, 140, 0.2);
  width: 1px;
  align-self: stretch;
}

#overlay-right {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px 0 32px 40px;
  overflow-y: auto;
}

#overlay-expo-surtitle {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(240, 210, 140, 0.4);
}
#overlay-expo-title {
  font-family: 'Josefin Slab', serif;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 2px;
  color: #f0d28c;
  max-width: 480px;
  line-height: 1.3;
}
#overlay-expo-desc {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 13px;
  color: rgba(240, 210, 140, 0.55);
  max-width: 400px;
  line-height: 1.6;
}
#overlay-expo-dates {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: rgba(240, 210, 140, 0.35);
}
#overlay-sub {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 11px;
  letter-spacing: 2.5px;
  color: rgba(240, 210, 140, 0.4);
  text-transform: uppercase;
  margin-top: 8px;
  border: 1px solid rgba(240, 210, 140, 0.2);
  padding: 8px 20px;
}

/* ─── Pictos SVG dans les nav-hints ─────────────────────────────────────────── */
.hint-icon-svg {
  display: inline-flex;
  align-items: center;
  color: rgba(240, 210, 140, 0.5);
  flex: none;
  margin-right: 6px;
}

/* ─── Séparateur + bouton "Explorer mon site" ────────────────────────────────── */
#overlay-site-sep {
  width: 60%;
  height: 1px;
  background: rgba(240, 210, 140, 0.2);
  margin-top: 16px;
}
#overlay-site-btn {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(240, 210, 140, 0.45);
  border: 1px solid rgba(240, 210, 140, 0.2);
  padding: 7px 18px;
  text-decoration: none;
  transition: color .2s, border-color .2s;
  margin-top: 4px;
}
#overlay-site-btn:hover {
  color: rgba(240, 210, 140, 0.75);
  border-color: rgba(240, 210, 140, 0.5);
}

/* ─── Bouton MUTE ────────────────────────────────────────────────────────────── */
#mute-btn {
  background: none;
  border: 1px solid rgba(240, 210, 140, 0.2);
  border-radius: 4px;
  color: rgba(240, 210, 140, 0.45);
  cursor: pointer;
  padding: 5px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color .2s, border-color .2s;
  margin-top: 4px;
}
#mute-btn:hover { color: rgba(240,210,140,.75); border-color: rgba(240,210,140,.5); }
#mute-btn.muted { color: rgba(240,210,140,.2); border-color: rgba(240,210,140,.1); }
#mute-btn svg { width: 18px; height: 18px; display: block; }

/* ─── Colonne droite — navigation ────────────────────────────────────────────── */
.overlay-section-title {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(240, 210, 140, 0.3);
  margin-bottom: 12px;
}
.nav-hint {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 12px;
  color: rgba(240, 210, 140, 0.55);
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.nav-hint kbd {
  display: inline-block;
  border: 1px solid rgba(240, 210, 140, 0.3);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 10px;
  font-family: 'Josefin Sans', sans-serif;
  color: rgba(240, 210, 140, 0.6);
}
.nav-hint span { flex: 1; min-width: 0; }
.nav-hint .hint-target { color: rgba(240,210,140,.3); font-style: normal; }
.nav-hint.hint-soon { opacity: .35; }
.nav-hint.hint-soon .hint-icon { font-size: 13px; }
.nav-hint.hint-soon em { font-style: italic; }

/* ─── Playlist overlay ───────────────────────────────────────────────────────── */
.playlist-list { list-style: none; }
.playlist-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(240, 210, 140, 0.07);
}
.playlist-num {
  font-family: 'Josefin Slab', serif;
  font-size: 10px;
  color: rgba(240, 210, 140, 0.25);
  min-width: 22px;
}
.playlist-name {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 12px;
  color: rgba(240, 210, 140, 0.5);
  line-height: 1.4;
}

/* ─── Indicateur musique en cours ───────────────────────────────────────────── */
#now-playing {
  position: fixed;
  bottom: 48px;
  right: 20px;
  display: none;
  align-items: center;
  gap: 7px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 11px;
  letter-spacing: 1px;
  color: rgba(240, 210, 140, 0.45);
  z-index: 15;
  pointer-events: none;
}
#now-playing.visible { display: flex; }

/* ─── Joysticks mobile ──────────────────────────────────────────────────────── */
#joystick-zone,
#joystick-right-zone {
  position: fixed;
  bottom: 40px;
  width: 110px;
  height: 110px;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 30;
  pointer-events: none;
}
#joystick-zone.visible,
#joystick-right-zone.visible { display: flex; pointer-events: auto; }

#joystick-zone       { left: 24px; }
#joystick-right-zone { right: 24px; }

#joystick-base,
#joystick-right-base {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(240, 210, 140, 0.08);
  border: 1px solid rgba(240, 210, 140, 0.22);
  position: relative;
  touch-action: none;
}
#joystick-thumb,
#joystick-right-thumb {
  position: absolute;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(240, 210, 140, 0.25);
  border: 1px solid rgba(240, 210, 140, 0.5);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* ─── Avertissement portrait ────────────────────────────────────────────────── */
#portrait-warning {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 400;
  background: #0d0b08;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  color: rgba(240, 210, 140, 0.65);
  font-family: 'Josefin Sans', sans-serif;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-align: center;
  padding: 40px;
}

/* ─── Playlist écran de sortie ───────────────────────────────────────────────── */
#exit-playlist { margin-top: 4px; }
#exit-playlist-title {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(184, 221, 176, 0.3);
  margin-bottom: 10px;
}
.exit-playlist-list {
  list-style: none;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 12px;
  color: rgba(184, 221, 176, 0.45);
  line-height: 1.9;
}

/* ─── Admin : track épinglé ─────────────────────────────────────────────────── */
.badge-ambiance {
  display: inline-block;
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: rgba(200, 164, 110, 0.12);
  color: #c8a46e;
  border: 1px solid rgba(200, 164, 110, 0.3);
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 6px;
  vertical-align: middle;
}
tr.track-pinned td:first-child { color: #c8a46e; }

/* ═══════════════════════════════════════════════════════════════════════════════
   LIVRE D'OR
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── Overlay plein écran ───────────────────────────────────────────────────── */
#guestbook-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 35;  /* > joysticks (30) pour les couvrir */
  background: rgba(10, 7, 4, 0.88);
  align-items: center;
  justify-content: center;
}
#guestbook-overlay.visible { display: flex; }

#guestbook-close {
  position: absolute;
  top: 18px; right: 22px;
  background: none;
  border: none;
  color: rgba(240, 210, 140, 0.5);
  font-size: 22px;
  cursor: pointer;
  z-index: 31;
  transition: color .2s;
}
#guestbook-close:hover { color: rgba(240, 210, 140, 1); }

/* ─── Livre desktop ─────────────────────────────────────────────────────────── */
#book-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
#book {
  position: relative;
  display: flex;
  width: min(1140px, 96vw);
  height: min(720px, 88vh);
  box-shadow: 0 20px 60px rgba(0,0,0,.7);
  border-radius: 3px 6px 6px 3px;
}
#book-spine {
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  transform: translateX(-50%);
  background: rgba(160,144,112,.4);
  z-index: 2;
}
.book-page {
  flex: 1;
  background: #f5f0e2;
  background-image:
    linear-gradient(to bottom, rgba(200,184,154,.08) 1px, transparent 1px),
    linear-gradient(to right,  rgba(200,184,154,.08) 1px, transparent 1px);
  background-size: 100% 36px, 36px 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
#book-page-left  { border-radius: 3px 0 0 3px; border-right: none; }
#book-page-right { border-radius: 0 6px 6px 0; cursor: pointer; }
#book-page-right:hover #turn-next { opacity: 1; }

.page-content {
  flex: 1;
  overflow: hidden;
  padding: 28px 28px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.page-num {
  text-align: center;
  font-family: 'Josefin Slab', serif;
  font-size: 11px;
  color: #a09070;
  padding: 6px 0 10px;
}

/* ─── Flèches pagination ────────────────────────────────────────────────────── */
#turn-prev, #turn-next {
  font-size: 40px;
  color: rgba(240, 210, 140, 0.5);
  cursor: pointer;
  user-select: none;
  transition: color .2s, opacity .2s;
  line-height: 1;
  padding: 0 10px;
}
#turn-prev:hover, #turn-next:hover { color: rgba(240, 210, 140, 1); }
#turn-prev { position: absolute; left: -48px; }
#turn-next {
  position: absolute;
  right: 10px; bottom: 24px;
  opacity: 0.4;
  font-size: 28px;
  color: #a09070;
}

/* ─── Formulaire dans le livre ──────────────────────────────────────────────── */
#gb-form-wrap {
  padding-bottom: 16px;
  margin-bottom: 4px;
  flex-shrink: 0;
}
.gb-form-title {
  font-family: 'Josefin Slab', serif;
  font-size: 13px;
  letter-spacing: 1px;
  color: #7a6a50;
  margin: 0 0 10px;
  text-transform: uppercase;
}
#gb-honeypot, #gb-honeypot-mobile {
  position: absolute !important;
  width: 0 !important; height: 0 !important;
  overflow: hidden; opacity: 0; pointer-events: none;
}
#gb-form textarea, #gb-form input[type="text"],
#gb-form-mobile textarea, #gb-form-mobile input[type="text"] {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(160,144,112,.35);
  border-radius: 0;
  padding: 6px 0;
  font-family: 'Josefin Slab', serif;
  font-size: 13px;
  color: #3a2e20;
  resize: none;
  box-sizing: border-box;
  outline: none;
  transition: border-color .2s;
  margin-bottom: 12px;
}
#gb-form textarea:focus, #gb-form input:focus,
#gb-form-mobile textarea:focus, #gb-form-mobile input:focus {
  border-color: rgba(160,144,112,.7);
}
#gb-char-warn {
  font-size: 11px;
  color: #b07050;
  margin: -4px 0 6px;
  min-height: 14px;
}
#gb-submit, #gb-submit-mobile {
  background: #7a6a50;
  color: #f5f0e2;
  border: none;
  border-radius: 3px;
  padding: 7px 18px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 12px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: background .2s;
}
#gb-submit:hover, #gb-submit-mobile:hover { background: #5a4a38; }
#gb-submit:disabled, #gb-submit-mobile:disabled { opacity: .5; cursor: default; }
#gb-feedback, #gb-feedback-mobile {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 12px;
  color: #5a7a50;
  margin: 6px 0 0;
  min-height: 16px;
}
#gb-feedback.error, #gb-feedback-mobile.error { color: #9a3a2a; }
.gb-recaptcha-notice {
  font-size: 10px;
  color: #a09070;
  margin: 6px 0 0;
  line-height: 1.4;
}
.gb-recaptcha-notice a { color: #a09070; }

/* ─── Messages dans le livre ────────────────────────────────────────────────── */
.gb-entry {
  break-inside: avoid;
  flex-shrink: 0;
}
.gb-entry-message {
  font-size: 36px;
  line-height: 1.3;
  color: #2e2416;
  margin: 0 0 4px;
  word-break: break-word;
}
.gb-entry-meta {
  font-family: 'Josefin Slab', serif;
  font-size: 11px;
  color: #a09070;
  text-align: right;
}
.gb-entry-sep {
  display: none;
}

/* État "aucun message" */
#gb-empty {
  position: absolute;
  bottom: 20px; left: 50%;
  transform: translateX(-50%);
  font-family: 'Josefin Slab', serif;
  font-style: italic;
  font-size: 13px;
  color: #b0a080;
  white-space: nowrap;
  display: none;
}

/* ─── Version mobile ─────────────────────────────────────────────────────────── */
#gb-mobile { display: none; width: 100%; max-width: 520px; padding: 20px; box-sizing: border-box; overflow-y: auto; max-height: 90vh; }
#gb-mobile-form { background: #f5f0e2; border-radius: 6px; padding: 20px; margin-bottom: 20px; }
#gb-mobile-list .gb-entry { background: #f5f0e2; border-radius: 6px; padding: 16px; margin-bottom: 12px; }
#gb-mobile-list .gb-entry-message { font-size: 20px; }

/* ─── Responsive : bascule desktop ↔ mobile ─────────────────────────────────── */
@media (min-width: 601px) {
  #book-wrap  { display: flex; }
  #gb-mobile  { display: none !important; }
}
@media (max-width: 600px) {
  #book-wrap  { display: none !important; }
  #gb-mobile  { display: block !important; }
}

/* ─── Footer overlay : Crédits + Made by ────────────────────────────────────── */
#overlay-footer {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 21;
  white-space: nowrap;
}
#credits-btn {
  background: none;
  border: none;
  color: rgba(240, 210, 140, 0.35);
  font-family: 'Josefin Sans', sans-serif;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  padding: 4px 0;
  transition: color .2s;
}
#credits-btn:hover { color: rgba(240, 210, 140, 0.75); }
#madeby-link {
  color: rgba(240, 210, 140, 0.35);
  font-family: 'Josefin Sans', sans-serif;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 4px 0;
  transition: color .2s;
}
#madeby-link:hover { color: rgba(240, 210, 140, 0.75); }

/* ─── Lang toggle (visiteur) ─────────────────────────────────────────────────── */
.visitor-lang.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: rgba(240,210,140,.10);
  border-radius: 5px;
  padding: 2px 3px;
}
.visitor-lang .lang-btn {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 3px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: rgba(240,210,140,.4);
  text-decoration: none;
  transition: background .2s, color .2s;
}
.visitor-lang .lang-btn:hover { color: rgba(240,210,140,.8); }
.visitor-lang .lang-btn.active {
  background: rgba(240,210,140,.18);
  color: rgba(240,210,140,.85);
}

/* ─── Popup Crédits ─────────────────────────────────────────────────────────── */
#credits-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 50;
  align-items: center;
  justify-content: center;
  background: rgba(10, 6, 2, 0.75);
}
#credits-modal.visible { display: flex; }

#credits-modal-inner {
  position: relative;
  background: rgba(24, 16, 8, 0.97);
  border: 1px solid rgba(240, 210, 140, 0.18);
  border-radius: 4px;
  padding: 36px 40px 32px;
  max-width: 480px;
  width: 90%;
  color: rgba(240, 210, 140, 0.75);
  font-family: 'Josefin Sans', sans-serif;
}
#credits-modal-inner h2 {
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin: 0 0 20px;
  color: rgba(240, 210, 140, 0.9);
}
#credits-modal-inner h3 {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(240, 210, 140, 0.5);
  margin: 16px 0 8px;
}
#credits-modal-inner ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
#credits-modal-inner li {
  font-size: 12px;
  line-height: 1.9;
  color: rgba(240, 210, 140, 0.65);
}
#credits-modal-inner li em { font-style: normal; }
#credits-modal-inner .cc {
  font-size: 10px;
  color: rgba(240, 210, 140, 0.35);
}
#credits-modal-inner a {
  color: rgba(240, 210, 140, 0.7);
  text-decoration: none;
  border-bottom: 1px solid rgba(240, 210, 140, 0.2);
}
#credits-modal-inner a:hover { color: rgba(240, 210, 140, 1); }
#credits-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  color: rgba(240, 210, 140, 0.4);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 6px;
  transition: color .2s;
}
#credits-close:hover { color: rgba(240, 210, 140, 0.9); }

/* ─── Hints tactiles dans l'overlay ─────────────────────────────────────────── */
#overlay-touch-hints { display: none; }
@media (pointer: coarse) {
  #overlay-touch-hints { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
}

/* ─── Responsive mobile ─────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  #overlay-inner { grid-template-columns: 1fr; }
  #overlay-sep, #overlay-right { display: none; }
  #overlay-left { padding: 32px 16px; }
  #now-playing { display: none !important; }
}

/* ─── HUD : masquer les hints clavier sur touch ──────────────────────────────── */
@media (pointer: coarse) {
  #hud { display: none !important; }
}

/* ─── HUD bas de page ────────────────────────────────────────────────────── */
#hud {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
  justify-content: center;
  align-items: center;
  padding: 12px;
  gap: 24px;
  background: linear-gradient(transparent, rgba(10, 6, 2, 0.5));
  z-index: 10;
  pointer-events: none;
}

.hud-key {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(240, 210, 140, 0.5);
}
.hud-key span {
  display: inline-block;
  border: 1px solid rgba(240, 210, 140, 0.3);
  border-radius: 3px;
  padding: 1px 5px;
  margin: 0 2px;
  font-size: 10px;
}

/* ─── Icône de survol (œil / sortie) ─────────────────────────────────────── */
#hover-icon {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transition: opacity .18s;
  color: #fff;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.9));
}
#hover-icon.visible { opacity: 1; }
#hover-icon svg { width: 30px; height: 30px; }
#hover-icon span {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 9px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}

/* ─── Bandeau mode édition ───────────────────────────────────────────────── */
#edit-hud {
  display: none;
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 8px 18px;
  border-radius: 8px;
  font-family: monospace;
  font-size: 13px;
  z-index: 100;
  pointer-events: none;
}

/* ─── Lightbox photo ─────────────────────────────────────────────────────── */
#photo-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(8, 5, 2, 0.88);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  cursor: pointer;
}
#photo-modal.visible { display: flex; }

#modal-img {
  max-width: 70vw;
  max-height: 70vh;
  border: 2px solid rgba(240, 210, 140, 0.2);
}

#modal-title {
  font-family: 'Josefin Slab', serif;
  font-size: 18px;
  color: #f0d28c;
  letter-spacing: 2px;
}

#modal-desc {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 12px;
  color: rgba(240, 210, 140, 0.5);
  letter-spacing: 1px;
  max-width: 400px;
  text-align: center;
}

#modal-lien {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(240, 210, 140, 0.55);
  border: 1px solid rgba(240, 210, 140, 0.25);
  padding: 6px 16px;
  text-decoration: none;
  transition: color .2s, border-color .2s;
  cursor: pointer;
}
#modal-lien:hover {
  color: #f0d28c;
  border-color: rgba(240, 210, 140, 0.6);
}

#modal-close {
  position: absolute;
  top: 24px;
  right: 32px;
  color: rgba(240, 210, 140, 0.4);
  font-size: 24px;
  cursor: pointer;
  font-family: 'Josefin Sans', sans-serif;
}

/* ─── Écran de sortie ────────────────────────────────────────────────────── */
#exit-screen {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: #0b1e14;
  z-index: 80;
}
#exit-screen.visible { display: flex; }
#exit-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
  padding: 48px 32px;
  max-width: 520px;
}
#exit-merci {
  font-family: 'Josefin Slab', serif;
  font-size: 28px;
  font-weight: 400;
  color: #b8ddb0;
  letter-spacing: 2px;
}
#exit-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}
.exit-btn {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(184, 221, 176, 0.75);
  border: 1px solid rgba(184, 221, 176, 0.25);
  padding: 10px 24px;
  text-decoration: none;
  transition: color .2s, border-color .2s, background .2s;
}
.exit-btn:hover {
  color: #b8ddb0;
  border-color: rgba(184, 221, 176, 0.6);
  background: rgba(184, 221, 176, 0.06);
}
#exit-back {
  background: none;
  border: none;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  color: rgba(184, 221, 176, 0.3);
  cursor: pointer;
  text-transform: uppercase;
  transition: color .2s;
  margin-top: 8px;
}
#exit-back:hover { color: rgba(184, 221, 176, 0.65); }