/* JOAS · Base
 * Règles globales reprises telles quelles de la feuille de style des maquettes
 * (reset, focus, accordéons, boutons, animations en cascade, points de rupture).
 * Les couleurs passent par les jetons de tokens.css.
 * Ne pas modifier sans mettre à jour la maquette de référence.
 */
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);color:var(--jo-green)}
*{box-sizing:border-box}
[id]{scroll-margin-top:104px}
a{color:inherit;text-decoration:none}
.jo-nl:hover{text-decoration:underline;text-underline-offset:6px}
footer a:hover{text-decoration:underline;text-underline-offset:3px}
a:focus-visible,button:focus-visible,select:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid var(--jo-teal);outline-offset:3px}
footer a:focus-visible,footer input:focus-visible,footer button:focus-visible{outline-color:#ffffff}
h1,h2,h3,p{text-wrap:balance}
p{text-wrap:pretty}
select{appearance:none;-webkit-appearance:none}
summary{list-style:none;cursor:pointer}
summary::-webkit-details-marker{display:none}
details[open] summary .jo-chev{transform:rotate(180deg)}
#top p,.jo-t6,footer a,footer p{font-weight:600}
.jo-pc{row-gap:0 !important}
.jo-pc h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.jo-pc>article{display:grid !important;grid-row:span 5;grid-template-rows:subgrid;row-gap:0 !important;padding-bottom:44px;align-content:start}
.jo-pc>article>div:first-child{margin-bottom:12px}
.jo-pc>article>div:nth-child(2){display:contents !important}
.jo-pc>article>div:nth-child(2)>:not(h3){margin-top:4px}
:root{interpolate-size:allow-keywords}
summary{transition:background-color .18s ease}
summary:hover{background-color:var(--jo-sand-2)}
@media (prefers-reduced-motion:no-preference){
  details::details-content{block-size:0;overflow:clip;opacity:0;transition:block-size .3s cubic-bezier(.2,.9,.25,1),opacity .2s ease,content-visibility .3s allow-discrete}
  details[open]::details-content{block-size:auto;opacity:1}
  details .jo-chev{transition:transform .3s cubic-bezier(.2,.9,.25,1)}
  details[open]>p{animation:jo-faq-in .32s cubic-bezier(.2,.9,.25,1) both}
}
@keyframes jo-faq-in{from{transform:translateY(-6px)}to{transform:none}}
.jo-prog{display:block;width:100%;height:10px;border:0;border-radius:5px;overflow:hidden;appearance:none;-webkit-appearance:none;background:var(--jo-sand)}
.jo-prog::-webkit-progress-bar{background:var(--jo-sand);border-radius:5px}
.jo-prog::-webkit-progress-value{background:var(--jo-coral);border-radius:5px;transition:width .5s cubic-bezier(.2,.7,.2,1)}
.jo-prog::-moz-progress-bar{background:var(--jo-coral);border-radius:5px}
.jo-qb{width:34px;height:34px;border:0;background:transparent;color:var(--jo-green);font-size:18px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center}
.jo-qb:hover{background:var(--jo-sand-2)}
.jo-rm{border:0;background:transparent;padding:6px 0;font:inherit;font-size:13px;font-weight:600;color:var(--jo-ink-soft);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.jo-rm:hover{color:var(--jo-coral-text)}
@media (prefers-reduced-motion:no-preference){
  .jo-dr-back{animation:jo-dr-fade .3s ease both}
  .jo-dr{animation:jo-dr-slide .42s cubic-bezier(.2,.9,.25,1) both}
  .jo-dr-line{animation:jo-dr-line .4s cubic-bezier(.2,.9,.25,1) both}
}
@keyframes jo-dr-fade{from{opacity:0}to{opacity:1}}
@keyframes jo-dr-slide{from{transform:translateX(100%)}to{transform:none}}
@keyframes jo-dr-line{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@media (max-width:560px){.jo-dr{width:100% !important}}
article>div:has(>img),article>div:has(>a>img){overflow:hidden;border-radius:6px}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  article>div>img,article>div>a>img{transition:transform .6s cubic-bezier(.2,.7,.2,1);will-change:transform}
  article:hover>div>img,article:focus-within>div>img,article:hover>div>a>img,article:focus-within>div>a>img{transform:scale(1.08)}
}
.jo-nl{position:relative;display:inline-block;padding:10px 0}
.jo-nl::after{content:attr(data-t);display:block;height:0;overflow:hidden;visibility:hidden;font-weight:700}
.jo-dd{position:relative;height:96px;display:flex;align-items:center}
.jo-dd:hover>.jo-nl,.jo-dd:focus-within>.jo-nl{font-weight:700}
.jo-dp{position:absolute;top:calc(100% - 14px);z-index:60;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s}
.jo-dp::before{content:'';position:absolute;left:0;right:0;top:-14px;height:14px}
.jo-dd:hover>.jo-dp,.jo-dd:focus-within>.jo-dp{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.jo-mega,.jo-small{position:relative;margin:0;background:var(--jo-ocre);color:var(--jo-green);box-shadow:0 18px 36px rgba(1,69,81,0.16)}
.jo-mega::before,.jo-small::before{content:'';position:absolute;top:-10px;width:0;height:0;border:10px solid transparent;border-top:0;border-bottom:10px solid var(--jo-ocre)}
.jo-mega{display:grid;grid-template-columns:repeat(4,max-content);gap:0 32px;padding:28px 34px 30px}
.jo-mega::before{left:259px;margin-left:-10px}
.jo-small{list-style:none;padding:12px 30px;min-width:208px}
.jo-small::before{left:53px;margin-left:-10px}
.jo-mcol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.jo-mt{display:block;font-size:16px;font-weight:700;padding:0 0 10px;margin-bottom:12px;border-bottom:1px solid var(--jo-green);white-space:nowrap}
.jo-mcol li a,.jo-small li a{display:flex;align-items:center;min-height:36px;font-size:15px;font-weight:500;white-space:nowrap}
.jo-small li+li{border-top:1px solid rgba(1,69,81,0.35)}
@media (prefers-reduced-motion: no-preference){
  @keyframes jo-pop{from{opacity:0;transform:translateY(-10px) scale(.97)}to{opacity:1;transform:none}}
  @keyframes jo-item{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
  .jo-dd-pop{transform-origin:28px 0;animation:jo-pop .24s cubic-bezier(.2,.7,.2,1) both}
  .jo-dd-pop li{animation:jo-item .32s cubic-bezier(.2,.7,.2,1) both}
  .jo-dd-pop li:nth-child(1){animation-delay:.05s}
  .jo-dd-pop li:nth-child(2){animation-delay:.1s}
  .jo-dd-pop li:nth-child(3){animation-delay:.15s}
  .jo-need-title{transition:opacity .2s ease}
}
.jo-small button{display:flex;align-items:center;width:100%;min-height:48px;padding:0;border:0;background:transparent;font:inherit;font-size:16px;font-weight:600;color:var(--jo-green);white-space:nowrap;text-align:left;cursor:pointer}
.jo-small button:hover{text-decoration:underline;text-underline-offset:4px}
button[aria-expanded="true"] .jo-need-chev{transform:rotate(180deg)}
.jo-small li a{min-height:48px;font-size:16px;font-weight:600}
.jo-mcol li a:hover,.jo-small li a:hover,.jo-mt:hover{text-decoration:underline;text-underline-offset:4px}
/* Boutons : remplissage au survol */
.jo-cta-p,.jo-cta-s{background-image:linear-gradient(var(--jo-ocre),var(--jo-ocre)) !important;background-repeat:no-repeat !important;background-position:left center !important;background-size:0% 100% !important}
.jo-cta-p.jo-cta-w{background-image:linear-gradient(#ffffff,#ffffff) !important}
.jo-cta-p:hover,.jo-cta-p:focus-visible,.jo-cta-s:hover,.jo-cta-s:focus-visible{background-size:100% 100% !important;color:var(--jo-green) !important}
.jo-cta-p:hover svg,.jo-cta-p:focus-visible svg{transform:translateX(3px)}
.jo-cta-p:hover>span:first-child{transform:scale(1.1)}
button[aria-label^="Ajouter"]:hover,button[aria-label^="Ajouter"]:focus-visible,a.jo-add:hover,a.jo-add:focus-visible{background:var(--jo-coral) !important;transform:scale(1.12)}
.jo-pill button:hover{background:rgba(255,255,255,0.18) !important;border-radius:4px}
/* Piège à robots des formulaires : jamais visible, sur toutes les pages. */
.jo-hp{position:absolute !important;left:-9999px !important;width:1px !important;height:1px !important;overflow:hidden !important}
@media (prefers-reduced-motion: no-preference){
  .jo-cta-p,.jo-cta-s{transition:background-size .55s cubic-bezier(.2,.7,.2,1),color .3s ease,scale .2s ease}
  .jo-cta-p svg{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
  .jo-cta-p>span:first-child{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
  .jo-cta-p:active,.jo-cta-s:active{scale:.97}
  button[aria-label^="Ajouter"],a.jo-add{transition:transform .25s cubic-bezier(.2,.7,.2,1),background-color .25s ease}
  button[aria-label^="Ajouter"]:active,a.jo-add:active{transform:scale(.92)}
  .jo-pill button{transition:background-color .2s ease}
  @keyframes jo-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
  .jo-hero-text>*{animation:jo-in .9s cubic-bezier(.2,.7,.2,1) both}
  .jo-hero-text>*:nth-child(2){animation-delay:.12s}
  .jo-hero-text>*:nth-child(3){animation-delay:.26s}
  .jo-hero-text>*:nth-child(4){animation-delay:.4s}
}
@supports (animation-timeline: view()){
@media (prefers-reduced-motion: no-preference){
  @keyframes jo-btn-in{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}
  @keyframes jo-nudge{0%{translate:0 0}50%{translate:7px 0}100%{translate:0 0}}
  section:not(.jo-hero) .jo-cta-p,section:not(.jo-hero) .jo-cta-s{animation:jo-btn-in linear both;animation-timeline:view();animation-range:entry 15% entry 70%}
  section:not(.jo-hero) .jo-cta-p svg{animation:jo-nudge linear both;animation-timeline:view();animation-range:entry 70% entry 120%}
}
}
.jo-words{display:inline-grid;text-align:left}
.jo-w{grid-area:1/1;font-family:var(--font-display);font-weight:400;font-size:32px;text-transform:uppercase;color:var(--jo-ocre-dark);opacity:0}
.jo-w:first-child{opacity:1}
@media (prefers-reduced-motion: no-preference){
  @keyframes jo-word{0%{opacity:0}7%{opacity:1}25%{opacity:1}32%{opacity:0}100%{opacity:0}}
  .jo-w{animation:jo-word 12s linear infinite both}
  .jo-w:nth-child(2){animation-delay:3s}
  .jo-w:nth-child(3){animation-delay:6s}
  .jo-w:nth-child(4){animation-delay:9s}
}
@media (max-width:1250px){
  #categories{height:auto !important;padding-top:32px !important;padding-bottom:32px !important}
}
/* Catégories : tuiles verticales, réparties et centrées quel que soit leur nombre (4, 5, 6…) */
#categories{height:auto !important;padding-top:36px !important;padding-bottom:36px !important}
.jo-cat{display:flex !important;flex-wrap:wrap;justify-content:center;gap:16px !important}
.jo-cat a{flex:0 1 228px;flex-direction:column !important;align-items:center !important;justify-content:center !important;gap:10px !important;min-height:0 !important;padding:16px 10px !important;text-align:center}
.jo-cat span{flex:none !important;font-size:18px !important;max-width:100%;text-align:center}
.jo-cat svg{display:none !important}
@media (max-width:1000px){.jo-cat a{flex-basis:calc(50% - 8px)}}
@media (max-width:560px){
  #categories{padding-top:28px !important;padding-bottom:28px !important}
  .jo-cat{gap:12px !important}
  .jo-cat a{flex-basis:calc(50% - 6px);padding:14px 8px !important}
  .jo-cat img{width:60px !important;height:60px !important}
  .jo-cat span{font-size:15px !important}
}
.jo-burger,.jo-menu{display:none}
@media (min-width:1001px){.jo-menu{display:none !important}}
@media (max-width:1000px){
  .jo-nav{display:none !important}
  .jo-burger{display:flex !important}
  .jo-menu{display:block}
  .jo-sec{height:auto !important;min-height:0 !important}
  .jo-side{grid-template-columns:minmax(0,1fr) !important;gap:40px !important}
  .jo-split{grid-template-columns:minmax(0,1fr) !important}
  .jo-split-img{min-height:360px !important}
  .jo-cards3{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .jo-cards2{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .jo-row4{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .jo-row5{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .jo-foot{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .jo-pad{padding-left:24px !important;padding-right:24px !important}
  .jo-hero-text{position:relative !important;left:0 !important;top:0 !important;padding:48px 24px 24px !important}
  .jo-hero-img{position:relative !important;height:auto !important;width:100% !important}
}
@media (max-width:560px){
  [id]{scroll-margin-top:72px}
  .jo-bar span:nth-child(n+2){display:none !important}
  header.jo-pad{height:64px !important;padding:0 12px !important}
  header.jo-pad .jo-logo{height:40px !important}
  header.jo-pad .jo-pill{height:44px !important;padding:0 2px !important}
  header.jo-pad .jo-pill button{width:40px !important}
  .jo-menu a{display:flex;align-items:center;min-height:52px;font-size:18px;font-weight:600;border-bottom:1px solid rgba(1,69,81,0.12)}
  h1{font-size:34px !important}
  h2{font-size:28px !important}
  h2 span{font-size:24px !important}
  footer h2{font-size:16px !important}
  .jo-nat{padding:36px 20px !important}
  .jo-hero-text{padding:36px 20px 8px !important;gap:16px !important}
  .jo-hero-text p{font-size:16px !important}
  .jo-hero-img{margin-top:8px;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 22%) !important;mask-image:linear-gradient(to bottom,transparent 0,#000 22%) !important}
  section.jo-pad{padding-top:56px !important;padding-bottom:56px !important;padding-left:20px !important;padding-right:20px !important}
  div.jo-pad{padding:40px 20px !important}
  div.jo-bar{height:auto !important;min-height:40px;padding:10px 16px !important;text-align:center}
  .jo-split-img{min-height:240px !important}
  .jo-side{gap:32px !important}
  .jo-cards3,.jo-cards2{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:32px 14px !important}
  .jo-art{grid-template-columns:minmax(0,1fr) !important;gap:28px !important}
  .jo-cards3 h3,.jo-cards2 h3{font-size:15px !important}
  .jo-cards3:not(.jo-art),.jo-cards2,.jo-art,.jo-row4:not(.jo-row-r){display:flex !important;overflow-x:auto !important;scroll-snap-type:x mandatory;gap:14px !important;width:calc(100% + 40px) !important;max-width:none !important;margin:0 -20px !important;padding:0 20px 8px !important;scroll-padding-left:20px;scrollbar-width:none;-webkit-overflow-scrolling:touch;align-items:flex-start !important}
  .jo-cards3::-webkit-scrollbar,.jo-cards2::-webkit-scrollbar,.jo-art::-webkit-scrollbar,.jo-row4::-webkit-scrollbar{display:none}
  .jo-cards3:not(.jo-art)>article,.jo-cards2>article{flex:0 0 calc((100% - 14px - 24px) / 2) !important;min-width:0;animation:none !important}
  .jo-pc>article{display:flex !important;flex-direction:column !important;grid-row:auto !important;padding-bottom:0 !important;gap:12px !important}
  .jo-pc>article>div:first-child{margin-bottom:0}
  .jo-pc>article>div:nth-child(2){display:flex !important;flex-direction:column;gap:4px}
  .jo-pc>article>div:nth-child(2)>:not(h3){margin-top:0}
  .jo-pc h3{min-height:2.4em}
  .jo-cards3:not(.jo-art)>article:nth-child(odd),.jo-cards2>article:nth-child(odd){scroll-snap-align:start}
  .jo-art>article,.jo-row4:not(.jo-row-r)>article{flex:0 0 82% !important;min-width:0;scroll-snap-align:start;animation:none !important}
  .jo-row4,.jo-row5{grid-template-columns:minmax(0,1fr) !important;gap:24px !important}
  .jo-row-r,.jo-row5{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:24px 14px !important}
  .jo-row5>li:last-child:nth-child(odd){grid-column:1 / -1;justify-self:center;max-width:68%}
  #besoin-label{font-size:26px !important}
  .jo-need-title{font-size:38px !important}
  #personnalisation > img,#faq > img{display:none !important}
  #personnalisation{padding-top:64px !important;padding-bottom:64px !important}
  .jo-foot{grid-template-columns:minmax(0,1fr) !important;gap:36px !important}
  footer .jo-copy{padding:0 20px !important;height:auto !important;min-height:40px}
  .jo-cta-p{font-size:16px !important;padding-right:20px !important}
}
@supports (animation-timeline: view()){
@media (prefers-reduced-motion: no-preference){
  @keyframes jo-up{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
  @keyframes jo-zoom{from{transform:scale(1.12)}to{transform:scale(1)}}
  @keyframes jo-hdr{from{box-shadow:0 0 0 rgba(1,69,81,0)}to{box-shadow:0 6px 20px rgba(1,69,81,0.12)}}
  @keyframes jo-par{from{transform:translateY(0)}to{transform:translateY(48px)}}
  .jo-split-img img{animation:jo-zoom linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
  header{animation:jo-hdr linear both;animation-timeline:scroll();animation-range:0 120px}
}
@media (prefers-reduced-motion: no-preference) and (min-width:1001px){
  .jo-hero-img{animation:jo-par linear both;animation-timeline:scroll();animation-range:0 700px}
}
}

.jo-s-wrap{position:absolute;left:0;right:0;top:100%;z-index:60}
.jo-s-back{position:absolute;left:0;right:0;top:0;width:100%;height:100vh;border:0;background:rgba(1,69,81,0.4);cursor:default}
.jo-s-panel{position:relative;max-height:calc(100vh - 150px);overflow:auto;background:var(--jo-cream);color:var(--jo-green);border-bottom:1px solid rgba(1,69,81,0.12);box-shadow:0 18px 36px rgba(1,69,81,0.18)}
.jo-s-inner{max-width:1244px;margin:0 auto;padding:28px 48px 40px}
.jo-s-field{position:relative;display:flex;align-items:center;gap:8px}
.jo-s-field>svg{position:absolute;left:2px;top:50%;margin-top:-13px;pointer-events:none}
.jo-s-input{flex:1;min-width:0;height:56px;padding:0 4px 0 40px;border:0;border-bottom:1px solid rgba(1,69,81,0.25);border-radius:0;background:transparent;font:inherit;font-size:22px;font-weight:600;color:var(--jo-green);outline:none}
.jo-s-input::placeholder{color:var(--jo-ink-soft);font-weight:500}
.jo-s-input:focus-visible{outline:none;border-bottom-color:var(--jo-coral)}
.jo-s-x{flex:none;width:44px;height:44px;border:0;border-radius:50%;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer}
.jo-s-x:hover{background:var(--jo-sand-4)}
.jo-s-note{margin:14px 0 0;font-size:14px;font-weight:600;color:var(--jo-ink-soft)}
.jo-s-h{margin:26px 0 8px;font-family:var(--font-body) !important;font-size:13px !important;line-height:1.2 !important;font-weight:700 !important;letter-spacing:.12em !important;text-transform:uppercase;color:var(--jo-coral-text)}
.jo-s-input::-webkit-search-cancel-button{display:none}
.jo-s-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 24px}
.jo-s-it{display:flex;align-items:center;gap:14px;padding:8px;border-radius:6px;color:var(--jo-green);text-decoration:none}
.jo-s-it:hover{background:var(--jo-sand-3)}
.jo-s-it:focus-visible{outline:2px solid var(--jo-green);outline-offset:-2px;background:var(--jo-sand-3)}
.jo-s-it img{flex:none;width:64px;height:64px;border-radius:6px;object-fit:cover}
.jo-s-it b{display:block;font-family:var(--font-display);font-weight:400;font-size:15px;line-height:1.2;text-transform:uppercase;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.jo-s-it span{display:block;margin-top:3px;font-size:14px;font-weight:600;color:var(--jo-ink-soft)}
.jo-s-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.jo-s-chip{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1.5px solid var(--jo-green);border-radius:999px;background:transparent;font:inherit;font-size:15px;font-weight:600;color:var(--jo-green);cursor:pointer;text-decoration:none}
.jo-s-chip:hover{background:var(--jo-green);color:#ffffff}
.jo-s-foot{display:inline-flex;align-items:center;margin-top:22px;min-height:44px;font-size:16px;font-weight:700;color:var(--jo-green);text-decoration:underline;text-underline-offset:4px}
@media (max-width:1000px){.jo-s-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){
  .jo-s-panel{max-height:calc(100vh - 120px)}
  .jo-s-inner{padding:14px 16px 28px}
  .jo-s-grid{grid-template-columns:1fr}
  .jo-s-input{font-size:18px;height:52px}
}
@media (prefers-reduced-motion: no-preference){
  .jo-s-back{animation:jo-s-fade .2s ease both}
  .jo-s-panel{animation:jo-s-in .24s cubic-bezier(.2,.7,.2,1) both}
  @keyframes jo-s-fade{from{opacity:0}to{opacity:1}}
  @keyframes jo-s-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
}
/* cascade */
@media (prefers-reduced-motion: no-preference){
  @keyframes jo-rise{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
  @keyframes jo-fadein{from{opacity:0}to{opacity:1}}
  @keyframes jo-rise-b{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
  @keyframes jo-fadein-b{from{opacity:0}to{opacity:1}}
  #top[data-ver="1"]{--an:jo-rise-b;--af:jo-fadein-b}
  .jo-bar{animation:jo-fadein .7s ease both}
  header.jo-pad{animation:jo-fadein .9s ease .1s both}
  @supports (animation-timeline: view()){
    header.jo-pad{animation:jo-fadein .9s ease .1s both,jo-hdr linear both;animation-timeline:auto,scroll();animation-range:normal,0 120px}
  }
  #top>main>section:nth-of-type(1){--s:1}
  #top>main>section:nth-of-type(2){--s:2}
  #top>main>section:nth-of-type(3){--s:3}
  #top>main>section:nth-of-type(4){--s:4}
  #top>main>section:nth-of-type(5){--s:5}
  #top>main>section:nth-of-type(6){--s:6}
  #top>main>section:nth-of-type(7){--s:7}
  #top>main>section:nth-of-type(8){--s:8}
  #top>main>section:nth-of-type(9){--s:9}
  #top>main>section:nth-of-type(10){--s:10}
  #top>main>section:nth-of-type(11){--s:11}
  #top>main>section:nth-of-type(12){--s:12}
  #top>main>section:not(.jo-hero)>div>*:not(:is(.jo-pc,.jo-row4,.jo-row5,.jo-cat,.jo-cards2,.jo-cards3,.jo-side,.jo-f-buy,.jo-f-gal,.jo-blk,.jo-list)),#top>main>section.jo-split>*,#top>main>section .jo-blk>*:not(.jo-list),.jo-pc>article,.jo-row4>*,.jo-row5>*,.jo-cat>a,.jo-cards2>*,.jo-cards3>*,.jo-side>*,.jo-f-buy>*,.jo-f-gal>*,.jo-band>div:first-child>*,section details{animation:var(--an,jo-rise) 1.05s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--s,1)*.16s + var(--d,0)*.1s)}
  .jo-pc>*:nth-child(4n+1),.jo-row4>*:nth-child(4n+1),.jo-row5>*:nth-child(4n+1),.jo-cat>*:nth-child(4n+1),.jo-cards3>*:nth-child(3n+1),.jo-cards2>*:nth-child(2n+1){--d:0}
  .jo-pc>*:nth-child(4n+2),.jo-row4>*:nth-child(4n+2),.jo-row5>*:nth-child(4n+2),.jo-cat>*:nth-child(4n+2),.jo-cards3>*:nth-child(3n+2),.jo-cards2>*:nth-child(2n+2){--d:1}
  .jo-pc>*:nth-child(4n+3),.jo-row4>*:nth-child(4n+3),.jo-row5>*:nth-child(4n+3),.jo-cat>*:nth-child(4n+3),.jo-cards3>*:nth-child(3n+3){--d:2}
  .jo-pc>*:nth-child(4n+4),.jo-row4>*:nth-child(4n+4),.jo-row5>*:nth-child(4n+4),.jo-cat>*:nth-child(4n+4){--d:3}
  .jo-side>*:nth-child(1),.jo-split>*:nth-child(1),.jo-f-gal>*:nth-child(1),.jo-f-buy>*:nth-child(1),.jo-band>div:first-child>*:nth-child(1){--d:0}
  .jo-side>*:nth-child(2),.jo-split>*:nth-child(2),.jo-f-gal>*:nth-child(2),.jo-f-buy>*:nth-child(2),.jo-band>div:first-child>*:nth-child(2),#top>main>section>div>*:nth-child(2):not(:is(.jo-pc,.jo-row4,.jo-row5,.jo-cat,.jo-cards2,.jo-cards3,.jo-side,.jo-f-buy,.jo-f-gal,.jo-blk,.jo-list)){--d:1}
  .jo-side>*:nth-child(3),.jo-split>*:nth-child(3),.jo-f-gal>*:nth-child(3),.jo-f-buy>*:nth-child(3),.jo-band>div:first-child>*:nth-child(3),#top>main>section>div>*:nth-child(3):not(:is(.jo-pc,.jo-row4,.jo-row5,.jo-cat,.jo-cards2,.jo-cards3,.jo-side,.jo-f-buy,.jo-f-gal,.jo-blk,.jo-list)){--d:2}
  .jo-side>*:nth-child(4),.jo-split>*:nth-child(4),.jo-f-gal>*:nth-child(4),.jo-f-buy>*:nth-child(4),.jo-band>div:first-child>*:nth-child(4),#top>main>section>div>*:nth-child(4):not(:is(.jo-pc,.jo-row4,.jo-row5,.jo-cat,.jo-cards2,.jo-cards3,.jo-side,.jo-f-buy,.jo-f-gal,.jo-blk,.jo-list)){--d:3}
  .jo-side>*:nth-child(5),.jo-split>*:nth-child(5),.jo-f-gal>*:nth-child(5),.jo-f-buy>*:nth-child(5),.jo-band>div:first-child>*:nth-child(5),#top>main>section>div>*:nth-child(5):not(:is(.jo-pc,.jo-row4,.jo-row5,.jo-cat,.jo-cards2,.jo-cards3,.jo-side,.jo-f-buy,.jo-f-gal,.jo-blk,.jo-list)){--d:4}
  .jo-side>*:nth-child(6),.jo-split>*:nth-child(6),.jo-f-gal>*:nth-child(6),.jo-f-buy>*:nth-child(6),.jo-band>div:first-child>*:nth-child(6),#top>main>section>div>*:nth-child(6):not(:is(.jo-pc,.jo-row4,.jo-row5,.jo-cat,.jo-cards2,.jo-cards3,.jo-side,.jo-f-buy,.jo-f-gal,.jo-blk,.jo-list)){--d:5}
  .jo-side>*:nth-child(7),.jo-split>*:nth-child(7),.jo-f-gal>*:nth-child(7),.jo-f-buy>*:nth-child(7),.jo-band>div:first-child>*:nth-child(7),#top>main>section>div>*:nth-child(7):not(:is(.jo-pc,.jo-row4,.jo-row5,.jo-cat,.jo-cards2,.jo-cards3,.jo-side,.jo-f-buy,.jo-f-gal,.jo-blk,.jo-list)){--d:6}
  .jo-side>*:nth-child(8),.jo-split>*:nth-child(8),.jo-f-gal>*:nth-child(8),.jo-f-buy>*:nth-child(8),.jo-band>div:first-child>*:nth-child(8),#top>main>section>div>*:nth-child(8):not(:is(.jo-pc,.jo-row4,.jo-row5,.jo-cat,.jo-cards2,.jo-cards3,.jo-side,.jo-f-buy,.jo-f-gal,.jo-blk,.jo-list)){--d:7}
  .jo-side>*:nth-child(9),.jo-split>*:nth-child(9),.jo-f-gal>*:nth-child(9),.jo-f-buy>*:nth-child(9),.jo-band>div:first-child>*:nth-child(9),#top>main>section>div>*:nth-child(9):not(:is(.jo-pc,.jo-row4,.jo-row5,.jo-cat,.jo-cards2,.jo-cards3,.jo-side,.jo-f-buy,.jo-f-gal,.jo-blk,.jo-list)){--d:8}
  .jo-side>*:nth-child(10),.jo-split>*:nth-child(10),.jo-f-gal>*:nth-child(10),.jo-f-buy>*:nth-child(10),.jo-band>div:first-child>*:nth-child(10),#top>main>section>div>*:nth-child(10):not(:is(.jo-pc,.jo-row4,.jo-row5,.jo-cat,.jo-cards2,.jo-cards3,.jo-side,.jo-f-buy,.jo-f-gal,.jo-blk,.jo-list)){--d:9}
  section details:nth-child(n){--d:0}

  .jo-hero-img{animation:jo-fadein 1.4s cubic-bezier(.2,.7,.2,1) .05s both}
  @supports (animation-timeline: view()){
    .jo-hero-img{animation:jo-fadein 1.4s cubic-bezier(.2,.7,.2,1) .05s both,jo-par linear both;animation-timeline:auto,scroll();animation-range:normal,0 700px}
  }
  .jo-nat>*{animation:jo-rise .9s cubic-bezier(.2,.7,.2,1) .35s both}
}
@media (prefers-reduced-motion: no-preference) and (max-height:1400px){
@supports (animation-timeline: view()){
  #top>main>section:nth-of-type(n+4)>div>*:not(:is(.jo-pc,.jo-row4,.jo-row5,.jo-cat,.jo-cards2,.jo-cards3,.jo-side,.jo-f-buy,.jo-f-gal,.jo-blk,.jo-list)),
  #top>main>section:nth-of-type(n+4).jo-split>*,
  #top>main>section:nth-of-type(n+4) .jo-blk>*:not(.jo-list),
  #top>main>section:nth-of-type(n+4) .jo-pc>article,
  #top>main>section:nth-of-type(n+4) .jo-row4>*,
  #top>main>section:nth-of-type(n+4) .jo-row5>*,
  #top>main>section:nth-of-type(n+4) .jo-cat>a,
  #top>main>section:nth-of-type(n+4) .jo-cards2>*,
  #top>main>section:nth-of-type(n+4) .jo-cards3>*,
  #top>main>section:nth-of-type(n+4) .jo-side>*,
  #top>main>section:nth-of-type(n+4) .jo-f-buy>*,
  #top>main>section:nth-of-type(n+4) .jo-f-gal>*,
  #top>main>section:nth-of-type(n+4) .jo-band>div:first-child>*,
  #top>main>section:nth-of-type(n+4) details{animation:jo-rise linear both;animation-timeline:view();animation-range:entry calc(var(--d,0)*4%) entry calc(55% + var(--d,0)*4%)}
}
}