/***********************************
SQUELETTE
************************************/
@media (orientation: landscape) and (max-device-width: 768px) {
	html,
	body {
		-webkit-text-size-adjust: 100%;
	}
}

* {
  box-sizing: border-box; /* pour maîtriser width et flex-basis */
}

html{ 
display: flex; 
flex-direction: column; /* correction bug IE de min-height non appliqué à body */
margin: 0; 
padding: 0;
} 

body{
	display: flex; /* crée un contexte flex pour ses enfants */
	flex-direction: column; /* affichage vertical */
	min-height: 100vh; /* toute la hauteur du viewport */
	margin: 0; 
	padding: 0;
	font-family: 'Montserrat', 'Roboto', Verdana, Helvetica, tahoma, Arial, sans-serif;
	background-image: linear-gradient(to right, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.10) 20%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 70%,rgba(0,0,0,0.10) 80%,rgba(0,0,0,0.5) 100%), url(../design/bg_ios.jpg);
    background-image: -moz-linear-gradient(left, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.10) 20%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 70%,rgba(0,0,0,0.10) 80%,rgba(0,0,0,0.5) 100%), url(../design/bg_ios.jpg);
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.10) 20%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 70%,rgba(0,0,0,0.10) 80%,rgba(0,0,0,0.5) 100%), url(../design/bg_ios.jpg);
    background-repeat: repeat, repeat;
    background-attachment: fixed, fixed;
    background-size: auto, auto;
    background-position: center, center;
}

body#body_login_foyer {
    background-image: linear-gradient(to right, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.10) 20%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 70%,rgba(0,0,0,0.10) 80%,rgba(0,0,0,0.5) 100%), url(../design/Logo_ASP.png), url(../design/bg_ios.jpg);
    background-image: -moz-linear-gradient(left, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.10) 20%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 70%,rgba(0,0,0,0.10) 80%,rgba(0,0,0,0.5) 100%), url(../design/Logo_ASP.png), url(../design/bg_ios.jpg);
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.10) 20%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 70%,rgba(0,0,0,0.10) 80%,rgba(0,0,0,0.5) 100%), url(../design/Logo_ASP.png), url(../design/bg_ios.jpg);
    background-repeat: repeat, no-repeat, repeat;
    background-attachment: fixed, fixed, fixed;
    background-size: auto, contain, auto;
    background-position: center, center, center;
}

.sprite {
	background-image: url("../design/sprite.png");
	background-repeat: no-repeat;
}

header {}

.page
{
display: flex; /* crée un contexte flex pour ses enfants */
flex-direction: column; /* affichage vertical */
min-height: 100vh; /* toute la hauteur du viewport */
margin: 0; 
padding: 0;
}

.logo
{
	background: url(../design/Logo_ASP.png);
    background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center center;
	background-size: contain;
	
}

div#logo_crisp {
    display: table-cell;
    height: 70px;
    width: 55px;
    padding-top: 0px;
    padding-bottom: 0px;
    text-align: center;
    vertical-align: middle;
}


.container-principal {
    -ms-flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    align-items: center;
    font-size: 16px;
	color: #C6C6C6;
    margin-top: 0px;
    margin-bottom: 0px;
}

.container-principal#container-principal_centre {
    justify-content: center;
}

.contenu_foyer {
	width: 90%;
    max-width: 950px;
}

.flex_center_vertical {
	display: flex;
    align-items: center;
}
.flex_align_vertical {
    align-items: center;
}
.flex_align_horizontal {
    justify-content: center;
}

/***********************************
FIN DE SQUELETTE
************************************/

/***********************************
MENU
************************************/
.menu_inline {
    display: flex;
	-webkit-align-items: flex-start;
    align-items: flex-start;
	height: 100px;
	width: 100%;
	padding: 10px;
	padding-left: 20px;
	padding-right: 20px;
	background-color: rgba(11, 11, 11, 0.3);
    color: #C6C6C6;
    font-size: 20px;
}
.logo_crisp {
	min-height: 80px;
	min-width: 80px;
	background: url(../design/Ico_CRISP.png) no-repeat center center;
    background-size: contain;
}
.logo_asp {
	min-height: 80px;
	min-width: 80px;
	background-position:-10px -10px;
}
.bt_menu {
	display: flex;
    align-items: center;
    justify-content: center;
	height: 80px;
	width: 80px;
	min-height: 80px;
	min-width: 80px;
	background-color: rgba(0, 0, 0, 0);
	border-radius: 15px;
    cursor: pointer;
}
.bt_menu:hover {
	background-color: rgba(232, 232, 234, 0.2);
}
.bt_menu_insert {
	display: flex;
    align-items: center;
    justify-content: center;
	height: 50px;
	width: 50px;
	min-height: 50px;
	min-width: 50px;
	background-color: rgba(0, 0, 0, 0);
}
.bt_menu_sep_infini {
	min-height: 80px;
	width: 100%;
	background-color: rgba(0, 0, 0, 0);
}
#bt_sep_40 {
width: 40px;
background-color: rgba(0, 0, 0, 0);
cursor: default;
}

