/* Hub des actus Bouyon · « La une »
   L'actu la plus récente en grand, les 7 derniers jours en bande, puis le fil
   mois par mois. Mêmes polices et mêmes couleurs d'île que le hub du dossier.
   Généré par src/scripts/shared/bouyon-news-template.js (renderNewsIndexPage). */

@font-face { font-family: "Clash Display"; src: url("/assets/fonts/clash-display.woff2") format("woff2"); font-weight: 200 700; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("/assets/fonts/caveat.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/assets/fonts/satoshi.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }

.ax {
  --ax-t1: #f3f5f7;
  --ax-t2: rgba(243, 245, 247, 0.7);
  --ax-t3: rgba(243, 245, 247, 0.52);
  --ax-filet: rgba(243, 245, 247, 0.12);
  --ax-titre: "Clash Display", "Satoshi", system-ui, sans-serif;
  --ax-texte: "Satoshi", system-ui, sans-serif;
  --ax-ease: cubic-bezier(0.22, 0.8, 0.24, 1);
  --ile: #5fe3ff;
  color: var(--ax-t1);
  font-family: var(--ax-texte);
}
/* la page garde des marges et une largeur de lecture, comme le hub */
.artist-page.ax { background: none; box-sizing: border-box; max-width: 1180px; margin: 0 auto; padding: clamp(36px, 6vw, 72px) clamp(16px, 4vw, 40px) 80px; }
.ax [data-ile="gwa"], .ax [data-ile="gwa"] i { --ile: #ffbe5c; }
.ax [data-ile="dom"], .ax [data-ile="dom"] i { --ile: #ff7a70; }
.ax [data-ile="sxm"], .ax [data-ile="sxm"] i { --ile: #5fe3ff; }
.ax [data-ile="ail"], .ax [data-ile="ail"] i { --ile: #c3a1ff; }
.ax a { color: inherit; text-decoration: none; }
.ax em { font-style: normal; color: var(--ile); }

/* en-tête */
.ax-head { display: grid; gap: 14px; margin: 0 0 clamp(34px, 5vw, 56px); }
.ax-h1 { margin: 0; font: 500 clamp(52px, 8vw, 108px)/0.92 var(--ax-titre); letter-spacing: -0.03em; text-transform: none; }
.ax-h1 em { color: var(--ax-t3); }
.ax-lede { margin: 0; max-width: 34ch; font: 700 clamp(20px, 2.4vw, 26px)/1.3 var(--ax-texte); letter-spacing: -0.01em; text-wrap: balance; }
.ax-lede b { color: #ffbe5c; }
.ax-proof { margin: 0; color: var(--ax-t3); font-size: 14px; }

/* « Vu sur @bouyonews » (Terry, 18/10/2026, « Bande ») : the covers of the published posts, in
   the order of the profile grid, swiped like a carousel; each one says where it leads */
.ax-vu { --ax-jaune: #ffd23f; margin: 0 0 clamp(36px, 5vw, 56px); }
.ax-vu__h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.ax-vu__lab { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--ax-jaune); font: 700 13px/1.2 var(--ax-texte); letter-spacing: 0.08em; text-transform: uppercase; }
.ax-vu__lab svg { width: 16px; height: 16px; flex: none; }
.ax-vu__h > span { color: var(--ax-t3); font-size: 13px; }
.ax-vu__piste { display: flex; gap: 14px; margin: 0 calc(-1 * clamp(16px, 4vw, 40px)); padding: 0 clamp(16px, 4vw, 40px) 8px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: clamp(16px, 4vw, 40px); scrollbar-width: none; }
.ax-vu__piste::-webkit-scrollbar { display: none; }
.ax-vu__piste:focus-visible { outline: 2px solid var(--ax-jaune); outline-offset: 4px; }
.ax-vu__piste li { flex: 0 0 min(44vw, 240px); scroll-snap-align: start; }
.ax-vu__piste a { display: block; -webkit-tap-highlight-color: transparent; }
.ax-vu__piste img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 0.16s ease-out; }
.ax-vu__piste a:active img { transform: scale(0.98); }
@media (hover: hover) { .ax-vu__piste a:hover img { transform: translateY(-3px); } }
.ax-vu__piste a:focus-visible { outline: 2px solid var(--ax-jaune); outline-offset: 3px; }
.ax-vu__d { display: block; margin-top: 10px; color: var(--ax-t3); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; }
.ax-vu__t { display: block; margin-top: 3px; font: 700 15px/1.3 var(--ax-texte); text-wrap: balance; }
.ax-vu__go { display: inline-block; margin-top: 6px; color: var(--ax-jaune); font-size: 14px; font-weight: 700; }
/* the counters and the island buttons, now under the lead story */
.ax-reperes { margin-top: calc(-1 * clamp(14px, 2vw, 24px)); }
@media (prefers-reduced-motion: reduce) { .ax-vu__piste img { transition: none; } }

/* la une */
.ax-une { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(20px, 4vw, 48px); align-items: end; margin-bottom: clamp(44px, 6vw, 72px); }
.ax-une__img { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; max-width: 100%; overflow: hidden; border-radius: 18px; }
.ax-une__pic { transition: transform 1.2s var(--ax-ease); }
.ax-une:hover .ax-une__pic { transform: scale(1.03); }
.ax-une__c { display: block; }
.ax-kick { display: block; color: var(--ile); font-size: 13px; font-weight: 700; }
.ax-une__t { display: block; margin: 10px 0 14px; font: 500 clamp(32px, 4.4vw, 54px)/1.03 var(--ax-titre); letter-spacing: -0.02em; text-wrap: balance; }
.ax-une__r { display: block; max-width: 52ch; margin-bottom: 22px; color: var(--ax-t2); font-size: 17px; line-height: 1.55; }
.ax-lien { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 3px; border-bottom: 1.5px solid currentColor; font-weight: 700; transition: gap 0.35s var(--ax-ease); }
.ax-une:hover .ax-lien { gap: 16px; }
@media (max-width: 760px) { .ax-une { grid-template-columns: 1fr; } .ax-une__img { aspect-ratio: 4 / 3; } }

/* sections */
.ax-sec__h { display: flex; align-items: baseline; gap: 12px; margin: 0 0 18px; }
.ax-sec__h h2 { margin: 0; font: 500 clamp(26px, 3.4vw, 36px)/1 var(--ax-titre); letter-spacing: -0.01em; text-transform: none; }
.ax-sec__h span { color: var(--ax-t3); font-size: 14px; }

/* les 7 derniers jours */
.ax-rail { display: flex; gap: 18px; margin: 0 0 clamp(44px, 6vw, 64px); padding: 0 0 12px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.ax-rail::-webkit-scrollbar { display: none; }
.ax-rail li { flex: none; width: clamp(170px, 19vw, 210px); scroll-snap-align: start; }
.ax-rail a { display: block; }
.ax-rail__img { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; max-width: 100%; overflow: hidden; border-radius: 14px; }
.ax-rail__pic { transition: transform 0.9s var(--ax-ease); }
.ax-rail a:hover .ax-rail__pic { transform: scale(1.04); }
.ax-rail__d { display: block; margin-top: 12px; color: var(--ile); font-size: 12.5px; font-weight: 700; }
.ax-rail__t { display: block; margin-top: 5px; font-size: 16px; font-weight: 700; line-height: 1.3; text-wrap: balance; }

/* portrait net : jamais plus grand que --ax-net ; au-delà, il se pose sur son
   propre reflet flouté, qui remplit le cadre */
.ax-une__pic, .ax-rail__pic { position: relative; display: block; width: 100%; height: 100%; max-width: var(--ax-net, 100%); max-height: calc(var(--ax-net, 80%) * 1.25); object-fit: cover; border-radius: 10px; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.8); }
.ax-flou { position: absolute; inset: -12%; width: 124%; height: 124%; max-width: none; object-fit: cover; filter: blur(26px) saturate(1.25) brightness(0.62); }

/* portrait absent : l'initiale sur la couleur de l'île */
.ax-vide { display: grid; place-items: center; width: 100%; height: 100%; background: linear-gradient(150deg, color-mix(in srgb, var(--ile) 50%, #101828), #0b1320); color: rgba(255, 255, 255, 0.6); font: 500 40px/1 var(--ax-titre); }

/* filtres : des mots, pas des boutons encadrés */
.ax-filtres { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: baseline; margin: 0 0 8px; padding: 14px 0 16px; border-top: 1px solid var(--ax-filet); border-bottom: 1px solid var(--ax-filet); }
.ax-fg { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; }
.ax-fg__lab { color: var(--ax-t3); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.ax-fg button { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--ax-t3); font: 600 14.5px/1 var(--ax-texte); cursor: pointer; transition: color 0.25s; }
.ax-fg button sup { color: var(--ax-t3); font-size: 11px; }
.ax-fg button i { width: 8px; height: 8px; border-radius: 50%; background: var(--ile); }
.ax-fg button:hover, .ax-fg button[aria-pressed="true"] { color: var(--ax-t1); }

/* le fil, mois par mois */
.ax-mois__h { position: sticky; top: var(--eb-h, 64px); z-index: 2; display: flex; align-items: baseline; gap: 14px; margin: 0; padding: 30px 0 12px; background: linear-gradient(var(--bg, #080c14) 80%, transparent); font: 500 clamp(34px, 5vw, 58px)/1 var(--ax-titre); letter-spacing: -0.025em; text-transform: capitalize; }
/* le mois suit l'en-tête du dossier quand il se cache au défilement (bouyon-entete.js pose
   html.eb-cache) ; sans ça il restait 64 px plus bas et les actus passaient tranchées au-dessus
   de lui (capture de Terry sur « September », 12/10/2026) */
.ax-mois__h { transition: translate var(--eb-montre, 280ms) var(--eb-sortie, cubic-bezier(.23, 1, .32, 1)); }
html.eb-cache .ax-mois__h { translate: 0 calc(-1 * var(--eb-h, 64px)); transition-duration: var(--eb-disparait, 200ms); }
.ax-mois__h span { color: var(--ax-t3); font: 600 14px/1 var(--ax-texte); letter-spacing: 0; text-transform: none; }
.ax-rows { margin: 0; padding: 0; list-style: none; }
.ax-row { border-top: 1px solid var(--ax-filet); }
.ax-row a { display: grid; grid-template-columns: 62px 58px minmax(0, 1fr) 22px; gap: 18px; align-items: center; padding: 16px 0; transition: opacity 0.3s var(--ax-ease); }
.ax-row__d { font: 500 30px/1 var(--ax-titre); color: var(--ax-t2); font-variant-numeric: tabular-nums; }
.ax-row__d small { display: block; margin-top: 4px; color: var(--ax-t3); font: 700 11px/1 var(--ax-texte); letter-spacing: 0.06em; text-transform: uppercase; }
.ax-row__img { display: block; width: 58px; height: 72px; overflow: hidden; border-radius: 10px; }
.ax-row__pic { display: block; width: 100%; height: 100%; object-fit: cover; }
.ax-row__img .ax-vide { font-size: 20px; }
.ax-row__c { display: block; min-width: 0; }
.ax-row__t { display: block; font-size: clamp(17px, 1.8vw, 20px); font-weight: 700; line-height: 1.28; text-wrap: balance; }
.ax-row__r { display: -webkit-box; margin-top: 4px; overflow: hidden; color: var(--ax-t3); font-size: 14px; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.ax-row__go { color: var(--ile); opacity: 0; transform: translateX(-6px); transition: 0.35s var(--ax-ease); }
@media (hover: hover) {
  .ax-rows:hover .ax-row a { opacity: 0.4; }
  .ax-rows .ax-row a:hover, .ax-rows .ax-row a:focus-visible { opacity: 1; }
  .ax-row a:hover .ax-row__go, .ax-row a:focus-visible .ax-row__go { opacity: 1; transform: none; }
}
@media (max-width: 560px) {
  .ax-row a { grid-template-columns: 44px 56px minmax(0, 1fr); gap: 12px; }
  .ax-row__d { font-size: 24px; }
  .ax-row__img { width: 56px; height: 70px; }
  .ax-row__go { display: none; }
}

/* les actus déjà en haut ne se répètent pas dans le fil, sauf quand on filtre */
.ax-fil:not([data-filtre]) .ax-row.is-recent { display: none; }
.ax-row.is-cachee, .ax-mois.is-cachee { display: none; }
.ax-vide-fil { color: var(--ax-t3); padding: 20px 0; }

/* « À l'instant » : les dix derniers titres défilent ; survol ou clavier les arrêtent */

/* l'édito : le pôle éditorial du hub, un texte signé fait des actus de la semaine */
.ax-edito { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 14px clamp(28px, 5vw, 64px); margin: 0 0 clamp(52px, 7vw, 84px); padding: clamp(26px, 4vw, 40px) 0 0; border-top: 2px solid var(--ax-t1); }
.ax-edito__lab { grid-column: 1 / -1; margin: 0; color: var(--ax-t3); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.ax-edito__t { grid-column: 1; margin: 0; font: 500 clamp(34px, 4.6vw, 58px)/1.02 var(--ax-titre); letter-spacing: -0.02em; text-transform: none; text-wrap: balance; }
.ax-edito__texte { grid-column: 2; grid-row: 2 / span 3; }
.ax-edito__texte p { max-width: 58ch; margin: 0 0 16px; color: var(--ax-t2); font-size: 18px; line-height: 1.62; }
.ax-edito__texte p:first-child::first-letter { float: left; margin: 7px 12px 0 0; color: #ffbe5c; font: 500 3.6em/0.78 var(--ax-titre); }
.ax-edito__texte p:last-child { color: var(--ax-t1); font-weight: 700; }
.ax-edito__signe { grid-column: 2; margin: 0; color: #ffbe5c; font: 600 30px/1 "Caveat", cursive; }
.ax-edito__liens { grid-column: 1; grid-row: 3; align-self: end; }
.ax-edito__liens > span { display: block; margin-bottom: 10px; color: var(--ax-t3); font-size: 13px; font-weight: 700; }
.ax-edito__liens ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.ax-edito__liens a { display: flex; align-items: center; min-height: 44px; gap: 12px; color: var(--ax-t2); font-size: 14.5px; font-weight: 600; line-height: 1.3; transition: color 0.25s; }
.ax-edito__liens a:hover { color: var(--ax-t1); }
.ax-edito__pic { flex: none; width: 36px; height: 36px; overflow: hidden; border-radius: 50%; background: var(--ax-filet); box-shadow: 0 0 0 2px var(--ile); }
.ax-edito__pic img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) {
  .ax-edito { grid-template-columns: 1fr; }
  .ax-edito__t, .ax-edito__texte, .ax-edito__signe, .ax-edito__liens { grid-column: 1; grid-row: auto; }
}

/* l'arrivée sur la page : le titre, puis la une qui se dévoile */
.ax-h1, .ax-lede, .ax-proof, .ax-une__c { animation: ax-monte 0.9s var(--ax-ease) both; }
.ax-lede { animation-delay: 0.08s; }
.ax-proof { animation-delay: 0.16s; }
.ax-une__c { animation-delay: 0.42s; }
.ax-une__img { animation: ax-devoile 1.2s var(--ax-ease) 0.3s both; }
@keyframes ax-monte { from { opacity: 0; transform: translateY(18px); } }
@keyframes ax-devoile { from { clip-path: inset(0 0 100% 0 round 18px); } to { clip-path: inset(0 0 0 0 round 18px); } }

/* au défilement : chaque bloc monte en place quand il entre à l'écran */
.ax-reveal { transition: opacity 0.8s var(--ax-ease), transform 0.8s var(--ax-ease); }
.ax-js .ax-reveal:not(.is-vu) { opacity: 0; transform: translateY(22px); }

@media (prefers-reduced-motion: reduce) {
  .ax-une__pic, .ax-rail__pic, .ax-lien, .ax-row a, .ax-row__go, .ax-reveal { transition: none; }
  .ax-h1, .ax-lede, .ax-proof, .ax-une__c, .ax-une__img { animation: none; }
}

/* ═══ Le hub « Par île » (choix de Terry, 12/10/2026) ═══
   Aligné sur l'annuaire des artistes : fond noir, titres en capitales, les îles en gros chiffres
   à leur couleur (tokens --annuaire-*), et chaque actu marquée de la couleur de son île. */
body:has(main.ax) { --bg: var(--color-bg, #050505); background: var(--color-bg, #050505); }
.ax-h1 { font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; line-height: 0.9; }
.ax-h1 em { color: inherit; font-style: normal; }
.ax-mois__h { font-weight: 700; text-transform: uppercase; }
.ax-iles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 14px 0 0; }
.ax-iles button { display: grid; align-content: end; justify-items: start; gap: 4px; min-height: 44px; padding: 0 0 10px; border: 0; border-bottom: 6px solid var(--c); background: none; color: var(--c); text-align: left; cursor: pointer; }
.ax-iles b { font: 700 clamp(9px, 2.6vw, 12px)/1.1 var(--ax-titre); letter-spacing: 0.02em; text-transform: uppercase; overflow-wrap: anywhere; }
.ax-iles span { font: 700 clamp(44px, 9vw, 86px)/0.9 var(--ax-titre); color: transparent; -webkit-text-stroke: 2px var(--c); transition: color 0.2s var(--ax-ease); }
.ax-iles button[aria-pressed="true"] span { color: var(--c); }
.ax-iles button:focus-visible { outline: 2px solid var(--c); outline-offset: 4px; }
.ax-row { border-left: 4px solid var(--c, transparent); padding-left: 12px; }
:is(.ax-iles button, .ax-row)[data-ile="dom"] { --c: var(--annuaire-dominique, #ff80b9); }
:is(.ax-iles button, .ax-row)[data-ile="gwa"] { --c: var(--annuaire-gwada, #1ad3bd); }
:is(.ax-iles button, .ax-row)[data-ile="sxm"] { --c: var(--annuaire-sxm, #eb4b1f); }
:is(.ax-iles button, .ax-row)[data-ile="ail"] { --c: var(--annuaire-ailleurs, #a378e2); }

/* Rien ne se voit à travers l'en-tête (Terry, 12/10/2026 : « on voit un morceau du contenu
   apparaître dans le header, je n'en veux pas »). L'en-tête du dossier n'est fait que de pastilles
   sans fond : une bande pleine, de la hauteur de l'en-tête, couvre le haut de l'écran jusqu'au mois
   collé, et part avec l'en-tête quand il se cache. */
body:has(main.ax)::before { content: ""; position: fixed; inset: 0 0 auto; z-index: calc(var(--eb-z, 1000) - 1); height: var(--eb-h, 56px); background: var(--color-bg, #050505); pointer-events: none; transition: translate var(--eb-montre, 280ms) var(--eb-sortie, ease-out); }
html.eb-cache body:has(main.ax)::before { translate: 0 -100%; transition-duration: var(--eb-disparait, 200ms); }
/* et le bandeau du mois collé est plein jusqu'en bas : son dégradé laissait passer le trait de
   couleur de l'actu qui défilait dessous */
.ax-mois__h { background: var(--bg, #050505); }