/* =====================================================================
   À propos « Dans l'atelier de Sam » : styles de la page (templates/universe/about.php)
   Repris du prototype validé (site-immersif/prototypes/a-propos/a-propos.css). Jetons : socle.css.
   Tout est limité à main.sr-imm--a-propos (aucune fuite vers la navigation, le pied de page ou le dock du site).
   Ordi = (min-width: 60em) ; en dessous : récit vertical, sans épinglage.
   --ap-nav et --ap-dock : hauteurs de la navigation fixe et du dock mobile du site, mesurées par a-propos.js.
   ===================================================================== */

.sr-imm--a-propos {
  --ap-haut-couches: 340vh;      /* durée de défilement de la vue éclatée */
  --ap-haut-recompo: 230vh;      /* durée de défilement de la recomposition */
  --ap-perspective: 1800px;      /* cahier : perspective 1800 px */
  --ap-colonne-etiquettes: 15rem;
  --ap-pointilles: 1px dashed var(--filet-fort);
  /* Le thème déclare ses polices sous les noms « Cormorant » et « DM » (socle : « DM Sans », absent du thème). */
  --police-titre: Cormorant, "Cormorant Garamond", Garamond, Georgia, serif;
  --police-texte: DM, "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* v17.26 : bords fondus des images posées sur le fond peint (même masque que les vignettes du thème). */
  /* (les valeurs du masque sont des RAYONS : 120 % ne fondait presque rien ; ici les coins disparaissent, le centre reste net) */
  --sr-masque-bords: radial-gradient(66% 64% at 50% 50%, #000 48%, rgba(0, 0, 0, 0.45) 74%, transparent 96%);
  --sr-masque-portrait: radial-gradient(70% 64% at 50% 44%, #000 50%, rgba(0, 0, 0, 0.45) 74%, transparent 96%);
  display: block; position: relative; isolation: isolate;
  margin: 0; padding: 0; max-width: none; min-height: 0;
  background: transparent; color: var(--encre);
  font-family: var(--police-texte); font-size: var(--taille-texte); line-height: var(--interligne-texte);
  overflow-x: clip;
  /* Valeurs de départ (mesurées le 22/10/2026) : le script les remplace par les mesures exactes, sans saut visible. */
  --ap-nav: 106px;
  --ap-dock: 0px;
}
@media (max-width: 760px) {
  .sr-imm--a-propos { --ap-nav: 76px; --ap-dock: calc(var(--sr-dock-height, 4.3rem) + env(safe-area-inset-bottom, 0px)); }
}
/* v17.26 : la page est posée sur le fond peint du thème (body::before), comme toutes les autres pages : aucune dalle opaque.
   Les images pleine largeur se fondent dans ce fond par des masques (ouverture, recomposition, photo, coulisses). */

/* Premier affichage mobile (4G lente) : l'affiche d'ouverture est le plus grand élément de l'écran. Tant que la page n'est pas
   chargée (html.ap-pret, posée par a-propos.js), le fond peint du thème (≈ 117 Ko, caché par la page) et l'italique de
   Cormorant (≈ 36 Ko, plus bas dans la page) ne lui disputent pas le réseau. */
html:not(.ap-pret) body.sr-reference.sr-page-about::before { background-image: linear-gradient(var(--sr-atmosphere-shade, #03131e), var(--sr-glass, #03131e)); }
html:not(.ap-pret) .sr-imm--a-propos :is(.sam__signature, .etiquette__fichier) { font-style: normal; }
/* v17.26 : styles-about.css garde une vieille règle « .sr-page-about:before » qui pose l'image sans voile. Ici, le même fond voilé
   que toutes les autres pages (dégradé nuit du thème + environment-small.webp), une fois la page prête. */
html.ap-pret body.sr-reference.sr-page-about::before { background-image: linear-gradient(var(--sr-atmosphere-shade, #03131eac), var(--sr-glass, #03131edb)), url('../assets/generated/environment-small.webp'); }

/* ---------- Typographie commune : les titres suivent la charte du thème (Cormorant en petites capitales, or clair, relief) ;
   seule leur taille est propre à la page (v17.26). ---------- */
.sr-imm--a-propos :is(h1, h2, h3) { font-family: var(--police-titre); font-weight: var(--graisse-normale); line-height: var(--interligne-titre); text-wrap: balance; margin: 0; }
.sr-imm--a-propos :is(h1, h2) { font-variant: small-caps; letter-spacing: 0.01em; color: var(--sr-gold-light, var(--or-clair)); text-shadow: 0 1px 0 color-mix(in srgb, var(--or-profond) 75%, transparent), 0 0.08em 0.25em var(--voile); }
.sr-imm--a-propos h3 { letter-spacing: var(--approche-titre); color: var(--encre); }
.sr-imm--a-propos p { margin: 0; }
.sr-imm--a-propos .phrase { font-size: var(--taille-chapo); line-height: var(--interligne-chapo); color: var(--encre-douce); max-width: var(--mesure-phrase); text-wrap: pretty; }
.sr-imm--a-propos .phrase-titre { font-size: var(--taille-titre-2); line-height: var(--interligne-serre); max-width: 18ch; }
.sr-imm--a-propos .sr-icon { width: 1.1em; height: 1.1em; flex: none; }

/* ---------- Boutons ---------- */
.sr-imm--a-propos .bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2);
  min-height: var(--bouton-hauteur); padding: 0 var(--esp-5);
  border-radius: var(--rayon-pilule); border: 1px solid transparent;
  font-family: var(--police-texte); font-size: var(--taille-etiquette); font-weight: var(--graisse-moyenne);
  letter-spacing: var(--approche-etiquette); text-decoration: none; white-space: nowrap; line-height: 1.2;
  transition: background-color var(--duree-appui) ease, border-color var(--duree-appui) ease, color var(--duree-appui) ease, transform var(--duree-appui) var(--ease-out);
}
.sr-imm--a-propos .bouton:active { transform: scale(var(--appui-echelle)); }
.sr-imm--a-propos .bouton--principal { background: var(--or); color: var(--encre-sur-or); }
.sr-imm--a-propos .bouton--secondaire { border-color: var(--filet-fort); color: var(--encre); background: transparent; }
@media (hover: hover) and (pointer: fine) {
  .sr-imm--a-propos .bouton--principal:hover { background: var(--or-clair); color: var(--encre-sur-or); }
  .sr-imm--a-propos .bouton--secondaire:hover { border-color: var(--filet-actif); }
}
.sr-imm--a-propos .ap-lien {
  display: inline-flex; align-items: center; gap: var(--esp-2); min-height: var(--cible-min); margin-top: var(--esp-4);
  color: var(--or-clair); font-size: var(--taille-etiquette); letter-spacing: var(--approche-etiquette); text-decoration: underline; text-decoration-color: var(--filet-fort); text-underline-offset: 0.3em;
  transition: text-decoration-color var(--duree-appui) ease;
}
@media (hover: hover) and (pointer: fine) { .sr-imm--a-propos .ap-lien:hover { text-decoration-color: currentColor; } }

/* ---------- Bouton son : fixe en haut à droite, sous la navigation du site ----------
   Se retire quand on descend, revient dès qu'on remonte (ou au focus clavier). */
.sr-imm--a-propos .ap-son {
  position: fixed; top: calc(var(--ap-nav, 64px) + var(--esp-3)); right: var(--marge-ecran); z-index: var(--plan-barre);
  display: inline-flex; align-items: center; gap: var(--esp-2);
  min-height: var(--cible-min); padding: 0 var(--esp-4) 0 var(--esp-3);
  border-radius: var(--rayon-pilule); border: 1px solid var(--filet-fort);
  background: var(--voile); color: var(--encre);
  font-size: var(--taille-etiquette); letter-spacing: var(--approche-etiquette); line-height: 1.2;
  transition: border-color var(--duree-appui) ease, transform var(--duree-moyenne) var(--ease-tiroir), opacity var(--duree-courte) ease, visibility 0s;
}
.sr-imm--a-propos .ap-son:active { transform: scale(var(--appui-echelle)); }
body.admin-bar .sr-imm--a-propos .ap-son { top: calc(var(--ap-nav, 64px) + 32px + var(--esp-3)); }   /* barre WordPress (connecté) */
.sr-imm--a-propos .ap-son.est-cachee:not(:focus-visible) { transform: translateY(-12px); opacity: 0; visibility: hidden; pointer-events: none; transition: transform var(--duree-moyenne) var(--ease-tiroir), opacity var(--duree-courte) ease, visibility 0s linear var(--duree-courte); }
.sr-imm--a-propos .ap-son__ico { width: 20px; height: 20px; color: var(--or); }
.sr-imm--a-propos .ap-son__ondes { opacity: 0; }
.sr-imm--a-propos .ap-son[aria-pressed='true'] { border-color: var(--filet-actif); }
.sr-imm--a-propos .ap-son[aria-pressed='true'] .ap-son__ondes { opacity: 1; }
.sr-imm--a-propos .ap-son[aria-pressed='true'] .ap-son__barre { opacity: 0; }
@media (hover: hover) and (pointer: fine) { .sr-imm--a-propos .ap-son:hover { border-color: var(--filet-actif); } }

/* Bouton lecture / pause des vidéos (mobile, mouvement réduit, et toujours disponible). */
.sr-imm--a-propos .bouton-lecture {
  position: absolute; right: var(--marge-ecran); bottom: calc(var(--esp-6) + max(var(--ap-dock, 0px), var(--sur-bas))); z-index: var(--plan-contenu);
  min-height: var(--cible-min); padding: 0 var(--esp-4);
  border-radius: var(--rayon-pilule); border: 1px solid var(--filet-fort); background: var(--voile);
  font-size: var(--taille-etiquette); color: var(--encre); line-height: 1.2;
  transition: border-color var(--duree-appui) ease, transform var(--duree-appui) var(--ease-out);
}
.sr-imm--a-propos .bouton-lecture:active { transform: scale(var(--appui-echelle)); }
@media (hover: hover) and (pointer: fine) { .sr-imm--a-propos .bouton-lecture:hover { border-color: var(--filet-actif); } }

/* ---------- 0. Ouverture ---------- */
/* La navigation du site occupe le haut de l'écran (collante) : l'ouverture prend tout le reste. */
.sr-imm--a-propos .ouverture { position: relative; min-height: calc(100vh - var(--ap-nav, 64px)); min-height: calc(100svh - var(--ap-nav, 64px)); display: flex; align-items: flex-end; isolation: isolate; overflow: clip; }
/* L'affiche se fond dans le fond peint du site vers le bas : jamais de bord net sous le premier écran. */
.sr-imm--a-propos .ouverture__media { position: absolute; inset: 0; z-index: var(--plan-fond); -webkit-mask-image: linear-gradient(#000 70%, transparent 100%); mask-image: linear-gradient(#000 70%, transparent 100%); }
.sr-imm--a-propos .ouverture picture, .sr-imm--a-propos .recompo__finale picture { position: absolute; inset: 0; }
.sr-imm--a-propos :is(.ouverture__poster, .ouverture__video) { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.sr-imm--a-propos .ouverture__video { opacity: 0; transition: opacity var(--duree-longue) var(--ease-out); }
.sr-imm--a-propos .ouverture__video.est-pret { opacity: 1; }
.sr-imm--a-propos .ouverture__voile { position: absolute; inset: 0; background: var(--vignette), var(--voile-bas); }
.sr-imm--a-propos .ouverture__texte { position: relative; z-index: var(--plan-contenu); padding: 0 var(--marge-ecran) calc(var(--esp-8) + max(var(--ap-dock, 0px), var(--sur-bas))); max-width: 52rem; }
/* Téléphone : le bouton « Lancer l'image animée » est sous la phrase, jamais par-dessus. */
@media (max-width: 59.999em) {
  .sr-imm--a-propos .ouverture__texte { padding-bottom: calc(var(--esp-6) + var(--cible-min) + var(--esp-5) + max(var(--ap-dock, 0px), var(--sur-bas))); }
}
.sr-imm--a-propos .ouverture h1 { font-size: var(--taille-titre-1); line-height: var(--interligne-serre); margin-bottom: var(--esp-4); text-shadow: var(--sr-text-shadow, var(--ombre-contact)); }
.sr-imm--a-propos .ouverture .phrase { color: var(--encre); }
/* Entrée de la phrase : jamais cachée tant qu'une animation n'a pas joué. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.sr-reduced) .sr-imm--a-propos .ouverture__texte > * { animation: ap-montee var(--duree-phrase) var(--ease-out) both; }
  html:not(.sr-reduced) .sr-imm--a-propos .ouverture__texte > .phrase { animation-delay: 80ms; }
}
@keyframes ap-montee { from { opacity: 0; transform: translateY(var(--montee)); } }

/* ---------- 1. Le récit de Sam (v17.27) ----------
   Le portrait reste à gauche pendant la lecture (colonne collante). La nuit (.recit__nuit) s'épaissit en approchant du creux
   de l'histoire et se dissipe après la vidéo trouvée ; une lueur or (.recit__lueur) s'allume à ce moment. Les deux variables
   sont posées par a-propos.js ; sans script, la page est simplement lisible. */
.sr-imm--a-propos .recit {
  --recit-nuit: 0; --recit-lueur: 0;
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--esp-5);
  padding: var(--marge-section) var(--marge-ecran);
  align-items: start;
}
.sr-imm--a-propos .recit__nuit {
  position: absolute; inset: -12vh 0; z-index: -1; pointer-events: none;
  background: var(--nuit); opacity: var(--recit-nuit);
  -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
}
.sr-imm--a-propos .recit__lueur {
  position: absolute; z-index: -1; pointer-events: none;
  left: 4%; top: 42%; width: min(44vw, 38rem); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--or-clair) 28%, transparent), color-mix(in srgb, var(--or) 10%, transparent) 50%, transparent 78%);
  opacity: var(--recit-lueur); filter: blur(12px);
}
.sr-imm--a-propos .recit__colonne { grid-column: 1 / span 4; position: sticky; top: calc(var(--ap-nav, 64px) + var(--esp-6)); }
.sr-imm--a-propos .recit__portrait { margin: 0; width: min(100%, 24rem); }
.sr-imm--a-propos .recit__portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; -webkit-mask-image: var(--sr-masque-portrait); mask-image: var(--sr-masque-portrait); filter: saturate(0.88) contrast(1.04); }
.sr-imm--a-propos .recit__portrait figcaption { margin: var(--esp-3) 0 0 var(--esp-4); font-family: var(--police-titre); font-style: italic; font-size: var(--taille-titre-4); line-height: var(--interligne-titre); color: var(--encre-attenuee); }
.sr-imm--a-propos .recit__texte { grid-column: 6 / span 6; max-width: 38rem; }
.sr-imm--a-propos .recit--sans-photo .recit__texte { grid-column: 3 / span 7; }
.sr-imm--a-propos .recit__titre { font-size: var(--taille-titre-2); line-height: var(--interligne-serre); margin-bottom: var(--esp-6); max-width: 18ch; }
.sr-imm--a-propos .recit__texte p { margin: 0 0 var(--esp-5); font-size: var(--taille-texte); line-height: 1.7; color: var(--encre-douce); max-width: var(--mesure-texte); }
.sr-imm--a-propos .recit__texte .recit__chapo { font-size: var(--taille-chapo); line-height: var(--interligne-chapo); color: var(--encre); margin-bottom: var(--esp-7); }
.sr-imm--a-propos .recit__texte .recit__court { color: var(--encre); }
.sr-imm--a-propos .recit__texte .recit__temps { margin: var(--esp-7) 0; font-family: var(--police-titre); font-style: italic; font-size: var(--taille-titre-3); line-height: var(--interligne-titre); color: var(--or-clair); max-width: 20ch; text-shadow: 0 0 2.4rem color-mix(in srgb, var(--or) 35%, transparent); }
.sr-imm--a-propos .recit__texte .recit__temps--naissance { font-style: normal; font-variant: small-caps; letter-spacing: 0.01em; }
.sr-imm--a-propos .recit__texte .recit__fin { margin-top: var(--esp-7); font-family: var(--police-titre); font-style: italic; font-size: var(--taille-titre-4); line-height: var(--interligne-titre); color: var(--encre); max-width: 26ch; }
.sr-imm--a-propos .recit__texte .recit__signature { font-family: var(--police-titre); font-style: italic; font-size: var(--taille-titre-3); color: var(--encre-attenuee); margin-bottom: var(--esp-2); }
/* Entrée des paragraphes : visibles sans script ; avec lui, chacun monte quand il arrive à l'écran. */
html.ap-js .sr-imm--a-propos .recit__texte > :is(p, h2) { opacity: 0; translate: 0 var(--montee); transition: opacity var(--duree-phrase) var(--ease-out), translate var(--duree-phrase) var(--ease-out); }
html.ap-js .sr-imm--a-propos .recit__texte > .est-visible, html.mouvement-reduit .sr-imm--a-propos .recit__texte > :is(p, h2) { opacity: 1; translate: 0 0; }
@media (max-width: 59.999em) {
  .sr-imm--a-propos .recit { display: flex; flex-direction: column; gap: var(--esp-6); }
  .sr-imm--a-propos .recit__colonne { position: static; width: 62%; }
  .sr-imm--a-propos .recit__lueur { left: auto; right: -14%; top: 34%; width: 80vw; }
}

/* ---------- 2. La vue éclatée ---------- */
.sr-imm--a-propos .couches { position: relative; }
.sr-imm--a-propos .couches__epingle { position: relative; }
.sr-imm--a-propos .couches__entete { position: relative; z-index: var(--plan-contenu); }
.sr-imm--a-propos .couches__aide { font-size: var(--taille-mention); color: var(--encre-attenuee); margin-top: var(--esp-3); opacity: var(--aide-o, 1); transition: opacity var(--duree-courte) ease; }
.sr-imm--a-propos .couches__note { font-size: var(--taille-mention); color: var(--encre-attenuee); max-width: 46ch; }
.sr-imm--a-propos .couches__voile { display: none; }

/* Un calque : plan 16/9 dont le contenu remplit le cadre. */
.sr-imm--a-propos .calque { position: absolute; inset: 0; transform-origin: 50% 50%; backface-visibility: hidden; }
.sr-imm--a-propos .calque > :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
/* v17.29 : l'image fixe est le même instant que la vidéo ; la vidéo la recouvre dès qu'elle joue (pile à plat comme pile ouverte). */
.sr-imm--a-propos .calque__video { opacity: 0; transition: opacity var(--duree-moyenne) var(--ease-out); }
.sr-imm--a-propos .calque__video.est-pret { opacity: 1; }
.sr-imm--a-propos .calque > img { transition: opacity var(--duree-moyenne) var(--ease-out); }
.sr-imm--a-propos .calque:has(> .calque__video.est-pret) > img { opacity: 0; }   /* l'image fixe s'efface sous la vidéo (sinon : sorcière en double) */
/* Couches en mode Écran / Ajout (pluie, lucioles, brume) : l'image fixe a sa transparence tirée de la luminosité ; la vidéo
   (opaque sur noir) est recopiée par a-propos.js dans un canevas WebGL avec la même transparence (.calque__luma), qui la remplace
   à l'écran. Sans WebGL : la vidéo reste, en mode Écran (juste pour la pile à plat). */
.sr-imm--a-propos .calque__luma { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; opacity: 0; transition: opacity var(--duree-moyenne) var(--ease-out); pointer-events: none; }
.sr-imm--a-propos .calque__luma.est-pret { opacity: 1; }
/* Pile ouverte : ces couches, discrètes par nature (pluie à 32 %, lucioles), sont un peu avivées pour rester lisibles sur leur plaque. */
.sr-imm--a-propos .calque[data-mode] > :is(.calque__luma, img) { filter: brightness(calc(1 + 0.9 * var(--cadre, 0))); }
.sr-imm--a-propos .calque.a-luma > .calque__video { opacity: 0 !important; }
.sr-imm--a-propos .calque:has(> .calque__luma.est-pret) > img { opacity: 0; }
.sr-imm--a-propos .calque:not(.a-luma)[data-mode='screen'] > video, .sr-imm--a-propos .calque:not(.a-luma)[data-mode='add'] > video { mix-blend-mode: screen; }
/* Deux repères invisibles aux coins gauches : leur position projetée sert à accrocher les filets. */
.sr-imm--a-propos .calque__coin { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; }
.sr-imm--a-propos .calque__coin--haut { top: 0; }
.sr-imm--a-propos .calque__coin--bas { bottom: 0; }

/* Étiquettes (texte réel). */
.sr-imm--a-propos .etiquettes { list-style: none; margin: 0; padding: 0; }
.sr-imm--a-propos .etiquette { margin: 0; }
.sr-imm--a-propos .etiquette__bouton {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0;
  min-height: var(--cible-min); padding: var(--esp-1) 0; text-align: left;
  transition: color var(--duree-appui) ease;
}
.sr-imm--a-propos .etiquette__nom { font-family: var(--police-texte); font-size: var(--taille-etiquette); color: var(--encre); line-height: 1.3; }
.sr-imm--a-propos .etiquette__fichier { font-family: var(--police-titre); font-style: italic; font-size: var(--taille-texte); color: var(--encre-attenuee); line-height: 1.2; }
.sr-imm--a-propos .etiquette.est-active .etiquette__nom { color: var(--or-clair); }

/* ===== Section épinglée, pile en 3D : sur tous les écrans (v17.27 : téléphone compris, demandé par Sam) ===== */
@media (min-width: 0) {
  html:not(.mouvement-reduit) .sr-imm--a-propos .couches { height: var(--ap-haut-couches); }
  .sr-imm--a-propos .couches__epingle { position: sticky; top: 0; height: 100vh; overflow: clip; isolation: isolate; }
  html.mouvement-reduit .sr-imm--a-propos .couches__epingle { position: relative; }
  .sr-imm--a-propos .couches__voile {
    display: block; position: absolute; inset: 0; z-index: var(--plan-atmo); pointer-events: none;
    background: radial-gradient(70% 60% at 0% 0%, var(--voile-fort), transparent 70%);
    opacity: var(--voile-o, 1);
  }
  .sr-imm--a-propos .couches__entete {
    position: absolute; left: var(--marge-ecran); top: calc(var(--ap-nav, 64px) + var(--esp-6)); max-width: 30rem;
    text-shadow: var(--ombre-contact);
  }
  .sr-imm--a-propos .couches__entete .phrase-titre { font-size: var(--taille-titre-3); max-width: 16ch; }
  .sr-imm--a-propos .couches__scene {
    position: absolute; inset: 0; z-index: var(--plan-fond);
    perspective: var(--ap-perspective); perspective-origin: 58% 42%;
    /* v17.26 : la pile de calques entre et sort en fondu sur le fond peint, jamais par un bord net */
    -webkit-mask-image: linear-gradient(transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(transparent, #000 9%, #000 91%, transparent);
  }
  .sr-imm--a-propos .pile {
    position: absolute; left: 50%; top: 50%;
    width: var(--pile-l, 100vw); aspect-ratio: 16 / 9;
    transform-style: preserve-3d;
    transform: translate(-50%, -50%);
  }
  .sr-imm--a-propos .pile .calque { transform-style: flat; box-shadow: var(--ombre-calque); }
  /* Les calques transparents deviennent des plaques de verre fumé : voile nuit très léger, filet or, reflet au coin. */
  .sr-imm--a-propos .pile .calque--decoupe { background: color-mix(in srgb, var(--nuit) calc(var(--cadre, 0) * 18%), transparent); border-radius: 2px; }
  .sr-imm--a-propos .pile .calque--decoupe::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(135deg, color-mix(in srgb, var(--or-clair) 14%, transparent) 0%, transparent 22%);
    opacity: var(--cadre, 0);
  }
  .sr-imm--a-propos .pile .calque::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: 2px;
    border: 1px solid color-mix(in srgb, var(--or) 55%, transparent); opacity: var(--cadre, 0);
  }
  .sr-imm--a-propos .pile.mise-en-avant .calque { transition: opacity var(--duree-courte) ease; }
  .sr-imm--a-propos .pile.mise-en-avant .calque:not(.est-avant) { opacity: 0.4; }
  .sr-imm--a-propos .pile.mise-en-avant .calque.est-avant::after { border-color: var(--filet-actif); }

  .sr-imm--a-propos .etiquettes { position: absolute; inset: 0; pointer-events: none; z-index: var(--plan-contenu); }
  .sr-imm--a-propos .etiquette {
    position: absolute; left: var(--marge-ecran); top: 0;
    width: var(--ap-colonne-etiquettes);
    display: flex; align-items: center;
    opacity: 0; transform: translateY(var(--montee));
    transition: opacity var(--duree-courte) var(--ease-out), transform var(--duree-courte) var(--ease-out);
    pointer-events: none;
  }
  .sr-imm--a-propos .etiquette.est-visible { opacity: 1; transform: none; pointer-events: auto; }
  .sr-imm--a-propos .etiquette__bouton { position: relative; z-index: 1; padding: var(--esp-1) var(--esp-3) var(--esp-1) 0; text-shadow: var(--ombre-contact); }
  .sr-imm--a-propos .etiquette__filet {
    position: absolute; left: 0; top: 50%; height: 1px; width: 0;
    background: linear-gradient(90deg, var(--filet), var(--filet-fort));
    pointer-events: none;
  }
  .sr-imm--a-propos .etiquette__filet::after {
    content: ''; position: absolute; right: -3px; top: -3px; width: 7px; height: 7px; border-radius: 50%;
    background: var(--or); box-shadow: var(--halo-or);
  }
  .sr-imm--a-propos .etiquette.est-active .etiquette__filet { background: var(--filet-actif); }
  .sr-imm--a-propos .etiquette.est-active .etiquette__filet::after { background: var(--or-clair); box-shadow: var(--halo-or-fort); }
  .sr-imm--a-propos .couches__note {
    position: absolute; right: var(--marge-ecran); bottom: var(--esp-6); max-width: 34ch; text-align: right; z-index: var(--plan-contenu);
    opacity: var(--note-o, 0); transition: opacity var(--duree-courte) ease;
  }
  html.mouvement-reduit .sr-imm--a-propos .couches__note { opacity: 1; }
}

/* ===== Téléphone et tablette portrait : la même vue éclatée, adaptée à l'écran étroit (v17.27) =====
   La pile est plus petite et placée dans la moitié haute ; les étiquettes forment une colonne compacte en bas,
   chaque nom apparaissant avec son calque ; pas de filets (pas de place). Les réglages de la pile sont dans a-propos.js. */
@media (max-width: 59.999em) {
  .sr-imm--a-propos { --ap-haut-couches: 300vh; --ap-haut-recompo: 200vh; --ap-reserve-section: 560px; }   /* v17.29.4 : réserve content-visibility = vraie hauteur des sections sur téléphone (440 à 700 px mesurés ; 900 px faisaient sauter la page) */
  .sr-imm--a-propos .couches__epingle { height: 100svh; }
  .sr-imm--a-propos .couches__entete { top: calc(var(--ap-nav, 64px) + var(--esp-4)); max-width: calc(100% - 2 * var(--marge-ecran)); }
  .sr-imm--a-propos .couches__entete .phrase-titre { font-size: var(--taille-titre-4); max-width: 16ch; }
  .sr-imm--a-propos .couches__scene { perspective-origin: 50% 40%; }
  .sr-imm--a-propos .pile { top: 49%; }
  .sr-imm--a-propos .etiquettes { inset: auto var(--marge-ecran) calc(var(--ap-dock, 0px) + var(--esp-5)) var(--marge-ecran); display: grid; gap: 0; }
  .sr-imm--a-propos .etiquette { position: static; width: auto; }
  .sr-imm--a-propos .etiquette__bouton { min-height: var(--esp-6); padding: 0; flex-direction: row; align-items: baseline; gap: var(--esp-2); text-shadow: var(--ombre-contact); }
  .sr-imm--a-propos .etiquette__fichier { font-size: var(--taille-mention); }
  .sr-imm--a-propos .etiquette__filet, .sr-imm--a-propos .couches__note, .sr-imm--a-propos .calque__coin { display: none; }
}
html.mouvement-reduit .sr-imm--a-propos .calque { transition: opacity var(--duree-courte) ease; }

/* ---------- 3 & 4. Écrans de travail ---------- */
.sr-imm--a-propos .travail {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--esp-5);
  padding: var(--marge-section) 0 var(--marge-section) var(--marge-ecran);
  align-items: center;
}
.sr-imm--a-propos .travail__phrase { grid-column: 1 / span 4; padding-right: var(--esp-5); }
.sr-imm--a-propos .travail__legende { margin-top: var(--esp-4); color: var(--encre-attenuee); font-size: var(--taille-texte); max-width: 36ch; }
.sr-imm--a-propos .ecran-travail {
  grid-column: 5 / -1; margin: 0;
  background: color-mix(in srgb, var(--panneau) 88%, transparent);
  border-radius: var(--rayon) 0 0 var(--rayon);
  box-shadow: var(--ombre-panneau), 0 0 0 1px var(--filet);
  overflow: hidden;
  transform-origin: 100% 50%;
}
.sr-imm--a-propos .travail--pr { padding: var(--marge-section) var(--marge-ecran) var(--marge-section) 0; }
.sr-imm--a-propos .travail--pr .ecran-travail { grid-column: 1 / span 7; grid-row: 1; border-radius: 0 var(--rayon) var(--rayon) 0; transform-origin: 0 50%; }
.sr-imm--a-propos .travail--pr .travail__phrase { grid-column: 9 / span 4; grid-row: 1; padding: 0; }
.sr-imm--a-propos .ecran-travail__barre {
  display: flex; gap: var(--esp-4); align-items: center;
  padding: var(--esp-2) var(--esp-4); border-bottom: 1px solid var(--filet);
  font-size: var(--taille-mention); color: var(--encre-attenuee); letter-spacing: var(--approche-etiquette);
}
.sr-imm--a-propos .ecran-travail__barre span:first-child { color: var(--or); }
.sr-imm--a-propos .ecran-travail__image { position: relative; display: block; width: 100%; cursor: zoom-in; }
.sr-imm--a-propos .ecran-travail__image picture { display: block; }
.sr-imm--a-propos .ecran-travail__image img { width: 100%; height: auto; }
.sr-imm--a-propos .ecran-travail__legende-mobile { display: none; }

/* Repères or sur la capture. */
.sr-imm--a-propos .repere { position: absolute; left: var(--x); top: var(--y); display: flex; align-items: center; gap: var(--esp-2); pointer-events: none;
  opacity: var(--reperes-o, 1); transition: opacity var(--duree-courte) ease; }
.sr-imm--a-propos .repere__point { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--or-clair); box-shadow: var(--halo-or-fort); flex: none; transform: translate(-50%, 0); }
.sr-imm--a-propos .repere__texte {
  font-size: var(--taille-etiquette); color: var(--encre-sur-or); background: var(--or); line-height: 1.3;
  padding: var(--esp-1) var(--esp-3); border-radius: var(--rayon-pilule); white-space: nowrap; box-shadow: var(--ombre-contact);
}

@media (max-width: 59.999em) {
  .sr-imm--a-propos :is(.travail, .travail--pr) { display: flex; flex-direction: column; padding: var(--marge-section) var(--marge-ecran); gap: var(--esp-6); align-items: stretch; }
  .sr-imm--a-propos .travail__phrase { padding: 0; }
  /* Captures à fond perdu, pleine largeur d'écran. */
  .sr-imm--a-propos :is(.ecran-travail, .travail--pr .ecran-travail) {
    margin-inline: calc(-1 * var(--marge-ecran));
    border-radius: 0; box-shadow: var(--ombre-panneau);
  }
  .sr-imm--a-propos .repere__texte { display: none; }
  .sr-imm--a-propos .repere__point { width: 12px; height: 12px; }
  .sr-imm--a-propos .ecran-travail__legende-mobile { display: block; padding: var(--esp-3) var(--marge-ecran) var(--esp-4); border-top: 1px solid var(--filet); }
  .sr-imm--a-propos .ecran-travail__legende-mobile ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-4); font-size: var(--taille-mention); color: var(--encre-douce); }
  .sr-imm--a-propos .ecran-travail__legende-mobile li::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--or-clair); margin-right: var(--esp-2); vertical-align: 0; }
  .sr-imm--a-propos .ecran-travail__indice { margin-top: var(--esp-2); font-size: var(--taille-mention); color: var(--encre-attenuee); }
}