#bt_sep_80 {
width: 80px;
background-color: rgba(0, 0, 0, 0);
cursor: default;
}

#bt_profil {
	background-position:-10px -95px;  /* height-weight 50px-50px*/
}
#bt_logout {
	background-position:-120px -95px;  /* height-weight 50px-50px*/
}
#bt_editer {
	background-position:-65px -95px;  /* height-weight 50px-50px*/
}
#bt_email {
	background-position:-320px -189px;  /* height-weight 50px-50px*/
}
#bt_repas {
	background-position:-175px -95px;  /* height-weight 50px-50px*/
}
#bt_ajouter_repas {
	background-position:-230px -95px;  /* height-weight 50px-50px*/
}
#bt_participants {
	background-position:-395px -95px;  /* height-weight 50px-50px*/
}
#bt_pdf {
	background-position:-340px -95px;  /* height-weight 50px-50px*/
}

@media screen and (max-width:767px)
{
.menu_inline {
	height: 80px;
	padding-left: 10px;
	padding-right: 10px;
}
.logo_asp {
	min-height: 60px;
	min-width: 60px;
	background-position:-95px -10px;
}
.bt_menu {
	height: 60px;
	width: 60px;
	min-height: 60px;
	min-width: 60px;
}
.bt_menu_insert {
	height: 34px;
	width: 34px;
	min-height: 34px;
	min-width: 34px;
}
#bt_profil {
	background-position:-10px -150px;  /* height-weight 34px-34px*/
}
#bt_logout {
	background-position:-88px -150px;  /* height-weight 34px-34px*/
}
#bt_editer {
	background-position:-49px -150px;  /* height-weight 34px-34px*/
}
#bt_email {
	background-position:-322px -150px;  /* height-weight 34px-34px*/
}
#bt_repas {
	background-position:-127px -150px;  /* height-weight 34px-34px*/
}
#bt_ajouter_repas {
	background-position:-166px -150px;  /* height-weight 34px-34px*/
}
#bt_participants {
	background-position:-283px -150px;  /* height-weight 34px-34px*/
}
#bt_pdf {
	background-position:-244px -150px;  /* height-weight 34px-34px*/
}
}

/***********************************
FIN DE MENU
************************************/

/***********************************
TITRE PAGE
************************************/
.titre_page {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 90%;
    max-width: 950px;
	font-weight: normal;
	font-size: 50px;
	margin-top: 50px;
	margin-bottom: 50px;
}

@media screen and (max-width:767px)
{
.titre_page {
	font-size: 30px;
	margin-bottom: 24px;
	margin-bottom: 24px;
}
}
/***********************************
FIN DE TITRE PAGE
************************************/

