/* Navigation fluide et cohérente pour pages expertises - Site de menuiserie */

/* Scroll fluide pour l'ensemble du site */
html {
  scroll-behavior: smooth \!important;
}

/* Amélioration des espacements pour une navigation plus agréable */
.menuiserie .slide {
  padding: 40px 0 \!important;
  margin-bottom: 0 \!important;
}

/* Section hero - hauteur optimisée pour une lecture confortable */
.menuiserie .slide.xl-10 {
  min-height: 70vh \!important;
  max-height: 85vh \!important;
  display: flex \!important;
  align-items: center \!important;
  justify-content: center \!important;
}

/* Sections de contenu - espacements cohérents */
.menuiserie .slide.three-sizes {
  padding: 80px 0 \!important;
  min-height: auto \!important;
}

.menuiserie .slide.configure-cta {
  padding: 100px 0 \!important;
  background: linear-gradient(135deg, #f7f7f0 0%, #fdfdf7 100%) \!important;
  min-height: auto \!important;
}

/* Amélioration de la lisibilité des textes */
.menuiserie .slide h1, .menuiserie .slide h2 {
  margin-bottom: 24px \!important;
  line-height: 1.2 \!important;
}

.menuiserie .slide p {
  line-height: 1.6 \!important;
  margin-bottom: 20px \!important;
  max-width: 65ch \!important; /* Limite la largeur pour améliorer la lisibilité */
}

/* Boutons plus visible et cohérents avec l'identité menuiserie */
.button-rounded {
  transition: all 0.3s ease \!important;
  font-weight: 500 \!important;
  letter-spacing: 0.5px \!important;
}

.button-rounded:hover {
  transform: translateY(-2px) \!important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) \!important;
}

/* Amélioration des grilles pour un alignement plus cohérent */
.modern-grid {
  gap: var(--modern-grid-column-gutter) \!important;
  align-items: start \!important;
}

/* Expertises: élargir les blocs de spécifications pour éviter les retours à la ligne inutiles */
@media (min-width: 1351px) {
  .expertise-specs .expertise-specs-table-group {
    /* Passe de 4 colonnes à 3 colonnes (2 inter-colonnes à 2*gutter = 4*gutter) */
    width: calc((100% - var(--modern-grid-column-gutter) * 4) / 3) \!important;
  }
}

/* Transitions fluides entre sections */
.menuiserie .slide + .slide {
  border-top: 1px solid rgba(0, 0, 0, 0.05) \!important;
}

/* Amélioration de la section spécialités */
.three-sizes-gradient {
  background: linear-gradient(180deg, #fff 0%, #f7f7f0 50%, #fff 100%) \!important;
}

/* Cards des spécialités plus lisibles */
.modern-grid .column-5 {
  padding: 30px 20px \!important;
  border-radius: 8px \!important;
  background: rgba(255, 255, 255, 0.8) \!important;
  margin-bottom: 30px \!important;
  transition: transform 0.3s ease, box-shadow 0.3s ease \!important;
}

.modern-grid .column-5:hover {
  transform: translateY(-5px) \!important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) \!important;
}

/* Responsive - Mobile optimisé */
@media (max-width: 768px) {
  .menuiserie .slide {
    padding: 30px 0 \!important;
  }
  
  .menuiserie .slide.xl-10 {
    min-height: 60vh \!important;
    max-height: 70vh \!important;
  }
  
  .menuiserie .slide.three-sizes {
    padding: 60px 0 \!important;
  }
  
  .menuiserie .slide.configure-cta {
    padding: 80px 0 \!important;
  }
  
  .modern-grid .column-5 {
    padding: 20px 15px \!important;
    margin-bottom: 20px \!important;
  }
  
  /* Textes plus adaptés au mobile */
  .menuiserie .slide p {
    max-width: 100% \!important;
    font-size: 16px \!important;
    line-height: 1.5 \!important;
  }
}

/* Animation d'entrée pour les éléments */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Application de l'animation aux éléments principaux */
.modern-grid .column-5,
.configure-cta-content {
  animation: fadeInUp 0.6s ease forwards \!important;
}

.modern-grid .column-5:nth-child(2) {
  animation-delay: 0.1s \!important;
}

