/* =========================================================
   GÉNÉRATEUR DE PROMPT · MÉTHODE ACTIF
   Toutes les classes sont préfixées gp- : aucune collision
   possible avec style.css ni avec les autres modules.
   S'appuie sur /assets/css/style.css (non modifié) pour la
   barre du haut, les boutons .btn et les couleurs de base.
   ========================================================= */

.gp-app{
  --gp-a:#e8791a;  /* Action   */
  --gp-c:#2f6fed;  /* Contexte */
  --gp-t:#16a163;  /* Ton      */
  --gp-i:#7c4fd6;  /* Identité */
  --gp-f:#d6336c;  /* Format   */
}

/* ---------- Les lettres ---------- */
.gp-l{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  min-width:44px; height:44px; padding:0 6px; border-radius:12px;
  color:#fff; font-weight:900; font-size:22px; line-height:1;
}
.gp-l small{ font-size:10px; font-weight:700; letter-spacing:.3px; margin-top:2px; }
.gp-a{ background:var(--gp-a); } .gp-c{ background:var(--gp-c); }
.gp-t{ background:var(--gp-t); } .gp-i{ background:var(--gp-i); }
.gp-f{ background:var(--gp-f); }

.gp-rappel{
  display:flex; justify-content:center; gap:10px; flex-wrap:wrap;
  margin:6px 0 22px;
}
.gp-rappel .gp-l{ min-width:70px; height:58px; font-size:24px; }

/* ---------- Les blocs d'étape ---------- */
.gp-bloc{
  background:var(--carte); border:2px solid var(--bord); border-radius:var(--rayon);
  padding:20px 20px 18px; margin:0 0 18px; box-shadow:var(--ombre);
}
.gp-etape{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:20px; font-weight:800; color:var(--bleu-nuit); margin:0 0 6px;
}
.gp-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%;
  background:var(--bleu-nuit); color:#fff; font-size:16px; flex:0 0 auto;
}
.gp-facultatif{
  font-size:12px; font-weight:700; color:var(--texte-doux);
  background:var(--bleu-clair); border-radius:999px; padding:3px 10px;
}
.gp-aide{ margin:0 0 14px; color:var(--texte-doux); font-size:15px; }
.gp-petit{ font-size:14px; color:var(--texte-doux); font-weight:600; }

/* ---------- Les champs ---------- */
.gp-champ{
  display:block; width:100%; margin:8px 0 0;
  font:inherit; font-size:17px; color:var(--texte);
  background:#fff; border:2px solid var(--bord); border-radius:14px;
  padding:12px 14px; resize:vertical;
  -webkit-appearance:none; appearance:none;
}
.gp-champ:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-clair); }
.gp-select{ width:auto; display:inline-block; margin:0 0 0 8px; padding:10px 14px; cursor:pointer; }
.gp-ligne{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin:14px 0 4px; }

/* ---------- Exemples ---------- */
.gp-exemples{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:12px; }
.gp-ex{
  font:inherit; font-size:14px; font-weight:700; cursor:pointer;
  background:var(--bleu-clair); color:var(--bleu-nuit);
  border:2px solid transparent; border-radius:999px; padding:8px 14px; min-height:40px;
}
.gp-ex:active{ transform:scale(.96); }

/* ---------- Une lettre ACTIF ---------- */
.gp-lettre{ padding:14px 0 16px; border-top:1px dashed var(--bord); }
.gp-aide + .gp-lettre{ border-top:0; padding-top:4px; }
.gp-lettre-tete{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:18px; }
.gp-lettre-tete .gp-l{ min-width:38px; height:38px; font-size:19px; }
.gp-q{ color:var(--texte-doux); font-size:15px; }

