/* ===================================================================== */
/*                             Bouton.css                                */
/* � 2019  Dunin Technologie Inc.                                       */
/* ===================================================================== */

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

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


/* --------------------------------------------------------------------- */
/* Boutons génériques.                                                   */

button
  {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;       /* Affichage vertical, pour que le texte soit sous l'icône */
    cursor: pointer
  }
.CurseurDef { cursor: default;}

/* les boutons dans la box du kit   */
.Contenu.Droit button.RangeeInverse:not(.Primaire) 
  {
    background-color: var(--couleurBoutonFlat);
    border: 0px;
    align-items: center;
  }

button.Default > span::before { content:'* ' }
button.Default > span::after  { content:' *' }

/* --------------------------------------------------------------------- */
/* Sans contour, fond transparent.                                       */

.Flat > button
  {
    background-color: var(--couleurBoutonFlat);
    border: none;
  }

.EnlevFiltreFonc .Flat > button { padding-left: 0px;}

.BtnPlaine {border: none; background-color: transparent; justify-content: center;}

/* les boutons dans la box du kit   */
.PanelKit .ActTitre .ActBouton.Flat > button, .PanelContenu .ActTitre .ActBouton.Flat > button {margin-right: 72px;}
.Contenu.Droit .ActGrid .Flat > button, .Contenu.Droit .ActGrid .ActBouton:not(.Secondaire) > button {background-color: var(--couleurBoutonFlat); border: 0px;}

/* Menu de gauche - Créer des colonnes pour les icônes (erreur, notes, annexes) */
.IconItem { width: 36px;}

/* --------------------------------------------------------------------- */
/* Bouton texte.                                                         */

.BoutonTexte > button
  {
    min-height:30px;
  }

/* --------------------------------------------------------------------- */
/* Bouton Accueil.                                                       */

div.BtnAccueil { width: 104px; height: 44px; justify-content: center; text-align: center; align-items: center;}
.BtnAccueil:hover {background-color: var(--couleurBoutonAccueilHover);}

/* --------------------------------------------------------------------- */
/* Boutons des tools bars (ex: layout 2D).                               */

/* BoutonsToolBar: classe css d'ActChoix (pour les buttons fils)
                   classe css d'ActSection pour pour un groupe de boutons
   BoutonToolBar:  bouton indépendant (comme Done) dans la barre d'outils*/
div.BoutonsToolBar > .ActBouton > button, div.BoutonsToolBar > button, button.BoutonToolBar
  {
    background-color: var(--couleurBoutonToolBar);
    border: none !important;
    border-radius: 5px;
    align-items: center;
    justify-content: center;
    padding: 2px;
    margin: 4px;
    box-sizing: border-box;
  }

div.BoutonsToolBar.Petits > .ActBouton > button, div.BoutonsToolBar.Petits > button, button.BoutonToolBar.Petit
{
  width: 34px;
  height: 34px;
}

div.BoutonsToolBar.Moyens > .ActBouton > button, div.BoutonsToolBar.Moyens > button, button.BoutonToolBar.Moyen
{
  width: 36px;
  height: 36px;
}

div.BoutonsToolBar.Grands > .ActBouton > button, div.BoutonsToolBar.Grands > button, button.BoutonToolBar.Grand
{
  width: 40px;
  height: 40px;
}


div.BoutonsToolBar > button.Actif, div.BoutonsToolBar > button.Inactif:hover, div.BoutonsToolBar > .ActBouton > button:hover, button.BoutonToolBar:hover
  {
    background-color: var(--couleurBoutonToolBarHover);
  }

div.BoutonsToolBar.Petits > button > img, button.BoutonToolBar.Petit > img
  {
    height: 24px;
    width:  24px;
  }

div.BoutonsToolBar.Moyens > button > img, button.BoutonToolBar.Moyen > img
  {
    height: 30px;
    width:  30px;
  }

div.BoutonsToolBar.Grands > button > img, button.BoutonToolBar.Grand > img
  {
    height: 36px;
    width:  36px;
  }


/* --------------------------------------------------------------------- */
/* Boutons d'affichage                                               */
/* 2025-04-11 Zoé: Custom bouton pour les choix d'affiche*/
div.BoutonsToolBar.Moyens2 > .ActBouton > button, div.BoutonsToolBar.Moyens2 > button, button.BoutonToolBar.Moyen2
{
  width: 36px;
  height: 36px;
}

