/* Variables globales */

:root {
	--couleur-orange : rgb(250 93 54);
	--couleur-bleu : rgb(53 96 126); 
	--couleur-gris : rgb(76 71 63);
	--couleur-blanc : rgb(255 255 255);
	--couleur-noir : rgb(0 0 0);
}

/* Police de caractères */
@font-face{ 
	font-family: 'Butler';
	src: url(../fonts/Butler.woff) format('woff');
}
@font-face{ 
	font-family: 'ButlerStencil';
	src: url(../fonts/ButlerStencil.woff) format('woff');
}
h1 {
	font-family: 'Butler', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
	font-family: 'Butler', serif;
}

/* Titres d’en-tête images */
.hero h1 {
	font-size: 2.6rem;
	text-transform: uppercase;
	text-shadow: 2px 2px 4px var(--couleur-noir);
	font-weight: 700;
}
.hero h2 {
	font-size: 1.2rem;
	text-transform: uppercase;
	text-shadow: 2px 2px 4px var(--couleur-noir);
}
.title-h1h2 h1+h2 {
}

/* Global */
body {
	font-family: 'Butler', serif;
	color: var(--couleur-bleu);
	font-weight: 600;
	font-size: 1.2rem;
}

/* Bandeau haut */
#header {
	background-color: var(--couleur-bleu);
}
#header a, #header a:visited, #header a:hover, #header a:active, .overlay-menu a, .overlay-menu a:visited, .overlay-menu a:active {
	text-transform: uppercase !important;
	font-size: 1.1rem;
	font-weight: 800;
	font-family: sans-serif;
	background: linear-gradient(to top right, tomato, darkred);
	background-clip: text;
	color: transparent !important;
}
#header a:hover, #header a.active, .treemenu li a:hover, .treemenu li a.active {
	background: linear-gradient(to top right, gold, red) !important;
	background-clip: text !important;
	color: transparent !important;
}

/* Menu téléphone */
.mobile-menu .button_container span {
	background: linear-gradient(to top right, tomato, darkred);
}
.mobile-menu .button_container.active span {
	background: linear-gradient(to top right, gold, red) !important;
}

/* Bandeau bas */
#footer {
	background-color: var(--couleur-gris) !important;;
}
#footer .container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	font-size: .8em;
}
#footer .container p {
	flex: 1 0 30%;
}
#footer .container #copyright {
	flex: 1 0 100%;
}
@media (max-width: 720px) {
  #footer .container p {
	flex: 1 0 100% !important;
  }
}
#logo-artisan {
	width: 5rem;
}

/* Espacement entre les colonnes */
.columns {
	column-gap: 2em;
}
.column.col-6 {
	flex: 1 1 40%;
}
@media (max-width: 840px) {
  .column.col-6 {
	flex: 1 1 100%;
  }
}

/* Module carrés en première page */
#carres {
	gap: 1em;
}
.carre {
	flex: 1 1 30%;
	aspect-ratio: 1/1;
	display: flex;
	align-items: flex-end;
	background-size: cover;
}
#carres+section {
	background-color: slategray !important;
}
#carres .button {
	color: beige;
	font-family: "Butler";
	text-transform: uppercase;
	font-size: 1rem;
	background-color: rgb(from var(--couleur-orange) r g b / .9);
	padding: .8em;
	border-radius: 2em;
	border: 1px beige solid;
	flex: 1 1 auto;
	padding-bottom: 1.8em;
	margin: 1em;
}
#carres .button:hover, #carres .button:active {
	filter: brightness(1.3); 
}

/* Catalogue */
#catalogue {
	display: flex;
	flex-wrap: wrap;
}
.produit {
	display: flex;
	flex-direction: column;
        width: calc((100% / 3) - 2em );
}
@media (max-width: 640px) {
  .produit {
	width: calc((100% / 2 - 1em));
  }
}
@media (max-width: 320px) {
  .produit {
	width: 100%;
  }
}
.produit .photo {
	flex: 1 1 60%;
	/*! aspect-ratio: 1; */
}
.produit .description {
	flex: 1 1 40%;
}

/* Blog */
.card-title h5 {
	text-transform: uppercase;
	font-weight: bold;
	font-size: 1.5rem !important;
}
.card-body {
	font-size: 1.1rem;
}
.blog-date {
	font-size: .8em !important;
}