/* Mur des clips : un collage d'affiches sur un mur (cartes un peu penchées, bords de papier déchiré, scotch).
   Couleurs, polices et formes viennent de theme.css : bleu, rose, chamois, Montserrat pour le texte, Fraunces pour le logotype. */

/* en-tête : le bas de la bannière est déchiré, la page claire dépasse en dents irrégulières */
.wall-hero { padding-bottom: 5.2rem; }
.torn-edge { position: absolute; left: 0; right: 0; bottom: -1px; height: 2.1rem; background: var(--color-bg); /* le clip-path est tiré au hasard par wall.js */ clip-path: polygon(0 55%, 8% 30%, 17% 62%, 26% 22%, 38% 58%, 49% 18%, 61% 50%, 73% 20%, 84% 56%, 93% 28%, 100% 50%, 100% 100%, 0 100%); }
.hero-stamp { position: absolute; right: 0; top: 50%; display: grid; place-items: center; width: 7.6rem; height: 7.6rem; margin-top: -3.8rem; border: 3px double var(--color-chamois); border-radius: 50%; color: var(--color-chamois); transform: rotate(10deg); font-family: Fraunces, Georgia, serif; line-height: 1; text-align: center; opacity: .95; }
.hero-stamp span { font-size: .95rem; font-style: italic; letter-spacing: .08em; text-transform: uppercase; margin-bottom: -1.2rem; }
.hero-stamp strong { font-size: 3.6rem; font-style: italic; margin-top: .6rem; }
.hero-stamp[hidden] { display: none; }

/* le mur : papier légèrement pointillé */
.wall { padding: 0 0 3.2rem; position: relative; background-image: radial-gradient(rgba(29, 37, 122, .07) 1px, transparent 1.2px); background-size: 22px 22px; }
body:has(.wall) { background: var(--color-bg); }

/* tri : sans cadre, un trait pointillé dessous */
.wall-bar[hidden] { display: none; }
.wall-bar { display: flex; align-items: center; justify-content: space-between; gap: .8rem 1.4rem; flex-wrap: wrap; padding: .2rem 0 1rem; border-bottom: 2px dashed var(--color-chamois); }
.pills { display: inline-flex; flex-wrap: wrap; gap: .3rem; padding: 0; }
.pills button { font: inherit; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-caps); border: 2px solid transparent; background: transparent; color: var(--color-primary); padding: .55rem .95rem; min-height: 44px; border-radius: var(--radius-pill); cursor: pointer; transition: background .15s, transform .15s; }
.pills button:hover { background: rgba(29, 37, 122, .08); }
.pills button[aria-pressed="true"] { background: var(--color-primary); color: #fff; transform: rotate(-1.5deg); }
.pills button:focus-visible, .wall-period select:focus-visible { outline: 3px solid var(--color-ring); outline-offset: 2px; }
.wall-period { display: flex; align-items: center; gap: .6rem; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--color-muted); }
.wall-period select { font: inherit; font-size: .85rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--color-primary); background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: .6rem 1rem; min-height: 44px; }
.wall-updated { margin: .8rem .2rem 0; font-size: .8rem; color: var(--color-muted); min-height: 1.2em; }

