/*------------------------------------------
++   	            General 	       	  ++
/*-----------------------------------------*/
@font-face{font-family:'Avant Garde';src:url('../font/avantgb/AvantGardeBold.eot');src:url('../font/avantgb/AvantGardeBold.eot?#iefix')format('embedded-opentype'),url('../font/avantgb/AvantGardeBold.woff2') format('woff2'),url('../font/avantgb/AvantGardeBold.woff')format('woff'),url('../font/avantgb/AvantGardeBold.ttf')format('truetype'),url('../font/avantgb/AvantGardeBold.svg#AvantGardeBold')format('svg');font-weight:100;font-style:normal;font-display:swap}
@font-face{font-family:'TradeGothicBold';src:url('../font/trade/TradeGothicLT-Bold.woff2')format('woff2'),url('../font/trade/TradeGothicLT-Bold.woff')format('woff');font-weight:bold;font-style:normal;font-display:swap}
@font-face{font-family:'TradeGothicLT';src:url('../font/trade/TradeGothicLT.woff2')format('woff2'),url('../font/trade/TradeGothicLT.woff')format('woff');font-weight:normal;font-style:normal;font-display:swap}

*{padding:0;margin:0;box-sizing:border-box;outline:none!important;scroll-behavior:smooth}
li{list-style:none}
a{text-decoration:none;transition:700ms cubic-bezier(0.17,0.67,0,1.01);color:#000}
body{font-family:'TradeGothicLT';font-size:17px;color:#101010;font-weight:400;scroll-margin-top:100px}
h1,h2,h3,h2 a,.title{font-family:'Avant Garde'!important}
h1{font-size:24pt;margin-bottom:15px}
hr.line{background-color:#14EE23 ;display:block;border:none}
strong{font-weight:500;font-family:'Roboto'}
::selection{background-color:#14EE23;color:#fff}
:target{scroll-margin-top:70px}
.center{text-align:center}
.column{display:flex;flex-direction:column;flex-basis:100%;flex:1}
.d-flex{display:flex}
.d-flexCB{display:flex;align-items:center;justify-content:space-between}
.dz-preview{display:none}
.hidden,.mobile{display:none}
.left{text-align:left}
.lowercase{text-transform:lowercase}
.material-icons-outlined{font-family:'Material Icons'}
.relative{position:relative}
.right{text-align:right}
.page #content{margin:150px auto 100px;max-width:1240px;padding:0 20px}
.row{display:flex;flex-direction:row;flex-wrap: wrap;width:100%}
.show{display:block}
.subtitle{font-family:'TradeGothicLT';color:#ACACAC;font-size:14px;font-weight:700;text-transform:uppercase;line-height:17px;display:block;margin-bottom:60px}
.swal2-actions{margin:0 0 25px 0!important}
.swal2-container button:focus-visible{box-shadow:0 0 0 3px #14EE2380!important}
.swal2-html-container{padding:20px!important;color:#101010}
.swal2-popup{padding:0}
.swal2-title{padding-top:5px!important;color:#101010}
.title{display:block;color:#101010;font-size:24pt;font-weight:800;line-height:58px;margin-bottom:20px;text-transform:none}
.uppercase{text-transform:uppercase}
.wrapper{max-width:1240px;margin:auto;padding:0 20px}

/*------------------------------------------
++   	            Header 	        	  ++
/*-----------------------------------------*/
#header .head{transition:.1s all ease-in-out}
#header .wrapper{height:170px;padding-top:40px}
#header .logo img{width:147px;object-fit:contain;transition:.3s all ease-in-out;transform:translateX(-7px)}
#header nav{margin-top:-52px}
#header .head.header-sticky nav{margin-top:0}
#header nav ul:not(.lang-options){display:flex;gap:50px}
#header nav a{font-family:'roboto';font-size:16px;font-weight:600;line-height:16px;letter-spacing:-0.4px;color:#fff;position:relative}
#header nav a:after{content:'';position:absolute;bottom:-8px;left:0;display:block;background-color:#ffffff;width:0;height:2px;transition:700ms cubic-bezier(0.17,0.67,0,1.01)}
#header nav a:hover:after{width:20px;background-color:#14EE23}
#header nav a.active:after{width:20px;background-color:#14EE23}
#header .head{position:fixed;width:100%;top:0;left:0;z-index:999;animation-duration:0.4s;animation-name:header;transition:all 0.4s ease-in-out}
@keyframes header{from{transform:translateY(-100%)}to{transform:translateY(0%)}}
#header:not(.down) .head.header-sticky{transform:translateY(-100%)}
#header .head.header-sticky{background:#000}
#header .head.header-sticky .wrapper{height:70px;margin-top:0;padding-top:0}
#header .head.header-sticky .logo img{width:50px;height:50px;transform:translateX(-2px)}
#menu_mob{display:none}

#header .language-selector{position:relative;display:none}
#header nav a.lang-toggle{font-size:16pt;display:block;padding-top:4px}
#header nav a.lang-option{font-size:16pt}
#header .lang-options{display:none;position:absolute;list-style:none;margin:0;background-color:#333;top:25px;left:-10px;box-shadow:2px 2px 5px #00000025}
#header .lang-options .selected{background-color:#555;color:#fff}
#header .lang-options li:hover{background-color:#555;color:#fff}
#header .language-selector .arrow{margin-left:5px;font-size:12px;position:absolute;top:3px}
#header .lang-options.show{display:block}
#header .lang-options li{padding:7px 10px 3px}
#header nav .language-selector a:after{display:none}
#header .language-selector .arrow img{width:14px;height:14px;transform:translateY(2px)}

/*------------------------------------------
++   			   Footer 				   ++
/*-----------------------------------------*/
#cookiePopup{text-align:left}
#cookiePopup img{float:right;width:47%;max-width:100%}
#cookiePopup span{font-size:14pt;display:block}
#cookiePopup p.h1{font-size:18pt;float:none;font-family:'Avant Garde'!important;color:#000;margin:10px 0 22px}
#cookiePopup p{font-size:12pt;float:left;width:100%;color:#101010;font-weight:400;line-height:26px}
#footer{background-color:#1b1b1b;padding-top:140px;position:relative}
#footer:before{content:'';background-color:#14EE23;height:60px;width:2px;position:absolute;top:-30px;left:50%}
#footer .contact_top{padding-bottom:140px}
#footer .f-social-icons{display:flex;align-items:center}
#footer .f-social-icons a{margin-right:12px;width:38px;height:38px;vertical-align:middle;background-color:rgba(173,173,173,0);border-style:solid;border-width:2px 2px 2px 2px;border-color:#14EE23;border-radius:50%;display:flex;justify-content:center;align-items:center}
#footer .f-social-icons a:hover{transform:translateY(-6px)}
#footer .f-social-icons img{width:18px;filter:invert(1)}
#footer .f-social-icons .linkedin{width:15px;transform:translate(1px,-2px)}
#footer .f-social-icons .facebook{width:24px}
#footer .contact_top .title{color:#fff;margin:0;font-size:22pt;text-align:center;transform:translateX(-74px)}
#footer .contact_top .btn_{font-size:18px;cursor:pointer}
#footer .contact_center{background-color:#161616;padding:40px 0;font-size:17px;font-weight:300}
#footer .contact_center .d-flexCB div{width:50%;text-align:center}
#footer .contact_center .d-flexCB div:nth-child(1){width:500px;margin-right:50px}
#footer .contact_center .title{color:#fff;margin-bottom:5px;font-size:16px;line-height:20px}
#footer .contact_center a{color:#fff;line-height:23px}
#footer .contact_center a:hover{color:#14EE23}
#footer .contact_center p{color:#fff;line-height:22px}
#footer_bottom{font-size:14px;font-weight:normal;line-height:24px;padding:30px 0;background-color:#000000}
#footer_bottom p{color:#747474}
#footer_bottom a,#cookiego{color:#747474;margin-left:22px;font-weight:300}
#footer_bottom a:hover,#cookiego:hover{color:#14EE23}
#cookiego{cursor:pointer}
.whatsapp_Fr,.whatsapp_Vn{position:relative;padding-left:24px}
.whatsapp_Fr::before{content:'';position:absolute;left:0;top:-1px;background:url('../icon/tel-fr.svg');display:inline-block;width:21px;height:21px;background-size:contain;background-repeat:no-repeat}
.whatsapp_Vn::before{content:'';position:absolute;left:0;top:1px;background:url(../icon/tel-vn.svg);display:inline-block;width:18px;height:18px;background-size:contain;background-repeat:no-repeat}
#footer .logo_.d-flexCB img{width:145px;margin-right:22px}
#footer .contact_center .logo_ a{text-decoration:underline}
#footer .contact_center .logo_ a:hover{color:#14EE23}
#footer .contact_center p,#footer .contact_center .logo_ a{font-size:11pt;margin:0 0 15px;color:#ccc}
#footer .contact_center .logo_ p{text-align:left}
#footer .contact_center .infoline{line-height:30px}

/*------------------------------------------
++   	     Home page : Banner 		  ++
/*-----------------------------------------*/
#bannerPush{background:#000;height:454px}
#service_{position:absolute;top:-100px;left:0;width:100%}
.banner{background-color:#000000;background-repeat:no-repeat;background-size:auto 100vh;height:100vh}
.banner.banner1{background-image:url(../img/agence-web-offshore-vietnam.webp)}
.banner.banner2{background-image:url(../img/sous-traitance-creation-site-web-vietnam.webp)}
.banner.banner3{background-image:url(../img/sous-traitance-developpement-web-vietnam.webp)}
.banner .caption{padding:220px 0 175px}
.banner .caption hr.line{width:70px;height:3px}
.banner .caption h1{color:#ffffff;font-size:34pt;font-weight:800;letter-spacing:-1.9px;padding:30px 0}
.bannersub{color:#fff;margin:0 0 40px;font-size:18pt}
.btn_{display:inline-block;position:relative}
.btn_::after{content:'';border:2px solid #14EE23;line-height:59px;width:98%;height:60px;display:inline-block;position:absolute;right:-5px;top:6px}
.btn_ span{position:relative;z-index:1;border:2px solid #14EE23;background-color:#000;line-height:60px;display:inline-block;text-align:center;color:#fff;font-family:'roboto';font-size:12pt;font-weight:500;padding:0 32px;min-width:185px;transition:700ms cubic-bezier(0.17,0.67,0,1.01)}
.btn_ span::before{content:'';position:absolute;z-index:-1;top:0;left:0;width:0%;height:100%;transition-duration:0.6s;transition-timing-function:cubic-bezier(0.17,0.67,0,1.01);background-color:#14EE23}
.btn_ span:hover::before{width:100%}
#bannerPush .service_{z-index:1;padding-bottom:84px;justify-content:center;column-gap:35px}
#bannerPush .service_::after{content:"";display:none;background-color:#14EE23;height:70px;width:calc(32% + 17px);position:absolute;bottom:-20px;right:-19px;z-index:-1}
#bannerPush .item_service{max-width:370px;height:370px;position:relative;z-index:1}
#bannerPush .item_service:nth-child(1)::before{content:'';display:block;position:absolute;width:120px;height:calc(78% - 1px);border:3px solid #14EE23;z-index:-1;left:-3px;top:0;transition:.3s ease-in-out}
#bannerPush .item_service:nth-child(2)::before{content:'';display:block;position:absolute;width:0;height:0;border:0 solid #14EE23;z-index:-1;left:-3px;top:-3px;transition:.3s ease-in-out}
#bannerPush .item_service:nth-child(3)::before{content:'';display:block;position:absolute;width:0;height:0;border:0 solid #14EE23;z-index:-1;top:0;right:-3px;transition:.3s ease-in-out}
#bannerPush .item_service:nth-child(2):hover::before{width:calc(100% - 3px);height:120px;border-width:3px}
#bannerPush .item_service:nth-child(3):hover::before{width:120px;height:calc(78% - 1px);border-width:3px}
#bannerPush .item_service h2{padding-left:55px}
#bannerPush .item_service h2.fix img{width:37px;top:-7px}
#bannerPush .item_service h2.fix{padding-left:50px}
#bannerPush .item_service img{height:46px;height:46px;object-fit:contain;position:absolute;left:0}
#bannerPush .item_service:nth-child(2) img{top:-7px}
#bannerPush .item_service:nth-child(3) img{top:-11px;width:43px}
.item_service div{color:#ffffff;background-color:#1b1b1b;padding:35px 40px 60px 40px;transition:background 0.7s,box-shadow 0.7s}
.item_service h2{font-size:24px;font-weight:900;line-height:1.4em;margin:0 0 5px;position:relative;padding-left:70px}
.item_service h2.fix{padding-left:50px}
.item_service hr.line{width:40px;opacity:0;height:2px;background-color:#fff}
.item_service p{font-size:17px;line-height:26px;max-width:302px;padding-top:25px;letter-spacing:0.5px}
.item_service .material-icons-outlined{font-size:42pt;color:#14EE23;margin-right:10px;position:absolute;left:0;top:0}
.item_service .material-icons-outlined.special{font-size:32pt}

/*------------------------------------------
++   	     Home page : CMS Logos 		  ++
/*-----------------------------------------*/
#logoCMS{padding-top:250px}
#logoCMS .swiper.tools_slider{overflow-x:hidden}
#logoCMS .tools_slider .tool_image{height:150px;display:flex;justify-content:center;align-items:center;padding:0 15px}
#logoCMS .tools_slider img{width:200px;max-height:100%}
#logoCMS .tools_slider .swiper-pagination{padding:0;text-align:center;bottom:0}
#logoCMS .tools_slider .swiper-pagination .swiper-pagination-bullet{width:10px;height:10px;border-color:#888888;background-color:#888888;margin:5px}
#logoCMS .tools_slider .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{border-color:#1d1d1d;background-color:#1d1d1d}
#logoCMS .shopify_image img{width:150px}
#logoCMS .woocommerce_image img{width:80px;margin-bottom:-15px}
#logoCMS .joomla_image img{width:160px}
#logoCMS .wix_image img{width:60px;margin-bottom:-5px}
#logoCMS .symfony_image img{width:160px}
#logoCMS .webflow_image img{width:160px}

/*------------------------------------------
++   	     Home page : Services 		  ++
/*-----------------------------------------*/
#services{padding:70px 0 50px;text-align:center}
#services .service_.d-flexCB{flex-wrap:wrap;box-shadow:5px 5px 15px #00000020}
#services .item_service hr.line{display:none}
#services .item_service{width:33.333333%;height:390px;background-color:#fff;transition:background 0.7s;position:relative}
#services .item_service::after{content:'';display:block;position:absolute;width:0;height:0;border:0 solid #14EE23;border-left-width:0!important;border-top-width:0!important;z-index:1;right:0;bottom:0;transition:.3s ease-in-out}
#services .item_service:hover::after{width:calc(100% - 3px);height:120px;border-width:8px;border:3px solid #14EE23}
#services .item_service div{height:100%;padding-bottom:20px;position:relative}
#services .item_service:first-child div{box-shadow:inherit}
#services .item_service div .voirPlus{opacity:0;position:absolute;right:40px;bottom:20px;z-index:10;transition:.3s ease-in-out;margin:0;font-size:16px}
#services .item_service div .voirPlus::before{content:'';display:inline-block;background:url(../icon/arrowCase.svg);width:25px;height:25px;transform:translate(-5px,7px);transition:.3s ease-in-out;background-size:contain;background-repeat:no-repeat}
#services .item_service:hover div .voirPlus{opacity:1;bottom:40px}
#services .item_service div .voirPlus a:hover{color:#14EE23}
#services .item_service:first-child .material-icons-outlined{color:#14EE23}
#services .item_service:nth-child(odd) div{background-color:#f3f3f3!important}
#services .item_service:nth-child(even) div{background-color:#fff!important}
#services .item_service .material-icons-outlined{position:inherit;margin-right:0}
#services .item_service h2{font-size:20px;color:#101010;margin-top:35px;transition:.3s ease-in-out;padding-left:0}
#services .item_service p{color:#101010;margin:20px 0px 20px 0px;padding:0;font-size:17px;line-height:26px;font-weight:300}
#services .item_service:hover h2{margin-top:15px}
#services .item_service:hover h2{color:#14EE23!important}
#services .item_service img{width:56px;height:auto;display:block;margin:auto;object-fit:contain}
#services .item_service .hosting,#services .item_service .coding{margin-bottom:-8px}
#services .item_service .payment{width:45px;transform:translateY(3px);margin-top:3px}
#services .item_service .graphic{width:48px;transform:translateY(4px);margin-top:3px}
#services .item_service .print,#services .item_service .marketing{margin-bottom:-5px}
#services .item_service .shooting{width:50px}
#services .item_service .motion{width:48px}
#services .item_service .video{width:65px;margin-top:-17px;transform:translateY(12px)}

/*------------------------------------------
++   	     Home page : Projects 		  ++
/*-----------------------------------------*/
#projets{background-color:#101010;padding:70px 0 100px;margin-top:70px;color:#fff}
#projets .title{color:#fff}
#projets .subtitle{margin-bottom:0;font-family:'TradeGothicLT';line-height:26px!important;font-weight:400!important}
#projets .projet_block .subtitle{line-height:0!important}
#projets .filters.d-flexCB{max-width:925px;flex-wrap:wrap;row-gap:15px;justify-content:left}
#projets .filters span{position:relative;cursor:pointer;font-size:11px;letter-spacing:2px;line-height:27px;margin-left:25px;transition:700ms cubic-bezier(0.17,0.67,0,1.01)}
#projets .filters span:hover{color:#14EE23}
#projets .filters span:after{content:'';position:absolute;bottom:0;left:0;display:block;background-color:#ffffff;width:0;height:1px;transition:700ms cubic-bezier(0.17,0.67,0,1.01)}
#projets .filters span.active:after{width:100%;background-color:#14EE23}
#projets hr.line{width:40px;height:2px;margin-bottom:22px}
#projets .projets_list.d-flex{margin-top:80px;column-gap:35px;row-gap:32px;display:grid;grid-template-columns:auto auto auto;justify-content:left;overflow-x:hidden}
#projets .projet_block{position:relative;overflow:hidden;width:376.66px;max-width:100%;height:250px}
#projets .projet_block:nth-child(3){grid-column:3;grid-row:1 / span 2}
#projets .projet_block.show:nth-child(3){grid-column:initial;grid-row:initial}
#projets .projet_block:nth-child(7){grid-column:3;grid-row:3;height:250px}
#projets .projet_block.show:nth-child(7){grid-column:initial;grid-row:initial}
@media screen and (min-width:601px){
#projets .projet_block:not(.show):nth-child(4),#projets .projet_block:not(.show):nth-child(5),#projets .projet_block:not(.show):nth-child(6){margin-top:-28px}
#projets .projet_block.CULTURE:nth-child(2){height:350px}
#projets .projet_block.CULTURE:nth-child(3){height:562px}
#projets .projet_block.DROIT:nth-child(5){height:450px}
#projets .projet_block.DROIT:nth-child(6){height:541px}
#projets .projet_block.E-COMMERCE:nth-child(7){height:420px}
#projets .projet_block.E-COMMERCE:nth-child(8){height:518px}
#projets .projet_block.E-COMMERCE:nth-child(9){height:345px}
#projets .projet_block.E-COMMERCE:nth-child(12){height:250px;margin-top:-175px}
#projets .projet_block.E-COMMERCE:nth-child(10){margin-top:-98px;height:400px}
#projets .projet_block.E-COMMERCE:nth-child(11){height:450px}
#projets .projet_block.EVENTS:nth-child(13){height:550px}
#projets .projet_block.EVENTS:nth-child(14){height:450px}
#projets .projet_block.HÔTELLERIE:nth-child(16){height:275px}
#projets .projet_block.HÔTELLERIE:nth-child(17){height:232px}
#projets .projet_block.HÔTELLERIE:nth-child(18){margin-top:-20px;height:260px}
#projets .projet_block.LUXE:nth-child(19){height:490px}
#projets .projet_block.LUXE:nth-child(20){height:420px}
#projets .projet_block.LUXE:nth-child(21){height:450px}
#projets .projet_block.MÉDICAL:nth-child(23){height:535px}
#projets .projet_block.MÉDICAL:nth-child(24){height:180px}
#projets .projet_block.MÉDICAL:nth-child(25){height:225px;margin-top:-282px}
#projets .projet_block.MÉDICAL:nth-child(26){margin-top:-354px;transform:translateX(411px)}
#projets .projet_block.RESTAURATION:nth-child(27){height:370px}
#projets .projet_block.RESTAURATION:nth-child(28){height:440px}
#projets .projet_block.RESTAURATION:nth-child(29){height:232px}
#projets .projet_block.RESTAURATION:nth-child(30){margin-top:-65px}
#projets .projet_block.RESTAURATION:nth-child(30){margin-top:-69px;height:295px}
#projets .projet_block.RESTAURATION:nth-child(31){margin-top:-206px;transform:translateX(411px)}
#projets .projet_block.SERVICES:nth-child(33){height:275px}
#projets .projet_block.SERVICES:nth-child(34){height:298px}
#projets .projet_block.SERVICES:nth-child(35){margin-top:-52px;height:190px}
#projets .projet_block.SERVICES:nth-child(36){margin-top:-20px;height:230px}
#projets .projet_block.SPORT:nth-child(37){height:280px}
#projets .projet_block.SPORT:nth-child(39){height:575px}
#projets .projet_block.SPORT:nth-child(40){margin-top:-290px;height:220px}
}
#projets .projet_block.EVENTS:nth-child(13) img{object-position:-112px}
#projets .projet_block.RESTAURATION:nth-child(27) img{object-position:center}
#projets .projet_block.RESTAURATION:nth-child(28) img{object-position:2px center}
#projets .projet_block a{display:block;width:100%;height:100%}
#projets .projet_block:before{position:absolute;content:"";left:0;right:0;top:0;bottom:0;z-index:1;background-color:rgba(0,0,0,0.7);opacity:0;transition:700ms cubic-bezier(0.17,0.67,0,1.01)}
#projets .projet_block img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;filter:grayscale(100%);transition:700ms cubic-bezier(0.17,0.67,0,1.01)}
#projets .projet_block .info_Projets{display:flex;align-items:center;justify-content:center;position:absolute;font-size:16pt;color:#333333;font-weight:400;opacity:0;z-index:2;margin:30px 0 0;padding:20px;left:0;right:0;top:0;bottom:0;transition:700ms cubic-bezier(0.17,0.67,0,1.01)}
#projets .projet_block .title{font-size:21px!important}
#projets .projet_block.HÔTELLERIE:nth-child(15) .title{line-height:25px!important}
#projets .projet_block .info_Projets div > span{font-size:10px;letter-spacing:2px;color:#fff;font-weight:500;text-align:center;line-height:normal}
#projets .projet_block:hover:before{opacity:1}
#projets .projet_block:hover img{filter:grayscale(0%);transform:scale(1.05)}
#projets .projet_block:hover .info_Projets{margin:0;opacity:1}

/*------------------------------------------
++   	     Home page : Agency 		  ++
/*-----------------------------------------*/
#agence{background-color:#ffffff;padding:70px 0 90px}
#agence hr.line{width:40px;height:2px;margin-bottom:22px}
#agence .d-flexCB{align-items:normal}
#agence .subtitleP{color:#101010;font-family:'TradeGothicLT';font-size:18px;font-weight:300;line-height:26px;max-width:820px}
#agence .thumb_About.d-flexCB{align-items:normal;gap:30px}
#agence .about_block{position:relative;overflow:hidden}
#agence .big{max-width:769px;width:100%}
#agence .small{max-width:430px;width:100%}
#agence .about_block:before{position:absolute;content:"";left:0;right:0;top:0;bottom:0;z-index:1;background-color:rgba(0,0,0,0.4);opacity:1;transition:700ms cubic-bezier(0.17,0.67,0,1.01)}
#agence .about_block a{display:block}
#agence .about_block img{display:block;width:100%;object-fit:cover;filter:grayscale(100%);transition:700ms cubic-bezier(0.17,0.67,0,1.01);margin-bottom:-3px}
#agence .big img{height:599px}
#agence .small{max-width:430px;width:100%;display:flex;flex-direction:column;justify-content:space-between}
#agence .small img{height:284px}
#agence .about_block .info_About{display:flex;align-items:end;justify-content:left;position:absolute;font-size:16pt;color:#333333;font-weight:400;opacity:1;z-index:2;margin:30px 0 0;padding:20px 20px 20px 30px;top:0;left:0;right:0;bottom:0;transition:700ms cubic-bezier(0.17,0.67,0,1.01)}
#agence .about_block .title{font-size:16pt!important;font-weight:600!important}
#agence .about_block .info_About div > span{font-size:16px;color:#fff;font-weight:300;text-align:left;line-height:5px}
#agence .about_block:hover img{filter:grayscale(0%)}
#agence .about_block .subtitle{margin-bottom:20px;text-transform:uppercase;font-size:10px!important;letter-spacing:2px}
#agence .texte_About.d-flexCB{margin-top:70px}
#agence .texte{color:#101010;max-width:340px;font-size:17px;font-weight:400;line-height:26px}
#agence .texte h2{font-weight:800;margin-bottom:25px;font-size:16pt}
#agence .Equipe_{margin-top:75px}
#agence .portrait{position:relative;width:100%;text-align:center}
#agence .portrait img{display:block;margin:0 auto 20px;width:175px;height:175px;overflow:hidden;object-fit:cover;border-radius:50%;filter:grayscale(1);transition:700ms cubic-bezier(0.17,0.67,0,1.01)}
#agence .portrait:hover img{transform:scale(1.05)}
#agence .staff,#agence .portrait .heading{font-size:14pt;font-family:'TradeGothicBold'}
#agence .fonction{font-family:'Avant Garde';font-size:12pt;font-weight:700;text-transform:uppercase;display:block;margin:30px 0 10px}
#agence .specialite{display:block;margin:10px 0 20px}
#agence .descr{display:none;color:#747474;font-weight:400;margin:22px 0 20px;line-height:28px;padding:0 15px}
#agence .voirPlus_{cursor:pointer;display:none}

/*------------------------------------------
++   	    Home page : Customers 		  ++
/*-----------------------------------------*/
#clients{padding:100px 0 120px;background-color:#F3F3F3;position:relative}
#clients:before{content:'';background-color:#14EE23;height:60px;width:2px;position:absolute;top:-30px;left:50%}
#clients .photo{max-width:462px;width:100%;position:relative;z-index:1}
#clients .photo:after{content:"";background-color:#14EE23;height:100px;width:100px;position:absolute;bottom:-20px;right:-20px;z-index:-1}
#clients .photo img{display:block;width:100%;height:621px;object-fit:cover;filter:grayscale(100%);transform:scaleX(-1);transition:700ms cubic-bezier(0.17,0.67,0,1.01)}
#clients .photo img:hover{filter:grayscale(0%)}
#clients .texte{max-width:668px;width:100%}
#clients .texte h2{font-size:50px;line-height:60px}
#clients .texte .subtitle{margin-bottom:50px}
#clients .texte p{font-size:14pt;font-weight:400;line-height:36px}
#clients .texte .heading{font-size:17px;font-weight:700;line-height:26px}
#clients hr.line{height:2px;width:40px;margin-bottom:40px}
#clients hr.line.line2{margin-top:60px}
#clients .infoline a{margin-right:18px}
#clients .whatsapp_Fr::before{width:32px;height:32px;top:2px}
#clients .whatsapp_Vn::before{width:29px;height:29px;top:4px}

/*------------------------------------------
++   			   Legal 				   ++
/*-----------------------------------------*/
#tempPage a{font-family:'roboto';font-weight:600}
#tempPage a:hover{text-decoration:underline;text-decoration-color:#14EE23;text-decoration-thickness:3px;text-underline-offset:4px}
#tempPage li{list-style:circle;margin-left:17px;margin-block-start:1em;margin-block-end:1em;line-height:24px}
#tempPage h1{font-size:24pt;margin-top:10px;margin-bottom:15px;word-wrap:break-word}
#tempPage h2{font-size:16pt;position:relative;margin-bottom:35px}
#tempPage h2:after{content:"";position:absolute;bottom:-9px;left:0;display:block;background:#14EE23;width:50px;height:2px}
#tempPage h2 span{display:block;text-transform:none;margin-bottom:0!important}
#tempPage h3{font-size:14pt;margin-top:10px;margin-bottom:25px;font-weight:600;position:relative}
#tempPage h3 span{display:block;text-transform:none;margin-bottom:0!important}
#tempPage h4{font-size:12pt;margin-top:10px;margin-bottom:25px;font-weight:600;text-transform:uppercase;position:relative}
#tempPage h4 span{display:block;text-transform:none;margin-bottom:0!important}
#tempPage hr.line{background-color:#888888;height:2px;width:80px;margin:auto}
#tempPage p{margin-block-start:1em;margin-block-end:1em;line-height:24px}
#tempPage .blockTitle{margin-top:45px}
#tempPage .subtitle{margin-bottom:30px;letter-spacing:4px}
#tempPage .textzone .center{text-align:center}
#tempPage .textzone ul{margin-left:35px}
#tempPage .textzone ul li{list-style:circle;margin:10px 0}

/*------------------------------------------
++   			   Contact 				   ++
/*-----------------------------------------*/
body.contact #footer{padding-top:0}
body.contact #footer:before{display:none}
body.contact #footer .wrapper:not(.d-flexCB){display:none}

#attach{background:#1d1d1d!important;cursor:pointer}
#attach_wrap{margin:-10px 0 30px 0}
#attach1,#attach2,#attach3{display:none}
#contact{padding-top:70px}
#contact a{font-weight:500}
#contact input[type=checkbox]{position:absolute;top:-1px;left:0;cursor:pointer;width:17px;height:17px;padding:0;border-radius:0.25em;display:block;background-repeat:no-repeat;background-color:transparent;border:1px solid #ddd;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-print-color-adjust:exact;color-adjust:exact}
#contact input[type=checkbox]:checked{background:#14EE23;border-color:#14EE23;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3 6-6'/%3E%3C/svg%3E")}
#contact input[type="radio"]{position:absolute;left:0;top:-1px;width:20px;height:20px;background:#fff;border:1px solid #ddd!important;border-radius:50%;transition:0.5s ease all;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-print-color-adjust:exact;color-adjust:exact;cursor:pointer}
#contact input[type="radio"]:checked{width:20px;height:20px;border:5px solid #14EE23!important;border-radius:50%;background-repeat:no-repeat;background-position:center;transition:none}
#contact input[type=text],#contact input[type=number],#contact input[type=tel],#contact input[type=email]{border:1px solid transparent;font-family:'roboto';font-size:11pt;padding-left:10px;height:52px;color:#101010;-webkit-appearance:none;width:100%;margin-bottom:20px;background:#f5f5f5;border-radius:3px}
#contact input[type=text]:focus,#contact input[type=number]:focus,#contact input[type=tel]:focus,#contact input[type=email]:focus{border:1px solid #14EE23!important}
#contact input[type=text]::placeholder,input[type=tel]::placeholder,input[type=email]::placeholder{color:#888}
#contact label{position:relative;padding-left:25px;margin:0 8px}
#contact p#attach_wrap{margin-left:0!important}
#contact p.left{margin-left:25px;font-size:10pt}
#contact select{border:1px solid transparent;font-family:'roboto';height:52px;color:#101010;font-size:12pt;float:left;width:100%;padding-left:6px;margin-bottom:20px;background:#f5f5f5;border-radius:3px}
#contact select:focus{border:1px solid #14EE23}
#contact strong{font-weight:500}
#contact strong{font-weight:500}
#contact strong{font-weight:500}
#contact textarea{border:1px solid transparent;overflow:auto;font-family:'roboto';font-size:11pt;color:#101010;width:100%;resize:none;margin-bottom:20px;padding:15px 10px;border-radius:3px;background:#f5f5f5;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;height:150px}
#contact textarea::placeholder{color:#888}
#contact textarea:focus{border:1px solid #14EE23}
#contact .attach{background:#14EE23;color:white;padding:3px 10px 4px 10px;margin-left:10px;border-radius:3px}
#contact .attach a{color:white;font-weight:normal!important;text-decoration:none}
#contact .btn_{cursor:pointer;margin:30px auto;display:table;border:none}
#contact .btn_ span{background-color:#fff;color:#000}
#contact .contactLeft{background:#1b1b1b;height:calc(100vh - 70px);text-align:center}
#contact .contactLeft a{position:absolute;bottom:10%;right:17%;color:#333;font-weight:300;font-size:8pt;background:#fff;padding:0 5px;border-radius:6px;line-height:16px}
#contact .contactLeft img{width:70%;height:85%;display:block;object-fit:cover;margin:auto}
#contact .contactRight{padding:0 50px;height:calc(100vh - 70px);overflow:scroll;-ms-overflow-style:none;scrollbar-width: none}
#contact .contactRight::-webkit-scrollbar{display:none}
#contact .contactRight h1{margin-top:37px;text-align:center}
#contact .fiftyL{float:left;width:calc(50% - 4px)}
#contact .fiftyR{float:right;width:calc(50% - 4px)}
#contact .fiftyL,#contact .fiftyR{position:relative;padding-top:20px}
#contact .fiftyL.full{width:100%!important;max-width:100%!important}
#contact .fiftyL label,#contact .fiftyR label{position:absolute;left:0;top:9px;z-index:2;letter-spacing:2px;background:#f5f5f5;line-height:10px;padding:5px;font-size:8pt;color:#555;border-top-left-radius:6px;border-top-right-radius:6px;text-transform:uppercase;margin:0}
#contact .fiftyL input:focus,#contact .fiftyR input:focus,#contact select:focus,#contact textarea:focus{background-color:transparent!important}
#contact .fiftyL:focus-within label,#contact .fiftyR:focus-within label{background-color:#fff}
#contact .form_wrap{margin:-20px auto 50px;max-width:1024px}
#contact .icon_attach{margin:0 3px 0 -2px;width:12px}
#contact .icon_delete{margin:0 0 0 5px;cursor:pointer;display:none;width:10px}
#contact .inblock{margin:0 10px}
#contact .indice{display:inline-block}
#contact .progress{margin-left:5px;display:none}
#contact_intro{text-align:center;margin-bottom:25px;font-size:10pt}
#contact_mention{font-size:10pt;margin-top:50px}
#contact_message{height:150px}

/*------------------------------------------
++   				Blog 				   ++
/*-----------------------------------------*/
#actu{padding:70px 0 100px;position:relative}
#actu:before{content:'';background-color:#14EE23;height:60px;width:2px;position:absolute;top:-30px;left:50%}
#actu .title,#actu .subtitle{text-align:center}
#actu .subtitle{margin-bottom:80px}
#actu .blog_{overflow:hidden}
#actu .item_blog .photo{overflow:hidden}
#actu .item_blog img{width:100%;max-height:208px;display:block;object-fit:cover;filter:grayscale(1);transition:700ms cubic-bezier(0.17,0.67,0,1.01)}
#actu .cat{display:inline-block;margin:20px 0 25px;font-size:9pt;font-weight:700;text-transform:uppercase;transition:700ms cubic-bezier(0.17,0.67,0,1.01);text-decoration:underline;text-decoration-color:#eee;text-decoration-thickness:4px;text-underline-offset:6px}
#actu .cat:hover{text-decoration-color:#333}
#actu .blog_ h2 a{font-size:22px;font-weight:800;color:#101010}
#actu .blog_ p{color:#747474;font-weight:400;margin:22px 0 20px;line-height:26px}
#actu .blog_ .voirPlus{color:#14EE23;border-bottom:1px solid #e0e0e0;display:inline-block;line-height:28px}
#actu .item_blog:hover img{filter:grayscale(0%);transform:scale(1.05)}
#actu .item_blog:hover .cat{color:#101010}
#actu .item_blog .voirPlus:hover{border-color:#14EE23}
#actu .swiper-pagination{text-align:center!important;bottom:130px!important;z-index:10!important}
#actu .swiper-pagination-bullet{height:12px;width:12px;margin-left:8px;margin-right:8px;background:#ffffff;border-style:solid;border-width:1px 1px 1px 1px}
#actu .swiper-pagination-bullet-active{height:14px;width:14px;background:#14EE23;border-color:#14EE23}
#actu .swiper-slide{padding:0 15px}
#actu .btn_{display:table;margin:60px auto 0;text-align:center}
#actu .btn_ span{background-color:#fff;color:#000}
#blogCats a{color:#fff;line-height:35px}
#blogLeft{flex:0 0 25%;height:calc(100% - 70px);text-align:center;position:relative}
#blogLeft:before{position:absolute;content:"";left:0;right:0;top:0;bottom:0;z-index:1;background:#00000030}
#blogLeft a:hover{text-decoration:underline}
#blogLeft img{object-fit:cover;margin-bottom:-4px;filter:grayscale(100%)}
#blogLeft .overall{position:absolute;left:0;top:0;width:100%;text-align:center;z-index:10}
#blogRight{flex:0 0 75%;height:calc(100vh - 70px);overflow-y:auto;overflow:scroll;-ms-overflow-style:none;scrollbar-width:none;padding-top:10px}
#blogRight::-webkit-scrollbar{display:none}
#blogSearch img{position:absolute;right:14%;top:31px;width:24px;height:auto}
#blogSearch input{width:80%;border:0;border-radius:30px;padding:10px 20px;margin:25px 0;font-family:'roboto';font-size:11pt}
#faq div{padding:20px;border:1px solid #14EE23;border-radius:6px;margin-bottom:20px}
#faq div p{display:none}
#faq div p:last-child{margin-bottom:0}
.blog h1.home{margin-top:35px}
.blog #content,.blogcat #content{padding-top:70px}
.blogCat{margin:25px 0!important;text-transform:uppercase;font-size:9pt;letter-spacing:1px}
.blogCat a{text-decoration:underline;text-decoration-color:#eee;text-decoration-thickness:4px;text-underline-offset:6px}
.blogCat a:hover{text-decoration-color:#333}
.blogColumn{display:flex;flex-direction:column;flex:1}
.blogDate{margin:25px 0!important;color:#ACACAC;text-transform:uppercase;font-size:8pt;letter-spacing:1px}
.blogGrid{display:flex;margin-top: 50px}
.blogImage{overflow:hidden}
.blogImage img{width:100%;height:auto;filter:grayscale(1);transition:700ms cubic-bezier(0.17,0.67,0,1.01);display:block;object-fit:cover}
.blogItem{padding:50px;box-sizing:border-box;border-right:1px solid #ddd;border-top:1px solid #ddd}
.blogItem:hover img{filter:grayscale(0);transform:scale(1.05)}
.blogNoPost{margin-top:130px}
.blogNoPost img{margin-bottom:-20px}
.blogReadMore{margin-top:25px}
.blogSingle{padding:0 100px 100px}
.blogSingle h2{position:relative;font-size:16pt;letter-spacing:1px;padding:50px 0 35px}
.blogSingle h2:after{content:"";position:absolute;bottom:25px;left:0;display:block;background:#14EE23;width:50px;height:2px}
.blogSingle h3{font-size:12pt;margin-bottom:25px}
.blogSingle #faq h3{margin-bottom:0}
.blogSingle nav{line-height:35px}
.blogSingle nav a:after{content:"";position:absolute;bottom:-1px;left:0;display:block;background:#14EE23;width:0;height:2px;transition:700ms cubic-bezier(0.17,0.67,0,1.01)}
.blogSingle nav a:hover:after{width:100%}
.blogSingle nav li{position:relative;display:table}
.blogSingle p{margin-block-start:1em;margin-block-end:1em;line-height:25px}
.blogSingle main p a{position:relative;font-weight:500;font-family:'Roboto'}
.blogSingle main p a:after{content:"";position:absolute;bottom:-2px;left:0;display:block;background:#14EE23;width:30px;height:2px;transition:700ms cubic-bezier(0.17,0.67,0,1.01)}
.blogSingle main p a:hover:after{width:100%}
.blogSingle ul{margin-bottom:25px}
.blogSingle ul li{margin:10px 0 10px 17px;list-style:circle;line-height:25px}
.blogSingle .blogImage img:hover{filter:grayscale(0);transform:scale(1.05)}
.blogSummary{line-height:26px;color:#747474}
.blogTitle a:hover{text-decoration:underline}
.voirPlus_{position:relative;transition:.3s ease-in-out;margin:0;font-size:16px;float:right;margin-right:55px}
.voirPlus_:hover{color:#14EE23}
.voirPlus_::before{content:'';display:inline-block;background:url(../icon/arrowCase.svg);width:25px;height:25px;transform:translate(-5px,7px);transition:.3s ease-in-out;background-size:contain;background-repeat:no-repeat}