/* ════ /home : indicateurs, recherche globale, personnalisation, notifications ════ */
.h2-droite { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.h2-cloche { position: relative; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: #fff; display: grid; place-items: center; cursor: pointer; }
.h2-cloche svg { width: 17px; height: 17px; }
.h2-cloche-n { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--wc-r-s); background: var(--wc-red); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.h2-panneau { position: fixed; z-index: 1200; top: 70px; right: 16px; width: min(380px, calc(100vw - 32px)); max-height: min(70vh, 560px); overflow: auto; border-radius: var(--wc-r-xl); background: #0f1830; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 24px 60px rgba(0,0,0,.55); padding: 6px 0 10px; }
.h2-panneau-tete { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px 8px; }
.h2-panneau-tete b { font-size: 15px; } .h2-panneau-tete button { background: none; border: 0; color: var(--accent); font: inherit; font-size: 12.5px; cursor: pointer; }
.h2-panneau h4 { margin: 10px 16px 4px; font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-tertiary); }
.h2-notif { display: flex; gap: 11px; padding: 10px 16px; text-decoration: none; color: #fff; }
.h2-notif:hover { background: rgba(255,255,255,.05); }
.h2-notif .ic { font-size: 17px; width: 24px; text-align: center; flex: none; }
.h2-notif b { display: block; font-size: 13.5px; font-weight: 600; } .h2-notif small { display: block; font-size: 12px; color: var(--text-tertiary); margin-top: 2px; line-height: 1.4; }
.h2-notif.nouveau b::after { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-left: 7px; vertical-align: middle; }
.h2-notif.alerte b { color: var(--wc-rouge-corail); } .h2-notif.live b { color: #ff6b5e; }
.h2-panneau-vide { padding: 18px 16px; color: var(--text-tertiary); font-size: 13.5px; text-align: center; }
@media (max-width: 700px) { .h2-panneau { top: auto; bottom: 0; right: 0; left: 0; width: 100%; max-height: 75vh; border-radius: var(--wc-r-xl) var(--wc-r-xl) 0 0; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); } }
/* indicateurs sur les tuiles */
.h2-badge { position: absolute; top: 8px; right: 8px; padding: 2px 8px; border-radius: var(--wc-r-pilule); font-size: 11px; font-weight: 800; line-height: 18px; background: var(--accent); color: #fff; pointer-events: none; z-index: 2; }
.h2-badge.live { background: var(--wc-red); } .h2-badge.live::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #fff; margin-right: 5px; vertical-align: 1px; animation: h2-pouls 1.4s infinite; }
.h2-badge.alerte { background: var(--wc-orange); color: #1f1400; } .h2-badge.neutre { background: rgba(255,255,255,.16); }
@keyframes h2-pouls { 50% { opacity: .3; } }
body.d-c .card:not(.featured) .h2-badge { position: static; margin-left: 2px; }
/* résultats dans les contenus */
.h2-contenus { margin-top: 14px; border-radius: var(--wc-r-l); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); overflow: hidden; }
.h2-contenus h4 { margin: 10px 14px 4px; font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-tertiary); }
.h2-res { display: flex; align-items: center; gap: 11px; padding: 9px 14px; color: #fff; text-decoration: none; }
.h2-res:hover, .h2-res.actif { background: rgba(255,255,255,.06); }
.h2-res .ic { font-size: 17px; width: 24px; text-align: center; flex: none; }
.h2-res b { display: block; font-size: 14px; font-weight: 600; } .h2-res small { display: block; font-size: 12px; color: var(--text-tertiary); }
.h2-res .cat { margin-left: auto; font-size: 11px; color: var(--text-tertiary); white-space: nowrap; }
/* personnalisation */
.h2-actions { display: flex; gap: 14px; }
.h2-perso-barre { margin: 0 0 10px; padding: 10px 12px; border-radius: var(--wc-r-m); font-size: 13px; line-height: 1.5; color: var(--text-secondary); background: rgba(var(--wc-accent-rgb),.08); border: 1px solid rgba(var(--wc-accent-rgb),.25); }
.h2-perso-barre button { font: inherit; font-size: 12.5px; margin-left: 6px; padding: 4px 10px; border-radius: var(--wc-r-s); border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #fff; cursor: pointer; }
.card.h2-masque { display: none !important; }
body.h2-mode-perso .card.h2-masque { display: flex !important; opacity: .35; }
.h2-outils-carte { display: none; }
body.h2-mode-perso .card { outline: 1px dashed rgba(var(--wc-accent-rgb),.45); }
body.h2-mode-perso .h2-outils-carte { display: flex; gap: 4px; position: absolute; top: -8px; right: -6px; z-index: 3; }
.h2-outils-carte span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; background: #1b2a4d; border: 1px solid rgba(255,255,255,.18); cursor: pointer; }
.h2-outils-carte span.on { background: var(--accent); }
.h2-fleches { display: none; margin-left: auto; gap: 6px; }
body.h2-mode-perso .h2-fleches { display: flex; }
.h2-fleches button { width: 30px; height: 30px; border-radius: var(--wc-r-s); border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #fff; cursor: pointer; }
body.h2-mode-perso .h2-pin, body.h2-mode-epingle .h2-outils-carte { display: none !important; }
.h2-appareil { margin: 8px 12px 2px; padding: 12px; border-radius: var(--wc-r-l); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.h2-appareil b { color: #fff; display: block; margin-bottom: 4px; font-size: 13.5px; }
.h2-appareil .btns { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.h2-appareil button { font: inherit; font-size: 13px; font-weight: 600; padding: 8px 12px; border-radius: var(--wc-r-m); border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #fff; cursor: pointer; }
.h2-appareil button.principal { background: var(--accent); border-color: var(--accent); }
.h2-appareil .ok { color: var(--wc-green); font-weight: 600; }

.h2-calme .ligne { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; color: #fff; }
.h2-calme input[type=time] { font: inherit; font-size: 13px; color: #fff; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: var(--wc-r-s); padding: 5px 8px; color-scheme: dark; }
.h2-calme .inter { position: relative; width: 38px; height: 22px; flex: none; border-radius: var(--wc-r-pilule); background: rgba(255,255,255,.18); border: 0; cursor: pointer; padding: 0; transition: background .2s; }
.h2-calme .inter::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; }
.h2-calme .inter.on { background: var(--accent); }
.h2-calme .inter.on::after { transform: translateX(16px); }
.h2-calme .attente { margin-top: 6px; font-size: 12.5px; color: #c4b5fd; }