@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,700");

/*GENERAL*/
html {
  height: 100%;
  scroll-behavior: smooth;
}
* {
  box-sizing: border-box;
  outline: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
#header-top{
    z-index: 99999;
    background-color: var(--color-blue);
    color: white;
    text-align: center;
    max-width: none;
    height: 30px;
    display: flex;
    align-items: center;
    font-weight: 600;
    justify-content: center;
    position: fixed;
    top: 0;
}
body {
  height: calc(100% - 147px);
  margin: 0;
  padding: 0;
  font-family: "Open Sans", sans-serif;
  font-size: var(--font-size-paragraphe);
  color: var(--color-font);
  overflow-x: hidden;
  width: 100vw;
}
.container {
  display: block;
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  max-width: 1200px;
  text-align: justify;
}

#content {
  margin-top: 100px;
  overflow-x: hidden;
}

#content .h1 {
  text-align: center;
}

.contenu-article {
  margin-bottom: 3em;
}

.container_img_realisations_c{
  width: 100%;
}

.linkRealisation {
  position: relative;
}

.linkRealisation:hover .nomEntreprise {
  transform:  translate(-50%, -50%) scale(1.2);
}

.img_realisations_contenu .slick-slide img {
  width: 100%;
}

.nomEntreprise {
  background-color: white;
  padding: 5px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--color-black);
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  text-align: center !important;
  z-index: 10;
  transition: all 0.3s ease-in-out;
}


ul li {
  list-style-type: none;
  text-decoration: none;
}

.ariane {
  line-height: none;
  margin: 30px 0;
  padding: 0;
  font-size: 0;
}
.ariane > li {
  display: inline-block;
  margin: 0;
  padding: 10px 3px;
  vertical-align: middle;

  font-size: var(--font-size-paragraphe);
  line-height: 14px;
}
.ariane a {
  font-size: var(--font-size-paragraphe);
  line-height: 14px;
  text-decoration: none;
  color: var(--color-black);
  font-weight: bold;
}

.ariane > li .fa-chevron-right {
  color: #BABDBE;
  font-size: 14px;
}

.breadcrumb-item {
  display: inline-block;
}

.breadcrumb-item a {
  text-decoration: none;
  font-weight: bold;
  color: var(--color-black);
  margin: 0 10px;
}

.fd_page_actuel {
  margin-left: 10px;
}

h2 {
  max-width: 90vw;
  margin: 20px auto;
}

ol {
  list-style: circle;
}

.h1_accroche {
  color: var(--color-white);
  margin-top: 1em;
  line-height: 1.5;
}

ul {
  padding: 0;
}

.text-center {
  text-align: center !important;
}

.title {
  font-size: var(--font-size-title);
}

.erreur {
  border: 1px solid rgb(255, 0, 0);
}

.valid {
  border: 1px solid var(--color-green);
}

.text-green {
  color: var(--color-green);
  font-weight: bold;
}

.text-red {
  color: rgb(255, 0, 0);
  font-weight: bold;
}

.mb-3 {
  margin-bottom: 3vw;
}

.mt-3 {
  margin-top: 3vw !important;
}

.mt-4 {
  margin-top: 4em !important;
}

.mt--3 {
  margin-top: -3em;
}

/* HEADER */

.header {
  display: flex;
  margin: 0 auto;
  padding: 0 20px;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  margin-top: 30px;
  z-index: 20;
  width: 100vw;
  background-color: rgba(255, 255, 255, 0.418);
  backdrop-filter: blur(10px);
}
.header > a {
  display: flex;
  align-items: center;
  flex-direction: row;
  text-decoration: none;
  color: var(--color-black);
}
.header > a > img {
  max-width: 17vh;
  margin-top: 10px;
  margin-right: 15px;
  margin-bottom: 10px;
}
.header .header_sous_titre {
  display: flex;
  flex-direction: column;
  text-align: center;
  font-weight: bold;
}
.header .header_sous_titre p {
  font-size: var(--font-size-paragraphe);
  transform: translateY(-420%);
  margin: 0;
}
.header:hover .header_sous_titre :nth-child(1) {
  font-size: var(--font-size-paragraphe);
  animation: animation_depuis_2008 1s forwards;
}
.header:hover .header_sous_titre :nth-child(2) {
  font-size: var(--font-size-paragraphe);
  animation: animation_depuis_2008 1s forwards;
  animation-delay: 0.2s;
}
@keyframes animation_depuis_2008 {
  30% {
    transform: translateY(-420%);
  }
  50% {
    transform: translateY(0%);
  }
  70% {
    transform: translateY(-200%);
  }
  80% {
    transform: translateY(0%);
  }
  91% {
    transform: translateY(-100%);
  }
  95% {
    transform: translateY(0%);
  }
  98% {
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(0);
  }
}

.menu_container {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.transparent {
  backdrop-filter: blur(4px);
}

.content_3,
.content_4 {
  margin-bottom: 70px;
}

/* 	AUTOMATIC MENU */

.D a{
  color: var(--color-blue);
}

.P a{
  color: var(--color-pink);
}

.M a{
  color: var(--color-green);
}

#menu > ul {
  display: flex;
  flex-direction: column;
  padding: 0;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
  position: relative;
  /* padding-bottom: 88px; */
}

#menu > ul > li > a {
  text-align: none;
  font-size: 2em;
  padding: 5px 20px;
  line-height: 55px;
  display: inline-flex;
  font-weight: 700;
  transition: 0.5s;
}

#menu > ul:hover > .A > a {
  color: #0002;
}

#menu > ul:hover > .D > a {
  color: var(--color-blue-low-opacity);
}

#menu > ul:hover > .P > a {
  color: var(--color-pink-low-opacity);
}

#menu > ul:hover > .M > a {
  color: var(--color-green-low-opacity);
}

#menu > ul > .A:hover > a, #menu > ul > .D:hover > a, #menu > ul > .P:hover > a, #menu > ul > .M:hover > a {
  color: var(--color-white);
}

#menu > ul > li > a:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 40%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 5em;
  color: rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  z-index: -1;
  opacity: 0;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 500px;
  transition: letter-spacing 0.5s, left 0.5s;
}
#menu > ul > li > a:hover:before {
  font-family: Arial, Helvetica, sans-serif;
  content: attr(data-text);
  opacity: 1;
  left: 50%;
  letter-spacing: 10px;
  width: 1600px;
  height: 1600px;
}
#menu > ul > .D > a:before {
  background: var(--color-blue);
}
#menu > ul > .P > a:before {
  background: var(--color-pink);
}
#menu > ul > .M > a:before {
  background: var(--color-green);
}

#menu > ul > .A > a:before {
  background: #d3d4d2;
}

#menu > ul > li > a {
  text-decoration: none;
  margin-left: 15px;
}

#menu > ul > .A > a {
  color: var(--color-black);
}

.menu_deroulant_desactive {
  display: none;
}

.menu_deroulant_active {
  display: block;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background-color: var(--color-background-grey);
}

/* BURGER MENU */

#menu35 {
  display: none;
}

label {
  position: relative;
  width: 50px;
  height: 40px;
  display: inline-block;
  cursor: pointer;
  margin: 1.7em;
  transition: all 0.5s;
  text-align: left;
}

.top,
.top:before,
.top:after {
  background: var(--color-blue);
  position: absolute;
  height: 8px;
  width: 50px;
  border-radius: 4px;
  transition: all 0.5s;
}

.mid,
.mid:before,
.mid:after {
  background: var(--color-pink);
  position: absolute;
  height: 8px;
  width: 50px;
  border-radius: 4px;
  transition: all 0.5s;
}

.bot,
.bot:before,
.bot:after {
  background: var(--color-green);
  position: absolute;
  height: 8px;
  width: 50px;
  border-radius: 4px;
  transition: all 0.5s;
  z-index: -1;
}

.top {
  top: 0px;
}
.mid {
  top: 15px;
}
.bot {
  top: 30px;
}

#menu35:checked + label > div:first-child {
  top: 14%;
  left: 7%;
  width: 50%;
  transform: rotate(45deg);
  transition: width 0.15s, top 0.15s 0.15s, left 0.15s 0.15s,
    transform 0.15s 0.15s;
}
#menu35:checked + label > div:nth-child(2) {
  transform: rotate(-45deg);
  transition: transform 0.15s 0.15s;
}
#menu35:checked + label > div:nth-child(3) {
  width: 50%;
  right: 7%;
  top: 60%;
  transform: rotate(45deg);
  transition: width 0.15s, top 0.15s 0.15s, right 0.15s 0.15s,
    transform 0.15s 0.15s;
}

/* SLIDER */

.slider_text {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
  font-size: calc(10px + 1.4vw);
  max-width: 640px;
  color: var(--color-black);
  filter: brightness(150%);
  text-shadow: 0px 0px 5px #ffffff;
}

.slider_button {
  width: 30vw;
  margin: 0 auto;
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.slider_button2 {
  width: 30vw;
  margin: 0 auto;
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.slider_button2 > a {
  font-size: var(--font-size-subtitle);
  display: inline-block;
  border-radius: 20px;
  color: var(--color-white);
  text-decoration: none;
  text-align: center;
  padding: 5px 15px;
}

.slider_button {
  text-align: center;
}

.slider_button :nth-child(1) a {
  text-align: center;
  width: fit-content;
  color: var(--color-blue);
  animation: scale_button 2s infinite;
  animation-delay: 0.5s;
  text-shadow: -1px 1px 0em var(--color-white);
}
.slider_button :nth-child(2) a {
  text-align: center;
  width: fit-content;
  color: var(--color-green);
  animation: scale_button 2s infinite;
  animation-delay: 1s;
  text-shadow: -1px 1px 0em var(--color-white);
}
.slider_button :nth-child(3) a {
  text-align: center;
  width: fit-content;
  color: var(--color-pink);
  animation: scale_button 2s infinite;
  animation-delay: 1.5s;
  text-shadow: -1px 1px 0em var(--color-white);
}

.slider_action {
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
  color: var(--color-blue);
  font-size: calc(10px + 0.3vw);
  animation: scale_text 2s infinite;
  text-decoration: none;
  cursor: pointer;
}
.slider_scrolldown {
  cursor: pointer;
}

@keyframes scale_text {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
  }
  60% {
    transform: translate(-50%, -50%) scale(1.1);
  }
  70% {
    transform: translate(-50%, -50%) scale(1.2);
  }
}

@keyframes scale_button {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1.2);
  }
  40% {
    transform: scale(1);
  }
}

.slider_scrolldown {
  position: absolute;
  left: 50%;
  top: 95%;
  transform: translate(-50%, -50%) scale(0.2);
}

.slider_scrolldown > :nth-child(1) {
  position: absolute;
  left: 50%;
  top: 50%;
  animation: first_scroll 2s infinite;
}

@keyframes first_scroll {
  0% {
    opacity: 1;
    transform: translate(-50%, -40%);
  }
  33% {
    opacity: 1;
    transform: translate(-50%, -40%);
  }
  66% {
    opacity: 0;
    transform: translate(-50%, -50%);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%);
  }
}

.slider_scrolldown > :nth-child(2) {
  position: absolute;
  left: 50%;
  top: 50%;
  animation: second_scroll 2s infinite;
}

@keyframes second_scroll {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%);
  }
  33% {
    opacity: 0;
    transform: translate(-50%, -50%);
  }
  66% {
    opacity: 1;
    transform: translate(-50%, -40%);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%);
  }
}

.slider_scrolldown > :nth-child(3) {
  position: absolute;
  left: 50%;
  top: 50%;
  animation: third_scroll 2s infinite;
}

@keyframes third_scroll {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%);
  }
  33% {
    opacity: 0;
    transform: translate(-50%, -50%);
  }
  66% {
    opacity: 0;
    transform: translate(-50%, -50%);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -40%);
  }
}

.loop-movement1,
.loop-movement2 {
  position: absolute;
  transform-origin: 10%;
}
.loop-movement1 {
  animation: movementb 15s linear infinite;
}
.loop-movement2 {
  animation: movementc 15s linear infinite;
}
.loop-movement1 > svg {
  transform-box: fill-box;
  animation: movementc 15s linear infinite;
}
.loop-movement2 > svg {
  transform-box: fill-box;
  animation: movementb 15s linear infinite;
}
@keyframes movementb {
  100% {
    transform: rotate(-360deg);
  }
}
@keyframes movementc {
  100% {
    transform: rotate(360deg);
  }
}
#slider > div {
  transition: 500ms transform ease-out;
}

/* SLIDER TEXT */

.slider_bottom_text_container {
  display: flex;
  height: 6vw;
  flex-direction: column;
  align-items: center;
  margin-top: calc(70px + 8vw);
}

.slider_bottom_text {
  color: var(--color-white);
  font-size: calc(13px + 1vw);
}
.agence_web {
  font-weight: bold;
}
.marketing {
  font-weight: bold;
}
.print {
  font-weight: bold;
}
.agence_web:hover {
  color: var(--color-blue);
}
.marketing:hover {
  color: var(--color-green);
}
.print:hover {
  color: var(--color-pink);
}

/* ACCUEIL */

.content_1,
.m_bloc_accueil {
  margin-top: 55px !important;
}

.services_tiers {
  margin-top: 70px;
}

.realisation2 h2 {
  text-align: center;
}

.checkbox_formulaire p {
  font-size: var(--font-size-mention);
}

.texte_accueil {
  padding-bottom: 0 !important;
}

#contact {
  margin-top: -12vh;
  padding-top: 12vh;
}

#form_contact[action="devis.html"] {
  margin-top: 35px;
  padding-top: 0;
}

