/* Les pages publiques des recettes (serveur/pages-publiques.js) : la page
 * d'une recette, l'index, les styles, l'absence. Les couleurs et les polices
 * de l'accueil (landing.css) : le papier crème, l'encre, le rouge, Georgia
 * pour les titres. Pensées pour le téléphone d'abord ; à partir de 860 px,
 * la photo passe à côté du titre et les étapes à côté des ingrédients. */
:root {
  --paper: #fcfaf7;
  --sheet: #ffffff;
  --ink: #24251f;
  --muted: #696961;
  --red: #ed1239;
  --red-dark: #c50f30;
  --line: #e8e1d8;
  --wash: #f5f0ea;
}
* {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font:
    16px/1.55 'Segoe UI',
    Arial,
    sans-serif;
  -webkit-font-smoothing: antialiased;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
}
a:focus-visible {
  outline: 3px solid #9b1830;
  outline-offset: 3px;
  border-radius: 4px;
}
h1,
h2 {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 500;
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin: 0;
}
h1 {
  font-size: clamp(2.1rem, 7vw, 3.4rem);
  line-height: 1.04;
}
h2 {
  font-size: clamp(1.45rem, 4.4vw, 1.9rem);
  line-height: 1.1;
  margin-bottom: 14px;
}
h2::after {
  content: '';
  display: block;
  width: 34px;
  height: 3px;
  margin-top: 10px;
  border-radius: 2px;
  background: var(--red);
}
p {
  margin: 0;
}
.cadre {
  width: min(1120px, calc(100% - 32px));
  margin-inline: auto;
}

/* ---- la barre du haut ---- */
.barre {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.barre-dedans {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 62px;
}
/* la marque : la pastille penchée, puis le nom en sans-serif grasse et
   serrée, comme dans l'application (`MarqueSignature`) */
.marque {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  font:
    700 25px/1 Arial,
    Helvetica,
    sans-serif;
  letter-spacing: -0.05em;
}
.marque-petite {
  gap: 6px;
  font-size: 18px;
}
.barre-lien {
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: var(--red-dark);
  padding: 8px 14px;
  border-radius: 99px;
  border: 1px solid rgba(237, 18, 57, 0.28);
}
.barre-lien:hover {
  background: rgba(237, 18, 57, 0.06);
}

/* ---- le fil d'Ariane ---- */
.fil ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  list-style: none;
  margin: 18px 0 20px;
  padding: 0;
  font-size: 13px;
  color: var(--muted);
}
.fil li + li::before {
  content: '›';
  margin: 0 8px;
  color: var(--red);
}
.fil a {
  text-decoration: none;
}
.fil a:hover {
  text-decoration: underline;
}
.fil [aria-current] {
  color: var(--ink);
}

