/*
Theme Name:     King Bee Std | Groupe Medias
Theme URI: 		https://kingbeestudio.com
Description: 	Bootstrap 5.3.6 on Wordpress  10.25
Version: 		1.5.7
Author: 		King Bee Std
Author URI: 	https://kingbeestudio.com
*/


:root{

    --prim-color:#181A21;/*dark grey*/
    --sec-color:#FDEBD3;/*chair*/
    --third-color:#FFC290;/*abricot*/
    --fourth-color:#205958; /*vert dark  groupe medias*/
    --fifth-color:#F56363; /*Rouge  medias pub*/
    --sixth-color:#617DF7; /*Bleu moyen   media conseil*/
    --sev-color:#CE67E6; /*Rose  alternativ medias */
    --eighth-color:#F0FAF9; /*Bleu clair*/
    --grey: #b5b1b0;
    --light-grey: rgba(181,177,176,0.18);

      --page-bg: rgb(248, 246, 247);
      --prim-grd: radial-gradient(circle, rgb(244, 195, 107) 10%, rgb(244, 195, 107) 65%, var(--sev-color) 94%, var(--sev-color) 100%);
      --bs-body-font-family: "Titillium Web", sans-serif;

    /* header /footer */
      --header-h: 100px;
      --header-h-home: calc(var(--header-h) - 40px);
      --header-scrolled-h: 110px;
      --home-header-scrolled-h: 60px;
      --logo-header-w: 320px;
      --logo-header-scrolled: 160px;
      --logo-footer-w: 80px;

      --font-size: 18px;
      --font-size-h2: 32px;
      --mainnav-font-size: 18px;


 /*margin & padding*/

      --xs : 15px;
      --sm : 35px;
      --lg : 50px;
      --xl : 40px;
      --xxl : 60px;
      --xxxl : 90px;


/* blocs */
    --fullscreen-2cols-pt:40px;
    --fullscreen-2cols-pb:40px;

    --agences-section-bottom: 24px;
    --hero-margin-top:10px;
    --home-page-wrapper-mt:0px;
    /*--parallax-container-height: 200px;*/
}



@media only screen and (max-width: 1199px) {
  :root {
    --header-h: 100px;
    --large-col: 55vw;
    --font-size: 16px;
    --page-padding-top: var(--header-h);

  }
}
@media only screen and (max-width: 920px) {
  :root {
    --header-h: 80px;
  }
}
@media only screen and (max-width: 575.99px) {
  :root {
    --header-h: 60px;
    --font-size-menu-h:14px;
    --medium-col: 25vw;
    --large-col: 100%;
    ---logo-header-w: 55px;
    --logo-footer-w: 80px;
  }

}
@media (min-width: 641px) {
  :root {
    --container-max-width: 620px;
    --home-page-wrapper-mt:10px
  }
}
@media (min-width: 767px) {
  :root {
    --container-max-width: 740px;
    --font-size-menu-h:12px;
    --agences-section-bottom: 102px;
    --hero-margin-top:20px
  }
}
@media (min-width: 980px) {
  :root {
    --container-max-width: 940px;
  }
}
@media (min-width: 1080px) {
  :root {
    --container-max-width: 1020px;
    --font-size-menu-h:12px;
    --fullscreen-2cols-pt:50px;
    --fullscreen-2cols-pb:50px;
    --home-page-wrapper-mt:30px;
  }
}
@media (min-width: 1200px) {
  :root {
    --header-h: 100px;
    --logo-header-w: 90px;
    --page-padding-top: var(--header-h);
    --container-max-width: 1050px;
    --font-size: 18px;
    --bs-body-line-height: 24px;
    --font-size-menu-h:13px;
    --wp--preset--font-size--large:40px;
    --wp--preset--font-size--large-lineheight:48px;
    --home-page-wrapper-mt:50px;
    --hero-margin-top: 40px;
    --xs : 15px;
    --sm : 35px;
    --lg : 50px;
    --xl : 70px;
    --xxl : 90px;
    --xxxl : 140px;
  }
}
@media (min-width: 1399px) {
  :root {
    --header-h: 120px;
    --logo-header-w: 102px;
    --container-max-width: 1050px;
    --font-size-menu-h:15px;
    --fullscreen-2cols-pt:70px;
    --fullscreen-2cols-pb:70px;
    --home-page-wrapper-mt:40px;
  }
}
@media (min-width: 1600px) {
  :root {
    --container-max-width: 1050px;
    --font-size: 18px;
    --font-size-menu-h:16px;
    --hero-margin-top: 5px;
  }
}

@media (min-width: 1700px) {
  :root {
    --container-max-width: 1180px;
  }
}
.container {
  max-width: var(--container-max-width);
}
[id] {
  scroll-margin-top: var(--header-h); /* correctif ancre quand header fixe */
}

/*--------------------------------------------------------------
# COULEURS & HABILLAGES
--------------------------------------------------------------*/

.bkg-color-1 {
  background-color: var(--prim-color)
}
.bkg-color-2 {
  background-color: var(--sec-color)
}
.bkg-color-3, .color-ville-medias {
  background-color: var(--third-color)
}
.bkg-color-4, .color-groupe-medias {
  background-color: var(--fourth-color)
}
.bkg-color-5, .color-medias-publicite{
  background-color: var(--fifth-color)
}
.bkg-color-6, .color-medias-conseil {
  background-color: var(--sixth-color)
}
.bkg-color-7, .color-alternatives-medias {
  background-color: var(--sev-color)
}
.bkg-color-8 {
  background-color: var(--eighth-color)
}

.bkg-color-w {
  background-color: #FFF
}
.bkg-color-light-grey {
  background-color: var(--light-grey)
}
.brd_c_1 {
  border-collapse: collapse;
  border: 1px solid #707070
}
.brd_c_2 {
  border: 1px solid #001F40;
  border-collapse: collapse;
}
/*texte*/
.t-c-1 {
  color: var(--prim-color);
}
.t-c-2, a.t-c-2 {
  color: var(--sec-color) !important; /*rouge*/
}
.t-c-3 {
  color: var(--third-color);
}
.t-c-w, .t-c-w p {
  color: #FFF
}

