:root {
  font-size: 62.5%;
}

html {
  scroll-behavior: smooth;
  transition: all .5s ease;
}

body {
  width: 100%;
  height: 100%;
  font-family: 'Poppins', sans-serif;
  font-size: 1.6rem;
  color: #2a2d2e;
  overflow-x: hidden;
}

html {
  width: 100%;
  height: 100%;
}

@font-face {
  font-family: 'Beauty';
  src:
    local('Beauty'),
    url('/media/font/Beauty.otf') format('opentype'),
    url('/media/font/Beauty.ttf') format('truetype');
}

body div.ppms_cm_consent_bar, body div.ppms_cm_consent_bar:focus, body div.ppms_cm_consent_bar:hover {
  width: calc(100% - 32px) !important;
  max-width: 320px !important;  
}

#typedtext {
  font-family: 'Beauty', sans-serif;
  font-size: 140px;
  font-weight: 580;
  color: #fff;
  margin-bottom: 6.5%;
  margin-right: 12%;
  line-height: 0.75;
  height: 200px;
}

button, button:focus {
  outline: 0;
}

a, a:hover, a:active, a:visited {
  color: inherit;
}

.text-underline {
  text-decoration: underline;
}

.no-style {
  font-size: inherit;
  font-weight: inherit;
}

ul, ol {
  margin-top: 1rem;
}

ol li {
  padding-left: 1rem;
  margin-bottom: 1rem;
}

ol:last-child, ul:last-child {
  margin-bottom: 0;
}

section {
  padding: 4% 0;
}

section section {
  padding: 2rem 0;
}

section section:last-of-type {
  padding-bottom: 0;
}

.container+section:first-of-type {
  padding-top: 0;
}

p:last-of-type:not(.break, [class^="title-"]) {
  margin-bottom: 0;
}

#home h1 {
  color: #b9252e;
  font-size: 4rem;
  font-weight: 700;
  margin: 0 0 4rem;
  line-height: 1.2;
}

#home h1 span {
  font-size: 2.5rem;
  margin-top: 1rem;
}

h1 {
  font-size: inherit;
  line-height: 3rem;
  font-weight: inherit;
  margin-bottom: 2rem;
}

.title-1, h2 {
  color: #2a2d2e;
  font-size: 3rem;
  font-weight: 700;
  margin: 2rem 0 4rem;
  line-height: 1.2;
}

h2.small-h2 {
  margin: 3rem 0 2rem 0;
  font-size: 3rem;
}

h3.small-h3 {
  margin: 2rem 0 1rem 0;
  font-size: 2rem;
}


h1 span, h2 span {
  color: #b90018;
  font-size: 2rem;
  font-weight: 500;
  display: block;
  line-height: 3rem;
}

header .title-1 {
  color: #fff;
  line-height: 1;
}

h3 {
  color: #2a2d2e;
  font-weight: 600;
  font-size: 3rem;
  margin: 40px 0 20px;
}

h3.barre {
  text-align: center;
  position: relative;
}

h3.barre>span {
  background-color: #fff;
  padding: 0 10px;
  position: relative;
}

h3.barre::before {
  content: '';
  background-color: #464849;
  border-bottom: 1px solid #dedfdf;
  height: 2px;
  display: block;
  left: 0;
  position: absolute;
  top: 50%;
  width: 100%;
}

.cta {
  display: inline-block;
  font-size: 1.2rem;
  color: #46494a;
  border: 1px solid #46494a;
  border-radius: 30px;
  margin: 15px 0 30px;
  text-transform: uppercase;
  padding: 20px 30px;
  font-weight: bold;
  line-height: normal;
}

.cta-icon-container {
  margin: 0 -.5rem;
}

.cta-icon {
  height: 6rem;
  width: 6rem;
  padding: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  font-size: 2rem;
  font-weight: bold;
  color: #46494a;
  border: 1px solid #46494a;
  margin: 2rem .5rem 0;
}

button.cta, input.cta {
  background: none;
}

.cta:hover, .cta:active, .cta:focus {
  color: #fff;
  text-decoration: none;
  background-color: #b9252e;
  border: 1px solid #b9252e;
}

.cta.white {
  border: 1px solid #fff;
  color: #fff;
}

.cta.white:hover, .cta.white:active, .cta.white:focus {
  border: 1px solid #b9252e;
}

.cta.red {
  border: 1px solid #fff;
  background-color: #fff;
  color: #46494a;
}

.cta.red:hover,
.cta.red:active,
.cta.red:focus,
#header-video-agence:hover,
#header-video-agence:active,
#header-video-agence:focus {
  border: 1px solid #b9252e;
  background-color: #b9252e;
  color: #fff;
}

.mob-bloc-cta .cta {
  margin: 0 5px 15px;
}

.font-weight-semi-bold {
  font-weight: 600 !important;
}

.font-size-14 {
  font-size: 1.4rem;
}

.bg-gray {
  background-color: #f4f2f4;
}

.bg-dark-gray {
  background-color: #282b30;
}

.color-red, a.color-red {
  color: #bc0004;
}

.color-dark-gray {
  color: #282b30;
}

.color-gray-small {
  font-size: 1.4rem;
  color: #72787a;
}

.py-5p {
  padding-top: 5%;
  padding-bottom: 5%;
}

.pb-5p {
  padding-bottom: 5%;
}

p {
  margin-bottom: 0rem;
  line-height: 3rem;
  margin-top: 1rem;
}

.z-index99 {
  z-index: 99;
}

.video-responsive { overflow:hidden; padding: 0 0 56.25% 0; margin-bottom: 20px; position:relative; height:0; width: 100%;}
.video-responsive iframe { left:0; top:0; height:100%; width:100%; position:absolute;}

.small-picto {
  max-height: 230px;
}

header.entete {
  /*
  background: url('/media/img/entete.jpg') no-repeat center center;
  background-size: cover;
  */
  background: #9d0014;
  height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0px;
  overflow: hidden;
}

header.entete .title-1 {
  margin: 0;
  text-align: center;
  text-shadow: 0 0 9px #000000;
}

#scrollTop {
  display: none;
  position: fixed;
  bottom: 15%;
  right: 5%;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 30px;
  padding: 6px 12px;
  line-height: 30px;
  z-index: 999;
}

#scrollTop:hover {
  background-color: rgba(155, 6, 15, 0.84);
}

.slick-1-slide .slick-dots>li {
  display: inline-block;
}

.slick-1-slide .slick-dots>li>button {
  font-size: 0;
  background-color: #c3c2c3;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 0 5px;
  padding: 0;
  border: 0;
  outline: none;
}

.slick-1-slide .slick-dots>li.slick-active>button {
  background-color: #bc0004;
}

.slick-1-slide .slick-slide, .slick-1-slide .slick-slide a, .slick-1-slide .slick-slide a:hover, .slick-1-slide .slick-slide a:active, .slick-1-slide .slick-slide a:visited {
  color: #72787a;
}

