/* Bredeles.com — design v2 (étape 9). Reprend l'identité du site historique (bandeau aubergine
   bordé de dentelle, fond rose à pois, feuille de cahier, cadre photo, papier quadrillé, cœurs,
   titres manuscrits) en mobile d'abord, WCAG AA.
   Contrastes : texte ≥ 4,5:1, grands titres et éléments d'interface ≥ 3:1. Le rose vif (#f6479a)
   ne sert qu'aux décors ; le texte n'est jamais posé directement sur une texture. */

@font-face {
  font-family: 'Sacramento';
  src: url('/fonts/sacramento-latin.woff2') format('woff2');
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

:root {
  color-scheme: light;
  --aubergine: #3e1b30;
  --aubergine-clair: #5a2c47;
  --creme: #eadbc3;
  --papier: #f7efe0;
  --blanc: #fffdf8;
  --texte: #2b1a22;
  --texte-doux: #6a4658;
  --framboise: #b3145f;
  --framboise-fonce: #8e0f4b;
  --rose-vif: #f6479a;
  --rose-poudre: #c4a49e;
  --trait: #d9c4a8;
  --font-body:
    system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', sans-serif;
  --font-script: 'Sacramento', 'Segoe Script', 'Brush Script MT', cursive;
  --space: clamp(1rem, 0.75rem + 1.2vw, 1.75rem);
  --radius: 0.5rem;
  --wrapper: 76rem;
  --ombre: 0 0.15rem 0.6rem rgb(62 27 48 / 0.18);
  --ressort: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dentelle: url('/img/decor/dentelle.png');
  --dentelle: image-set(
    url('/img/decor/dentelle.avif') type('image/avif'),
    url('/img/decor/dentelle.webp') type('image/webp'),
    url('/img/decor/dentelle.png') type('image/png')
  );
  --pois: url('/img/decor/pois.jpg');
  --pois: image-set(
    url('/img/decor/pois.avif') type('image/avif'),
    url('/img/decor/pois.webp') type('image/webp'),
    url('/img/decor/pois.jpg') type('image/jpeg')
  );
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--rose-poudre) var(--pois);
  color: var(--texte);
  font: 1.125rem / 1.6 var(--font-body);
  overflow-wrap: break-word;
}

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

a {
  color: var(--framboise);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;

  &:hover {
    color: var(--framboise-fonce);
    text-decoration-thickness: 0.15em;
  }
}

:focus-visible {
  outline: 3px solid var(--framboise);
  outline-offset: 2px;
  border-radius: 2px;
}

h1,
h2,
h3 {
  line-height: 1.2;
  text-wrap: balance;
}

/* Titres manuscrits : seulement en grand (≥ 32 px), comme le site historique. */
h1 {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(2.6rem, 2rem + 2.6vw, 3.75rem);
  line-height: 1.05;
  margin-block: 0 0.4em;
  color: var(--texte);
}

h2 {
  font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  color: var(--framboise);
  margin-block: 1.4em 0.5em;
}

p,
ul,
ol {
  margin-block: 0 1em;
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.wrapper {
  width: min(100% - 2 * var(--space), var(--wrapper));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  inset-inline-start: var(--space);
  inset-block-start: -10rem;
  padding: 0.75rem 1rem;
  background: var(--blanc);
  color: var(--aubergine);
  font-weight: 700;
  z-index: 10;

  &:focus {
    inset-block-start: 0.5rem;
  }
}

.button,
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.5rem 1.25rem;
  border: 0;
  border-radius: 999px;
  background: var(--framboise);
  color: var(--blanc);
  font: 600 1rem / 1.2 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  box-shadow: inset 0 -0.15rem 0 rgb(0 0 0 / 0.2);

  &:hover {
    background: var(--framboise-fonce);
    color: var(--blanc);
  }
}

/* --- En-tête : bandeau aubergine cousu, dentelle, cartouche du logo ------------------------- */

.site-header {
  position: relative;
  margin-block-end: 1.75rem;
  padding-block: 1.25rem 0.75rem;
  background: var(--aubergine);
  color: var(--creme);
  border-block-start: 0.4rem solid var(--rose-poudre);

  /* Couture en pointillés, puis dentelle qui déborde sous le bandeau */
  &::before {
    content: '';
    position: absolute;
    inset: 0.4rem 0;
    border-block: 2px dashed rgb(234 219 195 / 0.55);
    pointer-events: none;
  }

  &::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    height: 21px;
    background: var(--dentelle) repeat-x 0 0;
    pointer-events: none;
  }

  a {
    color: inherit;
  }

  :focus-visible {
    outline-color: var(--creme);
  }
}

.site-header__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'logo toggle'
    'search search'
    'menu menu';
  gap: 0.75rem 1rem;
  align-items: center;
}

/* Logo : SVG vectorisé d'après le logo d'origine (public/img/logo.svg, ombre comprise) */
.logo {
  grid-area: logo;
  justify-self: start;
  display: block;
  border-radius: 1rem;

  img {
    display: block;
    width: auto;
    height: 4.5rem;
  }

  .site-header &:focus-visible {
    outline: 3px solid var(--creme);
    outline-offset: 4px;
  }
}

@media (min-width: 48rem) {
  .logo img {
    height: 6.5rem;
  }
}

.menu-toggle {
  grid-area: toggle;
  display: none;
  background: var(--aubergine-clair);
  color: var(--creme);
  box-shadow: inset 0 0 0 2px rgb(234 219 195 / 0.6);

  &:hover {
    background: var(--framboise);
  }
}

.menu-toggle__icon {
  width: 1.1rem;
  height: 0.8rem;
  border-block: 2px solid currentColor;
  background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
}