/* ---------- Ce que fait l'IA, ce que fait Sam : une note d'honnêteté, posée comme une page de carnet ---------- */
.sr-imm--a-propos .ia {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--esp-5); row-gap: var(--esp-4);
  margin: 0 var(--marge-ecran); padding: var(--esp-8) 0 var(--esp-2);
  border-top: 1px solid var(--filet); align-items: baseline;
}
.sr-imm--a-propos .ia__titre { grid-column: 2 / span 4; font-size: var(--taille-titre-3); line-height: var(--interligne-titre); max-width: 14ch; }
.sr-imm--a-propos .ia__texte { grid-column: 7 / span 5; color: var(--encre-douce); max-width: var(--mesure-texte); }
@media (max-width: 59.999em) {
  .sr-imm--a-propos .ia { display: block; padding-top: var(--esp-7); }
  .sr-imm--a-propos .ia__texte { margin-top: var(--esp-4); }
}

/* ---------- 5. Écouter les couches ---------- */
.sr-imm--a-propos .ecoute {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--esp-5);
  padding: var(--marge-section) var(--marge-ecran); align-items: start;
}
.sr-imm--a-propos .ecoute__titre { grid-column: 2 / span 5; font-size: var(--taille-titre-3); max-width: 20ch; }
.sr-imm--a-propos .ecoute__commande { grid-column: 8 / span 4; display: grid; justify-items: start; padding-top: var(--esp-2); }
.sr-imm--a-propos .ecoute__aide { margin-top: var(--esp-3); font-size: var(--taille-mention); color: var(--encre-attenuee); }
.sr-imm--a-propos .schema-son { list-style: none; margin: var(--esp-6) 0 0; padding: 0; display: grid; gap: var(--esp-3); width: 100%; }
.sr-imm--a-propos .schema-son__couche {
  display: flex; align-items: center; gap: var(--esp-4); margin: 0;
  padding-top: var(--esp-3); border-top: 1px solid var(--filet);
  opacity: 0.35; transition: opacity var(--duree-moyenne) var(--ease-out);
}
.sr-imm--a-propos .schema-son__nom { font-family: var(--police-titre); font-size: var(--taille-titre-4); color: var(--encre-douce); line-height: var(--interligne-titre); transition: color var(--duree-moyenne) ease; }
.sr-imm--a-propos .schema-son__couche.est-active { opacity: 1; }
.sr-imm--a-propos .schema-son__couche.est-active .schema-son__nom { color: var(--or-clair); }
.sr-imm--a-propos .onde { display: flex; gap: 4px; align-items: center; height: 28px; width: 36px; flex: none; }
.sr-imm--a-propos .onde i { display: block; width: 3px; height: 100%; border-radius: 2px; background: var(--or); transform: scaleY(0.2); transform-origin: 50% 50%; }
.sr-imm--a-propos .schema-son__couche.est-active .onde i { animation: ap-onde 1.1s ease-in-out infinite alternate; }
.sr-imm--a-propos .onde i:nth-child(2) { animation-delay: -0.3s; }
.sr-imm--a-propos .onde i:nth-child(3) { animation-delay: -0.7s; }
.sr-imm--a-propos .onde i:nth-child(4) { animation-delay: -0.15s; }
.sr-imm--a-propos .onde i:nth-child(5) { animation-delay: -0.5s; }
@keyframes ap-onde { from { transform: scaleY(0.2); } to { transform: scaleY(1); } }
html:is(.mouvement-reduit, .sr-reduced) .sr-imm--a-propos .schema-son__couche.est-active .onde i { animation: none; transform: scaleY(0.7); }
.sr-imm--a-propos [data-ecoute][aria-pressed='true'] { background: var(--or-clair); }
@media (max-width: 59.999em) {
  .sr-imm--a-propos .ecoute { display: flex; flex-direction: column; align-items: stretch; gap: var(--esp-6); }
  .sr-imm--a-propos .ecoute__commande { justify-items: stretch; }
  .sr-imm--a-propos .ecoute .bouton { width: 100%; min-height: var(--cible-confort); }
}

