/* Hallmark · genre: editorial · macrostructure: Manifesto (page-affiche, un seul ecran)
 * theme: Riso · enrichment: none (typography + encres) · nav: none · footer: none
 * pre-emit critique: P5 H5 E5 S5 R4 V5
 *
 * Registre risographie : trois encres franches sur papier peche, et le decalage
 * d'impression comme unique ornement. Composition centree — demandee explicitement.
 * Les trois portes sont a egalite stricte : meme largeur, meme graisse, meme poids
 * visuel. Aucune ne domine, c'est le sujet qui les tient ensemble.
 */

/* ---------- tokens : palette claire complete ---------- */
:root {
  --color-paper:    oklch(97%   0.016 62);   /* papier peche, chaud et lumineux */
  --color-paper-2:  oklch(94%   0.022 60);
  --color-rule:     oklch(86%   0.020 55);
  --color-muted:    oklch(52%   0.030 50);
  --color-ink:      oklch(26%   0.035 45);   /* brun chaud profond, jamais noir */

  /* Les quatre encres. Analogues : elles se tiennent sans se disputer.
     La prune prolonge la rose vers le magenta, sans sortir de la famille chaude. */
  --ink-coral:      oklch(64%   0.160 38);
  --ink-honey:      oklch(76%   0.145 78);
  --ink-rose:       oklch(68%   0.140 12);
  --ink-plum:       oklch(62%   0.130 348);
  --wash-coral:     oklch(91%   0.055 38);
  --wash-honey:     oklch(93%   0.055 78);
  --wash-rose:      oklch(92%   0.050 12);
  --wash-plum:      oklch(92%   0.048 348);

  --color-focus:    oklch(45%   0.140 38);

  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-micro: 130ms;
  --dur-short: 240ms;
  --dur-long:  680ms;

  --offset: 5px;                              /* le decalage d'impression */
  --edge: clamp(1.25rem, 5vw, 4rem);
}

/* ---------- le meme jeu de tokens, en sombre ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-paper:   oklch(19%  0.022 45);
    --color-paper-2: oklch(23%  0.026 45);
    --color-rule:    oklch(36%  0.024 50);
    --color-muted:   oklch(73%  0.022 55);
    --color-ink:     oklch(94%  0.016 70);
    --ink-coral:     oklch(73%  0.150 38);
    --ink-honey:     oklch(83%  0.130 78);
    --ink-rose:      oklch(76%  0.130 12);
    --ink-plum:      oklch(74%  0.125 348);
    --wash-coral:    oklch(31%  0.060 38);
    --wash-honey:    oklch(33%  0.055 78);
    --wash-rose:     oklch(32%  0.055 12);
    --wash-plum:     oklch(31%  0.055 348);
    --color-focus:   oklch(83%  0.130 78);
  }
}
:root[data-theme="dark"] {
  --color-paper:   oklch(19%  0.022 45);
  --color-paper-2: oklch(23%  0.026 45);
  --color-rule:    oklch(36%  0.024 50);
  --color-muted:   oklch(73%  0.022 55);
  --color-ink:     oklch(94%  0.016 70);
  --ink-coral:     oklch(73%  0.150 38);
  --ink-honey:     oklch(83%  0.130 78);
  --ink-rose:      oklch(76%  0.130 12);
  --ink-plum:      oklch(74%  0.125 348);
  --wash-coral:    oklch(31%  0.060 38);
  --wash-honey:    oklch(33%  0.055 78);
  --wash-rose:     oklch(32%  0.055 12);
  --wash-plum:     oklch(31%  0.055 348);
  --color-focus:   oklch(83%  0.130 78);
}

/* ---------- base ---------- */
html, body { overflow-x: clip; }

body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* Le grain du papier imprime. Tres faible : il se sent, il ne se voit pas. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
}

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

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 4px;
}

/* ---------- l'affiche : un seul ecran, contenu au centre ---------- */
.sheet {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 6vh, 4rem) var(--edge);
  position: relative;
  z-index: 2;
}

.stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2rem, 7vh, 4.5rem);
  width: 100%;
  max-width: 60rem;
}

.name {
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: "opsz" 72;
  font-size: clamp(2.5rem, 9vw, 7rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-align: center;
  text-wrap: balance;
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
}

/* ---------- les quatre portes, a egalite stricte ---------- */
.doors {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.75rem, 2vw, 1.5rem);
  width: 100%;
}

.door {
  /* Chaque porte reçoit son encre par sa classe ; le reste est commun,
     pour que les trois pesent exactement le même poids. */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: clamp(3.5rem, 9vh, 5rem);
  padding: 0.9rem 1.1rem;
  background: var(--door-wash);
  color: var(--color-ink);
  border: 2px solid var(--door-ink);
  border-radius: 14px;
  box-shadow: var(--offset) var(--offset) 0 0 var(--door-ink);
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 0.5vw + 0.85rem, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.008em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition:
    transform  var(--dur-short) var(--ease-out),
    box-shadow var(--dur-short) var(--ease-out);
}