.hr_c_1 {}


/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-size: var(--font-size);
  font-weight: 300;
  line-height: var(--bs-body-line-height);
  color: rgb(25, 25, 25);
  font-family: 'Titillium Web', sans-serif;
  background-color: #FFF;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a, a img, button {
  text-decoration: none;
  background-color: transparent;
  transition: .3s ease-in;
}
a img:hover, a img:focus {
  opacity: 0.6
}
a:active, a:hover {
  outline: 0;
  text-decoration: none
}
svg:not(:root) {
  overflow: hidden;
}
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
textarea:hover, input:hover, textarea:active, input:active, textarea:focus, input:focus, button:focus, button:active, button:hover, label:focus, .btn:active, .btn.active {
  outline: 0px !important;
  box-shadow: none !important;
}
button {
  overflow: visible;
  background-color: transparent;
  border: none;
}
button, select {
  text-transform: none;
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}
button[disabled], html input[disabled] {
  cursor: default;
}
button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
hr {
  box-sizing: content-box;
  height: 0;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden],
template {
  display: none;
}

img {
  border: 0;
}

input {
  line-height: normal;
}

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

legend {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
}

optgroup {
  font-weight: bold;
}

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

td,
th {
  padding: 0;
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
  clear: both;
  font-weight: 600;
  margin-top: 5px;
  margin-bottom: 1px;
}
.title-wrapper {
  margin-bottom: 70px;
}
h1.entry-title, h2.entry-title, .modal-title {
  text-transform: uppercase;
  color: #001F40;
  font-weight: 700;
  text-align: center
}
h1.entry-title {
  font-size: 35px;
}
h2 {
  font-size:var(--font-size-h2);
  font-weight: 700;
}
h2.entry-title, h2.entry-title a, p.h2 {
  font-size: calc(24px + .40vw);
  line-height: calc(26px + .40vw);
  font-weight: 800
}

.entry-header h1 {
  margin-top: 0px;
}
.wp-block-media-text h2 {
  font-size: calc(var(--font-size-h2) * 0.6);
  line-height: calc(var(--font-size-h2) * 0.8);
  margin-bottom: 35px;
}
h3, p.h3,p.h3 a{
  font-size: calc(18px + .40vw);
  line-height: calc(20px + .40vw);
  font-weight: 800;
   margin-top: 30px;
}

h4 {
  font-size: 1rem;
  line-height: 1.1rem;
}
p {
  font-size: var(--font-size);
  line-height: calc(var(--font-size) * 2);
  margin-bottom: 1.5em;
}
.bloc-photo-texte li {
  list-style: none;
  margin-bottom: 1rem;
  margin-left: 0;
}
.bloc-photo-texte p:last-child {
  margin-bottom: 0;
}
p.fs-plus {
  font-size: 24px;
  line-height: 44px;
}

p, a p, li, li a {
  color: #101010;
}
p a, li a {
  color: #000000;
  text-decoration: underline
}
p a:hover, li a:hover,p a:focus, li a:focus {
  color:#E0A354;
}
.text-sm {
  font-size: 0.8rem;
}

strong{
  font-weight: 600;
}

ul{
    padding: 0
}
li {
  margin-bottom: 0.5rem;
 margin-left: 18px;
}
article li {
  list-style: inside
}
ul.list-unstyled li{
   margin-left: 0;
   list-style: none;
}
.fw-700 {
  font-weight: 700
}
.erreur{
    color:red !important
}
.has-large-font-size{
  line-height: var(--wp--preset--font-size--large-lineheight);
}
/*--------------------------------------------------------------
# COMPOSITIONS
--------------------------------------------------------------*/
.wp-block-media-text.is-image-fill-element>.wp-block-media-text__media img{
  height:100%;
  object-fit:cover;
  position:absolute;
  width:100%;
}
.wp-block-media-text>.wp-block-media-text__content
{
  padding: 0 5%;
}
.no-puce {
  list-style: none
}
/*--------------------------------------------------------------
# KINGBEE / BOOTSTRAP  EXTENDED  1.1
--------------------------------------------------------------*/


.m-t-xl {
  margin-top: var(--xl);
}
.m-b-xl {
  margin-bottom: var(--xl);
}
.m-t-xxl {
  margin-top: var(--xxl);
}
.m-b-xxl {
  margin-bottom: var(--xxl);
}
.m-l-xxxl {
  margin-left: var(--xxxl);
}
.m-b-xxxl {
  margin-bottom: var(--xxxl);
}
.p-b-lg {
  padding-bottom: var(--lg);
}

.p-t-xl {
  padding-top: var(--xl);
}
.p-b-xl {
  padding-bottom: var(--xl);
}

.p-l-xl {
  padding-left: var(--xl);
}

.p-t-xxl {
  padding-top: var(--xxl);
}

.p-r-xxl {
  padding-right: var(--xxl);
}
.p-b-xxl {
  padding-bottom: var(--xxl);
}
.p-l-xxl {
 padding-left: var(--xxl);
}
.p-y-xxl {
  padding-top: var(--xxl);
  padding-bottom: var(--xxl);
}
.p-x-xxl {
  padding-left: var(--xxl);
  padding-right: var(--xxl);
}
.p-xxl {
  padding : var(--xxl);
}

.p-x-xxl {
  padding-left: var(--xxl);
  padding-right: var(--xxl);
}
.p-y-xxl{
  padding-top: var(--xxl);
  padding-bottom: var(--xxl);
}

