/*
 * Feuille de style externe permettant de definir le style CSS du composant personnalisé "Vignette"
 */

.conteneurGlobalVignette
{
    border-color: #CCCCCC;   
    border-style: solid;
    border-width: 1px;    
        
    margin-bottom: 25px;
    margin-right: 25px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    
    /*IE7*/
    *padding-right: 1px;
	*margin-right: 0px;
        
    /*CSS3*/
    -moz-border-radius: 3px;      
    -webkit-border-radius: 3px;   
    border-radius: 3px; 
}

.fondVignetteRectoInitial 
{   
    background-image: url("../img/vignettes/fond_initial_recto_grand.png");    
    background-repeat: repeat; /* Sur x et y */   
    /*background-color: transparent;*/         
}

.fondVignetteRectoCalcule
{   
    background-image: url("../img/vignettes/fond_initial_recto_grand.png");    
    background-repeat: repeat; /* Sur x et y */   
    /*background-color: transparent;*/         
}

.fondVignetteRectoCalculeAvecInformations
{   
    background-image: url("../img/vignettes/fond_initial_recto_grand.png");    
    background-repeat: repeat; /* Sur x et y */   
    /*background-color: transparent;*/         
}

.fondVignetteRectoNonCalculable
{   
    background-image: url("../img/vignettes/fond_initial_recto_grand.png");    
    background-repeat: repeat; /* Sur x et y */   
    /*background-color: transparent;*/         
}

.fondVignetteVersoInitial 
{   
    /*background-image: url("../img/vignettes/fond_initial_verso.png");*/    
    background-repeat: repeat; /* Sur x et y */   
    background-color: rgb(47,101,163);       
}

.fondVignetteVersoCalcule
{   
   /* background-image: url("../img/vignettes/fond_calcule_verso.png");*/    
    background-repeat: repeat; /* Sur x et y */   
    background-color: rgb(93,162,35);       
}

.fondVignetteVersoCalculeAvecInformations
{   
    /*background-image: url("../img/vignettes/fond_calcule_avec_informations_verso.png");*/    
    background-repeat: repeat; /* Sur x et y */   
    background-color: rgb(254,126,29);       
}

.fondVignetteVersoNonCalculable 
{   
    /*background-image: url("../img/vignettes/fond_non_calculable_verso.png");*/    
    background-repeat: repeat; /* Sur x et y */   
    background-color: rgb(187,187,187);      
}

/* Styles associés à la partie "RECTO" de la vignette */

.conteneurNomProduit 
{
    height: 34px;
    text-align: left;
}

.nomProduitInitial 
{
    color: #2466A3;
    font-size: 12px;
    font-weight: bold;
}

.nomProduitCalcule
{
    color: #7FB255;
    font-size: 12px;
    font-weight: bold;
}

.nomProduitCalculeAvecInformations
{
    color: rgb(255,109,0);
    font-size: 12px;
    font-weight: bold;
}

.nomProduitNonCalculable
{
    color: rgb(191,191,191);
    font-size: 12px;
    font-weight: bold;
}

.conteneurPhraseAccroche 
{
    height: 32px;
    text-align: left;
}

.phraseAccrocheInitial
{
    color: #595959;
    font-size: 11px;
}

.phraseAccrocheCalcule
{
    color: rgb(89,89,89);
    font-size: 11px;
}

.phraseAccrocheCalculeAvecInformations
{
    color: rgb(89,89,89);
    font-size: 11px;
}

.phraseAccrocheNonCalculable
{
    color: rgb(191,191,191);
    font-size: 11px;
}

.conteneurResultats 
{
    height: 25px;
    margin-top: -13px;
    width: 53px;
}

.resultatsCalcule  
{
    color: rgb(198,198,198);
    font-size: 12px ;
}

.resultatsCalculeAvecInformations
{
    color: rgb(198,198,198);
    font-size: 12px;
}

.resultatsNonCalculable
{
    color: rgb(191,191,191);
    font-size: 12px !important;
}

.conteneurCapitalATerme
{
    height: 25px;
    margin-top: -3px;
    text-align: right;
    width: 106px;
}

.capitalATermeCalcule
{
    color: rgb(127,178,85);
    font-size: 14px;
    font-weight: bold;
     display:none;
}

.capitalATermeCalculeAvecInformations
{
    color: rgb(255,109,0);
    font-size: 14px;
    font-weight: bold;
    display:none;
}

.capitalATermeNonCalculable
{
    color: rgb(191,191,191);
    font-size: 14px !important;
    font-weight: bold;
   
}

.conteneurLogoMiseEnAvant 
{
    height: 38px;
    margin-top: -2px;
    position: absolute;
    width: 27px;   
    *position: relative;    /* Pour IE7 */
    *margin-top:-10px; 
}

.logoMiseEnAvant
{  
    background-image: url("../img/vignettes/logo_mise_en_avant_transparent.png");    
    background-repeat: no-repeat;      
    background-color: transparent;
    width: 100%;    
    height: 100%;  
}




.conteneurSymboleInformation 
{
    height: 33px;
    margin-left: 131px;
    margin-top: -12px;
    position: absolute;
    width: 33px;  
    /* Pour IE7  */
    *position: relative; 
    *margin-top: -26px; 
    *margin-left : 126px !important; 
    *padding-left: 1px !important;
}

.symboleInformationInitial
{
    background-image: url("../img/vignettes/symbole_i_par_defaut_transparent.png");    
    background-repeat: no-repeat;      
    background-color: transparent;
    width: 100%;    
    height: 100%; 
}

