/* ════ /home vivant : état du moment, entrée animée, live qui respire ════ */
/* ligne d'état sous le titre */
.h2-marque p.h2-etat { display: block; color: var(--text-secondary); transition: opacity .26s ease, translate .26s ease; translate: 0 0; }
.h2-marque p.h2-etat.sort { opacity: 0; translate: 0 -6px; }
.h2-marque p.h2-etat.entre { opacity: 0; translate: 0 6px; transition: none; }
.h2-marque p.h2-etat.live { color: #ff7a6e; font-weight: 600; }
.h2-marque p.h2-etat.ok { color: #5fd884; }
.h2-marque p.h2-etat.info { cursor: pointer; }
.h2-marque p.h2-etat.info:hover { color: #fff; }
.pt { display: inline-block; width: 7px; height: 7px; margin-right: 7px; vertical-align: 1px; border-radius: 50%; background: var(--wc-red); box-shadow: 0 0 0 0 rgba(255,69,58,.6); animation: h2-onde 1.6s infinite; flex: none; }
.pt.bleu { background: var(--accent); animation: none; }
@keyframes h2-onde { 0% { box-shadow: 0 0 0 0 rgba(255,69,58,.55); } 70% { box-shadow: 0 0 0 7px rgba(255,69,58,0); } 100% { box-shadow: 0 0 0 0 rgba(255,69,58,0); } }
/* lignes vivantes des grandes tuiles (remplacent la description) */
.h2-vif { display: none; }
body.d-c .card.featured .h2-vif { display: block; margin-top: 4px; font-size: 13px; color: var(--text-secondary); line-height: 1.45; position: relative; z-index: 1; }
body.d-c .card.featured.a-vif .card-desc { display: none !important; }
.h2-vif b { color: #fff; font-weight: 600; }
.h2-vif em { font-style: normal; color: var(--wc-orange); font-weight: 600; }
.h2-vif .pt { margin-right: 6px; }
body.d-c .card.featured .card-content { text-align: left !important; align-self: stretch; }
.h2-chrono { font-variant-numeric: tabular-nums; color: #fff; letter-spacing: .02em; }
/* tuile du live en cours : bord qui respire + courbe du débit */
body.d-c .card.featured.en-direct { --t: 255,69,58; animation: h2-respire 2.8s ease-in-out infinite !important; }
body.d-c .card.featured.en-direct.perturbe { --t: 255,159,10; }
@keyframes h2-respire { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 0 rgba(var(--t),0); } 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 26px -4px rgba(var(--t),.45); } }
.h2-spark { position: absolute; right: 14px; bottom: 12px; width: min(42%, 260px); height: 44px; pointer-events: none; opacity: .95; }
.h2-spark { clip-path: inset(0 0 0 0); animation: h2-devoile 1.2s ease-out both; }
.h2-spark.fixe { animation: none; }
.h2-spark .trait { fill: none; stroke: rgb(var(--t, 255,69,58)); stroke-width: 2; vector-effect: non-scaling-stroke; }
.h2-spark .aire { fill: rgba(var(--t, 255,69,58), .14); }
@keyframes h2-devoile { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.card:not(.featured) .h2-spark { display: none; }
@media (max-width: 700px) { .h2-spark { width: 48%; height: 32px; top: 40px; bottom: auto; right: 14px; opacity: .85; } body.d-c .card.featured .h2-vif { font-size: 12px; } }
/* lueur qui suit le pointeur sur les grandes tuiles */
body.d-c .card.featured { position: relative; }
body.d-c .card.featured::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--t), .16), transparent 70%); }
body.d-c .card.featured:hover::before { opacity: 1; }
body.d-c .card.featured > .card-icon, body.d-c .card.featured > .card-content { position: relative; }
/* pastilles : l'icône réagit au survol */
body.d-c .card .card-icon { transition: transform .25s cubic-bezier(.34,1.56,.64,1), background .2s; }
body.d-c .card:not(.featured):hover .card-icon { transform: scale(1.12) rotate(-6deg); }
body.d-c .card.featured:hover .card-icon { transform: translateY(-2px) scale(1.05); }
body.d-c .card:not(.featured) { transition: border-color .2s, background .2s, translate .2s !important; }
body.d-c .card:not(.featured):hover { translate: 0 -2px; }
/* indicateur qui vient de changer */
.h2-badge.pop { animation: h2-pop .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes h2-pop { 0% { scale: 1; } 40% { scale: 1.35; } 100% { scale: 1; } }
@media (prefers-reduced-motion: reduce) {
  body.d-c .card.featured.en-direct, .pt, .h2-spark, .h2-badge.pop { animation: none !important; }
  .h2-marque p.h2-etat { transition: none; }
}