/* Scène de défilement du bandeau, portée depuis celle de Jean-Marc Broner
 * (`assets/css/hero-motion.css` de son site), avec les noms de classes d'ici.
 *
 * Le principe, le sien : on arrive sur la photo qui remplit l'écran, le bandeau
 * reste collé pendant qu'on défile, la photo se replie en tuile centrale et les
 * six autres photos viennent se ranger autour, en mosaïque. Le texte s'efface
 * pendant ce temps.
 *
 * La scène ne s'active qu'en grand écran, sans mouvement réduit : partout
 * ailleurs, le bandeau d'origine de ce site est conservé tel quel.
 */
.hero-m-track { background: var(--paper); }
.hero-m__mosaique { position: absolute; inset: 0; z-index: 0; }
.hero-m__media { display: none; }
.hero-m-track .hero-m__media { overflow: hidden; }
.hero-m__next {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 40px;
  background: var(--paper);
  color: var(--ink-soft);
  font-size: 12px;
  text-decoration: none;
}
.hero-m__next svg { width: 16px; height: 16px; }

.hero-m-track.is-scene { height: calc(250svh + 40px); }
.is-scene .hero-m {
  position: sticky;
  top: 0;
  height: calc(100svh - 40px);
  min-height: 0;
  padding: 110px 24px 64px;
  background: var(--paper);
}
.is-scene .hero-m__next { position: sticky; top: calc(100svh - 40px); }
.is-scene .hero-m__mosaique {
  transform: scale(var(--hero-echelle, 1));
  transform-origin: 50% 50%;
  will-change: transform;
}
.is-scene .hero-m__media,
.is-scene .hero-m__sat {
  position: absolute;
  display: block;
  inset: auto;
  top: 50%;
  left: 50%;
  width: var(--tuile-largeur);
  height: var(--tuile-hauteur);
  transform: translate(-50%, -50%);
  border-radius: 6px;
  overflow: hidden;
  /* Le flottement vertical d'origine se battrait avec la grille de la scène. */
  animation: none;
  box-shadow: none;
}
/* Le système d'apparition du site repose `transform: none` sur ces blocs une
   fois révélés, et sa règle est plus spécifique que la nôtre : le centrage des
   tuiles sautait. En scène, c'est la grille qui l'emporte. */
.hero-m-track.is-scene .hero-m .hero-m__media,
.hero-m-track.is-scene .hero-m .hero-m__sat { transform: translate(-50%, -50%); }
.is-scene .hero-m__media { z-index: 1; }
.is-scene .hero-m__sat img,
.is-scene .hero-m__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Les deux portraits encadrent la tuile centrale, les quatre bandes la bordent. */
.is-scene .hero-m__sat--l1,
.is-scene .hero-m__sat--r1 { width: var(--portrait-largeur); }
.is-scene .hero-m__sat--l1 { left: calc(50% - var(--ecart-cote)); }
.is-scene .hero-m__sat--r1 { left: calc(50% + var(--ecart-cote)); }
.is-scene .hero-m__sat--t1,
.is-scene .hero-m__sat--t2,
.is-scene .hero-m__sat--l2,
.is-scene .hero-m__sat--r2 { height: var(--bande-hauteur); }
.is-scene .hero-m__sat--t1,
.is-scene .hero-m__sat--t2 { top: calc(50% - var(--ecart-rangee)); }
.is-scene .hero-m__sat--l2,
.is-scene .hero-m__sat--r2 { top: calc(50% + var(--ecart-rangee)); }
.is-scene .hero-m__sat--t1,
.is-scene .hero-m__sat--l2 { left: calc(50% - var(--ecart-colonne)); }
.is-scene .hero-m__sat--t2,
.is-scene .hero-m__sat--r2 { left: calc(50% + var(--ecart-colonne)); }
/* Le voile : un lavis clair posé sur la photo, qui s'efface au défilement.
   C'est lui qui rend le texte lisible sur l'image au premier écran, et qui
   donne au bandeau sa douceur. Même valeur que chez Jean-Marc (68 %), dans
   l'ivoire d'ici plutôt que dans son blanc cassé. */
.is-scene .hero-m::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(250, 247, 243, .68);
  opacity: var(--hero-voile, 1);
  pointer-events: none;
}

/* Le bloc de texte est deja pilote par le systeme d'apparition du site, qui
   possede son opacite. On ne la lui dispute pas : un calque l'entoure, et les
   deux opacites se multiplient. */
.hero-m__fondu { position: relative; z-index: 2; }
.is-scene .hero-m__fondu { opacity: var(--hero-texte, 1); }
.is-scene .hero-m__fondu.est-masque { visibility: hidden; pointer-events: none; }