/***********************************
LOGIN
************************************/
.container_login {
	padding: 20px;
	display: flex;
	flex-direction: column;
	width: 380px;
	border-radius: 5px;
	background-color: #0B0B0B;
	opacity: 0.6;
}
.titre_container_login {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 50px;
	margin-bottom: 20px;
}
.fanion_container_login {
	min-width: 50px;
	height: 50px;
	background-position:-160px -10px;
}
.fanion_user_login {
	min-width: 50px;
	width: 50px;
	height: 50px;
	background-position:-160px -10px;
}
.texte_titre_container_login {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 50px;
	color: #C6C6C6;
	font-size: 40px;
}
.texte_nom_user_container_login {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 50px;
	color: #C6C6C6;
	font-size: 22px;
}
.user_container_login {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 60px;
}
.password_container_login {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 60px;
	margin-bottom: 35px;
}
.logo_password_container_login {
	min-width: 18px;
	height: 18px;
	background-position:-238px -55px;
}
.texte_user_container_login {
	display: flex;
	align-items: center;
	width: 100%;
	height: 30px;
	color: #C6C6C6;
	font-size: 20px;
}
.div_unmask {
	min-width: 18px;
	height: 18px;
	background-position:-192px -65px;
	cursor: pointer;
}
.logo_user_container_login {
	min-width: 18px;
	height: 18px;
	background-position:-215px -55px;
}
.texte_user_container_login {
	display: flex;
	align-items: center;
	width: 100%;
	height: 50px;
	color: #C6C6C6;
	font-size: 20px;
}
input.user_foyer
{
	width: calc(100% - 38px);
	height: 50px;
	outline: none;
	margin-left: 10px;
	padding: 5px 5px;
	border: 0px solid;
	font-size: 18px;
}
input.password_foyer
{
	width: calc(100% - 20px);
	height: 50px;
	outline: none;
	margin-left: 10px;
	margin-right: 10px;
	padding: 5px 5px;
	#margin-bottom: 5px;
	#background: #0B0B0B;
	background: #171717;
	border: 0px solid;
	color: white;
	font-size: 18px;
}
input.password_foyer:hover {
background: #212121;
    transition: all .4s; /* on prévoit une animation */
}
input.password_foyer:focus {
	background: #212121;
	outline: none;
}
input.password_foyer_login
{
	width: calc(100% - 20px);
	height: 50px;
	outline: none;
	margin-left: 10px;
	margin-right: 10px;
	padding: 5px 5px;
	#margin-bottom: 5px;
	background: #0B0B0B;
	border: 0px solid;
	color: white;
	font-size: 18px;
}
input.password_foyer_login:hover {
background: #171717;
    transition: all .4s; /* on prévoit une animation */
}
input.password_foyer_login:focus {
	background: #171717;
	outline: none;
}
input.password_foyer_invalid
{
	width: calc(100% - 20px);
	height: 50px;
	outline: none;
	margin-left: 10px;
	margin-right: 10px;
	padding: 5px 5px;
	#margin-bottom: 5px;
	background: rgba(255, 0, 0, 0.2);
	border: 0px solid;
	color: white;
	font-size: 18px;
}
.bouton_container_login {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 60px;
	border-radius: 5px;
}
.connexion_login_foyer {
	border: 0px solid;
	-webkit-appearance: none;
	height: 100%;
	width: 100%;
    text-align: center;
	color: white;
	vertical-align: middle;
	margin:auto;
	font-size: 20px;
	font-family: Arial;
	cursor:pointer;
	border-radius: 3px;
}
.bouton_bleu {
background-color: #0078e9;
}
.bouton_rouge {
background-color: red;	
}
.bouton_bleu:hover
{
background: #0066C5;
transition: all .2s; /* on prévoit une animation */
}
.bouton_bleu:focus {
	background: #0066C5;
	outline: none;
}
.bouton_rouge:hover
{
background: #d80000;
transition: all .2s; /* on prévoit une animation */
}
.bouton_rouge:focus {
	background: #d80000;
	outline: none;
}
.new_login_container_login {
	width: 100%;
	height: 30px;
	margin-top : 25px;
	text-align: center;
}
.ident_perdu {
	text-decoration: none;
	outline: none;
	color: #0196ff;
	font-size: 14px;
}
.invalid, .invalid:hover
{
	background: rgba(255, 0, 0, 0.2);
	color: white;
}
.valid
{
	background: #0B0B0B;
	color: white;
}
.valid:hover
{
	background: #171717;
	outline: none;
	transition: all .4s;
}

.valid_login
{
	background: #171717;
	color: white;
}
.valid_login:hover
{
	background: #212121;
	outline: none;
	transition: all .4s;
}


@media screen and (max-width:567px)
{
.container_login {
	padding: 10px;
	width: 286px;
}
.titre_container_login {
	height: 40px;
	margin-bottom: 15px;
}
.fanion_container_login {
	min-width: 40px;
	height: 40px;
	background-position:-215px -10px;
}
.fanion_user_login {
	min-width: 40px;
	width: 40px;
	height: 40px;
	background-position:-215px -10px;
}
.texte_titre_container_login {
	height: 40px;
	font-size: 30px;
}
.user_container_login {
	height: 45px;
}
.password_container_login {
	height: 45px;
	margin-bottom: 25px;
}
.texte_user_container_login {
	height: 45px;
}
input.user_foyer
{
	width: calc(100% - 34px);
	height: 35px;
	margin-left: 8px;
	font-size: 14px;
}
input.password_foyer
{
	width: calc(100% - 16px);
	height: 35px;
	margin-left: 8px;
	margin-right: 8px;
	font-size: 14px;
}
input.password_foyer_login
{
	width: calc(100% - 16px);
	height: 35px;
	margin-left: 8px;
	margin-right: 8px;
	font-size: 14px;
}
.bouton_container_login {
	height: 40px;
}
.ident_perdu {
	font-size: 13px;
}
}

@media screen and (max-width:668px) and (min-width:568px)
{
.container_login {
	padding: 10px;
	width: 380px;
}
.titre_container_login {
	height: 40px;
	margin-bottom: 15px;
}
.fanion_container_login {
	min-width: 40px;
	height: 40px;
	background-position:-215px -10px;
}
.fanion_user_login {
	min-width: 40px;
	width: 40px;
	height: 40px;
	background-position:-215px -10px;
}
.texte_titre_container_login {
	height: 40px;
	font-size: 30px;
}
.user_container_login {
	height: 45px;
}
.password_container_login {
	height: 45px;
	margin-bottom: 25px;
}
.texte_user_container_login {
	height: 45px;
}
input.user_foyer
{
	width: calc(100% - 34px);
	height: 35px;
	margin-left: 8px;
	font-size: 16px;
}
input.password_foyer
{
	width: calc(100% - 16px);
	height: 35px;
	margin-left: 8px;
	margin-right: 8px;
	font-size: 16px;
}
input.password_foyer_login
{
	width: calc(100% - 16px);
	height: 35px;
	margin-left: 8px;
	margin-right: 8px;
	font-size: 16px;
}
.bouton_container_login {
	height: 40px;
}
.ident_perdu {
	font-size: 13px;
}
}
/***********************************
FIN DE LOGIN
************************************/