/* ---------- 6. Recomposition (seul moment centré) ---------- */
.sr-imm--a-propos .recompo { position: relative; }
.sr-imm--a-propos .recompo__epingle { position: relative; min-height: 100vh; min-height: 100svh; overflow: clip; display: grid; place-items: center; }
.sr-imm--a-propos .recompo__scene { position: absolute; inset: 0; -webkit-mask-image: linear-gradient(transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(transparent, #000 9%, #000 91%, transparent); }
.sr-imm--a-propos .recompo__texte { position: relative; z-index: var(--plan-contenu); text-align: center; padding: 0 var(--marge-ecran); }
.sr-imm--a-propos .recompo__phrase { font-size: var(--taille-titre-1); line-height: var(--interligne-serre); max-width: 14ch; margin-inline: auto; text-shadow: 0 2px 30px var(--nuit); opacity: var(--phrase-o, 1); }
.sr-imm--a-propos .recompo__finale { position: absolute; inset: 0; opacity: var(--finale-o, 1); -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 84%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 84%, transparent); }
.sr-imm--a-propos :is(.recompo__finale-poster, .recompo__finale-video) { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.sr-imm--a-propos .recompo__finale-video { opacity: 0; transition: opacity var(--duree-longue) var(--ease-out); }
.sr-imm--a-propos .recompo__finale-video.est-pret { opacity: 1; }
.sr-imm--a-propos .recompo__finale::after { content: ''; position: absolute; inset: 0; background: var(--vignette), radial-gradient(60% 50% at 50% 50%, var(--voile-leger), transparent); }
/* v17.27 : la recomposition en 3D sur tous les écrans */
html:not(.mouvement-reduit) .sr-imm--a-propos .recompo { height: var(--ap-haut-recompo); }
html:not(.mouvement-reduit) .sr-imm--a-propos .recompo__epingle { position: sticky; top: 0; height: 100vh; height: 100svh; }
.sr-imm--a-propos .recompo__scene { perspective: var(--ap-perspective); perspective-origin: 50% 50%; }

/* ---------- 7. Chiffres datés : lignes éditoriales de tailles différentes ---------- */
.sr-imm--a-propos .chiffres { padding: var(--marge-section) var(--marge-ecran); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--esp-5); }
.sr-imm--a-propos .chiffre { grid-column: 2 / -2; border-top: 1px solid var(--filet); padding: var(--esp-6) 0; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--esp-6); row-gap: var(--esp-1); align-items: baseline; }
.sr-imm--a-propos .chiffre:last-child { border-bottom: 1px solid var(--filet); }
.sr-imm--a-propos .chiffre__valeur { font-family: var(--police-titre); font-weight: var(--graisse-legere); color: var(--or-clair); line-height: var(--interligne-serre); letter-spacing: var(--approche-titre); grid-row: span 2; font-variant-numeric: lining-nums; white-space: nowrap; }
.sr-imm--a-propos .chiffre__texte { font-size: var(--taille-chapo); line-height: var(--interligne-chapo); color: var(--encre); max-width: 40ch; }
.sr-imm--a-propos .chiffre__mention { font-size: var(--taille-mention); color: var(--encre-attenuee); }
.sr-imm--a-propos .chiffre--1 .chiffre__valeur { font-size: var(--taille-chiffre); }
.sr-imm--a-propos .chiffre--2 { grid-column: 3 / -2; }
.sr-imm--a-propos .chiffre--2 .chiffre__valeur { font-size: var(--taille-titre-2); }
.sr-imm--a-propos .chiffre--3 { grid-column: 2 / -3; }
.sr-imm--a-propos .chiffre--3 .chiffre__valeur { font-size: var(--taille-titre-3); font-style: italic; color: var(--encre); }
@media (max-width: 59.999em) {
  .sr-imm--a-propos .chiffres { display: block; }
  .sr-imm--a-propos .chiffre { grid-template-columns: minmax(0, 1fr); padding: var(--esp-5) 0; }
  .sr-imm--a-propos .chiffre__valeur { grid-row: auto; margin-bottom: var(--esp-2); }
  .sr-imm--a-propos .chiffre--1 .chiffre__valeur { font-size: var(--taille-titre-1); }
}

/* ---------- 8. Coulisses (affiché seulement quand Sam l'a rempli) ---------- */
.sr-imm--a-propos .coulisses {
  position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--esp-5);
  padding: var(--marge-section) var(--marge-ecran); align-items: center;
}
.sr-imm--a-propos .coulisses__image { grid-column: 1 / span 5; aspect-ratio: 4 / 3; overflow: hidden; -webkit-mask-image: var(--sr-masque-bords); mask-image: var(--sr-masque-bords); }
.sr-imm--a-propos .coulisses__image img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; filter: blur(16px) saturate(0.75) brightness(0.8); transform: scale(1.2); }
.sr-imm--a-propos .coulisses__texte { grid-column: 7 / span 5; display: grid; gap: var(--esp-4); justify-items: start; }
.sr-imm--a-propos .coulisses__titre { font-size: var(--taille-titre-3); }
@media (max-width: 59.999em) {
  .sr-imm--a-propos .coulisses { display: flex; flex-direction: column; gap: var(--esp-6); align-items: stretch; }
  .sr-imm--a-propos .coulisses__image { aspect-ratio: 16 / 9; }
}

