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

/* - DÉFINITION -------------------------------------------------------- */
/* Affichage des sections.                                               */
/* --------------------------------------------------------------------- */

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

.LogoAccueilEntete {cursor: default;}
.AccueilSectionA   {border-bottom: none !important;}

div.AccueilSelectGamme 
{
    background-image: url("../../Client/Imgs/TelescopeFlecheNoir.svg");
    background-position-x: center;
    background-repeat: no-repeat;
}

/* ---------------------------------------------------------------------  */
/* fenêtre de gerer du Gammes.                                            */
.GammeFen .Contenu {margin-left: 450px; max-height: 500px; max-width: 1000px;}
.ListeGamme.Cadre  {margin: 20px 0px 20px 20px; }
.GammeEditToolBar  {margin-top: 20px;}
.GammeEditBar      {align-items: center;}
.GammeEditBar .TitrePage > input {margin-left: 8px;}
.ContenuGamme.Cadre            {margin: 20px;}
.ContenuGamme .GammeInfo.Cadre {margin: 30px 20px 0px 20px;}
.ContenuGamme .Primaire        {margin-bottom: 10px;}

.BtnSuprim {background-color: transparent; border: none;}

/* ---------------------------------------------------------------------  */
/* page de gerer du Filtres.                                              */

/* .FiltreEditBar div.EntetePage.ActInput {width: 20%;} rename btn will be inside input! */
.BtnAjValFiltre {margin-right: 40px; }

.ValFiltre .ActGrid { grid-row-gap: 0px; }
.ValFiltre .Table .ActTexte:not(.Label), .ValFiltre .Table .ActInput, .ValFiltre .Table .ActBouton  {
    margin: 0px;
    padding-left: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    height: auto;
}

.ValFiltre .Table > div { border-bottom: 0px; border-left: 0px; }

.LabelChoixFiltre {width: 18.5%; padding-right: 20px; padding-left: 10px;} /* width: 11.5%; rename btn will be inside input! */
.LabelCodeFiltre {width: 25%; padding-left: 10px;} /* width: 18%; rename btn will be inside input! */

.Label2 {
    color: var(--couleurLabel);
    font-weight: 600;
    text-align: left;
    font-size: 15px;
}

/* ---------------------------------------------------------------------  */
/* Interface Maintenance.                                                 */

.FilAriane {margin-bottom: 10px;}

.NoteQcq.AvecLabel {width: 40.8%;}

.PanelEntete  {border-top-left-radius: 5px; border-top-right-radius: 5px;}
.PanelContenu {border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;}

.SecTitreLien {width: 83%;}
.SecTitreLien div.Label {width: 50%;}

.SecFile .ActFile { width: 41%; height: 220px; align-self: center; }
.FileDrop {margin-bottom: 20px;}

.SecShowImg .ImgTools.Cadre {width: 38%; margin-bottom: 20px;}
.SecShowImg .ImgTools .ActBouton {align-items: flex-end;} /* 2023:08-02 should be moved to the vue using css class: ?*/
.ImgFile > img {width: 64px; height: 64px;}

.ChoixValFiltre {margin-bottom: 16px; margin-top: 12px;}
.ChoixValFiltre div.Label {align-items: flex-start;} /* 2023:08-02 should be moved to the vue using css class: ?*/

.SubTitre {font-weight: 700; font-size: 18px; color: var(--couleurTexteSubTitre);}

/* ---------------------------------------------------------------------  */
/* Interface Utilisation.                                                 */


/* ---------------------------------------------------------------------  */
/* Section UtilToolBar.                                                      */

.UtilToolBar {min-height: 120px; padding-left: 40px; padding-right: 40px;}

.UtilToolBar .ActInput > input {border-radius: 26px; min-height: 30px; width: 300px; background: url("../../Client/Imgs/search-24px-gris-75787B.svg") no-repeat right center;}

.Courant:not(.Label):not(canvas) {
    box-shadow: 0 0 8px var(--couleurBoxShadowCourant);
    border-width: 3px;
}

.logoGammeCour > img {max-height: 70px;}

/* --------------------------------------------------------------------- */
/* Section Util.                                                         */

.Util {background: url("../../Client/Imgs/bg_texture.jpg"); padding-left: 40px;}

/* --------------------------------------------------------------------- */
/* Section UtilHier.                                                     */

.UtilHier {background-color: var(--couleurContenuHier);}
.BarPrincipal {margin-top: 50px; margin-bottom: 20px; margin-left: 40px;}
.BarPrincipal button {background-color: var(--couleurContenuHier); border: none; padding: 0px;}

.UtilContentHier { overflow: auto; padding: 50px; flex-wrap: wrap; gap: 4rem; }
.UtilContentHier .UtilRefs { flex-basis: 240px; }  /* to organize the columns of refs in flex container */
.UtilContentHier .UtilRefs img { width: 100%; margin-bottom: 14px;}
.UtilContentHier .ActTexte span {color: var(--couleurTexteSousSousSection)}

.ImgLiens > img {width: 100%; height: 100%; cursor: pointer;}
.UtilImgsLiens {margin-top: 20px; margin-bottom: 25px; margin-right: 40px;}
.UtilImgsLiens button {border: solid 1px var(--couleurBordureCadre); border-radius: 5px; padding: 0px;}
.UtilImgsLiens div:first-child {margin-bottom: 10px;}

/* --------------------------------------------------------------------- */
/* Section UtilIntermed.                                                 */

.UtilIntermed {gap: 1em;}
.BarIntermed, .BarFicheTech {margin-left: 4px; margin-right: 40px; min-height: 20px;}
.BarFicheTech {border-bottom: 1px solid var(--couleurBordureCadre);}

.UtilListeRefs, .UtilListeFiltres, .UtilImageSousRefs, .UtilFicheTech {background-color: var(--couleurContenuHier);}
.LigneSousCat .Ligne.ActSection {flex-direction: column;}
.LigneGItem, .LigneValFiltre    {padding-left: 30px;}

.UtilImageSousRefs .Colonne.ActSection {margin-left: 40px; margin-top: 30px; margin-bottom: 30px;}
.UtilImageSousRefs .ListePhotos {height: 200px;}
.UtilImageSousRefs .ListePhotos > img {cursor: pointer;}
.UtilImageSousRefs .ActTexte {margin-top: 30px}

.UtilImageSousRefs {margin-right: 40px !important; flex-wrap: wrap; gap: 1rem;}

.UtilListeRefs .ActTexte 
{
  overflow: hidden;
  max-width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

/* --------------------------------------------------------------------- */
/* Section FicheTech.                                                    */
.UtilFicheTech {margin-left: 4px; margin-right: 40px;}
.UtilFicheTech > span#titre {margin-left: 40px; margin-top: 40px; margin-bottom: 30px;} 
.PhotoTech {margin-left: 40px; margin-bottom: 40px; margin-right: 60px;}
.PhotoTech > img {width: 500px;}

.DescriptionTech {gap: 1em; padding-right: 10px;}
.DescriptionTech .TitreDesc {font-size: 19px;}
.DescriptionTech span.Puce {display: list-item; list-style-type: disc; margin-left: 25px;} /* to force the span elements to displayed like list-items */

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

.UtilHier.Cadre {margin: 20px 20px 25px 4px; padding: 0px;}

.Cadre, .CadreSimple { border-radius: 5px } /* Cadre de base

/* --------------------------------------------------------------------- */
/* Barre de la session.                                                  */

/* .ToolBarSession { min-height: 50px;  margin-top: 50px;  padding-left :0px }
.ToolBarSession > .ActBouton > button { padding-left:0px }
.Logo > img { max-height: 50px } */