.bloc_video_texte {
  width: 100%;
  padding: 1em 3em;
  background: #f4f4f4;
  background-size: 10vw 100%;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 20px;
  box-shadow: 0px 11px 19px var(--color-light-grey);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* IMAGE ACCUEIL */

.slider_bottom_text_container {
  position: absolute;
  z-index: 1;
}

.img_accueil {
  max-width: 100%;
  filter: blur(4px);
  margin-top: calc(70px + 2vw);
}
.img_accueil_container {
  display: flex;
  justify-content: center;
  position: relative;
}

/* CIRCLE MIDDLE ACCUEIL */
.bubble_container {
  width: 100%;
  height: 100%;
  position: absolute;
  margin-top: calc(70px + 1vw);
}
.circle_accueil {
  background-color: var(--color-white);
  border-radius: 50%;
  position: absolute;
  height: 40%;
  width: 22%;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}
.circle_accueil:hover {
  cursor: pointer;
}
.logo_circle {
  width: 80%;
}
.cursor_circle {
  top: 95% !important;
  left: 70% !important;
  width: 5vw;
  animation: scale_click 2s infinite;
}
.circle_accueil > * {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.baby_circle_accueil1:hover {
  color: var(--color-blue);
}
.baby_circle_accueil2:hover {
  color: var(--color-green);
}
.baby_circle_accueil3:hover {
  color: var(--color-pink);
}
.baby_circle_accueil1,
.baby_circle_accueil2,
.baby_circle_accueil3 {
  background-color: var(--color-white);
  border-radius: 50%;
  position: absolute;
  height: 27%;
  width: 15%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  cursor: pointer;
}
.baby_circle_accueil2 {
  z-index: 2;
}
.baby_circle_accueil1 :nth-child(1),
.baby_circle_accueil2 :nth-child(1),
.baby_circle_accueil3 :nth-child(1) {
  position: absolute;
  left: 50%;
  top: 25%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: var(--font-size-bubble-title);
  font-weight: bold;
}
.baby_circle_accueil1 :nth-child(2),
.baby_circle_accueil2 :nth-child(2),
.baby_circle_accueil3 :nth-child(2) {
  text-align: center !important;
  position: absolute;
  font-size: var(--font-size-bubble);
  width: 75%;
  left: 50%;
  top: 60%;
  transform: translate(-50%, -50%);
}

/* TIC-TAC  */

.tic_tac_1 {
  width: 4vw;
  height: 1vw;
  z-index: 2;
  border-radius: 50px;
  background-color: var(--color-blue);
  position: absolute;
  left: 25%;
  top: 105%;
  transform: translate(-50%, -50%) rotate(45deg);
}

.tic_tac_2 {
  width: 4vw;
  height: 1vw;
  z-index: 2;
  border-radius: 50px;
  background-color: var(--color-pink);
  position: absolute;
  left: 90%;
  top: 100%;
  transform: translate(-50%, -50%) rotate(120deg);
}

.tic_tac_3 {
  width: 4vw;
  height: 1vw;
  z-index: 2;
  border-radius: 50px;
  border: 5px var(--color-pink) solid;
  position: absolute;
  left: 50%;
  top: 130%;
  transform: translate(-50%, -50%) rotate(30deg);
}

/* ANIMATION */

.bubble_container_on > :nth-child(1) {
  animation: scale_circle 1s;
}
.bubble_container_on > :nth-child(2) {
  animation: lefty 2s;
}
.bubble_container_on > :nth-child(3) {
  animation: middly 4s;
}
.bubble_container_on > :nth-child(4) {
  animation: righty 2s;
}

.bubble_container_off > :nth-child(1) {
  animation-delay: 2s;
  animation-duration: 1s;
  animation-name: scale_circle_reverse;
}
.bubble_container_off > :nth-child(2) {
  animation: lefty_reverse 2s;
}
.bubble_container_off > :nth-child(3) {
  animation: middly_reverse 4s;
}
.bubble_container_off > :nth-child(4) {
  animation: righty_reverse 2s;
}

@keyframes lefty {
  0% {
    left: 50%;
  }
  20% {
    width: 20%;
    height: 15%;
  }
  100% {
    left: 20%;
  }
}
@keyframes lefty_reverse {
  0% {
    left: 20%;
  }
  40% {
    width: 20%;
    height: 15%;
  }
  100% {
    left: 50%;
  }
}
@keyframes middly {
  0% {
    width: 18.75%;
    height: 25%;
  }
  100% {
    width: 15%;
    height: 27%;
  }
}
@keyframes middly_reverse {
  0% {
    width: 15%;
    height: 27%;
  }
  100% {
    width: 18.75%;
    height: 25%;
  }
}
@keyframes righty {
  0% {
    left: 50%;
  }
  20% {
    width: 20%;
    height: 15%;
  }
  100% {
    left: 80%;
  }
}
@keyframes righty_reverse {
  0% {
    left: 80%;
  }
  40% {
    width: 20%;
    height: 15%;
  }
  100% {
    left: 50%;
  }
}
@keyframes scale_click {
  0% {
    width: 5vw;
  }
  50% {
    width: 4.7vw;
  }
  60% {
    width: 5.3vw;
  }
  70% {
    width: 5vw;
  }
}
@keyframes scale_circle {
  0% {
    width: 22%;
    height: 40%;
  }
  100% {
    width: 0%;
    height: 0%;
  }
}
@keyframes scale_circle_reverse {
  0% {
    width: 0%;
    height: 0%;
  }
  100% {
    width: 22%;
    height: 40%;
  }
}

/* CARD PARTENAIRE */
.card_wrapper {
  height: 60vh;
  align-items: center;
  display: flex;
  justify-content: space-around;
  margin-bottom: 3vh;
}
.card_wrapper > div {
  border-radius: 10%;
}
.card_wrapper > div > div > img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.card_1 {
  grid-column: 1;
  grid-row: 1;
  position: relative;
}
.card_2 {
  grid-column: 2;
  grid-row: 1;
  position: relative;
}
.card_3 {
  grid-column: 3;
  grid-row: 1;
  position: relative;
}
.card_4 {
  grid-column: 1;
  grid-row: 2;
  position: relative;
}
.card_5 {
  grid-column: 2;
  grid-row: 2;
  position: relative;
}
.card_6 {
  grid-column: 3;
  grid-row: 2;
  position: relative;
}
.card_7 {
  grid-column: 1;
  grid-row: 3;
  position: relative;
}
.card_8 {
  grid-column: 2;
  grid-row: 3;
  position: relative;
}
.card_9 {
  grid-column: 3;
  grid-row: 3;
  position: relative;
  height: 26.6vh;
  width: 15vw;
}
/* ATOMIC */
.none {
  display: none !important;
}
.block {
  display: block !important;
}
.hidden {
  visibility: hidden !important;
}
.l20 {
  left: 20%;
}
.l80 {
  left: 80%;
}
.overflow-hidden {
  overflow: hidden;
}
.br25 {
  border-radius: 10px 10px 0 0 !important;
}
.backgroundBorder {
  /*background-color: var(--color-background-grey) !important;*/
  border-radius: 15px !important;
  padding: 20px 30px !important;
  box-shadow: 0 0 12px 0px rgba(0, 0, 0, 0.1) !important;
  clear: both;
}
.blueBtn a {
  background-color: var(--color-blue) !important;
  color: var(--color-white) !important;
  border: 1px solid var(--color-blue) !important;
}
.blueBtn:hover a {
  background-color: transparent !important;
  color: var(--color-blue) !important;
  border: 1px solid var(--color-blue) !important;
}
.pinkBtn a {
  background-color: var(--color-pink) !important;
  color: var(--color-white) !important;
  border: 1px solid var(--color-pink) !important;
}
.pinkBtn:hover a {
  background-color: transparent !important;
  color: var(--color-pink) !important;
  border: 1px solid var(--color-pink) !important;
}
.greenBtn a {
  background-color: var(--color-green) !important;
  color: var(--color-white) !important;
  border: 1px solid var(--color-green) !important;
}
.greenBtn:hover a {
  background-color: transparent !important;
  color: var(--color-green) !important;
  border: 1px solid var(--color-green) !important;
}

/* CARD WITH SPAN LINEAR GRADIENT */

.card_1,
.card_2,
.card_3,
.card_4,
.card_5,
.card_6,
.card_7,
.card_8,
.card_9 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 40px 0;
  width: 15vw;
  height: 40vh;
  max-width: 30vw;
  cursor: pointer;
}

.card_1 .card_img,
.card_2 .card_img,
.card_3 .card_img,
.card_4 .card_img,
.card_5 .card_img,
.card_6 .card_img,
.card_7 .card_img,
.card_8 .card_img,
.card_9 .card_img {
  position: absolute;
  height: 40vh;
  width: 12vw;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 40px 30px;
  transition: 0.5s;
}

.card_1 .card_img::before,
.card_2 .card_img::before,
.card_3 .card_img::before,
.card_4 .card_img::before,
.card_5 .card_img::before,
.card_6 .card_img::before,
.card_7 .card_img::before,
.card_8 .card_img::before,
.card_9 .card_img::before {
  content: " ";
  position: absolute;
  top: 0;
  left: 50px;
  width: 50%;
  height: 100%;
  text-decoration: none;
  background: var(--color-white);
  border-radius: 8px;
  transform: skewX(15deg);
  transition: 0.5s;
}

.card_1 .card_img::after,
.card_2 .card_img::after,
.card_3 .card_img::after,
.card_4 .card_img::after,
.card_5 .card_img::after,
.card_6 .card_img::after,
.card_7 .card_img::after,
.card_8 .card_img::after,
.card_9 .card_img::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50;
  width: 50%;
  height: 100%;
  background: var(--color-white);
  border-radius: 8px;
  transform: skewX(15deg);
  transition: 0.5s;
  filter: blur(30px);
}

.card_1 .card_img:hover:before,
.card_1 .card_img:hover:after,
.card_2 .card_img:hover:before,
.card_2 .card_img:hover:after,
.card_3 .card_img:hover:before,
.card_3 .card_img:hover:after,
.card_4 .card_img:hover:before,
.card_4 .card_img:hover:after,
.card_5 .card_img:hover:before,
.card_5 .card_img:hover:after,
.card_6 .card_img:hover:before,
.card_6 .card_img:hover:after,
.card_7 .card_img:hover:before,
.card_7 .card_img:hover:after,
.card_8 .card_img:hover:before,
.card_8 .card_img:hover:after,
.card_9 .card_img:hover:before,
.card_9 .card_img:hover:after {
  transform: skewX(0deg);
  width: calc(100% - 90px);
}

.card_1 .card_img:nth-child(1):before,
.card_1 .card_img:nth-child(1):after,
.card_2 .card_img:nth-child(1):before,
.card_2 .card_img:nth-child(1):after,
.card_3 .card_img:nth-child(1):before,
.card_3 .card_img:nth-child(1):after,
.card_4 .card_img:nth-child(1):before,
.card_4 .card_img:nth-child(1):after,
.card_5 .card_img:nth-child(1):before,
.card_5 .card_img:nth-child(1):after,
.card_6 .card_img:nth-child(1):before,
.card_6 .card_img:nth-child(1):after,
.card_7 .card_img:nth-child(1):before,
.card_7 .card_img:nth-child(1):after,
.card_8 .card_img:nth-child(1):before,
.card_8 .card_img:nth-child(1):after,
.card_9 .card_img:nth-child(1):before,
.card_9 .card_img:nth-child(1):after {
  opacity: 0.33;
}

.card_1 .card_img span,
.card_2 .card_img span,
.card_3 .card_img span,
.card_4 .card_img span,
.card_5 .card_img span,
.card_6 .card_img span,
.card_7 .card_img span,
.card_8 .card_img span,
.card_9 .card_img span {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  pointer-events: none;
}

.card_1 .card_img span::before,
.card_2 .card_img span::before,
.card_3 .card_img span::before,
.card_4 .card_img span::before,
.card_5 .card_img span::before,
.card_6 .card_img span::before,
.card_7 .card_img span::before,
.card_8 .card_img span::before,
.card_9 .card_img span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-radius: 8px;
  background: var(--color-white-floating-block);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: 0.1s;
  animation: animate 2s ease-in-out infinite;
  box-shadow: 0 5px 15px var(--color-white-low-opacity);
}

.card_1 .card_img:hover span::before,
.card_2 .card_img:hover span::before,
.card_3 .card_img:hover span::before,
.card_4 .card_img:hover span::before,
.card_5 .card_img:hover span::before,
.card_6 .card_img:hover span::before,
.card_7 .card_img:hover span::before,
.card_8 .card_img:hover span::before,
.card_9 .card_img:hover span::before {
  top: -50px;
  width: 100px;
  height: 100px;
  opacity: 1;
}

.card_1 .card_img span::after,
.card_2 .card_img span::after,
.card_3 .card_img span::after,
.card_4 .card_img span::after,
.card_5 .card_img span::after,
.card_6 .card_img span::after,
.card_7 .card_img span::after,
.card_8 .card_img span::after,
.card_9 .card_img span::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background: var(--color-white-floating-block);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: 0.5s;
  animation: animate 2s ease-in-out infinite;
  box-shadow: 0 5px 15px var(--color-white-low-opacity);
  animation-delay: -1s;
}

.card_1 .card_img:hover span:after,
.card_2 .card_img:hover span:after,
.card_3 .card_img:hover span:after,
.card_4 .card_img:hover span:after,
.card_5 .card_img:hover span:after,
.card_6 .card_img:hover span:after,
.card_7 .card_img:hover span:after,
.card_8 .card_img:hover span:after,
.card_9 .card_img:hover span:after {
  bottom: -50px;
  right: 50px;
  width: 100px;
  height: 100px;
  opacity: 1;
}

.logo-partenaire {
  width: 15vw;
}

.card_wrapper p {
  margin: 0;
}

@keyframes animate {
  0%,
  100% {
    transform: translateY(10px);
  }

  50% {
    transform: translate(-10px);
  }
}

.card_1 .card_img .content,
.card_2 .card_img .content,
.card_3 .card_img .content,
.card_4 .card_img .content,
.card_5 .card_img .content,
.card_6 .card_img .content,
.card_7 .card_img .content,
.card_8 .card_img .content,
.card_9 .card_img .content {
  position: relative;
  left: 0;
  padding: 20px 40px;
  background: var(--color-white-middle-opacity);
  backdrop-filter: blur(10px);
  box-shadow: 0 5px 15px var(--color-white-low-opacity);
  border-radius: 8px;
  z-index: 1;
  transform: 0.5s;
  color: var(--color-white);
  align-items: center;
}

.card_1 .card_img .content h3,
.card_2 .card_img .content h3,
.card_3 .card_img .content h3,
.card_4 .card_img .content h3,
.card_5 .card_img .content h3,
.card_6 .card_img .content h3,
.card_7 .card_img .content h3,
.card_8 .card_img .content h3,
.card_9 .card_img .content h3 {
  font-size: calc(10px + 1.4vh);
  font-weight: 500;
  color: var(--color-black);
  margin-bottom: 10px;
}

.card_img div a {
  text-decoration: none;
}

.logo-description {
  width: fit-content;
  color: var(--color-black);
  text-align: center;
  font-size: var(--font-size-partenaire-description);
}

/* REALISATION */

.container_img_realisations{
  width: 50%;
  height: 100%;
}

.slick-list.draggable{
  padding: 0 !important;
}

.img_realisations img{
  height: 400px;
  /* padding: 0 15%; */
  object-fit: contain;
  margin: auto;
  position: relative;
}

.container_img_realisations .slick-list{
  padding: 0 !important;
  min-width: 100%;
}

.slider-nav img{
  height: 100px !important;
  opacity: 0.5;
  transition: opacity 0.3s ease-in-out;
  margin: auto;
}

.img_realisations {
  position: relative;
}

.img_realisations img {
  max-width: 100%;
}

.slider-nav {
  display: flex;
  justify-content: center;
  margin-top: 35px;
}

.slider-nav img:hover {
  opacity: 1;
}

.container_description{
  margin-left: 100px;
  max-width: 50%;
}

.description{
  margin-bottom: 20px;
}

.realisation{
  margin-bottom: 100px;
}


/* PRODUCTS */

.background_img {
  background-image: url("../img/slider.png");
}
.products_wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
  margin-top: 3vh;
  padding-top: 10vh;
  padding-bottom: 10vh;
}
.products_wrapper a {
  text-decoration: none;
}
.products_one {
  grid-column: 1;
  grid-row: 1;
  position: relative;
}
.products_one .products_img,
.products_two .products_img,
.products_three .products_img,
.products_four .products_img,
.products_five .products_img,
.products_six .products_img {
  position: relative;
  height: 20vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 40px 30px;
  transition: 0.5s;
}
.products_one .products_img > img,
.products_two .products_img > img,
.products_three .products_img > img,
.products_four .products_img > img,
.products_five .products_img > img,
.products_six .products_img > img {
  position: absolute;
  height: 20vh;
  transition: 0.5s;
  border-radius: 10px;
}
.products_two {
  grid-column: 2;
  grid-row: 1;
  position: relative;
}
.products_three {
  grid-column: 3;
  grid-row: 1;
  position: relative;
}
.products_four {
  grid-column: 1;
  grid-row: 2;
  position: relative;
}

.product_img {
  z-index: 3;
}

.product_img:hover {
  cursor: pointer;
  z-index: 1;
  opacity: 0.7;
  filter: blur(10px);
}

.products_one_title,
.products_two_title,
.products_three_title {
  color: var(--color-white);
  z-index: 2;
}

/* FORMULAIRE */

.project_container {
  background-color: var(--color-green);
  position: absolute;
  left: 0%;
  top: 0%;
  transform: translate(-50%, -50%);
  border-radius: 15px;
  padding-left: 5vw;
  padding-right: 5vw;
}

