/* ==========================================================================
   SYSTEME DE MARIAGE v2XX.0 — feuille de style unique
   Minitel (structure) + Matrix (fond) + Mission Impossible (ton)
   Aucune police externe, aucun appel reseau : tout est local.
   ========================================================================== */

:root {
  --noir:      #000000;
  --bleu:      #0000aa;   /* bandeau Teletel */
  --cyan:      #00c8ff;   /* texte courant */
  --cyan-fonce:#0077a0;
  --ambre:     #ffb000;   /* valeurs, mises en avant */
  --vert:      #33ff66;   /* Matrix */
  --rouge:     #ff2b2b;   /* alertes */
  --blanc:     #e8f6ff;

  --mono: ui-monospace, "SFMono-Regular", "DejaVu Sans Mono", "Liberation Mono",
          "Courier New", monospace;
}

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--noir);
  color: var(--cyan);
  font-family: var(--mono);
  font-size: clamp(13px, 1.15vw + 10px, 17px);
  line-height: 1.55;
  overflow-x: hidden;
  min-height: 100%;
  text-shadow: 0 0 6px currentColor;
  -webkit-text-size-adjust: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0 0 env(safe-area-inset-bottom);
}

/* --- Couche 0 : pluie Matrix ------------------------------------------- */
#matrix {
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: .12;
  pointer-events: none;
}

/* --- Couche 9 : verre du tube cathodique -------------------------------- */
.crt {
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
}
.crt::before {                                  /* lignes de balayage */
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0)   0px,
    rgba(0, 0, 0, 0)   2px,
    rgba(0, 0, 0, .28) 3px,
    rgba(0, 0, 0, .28) 4px
  );
}
.crt::after {                                   /* vignettage + halo */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 200, 255, .05) 0%,
    rgba(0, 0, 0, 0)      45%,
    rgba(0, 0, 0, .75)   100%
  );
  animation: flicker 6s infinite steps(1);
}

@keyframes flicker {
  0%, 96%, 100% { opacity: 1; }
  97%           { opacity: .82; }
  98%           { opacity: 1; }
  99%           { opacity: .9; }
}

