/* ============================================================
   TchatMagique · ParrotX — UniBool Inc. 2026
   Héritage 2017 conservé : violet néon #B026FF, Palatino,
   colonne de 760 px, ombre intérieure de la boîte d'origine.
   ============================================================ */

:root{
  --noir:        #0a0a0f;   /* fond UniBool */
  --nuit:        #12121c;   /* boîte */
  --neon:        #b026ff;   /* LE violet du ParrotX original */
  --pervenche:   #9999ff;   /* champ SMSBAR0 original */
  --creme:       #ffffcc;   /* texte du champ original */
  --blanc:       #f4f2fa;
  --gris:        #8e8aa0;
  --display: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --corps:   Cambria, Georgia, "Times New Roman", serif;
  --util:    ui-monospace, "Cascadia Mono", Consolas, monospace;
}

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

html,body{ height:100%; }

body{
  background: var(--noir);
  background-image: radial-gradient(ellipse 90% 60% at 50% -10%,
                    rgba(176,38,255,.14), transparent 60%);
  color: var(--blanc);
  font-family: var(--corps);
  display:flex; align-items:center; justify-content:center;
  padding: 24px 12px;
}

/* ---------- la cage (la boîte de 760px de 2017) ---------- */
.cage{
  width:100%;
  max-width: 760px;
  background: var(--nuit);
  border: 1px solid rgba(176,38,255,.45);
  border-radius: 14px;
  box-shadow:
    inset 2px 2px 6px rgba(0,0,0,.55),           /* l'ombre inset d'origine */
    0 0 42px rgba(176,38,255,.12),
    0 0 4px  rgba(176,38,255,.35);
  padding: 28px clamp(16px, 4vw, 40px) 20px;
}

/* ---------- en-tête ---------- */
.entete{ text-align:center; margin-bottom: 22px; }

.titre{
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2rem, 6vw, 3rem);
  letter-spacing: .02em;
}
.titre-magique{
  color: var(--neon);
  text-shadow: 0 0 18px rgba(176,38,255,.55);
}
.sous-titre{
  margin-top: 6px;
  font-family: var(--util);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gris);
}

/* ---------- la mémoire : 7 fentes qui s'éteignent ---------- */
.memoire{
  min-height: 308px;
  display:flex; flex-direction:column; justify-content:flex-end;
  gap: 8px;
  padding: 14px 4px;
  border-top: 1px solid rgba(153,153,255,.18);
  border-bottom: 1px solid rgba(153,153,255,.18);
}

.memoire-ligne{
  font-size: 1.05rem;
  line-height: 1.45;
  padding-left: 14px;
  border-left: 2px solid var(--neon);
  word-wrap: break-word;
  overflow-wrap: anywhere;
  animation: apparaitre .45s ease both;
}
/* la plus récente est en bas, pleine lumière ; le passé s'éteint vers le haut */
.memoire-ligne:nth-last-child(1){ opacity:1;   }
.memoire-ligne:nth-last-child(2){ opacity:.85; }
.memoire-ligne:nth-last-child(3){ opacity:.70; }
.memoire-ligne:nth-last-child(4){ opacity:.56; }
.memoire-ligne:nth-last-child(5){ opacity:.42; }
.memoire-ligne:nth-last-child(6){ opacity:.30; }
.memoire-ligne:nth-last-child(7){ opacity:.20; border-left-color: transparent; }

.memoire-heure{
  font-family: var(--util);
  font-size: .68rem;
  color: var(--pervenche);
  margin-right: 8px;
  opacity:.9;
}

.memoire-vide{
  color: var(--gris);
  font-style: italic;
  text-align:center;
  padding-bottom: 130px;
}

@keyframes apparaitre{
  from{ transform: translateY(6px); opacity:0; }
}

/* ---------- le pouls (Timer1 rendu visible) ---------- */
.pouls{
  height: 2px;
  background: rgba(153,153,255,.12);
  border-radius: 2px;
  margin: 14px 0 18px;
  overflow:hidden;
}
.pouls-barre{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, var(--pervenche), var(--neon));
  transition: width .3s linear;
}

/* ---------- la voix ---------- */
.voix{ display:flex; gap:10px; }

.voix-champ{
  flex:1;
  font-family: var(--corps);
  font-size: 1.05rem;
  color: var(--creme);
  background: rgba(153,153,255,.14);
  border: 1px solid rgba(153,153,255,.4);
  border-radius: 9px;
  padding: 12px 14px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.voix-champ::placeholder{ color: rgba(255,255,204,.45); }
.voix-champ:focus{
  border-color: var(--neon);
  box-shadow: 0 0 0 3px rgba(176,38,255,.22);
}

.voix-envoyer{
  font-family: var(--util);
  font-size: .85rem;
  letter-spacing: .08em;
  color: var(--blanc);
  background: linear-gradient(160deg, var(--neon), #7a12c4);
  border: none;
  border-radius: 9px;
  padding: 0 20px;
  cursor: pointer;
  transition: transform .12s, box-shadow .2s;
}
.voix-envoyer:hover{ box-shadow: 0 0 18px rgba(176,38,255,.5); }
.voix-envoyer:active{ transform: scale(.97); }
.voix-envoyer:focus-visible{
  outline: 2px solid var(--creme); outline-offset: 2px;
}

.voix-piger{
  font-size: 1.25rem;
  background: transparent;
  border: 1px solid rgba(153,153,255,.4);
  border-radius: 9px;
  padding: 0 14px;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .12s;
}
.voix-piger:hover{
  border-color: var(--pervenche);
  box-shadow: 0 0 14px rgba(153,153,255,.4);
}
.voix-piger:active{ transform: scale(.94); }
.voix-piger:focus-visible{ outline: 2px solid var(--pervenche); outline-offset: 2px; }

/* l'écho pigé : une voix du passé, hors des 7 fentes */
.memoire-echo{
  font-size: 1.02rem;
  line-height: 1.45;
  padding: 8px 12px;
  margin-top: 4px;
  border: 1px dashed rgba(153,153,255,.5);
  border-radius: 8px;
  color: var(--pervenche);
  font-style: italic;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  animation: apparaitre .45s ease both;
}

.voix-note{
  margin-top: 10px;
  font-size: .8rem;
  color: var(--gris);
  text-align:center;
}

/* ---------- pied ---------- */
.pied{
  margin-top: 26px;
  display:flex; justify-content:space-between; align-items:baseline;
  gap: 10px; flex-wrap: wrap;
  font-size: .72rem;
  color: var(--gris);
}
.pied em{ color: var(--pervenche); font-style: normal; }
.pied-mode{
  font-family: var(--util);
  border: 1px solid rgba(153,153,255,.35);
  border-radius: 20px;
  padding: 2px 10px;
}

/* ---------- utilitaires ---------- */
.visually-hidden{
  position:absolute; width:1px; height:1px;
  clip-path: inset(50%); overflow:hidden; white-space:nowrap;
}

@media (prefers-reduced-motion: reduce){
  .memoire-ligne{ animation:none; }
  .pouls-barre{ transition:none; }
}

@media (max-width: 480px){
  .voix{ flex-direction: column; }
  .voix-envoyer{ padding: 12px; }
  .memoire{ min-height: 260px; }
}