/* ==========================================================================
   BiznessFeed - modèle Kiosque 1
   Échelle typographique : ratio 1.25 sur une base de 17 px.
   Rythme vertical : unité de 8 px, tous les espacements en multiples.
   Encre 90 % / jaune 9 % (en surface, jamais en texte) / nuit 1 %.
   ========================================================================== */

:root {
  --bz-fond:    #FAF8F4;
  --bz-blanc:   #FFFFFF;
  --bz-encre:   #1B1A17;
  --bz-encre-2: #57534A;
  --bz-filet:   #E4DED2;
  --bz-jaune:   #F5B301;
  --bz-jaune-f: #C9910A;
  --bz-nuit:    #17212B;

  --bz-t-xs: 0.765rem;   /* 13 px */
  --bz-t-s:  0.882rem;   /* 15 px */
  --bz-t-m:  1rem;       /* 17 px */
  --bz-t-l:  1.25rem;
  --bz-t-xl: 1.563rem;
  --bz-t-2x: 1.953rem;
  --bz-t-3x: 2.441rem;
  --bz-t-4x: 3.052rem;

  --bz-u: 8px;
  --bz-large: 1180px;
}

html { font-size: 17px; }

body {
  margin: 0;
  background: var(--bz-fond);
  color: var(--bz-encre);
  font-family: Karla, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--bz-t-m);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: Bitter, Georgia, serif;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;   /* le tracking se resserre quand la taille monte */
  text-wrap: balance;
  margin: 0;
}

p { margin: 0 0 calc(var(--bz-u) * 2); text-wrap: pretty; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--bz-jaune); color: var(--bz-encre); }

.bz-skip {
  position: absolute; left: -9999px;
  background: var(--bz-encre); color: var(--bz-fond);
  padding: var(--bz-u) calc(var(--bz-u) * 2);
}
.bz-skip:focus { left: var(--bz-u); top: var(--bz-u); z-index: 99; }

.bz-in { width: min(100% - calc(var(--bz-u) * 5), var(--bz-large)); margin-inline: auto; }

img { max-width: 100%; height: auto; display: block; }

/* --------------------------------------------------------------- En-tête */

.bz-tete {
  background: var(--bz-blanc);
  border-bottom: 1px solid var(--bz-filet);
  position: sticky; top: 0; z-index: 40;
}

.bz-tete-in {
  width: min(100% - calc(var(--bz-u) * 5), var(--bz-large));
  margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: calc(var(--bz-u) * 3);
  min-height: calc(var(--bz-u) * 9);
}

.bz-logo { max-height: calc(var(--bz-u) * 6); width: auto; }

.bz-wordmark {
  font-family: Bitter, Georgia, serif;
  font-weight: 800; font-size: var(--bz-t-l);
  letter-spacing: 0.06em; text-transform: uppercase;
}

.bz-nav-liste {
  display: flex; gap: calc(var(--bz-u) * 3);
  list-style: none; margin: 0; padding: 0;
}

.bz-nav-liste a {
  position: relative;
  font-size: var(--bz-t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bz-encre-2);
  padding-block: calc(var(--bz-u) * 1.5);
  transition: color 150ms ease-out;
}
.bz-nav-liste a:hover { color: var(--bz-encre); }

.bz-nav-liste a::after {
  content: ""; position: absolute; bottom: calc(var(--bz-u) * 0.75);
  left: 50%; transform: translateX(-50%);
  width: 0; height: 2px; background: var(--bz-jaune);
  transition: width 320ms cubic-bezier(.4, 0, .2, 1);
}
.bz-nav-liste a:hover::after { width: 100%; }

.bz-burger, .bz-burger-case { display: none; }

/* ------------------------------------------------------------- Le kiosque */

.bz-eyebrow {
  font-size: var(--bz-t-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bz-encre-2);
  margin: 0 0 calc(var(--bz-u) * 2);
  padding-bottom: var(--bz-u);
  border-bottom: 1px solid var(--bz-filet);
}

.bz-kiosque { padding-block: calc(var(--bz-u) * 6) calc(var(--bz-u) * 7); }

.bz-kiosque-grille {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
  gap: calc(var(--bz-u) * 6);
}

