/* ═══════════════════════════════════════════════════════════
   Bibliothèque de poche — feuille de style PROPRE à l'appli
   Le socle (/shared/appli-socle.css) porte le reste : reset, barre, boutons, dock, feuilles, listes,
   message passager, clavier, visite, micro. On y redéfinit ici les jetons de couleur (la teinte de
   l'appli) et ce qui ne vaut que pour elle. Rayons et ombres : jamais de littéral
   (--r-*, --sh-* de /shared/jetons.css — controle-jetons.mjs le refuserait).
   ═══════════════════════════════════════════════════════════ */

/* Votre teinte : à décliner. Les valeurs par défaut du socle sont la palette crème et cuivre du site. */
:root {
  --accent: #6b4a8c; --accent-fort: #4b3462; --accent-clair: #eae6ef;
}
html[data-theme="sombre"] {
  --accent: #9f89b4; --accent-fort: #c4b7d1; --accent-clair: #291e2b;
}

/* Pas de bouton d'action en bas ici : la place réservée sous la liste se réduit à la barre du bas. */
#ecran { padding-bottom: calc(var(--dock-h) + 28px + var(--bas)); }
#toast { bottom: calc(var(--dock-h) + var(--bas) + 16px); }

/* La pastille « 🐞 Contact » du panneau du site est posée juste sous la barre, à droite (jamais dans l'appli emballée) : sur téléphone, on lui laisse sa ligne plutôt que de la poser sur le titre. */
@media (max-width: 480px) { html.avec-panneau-bug #ecran { padding-top: 62px; } html.avec-panneau-bug.clavier #ecran { padding-top: 18px; } }

/* ── la recherche ───────────────────────────────────────── */
.champ-saisie { position: relative; }
.champ-saisie input[type="search"] { padding-right: 52px; min-height: 52px; font-size: 1rem; -webkit-appearance: none; appearance: none; }
.champ-saisie input[type="search"]::-webkit-search-cancel-button { display: none; }
.effacer {
  position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; border-radius: var(--r-pill);
  font-size: 16px; color: var(--doux);
}
.effacer:active { background: var(--panneau-2); }
.champ-pied { justify-content: flex-end; min-height: 8px; }

/* Les rubriques : une rangée qui défile du doigt, jamais sur trois lignes. */
.rubriques {
  display: flex; flex-wrap: nowrap; gap: 8px; margin: 12px -16px 0; padding: 2px 16px 6px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.rubriques::-webkit-scrollbar { display: none; }
.rubriques .puce { flex: 0 0 auto; white-space: nowrap; }

.resume-ligne { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0 10px; }
.resume { font-size: .82rem; color: var(--doux); margin: 0; min-width: 0; }
.resume-ligne .btn-lien { padding: 0 4px; font-size: .82rem; }

/* ── les rubriques et les prompts ───────────────────────── */
.secteur-tete { cursor: pointer; }
.secteur.ouvert > .secteur-tete { border-color: var(--accent); background: var(--accent-clair); }
.sous-liste { margin: 8px 0 6px 8px; padding-left: 10px; border-left: 3px solid var(--accent-clair); }
.actions-secteur { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.actions-secteur .btn-lien { flex: 1 1 auto; justify-content: flex-start; text-align: left; }
.ligne-double .etoile { align-self: center; width: 52px; height: 52px; min-height: 52px; font-size: 22px; }
.etoile[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-clair); }
mark.trouve { background: rgba(250, 204, 21, .42); color: inherit; border-radius: var(--r-xs); padding: 0 1px; }
html[data-theme="sombre"] mark.trouve { background: rgba(250, 204, 21, .28); }

#suite { margin-top: 12px; }
.vide .pile { margin-top: 12px; }

/* Le nombre de sites gardés, sur l'étoile de la barre du bas. */
.dock .d-ico { position: relative; }
.d-badge {
  position: absolute; top: -6px; left: 60%; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--r-pill); background: var(--accent); color: var(--sur-accent);
  font-size: .66rem; font-weight: 800; line-height: 18px; text-align: center;
}

/* ── les prompts ────────────────────────────────────────── */
.prompt-texte { min-height: 220px; font-size: .9rem; line-height: 1.5; }
.reglage { display: grid; gap: 6px; margin-bottom: 14px; }
.reglage label { font-weight: 700; font-size: .9rem; }
.lien-partage { width: 100%; font-size: .78rem; padding: 10px 12px; min-height: 0; height: 72px; resize: none; font-family: ui-monospace, monospace; }

/* Signature au bas de « Plus » : la boussole du site et le nom, discrets. */
.signature { display: flex; align-items: center; justify-content: flex-start; gap: 12px; margin: 0 0 4px; padding: 2px 12px 8px; border-radius: var(--r-md); color: var(--doux); text-decoration: none; }
.signature:hover, .signature:focus-visible { background: var(--panneau-2); }
.signature img { flex: 0 0 auto; }
.note.note-infos { font-size: .92rem; line-height: 1.5; }
.signature-txt { display: flex; flex-direction: column; line-height: 1.3; font-size: .92rem; }
.signature-txt b { color: var(--encre); font-family: var(--police-titre); font-size: 1.05rem; }
.signature-txt small { font-size: .8rem; }
.maj-appli + .signature { margin-top: 2px; }


/* Une ligne de prompt : le titre, puis sa description sur deux lignes au plus (la fiche la montre en entier). */
.item-prompt .item-txt b { overflow-wrap: anywhere; }
.item-prompt .item-txt small { overflow-wrap: anywhere; }
.item-txt small.desc { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.item-txt small.rub { color: var(--accent-fort); font-weight: 600; }
.item-txt small.passage { margin-top: 3px; font-style: italic; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.neuf, .pastille.neuf { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--r-pill); background: var(--accent-clair); color: var(--accent-fort); font-size: .7rem; font-weight: 800; vertical-align: 1px; }
.lien-btn { text-decoration: none; color: inherit; }

/* ── la fiche d'un prompt ───────────────────────────────── */
.fiche-meta { display: grid; gap: 8px; margin-bottom: 4px; }
.fiche-rub { white-space: normal; text-align: left; justify-content: flex-start; padding: 0; min-height: 44px; line-height: 1.3; }
.fiche-pastilles { display: flex; flex-wrap: wrap; gap: 6px; }
.pastille { display: inline-block; padding: 4px 10px; border-radius: var(--r-pill); background: var(--panneau-2); border: 1px solid var(--trait); font-size: .78rem; font-weight: 600; text-decoration: none; color: inherit; }
.pastille.neuf { margin-left: 0; padding: 4px 10px; font-size: .78rem; }
a.pastille.auteur { color: var(--accent-fort); }
.fiche-desc { margin: 8px 0 4px; font-size: .95rem; line-height: 1.5; }
.fiche-tags { margin: 6px 0 2px; gap: 6px; }
.puce.puce-petite { min-height: 44px; padding: 4px 12px; font-size: .8rem; font-weight: 600; color: var(--doux); }
.fiche-origine { margin: 8px 0 0; font-size: .82rem; color: var(--doux); line-height: 1.6; }
.fiche-origine a { color: var(--accent-fort); font-weight: 600; display: inline-block; padding: 10px 2px; }
.prompt-texte { margin-top: 12px; }
.rangee-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rangee-actions .btn-2 { padding: 0 6px; font-size: .86rem; min-width: 0; }
.rangee-actions .btn-2[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-clair); }

/* Le titre d'un prompt peut être long : il passe à la ligne, il ne rétrécit pas le bouton de fermeture (44 px). */
.feuille-fermer { flex: 0 0 44px; }
.feuille-tete h2 { min-width: 0; overflow-wrap: anywhere; }