/***********************************
LISTE DES MEMBRES
************************************/
.container_form_user {
	width: 100%;
}

.ligne_impair_foyer {
	width: 100%;
    min-height: 50px;
	flex-wrap: nowrap;
	margin-top: 5px;
	margin-bottom: 5px;
	background-color: rgba(11, 11, 11, 0.2);
}

.ligne_pair_foyer {
width: 100%;
min-height: 50px;
flex-wrap: nowrap;
margin-top: 5px;
margin-bottom: 5px;
background-color: rgba(11, 11, 11, 0.4);
}

.cell_name {
    height: 50px;
    padding-left: 15px;
    min-width: 220px;
    text-align: left;
}
select.select_invalid {
	width: 145px;
    height: 40px;
    font-size: 16px;
	font-family: 'Montserrat', 'Roboto', Verdana, Helvetica, tahoma, Arial, sans-serif;
    background-color: rgba(255, 0, 0, 0.2);
    padding: 5px 5px;
    border: 0px solid;
    color: #C6C6C6;
    text-decoration: none;
	outline: none;
	}
select.select_valid {
    width: 145px;
    height: 40px;
	font-size: 16px;
	font-family: 'Montserrat', 'Roboto', Verdana, Helvetica, tahoma, Arial, sans-serif;
    background-color: rgba(232, 232, 234, 0);
    padding: 5px 5px;
    border: 0px solid;
    color: #C6C6C6;
    text-decoration: none;
	outline: none;
}
select option {
color: #737373;
background-color: white;
}
.cell_email {
    height: 50px;
    padding-left: 10px;
	padding-right: 10px;
    min-width: 210px;
	width: 100%;
    text-align: left;
}
input.password_required {
    background-color: rgba(232, 232, 234, 0);
    width: 100%;
    height: 40px;
    padding: 5px 5px;
    border: 0px solid;
    color: #C6C6C6;
    font-size: 16px;
	text-decoration: none;
	outline: none;
}
input.password_required:hover {
background-color: rgba(232, 232, 234, 0.2);
transition: all .4s;
}
input.password_required_invalid {
	background-color: rgba(255, 0, 0, 0.2);
    width: 100%;
    height: 40px;
    padding: 5px 5px;
    border: 0px solid;
    color: #C6C6C6;
    font-size: 16px;
	text-decoration: none;
	outline: none;
}
input.password_required_newident {
    #background-color: #0B0B0B;
	background-color: #171717;
    width: 100%;
    height: 50px;
	margin-left: 10px;
    padding: 5px 5px;
    border: 0px solid;
    color: white;
    font-size: 18px;
	text-decoration: none;
	outline: none;
}
input.password_required_newident:hover {
#background-color: #171717;
background-color: #212121;
transition: all .4s;
}
input.password_required_newident_invalid {
	background-color: rgba(255, 0, 0, 0.2);
    width: 100%;
    height: 50px;
	margin-left: 10px;
    padding: 5px 5px;
    border: 0px solid;
    color: white;
    font-size: 18px;
	text-decoration: none;
	outline: none;
}


@media screen and (max-width:767px)
{
.ligne_impair_foyer {
flex-wrap: wrap;
}

.ligne_pair_foyer {
flex-wrap: wrap;
}
}
/***********************************
FIN DE LISTE DES MEMBRES
************************************/



