/* --- 1. FONTS & IMPORTS --- */
/* On charge les graisses 300 (Light), 400 (Regular), 700 (Bold) et 900 (Black) pour Outfit */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;700;900&family=Pacifico&family=Patrick+Hand&display=swap');

/* --- 2. BASE & RESET --- */
/* Cache les éléments Alpine avant qu'ils ne soient chargés (évite le flash) */
[x-cloak] { display: none !important; }

html { 
    scroll-behavior: smooth; 
}

/* Le petit détail qui tue : la couleur de sélection du texte */
::selection {
    background-color: #9d788e; /* Apprendly Mauve */
    color: white;
}

/* --- 3. TYPOGRAPHIE MARQUE --- */
.font-brand { font-family: 'Pacifico', cursive; } /* Titres funs */
.font-hand { font-family: 'Patrick Hand', cursive; } /* Notes manuscrites */
.font-sans { font-family: 'Outfit', sans-serif; } /* Corps de texte propre */

/* --- 4. TEXTURES & AMBIANCE --- */
/* Effet "Papier d'art" subtil pour casser le blanc clinique */
.bg-grain {
    background-color: #fbfbfb;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
}

/* --- 5. VISIBILITÉ CALCULATEUR (Le "Moteur") --- */
/* Répond à : "Le moteur n'est pas très lisible" */
.calc-number {
    font-variant-numeric: tabular-nums; /* Les chiffres gardent la même largeur (pas de saut) */
    font-feature-settings: "tnum";
    letter-spacing: -0.05em; /* Resserre un peu pour l'impact */
    text-shadow: 0 4px 20px rgba(0,0,0,0.3); /* Ombre portée pour détacher du fond */
}

/* --- 6. ANIMATIONS SPÉCIFIQUES --- */

/* Badge Footer (Heartbeat) - Ne pas toucher, c'est ta signature */
@keyframes heartbeat {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(var(--client-rgb), 0); }
    50% { transform: scale(1.05); box-shadow: 0 0 20px rgba(var(--client-rgb), 0.3); border-color: var(--client-color); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(var(--client-rgb), 0); }
}
.animate-heartbeat { animation: heartbeat 3s infinite ease-in-out; }
.group:hover .animate-heartbeat { animation: none; }

/* Curseur Machine à Écrire (Typewriter) */
.cursor-blink {
    border-right: 3px solid #9d788e; /* Le curseur est Mauve */
    animation: blink 1s step-end infinite;
    padding-right: 4px; /* Espace entre le texte et le curseur */
}

@keyframes blink { 
    0%, 100% { border-color: #9d788e; } 
    50% { border-color: transparent; } 
}

/* --- 7. LAYOUT ULTRA WIDE --- */
/* Permet au contenu de respirer sur les écrans géants (> 1900px) */
.container-wide {
    width: 100%;
    max-width: 2000px;
    margin: 0 auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

@media (min-width: 768px) {
    .container-wide {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}