.slick-1-slide .slick-slide>div {
  font-size: 1.6rem;
  margin-bottom: 3rem;
}

.slick-1-slide .slick-slide>div>p {
  margin-bottom: 0;
}

.slick-1-slide .slick-slide>div+p {
  font-size: 1.4rem;
  line-height: 2rem;
}

.slick-1-slide .slick-slide>div+p span {
  font-size: 1.6rem;
  color: #2a2d2e;
  font-weight: 500;
}

/* NAV */

nav#main-nav {
  height: 104px;
  box-shadow: 10px 0px 15px gray;
  position: fixed;
  bottom: 100%;
  left: 0;
  width: 100%;
  z-index: 999;
  background-color: #fff;
  text-align: left;
  transition: all .5s ease-out;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

nav#main-nav>div:nth-child(1) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  height: 100%;
}

nav#main-nav #menu-btn {
  color: #2a2d2e;
  font-weight: 300;
  text-transform: uppercase;
  border: 0;
  font-size: 1.8rem;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 25' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(42, 45, 46, 1)' stroke-width='4' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") no-repeat top right;
  padding: 0;
  outline: none;
  width: 40px;
  height: 30px;
  overflow: hidden;
}

nav#main-nav #menu-btn:hover {
  background: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 25' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(189, 0, 3, 1)' stroke-width='4' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") no-repeat top right;
}

nav#main-nav #list-nav-top>li {
  display: inline-block;
  margin: 0 15px;
  text-transform: uppercase;
  font-size: 2rem;
}

nav#main-nav #list-nav-top>li:hover, nav #list-nav-top>li>a:hover {
  text-decoration: none;
  color: #b90018;
  cursor: pointer;
}

nav#main-nav #menu-btn::before {
  content: '';
}

nav#main-nav #menu-btn.open {
  background: none;
}

nav#main-nav #menu-btn.open::before {
  content: 'x';
  transform: scaleX(1.5);
  font-size: 2.7rem;
  display: block;
}

nav#main-nav #menu-btn.open:hover:before {
  color: #b9252e;
}

nav#main-nav+*:not(#home-header) {
  margin-top: 104px;
}

#bloc-nav-cta {
  position: fixed;
  top: 104px;
  left: 100%;
  width: 35px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #2a2d2e;
  padding: 15px 0;
  z-index: 100;
  transition: all .5s ease-out;
  height: 350px;
  justify-content: center;
}

nav.open #bloc-nav-cta {
  transform: translateX(-100%);
}

#bloc-nav-cta>a {
  margin: 10px 0;
  font-size: 2rem;
  color: #fff;
  width: 100%;
  text-align: center;
}

#bloc-nav-cta>a:hover, #bloc-nav-cta>a:hover, #bloc-nav-cta>a:hover {
  color: #b9252e;
}

.tooltips {
  position: relative;
}

.tooltips::before {
  background-color: #fff;
  width: 210px;
  position: absolute;
  top: 50%;
  right: 100%;
  box-shadow: 0 0 10px #46494a;
  font-size: 1.2rem;
  text-transform: uppercase;
  font-weight: 700;
  color: #46494a;
  transform: translateY(-50%);
  padding: 10px 15px;
  margin-right: 5px;
  text-align: center;
  border-radius: 30px;
}

.tooltips._envelope:hover::before {
  content: 'Demander un devis gratuit ou une information';
}

.tooltips._google:hover::before {
  content: 'Voir nos avis sur Google';
}

.tooltips._facebook:hover::before {
  content: 'Suivre notre page Facebook';
  width: 170px;
}

.tooltips._linkedin:hover::before {
  content: 'Suivre Jerome Baboulet sur LinkedIn';
  width: 200px;
}

#menu-cont {
  display: none;
  position: absolute;
  overflow-y: auto;
  margin: 0 auto;
  height: 100vh;
  width: 100%;
  background: rgba(40, 43, 48, .8);
  box-shadow: 10px 0 10px gray;
  z-index: 101;
}

#menu-cont>div {
  width: 100%;
  background-color: #fff;
}

#menu {
  padding: 0;
  text-align: right;
  max-width: 1600px;
}

#menu .titre-menu {
  color: #2a2d2e;
  font-weight: 600;
  font-size: 2.4rem;
  margin-bottom: 2.5rem;
  display: block;
  text-align: right;
}

#menu .toggled .titre-menu {
  text-align: center;
}

#menu .toggled {
  text-align: center;
}

#menu .titre-sub-menu {
  position: relative;
}

#menu .titre-sub-menu::before {
  content: '|';
  margin-right: 8px;
}

#menu .titre-sub-menu:hover:before, #menu .titre-sub-menu:hover:after, #menu .titre-sub-menu:hover {
  color: #b9252e;
}

#menu .titre-sub-menu:hover:after {
  content: '|';
  margin-left: 8px;
}

#menu .link-metier a {
  color: #b9252e;
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 1px;
  margin-bottom: 1rem;
  display: inline-block;
  position: relative;
}

#menu .link-metier a.titre-sub-menu {
  font-size: 1.4rem;
  color: #2a2d2e;
}

#menu .link-metier a:hover {
  color: #b9252e;
  text-decoration: none;
}

#menu .link-metier a:hover:before, #menu .link-metier a:hover:after {
  content: '|';
}

#menu .link-metier a:hover:before {
  margin-right: 8px;
}

#menu .link-metier a:hover:after {
  margin-left: 8px;
}

#menu #list-menu-agence {
  margin-bottom: 2.5rem;
}

#menu #list-menu-agence a, #menu .titre-sub-menu {
  font-size: 1.4rem;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 1rem;
  display: block;
}

#menu #list-menu-agence a, #menu #list-menu-agence a:hover {
  color: #312d32;
}

#menu #menu-metiers, #menu #menu-metiers>span {
  position: relative;
}

#menu #menu-metiers>span {
  padding: 0 25px;
  background-color: #fff;
}

#menu #menu-metiers::before {
  content: '';
  background-color: #464849;
  border-bottom: 1px solid #dedfdf;
  height: 2px;
  display: block;
  left: 0;
  position: absolute;
  top: 50%;
  width: 100%;
}

#menu a.titre-menu:hover {
  text-decoration: none;
  color: #b9252e;
}

#menu .cta {
  color: #fff;
  background-color: #b9252e;
  border: 1px solid #b9252e;
  letter-spacing: 1px;
  margin-top: 30px;
  font-size: 1.5rem;
  padding: 20px 25px;
}

#menu .cta:hover {
  color: #46494a;
  border: 1px solid #46494a;
  background-color: transparent;
}

/* FIN NAV */

/* ARIANE */

#ariane {
  padding: 2rem 0;
}
#ariane-container {
  position: relative;
  width: 100%; 
  max-width: 1200px; 
  margin: 0 auto; 
  padding-bottom: 1rem; 
  margin-left: 10rem; 
}
#ariane-container::after {
  content: ''; 
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100vw; 
  height: 1px;
  background-color: transparent; 
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); 
  z-index: -1; 
  transform: translateX(-10rem);
}
#ariane .fa-home {
  position: absolute;
  left: 10px;
  top: 5px;
  z-index: 10;
}

