/* ===================================================================== */
/*                          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: 203px;}
.PanelLayout > .Panel.Gauche { flex-basis: 207px;}

/* --------------------------------------------------------------------- */
/* 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: 100%; gap: 1em}
.Stepper.LayersStepper > .Boutons > button {flex-direction: row; margin-left: 0px; align-items: center; height: 40px; padding-left: 30%;}
.Stepper.LayersStepper > .Boutons > button > .AvecDescription
{ 
  flex: 1;
  flex-direction: column;
  width: fit-content;
  margin-left: 10px;
  Color: var(--couleurTexteLayersStepper)
}

/* 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-etape-plan-etat-selected-sans-trait.svg"); }
#Layer_Environnement.Inactif::after { content: url("../../Client/Imgs/mini-stepper-vertical-etape-pieces-etat-selected-sans-trait.svg"); }
#Layer_ItemsBatiment.Inactif::after { content: url("../../Client/Imgs/mini-stepper-vertical-etape-items-batiment-etat-selected-sans-trait.svg"); }
#Layer_Kits.Inactif::after          { content: url("../../Client/Imgs/mini-stepper-vertical-etape-styles-globaux-etat-selected-sans-trait.svg"); }
#Layer_Items.Inactif::after         { content: url("../../Client/Imgs/mini-stepper-vertical-etape-items-pieces-etat-selected-sans-trait.svg"); }

/* Apparence de l'état mouse hover */
button.Inactif.LayersLayout:hover .AvecDescription > span:first-child { font-weight: 600 } /* titre layer.       */

/* new */
#Layer_Plan.Actif            { background: url("../../Client/Imgs/mini-stepper-vertical-etape-plan-etat-selected-sans-trait.svg") no-repeat left center;}
#Layer_Plan.Inactif          { background: url("../../Client/Imgs/mini-stepper-vertical-etape-plan-etat-normal-sans-trait.svg") no-repeat left center;  }
#Layer_Environnement.Actif   { background: url("../../Client/Imgs/mini-stepper-vertical-etape-pieces-etat-selected-sans-trait.svg") no-repeat left center; }
#Layer_Environnement.Inactif { background: url("../../Client/Imgs/mini-stepper-vertical-etape-pieces-etat-normal-sans-trait.svg") no-repeat left center;   }
#Layer_ItemsBatiment.Actif   { background: url("../../Client/Imgs/mini-stepper-vertical-etape-items-batiment-etat-selected-sans-trait.svg") no-repeat left center; }
#Layer_ItemsBatiment.Inactif { background: url("../../Client/Imgs/mini-stepper-vertical-etape-items-batiment-etat-normal-sans-trait.svg") no-repeat left center; }
#Layer_Kits.Actif            { background: url("../../Client/Imgs/mini-stepper-vertical-etape-styles-globaux-etat-selected-sans-trait.svg") no-repeat left center; }
#Layer_Kits.Inactif          { background: url("../../Client/Imgs/mini-stepper-vertical-etape-styles-globaux-etat-normal-sans-trait.svg") no-repeat left center;   }
#Layer_Items.Actif           { background: url("../../Client/Imgs/mini-stepper-vertical-etape-items-pieces-etat-selected-sans-trait.svg") no-repeat left center; }
#Layer_Items.Inactif         { background: url("../../Client/Imgs/mini-stepper-vertical-etape-items-pieces-etat-normal-sans-trait.svg") no-repeat left center; }

#Layer_Plan.Inactif:hover          { background: url("../../Client/Imgs/mini-stepper-vertical-etape-plan-etat-selected-sans-trait.svg") no-repeat left center; }
#Layer_Environnement.Inactif:hover { background: url("../../Client/Imgs/mini-stepper-vertical-etape-pieces-etat-selected-sans-trait.svg") no-repeat left center; }
#Layer_ItemsBatiment.Inactif:hover { background: url("../../Client/Imgs/mini-stepper-vertical-etape-items-batiment-etat-selected-sans-trait.svg") no-repeat left center; }
#Layer_Kits.Inactif:hover          { background: url("../../Client/Imgs/mini-stepper-vertical-etape-styles-globaux-etat-selected-sans-trait.svg") no-repeat left center; }
#Layer_Items.Inactif:hover         { background: url("../../Client/Imgs/mini-stepper-vertical-etape-items-pieces-etat-selected-sans-trait.svg") no-repeat left center; }

/* --------------------------------------------------------------------- */
/* 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; }
.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;  }

/* --------------------------------------------------------------------- */
/* 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; margin-top: 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;
  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}


/* --------------------------------------------------------------------- */
/* Projet UX  (Début : 2025-10-17)                                       */

/* Panel gauche */
.ContenuLayout .ToolBarLayout span, .ContenuLayout .Panel.Gauche .PanelEntete span:not(.Label), .ContenuLayout .Panel.Droit .InfoObjPD span, .ContenuLayout .Panel.Droit .InfoObjPD input {font-size: 13px;}
.ContenuLayout .Panel.Gauche .PanelContenu span:not(.Label), .ContenuLayout .Panel.Gauche .PanelContenu input, .ContenuLayout .Panel.Droit .TilePD span:not(.Label) {font-size: 12px;}
.ContenuLayout .Panel.Gauche input, .ContenuLayout .Panel.Droit input {font-size: 12px;}
.ContenuLayout .Panel.Gauche .ActInput, .ContenuLayout .Panel.Gauche .ActTexte:not(.Label) {margin-left: 1px; margin-right: 1px;}

