:root {
  --paper: #EAE4D6;
  --paper-card: #F5F1E7;
  --ink: #241A14;
  --ink-soft: #5C4F42;
  --cardamome: #6B7A46;
  --cardamome-deep: #4E5A34;
  --gold: #AD7F2A;
  --line: #D6CCB8;
  --rayon: 3px;
  --espace: 1.5rem;
  --font-display: "CMU Serif", Charter, "Iowan Old Style", Cambria, Georgia, serif;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 112.5%; /* ~18px base */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

img { max-width: 100%; height: auto; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  line-height: 1.65;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--cardamome);
  color: #fff;
  padding: 0.75rem 1rem;
  z-index: 10;
}
.skip-link:focus { left: 0; }

a { color: var(--cardamome-deep); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--cardamome);
  outline-offset: 2px;
}

.site-header {
  border-bottom: 1px solid var(--line);
  padding: 1.1rem var(--espace);
}
.header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  max-width: 46rem;
  margin: 0 auto;
}
.site-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  text-decoration: none;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.site-nav {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
}
.site-nav a:not(.site-title) {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.95rem;
}
.site-nav a:not(.site-title):hover { color: var(--ink); }

/* Barre d'accessibilité — volontairement discrète, l'accent principal reste pour les actions clés */
.a11y-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.a11y-bar button {
  min-height: 40px;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--rayon);
  background: var(--paper-card);
  color: var(--ink);
  font-size: 0.85rem;
  cursor: pointer;
}
.a11y-bar button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* Tailles de texte */
html.taille-sm { font-size: 100%; }
html.taille-md { font-size: 112.5%; }
html.taille-lg { font-size: 128%; }
html.taille-xl { font-size: 145%; }

/* Contraste élevé (WCAG AAA) */
html.contraste-eleve {
  --paper: #ffffff;
  --paper-card: #ffffff;
  --ink: #000000;
  --ink-soft: #000000;
  --cardamome: #35401f;
  --cardamome-deep: #35401f;
  --line: #000000;
}
html.contraste-eleve a { text-decoration: underline; }
html.contraste-eleve .poste { border-width: 2px; }

/* Lecture espacée */
html.lecture-espacee body {
  letter-spacing: 0.04em;
  word-spacing: 0.12em;
  line-height: 1.9;
}
html.lecture-espacee .etape-action,
html.lecture-espacee h1,
html.lecture-espacee h2,
html.lecture-espacee h3 {
  font-weight: 700;
}

main {
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 var(--espace) 5rem;
}

.site-footer {
  text-align: center;
  color: var(--ink-soft);
  padding: 2rem var(--espace);
  font-size: 0.85rem;
  border-top: 1px solid var(--line);
  margin-top: 3rem;
}
.footer-nav {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  margin: 1rem 0;
}
.footer-nav a { color: var(--ink-soft); text-decoration: none; }
.footer-nav a:hover { color: var(--ink); text-decoration: underline; }
.site-footer .copyright { margin: 0; font-size: 0.8rem; }

h1 { font-family: var(--font-display); font-size: 2.1rem; line-height: 1.2; margin-bottom: 0.5rem; font-weight: 700; }
h2 { font-family: var(--font-display); font-size: 1.5rem; margin-top: 2.5rem; font-weight: 700; }
h3 { font-size: 1.1rem; margin-bottom: 0.25rem; font-weight: 700; }

/* --- Accueil : hero, mission, liens --- */
.hero {
  padding: 3.5rem 0 2rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 2.5rem;
}
.hero .accroche {
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 32rem;
  margin: 0 0 2rem;
}
.hero-demo {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--rayon);
  padding: 1.1rem 1.3rem;
  max-width: 30rem;
}
.hero-demo p {
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-transform: none;
}
.hero-demo-ligne {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0;
  font-size: 0.95rem;
}
.hero-demo-ligne input { width: 18px; height: 18px; accent-color: var(--cardamome); }
.hero-demo-fleche {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--line);
  font-size: 0.85rem;
  color: var(--cardamome-deep);
  font-weight: 600;
}

