/* Popote — feuille de style
   Famille nicolaguel.fr : interface en Instrument Sans, en-tête et pied communs
   avec Aiôn et Silva. Propre à Popote : grands titres manuscrits (Caveat),
   fiche d'ingrédients sur papier ligné, numéros d'étapes manuscrits.
   Un seul thème, clair. */

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

@font-face { font-family: "Instrument Sans"; src: url("/polices/instrument-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/polices/instrument-sans-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/polices/instrument-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/polices/instrument-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("/polices/caveat-600.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

/* ---------------------------------------------------------------- jetons */

:root {
    color-scheme: light;

    /* Couleurs — contrastes mesurés sur --papier et --fiche */
    --papier: #f4efe4;      /* fond de page */
    --fiche: #fffcf5;       /* feuille de recette, cartes */
    --encre: #26221d;       /* texte — 14:1 */
    --encre-douce: #5c564d; /* métadonnées — 6,3:1 */
    --filet: #ddd4c1;       /* filets, bords */
    --rouge: #b5161e;       /* accent : titres manuscrits, liens, numéros — 5,9:1 */
    --rouge-fonce: #8e1117;
    --rouge-pale: #f6e0d9;  /* fond des étiquettes */
    --bordeaux: #6e1f1f;    /* texte des étiquettes — 8,8:1 sur rouge pâle */
    --vert: #2a7334;        /* coches des ingrédients — 5:1 */
    --ligne: #d9d3ea;       /* lignes du papier (décor) */
    --marge: #eab3ad;       /* marge rouge du cahier (décor) */

    --interface: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
    --manuscrit: "Caveat", "Segoe Print", "Bradley Hand", cursive;

    --colonne: 36rem;
    --large: 62rem;
    --gouttiere: 1rem;
    --interligne: 2.25rem;  /* hauteur d'une ligne d'ingrédient */
}

/* ---------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1.5rem; }
body {
    margin: 0; background: var(--papier); color: var(--encre);
    font-family: var(--interface); font-size: 1.125rem; line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--rouge); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--rouge-fonce); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--rouge); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { line-height: 1.1; margin: 0; text-wrap: balance; }
h2 { font-weight: 600; font-size: 1.35rem; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
strong { font-weight: 600; }

/* ---------------------------------------------------------------- en-tête et pied (socle commun) */

.site-entete {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem;
    max-width: var(--large); margin: 0 auto; padding: 1rem var(--gouttiere);
}
.marque {
    display: inline-flex; align-items: center; gap: .55rem;
    font-weight: 600; font-size: 1.5rem; letter-spacing: -.03em; color: var(--encre); text-decoration: none;
}
.marque img { width: 40px; height: auto; }
.marque:hover { color: var(--rouge); }
.site-entete nav { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; font-size: .95rem; font-weight: 500; }
.site-entete nav a { color: var(--encre); text-decoration: none; padding: .55rem 0; }
.site-entete nav a:hover, .site-entete nav a[aria-current] { color: var(--rouge); }
.site-entete nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .4em; }

.site-pied {
    max-width: var(--large); margin: 5rem auto 0; padding: 2rem var(--gouttiere) 3rem;
    border-top: 1px solid var(--filet); color: var(--encre-douce); font-size: .9rem;
}
.site-pied img { width: 40px; margin-bottom: .8rem; }
.site-pied p { margin-bottom: .4rem; }
.site-pied a { color: var(--encre-douce); }
.site-pied a:hover { color: var(--rouge); }
.marque-pied { font-weight: 600; color: var(--encre); margin-right: .3rem; }

/* ---------------------------------------------------------------- commandes */

.lien-fleche { font-weight: 600; color: var(--rouge); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; }
.bouton, .filtre {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem;
    border: 1px solid var(--rouge); border-radius: 3px; background: var(--fiche);
    color: var(--rouge); font: 500 .95rem var(--interface); cursor: pointer;
}
.bouton:hover, .filtre:hover { background: var(--rouge-pale); }
.bouton[aria-pressed="true"], .filtre[aria-pressed="true"] { background: var(--rouge); color: #fff; }
[hidden] { display: none !important; }

.ariane { font-size: .9rem; color: var(--encre-douce); margin-bottom: 1rem; }
.ariane a { color: var(--encre-douce); }
.ariane a:hover { color: var(--rouge); }

/* ---------------------------------------------------------------- accueil */

.ouverture, .hasard, .toutes, .liste, .simple { max-width: var(--large); margin: 0 auto; padding: 0 var(--gouttiere); }
.ouverture { padding-top: 1.5rem; padding-bottom: 1rem; }
.ouverture h1 { font: 600 clamp(4rem, 3rem + 6vw, 6.5rem)/.9 var(--manuscrit); color: var(--rouge); }
.sous-titre { font-size: 1.35rem; font-weight: 500; margin: .4rem 0 .3rem; }
.devise { color: var(--encre-douce); margin-bottom: 1.75rem; }

.recherche { display: grid; gap: .6rem; max-width: 40rem; }
.recherche label { font-weight: 600; }
.recherche input {
    width: 100%; min-height: 48px; padding: .5rem .85rem; border: 1px solid var(--encre-douce); border-radius: 3px;
    background: var(--fiche); color: var(--encre); font: 400 1.05rem var(--interface);
}
.filtres { display: flex; flex-wrap: wrap; gap: .5rem; }

.hasard { margin-top: 2.5rem; }
.hasard h2, .toutes h2, .voisines h2 { margin-bottom: .9rem; }
.hasard-carte {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem;
    background: var(--fiche); border: 1px solid var(--filet); border-radius: 3px; padding: .6rem;
    color: var(--encre); text-decoration: none; margin-bottom: .8rem;
}
.hasard-carte img, .hasard-carte .carte-sans-photo { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.hasard-texte { display: flex; flex-direction: column; gap: .4rem; padding: 0 .4rem .4rem; min-width: 0; }
.hasard-carte .carte-titre { font-size: 1.4rem; }
.hasard-carte:hover .carte-titre { color: var(--rouge); text-decoration: underline; }
@media (min-width: 44rem) {
    .hasard-carte { grid-template-columns: 22rem minmax(0, 1fr); align-items: center; }
    .hasard-texte { padding: .5rem 1rem; }
}

.toutes { margin-top: 3rem; }
.compte { color: var(--encre-douce); font-size: .95rem; }

/* ---------------------------------------------------------------- cartes */

.cartes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem 1.25rem;
          grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.carte a {
    display: flex; flex-direction: column; gap: .35rem; height: 100%;
    background: var(--fiche); border: 1px solid var(--filet); border-radius: 3px; padding: .5rem .5rem .9rem;
    color: var(--encre); text-decoration: none;
}
.carte img, .carte-sans-photo { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--papier); margin-bottom: .35rem; }
.carte-sans-photo { display: grid; place-items: center; font-size: 3rem; border: 1px dashed var(--filet); }
.carte-titre { font-weight: 600; font-size: 1.1rem; line-height: 1.25; padding: 0 .3rem; }
.carte-resume { color: var(--encre-douce); font-size: .95rem; line-height: 1.45; padding: 0 .3rem; }
.carte-cat { margin-top: auto; padding: .2rem .3rem 0; font-size: .85rem; font-weight: 500; color: var(--bordeaux); }
.carte a:hover .carte-titre { color: var(--rouge); text-decoration: underline; text-decoration-thickness: 1px; }
.carte a:hover { border-color: var(--encre-douce); }

/* ---------------------------------------------------------------- fiche recette */

.recette { max-width: var(--large); margin: 0 auto; padding: 0 var(--gouttiere); }
.titraille { max-width: 46rem; padding-top: 1.5rem; margin-bottom: 1.5rem; }
.titraille h1 { font: 600 clamp(2.6rem, 2rem + 3vw, 4rem)/1 var(--manuscrit); color: var(--rouge); margin-bottom: .8rem; }
.chapo { font-style: italic; font-size: 1.2rem; line-height: 1.5; margin-bottom: .6rem; }
.infos { font-size: .92rem; color: var(--encre-douce); margin-bottom: .6rem; }
.aller { font-size: .95rem; font-weight: 600; margin: 0; }

.photo { margin: 0 0 1.25rem; }
.photo img { width: 100%; max-height: 32rem; object-fit: cover; border-radius: 3px; background: var(--fiche); }
.credit { font-size: .8rem; color: var(--encre-douce); margin-top: .45rem; text-align: right; }
.credit a { color: var(--encre-douce); }
@media (max-width: 40rem) { .photo img { max-height: 16rem; } }

.outils { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }

.feuille { background: var(--fiche); border: 1px solid var(--filet); border-radius: 3px; padding: 1.5rem 1rem; }
@media (min-width: 40rem) { .feuille { padding: 2.5rem 2.75rem; } }
.corps { max-width: var(--colonne); }
.corps h2 { font: 600 2.1rem/1.1 var(--manuscrit); color: var(--rouge); margin: 2rem 0 .75rem; }
.corps h3 { font-size: 1.1rem; font-weight: 600; margin: 1.75rem 0 .6rem; }
.corps > .sec:first-child > h2, .sec > :first-child { margin-top: 0; }
.corps ul, .corps ol { padding-left: 1.2rem; }
.corps li { margin-bottom: .4rem; }
.corps blockquote { margin: 0 0 1rem; padding-left: 1rem; border-left: 3px solid var(--filet); font-style: italic; }
.sec + .sec { margin-top: 2rem; }

/* Ingrédients : papier ligné à marge rouge, une ligne par ingrédient, coche verte */
.sec-ingredients {
    padding: 1rem 1rem .5rem 2rem; border: 1px solid var(--filet); border-radius: 3px;
    background: linear-gradient(90deg, transparent calc(1.5rem - 1px), var(--marge) calc(1.5rem - 1px), var(--marge) 1.5rem, transparent 1.5rem), var(--fiche);
}
.sec-ingredients h2 { margin: 0 0 .4rem; }
.sec-ingredients ul {
    list-style: none; padding: 0; margin: 0 0 1rem; line-height: var(--interligne);
    background: repeating-linear-gradient(180deg, transparent 0 calc(var(--interligne) - 1px), var(--ligne) calc(var(--interligne) - 1px) var(--interligne));
}
.sec-ingredients li { margin: 0; position: relative; padding-left: 1.6rem; }
.sec-ingredients li::before {
    content: ""; position: absolute; left: .3rem; top: calc(var(--interligne) / 2 - .68rem);
    width: .5rem; height: .95rem; border: solid var(--vert); border-width: 0 .2rem .2rem 0; transform: rotate(40deg);
}
.sec-ingredients p { line-height: 1.5; }

/* Étapes : grands numéros manuscrits */
.sec-etapes, .sec-etapes h3 { counter-reset: etape; }
.sec-etapes ul, .sec-etapes ol { list-style: none; padding: 0; }
.sec-etapes li {
    counter-increment: etape; position: relative; padding: 0 0 .75rem 3.1rem; margin: 0 0 .75rem;
    border-bottom: 1px dashed var(--filet); min-height: 2.6rem;
}
.sec-etapes li::before {
    content: counter(etape); position: absolute; left: 0; top: -.2rem; width: 2.25rem; text-align: right;
    color: var(--rouge); font: 600 2.2rem/1 var(--manuscrit);
}
.sec-etapes li li { counter-increment: none; padding-left: 0; border: 0; min-height: 0; }
.sec-etapes li li::before { content: none; }

.figure { margin: 1.5rem 0; }
.figure img { width: 100%; border-radius: 3px; }

/* Ingrédients à gauche pendant qu'on lit les étapes, sur grand écran */
@media (min-width: 64rem) {
    .corps-deux-colonnes { max-width: none; display: grid; column-gap: 3rem; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); grid-auto-flow: row dense; }
    .corps-deux-colonnes > * { grid-column: 2; min-width: 0; max-width: var(--colonne); }
    .corps-deux-colonnes > .sec-ingredients { grid-column: 1; grid-row: 1 / span 40; align-self: start; position: sticky; top: 1rem; margin: 0; }
    .corps-deux-colonnes > .sec + .sec { margin-top: 0; }
    .corps-deux-colonnes > .sec:not(.sec-ingredients) + .sec:not(.sec-ingredients) { margin-top: 2rem; }
}

.apres { margin-top: 3rem; }
.voisines { margin-bottom: 2rem; }
.mots { font-size: .92rem; color: var(--encre-douce); }
.mots a { color: var(--encre-douce); }
.mots a:hover { color: var(--rouge); }

/* ---------------------------------------------------------------- listes et pages simples */

.liste { padding-top: 1.5rem; }
.liste h1, .simple h1 { font: 600 clamp(2.6rem, 2rem + 3vw, 4rem)/1 var(--manuscrit); color: var(--rouge); margin-bottom: .6rem; }
.liste .compte { margin-bottom: 1.5rem; }
.termes { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.termes a { display: inline-block; padding: .3rem .8rem; border-radius: 999px; background: var(--rouge-pale); color: var(--bordeaux); text-decoration: none; }
.termes a:hover { text-decoration: underline; }
.termes span { color: var(--encre-douce); font-size: .85rem; }
.simple { padding-top: 1.5rem; max-width: calc(var(--colonne) + 2 * var(--gouttiere)); }

/* ---------------------------------------------------------------- impression : l'essentiel, sans décor */

@media print {
    :root { --papier: #fff; --fiche: #fff; --encre: #000; --rouge: #000; }
    body { font-size: 11pt; }
    .site-entete, .site-pied, .outils, .aller, .ariane, .photo, .figure, .apres { display: none !important; }
    .feuille { border: 0; padding: 0; }
    .sec-ingredients { background: none; border: 1px solid #999; break-inside: avoid; }
    .corps-deux-colonnes { display: block !important; }
    .sec-etapes li { break-inside: avoid; border: 0; padding-bottom: 0; }
    a { color: inherit; text-decoration: none; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }