/* HLV Advisory. Le mouvement est à la fin. */
@font-face { font-family: "Fraunces"; src: url("/assets/fonts/fraunces-latin.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/assets/fonts/figtree-latin.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "Marqueur"; src: url("/assets/fonts/permanent-marker-sous-ensemble.woff2") format("woff2"); font-weight: 400; font-display: swap; }
/* Replis mesurés : rien ne saute. */
@font-face { font-family: "Fraunces repli titre"; src: local("Georgia"); size-adjust: 104.2%; ascent-override: 93.8%; descent-override: 24.5%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces repli texte"; src: local("Georgia"); size-adjust: 106.1%; ascent-override: 92.2%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: "Figtree repli"; src: local("Arial"); font-weight: 100 550; size-adjust: 101%; ascent-override: 94%; descent-override: 24.7%; line-gap-override: 0%; }
@font-face { font-family: "Figtree repli"; src: local("Arial Bold"); font-weight: 551 900; size-adjust: 95.6%; ascent-override: 99.4%; descent-override: 26.1%; line-gap-override: 0%; }

:root {
  --creme: #f9f2e6;
  --creme-profond: #f2e8d6;
  --blanc: #fffcf6;
  --encre: #1c1916;
  --gris: #5e564d;
  --filet: #e9dcc6;
  --filet-fort: #8d8274;
  --rouge: #a3301f;
  --rouge-fonce: #82251a;
  --vert: #1d4a33;
  --vert-profond: #143425;
  --vert-texte: #f9f2e6;
  --vert-doux: #c9d6c9;
  --mangue: #f0b03a;
  --titrage: "Fraunces", "Fraunces repli titre", Georgia, serif;
  --serif: "Fraunces", "Fraunces repli texte", Georgia, serif;
  --sans: "Figtree", "Figtree repli", system-ui, sans-serif;
  --main: "Marqueur", Arial, sans-serif;
  --largeur: 76rem;
  --gouttiere: clamp(1.25rem, 4vw, 2.75rem);
  --air: clamp(3.5rem, 7vw, 6rem);
  --rayon: 1rem;
  --ressort: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ombre: 0 1px 2px rgba(28, 25, 22, 0.08), 0 18px 34px -16px rgba(28, 25, 22, 0.32);
}

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

html { background: var(--creme); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 6.5rem; font-synthesis: none; }

body { margin: 0; background: var(--creme); color: var(--encre); font: 400 1.0625rem/1.65 var(--sans); overflow-x: hidden; overflow-x: clip; display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body > main { flex: 1 0 auto; }
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
::selection { background: #f3d9a4; color: var(--encre); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.24em; }
:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; }

h1, h2, h3 { margin: 0; color: var(--encre); text-wrap: balance; }
h1, h2 { font-family: var(--titrage); font-weight: 450; letter-spacing: -0.02em; }
h2 { font-size: clamp(2.2rem, 1.4rem + 2.5vw, 3.75rem); line-height: 1.06; }
h3 { font-family: var(--serif); font-weight: 450; font-size: 1.375rem; line-height: 1.25; letter-spacing: -0.005em; }
p { margin: 0; text-wrap: pretty; }
strong { font-weight: 600; }

.section h2::before, .page-texte h1::before { content: ""; display: block; width: 0.5625rem; height: 0.5625rem; margin: 0 auto 1.5rem; background: var(--rouge); }

.contenu { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: var(--gouttiere); }
.section { padding-block: var(--air); overflow-x: clip; }
.section h2 { max-width: 12em; margin-inline: auto; text-align: center; }
.chapeau { max-width: 36rem; margin: 1.5rem auto 0; font-size: 1.1875rem; line-height: 1.6; color: var(--gris); text-align: center; }
.insecable { white-space: nowrap; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lien-evitement { position: absolute; left: 1rem; top: -4rem; z-index: 10; padding: 0.75rem 1.1rem; border-radius: 999px; background: var(--encre); color: var(--creme); }
.lien-evitement:focus { top: 1rem; color: var(--creme); }

.photos-etapes figcaption, .carte-groupe h3, .pied-liens a { font-family: var(--sans); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }

.bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: 0 1.7rem; border: 1.5px solid var(--encre); border-radius: 999px; background: transparent; color: var(--encre); font: 600 1.0625rem/1.2 var(--sans); letter-spacing: 0.01em; text-align: center; text-decoration: none; cursor: pointer; }
.bouton-action { border-color: var(--rouge); background: var(--rouge); color: var(--blanc); }

/* Survols : souris, et clavier. */
@media (hover: hover) and (pointer: fine) {
  a:is(:hover, :focus-visible), .question summary:is(:hover, :focus-visible) { color: var(--rouge); }
  .marque:is(:hover, :focus-visible) { color: var(--encre); }
  .bouton:is(:hover, :focus-visible), .accroche-offres a:is(:hover, :focus-visible) { background: var(--encre); color: var(--creme); }
  .bouton-action:is(:hover, :focus-visible) { border-color: var(--rouge-fonce); background: var(--rouge-fonce); color: var(--blanc); }
  .devis-joindre a:is(:hover, :focus-visible) { text-decoration-color: currentColor; }
  .pied a:is(:hover, :focus-visible) { color: var(--blanc); text-decoration-color: currentColor; }
  .champ :is(input, select, textarea):hover { border-color: var(--gris); }
}

/* En-tête : une pilule sur une bande opaque. */
.entete { --bande: var(--creme); position: sticky; top: 0; z-index: 5; margin-bottom: -1rem; padding: 0.75rem var(--gouttiere) 1rem; background: linear-gradient(var(--bande) calc(100% - 0.3rem), #0000); pointer-events: none; }
.entete .contenu { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: 72rem; min-height: 3.75rem; padding: 0.375rem 0.375rem 0.375rem 1.5rem; background: var(--blanc); border: 1px solid var(--filet); border-radius: 999px; box-shadow: 0 1px 2px rgba(28, 25, 22, 0.05), 0 10px 24px -16px rgba(28, 25, 22, 0.22); pointer-events: auto; }
.marque { display: flex; flex-direction: column; justify-content: center; gap: 0.3rem; min-height: 2.75rem; color: var(--encre); text-decoration: none; line-height: 1; white-space: nowrap; }
.marque-nom { font-family: var(--serif); font-size: 1.3125rem; letter-spacing: -0.01em; }
.marque-metier { font-size: 0.875rem; line-height: 1.2; color: var(--gris); }
.marque-nom::before, .pied-identite strong::before, .nav li [aria-current]::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.55rem; vertical-align: 0.12em; background: var(--rouge); }
.pied-identite strong::before { background: var(--mangue); }
/* Navigation ; au téléphone, un panneau. */
.nav, .nav ul { display: flex; align-items: center; gap: clamp(0.9rem, 1.6vw, 1.6rem); }
.nav { margin-left: auto; }
.nav ul { margin: 0; padding: 0; list-style: none; }
.nav :where(a:not(.bouton)) { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: 0.9375rem; font-weight: 500; white-space: nowrap; text-decoration: none; }
.entete-tel { letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
/* Langues : FR, NL, EN sur chaque page, la langue de la page marquée ; le nom complet pour les lecteurs d'écran. */
.langues { display: flex; padding: 0.1875rem; border: 1px solid var(--filet); border-radius: 999px; }
.nav .langue { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; min-height: 2.25rem; padding: 0 0.5rem; border-radius: 999px; color: var(--gris); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-decoration: none; }
.nav .langue[aria-current] { background: var(--creme-profond); color: var(--encre); }
.langue-nom { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.entete .bouton { flex: none; min-height: 2.875rem; padding: 0 1.3rem; font-size: 0.9375rem; }
@media (min-width: 64rem) { .menu, .nav-mobile { display: none; } }
@media (min-width: 64rem) and (max-width: 74.99rem) { .entete-tel { display: none; } }
@media (max-width: 63.99rem) {
  .menu { margin-left: auto; }
  .menu summary { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--filet-fort); border-radius: 50%; cursor: pointer; list-style: none; }
  .menu summary::-webkit-details-marker { display: none; }
  .menu summary::before { content: ""; width: 1.125rem; height: 0.8rem; border-block: 2px solid; background: linear-gradient(currentColor 0 0) center / 100% 2px no-repeat; }
  .menu[open] summary::before { height: 1.125rem; border: 0; background: linear-gradient(45deg, #0000 45%, currentColor 0 55%, #0000 0), linear-gradient(-45deg, #0000 45%, currentColor 0 55%, #0000 0); }
  .menu span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .menu[open] span:first-child, .menu:not([open]) span + span { display: none; }
  .nav { display: none; position: absolute; top: calc(100% + 0.5rem); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0.75rem; max-height: calc(100svh - 6rem); overflow-y: auto; padding: 0.5rem 1.25rem 1.25rem; background: var(--blanc); border: 1px solid var(--filet); border-radius: 1.5rem; box-shadow: var(--ombre); }
  .menu[open] + .nav { display: flex; }
  body:has(main :focus-visible, .pied :focus-visible) .nav { display: none; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav ul a { width: 100%; min-height: 3.25rem; border-bottom: 1px solid var(--filet); font: 400 1.375rem/1.2 var(--titrage); }
  .nav .bouton { min-height: 3.25rem; }
  .entete-tel { display: block; border: 1.5px solid var(--encre); border-radius: 999px; font-weight: 600; line-height: 3rem; text-align: center; }
  .nav p { font-size: 0.9375rem; color: var(--gris); text-align: center; }
  /* Au téléphone, les langues en tête du menu, en toutes lettres. */
  .langues { order: -1; margin-top: 0.5rem; }
  .nav .langue { flex: 1 1 auto; min-height: 2.75rem; padding: 0 0.5rem; font-size: 0.9375rem; letter-spacing: 0; }
  .langue-code { display: none; }
  .langue-nom { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
}
@media (max-width: 47.99rem) {
  .entete { padding-inline: 0.625rem; }
  .entete .contenu { min-height: 3.375rem; padding: 0.3rem 0.3rem 0.3rem 1.1rem; gap: 0.6rem; }
  .marque-nom { font-size: 1.1875rem; }
  .entete .bouton { min-height: 2.75rem; padding: 0 1rem; }
}
@media (max-width: 21.24rem) { .entete .contenu { padding-left: 0.85rem; gap: 0.45rem; } .entete .bouton { padding: 0 0.85rem; } }

.lien-suite { margin-top: 2rem; text-align: center; }
.lien-suite a { position: relative; font-weight: 600; text-decoration-color: var(--rouge); text-decoration-thickness: 2px; }
/* Le doigt a 44 px de haut, le texte 20 : la zone de toucher déborde, rien ne bouge à l'écran. */
.lien-suite a::before { content: ""; position: absolute; inset: -0.75rem -0.25rem; }
.lien-suite a::after { content: ""; display: inline-block; width: 0.42em; height: 0.42em; margin-left: 0.45em; border: solid; border-width: 2px 2px 0 0; rotate: 45deg; vertical-align: 0.12em; }
.formule h3 a { text-decoration: none; }

/* Accroche (ordre visuel seulement). */
.accroche { padding: clamp(1.25rem, 3vw, 2.5rem) 0 clamp(1.5rem, 3vw, 2.5rem); overflow-x: clip; }
.accroche-grille { display: grid; grid-template-columns: var(--gouttiere) minmax(0, 1fr) var(--gouttiere); justify-items: center; text-align: center; }
.accroche-texte { display: contents; }
.accroche-texte > * { grid-column: 2; }
.accroche h1 { grid-row: 2; max-width: 15em; font-size: clamp(2.1rem, 1.2rem + 4vw, 5.25rem); line-height: 1.02; letter-spacing: -0.02em; }
@media (max-width: 21.24rem) { .accroche h1 { font-size: 1.875rem; } }
/* Le surligneur mangue du titre, comme l'étiquette « Cuisiné ce matin » (choix d'Henri du 20/10/2026 : le haut de page était « éteint »). */
.surligne { background: linear-gradient(to top, transparent 0.06em, rgba(240, 176, 58, 0.62) 0.06em, rgba(240, 176, 58, 0.62) 0.4em, transparent 0.4em); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-inline: 0.05em; margin-inline: -0.05em; }
.titre-suite { display: block; }
.accroche-promesse .phrase { display: block; }
.accroche-promesse { grid-row: 3; max-width: 34rem; margin-top: 1.25rem; font-family: var(--serif); font-size: clamp(1.2rem, 1.06rem + 0.55vw, 1.5rem); line-height: 1.4; text-wrap: balance; }
.accroche-actions { grid-row: 4; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 1.75rem; }
.accroche-offres { grid-row: 5; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 0.625rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.accroche-offres a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.1rem; border: 1px solid var(--filet-fort); border-radius: 999px; background: var(--blanc); font-size: 0.9375rem; font-weight: 500; text-decoration: none; }
.accroche-recit { grid-row: 7; max-width: 37rem; margin-top: clamp(2rem, 4vw, 3rem); font: 400 clamp(1.125rem, 1.03rem + 0.3vw, 1.3125rem)/1.5 var(--serif); text-wrap: balance; }
.accroche-signature { grid-row: 1; display: flex; align-items: center; gap: 0.6rem; width: 10.5rem; margin-bottom: 1.25rem; padding: 0.25rem; border: 1px solid var(--filet); border-radius: 999px; background: var(--blanc); font: 400 1.0625rem/1.2 var(--serif); text-align: left; }
.portrait-rond { flex: none; border-radius: 50%; object-fit: cover; background: var(--creme-profond); }
.accroche-signature .portrait-rond { width: 2.25rem; height: 2.25rem; }

/* Le mur : quatre colonnes autour du plat. */
.mur { --u: clamp(0.5rem, 1.2vw, 1.4rem); grid-row: 6; grid-column: 1 / -1; display: flex; justify-content: center; align-items: center; gap: calc(2 * var(--u)); width: 100%; margin-top: clamp(2.25rem, 4.5vw, 3.5rem); }
.mur > * { flex: none; }
.mur-col { display: grid; gap: calc(1.6 * var(--u)); }
.mur-col img { width: 100%; border-radius: 0.875rem; background: var(--creme-profond); box-shadow: var(--ombre); rotate: var(--r); }
.mur > :nth-child(1) { --r: -3deg; --i: 2; --dy: calc(-4 * var(--u)); width: calc(13 * var(--u)); margin-top: calc(8 * var(--u)); }
.mur > :nth-child(2) { --r: 2.5deg; --i: 1; --dy: calc(-2 * var(--u)); width: calc(15 * var(--u)); margin-bottom: calc(4 * var(--u)); }
.mur > :nth-child(4) { --r: -2deg; --i: 1; --dy: calc(-2.5 * var(--u)); width: calc(15 * var(--u)); margin-top: calc(5 * var(--u)); }
.mur > :nth-child(5) { --r: 3.5deg; --i: 2; --dy: calc(-4.5 * var(--u)); width: calc(13 * var(--u)); margin-bottom: calc(7 * var(--u)); }
.mur-col img + img { --r: 2deg; }

.accroche-image { position: relative; width: calc(22 * var(--u)); margin: 0; }
.accroche-image picture { overflow: clip; border-radius: var(--rayon); background: var(--creme-profond); box-shadow: var(--ombre); }
.accroche-image img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.accroche-etiquette { position: absolute; z-index: 1; top: calc(2.5 * var(--u)); left: calc(-2.4 * var(--u)); margin: 0; padding: 0.5rem 0.95rem 0.55rem 0.85rem; background: var(--blanc); border-left: 0.4rem solid var(--rouge); border-radius: 2px; box-shadow: 0 1px 2px rgba(28, 25, 22, 0.18), 0 8px 16px rgba(28, 25, 22, 0.12); rotate: -4deg; white-space: nowrap; }
.accroche-etiquette-nom { display: block; font-family: var(--main); font-size: clamp(1rem, 0.8rem + 0.6vw, 1.45rem); line-height: 1.1; letter-spacing: 0.02em; text-transform: uppercase; }

@media (min-width: 64rem) and (max-height: 52rem) {
  .accroche { padding-top: 0.75rem; }
  .accroche-signature { margin-bottom: 0.75rem; }
  .accroche h1 { font-size: clamp(3rem, 1rem + 3.4vw, 4.25rem); }
  .accroche-actions { margin-top: 1.5rem; }
  .mur { margin-top: 2rem; }
}

@media (max-width: 63.99rem) { .mur { --u: 1.25vw; } }

/* Téléphone : la signature sous le récit. */
@media (max-width: 39.99rem) {
  .accroche { padding-top: 1.25rem; }
  .accroche-promesse { margin-top: 1rem; }
  .accroche-actions { margin-top: 1.5rem; flex-direction: column; align-items: stretch; width: 100%; max-width: 24rem; gap: 0.625rem; }
  .accroche-signature { grid-row: 8; margin: 1.25rem 0 0; }
  .mur { --u: 2.5vw; gap: calc(1.4 * var(--u)); margin-top: 1.75rem; }
  .mur > :nth-child(1), .mur > :nth-child(5) { display: none; }
  .mur > :nth-child(2), .mur > :nth-child(4) { width: calc(10 * var(--u)); margin: 0; }
  .accroche-image { width: calc(16 * var(--u)); }
  .accroche-image picture { border-radius: 0.875rem; }
  .accroche-etiquette { top: -0.75rem; left: 50%; translate: -50% 0; padding: 0.35rem 0.6rem 0.4rem 0.55rem; border-left-width: 0.3rem; rotate: -3deg; }
  .accroche-etiquette-nom { font-size: 0.875rem; letter-spacing: 0; }
}
/* Téléphone étroit : les trois pastilles sur deux lignes, pas trois. */
@media (max-width: 23.99rem) { .accroche-offres a { padding: 0 0.8rem; font-size: 0.875rem; } }
/* Téléphone court (iPhone dans Safari, iPhone SE) : le plat d'abord, sous la promesse ; les boutons suivent, toujours dans le premier écran. */
@media (max-width: 39.99rem) and (max-height: 47.99rem) {
  .mur { grid-row: 4; margin-top: 1.5rem; }
  .accroche-actions { grid-row: 5; }
  .accroche-offres { grid-row: 6; }
}
@media (max-width: 39.99rem) and (max-height: 35.99rem) {
  .accroche { padding-top: 0.75rem; }
  .accroche-promesse { margin-top: 0.75rem; }
  .mur { --u: 2.1vw; margin-top: 1.25rem; }
  .accroche-actions { margin-top: 1.25rem; }
}

.deroule-grille { display: grid; row-gap: clamp(2.5rem, 5vw, 4rem); }
.deroule-grille .lien-suite { margin-top: 0; }
@media (min-width: 64rem) { .deroule-grille .lien-suite { grid-area: 3 / 1 / 4 / -1; justify-self: center; translate: calc(-50% - 1.25rem); } .deroule-grille .lien-suite + .lien-suite { translate: calc(50% + 1.25rem); } }
.etapes { list-style: none; margin: 0; padding: 0; counter-reset: etape; }
.etape { counter-increment: etape; position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 1.25rem; padding-block: 1.25rem; background: linear-gradient(var(--filet), var(--filet)) calc(1.5rem - 1px) 0 / 2px 100% no-repeat; view-timeline: --etape; }
.etape:first-child { background-position-y: 2.75rem; }
.etape:last-child { background-size: 2px 2.75rem; }
.etape::before { content: counter(etape); grid-row: 1 / span 2; position: relative; z-index: 2; display: grid; place-items: center; width: 3rem; height: 3rem; border: 2px solid var(--mangue); border-radius: 50%; background: var(--mangue); color: var(--encre); font: 400 1.375rem/1 var(--titrage); }
.etape::after { content: ""; position: absolute; z-index: 1; left: calc(1.5rem - 1px); top: 2.75rem; width: 2px; height: 100%; background: var(--vert); transform-origin: 50% 0; }
.etape:last-child::after { display: none; }
.etape h3, .etape p { grid-column: 2; }
.etape h3 { padding-top: 0.55rem; }
.etape p { margin-top: 0.4rem; max-width: 34rem; color: var(--gris); }

.photos-etapes { list-style: none; margin: 0; padding: 0; }
.photos-etapes figure { --r: 0deg; margin: 0; rotate: var(--r); }
.photos-etapes picture { overflow: clip; border-radius: var(--rayon); background: var(--creme-profond); box-shadow: var(--ombre); }
.photos-etapes img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.photos-etapes figcaption { position: relative; width: fit-content; max-width: calc(100% - 1.4rem); margin: -0.4rem 0 0 0.7rem; padding: 0.45rem 0.75rem; border-radius: 0.7rem; background: var(--blanc); box-shadow: 0 1px 2px #1c191624, 0 6px 14px -6px #1c19164d; font-size: 0.875rem; line-height: 1.2; letter-spacing: 0.08em; }

@media (max-width: 63.99rem) {
  .photos-etapes { display: grid; grid-auto-flow: column; grid-auto-columns: min(72%, 20rem); gap: 0.875rem; margin-inline: calc(-1 * var(--gouttiere)); padding: 0.5rem var(--gouttiere) 1rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gouttiere); scrollbar-width: none; }
  .photos-etapes li { scroll-snap-align: start; }
}

/* Photos du service, collantes au bureau. */
@media (min-width: 64rem) {
  .deroule-grille { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(3rem, 5vw, 5rem); align-items: start; }
  .deroule-grille h2 { grid-column: 1 / -1; }
  .deroule-grille .photos-etapes { grid-area: 2 / 2; position: sticky; top: 6.5rem; margin-bottom: calc(2.5rem + clamp(2.5rem, 5vw, 4rem)); }
  .photos-etapes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1.25rem; padding-top: 1rem; }
  .photos-etapes li:nth-child(1) { grid-area: 1 / 2; }
  .photos-etapes li:nth-child(2) { grid-area: 1 / 1 / span 2; align-self: center; }
  .photos-etapes li:nth-child(3) { grid-area: 2 / 2; }
  .photos-etapes li:nth-child(1) figure { --r: 2.5deg; }
  .photos-etapes li:nth-child(2) figure { --r: -2deg; }
  .photos-etapes li:nth-child(3) figure { --r: 1.5deg; }
}

.formules { display: grid; gap: clamp(1rem, 2vw, 1.5rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.formule { position: relative; display: grid; align-content: start; overflow: clip; border-radius: var(--rayon); background: var(--blanc); box-shadow: 0 1px 2px rgba(28, 25, 22, 0.06); }
.formule picture { height: 100%; }
.formule-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--creme-profond); }
.formule-texte { padding: 1.4rem 1.5rem 1.8rem; }
.formule h3 { font-family: var(--titrage); font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem); line-height: 1.1; }
.formule h3 a::after { content: ""; position: absolute; inset: 0; }
/* La carte entière est un lien : la flèche le dit (retour du 21/10/2026). */
.formule h3::after { content: ""; display: inline-block; width: 0.3em; height: 0.3em; margin-left: 0.3em; border: solid var(--rouge); border-width: 2px 2px 0 0; rotate: 45deg; vertical-align: 0.17em; }
.formule h3 a:focus-visible { outline: none; }
.formule:has(a:focus-visible) { outline: 2px solid var(--encre); outline-offset: 3px; }
.formule p { margin-top: 0.55rem; color: var(--gris); }
.note { max-width: 40rem; margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; font-family: var(--serif); font-size: clamp(1.1875rem, 1.05rem + 0.4vw, 1.375rem); line-height: 1.5; text-align: center; text-wrap: balance; }

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

.carte { background: var(--creme-profond); }
.carte-photos { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 1.25rem; max-width: 62rem; margin: clamp(2.75rem, 5.5vw, 4rem) auto 0; padding: 0; }
.carte-photos li:nth-child(1) { --r: -3deg; }
.carte-photos li:nth-child(2) { --r: 2deg; }
.carte-photos li:nth-child(3) { --r: -1.5deg; }
.carte-photos li:nth-child(4) { --r: 3deg; }
.carte-vignette { position: relative; margin: 0; padding: 0.6rem 0.6rem 1.15rem; border-radius: 3px; background: var(--blanc); box-shadow: 0 1px 2px rgba(28, 25, 22, 0.14), 0 14px 28px -10px rgba(28, 25, 22, 0.24); rotate: var(--r); }
.carte-vignette::before { content: ""; position: absolute; z-index: 1; top: -0.7rem; left: 50%; width: 4.5rem; height: 1.35rem; translate: -50% 0; rotate: -4deg; background: rgba(232, 210, 165, 0.9); box-shadow: 0 1px 1px rgba(28, 25, 22, 0.08); }
.carte-vignette img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 2px; background: var(--creme); }
.carte-vignette figcaption { margin-top: 0.65rem; padding-inline: 0.75rem; font-family: var(--main); font-size: 1rem; line-height: 1.15; letter-spacing: 0.02em; text-transform: uppercase; text-align: center; text-wrap: balance; }

@media (min-width: 48rem) {
  .carte-photos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .carte-photos li { margin-inline: -0.4rem; }
  .carte-photos li:nth-child(2) { margin-top: 2.5rem; }
  .carte-photos li:nth-child(3) { margin-top: 0.75rem; }
  .carte-photos li:nth-child(4) { margin-top: 1.75rem; }
  .carte-vignette figcaption { font-size: 1.0625rem; }
}

.carte-menu { margin-top: clamp(3rem, 6vw, 4.5rem); padding: clamp(1.75rem, 5vw, 4rem); border-radius: 1.25rem; background: var(--blanc); }
.carte-groupes { columns: 3 15rem; column-gap: clamp(2rem, 4vw, 4.5rem); }
.carte-groupe { break-inside: avoid; padding-bottom: 2.5rem; }
.carte-groupe h3 { padding-bottom: 0.85rem; border-bottom: 1px solid var(--encre); font-size: 0.9375rem; line-height: 1.4; }
.carte-groupe-precision { margin-top: 0.85rem; font-size: 1rem; color: var(--gris); }
/* Les familles de l'accueil : au téléphone, une ligne repliée chacune, comme les questions ; à partir de 48rem, tout est déplié. */
.carte-groupe summary { list-style: none; }
.carte-groupe summary::-webkit-details-marker { display: none; }
@media (max-width: 47.99rem) {
  .carte-groupes { border-top: 1px solid var(--encre); }
  .carte-groupe { padding-bottom: 0; border-bottom: 1px solid var(--filet); }
  .carte-groupe[open] { padding-bottom: 1.75rem; }
  .carte-groupe summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.5rem; padding-block: 0.625rem; cursor: pointer; }
  .carte-groupe summary h3 { padding: 0; border: 0; }
  .carte-groupe summary::after { content: ""; flex: none; width: 2rem; height: 2rem; border: 1px solid var(--filet-fort); border-radius: 50%; background: linear-gradient(currentColor, currentColor) center / 0.75rem 1px no-repeat, linear-gradient(currentColor, currentColor) center / 1px 0.75rem no-repeat; }
  .carte-groupe[open] summary::after { background-size: 0.75rem 1px, 1px 0; }
  .carte-legende { border-top: 0; }
}
@media (min-width: 48rem) {
  .carte-groupe summary { pointer-events: none; }
  @supports selector(::details-content) { .carte-groupe::details-content { content-visibility: visible; } }
}
.etiquettes { list-style: none; display: grid; gap: 0.8rem; margin: 1.1rem 0 0; padding: 0; }
.etiquette { display: block; }
.etiquette-nom { display: block; font-family: var(--serif); font-size: 1.25rem; line-height: 1.3; }
.etiquette-detail { display: block; margin-top: 0.15rem; font-size: 1rem; line-height: 1.45; color: var(--gris); }
.etiquette-halal { margin-left: 0.25rem; font-family: var(--sans); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.03em; color: var(--rouge); white-space: nowrap; }
.carte-legende { display: grid; gap: 0.6rem; padding-top: 2rem; border-top: 1px solid var(--filet); font-size: 1rem; line-height: 1.6; color: var(--gris); }
.carte-legende p { max-width: 46rem; }
.carte-legende .etiquette-halal { margin: 0 0.2rem 0 0; }
.carte-prix { margin-top: clamp(2.5rem, 5vw, 3.5rem); font: 400 clamp(1.75rem, 1.3rem + 1.3vw, 2.5rem)/1.15 var(--titrage); letter-spacing: -0.01em; text-align: center; }
.carte-action { margin-top: 1.5rem; text-align: center; }

.cuisine .contenu { display: grid; gap: 2.5rem; align-items: center; }
.cuisine h2 { margin-bottom: 1.75rem; }
.cuisine-texte p { max-width: 32rem; color: var(--gris); }
.cuisine-texte p:first-of-type { font-size: 1.1875rem; color: var(--encre); }
.cuisine-texte p + p { margin-top: 1.1rem; }
.photos-plats { list-style: none; margin: 0; padding: 0; }
.photos-plats figure { margin: 0; overflow: clip; border-radius: var(--rayon); background: var(--creme-profond); box-shadow: var(--ombre); }
.photos-plats img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 60rem) {
  .cuisine .contenu { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(3rem, 6vw, 6rem); }
  /* Titres alignés à gauche seulement en deux colonnes : au téléphone, centrés comme les autres (retour du 21/10/2026). */
  .cuisine h2, .devis h2 { margin-inline: 0; text-align: left; }
  .cuisine h2::before, .devis h2::before { margin-left: 0; }
  .devis .chapeau { margin-left: 0; text-align: left; }
}

.zone { padding-block: clamp(1rem, 3vw, 2.5rem); }
.zone .texte-court { display: grid; justify-items: center; row-gap: 1.25rem; padding: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 6vw, 5rem); border-radius: clamp(1.25rem, 2.5vw, 2rem); background: var(--vert); color: var(--vert-doux); text-align: center; }
.zone h2 { color: var(--vert-texte); }
.zone h2::before { background: var(--mangue); }
.zone .chapeau { margin: 0; color: var(--vert-doux); }
/* Les 19 communes remplissent le bloc vert (retour du 21/10/2026 : « un espace inutile à combler »). */
.zone-communes { max-width: 46rem; margin: 0; padding: 0; list-style: none; font: 400 clamp(1.0625rem, 0.9rem + 0.9vw, 1.75rem)/1.38 var(--titrage); letter-spacing: -0.01em; color: var(--vert-texte); text-wrap: balance; }
.zone-communes li { display: inline; white-space: nowrap; }
.zone-communes li:not(:last-child)::after { content: ","; }
.zone :focus-visible { outline-color: var(--vert-texte); }

.questions-section .contenu { max-width: 54rem; }
.questions { margin-top: clamp(2.25rem, 4.5vw, 3rem); border-top: 1px solid var(--encre); }
.question { border-bottom: 1px solid var(--filet); }
.question summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 3rem; padding-block: 1.25rem; cursor: pointer; list-style: none; font-family: var(--serif); font-size: 1.25rem; line-height: 1.35; }
.question summary::-webkit-details-marker { display: none; }
.question summary::after { content: ""; flex: none; width: 2.25rem; height: 2.25rem; border: 1px solid var(--filet-fort); border-radius: 50%; background: linear-gradient(currentColor, currentColor) center / 0.875rem 1px no-repeat, linear-gradient(currentColor, currentColor) center / 1px 0.875rem no-repeat; }
.question[open] summary::after { background-size: 0.875rem 1px, 1px 0; }
.question-reponse { max-width: 42rem; padding: 0 3.5rem 1.75rem 0; color: var(--gris); }
.question-reponse p + p { margin-top: 0.8rem; }

/* Devis : rien n'y bouge. */
.devis { background: var(--creme-profond); }
.devis .contenu { display: grid; gap: 3rem; }
.devis h2 { margin-block: 0; }
@media (min-width: 60rem) {
  .devis .contenu { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(3rem, 6vw, 6rem); align-items: start; }
  .devis .contenu > div { position: sticky; top: 7rem; }
}
/* Téléphone : le formulaire avant la signature. */
@media (max-width: 59.99rem) { .devis .contenu { gap: 0; } .devis .contenu > div { display: contents; } .formulaire { margin-top: 2rem; } .devis-interlocuteur { order: 1; } }
.devis-joindre { display: grid; justify-items: start; margin-top: 2.25rem; }
.devis-joindre a { display: inline-flex; align-items: center; min-height: 2.75rem; font-family: var(--serif); font-size: 1.375rem; text-decoration-color: var(--filet-fort); }
.devis-joindre a[href^="tel:"] { font: 400 clamp(2rem, 1.5rem + 1.6vw, 2.75rem)/1.15 var(--titrage); letter-spacing: -0.01em; font-variant-numeric: lining-nums; text-decoration: none; }
.devis-horaires { max-width: 26rem; margin-top: 0.75rem; color: var(--gris); }
@media (max-width: 59.99rem) { .devis:not(.devis-page) .devis-joindre { justify-items: center; } .devis:not(.devis-page) .devis-horaires { margin-inline: auto; text-align: center; } }
.devis-interlocuteur { display: flex; align-items: center; gap: 1.1rem; max-width: 26rem; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--filet-fort); color: var(--gris); }
.devis-interlocuteur .portrait-rond { width: 4.5rem; height: 4.5rem; }
.devis-interlocuteur strong { display: block; margin-bottom: 0.15rem; font-family: var(--serif); font-weight: 400; font-size: 1.1875rem; color: var(--encre); }
.devis-etat { font-weight: 500; }
/* Vide, lue par les lecteurs d'écran. */
.devis-etat:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.formulaire { display: grid; gap: 1.4rem; padding: clamp(1.5rem, 4vw, 3rem); border-radius: 1.25rem; background: var(--blanc); box-shadow: 0 1px 2px rgba(28, 25, 22, 0.06); }
@media (min-width: 40rem) {
  .formulaire { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
  .champ-large, .formulaire-envoi, .formulaire-secours, .formulaire-mention { grid-column: 1 / -1; }
}
.champ { display: grid; gap: 0.45rem; align-content: start; }
.champ label { font-size: 1rem; font-weight: 500; line-height: 1.4; }
.champ-aide { font-size: 0.875rem; line-height: 1.45; color: var(--gris); }
.champ input, .champ select, .champ textarea { width: 100%; min-height: 3rem; margin: 0; padding: 0.7rem 0.9rem; font: inherit; font-size: 1rem; line-height: 1.4; color: var(--encre); background-color: var(--blanc); border: 1px solid var(--filet-fort); border-radius: 0.625rem; }
.champ select { -webkit-appearance: none; appearance: none; padding-right: 2.5rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231c1b19' stroke-width='1.3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.95rem center; cursor: pointer; }
.champ textarea { min-height: 8rem; resize: vertical; }
.champ :is(input, select, textarea):focus-visible { border-color: var(--encre); outline: 2px solid var(--encre); outline-offset: 1px; }
.obligatoire { color: var(--rouge); }
.formulaire-envoi { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 0.25rem; }
@media (max-width: 39.99rem) { .formulaire-envoi .bouton { width: 100%; } }
.formulaire-mention { font-size: 0.9rem; line-height: 1.55; color: var(--gris); }
.formulaire-secours { display: grid; gap: 0.75rem; padding: 1.25rem; border: 1px solid var(--encre); border-radius: 0.875rem; background: var(--creme); }
.formulaire-secours[hidden] { display: none; }
.formulaire-secours textarea { width: 100%; min-height: 11rem; padding: 0.7rem 0.85rem; font: inherit; font-size: 0.95rem; color: var(--encre); background: var(--blanc); border: 1px solid var(--filet-fort); border-radius: 0.625rem; }

.pied { padding-block: clamp(3.5rem, 7vw, 5.5rem) clamp(2.5rem, 4vw, 3.5rem); background: var(--vert-profond); color: var(--vert-doux); font-size: 1rem; line-height: 1.6; }
.pied .contenu { display: grid; gap: 2.25rem; }
@media (min-width: 48rem) { .pied .contenu { grid-template-columns: minmax(0, 1fr) auto; column-gap: 3rem; } .pied-liens { grid-column: 1 / -1; } }
.pied-identite p + p { margin-top: 0.35rem; }
.pied-identite p:first-child { margin-bottom: 1rem; }
.pied strong { font-family: var(--serif); font-weight: 400; font-size: 1.375rem; letter-spacing: -0.005em; color: var(--vert-texte); }
.pied a { color: var(--vert-texte); text-decoration-color: rgba(247, 244, 238, 0.45); }
.pied :focus-visible { outline-color: var(--vert-texte); }
.pied-pages { margin: 0; padding: 0; list-style: none; font: 400 1.1875rem/1.3 var(--serif); }
.pied-pages a { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; }
.pied-liens { display: flex; flex-wrap: wrap; gap: 0 1.75rem; list-style: none; margin: 0; padding: 1rem 0 0; border-top: 1px solid rgba(247, 244, 238, 0.2); }
.pied-liens a { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: 0.875rem; text-decoration: none; }

/* Visionneuse (visionneuse.js) : un toucher sur une photo l'ouvre en grand (retour du 21/10/2026). */
.agrandissable { cursor: zoom-in; -webkit-tap-highlight-color: transparent; }
.accroche-etiquette { pointer-events: none; }
.visionneuse-ouverte { overflow: hidden; }
.visionneuse { inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: #16130f; color: var(--creme); overscroll-behavior: contain; touch-action: pinch-zoom; }
.visionneuse[open] { display: grid; place-items: center; }
.visionneuse::backdrop { background: rgba(20, 17, 14, 0.6); }
.visionneuse figure { display: grid; justify-items: center; gap: 0.85rem; margin: 0; padding: 4.75rem 1rem 1.5rem; }
.visionneuse img { width: auto; max-width: min(100%, 75rem); max-height: calc(100vh - 9.5rem); max-height: calc(100dvh - 9.5rem); border-radius: 0.75rem; }
.visionneuse figcaption { min-height: 1.3em; font-size: 0.9375rem; font-weight: 500; line-height: 1.3; text-align: center; }
.visionneuse-compte { color: rgba(249, 242, 230, 0.66); font-variant-numeric: tabular-nums; }
.visionneuse button { position: absolute; width: 3rem; height: 3rem; padding: 0; border: 1px solid rgba(249, 242, 230, 0.4); border-radius: 50%; background: rgba(20, 17, 14, 0.55); color: var(--creme); cursor: pointer; }
.visionneuse button::before, .visionneuse-fermer::after { content: ""; position: absolute; inset: 0; margin: auto; }
.visionneuse button:focus-visible { outline-color: var(--creme); }
.visionneuse-fermer { top: 1rem; right: 1rem; }
.visionneuse-fermer::before, .visionneuse-fermer::after { width: 1.125rem; height: 2px; border-radius: 1px; background: currentColor; rotate: 45deg; }
.visionneuse-fermer::after { rotate: -45deg; }
.visionneuse-prec, .visionneuse-suiv { top: calc(50% - 1.5rem); }
.visionneuse-prec { left: 1rem; }
.visionneuse-suiv { right: 1rem; }
.visionneuse-prec::before, .visionneuse-suiv::before { width: 0.625rem; height: 0.625rem; border: solid; border-width: 2px 2px 0 0; rotate: 45deg; translate: -0.15rem 0; }
.visionneuse-prec::before { rotate: -135deg; translate: 0.15rem 0; }
.visionneuse.seule :is(.visionneuse-prec, .visionneuse-suiv) { display: none; }
@media (hover: hover) and (pointer: fine) { .visionneuse button:hover { background: rgba(249, 242, 230, 0.16); } }
/* Téléphone : les flèches sous la photo, sous le pouce. */
@media (max-width: 47.99rem) {
  .visionneuse figure { padding-bottom: 5.25rem; }
  .visionneuse img { max-height: calc(100vh - 12rem); max-height: calc(100dvh - 12rem); }
  .visionneuse-prec, .visionneuse-suiv { top: auto; bottom: 1rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .visionneuse[open] { animation: hlv-fondu 0.18s ease-out; }
  @keyframes hlv-fondu { from { opacity: 0; } }
}

@media print {
  .nav, .menu, .entete .bouton, .accroche-actions, .formulaire, .lien-evitement, .mur-col { display: none; }
  .entete { position: static; margin: 0; background: none; }
  .entete .contenu { box-shadow: none; }
  .photos-etapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; overflow: visible; }
  .deroule-grille .photos-etapes, .devis .contenu > div { position: static; }
  .zone .texte-court, .pied { background: none; color: var(--gris); }
  .zone h2, .zone-communes, .pied strong, .pied a { color: var(--encre); }
  .zone .chapeau { color: var(--gris); }
  *, *::before, *::after { box-shadow: none !important; }
  .question summary::after, .carte-groupe summary::after { display: none; }
  .question::details-content, .carte-groupe::details-content { content-visibility: visible !important; }
  figure, .formule, .etape, .question, .carte-legende, .zone .texte-court, .pied .contenu, h1, h2 { break-inside: avoid; }
  h1, h2 { break-after: avoid; }
}

/* Mouvement : écran, sans mouvement réduit ; ni titre, ni plat, ni devis. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media screen and (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  @media (hover: hover) and (pointer: fine) {
    a, .question summary { transition: color 0.2s ease, text-decoration-color 0.2s ease; }
    .bouton { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, translate 0.2s var(--ressort); }
    .bouton:not(.devis *):is(:hover, :focus-visible) { translate: 0 -2px; }
    .mur-col img, .carte-vignette { transition: rotate 0.25s var(--ressort), scale 0.25s var(--ressort), translate 0.25s var(--ressort); }
    .formule-photo, .photos-etapes img, .photos-plats img { transition: scale 0.25s var(--ressort), filter 0.25s ease; }
    .mur-col img:hover { rotate: 0deg; scale: 1.045; }
    .formule:is(:hover, :focus-within) .formule-photo, .photos-etapes li:hover img, .photos-plats li:hover img { scale: 1.04; filter: saturate(1.1); }
    .carte-vignette:hover { z-index: 2; rotate: 0deg; translate: 0 -0.4rem; }
    .devis * { transition: none; }
  }

  /* Au chargement, une fois, sans fondu. */
  .mur-col img { animation: hlv-pose-mur 0.6s var(--ressort) backwards; animation-delay: calc(0.05s + var(--i, 0) * 0.08s); }
  .mur-col img + img { animation-delay: calc(0.12s + var(--i, 0) * 0.08s); }
  .accroche-etiquette { animation: hlv-etiquette 0.45s var(--ressort) 0.2s backwards; }
  .menu[open] + .nav { animation: hlv-panneau 0.25s var(--ressort); }
  .question[open] .question-reponse { animation: hlv-ouvre 0.3s var(--ressort); }
  @media (max-width: 47.99rem) { .carte-groupe[open] summary ~ * { animation: hlv-ouvre 0.3s var(--ressort); } }

  /* Au défilement : le mur dérive, le plat recule. */
  @supports (animation-timeline: scroll()) {
    .mur-col { animation: hlv-derive linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    .accroche-image img { animation: hlv-recul linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    .entete .contenu::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 16px 32px -14px rgba(28, 25, 22, 0.32); opacity: 0; pointer-events: none; animation: hlv-apparait linear both; animation-timeline: scroll(root); animation-range: 0 8rem; }
  }

  /* La bande suit les sections profondes. */
  @supports (animation-timeline: view()) {
    body { timeline-scope: --t-carte, --t-devis, --t-appel, --t-zone, --t-pied; }
    .carte { view-timeline: --t-carte; }
    .devis { view-timeline: --t-devis; }
    .appel { view-timeline: --t-appel; }
    .carte, .devis, .appel { view-timeline-inset: 5.25rem 0; }
    .entete { animation: hlv-profond linear, hlv-profond linear, hlv-profond linear; animation-timeline: --t-carte, --t-devis, --t-appel; animation-range: exit-crossing; }
    /* Silhouette du panneau vert et du pied. */
    .zone .texte-court { view-timeline: --t-zone; }
    .pied { view-timeline: --t-pied; }
    .zone .texte-court, .pied { view-timeline-inset: 0 calc(100% - 5.5rem); }
    .entete::before, .entete::after { content: ""; position: absolute; z-index: -1; inset: 0; clip-path: inset(100% 0 0); animation: hlv-silhouette linear both; }
    .entete::before { --rz: clamp(1.25rem, 2.5vw, 2rem); inset: 0 max(var(--gouttiere), 50% - 38rem + var(--gouttiere)); background: var(--vert); animation-timeline: --t-zone; }
    .entete::after { --rz: 0px; background: var(--vert-profond); animation-timeline: --t-pied; }
    @media (max-width: 47.99rem) { .zone .texte-court, .pied { view-timeline-inset: 0 calc(100% - 5.125rem); } }
    .formule, .carte-groupe { animation: hlv-entree linear both; }
    .formule:focus-within, .photos-etapes:focus { animation: none; }
    .etape::after { animation: hlv-remplit linear both; animation-timeline: --etape; animation-range: cover calc(45vh + 2.75rem) cover calc(100% - 55vh + 2.75rem); }
    .etape::before { animation: hlv-allume linear both; animation-timeline: --etape; animation-range: cover calc(45vh + 1.75rem) cover calc(45vh + 3.25rem); }
    .formule-photo, .photos-plats img { animation: hlv-cadre linear both; }
    .carte-vignette { animation: hlv-pose linear both; }
    @media (min-width: 64rem) { .photos-etapes figure { animation: hlv-glisse linear both; } }
    @media (max-width: 63.99rem) { .photos-etapes { animation: hlv-bande linear both; } }
    /* Fini dès que le bloc est entier, ou après 10 rem. */
    .formule, .carte-groupe, .formule-photo, .photos-plats img, .carte-vignette, .photos-etapes, .photos-etapes figure { animation-timeline: view(); animation-range: entry 0% entry 100%; animation-range-end: entry min(100%, 10rem); }
  }

  @keyframes hlv-pose-mur { from { translate: 0 1.25rem; rotate: calc(2 * var(--r)); } }
  @keyframes hlv-etiquette { from { scale: 1.12; rotate: -8deg; } }
  @keyframes hlv-panneau { from { opacity: 0; translate: 0 -0.5rem; } }
  @keyframes hlv-ouvre { from { opacity: 0; translate: 0 -0.5rem; } }
  @keyframes hlv-glisse { from { opacity: 0; translate: 3rem 0; rotate: calc(var(--r) + 7deg); } }
  @keyframes hlv-derive { to { translate: 0 var(--dy, 0); } }
  @keyframes hlv-recul { to { scale: 1.08; } }
  @keyframes hlv-apparait { to { opacity: 1; } }
  @keyframes hlv-profond { from, to { --bande: var(--creme-profond); } }
  @keyframes hlv-silhouette { entry 0% { clip-path: inset(100% 0 0 round var(--rz) var(--rz) 0 0); } entry 100% { clip-path: inset(0 round var(--rz) var(--rz) 0 0); } contain 0%, contain 100% { clip-path: inset(0); } exit 0% { clip-path: inset(0 round 0 0 var(--rz) var(--rz)); } exit 100% { clip-path: inset(0 0 100% round 0 0 var(--rz) var(--rz)); } }
  @keyframes hlv-entree { from { opacity: 0; translate: 0 1.5rem; } }
  @keyframes hlv-remplit { from { scale: 1 0; } }
  @keyframes hlv-allume { from { background-color: var(--creme); } }
  @keyframes hlv-cadre { from { clip-path: inset(7% round 1rem); } to { clip-path: inset(0 round 0); } }
  @keyframes hlv-pose { from { opacity: 0; translate: 0 -1.25rem; rotate: calc(var(--r) + 6deg); } }
  @keyframes hlv-bande { from { opacity: 0; translate: 4rem 0; } }
}