/* ==========================================
   ONGLES & BEAUTÉ - VERSION 6.9 UIKit 3.x
   Charte graphique basée sur les couleurs du logo
   ========================================== */

/* Variables UIKit essentielles pour la charte graphique */
:root {
  --uk-primary: #E4007F;
  --uk-secondary: #EB588F;
  --beauty-gradient: linear-gradient(135deg, #E4007F 0%, #EB588F 100%);
  --font-text: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-headings: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Typographie UIKit personnalisée */
body, p, .uk-text-lead, .uk-text-large, .uk-text-small, .uk-button, .uk-nav, .uk-navbar-nav, a, input, textarea, select {
  font-family: var(--font-text);
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6, .uk-heading-primary, .uk-heading-hero, .uk-heading-medium, .uk-heading-large, .uk-card-title, .uk-navbar-item {
  font-family: var(--font-headings);
  font-weight: bold;
}

/* Surcharges couleurs UIKit pour la charte graphique */
.uk-background-primary { background-color: var(--uk-primary) !important; }
.uk-background-secondary { background-color: var(--uk-secondary) !important; }
.uk-text-primary { color: var(--uk-primary) !important; }
.uk-text-secondary { color: var(--uk-secondary) !important; }

/* Fonds sombres personnalisés */
.uk-background-dark { background: rgba(65, 58, 52, 0.92); color: white; }
.uk-background-darker { background: rgba(55, 48, 42, 1); color: white; }

/* Boutons UIKit personnalisés */
.uk-button {
  font-family: var(--font-headings);
  border-radius: 12px;
  transition: all 0.3s ease;
  border: none;
}

.uk-button-primary {
  background: var(--beauty-gradient);
  color: white;
}

.uk-button-primary:hover {
  background: linear-gradient(135deg, #EB588F 0%, #E4007F 100%);
  color: white;
  transform: translateY(-2px);
}

.uk-button-primary:focus { outline: none; }
.uk-button-primary:active { transform: translateY(0); }

.uk-button-secondary {
  background: rgba(255, 255, 255, 0.98);
  color: #374151;
  border: 2px solid rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(15px);
}

.uk-button-secondary:hover {
  background: rgba(255, 255, 255, 1);
  color: var(--uk-primary);
  transform: translateY(-2px);
}

/* Navigation UIKit personnalisée */
.uk-navbar-nav > li > a {
  transition: all 0.3s ease;
  position: relative;
  color: #555;
}

.uk-navbar-nav > li > a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--beauty-gradient);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.uk-navbar-nav > li > a:hover::after {
  width: 100%;
}

.uk-navbar-sticky {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.95);
}

/* Cards UIKit personnalisées */
.uk-card {
  border-radius: 16px;
  transition: all 0.3s ease;
}

.uk-card-hover:hover {
  transform: translateY(-8px);
  /* will-change: box-shadow; /* Ajout pour aider le navigateur avec l'animation de l'ombre */
}

/* Labels prix personnalisés harmonisés avec la charte graphique */
.price-label-accessible {
  background-color: #F8E8F3;
  color: #B91C7C;
  border: 1px solid rgba(185, 28, 124, 0.2);
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.875rem;
  white-space: nowrap;
}

.price-label-medium {
  color: #c2185b;
  background-color: #fff0f5;
  padding: 3px 8px;
  border-radius: 4px;
}

.price-label-premium {
  color: #b0003a;
  background-color: #fff0f5;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 600;
}

/* ==========================================
   OVERLAY PERSONNALISÉ POUR HERO SECTION
   ========================================== */

/* Overlay brun transparent pour la section hero */
.uk-overlay-brown { 
  background: rgba(101, 67, 33, 0.5); 
}

/* Overlay dégradé pour section services */
.uk-overlay-gradient-services {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 50%, rgba(0, 0, 0, 0) 100%);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

/* ==========================================
   STYLES PERSONNALISÉS SUPPLÉMENTAIRES
   ========================================== */

.uk-label-success {
  background-color: #c2185b;
  color: white;
  font-weight: bold;
}

.uk-light {
  color: #fff;
  font-weight: 500;
}

.uk-text-warning {
  color: #c2185b;
  font-weight: 600;
}

/* ==========================================
   OPTIMISATIONS CLS (Cumulative Layout Shift)
   ========================================== */

/* 1. Navbar fixe pour éviter les variations de hauteur */
.uk-navbar-container { 
  min-height: 70px; 
  height: 70px; 
  line-height: 70px; 
}

.uk-navbar-item { 
  min-height: 70px; 
}

/* 2. Hero h1 avec dimensions fixes */
#hero h1 { 
  font-size: clamp(3.2rem, 5.8vw, 4.8rem); 
  min-height: 6.5rem; 
  font-weight: 700; 
}

/* 3. Boutons avec dimensions fixes */
.uk-button-primary.uk-button-large { 
  min-height: 48px; 
  min-width: 240px; 
  padding: 0.75rem 1.5rem; 
  font-size: 1rem; 
  font-weight: 500; 
}

/* 4. Suppression de toutes les animations qui causent du CLS */
.uk-button, .uk-navbar-nav a, .uk-card { 
  transition: none !important; 
  animation: none !important; 
}

/* 5. Optimisations supplémentaires pour éliminer le CLS restant */

/* Texte d'introduction Hero - réduction CLS 0.071 */
#hero .hero-content {
  min-height: 450px;
  contain: layout style;
}