/* Cartes */

.bz-carte { margin: 0; }
.bz-carte-img { display: block; overflow: hidden; background: var(--bz-filet); }
.bz-carte-img img { transition: transform 400ms cubic-bezier(.4, 0, .2, 1); aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.bz-carte:hover .bz-carte-img img { transform: scale(1.03); }

.bz-carte-txt { padding-top: calc(var(--bz-u) * 2); }

.bz-carte h3 {
  font-size: var(--bz-t-l);
  margin: var(--bz-u) 0 var(--bz-u);
}

.bz-carte--une h2 {
  font-size: var(--bz-t-3x);
  letter-spacing: -0.025em;
  margin: calc(var(--bz-u) * 1.5) 0 calc(var(--bz-u) * 1.5);
}
.bz-carte--une .bz-carte-img img { aspect-ratio: 16 / 9; }

.bz-carte h2 a, .bz-carte h3 a {
  background-image: linear-gradient(var(--bz-jaune), var(--bz-jaune));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 0 0.22em;
  transition: background-size 260ms cubic-bezier(.4, 0, .2, 1);
}
.bz-carte h2 a:hover, .bz-carte h3 a:hover { background-size: 100% 0.22em; }

.bz-chapo { color: var(--bz-encre-2); margin-bottom: calc(var(--bz-u) * 1.5); }

.bz-pastille {
  display: inline-block;
  background: var(--bz-jaune);
  color: var(--bz-encre);
  font-size: var(--bz-t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px calc(var(--bz-u) * 1.25);
  transition: background-color 150ms ease-out;
}
.bz-pastille:hover { background: var(--bz-jaune-f); }

.bz-pastille--nue {
  background: none; padding: 0;
  color: var(--bz-encre-2); font-weight: 600;
}
.bz-pastille--nue:hover { background: none; color: var(--bz-encre); }

.bz-meta {
  display: flex; flex-wrap: wrap; gap: calc(var(--bz-u) * 1.5);
  font-size: var(--bz-t-xs);
  color: var(--bz-encre-2);
  letter-spacing: 0.03em;
}
.bz-meta-lecture::before { content: "· "; }

/* Colonne des dernières publications */

.bz-ligne {
  padding-block: calc(var(--bz-u) * 2.5);
  border-bottom: 1px solid var(--bz-filet);
}
.bz-ligne:first-of-type { padding-top: 0; }
.bz-ligne:last-of-type { border-bottom: 0; }

.bz-ligne h3 {
  font-size: var(--bz-t-m);
  line-height: 1.35;
  margin: calc(var(--bz-u) * 0.5) 0 var(--bz-u);
}
.bz-ligne h3 a { transition: color 150ms ease-out; }
.bz-ligne h3 a:hover { color: var(--bz-jaune-f); }

/* ------------------------------------------------------------- Les chiffres */

.bz-chiffres { background: var(--bz-nuit); color: var(--bz-fond); }

.bz-chiffres-in {
  display: flex; flex-wrap: wrap;
  gap: calc(var(--bz-u) * 8);
  padding-block: calc(var(--bz-u) * 4);
}
.bz-chiffres-in div { display: flex; align-items: baseline; gap: var(--bz-u); }
.bz-chiffres strong {
  font-family: Bitter, Georgia, serif;
  font-size: var(--bz-t-2x);
  color: var(--bz-jaune);
}
.bz-chiffres span { font-size: var(--bz-t-s); color: #B9B4AA; }

/* ----------------------------------------------------------------- Rails */

.bz-rail { padding-block: calc(var(--bz-u) * 7); }
.bz-rail--grille { background: var(--bz-blanc); }

.bz-rail-tete {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: calc(var(--bz-u) * 2);
  padding-bottom: calc(var(--bz-u) * 1.5);
  margin-bottom: calc(var(--bz-u) * 4);
  border-bottom: 2px solid var(--bz-encre);
}
.bz-rail-tete h2 { font-size: var(--bz-t-xl); }

.bz-rail-tout {
  font-size: var(--bz-t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bz-encre-2);
  white-space: nowrap;
  transition: color 150ms ease-out;
}
.bz-rail-tout:hover { color: var(--bz-jaune-f); }

.bz-rail-large {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: calc(var(--bz-u) * 6);
}
.bz-rail-vedette .bz-carte h3 { font-size: var(--bz-t-xl); }
.bz-rail-vedette .bz-carte-img img { aspect-ratio: 16 / 9; }

.bz-rail-grille {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--bz-u) * 4);
}

/* ------------------------------------------------------------ La rédaction */

.bz-redac { background: var(--bz-blanc); border-top: 1px solid var(--bz-filet); }
.bz-redac-in { padding-block: calc(var(--bz-u) * 8); max-width: 62ch; }
.bz-redac h2 { font-size: var(--bz-t-2x); margin-bottom: calc(var(--bz-u) * 2); }
.bz-redac p { color: var(--bz-encre-2); }

/* ---------------------------------------------------------------- Archives */

.bz-fil {
  font-size: var(--bz-t-xs);
  color: var(--bz-encre-2);
  display: flex; flex-wrap: wrap; gap: var(--bz-u);
  margin-bottom: calc(var(--bz-u) * 2);
}
.bz-fil a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--bz-filet); }
.bz-fil a:hover { text-decoration-color: var(--bz-jaune); }
.bz-fil-ici { color: var(--bz-encre); }