.site-header__search {
  grid-area: search;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  align-items: center;
  margin-block-end: 1rem;

  label {
    flex-basis: 100%;
    font-weight: 600;
    font-size: 0.95rem;
  }

  input {
    flex: 1 1 10rem;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0.5rem 0.9rem;
    border: 2px solid var(--trait);
    border-radius: 999px;
    background: var(--blanc);
    color: var(--texte);
    font: inherit;
    font-size: 1rem;

    &::placeholder {
      color: var(--texte-doux);
      opacity: 1;
    }
  }
}

.site-header .search-form {
  margin: 0;

  label {
    color: var(--creme);
  }

  input {
    border-color: var(--creme);
  }

  button {
    background: var(--creme);
    color: var(--aubergine);

    &:hover {
      background: var(--blanc);
    }
  }
}

.site-menu {
  grid-area: menu;
}

.site-nav ul,
.category-nav ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a,
.category-nav a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: 0.6rem;
  text-decoration: none;

  &:hover {
    color: var(--blanc);
    text-decoration: underline;
  }

  &[aria-current='page'] {
    text-decoration: underline;
    text-decoration-color: var(--rose-vif);
    text-decoration-thickness: 3px;
  }
}

.site-nav a {
  font-weight: 700;
  font-size: 1.1rem;
}

.category-nav {
  font-size: 0.95rem;
}

/* Mobile : menu replié derrière le bouton (avec JavaScript seulement) */
@media (max-width: 47.99rem) {
  .js .menu-toggle {
    display: inline-flex;
  }

  .js .site-menu:not(.is-open) {
    display: none;
  }

  .site-nav ul,
  .category-nav ul {
    flex-direction: column;
  }

  .site-nav li + li,
  .category-nav li + li {
    border-block-start: 1px solid rgb(234 219 195 / 0.25);
  }

  .category-nav {
    margin-block-start: 0.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius);
    background: var(--aubergine-clair);
  }
}

@media (min-width: 48rem) {
  .site-header {
    padding-block: 1.75rem 0.75rem;
  }

  .site-header__inner {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      'logo search'
      'menu menu';
    gap: 1rem 2rem;
  }

  .site-header__search {
    justify-self: end;
    width: min(100%, 28rem);
  }

  .site-nav ul {
    gap: 0 0.5rem;
  }

  .category-nav {
    margin-block-start: 0.25rem;
    padding-block-start: 0.25rem;
    border-block-start: 1px solid rgb(234 219 195 / 0.3);

    ul {
      gap: 0 0.25rem;
    }
  }
}

/* --- Mise en page : contenu sur papier, colonne latérale crème ------------------------------ */

.layout {
  flex: 1;
  display: grid;
  gap: var(--space);
  align-items: start;
  padding-block: 1rem calc(2 * var(--space));
}

@media (min-width: 62rem) {
  .layout {
    grid-template-columns: minmax(0, 1fr) 19rem;
  }

  /* Pages sans colonne latérale (listes, pages libres…) : contenu sur toute la largeur */
  .layout--full {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Listes de recettes en grille : une colonne sur téléphone, deux ou trois sur grand écran */
.recipe-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
  gap: 0 2rem;
}

.recipe-list > .recipe-card {
  border-block-end: 1px dashed var(--trait);
}

.recipe-list > .recipe-card + .recipe-card {
  border-block-start: 0;
}

.sidebar__subtitle {
  margin-block: 1.5rem 0.5rem;
}

.sidebar__links {
  margin: 0;
  padding-inline-start: 1.1rem;

  li {
    padding-block: 0.25rem;
  }

  a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    font-weight: 600;
  }
}

.panel {
  padding: var(--space);
  border-radius: var(--radius);
  background: var(--papier);
  box-shadow: var(--ombre);
}

main {
  min-width: 0;

  &:focus {
    outline: none;
  }
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: -0.4rem 0 0.5rem;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;

  li + li::before {
    content: '›';
    margin-inline: 0.35rem;
    color: var(--texte-doux);
  }

  a {
    display: inline-block;
    padding-block: 0.4rem;
    color: var(--texte-doux);

    &[aria-current='page'] {
      color: var(--texte);
      text-decoration: none;
    }
  }
}

.sidebar {
  background: var(--creme);
  font-size: 1rem;

  h2 {
    margin-block: 0 0.5rem;
  }
}

/* « Vous aimerez aussi » (fiche) : cartes photo, deux colonnes sur téléphone, une dans la colonne */
.related {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(9rem, 100%), 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;

  a {
    display: block;
    font-weight: 700;
  }

  img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 4px solid var(--blanc);
    border-radius: 0.25rem;
    box-shadow: var(--ombre);
  }

  .rating {
    margin-block: 0.2rem 0;
    font-size: 0.9rem;
  }
}

.related__title {
  display: block;
  margin-block-start: 0.4rem;
  line-height: 1.3;
}

.sidebar__action {
  margin: var(--space) 0 0;
  text-align: center;
}

/* Intertitres manuscrits (grands) */
.sidebar h2,
.story h2,
.collection h2,
.testimonials h2,
.comments > h2,
.advice h2,
.home-text h2,
.form-placeholder h2 {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(2.1rem, 1.8rem + 1.2vw, 2.6rem);
  line-height: 1.1;
  color: var(--framboise);
}

