/* Page de liens de la bio : la DA du site (Jost, cuivre, étiquettes-flèches, grain), le key art en haut, les nuages du carton de fin en bas. */
@font-face { font-family: "Jost"; src: url(../polices/jost-latin-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }

:root { --encre: #0a0506; --creme: #f5e6d8; --pale: #cdb6a6; --cu: #ec8433; --or: #f3b83a; --bordeaux: #3a121c;
  --jost: "Jost", "Futura", "Century Gothic", sans-serif; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: #060304; }
body { color: var(--creme); font-family: var(--jost); font-size: 18px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; height: auto; }

.fond { position: fixed; inset: 0; z-index: -1; background: url(../img/grain.png), #060304 url(../img/ciel-petit.jpg) 50% 0 / cover no-repeat; opacity: 0.55; }
.colonne { max-width: 520px; margin: 0 auto; background: #060304; min-height: 100vh; box-shadow: 0 0 80px rgb(0 0 0 / 0.8); }

/* le key art, fondu dans le noir en bas */
.affiche img { -webkit-mask-image: linear-gradient(#000 95%, transparent); mask-image: linear-gradient(#000 95%, transparent); }

/* Étiquette-flèche du site : liseré cuivre, fond sombre, pointe à droite */
.actions { display: grid; gap: 14px; padding: 6px 20px 0; }
.etiquette { --t: 20px; display: block; padding: 2px; background: var(--cu);
  clip-path: polygon(0 0, calc(100% - var(--t)) 0, 100% 50%, calc(100% - var(--t)) 100%, 0 100%); }
.etiquette span { display: flex; flex-direction: column; justify-content: center; min-height: 58px; padding: 10px 44px 10px 22px; background: #140a0c;
  clip-path: polygon(0 0, calc(100% - var(--t) * 0.92) 0, calc(100% - 1.6px) 50%, calc(100% - var(--t) * 0.92) 100%, 0 100%); }
.etiquette.forte span { background: var(--bordeaux); min-height: 66px; }
.etiquette b { font-weight: 600; font-size: 19px; line-height: 1.25; color: #fff; }
.etiquette.forte b { font-size: 21px; letter-spacing: 0.08em; text-transform: uppercase; }
.etiquette small { font-weight: 600; font-size: 12px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--or); margin-bottom: 3px; }
.etiquette em { font-style: normal; font-size: 12.5px; letter-spacing: 0.03em; white-space: nowrap; color: var(--pale); margin-top: 3px; }
.etiquette:hover b { color: var(--or); }

/* Les réseaux : la table à filets cuivre du site (« Runtime / Episodes ») */
.canaux { padding: 56px 20px 0; text-align: center; }
.canaux h2 { font-weight: 600; font-size: 22px; letter-spacing: 0.32em; text-transform: uppercase; padding-left: 0.32em; }
.sous { font-weight: 500; font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--pale); margin: 6px 0 22px; padding-left: 0.32em; }
.table { list-style: none; border: 1px solid rgb(236 132 51 / 0.5); text-align: left; }
.table li + li { border-top: 1px solid rgb(236 132 51 / 0.25); }
.table a { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px 18px; }
.table span { font-weight: 500; font-size: 18px; }
.table i { font-style: normal; font-size: 15px; color: var(--pale); }
.table i::after { content: "›"; margin-left: 10px; color: var(--or); }
.table a:hover span, .table a:hover i { color: var(--or); }

/* Les nuages du carton de fin, en pied de page */
.pied { position: relative; margin-top: 48px; aspect-ratio: 1080 / 490; background: url(nuages.jpg) 50% 100% / cover no-repeat; text-align: center; }
.pied::before { content: ""; position: absolute; inset: 0 0 auto; height: 45%; background: linear-gradient(#060304, transparent); }
.pied p { position: relative; text-transform: uppercase; }
.site { padding-top: 8%; font-weight: 600; font-size: 14px; letter-spacing: 0.3em; padding-left: 0.3em; }
.studio { margin-top: 6px; font-size: 11px; letter-spacing: 0.3em; color: var(--pale); padding-left: 0.3em; }