/* Articles du dossier Bouyon · « Annuaire », choisi par Terry le 10/10/2026.
   Suit bouyon-chapitre-affiche.css et ne vise que body[data-mise="annuaire"] :
   la définition garde l'habillage Affiche. Le noir et les couleurs d'île
   viennent de l'annuaire des artistes (tokens --annuaire-*), la navigation du
   modèle Hostinger désigné le 08/10 (sommaire collé à gauche, partage collé à
   droite ; sous 1 024 px, une barre collée en haut). Une seule police de
   titre, celle des hubs : Clash Display ; le texte reste en Source Sans 3. */

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

body[data-skin="affiche"][data-mise="annuaire"] {
  --af-bg: var(--annuaire-noir);
  --af-text: #ffffff;
  --af-soft: rgb(255 255 255 / .72);
  --af-rule: rgb(255 255 255 / .16);
  --af-ink: var(--c);
  --af-ink-deep: var(--c);
  --af-ink-glow: transparent;
  --af-surface: #111111;
  --an-actif: var(--annuaire-actif);
  /* La couleur d'île pour les petits textes : éclaircie pour garder 4,5:1 sur le noir
     (le bleu de Trinidad pur tombe sous le seuil). */
  --c-texte: color-mix(in oklab, var(--c) 72%, white);
}
body[data-skin="affiche"][data-mise="annuaire"] .bouyon-chapter { --font-display: "Clash Display", sans-serif; }

