/* Aurélie Ndjock-Lambert (démo) — styles propres à la page Accompagnements.
   Chargée après styles.css, uniquement sur accompagnements.html. Même couche « pages ». */
@layer pages {
/* ===== Accompagnements ===== */
.offer-detail { display: grid; gap: var(--space-6) var(--gutter); padding: 0; overflow: clip; }
.offer-detail__media { aspect-ratio: 3 / 2; }
.offer-detail__body { padding: clamp(1.4rem, 3.5vw, 2.5rem); display: grid; gap: var(--space-5); align-content: start; }
.offer-detail__head { display: grid; gap: .5rem; justify-items: start; }
.offer-detail__head h3 { font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.6rem); font-weight: 400; }
.offer-detail__head p { color: var(--color-attenue); }
.facts { display: grid; gap: 0; margin: 0; border-block-start: 1px solid var(--color-filet); }
.facts > div { display: grid; gap: .2rem var(--space-4); padding-block: .8rem; border-block-end: 1px solid var(--color-filet); }
@media (min-width: 40em) { .facts > div { grid-template-columns: 9.5rem minmax(0, 1fr); } }
.facts dt { font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--color-attenue); font-weight: 500; padding-block-start: .2rem; }
.facts dd { margin: 0; }
.facts dd ul { padding-inline-start: 1.1em; margin: 0; }
.facts dd li { margin-block-start: .15rem; }
.offer-detail__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); padding-block-start: var(--space-2); }
@media (min-width: 64em) {
.offer-detail { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0; align-items: start; }
.offer-detail__media { position: sticky; top: calc(var(--header-h) + 1rem); aspect-ratio: 4 / 5; margin: clamp(1.4rem, 3.5vw, 2.5rem) 0 clamp(1.4rem, 3.5vw, 2.5rem) clamp(1.4rem, 3.5vw, 2.5rem); border-radius: var(--radius-arch); }
.offer-detail--reverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.offer-detail--reverse .offer-detail__media { order: 2; margin-inline: 0 clamp(1.4rem, 3.5vw, 2.5rem); }
}

.offer-stack { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); }
.flow-svg { inline-size: 100%; block-size: auto; }
.flow-svg .f-line { fill: none; stroke: var(--color-terracotta); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.flow-svg .f-dot { fill: var(--color-creme); stroke: var(--color-prune); stroke-width: 1.25; }
.flow-svg .f-num { font: italic 500 22px var(--font-display); fill: var(--color-prune); text-anchor: middle; }
.flow-steps { display: grid; gap: var(--space-4); list-style: none; padding: 0; margin: 0; counter-reset: f; }
.flow-steps li { margin: 0; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: .75rem; align-items: baseline; }
.flow-steps .roman { font-size: 1.4rem; }
.flow-steps strong { display: block; color: var(--color-prune); }
@media (min-width: 64em) { .flow-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); } .flow-steps li { grid-template-columns: minmax(0, 1fr); } }
.flow-box { margin-block-start: var(--space-6); padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--color-filet); border-radius: var(--radius-1); background: var(--color-lin); }
.flow-box h3 { font-size: 1.45rem; margin-block-end: var(--space-5); }
.flow-svg-wrap { display: none; }
@media (min-width: 64em) { .flow-svg-wrap { display: block; margin-block-end: var(--space-3); } }
.talks { display: grid; gap: var(--gutter); counter-reset: t; }
@media (min-width: 48em) { .talks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.talk { display: grid; gap: .6rem; padding: clamp(1.25rem, 3vw, 1.75rem); border-block-start: 1px solid var(--color-prune); background: var(--color-creme); }
.talk h3 { font-style: italic; font-weight: 500; font-size: 1.55rem; }
.talk .roman { font-size: 1.1rem; }
.formats { display: grid; gap: var(--space-4); margin-block-start: var(--space-6); }
@media (min-width: 48em) { .formats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.format { display: grid; gap: .3rem; padding: 1.1rem 1.25rem; border: 1px solid var(--color-filet); border-radius: var(--radius-1); }
.format strong { font: 500 1.35rem/1.2 var(--font-display); color: var(--color-prune); }
.format span { font-size: var(--fs-small); color: var(--color-attenue); }
.conf-intro { display: grid; gap: var(--space-6) var(--gutter); align-items: center; margin-block-end: var(--space-7); }
.conf-intro .media { aspect-ratio: 3 / 2; border-radius: var(--radius-1); }
@media (min-width: 64em) { .conf-intro { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); } }
.factors { display: grid; gap: var(--space-3) var(--gutter); list-style: none; padding: 0; margin: 0; counter-reset: fa; }
@media (min-width: 40em) { .factors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.factors li { margin: 0; display: flex; gap: .75rem; align-items: baseline; padding-block: .75rem; border-block-end: 1px solid var(--color-filet); }
.factors .roman { font-size: 1.2rem; min-inline-size: 2rem; }
.quote-box { background: var(--color-creme); border: 1px solid var(--color-filet); border-radius: var(--radius-1); padding: clamp(1.25rem, 3vw, 2rem); display: grid; gap: var(--space-4); }

}

/* Repères de budget (transparence) */
.budget { background: var(--color-creme); border: 1px solid var(--color-filet); border-radius: var(--radius-1); padding: clamp(1.25rem, 3vw, 2rem); display: grid; gap: var(--space-3); }
.budget h3 { font-size: var(--fs-h3); }
.budget__table { inline-size: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.budget__table th, .budget__table td { padding: .75rem 0; border-block-end: 1px solid var(--color-filet); text-align: start; vertical-align: baseline; }
.budget__table thead th { padding-block-start: 0; font-size: var(--fs-xs); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--color-attenue); }
.budget__table thead th:last-child, .budget__table td { text-align: end; }
.budget__table tbody th { font-weight: 500; color: var(--color-encre); padding-inline-end: 1rem; }
.budget__table tbody th span { display: block; margin-block-start: .1rem; font-weight: 400; font-size: var(--fs-xs); color: var(--color-attenue); }
.budget__table td { white-space: nowrap; font-weight: 500; color: var(--color-prune); font-variant-numeric: lining-nums tabular-nums; }
.budget__note { font-size: var(--fs-small); color: var(--color-attenue); }
.format .format__price { display: block; margin-block-start: .35rem; font-weight: 500; color: var(--color-prune); font-variant-numeric: lining-nums; }