/***********************************
LISTE DES REPAS
************************************/
.bloc_repas {
	display: flex;
	flex-direction: column;
	width: 90%;
	max-width: 950px;
	margin-bottom: 20px;
	padding-bottom: 20px;
	border: 1px solid grey;
	background-color: rgba(11, 11, 11, 0.4);
}
.repas_ligne_1 {
	display: flex;
	flex-direction: row;
	width: 100%;
	padding: 0px;
}
.repas_ligne_1_date {
	display: flex;
	flex-direction: row;
	width: 100%;
	padding: 8px;
	align-items: center;
	line-height: 35px;
}
.repas_texte_date {
	margin: 5px;
	font-weight: bold;
	font-size: 22px;
}
.repas_bloc_check {
	display: flex;
	flex-direction: column;
	min-width: 65px;
	min-height: 60px;
	padding: 0px;
	padding-top: 10px;
	padding-right: 15px;
	align-items: center;
	justify-content: center;
	text-align:center;
}
.repas_inconnu_check {
	min-height: 50px;
	min-width: 50px;
	background-position:-371px -10px;  /* height-weight 50px-50px*/
}
.repas_yes_check {
	min-height: 50px;
	min-width: 50px;
	background-position:-261px -10px;  /* height-weight 50px-50px*/
}
.repas_no_check {
	min-height: 50px;
	min-width: 50px;
	background-position:-316px -10px;  /* height-weight 50px-50px*/
}
.repas_ligne_2 {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 8px;
	padding-top: 15px;
	text-align: center;
	line-height: 23px;
}
.repas_texte_date_inscription {
	margin: 0px;
	font-weight: bold;
	font-size: 18px;
}
.texte_bleu {
	color: #0196ff;
}
.texte_orange {
	color: orange;
}
.repas_ligne_3 {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 8px;
	padding-top: 15px;
	padding-bottom: 15px;
	text-align: center;
	line-height: 23px;
}
.repas_texte_tire_menu {
	margin: 5px;
	margin-top: 10px;
	margin-bottom: 10px;
	font-weight: normal;
	font-size: 20px;
}
.repas_texte_menu {
	margin: 5px;
	font-weight: bold;
	font-size: 18px;
	line-height: 26px;
}
.repas_ligne_4 {
	display: flex;
	flex-direction: row;
	width: 100%;
	padding: 8px;
	justify-content: center;
	text-align: center;
	color: red;
	line-height: 23px;
}
.repas_ligne_prix {
	display: flex;
	flex-direction: row;
	width: 100%;
	padding: 8px;
	justify-content: center;
	text-align: center;
}
.ico_prix {
	display:flex;
	height:45px;
	width:93px;
	justify-content: center;
	text-align: center;
	align-items: center;
	color: #333333;
	font-weight: bold;
	font-size: 30px;
	-ms-transform: rotate(-8deg);
	-webkit-transform: rotate(-8deg);
	transform: rotate(-8deg);
	background-position:-145px -189px;  /* height-weight 93px-45px*/
}
.repas_texte_tire_groupe {
	margin: 0px;
	font-weight:normal;
	font-size: 18px;
}
.repas_texte_groupe {
	margin: 0px;
	margin-left: 10px;
	font-weight: bold;
	font-size: 20px;
}
.repas_ligne_5 {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 8px;
	text-align: center;
	line-height: 23px;
}
.repas_texte_infos {
	margin: 0px;
	color: orange;
}
.repas_ligne_6 {
	display: flex;
	flex-direction: row;
	width: 100%;
	padding: 0px;
	margin-bottom: 10px;
	margin-top: 30px;
}
.repas_ligne_7 {
	display: flex;
	flex-direction: row;
	width: 100%;
	padding: 0px;
	margin-bottom: 10px;
	margin-top: 30px;
}
.repas_ligne_8_menu {
	display: flex;
	flex-direction: row;
	width: 100%;
	padding: 0px;
	margin-bottom: 0px;
	margin-top: 30px;
}
.repas_separation_centre {
	display: flex;
	width: 100%;
}
.repas_separation {
	display: flex;
	min-width: 60px;
}
.repas_separation_60 {
	display: flex;
	min-width: 60px;
}
.bouton_oui {
	display: flex;
	flex-direction: column;
	min-width: 120px;
	min-height: 60px;
	padding: 8px;
	align-items: center;
	justify-content: center;
	text-align:center;
	line-height: 23px;
	border-radius: 10px;
	border: 1px solid white;
	background-color: rgba(0, 255, 0, 0.3);
}
.bouton_oui:hover {
	background-color: rgba(0, 218, 0, 0.3);
	cursor: pointer;
}
.bouton_non {
	display: flex;
	flex-direction: column;
	min-width: 120px;
	min-height: 60px;
	padding: 8px;
	align-items: center;
	justify-content: center;
	text-align:center;
	line-height: 23px;
	border-radius: 10px;
	border: 1px solid white;
	background-color: rgba(255, 0, 0, 0.3);
}
.bouton_non:hover {
	background-color: rgba(218, 0, 0, 0.3);
	cursor: pointer;
}
.bouton_modifier {
	display: flex;
	flex-direction: column;
	min-width: 140px;
	min-height: 60px;
	padding: 8px;
	align-items: center;
	justify-content: center;
	text-align:center;
	line-height: 23px;
	border-radius: 10px;
	border: 1px solid white;
	background-color: rgba(0, 131, 254, 0.4);
}
.bouton_modifier:hover {
	background-color: rgba(0, 102, 198, 0.4);
	cursor: pointer;
}
.repas_texte_titre_bouton {
	margin: 0px;
	font-weight: bold;
	font-size: 18px
}
.repas_texte_bouton {
	margin: 0px;
	font-weight: normal;
	font-size: 15px
}
.input_invitation {
	width: 50px;
	padding: 3px 3px;
	font-size: 16px;
	height: 36px;
}
.submit_invitation {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 18px;
	margin-left: 8px;
	background-color: rgba(0, 131, 254, 0.4);
	border: 1px solid white;
	color: white;
}
.submit_invitation:hover {
	background-color: rgba(0, 102, 198, 0.4);
	cursor: pointer;
}
.display_none {
	display: none;
}



