@import 'tailwindcss';
@plugin 'tailwindcss-animate';

/* Portée du scan */
@source '../views';
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';

/* Variant dark sur root .dark */
@custom-variant dark (&:is(.dark *));

/* ================================
   PALETTE & TOKENS (BRAND ESOFT)
   ================================ */

/*
  NOTE IMPORTANTE :
  - J’ai supprimé les doublons de :root/.dark (ta section "css depuis tweekcn")
    qui écrasaient tes couleurs.
  - Ce bloc est désormais l’unique source de vérité.
*/


@import "@fontsource-variable/inter";


@theme {
    --font-sans:
        "Inter Variable", Inter, ui-sans-serif, system-ui, sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --radius-lg: var(--radius);
    --radius-md: calc(var(--radius) - 2px);
    --radius-sm: calc(var(--radius) - 4px);

    /* Mappings shadcn/tailwind -> CSS vars locales */
    --color-background: var(--background);
    --color-foreground: var(--foreground);

    --color-card: var(--card);
    --color-card-foreground: var(--card-foreground);

    --color-popover: var(--popover);
    --color-popover-foreground: var(--popover-foreground);

    --color-primary: var(--primary);
    --color-primary-foreground: var(--primary-foreground);

    --color-secondary: var(--secondary);
    --color-secondary-foreground: var(--secondary-foreground);

    --color-muted: var(--muted);
    --color-muted-foreground: var(--muted-foreground);

    --color-accent: var(--accent);
    --color-accent-foreground: var(--accent-foreground);

    --color-destructive: var(--destructive);
    --color-destructive-foreground: var(--destructive-foreground);

    --color-border: var(--border);
    --color-input: var(--input);
    --color-ring: var(--ring);

    --color-chart-1: var(--chart-1);
    --color-chart-2: var(--chart-2);
    --color-chart-3: var(--chart-3);
    --color-chart-4: var(--chart-4);
    --color-chart-5: var(--chart-5);

    --color-sidebar: var(--sidebar);
    --color-sidebar-foreground: var(--sidebar-foreground);
    --color-sidebar-primary: var(--sidebar-primary);
    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
    --color-sidebar-accent: var(--sidebar-accent);
    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
    --color-sidebar-border: var(--sidebar-border);
    --color-sidebar-ring: var(--sidebar-ring);
}

/* =========
   BRAND VARS
   ========= */
:root {

    --brand-text: #374151;
    /* Couleurs marque ESoft (mode clair) */
    --brand-red: #E31C1C;
    /* CTA, accents */
    --brand-red-600: #B51515;
    /* Hover CTA */
    --brand-navy: #213147;
    /* Bleu marine - Texte pro & labels */
    --brand-navy-light: #2D4563;
    /* Variante claire */
    --brand-dark: #05192d;
    /* Noir profond - Titres & texte important */
    --ink: #1B1B18;
    /* Texte principal */
    --ink-soft: #2C2C28;
    /* Texte fort secondaire */
    --muted-text: #706F6C;
    /* Texte secondaire */
    --border-NEU: #E3E3E0;
    /* Bordures, inputs */
    --bg-app: #FDFDFC;
    /* Fond global */

    /* Tokens shadcn */
    --background: var(--bg-app);
    --foreground: var(--ink);

    --card: #FFFFFF;
    --card-foreground: var(--ink);

    --popover: #FFFFFF;
    --popover-foreground: var(--ink);

    --primary: var(--brand-red);
    --primary-foreground: #FFFFFF;

    --secondary: #FFFFFF;
    --secondary-foreground: var(--ink);

    --muted: #F6F6F5;
    --muted-foreground: var(--muted-text);

    --accent: #FFFFFF;
    --accent-foreground: var(--ink);

    /* destructive = même rouge (si besoin: #D21A1A) */
    --destructive: var(--brand-red);
    --destructive-foreground: #FFFFFF;

    --border: var(--border-NEU);
    --input: var(--border-NEU);
    --ring: color-mix(in srgb, var(--brand-red) 40%, transparent);

    /* Charts (placeholder sobres) */
    --chart-1: #E31C1C;
    --chart-2: #0EA5E9;
    --chart-3: #22C55E;
    --chart-4: #F59E0B;
    --chart-5: #8B5CF6;

    /* Sidebar - uniforme avec background */
    --sidebar: var(--background);
    --sidebar-foreground: var(--ink);
    --sidebar-primary: var(--brand-red);
    --sidebar-primary-foreground: #FFFFFF;
    --sidebar-accent: var(--background);
    --sidebar-accent-foreground: var(--ink);
    --sidebar-border: var(--border-NEU);
    --sidebar-ring: var(--ring);

    /* RADIUS & OMBRES */
    --radius: 0.75rem;
}

