/* ===========================================================================
   TABLE DE CORRESPONDANCE DU THÈME CLIENT
   ---------------------------------------------------------------------------
   Une ligne du tableau d'édition de l'admin panel = un groupe de règles ici.
   Les couleurs arrivent de `GET /site/<id>/v2/themes` et sont injectées en
   variables CSS par app.getThemes (static/js/app.js), en deux variantes
   `_light` / `_dark` ; les fichiers de thème (light/dark/noforce.css) font
   pointer l'alias sans suffixe vers la bonne variante. On écrit donc les
   règles UNE seule fois, sans aucun bloc @media.

   FORMES : les actions principales (mainItems, itineraryButton) et le groupe
   featuresButton sont des APLATS — fond et texte viennent de la paire livrée
   par l'API. Le bouton secondaire est en CONTOUR, pour rester distinguable de
   l'action qu'il accompagne même quand le back lui donne la même couleur
   (cf. #93). Les couleurs de contour passent par une variante lisible sur la
   surface, calculée dans app.js (cf. #94).

   mainItems ............ catégorie sans couleur propre, étage sélectionné,
                          profil sélectionné, « Accepter » les cookies,
                          cartouche « Via <porte> », « Démarrer » et
                          « Terminer » le trajet, « Étape suivante »,
                          numéro d'ordre du parcours de visite
   secondaryButton ...... « Refuser » les cookies, « Non, je reste ici »,
                          « Optimiser mon parcours » (en contour), et la carte
                          d'instruction du guidage (en aplat)
   itineraryButton ...... « Itinéraire », « Définir départ/destination »,
                          « Lancer le parcours », « Oui » (entrer dans la
                          zone), « Quitter la zone »
   floatingButtonOutline  boutons ronds flottants (langue, appli native,
                          parcours de visite, accessibilité), liseré et
                          étiquette de zone, étoiles de fin de trajet
   featuresButton ....... bouton de lien externe, « Ajouter à mon parcours »
   buildingNameAndFloor.. nom du bâtiment et de l'étage dans les listes
   generatedJourney ..... Mode Parcours borne (feature dépréciée)
   path ................. tracé de l'itinéraire (posé en JS, pas ici)

   NE SONT PAS THÉMÉS, volontairement — bleu/blanc Ezymob figé (--ezymobBlue) :
   le bandeau « Étape n/N » du guidage (compteur, chevrons, drapeau), et
   l'icône « Ajouté à votre parcours » qui suit la couleur de son libellé.
   =========================================================================== */

/* ---------------------------------------------------------------- mainItems */

.main_items_background_color{
    background-color: var(--main_items_background_color)!important;
}

.main_items_text_color{
    color:var(--main_items_text_color)!important;
}

.main_items_text_color svg,
.main_items_text_color svg :is(path, circle, rect, polygon, ellipse, line, polyline){
    fill:var(--main_items_text_color)!important;
}

/* « Démarrer le trajet » (panneau d'itinéraire) et « Continuer » : aplat, comme
   « Terminer le trajet ». Ciblé par la classe existante .button_start, posée
   par plusieurs générateurs de markup (modale.js). */
/* :not(.noDirection) — l'état désactivé (aucun itinéraire calculé) doit rester
   gris : sans cette exclusion, le !important ci-dessous le repeindrait en
   couleur client et le bouton aurait l'air actif. */
.button_start:not(.noDirection){
    background-color: var(--main_items_background_color)!important;
    color: var(--main_items_text_color)!important;
}

.button_start:not(.noDirection) svg,
.button_start:not(.noDirection) svg :is(path, circle, rect, polygon, ellipse, line, polyline){
    fill:var(--main_items_text_color)!important;
}

/* Variante en contour du même groupe : le « Démarrer » de la carte de départ,
   qui se pose sur la carte et ne peut donc pas être un aplat plein. */
.main_items_outline_color{
    background-color:var(--surfaceColor)!important;
    border:2px solid var(--main_items_background_color)!important;
    color:var(--main_items_background_color)!important;
}

/* Étage et profil sélectionnés, catégorie active sans couleur propre. */
#floorSelector a.active,
.active{
    background-color: var(--main_items_background_color)!important;
    color: var(--main_items_text_color)!important;
}

.active span{
    color: var(--main_items_text_color)!important;
}

.active svg,
.active svg :is(path, circle, rect, polygon, ellipse, line, polyline){
    fill:var(--main_items_text_color)!important;
}

/* Pastille de POI sur la carte. */
span.extPoi{
    background-color: var(--main_items_background_color)!important;
}

span.extPoi svg{
    fill: var(--main_items_text_color)!important;
}

.headSpaceLogo svg circle {
    fill:var(--main_items_background_color)!important;
}

/* --------------------------------------------------------- secondaryButton */
/* #93 — Ce groupe habille les CONTRE-ACTIONS (« Refuser » les cookies, « Non,
   je reste ici », « Optimiser mon parcours ») ; l'action correspondante, elle,
   est en aplat mainItems ou itineraryButton. Or sur les quatre sites en base
   `secondaryButtonBackground` vaut EXACTEMENT `mainItemsBackground` et
   `itineraryButtonBackground` (la migration a recopié la couleur de marque
   partout) : en aplat, les deux boutons d'une paire devenaient deux clones
   indiscernables, y compris sur le bandeau de consentement cookies.
   On distingue donc la contre-action par sa FORME (contour) et non par sa
   couleur — seule solution qui tienne quelle que soit la donnée saisie. La
   couleur du contour et du texte est la variante lisible sur la surface
   (cf. readableOn dans app.js), sans quoi une couleur de marque claire
   redonnerait le défaut de contraste de #94. */

.secondary_button_background_color{
    background-color: var(--surfaceColor)!important;
    border: 2px solid var(--secondary_button_on_surface)!important;
}

.secondary_button_text_color{
    color:var(--secondary_button_on_surface)!important;
}

.secondary_button_text_color svg,
.secondary_button_text_color svg :is(path, circle, rect, polygon, ellipse, line, polyline){
    fill:var(--secondary_button_on_surface)!important;
}

/* La carte d'instruction du guidage n'est pas un bouton et n'a pas de
   contre-action en face : elle garde l'APLAT de la paire livrée par l'API.
   Les deux règles ci-dessous ré-affirment donc fond ET texte, pour reprendre
   la main sur les règles « contour » du dessus, que le conteneur porte aussi
   (les classes sont posées sur #stepCardContainer). */
.secondary_button_background_color .stepCard{
    background-color: var(--secondary_button_background_color)!important;
}

.secondary_button_text_color .stepCard{
    color:var(--secondary_button_text_color)!important;
}

.secondary_button_text_color .stepCard svg,
.secondary_button_text_color .stepCard svg :is(path, circle, rect, polygon, ellipse, line, polyline){
    fill:var(--secondary_button_text_color)!important;
}

/* Le conteneur de la carte d'instruction ne doit pas hériter du contour : il
   n'est pas un bouton. */
#stepCardContainer.secondary_button_background_color{
    background-color: var(--secondary_button_background_color)!important;
    border: 1px solid var(--borderColor)!important;
}

/* --------------------------------------------------------- itineraryButton */

.itinerary_button_background_color{
    background-color: var(--itinerary_button_background_color)!important;
}

.itinerary_button_text_color{
    color:var(--itinerary_button_text_color)!important;
}

.itinerary_button_text_color svg,
.itinerary_button_text_color svg :is(path, circle, rect, polygon, ellipse, line, polyline){
    fill:var(--itinerary_button_text_color)!important;
}

/* ---------------------------------------------------- floatingButtonOutline */

/* #94 — Contour, icône et étoiles se posent SUR la surface : ils passent par la
   variante garantie à 3:1 (SC 1.4.11, éléments non textuels). Sans elle, une
   couleur de marque claire disparaissait — `#76408f` sur la surface sombre du
   site 124 mesurait 2,03:1. Une couleur déjà lisible ressort inchangée. */
#langSelectCurrent,
.floating_button_outline_color{
    border:1px solid var(--floating_button_on_surface)!important;
    background-color:var(--surfaceColor)!important;
}

/* L'icône accessibilité est dessinée par mask-image : le fond du bouton EST
   l'icône, il doit donc porter la couleur outline (pas le blanc). */
button#accessSelectToggle.floating_button_outline_color{
    background-color:var(--floating_button_on_surface)!important;
    border:none!important;
}

/* Étoiles de notation en fin de trajet. */
#rateGuidance .rateGuidanceButton svg :is(path, circle, rect, polygon, ellipse, line, polyline){
    fill:var(--floating_button_on_surface)!important;
}

/* Liseré de zone : la vague SVG porte à la fois le cadre et le bandeau du bas
   sur lequel se pose l'étiquette — un seul objet, un seul aplat. Elle se pose
   sur la CARTE et non sur la surface : on garde donc la couleur client telle
   quelle, et c'est l'étiquette qui s'adapte (ci-dessous). */
#zoneFramePath{
    fill:var(--floating_button_outline_color)!important;
}

/* #94 — L'étiquette de zone était en blanc EN DUR sur la vague. Sur le site 139
   en thème sombre, `floatingButtonOutline` vaut `#ffffff` : l'étiquette était
   donc blanche sur blanc, soit 1:1 et invisible. La couleur de texte est
   maintenant choisie d'après le fond (cf. textOn dans app.js). */
#zoneTag,
#zoneTagName{
    color:var(--floating_button_label_color)!important;
}

#zoneTagClose{
    color:var(--floating_button_label_color)!important;
    border-color:var(--floating_button_label_color)!important;
}

/* ------------------------------------------------ buildingNameAndFloorText */

#UI .buildingTitle,
#UI .floorTitle{
    color:var(--building_floor_text_color)!important;
}

/* ------------------------------------------ generatedJourney (Mode Parcours) */

#trackSiteName{
    color: var(--journey_mode_color)!important;
}

#trackModeProfilTitle{
    border-color: var(--journey_mode_color)!important;
}

#trackModeProfilTitle svg{
    fill:var(--journey_mode_color)!important;
}

#trackStepProgression .active{
    background-color:var(--journey_mode_color)!important;
}

#trackStepImageText .trackButtonLink{
    background-color:var(--journey_mode_color)!important;
}

/* ---------------------------------------------------------- featuresButton */
/* #94 — L'API livre ce groupe comme une PAIRE que le client compose dans
   l'admin panel : un fond et le texte qui va dessus. On la rend donc telle
   quelle, en aplat, dans les DEUX modes.
   Auparavant le mode clair rendait un contour et peignait la couleur de FOND
   en couleur de TEXTE sur du blanc, en jetant featuresButtonText : `#99b8ec`
   (Gare de l'Est) tombait à 2,01:1 et `#55c9d1` (site 124) à 1,97:1, alors que
   la paire saisie par le client valait 12:1. Aucune saisie côté admin panel ne
   pouvait corriger ça, et le mode sombre — qui honorait déjà la paire — ne
   montrait pas le défaut. */

.features_button_background_color{
    background-color: var(--features_button_background_color)!important;
    border: 2px solid var(--features_button_background_color)!important;
}

.features_button_text_color{
    color:var(--features_button_text_color)!important;
}

.features_button_text_color svg,
.features_button_text_color svg :is(path, circle, rect, polygon, ellipse, line, polyline){
    fill:var(--features_button_text_color)!important;
}