/*
Theme Name: Enfold Child
Description: A <a href='http://codex.wordpress.org/Child_Themes'>Child Theme</a> for the Enfold Wordpress Theme. If you plan to do a lot of file modifications we recommend to use this Theme instead of the original Theme. Updating wil be much easier then.
Version: 1.0
Author: Kriesi
Author URI: http://www.kriesi.at
Template: enfold
*/



/*Add your own styles here:*/

:root {
  /* Couleurs principales */
  --lolette-pink: hsl(350, 60%, 75%);
  --lolette-pink-light: hsl(350, 60%, 85%);
  --lolette-pink-dark: hsl(350, 50%, 68%);

  --lolette-sage: hsl(145, 25%, 72%);
  --lolette-sage-light: hsl(145, 25%, 82%);
  --lolette-sage-dark: hsl(145, 30%, 65%);

  --lolette-cream: hsl(30, 40%, 98%);
  --lolette-cream-dark: hsl(35, 30%, 94%);

  --lolette-terracotta: hsl(18, 55%, 70%);
  --lolette-terracotta-dark: hsl(18, 55%, 60%);

  /* Couleurs de texte */
  --lolette-text: hsl(20, 25%, 20%);
  --lolette-text-muted: hsl(20, 15%, 45%);
  --lolette-text-light: hsl(20, 15%, 60%);

  /* Couleurs de fond */
  --lolette-bg: hsl(30, 40%, 98%);
  --lolette-bg-card: hsl(30, 30%, 97%);
  --lolette-bg-muted: hsl(35, 30%, 94%);

  /* Bordures */
  --lolette-border: hsl(30, 25%, 88%);
  --lolette-border-light: hsl(30, 25%, 92%);

  /* Dégradés */
  --lolette-gradient-hero: linear-gradient(135deg, hsl(350, 60%, 95%) 0%, hsl(35, 40%, 96%) 50%, hsl(145, 25%, 95%) 100%);
  --lolette-gradient-card: linear-gradient(180deg, hsl(30, 30%, 99%) 0%, hsl(30, 30%, 96%) 100%);
  --lolette-gradient-primary: linear-gradient(135deg, hsl(350, 60%, 75%) 0%, hsl(350, 50%, 68%) 100%);
  --lolette-gradient-accent: linear-gradient(135deg, hsl(145, 25%, 72%) 0%, hsl(145, 30%, 65%) 100%);
  --lolette-gradient-text: linear-gradient(135deg, hsl(350, 60%, 65%) 0%, hsl(18, 55%, 60%) 100%);

  /* Ombres */
  --lolette-shadow-soft: 0 4px 20px -4px hsla(350, 30%, 70%, 0.15);
  --lolette-shadow-card: 0 8px 30px -8px hsla(20, 30%, 50%, 0.12);
  --lolette-shadow-elevated: 0 20px 50px -15px hsla(20, 30%, 40%, 0.18);

  /* Rayons de bordure */
  --lolette-radius: 1rem;
  --lolette-radius-sm: 0.5rem;
  --lolette-radius-lg: 1.5rem;
  --lolette-radius-xl: 2rem;
  --lolette-radius-full: 9999px;

  /* Transitions */
  --lolette-transition: all 0.3s ease;
  --lolette-transition-fast: all 0.2s ease;
}

/* ==========================================================================
   HEADER & NAVIGATION - En-tête et navigation
   ========================================================================== */

#header_main .inner-container {
  max-width: 1310px !important;
  margin: 0 auto !important;
}

/* Navigation principale */
.main_menu .menu-item>a,
#avia-menu .menu-item>a {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 500;
  color: var(--lolette-text-muted) !important;
  padding: 0.75rem 1.25rem;
  transition: var(--lolette-transition);
  position: relative;
}

.main_menu .menu-item>a::after,
#avia-menu .menu-item>a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: var(--lolette-gradient-primary);
  transition: var(--lolette-transition);
}

.main_menu .menu-item>a:hover,
#avia-menu .menu-item>a:hover {
  color: var(--lolette-pink) !important;
}

.main_menu .menu-item>a:hover::after,
#avia-menu .menu-item>a:hover::after {
  width: 100%;
}

.main_menu .current-menu-item>a,
#avia-menu .current-menu-item>a {
  color: var(--lolette-pink) !important;
}

/* Menu mobile */
#mobile-advanced .av-hamburger-inner,
#mobile-advanced .av-hamburger-inner::before,
#mobile-advanced .av-hamburger-inner::after {
  background-color: var(--lolette-pink);
}

div.text-foreground h1.av-special-heading-tag {
  color: var(--lolette-text) !important;
}

div.text-foreground h1.av-special-heading-tag>span.lolette-muted {
  color: var(--lolette-pink) !important;
}

/* ==========================================================================
   5. BUTTONS - Boutons
   ========================================================================== */