.mission {
  display: flex;
  gap: 2.5rem;
  align-items: center;
  max-width: 40rem;
  margin: 1rem 0 3rem;
}
.mission-photo {
  width: 11rem;
  height: 14rem;
  object-fit: cover;
  border-radius: var(--rayon);
  flex-shrink: 0;
}
.mission-texte { font-size: 1.05rem; }
.mission-texte p { margin: 0 0 1.1rem; }
.mission-texte p:last-child { margin-bottom: 0; }
@media (max-width: 32rem) {
  .mission { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .mission-photo { width: 100%; height: auto; max-height: 20rem; }
}

.liens {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.9rem;
  margin: 1.5rem 0 3rem;
}
.lien-carte {
  display: block;
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--rayon);
  padding: 1.1rem 1.2rem;
  text-decoration: none;
  color: var(--ink);
}
.lien-carte:hover { border-color: var(--cardamome); }

/* Liens réseaux sociaux : logo à gauche du nom, teinté de la couleur du texte */
.lien-reseau .lien-label {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.icone-reseau {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--icone) center / contain no-repeat;
  mask: var(--icone) center / contain no-repeat;
}
.icone-tiktok    { --icone: url("/images/icones/tiktok.svg"); }
.icone-instagram { --icone: url("/images/icones/instagram.svg"); }
.lien-label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
}
.lien-desc {
  display: block;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: 0.25rem;
}

.produit-note { display: block; font-size: 0.82rem; color: var(--ink-soft); }

.intro { color: var(--ink-soft); max-width: 38rem; }

.liste-recettes {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
}
.liste-recettes li + li { border-top: 1px solid var(--line); }
.liste-recettes a {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0.5rem;
  text-decoration: none;
  color: inherit;
  min-height: 44px;
}
.recette-miniature {
  width: 4.5rem;
  height: 4.5rem;
  object-fit: cover;
  border-radius: var(--rayon);
  flex-shrink: 0;
  background: var(--paper-card);
}
.recette-miniature-vide { border: 1px dashed var(--line); }
.recette-texte { display: block; }
.recette-nom {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--cardamome-deep);
}
.recette-resume {
  display: block;
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin-top: 0.2rem;
}
.vide { color: var(--ink-soft); font-style: italic; }

.retour {
  display: inline-block;
  margin: 1.5rem 0 1rem;
  text-decoration: none;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.recette { padding-top: 2.5rem; display: block; }
.recette-desc { color: var(--ink-soft); font-size: 1.05rem; }

/* En-tête de recette : texte à gauche, photo d'illustration à droite.
   Les bases flex sont en rem : l'en-tête repasse de lui-même en colonne
   quand la place manque, y compris avec les tailles de texte agrandies. */
.recette-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.75rem 2rem;
  margin-bottom: 2.5rem;
}
.recette-entete-texte {
  flex: 1 1 20rem;
  min-width: 0;
}
.recette-entete-texte > h1 { margin-top: 0; }
.recette-entete-texte > :last-child { margin-bottom: 0; }
.recette-illustration {
  flex: 0 1 16rem;
  max-width: 100%;
  margin: 0.4rem 0 0;
}
.recette-illustration img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--rayon);
  background: var(--paper-card);
}
.recette-illustration figcaption {
  margin-top: 0.55rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
html.contraste-eleve .recette-illustration img { border-width: 2px; }

.recette-infos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  margin: 1.25rem 0 2rem;
  padding: 0;
}
.recette-infos div { margin: 0; }
.recette-infos dt {
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.recette-infos dd { margin: 0; font-weight: 600; }

.groupes-ingredients {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1.25rem;
  margin: 1.25rem 0 2rem;
}
.groupe-ingredients h3 { font-family: var(--font-ui); font-size: 0.95rem; margin-bottom: 0.4rem; }
.groupe-ingredients ul { margin: 0; padding-left: 1.1rem; }
.groupe-ingredients li { margin-bottom: 0.2rem; }

.liste-recipients {
  margin: 1.25rem 0 2rem;
  padding-left: 1.1rem;
}
.liste-recipients li { margin-bottom: 0.4rem; }

.note-postes {
  color: var(--ink-soft);
  font-size: 0.98rem;
  border-left: 3px solid var(--cardamome);
  padding-left: 1rem;
}

.postes { list-style: none; padding: 0; margin: 1.5rem 0 2rem; }
.poste {
  border: 1px solid var(--line);
  border-radius: var(--rayon);
  margin-bottom: 1rem;
  background: var(--paper-card);
  position: relative;
}
.poste summary {
  cursor: pointer;
  padding: 1.1rem 1.4rem;
  list-style: none;
}
.poste summary::-webkit-details-marker { display: none; }
.poste summary::before {
  content: "+";
  display: inline-block;
  width: 1.2rem;
  font-weight: 700;
  color: var(--cardamome-deep);
}
.poste[open] summary::before { content: "–"; }
.poste-titre { font-weight: 700; }
.poste[open] summary { border-bottom: 1px solid var(--line); margin-bottom: 1.1rem; }
.poste > img,
.poste > ol.etapes {
  margin-left: 1.4rem;
  margin-right: 1.4rem;
}
.poste > ol.etapes { padding-bottom: 1.1rem; }
.poste-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.25rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin-top: 0.3rem;
}
.poste-duree { font-weight: 600; color: var(--cardamome-deep); }
.poste-image {
  display: block;
  width: calc(100% - 2.8rem);
  max-height: 28rem;
  object-fit: contain;
  border-radius: var(--rayon);
  margin: 0 1.4rem 1rem;
  background: var(--paper);
}

