@import "font/roboto.css";
@import "font/round.css";
@import "font/fontello.css";
:root {
  --bg-bleu: rgb(101, 186, 193);
  --bg-orange: rgb(229, 137, 57);
  --bg-parcours: rgb(241, 241, 239);
}

body {
  font-family: roboto, sans-serif;
}
/* liens  */
a:link, a:visited{
  text-decoration: none;
  position: relative;
	display: inline-block;
	outline: none;
  color: black;
  line-height: .85em;
}
a.selectionne{
  text-decoration: none;
  color: var(--bg-orange);
}

a {
	overflow: hidden;
}

a::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(149,165,166,0.4);
	content: '';
	transition: transform 0.3s;
	transform: scaleY(0.618) translateX(-100%);
}
.brand a::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(149,165,166,0.0);
	content: '';
	transition: transform 0.3s;
	transform: scaleY(0.618) translateX(-100%);
}
a:hover::before,
a:focus::before {
	transform: scaleY(0.618) translateX(0);
}
.url a {
  overflow: visible;
}
.url a::before {
	position: absolute;
	top: -50%;
	left: -50%;
	padding: 1.8em 1em 1em 3.7em;
	width: 200%;
	height: 3em;
	background: #fff url(../img/link.svg) no-repeat -3em 50%;
	background-size: auto 40%;
	color:var(--bg-bleu);
	content: attr(href);
	white-space: pre-wrap;
	word-break: break-all;
	font-size: 110%;
	line-height: 1.2;
	opacity: 0.02;
	transition: opacity 0.3s, color 0.3s, transform 0.3s, background-position 0.2s;
	transform: scale(0.3);
	pointer-events: auto;
  z-index: 10;
}
.url a:hover::before,
.url a:focus::before {
	background-position: 1em 50%;
  z-index: 100;
	color: #404d5b;
	opacity: .9;
	transition-delay: 0s, 0s, 0s, 0.1s;
	transform: scale(1) translateY(-75%);
}
footer a:link, footer i a:link,
footer a:visited, footer i a:visited{
  color:white;
}

/* fin liens  */
main{
  max-width: 100em;
}
mark{
  background-color: transparent;
}
section{
  margin: .2em .4em;
}
hr{clear:both;}

.masquee{
  width : 0.063em;
  height : 0.063em;
  padding : 0;
  margin : -0.063em;
  overflow : hidden;
  clip : rect (0 0 0 0);
  border: 0;
  }
.brand{
  position: sticky;
  top: 0;
  background-color: rgba(255, 255, 255, 0.6);
  background-color: rgba(255 255 255 /.6);
}

.brand mark{
  font-family: 'typo_round_thin_demoregular', sans-serif;
  font-size: 3.5em;
  vertical-align: middle;
  display: inline-block;
  margin-top: -1.5em;
}
section.headsticky{
  width: 100vw;
  margin: 0;
  padding: 0 4em;
  z-index: 20;
  position:fixed;
  top:0;
  left:0;
  background-color: rgba(255, 255, 255,.8);
  background-color: rgba(255 255 255 /.8);
}
.headsticky mark{
  margin: 0 0 .7em 0;
  font-size: 2em;
}

.headsticky object{
  width: 120px;
  margin-left: 2em;
}
.titre{
  color: rgb(255, 255, 255);
  margin: 0 .2em ;
}
.titre mark{
  color: rgb(255, 255, 255);
}
.premier ul li, .brand ul li, footer ul li{
  display: inline;
}
.premier ul{
  padding: 0 10.3em;
}
.premier{
  border-bottom: #dadada 0.063em solid;
  margin: 0;
}
.brand ul {
  text-align: right;
  padding: .5em 6em;
  float: right;
}
.headsticky ul{
  padding: .5em 12em .5em 1em;
}
.brand ul li{
  padding:0 .5em;
}
footer{
  background-color: rgb(229, 137, 57);
  background-color: var(--bg-orange);
  text-align: center;
  clear: both;
  padding: .5em;
  font-size: .8em;
}
footer ul{
    margin: 0;
}

h2{
  font-weight: normal;
  font-family: roboto, sans-serif;
  color:var(--bg-bleu);
  margin-top: 1.5em;
  font-size:2.813em;
}
.raoul-parcours{
  background-color: rgb(241, 241, 239);
  background-color: var(--bg-parcours);
  margin-top: 0.5em;
  padding: 2.5em;
}
aside.raoul{
  background-image: url("https://media.licdn.com/dms/image/C4D03AQHEHPzLzCF9QQ/profile-displayphoto-shrink_800_800/0?e=1535587200&v=beta&t=uRgESjKjuYpWihTrm_10Z8jOtwCkEj9EqYZwyow548s");
  border-radius: 50%;
  width : 8em;
  height: 8em ;
  background-size : cover;
  float: left;
  margin-left: 3em;
}
.veille{
  background: linear-gradient(90deg,
  rgb(101, 186, 193) 0%,
  rgb(229, 137, 57) 100%);
  background: linear-gradient(90deg,
  var(--bg-bleu) 0%,
  var(--bg-orange) 100%);
  margin: .2em 0;

}
.veille h1{
  color:white;
  font-weight: normal;
}
dd a h3{
  margin: 0;
  color: var(--bg-bleu);
}
.qr{
  background-color: rgb(67,125,130);
  background-image: url("../img/fond-qr.jpg");
  background-size: cover;
  margin: .2em 0;
  color:white;
}

