/* =============================================================
   UNIVERS.CSS  ·  compléments de la DA « carnet de l'atelier » :
   barre d'achat flottante (en bas à droite sur ordinateur),
   cartes projets, galerie des résultats de la formation.
   ============================================================= */

/* ---------- Barre d'achat flottante (ordinateur) ---------- */
@media (min-width: 861px) {
  .sbar {
    display: flex; left: auto; right: 24px; bottom: 24px; width: auto; max-width: 480px; gap: 18px;
    padding: 10px 10px 10px 18px; background: var(--white); color: var(--ink);
    border: 1px solid var(--ink); box-shadow: 0 2px 0 var(--ink); border-radius: 6px;
    transform: translateY(160%);
  }
  .sbar.is-on { transform: none; }
  .sbar-t { color: var(--ink-2); }
  .sbar-t b { color: var(--ink); font-size: 16px; }
  .sbar-t b small { color: var(--ink-2); }
}
.sbar-t .sbar-n { display: block; font: 700 14px/1.25 var(--f-sans); color: inherit; }

/* ---------- Projets ---------- */
.service-card h3 .service-arrow { position: static; order: 0; }
.service-card .private-overlay { margin-top: -2px; }
.service-card .private-desc { color: var(--ink-2); font-size: 14.5px; line-height: 1.45; }
.service-mockup img[src*="pesto"] { object-fit: cover; }

/* ---------- Résultats : l'exposition ----------
   Un objet détouré flotte devant un mot géant ; au défilement, les
   cinq salles glissent à l'horizontale et le fond change de couleur. */
.xp { --bg: #15181D; --fg: #F4F4F0; --acc: #FFC81E; background: var(--bg); color: var(--fg); position: relative; transition: background-color 650ms cubic-bezier(.2,.7,.2,1), color 650ms cubic-bezier(.2,.7,.2,1); }
.xp-intro { padding-top: clamp(72px, 10vw, 140px); padding-bottom: clamp(24px, 4vw, 48px); }
.xp .k { color: var(--fg); opacity: .7; }
.xp-h { font: 700 clamp(2.6rem, 7.4vw, 7.2rem)/.94 var(--f-sans); letter-spacing: -.05em; margin: 18px 0 0; max-width: 12em; text-wrap: balance; }
.xp-h em { font: italic 400 1.04em/1 var(--f-serif); letter-spacing: -.03em; color: var(--acc); background: none; padding: 0; }
.xp-lead { margin: 26px 0 0; max-width: 34em; font: 400 clamp(1.05rem, 1.4vw, 1.25rem)/1.5 var(--f-serif); opacity: .78; }
.xp-note { margin: 0; padding-top: 20px; padding-bottom: clamp(56px, 7vw, 96px); font: italic 400 14px/1.5 var(--f-serif); opacity: .6; }

.xp-p { position: relative; display: grid; place-items: center; overflow: hidden; min-height: 92vh; padding: 64px var(--side, 20px) 40px; background: var(--bg); color: var(--fg); }
.xp-word {
  position: absolute; inset: 0; display: grid; place-items: center; margin: 0; z-index: 0; pointer-events: none; user-select: none;
  font: italic 400 clamp(6rem, 24vw, 26rem)/.8 var(--f-serif); letter-spacing: -.055em; white-space: nowrap; color: var(--fg);
  transform: translate3d(var(--wx, 0px), 0, 0);
}
.xp-obj { position: relative; z-index: 2; margin: 0; width: min(50vw, 720px); transform: translate3d(var(--ox, 0px), var(--oy, 0px), 0) rotate(var(--or, 0deg)); will-change: transform; }
.xp-obj img { display: block; width: 100%; height: auto; filter: drop-shadow(0 40px 50px rgba(0,0,0,.28)); animation: xp-float 7s ease-in-out infinite; }
.xp-p--debrief .xp-obj, .xp-p--post .xp-obj { width: min(30vw, 400px); }
.xp-p--post .xp-obj img { animation-delay: -3s; }
.xp-p--agent .xp-obj { width: min(52vw, 760px); }
.xp-p--identite .xp-obj { width: min(54vw, 760px); }
@keyframes xp-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
.xp-cap { position: absolute; z-index: 3; left: max(var(--side, 20px), calc((100vw - var(--w, 1200px)) / 2)); bottom: clamp(28px, 5vh, 56px); max-width: 360px; }
.xp-n { display: block; font: 700 15px/1 var(--f-sans); letter-spacing: .02em; margin-bottom: 14px; }
.xp-n i { font-style: normal; opacity: .5; margin-left: 6px; }
.xp-m { display: inline-block; font: 700 11.5px/1 var(--f-sans); letter-spacing: .09em; text-transform: uppercase; background: var(--acc); color: var(--bg); padding: 6px 8px; border-radius: 2px; }
.xp-cap h3 { margin: 12px 0 6px; font: 700 clamp(1.3rem, 2vw, 1.7rem)/1.1 var(--f-sans); letter-spacing: -.025em; color: var(--fg); }
.xp-cap p { margin: 0; font: 400 16px/1.45 var(--f-serif); opacity: .8; }
.xp-bar { display: none; }

/* ordinateur : salles épinglées qui défilent à l'horizontale */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .xp-js .xp-pin { height: 500vh; position: relative; }
  .xp-js .xp-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
  .xp-js .xp-track { display: flex; height: 100%; width: 500vw; transform: translate3d(var(--tx, 0px), 0, 0); will-change: transform; }
  .xp-js .xp-p { flex: none; width: 100vw; height: 100vh; min-height: 0; background: transparent; color: inherit; }
  .xp-js .xp-p .xp-word, .xp-js .xp-p .xp-cap h3 { color: inherit; }
  .xp-js .xp-p .xp-m { background: var(--acc-live, var(--acc)); color: var(--bg-live, var(--bg)); }
  .xp-js .xp-bar { display: block; position: absolute; left: max(var(--side, 20px), calc((100vw - var(--w, 1200px)) / 2)); right: max(var(--side, 20px), calc((100vw - var(--w, 1200px)) / 2)); top: calc(var(--nav-h) + 22px); height: 2px; background: currentColor; opacity: .25; z-index: 4; }
  .xp-js .xp-bar i { position: absolute; inset: 0; background: currentColor; transform-origin: 0 50%; transform: scaleX(var(--pg, 0)); opacity: 1; }
  .xp-js .xp-cap { left: 7vw; }
}
@media (max-width: 900px) {
  .xp-p { min-height: 0; padding: 48px 20px 36px; grid-template-rows: auto auto; gap: 28px; }
  .xp-word { position: relative; inset: auto; font-size: 25vw; grid-row: 1; grid-column: 1; align-self: start; }
  .xp-obj { grid-row: 1; grid-column: 1; width: 92%; margin-top: 12vw; }
  .xp-p--debrief .xp-obj, .xp-p--post .xp-obj { width: 52%; }
  .xp-p--agent .xp-obj { width: 100%; }
  .xp-cap { position: static; grid-row: 2; max-width: none; justify-self: stretch; }
}
@media (prefers-reduced-motion: reduce) { .xp-obj img { animation: none; } .xp { transition: none; } }