/* NJANSANG — styles propres à la page La Maison. Chargé après styles.css (même ordre de couches). */
@layer pages {
  .editorial { display: grid; gap: var(--space-5); }
  .editorial__aside { display: grid; gap: var(--space-3); align-content: start; }
  .dropcap::first-letter { font-family: var(--font-display); float: left; font-size: 4.6em; line-height: .8; padding: .08em .1em 0 0; color: var(--color-terracotta); font-weight: 400; }
  .pullquote { margin-block: 1.75em; padding-inline-start: 1.25rem; border-inline-start: 3px solid var(--color-ocre); }
  .pullquote p { font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem); line-height: 1.15; font-weight: 400; color: var(--color-terracotta-texte); }
  @media (min-width: 64em) {
    .editorial { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .editorial__aside { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; }
    .editorial__body { grid-column: 6 / span 7; }
    .pullquote { margin-inline-start: -6rem; }
  }
  .cheffe__grid { display: grid; gap: var(--space-7); }
  .cheffe__portrait { display: grid; gap: 1.25rem; justify-items: center; text-align: center; align-content: start; }
  .seed-portrait { position: relative; inline-size: min(100%, 17rem); aspect-ratio: 3 / 4; clip-path: ellipse(48% 50%); background: radial-gradient(70% 60% at 40% 30%, #C9643A, var(--color-terracotta) 45%, #6E2B12 100%); display: grid; place-items: center; }
  .seed-portrait::before { content: ""; position: absolute; inset-block: 6%; inset-inline-start: 50%; width: 3px; transform: translateX(-50%); background: linear-gradient(var(--color-ocre), rgb(225 160 53 / .3)); border-radius: 2px; }
  .seed-portrait span { position: relative; font-family: var(--font-display); font-style: italic; font-size: 8rem; line-height: 1; color: var(--color-ivoire); text-shadow: 0 6px 24px rgb(28 17 12 / .35); }
  .cheffe__name { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; display: grid; gap: .2rem; }
  .cheffe__name span { font-family: var(--font-body); font-size: .9rem; color: var(--color-encre-2); font-weight: 500; }
  .cheffe__text { display: grid; gap: var(--space-4); align-content: start; }
  .cheffe__quote p { font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-size: clamp(1.25rem, 1.05rem + .9vw, 1.65rem); line-height: 1.35; }
  .timeline { list-style: none; padding: 0; display: grid; gap: 0; border-inline-start: 1px solid var(--color-ligne); margin-block-start: var(--space-3); }
  .timeline li { position: relative; display: grid; grid-template-columns: 3.5rem 1fr; gap: .75rem; padding: .6rem 0 .6rem 1.25rem; }
  .timeline li::before { content: ""; position: absolute; inset-inline-start: -5px; inset-block-start: 1.05rem; inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--color-terracotta); box-shadow: 0 0 0 3px var(--color-lin); }
  .timeline__year { font-weight: 700; color: var(--color-ocre-texte); font-variant-numeric: tabular-nums; }
  .cheffe__principes { display: grid; gap: var(--space-5); }
  .cheffe__principes-title { font-size: 1.35rem; }
  .principes { list-style: none; padding: 0; display: grid; gap: var(--space-4); counter-reset: p; }
  .principes li { counter-increment: p; padding: 1.25rem 1.25rem 1.25rem 3.75rem; position: relative; background: var(--color-ivoire); border-radius: var(--radius-m); border: 1px solid var(--color-sable); }
  .principes li::before { content: counter(p); position: absolute; inset-inline-start: 1.1rem; inset-block-start: 1rem; font-family: var(--font-display); font-style: italic; font-size: 2rem; line-height: 1; color: var(--color-terracotta); }
  .principes h4 { font-size: 1.2rem; margin-block-end: .3rem; }
  .principes p { color: var(--color-encre-2); font-size: .97rem; }
  .cheffe__gestes { display: grid; gap: .6rem; }
  .cheffe__gestes img { border-radius: var(--radius-m); width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
  .cheffe__gestes figcaption { font-size: var(--fs-small); color: var(--color-encre-2); }
  @media (min-width: 64em) {
    .cheffe__grid { grid-template-columns: .75fr 1.25fr; column-gap: clamp(3rem, 6vw, 6rem); }
    .cheffe__principes { grid-column: 1 / -1; grid-template-columns: 1.3fr 1fr; align-items: start; column-gap: 3rem; }
    .cheffe__principes-title { grid-column: 1 / -1; }
  }
  .team { display: grid; gap: var(--space-4); }
  .team-card { display: grid; gap: .45rem; align-content: start; padding: 1.5rem; border-radius: var(--radius-m); background: var(--color-ivoire); border: 1px solid var(--color-sable); }
  .team-card__init { inline-size: 3.75rem; block-size: 3.75rem; border-radius: 50%; display: grid; place-items: center; background: var(--color-nuit); color: var(--color-ocre); font-family: var(--font-display); font-style: italic; font-size: 1.5rem; margin-block-end: .5rem; box-shadow: 0 0 0 4px var(--color-ivoire), 0 0 0 5px var(--color-ocre); }
  .team-card__name { font-size: 1.3rem; }
  .team-card__role { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .1em; color: var(--color-ocre-texte); font-weight: 650; }
  .team-card p:last-child { color: var(--color-encre-2); font-size: .95rem; }
  @media (min-width: 40em) { .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 64em) { .team { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .terrain-wrap { overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: thin; }
  .terrain { min-width: 46rem; width: 100%; height: auto; font-family: var(--font-body); }
  .terrain__fill { fill: var(--color-lin); }
  .terrain__line { fill: none; stroke: var(--color-encre); stroke-width: 1.5; }
  .terrain__sea { stroke: #6F9AA6; stroke-width: 3; stroke-linecap: round; }
  .terrain__pt circle:first-of-type { fill: var(--color-terracotta); stroke: var(--color-creme); stroke-width: 2.5; }
  .terrain__halo { fill: none; stroke: var(--color-terracotta); stroke-opacity: .35; transition: stroke-opacity var(--dur-2); }
  .terrain__pt text { font-size: 15px; font-weight: 650; fill: var(--color-encre); }
  .terrain__pt .terrain__alt { font-size: 12.5px; font-weight: 500; fill: var(--color-encre-2); }
  .terrain__pt:hover .terrain__halo, .terrain__pt:focus-visible .terrain__halo { stroke-opacity: 1; }
  .terrain__pt:focus-visible { outline: none; }
  .prod-list { display: grid; gap: .75rem; margin-block-start: var(--space-5); }
  .prod-card { padding: 1.1rem 1.25rem; border-radius: var(--radius-m); border: 1px solid var(--color-sable); background: var(--color-ivoire); display: grid; gap: .25rem; scroll-margin-top: calc(var(--header-h) + 1.5rem); transition: box-shadow var(--dur-3), border-color var(--dur-3); }
  .prod-card:target { border-color: var(--color-terracotta); box-shadow: 0 0 0 2px var(--color-terracotta); }
  .prod-card__alt { font-size: .8125rem; font-weight: 650; color: var(--color-ocre-texte); }
  .prod-card__title { font-size: 1.2rem; }
  .prod-card__place { display: flex; gap: .35rem; align-items: center; font-size: .9375rem; }
  .prod-card__who { font-size: .9rem; color: var(--color-encre-2); }
  @media (min-width: 40em) { .prod-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 64em) { .prod-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .kpis { display: grid; gap: var(--space-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis li { border-block-start: 1px solid var(--color-ligne-nuit); padding-block-start: 1rem; color: var(--color-creme-attenue); }
  .kpis__num { font-family: var(--font-display); font-size: clamp(2.75rem, 2rem + 3vw, 4.5rem); line-height: 1; color: var(--color-ocre); font-weight: 350; margin-block-end: .5rem; }
  @media (min-width: 64em) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .rooms { display: grid; gap: var(--space-6); }
  .room { display: grid; gap: .5rem; align-content: start; }
  .room__media { aspect-ratio: 3 / 2; border-radius: var(--radius-m); overflow: hidden; margin-block-end: .5rem; }
  .room__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-4) var(--ease-out); }
  .room:hover .room__media img { transform: scale(1.03); }
  .room__name { font-size: 1.4rem; }
  .room__cap { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .1em; color: var(--color-ocre-texte); font-weight: 650; }
  .room p:last-child { color: var(--color-encre-2); font-size: .97rem; }
  @media (min-width: 48em) { .rooms { grid-template-columns: repeat(3, minmax(0, 1fr)); } .room:nth-child(2) { margin-block-start: 3rem; } }
}