.project_container p {
  color: var(--color-white);
  font-size: var(--font-size-title);
  text-transform: uppercase;
  line-height: 1.2vw;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

.bloc_video {
  margin: auto;
}

.video .container {
  display: flex;
  justify-content: center;
}

.video .container {
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
  margin: 0 auto;
  overflow: hidden;
}

.video .container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.bloc_video_texte {
  display: flex;
  justify-content: space-evenly;
  flex-direction: row;
}

.bloc_texte {
  padding-left: 25px;
}

.bloc_texte h3 {
  margin: 0;
}

.formulaire_container {
  width: 60vw;
  position: relative;
  margin: 60px auto 60px auto;
  background-color: var(--color-blue);
  border-radius: 15px;
}

.formulaire {
  position: relative;
}

.formulaire > div > form > fieldset {
  display: flex;
  justify-content: center;
  border: none;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.formulaire > div > form > fieldset > ul > li {
  width: 30vw;
  margin: auto;
}

.formulaire > div > form > fieldset > ul > li {
  display: flex;
}

.flex_column {
  flex-direction: column;
}

.formulaire > div > form > fieldset > ul > li[class="double"] {
  flex-direction: column;
}

.formulaire > div > form > fieldset > ul > li[class="double center"] {
  color: var(--color-white);
  margin-top: 3vw;
  transition: color 300ms;
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
}

.formulaire > div > form > fieldset > ul > li[class="double center"] > label {
  text-align: center;
}

.formulaire > div > form > fieldset > ul > li > div {
  width: 100%;
}

.formulaire > div > form > fieldset > ul > li > div > label,
.formulaire > div > form > fieldset > ul > li > label {
  display: block;
  width: auto;
  height: auto;
  cursor: default;
  margin: 5px;
  color: var(--color-white);
  font-size: var(--font-size-paragraphe);
}

.center{
  display: block;
  margin: auto;
}

.formulaire > div > form > fieldset > ul > li > div > div > select {
  outline: 1px solid var(--color-white);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 7.5px 0;
  margin-bottom: 15px;
  color: var(--color-white-big-opacity);
  width: 95%;
  background-color: transparent;
  font-size: var(--font-size-paragraphe);
}

.formulaire > div > form > fieldset > ul > li > div > div > select > option {
  color: var(--color-white);
  background-color: var(--color-blue);
  border: 1px solid var(--color-white);
}

.formulaire > div > form > fieldset > ul > li > div > div > input {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  line-height: 30px;
  outline: 1px solid var(--color-white) !important;
  width: 90%;
  padding-left: 0.3vw;
  color: var(--color-white);
  font-size: var(--font-size-paragraphe);
}

.formulaire
  > div
  > form
  > fieldset
  > ul
  > li
  > div
  > div
  > input[name="email"] {
  background: transparent;
  border: 1px solid transparent;
  line-height: 30px;
  outline: 1px solid var(--color-white) !important;
  width: 90%;
  padding-left: 0.3vw;
  color: var(--color-white);
  font-size: var(--font-size-paragraphe);
}

.formulaire > div > form > fieldset > ul > li > div > div > input::placeholder,
.formulaire
  > div
  > form
  > fieldset
  > ul
  > li
  > div
  > div
  > input[name="email"]::placeholder {
  color: var(--color-white-big-opacity);
  font-size: var(--font-size-paragraphe);
}

.formulaire
  > div
  > form
  > fieldset
  > ul
  > li[class="double"]
  > div
  > div
  > textarea {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  line-height: 30px;
  outline: 1px solid var(--color-white) !important;
  width: 95%;
  height: 3vw;
  color: var(--color-white);
  padding-left: 0.3vw;
  font-family: Arial, Helvetica, sans-serif;
  font-size: var(--font-size-paragraphe);
}

.formulaire
  > div
  > form
  > fieldset
  > ul
  > li[class="double"]
  > div
  > div
  > textarea::placeholder {
  color: var(--color-white-big-opacity);
  font-family: Arial, Helvetica, sans-serif;
  font-size: var(--font-size-paragraphe);
}

.formulaire_informations {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: all 1s;
  background-color: var(--color-pink);
  border-radius: 15px;
  color: var(--color-white);
  width: 21vw;
  padding-left: 2vw;
  padding-right: 2vw;
}

.formulaire_informations h2 {
  font-size: var(--font-size-subtitle);
}

.formulaire_informations p {
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-size: var(--font-size-paragraphe);
}

/* FORMULAIRE PAGE CONTACT */

.formulaire_contact {
  width: 60vw;
  height: 55vh;
  position: relative;
  margin: 60px auto;
  background-color: var(--color-green);
  border-radius: 15px;
  padding: 2vw;
}

.formulaire {
  position: relative;
}

#message {
  resize: none;
  height: 100px;
}

.coordonnes .flex {
  justify-content: space-evenly;
}

.formulaire_contact > form > fieldset {
  display: flex;
  justify-content: center;
  border: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.formulaire_contact > form > fieldset > ul > li {
  display: flex;
  width: 50vw;
  justify-content: center;
}

.formulaire_contact > form > fieldset > ul > li[class="double"] {
  flex-direction: column;
}

.formulaire_contact > form > fieldset > ul > li[class="double center"] {
  color: var(--color-white);
  margin-top: 40px;
  transition: color 300ms;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.formulaire_contact > form > fieldset > ul > li > div {
  width: 100%;
}

.formulaire_contact > form > fieldset > ul > li > div > label,
.formulaire_contact > form > fieldset > ul > li > label {
  display: block;
  width: auto;
  height: auto;
  cursor: default;
  margin: 5px;
  color: var(--color-white);
  font-size: var(--font-size-paragraphe);
}

.formulaire_contact > form > fieldset > ul > li > div > div > select {
  outline: 1px solid var(--color-white);
  border: 0;
  border-radius: 10px;
  margin-bottom: 15px;
  color: rgba(255, 255, 255, 0.75);
  width: 90%;
  height: 1.5vw;
  background-color: transparent;
  font-size: var(--font-size-paragraphe);
}

.formulaire_contact > form > fieldset > ul > li > div > div > select > option {
  color: var(--color-white);
  background-color: var(--color-green);
  border: 1px solid var(--color-white);
}

.formulaire_contact > form > fieldset > ul > li > div > div > input {
  background: transparent;
  border: 0;
  line-height: 30px;
  outline: 1px solid var(--color-white) !important;
  width: 90%;
  padding-left: 0.3vw;
  color: var(--color-white);
  font-size: var(--font-size-paragraphe);
  border-radius: 10px;
}

.formulaire_contact
  > form
  > fieldset
  > ul
  > li
  > div
  > div
  > input[name="email"] {
  background: transparent;
  border: 0;
  line-height: 30px;
  outline: 1px solid var(--color-white) !important;
  width: 95%;
  padding-left: 0.3vw;
  color: var(--color-white);
  font-size: var(--font-size-paragraphe);
}

.formulaire_contact
  > form
  > fieldset
  > ul
  > li
  > div
  > div
  > input::placeholder,
.formulaire_contact
  > form
  > fieldset
  > ul
  > li
  > div
  > div
  > input[name="email"]::placeholder {
  color: var(--color-white-big-opacity);
  font-size: var(--font-size-paragraphe);
}

.formulaire_contact
  > form
  > fieldset
  > ul
  > li[class="double"]
  > div
  > div
  > textarea {
  background: transparent;
  border-radius: 10px;
  border: 0;
  line-height: 30px;
  outline: 1px solid var(--color-white) !important;
  width: 95%;
  height: 3vw;
  color: var(--color-white);
  padding-left: 0.3vw;
  font-family: Arial, Helvetica, sans-serif;
  font-size: var(--font-size-paragraphe);
}

.formulaire_contact
  > form
  > fieldset
  > ul
  > li[class="double"]
  > div
  > div
  > textarea::placeholder {
  color: var(--color-white-big-opacity);
  font-family: Arial, Helvetica, sans-serif;
  font-size: var(--font-size-paragraphe);
}

.nous_rejoindre {
  margin-bottom: 70px;
}
/* DEVIS BOITE */

.devis_container {
  position: absolute;
  left: 15%;
  top: -7%;
  transform: translate(-50%, -50%);
  transition: all 1s;
  background-color: var(--color-pink);
  border-radius: 15px;
  color: var(--color-white);
  width: 20vw;
  padding-left: 15px;
  padding-right: 15px;
  z-index: 1;
}

/* FORMULAIRE DEVIS */

.title_form_devis {
  display: block;
  width: 60vw;
  margin: auto;
}

form[action="devis.html"] {
  /* width: 60vw; */
  height: fit-content;
  position: relative;
  margin: 70px auto;
  background-color: var(--color-green);
  border-radius: 15px;
  padding: 2vw;
}

form[action="devis.html"] > fieldset {
  display: flex;
  justify-content: center;
  border: none;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

form[action="devis.html"] > fieldset > ul > li {
  display: flex;
  width: 95%;
  margin: auto;
  justify-content: center;
}

form[action="devis.html"] > fieldset > ul > li[class="double"] {
  flex-direction: column;
}

form[action="devis.html"] > fieldset > ul > li[class="double center"] {
  color: var(--color-white);
  margin-top: 4vw;
  transition: color 300ms;
  display: flex;
  flex-direction: column;
  align-items: center;
}

form[action="devis.html"] .checkbox_formulaire p {
  margin: 10px 0;
}

form[action="./#contact"] .checkbox_formulaire p {
  margin: 10px 0;
}

form[action="devis.html"] > fieldset > ul > li > div {
  width: 100%;
}

form[action="devis.html"] > fieldset > ul > li > div > label,
form[action="devis.html"] > fieldset > ul > li > label {
  display: block;
  width: auto;
  height: auto;
  cursor: default;
  margin: 5px 0;
  color: var(--color-white);
  font-size: var(--font-size-paragraphe);
}

.form_checkbox {
  justify-content: flex-start !important;
  align-items: center;
  width: 95%;
  margin: auto;
}

.form_checkbox span {
  margin-left: 10px;
  font-size: var(--font-size-paragraphe);
  color: var(--color-white);
}

form[action="devis.html"] > fieldset > ul > li > div > div > select {
  border: 0;
  outline: 1px solid var(--color-white);
  border-radius: 10px;
  margin-bottom: 15px;
  padding: 7.5px 0;
  color: var(--color-white-big-opacity);
  width: 90%;
  /* height: 1.5vw; */
  background-color: transparent;
  font-size: var(--font-size-paragraphe);
}

form[action="devis.html"] > fieldset > ul > li > div > div > select > option {
  color: var(--color-white);
  background-color: var(--color-green);
  border: 1px solid var(--color-white);
}

form[action="devis.html"] > fieldset > ul > li > div > div > input {
  background: transparent;
  border: 0;
  line-height: 30px;
  outline: 1px solid var(--color-white) !important;
  width: 90%;
  padding-left: 0.3vw;
  color: var(--color-white);
  font-size: var(--font-size-paragraphe);
  border-radius: 10px;
}

form[action="devis.html"]
  > fieldset
  > ul
  > li
  > div
  > div
  > input[name="site_web"] {
  background: transparent;
  border: 0;
  line-height: 30px;
  outline: 1px solid var(--color-white) !important;
  width: 95%;
  padding-left: 0.3vw;
  color: var(--color-white);
  font-size: var(--font-size-paragraphe);
  border-radius: 10px;
}

form[action="devis.html"]
  > fieldset
  > ul
  > li
  > div
  > div
  > input[name="email"] {
  background: transparent;
  border: 0;
  line-height: 30px;
  outline: 1px solid var(--color-white) !important;
  /* width: 95%; */
  padding-left: 0.3vw;
  color: var(--color-white);
  font-size: var(--font-size-paragraphe);
}

form[action="devis.html"] > fieldset > ul > li > div > div > input::placeholder,
form[action="devis.html"]
  > fieldset
  > ul
  > li
  > div
  > div
  > input[name="email"]::placeholder {
  color: var(--color-white-big-opacity);
  font-size: var(--font-size-paragraphe);
}

form[action="devis.html"]
  > fieldset
  > ul
  > li[class="double"]
  > div
  > div
  > textarea {
  background: transparent;
  border-radius: 10px;
  border: 0;
  line-height: 30px;
  outline: 1px solid var(--color-white) !important;
  width: 95%;
  height: 3vw;
  color: var(--color-white);
  padding-left: 0.3vw;
  font-family: Arial, Helvetica, sans-serif;
  font-size: var(--font-size-paragraphe);
}

form[action="devis.html"]
  > fieldset
  > ul
  > li[class="double"]
  > div
  > div
  > textarea::placeholder {
  color: rgba(255, 255, 255, 0.75);
  font-family: Arial, Helvetica, sans-serif;
  font-size: var(--font-size-paragraphe);
}

form[action="devis.html"] > fieldset > ul > li[class="center capchat"] {
  display: flex;
  width: 50vw;
  justify-content: center;
  flex-direction: column;
  align-items: flex-start;
}

.checkbox_input {
  all: unset;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 30px;
  z-index: 5;
  opacity: 0;
  cursor: pointer;
}
.checkbox_label {
  all: unset;
  width: 66px !important;
  height: 30px !important;
  background: #ccc;
  position: relative;
  display: inline-block !important;
  border-radius: 46px;
  transition: 0.4s;
  box-sizing: border-box;
}
.checkbox_label:after {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  left: 0;
  top: 0;
  z-index: 2;
  background: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  transition: 0.4s;
}
.checkbox_input:checked + .checkbox_label {
  background-color: #4bd865;
}
.checkbox_input:checked + .checkbox_label:after {
  left: 32px;
}
.checkbox_formulaire p {
  color: var(--color-white);
  width: 95%;
  margin: 15px auto;
  text-align: justify;
}

.checkbox_formulaire p a {
  color: var(--color-white);
}
.checkbox_formulaire {
  position: relative;
  width: 75px;
  margin: auto;
}

/*FORMULAIRE*/

#captchagc,
#captchagc * {
  box-sizing: border-box;
  outline: none;
}
#captchagc {
  position: relative;
  background-color: var(--color-light-grey);
  border: 1px solid var(--color-light-grey);
  color: var(--color-font);
  width: 250px;
  height: 70px;
  overflow: hidden;
  margin: 10px auto;
  border-radius: 15px;
}
#captchagc > img:nth-of-type(1) {
  position: absolute;
  top: 18px;
  left: 18px;
  width: 34px;
  height: 34px;
  z-index: 2;
  margin: 0 !important;
}
#captchagc > img:nth-of-type(2) {
  position: absolute;
  top: 40px;
  left: 25px;
  width: 25px;
  height: 25px;
  z-index: 3;
  margin: 0 !important;
  animation: 3s ease-out 1s infinite running captchagc;
}
@keyframes captchagc {
  0% {
    left: 25px;
  }
  25% {
    left: 25px;
  }
  50% {
    left: 210px;
  }
  100% {
    left: 210px;
  }
}
#captchagc > img:nth-of-type(1) + div {
  position: absolute;
  top: 14px;
  right: 14px;
  border: 1px solid var(--color-font);
  border-radius: 4px;
  width: 41px;
  height: 40px;
  background-color: var(--color-white);
  z-index: 1;
}
#captchagc > img:nth-of-type(1) + div.accept {
  border: 1px solid #f3990c;
}
#captchagc > img:nth-of-type(1) + div.hover {
  border: 1px solid #1cd129;
}
#captchagc:before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: ">>>>>>>>";
  font-family: "Open sans", sans-serif;
  font-size: var(--font-size-paragraphe);
}
#captchagc.valid:after {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  content: "";
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 3;
}
#captchagc > i {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  opacity: 0;
  transition: ease-in-out 200ms opacity, ease-in-out 200ms left;
}
#captchagc.valid > i:nth-of-type(1) {
  opacity: 1;
  left: 17%;
}
#captchagc > i:nth-of-type(1):before {
  content: "\f00c";

  font-family: "Font Awesome 6 Pro";
  font-weight: 900;

  padding: 5px;
  color: #12d954;
  font-size: 30px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 100%;
  background-color: var(--color-white);
  border: 2px solid #12d954;
}
#captchagc > i:nth-of-type(2) {
  position: absolute;
  top: 23px;
  left: 113px;
  z-index: 5;
  font-size: var(--font-size-title);
  opacity: 1;
}
#captchagc.valid > img:nth-of-type(1) {
  top: 18px !important;
  left: 197px !important;
}
#captchagc.valid > img:nth-of-type(2) {
  display: none;
}

/* CONFIANCE PARTENAIRES */

