/* Page /artistes : grille façon Spotify, reprise du composant en carrés de la * page artiste (« Dans le même catalogue » / .gallery-grid) — cartes encadrées, * mais avec au centre une BULLE RONDE (photo de l'artiste). Barre et lecteur du * site réutilisés. Chargée partout (Barba ne recharge pas le ) ; sans * effet hors de /artistes. */ .artists { --ink: #0b0b0c; --ink-2: rgba(11, 11, 12, 0.58); --line: rgba(11, 11, 12, 0.16); --paper: #f2f0ec; --grot: "Archivo Sillon", "Helvetica Neue", Arial, sans-serif; --mono: "JetBrains Mono Sillon", ui-monospace, "SF Mono", Menlo, monospace; box-sizing: border-box; min-height: 100svh; padding: 7.5rem clamp(1rem, 4vw, 4rem) 9rem; background: var(--paper); color: var(--ink); font-family: var(--grot); } .artists *, .artists *::before, .artists *::after { box-sizing: border-box; } .artists__head { max-width: 92rem; margin: 0 auto 2.75rem; } .artists__kicker { margin: 0 0 0.5rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-2); } .artists__title { margin: 0; font-family: var(--grot); font-weight: 800; font-size: clamp(2.4rem, 7vw, 4.5rem); line-height: 0.95; letter-spacing: -0.02em; } .artists__lede { margin: 0.75rem 0 0; max-width: 34rem; color: var(--ink-2); font-size: 1rem; } /* /artistes : regroupement par famille de genre. Chaque famille est une section séparée par un filet léger et de l'espace — minimaliste, sans surcharge. La grille d'une famille s'étire toute seule si beaucoup d'artistes la partagent. (Absent de /nouveautes : une seule grille, pas de wrapper .artists__cats.) */ .artists__cats { max-width: 92rem; margin: 0 auto; } .cat + .cat { margin-top: clamp(3rem, 6vw, 5.25rem); } .cat__head { margin: 0 0 clamp(1.1rem, 2.4vw, 1.75rem); padding-bottom: 0.85rem; border-bottom: 1px solid var(--line); } .cat__name { margin: 0; font-family: var(--grot); font-weight: 700; font-size: clamp(1.05rem, 2.2vw, 1.5rem); letter-spacing: -0.01em; line-height: 1; } /* La grille : cartes fluides, façon Spotify. */ .artists__grid { max-width: 92rem; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(9rem, 16vw, 13rem), 1fr)); gap: clamp(0.9rem, 2vw, 1.75rem); } /* Dans une section de genre, la grille prend toute la largeur du wrapper. */ .cat .artists__grid { max-width: none; margin: 0; } /* Une carte artiste. */ .art-card { display: flex; flex-direction: column; gap: 0.75rem; text-decoration: none; color: inherit; border-radius: 0.4rem; outline: none; } .art-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; } /* Le carré encadré (repris de .gallery-grid__bg : un cadre fin). */ .art-card__frame { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; border: 1px solid var(--line); border-radius: 0.5rem; background: radial-gradient(120% 120% at 50% 12%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 60%), #ece9e2; overflow: hidden; transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; } .art-card:hover .art-card__frame, .art-card:focus-visible .art-card__frame { border-color: var(--ink); box-shadow: 0 18px 40px -24px rgba(11, 11, 12, 0.55); transform: translateY(-3px); } /* La bulle ronde = la photo de l'artiste (pochette en attendant). */ .art-card__bubble { width: 72%; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; background: #d9d5cc; box-shadow: 0 10px 30px -12px rgba(11, 11, 12, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.35); transition: transform 0.35s cubic-bezier(0.34, 1.36, 0.5, 1); } .art-card__bubble img { width: 100%; height: 100%; object-fit: cover; display: block; } .art-card:hover .art-card__bubble, .art-card:focus-visible .art-card__bubble { transform: scale(1.05); } /* Artistes : rond cerclé + flèche qui pivote de −45° au survol (repris de la fiche .buy__arrow / Palmer) — la carte mène à la page de l'artiste. */ .art-card__go { position: absolute; right: 0.7rem; bottom: 0.7rem; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 50%; background: rgba(242, 240, 236, 0.75); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transform: translateY(6px); transition: opacity 0.25s ease, transform 0.25s ease, rotate 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .art-card__go svg { width: 0.85rem; height: auto; } .art-card:hover .art-card__go, .art-card:focus-visible .art-card__go { opacity: 1; transform: translateY(0); rotate: -45deg; } /* Nouveautés : repère « écouter » (la carte mène à la musique, sur l'accueil). */ .art-card--vinyl .art-card__frame::after { content: "\25B6"; position: absolute; right: 0.7rem; bottom: 0.7rem; width: 2.1rem; height: 2.1rem; display: grid; place-items: center; font-size: 0.7rem; color: var(--paper); background: var(--ink); border-radius: 50%; opacity: 0; transform: translateY(6px); transition: opacity 0.25s ease, transform 0.25s ease; } .art-card--vinyl:hover .art-card__frame::after, .art-card--vinyl:focus-visible .art-card__frame::after { opacity: 1; transform: translateY(0); } /* Nouveautés : un vinyle (image plate transparente) dans le carré, pas une bulle. */ .art-card--vinyl .art-card__frame { background: radial-gradient(120% 120% at 50% 10%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 55%), #e6e2da; } .art-card__disc { width: 88%; aspect-ratio: 1 / 1; display: grid; place-items: center; filter: drop-shadow(0 14px 26px rgba(11, 11, 12, 0.5)); transition: transform 0.35s cubic-bezier(0.34, 1.36, 0.5, 1); } .art-card__disc img { width: 100%; height: 100%; object-fit: contain; display: block; } .art-card--vinyl:hover .art-card__disc, .art-card--vinyl:focus-visible .art-card__disc { transform: scale(1.05) rotate(8deg); } .art-card__cap { display: flex; flex-direction: column; gap: 0.15rem; padding: 0 0.15rem; min-width: 0; } .art-card__name { font-weight: 700; font-size: 0.98rem; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .art-card__album { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Mobile : deux carrés par ligne, mais avec plus d'air entre eux (demande de la cliente). `minmax(0, 1fr)` fige deux colonnes qui « passent partout », sans le débordement silencieux que minmax(9rem, …) provoque sur les petits écrans (l'axe X est masqué : un carré rogné ne déclenche pas de scroll horizontal). */ @media (max-width: 40rem) { .artists { padding: 6.5rem 1.25rem 7rem; } .artists__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.9rem 1.35rem; } .cat + .cat { margin-top: 2.75rem; } .cat__head { margin-bottom: 1.15rem; padding-bottom: 0.7rem; } } @media (prefers-color-scheme: dark) { /* La page reste sur le papier du site (cohérence avec le catalogue). */ }