@import "tailwindcss";
@source "../../templates";
@source "../../src";
@import "./adminApp.css";

@theme {
  --color-red-400: oklch(70.5% 0.213 47.604);
  --color-red-500: oklch(70.5% 0.213 47.604);
  --color-red-600: oklch(70.5% 0.213 47.604);
  --color-red-700: oklch(70.5% 0.213 47.604);
}

@layer utilities {
    /* =========================================
       UTILITAIRES
       ========================================= */
    .no-scrollbar {
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }
    .no-scrollbar::-webkit-scrollbar {
        display: none; /* Chrome, Safari and Opera */
    }
}

@layer components {
    /* --- Base Layout --- */
    .app-body {
        @apply bg-gray-950 text-gray-300 font-sans min-h-screen flex flex-col w-full overflow-x-hidden;
    }
    .main-content {
        @apply flex-grow w-full container mx-auto px-4 py-8;
    }

    /* --- Navbar --- */
    .navbar {
        @apply bg-gray-900 shadow-md sticky top-0 z-50 border-b border-gray-800 relative w-full;
    }
    .navbar-container {
        @apply container mx-auto px-4 h-16 flex items-center justify-between relative z-50 bg-gray-900;
    }
    .navbar-logo {
        @apply text-xl md:text-2xl font-black text-red-600 hover:text-red-500 transition-colors tracking-tight;
    }
    
    /* Hamburger Mobile (JS Controlled) */
    .navbar-hamburger {
        @apply md:hidden cursor-pointer text-gray-300 hover:text-red-500 transition-colors min-h-[48px] min-w-[48px] flex items-center justify-center -mr-2 bg-transparent border-none;
    }

    /* Menu de Navigation */
    .navbar-menu {
        @apply hidden md:flex flex-col md:flex-row items-center md:gap-8 absolute md:relative top-16 md:top-0 left-0 w-full md:w-auto bg-gray-900 md:bg-transparent shadow-xl md:shadow-none p-6 md:p-0 border-b md:border-none border-gray-800 transition-all duration-300 ease-in-out;
    }
    .navbar-menu.is-open {
        @apply flex;
    }
    .navbar-link {
        @apply text-base md:text-sm font-medium text-gray-400 hover:text-white transition-colors min-h-[48px] md:min-h-0 inline-flex items-center justify-center md:justify-start w-full md:w-auto relative gap-2;
    }
    .navbar-link::after {
        content: '';
        @apply absolute left-0 bottom-1 md:-bottom-1 w-0 h-[2px] bg-red-600 transition-all duration-300;
    }
    .navbar-link:hover::after {
        @apply w-full;
    }

    /* --- Composants réutilisables --- */
    .btn-primary {
        @apply inline-flex items-center justify-center w-fit bg-red-600 text-white px-6 py-2.5 rounded-full text-sm font-bold shadow-md hover:bg-red-700 hover:shadow-lg transition-all transform hover:-translate-y-0.5;
    }
    .btn-secondary {
        @apply bg-transparent border-2 border-gray-700 text-white px-6 py-2.5 rounded-full text-sm font-bold hover:border-gray-500 hover:bg-gray-800 transition-all transform hover:-translate-y-0.5 flex items-center justify-center;
    }
    .btn-hero {
        @apply bg-red-600 text-white px-10 py-4 md:px-12 md:py-5 rounded-full text-lg md:text-xl font-black shadow-lg hover:bg-red-700 hover:shadow-xl transition-all transform hover:-translate-y-1 flex items-center justify-center w-full sm:w-auto;
    }

    /* =========================================
       HERO SECTION 
       ========================================= */
    .hero-section {
        @apply relative w-full overflow-hidden py-12 md:py-20 lg:py-24;
    }
    .hero-container {
        @apply container mx-auto px-4 flex flex-col-reverse lg:flex-row items-center gap-12 lg:gap-8;
    }
    .hero-content {
        @apply flex-1 flex flex-col items-center lg:items-start text-center lg:text-left z-10;
    }
    .hero-title {
        @apply text-4xl md:text-5xl lg:text-6xl font-black text-white leading-tight md:leading-tight lg:leading-tight mb-6 tracking-tight;
    }
    .hero-subtitle {
        @apply text-base md:text-lg text-gray-400 mb-8 max-w-2xl leading-relaxed;
    }
    .hero-actions {
        @apply flex flex-col sm:flex-row gap-4 w-full justify-center lg:justify-start mt-6;
    }
    .hero-image-wrapper {
        @apply flex-1 w-full max-w-md lg:max-w-none relative;
        perspective: 1000px;
    }
    .hero-image {
        @apply w-full h-auto object-cover transform-gpu hover:scale-105 transition-transform duration-700 ease-out;
        animation: float 6s ease-in-out infinite;
    }

    @keyframes float {
        0% { transform: translateY(0px) rotateX(5deg) rotateY(-5deg); }
        50% { transform: translateY(-20px) rotateX(0deg) rotateY(0deg); }
        100% { transform: translateY(0px) rotateX(5deg) rotateY(-5deg); }
    }

    /* =========================================
       MEGA FOOTER 
       ========================================= */
    .mega-footer {
        @apply bg-gray-900 text-gray-300 pt-12 mt-auto border-t-4 border-red-600 overflow-hidden w-full;
    }
    .mega-footer-content {
        @apply container mx-auto px-4 flex flex-col md:grid md:grid-cols-12 gap-10 lg:gap-12;
    }
    
    /* Ordre Responsive (Mobile First) */
    .mf-newsletter { @apply order-1 md:order-none md:col-span-12 lg:col-span-4 flex flex-col gap-4; }
    .mf-contact    { @apply order-2 md:order-none md:col-span-5 lg:col-span-3 flex flex-col gap-4; }
    .mf-nav        { @apply order-3 md:order-none md:col-span-7 lg:col-span-5 flex flex-col md:flex-row gap-4 md:gap-8 justify-between; }
    .mf-socials    { @apply order-4 md:order-none md:col-span-12 lg:col-span-12 flex flex-col gap-4 lg:mt-6; }
    
    /* Typographie */
    .mf-title {
        @apply text-white text-base md:text-lg font-bold tracking-wide uppercase mb-1 md:mb-3;
    }
    .mf-text {
        @apply text-xs md:text-sm text-gray-400 leading-relaxed;
    }
    
    /* Newsletter Form */
    .mf-form {
        @apply flex flex-col sm:flex-row gap-3 w-full relative mt-2;
    }
    .mf-input {
        @apply w-full bg-gray-800 border border-gray-700 text-white rounded-lg px-4 py-3 min-h-[48px] focus:outline-none focus:border-red-500 focus:ring-1 focus:ring-red-500 transition-colors;
    }
    .mf-btn-submit {
        @apply bg-red-600 hover:bg-red-700 text-white font-bold rounded-lg px-6 py-3 min-h-[48px] transition-all shadow-md flex items-center justify-center whitespace-nowrap;
    }
    .mf-rgpd {
        @apply text-xs text-gray-500 mt-2 leading-relaxed;
    }

    /* Contact */
    .mf-address {
        @apply not-italic flex flex-col gap-1;
    }
    .mf-contact-link {
        @apply flex items-start text-gray-400 hover:text-white transition-colors py-3 md:py-2 min-h-[48px] md:min-h-0 text-sm;
    }
    .mf-contact-icon {
        @apply w-5 h-5 mr-3 flex-shrink-0 text-red-500 transition-colors mt-0.5;
    }
    .mf-contact-link:hover .mf-contact-icon {
        @apply text-red-400;
    }

    /* Accordéon CSS (Nav) */
    .mf-accordion {
        @apply flex flex-col border-b border-gray-800 md:border-none w-full;
    }
    .mf-accordion-toggle {
        @apply hidden; /* Cache la checkbox qui sert de trigger */
    }
    .mf-accordion-label {
        @apply flex items-center justify-between text-white font-bold py-4 min-h-[48px] cursor-pointer md:cursor-default md:pointer-events-none md:pb-4 md:pt-0 uppercase text-sm tracking-wide;
    }
    .mf-accordion-arrow {
        @apply w-5 h-5 transition-transform duration-300 md:hidden text-red-500;
    }
    .mf-accordion-content {
        @apply max-h-0 opacity-0 overflow-hidden transition-all duration-500 ease-in-out md:max-h-[500px] md:opacity-100 flex flex-col gap-1;
    }
    
    /* Liens généraux */
    .mf-link {
        @apply text-gray-400 hover:text-white transition-colors inline-flex items-center py-3 md:py-1.5 min-h-[48px] md:min-h-0 text-[14px] md:text-sm gap-2 relative w-fit;
    }
    .mf-link::after {
        content: '';
        @apply absolute left-0 bottom-2 md:bottom-0 w-0 h-[2px] bg-red-600 transition-all duration-300;
    }
    .mf-link:hover::after {
        @apply w-full;
    }

    /* Réseaux Sociaux */
    .mf-social-grid {
        @apply flex flex-wrap gap-4 mt-2;
    }
    .mf-social-icon {
        @apply flex items-center justify-center w-12 h-12 md:w-10 md:h-10 rounded-full bg-gray-800 text-gray-400 hover:bg-red-600 hover:text-white transition-all duration-300 transform hover:-translate-y-1 hover:shadow-[0_0_15px_oklch(70.5%_0.213_47.604_/_0.5)];
    }

    /* Bottom (Mentions légales & Copyright) */
    .mf-bottom {
        @apply mt-10 md:mt-16 border-t border-gray-800 bg-gray-950 py-6 md:py-8;
    }
    .mf-bottom-container {
        @apply container mx-auto px-4 flex flex-col md:flex-row justify-between items-center gap-6;
    }
    .mf-legal-links {
        @apply flex flex-wrap justify-center md:justify-start gap-x-6 gap-y-2;
    }
    .mf-legal-links .mf-link {
        @apply text-sm text-gray-500 hover:text-white py-2 min-h-[48px] md:min-h-0 md:py-0 hover:translate-x-0;
    }
    .mf-copyright {
        @apply text-center md:text-right text-sm text-gray-500 flex flex-col gap-1.5;
    }
    .mf-ip {
        @apply text-xs text-gray-600 italic;
    }

    /* =========================================
       AUTHENTICATION & FORMS
       ========================================= */
    .auth-section {
        @apply flex-grow flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 relative w-full;
    }
    .auth-card {
        @apply max-w-md w-full bg-gray-900 border border-gray-800 rounded-2xl shadow-2xl p-8 space-y-6 relative z-10;
    }
    .auth-header {
        @apply text-center mb-8;
    }
    .auth-title {
        @apply text-3xl font-black text-white tracking-tight;
    }
    .auth-subtitle {
        @apply mt-2 text-sm text-gray-400;
    }
    .form-group {
        @apply flex flex-col gap-2;
    }
    .form-label {
        @apply block text-sm font-bold text-gray-300;
    }
    .form-input {
        @apply appearance-none block w-full px-4 py-3 bg-gray-950 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-red-600 focus:border-transparent transition-colors sm:text-sm;
    }
    .form-input-error {
        @apply border-red-500 focus:ring-red-500;
    }
    .form-error-message {
        @apply text-xs text-red-500 font-medium mt-1;
    }
    .form-checkbox-container {
        @apply flex items-start gap-3;
    }
    .form-checkbox {
        @apply h-5 w-5 bg-gray-950 border-gray-700 rounded text-red-600 focus:ring-red-600 focus:ring-offset-gray-900 transition-colors cursor-pointer;
    }
    .form-checkbox-label {
        @apply text-sm text-gray-400 cursor-pointer;
    }
    .auth-link {
        @apply text-sm font-medium text-red-500 hover:text-red-400 transition-colors relative inline-flex items-center;
    }
    .auth-link::after {
        content: '';
        @apply absolute left-0 -bottom-1 w-0 h-[2px] bg-red-600 transition-all duration-300;
    }
    .auth-link:hover::after {
        @apply w-full;
    }
    .auth-divider {
        @apply flex items-center my-6;
    }
    .auth-divider-line {
        @apply flex-grow border-t border-gray-800;
    }
    .auth-divider-text {
        @apply px-4 text-xs font-bold text-gray-500 uppercase tracking-wider;
    }
    .auth-alert {
        @apply p-4 rounded-lg bg-red-500/10 border border-red-500/20 text-red-400 text-sm flex items-center gap-3;
    }

    /* =========================================
       TOASTS NOTIFICATIONS
       ========================================= */
    .toast-container {
        @apply fixed bottom-4 right-4 z-[100] flex flex-col gap-3 pointer-events-none;
    }
    .toast {
        @apply flex items-center gap-3 px-4 py-3 rounded-lg shadow-lg border text-sm font-medium transform transition-all duration-500 pointer-events-auto max-w-sm w-full;
        animation: slideInUp 0.3s ease-out forwards;
    }
    .toast-success {
        @apply bg-gray-900 border-green-500/30 text-green-400;
    }
    .toast-error {
        @apply bg-gray-900 border-red-500/30 text-red-400;
    }
    .toast-icon {
        @apply flex-shrink-0 w-5 h-5;
    }
    
    @keyframes slideInUp {
        from { transform: translateY(100%); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }
}