form div{
display: flex;
justify-content: space-between;
padding-bottom: 2em;
}
.cont-link{
  text-align: center;
  padding: 3em;
}
.cont-link a i {
  display: block;
  background: linear-gradient(135deg,
  var(--bg-bleu) 0%,
  var(--bg-orange) 100%);
  padding: .3em ;
  border-radius: 50%;
  font-size: 3em;
  color:white;

}
.contact p{
  text-align: center;
}
.contact p:first-child{
    font-family: 'typo_round_thin_demoregular', sans-serif;
    text-transform: uppercase;
    font-size: 1.6em;
    letter-spacing: 4q;
}
/* formulaire */
input[type='submit']{
  background-color: var(--bg-bleu);
  color:white;
  text-transform: uppercase;
  width: 22%;
  margin: 2em 0;
}
input[required]{
  border-right: solid .3em var(--bg-bleu);
}
textarea{
  width:78%;
  padding: .4em;
}
@element 'input' and (min-characters: 1) {
  $parent:before {
    content: 'eval("placeholder")';
    position: absolute;
    margin-top:-1.4em;
    left: 48%;
  }
}
/* fin form */
/* grand */
@media screen and (min-width:48em) {
  section{
    margin: .2em 4em;
    }
  .premier{
    text-align: right;
  }
  .titre{
    background-image: url("../img/bandeau.jpg");
    background-size : cover;
    min-height :12.500em;
    height:70vh;
  }
  .titre h1{
    padding-top: 6%;
    margin-left: 48%;
    font-size:3em;
    font-family: robotobold, sans-serif;
    font-weight: normal;
  }
  .titre h1 mark{
    font-weight: normal;
    font-family: roboto, sans-serif;
  }
  article{
    margin: 0 8.5em;
  }
  .mission img{
    float:left;
    margin:0 1.4em 3em 1.4em;
  }
  .mission div ul ul li  mark{
    color: var(--bg-bleu);
  }
  .mission div ul ul li {
    list-style-type : none;
  }
  .mission div ul ul li::before {
    content:"\2022 ";
    color: var(--bg-orange);
  }

  .parcours h2{
    float: left;
    margin-left: 3.3em;
    margin-top: -.4em;
  }
  .parcours p{
    margin-left: 23.4em;
  }
  .veille h1, .contact h1{
    margin :.6em 0 .6em 10.5em;
    padding: .7em 0;
  }
  dl{
    padding :0 0 0 5.5em;
  }
  dt{
    float :left;
    margin: .3em .3em .3em 7em;
  }
  dd{
    /* float :left; */
    margin: .3em 0 .3em 1.2em;
  }
  .qr{
    padding: .2em 2em .2em 20em;
  }
  form{
    padding :1em 0 1em 12.5em;
  }
  form div{
    width: calc(100% - 12.5em);
    margin: .8em 0;
  }
  input{
    width:45%;
    padding: .4em;
  }
}
/* petit */
@media screen and (max-width:48em) {
  .titre{
    background: linear-gradient(90deg,
    rgb(101, 186, 193) 0%,
    rgb(229, 137, 57) 100%);
    background: linear-gradient(90deg,
    var(--bg-bleu) 0%,
    var(--bg-orange) 100%);
  }
  .brand ul {
    padding: .5em .6em;
  }
  .headsticky ul{
    padding: .5em .2em;
  }
  .premier{
    text-align:left;
  }
  .premier ul{
      padding: 0 1em;
  }
  .mission img{
    display: none;
  }
  a.selectionne{
    text-shadow: black 0.04em 0.04em 0.01em;
  }
  article{
    margin: 0 .5em;
  }
  .parcours h2{
    text-align: center;
  }
  .parcours p{
    margin-left: .3em;
  }
  aside.raoul{
    float: none;
    margin-left: auto;
    margin-right: auto;
  }
  .raoul-parcours{
    margin-top: 0.5em;
    padding: 1.5em;
  }
  .parcours h2{
    margin-top: 0.1em;
  }
  .veille h1{
    margin :.6em 0 .6em .6em;
  }
  dl{
    padding :.5em;
  }
  dt{
    float :left;
    margin: .3em .3em .3em 2em;
  }
  dd{
    float :left;
    margin: .3em 0 .3em 1.2em;
  }
  .qr{
    background-color: rgb(67,125,130);
    background-image: url();
    padding: .2em .2em;
  }
  form{
    padding :1em 0 1em 1em;
  }
  form div{
  display: flex;
  flex-direction: column;
  }
  form div{
    width: calc(100% - 1em);
  }
  input{
    width:85%;
    padding: .4em;
    margin: .8em 0;
  }
}

@media print {
a[href^="http"]:not([href*="arachidetech.eu"]):after {
    content: " (" attr(href) ")";
}