/* ============================================================================
   shell.css — chrome commun aux 4 pages de la console (console, démo,
   assistant, prompts).

   AUTONOME PAR CONSTRUCTION : ce fichier ne réutilise AUCUN token des pages
   (elles n'ont pas le même jeu — `--text`/`--navy` d'un côté, `--ink`/
   `--accent-lift` de l'autre). Tout est préfixé `--pa-` et défini ici, sinon
   le bandeau change d'aspect selon la page qui l'accueille.

   SPÉCIFICITÉ : `index.html` et `config.html` portent des règles sur le
   sélecteur d'élément `header` (0,0,1). Toutes les règles du bandeau sont donc
   écrites `header.pa-nav` (0,1,1) — elles gagnent quel que soit l'ordre de
   chargement des feuilles.
   ========================================================================= */

:root {
  /* Marque (charte graphique). Valeurs par défaut de la plateforme ; une charte
     enregistrée les surcharge (shell.js, spécificité html:root:root). */
  --pa-brand: #1f3a5f; --pa-on-brand: #ffffff;
  --pa-brand-ui: #1f3a5f; --pa-on-brand-ui: #ffffff; --pa-brand-ui-hover: #274a78; --pa-brand-texte: #1f3a5f;
  --pa-brand-tint: rgba(31, 58, 95, .08); --pa-brand-tint-fort: rgba(31, 58, 95, .14);
  --pa-brand-2: #c98a12; --pa-on-brand-2: #111827; --pa-brand-2-texte: #8a5a00;
  --pa-brand-2-tint: rgba(201, 138, 18, .14);
  --pa-brand-2-sur-brand: #d9a441;   /* secondaire lisible SUR la principale (4,5:1) */
  --pa-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --pa-bar: #1f3a5f;
  --pa-bar-line: rgba(255, 255, 255, .10);
  --pa-on-bar: #ffffff;
  --pa-on-bar-soft: rgba(255, 255, 255, .70);
  --pa-hover: rgba(255, 255, 255, .12);
  --pa-active: rgba(255, 255, 255, .17);
  --pa-foot-ink: #6b7684;
  --pa-foot-line: #d7dee8;
  --pa-foot-link: #1f3a5f;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pa-brand: #131c27; --pa-on-brand: #e6ebf2;
    --pa-brand-ui: #4d7cc0; --pa-on-brand-ui: #ffffff; --pa-brand-ui-hover: #5f8cce; --pa-brand-texte: #7aa7e0;
    --pa-brand-tint: rgba(122, 167, 224, .12); --pa-brand-tint-fort: rgba(122, 167, 224, .2);
    --pa-brand-2: #e0ab4c; --pa-on-brand-2: #1a1406; --pa-brand-2-texte: #e0ab4c;
    --pa-brand-2-tint: rgba(224, 171, 76, .16);
    --pa-brand-2-sur-brand: #e0ab4c;
    --pa-bar: #131c27;
    --pa-bar-line: #26303d;
    --pa-on-bar: #e6ebf2;
    --pa-on-bar-soft: #9aa7b6;
    --pa-hover: rgba(255, 255, 255, .07);
    --pa-active: rgba(255, 255, 255, .11);
    --pa-foot-ink: #9aa7b6;
    --pa-foot-line: #26303d;
    --pa-foot-link: #7aa7e0;
  }
}
:root[data-theme="dark"] {
  --pa-brand: #131c27; --pa-on-brand: #e6ebf2;
  --pa-brand-ui: #4d7cc0; --pa-on-brand-ui: #ffffff; --pa-brand-ui-hover: #5f8cce; --pa-brand-texte: #7aa7e0;
  --pa-brand-tint: rgba(122, 167, 224, .12); --pa-brand-tint-fort: rgba(122, 167, 224, .2);
  --pa-brand-2: #e0ab4c; --pa-on-brand-2: #1a1406; --pa-brand-2-texte: #e0ab4c;
  --pa-brand-2-tint: rgba(224, 171, 76, .16);
  --pa-brand-2-sur-brand: #e0ab4c;
  --pa-bar: #131c27;
  --pa-bar-line: #26303d;
  --pa-on-bar: #e6ebf2;
  --pa-on-bar-soft: #9aa7b6;
  --pa-hover: rgba(255, 255, 255, .07);
  --pa-active: rgba(255, 255, 255, .11);
  --pa-foot-ink: #9aa7b6;
  --pa-foot-line: #26303d;
  --pa-foot-link: #7aa7e0;
}

/* ── Bandeau ──────────────────────────────────────────────────────────── */
header.pa-nav {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 18px;
  /* index.html et config.html posent `flex-wrap: wrap` sur le selecteur
     d'element `header` : sans ce nowrap, le bandeau se replierait sur deux
     lignes au lieu de laisser defiler la bande d'onglets. */
  flex-wrap: nowrap;
  margin: 0; padding: 0 20px; min-height: 56px;
  background: var(--pa-bar); color: var(--pa-on-bar);
  /* Filet de la couleur secondaire : la charte se voit sur toutes les pages,
     même celles qui n'utilisent que la principale. */
  border-bottom: 3px solid var(--pa-brand-2);
  font-family: var(--pa-font);
  font-size: 14px; line-height: 1.4;
}
/* Variante des pages déjà enfermées dans une ossature 100dvh (assistant) :
   la position sticky y est inutile et casse le calcul de hauteur du flex. */
header.pa-nav.pa-nav--static { position: static; flex: 0 0 auto; }

header.pa-nav a { text-decoration: none; }