.mini-list {
  margin: 0;
  padding: 0;
  list-style: none;

  li {
    padding-block: 0.6rem;

    & + li {
      border-block-start: 1px dashed var(--texte-doux);
    }
  }

  a {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    min-height: 2.75rem;
    font-weight: 700;
  }

  picture {
    flex: none;
  }

  img {
    display: block;
    width: 3.5rem;
    height: 3.5rem;
    object-fit: cover;
    border: 3px solid var(--blanc);
    border-radius: 0.25rem;
    box-shadow: var(--ombre);
  }

  p {
    margin: 0.25rem 0 0;
    font-size: 0.95rem;
  }
}

/* --- Listes de recettes et actualités ---------------------------------------------------- */

.recipe-card,
.news-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding-block: 1.1rem;

  & + & {
    border-block-start: 1px dashed var(--trait);
  }

  h2 {
    margin-block: 0 0.25rem;
    font-size: 1.25rem;
  }

  p {
    margin-block: 0.25rem;
  }
}

.recipe-card picture,
.news-card picture {
  flex: none;
}

.recipe-card__body,
.news-card > div {
  min-width: 0;
}

.recipe-card__image,
.news-card__image {
  display: block;
  width: 5.5rem;
  height: 5.5rem;
  object-fit: cover;
  border: 4px solid var(--blanc);
  border-radius: 0.25rem;
  box-shadow: var(--ombre);
}

@media (min-width: 36rem) {
  .recipe-card__image,
  .news-card__image {
    width: 7.5rem;
    height: 7.5rem;
  }
}

.rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.4rem;
  color: var(--texte-doux);
  font-size: 0.95rem;
}

/* Cœurs : doublon visuel de la note écrite (aria-hidden), remplis par pas d'une demi-note */
.hearts {
  position: relative;
  display: inline-block;
  font-size: 1.15rem;
  line-height: 1;
  letter-spacing: 0.1em;

  &::before {
    content: '♥♥♥♥♥';
    color: #dcbcc8;
  }

  &::after {
    content: '♥♥♥♥♥';
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--remplissage, 0%);
    overflow: hidden;
    color: var(--framboise);
    white-space: nowrap;
  }

  &[data-note='1'] {
    --remplissage: 10%;
  }
  &[data-note='2'] {
    --remplissage: 20%;
  }
  &[data-note='3'] {
    --remplissage: 30%;
  }
  &[data-note='4'] {
    --remplissage: 40%;
  }
  &[data-note='5'] {
    --remplissage: 50%;
  }
  &[data-note='6'] {
    --remplissage: 60%;
  }
  &[data-note='7'] {
    --remplissage: 70%;
  }
  &[data-note='8'] {
    --remplissage: 80%;
  }
  &[data-note='9'] {
    --remplissage: 90%;
  }
  &[data-note='10'] {
    --remplissage: 100%;
  }
}

.category-links,
.letters ul,
.pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 var(--space);
  padding: 0;
  list-style: none;
}

.category-links a,
.letters a,
.pagination a {
  display: inline-flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.25rem 0.9rem;
  border: 2px solid var(--trait);
  border-radius: 999px;
  background: var(--blanc);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;

  &:hover {
    border-color: var(--framboise);
  }

  &[aria-current='page'] {
    border-color: var(--framboise);
    background: var(--framboise);
    color: var(--blanc);
  }
}

/* Carnet de recettes (v2.1.0) : bouton cœur, plein quand la recette est dans le carnet */
.notebook-toggle {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.4rem 1rem;
  border: 2px solid var(--trait);
  border-radius: 999px;
  background: var(--blanc);
  color: var(--framboise);
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  box-shadow: none;
  cursor: pointer;

  &:hover {
    border-color: var(--framboise);
    background: var(--blanc);
    color: var(--framboise);
  }

  &[hidden] {
    display: none;
  }
}

.notebook-toggle__heart {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.notebook-toggle[data-saved='true'] .notebook-toggle__heart {
  fill: currentColor;
}

/* Sur les cartes : cœur seul, au-dessus du lien qui couvre la carte */
.notebook-toggle--compact {
  position: relative;
  z-index: 1;
  flex: none;
  justify-content: center;
  width: 2.75rem;
  padding: 0;
}

.recipe-card__body {
  flex: 1;
}

.recipe-card__heading {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  justify-content: space-between;
}

.carnet .notebook__nojs {
  display: none;
}

.notebook__clear {
  margin-block-start: var(--space);
}

/* Nombre de recettes et tri des listes (v2.1.0) */
.list-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  align-items: center;
  justify-content: space-between;
  margin-block: 0 0.5rem;
}

.list-count {
  margin: 0;
  color: var(--texte-doux);
  font-weight: 600;
}

.list-sort {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;

  ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.2rem 0.8rem;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }

    &[aria-current='true'] {
      background: var(--creme);
      color: var(--texte);
    }
  }
}

.list-sort__label {
  color: var(--texte-doux);
  font-size: 0.95rem;
}

/* Téléphone : trois choix de tri en colonnes régulières sous « Trier : » */
@media (max-width: 47.99rem) {
  .list-sort,
  .list-sort ul {
    width: 100%;
  }

  .list-sort ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .list-sort a {
    justify-content: center;
    width: 100%;
    padding-inline: 0.4rem;
    text-align: center;
    line-height: 1.2;
  }
}

/* Sur téléphone, pastilles des catégories en grille de deux colonnes régulières : avec des noms
   longs (« Tartes et gâteaux alsaciens »), le retour à la ligne libre laissait une pastille par
   ligne. Grille plutôt que défilement horizontal : toutes les catégories, dont celle de la page
   en cours, restent visibles sans faire défiler ni JavaScript. Toujours 44 px de haut au moins. */
@media (max-width: 47.99rem) {
  .category-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;

    a {
      width: 100%;
      height: 100%;
      padding: 0.35rem 0.6rem;
      border-radius: 1.4rem;
      font-size: 0.95rem;
      line-height: 1.25;
    }
  }
}

