@font-face {
  font-family: "Symphony Pro";
  src: url("typo/symphony-pro-regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Sanchez";
  src: url("typo/Sanchez-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Sanchez";
  src: url("typo/Sanchez-Italic.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
}

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

html,
body {
  width: 100%;
  height: 100%;
  background-color: #601d23;
}

/* ── Page ── */
.page {
  width: 100%;
  max-width: 100vw;
  min-height: 100vh;
  position: relative;
  overflow-y: hidden; /* cache juste le bas pour l'image */
  overflow-x: visible; /* laisse le texte déborder */
}

/* ── Icône maison ── */
.home-link {
  position: fixed;
  top: 50px;
  right: 50px;
  z-index: 10;
  transition: opacity 0.3s ease;
  text-decoration: none;
}

.home-icon {
  height: 25px; /* ajuste la taille */
  display: block;
}

.home-link:hover {
  opacity: 0.6;
}

/* ── Titre ── */
.ligne-1 {
  position: absolute;
  top: 50px;
  left: 50px;
  font-family: "Symphony Pro", cursive;
  font-weight: normal;
  font-synthesis: none;
  font-size: 325px;
  color: #fff9ec;
  line-height: 0.85;
  white-space: nowrap;
  z-index: 0; /* derrière la photo */
  pointer-events: none;
  margin: 50px;
}

.ligne-2 {
  position: absolute;
  top: 300px; /* à ajuster selon ce que tu vois */
  left: calc(50px + (100% / 12) * 4.5);
  font-family: "Sanchez", serif;
  font-weight: normal;
  font-size: 200px;
  color: #fff9ec;
  line-height: 1;
  z-index: 2; /* devant la photo */
  pointer-events: none;
}

/* ── Portrait ── */
.portrait {
  position: absolute;
  display: block;
  bottom: -20px;
  left: 50%;
  transform: translateX(-40%);
  height: 110vh;
  width: auto;
  object-fit: contain;
  z-index: 1;
  /* Filtre pour harmoniser avec le fond bordeaux */
  filter: sepia(10%) saturate(100%) brightness(0.85);
}

/* Bouton Gallerie */
.gallerie-wrapper {
  position: fixed;
  bottom: 50px;
  left: 50px;
  z-index: 10;
}

.gallerie-link {
  font-family: "Sanchez", serif;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  color: #fff9ec;
  text-decoration: none;
  display: flex;
  align-items: bottom;
  gap: 10px;
  transition:
    gap 0.3s ease,
    opacity 0.3s ease;
}

.arrow-flip {
  display: inline-block;
  transform: scaleX(-1);
}

.gallerie-link:hover {
  gap: 18px;
  opacity: 0.7;
}

/* Bouton Naissance */
.naissance-wrapper {
  position: fixed;
  bottom: 50px;
  right: 50px;
  z-index: 10;
}

.naissance-link {
  display: flex;
  font-family: "Sanchez", serif;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  color: #fff9ec;
  text-decoration: none;
  align-items: bottom;
  gap: 10px;
  transition:
    gap 0.3s ease,
    opacity 0.3s ease;
}

.naissance-link:hover {
  gap: 18px;
  opacity: 0.7;
}