/* ——— TAILWINDCSS v4 ——— */


/* --------------------------------------------------------------------
   TAILWIND THEME (v4)
   → Un SEUL @theme : génère bg-yakari-red, text-yakari-brown, font-display, etc.
-------------------------------------------------------------------- */
@theme {
    /* Fonts Tailwind */
    --font-sans: "Inter", system-ui, sans-serif;
    --font-display: "Playfair Display", Georgia, serif;

    /* Couleurs Yakari utilisables en Tailwind */
    --color-yakari-red:    #d84a3d;
    --color-yakari-blue:   #b7d9e8;
    --color-yakari-yellow: #fff2b0;
    --color-yakari-beige:  #fdf6e3;
    --color-yakari-brown:  #6b4c2f;
    --color-yakari-dark:   #1a1a1a;
    --color-yakari-accent: #ffd84f;
    --color-yakari-white:  #ffffff;

    --color-galop-1-2: #e6f0ff;
    --color-galop-2-3: #dce9ff;
    --color-galop-3-4: #d1f7ff;
    --color-galop-4-5: #fff4cc;
    --color-galop-6-7: #ffe8d1;
    --color-poney-1-2: #ffe1ee;
    --color-balade: #e4ffe1;
    --color-adulte: #ffe1e1;
    --color-activite-neutre: #ffffff;

    --color-border: #6b4c2f22;
}

/* --------------------------------------------------------------------
   TOKENS CSS PERSO (var(--yakari-red)) — indépendants du theme Tailwind
-------------------------------------------------------------------- */
:root {
    --yakari-red:   #d84a3d;
    --yakari-beige: #fdf6e3;
    --yakari-brown: #6b4c2f;
}

/* --------------------------------------------------------------------
   FONTS
-------------------------------------------------------------------- */
html {
    font-family: Inter, system-ui, sans-serif;
}

@font-face {
    font-family: "Inter";
    src: url("/fonts/inter-500.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: "Inter";
    src: url("/fonts/inter-600.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: "Playfair Display";
    src: url("/fonts/playfair-700.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: "Playfair Display";
    src: url("/fonts/playfair-800.woff2") format("woff2");
    font-weight: 800;
    font-display: swap;
}

/* ---------------------------------------------
   COMPONENTS
--------------------------------------------- */
@layer components {

    .section-title {
        @apply text-3xl md:text-4xl font-display text-yakari-brown mb-6 tracking-wide;
    }

    .section-text {
        @apply text-lg text-yakari-dark/80 leading-relaxed;
    }

    .menu-header-contents {
        @apply text-lg text-yakari-red;
    }

    .shadow-soft {
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    }

    .shadow-soft-lg {
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
    }
}

/* ---------------------------------------------
   UTILITIES
--------------------------------------------- */
@layer utilities {

    /* Couleurs perso en utilitaires */
    .text-yakari-red { color: var(--yakari-red); }
    .text-yakari-brown { color: var(--yakari-brown); }
    .bg-yakari-beige { background-color: var(--yakari-beige); }

    /* Bouton rouge perso */
    .bg-yakari-red {
        background-color: var(--yakari-red);
    }
    .hover-bg-yakari-red-dark:hover {
        background-color: #b43d33;
    }

    /* Animations */
    @keyframes fadeUp {
        0% { opacity: 0; transform: translateY(30px); }
        100% { opacity: 1; transform: translateY(0); }
    }
    .animate-fade-in-up {
        animation: fadeUp .8s ease-out both;
    }

    /* Alpine cloak */
    [x-cloak] { display: none !important; }

     /* Animation "float" avec préfixes pour compatibilité */
    @-webkit-keyframes float {
        0%, 100% { -webkit-transform: translateY(0); }
        50% { -webkit-transform: translateY(-15px); }
    }
    @-moz-keyframes float {
        0%, 100% { -moz-transform: translateY(0); }
        50% { -moz-transform: translateY(-15px); }
    }
    @keyframes float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-15px); }
    }

    /* Classes d'animation */
    .animate-float-slow {
        -webkit-animation: float 5s ease-in-out infinite;
        -moz-animation: float 5s ease-in-out infinite;
        animation: float 5s ease-in-out infinite;
        will-change: transform; /* Optimisation pour les navigateurs modernes */
    }
    .animate-float-medium {
        -webkit-animation: float 7s ease-in-out infinite;
        -moz-animation: float 7s ease-in-out infinite;
        animation: float 7s ease-in-out infinite;
        will-change: transform;
    }
    .animate-float-slower {
        -webkit-animation: float 9s ease-in-out infinite;
        -moz-animation: float 9s ease-in-out infinite;
        animation: float 9s ease-in-out infinite;
        will-change: transform;
    }
}

/* ---------------------------------------------
   BASE STYLES
--------------------------------------------- */
@layer base {
    a, button {
        transition: all .25s ease-in-out;
    }
}