/* ---------- « Choisis ton format » en motion design (pas de boîtes) ---------- */
.fx-formats { position: relative; width: min(1100px, calc(100% - 32px)); margin: 0 auto; padding: clamp(90px, 14vh, 150px) 0 60px; text-align: center; }
.ff-title { font-size: clamp(40px, 6vw, 80px); }
.ff-stage { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(10px, 3vw, 40px); margin-top: 40px; }
.ff-side { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ln { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1200; stroke-dashoffset: 1200; }
.ln.thin { stroke-width: 2.5; opacity: .6; }
.fx-formats.in .ln { animation: draw 1.6s cubic-bezier(.6, 0, .2, 1) forwards; }
.fx-formats.in .ln.thin { animation-delay: .35s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
/* tablette */
.ff-pdf { --tw: clamp(170px, 20vw, 230px); }
.ff-draw { width: var(--tw); height: auto; overflow: visible; }
.ff-page { position: absolute; top: calc(var(--tw) * .093); left: 50%; width: calc(var(--tw) * .72); aspect-ratio: 188 / 248; transform: translate(-50%, 40px) rotate(-6deg); border-radius: 8px; background: #fff right center / 200% auto no-repeat; box-shadow: 0 16px 30px -10px rgba(40,20,50,.35); opacity: 0; }
.fx-formats.in .ff-page { animation: pageIn 1s 1.2s var(--spring) forwards; }
@keyframes pageIn { to { opacity: 1; transform: translate(-50%, 0) rotate(0); } }
.ff-tap { position: absolute; top: calc(var(--tw) * .9); left: 60%; font-size: 34px; opacity: 0; filter: drop-shadow(0 4px 6px rgba(0,0,0,.25)); }
.fx-formats.in .ff-tap { animation: tap 2.6s 2.1s ease-in-out infinite; }
@keyframes tap { 0%, 100% { opacity: 0; transform: translate(20px, 20px); } 20%, 70% { opacity: 1; transform: none; } 35% { transform: scale(.82); } 45% { transform: none; } }
/* livre papier qui s'ouvre */
.ff-book { position: relative; width: clamp(170px, 20vw, 230px); aspect-ratio: 1; perspective: 900px; transform-style: preserve-3d; margin: 14px 0 26px; }
.ffb-back, .ffb-pages, .ffb-cover { position: absolute; inset: 0; border-radius: 4px 12px 12px 4px; }
.ffb-back { background: #3E8A66; transform: translateZ(-8px); box-shadow: 0 30px 40px -18px rgba(40,20,50,.45); }
.ffb-pages { inset: 4px 6px 4px 2px; background: repeating-linear-gradient(90deg, #fff 0 2px, #EFE6D6 2px 3px); }
.ffb-pages::after { content: "F… É → FÉ"; position: absolute; inset: 0; display: grid; place-items: center; font: 800 clamp(16px, 2vw, 22px) "Montserrat", sans-serif; color: #6AB4E3; background: #FFFDF6; border-radius: 2px 10px 10px 2px; opacity: .95; }
.ffb-cover { background: #fff right center / 200% auto no-repeat; transform-origin: left center; box-shadow: inset 5px 0 8px -4px rgba(0,0,0,.35), 10px 14px 24px -10px rgba(40,20,50,.35); }
.fx-formats.in .ffb-cover { animation: openBook 2.2s 1.4s cubic-bezier(.6, 0, .2, 1) forwards, breathe 5s 3.8s ease-in-out infinite alternate; }
@keyframes openBook { 0% { transform: rotateY(0); } 100% { transform: rotateY(-62deg); } }
@keyframes breathe { from { transform: rotateY(-62deg); } to { transform: rotateY(-38deg); } }
/* écriture à la main */
.ff-name { font-size: clamp(26px, 3vw, 38px); min-height: 1.2em; }
.ff-write::after { content: "|"; color: var(--raspberry); animation: blink .8s steps(1) infinite; margin-left: 2px; }
.ff-write.done::after { display: none; }
@keyframes blink { 50% { opacity: 0; } }
/* « ou » */
.ff-or { position: relative; width: clamp(110px, 14vw, 200px); }
.ff-or svg { width: 100%; overflow: visible; }
.ff-or .arrow { stroke: var(--raspberry); stroke-width: 5; }
.fx-formats.in .ff-or .arrow { animation-delay: .9s; }
.ff-ou { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -10%) rotate(-8deg) scale(0); font: 700 clamp(44px, 5vw, 70px)/1 var(--hand, "Caveat"), cursive; color: var(--raspberry); }
.fx-formats.in .ff-ou { animation: ouIn .7s 1.5s var(--spring) forwards; }
@keyframes ouIn { to { transform: translate(-50%, -10%) rotate(-8deg) scale(1); } }
/* bandelettes façon Instagram */
.ff-strips { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; max-width: 340px; }
.ff-strips li { padding: 7px 12px; border-radius: 11px; background: #FFF0A4; color: #A3245A; font: 600 15px "Fredoka", sans-serif; box-shadow: 4px 5px 0 #F6DCE8; opacity: 0; transform: translateY(16px) rotate(calc(-3deg + var(--i) * 2deg)) scale(.7); }
.ff-strips li:nth-child(2n) { background: #F9D7E7; color: #8E2A5C; }
.ff-strips li:nth-child(3n) { background: #E7EDFF; color: #4B4FA0; }
.fx-formats.in .ff-strips li { animation: strip .6s var(--spring) forwards; animation-delay: calc(2.2s + var(--i) * .14s); }
@keyframes strip { to { opacity: 1; transform: rotate(calc(-3deg + var(--i) * 2deg)); } }
.ff-side .btn { opacity: 0; transform: translateY(10px); }
.fx-formats.in .ff-side .btn { animation: strip .5s 2.9s var(--spring) forwards; --i: 1.5; }
html[data-theme="nuit"] .ff-strips li { background: #3A3112; color: #FFE7A8; box-shadow: 4px 5px 0 #1E2C5E; }
html[data-theme="bd"] .ff-strips li { border: 2.5px solid #111; box-shadow: 3px 3px 0 #111; }
@media (max-width: 760px) {
  .ff-stage { grid-template-columns: 1fr; }
  .ff-or { width: 120px; margin: 0 auto; }
  .ff-or svg { display: none; }
  .ff-ou { position: static; display: inline-block; transform: rotate(-8deg) scale(0); }
}
@media (prefers-reduced-motion: reduce) {
  .ln { stroke-dashoffset: 0; } .ff-page, .ff-strips li, .ff-side .btn { opacity: 1; transform: none; }
  .fx-formats .ffb-cover { transform: rotateY(-140deg); } .ff-ou { transform: translate(-50%, -10%) rotate(-8deg); }
}