/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,
abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,
strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,
legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,
embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,
summary,time,mark,audio,video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
  display: block;
}

body {
  line-height: 1;
}

ol,ul {
  list-style: none;
}

blockquote,q {
  quotes: none;
}

blockquote:before,blockquote:after,
q:before,q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

html {
  box-sizing: border-box;
}

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

body {
  color: #243836;
  font-size:1.5em;
  font-family: "Avenir Next Cyr", sans-serif;

}

img {
  width:100%;
}

.block {
  margin: 2% 0;
  padding: 2% 12%;
}
.block:last-of-type {
  margin-bottom: 0;
}

.block-dark {
  background-color: #243836;
  color: #ce921e;
}
.block-dark a {
  color:#ce921e;

  &:hover {
    color: #fff;
  }
}

h1 {
  padding-left: 24%;
  padding-right: 24%;
}

h2 {
  text-align: center;
  font-size: 3vw;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 0.3em;
}

h2 > span {
  display:inline-block;
  vertical-align: middle;
}

h2 > span.separator {
  width: 0.45em;
  height: 0.45em;
  margin:0 1em;
  background-color: #ce921e;
  border-radius: 50%;
}

h3 {
  text-align: center;
  font-size: 2vw;
  font-style: italic;
}
h3.jaune {
  color:#ce921e;
}
h3.blanc {
  color: #fff;
}

video {
  width: 100%;
}
/*
#presentation {
  display: grid;
  grid-template-columns: 33% auto;
  gap: 1em;
  align-items: center;

  text-align: justify;
}

#presentation > img {
  border-radius: 5%;
}
*/
/*
#presentation {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  align-items: center;

  text-align: justify;
  place-content: center;
}
#presentation > img {
  flex: 0.3 1 0;
  border-radius: 1vw;
  max-height: 12em;
  width: initial;
}
#presentation > div {
  flex: 1 1 20em;
}

#presentation > div > div {
  margin: 1em 0;
}
*/
#presentation {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1em;
  align-items: center;

  text-align: justify;
  place-content: center;
}

#presentation>img {
  flex: 1 1 12em;
  border-radius: 1vw;
  height: auto;
  width: 100%;
}

#presentation>div {
  flex: 20 1 20em;
}

#presentation>div>div {
  margin: 1em 0;
}
#contact {
  text-align: center;
  line-height: 1.7em;
}
#contact div:nth-child(2n) {
  color:#fff;
  & a {
    color:#fff;
  }
  & a:hover {
    color: #ce921e;
  }
}
#contact div:nth-child(2n+1) {
  color: #ce921e;
}
#logos_clients {
  text-align: center;

  border: 3px solid #ce921e;
  border-radius: 2em;

  padding: 1em;
}

#logos_clients .logos_titre {
  margin: 1em 0;
  font-size: 1.5em;
  font-weight: bold;
}

#logos_clients .logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  margin: 1em 0;
}

#logos_clients .logos img {
  max-width: 6em;
}

#photo_boule img {
  border-radius: 10px;
}

#mentions_legales {
  text-align: justify;
  font-size: 0.7em;
  line-height: 1.3em;
  padding: 0.3em;
}

#mentions_legales span {
  display: block;
}

#mentions_legales .titre {
  margin-top: 0.5em;
  color: #fff;
}

#socials {
  text-align: center;
}

#socials h3 {
  margin-bottom: 0.7em;
}

#social-links {
  display: flex;
  flex-wrap: wrap;
  place-content: center;
  gap: 1em;
}

.social-link {
  display: inline-block;
  border: 1px solid #ce921e;
  border-radius: 1em;
  padding: 0.3em 1em;
  font-size: 0.7em;
  width: 10em;
}

.social-link img {
  width: 1em;
  height: auto;

  vertical-align: middle;
  margin-right: 0.7em;

  filter: invert(55%) sepia(89%) saturate(399%) hue-rotate(1deg) brightness(91%) contrast(95%);
}

.social-link a {
  text-decoration: none;
}

.social-link span {
  vertical-align: middle;
}

.social-link:hover {
  border-color: #fff;

  & a {
    color: #fff;
  }

  & img {
    filter: invert(91%) sepia(0%) saturate(7500%) hue-rotate(279deg) brightness(109%) contrast(111%);
  }
}


@media (max-width:70em) {
  .block {
    margin: 0;
    padding: 1em 0;
    width: 100%;
  }

  h1 {
    padding: 0.7em;
  }

  #video {
    background-color: initial;
  }
  video {
    border-radius: 0;
  }

  #presentation, #references {
    padding: 1em;
  }

  #photo_boule img {
    border-radius: 0;
  }
}

@media (max-width: 60em) {
  h2 {
    font-size: 5vw;
  }
  h3 {
    font-size: 3vw;
  }
  #logos_clients .logos img {
    max-width: 15vw;
  }
}