@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700);
.lighter{font-weight:lighter}
.normal{font-weight:400}
.bold{font-weight:700}

 body{
        background-color: rgb(253, 253, 253);
    }
    .container{
        max-width:100%;
    }
    pre {
        tab-width: 1px;
        padding: 2px;
    } 
    li.list-group-item {
        /*cursor: auto;
        color: #149dcc;*/
    }
    span.gotobrowsingsearch{
        cursor: pointer;
    }
    span.gotobrowsingsearch:hover{
        color: #149dcc;
    }
    span.gotopicturesearch{
        cursor: pointer;
    }
    span.gotopicturesearch:hover{
        color: #149dcc;
    }
 a:hover{
    text-decoration: underline;
}


section{
 background-color: #fff;
}


.artcontainer, .artcontainer div {
 background-color: #fff;
padding-left: 4em;
padding-right: 4em;
padding-top: 1em;

}

@media (max-width: 1248px) {




.artcontainer, .artcontainer div {
 background-color: #fff;
padding-left: 2em;
padding-right: 2em;
padding-top: 1em;
}

}

@media (max-width: 900px) {



.artcontainer, .artcontainer div {
background-color: #fff;
padding-left: 0em;
padding-right: 0em;
padding-top: 1em;
}

}


.artcontainer, .artcontainer div {
    background-color: #fff;
    padding: 8px;
}
section.entete{
    display: flex;
    align-items: center;
    color:#984920;
    border-bottom: 2px solid #333;
    background-color: #fff;
}
.entetetitre{
    flex:1;
}
.entetetitre .small{
    font-size: 0.9em;
}
.entetelogo{
    MAX-WIDTH: 25%;
}
.entetelogo img{
    max-height: 5em;
    MAX-WIDTH: 100%;
}

section.standard{
    display: flex;
    align-items: start;
    justify-content: space-around;
    padding-top: 1em;
    padding-bottom: 1em;
    border-bottom: 2px solid #333;
    background-color: #fff;
}
section.standardnoline{
    display: flex;
    align-items: start;
    justify-content: space-around;
    padding-top: 1em;
    background-color: #fff;
}
.sectionimg{
    text-align:center;
    flex:1;
}
.sectiontable{
    padding-top: 2em;
    text-align:center;
    flex:1;
}
section img{
    max-width: 100%;
}
.sectiontext{
    text-align:left;
    flex:1;
}
.gridtitle, .justtitle{
    text-align:center;
    padding-top: 2em;
    padding-bottom: 0;
    background-color: #fff;
    width: 100%;
}
.gridtitle p, .justtitle p{
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    
}
section.grid{
    display: flex;
    align-items: start;
    justify-content: space-between;
    padding-top: 1em;
    padding-bottom: 1em;
    border-bottom: 2px solid #333;
    background-color: #fff;
}
section.gridnoline{
    display: flex;
    align-items: start;
    justify-content: space-between;
    padding-top: 1em;
    background-color: #fff;
}


section.partnum{
    display: flex;
    align-items: start;
    justify-content: space-around;
    padding-top: 1em;
    padding-bottom: 1em;
    border-bottom: 2px solid #333;
    background-color: #fff;
}
section.partnum .sectionpartnum{
    text-align:center;
}
section.partnum .partnumtitle{
    font-size: 2em;
    font-weight:700;
}
.partnumcontent{
}
section.justrohs{
    padding-top: 1em;
    background-color: #fff;
    width: 100%;
}
.mt{
    font-size: 1.5em;
    font-weight:500;
}
.mti{
    font-size: 1.5em;
    font-weight:500;
    font-style: italic;
}
.mtb{
    font-size: 1.5em;
    font-weight:700;
}
.mtbi{
    font-size: 1.5em;
    font-weight:700;
    font-style: italic;
}
.mtc{
    font-size: 1.5em;
    font-weight:500;
    text-align: center;
}
.mtic{
    font-size: 1.5em;
    font-weight:500;
    font-style: italic;
    text-align: center;
}
.mtbc{
    font-size: 1.5em;
    font-weight:700;
    text-align: center;
}
.mtbic{
    font-size: 1.5em;
    font-weight:700;
    font-style: italic;
    text-align: center;
}
.st{
    font-size: 1.2em;
    font-weight:500;
}
.sti{
    font-size: 1.2em;
    font-weight:500;
    font-style: italic;
}
.stb{
    font-size: 1.2em;
    font-weight:700;
}
.stbi{
    font-size: 1.2em;
    font-weight:700;
    font-style: italic;
}
.stc{
    font-size: 1.2em;
    font-weight:500;
    text-align: center;
}
.stic{
    font-size: 1.2em;
    font-weight:500;
    font-style: italic;
    text-align: center;
}
.stbc{
    font-size: 1.2em;
    font-weight:700;
    text-align: center;
}
.stbic{
    font-size: 1.2em;
    font-weight:700;
    font-style: italic;
    text-align: center;
}
.alignleft{
    text-align:left;
}
.aligncenter{
    text-align:center;
}
.bold{
    font-weight:700;
}
.italiq{
    font-style: italic;
}
@media (max-width: 767.98px) {
.row {
  display: -webkit-flex;
  -webkit-flex-wrap: wrap; }

  .colo{
  display: -webkit-flex;
  -webkit-flex-wrap: wrap-reverse;
  }
  .baissemenu{
    display:block;
  }
}
@media (min-width: 768px){
.row {
  display: -webkit-flex;
  -webkit-flex-wrap: wrap; }
  .baissemenu{
    display:none;
  }
 } 
 
 .menubs, .menupo{
    display:none;
  }
 