.m-y-xxl{
  margin-top: var(--xxl);
  margin-bottom: var(--xxl);
}
.p-t-xxxl {
  padding-top: var(--xxxl);
}
.p-b-xxxl {
  padding-bottom: var(--xxxl);
}
.p-r-xxxl {
  padding-right: var(--xxxl);
}

.p-y-xxxl{
  padding-top: var(--xxxl);
  padding-bottom: var(--xxxl);
}

  /*
  .fullwidth-block{
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
  }*/
  .full-width-section {
    width: 100vw; /* Prend toute la largeur de la fenêtre */
    margin-left: calc(-50vw + 50%);
    position: relative;
  }



  /*--------------------------------------------------------------
  # FX
  --------------------------------------------------------------*/
  .ombre-bot {
    box-shadow: 0 8px 6px -2px rgba(0, 0, 0, 0.25) !important;
  }
  .ombre-halo {
    box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.15);
  }

  .ombre-top-inset {
    box-shadow: inset 0px 24px 20px -15px rgba(0,0,0,0.38);
  }

.parallax-container {
  position: relative;
  overflow: hidden;
  height: 300px;
}


.parallax-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: translateY(0);
  will-change: transform;
}

  @media only screen and (max-width: 575.99px) {

  }

@media only screen and (min-width: 767px) {
  .parallax-container {
    position: relative;
    overflow: hidden;
    height: 400px;
  }
  .parallax-container img {
    position: absolute;
    left: 0;
    height: auto;
  }
}
@media only screen and (min-width: 1200px) {
  .parallax-container {
    height: 600px;
  }
}


  /*--------------------------------------------------------------
  # HEADER / FOOTER
  --------------------------------------------------------------*/
  #header {
    margin-bottom: 30px
  }
  #logo-wrapper {
    padding-top: 30px
  }
  #logoHeader {
    max-width:  var(--logo-header-sm-w);
    height: auto;
  }

  #footer{
    background-color: var(--prim-color);
    color:#FFF;
    position: relative;
  }
  #footer h3,#footer p{
    color:#FFF
  }
  #footer h3{
    font-weight: 600;
    font-style: italic;
    font-size: va(--font-size-h2);
    margin-bottom: 20px
  }

  #footer-logo{
    max-width: var(--logo-footer-w);
  }

  .copyright-wrapper p {
    margin-top: 35px;
    font-size: 9px;
    letter-spacing: 0.05rem
  }
.content-wrapper {
  padding: 30px 10px;
  background-color: #FFF;
  margin-bottom: 70px;
  position: relative
}

.page-wrapper {
    margin-top: 50px;
    padding-top: 80px;
  overflow-x: hidden;
  }
.home .page-wrapper{
  padding-top: 50px;
  overflow-x: hidden;
  margin-top: var(--home-page-wrapper-mt);
}

  @media (min-width: 941px) {
    #header {
      margin-bottom: 70px
    }
    #logo-wrapper {
      padding-top: 42px
    }
    #logoHeader {
      max-width: 80px;
    }
  }

  /*--------------------------------------------------------------
  # HEADER WITH SCROLLED FX
  --------------------------------------------------------------*/

  body.customize-support, body.customize-support #header {
    margin-top: 46px
  }
  @media (min-width: 768px) {
    body.customize-support, body.customize-support #header  {
      margin-top: 32px
    }
  }
  @media screen and (max-width: 782px) {
    body.customize-support, body.customize-support #header {
      margin-top: 26px
    }
  }
  .top {
    position: relative;
    animation-name: ease-inAnimation;
    animation-duration: 0.22s;
    animation-timing-function: ease-in;
    animation-delay: 0;
    animation-iteration-count: 1;
    animation-fill-mode: both;

  }
  .scrolled{
    position: relative;
    animation-name: ease-outAnimation;
    animation-duration: 0.2s;
    animation-timing-function: ease-out;
    animation-delay: 0;
    animation-iteration-count: 1;
    animation-fill-mode: both;

  }

  @keyframes ease-inAnimation {
    0% {
      height: calc(var(--header-h) - 7px);
    }
    100% {
      top: 0px;
    }
  }
  @keyframes ease-outAnimation {
    0% {
      top: 0;
    }
    100% {
      height: calc(var(--header-h) - 7px);
    }
  }
  #header, #barrenavigation,#header #section-nav-user {
    transition:.2s ease-out;
  }

  #header {
    height: var( --header-h);
    position: fixed;
    background-repeat: no-repeat;
    background-position: center -10px;
    background-size: 120% 180px;
    top: 0px;
    background-color: var(--prim-color);
    width: 100%;
    z-index: 200;
  }
  #header.scrolled {
    background-color: var(--prim-color);
  }

  /*--------------------------------------------------------------
  # Navigation
  --------------------------------------------------------------*/
  #header-top a {
    color: #FFF;
    padding: 5px 0 5px
  }
  #header-top .horaires {}
  #header-top .sep {
    color: #fff;
    margin: 0 5px
  }
  .navbar {
    padding-top: 0.6rem;
  }
  .navbar.main-nav {
    z-index: 1000;
  }
  #primaryNav li {
    display: block;
    font-size: var(--mainnav-font-size);

    /*list-style-position: inside;*/
  }
  #primaryNav li a {
    color: #FFF;
    transition: 0.3s;
  }

  #primaryNav li a:hover, #primaryNav li a:focus {
    color: var(--sec-color);
  }

  .dropdown-menu{
    background-color: var(--prim-color);
    border-radius: 0;
  }
  .dropdown-toggle::after{
    display: none;
  }
  .dropdown-item {
    font-weight: 200;
  }
  .dropdown-item:hover{
    background-color: var(--prim-color);
  }