.confiance_container {
  /*display: flex;*/
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.confiance_title h2 {
  text-align: center;
}

.main_confiance_image_container {
  margin-bottom: 50px;
  margin-top: 20px;
}

.main_confiance_image_container div div {
  display: flex;
  align-items: center;
}

.main_confiance_image_container li {
  display: flex;
  flex-direction: row !important;
  align-items: center;
}

.confiance_image_container img:hover {
  filter: grayscale(0%);
  cursor: pointer;
  transform: scale(1.1);
}

.confiance_image_container img {
  width: 9vw;
  border-radius: 10px;
  margin: 2vw;
  filter: grayscale(70%);
}

/* SERVICES */

.blocs_lien {
  transition-delay: 0s !important;
}

.blocs_lien h2 {
  margin: 0px 0px 10px 0px;
}

.blocs_lien:hover {
  box-shadow: 0 0 5px 3px #adadad;
}

.service-accueil div a {
  font-size: var(--font-size-subtitle);
  display: inline-block;
  border-radius: 20px;
  color: var(--color-white);
  text-decoration: none;
  text-align: center;
  padding: 5px 12px;
}

.bloc-accueil li {
  height: 345px;
}

.service-accueil {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 45vh !important;
}

#service1,
#service2,
#service3 {
  width: 55vw;
  height: 13vw;
  background: #f4f4f4;
  border-radius: 20px;
  box-shadow: 0px 11px 19px var(--color-light-grey);
  display: flex;
  justify-content: center;
  align-items: center;
}

#service1:hover {
  background: var(--color-blue-low-opacity);
  box-shadow: 0px 11px 19px #808080b9;
}

#service2 > div,
#service3 > div {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}

#service1 .service_image_block {
  width: 50vw;
}

#service1 .service_image_block img {
  width: 25vw;
  height: 16vw;
  z-index: 2;
  margin: 0;
}

#service1 .service_text_block {
  width: 47vw;
  text-align: left;
}

#service1 a {
  background-color: var(--color-blue);
  border: 1px solid var(--color-blue);
}

#service2:hover {
  background: var(--color-pink-low-opacity);
  box-shadow: 0px 11px 19px #808080b9;
}

#service2 .service_image_block {
  width: 50vw;
  z-index: 2;
}

#service2 .service_text_block {
  width: 50vw;
  text-align: right;
}

#service2 a {
  background-color: var(--color-pink);
  border: 1px solid var(--color-pink);
}

#service3:hover {
  background: var(--color-green-low-opacity);
  box-shadow: 0px 11px 19px #808080b9;
}

#service3 .service_image_block {
  width: 50vw;
  z-index: 2;
}

#service1 .service_image_block img,
#service2 .service_image_block img,
#service3 .service_image_block img {
  width: 26vw;
  height: 22vw;
  object-fit: contain;
  z-index: 2;
}

#service3 .service_text_block {
  width: 50vw;
  text-align: left;
}

#service3 a {
  background-color: var(--color-green);
  border: 1px solid var(--color-green);
}

#service1 a:hover {
  background: none;
  color: var(--color-blue);
  border: 1px solid var(--color-blue);
}

#service2 a:hover {
  background: none;
  color: var(--color-pink);
  border: 1px solid var(--color-pink);
}

#service3 a:hover {
  background: none;
  color: var(--color-green);
  border: 1px solid var(--color-green);
}

/* Nuage */
.nuage{
  margin-bottom: 30px;
  text-align: justify!important;
}
.nuage h3{
  font-weight: initial;
}

img.center.googlesearchImg {
  margin-bottom: 50px;
  transform: scale(0.8);
  transition: all 0.3s ease-in-out;
}

img.center.googlesearchImg:hover {
  transform: scale(0.9);
}

/* Realisation */

#realisation div img {
  margin: 5px 0 !important;
  border-radius: 20px;
}

.bloc-accueil a {
  display: block;
  height: 100%;
  width: 100%;
}

.titre-realisation {
  padding-top: 30px;
  margin: 0 -25px -20px -25px;
  font-size: 30px;
  border-radius: 25px;
  width: 115%;
  height: 100%;
  background-color: var(--color-light-grey-opacity);
}

.titre-realisation:not(:hover) {
  opacity: 0;
}

.titre-realisation h3 {
  font-weight: normal;
}

.box-realisation li a {
  border-radius: 25px;
}

.box-realisation li a:hover {
  transform: scale(1.2);
  transition-duration: 300ms;
}

.all-realisation {
  width: 415px;
  margin: 0 auto 70px auto;
  padding: 8px 10px;
  border-radius: 30px;
  background-color: var(--color-realisation-button);
  border: 1px solid var(--color-realisation-button);

  display: none;
}

.all-realisation:hover {
  background: none;
  border: 1px solid var(--color-realisation-button);
}

.all-realisation:hover a {
  color: var(--color-realisation-button);
}

.all-realisation a {
  text-decoration: none;
  font-size: var(--font-size-subtitle);
  color: #f3f2f2;
}

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

#calendlyClick {
  background-color: var(--color-white);
  border: 1px solid var(--color-white);
  border-radius: 20px;
  /* padding: 10px 55px; */
  padding: 10px 1vw;
  color: var(--color-pink);
  font-size: var(--font-size-paragraphe);
  text-align: center;
  /* width: max-content; */
  margin: 20px auto;
}

#calendlyClick:hover {
  background: none;
  color: var(--color-white);
  border: 1px solid var(--color-white);
}

#calendlyClick :nth-child(1) {
  font-size: var(--font-size-subtitle);
  font-weight: bold;
}

#calendlyClick:hover {
  cursor: pointer;
}

.rdvButton,
.btn {
  width: fit-content;
  margin: 0 auto 2em auto;
  cursor: pointer;
}

.backgroundBorder h2 {
  margin-top: 0;
}

.backgroundBorder .rdvButton {
  margin-top: 2em;
}

.rdvButton a,
.btn a {
  text-decoration: none;
  font-weight: bold;
  padding: 10px 55px;
  border-radius: 25px;
  display: flex;
  width: fit-content;
  flex-direction: column;
  text-align: center !important;
}

.rdvButton a :nth-child(1),
.btn a :nth-child(1) {
  font-size: var(--font-size-subtitle);
}

.rdvButton a :nth-child(2),
.btn a :nth-child(2) {
  font-size: var(--font-size-paragraphe);
}

#splitedView {
  display: flex;
  flex-direction: row;
  align-items: center;
}

/* Footer */

.bloc-footer div {
  margin: 0 20px;
}

.footer_follow {
  width: 100%;
}

#footer span {
  padding-top: 20px;
  font-size: var(--font-size-title);
  font-weight: bold;
  margin: 20px 0 10px 0;
  display: inline-block;
}

#f-services,
#f-aPropos {
  text-align: end;
}

.liste-footer {
  min-width: 160px;
  text-align: end;
}

.liste-footer ul {
  list-style-type: none;
  padding: 0;
}

.liste-footer ul li {
  line-height: 30px;
}

.reseau-sociaux {
  margin: auto auto !important;
  font-size: 30px;
  padding-top: 1em;
}

#f-reseau,
#f-gencontact {
  width: 33%;
}

#f-gencontact {
  text-align: start;
}

/* All Realisation */

#portfolio,
#gencontact-portfolio,
#house {
  padding: 0 20px;
  width: 33%;
  margin: 10px 0;
}

.allR-article > div {
  padding: 0 20px;
}

.fond-gris {
  background: url(../img/slider.png);
  background-size: cover;
  width: 100%;
  margin: 0 auto;
  padding: 2% 10% 5% 10%;
}

#emailing,
#print {
  padding-top: 5%;
  padding-bottom: 2%;
}

#dev {
  padding-bottom: 2%;
}

#footer-gris {
  background-color: #cacaca;

  width: 100%;
  height: 15em;
}

a > #footer-gris {
  text-decoration: none;
}

#contenu-footer-realisation {
  width: 35em;
  position: relative;
  margin: auto;
  top: 20%;
  color: #010101;
}

#footer .tic-tac {
  width: 55px;
  height: 10px;
  z-index: 0;
  border-radius: 50px;
  background-color: rgba(255,255,255,0.3);
  position: absolute;
}

#footer {
  background-color: #444;
  padding-bottom: 2em;
}

#footer h2,
#footer {
  color: var(--color-white);
  padding-top: 1em;
}

#footer {
  position: absolute;
  /*overflow: hidden;*/
  width: 100%;
}
#footer a {
  padding: 0.5 0;
  color: rgba(255,255,255,0.8);
  text-decoration: none;
}
#footer a:hover {
  text-decoration: underline;
}
#footer > div > p
{
  font-size: 12px;
  text-align: center;
}

#contenu-footer-realisation div :not(img) {
  text-decoration: none;
}

/*  BOTTOM SLIDER ------- AVIS  */

.partenaire_container_back {
  position: relative;
  width: 70vw;
  height: 450px;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  margin: 0px auto 85px auto;
}

.bloc_texte_avis {
  position: relative;
  top: 45%;
  transform: translate(-50%, -50%);
  left: 55%;
}

.etoileGC{
  justify-content: start !important;
}

.gcNbEtoile{
  color: #f7c22e;
  margin: 0 10px 0 0;
  font-size: 1.4vw;
}

.nbAvis{
  margin-top: 10px;
}

.nbAvis a {
  text-decoration: none;
  color: var(--color-green);
  text-decoration: underline;
}

.bloc_texte_avis > h2 {
  color: var(--color-black);
  /* position: relative;
  left: 20%; */
  width: 20vw;
  /* top: 30%; */
  /* transform: translate(-50%, -50%); */
  font-size: var(--font-size-title);
  margin: 0;
  margin-bottom: 20px;
}

.bloc_texte_avis > h3{
  color: var(--color-black);
  width: 20vw;
  margin-top: 40px;
  font-size: var(--font-size-subtitle);
}

.partenaire_container_back b {
  color: var(--color-green);
}

.bloc_texte_avis > p {
  width: 20vw;
  color: var(--color-black);
  /* position: relative; */
  /* left: 20%; */
  /* top: 50%; */
  /* transform: translate(-50%, -50%); */
  font-size: var(--font-size-paragraphe);
}

.partenaire_container_back_button {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, -50%);
  background-color: var(--color-green);
  border-radius: 10px;
  padding: 10px 30px;
  cursor: pointer;
}
.partenaire_container_back_button > a {
  color: var(--color-white);
  font-size: var(--font-size-paragraphe);
  text-decoration: none;
}

.partenaire_container {
  width: 48vw;
  position: absolute;
  left: 75%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.partenaire_container li {
  background-color: #f8f8f8;
  width: 80% !important;
  overflow: hidden;
  padding: 0px 20px 0px 20px;
  border-radius: 10px;
  height: 330px !important;
}

.testimonials_container {
  cursor: grab;
}

.testimonial {
  position: relative;
}
.testimonial h3 {
  font-size: 1.10em;
}

.testimonial > div:not(.testimonial_stars_container) {
  /* height: 65%; */
}

.testimonial p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 9;
  -webkit-box-orient: vertical;
}

.testimonial_stars_container,
.testimonial_stars_container2,
.testimonial_stars_container3,
.testimonial_stars_container4,
.testimonial_stars_container5 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.testimonial_stars_container {
  left: 18%;
  top: 80%;
}

.testimonial_stars_container2 {
  left: 18%;
  top: 80%;
}

.testimonial_stars_container3 {
  left: 18%;
  top: 80%;
}

.testimonial_stars_container4 {
  left: 18%;
  top: 80%;
}

.testimonial_stars_container5 {
  left: 18%;
  top: 80%;
}

.testimonial_stars_container img,
.testimonial_stars_container2 img,
.testimonial_stars_container3 img,
.testimonial_stars_container4 img,
.testimonial_stars_container5 img {
  width: 1.5vw;
}

.etoile_gris {
  filter: grayscale(100%);
}

/* ---------- */

.reveal-loaded .reveal [class*="reveal-"] {
  opacity: 1;
  transform: translateY(30px);
}

.reveal-loaded [class*="reveal"] {
  transition: 1s cubic-bezier(0.5, 0, 0, 1);
}

/* On ajoute du délai */

.reveal-loaded .reveal-1 {
  transition-delay: 0.2s;
}

.reveal-loaded .reveal-2 {
  transition-delay: 0.4s;
}

.reveal-loaded .reveal-3 {
  transition-delay: 0.6s;
}

/* Bloc Realisation */

.bloc-accueil {
  z-index: 8;
  position: relative;
  margin: 20px auto;
  padding-left: 0;
  text-align: center;
  font-size: 0;
  list-style: none;
}
.bloc-accueil > li {
  display: inline-block;
  width: 17vw;
  height: 12vw;
  margin: 0px 30px;
  max-width: 435px;
  border-radius: 4px;
  font-size: var(--font-size-paragraphe);
  vertical-align: top;
  color: var(--color-white);
  perspective: 500px;
}
.bloc-accueil > li > a {
  display: block;
  position: relative;
  width: 90%;
  margin: auto;
  height: 100%;
  text-decoration: none;
  color: rgb(21, 21, 21);
  background-color: rgb(219, 219, 219);
  background-position: 50% 50%;
  background-size: cover;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  perspective: 500px;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
}
.bloc-accueil > li > a.anim {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
  -webkit-animation: leave-animation 0.5s forwards
    cubic-bezier(0.18, 2.07, 1, 1);
  -moz-animation: leave-animation 0.5s forwards cubic-bezier(0.18, 2.07, 1, 1);
  -o-animation: leave-animation 0.5s forwards cubic-bezier(0.18, 2.07, 1, 1);
  animation: leave-animation 0.5s forwards cubic-bezier(0.18, 2.07, 1, 1);
  -ms-animation: leave-animation 0.5s forwards cubic-bezier(0.18, 2.07, 1, 1);
}
@keyframes leave-animation {
  100% {
    transform: rotateX(0deg) rotateY(0deg);
  }
}
.bloc-accueil .titre-bloc {
  position: absolute;
  bottom: 10px;
  left: 0;
  padding: 3px 10px;
  text-align: left;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 2px;
  color: #333;
  background-color: rgba(255, 255, 255, 0.9);
}
.bloc-accueil .prix-bloc {
  position: absolute;
  bottom: 40px;
  left: 10px;
  width: 100px;
  height: 100px;
  padding: 40px 0;
  text-align: center;
  font-size: var(--font-size-subtitle);
  color: var(--color-white);
  transform: rotate(15deg);
}
.bloc-accueil .btn-bloc {
  position: absolute;
  bottom: 10px;
  left: 0;
  padding: 3px 10px;
  text-align: left;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 2px;
  color: #333;
  background-color: rgba(255, 255, 255, 0.9);
}

/* TPL CONTENUS */

.classTemporaire {
  background-color: var(--color-pink-low-opacity);
}

.container-contenu {
  background-color: var(--color-white);
}

.texte_t3 {
  color: var(--color-white);
}

.container_tic_tac {
  position: fixed;
  top: 0;
  width: 100vw;
}

.video div iframe{
  display: block;
  margin: auto;
}

.bloc_tic_tac {
  overflow: hidden;
  z-index: -3;
}

.contenu_article_22,
.contenu_article_21,
.contenu_article_23 {
  padding: 1.5em 0;
}

.contenu-texte {
  padding-top: 20px;
  padding-bottom: 20px;
}

.image-full {
  position: relative;
  left: 0;
}

.objectif img {
  margin-top: 2em;
}

.contenu-texte img[width="100%"] {
  height: 300px;
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
  background: linear-gradient(to left, transparent, rgb(39, 39, 39));
}

/* SEO */

.seo_site{
  justify-content: space-between;
  align-items: center;
}

.btnRdvSeo{
  margin-top: 50px;
}

.site_url .fa-magnifying-glass{
  color: var(--color-green);
}

.verifier a, .site_url{
  text-decoration: none;
  font-weight: bold;
}

.btnPlus{
  margin: 40px auto 0 auto !important;
}

.btnPlus a {
  background-color: white !important;
  color: var(--color-green) !important;
}

.site_url .fa-magnifying-glass{
  margin-right: 10px;
}

.container_seo{
  justify-content: space-between;
  flex-wrap: wrap;
}

.container2_seo{
  width: 50%;
  padding: 10px 30px;
}

.verifier a {
  padding: 5px 20px;
  border-radius: 25px;
}

.p_seo{
  color: grey;
  font-style: italic;
  margin: 10px 0;
}

.site_url{
  padding: 5px 0;
}

.subtitle_seo{
  margin-bottom: 40px;
}

.subtitle_seo, .title_seo{
  text-align: center;
}

h2.title_seo{
  margin: 40px 0;
}


/* TOUTES NOS REALISATIONS */

