/* ================================
   AERYS INSTITUT — Variables & Base
   ================================ */

@font-face {
  font-family: 'White Angelica Regular';
  src: url('../fonts/WhiteAngelica.ttf') format('woff');
}

:root {
  --white: #ffffff;
  --off-white: #fdf9f7;
  --blush-light: #faf0ee;
  --blush: #f2d9d3;
  --blush-mid: #e8c4bc;
  --blush-deep: #d4a59a;
  --gold: #c4a261;
  --gold-light: #d4b478;
  --gold-pale: #f0e6d0;
  --text-dark: #3a2e2a;
  --text-mid: #7a6560;
  --text-light: #b09a95;
  --rose-accent: #c4796a;
}

/* ================================
   CURSEUR PERSONNALISÉ
   ================================ */

.cursor {
  position: fixed;
  width: 7px;
  height: 7px;
  background: var(--gold);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
}

.cursor-ring {
  position: fixed;
  width: 34px;
  height: 34px;
  border: 1px solid var(--blush-deep);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transition:
    width 0.3s,
    height 0.3s,
    opacity 0.3s;
  transform: translate(-50%, -50%);
  opacity: 0.7;
}

@media (max-width: 900px) {
  .cursor,
  .cursor-ring {
    display: none !important;
  }
  html, body {
    cursor: auto !important;
  }
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 14px;
  background: var(--off-white);
  color: var(--text-dark);
  overflow-x: hidden;
  cursor: none;
}

/* ================================
   CURSEUR PERSONNALISÉ
   ================================ */

.cursor {
  position: fixed;
  width: 7px;
  height: 7px;
  background: var(--gold);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
}

.cursor-ring {
  position: fixed;
  width: 34px;
  height: 34px;
  border: 1px solid var(--blush-deep);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transition:
    width 0.3s,
    height 0.3s,
    opacity 0.3s;
  transform: translate(-50%, -50%);
  opacity: 0.7;
}

/* ================================
   UTILITAIRES COMMUNS
   ================================ */

section {
  padding: 110px 80px;
}

.section-label {
  font-size: 14px;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--rose-accent);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.section-label::before {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: var(--rose-accent);
}

/* ================================
   ANIMATIONS REVEAL AU SCROLL
   ================================ */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 {
  transition-delay: 0.1s;
}
.reveal-delay-2 {
  transition-delay: 0.22s;
}
.reveal-delay-3 {
  transition-delay: 0.34s;
}

/* ================================
   BOUTONS
   ================================ */

.btn-primary {
  padding: 15px 42px;
  background: var(--gold);
  color: var(--white);
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-decoration: none;
  font-family: 'Jost', sans-serif;
  font-weight: 600;
  transition:
    background 0.3s,
    transform 0.3s,
    box-shadow 0.3s;
  box-shadow: 0 8px 28px rgba(196, 162, 97, 0.3);
  display: inline-block;
}

.btn-primary:hover {
  background: var(--gold-light);
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(196, 162, 97, 0.4);
}

.btn-ghost {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-mid);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: color 0.3s;
}

.btn-ghost:hover {
  color: var(--rose-accent);
}

.btn-ghost::after {
  content: '→';
  transition: transform 0.3s;
}

.btn-ghost:hover::after {
  transform: translateX(5px);
}

.signature {
  color: #222222;
  font-family: 'White Angelica Regular';
  text-decoration: none;

  font-size: 50px;
  margin-left: 50px;
}

/* ================================
   RESPONSIVE BASE
   ================================ */

@media (max-width: 900px) {
  section {
    padding: 70px 24px;
  }
}