/* ---------- 9. Contact ---------- */
.sr-imm--a-propos .contact { padding: var(--marge-section) var(--marge-ecran) var(--esp-10); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--esp-5); row-gap: var(--esp-6); }
.sr-imm--a-propos .contact .phrase-titre { grid-column: 2 / span 7; font-size: var(--taille-titre-2); max-width: 20ch; }
.sr-imm--a-propos .contact__liens { grid-column: 2 / span 8; display: flex; flex-wrap: wrap; gap: var(--esp-3); }
@media (max-width: 59.999em) {
  .sr-imm--a-propos .contact { display: flex; flex-direction: column; align-items: stretch; }
  .sr-imm--a-propos .contact__liens { flex-direction: column; }
  .sr-imm--a-propos .contact__liens .bouton { width: 100%; min-height: var(--cible-confort); white-space: normal; }
}

/* ---------- 4 bis. Le montage : la plongée dans l'écran (v17.28) ----------
   Section épinglée (--ap-haut-plongee). Trois états posés par a-propos.js :
   --pl-s (zoom du bureau, 1 → S), --pl-tx/--pl-ty (le centre de l'écran vient au centre de la fenêtre),
   --pl-capture (0 → 1 : la capture Premiere prend le relais), --pl-range (0 → 1 : la capture se range à droite, le texte arrive). */
