/* Le site de Cultivé — dans le style « Planétarium » de l'application.
   Une seule ambiance, la nuit : comme les scènes du jeu, le site est un ciel. */

@font-face { font-family: "Bricolage"; src: url("polices/BricolageGrotesque_800ExtraBold.ttf") format("truetype"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("polices/Figtree_500Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("polices/Figtree_700Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("polices/Fraunces_600SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("polices/IBMPlexMono_600SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }

:root {
  --fond-haut: #1E1A45;
  --fond: #15132E;
  --fond-bas: #0D0C1F;
  --carte: #211E44;
  --texte: #EFEDFA;
  --texte-doux: rgba(239, 237, 250, 0.68);
  --ligne: rgba(255, 255, 255, 0.10);
  --jaune: #F2C94C;
  --portail: #B4EA6A;
  --rose: #EE6AA7;
  --cyan: #62CDE3;
  --violet: #8F86F2;
  --encre: #15132E;
  color-scheme: dark;
}

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

body {
  margin: 0;
  min-height: 100vh;
  color: var(--texte);
  font: 500 17px/1.6 "Figtree", system-ui, sans-serif;
  background-color: var(--fond-bas);
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 9%, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 64% 31%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 33% 44%, rgba(255,255,255,.45) 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 52%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 6% 71%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 47% 83%, rgba(255,255,255,.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 90%, rgba(255,255,255,.45) 50%, transparent 51%),
    radial-gradient(60% 40% at 85% 0%, rgba(143,134,242,.20), transparent 70%),
    radial-gradient(50% 35% at 0% 60%, rgba(238,106,167,.10), transparent 70%),
    linear-gradient(180deg, var(--fond-haut) 0%, var(--fond) 45%, var(--fond-bas) 100%);
  background-attachment: fixed;
}

a { color: var(--portail); text-underline-offset: 3px; }
a:hover { color: #E4F7C7; }
strong { color: #fff; font-weight: 700; }
em { font-style: italic; }

.cadre { width: 100%; max-width: 980px; margin: 0 auto; padding: 0 20px; }

/* L'en-tête : l'icône, le nom, deux liens. */
.entete { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 22px; padding-bottom: 22px; }
.marque { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--texte); }
.marque img { width: 40px; height: 40px; border-radius: 10px; }
.marque span { font: 600 24px/1 "Fraunces", Georgia, serif; }
.nav { display: flex; gap: 18px; flex-wrap: wrap; justify-content: flex-end; }
.nav a { font: 600 12px/1 "Plex Mono", ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--texte-doux); text-decoration: none; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--texte); }

/* L'accueil. */
.une { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; padding: 40px 0 56px; }
.etiquette { font: 600 12px/1 "Plex Mono", ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--jaune); }
h1 { font: 600 clamp(36px, 6vw, 58px)/1.06 "Fraunces", Georgia, serif; margin: 16px 0 18px; letter-spacing: -.01em; }
.chapo { font-size: 19px; color: var(--texte-doux); max-width: 34ch; margin: 0 0 28px; }
/* Une annonce, pas un bouton : rien à toucher tant que la fiche n'existe pas. */
.bientot { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 999px; border: 1px solid rgba(180,234,106,.5); color: var(--portail); font: 600 13px/1 "Plex Mono", ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; }
.bientot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--portail); animation: clignote 1.6s ease-in-out infinite; }
@keyframes clignote { 50% { opacity: .25; } }

/* Le petit système : une planète, son habitant devant. */
.systeme { position: relative; aspect-ratio: 1; max-width: 420px; justify-self: center; width: 100%; }
.systeme .orbite { position: absolute; inset: 6%; border: 1px dashed rgba(255,255,255,.14); border-radius: 50%; transform: rotate(-18deg) scaleY(.56); }
.systeme .planete { position: absolute; width: 58%; left: 21%; top: 12%; animation: flotte 9s ease-in-out infinite; filter: drop-shadow(0 0 40px rgba(98,205,227,.25)); }
.systeme .habitant { position: absolute; width: 50%; right: -4%; bottom: -2%; animation: respire 3.4s ease-in-out infinite; transform-origin: 50% 92%; }
@keyframes flotte { 50% { transform: translateY(-10px) rotate(3deg); } }
@keyframes respire { 50% { transform: scaleY(1.02) rotate(-1deg); } }

.section { padding: 28px 0 48px; border-top: 1px solid var(--ligne); }
h2 { font: 800 clamp(24px, 3.4vw, 30px)/1.15 "Bricolage", system-ui, sans-serif; margin: 0 0 22px; }
.trois { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.carte { background: rgba(33,30,68,.72); border: 1px solid var(--ligne); border-radius: 18px; padding: 22px; }
.carte h3 { font: 800 19px/1.2 "Bricolage", system-ui, sans-serif; margin: 10px 0 8px; }
.carte p { margin: 0; color: var(--texte-doux); font-size: 16px; }
.pastille { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }

.mondes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.monde { text-align: center; }
.monde img { width: 100%; max-width: 150px; aspect-ratio: 1; object-fit: contain; }
.monde span { display: block; font: 600 11px/1.3 "Plex Mono", ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-doux); margin-top: 6px; }

.promesses { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 28px; }
.promesses li { display: flex; gap: 12px; align-items: baseline; }
.promesses li::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--portail); transform: translateY(1px); }

/* Les pages de texte : confidentialité, aide. */
.texte { max-width: 720px; padding: 24px 0 56px; }
.texte h1 { font-size: clamp(32px, 5vw, 44px); margin-top: 8px; }
.texte h2 { margin-top: 44px; font-size: 24px; }
.texte h3 { font: 800 19px/1.3 "Bricolage", system-ui, sans-serif; margin: 30px 0 8px; }
.texte p, .texte li { color: rgba(239,237,250,.86); }
.texte ul { padding-left: 22px; }
.texte li { margin: 6px 0; }
.texte hr { display: none; }
.texte blockquote { margin: 22px 0; padding: 14px 18px; border-left: 3px solid var(--jaune); background: rgba(242,201,76,.07); border-radius: 0 12px 12px 0; }
.texte code { font: 600 .9em "Plex Mono", ui-monospace, monospace; }

.pied { border-top: 1px solid var(--ligne); padding: 26px 20px 40px; color: var(--texte-doux); font-size: 14px; display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: space-between; max-width: 980px; margin: 0 auto; }
.pied a { color: var(--texte-doux); }

@media (max-width: 760px) {
  body { font-size: 16px; }
  .une { grid-template-columns: 1fr; gap: 18px; padding-top: 12px; }
  .systeme { max-width: 300px; order: -1; }
  .trois { grid-template-columns: 1fr; }
  .mondes { grid-template-columns: repeat(2, 1fr); }
  .promesses { grid-template-columns: 1fr; }
  .nav { gap: 14px; }
  .marque span { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before { animation: none !important; }
}