/* ============================================================
   ULY — Feuille de style globale
   ============================================================
   Organisation :
     1. Import & Variables
     2. Reset & Base
     3. Fonds (bg-grid, bg-vignette)
     4. Navigation
     5. Footer
     6. Composants communs aux outils
     7. Page d'accueil (index)
     8. Page Stellae
     9. Page Séquence
    10. Page Léthé
    11. Page Texte
    12. Page Aléa (animation chiffres)
    13. Responsive
   ============================================================ */


/* ══════════════════════════════════════════════════════════════
   1. IMPORT & VARIABLES
══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@200;300;400;500&display=swap');

:root {
  --gold:       #e8c96e;  /* or vif — titres, valeurs actives */
  --gold-mid:   #c9a84c;  /* or moyen — texte courant */
  --gold-dark:  #ba9e4f;  /* or sombre — texte secondaire */
  --bg:         #06091c;  /* fond outil */
  --bg-alt:     #07091b;  /* fond grille */
  --bg-home:    #050d1a;  /* fond accueil */

  --fade-duration: 1.2s;  /* surcharger via JS si besoin */
}


/* ══════════════════════════════════════════════════════════════
   2. RESET & BASE
══════════════════════════════════════════════════════════════ */

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

body {
  font-family: 'Roboto', sans-serif;
  background: var(--bg);
  color: var(--gold-mid);
  min-height: 100vh;
  position: relative;
  padding-bottom: 60px;
}

/* Accueil : layout flex pleine hauteur, fond différent
   Ciblé via .uly-page (classe unique à l'index) — pas besoin de body class. */
html:has(.uly-page),
html:has(.uly-page) body {
  height: 100%;
}

html:has(.uly-page) body {
  background: var(--bg-home);
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
}

/* Stellae : grid pour placer nav / main / footer */
body.page-stellae {
  padding-bottom: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
}


/* ══════════════════════════════════════════════════════════════
   3. FONDS
══════════════════════════════════════════════════════════════ */

.bg-grid {
  position: fixed;
  inset: 0;
  background-color: var(--bg-alt);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}

/* Sur Stellae le bg-grid doit rester dans la bonne row */
body.page-stellae .bg-grid,
body.page-stellae .bg-vignette {
  grid-row: 1;
}

.bg-vignette {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, var(--bg) 100%);
  pointer-events: none;
  z-index: 1;
}


/* ══════════════════════════════════════════════════════════════
   4. NAVIGATION (Stellae uniquement pour l'instant)
══════════════════════════════════════════════════════════════ */

.uly-nav {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 60px;
  border-bottom: 0.5px solid rgba(201,168,76,0.12);
}

.uly-logo {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
}

.nav-tool-label {
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(201,168,76,0.3);
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-tool-label::before {
  content: '';
  display: block;
  width: 20px;
  height: 0.5px;
  background: rgba(201,168,76,0.3);
}


/* ══════════════════════════════════════════════════════════════
   5. FOOTER
══════════════════════════════════════════════════════════════ */

.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding: 20px 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-copy {
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.2em;
  color: rgba(201,168,76,0.25);
  text-transform: uppercase;
}

.footer-nav {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
}

.footer-nav a {
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(201,168,76,0.35);
  text-decoration: none;
  transition: color 0.3s;
}

.footer-nav a:hover { color: var(--gold); }

.footer-sep {
  color: rgba(201,168,76,0.12);
  font-weight: 200;
  font-size: 12px;
}


/* ══════════════════════════════════════════════════════════════
   6. COMPOSANTS COMMUNS AUX OUTILS
══════════════════════════════════════════════════════════════ */

/* ── Zone principale outil (centrage vertical) ──
   Classe partagée par les pages Séquence, Léthé, Texte, Contemplation. */
.septium-main {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: calc(100vh - 60px);
  padding: 40px;
}

/* ── Nom de page (grand, fané, commun à la plupart des outils) ──
   NOTE : sur Stellae ce même texte utilise .page-name-og (positionné
   en absolu). Sur les autres pages outil, .page-name est en flux normal. */
.page-name {
  font-size: 19px;
  font-weight: 300;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold-mid);
  opacity: 0.5;
  margin-bottom: 4px;
}

/* ── Zone de saisie centrée ── */
#saisie {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 360px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ── Champs de saisie (identiques sur Séquence, Léthé, Texte, Aléa) ── */
#inputSequence,
#champNombre,
#userInput {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 0.5px solid rgba(201,168,76,0.3);
  padding: 12px 0;
  text-align: center;
  font-family: 'Roboto', sans-serif;
  font-size: 2.5em;
  font-weight: 200;
  letter-spacing: 0.4em;
  color: var(--gold);
  outline: none;
  transition: border-color 0.3s;
}

