/* --- STYLES GÉNÉRAUX & TYPOGRAPHIE --- */
:where([class^="ri-"])::before { content: "\f3c2"; }
.rounded-button { border-radius: 8px !important; }

body { 
    font-family: 'Inter', sans-serif; 
    background-color: #f8fafc; 
    overflow-x: hidden; 
}

/* --- SECTIONS PRINCIPALES --- */
.hero-section { 
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%); 
}

.scroll-nav { 
    transition: all 0.3s ease; 
    background: rgba(255, 255, 255, 0.95); 
    backdrop-filter: blur(10px); 
}

.scroll-nav.scrolled { 
    background: white; 
    box-shadow: 0 2px 20px rgba(0,0,0,0.08); 
}

/* --- COMPOSANTS INTERACTIFS --- */
.accordion-content { 
    max-height: 0; 
    overflow: hidden; 
    transition: max-height 0.3s ease; 
}

.accordion-content.active { 
    max-height: 200px; 
}

.service-badge { 
    background: linear-gradient(135deg, #14B8A6 0%, #0d9488 100%); 
}

.rating-badge { 
    background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%); 
    border: 1px solid #e2e8f0; 
}

.stat-card { 
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); 
    border: 1px solid #e2e8f0; 
}

/* --- ANIMATIONS DE SPÉCIALITÉS --- */
.specialty-item { 
    opacity: 0; 
    transform: translateY(30px); 
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); 
}

.specialty-item.animate-in { 
    opacity: 1; 
    transform: translateY(0); 
}

.specialty-image { 
    transform: scale(1); 
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); 
}

.specialty-item:hover .specialty-image { 
    transform: scale(1.05); 
}

/* --- FOOTER & CONTACT (MIS À JOUR SELON L'IMAGE) --- */

/* Style des liens du footer pour effet de glissement */
footer a {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

footer a:hover {
    opacity: 1 !important;
}

/* Animation Onde WhatsApp (Cercle vert pulsant) */
@keyframes whatsappPulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6); }
  70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

.whatsapp-pulse-ring {
  animation: whatsappPulse 2s infinite;
}

/* Animation Attention Chat (Bouton orange pulsant) */
@keyframes attentionPulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.4); }
  70% { transform: scale(1.05); box-shadow: 0 0 0 12px rgba(255, 107, 53, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 107, 53, 0); }
}

.chat-attention-pulse {
  animation: attentionPulse 2s infinite;
}

/* --- DESIGN DU WIDGET CHAT SUPPORT --- */

#chat-messages::-webkit-scrollbar { 
    width: 3px; 
}

#chat-messages::-webkit-scrollbar-thumb { 
    background: #e2e8f0; 
    border-radius: 10px; 
}

.message-user {
  background: #14B8A6;
  color: white !important;
  align-self: flex-end;
  border-radius: 16px 16px 0 16px;
  box-shadow: 0 4px 12px rgba(20, 184, 166, 0.15);
}

/* Animation des barres de son pour l'interface de record vocal */
.audio-wave {
  display: flex;
  align-items: center;
  gap: 2px;
}

.wave-bar {
  width: 3px;
  height: 12px;
  background: currentColor;
  border-radius: 10px;
  animation: waveAnim 1s ease-in-out infinite;
}

@keyframes waveAnim {
  0%, 100% { height: 4px; }
  50% { height: 15px; }
}

/* --- BOUTONS D'ACTION (Compatibilité Talk with Us) --- */
#talk-with-us-btn { 
    background: linear-gradient(135deg, #FF6B35 0%, #FF4500 100%); 
    box-shadow: 0 8px 32px rgba(255, 107, 53, 0.4); 
}

@keyframes bounce-gentle { 
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 
    40% { transform: translateY(-4px); } 
    60% { transform: translateY(-2px); } 
}

.animate-bounce-gentle { 
    animation: bounce-gentle 2s ease-in-out infinite; 
}
  @keyframes bounce-slow {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
    }
    .animate-bounce-slow {
        animation: bounce-slow 4s infinite ease-in-out;
    }
    /* Animation spécifique pour cette section */
@keyframes pulse-slow {
    0%, 100% { transform: scale(1); box-shadow: 0 10px 15px -3px rgba(20, 184, 166, 0.3); }
    50% { transform: scale(1.05); box-shadow: 0 20px 25px -5px rgba(20, 184, 166, 0.4); }
}

.animate-pulse-slow {
    animation: pulse-slow 3s infinite ease-in-out;
}

/* Effet d'entrée AOS (si vous n'utilisez pas de bibliothèque, voici une alternative simple) */
[data-aos="fade-right"] {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 1s ease-out;
}

[data-aos="fade-left"] {
    opacity: 0;
    transform: translateX(50px);
    transition: all 1s ease-out;
}