#ariane>li {
  display: inline-block;
  color: #72787a;
  font-size: 1.8rem;
  font-weight: 500;
}

#ariane>li+li {
  margin-left: 10px;
}

#ariane>li.item+li.item::before {
  content: '>';
  margin-right: 10px;
}

#ariane>li a {
  color: #72787a;
  font-size: 1.8rem;
  font-weight: 500;
}

#ariane>li:last-child a {
  color: #e46462;
}

#ariane>li a:hover {}

/* FIN ARIANE */

/* FOOTER */

footer {
  padding-top: 4%;
}

footer nav {
  margin-top: -1.8rem;
}

footer, footer a, footer a:active, footer a:hover, footer a:focus {
  color: #72787a;
}

footer .color-dark-gray a, footer .color-dark-gray a:active, footer .color-dark-gray a:hover, footer .color-dark-gray a:focus {
  color: #282b30;
}

.link-reso .fa-circle {
  color: #282b30;
}

.link-reso:hover .fa-circle {
  color: #b9252e;
}

.link-reso:active, .link-reso:hover, .link-reso:focus {
  text-decoration: none;
}

.container-before-footer {
  padding-top: 3%;
  padding-bottom: 3%;
}

.list-link {
  text-align: left;
  text-transform: uppercase;
  line-height: 3rem;
  font-size: 1.4rem;
  margin-bottom: 1.8rem;
}

.menu-title-1, .menu-title-1 a {
  color: #b9252e;
  margin: 1.8rem 0 2rem;
  font-size: 2rem;
  text-transform: uppercase;
  text-align: left;
  margin-bottom: 1.5rem;
}

.menu-title-2 {
  font-size: 1.6rem;
}

footer hr.sep {
  margin-top: 3.9rem;
}

p+#list-membre {
  margin-top: 3%;
}

#list-membre {
  padding: 0;
}

#list-membre>li {
  display: inline-block;
  margin-right:25px;
}

#list-membre img {
  transform: scale(.9);
  transition: all .5s ease;
}

#list-membre img:hover {
  transform: scale(1);
}

footer>div:last-of-type {
  max-width: 1600px;
  margin: 0 auto;
  border-top: 1px solid #d0d1d2;
  padding: 3% 15px;
}

/* FIN FOOTER */

/* HEADER */

.header-titre {
  position: absolute;
  padding: 25px 0;
  width: 100%;
  top: 50%;
  transform: translate(0, -50%);
}

.header-titre *:last-child {
  margin-bottom: 0;
}

.header-titre .title-1 {
  padding: 0;
  color: #fff;
  margin-bottom: 1rem;
}

.header-titre p {
  color: #fff;
  font-size: 2.2rem;
}

.img-mascotte {
  position: absolute;
  bottom: 30px; /* Positionne la mascotte légèrement en dessous de l'image principale */
  right: -80px; /* Positionne la mascotte légèrement à droite de l'image principale */
  width: 80px; /* Ajuste la taille de la mascotte (modifiez si nécessaire) */
  height: auto; /* Maintient les proportions de l'image */
  z-index: -10; /* Assure que la mascotte est visible au-dessus de l'image principale */
}


/* HEADERS AGENCE */

#header-votre-epartenaire {
  background: url(../img/header-votre-epagrtenaire.jpg.webp) no-repeat center center;
}
#header-votre-epartenaire2 {
  display: flex; 
  justify-content: left; 
  align-items: center;   
  background: url(../img/header-votre-epartenaire2.webp) no-repeat center center;
  background-size: cover; 
  background-position: center -150px;
  background-attachment: scroll;
  width: 100%;
  min-height: 90vh; 
  height: auto; 
}


#header-en-1-minute {
  background: url(../img/header-en-1-minute.jpg) center center no-repeat;
}
#header-en-1-minute2 {
  display: flex; 
  justify-content: left; 
  align-items: center;   
  background: url(../img/En-1-minute.webp) no-repeat center center;
  background-size: cover; 
  background-position: center -150px;
  background-attachment: scroll;
  width: 100%;
  min-height: 90vh; 
  height: auto; 
}


#header-notre-methodologie {
  background: url(../img/header-notre-methodologie.jpg) center center no-repeat;
}
#header-notre-methodologie2 {
  display: flex; 
  justify-content: left; 
  align-items: center;   
  background: url(../img/notre-méthodologie.webp) no-repeat center center;
  background-size: cover; 
  background-position: center -150px;
  background-attachment: scroll;
  width: 100%;
  min-height: 90vh; 
  height: auto; 
}

#header-nos-engagements {
  background: url(../img/header-nos-engagements.jpg) center center no-repeat;
}
#header-nos-engagements2 {
  display: flex; 
  justify-content: left; 
  align-items: center;   
  background: url(../img/Nos-engagements.webp) no-repeat center center;
  background-size: cover; 
  background-position: center 
  background-attachment: scroll;
  width: 100%;
  min-height: 90vh; 
  height: auto; 
}
#header-valeurs-rse {
  background: url(../img/header-valeurs-rse.jpg) center center no-repeat;
}
#header-valeurs-rse2 {
  display: flex; 
  justify-content: left; 
  align-items: center;   
  background: url(../img/Hébergement-reprise-en-main-de-site-web.jpg) no-repeat center center;
  background-size: cover; 
  background-position: center -150px;
  background-attachment: scroll;
  width: 100%;
  min-height: 90vh; 
  height: auto; 
}

#header-equipe {
  background: url(../img/header-equipe.jpg) center center no-repeat;
}
#header-equipe2 {
  display: flex; 
  justify-content: left; 
  align-items: center;   
  background: url(../img/l-équipe.webp) no-repeat center center;
  background-size: cover; 
  background-position: center -150px;
  background-attachment: scroll;
  width: 100%;
  min-height: 90vh; 
  height: auto; 
}

#header-questions-a-se-poser {
  background: url(../img/header-questions-a-se-poser.jpg) center center no-repeat;
}
#header-questions-a-se-poser2 {
  display: flex; 
  justify-content: left; 
  align-items: center;   
  background: url(../img/Blog.webp) no-repeat center center;
  background-size: cover; 
  background-position: center -150px;
  background-attachment: scroll;
  width: 100%;
  min-height: 90vh; 
  height: auto; 
}

/* FIN HEADERS AGENCE */

/* HEADERS METIERS */

#header-digitalisation {
  background: url(../img/header-digitalisation.jpg) center center no-repeat;
}
#header-digitalisation2 {
  display: flex; 
  justify-content: left; 
  align-items: center;   
  background: url(../img/Intelligence-artificielle2.webp) no-repeat center center;
  background-size: cover; 
  background-position: center -150px;
  background-attachment: scroll;
  width: 100%;
  min-height: 90vh; 
  height: auto; 
}

