/* CASE A COCHER  Cachons la case à cocher */
[type="checkbox"]:not(:checked), [type="radio"]:not(:checked),
[type="checkbox"]:checked, [type="radio"]:checked {
    position: absolute;
    left: -9999px;
}

/* on prépare le label */
[type="checkbox"]:not(:checked) + label, [type="radio"]:not(:checked) + label,
[type="checkbox"]:checked + label, [type="radio"]:checked + label  {
    position: relative; /* permet de positionner les pseudo-éléments */
    padding-left: 25px; /* fait un peu d'espace pour notre case à venir */
    cursor: pointer;    /* affiche un curseur adapté */
    margin-right : 15px;
}

[type="radio"]:not(:checked) + label,
[type="radio"]:checked + label  { margin-right: 15px; margin-left : 0 !important; padding-left : 20px; box-sizing : border-box; width : 100%; opacity: 0.5;}
/*[type="radio"]:not(:checked) + label, */
[type="radio"]:checked + label  {font-weight: 600; opacity: 1;}
/* Aspect des checkboxes */
/* :before sert à créer la case à cocher */
[type="checkbox"]:not(:checked) + label:before, [type="radio"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before, [type="radio"]:checked + label:before {
    content: '';
    position: absolute;
    left:0; top: 2px;
    width: 15px; height: 15px; /* dim. de la case */
    /* border: 1px solid #aaa;  */
    background : #F08a80;
    border-radius: 0px; /* angles arrondis */
    margin-top: 0px;
    /*box-shadow: inset 0 1px 3px rgba(0,0,0,.3) *//* légère ombre interne */
}


[type="radio"]:not(:checked) + label:before,
[type="radio"]:checked + label:before {
    background : #BAB4B4;
    border-radius: 15px;
    width: 15px; height: 15px;
    margin-top: 4px;
    top : 0;
}

[type="radio"]:not(:checked) + label:before,
[type="radio"]:checked + label:before {
    background : #F08a80;
    width: 15px; height: 15px;
}

/* Aspect général de la coche */
[type="checkbox"]:not(:checked) + label:after, [type="radio"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after, [type="radio"]:checked + label:after {
    content: '\f00c';
    font-family: "Font Awesome 5 Free";
    font-weight : bold;
    position: absolute;
    font-size: 11px;
    left: 0;
    top: 2px;
    width: 15px;
    height: 15px;
    background: #5f5c39;
    color : #fff;
    padding-left : 1px;
    padding-top : 2px;
    line-height : 1;
    margin-top: 0px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
    transition: all .2s; /* on prévoit une animation */
}

.sectionIngredientsSushisGirl [type="checkbox"]:not(:checked) + label:after, .sectionIngredientsSushisGirl  [type="radio"]:not(:checked) + label:after,
.sectionIngredientsSushisGirl  [type="checkbox"]:checked + label:after, .sectionIngredientsSushisGirl  [type="radio"]:checked + label:after {
    background: #76151a;
    content: '\f00d';
    padding: 2px 0 0 3px;
}

[type="radio"]:not(:checked) + label:after, [type="radio"]:checked + label:after {
    background : #5f5c39;
    border-radius: 15px;
    width: 15px; height: 15px;
    left : 0;
    top : 4px;
    font-size : 0;
}


/* Aspect si "pas cochée" */
[type="checkbox"]:not(:checked) + label:after,  [type="radio"]:not(:checked) + label:after {
    opacity: 0; /* coche invisible */
    transform: scale(0); /* mise à l'échelle à 0 */
}
/* Aspect si "cochée" */
[type="checkbox"]:checked + label:after, [type="radio"]:checked + label:after  {
    opacity: 1; /* coche opaque */
    transform: scale(1); /* mise à l'échelle 1:1 */
}


#logoRSSushis {
    padding-right: 50%;
    background: transparent url(/style/logo-nosushi.jpg) no-repeat 80% 75%;
}

@media all and ( max-width: 800px ) {

	[type="radio"]:not(:checked) + label, [type="radio"]:checked + label  {
		display: block;
		margin: 0 0 20px 0;	
	}

    #logoRSSushis {
        padding-right: 0;
        background: none;
    }

}