@import 'tailwindcss';

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

@theme {
    --font-sans: 'Jost', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
        'Noto Color Emoji';
    --font-serif: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;

    /* Palette « maison » : un seul rendu, maîtrisé, quel que soit le thème du visiteur. */
    --color-ivoire: #f3efe8;
    --color-ivoire-2: #e9e3d9;
    --color-encre: #15110f;
    --color-encre-2: #1f1a17;
    --color-gris: #6b635b;
    --color-gris-clair: #a39a8f;
    --color-filet: #d6cdc0;
    --color-rouge: #8f1d1d;
    --color-laiton: #a8865a;

    --ease-maison: cubic-bezier(0.22, 1, 0.36, 1);
}

@layer base {
    :root {
        color-scheme: light;
    }

    html {
        scroll-behavior: smooth;
    }

    h1,
    h2,
    h3 {
        text-wrap: balance;
    }

    ::selection {
        background: var(--color-rouge);
        color: var(--color-ivoire);
    }

    :focus-visible {
        outline: 1px solid var(--color-laiton);
        outline-offset: 4px;
    }
}

/* Petite capitale espacée : rubriques, navigation, boutons. */
@utility kicker {
    @apply text-[0.7rem] font-normal tracking-[0.32em] uppercase;
}

@layer components {
    .lien-filet {
        @apply kicker inline-flex items-center gap-4 transition-colors duration-500;
    }

    .lien-filet::after {
        content: '';
        @apply h-px w-8 bg-current transition-all duration-500 ease-maison;
    }

    .lien-filet:hover::after {
        @apply w-14;
    }

    .bouton {
        @apply kicker inline-flex items-center justify-center border px-8 py-4 transition-colors duration-500 ease-maison;
    }

    .bouton-plein {
        @apply border-encre bg-encre text-ivoire hover:border-rouge hover:bg-rouge;
    }

    .bouton-clair {
        @apply border-ivoire/60 text-ivoire hover:border-ivoire hover:bg-ivoire hover:text-encre;
    }

    .bouton-contour {
        @apply border-encre text-encre hover:bg-encre hover:text-ivoire;
    }

    /* Ligne de carte de restaurant : libellé ····· valeur */
    .ligne-carte {
        @apply flex items-baseline gap-3;
    }

    .ligne-carte::after {
        content: '';
        order: 1;
        @apply flex-1 translate-y-[-0.3em] border-b border-dotted border-current opacity-35;
    }

    .ligne-carte > :last-child {
        order: 2;
    }
}

@layer components {
    /* Texte éditorial issu de l'administration (pages, actualités, recettes, fiches produit). */
    .prose-maison {
        @apply max-w-[68ch] text-[1.05rem] leading-[1.8] text-encre/85;
    }

    .prose-maison > * + * {
        margin-top: 1.1em;
    }

    .prose-maison h2 {
        @apply mt-14 font-serif text-[clamp(1.7rem,2.6vw,2.3rem)] leading-tight text-encre;
    }

    .prose-maison h3 {
        @apply mt-10 font-serif text-[1.45rem] leading-snug text-encre;
    }

    .prose-maison h4 {
        @apply kicker mt-8 text-rouge;
    }

    .prose-maison strong,
    .prose-maison b {
        @apply font-medium text-encre;
    }

    .prose-maison a {
        @apply text-rouge underline decoration-rouge/40 underline-offset-4 transition-colors hover:decoration-rouge;
    }

    .prose-maison ul {
        @apply list-none space-y-2 pl-0;
    }

    .prose-maison ul > li {
        @apply relative pl-6;
    }

    .prose-maison ul > li::before {
        content: '';
        @apply absolute top-[0.8em] left-0 h-px w-3 bg-laiton;
    }

    .prose-maison ol {
        @apply list-decimal space-y-2 pl-5 marker:font-serif marker:text-laiton;
    }

    .prose-maison blockquote {
        @apply border-l border-laiton pl-6 font-serif text-xl italic text-encre;
    }

    .prose-maison img {
        @apply my-10 h-auto max-w-full;
    }

    .prose-maison p:has(> img:only-child),
    .prose-maison p:has(> a:only-child > img) {
        @apply my-8;
    }

    .prose-maison table {
        @apply w-full border-collapse text-sm;
    }

    .prose-maison td,
    .prose-maison th {
        @apply border-b border-filet px-2 py-2 text-left align-top;
    }

    .prose-maison hr {
        @apply my-12 border-filet;
    }

    /* Champs de formulaire */
    .champ-label {
        @apply kicker mb-2 block text-gris;
    }

    .champ {
        @apply block w-full rounded-none border-0 border-b border-encre/25 bg-transparent px-0 py-3 text-base text-encre placeholder:text-gris-clair focus:border-encre focus:ring-0 focus:outline-none;
    }

    .champ-erreur {
        @apply mt-2 text-sm text-rouge;
    }

    .case {
        @apply size-4 shrink-0 appearance-none border border-encre/40 bg-transparent checked:border-rouge checked:bg-rouge focus-visible:outline-laiton;
    }

    .radio-carte {
        @apply flex cursor-pointer gap-4 border border-filet p-5 transition-colors has-checked:border-encre has-checked:bg-ivoire-2/60;
    }

    /* Messages flash */
    .alerte {
        @apply border-l-2 border-laiton bg-ivoire-2 px-5 py-4 text-sm text-encre;
    }
}

@layer components {
    /*
     * En-tête (à partir de xl) : au repos, les onglets sont en haut sur une ligne,
     * le nom et le logo centrés en dessous. Au défilement (data-scrolled), tout revient
     * sur une seule ligne, les onglets de part et d'autre du nom.
     */
    .header-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 2rem;
    }

    @media (min-width: 80rem) {
        .header-bar {
            display: grid;
            column-gap: 2rem;
            row-gap: 0;
            grid-template-columns: 1fr auto 1fr;
            grid-template-areas:
                'nav-left brand nav-right'
                'logo logo logo';
        }

        .header-bar .header-nav-left {
            grid-area: nav-left;
            justify-self: start;
        }

        .header-bar .header-brand {
            grid-area: brand;
            justify-self: center;
        }

        .header-bar .header-nav-right {
            grid-area: nav-right;
            justify-self: end;
        }

        .header-bar .header-logo {
            grid-area: logo;
            justify-self: center;
        }
    }
}