/* ==========================================================================
   Aireo — système de design « Console »
   Noir et blanc, grille visible, vocabulaire de fiche technique.
   Fond clair volontaire : tous les sites audio sont sombres, on ressort.
   Aucun framework, aucune dépendance : GitHub Pages sert les fichiers tels quels.
   ========================================================================== */

:root {
  --bg:      #ffffff;
  --ink:     #000000;
  --mid:     #6b6b6b;   /* texte secondaire */
  --faint:   #9a9a9a;   /* étiquettes sur fond noir */
  --soft:    #d9d9d9;   /* filets de lignes */
  --hair:    #ededed;   /* survol de rangée */
  --rule:    #000000;   /* filets de structure */

  --sans: Archivo, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --gutter: clamp(18px, 4vw, 56px);
  --max:    1320px;

  --s1: 8px;  --s2: 16px; --s3: 26px; --s4: 40px;
  --s5: 64px; --s6: 92px; --s7: 128px;
}

/* --- reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 16.5px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }

/* --- utilitaires ---------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -9999px; top: 0; z-index: 100;
        background: var(--ink); color: var(--bg); padding: 12px 20px; font-weight: 700; }
.skip:focus { left: 0; }
:where(a, button, input, textarea, summary):focus-visible {
  outline: 3px solid var(--ink); outline-offset: 2px;
}

/* --- typographie ---------------------------------------------------------- */
h1, h2, h3, h4 { margin: 0; font-weight: 900; letter-spacing: -.04em; line-height: 1.02; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 6.2vw, 5rem); }
h2 { font-size: clamp(1.7rem, 3.8vw, 2.9rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); letter-spacing: -.03em; }
p  { margin: 0 0 var(--s2); text-wrap: pretty; }
.lede { font-size: clamp(1rem, 1.55vw, 1.18rem); color: var(--mid); max-width: 54ch; }

/* étiquette technique : le fil conducteur graphique de tout le site */
.kicker {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--mid); margin: 0 0 var(--s3);
}

/* --- sections ------------------------------------------------------------- */
.section { padding-block: clamp(var(--s5), 7vw, var(--s6)); }
/* --alt devient un pavé inversé : c'est le contraste qui rythme la page */
.section--alt { background: var(--ink); color: var(--bg); }
.section--alt .kicker, .section--alt .lede { color: var(--faint); }
.section--alt a:not(.btn) { color: var(--bg); }
.section__head { max-width: 62ch; margin-bottom: var(--s5); }
.section__head p { color: var(--mid); margin-top: var(--s2); }
.section--alt .section__head p { color: var(--faint); }

/* --- en-tête -------------------------------------------------------------- */
.hdr { position: sticky; top: 0; z-index: 50; background: var(--bg);
       border-bottom: 2px solid var(--rule); }
.hdr__in { display: flex; align-items: center; gap: var(--s3); min-height: 62px; }
.brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; margin-right: auto; }
.brand__n { font-weight: 900; letter-spacing: -.06em; font-size: 1.28rem; }
.brand__t { font-family: var(--mono); font-size: .6rem; letter-spacing: .2em;
            text-transform: uppercase; color: var(--mid); }
.nav { display: flex; align-items: center; gap: var(--s3); }
.nav a { font-family: var(--mono); text-decoration: none; font-size: .72rem;
         letter-spacing: .12em; text-transform: uppercase; padding: 5px 0; position: relative; }
.nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; inset-inline: 0; bottom: -2px; height: 3px; background: var(--ink);
}
.nav__cta { background: var(--ink); color: var(--bg) !important;
            padding: 9px 16px !important; font-weight: 600; }
.nav__cta:hover { background: var(--mid); text-decoration: none !important; }
.burger { display: none; background: none; border: 2px solid var(--ink); padding: 6px 11px;
          cursor: pointer; font-size: 1rem; line-height: 1; }

@media (max-width: 900px) {
  .burger { display: block; }
  .nav { position: fixed; inset: 62px 0 auto; flex-direction: column; align-items: stretch;
         gap: 0; background: var(--bg); border-bottom: 2px solid var(--rule);
         padding: var(--s2) var(--gutter) var(--s4); }
  .nav[hidden] { display: none; }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--soft); font-size: .84rem; }
  .nav__cta { text-align: center; margin-top: var(--s3); border-bottom: 0 !important; }
}

