/*   
Theme Name: Custplace Business
Theme URI: https://fr.custplace.com/
Author: Custplace
Description: Custplace | Votre plateforme de réputation et de marketing local
Author URI: https://fr.custplace.com/
Version: 1.1
*/

@font-face {
  font-display: swap; 
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/poppins-v20-latin_latin-ext-300.eot'); 
  src: url('fonts/poppins-v20-latin_latin-ext-300.eot?#iefix') format('embedded-opentype'), 
       url('fonts/poppins-v20-latin_latin-ext-300.woff2') format('woff2'), 
       url('fonts/poppins-v20-latin_latin-ext-300.woff') format('woff'), 
       url('fonts/poppins-v20-latin_latin-ext-300.ttf') format('truetype'), 
       url('fonts/poppins-v20-latin_latin-ext-300.svg#Poppins') format('svg'); 
}

@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/poppins-v20-latin_latin-ext-regular.eot'); 
  src: url('fonts/poppins-v20-latin_latin-ext-regular.eot?#iefix') format('embedded-opentype'),
       url('fonts/poppins-v20-latin_latin-ext-regular.woff2') format('woff2'), 
       url('fonts/poppins-v20-latin_latin-ext-regular.woff') format('woff'), 
       url('fonts/poppins-v20-latin_latin-ext-regular.ttf') format('truetype'), 
       url('fonts/poppins-v20-latin_latin-ext-regular.svg#Poppins') format('svg'); 
}

@font-face {
  font-display: swap; 
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/poppins-v20-latin_latin-ext-500.eot'); 
  src: url('fonts/poppins-v20-latin_latin-ext-500.eot?#iefix') format('embedded-opentype'), 
       url('fonts/poppins-v20-latin_latin-ext-500.woff2') format('woff2'),
       url('fonts/poppins-v20-latin_latin-ext-500.woff') format('woff'), 
       url('fonts/poppins-v20-latin_latin-ext-500.ttf') format('truetype'), 
       url('fonts/poppins-v20-latin_latin-ext-500.svg#Poppins') format('svg'); 
}

@font-face {
  font-display: swap; 
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/poppins-v20-latin_latin-ext-600.eot'); 
  src: url('fonts/poppins-v20-latin_latin-ext-600.eot?#iefix') format('embedded-opentype'), 
       url('fonts/poppins-v20-latin_latin-ext-600.woff2') format('woff2'), 
       url('fonts/poppins-v20-latin_latin-ext-600.woff') format('woff'), 
       url('fonts/poppins-v20-latin_latin-ext-600.ttf') format('truetype'), 
       url('fonts/poppins-v20-latin_latin-ext-600.svg#Poppins') format('svg'); 
}

@font-face {
  font-display: swap; 
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/poppins-v20-latin_latin-ext-700.eot'); 
  src: url('fonts/poppins-v20-latin_latin-ext-700.eot?#iefix') format('embedded-opentype'), 
       url('fonts/poppins-v20-latin_latin-ext-700.woff2') format('woff2'), 
       url('fonts/poppins-v20-latin_latin-ext-700.woff') format('woff'), 
       url('fonts/poppins-v20-latin_latin-ext-700.ttf') format('truetype'), 
       url('fonts/poppins-v20-latin_latin-ext-700.svg#Poppins') format('svg'); 
}

/* ==========================================================================
   Reset 2020 ^^
   ========================================================================== */

*,*::before,*::after {box-sizing: border-box; outline: none;}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd {margin: 0;}
ul{list-style: none; padding: 0; margin: 0;}
html {scroll-behavior: smooth; width: 100%; height: 100%;}
body {text-rendering: optimizeSpeed;line-height: 1.7; min-width: 100%; height: 100%;}
a:not([class]) {text-decoration-skip-ink: auto;}
img,picture {max-width: 100%;display: block; height: auto;}
input,button,textarea,select {font: inherit;}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important;}}

