/*
CSS by Manu LECHAT
https://e-lechat.com
*/

/*


    {__                                    {__              
  {_                                       {__              
{_{_ {_        {__         {__ {__       {_{_ {_      {____ 
  {__        {__  {__       {__  {__       {__       {__    
  {__       {__    {__      {__  {__       {__         {___ 
  {__        {__  {__       {__  {__       {__           {__
  {__          {__         {___  {__        {__      {__ {__
                                                            
 */



 @font-face {
  font-family: "Roboto_Serif";
  src: url("../fonts/Roboto_Serif/static/RobotoSerif_28pt-Medium.ttf") format('truetype')
}

  @font-face {
  font-family: "Roboto_Serif_italic";
  src: url("../fonts/Roboto_Serif/static/RobotoSerif_36pt_Condensed-MediumItalic.ttf") format('truetype')
} 

 @font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto/Roboto-Medium.ttf") format('truetype')
}

 @font-face {
  font-family: "Roboto_Condensed";
  src: url("../fonts/Roboto_Condensed/static/RobotoCondensed-Medium.ttf") format('truetype')
}

 @font-face {
  font-family: "Roboto_Serif_bold";
  src: url("../fonts/Roboto_Serif/static/RobotoSerif_36pt_Condensed-Bold.ttf") format('truetype')
}


 @font-face {
  font-family: "Roboto_Serif_italic_light";
  src: url("../fonts/Roboto_Serif/static/RobotoSerif_28pt-LightItalic.ttf") format('truetype')
}


/*


                                                  
                                                  
{__     {__        {__         {_ {___      {____ 
 {__   {__       {__  {__       {__        {__    
  {__ {__       {__   {__       {__          {___ 
   {_{__        {__   {__       {__            {__
    {__           {__ {___     {___        {__ {__
                                                  

*/

:root {
  --black : "black";
  --space_unit: 20px;
  --site_max_width: 1380px;
  --fontSize_unit: 10px;
  --color_txt : black;  
  --color_bg:white;
  --color_bg_dark:black;
  /* --site-theme-color :  #673de6; */
/* --site-theme-color : #6554BF; */
--site-theme-color :  #783de6;
  --color_txt_alt : var(--site-theme-color);
  --swiper-theme-color : white; 
  --grid_col_gut: 1.5vw; 
  --grid_col_width: calc(var(--site_max_width) / 12); 
  --grid_unit: 2vw;
  --sider_width: calc( var(--grid_col_width) * 3);
}




/*

  /^^                                    /^^
/^                                       /^^
/^/^ /^        /^^         /^^ /^^       /^/^ /^      /^^^^
/^^        /^^  /^^       /^^  /^^       /^^       /^^
/^^       /^^    /^^      /^^  /^^       /^^         /^^^
/^^        /^^  /^^       /^^  /^^       /^^           /^^
/^^          /^^         /^^^  /^^        /^^      /^^ /^^

                                                           */


                                                           
/* fonts families */

.roboto_condensed{  font-weight: normal; font-family: "Roboto_Condensed"; text-transform: uppercase; letter-spacing: 0.05em; }
/* .playfairDisplay{  font-weight: normal; font-family: "PlayfairDisplay-Medium"; letter-spacing: -0.05em;} */
.roboto_Serif{  font-weight: normal;font-family: "Roboto_Serif"; }
.roboto_Serif_italic{   font-weight: normal; font-family: "Roboto_Serif_italic";  }
.Roboto_Serif_italic_light{   font-weight: normal; font-family: "Roboto_Serif_italic_light";  }
.roboto{     font-weight: normal; font-family: "Roboto" }
.Roboto_Serif_bold{ font-weight: normal;  font-family: "Roboto_Serif_bold" }
                                  
/* fonts sizes */

.txt_10 { font-size: calc( var(--fontSize_unit) * 1) ;  }
.txt_12 { font-size: calc( var(--fontSize_unit) * 1.2) ;  }
.txt_14 { font-size: calc( var(--fontSize_unit) * 1.4) ;  }
.txt_16 { font-size: calc( var(--fontSize_unit) * 1.6) ;  }
.txt_18 { font-size: calc( var(--fontSize_unit) * 1.8) ;  }
.txt_24 { font-size: calc( var(--fontSize_unit) * 2.4);  }
.txt_28{ font-size: calc( var(--fontSize_unit) * 2.8);  }
.txt_32{ font-size: calc( var(--fontSize_unit) * 3.2);  }
.txt_36{ font-size: calc( var(--fontSize_unit) * 3.6);  }
.txt_46{ font-size: calc( var(--fontSize_unit) * 4.6) ;  }
.txt_52{ font-size: calc( var(--fontSize_unit) * 5.2) ;  }
.txt_64 { font-size: calc( var(--fontSize_unit) * 6.4); }
.txt_74 { font-size: calc( var(--fontSize_unit) * 7.4); }
.txt_82 { font-size: calc( var(--fontSize_unit) * 8.2); }
.txt_124 { font-size: calc( var(--fontSize_unit) * 12.4); }
.maj{ text-transform: uppercase;    }