#header-webmarketing {
  background: url(../img/header-webmarketing.jpg) center center no-repeat;
}
#header-webmarketing2 {
  display: flex; 
  justify-content: left; 
  align-items: center;   
  background: url(../img/marketing-digital.webp) no-repeat center center;
  background-size: cover; 
  background-position: center -150px;
  background-attachment: scroll;
  width: 100%;
  min-height: 90vh; 
  height: auto; 
}
#header-strategie {
  background: url(../img/header-strategie.jpg) center center no-repeat;
}
#header-strategie2 {
  display: flex; 
  justify-content: left; 
  align-items: center;   
  background: url(../img/Stratégie2.webp) no-repeat center center;
  background-size: cover; 
  background-position: center -150px;
  background-attachment: scroll;
  width: 100%;
  min-height: 90vh; 
  height: auto; 
}

#header-strategie-webmarketing {
  background: url(../img/header-strategie-webmarketing.jpg) center center no-repeat;
}
#header-strategie-webmarketing2 {
  display: flex; 
  justify-content: left; 
  align-items: center;   
  background: url(../img/Marketing-digitale-acquisition-client.webp) no-repeat center center;
  background-size: cover; 
  background-position: center -150px;
  background-attachment: scroll;
  width: 100%;
  min-height: 90vh; 
  height: auto; 
}


#header-accompagnement {
  background: url(../img/header-accompagnement.jpg) center center no-repeat;
}
#header-accompagnement2 {
  display: flex; 
  justify-content: left; 
  align-items: center;   
  background: url(../img/Accompagnement-digital.webp) no-repeat center center;
  background-size: cover; 
  background-position: center -150px;
  background-attachment: scroll;
  width: 100%;
  min-height: 90vh; 
  height: auto; 
}

#header-protection-de-vos-noms {
  background: url(../img/header-protection-de-vos-noms.jpg) center center no-repeat;
}
#header-protection-de-vos-noms2 {
  display: flex; 
  justify-content: left; 
  align-items: center;   
  background: url(../img/Protection-de-vos-noms.webp) no-repeat center center;
  background-size: cover; 
  background-position: center -150px;
  background-attachment: scroll;
  width: 100%;
  min-height: 90vh; 
  height: auto; 
}

#header-logo-et-identite-visuelle {
  background: url(../img/header-logo-et-identite-visuelle.jpg) center center no-repeat;
}
#header-logo-et-identite-visuelle2 {
  display: flex; 
  justify-content: left; 
  align-items: center;   
  background: url(../img/Logo-identité-visuelle.webp) no-repeat center center;
  background-size: cover; 
  background-position: center -150px;
  background-attachment: scroll;
  width: 100%;
  min-height: 90vh; 
  height: auto; 
}

#header-design {
  background: url(../img/header-design.jpg) center center no-repeat;
}
#header-design2 {
  display: flex; 
  justify-content: left; 
  align-items: center;   
  background: url(../img/Design.webp) no-repeat center center;
  background-size: cover; 
  background-position: center -150px;
  background-attachment: scroll;
  width: 100%;
  min-height: 90vh; 
  height: auto; 
}


#header-webdesign {
  background: url(../img/header-webdesign.jpg) center center no-repeat;
}
#header-webdesign2 {
  display: flex; 
  justify-content: left; 
  align-items: center;   
  background: url(../img/Web-design.webp) no-repeat center center;
  background-size: cover; 
  background-position: center -150px;
  background-attachment: scroll;
  width: 100%;
  min-height: 90vh; 
  height: auto; 
}

#header-animations-et-videos {
  background: url(../img/header-animations-et-videos.jpg) center center no-repeat;
}
#header-animations-et-videos2 {
  display: flex; 
  justify-content: left; 
  align-items: center;   
  background: url(../img/Video-motion-design.webp) no-repeat center center;
  background-size: cover; 
  background-position: center -150px;
  background-attachment: scroll;
  width: 100%;
  min-height: 90vh; 
  height: auto; 
}

#header-videos {
  background: url(../img/header-videos.jpg) center center no-repeat;
}

#header-programmation {
  background: url(../img/header-programmation.jpg) center center no-repeat;
}
#header-programmation2 {
  display: flex; 
  justify-content: left; 
  align-items: center;   
  background: url(../img/Programmation.webp) no-repeat center center;
  background-size: cover; 
  background-position: center -150px;
  background-attachment: scroll;
  width: 100%;
  min-height: 90vh; 
  height: auto; 
}

#header-site-internet-sur-mesure {
  background: url(../img/header-site-internet-sur-mesure.jpg) center center no-repeat;
}
#header-site-internet-sur-mesure2 {
  display: flex; 
  justify-content: left; 
  align-items: center;   
  background: url(../img/Site-internet-sur-mesure.webp) no-repeat center center;
  background-size: cover; 
  background-position: center -150px;
  background-attachment: scroll;
  width: 100%;
  min-height: 90vh; 
  height: auto; 
}

#header-ecommerce {
  background: url(../img/header-ecommerce.jpg) center center no-repeat;
}
#header-ecommerce2 {
  display: flex; 
  justify-content: left; 
  align-items: center;   
  background: url(../img/e-commerce.webp) no-repeat center center;
  background-size: cover; 
  background-position: center -150px;
  background-attachment: scroll;
  width: 100%;
  min-height: 90vh; 
  height: auto; 
}

#header-mobile {
  background: url(../img/header-mobile.jpg) center center no-repeat;
}
#header-mobile2 {
  display: flex; 
  justify-content: left; 
  align-items: center;   
  background: url(../img/Application-site-mobile.webp) no-repeat center center;
  background-size: cover; 
  background-position: center -150px;
  background-attachment: scroll;
  width: 100%;
  min-height: 90vh; 
  height: auto; 
}


#header-application-web-et-extranet {
  background: url(../img/Application-site-mobile.jpg) center center no-repeat;
}
#header-application-web-et-extranet2 {
  display: flex; 
  justify-content: left; 
  align-items: center;   
  background: url(../img/Extranet-&-logiciel-web.jpg) no-repeat center center;
  background-size: cover; 
  background-position: center -150px;
  background-attachment: scroll;
  width: 100%;
  min-height: 90vh; 
  height: auto; 
}
#header-gso {
  display: flex; 
  justify-content: left; 
  align-items: center;   
  background: url(../img/En-1-minute.webp) no-repeat center center;
  background-size: cover; 
  background-position: center -150px;
  background-attachment: scroll;
  width: 100%;
  min-height: 90vh; 
  height: auto; 

}
#header-interfacage-site-web-et-logiciel {
  background: url(../img/header-interfacage-site-web-et-logiciel.jpg) center center no-repeat;
}
#header-interfacage-site-web-et-logiciel2 {
  display: flex; 
  justify-content: left; 
  align-items: center;   
  background: url(../img/Interface-site-&-logiciel-ERP.webp) no-repeat center center;
  background-size: cover; 
  background-position: center -150px;
  background-attachment: scroll;
  width: 100%;
  min-height: 90vh; 
  height: auto; 
}