.sr-imm--a-propos { --ap-haut-plongee: 260vh; }
.sr-imm--a-propos .plongee { position: relative; --pl-s: 1; --pl-tx: 0px; --pl-ty: 0px; --pl-capture: 0; --pl-range: 0; }
html:not(.mouvement-reduit) .sr-imm--a-propos .plongee { height: var(--ap-haut-plongee); }
.sr-imm--a-propos .plongee__epingle { position: relative; overflow: clip; isolation: isolate; }
html:not(.mouvement-reduit) .sr-imm--a-propos .plongee__epingle { position: sticky; top: 0; height: 100vh; height: 100svh; }
.sr-imm--a-propos .plongee__scene { position: absolute; inset: 0; z-index: var(--plan-fond); perspective: 1600px; }
/* Le bureau : photo 3/2 qui couvre la fenêtre ; l'écran de gauche porte déjà la capture, nette, pour que le zoom entre dedans. */
.sr-imm--a-propos .plongee__bureau {
  position: absolute; left: 50%; top: 50%; width: max(100vw, calc(100svh * 1.5)); aspect-ratio: 3 / 2;
  translate: -50% -50%;
  transform-origin: calc(var(--ecran-x) + var(--ecran-l) / 2) calc(var(--ecran-y) + var(--ecran-h) / 2);
  transform: translate3d(var(--pl-tx), var(--pl-ty), 0) scale(var(--pl-s));
  will-change: transform;
  opacity: calc(1 - var(--pl-capture));
  -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent);
}
.sr-imm--a-propos .plongee__bureau picture, .sr-imm--a-propos .plongee__photo { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.sr-imm--a-propos .plongee__ecran { position: absolute; left: var(--ecran-x); top: var(--ecran-y); width: var(--ecran-l); height: var(--ecran-h); max-width: none; object-fit: cover; object-position: 0 0; border-radius: 0.2%; }
/* La capture plein écran, puis rangée à droite comme une plaque de verre inclinée */
.sr-imm--a-propos .plongee__capture {
  position: absolute; inset: 0; margin: 0; z-index: 1;
  opacity: var(--pl-capture);
  transform: translate3d(calc(var(--pl-range) * 19vw), calc(var(--pl-range) * 4vh), 0) scale(calc(1 - 0.46 * var(--pl-range))) rotateY(calc(var(--pl-range) * -7deg));
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
.sr-imm--a-propos .plongee__capture picture, .sr-imm--a-propos .plongee__capture img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 0 50%; }
.sr-imm--a-propos .plongee__capture img { border-radius: calc(var(--pl-range) * var(--rayon)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--or) calc(var(--pl-range) * 25%), transparent), var(--ombre-calque); }
.sr-imm--a-propos .plongee__texte {
  position: absolute; z-index: var(--plan-contenu); left: var(--marge-ecran); top: 50%; translate: 0 -50%;
  max-width: 28rem; opacity: var(--pl-range); transform: translateY(calc((1 - var(--pl-range)) * var(--montee)));
  text-shadow: var(--ombre-contact);
}
.sr-imm--a-propos .plongee__texte .phrase-titre { font-size: var(--taille-titre-3); max-width: 16ch; }
.sr-imm--a-propos .plongee__texte .travail__legende { margin-top: var(--esp-4); color: var(--encre-douce); max-width: 34ch; }
/* Mouvement réduit ou sans script : état final, posé (photo rangée en haut à droite, capture au centre, texte à gauche) */
html.mouvement-reduit .sr-imm--a-propos .plongee { --pl-capture: 1; --pl-range: 1; }
html.mouvement-reduit .sr-imm--a-propos .plongee__epingle { height: auto; min-height: 70vh; padding: var(--marge-section) 0; }
html.mouvement-reduit .sr-imm--a-propos .plongee__scene { position: relative; height: 60vh; }
@media (max-width: 59.999em) {
  .sr-imm--a-propos { --ap-haut-plongee: 220vh; }
  /* Écran étroit : la capture est une bande 16/9 au milieu de l'écran (le zoom remplit la largeur, pas la hauteur), qui descend sous le texte */
  .sr-imm--a-propos .plongee__capture { inset: 50% 0 auto 0; height: calc(100vw * 989 / 1919); translate: 0 -50%; transform: translate3d(0, calc(var(--pl-range) * 16vh), 0) scale(calc(1 - 0.08 * var(--pl-range))); }
  .sr-imm--a-propos .plongee__capture img { border-radius: var(--rayon-petit); }
  .sr-imm--a-propos .plongee__texte { top: calc(var(--ap-nav, 64px) + var(--esp-5)); translate: none; right: var(--marge-ecran); max-width: none; }
  .sr-imm--a-propos .plongee__texte .phrase-titre { font-size: var(--taille-titre-4); }
}