.maj{ text-transform: uppercase; }

.titre{ line-height: 1.1em; margin-bottom: 0.5em; }
.color_txt{ color: var(--color_txt_alt); }

.condensed{ font-family: 'Roboto Condensed', sans-serif;   }

.paragraphe li{ font-family: 'Roboto Condensed', sans-serif; text-transform: uppercase; font-size: .9em; line-height: 1em; height: 1.6em; padding-left: 1em; position: relative; }
.paragraphe li:before{ content: ""; width: .4em; height: .4em; background-color: var(--site-theme-color); position: absolute; left: 0; top: .6em; border-radius: 1em; }



.italic{  font-style: italic; }
.centered{ text-align: center; margin: auto; }



.titre_sigle{ background-image: url("../images/sigle.png"); background-position: top left ; max-width: 20ch; padding-left: .9em; background-size: 0.55em; background-repeat: no-repeat; }


/*

/^^^^^^^                                                     /^^       
/^^    /^^                                                   /^^       
/^^    /^^          /^^          /^^^^         /^^         /^/^ /^     
/^ /^^            /^   /^^      /^^          /^   /^^        /^^       
/^^  /^^         /^^^^^ /^^       /^^^      /^^^^^ /^^       /^^       
/^^    /^^       /^                 /^^     /^               /^^       
/^^      /^^       /^^^^        /^^ /^^       /^^^^           /^^      
        

*/



::selection {   background-color: rgba(0,0,0,0.05);  }
* {  box-sizing: border-box; outline: none;   }

::-webkit-scrollbar {  width: 10px; height: 10px; }
::-webkit-scrollbar-track {  background: rgba(255,255,255,0.5); }
::-webkit-scrollbar-thumb { background: var(--color_txt_alt);   }
::-webkit-scrollbar-thumb:hover {  background: var(--color_txt_alt);  }
html {
  scroll-behavior: smooth;
}

