/* Prototype 33 degrés · couche motion posée sur l'export Pencil (largeur de référence 1440 px). */
:root {
  --navy: #001F55;
  --citron: #EFFE14;
  --cyan: #00DCFA;
  --rose: #F33799;
  --electric: #0066EE;
  --ink: #000000;
  --paper: #FFFFFF;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --z: 1;
  color-scheme: light;
}
html, body { background: var(--paper); color: var(--ink); }
body { margin: 0; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
*, ::before, ::after { box-sizing: border-box; }

.stage { width: 1440px; zoom: var(--z); }
.stage > div { overflow: clip; }
.stage > div > div { overflow: clip; }

/* ---------- curseur cercle ---------- */
.cur, .cur-dot { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 9998; border-radius: 50%; }
.cur {
  width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border: 1.5px solid var(--ink); mix-blend-mode: difference; border-color: #fff;
  display: grid; place-items: center;
  transition: width .5s var(--ease-out), height .5s var(--ease-out), margin .5s var(--ease-out), background-color .3s, border-color .3s;
}
.cur-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #fff; mix-blend-mode: difference; }
.cur span {
  font: 600 14px/1.1 system-ui, sans-serif; color: var(--ink); text-align: center;
  opacity: 0; transform: scale(.6); transition: opacity .25s, transform .4s var(--ease-out);
}
.cur.is-link { width: 72px; height: 72px; margin: -36px 0 0 -36px; }
.cur.is-label {
  width: 128px; height: 128px; margin: -64px 0 0 -64px;
  background: var(--citron); border-color: var(--citron); mix-blend-mode: normal;
}
.cur.is-label span { opacity: 1; transform: none; }
.cur.is-label + .cur-dot { opacity: 0; }
.cur.is-hidden, .cur.is-hidden + .cur-dot { opacity: 0; }
@media (hover: none), (pointer: coarse) { .cur, .cur-dot { display: none; } }
.has-cursor, .has-cursor * { cursor: none !important; }

/* ---------- barre de navigation du prototype ---------- */
.proto-bar {
  position: fixed; z-index: 9997; right: calc(18px + env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 4px; padding: 6px;
  background: rgba(0, 18, 50, .88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-radius: 999px; box-shadow: 0 10px 40px rgba(0, 0, 0, .18);
  font: 500 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif; color: #fff;
}
.proto-bar a, .proto-bar button {
  color: inherit; text-decoration: none; padding: 10px 14px; border-radius: 999px; border: 0; background: none; font: inherit; cursor: pointer;
}
.proto-bar a:hover, .proto-bar button:hover { background: rgba(255, 255, 255, .12); }
.proto-bar a[aria-current="page"] { background: var(--citron); color: var(--ink); }
.proto-bar .sep { width: 1px; height: 18px; background: rgba(255, 255, 255, .25); margin: 0 4px; }
.proto-bar a:focus-visible, .proto-bar button:focus-visible { outline: 2px solid var(--citron); outline-offset: 2px; }
@media (max-width: 560px) { .proto-bar .opt { display: none; } }

/* ---------- apparitions au scroll ---------- */
.rv { transition: transform 1.1s var(--ease-out), opacity 1.1s var(--ease-out), clip-path 1.3s var(--ease-out); }
.rv-up.is-pending { transform: translateY(60px); opacity: 0; }
.rv-img.is-pending { clip-path: inset(18% 0 0 0); }
.rv-pop.is-pending { transform: scale(.6); opacity: 0; }
.rv-mask { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .14em .1em 0; margin: 0 -.14em -.1em 0; }
.rv-mask > i { display: inline-block; font-style: inherit; transition: transform 1.2s var(--ease-out); }
.rv-mask.is-pending > i { transform: translateY(110%); }

/* ---------- survols ---------- */
.hv-fill { position: relative; isolation: isolate; transition: transform .6s var(--ease-out); }
.hv-fill::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background: var(--fill, var(--citron)); transform: scale(0); transition: transform .7s var(--ease-out);
}
.hv-fill:hover::before, .hv-fill.is-on::before { transform: scale(1); }
.hv-fill:hover { transform: scale(1.04); }
.hv-zoom { overflow: hidden; }
.hv-zoom > .zin { position: absolute; inset: 0; background: inherit; transition: transform 1.2s var(--ease-out); }
.hv-zoom:hover > .zin { transform: scale(1.06); }
.hv-row { transition: padding-left .6s var(--ease-out), color .3s; }
.hv-row:hover { padding-left: 28px !important; }
.drag-zone { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.drag-zone.is-dragging { cursor: grabbing; }
.marquee-track { display: flex; align-items: center; gap: 72px; width: max-content; will-change: transform; }
.marquee-mask { flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.xfade { transition: opacity .45s var(--ease-io), transform .6s var(--ease-out); }
.xfade.is-out { opacity: 0; transform: translateY(18px); }
.faq-a {
  overflow: hidden; max-height: 0; opacity: 0; transition: max-height .7s var(--ease-out), opacity .5s;
  font: 400 18px/1.55 var(--faq-font, system-ui), system-ui, sans-serif; color: #000000B3;
}
.faq-a > div { padding: 0 64px 28px 0; }
.faq-a em { color: #00000080; }
.faq-q { cursor: pointer; }
.faq-q svg, .faq-q [data-pencil-name="Bouton"] { transition: transform .5s var(--ease-out); }
.faq-q.is-open svg { transform: rotate(45deg); }
.ia-tag {
  position: absolute; right: 16px; bottom: 16px; z-index: 5; padding: 6px 10px; border-radius: 999px;
  background: rgba(0, 0, 0, .55); color: #fff; font: 500 12px/1 system-ui, sans-serif;
}
.focusable:focus-visible { outline: 2px solid var(--electric); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .rv, .rv-mask > i, .hv-fill::before, .xfade { transition: none !important; }
  .rv.is-pending, .rv-mask.is-pending > i { transform: none !important; opacity: 1 !important; clip-path: none !important; }
}