/* Machina Mundi : le système solaire en 3D, dans l'esprit d'un mécanisme d'Anticythère futuriste.
   L'espace (canvas plein écran) derrière, un tableau de bord par-dessus : verre fumé, filets d'or doubles,
   anneaux et cadrans ; or pour la mécanique, turquoise pour ce qui est actif. Latin en Marcellus,
   français en EB Garamond. Script : script.js (moteur 3D maison, orbites képlériennes). */

@font-face { font-family: "Marcellus"; src: url("polices/marcellus.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("polices/eb-garamond-latin.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }

:root {
  /* Lues aussi par script.js (canvas) */
  --espace: #05060f;
  --or: #e3b55a;
  --or-clair: #f7dc94;
  --turquoise: #6fe3d2;
  --texte: #f2ead8;
  --texte-doux: #c9bfa8;
  --verre: rgba(9, 11, 26, .66);
  --filet: rgba(227, 181, 90, .38);
  --patine: #3d7464;
  --patine-fonce: #1f3d35;
  --lueur: rgba(247, 207, 106, .75);
  --romain: "Marcellus", "Trajan Pro", serif;
  --texte-police: "EB Garamond", Garamond, Georgia, serif;
  --marge: clamp(.6rem, 2vw, 1.4rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--espace); color-scheme: dark; }
body {
  margin: 0; min-height: 100svh; color: var(--texte); font-family: var(--texte-police); font-size: 1.0625rem; line-height: 1.45;
  background: radial-gradient(ellipse 70% 50% at 30% 20%, rgba(58, 31, 94, .45), transparent 70%), radial-gradient(ellipse 60% 50% at 80% 70%, rgba(20, 50, 80, .4), transparent 70%), var(--espace);
  display: grid; gap: .6rem; padding: var(--marge);
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  grid-template-areas: "tete date" "fiche fiche" "message message" "commandes commandes" "credit credit";
}
button, input, output { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--turquoise); outline-offset: 3px; }
.evitement { position: absolute; left: 1rem; top: -4rem; z-index: 10; padding: .8rem 1rem; background: var(--or); color: var(--espace); }
.evitement:focus { top: 1rem; }
.lecteur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
.latin { font-family: var(--romain); letter-spacing: .14em; }
.sans-js { grid-area: fiche; place-self: center; text-align: center; color: var(--texte-doux); position: relative; z-index: 1; }

/* L'espace, derrière tout : les zones vides de la grille laissent passer le pointeur */
.espace { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; z-index: 0; }
.espace:active { cursor: grabbing; }
.espace:focus-visible { outline-offset: -6px; }
.hud, .credit { position: relative; z-index: 1; }

/* Verre fumé à double filet d'or */
.date, .fiche, .commandes {
  background: var(--verre); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--filet); border-radius: 1.4rem;
  box-shadow: inset 0 0 0 4px rgba(9, 11, 26, .5), inset 0 0 0 5px rgba(227, 181, 90, .12), 0 10px 30px rgba(0, 0, 0, .45);
}

.tete { grid-area: tete; align-self: start; pointer-events: none; }
h1 { margin: 0; font-family: var(--romain); font-weight: 400; font-size: clamp(1.25rem, 3.6vw, 2.3rem); letter-spacing: .2em; color: var(--or); text-shadow: 0 0 24px rgba(227, 181, 90, .35); line-height: 1.1; }
.sous-titre { margin: .2rem 0 0; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-doux); }

