/* ============================================================
   experiences.css · page « Expériences interactives »
   ------------------------------------------------------------
   Trois projets en 3D. La page ne se lit pas comme une étude de
   cas : les visuels mènent, le texte vient par courtes reprises.
   D'où une mise en page qui sort de la colonne de 1180 px là où
   ça compte, et trois dispositifs qui reviennent :

     · la porte     · les trois univers bord à bord, cliquables
     · la traversée · une bande qui défile en travers de l'écran
     · la nuit      · un bloc sombre pour les captures de jeu

   Chaque visuel suit le patron de la page Peinture :
       figure.xp-fig > div.im > img   +   figcaption
   l'image est SEULE dans son .im, donc zoom.js se contente d'y
   poser sa classe au lieu d'insérer un bloc qui casserait les
   positions.
   ============================================================ */

/* ===== Sortir de la colonne =====
   body porte déjà overflow-x:hidden (base.css), rien ne dépasse. */
.xp-bleed{width:100vw;margin-inline:calc(50% - 50vw)}

/* ===== La figure de base ===== */
.xp-fig{margin:0}
.xp-fig .im{display:block}
.xp-fig img{display:block;width:100%;height:auto;border-radius:14px;
  box-shadow:0 18px 44px -18px color-mix(in srgb,var(--pc) 22%,rgba(18,26,32,.32))}
.xp-fig figcaption{margin-top:13px;font-size:13.5px;line-height:1.5;
  color:var(--on-night-faint)}
.xp-fig figcaption b{color:var(--on-night-soft);font-weight:500}

/* les schémas au trait vivent sur du blanc, comme partout sur le site */
.xp-fig.carte{background:#FFFFFF;border:1px solid color-mix(in srgb,var(--pc) 12%,rgba(28,28,38,.05));
  border-radius:24px;padding:clamp(20px,3.4vw,46px);box-shadow:var(--pj-card)}
.xp-fig.carte img{border-radius:10px;box-shadow:none}
.xp-fig.carte figcaption{text-align:center;margin-top:20px}

/* Un paragraphe qui suit un visuel : sans cette marge il se collait à
   la légende, et le vide tombait tout entier après lui. */
.xp-fig + .pj-prose{margin-top:clamp(34px,5vw,64px)}

/* ===== Les sous-titres ===== */
.xp-h3{max-width:var(--measure);margin:clamp(56px,8vw,110px) auto clamp(16px,2vw,24px);
  font-family:var(--title-font),serif;font-weight:400;font-style:italic;
  font-size:clamp(23px,2.9vw,36px);line-height:1.15;letter-spacing:-.01em;
  color:var(--on-night)}
.xp-h3::before{content:"";display:block;width:34px;height:2px;border-radius:2px;
  background:var(--pc);margin-bottom:clamp(14px,2vw,20px)}

/* ===== La ligne d'équipe ===== */
.xp-credit{max-width:var(--measure);margin:clamp(30px,4vw,44px) auto 0;
  padding-left:16px;border-left:2px solid color-mix(in srgb,var(--pc) 45%,transparent);
  font-size:14.5px;line-height:1.6;color:var(--on-night-soft)}
.xp-credit b{color:var(--on-night);font-weight:500}

.xp-lien{display:inline-flex;align-items:center;gap:9px;margin-top:18px;
  padding:12px 22px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--pc) 40%,rgba(28,28,38,.14));
  background:color-mix(in srgb,var(--pc) 9%,transparent);
  color:var(--on-night);text-decoration:none;font-size:15px;font-weight:500;
  transition:border-color .25s,background .25s}
.xp-lien:hover{border-color:var(--pc-ink);background:color-mix(in srgb,var(--pc) 18%,transparent)}
.xp-lien .ar{transition:transform .25s}
.xp-lien:hover .ar{transform:translate(3px,-3px)}


/* ============================================================
   1 · LES TROIS ÉCRANS
   Les trois univers sont visibles en même temps, mais un seul se
   regarde à la fois : celui qu'on survole s'élargit et son extrait
   se lance, les deux autres attendent repliés sur le côté. Chaque
   écran porte son ancre vers la partie qui lui correspond, donc
   l'ouverture sert aussi de sommaire.
   ============================================================ */
.xp-ecrans-wrap{position:relative;max-width:1280px;
  margin:clamp(30px,5vw,60px) auto 0;padding:0 clamp(20px,4vw,40px)}
.xp-ecr-cue{text-align:center;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--pc-ink);margin-bottom:14px}
.xp-ecr-cue .tap{display:none}
@media (hover:none){.xp-ecr-cue .sur{display:none}.xp-ecr-cue .tap{display:inline}}

/* La hauteur de la bande décide de tout le cadrage : les vignettes remplissent
   leur case, donc plus elles sont hautes par rapport à leur largeur, plus
   l'image est rognée sur les côtés et plus elle paraît zoomée. À 60vh on ne
   voyait que 84% de l'image sur l'écran ouvert et 19% sur les repliés. À 48vh
   on en voit 95% et 24%, et la vidéo est réduite au lieu d'être agrandie,
   donc plus nette. */
