/* =====================================================================
   PAGES INTÉRIEURES — même langage que la maquette :
   titres serif Crimson Pro, capitales Inter espacées, panneaux noir / rose,
   filets jaunes, pastilles d'onglets, liens « Learn more → ».
   ===================================================================== */
body.inner { --accent: var(--ink); --on-accent: var(--white); }
body.accent-pink   { --accent: var(--pink);   --on-accent: var(--white); }
body.accent-teal   { --accent: var(--teal);   --on-accent: var(--white); }
body.accent-yellow { --accent: var(--yellow); --on-accent: var(--ink); }
body.accent-orange { --accent: var(--orange); --on-accent: var(--white); }

/* ---------- En-tête de page ---------- */
.ihero { position: relative; min-height: 34rem; display: flex; flex-direction: column; color: var(--white); background: var(--dark); overflow: hidden; }
.ihero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: iheroZoom 1.6s cubic-bezier(.2,.7,.2,1) both; }
@keyframes iheroZoom { from { transform: scale(1.08); } to { transform: none; } }
.ihero-shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.15) 45%, rgba(0,0,0,.6)); }
.ihero-plain .ihero-shade { display: none; }
.ihero .topbar { position: relative; z-index: 3; }
.ihero-content { position: relative; z-index: 2; margin-top: auto; padding: 0 0 4rem; width: min(var(--wrap), 92vw); margin-left: auto; margin-right: auto; text-align: center; }
.crumbs { display: flex; justify-content: center; gap: .9rem; margin-bottom: 1.4rem; font-size: 1rem; letter-spacing: .16em; text-transform: uppercase; }
.crumbs a { border-bottom: 1px solid currentColor; }
.ihero h1 { font-family: var(--serif); font-weight: 700; font-size: 6.2rem; line-height: 1; animation: upIn .9s ease .2s both; }
.ihero-kicker { margin-top: 1.4rem; font-size: 1.15rem; letter-spacing: .18em; text-transform: uppercase; animation: upIn .9s ease .35s both; }
.ihero-mini { min-height: 0; padding-bottom: 2.2rem; }
.menu a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }

/* ---------- Onglets ---------- */
.itabs { position: sticky; top: 0; z-index: 20; background: var(--white); border-bottom: 1px solid #e5e5e5; }
.itabs .pills { margin: 0 auto; padding: 1.4rem 4vw; width: min(var(--wrap), 100%); flex-wrap: nowrap; justify-content: center; overflow-x: auto; scrollbar-width: none; }
.itabs .pills::-webkit-scrollbar { display: none; }
.itabs .pill { flex-shrink: 0; min-width: 0; font-size: 1.05rem; padding: .75rem 1.5rem; }
.itabs .pill[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* ---------- Panneaux ---------- */
.ipanels { padding-bottom: 2rem; }
.ipanels.is-tabbed .ipanel { display: none; }
.ipanels.is-tabbed .ipanel.is-active { display: block; animation: upIn .5s ease both; }
.ipanel { padding-top: 6rem; }
.ipanel > .osolo + .osolo, .ipanel > .osplit + .osplit, .ipanel > .osolo + .osplit, .ipanel > .osplit + .osolo { margin-top: 6rem; }
.opanel-head { margin-bottom: 3rem; text-align: center; }
.opanel-head .kicker { font-size: 1.05rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; }
.opanel-head h2, .opanel-head h3 { font-family: var(--serif); font-weight: 700; font-size: 4.4rem; line-height: 1.02; }

/* image + panneau (comme « The Museum » de la maquette) */
.osplit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.osplit .opanel-head { text-align: left; margin-bottom: 2.4rem; }
.osplit .opanel-head h2 { font-size: 3.4rem; color: inherit; }
.osplit .opanel-head .kicker { color: var(--yellow-2); }
.osplit-media { position: relative; border-right: .45rem solid var(--yellow-2); background: #111; }
.osplit-media .oslides { position: sticky; top: 6rem; }
.osplit-text { padding: 4rem 3.8rem; background: var(--ink); color: var(--white); }
.ipanel > .osplit:nth-of-type(even) { direction: rtl; }
.ipanel > .osplit:nth-of-type(even) > * { direction: ltr; }
.ipanel > .osplit:nth-of-type(even) .osplit-media { border-right: 0; border-left: .45rem solid var(--yellow); }
.ipanel > .osplit:nth-of-type(even) .osplit-text { background: var(--pink); }
.ipanel > .osplit:nth-of-type(even) .opanel-head .kicker { color: var(--white); }
.osolo .official { max-width: 58rem; margin: 0 auto; }
.osolo > .oslides { max-width: 70rem; margin: 0 auto 3.4rem; }

/* texte officiel */
.official { font-size: 1.2rem; line-height: 1.85; }
.official p { margin: 0 0 1.2rem; }
.official h3, .official h4 { font-family: var(--serif); font-weight: 600; font-size: 2rem; line-height: 1.2; margin: 2.4rem 0 1rem; }
.official .off-lead { margin: 0 0 1.8rem; font-family: var(--serif); font-weight: 400; font-size: 2.3rem; line-height: 1.2; text-transform: uppercase; text-align: left !important; }
.osolo .official .off-lead { text-align: center !important; }
.official a { text-decoration: underline; text-underline-offset: 3px; }
.official img { max-width: 100%; height: auto; }
.official iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; margin: 1rem 0 2rem; }
.official ul, .official ol { padding-left: 1.4rem; }

/* diaporama */
.oslides { position: relative; margin: 0; background: #111; }
.oslides-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.oslides-track::-webkit-scrollbar { display: none; }
.oslides-track img, .oslides-single img { flex: 0 0 100%; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; scroll-snap-align: start; display: block; }
.osolo .oslides-track img, .osolo .oslides-single img { aspect-ratio: 16 / 9; }
.oslides-ui { position: absolute; right: 0; bottom: 0; display: flex; align-items: center; background: var(--white); color: var(--ink); }
.oslides-ui button { width: 3.4rem; height: 3.4rem; border: 0; background: var(--white); font-size: 1.3rem; cursor: pointer; }
.oslides-ui button:hover { background: var(--ink); color: var(--white); }
.oslides-count { min-width: 4rem; text-align: center; font-size: 1rem; font-weight: 600; }

/* lire la suite */
.oreadmore { display: flex; flex-direction: column; align-items: flex-start; }
.oreadmore > summary { list-style: none; order: 2; display: inline-flex; align-items: center; gap: 1rem; margin-top: .6rem; font-size: 1.15rem; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.osplit-text .oreadmore > summary { color: var(--yellow-2); }
.ipanel > .osplit:nth-of-type(even) .oreadmore > summary { color: var(--white); }
.oreadmore > summary::-webkit-details-marker { display: none; }
.oreadmore > summary::after { content: "→"; transition: transform .25s; }
.oreadmore[open] > summary::after { transform: rotate(-90deg); }
.oreadmore .less, .oreadmore[open] .more { display: none; }
.oreadmore[open] .less { display: inline; }
.oreadmore-body { animation: upIn .4s ease both; }

/* chapitres */
.ochap { border-top: 1px solid currentColor; }
.ochap:last-of-type { border-bottom: 1px solid currentColor; }
.ochap > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.3rem 0; font-size: 1.15rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.ochap > summary::-webkit-details-marker { display: none; }
.ochap > summary::after { content: "+"; font-size: 1.6rem; font-weight: 300; }
.ochap[open] > summary::after { content: "–"; }
.ochap-body { padding-bottom: 1.4rem; }

/* cartes en carrousel (style « Past Exhibition ») */
.osolo:has(.ocards) .official { max-width: none; }
.ocards-nav { display: flex; align-items: center; gap: .8rem; margin-bottom: 2rem; }
.ocards-total { margin-right: auto; font-size: 1.05rem; letter-spacing: .14em; text-transform: uppercase; }
.ocards-nav button { width: 3.6rem; height: 3.6rem; border: 1px solid #333; border-radius: 3px; background: var(--white); font-size: 1.3rem; cursor: pointer; }
.ocards-nav button:hover { background: var(--ink); color: var(--white); }
.ocards-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 2.4rem) / 4); gap: 2.4rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1.4rem; scrollbar-width: thin; }
.ocard { scroll-snap-align: start; display: flex; flex-direction: column; text-decoration: none !important; color: inherit; }
.ocard-img { aspect-ratio: 1; overflow: hidden; background: var(--accent); }
.ocard-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transition: transform .5s; }
.ocard:hover .ocard-img img { transform: scale(1.04); }
.ocard-noimg { display: flex; align-items: flex-end; padding: 1.6rem; color: var(--on-accent); font-family: var(--serif); font-size: 1.8rem; line-height: 1.1; }
.ocard-body { display: flex; flex-direction: column; gap: .5rem; padding-top: 1.6rem; flex: 1; }
.ocard-season { font-size: .95rem; letter-spacing: .14em; color: var(--muted); }
.official .ocard-title, .ocard-title { margin: 0; font-family: var(--sans); font-weight: 500; font-size: 1.65rem; line-height: 1.1; text-transform: uppercase; }
.ocard-date { font-size: 1.05rem; line-height: 1.2; color: #555; text-transform: uppercase; letter-spacing: .03em; }
.ocard-open, .ocard-link { align-self: flex-start; margin-top: auto; padding: 1rem 0 0; border: 0; background: none; font: inherit; font-size: 1.05rem; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; color: inherit; }
.ocard.is-open .ocard-img { outline: .35rem solid var(--yellow); outline-offset: -.35rem; }
.ocards-detail { margin-top: 3rem; border-top: .35rem solid var(--yellow); animation: upIn .45s ease both; }
.ocards-detail-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 4rem; padding-top: 3rem; }
.ocards-detail .oslides img { aspect-ratio: auto; height: auto; max-height: 46rem; object-fit: contain; background: #fff; }
.ocards-detail-in.no-media { grid-template-columns: minmax(0, 1fr); max-width: 58rem; margin: 0 auto; }
.ocard-full-text .ocard-title { font-family: var(--serif) !important; font-weight: 700 !important; font-size: 3rem !important; text-transform: none !important; margin-bottom: 1rem; }
.ocard-full-text .ocard-date { display: inline-block; margin-bottom: 2rem; padding: .5rem .9rem; background: var(--pink); color: var(--white); }
.ocards-detail-close { margin-top: 2rem; padding: .8rem 1.6rem; border: 1px solid #333; border-radius: 3px; background: var(--white); font: inherit; font-size: 1rem; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.ocards-detail-close:hover { background: var(--ink); color: var(--white); }

/* infos pratiques */
.oinfo { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #ddd; }
.oinfo-card { padding: 2.6rem; font-size: 1.25rem; line-height: 1.7; }
.oinfo-card + .oinfo-card { border-left: 1px solid #ddd; }
.oinfo-hours { background: var(--yellow); color: var(--ink); }
.oinfo-status { display: inline-flex; align-items: center; gap: .7rem; margin-bottom: 1.6rem; padding: .5rem 1rem; background: var(--ink); color: var(--white); font-size: 1rem; letter-spacing: .08em; }
.oinfo-status i { width: .7rem; height: .7rem; background: #3bd16f; transform: rotate(45deg); }
.oinfo-contact a { text-decoration: underline; }
.oinfo-rules { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; margin-top: 2rem; }
.oinfo-rules p { display: contents; }
.oinfo-rules img { height: 7rem; width: auto; }
.oinfo-map { position: relative; margin-top: 2.4rem; height: 33.9rem; }
.oinfo-map iframe { width: 100%; height: 100%; border: 0; }
.oinfo-map .btn { position: absolute; left: 2rem; bottom: 2rem; width: auto; padding: 0 2rem; height: 3.4rem; background: var(--pink); color: var(--white); }

/* formulaires officiels */
.official form { display: grid; gap: 1rem; max-width: 40rem; margin: 2rem auto 0; }
.official form input[type=text], .official form input[type=email], .official form textarea { width: 100%; padding: 1rem 1.2rem; border: 0; border-bottom: 2px solid var(--ink); background: transparent; font: inherit; font-size: 1.1rem; }
.official form textarea { min-height: 10rem; }
.official form input[type=submit] { justify-self: center; width: 11.1rem; height: 2.9rem; border: 1px solid #333; background: var(--white); font-size: 1.3rem; cursor: pointer; }
.official form input[type=submit]:hover { background: var(--ink); color: var(--white); }

/* précédent / suivant */
.ipager { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; margin-top: 6rem; }
.ipager a { display: flex; flex-direction: column; gap: .4rem; padding: 1.8rem 2rem; border: 1px solid #333; font-size: 1.5rem; transition: background .2s, color .2s; }
.ipager a small { font-size: .95rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ipager a.next { text-align: right; }
.ipager a:hover { background: var(--ink); color: var(--white); }
.ipager a:hover small { color: #bbb; }

/* =====================================================================
   PAGE YVES SAINT LAURENT
   ===================================================================== */
.ihero-mini .topbar .logo text { fill: var(--blue-logo); }
.ysl-hero2 { width: min(var(--wrap), 92vw); margin: 0 auto; padding: 6rem 0; display: grid; grid-template-columns: 1fr 1fr; gap: 7rem; align-items: center; }
.ysl-hero2 .crumbs { justify-content: flex-start; color: var(--muted); margin-bottom: 3rem; }
.ysl-hero2-dates { font-size: 1.2rem; letter-spacing: .3em; color: var(--pink); margin-bottom: 1.4rem; }
.ysl-hero2-name { font-family: var(--serif); font-weight: 700; font-size: 7rem; line-height: .95; }
.ysl-hero2-line { display: block; width: 7rem; height: .35rem; margin: 2.6rem 0; background: var(--yellow); }
.ysl-hero2-down { display: inline-flex; gap: 1rem; font-size: 1.4rem; letter-spacing: .14em; text-transform: uppercase; }
.ysl-hero2-photo { position: relative; margin: 0; border-right: .45rem solid var(--yellow-2); }
.ysl-hero2-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1); }
.ysl-hero2-mark { position: absolute; left: -2.2rem; bottom: 4rem; width: 4.4rem; height: 4.4rem; background: var(--pink); transform: rotate(45deg); }

.yh { position: relative; height: calc(var(--n) * 55vh + 100vh); background: var(--ink); color: var(--white); }
.yh-sticky { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; overflow: hidden; padding: 4rem 0 3rem; }
.yh-head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 4vw; }
.yh-head .kicker { font-family: var(--serif); font-size: 3rem; text-transform: none; letter-spacing: 0; color: var(--white); }
.yh-count { font-size: 1.2rem; letter-spacing: .14em; }
.yh-cur { color: var(--yellow); }
.yh-track { flex: 1; display: flex; align-items: center; gap: 4rem; padding: 0 4vw; will-change: transform; }
.yh-card { flex: 0 0 32rem; display: flex; flex-direction: column; gap: 1.8rem; padding-left: 2rem; border-left: 2px solid var(--yellow); opacity: .35; transition: opacity .4s; }
.yh-card.is-near { opacity: 1; }
.yh-card.has-photo { flex-basis: 44rem; }
.yh-year { font-family: var(--serif); font-weight: 700; font-size: 8rem; line-height: .85; color: var(--yellow); }
.yh-card:nth-child(even) .yh-year { color: var(--pink); }
.yh-card:nth-child(even) { border-left-color: var(--pink); }
.yh-text { font-size: 1.2rem; line-height: 1.7; }
.yh-photo { margin: 0; }
.yh-photo img { width: 100%; max-height: 34vh; object-fit: cover; filter: grayscale(1); }
.yh-end { border: 0; }
.yh-end-mark { width: 4.4rem; height: 4.4rem; background: var(--white); transform: rotate(45deg); }
.yh-progress { margin: 0 4vw; height: 2px; background: rgba(255,255,255,.2); }
.yh-progress span { display: block; height: 100%; width: 0; background: var(--yellow); }

/* =====================================================================
   MOBILE
   ===================================================================== */
@media (max-width: 900px) {
  .ihero { min-height: 26rem; }
  .ihero h1 { font-size: 3rem; }
  .ihero-kicker { font-size: .85rem; }
  .ipanel { padding-top: 3rem; }
  .opanel-head h2, .opanel-head h3 { font-size: 2.4rem; }
  .osplit, .ocards-detail-in { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .osplit-media, .ipanel > .osplit:nth-of-type(even) .osplit-media { border: 0; border-bottom: 5px solid var(--yellow-2); }
  .osplit-media .oslides { position: static; }
  .osplit-text { padding: 2rem 1.4rem; }
  .osplit .opanel-head h2 { font-size: 2rem; }
  .official { font-size: 1rem; }
  .official .off-lead { font-size: 1.4rem; }
  .ocards-track { grid-auto-columns: 75%; }
  .ocard-title, .official .ocard-title { font-size: 1.15rem; }
  .oinfo { grid-template-columns: 1fr; } .oinfo-card + .oinfo-card { border-left: 0; border-top: 1px solid #ddd; }
  .oinfo-map { height: 18rem; }
  .ipager { grid-template-columns: 1fr; }
  .ysl-hero2 { grid-template-columns: 1fr; gap: 2.4rem; padding: 3rem 0; }
  .ysl-hero2-name { font-size: 3.4rem; }
  .yh { height: auto; } .yh-sticky { position: static; height: auto; }
  .yh-track { overflow-x: auto; scroll-snap-type: x mandatory; padding-block: 2rem; transform: none !important; }
  .yh-card { flex-basis: 82vw; scroll-snap-align: start; opacity: 1; }
  .yh-year { font-size: 4rem; }
  .yh-progress { display: none; }
}

/* corrections */
.inner .menu, .inner .social, .inner .logo { animation: none; opacity: 1; transform: none; }
.itabs .pills { justify-content: flex-start; }
.itabs .pill:first-child { margin-left: auto; }
.itabs .pill:last-child { margin-right: auto; }
.ipager a.ipager-next { text-align: right; }
/* image qui remplit toute la hauteur du panneau */
.osplit-media .oslides, .osplit-media .oslides-track { height: 100%; }
.osplit-media .oslides { position: relative; top: 0; min-height: 34rem; }
.osplit-media .oslides-track img, .osplit-media .oslides-single img { height: 100%; aspect-ratio: auto; object-fit: cover; }
.osplit-media .oslides-single { height: 100%; }
/* affiches d'exposition : jamais rognées */
.page-expositions .osplit-media .oslides-track img, .page-expositions .osplit-media .oslides-single img { object-fit: contain; background: #111; }
.oinfo-status.is-closed i { background: #e30913; }
.oinfo-hours strong { display: block; font-family: var(--serif); font-size: 2.2rem; line-height: 1.1; margin-bottom: .6rem; }
.oinfo-contact strong { letter-spacing: .08em; }
/* fiche détaillée : l'image reste fixe pendant qu'on lit le texte */
.ocards-detail-in { align-items: start; }
.ocards-detail .oslides { position: sticky; top: 2rem; align-self: start; background: transparent; }
.ocards-detail .oslides-track { align-items: flex-start; }
.ocards-detail .oslides img { background: transparent; max-height: calc(100vh - 4rem); }
@media (max-width: 900px) { .ocards-detail .oslides { position: static; } }
.ocards-detail .oslides { top: 6.5rem; } .ocards-detail .oslides img { max-height: calc(100vh - 8rem); }

/* Images des panneaux : proportions d'origine (plus d'étirement flou), fixes pendant la lecture */
.osplit { align-items: start; background: var(--ink); }
.ipanel > .osplit:nth-of-type(even) { background: var(--pink); }
.osplit-media { align-self: stretch; background: transparent; }
.osplit-media .oslides { position: sticky; top: 6.5rem; height: auto; min-height: 0; background: transparent; }
.osplit-media .oslides-track { height: auto; align-items: flex-start; }
.osplit-media .oslides-track img, .osplit-media .oslides-single img { height: auto; aspect-ratio: auto; max-height: calc(100vh - 8rem); object-fit: cover; }
.page-expositions .osplit-media .oslides-track img, .page-expositions .osplit-media .oslides-single img { object-fit: contain; }
.osplit-text { min-height: 100%; }
/* toute la carte ouvre la fiche */
.ocard:has(.ocard-full) { cursor: pointer; }
.ocard:has(.ocard-full):hover .ocard-title { text-decoration: underline; text-underline-offset: 4px; }
.ocard:has(.ocard-full):hover .ocard-open { color: var(--pink); }