/* Récit au défilement et photos (actifs par défaut via html[data-recit] ; ?recit=0 les masque pour comparer) */

.recit, .photo-band { display: none; }
html[data-recit] .recit { display: block; }
html[data-recit] .photo-band { display: block; }
html[data-recit] .track .timeline { display: none; }

/* --- Section récit --- */
.recit { padding: 5rem 0 3rem; background: var(--paper); border-top: 1px solid var(--rule); }
.recit-grid { display: grid; gap: 2.5rem; }
.recit-visual { display: none; }
.recit-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 3rem; }
.recit-step h3 { font-size: 1.5rem; color: var(--primary); margin-top: .35rem; }
.recit-num { font-size: .8rem; font-weight: 600; letter-spacing: .14em; color: var(--accent); }
.recit-when { font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: .25rem 0 .75rem; }
.recit-step p:last-child { color: var(--ink); line-height: 1.7; max-width: 32rem; }
.recit-inline { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; margin-bottom: 1.25rem; max-height: 60vh; }

@media (min-width: 960px) {
  .recit { padding-bottom: 0; }
  .recit-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5rem; align-items: start; }
  .recit-visual { display: block; position: sticky; top: calc(var(--header-h, 4.5rem) + 2rem); }
  .recit-inline { display: none; }
  .recit-steps { gap: 0; }
  /* Une étape occupe environ un écran : le visuel reste fixe pendant que le texte défile */
  .recit-step { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; }
  /* Atténuation des étapes non lues seulement si le script tourne (sinon tout reste lisible) */
  .recit-js .recit-step { opacity: .35; transition: opacity .5s ease; }
  .recit-js .recit-step.is-active { opacity: 1; }
  .recit-step:last-child { min-height: 60vh; }
}

.recit-frame { position: relative; aspect-ratio: 4 / 5; max-height: calc(100vh - 9rem); overflow: hidden; background: var(--navy); }
.recit-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .8s ease, transform 1.6s ease; }
.recit-photo.is-active { opacity: 1; transform: scale(1); }
.recit-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 29, 71, 0) 55%, rgba(7, 29, 71, .55) 100%); pointer-events: none; }
.recit-counter { position: absolute; left: 1.25rem; bottom: 1rem; z-index: 1; margin: 0; color: #fff; font-family: var(--serif); font-size: 1.1rem; letter-spacing: .08em; }
.recit-current { font-weight: 600; color: var(--accent-soft); }
.recit-progress { display: flex; gap: .4rem; margin-top: 1rem; }
.recit-progress span { flex: 1; height: 2px; background: var(--rule); transition: background-color .4s ease; }
.recit-progress span.is-active { background: var(--accent); }

/* --- Bandeaux photo --- */
.photo-band { margin: 0 0 2.5rem; overflow: hidden; }
.photo-band img { width: 100%; height: auto; display: block; aspect-ratio: 21 / 9; object-fit: cover; }

/* --- Phrase-image pleine largeur --- */
.photo-statement { display: none; position: relative; overflow: hidden; min-height: 68vh; background: var(--navy); }
html[data-recit] .photo-statement { display: flex; align-items: flex-end; }
.photo-statement img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.photo-statement::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7, 29, 71, .85) 0%, rgba(7, 29, 71, .35) 45%, rgba(7, 29, 71, 0) 75%); }
.photo-statement .wrap { position: relative; z-index: 1; width: 100%; padding-bottom: 3.5rem; }
.statement { margin: 0; font-family: var(--serif); font-weight: 600; color: #fff; font-size: clamp(2rem, 5.2vw, 4rem); line-height: 1.08; letter-spacing: -.01em; max-width: 18ch; }
.statement span { color: var(--accent-soft); }

/* --- Léger zoom à l'arrivée à l'écran (piloté par recit.js) --- */
.zoom-in { transform: scale(var(--zoom, 1.08)); transform-origin: center; will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .recit-photo, .recit-step, .recit-progress span { transition: none; }
  .zoom-in { transform: none; }
  .recit-photo { transform: none; }
}

/* Mosaïque des secteurs (accueil) : une photo par secteur, la banque en grand */
.sector-mosaic { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
html[data-recit] .photo-band.sector-mosaic { display: grid; }
.sector-mosaic .tile { position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 3; background: var(--navy); }
.sector-mosaic .tile img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; display: block; transition: transform 1.2s ease; }
.sector-mosaic .tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7, 29, 71, .78) 0%, rgba(7, 29, 71, 0) 55%); }
.sector-mosaic .tile span { position: absolute; left: .75rem; bottom: .6rem; z-index: 1; color: #fff; font-size: .8rem; font-weight: 600; letter-spacing: .02em; }
.sector-mosaic .tile:hover img { transform: scale(1.04); }
/* Onze secteurs : la banque sur deux colonnes, trois rangées pleines (4 colonnes) ou quatre (3 colonnes) */
.sector-mosaic { grid-auto-rows: 24vw; }
.sector-mosaic .tile { aspect-ratio: auto; }
.sector-mosaic .tile:first-child { grid-column: span 2; }
@media (min-width: 900px) {
  .sector-mosaic { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 10rem; }
  .sector-mosaic .tile:first-child span { font-size: 1rem; left: 1rem; bottom: .9rem; }
}
@media (prefers-reduced-motion: reduce) { .sector-mosaic .tile img { transition: none; } .sector-mosaic .tile:hover img { transform: none; } }