#header-referencement-google-seo-et-sea {
  background: url(../img/header-referencement-google-seo-et-sea.jpg) center center no-repeat;
}
#header-referencement-google-seo-et-sea2 {
  display: flex; 
  justify-content: left; 
  align-items: center;   
  background: url(../img/Référencement-Google-SEO-SEA.webp) no-repeat center center;
  background-size: cover; 
  background-position: center -150px;
  background-attachment: scroll;
  width: 100%;
  min-height: 90vh; 
  height: auto; 
}

#header-reseaux-sociaux {
  background: url(../img/header-reseaux-sociaux.jpg) center center no-repeat;
}
#header-reseaux-sociaux2 {
  display: flex; 
  justify-content: left; 
  align-items: center;   
  background: url(../img/Réseaux-sociaux.jpg) no-repeat center center;
  background-size: cover; 
  background-position: center -150px;
  background-attachment: scroll;
  width: 100%;
  min-height: 90vh; 
  height: auto; 
}

#header-growth-hacking {
  background: url(../img/header-growth-hacking.jpg) center center no-repeat;
}
#header-growth-hacking2 {
  display: flex; 
  justify-content: left; 
  align-items: center;   
  background: url(../img/acquisition-client-Growth-hacking.webp) no-repeat center center;
  background-size: cover; 
  background-position: center -150px;
  background-attachment: scroll;
  width: 100%;
  min-height: 90vh; 
  height: auto; 
}
#header-emailing-et-sms,
#header-jeu-concours {
  background: url(../img/header-jeu-concours.jpg) center center no-repeat;
}
#header-emailing-et-sms2 {
  display: flex; 
  justify-content: left; 
  align-items: center;   
  background: url(../img/E-mailing-SMS.jpg) no-repeat center center;
  background-size: cover; 
  background-position: center -150px;
  background-attachment: scroll;
  width: 100%;
  min-height: 90vh; 
  height: auto; 
}
#header-formation-web {
  background: url(../img/header-formation-web.jpg) center center no-repeat;
}
#header-formation-web2 {
  display: flex; 
  justify-content: left; 
  align-items: center;   
  background: url(../img/Formation-web-IA.jpg) no-repeat center center;
  background-size: cover; 
  background-position: center -150px;
  background-attachment: scroll;
  width: 100%;
  min-height: 90vh; 
  height: auto; 
}

#header-hebergement-et-reprise-en-main-de-sites {
  background: url(../img/header-accueil-3.jpg) center center no-repeat;
}
#header-hebergement-et-reprise-en-main-de-sites2 {
  display: flex; 
  justify-content: left; 
  align-items: center;   
  background: url(../img/Hébergement-reprise-en-main-de-site-web.jpg) no-repeat center center;
  background-size: cover; 
  background-position: center -150px;
  background-attachment: scroll;
  width: 100%;
  min-height: 90vh; 
  height: auto; 
}
#header-hebergement-et-reprise-en-main-de-sites2 {
  display: flex; 
  justify-content: left; 
  align-items: center;   
  background: url(../img/Hébergement-reprise-en-main-de-site-web.jpg) no-repeat center center;
  background-size: cover; 
  background-position: center -150px;
  background-attachment: scroll;
  width: 100%;
  min-height: 90vh; 
  height: auto; 

}
#header-hebergement-et-reprise-en-main-de-sites2 .container .mascotte-gif {
  position: absolute;
  top: 127px;
  left: auto;
  bottom: 61px;

  width: 18%;
  transform: translate(50%, 50%);
}

#header-hebergement-et-reprise-en-main-de-sites .container .mascotte-gif {
  position: absolute;
  top: 127px;
  left: auto;
  bottom: 61px;
  right: 382px;
  width: 18%;
  transform: translate(50%, 50%);
}

@media screen and (max-width: 1400px) {
  #header-hebergement-et-reprise-en-main-de-sites .container .mascotte-gif {
    right: 340px;
    width: 18%;
    top: 153px;
  }
}

@media screen and (max-width: 1380px) {
  #header-hebergement-et-reprise-en-main-de-sites .container .mascotte-gif {
    right: 335px;
    width: 18%;
    bottom: 20px;
  }
}

@media screen and (max-width: 1300px) {
  #header-hebergement-et-reprise-en-main-de-sites .container .mascotte-gif {
    right: 309px;
    width: 18%;
    top: 172px;
  }
}

@media screen and (max-width: 1240px) {
  #header-hebergement-et-reprise-en-main-de-sites .container .mascotte-gif {
    right: 270px;
    width: 19%;
    bottom: 3px;
  }
}

@media screen and (max-width : 1200px) {
  #header-hebergement-et-reprise-en-main-de-sites .container .mascotte-gif {
    right: 248px;
    width: 20%;
  }
}

@media screen and (max-width : 1100px) {
  #header-hebergement-et-reprise-en-main-de-sites .container .mascotte-gif {
    right: 202px;
    width: 21%;
    bottom: -10px;
  }
}

@media screen and (max-width : 1024px) {
  #header-hebergement-et-reprise-en-main-de-sites .container .mascotte-gif {
    right: 154px;
    width: 23%;
    bottom: 7px;
  }
}

@media screen and (max-width : 920px) {
  #header-hebergement-et-reprise-en-main-de-sites .container .mascotte-gif {
    display: none;
  }
}

/* FIN HEADERS METIERS */

#header-avis {
  background: url(../img/header-avis.jpg) center center no-repeat;
}
#header-avis2 {
  display: flex; 
  justify-content: left; 
  align-items: center;   
  background: url(../img/Avis.webp) no-repeat center center;
  background-size: cover; 
  background-position: center -150px;
  background-attachment: scroll;
  width: 100%;
  min-height: 90vh; 
  height: auto; 
}

#header-devis {
  background: url(../img/header-devis.jpg) center center no-repeat;
}
#header-devis2 {
  display: flex; 
  justify-content: left; 
  align-items: center;   
  background: url(../img/Devis.webp) no-repeat center center;
  background-size: cover; 
  background-position: center -150px;
  background-attachment: scroll;
  width: 100%;
  min-height: 90vh; 
  height: auto; 
}

#header-contact {
  background: url(../img/header-contact.jpg) center center no-repeat;
}
#header-contact2 {
  display: flex; 
  justify-content: left; 
  align-items: center;   
  background: url(../img/Contact.webp) no-repeat center center;
  background-size: cover; 
  background-position: center -150px;
  background-attachment: scroll;
  width: 100%;
  min-height: 90vh; 
  height: auto; 
}

/* FIN HEADER */

/* HOME */

header#home-header {
  height: 100%;
}

header#home-header {
  background: url('../img/header-accueil-2.jpg') no-repeat center bottom;
  background-size: cover;
  position: relative;
}

header#home-header>div {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  z-index: 1;
}

