/*
| La charte de la Maison Gossard-Kowalski, appliquée au QG.
|
| Servie après la feuille du paquet, qu'elle ne fait que **redéfinir** : toutes
| les couleurs et les familles de caractères y passent par des variables sur
| `:root`. Aucune vue n'est forkée, aucun sélecteur du paquet n'est recopié —
| ce qui veut dire qu'une mise à jour du paquet n'a rien à réconcilier ici.
|
| Les couleurs sont celles de maisongossardkowalski.fr, relevées dans sa feuille
| de style et non approchées à l'œil :
|
|     --ink #1A2230   --cream #F5EDDC   --copper #A8632F   --bordeaux #6E2A2A
|     --stone #C9C2B5 --muted #5F5E5A   --soft #888780     --cream-deep #EAE1CB
*/

/* ---------------------------------------------------------------- polices */

/*
| Auto-hébergées, et c'est une décision. Le QG est une application installable
| qui doit s'ouvrir dans le train ; une police distante casserait le hors-ligne.
| Et un outil interne n'a pas à prévenir un tiers chaque fois qu'on l'ouvre.
|
| Un fichier par famille : ce sont des polices variables, la graisse est un axe
| et non un fichier. `swap` pour que le texte s'affiche tout de suite, quitte à
| changer de fonte une fraction de seconde après.
*/

@font-face {
    font-family: "Inter var";
    src: url("/polices/inter.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "EB Garamond var";
    src: url("/polices/garamond.woff2") format("woff2");
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
}

/* ------------------------------------------------------------- le clair */

:root {
    --ground: #f5eddc;
    --surface: #faf4e5;
    --surface-2: #eae1cb;

    --ink: #1a2230;
    --ink-soft: #5f5e5a;
    --muted: #888780;
    --rule: #c9c2b5;

    --accent: #a8632f;
    --accent-ink: #faf4e5;
    --crit: #6e2a2a;

    --sans: "Inter var", "Inter", system-ui, sans-serif;
    --serif: "EB Garamond var", "EB Garamond", Georgia, serif;
}

/*
| Le sombre n'existe pas sur le site de la Maison : il est déduit, pas relevé.
| Le principe retenu — l'encre devient le fond, la crème devient le texte, et
| l'accent passe au cuivre clair parce que le cuivre profond ne se lit pas sur
| du bleu nuit. La famille reste reconnaissable, les contrastes tiennent.
*/

@media (prefers-color-scheme: dark) {
    :root {
        --ground: #141a24;
        --surface: #1a2230;
        --surface-2: #232d3d;

        --ink: #f5eddc;
        --ink-soft: #c9c2b5;
        --muted: #8d8b84;
        --rule: #2e3849;

        --accent: #d4a877;
        --accent-ink: #1a2230;
        --crit: #cd8175;
    }
}

/* ------------------------------------------------------------ typographie */

/*
| Le serif pour ce qui nomme, le sans pour ce qui s'utilise. C'est le partage
| du site de la Maison, et il tient ici pour la même raison : un titre se lit,
| une grille se balaie.
*/

.lp-marque {
    font-family: var(--serif);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
}

.lp-titre h1,
.lp-vide strong {
    font-family: var(--serif);
    font-weight: 600;
    letter-spacing: -0.005em;
}

.lp-chiffre b {
    font-family: var(--serif);
    font-weight: 600;
}

/* Le nom d'un outil se lit d'abord : c'est lui qu'on cherche du regard. */
.lp-tuile b {
    font-family: var(--serif);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
}

/* --------------------------------------------------------------- détails */

/*
| Les pastilles gardent leur teinte par outil — c'est ce qui les rend
| reconnaissables du coin de l'œil — mais désaturées et éclaircies pour tenir
| sur de la crème sans crier.
*/

.lp-pastille {
    background: hsl(var(--teinte) 28% 84%);
    color: hsl(var(--teinte) 40% 26%);
    border-radius: 3px;
}

@media (prefers-color-scheme: dark) {
    .lp-pastille {
        background: hsl(var(--teinte) 22% 24%);
        color: hsl(var(--teinte) 40% 76%);
    }
}

/* Les états du volet coût, repris dans les couleurs de la Maison. */
.lp-etat--urgent { color: #a8632f; }
.lp-etat--passed { color: #6e2a2a; }

@media (prefers-color-scheme: dark) {
    .lp-etat--urgent { color: #d4a877; }
    .lp-etat--passed { color: #cd8175; }
}

/* Le cuivre est chaud et dense : un liseré suffit là où le teal était plat. */
.lp-tuile:hover {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
}

/* `x-cloak` : sans lui, le menu clignote au chargement avant qu'Alpine ne prenne la main. */
[x-cloak] { display: none !important; }