:root {
  --page-padding-desktop: 40px;
  --page-padding-mobile: 20px;

  /* Couleurs mode clair (par défaut) */
  --bg-color: #F8F5E6;
  --text-color: #000000;
  --muted-color: rgba(0, 0, 0, 0.7);
  --link-border: rgba(0, 0, 0, 0.25);
  --link-border-hover: rgba(0, 0, 0, 0.6);
}

/* Quand le body a la classe .dark-mode, on change juste les variables */
body.dark-mode {
  --bg-color: #0A0A0A;
  --text-color: #f5f5f5;
  --muted-color: rgba(245, 245, 245, 0.7);
  --link-border: rgba(245, 245, 245, 0.35);
  --link-border-hover: rgba(245, 245, 245, 0.7);
}

/* Reset léger */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

/* Typo & base */
body {
  min-height: 100vh;
  background: var(--bg-color);
  color: var(--text-color);
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  transition:
    background-color 0.35s ease,
    color 0.35s ease;
}

.page {
  position: relative;
  min-height: 100vh;
  padding: var(--page-padding-desktop);
}

/* Monogramme en haut à gauche (BV) */
.monogram {
  position: fixed;
  top: 16px;
  left: var(--page-padding-desktop);
  font-size: 11px;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Bloc "logo" centré comme sur Lyon-Caen */
.logo-block {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.logo-name {
  font-size: 1.45rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-weight: 400;
  margin-bottom: 0.9rem;

  /* IMPORTANT : le curseur reste normal, pas de “main” */
  cursor: default;
}

.logo-title {
  font-size: 0.82rem;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  font-weight: 300;
}

/* Bloc coordonnées en bas de page, CENTRÉ */
.bottom-block {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  text-align: center;
  font-size: 0.76rem;
  line-height: 1.4;
  text-transform: uppercase;
}

.contact {
  margin-bottom: 0.6rem;
  text-align: center;
}

.contact a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--link-border);
  padding-bottom: 1px;
  transition: border-color 0.25s ease;
}

.contact a:hover {
  border-bottom-color: var(--link-border-hover);
}

.notice {
  font-size: 0.69rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.7;
  color: var(--muted-color);
}

/* Responsive mobile */
@media (max-width: 769px) {
  .page {
    padding: var(--page-padding-mobile);
  }

  .monogram {
    left: var(--page-padding-mobile);
    top: 10px;
    font-size: 9px;
    letter-spacing: 0.28em;
  }

  .logo-name {
    font-size: 1.15rem;
    letter-spacing: 0.2em;
  }

  .logo-title {
    font-size: 0.74rem;
    letter-spacing: 0.18em;
  }

  .bottom-block {
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    font-size: 0.66rem;
  }

  .notice {
    font-size: 0.6rem;
  }
}