@charset "UTF-8";

* 		{box-sizing:border-box;}
body 	{font-family:'Lato', sans-serif;margin: 0;padding: 0;}
nav 	{height:100%; display:flex; align-items:center;justify-content:space-between;}
h1, h2 	{font-family:'Courier Prime', monospace;}
h1 		{font-size: 3em;line-height: 0.8em;}
cite 	{display: flex;justify-content: flex-end;}

.nav 		{text-decoration: none;color: black;transition-duration: 0.1s;z-index: 100;}
.nav:hover  {color:#F2CB05;}
.nav:active {color:#0477BF;}

.t-ou 		{border: 1px solid red;} /* A VIRER */
.br 		{display: block;margin-bottom: 15px;}
.big 		{font-size: 1.5em;}
.center 	{text-align: center;}
.right  	{text-align: right;}
.left 		{text-align: left;}
.maj 		{text-transform: uppercase;}

.maman 		{display: grid; grid-template-columns: 1fr 4fr 7fr 2fr; grid-auto-rows: minmax(80px, auto); height: 98vh;}
.flex 		{display: flex; flex:1;width: 100%;}
.col  		{flex-direction: column;}
.row 		{flex-direction: row;}
.ar  		{justify-content: space-around;align-items: center;}
.bet 		{justify-content: space-between;align-items: center;}
.cta 		{height: 90px;width: 180px;}
.rot 		{writing-mode: vertical-lr;text-orientation: sideways;cursor: default;}
.al-centre 	{display: flex;align-items: center;justify-content: center; }


.f100 		{font-weight: 100; font-size: 1.4em;line-height: 15px;}
.trait 		{border-bottom: 3px solid black;}
.marker 	{font-family: 'Permanent Marker', cursive;}

/* :root{ --sa:1; --sb:2; --sc:4; --sd:5; --se:6;} */


/* row-start / column-start / row-end / column-end */
.mouflet:nth-child(1) {grid-area: 1 / 1 / 2 / 2;}/*logo*/
.mouflet:nth-child(2) {grid-area: 2 / 1 / 6 / 2;}/*title*/
.mouflet:nth-child(3) {grid-area: 6 / 1 / 8 / 2;}/*social*/
.mouflet:nth-child(4) {grid-area: 1 / 2 / 8 / 3;}/*post-it*/
.mouflet:nth-child(5) {grid-area: 1 / 3 / 1 / 4;}/*menu*/
.mouflet:nth-child(6) {grid-area: 2 / 3 / 8 / 4;}/*content*/
.mouflet:nth-child(7) {grid-area: 6 / 4 / 8 / 5;}/*picture*/

.mouflet:nth-child(4) {display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(80px, auto);grid-gap: 5px;}


.baby 		{display:flex;align-items: center;justify-content: center; text-align: center; font-size: 0.7em;font-family: 'Permanent Marker', cursive;}
.baby a 	{text-decoration: none;color: black;}

.md  		{margin-right: 30px;}
.mg  		{margin-left:  30px;}
.top 		{margin-top:   30px;}
.bot 		{margin-bottom:30px;}
.p1  		{transform:    rotate( 5deg);}
.p2  		{transform:    rotate(-5deg);} 
.po  		{box-shadow:   2px 5px 8px -2px rgba(70, 70, 70, 0.80);}
.p1,.p2,.po {transition-duration: 1s;}
.p1:hover 	{transform:scale(1.2) rotate(-2deg);transition-duration: 0.5s;} 
.p2:hover 	{transform:scale(1.2) rotate(2deg);transition-duration: 0.5s;}

p a 		{color:#0477BF;}
p a:hover 	{text-decoration: none;}
.content 	{height: 100%; align-items: flex-start; overflow: scroll;}

.bleu  		{background: #0477BF;}
.jaune 		{background: #F2CB05;}

.bas    	{align-items: flex-end;}
.haut   	{align-items: flex-start;}
.gauche 	{justify-content: flex-start;}
.droite 	{justify-content: flex-end;}
.goes:hover {transform:scale(1.3) rotate(-80deg) translateX(-45px) translateY(-15px); transition-duration: 1.5s;}
.post   	{height: 130px; width: 130px;}
.post:first-child {z-index: 100;}

.noir  		  {background:black;color: #FFF ; width: 100%; height: 100%;border-radius: 10px; border: 2px solid black; text-decoration: none;transition-duration: 0.3s;}
.noir:hover   {background:#FFF; color: black;}
.noir:hover a {color: black;}
.noir:active  {background:#999;}

/* PETITS PLUS */

.bounce 	  {margin:3px 0;}
.bounce:hover {animation: bounce 0.3s ease infinite alternate;}

@keyframes bounce{
	from {transform: translateY(0);}
	to   {transform: translateY(-3px);}
}

.zoom 		{transition-duration: 0.2s;}
.zoom:hover {transform:scale(1.05);transition-duration: 0.3s;}


blockquote 	{border:3px solid grey;font-style: italic;margin:0 30px 0 30px;padding:15px;border-radius: 10px;}
button 		{padding: 10px;font-weight:bold; font-size: 1.3em;}
button:hover{cursor: pointer;}
.start 		{display:flex;flex-direction: column;width: 100%; height: 100%; text-align: left;margin-top: 20px;
			justify-content: flex-start;
			align-items: flex-start;}
.random-img 	{display: flex;}
.random-img img {display: flex; max-width:44vw; max-height:55vh; min-width: 33vw;}
dt,dl,dd {margin: initial; padding: initial;}
dt 		 {font-weight: bold;}
dl,dd 	 {font-size: .9rem;}
dd 		 {margin-bottom: 1em;}


/* Experts */
.experts 	{display: grid;grid-template-columns: 1fr 1fr;height: auto;grid-gap: 10px;}

.expert 	{
	display: flex;
	flex-direction: column;
	height: 360px;
	border: 3px solid black; border-radius: 10px;
	background: url("./img/texture.jpg");
	background: linear-gradient(rgba(0,0,0,0.4) 0%, rgba(240,240,240,0.1) 40%);
}

.ex-txt 	{
	padding-top: 50px;
	height: 250px;	
}

.ex-pic img	{
	width: 170px; height: 170px;
	border: 5px solid #FFF; border-radius: 50%;
	transform: translateY(30px);
}

.ateliers 	{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	flex-wrap: wrap;
  	column-gap: 5px;
  	grid-row-gap: 10px;
 }

.atelier 	{
	display: flex;
	flex-direction: column;
	width: 	250px; 
	margin: 5px;
	border: 3px solid grey; border-radius: 10px;
	background: url("./img/texture.jpg");
}
.atelier:hover {background: unset;}
.ateliers a {text-decoration: none;color: black;}
.at {}
.at h3 {margin-top: 5px;}
.at img {width: 100%;}
.at ul, .atelier li {padding:0 5px; margin:0 5px;}
.at:nth-child(1) {flex: 1;margin: 5px;}
.at:nth-child(2) {flex: 3;}
.at:nth-child(3) {flex: 4;margin: 5px;}


/* Responsive */

@media only screen and (max-width: 1000px) {
.md  		{margin-right: 5px;}
.mg  		{margin-left:  5px;}
.post {height: 110px; width: 110px; font-size: 0.6em;}
}

@media only screen and (max-width: 800px) {
body {min-width: 330px}
.maman {grid-template-columns: 1fr 4fr 1fr;height: auto;}

.mouflet:nth-child(1) {grid-area: 1 / 1 / 2 / 2;}/*logo*/
.mouflet:nth-child(5) {grid-area: 1 / 2 / 1 / 4;}/*menu*/
.mouflet:nth-child(6) {grid-area: 2 / 1 / 5 / 4;}/*content*/

.mouflet:nth-child(2) {display: none;}/*title*/
.mouflet:nth-child(4) {display: none;}/*post-it*/
.mouflet:nth-child(7) {display: none;}/*picture*/

.mouflet:nth-child(3) {grid-area: 5 / 1 / 6 / 4;}/*social*/
.mouflet:nth-child(3) div {display: flex; flex-direction: row;justify-content: space-around;}

.mob 	{flex-direction: column; justify-content: space-around; height: 220px;}
.nav a 	{transform: rotate(-25deg); white-space: nowrap;}
.trait 	{border:inherit;}
.content{height: auto; overflow: inherit;}
.nope 	{display: none;}
.bounce {margin:0;}
.bounce:hover {animation: none;}
.random-img img { max-width:98% ; min-width: 90%; height: inherit; min-height: 0 ; }
}

/* a modifier : mode portrait iPad */

@media (min-height: 1000px), screen and (orientation: portrait) {

body {min-width: 330px}
.maman {grid-template-columns: 1fr 4fr 1fr;height: auto;}

.mouflet:nth-child(1) {grid-area: 1 / 1 / 2 / 2;}/*logo*/
.mouflet:nth-child(5) {grid-area: 1 / 2 / 1 / 4;}/*menu*/
.mouflet:nth-child(6) {grid-area: 2 / 1 / 5 / 4;}/*content*/

.mouflet:nth-child(2) {display: none;}/*title*/
.mouflet:nth-child(4) {display: none;}/*post-it*/
.mouflet:nth-child(7) {display: none;}/*picture*/

.mouflet:nth-child(3) {grid-area: 5 / 1 / 6 / 4;}/*social*/
.mouflet:nth-child(3) div {display: flex; flex-direction: row;justify-content: space-around;}

.mob 	{flex-direction: column; justify-content: space-around; height: 220px;}
.nav a 	{transform: rotate(-25deg); white-space: nowrap;}
.trait 	{border:inherit;}
.content{height: auto; overflow: inherit;}
.nope 	{display: none;}
.bounce {margin:0;}
.bounce:hover {animation: none;}

}