.ContenuLayout .Panel.Gauche .PanelEntete  {margin-top: 0px; margin-bottom: 0px; padding: 6px; height: 40px; box-sizing: border-box;}
.ContenuLayout .Panel.Gauche .PanelContenu {padding: 8px 4px; margin-bottom: 0px;}

.ContenuLayout .Panel.Gauche .PanelEntete.Etapes .Primaire {height: auto; max-height: 30px;}
.ContenuLayout .Panel.Gauche .PanelContenu.Etapes, .ContenuLayout .PanelContenu.Lieux {border-bottom: none; overflow-x: hidden;}
.ContenuLayout .Panel.Gauche .Lieux .ActInput {margin-left: 4px;}
.ContenuLayout .Panel.Gauche .Lieux > .ActListe > .Ligne { margin-bottom: 0px;}
.ContenuLayout .Panel.Gauche .Lieux .Contenu > .Ligne:first-child { border-top: solid 1px var(--couleurBordureLignePanelContenu); }

.ContenuLayout .Panel.Gauche .IconItem { width: 18px;}
.ContenuLayout .Panel.Gauche .ActListe .Ligne.ActSection .ActTexte {padding-left: 3px;}
.ContenuLayout .Panel.Gauche .PanelContenu .Contenu .Ligne > .ActSection {padding-left: 0px;}
.ContenuLayout .Panel.Gauche .PanelContenu .ActTitre .ActBouton.Flat > button {margin-right: 2px; margin-left: 2px;}
.ContenuLayout .Panel.Gauche > .PanelContenu:last-child { margin-bottom: 4px;}

.ContenuLayout div.BoutonsToolBar.Petits > .ActBouton > button, div.BoutonsToolBar.Petits > button, button.BoutonToolBar.Petit
{
  width: 30px;
  height: 30px;
  margin: 0px;
}
.ContenuLayout div.BoutonsToolBar.Petits button > img, button.BoutonToolBar.Petit > img
{
  height: 18px;
  width:  18px;
}
.ContenuLayout div.BoutonsToolBar.XPetits > .ActBouton > button, div.BoutonsToolBar.XPetits > button, button.BoutonToolBar.XPetit
{
  width: 18px;
  height: 18px;
}
.ContenuLayout div.BoutonsToolBar.XPetits button > img, button.BoutonToolBar.XPetit > img
{
  height: 18px;
  width:  18px;
}
.ContenuLayout div.BoutonsToolBar.XPetits > .ActBouton > button:hover, button.BoutonToolBar.XPetit:hover
  {
    background-color: transparent;
  }

/* Panel droit */
.ContenuLayout .Panel.Droit .PanelContenu {padding: 0px;}
.ContenuLayout .Panel.Droit .SecSommInfoAtomeFen {padding: 4px;}
.ContenuLayout .Panel.Droit .SecSommInfoAtomeFen .AvecLabel {width: 58%;}
.ContenuLayout .Panel.Droit .SecSommInfoAtomeFen div.Label {padding-right: 4px;}
/* PanelDLayerBatiment, PanelDLayerBatiment, PanelDLayerItemsBatiment  */
.ContenuLayout .Panel.Droit div.TilePD {padding: 2px;}
.TilePD.Tile > button, button.TilePD
{
  align-items: center;
  box-sizing: border-box;
}
.TilePD.Tile.Image > button > img, .TilePD.Tile.Image > button > object, .TilePD.ImageSeparee.ActChoix.Image.Texte > button > div > img /* cas luxor */
{
  width: 70px;
  height: 70px;
  padding: 0px;
}
.TileV1.Tile > button, button.TileV1
{
  width: 72px;
  height: 82px;
}
.TileV2.Tile > button, button.TileV2, .TileV3.Tile > button, button.TileV3
{
  width: 78px;
  height: 110px;
}
.TilePD.ImageSeparee.ActChoix.Image.Texte > button > div
{
  width: 78px;
  height: auto;
}
.TilePD.ImageSeparee.ActChoix.Image.Texte > button.Actif > div, .TilePD.ImageSeparee.ActChoix.Image.Texte > button:hover > div {border-width: 3px; padding: 0px;}

.TileV1.Tile > button.Actif > img, .TileV1.Tile > button.Inactif:hover > img, .TileV2.Tile > button.Actif > img, .TileV2.Tile > button.Inactif:hover > img {background-color: var(--couleurBoutonStyleGolabal);}
.TileV1.Tile.Image.Border > button.Actif > img, .TileV1.Tile.Image.Border > button.Inactif:hover > img, .TileV2.Tile.Image.Border > button.Actif > img, .TileV2.Tile.Image.Border > button.Inactif:hover > img {border: none;}

.ActFile button.TilePD.TileV2 > img
{
  width: 70px;
  height: 70px;
  padding: 0px;
}
.ActFile button.TilePD.TileV2:hover > img {background-color: var(--couleurBoutonStyleGolabal);}

.TileV3.Tile.Image.Border > button > img {padding: 2px;}
.TileV3.Tile.Image.Border > button.Actif > img, .TileV3.Tile.Image.Border > button:hover > img, .TileV3.Tile.Image.Border > button:hover > object
{
  border: solid 3px;
  padding: 0px;
  border-color: var(--couleurHighlight)
}
.TilePD.Tile > button.Actif > span, .TilePD.Tile > button:hover > span {font-weight: 600;}
.TilePD.Tile.Image.Texte > button > span {margin-top: 7px; text-align: center;}

.ContenuLayout .KitLayout .PanelDLayerItems {margin: 40px 4px 4px 4px; border: solid 1px var(--couleurBordureCadre);}