/* ==========================================================================
   GOOEY MENU - CONFIGURATION MICRO (40PX) & THÈME VERMILLON
   ========================================================================== */

/* Indispensable : Donne au conteneur de votre site le rôle de repère physique */
.page {
  position: relative !important;
  overflow: visible !important;
}

/* Ancrage absolu calé sur le bord droit de la structure .page */
.gooey-menu-container.top-right-squelette-anchor {
  filter: url('#gooey-shadowed-goo');
  -webkit-filter: url('#gooey-shadowed-goo');
  position: absolute !important;
  top: 15px !important;    
  right: 15px !important;  
  left: auto !important;
  width: 40px !important;  
  height: 40px !important; 
  box-sizing: border-box !important;
  font-size: 13px !important;
  z-index: 99999 !important; 
  overflow: visible !important; 
}

/* Masquage de la checkbox native */
.gooey-menu-open-input {
  display: none !important;
}

/* Base commune des boutons (Taille Micro 40px) 
   -> Couleur modifiée : Fond Vermillon éclatant par défaut */
.gooey-menu-item, 
.gooey-menu-button {
  background: #E34234 !important; /* CORRECTION : Couleur Vermillon */
  border-radius: 100% !important;
  width: 40px !important;        
  height: 40px !important;       
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;           
  left: auto !important;
  color: white !important;
  text-align: center !important;
  line-height: 40px !important;  
  transform: translate3d(0, 0, 0) !important;
  transition: transform ease-out 200ms, background 200ms, color 200ms !important;
}

.gooey-menu-item i.fa {
  line-height: 40px !important;
}

.gooey-menu-item {
  z-index: 1;
}

/* Couleur au survol des pastilles enfants 
   -> Passe sur votre Vermillon avec opacité légère au survol */
.gooey-menu-item:hover {
  background: rgba(227, 66, 52, 0.7) !important; 
  color: white !important;
}
.gooey-menu-item:nth-child(3) { transition-duration: 70ms !important; }
.gooey-menu-item:nth-child(4) { transition-duration: 130ms !important; }
.gooey-menu-item:nth-child(5) { transition-duration: 190ms !important; }
.gooey-menu-item:nth-child(6) { transition-duration: 250ms !important; }
.gooey-menu-item:nth-child(7) { transition-duration: 310ms !important; }

/* Bouton Déclencheur Principal (Hamburger) */
.gooey-menu-button {
  z-index: 2;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275) !important;
  transition-duration: 400ms !important;
  cursor: pointer !important;
}

/* Au survol du bouton principal fermé */
.gooey-menu-button:hover {
  background: #c93528 !important; /* Vermillon légèrement plus soutenu au survol */
}

/* CORRECTION CRITIQUE : Au clic (ouverture du menu), le bouton déclencheur 
   bascule sur votre teinte Vermillon à opacité plus légère signature */
.gooey-menu-open-input:checked + .gooey-menu-button {
  background: rgba(227, 66, 52, 0.35) !important; /* Vermillon opacité légère */
}

/* Structure des trois lignes du Hamburger */
.gooey-hamburger {
  width: 15px !important;
  height: 2px !important;
  background: white !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  margin-left: -7.5px !important;
  margin-top: -1px !important;
  transition: transform 200ms !important;
}
.gooey-hamburger-1 { transform: translate3d(0, -4px, 0) !important; }
.gooey-hamburger-2 { transform: translate3d(0, 0, 0) !important; }
.gooey-hamburger-3 { transform: translate3d(0, 4px, 0) !important; }

.gooey-menu-open-input:checked + .gooey-menu-button .gooey-hamburger-1 {
  transform: translate3d(0, 0, 0) rotate(45deg) !important;
}
.gooey-menu-open-input:checked + .gooey-menu-button .gooey-hamburger-2 {
  transform: translate3d(0, 0, 0) scale(0.1, 1) !important;
}
.gooey-menu-open-input:checked + .gooey-menu-button .gooey-hamburger-3 {
  transform: translate3d(0, 0, 0) rotate(-45deg) !important;
}

/* ==========================================================================
   DÉPLOIEMENT INTERNE SÉCURISÉ (Vers le bas et la gauche)
   Distance 60px 
   ========================================================================== */
.gooey-menu-open-input:checked ~ .gooey-menu-item {
  transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33) !important;
}

/* Item 1 - Plein Bas */
.gooey-menu-open-input:checked ~ .gooey-menu-item:nth-child(3) {
  transform: translate3d(0px, 60px, 0) !important;
}
/* Item 2 - Diagonale Sud-Ouest */
.gooey-menu-open-input:checked ~ .gooey-menu-item:nth-child(4) {
  transform: translate3d(-25px, 54.5px, 0) !important;
}
/* Item 3 - Diagonale parfaite 45° */
.gooey-menu-open-input:checked ~ .gooey-menu-item:nth-child(5) {
  transform: translate3d(-42.5px, 42.5px, 0) !important;
}
/* Item 4 - Diagonale alternative */
.gooey-menu-open-input:checked ~ .gooey-menu-item:nth-child(6) {
  transform: translate3d(-54.5px, 25px, 0) !important;
}
/* Item 5 - Plein Gauche */
.gooey-menu-open-input:checked ~ .gooey-menu-item:nth-child(7) {
  transform: translate3d(-60px, 0px, 0) !important;
}


