/* =====================================================================
   Le guide du prompt — styles propres à l'outil
   S'appuie sur otoolia.css (variables --ot-*) : le thème clair / sombre du site s'applique.
   Tout est limité au conteneur .gp.
   ===================================================================== */
.gp {
  --gp-bord-fort: color-mix(in srgb, var(--ot-text-soft) 35%, var(--ot-border));
  --gp-texte-3: color-mix(in srgb, var(--ot-text-soft) 75%, var(--ot-bg));
  --gp-ok: #047857;     --gp-ok-clair: #d1fae5;
  --gp-danger: #b91c1c; --gp-danger-clair: #fee2e2;
  --gp-accent: #0369a1; --gp-accent-clair: #e0f2fe;
  --gp-sur-couleur: #ffffff;   /* texte posé sur --gp-ok / --gp-danger */
  --gp-rayon: 12px;
  font-size: .95rem; line-height: 1.6;
}
/* Thème sombre : mêmes déclencheurs qu'otoolia.css */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .gp {
    --gp-ok: #34d399;     --gp-ok-clair: #0d3327;
    --gp-danger: #f87171; --gp-danger-clair: #3d1a1a;
    --gp-accent: #38bdf8; --gp-accent-clair: #0c2a3d;
    --gp-sur-couleur: #0f0f17;
  }
}
:root[data-theme="dark"] .gp {
  --gp-ok: #34d399;     --gp-ok-clair: #0d3327;
  --gp-danger: #f87171; --gp-danger-clair: #3d1a1a;
  --gp-accent: #38bdf8; --gp-accent-clair: #0c2a3d;
  --gp-sur-couleur: #0f0f17;
}

/* ---------- en-tête de la page ---------- */
.gp-head { margin-bottom: calc(var(--ot-space) * 1.5); }
.gp-head h1 { margin-bottom: .2em; }
.gp-head p { margin: 0; }

/* ---------- mise en page : sommaire + pages ---------- */
.gp-wrap { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }
.gp-pages { min-width: 0; }

.gp nav.sommaire { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 2px;
  background: var(--ot-surface); border: 1px solid var(--ot-border); border-radius: var(--gp-rayon);
  padding: 10px; box-shadow: var(--ot-shadow); max-height: calc(100vh - 92px); overflow-y: auto; }
.gp nav.sommaire a { color: var(--ot-text); text-decoration: none; font-size: .82rem; font-weight: 600;
  padding: 7px 10px; border-radius: 7px; }
.gp nav.sommaire a:hover { background: var(--ot-surface-2); }
.gp nav.sommaire a.actif { background: var(--ot-brand); color: var(--ot-brand-ink); }
.gp nav.sommaire .groupe { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--gp-texte-3); margin: 10px 8px 4px; }
.gp nav.sommaire .groupe:first-child { margin-top: 2px; }

/* Téléphone : le sommaire devient une bande qui défile horizontalement, sous l'en-tête du site */
@media (max-width: 800px) {
  .gp-wrap { grid-template-columns: minmax(0, 1fr); }
  .gp nav.sommaire { top: 60px; z-index: 10; flex-direction: row; overflow-x: auto; overflow-y: hidden;
    max-height: none; padding: 6px; scrollbar-width: thin; }
  .gp nav.sommaire a { white-space: nowrap; flex: none; }
  .gp nav.sommaire .groupe { display: none; }
}

/* ---------- sections = pages ---------- */
.gp section.page { background: var(--ot-surface); border: 1px solid var(--ot-border);
  border-radius: var(--gp-rayon); padding: 28px; box-shadow: var(--ot-shadow);
  margin-bottom: 22px; scroll-margin-top: 80px; min-width: 0; overflow-wrap: break-word; }
@media (max-width: 800px) { .gp section.page { padding: 18px; scroll-margin-top: 120px; } }
.gp section.page h2 { margin: 0 0 6px; font-size: 1.4rem; color: var(--ot-brand); }
.gp section.page h3 { margin: 26px 0 8px; font-size: 1.05rem; }
.gp section.page p { margin: 0 0 .8em; }
.gp section.page > .chapo { color: var(--ot-text-soft); margin: 0 0 18px; font-size: .9rem; }

/* ---------- blocs pédagogiques ---------- */
.gp .methode { background: var(--ot-surface-2); border: 1px solid var(--ot-border); border-radius: var(--gp-rayon);
  padding: 16px; margin: 14px 0; min-width: 0; }
.gp .methode > p:last-child, .gp .methode > :last-child { margin-bottom: 0; }
.gp .methode b.titre-m { color: var(--gp-accent); display: block; margin-bottom: 6px; font-size: 1rem; }
.gp .encart { background: var(--gp-accent-clair); border-left: 4px solid var(--gp-accent);
  border-radius: 8px; padding: 12px 14px; margin: 14px 0; font-size: .88rem; }
.gp .encart b { color: var(--gp-accent); }

