/**
 * CSS Custom - Annecy Unik Lodges
 * Styles globaux du projet (non liés à un composant spécifique)
 *
 * @package Annecy_Unik_Lodges
 */

/* ========================================
   SECTION PADDING SYSTEM
   ======================================== */

/* Toutes les sections utilisent les CSS custom properties pour les paddings */
[class^='section-'],
[class*=' section-'] {
  padding-top: var(--section-pt, 0);
  padding-bottom: var(--section-pb, 0);
}

/* ========================================
   STYLES GLOBAUX DU PROJET
   ======================================== */

/* Container custom - même largeur que lodges-grid (1584px) */
.container {
  max-width: 1584px;
}

/* Container fluid avec padding cohérent */
.container-fluid {
  --bs-gutter-x: 1.5rem;
}

/* ========================================
   COMPOSANTS CUSTOM
   ======================================== */

/* Button avec border animée qui se dessine */
.btn-border-draw {
  position: relative;
  display: inline-block;
  border: none;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
}

/* Border bottom (toujours visible) */
.btn-border-draw::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--color-secondary);
}

/* Border animée : top (2ème - de droite à gauche) */
.btn-border-draw::before {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 0;
  height: 3px;
  background: var(--color-secondary);
  transition: width 0.2s ease-out;
  transition-delay: 0.2s; /* Sortie : 2ème */
}

.btn-border-draw:hover::before {
  width: 100%;
  transition-delay: 0.2s; /* Entrée : 2ème */
}

/* Texte du bouton */
.btn-border-draw__text {
  display: block;
  padding: 10px 20px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  text-align: center;
}

.btn-border-draw__text::before,
.btn-border-draw__text::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 0;
  background: var(--color-secondary);
  transition: height 0.2s ease-out;
}

/* Right : de bas en haut (1er à l'entrée, 3ème à la sortie) */
.btn-border-draw__text::after {
  right: 0;
  bottom: 0;
  transition-delay: 0.4s; /* Sortie : 3ème */
}

.btn-border-draw:hover .btn-border-draw__text::after {
  height: 100%;
  transition-delay: 0s; /* Entrée : 1er */
}

/* Left : de haut en bas (3ème à l'entrée, 1er à la sortie) */
.btn-border-draw__text::before {
  left: 0;
  top: 0;
  transition-delay: 0s; /* Sortie : 1er */
}

.btn-border-draw:hover .btn-border-draw__text::before {
  height: 100%;
  transition-delay: 0.4s; /* Entrée : 3ème */
}

/* ========================================
   RESPONSIVE GLOBAL
   ======================================== */

@media (max-width: 1199px) {
  /* Desktop petit */
}

@media (max-width: 991px) {
  /* Tablette */
}

@media (max-width: 767px) {
  /* Mobile */

  /* Diviser les paddings des sections par 2 en mobile */
  [class^='section-'],
  [class*=' section-'] {
    padding-top: calc(var(--section-pt, 0) * 0.5);
    padding-bottom: calc(var(--section-pb, 0) * 0.5);
  }
}

@media (max-width: 575px) {
  /* Mobile petit */
}