button {border: none; background: none; height: fit-content; padding: 5px 20px; border-radius: 40px; transition: all .4s cubic-bezier(0.46, 0, 0.07, 1);}
button:hover, button:focus {transition: all .4s cubic-bezier(0.46, 0, 0.07, 1); cursor: pointer;}
a { color:var(--primary); text-decoration:underline; transition: all .4s cubic-bezier(0.46, 0, 0.07, 1); }
a:hover {color: var(--secondary); transition: all .4s cubic-bezier(0.46, 0, 0.07, 1);}
p {font-weight: 400;}
textarea:focus, input:focus {outline: none;}
img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto;}
a img.alignright {float:right; margin:0 0 1em 1em}
a img.alignleft {float:left; margin:0 1em 1em 0}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto}
::-moz-selection { color: #fff; background: var(--primary);}
::selection { color: #fff; background: var(--primary);}
:target {scroll-margin-top: 120px;}

:root {
  --primary: #13506C;
  --secondary : #FDCA31;
}

sup {line-height: 0;}
hr {border: 0; border-top: 1px solid #ddd; width: 50px; margin: 20px auto;}
.fw500 {font-weight: 500 !important;}
h1 span {color: var(--secondary) !important;}
span.place {position: relative; color: var(--primary) !important; font-weight: 600;}
span.place:after {content: ''; background-color: var(--secondary); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-left: 4px;}

.underline {position: relative;z-index: 10; color: var(--primary) !important;}
.underline:after {  content: ""; width: 100%; height: 8px; left: 0; position: absolute; bottom:0; transform: skew(-20deg); z-index: -1; background-color: var(--secondary);}


/* ==========================================================================
   General
   ========================================================================== */
body {font-family: 'Poppins', sans-serif; font-size: 15px; color: #000;}
body.noscroll {overflow-y: hidden;}
section {width: 100%; display: flex; padding:100px 20px; position: relative;}
.firstsection { padding-top:116px; }
button.full, a.full {padding: 5px 20px; border-radius: 40px; border-radius: 50px; text-decoration: none; background: var(--primary); color: #fff; border: 2px solid var(--primary);font-weight: 600; text-align: center;}
button.full:hover, a.full:hover {background: none; color: var(--primary); } 
button.full.yellow, a.full.yellow {padding: 5px 20px; border-radius: 40px;  background: var(--secondary); text-decoration: none; color: var(--primary); border: 2px solid var(--secondary); font-weight: 600; text-align: center;}
button.full.yellow:hover, a.full.yellow:hover {background: none;} 
button.line, a.line { text-decoration: none; color: var(--primary); border: 2px solid var(--primary); font-weight: 500; padding: 5px 20px; border-radius: 40px;}
button.line:hover, a.line:hover {background: var(--primary); color: #fff;}
button.line.white, a.line.white { padding: 5px 20px; border-radius: 40px;  text-decoration: none; color: #fff; border-color: #fff;}
button.line.white:hover, a.line.white:hover {background:#fff; color: var(--primary);}

.showmobile {display: none !important;}
.row {width: 100%; max-width: 1200px; margin: 0 auto;}
.pale {background: #f0f9ff;}
.yellowbg {background: #FDCA31;}
.pt130 {padding-top: 130px;}
.linkpoint {text-decoration: none; font-size: 16px;  font-weight: 500; display: inline-flex; }
.linkpoint img {width: 14px; display: inline-block; margin: 0 10px 0 5px; transition: all .4s cubic-bezier(0.46, 0, 0.07, 1);}
.linkpoint:hover {color: inherit;} 
.linkpoint:hover img {margin: 0 0 0 15px; transition: all .4s cubic-bezier(0.46, 0, 0.07, 1);}

.custom-shape-divider-top-1678231640 { position: absolute; bottom: 3px; left: 0; width: 100%; overflow: hidden;line-height: 0; z-index: 10;}
.custom-shape-divider-top-1678231640 svg { position: relative; display: block;  width: calc(129% + 1.3px); height: 58px; transform: rotateY(180deg);}

.custom-shape-divider-bottom-1678231692 { position: absolute; top: 3px; left: 0;  width: 100%; overflow: hidden; line-height: 0; transform: rotate(180deg);}
.custom-shape-divider-bottom-1678231692 svg {  position: relative;  display: block; width: calc(129% + 1.3px);  height: 58px; transform: rotateY(180deg);}


/* ==========================================================================
   Header
   ========================================================================== */
.header { width: 100%; position: fixed; z-index: 1000;}
.header:before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 50px; z-index: 1; background: var(--primary);  }
.header:after {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 114px; background: #F9FCFE; 
-webkit-box-shadow: 0px 0px 28px 0px rgba(19, 80, 108,0.12);
-moz-box-shadow: 0px 0px 28px 0px rgba(19, 80, 108,0.12);
box-shadow: 0px 0px 28px 0px rgba(19, 80, 108,0.12); }

.header.minim:before {height: 25px;}
.header.minim:after {height: 50px;}

.header .row {display: flex; position: relative; z-index: 2;}
.header .logo {background: #fff; display: flex; justify-content: center; height: 100px; padding: 10px 20px; border-radius: 0 0 15px 15px;
-webkit-box-shadow: 0px 0px 28px 0px rgba(19, 80, 108,0.2);
-moz-box-shadow: 0px 0px 28px 0px rgba(19, 80, 108,0.2);
box-shadow: 0px 0px 28px 0px rgba(19, 80, 108,0.2);}
.header .logo img {display: block; width: 130px;}

.headcontent {padding-left: 20px; display: flex; flex-direction: column; flex-grow: 1; }
.headcontent .headtop {display: flex; justify-content: flex-end; align-items: center; padding: 7px 0; gap:10px; font-size: 14px}
.headcontent .headtop .loginbtn {display: flex; text-decoration: none; font-weight: 300; align-items: center; gap: 7px; color: #fff; line-height: 1.6; padding: 0 5px 0 15px ; margin-left: 10px; border-left: 1px solid rgba(255, 255, 255, .1); border-radius: 0;}
.headcontent .headtop .loginbtn img {width: 22px;filter: invert(); transform:scaleX(-1); opacity:0.8 }
.headcontent .headtop form {background-color: #fff; border-radius: 40px; position: relative ; display:flex; gap: 20px; padding:3px 3px 3px 10px;}
.headcontent .headtop form button {display: flex; border-radius: 40px; background-color: #3db992;
 background: linear-gradient(90deg,#32c985 0,#3db992) #1bd172;}
.headcontent .headtop form button:hover {background: linear-gradient(90deg,#3db992 0,#32c985) #1bd172;}
.headcontent .headtop form input {background:none; border: none; min-width: 260px;}
.headcontent .headtop form input::placeholder { color: #999; font-size: 13px}
.headcontent .headtop form button img {display: block; height: 19px;}

.headcontent .headtop form .suggestion { position: absolute;width: 100%;max-width: 500px;top: calc(100% + 5px);left: 0;display: none;
background: #fff; border-radius: 10px; padding: 5px 15px; z-index: 20;
-webkit-box-shadow: 0px 0px 28px 0px rgba(19, 80, 108,0.2);
-moz-box-shadow: 0px 0px 28px 0px rgba(19, 80, 108,0.2);
box-shadow: 0px 0px 28px 0px rgba(19, 80, 108,0.2);}

.headcontent .headtop form .suggestion ul {}
.headcontent .headtop form .suggestion ul li { margin: 5px 0; padding:10px; border-radius:5px; background-image: url(img/arrowlineright.svg); background-repeat:no-repeat; background-position: calc(100% - 10px); center; background-size:10px }
.headcontent .headtop form .suggestion ul li:hover {background-color: #fdca311c; cursor: pointer;}
.headcontent .headtop form .suggestion ul li span {font-weight: 600; display: block;}
.headcontent .headtop form .suggestion ul li span small {font-weight: 400; color: #999;}
.headcontent .headtop form .suggestion ul li i {}
.headcontent .headtop form .suggestion .ajoutermarque {margin-top: 20px; border-top: 1px solid #eee; padding: 20px 0; text-align: center;}
.headcontent .headtop form .suggestion .ajoutermarque span { display:block; margin-bottom:15px; }
.headcontent .headbottom {display: flex; justify-content: flex-end; align-items: center; padding-top: 15px; gap:50px; font-size: 14px}
.headerplace {position: absolute; left: 185px; bottom: 13px;}
.headerplace a {position: relative; padding-right: 7px;display:block; }
.headerplace img {display: block; width: 70px;}

.header nav {}
.header nav > ul {}
.header nav > ul > li { display:inline-block; font-weight:500;  font-size:16px; position:relative; }
.header nav > ul > li.menu-item-has-children { }
.header nav > ul > li a {text-decoration: none;  padding: 5px 20px 10px 20px;}
.header nav > ul > li.menu-item-has-children a { padding-right: 30px;background-image: url('img/arrowdown.svg'); background-size: 12px; background-repeat: no-repeat; background-position: calc(100% - 10px) 12px;}
.header nav > ul > li:hover {}
.header nav > ul > li:hover a {text-decoration: none; color: var(--secondary); cursor: pointer;}
.header nav > ul > li > ul.sub-menu {display:  none; position: absolute; top: 100%; left: 0; z-index: 1; background-color: #fff;  padding: 20px 30px 10px 30px; border-radius: 10px;
-webkit-box-shadow: 0px 0px 28px 0px rgba(19, 80, 108,0.2);
-moz-box-shadow: 0px 0px 28px 0px rgba(19, 80, 108,0.2);
box-shadow: 0px 0px 28px 0px rgba(19, 80, 108,0.2);}
.header nav > ul > li.mega > ul.sub-menu { width: 600px; left: -230px;}
.header nav ul li.menu-item-has-children:hover > ul.sub-menu {display: block;}
.header nav ul.sub-menu > li { display: block; width: calc(50% - 20px); text-align: left; float: left;}
.header nav ul.sub-menu > li > ul.sub-menu a, .header nav ul.sub-menu > li > a {display:block; background: none; white-space: nowrap;font-weight: 400; padding: initial; border: none; display:initial; font-size:14px; color: #555; }
.header nav li.mega > ul.sub-menu > li > a {font-weight: 600; display:  block; margin-bottom: 10px; padding-bottom: 10px;}
.header nav li.mega > ul.sub-menu > li.menu-item-has-children > a {border-bottom: 1px solid #eee; }
.header nav ul.sub-menu > li > .sub-menu li {width: 100%;}
.header nav li.mega li a:hover, .header nav ul.sub-menu > li > a:hover {color: var(--secondary) !important;}
.menu-item-description {transition: all .4s cubic-bezier(0.46, 0, 0.07, 1);}
.header nav li.mega > ul.sub-menu > li > a:hover .menu-item-description {color: var(--primary) !important; transition: all .4s cubic-bezier(0.46, 0, 0.07, 1);}
.header nav ul.sub-menu > ul { position: absolute; top: 0; left: 100%; z-index: 2; background-color: #fff; border: 1px solid #ccc; padding: 0.5rem 0; box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.1);}
li ul.sub-menu li {display: block; width: 100%; text-align: left; margin-bottom: 8px;}
.menu-item-description {display: block; font-weight: 400;}
.header nav>ul>li.mega>ul.sub-menu>li:nth-child(odd) { margin-right: 40px; }
.header nav>ul>li.mega>ul.sub-menu>li:last-child {margin-right: 0;}
.header nav > ul > li.normalsub:hover > ul.sub-menu {display: flex; flex-direction: column;}

.header nav > ul > li.mega > ul.sub-menu li.nomargin {margin-right: 0 !important;}

.showmenu {position: fixed; width: 100%; height: 100%; left: 0; top: 0 !important; padding:5px 20px 10px 20px !important; 
 background: #fff; border-top: 52px solid var(--primary); transition: all .4s cubic-bezier(0.46, 0, 0.07, 1);}
.showmenu .headtop {flex-direction: column; align-items: flex-start;}
.showmenu .headtop form {border: 1px solid var(--primary); gap:0; justify-content: space-between; order: 100; width:100%; }
.showmenu .headtop form button {padding: 8px !important;}
.showmenu .headtop form input {min-width: calc(100% - 50px);}
.showmenu .headtop .loginbtn { border: none; padding: 0; margin: 0 0 5px 0; position: absolute; top: -36px; left: 17px;}
.showmenu .headbottom {flex-direction: column;}
.showmenu .headbottom nav {width: 100%; height: calc(100vh - 190px);  overflow-y: scroll;}
@supports (height: 100dvh) {
  .showmenu .headbottom nav {
    height: calc(100dvh - 190px);
  }
}
.showmenu .headbottom nav > ul {width: 100%;}
.showmenu .headbottom nav > ul li {display: block; padding: 0; margin-bottom: 5px;}
.showmenu .headbottom nav > ul > li a {padding: 5px 20px 5px 0; width: 100%; display: block; font-size: 16px;}
.showmenu nav > ul > li.withsub a {background-position: calc(100% - 10px) 10px;}
.showmenu nav > ul > li.mega > ul.sub-menu, .showmenu nav > ul > li > ul.sub-menu {width: 100%; margin-bottom: 15px; box-shadow: none; margin-top: 10px; background:#F9FCFE; border-radius:10px;  position: initial; display:block; padding:10px 15px; }
.showmenu nav ul li.withsub:hover > ul.sub-menu {display: block;}
.showmenu nav ul.sub-menu > li > ul {margin-bottom: 25px;}
.showmenu nav ul.sub-menu > li > ul li {margin-bottom: 10px;}
.showmenu .headbottom { justify-content: flex-start;}
.showmenu .headbottom nav > ul > li > .sub-menu a {font-size: 15px;}
.showmenu nav > ul > li > .sub-menu {display: none !important;}
.showmenu nav > ul > li > .sub-menu.showsub {display: flex !important; flex-direction: column;}
.showmenu button.full.yellow { font-size:15px !important; width:100%; }


/* ==========================================================================
   Smart Blocs
   ========================================================================== */
.smartbloc {padding: 100px 20px;}
.smartbloc:first-of-type {padding-top: 180px; }
.smartbloc.separateur {height: 60px; padding: 0 20px;}

.smartbloc .grid1, .smartbloc .grid2, .smartbloc .grid3, .smartbloc .grid4, .smartbloc .grid5, .smartbloc .grid6 {display: flex; flex-wrap:wrap; gap: 80px; align-items:center; }
.smartbloc .grid1 > *:first-child, .smartbloc .grid1 > *:last-child {flex: 0 0 calc(50% - 40px);}
.smartbloc .grid2 > *:first-child {flex: 0 0 calc(40% - 40px);}
.smartbloc .grid2 > *:last-child {flex: 0 0 calc(60% - 40px);}
.smartbloc .grid3 > *:first-child {flex: 0 0 calc(60% - 40px);}
.smartbloc .grid3 > *:last-child {flex: 0 0 calc(40% - 40px);}
.smartbloc .grid5 > *:first-child {flex: 0 0 calc(30% - 40px);}
.smartbloc .grid5 > *:last-child {flex: 0 0 calc(70% - 40px);}
.smartbloc .grid6 > *:first-child {flex: 0 0 calc(70% - 40px);}
.smartbloc .grid6 > *:last-child {flex: 0 0 calc(30% - 40px);}
.smartbloc .grid4 > *:first-child {flex: 0 0 100%;}
.smartbloc .grid4 > *:last-child {flex: 0 0 100%;}
.smartbloc .grid4  {gap: 50px;}

.smartbloc .grid1cs, .smartbloc .grid2cs, .smartbloc .grid3cs {display: flex; flex-wrap:wrap; gap: 80px; align-items:center; }
.smartbloc .grid1cs > *:first-child, .smartbloc .grid1cs > *:last-child {flex: initial; width: calc(50% - 40px);}
.smartbloc .grid2cs > *:first-child {flex: initial; width: calc(40% - 40px);}
.smartbloc .grid2cs > *:last-child {flex: initial; width: calc(60% - 40px);}
.smartbloc .grid3cs > *:first-child {flex: initial; width: calc(60% - 40px);}
.smartbloc .grid3cs > *:last-child {flex: initial; width: calc(40% - 40px);}

.smartbloc .order2 > *:first-child {order: 2;}

.smartbloc h1 {font-size: 38px; font-weight: 700; line-height: 1.3; color: var(--primary); margin-bottom: 40px;}
.smartbloc h2 {font-size: 34px; font-weight: 700; line-height: 1.3; color: var(--primary); margin-bottom: 30px;}
.smartbloc h3 {font-size: 22px; font-weight: 600; line-height: 1.3; color: var(--primary); margin-bottom: 25px;}
.smartbloc h4 {font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--primary); margin-bottom: 25px;}

.smartbloc .mediabloc {display: flex; justify-content: center; overflow: hidden;}
.smartbloc .mediabloc img, .smartbloc .mediabloc video {max-width: 100%;}
.smartbloc .mediabloc figure {padding: 18px; line-height: 0;}
.smartbloc .mediabloc figure video {border-radius: 10px; box-shadow: 0px 6px 15px 0 rgba(0, 0, 0, .1) !important;}

.smartbloc article p {font-size: 16px; margin-bottom: 20px;}
.smartbloc:first-of-type article p strong, .smartbloc:first-of-type article p {font-weight: 500;}
.smartbloc article > *:last-child {margin-bottom: 0;}
.smartbloc article ul {font-size: 16px; margin-bottom:5px;}
.smartbloc article li {margin-bottom : 15px; padding-left: 30px; background-image: url('img/icon-checkmark.svg'); background-position: 0 3px; background-size:20px 20px; background-repeat:no-repeat; }

.smartbloc article .cust-widget-wrapper li {margin-bottom: 0; background-image: none;}

.smartbloc .btnbloc {display: flex; flex-wrap: wrap; gap: 10px; padding-top: 25px;}
.smartbloc .btnbloc a.blue svg, .smartbloc .btnbloc a.yellow svg, .smartbloc .btnbloc a.outline svg, .smartbloc .btnbloc a.link svg   {visibility: hidden; width: 0; height: 0;}
.smartbloc .btnbloc a.blue {padding: 10px 25px; border-radius: 50px; text-decoration: none; background: var(--primary); color: #fff; border: 2px solid var(--primary);font-weight: 500; text-align: center;}
.smartbloc .btnbloc a.blue:hover {background: none; color: var(--primary); } 
.smartbloc .btnbloc a.yellow {padding: 10px 25px; border-radius: 50px; text-decoration: none; background: var(--secondary); color: var(--primary); border: 2px solid var(--secondary);font-weight: 600; text-align: center;}
.smartbloc .btnbloc a.yellow:hover {background: none;} 
.smartbloc .btnbloc a.outline {padding: 10px 25px; border-radius: 50px; text-decoration: none; color: var(--primary); border: 2px solid var(--primary);font-weight: 600; text-align: center;}
.smartbloc .btnbloc a.outline:hover {background: var(--primary); color: #fff; } 
.smartbloc .btnbloc a.link {padding: 10px 0; color: var(--primary); font-weight: 500;}
.smartbloc .btnbloc a.link:hover { color: var(--secondary); } 
.aibtn {position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center; text-decoration: none; text-align: center; font-weight: 500;  border-radius: 50px; color: var(--primary); border: 2px solid transparent; transition: border 0s ease-in-out; padding: 10px 15px;}
.aibtn::after {pointer-events: none;content:'';position:absolute;inset: 0px;background:linear-gradient(192deg, rgb(0, 76, 255) -3.1%, rgb(255, 214, 193) 51.07%, rgb(235, 71, 134) 91.94%) border-box border-box;border-radius: 40px;border-width: 2px; border-style: solid; border-color: rgba(0, 0, 0, 0); border-image: initial; mask: linear-gradient(transparent, transparent) border-box padding-box intersect, linear-gradient(white, white);}
.aibtn svg { flex-shrink: 0;margin-right: 8px;fill: url(#iconGradient);}
.aibtn:hover svg {fill: #ffffff;}
.aibtn:hover {background-image: linear-gradient(to right, #140ae6, #ad00a2 80%, #f26579) !important; color: #fff; border-radius: 50px; border: 2px solid var(--secondary); transition: border 0s ease-in-out;}
.aibtn:hover::after {visibility: hidden;}


.smartbloc .smallblocs {display: grid; gap: 30px; }
.smartbloc .smallblocs .btnbloc {padding-top: 5px;}
.smartbloc .smallblocs .btnbloc a {padding: 5px 25px;}
.smartbloc .smallblocs.twoblocs {grid-template-columns: repeat(2, 1fr);} 
.smartbloc .smallblocs.threeblocs {grid-template-columns: repeat(3, 1fr);}
.smartbloc .smallblocs.fourblocs {grid-template-columns: repeat(4, 1fr);}
.smartbloc .smallblocs .item {display: flex; flex-direction: column; gap: 15px; padding: 20px; border-radius: 15px; border: 1px solid transparent;}
.smartbloc .smallblocs h2 {margin-bottom: 15px; font-size: 26px;}
.smartbloc .smallblocs h3 {margin-bottom: 20px; font-size:22px; color:#000; font-weight:700; }
.smartbloc .smallblocs h4 {margin-bottom: 5px; font-size:15px; font-weight:500; }
.smartbloc .smallblocs p {margin-bottom: 5px; font-size:15px; }
.smartbloc .smallblocs article > *:last-child {margin-bottom: 0;}
.smartbloc .smallblocs .smallimg {display: flex;}
.smartbloc .smallblocs .smallimg.smallimgleft {justify-content: flex-start;}
.smartbloc .smallblocs .smallimg.smallimgcenter {justify-content: center;}
.smartbloc .smallblocs .smallimg.smallimgright {justify-content: flex-end;}
.smartbloc .smallblocs .smallimg img {width: auto; height: auto; align-self: flex-start;}

.smartbloc .smallblocs .item.lb {border-right: 3px solid var(--primary); border-bottom: 3px solid var(--primary);}
.smartbloc .smallblocs .item.lb .smallimg.smallimgcenter {flex: 0 0 30%;}
.smartbloc .smallblocs .item.lb img {min-width: 160px; flex-shrink: 0;}
.smartbloc .smallblocs .item.lb p {margin-bottom: 20px;}
.smartbloc .smallblocs .item.lb a {width: 100%;}

.smartbloc .ytbcontainer {position: relative; overflow: hidden; border-radius: 12px; aspect-ratio: 16/9; width: 100%;}
.smartbloc .ytbthumbnail {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--secondary);}
.smartbloc .ytbthumbnail:hover {cursor: pointer;}
.smartbloc .ytbthumbnail img {width: 100%; height: auto; object-fit: cover;}
.smartbloc .ytbthumbnail:after {  content: ''; position: absolute; width: 70px; height: 70px; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGhlaWdodD0nMWVtJyB2aWV3Qm94PScwIDAgMzg0IDUxMic+PHBhdGggZmlsbD0nIzEzNTA2YycgZD0nTTczIDM5Yy0xNC44LTkuMS0zMy40LTkuNC00OC41LS45UzAgNjIuNiAwIDgwVjQzMmMwIDE3LjQgOS40IDMzLjQgMjQuNSA0MS45czMzLjcgOC4xIDQ4LjUtLjlMMzYxIDI5N2MxNC4zLTguNyAyMy0yNC4yIDIzLTQxcy04LjctMzIuMi0yMy00MUw3MyAzOXonIC8+PC9zdmc+);
    background-size: 20px; background-repeat: no-repeat; background-position: 53%; background-color: rgb(255 255 255 / 80%); backdrop-filter: blur(3px); box-shadow: 0 0 0 6px rgb(255 255 255 / 50%); transition: all .2s ease-in-out; z-index: 10;}
.smartbloc .ytbthumbnail:hover:after {box-shadow: 0 0 0 10px rgb(255 255 255 / 30%);}
.smartbloc .ytbcontainer iframe {width: 100%; height: auto; aspect-ratio: 16/9;}


.smartbloc.quote article {color: #fff;}
.smartbloc.quote article h1 {color: #fff; font-size: 24px; font-weight: 600;}
.smartbloc.quote article h2 {color: #fff; font-size: 22px; font-weight: 600;} 
.smartbloc.quote article h3 {color: #fff; font-size: 20px; font-weight: 600;}
.smartbloc.quote article h4 {color: #fff; font-size: 18px; font-weight: 500;}
.smartbloc.quote article h5 {color: #fff; font-size: 18px; font-weight: 500;}
.smartbloc.quote article p {color: #fff; font-size: 18px;}
.smartbloc.quote article a {color: #fff;}
.smartbloc.quote article a:hover {color: var(--secondary);}
.smartbloc.quote .row {border-radius: 15px; padding: 40px; gap:20px;}
.smartbloc.quote .rainbow {background: hsla(243, 95%, 47%, 1);
background: linear-gradient(315deg, hsla(243, 95%, 47%, 1) 0%, hsla(356, 68%, 58%, 1) 81%);
background: -moz-linear-gradient(315deg, hsla(243, 95%, 47%, 1) 0%, hsla(356, 68%, 58%, 1) 81%);
background: -webkit-linear-gradient(315deg, hsla(243, 95%, 47%, 1) 0%, hsla(356, 68%, 58%, 1) 81%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#1206EB", endColorstr="#DD4D57", GradientType=1 );}
.smartbloc.quote .green {background: hsla(165, 89%, 31%, 1);
background: linear-gradient(135deg, hsla(165, 89%, 31%, 1) 0%, hsla(161, 46%, 49%, 1) 79%);
background: -moz-linear-gradient(135deg, hsla(165, 89%, 31%, 1) 0%, hsla(161, 46%, 49%, 1) 79%);
background: -webkit-linear-gradient(135deg, hsla(165, 89%, 31%, 1) 0%, hsla(161, 46%, 49%, 1) 79%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#099773", endColorstr="#43B692", GradientType=1 );}
.smartbloc.quote .btnbloc a.blue {padding: 10px 25px; border-radius: 40px; border-radius: 50px; text-decoration: none; background: #fff; color: var(--primary); border: 2px solid #fff;font-weight: 500; text-align: center;}
.smartbloc.quote .btnbloc a.blue:hover {background: transparent;  color: #fff; } 
.smartbloc.quote .btnbloc a.yellow:hover {background: #fff; border: 2px solid #fff; color: var(--primary); } 
.smartbloc.quote .btnbloc a.outline { padding: 10px 20px; border-radius: 40px;  text-decoration: none; color: #fff; border-color: #fff; text-align: center;}
.smartbloc.quote .btnbloc a.outline:hover {background:#fff; color: var(--primary);}
.smartbloc.quote .btnbloc a {align-self: center; text-align: center;}

.smartbloc.quote.footquote {padding: 80px 20px 0 20px;}
.smartbloc.quote.footquote .row {display: grid; gap: 50px; grid-template-columns: repeat(auto-fit, minmax(0, 1fr));}
.smartbloc.quote.footquote .btnbloc {padding-top: 0;}
.smartbloc.quote.footquote:before {content: ''; height: calc(50% - 40px); width: 100%; background: #f0f9ff; position: absolute; left: 0; bottom: 0; z-index: -1;}
.smartbloc.quote.footquote.ld:before {background: #F0F9FF; }
.smartbloc.quote.footquote article {display: flex; align-items: center;}
.smartbloc.quote.footquote article h2 {font-size: 26px; max-width:430px; }
.smartbloc.quote.footquote article.minimal {gap: 20px; justify-content: center;}
.smartbloc.quote.footquote article.minimal h2 {font-size: 29px; font-weight: 700; letter-spacing: 0.5px; max-width: initial;}

.smartbloc .cs {max-width: 100%;}
.smartbloc .cs .carrousel {padding: 40px;}
.smartbloc .cs .slider {padding: 20px 60px;}
.smartbloc .cs .slider .slick-list {border-radius: 10px; border:1px solid var(--primary); }
.smartbloc .cs .slider .item {padding: 0;}
.smartbloc .cs .carrousel .item img { width: 100%; margin: 0 auto; max-width: 130px; height: auto; max-height: 50px; filter:grayscale(); }
.smartbloc .cs .carrousel .item img:hover {filter: grayscale(0%);}
.smartbloc .cs .carrousel .item {padding: 0 10px; display: flex !important; justify-content: center; align-items: center;}

.smartbloc .includforms {padding: 25px; border-radius: 10px; border: 1px solid #e7e5e5;
-webkit-box-shadow: 0px 0px 28px 0px rgba(19, 80, 108,0.2);
-moz-box-shadow: 0px 0px 28px 0px rgba(19, 80, 108,0.2);
box-shadow: 0px 0px 28px 0px rgba(19, 80, 108,0.2);}
.smartbloc .includforms * {font-family: 'Poppins', sans-serif !important}
.smartbloc .includforms .flex-container {display: flex;justify-content: center;align-items: center; gap: 10px;}
.smartbloc .includforms ._html-heading {font-size: 21px; font-weight: 600; margin-bottom: 15px; color: var(--primary); text-align: center;}
.smartbloc .includforms ._html-code p {margin-bottom: 30px; font-size: 15px !important; color: var(--primary); text-align: center;}
.smartbloc .includforms ._html-code span {font-size: 14px; display: block;}
.smartbloc .includforms ._form_element {margin-bottom: 20px; flex: 1;}
.smartbloc .includforms ._button-wrapper {margin-top: 20px; text-align: center;}
.smartbloc .includforms ._form-label {display: block; font-weight: 500; margin-bottom: 10px;}
.smartbloc .includforms ._field-wrapper input, .smartbloc .includforms ._field-wrapper textarea {width: 100%; border: 2px solid #d7e0eb; min-height: 40px; padding: 5px 10px; border-radius: 5px; background: transparent; margin-bottom: 5px;}
.smartbloc .includforms button {padding: 10px 40px; border-radius: 40px;  background: var(--secondary); text-decoration: none; color: var(--primary); border: 2px solid var(--secondary); font-weight: 600;}
.smartbloc .includforms button:hover {background: transparent;}
.smartbloc .includforms ._error-inner {color: #d60000; font-size: 12px;}
.includforms input:-webkit-autofill,
.includforms input:-webkit-autofill:hover, 
.includforms input:-webkit-autofill:focus, 
.includforms input:-webkit-autofill:active{
    -webkit-background-clip: text;
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 0 0 #23232329;}
.FormBox.pale {background: transparent;}

.smartbloc .carrouselarticle {}
.smartbloc .carrouselarticle .item {padding: 10px 22px; height: 100%;}
.smartbloc .carrouselarticle .item * {line-height: initial;}
.smartbloc .carrouselarticle .item a * {transition: all .2s ease-in;}
.smartbloc .carrouselarticle .item a {display: flex; border-radius: 10px; overflow: hidden;  text-decoration: none; background:#fff; height:100%; flex-direction:column;
-webkit-box-shadow: 0px 0px 10px 0px rgba(19, 80, 108,0.15);
-moz-box-shadow: 0px 0px 10px 0px rgba(19, 80, 108,0.15);
box-shadow: 0px 0px 10px 0px rgba(19, 80, 108,0.15); }
.smartbloc .carrouselarticle .item .cover {position: relative; overflow: hidden; aspect-ratio: 16/9;}
.smartbloc .carrouselarticle .item a:hover .cover img {transform: scale(1.1); transition: all .2s ease-in;}
.smartbloc .carrouselarticle .item .cover span {position: absolute; left: 10px; top: 10px; background: #fff; border-radius: 5px; padding: 5px 10px; font-size: 12px; -webkit-box-shadow: 0px 0px 10px 0px rgba(19, 80, 108,0.2);
-moz-box-shadow: 0px 0px 10px 0px rgba(19, 80, 108,0.2);
box-shadow: 0px 0px 10px 0px rgba(19, 80, 108,0.2);}
.smartbloc .carrouselarticle .item span.cat {color: var(--primary); margin-bottom: 15px; display: block; font-size: 14px;}
.smartbloc .carrouselarticle .item h3 {font-weight: 600;}
.smartbloc .carrouselarticle .item a:hover h3{color: #000;}
.smartbloc .carrouselarticle .item article {padding: 20px; display: flex; flex-direction: column; flex-grow: 1;} 
.smartbloc .carrouselarticle .item a:hover {color: var(--primary);}
.smartbloc .carrouselarticle .item p {color: #444; font-size: 15px;} 
.smartbloc .carrouselarticle .item a .linkpoint {margin-top: auto;}
.smartbloc .carrouselarticle .item a:hover .linkpoint img {margin: 0 0 0 15px; transition: all .4s cubic-bezier(0.46, 0, 0.07, 1);} 


.agenda {padding: 100px 20px;}
.agenda.firstsection {padding-top: 160px;}
.agenda .mois {padding-left: 70px; position: relative; margin-bottom: 40px; min-height: 170px;}
.agenda .mois:last-child {margin-bottom: 0;}
.agenda .mois .moisname {position: absolute; left: 0; top: 0; text-transform: uppercase; color: #e3e3e3; font-weight: 600; font-size: 30px; writing-mode: tb-rl;transform: rotate(-180deg) !important; text-orientation: mixed;}
.agenda .mois article {position: relative; border-left: 1px solid var(--secondary); padding: 0 0 40px 40px;}
.agenda .mois article:before {content: ""; height: 20px; width: 20px; border-radius: 50%; background: var(--secondary); position: absolute; left: -10px; top: 0;}
.agenda .mois article:after {content: ""; height: 8px; width: 8px; border-radius: 50%; background: #fff; position: absolute; left: -4px; top: 6px;}
.agenda .mois article:last-child {border: none;}
.agenda .mois article a { text-decoration:none; }
.agenda .mois article .meta { border-radius: 15px;}
.agenda .mois article h2 {font-weight: 400; font-size: 18px; color: #000; margin-bottom: 5px; transition: all .4s cubic-bezier(0.46, 0, 0.07, 1);}
.agenda .mois article span {color:#999; font-size: 14px; font-weight: 300;}
.agenda .mois article span.lieu {color: var(--primary); font-weight: 400; display: flex; align-items: center; line-height: 0; gap: 5px}
.agenda .mois article a:hover h2 {padding-left: 30px; color: var(--secondary); transition: all .4s cubic-bezier(0.46, 0, 0.07, 1);}


.smartbloc .masonry {width: 100%; display: flex; flex-wrap: wrap; margin-left: -15px;}
.smartbloc .masonry .item { width: calc(33.333% - 15px); margin-left: 15px; margin-bottom: 15px; box-sizing: border-box; padding: 15px 20px 20px 20px; 
border-radius: 10px; border: 1px solid rgb(224 228 237 / 60%);
 box-shadow: rgba(137, 138, 154, .15) 0 8px 24px 0;}
.smartbloc .masonry .item .smallimg { margin-bottom:15px; display:flex; gap: 15px; padding-bottom: 10px; align-items: center; border-bottom: 1px dashed #eee;}
.smartbloc .masonry .item .smallmeta {padding-left: 15px; border-left: 1px dashed #eee;}
.smartbloc .masonry .item .smallimg img {display: block; height: 60px; width: 60px; border-radius: 30px;}
.smartbloc .masonry .item .smallimg h3 {font-size: 16px; margin-bottom: 0px;}
.smartbloc .masonry .item .smallimg p {color: var(--primary);}
.smartbloc .masonry .item .smallimg span {color: #666; font-size: 14px; display: block;}
.smartbloc .masonry .item article p {font-size: 15px;}


@media (max-width: 1024px) {
.smartbloc .masonry  .item { width: calc(50% - 15px);} }
@media (max-width: 768px) {.smartbloc .masonry .item { width: calc(100% - 15px); } }



.checklistsec {padding: 50px 20px 20px 20px}
.checklistsec .row {display: flex; position: relative; gap: 30px;}
.checklistsec aside {flex: 0 0 380px; position: sticky; top: 130px; align-self: flex-start;}
.checklistsec .sidecta {border: 3px solid #caebe1; background: #f0fbf7; padding: 20px 10px 30px 10px; border-radius: 10px; color: #333; display: flex; flex-direction: column; align-items: center;}
.checklistsec .sidecta p {margin-bottom: 20px; font-weight: 600; text-align: center;}
.checklistsec .checklist span.legende {float: right; position: relative; text-align: right; color: #555; font-size: 12px; padding-left: 8px;}
.checklistsec .checklist span.legende:before {content: ''; background: #3db992; width:3px; height:10px; position:absolute; left:0; top:4px; }
.checklistsec .checklist article {position: relative; padding: 20px; border: 3px solid #F0F9FF; border-radius: 10px; margin-bottom: 15px;}
.checklistsec .checklist article:hover {cursor: pointer;}
.checklistsec .checklist article.active label:before {content: ''; position: absolute; top: 20px; left: 20px; height: 25px; width: 25px; background:#3db992; border-radius:5px; }
.checklistsec .checklist article label:after {content: ''; position: absolute; top: 25px; left: 26px; background: url('img/check.svg'); height: 14px; width: 14px; filter: invert();}
.checklistsec .checklist article label {display: flex;}
.checklistsec .checklist article label:hover {cursor: pointer;}
.checklistsec .checklist article input { appearance: none; width: 25px; height: 25px; margin: 0 20px 0 0; border-radius: 5px; border: 2px solid #3db992; flex: 0 0 25px; outline: none;}
.checklistsec .checklist article .checkcontent {transition: all .25s ease-in-out;}
.checklistsec .checklist article .checkinfo {height: 0; overflow: hidden;}
.checklistsec .checklist article p {margin-bottom: 15px;}
.checklistsec .checklist article p:last-of-type {margin-bottom: 0;}
.checklistsec .checklist article strong {background: #3db992; padding: 2px 5px; font-weight: 400; color: #fff;}
.checklistsec .checklist article.active .checkinfo {height: auto; transition: all .25s ease-in-out; margin-top:15px; padding-top:15px; border-top:1px dashed #eee; }


.kitmedia {padding: 50px 20px 20px 20px;}
.kitmedia .row {display:grid;gap:50px;grid-template-columns:repeat(4,1fr);}
.kitmedia .row .item {padding: 15px; background:#F9FCFE; border-radius:10px; border:1px solid #eee;  -webkit-box-shadow: 0px 0px 10px 0px rgba(19, 80, 108,0.07);
-moz-box-shadow: 0px 0px 10px 0px rgba(19, 80, 108,0.07);
box-shadow: 0px 0px 10px 0px rgba(19, 80, 108,0.07);}
.kitmedia .row .item .cover {position: relative; border-radius: 8px; overflow: hidden; margin-bottom: 10px; border:1px solid #eee; }
.kitmedia .row .item .cover img {display: block;}
.kitmedia .row .item .cover .downloadbtn {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; background: var(--primary); flex-direction: column; justify-content: center; gap: 15px; align-items: center;}
.kitmedia .row .item .cover .downloadbtn a {color: #fff; border: 2px solid #fff; padding: 7px 20px; text-decoration: none; border-radius: 5px; width: 100px; text-align: center;}
.kitmedia .row .item .cover .downloadbtn a:hover {color: var(--primary); background: #fff;}
.kitmedia .row .item:hover .cover .downloadbtn {display: flex;}
.kitmedia .row .item h2 {font-size: 14px; font-weight: 400; text-align: center; text-transform: uppercase; color: var(--primary);}


/* ==========================================================================
   Thank you
   ========================================================================== */
.thankyou {padding-bottom: 0;}
.thankyou .row {}
.thankyou { max-width: 500px; padding: 40px; border: 1px solid #eee; border-radius: 10px; background: #f0f9ff; display:flex; flex-direction:column;
 -webkit-box-shadow: 0px 0px 10px 0px rgba(19, 80, 108,0.07);
-moz-box-shadow: 0px 0px 10px 0px rgba(19, 80, 108,0.07);
box-shadow: 0px 0px 10px 0px rgba(19, 80, 108,0.07); }
.thankyou h1 {color: var(--primary); font-size: 36px; font-weight: 700; line-height: 1.3; margin-bottom: 30px;}
.thankyou p {}
.thankyou a.full {margin-bottom: 30px; align-self: center; font-size: 16px; padding: 10px 30px;}


/* ==========================================================================
   Tarifs
   ========================================================================== */
.tarifs{border-bottom:0}
.tarifs .row { padding-top: 40px; }
.tarifs h1.primarytitle, .blogh2 {font-size:38px;font-weight:700;line-height:1.3;color:var(--primary);margin-bottom:60px;text-align:center}
.tarifs .plans{display:flex;gap:20px;max-height:max-content}
.tarifs .plans .plan{display:flex;justify-content:space-between;flex-direction:column;position:relative;padding:30px 25px 20px;border-radius:10px;border:2px solid #e1e7ef;width:33.33%}
.tarifs .plans .plan .plantag{position:absolute;top:-15px;right:20px;background:#e2e4fb;border-radius:20px;padding:5px 15px;font-size:13px;font-weight:600;z-index:2}
.tarifs .plans .plan>*{z-index:2}
.tarifs .plans .plan article{display:flex;flex-direction:column;font-size:15px}
.tarifs .plans .plan article h2{font-weight:700;font-size:24px}
.tarifs .plans .plan article h3{font-weight:600;margin-bottom:20px;font-size:17px}
.tarifs .plans .plan article ul{margin-bottom:5px}
.tarifs .plans .plan article li{margin-bottom:15px;padding-left:26px;background-image:url(img/tarifcheck.svg);background-position:0 5px;background-size:16px 16px;background-repeat:no-repeat}
.tarifs .plans .plan article .lightbtn{width:auto;margin:30px 0;align-self:center}
.tarifs .plans .plan .full{ margin:30px 0 0 0; padding: 8px 20px; width:100%; text-align:center; align-self:center;}
.tarifs .plans .plan .line{ margin:30px 0 20px; text-align:center; align-self:center;}
.tarifs .plans .plan.highlight{background:#f7f7ff;border:2px solid transparent;background-clip:padding-box}
.tarifs .plans .plan.highlight:after{content:"";position:absolute;inset:-1px;border-radius:10px;padding:2px;background:linear-gradient(94deg,#004cff -3.1%,#ffd6c1 51.07%,#eb4786 91.94%);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.tarifs .plans .aibtn {margin-top: 30px; margin-bottom: -2px;}


.planpricing{padding:40px 15px 15px;display:flex;flex-direction:column;align-items:center;background:#f5f8ff;border-radius:10px;margin:30px 0;box-shadow:rgba(137,138,154,.1) 0 10px 24px 0;border:1px solid rgb(224 228 237/60%)}

.tarifs .plans .plan.highlight .planpricing{background:rgb(255 255 255/50%)}

.planpricing .toggle{display:flex;justify-content:center;align-items:center;margin-bottom:10px}
.planpricing .toggle div{display:flex;padding:0 10px}
.planpricing .toggle span{font-weight:600;font-size:16px;position:relative}
.planpricing .toggle span small{content:'';position:absolute;top:-25px;background:#fdca31;padding:7px;font-size:12px;border-radius:20px;line-height:1; border-bottom: none !important;}
.planpricing .toggle input[type=checkbox]{height:0;width:0;visibility:hidden;margin:0}
.planpricing .toggle label{cursor:pointer;text-indent:-9999px;width:48px;height:26px;background:#d8dfed;display:block;border-radius:100px;position:relative}
.planpricing .toggle label:after{content:'';position:absolute;top:4px;left:4px;width:18px;height:18px;background:#fff;border-radius:22px;transition:.3s}
.planpricing .toggle input:checked+label{background:#fdca31}
.planpricing .toggle input:checked+label:after{left:calc(100% - 5px);transform:translateX(-100%)}
.planpricing .toggle label:active:after{width:48px}
.planpricing .toggle span small.no-discount { text-decoration-line: line-through; background: #d8dfed; color: #535353;}

span.tag{background:#e2e4fb;padding:3px 5px;border-radius:3px;font-size:12px;font-weight:500}

.fine-print {margin-top: 3px; font-size: 12px; display: flex; text-decoration: underline; font-weight: 400 !important; border: 0 !important;}

.tarifs .plans .plan .planpricing .plsbtn{background:#fff;text-align:center;margin-top:15px;margin-bottom:5px;color:#000;border:2px solid #eef0ff}
.tarifs .plans .plan.highlight .planpricing .plsbtn{background:#f5f8ff}
.tarifs .plans .plan .planpricing .plsbtn:hover{background:#13506c;color:#fff}

.planpricing .planprice{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-bottom:10px}
.planpricing .planprice p{font-weight:700;font-size:40px}
.planpricing .planprice p sup{font-weight:600;font-size:25px}
.planpricing .planprice p .initial-price { font-size: 24px;}
.planpricing .sources{background:#fff5d2;border-radius:10px;padding:10px;align-self:center;display:flex;align-items:center;margin-bottom:20px; justify-content: space-between; min-width: 190px;}
.planpricing .sources span{margin:0 10px;font-weight:600}
.planpricing .sources button{background:#fff;border-radius:5px;height:36px;width:36px;padding:0;display:flex;justify-content:center;align-items:center}
.planpricing .sources button:hover {background: rgb(253 202 50 / 40%);}
.planpricing .sources button img{height:22px;width:22px}
.planpricing .sourcesimg{display:flex;flex-wrap:wrap;justify-content:center;width:100%;margin-bottom:10px}
.planpricing .sourcesimg img{height:auto;max-height:20px;margin:0 4px;filter:grayscale(100%)}
.planpricing .all-sources.sourcesimg img,.planpricing .sourcesimg img.free-src{filter:initial}

.logobloc{padding-top:0;position:relative;border:0}
.logobloc .row{padding:50px 30px;border-radius:15px}
.logobloc h2 {color: var(--primary); font-weight: 700; text-align: center;font-size: 28px;margin: 0 auto 30px auto; line-height: 1.3;}
.logobloc p{text-align:center;font-weight:400;max-width:1050px;margin:0 auto 60px auto;font-size:18px}
.logobloc ul{display:grid;gap:10px;grid-template-columns:repeat(6,1fr);max-width:1000px;margin:0 auto}
.logobloc li{display:flex;align-items:center;justify-content:center;min-height:60px;padding:0 10px}
.logobloc ul img{display:block;width:100%;max-height:40px;filter:grayscale();opacity:.8}
.logobloc ul img:hover{filter:initial;opacity:1;transition:all .4s cubic-bezier(.46,0,.07,1)}

.pricingtables{position:relative; padding-bottom: 40px;}

.heading-prc{background:#fff;padding:5px 20px 0 20px;position:sticky!important;top:113px;z-index:999;border:0}
.heading-prc .row{display:flex;align-items:center;justify-content:space-between;gap:5px;border-radius:0 0 15px 15px;background:#fff;padding:0}
.heading-prc .row h2{flex:0 0 350px;font-size:30px;line-height:1.2;font-weight:600}
.heading-prc .row .items{flex-grow:1;display:grid;gap:5px;grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
.heading-prc .row .item{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px 10px;border:2px solid #e1e7ef;background:#fff;border-radius:15px;min-height:119px}
.heading-prc .row .item .outlinebtn{margin-top:10px;font-size:12px;text-align:center;align-self:center;padding:7px 10px;text-decoration:none;font-weight:500;color:#13506c;background:0 0;border-radius:50px;border:2px solid #13506c}
.heading-prc .row .item .outlinebtn:hover{background:#13506c;color:#fff}
.heading-prc .row .item .lightbtn{z-index:2;margin-top:10px;font-size:12px;text-align:center;align-self:center;padding:7px 10px;text-decoration:none;font-weight:500;background:#13506c;color:#fff;border-radius:50px;border:2px solid #13506c}
.heading-prc .row .item .lightbtn:hover{background:0 0;color:#13506c}
.heading-prc .row .item.highlighted{background:#f7f7ff;border:0 solid transparent;background-clip:padding-box;padding:22px 12px}
.heading-prc .row .item.highlighted:after{content:"";position:absolute;inset:1px;border-radius:15px;padding:2px;background:linear-gradient(192deg,#004cff -3.1%,#ffd6c1 51.07%,#eb4786 91.94%);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.heading-prc .row .item .aibtn{font-size:11px; margin-top: 7px; z-index: 2; margin-bottom: -2px;}

.accord {padding-top:0;margin-top:10px; padding-bottom: 0;}
.accord .accordion{border-radius:15px;border:1px solid #e1e7ef;overflow:hidden}
.accord .faqitem{position:relative}
.accord .faqitem .question{position:relative;z-index:2;margin:0;border-bottom:1px solid #e1e7ef;padding:15px 0 15px 40px;width:100%;font-size:20px;font-weight:500;cursor:pointer;display:flex;justify-content:space-between;align-items:flex-end}
.accord .faqitem:last-of-type .question{border-bottom:none}
.accord .faqitem:nth-child(2n) .question{background:#f7f7ff}
.accord .faqitem .answers{width:100%!important;height:0;z-index:-1;position:relative;display:none;-webkit-transition:.3s ease;-moz-transition:.3s ease;-o-transition:.3s ease;transition:.3s ease}
.accord .faqitem:first-of-type .question{border-radius:15px 15px 0 0}
.accord .faqitem .question h4{font-weight:400;font-size:20px;margin-bottom:0;flex:0 0 310px}
.accord .faqitem .question .items{flex-grow:1;display:none;gap:5px;grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
.accord .faqitem .question span.item{display:flex;justify-content:center;text-align:center;font-size:15px;margin-bottom:3px;font-weight:400}
.accord .faqitem .questions:checked~.answers{height:auto;display:block;position:relative;z-index:1}
.accord .faqitem .questions:checked~.question{color:#fff;border-bottom:none;background:#1a04f1;background:linear-gradient(150deg,#1a04f1 14%,#c7326a 90%)}
.accord .faqitem .plus{position:absolute;left:15px;top:calc(50% - 8px);color:var(--primary);z-index:1;line-height:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;-webkit-transition:.3s ease;-moz-transition:.3s ease;-o-transition:.3s ease;transition:.3s ease}
.accord .faqitem .questions:checked~.question .items{display:grid}
.accord .faqitem .plus img{width:16px;height:16px;display:block}
.accord .faqitem .questions:checked~.question .plus{filter:invert();-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}
.accord .faqitem .questions{display:none}
.accord .faqitem .answers .liste{display:flex;justify-content:space-between;align-items:stretch;border-bottom:1px solid #e1e7ef;min-height:50px}
.accord .faqitem .answers p{font-weight:400;font-size:15px;margin-bottom:0;flex:0 0 350px;padding:15px 5px 15px 15px;align-self:center;font-weight:400}
.accord .faqitem .answers .items{flex-grow:1;display:grid;gap:5px;grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
.accord .faqitem .answers span.item{display:flex;justify-content:center;align-items:center;text-align:center;font-size:15px;font-weight:400;padding:10px 0}
.accord .faqitem .answers span.item.highlighted,.accord .faqitem .answers span.item.showme{background:#f7f7ff}
.accord .faqitem .answers span.item img{display:block;width:16px}
.accord .faqitem:last-of-type .answers .liste:last-of-type{border-bottom:initial}


.tarification {padding: 50px 20px 20px 20px;}
.tarification .row {display: flex; flex-direction: column; position: relative; gap: 30px; max-width: 1050px; justify-content: center;}
.tarification .tarifcalculator span.legende {float: right; position: relative; text-align: right; color: #555; font-size: 12px; padding-left: 8px;}
.tarification .tarifcalculator span.legende:before {content: ''; background: #3db992; width: 3px; height: 10px; position: absolute; left: 0; top: 4px;}
.tarification .tarifcalculator article {position: relative; padding: 14px 20px 0 20px; border: 3px solid #F0F9FF; border-radius: 10px; margin-bottom: 15px;}
.tarification .tarifcalculator article label {display: flex; padding: 8px 0 8px 40px; margin-bottom: 8px; position: relative; padding-left: 40px;}
.tarification .tarifcalculator article label:hover {cursor: pointer;}
.tarification .tarifcalculator article input[type="checkbox"] {position: absolute; left: 0; z-index: -1; appearance: none; width: 25px; height: 25px; margin: 0 20px 0 0; border-radius: 5px; border: 2px solid #3db992; flex: 0 0 25px; outline: none;}
.tarification .tarifcalculator article label h2 {font-size: 17px; font-weight: 500;}
.tarification .tarifcalculator article label h2 span {font-weight: 300; color: #777}
.tarification .tarifcalculator article .checkcontent {transition: all .25s ease-in-out; width: 100%;}
.tarification .tarifcalculator article .checkinfo {height: 0; overflow: hidden; font-size: 14px; display: flex; flex-direction: column;}
.tarification .tarifcalculator article .checkinfo ul {margin-bottom: 15px;}
.tarification .tarifcalculator article .checkinfo li {margin-bottom : 8px; padding-left: 30px; background-image: url('img/icon-checkmark.svg'); background-position: 0 3px; background-size:18px 18px; background-repeat:no-repeat; color:#333; }
.tarification .tarifcalculator article .checkinfo h3 {margin-top: 20px; margin-bottom: 25px; font-weight: 500; font-size: 14px; position: relative; padding-left: 30px;}
.tarification .tarifcalculator article .checkinfo h3:before {content: ""; position: absolute; left: 3px; top: calc(50% - 1px); height: 2px; width: 15px; background: #3db992; }
.tarification .tarifcalculator article p {margin-bottom: 15px;}
.tarification .tarifcalculator article p:last-of-type {margin-bottom: 0;}
.tarification .tarifcalculator article strong {background: #3db992; padding: 2px 5px; font-weight: 400; color: #fff;}
.tarification .tarifcalculator label.active > .checkcontent > .checkinfo {height: auto; transition: all .25s ease-in-out; margin-top: 15px; padding-top: 15px; border-top: 1px dashed #eee;}
.tarification .tarifcalculator label.active:before {content: ''; position: absolute; top: 8px; left: 0; height: 25px; width: 25px; background: #3db992; border-radius: 5px;}
.tarification .tarifcalculator label.active:after {content: ''; position: absolute; top: 13px; left: 6px; background: url('img/check.svg'); height: 14px; width: 14px; filter: invert();}
.tarification .tarifcalculator .nestedlabel { margin-top: 30px;}
.tarification .tarifcalculator label .inputdetails {display: grid; gap:0;grid-template-columns:repeat(2,1fr); padding: 20px 0 20px 0; border-radius: 10px 10px 0 0; border: 3px solid #F0F9FF;}
.tarification .tarifcalculator label .inputdetails .inputitem {display: flex; align-items: center; gap: 20px; padding: 0 20px;}
.tarification .tarifcalculator label .inputdetails .inputitem:first-child {border-right: 1px solid #eee;}
.tarification .tarifcalculator label .inputdetails h4 {font-weight: 400; font-size: 13px; color: #666;}
.tarification .tarifcalculator label .inputdetails .inputfield { border:2px solid #eee; border-radius:5px; display:flex; }
.tarification .tarifcalculator label .inputdetails .inputfield .prefix {background:#eee; display:flex; align-items:center; padding:10px; color:#555; font-weight: 400; border-right:2px solid #eee; }
.tarification .tarifcalculator label .inputdetails input { width: 80px; border: 0; padding: 8px; text-align: center;} 
.tarification .tarifcalculator label .inputdetails.offert { border: 3px solid #3db992;}
.tarification .tarifcalculator label .inputdetails.offert .inputfield.budget {border-color :#3db992}
.tarification .tarifcalculator label .inputdetails.offert .inputfield.budget .prefix {background: #3db992; color: #fff; border-right:1px solid #7cd2b7; }
.tarification .tarifcalculator label .inputdetails.offert .inputfield.budget input {background: #3db992; color: #fff; }
.tarification .tarifcalculator label .pricedetails { display: flex; justify-content: space-between; width: 100%; padding: 20px; border-radius: 0 0 10px 10px; border: 3px solid #F0F9FF; background: #F0F9FF;}
.tarification .tarifcalculator label .pricedetails.offert {background: #3db992; color: #fff; border-color: #3db992;}
.tarification .tarifcalculator label .pricedetails .prcgrp {display: flex; font-size: 18px;}
.tarification .tarifcalculator label .pricedetails .prcgrp .price {font-weight: 500; font-size: 28px; line-height: 1.1;}
.tarification .tarifcalculator label .pricedetails .prcgrp sup {line-height: 1.3; }
.tarification .tarifcalculator label .pricedetails .prcgrp small {margin-left: 5px; display: flex; align-items: flex-end; font-size: 14px; color: #777;}
.tarification .tarifcalculator label .pricedetails.offert .prcgrp {display: none;}
.tarification .tarifcalculator label .pricedetails.offert span {width: 100%; text-align: center; font-size: 22px; font-weight: 500;}

.abonnementprice { border-radius: 10px; background: #F0F9FF; padding: 20px;}
.abonnementprice h2 {font-weight: 500; margin-bottom: 20px; font-size: 20px;}
.abonnementprice .pricedetails { display: flex; justify-content: space-between; width: 100%; border: 3px solid #F0F9FF; background: #F0F9FF;}
.abonnementprice .pricedetails .prcgrp {display: flex; font-size: 18px;}
.abonnementprice .pricedetails .prcgrp .price {font-weight: 600; font-size: 36px; line-height: 1.1;}
.abonnementprice .pricedetails .prcgrp sup {line-height: 1.3; }
.abonnementprice .pricedetails .prcgrp small {margin-left: 5px; display: flex; align-items: flex-end; font-size: 14px; color: #777;}

.abonnementinfo {font-size: 13px;}
.abonnementinfo strong {font-weight: 600;}

.disclaimer {font-size: 12px; color: #777;}
.disclaimer strong {font-weight: 500; color: #333;}


.tooltip-container{position:relative;cursor:pointer;border-bottom:1px dotted #999;font-weight:500}
.accord .tooltip-container{border-bottom:initial;font-weight:initial}
.tooltip-container img{display:inline-block;width:15px;margin-left:5px}
.tooltip-container:after{content:attr(data-tooltip);position:absolute;bottom:115%;left:50%;transform:translateX(-50%);background-color:rgba(0,0,0,.85);color:#fff;padding:8px 12px;border-radius:4px;font-size:12px;font-weight:400;text-align:center;box-shadow:0 4px 6px rgba(0,0,0,.15);margin-right:-200px;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;pointer-events:none;z-index:10}
.tooltip-container.active:after,.tooltip-container.active:before,.tooltip-container:hover:after,.tooltip-container:hover:before{opacity:1;visibility:visible}


@media only screen and (max-width:1000px){
.planpricing .toggle span{font-size:13px}
.planpricing .toggle span small{font-size:10px}
.tarifs h1.primarytitle, .blogh2{font-size:36px}
.tarifs .plans .plan article h3{font-size:15px}
.tarifs .plans{flex-direction:column;gap:40px}
.tarifs .plans .plan{width:100%;padding:30px 20px 20px}
.logobloc{padding-bottom:20px}
.logobloc ul{grid-template-columns:repeat(2,1fr)}
.accord .faqitem .questions:checked~.question .items{display:none}
.heading-prc{top:65px}
.heading-prc .row{flex-direction:column;padding-top:40px;padding-bottom:0}
.heading-prc .row h2{flex:initial;font-size:22px;margin-bottom:20px;text-align:center}
.heading-prc .row h2 br{display:none}
.heading-prc .row .items{position:sticky!important;top:0;padding:5px 10px 7px;border:2px solid #e1e7ef;border-radius:10px;display:flex;width:100%;justify-content:space-around;align-items:flex-end;gap:initial}
.heading-prc .row .item{background:0 0;border:none;min-height:initial;padding:5px 10px}
.heading-prc .row .item h3{font-weight:500;font-size:14px}
.heading-prc .row .item a{display:none!important}
.heading-prc .row .item.highlighted{border:none;background:#fdca31;padding:5px 10px;border-radius:10px}
.heading-prc .row .item.highlighted:after{display:none}
.heading-prc .row .item.togg:hover{cursor:pointer}
.accord .faqitem .question{position:relative!important}
.accord .faqitem .answers p{flex:0 0 60%;font-size:14px}
.accord .faqitem .answers span.item{display:none;font-size:14px}
.accord .faqitem .answers span.item.highlighted{display:flex}
.accord .faqitem .answers span.item.showme{display:flex!important}
}

@media only screen and (max-width:768px){
.tarifs{padding-top:130px}
.tarifs h1.primarytitle, .blogh2{font-size:22px}
.planpricing .sourcesimg img{margin:0 3px}
.pricingtables {padding-bottom: 0;}
}

@media only screen and (max-width:600px){
.heading-prc .row .items{justify-content:center;gap:5px}
.heading-prc .row .item,.heading-prc .row .item.highlighted{padding:5px 8px}
}



/* ==========================================================================
   hero
   ========================================================================== */
.hero { min-height: 560px; padding-bottom: 20px;}
.hero .row {display: flex;}
.herocontent, .herovid {flex: 0 0 50%; display: flex; flex-direction: column; justify-content: center;}
.herocontent {flex: 0 0 50%; padding-right: 40px;}
.herocontent h1 { font-size:46px; font-weight:700; line-height:1.2; color:var(--primary); margin-bottom:30px; }
.herocontent h1 br {display: none;}
.herocontent p { font-weight:500; margin-bottom:30px; font-size:16px }
.herocontent button, .herocontent a {align-self: flex-start; padding: 10px 40px !important;}
.herovid iframe {width: 100%;}
.herobtn {display: flex; gap: 10px;}
.hero video {width: 100%; max-width: 600px;}

/* ==========================================================================
   Home Featured brands
   ========================================================================== */
.homefeatured { padding: 120px 20px; position: relative;}
.homefeatured h1 {text-align: center; font-size: 35px; margin-bottom: 20px; color: var(--primary);}
.homefeatured h1 span {color: var(--secondary);}
.homefeatured p { text-align:center; font-weight:500; font-size: 16px; margin:0 auto 60px auto; }
.homefeatured ul {display: grid; gap: 40px; grid-template-columns: repeat(6, 1fr);}
.homefeatured li {display: flex; align-items: center; justify-content: center; min-height: 60px;}
.homefeatured ul a {display: contents;}
.homefeatured ul img {aspect-ratio: 12/3; object-fit: contain; opacity: 0.4; filter: grayscale(); transition: all .4s cubic-bezier(0.46, 0, 0.07, 1);}
.homefeatured ul img:hover {filter: initial; opacity: 1; transition: all .4s cubic-bezier(0.46, 0, 0.07, 1);}

/* ==========================================================================
   home Content
   ========================================================================== */
.homecontent {}
.homecontent .row {display: flex; align-items:}
.homecontent .row > figure {flex: 0 0 45%; display: flex; padding: 0 30px; justify-content: center;} 
.homecontent .row > figure img {display: block;  width: 100%; max-width: 100%}
.homecontent .row > article {flex: 0 0 55%;}
.homecontent .row article h1 { font-size:40px; color: var(--primary); line-height:1.2; font-weight:700; margin-bottom:50px; }
.homecontent .row article ul {}
.homecontent .row article li {font-weight: 400; font-size: 17px; margin-bottom: 15px; padding-left: 35px; background: url('img/checkbadge.svg')  no-repeat; background-size: 20px; background-position: 3px 3px}
.homecontent .row article  p {font-size: 18px; max-width: 520px; margin-bottom: 40px;}

/* ==========================================================================
   Scrollable sec home
   ========================================================================== */
.scrollsec {padding: 0px; position: relative;}
.scrollsec .row {  display: flex; min-height: 550px; position: relative; overflow: hidden; max-width: initial;}
.scrollsec .row .scrollablcontent .dude {}
.scrollsec .row .scrollablcontent {display: flex;}
.scrollsec .row .scrollablcontent figure {  display:flex; justify-content:flex-end; align-items: flex-end; padding-top:40px; flex:0 0 500px }
.scrollsec .row .scrollablcontent figure img {max-height: 400px; max-width: 360px; position: sticky; bottom:0;}
.scrollbloc { position: absolute; z-index: 2; width: calc(100% + 20px); height:550px; overflow-y:scroll; right:-20px; }
.scrollablcontent { width: 100%; padding-top: 135px; max-width:1200px; margin:0 auto; position: relative;  }
.scrollbloc article {padding: 0 0 100px 0; padding-left:30px; position: relative; font-size: 16px;}
.scrollbloc article:before {content:""; width: 15px; height: 15px; background: var(--secondary); position: absolute; left: 0px; top: 5px; border-radius: 20px;} 
.scrollbloc article h2 {font-weight: 600; font-size: 22px; line-height: 1.2; color: var(--primary); margin-bottom: 20px;}

/* ==========================================================================
   Key Number 
   ========================================================================== */
.keynumber {}
.keynumber h1 {font-size: 38px; font-weight: 700; color: var(--primary);  text-align: center; margin-bottom: 80px;}
.keypoints {display: grid; gap: 40px; grid-template-columns: repeat(5, 1fr); margin-bottom: 70px;}
.keypoints .key { text-align:center; opacity:0.4;  text-transform: uppercase;}
.keypoints .key:hover {cursor: pointer;}
.keypoints .slick-current .key {opacity: 1;}
.keypoints .key h2 {font-size: 12px;}
.keypoints .key p {font-weight: 700; font-size: 70px; color: var(--primary); line-height: 1.3;}
.keypoints .key span {display: block; width: 100%; font-weight: 700; font-size: 13px}
.keypoints .key small {font-weight: 600; font-size: 20px;}
.keyslide {padding: 0 60px; position: relative;}
.keyslide .slide { text-align: center; margin: 0 auto; display: flex !important; align-items: center; justify-content: center;}
.keyslide .slide .client-info { flex: 0 0 360px; padding: 0 30px; display:flex; justify-content:center; flex-direction:column; }
.keyslide .slide .client-info > img {max-width: 160px; max-height: 50px; width: auto; height: 50px; display: block; align-self: center;}
.keyslide .slide p {font-weight: 400; max-width:960px;font-size: 16px;}
.keyslide .slide h3 {color: var(--primary); margin-bottom: 5px; color: #2980A8;}
.keyslide .slide a.linkpoint {align-self: center;  margin-top: 30px; }


/* ==========================================================================
   Secteurs
   ========================================================================== */
.secteurs {}
.secteurs h1 { text-align:center; color:var(--primary); font-size:36px; font-weight:700; margin-bottom:60px; }
.seclist {display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr);}
.secteur a { text-decoration: none; padding: 40px 18px; height: 100%; display:flex; flex-direction:column; justify-content:space-even; align-items:center; background:#fff; 
border-radius:10px; border: 1px solid #eee;}
.secteur a > img { height:70px; width:auto; margin-bottom:20px; }
.secteur h2 { font-size:16px; font-weight:700; color:#222; margin-bottom:15px; }
.secteur p { text-align:center; color:#999; margin-bottom:20px; font-weight:500; }
.secteur span.linkpoint {font-weight: 700; margin-top: auto;}
.secteur a:hover {background: var(--secondary); border-color: var(--secondary);}
/*.secteur a:hover img {filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(1deg) brightness(108%) contrast(101%);}*/
.secteur a:hover .linkpoint {color: var(--primary);}
.secteur a:hover h2 {color: var(--primary);}
.secteur a:hover p {color: #fff;}
.secteur a:hover .linkpoint img {margin: 0 0 0 15px;}

/* ==========================================================================
   Marketing Tools
   ========================================================================== */
.marketingtools { padding: 120px 20px; position: relative;}
.marketingtools h1 { color: var(--primary); font-weight: 700; text-align: center; font-size: 36px; max-width: 750px; margin: 0 auto 30px auto; line-height: 1.3;}
.marketingtools h1 span {color: var(--secondary);}
.marketingtools p { text-align:center; font-weight:400; max-width:1050px; margin:0 auto 60px auto; font-size:18px }
.marketingtools ul {display: grid; gap: 10px; grid-template-columns: repeat(5, 1fr); max-width: 900px; margin: 0 auto;}
.marketingtools li {display: flex; align-items: center; justify-content: center; min-height: 60px;}
.marketingtools ul img {max-height: 60px;}

/* ==========================================================================
 Blog
   ========================================================================== */
.homeblog {}
.homeblog h1 { text-align:center; color:var(--primary); font-size:42px; font-weight:400; max-width:960px; line-height: 1.3; margin:0 auto 60px auto; }
.homeblog h1 span {position: relative; font-weight: 700; letter-spacing: -1px; line-height: 0.9;padding-right: 10px; display: inline-block;}
.homeblog h1 span:after {content: ""; position: absolute; right: -3px; bottom: 4px; height: 10px; width: 10px; border-radius: 5px; background: var(--secondary);}
div.blog {display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr);}
div.blog article {}
div.blog article a {display: block; overflow: hidden; height: 100%; text-decoration: none; background: #fff; border-radius: 10px; border: 1px solid #f9f9f9;}
div.blog article figure {aspect-ratio: 16/9; overflow: hidden;}
div.blog article figure img {transition: all .4s cubic-bezier(0.46, 0, 0.07, 1);}
div.blog article .info { padding:20px 25px 25px; }
div.blog article .meta {display: flex; justify-content: space-between; margin-bottom: 15px;}
div.blog article .meta .cat {color: var(--primary)}
div.blog article .meta .date {color: #999;}
div.blog article h2 {color: #000; font-size: 22px; line-height: 1.3; margin-bottom: 15px;}
div.blog article p { color:#999; margin-bottom: 15px; }
div.blog article .linkpoint {margin-top: auto; color: var(--primary);}
div.blog article a:hover h2 {color: var(--primary)}
div.blog article a:hover .linkpoint img {margin: 0 0 0 15px;}
div.blog article a:hover img {transform: scale(1.1); transition: all .4s cubic-bezier(0.46, 0, 0.07, 1);}

.archcat {background: #f0f9ff; padding: 150px 20px 30px 20px !important; }
.archcat article {display: flex; justify-content: space-between; gap: 40px; align-items: center;}
.archcat h1 {margin-bottom: 0px;}
.blogarch {padding: 80px 20px 0 20px;}

.authorinfo {display: flex; gap: 40px;}
.authorinfo figure {flex: 0 0 170px;}
.authorinfo figure img {display: block; width: 170px; height: auto; border-radius:50%; margin:0 auto; }
.authorinfo article {display: flex; flex-direction: column;}
.authorinfo article h1 {position: relative; padding-bottom: 10px; margin-bottom: 15px;}
.authorinfo article h1:after {content:""; position: absolute; bottom: 0; left: 0; width: 50px; height: 6px; background: var(--secondary);}
.authorinfo article .fonction { margin-bottom:20px; }
.authorinfo article a { align-self: flex-start; display: flex; align-items: center; text-decoration: none; font-weight: 500; gap: 5px;}
.authorinfo article a span {}
.authorinfo article a svg {width: 36px;}
.authorpageh2 {text-align: center; color: var(--primary); font-size: 32px; margin-bottom: 40px;}


.blogarchive .blogliste {display: grid; gap: 42px; grid-template-columns: repeat(3, 1fr);}
.blogarchive .blogliste .item { height: 100%; display: flex; flex-direction: column; background:#fff; border-right:1px solid #eaebec;  border-radius: 10px; overflow: hidden; height:100%;
-webkit-box-shadow: 0px 0px 150px 0px rgba(19, 80, 108,0.15);
-moz-box-shadow: 0px 0px 15px 0px rgba(19, 80, 108,0.15);
box-shadow: 0px 0px 15px 0px rgba(19, 80, 108,0.15);}
.blogarchive .blogliste .item a {display: block;text-decoration: none; flex-direction:column; }
.blogarchive .blogliste .item p a {display: inline-block; }
.blogarchive .blogliste .item .cover {position: relative; overflow: hidden; aspect-ratio: 16/9;}
.blogarchive .blogliste .item .cover img {display: block; width: 100%; height: 100%; object-fit: cover; transition: all .2s ease-in;}
.blogarchive .blogliste .item:hover .cover img {transform: scale(1.1); transition: all .2s ease-in;}
.blogarchive .blogliste .item .cover span {position: absolute; left: 10px; top: 10px; background: #fff; border-radius: 5px; padding: 5px 10px; font-size: 12px; -webkit-box-shadow: 0px 0px 10px 0px rgba(19, 80, 108,0.2);
-moz-box-shadow: 0px 0px 10px 0px rgba(19, 80, 108,0.2);
box-shadow: 0px 0px 10px 0px rgba(19, 80, 108,0.2);}
.blogarchive .blogliste .item h3 {font-weight: 600;}
.blogarchive .blogliste .item a:hover h3{color: #000;}
.blogarchive .blogliste .item article {padding: 20px; display: flex; flex-direction: column; flex-grow: 1;} 
.blogarchive .blogliste .item a:hover {color: var(--primary);}
.blogarchive .blogliste .item p {color: #444; font-size: 15px;} 
.blogarchive .blogliste .item a .linkpoint {margin-top: auto;} 
.blogarchive .blogliste .item:hover .linkpoint img {margin: 0 0 0 15px; transition: all .4s cubic-bezier(0.46, 0, 0.07, 1);} 
.blogarchive .blogliste .item .bmeta {height: 100%; display: flex; flex-direction: column; gap: 15px;}
.blogarchive .blogliste .item a.cat {color: var(--primary); background:#EBF4FA; border: 1px solid #d6ebf9; padding: 4px 12px; display: inline-block; font-size: 12px; align-self: flex-start; border-radius: 30px;}
.blogarchive .blogliste .item a.cat:hover {color: #fff; background: var(--primary);}
.blogarchive .blogliste .item article .post-categories { margin-bottom: 15px; color: #999; display: flex; flex-wrap: wrap; gap: 5px;}

.blogsearch {position: relative; width: 100%; max-width: 600px; background: #fff; padding: 5px 5px 5px 15px; margin: 0 auto; border-radius: 30px; display: flex; align-self: baseline;
-webkit-box-shadow: 0px 0px 150px 0px rgba(19, 80, 108,0.15);
-moz-box-shadow: 0px 0px 15px 0px rgba(19, 80, 108,0.15);
box-shadow: 0px 0px 15px 0px rgba(19, 80, 108,0.15);}
.archcat .blogsearch { margin:0; }
.blogsearch button {background:var(--primary); border-radius:30px; height:auto; padding:5px 12px; }
.blogsearch button:hover {background: #c1d9ea; padding:5px 20px}
.blogsearch button img {display: block;height: 20px; width: auto;}
.blogsearch input {border: 0; flex: 1; height: 45px; width: inherit;}
.blogsearch input::placeholder { color: #999; font-size: 14px}

#help-search-suggestions {position: absolute; padding: 0 10px 10px 10px; width: calc(100% - 60px); z-index: 1000; top: 50px;}
.suggestion-items { display: flex; flex-direction: column; max-height: 300px; overflow-y: auto; background: #fff; border-radius: 5px;
  -webkit-box-shadow: 0px 0px 150px 0px rgba(19, 80, 108,0.15);
-moz-box-shadow: 0px 0px 15px 0px rgba(19, 80, 108,0.15);
box-shadow: 0px 0px 15px 0px rgba(19, 80, 108,0.15);}
.suggestion-items a { text-decoration: none; color: #000; font-size: 13px; padding: 10px 15px; border-bottom: 1px solid #eee;}
.suggestion-items a:last-child {border-bottom: 0;}
.suggestion-items a:hover { background-color: #f6f6f6;}


.relatedarticles {padding: 40px 20px 0 20px;}
.relatedarticles h2 {margin-bottom:30px; font-size:32px; }

.pagination { display: flex;justify-content: center;margin-top: 60px;}
.pagination div {background: #f0f9ff; padding: 10px; border-radius: 10px; font-size: 16px;}
.pagination a, .pagination .page-numbers { margin: 0 5px; padding: 0;  text-decoration: none; color: #333; font-weight: 500; }
.pagination .prev, .pagination .next { color: var(--primary);}
.pagination a:hover {color: #1f5f7c;}
.pagination .current, .pagination .prev, .pagination .next {color: #1f5f7c;font-weight: 600;}
.pagination .prev {margin-right: 40px;}
.pagination .next {margin-left: 40px;}
.pagination .disabled {opacity: 0.5;}

.catwidget {padding: 40px 20px; background: #f0f9ff;}
.catwidget .row {display: grid; gap: 25px; grid-template-columns: repeat(3, 1fr);}
.catwidget .row .item { background: #fff; border-radius: 10px; border: 1px solid #eaebec; overflow: hidden; -webkit-box-shadow: 0px 0px 150px 0px rgba(19, 80, 108,0.05);
-moz-box-shadow: 0px 0px 15px 0px rgba(19, 80, 108,0.05);
box-shadow: 0px 0px 15px 0px rgba(19, 80, 108,0.05);}
.catwidget .row .item a {display: flex; text-decoration: none; color: #000; height: 100%;}
.catwidget .row .item div {display: flex; justify-content: center; flex-direction: column; padding: 15px 20px;}
.catwidget .row .item h2 {font-size: 16px; font-weight:600; }
.catwidget .row .item p {margin-bottom: 0; font-size: 14px; color: #555;}
.catwidget .row .item .icon {flex: 0 0 100px; border-right:1px solid #eaebec; display:flex; justify-content:center; align-items:center; transition: all .4s cubic-bezier(0.46, 0, 0.07, 1); }
.catwidget .row .item .icon img {width: 32px; transition: all .4s cubic-bezier(0.46, 0, 0.07, 1);}
.catwidget .row .item a:hover .icon {background: var(--primary); border-right:2px solid var(--primary); transition: all .4s cubic-bezier(0.46, 0, 0.07, 1); }
.catwidget .row .item a:hover .icon img {filter: invert(); transition: all .4s cubic-bezier(0.46, 0, 0.07, 1); width: 40px;}
.catwidget .row .item a:hover h2 {color: var(--primary);}


.catwidget.catwidgethelp {background: transparent; padding: 40px 20px 0 20px;}
.catwidget.catwidgethelp .row { grid-template-columns: repeat(2, 1fr);}
.catwidget.catwidgethelp .row .item div {width: calc(100% - 100px);}
.catwidget.catwidgethelp .row .item h2 {font-size: 16px; margin-bottom: 10px; font-weight:600; }
.catwidget.catwidgethelp .row .item p {width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.catwidget.catwidgethelp .row .item small {margin-top: 10px;}


.terms {padding: 40px 20px 0px 20px;}
.terms .row {max-width: 960px;}
.terms .term {background: #fff; margin-top: 20px; padding: 20px 25px 20px 25px; border-radius: 10px; border: 1px solid #eaebec; overflow: hidden; -webkit-box-shadow: 0px 0px 150px 0px rgba(19, 80, 108,0.05);
-moz-box-shadow: 0px 0px 15px 0px rgba(19, 80, 108,0.05);
box-shadow: 0px 0px 15px 0px rgba(19, 80, 108,0.05);}
.terms h1 {font-size: 28px;}
.terms .term h2 {font-weight: 600; font-size: 20px;padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #eee;}
.terms .term h3 { margin-bottom: 10px; padding-bottom: 5px; font-weight: 600; padding-left: 10px;  color: var(--primary); position: relative; font-size: 16px;}
.terms .term h3:after {content: ""; width: 40px; height: 1px; border-bottom: 1px dashed #d6ebf9; position: absolute; left: 10px; bottom: 0; }
.terms .term a { display: block; padding: 10px 40px 10px 10px; color:#000; font-weight:300; text-decoration:none; 
  background-image: url('img/arrowlineright.svg'); background-repeat:no-repeat; background-position:right 10px center; background-size: 10px 10px; }
.terms .term a:hover {background-color: #F0F9FF; border-radius: 10px;}
.terms .term .souscat { margin-top:15px; background: #F9FCFE;  border-radius: 10px; padding: 10px; }

.articlehelp .row {max-width: 960px; padding-bottom: 0; flex-direction: column; gap: 0 !important}
.articlehelp .row h1 {font-size: 30px; margin-bottom: 20px !important;}
.articlehelp .helpmeta {padding-bottom: 20px; border-bottom: 1px dashed #eee; margin-bottom: 25px; margin-bottom: 20px;}
.breadcrumb {margin-bottom: 30px; font-size: 13px; }
.breadcrumb a {text-decoration: none;}
.breadcrumb span {color: #999;}

.helpsearch {padding: 40px 20px 0 20px;}
.helpsearch .row {flex-direction: column; max-width: 960px;}
.helpsearch .row h1 {margin-bottom: 30px; font-size: 20px; font-weight: 600; color: var(--primary);}
.helpsearch .row .itemresult { padding: 20px; border: 1px solid #eaebec; border-radius: 10px; margin-bottom: 20px;
-webkit-box-shadow: 0px 0px 150px 0px rgba(19, 80, 108,0.05);
-moz-box-shadow: 0px 0px 15px 0px rgba(19, 80, 108,0.05);
box-shadow: 0px 0px 15px 0px rgba(19, 80, 108,0.05); }
.helpsearch .row .itemresult a {text-decoration: none; color: #000;}
.helpsearch .row .itemresult a:hover {color: var(--primary);}
.helpsearch .row .itemresult h2 { font-weight:500; font-size:18px; margin-bottom:10px; }
.helpsearch .row .itemresult p {font-weight: 300; font-size: 15px;}


.visual__CTA {width: 100%; padding: 30px 30px 35px 30px; margin: 35px 0 45px 0;  border-radius: 10px; overflow: hidden; position: relative; box-shadow: 0 .7em 0 #c8ebe1;
    background-image: linear-gradient(90deg, rgb(98 24 165 / 7%) 0, rgb(24 164 165 / 7%) 80%); }
.visual__CTA:before { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-image: url('img/cta-visual.png'); background-size: 250px; background-repeat: no-repeat; background-position: right bottom;}
.visual__CTA a {display: block; color: #000; text-decoration:none; } 
.visual__CTA a:hover {color: #000;}
.visual__CTA .post_CTA {width: calc(100% - 250px);}
.visual__CTA .post_CTA h3 {font-size: 28px; margin-bottom: 20px; font-weight: 700; letter-spacing: .5px; }
.visual__CTA .post_CTA p {}
.visual__CTA span { display: inline-block; color: #fff; font-weight: 600; padding: 15px 30px; font-size: 14px; text-transform: uppercase; border-radius: 50px; text-align: center; line-height: 1;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    background-color: #3db992;
    background: linear-gradient(90deg, #32c985 0, #3db992) #1bd172;
}

.visual__CTA span:hover {color: #fff; background: linear-gradient(90deg, #3db992 0, #32c985) #1bd172;}


.breadcrumbs {margin-bottom: 10px; color: var(--primary); font-size: 13px; text-align: left;}
.breadcrumbs a {text-decoration: none; font-size: 13px; }
.breadcrumbs .breadcrumb_last {opacity: 0.5; color: #000;}

/* Blog Post */
.postmeta {padding: 150px 20px 0 20px; }
.postmeta .row {display: grid; gap: 60px; grid-template-columns: 1fr 1fr; padding-bottom: 10px;}
.postmeta .posthead {display: flex; flex-direction: column; justify-content: center;}
.postmeta .postthumb {display: flex; flex-direction: column; justify-content: center;}
.postmeta .postthumb img {height: auto; width: 100%; border-radius: 10px;}
.postmeta h1 {color: var(--primary); font-size: 36px; font-weight: 700; margin-bottom: 15px; line-height: 1.5;}
.postmeta .catlist {color: #999;}
.postmeta .catlist ul {margin-bottom: 25px;}
.postmeta .catlist ul li {display: flex; gap: 5px; flex-wrap: wrap;}
.postmeta .catlist a {color: var(--primary); text-decoration: none; padding: 4px 12px; border-radius:30px; background:#EBF4FA; font-size:12px; border: 1px solid #d6ebf9; }
.postmeta .catlist a:hover {color: #fff; background: var(--primary);}
.postmeta p {color: var(--primary);}
.postmeta .moreinfo {display: flex; gap: 20px; align-items: center; padding-bottom: 5px; font-size: 14px; font-weight: 300; color: var(--primary); justify-content: space-between;  border-top: 1px solid #d6ebf9; padding-top: 20px;}
.postmeta .moreinfo .avatar {display: flex; gap: 5px; align-items: center;}
.postmeta .moreinfo .avatar img {display: block; width: 50px; height: 50px; border-radius: 32px; border: 2px solid #ffffff00; margin-right: 10px; -webkit-box-shadow: 0px 0px 10px 0px rgba(19, 80, 108,0.2);
-moz-box-shadow: 0px 0px 10px 0px rgba(19, 80, 108,0.2);
box-shadow: 0px 0px 10px 0px rgba(19, 80, 108,0.2);}
.postmeta .moreinfo .avatar a {display: block; text-decoration: none; font-weight: 400;}
.postmeta .moreinfo .avatar div {display: flex; gap: 5px;}
.postmeta .moreinfo .namedate {padding-left: 15px; display: flex; gap: 5px;}
.postmeta .moreinfo strong {font-weight: 400; display: block;}

.blogcontent {padding: 50px 20px;}
.blogcontent .row {display: flex; position: relative; gap: 60px;}
.blogcontent .postaudio {width: 100%; margin-bottom: 20px;}
.blogcontent aside {flex: 0 0 360px; position: sticky; top: 160px; align-self: flex-start;}
.blogcontent .summary {border: 4px solid #F0F9FF; padding: 20px; border-radius: 10px; margin-bottom: 25px;}
.blogcontent .summary > span {font-size: 22px; font-weight: 600; color: var(--primary); margin-bottom: 15px; padding-bottom: 12px; border-bottom: 1px dashed #eee; line-height: 1; display: block;}
.blogcontent .summary ol {list-style: none; margin: 0; padding: 0 7px 0 0; max-height: calc(100vh - 510px); overflow-y: scroll; min-height: 130px;}
.blogcontent .summary ol::-webkit-scrollbar-track{ border-radius: 6px;background-color: transparent;}
.blogcontent .summary ol::-webkit-scrollbar{ width: 8px; background-color: transparent;}
.blogcontent .summary ol::-webkit-scrollbar-thumb{border-radius: 6px; background-color: #e6f4fe;}

.blogcontent .summary li {margin-bottom: 15px; font-size: 15px; position: relative; padding-left: 15px;}
.blogcontent .summary li:before {content: ''; position: absolute; top: 10px; left: 0; width: 5px; height: 5px; border-radius: 10px; background: #eee; transition: all .4s cubic-bezier(0.46, 0, 0.07, 1);}
.blogcontent .summary li:last-child {margin-bottom: 0;}
.blogcontent .summary li a {text-decoration: none; transition: all .4s cubic-bezier(0.46, 0, 0.07, 1);}
.blogcontent .summary li.active a, .blogcontent .summary li a:hover { color:#000; transition: all .4s cubic-bezier(0.46, 0, 0.07, 1); }
.blogcontent .summary li.active:before { background: #000; transition: all .4s cubic-bezier(0.46, 0, 0.07, 1);}
.blogcontent .sidecta {border: 3px solid #caebe1; background: #f0fbf7; padding: 20px 20px 30px 20px; border-radius: 10px; color: #333; display: flex; flex-direction: column; align-items: center;}
.blogcontent .sidecta img {display: block; max-width: 100px; margin-bottom: 15px;}
.blogcontent .sidecta p {margin-bottom: 20px; font-weight: 600; text-align: center;}

.blogcontent .blogpost a {color: var(--primary);}
.blogcontent .blogpost a:hover {color: var(--secondary);}
.blogcontent .blogpost a.wp-block-button__link {color: var(--primary);background-color: var(--secondary);}
.blogcontent .blogpost a.wp-block-button__link * {color: inherit;}
.blogcontent .blogpost a.wp-block-button__link:hover {color: #fff;background-color: var(--primary);}
.blogcontent .blogpost p, .blogcontent .blogpost ol, .blogcontent .blogpost ul, .blogcontent .blogpost figure, .blogcontent .blogpost pre{ margin-bottom:30px; }
.blogcontent .blogpost p {font-size: 18px; line-height: 30px; color: #333;}
.blogcontent .blogpost h1, .blogcontent .blogpost h2, .blogcontent .blogpost h3, .blogcontent .blogpost h4, .blogcontent .blogpost h5, .blogcontent .blogpost h6 
{margin: 0; font-weight: 600; color: #000; margin-bottom: 30px; line-height: 1.3;}
.blogcontent .blogpost h2 {font-size: 30px;}
.blogcontent .blogpost h3 {font-size: 26px;}
.blogcontent .blogpost h4 {font-size: 20px}
.blogcontent .blogpost h5, .blogcontent .blogpost h6 {font-size: 18px; font-weight: 500;}
.blogcontent .blogpost ol, .blogcontent .blogpost ul {font-size: 18px; line-height: 30px; color: #333; padding-left: 20px;}
.blogcontent .blogpost ol li ol, .blogcontent .blogpost ul li ul {margin-top: 20px;}
.blogcontent .blogpost ul li, .blogcontent .blogpost ol li { margin-bottom:5px; position: relative; padding-left:20px; line-height: 30px; font-size:18px; }
.blogcontent .blogpost ul li:before {content: ''; position: absolute; top: 12px; left: 0; width: 6px; height: 6px; border-radius: 5px; background: #000;}
.blogcontent .blogpost strong {font-weight: 600; color: #000;}
.blogcontent .blogpost blockquote {background: var(--secondary); padding: 40px 40px 40px 90px; border-radius: 10px; border-left: 5px solid #e7af07; margin: 45px 0; font-style: italic; position: relative;}
.blogcontent .blogpost blockquote:before {content: ''; position: absolute; top: 38px; left: 22px; width: 50px; height: 50px; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI0LjIuMywgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA3OTAuNiA1NjQuNyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNzkwLjYgNTY0Ljc7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojRTZCOTVGO30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTczNC4xLDBINTY0LjdMNDUxLjgsMjI1Ljl2MzM4LjhoMzM4LjhWMjI1LjlINjIxLjJMNzM0LjEsMHogTTI4Mi40LDBIMTEyLjlMMCwyMjUuOXYzMzguOGgzMzguOFYyMjUuOUgxNjkuNAoJTDI4Mi40LDB6Ii8+Cjwvc3ZnPgo=); background-size: 50px 50px; background-repeat: no-repeat; filter: invert(); opacity: 0.1;} 
.blogcontent .blogpost blockquote cite:before {content: '\2014 \00A0';}
.blogcontent .blogpost blockquote p, .blogcontent .blogpost blockquote strong { font-weight:600; }
.blogcontent .blogpost blockquote p:last-of-type {margin-bottom: 0;}
.blogcontent .blogpost blockquote cite {margin-top: 30px;}
.blogcontent .blogpost table {text-align: center; font-size: 14px;}
.blogcontent .blogpost tr { background-color: #fafafa}
.blogcontent .blogpost tr:nth-of-type(even) { background-color: #fff}
.blogcontent .blogpost tr:first-of-type th:first-of-type:empty {border-color: #fff #eee #eee #fff;visibility: hidden}
.blogcontent .blogpost th, .blogcontent .blogpost td { border: 1px solid #eee; padding: 10px; vertical-align: top}
.blogcontent .blogpost th {background-color: #f5f5f5}
.blogcontent .blogpost video {border-radius: 10px;}
.blogcontent .blogpost .wp-element-caption {font-size: 13px; text-align: center; color: #555; letter-spacing: 0.5px;}
iframe {width: 100%;}
.is-type-video iframe {aspect-ratio: 16 / 9; height: 100%; overflow: hidden; border-radius: 10px;}




/* ==========================================================================
   Call To Action bloc
   ========================================================================== */
.calltoaction {}
.actionbloc {background: var(--primary); padding: 60px 20px; border-radius: 20px; text-align: center; color: #fff;}
.actionbloc h1 { font-size: 36px; margin-bottom:30px; }
.actionbloc p { max-width:900px; line-height: 1.6; font-size: 16px; opacity: 0.7; margin:0 auto 40px auto; }
.actionbloc button, .actionbloc a {font-size: 18px; padding: 15px 40px}
.actionbloc button:hover, .actionbloc a:hover {color: var(--secondary);}

/* ==========================================================================
   Accordion
   ========================================================================== */
.faq {}
.smartbloc.faq .faqtitle {text-align: center; font-weight: 700; font-size: 32px; color: var(--primary); position: relative; padding-bottom: 30px; margin-bottom: 40px;}
.smartbloc.faq .faqtitle:after {content: ''; width: 80px; height: 2px; background: #eee; position: absolute; bottom: 0; left: calc(50% - 40px);}

.faq .faqitem {position: relative; padding: 10px 0px 10px 0;}
.faq .faqitem .question {position: relative;z-index: 2; margin: 0;padding: 10px 30px 10px 10px; display: block; width:100%; font-size: 20px; font-weight: 500; cursor: pointer;}
.faq .faqitem .answers { padding: 0px 15px; margin: 5px 0; width:100%!important; height: 0; overflow: hidden; z-index: -1; position: relative; opacity: 0; 
   -webkit-transition: .3s ease;
  -moz-transition: .3s ease;
  -o-transition: .3s ease;
  transition: .3s ease;}
  .faq .faqitem .question h2 {font-weight: 500; font-size: 20px; margin-bottom: 0; color: #000;}
.faq .faqitem .questions:checked ~ .answers{height: auto;opacity: 1;padding: 15px; position: relative;z-index: 1;}
.faq .faqitem .plus { position: absolute; right: 0;color: var(--primary); margin-left: 10px; z-index: 1; font-size: 36px; line-height: 100%;
  -webkit-user-select: none;    
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-transition: .3s ease;
  -moz-transition: .3s ease;
  -o-transition: .3s ease;
  transition: .3s ease;}
.faq .faqitem .questions:checked ~ .plus {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);}
.faq .faqitem .questions {display: none;}
.faq .faqitem .answers p {margin-bottom: 20px; font-size: 16px;}
.faq .faqitem .answers p:last-child {margin-bottom: 0;}
.faq .faqitem .answers h1 {margin-bottom: 20px;}
.faq .faqitem .answers h2 {margin-bottom: 20px;}
.faq .faqitem .answers h3 {margin-bottom: 20px; color: #000;}
.faq .faqitem .answers h4 {margin-bottom: 20px;}
.faq .faqitem .answers ul {padding-left: 20px; margin-bottom: 20px; list-style: disc;}
.faq .faqitem .answers ul li {margin-bottom: 10px;}

lottie-player {width: 100% !important; height: auto !important;}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {padding: 60px 20px 100px 20px;}

.footer .language-switch {position: relative;display: inline-block; padding: 20px 0;}
.footer .current-lang {display: flex;align-items: center;cursor: pointer; padding-right: 20px; background-image: url('img/langarrow.svg'); background-repeat: no-repeat;
background-size: 10px; background-position: right center;}
.footer .current-lang img {width: 20px;height: 20px;margin-right: 10px;}
.footer .lang-name {font-size: 14px;font-weight: bold; line-height: 0}
.footer .language-list { position: absolute; bottom: calc(100% - 10px); left: 0; display: none; padding: 10px; list-style: none; background-color: #fff;
border-radius: 5px; z-index: 200;}
.footer .language-list li {display: block;width: max-content; margin: 5px 0;}
.footer .language-list a { display: flex; align-items: center; padding: 5px; width: 100%; text-decoration: none; color: #333; transition: background-color 0.2s ease;}
.footer .language-list a:hover {color: var(--primary);}
.footer .language-list img { width: 20px; height: 20px; margin-right: 10px;}


.footer nav {width: 100%;}
.footer nav > ul {width: 100%; display: grid; gap: 60px; grid-template-columns: 1fr 1fr 1fr 1fr;}
.footer nav ul li {}
.footer nav h3 {font-size: 14px;text-transform: uppercase;font-weight: 600;margin-bottom: 20px;}
.footer nav ul li > a {font-weight: 600; text-transform: uppercase; color: #000; text-decoration: none;}
.footer nav ul li ul {margin-top: 20px;}
.footer nav ul li ul li {display: block; font-size: 13px; margin-bottom: 10px;}
.footer nav ul li ul li a {font-size: 13px; text-decoration: none; font-weight: 400; text-transform: initial;}
.footer nav ul li ul li a:hover {text-decoration: underline;}

.footer .footbottom {display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 15px; border-top: 1px solid rgba(255, 255, 255, 0.2);}
.footer .footbottom span { margin-right: 50px; font-weight: 600;}
.footer .footbottom .socialicons {display: flex; gap: 10px;}
.footer .footbottom .socialicons img {display: block; width: 24px;}
.footer .footbottom .socialicons img:hover {filter: invert();}

.widgetpolicy {width: 100%; display: flex; justify-content: space-between; align-items: center;}
.cppolicy {display: flex; align-items: center; gap: 15px; font-size: 14px;}
.cpcertif {display: flex; align-items: center; gap: 15px;}
.cpcertif img {display: block; max-height: 50px;}
.cpwidget {display: flex;}


#back-to-top {display: none; position: fixed; bottom: 78px; right: 20px; width: 48px; height: 48px; justify-content: center; align-items: center; background: var(--primary);border-radius: 50%;cursor: pointer; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); z-index: 9000; transition: all .4s cubic-bezier(0.46, 0, 0.07, 1);}
#back-to-top svg {color: #fff;width: 25px;height: 25px;display: block;}
#back-to-top:hover {transition: transform 250ms cubic-bezier(0.33, 0, 0, 1);scale: (1.1);}

/* ==========================================================================
   Popup
   ========================================================================== */
.flashinfo {width: 360px; padding: 20px 20px;z-index: 1000; color: #000; background: #fff; border-left: 5px solid var(--secondary); border-right: 5px solid var(--secondary); position: fixed; right: -110vw; bottom: 20px; border-radius: 10px;
transition: all .4s cubic-bezier(0.46, 0, 0.07, 1); -webkit-box-shadow: 0px 0px 28px 0px rgba(19, 80, 108,0.2);
-moz-box-shadow: 0px 0px 28px 0px rgba(19, 80, 108,0.2);
box-shadow: 0px 0px 28px 0px rgba(19, 80, 108,0.2);}
.flashinfo.show {left: 20px; transition: all .4s cubic-bezier(0.46, 0, 0.07, 1);}

.flashinfo button.closeflashinfo {position: absolute; padding: 0; top: -10px; width: 40px; height: 40px; right: -20px; background-color: var(--primary); padding: 10px;}
.flashinfo button.closeflashinfo span {width: 20px; height: 20px; filter: invert(); display: block; background: url('img/close.svg');}
.flashinfo .news {display: flex; flex-direction: column;}
.flashinfo .news header { margin-bottom:20px;}
.flashinfo .flashtag {font-weight:600;}
.flashinfo .flashtag svg {height: 22px; width: 25px; vertical-align:middle;}
.flashinfo p { margin-bottom:20px; font-weight:500; }
.flashinfo a.yellow {align-self: flex-end;}
.flashinfo a.yellow:hover {}
.flashinfo span.badge {background: #2fc581; color:#fff; margin-right: 10px; font-size: 13px; padding:2px 10px; border-radius:5px; display:inline-block; }
.progressflash {position: absolute ; bottom: 0; left: 0; width: 100%; background: #eaf6fe; height: 5px; border-radius: 0 0 10px 10px;}
.flashinfo .dateevent {display: flex; margin-bottom: 7px; gap: 5px; font-size: 14px;}
.flashinfo .dateevent img {width: 20px; height: 20px;}


.termsfeed-com---palette-dark.termsfeed-com---nb {background-color: var(--primary) !important; color: #fff !important;border-radius: 15px 0 0 0 !important; padding: 1.7rem !important;}
.termsfeed-com---nb .cc-nb-main-container {padding: 0 !important;}
.termsfeed-com---palette-dark.termsfeed-com---nb .cc-nb-title {font-size: 20px !important; color: #fff !important;}
.termsfeed-com---palette-dark.termsfeed-com---nb .cc-nb-title, .termsfeed-com---palette-dark.termsfeed-com---nb .cc-nb-text-container {color: #fff !important; }
.termsfeed-com---palette-dark.termsfeed-com---nb button.cc-nb-okagree {background: var(--secondary) !important; color: #000 !important;}
.termsfeed-com---palette-dark.termsfeed-com---nb button.cc-nb-reject {background: #eaeaea !important;}
.termsfeed-com---palette-dark.termsfeed-com---nb button:hover {background: #fff !important; color: #000 !important;}
.termsfeed-com---palette-dark.termsfeed-com---nb button:focus {box-shadow: 0 0 0 2px var(--secondary) !important;}
.termsfeed-com---palette-dark.termsfeed-com---nb button {border-radius: 30px !important;}


/* ==========================================================================
   Plugins
   ========================================================================== */

/* Slick Slider */
.slick-list,.slick-slider,.slick-track{position:relative;display:block}.slick-slider{line-height: 0; box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;
user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.slick-list{overflow:hidden;margin:0;padding:0}.slick-list:focus{outline:0}.slick-list.dragging{cursor:pointer;cursor:hand}
.slick-slider .slick-list,.slick-slider .slick-track{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);
 -o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.slick-track{top:0;left:0;margin-left:auto;margin-right:auto}
.slick-track:after,.slick-track:before{display:table;content:''}.slick-track:after{clear:both}.slick-loading .slick-slide,.slick-loading .slick-track{visibility:hidden}
.slick-slide{display:none;float:left;height:100%;min-height:1px}[dir=rtl] .slick-slide{float:right}.slick-initialized .slick-slide,.slick-slide img{display:block}
.slick-arrow.slick-hidden,.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}
.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}

.keyslide, .keypoints, .carrousel, .carrouselarticle, .slider, .seclist {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s ease, visibility 0.5s ease; 
}

.keyslide.slick-initialized,
.keypoints.slick-initialized,
.carrousel.slick-initialized,
.carrouselarticle.slick-initialized,
.slider.slick-initialized,
.seclist.slick-initialized {
    visibility: visible;
    opacity: 1;
}

.slick-arrow {position: absolute; top: calc(50% - 16px); z-index: 999; width: 32px; height: 32px; text-indent: -9999px; background-repeat: none; background-size: 32px;}
.slick-arrow.slick-prev {left: 0; background-image: url('img/arrowlineleft.svg')}
.slick-arrow.slick-next {right: 0; background-image: url('img/arrowlineright.svg')}

.carrousel .slick-list, .carrousel .slick-slider, .carrousel .slick-track {display: flex;}
.carrousel .slick-slide {display: flex; justify-content: center; align-items: center; margin: 0 10px; background: #EDF7FF; border: 1px solid #E6ECF5; border-radius: 5px; padding: 10px;}
& .slick-list { flex: 1; }

.slick-dots {position: absolute; bottom: 0; left: 0; display: flex !important; justify-content: center; width: 100%;}
.slick-dots li {padding: 0 5px;}
.slick-dots li button {text-indent: -9999px; width: 14px; height: 14px; padding: 0; border-radius: 50%; border: 2px solid var(--primary);}
.slick-dots li.slick-active button {background-color: var(--primary);}

.carrouselarticle .slick-dots {bottom: -40px;}
.carrouselarticle .slick-track{display: flex !important;}
.carrouselarticle .slick-slide{height: inherit !important;}
.carrouselarticle .slick-slide > div {height: 100%;}
.carrouselarticle .slick-arrow { top: -90px;  width: 42px; height: 42px; background-repeat: no-repeat; background-size: 42px;}
.carrouselarticle .slick-arrow.slick-prev {right: 60px; left: inherit; background-image: url('img/arrowleft.svg')}
.carrouselarticle .slick-arrow.slick-next {right: 15px; background-image: url('img/arrowright.svg')}
.carrouselarticle .slick-arrow:hover {opacity: 0.4;}
.cs .slider .slick-dots {bottom: -25px;}


#burger-menu {display: none; cursor: pointer;height: 27px; width: 27px; overflow: visible; position: relative;
    z-index:1010; position: fixed; top:27px; right: 20px;}
#burger-menu span,
#burger-menu span:before,
#burger-menu span:after {
  background: var(--primary);display: block;height: 4px;opacity: 1;position: absolute;transition: 0.3s ease-in-out;}
#burger-menu span:before,
#burger-menu span:after {content: "";}
#burger-menu span {right: 0px;top: 13px;width: 27px;}
#burger-menu span:before {left: 0px;top: -10px;width: 16px;}
#burger-menu span:after {left: 0px;top: 10px;width: 20px;}
#burger-menu.close { top: 12px; }
#burger-menu.close span {transform: rotate(-45deg); width: 27px; background: #fff;}
#burger-menu.close span:before {top: 0px;transform: rotate(90deg);width: 27px; background: #fff;}
#burger-menu.close span:after {top: 0px; left:0; transform: rotate(90deg); opacity:0; width:0; }


[data-star] {text-align:left;font-style:normal;display:inline-block;position: relative;unicode-bidi: bidi-override;}
[data-star]::before { display:block;content: '★★★★★';color: #eee;}
[data-star]::after {white-space:nowrap;position:absolute;top:0;left:0;content: '★★★★★';width: 0;color: #ff8c00;overflow:hidden;height:100%;}
[data-star^="0.1"]::after,[data-star^=".1"]::after{width:2%}
[data-star^="0.2"]::after,[data-star^=".2"]::after{width:4%}
[data-star^="0.3"]::after,[data-star^=".3"]::after{width:6%}
[data-star^="0.4"]::after,[data-star^=".4"]::after{width:8%}
[data-star^="0.5"]::after,[data-star^=".5"]::after{width:10%}
[data-star^="0.6"]::after,[data-star^=".6"]::after{width:12%}
[data-star^="0.7"]::after,[data-star^=".7"]::after{width:14%}
[data-star^="0.8"]::after,[data-star^=".8"]::after{width:16%}
[data-star^="0.9"]::after,[data-star^=".9"]::after{width:18%}
[data-star^="1"]::after{width:20%}
[data-star^="1.1"]::after{width:22%}
[data-star^="1.2"]::after{width:24%}
[data-star^="1.3"]::after{width:26%}
[data-star^="1.4"]::after{width:28%}
[data-star^="1.5"]::after{width:30%}
[data-star^="1.6"]::after{width:32%}
[data-star^="1.7"]::after{width:34%}
[data-star^="1.8"]::after{width:36%}
[data-star^="1.9"]::after{width:38%}
[data-star^="2"]::after{width:40%}
[data-star^="2.1"]::after{width:42%}
[data-star^="2.2"]::after{width:44%}
[data-star^="2.3"]::after{width:46%}
[data-star^="2.4"]::after{width:48%}
[data-star^="2.5"]::after{width:50%}
[data-star^="2.6"]::after{width:52%}
[data-star^="2.7"]::after{width:54%}
[data-star^="2.8"]::after{width:56%}
[data-star^="2.9"]::after{width:58%}
[data-star^="3"]::after{width:60%}
[data-star^="3.1"]::after{width:62%}
[data-star^="3.2"]::after{width:64%}
[data-star^="3.3"]::after{width:66%}
[data-star^="3.4"]::after{width:68%}
[data-star^="3.5"]::after{width:70%}
[data-star^="3.6"]::after{width:72%}
[data-star^="3.7"]::after{width:74%}
[data-star^="3.8"]::after{width:76%}
[data-star^="3.9"]::after{width:78%}
[data-star^="4"]::after{width:80%}
[data-star^="4.1"]::after{width:82%}
[data-star^="4.2"]::after{width:84%}
[data-star^="4.3"]::after{width:86%}
[data-star^="4.4"]::after{width:88%}
[data-star^="4.5"]::after{width:90%}
[data-star^="4.6"]::after{width:92%}
[data-star^="4.7"]::after{width:94%}
[data-star^="4.8"]::after{width:96%}
[data-star^="4.9"]::after{width:98%}
[data-star^="5"]::after{width:100%}


/* WPML lang switcher */
.footitem {font-size: 13px;font-weight: 400;color: #222}
.footer .lang .wpml-ls-statics-shortcode_actions { position: relative; display: inline-block; background-color: transparent}
.footer .lang .wpml-ls-flag { width: 20px; height: 20px; margin-right: 10px}
.footer .lang .wpml-ls-legacy-dropdown .wpml-ls-flag+span { margin: 0; font-size: 14px; font-weight: 700; line-height: 0}
.footer .lang .wpml-ls-legacy-dropdown .wpml-ls-sub-menu { bottom: calc(100% - 10px); top: auto; padding: 10px; background-color: #fff; border: 0; border-radius: 5px; z-index: 200; box-shadow: 0 0 0 1px rgba(0,0,0,.05)}
.footer .lang .wpml-ls-legacy-dropdown .wpml-ls-item { display: block; width: max-content; margin: 5px 0}
.footer .lang .wpml-ls-legacy-dropdown>ul>li { margin: 0 !important; padding: 20px 0 !important}
.footer .lang .wpml-ls-legacy-dropdown a { padding: 0; border: 0}
.footer .lang .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle:after { border: 4px solid transparent; border-bottom: 5px solid; right: 0; top: 4px}
.footer .lang .wpml-ls-statics-shortcode_actions .wpml-ls-current-language>a { padding: 0 20px 0 0; background-color: transparent !important}
.footer .lang .wpml-ls-legacy-dropdown a:hover { background-color: transparent !important; text-decoration: none !important}
.footer .lang .wpml-ls-statics-shortcode_actions a { display: flex; align-items: center; padding: 5px; width: 100%; text-decoration: none; color: #333; transition: background-color .2s ease}
.footer .lang .wpml-ls-statics-shortcode_actions a:hover { color: var(--primary) !important; text-decoration: underline !important}


.footer #avs-widget-note .cust-widgfooter-rating-box #cust-widgfooterStarSelector, .footer #cust-widget-note .cust-widgfooter-rating-box #cust-widgfooterStarSelector {z-index: 999 !important;}




/* ==========================================================================
   Responsive
   ========================================================================== */

@media only screen and (max-width: 1023px) { 
.header .row {padding: 0 20px;}
.headerplace { left: 175px;}
.header nav > ul > li {font-size: 13px; padding: 5px 5px}
.header nav > ul > li a {padding: 5px 8px 10px 8px}
.header nav > ul > li.menu-item-has-children a {background-position: calc(100% - 10px) 9px;}
.header .logo img {width: 100px;}
.header button.full.yellow {padding: 5px 15px; font-size: 13px;}
.headcontent .headbottom {gap: 10px;}
.headcontent {padding-left: 5px;}
.herocontent {flex: 0 0 55%;}
.herovid {flex: 0 0 45%;}
.herobtn {flex-direction: column;}
.herobtn button {width: 100%;}
.herocontent h1, .homecontent .row article h1, .homeblog h1 {font-size: 36px;}
.footer .row .footitem:first-child {max-width: inherit;}
.footer .row {gap: 30px;}
.herocontent button, .herocontent a { min-width:270px; text-align:center; }
.herocontent button:first-of-type, .herocontent a:first-of-type {margin-bottom: 10px;}
.blogcontent aside {flex: 0 0 280px;}
.kitmedia .row {gap:30px;}
.postmeta h1 {font-size: 30px;}

}

@media only screen and (max-width: 900px) {
 .headcontent { position: fixed; top: -120vh; transition: all .4s cubic-bezier(0.46, 0, 0.07, 1);}
 .headerplace { left: 195px; bottom: initial; top: 35px;}
 .header .logo {height: 100px;}
 .header .logo img {width: 120px;}
 .header:after {height: 65px}
 .header:before {height: 20px;}
 #burger-menu {display: block;}
.header nav ul.sub-menu > li {width: 100%;}
 .homefeatured h1, .secteurs h1, .herocontent h1, .homecontent .row article h1, .keynumber h1, .marketingtools h1,
 .homeblog h1, .actionbloc h1, .faq h1 {font-size: 27px;}
 .homefeatured p, .marketingtools p, .blog article p, .actionbloc p {font-weight: 400; font-size: 14px;}
 .homefeatured ul {grid-template-columns: repeat(3, 1fr); gap: 20px;}
 .homefeatured ul img {max-width: 160px;}
 .homecontent .row {flex-direction: column;}
 .homecontent .row article p {max-width: 100%;}
 lottie-player {max-width: 400px; margin: 0 auto 30px auto !important; }
 .scrollablcontent {padding-right: 0;}
 .scrollsec .row > figure {display: none;}
 .blog article h2{font-size: 16px;}
 .scrollbloc { padding: 0 20px;}
 .headcontent .headtop form .suggestion ul {max-height: calc(100vh - 254px);overflow: hidden;overflow-y: scroll;}
 .smartbloc .grid1, .smartbloc .grid2, .smartbloc .grid3, .smartbloc .grid4, .smartbloc .grid5, .smartbloc .grid6, .smartbloc .grid1cs, .smartbloc .grid2cs, .smartbloc .grid3cs {flex-direction: column; gap: 40px;}
 .smartbloc .grid2 > *:first-child, .smartbloc .grid2 > *:last-child, .smartbloc .grid5 > *:first-child, .smartbloc .grid5 > *:last-child, .smartbloc .grid6 > *:first-child, .smartbloc .grid6 > *:last-child, .smartbloc .grid1 > *:first-child, .smartbloc .grid1 > *:last-child, .smartbloc .grid4 > *:first-child, .smartbloc .grid4 > *:last-child, .smartbloc .grid3 > *:first-child, .smartbloc .grid3 > *:last-child { flex: initial; width: 100%; }
  .smartbloc .grid2cs > *:first-child, .smartbloc .grid2cs > *:last-child, .smartbloc .grid1cs > *:first-child, .smartbloc .grid1cs > *:last-child, .smartbloc .grid3cs > *:first-child, .smartbloc .grid3cs > *:last-child { flex: initial; width: 100%; }
 .smartbloc .order2 > *:first-child {order: initial;}
 .footer nav > ul {grid-template-columns: 1fr 1fr; gap: 40px;}
 .blogarchive .blogliste, .catwidget .row {grid-template-columns: repeat(2, 1fr); gap: 30px;}
 .catwidget.catwidgethelp .row {grid-template-columns: 1fr !important;}
 .blogcontent aside {flex: 0 0 260px;}
 .smartbloc.quote.footquote .row {grid-template-columns: 1fr; gap: 30px}
 .smartbloc.quote.footquote article {justify-content: center; text-align: center;}
 .smartbloc.quote.footquote .btnbloc {justify-content: center !important}
.postmeta .moreinfo {font-size: 11px;}
.smartbloc h1 {font-size: 27px; font-weight: 700; text-align: center;}
.smartbloc h2 {font-size: 27px; font-weight: 700; text-align: center}
.smartbloc h3 {font-size: 22px; font-weight: 600;}
.smartbloc h4 {font-size: 16px; font-weight: 700;}
.faq .faqitem .question h2 {text-align: initial;}
.checklistsec .row {flex-direction: column;}
.checklistsec aside {flex: initial; width: 100%; top: initial; bottom: 0; border: 0; left: 0; position: fixed; z-index: 2;}
.checklistsec aside .sidecta {padding: 18px 10px;}
.visual__CTA:before {display: none;}
.visual__CTA .post_CTA {width: 100%; text-align: center;}
.kitmedia .row {gap:40px;grid-template-columns:repeat(2,1fr);}
.cppolicy {flex-direction: column;}
.smartbloc:first-of-type article {display: flex; flex-direction: column; align-items: center;}
.smartbloc:first-of-type article * {text-align: center;}
.smartbloc .btnbloc {justify-content: center !important; flex-direction: column; align-items: center; width: fit-content; margin: 0 auto;}
.smartbloc .btnbloc a {width: 100%;}
.smartbloc .smallblocs .btnbloc {margin: inherit;}
.smartbloc .smallblocs .btnbloc a { padding:5px 25px; }
.carrouselarticle .slick-arrow { top: -80px;}
.smartbloc .smallblocs .item.lb img {min-width: 110px;}
.blogsearch input, .suggestion-items * {text-align: left !important;}
.authorinfo article h1:after { left: calc(50% - 20px); height: 4px; width: 40px;}
.authorinfo article a {align-self: initial;}
.tarification .tarifcalculator label .inputdetails {grid-template-columns: 1fr; gap: 10px;}
.tarification .tarifcalculator label .inputdetails .inputitem:first-child {border: none;}
.tarification .tarifcalculator label .inputdetails .inputitem {justify-content: space-between;}
.tarification .tarifcalculator label .pricedetails {flex-direction: column; gap: 30px;}
.tarification .tarifcalculator label .pricedetails .prcgrp, .abonnementprice .pricedetails .prcgrp {align-self: flex-end;}
.abonnementprice .pricedetails {flex-direction: column; gap: 40px; }
}

@media only screen and (max-width: 768px) {
.marketingtools {padding: 50px 20px 80px 20px;}
.homefeatured {padding: 100px 20px 80px 20px}
.homecontent {padding: 20px 20px 20px 20px;}
.homecontent.pt130 {padding: 100px 20px 50px 20px;}
.keynumber {padding: 50px 20px; }
.herocontent h1 br {display: block;}
.homefeatured h1, .secteurs h1, .herocontent h1, .homecontent .row article h1, .keynumber h1, .marketingtools h1, .homeblog h1, .actionbloc h1, .faq h1 {font-size: 22px; line-height: 1.3; text-align: center;}
.hero {min-height: 500px; padding-top: 130px !important;}
.hero .row {flex-direction: column; justify-content: center;}
.herocontent button, .herocontent a {width: 100%;}
.herocontent, .herovid {flex: initial; align-items: center;}
.herocontent p {text-align: center;}
.herocontent h1 {text-align: center;}
.marketingtools ul {grid-template-columns: repeat(2, 1fr);}
.marketingtools li { border-radius: 10px; border: 1px solid #f6f6f6;padding: 5px;}
.blog {grid-template-columns: 1fr;}
.footitem {border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding-bottom: 20px;}
.footer .row {grid-template-columns: 1fr;}
.footer {padding: 50px 20px;}
.footbottom a {margin-left: 10px;}
.herovid { display: none; margin-bottom: 40px; order: -1;}
.hero {padding-bottom: 20px;}
.keyslide .slide {flex-direction: column; gap: 30px}
.keyslide .slide .client-info {flex: 0 0 100%;}
.keyslide .slide p, .homecontent .row article p {font-size: 14px;}
.seclist .slick-slide {padding: 0 10px;}
.secteur p {font-weight: 400; font-size: 13px;}
.secteur a {min-height: 330px;}
.keynumber .slick-arrow.slick-prev, .keynumber  .slick-arrow.slick-next {top: 0;}
.homefeatured ul img {aspect-ratio: initial; max-width: 100%;}
.scrollbloc {overflow:initial; right: 0; padding: 0 20px; height: initial; position: initial;}
.scrollablcontent {padding-top: 120px; flex-direction: column;}
.scrollsec .row .scrollablcontent figure {flex: 0 0 100%; align-items: center; justify-content: center;}
.scrollsec .row .scrollablcontent figure img {max-width: 90%;}
.scrollbloc article h2 {font-size: 20px}
.scrollbloc article {font-size: 14px; padding: 0 0 75px 30px;}
.homeblog, .calltoaction {padding: 50px 20px 50px 20px;}
.herocontent {padding-right: 0;}
.homecontent .row {gap: 0; display: block;}
.homecontent .row article {margin-bottom: 40px;}
.homecontent .row article li {font-size: 15px;}
.keyslide {padding: 0;}
.faq {padding: 0px 20px 50px 20px}
.faq .faqitem .question h2 {font-size: 18px; color: #000; line-height: 1.7;}
.smartbloc.faq .faqtitle {font-size: 24px;}
.faq .faqitem .plus {top: 13px;}
.faq .faqitem {padding: 10px 20px 0 0;}
.firstsection {padding-top: 80px;}
.faq .faqitem .questions:checked ~ .answers {font-size: 15px; padding: 15px 0;}
.faq .faqitem .question {padding: 5px 20px 10px 0;}
.actionbloc button, .actionbloc a {font-size: 16px;}
.flashinfo.show {max-width: calc(100% - 40px); left: 20px !important;}
.footer .row .footitem:first-child {order:4}
.footer .row .lang .footitem {border-bottom: none; padding-bottom: 0;}
.smartbloc .smallblocs.threeblocs, .smartbloc .smallblocs.fourblocs {grid-template-columns: 1fr 1fr;}
.footer nav > ul {grid-template-columns: 1fr; gap: 20px;}
.footer nav > ul > li { border-bottom: 1px solid rgba(255, 255, 255, 0.2);padding-bottom: 20px;}
.footer .footbottom span {margin-right: 20px; font-size: 13px;}
.footer .footbottom .socialicons {gap: 0;}
 .blogarchive .blogliste, .catwidget .row {grid-template-columns: 1fr;}
 .blogcontent .row {flex-direction: column; gap: 35px;}
 .blogcontent aside {position: initial; flex: initial; width: 100%;}
 .relatedarticles {padding-top:0; }
 .single-post .header {position: fixed;}
.smartbloc {padding: 50px 20px;}
.blogarch {padding-top: 50px;}
.smartbloc h1 {font-size: 24px; font-weight: 700;}
.smartbloc h2 {font-size: 24px; font-weight: 700;}
.smartbloc h3 {font-size: 18px; font-weight: 600;}
.smartbloc h4 {font-size: 16px; font-weight: 700;}
.smartbloc article p, .smartbloc article li {font-size: 15px;}
.smartbloc .smallblocs h3 {margin-bottom: 15px; font-size: 18px;}
.smartbloc .smallblocs p {font-size: 14px;}
.smartbloc:first-of-type {padding-top: 130px !important;}
.smartbloc .btnbloc {padding-top: 10px;}
.postmeta {padding: 130px 20px 0 20px; }
.breadcrumbs {display: none;}
.catwidget .row {gap: 10px;}
.archcat article {flex-direction: column; gap: 25px;}
.blogsearch button {min-width: 40px;}
.checklistsec .checklist article p {font-size: 14px;}
.smartbloc .includforms .flex-container {flex-direction: column;}
.smartbloc .includforms ._form_element {width: 100%;}
.archcat .blogsearch {margin: 0 auto;}
.kitmedia .row {gap:25px}
.kitmedia .row .item .cover .downloadbtn {display: flex; background: transparent; top: initial; bottom: 5px; flex-direction: row; height: inherit; justify-content: space-between; padding: 0 5px;}
.kitmedia .row .item .cover .downloadbtn a {background: var(--primary); border-color: var(--primary); width: 80px; text-align: center; padding: 4px 10px;}
.kitmedia .row .item .cover .downloadbtn a:hover {background: transparent; color: var(--primary);}
.widgetpolicy {flex-direction: column;}
.cpwidget {flex-direction: column; gap: 10px; margin-bottom: 15px;}
.blogcontent .blogpost p, .blogcontent .blogpost li, .blogcontent .blogpost h5, .blogcontent .blogpost h6 {font-size: 16px;}
.blogcontent .blogpost h2 {font-size: 24px;}
.blogcontent .blogpost h3, .blogcontent .blogpost h3 {font-size: 20px; }
.blogcontent .blogpost h4 {font-size: 18px; }
.blogcontent .blogpost blockquote {padding: 30px 30px 30px 60px;}
.blogcontent .blogpost blockquote:before {top: 20px; left: 2px;}
.smartbloc.quote.footquote .row .btnbloc a {width: 100%;}
.postmeta h1 {font-size: 24px;}
.blogcontent .sidecta {display: none;}
.blogcontent .sidecta.showmobile {display: flex !important;}
.footer .footbottom {padding-top: 0; border-top: none;}
.smartbloc .includforms .flex-container {gap: initial;}
.carrouselarticle .slick-arrow { top: inherit; bottom: -56px; }
.carrouselarticle .slick-arrow.slick-prev {right: inherit; left: calc(50% - 41px);}
.carrouselarticle .slick-arrow.slick-next {right: calc(50% - 41px);}
.carrouselarticle .slick-dots {display: none !important;}
.carrouselarticle {margin-bottom: 40px;}
.postmeta .row {gap: 40px; grid-template-columns: 1fr; padding-bottom: 25px;}
.smartbloc .smallblocs .item {flex-direction: column;}
.smartbloc .smallblocs .item.lb img {min-width: 160px;}
.postmeta .catlist a {font-size: 12px;}
.terms .term {padding: 20px 15px; }
.authorinfo {flex-direction: column;}
.authorpageh2 {font-size: 24px; }
.smartbloc.quote.footquote article.minimal {flex-direction: column;}
.smartbloc.quote.footquote article.minimal h2 {font-size: 23px;}
}

@media only screen and (max-width: 600px) {
.homefeatured ul {grid-template-columns: 1fr 1fr; column-gap: 50px;}
.kitmedia .row {gap:30px;grid-template-columns:1fr;}
.pagination div {width: 100%; display: flex;  justify-content: center;}
.pagination .prev {margin-right: 10px;}
.pagination .next {margin-left: 10px;}
}

@media only screen and (max-width: 560px) {
.smartbloc .smallblocs.fourblocs, .smartbloc .smallblocs.twoblocs, .smartbloc .smallblocs.threeblocs {grid-template-columns: 1fr;}
}

@media only screen and (max-width: 460px) {
.postmeta .moreinfo .namedate {border: none; padding: 0;}
.postmeta .moreinfo .namedate:last-child {display: none;}
.postmeta .moreinfo .avatar img { margin-right: 5px;}
.postmeta h1 {margin-bottom: 20px;}
.postmeta .row {gap: 30px;}
}