/* ===========================================
   Category Cloud Footer — Styles de base
   Toutes les valeurs visuelles viennent des
   custom properties injectées via PHP.
   =========================================== */

/* ── Conteneur principal ─────────────────── */
.cc-cloud-wrapper {
    background:       var(--cc-cloud-bg, transparent);
    padding:          var(--cc-cloud-pad-v, 30px) var(--cc-cloud-pad-h, 40px);
    max-width:        var(--cc-cloud-max-w, 1200px);
    margin-inline:    auto;
    text-align:       var(--cc-cloud-align, center);
    backdrop-filter:  var(--cc-backdrop, none);
    -webkit-backdrop-filter: var(--cc-backdrop, none);
    box-sizing:       border-box;
    width:            100%;
}

/* ── Titre ───────────────────────────────── */
.cc-cloud-title {
    font-family:    var(--cc-font-family, inherit);
    font-size:      0.7em;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    opacity:        0.5;
    margin-bottom:  1em;
}

/* ── Conteneur des tags ──────────────────── */
.cc-tags-container {
    display:          flex;
    flex-wrap:        wrap;
    gap:              var(--cc-tag-gap, 10px);
    justify-content:  var(--cc-cloud-align, center);
    align-items:      center;
}

.cc-flow .cc-tags-container {
    align-items: center;
}

/* En mode scatter les tags ont des translateY aléatoires (via JS inline) */
.cc-scatter .cc-tags-container {
    align-items: center;
}

/* ── Tags ────────────────────────────────── */
.cc-tag {
    display:          inline-flex;
    align-items:      center;
    gap:              6px;
    font-family:      var(--cc-font-family, inherit);
    color:            var(--cc-tag-color, #334155);
    background:       var(--cc-tag-bg, transparent);
    border:           var(--cc-tag-border-width, 1px) solid var(--cc-tag-border, #cbd5e1);
    border-radius:    var(--cc-tag-radius, 999px);
    padding:          var(--cc-tag-pad-v, 6px) var(--cc-tag-pad-h, 14px);
    letter-spacing:   var(--cc-letter-spacing, 0em);
    text-transform:   var(--cc-text-transform, none);
    text-decoration:  none;
    box-shadow:       var(--cc-tag-shadow, none);
    transition:
        color            var(--cc-hover-duration, 300ms) ease,
        background       var(--cc-hover-duration, 300ms) ease,
        border-color     var(--cc-hover-duration, 300ms) ease,
        box-shadow       var(--cc-hover-duration, 300ms) ease,
        transform        var(--cc-hover-duration, 300ms) cubic-bezier(.34,1.56,.64,1),
        filter           var(--cc-hover-duration, 300ms) ease,
        opacity          var(--cc-hover-duration, 300ms) ease;
    white-space:      nowrap;
    cursor:           pointer;
    will-change:      transform;
    position:         relative;
}

.cc-tag:hover,
.cc-tag:focus-visible {
    color:        var(--cc-tag-color-hover, #ffffff);
    background:   var(--cc-tag-bg-hover, #334155);
    border-color: var(--cc-tag-border-hover, #334155);
    box-shadow:   var(--cc-tag-shadow-hover, none);
    outline:      none;
}

/* ── Badge compteur ──────────────────────── */
.cc-badge {
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    min-width:     18px;
    height:        18px;
    padding:       0 5px;
    font-size:     0.65em;
    font-weight:   700;
    border-radius: 999px;
    background:    var(--cc-badge-bg, #e2e8f0);
    color:         var(--cc-badge-color, #475569);
    line-height:   1;
    transition:    background var(--cc-hover-duration, 300ms) ease,
                   color      var(--cc-hover-duration, 300ms) ease;
}

.cc-tag:hover .cc-badge {
    background: rgba(255,255,255,.2);
    color:      inherit;
}

/* ══════════════════════════════════════════
   EFFETS HOVER
   ══════════════════════════════════════════ */

/* ── Float ───────────────────────────────── */
.cc-effect-float .cc-tag:hover {
    transform: translateY(var(--cc-hover-float-y, -6px));
}

/* ── Scale ───────────────────────────────── */
.cc-effect-scale .cc-tag:hover {
    transform: scale(var(--cc-hover-scale, 1.15))
               translateY(var(--cc-hover-float-y, -3px));
}

/* ── Glow ────────────────────────────────── */
.cc-effect-glow .cc-tag:hover {
    box-shadow:
        0 0 0 2px var(--cc-hover-glow, #6366f1),
        0 0 20px 4px color-mix(in srgb, var(--cc-hover-glow, #6366f1) 40%, transparent),
        var(--cc-tag-shadow-hover, none);
    transform: translateY(var(--cc-hover-float-y, -2px));
}

/* ── Swing ───────────────────────────────── */
@keyframes cc-swing {
    0%   { transform: rotate(0deg); }
    20%  { transform: rotate(-8deg); }
    50%  { transform: rotate(6deg); }
    75%  { transform: rotate(-3deg); }
    100% { transform: rotate(0deg); }
}
.cc-effect-swing .cc-tag:hover {
    animation: cc-swing var(--cc-hover-duration, 300ms) ease forwards;
    transform-origin: top center;
}

/* ── Blur siblings ───────────────────────── */
/* Géré via JS (ajout de classe .cc-siblings-blur) */
.cc-effect-blur-siblings .cc-tag.cc-dimmed {
    opacity: 0.3;
    filter:  blur(1px);
}
.cc-effect-blur-siblings .cc-tag:hover,
.cc-effect-blur-siblings .cc-tag:focus-visible {
    opacity: 1;
    filter:  none;
    transform: scale(1.08);
}

/* ══════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════ */
@media (max-width: 640px) {
    .cc-cloud-wrapper {
        padding: 20px 16px;
    }
    .cc-tags-container {
        gap: 8px;
    }
}