/*
Theme Name: tbf
Theme URI: 
*/

/* Bases */
* {
  box-sizing: border-box;
}
html {
	height:101%;
}
body {
	text-align: left;
	margin:0;
/*	background: #eee;*/
}
#page {
	background: #FFF;
	max-width: 1200px;
	margin: 0 auto;
/*	box-shadow: 0 0 20px 0 rgba(0,0,0,.1);*/
}
a {
	text-decoration: none;
	color: #06F;
}
img {
	max-width: 100%;
	height: auto;
}

/* header */ 
header {
	max-width:100%;	
	margin:0 auto;
	text-align:center;
    }
header h1 {
	font-weight:bold;
	font-size:250%;
	padding:5px;
    }
header h2{
	font-size:180%;
}

/* main */ 
main {
	width: 100%;
	padding:0 5px;
}
main section {
	padding: 20px;
	display:flex;
    flex-direction: row; 
	flex-wrap: wrap;
	justify-content: space-between;
	gap:20px;
}
section h2 {
    flex:inherit;
  }
#prestations h2 {
    flex:auto;
  }
section .bloc {
    background-color: #00000014;
	width: calc((100% - 80px) / 2);
	padding:8px;
	margin: 10px;
  }
#quiSuisJe {
    flex: 1; 
    padding: 45px;
    background-color: #00000014;
    margin:20px;
	height: fit-content;
    }
.image-block {
    padding: 20px; 
    text-align: center; 
}
.image-block img {
    max-width: 100%; 
    height: auto; 
    border-radius:50%;
}    
.encadre {
	border: 1px gray solid;
	border-radius:20px;
	}
    
/* WP Content */
.wp-content p{
	margin: 0.5em 0;
}
.wp-content .wp-caption-text {
	text-align: center;
	color: #999;
	font-size: 0.9rem;
}

/* footer */
footer {
	font-size: .9em;
	margin: 20px 0 0 0;
	padding: 20px 20px 15px;
	width:100%;
	border-top: 1px solid #ccc;
	order:4;
}
footer .credits {
	float: left;
	margin: 0;
}
footer nav {
	float: right;
	width:auto;
    background: transparent;
}
footer nav ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
footer nav li {
	display: inline-block;
}
footer nav a {
	color: #111;
}
footer nav a:hover, footer .link:hover {
	color: #45bbe6;
}

img.alignright { margin: 0 0 1em 1em; }
img.alignleft { margin: 0 1em 1em 0; }
img.aligncenter { margin-left: auto; margin-right: auto; }
.alignright { float: right; }
.alignleft { float: left; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }

/*--------------------------------------------------------------
5.0 Typography
--------------------------------------------------------------*/
body {
	font-size:1rem;
	line-height:1.7;
}
h1, h2, h3, h4, h5, h6 {
	clear: both;
	line-height: 1.4;
	margin: 0 0 0.75em;
	padding: 0.5em 0 0;
}
h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {
	padding-top: 0;
}
h1 {
	font-size: 3rem;
	font-weight: bold;
	letter-spacing: -1px;
	line-height: normal;
	text-align:center;
}
h2 {
	font-size: 2.5rem;
	font-weight: bold;
	color:#ff4800;
	text-align:center;
}
h3 {
	font-size: 2rem;
	text-align:center;
}
p {
	margin: 0 0 1.5em;
	padding: 0;
}
dfn, cite, em, i {
	font-style: italic;
}

:focus {
	outline: none;
}
.txtlink {
    color:#06F;
    }
#presentation {
	padding-top: 50px;
	min-height: 100vh;
	}
#seo {
	padding-top: 40px;
	min-height: 100vh;
	justify-content: normal;
	flex-direction: column;
	}
#prestations {
	padding-top: 40px;
	min-height: 100vh;
	}
#contact {
	padding-top: 40px;
	display: block;
	min-height: 100vh;
	}


.contactTel {
  display: block;
  height: auto;
  width: fit-content;
  margin: 15px auto;
}
.link {
  cursor: pointer;
}
.contactTel a {
  padding: .5em .8em;
  margin: .5em;
  display: block;
  text-align: center;
  font-size: 1.4em;
  background: #4ab;
  color: white;
  background: linear-gradient( #ff9100,#ffab3d);
  border-radius: .6em;
  box-shadow: 0 0 5px rgba(0,0,0,0.5), 0 -1px 0 rgba(255,255,255,0.4);
}

	
/*--------------------------------------------------------------
5.1 Formulaire
--------------------------------------------------------------*/
#wpcf7-f12-p14-o1 {
	display:flex;
	}
.wpcf7-form textarea,
.wpcf7-form input[type="text"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="email"] {
    background: #ddd;
    color: #333;
	border: 1px solid grey;
	border-radius: 5px;
	font-size: 120%;
	padding: 5px;
	margin: 5px;
	max-width: 90%;
}
.wpcf7 textarea:placeholder, 
.wpcf7 input:placeholder {
    color: #333;
}
.wpcf7-form textarea,
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form input[type="email"]:focus {
	border-width: 3px;
}
.wpcf7-form textarea.wpcf7-validates-as-required, 
.wpcf7-form input.wpcf7-validates-as-required {
	border-color: #f33;
}
/*--------------------------------------------------------------
6.0 Responsive
--------------------------------------------------------------*/

@media screen and (max-width: 50em) {	/* 800 à 1000px */
	/* layout */
	#page {
		max-width: 100%;
	}
	/* typo */
	hgroup h1 {
		font-size: 5vw;
    }
	section .bloc {
		width: calc((100% - 20px) / 2);
	  }
}

@media screen and (max-width: 40em) {  /* 640 px */
	/* layout */
	#page {
		max-width: 100%;
	}
	main {
	  display: block;
	  width: 100%;
	}
	/* typo */
    h1 {
        font-size:1.5em;
    }
	header p span{
		font-size: 6vw;
    }
}

@media screen and (max-width: 30em) {  /* 480 px */
	/* layout */
	main {
	  display: block;
	  width: 100%;
	}
	#page {
		max-width: 100%;
	}
	header hgroup{
		height:30vh;
	}
	/* typo */
    header h1 {
		font-size:200%;
    }
	header p span{
		font-size: 5.4vw;
    }
	main section {
		padding: 10px;
	}
	section .bloc {
		width: 100%;
	  }
	#quiSuisJe {
		padding: 10px; 
		margin:10px;
		}
	.image-block {
		padding: 10px; 
	}
	h2 {font-size: 1.8rem;	}
	h3 {font-size: 1.5rem;	}
}