@import url('https://fonts.googleapis.com/css?family=Work+Sans:300,600');

html
{
	box-sizing: border-box;
}

*, *:before, *:after
{
	box-sizing: inherit;
	margin : 0;
}

html
{
}

body
{
	height: 100%;
	width: 80%;
	margin: auto;

	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

header
{
	width: 80%;
	height: 20vh;
	position: fixed;
	top : 0;
	background-color: white;
	z-index: 999;

	display: flex;
	justify-content: space-between;
}

h2
{
	margin-top: 10vh;
	border-bottom: 2px solid red;
}

	#logo
	{
		max-height: 100%;
		flex-grow: 0;

		display : grid;
  		place-items : center;
	}

	#logo img
	{
		max-height: 20vh;
		width: auto;
		max-width: 100%;
	}

	.nav-toggle
	{
		display: none;
	}

	.nav-toggle-label
	{
		height: 100%;
		margin-right: 2em;
		display: flex;
		align-items: center;
		cursor: pointer;
	}

		.nav-toggle-label span,
		.nav-toggle-label span::before,
		.nav-toggle-label span::after
		{
			display: block;
			
			background-color: black;
			height: 2px;
			width: 2em;
			border-radius: 2px;
			position: relative;
		}

		.nav-toggle-label span::before,
		.nav-toggle-label span::after
		{
			content: '';
			position: absolute;
		}

		.nav-toggle-label span::before
		{
			bottom: 7px;
		}

		.nav-toggle-label span::after
		{
			top: 7px;
		}

	.nav-toggle:checked ~ nav
	{
		transform: scale(1,1);
	}

	.nav-toggle:checked ~ nav a
	{
		opacity: 1;
		transition: opacity 250ms ease-in-out 250ms;
	}	

	nav
	{
		font-family: 'Work Sans', sans-serif;
		font-weight: 400;

		position: absolute;
		top : 100%;
		left: 0;

		text-align: left;

		background-color: white;
		width: 100%;
		transform: scale(1, 0);
		transform-origin: top;
		transition: transform 400ms ease-in-out;
	}

		nav ul
		{
			margin: 0;
			padding: 0;
			list-style: none;
		}

			nav li
			{
				margin-bottom: 1em;
				margin-left: 1em;
			}

		nav a
		{
			color : black;
			text-decoration: none;
			font-size: 1rem;
			text-transform: uppercase;
			opacity: 0;
			transition: opacity 150ms ease-in-out;
		}

		nav a:hover
		{
			
		}

@media screen and (min-width: 800px)
{
	.nav-toggle-label
	{
		display: none;
	}

	nav
	{
		all : unset;

		flex-grow: 1;

		padding: 0;
		margin: 0;

		display: flex;
		justify-content: space-between;
		align-items: center;
	}

		nav ul
		{
			width: 95%;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}

		nav li
		{
			margin : 1em;
		}

	nav a
	{
		opacity: 1;
		position: relative;
	}

	nav a::before
	{
		content: '';
		display: block;
		height: 3px;
		background : black;
		position: absolute;
		bottom: -0.75em;
		left: 0;
		right: 0;
		transform: scale(0, 1);
		transition: transform 250ms ease-in-out;
	}

	nav a:hover::before
	{
		transform: scale(1, 1);
	}

	h2
	{
		margin-top: 0;
		border-bottom: 0px;
	}
}

section
{
	padding-top: 20vh;
}

article
{
	width: 100%;
	min-height: 80vh;
	padding-bottom: 10vh;
}

	.flex
	{
		display: flex;
		flex-direction: column;
	}

	h2
	{
		flex-grow: 0;

	}

	.grow
	{
		flex-grow: 1;

		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.hide
	{
		display: none;
	}

/*------------ Article - Pub ------------*/

#pub .video
{
	overflow: hidden;
	width: 80%;
	height: 60vh;
	aspect-ratio: 1920 / 986;
	margin : auto;
	position: relative;
}

	#pub .video iframe
	{
		width: 100%;
		height: 100%;
		position: absolute;
	}

/*------------ Article - Kits ------------*/

#kits > div > div
{
	display: flex;
	gap: 2rem;
	flex-direction: row;
	flex-wrap: wrap;
}

	#kits > div > div > div
	{
		flex: 1 1 calc(50% - 1rem);
		min-width: 25ch;

		display: flex;
		flex-direction: column;

		text-align: center;
	}

		.images
		{
			flex-grow: 1;
			text-align: center;
		}
			.images img
			{
				width: 50%;
				height: auto;
			}

		.iframe_video
		{
			width: 75%;
			margin: auto;

			display: grid;
			place-items : center;
		}

		.iframe_video > div
		{
			width: 100%;
			height: 0;
			padding-bottom: 51.35%;

			position: relative;
		}

		.iframe_video iframe
		{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			border : 0px solid black;
			border-radius: 10px;
			
		}

/*------------ Article - Savoirplus ------------*/


#savoirplus > div > div
{
	display: flex;
	gap: 4rem;
	flex-direction: row;
	flex-wrap: wrap;
}

	#savoirplus > div > div > div
	{
		flex: 1 1 calc(50% - 2rem);
		min-width: 25ch;
		
	}

	#savoirplus h3
	{
		text-align: center;
	}

		#savoirplus > div > div > div img
		{
			width: 80%;
			border-radius: 10px;
			display: block;
			margin: auto;
		}

/*------------ Article - Achat ------------*/

#achat > div > div
{
	display: flex;
	gap : 6rem;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}

	.achat_secondcolumn
	{
		flex: 1 1 calc(70% - 3rem);
		min-width: 35ch;
	}

		.achat_secondcolumn  > div
		{
			width: 100%;
			min-height: 30vh;

			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
		}

			.achat_secondcolumn  > div > div
			{
				flex: 1 1 calc(50% - 1rem);
				min-width: 25ch;
			}

			.achat_secondcolumn  > div > div:nth-child(1)
			{
				flex-direction: column;
				flex-wrap: nowrap;
			}

				.achat_secondcolumn > div > div > div
				{
					flex-grow: 1;
					text-align: center;
				}

				.achat_secondcolumn > div > div > div > img
				{
					max-height: 25vh;
					width: auto;
					max-width: 100%;
				}

		.achat_secondcolumn h3
		{
			text-align: center;
		}

	.achat_firstcolumn
	{
		flex: 1 1 calc(30% - 3rem);
		min-width: 20ch;

		display: flex;
		gap : 4em;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: space-around;
	}

		.achat_firstcolumn div
		{
			text-align: center;
		}

		.achat_firstcolumn img
		{
			display: block;
			margin: auto;
			max-width: 80%;
		}
		
.buy_button
{
	cursor: pointer;

	display: block;
	width: 50%;
	margin: auto;
	padding: 1rem;
	
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: bold;

	border : 1px solid white;
  	outline: 1px solid;
 	outline-color: rgba(0, 0, 0, .5);
  	outline-offset: -1px;
  	transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);

} 

.buy_button:hover
{
	font-size: 1.2rem;
}

/*------------ Article - Compatibilite ------------*/

	article#compatibilite .liste_robots
	{
		display: grid;
		grid-gap: 1rem;
		grid-template-columns: repeat(auto-fit, minmax(25ch, 1fr));
	}

		article#compatibilite .liste_robots div
		{
			max-height: 30vh;

			display: flex;
			flex-direction: column;
			flex-wrap: nowrap;
			justify-content: center;
			text-align: center;
		}

		article#compatibilite .liste_robots div a
		{
			display: block;
			height: 80%;
			width: 100%;
		}

		article#compatibilite .liste_robots div a img
		{
			max-height: 100%;
			max-width: 100%;
			margin: auto;	
		}

			article#compatibilite .liste_robots div:hover
			{
	        	font-weight: bold;
			}

		article#compatibilite .liste_robots div span
		{
			height: 20%;
		}

/*------------ Article - Robots ------------*/

.grid-robots
{
	display: grid;
	grid-gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(25ch, 1fr));
}