.dropdown-item.active{
  background-color: transparent;
}
  #menu-menu-footer li {
    list-style: none;
    text-align: center;
    margin-bottom: 5px;
  }
  #menu-menu-footer a, .footer a {
    text-decoration: none;
    color:rgb(25, 25, 25);
  }
  #menu-menu-footer li a:before {
    display: inline-block;
    content: '';
    width: 20px;
    height: 15px;
    background-image: url(images/arrow-r-red.svg);
    background-repeat: no-repeat;
  }
  #mmenu-menu-footer a:hover, #menu-menu-footer a:focus, .footer a:hover, .footer a:focus {
    color: #EB323C;
  }
  #menu-menu-docs li a {
    color: #EC661C
  }

  @media (max-width: 980px) {
    #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-1 a.mega-menu-logo img.mega-menu-logo {
      width: 40px;
    }
  }
  @media (min-width: 1199px) {
    #primaryNav li {
      font-size: 22px;
    }
  }

@media (min-width: 1400px) {
  #primaryNav li {
    margin-right: 35px;
  }
}
  a.wp-block-button__link,
  .prim-button,
  .forminator-button-submit{
    padding: 9px 24px !important;
    font-size: 18px;
    line-height: 20px;
    border-width: 1px;
    font-weight: bold;
    border: 1px solid;
    border-radius: 9999px;
  }
  .prim-button:hover,.prim-button:focus,
  a.wp-block-button__link:hover,
  a.wp-block-button__link:focus,
  .forminator-button-submit:focus,
  .forminator-button-submit:hover{
    background-color: var(--prim-color);
    border-color: var(--prim-color);
    color:var(--sec-color);
  }
  .forminator-error-message {
    background-color: transparent !important;
    font-size: 18px !important;
  }
.forminator-checkbox-label a{
  text-decoration: underline;
  color: var(--prim-color);
}

  .prim-button.inv{
    border-color: var(--sec-color);
    color: var(--sec-color);
  }
  .prim-button.inv:hover,.prim-button.inv:focus{
    background-color: var(--sec-color);
    color: var(--prim-color);
  }
#footer .widget_nav_menu{
font-size: 14px;
color:#FFF}
#footer .widget_nav_menu li{
   list-style: none;text-align: end}
#footer .widget_nav_menu a{;
  text-decoration: none;
  font-size: 14px;
  color:#FFF;
text-align: end}

  /*--------------------------------------------------------------
  # LIENS & BOUTONS
  --------------------------------------------------------------*/
  .primBtn{
    -webkit-border-radius: 9px !important;
    -moz-border-radius: 9px !important;
    border-radius: 9px !important;
    font-family: 'Raleway', sans-serif;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #ffffff;
    font-size: 18px;
    background: #ec343a;
    border: 1px solid #ec343a !important;
    padding: 15px 40px 15px 40px !important;
    -o-transition: .2s ease-in;
    -ms-transition: .2s ease-in;
    -moz-transition: .2s ease-in;
    -webkit-transition: .2s ease-in;
    transition: .2s ease-in;
  }
  .primBtn {
    padding: 15px 38px !important;
  }
  .primBtn:hover, .primBtn:focus, a.button.wc-backward:hover {
    opacity: 0.5
  }


  a[href $='.pdf'] {
    font-size: 1em;
    font-weight: 300;
    background-repeat: no-repeat;
    color: #b71c1c;
    padding: 3px 8px 4px;
    text-decoration: none;
    transition: .3s ease-in;
  }
  a[href $='.pdf']:before {
    font-size: 1.3em;
    font-family: dashicons;
    content: "\f190";
    padding-right: 5px;
    vertical-align: middle
  }
  a[href $='.pdf']:hover, a[href $='.pdf']:focus {
    text-decoration: none;
    color: #e53935;
    box-shadow: 0px 0px 1px #D50C10;
  }
  .connexion a:hover {
    color: #EB323C
  }
  .connexion .dashicons-warning {
    color: #EB323C;
    width: 30px;
    height: 30px;
    font-size: 30px
  }
  @media (max-width: 767px) {
    .btn_red, .btn_white {
      font-size: 11px;
    }
    .agence svg{
      max-width: 70px;
    }
  }
  @media (min-width: 767px) {
    .rounded-bkg {
      padding: 7px 16px;
      border-radius: 32px;
      display: inline-block;
      font-size: 100%
    }
    .connexion .dashicons-warning {
      width: 35px;
      height: 35px;
      font-size: 35px
    }
  }

.agence.medias-conseils svg#LOGO_MC_BLANC [data-name],
.agence.alternatives-medias svg#LOGO_AM_BLANC [data-name],
.agence.alternatives-medias svg#LOGO_MP_BLANC [data-name]
{
  transition: fill 0.4s ease;
}

.agence.medias-conseils:hover svg#LOGO_MC_BLANC [data-name="accent"],
.agence.medias-conseils:hover svg#LOGO_MC_BLANC [data-name="point-i-medias"],
.agence.medias-conseils:hover svg#LOGO_MC_BLANC [data-name="c"],
.agence.medias-conseils:hover svg#LOGO_MC_BLANC [data-name="o"],
.agence.medias-conseils:hover svg#LOGO_MC_BLANC [data-name="n"],
.agence.medias-conseils:hover svg#LOGO_MC_BLANC [data-name="s"],
.agence.medias-conseils:hover svg#LOGO_MC_BLANC [data-name="e"],
.agence.medias-conseils:hover svg#LOGO_MC_BLANC [data-name="i"],
.agence.medias-conseils:hover svg#LOGO_MC_BLANC [data-name="l"]
{
  fill: var(--sixth-color);
}

