/* Maison Kôssi (marque fictive) — styles propres à : lookbook. Chargée après styles.css, qui déclare l’ordre des couches. */
@layer pages {
  /* ---------- Lookbook ---------- */
  .look { display: grid; gap: var(--s-5); padding-block: var(--s-7); position: relative; } @media (min-width: 64em) { .look { grid-template-columns: 7fr 5fr; gap: var(--s-8); align-items: center; } .look:nth-of-type(even) { direction: rtl; } .look:nth-of-type(even) > * { direction: ltr; } }
  .look__fig { position: relative; margin: 0; border-radius: var(--arch); background: var(--color-sable); }
  .look__img { border-radius: var(--arch); overflow: hidden; aspect-ratio: 4 / 5; max-inline-size: 34rem; margin-inline: auto; } .look__img svg, .look__img img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .look__fig { max-inline-size: 34rem; margin-inline: auto; inline-size: 100%; }
  .repere { position: absolute; inset-inline-start: var(--x); inset-block-start: var(--y); translate: -50% -50%; inline-size: 2.75rem; block-size: 2.75rem; border-radius: 50%; background: color-mix(in srgb, var(--color-indigo) 82%, transparent); color: var(--color-creme); border: 2px solid var(--color-or); font-weight: 800; font-size: 0.9375rem; display: grid; place-items: center; z-index: 3; animation: repere 1.6s var(--ease-out) 1; transition: scale var(--dur-2), background var(--dur-2); } .repere:hover, .repere[aria-expanded="true"] { scale: 1.12; background: var(--color-indigo); }
  @keyframes repere { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-or) 70%, transparent); } 100% { box-shadow: 0 0 0 16px transparent; } }
  .repere-card { position: absolute; z-index: 5; inset-inline: 1rem; inset-block-end: 1rem; padding: var(--s-4); border-radius: var(--radius); background: var(--color-papier); box-shadow: var(--shadow-pop); display: grid; gap: var(--s-2); }
  .repere-card h3 { font-size: 1rem; } .repere-card .btns { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .look__list { list-style: none; padding: 0; display: grid; gap: var(--s-2); margin-block: var(--s-4); } .look__list li { display: flex; justify-content: space-between; gap: var(--s-4); padding-block: var(--s-2); border-block-end: 1px solid var(--color-ligne-deco); } .look__list a { font-weight: 600; }
  .big-quote { font-family: var(--font-body); font-style: italic; font-weight: 500; font-size: clamp(1.375rem, 1.1rem + 1.4vw, 2.25rem); line-height: 1.3; max-inline-size: 30ch; text-wrap: balance; }
  .quote-band { padding-block: var(--s-8); text-align: center; display: grid; justify-items: center; gap: var(--s-4); }
  @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .selvedge-lg--thin { animation: lbslide linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; } @keyframes lbslide { from { clip-path: inset(0 65% 0 0); } to { clip-path: inset(0 0 0 0); } } } }
}