/* oliviervictor.fr — portail perso. Un seul texte qui se déplie au clic. */

/* --- Police auto-hébergée : Libre Baskerville --- */
@font-face {
  font-family: "Libre Baskerville";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/libre-baskerville-400.woff2") format("woff2");
}
@font-face {
  font-family: "Libre Baskerville";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/libre-baskerville-400italic.woff2") format("woff2");
}

:root {
  --paper: #faf9f6;
  --ink:   #1f1d1a;
  --muted: #9a948a;
  --measure: 38rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #14130f;
    --ink:   #ece9e1;
    --muted: #7c776c;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Libre Baskerville", Georgia, "Times New Roman", serif;
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.5rem); /* base 24px */
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Le texte démarre en haut à gauche (pas de centrage). */
main {
  max-width: var(--measure);
  margin: 0;
  padding: clamp(2rem, 7vh, 4.5rem) clamp(1.25rem, 5vw, 3.5rem);
}

/* Les phrases s'enchaînent sans écart : on lit un seul texte. */
p {
  margin: 0;
  text-wrap: pretty;
}

/* --- Mot dépliable et lien sortant : même style et même couleur que le texte --- */
.x,
.out {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  vertical-align: baseline;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness .15s ease;
}

.x:hover,
.x:focus-visible,
.out:hover,
.out:focus-visible {
  outline: none;
  text-decoration-thickness: 2px;
}

/* Mot déjà ouvert : redevient du texte ordinaire. */
.x.done {
  text-decoration: none;
  cursor: text;
}

/* --- Segment révélé : apparition en fondu --- */
.more {
  opacity: 0;
  transition: opacity .55s ease;
}
.more.shown { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .x, .out { transition: none; }
  .more { transition: none; }
}