@media screen and (max-width:767px)
{
.repas_ligne_1_date {
	line-height: 20px;
}
.repas_texte_date {
	font-weight: bold;
	font-size: 18px;
}
.repas_bloc_check {
	display: flex;
	flex-direction: column;
	min-width: 50px;
	min-height: 40px;
	padding: 0px;
	padding-top: 0px;
	padding-right: 10px;
}
.repas_yes_check {
	min-height: 40px;
	min-width: 40px;
	background-position:-10px -189px;  /* height-weight 40px-40px*/
}
.repas_no_check {
	min-height: 40px;
	min-width: 40px;
	background-position:-55px -189px;  /* height-weight 40px-40px*/
}
.repas_inconnu_check {
	min-height: 40px;
	min-width: 40px;
	background-position:-100px -189px;  /* height-weight 40px-40px*/
}
.repas_ligne_2 {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 8px;
	padding-top: 20px;
	text-align: center;
	line-height: 22px;
}
.repas_texte_date_inscription {
	margin: 0px;
	font-weight: bold;
	font-size: 15px;
}
.repas_ligne_3 {
	padding: 8px;
	padding-top: 0px;
	padding-bottom: 5px;
	text-align: center;
	line-height: 20px;
}
.repas_texte_tire_menu {
	margin: 5px;
	margin-top: 10px;
	margin-bottom: 10px;
	font-weight: normal;
	font-size: 16px;
}
.repas_texte_menu {
	margin: 0px;
	font-weight: bold;
	font-size: 16px;
}
.repas_ligne_4 {
	padding: 8px;
	line-height: 26px;
}
.repas_ligne_prix {
	padding: 8px;
}
.ico_prix {
	display:flex;
	height:35px;
	width:72px;
	justify-content: center;
	text-align: center;
	align-items: center;
	color: #333333;
	font-weight: bold;
	font-size: 24px;
	-ms-transform: rotate(-8deg);
	-webkit-transform: rotate(-8deg);
	transform: rotate(-8deg);
	background-position:-243px -189px;  /* height-weight 72px-35px*/
}
.repas_texte_tire_groupe {
	margin: 0px;
	font-weight:normal;
	font-size: 16px;
}
.repas_texte_groupe {
	margin: 0px;
	margin-left: 10px;
	font-weight: bold;
	font-size: 18px;
}
.repas_ligne_5 {
	padding: 8px;
	line-height: 26px;
}
.repas_texte_infos {
	margin: 0px;
	color: orange;
	font-size: 15px;
}
.repas_ligne_6 {
	margin-top: 22px;
}
.repas_ligne_7 {
	margin-top: 22px;
}
.repas_ligne_8_menu {
	margin-top: 22px;
}
.bouton_oui {
	min-width: 120px;
	min-height: 50px;
	line-height: 20px;
}
.bouton_non {
	min-width: 120px;
	min-height: 50px;
	line-height: 20px;
}
.bouton_modifier {
	min-width: 140px;
	min-height: 50px;
	line-height: 20px;
}
.repas_separation {
	display: flex;
	min-width: 22px;
}
}

/***********************************
FIN DE LISTE DES REPAS
************************************/

/***********************************
MON PROFIL
************************************/
.texte_titre_container_monprofil {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 40px;
	color: #C6C6C6;
	font-size: 30px;
}

.container_mon-profil {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
	width: 100%;
}

.logo_email_container_login {
	font-size: 22px;
	font-weight: normal;
}

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

/* Aspect des checkboxes */
/* :before sert à créer la case à cocher */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before,
[type="radio"]:not(:checked) + label:before,
[type="radio"]:checked + label:before {
  content: '';
  display : block;
  position: absolute;
  left:0; top: 1px;
  width: 17px; height: 17px; /* dim. de la case */
  border: 1px solid #aaa;
  background: #f8f8f8;
  border-radius: 3px; /* angles arrondis */
  box-shadow: inset 0 1px 3px rgba(0,0,0,.3) /* légère ombre interne */
}
 