.modern-grid .column-5:nth-child(3) {
  animation-delay: 0.2s \!important;
}

/* Amélioration de la section CTA finale */
.configure-cta-content {
  text-align: center \!important;
  max-width: 600px \!important;
  margin: 0 auto \!important;
  padding: 40px \!important;
  border-radius: 12px \!important;
  background: rgba(255, 255, 255, 0.9) \!important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1) \!important;
}

/* Amélioration de la navigation anchor links (si ajoutées) */
.section-anchor {
  scroll-margin-top: 100px \!important; /* Compense la hauteur de la navbar fixe */
}

/* Indicateur de scroll pour les longues pages */
.scroll-indicator {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #8B4513, #D2B48C);
  z-index: 9999;
  transition: width 0.3s ease;
}



/* Animations supplémentaires pour une meilleure UX */
.animate-in {
  animation: slideInFromBottom 0.6s ease-out forwards \!important;
}

@keyframes slideInFromBottom {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Style menuiserie - couleurs bois et naturelles */
:root {
  --menuiserie-brown: #8B4513;
  --menuiserie-light-brown: #D2B48C;
  --menuiserie-cream: #F5F5DC;
  --menuiserie-dark: #654321;
}

/* Amélioration des boutons avec thème menuiserie */
.button-rounded-blue {
  background: linear-gradient(135deg, var(--menuiserie-brown) 0%, var(--menuiserie-dark) 100%) \!important;
  border-color: var(--menuiserie-brown) \!important;
  box-shadow: 0 4px 15px rgba(139, 69, 19, 0.3) \!important;
  position: relative \!important;
  overflow: hidden \!important;
}

.button-rounded-blue::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
}

.button-rounded-blue:hover::before {
  left: 100%;
}

.button-rounded-blue:hover {
  background: linear-gradient(135deg, var(--menuiserie-dark) 0%, var(--menuiserie-brown) 100%) \!important;
  transform: translateY(-3px) \!important;
  box-shadow: 0 6px 20px rgba(139, 69, 19, 0.4) \!important;
}

/* Amélioration des cards spécialités avec effet bois */
.modern-grid .column-5 {
  background: linear-gradient(145deg, #fff 0%, var(--menuiserie-cream) 100%) \!important;
  border-left: 4px solid var(--menuiserie-light-brown) \!important;
  position: relative \!important;
}

.modern-grid .column-5::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--menuiserie-brown), var(--menuiserie-light-brown), var(--menuiserie-brown));
}

/* Amélioration des titres avec style menuiserie */
.type-40, .type-32 {
  color: var(--menuiserie-dark) \!important;
  position: relative \!important;
}

.type-40::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, var(--menuiserie-brown), var(--menuiserie-light-brown));
  border-radius: 2px;
}

/* Amélioration de la section CTA avec texture bois subtile */
.configure-cta-content {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), var(--menuiserie-cream)) \!important;
  border: 2px solid var(--menuiserie-light-brown) \!important;
  position: relative \!important;
}

.configure-cta-content::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, var(--menuiserie-brown), var(--menuiserie-light-brown), var(--menuiserie-brown));
  border-radius: 14px;
  z-index: -1;
}

/* Amélioration responsive pour tablettes */
@media (max-width: 1024px) and (min-width: 769px) {
  .modern-grid .column-5 {
    padding: 25px 18px \!important;
  }
  
  .configure-cta-content {
    padding: 35px \!important;
  }
}

/* Micro-interactions pour une meilleure UX */
.type-18, .type-20 {
  transition: color 0.3s ease \!important;
}

.modern-grid .column-5:hover .type-18 {
  color: var(--menuiserie-dark) \!important;
}

/* Focus states améliorés pour l'accessibilité */
button:focus,
.button-rounded:focus {
  outline: 3px solid var(--menuiserie-light-brown) \!important;
  outline-offset: 3px \!important;
}

/* Amélioration de l'indicateur de scroll */
.scroll-indicator {
  background: linear-gradient(90deg, var(--menuiserie-brown), var(--menuiserie-light-brown), var(--menuiserie-dark)) \!important;
  height: 4px \!important;
  box-shadow: 0 2px 4px rgba(139, 69, 19, 0.3) \!important;
}