.bz-arc-tete {
  background: var(--bz-blanc);
  border-bottom: 1px solid var(--bz-filet);
  padding-block: calc(var(--bz-u) * 6);
}
.bz-arc-tete h1 { font-size: var(--bz-t-3x); }
.bz-arc-desc { color: var(--bz-encre-2); margin-top: calc(var(--bz-u) * 2); max-width: 62ch; }
.bz-arc-compte {
  font-size: var(--bz-t-xs); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bz-encre-2); margin: calc(var(--bz-u) * 2) 0 0;
}

.bz-arc { padding-block: calc(var(--bz-u) * 7); }

/* Une page de rubrique est un sommaire : cartes horizontales, on en voit beaucoup à l'écran. */
.bz-arc-grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--bz-u) * 5) calc(var(--bz-u) * 6);
}
.bz-arc-grille .bz-carte {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: calc(var(--bz-u) * 2.5);
  align-items: start;
}
.bz-arc-grille .bz-carte-img img { aspect-ratio: 4 / 3; }
.bz-arc-grille .bz-carte-txt { padding-top: 0; }
/* Sur une page de rubrique, répéter la rubrique à chaque carte n'apporte rien. */
body.category .bz-arc-grille .bz-pastille { display: none; }
.bz-arc-grille .bz-carte h3 { font-size: var(--bz-t-m); line-height: 1.35; margin-top: calc(var(--bz-u) * 0.75); }

.bz-arc-grille .bz-carte--une {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: calc(var(--bz-u) * 5);
  padding-bottom: calc(var(--bz-u) * 5);
  border-bottom: 2px solid var(--bz-encre);
}
.bz-arc-grille .bz-carte--une .bz-carte-img img { aspect-ratio: 16 / 10; }
.bz-arc-grille .bz-carte--une h2 { font-size: var(--bz-t-2x); margin-top: calc(var(--bz-u) * 1.5); }

.bz-pagination {
  display: flex; gap: var(--bz-u); flex-wrap: wrap;
  margin-top: calc(var(--bz-u) * 7);
  font-size: var(--bz-t-s);
}
.bz-pagination .page-numbers {
  padding: calc(var(--bz-u) * 0.75) calc(var(--bz-u) * 1.75);
  border: 1px solid var(--bz-filet);
  background: var(--bz-blanc);
  transition: border-color 150ms ease-out;
}
.bz-pagination .page-numbers:hover { border-color: var(--bz-encre); }
.bz-pagination .current { background: var(--bz-encre); color: var(--bz-fond); border-color: var(--bz-encre); }

.bz-vide { color: var(--bz-encre-2); }

/* ----------------------------------------------------------------- Article */

