.margRight1em {
    margin-right: 0.5em;
}

.skiBtRight {
    border-radius: 0em 0em 0em 0em;
    margin-right: 0.5em;
    background-color: #ebeb15 !important;
    color: #000000 !important;
    border-radius: 0.2em;
}

.skiBtLeft {
    border-radius: 0.4em 0em 0em 0.4em;
    margin-left: 0.5em;
}

.infoSki {
    font-weight: bold;
    color: #1f598d;
    font-size: 1.3em;
}


/*@media (min-width: 501px) {*/
    
    
    
    .ajLayout {
        display: grid;
        grid-template-areas: "tttx tttx" "illustr interface";
        justify-content: center;
    }
    
    .TitreText {
        grid-area:  tttx;
    }
    
    .illustration {
        grid-area: illustr;
        align-self: center;
        text-align: center;
    }
    
    .illustration img{
        border: solid 1px #888888;
        margin-right: 0.5em;
        border-radius: 0em 0em 2em 0em;
    }
    
    .interface {
        grid-area: interface;
    }
    
    .paramZone {
        display: flex; 
        margin-bottom: 32px;
        justify-content: flex-end;
        align-items: center;
        color: #6fa0cb;
    }
    
    .paramLabel {
        font-size: 1em;
        margin-right: 32px;
    }
    
    .paramChamp {
        font-size: 1em;
        border: solid 1px #1a4464;
        text-align: center;
        padding: 4px;
        color: #2c2c2c;
        border-radius: 0px;
    }
    
    .paramJour {
        width: 90px;
    }
    
    .prodTitre {
        font-size: 1.5em;
    }
    
    .prodDesc {
        font-size: 1em;
    }
    
    .prodDescription {
        font-size: 1.2em;
        width: 70%;
        margin: 0px auto;
        color: #4a8cc6;
        margin-bottom: 32px;
        
    }
    
    @keyframes skiBt {
        0% {
            background-color: #1f598d;
        }   
        100% {
            background-color: #418acb;
        }
    }
    
    .skiBt {
        font-size: 1.3em;
        color: #ffffff;
        background-color: #1f598d;
        padding: 6px 40px;
        cursor: pointer;
    }
    
    .skiBt:hover {
        animation-name: skiBt;
        animation-duration: 0.5s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
    }
    
    .actionButtons {
        display: flex;
        justify-content: space-around;
        font-weight: normal;
    }
        
    .cocheAssuranceOn {
        background-image: url(pics/cocheMobileOn.png);
        width: 41px;
        height: 41px;
    }
    .cocheAssuranceOff {
        background-image: url(pics/cocheMobileOff.png);
        width: 41px;
        height: 41px;
    }
    
    .calendrier {
        background-image: url(pics/calendrier2.png);
        width: 28px;
        height: 26px;
        margin-left: 8px;
    }
    
    .assuranceLegende {
        font-size: 0.8em;
        color: #454545;
        margin-right: 1em;
    }
    
/*}*/


@media (max-width: 640px) {
    
    .ajLayout {
        display: grid;
        /*grid-template-areas: "tttx tttx" "illustr interface";*/
        grid-template-areas: "tttx" "illustr" "interface";
        justify-content: center;
    }
    
    .TitreText {
        grid-area:  tttx;
    }
    
    .illustration {
        grid-area: illustr;
        align-self: center;
        text-align: center;
        margin-bottom: 32px;
        display: none;
    }
    
    .illustration img{
        border: solid 2px #3c3c3c;
    }
    
    .interface {
        grid-area: interface;
    }
    
    .paramZone {
        display: flex; 
        justify-content: flex-end;
        margin-right: 2em;
        margin-bottom: 1em;
        align-items: center;
        color: #6fa0cb;
    }
    
    .paramLabel {
        font-size: 1em;
        margin-right: 1em;
    }
    
    .paramChamp {
        font-size: 1em;
        border: solid 1px #1a4464;
        text-align: center;
        padding: 4px;
    }
    
    .paramJour {
        width: 90px;
    }
    
    .prodTitre {
        font-size: 2em;
    }
    
    .prodDesc {
        font-size: 1em;
    }
    
    .prodDescription {
        font-size: 1em;
        width: 90%;
        margin: 0px auto;
        color: #4a8cc6;
        margin-bottom: 1em;
        
    }
    
    .skiBt {
        font-size: 1em;
        color: #ffffff;
        background-color: #1f598d;
        padding: 4px 40px 4px 40px;
    }
    
    .actionButtons {
        display: flex;
        justify-content: space-around;
        font-weight: normal;
    }
    
    @keyframes emptyLabel {
        0% {
            border: solid 2px #a7c0d6;
        }
        49% {
            border: solid 2px #a7c0d6;
        }
        50% {
            border: solid 2px #c42c2c;
        }
        100% {
            border: solid 2px #c42c2c;
        }
    }
    
    .emptyLabel {
        animation-iteration-count: infinite;
        animation-name: emptyLabel;
        animation-duration: 1s;
    }
    
    #cocheAssurance {
        
    }
    
    .cocheAssuranceOn {
        background-image: url(pics/cocheMobileOn.png);
        width: 41px;
        height: 41px;
    }
    .cocheAssuranceOff {
        background-image: url(pics/cocheMobileOff.png);
        width: 41px;
        height: 41px;
    }
    
    .calendrier {
        background-image: url(pics/calendrier2.png);
        width: 28px;
        height: 26px;
        margin-left: 8px;
    }
    
    .assuranceLegende {
        font-size: 0.8em;
        color: #454545;
        margin-right: 1em;
    }
    
}