/* ---------------------------------------------- * Generated by Animista on 2023-10-8 0:27:35 * Licensed under FreeBSD License. * See http://animista.net/license for more info. * w: http://animista.net, t: @cssanimista * ---------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Handlee&display=swap'); @-webkit-keyframes roll-in-bottom{0%{-webkit-transform:translateY(800px) rotate(540deg);transform:translateY(800px) rotate(540deg);opacity:0}100%{-webkit-transform:translateY(0) rotate(0deg);transform:translateY(0) rotate(0deg);opacity:1}}@keyframes roll-in-bottom{0%{-webkit-transform:translateY(800px) rotate(540deg);transform:translateY(800px) rotate(540deg);opacity:0}100%{-webkit-transform:translateY(0) rotate(0deg);transform:translateY(0) rotate(0deg);opacity:1}} @-webkit-keyframes slide-in-bottom{0%{-webkit-transform:translateY(1000px);transform:translateY(1000px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes slide-in-bottom{0%{-webkit-transform:translateY(1000px);transform:translateY(1000px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}} @-webkit-keyframes slide-in-top{0%{-webkit-transform:translateY(-1000px);transform:translateY(-1000px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes slide-in-top{0%{-webkit-transform:translateY(-1000px);transform:translateY(-1000px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}} @-webkit-keyframes fade-in-top{0%{-webkit-transform:translateY(-50px);transform:translateY(-50px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes fade-in-top{0%{-webkit-transform:translateY(-50px);transform:translateY(-50px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}} @-webkit-keyframes fade-in-bottom{0%{-webkit-transform:translateY(50px);transform:translateY(50px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes fade-in-bottom{0%{-webkit-transform:translateY(50px);transform:translateY(50px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}} .roll-in-bottom{-webkit-animation:roll-in-bottom .6s ease-out both;animation:roll-in-bottom .6s ease-out both} .slide-in-bottom{-webkit-animation:slide-in-bottom .5s cubic-bezier(.25,.46,.45,.94) both;animation:slide-in-bottom .5s cubic-bezier(.25,.46,.45,.94) both} .slide-in-top{-webkit-animation:slide-in-top .5s cubic-bezier(.25,.46,.45,.94) both;animation:slide-in-top .5s cubic-bezier(.25,.46,.45,.94) both} .fade-in-top{-webkit-animation:fade-in-top .6s cubic-bezier(.39,.575,.565,1.000) both;animation:fade-in-top .6s cubic-bezier(.39,.575,.565,1.000) both} .fade-in-bottom{-webkit-animation:fade-in-bottom .6s cubic-bezier(.39,.575,.565,1.000) both;animation:fade-in-bottom .6s cubic-bezier(.39,.575,.565,1.000) both} @-webkit-keyframes scale-out-center{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}100%{-webkit-transform:scale(0);transform:scale(0);opacity:1}}@keyframes scale-out-center{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}100%{-webkit-transform:scale(0);transform:scale(0);opacity:1}} @-webkit-keyframes bounce-out-left{0%{-webkit-transform:translateX(0);transform:translateX(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}5%{-webkit-transform:translateX(-30px);transform:translateX(-30px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}15%{-webkit-transform:translateX(0);transform:translateX(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}25%{-webkit-transform:translateX(-38px);transform:translateX(-38px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}38%{-webkit-transform:translateX(0);transform:translateX(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}52%{-webkit-transform:translateX(-80px);transform:translateX(-80px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}70%{-webkit-transform:translateX(0);transform:translateX(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}85%{opacity:1}100%{-webkit-transform:translateX(-1000px);transform:translateX(-1000px);opacity:0}}@keyframes bounce-out-left{0%{-webkit-transform:translateX(0);transform:translateX(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}5%{-webkit-transform:translateX(-30px);transform:translateX(-30px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}15%{-webkit-transform:translateX(0);transform:translateX(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}25%{-webkit-transform:translateX(-38px);transform:translateX(-38px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}38%{-webkit-transform:translateX(0);transform:translateX(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}52%{-webkit-transform:translateX(-80px);transform:translateX(-80px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}70%{-webkit-transform:translateX(0);transform:translateX(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}85%{opacity:1}100%{-webkit-transform:translateX(-1000px);transform:translateX(-1000px);opacity:0}} @-webkit-keyframes bounce-out-right{0%{-webkit-transform:translateX(0);transform:translateX(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}5%{-webkit-transform:translateX(30px);transform:translateX(30px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}15%{-webkit-transform:translateX(0);transform:translateX(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}25%{-webkit-transform:translateX(38px);transform:translateX(38px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}38%{-webkit-transform:translateX(0);transform:translateX(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}52%{-webkit-transform:translateX(80px);transform:translateX(80px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}65%{-webkit-transform:translateX(0);transform:translateX(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}85%{opacity:1}100%{-webkit-transform:translateX(1000px);transform:translateX(1000px);opacity:0}}@keyframes bounce-out-right{0%{-webkit-transform:translateX(0);transform:translateX(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}5%{-webkit-transform:translateX(30px);transform:translateX(30px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}15%{-webkit-transform:translateX(0);transform:translateX(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}25%{-webkit-transform:translateX(38px);transform:translateX(38px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}38%{-webkit-transform:translateX(0);transform:translateX(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}52%{-webkit-transform:translateX(80px);transform:translateX(80px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}65%{-webkit-transform:translateX(0);transform:translateX(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}85%{opacity:1}100%{-webkit-transform:translateX(1000px);transform:translateX(1000px);opacity:0}} @-webkit-keyframes fade-out-right{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform:translateX(50px);transform:translateX(50px);opacity:0}}@keyframes fade-out-right{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform:translateX(50px);transform:translateX(50px);opacity:0}} .scale-out-center.htmx-swapping{-webkit-animation:scale-out-center .5s cubic-bezier(.55,.085,.68,.53) both;animation:scale-out-center .5s cubic-bezier(.55,.085,.68,.53) both} .bounce-out-left{-webkit-animation:bounce-out-left 1.5s both;animation:bounce-out-left 1.5s both} .bounce-out-right{-webkit-animation:bounce-out-right 1.5s both;animation:bounce-out-right 1.5s both} .fade-out-right{-webkit-animation:fade-out-right .7s cubic-bezier(.25,.46,.45,.94) both;animation:fade-out-right .7s cubic-bezier(.25,.46,.45,.94) both} @-webkit-keyframes text-focus-in{0%{-webkit-filter:blur(12px);filter:blur(12px);opacity:0}100%{-webkit-filter:blur(0);filter:blur(0);opacity:1}}@keyframes text-focus-in{0%{-webkit-filter:blur(12px);filter:blur(12px);opacity:0}100%{-webkit-filter:blur(0);filter:blur(0);opacity:1}} .text-focus-in{-webkit-animation:text-focus-in .5s cubic-bezier(.55,.085,.68,.53) both;animation:text-focus-in .5s cubic-bezier(.55,.085,.68,.53) both} @-webkit-keyframes jello-horizontal{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes jello-horizontal{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}} .jello-horizontal {-webkit-animation:jello-horizontal .9s both;animation:jello-horizontal .9s both} @-webkit-keyframes heartbeat{from{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:center center;transform-origin:center center;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}10%{-webkit-transform:scale(.91);transform:scale(.91);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}17%{-webkit-transform:scale(.98);transform:scale(.98);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}33%{-webkit-transform:scale(.87);transform:scale(.87);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}45%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes heartbeat{from{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:center center;transform-origin:center center;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}10%{-webkit-transform:scale(.91);transform:scale(.91);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}17%{-webkit-transform:scale(.98);transform:scale(.98);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}33%{-webkit-transform:scale(.87);transform:scale(.87);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}45%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}} .heartbeat{-webkit-animation:heartbeat 1.5s ease-in-out infinite both;animation:heartbeat 1.5s ease-in-out infinite both} .ce-block__content, .ce-toolbar__content { max-width:calc(100% - 80px) !important; } .cdx-block { max-width: 100% !important; } @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .animated-gradient { background: linear-gradient(-45deg, #ff6b6b, #f5f7fa, #4ecdc4, #556270); background-size: 400% 400%; animation: gradientShift 15s ease infinite; } .animated-bg { background-size: 300% 300%; animation: gradientShift2 10s ease infinite; padding: 1rem 1.5rem; font-weight: 500; text-align: center; } @keyframes gradientShift2 { 0% { background-position: 0% -400%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .bg-info { background-image: linear-gradient(270deg, #38bdf8, #0ea5e9, #38bdf8); /* sky-400 -> blue-500 */ } .bg-success { background-image: linear-gradient(270deg, #34d399, #10b981, #34d399); /* green-400 -> emerald-500 */ } .bg-warning { background-image: linear-gradient(270deg, #fef9c3, #fde68a, #fdba74); /* yellow-100 -> orange-300 */ } .bg-error { background-image: linear-gradient(270deg, #f87171, #ef4444, #f87171); /* red-400 -> red-500 */ } .animated-text { font-weight: bold; background: linear-gradient(270deg, #ff6b6b, #f0e130, #4ecdc4, #ff6b6b); background-size: 800% 800%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: moveGradient 10s ease infinite; } .big-animated-text { font-size: 3rem; font-weight: bold; background: linear-gradient(270deg, #ff6b6b, #f0e130, #4ecdc4, #ff6b6b); background-size: 800% 800%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: moveGradient 10s ease infinite; } @keyframes moveGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .animated-border { position: relative; padding: 1rem 2rem; font-size: 1.5rem; border: 4px solid transparent; border-radius: 12px; background-image: linear-gradient(white, white), linear-gradient(270deg, #ff6b6b, #f0e130, #4ecdc4, #ff6b6b); background-origin: border-box; background-clip: content-box, border-box; -webkit-background-clip: content-box, border-box; background-size: 300% 300%; animation: borderAnimation 8s linear infinite; } @keyframes borderAnimation { 0% { background-position: center 0%, center 0%; } 100% { background-position: center 100%, center 100%; } } html { scroll-behavior: smooth; } .font-handwriting { font-family: 'Handlee', cursive; } @font-face { font-family: 'Andika'; src: url('/fonts/Andika-Regular.ttf') format('truetype'); font-weight: 100 900; /* plage variable */ font-display: swap; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } .animate-float { animation: float 3s ease-in-out infinite; } @keyframes swing { 0% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } 100% { transform: rotate(-2deg); } } .animate-swing { animation: swing 4s ease-in-out infinite; transform-origin: top center; } table.magic-table { width: 100%; border-collapse: collapse; table-layout: fixed; } table.magic-table th, table.magic-table td { box-sizing: border-box; } body { /* font-family: 'Andika', sans-serif; */ } .pointer { cursor: pointer; } /* couleur de fond + hachure par-dessus */ .hatch { background-color: #f7f7f7; background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.12) 0 1px, transparent 1px 16px); } .bg-stripes-gray { background-color: #9ca3af1a; background-image: linear-gradient(135deg, #6b728080 10%, #0000 0, #0000 50%, #6b728080 0, #6b728080 60%, #0000 0, #0000); background-size: 7.07px 7.07px; } .table-sticky thead th { position: sticky; top: 0; background: white; z-index: 7; box-shadow: 0 2px 2px rgba(0,0,0,0.05); } .table-sticky thead th:first-child { z-index: 8; } .tippy-box { width: 100%; background: white; color: black; border: 1px solid #ddd; box-sizing: border-box; border-radius: 0.5rem; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); } .tippy-content { padding: 0; width: 100%; } .tippy-arrow { color: rgb(200 200 200 / 1); }