#inputSequence:focus,
#champNombre:focus,
#userInput:focus {
  border-bottom-color: rgba(201,168,76,0.7);
}

/* ── Astuce sous le champ ── */
.input-hint {
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.12em;
  color: var(--gold-mid);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Variante semi-transparente (page Séquence) */
.input-hint.faded {
  opacity: 0.5;
}

.input-hint a {
  color: rgba(201,168,76,0.6);
  text-decoration: none;
  border-bottom: 0.5px solid rgba(201,168,76,0.3);
  transition: color 0.3s;
}

.input-hint a:hover { color: var(--gold); }

/* ── Message de validation (dans le footer) ── */
.input-error {
  display: none;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(201,168,76,0.35);
  pointer-events: none;
}

.input-error.visible {
  display: inline;
  animation: tooltip-show 2.5s ease forwards;
}

@keyframes tooltip-show {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ── Fondu générique ── */
.fade-in {
  opacity: 0;
  transition: opacity 0.7s ease-in-out;
}

.fade-in.show { opacity: 1; }


/* ══════════════════════════════════════════════════════════════
   7. PAGE D'ACCUEIL (index)
══════════════════════════════════════════════════════════════ */

.uly-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  color: var(--gold-mid);
  position: relative;
  overflow: hidden;
}

/* Grille de cartes (6 colonnes, rangées de hauteur égale) */
.uly-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 1fr;
  gap: 0;
  position: relative;
  z-index: 10;
  overflow: hidden;
}

.uly-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 36px 40px 36px;
  background: var(--bg-home);
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  min-height: 220px;
  transition: background 0.5s;
}

/* Gradients radiaux par carte (rotation sur 5 patterns) */
.uly-card:nth-child(5n+1) { background: radial-gradient(ellipse at   0%   0%, rgba(201,168,76,0.18) 0%, var(--bg-home) 70%); }
.uly-card:nth-child(5n+2) { background: radial-gradient(ellipse at 100%   0%, rgba(201,168,76,0.09) 0%, var(--bg-home) 70%); }
.uly-card:nth-child(5n+3) { background: radial-gradient(ellipse at   0% 100%, rgba(201,168,76,0.14) 0%, var(--bg-home) 70%); }
.uly-card:nth-child(5n+4) { background: radial-gradient(ellipse at 100% 100%, rgba(201,168,76,0.07) 0%, var(--bg-home) 70%); }
.uly-card:nth-child(5n+5) { background: radial-gradient(ellipse at  50%  50%, rgba(201,168,76,0.11) 0%, var(--bg-home) 70%); }

.uly-card:hover { background: rgba(201,168,76,0.06) !important; }

.card-num {
  font-size: 10px;
  letter-spacing: 0.25em;
  color: rgba(201,168,76,0.2);
  margin-bottom: 20px;
}

.card-title {
  font-size: 1.55em;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #d4aa52;
  margin: 0 0 10px 0;
}

.card-desc {
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.09em;
  color: rgba(201,168,76,0.38);
  margin: 0;
  line-height: 1.6em;
}


/* ══════════════════════════════════════════════════════════════
   8. PAGE STELLAE (générateur de codes éphémères)
══════════════════════════════════════════════════════════════ */

.stellae-main {
  min-height: calc(100vh - 120px);
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
  text-align: center;
}

.tool-eyebrow {
  font-size: 10px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(201,168,76,0.3);
  margin-bottom: 16px;
}

.tool-title {
  font-size: 2.8em;
  font-weight: 200;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
  line-height: 1;
}

.tool-subtitle {
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(201,168,76,0.3);
  margin-bottom: 70px;
}

/* Petit label de page (11px, dans le flux) */
.page-name-small {
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(201,168,76,0.3);
  margin-bottom: 4px;
}

/* Grand nom de page positionné en absolu (Stellae) */
.page-name-og {
  font-size: 19px;
  font-weight: 300;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold-mid);
  opacity: 0.5;
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translateX(-50%);
}

/* Compte à rebours */
#countdown-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 280px;
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#progress-bar-wrap {
  width: 100%;
  height: 0.5px;
  background: rgba(201,168,76,0.15);
  position: relative;
  overflow: visible;
}

#progress-bar {
  height: 100%;
  width: 100%;
  background: rgba(201,168,76,0.7);
  transition: width 1s linear;
  position: relative;
  overflow: visible;
}

#progress-bar::after {
  content: '';
  position: absolute;
  right: -2px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
}

#countdown-text {
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.06em;
  line-height: 1.7em;
  max-width: 280px;
}

/* Affichage du code */
#code-display {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

#code-display.show { display: flex; }