/* Cadran de la date */
.date { grid-area: date; align-self: start; display: flex; align-items: center; gap: .8rem; padding: .5rem 1rem .5rem .5rem; border-radius: 999px; }
.cadran-date {
  position: relative; flex: none; width: 3.6rem; aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle, var(--espace) 0 52%, transparent 53%),
    repeating-conic-gradient(var(--or) 0 1.2deg, transparent 1.2deg 30deg),
    repeating-conic-gradient(rgba(227, 181, 90, .35) 0 .6deg, transparent .6deg 6deg);
  box-shadow: 0 0 0 1px var(--filet), inset 0 0 12px rgba(0, 0, 0, .8);
}
.aiguille-date {
  position: absolute; left: 50%; top: 8%; width: 2px; height: 42%; margin-left: -1px; transform-origin: 50% 100%;
  transform: rotate(var(--angle, 0deg)); background: linear-gradient(var(--turquoise), var(--or)); border-radius: 2px; box-shadow: 0 0 6px var(--turquoise);
}
.date-textes p { margin: 0; }
.date-latin { font-family: var(--romain); font-size: .95rem; letter-spacing: .12em; color: var(--or-clair); }
.date-francais { font-size: .85rem; color: var(--texte-doux); }

/* Fiche de l'astre suivi */
.fiche { grid-area: fiche; align-self: center; justify-self: end; width: min(19rem, 100%); padding: 1rem 1.2rem 1.1rem; }
.fiche[hidden] { display: none; }
.fiche h2 { margin: 0 2.4rem .6rem 0; font-weight: 400; display: grid; }
.fiche h2 .latin { font-size: 1.2rem; color: var(--or); }
.fiche h2 .francais { font-size: .9rem; color: var(--texte-doux); }
.fiche-donnees { margin: 0; display: grid; gap: .25rem; font-size: .9rem; }
.fiche-donnees div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dashed rgba(227, 181, 90, .2); padding: .15rem 0; }
.fiche-donnees dt { color: var(--texte-doux); }
.fiche-donnees dd { margin: 0; text-align: right; color: var(--texte); }
.fermer {
  position: absolute; top: .5rem; right: .5rem; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  background: transparent; border: 1px solid var(--filet); color: var(--or); font-size: 1.3rem; line-height: 1;
}
.fermer:hover { border-color: var(--or); }

.message { grid-area: message; margin: 0; text-align: center; display: grid; gap: .1rem; min-height: 3.6em; pointer-events: none; text-shadow: 0 1px 6px #000; }
.message .latin { color: var(--or); font-size: .95rem; }
.message .francais { font-size: .95rem; }

/* ---------- Le tableau de bord ---------- */
.commandes { grid-area: commandes; justify-self: center; width: min(64rem, 100%); padding: .7rem; display: grid; gap: .6rem; grid-template-columns: minmax(0, 1fr); }
.temps, .options { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; }
.tiroir { display: contents; }
.plus { display: none; }
@media (min-width: 900px) {
  .commandes { grid-template-columns: auto auto; grid-template-areas: "temps options" "astres astres" "secrets secrets"; align-items: center; justify-content: center; column-gap: 1.5rem; }
  .temps { grid-area: temps; } .astres { grid-area: astres; } .options { grid-area: options; } .secrets { grid-area: secrets; }
}
/* Boutons : pilules à filet d'or ; actif = lueur turquoise */
.bouton-rond, .options button, .astres button {
  min-height: 44px; padding: 0 1rem; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, .03); border: 1px solid var(--filet); color: var(--or-clair);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.bouton-rond .latin, .options .latin { font-size: .8rem; }
.bouton-rond:hover, .options button:hover, .astres button:hover { border-color: var(--or); background: rgba(227, 181, 90, .08); }
.principal { min-width: 7rem; border-color: var(--or); background: radial-gradient(ellipse at 50% 0%, rgba(227, 181, 90, .25), transparent 70%); }
.commandes [aria-pressed="true"] { border-color: var(--turquoise); color: #e6fffb; box-shadow: 0 0 0 1px var(--turquoise), 0 0 16px rgba(111, 227, 210, .45); }

.vitesse { display: grid; grid-template-columns: auto 8rem auto; align-items: center; gap: .5rem; min-height: 44px; }
.vitesse .latin { font-size: .75rem; color: var(--texte-doux); }
.vitesse output { font-family: var(--romain); font-size: .8rem; color: var(--or-clair); min-width: 6.5rem; letter-spacing: .06em; }
.vitesse input { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; cursor: pointer; }
.vitesse input::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, rgba(227, 181, 90, .25), var(--or)); }
.vitesse input::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, rgba(227, 181, 90, .25), var(--or)); }
.vitesse input::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--or) 45%, #8a5a26); box-shadow: 0 0 10px var(--lueur); border: 0; }
.vitesse input::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--or) 45%, #8a5a26); box-shadow: 0 0 10px var(--lueur); border: 0; }

