/*
 * GÉNÉRATION DE PARCOURS IA EN ARRIÈRE-PLAN (16/10/2026, lot 2) — la carte du
 * Studio, la pastille de l'en-tête, le bouton « Continuer en arrière-plan ».
 * Logique : script/js/qzr-parcours-ia-fond.js ; conception :
 * docs/design/PARCOURS_IA_ARRIERE_PLAN.md.
 */

/* ── La carte du Studio (en tête, au-dessus des onglets) ─────────────────── */
.studio-pag { margin-bottom: var(--qz-5, 20px); }
.studio-pag[hidden] { display: none; }

.qzr-pag-carte {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 20px;
  border: 1px solid var(--qz-line);
  background: var(--qz-surface);
  color: var(--qz-text);
  /* Le Studio centre son texte : la carte se lit de gauche à droite. */
  text-align: left;
  box-shadow: var(--qz-shadow-sm, none);
}
.qzr-pag-carte--interrompu { border-color: color-mix(in srgb, var(--qz-danger) 40%, transparent); }

.qzr-pag-carte__tete { display: flex; align-items: center; gap: 12px; min-width: 0; }
.qzr-pag-carte__tete > div { min-width: 0; }
.qzr-pag-carte__ico {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 12px;
  display: grid; place-items: center;
  font-size: 18px;
  background: var(--qz-accent-soft);
  color: var(--qz-accent-ink);
}
.qzr-pag-carte--interrompu .qzr-pag-carte__ico {
  background: color-mix(in srgb, var(--qz-danger) 14%, transparent);
  color: var(--qz-danger);
}
.qzr-pag-carte__ico.is-anime { animation: qzr-pag-pulse 1.6s ease-in-out infinite; }
@keyframes qzr-pag-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.92); opacity: .6; } }

.qzr-pag-carte__titre { margin: 0; font-size: var(--qz-fs-body, 1rem); font-weight: var(--qz-fw-strong, 600); }
.qzr-pag-carte__sous {
  margin: 0;
  font-size: var(--qz-fs-sm, .86rem);
  color: var(--qz-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qzr-pag-carte__texte { margin: 0; font-size: var(--qz-fs-sm, .86rem); color: var(--qz-muted); }

.qzr-pag-carte__barre {
  height: 8px;
  border-radius: var(--qz-r-pill, 999px);
  background: var(--qz-accent-soft);
  overflow: hidden;
}
.qzr-pag-carte__barre > i {
  display: block; height: 100%;
  border-radius: inherit;
  background: var(--qz-accent);
  transition: width .4s ease;
}

.qzr-pag-carte__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.qzr-pag-carte__actions .btn-ux { min-height: 38px; }

@media (prefers-reduced-motion: reduce) {
  .qzr-pag-carte__ico.is-anime, .qzr-pag-pastille__ico { animation: none; }
  .qzr-pag-carte__barre > i { transition: none; }
}

/* ── La pastille de l'en-tête (fil d'Ariane, ou à côté de la cloche) ─────── */
.qzr-pag-pastille-hote { display: inline-flex; align-items: center; }
/* Fil d'Ariane : à droite du titre, comme le « + » du Studio (vnext-studio.css). */
/* margin-right : le pendant du `mx-2` du bouton retour, à gauche (recette du
   16/10 : collée au bord droit, à 386 px comme sur ordinateur). */
.qzr-pag-pastille-hote--fil { margin-left: auto; margin-right: .5rem; }
.qzr-pag-pastille-hote--fil::before { content: none !important; }  /* pas de "/" */
/* Accueil : la cloche est poussée à droite (margin-left:auto) ; la pastille
   prend cette poussée pour rester collée à elle. */
.qzv-topbar .qzr-pag-pastille-hote--accueil { margin-left: auto; }
.qzv-topbar .qzr-pag-pastille-hote--accueil + .qzv-bell { margin-left: 0; }
.qzr-pag-pastille {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--qz-line);
  border-radius: var(--qz-r-pill, 999px);
  background: var(--qz-surface);
  color: var(--qz-accent-ink);
  font-size: var(--qz-fs-xs, .78rem);
  font-weight: var(--qz-fw-strong, 600);
  white-space: nowrap;
  cursor: pointer;
}
.qzr-pag-pastille__ico { animation: qzr-pag-pulse 1.6s ease-in-out infinite; }
.qzr-pag-pastille__court { display: none; }
/* Téléphone : le titre du fil d'Ariane garde sa place, la pastille dit « 2/5 ». */
@media (max-width: 767.98px) {
  .qzr-pag-pastille-hote--fil .qzr-pag-pastille { padding: 0 10px; }
  .qzr-pag-pastille-hote--fil .qzr-pag-pastille__long { display: none; }
  .qzr-pag-pastille-hote--fil .qzr-pag-pastille__court { display: inline; }
}

/* ── Le bouton « Continuer en arrière-plan » de la modale ───────────────── */
.qzr-pb__ai-fond { margin-top: 6px; }
.qzr-pb__ai-fond-aide { display: block; max-width: 34ch; margin: 2px auto 0; text-align: center; }