/* =========================================================================
   ColorLearn — css/panneau.css
   LE STYLE DU PANNEAU DE GÉNÉRATION, ET RIEN D'AUTRE.

   Ces règles vivaient dans css/app.css, chargé par les CENT TRENTE-HUIT
   pages. Elles habillent #panneau-ia — le formulaire, ses préréglages,
   son bandeau de compte — que seules CENT TROIS pages portent : sept
   kilo-octets de mise en forme d'un formulaire téléchargés par des
   conditions de vente.

   Même condition que js/panneau.js, lue dans le contenu de la page
   (`id="panneau-ia"`), et posée par `ecrire()` de tools/build.mjs. Le
   marquage, le script et le style voyagent donc ensemble.

   CHARGÉ APRÈS css/app.css : les règles gardent l'ordre de cascade
   qu'elles avaient — elles étaient déjà les dernières à parler de ces
   classes. Un relevé du style CALCULÉ, avant et après, l'a vérifié
   plutôt que de l'espérer.
   ========================================================================= */

/* =========================================================================
   4. PANNEAU DE CONFIGURATION — le « setup » devient un wizard (E2)
   ========================================================================= */
.setup {
  max-width: 210mm;
  /* La barre d'outils est fixe : on dégage sa hauteur réelle, mesurée par
     js/ui.js dans --toolbar-hauteur (elle change en s'empilant sur mobile). */
  margin: calc(var(--toolbar-hauteur, 44px) + 22px) auto 18px;
  padding: 16px 20px 18px;
  background: var(--papier);
  border: var(--trait-epais) solid var(--encre);
  border-radius: var(--rayon);
  box-shadow: 0 4px 24px rgb(0 0 0 / 0.14);
}