.xp-ecrans{display:flex;gap:12px;height:clamp(300px,48vh,470px)}
/* L'ouverture d'un écran est le geste principal de cette bande : à .85s
   elle passait si vite qu'on ne voyait pas l'écran s'élargir, seulement
   le résultat. 1.35s laisse le temps de comprendre que c'est le survol
   qui commande. L'année et le lien attendent que l'écran soit posé. */
.xp-ecr{position:relative;flex:1;border-radius:18px;overflow:hidden;cursor:pointer;
  background:#101018;box-shadow:0 26px 60px -28px rgba(28,28,38,.4);
  transition:flex 1.35s cubic-bezier(.3,.85,.25,1)}
.xp-ecr.open{flex:4.4}
.xp-ecr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.xp-ecr video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity 1s}
.xp-ecr.playing video,.xp-ecr.paused video{opacity:1}
.xp-ecr::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(rgba(10,10,18,0) 55%,rgba(10,10,18,.55))}
.xp-ecr:not(.open)::after{background:rgba(10,10,18,.34)}
.xp-ecr:not(.open):hover::after{background:rgba(10,10,18,.18)}
.xp-ecr:focus-visible{outline:3px solid var(--pc);outline-offset:-3px}

/* le nom bascule à la verticale quand l'écran est replié */
.xp-ecr-nm{position:absolute;z-index:2;left:50%;bottom:20px;transform:translateX(-50%);
  writing-mode:vertical-rl;rotate:180deg;
  font-family:var(--title-font),serif;font-weight:400;
  font-size:clamp(16px,1.6vw,21px);color:#fff;white-space:nowrap;
  text-shadow:0 1px 14px rgba(0,0,0,.5)}
.xp-ecr.open .xp-ecr-nm{writing-mode:horizontal-tb;rotate:0deg;left:22px;bottom:44px;transform:none;
  font-size:clamp(24px,2.6vw,38px)}
.xp-ecr-yr{position:absolute;z-index:2;left:22px;bottom:22px;
  font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;
  color:rgba(255,255,255,.85);opacity:0;transition:opacity .5s .55s}
.xp-ecr.open .xp-ecr-yr{opacity:1}

/* lecture et pause */
.xp-ecr-btn{position:absolute;z-index:3;right:14px;top:13px;
  width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;
  background:rgba(10,10,18,.5);backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;transition:opacity .35s,background .25s}
.xp-ecr.open .xp-ecr-btn{opacity:1;pointer-events:auto}
/* dans l'ouverture il se range à gauche de la pause, même taille */
.xp-ecr .xp-son{position:absolute;z-index:3;right:58px;top:13px;
  width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;color:#fff;
  background:rgba(10,10,18,.5);backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;transition:opacity .35s,background .25s}
.xp-ecr.open .xp-son{opacity:1;pointer-events:auto}
.xp-ecr .xp-son:hover{background:rgba(10,10,18,.75)}
.xp-ecr .xp-son svg{width:15px;height:15px;fill:currentColor;display:block}
.xp-ecr-btn:hover{background:rgba(10,10,18,.75)}
.xp-ecr-btn span{display:block;width:11px;height:12px;background:#fff;
  clip-path:polygon(0 0,42% 0,42% 100%,0 100%,0 0,58% 0,58% 0,100% 0,100% 100%,58% 100%)}
.xp-ecr.paused .xp-ecr-btn span{clip-path:polygon(6% 0,100% 50%,6% 100%)}
.xp-ecr-big{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%) scale(.85);
  width:58px;height:58px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;
  background:rgba(255,255,255,.92);box-shadow:0 12px 34px rgba(0,0,0,.4);
  opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}