.gp-puces{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 2px; }
.gp-puce{
  font:inherit; font-size:15px; cursor:pointer; text-align:left;
  background:#fff; color:var(--texte);
  border:2px solid var(--bord); border-radius:999px; padding:8px 14px; min-height:42px;
}
.gp-puce:active{ transform:scale(.96); }
.gp-puce.gp-on{ color:#fff; border-color:transparent; }
.gp-lettre[data-l="a"] .gp-puce.gp-on{ background:var(--gp-a); }
.gp-lettre[data-l="c"] .gp-puce.gp-on{ background:var(--gp-c); }
.gp-lettre[data-l="t"] .gp-puce.gp-on{ background:var(--gp-t); }
.gp-lettre[data-l="i"] .gp-puce.gp-on{ background:var(--gp-i); }
.gp-lettre[data-l="f"] .gp-puce.gp-on{ background:var(--gp-f); }

/* ---------- Contraintes ---------- */
.gp-cases{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.gp-case{
  display:flex; align-items:center; gap:10px; cursor:pointer;
  border:2px solid var(--bord); border-radius:14px; padding:10px 12px;
  font-size:15px; min-height:48px; background:#fff;
}
.gp-case input{ width:22px; height:22px; flex:0 0 auto; accent-color:var(--vert); }

/* ---------- Actions ---------- */
.gp-actions{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin:6px 0 14px; }
.gp-generer{ font-size:20px; padding:18px 30px; min-width:260px; }
.gp-alerte{
  text-align:center; color:var(--rouge); font-weight:700; margin:-4px 0 18px;
}

/* ---------- Avant / après ---------- */
.gp-resultat{ border-color:#1f9d6355; }
.gp-duo{ display:grid; grid-template-columns:1fr 1.4fr; gap:14px; margin:10px 0 12px; }
.gp-carte{ border-radius:16px; padding:16px; position:relative; }
.gp-avant{ background:#fbeeee; border:2px solid #c0392b33; }
.gp-apres{ background:#eaf7f0; border:2px solid #1f9d6355; }
.gp-badge{
  display:inline-block; font-size:12px; font-weight:800; letter-spacing:1.5px;
  text-transform:uppercase; border-radius:999px; padding:4px 10px; margin-bottom:8px;
  background:#fff; color:var(--bleu-nuit);
}
.gp-citation{ margin:0 0 10px; font-size:17px; line-height:1.6; color:var(--texte); word-wrap:break-word; }
.gp-avant .gp-citation{ font-style:italic; }
.gp-verdict{ margin:0; font-size:14px; color:var(--texte-doux); font-weight:600; }

/* Les morceaux du prompt, soulignés à la couleur de leur lettre */
.gp-morceau{ border-bottom:3px solid; padding-bottom:1px; }
.gp-morceau sup{
  font-size:10px; font-weight:900; color:#fff; border-radius:4px;
  padding:0 3px; margin-right:2px; vertical-align:top; position:relative; top:2px;
}
.gp-m-a{ border-color:var(--gp-a); } .gp-m-a sup{ background:var(--gp-a); }
.gp-m-c{ border-color:var(--gp-c); } .gp-m-c sup{ background:var(--gp-c); }
.gp-m-t{ border-color:var(--gp-t); } .gp-m-t sup{ background:var(--gp-t); }
.gp-m-i{ border-color:var(--gp-i); } .gp-m-i sup{ background:var(--gp-i); }
.gp-m-f{ border-color:var(--gp-f); } .gp-m-f sup{ background:var(--gp-f); }
.gp-m-x{ border-color:#9aa3b8; }     .gp-m-x sup{ background:#9aa3b8; }

.gp-conseils{ margin:0 0 16px; padding-left:20px; color:var(--texte-doux); font-size:15px; }
.gp-conseils li{ margin:4px 0; }
.gp-conseils:empty{ display:none; }

.gp-etape-copier{ margin-top:6px; }
.gp-final{ font-size:16px; background:#f7f9fc; }
.gp-copie-ok{ text-align:center; color:var(--vert-fonce); font-weight:800; margin:0; }

/* ---------- Petits écrans ---------- */
@media (max-width:700px){
  .gp-duo{ grid-template-columns:1fr; }
  .gp-cases{ grid-template-columns:1fr; }
  .gp-rappel .gp-l{ min-width:56px; height:52px; font-size:20px; }
  .gp-generer{ width:100%; min-width:0; }
  .gp-bloc{ padding:16px 14px; }
}

/* [hidden] doit gagner sur les display ci-dessus */
.gp-app [hidden]{ display:none !important; }