.sommaire {
  border: 1px solid var(--line);
  border-radius: var(--rayon);
  padding: 1rem 1.4rem;
  margin: 1.5rem 0;
  background: var(--paper-card);
}
.sommaire ol { margin: 0; padding-left: 1.2rem; }
.sommaire li { margin-bottom: 0.35rem; }
.sommaire a { color: var(--cardamome-deep); text-decoration: none; }
.sommaire a:hover { text-decoration: underline; }
.sommaire-duree { color: var(--ink-soft); font-size: 0.88rem; }
.sommaire-categories > li { margin-bottom: 0.9rem; }
.sommaire-categories > li:last-child { margin-bottom: 0; }
.sommaire-categorie { font-weight: 700; }
.sommaire ol.sommaire-postes {
  list-style: none;
  padding-left: 0;
  margin: 0.35rem 0 0;
}
.sommaire-postes li:last-child { margin-bottom: 0; }

.categorie-etape {
  font-family: var(--font-ui);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin: 2rem 0 0.75rem;
  scroll-margin-top: 1rem;
}
.categorie-numero { color: var(--cardamome-deep); }

.etapes { list-style: none; padding: 0; margin: 0; }
.etape { margin-bottom: 1.35rem; }
.etape:last-child { margin-bottom: 0; }
.etape-action { margin: 0 0 0.25rem; }
/* --- Les « pourquoi » en bulles dépliables ---
   Chaque explication est un disclosure : un déclencheur discret sous le geste,
   et une bulle qui s'ouvre juste en dessous, dans le flux du texte. Pensée en
   flux plutôt qu'en infobulle flottante parce que ces textes font plusieurs
   phrases : ils doivent pouvoir être lus tranquillement, rester sélectionnables,
   trouvables au Ctrl+F et ne jamais être rognés, même à 145 % de taille de texte.
   Sans JavaScript, tout reste affiché en clair (voir le bloc html.js plus bas). */
.pourquoi { margin: 0.4rem 0 0; }
.pourquoi-declencheur { display: none; }
.pourquoi-bulle {
  margin: 0;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.pourquoi-bulle p { margin: 0; }
.label-pourquoi { font-weight: 600; color: var(--ink); }

/* Contrôle global, également réservé au mode avec JavaScript */
.pourquoi-controle { display: none; }

html.js .pourquoi-controle {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin: 1.5rem 0 0.25rem;
}
.pourquoi-controle-texte {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.pourquoi-tout {
  min-height: 40px;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--rayon);
  background: var(--paper-card);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.pourquoi-tout:hover { border-color: var(--cardamome); }
.pourquoi-tout[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

html.js .pourquoi-declencheur {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.2rem;
  padding: 0.3rem 0.9rem 0.3rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--cardamome-deep);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
}
html.js .pourquoi-declencheur:hover {
  border-color: var(--cardamome);
  color: var(--ink);
}
html.js .pourquoi-declencheur[aria-expanded="true"] {
  background: var(--cardamome-deep);
  border-color: var(--cardamome-deep);
  color: var(--paper-card);
}
.pourquoi-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--cardamome);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
}
html.js .pourquoi-declencheur[aria-expanded="true"] .pourquoi-icone {
  background: var(--paper-card);
  color: var(--cardamome-deep);
}

