/* ==========================================================================
   Les Savons de Jadis — front v2 — contenu.css
   Texte riche du back-office et blocs de contenu présents dans la maquette validée.
   À charger après socle.css, sur toutes les pages (les blocs peuvent apparaître partout).
   Les 17 types de blocs du back-office seront complétés ici dans un second temps.
   Sommaire : 1. Texte riche  2. Détails communs  3. Texte et image (saponification à froid)
   4. Notre histoire en onglets, film  5. Liste de pages (ingrédients)  6. Avis Google
   7. Confiance (label, Instagram, presse)  8. Agenda  9. Quiz  10. Mouvement réduit
   ========================================================================== */

/* 1. TEXTE RICHE ------------------------------------------------------------ */
/* .prose habille le HTML saisi au back-office (description du produit, pages de contenu) */
.prose { max-width: 68ch; line-height: 1.75; }
.prose > * + * { margin-top: 1.1em; }
.prose strong, .prose b { font-weight: 600; }
.prose h3, .prose h4 { font-size: var(--fs-lg); margin-top: 1.6em; }
.prose ul, .prose ol { display: grid; gap: .5em; padding-left: 1.25rem; }
.prose ul { list-style: none; }
.prose ul li { position: relative; }
.prose ul li::before { content: ""; position: absolute; left: -1.1rem; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--vert); }
.prose ol { list-style: decimal; }
.prose a { color: var(--lien); text-decoration: underline; text-decoration-color: var(--vert); text-underline-offset: 4px; }
/* Sur mobile, un long texte se replie ; il reste entier dans le HTML */
.prose__suite { display: none; }
@media (max-width: 599px) {
  .prose.est-replie { max-height: 21rem; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
  .prose__suite.est-utile { display: inline-flex; margin-top: var(--e-2); }
}

/* 2. DÉTAILS COMMUNS AUX BLOCS ---------------------------------------------- */
/* Cadre or décalé : la photo et la vidéo se répondent par le même détail */
.cadre-or { position: relative; isolation: isolate; }
.cadre-or::before { content: ""; position: absolute; inset: 14px -14px -14px 14px; z-index: -1; border: 2px solid var(--or); border-radius: var(--r-sm); }
.signature { display: block; font-family: var(--font-titre); font-style: italic; font-weight: 700; font-size: var(--fs-xl); line-height: 1.1; }
.signature + span { display: block; margin-top: var(--e-1); font-size: var(--fs-sm); color: var(--texte-moyen); }

/* 3. TEXTE ET IMAGE : saponification à froid -------------------------------- */
.sapo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(1.5rem, 4vw, 4.5rem); }
/* Photo entière (1400 × 688), jamais affichée au-delà de sa définition, coins légèrement arrondis */
.sapo__photo { display: block; width: 100%; height: auto; aspect-ratio: 1400 / 688; border-radius: var(--r-sm); background: var(--gris-plateau); }
.sapo__titre { font-size: var(--fs-3xl); }
.sapo__chapo { margin-top: var(--e-4); font-size: var(--fs-md); max-width: 56ch; }
.sapo__chapo strong { font-weight: 600; }
.bienfaits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-4) var(--e-5); margin-top: var(--e-5); }
.bienfait strong { display: flex; align-items: center; gap: var(--e-2); font-weight: 600; line-height: 1.3; }
.bienfait strong .ico { width: 20px; height: 20px; color: var(--or-brun); }
.bienfait span { display: block; margin-top: var(--e-1); font-size: var(--fs-sm); line-height: 1.5; color: var(--texte-moyen); }
.sapo__actions { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-5); }
@media (max-width: 1099px) { .bienfaits { grid-template-columns: minmax(0, 1fr); gap: var(--e-3); } }
@media (max-width: 767px) {
  .sapo { grid-template-columns: minmax(0, 1fr); gap: var(--e-4); }
  .sapo__chapo { font-size: var(--fs-base); }
  /* Sur mobile : les trois points tiennent chacun sur une ligne */
  .bienfait span { display: none; }
  .bienfaits { gap: var(--e-2); margin-top: var(--e-4); }
  .sapo__actions { margin-top: var(--e-4); }
}

/* 4. NOTRE HISTOIRE : deux temps en onglets, film --------------------------- */
.histoire { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2.5rem, 7vw, 7rem); row-gap: var(--e-5); align-items: start; }
.histoire--un { grid-template-areas: "photo tete" "photo recit"; }
.histoire--deux { grid-template-areas: "film video" "citation video"; margin-top: var(--e-5); }
/* Les deux temps en onglets. Sans JS, la barre d'onglets reste masquée et les deux panneaux se suivent.
   Les panneaux partagent la même case : le bloc garde la hauteur du plus grand, la page ne bouge pas au changement d'onglet. */
.histoire-entete { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-6); margin-bottom: var(--e-6); }
.histoire-entete .histoire__repere { margin-bottom: 0; }
.onglets { display: flex; gap: var(--e-2); }
.onglets[hidden] { display: none; }
.onglet { display: inline-flex; align-items: center; min-height: var(--cible); padding: 0 var(--e-5); border: 1px solid var(--trait-champ); border-radius: var(--r-pilule); background: var(--blanc); font-weight: 600; white-space: nowrap; transition: border-color var(--d-2) ease, background-color var(--d-2) ease; }
.onglet:hover { border-color: var(--texte); }
.onglet:focus-visible { border-radius: var(--r-pilule); }
.onglet[aria-selected="true"] { background: var(--vert-rosee); border-color: var(--vert-fonce); color: var(--vert-profond); }
.a-onglets .histoire-panneaux { display: grid; grid-template-columns: minmax(0, 1fr); }
.a-onglets .histoire { grid-area: 1 / 1; margin-top: 0; }
.a-onglets .histoire.est-masque { visibility: hidden; }
.a-onglets .histoire__film, .a-onglets .film { margin-top: 0; }
.histoire__tete { grid-area: tete; }
.histoire__repere { display: inline-flex; align-items: center; gap: var(--e-2); margin-bottom: var(--e-3); font-size: var(--fs-sm); font-weight: 600; color: var(--or-brun); }
.histoire__repere .ico { width: 20px; height: 20px; }
.histoire__titre { font-size: var(--fs-2xl); max-width: 18ch; }
.histoire__portrait { grid-area: photo; margin: 0; max-width: 420px; }
.histoire__portrait .cadre-or { margin-right: 14px; }
.histoire__portrait img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 1458; border-radius: var(--r-sm); background: var(--gris-plateau); }
.histoire__portrait figcaption { margin-top: calc(var(--e-5) + 14px); }
.histoire__recit { grid-area: recit; }
.histoire__accroche { font-family: var(--font-titre); font-weight: 700; font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem); line-height: 1.35; max-width: 30ch; }
.histoire__texte { margin-top: var(--e-4); max-width: 56ch; }
.histoire__texte strong { font-weight: 600; }
.histoire__actions { margin-top: var(--e-5); }
/* Second temps, en miroir : le texte passe à gauche, la vidéo à droite, alignée sur la colonne du récit */
.histoire__film { grid-area: film; margin-top: var(--e-7); }
.histoire__sous-titre { font-size: var(--fs-xl); }
.histoire__film > p { margin-top: var(--e-3); max-width: 56ch; }
.histoire__film > .histoire__sous-titre + p { margin-top: var(--e-4); }
/* Vidéo : jamais plus large que son image d'attente (490 px) */
.film { grid-area: video; width: 100%; max-width: 490px; margin: var(--e-7) 14px 0 0; }
.film__cadre { position: relative; }
.film__video { display: block; width: 100%; height: auto; aspect-ratio: 490 / 327; object-fit: cover; border-radius: var(--r-sm); background: var(--texte); }
.film.est-lance .film__video { aspect-ratio: 4 / 3; object-fit: contain; }
.film__lecture { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: var(--or); color: var(--texte); transition: background-color var(--d-2) ease, transform var(--d-1) ease-out; }
.film__lecture:hover { background: var(--or-clair); }
.film__lecture:active { transform: scale(.95); }
.film__lecture:focus-visible { border-radius: 50%; outline-color: var(--blanc); outline-offset: 4px; box-shadow: 0 0 0 9px var(--focus); }
.film__lecture .ico { width: 32px; height: 32px; margin-left: 4px; }
.film__lecture[hidden] { display: none; }
.film figcaption { display: flex; align-items: center; gap: var(--e-2); margin-top: calc(var(--e-3) + 14px); font-size: var(--fs-sm); color: var(--texte-moyen); font-variant-numeric: tabular-nums; }
.film figcaption .ico { width: 18px; height: 18px; color: var(--or-brun); }
.histoire__citation { grid-area: citation; margin: var(--e-3) 0 0; padding-left: var(--e-5); border-left: 3px solid var(--or); max-width: 420px; }
.histoire__citation p { font-family: var(--font-titre); font-style: italic; font-weight: 700; font-size: var(--fs-xl); line-height: 1.3; }
.histoire__citation footer { margin-top: var(--e-3); font-size: var(--fs-sm); line-height: 1.5; color: var(--texte-moyen); }
.histoire__citation cite { display: block; font-style: normal; font-weight: 600; color: var(--texte); }
@media (max-width: 899px) {
  .histoire { grid-template-columns: minmax(0, 1fr); }
  .histoire--un { grid-template-areas: "tete" "photo" "recit"; }
  .histoire--deux { grid-template-areas: "film" "video" "citation"; }
  .histoire-entete { margin-bottom: var(--e-5); }
  .onglets { flex-wrap: wrap; }
  .onglet { padding: 0 var(--e-3); font-size: var(--fs-sm); }
  .histoire__portrait { max-width: 300px; }
  .histoire__film { margin-top: var(--e-4); }
  .film { margin-top: 0; max-width: min(490px, calc(100% - 14px)); }
}

/* 5. LISTE DE PAGES : mes ingrédients --------------------------------------- */
.ingredients-section .ingredients { margin-top: 0; padding-top: 0; border-top: 0; }
.ingredients { margin-top: clamp(2.5rem, 6vw, 5rem); padding-top: clamp(2rem, 4vw, 3.5rem); border-top: 1px solid var(--trait); }
.ingredients__tete { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--e-3) var(--e-6); margin-bottom: var(--e-5); }
.ingredients__titre { font-size: var(--fs-xl); }
.ingredients__liste { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--e-3); }
.ingredient { display: flex; align-items: center; gap: var(--e-3); height: 100%; min-height: 72px; padding: var(--e-2) var(--e-4) var(--e-2) var(--e-2); background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r-pilule); font-size: var(--fs-sm); font-weight: 500; line-height: 1.3; transition: background-color var(--d-2) ease, color var(--d-2) ease; }
.ingredient__ico { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--vert-rosee); color: var(--vert-profond); transition: background-color var(--d-2) ease, color var(--d-2) ease; }
.ingredient:hover { border-color: var(--or); color: var(--vert-profond); }
.ingredient:hover .ingredient__ico { background: var(--or-pale); color: var(--or-brun); }
.ingredient:focus-visible { border-radius: var(--r-pilule); }
@media (max-width: 1199px) { .ingredients__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 719px) {
  /* Au pouce : les ingrédients défilent horizontalement, bord à bord */
  .ingredients__liste { display: flex; gap: var(--e-2); margin-inline: calc(-1 * var(--gouttiere)); padding: var(--e-1) var(--gouttiere) var(--e-3); overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--gouttiere); scrollbar-width: none; }
  .ingredients__liste::-webkit-scrollbar { display: none; }
  .ingredients__liste li { flex: none; width: 236px; scroll-snap-align: start; }
}

/* 6. AVIS GOOGLE : « Ils nous font confiance » ------------------------------ */
.avis-accueil__tete { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--e-4) var(--e-6); margin-bottom: var(--e-5); }
.note-google { display: grid; justify-items: start; gap: 2px; padding: var(--e-4) var(--e-5); background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r-md); }
.note-google__logo { width: 84px; height: auto; margin-bottom: var(--e-1); }
.note-google__score { display: flex; align-items: center; gap: var(--e-2); }
.note-google__valeur { font-family: var(--font-titre); font-weight: 700; font-size: 2rem; line-height: 1; font-variant-numeric: lining-nums; }
.note-google__compte { font-size: var(--fs-sm); color: var(--texte-moyen); }
.avis-accueil__commandes { display: flex; align-items: center; gap: var(--e-1); }
.avis-accueil__position { margin-right: var(--e-2); font-size: var(--fs-sm); color: var(--texte-moyen); font-variant-numeric: tabular-nums; white-space: nowrap; }
.liste-avis { position: relative; display: flex; gap: var(--e-5); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; border-radius: var(--r-md); }
.liste-avis::-webkit-scrollbar { display: none; }
.liste-avis:focus-visible { outline-offset: 4px; }
.temoignage { position: relative; display: flex; flex-direction: column; gap: var(--e-3); flex: 0 0 calc((100% - 2 * var(--e-5)) / 3); scroll-snap-align: start; padding: var(--e-5); background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r-md); }
.temoignage__tete { display: grid; grid-template-columns: 44px minmax(0, 1fr) 22px; align-items: center; gap: var(--e-3); }
.temoignage__tete > svg { width: 22px; height: 22px; }
.temoignage__initiale { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--or-pale); color: var(--or-brun); font-weight: 600; }
.temoignage__auteur > strong { display: block; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.temoignage__auteur > span { display: block; font-size: var(--fs-xs); color: var(--texte-moyen); }
.temoignage__texte { font-size: .9375rem; line-height: 1.6; }
.temoignage__source { margin-top: auto; font-size: var(--fs-xs); color: var(--texte-moyen); }
.avis-accueil__pied { margin-top: var(--e-3); }
@media (max-width: 1023px) { .temoignage { flex-basis: calc((100% - var(--e-5)) / 2); } }
@media (max-width: 719px) {
  .avis-accueil__tete { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .avis-accueil__commandes { grid-column: 1 / -1; justify-content: flex-end; }
  .avis-accueil__position { margin-right: auto; }
  .note-google { padding: var(--e-3) var(--e-4); }
  .note-google__logo { width: 68px; }
  .note-google__valeur { font-size: 1.625rem; }
  .liste-avis { gap: var(--e-3); margin-inline: calc(-1 * var(--gouttiere)); padding-inline: var(--gouttiere); scroll-padding-inline: var(--gouttiere); border-radius: 0; }
  .temoignage { flex-basis: min(84vw, 340px); padding: var(--e-4); }
}

@media (max-width: 419px) { .avis-accueil__tete { grid-template-columns: minmax(0, 1fr); } .note-google { justify-self: start; } }

@media (max-width: 719px) {
  .bande--b .liste-avis, .bande--a .liste-avis { margin-inline: calc(-1 * var(--pan-x)); padding-inline: var(--pan-x); scroll-padding-inline: var(--pan-x); }
}

/* 7. CONFIANCE : Nature & Progrès, Instagram, presse ------------------------ */
.confiance { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "label insta" "label presse"; grid-template-rows: auto 1fr; gap: var(--e-4) var(--e-5); align-items: stretch; }
.confiance > * { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r-lg); }
.label-np { grid-area: label; display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: var(--e-6); align-items: center; padding: var(--e-6); }
.label-np__logo { width: 168px; height: auto; }
.label-np__titre { font-size: var(--fs-2xl); }
.label-np__accroche { margin-top: var(--e-4); font-size: var(--fs-md); font-weight: 500; max-width: 46ch; }
.label-np__texte { margin-top: var(--e-3); font-size: .9375rem; color: var(--texte-moyen); max-width: 56ch; }
.label-np__encadre { margin-top: var(--e-4); font-size: var(--fs-sm); color: var(--texte-moyen); }
.label-np__points { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-2); }
.label-np__points li { display: inline-flex; align-items: center; gap: var(--e-2); padding: .35rem .8rem; border-radius: var(--r-pilule); background: var(--vert-brume); color: var(--vert-profond); font-size: var(--fs-sm); font-weight: 500; }
.label-np__points .ico { width: 16px; height: 16px; }
.label-np .lien { margin-top: var(--e-3); }
.insta { grid-area: insta; padding: var(--e-5); }
.insta__tete { display: flex; align-items: center; gap: var(--e-3); }
.insta__logo { flex: none; width: 44px; height: 44px; }
.insta__titre { font-size: var(--fs-lg); line-height: 1.25; }
/* Une seule rangée de quatre photos, chacune bien en dessous de sa définition */
.insta__rangee { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-2); margin-top: var(--e-4); }
.insta__rangee img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--r-xs); background: var(--gris-plateau); }
.insta__pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2) var(--e-4); margin-top: var(--e-4); }
.insta__legende { font-size: var(--fs-xs); color: var(--texte-moyen); }
.insta__legende a { text-decoration: underline; text-decoration-color: var(--trait-champ); text-underline-offset: 3px; }
.insta__legende a:hover { color: var(--texte); text-decoration-color: var(--or); }
.insta .btn .insta__glyphe { width: 24px; height: 24px; }
.presse { grid-area: presse; display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); align-items: center; gap: var(--e-2) var(--e-5); padding: var(--e-5); }
.presse img { grid-row: 1 / span 2; width: 100%; max-width: 200px; height: auto; }
.presse__titre { align-self: end; font-size: var(--fs-lg); line-height: 1.25; }
.presse .lien { align-self: start; justify-self: start; }
@media (max-width: 1023px) {
  .confiance { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "insta" "presse"; }
}
@media (max-width: 599px) {
  .confiance { gap: var(--e-3); }
  .confiance > * { border-radius: var(--r-md); }
  .label-np { grid-template-columns: 72px minmax(0, 1fr); gap: var(--e-3) var(--e-4); padding: var(--e-4); align-items: center; }
  .label-np__logo { width: 72px; }
  .label-np__corps { display: contents; }
  .label-np__titre { font-size: var(--fs-xl); }
  .label-np__suite { grid-column: 1 / -1; }
  .label-np__accroche { margin-top: 0; font-size: var(--fs-base); }
  .label-np__texte, .label-np__encadre { display: none; }
  .label-np__points { margin-top: var(--e-3); }
  .insta { padding: var(--e-4); }
  .insta__logo { width: 40px; height: 40px; }
  .insta__titre { font-size: var(--fs-md); }
  .insta__rangee { gap: var(--e-1); margin-top: var(--e-3); }
  .insta__pied { margin-top: var(--e-3); }
  .presse { grid-template-columns: 112px minmax(0, 1fr); gap: 0 var(--e-4); padding: var(--e-3) var(--e-4); }
  .presse__titre { font-size: var(--fs-base); }
  .presse .lien { font-size: var(--fs-sm); white-space: nowrap; }
}

@media (max-width: 359px) { .presse { grid-template-columns: 84px minmax(0, 1fr); } .presse .lien { white-space: normal; overflow-wrap: anywhere; } }

/* 8. AGENDA : marchés et prochains événements ------------------------------- */
.agenda { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.agenda__titre { font-size: var(--fs-xl); margin-bottom: var(--e-5); }
.marches__photo-cadre { max-width: 600px; margin: 0 14px 14px 0; }
.marches__intro { margin-top: var(--e-5); max-width: 56ch; }
.marches__intro strong, .marches__suite strong { font-weight: 600; }
.creneaux { display: grid; margin-top: var(--e-3); max-width: 600px; }
.creneau { display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: baseline; gap: var(--e-4); padding-block: var(--e-3); border-top: 1px solid var(--trait); }
.creneau:last-child { border-bottom: 1px solid var(--trait); }
.creneau dt { font-family: var(--font-titre); font-weight: 700; font-size: var(--fs-md); }
.creneau dd { margin: 0; font-size: .9375rem; line-height: 1.5; }
.creneau dd small { display: block; font-size: var(--fs-sm); color: var(--texte-moyen); }
.marches__suite { margin-top: var(--e-4); max-width: 56ch; color: var(--texte-moyen); font-size: .9375rem; }
@media (max-width: 479px) { .creneau { grid-template-columns: 112px minmax(0, 1fr); gap: var(--e-3); } .creneau dt { font-size: var(--fs-base); } }
.marches__photo { display: block; width: 100%; height: auto; border-radius: var(--r-sm); background: var(--gris-plateau); }
.evenements { display: grid; }
.evenement { position: relative; display: grid; grid-template-columns: 132px minmax(0, 1fr) 24px; align-items: center; gap: var(--e-4); padding-block: var(--e-3); border-top: 1px solid var(--trait); }
.evenement:last-child { border-bottom: 1px solid var(--trait); }
.evenement__visuel { display: grid; place-items: center; width: 132px; aspect-ratio: 3 / 2; border-radius: var(--r-sm); background: var(--gris-plateau); color: var(--texte-moyen); overflow: hidden; }
.evenement__visuel img { width: 100%; height: 100%; object-fit: cover; }
.evenement__date { display: inline-flex; align-items: center; gap: var(--e-2); font-size: var(--fs-sm); font-weight: 600; color: var(--or-brun); font-variant-numeric: tabular-nums; }
.evenement__date .ico { width: 16px; height: 16px; }
.evenement__nom { margin-top: 2px; font-size: var(--fs-md); line-height: 1.25; }
.evenement__nom a { outline: none; }
.evenement__nom a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-sm); }
.evenement__nom a:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 2px; }
.evenement:hover .evenement__nom a { text-decoration: underline; text-decoration-color: var(--or); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.evenement__lieu { display: flex; align-items: center; gap: var(--e-1); margin-top: 2px; font-size: var(--fs-sm); color: var(--texte-moyen); }
.evenement__lieu .ico { width: 16px; height: 16px; }
.evenement > .ico { color: var(--trait-champ); transition: transform var(--d-2) var(--ease-sortie), color var(--d-2) ease; }
.evenement:hover > .ico { color: var(--vert-profond); }
@media (hover: hover) and (pointer: fine) { .evenement:hover > .ico { transform: translateX(3px); } }
.agenda__actions { margin-top: var(--e-5); }
@media (max-width: 899px) { .agenda { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 479px) {
  .evenement { grid-template-columns: 96px minmax(0, 1fr); gap: var(--e-3); }
  .evenement__visuel { width: 96px; }
  .evenement > .ico { display: none; }
}

/* 9. QUIZ ------------------------------------------------------------------- */
.quiz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: center; gap: var(--e-5) var(--e-7); padding: clamp(1.5rem, 1rem + 2.5vw, 3rem); background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r-xl); }
.quiz__titre { font-size: var(--fs-2xl); }
.quiz__texte { margin-top: var(--e-3); font-size: var(--fs-md); color: var(--texte-moyen); max-width: 40ch; }
.quiz__actions { margin-top: var(--e-5); }
.quiz__visuel { display: block; border-radius: var(--r-md); }
.quiz__visuel img { width: 100%; border-radius: var(--r-sm); }
@media (max-width: 767px) {
  .quiz { grid-template-columns: minmax(0, 1fr); border-radius: var(--r-lg); }
  .quiz__visuel { max-width: 420px; }
}

/* 10. MOUVEMENT RÉDUIT ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .film__lecture:active { transform: none; }
  .evenement:hover > .ico { transform: none; }
}

/* 11. MOTEUR DE RENDU DES BLOCS (Src\Libraries\Front\BlockRenderer) ------------ */
/* Mise en page commune aux blocs rendus depuis le back-office : carte, rangée à deux colonnes,
   onglets, repli générique. Les blocs eux-mêmes gardent les classes des parties 3 à 9. */

/* Carte : un bloc posé sur une surface blanche à filet (label, Instagram, presse…) */
.bloc-carte { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r-lg); }

/* Rangée à deux colonnes (option « column » des blocs) : les blocs s'empilent dans leur colonne.
   Sur un panneau teinté, les colonnes sont serrées et de même hauteur (cartes) ;
   sur fond blanc, elles sont espacées et alignées en haut. */
.rangee-blocs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.rangee-blocs--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.rangee-blocs--5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.rangee-blocs__col { display: flex; flex-direction: column; gap: var(--e-4); min-width: 0; }
.rangee-blocs__bloc { display: flex; flex-direction: column; min-width: 0; }
.rangee-blocs__bloc > .bloc-carte { flex: 1; }
.bande--a .rangee-blocs, .bande--b .rangee-blocs { gap: var(--e-4) var(--e-5); align-items: stretch; }
.bande--a .rangee-blocs__bloc:last-child, .bande--b .rangee-blocs__bloc:last-child { flex: 1; }
@media (max-width: 1023px) { .bande--a .rangee-blocs, .bande--b .rangee-blocs { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 899px) { .rangee-blocs { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599px) {
  .bloc-carte { border-radius: var(--r-md); }
  .bande--a .rangee-blocs, .bande--b .rangee-blocs, .rangee-blocs__col { gap: var(--e-3); }
}

/* Onglets (option « tab_group ») : un panneau par bloc. Sans JS, les panneaux se suivent ;
   avec JS, ils partagent la même case et le bloc garde la hauteur du plus grand. */
.onglet-panneau { min-width: 0; }
.onglet-panneau + .onglet-panneau { margin-top: var(--e-5); }
.onglet-panneau > .histoire--deux { margin-top: 0; }
.a-onglets .histoire-panneaux > .onglet-panneau { grid-area: 1 / 1; margin-top: 0; }
.a-onglets .onglet-panneau.est-masque { visibility: hidden; }

/* Pictogrammes venus du back-office : classes Font Awesome (sdj-icons.css) et icônes d'ingrédient */
.bienfait strong i { flex: none; font-size: 20px; color: var(--or-brun); }
.ingredient__ico svg { width: 28px; height: 28px; stroke-width: 3.5; }

/* Textes riches placés dans les blocs (le back-office enregistre des paragraphes) */
.marches__intro > * + *, .quiz__texte > * + * { margin-top: var(--e-3); }
.bloc-standard .marches__photo { aspect-ratio: auto; }

/* Repli générique : un type de bloc sans rendu dédié */
.bloc-generique--media { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(1.5rem, 4vw, 4.5rem); }
.bloc-generique--inverse .bloc-generique__texte { order: 2; }
.bloc-generique__texte .prose { margin-top: var(--e-4); }
.bloc-generique__actions { margin-top: var(--e-5); }
.bloc-generique__media img, .bloc-generique__media video { display: block; width: 100%; height: auto; border-radius: var(--r-sm); background: var(--gris-plateau); }
@media (max-width: 767px) {
  .bloc-generique--media { grid-template-columns: minmax(0, 1fr); }
  .bloc-generique--inverse .bloc-generique__texte { order: 0; }
}

/* 12. BLOCS DES PAGES DE CONTENU (types du back-office) ------------------------- */
/* Texte riche : compléments pour le HTML libre de l'éditeur (images, tableaux, vidéos, titres) */
.prose h2 { font-size: var(--fs-xl); margin-top: 1.6em; }
.prose img { height: auto; border-radius: var(--r-sm); }
.prose img[data-float="left"], .prose img[data-alignment="left"] { float: left; max-width: 46%; margin: .3em var(--e-5) var(--e-3) 0; }
.prose img[data-float="right"], .prose img[data-alignment="right"] { float: right; max-width: 46%; margin: .3em 0 var(--e-3) var(--e-5); }
.prose img[data-alignment="center"], .prose img[data-float="none"] { margin-inline: auto; }
.prose::after { content: ""; display: block; clear: both; }
.prose video, .prose iframe { display: block; width: 100%; max-width: 100%; border: 0; border-radius: var(--r-sm); }
.prose video { height: auto; }
.prose iframe { aspect-ratio: 16 / 9; }
.prose table { display: block; width: 100%; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: .9375rem; }
.prose th, .prose td { padding: var(--e-2) var(--e-3); border: 1px solid var(--trait); text-align: left; vertical-align: top; }
.prose th { background: var(--vert-brume); font-weight: 600; }
.prose blockquote { margin: 1.4em 0; padding-left: var(--e-5); border-left: 3px solid var(--or); font-style: italic; }
.prose hr { border: 0; border-top: 1px solid var(--trait); margin: 2em 0; }
.prose u { text-underline-offset: 3px; }
@media (max-width: 599px) {
  .prose img[data-float], .prose img[data-alignment] { float: none; max-width: 100%; margin: var(--e-3) 0; }
}

/* Page en affichage classique, introductions */
.page-classique__image { margin-bottom: var(--e-6); }
.page-classique__image img { display: block; max-width: min(100%, 800px); border-radius: var(--r-md); }
.page-classique__texte--centre { margin-inline: auto; text-align: center; font-size: var(--fs-md); color: var(--texte-moyen); }

/* Texte et média côte à côte (standard, video, link, gallery) */
.bloc-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(1.5rem, 5vw, 5rem); }
.bloc-duo--30-70 { grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); }
.bloc-duo--70-30 { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); }
.bloc-duo--auto { grid-template-columns: minmax(0, 1fr) auto; }
.bloc-duo--auto .bloc-duo__media { max-width: min(46vw, 520px); }
.bloc-duo--seul, .bloc-duo--pile { grid-template-columns: minmax(0, 1fr); }
/* Image étroite : le bloc se resserre autour d'elle (texte sur une colonne de lecture, image à sa taille réelle) */
.bloc-duo--etroit { grid-template-columns: minmax(0, 42rem) minmax(0, var(--media)); justify-content: start; align-items: start; gap: clamp(1.5rem, 4vw, 3.5rem); }
.bloc-duo--etroit.bloc-duo--inverse { grid-template-columns: minmax(0, var(--media)) minmax(0, 42rem); }
.bloc-duo--etroit-bord { grid-template-columns: minmax(0, 1fr) minmax(0, var(--media)); }
/* Le titre peut courir sur toute la colonne ; le texte garde sa largeur de lecture (.prose, 68 caractères) */
.bloc-duo--etroit .bloc-duo__media { margin-top: var(--e-2); }
.bloc-duo--court { grid-template-columns: minmax(0, 26rem) minmax(0, 20rem); justify-content: center; gap: clamp(1.5rem, 4vw, 3.5rem); }
.bloc-duo--court.bloc-duo--inverse { grid-template-columns: minmax(0, 20rem) minmax(0, 26rem); }
.bloc-duo--inverse .bloc-duo__texte { order: 2; }
.bloc-duo--centre .bloc-duo__texte { text-align: center; }
.bloc-duo--centre .titre-trait::after { margin-inline: auto; }
.bloc-duo--centre .prose { margin-inline: auto; }
.bloc-duo__texte .prose { margin-top: var(--e-4); }
.bloc-duo__actions { margin-top: var(--e-5); }
/* Une photo en hauteur ne dépasse pas 36rem : elle est recadrée plutôt que d'écraser un texte court */
.bloc-duo__media img, .bloc-duo__media video { display: block; width: 100%; height: auto; max-height: 36rem; object-fit: cover; margin-inline: auto; border-radius: var(--r-md); }
.bloc-duo__media--entier img { width: auto; max-width: 100%; max-height: none; object-fit: contain; margin-inline: auto; }
.bloc-duo__media a { display: block; border-radius: var(--r-md); }
@media (max-width: 767px) {
  .bloc-duo, .bloc-duo--30-70, .bloc-duo--70-30, .bloc-duo--auto, .bloc-duo--etroit, .bloc-duo--etroit.bloc-duo--inverse, .bloc-duo--etroit-bord, .bloc-duo--court, .bloc-duo--court.bloc-duo--inverse { grid-template-columns: minmax(0, 1fr); }
  .bloc-duo--etroit .bloc-duo__media img { margin-inline: 0; }
  .bloc-duo--auto .bloc-duo__media { max-width: 100%; }
  .bloc-duo--inverse .bloc-duo__texte { order: 0; }
}