/* ---- le bouton ---- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 99px;
  background: var(--red);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  box-shadow: 0 10px 24px -14px rgba(237, 18, 57, 0.9);
  transition:
    background 0.2s,
    transform 0.2s;
}
.bouton:hover {
  background: var(--red-dark);
}
.bouton:active {
  transform: translateY(1px);
}

/* ---- la recette ---- */
.recette-tete {
  display: grid;
  gap: 20px;
}
.recette-titre,
.recette-details {
  display: grid;
  gap: 14px;
  align-content: start;
}
.ouverture {
  font-size: 17px;
  color: var(--ink);
}
.resume {
  color: var(--muted);
}
.faits {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  margin: 4px 0 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--line);
}
.faits div {
  flex: 1 1 92px;
  background: var(--sheet);
  padding: 10px 12px;
}
.faits dt {
  font-size: 12px;
  color: var(--muted);
}
.faits dd {
  margin: 2px 0 0;
  font-weight: 600;
}
.etiquettes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.etiquettes a {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 99px;
  border: 1px solid rgba(237, 18, 57, 0.3);
  color: var(--red-dark);
  font-size: 13px;
  text-decoration: none;
}
.recette-details .bouton {
  justify-self: start;
}
.recette-photo {
  margin: 0;
}
.recette-photo img {
  width: 100%;
  border-radius: 20px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  box-shadow: 0 24px 50px -36px rgba(36, 37, 31, 0.6);
}
.recette-photo figcaption {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
}
.recette-corps {
  display: grid;
  gap: 18px;
  margin-top: 30px;
}
.ingredients,
.etapes,
.garder {
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 22px 20px;
}
.ingredients ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ingredients li {
  padding: 9px 0 9px 22px;
  border-bottom: 1px solid var(--wash);
  position: relative;
}
.ingredients li:last-child {
  border-bottom: 0;
}
.ingredients li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 18px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid var(--red);
}
.etapes ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 16px;
}
.etapes li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: start;
  scroll-margin-top: 16px;
}
.etapes li:target p {
  background: rgba(237, 18, 57, 0.06);
  border-radius: 8px;
}
.numero {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font:
    600 15px/1 Georgia,
    serif;
}
.etapes p {
  padding-top: 5px;
}
.garder {
  margin-top: 18px;
}
.garder dl {
  margin: 0;
  display: grid;
  gap: 12px;
}
.garder dt {
  font-weight: 600;
}
.garder dd {
  margin: 2px 0 0;
  color: var(--muted);
}
.appel {
  margin: 30px 0 10px;
  padding: 28px 22px;
  border-radius: 24px;
  background: linear-gradient(140deg, #ed1239 0%, #c50f30 100%);
  color: #fff;
  display: grid;
  gap: 14px;
  justify-items: start;
}
.appel h2::after {
  background: #fff;
}
.appel p {
  max-width: 52ch;
  opacity: 0.94;
}
.appel .bouton {
  background: #fff;
  color: var(--red-dark);
  box-shadow: none;
}
.appel .bouton:hover {
  background: #fff3f5;
}

/* ---- l'index, les styles ---- */
.intro {
  display: grid;
  gap: 12px;
  margin-bottom: 26px;
  max-width: 62ch;
}
.intro p {
  color: var(--muted);
}
.rayon {
  margin: 34px 0;
}
.rayon-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.rayon-tete a {
  font-size: 14px;
  font-weight: 600;
  color: var(--red-dark);
}
.grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.carte {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.carte:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -26px rgba(36, 37, 31, 0.6);
}
.carte img,
.carte-sans-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.carte-sans-photo {
  display: grid;
  place-items: center;
  background: var(--wash);
}
.carte-sans-photo img {
  width: 40px;
  aspect-ratio: auto;
  opacity: 0.5;
}
.carte-titre {
  padding: 10px 12px 2px;
  font:
    500 17px/1.2 Georgia,
    serif;
  letter-spacing: -0.02em;
}
.carte-temps {
  padding: 2px 12px 12px;
  font-size: 13px;
  color: var(--muted);
}
.index {
  margin: 40px 0 10px;
}
.index ul {
  columns: 1;
  margin: 0;
  padding: 0;
  list-style: none;
}
.index li {
  break-inside: avoid;
  padding: 5px 0;
}
.index a {
  text-decoration: none;
}
.index a:hover {
  color: var(--red-dark);
  text-decoration: underline;
}
.absente {
  margin: 40px 0;
  justify-items: start;
}

/* ---- les politiques : confidentialite.html, conditions.html, gouvernance.html ----
 * Une colonne de lecture, des sections qu'un lien du sommaire atteint, et
 * l'espace réservé à ce qui reste à publier, visible jusqu'à ce qu'il le soit
 * (serveur/politiques.js). */
.politique {
  max-width: 760px;
}
.politique .intro {
  margin: 34px 0 8px;
  max-width: none;
}
.en-vigueur {
  font-size: 14px;
}
.politique > section {
  margin: 44px 0 0;
  scroll-margin-top: 16px;
}
.politique h3 {
  font:
    600 17px/1.3 'Segoe UI',
    Arial,
    sans-serif;
  margin: 26px 0 8px;
}
.politique section > p + p,
.politique section > p + ul,
.politique section > ul + p,
.politique section > dl + p,
.politique section > p + dl,
.politique h3 + ul,
.politique h3 + p + p,
.politique .bloc > p + p,
.politique .bloc > p + ul,
.politique .bloc > ul + p {
  margin-top: 12px;
}
.politique ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.politique li {
  position: relative;
  padding-left: 20px;
}
.politique li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
}
.politique a {
  color: var(--red-dark);
  font-weight: 600;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}
.politique .note {
  color: var(--muted);
  font-size: 15px;
}
.en-bref {
  margin: 26px 0 0;
  padding: 20px 20px 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--sheet);
}
.en-bref h2 {
  font-size: 1.3rem;
}
.sommaire {
  margin: 26px 0 0;
}
.sommaire ol {
  margin: 0;
  padding-left: 1.4em;
  display: grid;
  gap: 6px;
}
/* le sommaire garde ses numéros : la pastille des listes n'y a pas sa place */
.sommaire li {
  padding-left: 2px;
}
.sommaire li::before {
  content: none;
}
.sommaire a {
  font-weight: 500;
}
.fiche {
  margin: 0;
  display: grid;
  gap: 4px 18px;
}
.fiche dt {
  font-weight: 600;
}
.fiche dd {
  margin: 0 0 12px;
}
.bloc {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--sheet);
}
.bloc + .bloc {
  margin-top: 12px;
}
.bloc h3 {
  margin-top: 0;
}
.a-completer {
  padding: 1px 6px;
  border: 1px dashed rgba(237, 18, 57, 0.5);
  border-radius: 6px;
  background: #fff3f5;
  color: var(--red-dark);
  font-weight: 600;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
@media (min-width: 640px) {
  .fiche {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr);
  }
  .fiche dd {
    margin-bottom: 8px;
  }
}

/* ---- le pied ---- */
.pied {
  margin-top: 46px;
  border-top: 1px solid var(--line);
  padding: 22px 0 34px;
  font-size: 14px;
  color: var(--muted);
}
.pied-dedans {
  display: grid;
  gap: 8px;
}
.pied .marque {
  color: var(--ink);
  margin-right: 6px;
  vertical-align: middle;
}
.pied a {
  text-decoration: none;
}
.pied p + p a:hover {
  text-decoration: underline;
}

@media (min-width: 640px) {
  .grille {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .index ul {
    columns: 2;
  }
}
@media (min-width: 860px) {
  .recette-tete {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    grid-template-areas:
      'titre photo'
      'details photo';
    column-gap: 44px;
    row-gap: 18px;
    align-content: center;
  }
  .recette-titre {
    grid-area: titre;
    align-self: end;
  }
  .recette-photo {
    grid-area: photo;
    align-self: center;
  }
  .recette-details {
    grid-area: details;
  }
  .recette-corps {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: start;
    gap: 22px;
  }
  .ingredients {
    position: sticky;
    top: 16px;
  }
  .grille {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .index ul {
    columns: 3;
  }
  .appel {
    padding: 36px 40px;
  }
}