html.js .pourquoi-bulle { display: none; }
html.js .pourquoi-bulle.est-ouverte {
  display: block;
  position: relative;
  margin: 0.65rem 0 0.25rem;
  padding: 0.85rem 1.1rem;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--cardamome);
  border-radius: 10px;
  color: var(--ink);
  box-shadow: 0 2px 10px rgba(36, 26, 20, 0.07);
  animation: pourquoi-apparition 160ms ease-out;
}
/* La pointe de la bulle : deux triangles superposés pour garder le liseré */
html.js .pourquoi-bulle.est-ouverte::before,
html.js .pourquoi-bulle.est-ouverte::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}
html.js .pourquoi-bulle.est-ouverte::before {
  top: -9px;
  left: 1.5rem;
  border-width: 0 9px 9px;
  border-color: transparent transparent var(--line);
}
html.js .pourquoi-bulle.est-ouverte::after {
  top: -8px;
  left: calc(1.5rem + 1px);
  border-width: 0 8px 8px;
  border-color: transparent transparent #fff;
}
@keyframes pourquoi-apparition {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
html.js .label-pourquoi { display: none; }

html.contraste-eleve.js .pourquoi-bulle.est-ouverte {
  border-width: 2px;
  border-left-width: 4px;
}
html.contraste-eleve.js .pourquoi-bulle.est-ouverte::before { border-bottom-color: #000; }
html.contraste-eleve.js .pourquoi-declencheur { border-width: 2px; }

/* À l'impression, aucune interaction possible : tout est déplié. */
@media print {
  .pourquoi-declencheur,
  .pourquoi-controle { display: none !important; }
  html.js .pourquoi-bulle,
  html.js .pourquoi-bulle.est-ouverte {
    display: block !important;
    box-shadow: none;
    animation: none;
  }
  html.js .label-pourquoi { display: inline; }
}

.prompt-block {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--rayon);
  padding: 1.5rem 1.4rem;
  margin-top: 2.5rem;
}
.prompt-block h2 { margin-top: 0; }

.besoins-fieldset {
  border: 1px solid var(--line);
  border-radius: var(--rayon);
  padding: 1rem 1.25rem 1.25rem;
  margin: 1.25rem 0;
  background: #fff;
}
.besoins-fieldset legend {
  font-weight: 700;
  padding: 0 0.4rem;
  font-family: var(--font-display);
}
.besoin-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
}
.besoin-item:last-child { border-bottom: none; }
.besoin-item input[type="checkbox"] {
  width: 22px;
  height: 22px;
  margin-top: 0.15rem;
  flex-shrink: 0;
  accent-color: var(--cardamome);
}
.besoin-item label { cursor: pointer; }
.besoin-libre { flex-direction: column; align-items: stretch; }
.besoin-libre textarea {
  width: 100%;
  font: inherit;
  padding: 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--rayon);
  margin-top: 0.4rem;
  resize: vertical;
}

