/* ============================================================
   wiki-visuals.css , camada visual das páginas de evento ricas.
   Portado de ocalendario.com.br (2026-06-25, reforma de enriquecimento).
   Componentes reutilizáveis (SSOT de estilo). O HTML virá de um renderer
   (jours-feries/data/wiki_render.php, a portar na Fase 1) alimentado pelos
   dados de cada evento. Dark-safe, usa variáveis com fallback.
   Ver SPEC_ENRIQUECIMENTO_2026-06-25.md.
   ============================================================ */

/* -------- Stat cards (ex.: applicabilité par territoire DROM-COM) -------- */
.wiki-statgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin: 20px 0;
}
.wiki-stat {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding: 13px 15px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 14px;
    background: var(--card-bg, #ffffff);
}
.wiki-stat__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--primary-color, #0071e3) 13%, #fff);
    color: var(--primary-color, #0071e3);
    flex-shrink: 0;
}
.wiki-stat__icon svg { width: 21px; height: 21px; }
.wiki-stat__body { display: flex; flex-direction: column; min-width: 0; }
.wiki-stat__value {
    display: block;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.18;
    color: var(--hfr-text-deep, #10243f);
    overflow-wrap: anywhere;
}
.wiki-stat__label {
    display: block;
    font-size: 0.72rem;
    color: var(--muted-color, #64748b);
    margin-top: 1px;
    overflow-wrap: anywhere;
}

/* -------- Visual timeline (histoire de l'événement) -------- */
.wiki-timeline { position: relative; margin: 20px 0; padding-left: 30px; }
.wiki-timeline::before {
    content: "";
    position: absolute;
    left: 9px; top: 6px; bottom: 6px;
    width: 2px;
    background: var(--border-color, #e2e8f0);
}
.wiki-timeline__item { position: relative; padding-bottom: 16px; }
.wiki-timeline__item:last-child { padding-bottom: 0; }
.wiki-timeline__item::before {
    content: "";
    position: absolute;
    left: -25px; top: 4px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--primary-color, #0071e3);
    border: 3px solid var(--card-bg, #fff);
    box-shadow: 0 0 0 1px var(--border-color, #e2e8f0);
}
.wiki-timeline__year { font-weight: 800; color: var(--primary-color, #0071e3); }
.wiki-timeline__text { display: block; margin-top: 2px; }

/* -------- Photo inline (figure avec légende + crédit/licence) -------- */
.wiki-figure { margin: 20px 0; }
.wiki-figure img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 14px;
    display: block;
    background: var(--border-color, #e2e8f0);
}
.wiki-figure figcaption {
    font-size: 0.76rem;
    color: var(--muted-color, #64748b);
    margin-top: 7px;
    line-height: 1.4;
}
.wiki-figure figcaption a { color: var(--muted-color, #64748b); text-decoration: underline; }

/* -------- Réponse rapide (bloc de micro-intention ancré au pilier) -------- */
.resposta-rapida {
    margin: 0 0 28px;
    padding: 18px 20px 6px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 14px;
    background: var(--card-bg, #f8fafc);
}
.resposta-rapida__title {
    margin: 0 0 12px;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--text-color, #0f172a);
}
.resposta-rapida__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px 22px;
    margin: 0;
}
.resposta-rapida__item {
    min-width: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}
.resposta-rapida__q {
    margin: 0 0 3px;
    font-size: .80rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #2563eb;
}
.resposta-rapida__a {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-color, #334155);
}
.resposta-rapida__a a {
    color: #2563eb;
    text-decoration: none;
    border-bottom: 1px solid rgba(37, 99, 235, 0.35);
}
.resposta-rapida__a a:hover { border-bottom-color: #2563eb; }

/* -------- Dark mode -------- */
body.dark-mode .wiki-stat { background: rgba(17, 24, 39, 0.55); border-color: rgba(148, 163, 184, 0.22); }
body.dark-mode .wiki-stat__icon { background: rgba(0, 113, 227, 0.20); color: #7dd3fc; }
body.dark-mode .wiki-stat__value { color: #e5eef9; }
body.dark-mode .wiki-stat__label,
body.dark-mode .wiki-figure figcaption { color: #94a3b8; }
body.dark-mode .wiki-timeline::before { border-color: rgba(148, 163, 184, 0.22); }
body.dark-mode .wiki-timeline__item::before { border-color: #0f172a; box-shadow: 0 0 0 1px rgba(148,163,184,0.3); }

@media (max-width: 560px) {
    .resposta-rapida { padding: 15px 16px 4px; }
    .resposta-rapida__list { grid-template-columns: 1fr; }
}