/* ==========================================================================
   OPTIMISATION DES ICÔNES IMAGES DEPUIS IMG/LOGO/
   ========================================================================== */

/* Centrage géométrique parfait de l'image PNG dans la puce micro de 40px */
.gooey-menu-item .goo-icon {
    width: 20px !important;       /* Taille proportionnelle pour une bulle de 40px */
    height: 20px !important;      
    object-fit: contain !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important; 
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    
    /* ASTUCE GRAPHIQUE : Force vos icônes PNG à devenir blanches pour ressortir sur le vermillon */
    filter: brightness(0) invert(1) !important; 
    
    transition: transform 0.2s ease, filter 0.2s ease;
}

/* Effet au survol : l'icône grossit légèrement */
.gooey-menu-item:hover .goo-icon {
    transform: translate(-50%, -50%) scale(1.1) !important;
}
/* ==========================================================================
   FORCE LE PREMIER PLAN DANS LE FILTRE SVG & PASSAGE AU VERT PASTEL
   ========================================================================== */

/* 1. On prépare le conteneur à gérer la profondeur 3D */
.gooey-menu-container.top-right-squelette-anchor {
    perspective: 1000px !important;
    transform-style: preserve-3d !important;
}

/* 2. Règle générale au survol : Priorité maximale et couleur Vert Pastel */
.gooey-menu-item:hover,
.gooey-menu-button:hover {
    z-index: 999999 !important;
    background: #A2E8A2 !important; /* CORRECTION : Couleur Vert Pastel au survol */
}

/* 3. COORDONNÉES DE SURVOL INDIVIDUELLES + POUSSÉE 3D + VERT PASTEL */

/* Item 1 (Plein Bas) au survol */
.gooey-menu-open-input:checked ~ .gooey-menu-item:nth-child(3):hover {
    background: #A2E8A2 !important;
    transform: translate3d(0px, 60px, 50px) scale(1.1) !important;
}

/* Item 2 (Diagonale Sud-Ouest) au survol */
.gooey-menu-open-input:checked ~ .gooey-menu-item:nth-child(4):hover {
    background: #A2E8A2 !important;
    transform: translate3d(-25px, 54.5px, 50px) scale(1.1) !important;
}

/* Item 3 (Diagonale parfaite 45°) au survol */
.gooey-menu-open-input:checked ~ .gooey-menu-item:nth-child(5):hover {
    background: #A2E8A2 !important;
    transform: translate3d(-42.5px, 42.5px, 50px) scale(1.1) !important;
}

/* Item 4 (Diagonale alternative) au survol */
.gooey-menu-open-input:checked ~ .gooey-menu-item:nth-child(6):hover {
    background: #A2E8A2 !important;
    transform: translate3d(-54.5px, 25px, 50px) scale(1.1) !important;
}

/* Item 5 (Plein Gauche) au survol */
.gooey-menu-open-input:checked ~ .gooey-menu-item:nth-child(7):hover {
    background: #A2E8A2 !important;
    transform: translate3d(-60px, 0px, 50px) scale(1.1) !important;
}

/* ==========================================================================
   FORCE LE PREMIER PLAN DANS LE FILTRE SVG & PASSAGE AU BLEU PASTEL
   ========================================================================== */

/* 1. On prépare le conteneur à gérer la profondeur 3D */
.gooey-menu-container.top-right-squelette-anchor {
    perspective: 1000px !important;
    transform-style: preserve-3d !important;
}

/* 2. Règle générale au survol : Priorité maximale et couleur Bleu Pastel */
.gooey-menu-item:hover,
.gooey-menu-button:hover {
    z-index: 999999 !important;
    background: #AEC6CF !important; /* CORRECTION : Couleur Bleu Pastel au survol */
}

/* 3. COORDONNÉES DE SURVOL INDIVIDUELLES + POUSSÉE 3D + BLEU PASTEL */

/* Item 1 (Plein Bas) au survol */
.gooey-menu-open-input:checked ~ .gooey-menu-item:nth-child(3):hover {
    background: #AEC6CF !important;
    transform: translate3d(0px, 60px, 50px) scale(1.1) !important;
}

/* Item 2 (Diagonale Sud-Ouest) au survol */
.gooey-menu-open-input:checked ~ .gooey-menu-item:nth-child(4):hover {
    background: #AEC6CF !important;
    transform: translate3d(-25px, 54.5px, 50px) scale(1.1) !important;
}

/* Item 3 (Diagonale parfaite 45°) au survol */
.gooey-menu-open-input:checked ~ .gooey-menu-item:nth-child(5):hover {
    background: #AEC6CF !important;
    transform: translate3d(-42.5px, 42.5px, 50px) scale(1.1) !important;
}

/* Item 4 (Diagonale alternative) au survol */
.gooey-menu-open-input:checked ~ .gooey-menu-item:nth-child(6):hover {
    background: #AEC6CF !important;
    transform: translate3d(-54.5px, 25px, 50px) scale(1.1) !important;
}

/* Item 5 (Plein Gauche) au survol */
.gooey-menu-open-input:checked ~ .gooey-menu-item:nth-child(7):hover {
    background: #AEC6CF !important;
    transform: translate3d(-60px, 0px, 50px) scale(1.1) !important;
}

.gooey-menu-item:hover .goo-icon {
    filter: brightness(0) opacity(0.6) !important; /* L'icône passe en gris foncé transparent sur le vert */
}