/* ============================================================
   style.css — D'écrits, PascalF Kaufmann
   ============================================================ */

:root {
  --brun:       rgb(153, 102, 51);
  --brun-titre: rgb(142, 80, 13);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: Georgia, 'Times New Roman', serif;
  color: #222;
  background: #fff;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}

/* ---- CONTENEUR ---- */
.page-wrapper {
  width: 1046px;
  margin: 0 auto;
  padding: 10px 0 40px;
}

/* ---- EN-TÊTE CENTRÉ ---- */
.site-header {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 40px;
  padding: 20px 0 24px;
}
.logo { width: 430px; height: 228px; display: block; }
.auteur {
  font-size: 2rem;
  font-style: italic;
  color: var(--brun-titre);
  font-family: Georgia, serif;
}

/* ---- NAVIGATION CENTRÉE ---- */
.site-nav {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 10px 0 24px;
  border-bottom: 1px solid rgba(153,102,51,0.2);
  margin-bottom: 20px;
}
.nav-lien {
  display: inline-block;
  width: 200px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.1rem;
  color: var(--brun);
}
.nav-lien:hover { text-decoration: underline; }
.nav-lien.actif { font-weight: bold; text-decoration: underline; }

/* ---- PRÉSENTATION ACCUEIL ---- */
.presentation {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 20px 0 30px;
}
.portrait { width: 206px; height: 161px; flex-shrink: 0; }
.bio {
  font-size: 12pt;
  font-family: Georgia, serif;
  color: #000;
  text-align: justify;
  line-height: 1.6;
}
.bio p + p { margin-top: 1em; }
.signature { margin-top: 1.2em; font-style: italic; }

/* ---- GRILLE VIGNETTES ---- */
.grille {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 30px;
  padding: 10px 0 30px;
}
.vignette { display: flex; align-items: center; gap: 15px; }
.vignette img { width: 250px; height: 141px; object-fit: cover; display: block; flex-shrink: 0; }
.vignette-titre {
  font-size: 1.5rem;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--brun);
  text-decoration: none;
  line-height: 1.3;
}
.vignette-titre:hover { text-decoration: underline; }

/* Vignette vide pour nombre impair */
.vignette-vide { visibility: hidden; }

/* ---- SECTION ET ENCORE ---- */
.encore { padding: 20px 0 30px; }
.encore-titre {
  font-size: 1.8rem;
  font-style: italic;
  color: var(--brun-titre);
  text-decoration: underline;
  margin-bottom: 15px;
  font-weight: normal;
}
.encore-liste { list-style: none; display: flex; flex-direction: column; gap: 10px; padding-left: 20px; }
.encore-liste li { display: flex; align-items: center; gap: 8px; }
.puce { width: 21px; height: 21px; }
.encore-lien {
  font-size: 1.5rem;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--brun);
  text-decoration: none;
}
.encore-lien:hover { text-decoration: underline; }

/* ---- PIED DE PAGE ---- */
.site-footer { padding: 20px 0; border-top: 1px solid #eee; }