/* =====================================================================
   DYNAMYK RADIO — ACCESSIBILITÉ, CONSENTEMENT ET ÉTATS (Phase 2)
   Chargé en dernier (Core/bootstrap.php::dyn_head). Fichier source lisible, non minifié.
   Sommaire : 1 utilitaires · 2 lien d'évitement · 3 focus · 4 consentement · 5 lecteur · 6 formulaires · 7 pied de page / légal
              8 mouvement réduit · 9 cibles tactiles
   ===================================================================== */

/* ---------- 1. Utilitaires ---------- */
.sr-only {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- 2. Lien « Aller au contenu » : invisible tant qu'il n'a pas le focus ---------- */
.skip-link {
    position: fixed; top: 8px; left: 8px; z-index: 20000;
    padding: 12px 18px; border-radius: 8px;
    background: #fff; color: #0b0a10; border: 2px solid #7000FF;
    font: 700 .95rem/1.2 Archivo, system-ui, sans-serif; text-decoration: none;
    transform: translateY(-250%);
}
.skip-link:focus, .skip-link:focus-visible { transform: none; outline: 3px solid #7000FF; outline-offset: 2px; }

/* ---------- 3. Focus clavier visible partout ---------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid #c9a9ff; outline-offset: 3px;
}
body.light-mode :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline-color: #5a00cc; }
/* Le conteneur principal reçoit le focus par programme (après navigation interne / lien d'évitement) : pas un contrôle, pas de contour */
#spa-content:focus { outline: none; }
/* Champs de formulaire : l'ancien outline:none est remplacé par un contour + une bordure d'accent */
.dedi-field input:focus-visible, .dedi-field textarea:focus-visible,
.ct-field input:focus-visible, .ct-field select:focus-visible, .ct-field textarea:focus-visible,
.sh-news-form input:focus-visible, .comment-form input:focus-visible, .comment-form textarea:focus-visible {
    outline: 2px solid #c9a9ff !important; outline-offset: 2px !important; border-color: #7000FF;
}
.sh-search-form input:focus-visible { outline: 2px solid #c9a9ff !important; outline-offset: -2px !important; }
.cq-search:focus-within { outline: 2px solid #c9a9ff; outline-offset: 2px; }
body.light-mode .dedi-field input:focus-visible, body.light-mode .dedi-field textarea:focus-visible,
body.light-mode .ct-field input:focus-visible, body.light-mode .ct-field select:focus-visible, body.light-mode .ct-field textarea:focus-visible {
    outline-color: #5a00cc !important;
}

/* ---------- 4. Bandeau de consentement (deux boutons de même poids : refuser = accepter) ---------- */
.dyn-consent[hidden] { display: none !important; }
.dyn-consent {
    position: fixed; z-index: 1200; left: 12px; right: 12px;
    bottom: calc(var(--sh-player-h, 72px) + 12px + env(safe-area-inset-bottom, 0px));
    display: flex; justify-content: flex-start; pointer-events: none;
}
.dyn-consent-box {
    pointer-events: auto; width: min(560px, 100%);
    padding: 18px 20px; border-radius: 12px;
    background: var(--bg-section, #0a0514); color: var(--text-main, #fff);
    border: 1px solid color-mix(in srgb, var(--text-main, #fff) 30%, transparent);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
    font: 400 .92rem/1.5 Archivo, system-ui, sans-serif;
}
.dyn-consent-title { margin: 0 0 6px; font-size: 1rem; font-weight: 800; letter-spacing: .02em; }
.dyn-consent-text { margin: 0 0 12px; color: var(--text-muted, #aaa); }
.dyn-consent-state { margin: 0 0 12px; font-weight: 700; }
.dyn-consent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.dyn-consent-btn {
    min-height: 44px; padding: 0 22px; border-radius: 8px; cursor: pointer;
    border: 2px solid #7000FF; background: #7000FF; color: #fff;
    font: 700 .95rem/1 Archivo, system-ui, sans-serif;
}
.dyn-consent-btn:hover { background: #5a00cc; border-color: #5a00cc; }
.dyn-consent-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-main, #fff); text-decoration: underline; }
@media (max-width: 520px) {
    .dyn-consent-actions .dyn-consent-btn { flex: 1 1 calc(50% - 7px); }
    .dyn-consent-link { flex: 1 1 100%; justify-content: center; }
}

/* ---------- 5. Lecteur : états lisibles (connexion, reconnexion, erreur) ---------- */
/* Sous 760 px le libellé était masqué : or c'est là que l'on doit voir « Reconnexion… » / « Impossible de lire le flux ». */
body.radio-loading .dyn-player-bar .track-tag-text,
.dyn-player-bar.is-error .track-tag-text { display: inline !important; }
.dyn-player-bar.is-error .track-tag { color: #ff8a9b; }
body.light-mode .dyn-player-bar.is-error .track-tag { color: #b3002d; }
.dyn-player-bar.is-error .equalizer-mini { display: none; }
.dyn-player-bar.is-error .btn-play-sticky { background: #b3002d; }
/* L'égaliseur ne bouge que si le son passe réellement (pendant la connexion, il restait animé : fausse lecture) */
.dyn-player-bar.is-playing:not(.is-live) .equalizer-mini i { animation: none !important; }

/* ---------- 6. Formulaires : chargement, succès, erreur ---------- */
.sh-news-msg.is-success { color: #35d49a; }
.sh-news-msg.is-error { color: #ff8a9b; }
body.light-mode .sh-news-msg.is-success { color: #067a52; }
body.light-mode .sh-news-msg.is-error { color: #b3002d; }
.sh-news-form button.is-loading, .dedi-submit-btn.is-loading, .ct-form button[aria-busy="true"], .comment-form button:disabled { opacity: .6; cursor: progress; }
[aria-invalid="true"] { border-color: #ff5a74 !important; }
.ct-field-error { margin: 6px 0 0; color: #ff8a9b; font-size: .88rem; font-weight: 600; }
body.light-mode .ct-field-error { color: #b3002d; }
.ct-alert:focus { outline: 2px solid currentColor; outline-offset: 3px; }
.state-note {                                /* état « indisponible / vide » homogène pour les listes */
    margin: 0; padding: 18px 20px; border: 1px solid color-mix(in srgb, var(--text-main, #fff) 22%, transparent);
    border-radius: 10px; color: var(--text-muted, #aaa); max-width: 60ch;
}
.state-note strong { color: var(--text-main, #fff); }
.state-note a { text-decoration: underline; }

/* ---------- 7. Pied de page et pages légales : boutons qui se présentent comme des liens ---------- */
.sh-foot-btn, .lg-linkbtn {
    background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
    font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; text-decoration: underline;
}
.sh-foot-btn:hover, .lg-linkbtn:hover { opacity: .8; }
.lg-missing { font-style: italic; opacity: .8; }

/* ---------- 8. Mouvement réduit : on coupe le décoratif, on garde le fonctionnel ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    *, *::before, *::after {
        animation-duration: .01ms !important; animation-iteration-count: 1 !important;
        animation-delay: 0s !important; transition-duration: .01ms !important;
    }
    /* Indicateurs de chargement : ils doivent continuer de tourner (lenteur réduite), sinon l'attente devient invisible */
    body.radio-loading .btn-play-sticky::after, body.radio-loading .hm-play::before,
    .spin, .ri-loader-4-line, .is-loading::after, #spa-progress.is-active {
        animation-duration: 2s !important; animation-iteration-count: infinite !important;
    }
    /* Bandeau de dédicaces : défilement remplacé par une liste statique lisible */
    .sh-ticker { overflow-x: auto; }
}

/* ---------- 9. Cibles tactiles : au moins 44 × 44 px sur écran tactile ---------- */
@media (pointer: coarse) {
    .sh-icon-btn, .sh-burger, .btn-like, .sh-totop, .hm-arrow, .dedi-modal-close, .ed-lb-close,
    .ed-lb-nav, .sh-search-close, .sh-oc-close, .ed-car-prev, .ed-car-next { min-width: 44px; min-height: 44px; }
    .ed-pager a, .reaction-btn, .sp-st, .sh-foot-btn { min-height: 44px; }
    .sh-foot-legal a, .sh-foot-btn { display: inline-flex; align-items: center; min-height: 44px; }
    .sh-foot-row li a, .sh-oc-links a { display: inline-flex; align-items: center; min-height: 44px; }
    /* Liens d'action isolés mesurés à 14-16 px de haut sur mobile (« Toute l'actu », « Voir l'épisode », fil d'Ariane, nombre de commentaires) */
    .hm-more, .ed-more, .ar-meta .meta-link, .ar-crumbs a, .pc-foot a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Libellé d'état du lecteur : une seule ligne, tronquée plutôt que de déborder sur le bouton « J'aime » */
.dyn-player-bar .track-details { min-width: 0; }
.dyn-player-bar.is-error .track-tag, body.radio-loading .dyn-player-bar .track-tag { max-width: 100%; letter-spacing: .06em; }
.dyn-player-bar.is-error .track-tag-text, body.radio-loading .dyn-player-bar .track-tag-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Mobile : la barre n'a pas la place d'afficher titre + libellé d'état. Pendant une connexion ou une erreur, on libère la pochette
   et le bouton « J'aime » pour que l'état (« Reconnexion 1/3 », « Flux indisponible ») reste lisible. */
@media (max-width: 760px) {
    body.radio-loading .dyn-player-bar .track-cover-wrapper, body.radio-loading .dyn-player-bar .btn-like,
    .dyn-player-bar.is-error .track-cover-wrapper, .dyn-player-bar.is-error .btn-like { display: none; }
    .dyn-player-bar.is-error .track-title, .dyn-player-bar.is-error .track-artist,
    body.radio-loading .dyn-player-bar .track-title, body.radio-loading .dyn-player-bar .track-artist { display: none; }
    .dyn-player-bar.is-error .track-details, body.radio-loading .dyn-player-bar .track-details { margin-left: 12px; }
}
@media (max-width: 760px) {
    body.radio-loading .dyn-player-bar .track-tag, .dyn-player-bar.is-error .track-tag { text-transform: none; letter-spacing: .01em; font-weight: 700; }
    body.radio-loading .dyn-player-bar .equalizer-mini, .dyn-player-bar.is-error .equalizer-mini { display: none; }
    body.radio-loading .dyn-player-bar .sp-st, .dyn-player-bar.is-error .sp-st { padding: 0 8px; }
}