@charset "utf-8";

/* Layout */

* {
  box-sizing: border-box; /* pour maîtriser width et flex-basis */
  margin: 0;
  padding: 0;
}

html, body {
  font-size: 100%;
}

html {
  display: -webkit-flex;
  display: -ms-flex;
  display: -moz-flex;
  display: -o-flex;
  display: -khtml-flex;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  -moz-flex-direction: column;
  -o-flex-direction: column;
  -khtml-flex-direction: column;
  flex-direction: column; /* correction bug IE de min-height non appliqué à body */
}

body {
  display: -webkit-flex;
  display: -ms-flex;
  display: -moz-flex;
  display: -o-flex;
  display: -khtml-flex;
  display: flex; /* crée un contexte flex pour ses enfants */
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  -moz-flex-direction: column;
  -o-flex-direction: column;
  -khtml-flex-direction: column;
  flex-direction: column; /* affichage vertical */
  min-height: 100vh; /* toute la hauteur du viewport */
  background: #000 url('/img/ADI-assistance-depannage-informatique-gournay-en-bray-76220-bg.webp') no-repeat fixed top; /* noir */
  background-size: cover;
  /* max-height: 100%; */
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

footer {
  min-height: 6.25em; /* 100px */
  display: -webkit-flex;
  display: -ms-flex;
  display: -moz-flex;
  display: -o-flex;
  display: -khtml-flex;
  display: flex;
  -webkit-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  -moz-flex-flow: column nowrap;
  -o-flex-flow: column nowrap;
  -khtml-flex-flow: column nowrap;
  flex-flow: column nowrap;
  -webkit-justify-content: space-around;
  -ms-justify-content: space-around;
  -moz-justify-content: space-around;
  -o-justify-content: space-around;
  -khtml-justify-content: space-around;
  justify-content:space-around;
  -webkit-align-content: center;
  -ms-align-content: center;
  -moz-align-content: center;
  -o-align-content: center;
  -khtml-align-content: center;
  align-content: center;
}

	/* font-family: "Times New Roman", Times, "Liberation Serif", FreeSerif, serif;
	font-family: Georgia, "DejaVu Serif", Norasi, serif;
	font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-family: "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", "Luxi Sans", sans-serif;
	font-family: Tahoma, Geneva, Kalimati, sans-serif;
	font-family: Verdana, "DejaVu Sans", "Bitstream Vera Sans", Geneva, sans-serif;
	font-family: Impact, "Arial Black", sans-serif;
	font-family: "Courier New", Courier, "Liberation Mono", monospace;
	font-family: Monaco, "DejaVu Sans Mono", "Lucida Console", "Andale Mono", monospace; */

h1 {
  text-align: center;
  font-family: Impact, "Arial Black", sans-serif;
  color: #FC3; /* Jaune */
  font-size: 500%;
  margin: .1em 0 1.2em 0; /* 16px 19px */
}

h2 {
  font-family: "Courier New", Courier, "Liberation Mono", monospace;
  font-size: 2.5em; /* 40px */
  color: #FC3; /* Jaune */
}

h3 {
  font-family: Georgia, "DejaVu Serif", Norasi, serif;
  font-size: 1.25em; /* 20px */  
  color: #FC3; /* Jaune */
}

img.logo {
  display: block;
  max-width: 15em; /* 240px */
  max-height: 15em;
  margin-left: auto;
  margin-right: auto;
}

img.acc {
  display: block;
  max-width: 100%; /* toute la largeur du viewport */
  margin-left: auto;
  margin-right: auto;
}

aside {
  -webkit-flex: 0 1 40%;
  -ms-flex: 0 1 40%;
  -moz-flex: 0 1 40%;
  -o-flex: 0 1 40%;
  -khtml-flex: 0 1 40%;
  flex: 0 1 40%; /* occupe la hauteur restante */
}

article {
  -webkit-flex: 1 1 100%;
  -ms-flex: 1 1 100%;
  -moz-flex: 1 1 100%;
  -o-flex: 1 1 100%;
  -khtml-flex: 1 1 100%;
  flex: 1 1 100%; /* occupe la largeur restante */
}

nav {
  order: -1; /* nav s'affiche en premier */
}

article iframe {
  width: 100%;
  min-height: 37.5em; /* 600px */
  border: 0;
}

.flexi {
  display: -webkit-flex;
  display: -ms-flex;
  display: -moz-flex;
  display: -o-flex;
  display: -khtml-flex;
  display: flex;
  -webkit-flex-flow:row wrap;
  -ms-flex-flow:row wrap;
  -moz-flex-flow:row wrap;
  -o-flex-flow:row wrap;
  -khtml-flex-flow:row wrap;
  flex-flow:row wrap;
  -webkit-justify-content: space-around;
  -ms-justify-content: space-around;
  -moz-justify-content: space-around;
  -o-justify-content: space-around;
  -khtml-justify-content: space-around;
  justify-content: space-around;
  margin: .5em 0 .5em 0;  /* 8px */
}

.wrapper {
  -webkit-flex: 1 1 50%;
  -ms-flex: 1 1 50%;
  -moz-flex: 1 1 50%;
  -o-flex: 1 1 50%;
  -khtml-flex: 1 1 50%;
  flex: 1 1 50%; /* occupe la hauteur restante */
  display: -webkit-flex;
  display: -ms-flex;
  display: -moz-flex;
  display: -o-flex;
  display: -khtml-flex;
  display: flex; /* crée un contexte flex pour ses enfants */
}

.agr {
  font-size: 350%
}

.logo {
  position: relative;
  float: left;
}

.center {
  text-align: center;
}

p span.right {
  float: right;
  clear: both;
}

@media (max-width: 850px) { /* Responsive (fenêtres de moins de 850px) */

.wrapper {
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  -moz-flex-direction: column;
  -o-flex-direction: column;
  -khtml-flex-direction: column;
  flex-direction: column; /* affichage vertical */
}

nav,
aside {
  width: auto; /* pour écraser la valeur 10em */
}

nav,
aside,
article {
  -webkit-flex-basis: auto;
  -ms-flex-basis: auto;
  -moz-flex-basis: auto;
  -o-flex-basis: auto;
  -khtml-flex-basis: auto;
  flex-basis: auto; /* pour écraser la valeur 0, due au flex: 1 */
}

nav {
  order: 0; /* nav reprend sa place */
}

.hide_mobile {
  display:none !important;
}
}

@media (max-width: 640px) { /* Responsive (fenêtres de moins de 640px) */

/* .wrapper {
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  -moz-flex-direction: column;
  -o-flex-direction: column;
  -khtml-flex-direction: column;
  flex-direction: column; /* affichage vertical */
/* }

nav,
aside {
  width: auto; /* pour écraser la valeur 10em */
/* } */

img.acc {
  max-width: 100%; /* toute la largeur du viewport */
  min-height:0;
  min-width:0;
}

img.logo {
  max-width: 100vh; /* 160px */
  /* max-height: 10em; */
  float: none;
}

/* nav,
aside,
article {
  -webkit-flex-basis: auto;
  -ms-flex-basis: auto;
  -moz-flex-basis: auto;
  -o-flex-basis: auto;
  -khtml-flex-basis: auto;
  flex-basis: auto; /* pour écraser la valeur 0, due au flex: 1
} */

article {
  padding: 1em; /* 16px */
}

/* nav {
  order: 0; /* nav reprend sa place
} */

h1 {
  font-size:2.1em; /* 33px */
}

h2 {
  font-size:1.2em; /* 19px */
}

.agr {
  font-size: 250%
}

/* .hide_mobile {
  display:none !important;
} */
}

@media (max-width: 300px) { /* Responsive (fenêtres de moins de 300px) */

.agr {
  font-size: 200%
}
}

/* FontAwesome */

.icon:before {
    display: inline-block;
    margin-right: .5em;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
}

/* Decoration */

.jaune {
  color: #FC3; /* jaune */
}

.red {
  font-family: Impact, "Arial Black", sans-serif;
  color:#F00; /* rouge */
}

.right {
  text-align: right;
}

.transp {
  background: #666; /* gris */
  background: rgba(102, 102, 102, .5);
  min-height: 35em; /* 560px */
}

.bord {
  margin: .25em; /* 4px */
  border: .375em solid #04F; /* bleu */
  border-radius: .625em; /* 10px */
  padding: .625em; /* 10px */
  background: #FFF; /* blanc */
  background: rgba(255, 255, 255, .7);
}

li {
  text-align:center;
}

a:link {
  text-decoration:none;
}

aside, article {
  margin: .6em; /* 9px */
  padding: .6em; /* 9px */
  border-radius: .625em; /* 10px */
}

aside {
  background: #666; /* gris */
  background: rgba(102, 102, 102, .5);
}

article {
  background: #666; /* gris */
}

/* footer {
  background: #3AA;
  background: rgba(51, 170, 170, .7);
} */ /* turquoise */

footer {
  background: #04F; /* bleu */
  background: rgba(0, 68, 255, .7); /* bleu */
}

.contournoir {
  text-shadow:
  #000 1px 1px 1px,
  #000 -1px 1px 1px,
  #000 -1px -1px 1px,
  #000 1px -1px 1px;
}

/* #x3 {
  font-size: 350%
} */

#menu {
  margin: .1em; /* 1px */
}

#menu li {
  display: inline;
  list-style: none outside none;
  margin: .1em; /* 1px */
  font-size: 1em; /* 16px */
}

#menu li a {
  display: inline-block;
  background: #FFF; /* blanc */
  background: rgba(255, 255, 255, .7);
  width: 9.4em; /* 150px */
  padding: 1.25em 0 1.25em 0; /* 20px */
  margin: .3em 0 .3em 0; /* 4px */
  color: #000; /* noir */
  border-radius: .625em; /* 10px */
}

#menu li a:hover {
  background-color: #FC3; /* jaune */
}

#soft li {
  list-style: none outside none;
  margin: 1em 0 1em 0;
}

/* lien noir */
/* #soft li a {
 color: #000;
} */