/* FONT FAMILIES
   VARIABLES
   RESET et GLOBAL 
   LIEN ET BOUTONS 
   COULEUR 
   HELPER - ALIGNEMENT 
   HELPER - img responsive 
   CONTAINER 

   HEADER ==================================== 
   HEADER container 
   HEADER LOGO
   HEADER NAV 
   HEADER SOCIAL - phone et rs 
   burger icon 
   media queries 

   FOOTER ==================================== 
   */


   /* FONT FAMILIES */
   /* ---------------------------------------- */

    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap');

   @font-face { font-family: 'Pistilli'; src: url('font/Pistilli-Roman.ttf'); font-weight: 500; font-display:swap; }

   @font-face { font-family: 'Arboria'; src: url('font/arboria/Arboria-Black.ttf'); font-weight: 800; font-display:swap; }
   @font-face { font-family: 'Arboria'; src: url('font/arboria/Arboria-Bold.ttf'); font-weight: 700; font-display:swap; }
   @font-face { font-family: 'Arboria'; src: url('font/arboria/Arboria-Medium.ttf'); font-weight: 500; font-display:swap; }
   @font-face { font-family: 'Arboria'; src: url('font/arboria/Arboria-Book.ttf'); font-weight: 400; font-display:swap; }
   @font-face { font-family: 'Arboria'; src: url('font/arboria/Arboria-Light.ttf'); font-weight: 300; font-display:swap; }
   @font-face { font-family: 'Arboria'; src: url('font/arboria/Arboria-Thin.ttf'); font-weight: 200; font-display:swap; }


   /* VARIABLES */
   /* ---------------------------------------- */
   :root {

    /* dimensions */
    --container-padding: 25px;
    /* Colors */
    /*--color-1x: #E50046; /*rose*/
   /* */--color-1x: #99CC33; 
    --color-2: #000; /*black*/
    --color-3: #6e6e6e; /*gris foncé*/
    --color-4: #BABABA; /*gris medium*/
    --color-5: #f7f7f7; /* gris quasi blanc*/
    --color-6: #fff; /* blanc*/
    --color-7: #fff; /* blanc*/
    --color-dark: #6e6e6e;
    --color-medium: #e3e3e3;
    --color-light: #f7f7f7;
    /* Fonts */
    --font-size-base: 2rem;
    --line-height-base: 2.2rem;
    --font-family-base: 'Cambria', sans-serif;
    --font-family-2: 'Pistilli';
    /* media queries */
    --media-1600: 1600px;
    --media-1200: 1200px;
    --media-991: 991px;
    --media-500: 500px;
}

/* RESET et GLOBAL */
/* ---------------------------------------- */

::placeholder {
    color: var(--color-2);
}

*, *::before, *::after { box-sizing: border-box; }
blockquote{ font-weight: 700 }


html { font-size: 62.5%; font-family: var(--font-family-base); /* "base 10" au départ */ }
body { font-size: var(--font-size-base); }
p { line-height: var(--line-height-base); }
p.h2-like{ font-size: 6rem; font-weight: bold; color: var(--color-2) }
p.h3-like{ font-size: 4rem; font-weight: bold; color: var(--color-2) }

/* Cite */
cite{ font-size: 4.5rem; font-style: normal; font-weight: 600; color: var(--color-1x); margin: 10rem 0; display: block; line-height: 1; position: relative; padding-top: 9rem; text-align: center;
}

cite::before{ position: absolute; font-weight: lighter; font-family: var(--font-family-2); content: "‘‘"; font-size: 20rem; left: 40%; top: 0; letter-spacing: -15px;
}

@media (max-width: 480px) {
    cite{ font-size: 3rem; margin: 4rem 0 }
    cite::before{ font-size: 15rem; left: 35%; top: 15px }
}

.tabcontent { display: none }
.tabcontent:first-child { display: block }
.tablinks:hover{text-decoration: none}
.tablinks.active { color: var(--color-1x) !important; }

/*cite:after{
    position: absolute;
    font-weight: lighter;
    font-family: var(--font-family-2);
    content: "‘";
    font-size: 20rem;
    right: 50%;
    top: 0;
}*/

/* sticky */
.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 5;
}

.sticky + .content {
    padding-top: 110px;
}


/* LIEN ET BOUTONS ----------------------------------- */
a { color: var(--color-2); text-decoration: none; }
a:hover { text-decoration: underline; }

.lien1 { text-decoration: underline; }
.lien1:hover, .lien2.is-selected { text-decoration: none; }

/* lien souligne rose */
button.lien2, button.lien3 { background-color: white; border: 0; }

/* lien souligne gris */
.lien2 { position: relative; display: inline-block; }
.lien2:hover { text-decoration: none; color: var(--color-1x); }
.lien2:before { content: ''; position: absolute; left: 0%; right: 0%; top: 70%; height: 0.6rem; background: var(--color-3); opacity: 0.3; transition: 0.3s; }
.lien2:focus:before, .lien2:hover:before, .lien2.is-selected:before { left: 10%; background: var(--color-1x); }

/* lien souligne rose */
.lien3 { position: relative; display: inline-block; }
.lien3:hover { text-decoration: none; color: var(--color-1x); }
.lien3:before { content: ''; position: absolute; left: 0%; right: 0%; top: 70%; height: 0.6rem; background: var(--color-1x); opacity: 0.3; transition: 0.3s; }
.lien3:focus:before, .lien3:hover:before, .lien3.is-selected:before { left: 10%; background: var(--color-1x); }

/* lien souligne blanc */
.lien4 { position: relative; display: inline-block; color: var(--color-6); }
.lien4:hover { text-decoration: none; }
.lien4:before { content: ''; position: absolute; left: 0%; right: 0%; top: 70%; height: 0.6rem; background-color: rgba(255,255,255,30%); transition: 0.3s; }
.lien4:focus:before, .lien4:hover:before, .lien4.is-selected:before { left: 5%; background-color: rgba(255,255,255,50%); }

/* lien simple majuscule */
.lien5 { font-weight: 300; position: relative; display: inline-block; color: var(--color-6); text-transform: uppercase; text-decoration: none }

.lien6 { font-size: 2.3rem; font-weight: 500; position: relative; display: inline-block; color: var(--color-1x); text-decoration: none }
.lien6:hover { text-decoration: none; }
.lien6:before { content: ''; position: absolute; left: 0%; right: 0%; top: 70%; height: 0.8rem; background: rgba(0,0,0,0.2); opacity: 0.3; transition: 0.3s; }
.lien6:focus:before, .lien2:hover:before, .lien2.is-selected:before { left: 10%; background: var(--color-3); }

.qcd.btn1{ color:black !important; }
.qcd.btn1:hover{ color:var(--color-fushia) !important; }
.qcd:hover { text-decoration: underline; cursor: pointer; }


/* bouton */
.btn { cursor: pointer; padding: 10px 20px; text-transform: uppercase; text-align: center; font-size: 1.6rem; font-weight: 700; border-width: 2px; border-style: solid; text-decoration: none; border-radius: 10; }
/* btn1 */
.btn1 { background: var(--color-1x); color: white; border-color: var(--color-1x); transition: all 300ms ease-in-out; }
.btn1:hover, .btn1.is-selected { background: white; color: var(--color-1x); text-decoration: none; }
/* btn2 */
.btn2 { background: var(--color-2); color: var(--color-6); border-color: var(--color-2); }
.btn2:hover, .btn2.is-selected { background: var(--color-6); color: var(--color-2); border-color: var(--color-2); text-decoration: none; }