header#home-header img.logo {
  margin-bottom: 10%;
}

header #header-scroll {
  color: #fff;
  font-size: 4rem;
  position: absolute;
  bottom: 0;
  left: calc(50% - 12.5px);
  line-height: 4rem;
  width: 25px;
  z-index: 1;
}

header #header-scroll:hover {
  color: #b9252e;
}

@-webkit-keyframes animlogo {
  15% {
    fill: transparent
  }

  55% {
    stroke-dashoffset: 0;
    stroke-opacity: 1
  }

  to {
    fill: #fff;
    stroke-dashoffset: 0
  }
}

@keyframes animlogo {
  15% {
    fill: transparent
  }

  55% {
    stroke-dashoffset: 0
  }

  to {
    fill: #fff;
    stroke-dashoffset: 0
  }
}

#home-header svg {
  display: block;
  margin: 0 auto;
  width: 100%;
  margin-bottom: 5%;
}

#home-header path {
  stroke-width: 1px;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: transparent;
  -webkit-animation: animlogo 1.5s ease-out both;
  animation: animlogo 1.5s ease-out both;
  stroke: #fff;
}

.mascotte-gif {
  position: absolute;
  top: auto;
  left: auto;
  bottom: 61px;
  right: 301px;
  width: 33%;
  transform: translate(50%, 50%);
}

#notre-agence p {
  font-weight: none;
  margin-bottom: 2rem;
}

#notre-agence strong {
  font-weight: bolder;
}

#metier-left-img {
  float: left;
  margin: 0 3rem 3rem 0;
}

#list-metier {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

#list-metier a {
  color: #2a2d2e;
  font-weight: 600;
  font-size: 2rem;
}

#list-metier a:hover, #list-metier a:active, #list-metier a:focus {
  color: #b9252e;
  text-decoration: none;
}

#list-metier a {
  display: block;
}

#list-metier>div {
  margin-bottom: 5rem;
}

#list-metier .figure-cont, #list-metier figcaption {
  text-align: center;
}

#list-metier .figure-cont {
  height: 190px;
}

#list-metier img {
  margin-bottom: 1rem;
}

#notre-agence {
  padding: 2% 0;
}

#realisation {
  max-width: 1280px;
  margin: 0 auto 2%;
  overflow-x: hidden;
}

#realisation-col2 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#realisation-col2>.row {
  height: calc(50% - 15px);
}

#realisation-col2>.row>div, #realisation-col2 .bloc-rea {
  height: 100%;
}

#realisation>.row>div {
  margin-bottom: 30px;
}

#bloc-last-rea {
  margin: 0 calc(4% - 10px);
}

.bloc-rea img {
  filter: grayscale(1);
  transition: all .5s ease-out;
  z-index: -1;
  position: inherit;
}

.bloc-rea:hover img {
  filter: grayscale(0);
}

.bloc-rea {
  position: relative;
  overflow: hidden;
  box-shadow: 0px 6px 10px #828282
}

.bloc-rea-open {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  transform: translateY(100%);
  transition: all .5s ease-out;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: rgba(185, 0, 24, 0.62);
  padding: 15px;
  color: #fff;
  height: 100%;
  overflow: hidden;
}

.bloc-rea:hover .bloc-rea-open {
  transform: translateY(0);
  transition: all 1.2s ease-out;
}

.bloc-rea-open>p {
  width: 100%;
  margin-bottom: 30px;
  font-weight: 600;
  font-size: 1.8rem;
}

.bloc-rea-open>p strong {
  font-size: 2.2rem;
}

.bloc-rea-open a {
  margin: 15px 10px 0;
  padding: 10px 30px;
}

.bloc-rea:hover h3 {
  display: none;
}

.bloc-rea h3 {
  color: #fff;
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 2.5rem;
  margin: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(185, 0, 24, 0.62);
  padding: 15px;
  transition: all .5s ease-out;
}

.bloc-rea h3 strong {
  font-weight: 600;
  font-size: 2.2rem;
}

.list-realisation .bloc-rea {
  max-height: 240px;
}

.list-realisation img.lazy {
  font-size: 0;
}

.list-realisation {
  display: flex;
  flex-wrap: wrap;
  overflow-x: hidden;
  justify-content: center;
  padding: 0;
}

.list-realisation>li {
  width: 25%;
  margin: 0 4% 35px;
}

.list-realisation.slick-1-slide-md {
  max-width: 320px;
  height: 0;
  overflow: hidden;
  margin: 0 auto;
  box-shadow: 0px 6px 10px #828282;
  margin-bottom: 30px;
}

.list-realisation.slick-1-slide-md .bloc-rea {
  margin-bottom: 0;
  box-shadow: none;
}

.slick-loading {
  visibility: hidden;
}

/* Pour cacher l'alt des images en lazy-loading */
.slick-arrow {
  position: absolute;
  top: 0;
  border: 0;
  background: none;
  color: #fff;
  font-size: 4rem;
  outline: none;
  padding: 0 15px;
  height: 100%;
  z-index: 10;
}

.slick-arrow:focus {
  outline: none;
}

.slick-prev {
  left: 0;
}

.slick-next {
  right: 0;
}

.slick-arrow>i {
  text-shadow: 0 0 5px #000;
}

.slick-slide {
  outline: none;
}

#agence-header {
  position: absolute;
  width: 100%;
  top: 50%;
  text-align: center;
  transform: translateY(-50%);
}

#agence-header .cta {
  margin: 0;
}

#agence.parallax {
    max-height: 500px;
    height: calc(100vw / 2.58);
    background-image: url('/media/img/bureau-epartenaire.jpg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#agence.parallax a {
  border-color: #fff;
  color: #fff;
  margin: 0;
}

#agence.parallax a:hover {
  border-color: transparent;
}

#agence.parallax h2 {
  color: #fff;
  margin-top: 0;
}

.bg-black-opaque {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0,0,0,.2);
    }

#row-agence>div {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px 5%;
}

#bloc-parlons-projet {
  padding: 4% 0;
}

#list-question, .list-tiret {
  font-weight: 300;
  margin: 0 0 25px;
  line-height: 3rem;
}

.list-tiret {
  font-weight: inherit;
}

#list-question {
  list-style: none;
  padding: 0;
}

#list-question>li, .list-tiret>li {
  padding-left: 15px;
  position: relative;
}

#list-question>li::before, .list-tiret>li::before {
  content: '-';
  position: absolute;
  left: 0;
  top: 0;
}

/* FIN HOME */

/* EN UNE MINUTE */

/* FIN EN UNE MINUTE */

/* NOS ENGAGEMENTS */
#section-nos-engagements ol li::marker {
  font-weight: 700;
  color: #bc0004;
}

/* FIN NOS ENGAGEMENTS */

/* L'EQUIPE */
#section-equipe h3 {
  font-size: 2.6rem;
  margin: 2rem 0 1.2rem;
}

/* FIN L'EQUIPE */

/* QUESTIONS A SE POSER */