.xp-ecr.open.paused .xp-ecr-big{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.xp-ecr-big span{display:block;width:15px;height:17px;background:#1c1c26;
  clip-path:polygon(8% 0,100% 50%,8% 100%);margin-left:3px}

/* l'ancre vers la partie correspondante : elle ne vit que sur l'écran
   ouvert, donc elle pointe toujours vers ce qu'on regarde */
.xp-ecr-go{position:absolute;z-index:3;right:16px;bottom:20px;
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:#1c1c26;
  background:rgba(255,255,255,.93);border-radius:999px;padding:11px 17px;
  box-shadow:0 10px 26px -10px rgba(0,0,0,.5);
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .5s .55s,transform .5s .55s,background .25s}
.xp-ecr.open .xp-ecr-go{opacity:1;transform:none;pointer-events:auto}
.xp-ecr-go:hover{background:#fff}
.xp-ecr-go .fl{font-size:14px;transition:transform .25s}
.xp-ecr-go:hover .fl{transform:translateY(2px)}

/* La barre de lecture, tout en bas. Elle faisait deux pixels de blanc à
   18% sur un champ de blé clair : autant dire rien. C'est pourtant le seul
   signe qui dise « ça tourne » sans dépendre de ce que montre l'image, et
   sur un plan aussi calme que Safe Place c'est lui qui porte tout. Fond
   sombre pour que le trait blanc tienne aussi sur les images claires. */
.xp-ecr-prog{position:absolute;z-index:3;left:0;right:0;bottom:0;height:3px;
  background:rgba(10,10,18,.38);opacity:0;transition:opacity .4s;cursor:pointer}
.xp-ecr-prog::before{content:"";position:absolute;left:0;right:0;bottom:0;height:15px}
.xp-ecr.open .xp-ecr-prog:hover{background:rgba(10,10,18,.55)}
.xp-ecr.open .xp-ecr-prog{opacity:1}
.xp-ecr-prog i{display:block;height:100%;width:100%;background:#fff;
  box-shadow:0 0 10px rgba(255,255,255,.85);
  transform-origin:left;transform:scaleX(var(--p,0))}

/* tablette : mêmes colonnes, proportions resserrées */
@media (max-width:1100px){
  .xp-ecrans{height:clamp(280px,44vh,400px);gap:10px}
  .xp-ecr.open{flex:3.4}
  .xp-ecr.open .xp-ecr-nm{font-size:clamp(21px,3.2vw,30px);left:18px;bottom:40px}
  .xp-ecr-yr{left:18px;bottom:19px;font-size:12px}
}
/* mobile : la pile, un écran ouvert à la fois */
@media (max-width:760px){
  .xp-ecrans-wrap{padding:0 18px}
  .xp-ecrans{flex-direction:column;height:auto;gap:9px}
  /* ⚠️ il faut remettre flex à none SUR .open aussi : la règle tablette
     `.xp-ecr.open{flex:3.4}` est plus spécifique, et en colonne le
     flex-basis écrase la hauteur (l'écran ouvert tombait à 0 px) */
  .xp-ecr,.xp-ecr.open{flex:none}
  .xp-ecr{height:66px;border-radius:15px;
    transition:height 1.15s cubic-bezier(.3,.85,.25,1)}
  .xp-ecr.open{height:min(54vh,400px)}
  .xp-ecr:not(.open) img{object-position:center 38%}
  .xp-ecr-nm{writing-mode:horizontal-tb;rotate:0deg;left:17px;bottom:auto;top:50%;
    transform:translateY(-50%);font-size:17px}
  .xp-ecr.open .xp-ecr-nm{top:auto;bottom:38px;transform:none;font-size:25px;left:17px}
  .xp-ecr-yr{left:17px;bottom:17px}
  .xp-ecr-btn{width:34px;height:34px;right:11px;top:11px}
  .xp-ecr .xp-son{width:34px;height:34px;right:51px;top:11px}
  .xp-ecr-big{width:50px;height:50px}
  .xp-ecr-go{right:13px;bottom:16px;font-size:11.5px;padding:10px 15px}
  /* replié : un chevron discret annonce qu'on peut ouvrir */
  .xp-ecr:not(.open)::before{content:"";position:absolute;z-index:2;right:20px;top:50%;
    width:8px;height:8px;margin-top:-6px;border-right:2px solid rgba(255,255,255,.75);
    border-bottom:2px solid rgba(255,255,255,.75);transform:rotate(45deg)}
  .xp-ecr-cue{font-size:12px;margin-bottom:11px}
}


/* ============================================================
   2 · LA TRAVERSÉE
   La bande reste collée à l'écran pendant qu'on descend, et les
   vues défilent en travers. C'est le seul dispositif qui fait
   sentir ce que ces projets ont en commun : on les parcourt.
   La hauteur du conteneur est posée par js/experiences.js, elle
   dépend de la largeur réelle de la piste.
   Sous 900 px et en mode « moins d'animations », la bande
   redevient un simple carrousel qu'on balaie au doigt.
   ============================================================ */
.xp-trav{position:relative;height:var(--h,300vh);margin-top:clamp(40px,6vw,80px)}
.xp-trav-scene{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  gap:clamp(12px,2.2vh,24px);padding:74px 0 clamp(20px,3.4vh,38px)}
/* La transition est l'amortisseur de la bande. Le script écrit une position
   cible à chaque événement de défilement, et la molette avance par crans :
   sans elle, la bande saute d'un cran à l'autre. Avec, elle glisse vers la
   cible et les paliers deviennent de vrais arrêts au lieu de blocages secs.
   Même principe que l'aperçu qui suit le curseur sur l'accueil. */
.xp-piste{--ecart:clamp(18px,3vw,48px);
  display:flex;align-items:flex-start;gap:var(--ecart);
  padding-inline:clamp(20px,6vw,96px);will-change:transform;
  transition:transform .55s cubic-bezier(.22,.61,.24,1)}
/* L'air après le dernier lieu : juste ce qu'il faut pour que la bande
   s'arrête sur la marge du site, alignée à droite avec les visuels de
   la colonne de lecture. ⚠️ Une marge intérieure de fin ne suffirait
   pas : Chrome ne la compte pas dans scrollWidth, et le script mesure
   donc la position réelle du dernier élément (voir js/experiences.js). */
.xp-fin{flex:0 0 auto;
  /* l'écart de la piste s'ajouterait à la cale : on l'annule, pour que
     la dernière vue s'arrête pile sur le bord des visuels de la page */
  margin-left:calc(-1 * var(--ecart));
  width:calc(max(0px,(100vw - 1180px) / 2) + clamp(20px,5vw,64px))}
/* les paysages prennent presque tout l'écran : c'est la traversée qui
   doit immerger, pas une rangée de vignettes */
/* Ces captures portent l'interface de Safe Place en bas de l'image (le nom du
   lieu, la barre de progression, le son) : c'est là qu'il ne faut pas rogner.
   La hauteur commande et le rapport est déclaré, donc la largeur en découle
   au pixel près. `contain` laissait une bande claire sous l'image dès qu'une
   source ne faisait pas exactement 16/9 (la cascade fait 1079 px de haut) :
   `cover` avec l'ancrage en bas remplit toujours le cadre et garde la barre. */
.xp-vue{flex:0 0 auto;max-width:min(86vw,1220px)}
.xp-vue img{display:block;height:min(62svh,580px);width:auto;max-width:min(86vw,1220px);
  aspect-ratio:16/9;object-fit:cover;object-position:center bottom;border-radius:18px}
.xp-vue figcaption{margin-top:14px;max-width:52ch}

/* le pied de la bande : son nom à gauche, la jauge d'avancement à
   droite. C'est la barre de progression de Safe Place, rejouée. */
/* la jauge se pose juste sous les vues au lieu d'être plaquée en bas :
   collée au groupe, elle se lit comme la barre de l'expérience elle-même.
   Elle s'arrête à droite là où s'arrêtent les visuels de la page, comme
   la dernière vue de la bande : les trois bords se répondent. */
.xp-trav-pied{display:flex;align-items:center;gap:clamp(14px,2.5vw,28px);
  padding-left:clamp(20px,6vw,96px);
  padding-right:calc(max(0px,(100vw - 1180px) / 2) + clamp(20px,5vw,64px))}
.xp-trav-lbl{margin:0;flex:0 0 auto;font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:600;color:var(--pc-ink)}
.xp-jauge{flex:1;height:2px;border-radius:2px;
  background:color-mix(in srgb,var(--on-night) 12%,transparent)}
.xp-jauge i{display:block;height:100%;border-radius:2px;background:var(--pc);
  transform-origin:left;transform:scaleX(var(--p,0))}

@media (max-width:900px),(prefers-reduced-motion:reduce){
  .xp-trav{height:auto!important}
  .xp-trav-scene{position:static;height:auto;overflow:visible;padding:0;gap:16px}
  .xp-piste{transform:none!important;transition:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    padding-block:4px 10px;scroll-padding-inline:clamp(20px,7vw,110px)}
  .xp-piste::-webkit-scrollbar{display:none}
  .xp-vue{width:min(84vw,460px);scroll-snap-align:center}
  .xp-vue img{height:auto}
  .xp-jauge{display:none}
  /* la bande devient un carrousel : on le dit, sinon rien n'indique
     qu'il reste des vues à droite. Le libellé suit la langue de la page. */
  .xp-trav-lbl::after{content:" · à faire glisser";letter-spacing:.08em;
    color:var(--on-night-faint);font-weight:500}
  html[lang="en"] .xp-trav-lbl::after{content:" · swipe to see more"}
}


/* ============================================================
   3 · LA NUIT
   Mission cadeaux se joue dans un appartement éteint. Sur le
   crème du site, les captures se ressemblaient toutes ; sur du
   noir elles retrouvent leurs bougies.
   ============================================================ */
.xp-nuit{background:radial-gradient(120% 80% at 50% 0%,#181d2b 0%,#0d1018 68%);
  padding:clamp(56px,8vw,110px) 0 clamp(60px,9vw,120px);
  margin-top:clamp(50px,7vw,96px)}
.xp-nuit-in{max-width:1180px;margin:0 auto;padding:0 clamp(20px,5vw,64px)}
.xp-nuit .xp-fig img{box-shadow:0 26px 60px -22px rgba(0,0,0,.75)}
.xp-nuit .xp-fig figcaption{color:rgba(255,255,255,.55)}
.xp-nuit .xp-fig figcaption b{color:rgba(255,255,255,.86)}
.xp-nuit-lbl{margin:0 0 clamp(24px,3.5vw,40px);font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:600;color:color-mix(in srgb,var(--pc) 78%,#fff)}
/* Les scènes de jeu : une par rangée, en grand, la légende posée dans
   l'espace libre à côté. En vignettes sur trois colonnes, la pénombre
   de l'appartement ne montrait plus rien. */


/* ============================================================
   4 · COMPOSITIONS
   ============================================================ */
/* La mosaïque : douze colonnes, des largeurs inégales. Une grille
   régulière donnait une planche contact, pas une page. */
.xp-mosa{display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(16px,2.4vw,34px) clamp(14px,2vw,28px);
  align-items:start;margin-top:clamp(34px,5vw,64px)}
.xp-mosa > .m7{grid-column:span 7}
.xp-mosa > .m5{grid-column:span 5}
.xp-mosa > .m6{grid-column:span 6}
.xp-mosa > .m8{grid-column:2/10}
.xp-mosa > .m9{grid-column:4/12}
@media (max-width:760px){
  .xp-mosa > *{grid-column:1/-1!important}
}

/* Les rendus de l'appartement : le plan d'abord, en pleine colonne
   puisque c'est lui qui commande, puis le salon et le bureau presque
   aussi larges, l'un calé à gauche et l'autre à droite. Une vignette
   sur trois colonnes ne montrait rien de la modélisation. */
.xp-compo{display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(20px,3.4vw,52px) clamp(14px,2vw,26px);
  align-items:start;margin-top:clamp(34px,5vw,64px)}
/* Le plan et le salon côte à côte, et non l'un sous l'autre. Ils racontent
   la même chose à deux échelles, le plan d'abord parce que c'est lui qui
   commande, et les mettre en regard économise un demi-écran de défilement. */
.xp-compo > .c1{grid-column:1/8}
.xp-compo > .c2{grid-column:8/13;align-self:center}
.xp-compo > .c3{grid-column:3/13}
@media (max-width:760px){
  .xp-compo > *{grid-column:1/-1!important}
}

/* L'affiche. Elle tenait la colonne gauche d'une grille à deux colonnes,
   et la colonne droite était vide : l'affiche se retrouvait poussée à
   gauche avec 58 % de blanc en face. Elle est seule, donc elle se centre,
   à une largeur qui laisse lire l'accroche sans écraser la page. */
.xp-aff{margin-top:clamp(34px,5vw,64px)}
.xp-aff > .xp-fig{max-width:min(460px,74%);margin-inline:auto}
/* Les deux détails qui suivent : un morceau d'interaction et un morceau
   de décor, côte à côte, calés sur leur milieu. */
/* Un visuel seul, centré. Sa largeur est bornée à ce que l'image sait
   donner : au-delà, on agrandit du flou. */
/* la bande-annonce, elle, prend toute la colonne */
.xp-cine{margin-top:clamp(34px,5vw,64px)}
.xp-cine figcaption{max-width:var(--measure);margin-inline:auto;text-align:center}


/* ============================================================
   5 · LES EXTRAITS VIDÉO
   Huit secondes en boucle, sans son. Le fichier n'est chargé que
   quand l'extrait entre dans l'écran (preload="none" + data-src
   posé par le script), il s'arrête dès qu'on l'a dépassé, et le
   bouton reste maître.
   ============================================================ */
/* Le fond de l'encadré est la couleur vers laquelle l'image s'efface en fin
   de boucle. Un noir bleuté convenait à des extraits sombres, pas à une
   prairie au couchant : chaque extrait porte donc la sienne, prélevée sur sa
   première et sa dernière image, pour que le fondu lie au lieu de trouer. */
.xp-video{position:relative;border-radius:16px;overflow:hidden;cursor:pointer;
  background:var(--fondu,#0E1424);
  box-shadow:0 26px 60px -22px rgba(8,10,18,.6)}
.xp-video video{display:block;width:100%;height:auto;background:#0E1424;pointer-events:none}
.xp-video.grand video{max-height:78svh;object-fit:cover}
.xp-video:focus-visible{outline:3px solid var(--pc);outline-offset:3px}

/* les deux commandes, rangées ensemble en bas à droite */
.xp-vctrl{position:absolute;right:14px;bottom:14px;z-index:2;display:flex;gap:8px}
.xp-vbtn,.xp-vfull,.xp-vctrl .xp-son{
  width:42px;height:42px;display:flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;cursor:pointer;
  background:rgba(14,20,36,.62);color:#fff;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:background .2s,transform .2s}
.xp-vbtn:hover,.xp-vfull:hover,.xp-vctrl .xp-son:hover{background:rgba(14,20,36,.88);transform:scale(1.06)}
.xp-vbtn svg,.xp-vfull svg,.xp-vctrl .xp-son svg{width:15px;height:15px;fill:currentColor;display:block}
.xp-vbtn .i-pause{display:block}
.xp-vbtn .i-play{display:none;margin-left:2px}
.xp-vbtn[aria-pressed="true"] .i-pause{display:none}
.xp-vbtn[aria-pressed="true"] .i-play{display:block}

/* Le son : coupé au départ, rendu d'un clic. Les deux dessins vivent dans le
   même bouton et c'est aria-pressed qui décide lequel se montre, comme pour
   la lecture et la pause juste au-dessus. */
/* ⚠️ Les règles générales `.xp-vctrl .xp-son svg` et `.xp-ecr .xp-son svg`
   posent display:block sur les deux dessins, et elles l'emportaient sur un
   simple `.xp-son .i-on` : à nombre de classes égal, le sélecteur qui nomme
   aussi la balise gagne. D'où les deux haut-parleurs visibles en même temps.
   On nomme donc la balise ici aussi. */
.xp-son svg.i-on{display:none}
.xp-son svg.i-off{display:block}
.xp-son[aria-pressed="true"] svg.i-on{display:block}
.xp-son[aria-pressed="true"] svg.i-off{display:none}

/* La barre de lecture, calquée sur celle de l'ouverture. Sans repère, un
   extrait en boucle donne l'impression de tourner indéfiniment et on ne sait
   pas s'il vaut la peine d'attendre. Sur un montage elle mesure l'ensemble,
   pas le morceau en cours. Fond sombre pour tenir sur les images claires. */
.xp-vprog{position:absolute;z-index:2;left:0;right:0;bottom:0;height:3px;
  background:rgba(10,10,18,.38);cursor:pointer}
/* trois pixels, c'est trop fin à viser : on étend la zone de clic vers le
   haut sans rien montrer de plus */
.xp-vprog::before{content:"";position:absolute;left:0;right:0;bottom:0;height:15px}
.xp-vprog:hover{background:rgba(10,10,18,.55)}
/* ⚠️ La barre avançait par sa largeur : à chaque image le navigateur refaisait
   la mise en page puis repeignait le halo, d'où les à-coups. Une mise à
   l'échelle horizontale ne coûte rien, c'est la méthode déjà employée par la
   jauge de la traversée. */
.xp-vprog i{display:block;height:100%;width:100%;background:#fff;
  box-shadow:0 0 10px rgba(255,255,255,.85);
  transform-origin:left;transform:scaleX(var(--p,0))}

/* L'étiquette, en haut à gauche, la même sur les trois extraits. Séparés
   par plusieurs écrans, ils passaient pour trois curiosités isolées ; la
   pastille les rassemble en une famille qu'on reconnaît à la deuxième
   rencontre. Reprise des pastilles de l'accueil, au pixel près. */
.xp-vtag{position:absolute;left:14px;top:14px;z-index:2;
  padding:5px 11px;border-radius:999px;
  font-size:12.5px;font-weight:600;letter-spacing:.04em;
  color:#fff;background:rgba(14,20,36,.62);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  pointer-events:none}

/* Le gros bouton de lecture, au milieu. Au repos, l'extrait s'arrête sur
   un plan fixe qui ressemble aux images voisines : rien ne dit qu'il y a
   du mouvement dessous. Une icône discrète dans un coin ne suffisait pas,
   le rond blanc est le seul signal que tout le monde lit. */
.xp-vplay{position:absolute;left:50%;top:50%;z-index:2;
  width:56px;height:56px;margin:-28px 0 0 -28px;
  display:flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;cursor:pointer;
  background:#fff;color:#0E1424;
  box-shadow:0 12px 30px -8px rgba(8,10,18,.55);
  transition:opacity .28s ease,transform .28s ease}
/* le triangle n'est pas centré optiquement dans son carré : sans ce
   décalage il paraît collé au bord gauche du rond */
.xp-vplay svg{width:19px;height:19px;fill:currentColor;display:block;margin-left:3px}
.xp-vplay:hover{transform:scale(1.07)}
.xp-vplay:focus-visible{outline:3px solid var(--pc);outline-offset:3px}
/* Une fois la lecture partie, le rond n'a plus rien à dire : il s'efface
   et rend le clic au conteneur, qui met en pause. Il revient au même
   endroit dès qu'on s'arrête. */
.xp-video.playing .xp-vplay{opacity:0;transform:scale(.86);pointer-events:none}
/* Sauf quand il a le focus au clavier : on ne fait pas disparaître sous
   les doigts le bouton que la personne vient d'activer, elle n'aurait
   plus rien à viser pour remettre en pause. */
.xp-video.playing .xp-vplay:focus-visible{opacity:1;transform:none;pointer-events:auto}

/* en plein écran, l'extrait se pose au milieu du noir et garde ses
   commandes : le recadrage de la version « grand » ne vaut plus rien
   quand la fenêtre fait toute la place */
.xp-video:fullscreen{display:flex;align-items:center;justify-content:center;
  background:#08090f;border-radius:0;box-shadow:none;cursor:default}
/* ⚠️ width:auto laissait l'extrait à sa taille d'origine, 960 px de
   large au milieu d'un écran noir : le plein écran ne grandissait
   rien. Il faut lui donner toute la place et laisser `contain` gérer
   les bandes. */
.xp-video:fullscreen video,
.xp-video.grand:fullscreen video{width:100%;height:100%;
  max-width:none;max-height:none;object-fit:contain}
.xp-video:fullscreen .xp-vctrl{right:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,32px)}
.xp-video:fullscreen .xp-vtag{left:clamp(16px,3vw,32px);top:clamp(16px,3vw,32px)}

/* ============================================================
   6 · LA CHUTE
   ============================================================ */
.xp-chute{max-width:var(--measure);margin:0 auto;
  padding:clamp(28px,4vw,42px) 0 0;border-top:1px solid var(--night-line)}
.xp-chute p{font-size:clamp(16.5px,1.5vw,19.5px);line-height:1.65;color:var(--on-night)}
.xp-chute p + p{margin-top:1em;font-size:clamp(15px,1.3vw,17px);color:var(--on-night-soft)}


/* ============================================================
   7 · LE PARCOURS ANNOTÉ (Mamie Danger)
   Le téléphone reste collé à l'écran pendant qu'on descend et les
   six écrans s'enchaînent en fondu, comme le parcours d'Affiliation.
   Chaque écran porte ses repères : un point sur l'élément, un trait
   de rappel, et le libellé au-delà du bord de l'appareil, tous
   alignés sur la même gouttière comme sur une planche annotée.
   Les libellés vivent dans le HTML (data-rep) : le script sert les
   deux langues sans rien connaître du texte.
   ============================================================ */
.xp-parc{position:relative}
.xp-parc-scene{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  display:flex;align-items:center;
  /* la barre du site fait 124 px de haut au repos et flotte au-dessus :
     on la dégage en haut, et on rend autant d'air en bas que la hauteur
     le permet, pour que la scène tombe au milieu de l'écran et pas dans
     son tiers supérieur */
  padding:124px 0 clamp(24px,11svh,108px)}
.xp-parc-in{max-width:1180px;margin:0 auto;width:100%;
  padding-inline:clamp(20px,5vw,64px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(40px,6vw,90px);align-items:center}

/* Pas de cadre d'appareil : la capture se suffit, comme partout ailleurs
   sur le site. Un arrondi, une ombre douce, et c'est tout. */
.xp-tel{position:relative}
/* La largeur se déduit de la hauteur : une capture de téléphone est
   1,67 fois plus haute que large, et c'est la hauteur qui manque. Sans
   ça la scène dépassait de l'écran et passait sous la barre du site.
   Le plafond de 420 px est celui de la netteté : au-delà, l'export en
   1600 px de large ne suit plus sur un écran à double densité. */
.xp-scene-tel{justify-self:center;position:relative;width:min(100%,420px,40svh)}
.xp-vitre{position:relative;aspect-ratio:820/1366;border-radius:20px;overflow:hidden;
  background:#0E1424;
  box-shadow:0 26px 60px -22px color-mix(in srgb,var(--pc) 22%,rgba(18,26,32,.42))}
/* chaque écran a son propre enveloppe : le zoom du site se contente d'y
   poser sa classe au lieu d'insérer un bloc qui casserait l'empilement */
/* ⚠️ L'écran qui arrive part LÉGÈREMENT AGRANDI, jamais réduit : à
   scale(.985) il laissait voir le fond de la vitre tout autour de lui
   pendant le fondu, et un liseré sombre clignotait à chaque changement.
   En partant de 1,015 il couvre toujours le cadre, et `overflow:hidden`
   se charge du surplus. */
.xp-vitre .im{position:absolute;inset:0;opacity:0;transform:scale(1.015);
  transition:opacity .5s cubic-bezier(.3,.6,.3,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.xp-vitre .im.on{opacity:1;transform:none;z-index:1}
.xp-vitre img{display:block;width:100%;height:100%;object-fit:cover;cursor:zoom-in}
.xp-parc-num{position:absolute;left:-15px;top:-15px;z-index:7;
  width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--pc);color:#2a2205;font-weight:700;font-size:13.5px;
  box-shadow:0 10px 24px -8px rgba(18,26,32,.4)}

/* le calque des repères, posé sur le téléphone mais hors de la vitre,
   qui rogne tout ce qui la déborde */
.xp-calque{position:absolute;inset:0;z-index:6;pointer-events:none}
/* Le fondu était à 450 ms, et les repères arrivaient en plus l'un après
   l'autre : il fallait attendre pour lire. Ils se posent maintenant ensemble,
   en 220 ms, et le trait les suit sans traîner. */
.xp-rep{position:absolute;left:0;right:0;display:flex;align-items:center;
  transform:translateY(-50%);opacity:0;transition:opacity .22s ease}
.xp-rep.on{opacity:1}
.xp-rep .creux{flex:0 0 auto;width:var(--x)}
.xp-rep i{flex:0 0 auto;width:11px;height:11px;border-radius:50%;background:var(--pc);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--pc) 30%,transparent)}
.xp-rep .fil{flex:0 0 auto;height:1px;width:0;
  background:color-mix(in srgb,var(--pc) 72%,transparent);
  transition:width .28s cubic-bezier(.2,.8,.2,1)}
.xp-rep.on .fil{width:calc(100% - var(--x) + 18px)}
.xp-rep .lbl{flex:0 0 auto;white-space:nowrap;font-size:13px;font-weight:600;
  letter-spacing:.02em;color:var(--on-night);padding-left:9px}
.xp-rep.g{flex-direction:row-reverse}
.xp-rep.g .creux{width:calc(100% - var(--x))}
.xp-rep.g.on .fil{width:calc(var(--x) + 18px)}
.xp-rep.g .lbl{padding-left:0;padding-right:9px}

.xp-parc-dit .k{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:var(--pc-ink);margin:0 0 12px}
.xp-parc-dit .n{font-family:var(--title-font),serif;font-size:clamp(23px,2.6vw,32px);
  line-height:1.15;color:var(--on-night);margin:0 0 10px;min-height:1.15em}
.xp-parc-dit .t{font-size:16px;line-height:1.65;color:var(--on-night-soft);margin:0;
  max-width:40ch;min-height:3.3em}
.xp-parc-note{margin:18px 0 0;font-size:13px;color:var(--on-night-faint);font-style:italic}

/* la pellicule : elle dit où l'on en est et emmène où l'on veut */
.xp-film{display:flex;gap:clamp(8px,1vw,13px);margin-top:24px}
.xp-film button{padding:0;border:0;background:none;cursor:pointer;flex:1 1 0;min-width:0;max-width:96px;
  border-radius:12px;line-height:0;position:relative;
  filter:saturate(.6) brightness(.95);opacity:.6;
  transition:opacity .25s,filter .25s,transform .3s cubic-bezier(.2,.8,.2,1)}
.xp-film button img{width:100%;height:auto;border-radius:12px;display:block;
  box-shadow:0 10px 24px -10px rgba(18,26,32,.45)}
.xp-film button::after{content:"";position:absolute;inset:0;border-radius:12px;
  box-shadow:inset 0 0 0 0 var(--pc);transition:box-shadow .25s}
.xp-film button:hover,.xp-film button:focus-visible{opacity:1;filter:none;transform:translateY(-6px);outline:none}
.xp-film button[aria-current="true"]{opacity:1;filter:none;transform:translateY(-8px)}
.xp-film button[aria-current="true"]::after{box-shadow:inset 0 0 0 2.5px var(--pc)}

/* Sur tablette la scène passe en une colonne : le téléphone se retrouve
   au milieu, avec de la place des deux côtés, donc les libellés
   continuent de sortir de l'appareil. Sous 700 px il n'y a plus de marge
   du tout et les repères disparaissent : la carte sous le téléphone dit
   déjà l'essentiel. */
/* Sur une fenêtre étroite tout doit tenir entre la barre du site et le
   bas de l'écran. Plutôt que de deviner une largeur qui rentrera, on
   empile en colonne et on donne au visuel TOUTE la hauteur qui reste
   une fois la carte servie : c'est la hauteur qui commande, la largeur
   se déduit du format de la capture. Elle ne dépasse jamais 340 px,
   au-delà desquels l'export en 820 px commencerait à se voir. */
@media (max-width:900px){
  .xp-parc-scene{padding:124px 0 20px;align-items:stretch}
  .xp-parc-in{display:flex;flex-direction:column;gap:14px;height:100%}
  .xp-scene-tel{flex:1 1 0;min-height:0;width:auto;display:flex;justify-content:center}
  .xp-tel{height:100%;display:flex}
  .xp-vitre{height:100%;width:auto;max-width:100%}
  .xp-parc-dit{flex:0 0 auto}
  .xp-parc-num{left:auto;right:calc(50% + 2px);top:-13px;width:38px;height:38px;font-size:12.5px}
  .xp-parc-dit .k{margin-bottom:7px}
  .xp-parc-dit .n{font-size:clamp(21px,5vw,26px);margin-bottom:6px}
  .xp-parc-dit .t{min-height:0;font-size:15px}
  .xp-film{margin-top:14px;gap:6px}
  .xp-film button{max-width:56px}
  .xp-parc-note{margin-top:10px;font-size:13px}
}
/* sous 820 px la barre du site se compacte (base.css) : la scène peut
   remonter d'autant */
@media (max-width:820px){
  .xp-parc-scene{padding-top:84px}
}
@media (max-width:700px){
  .xp-calque{display:none}
}
@media (prefers-reduced-motion:reduce){
  .xp-vitre img,.xp-rep,.xp-rep .fil,.xp-film button{transition:none}
}


/* ===== Glissement au défilement, repris de la page Peinture ===== */
[data-plx]{will-change:transform}

@media (prefers-reduced-motion:reduce){
  .xp-vbtn,.xp-vplay,.xp-son,.xp-ecr,.xp-ecr video,.xp-ecr-go{transition:none}
  .xp-vbtn:hover,.xp-vplay:hover{transform:none}
}

/* Un recadrage pris à l'échelle 1 dans une capture 1920 x 1080 : au-delà de
   sa largeur d'origine il pixellise, et le zoom ne faisait qu'agrandir le
   défaut. On le montre à sa taille, centré. */
/* Le signe d'interaction est recadré depuis le jardin, en bande large : il
   prend la même largeur que la vidéo qui le suit, sinon les deux figures se
   décalent l'une par rapport à l'autre et la colonne se met à zigzaguer. */
.xp-natif{margin-inline:auto}
.xp-natif img{width:100%;height:auto}

/* Le rappel des flèches, au pied de la traversée. Personne ne devine qu'une
   bande collée au défilement se pilote aussi au clavier : il faut le dire,
   discrètement, à l'endroit où l'on regarde déjà la progression. */
.xp-trav-cle{margin:0;flex:0 0 auto;display:flex;align-items:center;gap:8px;
  font-size:13px;color:var(--on-night-faint);white-space:nowrap;
  opacity:0;transition:opacity .4s ease}
.xp-trav-scene.collee .xp-trav-cle{opacity:1}
.xp-trav-fl{font-size:13px;letter-spacing:.06em;color:var(--pc-ink);font-weight:600}
@media (max-width:900px),(prefers-reduced-motion:reduce){
  .xp-trav-cle{display:none}
}

/* Les repères d'accroche de la traversée : invisibles, sans épaisseur, posés
   à la hauteur de défilement où chaque paysage est exactement en place. Le
   navigateur aimante la fin d'un geste dessus. En « proximity » et non en
   « mandatory » : un long geste doit pouvoir traverser toute la bande sans
   être retenu à chaque paysage. */
html{scroll-snap-type:y proximity}
.xp-trav-marques{position:absolute;inset:0;pointer-events:none}
.xp-trav-marques i{position:absolute;left:0;width:1px;height:1px;scroll-snap-align:start}
@media (max-width:900px),(prefers-reduced-motion:reduce){
  html{scroll-snap-type:none}
  .xp-trav-marques{display:none}
}

/* Posée par experiences.js pendant qu'une bande horizontale occupe l'écran :
   le glissement du pavé tactile pilote la bande au lieu de faire revenir en
   arrière. Elle se retire dès que la bande est passée, donc le geste de
   navigation reste disponible partout ailleurs sur le site. */
html.bande-horizontale,
html.bande-horizontale body{overscroll-behavior-x:none}