@charset "UTF-8";
/* CSS Document */

:root {
	--lightgrey: rgb(240 240 240);
	--darkgrey: rgb(34 34 34);
	--redHT: rgb(255 37 27);
	--spacing: 3vw;
}

html {
	scroll-behavior: smooth;
}


#informations, #processus {
	scroll-margin-top: 150px;
}

.sib-form {
	padding: 32px 0 0 8px;
}
#sib-container {
	background-color: transparent;
	padding: 0;
}
.sib-form .entry__field,
input {
	color: var(--darkgrey);
}

.sib-form-message-panel--active {
	display: block;
	margin: 0 auto;
}

body {
	margin: 0;
	font-family: seravek-web, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1rem;
	background-color: var(--lightgrey);
}

nav a {
	display: inline-block;
	padding: .5rem var(--spacing);
	color: var(--darkgrey);
	text-decoration: none;
}
nav a:hover {
	color: var(--redHT);
	text-decoration: none;
}

h1 {
	font-weight: 700;
	font-size: 10vw;
	line-height: 10vw;
	margin: var(--spacing) 0;
}
h2 {
	font-weight: 700;
	font-size: 7.5vw;
	line-height: 7.5vw;
	margin: var(--spacing) 0;
}
h2.second {
	margin: var(--spacing) auto;
	text-align: center;
	/*position: sticky;
	top: 15%;*/
}
h3 {
	font-weight: 400;
	font-size: 5vw;
	line-height: 5vw;
	margin: var(--spacing) 0;
}
i.hacktrap {
	font-weight: 700;
}
.red {
	color: var(--redHT);
}
.responsive {
	width: 100%;
	height: auto;
}
.spacing {
	padding: .5rem var(--spacing);
}
section.infos {
	display: flex;
	flex-direction: column;
	padding: var(--spacing);
	background-image: linear-gradient(rgba(255, 255, 255, 1), var(--lightgrey));
}

header {
	position: sticky;
	top:0;
	background-color: white;
	box-shadow: 0px 0px 15px -5px rgb(0 0 0 / 0.5);
	padding: 1rem  var(--spacing);
	display: flex;
	justify-content: space-between;
	align-items: center;
	/*transform-style: preserve-3d;*/
	z-index: 10;
}
header img {
	max-height: 40px;
	width: auto;
}

hr {
	border: none;
	border-top: 10px dotted var(--darkgrey);
	width: 100%;
	margin-top: 50px;
}
hr.vertical {
	border: none;
	border-left: 10px dotted var(--darkgrey);
	width: auto;
	height: 10vh;
	margin: 2rem 0 2rem 48%;
}
hr.vertical-footer {
	border: none;
	border-left: 10px dotted var(--darkgrey);
	width: auto;
	height: 10vh;
	margin: auto 48%;
}
.align-center {
	text-align: center;
}
.process, .process-bottom {
	padding: var(--spacing);
}
.hacker {
	margin:0 auto;
}
.icon {
	max-width: 300px;
}
.icon-small {
	max-width: 70px;
}
.hacker-activity {
	position: relative;
}
.hacker-activity hr {
	margin-top: 10%;
	margin-bottom: 10%;
}
.hacker-activity-icon {
	position: absolute;
	top: 50%;
	left: 50%;
  transform: translate(-50%, -50%);
}
.detection {
	display:flex;
	align-items: center;
	justify-content: center;
}
.investigation {
	width: 100%;
}

.hacker-catcher hr {
	margin-bottom: var(--spacing);
}
.footer {
	background-color: var(--darkgrey);
	padding: var(--spacing);
	color: white;
	height: 100%;
	transform-style: preserve-3d;
	transform: translateZ(0px);
}
.copyright {
	font-size: .85rem;
	padding: .5rem var(--spacing);
}
@media screen and (max-width: 400px) {

	.sib-form {
		padding: 0;
	}
	#sib-container {
		padding: 0;
	}
}
@media screen and (max-width: 500px) {

	.sib-form {
		padding: 0;
	}
	#sib-container {
		padding: 0;
	}
}	

@media screen and (max-width: 960px) {
	.m-none {
		display: none; /*dont show on mobille */
	}
}

@media screen and (min-width: 960px) {
	h1 {
		font-size: 5vw;
		line-height: 5vw;
		margin: 2vw 0;
	}
	h2 {
		font-size: 4vw;
		line-height: 4vw;
		margin: 2vw 0;
	}
	
	h3 {
		font-size: 1.5rem;
		line-height: 1.5rem;
		margin: 2vw 0;
	}
	header img {
	max-height: 60px;
	}
	section.infos {
		flex-direction: row;
	}

	hr.vertical{
		margin-left: 60%;
	}
	hr.vertical-footer {
		margin-left: 50%;
	}
	.moduleImg {
		min-width: 50vw;
		max-width: 100%;
	}
	.process {
		display: grid;
		grid-template-columns: 32vw auto;
		gap: var(--spacing);
		padding: var(--spacing);
	}
	.process-bottom {
		padding: 0 var(--spacing);
	}
	.blocked {
		display: grid;
		grid-template-columns: 32vw auto;
	}
	.investigation {
		display: grid;
		grid-template-columns: auto 18vw;
		width: 48vw;
	}
	.blocked .icon-small {
		margin-top: 1rem;
	}
	.hacker {
		position: sticky;
		top: 200px;
		margin: 0 auto;
	}
	
	.icon {
		max-width: 350px;
	}
	
	.hacker-activity hr {
		margin-top: 25%;
		margin-bottom: 25%;
	}
	.hacker-catcher {
		margin-top: -10vh;
		padding-bottom: var(--spacing);
	}
	.block {
		display: grid;
		grid-template-columns: 10vw auto;
		gap: 2rem;
	}
	.columns {
		display: flex;
	}
	.offre-service {
		padding-right: 2vw;
	}
}