/* ===== Page Avis — lecteurs vidéo / audio ===== */

/* Filtres */
.avis-filters { display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; margin-bottom:2.2rem; }
.avis-filter { display:inline-flex; align-items:center; gap:.5rem; padding:.55rem 1.1rem; font:600 .9rem/1 inherit; font-family:inherit; color:#b8b8b8; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); border-radius:999px; cursor:pointer; transition:all .2s ease; }
.avis-filter span { font-size:.75rem; padding:.15rem .45rem; border-radius:999px; background:rgba(255,255,255,.1); }
.avis-filter:hover { color:#fff; border-color:rgba(255,255,255,.3); }
.avis-filter.is-active { color:#111; background:#fff; border-color:#fff; }
.avis-filter.is-active span { background:rgba(0,0,0,.12); }
.avis-filter:focus-visible, .avis-btn:focus-visible, .avis-audio-play:focus-visible, .avis-play-overlay:focus-visible { outline:2px solid #fff; outline-offset:2px; }

/* Grille */
.avis-grid { display:block; columns:340px; column-gap:1.6rem; margin-top:0; }
.avis-card { break-inside:avoid; margin:0 0 1.6rem; display:flex; flex-direction:column; background:linear-gradient(180deg, var(--surface-2), var(--surface)); border:1px solid var(--border); border-radius:18px; overflow:hidden; text-align:left; box-shadow:0 10px 30px rgba(0,0,0,.35); transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.avis-card:hover { transform:translateY(-3px); border-color:rgba(255,255,255,.2); box-shadow:0 18px 40px rgba(0,0,0,.5); }
.avis-card[hidden] { display:none; }
.avis-meta { padding:1.1rem 1.3rem 1.3rem; display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .8rem; }
.avis-badge { font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#cfcfcf; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); padding:.25rem .6rem; border-radius:999px; }
.avis-date { font-size:.8rem; color:#7d7d7d; margin-left:auto; }
.avis-title { flex-basis:100%; font-size:1.05rem; font-weight:700; color:#fff; line-height:1.35; margin:.2rem 0 0; }
.avis-empty { text-align:center; color:#888; padding:3rem 0; }

/* ----- Vidéo ----- */
.avis-video { position:relative; background:#000; aspect-ratio:16/9; display:flex; }
.avis-video.is-portrait { aspect-ratio:9/14; max-height:560px; width:100%; }
.avis-video video { width:100%; height:100%; object-fit:contain; background:#000; display:block; }
.avis-video:fullscreen { aspect-ratio:auto; max-height:none; }
.avis-video:fullscreen video { height:100vh; }

.avis-play-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.35)); border:0; cursor:pointer; transition:opacity .25s ease; }
.avis-play-overlay svg { width:72px; height:72px; padding:20px 18px 20px 22px; fill:#fff; background:rgba(20,20,20,.65); border:1px solid rgba(255,255,255,.35); border-radius:50%; backdrop-filter:blur(8px); transition:transform .2s ease, background .2s ease; }
.avis-play-overlay:hover svg { transform:scale(1.08); background:rgba(40,40,40,.8); }
.avis-video.has-started .avis-play-overlay { opacity:0; pointer-events:none; }

.avis-controls { position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center; gap:.6rem; padding:1.6rem .8rem .6rem; background:linear-gradient(0deg, rgba(0,0,0,.85), transparent); opacity:0; transform:translateY(6px); transition:opacity .25s ease, transform .25s ease; }
.avis-video.has-started:hover .avis-controls,
.avis-video.has-started.show-controls .avis-controls,
.avis-video.has-started:focus-within .avis-controls,
.avis-video.has-started.is-paused .avis-controls { opacity:1; transform:none; }
@media (hover:none) { .avis-video.has-started .avis-controls { opacity:1; transform:none; } }

.avis-btn { flex:none; width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; background:none; border:0; border-radius:8px; cursor:pointer; color:#fff; transition:background .2s; }
.avis-btn:hover { background:rgba(255,255,255,.15); }
.avis-btn svg { width:20px; height:20px; fill:currentColor; }
.avis-time { flex:none; font-size:.75rem; font-variant-numeric:tabular-nums; color:#e6e6e6; min-width:2.4em; text-align:center; }

/* Icônes état */
[data-video] .i-pause, [data-audio] .i-pause, [data-video] .i-mute, [data-audio] .i-mute { display:none; }
[data-video].is-playing .i-play, [data-audio].is-playing .i-play { display:none; }
[data-video].is-playing .i-pause, [data-audio].is-playing .i-pause { display:block; }
[data-video].is-muted .i-vol, [data-audio].is-muted .i-vol { display:none; }
[data-video].is-muted .i-mute, [data-audio].is-muted .i-mute { display:block; }

/* Barre de progression (partagée) */
.avis-seek { -webkit-appearance:none; appearance:none; flex:1; height:4px; border-radius:4px; cursor:pointer; outline:none; background:linear-gradient(90deg, #fff var(--p,0%), rgba(255,255,255,.25) var(--p,0%)); transition:height .15s; }
.avis-seek:hover { height:6px; }
.avis-seek::-webkit-slider-thumb { -webkit-appearance:none; width:13px; height:13px; border-radius:50%; background:#fff; border:0; box-shadow:0 0 0 3px rgba(0,0,0,.35); }
.avis-seek::-moz-range-thumb { width:13px; height:13px; border-radius:50%; background:#fff; border:0; }
.avis-seek::-moz-range-track { background:transparent; }

/* ----- Audio ----- */
.avis-audio { display:flex; align-items:center; gap:1rem; padding:1.4rem 1.3rem; background:radial-gradient(120% 140% at 0% 0%, rgba(255,255,255,.07), transparent 60%), #151515; }
.avis-audio audio { display:none; }
.avis-audio-play { flex:none; width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#fff; border:0; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease; box-shadow:0 6px 18px rgba(0,0,0,.4); }
.avis-audio-play:hover { transform:scale(1.06); }
.avis-audio-play svg { width:24px; height:24px; fill:#111; }
.avis-audio-play .i-play { margin-left:3px; }
.avis-audio.is-playing .avis-audio-play .i-pause { margin-left:0; }
.avis-audio-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:.5rem; }
.avis-wave { display:flex; align-items:center; gap:3px; height:26px; }
.avis-wave i { flex:1; background:rgba(255,255,255,.28); border-radius:2px; height:30%; transition:background .3s; }
.avis-wave i:nth-child(3n) { height:70%; } .avis-wave i:nth-child(4n+1) { height:100%; } .avis-wave i:nth-child(5n+2) { height:50%; } .avis-wave i:nth-child(7n) { height:85%; }
.avis-audio.is-playing .avis-wave i { background:#fff; animation:avis-bar 1s ease-in-out infinite alternate; }
.avis-audio.is-playing .avis-wave i:nth-child(odd) { animation-duration:.8s; }
.avis-audio.is-playing .avis-wave i:nth-child(3n) { animation-delay:.15s; }
.avis-audio.is-playing .avis-wave i:nth-child(4n) { animation-delay:.3s; }
@keyframes avis-bar { from { transform:scaleY(.45); } to { transform:scaleY(1); } }
.avis-audio-times { display:flex; justify-content:space-between; font-size:.75rem; font-variant-numeric:tabular-nums; color:#9a9a9a; }
.avis-audio .avis-btn { color:#cfcfcf; }

/* ----- Image ----- */
.avis-image { display:block; background:#000; overflow:hidden; }
.avis-image img { display:block; width:100%; max-height:460px; object-fit:cover; transition:transform .4s ease; }
.avis-image:hover img { transform:scale(1.04); }

@media (max-width:768px) {
  .avis-grid { columns:1; }
  .avis-play-overlay svg { width:60px; height:60px; padding:16px 14px 16px 18px; }
}
@media (prefers-reduced-motion:reduce) {
  .avis-card, .avis-card *, .avis-wave i { animation:none !important; transition:none !important; }
}

/* ----- Intégrations externes (Portfolio : YouTube, TikTok, Instagram) ----- */
.avis-embed { position:relative; background:#000; width:100%; }
.avis-embed iframe { position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.embed-youtube { aspect-ratio:16/9; }
.embed-tiktok { display:flex; justify-content:center; padding:1rem 0; background:#0b0b0d; }
.embed-tiktok iframe { position:static; inset:auto; width:325px; max-width:calc(100% - 2rem); height:auto; aspect-ratio:9/16; border-radius:14px; background:#fff; }
.embed-instagram { aspect-ratio:4/5; background:#fff; }
.avis-link { display:block; padding:3rem 1rem; text-align:center; color:#fff; font-weight:600; background:#0b0b0d; }
.avis-link:hover { background:#141418; }
.avis-desc { flex-basis:100%; font-size:.94rem; color:var(--muted); margin:.1rem 0 0; }