/* ===================================================================== */
/*                          SectionCustom.css                            */
/* � 2021  Dunin Technologie Inc.                                        */
/* ===================================================================== */

/* - D�FINITION -------------------------------------------------------- */
/* Affichage des sections, custom Bernier.                               */
/* --------------------------------------------------------------------- */

/* - NOTES ------------------------------------------------------------- */
/* --------------------------------------------------------------------- */


/* --------------------------------------------------------------------- */
/* Texte g�n�raux.                                                       */

body, select, input, textarea, button { font-family: Montserrat, sans-serif;  font-weight: 400;  font-size: 14px;  color: var(--couleurTexte); }


/* --------------------------------------------------------------------- */
/* Affichage standard.                                                   */

.TitrePage        { width: 600px;  height: 35px;
                    font-family: Montserrat-Bold, sans-serif;     font-weight: 800;  font-size: 22px;  color: var(--couleurTexteTitrePage) }
/*span.TitreSection { background-color: var(--couleurSpanTitreSection);  width: 400px;  height: 30px;  padding: 10px 0px 0px 10px;
                    font-family: Montserrat-SemiBold, sans-serif;     font-weight: 800;  font-size: 15px;  color: var(--couleurTexteSpanTitreSection) }
*/
.Label            { font-family: Montserrat, sans-serif;     font-weight: 600;  font-size: 14px;  color: var(--couleurLabel) }
.Label.Na {font-family: Montserrat-SemiBold; font-weight: 100;}
.Label.Courant:not(.Na) > span { font-family: Montserrat-Bold; }
.TitreNotifInfo, .TexteNotifInfo { font-family: Montserrat, sans-serif; }


/* --------------------------------------------------------------------- */
/* Boutons.                                                              */

.ActBouton.Primaire   > button, .ActBouton.Primaire   > button:hover,
.ActBouton.Secondaire > button, .ActBouton.Secondaire > button:hover  
  { font-family: Montserrat, sans-serif;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 12px;
    border-radius:0; }

.ActBouton.Primaire > button > span {color: var(--couleurTexteBoutonPrimaire);} 
.ActBouton.Primaire > button:hover > span {color: var(--couleurTexteBoutonPrimaireHover);}

.ActBouton.Secondaire > button > span { color: var(--couleurTexteBoutonSecondaire); }
.ActBouton.Secondaire > button:hover > span { color: var(--couleurTexteBoutonSecondaireHover); }

.ActBouton > button > span { font-family: Montserrat, sans-serif;  font-weight: 800;  font-size: 12px;  text-transform:uppercase }


/* --------------------------------------------------------------------- */
/* Onglets.                                                              */

.ActOnglet > .Boutons > button > span { font-family: Montserrat, sans-serif;       font-weight: 400;   font-size: 14px;  color: var(--couleurTexteBoutonOnglet); }
.ActOnglet > .Boutons > .Actif > span { font-family: Montserrat, sans-serif;  font-weight: 800;  font-size: 14px;  color: var(--couleurTexteBoutonOngletActif); }


/* --------------------------------------------------------------------- */
/* Panneaux.                                                             */

.TitrePanel    { font-family: Montserrat-SemiBold, sans-serif;  font-weight: 800;  font-size: 13px; }    /* Titres des panels */
.Panel         { font-family: Montserrat, sans-serif;  font-weight: 400;  font-size: 14px;  color: var(--couleurTextePanel) }    /* Textes des panels */
.Panel .Label  { font-family: Montserrat-SemiBold, sans-serif;  font-weight: 100;  font-size: 14px;  color: var(--couleurTextePanel) }    /* Labels des panels */
.SecKitEditList span.TitrePanel, .SecKitEditAnch span.TitrePanel {background-color: var(--couleurPanelEntete);}

.PanelEntete .BoutonAjout > button  { background-image: url("../../Client/Imgs/Ajout-white.svg") }

.Tile > button.Actif > span {font-family: Montserrat-SemiBold; font-weight: 100;} /* Texte en bold pour le choix courant */

.PanelContenu .Contenu .Ligne.Actif { border: solid 1px var(--couleurBordureHighlightLigneActif);} /* couleur de la bordure des box des item en etat selected */

/* Espace blanc autour du fond noir des titres dans le menu de gauche et la colonne du centre de la page    */
.FondNoirTitre.Cadre {padding-left: 0px; padding-top: 0px;}
.FondNoirTitre .TitreSection {margin-left: 0px; margin-top: 0px;}
.FondNoirTitre .Ligne {margin-bottom: 0px; height: 0px;}
.FondNoirTitre .Image.Tile {margin-left: 10px;}
.FondNoirTitre .ActSection > .ActInput {margin-left: 14px;}

