/*---------------------------------------------------------------------------*/
/*--------------------------      ABR     -----------------------------------*/
/*---------------------------------------------------------------------------*/
:root{
    --font-apple: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Ubuntu, "Noto Sans", Arial, "Odoo Unicode Support Noto", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --color-focus: #f6f6f6;
}


body {
  width:1364px;
  margin:auto;
  margin-top:1px;	
  background: grey; //url("../images/background.png") no-repeat top/100% ;  
/* Ajout de la propriété avec les préfixes pour tous les moteurs de rendu*/ 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;                                              
  
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Ubuntu, "Noto Sans", Arial, "Odoo Unicode Support Noto", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";  
  font-size:12px;
  color:#00008B;
 
}

#entete{
	width:1362px;
	height:80px;  	
/*	border-top:1px solid #00008B;
    border-right:1px solid #00008B;
    border-left:1px solid #00008B; */
	background-color:white;
}

#menu_principal {  
    float:left;  
    margin:auto;
    width:1190px;
	font-weight:bold;
}


a{
    color:#00008B;
}
a:hover{
    color:#F00;
    font-weight: bold;
	cursor:pointer;
} 

textarea {
    resize:none;    
    font-family : var(--font-apple);
    cursor: text;    
    border: 1px solid lightgray;
    border-width: 0 0 1px  1px ;
    padding: 10px;
    margin-bottom:10px;     
}

img {
    border: none;
} 

/* CSS Document */
input
{
    font-family : var(--font-apple);
    cursor: text;    
    border: 1px solid lightgray;
    border-width: 0 0 1px 0;
    padding: 1px 0;
    margin-bottom:10px;
}

select 
{
    font-family : var(--font-apple);
    cursor: pointer;    
    border: 1px solid lightgray;
    border-width: 0 0 1px 0;
    padding: 1px 0;
    margin-bottom:10px;
}

input[type="radio"]{
    cursor:pointer;    
}

input[type="checkbox"]{
    cursor:pointer;    
}





/*---------------------------------------------------------------------------*/

/* Masquer le modal par défaut */
.modal {
	display: none;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.4);
}

/* Style du contenu du modal */
.modal-content {
	background-color: #fefefe;
	margin:10% auto;
	padding: 20px;
	border: 1px solid #888;
	width: 50%;	
}

/* Bouton pour fermer le modal */
.close {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
}

.close:hover,
.close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
}
		
/*---------------------------------------------------------------------------*/

textarea:focus {outline: none !important;background-color: var(--color-focus);}
select:focus {outline: none !important;background-color: var(--color-focus);}
input:focus {outline: none !important ;background-color: var(--color-focus);}

/*---------------------------------------------------------------------------*/

.menu_img {
    cursor:pointer;
    height:45px;
    width:45px;
    margin: 5px;
    margin-left:15px;
    margin-top:5px; 
}

.art_mini {
    cursor:pointer;
    height:50px;
    width:50px;	
}


.actions_img{
    cursor:pointer;
    height:45px;
    width:45px;
    margin-bottom: 20px;
}
.actions_img_petit{
    cursor:pointer;
    height:30px;
    width:30px;
    margin-bottom: 20px;
}

.actions_img_montre{
    cursor:pointer;
    height:90px;
    width:60px;
    margin-bottom: 20px;
}
.actions_img_mini{
    cursor:pointer;
    height:15px;
    width:15px;    
}
/*---------------------------------------------------------------------------*/
.contenu{
    background-color:white;
    border-bottom:1px solid #00008B;
    border-top:1px solid #00008B;
    border-right:1px solid #00008B;
    height:900px;
    width:1342px;  

    padding: 10px;
}

.contenu_gauche{	
    margin:5px 0px 5px 5px;
    padding:5px;  
    height:500px;  
    width:605px;
    float:left;
    border:0px;  
}

.contenu_droite{
    margin:5px;
    padding:5px;
    background-color:white;	
    background-repeat:no-repeat;
    height:500px;
    width:600px;
    float:right;
    border:0px;
}

.contenu_bandeau{
    margin:5px 0px 5px 5px;
    padding:5px;
    background-color:white;	
    background-repeat:no-repeat;
    clear:left;
    height:465px;
    width:1320px;
    border:0px;
}
.contenu_bandeau_gauche{	
    margin:5px 0px 5px 5px;
    padding:5px;  
    height:465px;  
    width:605px;
    float:left;
    border:0px;  
}
.contenu_bandeau_droite{
    margin:5px;
    padding:5px;
    background-color:white;	
    background-repeat:no-repeat;
    height:465px;
    width:600px;
    float:right;
    border:0px;
}