/* COULEUR ---------------------------------- */

.color-1 { color: var(--color-1) !important; }
/* rose */
.color-2 { color: var(--color-2) !important; }
/* black */
.color-3 { color: var(--color-3) !important; }
/* gris foncé */
.color-4 { color: var(--color-4) !important; }
/* gris medium */
.color-5 { color: var(--color-5) !important; }
/* quasi blanc */
.color-6 { color: var(--color-6) !important; }
/* blanc */


/* TITRE ----------------------------------- */

.h1-like, .h2-like, .h3-like, .h4-like { font-weight: 700; }
.h1-like { font-size: 7rem; color: var(--color-1x); margin-top: 1rem; margin-bottom: 3rem; }
.h2-like { font-size: 5rem; color: var(--color-2); margin-top: 0.5rem; margin-bottom: 2rem; }
.h3-like { font-size: 4rem; color: var(--color-2); margin-top: 0.5rem; margin-bottom: 1.7rem; }
.h4-like { font-size: 2.5rem; color: var(--color-2); margin-top: 0.5rem; margin-bottom: 1rem; }
/* titre avec accroche*/
.titre-accroche {}
.titre-accroche h1, .titre-accroche h2, .titre-accroche h3, .titre-accroche h4, .titre-accroche h5, .titre-accroche h6, .titre-accroche p { margin-bottom: 1rem; }
.titre-accroche h1{    line-height: 3.8rem;}
.accroche { font-size: 2rem; font-weight: 700; color: var(--color-1x); margin-top: 0; margin-bottom: 0.8rem; }
/* titre - responsive*/
@media (max-width: 1200px) {
    /*html {  font-size: 56%; }*/ /*body {  font-size: 1.8rem; }*/
    .h1-like { }
    .h2-like { }
    .h3-like { }
    .h4-like { }
}
@media (max-width: 1024px) {
    /*html {  font-size: 47%; }*/ /*body {  font-size: 1.6rem; }*/
    .h1-like, .h2-like, .h3-like, .h4-like { }
}

@media (max-width: 480px) {
    .h1-like{ font-size: 4.5rem; line-height: 4rem; width: 100% }
}

/* PARAGRAPHES ------------------------------------------ */
.par-aintro{
    text-align: center;
    width: 80%;
    margin: 0 auto;
}
.par-aintro p{
    font-size: 2.7rem;
    line-height: 1.2;
    font-weight: 400;
}
.with-quote-big{ position: relative}
.with-quote-big::before{ content: "❛❛"; position: absolute }
.with-quote-big p{}

/* HELPER - ALIGNEMENT ----------------------------------- */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.flex-1{ flex: 1 }
.has-shadow{
    -webkit-box-shadow: 0 5px 10px 0 rgba(0,0,0,0.15);
    -moz-box-shadow: 0 5px 10px 0 rgba(0,0,0,0.15);
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.15);
}
/* HELPER - img responsive  ----------------------------------- */
.img-responsive { width: 100%; height: auto}

/* CONTAINER ----------------------------------- */

.container { display: flex; width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; }
/*.container-xl { display: flex; width: 100%; max-width: 1600px; margin-left: auto; margin-right: auto; }*/
.container-xl {display: flex; width: 100%; max-width: 1310px; margin-left: auto; margin-right: auto;}

@media (max-width: 1200px) {
  .container { padding: var(--container-padding); }
}
@media (max-width: 480px) {
  .container { padding: var(--container-padding-small); }
}



/* HEADER ============================================================================================= */

