@import 'tailwindcss';

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

/* Polices du site original */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,400&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap');

@theme {
    --font-sans: 'Open Sans', ui-sans-serif, system-ui, sans-serif;
    --font-display: 'Playfair Display', serif;

    /* Palette de marque JavaPax */
    --color-brand: #8c239f;          /* violet titres */
    --color-brand-dark: #6f1a7e;
    --color-teal: #008e97;           /* teal secondaire */
    --color-gold: #d0ab3d;           /* or accent */
    --color-gold-dark: #9f8023;
    --color-ink: #2b2b2b;
}

@layer base {
    body {
        @apply font-sans text-[var(--color-ink)] bg-white antialiased;
    }
    h1, h2, h3, h4 {
        @apply font-display;
    }
}

/* ---------------------------------------------------------------------------
   Couche de compatibilité pour le markup du constructeur Mesmerize
   (les pages builder utilisent .row, .content-section, colonnes, pricing…)
   On reproduit une mise en page propre et responsive.
--------------------------------------------------------------------------- */
@layer components {
    .wp-content { @apply text-[1.05rem] leading-relaxed; }

    .wp-content .content-section,
    .wp-content [class*="content-section"] { @apply py-10; }
    .wp-content .content-section-spacing { @apply md:py-16; }

    .wp-content .row {
        @apply flex flex-wrap gap-6 items-stretch justify-center;
    }
    .wp-content [data-type="column"],
    .wp-content .column {
        @apply flex-1 min-w-[260px];
    }

    .wp-content h1 { @apply text-4xl md:text-5xl font-bold text-[var(--color-brand)] mb-5 mt-2; }
    .wp-content h2 { @apply text-3xl md:text-4xl font-bold text-[var(--color-brand)] mb-4 mt-8; }
    .wp-content h3 { @apply text-2xl font-bold text-[var(--color-brand)] mb-3 mt-6; }
    .wp-content h4 { @apply text-xl font-semibold mb-2 mt-4; }
    .wp-content p  { @apply mb-4; }
    .wp-content a  { @apply text-[var(--color-teal)] underline underline-offset-2 hover:text-[var(--color-brand)]; }
    .wp-content ul { @apply list-disc pl-6 mb-4 space-y-1; }
    .wp-content ol { @apply list-decimal pl-6 mb-4 space-y-1; }
    .wp-content .lead { @apply text-lg md:text-xl; }
    .wp-content img { @apply max-w-full h-auto rounded-lg; }
    .wp-content figure { @apply my-6; }
    .wp-content blockquote { @apply border-l-4 border-[var(--color-gold)] pl-4 italic my-6 text-gray-700; }
    .wp-content table { @apply w-full border-collapse my-6; }
    .wp-content th, .wp-content td { @apply border border-gray-200 px-3 py-2 text-left; }

    /* Cartes / pricing */
    .wp-content [class*="pricing"] [data-type="column"],
    .wp-content .pricing-item,
    .wp-content .card {
        @apply bg-white rounded-2xl shadow-sm border border-gray-100 p-6;
    }

    /* Boutons builder */
    .wp-content .btn,
    .wp-content .button,
    .wp-content a[class*="btn"] {
        @apply inline-block no-underline rounded-full bg-[var(--color-brand)] text-white px-6 py-3 font-semibold hover:bg-[var(--color-brand-dark)] transition;
    }

    /* Boutons thème réutilisables */
    .btn-brand {
        @apply inline-block rounded-full bg-[var(--color-brand)] text-white px-6 py-3 font-semibold hover:bg-[var(--color-brand-dark)] transition no-underline;
    }
    .btn-gold {
        @apply inline-block rounded-full bg-[var(--color-gold)] text-white px-6 py-3 font-semibold hover:bg-[var(--color-gold-dark)] transition no-underline;
    }
}