/* ===================================================================== */
/*                          CouleurCustom.css                            */
/* © 2020  Dunin Technologie Inc.                                        */
/* ===================================================================== */

/* - DÉFINITION -------------------------------------------------------- */
/* Couleurs des différents éléments.                                     */
/* --------------------------------------------------------------------- */

/* - NOTES ------------------------------------------------------------- */
/* --------------------------------------------------------------------- */


:root
  {
    --couleurBody: #F8F8F8;             /* Couleur de fond      */
    --couleurLabel: black;
    --couleurTexte: black;            /* Couleur de base des textes      */
    --couleurTexteTitrePanel: white;
    --couleurTitrePanel: #231F20;
    --couleurTexteTitrePage: white;
    --couleurTexteTitrePageRecherche: black;
    --couleurHighlight: #B9975B;
    --couleurBordureSpanBouton: black;
    --couleurTexteTitreSection: var(--couleurTexte);
    --couleurTexteTitreSousSection: var(--couleurTexte);

    --couleurActif: #F2EEE4;
    --couleurBordureActif: #B9975B;
    --couleurHighlightLigneActif: #F7F4EE;
    --couleurBordureHighlightLigneActif: var(--couleurBordureActif);

    --couleurBoutonUser: black;
    --couleurTexteBoutonUser: #B9975B;

    --couleurToolBarSession: #231F20;

    --couleurTexteFenetreBarre: white;
    --couleurBarreTitreFenetre: #231F20; /* Barre de titre des fen?tres  */
    --couleurLigneSelect: #F2EEE4;    /* ?l?ment s?lectionn? (fond) - Highligth du choix courant dans un "select" */
    --couleurLigneSelectHover: #e5ddca; /* Highligth du choix sous le curseur dans un "select" */

    --couleurInput: #FFFFFF;

    --couleurCadre: White;          /* Lignes s?par / cadres           */
    --couleurBordureCadre: #A9A9A9;
	
    --couleurTitreTable: #231F20;
    --couleurTexteTitreTable: white;

    --couleurPanelEntete: #231F20;

    --couleurMessageLogin: #000000;

    --couleurTitreTelescopeLigne: #595959;
    --couleurTitreTelescopeLigneActif: #B9975B;
    --couleurTitreTelescopePanelContenu: #5e5e5e;
    --couleurTexteTitreTelescopePanelContenu: black;
    --couleurBordureTitreTelescopePanelContenu: #C5C5C5;

    --couleurBoutonPrimaire: #B9975B;                 /* Couleur de de fond du bouton primaire, ?tat normal      */
    --couleurTexteBoutonPrimaire: #FFFFFF;          /* Couleur du texte dans le bouton primaire, ?tat normal       */
    --couleurBordureBoutonPrimaire: #B9975B;      /* Couleur de bordure du bouton primaire - ?tat normal      */
    --couleurBoutonPrimaireHover: #8F703D;          /* Couleur de de fond du bouton primaire, ?tat de mouse hover      */
    --couleurTexteBoutonPrimaireHover: #FFFFFF;     /* Couleur du texte dans le bouton primaire, ?tat de mouse hover     */
    --couleurBordureBoutonPrimaireHover: #8F703D;      /* Couleur de bordure du bouton primaire - ?tat de mouse hover      */

    --couleurBoutonSecondaire: #FFFFFF;             /* Couleur de fond du bouton secondaire - ?tat normal     */
    --couleurTexteBoutonSecondaire: #B9975B;        /* Couleur du texte dans le bouton secondaire - ?tat normal     */
    --couleurBordureBoutonSecondaire: #B9975B;      /* Couleur de bordure du bouton secondaire - ?tat normal      */
    --couleurBoutonSecondaireHover: #B9975B;        /* Couleur de fond du bouton secondaire - ?tat de mouse hover      */
    --couleurTexteBoutonSecondaireHover: #FFFFFF;   /* Couleur du texte dans le bouton secondaire - ?tat de mouse hover     */
    --couleurBordureBoutonSecondaireHover: #B9975B; /* Couleur de bordure du bouton secondaire - ?tat de mouse hover      */
	--couleurLigneVerticaleLarge: #A9A9A9;  		 /* Séparateur Verticale   large       */
    --couleurBoutonAccueilHover: #F2EEE4;           /* Couleur de fond du bouton Accueil - ?tat de mouse hover      */

    --couleurTexteBoutonDummy: white;

    --couleurBoutonDummyUser: transparent;
    --couleurTexteBoutonDummyUser: white;
    --couleurBordureBoutonDummyUser: #B9975B;

    --couleurBoutonAccount: transparent;
    --couleurTexteBoutonAccount: black;

    --couleurBoutonDimension: black;
    --couleurTexteBoutonDimension: #B9975B;

    --couleurBordureBoutonOngletActif: #B9975B; /* Couleur de bordure de la Ligne sous le bouton actif des onglets */

    --couleurTexteLink: #B9975B;

    --couleurSectionLogin: rgba(255, 255, 255, 0.85);
    --couleurTexteSpanLoginLabel: black;

    --couleurTexteAccueilCreerTitre: white;
    --couleurTexteSessionToolAct: #B9975B;

    --couleurTexteBoutonStepperActif: #B9975B;
    --couleurBordureBasBoutonStepperGrand: black;

    --couleurCourant: #F7F4EE;
    --couleurBordureCourant: #B9975B;
    --couleurBoxShadowCourant: #B9975B;

    --couleurCriteresSection: #231F20;
    --couleurSectionAccueilEntete: #231F20;
    --couleurSectionAccueilEnteteLPD: #F8F8F8;
    --couleurSectionAccueil: #231F20;
    --couleurTexteTitreAccueilEnkiWeb: white;
    --couleurBordureAccueilSectionC: #777374;
    --couleurEntetePage: #231F20;
	--couleurEntetePageReadOnly: #FF0000;
    --couleurTexteTitreKit: White;

    --couleureBordureBasTitreGrille: var(--couleurTitreTable);

    --couleurBoutonStyleGolabal: #B9975B;
    --couleurTexteBoutonStyleGlobal: white;

    --couleurBordureFenetreChargeComm : #C5C5C5;
    --couleurProgress: #F7F4EE;
    --couleurProgressBar: #B9975B;
  }