/* Mode sombre */
.dark {
    --brand-red: #E84A4A;
    --brand-red-600: #C93030;
    --brand-navy: #4A6B8A;
    /* Version plus claire pour dark mode */
    --brand-navy-light: #5A7B9A;
    /* Variante claire dark mode */
    --brand-dark: #E0E7EE;
    /* Version claire pour dark mode (meilleure lisibilité) */
    --ink: #EDEDEC;
    --ink-soft: #C8C8C4;
    --muted-text: #A1A09A;
    --border-NEU: #3E3E3A;
    --bg-app: #0A0A0A;

    --background: var(--bg-app);
    --foreground: var(--ink);

    --card: #161615;
    --card-foreground: var(--ink);

    --popover: #161615;
    --popover-foreground: var(--ink);

    --primary: var(--brand-red);
    --primary-foreground: #1C1C1A;

    --secondary: #1C1C1A;
    --secondary-foreground: var(--ink);

    --muted: #1C1C1A;
    --muted-foreground: var(--muted-text);

    --accent: #1C1C1A;
    --accent-foreground: var(--ink);

    --destructive: #B91C1C;
    --destructive-foreground: #FEE2E2;

    --border: var(--border-NEU);
    --input: var(--border-NEU);
    --ring: color-mix(in srgb, var(--brand-red) 45%, transparent);

    --chart-1: #F87171;
    --chart-2: #38BDF8;
    --chart-3: #34D399;
    --chart-4: #FBBF24;
    --chart-5: #A78BFA;

    /* Sidebar - uniforme avec background dark */
    --sidebar: var(--background);
    --sidebar-foreground: var(--ink);
    --sidebar-primary: var(--brand-red);
    --sidebar-primary-foreground: #1C1C1A;
    --sidebar-accent: var(--background);
    --sidebar-accent-foreground: var(--ink);
    --sidebar-border: var(--border-NEU);
    --sidebar-ring: var(--ring);
}

/* Base */
@layer base {
    * {
        @apply border-border;
    }

    body {
        @apply bg-background text-foreground;
        letter-spacing: 0;
    }
}

/* =================================
   UTILITAIRES DE GRADIENTS (OPTION)
   ================================= */

/* Fond global (radials haut/bas) */
.app-bg {
    background:
        radial-gradient(ellipse at top, color-mix(in srgb, var(--brand-red) 12%, transparent) 0%, transparent 45%),
        radial-gradient(ellipse at bottom, rgba(27, 27, 24, 0.10) 0%, transparent 40%),
        var(--background);
}

/* Panneau gauche : halos radiaux discrets (rose/rouge léger + encre) */
.panel-left {
    background:
        radial-gradient(360px 240px at 80% 0%, color-mix(in srgb, var(--brand-red) 18%, transparent) 0%, transparent 60%),
        radial-gradient(300px 220px at 0% 100%, rgba(27, 27, 24, 0.08) 0%, transparent 60%),
        transparent;
}

/* Panneau droit : léger conic-gradient “vernis” */
.panel-right {
    background:
        conic-gradient(from 220deg at 50% 50%,
            color-mix(in srgb, var(--brand-red) 12%, transparent),
            rgba(0, 0, 0, 0.06),
            color-mix(in srgb, var(--brand-red) 12%, transparent));
}

/* Cartes/elements premium (ombre douce) */
.card-elev {
    box-shadow:
        0 10px 40px -20px rgba(0, 0, 0, 0.25),
        0 1px 0 0 rgba(0, 0, 0, 0.04) inset;
}