/* --- héros : énoncé à gauche, fiche technique à droite -------------------- */
.hero { border-bottom: 2px solid var(--rule); }
.hero__in { display: grid; grid-template-columns: 1.55fr 1fr; }
@media (max-width: 960px) { .hero__in { grid-template-columns: 1fr; } }
.hero__l { padding: clamp(var(--s4), 5vw, var(--s6)) clamp(var(--s3), 3vw, var(--s5))
                    clamp(var(--s4), 5vw, var(--s5)) 0;
           border-right: 1px solid var(--rule); }
@media (max-width: 960px) {
  .hero__l { border-right: 0; border-bottom: 1px solid var(--rule); padding-right: 0; }
}
.hero h1 { max-width: 12ch; margin-top: var(--s2); }
.hero .lede { margin-top: var(--s3); }
.hero__r { padding: clamp(var(--s4), 5vw, var(--s6)) 0 clamp(var(--s4), 5vw, var(--s5))
                    clamp(var(--s3), 3vw, var(--s4)); }
@media (max-width: 960px) { .hero__r { padding-left: 0; } }
.hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--s4); }

/* --- boutons -------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; gap: 9px; padding: 14px 26px;
       text-decoration: none; font-weight: 700; font-size: .93rem;
       border: 2px solid var(--ink); transition: background .18s, color .18s, border-color .18s; }
.btn--1 { background: var(--ink); color: var(--bg); }
.btn--2 { background: none; color: var(--ink); }
.btn:hover { background: var(--mid); border-color: var(--mid); color: var(--bg); }
.section--alt .btn { border-color: var(--bg); }
.section--alt .btn--1 { background: var(--bg); color: var(--ink); }
.section--alt .btn--2 { color: var(--bg); }

/* --- fiche technique / spécifications ------------------------------------- */
.specs { width: 100%; border-collapse: collapse; font-size: .93rem; }
.specs th, .specs td { text-align: left; padding: 12px var(--s2) 12px 0;
                       border-bottom: 1px solid var(--soft); vertical-align: top; }
.specs th { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em;
            text-transform: uppercase; color: var(--mid); font-weight: 400; width: 38%; }