.dev-realisation .container,
.print_realisation .container,
.emailing_realisation .container {
  display: flex;
  justify-content: space-around;
}

/* NOTRE AGENCE */

.accroche_agence {
  line-height: 2.5;
}

.container_img_equipe img[width="30%"] {
  height: 250px;
  object-fit: cover;
  object-position: top;
}

.texte-agence {
  padding-bottom: 2em;
}

.personnages {
  margin-bottom: 3em;
}

.personnages .flex {
  /*justify-content: space-evenly;*/
  flex-wrap: wrap;
  gap: 20px 45px;
}

.personnages img {
  margin: 0;
  width: 100%;
  height: 100%;
  object-fit: scale-down;
  vertical-align: middle;
  aspect-ratio: 1 / 1;
  filter: drop-shadow(0px 8px 0.5rem rgba(0, 0, 0, 0.5));

  transition: 200ms ease-in-out all;
  position: relative;
  top: 0;
}

.implantation {
  padding-top: 4em;
  padding-bottom: 2em;
}

.equipe_photo {
  display: flex;
  flex-direction: column;
}

.equipe_photo div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  margin-top: 20px;
}

.equipe_photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fond_gris {
  background-color: #404040;
}
.fond_bleu {
  background-color: var(--color-blue);
}
.fond_rose {
  background-color: var(--color-pink);
}
.fond_vert {
  background-color: var(--color-green);
}

.fond_gris,
.fond_bleu,
.fond_rose,
.fond_vert {
  border-radius: 25px;
  position: relative;
  margin: 10px 20px;
}

.fond_gris span,
.fond_bleu span,
.fond_rose span,
.fond_vert span {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: 0.25s all ease-in-out;
  width: fit-content;
  color: var(--color-white);
  margin: 0;
}

.fond_gris .h3,
.fond_bleu .h3,
.fond_rose .h3,
.fond_vert .h3 {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: 0.25s all ease-in-out;
  width: fit-content;
  color: var(--color-white);
  margin: 0;
}

.fond_gris:hover img,
.fond_bleu:hover img,
.fond_rose:hover img,
.fond_vert:hover img {
  transition: 0.25s all ease-in-out;
  opacity: 0;
  top: 100%;
}

/* taupe */
.reveal-1.hit img {
  animation: hitAnimation 0.50s ease;
}

@keyframes hitAnimation {
  0% {
    transform: rotateX(0deg) scale(1);
    transform-origin: bottom center;
    
  }
  30% {
    transform: rotateX(60deg) scale(1.2);
    transform-origin: bottom center;
    filter: brightness(0.8) saturate(1.5) hue-rotate(0deg);
  }
  100% {
    transform: rotateX(60deg) scale(1.2);
    transform-origin: bottom center;
    filter: brightness(0.8) saturate(2) hue-rotate(0deg);
  }
}

.no-hover {
  transform: none!important;
}

.fond_gris.select img,
.fond_bleu.select img,
.fond_rose.select img,
.fond_vert.select img {
  opacity: 1;
  top: 0;
}

.game .fond_gris:not(.select) img,
.game .fond_bleu:not(.select) img,
.game .fond_rose:not(.select) img,
.game .fond_vert:not(.select) img {
  opacity: 1;
  top: 100%;
}
/* taupe */


.fond_gris:hover span,
.fond_bleu:hover span,
.fond_rose:hover span,
.fond_vert:hover span {
  opacity: 1;
}

.personnages .flex div {
    width: 260px;
    height: 260px;
    aspect-ratio: 1 / 1;
    text-align: center;
    margin: 0;
    overflow: hidden;
}

.personnages .flex .h3 {
  font-size: var(--font-size-title);
}

.personnages .flex {
  margin-top: 2em;
}

/* REFERENCEMENT */

#blocs-referencement {
  display: flex;
  justify-content: space-around;
  margin-bottom: 2em;
}

#blocs-referencement a {
  text-decoration: none;
  color: var(--color-black);
}

#blocs-referencement div {
  width: 15vw;
  padding: 2em 0;
  text-align: center;
  font-size: large;
  border-radius: 10px;
  background-color: #cacaca;
}

.local {
  display: inline-block;
}

/* PRINT */

.card_container2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.card_print img {
  height: 200px;
  width: 100% !important;
  object-fit: contain;
  object-position: center;
  margin-bottom: 1em;
}

.card_print {
  /*background-color: var(--color-background-grey) !important;*/
  border-radius: 15px !important;
  padding: 20px 30px !important;
  box-shadow: 0 0 12px 0px rgba(0, 0, 0, 0.1) !important;
  width: 30%;
  padding: 15px;
  margin-bottom: 50px;
}

.covering .card_print {
  width: 37%;
}

.bloc_separation {
  margin-bottom: 5em;
}

.baniere {
  display: flex;
  align-items: center;
}

.baniere img {
  width: 22vw;
  height: auto;
}

.text_baniere {
  padding-right: 3em;
  text-align: justify;
}

/* FAQ */
.question {
  background-color: #375385;
  color: var(--color-white);
  padding: 1em;
  border-bottom: 1px solid white;
}

#faq .desactive {
  display: none;
}

.reponse {
  margin-bottom: 2em;
  padding: 1em;
  border-radius: 0 0 10px 10px;
  color: var(--color-white);
  line-height: 1.8;
}

/* TPL SOLUTIONS */

.texte_web,
.texte_marketing,
.texte_print,
.texte_agence,
.texte_devis,
.t3 {
  height: 300px;
  overflow: hidden;
  border-radius: 10px;
  padding-left: 50px;
  padding-right: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-repeat: no-repeat !important;
}

.texte_web {
  background: linear-gradient(to left, transparent, rgb(39, 39, 39)),
    url("../img/img_upload/solutions_digitales.jpg");
  background-position: 50% 95%;
  background-size: cover;
}

.texte_marketing {
  background: linear-gradient(to left, transparent, rgb(39, 39, 39)),
    url("../img/img_upload/solutions_marketing.jpg");
  background-position: 50% 60%;
  background-size: cover;
}

.texte_print {
  background: linear-gradient(to left, transparent, rgb(39, 39, 39)),
    url("../img/img_upload/solutions_print.jpg");
  background-position: 50% 80%;
  background-size: cover;
}

.texte_agence {
  background: linear-gradient(to left, transparent, rgb(39, 39, 39)),
    url("../img/fond_bloc/agence.jpg");
  background-position: 50% 45%;
  background-size: 130%;
}

.texte_41 {
  background: linear-gradient(to bottom, transparent, rgb(39, 39, 39)),
    url("../img/fond_bloc/charte_qualite.jpg");
  background-position: 50% 49%;
  background-size: cover;
}

.texte_devis {
  background: linear-gradient(to left, transparent, rgb(39, 39, 39)),
    url("../img/fond_bloc/devis.jpg");
  background-position: 50% 78%;
  background-size: cover;
}

.texte_faq {
  background: linear-gradient(to left, transparent, rgb(39, 39, 39)),
    url("../img/fond_bloc/faq.jpg");
  background-position: 50% 49%;
  background-size: cover;
}

.texte_44 {
  background: linear-gradient(to left, transparent, rgb(39, 39, 39)),
    url("../img/fond_bloc/engagement.jpg");
  background-position: 50% 70%;
  background-size: cover;
}

.texte_45 {
  background: linear-gradient(to left, transparent, rgb(39, 39, 39, 0.6)),
    url("../img/fond_bloc/paques.png");
  background-position: 50% 50%;
  background-size: cover;
}

.texte_agence p {
  margin: 0;
  line-height: initial;
}

.texte_devis p,
.texte_web p,
.texte_marketing p,
.texte_print p,
.texte_agence p,
.texte_faq p {
  color: var(--color-white);
}

.texte_agence span,
.texte_agence div,
.texte_devis span,
.texte_devis div,
.texte_web span,
.texte_web div,
.texte_marketing span,
.texte_marketing div,
.texte_print span,
.texte_print div {
  color: var(--color-white);
}

img[align="left"] {
  margin-right: 2em;
}

img[align="right"] {
  margin-left: 2em;
}

.site_vitrine,
.texte_27 {
  background: linear-gradient(to bottom, transparent, rgb(39, 39, 39)),
    url("../img/img_upload/63da40b331b280.18459789.jpg");
  background-position: 50% 40%;
  background-size: cover;
}

.site_e_commerce,
.texte_28 {
  background: linear-gradient(to bottom, transparent, rgb(39, 39, 39)),
    url("../img/fond_bloc/ecommerce.jpg");
  background-position: 35% 60%;
  background-size: cover;
}

.site_catalogue,
.texte_29 {
  background: linear-gradient(to bottom, transparent, rgb(39, 39, 39)),
    url("../img/fond_bloc/catalogue.jpg");
  background-position: 50% 65%;
  background-size: cover;
}

.intranet,
.texte_30 {
  background: linear-gradient(to bottom, transparent, rgb(39, 39, 39)),
    url("../img/fond_bloc/intranet.jpg");
  background-position: 25% 80%;
  background-size: cover;
}

.locationWeb,
.texte_36 {
  background: linear-gradient(to bottom, transparent, rgb(39, 39, 39)),
    /* url("../img/img_upload/63e219de4b6844.41070573.jpg"); */
      url("../img/fond_bloc/webloca.jpg");
  background-position: 50% 50%;
  background-size: cover;
}

.webApp,
.texte_37 {
  background: linear-gradient(to bottom, transparent, rgb(39, 39, 39)),
    url("../img/fond_bloc/webapp.jpg");
  background-position: 50% 30%;
  background-size: cover;
}

.seo,
.texte_21 {
  background: linear-gradient(to bottom, transparent, rgb(39, 39, 39)),
    url("../img/fond_bloc/seo.jpeg");
  background-position: 25% 75%;
  background-size: cover;
}

.sea,
.texte_22 {
  background: linear-gradient(to bottom, transparent, rgb(39, 39, 39)),
    url("../img/fond_bloc/sea.jpeg");
  background-position: 50% 50%;
  background-size: cover;
}

.vseo,
.texte_23 {
  background: linear-gradient(to bottom, transparent, rgb(39, 39, 39)),
    url("../img/img_upload/63da4a52795bb0.07469378.jpg");
  background-position: 50% 55%;
  background-size: cover;
}

.email,
.texte_24 {
  background: linear-gradient(to bottom, transparent, rgb(39, 39, 39)),
    url("../img/fond_bloc/emailing.jpeg");
  background-position: 25% 55%;
  background-size: cover;
}

.sms,
.texte_25 {
  background: linear-gradient(to bottom, transparent, rgb(39, 39, 39)),
    url("../img/fond_bloc/reseau.jpeg");
  background-position: 60% 30%;
  background-size: cover;
}

.video_entreprise,
.texte_26 {
  background: linear-gradient(to bottom, transparent, rgb(39, 39, 39)),
    url("../img/fond_bloc/vseo.jpg");
  background-position: 60% 60%;
  background-size: cover;
}

.liste_webVitrine,
.liste_webEcommerce,
.liste_webCatalogue,
.liste_webPro,
.logiciel,
.liste_webloca,
.objectif,
.opportinite_video,
.vdeo_entreprise {
  margin-top: 3em;
}

.liste_webVitrine ul li,
.liste_webEcommerce ul li,
.liste_webCatalogue ul li,
.liste_webPro ul li {
  list-style-type: circle;
}

.type-service > a > div div {
  color: var(--color-white);
  width: 95%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: start !important;
}

.accroche {
  margin: 3em 0;
}

.type-service {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 50px;
  margin-bottom: 3em;
}

.type-service > a > div {
  border-radius: 10px;
  padding-left: 25px;
  height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

.type-service > a {
  text-decoration: none;
  color: #010101;
}

.type-service img {
  border-radius: 75% 4% 4% 0%;
  /* margin-right: 1.5em; */
  margin-right: 0 !important;
  height: 100%;
  width: 40%;
  object-fit: cover;
  object-position: center;
  /* display: none; */
}

.reveal-2.blocs_lien {
  background-image: none;
  flex-direction: row-reverse;
}

.tw .reveal-2.blocs_lien {
  background: linear-gradient(160deg, var(--color-blue) 0%,rgb(22 24 26) 100%);
}

.tm .reveal-2.blocs_lien {
  background: linear-gradient(160deg, var(--color-green) 25%,rgb(100 117 30) 100%);
}



.bloc-services {
  overflow: auto;
}

.bouton_web,
.bouton_print,
.bouton_marketing {
  width: 10em;
  margin: 1em auto;
  padding: 12px 0;
  border-radius: 25px;
  font-size: large;
}

.bouton_web a,
.bouton_print a,
.bouton_marketing a {
  color: #fbfbfa;
  text-decoration: none;
}

.bouton_web {
  background-color: rgb(66, 92, 138);
}

.bouton_print {
  background-color: rgb(228, 66, 138);
}

.bouton_marketing {
  background-color: var(--color-green);
}

/* PAQUES */
.container_oeuf {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.backgroundPaques{
  background-image: url("../img/paques/image_finale.png") !important; 
  background-size: cover; 
  background-position: center;
  height: 300px;
  position: relative;
}

.backgroundPaques h2{
  /* color: var(--color-white);
  padding-left: 20px; */
}

.btnAccueil{
  position: absolute;
  bottom: -50px;
  width: fit-content;
  left: 50%;
  transform: translate(-50%, -50%);
}

.text_trouver {
  color: var(--color-black);
  font-size: var(--font-size-title);
  font-weight: bold;
}

.btnFormPaques{
  width: 100% !important;
  margin-top: 50px;
}

.btnFormPaques a{
  margin: auto;
}

.flex_petitBtn{
  justify-content: space-evenly !important;
  margin-top: 50px;
}

.texte_45 p, .t3_realisation h1 {
  color: var(--color-white) !important;
  margin: 0;
}

.container_oeuf input:not(#nom_participant) {
  border: none;
}

#nom_participant {
  width: 100%;
  min-width: fit-content;
  height: 35px;
  border-radius: 15px;
  text-align: center;
  font-size: var(--font-size-paragraphe);
}

.btnPaques {
  /* margin-top: 35vh; */
  position: absolute;
  bottom: 140px;
  left: 50%;
  transform: translate(-50%, -50%);
}

.btnPaques a:hover,
.btnPaques a {
  background-color: var(--color-blue) !important;
  color: var(--color-white) !important;
  border: 1px solid var(--color-blue) !important;
}

.container_oeuf input {
  margin-top: 10px;
}

.statutOeuf {
  position: relative;
  top: -50%;
  color: black;
  font-size: 4vw;
  font-weight: bold;
}

.text_black {
  color: var(--color-black) !important;
}

.container_oeufs {
  flex-wrap: wrap;
  margin: auto;
  margin-bottom: 50px;
}

.formulaire_paques {
  height: auto;
}

.oeuf_img {
  width: 35%;
}

form[action="paques.html"] #captchagc {
  margin: 10px auto !important;
}

.w_80 {
  width: 80%;
  margin: auto;
  margin-top: 50px;
}

.w_80 #captcha_label {
  margin: auto;
  width: 100%;
  text-align: center;
  color: var(--color-black);
}

.w_80.checkbox_formulaire p {
  color: var(--color-black) !important;
}

.container_oeuf {
  margin-top: 50px;
  width: 33%;
}

.oeuf {
  display: initial !important;
}

/* Location */

.location,
.avantage_location {
  display: inline-block;
}

.avantage_location img {
  display: block;
  margin: auto;
}

.serviceLoca {
  margin-bottom: 5em;
}

.text_invisible_1,
.text_invisible_2,
.text_invisible_3 {
  display: none;
}

.avantage_location > div {
  display: flex;
  justify-content: space-between;
}

.avantage_location table {
  display: block;
}

.location td {
  padding: 0 15px;
  vertical-align: baseline;
  line-height: 1.8;
}

.location td > img {
  margin-bottom: 20px;
}

.location > div > table {
  margin-bottom: 50px;
}

.location > div > table > tbody > :nth-child(1) > td {
  display: flex;
  justify-content: center;
}

.location > div > table > tbody > :nth-child(2) {
  height: 30px;
  text-align: center;
}

