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; }
/* Sur telephone et tablette, pas de barre de defilement pendant qu'on fait
defiler (sans effet sur la page principale dans Safari iOS ; dans l'app,
le lecteur natif la masque lui-meme). */
@media (hover: none) and (pointer: coarse) {
html, * { scrollbar-width: none; }
::-webkit-scrollbar { display: none; }
}
@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 : header ----
Restreint aux pointeurs à survol réel (souris) : sur tactile, :hover reste
« collé » après un tap (surtout iOS Safari) et allumait un fond derrière
l'onglet actif de la barre mobile, en plus de sa couleur active — deux
signaux visuels concurrents et incohérents. */
@media (hover: hover) {
[data-action="nav"]:hover { background: #1D1D24 !important; color: #F5F5F7 !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; }
}
/* Pied de page légal — présent connecté comme déconnecté.
En colonne étroite les liens s'empilent : « Contact & Support » doit alors
passer en tête, puisque c'est la seule entrée dont on a besoin dans
l'urgence. Sur écran large, il reste à sa place, en fin de ligne. */
.pied{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.pied a,.pied button{color:#9A9AA8;font-size:13px;text-decoration:none;background:none;border:none;padding:0;font-family:inherit;cursor:pointer;white-space:nowrap}
.pied .support{color:#E3FF4F}
@media (max-width: 680px){
.pied{flex-direction:column;align-items:flex-start;gap:12px}
.pied .support{order:-1}
}
/* Petites lignes de bas de page. Elles doivent se trouver quand on les cherche
et ne jamais se remarquer autrement : alignées à gauche, très sourdes, sur
une seule ligne. Le support n'y figure plus — c'est une action, il a rejoint
l'en-tête, où on le cherche quand la musique s'arrête. */
.pied-legal{max-width:1060px;margin:0 auto;padding:56px 28px 26px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pied-legal a{color:#4A4A56;font-size:11.5px;text-decoration:none;white-space:nowrap}
.pied-legal span{color:#2B2B35;font-size:11.5px}
@media (max-width: 680px){
/* Les liens continuent de se suivre et passent à la ligne naturellement :
cinq lignes empilées donnaient à des mentions légales le poids visuel
d'une navigation. Deux lignes serrées suffisent, et la zone cliquable
reste limitée au texte. */
.pied-legal{padding:32px 16px 18px;gap:5px 9px}
.pied-legal a{font-size:11px}
.pied-legal span{font-size:11px}
}
/* Un lien du pied de page ouvre un nouvel onglet ; en revenant, il gardait le
focus et donc l'anneau du navigateur, ce qui le faisait paraître sélectionné.
On ne le montre plus qu'au clavier (:focus-visible), où il est indispensable
pour savoir où l'on se trouve. */
.pied-legal a:focus,
header button:focus { outline: none; }
.pied-legal a:focus-visible,
header button:focus-visible { outline: 2px solid #6A6A7A; outline-offset: 3px; border-radius: 3px; }
/* Le survol n'existe pas au doigt : sur tactile, :hover reste collé après le
toucher jusqu'à ce qu'on tape ailleurs, et le lien paraît rester sélectionné.
On ne l'active donc que là où un vrai survol existe. */
@media (hover: hover) {
.pied-legal a:hover { color: #9A9AA8; }
}
/* Survols regroupés : au doigt, :hover reste collé après le toucher et le
bouton paraît rester enfoncé. On ne les applique donc qu'aux appareils
dotés d'un vrai pointeur. Rien ne change sur desktop. */
@media (hover: hover) {
/* 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; }
a:hover { color: #F0FF8A; }
/* ---- 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; }
[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