/* ---------- Capture agrandie (dialog natif) ---------- */
.sr-imm--a-propos .agrandi { width: min(96vw, 1800px); max-width: none; max-height: 94vh; padding: 0; margin: auto; border: 1px solid var(--filet-fort); border-radius: var(--rayon); background: var(--panneau); color: var(--encre); overflow: auto; }
.sr-imm--a-propos .agrandi::backdrop { background: var(--voile-fort); }
.sr-imm--a-propos .agrandi__barre { position: sticky; top: 0; left: 0; z-index: 1; display: flex; justify-content: flex-end; align-items: center; gap: var(--esp-4); padding: var(--esp-2) var(--esp-3); background: var(--panneau); }
.sr-imm--a-propos .agrandi__aide { display: none; font-size: var(--taille-mention); color: var(--encre-attenuee); margin-right: auto; }
.sr-imm--a-propos .agrandi__image { width: 100%; height: auto; }
@media (max-width: 59.999em) {
  .sr-imm--a-propos .agrandi { width: 100vw; max-height: 100svh; height: 100svh; border-radius: 0; border: 0; }
  .sr-imm--a-propos .agrandi__aide { display: block; }
  .sr-imm--a-propos .agrandi__barre { width: 100vw; padding-top: calc(var(--esp-2) + var(--sur-haut)); }
  .sr-imm--a-propos .agrandi__image { width: auto; max-width: none; height: calc(100svh - 64px - var(--sur-haut)); }
}
@media (prefers-reduced-motion: no-preference) { .sr-imm--a-propos .agrandi[open] { animation: ap-fondu var(--duree-courte) var(--ease-out); } }
@keyframes ap-fondu { from { opacity: 0; } }