.letters a {
  padding: 0;
}

.pagination {
  margin-block-start: var(--space);

  ul {
    justify-content: center;
    margin: 0;
  }
}

.recipe-index-group ul {
  columns: 16rem auto;
  column-gap: var(--space);
  margin: 0;
  padding-inline-start: 1.25rem;

  li {
    break-inside: avoid;
    padding-block: 0.3rem;
  }
}

.notice {
  padding: 1rem var(--space);
  border-inline-start: 4px solid var(--framboise);
  border-radius: var(--radius);
  background: var(--blanc);
}

.date {
  color: var(--texte-doux);
  font-size: 0.95rem;
  margin: 0 0 0.25rem;
}

.lead {
  font-size: 1.2rem;
}

.heading-page {
  font-family: var(--font-body);
  font-size: 1.1rem;
  color: var(--texte-doux);
  white-space: nowrap;
}

/* Contenus rédigés (préparation, actualités, pages) : 68 caractères par ligne au plus */
.prose {
  max-width: 68ch;

  img {
    border-radius: 0.25rem;
  }

  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;

    td,
    th {
      padding: 0.35rem 0.6rem;
      border: 1px solid var(--trait);
    }
  }
}

/* --- Accueil éditorial (v2.3.0) : des rythmes différents d'une section à l'autre ---------- */

.home-head {
  max-width: 46rem;
  margin-block-end: calc(1.5 * var(--space));

  h1 {
    margin-block-end: 0.25rem;
  }
}

.home-head__lead {
  margin: 0;
  color: var(--texte-doux);
  font-size: 1.15rem;
}

.kicker {
  margin: 0 0 0.4rem;
  color: var(--framboise);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* La recette du moment : grande photo encadrée, le texte comme un petit article */
.moment {
  display: grid;
  gap: 1.25rem 2.5rem;
  align-items: center;
  margin-block-end: calc(2.5 * var(--space));
}

@media (min-width: 48rem) {
  .moment {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }
}

.moment__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 0.6rem solid var(--blanc);
  border-radius: 0.2rem;
  box-shadow: 0 0.4rem 1.4rem rgb(62 27 48 / 0.25);
  rotate: -1.2deg;
}

.moment__title {
  margin: 0 0 0.6rem;
  color: var(--framboise);
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(2.4rem, 1.9rem + 1.8vw, 3.2rem);
  line-height: 1.05;
}

.moment__chapo {
  margin-block: 0 0.9rem;
  font-size: 1.15rem;
}

.moment__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0.6rem;
  padding: 0;
  list-style: none;

  li {
    padding: 0.15rem 0.6rem;
    border: 1px solid var(--trait);
    border-radius: 999px;
    background: var(--blanc);
    font-weight: 600;
    font-size: 0.9rem;
  }

  span {
    color: var(--texte-doux);
    font-weight: 400;
  }
}

/* Citation d'un lecteur : petite note de papier */
.moment__quote,
.testimonial {
  position: relative;
  margin: 1rem 0;
  padding: 1rem 1.1rem 0.9rem 2.6rem;
  border-radius: var(--radius);
  background: var(--blanc);
  box-shadow: var(--ombre);

  &::before {
    content: '“';
    position: absolute;
    inset: 0.2rem auto auto 0.6rem;
    color: var(--rose-vif);
    font-family: var(--font-script);
    font-size: 3.4rem;
    line-height: 1;
  }

  blockquote {
    margin: 0;
  }

  p {
    margin: 0;
    font-style: italic;
  }

  figcaption {
    margin-block-start: 0.5rem;
    color: var(--texte-doux);
    font-size: 0.95rem;
  }
}

.moment__button {
  margin-block-start: 0.4rem;
}

/* Le bredele alsacien : un bandeau crème qui raconte, avec la carte */
.story {
  display: grid;
  gap: 1rem 2rem;
  align-items: center;
  margin: 0 calc(-1 * var(--space)) calc(2.5 * var(--space));
  padding: calc(1.5 * var(--space)) var(--space);
  background: var(--creme);

  h2 {
    margin-block: 0 0.75rem;
  }

  p {
    max-width: 68ch;
  }
}

@media (min-width: 48rem) {
  .story {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .story__map img {
    width: 17rem;
  }
}

.story__map img {
  display: block;
  width: min(100%, 11rem);
  height: auto;
  margin-inline: auto;
}

/* Collection : un court texte, puis une liste numérotée de quelques recettes */
.collection {
  display: grid;
  gap: 1rem 2.5rem;
  margin-block-end: calc(2.5 * var(--space));
}

@media (min-width: 62rem) {
  .collection {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    align-items: start;
  }
}

.collection__intro {
  h2 {
    margin-block: 0 0.5rem;
  }

  p {
    margin-block: 0 0.75rem;
    font-size: 1.05rem;
  }
}

.collection__list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: collection;
}

.collection__item {
  position: relative;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding-block: 0.9rem;
  counter-increment: collection;

  & + & {
    border-block-start: 1px dashed var(--trait);
  }

  h3 {
    margin: 0 0 0.2rem;
    font-size: 1.2rem;

    &::before {
      content: counter(collection) '.';
      margin-inline-end: 0.4rem;
      color: var(--framboise);
    }
  }

  p {
    margin-block: 0 0.3rem;
  }
}

.collection__item picture {
  flex: none;
}

.collection__photo {
  flex: none;
  width: 6rem;
  height: 6rem;
  object-fit: cover;
  border: 4px solid var(--blanc);
  border-radius: 50%;
  box-shadow: var(--ombre);
}