/* --- Structure de l'ecran ---------------------------------------------- */
.ecran {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 clamp(12px, 3vw, 28px);
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
/* Ecrans courts (login, chargement) : on centre verticalement. */
.ecran.centre { justify-content: center; }

/* Bandeau Minitel */
.bandeau {
  position: relative;
  z-index: 1;
  background: var(--bleu);
  color: var(--blanc);
  border-bottom: 2px solid var(--cyan);
  padding: .5rem clamp(12px, 3vw, 28px);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
  align-items: baseline;
  letter-spacing: .12em;
  font-size: .85em;
  text-transform: uppercase;
}
.bandeau strong { font-weight: 700; letter-spacing: .18em; }
.bandeau span   { opacity: .8; }

/* Barre de touches de fonction, facon Minitel */
.piedpage {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  margin-top: auto;
  border-top: 1px solid var(--cyan-fonce);
  padding: .6rem clamp(12px, 3vw, 28px) 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .9rem;
  font-size: .74em;
  letter-spacing: .1em;
  color: var(--cyan-fonce);
  text-transform: uppercase;
}
.touche {
  border: 1px solid currentColor;
  padding: .1rem .45rem;
  white-space: nowrap;
}

/* --- Blocs de contenu --------------------------------------------------- */
.bloc {
  padding: clamp(1.2rem, 4vw, 2.4rem) 0;
}

h1 {
  font-size: clamp(1.15rem, 3.5vw, 1.8rem);
  letter-spacing: .1em;
  margin: 0 0 .3rem;
  color: var(--ambre);
  text-transform: uppercase;
}
h2 {
  font-size: clamp(.95rem, 2.4vw, 1.2rem);
  letter-spacing: .16em;
  margin: 0 0 1.4rem;
  color: var(--cyan-fonce);
  text-transform: uppercase;
  font-weight: 400;
}

.sep {
  border: 0;
  border-top: 1px dashed var(--cyan-fonce);
  margin: 1.4rem 0;
}

.ambre { color: var(--ambre); }
.vert  { color: var(--vert); }
.rouge { color: var(--rouge); }
.discret { color: var(--cyan-fonce); }

/* Curseur bloc clignotant */
.curseur {
  display: inline-block;
  width: .6em;
  background: currentColor;
  animation: blink 1s steps(1) infinite;
}
.curseur::before { content: "\00a0"; }
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* --- Formulaire de login ------------------------------------------------ */
.invite {
  font-size: clamp(1rem, 2.8vw, 1.25rem);
  margin: 0 0 1.4rem;
  color: var(--cyan);
}

.champ {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1.2rem;
}
.champ label {
  color: var(--cyan-fonce);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .85em;
}
input[type="password"], input[type="text"] {
  flex: 1 1 10ch;
  min-width: 0;
  max-width: 14ch;
  background: rgba(0, 200, 255, .06);
  border: 0;
  border-bottom: 2px dashed var(--cyan);
  color: var(--ambre);
  font-family: inherit;
  font-size: clamp(1.1rem, 4vw, 1.6rem);
  letter-spacing: .5em;
  padding: .3rem .1rem .3rem .4rem;
  text-shadow: 0 0 8px currentColor;
  caret-color: var(--ambre);
}
input:focus {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  background: rgba(0, 200, 255, .12);
}

.bouton {
  display: inline-block;
  background: var(--bleu);
  color: var(--blanc);
  border: 2px solid var(--cyan);
  font-family: inherit;
  font-size: 1em;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .5rem 1.4rem;
  cursor: pointer;
  text-shadow: 0 0 6px currentColor;
  transition: background .15s, color .15s;
}
a.bouton { text-decoration: none; }   /* pages d'erreur : le bouton est un lien */
.bouton:hover, .bouton:focus-visible {
  background: var(--cyan);
  color: var(--noir);
  outline: none;
}
.bouton:active { transform: translateY(1px); }

/* Message d'erreur */
.message {
  min-height: 1.6em;
  margin-top: 1.2rem;
  color: var(--rouge);
  letter-spacing: .06em;
  font-size: .92em;
}

.secousse { animation: shake .4s; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-8px); }
  40%      { transform: translateX(7px); }
  60%      { transform: translateX(-5px); }
  80%      { transform: translateX(3px); }
}

/* --- Extinction du tube (transition de page) ---------------------------- */
.extinction {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: var(--blanc);
  opacity: 0;
  pointer-events: none;
}
.extinction.on {
  animation: tube-off 1.1s ease-in forwards;
}
@keyframes tube-off {
  0%   { opacity: 0;   transform: scaleY(1); }
  12%  { opacity: .85; transform: scaleY(1); }
  30%  { opacity: .35; transform: scaleY(1); }
  60%  { opacity: 1;   transform: scaleY(.012); }
  85%  { opacity: 1;   transform: scale(.012, .012); }
  100% { opacity: 0;   transform: scale(0, 0); }
}

/* --- Ecran de chargement ------------------------------------------------ */
.jauge {
  font-size: clamp(.7rem, 2.6vw, 1.15rem);
  letter-spacing: .04em;
  color: var(--vert);
  white-space: nowrap;
  overflow-x: auto;
  margin: 1.4rem 0 .4rem;
}
.pourcent {
  color: var(--ambre);
  font-size: clamp(1.6rem, 7vw, 3rem);
  letter-spacing: 0;
  line-height: 1.1;
  margin: .2rem 0 .8rem;
}
.pourcent .unite {
  font-size: .45em;
  margin-left: .15em;
  vertical-align: .55em;
}
.etape {
  color: var(--cyan);
  letter-spacing: .08em;
  min-height: 1.5em;
  text-transform: uppercase;
  font-size: .9em;
  padding-bottom: 1.2rem;
  border-bottom: 1px dashed var(--cyan-fonce);
}

