/* STATION.24 · accueil « Mélange » (planche de style validée, 30/10/2026) : collage de papier rose, bandes léopard,
   matières (papier froissé, métal, carrelage, fourrure), un seul titre gothique, autocollants des vraies pièces. */
:root {
  --rose-papier: #ebc4d1;
  --rose-vif: #f52a86;
  --noir: #151313;
  --blanc: #f7f2e9;
  --jaune: #f4d44a;
  --gris: #5c5250;
  --serif: "Bodoni Moda", Didot, Georgia, serif;
  --marqueur: "Permanent Marker", "Comic Sans MS", cursive;
  --gothique: "UnifrakturMaguntia", "Old English Text MT", serif;
  --texte: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --doux: cubic-bezier(.2, .7, .2, 1);
  --ressort: cubic-bezier(.34, 1.56, .64, 1);
  --dechire: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 30' preserveAspectRatio='none'%3E%3Cpath d='M0 30 L0 14 L38 9 L61 17 L97 6 L131 15 L160 8 L203 18 L240 7 L262 14 L301 5 L339 16 L371 9 L402 19 L446 8 L473 15 L511 4 L546 13 L580 7 L612 18 L655 9 L688 16 L719 6 L760 15 L794 8 L828 19 L867 7 L899 14 L935 5 L972 16 L1004 10 L1041 18 L1078 7 L1110 15 L1150 6 L1179 13 L1200 9 L1200 30 Z' fill='%23000'/%3E%3C/svg%3E");
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--blanc); color: var(--noir); font: 17px/1.55 var(--texte); }
img { max-width: 100%; height: auto; display: block; }
main, .pied { overflow-x: clip; } /* les bandes inclinées ne doivent jamais créer de défilement horizontal */
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0 0 14px; }
.serif { font-family: var(--serif); font-weight: 900; letter-spacing: -.02em; }
.marqueur { font-family: var(--marqueur); }

