/* CFUP-5 — GeneratePress — V10.8 */
/* Design CFUP sombre + bleu primaire */

#cfup5-wrapper {
  --bg:#0d1117;
  --card:#111827;
  --muted:#94a3b8;
  --primary:#00b3ff;
  --border:#1f2937;
  --ink:#e5e7eb;
  width:100%;
  margin:0 auto;
  padding:24px;
  background:var(--bg);
  color:#fff;
  font:14px/1.45 Inter,system-ui,Arial;
  -webkit-font-smoothing:antialiased;
}
#cfup5-wrapper * { box-sizing:border-box; }
#cfup5-wrapper .hidden { display:none; }

/* ===== TITRES ===== */
#cfup5-wrapper h1 { margin:0 0 16px; font-size:18px; color:var(--ink); }
#cfup5-wrapper h3 { margin:0 0 10px; font-size:16px; color:var(--ink); }

/* ===== GRILLE ===== */
.cfup-grid {
  display:grid;
  grid-template-columns:1.4fr .8fr;
  gap:18px;
}
@media(max-width:900px){ .cfup-grid { grid-template-columns:1fr; } }
.cfup-card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px;
}

/* ===== FORMULAIRE ===== */
.cfup-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:700px){ .cfup-row { grid-template-columns:1fr; } }
#cfup5-wrapper label { display:block; margin:0 0 6px; color:var(--ink); }
#cfup5-wrapper .hint { color:var(--muted); font-size:12px; margin-top:4px; }

#cfup5-wrapper input[type=text],
#cfup5-wrapper select,
#cfup5-wrapper textarea {
  width:100%;
  background:#0b1220;
  color:#e6eef9;
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 12px;
}
#cfup5-wrapper textarea { min-height:138px; resize:vertical; }
#cfup5-wrapper select {
  appearance:none;
  background-image:
    linear-gradient(45deg,transparent 50%,#7f8ea3 50%),
    linear-gradient(135deg,#7f8ea3 50%,transparent 50%);
  background-position:calc(100% - 18px) 16px,calc(100% - 12px) 16px;
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
}

/* ===== TOGGLE ===== */
.cfup-toggle { margin:8px 0 12px; }
.cfup-toggle button {
  background:#1f2937;
  color:var(--ink);
  border:1px solid var(--border);
  border-radius:8px;
  padding:8px 12px;
  cursor:pointer;
  transition:background .25s ease;
}
.cfup-toggle button:hover { background:#263142; }

/* === Correction du toggle "Plus d’options" (sans !important) === */
#advancedBlock {
  overflow:hidden;
  max-height:0;
  opacity:0;
  transition:max-height 0.35s ease, opacity 0.25s ease;
}
#advancedBlock.visible {
  max-height:900px;
  opacity:1;
}

/* ===== SLIDERS ===== */
input[type=range]{ width:100%; }
#cfup5-wrapper .mono { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }

/* ===== TOOLBAR ===== */
.cfup-toolbar {
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:10px;
}
.cfup-btn {
  background:var(--primary);
  color:#001220;
  border:none;
  border-radius:10px;
  padding:10px 14px;
  font-weight:700;
  cursor:pointer;
}
.cfup-btn.secondary { background:#1f2937; color:var(--ink); }
.cfup-toolbar button[disabled]{ opacity:.6; cursor:not-allowed; }

/* ===== COLOR PICKER ===== */
.cp-sv-wrap {
  position:relative;
  height:220px;
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  background:#000;
}
.cp-sv { display:block; width:100%; height:100%; }
.cp-sv-cursor {
  position:absolute;
  width:14px;
  height:14px;
  border:2px solid #fff;
  border-radius:50%;
  box-shadow:0 0 0 1px rgba(0,0,0,.55);
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.hue-bar {
  appearance:none;
  width:100%;
  height:12px;
  border-radius:999px;
  border:1px solid var(--border);
  margin-top:12px;
  background:linear-gradient(90deg,#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%);
}
.hue-bar::-webkit-slider-thumb {
  appearance:none;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#fff;
  border:2px solid #0b1220;
}

/* ===== PREVIEW ===== */
.preview-row { display:flex; justify-content:center; margin-top:10px; }
.preview-box {
  width:140px;
  height:74px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#00b3ff;
}

/* ===== RÉSULTATS ===== */
#resultsFR textarea,
#resultsEN textarea,
#outFRparam,
#outENparam {
  width:100%;
  min-height:270px;
  background:#0b1220;
  color:#e6eef9;
  border:1px solid var(--border);
  border-radius:10px;
  padding:12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13px;
  line-height:1.5;
  white-space:pre-wrap;
  word-wrap:break-word;
  overflow-x:auto;
  overflow-y:auto;
  box-sizing:border-box;
}

/* ===== BOUTONS COPIER ===== */
.cfup-copy {
  background:var(--primary);
  color:#001220;
  border:none;
  border-radius:8px;
  font-weight:700;
  padding:8px 10px;
  cursor:pointer;
  min-width:80px;
  transition:filter .2s ease;
}
.cfup-copy:hover { filter:brightness(1.1); }
.cfup-label {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:8px 0 6px;
}
.cfup-label span { color:var(--ink); }
.cfup-copy.tiny {
  background:var(--primary);
  color:#001220;
  border:none;
  border-radius:6px;
  padding:4px 8px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}

/* ===== VARIABLES SURVOLABLES ===== */
.variable {
  position:relative;
  color:#00b3ff;
  cursor:help;
  font-weight:600;
  text-decoration:underline dotted;
  transition:color .15s;
}
.variable:hover { color:#4cc3ff; }
.tooltip {
  position:absolute;
  bottom:120%;
  left:0;
  background:#111827;
  color:#fff;
  border:1px solid #00b3ff;
  padding:6px 8px;
  border-radius:6px;
  box-shadow:0 4px 12px rgba(0,0,0,0.25);
  width:240px;
  font-size:12px;
  line-height:1.4;
  opacity:0;
  visibility:hidden;
  transition:all .2s ease;
  z-index:10;
}
.variable:hover .tooltip { opacity:1; visibility:visible; }

/* ===== CHECKBOXES ===== */
#afficher_nom_chk,
#show_en_chk {
  appearance:none;
  width:20px;
  height:20px;
  border:2px solid var(--border);
  border-radius:4px;
  background:#0b1220;
  cursor:pointer;
  transition:all .2s ease;
  vertical-align:middle;
}
#afficher_nom_chk:checked,
#show_en_chk:checked {
  background:var(--primary);
  border-color:var(--primary);
  box-shadow:0 0 0 2px rgba(0,179,255,0.2);
}
#cfup5-wrapper label[for="afficher_nom_chk"],
#cfup5-wrapper label[for="show_en_chk"] {
  color:var(--ink);
  font-weight:500;
  cursor:pointer;
}
#cfup5-wrapper .hint {
  color:var(--muted);
  font-size:12px;
  margin-top:4px;
}

/* ===== NOTIFICATION EN ===== */
#cfup-notif {
  display:none;
  background:#00b3ff1a;
  color:#0069a3;
  border:1px solid #00b3ff40;
  border-radius:6px;
  padding:8px 12px;
  margin:10px 0;
  font-size:14px;
  font-weight:500;
  opacity:0;
  transition:opacity 0.6s ease;
}
#cfup-notif.visible { display:block; opacity:1; }


/* === Animation du bloc "Plus d’options" === */
#advancedBlock {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.4s ease;
}

#advancedBlock.visible {
  opacity: 1;
  max-height: 1000px; /* ajustable selon la hauteur moyenne du contenu */
}

/* === Hauteur uniforme des blocs de résultats === */
#resultsFR textarea,
#outFRparam,
#resultsEN textarea,
#outENparam {
  max-height: 150px ;
  display: block;
}

@media (min-width: 700px) {
  #resultsFR,
  #resultsEN {
    display: grid;
    grid-template-rows: auto 1fr auto 1fr; /* IA-Friendly + Paramétrable */
    gap: 10px;
  }

  #resultsFR textarea,
  #outFRparam,
  #resultsEN textarea,
  #outENparam {
    height: 100%;
  }
}

/* === Effet de survol sur les zones copiables === */
#resultsFR textarea:hover,
#outFRparam:hover,
#resultsEN textarea:hover,
#outENparam:hover {
  border-color: var(--primary);
  box-shadow: 0 0 6px rgba(0,179,255,0.35);
  transition: all 0.25s ease;
  cursor: pointer;
}

#resultsFR textarea:active,
#resultsEN textarea:active {
  transform: scale(0.995);
  transition: transform 0.1s ease;
}