/*
  ==========================================================================
  CUSTOM GLOBAL STYLES
  ==========================================================================
  Ce bloc contient tous les styles personnalisés pour les fonctionnalités avancées.
  Il est organisé, optimisé et commenté pour une personnalisation et une maintenance faciles.
  VERSION : 1.1 (Simplifié)
  ==========================================================================
*/

/*
  ==========================================================================
  SECTION 1 : VARIABLES GLOBALES ET STYLES DE BASE
  ==========================================================================
*/

:root {
  /* --- Variables des tailles de police fluides --- */
  --font-size-display: clamp(2.5rem, 1.8rem + 2.5vw, 2.5rem);
  --font-size-h1: clamp(2.1rem, 1.3rem + 2.3vw, 2.5rem);
  --font-size-h2: clamp(1.8rem, 1.2rem + 2.5vw, 2.4rem);
  --font-size-h3: clamp(1.5rem, 1.1rem + 1.7vw, 1.75rem);
  --font-size-h4: clamp(1.25rem, 1rem + 1vw, 1.6rem);
  --font-size-h5: clamp(1.125rem, 0.9rem + 0.8vw, 1.5rem);
  --font-size-h6: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);

  /* --- Taille de police du corps de texte --- */
  --body-font-size: 1rem !important; /* Desktop + tablette */
}

@media (max-width: 767px) {
  :root {
    --body-font-size: 1.125rem !important; /* Mobile */
  }
}

/* --- Style de base du body --- */
body {
  font-size: var(--body-font-size) !important;
}

/* --- Style de la barre de défilement --- */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #f9f7f5;
}
::-webkit-scrollbar-thumb {
  background: #ce6f3f;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #b85a2c;
}

/*
  ==========================================================================
  SECTION 2 : TYPOGRAPHIE
  ==========================================================================
*/

/* --- Titres --- */
.heading-display {
  font-size: var(--font-size-display) !important;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
h1 {
  font-size: var(--font-size-h1) !important;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
h2 {
  font-size: var(--font-size-h2) !important;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
h3 {
  font-size: var(--font-size-h3) !important;
  line-height: 1.3;
}
h4 {
  font-size: var(--font-size-h4) !important;
  line-height: 1.4;
}
h5 {
  font-size: var(--font-size-h5) !important;
  line-height: 1.4;
}
h6 {
  font-size: var(--font-size-h6) !important;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

/* --- Texte de petite taille --- */
.text-size-small {
  font-size: 0.875rem !important;
  line-height: 1.5;
}

/* --- Citations --- */
blockquote {
  font-size: 1.25rem !important;
  line-height: 1.6em !important;
  font-style: italic;
  padding: 1.5rem 2rem;
  margin: 2rem 0;
  border-left: 3px solid #ce6f3f;
}

/*
  ==========================================================================
  SECTION 3 : COMPOSANTS ET SECTIONS SPÉCIFIQUES
  ==========================================================================
*/

/* --- Espacement fluide pour bannière --- */
.parallax-section {
  padding-top: clamp(8rem, 4rem + 15vw, 18rem) !important;
  padding-bottom: clamp(8rem, 4rem + 15vw, 18rem) !important;
}

/* --- Curseur personnalisé --- */
body.desktop-cursor {
  cursor: none;
}
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 700000;
  transition: transform 0.2s ease-out, width 0.3s ease-out, height 0.3s ease-out, opacity 0.3s ease-out;
  opacity: 0;
}
body:hover .cursor {
  opacity: 1;
}
.cursor-follower {
  width: 40px;
  height: 40px;
  background-color: rgba(206, 111, 63, 0.3);
  border: 1px solid rgba(206, 111, 63, 0.5);
}
.cursor-dot {
  width: 8px;
  height: 8px;
  background-color: #ce6f3f;
}
.cursor-follower.is-hovering {
  width: 60px;
  height: 60px;
  background-color: rgba(206, 111, 63, 0.1);
}
.cursor-dot.is-hovering {
  opacity: 0;
}

/* --- Effet de survol du menu mobile --- */
.menu-line-top,
.menu-line-middle,
.menu-line-bottom {
  transition: all 0.3s ease-in-out;
}
.menu-button:hover .menu-line-top:not(.w--open) {
  transform: translateX(5px);
}
.menu-button:hover .menu-line-middle:not(.w--open) {
  transition-delay: 0.05s;
  transform: translateX(5px);
}
.menu-button:hover .menu-line-bottom:not(.w--open) {
  transition-delay: 0.1s;
  transform: translateX(5px);
}
.menu-button:hover .menu-line-top,
.menu-button:hover .menu-line-middle,
.menu-button:hover .menu-line-bottom {
  stroke: #ce6f3f;
}

/*
  ==========================================================================
  SECTION 4 : STYLES D'ANIMATION (précédemment dans index.html)
  ==========================================================================
*/

/* --- Conteneurs et structure de l'animation --- */
.animation-wrapper > * {
  grid-row: 1;
  grid-column: 1;
}
/* --- Effets visuels sur le 3ème article --- */

/*
  ==========================================================================
  SECTION 5 : CLASSES UTILITAIRES ET KEYFRAMES
  ==========================================================================
*/

/* --- Classes utilitaires --- */
/* Bloque le défilement vertical, typiquement pour un menu mobile ouvert */
.no-scroll {
  overflow: hidden;
}

/* --- Keyframes (animations) --- */
@keyframes fade-in {
  80% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}