/* Le relevé de bienvenue d'une montée d'offre (dossier/27, N3 à N8 ; lot 19) : l'écran « Vos questions {Offre} » et le
   bandeau qui l'attend, dans la DA « Noir » (voiles, traits fins, accent bleu). Rien ne bouge que l'opacité du point ;
   sous prefers-reduced-motion, il reste fixe. */

/* Les bandeaux (relevé en cours, relevé de bienvenue) partagent la bande au-dessus du contenu. */
.bandeaux { grid-area: bandeau; min-width: 0; width: 100%; max-width: calc(var(--largeur-page) + 2 * var(--pad-contenu)); }
.bandeaux > .bandeau-encours { max-width: none; }
.bandeau-bienvenue { padding: 16px var(--pad-contenu) 0; }
.bandeau-bienvenue[hidden] { display: none; }
.bandeau-bienvenue button {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 48px; padding: 0 16px; border-radius: var(--rayon-3);
  background: var(--voile-2); border: 1px solid var(--bleu-trait); box-shadow: var(--trait-lumiere); font-size: 14px; color: var(--encre-2);
  text-align: left; cursor: pointer; transition: background var(--duree-rapide) var(--courbe), border-color var(--duree-rapide) var(--courbe);
}
.bandeau-bienvenue button:hover { background: var(--voile-3); border-color: var(--bleu-texte); }
.bandeau-bienvenue-point { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--bleu); animation: bienvenue-point 2.4s ease-in-out infinite; }
@keyframes bienvenue-point { 50% { opacity: 0.35; } }

/* L'écran */
.ecran-bienvenue .bienvenue-carte { max-width: 920px; }
.bienvenue-releve { margin-top: 4px; max-width: 72ch; }
.bienvenue-compteur { margin-top: 20px; font-size: var(--taille-petit); color: var(--encre-2); font-variant-numeric: tabular-nums; }
.bienvenue-compteur b { color: var(--encre); }
.bienvenue-compteur.plein b { color: var(--bleu-texte); }
.bienvenue-zone { margin-top: 12px; }
.bienvenue-liste { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bq-ligne {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; min-height: 52px; padding: 6px 12px 6px 6px;
  border-radius: var(--rayon-2); border: 1px solid var(--trait); background: var(--voile-1);
  transition: border-color var(--duree-rapide) var(--courbe), opacity var(--duree-rapide) var(--courbe);
}
.bq-ligne:has(input[type="checkbox"]:checked) { border-color: var(--bleu-trait); }
.bq-ligne.bq-ecartee { opacity: 0.55; }
.bq-texte {
  width: 100%; min-width: 0; height: 40px; padding: 0 10px; border-radius: var(--rayon-1); border: 1px solid transparent; background: transparent;
  font: inherit; font-size: 14px; color: var(--encre);
}
.bq-texte:hover { border-color: var(--trait); }
.bq-texte:focus { outline: none; border-color: var(--bleu-texte); box-shadow: var(--anneau-focus); background: var(--voile-2); }
.bq-type, .bq-mesure { flex: none; white-space: nowrap; }
.bienvenue-plein { margin-top: 10px; }
.bienvenue-plein[hidden] { display: none; }
.bienvenue-ajout { margin-top: 12px; }
.bienvenue-etat { margin-top: 16px; }
.bienvenue-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

@media (max-width: 640px) {
  .bandeau-bienvenue { padding: 12px var(--pad-contenu) 0; }
  .bq-ligne { grid-template-columns: auto minmax(0, 1fr); }
  .bq-type, .bq-mesure { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .bandeau-bienvenue-point { animation: none; }
  .bq-ligne, .bandeau-bienvenue button { transition: none; }
}

/* Le bandeau de l'accès offert (21/10/2026) : « se termine dans N jours » et « Garder mon abonnement » (bleu), sur tous
   les écrans de l'espace ; jamais une carte demandée avant (bandeau-offert.js). */
.bandeau-offert { padding: 12px var(--pad-contenu) 0; }
.bandeau-offert[hidden] { display: none; }
.bandeau-offert-contenu {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-height: 48px; padding: 8px 12px 8px 16px; border-radius: var(--rayon-3);
  background: var(--voile-2); border: 1px solid var(--bleu-trait); box-shadow: var(--trait-lumiere); font-size: 14px; color: var(--encre-2);
}
.bandeau-offert-point { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--bleu); }
.bandeau-offert-texte { flex: 1 1 260px; margin: 0; }
.bandeau-offert-aide { color: var(--encre-3); font-size: 13px; }