.gp .duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin: 10px 0; }
@media (max-width: 700px) { .gp .duo { grid-template-columns: minmax(0, 1fr); } }
.gp .exemple { border-radius: 10px; padding: 12px 14px; font-size: .84rem; border: 1px solid; min-width: 0; }
.gp .exemple .etiquette { display: inline-block; font-size: .7rem; font-weight: 700; text-transform: uppercase;
  border-radius: 20px; padding: 2px 10px; margin-bottom: 8px; color: var(--gp-sur-couleur); }
.gp .exemple.mauvais { background: var(--gp-danger-clair); border-color: var(--gp-danger); }
.gp .exemple.mauvais .etiquette { background: var(--gp-danger); }
.gp .exemple.bon { background: var(--gp-ok-clair); border-color: var(--gp-ok); }
.gp .exemple.bon .etiquette { background: var(--gp-ok); }
.gp .exemple code { display: block; white-space: pre-wrap; font-family: var(--ot-mono); font-size: .8rem; line-height: 1.5; }

.gp .piliers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 12px; margin: 16px 0; }
.gp .pilier { background: var(--ot-surface-2); border: 1px solid var(--ot-border); border-radius: 10px; padding: 14px; }
.gp .pilier .num { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--ot-brand); color: var(--ot-brand-ink); font-size: .75rem; font-weight: 700; margin-bottom: 8px; }
.gp .pilier b { display: block; margin-bottom: 4px; font-size: .9rem; }
.gp .pilier p { margin: 0; font-size: .8rem; color: var(--ot-text-soft); }

/* CREATE */
.gp .etapes-create { display: grid; gap: 10px; margin: 14px 0; }
.gp .etape-create { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: start;
  background: var(--ot-surface-2); border: 1px solid var(--ot-border); border-radius: 10px; padding: 12px; }
.gp .etape-create .lettre { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px;
  background: var(--ot-brand); color: var(--ot-brand-ink); font-weight: 800; font-size: 1.2rem; }
.gp .etape-create p { margin: 2px 0 0; font-size: .84rem; color: var(--ot-text-soft); }
.gp .etape-create b { font-size: .95rem; }

/* itératif */
.gp .boucle { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0; }
.gp .boucle .etape { background: var(--ot-surface-2); border: 1px solid var(--ot-border); border-radius: 20px;
  padding: 6px 14px; font-size: .82rem; font-weight: 600; }
.gp .boucle .fleche { color: var(--gp-texte-3); font-size: 1rem; }

/* quiz */
.gp .qcm { margin: 14px 0; background: var(--ot-surface-2); border: 1px solid var(--ot-border); border-radius: 10px; padding: 14px; }
.gp .qcm .question { font-weight: 700; margin-bottom: 10px; font-size: .9rem; }
.gp .qcm button.reponse { display: block; width: 100%; text-align: left; margin: 6px 0; font: inherit; font-size: .84rem;
  cursor: pointer; border-radius: 8px; border: 1px solid var(--gp-bord-fort); padding: 8px 10px;
  color: var(--ot-text); background: var(--ot-surface); }
.gp .qcm button.reponse:hover:not(:disabled) { border-color: var(--ot-brand); }
.gp .qcm button.reponse:disabled { cursor: default; }
.gp .qcm button.reponse:disabled:not(.bonne):not(.fausse) { opacity: .6; }
.gp .qcm button.reponse.bonne { border-color: var(--gp-ok); background: var(--gp-ok-clair); }
.gp .qcm button.reponse.fausse { border-color: var(--gp-danger); background: var(--gp-danger-clair); }
.gp .qcm .verdict { margin-top: 8px; font-size: .8rem; }
.gp .quiz-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.gp .quiz-pied p { margin: 0; }
.gp #score { font-weight: 700; color: var(--ot-brand); }

/* checklist */
.gp .checklist { list-style: none; padding: 0; margin: 14px 0; display: flex; flex-direction: column; gap: 8px; }
.gp .checklist label { display: flex; gap: 10px; align-items: start; background: var(--ot-surface-2);
  border: 1px solid var(--ot-border); border-radius: 8px; padding: 10px 12px; font-size: .86rem; cursor: pointer; }
.gp .checklist input { accent-color: var(--gp-ok); margin-top: 4px; flex: none; }
.gp .checklist li.coche label { opacity: .55; text-decoration: line-through; }

/* code */
.gp code.inline { background: var(--ot-surface-2); border: 1px solid var(--ot-border); border-radius: 5px;
  padding: 1px 6px; font-family: var(--ot-mono); font-size: .82em; overflow-wrap: anywhere; }
.gp code.bloc { display: block; white-space: pre-wrap; padding: 10px; margin: 0 0 8px; font-size: .8rem; line-height: 1.6;
  background: var(--ot-surface); }
@media (max-width: 700px) { .gp code.bloc { font-size: .72rem; padding: 8px; } }
.gp .gp-btn-s { min-height: 32px; padding: 4px 12px; font-size: .8rem; }
.gp .gp-pied { font-size: .8rem; }