/* une affiche collée : papier blanc aux bords déchirés (clip-path tiré au hasard par wall.js), ombre portée sur le conteneur */
.podium, .clip-grid { list-style: none; margin: 0; padding: 0; }
.clip { --tilt: 0deg; --lift: 0px; position: relative; margin: 0; transform: translateY(var(--lift)) rotate(var(--tilt)); filter: drop-shadow(0 7px 8px rgba(15, 23, 82, .22)); transition: transform .2s ease, filter .2s ease; }
.clip:hover, .clip:focus-within { transform: translateY(calc(var(--lift) - 8px)) rotate(0deg) scale(1.04); z-index: 5; filter: drop-shadow(0 16px 16px rgba(15, 23, 82, .3)); }
.clip-open { position: relative; display: block; width: 100%; padding: .55rem .55rem 0; border: 0; background: #fff; color: var(--color-primary); font: inherit; text-align: left; cursor: pointer; }
.clip-open:focus-visible { outline: none; }
.clip-open:focus-visible::before { content: ""; position: absolute; inset: .2rem; border: 3px solid var(--color-ring); z-index: 4; pointer-events: none; }
.clip-photo { position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 2px; background: linear-gradient(160deg, var(--color-primary-dark), var(--color-primary) 60%, #2a2f93); }
.clip-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.clip-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(15, 23, 82, .45), rgba(15, 23, 82, 0) 40%); pointer-events: none; }
.clip-play { position: absolute; z-index: 1; top: 50%; left: 50%; width: 3rem; height: 3rem; margin: -1.5rem 0 0 -1.5rem; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--color-accent); box-shadow: 0 2px 10px rgba(0, 0, 0, .25); transition: transform .2s; }
.clip-play svg { width: 1.15rem; height: 1.15rem; margin-left: .15rem; }
.clip:hover .clip-play { transform: scale(1.12); }
.clip-caption { display: grid; gap: .4rem; padding: .65rem .2rem 1rem; }
.clip-author { font-weight: 800; font-size: .82rem; letter-spacing: var(--tracking-title); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clip-stats { display: flex; flex-wrap: wrap; gap: .25rem .3rem; }
.clip-stats span { display: inline-flex; align-items: center; gap: .28rem; padding: .16rem .42rem; border-radius: var(--radius-pill); background: var(--color-surface-alt); font-size: .7rem; font-weight: 700; color: var(--color-primary); }
.clip-stats svg { width: .85rem; height: .85rem; flex: none; }
.clip-stats .s-views svg { color: var(--color-primary); }
.clip-stats .s-likes svg { color: var(--color-accent); }
.clip-stats .s-comments svg { color: var(--ne-chamois-dark); }

/* scotch en haut de l'affiche : bandes chamois un peu transparentes, bouts en dents */
.tape, .clip-tape { position: absolute; z-index: 3; top: -.6rem; left: 50%; width: 4.6rem; height: 1.4rem; margin-left: -2.3rem; transform: rotate(var(--tape, -3deg)); background: repeating-linear-gradient(115deg, rgba(222, 219, 189, .92) 0 7px, rgba(255, 255, 255, .55) 7px 9px); clip-path: polygon(0 0, 100% 0, 97% 25%, 100% 50%, 97% 75%, 100% 100%, 0 100%, 3% 75%, 0 50%, 3% 25%); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.clip:nth-child(3n) .clip-tape { background: repeating-linear-gradient(115deg, rgba(208, 22, 95, .82) 0 7px, rgba(255, 255, 255, .45) 7px 9px); }

/* rang : une pastille collée sur le coin */
.clip-rank { position: absolute; z-index: 4; top: -.85rem; left: -.7rem; display: grid; place-items: center; min-width: 2.7rem; height: 2.7rem; padding: 0 .35rem; border: 2px solid #fff; border-radius: 50%; background: var(--color-primary); color: #fff; transform: rotate(-9deg); font-family: Fraunces, Georgia, serif; font-style: italic; font-weight: 700; font-size: 1.3rem; line-height: 1; box-shadow: 0 2px 6px rgba(15, 23, 82, .35); pointer-events: none; }
.clip-rank small { font-size: .6em; margin-left: .05em; align-self: start; padding-top: .55em; }

/* podium : le premier au centre, plus grand, les deux autres posés plus bas */
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: clamp(.6rem, 2.4vw, 1.8rem); width: min(100%, 41rem); margin: 2.4rem auto 1rem; padding-top: .8rem; }
.podium:empty { display: none; }
.podium .clip.r1 { --tilt: -1.4deg; --tape: 2deg; z-index: 2; }
.podium .clip.r2 { --tilt: 2.4deg; --lift: 14px; --tape: -5deg; }
.podium .clip.r3 { --tilt: -2.8deg; --lift: 24px; --tape: 4deg; }
.podium .clip.r1 .clip-open { padding: .75rem .75rem 0; }
.podium .clip.r1 .clip-rank { top: -1.2rem; left: -1.1rem; min-width: 3.7rem; height: 3.7rem; font-size: 1.9rem; background: var(--color-accent); }
.podium .clip.r1 .clip-tape { background: repeating-linear-gradient(115deg, rgba(208, 22, 95, .85) 0 7px, rgba(255, 255, 255, .45) 7px 9px); width: 5.6rem; margin-left: -2.8rem; }
.podium .clip.r2 .clip-rank { background: var(--color-primary); }
.podium .clip.r3 .clip-rank { background: var(--color-chamois); color: var(--color-chamois-contrast); }
.podium .clip.r1 .clip-author { font-size: 1rem; }
.podium .clip.r1 .clip-stats span { font-size: .78rem; }

.wall-sub { margin: 2.4rem 0 .4rem; font-family: Fraunces, Georgia, serif; font-style: italic; font-weight: 700; font-size: 1.5rem; color: var(--color-primary); }
.wall-sub::after { content: ""; display: block; width: 6.5rem; height: .5rem; margin-top: .35rem; background: var(--color-accent); clip-path: polygon(0 60%, 10% 20%, 20% 70%, 30% 15%, 40% 75%, 50% 10%, 60% 80%, 70% 20%, 80% 70%, 90% 25%, 100% 55%, 100% 100%, 0 100%); }
.wall-sub[hidden] { display: none; }

/* le reste : posé en vrac, chaque affiche un peu penchée et décalée (valeurs tirées par wall.js) */
.clip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11.4rem, 1fr)); gap: 2.2rem 1.6rem; padding: 1.4rem .5rem .6rem; }
.wall-empty { text-align: center; color: var(--color-muted); margin: 2.4rem 0 1rem; }
.wall-empty:empty { display: none; }

