/* Carmen — styles globaux, keyframes, et états hover/focus.
   Le prototype de référence exprime ces états via des attributs propres à son
   outil de design (style-hover / style-focus) qui n'existent pas en HTML/CSS
   réel : ils sont retranscrits ici en règles :hover / :focus classiques,
   ciblées sur les mêmes éléments via leurs attributs data-action / data-field. */

/* Police auto-hébergée (variable, axe wght 600-800, sous-ensemble latin) :
   évite deux allers-retours réseau vers fonts.googleapis.com / fonts.gstatic.com
   au premier chargement. */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/bricolage-grotesque-var.woff2') format('woff2-variations'), url('../fonts/bricolage-grotesque-var.woff2') format('woff2');
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}

html, body { margin: 0; padding: 0; background: #0B0B0D; }
* { box-sizing: border-box; }
body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
button { font-family: inherit; -webkit-appearance: none; appearance: none; }
input, select { font-family: inherit; }
a { color: #E3FF4F; text-decoration: none; }
a:hover { color: #F0FF8A; }

@keyframes eqA { 0%,100% { height: 30%; } 50% { height: 100%; } }
@keyframes eqB { 0%,100% { height: 90%; } 45% { height: 35%; } }
@keyframes eqC { 0%,100% { height: 55%; } 30% { height: 100%; } 70% { height: 25%; } }
@keyframes carmenPulse { 0%,100% { opacity: 0.35; } 50% { opacity: 1; } }

/* ---- focus (champs texte / select) ---- */
input:focus, select:focus, textarea:focus { border-color: #E3FF4F !important; outline: none; }

/* ---- hover : back-office ---- */
[data-action="bo-select-account"]:hover { border-color: #3D3D4A !important; }
[data-action="bo-remove"]:hover,
[data-action="bo-remove-login"]:hover { color: #FF5C33 !important; border-color: #FF5C33 !important; }
[data-action="bo-assign"]:hover,
[data-action="bo-new-client-open"]:hover,
[data-action="bo-add-login-submit"]:hover { background: #F0FF8A !important; }
[data-action="bo-new-role"]:hover,
[data-action="bo-add-role"]:hover { border-color: #E3FF4F !important; }
/* bo-new-client-cancel est partagé entre le fond de la modale et son bouton */
button[data-action="bo-new-client-cancel"]:hover { color: #F5F5F7 !important; border-color: #6A6A7A !important; }
button[data-action="bo-new-client-submit"]:hover { background: #F0FF8A !important; }

/* ---- hover : header ---- */
[data-action="nav"]:hover { background: #1D1D24 !important; color: #F5F5F7 !important; }
[data-action="logout"]:hover { color: #F5F5F7 !important; border-color: #6A6A7A !important; }
[data-action="go-home"]:hover { opacity: 0.75; }

/* ---- hover : accueil ---- */
[data-action="sched-action"]:hover { border-color: #E3FF4F !important; }
[data-action="sched-timetable"]:hover { color: #F5F5F7 !important; }
[data-action="open-pub"]:hover { background: #1D1D24 !important; border-color: #3D3D4A !important; }
[data-action="request-play"]:hover { background: #E3FF4F !important; color: #0B0B0D !important; }

/* ---- hover : détail playlist ---- */
[data-action="pub-start"]:hover { color: #9A9AA8 !important; }
[data-action="d-play"]:hover { background: #F0FF8A !important; }
[data-action="pub-all"]:hover,
[data-action="pub-none"]:hover { color: #F5F5F7 !important; border-color: #6A6A7A !important; }
[data-action="pub-cancel"]:hover { color: #F5F5F7 !important; }
[data-action="pub-validate"]:hover { background: #F0FF8A !important; }
.track-row:hover { background: #1D1D24 !important; }
[data-action="track-toggle-sel"]:hover { border-color: #E3FF4F !important; }
[data-action="track-action"]:hover { color: #F5F5F7 !important; border-color: #6A6A7A !important; }

/* ---- hover : timetable ---- */
[data-action="tt-cell"]:hover { background: rgba(227,255,79,0.12) !important; box-shadow: inset 0 0 0 1px rgba(227,255,79,0.45); }
[data-action="tt-block"]:hover { box-shadow: inset 0 0 0 2px #0B0B0D !important; }
[data-action="tt-day-toggle"]:hover { border-color: #E3FF4F !important; }
[data-action="tt-all-days"]:hover { color: #F5F5F7 !important; }
[data-action="tt-pick-pl"]:hover { border-color: #E3FF4F !important; }
[data-action="tt-save"]:hover { background: #F0FF8A !important; }
button[data-action="tt-cancel"]:hover { color: #F5F5F7 !important; border-color: #6A6A7A !important; }
[data-action="tt-delete-slot"]:hover { color: #FF5C33 !important; border-color: #FF5C33 !important; }

/* ---- hover : modales de publication / verrouillage / dérogation ----
   Certaines data-action sont partagées entre le fond de la modale (fermeture
   au clic sur le fond) et son bouton ; on restreint donc le survol à
   l'élément <button> pour ne jamais teinter le fond plein écran. */
button[data-action="pub-accept"]:hover,
button[data-action="pub-confirm"]:hover,
button[data-action="pub-close-sent"]:hover,
button[data-action="locked-close"]:hover,
button[data-action="gate-primary"]:hover { background: #F0FF8A !important; }
button[data-action="pub-close-offer"]:hover,
button[data-action="pub-close-confirm"]:hover,
button[data-action="gate-cancel"]:hover { border-color: #6A6A7A !important; }

/* ---- hover : player ---- */
[data-action="pl-toggle-shuffle"]:hover,
[data-action="pl-prev"]:hover,
[data-action="pl-next"]:hover { color: #F5F5F7 !important; }
[data-action="pl-toggle"]:hover { background: #FFFFFF !important; }
[data-action="pl-action"]:hover { color: #F5F5F7 !important; border-color: #6A6A7A !important; }
[data-action="pl-open-source"]:hover { color: #E3FF4F !important; }

/* ---- hover : connexion ---- */
[data-action="login-submit"]:hover { background: #F0FF8A !important; }

/* ---- responsive : la grille login/accueil se replie déjà via auto-fit/auto-fill ---- */

/* ---- mobile (≤680px) : modales en bottom sheet, cibles tactiles, confort général ----
   Le layout structurel (nav en bas, mini-player, timetable à un jour) est généré
   directement en JS (voir isMobile() dans render.js) ; ces règles ne couvrent que
   la présentation qui peut rester une simple bascule visuelle. */
@media (max-width: 680px) {
  .modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .modal-card {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    margin: 0 !important;
    max-height: min(85vh, calc(100vh - env(safe-area-inset-top) - 24px)) !important;
    overflow-y: auto !important;
    padding-bottom: calc(26px + env(safe-area-inset-bottom)) !important;
  }

  /* zones tactiles confortables (≥44px) sur les petits contrôles denses */
  [data-action="tt-day-toggle"],
  [data-action="tt-pick-pl"],
  [data-action="bo-add-role"],
  [data-action="bo-new-role"] { min-height: 44px; }

  input, select, textarea { font-size: 16px !important; } /* empêche le zoom auto iOS au focus */

  /* Menu De/À de la timetable : agrandit le contrôle fermé et les options de
     la liste natives (respecté par Chrome/Android ; iOS Safari affiche sa
     roue système et ignore cette règle, hors de portée du CSS). */
  select[data-field^="tt-"] { min-height: 48px; font-size: 17px !important; padding: 13px 14px !important; }
  select[data-field^="tt-"] option { font-size: 17px; padding: 10px; }
}