/* Illustrations : socle commun */
.ill{display:block;width:100%;height:auto;overflow:visible}
.ill .ln{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.ill .shd{fill:var(--ink);opacity:.07}
.ill .fb{transform-box:fill-box;transform-origin:center}
.ill text{font-family:var(--body);letter-spacing:0}
@keyframes twinkle{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.25;transform:scale(.45)}}
@keyframes rise{0%{opacity:0;transform:translateY(8px)}30%{opacity:.85}100%{opacity:0;transform:translateY(-20px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes breathe{0%,100%{transform:scale(.92)}50%{transform:scale(1.1)}}
@keyframes ants{to{stroke-dashoffset:-8}}
@keyframes blink{50%{opacity:.15}}
@keyframes sway{0%,100%{transform:rotate(0)}25%{transform:rotate(var(--a,6deg))}75%{transform:rotate(calc(var(--a,6deg) * -1))}}

/* 01 Saint-Gobain Marine */
.ill-sgm .boat{transform-box:fill-box;transform-origin:50% 85%}
.ill-sgm .pulse{opacity:0;transform-box:fill-box;transform-origin:center}
.ill-sgm .sgc{opacity:0;transform-box:fill-box;transform-origin:0% 100%;transform:scale(.6);transition:opacity .3s,transform .45s cubic-bezier(.2,.9,.3,1.25)}
.on .ill-sgm .sgc{opacity:1;transform:none;transition-delay:.2s}
.on .ill-sgm .boat{animation:sgb 2.8s ease-in-out infinite}
.on .ill-sgm .pulse{animation:sgp 1.8s ease-out infinite;animation-delay:calc(var(--i) * .3s)}
.on .ill-sgm .wv1{animation:sgw 1.8s linear infinite}
.on .ill-sgm .wv2{animation:sgw2 3s linear infinite}
@keyframes sgb{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(-1.3deg)}}
@keyframes sgp{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(2.8)}}
@keyframes sgw{to{transform:translateX(-60px)}}
@keyframes sgw2{to{transform:translateX(60px)}}

/* 02 Tavu */
.ill-tavu .ant{transform-box:view-box;transform-origin:110px 80px}
.ill-tavu .ch1,.ill-tavu .ch2,.ill-tavu .ch3,.ill-tavu .k{opacity:0}
.on .ill-tavu .ant{--a:6deg;animation:sway 1.2s ease-in-out infinite}
.on .ill-tavu .ch0{opacity:0}
.on .ill-tavu .ch1{animation:tv1 2.4s steps(1,end) infinite}
.on .ill-tavu .ch2{animation:tv2 2.4s steps(1,end) infinite}
.on .ill-tavu .ch3{animation:tv3 2.4s steps(1,end) infinite}
.on .ill-tavu .k{animation:tvk 1.3s ease-out infinite}
.on .ill-tavu .k2{animation-delay:.4s}
.on .ill-tavu .k3{animation-delay:.8s}
@keyframes tv1{0%{opacity:1}33.3%{opacity:0}100%{opacity:0}}
@keyframes tv2{0%{opacity:0}33.3%{opacity:1}66.6%{opacity:0}100%{opacity:0}}
@keyframes tv3{0%{opacity:0}66.6%{opacity:1}100%{opacity:1}}
@keyframes tvk{0%{opacity:0;transform:translate(0,0)}15%{opacity:1}45%{transform:translate(var(--dx),-30px)}80%{opacity:1;transform:translate(calc(var(--dx) * 2),-6px)}100%{opacity:0;transform:translate(calc(var(--dx) * 2),-4px)}}

/* 03 Château Perché */
.ill-cp .beams{opacity:0;transform-box:view-box;transform-origin:120px 64px;transition:opacity .4s}
.on .ill-cp .beams{opacity:.55;--a:16deg;animation:sway 2.6s ease-in-out infinite}
.ill-cp .flag{transform-box:fill-box;transform-origin:0% 50%}
.on .ill-cp .flag{animation:cpf .5s ease-in-out infinite alternate}
.on .ill-cp .tiles{animation:cpt .8s steps(2) infinite}
.ill-cp .nt{opacity:0}
.on .ill-cp .nt{animation:rise 1.8s ease-out infinite}
.on .ill-cp .n2{animation-delay:.9s}
.on .ill-cp .spk{animation:twinkle 1s ease-in-out infinite}
@keyframes cpf{to{transform:scaleX(.7) skewY(5deg)}}
@keyframes cpt{to{transform:translateX(-14px)}}

/* 04 Collage */
.ill-col .bl1,.ill-col .bl2{transform-box:view-box;transform-origin:176px 146px}
.ill-col .bl1{transform:rotate(-5deg)}
.ill-col .bl2{transform:rotate(5deg)}
.on .ill-col .bl1{animation:cs1 .8s ease-in-out infinite}
.on .ill-col .bl2{animation:cs2 .8s ease-in-out infinite}
.on .ill-col .cut{animation:ants .6s linear infinite}
.ill-col .lift{transform-box:fill-box;transform-origin:center;transition:transform .5s cubic-bezier(.2,.9,.3,1.2)}
.on .ill-col .lift{transform:translate(-8px,-12px) rotate(-10deg) scale(1.06)}
.ill-col .stk,.ill-col .pshd{opacity:0;transition:opacity .35s}
.on .ill-col .stk{opacity:1}
.on .ill-col .pshd{opacity:.15}
@keyframes cs1{0%,100%{transform:rotate(-5deg)}45%{transform:rotate(-16deg)}75%{transform:rotate(0)}}
@keyframes cs2{0%,100%{transform:rotate(5deg)}45%{transform:rotate(16deg)}75%{transform:rotate(0)}}

/* 05 Soka */
.ill-sok .pool,.ill-sok .cone,.ill-sok .glow{opacity:0;transition:opacity .45s}
.ill-sok .bulb{transition:fill .3s}
.ill-sok .la{transform-box:view-box;transform-origin:96px 13px}
.ill-sok .lb{transform-box:view-box;transform-origin:176px 13px}
.ill-sok .lb .cone,.ill-sok .lb .glow{transition-delay:.15s}
.on .ill-sok .pool{opacity:.3}
.on .ill-sok .cone{opacity:.24}
.on .ill-sok .glow{opacity:.55;animation:breathe 1.8s ease-in-out infinite}
.on .ill-sok .bulb{fill:#fff4b8}
.on .ill-sok .la{--a:2.5deg;animation:sway 3s ease-in-out infinite}
.on .ill-sok .lb{--a:3.5deg;animation:sway 2.4s ease-in-out infinite .2s}

/* 06 Hub */
.on .ill-hub .hc{animation:hbf 2.4s ease-in-out infinite;animation-delay:calc(var(--i) * .12s)}
.on .ill-hub .hc.c2{animation:hbp 2.4s ease-in-out infinite;animation-delay:0s}
.ill-hub .chk{opacity:0;transform-box:fill-box;transform-origin:center}
.on .ill-hub .chk{animation:hbc 2.4s ease-in-out infinite}
@keyframes hbf{0%,55%,100%{transform:translateY(0)}12%{transform:translateY(-12px)}24%{transform:translateY(0)}}
@keyframes hbp{0%,30%{transform:translateY(0)}48%,82%{transform:translateY(-38px)}100%{transform:translateY(0)}}
@keyframes hbc{0%,48%{opacity:0;transform:scale(.4)}56%,82%{opacity:1;transform:scale(1)}92%,100%{opacity:0;transform:scale(1)}}

/* 07 RATZ */
.ill-rtz .lan{transform-box:view-box;transform-origin:64px 4px}
.on .ill-rtz .lan{--a:7deg;animation:sway 2.2s ease-in-out infinite}
.ill-rtz .rat{transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
.on .ill-rtz .rat{transform:translateY(-40px)}
.ill-rtz .wh{transform-box:fill-box;transform-origin:100% 50%}
.on .ill-rtz .wh{animation:rwh .25s ease-in-out infinite alternate}
.ill-rtz .chop{transition:transform .5s cubic-bezier(.3,1.3,.5,1)}
.on .ill-rtz .chop{transform:translateY(-12px)}
.ill-rtz .nd{transform-box:fill-box;transform-origin:50% 0%;transition:transform .5s}
.on .ill-rtz .nd{transform:scaleY(1.6)}
.ill-rtz .st{opacity:0}
.on .ill-rtz .st{animation:rise 1.8s ease-out infinite}
.on .ill-rtz .st:nth-child(2){animation-delay:.5s}
.on .ill-rtz .st:nth-child(3){animation-delay:1s}
@keyframes rwh{to{transform:rotate(9deg)}}

/* 08 Oracle 98 */
.ill-ora .halo{opacity:0;transition:opacity .4s}
.on .ill-ora .halo{opacity:.38;animation:breathe 1.6s ease-in-out infinite}
.on .ill-ora .swirl{animation:spin 2.4s linear infinite}
.on .ill-ora .tw{animation:twinkle 1.4s ease-in-out infinite;animation-delay:var(--d)}
.on .ill-ora .spk{animation:twinkle 1.1s ease-in-out infinite}
.on .ill-ora .s2{animation-delay:.5s}
.on .ill-ora .cur{animation:orc 2.4s ease-in-out infinite}
@keyframes orc{0%,100%{transform:translate(0,0)}40%,62%{transform:translate(-24px,-20px)}50%{transform:translate(-24px,-20px) scale(.9)}}

/* 09 Clip Mely */
.on .ill-mly .spr{animation:mlr .5s linear infinite}
.ill-mly .beam{opacity:.16}
.on .ill-mly .beam{animation:mlb .9s ease-in-out infinite alternate}
.ill-mly .ship{transform-box:fill-box;transform-origin:50% 30%}
.on .ill-mly .ship{animation:mls 2.2s ease-in-out infinite}
.on .ill-mly .lt{animation:blink .5s steps(1) infinite}
.on .ill-mly .l2{animation-delay:.25s}
.on .ill-mly .tw{animation:twinkle 1.5s ease-in-out infinite;animation-delay:var(--d)}
@keyframes mlr{to{transform:translateX(-16px)}}
@keyframes mlb{from{opacity:.12}to{opacity:.45}}
@keyframes mls{0%,100%{transform:translate(0,0) rotate(-3deg)}50%{transform:translate(-6px,-8px) rotate(4deg)}}

/* 10 Trame */
.ill-qr .dt{transform-box:fill-box;transform-origin:center}
.on .ill-qr .dt{animation:qrd 1.2s ease-in-out infinite;animation-delay:var(--d)}
.ill-qr .scan{opacity:0}
.on .ill-qr .scan{opacity:.9;animation:qrs 1.6s ease-in-out infinite alternate}
@keyframes qrd{0%,100%{transform:scale(1)}40%{transform:scale(.3)}}
@keyframes qrs{to{transform:translateY(86px)}}

/* 11 Carnet */
.ill-car .letter{transition:transform .5s cubic-bezier(.2,.9,.3,1.2)}
.on .ill-car .letter{transform:translateY(-30px) rotate(-2deg)}
.ill-car .plane{opacity:0}
.on .ill-car .plane{animation:cfl 2s ease-in infinite .4s}
.ill-car .stamp{transform-box:fill-box;transform-origin:center}
.on .ill-car .stamp{animation:cst .5s ease-in-out infinite alternate}
@keyframes cfl{0%{opacity:0;transform:translate(0,-26px)}15%{opacity:1}100%{opacity:0;transform:translate(56px,-86px) rotate(-8deg)}}
@keyframes cst{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}

/* 12 Ardoise */
.ill-ard .chk{stroke-dasharray:1 1;stroke-dashoffset:0}
.on .ill-ard .chk{animation:adw 3.2s ease-in-out infinite backwards}
.on .ill-ard .c1{animation-delay:.35s}
.on .ill-ard .c2{animation-delay:.55s}
.on .ill-ard .c3{animation-delay:.7s}
.on .ill-ard .c4{animation-delay:.8s}
.on .ill-ard .c5{animation-delay:1s}
.on .ill-ard .c6{animation-delay:1.15s}
.on .ill-ard .c7{animation-delay:1.25s}
.on .ill-ard .c8{animation-delay:1.45s}
.on .ill-ard .c9{animation-delay:1.55s}
.ill-ard .slate{transition:transform .5s cubic-bezier(.2,.9,.3,1.1)}
.on .ill-ard .slate{transform:translateY(-12px)}
.ill-ard .shd{transform-box:fill-box;transform-origin:center;transition:transform .5s,opacity .5s}
.on .ill-ard .shd{transform:scale(.8);opacity:.04}
@keyframes adw{0%{stroke-dashoffset:1}22%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}

/* 13 Maison */
.ill-mai .roof{transform-box:fill-box;transform-origin:50% 100%;transition:transform .55s cubic-bezier(.2,.9,.3,1.2)}
.on .ill-mai .roof{transform:translateY(-32px) rotate(-6deg)}
.on .ill-mai .it{animation:mah 1.8s ease-in-out infinite;animation-delay:calc(.12s + var(--i) * .14s)}
.ill-mai .pf{opacity:0;transform-box:fill-box;transform-origin:center}
.on .ill-mai .pf{animation:map 1.8s ease-out infinite}
.on .ill-mai .p2{animation-delay:.6s}
.on .ill-mai .p3{animation-delay:1.2s}
@keyframes mah{0%{transform:translateY(0)}25%{transform:translateY(-36px)}45%,75%{transform:translateY(-27px)}100%{transform:translateY(0)}}
@keyframes map{0%{opacity:0;transform:translateY(8px) scale(.5)}30%{opacity:.9}100%{opacity:0;transform:translateY(-14px) scale(1.2)}}

/* 14 Vigie */
.ill-vig .beam{opacity:0}
.on .ill-vig .beam{animation:vgs 2.4s ease-in-out infinite}
.ill-vig .halo{opacity:0;transition:opacity .4s}
.on .ill-vig .halo{opacity:.5;animation:breathe 2.4s ease-in-out infinite}
.ill-vig .bird{transform-box:fill-box;transform-origin:center}
.on .ill-vig .bird{animation:vgb 2.4s ease-in-out infinite}
@keyframes vgs{0%,100%{opacity:.42;transform:scaleX(1)}50%{opacity:.12;transform:scaleX(.1)}}
@keyframes vgb{0%,100%{transform:translate(0,0) scaleY(1)}25%{transform:translate(-8px,-3px) scaleY(.4)}50%{transform:translate(-16px,0) scaleY(1)}75%{transform:translate(-8px,2px) scaleY(.4)}}

/* 15 Plugins */
.ill-plg .plug{transition:transform .45s cubic-bezier(.5,0,.2,1)}
.on .ill-plg .plug{transform:translateX(22px)}
.ill-plg .spark{opacity:0}
.on .ill-plg .spark{animation:pgs 1.2s ease-out infinite .4s}
.ill-plg .led{transition:fill .3s .35s}
.on .ill-plg .led{fill:#5cc98a}
.ill-plg .b{opacity:0;transform:translateY(10px);transition:opacity .35s,transform .45s cubic-bezier(.3,1.5,.5,1)}
.on .ill-plg .b{opacity:1;transform:none}
.on .ill-plg .b1{transition-delay:.45s}
.on .ill-plg .b2{transition-delay:.55s}
.on .ill-plg .b3{transition-delay:.65s}
.on .ill-plg .bdg{animation:pgf 2.4s ease-in-out infinite 1s}
@keyframes pgs{0%{opacity:0}10%{opacity:1}40%,100%{opacity:0}}
@keyframes pgf{50%{transform:translateY(-4px)}}

/* 16 Cours */
.ill-crs .flip{transform-box:fill-box;transform-origin:0% 50%}
.on .ill-crs .flip{animation:crf 2.6s cubic-bezier(.55,0,.35,1) infinite}
.ill-crs .rib{transform-box:fill-box;transform-origin:50% 0%}
.on .ill-crs .rib{animation:crr 1.3s ease-in-out infinite alternate}
@keyframes crf{0%{transform:scaleX(1);opacity:1}42%{transform:scaleX(-1);opacity:1}50%{transform:scaleX(-1);opacity:0}99%{transform:scaleX(-1);opacity:0}100%{transform:scaleX(1);opacity:0}}
@keyframes crr{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}

/* 17 Partition vivante */
.ill-par .ph{opacity:0}
.on .ill-par .ph{opacity:.16;animation:pph 1.6s steps(8,end) infinite}
.on .ill-par .hit{animation:phit 1.6s steps(1,end) infinite;animation-delay:var(--d)}
.ill-par .wv{opacity:.25}
.on .ill-par .wv{animation:pwv .4s ease-in-out infinite alternate}
.on .ill-par .w2{animation-delay:.2s}
@keyframes pph{from{transform:translateX(0)}to{transform:translateX(136px)}}
@keyframes phit{0%{fill:#e4473b}12.5%{fill:#1f1f1d}100%{fill:#1f1f1d}}
@keyframes pwv{from{opacity:.2}to{opacity:1}}

/* 18 Mi-chemin */
.on .ill-mic .wa{animation:mca 3.2s ease-in-out infinite}
.on .ill-mic .wb{animation:mcb 3.2s ease-in-out infinite}
.ill-mic .heart{opacity:0;transform:scale(.3)}
.on .ill-mic .heart{animation:mch 3.2s ease-out infinite}
.on .ill-mic .route{animation:ants 1s linear infinite}
@keyframes mca{0%{transform:translate(0,0);opacity:1}12%{transform:translate(13px,-22px)}24%{transform:translate(29px,-31px)}36%{transform:translate(45px,-36px)}48%,86%{transform:translate(56px,-47px);opacity:1}92%{opacity:0;transform:translate(56px,-47px)}96%{opacity:0;transform:translate(0,0)}100%{opacity:1;transform:translate(0,0)}}
@keyframes mcb{0%{transform:translate(0,0);opacity:1}12%{transform:translate(-12px,-18px)}24%{transform:translate(-28px,-33px)}36%{transform:translate(-45px,-39px)}48%,86%{transform:translate(-56px,-29px);opacity:1}92%{opacity:0;transform:translate(-56px,-29px)}96%{opacity:0;transform:translate(0,0)}100%{opacity:1;transform:translate(0,0)}}
@keyframes mch{0%,46%{opacity:0;transform:scale(.3)}56%{opacity:1;transform:scale(1.15)}62%,86%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(1)}}

/* 19 Galaxie */
.on .ill-gal .truck{animation:gli .35s ease-in-out infinite alternate}
.ill-gal .st{opacity:0}
.on .ill-gal .st{animation:rise 1.6s ease-out infinite}
.on .ill-gal .s2{animation-delay:.6s}
.on .ill-gal .pl{animation:glo 3.6s ease-in-out infinite}
.on .ill-gal .tw{animation:twinkle 1.2s ease-in-out infinite;animation-delay:var(--d)}
.on .ill-gal .bar{animation:breathe .9s ease-in-out infinite}
@keyframes gli{to{transform:translateY(-1.6px)}}
@keyframes glo{0%,100%{transform:translate(0,0)}25%{transform:translate(70px,-26px)}50%{transform:translate(132px,-2px)}75%{transform:translate(66px,18px)}}

/* 20 Mir4culeuse */
.ill-mir .pend{transform-box:view-box;transform-origin:120px 26px}
.on .ill-mir .pend{--a:7deg;animation:sway 2.6s ease-in-out infinite}
.on .ill-mir .glint{animation:mrg 2.6s ease-in-out infinite}
.on .ill-mir .tw{animation:twinkle 1.3s ease-in-out infinite;animation-delay:var(--d)}
@keyframes mrg{0%,30%{transform:translateX(0)}70%,100%{transform:translateX(100px)}}


.on .ill-fusee .rk{animation:arRk 1.2s ease-in-out infinite}
.ill-fusee .fl{transform-box:fill-box;transform-origin:50% 0}
.on .ill-fusee .fl{animation:arFl .14s ease-in-out infinite alternate}
.on .ill-fusee .tw,.on .ill-etoile .tw{animation:twinkle 1.2s ease-in-out infinite;animation-delay:var(--d)}
@keyframes arRk{50%{transform:translateY(-16px)}}
@keyframes arFl{to{transform:scaleY(1.4)}}
.on .ill-photo .lens{animation:spin 2s linear infinite}
.ill-photo .flashg{opacity:0}
.on .ill-photo .flashg{animation:arFlash 1.6s ease-out infinite}
@keyframes arFlash{0%,70%{opacity:0;transform:scale(.4)}74%{opacity:.95;transform:scale(1)}100%{opacity:0;transform:scale(1.6)}}
.ill-tasse .st{opacity:0}
.on .ill-tasse .st{animation:rise 1.8s ease-out infinite}
.on .ill-tasse .s2{animation-delay:.6s}.on .ill-tasse .s3{animation-delay:1.2s}
.on .ill-vinyle .disc{animation:spin 1.6s linear infinite}
.ill-vinyle .arm{transform-box:view-box;transform-origin:186px 60px;transition:transform .5s}
.on .ill-vinyle .arm{transform:rotate(-8deg)}
.ill-vinyle .nt{opacity:0}
.on .ill-vinyle .nt{animation:rise 1.4s ease-out infinite}
.on .ill-globe .land{animation:arLand 4s linear infinite}
@keyframes arLand{to{transform:translateX(-160px)}}
.ill-sac .bag{transform-box:fill-box;transform-origin:50% 100%}
.on .ill-sac .bag{animation:arHop .7s ease-in-out infinite}
.ill-sac .hrt{opacity:0}
.on .ill-sac .hrt{animation:rise 1.4s ease-out infinite}
@keyframes arHop{0%,100%{transform:scale(1,1)}30%{transform:scale(1.06,.94)}60%{transform:translateY(-10px)}}
.ill-mobile .m2,.ill-mobile .m3{opacity:0;transform:translateY(8px);transition:opacity .3s,transform .4s cubic-bezier(.2,1.5,.4,1)}
.on .ill-mobile .m2,.on .ill-mobile .m3{opacity:1;transform:none}
.on .ill-mobile .m3{transition-delay:.3s}
.on .ill-mobile .ntf{animation:breathe .8s ease-in-out infinite}
.ill-laptop .cd{stroke-dasharray:1 1}
.on .ill-laptop .cd{animation:arType 2.4s steps(12) infinite backwards}
.on .ill-laptop .c2{animation-delay:.4s}.on .ill-laptop .c3{animation-delay:.8s}.on .ill-laptop .c4{animation-delay:1.2s}
.on .ill-laptop .cur{animation:blink .6s steps(1) infinite}
@keyframes arType{0%{stroke-dashoffset:1}40%,100%{stroke-dashoffset:0}}
.ill-palette .brush{transform-box:view-box;transform-origin:204px 120px}
.on .ill-palette .brush{animation:sway 1s ease-in-out infinite;--a:10deg}
.ill-palette .paint{stroke-dasharray:1 1;stroke-dashoffset:1}
.on .ill-palette .paint{animation:arPaint 2s ease-in-out infinite}
@keyframes arPaint{0%{stroke-dashoffset:1}60%,100%{stroke-dashoffset:0}}
.ill-manette .pad{transform-box:fill-box;transform-origin:center}
.on .ill-manette .pad{animation:sway .5s ease-in-out infinite;--a:3deg}
.on .ill-manette .bt{animation:blink .8s steps(1) infinite}
.on .ill-manette .b2{animation-delay:.2s}.on .ill-manette .b3{animation-delay:.4s}.on .ill-manette .b4{animation-delay:.6s}
.ill-graphique .br{transform-box:fill-box;transform-origin:50% 100%}
.on .ill-graphique .br{animation:arBar 1.6s ease-in-out infinite;animation-delay:calc(var(--i) * .12s)}
@keyframes arBar{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.4)}}
.ill-graphique .ln2{stroke-dasharray:1 1}
.on .ill-graphique .ln2{animation:arPaint 1.6s ease-in-out infinite}
.ill-megaphone .wv{opacity:0}
.on .ill-megaphone .wv{animation:arWv 1.2s ease-out infinite}
.on .ill-megaphone .w2{animation-delay:.2s}.on .ill-megaphone .w3{animation-delay:.4s}
.ill-megaphone .mg{transform-box:fill-box;transform-origin:20% 50%}
.on .ill-megaphone .mg{animation:sway .4s ease-in-out infinite;--a:3deg}
@keyframes arWv{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
.ill-plante .lv{transform-box:fill-box;transform-origin:50% 100%}
.on .ill-plante .lv{animation:sway 1.6s ease-in-out infinite;--a:6deg}
.ill-plante .l3{transform-box:fill-box;transform-origin:50% 100%;transition:transform .6s cubic-bezier(.2,1.5,.4,1)}
.on .ill-plante .l3{transform:scale(1.18)}
.ill-cadeau .lid{transition:transform .5s cubic-bezier(.2,1.6,.4,1)}
.on .ill-cadeau .lid{transform:translateY(-26px) rotate(-8deg)}
.ill-cadeau .spark{opacity:0}
.on .ill-cadeau .spark{animation:blink .5s steps(1) infinite}
.ill-ampoule .glow,.ill-ampoule .rays{opacity:0;transition:opacity .4s}
.ill-ampoule .bulb{transition:fill .3s}
.on .ill-ampoule .glow{opacity:.6;animation:breathe 1.4s ease-in-out infinite}
.on .ill-ampoule .rays{opacity:1}
.on .ill-ampoule .bulb{fill:#fff4b8}
.on .ill-etoile .sg{animation:spin 3s linear infinite}

/* Formes pour pages et articles */
.ill-bottle .btl,.ill-buoy .by{transform-box:fill-box;transform-origin:50% 80%;animation:arBob 3s ease-in-out infinite}
.ill-sign .pn{transform-box:fill-box;transform-origin:50% 100%}
.on .ill-sign .pn{animation:sway 1.4s ease-in-out infinite;--a:4deg}
.on .ill-buoy .lamp{animation:blink .8s steps(1) infinite}
.ill-chest .glowc{transform-box:fill-box;transform-origin:center;animation:breathe 1.6s ease-in-out infinite}
@keyframes arBob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-6px) rotate(3deg)}}
/* Images personnalisées et leurs animations */
.ill-img{display:grid;place-items:center;aspect-ratio:1}
.ill-img img{display:block;max-width:86%;max-height:86%;object-fit:contain;filter:drop-shadow(0 6px 0 rgba(31,31,29,.08))}
.on .ill-img.anim-float img{animation:arFloat 2s ease-in-out infinite}
.on .ill-img.anim-swing img{animation:sway 1.4s ease-in-out infinite;--a:8deg;transform-origin:50% 0}
.on .ill-img.anim-pulse img{animation:breathe 1s ease-in-out infinite}
.on .ill-img.anim-spin img{animation:spin 3s linear infinite}
.on .ill-img.anim-bounce img{animation:arHop .7s ease-in-out infinite;transform-origin:50% 100%}
.on .ill-img.anim-wiggle img{animation:sway .3s ease-in-out infinite;--a:5deg}
@keyframes arFloat{50%{transform:translateY(-10px)}}
@keyframes arHop{0%,100%{transform:scale(1,1)}30%{transform:scale(1.06,.94)}60%{transform:translateY(-10px)}}
@media (prefers-reduced-motion:reduce){.ill *,.ill-img img{animation:none !important;transition:none !important}}