.collection__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 1rem;
  color: var(--texte-doux);
  font-size: 0.95rem;
}

/* Ils ont testé : trois notes de lecteurs */
.testimonials {
  margin-block-end: calc(2.5 * var(--space));

  h2 {
    margin-block: 0 0.5rem;
  }
}

.testimonials__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;

  li:nth-child(odd) .testimonial {
    rotate: -0.6deg;
  }

  li:nth-child(even) .testimonial {
    rotate: 0.6deg;
  }
}

.testimonial {
  height: 100%;
  margin: 0;
}

.news-teaser {
  margin-block-end: calc(2 * var(--space));
  padding: 1rem 1.25rem;
  border-inline-start: 5px solid var(--framboise);
  background: var(--blanc);

  h2 {
    margin-block: 0 0.4rem;
    font-size: 1.35rem;
  }

  p {
    margin-block: 0 0.4rem;
  }
}

/* Catégories : une rangée compacte de pastilles, avec le nombre de recettes */
.home-categories {
  margin-block-end: calc(2 * var(--space));

  h2 {
    margin-block: 0 0.6rem;
    font-size: 1.2rem;
  }

  ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  a {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.25rem 0.9rem;
    border: 2px solid var(--trait);
    border-radius: 999px;
    background: var(--blanc);
    font-weight: 600;
    text-decoration: none;

    &:hover {
      border-color: var(--framboise);
    }
  }
}

/* Téléphone : une seule rangée qui défile, plutôt qu'une pastille par ligne */
@media (max-width: 47.99rem) {
  .home-categories ul {
    position: relative;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-block-end: 0.4rem;
    scrollbar-width: thin;
  }

  .home-categories li {
    flex: none;
  }

  .home-categories a {
    white-space: nowrap;
  }

  .collection__photo {
    width: 4.5rem;
    height: 4.5rem;
  }
}

.home-categories__count {
  padding: 0 0.45rem;
  border-radius: 999px;
  background: var(--creme);
  color: var(--texte);
  font-size: 0.85rem;
}

.home-categories__all {
  background: var(--framboise) !important;
  border-color: var(--framboise) !important;
  color: var(--blanc) !important;
}

.home-text {
  display: flow-root;
  max-width: 68ch;

  h2 {
    margin-block: var(--space) 0.5rem;
  }
}

.home-text__image {
  display: block;
  width: min(100%, 14rem);
  margin: 0 auto 1rem;
}

@media (min-width: 36rem) {
  .home-text__image {
    float: inline-end;
    width: min(45%, 15rem);
    margin: 0 0 0.75rem 1rem;
  }
}

.home-text__lead {
  font-weight: 600;
}

/* --- Fiche recette : feuille de cahier ------------------------------------------------- */

/* Lignes et marge rouge dessinées en CSS, très discrètes : le texte reste sur un papier clair. */
.recipe {
  margin: calc(-1 * var(--space));
  padding: var(--space);
  padding-inline-start: calc(var(--space) + 0.75rem);
  border-radius: var(--radius);
  background:
    linear-gradient(
        to right,
        transparent 0.85rem,
        rgb(231 98 120 / 0.5) 0.85rem,
        rgb(231 98 120 / 0.5) calc(0.85rem + 2px),
        transparent calc(0.85rem + 2px)
      )
      0 0 / 100% 100% no-repeat,
    repeating-linear-gradient(
      to bottom,
      transparent 0 calc(1.8rem - 1px),
      rgb(120 150 190 / 0.16) calc(1.8rem - 1px) 1.8rem
    ),
    #fbf4e4;
}

.breadcrumb + .recipe {
  margin-block-start: 0;
}

.recipe__meta {
  color: var(--texte-doux);
  font-size: 0.95rem;
  margin: 0 0 0.25rem;
}

.recipe__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block: 0.75rem var(--space);

  a,
  .wake-lock {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.4rem 1rem;
    border: 2px solid var(--trait);
    border-radius: 999px;
    background: var(--blanc);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;

    &:hover {
      border-color: var(--framboise);
    }
  }

  /* Bouton « Garder l'écran allumé » : même pastille, pleine quand le verrou est actif */
  .wake-lock {
    gap: 0.5rem;
    color: var(--framboise);
    box-shadow: none;

    &:hover {
      background: var(--blanc);
      color: var(--framboise);
    }

    &[aria-pressed='true'] {
      border-color: var(--framboise);
      background: var(--framboise);
      color: var(--blanc);
    }
  }
}

.wake-lock__icon {
  width: 0.7rem;
  height: 1.1rem;
  border: 2px solid currentColor;
  border-radius: 0.2rem;
}

.recipe__body {
  display: grid;
  gap: calc(1.5 * var(--space));
}

/* Mobile : photo, recette, puis le conseil ; à partir de 48rem, photo et conseil à gauche */
@media (max-width: 47.99rem) {
  .recipe__side {
    display: contents;
  }

  .advice {
    order: 1;
  }
}

@media (min-width: 48rem) {
  .recipe__body {
    grid-template-columns: 15rem minmax(0, 1fr);
  }
}

.recipe__main {
  min-width: 0;

  h2 {
    margin-block: 0 0.4rem;
    font-size: 1.25rem;
  }

  section + section {
    margin-block-start: 1.5rem;
  }
}