/* appel à créer son clip : une bande de papier bleu déchirée en haut et en bas, un peu de travers */
.wall-cta { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1.2rem 2rem; flex-wrap: wrap; margin: 3.6rem 0 0; padding: 2.8rem clamp(1.4rem, 4vw, 3rem); background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary)); color: #fff; transform: rotate(-.7deg); }
.wall-cta h2 { margin: 0 0 .5rem; font-family: var(--font-display); font-weight: var(--font-weight-display); text-transform: uppercase; letter-spacing: var(--tracking-title); font-size: 1.45rem; }
.wall-cta p { margin: 0; max-width: 38rem; opacity: .92; }
.wall-cta .eyebrow { margin-bottom: .4rem; color: var(--color-chamois); opacity: 1; }
.wall-cta .tape { top: 1.1rem; }
.wall-cta .tape-l { left: 1.4rem; margin-left: 0; --tape: -28deg; }
.wall-cta .tape-r { left: auto; right: 1.4rem; margin-left: 0; --tape: 24deg; }
.btn.pink { background: var(--color-accent); color: var(--color-accent-contrast); }
.btn.pink:hover { background: #b01252; }
.wall-note { margin: 2.2rem .3rem 0; font-size: .78rem; color: var(--color-muted); }

/* fenêtre du clip : un papier collé au centre de l'écran */
.clip-dialog { position: fixed; width: min(92vw, 25rem); max-height: 94vh; overflow: visible; padding: 1.4rem 1.2rem 1.4rem; border: 0; background: #fff; color: var(--color-text); box-shadow: 0 20px 60px rgba(15, 23, 82, .45); transform: rotate(-.8deg); }
.clip-dialog::backdrop { background: rgba(15, 23, 82, .74); }
.clip-dialog .tape { top: -.7rem; width: 6rem; margin-left: -3rem; --tape: 2deg; }
.dialog-close { position: absolute; top: -.9rem; right: -.7rem; margin: 0; }
.dialog-close .close { width: 2.4rem; height: 2.4rem; border: 2px solid #fff; border-radius: 50%; background: var(--color-accent); color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; box-shadow: 0 2px 6px rgba(15, 23, 82, .4); }
.clip-dialog h2 { margin: 0 2rem .4rem 0; font-family: var(--font-display); font-weight: var(--font-weight-display); text-transform: uppercase; letter-spacing: var(--tracking-title); font-size: 1.05rem; color: var(--color-primary); overflow-wrap: anywhere; }
.dialog-scroll { max-height: calc(94vh - 2.8rem); max-height: calc(94dvh - 2.8rem); overflow-y: auto; overscroll-behavior: contain; }
.dialog-text.clamped { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dialog-more { margin: 0 0 .6rem; padding: .5rem 0; min-height: 44px; border: 0; background: none; color: var(--color-primary); font: inherit; font-size: .8rem; font-weight: 700; text-decoration: underline; cursor: pointer; }
.dialog-more[hidden] { display: none; }
.dialog-text { margin: 0 0 .6rem; font-size: .88rem; color: var(--color-muted); overflow-wrap: anywhere; }
.dialog-stats { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-bottom: .8rem; font-size: .8rem; font-weight: 700; color: var(--color-primary); }
.dialog-stats span { display: inline-flex; align-items: center; gap: .35rem; }
.dialog-stats svg { width: 1rem; height: 1rem; }
.dialog-player { display: grid; place-items: center; min-height: 12rem; max-height: 50vh; margin-bottom: .6rem; background: var(--color-surface-alt); overflow: hidden; }
.dialog-player iframe { display: block; width: min(100%, 20.3rem); height: min(46rem, 50vh); border: 0; }
.dialog-note { margin: 0 0 .8rem; font-size: .72rem; color: var(--color-muted); }

@media (max-width: 640px) {
  .hero-stamp { display: none; }
  .wall-bar { padding-bottom: .7rem; }
  .pills button { padding: .5rem .8rem; font-size: .7rem; }
  .podium { gap: .5rem; margin-top: 2rem; }
  .podium .clip-open, .podium .clip.r1 .clip-open { padding: .35rem .35rem 0; }
  .podium .clip-caption { padding: .4rem .1rem .6rem; gap: .25rem; }
  .podium .clip-author, .podium .clip.r1 .clip-author { font-size: .68rem; }
  .podium .clip-stats span, .podium .clip.r1 .clip-stats span { font-size: .7rem; padding: .12rem .3rem; gap: .2rem; }
  .podium .clip-stats svg { width: .65rem; height: .65rem; }
  .podium .clip-play { width: 2.2rem; height: 2.2rem; margin: -1.1rem 0 0 -1.1rem; }
  .podium .clip-rank { min-width: 2rem; height: 2rem; font-size: 1rem; top: -.7rem; left: -.5rem; }
  .podium .clip.r1 .clip-rank { min-width: 2.6rem; height: 2.6rem; font-size: 1.35rem; }
  .podium .clip-tape { width: 3rem; height: 1rem; margin-left: -1.5rem; }
  .clip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem 1rem; padding-inline: .3rem; }
  .wall-cta { padding: 3.2rem 1.2rem 1.6rem; }
  .wall-cta .tape { width: 3.4rem; top: .5rem; }
}
@media (prefers-reduced-motion: reduce) { .clip, .clip-play, .pills button { transition: none; } .clip:hover, .clip:focus-within { transform: translateY(var(--lift)) rotate(var(--tilt)); } }