:root {
  --bg: #f7f5ef;
  --text: #1a1a1a;
  --line: #e5e2da;
}

body {
  margin: 0;
  background: var(--bg);
  font-family: 'Source Code Pro', monospace;
}

/* POSITION LUXE (légèrement au-dessus du centre) */
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;

  align-items: center;

  transform: translateY(-5vh); /* 👈 signature luxe */
}

/* LOGO */
.logo {
  width: clamp(320px, 55vw, 700px);
  height: auto;

  margin-bottom: clamp(40px, 6vh, 80px);

  transition: transform 0.6s ease;

  opacity: 0;
  transform: translateY(10px);

  animation:
    fadeIn 1.2s ease forwards,
    breathe 6s ease-in-out infinite;
}

/* INTERACTION AVEC inquiry */
.container:hover .logo {
  transform: scale(1.03);
}

/* LINK */
a {
  text-decoration: none;
  color: var(--text);
  font-size: 14px;
  position: relative;
}

a::after {
  content: "";
  display: block;
  height: 1px;
  background: var(--text);
  width: 0%;
  transition: 0.3s;
  margin-top: 4px;
}

a:hover::after {
  width: 100%;
}

/* MODAL */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background: rgba(0,0,0,0.2);

  display: flex;
  justify-content: center;
  align-items: center;

  opacity: 0;
  visibility: hidden;

  transition: 0.3s;
}

.modal.active {
  opacity: 1;
  visibility: visible;
}

/* BOX */
.modal-content {
  background: white;
  padding: 40px;
  width: 90%;
  max-width: 400px;

  position: relative;

  transform: translateY(20px);
  transition: 0.3s;
}

.modal.active .modal-content {
  transform: translateY(0);
}

/* CLOSE */
.close {
  position: absolute;
  top: 10px;
  right: 15px;
  cursor: pointer;
  font-size: 18px;
}

/* FORM */
input, textarea {
  width: 100%;
  margin-bottom: 15px;
  padding: 10px;
  border: none;
  border-bottom: 1px solid var(--line);
  font-family: inherit;
  background: transparent;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
}

/* MOBILE OPTI */
@media (max-width: 480px) {
  .logo {
    width: 85vw;
  }

  .container {
    transform: translateY(-2vh);
  }
}

/* ANIMATIONS */
@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.015); }
}