/* Dossiers projets : partagés entre l'accueil et la page projet */
.folders { display: flex; gap: 56px; position: relative; z-index: 3; }
.folder { width: 112px; display: block; position: relative; outline: none; }
/* Dossier en trois couches : dos à onglet, feuilles, rabat. Le rabat pivote sur son pied (perspective) et l'étiquette pivote avec lui */
.fbox { position: relative; width: 112px; height: 88px; perspective: 380px; transition: transform .3s var(--out); }
.fbox svg.back { position: absolute; inset: 0; }
/* Trois feuilles empilées, la première devant ; au survol elles sortent en éventail, petites */
.sheet {
  position: absolute; left: 9px; top: 14px; width: 94px; height: 56px; border-radius: 0;
  background: #f4f4f2 center/cover no-repeat; box-shadow: 0 0 0 .5px rgba(0,0,0,.18);
  transform-origin: 50% 100%; translate: 0 calc(var(--i) * -3px); scale: calc(1 - var(--i) * .06) 1;
  transition: transform .4s var(--out), translate .4s var(--out), scale .4s var(--out);
}
.flap {
  position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; height: 62px; border-radius: 8px; background: var(--front);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55); /* arête du carton, pas une ombre */
  transform-origin: 50% 100%; transform-style: preserve-3d;
  transition: transform .45s var(--out) .12s, background-color .5s var(--out);
}
html[data-theme="nuit"] .flap { box-shadow: inset 0 1px 0 rgba(255,255,255,.07); }
/* Matière du carton : grain fin sans direction (fusion overlay, valable jour et nuit), lumière venue du haut,
   et deux lignes de rainage au pied du rabat, là où un vrai dossier se plie */
.grain { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; mix-blend-mode: overlay; opacity: .5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.flap .grain { background:
    linear-gradient(to bottom, transparent 82%, rgba(0,0,0,.14) 82%, rgba(0,0,0,.14) calc(82% + 1px), rgba(255,255,255,.35) calc(82% + 1px), rgba(255,255,255,.35) calc(82% + 2px), transparent calc(82% + 2px)),
    linear-gradient(to bottom, rgba(255,255,255,.22), transparent 45%, rgba(0,0,0,.12)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.back-grain { clip-path: path('M8 0H38Q43 0 46 6Q48 14 56 14H104Q112 14 112 22V80Q112 88 104 88H8Q0 88 0 80V8Q0 0 8 0Z'); }
.dymo {
  position: absolute; font-family: "Geist Mono", monospace; font-weight: 500; font-size: 9px; letter-spacing: .06em;
  padding: 2px 5px; white-space: nowrap;
}
/* Logos de la stack en stickers holographiques découpés : le logo est imprimé en noir sur un support en film irisé,
   découpé autour de sa forme (le contour est un trait épais du même tracé), bordé d'un liseré blanc */
.logo { position: absolute; width: 22px; height: 22px; overflow: visible; }
.fmeta { margin-top: 12px; line-height: 1.25; }
.fmeta .y { color: var(--sub); transition: color .3s; }
.folder:is(:hover, :focus-visible, .open) { z-index: 5; }
/* Ouverture : le rabat bascule vers soi, puis la feuille sort et s'agrandit. Au retour la feuille rentre d'abord, le rabat se referme ensuite */
.folder:is(:hover, :focus-visible, .open) .flap { transform: rotateX(-38deg); transition: transform .5s var(--spring); }
.folder:is(:hover, :focus-visible, .open) .sheet { translate: calc(var(--p) * 46px) calc(-40px + var(--p) * var(--p) * 6px); scale: 1;
  transform: rotate(calc(var(--p) * 5deg)); transition: transform .55s var(--spring), translate .55s var(--spring), scale .55s var(--spring); transition-delay: calc(.06s + var(--i) * .04s); }
.folder:active .fbox { transform: scale(.97); transition-duration: .1s; }
.folder:is(:hover, :focus-visible, .open) .fmeta .y { color: var(--ink); }
.folder:focus-visible .fmeta > :first-child { text-decoration: underline; text-underline-offset: 2px; }
/* étiquette noire : de nuit elle passe en clair, sinon elle se perd sur le dossier sombre */
html[data-theme="nuit"] .dymo.noir { background: #f4f4f5 !important; color: #141414 !important; }
@media (max-width: 820px) {
    .folders { gap: 18px; }
    .folder:is(:hover, :focus-visible, .open) .sheet { translate: calc(var(--p) * 30px) calc(-34px + var(--p) * var(--p) * 5px); }
}