.animate-in [data-aos] {
    opacity: 1;
    transform: translateX(0);
}
.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}
/* Animations d'entrée */
@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-50px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(50px); }
    to { opacity: 1; transform: translateX(0); }
}

.animate-fade-in-left { animation: fadeInLeft 1s ease-out forwards; }
.animate-fade-in-right { animation: fadeInRight 1s ease-out forwards; }

/* Effets flottants pour les badges */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes floatDelayed {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(10px); }
}

.animate-float { animation: float 4s infinite ease-in-out; }
.animate-float-delayed { animation: floatDelayed 5s infinite ease-in-out; }

/* Optimisation Mobile */
@media (max-width: 1024px) {
    .animate-float, .animate-float-delayed {
        animation: none; /* Désactive sur mobile pour éviter les bugs visuels */
    }
}
/* Animation d'entrée pour les cartes de service */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

/* Effet Hover Professionnel sur les cartes */
.service-card {
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.service-card:hover {
    transform: translateY(-8px);
}

/* Ombre douce personnalisée */
.hover\:shadow-xl:hover {
    box-shadow: 0 25px 50px -12px rgba(20, 184, 166, 0.08);
}
/* Animation d'apparition au défilement */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Délais cascade */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }

/* Ombre personnalisée au survol */
.hover\:shadow-2xl:hover {
    box-shadow: 0 25px 50px -12px rgba(20, 184, 166, 0.15);
}

/* Transition douce pour toutes les propriétés */
.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 500ms;
}
/* Animation d'apparition au scroll */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Badge flottant animé */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.animate-float {
    animation: float 4s infinite ease-in-out;
}

/* Bordure arrondie généreuse style "App" */
.rounded-40[px] {
    border-radius: 40px;
}

/* Effet de transition fluide pour les listes */
.transition-all {
    transition: all 0.3s ease-in-out;
}

/* Pulse pour le bouton d'urgence */
@keyframes pulse-red {
    0% { box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(255, 107, 53, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 107, 53, 0); }
}
.animate-pulse {
    animation: pulse-red 2s infinite;
}
/* Animation au défilement */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Badge flottant animé */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.animate-float {
    animation: float 4s infinite ease-in-out;
}

/* Coins arrondis style Apple */
.rounded-40[px] {
    border-radius: 40px;
}
/* Animation d'apparition au défilement */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Ombre portée Premium lors du hover */
.hover\:shadow-2xl:hover {
    box-shadow: 0 40px 60px -15px rgba(20, 184, 166, 0.1);
}

/* Délais cascade pour les 6 cartes */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
/* --- ANIMATIONS DE SURVOL PORTFOLIO --- */

/* Conteneur de la carte : Elévation et ombre profonde */
.group.bg-white {
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1); /* Transition fluide pour le mouvement */
    will-change: transform, box-shadow;
}

.group.bg-white:hover {
    transform: translateY(-15px) scale(1.02); /* Soulève la carte et l'agrandit légèrement */
    box-shadow: 0 40px 60px -15px rgba(20, 184, 166, 0.15); /* Ombre portée douce couleur Teal */
    z-index: 10; /* Assure que la carte passe au-dessus des autres lors du zoom */
}

/* Effet sur l'image : Zoom intérieur immersif */
.group .overflow-hidden img {
    transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1); /* Zoom très fluide et lent */
}

.group:hover .overflow-hidden img {
    transform: scale(1.15); /* L'image vient vers l'utilisateur */
}

/* Animation du Badge : Pulsation légère au survol */
.group:hover span.absolute {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}

/* Transition du texte : Changement de couleur du titre */
.group:hover h3 {
    color: #14B8A6; /* Le titre passe au Teal lors du survol de la carte */
    transition: color 0.3s ease;
}
/* Animation d'apparition scroll */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Effets de survol Team Card */
.group:hover .shadow-2xl {
    box-shadow: 0 50px 80px -20px rgba(0, 0, 0, 0.2);
}

/* Délais cascade */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }

/* Arrondis généreux pour la bannière CTA */
.rounded-\[40px\] {
    border-radius: 40px;
}
/* Animation d'entrée Scroll */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Effets de survol pro pour les cartes de témoignages */
#temoignages .bg-white {
    transition: all 0.4s ease;
    will-change: transform, box-shadow;
}

#temoignages .bg-white:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 50px -10px rgba(20, 184, 166, 0.12);
}