div.BoutonsToolBar.Moyens2 > button > img, button.BoutonToolBar.Moyen2 > img
  {
    height: 24px;
    width:  24px;
  }


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

.ActBouton.Primaire > button, .ActBouton.Secondaire > button
  {
    margin: 8px;
    padding: 10px 15px 10px 15px;

    border: solid 1px;
    border-radius: 5px;

    justify-content: center;
    align-items: center;
  }

.ActBouton.Primaire > button
  {
    background-color: var(--couleurBoutonPrimaire);
    color: var(--couleurTexteBoutonPrimaire);
    border-color: var(--couleurBordureBoutonPrimaire);
  }

.ActBouton.Primaire > button:hover
  {
    background-color: var(--couleurBoutonPrimaireHover);
    color: var(--couleurTexteBoutonPrimaireHover);
    border-color: var(--couleurBordureBoutonPrimaireHover);
  }

.ActBouton.Secondaire > button
  {
    background-color: var(--couleurBoutonSecondaire);
    color:  var(--couleurTexteBoutonSecondaire);
    border-color: var(--couleurBordureBoutonSecondaire);
  }

.ActBouton.Secondaire > button:hover
  {
    background-color: var(--couleurBoutonSecondaireHover);
    color:  var(--couleurTexteBoutonSecondaireHover);
    border-color: var(--couleurBordureBoutonSecondaireHover);
  }

.ActBouton.Secondaire.BoutonHoriz > button
  {
    height: auto;
    min-height: 32px;
    align-items: start;
    padding-left: 40px;
    background-position: 10px;
    background-repeat: no-repeat;
    font-size: 14px;
  }

/* Bouton Ajout (+)       */
/* .BoutonAjout > button { background: url("../../Client/Imgs/Ajout.svg") no-repeat center; width: 36px; height: 26px;} */
/* .BoutonAjout {align-items: center;} */
/* .BoutonHoriz.BoutonAjout  button:hover { background-image: url(../../Client/Imgs/Ajout-white.svg); } */

/* Bouton Delete (Supprime) */
/* .BoutonDelete > button { background: url("../../Client/Imgs/Delete.svg") no-repeat center; width: 36px; height: 26px;} */
/* .BoutonHoriz.BoutonDelete button:hover { background-image: url(../../Client/Imgs/Delete-white.svg);} */
/* --------------------------------------------------------------------- */
/* Boutons des acteurs choix.                                            */

.ActChoix
  {
    overflow-x: auto;                  /* Active la scrollbar horizontale*/
    min-height: fit-content;           /* evite l'ajout d'une scroll V :(  Ceci assume que la hauteur de la scrollbar est constante */
  }

.ActChoix.PasAPas
  {
    flex: 1;                          /* Contenu flexible                */
    flex-wrap: wrap;                  /* Sur plusieurs lignes            */
    align-content: flex-start;        /* Évite les espaces vides         */
  }


/* --------------------------------------------------------------------- */
/* Boutons des toolbars (acteur choix, toolbar session, ...).            */

.ToolBar > button
  {
    width:30px;
    height:30px;
  }

.ToolBar > button > img
  {
    max-width:24px;
    max-height:24px;
  }


/* --------------------------------------------------------------------- */
/* Tuiles.                                                               */

.Tile > button
  {
    margin: 3px;

    background-color: var(--couleurBoutonTile);
    border: none;
    min-height: fit-content;
  }

.Tile.Image.Texte > button
  {
    padding: 0px;
    height: auto;                     /* Pour inclure le texte           */
  }

.Tile.Image.Texte > button > span
  {
    overflow: hidden;                 /* Masque le texte qui dépasse     */
    text-align: left;
    max-width: 100%;

    /* Ajout d'un '...' si le texte dépasse 2 lignes */  
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
  }


.Tile.Image.Texte > button > object  { white-space: normal }

.Tile.Image.Border > button > img,
.Tile.Image.Border > button > object,
.Tile.Border:not(.Image) > button > object > span,   /* boutons textes dans acteur choix */
.Tile.Border:not(.Image) > button > span             /* boutons textes dans acteur choix */
  {
    border: solid 1px;
    padding: 4px;
    border-color: var(--couleurBorder);
    object-fit: contain;
  }

.ImageSeparee.ActChoix.Image.Texte > button.Actif > div,
.Tile.Image.Border > button.Actif > img,
.Tile.Image.Border > button.Actif > object,
.Tile.Border:not(.Image) > button.Actif > object > span,   /* boutons textes dans acteur choix */
.Tile.Border:not(.Image) > button.Actif > span             /* boutons textes dans acteur choix */
  {
    border: solid 5px;
    padding: 0;
    border-color: var(--couleurHighlight);
    object-fit: contain;
  }

