/* ============ Presentation mode (presentation.html) ============ */
html:has(body.deck), body.deck { height: 100%; overflow: hidden; }
body.deck { background: #0e0b1c; overscroll-behavior: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- slides ---------- */
.slide { position: fixed; inset: 0; overflow: hidden; visibility: hidden; background: var(--bg); transform-origin: 50% 50%; }
.slide.is-active, .slide.is-leaving { visibility: visible; }
.slide.is-active { z-index: 2; }
.slide.is-leaving { z-index: 1; }
.slide.leave-prev { z-index: 3; }
.slide::after { content: ''; position: absolute; inset: 0; background: #0e0b1c; opacity: 0; pointer-events: none; z-index: 10; }
.slide__inner { position: relative; height: 100%; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; padding: 92px 0 96px; scrollbar-width: thin; }
.slide__inner > .wrap { margin-block: auto; width: min(100% - 32px, 1240px); }
.slide__head { max-width: 760px; margin-bottom: clamp(20px, 3.5vh, 40px); }
.slide h2 { font-size: clamp(1.8rem, 3.4vw, 2.9rem); }
.slide .lead { margin-bottom: 0; }

.slide--hero { background:
  radial-gradient(700px 480px at 82% 40%, rgba(122, 47, 143, .18), transparent 70%),
  radial-gradient(520px 400px at 62% 90%, rgba(47, 127, 209, .14), transparent 70%),
  radial-gradient(440px 320px at 8% 8%, rgba(246, 168, 28, .16), transparent 70%), var(--bg); }
.slide--tint { background: linear-gradient(180deg, #fbf8f3, #f1ebf7); }
.slide--dark { background: var(--night); color: #fff; }
.slide.competitions { background: linear-gradient(180deg, var(--bg), #fff4e0); }

/* transitions: the next slide rises over the current one like a card; going back reverses it */
.slide.enter-next { animation: deckInNext .95s cubic-bezier(.7, 0, .2, 1) both; }
.slide.leave-next { animation: deckOutNext .95s cubic-bezier(.7, 0, .2, 1) both; }
.slide.leave-next::after { animation: deckDim .95s cubic-bezier(.7, 0, .2, 1) both; }
.slide.leave-prev { animation: deckOutPrev .95s cubic-bezier(.7, 0, .2, 1) both; }
.slide.enter-prev { animation: deckInPrev .95s cubic-bezier(.7, 0, .2, 1) both; }
.slide.enter-prev::after { animation: deckDim .95s cubic-bezier(.7, 0, .2, 1) reverse both; }
@keyframes deckInNext { from { transform: translateY(100%); border-radius: 44px 44px 0 0; } }
@keyframes deckOutNext { to { transform: scale(.9) translateY(-2%); border-radius: 36px; } }
@keyframes deckOutPrev { to { transform: translateY(100%); border-radius: 44px 44px 0 0; } }
@keyframes deckInPrev { from { transform: scale(.9) translateY(-2%); border-radius: 36px; } }
@keyframes deckDim { to { opacity: .55; } }

/* content builds in once its slide is active */
.deck .reveal { transition: none; }
.deck .slide :is(.reveal, .ecard, .domain, .robot, .comp, .support__item, .partner, .sbook) { opacity: 0; }
.deck .slide.is-active :is(.reveal, .ecard, .domain, .robot, .comp, .support__item, .partner, .sbook) { animation: deckRise .8s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 55ms + 380ms); }
.deck .slide.is-leaving :is(.reveal, .ecard, .domain, .robot, .comp, .support__item, .partner, .sbook) { opacity: 1; }
.deck .slide.is-active .sbook { animation-name: deckBook; animation-duration: 1s; }
@keyframes deckRise { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes deckBook { from { opacity: 0; transform: translateY(-60px) rotate(-4deg); } 70% { opacity: 1; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- chrome ---------- */
.deck__progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; background: rgba(122, 47, 143, .12); }
.deck__progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--accent)); transform-origin: left; transform: scaleX(0); transition: transform .8s cubic-bezier(.7, 0, .2, 1); }
.deck__top { position: fixed; top: 3px; left: 0; right: 0; z-index: 50; height: 74px; display: flex; align-items: center; gap: 22px; padding: 0 clamp(16px, 3vw, 36px); pointer-events: none; }
.deck__top > * { pointer-events: auto; }
.deck__logo img { height: 48px; width: auto; transition: filter .4s; }
.deck__actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.deck__menubtn { width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer; background: var(--ink); display: grid; align-content: center; gap: 5px; justify-items: center; }
.deck__menubtn span:not(.sr) { width: 18px; height: 2px; background: #fff; border-radius: 2px; transition: transform .25s; }
body.menu-open .deck__menubtn span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
body.menu-open .deck__menubtn span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

body.on-dark .deck__logo img { filter: brightness(0) invert(1); }
body.on-dark .deck__login { color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .3); }
body.on-dark .deck__menubtn { background: #fff; }
body.on-dark .deck__menubtn span:not(.sr) { background: var(--ink); }

.deck__dots { position: fixed; right: clamp(12px, 2vw, 28px); top: 50%; transform: translateY(-50%); z-index: 50; display: flex; flex-direction: column; gap: 6px; }
.deck__dots button { position: relative; width: 22px; height: 22px; border: 0; background: none; cursor: pointer; display: grid; place-items: center; padding: 0; }
.deck__dots button::before { content: ''; width: 8px; height: 8px; border-radius: 99px; background: rgba(30, 24, 56, .25); transition: height .3s, background .3s; }
.deck__dots button[aria-current]::before { height: 22px; background: var(--brand); }
.deck__dots button span { position: absolute; right: 30px; white-space: nowrap; background: var(--ink); color: #fff; font: 500 .8rem/1 var(--body); padding: 7px 10px; border-radius: 8px; opacity: 0; transform: translateX(6px); transition: opacity .2s, transform .2s; pointer-events: none; }
.deck__dots button:hover span, .deck__dots button:focus-visible span { opacity: 1; transform: none; }
body.on-dark .deck__dots button::before { background: rgba(255, 255, 255, .3); }
body.on-dark .deck__dots button[aria-current]::before { background: var(--accent); }

.deck__controls { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 50; display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 999px; background: rgba(255, 255, 255, .85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 30px -12px rgba(30, 24, 56, .35); }
.deck__arrow { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; cursor: pointer; display: grid; place-items: center; transition: transform .2s, opacity .2s; }
.deck__arrow:hover:not(:disabled) { transform: scale(1.08); }
.deck__arrow:disabled { opacity: .25; cursor: default; }
body.on-dark .deck__controls { background: rgba(255, 255, 255, .12); }
body.on-dark .deck__arrow { background: #fff; color: var(--ink); }

/* sommaire: liquid side menu (see js/liquid.js) */
.deck__menu { position: fixed; inset: 0; z-index: 52; pointer-events: none; --q: 0; --press: 0; }
.deck__menu.is-open { pointer-events: auto; }
.lq__backdrop { position: absolute; inset: 0; background: rgba(14, 11, 28, .45); opacity: var(--q); backdrop-filter: blur(calc(var(--q) * 6px)); -webkit-backdrop-filter: blur(calc(var(--q) * 6px)); }
.deck__menu:not(.is-open) .lq__backdrop { display: none; }
.lq__drop { position: absolute; top: 0; right: 0; overflow: visible; opacity: 0; transition: opacity .15s; pointer-events: none; }
.lq__sheet { position: absolute; top: 0; right: 0; overflow: visible; pointer-events: none; filter: drop-shadow(-20px 0 40px rgba(14, 11, 28, .35)); }
.deck__menu.is-open .lq__sheet { pointer-events: auto; }
.deck__menuinner { position: absolute; top: 0; right: 0; height: 100%; padding: 104px clamp(24px, 4vw, 48px) 36px; overflow-x: hidden; overflow-y: auto; color: #fff; display: flex; flex-direction: column; }
.deck__menuinner .eyebrow { color: var(--accent); }
.deck__menuinner > * { opacity: 0; transform: translateX(30px); transition: opacity .35s, transform .5s cubic-bezier(.2, .7, .2, 1); }
.deck__menu.is-in .deck__menuinner > * { opacity: 1; transform: none; }
.deck__toc { list-style: none; margin: 0; padding: 0; }
.deck__toc li { opacity: 0; transform: translateX(26px); transition: opacity .35s, transform .55s cubic-bezier(.2, .7, .2, 1); }
.deck__menu.is-in .deck__toc li { opacity: 1; transform: none; }
.deck__menu.is-in .deck__toc li:nth-child(n) { transition-delay: calc(var(--n, 0) * 35ms); }
.deck__toc button { width: 100%; display: flex; gap: 18px; align-items: baseline; text-align: left; border: 0; background: none; cursor: pointer; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); font: 600 clamp(1.05rem, 2.1vw, 1.35rem)/1.2 var(--display); color: #fff; transition: color .2s, padding .2s; }
.deck__toc button:hover { color: var(--accent); padding-left: 6px; }
.deck__toc button[aria-current] { color: var(--accent); }
.deck__menufoot { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
body.menu-open .deck__top { z-index: 55; }
body.menu-open .deck__menubtn { background: #fff; }
body.menu-open .deck__menubtn span:not(.sr) { background: var(--ink); }

/* ---------- slide-specific sizing so each fits one screen ---------- */
.slide--hero h1 { font-size: clamp(1.9rem, 3.5vw, 3.2rem); }
.slide--hero .slide__inner { overflow: hidden; }
.slide--hero .slide__inner > .hero__center { margin: 0 auto; padding-top: clamp(4px, 2vh, 24px); }
.slide--hero .lead { max-width: 640px; font-size: 1.05rem; }
.deck .shelf { margin-bottom: 72px; }
.deck .shelf:last-child { margin-bottom: 48px; }
.deck .rack { padding-top: clamp(24px, 4vh, 46px); }
.deck .method__grid { margin-bottom: 0; }
.deck .platform__img img { max-height: 52vh; width: auto; margin: 0 auto; }
.deck .robot__img { height: min(170px, 20vh); }
.deck .robot__img img { max-height: min(160px, 19vh); }
.deck .domain__img { height: min(120px, 14vh); }
.deck .domain__img img { max-height: min(96px, 11vh); }
.deck .support__item { padding: clamp(18px, 3vh, 30px) 26px; }
.deck .comp__photo { aspect-ratio: 16 / 8; }
.deck .comp__body { padding: 18px 22px 22px; }
.deck .comp__body img { height: 44px; margin-bottom: 10px; }
.deck .contact__list { margin: 22px 0; }
.deck .form { gap: 12px; }
.deck .form input, .deck .form textarea { padding: 11px 13px; }
.deck__products { display: flex; flex-wrap: wrap; gap: 10px; }
.deck__products a { background: #fff; border-radius: 12px; height: 54px; width: 110px; display: grid; place-items: center; padding: 8px 12px; transition: transform .2s; }
.deck__products a:hover { transform: translateY(-3px); }
.deck__products img { max-height: 38px; width: auto; }

@media (max-height: 760px) and (min-width: 961px) {
  .slide__inner { padding: 80px 0 84px; }
  .slide .lead { font-size: 1.02rem; }
}
@media (max-width: 960px) {
  .deck__dots, .deck__login { display: none; }
  .slide__inner { padding: 84px 0 100px; }
}
@media (max-width: 640px) {
  .deck__cta { display: none; }
  .deck__logo img { height: 40px; }
  .deck__controls { bottom: 14px; }
  .deck .rack { margin: 0 -16px; }
}
@media (prefers-reduced-motion: reduce) {
  .slide.enter-next, .slide.leave-next, .slide.enter-prev, .slide.leave-prev { animation: none; }
}

/* primary slide: French and English shelves stacked, tighter so both fit one screen */
.deck [data-compact] .shelf { margin-bottom: 46px; }
.deck [data-compact] .shelf:last-child { margin-bottom: 28px; }
.deck [data-compact] .shelf__label { margin-bottom: 8px; }
.deck [data-compact] .rack { padding-top: clamp(16px, 2.6vh, 30px); }
.deck [data-compact] .sbook__label { margin-top: 30px; font-size: .92rem; }
@media (max-height: 820px) and (min-width: 961px) {
  #primaire .lead { display: none; } /* short laptop screens: keep both shelves on one screen */
}

/* the hero shows the big Pixel logo, so the small one in the corner waits until the next slide */
.deck__logo { transition: opacity .4s, visibility .4s; }
body.on-first .deck__logo { opacity: 0; visibility: hidden; }

/* hero: keep logo, headline and buttons compact so the wheel keeps its room */
.slide--hero .slide__inner { padding-top: 74px; }
.slide--hero .hero__ctas { margin: 22px 0 0; }
.slide--hero .lead { max-width: 780px; }
@media (max-height: 800px), (max-width: 640px) {
  .slide--hero .lead { display: none; }
  .slide--hero .hero__ctas { margin-top: 16px; }
}
@media (max-width: 640px) {
  .slide--hero h1 { font-size: 1.75rem; }
  .slide--hero .hero__ctas .btn { padding: 12px 18px; font-size: .92rem; }
}