.page-formation p {
  margin: 1rem 0 2rem;
}

.custom-accordion {
  list-style: none;
  padding: 0;
}

.custom-accordion li:hover {
  border-color: #bc0004;
  box-shadow: 5px 5px 0px #d09293;
}

.custom-accordion li:hover a {
  color: #bc0004;
  text-decoration: none;
}

.custom-accordion li {
  position: relative;
  margin: 2rem 0;
  border: solid 1px #e4e4e4;
  box-shadow: 5px 5px 0px #575757;
}

.custom-accordion li::after {
  display: block;
  content: "\f105";
  position: absolute;
  font-family: 'FontAwesome';
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  right: 2rem;
  font-size: 2.5rem;
  color: #9d0014;
}

.custom-accordion li h2 {
  font-size: 2rem;
  margin: 0;
  height: 100%;
  font-weight: 400;
}

.custom-accordion li h2 span {
  font-size: 1.7rem;
  text-transform: uppercase;
  font-weight: 100;
}

.custom-accordion li h2 a {
  display: block;
  padding: 2rem 5rem 2rem 2rem;
}

/* FIN QUESTIONS A SE POSER */

/* REFERENCES */

.bloc-rea-tri {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 500;
  text-transform: uppercase;
  color: #312d32;
  font-size: 1.8rem;
  margin-bottom: 4rem;
}

.bloc-rea-tri>span {
  margin-right: 30px;
  white-space: nowrap;
}

#rea-tri>button {
  border: 0;
  outline: none;
  background: none;
  text-transform: uppercase;
  position: relative;
  padding: 0 15px 0 20px;
  line-height: 2.2rem;
  text-align: left;
}

#rea-tri>button::before {
  content: '';
  position: absolute;
  left: 0;
  height: 100%;
  border-left: 1px solid #2a2d2e;
  background-color: #9b9c9d;
  width: 2px;
}

#rea-tri>button.active, #rea-tri>button:hover {
  color: #b90018;
}

.bloc-rea-crit {
  display: none;
  margin-bottom: 4rem;
  padding: 0 50px;
}

.bloc-rea-crit a {
  color: #818586;
  font-weight: 500;
  font-size: 1.6rem;
  margin: 0 15px;
}

.bloc-rea-crit a:hover {
  color: #b90018;
  text-decoration: none;
}

.bloc-rea-crit a.active {
  color: #2a2d2e;
}

.list-type {
  list-style: inside;
  margin-bottom: 3rem;
}

.list-type>li {
  margin-bottom: 5px;
}

.ref-visuel {
  box-shadow: 0px 6px 10px #828282;
  margin-bottom: 1rem;
}

.pagination-rea {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 5rem;
}

.pagination-rea .cta {
  margin: 0 1rem;
}

.pagination-rea .cta .fa {
  font-size: 5rem;
}

.pagination-rea .cta.arrow i.fa:hover {
  color: #b9252e;
}

/* FIN REFERENCES */

/* DEBUT VIDEO & MOTION DESIGN */

.vimeo-wrapper {
  width: 100%;
  height: 350px;
  pointer-events: none;
  overflow: hidden;
  position: absolute;
}

.vimeo-wrapper iframe {
  width: 100vw;
  height: 56.25vw;
  min-height: 100vh;
  min-width: 177.77vh;
  position: absolute;
  top: 21%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.325);
  -webkit-transform: translate(-50%, -50%) scale(1.325);
}

.vimeo-wrapper-h100 {
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    position: absolute;
    z-index: 6;
}
.vimeo-wrapper-h100 iframe {
    width: 100vw;
    height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
    min-height: 100vh;
    min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

#vingt-ans-logo {
    position: absolute;
    left: 50%;
    top: 10%;
    z-index: 10;
    transform: translateX(-50%);
}
#vingt-ans-link, #header-video-agence {
    position: absolute;
    left: 50%;
    bottom: 10%;
    z-index: 12;
    transform: translateX(-50%);
    border: 1px solid #46494a;
    margin: 0;
}
#header-video-agence {background: transparent;}

#header-2025 .stretched-link::after {z-index: 11;}

#vingt-ans-link:hover,
#vingt-ans-link:active,
#vingt-ans-link:focus,
#header-video-agence:hover,
#header-video-agence:active,
#header-video-agence:focus {border-color: #b9252e;}

#vingt-ans-img1 {
    position: absolute;
    left: 12%;
    top: 23%;
    z-index: 10;
    max-height: 20%;
}
#vingt-ans-img2 {
    position: absolute;
    bottom: 0;
    right: 3%;
    z-index: 10;
    max-height: 65vh;
}

#header-img-telescope {
    position: absolute;
    bottom: 10%;
    left: 15%;
    z-index: 10;
    max-height: 35vh;
}

#header-title-slogan {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(10%, -100%);
    z-index: 10;
    font-size: calc(4rem + 3vw);
    line-height: .7;
    text-shadow: 2px 2px 0px #fff, -2px -2px 0px #fff, 2px -2px 0px #fff, -2px 2px 0px #fff;
    white-space: nowrap;
    font-family: 'Beauty', sans-serif;
}

#header-title-slogan-1 {
  transform: translateX(-100%);
}

#header-title-slogan-2 {
  transform: translateX(-15%);
}

.video-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

.video-wrapper video {
  width: 100vw;
  height: 56.25vw;
  /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
  min-height: 100vh;
  min-width: 177.77vh;
  /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
}

#header-animations-et-videos .video-wrapper video {
  transform: translate(-50%, -58%);
}

#header-animations-et-videos .vimeo-wrapper iframe {
  top: 4rem;
  right: 0;
}

#header-animations-et-videos #masquotte-brouette {
  position: absolute;
  left: -14%;
  right: 0;
  top: 15%;
}

#masquotte-arrosoir {
  position: absolute;
  width: 200px;
  max-width: 40%;
  right: 15px;

}

/* FIN VIDEO & MOTION DESIGN */

.title-big {
  line-height: 5rem;
  letter-spacing: 2px;
}

.text-medium {
  font-size: 2.2rem;
  line-height: 3rem;
}

.img-cont-shadow {
  background-color: #000;
  padding: 40px;
  display: inline-block;
  position: relative;
}

.img-cont-shadow::before {
  content: '';
  position: absolute;
  top: -15px;
  bottom: -15px;
  left: 25px;
  right: -15px;
  background-color: #f5f4f8;
  z-index: -1;
}

/* AVIS */