/* Bandeau : une image (souvent un logo) et un lien, sans titre ni texte */
.bloc-bandeau { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-4) var(--e-6); padding: var(--e-4) clamp(1.25rem, 3vw, 2.5rem); border-radius: var(--r-md); }
.bloc-bandeau__media img { display: block; width: auto; max-width: min(100%, 260px); height: auto; max-height: 120px; object-fit: contain; }
.bloc-bandeau .bloc-duo__actions { margin: 0; }

/* Texte seul */
.bloc-texte .prose { margin-top: var(--e-4); }
@media (min-width: 1000px) {
  .bloc-texte--large { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
  .bloc-texte--large .prose { margin-top: var(--e-2); }
}
.bloc-texte--centre { text-align: center; }
.bloc-texte--centre .titre-trait::after, .bloc-integre--centre .titre-trait::after { margin-inline: auto; }
.bloc-texte--centre .prose { margin-inline: auto; }

/* Citation */
.bloc-citation { max-width: 46rem; margin: 0 auto; padding-left: var(--e-5); border-left: 3px solid var(--or); }
.bloc-citation p { font-family: var(--font-titre); font-style: italic; font-weight: 700; font-size: var(--fs-xl); line-height: 1.3; }
.bloc-citation footer { margin-top: var(--e-3); font-size: var(--fs-sm); line-height: 1.5; color: var(--texte-moyen); }
.bloc-citation cite { display: block; font-style: normal; font-weight: 600; color: var(--texte); }

/* Bannière : image dans le cadre, encart blanc posé dessus */
.bloc-banniere { position: relative; display: grid; align-items: end; }
.bloc-banniere__image { grid-area: 1 / 1; border-radius: var(--r-lg); overflow: hidden; background: var(--gris-plateau); }
.bloc-banniere__image img { display: block; width: 100%; height: clamp(260px, 34vw, 460px); object-fit: cover; }
.bloc-banniere--entiere .bloc-banniere__image img { height: auto; object-fit: contain; }
.bloc-banniere__encart { grid-area: 1 / 1; position: relative; max-width: min(620px, calc(100% - 2 * var(--e-5))); margin: var(--e-5); padding: var(--e-5) var(--e-6); background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r-md); }
.bloc-banniere--nue .bloc-banniere__encart { max-width: none; margin: 0; background: var(--bande-a); border-color: transparent; border-radius: var(--r-xl); padding: clamp(1.75rem, 4vw, 3.5rem); }
.bloc-banniere__titre { font-size: var(--fs-2xl); }
.bloc-banniere__texte { margin-top: var(--e-3); color: var(--texte-moyen); }
.bloc-banniere__actions { margin-top: var(--e-4); }
@media (max-width: 767px) {
  .bloc-banniere { display: block; }
  .bloc-banniere__image { border-radius: var(--r-md); }
  .bloc-banniere__image img { height: clamp(180px, 52vw, 320px); }
  .bloc-banniere__encart { max-width: none; margin: calc(-1 * var(--e-6)) var(--e-3) 0; padding: var(--e-4); }
  .bloc-banniere--nue .bloc-banniere__encart { margin: 0; border-radius: var(--r-lg); }
}