.location > div > table > tbody > :nth-child(3) {
  height: 130px;
}

.location > div > table > tbody > :nth-child(4) > td {
  display: none;
}

#location_savoir_1,
#location_savoir_2,
#location_savoir_3 {
  margin: auto;
  margin-top: 20px;
  text-align: center;
  display: block;
  width: 115px;
  height: 45px;
  border-radius: 10px;
  border: 1px solid;
  background-color: #224d5b;
  color: var(--color-white);
  font-size: 1rem;
  cursor: pointer;
}

.btn_vitrine,
.btn_catalogue,
.btn_ecommerce {
  text-decoration: none;
  color: var(--color-white);
  padding: 10px 20px;
  border-radius: 25px;
  transition: 0, 5s all;
}

.btn_vitrine {
  background-color: #00a2db;
  border: 1px solid #00a2db;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 32px;
}

.btn_catalogue {
  background-color: #f05a5b;
  border: 1px solid #f05a5b;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 32px;
}

.btn_ecommerce {
  background-color: #4ab43c;
  border: 1px solid #4ab43c;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 32px;
}

.btn_vitrine:hover {
  color: #00a2db;
  background-color: var(--color-white);
  border: 1px solid #00a2db;
}

.btn_catalogue:hover {
  color: #f05a5b;
  background-color: var(--color-white);
  border: 1px solid #f05a5b;
}

.btn_ecommerce:hover {
  color: #4ab43c;
  background-color: var(--color-white);
  border: 1px solid #4ab43c;
}

.servicesLoca > div > div > :nth-child(1) {
  border: 1px solid #00a2db;
  border-radius: 50px;
  padding: 0px 0px 11px 0px;
  margin-right: 3px;
}

.servicesLoca > div > div > :nth-child(2) {
  border: 1px solid #f05a5b;
  border-radius: 50px;
  padding: 0px 0px 11px 0px;
}

.servicesLoca > div > div > :nth-child(3) {
  border: 1px solid #4ab43c;
  border-radius: 50px;
  padding: 0px 0px 11px 0px;
  margin-left: 3px;
}

.servicesLoca > div > div > :nth-child(1) > tbody > :nth-child(1) > td {
  padding: 10px 20px;
  background-color: #00a2db;
  text-align: center;
  border-radius: 50px 50px 0px 0px;
  border-bottom: 1px solid #00a2db;
}

.servicesLoca > div > div > :nth-child(2) > tbody > :nth-child(1) > td {
  padding: 10px 20px;
  background-color: #f05a5b;
  text-align: center;
  border-radius: 50px 50px 0px 0px;
  border-bottom: 1px solid #f05a5b;
}

.servicesLoca > div > div > :nth-child(3) > tbody > :nth-child(1) > td {
  padding: 10px 20px;
  background-color: #4ab43c;
  text-align: center;
  border-radius: 50px 50px 0px 0px;
  border-bottom: 1px solid #4ab43c;
}

.servicesLoca > div > div > table > tbody > :nth-child(5) > td {
  position: relative;
}

.servicesLoca > div > div > table > tbody > :nth-child(1) > td font {
  color: var(--color-white);
}

.servicesLoca > div > div > table > tbody > :nth-child(3) {
  height: 150px;
}

.servicesLoca > div > div > table > tbody > :nth-child(4) {
  height: 320px;
}

.servicesLoca ol {
  list-style: circle;
}

.servicesLoca table {
  margin-left: 1.5%;
  margin-right: 1.5%;
}

.title-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
  margin: 50px auto 0 auto;
}

.title_location {
  font-size: 2.2rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 1rem;
}