/* Matières */
.papier { background: url("../img/papier-creme.jpg") center / 600px; }
.papier-rose { background: url("../img/papier-rose.jpg") center / 600px; }
.metal { background: url("../img/metal.jpg") center / 700px, #b9b9bd; }
.carreaux { background-color: #efe9de; background-image: linear-gradient(rgba(255, 255, 255, .55), transparent 40%), linear-gradient(90deg, #d8cfc0 2px, transparent 2px), linear-gradient(#d8cfc0 2px, transparent 2px); background-size: 100% 100%, 96px 96px, 96px 96px; }
.fourrure { background: url("../img/fourrure.jpg") center / 520px; }
/* Bord déchiré en haut de chaque section */
.dechire-haut { -webkit-mask: var(--dechire) top / 100% 26px no-repeat, linear-gradient(#000, #000) 0 25px / 100% calc(100% - 25px) no-repeat; mask: var(--dechire) top / 100% 26px no-repeat, linear-gradient(#000, #000) 0 25px / 100% calc(100% - 25px) no-repeat; margin-top: -24px; position: relative; }

.bandeau { position: relative; z-index: 41; margin: 0; background: var(--noir); color: var(--rose-papier); font-size: 13px; text-align: center; padding: 8px 16px; }

/* En-tête : boutons en pilule à contour noir */
.entete { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 20px; padding: 10px clamp(16px, 4vw, 48px); background: url("../img/papier-rose.jpg") center / 600px; }
.marque { margin-right: auto; }
.marque img { width: 78px; transition: transform .5s var(--ressort); }
.marque:hover img { transform: rotate(-6deg) scale(1.06); }
.nav { display: flex; gap: 10px; }
.nav a, .contour { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 20px; border: 2px solid var(--noir); border-radius: 999px; text-decoration: none; font: 700 15px/1 var(--texte); letter-spacing: .06em; text-transform: uppercase; background: rgba(247, 242, 233, .6); transition: background .3s, color .3s, transform .45s var(--ressort); }
.nav a:hover, .contour:hover { background: var(--noir); color: var(--blanc); transform: rotate(-2deg) scale(1.04); }
.contour--grand { min-height: 56px; padding: 0 32px; font-size: 17px; }
.contour--noir { background: var(--noir); color: var(--blanc); }
.contour--noir:hover { background: var(--rose-vif); border-color: var(--rose-vif); }

/* Bandes léopard déchirées, qui glissent au défilement */
.leopard { position: relative; z-index: 3; background: url("../img/leopard.jpg") 0 50% / 300px repeat-x; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .25)); }
.leopard--entete { position: sticky; top: 62px; z-index: 39; height: 20px; clip-path: polygon(0 0, 100% 0, 100% 70%, 96% 100%, 91% 62%, 86% 95%, 80% 60%, 74% 100%, 68% 68%, 61% 96%, 55% 62%, 49% 100%, 42% 66%, 36% 96%, 30% 60%, 24% 100%, 17% 64%, 11% 94%, 5% 60%, 0 90%); }
.leopard--bande { height: 46px; margin: -10px 0; transform: rotate(-1.4deg) scale(1.04); clip-path: polygon(0 18%, 4% 0, 9% 22%, 15% 4%, 21% 20%, 27% 0, 33% 16%, 40% 2%, 46% 20%, 52% 3%, 58% 18%, 65% 0, 71% 20%, 77% 4%, 84% 22%, 90% 2%, 96% 18%, 100% 6%, 100% 84%, 95% 100%, 89% 80%, 83% 98%, 77% 82%, 70% 100%, 64% 84%, 58% 98%, 51% 80%, 45% 100%, 38% 82%, 31% 98%, 25% 80%, 18% 100%, 12% 84%, 6% 98%, 0 86%); }
.leopard--inverse { transform: rotate(1.2deg) scale(1.04); }

/* Ruban adhésif rose */
.scotch { position: absolute; z-index: 3; width: 110px; height: 30px; background: rgba(245, 42, 134, .62); clip-path: polygon(0 8%, 6% 0, 12% 10%, 18% 0, 82% 0, 88% 10%, 94% 0, 100% 8%, 100% 92%, 94% 100%, 88% 90%, 82% 100%, 18% 100%, 12% 90%, 6% 100%, 0 92%); box-shadow: inset 0 0 12px rgba(255, 255, 255, .35); mix-blend-mode: multiply; }

/* Étoiles dessinées */
.etoile { position: absolute; z-index: 2; fill: none; stroke: var(--noir); stroke-width: 3.2; stroke-linejoin: round; animation: tourne 22s linear infinite; }
.et1 { width: 74px; right: 7%; top: 13%; }
.et2 { width: 46px; left: 47%; bottom: 10%; animation-direction: reverse; stroke: var(--rose-vif); }
@keyframes tourne { to { transform: rotate(360deg); } }

/* Event */
.event__titre { grid-column: 1 / -1; position: relative; z-index: 2; }
.event { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 80px); align-items: center; padding: clamp(70px, 10vh, 110px) clamp(16px, 5vw, 72px) clamp(90px, 12vh, 130px); }
.geant { font-size: clamp(56px, 10.5vw, 168px); line-height: .92; margin: 0 0 14px; }
.geant .l { display: inline-block; padding: .02em .07em; margin: 0 .01em; opacity: 0; transform: translateY(-1.2em) rotate(calc(var(--r) * 3)); animation: tombe .9s var(--ressort) forwards; animation-delay: calc(.15s + var(--i) * .06s); box-shadow: 2px 4px 0 rgba(0, 0, 0, .18); }
.geant .l:nth-child(4n + 1) { background: var(--blanc); }
.geant .l:nth-child(4n + 2) { background: var(--rose-vif); color: var(--blanc); }
.geant .l:nth-child(4n + 3) { background: var(--noir); color: var(--blanc); }
.geant .l:nth-child(4n) { background: var(--rose-papier); }
@keyframes tombe { to { opacity: 1; transform: rotate(var(--r)); } }
.mot { display: inline-block; white-space: nowrap; }
.sous { font: 700 16px/1 var(--texte); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 34px; }
.titre-section { position: relative; display: inline-block; font-size: clamp(64px, 8vw, 120px); line-height: 1; margin-bottom: 26px; }
.souligne { position: absolute; left: -2%; right: -2%; bottom: -8px; height: 26px; }
.souligne svg { width: 100%; height: 100%; overflow: visible; }
.souligne path { fill: none; stroke: var(--rose-vif); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 340; stroke-dashoffset: 340; transition: stroke-dashoffset 1.2s var(--doux) .35s; }
.souligne--blanc path { stroke: var(--blanc); }
.vu .souligne path, .vu.souligne path { stroke-dashoffset: 0; }
.note { position: relative; max-width: 420px; padding: 30px 26px 22px; background: var(--blanc); box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .45); transform: rotate(-1.5deg); }
.note .marqueur { font-size: 34px; line-height: 1; color: var(--rose-vif); margin-bottom: 12px; }
.scotch--note { top: -14px; left: 34%; transform: rotate(-4deg); }
.compte { font: 900 30px/1 var(--serif); margin: 6px 0 0; }
.affiche { position: relative; z-index: 2; margin: 0; justify-self: center; width: 100%; max-width: 430px; padding: 12px 12px 14px; background: var(--blanc); box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .55); }
.affiche img { width: 100%; }
.scotch--g { top: -12px; left: -22px; transform: rotate(-32deg); }
.scotch--d { top: -12px; right: -22px; transform: rotate(32deg); }
.colle { opacity: 0; transform: translateY(-60px) rotate(9deg) scale(1.08); transition: opacity .6s var(--doux), transform 1.2s var(--ressort); }
.colle.vu { opacity: 1; transform: rotate(3deg); }