header.pa-nav .pa-nav__brand {
  display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
  color: inherit; padding: 6px 0;
}
header.pa-nav .pa-nav__logo {
  width: 32px; height: 32px; flex: 0 0 auto; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--pa-hover); color: var(--pa-on-bar);
}
header.pa-nav .pa-nav__logo svg { width: 19px; height: 19px; display: block; }
/* Logo de la charte : une image dans une tuile BLANCHE — un logo pensé pour un
   fond clair disparaîtrait sur la barre de marque. Un logo horizontal élargit
   la tuile au lieu d'être réduit à un timbre-poste. */
header.pa-nav .pa-nav__logo.a-image {
  width: auto; min-width: 32px; max-width: 136px; padding: 4px 7px; background: #fff;
}
header.pa-nav .pa-nav__logo.a-image img {
  display: block; height: 24px; width: auto; max-width: 122px; object-fit: contain;
}
header.pa-nav .pa-nav__name {
  display: block; font-size: 14.5px; font-weight: 700; letter-spacing: .1px; color: var(--pa-on-bar);
}
header.pa-nav .pa-nav__sub {
  display: block; font-size: 11.5px; color: var(--pa-on-bar-soft); margin-top: 1px;
}

/* Onglets : bande scrollable horizontalement plutôt que repliée sur deux
   lignes — le bandeau garde une hauteur constante d'une page à l'autre. */
header.pa-nav .pa-nav__links {
  display: flex; align-items: center; gap: 2px; flex: 1 1 auto; min-width: 0;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
header.pa-nav .pa-nav__links::-webkit-scrollbar { display: none; }
/* L'onglet actif est un <span>, pas un <a> (cf. shell.js) : styler `a` ici
   laisserait la page courante sans son fond. Tout passe par la classe. */
header.pa-nav .pa-nav__links-item {
  flex: 0 0 auto;
  padding: 7px 12px; border-radius: 8px;
  color: var(--pa-on-bar-soft); font-size: 13.5px; font-weight: 600;
  border: 1px solid transparent; white-space: nowrap;
  transition: background .12s, color .12s;
}
header.pa-nav a.pa-nav__links-item:hover { background: var(--pa-hover); color: var(--pa-on-bar); }
header.pa-nav .pa-nav__links-item.is-active {
  background: var(--pa-active); color: var(--pa-on-bar);
  border-color: var(--pa-bar-line);
  cursor: default;
}
header.pa-nav .pa-nav__links-item .pa-ic { margin-right: 6px; opacity: .9; }

header.pa-nav .pa-nav__actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
header.pa-nav .pa-nav__actions:empty { display: none; }

header.pa-nav .pa-nav__out {
  flex: 0 0 auto; padding: 6px 10px; border-radius: 8px;
  color: var(--pa-on-bar-soft); font-size: 12.5px; font-weight: 600;
}
header.pa-nav .pa-nav__out:hover { background: var(--pa-hover); color: var(--pa-on-bar); }

header.pa-nav :focus-visible { outline: 2px solid var(--pa-on-bar); outline-offset: 2px; }

@media (max-width: 720px) {
  header.pa-nav { gap: 12px; padding: 0 12px; }
  header.pa-nav .pa-nav__sub { display: none; }
  header.pa-nav .pa-nav__out { display: none; } /* reste joignable depuis le pied */
}

/* ── Pied de page ─────────────────────────────────────────────────────── */
footer.pa-foot {
  display: flex; align-items: center; justify-content: center;
  gap: 6px 14px; flex-wrap: wrap;
  margin: 0; padding: 20px 24px 26px;
  color: var(--pa-foot-ink); font-size: 12px; text-align: center;
  border-top: 1px solid var(--pa-foot-line);
  font-family: var(--pa-font);
}
footer.pa-foot a { color: var(--pa-foot-link); text-decoration: none; }
footer.pa-foot a:hover { text-decoration: underline; }
footer.pa-foot .pa-foot__sep { opacity: .45; }
/* Emplacement de version : vide sur les pages qui n'en publient pas. On masque
   la puce ET le separateur qui la precede, sinon le pied affiche « · · ». */
footer.pa-foot .pa-foot__ver:empty { display: none; }
footer.pa-foot .pa-foot__sep:has(+ .pa-foot__ver:empty) { display: none; }

/* Fenêtre d'avertissement du site (PA.confirmerEngagement, outils.js). Ici et non dans
   app.css : la démo n'a pas l'ossature client mais télécharge aussi le mémoire. Les pages
   n'ont pas le même jeu de neutres (--surface, --card, --border…) : on prend le premier défini. */
.pa-dialogue {
  width: min(480px, calc(100vw - 32px)); padding: 26px 26px 20px; border-radius: 16px;
  border: 1px solid var(--line, var(--border, #d9d1c1));
  background: var(--surface, var(--card, #fffdf9)); color: var(--ink, #1c2430);
  box-shadow: 0 18px 44px rgba(16, 24, 40, .28);
}
.pa-dialogue::backdrop { background: rgba(10, 16, 24, .5); backdrop-filter: blur(2px); }
.pa-dialogue__ic {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 12px;
  background: var(--err-bg, #fdeceb); color: var(--err, #b42318);
}
.pa-dialogue .pa-dialogue__ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pa-dialogue h2 { margin: 0 0 8px; font-size: 20px; }
.pa-dialogue p { margin: 0; line-height: 1.55; color: var(--ink-soft, inherit); }
.pa-dialogue__pied { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.pa-dialogue__btn {
  height: 40px; padding: 0 18px; border-radius: 10px; font: inherit; font-weight: 600; cursor: pointer;
  border: 1px solid var(--line, var(--border, #d9d1c1)); background: transparent; color: inherit;
}
.pa-dialogue__btn--ok { background: var(--pa-brand-ui); border-color: var(--pa-brand-ui); color: var(--pa-on-brand-ui); }
.pa-dialogue__btn:focus-visible { outline: 2px solid var(--pa-brand-texte); outline-offset: 2px; }