.journal {
  margin: 1rem 0 0;
  padding: 0;
  /* le defilement coupe la ligne du haut en plein milieu : on la fait
     disparaitre en fondu plutot qu'au couteau */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 2em);
          mask-image: linear-gradient(to bottom, transparent 0, #000 2em);
  font-size: .82em;
  color: var(--vert);
  list-style: none;
  /* hauteur figee : sans cela, chaque nouvelle ligne recentrerait le bloc
     et ferait sautiller le titre pendant les 30 secondes. */
  height: clamp(9rem, 34vh, 20rem);
  overflow: hidden;
}
.journal li {
  opacity: 0;
  animation: apparait .25s forwards;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.journal li .horo { color: var(--cyan-fonce); margin-right: .8em; }
@keyframes apparait { to { opacity: 1; } }

/* --- Dossier de mission ------------------------------------------------- */
.dossier {
  margin: 0;
  border-left: 3px solid var(--ambre);
  padding-left: clamp(.8rem, 3vw, 1.4rem);
}
.dossier .ligne {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1ch;
  margin-bottom: .55rem;
  align-items: baseline;
}
.dossier dt {
  color: var(--cyan-fonce);
  letter-spacing: .1em;
  font-size: .8em;
  text-transform: uppercase;
  flex: 0 0 auto;
  min-width: 22ch;   /* aligne les valeurs, meme derriere « DATE DE L'OPERATION » */
}
.dossier dd {
  margin: 0;
  color: var(--ambre);
  flex: 1 1 20ch;
  word-break: break-word;
}

/* Sur telephone, le libelle passe au-dessus de la valeur : sinon la colonne
   de gauche mange la moitie de l'ecran et tout se decoupe en confettis. */
@media (max-width: 30rem) {
  .dossier dt { min-width: 100%; margin-bottom: .1rem; }
  .dossier .ligne { margin-bottom: .9rem; }
}

/* Tampon MISSION ACCEPTEE */
/* La rotation fait deborder la boite : d'ou les marges genereuses,
   sans quoi le tampon vient mordre sur la phrase de reponse. */
.tampon {
  margin: clamp(2.4rem, 8vw, 3.6rem) 0 clamp(2rem, 6vw, 3rem);
  text-align: center;
  opacity: 0;
}
.tampon.frappe { animation: frappe .55s cubic-bezier(.2, 1.5, .4, 1) forwards; }
.tampon .cadre {
  display: inline-block;
  border: .28em solid var(--rouge);
  color: var(--rouge);
  padding: .35em .8em;
  font-size: clamp(1.05rem, 5.2vw, 2.2rem);
  font-weight: 700;
  letter-spacing: .12em;
  transform: rotate(-7deg);
  text-shadow: 0 0 14px currentColor;
  box-shadow: 0 0 20px rgba(255, 43, 43, .45), inset 0 0 20px rgba(255, 43, 43, .25);
}
@keyframes frappe {
  0%   { opacity: 0; transform: scale(3.2) rotate(14deg); filter: blur(6px); }
  70%  { opacity: 1; transform: scale(.94) rotate(-2deg); filter: blur(0); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

.reponse {
  text-align: center;
  color: var(--blanc);
  font-size: clamp(1.05rem, 4vw, 1.6rem);
  letter-spacing: .04em;
  margin: 1.2rem 0 .4rem;
}
.signature {
  text-align: center;
  color: var(--cyan-fonce);
  font-size: .88em;
  letter-spacing: .06em;
}

.autodestruction {
  text-align: center;
  margin: 2rem 0 .5rem;
  color: var(--rouge);
  letter-spacing: .2em;
  font-size: clamp(.95rem, 3.2vw, 1.3rem);
  min-height: 2.4em;
}
.compte {
  display: block;
  font-size: clamp(2.4rem, 12vw, 5rem);
  line-height: 1.1;
  color: var(--rouge);
}
.pulse { animation: pulse .9s ease-out; }
@keyframes pulse {
  0%   { transform: scale(1.6); opacity: 0; }
  40%  { transform: scale(1);   opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}

.flash-blanc {
  position: fixed;
  inset: 0;
  z-index: 15;
  background: var(--blanc);
  opacity: 0;
  pointer-events: none;
}
.flash-blanc.on { animation: flash .5s ease-out; }
@keyframes flash {
  0%   { opacity: .9; }
  100% { opacity: 0; }
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  justify-content: center;
  margin: 2rem 0 1rem;
}

/* --- Sobriete pour qui la demande --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  #matrix { display: none; }
  .crt::before { display: none; }
  .journal li { opacity: 1; }
  /* .tampon garde son opacite 0 : c'est l'animation (raccourcie a 0,01 ms,
     mais toujours en "forwards") qui le revele au bon moment. */
}