html{  color: var(--color_txt);   top:0; left: 0; margin: 0; padding: 0; width:100%;-webkit-font-smoothing: antialiased;   box-sizing: border-box;  position: relative;  text-rendering: optimizeLegibility;  }
body{ font-family: "Roboto_Serif"; font-weight: 500; font-size: 1rem; line-height: 1.35em;   background: white; width: 100%; color: var(--color_txt); margin: 0; padding: 0; top:0; left: 0; }
div{  position: relative; display: block;  border: 0px dotted #74ff7b; }
header, main{ width: 100%; ;  }
section{ padding: 2.5rem 0; width: 100%; overflow: hidden; }
img{  max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; object-fit: contain; }
ul{ margin: 0; display: block; text-align: left; padding: 0;}
li{ margin: 0;  list-style: none; padding: 0px;  }
h1,h2,h3,h4{ font-weight: normal!important;  width: fit-content;  display: block; margin: 0 ; clear: both; break-after: always;  font-size: 1em; line-height: 1.25em;   font-weight: 400 } 
a{  color: var(--color_txt); text-decoration: none;  }
a:hover{ cursor: pointer; text-decoration: none;  }
p{ letter-spacing: -0.02em; width: fit-content; max-width: 80ch; clear: both; display: block; padding: 0; margin: 0; position: relative;  line-height: 1.5em;  font-style: normal; }
p a{ text-decoration: underline;  color: var(--color_txt_alt); }
p a:hover{ filter: brightness(1.2); text-decoration: underline;  }
a.over_underline{  width: fit-content;}
a.over_underline:after{ content:""; position: absolute; bottom:0; left: 0; transition: all .1s cubic-bezier(.17,.67,.68,1.01); width:0%; height: 2px; background: var(--color_txt); }
a.over_underline:hover:after{ width:100%;  }
address {    display: block;    font-style: normal; }

.button, button{ width: fit-content; margin-top: 1rem; color: white; border: none; border-radius: .3rem; background: var(--site-theme-color); padding: 1rem; font-family:  ; }


.button:hover{ filter: brightness(1.2); cursor: pointer; }
a.underline{ text-decoration: underline; }

/* 


  /^^                                      /^^                 
  /^^                                      /^^                 
/^/^ /^        /^^            /^^          /^^      /^^^^      
  /^^        /^^  /^^       /^^  /^^       /^^     /^^         
  /^^       /^^    /^^     /^^    /^^      /^^       /^^^      
  /^^        /^^  /^^       /^^  /^^       /^^         /^^     
   /^^         /^^            /^^         /^^^     /^^ /^^     
                                                               

*/

.color_txt{ color: var(--color_txt_alt); }
.bold{ font-weight: bold; }

strong{  font-weight: 600; }


.goright{ width: 28px; }
.img_rounded{ width: 22rem; height:22rem; border-radius: 24rem; overflow: hidden; object-fit: cover;  }

.zone_bg{  background-size: 50rem; background-image: url("../images/bg/bg_skills.jpg"); background-repeat: repeat-x;  }


#cookie_banner-wrapper{ position: fixed; bottom: 1rem; right: 1rem; padding: 1rem; width: 20rem; border-radius: 1rem; background: white;}
#cookie_banner-wrapper .cookie_container {}
#cookie_banner-wrapper{}


/*

 /^^                                                                /^^
 /^^                                                                /^^
 /^^        /^^         /^^   /^^        /^^         /^^  /^^     /^/^ /^
 /^^      /^^  /^^       /^^ /^^       /^^  /^^      /^^  /^^       /^^
 /^^     /^^   /^^         /^^^       /^^    /^^     /^^  /^^       /^^
 /^^     /^^   /^^          /^^        /^^  /^^      /^^  /^^       /^^
/^^^       /^^ /^^^        /^^           /^^           /^^/^^        /^^
                         /^^
*/


.page_wrapper{ background-image: url("../images/texture_paper.jpg");background-repeat: repeat-x; padding-top:10rem ;  width: 100%;  min-height: 100vh;  }
.maxwidth_container{  width: 100%; padding-left: 2rem; padding-right: 2rem;  max-width: var(--site_max_width); margin: auto;  }

.strech_container{  width: 100%; padding-left: 2rem; padding-right: 2rem;  max-width: 820px; margin: auto;  }


.col{ width: 100%; padding: 0 2rem 0 6rem;  }

.cols_wrapper{ display: flex; }



/*




    /^^                                               /^^                               
  /^         /^                                       /^^                             /^
/^/^ /^             /^^   /^^        /^^              /^^               /^^  /^^        
  /^^       /^^       /^ /^^       /^   /^^       /^^ /^^               /^^  /^^     /^^
  /^^       /^^        /^         /^^^^^ /^^     /^   /^^               /^^  /^^     /^^
  /^^       /^^      /^  /^^      /^             /^   /^^               /^^  /^^     /^^
  /^^       /^^     /^^   /^^       /^^^^         /^^ /^^                 /^^/^^     /^^
                                                                                        

*/


.header.hidden{  transform: translateY( calc( -100% + 3rem ) ); }
.header{ transition: all .3s ease-in-out; transform: translateY(0%); z-index: 8; position: fixed; width: 100%; background: #000; display: flex; padding: 0; justify-content: center; flex-direction: column; align-items: center; }
.header_navbar { height: 3rem; overflow-y: hidden; border-top: 1px solid #372a50;  background: #000;   width: 100%; justify-content: space-between; display: flex; flex-direction: row; justify-content: space-between; }
.header_navbar .main_nav a{ transition: all .1s; color: white; padding: .8rem 2rem; letter-spacing: 0.06em; opacity: .6;   }
.header_navbar .main_nav a.activ{ opacity: 1;  }
.header_navbar .main_nav a:hover{ opacity: 1;  }
.header_navbar .main_nav{ width: 50%; display: flex; flex-direction: row; justify-content: center; }
.header_navbar .col{  padding: .8rem 2rem; justify-content: flex-end; width: 25%; display: flex; }



.main_logo{ width:14rem; padding: 2rem;     filter: drop-shadow(0px 0px 22px #6554bf); }
.header_navbar .languages a{ opacity: .6; color: white; padding: 0 .8rem; position: relative; }
.header_navbar .languages .activ{ opacity: 1; } 
.header_navbar .languages .activ::before{ content: ""; position: absolute; width: 60%; left: 20%; bottom: -.2em;  border-bottom: 2px solid whitesmoke; }

/* footer */

.footer{ width: 100%; display: flex;  color: #787878; background: #F5F5F9; padding: 3rem; min-height: 8rem; }
.footer .footer_logo{ width: 8rem; }
.footer .social_icon_links{ margin: 1rem 0; display: flex; flex-direction: raw; gap: 1rem;  }
.footer .social_icon_link{ mix-blend-mode: multiply; opacity: 0.5; background: white; transition: all .3s; filter:  drop-shadow(-4px 5px 6px rgba(0, 0, 0, 0));  width: 2.5rem;  padding: 0.5rem; border: 2px solid var(--color_txt); border-radius: 2rem;  overflow: hidden; }
.footer .social_icon_link:hover{ transform: scale(1.05);  opacity: 1;  filter:  drop-shadow(-4px 10px 6px rgba(0, 0, 0, 0.15));  border: 2px solid var(--color_txt_alt); }
.footer .social_icon_link img{  width: 100%; height: 100%; object-fit: contain; } 

.footer .affiliations_items { display: flex; gap: 1rem; justify-content: flex-end; }
.footer .affiliations_item{ width: 8rem; height: 5rem; object-fit: contain; mix-blend-mode: multiply; }
.footer .signature{ font-family: 'Roboto'; text-align: right; font-size: 12px; display: flex; gap:1em; justify-content: flex-end; } 

.footer .signature a:hover{ color:var(--color_txt_alt) }
.footer .col{ display: flex; gap: 1rem; flex-direction: column; justify-content: center; }

/* LOADER */

#loader { position: fixed; top: 0; left: 0; width: 100vw; height: 100%; background-color: white; z-index: 9; display: flex; justify-content: center; align-items: center; flex-direction: column; }
#loader .spinner{  animation: loop  1s infinite ease-in-out;  width: 50px; display: flex; justify-content: center; align-items: center; flex-direction: column;  }
#loader .spinner svg{ width: 100%; }

/* BURGER */

.burger{ display: none; }


.bttop{ transition:all .3s .3s ease-in-out; position: fixed; height: 2.5rem; width: 2.5rem; border-radius: 3rem; color: #fff; display: flex; align-items: center; justify-content: center; bottom: -5rem; z-index: 100; right: 1rem; background: var(--site-theme-color); opacity: 0.8; }
.bttop.visible{ bottom: 1rem; }
.bttop:hover{ filter: brightness(1.2); }

/* 


/^^^ /^^^^^^                                                    /^^                      /^^                             
     /^^                                                        /^^                      /^^                             
     /^^            /^^         /^^^ /^^ /^^      /^ /^^        /^^        /^^         /^/^ /^        /^^          /^^^^ 
     /^^          /^   /^^       /^^  /^  /^^     /^  /^^       /^^      /^^  /^^        /^^        /^   /^^      /^^    
     /^^         /^^^^^ /^^      /^^  /^  /^^     /^   /^^      /^^     /^^   /^^        /^^       /^^^^^ /^^       /^^^ 
     /^^         /^              /^^  /^  /^^     /^^ /^^       /^^     /^^   /^^        /^^       /^                 /^^
     /^^           /^^^^        /^^^  /^  /^^     /^^          /^^^       /^^ /^^^        /^^        /^^^^        /^^ /^^
                                                  /^^                                                                    



/* default_writer_page */
.default_writer_page{ max-width: 820px; margin: auto; } 
.default_writer_page p{ max-width: 100%;}
.default_writer_page h1{ margin: 1em 0; font-family: "Roboto_Serif_italic"; letter-spacing: -0.05em; ; font-size: calc( var(--fontSize_unit) * 5.2);  }
.default_writer_page h2{  margin: 1em 0; font-family: "Roboto_Serif_bold";; font-size: calc( var(--fontSize_unit) * 2.4); color: var(--site-theme-color);    }
.default_writer_page h3{  margin: 1em 0; font-family: "Roboto_Serif_bold" ;  font-size: calc( var(--fontSize_unit) * 1.8);  }
.default_writer_page h4{  margin: 1em 0; font-family: "Roboto_Serif_bold"; color: var(--site-theme-color); font-size: calc( var(--fontSize_unit) * 2.4);  }
.default_writer_page h5{  margin: 1em 0;  font-family: "Roboto_Serif_bold";  color: var(--site-theme-color); font-size: calc( var(--fontSize_unit) * 1.8) ;}
.default_writer_page ul{ margin: 1em 0; }
.default_writer_page li{ margin:0.5rem 0; display: flex; align-items: center; gap: .5em; font-family: "Roboto_Condensed";  letter-spacing: 0.05em;  line-height: 1em;  position: relative; }
.default_writer_page li p{ font-family: "Roboto_Condensed";  letter-spacing: 0.05em; }
.default_writer_page li:before{ content: ""; width: .4em; height: .4em; background-color: var(--site-theme-color); position: relative; border-radius: 1em; }

.default_writer_page .block{ margin: 4rem 0; }
.default_writer_page .block-type-image{ width: 100%; }
.default_writer_page .block-type-image figure{  width: 100%; margin: auto; }
.default_writer_page .block-type-image figure img{  width: 100%; margin: auto; }
.default_writer_page .block-type-video{ width: 100%; }
.default_writer_page .block-type-video  figure{ width: 100%; margin: auto; }
.default_writer_page .block-type-video iframe{ width: 100%; aspect-ratio: 16 / 10; border-radius: 1rem; border: none; }
.default_writer_page .block-type-markdown{  margin: 4rem auto!important; text-align: center; font-family: "Roboto_Serif_italic";; color: var(--site-theme-color);  font-size: calc( var(--fontSize_unit) * 2.4); max-width: 36ch;  line-height: 1.35em; padding: 4em 0 4em 0em; min-height:10em;     display: flex; align-items: center;  flex-direction: column;   background-image: url(http://localhost:8888/assets/css/../images/bg/cloud.jpg);  background-repeat: no-repeat;  justify-content: center;  background-position: center;   background-size:  100% 100%; }
.default_writer_page .block-type-heading h2{  margin: auto; color: var(--color_txt); font-size: calc( var(--fontSize_unit) * 4.6) ; font-family: "Roboto_Serif_italic"; text-align: center;  }

.article_template .page_cover_wrapper{ width: 100%;  overflow: hidden; aspect-ratio: 16/4; }
.article_template .page_cover_wrapper img{ width: 100%;  height: 100%; object-fit: cover; }
.article_template .categories{ display: flex; gap: 1rem; }
.article_template .categorie{ background-color: #dedede; border-radius: 7px; padding: .3em .8em; color: #787878; }

.article_template .article_automenu li a{   color: var(--color_txt_alt); } 
.article_template .article_automenu li a:hover{ color: #000; }

.article_template table{ width: 100%; }

/* hero_section */

.hero_section{ padding-top: 5rem; padding-bottom: 3rem; position: relative;  }
.hero_section .hero_section_container{ display: flex;  }
.hero_section .hero_section_container .title{ line-height: 1.05em; letter-spacing: 0; }




.hero_section .cover_wrapper{ display: flex; justify-content: center; align-items: center; flex-direction: column;   gap: 2rem;  align-items: flex-start; }
.hero_section .cover{ margin: 2rem auto; position: relative;  width: 22rem; height: 22rem;  border-radius: 24rem;  overflow: hidden;   object-fit: cover; filter: drop-shadow(-4px 5px 6px rgba(0, 0, 0, 0.15)); }


.hero_section .bg {  width: 150%; height: 150%; display: block; top: -25%; left: -25%; position: absolute;   }
.hero_section .bg img{  mix-blend-mode: multiply; object-fit: contain; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100%;}
.hero_section p{ max-width: 60ch; }
.hero_section .subtitle{ margin: 1rem 0; }
.hero_section .col_text{ display: flex; flex-direction: column; gap: 2rem; }

.services_template .hero_section em{ font-style: normal; font-size: 0.9em; letter-spacing: -0.05em; font-weight: lighter; font-family: "Roboto_Serif_italic_light";   }

/* paragraphe_conponent */

.paragraphe_conponent{ margin-top: 5rem; position: relative; display: flex;  }
.paragraphe_conponent:nth-child(odd){ flex-direction: row-reverse; }
.paragraphe_conponent .cover_wrapper{ display: flex; justify-content: center;    align-items: center; }
.paragraphe_conponent .cover{ margin: 2rem auto; position: relative;  }
.paragraphe_conponent .cover img{ filter:  drop-shadow(-4px 5px 6px rgba(0, 0, 0, 0.15)); }
.paragraphe_conponent .bg { width: 150%; height: 150%; display: block; top: -25%; left: -25%; position: absolute;   }
.paragraphe_conponent .bg img{ mix-blend-mode: multiply; object-fit: contain; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100%;}
.paragraphe_conponent ul{ margin: 1rem 0; }
.paragraphe_conponent li{   display: flex; align-items: center; gap: .5em; font-family: "Roboto_Condensed";  letter-spacing: 0.05em;  text-transform: uppercase; font-size: .9em; line-height: 1em; min-height: 1.6em; position: relative;     align-items: flex-start; }
.paragraphe_conponent li p{ line-height: 1.2em; padding-bottom: .6em; font-family: "Roboto_Condensed";  letter-spacing: 0.05em; }
.paragraphe_conponent li:before{  content: ""; width: .4em; height: .4em; background-color: var(--site-theme-color); position: relative; border-radius: 1em; margin-top: .5em;}
.paragraphe_conponent .col_text{ display: flex; flex-direction: column; gap: 1rem; }
.paragraphe_conponent .img_rounded:after{ width: 110%; height: 110%; position: absolute; top: -5%; left: -5%; border-radius: 100%; border: 8px solid white; content: ""; background: white; }
.paragraphe_conponent .img_rounded{ background: white; }

/* intro_component */

.intro_component{  margin-top: 2rem; position: relative; display: flex;  align-items: center; }
.intro_component .exergue_wrapper{ display: flex;  justify-content: center; }
.intro_component .exergue{ max-width: 26ch; border-left: 3px solid var(--site-theme-color);  line-height: 1.35em; padding: 1em 0 1em 1em; }
.intro_component a{  font-family: "Roboto"; text-decoration: underline; }
.intro_component .col_text{ display: flex; flex-direction: column; gap: 1rem; }

/* faq_component */

.faq_component{  padding: 6rem 0 8rem 0; width: 100%; overflow-x: hidden;  } 
.faq_component .titre_wrapper{ padding-bottom: 3rem; }
.faq_component .faq_wrapper{ max-width: 100ch; display: flex; flex-direction: column;  align-items: center; }
.faq_component .tab{ border-bottom: 1px solid var(--site-theme-color);  }
.faq_component input { position: absolute;  opacity: 0;  z-index: -1; }
.faq_component  .row {  display: flex; }
.faq_component .row .col {  flex: 1; }
.faq_component .row .col:last-child {  margin-left: 1em; }
.faq_component .tabs {   overflow: hidden; }
.faq_component .tab {   width: 100%;  overflow: hidden; }
.faq_component .tab-label { transition: all .3s; align-items: center;  display: flex;   justify-content: space-between;   padding: 1em;   font-weight: bold; cursor: pointer; }
.faq_component .tab-label::after { color: var(--site-theme-color);  content: "❯"; width: 1em; height: 1em; text-align: center; transition: all 0.35s; }
.faq_component .tab-content {  max-height: 0;  padding: 0 1em;  transition: all .5s cubic-bezier(0.05, 0.52, 0.2, 0.99); }
.faq_component .tab-close { display: flex; justify-content: flex-end;padding: 1em; cursor: pointer; }
.faq_component input:checked + .tab-label::after { transform: rotate(90deg); }
.faq_component input:checked ~ .tab-content { max-height: 100vh; padding: 1em; }
.faq_component input:checked ~ .tab-label{ color: var(--color_txt_alt)!important; }
.faq_component .tab-label:hover p{ padding-left: .3em; color: var(--color_txt_alt)!important; }
.faq_component .tab-label p{ transition: all .3s; }
/* skills_component  */

.skills_component{     padding: 6rem 0 8rem 0; background-size: 50rem; background-image: url("../images/bg/bg_skills.jpg"); background-repeat: repeat-x; }
.skills_component .skill_items{ margin-top: 5rem; display:flex; gap: 2rem; flex-direction: row;   }
.skills_component .skill_item{ line-height: 1.2em; filter: drop-shadow(-4px 5px 6px rgba(0, 0, 0, 0.15));  width: 100%; padding: 2rem; background: white; min-height: 10rem; border-radius: 1rem; }
.skills_component .skill_item .title{ margin-bottom: 2rem; position: relative; }
.skills_component .skill_item .title::after{ content: ""; position: absolute; width: 3rem; height: 3px;background-color: var(--site-theme-color); left: 50%; transform: translateX(-50%); bottom: -1rem;  }


/* affiliations_component */
.affiliations_component{      padding: 6rem 0 8rem 0; background-size: 50rem; background-image: url("../images/bg/bg_skills.jpg"); background-repeat: repeat-x; }
.affiliations_component .affiliations_items{ margin-top: 4rem; display: flex; gap:4rem;  justify-content: center; }
.affiliations_component .affiliations_item{  width: 13rem; height: 7rem; object-fit: contain; mix-blend-mode: multiply; }

/* page404 */

.page404{ text-align: center; align-items: center;  padding: 8rem; display: flex; flex-direction: column; gap: 1rem; justify-content: center; }
.page404 a{  font-family: "Roboto"; text-decoration: underline; }


/* maintenance_template */
.maintenance_template{ padding: 0; margin: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; }


/* portfolio_component */
.portfolio_component .items{ margin: 5rem ; display: flex;   flex-wrap: wrap; justify-content: center; gap: 4rem }
.portfolio_component .item{ width: 100%; max-width: 18rem;  }
.portfolio_component .item .cover_wraper{  width: 100%; margin-bottom: 2rem;  }
.portfolio_component .item .cover_wraper img{ padding-right: 2rem; width: 100%; height: 100%; aspect-ratio: 9 / 10;  object-fit: contain; }

/* chiffres_cles */
.chiffres_cles{  padding: 6rem 0 8rem 0; } 
.chiffres_cles .items{ padding: 5rem 0 0 0 ; display: flex;   flex-wrap: wrap; justify-content: center; gap: 3rem }
.chiffres_cles .item{ width: 100%; max-width: 12rem; display: flex; justify-content: center; align-items: center; gap: 0rem; flex-direction: column;  }


/* img_component */

.img_component{ padding: 5rem 0 ;   }
.img_component .img{ width: 60%; margin: 3rem auto; }

/* articles_component */
.articles_component{  padding: 5rem; background-size: 50rem; background-image: url("../images/bg/bg_skills.jpg"); background-repeat: repeat-x; }
.articles_component .items{ margin-top: 5rem; display:flex; flex-wrap: wrap; justify-content: center; gap: 2rem; flex-direction: row;   }
.articles_component .item{width: 100%; max-width: 18rem; line-height: 1.2em; filter: drop-shadow(-4px 5px 6px rgba(0, 0, 0, 0.15));  width: 100%; overflow: hidden; background: white; min-height: 10rem; border-radius: 1rem; }
.articles_component .item .cover_wraper{ aspect-ratio: 16/12; }
.articles_component .item .cover_wraper img{ width: 100%; height: 100%; object-fit: cover; }
.articles_component .item .title{ padding: 2rem 1rem 0rem 1rem; margin-bottom: .5em; }

.articles_component .categories{ display: flex; gap: 0.5rem; padding: 1rem; flex-wrap: wrap; }
.articles_component .categorie{ background-color: #dedede;  font-size: 12px; border-radius: 7px; padding: .3em .8em; color: #787878; }
.articles_component .tags{ position: absolute; bottom: 0; right: 0; padding: 10px; }
.articles_component .tags li{ background-color: #dedede; color: #000; font-size: 12px;  border-radius: 7px; padding: .3em .8em;  }

.articles_component .filtres_wrapper{     justify-content: center; gap:40px; display: flex; align-items: center; }
.articles_component .filtres_wrapper select{     width: fit-content;
    margin-top: 1rem;
    color: white;
    border: none;
    border-radius: .3rem;
    background: var(--site-theme-color);
    padding: 1rem;  border-radius: 8px; border: none;   }

.articles_component .filtres_wrapper .filter-tags{ }

.articles_component .filtres_wrapper button{ background: grey }
.articles_component .filtres_wrapper button.active{  background: var(--site-theme-color); }
/* contact_template */
.contact_template { padding: 14rem 0 5rem 0; }
.contact_template .contact_infos{ margin: 2rem 0; }
.contact_template .contact_infos .list_link_wrapper{ margin: 2rem 0; }
.contact_template .phone_mail{ margin: 2rem 0; display: flex; flex-direction: column;  }
.contact_template .contact_item{ transition: all .3s;  align-items: center; margin: 1rem 0; display: flex; flex-direction: row; gap: 1rem  }
.contact_template .contact_item .icon{ width:2rem }
.contact_template .list_link{ display: flex; align-items: center; gap: .5em; transition: all .3s;  font-family: "Roboto_Condensed";  letter-spacing: 0.05em;  text-transform: uppercase; font-size: .9em; line-height: 1em; height: 1.6em;  position: relative; }
.contact_template .list_link:hover{ color: var(--color_txt_alt); }
.contact_template .list_link:before{ content: ""; width: .4em; height: .4em; background-color: var(--site-theme-color); position: relative; border-radius: 1em; }
.contact_template .social_icon_link{ background: white; transition: all .3s; filter:  drop-shadow(-4px 5px 6px rgba(0, 0, 0, 0.15));  width: 2.5rem;  padding: 0.5rem; border: 2px solid var(--color_txt); border-radius: 2rem;  overflow: hidden; }
.contact_template .social_icon_link:hover{ transform: scale(1.05); filter:  drop-shadow(-4px 10px 6px rgba(0, 0, 0, 0.15));  border: 2px solid var(--color_txt_alt); }
.contact_template .social_icon_link img{  width: 100%; height: 100%; object-fit: contain; } 
.contact_template .social_icon_links{ margin: 2rem 0; display: flex; flex-direction: raw; gap: 1rem;  }
.contact_item:hover{ color: var(--color_txt_alt);  }
.honeypot {  position: absolute;    left: -9999px; }
.application-form textarea,
.application-form input{  font-family: "Roboto";  box-shadow: rgb(200, 208, 231) -2px 3.2px 8px 0px inset, rgb(255, 255, 255) 2px -3.2px 8px 0px inset;;  width: 100%; margin: 1rem 0;  padding: 0.5rem; border: 2px solid var(--color_txt); border-radius: 4px; background: #FFF; padding: 1rem; border: none; }
.contact_template .alert{ font-size: 14px; font-family: "Roboto"; color: var(--color_txt_alt); margin:1rem 0; padding: 1rem; border: 2px solid var(--site-theme-color); border-radius: 1rem; }
.contact_template .application-form label{ font-family: "Roboto";  font-size: 1rem; opacity: 0.4; }
.application-form input.button{ background-color: var(--site-theme-color); width: fit-content; box-shadow: none; float: right; margin-right: 2rem; }
.application-form .nobg{ background: none; box-shadow: none; }

/* lien_page_articles */
.lien_page_articles .maxwidth_container{ display: flex; flex-direction: column; gap: 1rem; margin-bottom: 5rem;}

.block-type-table { border-spacing: 5px; }
.block-type-table td{ border-bottom: 1px solid grey; padding: 1em; font-size: 14px; }
.block-type-table tr:first-of-type{ font-weight: bold; }
/*


/^^^^^^^                                                                        
/^^    /^^                                                                      
/^^    /^^          /^^          /^^^^      /^ /^^        /^^^^      /^^     /^^
/^ /^^            /^   /^^      /^^         /^  /^^      /^^          /^^   /^^ 
/^^  /^^         /^^^^^ /^^       /^^^      /^   /^^       /^^^        /^^ /^^  
/^^    /^^       /^                 /^^     /^^ /^^          /^^        /^/^^   
/^^      /^^       /^^^^        /^^ /^^     /^^          /^^ /^^         /^^    
                                            /^^                                 


*/



@media ( max-width: 800px){

  :root {
   --fontSize_unit: 8px; 
   --space_unit: 5vw; 
  }
  .txt_74 {  font-size: calc( var(--fontSize_unit) * 5); } 
  .txt_32 {  font-size: calc( var(--fontSize_unit) * 2.4); }
  html{ overflow-x: hidden; position: relative; min-width: 100vw; width: 100%; margin: 0; padding: 0; }
  body{ overflow-x: hidden; position: relative; min-width: 100vw; width: 100%; margin: 0; padding: 0;  }
  .col { padding: 0 1rem; }
  p{ font-size: 14px; }
  .footer{ flex-direction: column; justify-content: center; text-align: center; }
  .footer .col { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .footer .affiliations_items{ display: none; }
  .footer .col2{ margin: 2rem 0; text-align: center; } 
  .footer .signature {margin: 2rem 0; text-align: center; } 
  .paragraphe_conponent {   flex-direction: column!important; }  
  .hero_section .hero_section_container{   flex-direction: column!important; }  

  .intro_component{ flex-direction: column; }
  .intro_component .exergue_wrapper{ margin: 3rem 0; }
  .hero_section .cover{ width: 80vw; height: 80vw; border-radius: 80vw; }
  .skills_component .skill_items { flex-direction: column; }
  .affiliations_component .affiliations_items { gap: 2rem;  justify-content: center; flex-direction: column;  align-content: center;  align-items: center; }
  .affiliations_component .affiliations_item {  width: 8rem; height: 5rem; }
  .block-type-markdown p{ font-size: 18px; padding: 0 3ch;  }
  .affiliations_component {    padding: 4rem 0; }
  .skills_component {    padding: 4rem 0; }
  .hero_section {    padding: 4rem 0; }
  .portfolio_component .items{    margin: 4rem 0; }
  .portfolio_component .item{  width: 30vw;  }


  .main_logo { width: 8rem; padding: 1rem; }
  .header_navbar { justify-content: space-between; padding: 0 1rem ;  }
  .header_navbar .col{ width: auto; padding: 0.8rem 0rem; }
  .header_navbar .main_nav a{ padding: 0 1em ; }
    .header_navbar .languages{ position: fixed; top: .5rem; right: 2rem; }
  .header_navbar .languages a{ padding: 0 .5em 0 0 ; }
  .header_navbar .main_nav {    align-items: center; }
  .header_navbar .main_nav .link{   font-size: calc( var(--fontSize_unit) * 1.4); }
  .header_navbar .col1{ display: none; }
  .header_navbar .main_nav{  width: 100%; }
  .contact_template .cols_wrapper { flex-direction: column; }
  .contact_template { padding: 7rem 0 5rem 0; }
  .contact_template .txt_28{ font-size: calc( var(--fontSize_unit) * 2); }
  .articles_component{padding: 1rem; }
  .articles_component .filtres_wrapper{ flex-direction: column; }
  .articles_component .filtres_wrapper button{font-size: 12px; padding: 1em; }
  .articles_component .filtres_wrapper select{font-size: 12px; padding: 1em; }
}




@keyframes pageInV{
  0% {  transform: translateY(40px); }
  100% {  transform: translateY(0px); }
}


@keyframes pageInH{
  0% {  transform: translateX(-40px); }
  100% {  transform: translateX(0px); }
}

@keyframes fadeIn{
  to { opacity: 1; transform:translate3D(0,0,0) }
}


@keyframes ZoomAppear{
 from { padding-top: 0px; opacity: 0;  }
 to { padding-top: 0px;  opacity: 1;  }
}


@keyframes anim_contact_popup{
  0% {  opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes anim_titre_banner{
  0% {   width: 100%;   }
  100% {  width: 0%; }
}


@keyframes loop{
  0% {
    transform: rotateZ(0deg) ;
  }
  100% {
    transform: rotateZ(358deg) ;
  }
}