/* ---------- Ouverture ---------- */
body[data-skin="affiche"][data-mise="annuaire"] .an-une { background: var(--annuaire-noir); color: #fff; text-align: center; }
body[data-skin="affiche"][data-mise="annuaire"] .an-tete { padding: clamp(32px, 6vw, 72px) var(--af-g) clamp(36px, 5vw, 64px); }
body[data-skin="affiche"][data-mise="annuaire"] .an-sur { display: grid; gap: 4px; margin: 0; }
body[data-skin="affiche"][data-mise="annuaire"] .an-sur b { font: 800 13px/1 "Source Sans 3", system-ui, sans-serif; letter-spacing: .24em; text-transform: uppercase; }
body[data-skin="affiche"][data-mise="annuaire"] .an-sur span { color: var(--c); font: 600 clamp(22px, 2.6vw, 30px)/1 "Clash Display", sans-serif; text-transform: uppercase; }
body[data-skin="affiche"][data-mise="annuaire"] .an-grand { position: relative; display: inline-block; margin: 8px 0 0; color: transparent; -webkit-text-stroke: 3px var(--c); font: 700 clamp(96px, 17vw, 240px)/.85 "Clash Display", sans-serif; font-variant-numeric: tabular-nums; }
body[data-skin="affiche"][data-mise="annuaire"] .an-grand--periode { font-size: clamp(56px, 11vw, 168px); white-space: nowrap; }
body[data-skin="affiche"][data-mise="annuaire"] .an-barre-ile { display: block; width: min(520px, 80%); height: 12px; margin: 22px auto 0; background: var(--c); transform-origin: left; }
@media (prefers-reduced-motion: no-preference) { body[data-skin="affiche"][data-mise="annuaire"] .an-barre-ile { animation: an-barre 700ms cubic-bezier(.23, 1, .32, 1) 150ms both; } }
@keyframes an-barre { from { transform: scaleX(0); } }
body[data-skin="affiche"][data-mise="annuaire"] .bouyon-chapter__title.an-titre { max-width: 16ch; margin: clamp(24px, 3vw, 40px) auto 0; padding: 0; color: #fff; font: 600 clamp(40px, 6vw, 92px)/.95 "Clash Display", sans-serif; letter-spacing: 0; text-transform: uppercase; text-wrap: balance; text-shadow: none; }
body[data-skin="affiche"][data-mise="annuaire"] .an-titre em { color: inherit; font: inherit; font-style: normal; }
body[data-skin="affiche"][data-mise="annuaire"] .bouyon-chapter__subtitle.an-chapo { max-width: 34em; margin: 22px auto 0; color: #fff; font: 400 clamp(18px, 1.6vw, 21px)/1.55 "Source Sans 3", system-ui, sans-serif; opacity: 1; transform: none; }
body[data-skin="affiche"][data-mise="annuaire"] .an-meta { margin: 18px 0 0; color: rgb(255 255 255 / .75); font: 700 12px/1.6 "Source Sans 3", system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
body[data-skin="affiche"][data-mise="annuaire"] .an-scene { padding: clamp(36px, 7vw, 96px) var(--af-g); background: var(--c); }
body[data-skin="affiche"][data-mise="annuaire"] .an-scene .bouyon-chapter__figure--hero { max-width: 1080px; margin: 0 auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; transform: rotate(-1.5deg); }
body[data-skin="affiche"][data-mise="annuaire"] .an-scene .bouyon-chapter__figure--hero :is(picture, img) { display: block; width: 100%; height: auto; max-height: none; border-radius: 0; }
/* La légende de la photo, lisible en noir sur l'aplat de l'île. */
body[data-skin="affiche"][data-mise="annuaire"] .an-scene figcaption { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; margin: 16px 0 0; padding: 0; border: 0; background: none; color: #000; font: 700 12px/1.5 "Source Sans 3", system-ui, sans-serif; letter-spacing: .12em; text-align: left; text-transform: uppercase; opacity: 1; }
body[data-skin="affiche"][data-mise="annuaire"] .an-scene figcaption::before { content: none; }
body[data-skin="affiche"][data-mise="annuaire"] .bouyon-chapter__outils { margin-top: clamp(20px, 3vw, 32px); }

/* ---------- Colonnes (dès 1 024 px) : sommaire | texte | partage ---------- */
body[data-skin="affiche"][data-mise="annuaire"] :is(.an-sommaire, .an-partage) { display: none; }
@media (min-width: 1024px) {
  body[data-skin="affiche"][data-mise="annuaire"] .lx-corps { display: grid; grid-template-columns: minmax(190px, 1fr) minmax(0, 680px) minmax(150px, 1fr); column-gap: clamp(28px, 3vw, 48px); width: min(1360px, calc(100% - 2 * var(--af-g))); }
  body[data-skin="affiche"][data-mise="annuaire"] .lx-colonne { grid-column: 2; grid-row: 1; }
  body[data-skin="affiche"][data-mise="annuaire"] :is(.an-sommaire, .an-partage) { display: block; grid-row: 1; align-self: start; position: sticky; z-index: 5; top: calc(var(--af-head) + 48px); width: 100%; max-width: 260px; margin-top: 40px; }
  body[data-skin="affiche"][data-mise="annuaire"] .an-sommaire { grid-column: 1; justify-self: start; }
  body[data-skin="affiche"][data-mise="annuaire"] .an-partage { grid-column: 3; justify-self: end; }
}
body[data-skin="affiche"][data-mise="annuaire"] .an-retour { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-bottom: 18px; color: #fff; font: 600 15px/1.2 "Source Sans 3", system-ui, sans-serif; text-decoration: none; }
body[data-skin="affiche"][data-mise="annuaire"] .an-retour:hover { color: var(--c-texte); }
body[data-skin="affiche"][data-mise="annuaire"] .an-plier > summary { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0 0 6px; color: var(--af-soft); font: 700 12px/1.3 "Source Sans 3", system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; list-style: none; }
body[data-skin="affiche"][data-mise="annuaire"] :is(.an-plier, .an-ici) > summary::-webkit-details-marker { display: none; }
body[data-skin="affiche"][data-mise="annuaire"] .an-chev { flex: none; width: 7px; height: 7px; margin-top: 3px; border-left: 2px solid currentColor; border-top: 2px solid currentColor; transform: translateY(-3px) rotate(225deg); transition: transform 200ms cubic-bezier(.23, 1, .32, 1); }
body[data-skin="affiche"][data-mise="annuaire"] details[open] > summary .an-chev { transform: rotate(45deg); }
body[data-skin="affiche"][data-mise="annuaire"] :is(.an-sommaire, .an-ici) ol { margin: 0; padding: 0; list-style: none; }
body[data-skin="affiche"][data-mise="annuaire"] .an-sommaire li a { position: relative; display: block; padding: 9px 0 9px 16px; color: rgb(255 255 255 / .7); font: 600 15px/1.35 "Source Sans 3", system-ui, sans-serif; text-decoration: none; transition: color 150ms ease-out; }
/* Le trait de chaque partie se remplit de la couleur d'île pendant la lecture. */
body[data-skin="affiche"][data-mise="annuaire"] .an-sommaire li a::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: rgb(255 255 255 / .14); }
body[data-skin="affiche"][data-mise="annuaire"] .an-sommaire li a::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c); transform: scaleY(var(--p, 0)); transform-origin: top; }
body[data-skin="affiche"][data-mise="annuaire"] .an-sommaire li a[data-actif]::after { background: var(--an-actif); }
body[data-skin="affiche"][data-mise="annuaire"] .an-sommaire li a:is(:hover, [data-actif]) { color: #fff; }
body[data-skin="affiche"][data-mise="annuaire"] .an-sommaire li a[data-actif] { font-weight: 700; }
body[data-skin="affiche"][data-mise="annuaire"] .an-reste { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--af-rule); color: var(--af-soft); font: 700 11px/1.4 "Source Sans 3", system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase; }
body[data-skin="affiche"][data-mise="annuaire"] .an-reste:empty { display: none; }

/* ---------- Partage : logos officiels, un carré par réseau ---------- */
body[data-skin="affiche"][data-mise="annuaire"] .an-partage-titre { margin: 0 0 12px; color: var(--af-soft); font: 700 12px/1.3 "Source Sans 3", system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase; }
body[data-skin="affiche"][data-mise="annuaire"] .an-reseaux { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
body[data-skin="affiche"][data-mise="annuaire"] .an-reseau { position: relative; display: grid; place-items: center; width: 46px; height: 46px; min-height: 0; margin: 0; padding: 0; border: 1px solid rgb(255 255 255 / .14); border-radius: 0; background: #141414; color: #fff; box-shadow: none; cursor: pointer; transition: background-color 150ms ease-out, border-color 150ms ease-out, transform 150ms ease-out; }
body[data-skin="affiche"][data-mise="annuaire"] .an-reseau img { display: block; width: 24px; height: 24px; }
body[data-skin="affiche"][data-mise="annuaire"] .an-reseau:hover { background: #222; border-color: var(--c); color: #fff; }
body[data-skin="affiche"][data-mise="annuaire"] .an-reseau--whatsapp:hover { border-color: #25d366; }
body[data-skin="affiche"][data-mise="annuaire"] .an-reseau--facebook:hover { border-color: #0866ff; }
body[data-skin="affiche"][data-mise="annuaire"] .an-reseau--x:hover { border-color: #fff; }
body[data-skin="affiche"][data-mise="annuaire"] .an-reseau:active { transform: scale(.96); }
body[data-skin="affiche"][data-mise="annuaire"] .an-reseau:focus-visible { outline: 3px solid var(--an-actif); outline-offset: 2px; }
body[data-skin="affiche"][data-mise="annuaire"] .an-copie { min-height: 1.4em; margin: 10px 0 0; color: var(--an-actif); font: 700 13px/1.4 "Source Sans 3", system-ui, sans-serif; }

/* ---------- Sous 1 024 px : la barre collée en haut ---------- */
body[data-skin="affiche"][data-mise="annuaire"] .an-barre { position: sticky; top: var(--af-head); z-index: 800; display: flex; align-items: stretch; background: var(--annuaire-noir); border-bottom: 1px solid rgb(255 255 255 / .12); }
body[data-skin="affiche"][data-mise="annuaire"] .an-ici { flex: 1; min-width: 0; }
body[data-skin="affiche"][data-mise="annuaire"] .an-ici > summary { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 6px 12px 6px var(--af-g); color: #fff; cursor: pointer; list-style: none; }
body[data-skin="affiche"][data-mise="annuaire"] .an-ici-n { flex: none; color: var(--c-texte); font: 600 15px/1 "Clash Display", sans-serif; font-variant-numeric: tabular-nums; }
body[data-skin="affiche"][data-mise="annuaire"] .an-ici-t { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font: 600 14px/1.15 "Clash Display", sans-serif; text-transform: uppercase; }
body[data-skin="affiche"][data-mise="annuaire"] .an-ici .an-chev { margin-left: auto; }
body[data-skin="affiche"][data-mise="annuaire"] .an-ici--retour { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 6px 12px 6px var(--af-g); color: #fff; font: 600 15px/1.2 "Source Sans 3", system-ui, sans-serif; text-decoration: none; }
body[data-skin="affiche"][data-mise="annuaire"] .an-ici > nav { position: absolute; left: 0; right: 0; top: 100%; max-height: 70svh; overflow-y: auto; padding: 8px var(--af-g) 14px; background: var(--annuaire-noir); border-bottom: 1px solid rgb(255 255 255 / .16); }
body[data-skin="affiche"][data-mise="annuaire"] .an-ici ol { counter-reset: an-partie; }
body[data-skin="affiche"][data-mise="annuaire"] .an-ici li a { display: grid; grid-template-columns: 40px 1fr; align-items: center; min-height: 48px; padding: 6px 0; border-bottom: 1px solid rgb(255 255 255 / .08); color: rgb(255 255 255 / .75); font: 600 15px/1.2 "Clash Display", sans-serif; text-transform: uppercase; text-decoration: none; counter-increment: an-partie; }
body[data-skin="affiche"][data-mise="annuaire"] .an-ici li a::before { content: counter(an-partie, decimal-leading-zero); color: rgb(255 255 255 / .45); font-variant-numeric: tabular-nums; }
body[data-skin="affiche"][data-mise="annuaire"] .an-ici li a[data-lu]::before { color: var(--c-texte); }
body[data-skin="affiche"][data-mise="annuaire"] .an-ici li a[data-actif], body[data-skin="affiche"][data-mise="annuaire"] .an-ici li a[data-actif]::before { color: var(--an-actif); }
body[data-skin="affiche"][data-mise="annuaire"] .an-partager { position: relative; flex: none; }
body[data-skin="affiche"][data-mise="annuaire"] .an-partager > summary { display: grid; place-items: center; width: 60px; height: 100%; min-height: 60px; border-left: 1px solid rgb(255 255 255 / .16); color: #fff; cursor: pointer; list-style: none; }
body[data-skin="affiche"][data-mise="annuaire"] .an-partager > summary::-webkit-details-marker { display: none; }
body[data-skin="affiche"][data-mise="annuaire"] .an-partager[open] > summary { background: #fff; color: #000; }
body[data-skin="affiche"][data-mise="annuaire"] .an-partage-menu { position: absolute; right: var(--af-g); top: calc(100% + 8px); width: max-content; padding: 12px; background: #111; border: 1px solid rgb(255 255 255 / .16); }
body[data-skin="affiche"][data-mise="annuaire"] .an-partage-menu .an-reseaux { flex-wrap: nowrap; }

/* Dès 1 024 px, les deux colonnes remplacent la barre. */
/* « Encore N min » est dans le sommaire : le compteur flottant ferait doublon. */
@media (min-width: 1024px) { body[data-skin="affiche"][data-mise="annuaire"] :is(.an-barre, .bouyon-chapter__time-remaining) { display: none !important; } }

/* ---------- Les parties ---------- */
body[data-skin="affiche"][data-mise="annuaire"] .af-partie { display: flex; flex-direction: column; }
body[data-skin="affiche"][data-mise="annuaire"] .af-partie > .bouyon-chapter__figure--inline { margin-top: 28px; }
body[data-skin="affiche"][data-mise="annuaire"] .af-partie .bouyon-chapter__hr { display: none; }
body[data-skin="affiche"][data-mise="annuaire"] .af-partie .af-tete { margin-top: 72px; }
body[data-skin="affiche"][data-mise="annuaire"] .af-num { position: relative; display: inline-block; margin-bottom: 14px; color: transparent; -webkit-text-stroke: 2px var(--c); font: 700 clamp(96px, 15vw, 190px)/.8 "Clash Display", sans-serif; font-variant-numeric: tabular-nums; }
/* Le numéro de la partie se remplit de la couleur d'île pendant qu'on la lit. */
body[data-skin="affiche"][data-mise="annuaire"] .af-num::after { content: attr(data-n); position: absolute; inset: 0; color: var(--c); -webkit-text-stroke: 0; clip-path: inset(calc((1 - var(--p, 0)) * 100%) 0 0 0); }
body[data-skin="affiche"][data-mise="annuaire"] .bouyon-chapter__h2 { color: #fff; font: 600 clamp(32px, 4.6vw, 60px)/1 "Clash Display", sans-serif; text-transform: uppercase; text-wrap: balance; }
body[data-skin="affiche"][data-mise="annuaire"] .an-jauge { position: relative; display: block; height: 10px; margin-top: 22px; overflow: hidden; background: rgb(255 255 255 / .12); }
body[data-skin="affiche"][data-mise="annuaire"] .an-jauge::after { content: ""; position: absolute; inset: 0; background: var(--c); transform: scaleX(var(--p, 0)); transform-origin: left; }
body[data-skin="affiche"][data-mise="annuaire"] .bouyon-chapter__stat-num { color: transparent; -webkit-text-stroke: 2px var(--c); font-family: "Clash Display", sans-serif; }
body[data-skin="affiche"][data-mise="annuaire"] .bouyon-chapter__cliffhanger p:not(.bouyon-chapter__cliffhanger-tag) { color: var(--c); font: 600 clamp(22px, 3vw, 28px)/1.2 "Clash Display", sans-serif; }
body[data-skin="affiche"][data-mise="annuaire"] .bouyon-chapter__pullquote :is(cite, footer) { font: 700 13px/1.4 "Source Sans 3", system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
body[data-skin="affiche"][data-mise="annuaire"] .bouyon-chapter__article a { color: var(--c-texte); }

/* ---------- Fin d'article, resserrée ---------- */
body[data-skin="affiche"][data-mise="annuaire"] .lx-fin { row-gap: clamp(40px, 5vw, 56px); margin-top: 64px; }
/* Le partage est déjà là pendant toute la lecture : plus de second bloc. */
body[data-skin="affiche"][data-mise="annuaire"] .lx-fin .bouyon-chapter__partage-fin { display: none; }
body[data-skin="affiche"][data-mise="annuaire"] .bouyon-chapter__retenir-item { padding-block: 14px; }
body[data-skin="affiche"][data-mise="annuaire"] .bouyon-chapter__retenir-item :is(p, li) { font-size: 17px; line-height: 1.5; }
body[data-skin="affiche"][data-mise="annuaire"] #blog-capture { margin-block: 0; }

@media (max-width: 1023px) {
  body[data-skin="affiche"][data-mise="annuaire"] .af-partie .af-tete { margin-top: 56px; }
  body[data-skin="affiche"][data-mise="annuaire"] .af-num { font-size: clamp(96px, 28vw, 150px); -webkit-text-stroke-width: 2.5px; margin-bottom: 10px; }
  body[data-skin="affiche"][data-mise="annuaire"] .bouyon-chapter__h2 { font-size: clamp(30px, 8.6vw, 44px); line-height: 1.02; }
  body[data-skin="affiche"][data-mise="annuaire"] .an-jauge { margin-top: 16px; }
  /* Les outils de lecture restent dans la page : seule la barre du haut colle. */
  body[data-skin="affiche"][data-mise="annuaire"] .bouyon-chapter__outils { position: static !important; transform: none !important; }
}
@media (max-width: 759px) {
  body[data-skin="affiche"][data-mise="annuaire"] .bouyon-chapter__single { grid-template-columns: 104px minmax(0, 1fr); column-gap: 16px; align-items: start; }
  body[data-skin="affiche"][data-mise="annuaire"] .bouyon-chapter__single-fig { grid-column: 1; grid-row: 1 / span 2; width: 104px; margin: 0; }
  body[data-skin="affiche"][data-mise="annuaire"] :is(.bouyon-chapter__single-cover, .bouyon-chapter__single-cover img) { width: 104px; height: 104px; }
  body[data-skin="affiche"][data-mise="annuaire"] .bouyon-chapter__single-stamp { display: none; }
  body[data-skin="affiche"][data-mise="annuaire"] .bouyon-chapter__single-body { grid-column: 2; grid-row: 1; min-width: 0; text-align: left; }
  body[data-skin="affiche"][data-mise="annuaire"] .bouyon-chapter__single-actions { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-skin="affiche"][data-mise="annuaire"] :is(.an-chev, .an-reseau, .an-sommaire li a) { transition: none; }
}

/* ---------- « À lire ensuite » : trois articles (10/10/2026) ---------- */
body[data-skin="affiche"][data-mise="annuaire"] .an-ensuite-titre { margin: 0 0 18px; color: #fff; font: 600 clamp(26px, 3.4vw, 40px)/1 "Clash Display", sans-serif; text-transform: uppercase; }
body[data-skin="affiche"][data-mise="annuaire"] .an-ensuite ol { display: grid; gap: 24px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { body[data-skin="affiche"][data-mise="annuaire"] .an-ensuite ol { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
body[data-skin="affiche"][data-mise="annuaire"] .an-ensuite a { display: block; color: #fff; text-decoration: none; }
body[data-skin="affiche"][data-mise="annuaire"] .an-ensuite img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 12px; border-bottom: 6px solid var(--c); }
body[data-skin="affiche"][data-mise="annuaire"] .an-ensuite-k { display: block; color: color-mix(in oklab, var(--c) 72%, white); font: 700 11px/1.4 "Source Sans 3", system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
body[data-skin="affiche"][data-mise="annuaire"] .an-ensuite b { display: block; margin-top: 4px; font: 600 19px/1.15 "Clash Display", sans-serif; text-transform: uppercase; transition: color 150ms ease-out; }
body[data-skin="affiche"][data-mise="annuaire"] .an-ensuite a:not(:has(img)) { padding-top: 14px; border-top: 6px solid var(--c); }
body[data-skin="affiche"][data-mise="annuaire"] .an-ensuite a:not(:has(img)) b { font-size: clamp(22px, 2.4vw, 28px); }
body[data-skin="affiche"][data-mise="annuaire"] .an-ensuite a:hover b { color: color-mix(in oklab, var(--c) 72%, white); }
body[data-skin="affiche"][data-mise="annuaire"] .an-ensuite-m { display: block; margin-top: 6px; color: var(--af-soft); font: 400 13px/1.4 "Source Sans 3", system-ui, sans-serif; }
@media (max-width: 759px) {
  body[data-skin="affiche"][data-mise="annuaire"] .an-ensuite a:has(img) { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 14px; align-items: start; }
  body[data-skin="affiche"][data-mise="annuaire"] .an-ensuite a:has(img) img { grid-row: 1 / span 3; margin: 0; border-bottom-width: 4px; }
  body[data-skin="affiche"][data-mise="annuaire"] .an-ensuite b { font-size: 17px; }
}