.line {
  width: 80%;
  height: 1px;
  background-color: #333;
  margin-bottom: 2rem;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.flex-item {
  width: calc(25% - 10px);
  padding: 20px;
  text-align: center;
  margin-bottom: 20px;
  border-radius: 15px;
}

.flex-item img {
  max-width: 100%;
  height: auto;
  margin-bottom: 10px;
}

.flex-item h2 {
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.flex-item p {
  font-size: 1rem;
}

.webapp_description .app_cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  flex-wrap: wrap;
}

.app_card{
  width: 24%;
  text-align: start !important;
  border-radius: 10px !important;
}

.app_cards .app_card:nth-child(1) {
  background: linear-gradient(to left, transparent, rgb(39, 39, 39)),
    url("../img/fond_bloc/webapp_1.jpg");
  background-position: 50% 49%;
  background-size: cover;
  color: var(--color-white);
}

.app_cards .app_card:nth-child(2) {
  background: linear-gradient(to left, transparent, rgb(39, 39, 39)),
    url("../img/fond_bloc/webapp_2.jpg");
  background-position: 50% 49%;
  background-size: cover;
  color: var(--color-white);
}

.app_cards .app_card:nth-child(3) {
  background: linear-gradient(to left, transparent, rgb(39, 39, 39)),
    url("../img/fond_bloc/webapp_3.jpg");
  background-position: 50% 49%;
  background-size: cover;
  color: var(--color-white);
}

.app_cards .app_card:nth-child(4) {
  background: linear-gradient(to left, transparent, rgb(39, 39, 39)),
    url("../img/fond_bloc/webapp_4.jpg");
  background-position: 50% 49%;
  background-size: cover;
  color: var(--color-white);
}

.webapp_description .app_card {
  padding: 20px;
  background-image: url("../img/slider.png");
  border-radius: 25px;
}

.webapp_description .app_card img {
  border-radius: 50px;
  margin-right: 10px;
}

.bloc_lien_contact {
  background-color: #ededed;
  padding: 4em;
  border-radius: 20px;
  width: 100%;
  margin-left: 0%;
  box-shadow: -6px 5px 16px var(--color-font);
}

/*NOTIFICATIONS*/
.notification {
  /*margin : 10px;*/
  padding: 10px 20px;
  border-radius: 3px;
  text-align: left;
  color: #fff;
}
.notification.small {
  margin: 0;
}
.notification:before {
  display: inline-block;
  margin: 0 10px 0 0;
  font-family: "Font Awesome 6 Pro";
  font-size: var(--font-size-subtitle-2);
  vertical-align: middle;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.notification > span {
  display: inline-block;
  width: calc(100% - 40px);
  vertical-align: middle;
}
.notification.closable:after {
  content: "\f00d";
  position: absolute;
  top: 50%;
  right: 0;
  margin: 0 10px 0 0;
  font-family: "Font Awesome 6 Pro";
  font-size: var(--font-size-subtitle-2);
  vertical-align: middle;
  transform: translateY(-50%);
  cursor: pointer;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.notification.absolute {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
}
.notification.validation,
.button.validation {
  background-color: #37bc9b;
}
.notification.validation:before {
  content: "\f00c";
}
.notification.information,
.button.information {
  background-color: #5d9cec;
}
.notification.information:before {
  content: "\f05a";
}
.notification.erreur,
.button.erreur {
  background-color: #f05050;
}
.notification.erreur:before {
  content: "\f06a";
}
.notification.alert,
.button.alert {
  background-color: #f0bd50;
}
.notification.alert:before {
  content: "\f071";
}
.notification.disable,
.button.disable {
  background-color: #a2a2a2;
}

.print_button {
  display: block;
  text-decoration: none;
  color: var(--color-white);
  padding: 10px 30px;
  background-color: var(--color-pink);
  border-radius: 25px;
}

/* --------------------------------------- */
/* --------------------------------------- */
/* --------------------------------------- */
/* --------------------------------------- */
/* --------------------------------------- */
/* --------------------------------------- */
/* --------------------------------------- */

/*  POPUP  */

.calendlyPop {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 999;
  background-color: rgba(102, 102, 102, 0.8);
  opacity: 1;
  backdrop-filter: blur(4px);
  cursor: zoom-out;
}

.calendlyPop iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  max-width: 800px;
  max-height: 600px;
  border: none;
  border-radius: 10px;
  overflow: hidden;
  z-index: 9999;
}

/* Oeuf Popup */

.oeuf {
  cursor: pointer;
}

.oeufPop {
  display: flex;
  align-content: center;
  justify-content: center;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 999;
  background-color: rgba(102, 102, 102, 0.8);
  opacity: 1;
  backdrop-filter: blur(4px);
}

.oeufPop > div {
  background-color: white;
  width: fit-content;
  margin: auto;
  padding: 10px 20px;
  border-radius: 10px;
}

/*Divers*/
#tarteaucitron #tarteaucitronServices .tarteaucitronMainLine {
  background-color: #000 !important;
}

/* BLOG */
.blog-categories
	{
		margin-bottom: 10px;
	}
	.blog-categories > ul
	{
		display: inline-block;
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.blog-categories > ul > li
	{
		display: inline-block;
		margin: 0;
		padding: 0 2px 2px 0;
	}
	.blog-categories > ul > li > a
	{
		display: block;
		font-size: 14px;
		text-decoration: none;
		background-color: var(--color-blue);
		padding: 5px 15px;
		border-radius: 3px;
		color: #FFF;
		margin: 5px 5px 5px 0;
		border: 1px solid var(--color-blue);
	}
	.blog-categories > ul > li > a.select
	{
		background-color: #FFF;
		color: var(--color-blue);
	}
	.blog-articles,
	.blog-articles *
	{
		box-sizing: border-box;
	}
	.blog-articles
	{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-gap: 15px;
		margin-bottom: 50px;
	}
	.blog-article
	{
		position: relative;
		overflow: hidden;
		border-radius: 20px;

		height: 220px;

		background-color: #FFF;
		box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
	}
	.blog-article::after
	{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(transparent 50%, rgba(0,0,0,0.5));
		z-index: 2;
	}
	.blog-article > img
	{
		width: 100%;
		height: 100%;
		transform: scale(1);
		z-index: 1;
		margin: 0!important;
		transition: ease-in-out 500ms transform;
		object-fit: cover;
	}
	.blog-article:hover > img
	{
		transform: scale(1.2);
	}
	.blog-article > span
	{
		position: absolute;
		display: block;
		padding: 5px;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 10px;
		color: #FFF;
		z-index: 3;
		font-size: 17px;
	}

	.blog-article-couverture
	{
		position: relative;
		border-radius: 20px;
		background-color: #CCC;
		height: 400px;
		overflow: hidden;
		margin-top: 20px;
	}
	.blog-article-couverture::after
	{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(transparent 50%, rgba(0,0,0,0.5));
		z-index: 2;
	}
	.blog-article-couverture > a,
	.blog-article-couverture > a:hover
	{
		position: absolute;
		left: 20px;
		top: 20px;
		z-index: 3;
		color: #FFF;
		background-color: var(--color-blue);
		border-radius: 5px;
		text-decoration: none;
		font-size: 14px;
		padding: 5px 15px;
		margin: 0;
	}
	.blog-article-couverture > img
	{
		width: 100%;
		height: 100%;
		object-fit: cover;
		z-index: 1;
		margin: 0!important;
	}
	.blog-article-couverture > div 
	{
		position: absolute;
		width: 50%;
		left: 20px;
		bottom: 20px;
		z-index: 3;
	}
	.blog-article-couverture > div > h1
	{
		color: #FFF;
		text-align: left;
	}
	.blog-article-couverture > div > span.blog-article-categorie,
	.blog-articles .blog-article-categorie
	{
		display: inline-block;
		color: #FFF;
		padding: 1px 5px;
		background-color: var(--color-blue);
		font-size: 12px;
		border-radius: 3px;
	}
	.blog-article-couverture > div > time,
	.blog-article-date
	{
		padding: 0 5px;
		color: #FFF;
		font-size: 12px;
	}
	.blog-article-couverture > span
	{
		position: absolute;
		right: 20px;
		bottom: 18px;
		color: var(--color-blue);
		font-size: 15px;
		background-color: #FFF;
		padding: 5px 20px;
		border-radius: 20px;
		z-index: 3;
	}
	.blog-article-couverture > span > ul
	{
		display: inline-block;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.blog-article-couverture > span > ul > li
	{
		display: inline-block;
		margin: 0;
		padding: 2px;
	}
	.blog-article-couverture > span > ul > li > a
	{
		display: block;
		padding: 2px;
		font-size: 17px;
		color: var(--color-blue);
	}
	.blog-article-couverture > span > ul > li > a:hover
	{
		color: var(--color-pink)!important;
	}
	.blog-article-accroche
	{
		font-weight: bold;
		padding: 20px 0;
	}
	.blog-article-sommaire
	{
		border: 1px solid #CCC;
		border-left: 3px solid var(--color-blue);
		border-radius: 0 20px 20px 0;
		padding: 20px;
		margin: 20px 0;
		box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
		background-color: #FFF;
	}
	.blog-article-sommaire .titre
	{
		font-size: 17px;
		font-weight: bold;
	}
	.blog-article-sommaire li
	{
		padding: 5px 0;
	}
	.blog-article-sommaire a
	{
		text-decoration: none;
	}
	.blog-article-paragraphe
	{
		padding: 20px 0;
	}

	@media screen and (max-width:430px)
	{
		.blog-articles
		{
		    display: grid;
		    grid-template-columns: 1fr;
		    grid-gap: 15px;
		}

		time{
			display: none;
		}
	}

/*Mobiles*/
@media screen and (max-width: 860px) {
  body {
    overflow-x: hidden;
    width: 100vw;
  }

  #header-top {
           height: 60px;
        font-size: 15px;
  }

  .header {
    margin-top: 60px;
  }

  .texte_agence{
    background-size: cover;
  }

  .googlesearchImg{
    width: 100%;
  }


  /* REALISATION */

  .flex.realisation{
    flex-direction: column;
    align-items: center;
  }
  
  .slider-nav{
    display: none;
  }

  .container_img_realisations .slick-slide img{
    width: 100%;
  }

  .container_img_realisations{
    width: 80%;
  }

  .container_description, .container_description h2{
    margin: 0;
  }

  .img_realisations{
    margin: auto;
  }

  .slick-dots {
    display: flex;
    justify-content: center;
  }

  .container_description{
    display: contents;
  }
  
  .realisation .slick-list.draggable{
    padding: 0 !important;
  }

  /* PAQUES */

  .container_oeuf {
    width: 50% !important;
  }

  #nom_participant {
    width: 150% !important;
  }

  .flex_petitBtn{
    flex-direction: column;
    margin-top: 30px;
  }

  .btnAccueil{
    bottom: -75px;
  }

  .btnAccueil a{
    padding: 10px 20px !important;
    /* width: 100% !important; */
  }

  .btnAccueil a div{
    font-size: var(--font-size-paragraphe) !important;
  }

  /* TEXTE JUSTIFIER EN MOBILE = HORRIBLE */

  :not([style*="text-align: center"]):not([style*="text-align: left"]) {
    text-align: inherit;
  }

  *[style*="text-align: justify;"] {
    text-align: left !important;
  }

  .backgroundBorder img[align="right"],
  .backgroundBorder img[align="left"] {
    width: 100%;
    height: auto;
    margin: 0 0 40px 0 !important;
  }

  .dev-realisation .container,
  .print_realisation .container,
  .emailing_realisation .container {
    flex-direction: column;
    align-items: center;
  }

  #f-gencontact li {
    text-align: right !important;
  }

  .bloc_texte_avis {
    top: 26%;
  }

  .card_wrapper {
    justify-content: space-evenly;
  }

  #service1 .service_image_block img,
  #service2 .service_image_block img,
  #service3 .service_image_block img {
    width: 100% !important;
    height: 100%;
    z-index: 2;
    margin: 0;
  }

  .bloc_texte {
    padding: 0;
  }

  .avantage_location > div {
    flex-direction: column;
  }

  .avantage_location > div table {
    width: 100% !important;
    margin-bottom: 50px;
  }

  .contenu-texte {
    padding: 0;
  }

  .tic_tac_1,
  .tic_tac_2,
  .tic_tac_3 {
    display: none;
  }

  .checkbox_formulaire p {
    margin-top: 20px !important;
    height: fit-content;
  }

  iframe {
    width: 100%;
  }

  .trueMobile {
    display: block !important;
  }

  .calendlyBtn {
    border-color: 1px solid var(--color-pink) !important;
    width: 80%;
    margin: auto;
    margin-bottom: 60px;
  }

  .formulaire_container {
    margin: 20px auto 0px auto;
  }

  .calendlyBtn:hover {
    border-color: 1px solid var(--color-pink) !important;
    color: var(--color-pink);
  }

  .formAccueil {
    margin-top: 70px;
    margin-bottom: 0;
  }

  .title-container {
    width: 100%;
  }

  .flex-container {
    flex-direction: column;
  }

  .flex-item {
    width: 100%;
  }

  .webapp_description .app_cards {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(1, 1fr);
  }
  .bloc_video_texte {
    flex-direction: column;
    padding: 0;
    height: auto;
    background: none;
    box-shadow: none;
    border-radius: 0;
  }

  .googlemapssearch {
    width: 100% !important;
  }

  .container_maps {
    flex-direction: column;
  }

  .bloc_video {
    margin-bottom: 3em;
  }

  .card_print {
    width: 100% !important;
  }

  .card_print img {
    width: 100% !important;
  }

  .card_wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    grid-gap: 10px;
    height: 90vh;
  }
  .card_wrapper > div > .card_img {
    height: 27vw;
  }
  .card_1 .card_img:before,
  .card_1 .card_img:after,
  .card_2 .card_img:before,
  .card_2 .card_img:after,
  .card_3 .card_img:before,
  .card_3 .card_img:after,
  .card_4 .card_img:before,
  .card_4 .card_img:after,
  .card_5 .card_img:before,
  .card_5 .card_img:after,
  .card_6 .card_img:before,
  .card_6 .card_img:after,
  .card_7 .card_img:before,
  .card_7 .card_img:after,
  .card_8 .card_img:before,
  .card_8 .card_img:after,
  .card_9 .card_img:before,
  .card_9 .card_img:after {
    left: 25%;
  }
  .card_1 .card_img:hover:before,
  .card_1 .card_img:hover:after,
  .card_2 .card_img:hover:before,
  .card_2 .card_img:hover:after,
  .card_3 .card_img:hover:before,
  .card_3 .card_img:hover:after,
  .card_4 .card_img:hover:before,
  .card_4 .card_img:hover:after,
  .card_5 .card_img:hover:before,
  .card_5 .card_img:hover:after,
  .card_6 .card_img:hover:before,
  .card_6 .card_img:hover:after,
  .card_7 .card_img:hover:before,
  .card_7 .card_img:hover:after,
  .card_8 .card_img:hover:before,
  .card_8 .card_img:hover:after,
  .card_9 .card_img:hover:before,
  .card_9 .card_img:hover:after {
    transform: scale(1);
    width: 8vw;
    left: 20%;
  }
  .card_1 .card_img:hover span::before,
  .card_2 .card_img:hover span::before,
  .card_3 .card_img:hover span::before,
  .card_4 .card_img:hover span::before,
  .card_5 .card_img:hover span::before,
  .card_6 .card_img:hover span::before,
  .card_7 .card_img:hover span::before,
  .card_8 .card_img:hover span::before,
  .card_9 .card_img:hover span::before {
    top: -5px;
    left: 130px;
    width: 50px;
    height: 50px;
    opacity: 1;
  }
  .card_1 .card_img:hover span::after,
  .card_2 .card_img:hover span::after,
  .card_3 .card_img:hover span::after,
  .card_4 .card_img:hover span::after,
  .card_5 .card_img:hover span::after,
  .card_6 .card_img:hover span::after,
  .card_7 .card_img:hover span::after,
  .card_8 .card_img:hover span::after,
  .card_9 .card_img:hover span::after {
    bottom: 0px;
    right: 120px;
    width: 50px;
    height: 50px;
    opacity: 1;
  }
  .reveal-loaded .reveal-1,
  .reveal-loaded .reveal-2,
  .reveal-loaded .reveal-3 {
    transition-delay: 0.1s;
  }

  .all-realisation {
    width: 320px !important;

    border-radius: 30px !important;
    text-align: center;
  }

  .all-realisation a {
    font-size: 3vw;
  }

  #service1 .service_text_block,
  #service2 .service_text_block,
  #service3 .service_text_block {
    width: 50vw;
  }

  #contenu-footer-realisation {
    width: 18em !important;
  }

  #contenu-footer-realisation div :not(img) {
    display: none;
  }

  .fond-gris {
    padding: 5% 0 !important;
  }

  .allR-article > div {
    padding: 0 20px 50px 20px !important;
  }

  .allR-article {
    display: block !important;
  }

  #portfolio,
  #gencontact-portfolio,
  #house {
    width: 90vw !important;
  }

  #slider {
    height: 100vh !important;
  }

  #slider > :nth-child(4),
  #slider > :nth-child(3) > :nth-child(1),
  #slider > :nth-child(3) > :nth-child(2),
  #slider > :nth-child(2) > :nth-child(1),
  #slider > :nth-child(2) > :nth-child(2),
  .letterg,
  .lettern {
    display: none;
  }

  #slider > h1 {
    font-size: var(--font-size-title);
    text-shadow: -1px 1px 0em var(--color-white);
  }

  .slider_button {
    top: 55%;
    width: fit-content;
  }

  .slider_button h2 {
    text-align: center !important;
    margin: 0 30px;
  }

  .slider_button2{
    width: 100%;
    top: 75%;
  }

  .slider_button > a{
    padding: 5px 35px;
  }

  .titre-realisation {
    border-radius: 0px !important;
  }

  .bloc-accueil {
    /* display: flex; */
    /* justify-items: center; */
    align-items: center;
  }

  .bloc-accueil .slick-list.draggable {
    padding: 0 !important;
  }

  .bloc-accueil li {
    width: 44vw;
  }

  #footer > div > div {
    display: block;
    position: relative !important;
    top: initial !important;
    right: initial !important;
    left: initial !important;
    text-align: center;
    padding-bottom: 2em;
  }

  #f-services,
  #f-aPropos,
  .bloc-footer div h2 {
    text-align: start !important;
  }

  #f-gencontact {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 50%;
    margin-right: 0;
  }

  #f-services,
  #f-aPropos {
    margin: 0;
  }

  #f-gencontact p {
    text-align: end;
    width: 100%;
  }

  #footer-gc {
    margin-top: 0;
    text-align: end !important;
    width: 100%;
  }

  .service-accueil img {
    width: 100%;
    height: 100%;
  }

  .testimonial_stars_container img,
  .testimonial_stars_container2 img,
  .testimonial_stars_container3 img,
  .testimonial_stars_container4 img,
  .testimonial_stars_container5 img {
    width: 4vw;
  }

  .partenaire_container {
    width: 85vw;
    left: 50%;
    top: 72%;
  }

  .slick-list.draggable {
    /* padding: 0 40px 0 0 !important; */
  }

  .gcNbEtoile{
    font-size: 4vw !important;
  }

  .bloc_texte_avis > h3{
    width: 70vw;
    margin-top: 30px;
  }

  .partenaire_container li {
    width: 90% !important;
  }

  .partenaire_container_back {
    width: 80vw;
    height: 750px;
  }

  .bloc_texte_avis > h2 {
    width: 70vw;
    left: 50%;
    top: 6%;
    font-size: var(--font-size-title);
  }

  .bloc_texte_avis > p {
    width: 70vw;
    left: 50%;
    top: 18%;
    font-size: var(--font-size-paragraphe);
  }

  .partenaire_container_back_button {
    left: 50%;
  }

  .partenaire_container_back_button a {
    font-size: var(--font-size-paragraphe);
  }

  .project_container {
    left: 16%;
  }

  .project_container p {
    font-size: var(--font-size-paragraphe);
  }

  .slick-next.slick-arrow {
    display: none !important;
  }

  .testimonial_stars_container,
  .testimonial_stars_container2,
  .testimonial_stars_container3,
  .testimonial_stars_container4,
  .testimonial_stars_container5 {
    right: 7% !important;
    left: auto;
  }

  #service1 img,
  #service2 img,
  #service3 img {
    margin: 0;
  }

  #service1,
  #service2,
  #service3 {
    width: 100vw;
    height: calc(110% - 1.5vw);
    padding: 30px 5px !important;
  }

  #service1 .service_image_block img {
    width: 40vw !important;
    height: auto !important;
  }

  .type-service {
    grid-template-columns: repeat(1, 1fr);
  }

  .type-service > div {
    width: 90vw;
    height: 20vh;
  }

  .local img,
  .pack-pro img {
    display: none;
  }

  .project_container,
  .formulaire_informations {
    display: none;
  }

  .formulaire_container {
    width: 90vw;
  }

  .formulaire > div > form > fieldset > ul > li {
    width: 80vw;
    height: fit-content;
  }

  .formulaire > div > form > fieldset > ul > li > div > label,
  .formulaire > div > form > fieldset > ul > li > label,
  .formulaire > div > form > fieldset > ul > li > div > div > select,
  .formulaire > div > form > fieldset > ul > li > div > div > input,
  .formulaire
    > div
    > form
    > fieldset
    > ul
    > li
    > div
    > div
    > input::placeholder,
  .formulaire
    > div
    > form
    > fieldset
    > ul
    > li
    > div
    > div
    > input[name="email"],
  .formulaire
    > div
    > form
    > fieldset
    > ul
    > li
    > div
    > div
    > input[name="email"]::placeholder,
  .formulaire
    > div
    > form
    > fieldset
    > ul
    > li[class="double"]
    > div
    > div
    > textarea,
  .formulaire
    > div
    > form
    > fieldset
    > ul
    > li[class="double"]
    > div
    > div
    > textarea::placeholder {
    font-size: 2.5vw;
  }
  .formulaire > div > form > fieldset > ul > li > div > div > select {
    /* height: 3vw; */
  }

  .formulaire
    > div
    > form
    > fieldset
    > ul
    > li[class="double"]
    > div
    > div
    > textarea {
    height: 11vw;
  }

  .formulaire_contact > form > fieldset > ul > li > div > label,
  .formulaire_contact > form > fieldset > ul > li > label,
  .formulaire_contact > form > fieldset > ul > li > div > div > select,
  .formulaire_contact > form > fieldset > ul > li > div > div > input,
  .formulaire_contact
    > form
    > fieldset
    > ul
    > li
    > div
    > div
    > input::placeholder,
  .formulaire_contact
    > form
    > fieldset
    > ul
    > li
    > div
    > div
    > input[name="email"],
  .formulaire_contact
    > form
    > fieldset
    > ul
    > li
    > div
    > div
    > input[name="email"]::placeholder,
  .formulaire_contact
    > form
    > fieldset
    > ul
    > li[class="double"]
    > div
    > div
    > textarea,
  .formulaire_contact
    > form
    > fieldset
    > ul
    > li[class="double"]
    > div
    > div
    > textarea::placeholder {
    font-size: 2.5vw;
  }
  .formulaire_contact > form > fieldset > ul > li > div > div > select {
    height: 3vw;
  }

  .formulaire_contact
    > form
    > fieldset
    > ul
    > li[class="double"]
    > div
    > div
    > textarea {
    height: 11vw;
  }

  .devis_container {
    display: none;
  }

  form[action="devis.html"] > fieldset > ul > li > div > label,
  form[action="devis.html"] > fieldset > ul > li > label {
    font-size: 2.5vw;
  }

  form[action="devis.html"] > fieldset > ul > li > div > div > input,
  form[action="devis.html"]
    > fieldset
    > ul
    > li
    > div
    > div
    > input::placeholder,
  form[action="devis.html"]
    > fieldset
    > ul
    > li
    > div
    > div
    > input[name="email"],
  form[action="devis.html"]
    > fieldset
    > ul
    > li
    > div
    > div
    > input[name="email"]::placeholder,
  form[action="devis.html"]
    > fieldset
    > ul
    > li[class="double"]
    > div
    > div
    > textarea,
  form[action="devis.html"]
    > fieldset
    > ul
    > li[class="double"]
    > div
    > div
    > textarea::placeholder {
    font-size: 2.5vw;
  }

  form[action="devis.html"]
    > fieldset
    > ul
    > li[class="double"]
    > div
    > div
    > textarea {
    height: 11vw;
  }

  .confiance_image_container img {
    width: 14vw;
  }

  .contenu-article {
    padding: 0;
  }

  .agence.flex > div {
    width: 100% !important;
  }

  .container_img_equipe,
  .agence.flex {
    flex-direction: column !important;
  }

  .container_img_equipe img[width="30%"] {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: bottom;
  }

  /* SERVICE */

  .type-service > a > div{
    height: 100%;
    margin: 15px 0;
  }

  /* WEB APP */

  .app_card{
    width: 49%;
    margin: 1% 0;
  }

  /* SEO */
  .container2_seo{
    width: 100%;
    padding: 5px 0;
  }

  .seo_site{
    max-width: 100%;
  }

  .site_url {
    padding-right: 20px;
    word-break: break-all;
  }

}