/* 2023-09-26: Ali Apparence de l'état mouse hover sur boutons avec état selected  */
.ImageSeparee.ActChoix.Image.Texte > button.Inactif:hover > div,
.Tile.Image.Border > button.Inactif:hover > img,
.Tile.Image.Border > button.Inactif:hover > object,
.Tile.Border:not(.Image) > button.Inactif:hover > object > span,   /* boutons textes dans acteur choix */
.Tile.Border:not(.Image) > button.Inactif:hover > span             /* boutons textes dans acteur choix */
  {
    border: solid 5px;
    padding: 0px;
    border-color: var(--couleurHighlight)
  }

.Bouton48 > button { width:52px; height:52px }
.Bouton48 > button > img, .Bouton48 > button > object { max-width:48px; max-height:48px }

.PasAPas.Tile > button > object, .PasAPas.Tile > button > img { margin-bottom:7px }   /* espace entre le bouton et le texte dans le pas à pas */
.PasAPas.Tile > button { margin-bottom:35px; flex:auto }           /* espaces entre les boutons dans le pas à pas */
.Tile > button.Actif > span { font-weight: 700 }           /* Texte en bold pour le choix courant (pas à pas mais aussi acteur choix) */

.Tile > button          { width: 114px;  height: 114px;  padding:2px }
.Tile.Petit   > button  { width: 40px;   height: 40px ;  padding:2px }  /* Image 30 + border(2) + padding(8) = 40 */
.Tile.Petit32 > button  { width: 32px;   height: 32px ;  padding:2px }
.Tile.Moyen   > button  { width: 72px;   height: 72px ;  padding:2px }
.Tile.Gros    > button  { width: 186px;  height: 186px;  padding:2px }
.Tile.Grand   > button  { width: 264px;  height: 264px;  padding:2px }

.Tile.Image         > img,  .Tile.Image         > button > img,  .Tile.Image > button > object          { width:104px;  height:104px } /* cela ne s'applique pas lorsque ImageSeparee est vrai */
.Tile.Image.Petit   > img,  .Tile.Image.Petit   > button > img,  .Tile.Image.Petit > button > object    { width:30px;   height:30px  }
.Tile.Image.Petit32 > img,  .Tile.Image.Petit32 > button > img,  .Tile.Image.Petit32 > button > object  { width:22px;   height:22px  }
.Tile.Image.Moyen   > img,  .Tile.Image.Moyen   > button > img,  .Tile.Image.Moyen > button > object    { width:62px;   height:62px  }
.Tile.Image.Gros    > img,  .Tile.Image.Gros    > button > img,  .Tile.Image.Gros  > button > object    { width:176px;  height:176px }
.Tile.Image.Grand   > img,  .Tile.Image.Grand   > button > img,  .Tile.Image.Grand > button > object    { width:254px;  height:254px } /* cela ne s'applique pas lorsque ImageSeparee est vrai */

/* Bordure ronde       */
.Tile.Image.Border.Petit > button > img {border-radius: 5px;}