.bz-art-tete { background: var(--bz-blanc); border-bottom: 1px solid var(--bz-filet); padding-block: calc(var(--bz-u) * 6); }
.bz-art-col { max-width: 74ch; }
.bz-art-tete h1 {
  font-size: var(--bz-t-4x);
  letter-spacing: -0.03em;
  margin: calc(var(--bz-u) * 2) 0 calc(var(--bz-u) * 2.5);
}
.bz-art-tete .bz-meta { font-size: var(--bz-t-s); }

.bz-art-img { margin: 0; background: var(--bz-blanc); padding-inline: calc(var(--bz-u) * 2.5); }
/* Les vignettes du parc plafonnent souvent a 1024 px : les etirer les rend floues. */
.bz-art-img img { max-width: min(100%, var(--bz-large)); width: auto; margin-inline: auto; }

.bz-art-corps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: calc(var(--bz-u) * 8);
  padding-block: calc(var(--bz-u) * 7);
  align-items: start;
}

.bz-art-texte { max-width: 58ch; font-size: 1.06rem; }
.bz-art-texte h2 { font-size: var(--bz-t-2x); margin: calc(var(--bz-u) * 5) 0 calc(var(--bz-u) * 2); }
.bz-art-texte h3 { font-size: var(--bz-t-xl); margin: calc(var(--bz-u) * 4) 0 calc(var(--bz-u) * 1.5); }

.bz-art-texte a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--bz-jaune);
  transition: background-color 150ms ease-out;
}
.bz-art-texte a:hover { background: #FBE6AE; }

.bz-art-texte ul, .bz-art-texte ol { padding-left: calc(var(--bz-u) * 3); }
.bz-art-texte li { margin-bottom: var(--bz-u); }
.bz-art-texte li::marker { color: var(--bz-jaune-f); }

.bz-art-texte blockquote {
  margin: calc(var(--bz-u) * 4) 0;
  padding-left: calc(var(--bz-u) * 3);
  border-left: 1px solid var(--bz-filet);
  font-family: Bitter, Georgia, serif;
  font-size: var(--bz-t-l);
  color: var(--bz-encre-2);
}

.bz-art-texte table {
  width: 100%; border-collapse: collapse;
  margin: calc(var(--bz-u) * 4) 0;
  font-size: var(--bz-t-s);
}
.bz-art-texte th {
  background: var(--bz-jaune);
  text-align: left;
  font-weight: 700;
}
.bz-art-texte th, .bz-art-texte td {
  padding: calc(var(--bz-u) * 1.25) calc(var(--bz-u) * 1.75);
  border: 1px solid var(--bz-filet);
}
.bz-art-texte tbody tr:nth-child(even) { background: var(--bz-blanc); }

.bz-art-texte figcaption { font-size: var(--bz-t-xs); color: var(--bz-encre-2); padding-top: var(--bz-u); }

.bz-art-cote { position: sticky; top: calc(var(--bz-u) * 12); }
.bz-cote-bloc { border-top: 2px solid var(--bz-encre); padding-top: calc(var(--bz-u) * 2); }
.bz-cote-bloc h2 { font-size: var(--bz-t-m); margin-bottom: calc(var(--bz-u) * 2); }
.bz-cote-bloc ul { list-style: none; margin: 0; padding: 0; }
.bz-cote-bloc li { padding-block: calc(var(--bz-u) * 1.5); border-bottom: 1px solid var(--bz-filet); font-size: var(--bz-t-s); line-height: 1.4; }
.bz-cote-bloc li:last-child { border-bottom: 0; }
.bz-cote-bloc a { transition: color 150ms ease-out; }
.bz-cote-bloc a:hover { color: var(--bz-jaune-f); }

.bz-art-nav {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--bz-u) * 4);
  padding-bottom: calc(var(--bz-u) * 8);
}
.bz-art-nav a {
  border-top: 2px solid var(--bz-encre);
  padding-top: calc(var(--bz-u) * 2);
  font-family: Bitter, Georgia, serif;
  font-size: var(--bz-t-l);
  line-height: 1.25;
}
.bz-art-nav span {
  display: block;
  font-family: Karla, sans-serif;
  font-size: var(--bz-t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bz-encre-2);
  margin-bottom: var(--bz-u);
}
.bz-art-nav-suiv { text-align: right; }
.bz-art-nav a:hover { color: var(--bz-jaune-f); }