.specs td { font-family: var(--mono); font-size: .78rem; line-height: 1.5; }
.section--alt .specs th, .section--alt .specs td { border-color: #333; }
.section--alt .specs th { color: var(--faint); }

/* --- chiffres ------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
         margin-top: var(--s4); border-top: 2px solid var(--rule); }
.stat { padding: var(--s3) var(--s3) var(--s3) 0; border-right: 1px solid var(--soft); }
.stat:last-child { border-right: 0; }
.stat b { display: block; font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 900;
          letter-spacing: -.06em; line-height: .9; }
.stat span { display: block; margin-top: 10px; font-family: var(--mono); font-size: .66rem;
             letter-spacing: .12em; text-transform: uppercase; color: var(--mid); }
.section--alt .stats { border-color: var(--bg); }
.section--alt .stat { border-color: #333; }
.section--alt .stat span { color: var(--faint); }

/* --- bandeau des diffuseurs ----------------------------------------------- */
.diffuseurs { border-bottom: 1px solid var(--rule); padding-block: var(--s2); overflow: hidden; }
.diffuseurs__row { display: flex; gap: clamp(20px, 3vw, 44px); align-items: center;
                   font-family: var(--mono); font-size: .74rem; letter-spacing: .12em;
                   color: var(--mid); white-space: nowrap; }
.diffuseurs__row span { flex: none; }

/* --- générique : liste de crédits ---------------------------------------- */
.tbl { width: 100%; border-collapse: collapse; }
.tbl td { padding: 13px 12px 13px 0; border-bottom: 1px solid var(--soft); vertical-align: baseline; }
.tbl .t { font-weight: 800; letter-spacing: -.02em; font-size: 1.02rem; width: 46%; }
.tbl .t a { text-decoration: none; }
.tbl .t a:hover { text-decoration: underline; text-underline-offset: 3px; }
.tbl .p { font-family: var(--mono); font-size: .76rem; width: 30%; color: var(--mid); }
.tbl .k { font-family: var(--mono); font-size: .64rem; letter-spacing: .14em;
          text-transform: uppercase; color: var(--mid); text-align: right; }
.tbl tr:hover td { background: var(--hair); }
/* sous 600 px, la colonne « type » écrase les deux autres : on la retire */
@media (max-width: 600px) {
  .tbl .k { display: none; }
  .tbl .t { width: 58%; }
  .tbl .p { width: 42%; }
}
.section--alt .tbl td { border-color: #333; }
.section--alt .tbl .p, .section--alt .tbl .k { color: var(--faint); }
.section--alt .tbl tr:hover td { background: #141414; }

/* --- grille de cartes ----------------------------------------------------- */
.grid { display: grid; gap: 0; border-top: 1px solid var(--soft);
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--fix2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .grid--fix2 { grid-template-columns: 1fr; } }

.card { margin: 0; border-right: 1px solid var(--soft); border-bottom: 1px solid var(--soft);
        transition: background .18s; }
.card:hover { background: var(--hair); }
.card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--hair);
            filter: grayscale(1) contrast(1.06); transition: filter .28s; }
.card:hover img { filter: grayscale(0); }
.card figcaption { padding: var(--s2) var(--s2) var(--s3) 0; padding-left: var(--s2); }
.card__t { display: block; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }
.card__m { display: block; margin-top: 6px; font-family: var(--mono); font-size: .68rem;
           letter-spacing: .08em; color: var(--mid); text-decoration: none; }
a.card__m:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.tag { display: inline-block; margin-bottom: 9px; padding: 3px 8px;
       font-family: var(--mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase;
       border: 1px solid var(--soft); color: var(--mid); }
.tag--digital { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* --- prestations ---------------------------------------------------------- */
.presta { display: block; text-decoration: none; padding: clamp(22px, 3vw, 34px) var(--s3) var(--s4) 0;
          border-top: 1px solid var(--soft); transition: background .18s; }
.presta:hover { background: var(--hair); }
.presta h3 { margin-bottom: var(--s1); }
.presta p { color: var(--mid); font-size: .95rem; margin: 0; }
.presta__go { display: inline-block; margin-top: var(--s2); font-family: var(--mono);
              font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; }
.presta__mode { display: inline-block; margin-top: var(--s2); font-family: var(--mono);
                font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
                border: 1px solid var(--ink); padding: 5px 10px; }

/* --- écoute avant / après ------------------------------------------------- */
.ab { border: 2px solid var(--ink); padding: var(--s3); }
.ab h3 { font-size: 1.05rem; }
.ab__ctx { color: var(--mid); font-size: .9rem; margin: var(--s1) 0 var(--s3); }
.ab__row { display: flex; flex-wrap: wrap; gap: 10px; }
.ab__btn { display: inline-flex; align-items: center; gap: 9px; padding: 11px 20px;
           border: 2px solid var(--ink); background: none; cursor: pointer;
           font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.ab__btn[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

/* --- citations ------------------------------------------------------------ */
.quote { margin: 0; padding: var(--s3) var(--s3) var(--s3) 0; border-top: 1px solid var(--soft); }
.quote p { font-size: 1.04rem; }
.quote figcaption { font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; color: var(--mid); }

/* --- crédits clients ------------------------------------------------------ */
.credits { display: grid; gap: 0 var(--s3); margin: 0; padding: 0;
           grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.credits li { list-style: none; border-top: 1px solid var(--soft);
              padding: var(--s3) 0 calc(var(--s3) - 8px); font-weight: 700; letter-spacing: -.02em; }
.credits li span { display: block; margin-top: 6px; font-family: var(--mono); font-weight: 400;
                   font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mid); }
.section--alt .credits li { border-color: #333; }
.section--alt .credits li span { color: var(--faint); }

/* --- prose ----------------------------------------------------------------
   .prose posé sur le même élément que .wrap recentrerait tout le bloc
   (le .wrap est en margin-inline:auto) : on garde la largeur du wrap et on
   limite la longueur de ligne sur les enfants.
   -------------------------------------------------------------------------- */
.prose { max-width: 68ch; }
.wrap.prose { max-width: var(--max); }
.wrap.prose > * { max-width: 68ch; }
.wrap.prose > .specs, .wrap.prose > table { max-width: min(100%, 880px); }
.prose h2 { margin-top: var(--s5); margin-bottom: var(--s2); }
.prose h3 { margin-top: var(--s4); margin-bottom: var(--s1); }
.prose > :first-child { margin-top: 0; }
.prose ul { padding-left: 1.15em; margin: 0 0 var(--s2); color: var(--mid); }
.prose li { margin-bottom: 7px; }
.prose strong { color: var(--ink); font-weight: 700; }
.prose a:not(.btn) { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 2px; }

/* --- contact -------------------------------------------------------------- */
.contact__grid { display: grid; gap: 0; border-top: 2px solid var(--rule);
                 grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.contact__grid > div { padding: var(--s3) var(--s3) var(--s3) 0; border-right: 1px solid var(--soft); }
.contact__grid > div:last-child { border-right: 0; }
.contact__item { font-family: var(--mono); font-size: .66rem; letter-spacing: .14em;
                 text-transform: uppercase; color: var(--mid); margin-bottom: var(--s1); }
.contact__val { font-size: 1.1rem; font-weight: 800; letter-spacing: -.025em;
                text-decoration: none; word-break: break-word; }
a.contact__val { border-bottom: 2px solid currentColor; padding-bottom: 2px; }
.section--alt .contact__grid { border-color: var(--bg); }
.section--alt .contact__grid > div { border-color: #333; }
.section--alt .contact__item { color: var(--faint); }

/* --- pied de page --------------------------------------------------------- */
.ftr { border-top: 2px solid var(--rule); padding-block: var(--s5) var(--s3); }
.ftr__grid { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.ftr h4 { font-family: var(--mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
          color: var(--mid); font-weight: 400; margin-bottom: var(--s2); }
.ftr ul { list-style: none; margin: 0; padding: 0; }
.ftr li { margin-bottom: 8px; }
.ftr a { text-decoration: none; font-size: .9rem; }
.ftr a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ftr__bot { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); justify-content: space-between;
            margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--soft);
            font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
            text-transform: uppercase; color: var(--mid); }

/* --- fil d'ariane --------------------------------------------------------- */
.crumb { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; color: var(--mid);
         padding-top: var(--s3); text-transform: uppercase; }
.crumb a { text-decoration: none; }
.crumb a:hover { text-decoration: underline; text-underline-offset: 3px; }
.crumb span { margin-inline: 8px; color: var(--soft); }

/* --- filtres du catalogue ------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--s4); }
.chip { padding: 8px 14px; border: 1px solid var(--soft); background: none; cursor: pointer;
        font-family: var(--mono); font-size: .7rem; letter-spacing: .08em;
        text-transform: uppercase; color: var(--mid); transition: all .16s; }
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-selected="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chip b { font-weight: 400; opacity: .55; margin-left: 5px; }

/* --- compteur animé -------------------------------------------------------
   Les valeurs finales sont dans le HTML ; le script part de zéro et y revient.
   Sans JavaScript, ou en mouvement réduit, le chiffre juste s'affiche d'emblée.
   -------------------------------------------------------------------------- */
/* cinq colonnes : la taille doit baisser, sinon les chiffres se chevauchent */
.compteur { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
            border-top: 2px solid currentColor; }
.compteur > div { padding: clamp(22px, 3vw, 34px) var(--s3) clamp(22px, 3vw, 34px) 0;
                  border-right: 1px solid #333; }
.compteur > div:last-child { border-right: 0; }
.compteur b { display: block; font-size: clamp(2rem, 4.1vw, 3.2rem); font-weight: 900;
              letter-spacing: -.055em; line-height: .9; font-variant-numeric: tabular-nums; }
.compteur .u { display: block; margin-top: 12px; font-family: var(--mono); font-size: .68rem;
               letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.compteur .d { display: block; margin-top: 6px; font-size: .88rem; color: var(--faint); }
/* le curseur qui clignote pendant le décompte, façon console */
.compteur b::after { content: "_"; opacity: 0; margin-left: 2px; }
.compteur b[data-anime="1"]::after { opacity: 1; animation: clign .45s steps(2) infinite; }
@keyframes clign { 50% { opacity: 0; } }

/* volume dans les tables de crédits */
.tbl .v { font-family: var(--mono); font-size: .76rem; text-align: right; white-space: nowrap; }
.tbl .v b { font-weight: 500; }
@media (max-width: 600px) { .tbl .v { font-size: .68rem; } }

/* carte sans visuel : pavé typographique plutôt qu'un trou */
.card--texte { display: flex; flex-direction: column; justify-content: flex-end;
               aspect-ratio: auto; min-height: 210px; padding-left: var(--s2); }
.card--texte .vide { flex: 1; display: flex; align-items: center; padding: var(--s3) var(--s2) 0 0;
                     font-size: clamp(1.3rem, 2.4vw, 1.8rem); font-weight: 900;
                     letter-spacing: -.045em; line-height: 1; color: var(--soft); }

/* précision sous un titre de carte (ex. qui mène les entretiens) */
.card__note { display: block; margin-top: 5px; font-size: .82rem; color: var(--mid); }

/* volume d'un format sur sa carte (« 300 épisodes ») */
.card__vol { display: inline-block; margin-top: 10px; padding: 4px 9px;
             border: 1px solid var(--ink); font-family: var(--mono);
             font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; }
.card__vol b { font-weight: 500; }

/* --- lecteur vidéo en différé ---------------------------------------------
   Rien n'est chargé depuis YouTube tant que le visiteur ne clique pas : pas de
   requête tierce, pas de cookie, et la page reste légère. Au clic seulement,
   l'iframe youtube-nocookie remplace la vignette.
   -------------------------------------------------------------------------- */
.card__video { position: relative; display: block; width: 100%; padding: 0; border: 0;
               background: none; cursor: pointer; font: inherit; color: inherit; }
.card__video img { margin: 0; }
.card__video::after {
  content: "▶ Lire"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: var(--bg); color: var(--ink); border: 2px solid var(--ink);
  padding: 10px 18px; font-family: var(--mono); font-size: .68rem;
  letter-spacing: .14em; text-transform: uppercase; transition: background .18s, color .18s;
}
.card__video:hover::after { background: var(--ink); color: var(--bg); }
.card__video:hover img { filter: grayscale(0); }
.card__video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
.card__video[data-joue="1"]::after { display: none; }

/* --- bloc vidéo mis en avant ---------------------------------------------
   Plus grand qu'une carte : c'est la seule preuve que le visiteur peut
   entendre. Comme les cartes, rien n'est chargé depuis YouTube avant le clic.
   -------------------------------------------------------------------------- */
.films { display: grid; gap: var(--s4) var(--s3);
         grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.film { margin: 0; }
.film__play { position: relative; display: block; width: 100%; padding: 0; border: 0;
              background: none; cursor: pointer; font: inherit; color: inherit; }
.film__play img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
                  filter: grayscale(1) contrast(1.08); transition: filter .3s; }
.film__play:hover img { filter: grayscale(0); }
.film__play::after {
  content: "▶ Lire"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: var(--bg); color: var(--ink); border: 2px solid var(--bg);
  padding: 13px 24px; font-family: var(--mono); font-size: .74rem;
  letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  transition: background .18s, color .18s;
}
.film__play:hover::after { background: var(--ink); color: var(--bg); border-color: var(--bg); }
.film__play[data-joue="1"]::after { display: none; }
.film__play iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
.film figcaption { padding-top: var(--s2); }
.film__vues { display: block; font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 900;
              letter-spacing: -.05em; line-height: 1; }
.film__vues span { font-family: var(--mono); font-size: .64rem; font-weight: 400;
                   letter-spacing: .16em; text-transform: uppercase; margin-left: 10px;
                   vertical-align: middle; opacity: .65; }
.film__t { display: block; margin-top: 10px; font-weight: 700; letter-spacing: -.02em;
           line-height: 1.3; }
.film__m { display: block; margin-top: 5px; font-family: var(--mono); font-size: .68rem;
           letter-spacing: .1em; opacity: .65; }

/* ce que le studio a apporté sur un format donné */
.film__apport { margin: var(--s2) 0 0; font-size: .92rem; opacity: .78; max-width: 46ch; }

/* apport du studio, sous une carte de réalisation */
.card__apport { display: block; margin-top: var(--s2); padding-top: var(--s2);
                border-top: 1px solid var(--soft); font-size: .86rem; color: var(--mid); }

/* --- respiration ----------------------------------------------------------
   Le seul moment centré et très aéré du site. Tout le reste est aligné à
   gauche et dense : c'est ce contraste qui donne du poids à ce bloc, et non
   l'espace pris isolément. Emprunt assumé aux sites de créateurs, dosé.
   -------------------------------------------------------------------------- */
.respire { padding-block: clamp(var(--s6), 14vw, 190px); text-align: center; }
.respire__in { max-width: 860px; margin-inline: auto; }
.respire h2 { font-size: clamp(1.9rem, 5vw, 3.6rem); line-height: 1.12;
              letter-spacing: -.045em; max-width: 18ch; margin-inline: auto; }
.respire h2 em { font-style: normal; color: var(--mid); }
.respire p { margin: var(--s4) auto 0; max-width: 56ch; color: var(--mid);
             font-size: clamp(1rem, 1.5vw, 1.12rem); }
.respire figure { margin: clamp(var(--s5), 8vw, var(--s6)) auto 0; max-width: 620px; }
/* le bas de l'image est vide : on cadre sur le bloc de crédits */
.respire img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center top;
               filter: grayscale(1) contrast(1.06); transition: filter .4s;
               border: 1px solid var(--soft); }
.respire figure:hover img { filter: grayscale(0); }
.respire figcaption { margin-top: var(--s2); font-family: var(--mono); font-size: .66rem;
                      letter-spacing: .14em; text-transform: uppercase; color: var(--mid); }

/* héros sans colonne technique : une seule colonne, pas de filet vertical */
.hero__in--seul { grid-template-columns: 1fr; }
.hero__in--seul .hero__l { border-right: 0; padding-right: 0; }

/* carte sans image mais avec vidéo : la plaque typographique porte le bouton */
.card__video--texte { min-height: 210px; display: flex; text-align: left; }
.card__video--texte .vide { flex: 1; }
/* centré, le badge masquerait le titre : on le pose en bas à droite */
.card__video--texte::after { left: auto; top: auto; right: var(--s2); bottom: var(--s2);
                             transform: none; background: var(--ink); color: var(--bg);
                             border-color: var(--ink); padding: 8px 14px; }
.card__video--texte:hover::after { background: var(--bg); color: var(--ink); }

/* audience télé d'un programme — le lien mène à la source */
.card__aud { display: inline-block; margin-top: 8px; padding: 4px 9px;
             border: 1px solid var(--soft); font-family: var(--mono); font-size: .6rem;
             letter-spacing: .08em; text-transform: uppercase; color: var(--mid);
             text-decoration: none; transition: border-color .18s, color .18s; }
.card__aud:hover { border-color: var(--ink); color: var(--ink); }

/* lien secondaire d'une carte (bande-annonce cinéma, fiche plateforme) */
.card__lien2 { display: block; margin-top: 5px; font-family: var(--mono); font-size: .64rem;
               letter-spacing: .08em; color: var(--mid); text-decoration: none; }
.card__lien2:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* un chiffre du compteur ne doit pas se couper entre la valeur et son unité */
.compteur b { white-space: nowrap; }

/* --- mur de marques -------------------------------------------------------
   Remplace la liste à plat des formats digitaux. Regrouper par marque met en
   avant les noms qui vendent — Micode, Legend, Charles Villa — là où un tableau
   alphabétique les noyait. Les tuiles sont toutes au même format, composées
   par build/marques.py.
   -------------------------------------------------------------------------- */
.marques { display: grid; gap: 1px; background: var(--soft);
           border: 1px solid var(--soft);
           grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.marque { background: var(--bg); padding: 0 0 var(--s3); display: flex; flex-direction: column; }
.section--alt .marque { background: var(--ink); }
.marque__tuile { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;
                 filter: grayscale(1); background: #0d0d0d; }
.marque__vide { width: 100%; aspect-ratio: 1 / 1; display: grid; place-items: center;
                background: #0d0d0d; color: var(--bg); font-weight: 900;
                font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: -.045em; }
.marque__nom { display: block; margin: var(--s3) var(--s3) var(--s2); font-weight: 800;
               letter-spacing: -.025em; font-size: 1.1rem; }
.marque__liste { list-style: none; margin: 0; padding: 0 var(--s3); }
.marque__liste li { padding: 7px 0; border-top: 1px solid var(--soft); font-size: .88rem;
                    display: flex; gap: 10px; justify-content: space-between; }
.section--alt .marque__liste li { border-color: #2a2a2a; }
.marque__liste a { text-decoration: none; }
.marque__liste a:hover { text-decoration: underline; text-underline-offset: 3px; }
.marque__liste b { font-family: var(--mono); font-weight: 400; font-size: .72rem;
                   color: var(--mid); white-space: nowrap; align-self: center; }
.section--alt .marque__liste b { color: var(--faint); }

/* « Digital » traverse les catégories : un filet le détache de la liste
   des genres, pour qu'on ne cherche pas à additionner les compteurs. */
.chip--sep { margin-right: var(--s3); position: relative; }
.chip--sep::after { content: ""; position: absolute; right: calc(-1 * var(--s3) / 2);
                    top: 4px; bottom: 4px; width: 1px; background: var(--soft); }

/* Photo de régie : le cadre 2px de la charte, la légende en mono sous le trait.
   L'image est déjà en noir et blanc, aucun filtre n'est nécessaire. */
.photo{margin:var(--s4) 0 0;border:2px solid var(--rule)}
.photo img{display:block;width:100%;height:auto}
.photo figcaption{border-top:2px solid var(--rule);padding:.7rem 1rem;
  font:400 .78rem/1.3 var(--mono);letter-spacing:.04em;text-transform:uppercase;
  color:var(--mid)}