/* Délais cascade pour les 6 cartes */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
/* Animations directionnelles */
.reveal-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-right {
    opacity: 0;
    transform: translateX(50px);
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active, .reveal-left.active, .reveal-right.active {
    opacity: 1;
    transform: translate(0);
}

/* Badge flottant */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.animate-float {
    animation: float 3s infinite ease-in-out;
}

/* Bouton spécial Vert WhatsApp */
.shadow-green-200:hover {
    box-shadow: 0 20px 40px -10px rgba(37, 211, 102, 0.4);
}
/* --- NOUVELLES ANIMATIONS --- */

/* Animation Zoom-In pour l'image */
.reveal-zoom {
    opacity: 0;
    transform: scale(0.8);
    transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Animation Slide-In depuis la droite pour le texte */
.reveal-slide-right {
    opacity: 0;
    transform: translateX(80px);
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.active.reveal-zoom, .active.reveal-slide-right {
    opacity: 1;
    transform: translate(0) scale(1);
}

/* Rotation douce infinie du macaron */
@keyframes soft-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.animate-soft-rotate {
    animation: soft-rotate 20s linear infinite;
}

/* Arrondis extrêmes (3rem) pour un look "App" moderne */
.rounded-\[3rem\] {
    border-radius: 3rem;
}
/* Animation d'apparition au défilement */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Coins arrondis extrêmes style modern-app */
.rounded-\[40px\] {
    border-radius: 40px;
}

/* Effets de transition globale */
.transition-all {
    transition: all 0.3s ease-in-out;
}

/* Animation de flottement pour les badges si besoin */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}
/* Personnalisation des polices si vous n'utilisez pas Tailwind complet */
#intervention-paris h2 {
    font-family: 'Inter', sans-serif; /* Ou la police que vous utilisez sur le site */
}

/* Ombre portée douce comme sur l'image */
#intervention-paris .shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Animation au survol des boutons */
#intervention-paris a {
    transition: transform 0.2s ease-in-out, background-color 0.3s ease;
}

#intervention-paris a:hover {
    transform: translateY(-2px);
}
/* Animation au survol des cartes */
#zones-intervention .group {
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

#zones-intervention .group:hover {
    box-shadow: 0 25px 50px -12px rgba(20, 184, 166, 0.15);
}

/* Animations d'entrée */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.reveal-up {
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s ease-out;
}

.reveal.active, .reveal-up.active {
    opacity: 1;
    transform: translateY(0);
}

/* Animation de pulsation pour le badge orange */
@keyframes pulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.7); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(255, 107, 53, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 107, 53, 0); }
}

.animate-pulse {
    animation: pulse 2s infinite;
}

/* Styles pour les ombres et arrondis pro */
.shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
}

.rounded-\[2\.5rem\] {
    border-radius: 2.5rem;
}

/* Animations de révélation (nécessite le JS habituel) */
.reveal, .reveal-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.reveal.active, .reveal-up.active {
    opacity: 1;
    transform: translateY(0);
}
/* Style pour la typographie épaisse style 2025 */
.font-black {
    font-weight: 900;
}

/* Effets de survol pour les cartes témoignages */
.transition-all {
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Icônes étoiles (Orange vif) */
.ri-star-fill {
    margin-right: 2px;
}

/* Animations de révélation (Scroll reveal) */
.reveal, .reveal-up {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s ease-out;
}

.reveal.active, .reveal-up.active {
    opacity: 1;
    transform: translateY(0);
}

/* Espacement spécifique pour les labels de statistiques */
.tracking-widest {
    letter-spacing: 0.1em;
}
/* Animation de rebond doux pour le badge orange */
@keyframes bounce-slow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.animate-bounce-slow {
    animation: bounce-slow 3s infinite ease-in-out;
}

/* Ombre spécifique pour le bouton vert WhatsApp */
.shadow-green-100 {
    box-shadow: 0 15px 30px -10px rgba(37, 211, 102, 0.4);
}

/* Transition pro pour les cartes en Glassmorphism */
.reveal-up {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-up.active {
    opacity: 1;
    transform: translateY(0);
}

/* Arrondis conformes aux images (40px) */
.rounded-\[2\.5rem\] {
    border-radius: 2.5rem;
}
/* Couleurs de la marque */
.bg-\[\#14B8A6\] { background-color: #14B8A6; } /* Teal FenetrePro */
.text-\[\#14B8A6\] { color: #14B8A6; }
.bg-\[\#25D366\] { background-color: #25D366; } /* Vert WhatsApp */

/* Typographie */
.font-black { font-weight: 900; }

/* Arrondis */
.rounded-3xl { border-radius: 1.5rem; }
.rounded-full { border-radius: 9999px; }

/* Animations de révélation */
.reveal, .reveal-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.reveal.active, .reveal-up.active {
    opacity: 1;
    transform: translateY(0);
}

/* Suppression des décorations de liens par défaut */
.no-underline { text-decoration: none !important; }

/* Styles pour l'accordéon */
.faq-item.active {
    background-color: #FBFDFF;
    border-color: #E8F8F7;
}

.faq-item.active .faq-icon {
    background-color: #14B8A6;
    color: white;
    transform: rotate(45deg); /* Transforme le + en x ou tourne simplement */
}

.faq-icon {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.faq-answer {
    animation: slideDown 0.4s ease-out forwards;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Animations de révélation */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}