.bz-page-corps { padding-block: calc(var(--bz-u) * 7) calc(var(--bz-u) * 9); }

/* -------------------------------------------------------------------- Pied */

.bz-pied { background: var(--bz-nuit); color: #C8C3B9; margin-top: calc(var(--bz-u) * 2); }

.bz-pied-in {
  width: min(100% - calc(var(--bz-u) * 5), var(--bz-large));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: calc(var(--bz-u) * 8);
  padding-block: calc(var(--bz-u) * 8) calc(var(--bz-u) * 6);
}

.bz-pied-nom {
  font-family: Bitter, Georgia, serif;
  font-size: var(--bz-t-xl);
  color: var(--bz-fond);
  margin-bottom: calc(var(--bz-u) * 2);
}
.bz-pied-ligne { font-size: var(--bz-t-s); max-width: 52ch; margin: 0; }

.bz-pied-cols { display: flex; gap: calc(var(--bz-u) * 8); }
.bz-pied-col h2 {
  font-family: Karla, sans-serif;
  font-size: var(--bz-t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bz-jaune);
  margin-bottom: calc(var(--bz-u) * 2);
}
.bz-pied-col ul { list-style: none; margin: 0; padding: 0; }
.bz-pied-col li { margin-bottom: calc(var(--bz-u) * 1.25); }
.bz-pied-col a { font-size: var(--bz-t-s); transition: color 150ms ease-out; }
.bz-pied-col a:hover { color: var(--bz-fond); }

.bz-pied-bas {
  width: min(100% - calc(var(--bz-u) * 5), var(--bz-large));
  margin: 0 auto;
  padding-block: calc(var(--bz-u) * 3);
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: var(--bz-t-xs);
  color: #8C877E;
}

/* ------------------------------------------------------------------ Focus */

a:focus-visible, button:focus-visible, .bz-burger:focus-visible {
  outline: 2px solid var(--bz-jaune-f);
  outline-offset: 3px;
}

/* ------------------------------------------------------------ Adaptations */

@media (max-width: 1000px) {
  .bz-kiosque-grille, .bz-rail-large, .bz-art-corps, .bz-pied-in { grid-template-columns: minmax(0, 1fr); }
  .bz-rail-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bz-art-cote { position: static; }
  .bz-kiosque-grille { gap: calc(var(--bz-u) * 5); }
}

@media (max-width: 720px) {
  html { font-size: 16px; }

  .bz-burger { display: block; cursor: pointer; padding: var(--bz-u); }
  .bz-burger span, .bz-burger span::before, .bz-burger span::after {
    display: block; width: 22px; height: 2px; background: var(--bz-encre); content: "";
  }
  .bz-burger span::before { transform: translateY(-7px); }
  .bz-burger span::after { transform: translateY(5px); }

  .bz-tete-in { flex-wrap: wrap; }
  .bz-nav { display: none; width: 100%; }
  .bz-burger-case:checked ~ .bz-nav { display: block; }
  .bz-nav-liste { flex-direction: column; gap: 0; padding-bottom: calc(var(--bz-u) * 2); }
  .bz-nav-liste li { border-top: 1px solid var(--bz-filet); }
  .bz-nav-liste a { display: block; padding-block: calc(var(--bz-u) * 2); }
  .bz-nav-liste a::after { display: none; }

  .bz-rail-grille, .bz-arc-grille, .bz-art-nav, .bz-pied-cols { grid-template-columns: minmax(0, 1fr); display: grid; }
  .bz-arc-grille .bz-carte, .bz-arc-grille .bz-carte--une { grid-template-columns: 104px minmax(0, 1fr); gap: calc(var(--bz-u) * 2); }
  .bz-arc-grille .bz-carte--une h2 { font-size: var(--bz-t-l); }
  .bz-carte--une h2 { font-size: var(--bz-t-2x); }
  .bz-art-tete h1 { font-size: var(--bz-t-2x); }
  .bz-chiffres-in { gap: calc(var(--bz-u) * 2); flex-direction: column; padding-block: calc(var(--bz-u) * 3); }
  .bz-art-nav-suiv { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}