/* La mention « bientot » : posee dans l'angle, elle n'entre pas dans le flux —
   les trois libelles restent alignes et les trois portes gardent la meme taille. */
.door__soon {
  position: absolute;
  top: 0.45rem;
  right: 0.7rem;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-ink);
  opacity: 0.55;
}

.door--coral { --door-ink: var(--ink-coral); --door-wash: var(--wash-coral); }
.door--honey { --door-ink: var(--ink-honey); --door-wash: var(--wash-honey); }
.door--rose  { --door-ink: var(--ink-rose);  --door-wash: var(--wash-rose);  }
.door--plum  { --door-ink: var(--ink-plum);  --door-wash: var(--wash-plum);  }

/* Au survol, la porte glisse sur son ombre : l'impression se cale. */
.door:hover, .door:focus-visible {
  transform: translate(var(--offset), var(--offset));
  box-shadow: 0 0 0 0 var(--door-ink);
}

.door:active { transform: translate(var(--offset), calc(var(--offset) + 1px)); }

/* ---------- une entree, encre par encre ---------- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  animation: reveal var(--dur-long) var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 120ms);
}

@keyframes reveal { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
  .reveal { transform: none; }
  .door:hover, .door:focus-visible { transform: none; box-shadow: var(--offset) var(--offset) 0 0 var(--door-ink); }
}

/* ---------- ecrans moyens : deux par deux, jamais de rang orphelin ---------- */
@media (max-width: 56rem) {
  .doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- petits ecrans : les portes s'empilent, a egalite ---------- */
@media (max-width: 40rem) {
  .doors { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- paysage court : tout doit tenir sans defiler ---------- */
@media (max-height: 30rem) and (orientation: landscape) {
  .stack { gap: clamp(1rem, 5vh, 2rem); }
  .name { font-size: clamp(1.75rem, 7vh, 3.5rem); }
  .door { min-height: 2.75rem; padding: 0.5rem 0.9rem; }
}

/* ---------- pages interieures ---------- */
/* La meme affiche, mais avec un contenu sous le titre et le chemin du retour.
   Rien de nouveau : on reprend .sheet et .stack, on ajoute de quoi lire. */

.prose {
  width: 100%;
  max-width: 40rem;
  font-size: clamp(1rem, 0.3vw + 0.95rem, 1.125rem);
}

.prose h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 1vw + 1rem, 1.6rem);
  letter-spacing: -0.015em;
  margin: 2.5rem 0 0.6rem;
}

.prose h2:first-child { margin-top: 0; }
.prose p { margin: 0 0 1rem; }
.prose a { color: var(--ink-coral); text-underline-offset: 3px; }

/* Marque-place, le temps que la page ait quelque chose a dire. A supprimer
   en meme temps qu'on la remplit. */
.empty {
  color: var(--color-muted);
  text-align: center;
  font-style: italic;
}

/* Le retour : une porte, mais en creux — elle ramene, elle ne propose pas. */
.back {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7rem 1.2rem;
  border: 2px solid var(--color-rule);
  border-radius: 14px;
  color: var(--color-ink);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: border-color var(--dur-short) var(--ease-out);
}

.back:hover, .back:focus-visible { border-color: var(--ink-coral); }

/* Une precision qui accompagne une adresse sans la parasiter. */
.prose .note {
  display: block;
  margin-top: 0.35rem;
  color: var(--color-muted);
  font-size: 0.9em;
}

/* Chaque rendez-vous : une heure, un lieu, ses precisions. Les rendez-vous
   d'une meme journee sont espaces entre eux, moins qu'entre deux journees :
   l'oeil doit voir d'abord les jours, ensuite ce qu'il s'y passe. */
.prose .when {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.prose .item { margin-bottom: 1.9rem; }
.prose .item:last-child { margin-bottom: 0; }
.prose .item p:last-child { margin-bottom: 0; }

/* Ce dont on a besoin sur place — un code, un conseil — n'est pas une precision
   de second rang : ca garde l'encre du texte, et sa graisse. */
.prose .key {
  display: block;
  margin-top: 0.45rem;
  font-weight: 600;
}

/* Une liste d'endroits se lit en colonne, pas en phrase. Puces discretes :
   c'est la liste qui compte, pas son marquage. */
.prose ul {
  margin: 0 0 1rem;
  padding-left: 1.2rem;
  list-style: none;
}

.prose ul li {
  position: relative;
  margin-bottom: 0.35rem;
}

.prose ul li::before {
  content: "";
  position: absolute;
  left: -1.2rem;
  top: 0.62em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--ink-coral);
}