/* Shop : autocollants */
.shop { position: relative; overflow: hidden; padding: clamp(90px, 12vh, 130px) clamp(16px, 5vw, 72px) clamp(100px, 13vh, 140px); }
.mega { position: relative; display: inline-block; font-size: clamp(90px, 15vw, 220px); line-height: .9; margin-bottom: 44px; }
.grille { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 3vw, 42px) clamp(16px, 2.6vw, 36px); }
.piece { position: relative; display: grid; justify-items: center; text-align: center; text-decoration: none; padding: 30px 16px 22px; background: var(--blanc) url("../img/papier-creme.jpg") center / 500px; box-shadow: 0 22px 34px -22px rgba(0, 0, 0, .5); opacity: 0; transform: translateY(-70px) rotate(calc(var(--r) * 4)) scale(1.06); transition: opacity .5s var(--doux), transform 1.1s var(--ressort); transition-delay: var(--d, 0s); }
.piece.vu { opacity: 1; transform: rotate(var(--r)); }
.piece:hover { transform: rotate(0deg) translateY(-8px) scale(1.03); transition-delay: 0s; }
.piece .scotch { top: -13px; left: 50%; margin-left: -55px; transform: rotate(calc(var(--r) * -2)); }
.piece img { width: 74%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 12px 12px rgba(0, 0, 0, .28)); transition: transform .6s var(--ressort); }
.piece:hover img { transform: scale(1.07) rotate(-3deg); }
.piece__nom { margin: 16px 0 6px; font-weight: 500; font-size: 15.5px; line-height: 1.3; min-height: 2.6em; }
.piece b { font: 900 30px/1 var(--serif); margin-bottom: 14px; }
.piece .contour { min-height: 36px; font-size: 13px; padding: 0 16px; }
.centre { text-align: center; margin: 56px 0 0; }

