@import 'tailwindcss';

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

/* ── Charte graphique Obvious Way (CDC §7.2 / §7.5) ─────────────── */
@theme {
    --color-navy: #0d2b3e; /* fond sombre principal */
    --color-navy-mid: #1e4a6b; /* bleu intermédiaire / dégradés */
    --color-gold: #c9963a; /* accent / CTA / titres décoratifs */
    --color-gold-light: #e8b86a; /* or clair / survol */
    --color-sand: #f7f4ee; /* fond clair principal */
    --color-sand-dark: #ede8df; /* fond clair alterné */
    --color-muted: #6b7280; /* texte secondaire */
    --color-line: #e5e1d8; /* bordures / séparateurs */

    --font-serif: 'Cormorant Garamond', Georgia, serif; /* titres */
    --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif; /* corps / UI */
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: scale(0.85);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulseGlow {
    0%,
    100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}

/* ── Base ───────────────────────────────────────────────────────── */
@layer base {
    html {
        scroll-behavior: smooth;
        scroll-padding-top: 80px;
    }
    body {
        @apply bg-sand text-navy leading-relaxed antialiased;
        font-family: var(--font-sans);
        overflow-x: hidden;
    }
}

/* ── Composants réutilisables (repris du site statique) ─────────── */
@layer components {
    .eyebrow {
        @apply flex items-center gap-2.5 text-[11px] font-medium tracking-[0.16em] uppercase text-gold;
    }
    .eyebrow::before {
        content: '';
        @apply inline-block w-5 h-px bg-gold;
    }
    .eyebrow--lg {
        @apply tracking-[0.18em];
    }
    .eyebrow--lg::before {
        @apply w-7;
    }

    .section-title {
        @apply font-serif text-[2.6rem] font-medium leading-[1.2] text-navy;
    }

    .btn-primary {
        @apply inline-block bg-gold text-white px-7 py-3.5 text-[13px] font-medium tracking-[0.04em] transition-colors duration-200;
    }
    .btn-primary:hover {
        @apply bg-gold-light;
    }
    .btn-ghost {
        @apply inline-block bg-transparent text-white/75 border-[0.5px] border-white/25 px-7 py-3.5 text-[13px] tracking-[0.04em] transition duration-200;
    }
    .btn-ghost:hover {
        @apply text-white border-white/60;
    }
    .btn-ghost-full {
        @apply block w-full text-center bg-transparent text-white/75 border-[0.5px] border-white/25 px-7 py-3.5 text-[13px] tracking-[0.04em] transition duration-200;
    }
    .btn-ghost-full:hover {
        @apply text-white border-white/60;
    }

    .svc-card {
        @apply bg-white p-8 border-t-[3px] border-gold/20 rounded-sm transition-all duration-200 cursor-default;
    }
    .svc-card:hover {
        @apply border-t-gold -translate-y-0.5 shadow-[0_6px_28px_rgba(13,43,62,0.09)];
    }
    .svc-num {
        @apply font-serif text-base text-gold/30 leading-none mb-2;
    }
    .svc-title {
        @apply font-serif text-[1.3rem] font-semibold text-navy mb-3 leading-[1.3];
    }
    .svc-desc {
        @apply text-[13px] text-muted leading-[1.7];
    }

    .zone-card {
        @apply py-3.5 border-b-[0.5px] border-line transition-colors last:border-b-0;
    }
    .zone-card:hover {
        @apply bg-gold/[0.03] rounded-sm;
    }
    .zone-flag {
        @apply w-12 h-8 rounded-md shrink-0 overflow-hidden border border-black/10 block;
    }
    .zone-flag svg {
        @apply w-full h-full block;
    }

    .phase-label {
        @apply text-[10px] tracking-[0.2em] text-gold font-medium uppercase;
    }

    .field {
        @apply w-full px-3.5 py-2.5 bg-white/5 border-[0.5px] border-white/15 text-white text-[13px] outline-none transition-colors focus:border-gold/60;
    }
    .field::placeholder {
        @apply text-white/40;
    }
    .field-label {
        @apply block text-[11px] tracking-[0.08em] uppercase text-white/65 mb-1.5;
    }

    .icon {
        @apply inline-block align-middle stroke-current fill-none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
}