/* Le sol de l'app, porté sur le web : papier, encre, la lisière.
   Un seul fichier pour les trois pages — rien à synchroniser. */
:root {
  --papier:#faf8f3; --encre:#121210; --second:#56564f; --attenue:#6b6b64;
  --filet:rgba(18,18,16,.12); --panneau:#edf1ea;
  --degrade:linear-gradient(135deg,#a95319 0%,#288034 100%);
  --titre:'Archivo Black', system-ui, sans-serif;
  --corps:Archivo, system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: light;
}
* { box-sizing:border-box; }
html, body { height:100%; }
body {
  margin:0; background:var(--papier); color:var(--encre); font-family:var(--corps);
  font-size:17px; line-height:25px;
  display:flex; flex-direction:column;
  padding-left:max(20px, env(safe-area-inset-left,0px));
  padding-right:max(20px, env(safe-area-inset-right,0px));
}
main { flex:1; width:100%; max-width:640px; margin:0 auto; padding-block:64px 48px; }
main.centre { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }

/* LA PLANÈTE — dessinée image par image dans planete.js. */
.planete { width:clamp(120px,32vw,176px); aspect-ratio:1; margin-top:42px; }
.planete canvas { width:100%; height:100%; display:block; border-radius:50%; }

.mot { font-family:var(--titre); font-size:clamp(34px,9vw,52px); letter-spacing:.14em; margin:0; }
.mot span { background-image:var(--degrade); -webkit-background-clip:text; background-clip:text; color:transparent; }
/* La lisière : les trois points du bas des tuiles du mur, portés ici. */
.lisiere { width:64px; height:3px; border-radius:2px; background-image:var(--degrade); margin:18px 0 22px; }
/* Le slogan dans le même gris que « Soon. » : la couleur reste au mot, à la
   lisière et à la planète ; le texte, lui, se lit sans crier. */
.accroche { font-size:clamp(15px,3.6vw,19px); line-height:1.45; margin:0;
            max-width:none; white-space:nowrap; color:var(--attenue);
            text-transform:uppercase; letter-spacing:.12em; font-weight:500; }
/* Sous ~360 points de large, « nowrap » déborderait : on laisse alors la
   phrase se replier plutôt que de rogner l'écran. */
@media (max-width:379px) { .accroche { white-space:normal; max-width:20ch; } }
.bientot { margin:26px 0 0; font-size:17px; color:var(--attenue); letter-spacing:.05em; }

h1 { font-family:var(--titre); font-size:clamp(25px,6vw,32px); letter-spacing:-.6px; margin:0 0 6px; }
.maj { font-family:var(--titre); font-size:12px; letter-spacing:1.4px; color:var(--attenue);
       margin:38px 0 10px; }
h2 { font-family:var(--titre); font-size:17px; margin:30px 0 8px; }
p { margin:0 0 14px; }
a { color:var(--encre); text-underline-offset:3px; }
ul { margin:0 0 14px; padding-left:20px; }
li { margin-bottom:7px; }
.date { color:var(--attenue); font-size:14px; margin:0 0 30px; }
.encart { background:var(--panneau); border-radius:16px; padding:16px 18px; margin:0 0 20px; }
.encart p:last-child { margin-bottom:0; }
.retour { display:inline-block; font-size:14px; color:var(--second); text-decoration:none; margin-bottom:26px; }

footer {
  border-top:1px solid var(--filet); width:100%; max-width:640px; margin:0 auto;
  padding-block:20px 34px; display:flex; flex-wrap:wrap; gap:8px 20px;
  font-size:13.5px; color:var(--attenue); align-items:baseline;
}
footer a { color:var(--second); text-decoration:none; }
footer a:hover { text-decoration:underline; }
footer .loin { margin-left:auto; }

@media (prefers-color-scheme: dark) {
  :root { --papier:#141412; --encre:#faf8f3; --second:#b5b3a9; --attenue:#96948c;
          --filet:rgba(250,248,243,.14); --panneau:#20201d; color-scheme: dark; }
}