/* ──────────────────────────────────────────────────────────────────────────
   TJC Stats Widget — Frontend styles v1.1
   ────────────────────────────────────────────────────────────────────────── */

.tjc-stats-widget {
    --tjc-accent:      #E8630A;
    --tjc-text-value:  #FFFFFF;
    --tjc-text-label:  #CCCCCC;
    --tjc-icon-color:  #E8630A;
    --tjc-bg:          transparent;
    --tjc-font-value:  22px;
    --tjc-font-label:  13px;
    --tjc-font-weight: 700;
    --tjc-gap:         18px;
    --tjc-icon-size:   28px;

    display: flex;
    flex-direction: column;
    gap: var(--tjc-gap);
    background: var(--tjc-bg);
    font-family: inherit;
}

/* ── Layouts ─────────────────────────────────────────────────────────────── */
.tjc-layout-horizontal { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
.tjc-layout-grid       { display: grid; grid-template-columns: 1fr 1fr; gap: var(--tjc-gap); }

/* ── Item ────────────────────────────────────────────────────────────────── */
.tjc-stat-item {
    display: flex;
    align-items: center;
    gap: 10px;
}
.tjc-layout-horizontal .tjc-stat-item { flex: 0 0 auto; }

/* ── Icône ───────────────────────────────────────────────────────────────── */
.tjc-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width:  calc( var(--tjc-icon-size) * 1.6 );
    height: calc( var(--tjc-icon-size) * 1.6 );
    background: rgba( 232, 99, 10, 0.12 );
    border-radius: 50%;
}
.tjc-stat-icon svg {
    width:  var(--tjc-icon-size);
    height: var(--tjc-icon-size);
    color:  var(--tjc-icon-color);
    stroke: var(--tjc-icon-color);
    display: block;
}

/* ── Texte commun ────────────────────────────────────────────────────────── */
.tjc-stat-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

/* ── Mode "value" : chiffre animé ────────────────────────────────────────── */
.tjc-stat-value {
    font-size:   var(--tjc-font-value);
    font-weight: var(--tjc-font-weight);
    color:       var(--tjc-text-value);
    line-height: 1;
    letter-spacing: -0.5px;
}

/* ── Mode "text" : texte libre ───────────────────────────────────────────── */
/* Par défaut hérite de la taille globale, surchargeable en inline style */
.tjc-stat-freetext {
    font-size:   var(--tjc-font-value);
    font-weight: var(--tjc-font-weight);
    color:       var(--tjc-text-value);
    line-height: 1.25;
}

/* ── Libellé secondaire ──────────────────────────────────────────────────── */
.tjc-stat-label {
    font-size:  var(--tjc-font-label);
    color:      var(--tjc-text-label);
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Animation d'entrée ──────────────────────────────────────────────────── */
.tjc-stat-item {
    opacity: 0;
    transform: translateY(10px);
    animation: tjcFadeUp 0.4s ease forwards;
}
.tjc-stat-item:nth-child(1) { animation-delay: 0.05s; }
.tjc-stat-item:nth-child(2) { animation-delay: 0.15s; }
.tjc-stat-item:nth-child(3) { animation-delay: 0.25s; }
.tjc-stat-item:nth-child(4) { animation-delay: 0.35s; }

@keyframes tjcFadeUp {
    to { opacity: 1; transform: none; }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .tjc-layout-horizontal { flex-direction: column; }
    .tjc-layout-grid       { grid-template-columns: 1fr; }
}