.header-wrapper { -webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.16); -moz-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.16); box-shadow: 0 1px 3px 0 rgba(0,0,0,0.16) }
/* HEADER container */
header { background: #fff; display: flex; padding: 0 65px; flex: 0 1 100%; align-items: center; min-height: 100px }
header .kcol1, header .kcol2, header .kcol3 {}
header .kcol1 { flex: 30%; display: flex; }
header .kcol2 { flex: 0 1 100%; display: flex; justify-content: center; }
header .kcol3 { flex: 18%; display: flex; align-items:center; justify-content: space-between; }

/*header .kcol1{ flex:100%; height: 60px; }
header .kcol2{ flex:100%; justify-content: flex-start; background-color: var(--color-1x); height: calc(75vh - 60px); }
header .kcol3{ flex:100%; justify-content: flex-start; background-color: var(--color-1x); height: 25vh; text-align:center; flex-wrap: wrap;  }*/

/* HEADER LOGO */
.header__logo {}
.header__logo .logo {display: flex; text-decoration: none; width: 100%; justify-content: space-between; align-items: center }
.header__logo .logo:hover {text-decoration: none }
.header__logo .logo:hover ul {opacity: 1; transition: all 300ms ease-in; }
.header__logo ul {opacity: 0; margin: 0; padding: 0; list-style: none;}
.header__logo ul li {font-size: 13px;color: var(--color-1x);margin: 0 30px;}
.header__logo img { position: relative; top: 5px; min-width: 120px; max-width: 199px; width: 100% }
/* HEADER NAV */
.header__nav {}
.header__nav ul { display: flex; align-items: center; justify-content: center; list-style-type: none; margin: 0; padding: 0; }
.header__nav .ul1 { display:none; }
.header__nav li { margin: 0 15px; }
.header__nav a { position: relative; display: block; padding: 5px 5px; font-size: 1.5rem; font-weight: 700; }
.header__nav a.selected { color: black; text-decoration: none }
.header__nav a.selected:before { width: 88%;
    content: '';
    position: absolute;
    left: 6px;
    right: 0;
    top: 60%;
    bottom: 3px;
    height: 0.9rem;
    background: var(--color-1x);
    opacity: 0.3; }
.header__nav a:hover { color: black; text-decoration: none; }
.is-overlined:before, .header__nav a:before { width: 0;content: ''; position: absolute; left: 5%; right: 5%; top: 60%; bottom: 3px; height: 0.9rem; background: var(--color-1x); opacity: 0; transition: 0.3s; }
.header__nav a.is-current:before, .header__nav a:focus:before, .header__nav a:hover:before { width: 90%; left: 5%; opacity: 0.3; }

/* HEADER SOCIAL - phone et rs */
.header__social-wrapper {}
.header__phone {}
.header__phone a { color: var(--color-1x); position: relative; display: block; padding: 15px; font-size: 2.4rem; }
.header__phone a:hover { text-decoration: none; }
.header__phone__icon {}
.header__phone__nb { padding: 0 5px; background: #ffffff; position: absolute; right: 25px; /*width: 200px;*/ margin-right: 15px; font-size: 2rem; font-weight: 700; color: var(--color-1x); opacity: 0; }
.header__phone a:hover .header__phone__nb { display: block; right: 25px; opacity: 1; transition: all 300ms ease-in; width: 200px }
.header__reseau { display: flex; list-style-type: none; margin: 0; padding: 0; align-items: center }
.header__reseau li { flex: auto; margin-bottom: 0 }
.header__reseau a { color: var(--color-1x); display: inline-block; padding: 15px; font-size: 2.4rem; text-decoration: none; }
.header__reseau a:hover { color: var(--color-2); transition: all ease-in-out 300ms }
.header__reseau.fb {}
.header__reseau.fb .icon-facebook {}
.header__reseau.in {}
.header__reseau.in .icon-linkedin {}
.header__reseau.ins {}
.header__reseau.ins .icon-instagram {}

.burger-wrapper{ display: flex; align-items: center; justify-content: space-between}
.burger-wrapper .phone{
    display: none;
    color: var(--color-1x);
    font-size: 4rem;
    line-height: 0;
    vertical-align: bottom;
    padding-top: 10px;
    margin-right: 2rem;}

/* burger icon */
.burger { display: none; padding: 10px; width: 75px; height: 60px; border: 0; position: relative }
.burger.close .ico:nth-child(1) { top: 49%; transform: rotate(225deg); width: 60% }
.burger.close .ico:nth-child(2) { opacity: 0; transform: rotate(45deg); }
.burger.close .ico:nth-child(3) { bottom: 45%; transform: rotate(-225deg); width: 60%; left: 10px }
.ico { position: absolute; left: 10px; height: 4px; width: 60%; display: block; background-color: var(--color-1x); transition: all 300ms ease; border-radius: 4px }
.ico:nth-child(1) { top: 30%;  }
.ico:nth-child(2) { top: 50%; opacity: 1; }
.ico:nth-child(3) { bottom: 20%; width: 40%; left: 25px }

/*langue switcher*/
.lang-switcher ul{padding-left:0; display:  flex; align-items:  center; justify-content: center; margin: 0}
.lang-switcher ul li{ list-style:  none; margin: auto 5px}

.lang-switcher{margin-left: 60px}

.lang-switcher ul li a{ font-size: 14px; color: #606060; text-transform: uppercase; border-radius: 39px; width: 39px; height: 39px; display: flex; align-items:  center; justify-content: center; border: 1px solid #606060}

.lang-switcher ul li a:hover{ color: var(--color-1x); text-decoration:  none; outline:  none; border-color: var(--color-1x)}


/* media queries */
@media (max-width: 1600px) {
    header { padding-left: 25px; padding-right: 25px; }
    header .kcol2, header .kcol3{ display: flex }
}
@media (max-width: 1200px) {
  header { padding: 10px 15px; }
  .header__nav li { margin: 0 6px; }
    header .kcol2, header .kcol3{ display: flex }
}


@media (max-width: 1380px) {
	.lang-switcher{margin-left: 15px;}
	header .kcol3{ flex-wrap: wrap; justify-content:  center}
	.header__phone a, .header__reseau a{padding: 15px 5px; font-size: 1.5rem}
}


@media (max-width: 1024px) {
    .header__nav li { margin: 0 3px; }
    .header__logo .logo ul{display: none}
    .header__logo .logo:hover ul{display: none}
}
@media (max-width: 991px) {
    header { padding: 0; flex-wrap: wrap; align-content: space-between }
    .burger { display: block; }
    .header__logo img { height: 48px; }
    .header__logo .logo ul{display: none}
    .header__logo .logo:hover ul{display: none}
    header .kcol1 { flex: 100%; height: 87px; align-items: center; justify-content: space-between }
    header .kcol2, header .kcol3{ display: none }
    header .kcol2 { flex: 100%; justify-content: flex-start; background-color: var(--color-1x); height: calc(75vh - 60px); }
    header .kcol3 { flex: 100%; justify-content: center; background-color: var(--color-1x); height: 25vh; text-align: center; flex-wrap: wrap; }
    .header__nav { display: flex; flex-wrap: nowrap; width: 100%; text-align: center; padding: 70px 0 }
    .header__nav ul { flex-wrap: wrap; flex: 100%; }
    .header__nav li { flex: 100%; display: flex; }
    .header__nav li:first-child { display: none }
    .header__nav a { position: relative; padding: 0; color: white; flex: 100%; align-items: center; display: flex; justify-content: center; font-weight: 500; font-size: 3.4rem }
    .header__phone__nb { position: relative; right: auto; width: auto; opacity: 1; display: block; color: white; font-size: 3rem }
    .header__phone a:hover .header__phone__nb { right:auto; }
    .header__phone__icon { display: none; }
	.burger-wrapper .header__phone__icon{display: block}
	.burger-wrapper .header__phone__icon:hover{text-decoration: none !important; outline: none}
	.burger-wrapper .header__phone__icon:before{color: #e50046 !important}
    .icon-telephone:before { color: white !important; }
    .header__reseau span:before { color: white; }
    .header__reseau span:before { color: white; }
    .header__phone { flex: 100%; }
    .header__reseau, .lang-switcher { display: flex; justify-content: center; max-width: 49%;}
	.lang-switcher ul li a{ color: #fff !important; border-color: #FFFFFF !important}
	.lang-switcher ul li a:hover{ color: black !important; border-color: black !important}
    .header__reseau li { flex: initial; }
    .header__reseau a { display: flex; justify-content: center; }
    .header__phone__nb{ background: none }
    .burger-wrapper .phone{ display: block }
	.header__logo .logo{ width: 100%; justify-content: space-between; padding: 0 15px}
}

@media (max-width: 767px) {
    .burger-wrapper .phone{ display: block }
    .header__logo .logo ul{display: none}
    .header__logo .logo:hover ul{display: none}
    .header__phone__nb{ background: none }
}

@media (max-width: 480px) {
    .burger-wrapper .phone{ display: block }
    .header__logo .logo ul{display: none}
    .header__logo .logo:hover ul{display: none}
    .header__phone__nb{ background: none }
}

/* BREADCRUMBS */
.breadcrumbs-wrapper{ padding: 30px 0; position: absolute; top: 94px; left: 0; right: 0; }
.breadcrumbs{ display: flex; margin: 0; padding: 0; list-style: none }
.breadcrumb-item{ font-size: 1.5rem; margin: 0 5px }
.breadcrumb-item:first-child { margin-left: 0 }
.breadcrumb-item:last-child { color: var(--color-1x); font-weight: 500 }



@media (max-width: 979px) {
  /* Selectors and styles affecting screens UP TO 979px (Desktop) */
}

@media (max-width: 768px) {
    /* Selectors and styles affecting screens UP TO 767px (Tablet) */
    .breadcrumbs-wrapper{padding: 0}
}

@media (max-width: 480px) {
    /* Selectors and styles affecting screens UP TO 480px (Phone) */
    .breadcrumbs-wrapper{
        padding: 20px 0 20px 20px;
    }

    .breadcrumbs{
        flex-wrap: wrap;
    }
}



.main{ padding-top:40px; }


/* ==================================================================================================== */

.trust{ padding:0 160px; }
.trust h3{}
.trust ul{ display: flex; list-style-type: none; margin:0; padding:0 0 25px; justify-content: space-between; align-items: center; flex-wrap: wrap}
.trust li{ text-align: center;   max-width: 200px; margin: auto 10px}
.trust li img { width: 100%;}


@media (max-width: 1600px) {
  .trust{ padding-left:25px; padding-right:25px; }
}
@media (max-width: 1200px) {
  .trust{ padding:10px 15px; }
}
@media (max-width: 991px) {
  .trust{ padding:0; }
  .trust ul li:nth-child(1) img, .trust ul li:nth-child(2) img, .trust ul li:nth-child(3) img, .trust ul li:nth-child(4) img, .trust ul li:nth-child(5) img, .trust ul li:nth-child(6) img {
        min-width:auto; max-width:auto;
  }
    .trust{
        padding: 0 15px
    }
}
@media (max-width: 600px) {
  .trust{ padding:0; }
  .trust ul{ flex-wrap: wrap; }
  .trust li{ flex:33%; }
}

@media (max-width: 480px) {
    .trust{ padding: 0 30px }
  .trust ul{ flex-wrap: wrap; flex-direction: column }
}

/* ============================================================== */

/* ==================================================================================================== */
/* Keydatas */
.keydatas{
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    margin: 5rem 0;
}

.keydata{
    position: relative;
}

.keydata span{
    display: block;
    text-align: center;
    color: var(--color-1x);
    font-weight: 600;
    font-size: 3.2rem;
    position: relative;
    line-height: 1;
}

.keydata span:last-child::before{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 60%;
    bottom: 3px;
    height: 1.2rem;
    background: rgba(0,0,0,0.3);
    z-index: -1;
    opacity: 0.3;
}

@media (max-width: 979px) {
  /* Selectors and styles affecting screens UP TO 979px (Desktop) */
}

@media (max-width: 767px) {
    /* Selectors and styles affecting screens UP TO 767px (Tablet) */
    .keydatas{
        flex-wrap: wrap;
    }

    .keydata{
        min-width: 35%;
        margin-bottom: 40px;
    }
}

@media (max-width: 480px) {
    /* Selectors and styles affecting screens UP TO 480px (Phone) */
    .keydatas{
        flex-direction: column;
    }

    .keydata{
        margin-bottom: 40px;
    }

    .keydata:last-child{
        margin-bottom: 0;
    }
}

/* ==================================================================================================== */
/* Story */
.story{
    display: flex;
    margin: 60px 12%;
}

.big-quote{
    position: relative;
    font-family: var(--font-family-2);
    color: var(--color-1x);
    font-size: 20rem;
    display: inline-block;
    width: 110px;
    height: 110px;
}

.big-quote::before{
    position: absolute;
    content: "‘";
    left: 0;
}

.big-quote::after{
    position: absolute;
    content: "‘";
    left: 50px;
}

.story .col:first-child{
    flex: 40%;
}

.story .discours p {
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.3;
}

.story .signature{
    font-weight: 600;
    margin-top: 60px;
}

.story .edito-wrapper{
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    padding: 0 80px;
}

.story .edito-wrapper span, .story .edito-wrapper a{
    color: var(--color-4);
    font-weight: 500;
    margin: 20px 0;
    font-size: 2.5rem;
}

@media (max-width: 1440px){
    .story{
        margin: 60px 5%;
    }

    .story .col:first-child{
        flex: 50%;
    }
}

@media (max-width: 1024px) {
  /* Selectors and styles affecting screens UP TO 979px (Desktop) */
    .story{
        flex-direction: column;
        margin: 60px 10%;
    }

    .story .edito-wrapper{
        flex-direction: row;
        padding: 0;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .story .edito-wrapper span, .story .edito-wrapper a{
        min-width: 90px;
        margin: 10px 0;
    }
}

@media (max-width: 767px) {
    /* Selectors and styles affecting screens UP TO 767px (Tablet) */
    .story{
        flex-direction: column;
        margin: 60px 20px;
    }

    .story .edito-wrapper{
        flex-direction: row;
        padding: 0;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .story .edito-wrapper span, .story .edito-wrapper a{
        min-width: 90px;
        margin: 10px 0;
    }
}

@media (max-width: 480px) {
    /* Selectors and styles affecting screens UP TO 480px (Phone) */
    .story{
        flex-direction: column;
        margin: 60px 20px;
    }

    .story .edito-wrapper{
        flex-direction: row;
        padding: 0;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .story .edito-wrapper span, .story .edito-wrapper a{
        min-width: 70px;
        margin: 10px 0;
    }
}

/* ==================================================================================================== */
/* Agencies */

.agency-wrapper{
    display: flex;
    margin: 80px 15%;
    flex-wrap: wrap;
}

.agency{
    width: calc(33.33% - 20px);
    margin: 0 10px;
}

.agency .illustration {
    height: 320px;
    margin-bottom: 20px;
    background-size: contain;
    background-position: center bottom;
    background-repeat: no-repeat;
}

.agency.publika .illustration {
    background-image: url("/kassets/cssimg/filliale-publika.jpg");
    transition: all 300ms ease-in-out;
}

.agency.publika:hover .illustration {
    background-image: url("/kassets/cssimg/filliale-publika-hover.jpg");
}

.agency.agora .illustration {
    background-image: url("/kassets/cssimg/filliale-agora.jpg");
    transition: all 300ms ease-in-out;
}

.agency.agora:hover .illustration {
    background-image: url("/kassets/cssimg/filliale-agora-hover.jpg");
}

.agency.rxg .illustration {
    background-image: url("/kassets/cssimg/filliale-rxg.jpg");
    transition: all 300ms ease-in-out;
}

.agency.rxg:hover .illustration {
    background-image: url("/kassets/cssimg/filliale-rxg-hover.jpg");
}

.agency.saisie-facile .illustration {
    background-image: url("/kassets/cssimg/filliale-saisie-facile.jpg");
    transition: all 300ms ease-in-out;
}

.agency.saisie-facile:hover .illustration {
    background-image: url("/kassets/cssimg/filliale-saisie-facile-hover.jpg");
}

.agency.oasis .illustration {
    background-image: url("/kassets/cssimg/filliale-oasis.jpg");
    transition: all 300ms ease-in-out;
}

.agency.oasis:hover .illustration {
    background-image: url("/kassets/cssimg/filliale-oasis-hover.jpg");
}

.agency.innova .illustration {
    background-image: url("/kassets/cssimg/filliale-innova.jpg");
    transition: all 300ms ease-in-out;
}

.agency.innova:hover .illustration {
    background-image: url("/kassets/cssimg/filliale-innova-hover.jpg");
}

.agency .name {
    font-weight: 600;
    color: var(--color-1x);
    font-size: 2.8rem;
    margin: 5px 0;
}

.agency img{
    margin-bottom: 30px;
}

.agency_info{
    margin: 0 30px 60px;
}

.agency .txt{
    line-height: 1.3;
}

.agency .place {
    margin: 0;
    text-transform: uppercase;
    color: var(--color-3);
}

@media (max-width: 1024px) {
  /* Selectors and styles affecting screens UP TO 979px (Desktop) */
    .agency-wrapper{
        margin: 80px 20px;
    }

    .agency{
        width: calc(50% - 20px);
        margin: 0 10px;
    }

    .agency .illustration {
        height: 280px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
}

@media (max-width: 767px) {
    /* Selectors and styles affecting screens UP TO 767px (Tablet) */
    .agency-wrapper{
        margin: 80px 20px;
    }

    .agency{
        width: 100%;
    }

    .agency .illustration {
        height: 240px;
        background-size: cover;
    }
}

@media (max-width: 480px) {
    /* Selectors and styles affecting screens UP TO 480px (Phone) */
    .agency-wrapper{
        margin: 80px 0;
    }

    .agency{
        width: 100%;
        margin: 0;
    }

    .agency .illustration {
        height: 230px;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }
}

/* ==================================================================================================== */
/* Team */
.team{
    margin: 0 8%;
}

.team-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.team-header h3 {
    flex-wrap: wrap;
}

.team .showmyteam{
    position: relative;
    display: block;
    width: 32px;
    height: 32px;
}

.showmyteam .ico:nth-child(2) {
    height: 100%;
    width: 4px;
    top: 0;
    left: calc(50% - 2px);
    opacity: 0;
}

.close .showmyteam .ico:nth-child(2) {
    opacity: 1;
}

.showmyteam .ico {
    display: block;
    position: relative;
    background-color: var(--color-1x);
    transition: all 300ms ease;
    cursor: pointer;
    left: 0;
    top: calc(50% + 2px);
    width: 100%;
    height: 4px;
}

.team-header .h3-like {
    color: var(--color-1x);
    display: flex;
    align-items: center;
    font-size: 5rem;
    margin-bottom: 0;
    flex-wrap: wrap;
}

.team-header .h3-like span {
    font-family: var(--font-family-2);
    font-size: 10.2rem;
    display: inline-block;
    margin-right: 4rem;
    font-weight: lighter;
}

.people-wrapper {
    display: flex;
    flex-wrap: wrap;
    margin-left: 110px;
}

.people {
    width: 16.66%;
    margin-bottom: 40px;
}

.people .name {
    font-weight: 600;
    margin: 5px 15px;
}

.people .position {
    font-weight: 300;
    font-size: 1.6rem;
    margin: 0 15px;
}

@media (max-width: 1024px) {
  /* Selectors and styles affecting screens UP TO 979px (Desktop) */
    .people-wrapper{
        margin-left: 0;
    }

    .people{
        width: 20%;
    }
}

@media (max-width: 768px) {
    /* Selectors and styles affecting screens UP TO 767px (Tablet) */
    .team .group .h3-like {
        flex-direction: column;
        align-items: flex-start;
    }

    .people{
        width: 33.33%;
    }

    .people-wrapper{
        margin-left: 0;
    }
}

@media (max-width: 480px) {
    /* Selectors and styles affecting screens UP TO 480px (Phone) */
    .team .group .h3-like {
        flex-direction: column;
        align-items: flex-start;
        font-size: 3rem;
    }

    .team-header .h3-like span{
        font-size: 7rem;
    }

    .titre-accroche{
        margin-bottom: 80px;
    }

    .people-wrapper{
        margin-left: 0;
    }

    .people{
        width: 50%;
    }
}

/* ==================================================================================================== */
/* FOOTER */
.footer-wrapper{ padding:0 65px; background-color: black; color: white; }
.footer-wrapper a{ color: white; }
footer{ padding-top: calc(25px + 2%) }
footer .krow{ display: flex; flex-wrap: wrap; }
footer .kcol{ flex: 25%; padding-left:15px;  padding-right:15px; }
footer .kcol1{ text-align:center; }
footer .kcol2{ }
footer .kcol3{ display: flex; flex-wrap: wrap; align-content: flex-start; }
footer .kcol4{  }
footer .kcol4 a:hover{ color: var(--color-1x); transition: all ease-in-out 300ms }
/* logo */
footer .kcol1 img{ margin-bottom: 25px; }
/* lieux */
footer .kcol2 .adresse{ position: relative; margin-bottom: calc(15px + 2%); }
footer .kcol2 .titre{ margin-top: 0; margin-bottom:1px; font-size: 2.8rem; font-weight: bold; cursor: pointer}
footer .kcol2 address{ font-size: 1.7rem; font-style: normal; line-height: 1.5; height: 0;opacity: 0;transition: all ease 200ms; }
footer .close address{ display: block; width: 60%; height: auto;opacity: 1;transition: all ease 200ms; }

/* icon + - */
.seeAddress{ display: block; position:absolute; top:7px; left:68%; padding: 0px; width: 18px; height: 18px; border: 0; color:white; }
.seeAddress .ico{ display: block; position: relative; background-color: white;  transition: all 300ms ease; cursor: pointer; }
.seeAddress .ico:nth-child(1){ height: 3px; width: 18px; top:7px; left: 0px; }
.seeAddress .ico:nth-child(2){ height: 18px; width: 3px; top:-3px; left:calc(50% - 2px); opacity: 1;  }
.close .seeAddress .ico:nth-child(1){ }
.close .seeAddress .ico:nth-child(2){ opacity: 0; }


/* tel et soutien */
footer .kcol3 .phonemail{ flex:100%; font-size: 2.5rem; }
footer .kcol3 p{ margin-top: 0; margin-bottom: calc(15px + 2%); font-weight: bold; }
footer .kcol3 span{ margin-right: 10px; }
footer .kcol3 .tel{ }
footer .kcol3 .tel a, footer .kcol3 .mailto a{ text-decoration: none; position: relative; font-size: 1.9rem}

footer .kcol3 .tel a::before,
footer .kcol3 .mailto a::before{
    content: "";
    left: 10px;
    height: 9px;
    opacity: 0;
    position: absolute;
    width: 0;
    background: rgba(255, 255, 255, .5);
    bottom: -5px;}

footer .kcol3 .tel a:hover::before,
footer .kcol3 .mailto a:hover::before{
    transition: all ease-in-out 300ms;
    opacity: 1;
    width: 90%;}


footer .kcol3 .mailto{}
footer .soutien{ display: flex; justify-content: center; flex:auto; margin-top: calc(25px + 5%); margin-bottom: calc(25px + 5%); /*outline: 1px yellow solid;*/ }
footer .soutien ul{ display: flex; flex: auto; justify-content: space-between; align-items: center; margin:0; padding:0; /*outline: 1px red solid;*/ }
footer .soutien li{ list-style-type: none; margin:0; padding:0 15px; }
footer .soutien img{ width: 100%; height: auto; }

/* rs */
footer .kcol4 ul{ display: flex; list-style-type: none; margin:0; padding:0; /*justify-content: center;*/ }
footer .kcol4 li{ display: inline-block; padding: 15px; font-size: 2.4rem; text-decoration: none;}
footer .kcol4 li:before{ color:white !important; }
footer .kcol4 a{ text-decoration: none}
footer .kcol4 .fb a:hover footer .icon-facebook:before {color:var(--color-1x); }
footer .kcol4 .in a:hover footer .icon-instagram:before {color:var(--color-1x); }
footer .kcol4 .ins a:hover footer .icon-linkedin:before {color:var(--color-1x); }
/*footer .icon-facebook:before {color:white; }
footer .icon-instagram:before {color:white; }
footer .icon-linkedin:before {color:white; }
footer .icon-telephone:before {color:white; }*/

.foot-presta{}
.foot-presta ul{}
.foot-presta li{ list-style:none; }


/**/
.footer-2{ padding-top:15px; padding-bottom:15px; text-align:center; }
.footer-2 nav{}
.footer-2 ul{ list-style: none; margin: 0; padding: 0; }
.footer-2 nav li{ display: inline-block; list-style: none; margin: 0; padding: 0; font-size: 1.7rem; }
.footer-2 nav a{ display: block; }
.footer-2 nav li:not(:last-child) a:after{ content: "|"; padding-left: 7px;  padding-right: 7px; }
.footer-2 nav a:hover{}

/* media queries */
@media (max-width: 1600px) {
  .footer-wrapper{ padding-left:var(--container-padding); padding-right:var(--container-padding); }

}
@media (max-width: 1200px) {
  .footer-wrapper{ padding:10px var(--container-padding-small); }
}
@media (max-width: 991px) {
  .footer-wrapper{ padding:0; }
  footer .kcol1{ flex:100%; text-align:left; }
  footer .kcol2{ flex:50%; }
  footer .kcol3{ flex:50%; }
  footer .kcol4{ flex:100%; }
  .seeAddress{ display: block; position:absolute; left:auto; right: 30px; }
}
@media (max-width: 500px) {
  footer .kcol1{ flex:100%; }
  footer .kcol2{ flex:100%; }
  footer .kcol3{ flex:100%; }
  footer .kcol4{ flex:100%; }
  .seeAddress{ display: block; position:absolute; left:calc(100% - 45px); }
  footer .kcol3 .phonemail{ padding-top: 55px; }
}




/* ==================================================================================================== */
/* GALLERY */
.gallery-wrapper{  }
.gallery{ }
.gallery__more{ text-align: center; padding: 40px;}
.gallery__more a{ text-transform: uppercase; font-size: 1.8rem; cursor: pointer}
.gallery__filtre{}
.gallery__filtre ul { margin: 0; display: flex; flex-wrap: wrap; list-style: none; padding: 60px 0; justify-content: center; width: 100%; }
.gallery__filtre ul li { margin: 0.5rem 2.5rem; }
.gallery__filtre ul li a { text-decoration: none; position: relative; color: var(--color-1x); font-weight: 600; font-size: 3rem; cursor: pointer }
.gallery__filtre ul li a:hover { text-decoration: none }
.gallery__filtre ul li a:before { content: ""; left: 10px; height: 9px; opacity: 0; position: absolute; width: 0; background: rgba(255, 0, 78, .2); bottom: 1px }
/*.gallery__filtre ul li a.selecteur:before{ content: ""; height: 9px; opacity: 1; position: absolute; width: 90%; background: rgba(255, 0, 78, .2); bottom: -5px; }*/
.gallery__filtre ul li a:hover:before  { transition: all ease-in-out 300ms; opacity: 1; width: 90%}

.thumbnails{ display: flex; flex-wrap: wrap; justify-content: center }
.thbnl{ position: relative; flex:0 25%; overflow: hidden  }
.thbnl a{ width: 100%; height: 100%  }
.thbnl img{ width: 100%; height: 100%; }
.thbnl:hover .thbnl__inner { text-decoration: none; transition: all ease-in-out 500ms; opacity: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 calc(15px + 5%); top: 0 }
.thbnl__inner { opacity: 0; position: absolute; top: -100px; left: 0; width: 100%; height: 100%; text-align: center; background-color: rgba(255, 0, 78, .9); color:white;display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding: 0 calc(15px + 5%);  }
.thbnl__inner p{ display: block; color:white; }
.thbnl__inner .p1{ font-weight: 400; font-size: 4rem; line-height: 1; margin-bottom: 0 }
.thbnl__inner .p2{ font-weight: 500; font-size: 4rem; line-height: 1 }
.thbnl__inner .p3{ text-transform: uppercase }
.thbnl__inner a{ text-transform: uppercase }
.thbnl__inner a:hover{}

@media (max-width: 1440px){
    .thbnl{ position: relative; flex:0 33.33%; overflow: hidden  }
}

@media (max-width: 1300px) {
.thbnl__inner .p1{ font-size: 3.2rem; margin:10px 0; }
.thbnl__inner .p2{ font-size: 3.2rem; margin:10px 0; }
.thbnl__inner .p3{ margin:10px 0; }
    .thbnl{ position: relative; flex:0 33.33%; overflow: hidden  }
}

@media (max-width: 1080px) {
.thbnl__inner .p1{ font-size: 2.2rem; margin:7px 0; }
.thbnl__inner .p2{ font-size: 2.2rem; margin:7px 0; }
.thbnl__inner .p3{ font-size: 1.8rem; margin:7px 0; }
    .gallery__filtre ul{ padding: 0 }
    .gallery__filtre ul{ justify-content: center }
    .gallery__filtre ul li{ margin: 0.5rem 2.5rem; }
}

@media (max-width: 760px) {
.thbnl__inner .p1{ font-size: 1.7rem; margin:7px 0; }
.thbnl__inner .p2{ font-size: 1.7rem; margin:7px 0; }
.thbnl__inner .p3{ font-size: 1.7rem; margin:7px 0; }
    .gallery__filtre ul{ justify-content: center }
    .gallery__filtre ul li{ margin: 0.5rem 2.5rem; }
}

@media (max-width: 600px) {
.thbnl{ flex:calc(100% / 3); }
}

@media (max-width: 480px) {
  .thbnl__inner .p1{ font-size: 3.5rem; margin:25px 0; }
  .thbnl__inner .p2{ font-size: 3.5rem; margin:25px 0; }
  .thbnl__inner .p3{ font-size: 1.8rem; margin:25px 0; }
    .thbnl{ flex: 100%  }
    .gallery__filtre ul{ justify-content: center }
    .gallery__filtre ul li{ margin: 0.5rem 2.5rem; }
}
@media (max-width: 320px) {
  .thbnl__inner .p1{ font-size: 2.2rem; margin:20px 0; }
  .thbnl__inner .p2{ font-size: 2.2rem; margin:20px 0; }
  .thbnl__inner .p3{ font-size: 1.8rem; margin:20px 0; }
    .thbnl{ flex: 100%  }
    .gallery__filtre ul{ justify-content: center }
    .gallery__filtre ul li{ margin: 0.5rem 2.5rem; }
}

/* ==================================================================================================== */
/* PRESTA */
/*.prestas{ margin-bottom: 60px; }
.presta{ display: flex; align-items: center; margin:140px 0 }
.presta.left{ justify-content: flex-end; margin-right: 15% }
.presta.right{ justify-content: flex-start; margin-left: 15% }
.presta div{ height: 812px }
.presta img{}
.presta .desc{ background: var(--color-1x); color: #ffffff; position: absolute; z-index: 1; display: flex; flex-direction: column;justify-content: center; padding: 0 60px; width: 674px; height: 600px; }
.presta .desc.black{ background: var(--color-2) }
.presta.left .desc{ left: 15% }
.presta.right .desc{ right:15% }

.presta .nb{ font-family: var(--font-family-2); font-size: 10rem }
.presta .tit{ text-transform: uppercase; font-weight: 500; margin-top: 0 }
.presta p{ font-size: 1.9rem; font-weight: 300; margin-bottom: 40px; }
.presta ul{ list-style: none; margin: 0; padding: 0 }
.presta li{}
.presta a{ margin-bottom: 10px; text-transform: uppercase; }
.presta a:hover{}*/

/* Presta small */
/*.prestas.small { }
.prestas.small .presta{ margin: 0 }
.prestas.small .presta .desc{ width: 400px; height: 370px; padding-left: 30px; }
.prestas.small .presta div{height: 500px}
.prestas.small .presta.left .desc{ left: 20% }
.prestas.small .presta.right .desc{ right: 20% }
.prestas.small .presta a{ margin-bottom: 0 }*/

/* Media queries */
/*@media (max-width: 480px) {
    .presta{ flex-direction: column-reverse }
    .presta .desc { position: initial }
    .prestas.small .presta .desc, .prestas.small .presta div, .prestas.small .presta div img{ width: 100%; }
    .prestas.small .presta div{ height: 300px }
    .prestas.small .presta div img{ height: 100%; object-fit: cover }
    .prestas.small .presta.left div img{ object-position: right }
    .prestas.small .presta.right div img{ object-position: left }
}*/


/* ==================================================================================================== */
/* PRESTA VG */
.presta-wrapper:last-child .presta{ margin-bottom: 0 }
.presta-wrapper.container{ max-width: 1360px }
.prestas{ margin-bottom: 60px; margin-top: 100px }
.accueil .prestas{ margin-top: 0 }
.prestas .container{ padding-left: 0; padding-right: 0; }
/*.presta:first-child{ margin-top: 0 }*/
.presta { position: relative; width: 100%; margin-bottom:140px; overflow: hidden; }
.presta_container{ position: absolute; transform: translateX(-50%); left: 44%; top:5%; width: 100%; max-width: 1200px; background: red; }
.presta.right .presta_container{ left: initial; right: -44% }
/*.bloc-fixe .presta_container{ top: 8%; }*/
.bloc-fixe .prestas{ margin-top: 150px; margin-bottom: 100px }
.bloc-fixe .prestas .presta{ margin-bottom: 0 }
.presta .img{}
.presta.left .img { text-align:right; }
.presta.right .img { text-align:left; }
.presta.right .img img {  }
.presta.left .desc{ left:0;}
.presta.right .desc{ right:0;}
.presta .desc{
    min-height: 740px;
    position: absolute;
    padding: 40px 60px;
    max-width: 600px;
    background: var(--color-1x);
    color: #ffffff;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.accueil .presta .desc{ min-height: initial }
.presta .desc.black{ background: var(--color-2); }


.presta .nb{ font-family: var(--font-family-2); font-size: 9rem }
.presta .tit{ font-size: 3.4rem; text-transform: uppercase; font-weight: 500; margin-top: 0 }
.presta .tit a:before{ content: none }
.presta p{ font-size: 1.9rem; font-weight: 300; margin-bottom: 40px; }
.presta ul{ list-style: none; margin: 0; padding: 0 }
.presta li{}
.presta a{ margin-bottom: 10px; text-transform: uppercase; }
.presta a:hover{}

/* Presta small */
.prestas.small { }
.prestas.small .presta{ margin-bottom: 0; background-color:#ebebed; }
.prestas.small .img { max-height: 500px }
.prestas.small .presta.left .img { text-align:right; }
.prestas.small .presta.right .img { text-align:left; }
/*.prestas.small .presta{ margin: 0 }*/
.prestas.small .presta .desc{ width: 400px; height: 444px; padding-left: 30px; }
.prestas.small .left .desc{ left:var(--container-padding);}
.prestas.small .right .desc{ right:var(--container-padding);}
.prestas.small .presta a{ margin-bottom: 0 }

.prestas.small .presta_container{ position: absolute; transform: translateX(-50%); left: 50%; top:6%; width: 100%; max-width: 1200px; background: red; }
.prestas.small .presta.right .presta_container{ left: 50% }

.presta-fiche .une-image{ margin: 30px 0 }
.presta-fiche .une-image img{
    height: 100%;
    object-fit: cover;
}
.presta-fiche .steps{ margin: 50px 12%; }
.presta-fiche .steps .content { margin: 0 17rem; font-size: 2.5rem }

/* Media queries */

@media (max-width: 1440px) {
    .presta_container{ transform: translateX(-44%); }
}

@media (max-width: 1200px) {
.prestas.small .presta.left .img { right:auto; }
.prestas.small .right .img { left:auto;  }
    .presta_container{ transform: translateX(-44%); }
}

@media (max-width: 1024px){
    .bloc-fixe .prestas{ margin-bottom: 0; margin-top: 40px }
}

@media (max-width: 979px) {
    /* Selectors and styles affecting screens UP TO 979px (Desktop) */
.presta { margin-bottom:80px; }
.presta.left .desc{ margin-right: calc(var(--container-padding) * 2);}
.presta.right .desc{ margin-left: calc(var(--container-padding) * 2);}
.presta .desc{ padding: calc(var(--container-padding) * 2);}
    .presta-fiche .steps .content{ margin: 0 }
    .presta_container, .bloc-fixe .presta_container{ top:7%; transform: translateX(-44%) }
    .bloc-fixe .prestas{ margin-bottom: 0; margin-top: 40px }
    .presta .desc{min-height: 690px}
    .prestas{margin-top: 50px}
}

@media (max-width: 480px) {
    .prestas{margin-top: 50px}
    .presta { margin-bottom:0; }
    .presta_container, .bloc-fixe .presta_container{ top:35px; transform: none; position: initial; left: 0; }
    .prestas.small .presta_container { position: initial; transform: none }
    .presta.left .desc{ margin-right: 0 }
    .presta.right .desc{ margin-left: 0 }
    .presta .desc{ padding: var(--container-padding); position: initial}
    .prestas.small .presta .desc, .prestas.small .presta .img, .prestas.small .presta .img img{ width: 100%; }
    .prestas.small .presta .img{ position:relative; height: 300px; }
    .presta .img, .prestas.small .presta .img img{ height: 300px; object-fit: cover; }
    /*.prestas.small .presta.left .img img{ object-position: right; }*/
    /*.prestas.small .presta.right .img img{ object-position: left; }*/
    .bloc-fixe .prestas{ margin-top: 0 }
    .presta-fiche .steps .content{ margin: 0 }
    .presta .txt{ display: none }
    .bloc-fixe .presta{min-height: 920px}
    .bloc-fixe .prestas{ margin-bottom: 0; margin-top: 40px }
    .presta .desc{min-height: initial}
    .bloc-fixe .presta.left .img{display: none}
}

/* ============== Bloc cotact ================= */
.champ-wrapper{
    display: flex;
    flex-wrap: wrap;
    margin-left: -5px;
    font-size: 1.5rem;
}

.champ-wrapper span {
    margin-left: 5px;
}

.champ{
    flex: calc(50% - 10px);
    margin: 10px 5px;
    border-bottom: solid 1px #707070;
}

.champ input, .champ textarea{
    width: 100%;
    border: none;
    padding: 10px;
    font-size: 2rem;
    font-family: inherit;
}

.champ input:focus, .champ textarea:focus, .champ select:focus{
    outline: none;
}

.champ.full{
    margin-top: 20px;
    flex: 100%;
    border: solid 1px #707070;
}

.rgpd-wrapper{
    margin: 20px 0;
}

.rgpd{
    display: flex;
    margin-bottom: 20px;
}

.rgpd label{
    width: 100%;
    text-align: left;
    font-size: 1.5rem;
}

.bloc-fixe .rgpd span:not(.mandatory){
    font-size: 1.5rem;
}

.pp-captcha{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    align-items: center;
    font-size: 1.5rem;
}

.pp-captcha .btn{
    margin-left: 20px;
    padding: 5px 10px;
    background: rgba(255,0,0, 0.2);
    color: white;
    border: none;
    font-weight: 400;
    text-transform: inherit;
}

.pp-captcha .btn:hover{
    margin-left: 20px;
    padding: 5px 10px;
    background: rgba(255,0,0, 0.4);
    color: white;
    border: none;
    transition: all ease-in-out 300ms;
}

.submit-wrapper{
    margin-top: 40px;
}

.submit-wrapper .btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    min-width: 190px;
    border: solid 1px #fff;
}

.submit-wrapper .btn:hover{
    background: white;
    color: black;
    border: solid 1px;
    transition: all ease-in-out 300ms;
}

.submit-wrapper .btn:hover img{
    filter: invert();
    transition: all ease-in-out 300ms;
}

/*.submit-wrapper .btn:hover img{
    margin-right: 20px;
    transition: all ease 300ms;
}*/

.submit-wrapper .btn img{
    display: inline-flex;
    align-items: center;
    margin-right: 10px;
}

.verification{
    margin-left: 60px;
}

.mandatory{
    margin: 0 10px;
}

#formulaireinc .champ.full{
    margin-top: 0;
    border: none;
}

.address-box {
    color: #fff;
    background: var(--color-1x);
    padding: 4rem;
    height: 455px;
    width: 470px;
    display: inline-flex;
    flex-direction: column;
    justify-content: space-around;
}

.address-item {
    display: flex;
    align-items: center;
}

.address-item.horaire {
    align-items: flex-start;
    margin-top: 40px;
}

.address-item a {
    color: white;
    font-weight: 400;
    font-size: 2.2rem;
}

.address-item img {
    margin-right: 20px;
}

.address-item p {
    margin: 0;
    width: 70%;
    font-weight: 300;
    font-size: 2.5rem;
    line-height: 1.1;
}

@media (max-width: 480px) {
    .address-item a {
        font-size: 2rem;
    }

    .submit-wrapper .btn{
        width: 100%;
    }

    .champ{
        flex: 100%;
        margin-top: 0;
    }

    .pp-captcha{
        justify-content: center;
    }

    .pp-captcha .btn{width: 100%; margin-top: 20px}
    .verification {margin-left: 0;margin-top: 20px}
}

/* --- Temoignages --- */
.temoignages-wrapper {
    display: flex;
    flex-wrap: wrap;
    margin-top: 40px;
}

.temoignage {
    max-width: calc(33.33% - 40px);
    margin: 0 20px;
    margin-bottom: 30px;
    background: #f5f5f5;
    padding: 30px;
}

.temoignage img{
    width: 100%;
}

.temoignage .author{
    color: var(--color-1x);
    font-weight: bold;
}


.menu-flottant{
    position: fixed;
    bottom: 22%;
    width: auto;
    height: 75px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: #E60041;
    z-index: 1;
    right: 0;
    padding: 0 10px;
    text-decoration:  none;
    cursor: pointer;
    transform: translateX(175px);
    -webkit-transition: all 350ms ease-in-out;
    -moz-transition: all 350ms ease-in-out;
    -o-transition: all 350ms ease-in-out;
    transition: all 350ms ease-in-out;
}

.menu-flottant:hover{
    transform: translateX(0);
    text-decoration:  none;
    -webkit-transition: all 350ms ease-in-out;
    -moz-transition: all 350ms ease-in-out;
    -o-transition: all 350ms ease-in-out;
    transition: all 350ms ease-in-out;
}

.menu-flottant img:first-child{
    margin-bottom: 15px;
    margin-right: 10px;
    transform: rotate(0);
    -webkit-transition: all 350ms ease-in-out;
    -moz-transition: all 350ms ease-in-out;
    -o-transition: all 350ms ease-in-out;
    transition: all 350ms ease-in-out;
}

.menu-flottant:hover img:first-child{
    transform: rotate(120deg);
    -webkit-transition: all 350ms ease-in-out;
    -moz-transition: all 350ms ease-in-out;
    -o-transition: all 350ms ease-in-out;
    transition: all 350ms ease-in-out;
}


.modal {
  display: none; 
  position: fixed; 
  z-index: 10; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  overflow: auto; 
  background-color: rgba(0,0,0,0.4); 
  backdrop-filter: blur(6px);
  justify-content:  center;
  align-items:  center;
  -webkit-transition: all 350ms ease-in-out;
  -moz-transition: all 350ms ease-in-out;
  -o-transition: all 350ms ease-in-out;
  transition: all 350ms ease-in-out;
}


@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.modal-content {
  /*background-color: #E60041;*/
  background-color: #000;
  margin:auto; 
  max-width: 989px; 
  width: 100%;    
  position: relative;
  animation-name: fadeIn;
  animation-duration: 0.5s;
}

.close {
    position: absolute;
    right: 0;
    top: -65px;
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.5);
  }
}

.modal-content.fade-out {
  animation-name: fadeOut;
  animation-duration: 0.5s; /* Durée de l'animation */
}


.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}


.in-content-modal{
    display: flex;
    align-items:  center;
}

.in-content-modal img{
    flex: 0 0 354px;
    max-width: 354px;
}


.right-content-modal{
    padding: 20px 50px;
    font-family: 'Cambria', sans-serif;
}

.right-content-modal h5{
    font-size: 40px;
    color: #fff;
    line-height: 48px;
    display: block;
    margin: 0 0 26px 0;
}


.right-content-modal a{
    background-color: #000000;
    display: inline-block;
    font-size: 18px;
    color: #fff;
    padding: 16px 24px;
    text-transform: uppercase;
      -webkit-transition: all 350ms ease-in-out;
  -moz-transition: all 350ms ease-in-out;
  -o-transition: all 350ms ease-in-out;
  transition: all 350ms ease-in-out;
}

.right-content-modal a:hover{
    background-color: #fff;
    color: #000;
    text-decoration: none;
  -webkit-transition: all 350ms ease-in-out;
  -moz-transition: all 350ms ease-in-out;
  -o-transition: all 350ms ease-in-out;
  transition: all 350ms ease-in-out;
}

.right-content-modal a:hover svg{
    fill: #000;
      -webkit-transition: all 350ms ease-in-out;
  -moz-transition: all 350ms ease-in-out;
  -o-transition: all 350ms ease-in-out;
  transition: all 350ms ease-in-out;
}

.right-content-modal a svg{
    margin-right: 10px;
    fill: #fff;
      -webkit-transition: all 350ms ease-in-out;
  -moz-transition: all 350ms ease-in-out;
  -o-transition: all 350ms ease-in-out;
  transition: all 350ms ease-in-out;
}

.right-content-modal h5 a{
    color: #000000;
    background-color: transparent;
    padding: 0;
    text-decoration:  none;
    font-size: 40px;
    line-height: 48px;
    text-transform: inherit;

}

.right-content-modal h5 a:hover{
    text-decoration: none;
    background-color:  transparent;

}

.accordion{
    max-width: 300px;
}

.accordion2{
    max-width: 100%;
}

.accordion__item .accordion__content {
	display: none;
}

.accordion__title{
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;

}

.accordion__title-text{
        font-size: 2.8rem;
  font-weight: bold;
}

.accordion__title:after{
    content:"+";
    font-size: 40px;
    color: #fff;
}

.accordion__item{
    margin-bottom: 35px
}


.accordion__title.accordion-active:after{
    content:"-";
}


@media (max-width: 979px) {
    .temoignage {
        max-width: calc(33.33% - 40px);
    }
}

@media (max-width: 768px) {
    .temoignage {
        max-width: calc(50% - 40px);
    }
    
    .in-content-modal{
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }
    
    .in-content-modal{
        margin-bottom: 25px;
    }
    
    .in-content-modal img
    {
      flex: initial;
      max-width: 100%;
      margin: 25px auto;
      text-align: center;
    }
    .close {
    top: -55px;
}
    .modal-content{
        max-width: 80%;
    }
    
    .menu-flottant{
        bottom: 30px;
    }
    
    .right-content-modal h5,  .right-content-modal h5 a{
        font-size: 25px;
        line-height: 30px;
    }
    
    .right-content-modal{
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .temoignage {
        max-width: calc(100% - 40px);
    }
}






input#rgpd {
    width:25px;
    height:25px;
    min-width:25px;
    min-height:25px;
}