/***** opening *****/
.opening 							{ width: 100%; height: 0; position: fixed; left: 0; top: 0; transform: skewX(0); overflow: hidden; text-align: center; z-index: 999; display: none;}
.opening .content					{ width: 100%; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.opening .content img				{ width: 400px; height: auto; margin-right: 40px;}
.opening .content div				{ margin: 5px 0 60px 0;}

@media (max-width:600px) {
.opening .content img				{ width: 235px; margin-right: 15px;}
.opening .content div				{ margin: 2px 0 30px 0;}
}

/**/
.top_home .opening					{ animation: anim_opening 4s ease-in-out; display: block; background: #eef3fe;}
.top_home .opening .content  		{ animation: anim_opening_logo 4s ease-in-out;}
.top_home .annonce					{ animation: anim_header 4s ease;}
.top_home .header					{ animation: anim_header 4s ease;}
.top_home .banner .img				{ animation: anim_banner 4s ease-out;}


@keyframes anim_opening {
0%									{ height: 100%; left: 0; transform: skewX(0); }
45%									{ height: 100%; left: 0; transform: skewX(0); }
60%									{ height: 100%; left: 110%; transform: skewX(-15deg); }
100%								{ height: 100%; left: 110%; transform: skewX(-15deg); }
}
@keyframes anim_opening_logo {
0%									{ opacity: 0; }
5%									{ opacity: 0; }
20%									{ opacity: 1; }
35%									{ opacity: 1; }
45%									{ opacity: 0; }
100%								{ opacity: 0; }
}
@keyframes opening_item {
0%									{ opacity: 0; transform: translateY(40px);}
10%									{ opacity: 1; transform: translateY(0);}
40%									{ opacity: 1; transform: translateY(0);}
100%								{ opacity: 1; transform: translateY(0);}
}
@keyframes anim_header {
0%									{ opacity: 0;}
50%									{ opacity: 0;}
60%									{ opacity: 1;}
100%								{ opacity: 1;}
}
@keyframes anim_banner {
0%									{ opacity: 0; transform: scale(1.05);}
55%									{ opacity: 0; transform: scale(1.05);}
90%									{ opacity: 1;}
100%								{ opacity: 1; transform: scale(1);}
}

@media (min-width:1001px) {
.top_home .intro:before				{ animation: anim_intro_before 4s ease-out;} 
.top_home .intro .content			{ animation: anim_intro_content 4s ease-out;} 

@keyframes anim_intro_before {
0%									{ opacity: 0;}
75%									{ opacity: 0;}
90%									{ opacity: 1;}
100%								{ opacity: 1;}
}
@keyframes anim_intro_content {
0%									{ transform: translateY(0);}
65%									{ transform: translateY(0);}
80%									{ transform: translateY(-100px);}
100%								{ transform: translateY(-100px);}
}
}

@media (max-width:1000px) {
.top_home .intro,
.top_page .intro_services 			{ animation: anim_content 4s ease-out;} 

@keyframes anim_content {
0%									{ opacity: 0;}
60%									{ opacity: 0;}
75%									{ opacity: 1;}
100%								{ opacity: 1;}
}
}

@media (max-width:1200px) {
.shape_wave		    				{ display: none; }
.shape_wave_angle					{ display: none; }
.shape_circle						{ display: none; }
}

/**** Banner ****/
.banner 								{ position: relative; background-color: var(--second-color); height: 95vh; min-height: 450px; max-height: 1050px; }
.banner video							{ width: 100%; height: 100%; object-fit: cover; object-position: center;}
.banner .content						{ position: absolute; text-align: center; top: 55%; left: 50%; transform: translate(-50%, -50%); z-index: 100; padding-bottom: 80px; }
.banner .content .titre_main span  		{ color: #fff; }
.banner .content .sous_titre     		{ color: #fff; }
.banner .content .link          		{ color: var(--second-color); }

.banner .shape_circle                   { position: absolute; bottom: -30%; right: 86%; z-index: -1; animation: circle_anim 90s linear infinite; }

.banner .annonce                        { position: absolute; bottom: 20px; right: 20px; background-color: #fff; transform: translateY(0); transition: all 300ms ease-in-out;}
.banner .annonce .grid                  { display: grid; grid-template-columns: 120px auto; gap: 20px; padding: 2px 30px 2px 2px; align-items: center; transition: all 300ms ease-in-out;}
.banner .annonce .grid img              { display: block; width: 100%; height: auto; }
.banner .annonce .grid .texte           { max-width: 200px; }
.banner .annonce .grid .texte::after    { content: ""; background: url("../images/arrow_next_blue.svg") 50% / cover no-repeat; width: 14px; height: 24px; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); opacity: 0;}
.banner .annonce .grid .sous_titre      { margin-bottom: 2px; font-size: 18px; font-weight: 500; color: var(--second-color); }
.banner .annonce .grid p                { line-height: 24px; font-size: 14px; margin: 0; }


@media (min-width:1201px) {
.banner .link:hover 					{ color: #fff; }
.banner .annonce:hover .grid            { padding-right: 60px;  }
.banner .annonce:hover .grid .texte::after { opacity: 1;}
}

@media (max-width:1200px) {
.banner 								{ height: auto; min-height: inherit; max-height: inherit; padding-top: 85px; }
.banner .content						{ position: relative; top: inherit; left: inherit; transform: none; background: var(--second-color); padding: 40px 60px 50px; }
.banner .content .titre_main span  		{ color: var(--main-color); }

.banner .annonce                        { display: none; }        
}

@media (max-width:1000px) {
.banner .content						{ padding: 5vw 8vw; }
}

@media (max-width:700px) {
.banner 								{ padding-top: 50px; }
.banner .content .link					{ display: none; }

}


/* moving text */
.pub .moving_text 					{ width: 100vw;/* transform: translateY(-50%);*/ position: relative; text-align: center; height: 50px; overflow: hidden; color: var(--white); background: var(--main-color); transition: top 400ms ease-in-out; z-index: 19;}
.pub .moving_text .row 				{ width: auto; display: flex;}
.pub .moving_text .row .grid		{ width: auto; display: flex; align-items: center; animation: pub_scroll_text 50s linear infinite;}
.pub .moving_text .row .grid .item	{ min-width: 35vw; color: #fff; font-size: 14px; line-height: 50px; display: inline-block; vertical-align: top; padding: 0 30px; width: auto;}

@keyframes pub_scroll_text {
0%									{ transform: translateX(0);}
100% 								{ transform: translateX(-100%);}
}
@media (max-width:1800px) {
.pub .moving_text .item 			{ min-width: inherit;}
}
@media (max-width:1200px) {
.pub .moving_text .item 			{ font-size: 12px;}
}
@media (max-width:700px) {
.pub .moving_text 					{ height: 44px; }
.pub .moving_text .item p			{ line-height: 44px;}
.pub .moving_text .row .grid .item	{ min-width: 100vw; }
}




.intro                                { text-align: center; margin: 100px auto 0; }
.intro .more_chapo                    { padding: 20px 0; }
@media (min-width:1201px) {
    
}
@media (max-width:1200px) {
.intro                                { margin: 80px auto; }
}
@media (max-width:1000px) {
.intro                                { margin: 60px auto; }
}
@media (max-width:700px) {
.intro                                { display: none; }
}






.camions.bloc_grid                    { gap: 80px;}
.camions.bloc_grid .texte             { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; align-items: center; max-width: inherit; }
.camions.bloc_grid .texte             { padding: 0; }
.camions .shape_circle                { position: absolute; top: -100%; left: 100%; z-index: -1; animation: circle_anim 90s linear infinite; }

@media (max-width:1600px) {
.camions.bloc_grid                    { grid-template-columns: 40% 1fr; gap: 60px;}
}
@media (max-width:1200px) {
.camions.bloc_grid                    { grid-template-columns: 1fr; gap: 60px;}
}
@media (max-width:1000px) {

}
@media (max-width:700px) {
.camions.bloc_grid .photo             { display: none;}  
.camions.bloc_grid .texte             { grid-template-columns: 1fr; gap: 0; }  
}



@media (min-width:1201px) {
.icone_boutons .icon_item:hover     { box-shadow: 0px 40px 52px 0px rgba(30,43,80,0.15);}
.icone_boutons .icon_item:hover .title { color: var(--main-color);}
/*
.icone_boutons .icon_item.icon_tout:hover .title { color: var(--main-color);}
.icone_boutons .icon_item.icon_tout:hover { background-color: #fff;}
*/
}


.secteur                               { width: 100vw; margin: 30px 0 95px; position: relative;}
.secteur .shape_wave                   { position: absolute; top: -100%; left: 50%; transform: translateX(-50%); z-index: -1;}
.secteur h3                            { position: relative; z-index: 1;}
.secteur .title                        { color: #fff; font-size: 18px; line-height: 30px; text-transform: uppercase; letter-spacing: 0.8px; font-weight: 700; }
.secteur .item                         { position: relative; width: 380px; margin-right: 30px; transition: all 300ms ease-in-out;}
.secteur .item>img                     { width: 100%; height: auto; display: block; position: relative;}
.secteur .content                      { position: absolute; bottom: 30px; width: 100%; text-align: center; visibility: visible; opacity: 1; transition: all 300ms ease-in-out;}
.secteur .item .hide_secteur           { position: absolute; top: 0; display: grid; align-content: center; justify-items: center;  width: 100%; height: 100%; padding: 30px; color: #fff; text-align: center; visibility: hidden; opacity: 0; transition: all 300ms ease-in-out; }

.arrowcustom                            { margin-top: 50px;}

@media (min-width:1201px) {
.secteur .item:hover .hide_secteur     { top: 0; visibility: visible; opacity: 1; }
.secteur .item:hover .content          { visibility: hidden; opacity: 0; }
}

@media (max-width:1200px) {
.secteur .title                        { font-size: 16px; }
  
}
@media (max-width:1000px) {
    
}
@media (max-width:700px) {
.arrowsecteurs                        { display: none;}
.secteur                      		  { width: 92.5vw; display: grid; grid-template-columns: repeat(5,1fr); grid-gap: 10px; overflow-x: scroll; padding: 0 7.5vw 30px 0; margin: 30px 0 30px 0;}
.secteur::-webkit-scrollbar 		  { height: 4px;}
.secteur .hide                        { display: none;}
.secteur .item                        { width: 240px; margin: 0;}
.secteur .item img                    { height: auto; object-fit: cover;}
.secteur .title                       { font-size: 14px; }

.wrap_home_secteurs               	{ position: relative;}
.wrap_home_secteurs:after           { width: 7.5vw; height: 4px; background: var(--bg-color); position: absolute; right: -7.5vw; bottom: 0; z-index: 20; content: "";}
}





.services                              { margin: 120px auto; }
.services .photo                       { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.services.icone_boutons .item          { margin-bottom: 0; min-height: 160px;}
.services.icone_boutons .item img      { max-height: 45px; max-width: 65px; width: auto; height: auto;}
.services.icone_boutons .icon_item img { max-width: 60px;}

@media (max-width:1200px) {
.services                              { margin: 80px auto; }

}
@media (max-width:1000px) {
.services                              { margin: 70px auto; }

.services.bloc_grid .texte             { grid-area: 1; }
.services.bloc_grid .photo             { grid-area: 2; }
}
@media (max-width:700px) {
.services                              { margin: 40px auto; }

.services .photo                       { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;}
.services.icone_boutons .icon_item          { width: 100%; min-width: 130px; max-width: 150px; margin: 0; }
}




.about                                 { background: url("../images/eurotrafic-home-06.webp") 50% / cover no-repeat var(--second-color); padding: 100px 0; margin: 100px auto 0; }
.about .image_mobile                   { display: none;}
.about .cadre                          { max-width: 600px; padding: 60px; background-color: #fff; }
.about .shape_circle                   { position: absolute; top: -35%; left: 100%; z-index: -1; animation: circle_anim 90s linear infinite; }
@media (max-width:1200px) {
.about                                 { background: url("../images/eurotrafic-home-06.webp") 50% / cover no-repeat var(--second-color); padding: 80px 0; margin: 80px auto 0; }
.about .cadre                          { padding: 50px;  }

}
@media (max-width:1000px) {
.about                                 { margin: 60px auto 0; }
.about .cadre                          { padding: 40px; }
}
@media (max-width:700px) {
.about                                 { margin: 40px auto 0; padding: 0; background: none; }
.about .image_mobile                   { display: block; width: 100%; height: auto;}
.about .cadre                          { padding: 30px 7.5vw; margin: 0 -7.5vw; }

}



.moving_logos					    { width: 100vw; left: 50%; transform: translateX(-50%); position: relative; margin-bottom: 80px; background-color: var(--second-color);}
.moving_logos .row 					{ width: auto; display: flex; padding: 30px 0;}
.moving_logos .row .grid 			{ width: auto; display: flex; align-items: center; animation: scroll_logos 80s linear infinite;}
.moving_logos .row .grid div 		{ padding: 0 40px;}
.moving_logos .row .grid img 		{ width: auto; height: auto; display: block;}

@keyframes scroll_logos {
0%									{ transform: translate(0, 0);}
100% 								{ transform: translate(-100%, 0);}
}

@media (max-width:1200px) {
.moving_logos .row 					{ padding: 20px 0;}
.moving_logos .row .grid img		{ max-height: 35px;}
}
@media (max-width:1000px) {

}
@media (max-width:700px) {
.moving_logos .row 					{ padding: 15px 0;}
.moving_logos .row .grid div 		{ padding: 0 15px;}
.moving_logos .row .grid img		{ max-height: 25px;}
}





.articles                           { margin: 60px auto; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 80px; }
.articles .item .titre              { font-size: 30px; height: 40px;}
.articles .item .photo img          { width: 100%; height: auto; object-fit: cover; display: block; margin-bottom: 20px;}
.articles .item .link               { width: 100%; display: block; margin-top: 20px; }
.articles .shape_circle             { position: absolute; top: -90%; right: 90%; z-index: -1; animation: circle_anim 90s linear infinite; }

@media (max-width:1200px) {
.articles                           { gap: 60px; overflow-x: scroll; width: 95vw; padding: 0 5vw 50px 0;}
.articles .item                     { width: 50vw; }
.articles .item .titre              { font-size: 22px; height: 32px;}
    
.wrap_articles               	    { position: relative;}
.wrap_articles:after                { width: 7.5vw; height: 4px; background: var(--bg-color); position: absolute; right: -7.5vw; bottom: 0; z-index: 20; content: "";}

.articles::-webkit-scrollbar 		  { height: 4px;}
}
@media (max-width:1000px) {
.articles                           { gap: 40px; padding: 0 5vw 20px 0;}
.articles .item                     { width: 65vw; }

}
@media (max-width:700px) {
.articles                           { gap: 20px; padding: 0 5vw 15px 0;}
.articles .item                     { width: 75vw; }
.articles .item .titre              { font-size: 20px; height: 30px;}
}




/***** atouts *****/
.valeurs 							{ margin: 100px auto; position: relative; text-align: center; padding: 80px 0;}
.valeurs .titre_main				{ display: none;}
.valeurs ul 						{ position: relative;}
.valeurs li 						{ display: inline-block; font-size: 15px; line-height: 28px; margin-right: 50px; position: relative;}
.valeurs li:after					{ background: url("../images/fav_icon.svg") 50% / cover no-repeat; width: 18px; height: 20px; position: absolute; right: -40px; top: 3px; content: "";}
.valeurs li:last-child  			{ margin: 0;}
.valeurs li:last-child:after 		{ display: none;}


.valeurs .moving_text 				{ width: 100vw; position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 140px; overflow: hidden;}
.valeurs .moving_text .row 		    { display: flex;}
.valeurs .moving_text .row .item 	{ display: grid; grid-template-columns: 1fr 1fr; grid-gap: 5vw; white-space: nowrap; font: 700 150px/140px "Poppins"; text-transform: uppercase; letter-spacing: 15px; color: #fff; opacity: 70%; padding-left: 5vw; animation: scroll_text 35s linear infinite;}

@keyframes scroll_text {
0%									{ transform: translate(0, 0);}
100% 								{ transform: translate(-100%, 0); }
}
@media (max-width: 1000px) {
.valeurs 							{ margin: 60px auto; padding: 10px 0;}
.valeurs 							{ text-align: left;}
.valeurs .titre_main				{ display: block; color: var(--second-color);}
.valeurs ul 						{ column-count: 2;}
.valeurs li 						{ font-size: 16px; line-height: 36px; margin: 5px 0; display: block; padding-left: 30px;}
.valeurs li:after					{ right: auto; left: 0; top: 5px;}
.valeurs li:last-child:after 		{ display: block;}
.valeurs .moving_text 				{ display: none;}
}
@media (max-width: 700px) {
.valeurs 							{ margin: 40px auto; padding: 5px 0;}
.valeurs ul 						{ column-count: 1; margin: 15px 0 -5px 0;}
.valeurs li 						{ font-size: 14px; line-height: 34px;}
}





/***** post *****/
.post                               { margin: 90px 0; position: relative; z-index: 1;}
.post .grid_post                    { display: flex; gap: 25px; width: 100%;}
.post .slider                       { margin-top: 30px;}
.post .item img                     { width: 100%; height: 100%; display: block;}
.post .shape_wave                   { position: absolute; top: 20%; left: 50%; transform: translateX(-50%); z-index: -1;}

@media (min-width:1200px) {
    
}
@media (max-width:1000px) {
.post                               { margin: 70px 0; position: relative;}
.post .grid_post                    { gap: 20px; width: 95vw; overflow-x: scroll; position: relative; padding: 0 5vw 30px 0;}
.post .grid_post .item img          { width: 40vw; }
    
.post::after                        { width: 7.5vw; height: 4px; background: var(--bg-color); position: absolute; right: -7.5vw; bottom: 0; z-index: 20; content: "";}

.post .grid_post::-webkit-scrollbar { height: 4px;}

}
@media (max-width:700px) {
.post                               { margin: 45px 0;}
.post .grid_post .item img          { width: 70vw; }
}