/* ═══════════════════════════════════════════════════════════
   Emploi 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: #1d5c73; --accent-fort: #144051; --accent-clair: #dfe8eb;
}
html[data-theme="sombre"] {
  --accent: #6c95a4; --accent-fort: #a5bec7; --accent-clair: #182225;
}

/* 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 secteurs et les sites ──────────────────────────── */
.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; }
.item-site .item-txt b { overflow-wrap: anywhere; }
.item-site .item-txt small { overflow-wrap: anywhere; }
.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); }
.entete-secteur {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin: 14px 2px 0; font-size: .82rem; font-weight: 700; letter-spacing: .02em; color: var(--accent-fort);
}
.entete-secteur:first-child { margin-top: 2px; }
.entete-secteur small { font-weight: 600; color: var(--doux); }
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; }
select { min-height: 48px; background-image: none; }
.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; }

/* Un lien rattaché à un site (une recherche, un profil) : sous sa ligne, en retrait. */
.recherche-site { margin: -2px 0 2px 46px; }
.recherche-site .btn-lien { white-space: normal; text-align: left; min-height: 44px; padding: 0 4px; }
.maj-appli + .signature { margin-top: 2px; }