/* Pages intérieures, version B : reprend la direction de l'accueil (index.html, css/site-b.css)
   par-dessus le kit (system.css + site.css). Chargée en dernier : jetons sombres, titres Anton,
   étiquettes mono, boutons pilule menthe, menu « bnav » et pied de page « bfoot ». */
:root {
  --p-bg: #121212; --p-surface: #1e1e1e; --p-ink: #ffffff; --p-muted: #a3a3a3;
  --p-accent: #3cffd0; --p-accent-ink: #0b0b0b; --p-action: #3cffd0; --p-action-ink: #0b0b0b;
  --p-inv-bg: #0b0b0b; --p-inv-surface: #1b1b1b; --p-inv-ink: #ffffff; --p-inv-muted: #a3a3a3;
  --p-inv-accent: #3cffd0; --p-inv-accent-ink: #0b0b0b; --p-inv-action: #3cffd0; --p-inv-action-ink: #0b0b0b;
  --ground-surface: #1e1e1e; --ground-ink: #ffffff; --ground-muted: #a3a3a3;
  --font-display: "Anton", Impact, "Arial Narrow", sans-serif; --font-text: "Space Grotesk", system-ui, sans-serif;
  --display-weight: 400; --display-tracking: 0; --display-tracking-xl: 0;
  --b-mint: #3cffd0; --b-orange: #ff6a2b; --b-violet: #5b2bff; --b-slate: #232323; --b-line: #2f2f2f;
  --b-mono: "Space Mono", ui-monospace, monospace; --b-serif: "Newsreader", Georgia, serif;
  --nav: 76px;
}
html, body { background: #121212; color: #fff; }
::selection { background: var(--b-mint); color: #0b0b0b; }

/* titres : capitales condensées, la suite du titre en menthe */
h1, h2 { text-transform: uppercase; letter-spacing: 0; line-height: 1.02; }
h1 { font-size: clamp(42px, 5.1vw, 86px); }
h2 { font-size: clamp(38px, 4.6vw, 76px); }
:is(h1, h2) .muted { color: var(--b-mint); }
h3 { font-family: var(--font-text); font-weight: 700; text-transform: none; }
.t-label, .crumbs, .vcard__kicker, .author__meta, .sib__fam, .vthumb__time, .rows__value {
  font-family: var(--b-mono) !important; text-transform: uppercase; letter-spacing: .12em; font-size: 12px !important; }
.t-label { color: var(--b-mint); display: inline-flex; align-items: center; gap: 10px; }
.t-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.crumbs, .crumbs a { color: #a3a3a3; }
.crumbs [aria-current] { color: var(--b-mint); }
.t-lead { color: #e6e6e6; }
a { text-decoration-color: color-mix(in oklab, currentColor 45%, transparent); }

/* boutons du kit -> pilules mono */
.btn { border-radius: 999px !important; font: 700 12px/1 var(--b-mono) !important; letter-spacing: .14em; text-transform: uppercase; min-height: 50px; padding-inline: 24px; }
.btn--primary { background: var(--b-mint) !important; color: #0b0b0b !important; border-color: var(--b-mint) !important; }
.btn--primary:hover { background: #fff !important; border-color: #fff !important; }
.btn--secondary { background: transparent !important; color: #fff !important; box-shadow: inset 0 0 0 1.5px #fff !important; border: 0 !important; }
.btn--secondary:hover { background: #fff !important; color: #0b0b0b !important; }

/* en-tête de page */
.hero { background: radial-gradient(120% 80% at 100% 0%, rgb(91 43 255 / .28), transparent 60%), #121212; }
.hero-facts { border-top: 1px solid rgb(255 255 255 / .2); }
.hero-facts :is(dt) { font: 700 11px/1.3 var(--b-mono); text-transform: uppercase; letter-spacing: .12em; color: #a3a3a3; }
.hero-facts :is(dd) { font: 400 clamp(24px, 2.1vw, 34px)/1.05 var(--font-display); color: #fff; white-space: nowrap; }

/* bandes et cartes */
.ground-surface { background: #1a1a1a !important; }
.card, .author, .sib, .entry { background: var(--b-slate) !important; border: 1px solid var(--b-line) !important; border-radius: 22px !important; color: #fff; }
.card--link { transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s !important; }
.card--link:hover { border-color: var(--b-mint) !important; transform: translateY(-3px); }
.author:nth-child(3n+1) { background: var(--b-mint) !important; border-color: var(--b-mint) !important; color: #0b0b0b; }
.author:nth-child(3n+2) { background: var(--b-violet) !important; border-color: var(--b-violet) !important; }
.author:nth-child(3n+3) { background: var(--b-orange) !important; border-color: var(--b-orange) !important; color: #0b0b0b; }
.author .author__meta, .author .author__name { color: inherit !important; }
.author__name { font: 400 clamp(30px, 2.6vw, 44px)/1 var(--font-display) !important; text-transform: uppercase; }
.sib__name { font: 400 26px/1 var(--font-display) !important; text-transform: uppercase; }
.sib__fam { color: var(--b-mint) !important; }
.vthumb, .dcard__img, .sib__img, .frame { border-radius: 18px !important; }
.vthumb__play { background: var(--b-mint) !important; color: #0b0b0b !important; }
.vthumb__label { background: rgb(11 11 11 / .86) !important; }
.vcard__title { font-weight: 700 !important; }
.vcard[data-todo] .vcard__title { color: var(--b-orange) !important; }
.dcard .link, .link { color: var(--b-mint) !important; }
.mag-hero .frame__img { background: #1e1e1e !important; }
.rows li { border-color: var(--b-line) !important; }
.rows .rows__value { color: var(--b-mint) !important; }
.rows .rows__name small { color: #a3a3a3 !important; }
.prose { font-size: 18px; line-height: 1.7; color: #e6e6e6; }
.prose h2 { font-size: clamp(32px, 3.4vw, 52px); margin-top: 1.4em; }
.prose a { color: var(--b-mint); }
.pull { font: 400 clamp(28px, 2.8vw, 44px)/1.15 var(--b-serif) !important; color: #fff; border-left: 4px solid var(--b-mint) !important; padding-left: 24px; text-transform: none; }
.tags span, .tags li { border-color: var(--b-line) !important; color: #e6e6e6; }
input, textarea, select { background: var(--b-slate) !important; color: #fff !important; border-color: var(--b-line) !important; }
[data-todo] { outline-color: var(--b-orange) !important; }

/* menu */
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--b-mint); color: #0b0b0b; padding: 8px 14px; }
.skip-link:focus { left: 8px; }
.bwrap { width: min(1320px, 100vw - 2 * clamp(16px, 4vw, 56px)); margin-inline: auto; }
.bmono { font: 700 12px/1.3 var(--b-mono); letter-spacing: .14em; text-transform: uppercase; margin: 0; }
.bkicker { color: var(--b-mint); }
.bbtn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid #fff;
  font: 700 12px/1 var(--b-mono); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; cursor: pointer; color: #fff; background: transparent;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), background .25s, color .25s; list-style: none; }
.bbtn::-webkit-details-marker { display: none; }
.bbtn:hover { transform: translateY(-2px); }
.bbtn--mint { background: var(--b-mint); border-color: var(--b-mint); color: #0b0b0b; }
.bbtn--mint:hover { background: #fff; border-color: #fff; }
.bbtn--ghost:hover { background: #fff; color: #0b0b0b; }
.bbtn svg { width: 14px; height: 14px; }
.bnav { position: fixed; inset: 0 0 auto; z-index: 60; height: var(--nav); display: flex; align-items: center; transition: background .3s, border-color .3s;
  border-bottom: 1px solid transparent; }
.bnav.is-solid { background: rgb(18 18 18 / .86); backdrop-filter: blur(12px); border-color: var(--b-line); }
.bnav__bar { display: flex; align-items: center; gap: 24px; }
.bnav__logo { font: 400 26px/1 var(--font-display); text-transform: uppercase; text-decoration: none; color: #fff; white-space: nowrap; }
.bnav__logo span { color: var(--b-mint); }
.bnav__links { display: flex; gap: 24px; margin-left: auto; }
.bnav__links a { color: #d8d8d8; text-decoration: none; padding: 10px 0; position: relative; }
.bnav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; background: var(--b-mint); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.bnav__links a:hover { color: #fff; }
.bnav__links a:hover::after { transform: scaleX(1); }
.bnav__more { position: relative; }
.bnav__panel { position: absolute; right: 0; top: calc(100% + 12px); width: min(560px, calc(100vw - 32px)); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px;
  background: #0b0b0b; border: 1px solid var(--b-line); border-radius: 22px; padding: 24px; box-shadow: 0 24px 60px rgb(0 0 0 / .5); }
.bnav__group { display: grid; gap: 2px; align-content: start; }
.bnav__group .bmono { color: var(--b-mint); margin-bottom: 6px; }
.bnav__group a { color: #e6e6e6; text-decoration: none; min-height: 36px; display: flex; align-items: center; }
.bnav__group a:hover, .bnav__group a[aria-current] { color: var(--b-mint); }
.bnav__panel > .bbtn { grid-column: 1 / -1; }
@media (max-width: 1023px) { .bnav__links { display: none; } .bnav__more { margin-left: auto; } }
@media (max-width: 639px) { .bnav__cta { display: none; } .bnav__logo { font-size: 22px; } .bnav__panel { grid-template-columns: 1fr 1fr; right: -4px; } }

/* pied de page */
.bfoot { background: #0b0b0b; color: #fff; padding: 72px 0 28px; overflow: hidden; }
.bfoot__cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; padding-bottom: 48px; border-bottom: 1px solid var(--b-line); }
.bfoot__big { font: 400 clamp(32px, 3.6vw, 56px)/1.05 var(--font-display); text-transform: uppercase; margin: 12px 0 0; max-width: 22ch; }
.bfoot__cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; padding-top: 40px; }
.bfoot__cols > div { display: grid; gap: 2px; align-content: start; }
.bfoot__cols .bmono { color: #a3a3a3; margin-bottom: 8px; }
.bfoot__cols a { color: #e6e6e6; text-decoration: none; min-height: 36px; display: flex; align-items: center; }
.bfoot__cols a:hover { color: var(--b-mint); }
.bfoot__word { font: 400 clamp(36px, 9.6vw, 150px)/1 var(--font-display); text-transform: uppercase; white-space: nowrap; margin: 48px 0 0;
  background: linear-gradient(90deg, var(--b-mint), #fff 45%, var(--b-orange)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bfoot__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; color: #a3a3a3; border-top: 1px solid var(--b-line); padding-top: 20px; margin-top: 24px; }
.bfoot__legal a { color: inherit; }
@media (max-width: 1023px) { .bfoot__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 639px) { .bfoot__cols { grid-template-columns: 1fr 1fr; } .bfoot__cols a { min-height: 44px; } }

/* article long : colonne de lecture centrée plutôt que collée à gauche */
@media (min-width: 1024px) { #article .prose { grid-column: 3 / span 8; } }

/* cartes « dans la même famille » : texte décollé du bord de la carte */
.sib { padding: 0 0 20px !important; overflow: hidden; gap: 6px !important; }
.sib .sib__img { border-radius: 0 !important; margin-bottom: 10px; }
.sib__fam, .sib__name { padding-inline: 18px; }
/* mobile : la légende de la vidéo d'en-tête ne garde que son titre */
@media (max-width: 639px) { .vthumb--hero .vthumb__label small { display: none; } }

/* sections : la hauteur suit le contenu (les titres B et les grilles de vidéos dépassaient
   la hauteur fixe « un ou deux écrans » du kit et chevauchaient la section suivante) */
main > :is(section, .section):not(.hero, .section--hero) { height: auto !important; max-height: none !important; overflow: visible !important; }
main > :is(section, .section):not(.hero, .section--hero) > :is(.wrap, .container) { height: auto !important; }
/* mobile : dans les listes (expériences, formation), la date passe sous l'intitulé au lieu de pousser la ligne hors de l'écran */
@media (max-width: 639px) {
  .rows > li { grid-template-columns: minmax(0, 1fr); }
  .rows .rows__value { grid-column: 1; grid-row: auto; text-align: left; max-width: none; white-space: normal; }
}

/* mention de production sous le titre d'une vidéo (ex. CProductions) */
.vcard__credit { margin-top: 6px; font: 400 12px/1.4 "Space Mono", monospace; letter-spacing: .04em; color: #9a9a9a; }

/* Radio / Podcast (12/11/2026) : cartes audio avec lecteur natif */
.agrid { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .agrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .agrid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .agrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.acard { display: flex; flex-direction: column; gap: 10px; padding: 28px; background: var(--b-slate); border: 1px solid var(--b-line); border-radius: 22px;
  background-image: radial-gradient(120% 80% at 100% 0%, rgb(255 59 48 / .14), transparent 60%); transition: border-color .3s, transform .3s; }
.acard:hover { border-color: var(--b-mint); transform: translateY(-2px); }
.acard .vcard__kicker { display: inline-flex; align-items: center; gap: 10px; }
.acard .vcard__kicker::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 10px #ff3b30; flex: none; }
.acard__time { margin-top: auto; padding-top: 14px; font: 400 13px/1.4 var(--b-mono); color: #9a9a9a; }
.acard audio { width: 100%; height: 44px; color-scheme: dark; }
.agrid .vcard { align-self: start; }
.vthumb--still { display: block; border-radius: 22px; overflow: hidden; }
.vthumb--still img { width: 100%; height: 100%; object-fit: cover; object-position: 28% 50%; display: block; }
.acard__text { color: #cfcfcf; font-size: 16px; line-height: 1.55; max-width: 60ch; }

/* sélecteur de langue Français / English, en fin de page */
.lang { display: inline-flex; align-items: center; gap: 4px; margin: 28px 0 0; padding: 5px 5px 5px 14px; border: 1px solid #3a3a3a; border-radius: 999px;
  font: 700 12px/1 "Space Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
.lang__icon { width: 18px; height: 18px; margin-right: 6px; fill: none; stroke: #3cffd0; stroke-width: 1.5; flex: none; }
.lang a { padding: 9px 14px; border-radius: 999px; color: #d6d6d6; text-decoration: none; transition: background-color .2s, color .2s; }
.lang a:hover { color: #fff; background: #2a2a2a; }
.lang a[aria-current] { background: #3cffd0; color: #0b0b0b; }
.lang a:focus-visible { outline: 2px solid #3cffd0; outline-offset: 2px; }