/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Thème enfant pour GeneratePress
 Author:       Votre Nom
 Author URI:   https://votresite.com
 Template:     generatepress
 Version:      1.0.0
*/

/* ==========================================================================
   FUNKY FISH - STYLES DE BASE (GeneratePress Child)
   ========================================================================== */

/* 1. Importation des polices Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@600;700&family=Plus+Jakarta+Sans:wght@400;600;800&display=swap');

:root {
  /* Variables de couleurs issues du logo */
  --ff-purple: #6B05D8;
  --ff-pink: #F52CE2;
  --ff-gradient: linear-gradient(135deg, #6B05D8 0%, #F52CE2 100%);
  --ff-dark: #110826;
  --ff-light: #FAFAFC;
  --ff-white: #FFFFFF;
  
  /* Typographies */
  --ff-font-title: 'Fredoka', cursive, sans-serif;
  --ff-font-body: 'Plus Jakarta Sans', sans-serif;
}

/* 2. Style global */
body {
  font-family: var(--ff-font-body);
  background-color: var(--ff-light);
  color: var(--ff-dark);
  line-height: 1.6;
}

h1, h2, h3, h4, .main-title {
  font-family: var(--ff-font-title);
  letter-spacing: 0.5px;
}

/* 3. Effet de dégradé sur le texte (Titres Funky) */
.text-gradient {
  background: var(--ff-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* 4. Boutons d'action (Boutons Paillettes & Fun) */
.button, 
a.button, 
.wp-block-button__link {
  font-family: var(--ff-font-title) !important;
  font-size: 1.1rem !important;
  background: var(--ff-gradient) !important;
  color: var(--ff-white) !important;
  border-radius: 50px !important;
  padding: 14px 32px !important;
  border: none !important;
  box-shadow: 0 10px 25px rgba(245, 44, 226, 0.3) !important;
  transition: all 0.3s ease-in-out !important;
}

.button:hover, 
a.button:hover, 
.wp-block-button__link:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 15px 30px rgba(107, 5, 216, 0.4) !important;
}

/* 5. Cartes d'activités (Animation au survol) */
.activity-card {
  background: var(--ff-white);
  border-radius: 20px;
  padding: 40px 30px;
  border: 1px solid rgba(107, 5, 216, 0.08);
  box-shadow: 0 10px 30px rgba(0,0,0,0.03);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.activity-card:hover {
  transform: translateY(-8px);
  border-color: var(--ff-pink);
  box-shadow: 0 20px 40px rgba(245, 44, 226, 0.15);
}

/* 6. Contour lumineux du Logo (Astuce visuelle pour le fond blanc/sombre) */
.site-logo img, 
.custom-logo {
  filter: drop-shadow(0px 4px 10px rgba(107, 5, 216, 0.2));
  transition: filter 0.3s ease;
}


/* ==========================================================================
   ICÔNES SOCIAUX MINIMALISTES (FB & INSTA)
   ========================================================================== */

#menu-yes li.nav-social a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  margin-left: 10px !important;
  border-radius: 50% !important;
  border: 1.5px solid var(--ff-purple) !important;
  background: transparent !important;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  font-size: 0 !important;
}

/* 1. Icône FACEBOOK */
#menu-yes li.nav-fb a::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background-color: var(--ff-purple);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'/></svg>") no-repeat center / contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'/></svg>") no-repeat center / contain;
  transition: background-color 0.3s ease;
}

/* 2. Icône INSTAGRAM */
#menu-yes li.nav-insta a::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background-color: var(--ff-purple);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='2' width='20' height='20' rx='5' ry='5'/><path d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/><line x1='17.5' y1='6.5' x2='17.51' y2='6.5'/></svg>") no-repeat center / contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='2' width='20' height='20' rx='5' ry='5'/><path d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/><line x1='17.5' y1='6.5' x2='17.51' y2='6.5'/></svg>") no-repeat center / contain;
  transition: background-color 0.3s ease;
}

/* 3. Effet Survol (Hover) */
#menu-yes li.nav-social a:hover {
  background: var(--ff-gradient) !important;
  border-color: transparent !important;
  transform: translateY(-2px) scale(1.1) !important;
  box-shadow: 0 6px 15px rgba(245, 44, 226, 0.4) !important;
}

#menu-yes li.nav-social a:hover::before {
  background-color: var(--ff-white) !important;
}