@import "tailwindcss";

/*
 * Les deux polices, servies depuis notre domaine.
 *
 * Ce sont des fontes variables : un seul fichier par famille couvre toutes les
 * graisses, ce qui fait deux requêtes pour tout le site. Les appeler chez
 * Google coûterait une connexion à un tiers, un aller-retour de plus avant le
 * premier texte lisible, et un cookie de moins dans la balance du consentement.
 *
 * `swap` affiche immédiatement la police de repli et bascule à l'arrivée de la
 * vraie : le texte est lisible dès la première image de la page.
 */
@font-face {
    font-family: "EB Garamond";
    src: url("/fonts/eb-garamond.woff2") format("woff2");
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Inter";
    src: url("/fonts/inter.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * La charte du Jardin de Bohème.
 *
 * Trois familles et rien d'autre : le crème qui porte tout, l'olive de la
 * pépinière, la terre cuite qui n'apparaît que pour appeler. Chaque jeton a un
 * emploi unique — `make contrast` refuse toute valeur qui passerait sous le
 * seuil WCAG AA du couple où elle est réellement posée.
 */
@theme {
    /* Fonds */
    --color-surface: #f8f7f5;
    --color-surface-tint: #f1efe8;
    --color-surface-sage: #e8ebe0;
    --color-surface-olive: #5c664c;
    --color-surface-ink: #232a1c;

    /* Textes */
    --color-ink: #1f2618;
    --color-body: #3a422f;
    --color-muted: #5e6650;
    --color-subtle: #666e58;

    /* Olive : la couleur de la maison */
    --color-brand: #5c664c;
    --color-brand-ink: #43512c;
    --color-brand-cta: #60673e;
    --color-brand-soft: #dbe2cd;

    /*
     * Terre cuite, en deux nuances qui ne s'échangent pas : `clay` est la
     * couleur de la marque, celle des aplats de bouton où le texte est blanc ;
     * `clay-ink` est la même en plus sombre, la seule qui passe le seuil de
     * contraste quand la terre cuite devient du texte sur fond clair.
     */
    --color-clay: #a8613e;
    --color-clay-ink: #9c5433;
    --color-clay-soft: #f2ddd2;

    /* Traits et séparateurs */
    --color-line: #e2ded2;
    --color-line-strong: #c8c3b3;

    /* Disponibilité d'une plante, lue d'un coup d'œil */
    --color-stock-in: #3f6b3a;
    --color-stock-soon: #806019;
    --color-stock-out: #8c4a3c;

    /* Typographie : une serif pour ce qui se lit, une sans pour ce qui étiquette */
    --font-serif: "EB Garamond", "Iowan Old Style", Georgia, serif;
    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

@layer base {
    html {
        scroll-behavior: smooth;
    }

    /*
     * Les sections apparaissent en montant légèrement quand elles entrent dans
     * l'écran. C'est écrit en CSS pur, avec une chronologie de défilement : là
     * où le navigateur ne la connaît pas, tout s'affiche normalement et rien ne
     * manque. Aucun script, aucun observateur, aucun coût au chargement.
     */
    @supports (animation-timeline: view()) {
        @media (prefers-reduced-motion: no-preference) {
            .reveal {
                animation: reveal linear both;
                animation-timeline: view();
                animation-range: entry 0% entry 55%;
            }
        }
    }

    @keyframes reveal {
        from {
            opacity: 0;
            transform: translateY(1.25rem);
        }
        to {
            opacity: 1;
            transform: none;
        }
    }

    /* Le mouvement n'est jamais porteur d'information : le couper n'enlève rien. */
    @media (prefers-reduced-motion: reduce) {
        html {
            scroll-behavior: auto;
        }

        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            transition-duration: 0.01ms !important;
        }
    }

    body {
        background-color: var(--color-surface);
        color: var(--color-body);
        font-family: var(--font-serif);
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
    }

    :focus-visible {
        outline: 2px solid var(--color-clay);
        outline-offset: 3px;
    }
}

@layer components {
    /* Un champ de saisie : texte, courriel, téléphone, zone de texte, liste. */
    .field {
        width: 100%;
        border: 1px solid var(--color-line);
        border-radius: 0.5rem;
        background-color: var(--color-surface);
        padding: 0.75rem 1rem;
        font-family: var(--font-sans);
        font-size: 0.95rem;
        color: var(--color-ink);
    }

    .field::placeholder {
        color: var(--color-subtle);
    }

    .field:focus {
        border-color: var(--color-brand);
        outline: 2px solid var(--color-brand);
        outline-offset: 1px;
    }

    select.field {
        appearance: none;
        padding-right: 2.5rem;
    }

    /* Le surtitre en petites capitales espacées, au-dessus de chaque titre de section. */
    .eyebrow {
        font-family: var(--font-sans);
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--color-clay-ink);
    }
}

@layer components {
    /*
     * Le texte rédigé, rendu depuis le Markdown de l'administration.
     *
     * Les styles vivent ici plutôt que dans le gabarit : le HTML est produit
     * par le convertisseur, personne ne peut poser une classe sur un
     * paragraphe qu'il n'écrit pas.
     */
    /*
     * Le texte rédigé.
     *
     * La mesure est bornée à 68 caractères : au-delà, l'œil perd la ligne
     * suivante en revenant à la marge, et c'est ce qui fait qu'un texte de sept
     * cents mots paraît interminable alors qu'il se lit en trois minutes.
     */
    .prose-jardin {
        max-width: 68ch;
        color: var(--color-body);
        font-family: var(--font-sans);
        font-size: 1.02rem;
        line-height: 1.8;
        text-wrap: pretty;
    }

    .prose-jardin > * + * {
        margin-top: 1.3em;
    }

    /* La première phrase porte le regard, et donne envie de lire la suite. */
    .prose-jardin > p:first-of-type {
        font-size: 1.12rem;
        line-height: 1.65;
        color: var(--color-ink);
    }

    /*
     * Un intertitre respire beaucoup au-dessus et peu en dessous : c'est ce qui
     * le rattache au texte qu'il annonce plutôt qu'à celui qui précède, et ce
     * qui découpe visuellement une page longue en morceaux abordables.
     */
    .prose-jardin h2 {
        margin-top: 2.6em;
        margin-bottom: -0.4em;
        color: var(--color-ink);
        font-family: var(--font-serif);
        font-size: 1.7rem;
        line-height: 1.2;
        letter-spacing: -0.01em;
    }

    .prose-jardin h2::before {
        display: block;
        width: 2.5rem;
        margin-bottom: 0.9rem;
        border-top: 2px solid var(--color-brand);
        content: "";
    }

    .prose-jardin h3 {
        margin-top: 1.8em;
        color: var(--color-ink);
        font-family: var(--font-serif);
        font-size: 1.25rem;
        line-height: 1.3;
    }

    .prose-jardin a {
        color: var(--color-brand-ink);
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .prose-jardin strong {
        color: var(--color-ink);
        font-weight: 600;
    }

    .prose-jardin ul,
    .prose-jardin ol {
        padding-left: 1.3em;
    }

    .prose-jardin ul { list-style: disc; }
    .prose-jardin ol { list-style: decimal; }
    .prose-jardin li + li { margin-top: 0.4em; }
    .prose-jardin li::marker { color: var(--color-brand); }

    /* Une citation devient un temps d'arrêt dans la page, pas un simple retrait. */
    .prose-jardin blockquote {
        margin-top: 2em;
        margin-bottom: 2em;
        border-left: 3px solid var(--color-brand);
        background-color: var(--color-surface-tint);
        padding: 1.4em 1.6em;
        border-radius: 0 0.5rem 0.5rem 0;
        color: var(--color-ink);
        font-family: var(--font-serif);
        font-size: 1.22rem;
        line-height: 1.5;
    }

    .prose-jardin blockquote p:first-of-type {
        font-size: inherit;
        line-height: inherit;
    }

    .prose-jardin img {
        border-radius: 0.75rem;
    }

    /* Un tableau de comparaison : c'est le bon outil quand il s'agit de choisir
       entre plusieurs variétés, et le mauvais partout ailleurs. */
    .prose-jardin table {
        display: block;
        width: 100%;
        overflow-x: auto;
        border-collapse: collapse;
        font-size: 0.9rem;
    }

    .prose-jardin th,
    .prose-jardin td {
        border-bottom: 1px solid var(--color-line);
        padding: 0.7rem 1rem 0.7rem 0;
        text-align: left;
        vertical-align: top;
    }

    .prose-jardin th {
        color: var(--color-ink);
        font-family: var(--font-sans);
        font-size: 0.78rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }
}