.agence.alternatives-medias:hover svg#LOGO_AM_BLANC [data-name="a-1"],
.agence.alternatives-medias:hover svg#LOGO_AM_BLANC [data-name="l-1"],
.agence.alternatives-medias:hover svg#LOGO_AM_BLANC [data-name="t-1"],
.agence.alternatives-medias:hover svg#LOGO_AM_BLANC [data-name="e-1"],
.agence.alternatives-medias:hover svg#LOGO_AM_BLANC [data-name="r-1"],
.agence.alternatives-medias:hover svg#LOGO_AM_BLANC [data-name="n-1"],
.agence.alternatives-medias:hover svg#LOGO_AM_BLANC [data-name="a-2"],
.agence.alternatives-medias:hover svg#LOGO_AM_BLANC [data-name="t-1"],
.agence.alternatives-medias:hover svg#LOGO_AM_BLANC [data-name="i-1"],
.agence.alternatives-medias:hover svg#LOGO_AM_BLANC [data-name="v-1"],
.agence.alternatives-medias:hover svg#LOGO_AM_BLANC [data-name="e-2"],
.agence.alternatives-medias:hover svg#LOGO_AM_BLANC [data-name="s-1"],
.agence.alternatives-medias:hover svg#LOGO_AM_BLANC [data-name="accent"],
.agence.alternatives-medias:hover svg#LOGO_AM_BLANC  [data-name="point-i-medias"]
{
  fill: var(--sev-color);
}
.agence.medias-publicite:hover svg#LOGO_MP_BLANC [data-name="p-1"],
.agence.medias-publicite:hover svg#LOGO_MP_BLANC [data-name="u-1"],
.agence.medias-publicite:hover svg#LOGO_MP_BLANC [data-name="b-1"],
.agence.medias-publicite:hover svg#LOGO_MP_BLANC [data-name="l-1"],
.agence.medias-publicite:hover svg#LOGO_MP_BLANC [data-name="c-1"],
.agence.medias-publicite:hover svg#LOGO_MP_BLANC [data-name="i-1"],
.agence.medias-publicite:hover svg#LOGO_MP_BLANC [data-name="t-1"],
.agence.medias-publicite:hover svg#LOGO_MP_BLANC [data-name="e-1"],
.agence.medias-publicite:hover svg#LOGO_MP_BLANC [data-name="accent"],
.agence.medias-publicite:hover svg#LOGO_MP_BLANC  [data-name="point-i-medias"]
{
  fill: var(--fifth-color);
}
.agence.ville-medias:hover svg#LOGO_VM_BLANC .i_point ,
.agence.ville-medias:hover svg#LOGO_VM_BLANC  [data-name="i_point-2"],
.agence.ville-medias:hover svg#LOGO_VM_BLANC [data-name="m"],
.agence.ville-medias:hover svg#LOGO_VM_BLANC [data-name="e"],
.agence.ville-medias:hover svg#LOGO_VM_BLANC [data-name="d"],
.agence.ville-medias:hover svg#LOGO_VM_BLANC [data-name="i"],
.agence.ville-medias:hover svg#LOGO_VM_BLANC [data-name="a"],
.agence.ville-medias:hover svg#LOGO_VM_BLANC [data-name="s"],
.agence.ville-medias:hover svg#LOGO_VM_BLANC [data-name="acc"]
{
  fill: var(--third-color) !important;
}

  /*--------------------------------------------------------------
  # SLICK
  --------------------------------------------------------------*/
  /* Slider */
  .slick-loading .slick-list {
    background: #fff url("./ajax-loader.gif") center center no-repeat; }

.equipe-carousel-wrapper-right {
  position: relative;
  margin-right: calc(-1 * (100vw - 100%) / 2); /* déborde à droite */
  overflow: visible;
}

.equipe-carousel {
  overflow: visible;
  padding-left: 0px;
  margin-left: -15px;
}
.equipe-carousel img{
  cursor: pointer;
}
.equipe-carousel p{
  line-height: 1.25;
}
.equipe-carousel .nom{
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 10px;
}
.pastille-agence{
  width: 52px;height: 52px;
  border-radius: 50%;
}
.pastille-agence.item-2, .pastille-agence.item-3{
  margin-top: -10px;
}
  /* Icons */
  @font-face {
    font-family: "slick";
    src: url("./distr/slick/fonts/slick.eot");
    src: url("./distr/slick/fonts/slick.eot?#iefix") format("embedded-opentype"), url("./distr/slick/fonts/slick.woff") format("woff"), url("./distr/slick/fonts/slick.ttf") format("truetype"), url("./distr/slick/fonts/slick.svg#slick") format("svg");
    font-weight: normal;
    font-style: normal; }


  /* Arrows */
  .slick-prev,
  .slick-next {
    position: absolute;
    display: none;/* display: block;*/
    height: 43px;
    width: 43px;
    line-height: 0px;
    font-size: 0px;
    cursor: pointer;
    background: transparent;
    color:transparent;;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    padding: 0;
    border: none;
    outline: none; }
  .slick-prev:hover, .slick-prev:focus,
  .slick-next:hover,
  .slick-next:focus {
    outline: none;
    background: transparent;
    color: transparent; }
  .slick-prev:hover:before, .slick-prev:focus:before,
  .slick-next:hover:before,
  .slick-next:focus:before {
    opacity: 1; }
  .slick-prev.slick-disabled:before,
  .slick-next.slick-disabled:before {
    opacity: 0.45; }
  .slick-prev:before,
  .slick-next:before {
    font-family: "slick";
    font-size: 40px;
    line-height: 1;
    /*color: white;*/
    opacity: 0.75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; }

  .slick-prev {
    left: -25px; }
  [dir="rtl"] .slick-prev {
    left: auto;
    right: -25px; }
  .slick-prev:before {
    content: "←"; }
  [dir="rtl"] .slick-prev:before {
    content: "→"; }

  .slick-next {
    right: 25px; }
  [dir="rtl"] .slick-next {
    left: -25px;
    right: auto; }
  .slick-next:before {
    content: "→"; }
  [dir="rtl"] .slick-next:before {
    content: "←"; }

  /* Dots */
  .slick-dotted.slick-slider {
    margin-bottom: 30px; }

  .slick-dots {
    position: absolute;
    top: -24px;
    list-style: none;
    display: block;
    text-align: center;
    padding: 0;
    margin: 0;
    width: 100%; }
  .slick-dots li {
    position: relative;
    display: inline-block;
    height: 18px;
    width: 18px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer; }
  .slick-dots li button {
    border: 0;
    background: transparent;
    display: block;
    height: 19px;
    width: 19px;
    outline: none;
    line-height: 0px;
    font-size: 11px;
    color: transparent;
    padding: 5px;
    cursor: pointer; }
  .slick-dots li button:hover, .slick-dots li button:focus {
    outline: none; }
  .slick-dots li button:hover:before, .slick-dots li button:focus:before {
    opacity: 1; }
  .slick-dots li button:before {
    position: absolute;
    top: 0;
    left: 0;
    content: "•";
    width: 24px;
    height: 24px;
    font-family: "slick";
    font-size: 10px;
    line-height: 20px;
    text-align: center;
    color: var(--fourth-color);
    opacity: 0.25;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; }

  .slick-dots li.slick-active button:before {
    color: var(--fourth-color);
    opacity: 0.75; }


  .slick-prev::before, .slick-next::before {
    font-size: 15px !important;
    opacity: .25 !important;
  }
  .slickcaroussel .item {
    position: relative;
  }
  .overlay-slick {
    position: absolute;
    background-color: #001F40;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    width: 100%;
    height: 0;
    transition: all 0.5s ease-in-out;
    z-index: 1000
  }

.slick-slide{
  padding: 10px 15px;

}

.carousel-item {
  min-height: 450px;
}
  /*--------------------------------------------------------------
  # CUSTOMS BLOCS
  --------------------------------------------------------------*/
  .fullscreen-2cols{
    min-height: 350px;
    padding-top: var(--fullscreen-2cols-pt);
    padding-bottom: var(--fullscreen-2cols-pb);
  }

.agence-2cols .bkg-color-4 * {
  color: var(--sec-color);
}
  .fullscreen-2cols .col-g li{
    list-style: none;
    margin-left: 0;
    font-size: 24px;
    margin-bottom: 24px;
    font-weight: bold;
  }
  @media (min-width: 1040px) {
    .fullscreen-2cols .col-g{
      border-right: 1px solid var(--sec-color)
    }
    .fullscreen-2cols .col-d{
      padding-left: 40px;
    }
  }
  .agence-2cols h2{
    font-size: 36px;
    line-height: 38px;
    margin-bottom: 38px;
    font-style: italic;
  }
.agence-2cols ul {
  padding: 0;
}
.agence-2cols li {
  list-style: none;
  position: relative;
  margin-left: 0;
}
.agence-2cols .col-g li {
  font-size: 24px;
  line-height: 28px;
  font-weight: 400;
}

.agence-2cols li::after {
  content: '';
  display: block;
  width: 36px;
  height: 1px;
  background-color: var(--prim-color);
  margin: 2rem 0 ;
}
.agence-2cols .col-d{
   margin: 10px 0 0 0px;
 }
.agence-2cols .col-d p {
  font-size: 18px;
  line-height: 36px;
  font-weight: 300;
}

.logo-wrapper {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  position: relative;
  top:-10px;
  left:0;
  z-index: 100;
}
@media (min-width: 767px) {
  .agence-2cols .col-d{
    margin: 70px 0 0 -20px;
  }
}
@media (min-width: 1040px) {
  .agence-2cols .col-d{
    margin: 80px 0 0 -60px;
  }
  .logo-wrapper {
    top:40px;
  }
}

.split-background-section {
  position: relative;
  overflow: hidden;
}

.split-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  display: flex;
  z-index: 0;
}
.split-background .bg-left,
.split-background .bg-right {
  width: 100%;
  height: 100%;
}
.split-background .bg-left {
  /* Couleur appliquée dynamiquement */
}