/* La photo centrale respire, comme la sienne. */
.hero-m__media img { transform-origin: 50% 54%; }

.hero-m__pause {
  position: absolute;
  z-index: 3;
  right: 24px;
  bottom: 24px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 12px;
  border: 1px solid rgba(10, 61, 90, .15);
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  color: var(--brand-deep);
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(10, 61, 90, .1);
}
.hero-m__pause[hidden],
.hero-m__pause .icone-lecture,
.hero-m__pause[data-pause="true"] .icone-pause { display: none; }
.hero-m__pause[data-pause="true"] .icone-lecture { display: block; }
.hero-m__pause:hover { background: #fff; }
.hero-m__pause:focus-visible { outline: 2px solid var(--brand-deep); outline-offset: 4px; }

@media (max-width: 640px) {
  .hero-m__pause { right: 16px; bottom: 10px; width: 40px; height: 40px; padding: 9px; }
}
@media (max-height: 600px) and (min-width: 640px) {
  .hero-m__pause { right: 12px; bottom: 12px; width: 40px; height: 40px; padding: 9px; }
}
@media print {
  .hero-m-track.is-scene { height: auto; }
  .is-scene .hero-m { position: relative; height: auto; min-height: 600px; }
  .is-scene .hero-m__mosaique { transform: none; }
  .is-scene .hero-m__media { inset: 0; width: 100%; height: 100%; transform: none; }
  .is-scene .hero-m__sat, .hero-m__next { display: none; }
  .is-scene .hero-m::before, .is-scene .hero-m__fondu { opacity: 1; }
  .is-scene .hero-m__fondu.est-masque { visibility: visible; }
  .hero-m__pause { display: none; }
  .hero-m__media img { transform: none !important; }
}

/* 20/10/2026 : la scène possède déjà ses propres marges. Le cumul des
   160 px du contenu désactivait le dézoom sur les écrans de portable. */
.hero-m-track.is-scene .hero-m__content { padding: 0; }
.hero-m-track.is-scene .hero-m__strip { display: none; }
/* Le texte, le voile et les images partagent la même scène, sans ancien
   mouvement d'apparition qui décale les tuiles pendant le dézoom. */
.hero-m-track.is-scene .hero-m__sat { opacity: 1; visibility: visible; }
/* Les portraits gardent l'intégralité de leur cadrage source. */
.hero-m-track.is-scene .hero-m__sat img { object-fit: contain; background: var(--paper-alt); }
/* Le repli garde également une photo en fond, comme le modèle Jean-Marc. */
.hero-m-track:not(.is-scene) .hero-m { background: var(--paper); isolation: isolate; }
.hero-m-track:not(.is-scene) .hero-m__media { display: block; position: absolute; inset: 0; }
.hero-m-track:not(.is-scene) .hero-m__media img { width: 100%; height: 100%; object-fit: cover; }
.hero-m-track:not(.is-scene) .hero-m::before { content: ''; position: absolute; inset: 0; z-index: 1; background: rgba(250,247,243,.78); pointer-events: none; }
.hero-m-track:not(.is-scene) .hero-m__sat,
.hero-m-track:not(.is-scene) .hero-m__strip { display: none; }
@media (max-width: 900px), (max-height: 600px) {
  .hero-m-track .hero-m__content { padding: 64px 24px 70px; }
  .hero-m-track .hero-m { min-height: calc(100svh - 80px); }
}

/* Accueil seul : navigation sur la photo, comme sur la référence. */
body.accueil-mouvement .site-header { position: absolute; inset: 0 0 auto; z-index: 50; padding: 16px 0; background: rgba(250,247,243,.36); }
body.accueil-mouvement .site-header .container { flex-direction: row; justify-content: space-between; gap: 24px; }
body.accueil-mouvement .brand-logo img { height: auto; width: 218px; }
body.accueil-mouvement .site-nav ul { gap: 8px 20px; }
body.accueil-mouvement .site-nav a { font-size: 13px; }
@media(max-width:1100px) and (min-width:901px) {
 body.accueil-mouvement .brand-logo img { width: 170px; }
 body.accueil-mouvement .site-nav ul { gap: 8px 12px; }
 body.accueil-mouvement .site-nav a { font-size: 12px; }
}
@media(max-width:900px) {
 body.accueil-mouvement .site-header {position: relative; background: var(--paper);}
 body.accueil-mouvement .site-header .container {flex-direction: column; gap:12px;}
 body.accueil-mouvement .brand-logo img {width:200px;}
}

/* Les scènes d'ambiance remplissent les bandes ; la séance réelle conserve
   son cadrage complet pour ne couper aucun visage. */
.hero-m-track.is-scene .hero-m__sat:not(.hero-m__sat--l1) img {object-fit:cover;object-position:center 35%;}