.champ-libre { margin-bottom: 1rem; }
.champ-libre label { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.champ-libre input[type="text"] {
  width: 100%;
  min-height: 44px;
  font: inherit;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--rayon);
}
.prompt-texte-wrapper { position: relative; }
.prompt-texte {
  white-space: pre-wrap;
  word-wrap: break-word;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--rayon);
  padding: 1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88rem;
  line-height: 1.55;
  max-height: 20rem;
  overflow-y: auto;
}
.copier-btn {
  margin-top: 0.75rem;
  min-height: 44px;
  padding: 0.65rem 1.25rem;
  border: none;
  border-radius: var(--rayon);
  background: var(--cardamome);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
.copier-btn:hover { background: var(--cardamome-deep); }
.copier-btn.copie { background: #2f7a3d; }

/* Icônes d'ustensiles : décoratives, alignées sur la ligne de texte.
   Elles héritent de currentColor, donc suivent le mode contraste élevé
   sans règle supplémentaire. Le texte reste seul porteur de l'information. */
.icone-ustensile {
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.2em;
  margin-right: 0.4em;
  flex-shrink: 0;
  opacity: 0.75;
}
.liste-recipients li { display: flex; align-items: flex-start; }
.liste-recipients .icone-ustensile { margin-top: 0.15em; }
.poste-ustensile { display: inline-flex; align-items: center; }
html.contraste-eleve .icone-ustensile { opacity: 1; stroke-width: 2; }

/* Icônes d'ustensiles : décoratives, alignées sur la ligne de texte.
   Elles héritent de currentColor, donc suivent le mode contraste élevé
   sans règle supplémentaire. Le texte reste seul porteur de l'information. */
.icone-ustensile {
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.2em;
  margin-right: 0.4em;
  flex-shrink: 0;
  opacity: 0.75;
}
.liste-recipients li { display: flex; align-items: flex-start; }
.liste-recipients .icone-ustensile { margin-top: 0.15em; }
.poste-ustensile { display: inline-flex; align-items: center; }
html.contraste-eleve .icone-ustensile { opacity: 1; stroke-width: 2; }

/* Carte de parrainage avec code à copier : le code doit se lire et se copier
   sans effort, les deux parcours (code / lien direct) devant se valoir. */
.carte-code { cursor: default; }
.carte-code:hover { border-color: var(--line); }
.code-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.7rem 0 0.5rem;
}
.code-ligne code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: var(--paper);
  border: 1px dashed var(--line);
  border-radius: var(--rayon);
  padding: 0.35rem 0.6rem;
}
.copier-code {
  min-height: 38px;
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
  margin-top: 0;
}
.code-lien { display: inline-block; font-size: 0.88rem; }

/* --- Barre de progression sticky : position dans le déroulé de la recette.
   Injectée en JS (barre-progression.js), absente sans JavaScript : la page
   reste utilisable et le sommaire classique suffit dans ce cas. --- */
.barre-progression {
  position: sticky;
  top: 0;
  z-index: 15;
  background: var(--paper-card);
  border-bottom: 1px solid var(--line);
  margin: 0 calc(-1 * var(--espace));
}
.barre-resume {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  width: 100%;
  max-width: 46rem;
  min-height: 44px;
  margin: 0 auto;
  padding: 0.5rem var(--espace);
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.barre-compte {
  font-size: 0.78rem;
  color: var(--ink-soft);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.barre-poste {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--cardamome-deep);
}
.barre-chevron {
  flex-shrink: 0;
  font-size: 0.8rem;
  color: var(--ink-soft);
  transition: transform 150ms ease;
}
.barre-progression.est-ouverte .barre-chevron { transform: rotate(180deg); }

.barre-liste {
  max-width: 46rem;
  margin: 0 auto;
  max-height: 0;
  overflow: hidden;
  transition: max-height 200ms ease;
}
.barre-progression.est-ouverte .barre-liste {
  max-height: 60vh;
  overflow-y: auto;
}
.barre-liste ol {
  list-style: none;
  margin: 0;
  padding: 0 var(--espace) 0.6rem;
}
.barre-liste li { border-top: 1px solid var(--line); }
.barre-liste li:first-child { border-top: none; }
.barre-liste a {
  display: block;
  min-height: 44px;
  padding: 0.6rem 0;
  text-decoration: none;
  color: var(--ink);
  font-size: 0.9rem;
}
.barre-liste li.est-actif a { color: var(--cardamome-deep); font-weight: 700; }

html.contraste-eleve .barre-progression { border-bottom-width: 2px; }

@media print {
  .barre-progression { display: none !important; }
}


/* --- Avertissement : point d'ordre ou de timing critique dans une recette --- */
.avertissement {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0.75rem 0 1.25rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--gold);
  border-left-width: 5px;
  border-radius: var(--rayon);
  background: var(--paper-card);
  color: var(--ink);
}
.avertissement-icone {
  flex: 0 0 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.15rem;
  color: var(--gold);
}
.avertissement a { color: var(--cardamome-deep); }
html.contraste-eleve .avertissement { border-width: 2px; border-left-width: 6px; }
html.contraste-eleve .avertissement-icone { color: currentColor; }

