/* ---------- Accueil « waouh » ---------- */
.compass { width: min(340px, 64vw, 38vh); }
/* titre qui glisse */
.hero h1.sliding .slide-l { display: inline-block; animation: slideIn 1.1s cubic-bezier(.2, .9, .25, 1.15) both; animation-delay: calc(.35s + var(--i) * .045s); }
@keyframes slideIn {
  0% { opacity: 0; transform: translate(-60px, -90px) rotate(-35deg) scale(.6); }
  55% { opacity: 1; transform: translate(6px, 8px) rotate(6deg) scale(1.05); }
  100% { opacity: 1; transform: none; }
}
.hero h1 em .slide-l { animation-name: slideInBig; }
@keyframes slideInBig { 0% { opacity: 0; transform: translate(-90px, -140px) rotate(-60deg) scale(.4); } 60% { opacity: 1; transform: translate(0, 12px) rotate(8deg) scale(1.15); } 100% { opacity: 1; transform: none; } }
/* orbite */
.orbit { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 2; }
.orb { position: absolute; left: 0; top: 0; will-change: transform; transition: opacity .3s; }
.face-orb { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0; border: 0; background: none; cursor: pointer; }
.face-orb i { display: block; width: clamp(48px, 5vw, 64px); aspect-ratio: 1; border-radius: 50%; background: #eee center 18% / cover; border: 3px solid #fff; box-shadow: 0 10px 24px rgba(60,30,70,.28); transition: transform .35s var(--spring); }
.face-orb span { padding: 2px 9px; border-radius: 999px; background: rgba(255,255,255,.92); color: #2A1B2E; font: 700 12px var(--text); opacity: 0; transform: translateY(-4px); transition: .25s; }
.face-orb:hover i, .face-orb:focus-visible i { transform: scale(1.25) rotate(-8deg); }
.face-orb:hover span, .face-orb:focus-visible span { opacity: 1; transform: none; }
.syl-orb { display: flex; align-items: center; gap: 3px; padding: 5px 9px; border-radius: 999px; background: rgba(255,255,255,.92); box-shadow: 0 8px 18px rgba(60,30,70,.18); font: 800 15px "Montserrat", "Fredoka", sans-serif; }
.syl-orb b { color: #6AB4E3; } .syl-orb em { font-style: normal; color: #F05A3F; }
.syl-orb.green em { color: #3E9C7C; }
html[data-theme="nuit"] .syl-orb, html[data-theme="nuit"] .face-orb span { background: rgba(30,22,48,.92); color: #fff; }
@media (max-width: 760px) { .face-orb i { width: 40px; } .syl-orb { font-size: 12px; padding: 3px 7px; } }

/* vortex */
.vortex { position: fixed; inset: 0; z-index: 95; pointer-events: none; visibility: hidden; }
.vortex i { position: absolute; left: 50%; top: 50%; width: 260vmax; height: 260vmax; margin: -130vmax 0 0 -130vmax; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, #FF5FA2 0 12deg, #F6EC9A 12deg 24deg, #7FAEF0 24deg 36deg, #CDEBD9 36deg 48deg); transform: scale(0) rotate(0); opacity: .95; }
.vortex i:nth-child(2) { background: repeating-conic-gradient(from 20deg, transparent 0 10deg, rgba(255,255,255,.75) 10deg 14deg); }
.vortex i:nth-child(3) { background: radial-gradient(circle, var(--porcelain) 0 18%, transparent 19%); }
.vortex b { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px; border-radius: 50%; background: url(assets/ref/armelle-blouse.jpg) 50% 8% / 220% auto; box-shadow: 0 0 0 6px #fff, 0 20px 60px rgba(0,0,0,.35); transform: scale(0); }
.vortex.in { visibility: visible; }
.vortex.in i { animation: vIn .8s cubic-bezier(.6, 0, .3, 1) forwards; }
.vortex.in i:nth-child(2) { animation-duration: .9s; }
.vortex.in b { animation: vLogo .8s .1s var(--spring) forwards; }
.vortex.out { visibility: visible; }
.vortex.out i { transform: scale(1.2) rotate(540deg); animation: vOut .85s cubic-bezier(.5, 0, .2, 1) forwards; }
.vortex.out b { transform: scale(1); animation: vLogoOut .5s ease-in forwards; }
@keyframes vIn { to { transform: scale(1.2) rotate(540deg); } }
@keyframes vOut { to { transform: scale(0) rotate(1080deg); opacity: 0; } }
@keyframes vLogo { to { transform: scale(1) rotate(360deg); } }
@keyframes vLogoOut { to { transform: scale(0) rotate(-180deg); } }

/* menu : pastille qui glisse sous les liens + transition « toboggan » */
.nav { position: relative; }
.nav-pill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 999px; background: linear-gradient(135deg, #FFF0A4, #F9D7E7); box-shadow: 3px 4px 0 #F6DCE8; opacity: 0; transition: transform .45s var(--spring), width .45s var(--spring), opacity .25s; z-index: 0; pointer-events: none; }
.nav a { position: relative; z-index: 1; }
.nav a:hover, .nav a.on { background: transparent !important; }
.nav a.tap { animation: navTap .5s var(--spring); }
@keyframes navTap { 30% { transform: scale(.88) rotate(-4deg); } 70% { transform: scale(1.1) rotate(2deg); } }
html[data-theme="nuit"] .nav-pill { background: linear-gradient(135deg, #4A3A12, #4A1A35); box-shadow: 0 0 18px rgba(255,95,162,.4); }
.slide-curtain { position: fixed; inset: 0; z-index: 94; pointer-events: none; visibility: hidden; overflow: hidden; }
.sc-band { position: absolute; left: -20%; width: 140%; height: 40%; transform: translateX(-110%) skewY(-8deg); }
.sc-band.b1 { top: -5%; background: #7FAEF0; }
.sc-band.b2 { top: 30%; background: #F6EC9A; }
.sc-band.b3 { top: 65%; background: #FF8DB8; }
.sc-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.6); opacity: 0; font: 700 clamp(48px, 9vw, 120px)/1 "Fredoka", sans-serif; white-space: nowrap; -webkit-text-stroke: .1em #fff; paint-order: stroke fill; }
.sc-logo b { color: #7FAEF0; font-weight: 700; } .sc-logo i { color: #5B5B5B; font-style: normal; } .sc-logo em { color: #E0493A; font-style: normal; }
.slide-curtain.in, .slide-curtain.out { visibility: visible; }
.slide-curtain.in .sc-band { animation: bandIn .55s cubic-bezier(.7, 0, .3, 1) forwards; }
.slide-curtain.in .b2 { animation-delay: .06s; } .slide-curtain.in .b3 { animation-delay: .12s; }
.slide-curtain.in .sc-logo { animation: logoIn .5s .15s var(--spring) forwards; }
.slide-curtain.out .sc-band { transform: translateX(0) skewY(-8deg); animation: bandOut .6s cubic-bezier(.7, 0, .3, 1) forwards; }
.slide-curtain.out .b2 { animation-delay: .05s; } .slide-curtain.out .b3 { animation-delay: .1s; }
.slide-curtain.out .sc-logo { transform: translate(-50%, -50%) scale(1); opacity: 1; animation: logoOut .3s ease-in forwards; }
@keyframes bandIn { to { transform: translateX(0) skewY(-8deg); } }
@keyframes bandOut { to { transform: translateX(110%) skewY(-8deg); } }
@keyframes logoIn { to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@keyframes logoOut { to { transform: translate(-50%, -50%) scale(1.3); opacity: 0; } }

/* ---------- Film : livres et PDF dans les coins du bas, jamais sur les visages ---------- */
.film-cap { width: min(640px, calc(100% - 32px)); bottom: 15vh; }
.pop { top: auto !important; bottom: 5vh; }
.pop.l { left: clamp(12px, 3vw, 60px); } .pop.r { right: clamp(12px, 3vw, 60px); }
.pb-book { --w: clamp(90px, 9vw, 130px); }
.pop.big .pb-book { --w: clamp(100px, 10vw, 150px); }
.pb-book.wide { --w: clamp(120px, 11vw, 170px); }
.pb-pdf { width: clamp(72px, 7vw, 96px); }
.pop.on { transform: translateY(calc(var(--k, 0) * -10px)) rotate(calc((var(--k, 0) - .5) * 6deg)) scale(1); }
@media (max-width: 760px) {
  .film-cap { bottom: 22vh; font-size: 24px; }
  .pop { bottom: 3vh; flex-direction: row; gap: 8px; }
  .pb-book { --w: 70px; } .pop.big .pb-book { --w: 78px; } .pb-book.wide { --w: 96px; }
  .pb-pdf { width: 58px; }
  .pb-label { max-width: 110px; }
  .pb-touch { top: -14px; }
}

/* ---------- Menu « Les livres » ---------- */
.books-menu { position: relative; }
.bm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 0; cursor: pointer; background: linear-gradient(135deg, #FFF0A4, #F9D7E7); color: #2A1B2E; font: 700 14px var(--text); box-shadow: 3px 4px 0 #F6DCE8; transition: transform .3s var(--spring); }
.bm-btn:hover { transform: translateY(-2px) rotate(-2deg); }
.bm-pop { position: absolute; right: 0; top: calc(100% + 12px); width: min(380px, 92vw); padding: 8px; display: grid; gap: 4px; background: rgba(255,255,255,.96) !important; opacity: 0; transform: translateY(-8px) scale(.97); transform-origin: top right; pointer-events: none; transition: .3s var(--spring); }
.books-menu.open .bm-pop { opacity: 1; transform: none; pointer-events: auto; }
.bm-pop a { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 16px; text-decoration: none; color: #2A1B2E; transition: background .2s, transform .3s var(--spring); }
.bm-pop a:hover { background: color-mix(in srgb, var(--c) 12%, #fff); transform: translateX(4px); }
.bm-cover { flex: none; width: 54px; height: 54px; border-radius: 8px; background: #fff right center / 200% 100% no-repeat; box-shadow: 0 6px 14px rgba(60,30,70,.2); }
.bm-pop small { display: block; font: 700 11px var(--text); color: var(--c); text-transform: uppercase; letter-spacing: .06em; }
.bm-pop b { display: block; font: 700 15px/1.2 var(--text); }
.bm-pop em { font-style: normal; font-size: 13px; color: #6D5F72; background: none; }
html[data-theme="nuit"] .bm-pop { background: rgba(22,15,36,.96) !important; }
html[data-theme="nuit"] .bm-pop a { color: #F6EEF8; }
html[data-theme="nuit"] .bm-pop a:hover { background: rgba(255,255,255,.08); }
html[data-theme="nuit"] .bm-btn { background: linear-gradient(135deg, #4A3A12, #4A1A35); color: #FFE36E; box-shadow: none; }
@media (max-width: 760px) { .bm-btn span { display: none; } .bm-btn { padding: 8px 10px; } }
@media (max-width: 1100px) and (min-width: 761px) { .nav a { padding: 8px 9px; font-size: 13.5px; } }

/* Barre du haut : jamais de retour à la ligne ; menu replié sous 1180 px */
.nav a { white-space: nowrap; }
.topbar { flex-wrap: nowrap; }
.topbar .logo { flex: none; }
.bm-btn { white-space: nowrap; }
.bm-l2, .bm-sections, .bm-head { display: none; }
.bm-sections { grid-template-columns: 1fr 1fr; gap: 4px; padding-bottom: 6px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); margin-bottom: 4px; }
.bm-sec { padding: 9px 12px !important; border-radius: 12px; font: 700 14px var(--text); background: color-mix(in srgb, var(--ink) 4%, transparent); }
.bm-head { margin: 4px 8px 2px; font: 700 11px var(--text); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
@media (max-width: 860px) {
  .topbar .nav { display: none; }
  .bm-l1 { display: none; } .bm-l2 { display: inline; }
  .bm-sections { display: grid; } .bm-head { display: block; }
}
@media (max-width: 760px) { .bm-l2 { display: inline; } .bm-btn span.bm-l2 { display: inline !important; } }
/* pont invisible entre le bouton et la liste : la liste ne se ferme plus en route */
.bm-pop::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.books-menu.open .bm-btn { box-shadow: 3px 4px 0 #F3A7C6; }

.vortex:not(.in):not(.out), .slide-curtain:not(.in):not(.out) { display: none !important; }
.vortex i:nth-child(3) { background: radial-gradient(circle, rgba(255,255,255,.9) 0 10%, transparent 11%); }

/* entre 861 et 1180 px : menu étalé mais compact */
@media (max-width: 1180px) and (min-width: 861px) {
  .topbar { gap: 8px; }
  .nav { gap: 0; }
  .nav a { padding: 8px 8px; font-size: 13px; }
  .logo { font-size: 18px; }
  .bm-btn { padding: 8px 10px; }
  .bm-l1 { display: none; }
}
/* téléphone : la liste du menu s'ouvre en pleine largeur sous la barre, jamais coupée */
@media (max-width: 860px) {
  .bm-pop { position: fixed; left: 10px; right: 10px; top: 70px; width: auto; max-height: calc(100svh - 90px); overflow: auto; transform-origin: top center; }
  .bm-pop::before { display: none; }
}

/* ---------- Téléphone : barre du haut qui tient dans l'écran, aucun débordement horizontal ---------- */
html { overflow-x: clip; }
body { overflow-x: clip; }
@media (max-width: 760px) {
  .topbar { gap: 6px; padding: 6px 8px 6px 6px; }
  .topbar .logo { gap: 6px; font-size: 17px; }
  .logo-avatar { width: 36px; height: 36px; }
  .socials { gap: 4px; }
  .socials a { width: 32px; height: 32px; }
  .theme-switch.in-bar { margin-right: 0; }
  .ts-toggle { width: 32px !important; height: 32px !important; }
  .theme-switch.in-bar .ts-pop { right: -80px; }
}
@media (max-width: 400px) { .topbar .logo > span:last-child { display: none; } }

/* ---------- Transitions par destination ---------- */
.tr-fx { position: fixed; inset: 0; z-index: 94; pointer-events: none; display: none; }
.tr-fx.in, .tr-fx.out { display: block; }
.tr-fx > div { position: absolute; inset: 0; display: none; }
.tr-fx[data-kind="iris"] .tr-iris, .tr-fx[data-kind="lips"] .tr-lips, .tr-fx[data-kind="page"] .tr-page, .tr-fx[data-kind="chalk"] .tr-chalk, .tr-fx[data-kind="zoom"] .tr-zoom { display: block; }
/* iris : un cercle s'ouvre sur Armelle */
.tr-iris i { position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, transparent 0 60px, #F4C7D6 61px) , url(assets/ref/armelle-blouse.jpg) 50% 12% / cover; clip-path: circle(0% at 50% 50%); }
.tr-fx.in .tr-iris i { animation: irisIn .6s cubic-bezier(.7,0,.3,1) forwards; }
.tr-fx.out .tr-iris i { clip-path: circle(150% at 50% 50%); animation: irisOut .8s cubic-bezier(.7,0,.3,1) forwards; }
@keyframes irisIn { to { clip-path: circle(150% at 50% 50%); } }
@keyframes irisOut { to { clip-path: circle(0% at 50% 50%); } }
/* lèvres : la bouche se ferme puis s'ouvre */
.tr-lips i { position: absolute; left: -10%; width: 120%; height: 56%; background: radial-gradient(ellipse at 50% 100%, #F27A9C, #D9467F 60%, #9E2A57); }
.tr-lips .up { top: 0; border-radius: 0 0 50% 50% / 0 0 40% 40%; transform: translateY(-105%); }
.tr-lips .lo { bottom: 0; border-radius: 50% 50% 0 0 / 40% 40% 0 0; transform: translateY(105%); background: radial-gradient(ellipse at 50% 0%, #F27A9C, #D9467F 60%, #9E2A57); }
.tr-fx.in .tr-lips i { animation: lipsIn .55s cubic-bezier(.7,0,.3,1) forwards; }
.tr-fx.out .tr-lips i { transform: none; animation: lipsOut .8s cubic-bezier(.7,0,.3,1) forwards; }
.tr-fx.out .tr-lips .up { animation-name: lipsOutUp; } .tr-fx.out .tr-lips .lo { animation-name: lipsOutLo; }
@keyframes lipsIn { to { transform: none; } }
@keyframes lipsOutUp { to { transform: translateY(-105%); } }
@keyframes lipsOutLo { to { transform: translateY(105%); } }
/* page qui se tourne */
.tr-page { perspective: 1600px; }
.tr-page i { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 34px, rgba(127,174,240,.25) 34px 36px), linear-gradient(90deg, #E9DCC8, #FFFDF6 6%); transform-origin: left center; transform: rotateY(-100deg); box-shadow: -30px 0 60px rgba(0,0,0,.25); }
.tr-fx.in .tr-page i { animation: pageTurnIn .64s cubic-bezier(.6,0,.3,1) forwards; }
.tr-fx.out .tr-page i { transform: none; transform-origin: right center; animation: pageTurnOut .8s cubic-bezier(.6,0,.3,1) forwards; }
@keyframes pageTurnIn { to { transform: rotateY(0); } }
@keyframes pageTurnOut { to { transform: rotateY(100deg); } }
/* coup de chiffon sur le tableau */
.tr-chalk i { position: absolute; inset: 0; background: linear-gradient(160deg, #2F5D4A, #1E3E31); clip-path: inset(0 100% 0 0); }
.tr-chalk b { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-4deg); font: 400 clamp(40px, 8vw, 90px) "Gochi Hand", cursive; color: #fff; opacity: 0; }
.tr-fx.in .tr-chalk i { animation: wipeIn .5s ease-in forwards; }
.tr-fx.in .tr-chalk b { animation: chalkTxt .3s .35s forwards; }
.tr-fx.out .tr-chalk i { clip-path: inset(0); animation: wipeOut .7s ease-out forwards; }
.tr-fx.out .tr-chalk b { opacity: 1; animation: chalkOut .3s forwards; }
@keyframes wipeIn { to { clip-path: inset(0 0 0 0); } }
@keyframes wipeOut { to { clip-path: inset(0 0 0 100%); } }
@keyframes chalkTxt { to { opacity: 1; } }
@keyframes chalkOut { to { opacity: 0; } }
/* zoom + étincelle */
.tr-zoom i { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px; border-radius: 50%; background: radial-gradient(circle, #fff 0 20%, #FFF0A4 40%, #FF9EC7 70%, #D9467F); transform: scale(0); }
.tr-fx.in .tr-zoom i { animation: zoomIn .48s cubic-bezier(.7,0,.3,1) forwards; }
.tr-fx.out .tr-zoom i { transform: scale(90); animation: zoomOut .6s ease-out forwards; }
@keyframes zoomIn { to { transform: scale(90); } }
@keyframes zoomOut { to { transform: scale(90); opacity: 0; } }

/* Film : éléments en haut ou en bas, en alternance */
.pop.t { top: clamp(84px, 12vh, 124px) !important; bottom: auto !important; }
.pop.t .pb-label { order: -1; }
@media (max-width: 760px) { .pop.t { top: 74px !important; } }
/* Film : profondeur (nuages et étincelles sur les bords, ils filent quand on défile) */
.film-depth { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  -webkit-mask: linear-gradient(90deg, #000 0 14%, transparent 30% 70%, #000 86% 100%); mask: linear-gradient(90deg, #000 0 14%, transparent 30% 70%, #000 86% 100%); }
.film-depth i { position: absolute; inset: 0; background-repeat: repeat-y; }
.film-depth .d1 { opacity: .35; background-size: 100% 900px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='900'%3E%3Cg fill='white'%3E%3Cellipse cx='120' cy='140' rx='120' ry='46'/%3E%3Cellipse cx='1480' cy='420' rx='140' ry='52'/%3E%3Cellipse cx='90' cy='700' rx='110' ry='40'/%3E%3C/g%3E%3C/svg%3E"); filter: blur(6px); }
.film-depth .d2 { opacity: .55; background-size: 100% 700px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='700'%3E%3Cg fill='%23FFF6C8'%3E%3Ccircle cx='70' cy='90' r='5'/%3E%3Ccircle cx='1540' cy='210' r='6'/%3E%3Ccircle cx='160' cy='420' r='4'/%3E%3Ccircle cx='1450' cy='560' r='5'/%3E%3Ccircle cx='40' cy='640' r='3'/%3E%3C/g%3E%3C/svg%3E"); }
.film-depth .d3 { opacity: .8; background-size: 100% 1200px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1200'%3E%3Cg fill='white' opacity='.9'%3E%3Cpath d='M60 200 l6 -18 l6 18 l18 6 l-18 6 l-6 18 l-6 -18 l-18 -6z'/%3E%3Cpath d='M1530 640 l7 -20 l7 20 l20 7 l-20 7 l-7 20 l-7 -20 l-20 -7z'/%3E%3Cpath d='M120 980 l5 -14 l5 14 l14 5 l-14 5 l-5 14 l-5 -14 l-14 -5z'/%3E%3C/g%3E%3C/svg%3E"); }
.film-video { transform: scale(calc(1.06 + var(--dive, 0) * .06)) translateY(calc(var(--dive, 0) * -1.5%)); transition: transform .3s linear; }
@media (prefers-reduced-motion: reduce) { .film-depth { display: none; } }

/* Titre : quand le mot en couleur est un dégradé (thème Verre), chaque lettre animée porte le dégradé elle-même (sinon le mot devenait invisible) */
.hero h1.sliding em .slide-l { background: inherit; background-size: 700% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: inherit; }
.hero h1.sliding em .slide-l:nth-child(7n+2) { background-position: 17% 0; } .hero h1.sliding em .slide-l:nth-child(7n+3) { background-position: 33% 0; }
.hero h1.sliding em .slide-l:nth-child(7n+4) { background-position: 50% 0; } .hero h1.sliding em .slide-l:nth-child(7n+5) { background-position: 67% 0; }
.hero h1.sliding em .slide-l:nth-child(7n+6) { background-position: 83% 0; } .hero h1.sliding em .slide-l:nth-child(7n) { background-position: 100% 0; }

/* Téléphone : boussole plus petite, étiquettes compactes, rien ne déborde de l'écran */
@media (max-width: 760px) {
  .compass { width: min(170px, 44vw); margin-top: 120px; }
  .cap { padding: 6px 10px 6px 6px; gap: 6px; }
  .cap-ico { width: 30px; height: 30px; font-size: 16px; }
  .cap b { font-size: 14px; }
  .cap small { display: none; }
  .cap-e { left: 80%; } .cap-w { right: 80%; }
}
@media (max-width: 760px) { .cap { flex-direction: row !important; align-items: center; border-radius: 999px !important; text-align: left; width: auto !important; } .cap-w { flex-direction: row-reverse !important; padding: 6px 6px 6px 10px; } }

/* ---------- Transition « Qui suis-je » : bandes d'école + polaroid d'Armelle ---------- */
.tr-fx[data-kind="hello"] .tr-hello, .tr-fx[data-kind="shop"] .tr-shop { display: block; }
.tr-hello { overflow: hidden; }
.tr-hello s { position: absolute; left: -30%; width: 160%; height: 42%; transform: translate(-110%, 30%) rotate(-12deg); box-shadow: 0 10px 0 rgba(0,0,0,.04); }
.tr-hello .h1 { top: -12%; background: #FFF0A4; } .tr-hello .h2 { top: 26%; background: #F9D7E7; } .tr-hello .h3 { top: 64%; background: #E7EDFF; }
.tr-hello figure { position: absolute; left: 50%; top: 44%; width: min(240px, 56vw); margin: 0; padding: 12px 12px 46px; background: #fff; border-radius: 6px;
  box-shadow: 0 30px 60px -20px rgba(60,30,70,.45); transform: translate(-50%, 120vh) rotate(-38deg) scale(.5); }
.tr-hello figure img { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: 50% 10%; border-radius: 3px; }
.tr-hello figure u { position: absolute; left: 50%; top: -14px; width: 92px; height: 28px; margin-left: -46px; background: rgba(255,225,120,.75); transform: rotate(-4deg); }
.tr-hello p { position: absolute; left: 50%; top: calc(44% + min(240px, 56vw) * .7 + 40px); margin: 0; padding: 10px 18px; white-space: nowrap; border-radius: 14px; background: #FFF0A4; color: #CA5289;
  font: 700 clamp(20px, 3.2vw, 30px) "Fredoka", sans-serif; box-shadow: 5px 6px 0 #F6DCE8; transform: translate(-50%, 0) rotate(-2deg) scale(0); }
.tr-hello p b { color: #DE5B94; }
.tr-fx.in .tr-hello s { animation: helloBand .55s cubic-bezier(.7,0,.3,1) forwards; }
.tr-fx.in .tr-hello .h2 { animation-delay: .08s; } .tr-fx.in .tr-hello .h3 { animation-delay: .16s; }
.tr-fx.in .tr-hello figure { animation: helloPhoto .8s .25s cubic-bezier(.2,.9,.3,1.25) forwards; }
.tr-fx.in .tr-hello p { animation: helloTag .45s .75s cubic-bezier(.3,1.6,.5,1) forwards; }
@keyframes helloBand { to { transform: translate(0, 30%) rotate(-12deg); } }
@keyframes helloPhoto { to { transform: translate(-50%, -50%) rotate(-4deg) scale(1); } }
@keyframes helloTag { to { transform: translate(-50%, 0) rotate(-2deg) scale(1); } }
.tr-fx.out .tr-hello s { transform: translate(0, 30%) rotate(-12deg); animation: helloBandOut .6s cubic-bezier(.7,0,.3,1) forwards; }
.tr-fx.out .tr-hello .h2 { animation-delay: .06s; } .tr-fx.out .tr-hello .h3 { animation-delay: .12s; }
.tr-fx.out .tr-hello figure { transform: translate(-50%, -50%) rotate(-4deg); animation: helloPhotoOut .55s cubic-bezier(.6,0,.4,1) forwards; }
.tr-fx.out .tr-hello p { transform: translate(-50%, 0) rotate(-2deg); animation: helloTagOut .4s ease-in forwards; }
@keyframes helloBandOut { to { transform: translate(110%, 30%) rotate(-12deg); } }
@keyframes helloPhotoOut { to { transform: translate(60vw, -140vh) rotate(30deg) scale(.6); } }
@keyframes helloTagOut { to { transform: translate(-50%, 60vh) rotate(12deg); opacity: 0; } }

/* ---------- Transition « Acheter » : soleil de couleurs + les 4 livres tombent en éventail ---------- */
.tr-shop { overflow: hidden; }
.tr-shop s { position: absolute; right: 8%; top: 4%; width: 300vmax; height: 300vmax; margin: -150vmax -150vmax 0 0; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, #FFF0A4 0 10deg, #F9D7E7 10deg 20deg, #E7EDFF 20deg 30deg, #DDF3E8 30deg 40deg); transform: scale(0) rotate(-90deg); }
.tr-shop i { --x: calc((var(--k) - 1.5) * min(150px, 21vw)); --r: calc((var(--k) - 1.5) * 11deg);
  position: absolute; left: 50%; top: 46%; width: min(190px, 30vw); aspect-ratio: 3/4; margin: calc(min(190px, 30vw) * -.66) 0 0 calc(min(190px, 30vw) * -.5);
  background: #fff right center / 200% 100% no-repeat; border-radius: 6px 12px 12px 6px; box-shadow: -6px 0 0 rgba(0,0,0,.08) inset, 0 24px 40px -14px rgba(60,30,70,.5);
  transform: translate(var(--x), -130vh) rotate(calc(var(--r) * -3)); }
.tr-shop i:nth-of-type(4) { background-size: cover; background-position: 70% center; }
.tr-shop p { position: absolute; left: 50%; top: calc(46% + min(190px, 30vw) * .82); margin: 0; padding: 10px 20px; border-radius: 14px; white-space: nowrap; background: #F9D7E7; color: #A3245A;
  font: 700 clamp(22px, 3.4vw, 34px) "Fredoka", sans-serif; box-shadow: 5px 6px 0 #EBC7F0; transform: translate(-50%, 0) rotate(3deg) scale(0); }
.tr-fx.in .tr-shop s { animation: shopSun .7s cubic-bezier(.6,0,.3,1) forwards; }
.tr-fx.in .tr-shop i { animation: shopDrop .7s cubic-bezier(.3,1.35,.5,1) forwards; animation-delay: calc(.2s + var(--k) * .09s); }
.tr-fx.in .tr-shop p { animation: shopTag .4s .8s cubic-bezier(.3,1.7,.5,1) forwards; }
@keyframes shopSun { to { transform: scale(1) rotate(0); } }
@keyframes shopDrop { to { transform: translate(var(--x), 0) rotate(var(--r)); } }
@keyframes shopTag { to { transform: translate(-50%, 0) rotate(-3deg) scale(1); } }
.tr-fx.out .tr-shop s { transform: scale(1); animation: shopSunOut .7s cubic-bezier(.6,0,.4,1) forwards; }
.tr-fx.out .tr-shop i { transform: translate(var(--x), 0) rotate(var(--r)); animation: shopBurst .6s cubic-bezier(.5,0,.4,1) forwards; animation-delay: calc(var(--k) * .04s); }
.tr-fx.out .tr-shop p { transform: translate(-50%, 0) rotate(-3deg); animation: helloTagOut .35s ease-in forwards; }
@keyframes shopSunOut { to { transform: scale(0) rotate(120deg); } }
@keyframes shopBurst { to { transform: translate(calc(var(--x) * 6), -40vh) rotate(calc(var(--r) * 8)) scale(.7); opacity: 0; } }
html[data-theme="nuit"] .tr-shop s { background: repeating-conic-gradient(from 0deg, #2B2614 0 10deg, #2E1B25 10deg 20deg, #1B2333 20deg 30deg, #15302A 30deg 40deg); }
html[data-theme="nuit"] .tr-hello .h1 { background: #2B2614; } html[data-theme="nuit"] .tr-hello .h2 { background: #2E1B25; } html[data-theme="nuit"] .tr-hello .h3 { background: #1B2333; }
/* légendes du film plus bas : sous les museaux et les visages, sur les pattes */
@media (min-width: 761px) { .film-cap { bottom: 6vh; } }