/* Grille d'images */
.bloc-grille__intro, .bloc-cartes__intro, .bloc-etapes__intro { margin-top: var(--e-4); }
.bloc-grille__images { display: grid; gap: var(--e-4); margin-top: var(--e-5); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bloc-grille__images--simple-1 { grid-template-columns: minmax(0, 1fr); }
.bloc-grille__images--simple-2, .bloc-grille__images--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bloc-grille__images--simple-3, .bloc-grille__images--cols-3, .bloc-grille__images--6-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bloc-grille__images--cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.bloc-grille__images--5-center, .bloc-grille__images--5-left { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bloc-grille__images--5-center .bloc-grille__item:nth-child(3), .bloc-grille__images--5-left .bloc-grille__item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.bloc-grille__images--5-center .bloc-grille__item:nth-child(3) { grid-column: 2 / span 2; grid-row: 1 / span 2; }
.bloc-grille__images--masonry { display: block; columns: 3; column-gap: var(--e-4); }
.bloc-grille__images--masonry .bloc-grille__item { break-inside: avoid; margin-bottom: var(--e-4); }
.bloc-grille__item figure { margin: 0; height: 100%; display: flex; flex-direction: column; }
.bloc-grille__item img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--r-md); }
/* Tuiles limitées au côté de la plus petite image, grille calée sur les deux bords du cadre */
@media (min-width: 900px) {
  .bloc-grille__images--tuile { grid-template-columns: repeat(var(--colonnes), minmax(0, var(--tuile))); justify-content: space-between; }
  .bloc-grille__images--serre { justify-content: start; }
  .bloc-grille__images--centre { justify-content: center; }
  .bloc-grille__images--libre { grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr)); }
  .bloc-grille__images--libre img { width: min(100%, var(--tuile)); }
  /* Petites images : posées à côté du titre et du texte, à leur taille */
  .bloc-grille--cote { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--besoin)); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
  .bloc-grille--cote .bloc-grille__images { margin-top: var(--e-2); }
}
/* Récit : texte long en colonne de lecture (premier paragraphe en accroche), images à côté */
.bloc-grille--recit .prose > p:first-child { font-size: var(--fs-md); line-height: 1.65; font-weight: 500; }
@media (min-width: 900px) {
  .bloc-grille--recit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.75rem); align-items: center; }
  .bloc-grille--recit .bloc-grille__images { margin-top: 0; justify-content: end; }
}
.bloc-grille__images--simple-1 img, .bloc-grille__images--masonry img, .bloc-grille__item--entier img { aspect-ratio: auto; height: auto; object-fit: contain; background: none; }
.bloc-grille__images--5-center .bloc-grille__item:nth-child(3) img, .bloc-grille__images--5-left .bloc-grille__item:nth-child(1) img { flex: 1; aspect-ratio: auto; height: 100%; }
.bloc-grille__item picture { display: block; flex: 1; }
.bloc-grille__item figcaption { margin-top: var(--e-2); font-size: var(--fs-sm); line-height: 1.45; color: var(--texte-moyen); }
@media (max-width: 899px) {
  .bloc-grille__images, .bloc-grille__images--cols-6, .bloc-grille__images--5-center, .bloc-grille__images--5-left { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bloc-grille__images--simple-3, .bloc-grille__images--cols-3, .bloc-grille__images--6-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bloc-grille__images--masonry { columns: 2; }
  .bloc-grille__images--5-center .bloc-grille__item:nth-child(3), .bloc-grille__images--5-left .bloc-grille__item:nth-child(1) { grid-column: 1 / -1; grid-row: auto; }
  .bloc-grille__images--5-center .bloc-grille__item:nth-child(3) img, .bloc-grille__images--5-left .bloc-grille__item:nth-child(1) img { aspect-ratio: 16 / 9; height: auto; }
}
@media (max-width: 599px) {
  .bloc-grille__images { gap: var(--e-3); }
  .bloc-grille__images--simple-3, .bloc-grille__images--cols-3, .bloc-grille__images--6-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bloc-grille__images--simple-1 { grid-template-columns: minmax(0, 1fr); }
}

/* Accordéon (questions fréquentes) : composant .accordeon du socle (socle.css, partie 16.2) */
.bloc-accordeon .accordeon { margin-top: var(--e-5); }

/* Cartes */
.bloc-cartes__grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-4); margin-top: var(--e-5); }
.bloc-cartes__grille--1 { grid-template-columns: minmax(0, 1fr); }
.bloc-cartes__grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bloc-cartes__grille--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 1024px) {
  .bloc-cartes__grille--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .bloc-cartes__grille--5 > * { grid-column: span 2; }
  .bloc-cartes__grille--5 > :nth-child(n + 4) { grid-column: span 3; }
  .bloc-cartes__grille--7 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .bloc-cartes__grille--7 > * { grid-column: span 3; }
  .bloc-cartes__grille--7 > :nth-child(n + 5) { grid-column: span 4; }
}
@media (min-width: 768px) and (max-width: 1023px) { .bloc-cartes__grille--5, .bloc-cartes__grille--7 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bloc-cartes__grille--5 > :last-child, .bloc-cartes__grille--7 > :last-child { grid-column: 1 / -1; } }
.bloc-cartes__carte { padding: var(--e-5); border-radius: var(--r-md); }
.bloc-cartes__icone { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--e-3); border-radius: var(--r-galet-b); background: var(--vert-rosee); color: var(--vert-profond); font-size: 24px; }
.bloc-cartes__image { margin: calc(-1 * var(--e-5)) calc(-1 * var(--e-5)) var(--e-4); border-radius: var(--r-md) var(--r-md) 0 0; overflow: hidden; }
.bloc-cartes__image img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--gris-plateau); }
.bloc-cartes__image--entiere img { aspect-ratio: auto; height: auto; object-fit: contain; }
.bloc-cartes__titre { font-size: var(--fs-md); line-height: 1.25; }
.bloc-cartes__texte { margin-top: var(--e-2); font-size: .9375rem; line-height: 1.6; color: var(--texte-moyen); }
@media (max-width: 1023px) { .bloc-cartes__grille--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .bloc-cartes__grille, .bloc-cartes__grille--2, .bloc-cartes__grille--4 { grid-template-columns: minmax(0, 1fr); gap: var(--e-3); } .bloc-cartes__carte { padding: var(--e-4); } .bloc-cartes__image { margin: calc(-1 * var(--e-4)) calc(-1 * var(--e-4)) var(--e-3); } }

/* Étapes numérotées. Illustrées : cartes en rangées (jamais plus larges que la plus petite photo, --tuile)
   ou cartes en ligne (photo à gauche) quand les photos sont trop petites ; sans image : liste sur deux colonnes */
