@charset "utf-8";
/* CSS Document */
body {
	margin: 0 auto;
	padding: 0;
	width: 100%;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 0.8rem;
	color: #DCAF10;
	background-color:#696969;
}
#Contenu {
	padding: 0;
	margin: 0 auto;
}
.row{
	margin: 25px 5px 0 5px;	
}
footer {
	margin-top: 50px;
	text-align: center;
}
footer .container p img{
	width: 35px;
}

/********************************************************************************************************************************/

/******* Pour les petits écrans *********/
@media (min-width:768px){
	#Nav header{
		width:40%;
	}
	#Nav{
	padding: 0;
	}
	#Menu .nav-link {
	padding-bottom: 0;
	padding-top: 0;
}
	.card.text-center{
		max-width: 48%;
		width:50%;
	}
}
@media (max-width:768px){
	#Nav header{
	width:80%;
	}
	#Nav{
		max-width: 95%;
	}
	#Menu .nav-link{
		padding-bottom: 10px;
	}
	.card.text-center{
		max-width: 530px;
		width: 98%;
	}	
}
@media (min-width:992px){
	.card.text-center{
		max-width: 31%;
		width:33%;
	}
}
/**************************************************************************************************************************************/

/******* Navigation ******/
.navbar.navbar-expand-md {
	padding: 0;
	background-color: rgba(36,33,46,1.00);
}
#Nav header{
	padding: 0;
	margin: 0;
}
#Nav header #logo{
	max-width: 15%;
}
#Nav header #titrehdf{
	max-width:85%;
	float: right;
}
#Menu{
	width: 50%;	
}
#Menu ul{
	width: 100%;
	justify-content: flex-end;
	margin-top: 3%;
}
#Menu .nav-item.active .nav-link{
	color:#DCAF10;
}
#Menu .nav-item .nav-link:hover{
	color: cyan;
}

/***** Bouton menu et sous menu******/
.navbar-dark .navbar-toggler {
	font-size:.9rem;
	padding: .25rem .4rem;
	border-color:#DCAF10;
}

/***** Sous menu Cuisine ******/
#Menu .dropdown-menu{
	background-color:rgba(36,33,46,1.00);
	border-color: #DCAF10;
	font-size: 0.8rem;
}
#Menu .dropdown-item{
	color: rgba(255,255,255,0.5);
}
#Menu .dropdown-item.active, #Menu .dropdown-item:hover{
	background-color: transparent;
	color: #DCAF10;
}
/*************************************************************************************************************************************/

/********* Card pour l'Acceuil et cuisine *********/
.card-deck{
	margin-top:20px;
}
#cardtele{
	margin-top: 55px;
	margin-bottom: 80px;
	max-width: 95%;
}
#cardcoyote{
	width:300px;
}
.card-title .img-fluid{
	max-width: 80%;
}
.card-body p{
	font-size: 1.1rem;
}
.card-footer .btn-dark{
	box-shadow: 0 0 3px 3px gray;
}

/**** Cards Communs avec les feuilles Accueil et Diaporama ****/
.card.text-center{
	background-color: transparent;
	border-radius: 10px;
	box-shadow: 0 0 5px 5px gray;
	margin: 10px 5px;	
}
.card.text-center .card-header{
	padding: .75rem 0;
}
.card.text-center .card-body{
	padding: 1.5rem 0;
}
/****************************************************************************************************************************************/

/********* Pour Nicolas &Co et Bonnes annees **********/
.diapo {
	margin: 8px 0;
	max-width: 250px;
}
.img-fluid.scale:hover{
	cursor: pointer;
	transform: scale(1.05,1.07);
	transition-timing-function: ease-out;
	transition-duration: 250ms;
	/**position**/
	position: relative;
	z-index: 99;
}
/***************************************************************************************************************************************/

/********* Pour toutes les modals ****/
.modal.fade.show{
	padding-right: 0 !important;
}
.modal-dialog{
	margin: 0 auto;
	max-width: 100%;
	height: 100%;
}
.modal-content{
	height:100%;
	background-color: black;
	border: none;
}
.modal-header{
	border-bottom-color: gray;
}
.modal-header .close{
	color:yellow;
	padding: 0;
	margin: 0;
}
.close:not(:disabled):not(.disabled):focus, .close:not(:disabled):not(.disabled):hover {
	color: yellow;
}
.modal-body{
	padding: 5px;
	text-align: center;
	overflow-y: auto;
}
.modal-footer{
	border-top-color: gray;
}
/*****************************************************************************************************************************************/

/******** Pour les modals vidéo de Nicolas et Bonnes Années *******/
.modal-body video{
	max-width: 960px;
	width:100%;
}
.modal-body video.vid512{
	max-width: 512px;
}
.modal-body video.vid640{
	max-width: 640px;
}
.modal-body video.vid720{
	max-width: 720px;
}
/****************************************************************************************************************************************/

/****** Pour les card de Diaporama **********/
.img-thumbnail{
	max-width: 90%;
}