#hero .hero-content p {
  min-height: 120px;
  contain: layout;
}

/* Logo navbar - réduction CLS 0.194 */
.uk-navbar-item.uk-logo {
  min-width: 200px;
  min-height: 60px;
  contain: size layout;
}

/* Stabilisation UIKit sticky navbar */
.uk-navbar-sticky {
  transform: translateZ(0);
  will-change: auto;
}

/* Hero buttons stabilisés */
.hero-buttons a.uk-button {
  min-width: 200px;
  min-height: 48px;
  contain: layout;
}

/* Fonts avec fallback système pour éviter FOIT/FOUT */
body, .uk-text-lead, .uk-text-large, .uk-text-small {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ==========================================
   OPTIMISATIONS ULTRA-AGRESSIVES CLS/LCP
   ========================================== */

/* Force GPU composition pour tous les éléments critiques */
.uk-navbar-container,
.uk-navbar-item,
.uk-navbar-item img,
#hero,
#hero .hero-content,
#hero .hero-content h1,
#hero .hero-content p,
#hero .hero-buttons,
#hero .hero-buttons a {
  transform: translateZ(0) !important;
  will-change: auto !important;
  backface-visibility: hidden !important;
  contain: layout !important;
}

/* Élimination définitive CLS navbar */
.uk-navbar-sticky,
.uk-navbar-transparent {
  transform: translateZ(0) !important;
  contain: layout size style !important;
}

/* Stabilisation absolue du logo */
.uk-navbar-item.uk-logo img {
  position: relative !important;
  display: block !important;
  contain: size layout style paint !important;
}

/* Hero ultra-stable */
#hero .hero-grid {
  min-height: 600px !important;
  contain: layout !important;
}

/* Typography stable pour LCP */
#hero h1 {
  font-size: clamp(3.2rem, 5.8vw, 4.8rem) !important;
  min-height: 200px !important;
  line-height: 1.1 !important;
  contain: layout style !important;
  font-display: swap !important;
}

/* Texte LCP optimisé */
#hero .hero-content p {
  font-size: 1.25rem !important;
  min-height: 150px !important;
  line-height: 1.5 !important;
  contain: layout style !important;
  font-display: swap !important;
}

/* Suppression complète de toutes les animations */
*,
*::before,
*::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* Optimisation du rendering */
.uk-container {
  contain: layout !important;
}

.uk-section {
  contain: layout !important;
}

/* Stabilisation des cards pour éviter tout décalage */
.uk-card {
  contain: layout style !important;
  transform: translateZ(0) !important;
}

/* ==========================================
   OPTIMISATION DOM - ÉLIMINATION AJUSTEMENTS FORCÉS
   ========================================== */

/* Désactiver les calculs DOM inutiles d'UIKit */
.uk-sticky,
[uk-sticky] {
  contain: layout style !important;
  transform: translateZ(0) !important;
}

.uk-scrollspy,
[uk-scrollspy],
[uk-scrollspy-nav] {
  contain: layout !important;
}

.uk-offcanvas,
[uk-offcanvas] {
  contain: layout style !important;
}

.uk-toggle,
[uk-toggle] {
  contain: layout !important;
}

.uk-grid,
[uk-grid] {
  contain: layout !important;
}

/* Optimisation des icônes pour réduire la profondeur DOM */
[uk-icon] {
  contain: layout style paint !important;
  transform: translateZ(0) !important;
}

/* Forcer des layouts simples pour éviter les recalculs */
.uk-container {
  contain: layout style !important;
  isolation: isolate !important;
}

.uk-section {
  contain: layout style !important;
  isolation: isolate !important;
}

/* Éviter les recalculs UIKit sur les éléments critiques */
.uk-navbar-container * {
  contain: layout !important;
}

#hero * {
  contain: layout !important;
}

/* Simplification des gradients pour éviter les repaints */
.uk-overlay-gradient-services {
  contain: layout style paint !important;
  transform: translateZ(0) !important;
}

/* Performance maximale - élimination totale des ajustements forcés */
* {
  box-sizing: border-box !important;
}

*:before,
*:after {
  box-sizing: border-box !important;
  contain: layout !important;
}

/* Correction contrastes Accessibilité */
.uk-text-muted, p.uk-text-muted, span.uk-text-muted, div.uk-text-muted, li.uk-text-muted {
    color: #444 !important; /* Ancien: #555 */
}
.uk-text-success, p.uk-text-success, span.uk-text-success {
    color: #1E8449 !important;
}

/* Amélioration contraste Navbar */
.uk-navbar-nav>li>a {
    color: #555;
}