/* =========================================================
   VARIABLES
========================================================= */
:root{
  --border: rgba(15,23,32,.16);
  --editor-bg: #0b0f14;
  --editor-panel: #0f1720;
  --editor-text: #e5e7eb;
  --editor-muted: #94a3b8;
  --header-bg: #0c1021;
  --header-border: rgba(255,255,255,0.1);
  --preview-height: 35vh;
  --gap: 1vw;
}

#endScreen{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:6vw;
  background:#fff;
  z-index:100000;
}
#endScreen .end-inner{
  max-width:900px;
  text-align:center;
}
#endScreen .end-title{
  font-size:2.5em;
  font-weight:700;
  line-height:1.05em;
  color:#000;
  letter-spacing:-.02em;
}
#endScreen .end-text{
  margin-top:.6em;
  font-size:1.5em;
  font-weight:700;
  color:#000;
}

body.show-end .frame{ display:none !important; }
body.show-end #endScreen{ display:flex !important; }

#final_emoji{
  display:inline-block;
  position:relative;
  top:-12px;
  transform-origin:center;
  will-change:transform;
  animation: shake 3s linear forwards;
  font-size:5em;
}

@keyframes shake{
  0%{transform:scale(1.2) translate(0,0);}
  10%{transform:scale(1.2) translate(-3px,2px);}
  20%{transform:scale(1.2) translate(3px,-2px);}
  30%{transform:scale(1.2) translate(-3px,-2px);}
  40%{transform:scale(1.2) translate(3px,2px);}
  50%{transform:scale(1.2) translate(-2px,1px);}
  60%{transform:scale(1.2) translate(2px,-1px);}
  70%{transform:scale(1.2) translate(-2px,-1px);}
  80%{transform:scale(1.2) translate(2px,1px);}
  90%{transform:scale(1.2) translate(-1px,1px);}
  100%{transform:scale(1.2) translate(0,0);}
}




.next-box{
  padding:0;
  border-:0;
  display:grid;
  gap:1vw;
}
.next-box .label{
  font-size:12px;
  opacity:.8;
}
.next-box textarea{
  width:100%;
  min-height:30px;
  resize:vertical;
  border-radius:6px;
  padding:1vw;
  border:0;
  background:rgba(0,0,0,.25);
  color:#000;
  outline:none;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size:13px;
  line-height:1.35em;
}

/* =========================================================
   RESET / BASE
========================================================= */
*{
  box-sizing:border-box;
}

html, body{
  height:100%;
}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  overflow:auto;
}

/* =========================================================
   LAYOUT GLOBAL
========================================================= */
.frame{
  height:100%;
  padding:1vw;
  display:flex;
  justify-content:center;
}

.grid{
  width:100%;
  max-width:1200px;
  height:100%;
  position:relative;
}

/* =========================================================
   CARDS
========================================================= */
.card{
  border-radius:18px;
  overflow:hidden;
}

/* =========================================================
   PREVIEW (FIXED)
========================================================= */
.preview-card{
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:100%;
  max-width:1200px;
  height:var(--preview-height);
  z-index:10;
}

.preview{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}

@media(max-width:768px){
	.preview{
	  margin-top:16px;
	}
}

/* La preview devient redimensionnable */
.preview-card{
  touch-action: none;      /* IMPORTANT pour le drag tactile */
}

/* Indicateur visuel pour l’utilisateur */
.preview-card::after{
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width:40px;
  height:3px;
  border-radius: 4px;
  background: rgba(0,0,0,0.25);
  margin-bottom: 5px;
  cursor: ns-resize;
}


.stage{
  width:100%;
  max-width:880px;
  display:flex;
  justify-content:center;
}

/* 🔑 CONTENEUR TEXTE (PAS FLEX) */
#previewContent{
  white-space: nowrap;
  font-size:1.2em
}

/* =========================================================
   EDITOR
========================================================= */
.editor-card{
  margin-top:calc(var(--preview-height) + var(--gap));
  height:calc(100% - var(--preview-height) - var(--gap));
  display:flex;
  flex-direction:column;
}

/* =========================================================
   CARD HEADER
========================================================= */
.card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  background:var(--header-bg);
  border-bottom:1px solid var(--header-border);
}

.card-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  font-weight:600;
  color:#fff;
}

