/* ========================================================================== LE CARNET — feuille de style Direction VITRINE : une couleur par rubrique. Deux peaux d'un même dessin : · VITRINE (clair) — papier crème très clair, encre chaude · ARDOISE (sombre) — anthracite, crème Par-dessus, une TEINTE de rubrique (--teinte / --teinte-2 / --teinte-fond) déclarée dans data/recettes.js et posée en classe sur . Toute la page bascule d'un coup : bandeau, titre, pastilles, bloc du poids total. La bascule clair/sombre est automatique (réglage du système), avec surcharge manuelle via data-theme. L'impression force toujours l'encre sur blanc et retire la couleur, la photo et le bandeau. Polices Fraunces et Rubik intégrées dans css/polices.css (licence OFL) : rendu identique partout, hors ligne comme depuis le disque. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Jetons -------------------------------------------------------------------------- */ :root { /* Les valeurs des deux palettes ne sont écrites qu'UNE fois ici. Plus bas, on ne fait que rebrancher les variables d'usage sur l'une ou l'autre — sinon on modifie une couleur et on oublie son jumeau. */ /* --- Vitrine (clair) --- */ --c-papier: #fffdf9; --c-papier-2: #f6f1e7; --c-papier-3: #ebe3d4; --c-encre: #2a2118; --c-encre-2: #6d5f4c; --c-encre-3: #9a8b76; --c-trait: rgba(42, 33, 24, .11); --c-trait-fort: rgba(42, 33, 24, .28); --c-alerte: #9a4a16; --c-alerte-doux: #fbeee0; --c-surlign: #ffe9a8; /* --- Ardoise (sombre) --- */ --a-papier: #17181a; --a-papier-2: #212327; --a-papier-3: #2c2f34; --a-encre: #f3efe8; --a-encre-2: #b8b1a5; --a-encre-3: #8b857b; --a-trait: rgba(243, 239, 232, .13); --a-trait-fort: rgba(243, 239, 232, .3); --a-alerte: #e6a565; --a-alerte-doux: #33261a; --a-surlign: rgba(224, 163, 62, .32); /* --- Branchement par défaut : vitrine claire --- */ --papier: var(--c-papier); --papier-2: var(--c-papier-2); --papier-3: var(--c-papier-3); --encre: var(--c-encre); --encre-2: var(--c-encre-2); --encre-3: var(--c-encre-3); --trait: var(--c-trait); --trait-fort: var(--c-trait-fort); --alerte: var(--c-alerte); --alerte-doux: var(--c-alerte-doux); --surlign: var(--c-surlign); /* La teinte courante, réécrite par la rubrique affichée. --teinte : le trait plein, les pastilles, les gros chiffres --teinte-2 : la même, assombrie, pour le texte sur fond teinté --teinte-fond: le fond pâle des bandeaux et des blocs */ --teinte: #8a6a2f; --teinte-2: #6b4f1c; --teinte-fond: #f7efdc; --display: "Carnet Display", "Iowan Old Style", "Palatino Linotype", Georgia, serif; --sans: "Carnet Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --large: 46rem; --mesure: 33rem; /* largeur des tableaux de quantités : au-delà, l'œil perd la ligne entre le nom et le chiffre */ --rayon: 10px; --rayon-s: 6px; } /* --- Ardoise : automatique, selon le réglage du système --- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="clair"]) { --papier: var(--a-papier); --papier-2: var(--a-papier-2); --papier-3: var(--a-papier-3); --encre: var(--a-encre); --encre-2: var(--a-encre-2); --encre-3: var(--a-encre-3); --trait: var(--a-trait); --trait-fort: var(--a-trait-fort); --alerte: var(--a-alerte); --alerte-doux: var(--a-alerte-doux); --surlign: var(--a-surlign); } } /* --- Ardoise : forcée depuis le bouton --- */ :root[data-theme="sombre"] { --papier: var(--a-papier); --papier-2: var(--a-papier-2); --papier-3: var(--a-papier-3); --encre: var(--a-encre); --encre-2: var(--a-encre-2); --encre-3: var(--a-encre-3); --trait: var(--a-trait); --trait-fort: var(--a-trait-fort); --alerte: var(--a-alerte); --alerte-doux: var(--a-alerte-doux); --surlign: var(--a-surlign); } /* -------------------------------------------------------------------------- 1 bis. Teintes de rubrique Chaque rubrique porte une teinte, déclarée dans data/recettes.js. La classe est posée sur , donc toute la page — bandeau, filet du total, pastille du filtre, gros chiffre — bascule d'un coup. Les versions sombres ne sont pas les mêmes couleurs éclaircies : sur fond anthracite, il faut remonter la clarté et baisser la saturation, sinon la teinte vibre et le texte dessus devient illisible. -------------------------------------------------------------------------- */ .t-brique { --teinte:#b1503a; --teinte-2:#7f3826; --teinte-fond:#fbeae4; } .t-olive { --teinte:#6b7a2f; --teinte-2:#4c5820; --teinte-fond:#f0f2df; } .t-encre { --teinte:#3a4b85; --teinte-2:#293761; --teinte-fond:#e7eaf6; } .t-menthe { --teinte:#2f7f6e; --teinte-2:#215c50; --teinte-fond:#e2f2ee; } .t-sable { --teinte:#8a7250; --teinte-2:#63513a; --teinte-fond:#f5efe4; } .t-ambre { --teinte:#a8641c; --teinte-2:#7a4711; --teinte-fond:#fbeedb; } .t-framboise { --teinte:#b0446a; --teinte-2:#83304e; --teinte-fond:#fbe8ee; } .t-vanille { --teinte:#96731a; --teinte-2:#6d5311; --teinte-fond:#f9f0d5; } .t-givre { --teinte:#2f6f8f; --teinte-2:#22506a; --teinte-fond:#e4f0f6; } .t-cacao { --teinte:#7a5230; --teinte-2:#573920; --teinte-fond:#f4e9df; } .t-pistache { --teinte:#5c7f43; --teinte-2:#425c30; --teinte-fond:#ecf2e2; } .t-prune { --teinte:#6f4a80; --teinte-2:#523660; --teinte-fond:#f2eaf6; } .t-ardoise { --teinte:#5c6169; --teinte-2:#3f434a; --teinte-fond:#eceef1; } @media (prefers-color-scheme: dark) { :root:not([data-theme="clair"]) .t-brique, :root:not([data-theme="clair"]).t-brique { --teinte:#e0937c; --teinte-2:#f0bcaa; --teinte-fond:#33211b; } :root:not([data-theme="clair"]) .t-olive, :root:not([data-theme="clair"]).t-olive { --teinte:#b3c168; --teinte-2:#d2dc9f; --teinte-fond:#282c19; } :root:not([data-theme="clair"]) .t-encre, :root:not([data-theme="clair"]).t-encre { --teinte:#93a6dd; --teinte-2:#bcc7ea; --teinte-fond:#1e2333; } :root:not([data-theme="clair"]) .t-menthe, :root:not([data-theme="clair"]).t-menthe { --teinte:#6dc0ae; --teinte-2:#a5d8cc; --teinte-fond:#1a2b27; } :root:not([data-theme="clair"]) .t-sable, :root:not([data-theme="clair"]).t-sable { --teinte:#c9b190; --teinte-2:#ded0ba; --teinte-fond:#2b261e; } :root:not([data-theme="clair"]) .t-ambre, :root:not([data-theme="clair"]).t-ambre { --teinte:#e0a34e; --teinte-2:#f2c98e; --teinte-fond:#33261a; } :root:not([data-theme="clair"]) .t-framboise, :root:not([data-theme="clair"]).t-framboise { --teinte:#e28aa8; --teinte-2:#f2bccd; --teinte-fond:#331f27; } :root:not([data-theme="clair"]) .t-vanille, :root:not([data-theme="clair"]).t-vanille { --teinte:#d8bd63; --teinte-2:#ecd99a; --teinte-fond:#2f2a1a; } :root:not([data-theme="clair"]) .t-givre, :root:not([data-theme="clair"]).t-givre { --teinte:#79b6d4; --teinte-2:#aed4e6; --teinte-fond:#1c2a32; } :root:not([data-theme="clair"]) .t-cacao, :root:not([data-theme="clair"]).t-cacao { --teinte:#c39672; --teinte-2:#dcbb9f; --teinte-fond:#2c2219; } :root:not([data-theme="clair"]) .t-pistache, :root:not([data-theme="clair"]).t-pistache { --teinte:#a1c184; --teinte-2:#c4d9b0; --teinte-fond:#212a1d; } :root:not([data-theme="clair"]) .t-prune, :root:not([data-theme="clair"]).t-prune { --teinte:#b494c4; --teinte-2:#d0bcda; --teinte-fond:#282030; } :root:not([data-theme="clair"]) .t-ardoise, :root:not([data-theme="clair"]).t-ardoise { --teinte:#9aa3ad; --teinte-2:#c0c6cd; --teinte-fond:#23262a; } } :root[data-theme="sombre"] .t-brique, :root[data-theme="sombre"].t-brique { --teinte:#e0937c; --teinte-2:#f0bcaa; --teinte-fond:#33211b; } :root[data-theme="sombre"] .t-olive, :root[data-theme="sombre"].t-olive { --teinte:#b3c168; --teinte-2:#d2dc9f; --teinte-fond:#282c19; } :root[data-theme="sombre"] .t-encre, :root[data-theme="sombre"].t-encre { --teinte:#93a6dd; --teinte-2:#bcc7ea; --teinte-fond:#1e2333; } :root[data-theme="sombre"] .t-menthe, :root[data-theme="sombre"].t-menthe { --teinte:#6dc0ae; --teinte-2:#a5d8cc; --teinte-fond:#1a2b27; } :root[data-theme="sombre"] .t-sable, :root[data-theme="sombre"].t-sable { --teinte:#c9b190; --teinte-2:#ded0ba; --teinte-fond:#2b261e; } :root[data-theme="sombre"] .t-ambre, :root[data-theme="sombre"].t-ambre { --teinte:#e0a34e; --teinte-2:#f2c98e; --teinte-fond:#33261a; } :root[data-theme="sombre"] .t-framboise, :root[data-theme="sombre"].t-framboise { --teinte:#e28aa8; --teinte-2:#f2bccd; --teinte-fond:#331f27; } :root[data-theme="sombre"] .t-vanille, :root[data-theme="sombre"].t-vanille { --teinte:#d8bd63; --teinte-2:#ecd99a; --teinte-fond:#2f2a1a; } :root[data-theme="sombre"] .t-givre, :root[data-theme="sombre"].t-givre { --teinte:#79b6d4; --teinte-2:#aed4e6; --teinte-fond:#1c2a32; } :root[data-theme="sombre"] .t-cacao, :root[data-theme="sombre"].t-cacao { --teinte:#c39672; --teinte-2:#dcbb9f; --teinte-fond:#2c2219; } :root[data-theme="sombre"] .t-pistache, :root[data-theme="sombre"].t-pistache { --teinte:#a1c184; --teinte-2:#c4d9b0; --teinte-fond:#212a1d; } :root[data-theme="sombre"] .t-prune, :root[data-theme="sombre"].t-prune { --teinte:#b494c4; --teinte-2:#d0bcda; --teinte-fond:#282030; } :root[data-theme="sombre"] .t-ardoise, :root[data-theme="sombre"].t-ardoise { --teinte:#9aa3ad; --teinte-2:#c0c6cd; --teinte-fond:#23262a; } /* -------------------------------------------------------------------------- 2. Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { /* 112,5 % = 18 px quand le navigateur est réglé par défaut (lisible à 60 cm, mains dans la pâte) — mais en pourcentage, donc quelqu'un qui a agrandi ses polices système garde son agrandissement. Un px fixe l'écraserait. */ font-size: 112.5%; -webkit-text-size-adjust: 100%; background: var(--papier); } body { margin: 0; background: var(--papier); color: var(--encre); font-family: var(--sans); font-size: 1rem; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--teinte); text-underline-offset: .18em; } h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.15; } ::selection { background: var(--surlign); color: var(--encre); } :focus-visible { outline: 2px solid var(--teinte); outline-offset: 2px; border-radius: 2px; } .saut { position: absolute; left: -9999px; background: var(--teinte); color: var(--papier); padding: .6rem 1rem; z-index: 100; } .saut:focus { left: .5rem; top: .5rem; } /* Unité de mesure : toujours en retrait, jamais capitalisée, jamais collée au chiffre. Règle globale, sinon elle se fait happer par les blocs en petites capitales (« 11 093G »). */ .u { padding-left: .2em; font-weight: 400; font-size: .82em; letter-spacing: 0; text-transform: none; color: var(--encre-3); } /* Petites capitales espacées : le liant typographique du carnet. */ .cap { font-family: var(--sans); font-size: .68rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--encre-3); } /* -------------------------------------------------------------------------- 3. En-tête -------------------------------------------------------------------------- */ .entete { position: sticky; top: 0; z-index: 20; background: var(--papier); border-bottom: 1px solid var(--trait); } .entete-in { display: flex; align-items: center; gap: .6rem; max-width: var(--large); margin: 0 auto; padding: .55rem 1.1rem; } .marque { flex: none; font-family: var(--display); font-size: 1.12rem; font-weight: 600; letter-spacing: .01em; color: var(--encre); text-decoration: none; white-space: nowrap; } .marque:hover { color: var(--teinte); } .champ { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; } .champ .loupe { position: absolute; left: .6rem; width: 17px; height: 17px; color: var(--encre-3); pointer-events: none; } .champ input { width: 100%; font: inherit; font-size: .92rem; color: var(--encre); background: var(--papier-2); border: 1px solid transparent; border-radius: 999px; padding: .48rem 2.1rem .48rem 2.1rem; -webkit-appearance: none; appearance: none; } .champ input::placeholder { color: var(--encre-3); } .champ input:focus { outline: none; background: var(--papier); border-color: var(--trait-fort); box-shadow: 0 0 0 3px var(--teinte-fond); } .champ input::-webkit-search-cancel-button { display: none; } #effacer, .btn-theme { display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--encre-3); cursor: pointer; padding: 0; } #effacer { position: absolute; right: .3rem; width: 28px; height: 28px; } #effacer svg { width: 16px; height: 16px; } #effacer:hover { color: var(--encre); } .btn-theme { flex: none; width: 34px; height: 34px; border-radius: 999px; text-decoration: none; } a.btn-theme:hover { color: var(--teinte); background: var(--teinte-fond); } .btn-theme svg { width: 19px; height: 19px; } .btn-theme:hover { color: var(--encre); background: var(--papier-2); } @media (max-width: 400px) { .marque { font-size: 1rem; } .entete-in { gap: .45rem; padding: .5rem .8rem; } } /* -------------------------------------------------------------------------- 4. Structure -------------------------------------------------------------------------- */ main { max-width: var(--large); margin: 0 auto; padding: 1.6rem 1.1rem 4rem; outline: none; } .pied { max-width: var(--large); margin: 0 auto; padding: 1.4rem 1.1rem 2.5rem; border-top: 1px solid var(--trait); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--encre-3); } /* -------------------------------------------------------------------------- 5. Index (accueil, rubrique, résultats) — une seule vue -------------------------------------------------------------------------- */ .titre-page { font-family: var(--display); font-size: 2.1rem; font-weight: 600; letter-spacing: -.015em; margin-bottom: .15rem; } .sous-titre { font-family: var(--display); font-style: italic; font-size: 1.02rem; color: var(--encre-2); margin: 0 0 1.4rem; } /* Filtres par rubrique — remplacent la page intermédiaire */ .filtres { display: flex; gap: .4rem; margin: 0 -1.1rem 1.2rem; padding: .2rem 1.1rem .5rem; overflow-x: auto; scrollbar-width: none; } .filtres::-webkit-scrollbar { display: none; } /* Dès qu'il y a la place, on passe à la ligne : rien de caché hors écran. */ @media (min-width: 40rem) { .filtres { flex-wrap: wrap; overflow-x: visible; row-gap: .45rem; } } .filtre { flex: none; display: inline-flex; align-items: baseline; gap: .35rem; padding: .34rem .78rem; border: 1px solid var(--trait); border-radius: 999px; background: transparent; color: var(--encre-2); font-size: .82rem; text-decoration: none; white-space: nowrap; transition: background .12s, border-color .12s, color .12s; } .filtre:hover { border-color: var(--teinte); color: var(--encre); background: var(--teinte-fond); } .filtre .n { font-size: .7rem; color: var(--encre-3); font-variant-numeric: tabular-nums; } .filtre .l-pastille { background: var(--teinte); margin-right: 0; } .filtre[aria-current="true"] { background: var(--teinte-fond); border-color: var(--teinte); color: var(--teinte-2); font-weight: 500; } .filtre[aria-current="true"] .n { color: var(--teinte-2); opacity: .7; } .filtre.zero { opacity: .45; } .decompte { font-family: var(--sans); font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: var(--encre-3); padding-bottom: .5rem; border-bottom: 1px solid var(--trait-fort); } /* Liste de recettes */ .liste { list-style: none; margin: 0; padding: 0; } .liste li { border-bottom: 1px solid var(--trait); } .ligne { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "titre poids" "meta meta"; align-items: baseline; column-gap: 1rem; padding: .9rem .55rem; margin: 0 -.55rem; text-decoration: none; color: inherit; border-radius: var(--rayon); } .liste.avec-vignette .ligne { grid-template-columns: 58px 1fr auto; grid-template-areas: "vig titre poids" "vig meta meta"; column-gap: .85rem; } .ligne:hover { background: var(--papier-2); } .ligne:hover .l-titre { color: var(--teinte); } .l-vig { grid-area: vig; width: 58px; height: 58px; border-radius: var(--rayon-s); object-fit: cover; background: var(--teinte-fond); align-self: center; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 1.4rem; color: var(--teinte); } .l-titre { grid-area: titre; font-family: var(--display); font-size: 1.14rem; font-weight: 600; line-height: 1.25; } /* Pastille de rubrique : le repère couleur de la liste. La classe de teinte est posée sur la pastille elle-même, donc var(--teinte) se résout ici. */ .l-pastille { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .5rem; vertical-align: .08em; flex: none; background: var(--teinte); } .l-poids { grid-area: poids; font-size: .84rem; font-variant-numeric: tabular-nums; color: var(--encre-3); white-space: nowrap; } .l-meta { grid-area: meta; font-size: .8rem; color: var(--encre-2); margin-top: .12rem; } .l-meta .sep { color: var(--encre-3); padding: 0 .3em; } .l-meta mark, .l-titre mark { background: var(--surlign); color: var(--encre); padding: 0 .12em; border-radius: 2px; } /* Mention discrète, en fin de ligne ou de valeur */ .menu { font-size: .92em; font-style: italic; color: var(--encre-3); } /* Contrôle des données — n'apparaît que s'il y a un problème */ .controle { margin-top: 2.5rem; padding: 1rem 1.1rem; border: 1px solid var(--alerte); border-left-width: 3px; border-radius: var(--rayon); background: var(--alerte-doux); } .controle h2 { color: var(--alerte); margin-bottom: .5rem; } .controle ul { margin: 0; padding-left: 1.1rem; } .controle li { font-size: .88rem; color: var(--encre-2); margin-bottom: .3rem; } .controle a { color: var(--alerte); font-weight: 600; } .rien { font-family: var(--display); font-style: italic; font-size: 1.05rem; color: var(--encre-2); padding: 2.2rem 0; text-align: center; } /* -------------------------------------------------------------------------- 6. Fiche recette -------------------------------------------------------------------------- */ .fil { font-size: .74rem; letter-spacing: .07em; text-transform: uppercase; color: var(--encre-3); margin-bottom: .7rem; } .fil a { color: var(--encre-3); text-decoration: none; } .fil a:hover { color: var(--teinte); text-decoration: underline; } .fil i { font-style: normal; padding: 0 .45em; opacity: .55; } /* --- Bandeau de fiche : photo + titre, dans la teinte de la rubrique --- */ .bandeau { margin: 0 -1.1rem 1.4rem; background: var(--teinte-fond); border-bottom: 4px solid var(--teinte); overflow: hidden; } @media (min-width: 48rem) { .bandeau { margin-left: 0; margin-right: 0; border-radius: var(--rayon); border-bottom-width: 5px; } } .photo-fiche { display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; background: var(--papier-3); } @media (max-width: 30rem) { .photo-fiche { aspect-ratio: 16 / 9; } } .bandeau-txt { padding: 1.1rem 1.1rem 1.2rem; } .rubrique-fiche { display: inline-block; font-size: .68rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--teinte-2); margin-bottom: .35rem; text-decoration: none; } .rubrique-fiche:hover { text-decoration: underline; } .titre-recette { font-family: var(--display); font-size: 2.2rem; font-weight: 600; line-height: 1.06; letter-spacing: -.015em; color: var(--teinte-2); text-wrap: balance; } @media (max-width: 400px) { .titre-recette { font-size: 1.8rem; } } /* Bloc d'identité : étiquettes en petites capitales, valeurs à l'encre. Remplace les pastilles arrondies, illisibles en un coup d'œil. */ .fiche-meta { margin: 0 0 1.5rem; } .fiche-meta > div { display: grid; grid-template-columns: 1fr; gap: .05rem .9rem; padding: .42rem 0; border-top: 1px solid var(--trait); } .fiche-meta > div:last-child { border-bottom: 1px solid var(--trait); } .fiche-meta dt { font-size: .71rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--encre-2); padding-top: .1rem; } .fiche-meta dd { margin: 0; font-size: .96rem; color: var(--encre); } .fiche-meta .sep { color: var(--encre-3); padding: 0 .35em; } .fiche-meta .avert { color: var(--alerte); } .fiche-meta .avert dt { color: var(--alerte); } @media (min-width: 34rem) { .fiche-meta > div { grid-template-columns: 8.2rem 1fr; } } /* --- Calculette : un bandeau typographique, pas un formulaire --- */ .quantites { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1.3rem; padding: .95rem 0; margin-bottom: 1.6rem; border-top: 1px solid var(--trait-fort); border-bottom: 1px solid var(--trait-fort); } .segments { display: inline-flex; border: 1px solid var(--trait-fort); border-radius: var(--rayon); overflow: hidden; } .segments button { font: inherit; font-size: .88rem; font-variant-numeric: tabular-nums; min-height: 42px; padding: 0 .85rem; border: 0; border-left: 1px solid var(--trait); background: transparent; color: var(--encre-2); cursor: pointer; transition: background .12s, color .12s; } .segments button:first-child { border-left: 0; } .segments button:hover { background: var(--papier-2); color: var(--encre); } .segments button[aria-pressed="true"] { background: var(--teinte); color: var(--papier); font-weight: 600; } /* Champs à filet simple : pas de boîte, pas de gris. */ .q-champ { display: inline-flex; align-items: baseline; gap: .4rem; font-size: .68rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--encre-3); } .q-champ input { font-family: var(--sans); font-size: 1.02rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0; text-transform: none; width: 5.4rem; min-height: 40px; padding: 0 .1rem; color: var(--encre); background: transparent; border: 0; border-bottom: 2px solid var(--trait-fort); border-radius: 0; -webkit-appearance: none; appearance: none; } .q-champ input:focus { outline: none; border-bottom-color: var(--teinte); } .q-champ .u { font-size: .85rem; padding-left: 0; } .echelle-active { margin-left: auto; font-family: var(--display); font-size: 1.05rem; color: var(--encre-3); } .echelle-active b { color: var(--teinte); font-variant-numeric: tabular-nums; } /* --- Tableau des ingrédients --- Bridé à --mesure : au-delà, l'écart entre le nom et le chiffre devient une traversée de page et on saute des lignes en pesant. */ .groupe, .total { max-width: var(--mesure); } .groupe + .groupe { margin-top: 2rem; } .groupe-titre { font-size: .68rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--encre-3); padding-bottom: .4rem; margin-bottom: .1rem; border-bottom: 1px solid var(--trait-fort); } .ingr { width: 100%; border-collapse: collapse; } .ingr th { font-family: var(--display); font-weight: 400; font-size: 1.04rem; text-align: left; padding: .72rem .3rem .72rem 0; border-bottom: 1px solid var(--trait); color: var(--encre); } /* Filet de conduite. Sans lui, « Sel ················ 17 g » laisse 10 cm de vide et l'œil change de ligne en route. C'est la solution classique des cartes de restaurant et des sommaires : ici c'est de la sécurité, pas du décor. Le filet se cale seul sur la ligne de base (align-items: baseline), donc aucune valeur magique à réajuster si la taille de police change. */ .ligne-ing { display: flex; align-items: baseline; } .ligne-ing::after { content: ""; flex: 1; min-width: 1.5em; margin-left: .55em; border-bottom: 1px dotted var(--trait-fort); opacity: .6; } .ingr td.q { width: 1%; white-space: nowrap; text-align: right; padding: .72rem 0 .72rem .8rem; border-bottom: 1px solid var(--trait); font-size: 1.04rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--encre); } .ingr td.q.libre { font-family: var(--display); font-style: italic; font-weight: 400; color: var(--encre-3); } .ingr .note-ing { display: block; font-family: var(--sans); font-size: .78rem; line-height: 1.4; color: var(--encre-3); margin-top: .12rem; } .ingr th a { color: var(--teinte); text-decoration-thickness: 1px; } /* Pointer un ingrédient déjà pesé */ .ingr tbody tr { cursor: pointer; } .ingr tbody tr:hover th, .ingr tbody tr:hover td { background: var(--papier-2); } .ingr tbody tr.fait .ligne-ing::after { opacity: .2; } .ingr tbody tr.fait th, .ingr tbody tr.fait td { color: var(--encre-3); opacity: .5; } .ingr tbody tr.fait th { text-decoration: line-through; } .partiel td, .partiel th { padding: .6rem 0; border-bottom: 0; font-family: var(--sans); font-size: .72rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--encre-3); } .partiel td.q { font-size: .88rem; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; color: var(--encre-2); } /* --- Poids total --- */ .total { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: 1.4rem; padding: .85rem 1.1rem; border-radius: var(--rayon); background: var(--teinte-fond); } .total-label { font-size: .72rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--teinte-2); } .total-val { text-align: right; font-size: 1.55rem; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.1; color: var(--teinte-2); } .total-val .u { font-size: .62em; color: var(--teinte); } .total-val small { display: block; font-size: .5em; font-weight: 400; letter-spacing: .05em; color: var(--teinte); opacity: .85; margin-top: .15rem; } /* --- Procédé --- */ .procede { margin-top: 2.6rem; } .procede h2 { font-family: var(--display); font-size: 1.45rem; margin-bottom: .9rem; padding-bottom: .4rem; border-bottom: 1px solid var(--trait-fort); } .procede ol { list-style: none; margin: 0; padding: 0; counter-reset: etape; } .procede li { counter-increment: etape; position: relative; padding: .55rem 0 .55rem 2.6rem; font-family: var(--display); font-size: 1.07rem; line-height: 1.55; } .procede li::before { content: counter(etape); position: absolute; left: 0; top: .62rem; width: 1.85rem; text-align: right; font-family: var(--sans); font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--teinte); } /* --- Notes --- */ .notes { margin-top: 2rem; padding: .2rem 0 .2rem 1.1rem; border-left: 2px solid var(--teinte); } .notes .cap { display: block; margin-bottom: .25rem; } .notes p { margin: 0; font-family: var(--display); font-style: italic; font-size: 1.02rem; color: var(--encre-2); } /* --- Outils de bas de fiche --- */ .outils { margin-top: 2.8rem; padding-top: 1.2rem; border-top: 1px solid var(--trait); display: flex; flex-wrap: wrap; gap: .5rem; } .outils a, .outils button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .95rem; font: inherit; font-size: .85rem; color: var(--encre-2); background: transparent; border: 1px solid var(--trait); border-radius: var(--rayon); text-decoration: none; cursor: pointer; transition: border-color .12s, color .12s, background .12s; } .outils a:hover, .outils button:hover { border-color: var(--trait-fort); color: var(--encre); background: var(--papier-2); } .outils button[aria-pressed="true"] { background: var(--teinte); border-color: var(--teinte); color: var(--papier); } .entete-print { display: none; } /* -------------------------------------------------------------------------- 7. Impression — encre sur papier, toujours, même en mode sombre Priorité inversée par rapport à l'écran : sur une feuille de production, l'élément le plus gros doit être ce qu'on lit à 60 cm (les quantités), pas le titre, qu'on connaît déjà. -------------------------------------------------------------------------- */ @page { margin: 15mm; } @media print { :root, :root[data-theme] { --papier: #fff; --papier-2: #fff; --papier-3: #fff; --encre: #000; --encre-2: #000; --encre-3: #000; --trait: #b0b0b0; --trait-fort: #555; --teinte: #000; --teinte-2: #000; --teinte-fond: #fff; --surlign: none; --alerte: #000; --mesure: 100%; } html { font-size: 11pt; } body { background: #fff; } .no-print, .outils, .quantites, .fil, .controle { display: none !important; } /* Colonne de 13 cm sur une page de 21 cm : la marge droite est large exprès — c'est là qu'on annote une fiche de production au crayon. */ main { max-width: 13cm; padding: 0; margin: 0; } /* En-tête de feuille : le site, la rubrique, la date, et surtout l'échelle. Une fiche qui ne dit pas à quelle échelle elle a été imprimée est dangereuse. « ×1 » doit être écrit, pas sous-entendu. */ .entete-print { display: block; font-size: 8pt; letter-spacing: .1em; text-transform: uppercase; color: #000; margin: 0 0 .5rem; padding-bottom: .3rem; border-bottom: .5pt solid #999; } .entete-print b { font-weight: 700; } /* Le bandeau teinté n'a aucun sens sur papier : on le remet à plat. La photo aussi disparaît — c'est de l'encre pour rien sur une fiche de production, et le titre doit rester en haut de page. */ .bandeau { margin: 0; background: none; border: 0; border-radius: 0; } .bandeau-txt { padding: 0; } .photo-fiche { display: none; } .rubrique-fiche { display: none; } .titre-recette { font-size: 16pt; margin-bottom: .55rem; letter-spacing: -.01em; color: #000; } .total { background: none; padding: .35rem 0 0; border-top: 3px double #555; border-radius: 0; } .l-pastille { display: none; } .fiche-meta { margin-bottom: .7rem; } .fiche-meta > div { padding: .16rem 0; grid-template-columns: 5.5rem 1fr; } .fiche-meta dt { font-size: 7.5pt; color: #000; } .fiche-meta dd { font-size: 10pt; } /* Mention réglementaire : jamais en couleur secondaire. */ .fiche-meta > div:nth-child(2) dd { font-weight: 600; } /* Les ingrédients sont le corps du document : plus gros que le titre ne le laisse croire, et l'unité en noir plein. */ .ingr th { font-size: 12pt; padding: .3rem .3rem .3rem 0; } .ingr td.q { font-size: 12pt; padding: .3rem 0 .3rem .8rem; } .ligne-ing::after { border-bottom-color: #999; opacity: 1; } .ingr td.q .u { font-size: .8em; color: #000; } .ingr .note-ing { font-size: 8.5pt; color: #333; } .ingr tbody tr.fait th, .ingr tbody tr.fait td { opacity: 1; color: #000; text-decoration: none; } .ingr tbody tr:hover th, .ingr tbody tr:hover td { background: none; } .groupe + .groupe { margin-top: .8rem; } .groupe-titre { font-size: 8pt; padding-bottom: .2rem; } .total { margin-top: .5rem; padding-top: .35rem; break-before: avoid; } .total-label { font-size: 8.5pt; } .total-val { font-size: 16pt; } .total-val .u { color: #000; } .total-val small { font-size: .45em; color: #333; } .procede { margin-top: 1.1rem; } .procede h2 { font-size: 13pt; margin-bottom: .4rem; } .procede li { padding: .18rem 0 .18rem 1.9rem; font-size: 11pt; line-height: 1.4; } .procede li::before { font-size: 9pt; width: 1.3rem; top: .3rem; color: #000; } /* Les notes sont de la métadonnée, pas de la production : discrètes. */ .notes { margin-top: .9rem; padding-left: .7rem; border-left: 1.5pt solid #000; } .notes p { font-size: 9pt; } .notes .cap { font-size: 7pt; } a { color: #000; text-decoration: none; } table, tr, td, th, .groupe, .procede li, .notes { break-inside: avoid; } h1, h2, .groupe-titre { break-after: avoid; } } /* -------------------------------------------------------------------------- 8. Confort -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }