/* ===================================================================== */
/*                          LayoutMaison.css                             */
/*   2019  Dunin Technologie Inc.                                       */
/* ===================================================================== */

/* - DÉFINITION -------------------------------------------------------  */
/* Affichage des layouts.  (LayoutMaison)                                */
/* --------------------------------------------------------------------- */

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

.ActLayout > canvas { border-top: none; }
.ActCAD    > canvas { border-top: none; }
/*.ActCAD  { width:fit-content; height:fit-content }*/
.PanelLayout .Panel.Droit {flex-basis: 260px;}
.PanelLayout > .Panel.Gauche { flex-basis: 150px;}

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

.LayoutPanelD.Cadre
{
  padding: 0px;
  margin-top: 0px;
  border-top: none;
}
.LayoutPanelD .LigneVerticale {margin: 0px; padding: 0px;}
.LayoutPanelD .ActChoix > button { font-size: 14px; }

.LayoutPanelD .TitrePanel:not(.TitreAtomeLong) {padding-left: 4px;}
.BarLayout .LabelPanel .Label, .LayoutPanelD .LabelPanel .Label
{
  width: 160px;
  text-align: left;
  padding-right: 0px;
  padding-left: 6px;
} /* Pour avoir de longues Labels sur une seule ligne */

/* Stepper verticale de layers du layout */
.ActOnglet > .Boutons > .Actif.LayersLayout .AvecDescription > span:first-child { font-weight: 600 }
.ActOnglet > .Boutons > .LayersLayout .AvecDescription > span:first-child       { font-size: 13px; }                    /* titre layer.       */
.ActOnglet > .Boutons > .LayersLayout .AvecDescription > span:last-child        { font-weight: 400; font-size: 12px; }  /* description layer. */

.Stepper.LayersStepper {margin-top: 10px;}
.Stepper.LayersStepper > .Boutons {flex-direction: column; overflow: unset !important; width: fit-content;}
.Stepper.LayersStepper > .Boutons > button {flex-direction: row; margin-left: 0px;}
.Stepper.LayersStepper > .Boutons > button > .AvecDescription
{ 
  flex: 1;
  flex-direction: column;
  width: fit-content;
  margin-left: 10px;
  Color: var(--couleurTexteLayersStepper)
}

#Layer_Plan.Actif::before            { content: url("../../Client/Imgs/mini-stepper-vertical-etape1-etat-selected.svg");  transform: scale(1); transform-origin: left }
#Layer_Plan.Inactif::before          { content: url("../../Client/Imgs/mini-stepper-vertical-etape1-etat-normal.svg");    transform: scale(1); transform-origin: left }
#Layer_Environnement.Actif::before   { content: url("../../Client/Imgs/mini-stepper-vertical-etape2-etat-selected.svg");  transform: scale(1); transform-origin: left }
#Layer_Environnement.Inactif::before { content: url("../../Client/Imgs/mini-stepper-vertical-etape2-etat-normal.svg");    transform: scale(1); transform-origin: left }
#Layer_ItemsBatiment.Actif::before   { content: url("../../Client/Imgs/mini-stepper-vertical-etape3-etat-selected.svg");  transform: scale(1); transform-origin: left }
#Layer_ItemsBatiment.Inactif::before { content: url("../../Client/Imgs/mini-stepper-vertical-etape3-etat-normal.svg");    transform: scale(1); transform-origin: left }
#Layer_Kits.Actif::before            { content: url("../../Client/Imgs/mini-stepper-vertical-etape4-etat-selected.svg");  transform: scale(1); transform-origin: left }
#Layer_Kits.Inactif::before          { content: url("../../Client/Imgs/mini-stepper-vertical-etape4-etat-normal.svg");    transform: scale(1); transform-origin: left }
#Layer_Items.Actif::before           { content: url("../../Client/Imgs/mini-stepper-vertical-etape5-etat-selected.svg");  transform: scale(1); transform-origin: left }
#Layer_Items.Inactif::before         { content: url("../../Client/Imgs/mini-stepper-vertical-etape5-etat-normal.svg");    transform: scale(1); transform-origin: left }

/* Préchargez le SVG pour éviter l'effet de scintillement (flickering et flashing) au mouse hover */
button.LayersLayout {overflow: hidden;}
#Layer_Plan.Inactif::after, #Layer_Environnement.Inactif::after, #Layer_ItemsBatiment.Inactif::after, #Layer_Kits.Inactif::after, #Layer_Items.Inactif::after
{
  visibility: hidden;
  width: 0;
  height: 0;
}
#Layer_Plan.Inactif::after          { content: url("../../Client/Imgs/mini-stepper-vertical-etape1-etat-selected.svg"); }
#Layer_Environnement.Inactif::after { content: url("../../Client/Imgs/mini-stepper-vertical-etape2-etat-selected.svg"); }
#Layer_ItemsBatiment.Inactif::after { content: url("../../Client/Imgs/mini-stepper-vertical-etape3-etat-selected.svg"); }
#Layer_Kits.Inactif::after          { content: url("../../Client/Imgs/mini-stepper-vertical-etape4-etat-selected.svg"); }
#Layer_Items.Inactif::after         { content: url("../../Client/Imgs/mini-stepper-vertical-etape5-etat-selected.svg"); }

/* Apparence de l'état mouse hover */
button.Inactif.LayersLayout:hover .AvecDescription > span:first-child { font-weight: 600 } /* titre layer.       */
#Layer_Plan.Inactif:hover::before          { content: url("../../Client/Imgs/mini-stepper-vertical-etape1-etat-selected.svg"); }
#Layer_Environnement.Inactif:hover::before { content: url("../../Client/Imgs/mini-stepper-vertical-etape2-etat-selected.svg"); }
#Layer_ItemsBatiment.Inactif:hover::before { content: url("../../Client/Imgs/mini-stepper-vertical-etape3-etat-selected.svg"); }
#Layer_Kits.Inactif:hover::before          { content: url("../../Client/Imgs/mini-stepper-vertical-etape4-etat-selected.svg"); }
#Layer_Items.Inactif:hover::before         { content: url("../../Client/Imgs/mini-stepper-vertical-etape5-etat-selected.svg"); }

/* --------------------------------------------------------------------- */
/* Fenêtres dans Layout (Gamme, Forme, kit, Item).                       */

/* Fenêtre InfosAtome déplaçable.                                        */
.LayoutInfosAtome.ActFenetre > .Contenu {width: 320px;}
.LayoutInfosAtome .FenetreBarre  {min-width: auto; gap: 0.5em}
.LayoutInfosAtome .FenetreBarre .ActBouton {cursor: pointer;}
.LayoutInfosAtome .FenetreBarre .ActButton:first-child { margin-left: 14px}
.LayoutInfosAtome .DragZone {cursor: move; user-select: none;}
.DragZone button > img {width: 24px;}
.LayoutInfosAtome .DragZone:hover {background-color: var(--couleurBouton36pxHover);}
.ActFenetre.LayoutInfosAtome > .Contenu.ActSection { top: 68%; left: 560px; } /* positionnement de la fenêtre flottante: LayoutInfosAtome */
.SecSommInfoAtomeFen            {padding: 10px;} /* width: 260px; */
.SecSommInfoAtomeFen .ActCheck  { justify-content: space-between;}
.LayoutInfosAtome .SecSommInfoAtomeFen .AvecLabel {width: 57%;}
.LayoutInfosAtome .SecSommInfoAtomeFen div.Label  {width: 30%; text-align: left; flex-direction: row;}
.LayoutInfosAtome .SecSommInfoAtomeFen .ActCheck  { gap: 3.2em; }
.LayoutPanelD .SecSommInfoAtomeFen div.Label {width: 50%;}
.LayoutInfosAtome .SecContenuInfoAtomeFen {padding-left: 10px;}
.LayoutInfosAtome .SecContenuInfoAtomeFen .AvecLabel, .LayoutInfosAtome .SecContenuInfoAtomeFen div.Label {width: 44%;}
.TitreAtomeLong {text-decoration: underline; cursor: pointer; text-overflow: ellipsis; overflow: hidden; width: 100%;} /* white-space: nowrap; */

/* Redimensionné LayoutFormesGestion et LayoutItemsAjFen */
.ActFenetre.Resized > .Contenu 
{
  position: absolute;
  top: 176px;
  left: 160px;
  bottom: 4px;
  right: 14px;
  border: 3px solid;
  z-index: 10;
  background-color: var(--couleurContenuFenetre);
  border-color: var(--couleurBordureContenuFenetre);
}

/* Fenêtre choisir Gamme et Forme (section avec messages et boutons de choix) et onglet assemblage d'avivia (LayoutKitsGestion)*/
.ContenuChoix { gap: 4em; }
.ContenuChoix .ActChoix   { margin-top: 40px; margin-bottom: 40px; overflow-x: hidden; gap: 3em; }
.ContenuChoix .DessinUsag { margin-left: 40px; }
.ContenuChoix .Tile.Gros > button { gap: 2em; justify-content: center; align-items: center;}
.ContenuChoix .Tile.Gros > button > span       { text-align: center; font-size: 18px; }
.ContenuChoix .Tile.Gros > button:hover > span { font-weight: 700; }

.ContenuChoix .ActTexte:first-child { font-weight: bold; text-transform: uppercase; font-size: 24px;}
.ContenuChoix .ActTexte:last-child  { font-size: 18px; }

/* Fenêtre style globaux (LayoutKitsGestion)  */
.SecAjEnlKit { margin-right: 28px; margin-left: 12px; }
.SecAjEnlKit .BoutonHoriz button { width: 100%; align-items: center; }
.SecStyleGlobals .ListeKits .Ligne { padding: 8px; margin-left: 10px; margin-right: 10px; } /* border: solid 1px var(--couleurBordurePanelContenu); */

/* LayoutItemsAjFen.                          */
.EnlevFiltreFonc {margin-bottom: 20px; margin-top: 20px;}

/* Fenêtre captures d'écran (LayoutPhotoGestionFen)  */
.LayoutPhotoGestion .ListePhotos {padding-left: 14px; padding-top: 10px;}
.LayoutPhotoGestion .ListePhotos div.TitreSection {padding-left: 2px;}
.PhotoRapport    {margin-bottom: 20px;}
.PhotoRapport > img {width: 800px; height: fit-content;}

/* Fenêtre resetForme (LayoutResetForme)  */
.LayoutResetForme span.Puce {display: list-item; list-style-type: disc; margin-left: 25px;}
.LayoutResetForme .ActTexteFormate .Msg1 span:first-child  {margin-bottom: 10px;}
.LayoutResetForme .ActTexteFormate .Msg1 span:nth-child(2) {margin-bottom: 15px;} 

/* --------------------------------------------------------------------- */
/* Layer Plan.                                                           */

/* --------------------------------------------------------------------- */
/* Layer Batiment (Environnement-forme de la pièce).                     */
.PanelDLayerBatiment .Ligne {margin-top: 0px;}

.SecFormePanel {min-height: 200px;}

/* --------------------------------------------------------------------- */
/* Layer ItemsBatiment.                                                  */
.PanelDLayerItemsBatiment .SecAide .PanelEntete     { margin: 0px; border: 0px; }
.PanelDLayerItemsBatiment .SecAideEtape > .ActTexte { margin-left: 16px; }

/* --------------------------------------------------------------------- */
/* Layer Items.                                                          */

/* to have smaller icons in CategoriePanel filters */
.SecFiltreCat .Flat { justify-content: center;}

.AjRapid > .ActSextion  {gap: 1.2px;}
.AjRapid input.Larg2Car {padding-left: 2px; width: 1.8em;}
.AjRapid input.Larg4Car {padding-left: 4px; width: 3em;  }

/* --------------------------------------------------------------------- */
/* Boutons de la première colonne du panel droit (toutes les layers).    */
/* div.ChoixNiv1 { flex-wrap: wrap;} */

.ChoixNiv1.Tile > button, button.ChoixNiv1
{
  margin: 0px;
  width: 100px;
  height: 100px;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-bottom: 1px solid var(--couleurBorder);
}
.ChoixNiv1.Tile.Image > button > img, .ChoixNiv1.Tile.Image > button > object /* cas luxor */
{
  border: none !important;
  width: 90px;
  height: 90px;
  padding: 0px;
}
.ChoixNiv1.Tile > button.Actif, .ChoixNiv1.Tile > button.Inactif:hover, .ChoixNiv1 > button:hover {background-color: var(--couleurBoutonStyleGolabal);}
.ChoixNiv1.Tile.Image.Border > button.Actif         > img {border: none;}
.ChoixNiv1.Tile.Image.Border > button.Inactif:hover > img {border: none;}
.ChoixNiv1.Tile.Image.Border > button:hover         > img {border: none;}
.ChoixNiv1.Tile > button.Actif > span       {font-weight: 400;}
.ChoixNiv1.Tile.Image.Texte > button > span {margin-top: 7px; overflow: auto; text-align: center;}

/* .ChoixNiv1 > span   {font-size: 14px; color: #333333; text-align: center;}  // titles */

/* Pour avoir le bouton de l'étape suivante de la même taille que les boutons de choix */
.PanelDLayerItemsBatiment .Primaire { width: 100px; } /* , .PanelDLayerBatiment .Primaire */
/* --------------------------------------------------------------------- */
/* Boutons de la deuxième colonne du panel droit (toutes les layers).    */
.ChoixNiv2 { flex-wrap: wrap; overflow-x: hidden;}

.ChoixNiv2 > button                  { margin-bottom: 12px; align-items: center;}    /* Espace entre les image de filtre de Forme  */
.ChoixNiv2 > button > span           { margin-top: 7px; text-align: center !important;} /* Espace entre texte et l'image de filtre de Forme  */
.ChoixNiv2.Tile > button             { width: 104px; height: 104px; }
.ChoixNiv2.Tile.Image > button > img { width: 94px;  height: 94px;  }

.PanelDLayerItemsBatiment .ChoixNiv2.Tile.Image.Border > button:hover > img,
.PanelDLayerItemsBatiment .ChoixNiv2.Tile.Image.Border > button:hover > object
  {
    border: solid 5px;
    padding: 0px;
    border-color: var(--couleurHighlight)
  }

/* --------------------------------------------------------------------- */
/* Barre d'outils - Layout                                               */
.ToolBarLayout {overflow: auto;}
.ToolBarLayout .ToolbarPanelD { flex-basis: 240px; }
.ToolBarLayout .ToolbarPanelD .Label { width: auto; padding-right: 2px; }
.ToolBarLayout .BarLayout .PlaceEnd {margin-left: auto; margin-right: 62px;}
.ToolBarLayout .BarLayout .BoutonsToolBar > .ActBouton, .ToolBarLayout .BarLayout .BoutonsToolBar > .ActChoix button {margin-left: 3px; margin-right: 3px;} /* V3 et V2 */
.ToolBarLayout .BarLayout .CadreSimpleD {margin-right: 6px;}
.ToolBarLayout.Cadre {padding-top: 0px; padding-bottom: 0px; margin-bottom: 0px;}
.ToolBarLayout .BarLayout .ActCheck > button {width: 24px !important;} /* ! pour checkbox grid */
.ToolBarLayout .CadreSimpleG, .ToolBarLayout .CadreSimpleD { border-color: var(--couleurCadreSimpleGD); }

/* change les directions de label des champs select (avec input) à row */
.LabelToolBarLayout div.Label { flex-direction: row; width: fit-content; }
.LabelToolBarLayout.AvecLabel.CustomSelect, input.LabelToolBarLayout.AvecLabel {width: 80px;}

/* Boutons des tools bar layout.                                         */
.ToolBarLayout .Onglet2D3D .Boutons > button /* Barre d'outils - Layout  */
  {
    background-color: var(--couleurBoutonToolBar);

    height: 30px;
    max-width: 30px;

    align-items: center;
    justify-content: center;
    margin: 4px;
  }

.ToolBarLayout .Onglet2D3D .Boutons > button:first-child  {margin-right: 16px !important;}
.ToolBarLayout .Onglet2D3D .Boutons > button:nth-child(2) {margin-right: 4px !important; }

.ActBouton.Actif.BoutonRegle, button.BoutonToolBar.CurseurNotAllowed:hover { background-color: transparent}

.PleinEcran {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: white; /* ou autre */
  z-index: 1000; /* Assure que ça passe par-dessus */
  overflow: auto;
}

/* --------------------------------------------------------------------- */
/* Fenêtre de path tracer.                                               */
.LayoutPathTracingFen .LigneVerticale {margin-left: 30px; padding-left: 30px;}
.LayoutPathTracingFen .CadreSimple {margin-bottom: 7px; margin-top: 14px;}
.LayoutPathTracingFen #divProgress {margin-bottom: 14px; margin-top: 10px;}
/* Inline Banner */
.SecInlineBanner {padding: 24px 27px 24px 14px; border: solid 1px var(--couleurBordureCadre); position: relative;}
.SecInlineBanner::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 5px;
  background-color: var(--couleurBordureGInline);
  pointer-events: none; /* so it does not interfere with mouse events */
  z-index: 1;
}
.SecImgInline {margin-right: 29px;} /* border-left: solid 5px var(--couleurBordureGInline);  */
.SecImgInline .ActImage  {width: 24px; height: 24px;}
.SecInfoInline {margin-bottom: 24px; padding-left: 14px;}
.TitreInline {font-size : 15px; font-weight : 600}
.MsgInline {font-size : 13px; font-weight : 400}