/* bunni.bunnichrist.fr — portfolio */

:root {
  --ink: #1a1a1a;
  --paper: #faf8f5;
  --paper-alt: #f0ece5;
  --line: #ddd6cc;
  --accent: #7a4b2a;
  --muted: #6b6459;
  --max: 720px;
  --serif: Georgia, "Times New Roman", Times, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.55;
  font-size: 17px;
}

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

a {
  color: var(--accent);
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 20px;
}

section {
  padding: 56px 0;
}

section + section {
  border-top: 1px solid var(--line);
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 0.5em;
}

/* ---- Accroche ---- */

.hero {
  padding-top: 48px;
}

.hero .wrap {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 32px;
  text-align: center;
}

.hero h1 {
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  max-width: 22ch;
}

.hero .signature {
  margin-top: 1em;
  color: var(--muted);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.hero-photo {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--line);
}

.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Chiffres ---- */

.stats {
  background: var(--paper-alt);
}

.stats h2 {
  text-align: center;
  font-size: 1.1rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--sans);
  margin-bottom: 1.5em;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 16px;
  text-align: center;
}

.stat-num {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 6vw, 2.1rem);
  display: block;
}

.stat-label {
  color: var(--muted);
  font-size: 0.88rem;
  margin-top: 0.25em;
}

.stats-note {
  margin-top: 32px;
  font-size: 0.85rem;
  color: var(--muted);
  text-align: center;
}

/* ---- Chaînes ---- */

.channels h2, .built h2, .contact h2 {
  font-size: 1.5rem;
  text-align: center;
  margin-bottom: 1.4em;
}

.channel-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.channel {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 20px 22px;
}

.channel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.channel-head h3 {
  font-size: 1.15rem;
  margin: 0;
}

.channel-subs {
  font-family: var(--serif);
  color: var(--accent);
  white-space: nowrap;
}

.channel p {
  margin: 0.6em 0 0;
  color: var(--muted);
}

.channel-link {
  display: inline-block;
  margin-top: 0.7em;
  font-size: 0.88rem;
}

/* ---- Construit ---- */

.built-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.built-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.built-item h3 {
  font-size: 1.05rem;
  margin-bottom: 0.2em;
}

.built-item p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.built-item ul {
  list-style: none;
  margin: 0.5em 0 0;
  padding: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.built-item ul li {
  padding: 0.35em 0;
  border-top: 1px solid var(--line);
}

.built-item ul li:first-child {
  border-top: none;
}

/* Le livre est la preuve la plus forte de la section : sa couverture est le
   plus grand visuel du bloc "Ce qui a été construit". */

.book-item {
  align-items: flex-start;
  gap: 28px;
}

.book-cover {
  width: 140px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

/* ---- Annuaire ---- */

.annuaire h2 {
  font-size: 1.5rem;
  text-align: center;
  margin-bottom: 0.3em;
}

.annuaire-note {
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0 0 1.6em;
}

.annuaire-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.annuaire-list li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.annuaire-list li:first-child {
  border-top: none;
  padding-top: 0;
}

.annuaire-list .brand {
  font-family: var(--serif);
  font-size: 1.02rem;
}

.annuaire-list .platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 0.88rem;
}

.annuaire-list .platforms a {
  white-space: nowrap;
}

/* ---- Contact ---- */

.contact {
  text-align: center;
}

.contact p {
  color: var(--muted);
}

.contact a.mail {
  display: inline-block;
  margin-top: 0.6em;
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--ink);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
}

footer {
  padding: 28px 0 48px;
  text-align: center;
  color: var(--muted);
  font-size: 0.8rem;
}

/* ---- Breakpoints ---- */

@media (min-width: 640px) {
  .hero .wrap {
    flex-direction: row;
    text-align: left;
  }

  .stat-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Le livre occupe toute la largeur sur sa propre ligne : couverture et
     texte forment une paire côte à côte avec assez de place pour que le
     texte respire. Formations et produits web se partagent la ligne du
     dessous, le podcast reprend toute la largeur en bas. Mettre le livre
     dans une colonne à moitié aussi large que la page (comme avant)
     coinçait son texte sur ~115px et cassait chaque ligne. */
  .built-grid {
    grid-template-columns: 1fr 1fr;
  }

  .built-item:nth-child(1) {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .built-item:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }

  .built-item:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
  }

  .built-item:nth-child(4) {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .annuaire-list li {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
  }

  .annuaire-list .brand {
    flex: 0 0 200px;
  }
}

/* Grand écran : l'accroche a droit à sa propre largeur de colonne, plus
   généreuse que le reste du contenu (--max), pour que le titre tienne en
   2-3 lignes au lieu de casser en colonne étroite. Le reste du site garde
   sa largeur de lecture confortable : ce n'est qu'un ajustement de l'accroche. */
@media (min-width: 900px) {
  .hero .wrap {
    max-width: 1040px;
    gap: 56px;
  }

  .hero h1 {
    max-width: 32ch;
  }

  .hero-photo {
    width: 240px;
    height: 240px;
  }

  .book-cover {
    width: 180px;
  }
}