/* pour séparer l'image du bouton où l'image n'est pas carrée */
/* ImageSeparee in ActChoix (ajouter un item) */ 
.ImageSeparee.ActChoix.Image.Texte > button > div {
  width: 114px;
  height: 114px;
  border: 1px solid var(--couleurBorder);
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.ImageSeparee.ActChoix.Image.Texte > button > div > img {height: 97%; transform: scale(0.89);}               /* for ImageSeparee in ActChoix  */
.ImageSeparee.Tile.Image.Grand     > div { width: 254px; height: 254px; justify-content: center;}            /* for ImageSeparee in ActBouton */
.ImageSeparee.Tile.Image.Grand     > div > img {transform: scale(0.89)}

/* bouton pour agrandir l'image dans une nouvelle fenêtre */
img.BtnEnlargeImg { content: url("../../Client/Imgs/zoom-in-black-24px.svg"); }

/* bouton pour reverser l'image dans PasAPas */
img.BtnReverseImg { content: url("../../Client/Imgs/inverser-black-24px.svg"); }

img.BtnEnlargeImg, img.BtnReverseImg
  {
    width:  24px !important;
    height: 24px !important;
    border: none !important;
    margin:  0px !important;
    padding: 2px 6px !important;
    background-color: #FFFFFF;
    cursor: pointer;
  }

/* Affichage via un bouton (ex: Altex) */
.ActImage.BtnReverseImg   { content: url("../../Client/Imgs/inverser-black-24px.svg"); }
.ActImage.BtnReverseImg, .ActImage.BtnReverseImgNA  { width:  24px;  height: 24px;  padding: 4px 0px 0px 0px; }


/* --------------------------------------------------------------------- */
/* Check box via bouton (custom).                                        */

.ActCheck > button
  {
    background-color: var(--couleurBoutonCheck);
    border: none;
    width: 24px;
    height: 24px;
  }

/* Boutons 'oeil' des layers du layout */
.ActCheck > button.Visible.CheckBoxOn  { background-image: url("../../Client/Imgs/visibility-24px.svg") }
.ActCheck > button.Visible.CheckBoxOff { background-image: url("../../Client/Imgs/visibility_off-24px.svg") }
.Visible.CheckBoxOn, .Visible.CheckBoxOff {width: 24px; height: 24px;}

/* Boutons de la scène 3D */
.BoutonAnime > button      { background: url("../../Client/Imgs/Anime.svg") no-repeat center; width: 36px; height: 26px;}
.BoutonChangeVue > button  { background: url("../../Client/Imgs/ChangeVue.svg") no-repeat center; width: 36px; height: 26px;}
.BoutonOuvPortTir > button { background: url("../../Client/Imgs/ouvrir-ou-fermer-portes-et-tiroirs-24px.svg") no-repeat center; width: 36px; height: 26px;}


.BoutonError   { background-image: url("../../Client/Imgs/StErr.svg") }
.BoutonWarning { background-image: url("../../Client/Imgs/StAvert.svg") }
.BoutonNotifsUser.Avec { background-image: url("../../Client/Imgs/NotesAvec.svg") }
.BoutonNotifsUser.Sans { background-image: url("../../Client/Imgs/NotesSans.svg") }
.BoutonInfo   { background-image: url("../../Client/Imgs/Info.svg") }
.BoutonContratChange   { background-image: url("../../Client/Imgs/baseline-notifications-9E59C1_24px.svg") }
.BoutonContratChange2   { background-image: url("../../Client/Imgs/baseline-notifications-FFC2C1_24px.svg") }
.BoutonTutoriel { background-image: url("../../Client/Imgs/tutoriel_black-24px.svg") }
.BoutonCle { background-image: url("../../Client/Imgs/ModifiePartiel.svg") }

.BoutonError, .BoutonWarning, .BoutonNotifsUser, .BoutonInfo, .BoutonContratChange, .BoutonContratChange2, .BoutonTutoriel, .BoutonCle
  {
    margin: 0px 2px 0px 2px;
    background-color: var(--couleurBoutonNotification);
    border: none;
    height: 24px !important;
    width: 24px !important;
    align-self: center;
    background-repeat: no-repeat;
  }
  
  /* Bouton Ajout (+)       */
.BoutonAjout > button { background: url("../../Client/Imgs/Ajout.svg") no-repeat center; width: 36px; height: 26px;}
.BoutonAjout {align-items: center;}

/* Bouton Delete (Supprime) */
.BoutonDelete > button { background: url("../../Client/Imgs/Delete.svg") no-repeat center; width: 36px; height: 26px;}

/* Bouton d’ouverture de fenêtre */
.BoutonOuvrirFen > button { background: url("../../Client/Imgs/ouvrir-dans-une-fenetre-24px-black.svg") no-repeat center; width: 36px; height: 26px;}

/* --------------------------------------------------------------------- */
/* Simulation d'un bouton avec représentation 3D du cabinet.             */

.Rep3D { flex-direction: column }
.Rep3D > button  { flex: 1 }
button:disabled { cursor: not-allowed }

.Scene3DMsg
  {
    position: relative;
    bottom: 70px;
    width: 99%;
    border: 3px solid var(--couleurErreur);
    z-index: 20;                   /* Par-dessus le reste, qui a index 0 */
    background-color: var(--couleurScene3DMsg);
    text-align: center;
    display :none
  }

.Scene3DMsg.Actif
  {
    display :block;
  }

/* --------------------------------------------------------------------- */
/* Bouton de type image contenant une dimension.                         */

button.Dimension > object > div
  {
    height:100%;
    font-size: xx-large;
    color: var(--couleurTexteBoutonDimension);
    background-color: var(--couleurBoutonDimension);
    font-weight: 700;
    font-family: 'Open Sans SemiBold';
    align-items: center;
    justify-content: center
  }

/* --------------------------------------------------------------------- */
/* Bouton Dummy, Link, Barre.                         */

.ActBouton.Dummy > button { background-color: var(--couleurBoutonDummy); border-color: var(--couleurBordureBoutonDummy); }
.ActBouton.Dummy > button > span { color: var(--couleurTexteBoutonDummy) }
  
.ActBouton.Link > button { color: var(--couleurBoutonLink) }   /* Texte qui a un lien, comme dans le drag & drop de fichiers */
.ActBouton.Link > button:hover { color: var(--couleurBoutonLinkHover) }

.ActPanel > .Barre > .ActBouton > button { background-color: var(--couleurBoutonBarrePanel) }

/* --------------------------------------------------------------------- */
/* page de recherche                                                     */

.filtreRechercheCommande button.Primaire {margin-left: 4px; margin-top: 14px;}
button#moteurRecherche {margin-left: 20px; margin-right: 18px;}
.PageRecherche .ActOnglet div.Boutons {margin-bottom: 0px;}

/* bouton dans chacune des colonnes pour trier page recherche            */
.Trier {
  flex-direction: column;
  direction: rtl;
}

.BoutonTrier
{
  border: 0px;
  background-color: transparent;
  align-items: center;
  border-radius: 5px;
  width: 26px;
  padding-top: 2px;
  padding-bottom: 2px;
}
.BoutonTrier.Actif, .BoutonTrier:hover { background-color: var(--couleurHighlight);}


/* Grid contenant des acteurs de saisie (comme le contenu des items via grille Altex) */
.GridActeurs .TitreTexte { flex: 1; text-align: center }   /* Prendre l'espace maximal + centrer le texte */
.GridActeurs .Titre > .Trier { flex: 0  }                  /* Prendre l'espace minimal pour le bouton trier */
.GridActeurs .BoutonTrier { width: fit-content }

/* --------------------------------------------------------------------- */
/* Bouton checkBox on off                                                */
.CheckBoxOn {background-image: url('../../Client/Imgs/case-a-cocher-cuisinebase-etat-selected_18px.svg');}
.CheckBoxOn.Courant {background-image: url('../../Client/Imgs/case-a-cocher-cuisinebase-etat-selected-et-focused_18px.svg');}
.CheckBoxOff {background-image: url('../../Client/Imgs/case-a-cocher-cuisinebase-etat-normal_18px.svg');}
.CheckBoxOff.Courant {background-image: url('../../Client/Imgs/case-a-cocher-cuisinebase-focused_18px.svg');}
.CheckBoxOff:disabled {background-image: url('../../Client/Imgs/case-a-cocher-cuisinebase-etat-inactif_18px.svg');}
.CheckBoxOn, .CheckBoxOff {background-position: center; padding: 0px; max-width: 18px; max-height: 18px; background-repeat: no-repeat; align-self: center;}

/* --------------------------------------------------------------------- */
/* Tooltip.    Test added to verify fisrt 2022-07-08                     */

.TooltipTexte 
{
  visibility: hidden;
  width: max-content;
  height: fit-content;
  max-width: 200px;
  background-color: var(--couleurTooltip);
  color: var(--couleurTexteTooltip);
  text-align: center;
  justify-content: center;
  border-radius: 4px;
  position: absolute;
  z-index: 11;
  opacity: 0;
  transition: opacity 0.3s;
  padding: 7px 10px;
  margin-top: 10px;
}

.TooltipTexte::after {
  /* content: attr(title); */
  content: "";
  position: absolute;
  bottom: 100%; /* met la flèche en haut */
  left: 50%;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent var(--couleurTooltip) transparent;
  transform: translateX(-50%);
}

/* Pour les boutons sur le bord droit de window (DOM) */
.TooltipTexte.TooltipTexteRight::after { left: calc(100% - 18px); } /* calcule la position du triangle (18px à partir de son bord droit */

/* Pour les boutons sur le bord gauch de window (DOM) */
.TooltipTexte.TooltipTexteLeft::after { left: 14px; }

/* Pour les boutons en bas de window (DOM) (tooltip en haut) */
.TooltipTexte.TooltipTexteTop::after { bottom: -30%; border-color: var(--couleurTooltip) transparent transparent transparent;} /* met la flèche en bas */

/* positionnement du bouton «Précédent» dans la fenêtre de kit (layout) */
.LayoutKits .Left {width: 117px;}