/* ---------- Ressources gratuites : la corde à linge ---------- */
.sr-only-list { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.free-tag { display: inline-block; margin: 4px 0 0; padding: 7px 14px; border-radius: 12px; background: #DDF3E8; color: #2E7D5B; font: 700 16px "Fredoka", sans-serif; rotate: -2deg; box-shadow: 4px 5px 0 #C5E8D6; }
.resources { text-align: center; }
.clothes { position: relative; margin: clamp(26px, 5vw, 50px) -16px 0; }
.cl-track { position: relative; display: flex; gap: clamp(18px, 3vw, 40px); padding: 0 max(16px, calc(50vw - 560px)) 30px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; cursor: grab; }
.cl-track::-webkit-scrollbar { display: none; }
.cl-track:active { cursor: grabbing; }
.cl-rope { position: absolute; left: 0; top: 6px; height: 70px; min-width: 100%; overflow: visible; pointer-events: none; }
.cl-rope path { fill: none; stroke: #B98A5E; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1200; stroke-dashoffset: 1200; transition: stroke-dashoffset 1.4s ease-out; vector-effect: non-scaling-stroke; }
.clothes.in .cl-rope path { stroke-dashoffset: 0; }
.cl-item { position: relative; flex: none; width: clamp(170px, 20vw, 230px); padding-top: calc(var(--y, 20px) + 14px); scroll-snap-align: center; text-decoration: none; color: var(--ink); text-align: center;
  transform-origin: 50% calc(var(--y, 20px) + 8px); opacity: 0; translate: 0 -60px; rotate: calc(var(--r) * 3);
  transition: opacity .5s, translate .9s cubic-bezier(.3,1.6,.5,1), rotate 1.2s cubic-bezier(.3,1.6,.5,1); transition-delay: calc(.6s + var(--i) * .14s); }
.clothes.in .cl-item { opacity: 1; translate: 0 0; rotate: var(--r); animation: clWind 5s calc(2s + var(--i) * .4s) ease-in-out infinite; }
@keyframes clWind { 50% { rotate: calc(var(--r) * -.6); } }
.cl-item.swing { animation: clSwing 1.3s cubic-bezier(.3,1.4,.5,1); }
@keyframes clSwing { 15% { rotate: calc(14deg * var(--k)); } 40% { rotate: calc(-9deg * var(--k)); } 65% { rotate: calc(4deg * var(--k)); } 100% { rotate: var(--r); } }
.cl-pin { position: absolute; left: 50%; top: calc(var(--y, 20px) - 2px); z-index: 2; width: 14px; height: 38px; margin-left: -7px; border-radius: 4px; background: linear-gradient(90deg, #D9A86F, #F2CE9B 50%, #C9935A); box-shadow: 0 3px 4px rgba(0,0,0,.25); }
.cl-pin::after { content: ""; position: absolute; left: 3px; right: 3px; top: 15px; height: 6px; border-radius: 3px; background: #9C6B44; }
.cl-sheet { display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 2px; background: #fff; box-shadow: 0 22px 34px -18px rgba(42,27,46,.5); transition: transform .35s var(--spring); }
.cl-sheet img { width: 100%; height: 100%; object-fit: cover; object-position: top; pointer-events: none; }
.cl-ico { height: 100%; display: grid; place-items: center; font-size: 70px; background: linear-gradient(160deg, #FFF0A4, #F9D7E7); }
.cl-item:hover .cl-sheet { transform: scale(1.05); }
.cl-name { display: block; margin-top: 12px; font: 700 clamp(22px, 2.2vw, 26px)/1.05 "Caveat", cursive; color: var(--ink); }
.cl-sub { display: block; margin-top: 4px; font: 700 13px var(--text); color: #2E7D5B; }
.cl-hint { margin: 0; font: 700 20px "Caveat", cursive; color: var(--muted); transition: opacity .4s; }
.clothes.moved .cl-hint { opacity: 0; }
@media (min-width: 1200px) { .cl-hint { display: none; } }
html[data-theme="nuit"] .cl-name { color: #F5F5F7; }
html[data-theme="nuit"] .free-tag { background: #15302A; color: #9EE6C4; box-shadow: 4px 5px 0 #0E2019; }
@media (prefers-reduced-motion: reduce) { .clothes .cl-item { animation: none !important; } }

/* ---------- Navigation de la corde : flèches + points ---------- */
.cl-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 4px; }
.cl-prev, .cl-next { width: 46px; height: 46px; border: 0; border-radius: 50%; cursor: pointer; font: 800 20px var(--text); background: #FFF0A4; color: #A3245A; box-shadow: 3px 4px 0 #F6DCE8; transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.cl-next { background: #F9D7E7; color: #8E2A5C; box-shadow: 3px 4px 0 #EBC7F0; }
.cl-prev:active, .cl-next:active { transform: scale(.85); }
.cl-dots { display: flex; gap: 8px; }
.cl-dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 6px; cursor: pointer; background: color-mix(in srgb, var(--ink) 20%, transparent); transition: width .4s cubic-bezier(.3,1.4,.5,1), background .3s; }
.cl-dots button.on { width: 28px; background: #D23A7E; }
.cl-hint { display: none !important; }
html[data-theme="nuit"] .cl-prev { background: #2B2614; color: #FFE08A; box-shadow: 3px 4px 0 #000; }
html[data-theme="nuit"] .cl-next { background: #2E1B25; color: #FFC4DD; box-shadow: 3px 4px 0 #000; }
@media (max-width: 760px) { .cl-track { scroll-snap-type: x mandatory; } }

/* ---------- Corde à linge v3 : défilement continu, feuille du centre en avant ---------- */
.cl-track { display: block !important; overflow: hidden !important; scroll-snap-type: none !important; touch-action: pan-y; padding: 0 0 30px !important; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.cl-row { display: flex; gap: clamp(26px, 4vw, 50px); width: max-content; will-change: transform; padding: 0 20px; }
.cl-rope { width: 100% !important; }
.cl-row .cl-item { scroll-snap-align: none; perspective: 900px; transition: padding-top .2s linear; }
.cl-row .cl-sheet { transform: rotateY(var(--ry, 0deg)) scale(var(--sc, 1)); opacity: var(--op, 1); transform-origin: 50% 0; transition: box-shadow .4s; }
.cl-row .cl-item:hover .cl-sheet { transform: rotateY(var(--ry, 0deg)) scale(calc(var(--sc, 1) * 1.04)); }
.cl-row .cl-item.mid .cl-sheet { box-shadow: 0 34px 50px -22px rgba(42,27,46,.6); }
.cl-row .cl-item .cl-name, .cl-row .cl-item .cl-sub { opacity: var(--op, 1); transition: opacity .3s; }
.cl-nav { gap: 22px; }
.cl-dots { display: none; }