.split-background .bg-right {
  /* Couleur appliquée dynamiquement */
}

.split-background-section .container {
  position: relative;
  z-index: 1;
}
@media (min-width: 1040px) {
  .split-background {
    top: 0;
    left: 0;
    width: 100%;
  }
  .split-background .bg-left,
  .split-background .bg-right {
    width: 50%;
    height: 100%;
  }
}
  /*--------------------------------------------------------------
  # HOME
  --------------------------------------------------------------*/

#hero{
  margin-top: var(--hero-margin-top);
  background-color: var(--sec-color);
}
.video-content {
  z-index: 1;
  bottom: -290px;
  position: relative;
}

#agences-section{
    height: 120px;
    position: relative;
    bottom:var(--agences-section-bottom);

  }
  @media (min-width: 767px) {
    #agences-section {
      height: 150px;
    }
  }
  @media (min-width: 640px) {

    .agence:not(:first-child) {
      position: relative;
      border-right: 1px solid transparent; /* espace pour la bordure */
    }

    .agence:not(:first-child)::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 1px;
      height: 100%;
      background: linear-gradient(
              to bottom,
              transparent 0%,
              transparent 40%,
              white 40%,
              white 60%,
              transparent 60%,
              transparent 100%
      );
    }
  }

.fullscreen-2cols.bkg-color-4 * {
  color:var(--sec-color);
}

  /*======Buttons overlay =====*/
  .slickcaroussel .nom {
    height: 80px /* 3 x la valeur font-size h3*/
  }
  .slickcaroussel h3 {
    font-size: 35px;
    line-height: 45px;
    font-weight: 600;
    text-transform: uppercase
  }
  .slickcaroussel .texte_intro {
    height: 220px;
  }
  .slickcaroussel .texte_intro p {
    font-size: 18px;
    line-height: 22px;
    font-weight: 400;
    color: #FFF;
  }
  .slickcaroussel img {
    max-height: 260px;
    width: auto;
  }
  .slickcaroussel .btnplus {
    color: #FFF;
    font-size: 13px;
    padding: 9px 12px;
    border-radius: 8px;
    border: thin solid rgba(255, 255, 255, 1.00);
  }
  .slick-prev::before, .slick-next::before {
    font-size: 25px !important;
    opacity: .25 !important;
  }
  .slickcaroussel .item {
    position: relative;
  }
  .overlay-slick {
    position: absolute;
    background-color: #001F40;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    width: 100%;
    height: 0;
    transition: all 0.5s ease-in-out;
    z-index: 1000
  }
  .btn-close-w {
    position: relative;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    float: right;
    top: -2px;
    opacity: 1
  }
  .btn-close-w svg {
    width: 23px;
    height: 23px;
  }
  .btn-close-w:hover, .btn-close-w:focus {
    top: -3px;
    opacity: 0.6
  }
  .bg_2c_1 {
    background-color: #001F40
  }
  #coordonnees, #coordonnees p, #coordonnees a {
    margin-bottom: 0.5rem;
    color: #FFF;
    text-align: center;
  }
  @media (min-width: 767px) {
    .slickcaroussel .item {
      border-left: 1px solid rgba(255, 255, 255, 0.66);
      border-collapse: collapse
    }
    .slickcaroussel {
      border-right: 1px solid rgba(255, 255, 255, 0.66);
      border-collapse: collapse
    }
  }
  @media (min-width: 1039px) {
    .bg_2c_1 {
      background: linear-gradient(90deg, #fff 50%, #001F40 50%);
    }
  }


  /*--------------------------------------------------------------
  # FORMULAIRES
  --------------------------------------------------------------*/
  .forminator-ui.forminator-custom-form:not(.forminator-size--small)[data-grid="open"] .forminator-col{
    flex: none !important;
  }
  .forminator-input,.forminator-textarea{
    background-color: var(--third-color);
    border:none;
    border-bottom: 1px solid var(--prim-color);
  }
  .forminator-label{
    font-weight: bold;
  }
  .forminator-response-message.forminator-success{
  background-color: var(--fourth-color) !important;
  color:#FFF
}

  /*--------------------------------*/
  /* ACF INPUT CSS
  /*----------------------------------*/

  .inputSm{
    width: 100%
  }
  @media (min-width: 767px) {
    .inputSm
    {
      width: 200px;
    }

  }
  .af-input.acf-input select,
  ul.acf-radio-list li,.af-field-type-checkbox label, .acf-checkbox-list label,
  .acf-input input[type=text] ,.acf-input input[type=email], .acf-input select,input[type=number]{
    font-size: 18px !important;
    background-color: #fff
  }

  .acf-form-submit{
    border-top: 1px solid #DBDBDB;
    padding-top: 35px  !important
  }

  .acf-notice p {
    font-size: 18px !important;
    line-height: 22px;
    margin: 0.5em 0;
    color:#fff !important
  }
  .acf-notice.-error {
    background:#E36363 !important;
    border-color:#E36363 !important;
  }

  .af-field {
    display: flex;
    flex-wrap: wrap;

  }
  .af-field > * {
    box-sizing: border-box;
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
  }
  .af-label.acf-label {
    width: 40% !important;
    padding-right: 35px;
  }
  .af-input.acf-input {
    width: 50% !important;

  }
  .acf-label{
    color: #707070;
    font-weight: 400;
  }
  .acf-label label{
    margin-top: auto !important;
    margin-bottom: auto !important
  }
  p.af-field-instructions{
    font-size: 14px;
  }
  .acf-input input[type=text] ,.acf-input input[type=email], .acf-input select, input[type=number],
  #acf-field_627bd7abbad2a-field_627bd7abbad2c,
  .input-text,.acf-input-append
  {
    height: 60px !important;
    border:2px solid rgba(164,164,164,0.40);
    border-radius: 5px;
    padding-left: 15px;
  }
  input[type=number]{
    text-align: center
  }
  .input-text, .select2-selection {
    width: 100%;
    margin-bottom: 15px
  }
  .acf-input-prepend, .acf-input-append,#acf-field_627bd7abbad2a-field_627bd7abbad2c
  {height: 35px;
  }
  .acf-input select:focus,.acf-input select:hover
  {
    border:2px solid #7080B1;
  }

  .acf-fields > .acf-field{padding: 20px 12px !important}

  .categorychecklist-holder, .acf-fields.border, .acf-fields.-border{
    border: none !important;
  }
  .acf-fields.-border{margin-left: -12px}
  .acf-checkbox-list{padding: 0 !important}

  .acf-button-group label.selected{
    border-color: #7080B1 !important;
    background: #7080B1 !important;
    color: #fff;
    z-index: 2;
  }

  input[type=checkbox],input[type=radio],input[type=file]{
    height: 20px;
    width: 20px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    border-radius: 4px;
    outline: none;
    transition-duration: 0.3s;
    background-color: #FFF;
    cursor: pointer;
  }
  input[type=file]{
    width: auto;
    height: 45px;
    background-color:transparent;
  }
  input[type=file]::file-selector-button,
  input[type=file]::-webkit-file-upload-button {
    border: 1px solid var(--sec-color);
    color: var(--sec-color);
    padding: 8px;
    border-radius: 4px;
    background-color: #ffffff;
  }

  input[type=file]::file-selector-button:hover,
  input[type=file]::-webkit-file-upload-button:hover {
    background-color: #e9e9e9;
  }
  input[type=checkbox]:checked,input[type=radio]:checked {
    background-color:var(--fourth-color);
  }

  input[type=checkbox]:checked::before,input[type=radio]:checked::before {
    content: '\2713';
    display: block;
    text-align: center;
    color: #FFF;
    line-height: 22px
  }

  .acf-input-append {
    font-size: 22px!important;
    line-height: 55px !important;

  }
  .af-success p{
    font-size: 28px
  }

  /*ACF EXT*/
  ul.acf-radio-list:focus-within, ul.acf-checkbox-list:focus-within {
    border:none !important;
  }

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

  /* retrait du fond bleu sous chrome et d'autres*/
  input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
  }
  @-webkit-keyframes autofill {
    0%, 100% {
      color: #666;
      background: transparent;
    }
  }
  input:-webkit-autofill {
    -webkit-animation-delay: 1s; /* Safari support - any positive time runs instantly */
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
  }


  /*--------------------------------------------------------------
  # WRAPPERS & BOXES
  --------------------------------------------------------------*/

  .border-bot {
    border-bottom-width: 3px;
    border-bottom-style: dotted;
  }

  @media (max-width: 1040px) {
    /*boite scroll tableau pour mobile doit envelopper le tableau*/
    .scrolling-wrapper {
      overflow-x: scroll;
      overflow-y: hidden;
      width: 100%;
      /*    white-space: nowrap;*/
      -webkit-overflow-scrolling: touch;
      -webkit-box-shadow: inset -14px 1px 16px -22px rgba(0, 0, 0, 0.52);
      box-shadow: inset -14px 1px 16px -22px rgba(0, 0, 0, 0.52);
      font-size: 0.9rem
    }
  }
  @media (min-width: 980px) {
    .content-wrapper {
      padding: 40px 70px;
      margin-bottom: 80px;
    }
  }
  @media (min-width: 1280px) {
    .content-wrapper {
      padding: 70px 100px;
      margin-bottom: 110px;
    }
  }


  /*--------------------------------------------------------------
  # TO TOP
  -------------------------------------------------------------*/
  #toTop {
    width: 50px;
    height: 50px;
    display: none;
    position: fixed;
    bottom: 25px;
    right: 35px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: var(--fourth-color);
    cursor: pointer;
    padding: 6px 8px 7px;
    border-radius: 50%;
  }
  #toTop svg {
    width: 26px;
    height: auto;
    margin: auto;
    fill: #fff;
  }
  #toTop:hover  {
    background-color: rgba(103,116,232,0.40);
  }
  #toTop:hover svg {
    fill: #6774E8;
  }
  @media only screen and (max-width: 768px) {
    #toTop {
      font-size: 1.1rem;
    }
  }

  /*--------------------------------------------------------------
  # RECHERCHE
  --------------------------------------------------------------*/


  #searchform svg,.searchform svg  {
    max-width: 25px;
  }
  .mots-clefs-recherches{
    color: var(--prim-color)
  }

  .btn-outline-search {
    color: #FFF;
    border-color: #FFF;
  }

  .searchform svg .a{fill:#fff;stroke:#fff;stroke-miterlimit:10;stroke-width:2px;}
  .searchform:hover svg .a{fill:var(--sec-color);stroke:var(--sec-color);}

  .btn-outline-search {
    color: #FFF;
    border-color: #FFF;
  }
  #search-page .searchform svg .a{fill:#00486F;stroke:#00486F;stroke-miterlimit:10;stroke-width:2px;}
  #search-page .btn-outline-search {
    color:#00486F;
    border-color:#00486F;
  }
  #search-page .form-control{
    border-color: #00486F
  }

  #search-content li.item {
    list-style: none
  }
  #search-page a{
    text-decoration: none
  }
  #search-page a:hover *{
    color: var(--sec-color);
  }