/* Bouton principal (Hero) */
.avia-button,
.av_button_wrapper .avia-button,
a.avia-button {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 600;
  padding: 0.875rem 2rem;
  border-radius: var(--lolette-radius) !important;
  transition: var(--lolette-transition);
  text-transform: none !important;
  letter-spacing: 0;
  border: none !important;
}

/* Bouton primaire - Style dégradé */
.avia-button.avia-color-theme-color,
.avia-button.avia-color-custom,
.avia-button.avia-color-red,
a.avia-button.avia-color-theme-color {
  background: var(--lolette-gradient-primary) !important;
  color: white !important;
  box-shadow: var(--lolette-shadow-elevated);
}

.avia-button.avia-color-theme-color:hover,
.avia-button.avia-color-custom:hover,
a.avia-button.avia-color-theme-color:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: var(--lolette-shadow-card);
}

/* Bouton secondaire - Outline */
.avia-button.avia-color-light,
.avia-button.avia-style-outline,
a.avia-button.avia-color-light {
  background: transparent !important;
  border: 2px solid var(--lolette-pink) !important;
  color: var(--lolette-pink) !important;
}

.avia-button.avia-color-light:hover,
.avia-button.avia-style-outline:hover,
a.avia-button.avia-color-light:hover {
  background: var(--lolette-pink) !important;
  color: white !important;
}

/* Bouton vert/accent */
.avia-button.avia-color-green,
a.avia-button.avia-color-green {
  background: var(--lolette-gradient-accent) !important;
  color: var(--lolette-text) !important;
}

/* Tailles de boutons */
.avia-button.avia-size-large {
  padding: 1rem 2.5rem;
  font-size: 1.125rem;
  border-radius: var(--lolette-radius-lg) !important;
}

.avia-button.avia-size-small {
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
}

/* ==========================================================================
   6. SECTIONS & BACKGROUNDS - Sections et arrière-plans
   ========================================================================== */

/* Section Hero avec dégradé */
.lolette-hero,
.avia-section.lolette-hero {
  background: var(--lolette-gradient-hero) !important;
  position: relative;
  overflow: hidden;
}

.lolette-hero::before {
  content: '';
  position: absolute;
  top: 5rem;
  left: 2.5rem;
  width: 18rem;
  height: 18rem;
  background: hsla(350, 60%, 75%, 0.2);
  border-radius: 50%;
  filter: blur(3rem);
  animation: lolette-float 6s ease-in-out infinite;
}

.lolette-hero::after {
  content: '';
  position: absolute;
  bottom: 5rem;
  right: 2.5rem;
  width: 24rem;
  height: 24rem;
  background: hsla(145, 25%, 72%, 0.3);
  border-radius: 50%;
  filter: blur(3rem);
  animation: lolette-float 6s ease-in-out 2s infinite;
}

/* Section crème */
.lolette-cream,
.avia-section.lolette-cream {
  background-color: var(--lolette-cream) !important;
}

/* Section dégradé carte */
.lolette-card-bg,
.avia-section.lolette-card-bg {
  background: var(--lolette-gradient-card) !important;
}

div.lolette-info {
  width: 50% !important;
  background: var(--lolette-pink-light);
  border-radius: var(--lolette-radius-lg);
  color: var(--lolette-pink-dark) !important;
  padding: 1rem;
  border: 1px solid var(--lolette-border-light);
  box-shadow: var(--lolette-shadow-soft);
  transition: var(--lolette-transition);
  font-weight: bold !important;
}

div.lolette-info-green {
  width: 20% !important;
  background: var(--lolette-sage-light);
  border-radius: var(--lolette-radius-lg);
  color: var(--lolette-sage-dark) !important;
  padding: 1rem;
  border: 1px solid var(--lolette-border-light);
  box-shadow: var(--lolette-shadow-soft);
  transition: var(--lolette-transition);
  font-weight: bold !important;
}

.lolette-image-arrondi img {
  border-radius: 20px !important;
  overflow: hidden;
}

.div-table {
  display: table;
  width: 100%;
  border-collapse: collapse;
  /* Bordures nettes */
}

.div-table-row {
  display: table-row;
}

.div-table-cell {
  display: table-cell;
  padding: 8px;
  text-align: left;
}

.div-table-header {
  font-weight: bold;
  font-size: 2em !important;
  color: var(--lolette-pink) !important;
}


#menu-main-menu li {
  display: inline-block;
  margin-right: 5px;
  font-size: 1em !important;
}


.boxcontactlolette {
  background: var(--lolette-gradient-card);
  border-radius: var(--lolette-radius-lg);
  padding: 2rem;
  border: 1px solid var(--lolette-border-light);
  box-shadow: var(--lolette-shadow-soft);
  transition: var(--lolette-transition);
}

.boxcontactlolette input, .boxcontactlolette textarea{
  background : #FFFFFF !important;
}

.boxcontactlolette:hover {
  transform: translateY(-8px);
  box-shadow: var(--lolette-shadow-elevated);
}