/* Un même trait, cinq groupes maximum par carte ; les mots portent l'information. */
.symbole-repere{inline-size:24px;block-size:24px;flex:none;color:var(--bleu-israel);vertical-align:middle}
.symbole-repere.jauge{inline-size:44px}
.reperes-grands{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-block:14px}
.reperes-carte{display:flex;flex-wrap:nowrap;gap:1px;overflow-x:auto;max-inline-size:calc(100% + 40px);margin-block:12px;margin-inline:-20px;padding:2px;scrollbar-width:thin;overscroll-behavior-inline:contain}
.repere{display:flex;align-items:center;gap:8px;min-inline-size:0;min-block-size:52px;padding:8px;border:1px solid var(--bord);border-radius:10px;background:#f7f8f5;color:var(--encre);font-size:14px;line-height:1.35;text-align:start}
.repere-texte{min-inline-size:0}.repere strong{display:block;font-size:inherit;font-weight:500}.repere small{display:block;color:var(--secondaire);font-size:14px;line-height:1.35;margin-block-start:2px}.repere small .symbole-repere{inline-size:14px;block-size:14px;vertical-align:-2px;margin-inline-end:3px;color:currentColor}
.repere:focus-visible{outline:3px solid var(--bleu-israel);outline-offset:3px}.repere.court{background:var(--olive-pale);color:var(--olive)}.repere.long{background:var(--ocre-pale);color:var(--ocre)}
.repere.viande{background:var(--brique-pale);color:var(--brique)}.repere.lait{background:var(--bleu-pale);color:var(--bleu)}.repere.parve{background:#f4f6f3;color:var(--encre)}
.repere.court .symbole-repere,.repere.long .symbole-repere,.repere.viande .symbole-repere,.repere.lait .symbole-repere,.repere.parve .symbole-repere{color:currentColor}
.repere.repere-compact{flex:none;min-inline-size:44px;min-block-size:44px;padding:5px 2px;gap:2px;white-space:nowrap;border-radius:8px}.repere-compact .symbole-repere{inline-size:16px;block-size:20px}.repere-compact .symbole-repere.jauge{inline-size:30px}.repere-compact .repere-texte:has(bdi:empty){display:none}.repere-compact:has(bdi:empty){justify-content:center}.reperes-grands .repere{padding:12px;font-size:18px;min-block-size:76px}.reperes-grands .symbole-repere{inline-size:30px;block-size:30px}.reperes-grands .jauge{inline-size:48px}
.reperes-details{display:flex;flex-wrap:wrap;gap:8px;margin-block:16px}.reperes-details .repere{min-block-size:44px;padding:8px 10px}.reperes-details .symbole-repere{inline-size:22px;block-size:22px}
.filtres-raccourcis{display:flex;flex-wrap:wrap;gap:8px;margin-block:16px}.filtres-raccourcis .bouton{gap:8px;padding:9px 12px;font-size:14px}.filtres-raccourcis [aria-current=true]{background:var(--bleu-pale);border-color:var(--bleu);color:var(--bleu)}
.filtres-legende{font-size:14px;margin-block:12px}.rayon-icone{display:inline-flex;margin-inline-end:5px;vertical-align:middle}.rayon-icone .symbole-repere{inline-size:20px;block-size:20px;color:var(--secondaire)}
.infobulle-repere{position:fixed;z-index:1000;max-inline-size:280px;padding:12px 14px;background:white;color:var(--encre);border:1px solid var(--controle);border-radius:10px;box-shadow:0 6px 24px #292d2920;font-size:14px;line-height:1.5;pointer-events:auto}
.legende-section{margin-block:32px}.legende-section h2{margin-block-end:16px}.legende-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-block:16px}.legende-section>p{max-inline-size:72ch}.legende-grille .repere{min-block-size:64px}
.recette-tete .reperes-grands{margin-block:18px}.recette-tete .reperes-details{margin-block-end:20px}.recette-tete [data-cuisiner]{margin-block:8px 16px}.recette-tete .desc{margin-block-start:16px}
@media(max-width:700px){.legende-grille{grid-template-columns:repeat(2,minmax(0,1fr))}.reperes-grands .repere{padding:10px;font-size:16px}.reperes-details .repere{font-size:14px}}
@media print{.infobulle-repere{display:none!important}.repere{break-inside:avoid}}

/* Photo immédiatement après le titre dans le HTML et sur téléphone. */
.recette-tete{grid-template-areas:"titre photo" "infos photo";grid-template-rows:auto 1fr;row-gap:0}
.recette-intitule{grid-area:titre;min-inline-size:0}
.recette-infos{grid-area:infos;min-inline-size:0}
.recette-tete>.visuel{grid-area:photo;inline-size:100%;block-size:auto;aspect-ratio:4/3;object-fit:cover;align-self:center}
@media(max-width:700px){
  .site .recette-tete{grid-template-areas:"titre" "photo" "infos";grid-template-rows:auto;row-gap:0}
  .recette-tete>.visuel{margin-block:4px 0}
}