/* Luciole : seulement au-dessus des zones immersives [data-luciole] (socle) ; les captures gardent la loupe. */
html.luciole-visible .sr-imm--a-propos .ecran-travail__image { cursor: zoom-in; }

/* Mobile : l'affiche portrait est taillée dans la scène (centre à 44 %) ; la vidéo garde le même cadrage. */
@media (max-width: 59.999em) {
  .sr-imm--a-propos :is(.ouverture__poster, .ouverture__video, .recompo__finale-poster, .recompo__finale-video) { object-position: 44% 50%; }
}
html.mouvement-reduit .sr-imm--a-propos .couches__aide { display: none; }

/* Mobile 4G lente : les sections hors écran ne sont mises en page qu'à l'approche. */
@media (max-width: 59.999em) {
  .sr-imm--a-propos > :is(.recit, .travail, .ia, .ecoute, .coulisses, .chiffres, .contact) { content-visibility: auto; contain-intrinsic-size: auto var(--ap-reserve-section, 900px); }   /* jamais sur les sections épinglées */
}
@media (forced-colors: active) {
  .sr-imm--a-propos :is(.ap-son, .bouton, .bouton-lecture) { border: 1px solid CanvasText; }
}

/* v17.25 : à la première visite, le bandeau cookies du site ne cache plus le titre ni « Lancer l’image animée »
   (--sr-bandeau = sa hauteur visible, publiée par base.js ; 0 dès qu'on a répondu). */
@media (max-width: 59.999em) {
  .sr-imm--a-propos .ouverture :is(.ouverture__texte, .bouton-lecture) { translate: 0 calc(-1 * var(--sr-bandeau, 0px)); transition: translate var(--duree-moyenne) var(--ease-out); }
}
/* Ordinateur : le bandeau (une boîte de 480 px) passe en bas à droite, loin du titre posé en bas à gauche. */
@media (min-width: 60em) {
  body.sr-page-about #srCookieBanner .sr-cookie-inner { margin: 0 0 0 auto; }
}