:root { --fond: #0f0f12; --carte: #1b1b21; --texte: #ececf1; --doux: #9a9aa8; --accent: #e8a33d; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--fond); color: var(--texte); font-family: system-ui, sans-serif; }
header { padding: 16px; border-bottom: 1px solid #26262e; }
.logo { color: var(--texte); font-weight: 700; font-size: 1.3rem; text-decoration: none; }
main { max-width: 1100px; margin: 0 auto; padding: 16px; }
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.carte { background: var(--carte); border-radius: 10px; overflow: hidden; color: inherit; text-decoration: none; transition: transform .15s; }
.carte:hover, .carte:focus-visible { transform: translateY(-3px); outline: 2px solid var(--accent); }
.carte img, .carte .vide { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; background: #000; }
.carte h2 { font-size: 1rem; margin: 10px 12px 14px; }
.cadre { aspect-ratio: 16/9; background: #000; border-radius: 10px; overflow: hidden; }
.cadre iframe, .cadre video { width: 100%; height: 100%; border: 0; display: block; }
#description { color: var(--doux); }
.retour { color: var(--accent); display: inline-block; margin: 8px 0 28px; }