/* Cadre photo : tirage blanc avec coins photo */
.photo-frame {
  position: relative;
  max-width: 17rem;
  margin-inline: auto;
  padding: 0.6rem;
  background: var(--blanc);
  box-shadow: 0 0.2rem 0.8rem rgb(62 27 48 / 0.25);
  rotate: -1.5deg;

  &::before,
  &::after {
    content: '';
    position: absolute;
    width: 2.2rem;
    height: 2.2rem;
    background: rgb(234 219 195 / 0.9);
    filter: drop-shadow(0 0 1px rgb(0 0 0 / 0.3));
  }

  &::before {
    inset: -0.45rem auto auto -0.45rem;
    clip-path: polygon(0 0, 100% 0, 0 100%);
  }

  &::after {
    inset: auto -0.45rem -0.45rem auto;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
  }

  img {
    display: block;
    width: 100%;
    aspect-ratio: 220 / 214;
    object-fit: cover;
  }
}

/* Le p'tit conseil : papier quadrillé tenu par un trombone, voile clair sous le texte */
.advice {
  position: relative;
  width: 100%;
  max-width: 22rem;
  margin: 0.5rem auto 0;
  padding: 1.25rem 1rem 1rem;
  background:
    linear-gradient(rgb(255 253 248 / 0.72), rgb(255 253 248 / 0.72)),
    repeating-linear-gradient(to right, rgb(110 150 165 / 0.3) 0 1px, transparent 1px 0.9rem),
    repeating-linear-gradient(to bottom, rgb(110 150 165 / 0.3) 0 1px, transparent 1px 0.9rem),
    #fffbea;
  box-shadow: var(--ombre);
  rotate: 1deg;

  &::before {
    content: '';
    position: absolute;
    inset: -1.2rem auto auto -0.9rem;
    width: 66px;
    height: 48px;
    background: url('/img/decor/trombone.png') no-repeat;
    background: image-set(
        url('/img/decor/trombone.avif') type('image/avif'),
        url('/img/decor/trombone.webp') type('image/webp'),
        url('/img/decor/trombone.png') type('image/png')
      )
      no-repeat;
  }

  h2 {
    margin-block: 0 0.4rem;
    padding-inline-start: 2.5rem;
  }

  p {
    margin: 0;
  }
}

/* Partage (v2.1.0) : pastilles comme les actions de la fiche, icônes SVG locales */
.share {
  margin-block-start: calc(1.5 * var(--space));

  h2 {
    margin-block: 0 0.5rem;
    font-size: 1.25rem;
  }
}

.share__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;

  [hidden] {
    display: none;
  }
}

.share__item {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.4rem 1rem;
  border: 2px solid var(--trait);
  border-radius: 999px;
  background: var(--blanc);
  color: var(--framboise);
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  box-shadow: none;
  cursor: pointer;

  &:hover {
    border-color: var(--framboise);
  }

  .icon {
    flex: none;
  }
}

.share__status:empty {
  display: none;
}

/* Actualités (v2.1.0) : date bien visible, bandeau discret sur les articles anciens, aperçu */
.news__date {
  font-weight: 600;
}

.news__stale {
  margin-block: 0 1rem;
  padding: 0.5rem 0.8rem;
  border-inline-start: 4px solid var(--trait);
  background: var(--blanc);
  color: var(--texte-doux);
  font-size: 0.95rem;
}

.preview-banner {
  margin-block: 0 1rem;
  padding: 0.6rem 0.9rem;
  border: 2px dashed var(--framboise);
  border-radius: var(--radius);
  background: var(--blanc);
  font-weight: 600;

  p {
    margin-block: 0.3rem;
  }
}

.preview-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;

  a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }
}

/* Infos pratiques (v2.1.0) : une étiquette par temps, rendement et difficulté connus */
.facts__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.5rem;
  margin: 0;
}

.facts__item {
  padding: 0.45rem 0.7rem;
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--radius);

  dt {
    color: var(--texte-doux);
    font-size: 0.85rem;
  }

  dd {
    margin: 0;
    font-weight: 600;
  }
}

.facts__note {
  margin-block: 0.6rem 0;
  color: var(--texte-doux);
  font-size: 0.95rem;
}

.facts__note-label {
  font-weight: 600;
}

/* Conservation, dans le papier du p'tit conseil */
.advice .advice__storage {
  margin-block: 0.9rem 0.2rem;
  font-size: 1.05rem;
  color: var(--framboise);
}

/* Cartes : difficulté et temps total */
.recipe-card__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 0.9rem;
  color: var(--texte-doux);
  font-size: 0.95rem;
}

.ingredients {
  margin: 0;
  padding-inline-start: 1.25rem;

  li {
    padding-block: 0.15rem;
  }

  li::marker {
    color: var(--framboise);
  }
}

.ingredients__section {
  list-style: none;
  margin-block-start: 0.6rem;
  margin-inline-start: -1.25rem;
  font-weight: 700;
}

.ingredients__quantity {
  font-weight: 700;
}

/* Commentaires */
.comments {
  margin-block-start: calc(2 * var(--space));
  padding-block-start: var(--space);
  border-block-start: 2px dashed var(--trait);

  > h2 {
    margin-block-start: 0;
  }
}

.comments__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.comment {
  display: flex;
  gap: 0.75rem;
  padding-block: 0.9rem;

  & + & {
    border-block-start: 1px dashed var(--trait);
  }

  p {
    margin-block: 0.25rem;
  }
}

.comment__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--framboise);
  color: var(--blanc);
  font-weight: 700;
  font-size: 1rem;
}

.comment__body {
  min-width: 0;
}

.comment__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.75rem;
}

.comment__author {
  font-weight: 700;
}

.comment__rating {
  color: var(--framboise);
  font-weight: 700;
}

.comment__date {
  color: var(--texte-doux);
  font-size: 0.9rem;
}

.form-placeholder {
  margin-block: var(--space) 0;
  padding: 1rem var(--space);
  border: 2px dashed var(--trait);
  border-radius: var(--radius);
  background: var(--blanc);

  h2 {
    margin-block: 0 0.25rem;
  }

  p {
    margin: 0;
  }
}