/*--------------------------------------------------------------------------*/
/*                MONTRES													*/
/*--------------------------------------------------------------------------*/

.contenu_famille{	
    margin:5px 0px 0px 5px;
    padding:5px;  
    height:378px;  /*height:249px;   si 8 sous familles ||    height:378px;  à l'origine */
    width:425px;   /*width:240px;   si 8 sous familles ||    width:290px;  à l'origine */
    float:left;
    border:1px solid;  
	border-color:lightgray;
	text-align:center;
}
.contenu_Stats{	
    margin:2px 2px 2px 2px;
    padding:0px;  
    height:170px;  /*height:249px;   si 8 sous familles ||    height:378px;  à l'origine */
    width:190px;   /*width:240px;   si 8 sous familles ||    width:290px;  à l'origine */
    float:left;
    border:1px solid;  
	background-color:#F1F1F1;
	border-color:gray;
	text-align:center;
}
.contenu_StatsMontres{	
    margin:4px 4px 4px 4px;
    padding:0px;  
    height:386px;
    width:320px;
    float:left;
    border:1px solid;  
	background-color:#F1F1F1;
	border-color:lightgray;
	text-align:center;
}
/*--------------------------------------------------------------------------*/
/*                CLIENTS													*/
/*--------------------------------------------------------------------------*/
.contenu_achats{	
    margin:5px 0px 0px 5px;
    padding:5px;  
    height:270px;  /*height:249px;   si 8 sous familles ||    height:378px;  à l'origine */
    width:450px;   /*width:240px;   si 8 sous familles ||    width:290px;  à l'origine */
    float:left;
    border:1px solid;  
	border-color:lightgray;
	text-align:center;
}







.colonne_titre{
    font-weight: bold;    
    float:left;
    border:0px;  
    height:200px;
}

.colonne_libchamps{
	font-weight: bold;    
    text-align:right;
	padding-right:15px;
	font-style:italic;
    float:left;
    border:0px;  
	width:140px;
	margin-bottom:10px; 
}
.colonne_champs{
    font-weight: normal;
    width:450px;
    float:left;
    border:0px; 
    margin-bottom:10px; 
}

.h10{
    height:10px;
}
.h20{
    height:20px;
}
.h100{
    height:100px;
}
.h200{
    height:200px;
}
.h300{
    height:300px;
}
.h400{
    height:400px;
}

.w120{
    width:120px;
}
.w300{
    width:300px;
}
.w400{
    width:400px;
}
.w450{
    width:450px;
}
.w500{
    width:500px;
}


.image-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px; /* Espacement entre les images */
    max-width: 960px; /* Largeur maximale de la grille */
    margin: 0 auto; /* Centrer la grille horizontalement */
}

.image-grid img {
    width: 100%;
    height: auto;
    object-fit: cover; /* Ajuster les images sans déformation */
}


/*---------------------------------------------------------------------------
-----------------------------------------------------------------------------
---------------------------------------------------------------------------*/

.border{
  border-width:1px;
  border-color:lightgray;
  border-right-style:solid;
  border-left-style:solid;
  border-top-style:solid;   
  border-bottom-style:solid;
  padding:0px;
}
.borderBRT{
  border-width:1px;
  border-color:lightgray;
  border-bottom-style:solid;
  border-right-style:solid;
  border-top-style:solid;
}
.borderLBR{
  border-width:1px;
  border-color:lightgray;
  border-left-style:solid;
  border-bottom-style:solid;
  border-right-style:solid;
}
.borderLB{
  border-width:1px;
  border-color:lightgray;
  border-bottom-style:solid;
  border-left-style:solid;
}
.borderBR{
  border-width:1px;
  border-color:lightgray;
  border-bottom-style:solid;
  border-right-style:solid;
}
.borderBR{
  border-width:1px;
  border-color:lightgray;
  border-bottom-style:solid;
  border-right-style:solid;  
}
.borderB{
  border-width:1px;
  border-color:lightgray;
  border-bottom-style:solid;  
}
.borderR{
  border-width:1px;
  border-color:lightgray;
  border-right-style:solid;  
}
.borderT{
  border-width:1px;
  border-color:lightgray;
  border-top-style:solid;  
}