/* Aspect général de la coche */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after,
[type="radio"]:not(:checked) + label:after,
[type="radio"]:checked + label:after {
  content: '';
  position: absolute;
  top: -3px; left: 4px;
  /*font-size: 18px;*/
background-image: url("../design/sprite.png");
background-repeat: no-repeat;
background-position:-426px -10px;  /* height-weight 50px-50px*/
    width : 20px;
    height : 20px;
  color: #0070C0;
  transition: all .2s; /* on prévoit une animation */
}
/* Aspect général de la coche */
[type="radio"]:not(:checked) + label.radio_choix_oui:after,
[type="radio"]:checked + label.radio_choix_oui:after {
  content: '';
  position: absolute;
  top: -3px; left: 4px;
  /*font-size: 18px;*/
background-image: url("../design/sprite.png");
background-repeat: no-repeat;
background-position:-426px -35px;  /* height-weight 50px-50px*/
    width : 20px;
    height : 20px;
  color: #0070C0;
  transition: all .2s; /* on prévoit une animation */
}
/* Aspect général de la coche */
[type="radio"]:not(:checked) + label.radio_choix_non:after,
[type="radio"]:checked + label.radio_choix_non:after {
  content: '';
  position: absolute;
  top: -3px; left: 4px;
  /*font-size: 18px;*/
background-image: url("../design/sprite.png");
background-repeat: no-repeat;
background-position:-426px -60px;  /* height-weight 50px-50px*/
    width : 20px;
    height : 20px;
  color: #0070C0;
  transition: all .2s; /* on prévoit une animation */
}
/* 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 */
}



@media screen and (max-width:567px)
{
.texte_titre_container_monprofil {
	height: 30px;
	font-size: 22px;
}
/* on prépare le label */
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label,
[type="radio"]:not(:checked) + label,
[type="radio"]:checked + label {
  padding-left: 25px; /* fait un peu d'espace pour notre case à venir */
}
}

@media screen and (max-width:668px) and (min-width:568px)
{
.texte_titre_container_monprofil {
	height: 30px;
	font-size: 22px;
}
}
/***********************************
FIN DE MON PROFIL
************************************/

/***********************************
reponse-email.php
************************************/
.bloc_reponse {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 90%;
	max-width: 460px;
	margin-top: 20px;
	margin-bottom: 20px;
	padding:20px;
	border: 1px solid grey;
	background-color: rgba(11, 11, 11, 0.4);
}
.btn_connexion_reponse {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	width: 90%;
	max-width: 450px;
	color: white;
	font-size: 20px;
	font-family: Arial;
	cursor:pointer;
	border-radius: 3px;
	background-color: rgba(0,120,233,0.7);
	border: 1px solid white;
}
.btn_connexion_reponse:hover
{
background-color: rgba(0,102,197,0.7);
transition: all .2s; /* on prévoit une animation */
}
.btn_connexion_reponse:focus {
background-color: rgba(0,102,197,0.7);
outline: none;
}
.container_image_reponse {
display: flex;
align-items: center;
justify-content: center;
}
.img_anim {
height: 0px;
width: 0px;
animation-duration: 1s;
-webkit-animation-delay: 0.5s; /* Safari 4.0 - 8.0 */
animation-delay: 0.5s;
animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards;
animation-name: scaleto;
}

.p_reponse_centre {
	text-align:center;
}
.p_reponse_top {
	margin-top: 0px;
}

#img_oui {
	background-image: url(../design/Ico_check.svg);
	background-size: contain;
	background-repeat: no-repeat;
}

#img_non {
	background-image: url(../design/Ico_no_check.svg);
	background-size: contain;
	background-repeat: no-repeat;
}


#img_email {
	background-image: url(../design/no_mail.svg);
	background-size: contain;
	background-repeat: no-repeat;
}
#img_delai {
	background-image: url(../design/img_delai.png);
	background-size: contain;
	background-repeat: no-repeat;
}
#img_no_user {
	background-image: url(../design/img_no_user.png);
	background-size: contain;
	background-repeat: no-repeat;
}


@media screen and (min-width:570px) /* iPad et ordinateur */
{
.bloc_reponse {
padding:20px;
}
.container_image_reponse {
height: 200px;
width: 200px;
margin-top: 30px;
margin-bottom: 30px;
}
.name_user_reponse {
font-size: 22px;	
}
.message_reponse {
font-size: 16px;	
}
.big {
	font-size: 22px;	
}
@keyframes scaleto {
  from {
    height: 0px;
    width: 0px; 
  }

  to {
    height: 200px;
    width: 200px;
  }
}
}

@media screen and (max-width:569px) and (min-width:370px) /* iPhone6 */
{
.bloc_reponse {
padding:11px;
}
.container_image_reponse {
height: 160px;
width: 160px;
margin-top: 20px;
margin-bottom: 20px;
}
.name_user_reponse {
font-size: 18px;	
}
.message_reponse {
font-size: 15px;
}
.big {
	font-size: 18px;	
}
@keyframes scaleto {
  from {
    height: 0px;
    width: 0px; 
  }

  to {
    height: 160px;
    width: 160px;
  }
}
}
  
@media screen and (max-width:369px) /* iPhone5 */  
{
.bloc_reponse {
padding:11px;
}
.container_image_reponse {
height: 160px;
width: 160px;
margin-top: 20px;
margin-bottom: 20px;
}
.name_user_reponse {
font-size: 16px;	
}
.message_reponse {
font-size: 14px;
}
.big {
	font-size: 16px;	
}
@keyframes scaleto {
  from {
    height: 0px;
    width: 0px; 
  }

  to {
    height: 160px;
    width: 160px;
  }
}
}
/***********************************
FIN DE reponse-email.php
************************************/

