/*
 * marque.css — la couleur de l'organisation, pour ce que les classes Tailwind ne couvrent pas.
 *
 * marque.js branche la palette `orange` de Tailwind sur les variables --marque-50 … --marque-950
 * (triplets « R G B », pour `rgb(var(--x) / alpha)`). Les valeurs ci-dessous sont l'orange
 * d'origine : marque.js les remplace par la palette choisie, et une feuille qui s'en sert reste
 * juste si ce script manquait. Un test les compare à la palette « orange » de marque.js.
 */
:root {
    --marque-50: 255 247 237;
    --marque-100: 255 237 213;
    --marque-200: 254 215 170;
    --marque-300: 253 186 116;
    --marque-400: 251 146 60;
    --marque-500: 249 115 22;
    --marque-600: 234 88 12;
    --marque-700: 194 65 12;
    --marque-800: 154 52 18;
    --marque-900: 124 45 18;
    --marque-950: 67 20 7;
}

/*
 * Les règles de style.css qui portent l'orange de MARQUE, reprises avec les variables. Elles ne
 * sont pas corrigées dans style.css : SonarCloud rattache à une pull request toutes les remarques
 * d'un fichier touché, anciennes comprises, et style.css en porte une vingtaine (voir CLAUDE.md).
 * Chargé après style.css, à spécificité égale : ces règles l'emportent.
 *
 * Restent en orange fixe dans style.css, parce que l'orange y dit « Proximité » et non la marque :
 * la bordure des cellules de mi-temps (.matrix-hybrid-cell) et la légende des mi-temps
 * (.pm-legende-mitemps).
 */
.btn-active-orange {
    background-color: rgb(var(--marque-50)) !important;
    border-color: rgb(var(--marque-600)) !important;
    color: rgb(var(--marque-600)) !important;
}
.dark .btn-active-orange {
    background-color: rgb(var(--marque-900) / 0.2) !important;
    border-color: rgb(var(--marque-600)) !important;
    color: rgb(var(--marque-400)) !important;
}

.pm-semaine-courante {
    color: rgb(var(--marque-800)) !important;
}
/* Case collante : son fond est opaque, l'orange déjà mélangé à celui de la ligne. Une autre
   couleur refait ce mélange ; l'orange garde exactement ses valeurs de style.css. */
html[data-couleur-marque]:not([data-couleur-marque="orange"]) .pm-semaine-courante {
    background: color-mix(in srgb, rgb(var(--marque-500)) 16%, #f3f4f6) !important;
}
html.dark[data-couleur-marque]:not([data-couleur-marque="orange"]) .pm-semaine-courante {
    background: color-mix(in srgb, rgb(var(--marque-500)) 22%, #2b2930) !important;
    color: rgb(var(--marque-300)) !important;
}

.pl-site-badge {
    background: rgb(var(--marque-500));
}

.pl-site-temp {
    background: rgb(var(--marque-500) / 0.18);
    color: rgb(var(--marque-700));
}
.dark .pl-site-temp {
    background: rgb(var(--marque-500) / 0.28);
    color: rgb(var(--marque-300));
}

.ph-filtre-actif {
    color: rgb(var(--marque-700));
    background: rgb(var(--marque-500) / 0.16);
    border: 1px solid rgb(var(--marque-500) / 0.3);
}
.dark .ph-filtre-actif {
    color: rgb(var(--marque-300));
    background: rgb(var(--marque-500) / 0.24);
}