.list-avis {
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.list-avis>li {
  margin-bottom: 3rem;
  border: 1px solid #ced4da;
  box-shadow: 5px 5px 0 #555;
  padding: 1.5rem 2rem;
  width: calc(50% - 15px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.list-avis a {
  white-space: nowrap;
}

.temoignage-texte {
  font-family: 'The Girl Next Door', cursive;
  font-size: 2rem;
  margin-bottom: 10px;
}

.temoignage-auteur {
  font-weight: bold;
  color: #555;
}

/* FIN AVIS */

/* ANIMATION SITE AUDIT */

@import 'https://fonts.googleapis.com/css?family=Roboto+Mono:100';

	.container-effect {
		font-family: 'Roboto Mono', monospace;
		height: 100%;
		width: 100%;
		justify-content: center;
		align-items: center;
		display: flex;
	}

	.text {
		font-weight: 100;
		font-size: 28px;
		color: #FFFFFF;
	}

	.dud {
		color: #757575;
	}

@media screen and (max-width: 768px) {
  .container-effect {
	display: none;
  }
}

/* FIN ANIMATION SITE AUDIT */

/* FORM */

form.form>.feedback {
  text-align: center;
  display: none;
}

form.form>.feedback p {
  margin-bottom: 0;
}

form.form input, form.form textarea {
  margin-bottom: 3rem;
}

form.form input[type="text"] {
  height: 40px;
}

form.form input[type="text"], form.form textarea {
  font-size: 1.6rem;
  border-radius: 0;
  box-shadow: 5px 5px 0px #575757;
}

form.form input[type="text"]:focus, form.form textarea:focus {
  border-color: #bc0004;
  box-shadow: 5px 5px 0px #d09293;
}

#form-newsletter input {
  max-width: 540px;
}

.form-success, .form-danger {
  display: inline-block;
  padding: 2rem 3rem;
  margin-bottom: 4rem;
  color: #fff;
}

.form-success {
  background-color: #282b30;
}

.form-danger {
  background-color: #b9252e;
}

.g-recaptcha {
  display: flex;
  justify-content: center;
}

/* FIN FORM */

/* RESPONSIVE FOND ACCUEIL MASCOTTE */

@media screen and (max-width: 1400px) {
  .mascotte-gif {
    right: 299px;
    width: 28%;
    bottom: 22px;
  }
}

@media screen and (max-width: 1380px) {
  .mascotte-gif {
    right: 296px;
    width: 29%;
    bottom: 20px;
  }
}

@media screen and (max-width: 1300px) {
  .mascotte-gif {
    right: 259px;
    width: 30%;
    bottom: 12px;
  }
}

@media screen and (max-width: 1240px) {
  .mascotte-gif {
    right: 233px;
    width: 31%;
    bottom: 3px;
  }
}

@media screen and (max-width : 1200px) {
  .mascotte-gif {
    right: 205px;
    width: 32%;
  }
  
    #header-img-telescope {
        left: 3%;
    }
}

@media screen and (max-width : 1100px) {
  .mascotte-gif {
    right: 160px;
    width: 35%;
    bottom: -10px;
  }
}

@media screen and (max-width : 1024px) {
  .mascotte-gif {
    right: 154px;
    width: 35%;
    bottom: 7px;
  }
}

@media screen and (max-width : 991px) {
  #agence.parallax {
    background-attachment: initial;
  }
}

@media screen and (max-width : 768px) {
  .mascotte-gif {
    display: none;
  }
  
    #header-title-slogan-1 {
      transform: translateX(-60%);
    }
    
    #header-title-slogan-2 {
      transform: translateX(-50%);
    }
}

/* FIN RESPONSIVE FOND ACCUEIL MASCOTTE */

@media screen and (max-width: 767px) {
  body {
    margin-top: 60px;
  }
  
    #vingt-ans-img1 {
        left: 50%;
        top: 3%;
        transform: translateX(-50%);
    }
    
    #vingt-ans-img1-mobile {
        position: absolute;
        left: 50%;
        top: 7%;
        z-index: 10;
        transform: translateX(-50%);
    }
    
    #vingt-ans-img2 {
        bottom: 5%;
        right: 50%;
        transform: translateX(50%);
    }

  .vimeo-wrapper {
    display: none;
  }

  nav#main-nav {
    top: 0;
    bottom: unset;
    transition: none;
    transform: none;
    height: 60px;
  }

  nav#main-nav #logo-nav {
    max-height: 40px;
  }

  nav#main-nav+*:not(#home-header) {
    margin-top: 60px;
  }

  #menu, #menu .titre-menu {
    text-align: center;
  }

  #menu .sub-menu {
    display: none;
  }

  #menu #menu-metiers::before {
    content: none;
  }

  header#home-header {
    top: -60px;
    background-position-x: 77%;
    display: none;
  }

  header#home-header::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #1a2d4a2f;
  }

  #home-header svg {
    width: 85%;
  }

  #bloc-nav-cta {
    display: none;
  }

  header.entete {
    padding: 25px 0;
    min-height: auto;
    background: #9d0014 !important;
    min-height: auto !important
  }

  header.entete>div.container {
    justify-content: center;
  }

  .list-realisation>li {
    width: 100%;
    margin: 0 0 20px;
  }

  .list-realisation.slick-1-slide-md {
    height: auto;
  }

  .bloc-rea:hover h3 {
    display: block;
  }

  .bloc-rea.open h3 {
    display: none;
  }

  .bloc-rea:hover .bloc-rea-open {
    transform: translateY(100%);
  }

  .bloc-rea-crit {
    padding: 0;
  }

  .bloc-rea-crit a {
    display: block;
  }

  .bloc-rea.open .bloc-rea-open {
    transform: translateY(0);
    transition: all .5s ease-out;
  }

  .bloc-rea-open>p {
    font-size: 1.4rem;
  }

  .bloc-rea-open>p strong {
    font-size: 1.8rem;
  }

  .pagination-rea .cta.arrow {
    padding: 0;
    background: none;
    border: 0;
  }

  .list-avis>li {
    width: 100%;
  }

  footer .list-link {
    text-align: center;
  }

  #home h1, h1, h2 {
    font-size: 2.5rem;
  }

  h3 {
    font-size: 2rem;
  }

  .bloc-rea h3 {
    font-size: 1.4rem;
    line-height: 2rem;
  }

  .bloc-rea h3 strong {
    font-size: 1.8rem;
  }

  #bloc-rea-activite-desktop,
  #bloc-rea-type-desktop,
  #bloc-rea-geo-desktop {
    display: none !important;
  }
}

@media screen and (max-width: 575px) {
  #rea-tri>button {
    font-size: 1.6rem;
    padding-right: 0;
  }

  .bloc-rea-tri>span {
    margin-right: 15px;
  }

  .bloc-rea-crit a {
    font-size: 1.4rem;
    margin-right: 0;
  }

  header#home-header {
    background: url('../img/header-accueil-2-mob.jpg') no-repeat center bottom;
    background-size: cover;
  }

  header#home-header>div {
    top: 30%;
  }
}

@media screen and (min-width: 768px) {
  nav.open {
    transform: translateY(100%);
  }

  .sub-menu {
    display: block !important;
  }

  header.entete .title-1 {
    font-size: 5rem;
    min-height: auto
  }

  #header-animations-et-videos .container {
    position: absolute;
  }
}

@media screen and (max-width: 576px) {
	.for-mobile {
		margin: 0 10px 0 10px;
	}
}