/********* Pour les boutons drapeaux de Diaporamas **************/
.card.text-center .card-body button{
	color: transparent;
	background-size:cover;
	background-position: center;
	background-repeat: no-repeat;
 	border:none;
}
.card.text-center .btn.btn-espagne {
	background-image: url("../image/DrapeauEspagne.png");
	box-shadow: 0 0 2px 2px #C9A00E;
}
.card.text-center .btn.btn-espagne:hover {
	box-shadow: 0 0 2px 2px #c60b1e;
}
.card.text-center .btn.btn-chypre{
	background-image: url("../image/DrapeauChypre.png");
	box-shadow: 0 0 2px 2px #d57800;
}
.card.text-center .btn.btn-chypre:hover{
	box-shadow: 0 0 2px 2px #ffffff;
}
.card.text-center .btn.btn-egypte{
	background-image: url("../image/DrapeauEgypte.png");
	box-shadow: 0 0 2px 2px #d57800;
}
.card.text-center .btn.btn-egypte:hover{
	box-shadow: 0 0 2px 2px black;
}
.card.text-center .btn.btn-france{
	background-image: url("../image/DrapeauFrance.png");
	box-shadow: 0 0 2px 2px #ffffff;
}
.card.text-center .btn.btn-france:hover{
	box-shadow: 0 0 2px 2px #002395;
}
.card.text-center .btn.btn-grece{
	background-image: url("../image/DrapeauGrece.png");
	box-shadow: 0 0 2px 2px #0d5eaf;
}
.card.text-center .btn.btn-grece:hover{
	box-shadow: 0 0 2px 2px #ffffff;
}
.card.text-center .btn.btn-mexique{
	background-image: url("../image/DrapeauMexique.png");
	box-shadow: 0 0 2px 2px #006847;
}
.card.text-center .btn.btn-mexique:hover{
	box-shadow: 0 0 2px 2px #ce1126;
}
.card.text-center .btn.btn-rd{
	background-image: url("../image/DrapeauRD.png");
	box-shadow: 0 0 2px 2px #002d62;
}
.card.text-center .btn.btn-rd:hover{
	box-shadow: 0 0 2px 2px #ffffff;
}
.card.text-center .btn.btn-usa{
	background-image: url("../image/DrapeauUSA.png");
	box-shadow: 0 0 2px 2px #ffffff;
}
.card.text-center .btn.btn-usa:hover{
	box-shadow: 0 0 2px 2px #b22234;
}
.card.text-center .btn.btn-italie{
	background-image: url("../image/DrapeauItalie.png");
	box-shadow: 0 0 2px 2px #009246;
}
.card.text-center .btn.btn-italie:hover{
	box-shadow: 0 0 2px 2px #ce2b37;
}

/****** Pour les modals des diaporamas *****/
.photo .modal-header .modal-title{
	margin: 0 auto;
} 
.carousel.slide {
	max-width: 640px;
	margin: 0 auto 40px auto;
}
.carousel-caption {
	position: static;
	padding: 5px 0 0 0;
	color: white;
}
.carousel-indicators {
	top: 101%;
	flex-wrap: wrap;
	margin:0;
}
.carousel-indicators li {
	background-color:rgba(255,196,0,1.00);
	min-width: 10px;
	max-width: 10px;
	height: 10px;
	border-radius: 50%;
	margin: 2px;
}
.carousel-indicators li.active {
	background-color: transparent;
	border: 1px solid rgb(255,196,0);
}

/**** Pour les info des modals Diaporama ****/
.photo #InformationEsp, .photo #InformationC, .photo #InformationV{
	max-width: 640px;
	margin: 0 auto;
}
.photo #InformationEsp .card, .photo #InformationC .card, .photo #InformationV .card{
	background-color: black;
}
.photo #InformationEsp button, .photo #InformationC button, .photo #InformationV button{
	color: rgba(255,196,0,1.00);
	padding: 0;
}
.photo #InformationEsp .card-header, .photo #InformationC .card-header, .photo #InformationV .card-header{
	padding: 0;
}
.photo #InformationEsp .card-body, .photo #InformationC .card-body, .photo #InformationV .card-body{
	text-align: left;
	padding: 0 0.8rem;
	border:1px solid #D57800;
}
.photo #InformationEsp .card-body p, .photo #InformationC .card-body p, .photo #InformationV .card-body p{
	font-size: 0.9rem;
}
.photo #InformationEsp .imgCarte ,.photo #InformationC .imgCarte, .photo #InformationV .imgCarte {
	width: 240px;
}

/***** Pour les badges des modals Diaporama ******/
.photo .badge {
	font-size: .8rem;
	font-weight: 400;
	line-height: 1.5;
	margin-right: 5px;
	margin-bottom: 2px;
}
/***************************************************************************************************************************************************/

/******** Pour la cuisine *********/

/******* Pour les img de la feuille cuisine (dans les cards)*****/
.imgCuisine{
	width: 100px;
	padding: 1rem;
	border-radius: 45%;
}

/***** pour le choix des recettes ****/
.img-Menu{
	border-radius: 50%;
	box-shadow: 0 0 5px 5px #bfbebe;
}

/***** Modals des recettes *****/
.bg-recette{
	background-color: #696969;
}
/*.bg-recette .modal-header {
	border-bottom-color: ;
}*/
.bg-recette .jumbotron{
	max-width: 640px;
	margin:10px auto;
	background-color: gray;
	box-shadow: 0 0 2px 2px darkgray;
	padding-top: 1rem;
	padding-bottom: .5rem;
}
.bg-recette .jumbotron .text-recette{
	text-align: left;
	color: black;
	margin-top: 0.5rem;
}