body {
  --main-bg-color: #EFEDE3;
  --second-bg-color: #fff ;
  --third-bg-color : #444444;
  
  --main-text-color: #212529;
  --contrast-text-color : #fff;
  
  --first-theme-color: #B7A08F;  
  --first-theme-variant: #D5CFC4;
  --second-theme-color: #C6CDBC;
  
  --police-caps : 'Montserrat';
  --police-default : 'Quicksand';
}

body {
	font-family : var( --police-default );
	background-color: var( --main-bg-color ) !important;
}

.body {
	
	min-height : 60vh;
}

@media (min-width: 992px) {
	
    .container, .container-md, .container-sm {
        max-width: 992px;
    }
	
	.container-admin {
        max-width: 3000px !important;
    }
}


a {
	color: var( --first-theme-color ) !important;
	text-decoration : none !important;
}

.btn {
	font-family : var( --police-caps );
	text-transform: uppercase !important;
	letter-spacing : 3px;
	font-weight : 300;	
}

.btn-primary {	
	background-color : var( --first-theme-color ) !important;
	border : 1px solid var( --first-theme-color );
	color : var( --contrast-text-color ) !important;	
}

.btn-primary:hover,
.btn-primary:active,
.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active  {	
	background-color : var( --first-theme-variant ) !important;
	border : 1px solid var( --first-theme-variant );
	color : var( --contrast-text-color ) !important;
}

.btn-outline-primary {	
	background-color : transparent !important;
	border : 1px solid var( --first-theme-color );
	color : var( --first-theme-color ) !important;
	
}

 .btn-outline-primary:hover, 
 .btn-outline-primary:active {	
	background-color : var( --first-theme-color ) !important;
	border : 1px solid var( --first-theme-color );
	color : var( --contrast-text-color ) !important;
}

h1 {	
	font-family : var( --police-caps ), arial, sans-serif;
	text-transform: uppercase;
	letter-spacing : 3px;
	font-weight : 300;
	font-size : 15px;
}

.card, img, .btn, .dropdown-menu, .list-group-item {
	border-radius : 0px !important;
}

.form-control:focus{
	border-color: var( --first-theme-color );
    outline: 0;
    box-shadow: 0 0 0 0 rgba(13, 110, 253, .25) !important;
}

p {
	font-family : var( --police-default );
	font-weight : 300;
	font-size : 14px;
    line-height: 2em;
}

/* Menu */

.menu-top {
	font-family: var( --police-caps ), arial, sans-serif;
	text-transform: uppercase;
	padding : 10px;
	font-size : 12px;
	letter-spacing : 3px;
	font-weight: 300;
	background-color : var( --second-bg-color ) !important;
}


.menu-top img {
	max-height : 20px;
}

.menu-top li {
	padding : 0 10px;
	min-width : 10%;
}


.menu-top a {
	color : var( --main-text-color ) !important;
}
	
.menu-top .navbar-collapse {
	
	text-align : center;
}

.menu-top .dropdown-menu {
	background-color : transparent !important;
	border : 0px solid #fff;
	min-width : 200px;
}

.menu-top .dropdown-item {
	font-family: var( --police-caps ), arial, sans-serif;
	text-transform: uppercase;
	padding : 10px;
	font-size : 10px;
	letter-spacing : 3px;
	font-weight: 300;
	background-color : var( --second-bg-color ) !important;
}



.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; /* remove the gap so it doesn't close */
}



/* Logo */

.logo {
	width:20%;
	min-width : 200px;
}

/* Accueil - dernier article */

.card {
	background-color : var( --second-bg-color );
	border : 0px #fff solid !important;
	text-align : left;
	
}

.card-title {
	font-family : var( --police-caps ), arial, sans-serif;
	letter-spacing : 3px;
	font-weight : 300;
	font-size : 15px;
	
}

.card-categorie {
	font-family : var( --police-caps ), arial, sans-serif;
	text-transform: uppercase;
	letter-spacing : 3px;
	font-weight : 300;
	font-size : 10px;
	line-height : 2em;
}

.divider {
	border-top: 1px solid;
    width: 10%;
    display: block;
    max-width: 45px;
    color: var( --main-text-color );
}


.divider-center {
	border-top: 1px solid;
    width: 10%;
    display: block;
    max-width: 50px;
    margin: 0 auto 20px;
    color: var( --main-text-color );
}

.tags.d-flex{
	gap:20px;
}

.img-desc img{	
	border-bottom-right-radius:50% !important;	
	border-top-left-radius:50% !important;
}


.img-1 {
    object-fit: cover;
	border-top-right-radius:70% !important;	
	border-top-left-radius:70% !important;
	width: 100%;
	max-width: 900px;
    max-height: 30vw;
	min-height:250px;
}

.article-desc-top {	
	filter: drop-shadow( .5rem .5rem 0px var( --first-theme-variant ));
}

#liste_articles .img-liste {
	width: 100%;
	min-height:250px;
    object-fit: cover;
}

#liste_articles .card {
	padding : 10px;
	
}

/* Accueil derniers articles */

/* Article */

#article {
	text-align: center;	
}

.card-desc .recette {
	
	border-left : 1px solid var( --main-text-color );
}


/* Articles plus lus ou liés */

#top_articles {	
	background-color : var( --first-theme-variant ) ;
}

#top_articles .art-1 {
	margin-top : 5%;
}

#top_articles .art-0 {
	margin-bottom : 5%;
}

.frame {
	text-align: center;	
	position: relative;
	cursor: pointer;	
	perspective: 500px; 
	vertical-align: center;
}
.frame img {
	width: 100%;
}

.frame .details {
	width: 70%;
	height: 80%;	
	padding: 5% 8%;
	position: absolute;
	content: "";
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotateY(90deg);
	transform-origin: 50%;
	background: rgba(255,255,255,0.9);	
	opacity: 0;
	transition: all 0.4s ease-in;	
	text-align:left;
	
}
.frame:hover .details {
	transform: translate(-50%, -50%) rotateY(0deg);
	opacity: 0.9;
}

.frame .details .card-categorie,
.frame .details .card-title {
	font-size: min(1.1vw, 13px) !important;
	color: var( --main-text-color ) !important;
}
/* Footer */

#footer {
	background-color : var( --third-bg-color );
	color : var( --contrast-text-color );
}

#footer li {
	list-style : none;
}
	

#footer .footer-item a {
	color : var( --contrast-text-color ) !important;	
	white-space: nowrap;
	font-family : var( --police-default );
	font-size : 13px;
    line-height: 2.5em;
	display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}


#footer a:hover{
	text-decoration : underline !important;
}

#footer img {
	width : 25px;
	
}
	
#footer .footer-desc {
	margin : 10px 0;
	width : 70px !important;
	border-top-left-radius : 70px !important;
	border-top-right-radius : 70px !important;
}

#footer .copyright{
	
	text-align : center
}



/* ADMIN */

.click { 	
	cursor :pointer !important;
}

#admin .colspan {
	font-family : var( --police-caps ), arial, sans-serif;
	text-transform: uppercase;
	letter-spacing : 3px;
	font-weight : 300;
	font-size : 15px;
}

#admin .gris td,
#admin .gris th  {
	background-color : var( --first-theme-variant ) !important;
}