/* Styles communs aux outils Digitiz — chargés par chaque outil via ../commun/outil.css */
:root{
  --vert:#12cc96; --vert-fonce:#0fae80; --vert-pale:#e7faf3;
  --texte:#1f2933; --gris:#6b7280; --bord:#e5e7eb; --fond:#f8f9fa;
  --rouge:#e5484d; --rouge-pale:#fdecec; --orange:#f5a524; --orange-pale:#fdf4e3;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--fond); color:var(--texte); line-height:1.55;
  padding:28px 16px 40px; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:780px;margin:0 auto}
h1{font-size:1.75rem;text-align:center;letter-spacing:-.02em}
.sous{text-align:center;color:var(--gris);margin:10px auto 24px;max-width:580px;font-size:.98rem}
.carte{background:#fff;border:1px solid var(--bord);border-radius:14px;padding:22px;
  box-shadow:0 1px 3px rgba(16,24,40,.04);margin-bottom:18px}
.carte h2{font-size:1.02rem;margin-bottom:4px;letter-spacing:-.01em}
.carte h2 + .aide{margin-bottom:16px}
.aide{font-size:.87rem;color:var(--gris);margin-bottom:14px}

label{display:block;font-weight:600;font-size:.9rem;margin-bottom:6px}
.champ{margin-bottom:14px}
input[type=text],input[type=email],input[type=url],input[type=tel],select,textarea{
  width:100%;padding:11px 13px;border:1px solid var(--bord);border-radius:9px;
  font:inherit;font-size:.94rem;color:var(--texte);background:#fff}
textarea{min-height:90px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--vert);outline-offset:-1px;border-color:transparent}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.opt{font-weight:400;color:var(--gris);font-size:.82rem}

.choix{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.choix input{position:absolute;opacity:0;pointer-events:none}
.choix label{flex:1;min-width:150px;margin:0;padding:12px 14px;border:1px solid var(--bord);
  border-radius:10px;cursor:pointer;background:#fff;font-weight:500;font-size:.92rem;
  transition:.15s;text-align:center}
.choix input:checked + label{border-color:var(--vert);background:var(--vert-pale);
  color:#08794f;font-weight:600}

button{padding:13px 18px;border:0;border-radius:10px;background:var(--vert);color:#fff;
  font-size:.98rem;font-weight:600;cursor:pointer;transition:background .15s}
button:hover:not(:disabled){background:var(--vert-fonce)}
button:disabled{background:#c9cfd6;cursor:not-allowed}
button.plein{width:100%;margin-top:6px;padding:14px;font-size:1rem}
button.second{background:#fff;color:var(--texte);border:1px solid var(--bord)}
button.second:hover:not(:disabled){background:#f3f5f7}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.actions button{flex:1;min-width:130px}

.sortie{display:none}
.sortie.on{display:block}
#doc{white-space:pre-wrap;font-size:.9rem;line-height:1.65;max-height:460px;overflow:auto;
  border:1px solid var(--bord);border-radius:10px;padding:18px;background:#fff}
#doc h3{font-size:.95rem;margin:16px 0 4px}
#doc h3:first-child{margin-top:0}

.avert{background:var(--vert-pale);border-left:3px solid var(--vert);padding:14px 16px;
  border-radius:0 8px 8px 0;font-size:.88rem;margin-top:18px}
.avert b{display:block;margin-bottom:4px}
.erreur{background:var(--rouge-pale);border-left:3px solid var(--rouge);padding:12px 14px;
  border-radius:0 8px 8px 0;font-size:.88rem;margin-bottom:14px;display:none}
.erreur.on{display:block}
.ok{color:#08794f;font-size:.86rem;margin-left:4px}

/* Vue code : le HTML généré, affiché tel quel pour être relu ou sélectionné. */
#doc.code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.79rem;
  line-height:1.6;background:#1f2933;color:#e6edf3;border-color:#1f2933;white-space:pre-wrap;
  word-break:break-word;-webkit-user-select:all;user-select:all}
#doc .pied{color:var(--gris);font-size:.85rem;margin-top:18px;padding-top:12px;
  border-top:1px solid var(--bord)}
.bascule-vue{display:flex;justify-content:flex-end;margin-bottom:8px}
.bascule-vue button{padding:6px 13px;font-size:.82rem;background:#fff;color:var(--gris);
  border:1px solid var(--bord);border-radius:20px;font-weight:600}
.bascule-vue button:hover:not(:disabled){background:#f3f5f7;color:var(--texte)}
@media(max-width:560px){
  h1{font-size:1.4rem}.carte{padding:16px}.duo{grid-template-columns:1fr}
  .actions button{min-width:100%}
}

/* Résultats produits par un modèle : mise en forme du HTML simple renvoyé. */
.resultat{border:1px solid var(--bord);border-radius:10px;padding:20px 22px;background:#fff;
  font-size:.94rem;line-height:1.65;max-height:620px;overflow:auto}
.resultat h3{font-size:1rem;margin:22px 0 8px;color:var(--texte)}
.resultat h3:first-child{margin-top:0}
.resultat p{margin-bottom:12px}
.resultat ul,.resultat ol{margin:0 0 14px 20px}
.resultat li{margin-bottom:7px}
.resultat b,.resultat strong{color:var(--texte)}
.resultat pre{background:#1f2933;color:#e6edf3;border-radius:9px;padding:16px;overflow:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;line-height:1.6;
  white-space:pre-wrap;word-break:break-word;margin-bottom:14px}
.resultat blockquote{border-left:3px solid var(--vert);padding-left:14px;margin:0 0 14px;color:var(--gris)}
.chargement{text-align:center;color:var(--gris);padding:26px 0;font-size:14px}