@media screen and (max-width: 430px) {
  body {
    overflow-x: hidden;
    width: 100vw;
  }
  .title_form_devis {
    width: 80vw;
  }

  .btnPaques {
    position: absolute;
    transform: translate(-50%, -50%);
    bottom: 50px;
    width: inherit;
  }

  .slider_text{
    top: 30%;
    line-height: 25px;
  }

  .slider_button{
    top: 57% !important;
  }

  .slider_button2{
    top: 83%;
    width: 100%;
  }

  .slider_button2 > a {
    padding: 5px 35px !important;
  }

  #menu > ul > li > a::before {
    content: none;
  }
  #menu > ul > li > a:hover:before {
    content: none;
  }
  .slider_button {
    flex-direction: column;
    top: 70%;
    height: 120px;
    width: fit-content;
    font-size: 10px;
  }
  .slider_button :nth-child(1),
  .slider_button :nth-child(2),
  .slider_button :nth-child(3) {
    display: flex;
    justify-content: center;
  }
  .slider_button :nth-child(1) a {
    color: var(--color-white);
    background-color: var(--color-blue);
    width: 80vw;
    text-align: center;
    margin: 0 auto;
    border: 1px solid var(--color-blue);
    padding: 5px 30px;
    border-radius: 25px;
    text-shadow: none;
  }
  .slider_button :nth-child(2) a {
    color: var(--color-white);
    background-color: var(--color-pink);
    width: 80vw;
    text-align: center;
    margin: 0 auto;
    border: 1px solid var(--color-pink);
    padding: 5px 30px;
    border-radius: 25px;
    text-shadow: none;
  }
  .slider_button :nth-child(3) a {
    color: var(--color-white);
    background-color: var(--color-green);
    width: 80vw;
    text-align: center;
    margin: 0 auto;
    border: 1px solid var(--color-green);
    padding: 5px 30px;
    border-radius: 25px;
    text-shadow: none;
  }
  .slider_action {
    display: none;
  }
  .circle_accueil {
    height: 35%;
  }
  .baby_circle_accueil1,
  .baby_circle_accueil2,
  .baby_circle_accueil3 {
    height: 23vw;
    width: 23vw;
  }
  .baby_circle_accueil1 :nth-child(2),
  .baby_circle_accueil2 :nth-child(2),
  .baby_circle_accueil3 :nth-child(2) {
    font-size: var(--font-size-bubble-430);
  }
  @keyframes middly {
    0% {
      width: 20%;
      height: 24%;
    }
    100% {
      width: 23vw;
      height: 23vw;
    }
  }
  @keyframes middly_reverse {
    0% {
      width: 23vw;
      height: 23vw;
    }
    100% {
      width: 20%;
      height: 24%;
    }
  }
  @keyframes scale_circle {
    0% {
      width: 22%;
      height: 35%;
    }
    100% {
      width: 0%;
      height: 0%;
    }
  }
  @keyframes scale_circle_reverse {
    0% {
      width: 0%;
      height: 0%;
    }
    100% {
      width: 22%;
      height: 35%;
    }
  }
  .service-accueil {
    transform: scale(0.9);
  }
  .card_wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
  }
  .card_wrapper > div {
    height: 17vh;
  }
  .card_1 .card_img:nth-child(1):before,
  .card_1 .card_img:nth-child(1):after,
  .card_2 .card_img:nth-child(1):before,
  .card_2 .card_img:nth-child(1):after,
  .card_3 .card_img:nth-child(1):before,
  .card_3 .card_img:nth-child(1):after,
  .card_4 .card_img:nth-child(1):before,
  .card_4 .card_img:nth-child(1):after,
  .card_5 .card_img:nth-child(1):before,
  .card_5 .card_img:nth-child(1):after,
  .card_6 .card_img:nth-child(1):before,
  .card_6 .card_img:nth-child(1):after,
  .card_7 .card_img:nth-child(1):before,
  .card_7 .card_img:nth-child(1):after,
  .card_8 .card_img:nth-child(1):before,
  .card_8 .card_img:nth-child(1):after,
  .card_9 .card_img:nth-child(1):before,
  .card_9 .card_img:nth-child(1):after {
    transform: scale(1) skewX(15deg);
    width: 8vw;
    left: 25%;
  }
  .card_1 .card_img:nth-child(1):hover:before,
  .card_1 .card_img:nth-child(1):hover:after,
  .card_2 .card_img:nth-child(1):hover:before,
  .card_2 .card_img:nth-child(1):hover:after,
  .card_3 .card_img:nth-child(1):hover:before,
  .card_3 .card_img:nth-child(1):hover:after,
  .card_4 .card_img:nth-child(1):hover:before,
  .card_4 .card_img:nth-child(1):hover:after,
  .card_5 .card_img:nth-child(1):hover:before,
  .card_5 .card_img:nth-child(1):hover:after,
  .card_6 .card_img:nth-child(1):hover:before,
  .card_6 .card_img:nth-child(1):hover:after,
  .card_7 .card_img:nth-child(1):hover:before,
  .card_7 .card_img:nth-child(1):hover:after,
  .card_8 .card_img:nth-child(1):hover:before,
  .card_8 .card_img:nth-child(1):hover:after,
  .card_9 .card_img:nth-child(1):hover:before,
  .card_9 .card_img:nth-child(1):hover:after {
    transform: skewX(0deg);
  }
  .card_1 .card_img:hover span::before,
  .card_2 .card_img:hover span::before,
  .card_3 .card_img:hover span::before,
  .card_4 .card_img:hover span::before,
  .card_5 .card_img:hover span::before,
  .card_6 .card_img:hover span::before,
  .card_7 .card_img:hover span::before,
  .card_8 .card_img:hover span::before,
  .card_9 .card_img:hover span::before {
    top: 10px;
    right: 30px;
    width: 50px;
    height: 50px;
    opacity: 1;
  }
  .card_1 .card_img:hover span::after,
  .card_2 .card_img:hover span::after,
  .card_3 .card_img:hover span::after,
  .card_4 .card_img:hover span::after,
  .card_5 .card_img:hover span::after,
  .card_6 .card_img:hover span::after,
  .card_7 .card_img:hover span::after,
  .card_8 .card_img:hover span::after,
  .card_9 .card_img:hover span::after {
    bottom: 10px;
    right: 110px;
    width: 50px;
    height: 50px;
    opacity: 1;
  }
  .logo-partenaire {
    width: 30vw;
  }
  .content {
    height: 12vh;
    width: 60vw;
    padding: 10px 40px;
  }
  .bloc-accueil > li {
    display: block;
    width: 100%;
    margin: 15px auto;
  }

  .all-realisation a {
    font-size: 6vw;
  }

  .header_sous_titre {
    display: none !important;
  }

  .contenu-article {
    font-size: var(--font-size-paragraphe);
  }
  .box-realisation li a {
    border-radius: 0px !important;
  }


  .confiance_image_container img {
    width: 25vw;
  }

  .partenaire_container {
    width: 90vw;
  }

  .partenaire_container li {
    /* height: 40vh !important; */
  }

  .partenaire_container li div p {
    height: auto;

    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 10;
    -webkit-box-orient: vertical;
  }

  .partenaire_container_back {
    /* height: 75vh; */
  }

  .bloc_texte_avis > h2 {
    font-size: var(--font-size-subtitle-2);
  }

  .type-service img {
    border-radius: 0% 4% 4% 0%;
    width: 30%;
  }

  .bloc_texte_avis > p {
    font-size: var(--font-size-paragraphe);
    /* margin-top: 35px; */
  }

  .partenaire_container_back_button {
    left: 50%;
    width: 50vw;
    text-align: center;
  }

  .partenaire_container_back_button a {
    font-size: var(--font-size-paragraphe);
  }

  .all-realisation {
    width: 50vw !important;
  }

  .all-realisation a {
    font-size: 4vw;
  }

  .project_container {
    top: -5%;
    left: 15%;
  }

  .texte_agence,
  .texte_devis,
  .texte_faq {
    height: 100%;
  }

  .formulaire_container {
    width: 90vw;
  }

  .project_container p {
    font-size: 4vw;
  }

  .formulaire {
    position: relative;
  }

  .formulaire > div > form > fieldset > ul > li {
    display: flex;
    flex-direction: column;
    height: fit-content;
  }

  .formulaire > div > form > fieldset {
    width: 55vw;
  }

  .formulaire > div > form > fieldset > ul {
    width: 80vw;
  }

  .formulaire > div > form > fieldset > ul > li > div > label {
    font-size: var(--font-size-paragraphe);
  }

  .formulaire > div > form > fieldset > ul > li > div > div > select {
    font-size: var(--font-size-paragraphe);
    /* height: 8vw; */
    width: 80vw;
    border: 1px solid transparent;
  }

  .formulaire > div > form > fieldset > ul > li > div > div > input {
    font-size: var(--font-size-paragraphe);
    padding-left: 1vw;
    width: 80vw;
    border: 1px solid transparent;
  }

  .formulaire
    > div
    > form
    > fieldset
    > ul
    > li
    > div
    > div
    > input::placeholder {
    font-size: var(--font-size-paragraphe);
    padding-left: 1vw;
  }

  .formulaire
    > div
    > form
    > fieldset
    > ul
    > li
    > div
    > div
    > input[name="email"] {
    font-size: var(--font-size-paragraphe);
    padding-left: 1vw;
    width: 80vw;
    border: 1px solid transparent;
  }

  .formulaire
    > div
    > form
    > fieldset
    > ul
    > li
    > div
    > div
    > input[name="email"]::placeholder {
    font-size: var(--font-size-paragraphe);
  }

  .formulaire
    > div
    > form
    > fieldset
    > ul
    > li
    > div
    > div
    > textarea::placeholder {
    font-size: var(--font-size-paragraphe);
    padding-left: 1vw;
  }

  .formulaire > div > form > fieldset > ul > li[class="double"] > label {
    padding-left: 1vw;
    font-size: var(--font-size-paragraphe);
  }

  .formulaire
    > div
    > form
    > fieldset
    > ul
    > li[class="double"]
    > div
    > div
    > textarea {
    height: 18vw;
    font-size: var(--font-size-paragraphe);
    padding-left: 1vw;
    width: 80vw;
    border: 1px solid transparent;
  }

  .formulaire
    > div
    > form
    > fieldset
    > ul
    > li[class="double"]
    > div
    > div
    > textarea::placeholder {
    height: 10vw;
    padding-left: 1vw;
    font-size: var(--font-size-paragraphe);
  }

  .formulaire > div > form > fieldset > ul > li[class="double center"] {
    width: 100%;
    align-items: center;
  }

  .formulaire_informations {
    display: none;
  }

  .checkbox_formulaire p {
    margin-top: 30px;
  }

  /* FORMULAIRE PAGE CONTACT */

  .coordonnes .flex {
    justify-content: space-evenly;
  }

  .formulaire_contact {
    height: 90vh;
    width: 80vw;
  }

  .formulaire_contact > form > fieldset > ul > li {
    display: flex;
    flex-direction: column;
  }

  .formulaire_contact > form > fieldset {
    width: 80vw;
  }

  .formulaire_contact > form > fieldset > ul {
    width: 60vw;
  }

  .formulaire_contact > form > fieldset > ul > li > div > label {
    font-size: var(--font-size-paragraphe);
  }

  .formulaire_contact > form > fieldset > ul > li > div > div > select {
    font-size: var(--font-size-paragraphe);
    height: 8vw;
    width: 60vw;
  }

  .formulaire_contact > form > fieldset > ul > li > div > div > input {
    font-size: var(--font-size-paragraphe);
    padding-left: 1vw;
    width: 60vw;
  }

  .formulaire_contact
    > form
    > fieldset
    > ul
    > li
    > div
    > div
    > input::placeholder {
    font-size: var(--font-size-paragraphe);
    padding-left: 1vw;
  }

  .formulaire_contact
    > form
    > fieldset
    > ul
    > li
    > div
    > div
    > input[name="email"] {
    font-size: var(--font-size-paragraphe);
    padding-left: 1vw;
    width: 60vw;
  }

  .formulaire_contact
    > form
    > fieldset
    > ul
    > li
    > div
    > div
    > input[name="email"]::placeholder {
    font-size: var(--font-size-paragraphe);
  }

  .formulaire_contact
    > form
    > fieldset
    > ul
    > li
    > div
    > div
    > textarea::placeholder {
    font-size: var(--font-size-paragraphe);
    padding-left: 1vw;
  }

  .formulaire_contact > form > fieldset > ul > li[class="double"] > label {
    padding-left: 1vw;
    font-size: var(--font-size-paragraphe);
  }

  .formulaire_contact
    > form
    > fieldset
    > ul
    > li[class="double"]
    > div
    > div
    > textarea {
    height: 18vw;
    font-size: var(--font-size-paragraphe);
    padding-left: 1vw;
    width: 60vw;
  }

  .formulaire_contact
    > form
    > fieldset
    > ul
    > li[class="double"]
    > div
    > div
    > textarea::placeholder {
    height: 10vw;
    padding-left: 1vw;
    font-size: var(--font-size-paragraphe);
  }

  .formulaire_contact > form > fieldset > ul > li[class="double center"] {
    margin-top: 10px;
  }

  .formulaire_informations {
    display: none;
  }

  .devis_container {
    display: none;
  }

  .texte_web,
  .texte_agence,
  .texte_devis,
  .texte_faq,
  .texte_print,
  .texte_marketing,
  .contenu-texte img[width="100%"],
  .t3 {
    padding-bottom: 20px;
    height: fit-content;
  }

  .dev-realisation div {
    flex-direction: column;
    margin-top: 15px;
  }

  .location {
    display: none;
  }

  /* FORMULAIRE DEVIS */

  form[action="devis.html"] {
    /* width: 80vw; */
    position: relative;
    margin: 60px auto;
    background-color: var(--color-green);
    border-radius: 15px;
    padding: 2vw;
  }

  form[action="devis.html"] > fieldset > ul > li {
    display: flex;
    flex-direction: column;
    height: fit-content;
  }

  form[action="devis.html"] > fieldset > ul > li p {
    margin: 10px !important;
  }

  form[action="devis.html"] > fieldset {
    /* width: 80vw; */
  }

  form[action="devis.html"] > fieldset > ul {
    /* width: 60vw; */
  }

  form[action="devis.html"] > fieldset > ul > li > div > label,
  form[action="devis.html"] > fieldset > ul > li > label {
    display: block;
    width: auto;
    height: auto;
    cursor: default;
    margin: 5px;
    color: var(--color-white);
    font-size: var(--font-size-paragraphe);
    text-align: left;
  }

  form[action="devis.html"] > fieldset > ul > li > div > div > select {
    font-size: var(--font-size-paragraphe);
    /* height: 8vw; */
    width: 100%;
  }

  form[action="devis.html"] > fieldset > ul > li > div > div > input {
    font-size: var(--font-size-paragraphe);
    padding-left: 1vw;
    width: 100%;
  }

  form[action="devis.html"]
    > fieldset
    > ul
    > li
    > div
    > div
    > input::placeholder {
    font-size: var(--font-size-paragraphe);
    padding-left: 1vw;
  }

  form[action="devis.html"]
    > fieldset
    > ul
    > li
    > div
    > div
    > input[name="email"] {
    font-size: var(--font-size-paragraphe);
    padding-left: 1vw;
    width: 100%;
  }

  form[action="devis.html"]
    > fieldset
    > ul
    > li
    > div
    > div
    > input[name="email"]::placeholder {
    font-size: var(--font-size-paragraphe);
  }

  form[action="devis.html"]
    > fieldset
    > ul
    > li
    > div
    > div
    > textarea::placeholder {
    font-size: var(--font-size-paragraphe);
    padding-left: 1vw;
  }

  form[action="devis.html"] > fieldset > ul > li[class="double"] > label {
    padding-left: 1vw;
    font-size: var(--font-size-paragraphe);
  }

  form[action="devis.html"]
    > fieldset
    > ul
    > li[class="double"]
    > div
    > div
    > textarea {
    height: 18vw;
    font-size: var(--font-size-paragraphe);
    padding-left: 1vw;
    width: 100%;
  }

  form[action="devis.html"]
    > fieldset
    > ul
    > li[class="double"]
    > div
    > div
    > textarea::placeholder {
    height: 10vw;
    padding-left: 1vw;
    font-size: var(--font-size-paragraphe);
  }

  form[action="devis.html"] > fieldset > ul > li[class="double center"] {
    margin-top: 10px;
  }

  form[action="devis.html"]
    > fieldset
    > ul
    > li
    > div
    > div
    > input[name="site_web"] {
    background: transparent;
    border: 0;
    line-height: 30px;
    outline: 1px solid var(--color-white) !important;
    padding-left: 0.3vw;
    color: var(--color-white);
    font-size: var(--font-size-paragraphe);
    width: 100%;
    border-radius: 10px;
  }

  .formulaire_informations {
    display: none;
  }

  .captcha {
    width: 50vw;
    margin: 0 auto;
  }

  #captcha_label {
    font-size: 3.4vw;
  }

  #captchagc {
    width: 50vw;
    margin: 10px 0;
    border-radius: 15px;
  }

  .testimonial h3 {
    margin: 8px 0;
  }

  .contenu-texte-service {
    height: fit-content;
  }

  .contenu-texte-service :nth-child(3) {
    width: 90%;
  }

  @keyframes captchagc {
    0% {
      left: 25px;
    }
    25% {
      left: 25px;
    }
    50% {
      left: 40vw;
    }
    100% {
      left: 40vw;
    }
  }

  /* WEB LOCA */

  .location table,
  .servicesLoca div[style="display: flex;"] table {
    width: 100% !important;
    margin: 0;
    margin-bottom: 10em !important;
  }

  .servicesLoca div[style="display: flex;"] {
    flex-direction: column;
  }

  .delai {
    display: none;
  }

  /* PRINT */

  .card_container {
    margin-top: 4em;
  }

  .card_container2 {
    grid-template-columns: repeat(1, 1fr);
  }

  /* --------- NOTRE AGENCE PAGE --------- */

  .personnages div {
    display: flex;
    /* flex-direction: column; */
  }

 /* .personnages img {
    width: 50vw;
    object-fit: contain;
    object-position: center;
    margin: 0 auto;
    vertical-align: middle;
  }*/

  .imprim_vert,
  .bloc_separation,
  .banniere_print {
    margin-bottom: 10em;
    margin-top: 5em;
  }

  .baniere {
    flex-direction: column;
  }

  .image_baniere img {
    width: 100%;
  }

  .text_baniere {
    padding: 0;
    text-align: left;
  }

  .h1-agence {
    text-align: center;
  }

  .liste_webVitrine img,
  .liste_webEcommerce img,
  .liste_webCatalogue img,
  .liste_webPro img,
  .location img,
  .logiciel img {
    display: none;
  }

  /* WEB APP */

  .app_card{
    width: 100%;
  }

  /* SEO */

  .fa-regular.fa-magnifying-glass{
    display: none;
  }


  .ariane > li:first-child > a > i:before {
    content: "\f053";
    margin-right: 5px;
  }
  .ariane > li:first-child > a > i:after {
    content: "Accueil";
    font-family: 'Open Sans', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 14px;
    color: #34393C;
    text-decoration: none;
  }
  .ariane > li:not(:nth-last-child(2))
  {
    display: none;
  }
  .ariane > li:not(:first-child) i:before
  {
    content: "\f053";
  }

  label {
    margin: 1.7em 0;
  }

  .loop-movement1 > svg, 
  .loop-movement2 > svg{
    transform: scale(0.4);
  }
}