/* --- Note de pause en bas d'un poste --- */
.poste > .pause-note {
  margin: 0 1.4rem 1.1rem;
  font-size: 0.92rem;
  font-style: italic;
  color: var(--ink-soft);
}

/* --- Bulles « Je n'ai pas cet ingrédient » ---
   Sous chaque ingrédient qui a une alternative. Même mécanique que les
   « pourquoi » (bulle dans le flux, lisible à toutes les tailles de texte),
   mais couleur or et pictogramme d'échange pour ne jamais les confondre.
   Sans JavaScript, les alternatives restent affichées en clair. */
.groupes-ingredients-larges { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.substitut-note {
  color: var(--ink-soft);
  font-size: 0.92rem;
  margin: 0 0 0.5rem;
}
.groupe-ingredients li.ingredient { margin-bottom: 0.55rem; }
.substitut { margin: 0.3rem 0 0; }
.substitut-declencheur { display: none; }
.substitut-bulle {
  margin: 0.2rem 0 0;
  padding-left: 0.75rem;
  border-left: 3px solid var(--gold);
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.substitut-bulle p { margin: 0 0 0.45rem; }
.substitut-bulle p:last-child { margin-bottom: 0; }
.label-substitut { font-weight: 700; color: var(--ink); }
.substitut-rubrique { font-weight: 700; color: var(--ink); }

html.js .substitut-declencheur {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.2rem;
  padding: 0.25rem 0.8rem 0.25rem 0.4rem;
  border: 1px dashed var(--gold);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}
html.js .substitut-declencheur:hover { border-style: solid; }
html.js .substitut-declencheur[aria-expanded="true"] {
  background: #7A5815;
  border: 1px solid #7A5815;
  color: #fff;
}
.substitut-icone {
  flex: 0 0 1.35rem;
  width: 1.35rem;
  height: 1.35rem;
  padding: 0.22rem;
  border-radius: 50%;
  background: var(--gold);
  color: #fff;
}
html.js .substitut-declencheur[aria-expanded="true"] .substitut-icone {
  background: #fff;
  color: #7A5815;
}

html.js .substitut-bulle { display: none; }
html.js .substitut-bulle.est-ouverte {
  display: block;
  position: relative;
  margin: 0.6rem 0 0.4rem;
  padding: 0.8rem 1rem;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 10px;
  color: var(--ink);
  box-shadow: 0 2px 10px rgba(36, 26, 20, 0.07);
  animation: pourquoi-apparition 160ms ease-out;
}
html.js .substitut-bulle.est-ouverte::before,
html.js .substitut-bulle.est-ouverte::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}
html.js .substitut-bulle.est-ouverte::before {
  top: -9px;
  left: 1.2rem;
  border-width: 0 9px 9px;
  border-color: transparent transparent var(--line);
}
html.js .substitut-bulle.est-ouverte::after {
  top: -8px;
  left: calc(1.2rem + 1px);
  border-width: 0 8px 8px;
  border-color: transparent transparent #fff;
}
html.js .label-substitut { display: none; }
html.js .substitut-bulle.est-ouverte p + p {
  padding-top: 0.45rem;
  border-top: 1px dashed var(--line);
}
html.js .substitut-bulle.est-ouverte .label-substitut + p {
  padding-top: 0;
  border-top: none;
}

html.contraste-eleve .substitut-bulle,
html.contraste-eleve.js .substitut-bulle.est-ouverte { border-left-color: #000; border-left-width: 4px; }
html.contraste-eleve.js .substitut-declencheur { border: 2px solid #000; }
html.contraste-eleve .substitut-icone { background: #000; }
html.contraste-eleve.js .substitut-bulle.est-ouverte::before { border-bottom-color: #000; }

@media print {
  .substitut-declencheur { display: none !important; }
  html.js .substitut-bulle,
  html.js .substitut-bulle.est-ouverte { display: block !important; box-shadow: none; animation: none; }
  html.js .label-substitut { display: block; }
}

/* --- Cas particuliers dans une étape (« si elle casse net / si elle plie ») --- */
.etape-cas { margin: 0.2rem 0 0.25rem; padding-left: 1.2rem; }
.etape-cas li { margin-bottom: 0.25rem; }

/* --- Dépannage : une carte par symptôme, lisible sur mobile sans tableau --- */
.depannage { list-style: none; padding: 0; margin: 1rem 0 2rem; }
.depannage-cas {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--rayon);
  padding: 0.85rem 1.1rem;
  margin-bottom: 0.75rem;
}
.depannage-cas p { margin: 0 0 0.3rem; font-size: 0.95rem; }
.depannage-cas p:last-child { margin-bottom: 0; }
.depannage-symptome { font-weight: 700; color: var(--cardamome-deep); }
.depannage-rubrique { font-weight: 600; }
#depannage { scroll-margin-top: 4rem; }
html.contraste-eleve .depannage-cas { border-width: 2px; }

/* --- Page Ustensiles ---
   Une fiche par ustensile : la phrase d'usage et le bouton restent visibles,
   les explications longues sont repliées dans les mêmes bulles que les recettes.
   Photo à gauche sur grand écran, au-dessus sur téléphone ; jamais recadrée. */
.ustensiles-intro { padding: 3rem 0 0.5rem; }
.ustensiles-intro .accroche { font-size: 1.15rem; color: var(--ink-soft); max-width: 34rem; margin: 0 0 1.25rem; }
.mention-affiliation {
  max-width: 36rem;
  margin: 0;
  padding: 0.8rem 1rem;
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--cardamome);
  border-radius: 0;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.page-ustensiles h2 { scroll-margin-top: 1rem; }

.fiche-ustensile {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 1.75rem;
  align-items: flex-start;
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.25rem;
  margin: 1.25rem 0 1.5rem;
  scroll-margin-top: 1rem;
}
.fiche-ustensile:target { border-color: var(--cardamome); box-shadow: 0 0 0 2px var(--cardamome); }
.fiche-photo {
  flex: 0 1 12rem;
  max-width: 100%;
}
.fiche-photo img { display: block; width: 100%; height: auto; object-fit: contain; border-radius: 6px; background: #fff; }
.fiche-photo-vide {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--line);
  border-radius: 6px;
  color: var(--ink-soft);
  font-size: 0.85rem;
}
.fiche-corps { flex: 1 1 20rem; min-width: 0; }
.fiche-etiquettes {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.4rem;
  font-size: 0.8rem;
}
.etiquette-niveau {
  background: #DDE0CC;
  color: var(--cardamome-deep);
  font-weight: 600;
  padding: 0.1rem 0.55rem;
  border-radius: var(--rayon);
}
.etiquette-affilie { color: var(--ink-soft); }
.fiche-nom {
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1.25;
  margin: 0 0 0.5rem;
}
.fiche-usage { margin: 0 0 0.75rem; }
.fiche-bulles { display: flex; flex-direction: column; gap: 0.15rem; margin-bottom: 0.9rem; }
.fiche-bulles .pourquoi-bulle p + p { margin-top: 0.6rem; }
.fiche-recettes { font-size: 0.9rem; color: var(--ink-soft); margin: 0 0 1rem; }
.fiche-bouton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.6rem 1.25rem;
  background: var(--cardamome-deep);
  color: var(--paper-card);
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
}
.fiche-bouton:hover { background: var(--ink); }
.fiche-bouton-fleche { font-size: 0.95em; }
.fiche-lien-secondaire {
  display: block;
  text-align: center;
  margin-top: 0.7rem;
  font-size: 0.9rem;
}
@media (min-width: 40rem) {
  .fiche-bouton { display: inline-flex; }
  .fiche-lien-secondaire { display: inline-block; margin: 0 0 0 1rem; }
}
html.contraste-eleve .fiche-ustensile,
html.contraste-eleve .mention-affiliation { border-width: 2px; }
html.contraste-eleve .etiquette-niveau { background: #fff; border: 1px solid #000; }

/* Accueil : renvoi vers la page Ustensiles */
.carte-ustensiles { margin: 1.5rem 0 3rem; }
.carte-ustensiles .lien-carte { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.carte-ustensiles .lien-fleche { color: var(--cardamome-deep); font-size: 1.3rem; flex-shrink: 0; }

/* Pied de page : avec quatre liens, on autorise le retour à la ligne entre
   les liens, jamais au milieu d'un lien (« À propos » se coupait en deux). */
.footer-nav { flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.footer-nav a { white-space: nowrap; }

/* Accueil : accès rapide sous l'accroche, visible sans faire défiler.
   Deux tuiles côte à côte, y compris sur téléphone ; la flèche indique
   si l'on change de page (→) ou si l'on descend dans la page (↓). */
.raccourcis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.75rem;
  max-width: 32rem;
}
.raccourci {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.75rem 0.9rem;
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: 8px;
  text-decoration: none;
  color: var(--ink);
}
.raccourci:hover { border-color: var(--cardamome); }
.raccourci-texte { display: block; min-width: 0; }
.raccourci-titre {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.25;
  color: var(--cardamome-deep);
}
.raccourci-desc { display: block; font-size: 0.8rem; color: var(--ink-soft); margin-top: 0.15rem; line-height: 1.35; }
.raccourci-fleche { color: var(--cardamome-deep); font-size: 1.15rem; flex-shrink: 0; }
#parrainage { scroll-margin-top: 1rem; }
html.contraste-eleve .raccourci { border-width: 2px; }
@media (max-width: 32rem) {
  .hero { padding-top: 2rem; }
  .hero .accroche { margin-bottom: 1.25rem; }
}

/* En-tête : avec trois liens, le menu peut passer à la ligne sur téléphone,
   mais jamais au milieu d'un nom (« Morgane / Elli », « À / propos »). */
.site-nav { flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.site-nav a { white-space: nowrap; }
@media (max-width: 32rem) {
  .site-nav { gap: 0.25rem 1rem; }
}

/* Recettes : ustensiles qui renvoient vers leur fiche (js/ustensiles-liens.js).
   Pointillés + petite flèche pour les distinguer des liens ordinaires. */
.lien-ustensile {
  color: var(--cardamome-deep);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  white-space: nowrap;
}
.lien-ustensile:hover { color: var(--ink); text-decoration-style: solid; }
.lien-ustensile-icone { width: 0.8em; height: 0.8em; margin-left: 0.15em; vertical-align: -0.05em; }
.note-ustensiles { font-size: 0.82rem; color: var(--ink-soft); margin: -0.25rem 0 1.5rem; }
html.contraste-eleve .lien-ustensile { text-decoration-style: solid; }
.recipient-texte { min-width: 0; }
.fiche-bulles .pourquoi-declencheur { text-align: left; }
.fiche-precision { font-size: 0.85rem; color: var(--ink-soft); margin: -0.3rem 0 0.6rem; }

/* --- Choix de la contenance de la bouteille ---
   Visible seulement avec JavaScript (html.js) ; sinon, un paragraphe
   explique comment adapter les quantités. */
.contenance { display: none; }
html.js .contenance {
  display: block;
  margin: 0.75rem 0 1.25rem;
  padding: 0.9rem 1.1rem;
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-left: 5px solid var(--cardamome);
  border-radius: var(--rayon);
}
html.js .contenance-sans-js { display: none; }
.contenance-titre { margin: 0 0 0.5rem; font-weight: 700; color: var(--cardamome-deep); }
.contenance-options { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.contenance-option {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.4rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--rayon);
  background: var(--paper);
  font-weight: 600;
  cursor: pointer;
}
.contenance-option input { accent-color: var(--cardamome-deep); width: 1.1rem; height: 1.1rem; margin: 0; }
.contenance-option:has(input:checked) {
  background: var(--cardamome-deep);
  border-color: var(--cardamome-deep);
  color: var(--paper-card);
}
.contenance-option:has(input:checked) input { accent-color: var(--paper-card); }
.contenance-option:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 2px; }
.contenance-aide { margin: 0.5rem 0 0; font-size: 0.9rem; color: var(--ink-soft); }
.qte { font-weight: 600; }
html.contraste-eleve .contenance { border-width: 2px; border-left-width: 6px; }
html.contraste-eleve .contenance-option { border: 2px solid #000; }
html.contraste-eleve .contenance-option:has(input:checked) { background: #000; color: #fff; }