/* papydoctor.eu — une phrase, rien d'autre.
   La page dit qu'elle ne bouge pas : elle ne bouge donc pas. Aucune animation,
   aucune transition, aucun JavaScript. */

:root {
  --papier: #f6f1e7;
  --encre: #2f2a24;
  --encre-douce: #8a8175;
  --ambre: #c78c34;

  /* Dit au navigateur que le site sait s'afficher dans les deux themes. Sans
     cette ligne, il peint les champs de formulaire, les listes deroulantes et
     les ascenseurs en clair meme sur fond sombre. */
  color-scheme: light dark;
}

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--papier);
  color: var(--encre);
  font: 400 16px/1.7 Georgia, "Times New Roman", serif;
  -webkit-font-smoothing: antialiased;
}

.ecran {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  text-align: center;
}

.mot {
  margin: 0;
  max-width: 22ch;
  font-size: clamp(1.75rem, 6vw, 3.25rem);
  line-height: 1.25;
  font-weight: 400;
}

/* Le nom de domaine sous la phrase, en retrait : c'est la signature du lieu,
   pas son titre. Le trait ambre suffit a le rattacher au reste. */
.adresse {
  margin: 2.5rem 0 0;
  padding-top: 2.5rem;
  position: relative;
  color: var(--encre-douce);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  text-transform: lowercase;
}

.adresse::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 3rem;
  height: 2px;
  margin-left: -1.5rem;
  background: var(--ambre);
}

.adresse a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--ambre);
  padding-bottom: 2px;
}

.pied {
  padding: 1.5rem;
  text-align: center;
  color: var(--encre-douce);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.72rem;
}

.pied a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid #ddd3c2;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier: #201d19;
    --encre: #f0e9dc;
    --encre-douce: #9a9184;
  }

  .pied a {
    border-bottom-color: #3c3630;
  }
}

/* ---------- le fond de page ---------- */

/* Trois halos de la couleur d'accent, poses derriere toute la page. Ils
   rompent la monotonie d'un aplat sans rien couter : ni image, ni requete.

   Une couche fixe plutot que « background-attachment: fixed » : Safari sur
   iPhone gere mal ce dernier — il repeint la page a chaque mouvement du doigt.
   Elle est posee derriere le contenu (z-index: -1) et n'intercepte aucun clic.

   Les trois pourcentages donnent l'intensite : les baisser pour un fond plus
   sage, les monter pour un fond plus present. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(60rem 40rem at 15% -10%,
      color-mix(in srgb, var(--ambre) 30%, transparent), transparent 70%),
    radial-gradient(50rem 35rem at 100% 15%,
      color-mix(in srgb, var(--ambre) 22%, transparent), transparent 70%),
    radial-gradient(55rem 38rem at 0% 100%,
      color-mix(in srgb, var(--ambre) 18%, transparent), transparent 70%);
}