#clients{
  min-height: 400px;
}

.wp-block-media-text > .wp-block-media-text__content {
  padding: 0 !important;
}
/*--------------------------------------------------------------
# HAMBURGER
--------------------------------------------------------------*/

.hamburger {
  padding: 15px 15px;
  display: flex;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: auto 0;
  overflow: visible;
  z-index: 1002}
.hamburger:hover {
  opacity: 0.9; }
.hamburger.is-active:hover {
  opacity: 0.9; }
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
  background-color:#FFF;
}

.hamburger-box {
  width: 32px;
  height: 24px;
  display: flex;
  position: relative;  margin: auto; }

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
  width: 32px;
  height: 3px;
  background-color:#FFF;
  border-radius: 4px;
  position: absolute;
  transition-property: transform;
  transition-duration: 0.15s;
  transition-timing-function: ease; }
.hamburger-inner::before, .hamburger-inner::after {
  content: "";
  display: block; }
.hamburger-inner::before {
  top: -10px; }
.hamburger-inner::after {
  bottom: -10px; }
/*
   * Collapse
   */
.hamburger--collapse .hamburger-inner {
  top: auto;
  bottom: 0;
  transition-duration: 0.13s;
  transition-delay: 0.13s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--collapse .hamburger-inner::after {
  top: -20px;
  transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; }
.hamburger--collapse .hamburger-inner::before {
  transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--collapse.is-active .hamburger-inner {
  transform: translate3d(0, -10px, 0) rotate(-45deg);
  transition-delay: 0.22s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
.hamburger--collapse.is-active .hamburger-inner::after {
  top: 0;
  opacity: 0;
  transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; }
.hamburger--collapse.is-active .hamburger-inner::before {
  top: 0;
  transform: rotate(-90deg);
  transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);

}

/*--------------------------------------------------------------
# VOLET
--------------------------------------------------------------*/


.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 400;
  left: 0;
  top: calc(var(--header-h) - 8px);
  overflow-x: hidden;
  transition: 0.5s;
  background-color: var(--prim-color);
}
.overlay-wrapper {
  position: relative;
  top: 5%;
  width: 100%;
  margin-top: 30px;
  line-height: 1.8rem
}
.overlay #close-btn {
  margin-top: 36px;
  font-size: 100px;
  color: #FFF;
  transition: 0.4s;
}
.overlay #close-btn:hover, .overlay #close-btn:focus {
  color: #1A3764
}


@media (min-width: 767px) {
  #voletGauche .titre-menu {
    font-size: 50px;
    line-height: 60px
  }
}
@media (min-width: 1024px) {

  .overlay-wrapper {
    width: 60%;
  }
  .overlay-wrapper .picto {
    max-width: 60px;
  }
  #voletGauche .titre-menu {
    font-size: 70px;
    line-height: 80px
  }
}