/* Global utility classes */

/* Hides the scrollbar for elements like the testimonials carousel */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.hide-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

/* Modal styles */
body.modal-open {
  overflow: hidden;
}

.modal {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal.active {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  transform: scale(0.95);
  transition: transform 0.3s ease;
}

.modal.active .modal-content {
  transform: scale(1);
}

/* Active tab style */
.journey-tab.active {
    color: #3b82f6; /* text-blue-500 */
    border-bottom: 2px solid #3b82f6;
}

/* Scroll-to-top button visibility */
.scroll-to-top {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.scroll-to-top.visible {
  opacity: 1;
  visibility: visible;
}

/* 1. Définition des étapes de l'animation (les keyframes) */
@keyframes profile__animate {
    0% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }

    50% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }

    100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
}

/* 2. Création de la classe pour appliquer l'animation au logo */
.animated-logo {
    /* Assure que l'image occupe toute la place du conteneur (w-72 h-72) */
    width: 100%;
    height: 100%;
    /* Garantit que l'image remplisse la forme animée sans être déformée */
    object-fit: cover; 
    display: block;

    /* Démarrage de l'animation pour un aspect fluide dès le chargement */
    /* Assurez-vous que le border-radius initial corresponde au 0% */
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;

    /* Application de l'animation */
    animation: profile__animate 8s ease-in-out infinite;

    /* Ajout du box-shadow comme demandé (la bordure "intérieure" blanche) */
    box-shadow: inset 0 0 0 9px rgba(255, 255, 255, 0.3);
}

/* --- LE ROND BLEU TRANSPARENT ANIME (le ::before) --- */
.animated-logo-container::before {
    content: ''; /* Obligatoire pour les pseudo-éléments */
    
    /* Le rond doit être légèrement plus grand (ex: 110% de la taille du conteneur) */
    width: 110%; 
    height: 110%;
    
    /* Positionnement et couleur */
    position: absolute;
    top: -5%; /* Centre le rond de 110% */
    left: -5%; /* Centre le rond de 110% */
    
    /* Couleur Bleue avec Transparence */
    /* Ex: #007bff est un bleu, 0.4 est une opacité de 40% (ajustez si besoin) */
    background-color: rgba(0, 123, 255, 0.4); 
    
    /* Démarrage de l'animation */
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    animation: profile__animate 8s ease-in-out infinite;
    
    z-index: 1; /* S'assure qu'il est en dessous de l'image (z-index: 2) */
}

/* Désactive la barre de défilement visuelle pour les carousels */
#logo-scroller, #testimonials-scroller {
  overflow-x: hidden !important; /* Force la disparition de la barre */
  cursor: grab;
  user-select: none; /* Empêche de sélectionner les textes en glissant */
  scroll-behavior: auto !important; /* Important pour la fluidité du JS */
}

#logo-scroller:active, #testimonials-scroller:active {
  cursor: grabbing;
}