.detail .grid-robots:nth-of-type(1) > div
{
	max-height: 40vh;
}

.detail .grid-robots:nth-of-type(2) > div
{
	max-height: 20vh;

	display: flex;
	flex-direction: column;
}
		.flex-compatible
		{
			flex-grow: 2;

			display: grid;
			grid-gap: 1rem;
			grid-template-columns: repeat(auto-fit, minmax(1ch, 1fr));
			grid-template-rows: 1fr;
		}

		.flex-compatible > div
		{
			display: grid;
			place-items : center;
		}

		.flex-compatible div img
		{
			max-height: calc(20vh - 3rem);
			max-width: 100%;
		}

	.ajust
	{
		display: block;
		height: 80%;
		width: 100%;
		padding : 1rem;

		display: flex;
		justify-content: center;
	}

		.ajust img
		{
			max-height: 100%;
			max-width: 100%;
			margin: auto;
		}

	.text-center
	{
		text-align: center;
	}

	.boldred
	{
		font-weight: bold;
		color: red;
		font-size: 1.2em;
	}

/*------------ Article - Langage/Cycle ------------*/

.flex-langage
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}


	.flex-langage > div:nth-child(1)
	{
		flex : 1 1 30%;
		text-align: center;
	}

	.flex-langage > div:nth-child(1) img
	{
		height: 30vh;
		width: auto;
	}

.flex-robots
{
	flex : 1 1 60%;

	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

	.flex-robots div
	{
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: space-between;
		text-align: center;
	}

	.flex-robots div img
	{
		height: 30vh;
		width: auto;
	}

/*------------ Article - Compatibilite ------------*/

article#contact > div > div
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}

article#contact h3
{
	text-align: center;
}

	article#contact > div > div > div
	{
		flex : 1 1 50%;
		min-height: 30vh;
		min-width: 25ch;
	}

	article#contact > div > div > div:nth-child(1)
	{
		display: grid;
		place-items : center;
	}

	article#contact img
	{
		max-width: 50%;
		max-height: 30vh;
		width: auto;
	}


@media (orientation: portrait)
{
	#pub .video
	{
		width: 100%;
	}

	.achat_secondcolumn  > div
	{
		padding-bottom: 5rem;
	}

	article#contact img
	{
		max-width: 80%;
	}
}

/* ------ CGu -------*/

.cgu h2
{
	margin-top: 2rem;
	font-weight: bold;
}

.cgu
{
	padding-bottom: 2rem;
}