div>ul.list-group > li.list-group-item{
  border: 1px solid rgba(0,0,0,.125);
}

li.list-group-item {
    position: relative;
    display: block;
    padding: .75rem;
    padding-right:0;
    padding-bottom: .3rem;
    margin-bottom: -1px;
    background-color: #fff;
    border: 0;
    border-left: 1px solid rgba(0,0,0,.125);
    line-height: 120%;
} 

span.gotobrowsingsearch::before, span.gotopicturesearch::before {
  content:"\f3cf";
font-family:"Ionicons";speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;text-rendering:auto;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  color:#999;
  margin-right:0.5rem;
  margin-left:0rem;
} 

/* Ajustement pour les mobiles */
@media (max-width: 768px) {
    .mobile-show {
        display:normal;
    }
    .mobile-hide {
        display:none;
    }
    .text-rightmob {
		text-align:left;
	}
}

@media (min-width: 768px) {
    .mobile-show {
        display:none;
    }
    .mobile-hide {
        display:normal;
    }
    .text-rightmob {
		text-align:right;
	}
}
		.iconSpan{
			background-color: transparent;
			font-size: 2em;
            padding: 10px;
            border-radius: 50%;
            cursor: pointer;
		}
		#catalogue-icon {
			position: fixed;
            top: 80px;
            right: 20px;
            background-color: transparent;
            color: white;
            font-size: 2em;
            padding: 10px;
            border-radius: 50%;
            cursor: pointer;
            display: none;
        }
     .rouge {
     	color: red !important;
     }
        img {
            pointer-events: none; /* Désactive le clic sur les images */
            user-drag: none; /* Empêche le glisser-déposer */
        }

/* Styliser les placeholders */
::placeholder {
    color: #aaa !important; /* Couleur claire */
    font-style: italic; /* Texte en italique */
    opacity: 0.8; /* Légèrement transparent */
}

/* Pour compatibilité avec certains navigateurs */
:-ms-input-placeholder, ::-ms-input-placeholder {
    color: #aaa !important;
    font-style: italic;
    opacity: 0.8;
}

/* Ajustement des champs input pour une meilleure compacité */
.form-control {
    line-height: 1;
    min-height: 2.2em; /* Ajustement léger */
    padding: 4px 8px; /* Uniformisation du padding */
    font-size: 14px;
}

.form-group {
    line-height: 1;
}

input, select, textarea {
    line-height: 1;
    min-height: 2.2em; /* Hauteur ajustée */
    padding: 4px 8px; /* Réduction du padding */
    font-size: 14px;
    border-radius: 4px;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-clip: padding-box;
    height: auto; /* S\'assure qu\'il ne prend pas une hauteur excessive */
}

/* Styles du modal pour une hauteur dynamique */
.modal-dialog {
    display: flex;
    align-items: center; /* Centre le modal verticalement */
    min-height: auto;
    max-height: 90vh; /* Empêche un modal trop grand */
}

.modal-content {
    max-height: 90vh; /* Empêche un modal trop grand */
    overflow-y: auto; /* Ajoute un défilement si nécessaire */
    min-height: auto; /* Permet de réduire la hauteur si le contenu est court */
    height:auto;
}

/* Centrage automatique et ajustement de la hauteur */
.modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: auto; /* Ajuste en fonction du contenu */
    max-height: 90vh;
}

/* Ajustement pour les mobiles */
@media (max-width: 768px) {
    .modal-dialog {
        min-height: auto;
        max-height: 85vh;
    }
    .modal-content {
        max-height: 85vh;
        min-height: auto;
    }
}

@media (min-width: 768px) {
    .modal-md-custom {
        max-width: 40%; /* Ajuste la largeur selon ton besoin */
    }
}
.divcaptcha {
border-radius: .25rem;
border: 1px solid #e8e8e8;
}

.blacklink{
	color: #232323;
  text-decoration: none;
  transition: color 0.3s;
  text-decoration: none;
}
.blacklink:hover{
	text-decoration: underline;
}
select option:disabled {
  color: #000 !important;
  background-color: #f8f9fa !important; /* facultatif : pour garder un contraste clair */
  font-style: italic !important;
}
table.table-sm td, 
table.table-sm th {
  padding: 0.2rem;
  font-size: 0.75rem;
}
.t-fw-bold {
  font-weight: 700 !important;
  background-color: #f3f3f3  !important;
}
.fw-bold {
  font-weight: 700 !important;
  background-color: #fff  !important;
  text-align: center  !important;
}
.text-secondary {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-secondary-rgb),var(--bs-text-opacity)) !important;
}
.container {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;  /* ← évite le scroll horizontal */
  box-sizing: border-box;
  
}
.animated,
.fadeIn,
.fadeInUp,
.slideInUp,
.slideInDown,
.slideInLeft,
.slideInRight {
  animation: none !important;
  transition: none !important;
  opacity: 1 !important;
  transform: none !important;
}


/* Mode horizontal, largeur minimum */
@media (min-width: 820px) {
 .table-partnum-selector {
   width: auto !important;
   min-width: 600px;    /* Ou ce que tu veux comme base mini */
   max-width: 100%;
   margin-left: auto;
   margin-right: auto;
 }
}

/* Mode mobile/vertical, retire la largeur minimum */
@media (max-width: 819px) {
  .table-partnum-selector {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
}