.bloc-etapes__liste { display: grid; gap: var(--e-4); margin-top: var(--e-5); counter-reset: etape; }
.bloc-etapes__etape { position: relative; counter-increment: etape; min-width: 0; }
.bloc-etapes__etape::before { content: counter(etape); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--or); color: var(--texte); font-weight: 700; line-height: 1; }
.bloc-etapes__titre { font-size: var(--fs-md); line-height: 1.3; }
.bloc-etapes__texte { margin-top: var(--e-2); font-size: .9375rem; line-height: 1.6; color: var(--texte-moyen); }
.bloc-etapes__texte > * + * { margin-top: var(--e-2); }
.bloc-etapes__texte strong { font-weight: 600; color: var(--texte); }
.bloc-etapes__liste--illustre .bloc-etapes__etape { border-radius: var(--r-md); overflow: hidden; }
.bloc-etapes__liste--illustre .bloc-etapes__etape::before { position: absolute; left: var(--e-3); top: var(--e-3); z-index: 1; width: 42px; height: 42px; border: 3px solid var(--blanc); }
.bloc-etapes__image { aspect-ratio: 3 / 2; overflow: hidden; background: var(--gris-plateau); }
.bloc-etapes__image img, .bloc-etapes__image picture { display: block; width: 100%; height: 100%; object-fit: cover; }
.bloc-etapes__liste--cartes { grid-template-columns: repeat(var(--colonnes, 3), minmax(0, var(--tuile, 1fr))); justify-content: space-between; align-items: stretch; }
.bloc-etapes__liste--cartes .bloc-etapes__etape { display: flex; flex-direction: column; }
.bloc-etapes__liste--cartes .bloc-etapes__corps { padding: var(--e-4); }
.bloc-etapes__liste--illustre .bloc-etapes__etape:not(:has(.bloc-etapes__image)) .bloc-etapes__corps { padding-top: calc(42px + var(--e-5)); }
.bloc-etapes__liste--lignes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bloc-etapes__liste--une { grid-template-columns: minmax(0, 1fr); }
.bloc-etapes__liste--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bloc-etapes__liste--impair > :last-child { grid-column: 1 / -1; }
.bloc-etapes__liste--lignes .bloc-etapes__etape { display: grid; grid-template-columns: minmax(0, min(var(--tuile), 40%)) minmax(0, 1fr); gap: var(--e-4); align-items: start; padding: var(--e-3); }
.bloc-etapes__liste--lignes .bloc-etapes__etape:not(:has(.bloc-etapes__image)) { grid-template-columns: minmax(0, 1fr); }
.bloc-etapes__liste--lignes .bloc-etapes__etape::before { left: var(--e-4); top: var(--e-4); width: 38px; height: 38px; }
.bloc-etapes__liste--lignes .bloc-etapes__image { border-radius: var(--r-sm); }
.bloc-etapes__liste--lignes .bloc-etapes__corps { padding: var(--e-2) var(--e-2) var(--e-2) 0; }
.bloc-etapes__liste--texte { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-5) var(--e-7); }
.bloc-etapes__liste--texte .bloc-etapes__etape { padding-left: 3.25rem; }
.bloc-etapes__liste--texte .bloc-etapes__etape::before { position: absolute; left: 0; top: 0; }
@media (max-width: 1099px) { .bloc-etapes__liste--c4, .bloc-etapes__liste--c5 { --colonnes: 3 !important; } .bloc-etapes__liste--trois { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bloc-etapes__liste--trois > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (max-width: 767px) {
  .bloc-etapes__liste--c3, .bloc-etapes__liste--c4, .bloc-etapes__liste--c5 { --colonnes: 2 !important; gap: var(--e-3); }
  .bloc-etapes__liste--lignes, .bloc-etapes__liste--texte { grid-template-columns: minmax(0, 1fr); }
}
/* Mobile : chaque étape tient sur une ligne, vignette carrée à gauche */
@media (max-width: 559px) {
  .bloc-etapes__liste--cartes { grid-template-columns: minmax(0, 1fr); gap: var(--e-3); }
  .bloc-etapes__liste--illustre .bloc-etapes__etape { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: var(--e-3); align-items: start; padding: var(--e-3); }
  .bloc-etapes__liste--illustre .bloc-etapes__etape:not(:has(.bloc-etapes__image)) { grid-template-columns: minmax(0, 1fr); }
  .bloc-etapes__liste--illustre .bloc-etapes__etape::before { left: var(--e-2); top: var(--e-2); width: 32px; height: 32px; border-width: 2px; font-size: var(--fs-sm); }
  .bloc-etapes__liste--illustre .bloc-etapes__image { aspect-ratio: 1; border-radius: var(--r-sm); }
  .bloc-etapes__liste--illustre .bloc-etapes__corps { padding: 0; }
  .bloc-etapes__liste--illustre .bloc-etapes__etape:not(:has(.bloc-etapes__image)) .bloc-etapes__corps { padding: 0 0 0 calc(32px + var(--e-3)); }
}

/* Avant / après */
.avant-apres { position: relative; max-width: 900px; margin: var(--e-5) auto 0; border-radius: var(--r-md); overflow: hidden; background: var(--gris-plateau); touch-action: pan-y; }
.avant-apres__couche img { display: block; width: 100%; height: auto; }
.avant-apres__couche--avant { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--coupe)) 0 0); }
.avant-apres__couche--avant img { height: 100%; object-fit: cover; }
.avant-apres__etiquette { position: absolute; top: var(--e-3); padding: .25rem .75rem; border-radius: var(--r-pilule); background: var(--blanc); font-size: var(--fs-sm); font-weight: 600; }
.avant-apres__etiquette--avant { left: var(--e-3); }
.avant-apres__etiquette--apres { right: var(--e-3); }
.avant-apres__trait { position: absolute; top: 0; bottom: 0; left: var(--coupe); width: 3px; margin-left: -1.5px; background: var(--blanc); pointer-events: none; }
.avant-apres__trait::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: var(--or); border: 3px solid var(--blanc); }
.avant-apres__curseur { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.avant-apres:has(.avant-apres__curseur:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }

/* Image et encart qui la chevauche (image_overlap, image_overlap_double) */
.bloc-mosaique { display: grid; gap: var(--e-7); }
.bloc-mosaique__intro .prose { margin-top: var(--e-4); }
.bloc-chevauche { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
.bloc-chevauche__image { grid-column: 1 / span 8; grid-row: 1; border-radius: var(--r-lg); overflow: hidden; background: var(--gris-plateau); }
.bloc-chevauche__image img { display: block; width: 100%; height: auto; }
.bloc-chevauche__carte { grid-column: 7 / -1; grid-row: 1; position: relative; padding: var(--e-6); }
.bloc-chevauche--gauche .bloc-chevauche__image { grid-column: 5 / -1; }
.bloc-chevauche--gauche .bloc-chevauche__carte { grid-column: 1 / span 6; }
.bloc-chevauche__carte--centre { text-align: center; }
.bloc-chevauche__titre { font-size: var(--fs-xl); }
.bloc-chevauche__carte > * + * { margin-top: var(--e-3); }
@media (max-width: 767px) {
  .bloc-chevauche { display: block; }
  .bloc-chevauche__image { border-radius: var(--r-md); }
  .bloc-chevauche__carte { margin: calc(-1 * var(--e-6)) var(--e-3) 0; padding: var(--e-4); }
}

/* Texte et image dans un même cadre (text_image_split) */
.bloc-partage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow: hidden; }
.bloc-partage--70-30 { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); }
.bloc-partage--30-70 { grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); }
.bloc-partage--auto { grid-template-columns: minmax(0, 1fr) auto; }
.bloc-partage--auto .bloc-partage__media { max-width: min(42vw, 460px); }
.bloc-partage--seul { grid-template-columns: minmax(0, 1fr); }
.bloc-partage__texte { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.5rem, 4vw, 3.5rem); }
.bloc-partage__texte--centre { text-align: center; align-items: center; }
.bloc-partage__texte--centre .titre-trait::after { margin-inline: auto; }
.bloc-partage--inverse .bloc-partage__texte { order: 2; }
.bloc-partage__titre { font-size: var(--fs-xl); }
.bloc-partage__texte .prose { margin-top: var(--e-4); }
.bloc-partage__actions { margin-top: var(--e-5); }
.bloc-partage__media { min-height: 100%; }
/* Image de définition suffisante : elle couvre sa moitié du cadre, au format de l'image (carré au plus) */
.bloc-partage__media--couvre { position: relative; min-height: 0; aspect-ratio: var(--format, 4 / 3); background: var(--gris-plateau); }
.bloc-partage__media--couvre > img, .bloc-partage__media--couvre > picture, .bloc-partage__media--couvre > picture > img { position: absolute; inset: 0; }
/* Image plus étroite que sa moitié : montrée à sa taille réelle, sans plateau ; très étroite, sa colonne se resserre */
.bloc-partage__media--nature { display: grid; place-items: center; padding: clamp(1.25rem, 3vw, 2.5rem); }
/* width: 100 % borné par la largeur réelle du fichier (max-width posé sur l'image par le moteur) */
.bloc-partage .bloc-partage__media--nature img { width: 100%; height: auto; object-fit: contain; border-radius: var(--r-md); }
.bloc-partage--etroit { grid-template-columns: minmax(0, 48rem) auto; justify-content: center; }
.bloc-partage--etroit.bloc-partage--inverse { grid-template-columns: auto minmax(0, 48rem); }
.bloc-partage--etroit .bloc-partage__media { max-width: min(46vw, 560px); }
.bloc-partage__media img, .bloc-partage__media video, .bloc-partage__media picture { display: block; width: 100%; height: 100%; object-fit: cover; }
.bloc-partage--auto .bloc-partage__media img { width: auto; max-width: 100%; height: auto; object-fit: contain; }
.bloc-partage--auto .bloc-partage__media { display: grid; place-items: center; padding: var(--e-5); background: none; }
@media (max-width: 767px) {
  .bloc-partage, .bloc-partage--70-30, .bloc-partage--30-70, .bloc-partage--auto { grid-template-columns: minmax(0, 1fr); }
  .bloc-partage--inverse .bloc-partage__texte { order: 0; }
  .bloc-partage--auto .bloc-partage__media { max-width: 100%; }
  .bloc-partage__media img, .bloc-partage__media video { height: auto; }
  .bloc-partage--etroit, .bloc-partage--etroit.bloc-partage--inverse { grid-template-columns: minmax(0, 1fr); }
  .bloc-partage--etroit .bloc-partage__media { max-width: 100%; }
  .bloc-partage__media--couvre > img, .bloc-partage__media--couvre > picture > img { height: 100%; }
  .bloc-partage__media--nature { padding-top: 0; }
}