/* état plein écran preview */
body.preview-full .editor-card{
  display:none !important;
}

body.preview-full .preview-card{
  position:fixed !important;
  inset:0 !important;
  width:100% !important;
  max-width:none !important;
  transform:none !important;
  border-radius:0 !important;
  height:100vh !important;
  height:100dvh !important;
  z-index:99999 !important;
}

/* on masque la poignée de resize */
body.preview-full .preview-card::after{
  display:none !important;
}

/* sécurité iOS */
.btn-action{
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ✅ Animation d’arrivée : 1) preview-card 2) editor-card (avec délai) */
.preview-card,
.editor-card{
  opacity:0;
  transform: translateY(18px);
  transition: opacity .45s ease, transform .45s ease;
  will-change: opacity, transform;
}

/* ordre : la 2e arrive après */
.editor-card{
  transition-delay: .12s;
}

/* état visible */
body.cards-ready .preview-card,
body.cards-ready .editor-card{
  opacity:1;
  transform: translateY(0);
}

/* ✅ supprimez votre anim actuelle sur .grid (ou laissez, mais ça double) */
.grid{
  opacity:1;
  top:auto;
}
/* état initial */
.preview-card{
  opacity:0;
  transform: translateX(-50%) translateY(18px);
  transition: opacity .45s ease, transform .45s ease;
  will-change: opacity, transform;
}

/* editor (pas de translateX ici) */
.editor-card{
  opacity:0;
  transform: translateY(18px);
  transition: opacity .45s ease, transform .45s ease;
  transition-delay: .12s;
}

/* état visible */
body.cards-ready .preview-card{
  opacity:1;
  transform: translateX(-50%) translateY(0);
}

body.cards-ready .editor-card{
  opacity:1;
  transform: translateY(0);
}
/* ✅ évite le slide à gauche au moment du "Masquer" */
body.preview-full .preview-card{
  transition: none !important;
}
body.preview-full .editor-card{
  transition: none !important;
}


/* =========================================================
   BUTTON SYSTEM
========================================================= */
.btn,
.tab,
.btn-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  height:28px;
  padding:0 12px;

  border-radius:999px;
  border:1px solid var(--header-border);
  background:rgba(255,255,255,.06);

  font-size:12px;
  font-weight:600;
  color:#fff;

  cursor:pointer;
  user-select:none;

  transition:
    background .15s ease,
    border-color .15s ease,
    opacity .15s ease;
}

.btn:hover,
.tab:hover,
.btn-action:hover{
  background:rgba(255,255,255,.12);
}

.tab{
  opacity:.6;
}

.tab.active{
  opacity:1;
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.35);
}

.btn-action{
  opacity:.85;
}

.btn-action:hover{
  opacity:1;
}

/* =========================================================
   EDITOR AREA
========================================================= */
.editor-wrap{
  flex:1;
  background:var(--editor-panel);
  overflow:auto;
}

/* =========================================================
   SCROLLBAR
========================================================= */
.editor-wrap::-webkit-scrollbar{
  width:6px;
}
.editor-wrap::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.18);
  border-radius:999px;
}

/* =========================================================
   FAKE SYNTAX HIGHLIGHT
========================================================= */
.codebox{
  flex:1;
  margin:0;
  color:var(--editor-text);
  overflow:auto;
}

#editor{
  display:block;
  min-height:100%;
  padding:0 14px 14px 14px ;
  outline:none;
  white-space:pre;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:16px;
  line-height:1.5;
  caret-color:#fff;
  white-space: break-spaces
}

#emoji a {text-decoration:none!important;  -webkit-tap-highlight-color: transparent;}
#emoji a:active,
#emoji a:focus{
  outline: none;
  background-color: transparent;
}

/* =========================================================
   SYNTAX COLORS
========================================================= */
.t-tag, .t-punct{ color:#ff2bd6; }
.t-attr{ color:#ffd166; }      /* attribut */
.t-str{ color:#2dff9d; }       /* valeur */
.t-sel{ color:#ff2bd6; }       /* sélecteur CSS */
.t-prop{ color:#5ee7ff; }      /* propriété CSS */
.t-val{ color:#2dff9d; }       /* valeur CSS */
/* .t-punct{ color:#94a3b8; }  */