/***********************************
traitement_edit_repas.php
************************************/
.container_reponse_membre {
	display: flex;
	justify-content: space-around;
	width: 90%;
	max-width: 800px;
}
.bloc_reponse_membre {
	display: flex;
	flex-direction: column;
	width: 45%;
	max-width: 380px;
	margin-bottom: 15px;
}
#bloc_reponse_oui {
	border: 3px solid rgba(0, 255, 0, 0.3);
	background-color: rgba(0, 255, 0, 0.1);
	font-weight: bold;
}
#bloc_reponse_non {
	border: 3px solid rgba(255, 0, 0, 0.3);
	background-color: rgba(255, 0, 0, 0.1);
	font-weight: bold;
}
.reponse_oui {
	padding: 12px;
	background-color: rgba(0, 255, 0, 0.3);
}
.reponse_non {
	padding: 12px;
	background-color: rgba(255, 0, 0, 0.3);
}
.titre_tableau {
display: flex;
width: 90%;
max-width: 550px;
align-items: center;
border: 1px solid grey;
font-size: 16px;
}
.tab_cel_1 {
display: flex;
padding:12px;
width: 100%;
height: 100%;
}
.tab_cel_2 {
display: flex;
padding: 12px;
width: 65px;
height: 100%;
}
.tab_cel_3 {
display: flex;
padding: 12px;
width: 65px;
height: 100%;
}
.tab_cel_4 {
display: flex;
padding: 8px;
width: 125px;
height: 100%;
}
.bouton_container_members_choice {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 90%;
	max-width: 550px;
	height: 60px;
	border-radius: 5px;
}

@media screen and (max-width:568px) 
{
.container_reponse_membre {
	flex-direction: column;
}
.bloc_reponse_membre {
	width: 100%;
	max-width: 567px;
	margin-bottom: 15px;
}
}

@media screen and (max-width:321px) and (min-width:1px)  /* iPhone5 portrait */
{
.titre_tableau {
font-size: 13px;
}
.tab_cel_1 {
width: 130px;
max-width: 130px;
}
.tab_cel_2 {
width: 45px;
}
.tab_cel_3 {
width: 45px;
}
.tab_cel_4 {
width: 65px;
}
}
@media screen and (max-width:375px) and (min-width:322px)  /* iPhone6 portrait */
{
.titre_tableau {
font-size: 14px;
}
.tab_cel_1 {
width: 165px;
max-width: 165px;
}
.tab_cel_2 {
width: 50px;
}
.tab_cel_3 {
width: 50px;
}
.tab_cel_4 {
width: 65px;
}
}
@media screen and (max-width:2px) and (min-width:1px)  /* iPhone5 paysage */
{
.titre_tableau {
font-size: 16px;
}
.tab_cel_1 {
width: 100%;
}
.tab_cel_2 {
width: 70px;
}
.tab_cel_3 {
width: 70px;
}
.tab_cel_4 {
width: 100px;
}
}
/***********************************
FIN DE traitement_edit_repas.php
************************************/

/***********************************
edit_repas.php - ajouter_repas.php
************************************/
.input_date {
	height: 35px;
	margin: 0 auto;
	width: 100%;
	font-size: 18px;
	font-weight: bold;
	text-transform: uppercase;
	background-color: rgba(11, 11, 11, 0.6);
	outline: none;
	border: 0;
	border-radius: 3px;
	padding: 0 3px;
	color: #C6C6C6;
}

.bt_menu_petit {
	display: flex;
    align-items: center;
    justify-content: center;
	height: 44px;
	width: 44px;
	min-height: 44px;
	min-width: 44px;
	background-color: rgba(0, 0, 0, 0);
	border-radius: 5px;
    cursor: pointer;
}
.bt_menu_petit:hover {
	background-color: rgba(232, 232, 234, 0.2);
}
.bt_menu_petit_insert {
	display: flex;
    align-items: center;
    justify-content: center;
	height: 34px;
	width: 34px;
	min-height: 34px;
	min-width: 34px;
	background-color: rgba(0, 0, 0, 0);
}
#bt_users_petit {
	background-position:-283px -150px;  /* height-weight 34px-34px*/
}
#bt_editer_petit {
	background-position:-49px -150px;  /* height-weight 34px-34px*/
}
#bt_email_petit {
	background-position:-322px -150px;  /* height-weight 34px-34px*/
}
#bt_corbeille_petit {
	background-position:-205px -150px;  /* height-weight 34px-34px*/
}
#bt_pdf_petit {
	background-position:-244px -150px;  /* height-weight 34px-34px*/
}
/***********************************
FIN DE edit_repas.php - ajouter_repas.php
************************************/