/* Concept */
.concept { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.1fr .9fr; grid-template-areas: "feuille photo" "depot photo"; gap: 34px clamp(28px, 5vw, 80px); padding: clamp(100px, 13vh, 140px) clamp(16px, 5vw, 72px); }
.feuille { grid-area: feuille; position: relative; padding: clamp(30px, 4vw, 52px); background: url("../img/papier-creme.jpg") center / 600px; box-shadow: 0 30px 50px -30px rgba(0, 0, 0, .6); clip-path: polygon(0 2%, 4% 0, 12% 1.5%, 24% 0, 38% 1%, 53% 0, 67% 1.4%, 82% 0, 96% 1%, 100% 3%, 99% 30%, 100% 62%, 99% 97%, 92% 100%, 78% 98.5%, 61% 100%, 44% 98.6%, 27% 100%, 11% 98.4%, 0 100%, 1% 64%, 0 31%); }
.gothique { font: 400 clamp(72px, 9vw, 140px)/1 var(--gothique); margin-bottom: 18px; }
.gothique .l { display: inline-block; opacity: 0; transform: translateY(30px) scale(.6); filter: blur(6px); transition: opacity .7s var(--doux), transform .9s var(--ressort), filter .7s; transition-delay: calc(var(--i) * .07s); }
.vu .gothique .l { opacity: 1; transform: none; filter: none; }
.feuille p { font-size: 18px; max-width: 48ch; margin: 0; }
.polaroid { grid-area: photo; align-self: center; position: relative; margin: 0; padding: 16px 16px 60px; background: #fff; box-shadow: 0 34px 60px -28px rgba(0, 0, 0, .65); transform-origin: 50% -20px; animation: balance 6s ease-in-out infinite; }
@keyframes balance { 0%, 100% { transform: rotate(3deg); } 50% { transform: rotate(-1.5deg); } }
.polaroid { justify-self: center; width: 100%; max-width: 430px; }
.polaroid img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.polaroid figcaption { position: absolute; left: 0; right: 0; bottom: 16px; text-align: center; font-size: 22px; color: var(--gris); }
.trombone { position: absolute; z-index: 3; top: -46px; left: 26px; width: 34px; fill: none; stroke: #8d8d93; stroke-width: 4.5; stroke-linecap: round; filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, .35)); }
.scotch--polaroid { top: -10px; right: 18px; transform: rotate(14deg); }
.depot { grid-area: depot; position: relative; justify-self: start; display: flex; align-items: center; gap: 14px 24px; flex-wrap: wrap; padding: 26px 30px; background: var(--rose-vif); color: var(--blanc); transform: rotate(-1.2deg); box-shadow: 0 22px 40px -22px rgba(0, 0, 0, .6); }
.depot__titre { font-size: clamp(44px, 5vw, 66px); line-height: 1; margin: 0; color: var(--noir); }
.depot p:not(.depot__titre) { margin: 0; max-width: 24ch; font-weight: 500; }
.scotch--depot { top: -14px; left: 40px; background: rgba(244, 212, 74, .8); transform: rotate(-5deg); }

/* Où nous trouver */
.lieu { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 80px); align-items: center; padding: clamp(100px, 13vh, 140px) clamp(16px, 5vw, 72px); }
.etiquettes { display: grid; justify-items: start; gap: 8px; margin-bottom: 26px; }
.etiquettes span { display: inline-block; padding: 4px 18px 10px; background: var(--noir); color: var(--blanc); font: 900 clamp(48px, 7vw, 104px)/1 var(--serif); letter-spacing: -.02em; }
.etiquettes span:nth-child(2) { transform: rotate(-1.5deg) translateX(18px); background: var(--rose-vif); }
.papier-bout { display: inline-block; padding: 18px 24px; margin-bottom: 22px; background: url("../img/papier-creme.jpg") center / 500px; box-shadow: 0 14px 26px -18px rgba(0, 0, 0, .5); transform: rotate(1deg); }
.papier-bout p { margin: 0; }
.adresse { font-size: clamp(26px, 3vw, 38px); line-height: 1.1; }
.post-it { position: relative; padding: 34px 32px 28px; background: var(--jaune); box-shadow: 0 30px 40px -24px rgba(0, 0, 0, .5); transform: rotate(2deg); }
.post-it::after { content: ""; position: absolute; right: 0; bottom: 0; width: 46px; height: 46px; background: linear-gradient(135deg, rgba(0, 0, 0, .12) 50%, #e6c23a 50%); }
.post-it h3 { font-size: 42px; line-height: 1; margin-bottom: 16px; }
.post-it dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; margin: 0 0 14px; }
.post-it dt { font-weight: 700; }
.post-it dd { margin: 0; text-align: right; }
.post-it p { font-size: 14px; margin: 0; }

/* Pied (fourrure) */
.pied { display: grid; justify-items: center; gap: 22px; padding: 70px 16px 120px; text-align: center; }
.pied img { width: 120px; }
.pied__liens { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.etiquette-noire { display: inline-block; padding: 12px 20px; background: var(--noir); color: var(--blanc); text-decoration: none; font-weight: 700; transform: rotate(-1deg); transition: transform .4s var(--ressort), background .3s; }
.etiquette-noire:nth-child(2) { transform: rotate(1.4deg); }
.etiquette-noire:hover { transform: rotate(0) scale(1.05); background: var(--rose-vif); }

/* Fil de progression sur la bande léopard de l'en-tête */
.leopard__fil { position: absolute; left: 0; top: 0; height: 4px; width: 100%; background: var(--rose-vif); transform-origin: 0 50%; transform: scaleX(0); }
.shop__phrase { position: relative; z-index: 2; font-size: clamp(20px, 2.2vw, 28px); margin: -24px 0 40px; transform: rotate(-1.5deg); }

/* Vestes : corde à linge épinglée */
.vestes { position: relative; }
.vestes__scene { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: clamp(8px, 2vh, 22px); padding: 90px 0 30px; }
.vestes__tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 0 clamp(16px, 5vw, 72px); }
.vestes__tete .etiquettes { margin: 0; }
.vestes__tete .etiquettes span { font-size: clamp(40px, 6vw, 88px); }
.vestes__compte { margin: 0; font-size: clamp(34px, 4vw, 56px); line-height: 1; transform: rotate(-4deg); }
.vestes__compte b { color: var(--rose-vif); font-weight: 400; }
.vestes__cadre { position: relative; }
.vestes__piste { position: relative; display: flex; gap: clamp(26px, 4vw, 60px); padding: 40px clamp(16px, 5vw, 72px) 20px; width: max-content; will-change: transform; }
.corde { position: absolute; left: 0; top: 0; width: 100%; height: 80px; overflow: visible; pointer-events: none; }
.corde path { fill: none; stroke: #6b5a4a; stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .25)); }
.veste { position: relative; flex: 0 0 auto; width: clamp(230px, 26vw, 340px); display: grid; justify-items: center; text-decoration: none; transform-origin: 50% 0; will-change: transform; padding-top: 18px; }
.pince { position: absolute; z-index: 3; top: 0; left: 50%; width: 16px; height: 46px; margin-left: -8px; border-radius: 3px; background: linear-gradient(90deg, #c99a63, #e8c08a 45%, #b68550); box-shadow: 1px 2px 3px rgba(0, 0, 0, .35); }
.pince::after { content: ""; position: absolute; left: 3px; right: 3px; top: 16px; height: 6px; border-radius: 2px; background: #8d8d93; }
.veste img { width: 100%; height: clamp(200px, 32vh, 320px); object-fit: contain; filter: drop-shadow(0 18px 16px rgba(0, 0, 0, .3)); transition: transform .6s var(--ressort); }
.veste:hover img { transform: scale(1.05); }
.ticket { position: relative; display: grid; gap: 6px; justify-items: center; width: 82%; margin-top: 10px; padding: 14px 14px 12px; background: #e9d9bf url("../img/papier-creme.jpg") center / 400px; box-shadow: 0 12px 18px -12px rgba(0, 0, 0, .5); clip-path: polygon(10% 0, 90% 0, 100% 16%, 100% 100%, 0 100%, 0 16%); text-align: center; }
.ticket::before { content: ""; position: absolute; top: 7px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: #efe9de; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4); }
.ticket__nom { margin-top: 8px; font-weight: 500; font-size: 14.5px; line-height: 1.25; }
.ticket b { font: 900 26px/1 var(--serif); }

/* Encore en boutique */
.encore { position: relative; overflow: hidden; padding: clamp(80px, 11vh, 120px) 0; }
.encore__titre { font-size: clamp(36px, 5vw, 64px); line-height: 1; padding: 0 clamp(16px, 5vw, 72px); margin-bottom: 26px; transform: rotate(-1.5deg); }
.encore__defile { overflow: hidden; padding: 20px 0; }
.encore__piste { display: flex; gap: 26px; width: max-content; animation: defile 34s linear infinite; }
.encore__defile:hover .encore__piste { animation-play-state: paused; }
@keyframes defile { to { transform: translateX(-50%); } }
.mini { flex: 0 0 auto; width: 220px; display: grid; justify-items: center; text-align: center; text-decoration: none; padding: 20px 14px 16px; background: var(--blanc) url("../img/papier-creme.jpg") center / 400px; box-shadow: 0 18px 28px -18px rgba(0, 0, 0, .55); transition: transform .5s var(--ressort); }
.mini:nth-child(odd) { transform: rotate(-3deg); }
.mini:nth-child(even) { transform: rotate(2.5deg) translateY(12px); }
.mini:nth-child(3n) { background: var(--rose-vif); color: var(--blanc); }
.mini:hover { transform: rotate(0) translateY(-8px) scale(1.04); }
.mini img { height: 180px; width: auto; object-fit: contain; filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 12px 12px rgba(0, 0, 0, .28)); }
.mini span { margin: 12px 0 6px; font-weight: 500; font-size: 14px; line-height: 1.3; }
.mini b { font: 900 26px/1 var(--serif); }

/* Histoire : page de carnet */
.histoire { position: relative; overflow: hidden; padding: clamp(100px, 13vh, 140px) clamp(16px, 5vw, 72px); display: grid; justify-items: center; }
.carnet { position: relative; width: 100%; max-width: 860px; padding: clamp(36px, 5vw, 64px) clamp(22px, 5vw, 64px) clamp(30px, 4vw, 48px) clamp(46px, 8vw, 110px); background-color: #fbf8f1; background-image: linear-gradient(90deg, transparent calc(clamp(30px, 5.5vw, 76px) - 1px), rgba(229, 72, 110, .55) calc(clamp(30px, 5.5vw, 76px) - 1px), rgba(229, 72, 110, .55) clamp(30px, 5.5vw, 76px), transparent clamp(30px, 5.5vw, 76px)), repeating-linear-gradient(180deg, transparent 0 39px, rgba(90, 140, 200, .28) 39px 40px); box-shadow: 0 40px 60px -34px rgba(0, 0, 0, .55); transform: rotate(-.8deg); }
.carnet.apparait.vu { transform: rotate(-.8deg); }
.scotch--carnet { top: -14px; left: 50%; margin-left: -55px; transform: rotate(3deg); background: rgba(244, 212, 74, .8); }
.carnet__date { font-size: clamp(26px, 3vw, 38px); margin: 0 0 4px; }
.surligne { position: relative; z-index: 0; display: inline-block; padding: 0 8px; }
.surligne::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 18%; bottom: 8%; background: rgba(245, 42, 134, .45); transform: scaleX(0) skewX(-8deg); transform-origin: 0 50%; transition: transform 1s var(--doux) .3s; border-radius: 3px; }
.vu .surligne::before { transform: scaleX(1) skewX(-8deg); }
.carnet__titre { font-size: clamp(42px, 6vw, 84px); line-height: 1; margin-bottom: 22px; }
.recit { font-size: clamp(18px, 1.8vw, 22px); line-height: 40px; margin: 0; }
.recit .m { color: rgba(21, 19, 19, .22); transition: color .25s, background .25s; }
.recit .m.allume { color: var(--noir); }
.recit .m.allume.fort { background: rgba(244, 212, 74, .75); box-shadow: 0 0 0 2px rgba(244, 212, 74, .75); }
.carnet__signature { font-size: 30px; color: var(--rose-vif); text-align: right; margin: 16px 0 0; transform: rotate(-4deg); }

/* Events : mur d'affiches et tickets */
.events { position: relative; overflow: hidden; padding: clamp(100px, 13vh, 140px) clamp(16px, 5vw, 72px); }
.events__tete { margin-bottom: 40px; }
.events__retour { font-size: clamp(24px, 2.6vw, 34px); color: var(--rose-vif); margin: 38px 0 14px; transform: rotate(-2deg); display: block; width: max-content; }
.events__tete .titre-section { margin-bottom: 0; }
.events__intro { max-width: 48ch; font-size: 19px; font-weight: 500; }
.mur { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); grid-template-areas: "aff1 tickets" "aff2 tickets" "aff2 postit"; gap: 40px clamp(30px, 5vw, 80px); align-items: start; }
.aff { position: relative; margin: 0; padding: 12px 12px 14px; background: var(--blanc); box-shadow: 0 30px 50px -28px rgba(0, 0, 0, .55); }
.aff img { width: 100%; }
.aff--1 { grid-area: aff1; }
.aff--2 { grid-area: aff2; width: 86%; justify-self: end; }
.aff--1.colle.vu { transform: rotate(-3deg); }
.aff--2.colle.vu { transform: rotate(4deg); }
.tickets { grid-area: tickets; display: grid; gap: 16px; }
.tickets__jour { justify-self: start; margin: 0 0 6px; font-size: 16px; }
.ticket-p { position: relative; display: grid; grid-template-columns: 92px 1fr; background: var(--blanc) url("../img/papier-creme.jpg") center / 500px; box-shadow: 0 16px 26px -18px rgba(0, 0, 0, .55); -webkit-mask: radial-gradient(circle at 92px 0, transparent 9px, #000 9.5px) top / 100% 51% no-repeat, radial-gradient(circle at 92px 100%, transparent 9px, #000 9.5px) bottom / 100% 51% no-repeat; mask: radial-gradient(circle at 92px 0, transparent 9px, #000 9.5px) top / 100% 51% no-repeat, radial-gradient(circle at 92px 100%, transparent 9px, #000 9.5px) bottom / 100% 51% no-repeat; opacity: 0; transform: translateX(80px) rotate(4deg); transition: opacity .6s var(--doux), transform 1s var(--ressort); transition-delay: var(--d, 0s); }
.ticket-p.vu { opacity: 1; transform: rotate(var(--r, 0deg)); }
.ticket-p time { display: grid; place-items: center; text-align: center; padding: 16px 8px; border-right: 2px dashed rgba(21, 19, 19, .35); font: 900 21px/1.15 var(--serif); }
.ticket-p > div { padding: 16px 20px; }
.ticket-p h3 { font: 900 clamp(22px, 2.2vw, 28px)/1.1 var(--serif); margin-bottom: 6px; }
.ticket-p p { margin: 0; font-size: 15.5px; }
.ticket-p--rose { background: var(--rose-vif); color: var(--blanc); }
.ticket-p--rose time { border-color: rgba(255, 255, 255, .5); }
.post-it--rose { grid-area: postit; background: #ffb6d3; transform: rotate(-2deg); }
.post-it--rose::after { background: linear-gradient(135deg, rgba(0, 0, 0, .12) 50%, #f08fb7 50%); }
.post-it--rose.apparait.vu { transform: rotate(-2deg); }
.post-it__jour { font-size: 18px; margin-bottom: 6px; color: var(--noir); }
.post-it--rose h3 { font-size: 34px; }

/* Contact : lettre */
.contact { position: relative; padding: clamp(100px, 13vh, 140px) clamp(16px, 5vw, 72px); display: grid; justify-items: center; }
.lettre { position: relative; width: 100%; max-width: 760px; display: grid; gap: 18px; padding: clamp(30px, 4vw, 52px); background-color: #fbf8f1; background-image: repeating-linear-gradient(180deg, transparent 0 35px, rgba(90, 140, 200, .22) 35px 36px); box-shadow: 0 40px 60px -34px rgba(0, 0, 0, .65); transform: rotate(.8deg); }
.lettre.apparait.vu { transform: rotate(.8deg); }
.scotch--lettre { top: -14px; left: 26px; transform: rotate(-6deg); }
.gothique--lettre { font-size: clamp(56px, 7vw, 96px); margin-bottom: 4px; }
.lettre label { display: grid; gap: 4px; }
.lettre label span { font-size: 20px; color: var(--rose-vif); }
.lettre input, .lettre textarea { width: 100%; padding: 10px 2px; border: 0; border-bottom: 2px solid var(--noir); background: transparent; font: 500 17px/1.5 var(--texte); color: var(--noir); outline: none; border-radius: 0; resize: vertical; }
.lettre textarea { border: 2px solid var(--noir); padding: 10px 12px; background: rgba(255, 255, 255, .5); }
.lettre input:focus, .lettre textarea:focus { border-color: var(--rose-vif); }
.lettre__bas { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lettre button { cursor: pointer; }
.lettre__note { margin: 0; font-size: 19px; color: var(--rose-vif); }
.pied__nav { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* Portant 3D : scène épinglée, toile three.js, fiche de la veste de face */
.portant { position: relative; }
.portant__scene { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.portant__toile { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.portant__tete { position: absolute; z-index: 2; left: 0; right: 0; top: clamp(64px, 10vh, 96px); display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 0 clamp(16px, 5vw, 72px); pointer-events: none; }
.portant .portant__fiche { position: absolute; z-index: 3; left: 50%; bottom: clamp(22px, 5vh, 50px); width: min(90vw, 420px); margin: 0; display: grid; justify-items: center; gap: 6px; text-align: center; opacity: 0; transform: translate(-50%, 24px); transition: opacity .45s var(--doux), transform .6s var(--ressort); pointer-events: none; }
.portant .portant__fiche.visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.portant__fiche.change { animation: fiche-pop .5s var(--ressort); }
@keyframes fiche-pop { from { scale: .9; } to { scale: 1; } }
.portant__donnees { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Sans WebGL : la liste des vestes en grille simple */
.portant.sans3d { height: auto !important; }
.portant.sans3d .portant__scene { position: relative; height: auto; padding: 160px 16px 40px; }
.portant.sans3d .portant__toile, .portant.sans3d .portant__fiche { display: none; }
.portant.sans3d .portant__donnees { position: static; width: auto; height: auto; clip-path: none; white-space: normal; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.donnee { display: grid; justify-items: center; text-align: center; text-decoration: none; }
.donnee img { height: 160px; width: auto; object-fit: contain; }
@media (max-width: 560px) {
  .portant .portant__fiche { bottom: 84px; width: calc(100vw - 32px); }
}

.portant__tete .etiquettes { margin: 0; }
.portant__tete .etiquettes span { font-size: clamp(40px, 6vw, 88px); white-space: nowrap; }
.portant .portant__fiche.ticket { padding: 22px 18px 16px; }
.portant__tete .vestes__compte { white-space: nowrap; flex: none; position: relative; z-index: 3; padding: 4px 14px 8px; background: var(--blanc) url("../img/papier-creme.jpg") center / 300px; box-shadow: 0 10px 18px -12px rgba(0, 0, 0, .5); } /* le compteur passe devant le portant */
.portant__marque { color: var(--rose-vif); font-size: 20px; line-height: 1; margin-top: 6px; }
.portant .portant__fiche b { font: 900 30px/1 var(--serif); }
.portant .portant__fiche .contour { min-height: 38px; font-size: 13px; }

@media (min-width: 761px) {
  /* PC : la fiche à droite, elle ne cache jamais la veste de face */
  .portant .portant__fiche { left: auto; right: clamp(16px, 5vw, 72px); bottom: 16vh; width: 320px; transform: translate(0, 24px); }
  .portant .portant__fiche.visible { transform: none; }
}

/* Apparitions */
.apparait { opacity: 0; transform: translateY(40px); transition: opacity .9s var(--doux), transform 1s var(--ressort); transition-delay: var(--d, 0s); }
.apparait.vu { opacity: 1; transform: none; }
.note.apparait.vu { transform: rotate(-1.5deg); }
.papier-bout.apparait.vu { transform: rotate(1deg); }
.post-it.apparait.vu { transform: rotate(2deg); }
.depot.apparait.vu { transform: rotate(-1.2deg); }

/* Bouton retour (bas gauche, règle de Loan) */
.retour { position: fixed; z-index: 60; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border: 2px solid var(--noir); border-radius: 999px; background: var(--blanc); color: var(--noir); text-decoration: none; font-weight: 700; font-size: 15px; box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .5); }

@media (max-width: 980px) {
  .nav { display: none; }
  .event, .lieu { grid-template-columns: 1fr; }
  .affiche { max-width: 380px; }
  .grille { grid-template-columns: repeat(2, 1fr); }
  .concept { grid-template-columns: 1fr; grid-template-areas: "feuille" "photo" "depot"; }
  .polaroid { width: min(92%, 420px); justify-self: center; }
  .mur { grid-template-columns: 1fr; grid-template-areas: "aff1" "tickets" "aff2" "postit"; }
  .aff--1 { width: 88%; justify-self: center; }
  .aff--2 { width: 80%; justify-self: center; }
}
@media (max-width: 560px) {
  body { font-size: 16.5px; }
  .entete { padding: 8px 16px; }
  .marque img { width: 62px; }
  .leopard--entete { top: 54px; }
  .event { padding-top: 54px; }
  .geant { font-size: 38px; }
  .geant .l { padding: .02em .05em; }
  .grille { gap: 26px 12px; }
  .piece { padding: 24px 8px 16px; }
  .piece__nom { font-size: 13.5px; }
  .piece b { font-size: 24px; }
  .piece .contour { font-size: 11.5px; padding: 0 10px; min-height: 32px; }
  .depot { padding: 22px; }
  .post-it { padding: 28px 22px 24px; }
  .vestes__scene { padding: 70px 0 20px; }
  .veste { width: 68vw; }
  .veste img { height: 28vh; }
  .mini { width: 180px; }
  .mini img { height: 140px; }
  .ticket-p { grid-template-columns: 70px 1fr; -webkit-mask: radial-gradient(circle at 70px 0, transparent 9px, #000 9.5px) top / 100% 51% no-repeat, radial-gradient(circle at 70px 100%, transparent 9px, #000 9.5px) bottom / 100% 51% no-repeat; mask: radial-gradient(circle at 70px 0, transparent 9px, #000 9.5px) top / 100% 51% no-repeat, radial-gradient(circle at 70px 100%, transparent 9px, #000 9.5px) bottom / 100% 51% no-repeat; }
  .ticket-p time { font-size: 17px; }
  .ticket-p > div { padding: 14px 14px; }
  .recit { line-height: 36px; }
  .carnet { background-image: linear-gradient(90deg, transparent 29px, rgba(229, 72, 110, .55) 29px, rgba(229, 72, 110, .55) 30px, transparent 30px), repeating-linear-gradient(180deg, transparent 0 35px, rgba(90, 140, 200, .28) 35px 36px); }
  .lettre__bas { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01s !important; animation-iteration-count: 1 !important; transition-duration: .01s !important; }
}