#code {
  font-size: 5em;
  font-weight: 300;
  letter-spacing: 0.5em;
  color: var(--gold);
  opacity: 0;
  transition: opacity var(--fade-duration, 1.2s);
  padding-left: 0.5em;
  padding-top: 5%;
}

#code.visible { opacity: 1; }

.code-label {
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(201,168,76,0.25);
}

.regen-btn {
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(201,168,76,0.4);
  border: 0.5px solid rgba(201,168,76,0.2);
  padding: 10px 20px;
  cursor: pointer;
  transition: all 0.3s;
  background: none;
  font-family: 'Roboto', sans-serif;
}

.regen-btn:hover {
  color: var(--gold);
  border-color: rgba(201,168,76,0.5);
  background: rgba(201,168,76,0.04);
}


/* ══════════════════════════════════════════════════════════════
   9. PAGE SÉQUENCE (vérification de séquence)
══════════════════════════════════════════════════════════════ */

/* #inputSequence hérite des règles communes de la section 6 */

#outputResults {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 60px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 40px;
  pointer-events: none;
}

#outputResults div {
  font-size: 2em;
  font-weight: 200;
  letter-spacing: 0.4em;
  color: var(--gold);
  line-height: 1.4em;
  text-align: center;
}


/* ══════════════════════════════════════════════════════════════
   10. PAGE LÉTHÉ (code qui s'efface)
   Requiert <body class="page-lethe"> pour éviter le conflit
   avec #resultat de la page Aléa (section 12).
══════════════════════════════════════════════════════════════ */

/* #champNombre hérite des règles communes de la section 6 */

body.page-lethe #resultat {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 40px;
  text-align: center;
}

body.page-lethe #resultat.actif {
  display: flex;
}

.lethe-code {
  font-size: 5em;
  font-weight: 300;
  letter-spacing: 0.5em;
  color: var(--gold);
  line-height: 1;
  opacity: 1;
  transition: opacity var(--fade-duration, 15s) linear;
  margin-left: 20px;
}

.lethe-code.fading { opacity: 0; }

.lethe-text {
  max-width: 540px;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.05em;
  line-height: 1.8;
  color: var(--gold-dark);
}


/* ══════════════════════════════════════════════════════════════
   11. PAGE TEXTE (affichage texte libre)
══════════════════════════════════════════════════════════════ */

/* #userInput hérite des règles communes de la section 6 */

#output-wrap {
  display: none;
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 20;
  padding: 0;
  max-width: 97%;
}

#output-wrap.show { display: flex; }

#output {
  font-size: 0.95em;
  font-weight: 300;
  letter-spacing: 0.25em;
  line-height: 1.6em;
  color: rgba(201,168,76,0.7);
  text-align: left;
  opacity: 0;
  transition: opacity 0.5s;
  word-break: keep-all;
  overflow-wrap: normal;
  white-space: pre-wrap;
}

#output.visible { opacity: 1; }


/* ══════════════════════════════════════════════════════════════
   12. PAGE CONTEMPLATION (animation chiffres)
   Requiert <body class="page-contemplation"> pour éviter le conflit
   avec #resultat de la page Léthé (section 10).
══════════════════════════════════════════════════════════════ */

/* #champNombre hérite des règles communes de la section 6 */

body.page-contemplation #resultat {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.page-contemplation #resultat:empty { display: none; }

.animation-chiffre {
  font-size: 22em;
  font-weight: 500;
  color: var(--gold);
  opacity: 0;
  transition: opacity 0.5s;
  line-height: 1;
  letter-spacing: 0;
  position: absolute;
}


/* ══════════════════════════════════════════════════════════════
   13. RESPONSIVE
══════════════════════════════════════════════════════════════ */

@media (max-width: 800px) {
  /* Navigation & footer */
  .uly-nav  { padding: 18px 24px; }
  .footer   { padding: 18px 24px; }

  /* Stellae */
  .tool-title { font-size: 2em; }
  #code       { font-size: 3em; }

  /* Séquence */
  #inputSequence     { font-size: 2em; }
  #outputResults div { font-size: 1.4em; }

  /* Léthé */
  .lethe-code { font-size: 5em; }
  .lethe-text { font-size: 11px; letter-spacing: 0.14em; }

  /* Texte */
  #userInput   { font-size: 2em; }
  #output      { font-size: 0.75em; padding: 0 20px; }
  #output-wrap { top: 15px; left: 0; }

  /* Contemplation */
  #champNombre        { font-size: 2em; }
  .animation-chiffre  { font-size: 15em; }
}

@media only screen and (max-width: 700px) {
  /* Accueil : grille en colonne unique */
  .uly-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .uly-card { grid-column: span 1 !important; min-height: 160px; }
}