/* --- Actualités ----------------------------------------------------------------------- */

.news {
  display: flow-root;
}

.news__image {
  display: block;
  margin: 0 0 var(--space);
  object-fit: cover;
  border: 0.4rem solid var(--blanc);
  box-shadow: var(--ombre);
}

@media (min-width: 36rem) {
  .news__image {
    float: inline-end;
    margin: 0 0 1rem var(--space);
    rotate: 1.5deg;
  }
}

/* --- Pied de page --------------------------------------------------------------------- */

.site-footer {
  position: relative;
  margin-block-start: 21px;
  padding-block: 1.5rem;
  background: var(--aubergine);
  color: var(--creme);
  font-size: 1rem;

  &::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    inset-block-end: 100%;
    height: 21px;
    background: var(--dentelle) repeat-x 0 0;
    transform: scaleY(-1);
  }

  a {
    color: inherit;

    &:hover {
      color: var(--blanc);
    }
  }

  :focus-visible {
    outline-color: var(--creme);
  }

  ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding-inline: 0.4rem;
  }
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem var(--space);
  align-items: center;
  justify-content: space-between;
}

.site-footer__credit {
  margin: 0;
  padding-inline: 0.4rem;
}

/* --- Erreurs -------------------------------------------------------------------------- */

.error-page__code {
  margin: 0;
  font-family: var(--font-script);
  font-size: clamp(4rem, 3rem + 5vw, 6rem);
  color: var(--framboise);
  line-height: 1;
}

.error-page__details {
  overflow-x: auto;
  padding: var(--space);
  background: var(--blanc);
  font-size: 0.85rem;
}

/* --- Thème de Noël (SEASONAL_THEME=noel) : bandeau scintillant sous un voile aubergine ------- */

.theme-noel .site-header {
  background:
    linear-gradient(rgb(62 27 48 / 0.55), rgb(62 27 48 / 0.85)),
    url('/img/decor/bandeau-noel.png') center / cover;
  background:
    linear-gradient(rgb(62 27 48 / 0.55), rgb(62 27 48 / 0.85)),
    image-set(
        url('/img/decor/bandeau-noel.avif') type('image/avif'),
        url('/img/decor/bandeau-noel.webp') type('image/webp'),
        url('/img/decor/bandeau-noel.png') type('image/png')
      )
      center / cover;
}

/* --- Fonctions de cuisine : ingrédients à cocher, étapes numérotées ---------------------- */

/* Ingrédients à cocher (mémorisés sur l'appareil par public/js/cuisine.js) */
.checklist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.checklist__section {
  margin-block: 0.75rem 0.1rem;
  font-weight: 700;
}

.checklist__item {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  min-height: 2.75rem;
  cursor: pointer;

  input {
    flex: none;
    width: 1.35rem;
    height: 1.35rem;
    margin: 0;
    accent-color: var(--framboise);
    cursor: pointer;
  }

  strong {
    font-weight: 700;
  }

  &:has(input:checked) span {
    color: var(--texte-doux);
    text-decoration: line-through;
    text-decoration-color: var(--framboise);
    text-decoration-thickness: 2px;
  }
}

.checklist__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
  margin: 0.5rem 0 0;
  color: var(--texte-doux);
  font-size: 0.95rem;
}

.link-button {
  min-height: 2.75rem;
  padding: 0.25rem 0.5rem;
  background: none;
  box-shadow: none;
  color: var(--framboise);
  text-decoration: underline;

  &:hover {
    background: none;
    color: var(--framboise-fonce);
  }
}

/* Étapes de la préparation numérotées (chaque paragraphe) */
.steps {
  counter-reset: etape;

  > p {
    position: relative;
    padding-inline-start: 2.6rem;
    counter-increment: etape;

    &::before {
      content: counter(etape);
      position: absolute;
      inset: 0 auto auto 0;
      display: grid;
      place-items: center;
      width: 1.9rem;
      height: 1.9rem;
      border-radius: 50%;
      background: var(--framboise);
      color: var(--blanc);
      font-size: 0.95rem;
      font-weight: 700;
      line-height: 1;
    }
  }
}

/* --- Formulaires publics (contact, commentaire, recette) -------------------------------- */

.site-form {
  max-width: 40rem;
  margin-block: var(--space) 0;
  padding: 1.25rem var(--space) 0.5rem;
  border-radius: var(--radius);
  background: var(--blanc);
  box-shadow: var(--ombre);

  h2 {
    margin-block-start: 0;
    font-family: var(--font-script);
    font-weight: 400;
    font-size: clamp(2.1rem, 1.8rem + 1.2vw, 2.6rem);
    line-height: 1.1;
  }
}

.form-field {
  margin-block-end: 1.1rem;

  label {
    display: block;
    margin-block-end: 0.3rem;
    font-weight: 700;
  }

  input:not([type='file']),
  select,
  textarea {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.55rem 0.8rem;
    border: 2px solid var(--trait);
    border-radius: var(--radius);
    background: var(--blanc);
    color: var(--texte);
    font: inherit;
    font-size: 1rem;

    &:focus {
      border-color: var(--framboise);
      box-shadow: 0 0 0 4px rgb(179 20 95 / 0.18);
      outline: none;
    }
  }

  input[type='file'] {
    width: 100%;
    max-width: 100%;
    min-height: 2.75rem;
    font: inherit;
    font-size: 1rem;
  }

  textarea {
    resize: vertical;
  }
}

.form-field--error :is(input, select, textarea) {
  border-color: #a3182c;
}