/* le menu de gauche page Info Projet    */
.Cadre.InfoProjet {padding: 0px;}
.InfoProjet .PanelEntete {margin: 0px;}
.InfoProjet .PanelEntete.InfoProjetComm {margin-top: 24px; margin-bottom: 4px;}
.InfoProjet .Ligne { margin-top:0px; }
.InfoProjet .LabelGauche {margin-left: 14px;}
.InfoProjet .Scroll.Scale { margin-left: 10px; margin-right: 10px;}

/* --------------------------------------------------------------------- */
/* Listes.                                                               */

.TitreListe     { }
span.TitreListe { background-color: var(--couleurSpanTitreListe);  width: 400px;  height: 30px;  padding: 10px 0px 0px 10px;
                  font-family: Montserrat, sans-serif;     font-weight: 800;  font-size: 15px;  color: var(--couleurTexteSpanTitreListe);  display: flex;  justify-content: center; }


/* --------------------------------------------------------------------- */
/* Cadres.                                                               */

.Cadre { box-shadow: 0 0 5px rgb(0 0 0 / 20%) }


/* --------------------------------------------------------------------- */
/* Steppers.                                                             */

.Stepper > .Boutons > button > span { font-family: Montserrat, sans-serif;  font-weight: 600;  font-size: 12px;  text-transform:uppercase  }
.Stepper > .Boutons > .Actif > span { font-family: Montserrat, sans-serif;  font-weight: 800;  font-size: 12px;  text-transform:uppercase  }

.Stepper > .Boutons > button { margin: 0px }

.Stepper.Grand > .Boutons > button, .Stepper.Grand > .Boutons > button > span { width: 194px }
.Stepper.Petit > .Boutons > button, .Stepper.Grand > .Boutons > button > span { width: 156px }

/* --------------------------------------------------------------------- */
/* Page de Login.                                                        */

.ActSection.CadreLogin
  {
    position: absolute;
    left: 140px;
    top: 0%;
    bottom: 0%;
    -ms-transform: none;
    transform: none
  }

.ActSection.Login
  {
    margin: 0px;
    width:  400px;
    flex:   1;
    border: none;
  }

.LoginSectionHaut         { flex: 1;  justify-content: center;  align-items: center }
.LoginSectionLogo         { flex: 2;  justify-content: center;  align-items: center }
.LoginSectionSeConnecter  { flex: 2;  justify-content: center;  align-items: center }
.LoginSectionInput        { flex: 3;  justify-content: center;  align-items: center }
.LoginSectionConnexion    { flex: 2;  justify-content: center;  align-items: center }
.LoginSectionLangue       { flex: 2;  justify-content: center;  align-items: center }
.LoginSectionBas          { flex: 2;  justify-content: center;  align-items: center }

.LogoLogin > img { height: 24px;  margin: unset }  /* Logo de la page de login */

.MessageLoginSeConnecter    { font-family: Montserrat, sans-serif;  font-weight: 400;  font-size: 22px;  color: var(--couleurTexteMessageLoginSeConnecter);  text-transform:uppercase;  margin: unset }

span.LoginLabel                 { font-family: Montserrat, sans-serif;  font-weight: 800;  font-size: 12px;  color: var(--couleurTexteSpanLoginLabel);  text-transform:uppercase }
.LoginInput                     { flex: 1;  justify-content: center;  flex-direction: column-reverse }  /* D�place les labels sous les inputs */
.LoginInput > .ActInput > input { border-color: var(--couleurBordureInputLoginInput);  border-style: solid;  border-width: 0px 0px 1px 0px;  color: var(--couleurTexteInputLoginInput);  background-color: var(--couleurInputLoginInput) }

.LoginInputReset                     { flex: 1;  justify-content: center;  flex-direction: column-reverse }  /* D�place les labels sous les inputs */
.LoginInputReset > .ActInput > input { border-color: grey;  border-style: solid;  border-width: 1px 1px 1px 1px;  color: black;  background-color: var(--couleurInputLoginInput) }

.LoginChoixLangue > .Boutons                  { justify-content: center }
.LoginChoixLangue > .Boutons button > span  { font-family: Montserrat, arial;  font-size: 10px;  color: var(--couleurTexteBoutonLoginChoixLangue);  text-transform:uppercase }
.LoginChoixLangue > .Boutons .Actif > span  { font-family: Montserrat, arial;  font-size: 10px;  color: var(--couleurTexteBoutonLoginChoixLangueActif);  text-transform:uppercase;  font-weight: 800 }
.LoginChoixLangue.Small:not(.Stepper) > .Boutons > .Actif { border: none }

.MessageLoginCookies                  { position: absolute;  left: 78px;  bottom: 25px;  width: 360px;  text-align: center;  z-index: 60;  /* Devant la section en transparence */
                                        font-family: Montserrat, arial;  font-size: 10px;  color: var(--couleurTexteMessageLoginCookies) }

.ActTexte.MessageLoginEve             { text-align: right  }
h5.MessageLoginEve                    { position: absolute;  left: auto;  right: 60px;  bottom: 60px;
                                        font-family: Montserrat, arial;  font-size: 20px;  font-weight: 800 }

.ActTexte.MessageLoginDescriptionEve  { text-align: right }
span.MessageLoginDescriptionEve       { position: absolute;  left: auto;  right: 60px;  bottom: 40px }

/* --------------------------------------------------------------------- */
/* Section Login.                                                        */

.ElementLogin .Link
{
  color: var(--couleurTexteLinkAffichPass);
  text-decoration-color: var(--couleurTexteLinkAffichPass);
  -webkit-text-decoration-color: var(--couleurTexteLinkAffichPass); /* Safari */
}


/* --------------------------------------------------------------------- */
/* Page d'accueil.                                                       */

.AccueilPage               { background-image: url("../../Client/Imgs/fondHome.jpg");  background-size: cover;  margin: 0px -10px 0px -10px }

.AccueilCadre              { border: none;  flex: 1;  margin-top: unset;  width: 100%;  height: unset;  flex-direction: row;  align-items: center; }
.AccueilSectionA           { border: none;  margin-right: 25% }

.AccueilBienvenueSection   { flex: 1;  margin-bottom: 100px }
.AccueilBienvenue          { font-family: Unna, Arial;        font-size: 60px;  color: var(--couleurTexteAccueilBienvenue);   text-transform:uppercase;  margin-left: 25% }
.AccueilSurEve             { font-family: Montserrat, Arial;  font-size: 40px;  color: var(--couleurTexteAccueilSurEve);  text-transform:uppercase;  margin-left: 25% }

.ActSection.SectionAccueil { flex: 1;  border: none }

.AccueilCreerSection, .AccueilRechercherSection { height: 240px;  align-items: center;  justify-content: center }
.AccueilCreerTitre,   .AccueilRechercherTitre   { font-family: Montserrat, Arial;  font-size: 20px;  text-transform:uppercase;  font-weight: 400;  margin-bottom: 10px }
.AccueilCreerLien,    .AccueilRechercherLien,  .AccueilDiversLien { font-family: Montserrat, sans-serif;  font-size: 15px;  color: var(--couleurTexteAccueilCreerLien);  font-weight: 800;  margin: 10px 0px 10px 0px;  text-decoration: none }
.AccueilDiversLien { font-size: 12px;  color: var(--couleurTexteAccueilDiversLien); text-transform:uppercase }

.AccueilCreerSection       { background-color: var(--couleurAccueilCreerSection) }
.AccueilCreerTitre         { color: var(--couleurTexteAccueilCreerTitre) }
.AccueilCreerLien          { background-color: var(--couleurAccueilCreerLien); font-size: 12px; width: 160px;  display: flex;  justify-content: center; text-transform: uppercase; }

.AccueilRechercherSection  { background-color: var(--couleurAccueilRechercherSection) }
.AccueilRechercherTitre    { color: var(--couleurTexteAccueilRechercherTitre) }


/* --------------------------------------------------------------------- */
/* Tool bar session.                                                     */

.Logo > img     { height: 20px }                     /* Logo dans la barre titre */
.ToolBarSession { height: 90px; }
div.BtnAccueil { height: 90px; }


.SessionToolAct > span, .SessionToolAct > button > span { font-family: Montserrat, sans-serif;  font-weight: 400;  font-size: 10px;  color: var(--couleurTexteSessionToolAct);  text-transform: uppercase }

/* --------------------------------------------------------------------- */
/* Section filtre de recherche de commande dans page recherche           */
/* Rechercher des projets, des soumissions et des commandes              */

.filtreRechercheCommande .LargFixe.ActInput > input {
  /* être de la même taille que .LargFixe.ActSelect .CustomSelect */ 
  width: 238px;
}

.filtreRechercheCommande .LargFixe.ActSelect .CustomSelect { width: 238px; box-sizing: border-box;}

/* --------------------------------------------------------------------- */
.FenetreChargeCommSize > .Contenu { box-shadow: 0 0 5px 0;}