@charset "UTF-8";

/**
 * Fichier CSS principal pour le site public de Yumi
 *
 * Design system basé sur l'application Lovable.
 *
 * @package    Yumi
 * @author     Claude Code
 * @copyright  2025 Yumi
 * @date       2024-12-31
 */

/* ==========================================
   VARIABLES CSS - DESIGN SYSTEM YUMI
   Aligné sur la maquette Lovable (https://yumiapp.lovable.app)
   Aucun gris : palette chaude crème / rose / pêche / mauve.
   ========================================== */
:root {
    /* Couleurs de base — fond crème chaud, texte mauve foncé */
    --background: 25 25% 98%;        /* ≈ #FBFAF9 */
    --foreground: 340 15% 25%;       /* ≈ #49363D mauve foncé */

    --popover: 0 0% 100%;
    --popover-foreground: 340 15% 25%;

    /* Couleurs de marque YUMI */
    --primary: 345 85% 65%;          /* ≈ #F25A80 rose corail */
    --primary-foreground: 0 0% 100%;

    --secondary: 20 100% 85%;        /* pêche très clair */
    --secondary-foreground: 340 15% 25%;

    --muted: 25 20% 95%;             /* crème pâle */
    --muted-foreground: 340 10% 50%; /* ≈ #8C737B mauve doux (jamais gris) */

    --accent: 15 90% 70%;            /* ≈ #F7906E pêche */
    --accent-foreground: 0 0% 100%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 25 15% 90%;            /* bordure crème */
    --input: 25 15% 90%;
    --ring: 345 85% 65%;

    --radius: 0.8rem;

    /* Tokens de statut */
    --success: 142 72% 35%;
    --success-foreground: 144 70% 96%;
    --warning: 28 90% 55%;
    --warning-foreground: 28 100% 10%;

    /* Palette du cycle menstruel */
    --cycle-menstruations: 24 92% 55%; /* orange */
    --cycle-folliculaire: 330 75% 65%; /* pink */
    --cycle-ovulation: 50 96% 52%; /* yellow */
    --cycle-luteale: 199 89% 70%; /* sky blue */

    /* Effets spéciaux */
    --gradient-hero: linear-gradient(90deg, hsl(var(--primary)) 0%, hsl(var(--accent)) 100%);
    --shadow-soft: 0 12px 40px -12px hsl(var(--primary) / 0.35);
    --transition-smooth: 300ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Typographie — Inter pour tout, comme Lovable */
    --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-title: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --bg-color-hero: hsl(var(--background));
}

/* ==========================================
   STYLES DE BASE
   ========================================== */
* {
    border-color: hsl(var(--border));
}

body {
    font-family: var(--font-family-base);
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-size: 16px;
    line-height: 1.6;
}

/* ==========================================
   TYPOGRAPHIE
   - Pas de taille forcée ici : ce sont les classes Tailwind
     (text-4xl, text-5xl, etc.) qui pilotent les tailles sur
     chaque page, en particulier la home alignée sur Lovable.
   - Les pages qui ne fournissent pas de classe Tailwind tombent
     sur des valeurs de repli raisonnables ci-dessous (sélecteur
     `:where()` pour avoir une spécificité 0 et ne jamais
     surclasser une classe utilitaire).
   ========================================== */
h1, h2, h3, h4, .title {
    font-family: var(--font-title);
    font-weight: 700;
    color: hsl(var(--foreground));
}

:where(h1):not([class*="text-"]) { font-size: 42px; }
:where(h2):not([class*="text-"]) { font-size: 32px; }
:where(h3):not([class*="text-"]) { font-size: 26px; }
:where(h4):not([class*="text-"]) { font-size: 24px; }
:where(h5):not([class*="text-"]) { font-size: 21px; }
:where(h6):not([class*="text-"]) { font-size: 18px; }

/* ==========================================
   ANIMATION DU GRADIENT HERO
   ========================================== */
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.animate-gradient {
    animation: gradient 8s ease infinite;
}

/* ==========================================
   CLASSES UTILITAIRES - COULEURS
   ========================================== */
.text-primary {
    color: hsl(var(--primary));
}

.bg-primary {
    background-color: hsl(var(--primary));
}

.bg-secondary {
    background-color: hsl(var(--secondary));
}

.text-secondary-foreground {
    color: hsl(var(--secondary-foreground));
}

.text-muted-foreground {
    color: hsl(var(--muted-foreground));
}

.border-border {
    border-color: hsl(var(--border));
}

.hover\:opacity-90:hover {
    opacity: 0.9;
}

/* ==========================================
   HERO SECTION
   ========================================== */
section.hero-section {
    background: var(--gradient-hero);
}

/* ==========================================
   TAGLINE APP
   ========================================== */
.yu-app-tagline {
    padding: 2px 9px;
    background: #f3effb;
    border-radius: 18px;
    font-size: 0.743rem;
    display: none;
    margin-left: 8px;
    color: #374151;
}

/* Afficher le tagline uniquement sur écrans >= 1024px */
@media (min-width: 1024px) {
    .yu-app-tagline {
        display: inline-block;
    }
}

/* ==========================================
   NAVIGATION PUBLIQUE
   ========================================== */
nav a {
    white-space: nowrap;
}

/* ==========================================
   PAGES D'AUTHENTIFICATION - LIENS
   ========================================== */
.auth-terms-text a {
    color: hsl(var(--primary));
    font-weight: 700;
}

.auth-terms-text a:hover {
    opacity: 0.8;
}