/* --------------------------------------------------------------------- */
/* Highlighted.                                                          */

/* --------------------------------------------------------------------- */

/* Tool bar de la session.                                               */

.SessionToolAct > span, .SessionToolAct > button > span { color: var(--couleurTexteSessionToolAct) }


/* --------------------------------------------------------------------- */
/* Section accueil.                                                      */

.AccueilEntete.ActSection { Background-color: var(--couleurSectionAccueilEntete); }
.AccueilEnteteLPD.ActSection { Background-color: var(--couleurSectionAccueilEnteteLPD); }
.SectionAccueil      { background-color: var(--couleurSectionAccueil); }

.AccueilSectionC { border-top: solid 1px;  border-color: var(--couleurBordureAccueilSectionC) }


/* --------------------------------------------------------------------- */
/* Barre ent?te des pages (i.e. section principale).                     */

.EntetePage         { background-color: var(--couleurEntetePage); }
.EntetePageReadOnly         { background-color: var(--couleurEntetePageReadOnly); }
.PageRecherche { color: var(--couleurTexteTitrePageRecherche); }

.TitrePage           { color: white }
.TitrePageReadOnly           { color: white }
.TitreAccueilEnkiWeb { color: white }
.AccueilCreerTitre, .AccueilRechercherTitre, h3.Accueil { color: white }

.TitrePageReadOnly           { color: white }
.TitrePageReadOnly          { background-color: #FF0000 }
.TitrePageReadOnly           { font-size: 23px }
.TitrePanelReadOnly          { color:white; background-color: #FF0000 }

/* --------------------------------------------------------------------- */
/* Barres titres des fen?tres.                                           */

.FenetreBarre span
  {
    color : var(--couleurTexteFenetreBarre);
    font-family: 'Radley', 'Open Sans', 'Arial';
    Margin: 4px
  }


/* --------------------------------------------------------------------- */
/* Sections encadr?es.                                                   */

.Cadre { background-color: var(--couleurCadre) }


/* --------------------------------------------------------------------- */
/* Kit dans la section 't?lescope'.                                      */

.TitreKit > span { color: var(--couleurTexteTitreKit); }

.Toggle > button                                             { background-image: url("../../Client/Imgs/TelescopeFlecheBlanc.svg") }

.Ligne.Actif > .ActTelescope > .ActTitre > .Toggle > button  { background-image: url("../../Client/Imgs/TelescopeFlecheBlanc.svg") }
.ActTelescope.Large > .ActTitre > .Toggle > button           { background-image: url("../../Client/Imgs/TelescopeFlecheBlanc.svg") }


/* --------------------------------------------------------------------- */
/* ?l?ments de saisie par d?faut.                                        */

body, select, input, textarea, button, span { color: var(--couleurTexte); }


.CustomSelect, input { background-color: var(--couleurInput) }


/* --------------------------------------------------------------------- */
/* Highlighted.                                                          */

.Courant:not(.Label):not(canvas) { background-color: var(--couleurCourant); box-shadow: 0 0 5px var(--couleurBoxShadowCourant)  }   /* Highligth de l'?l?ment courant. */
/* La couleur de fond des champs qui sont en état focused ET en état de champ jaune (UserModif) en même temps */
.UserModif.AvecLabel.CustomSelect.Courant:not(.Label):not(canvas) {background-color: var(--couleurChangement);}

/* S?lection dans une liste / une grille: */
.ActTexte.Actif, .ActSelect.Actif, .ActInput.Actif, .ActCheck.Actif, .ActBouton.Actif, .ActGrid > .ActSection.Actif { background-color:#F2EEE4;  border-color: #B9975B }
/* .Ligne.Actif > .Highlight, .Ligne.Actif > .ActSection > .Highlight { border-color: var(--couleurBordureHighlightLigneActif); } */

/* --------------------------------------------------------------------- */
/* Boutons.                                                              */

.ActBouton.Primaire > button > span { color: var(--couleurTexteBoutonPrimaire); }
.ActBouton.Secondaire > button > span { color: var(--couleurTexteBoutonSecondaire); }
.ActBouton.Primaire > button:hover > span { color: var(--couleurTexteBoutonPrimaireHover); }
.ActBouton.Secondaire > button:hover > span { color: var(--couleurTexteBoutonSecondaireHover); }

.ActBouton.Fleche > button > span { color: #b78c41; }

.ActBouton.STC > button > span { color: white; }
.ActBouton.STC > button:hover > span { color: #cbb184; }

.ActBouton.STC1 > button > span { color: white; }
.ActBouton.STC1 > button:hover > span { color: #cbb184; }

.ActBouton.STC2 > button > span { color: #cbb184; }
.ActBouton.STC2 > button:hover > span { color: #e9dfcc; }

.ActBouton.TrBlackGold > button > span { color: black; }
.ActBouton.TrBlackGold > button:hover > span { color: #B9975B; }

.ActBouton.DummyUser > button { background-color: var(--couleurBoutonDummyUser); border-color: var(--couleurBordureBoutonDummyUser); border-radius: 10px; }
.ActBouton.DummyUser > button > span { color: var(--couleurTexteBoutonDummyUser); }
.ActBouton.Account > button { background-color: var(--couleurBoutonAccount); }
.ActBouton.Account > button > span { color: var(--couleurTexteBoutonAccount); }

.Stepper > .Boutons > .Actif > span { color: var(--couleurTexteBoutonStepperActif); }

/* --------------------------------------------------------------------- */
/* Acteur grille.                                                        */

.ActGrid.Table > .Titre > span { color: var(--couleurTexteTitreTable) }

.BoutonTrier { background-color: var(--couleurTitreTable); }