` (0-1-0) de styles.css et repousse le contenu
   d'une page à l'impression. */
@media screen {
.setup + .feuille {
    margin-top: 26px;
  }
}


/* Sur fond blanc, un bouton « fantôme » doit s'écrire à l'encre : hérité
   de la v1, où .btn--ghost vit sur le noir de la barre d'outils. */
.setup .btn--ghost,
.modal-gen .btn--ghost,
.biblio .btn--ghost,
.pied-global .btn--ghost {
  color: var(--encre);
  border-color: var(--encre);
}


.setup__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 10px;
}


.setup h2 {
  margin: 0;
  font-family: var(--police-titre);
  font-size: 20px;
  text-transform: uppercase;
}


.setup__intro {
  margin: 0 0 12px;
  font-size: 13.5px;
  max-width: 78ch;
}


/* ---------- Le champ unique : « écris, l'IA fait le reste » ---------- */
.setup__demande {
  display: flex;
  gap: 10px;
  align-items: stretch;
  margin-bottom: 6px;
}


.setup__demande input {
  flex: 1;
  min-width: 0;
  font: 700 17px/1.2 var(--police-texte);
  padding: 14px 20px;
  border: var(--trait-epais) solid var(--encre);
  border-radius: 999px;
  background: var(--papier);
  color: var(--encre);
}


.setup__demande input::placeholder {
  font-weight: 400;
  font-style: italic;
  opacity: 0.55;
}


.setup__demande input:focus-visible {
  outline: 3px solid #1a73e8;
  outline-offset: 2px;
}


.setup__go {
  flex: none;
  font: 800 15px/1 var(--police-texte);
  padding: 0 26px;
  border: var(--trait-epais) solid var(--encre);
  border-radius: 999px;
  background: var(--encre);
  color: var(--papier);
  cursor: pointer;
  white-space: nowrap;
}


.setup__go:hover {
  transform: translateY(-1px);
}


/* ---------- La sorte de fiche ----------
   Le choix vient AVANT l'aide et après la demande, parce qu'il se lit
   dans cet ordre : ce que je veux apprendre, puis sous quelle forme. Il
   ne descend pas dans les réglages avancés — c'est une décision
   pédagogique, pas un réglage. */
.setup__modele {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 0 0 8px;
  padding-left: 20px;
  font-size: 13px;
}


.setup__modele label {
  font-weight: 700;
}


.setup__modele select {
  font: 600 13px/1.2 var(--police-texte);
  padding: 5px 10px;
  border: var(--trait-fin) solid var(--encre);
  border-radius: 999px;
  background: var(--papier);
  color: var(--encre);
}


/* Ce que le modèle sert : c'est le « pour » de la bibliothèque, et c'est
   lui qui distingue « Méthode » de « Révision ». */
.setup__modele-pour {
  flex: 1 1 22ch;
  font-size: 12.5px;
  font-style: italic;
  opacity: 0.75;
}


.setup__aide {
  margin: 0 0 8px;
  padding-left: 20px;
  font-size: 12.5px;
  font-style: italic;
  opacity: 0.75;
}


.setup__secondaire {
  margin: 0 0 4px;
  padding-left: 18px;
}


/* La ligne de statut ne réserve de la place que lorsqu'elle a quelque
   chose à dire — sinon elle creuse un vide au bas du panneau. */
.setup .panneau-ia__statut:empty {
  display: none;
}


/* ---------- Le reste, replié ---------- */
.setup__avance {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 2px dashed var(--encre);
}


.setup__avance > summary {
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 4px 0;
}


.setup__avance > summary:focus-visible {
  outline: 3px solid #1a73e8;
  outline-offset: 3px;
}


.setup__avance[open] > summary {
  margin-bottom: 10px;
}

@media (max-width: 560px) {
.setup__demande {
    flex-direction: column;
  }

.setup__go {
    padding: 14px 26px;
  }
}


.setup__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px 14px;
  margin-bottom: 12px;
}


.setup__champ {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}


.setup__champ > span {
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}


.setup__champ input,
.setup__champ select {
  font: 700 14px/1.2 var(--police-texte);
  padding: 9px 12px;
  border: 2px solid var(--encre);
  border-radius: 999px;
  background: var(--papier);
  color: var(--encre);
  min-width: 0;
}


.setup__champ input:focus-visible,
.setup__champ select:focus-visible {
  outline: 3px solid #1a73e8;
  outline-offset: 2px;
}


.setup__champ--case {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}


.setup__champ--case input {
  width: 20px;
  height: 20px;
  flex: none;
  accent-color: var(--encre);
}


.setup__prereglages {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding-top: 10px;
  margin-top: 4px;
  border-top: 2px dashed var(--encre);
}


.setup__prereglages > span {
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}


.setup__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}


.setup__actions .btn {
  border-color: var(--encre);
}


.setup__actions .btn--ghost {
  color: var(--encre);
}


.setup__note {
  margin: 8px 0 0;
  font-size: 11.5px;
  font-style: italic;
}


.setup__graine {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* =========================================================================
   10. RESPONSIVE
   ========================================================================= */
@media (max-width: 760px) {
.setup,
  .pied-global {
    margin-left: 10px;
    margin-right: 10px;
  }
}

/* =========================================================================
   11. IMPRESSION — rien de tout cela n'existe sur le papier.
   ========================================================================= */
/* Le panneau ne s'imprime pas — et c'est css/app.css qui le dit, avec
   les autres éléments d'écran. Un sélecteur GROUPÉ n'appartient pas au
   fichier de l'un de ses membres : le découpage automatique avait
   emporté ici « .pied-global », « .modal-gen » et « .fil-crayons » parce
   qu'ils partageaient une règle avec « .setup ». Tous se seraient
   imprimés. Deux épreuves l'ont dit avant la production. */


/* La case à cocher du panneau : 20 px de côté, sous le seuil, et c'est la
   seule commande du wizard qu'on manque régulièrement. */
.setup__champ input[type="checkbox"] {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
}


/* =========================================================================
   COMPTE ET CRÉDITS
   -------------------------------------------------------------------------
   Ce bloc remplace l'ancienne interface de saisie de clé. Il n'affiche
   plus un champ à remplir mais un ÉTAT : qui je suis, combien il me
   reste. Tout ce qui décide vraiment — l'identité, le solde, le débit —
   vit sur le serveur ; ces règles ne font que le montrer.
   ========================================================================= */
.compte-bandeau {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 10px;
  padding: 8px 12px;
  border: var(--trait-fin) solid var(--encre);
  border-radius: 12px;
  font-size: 13px;
}


.compte-bandeau__etat {
  font-weight: 800;
}


.compte-bandeau__solde {
  border: 2px solid var(--encre);
  border-radius: 999px;
  padding: 2px 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}


/* Un solde à zéro n'est pas une information neutre : c'est ce qui bloque
   la prochaine génération. */
.compte-bandeau[data-etat="deconnecte"] .compte-bandeau__etat::before { content: "○ "; }

.compte-bandeau[data-etat="connecte"] .compte-bandeau__etat::before { content: "● "; }

.compte-bandeau[data-etat="hors-service"] { border-style: dashed; }


/* Le panneau DÉMÉNAGE dans le tiroir : il perd sa marge de page et son
   ombre propre, qui feraient double emploi avec celles du tiroir. */
.assistant__tiroir .setup {
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  max-width: none;
}