/* Astres : défilent à l'horizontale si la place manque */
.astres { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--filet) transparent; padding: 2px; justify-content: safe center; }
.astres button { flex: none; display: inline-flex; align-items: center; gap: .45rem; padding: 0 .8rem; }
.astres .latin { font-size: .75rem; letter-spacing: .1em; }
.pastille { width: .7rem; height: .7rem; border-radius: 50%; flex: none; }

/* Secrets : bronze patiné scellé, or une fois découverts */
.secrets { display: flex; justify-content: center; gap: .5rem; flex-wrap: wrap; }
.secret {
  width: 44px; height: 44px; border-radius: 50%; padding: 0; cursor: pointer; display: grid; place-items: center; border: 0; color: #9cc5b4;
  background: radial-gradient(circle at 36% 30%, #8fb9a6 0 6%, var(--patine) 40%, var(--patine-fonce) 80%, #12241f);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .5), inset 0 -3px 6px rgba(0, 0, 0, .45), inset 0 2px 4px rgba(220, 255, 240, .3);
  transition: color .5s, background .5s, box-shadow .5s;
}
.secret svg { width: 60%; height: 60%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.secret .plein { fill: currentColor; fill-opacity: .35; }
.secret .sombre { fill: #12241f; fill-opacity: 1; }
.secret.decouvert { color: #3a2408; background: radial-gradient(circle at 38% 32%, #fff6d6 0 8%, var(--or) 40%, #d98b3a 75%, #7a4a14); box-shadow: 0 3px 8px rgba(0, 0, 0, .5), 0 0 16px var(--lueur); }
.secret.decouvert .sombre { fill: #3a2408; }
.secret.revele { animation: revele 1.4s ease-out; }
@keyframes revele { 30% { box-shadow: 0 0 34px var(--lueur), 0 0 70px rgba(247, 207, 106, .55); } }

.credit { grid-area: credit; justify-self: center; font-size: .75rem; color: var(--texte-doux); }
.credit p { margin: 0; }
.credit a { color: var(--or); display: inline-block; padding: .8rem 0; margin: -.8rem 0; }

/* Téléphone : tableau de bord compact */
@media (max-width: 40rem) {
  body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tete" "date" "fiche" "message" "commandes" "credit"; grid-template-rows: auto auto minmax(0, 1fr) auto auto auto; gap: .45rem; }
  .date { justify-self: start; padding: .35rem .9rem .35rem .35rem; }
  .cadran-date { width: 2.8rem; }
  .fiche { justify-self: stretch; width: auto; align-self: end; }
  .commandes { padding: .55rem; gap: .5rem; border-radius: 1.1rem; }
  .vitesse { grid-template-columns: auto minmax(0, 1fr); }
  .vitesse output { grid-column: 1 / -1; text-align: center; min-width: 0; }
  .options button { padding: 0 .7rem; }
  .plus { display: inline-block; }
  .commandes:not(.ouverte) .tiroir { display: none; }
  .tiroir { display: grid; gap: .5rem; }
  .temps { flex-wrap: nowrap; }
  .vitesse { flex: 1; min-width: 0; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .vitesse .latin { display: none; }
  .vitesse output { font-size: .75rem; margin-top: -.6rem; }
  .bouton-rond { padding: 0 .75rem; }
  .principal { min-width: 0; }
  .date-francais { display: none; }
  .message .francais { font-size: .85rem; }
}

@media (max-width: 24rem) {
  .temps { flex-wrap: wrap; }
  .vitesse { order: 3; flex-basis: 100%; }
  .vitesse output { margin-top: -.5rem; }
}

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