/* Page Articles (cartes-compteurs, liste) et page d'un article (aperçu Google, points, faits). */
.osa-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: var(--gap); }
.osa-card { display: grid; gap: 2px; text-align: left; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 12px; background: var(--surface, #fff); color: inherit; font: inherit; cursor: pointer; }
.osa-card:hover { border-color: var(--muted); }
.osa-card.is-on { border-color: currentColor; box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 18%, transparent); }
.osa-card.is-todo .osa-count { color: #b45309; }
.osa-count { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.osa-label { font-size: var(--fs-meta); color: var(--muted); }
.osa-rows { list-style: none; margin: 0; padding: 0; }
.osa-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--rule); }
.osa-row:last-child { border-bottom: 0; }
.osa-link { flex: 1; min-width: 0; display: grid; gap: 4px; color: inherit; text-decoration: none; }
.osa-side { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.osa-check { display: flex; align-items: center; gap: 8px; font-size: var(--fs-meta); }
.osa-explain { margin: 8px 0 0; }
.osa-google { display: grid; gap: 8px; }
.osa-serp { padding: 12px 14px; border: 1px solid var(--rule); border-radius: 10px; background: #fff; color: #202124; font-family: Arial, sans-serif; overflow-wrap: anywhere; }
.osa-serp-url { font-size: 12px; color: #4d5156; }
.osa-serp-title { font-size: 19px; line-height: 1.3; color: #1a0dab; margin: 2px 0; }
.osa-serp-desc { font-size: 14px; line-height: 1.5; color: #4d5156; }
.osa-count-line { margin: 0; color: var(--muted); }
.osa-count-line.is-warn { color: #b45309; }
.osa-points, .osa-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.osa-facts li { padding-bottom: 6px; }
.osa-fold > summary { cursor: pointer; font-weight: 500; }
.osa-fold > p { margin: 6px 0 4px; overflow-wrap: anywhere; }
.osa-all > summary { font-weight: 600; margin-bottom: 8px; }
.osa-point-line { display: block; padding-left: 4px; }
@media (max-width: 720px) {
  .osa-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .osa-row { flex-direction: column; align-items: stretch; }
  .osa-side { justify-content: flex-start; }
}

/* Article dont la rédaction est demandée mais pas encore démarrée */
.is-launching { opacity: 0.85; }
.os-wait { display: grid; gap: 4px; max-width: 420px; }
.os-wait-bar { position: relative; display: block; height: 4px; border-radius: 2px; overflow: hidden; background: var(--rule); }
.os-wait-bar::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 35%; border-radius: 2px; background: var(--st-en_production, #2f6fd6); animation: os-wait-slide 1.4s ease-in-out infinite; }
@keyframes os-wait-slide { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
@media (prefers-reduced-motion: reduce) { .os-wait-bar::after { animation: none; width: 100%; opacity: 0.4; } }

/* Avancement animé : des chevrons glissent doucement vers la droite sur la partie remplie. */
.os-prod .track span::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.28) 0 8px, transparent 8px 18px);
  background-size: 36px 100%; animation: os-prod-slide 1.6s linear infinite;
}
@keyframes os-prod-slide { from { background-position: 0 0; } to { background-position: 36px 0; } }
@media (prefers-reduced-motion: reduce) { .os-prod .track span::after { animation: none; } }