/* ================================================================
   apprendre.css  —  Style de l'editeur d'apprentissage (/editor)
   ----------------------------------------------------------------
   Style neo-brutaliste, coherent avec le site Francescosun :
   creme, noir, jaune, rose, bordures epaisses, ombres portees.

   Totalement separe de editor.css (qui reste dedie a /coder).
   Cette feuille est AUTONOME : elle charge elle-meme ses polices.
   ================================================================ */


:root{
  --ed-cream:       #fafaf5;
  --ed-black:       #0a0a0a;
  --ed-yellow:      #f7f330;
  --ed-yellow-soft: #fef9a8;
  --ed-pink:        #ff4d8d;
  --ed-green:       #2dff9d;
  --ed-grey:        #6b6b6b;
  --ed-white:       #ffffff;
  --ed-code-bg:     #0f1720;
  --ed-radius:      14px;
}

/* ===== PAGE ===== */
.ed-page{
  width: 92%;
  max-width: 760px;
  margin: 0 auto;
  padding-bottom: 48px;
  /* police appliquee ici : la page editor n'herite plus du Times */
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  color: var(--ed-black);
}

/* ===== EN-TETE ===== */
.ed-head{
  margin-bottom: 24px;
}

.ed-title{
  font-family: 'Archivo', system-ui, -apple-system, Arial, sans-serif;
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}

.ed-intro{
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--ed-black);
}

/* ===== CARTES (apercu + editeur) ===== */
.ed-preview-card,
.ed-editor-card{
  border: 2.5px solid var(--ed-black);
  border-radius: var(--ed-radius);
  box-shadow: 4px 4px 0 var(--ed-black);
  background: var(--ed-white);
  overflow: hidden;
  margin-bottom: 22px;
}

/* barre de titre des cartes */
.ed-card-bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: var(--ed-yellow);
  border-bottom: 2.5px solid var(--ed-black);
}

.ed-card-label{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ===== APERCU ===== */
.ed-preview{
  min-height: 180px;
  padding: 18px;
  background: var(--ed-white);
  color: var(--ed-black);
  overflow: auto;
}

/* ===== ONGLETS HTML / CSS ===== */
.ed-tabs{
  display: flex;
  gap: 8px;
}

.ed-tab{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 6px 14px;
  border: 2px solid var(--ed-black);
  border-radius: 999px;
  background: var(--ed-white);
  color: var(--ed-black);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.ed-tab:hover{
  background: var(--ed-yellow-soft);
}

.ed-tab.is-active{
  background: var(--ed-black);
  color: var(--ed-cream);
}

/* ===== BOUTONS D'ACTION ===== */
.ed-actions{
  display: flex;
  gap: 8px;
}

.ed-btn{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 6px 14px;
  border: 2px solid var(--ed-black);
  border-radius: 999px;
  background: var(--ed-white);
  color: var(--ed-black);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.ed-btn:hover{
  background: var(--ed-yellow-soft);
}

.ed-btn:active{
  transform: translateY(1px);
}

/* bouton "Telecharger" : accent vert */
.ed-btn-go{
  background: var(--ed-green);
}

.ed-btn-go:hover{
  background: var(--ed-green);
  filter: brightness(0.95);
}

/* ===== ZONE DE CODE : habillage de CodeMirror ===== */
.ed-code-wrap{
  background: var(--ed-code-bg);
}

/* CodeMirror occupe toute la largeur, hauteur confortable */
.ed-code-wrap .CodeMirror{
  height: 280px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono", "Courier New", monospace;
  font-size: 15px;
  line-height: 1.6;
}

@media (max-width: 520px){
  .ed-code-wrap .CodeMirror{
    height: 220px;
    font-size: 14px;
  }
}