/* CSS Document */
<!--
body{
    background:url("../img/ombreBleuH.png") repeat-y scroll left top transparent;
    margin:0px;
    padding:0px;
}
    p, input, select, table, textarea, span{
        font-size:12px; /* Arial, Helvetica, sans-serif;*/
        text-decoration: none;
    }

    thead{
        background-image : linear-gradient(#FFFFFF, #AAAAAA);
        text-align:center;
        padding:5px;
    }

    th{
        border-left:1px solid black;
        border-top:1px solid black;
        border-bottom:1px solid black;
    }
    .tdCadreL{
        background:url('../img/fond3D.gif') repeat-x left bottom;
        text-align:center;
        border-left:1px solid black;
        border-top:1px solid black;
        border-bottom:1px solid black;
    }
    .tdCadreR{
        background:url('../img/fond3D.gif') repeat-x left bottom;
        text-align:center;
        border-left:1px solid black;
        border-right:1px solid black;
        border-top:1px solid black;
        border-bottom:1px solid black;
    }

    #celluleMenu{
        color:white;
        margin:0px;
        height:15px;
        background-color:#004080;
        font:12px Arial, Helvetica, sans-serif;
        padding:5px;}
        
    #celluleMenu a{
        color:white;
        text-decoration: none;}

    #celluleMenu a:hover{
        color:#004080;
        background-color:#B5CFEA;}
           
    .typoGrand{
        font:14px Arial, Helvetica, sans-serif;
        text-decoration: none;}

    .typoNormal{
        font:12px Arial, Helvetica, sans-serif;
        text-decoration: none;}

    .typoMoyen{
        font:10px Arial, Helvetica, sans-serif;
        text-decoration: none;}

    .typoPetit{
        font:9px Arial, Helvetica, sans-serif;
        text-decoration: none;}
    
    .typoFin{
        font:3px Arial, Helvetica, sans-serif;
        text-decoration: none;}
	
    .titre{
        font:bold 13px Arial, Helvetica, sans-serif;
        border-bottom:3px solid #B5CFEA;
        color: #004080;}

    .sousTitre{
        font:bold 12px Arial, Helvetica, sans-serif;            
        color: #004080;}

    .lien{text-decoration: none;}
    .lien:link{color: black;}
    .lien:visited{color: black;}
    .lien:active{color: black;}
    .lien:hover{color: blue;}

    .info{text-decoration: none;}
    .info:link{color: blue;}
    .info:visited{color: blue;}
    .info:active{color: blue;}
    .info:hover{color: blue;}
 
    #onglet {
        float:left;
        width:100%;        
        font:14px Arial, Helvetica, sans-serif;
        line-height:normal;
	border-bottom:1px solid #004080;}

    #onglet ul {
      margin:0;
      padding:10px 10px 0 0px;
      list-style:none;}

    #onglet li {
      display:inline;
      margin:0;
      padding:0;}

    #onglet a {
      float:left;
      background:url("../img/ongletGauche.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 10px;
      text-decoration:none;}

    #onglet a span {
      float:left;
      display:block;
      background:url("../img/ongletDroit.gif") no-repeat right top;
      padding:5px 15px 4px 6px; 
      cursor:pointer;
      color:black;}

    #onglet a:hover span{ color:blue; cursor:pointer;}
 
    #onglet #actif a { 
        position:relative ;
        background:url("../img/ongletGaucheActif.gif") no-repeat left top;
        cursor:pointer;
        top:1px;
        font:bold 14px Arial, Helvetica, sans-serif;
        color:black;}

    #onglet #actif a span { 
      background-position:100% -42px;
	  background:url("../img/ongletDroitActif.gif") no-repeat right top;
	color:black;}
	
    .ongletInfo {
        padding: 15px 10px;
        line-height: 1.5em;
        color: #444444;
        background-color: #ddd;
        background-image: linear-gradient(#D3DEFF, #ADC2E8);
        box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7);
    }
    .btnArrondi {
        font-family: Arial,sans-serif;
        font-size: 1.2em;
        
        height: 23px;
        padding-left: 8px;
        padding-right: 8px;
        padding-top: 5px; /*permet le centrage vertical*/
        text-align: center;
        color: #000;
        background: #444;
        background: linear-gradient( #EFEFEF, #888888);
        border-radius: 8px;
        text-shadow: 0px 1px 0px white;
        text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.2);
        box-shadow: 0 0 5px rgba( 0, 0, 0, 0.5), 0 -1px 0 rgba( 255, 255, 255, 0.4);
    }
    
    .btnArrondi:hover{
        color: #222;
        background: #555;
        background: linear-gradient( #E6FCFF, #E6FCFF);
        cursor : default;
    }
        
    a.infoBulle{
        position:relative; 
        z-index:24;
        text-decoration:none}

/*    a.infoBulle:hover{z-index:25;} */

    a.infoBulle span{display: none;}

    a.infoBulle:hover span{
        display:block; 
        position:absolute;

        top:3em; left:-5em; width:17em;
        border:1px solid #6699cc;
        background-color:#eeeeee; color:black;
        text-align: justify;
        font-weight:normal;
        padding:1px;}

    td.top{
        margin: 0;
        padding:  0;
        height: 42px !important;
        height: 42px;
        padding-top:  0px !important;
        padding-top:  3px;
        padding-left: 2.5%;
        padding-right: 2.5%;
        background: url(/topaze/img/bg_top.gif) #ffffff repeat-x top;}
        
    td.shadow{
        margin: 0;
        padding: 0;
        height: 28px !important;
        height: 25px;
        padding-top:  0px !important;
        padding-top:  3px;
        background: url(/topaze/img/shadow.jpg) #ffffff repeat-x top;}

    .tableauFiltre input{ background-color:transparent; border:0px;}
    .tableauFiltre select{ background-color:transparent; border:0px dotted transparent;}
    .tableauFiltre option{ background-color:#fff7b2;}

    .menuNew { /* boite qui contient le menu (les onglets) */
      border-bottom:solid 2px #004080 ; /* cr�e le trait noir en-dessous des onglets */
      padding-top:12px ; /* marge int�rieure haute */
      padding-left:10px;
      padding-bottom:0px ; /* marge int�rieure basse */
      font:10px Arial, Helvetica, sans-serif;
      background-color:#004080} /* le fond du menu est noir */

/* Configuration des couleurs par th\u00e8me - bas\u00e9es sur les ic\u00f4nes */
:root {
    --onglet-menu: #023453;           /* Bleu clair (ic\u00f4ne bleue avec carnet) */
    --onglet-recette: #5D8C55;        /* Vert olive (ic\u00f4ne verte avec cuill\u00e8re) */
    --onglet-ingredient: #D76A28;     /* Orange vif (ic\u00f4ne orange) */
    --onglet-stock: #3B5D8A;          /* Bleu fonc\u00e9 (ic\u00f4ne papier bleu) */
    --onglet-commande: #7B4D9B;       /* Violet profond (ic\u00f4ne violette) */
    --onglet-tracabilite: #2E5A3D;    /* Vert for\u00eat fonc\u00e9 (ic\u00f4ne verte tra\u00e7abilit\u00e9) */
    --onglet-sortie: #E4C57A;        /* Jaune clair (ic\u00f4ne dossiers) */
    --onglet-statistique: #5A8FD6;   /* Bleu ciel fonc\u00e9 (ic\u00f4ne bleue camembert) */
    --onglet-finance: #8B6F47;       /* Brun clair (ic\u00f4ne finances) */
    --onglet-production: #9B9B9B;     /* Turquoise fonc\u00e9 (ic\u00f4ne barquette) */
    --onglet-convive: #5A94A3;        /* Gris moyen (ic\u00f4ne convive/satellite) */
    --onglet-qualite: #C84848;        /* Rouge brique (ic\u00f4ne rouge qualit\u00e9) */
   

    --onglet-inactif: #023453;
    --onglet-actif-border: #023453;
}

/* Onglets verticaux */
.ongletNew {
    position: relative;
    text-align: center;
    height: 110px;
    width: 25px;
    background-color: var(--onglet-inactif);
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    text-decoration: none;
    overflow: visible;
}

.ongletNew:hover {
    filter: brightness(1.2);
}

.ongletNew-actif {
    border: 1px solid var(--onglet-actif-border);
    background-color: white !important;
    width: 25px;
}

/* Texte avec rotation verticale */
.onglet-label {
    display: inline-block;
    position: absolute;
    top: calc(50% + 8px);
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    -webkit-transform: translate(-50%, -50%) rotate(-90deg);
    -moz-transform: translate(-50%, -50%) rotate(-90deg);
    -ms-transform: translate(-50%, -50%) rotate(-90deg);
    -o-transform: translate(-50%, -50%) rotate(-90deg);
    transform-origin: center center;
    white-space: nowrap;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 5px 8px;
    width: auto;
    max-width: 100px;
}

/* Couleur du texte avec contraste optimal */
.ongletNew .onglet-label {
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.ongletNew-actif .onglet-label {
    color: #333;
    text-shadow: none;
}

/* Lien de fermeture */
.onglet-close {
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    text-decoration: none;
    font-size: 11px;
    font-weight: bold;
    z-index: 10;
    padding: 0px 4px;
    border-radius: 3px;
    transition: all 0.2s;
    line-height: 1;
}

.ongletNew-actif .onglet-close {
    color: #333;
}

.onglet-close:hover {
    background-color: rgba(255,255,255,0.2);
}

/* Couleurs sp\u00e9cifiques par type d'onglet */
.ongletNew[data-type="menu"] { background-color: var(--onglet-menu); }
.ongletNew[data-type="recette"] { background-color: var(--onglet-recette); }
.ongletNew[data-type="ingredient"] { background-color: var(--onglet-ingredient); }
.ongletNew[data-type="stock"] { background-color: var(--onglet-stock); }
.ongletNew[data-type="commande"] { background-color: var(--onglet-commande); }
.ongletNew[data-type="tracabilite"] { background-color: var(--onglet-tracabilite); }
.ongletNew[data-type="sortie"] { background-color: var(--onglet-sortie); }
.ongletNew[data-type="statistique"] { background-color: var(--onglet-statistique); }
.ongletNew[data-type="finance"] { background-color: var(--onglet-finance); }
.ongletNew[data-type="production"] { background-color: var(--onglet-production); }
.ongletNew[data-type="convive"] { background-color: var(--onglet-convive); }
.ongletNew[data-type="qualite"] { background-color: var(--onglet-qualite); }

.ombre {
    background:url("../img/ombreBleu.png") repeat-x scroll left top transparent;
    height:30px;
    left:0;
    position:absolute;
    top:78px;
    width:100%;
    z-index:-1;}

.ombre1 {
    background:url("../img/ombre.png") repeat-x scroll left top transparent;
    height:10px;
    left:0;
    position:absolute;
    top:125px;
    width:100%;
    z-index:-2;}

.connection {
	background-color:transparent;
	position:absolute;
	top:0px; left:0px;
    height:78px;
    width:99%;
    text-align:right;
    padding-right:10px;}

#fondBtn {
background:url("../img/bandeauBtn.png") no-repeat scroll left top #023454;
height:15px;
position:absolute;
top:110px;
width:100%;
z-index:-1;
}
#btn {
height:50px;
left:0;
position:absolute;
top:102px;
width:100%;
}

.zoneOnglet{
	height:100%;
    float:left;
	border-top:1px solid #023453;
    border-right:1px solid #023453;
	top:0px;
	width:25px;
    overflow: visible;
}

.ligneAjout{ background-color: white; text-align: center; vertical-align: middle;}
.ligneAjout td{ border-bottom:1px solid black; padding-top: 2px; padding-bottom: 2px;}

.ligneFiltre{ background-color: #FFF7B2; text-align: center; vertical-align: middle;}
.ligneFiltre td{ border-bottom:1px solid black; padding-top: 2px; padding-bottom: 2px;}
.ligneFiltre select, .ligneFiltre input{ background-color: #FFF7B2; border:none;}

.ligneDonnees{ background-color: #F7F7F7; text-align: center; vertical-align: middle;}
.ligneDonnees td{ border-bottom:1px solid #E8E8E8; padding-top: 2px; padding-bottom: 2px;}
.ligneDonnees select, .ligneDonnees input{ background-color: transparent; border:none;}

.radius{ padding:25px; border-radius:15px; border:1px solid #004080; text-align:center}

.cadreProduit{ /* css3pie.com */    
    padding: 20px;    
    -webkit-box-shadow: #666 0px 2px 3px;
    -moz-box-shadow: #666 0px 2px 3px;
    box-shadow: #666 0px 2px 3px;
    background: #FFFFFF;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FFFFFF), to(#D4D4D4));
    background: -webkit-linear-gradient(#FFFFFF, #D4D4D4);
    background: -moz-linear-gradient(#FFFFFF, #D4D4D4);
    background: -ms-linear-gradient(#FFFFFF, #D4D4D4);
    background: -o-linear-gradient(#FFFFFF, #D4D4D4);
    background: linear-gradient(#FFFFFF, #D4D4D4);
}

.bouton{ /* css3pie.com */    
    padding: 20px;    
    background: #FFFFFF;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FFFFFF), to(#D4D4D4));
    background: -webkit-linear-gradient(#FFFFFF, #D4D4D4);
    background: -moz-linear-gradient(#FFFFFF, #D4D4D4);
    background: -ms-linear-gradient(#FFFFFF, #D4D4D4);
    background: -o-linear-gradient(#FFFFFF, #D4D4D4);
    background: linear-gradient(#FFFFFF, #D4D4D4);
}

/* pour le choosen*/
.chosen-container span{
    font-size: 10px;
    text-align: left;
}
.chosen-container li{
    text-align: left;
}
.chosen-single-with-deselect span{
    font-size: 12px;
}

.optionGroup {
    font-weight: bold;
    font-style: italic;
    color:white; 
    background-color:green;
}

.optionChild {
    padding-left: 15px;
}

.curseurSurvol{cursor: pointer;}

.ligneFiltre td input[type="text"]{
  border: 1px solid transparent;
}

.ligneFiltre td input[type="text"]:hover {
  border: 1px solid black;
  border-radius: 5px;
}

.container-camion {
    position: relative;
    display: inline-block;
}

.info-camion {
    position: absolute;
    top: 0;
    left: 25px; /* Position � droite de l'image de 20px + 5px de marge */
    
    background: #e3f2fd; /* Bleu clair */
    border: 2px solid #2196f3; /* Bordure bleue */
    padding: 8px 12px;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    
    list-style: disc;
    list-style-position: inside;
    white-space: nowrap;
    z-index: 1000;
    min-width: 200px;
}

.info-camion li {
    padding: 3px 0;
    color: #1565c0; /* Texte bleu fonc� */
    font-size: 10px;
}

/* Fl�che pointant vers l'image */
.info-camion::before {
    content: '';
    position: absolute;
    top: 5px;
    left: -10px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 10px solid #2196f3;
}

.info-camion::after {
    content: '';
    position: absolute;
    top: 6px;
    left: -8px;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 9px solid #e3f2fd;
}

/* === Titres des boîtes de dialogue jQuery UI ============================= */
.ui-dialog .ui-dialog-titlebar,
.ui-dialog .ui-widget-header {
    background: #2563EB !important;
    background-image: none !important;
    border: none !important;
    color: #FFFFFF !important;
    padding: .5em 1em !important;
}
.ui-dialog .ui-dialog-title {
    color: #FFFFFF !important;
    font-weight: 600;
    font-size: 13px;
}
.ui-dialog .ui-dialog-titlebar-close {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    opacity: 0.65;
    transition: opacity 150ms ease;
}
.ui-dialog .ui-dialog-titlebar-close:hover {
    background: rgba(255,255,255,0.18) !important;
    border-radius: 3px;
    opacity: 1;
}
.ui-dialog .ui-dialog-titlebar-close .ui-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M1 1l10 10M11 1L1 11' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 12px 12px !important;
}
-->