.zone1                                                  {width:100%;}
.zone1 .zone1_l                                         {width: 100%; display: flex; position: relative; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 700px; padding: 250px 0px 00px 20px; box-sizing: border-box; }
.zone1 .zone1_l h1                                      {font-size: 3.3rem; margin: 0px; text-transform: uppercase; line-height: 1.1em; color:var(--background_head_up); font-family: 'Manrope', sans-serif; letter-spacing: -0.5px; font-weight: 700;}
.zone1 .zone1_l h2                                      {font-size: 1.65rem; margin: 0px 0px 20px 0px; text-transform: uppercase; line-height: 1.0em; color:var(--color_theme); font-family: 'Manrope', sans-serif;}
.zone1 .zone1_l p                                       {font-size: 1.1rem; margin: 20px 0px; line-height: 1.5em; max-width: 600px;}
.zone1 .zone1_l .mslogan                                {color: var(--color_theme3_hv); font-size: 4rem; font-weight: 600; position: absolute; right: 80px; bottom: 70px; line-height: 1.1em; letter-spacing: -3px; animation: move_photo 1.5s 1.5s ease-in-out forwards; transform: translate(1200px, 0px); text-shadow: #FFF 2px 2px 0px, #016bb9 3px 4px 0px;}

.zone1 .zone1_r                                         {width:100%; min-height:700px; font-size:18px; line-height:1.6; color:#333; margin-top:110px; opacity: 0; animation: move_photo 1s 0.5s ease-in-out forwards; transform:translate(100%,0px); width:100%; display: flex; flex-direction: row;}
.zone1 .zone1_r .slider                                 {width:100%; height:700px !important; overflow:hidden;}  
.zone1 .zone1_r .slider .slides                         {width:100%; height:700px !important; overflow:hidden; position: relative; background-color: #fff;}  
.zone1 .zone1_r .slider .slides li img                  {height: 100%; width: 100%; background-size: contain; background-position: top left; aspect-ratio: auto; background-repeat: no-repeat;}

.zone2                                                  {width:100%; min-height:411px; margin-top: 80px !important;}
.zone2 .row .col                                        {padding:0px; }
.zone2 .cas1                                            {width:100%; height:auto; background:url('../img/illustration/fond-accueil-02.jpg') no-repeat center center; background-size:cover; aspect-ratio: 1; position: relative; }
.zone2 .cas1:before                                     {content:''; position: absolute; top:0px; left:calc(50% - 117px); width:234px; height:26px; background:url('../img/illustration/hr-shap.png') no-repeat center center; background-size:cover; display: none;}
.zone2 .cas1:after                                      {content: ''; display: block; padding-bottom: 100%;}
.zone2 .cas2                                            {width:100%; height:100%; background:var(--color_theme); position: relative; color:var(--background_body); aspect-ratio: 1;;}
.zone2 .cas2 .content                                   {max-width: 100%; height: 100%; text-align: center; font-size: 14px; line-height:22px; padding: 60px 30px 30px 30px; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.zone2 .cas2:before                                     {content:''; position: absolute; top:0px; left:calc(50% - 117px); width:234px; height:26px; background:url('../img/illustration/hr-shap.png') no-repeat center center; background-size:cover;}

.zone2 .cas3                                            {width:100%; height:auto; background:url('../img/illustration/fond-accueil-03.jpg') no-repeat center center; background-size:cover; aspect-ratio: 1; position: relative; }
.zone2 .cas3:after                                      {content: ''; display: block; padding-bottom: 100%;}

.zone3                                                  {width:100%; margin-top: 50px !important; margin-bottom: 50px !important;}
.zone3 .material-icons                                  {color:var(--color_theme) !important;}
.zone3 h3, .zone3 h4                                    {font-size: 1.5rem !important; font-weight: bold;}
.zone3 .servicebox                                      {width:100%; box-sizing: border-box; display: block; text-decoration: none; color:var(--color_gen); transition: all 0.3s ease-in-out; }
.zone3 .servicebox:hover                                {transform: translateY(-8px);}

.zone4                                                  {position:relative; width:100%; }
.zone4:before                                           {content:''; position: absolute; top:0px; left:calc(50% - 117px); width:234px; height:26px; background:url('../img/illustration/hr-shap.png') no-repeat center center; background-size:cover;}
.zone4 .content                                         {width:var(--nav_contenair_m); max-width: 100%; margin: 0px auto; padding: 80px 20px 0px 80px;;}
.zone4 .content img                                     {max-width: 550px; height: auto; margin-right:50px;}
.zone4 .content h2                                      {font-size: 1.3rem; color: var(--color_theme); padding: 0px 0px 0px 20px; font-weight: bold; margin: 0px auto 25px auto; position: relative; width: fit-content; text-transform: uppercase; letter-spacing: -0.6px;}
.zone4 .content h2::before                              {content: ''; position: absolute; top: calc(50% - 14px); left: 0px; width: 5px; height: 28px; background: #049fec; }

.zone5 .content                                         {width:100%; height:auto; position: relative; text-align: center;}
.zone5 .content h2                                      {font-size: 1.3rem; color: var(--color_theme); padding: 0px 0px 0px 20px; font-weight: bold; margin: 0px auto 25px auto; position: relative; width: fit-content; text-transform: uppercase; letter-spacing: -0.6px;}
.zone5 .content h2::before                              {content: ''; position: absolute; top: calc(50% - 14px); left: 0px; width: 5px; height: 28px; background: #049fec; }
.zone5 .content .col                                    {float: none;}
.zone5 .testimonials-wrapper                            {position: relative; max-width: 700px; margin: 50px auto 35px auto; }
.zone5 .testimonials-controls                           {position: absolute; bottom: -20px; left: 40px; display: flex; gap: 12px; }
.zone5 .testimonials-btn                                {background: var(--color_theme);}
.zone5 .testimonials-card                               {background: #fff; border-radius: 6px; padding: 28px 28px; min-height: 256px; position: relative; overflow: hidden;}
.zone5 .testimonial-slide                               {position:absolute; opacity: 0; width: calc(100% - 32px); height: 200px; transform: translateY(15px); transition: all 0.75s ease; background:url('../img/fond/quote_back.png') top center no-repeat;}
.zone5 .testimonial-slide.is-active                     {position:absolute; opacity: 1; transform: translateY(0);}
.zone5 .testimonial-inner                               {display: flex;align-items: center;justify-content: space-between;gap: 20px;}
.zone5 .testimonial-text                                { flex: 1; }
.zone5 .testimonial-quote                               {margin: 0 0 16px 0;color: #666;line-height: 1.6;font-size: 13px;}
.zone5 .testimonial-info                                {display: flex; align-items: center; gap: 12px; margin: 3px auto; width: fit-content;}
.zone5 .testimonial-info h5                             {font-size: 16px; line-height: 1.2em; font-weight: bold;}
.zone5 .testimonial-name                                {font-weight: 700;color: #222; line-height: 1.2em;}
.zone5 .testimonial-role                                {font-weight: 400;color: #777; margin-left: 6px; font-size: 13px; line-height: 1.2em;}
.zone5 .testimonial-photo                               {width: 130px;min-width: 130px;display: flex;justify-content: flex-end;}
.zone5 .testimonial-photo img                           {width: 110px;height: 110px;border-radius: 50%;object-fit: cover;}
.zone5 .testimonial-photo-fallback                      {width: 110px;height: 110px;border-radius: 50%;background: #f2f2f2;display: flex;align-items: center;justify-content: center;color: #999;}
.zone5 .video-container                                 {width: 100%; max-width: 700px; margin: 0px auto 30px auto; box-shadow: 0 0 25px rgba(0,0,0,0.2); }
.zone5 .video-container video                           {width:100%; height:auto; margin: 0px auto; padding: 0px;}

.panovideo                                              {height: fit-content !important; max-height:900px; aspect-ratio: 2.5; position:relative; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; align-items: center; align-content: stretch; overflow:hidden; }
.panovideo:before                                       {content:''; position: absolute; top:0px; left:calc(50% - 117px); width:234px; height:26px; background:url('../img/illustration/hr-shap.png') no-repeat center center; background-size:cover; z-index: 8;}
.panovideo .responsive-video                            {position:absolute; top:0px; left:0px; width:100%; }
.panovideo .container                                   {margin:25% 0px 25% auto !important; width:100%; max-width:100% !important; animation: ease move_photo 1.0s 1.8s forwards; transform:translate(110%,0px); z-index: 8;}
.panovideo .container .center                           {text-align:center; color:var(--background_body); font-size:2.4rem; text-transform: uppercase; letter-spacing: -1px;}
.panovideo .overvid                                     {z-index: 5; background-image: linear-gradient(#0000003d, #51000033);	position: absolute; inset: 0%;}

.zone7                                                  {width:100%; height:411px; background:var(--background_body);}
.zone7 .row .col                                        {padding:0px; }
.zone7 .content                                         {width:100%; height:auto; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding:25px 0px;}
.zone7 .content p i                                     {font-size: 4rem; color: var(--color_theme); margin-bottom:15px;}
.zone7 .content h2                                      {font-size: 1.3rem; color: var(--color_theme); padding: 0px 0px 0px 20px; font-weight: bold; margin: 0px auto 25px auto; position: relative; width: fit-content; text-transform: uppercase; letter-spacing: -0.6px;}
.zone7 .content h2::before                              {content: ''; position: absolute; top: calc(50% - 14px); left: 0px; width: 5px; height: 28px; background: #049fec; }
.zone7 .img1                                            {width: 100%; background: url('../img/illustration/fond-accueil-07.jpg') no-repeat center center; background-size: cover; position: relative;}
.zone7 .img1:before                                     {content:''; position: absolute; bottom:0px; left:calc(50% - 117px); width:234px; height:26px; background:url('../img/illustration/hr-shap.png') no-repeat center center; background-size:cover; transform: rotate(180deg);}
.zone7 .img1:after                                      {content: ''; display: block; padding-bottom: 100%; }
.zone7 .img2                                            {width: 100%; background: url('../img/illustration/fond-accueil-08.jpg') no-repeat center center; background-size: cover; position: relative;}
.zone7 .img2:before                                     {content:''; position: absolute; top:0px; left:calc(50% - 117px); width:234px; height:26px; background:url('../img/illustration/hr-shap.png') no-repeat center center; background-size:cover;}
.zone7 .img2:after                                      {content: ''; display: block; padding-bottom: 100%; }

.zone9                                                                      {position: relative; display:block; width:100%; padding: 80px 0px 0px 0px;}  
.zone9 .s11                                                                 {width:100% !important;}
.zone9 .row .col                                                            {padding:0 !important;}
.zone9 .innerflex                                                           {width:var(--nav_contenair_p); max-width:var(--nav_contenair_m); height:auto; margin:0 auto; display: flex; flex-direction: row; justify-content: space-between; align-content: center; align-items: flex-start; flex-wrap: wrap; gap:20px; position: relative; margin: 80px auto 30px auto;}
.zone9 .innerflex h3                                                        {text-transform: uppercase; font-size: 15px; color:var(--color_gen); line-height: 0.9em; margin: 10px 0px 50px 0px; text-align: left; width:100%;}   
.zone9  h2                                                                  {font-size: 1.3rem; color: var(--color_theme); padding: 0px 0px 0px 20px; font-weight: bold; margin: 0px auto 25px auto; position: relative; width: fit-content; text-transform: uppercase; letter-spacing: -0.6px;}
.zone9  h2::before                                                          {content: ''; position: absolute; top: calc(50% - 14px); left: 0px; width: 5px; height: 28px; background: #049fec; }
.zone9 .innerflex .blog-article								                {position:relative; width:calc((100% / 3) - 20px); overflow:hidden; color:#333;}
.zone9 .innerflex .blog-article a 							                {color:#333;}
.zone9 .innerflex .blog-article-txt							                {font-size:15px; width:100%; line-height:25px; text-align:justify; background:rgba(255,255,255,0.2); padding:20px 0px; min-height: 400px;}
.zone9 .innerflex .blog-article-txt h3						                {font-size:25px; font-weight:400; text-decoration:none; margin:0px; padding:0px; display: block; width:100%; min-height:50px;}
.zone9 .innerflex .blog-article-txt .Lurl					                {font-size:11px; color:#036187; margin:5px 0px; display:block;}
.zone9 .innerflex .blog-article-txt .Ltags					                {font-size:10px; color:var(--color_theme_hv); margin:5px 8px 5px 0px; display:inline-block;}
.zone9 .innerflex .blog-article-txt .categ                                  {font-size:10px; color:var(--color_theme_hv); margin:5px 0px; display:inline-block; text-transform: uppercase;}
.zone9 .innerflex .blog-article-txt .light                                  {font-weight: 300; display: block; min-height: 250px;}
.zone9 .innerflex .blog-article-image						                {display:block; width:100%; aspect-ratio: 16 / 9; margin-bottom:15px; overflow:hidden;  position: relative;}
.zone9 .innerflex .blog-article-image img 					                {margin:0px; padding:0px; display:block; width:100%; overflow:hidden;  transition: all .2s ease-in-out; filter:saturate(0);}
.zone9 .innerflex .blog-article:hover img 					                {filter: saturate(1);}
.zone9 .innerflex .blockl                                                   {width:100%; height:auto; position: relative; display: flex; flex-direction: column; justify-content: center; align-items:flex-end;}      

@keyframes move_photo                           {to {transform:translate(0px,0px); opacity:1;}}


@media only screen and (max-width: 600px) {
    .zone1 .zone1_l h1                          {font-size: 1.7rem;}
    .zone1 .zone1_l h2                          {font-size: 1.2rem;}
    .zone1 .zone1_l                             {min-height: 600px; padding: 350px 0px 00px 20px;}
    .zone1 .zone1_l .mslogan                    {font-size: 1.9rem; right: 10px; bottom: 10px;}
    .zone1 .zone1_r                             {min-height: 430px; margin-top: 40px; }
    .zone1 .zone1_r .slider                     {height: 440px !important;}
    .zone1 .zone1_r .slider .slides li img      {background-position: top center; }
    .zone2 .cas1:before                         {display: block;}
    .zone2 .cas2:before                         {display: none;}
    .zone2 .cas2 .content                       {font-size: 11px; line-height:20px;}
    .zone4 .content                             {padding: 80px 20px 0px 20px;}
    .zone4 .content img                         {max-width: 100%; margin: 0px auto 50px auto;}
    .zone5 .content .col .s3                    {width: 100% !important;}
    .zone9 .innerflex .blog-article             {width: calc((100% / 1) - 20px); margin: 0px auto;}
    .panovideo .container .center               {font-size: 1.8rem;}

}
@media only screen and (min-width: 601px) and (max-width: 810px) { 
    .zone1 .flex_centerv                        {flex-direction: column; }
    .zone1 .row .col.s6                         {width: 100%;}
    .zone1 .zone1_l h1                          {font-size: 1.7rem;}
    .zone1 .zone1_l h2                          {font-size: 1.2rem;}
    .zone1 .zone1_l                             {min-height: 600px; padding: 350px 0px 00px 20px;}
    .zone1 .zone1_l .mslogan                    {font-size: 1.9rem; right: 10px; bottom: 10px;}
    .zone1 .zone1_r                             {min-height: 430px; margin-top: 40px; }
    .zone1 .zone1_r .slider                     {height: 440px !important;}
    .zone1 .zone1_r .slider .slides li img      {background-position: top center; }
    .zone2 .flex_centerv                        {flex-direction: column; }
    .zone2 .row .col.s4                         {width: 100%;}
    .zone2 .cas2 .content                       {font-size: 11px; line-height:26px;}
    .zone2 .cas1:before                         {display: block;}
    .zone2 .cas2:before                         {display: none;}
    .zone3 .flex_centerv                        {flex-direction: column; }
    .zone3 .row .col.s4                         {width: 100%;}
    .zone4 .content                             {padding: 80px 20px 0px 20px;}
    .zone4 .flex                                {flex-direction: column; }
    .zone5 .content .col .s3                    {width: 50% !important;}
    .zone4 .content img                         {max-width: 100%; margin: 0px auto 50px auto;}
    .zone7 .flex_centerv                        {flex-direction: column; }
    .zone7 .row .col.s6                         {width: 100%;}
    .zone9 .innerflex .blog-article             {width: calc((100% / 1) - 20px); margin: 0px auto;} 
    .panovideo .container .center               {font-size: 1.8rem;}
}
@media only screen and (min-width: 811px) and (max-width: 1124px) {
    .zone1 .zone1_l h1                          {font-size: 2.2rem;}
    .zone1 .zone1_l .mslogan                    {font-size: 2.52em; right:0px} 
    .zone2 .cas2 .content                       {font-size: 11px; line-height:20px;}
}
@media only screen and (min-width: 1125px) and (max-width: 1600px) {
    .zone1 .zone1_l .mslogan                    {font-size: 2.52em; right:0px} 
    .zone2 .cas2 .content                       {font-size: 11px; line-height:20px;}
}