/* Boutons basés sur tokens */
.btn-primary {
    @apply rounded-md text-white font-medium transition-colors focus:outline-none focus:ring-2;
    background: var(--primary);
    border-color: transparent;

    &:hover {
        background: var(--brand-red-600);
    }

    &:focus {
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-red) 35%, transparent);
    }
}

.btn-secondary {
    @apply rounded-md text-foreground border transition-colors focus:outline-none focus:ring-2;
    background: var(--secondary);
    border-color: var(--border);

    &:hover {
        background: color-mix(in srgb, var(--secondary) 92%, black 8%);
    }

    &:focus {
        box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06);
    }
}

/* Inputs cohérents (h-9, text-sm, anneau rouge) */
.input {
    @apply h-9 text-sm rounded-md border bg-white dark:bg-transparent;
    border-color: var(--input);

    &:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 1px var(--primary);
    }
}

/* Checkbox teinte marque */
.checkbox {
    accent-color: var(--primary);
}

/* Titres / sous-titres (hiérarchie visuelle) */
.h1 {
    @apply text-xl font-semibold text-foreground;
}

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



/* CTA principal — rouge marque */
.btn-primary {
    @apply rounded-md text-white font-medium transition-colors focus:outline-none focus:ring-2;
    background: var(--primary);
}

.btn-primary:hover {
    background: var(--brand-red-600);
}

.btn-primary:focus {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-red) 35%, transparent);
}

/* Secondaire — contour neutre (pour “S'inscrire”, “Annuler”, etc.) */
.btn-secondary {
    @apply rounded-md border text-foreground bg-white transition-colors focus:outline-none focus:ring-2;
    border-color: var(--border);
}

.btn-secondary:hover {
    background: color-mix(in srgb, white 92%, black 8%);
}

/* Tertiaire (ghost) — texte seul, fond transparent */
.btn-ghost {
    @apply rounded-md text-foreground transition-colors;
}

.btn-ghost:hover {
    background: rgba(0, 0, 0, 0.04);
}

.dark .btn-ghost:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* Destructif — pour supprimer/annuler irréversible */
.btn-destructive {
    @apply rounded-md text-white font-medium transition-colors focus:outline-none focus:ring-2;
    background: #B91C1C;
    /* un rouge plus “danger” que ta teinte marque */
}

.btn-destructive:hover {
    background: #991B1B;
}


/* utilitaires minimalistes */
.btn-primary {
    @apply bg-[#E31C1C] text-white hover:bg-[#c61616] focus:ring-2 focus:ring-[#E31C1C]/30 rounded-md;
}

.input {
    @apply h-9 rounded-md border border-border bg-background text-foreground placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-[#E31C1C]/30 focus-visible:outline-none;
}

/* Utilitaires couleur Navy (bleu marine professionnel) */
.text-brand-navy {
    color: var(--brand-navy);
}

.text-brand-navy-light {
    color: var(--brand-navy-light);
}

.bg-brand-navy {
    background-color: var(--brand-navy);
}

.bg-brand-navy-light {
    background-color: var(--brand-navy-light);
}

.border-brand-navy {
    border-color: var(--brand-navy);
}

/* Utilitaires couleur Dark (noir profond) */
.text-brand-dark {
    color: var(--brand-dark);
}

.bg-brand-dark {
    background-color: var(--brand-dark);
}

.border-brand-dark {
    border-color: var(--brand-dark);
}

/* ==========================
   FIN DES UTILITAIRES
   ========================== */

/* ==========================
   SCROLLBAR PERSONNALISÉE
   ========================== */

/* Pour les navigateurs Webkit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: var(--brand-navy);
    border-radius: 3px;
    transition: background-color 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--brand-navy-light);
}

/* Pour Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--brand-navy) transparent;
}

/* Mode sombre */
.dark ::-webkit-scrollbar-thumb {
    background-color: color-mix(in srgb, var(--brand-navy) 70%, white);
}

.dark ::-webkit-scrollbar-thumb:hover {
    background-color: color-mix(in srgb, var(--brand-navy) 85%, white);
}

.dark * {
    scrollbar-color: color-mix(in srgb, var(--brand-navy) 70%, white) transparent;
}