.symboleInformationCalcule
{
    background-image: url("../img/vignettes/symbole_i_calcule_transparent.png");    
    background-repeat: no-repeat;      
    background-color: transparent;
    width: 100%;    
    height: 100%; 
}

.symboleInformationCalculeAvecInformations
{
    background-image: url("../img/vignettes/symbole_i_calcule_avec_informations_transparent.png");    
    background-repeat: no-repeat;      
    background-color: transparent;
    width: 100%;    
    height: 100%; 
}

.symboleInformationNonCalculable
{
    background-image: url("../img/vignettes/symbole_i_non_calculable_transparent.png");    
    background-repeat: no-repeat;      
    background-color: transparent;
    width: 100%;    
    height: 100%; 
}

/* Styles associés à la partie "VERSO" de la vignette */

.conteneurNomProduitVerso 
{
    height: 33px;
    text-align: left;
}

.nomProduitInitialVerso
{
    color: #FFFFFF;
    font-size: 12px !important;
    font-weight: bold;
}

.conteneurIndicationsProduit 
{
    height: 116px;
    text-align: left;
}

.indicationsProduitInitial
{
    color: rgb(255,255,255);
    font-size: 11px !important;
}

.indicationsProduitCalcule
{
    color: rgb(255,255,255);
    font-size: 11px;
}

.indicationsProduitCalculeAvecInformations
{
    color: rgb(255,255,255);
    display: inline-block;
    font-size: 10.8px;
}

.indicationsProduitNonCalculable
{
    color: rgb(255,255,255);
    font-size: 11px;
}

.conteneurBoutonsActionsVignette
{
    margin-left: -5px;
    margin-top: -37px;
    /*IE7*/
    *margin-top : -29px;
	*margin-left : -5px;
	*padding-bottom : 11px;
}

.conteneurBtnPlusDeDetails 
{
    border: 1px solid gray;
    height: 24px;
    margin-left: 5px;
    position: absolute;
    width: 110px;
}

.conteneurBtnPlusDeDetails:hover
{
    opacity: 0.8;
    filter: alpha(opacity=80); /* IE toutes versions */
    cursor:pointer;
}

.conteneurBtnPlusDeDetailsCentre
{
    border: 1px solid gray;
    height: 24px;
    margin-left: 32px;
    position: absolute;
    width: 110px;
}

.conteneurBtnPlusDeDetailsCentre:hover
{
    opacity: 0.8;
    filter: alpha(opacity=80); /* IE toutes versions */
    cursor:pointer;
}

.conteneurBtnAjouterAuComparateur 
{
    border: 1px solid gray;
    height: 24px;
    margin-left: 133px;
    width: 29px;
}

.conteneurBtnAjouterAuComparateur:hover
{
    opacity: 0.8;
    filter: alpha(opacity=80); /* IE toutes versions */
    cursor:pointer;
}

.conteneurBtnAjouterAuComparateurSansBordure
{
    height: 24px;
    margin-left: 133px;    
    width: 29px;
}

.conteneurBtnAjouterAuComparateurSansBordure:hover
{
    opacity: 0.8;
    filter: alpha(opacity=80); /* IE toutes versions */
    cursor:pointer;
}

/******************************************************************
  Style CSS2 et CSS3 pour gérer l'animation du flip des vignettes 
*******************************************************************/

/* Style, taille et perspective de l'animation du conteneur parent des vignettes */
.parent 
{
    position: relative;
    height: 109px;   
    width: 159px;
    margin-bottom: 25px;
    margin-right: 25px;
    padding: 5px 5px 0px 5px;
         
    /*Gère la perspective lors de l'animation*/
    -webkit-perspective: 600px;
    -moz-perspective: 600px;
    perspective: 600px;
}

/* Animations et transitions des vignettes */
.fils {
    float: none;
    position: absolute;
    top: 0;
    left: 0;
    width: inherit;
    height: inherit;

    /*Gestion de l'ombre*/
    -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
    
    /*Gestion de la transition pour les animations entre deux états*/
    -o-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -webkit-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
    
    /*Elément positionné dans un espace en trois dimensions*/
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    
    /*La face arrière est invisible*/
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Style par défaut du côté affiché par défaut */
.front 
{
    /*Pour IE et les navigateurs sans CSS3 : doit être supérieur au z-index de .back*/
    z-index: 900; 
    /*Transformation de base initiale du côté recto affiché par défaut */
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    transform: rotateX(0deg);
}

/* Style par défaut du côté caché par défaut */
.back 
{
    /*Pour IE et les navigateurs sans CSS3 : doit être inférieur au z-index de .front*/
    z-index: 800;
    /*Transformation de base initiale du côté verso caché par défaut */
    -webkit-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    transform: rotateX(180deg);
    /*Pour IE7*/
    *padding-right : 3px;
}

/* Style du côté caché après un survol du fils */
.flip .front 
{
    /*Pour IE et les navigateurs sans CSS3 : doit être inférieur au z-index de .flip .back*/
    z-index: 900; 
    /*Transformation appliquée lors du passage entre l'avant et l'arrière*/
    -webkit-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
     transform: rotateX(-180deg);
}

/* Style du côté affiché après un survol du fils */
.flip .back 
{
    /*Pour IE et les navigateurs sans CSS3 : doit être supérieur au z-index de .flip .front*/
    z-index: 1000;  
    /*Transformation appliquée lors du passage entre l'arrière et l'avant*/
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    transform: rotateX(0deg);
}