@import 'tailwindcss';
@plugin '@tailwindcss/typography';

@source '../views';
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';

    /* Couleurs de marque JavaPax */
    --color-navy: #14384a;
    --color-sea: #1f9bbd;
    --color-leaf: #3f8f5b;
}

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

/* Apparition au défilement (ajouté par site.js -> aucun risque si JS off) */
.reveal-init {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.2,.6,.2,1);
    will-change: opacity, transform;
}
.reveal-init.reveal-left  { transform: translateX(-48px); }
.reveal-init.reveal-right { transform: translateX(48px); }
.reveal-init.reveal-zoom  { transform: scale(.94); }
.reveal-init.is-visible {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .reveal-init { opacity: 1 !important; transform: none !important; transition: none; }
}

/* Bouton retour en haut */
#back-to-top {
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
}
#back-to-top.show {
    opacity: 1;
    visibility: visible;
}

/* ===== Interactions modernes ===== */
html { scroll-behavior: smooth; }

/* Tous les boutons « pilule » : transition fluide, ombre au survol, effet de pression */
a[class~="rounded-full"], button[class~="rounded-full"] {
    transition: transform .18s ease, box-shadow .25s ease, filter .2s ease, background-color .2s ease;
}
a[class~="rounded-full"]:hover, button[class~="rounded-full"]:hover {
    box-shadow: 0 12px 24px -8px rgba(20, 56, 74, .45);
}
a[class~="rounded-full"]:active, button[class~="rounded-full"]:active {
    transform: scale(.95);
}

/* Boutons principaux : dégradé subtil + ombre colorée par défaut */
a[class~="bg-leaf"], button[class~="bg-leaf"] {
    background-image: linear-gradient(135deg, #4a9d68, #2f7a48);
    box-shadow: 0 4px 14px -4px rgba(63, 143, 91, .55);
}
a[class~="bg-sea"], button[class~="bg-sea"] {
    background-image: linear-gradient(135deg, #29a9c9, #167d9c);
    box-shadow: 0 4px 14px -4px rgba(31, 155, 189, .55);
}

/* Reflet lumineux qui balaie les boutons principaux (leaf / sea / white CTA) */
a[class~="bg-leaf"], button[class~="bg-leaf"],
a[class~="bg-sea"], button[class~="bg-sea"] {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
a[class~="bg-leaf"]::after, button[class~="bg-leaf"]::after,
a[class~="bg-sea"]::after, button[class~="bg-sea"]::after {
    content: '';
    position: absolute;
    inset: 0;
    left: -120%;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.45), transparent 70%);
    transform: skewX(-20deg);
    transition: left .6s ease;
    z-index: -1;
}
a[class~="bg-leaf"]:hover::after, button[class~="bg-leaf"]:hover::after,
a[class~="bg-sea"]:hover::after, button[class~="bg-sea"]:hover::after {
    left: 120%;
}

/* Liens de navigation (menu bureau) : soulignement animé */
header nav > div a:not([class*="bg-"]) {
    position: relative;
}
header nav > div a:not([class*="bg-"])::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
}
header nav > div a:not([class*="bg-"]):hover::after {
    transform: scaleX(1);
}

/* Cartes : légère élévation au survol (global, doux) */
.card-hover { transition: transform .3s ease, box-shadow .3s ease; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -12px rgba(20,56,74,.25); }

/* Focus visible accessible */
a:focus-visible, button:focus-visible {
    outline: 2px solid var(--color-sea);
    outline-offset: 2px;
}