/*/////////////////VIEWPORT//////////////////*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background:white;
}

/* Conteneur plein écran */
.container {
  position: relative;
  width: 100vw;
  height: 100vh;
  padding: 20px; /* espace intérieur = effet cadre */
}

/* Cadre blanc */
.container::before {
  content: "";
  position: absolute;
  inset: 20px;
  border: 2px solid white;
  pointer-events: none;
  z-index: 3;
	position: fixed;
}

.container-mask {
  position: relative;
  width: 100vw;
  height: 100vh;
  padding: 20px;       /* cadre blanc ou noir */
  overflow: hidden;    /* masque tout ce qui dépasse */
}
.containerb {
  width: 100%;
   height: 100%;
   overflow-y: scroll;  /* scroll toujours actif */
   padding: 20px;
   box-sizing: border-box;
   scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
}
.containerb::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

/* Cadre blanc */
.containerb::before {
  content: "";
  position: absolute;
  inset: 20px;
  border: 2px solid black;
  pointer-events: none;
  z-index: 3;
	position: fixed;
}

/* Image plein écran */
.hero {
  position: absolute;
  inset: 0;
  background: url("img/home.jpg") center/cover no-repeat;
  z-index: 1;
}

/* Header */
.header {
  position: fixed;
  top: 20px;
  left: 20px;
  right: 20px;
  padding: 2%;
  display: flex;
  justify-content: space-between;
  align-items: center;
	font-family: "Roboto Mono", monospace;
	  font-optical-sizing: auto;
	  font-weight: 800;
	  font-style: normal;
  z-index: 9999;
  font-size: 0.9em;
}

/* Logo */
.logo {
width:10%;
}

/* Menu */
.nav a {
  margin-left: 30px;
  text-decoration: none;
  color: white;

  letter-spacing: 2px;
	z-index:3000;
}

.navb a {
  margin-left: 30px;
  text-decoration: none;
  color: black;

  letter-spacing: 2px;
}

.slogan {
	position:absolute;
	z-index: 1000;
	font-family: "Roboto Mono", monospace;
	  font-optical-sizing: auto;
	  font-weight: 400;
		color: white;
		width:100%;
		align-items: center;
		padding: 25%;
		align-content: center;
		text-align: center;
}

.first {
	width:100%;
	padding: 5%;
  margin-top: 0%;
  font-family: "Roboto Mono", monospace;
    font-optical-sizing: auto;
    font-weight: 400;
    font-size: 1em;
}

.text {
	font-family: "Roboto Mono", monospace;
	  font-optical-sizing: auto;
	  font-weight: 400;
		width:65%;
		padding-right: 2%;
		margin-left: auto;
		margin-bottom: 5%;
    font-size: 1em;
}

.soustexte {
  font-weight: 200;
  font-size: 0.8em;
}

.box {
  display: inline-block;
  width: 49%;
	background:white;
	padding: 2%;
	font-family: "Roboto Mono", monospace;
	  font-optical-sizing: auto;
	  font-weight: 400;
    font-size: 1em;
}

.boxa {
  display: inline-block;
  width: 49%;
	background:white;
	padding: 2%;
	font-family: "Roboto Mono", monospace;
	  font-optical-sizing: auto;
	  font-weight: 400;
    font-size: 0.7em;
}

.contact {
	width:100%;
	padding: 5%;
	font-family: "Roboto Mono", monospace;
	  font-optical-sizing: auto;
	  font-weight: 400;
		text-align: center;
    font-size: 1em;
}

.burger {
  display: none;
   flex-direction: column;
   cursor: pointer;
   position: relative;
   z-index: 10000;
}

.navmobil{
display: none;
font-family: "Roboto Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 400;
  text-align: center;
}



	/*/////////////////IPHONE//////////////////*/

	@media only screen and (max-width: 700px) {

    /* Logo */
    .logo {
    width:30%;
    }

    /* Burger blanc par défaut (home) */
    .home .burger span {
      background: white;
    }

    /* Burger noir sur pages fond clair */
    .light .burger span {
      background: black;
    }

    .burger {
  display: flex;
}

.burger span {
  width: 25px;
  height: 3px;

  margin: 4px 0;
}

.navmobil {
  display: flex;
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100vh;
  background: white;
  transition: 0.3s;
  padding-top: 80px;
  font-family: "Roboto Mono", monospace;
    font-optical-sizing: auto;
    font-weight: 400;
    text-align: center;
    justify-content: center;   /* centre horizontal */
  align-items: center;
}

body.menu-open .burger span {
  background: black;
}

body.menu-open .burger span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

body.menu-open .burger span:nth-child(2) {
  opacity: 0;
}

body.menu-open .burger span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

.burger span {
  transition: 0.3s;
}

.navmobil ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "Roboto Mono", monospace;
    font-optical-sizing: auto;
    font-weight: 400;
    text-align: center;
    list-style: none;
}

.navmobil a {
  text-decoration: none;
  color: black;
  font-size: 3rem;
  letter-spacing: 3px;
  font-family: "Roboto Mono", monospace;
}

.navmobil.active {
  right: 0;
}

.navmobil.active ~ .burger span {
  background: black;
}

.nav {display: none;}
.navb {display: none;}


.slogan {
	position:absolute;
	z-index: 1000;
	font-family: "Roboto Mono", monospace;
	  font-optical-sizing: auto;
	  font-weight: 400;
		color: white;
		width:100%;
		align-items: center;
		padding: 25%;
		align-content: center;
		text-align: center;
    margin-top: 50%;
}

.first {
	width:100%;
	padding: 5%;
  margin-top: 20%;
  font-size: 0.6em;
}

.text {
	font-family: "Roboto Mono", monospace;
	  font-optical-sizing: auto;
	  font-weight: 400;
		width:65%;
		padding-right: 2%;
		margin-left: auto;
		margin-bottom: 5%;
    font-size: 0.6em;
}

.box {
  display: inline-block;
  width: 49%;
	background:white;
	padding: 2%;
	font-family: "Roboto Mono", monospace;
	  font-optical-sizing: auto;
	  font-weight: 600;
    font-size: 0.6em;
}

.boxa {
  display: inline-block;
  width: 100%;
	background:white;
	padding: 2%;
	font-family: "Roboto Mono", monospace;
	  font-optical-sizing: auto;
	  font-weight: 400;
    font-size: 0.6em;
}

.contact {
	width:100%;
	padding: 5%;
	font-family: "Roboto Mono", monospace;
	  font-optical-sizing: auto;
	  font-weight: 400;
		text-align: center;
    font-size: 0.8em;
}

}