.optionnel {
  color: var(--texte-doux);
  font-weight: 400;
}

.form-help {
  margin: 0 0 0.35rem;
  color: var(--texte-doux);
  font-size: 0.95rem;
}

.form-error {
  margin: 0.3rem 0 0;
  color: #a3182c;
  font-weight: 700;
  font-size: 0.95rem;
}

.form-alert {
  padding: 0.75rem 1rem;
  border-inline-start: 4px solid #a3182c;
  border-radius: var(--radius);
  background: #fbeaec;
  font-weight: 600;
}

/* Champ piège : hors de l'écran, ignoré par les lecteurs d'écran et le clavier */
.piege {
  position: absolute;
  inset-inline-start: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Cartes de recettes : toute la carte est cliquable ------------------------------------ */

.recipe-card {
  position: relative;
  margin-inline: -0.6rem;
  padding-inline: 0.6rem;
  border-radius: var(--radius);
}

.card-link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.card-link:focus-visible {
  outline: none;
}

.recipe-card:has(.card-link:focus-visible) {
  outline: 3px solid var(--framboise);
  outline-offset: 2px;
}

.recipe-card:hover,
.recipe-card:focus-within {
  background: rgb(255 253 248 / 0.75);
  box-shadow: var(--ombre);
}

/* Champ de recherche : anneau framboise à la saisie */
.search-form input:focus {
  border-color: var(--framboise);
  box-shadow: 0 0 0 4px rgb(179 20 95 / 0.18);
  outline: none;
}

/* --- Animations (désactivées sous prefers-reduced-motion) --------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .notebook-toggle[data-saved='true'] .notebook-toggle__heart {
    animation: bat 0.35s var(--ressort);
  }

  @view-transition {
    navigation: auto;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.25s;
  }

  /* La photo de la carte devient la photo de la fiche (nom posé par public/js/transitions.js) */
  ::view-transition-group(photo-recette) {
    animation-duration: 0.45s;
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  /* Micro-interactions : cartes qui se soulèvent, boutons qui s'enfoncent, champ qui s'élargit */
  .recipe-card,
  .news-card,
  .collection__photo,
  .mini-list img,
  .button,
  button,
  .recipe__actions a,
  .category-links a,
  .letters a,
  .pagination a {
    transition:
      translate 0.3s var(--ressort),
      rotate 0.3s var(--ressort),
      scale 0.15s ease,
      background-color 0.2s,
      border-color 0.2s,
      box-shadow 0.3s;
  }

  .recipe-card:hover,
  .recipe-card:focus-within,
  .recipe-card:active {
    translate: 0 -3px;
  }

  .collection__item:hover .collection__photo,
  .collection__item:focus-within .collection__photo {
    rotate: -4deg;
    scale: 1.06;
  }

  .mini-list a:hover img {
    rotate: -4deg;
    scale: 1.06;
  }

  .category-links a:hover,
  .letters a:hover,
  .pagination a:hover,
  .recipe__actions a:hover {
    translate: 0 -2px;
  }

  .button:active,
  button:active,
  .recipe__actions a:active,
  .category-links a:active {
    scale: 0.96;
  }

  .search-form input {
    transition:
      border-color 0.2s,
      box-shadow 0.3s;
  }

  .site-header .search-form {
    transition: translate 0.3s var(--ressort);
  }

  .menu-toggle__icon {
    transition: rotate 0.3s var(--ressort);
  }

  .menu-toggle[aria-expanded='true'] .menu-toggle__icon {
    rotate: 90deg;
  }

  .checklist__item span {
    transition: color 0.2s;
  }

  .checklist__item input:checked {
    animation: coche 0.35s var(--ressort);
  }

  /* Ouverture du menu mobile : glisse et apparaît */
  @media (max-width: 47.99rem) {
    .js .site-menu.is-open {
      transition:
        opacity 0.25s ease,
        translate 0.3s var(--ressort),
        display 0.3s allow-discrete;

      @starting-style {
        opacity: 0;
        translate: 0 -0.75rem;
      }
    }
  }

  /* Apparitions en cascade à l'entrée dans l'écran (transform seulement : les contrastes
     restent identiques à chaque instant) ; chaque élément d'une rangée part un peu plus tard. */
  @supports (animation-timeline: view()) {
    .collection__item,
    .testimonials__list li,
    .recipe-card,
    .news-card,
    .comment,
    .mini-list li,
    .checklist li,
    .steps > p,
    .category-links li,
    .letters li {
      animation: monte linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }

    .testimonials__list li:nth-child(3n + 2),
    .mini-list li:nth-child(even),
    .category-links li:nth-child(3n + 2),
    .letters li:nth-child(3n + 2) {
      animation-range: entry 10% entry 70%;
    }

    .testimonials__list li:nth-child(3n),
    .category-links li:nth-child(3n),
    .letters li:nth-child(3n) {
      animation-range: entry 20% entry 80%;
    }

    /* Cœurs qui se remplissent puis battent une fois à leur apparition */
    .hearts::after {
      animation: remplit 1ms linear both;
      animation-timeline: view();
      animation-range: entry 20% cover 35%;
    }

    .hearts {
      animation: bat linear both;
      animation-timeline: view();
      animation-range: entry 60% cover 40%;
    }
  }
}

@keyframes monte {
  from {
    translate: 0 1.25rem;
    scale: 0.97;
  }
}

@keyframes remplit {
  from {
    width: 0;
  }
}

@keyframes bat {
  0%,
  60%,
  100% {
    scale: 1;
  }
  80% {
    scale: 1.15;
  }
}

@keyframes coche {
  50% {
    scale: 1.25;
  }
}