/* Contenu intégré (iframe) */
.bloc-integre--centre { text-align: center; }
.bloc-integre__cadre { margin-top: var(--e-5); border: 1px solid var(--trait); border-radius: var(--r-md); overflow: hidden; background: var(--blanc); }
.bloc-integre__cadre iframe { display: block; width: 100%; border: 0; }

/* « Voir aussi », liste de pages, vignettes d'images, glossaire */
.ingredient__ico--photo { overflow: hidden; }
.ingredient__ico--photo img { width: 100%; height: 100%; object-fit: cover; }
.liste-pages { display: grid; }
.liste-pages__ligne { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr) 24px; align-items: center; gap: var(--e-4); padding-block: var(--e-4); border-top: 1px solid var(--trait); }
.liste-pages__ligne:last-child { border-bottom: 1px solid var(--trait); }
.liste-pages__visuel { display: grid; place-items: center; width: 72px; height: 72px; border-radius: var(--r-md); overflow: hidden; background: var(--vert-rosee); color: var(--vert-profond); }
.liste-pages__visuel img { width: 100%; height: 100%; object-fit: cover; }
.liste-pages__visuel svg { width: 36px; height: 36px; stroke-width: 3; }
.liste-pages__titre { font-size: var(--fs-lg); line-height: 1.25; }
.liste-pages__titre a { outline: none; }
.liste-pages__titre a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-sm); }
.liste-pages__titre a:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 2px; }
.liste-pages__ligne:hover .liste-pages__titre a { text-decoration: underline; text-decoration-color: var(--or); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.liste-pages__texte p { margin-top: var(--e-1); font-size: .9375rem; color: var(--texte-moyen); }
.liste-pages__ligne > .ico { color: var(--trait-champ); }
.liste-pages__ligne:hover > .ico { color: var(--vert-profond); }
@media (max-width: 479px) { .liste-pages__ligne { grid-template-columns: 56px minmax(0, 1fr); gap: var(--e-3); } .liste-pages__visuel { width: 56px; height: 56px; } .liste-pages__ligne > .ico { display: none; } .liste-pages__titre { font-size: var(--fs-md); } }
.page-images__photos { margin-top: var(--e-5); grid-template-columns: repeat(auto-fill, minmax(min(30%, 150px), 1fr)); }
.glossaire__lettres { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-5); }
.glossaire__lettres a { display: grid; place-items: center; min-width: var(--cible); height: var(--cible); padding: 0 var(--e-2); border: 1px solid var(--trait-champ); border-radius: var(--r-pilule); background: var(--blanc); font-weight: 600; transition: border-color var(--d-2) ease, background-color var(--d-2) ease; }
.glossaire__lettres a:hover { border-color: var(--vert-fonce); background: var(--vert-rosee); color: var(--vert-profond); }
.glossaire__lettres a:focus-visible { border-radius: var(--r-pilule); }
.glossaire__groupe { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--e-5); margin-top: var(--e-7); scroll-margin-top: calc(var(--entete-h) + var(--e-5)); }
.glossaire__lettre { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--r-galet-b); background: var(--vert-rosee); color: var(--vert-profond); font-family: var(--font-titre); font-weight: 700; font-size: var(--fs-xl); line-height: 1; }
.glossaire__termes { display: grid; gap: var(--e-5); margin: 0; }
.glossaire__terme { padding-bottom: var(--e-5); border-bottom: 1px solid var(--trait); }
.glossaire__terme h2 { font-size: var(--fs-lg); }
.glossaire__terme dd { margin: var(--e-2) 0 0; max-width: 72ch; color: var(--texte-moyen); }
.glossaire__terme .lien { margin-top: var(--e-1); font-size: .9375rem; }
.glossaire__liens { display: flex; flex-wrap: wrap; gap: 0 var(--e-6); }
@media (max-width: 599px) { .glossaire__groupe { grid-template-columns: minmax(0, 1fr); gap: var(--e-3); margin-top: var(--e-6); } .glossaire__lettre { width: 44px; height: 44px; font-size: var(--fs-lg); } }

/* Image plus petite que son cadre (data-petite, posé par le moteur) : montrée à sa taille réelle, centrée, jamais agrandie */
/* Photos de la page : une photo plus petite que sa tuile reste à sa taille, centrée, sans plateau gris autour */
.page-images__photos .vignette-photo:has(img.est-native) { background: none; }
.bloc-grille__item img[data-petite] { margin-inline: auto; }