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

/*


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



@font-face {
  font-family: "regular";
  src: url("../fonts/Circular/CircularStd-Book.otf") format('truetype')
}

@font-face {
  font-family: "font_title";
   src: url("../fonts/Inria_Serif/InriaSerif-Italic.ttf") format('truetype') 


} 



/* 

@font-face {
  font-family: "font_title";
  src: url("../fonts/Archia/archia-regular-webfont.ttf") format('truetype')
} */


/* 

@font-face {
  font-family: "font_title";
   src: url("../fonts/argestadisplay/argestadisplay-regular-webfont.ttf") format('truetype')
} */


/*


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

*/

:root {
  --black :  #0a0a0a;
  --color_txt : white;  
  --color_bg: #0a0a0a;
  --fontSize_unit: 10px;

  /* --fontSize_unit: .45vw; */



	--color-text: #fff;
	--color-link: #fff;
	--color-link-hover: #a2a2a2;
	--perspective: 1000px;
	--grid-item-translate: 40px;
	--grid-item-ratio: 3/4;
	--grid-item-radius: 0px;
	--grid-gap: 7vw;
	--grid-gap-column: 13vw;
	--grid-columns: 3;
	--grid-width: 100%;
	--grid-max-width: 80vw;

	--container-max-width: 1300px;
  --grid-unit: calc(var(--grid-max-width) / 11);

  --swiper-theme-color: cyan;
  --swiper-pagination-bullet-inactive-color: white;
}




/*

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

                                                           */


                                                           
/* fonts families */

                   
/* 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_24 { font-size: calc( var(--fontSize_unit) * 2.4);  }
.txt_34{ font-size: calc( var(--fontSize_unit) * 3.4);  }
.txt_48{ font-size: calc( var(--fontSize_unit) * 4.8) ; line-height: 1em;  }




.maj{ text-transform: uppercase;    }
.titre{ line-height: 1.1em; margin-bottom: 0.5em; }
.color_txt{ color: var(--color_txt_alt); }
.regular{ font-family: 'regular';   }
.italic{  font-style: italic; }
.centered{ text-align: center; margin: auto; }
.font_alt{ font-family: "font_title" }
.font_title{ font-family: "font_title"; line-height: 1.1em; }
.text_grey{ color: #9b9b9b; }
.txt_white{ color: white; }

/*

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

*/



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




html{ background-color: var(--color_bg);   top:0; left: 0; margin: 0; padding: 0; width:100%;-webkit-font-smoothing: antialiased;   box-sizing: border-box;  position: relative;  text-rendering: optimizeLegibility;   }
body{   min-height: 100vh; background-color: var(--color_bg); font-family: "regular"; font-weight: 500; font-size: 1rem; line-height: 1.35em;   width: 100%; color: var(--color_txt); margin: 0; padding: 0; top:0; left: 0; } 




div{  position: relative; display: block;  }
header, main{ width: 100%; ;  }
section{ padding:  0; width: 100%;}
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,h5,h6{  letter-spacing: -0.04em; text-transform: uppercase;; font-family: "font_title"; font-weight: 400!important;  width: fit-content;  display: block; margin: 0 ; clear: both; break-after: always;  font-size: 1em; line-height: 1.15em;   font-weight: 400 } 
a{ display: block; color: var(--color_txt); text-decoration: none;  }
a:hover{ cursor: pointer; text-decoration: none;  }
p{ letter-spacing: -0.02em; font-size: inherit;  width: fit-content; max-width: 80ch; clear: both; display: block; padding: 0; margin: 0; position: relative;  line-height: 1.65em;  font-style: normal; }
p a{ text-decoration: underline;  color: var(--color_txt_alt); display: inline; }
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; }
.button:hover{ filter: brightness(1.2); cursor: pointer; }
a.underline{ text-decoration: underline; }




/* 


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

*/


.opacity02{ opacity: 0.2!important; }

.icon_plus{ width: 3rem; height: 3rem;  }
.txt_grey{ color: rgba(255,255,255,0.4); }
.link_plus { display: flex; gap:.5rem; align-items: center; transition: all .3s ease-in-out; }
/* .link_plus:hover{ gap: .8rem;  } */
.link_plus:hover .icon_plus{ transform: scale(1.1); }

.link_plus .icon_plus{ width: 2rem; height: 2rem; transition: all .3s ease-in-out; }
.link_plus .link_plus_txt{ z-index: 2; font-size: calc( var(--fontSize_unit) * 1.2) ; font-weight: 800; letter-spacing: 0.05em;  }

.floatRight{ text-align: right; }

/* Page Loader */
.loading::before {content: ''; 	position: fixed; 	z-index: 4000; }
.loading::before {top: 0; left: 0;	width: 100%;	height: 100%;	background: var(--color_bg); }
.loading::after { content: ''; 	position: fixed; 	z-index: 4000; }
.loading::after { top: 50%; left: 50%; width: 60px;	height: 60px;	margin: -30px 0 0 -30px;	border-radius: 50%;opacity: 0;background: var(--color-link);animation: loaderAnim 0.7s ease-in-out infinite alternate forwards; }

@keyframes loaderAnim {
	to {
		opacity: 1;
		transform: scale3d(0.8,0.8,1);
	}
}


.diagonale{ width:4rem; height: 1px; opacity: 0.3; background: white; transform: rotate(-45deg); }

.swiper-pagination-bullet{ z-index: 55; transition: all .17s ease-out; width: 2rem; height:  1rem; background: none; border-bottom: 1px solid var(--swiper-pagination-bullet-inactive-color); border-radius: 0;  } 
.swiper-pagination-bullet:hover{ cursor: pointer; opacity: 1; }
.swiper-pagination-bullet-active{  border-bottom: 1px solid var( --swiper-theme-color ); }


/*

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

.page_wrapper { position: absolute; top: 0; left: 0; }

.ui_map{   position: fixed; top: 2rem; right: 2rem; z-index: 10; }
.ui_logo_wrapper{  position: fixed; top: 2rem; left: 2rem; width: 70px; z-index: 100; }

.main_container{ width: 100%; margin: 0 auto; padding: var(--grid-unit); max-width: var(--container-max-width);  }


.images_load_list img{ z-index: -1; width: 10px; opacity: 0; }



.link_txt_grey{ color: #fff; opacity: 0.3; }
.link_txt_grey:hover{ color: #fff; opacity: 0.5; }


.button_primary{ font-size: 12px; text-transform: uppercase; background-color: white; font-weight: 600; color: black; letter-spacing: 0.03em; padding: .5em 2em; border-radius: 1rem;  }


.wallpapers_template .wallpapers{ display: flex; flex-direction: column; gap: 120px; }
.wallpapers_template .wallpaper{ display: flex; flex-direction: column; gap: 20px; align-items: flex-end; }

.burger{ display: none; }



/*




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

*/

.fullscreen_btn{ opacity: 0.5; }
.fullscreen_btn:hover{ opacity: 0.8; cursor: pointer; }
.fullscreen_btn .icon_fs{ display: block;  }
.fullscreen_btn .icon_fs_back{ display: none; }
.fullscreen_btn.isFull .icon_fs{ display: none; }
.fullscreen_btn.isFull .icon_fs_back{ display: block; }
.title_bg{ font-size: 180px; opacity: .03; z-index: 0; mix-blend-mode: difference; position: fixed; top: 50% ; left: 50%; transform: translate(-50%, -50%); }

.footer_left_wrapper{ gap: 1em;  display: flex; flex-direction: row; align-items: start; position: fixed; bottom: 2rem; left: 2rem; z-index: 3; }
.footer_right_wrapper{ gap: 1em;  display: flex; flex-direction: row; align-items: end; position: fixed; bottom: 2rem; right: 2rem; z-index: 3; }
.top_right_wrapper{ gap: 1em;  display: flex; flex-direction: row; align-items: start; position: fixed; top: 2rem; right: 2rem; z-index: 10; }
.top_right_wrapper .diagonale{ transform: rotate(45deg); position: absolute; top: 1rem; right: 2rem; }

.ui_languages{ gap: 0; display: flex; flex-direction: row; align-items: end;  justify-content: center; align-items: center; }
.ui_languages a{  opacity: 0.3; }
.ui_languages a.activ{  opacity: 0.7; }
.ui_languages a{ display: flex; gap: .5em; justify-content: center; align-items: center; }
.ui_languages a:nth-child(1)::after{ content: ""; background-color: white; position: relative; display: block; height: 1px; width: 2ch;   }
.ui_languages a:nth-child(2)::before{ content: ""; background-color: white; position: relative; display: block; height: 1px; width: 2ch;   }
.footer_center_wrapper{ gap: 1em; color: #fff; display: flex; flex-direction: row; align-items: center; position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 1; }


/* 


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

*/


/* Homepage */
.home_template { width: 100vw; height: 100vh; max-height: 100svh;  justify-content: center; align-items: center; display: flex; justify-content: center; }
.home_template .intro_container{ width: 800px; display: flex; justify-content: center; flex-direction: column; gap: 60px;  align-items: center; max-width: 80vw; }
.home_template .intro_swiper{ width: 100%; min-height: 100px; padding-bottom: 60px;  }
.home_template .intro_container p{ line-height: 1.35em; max-width: 58ch; text-align: center; }
.home_template .swiper-slide{ text-transform: uppercase; display: flex;  align-items: center; flex-direction: column; justify-content: center; }




.cloud_atlas{ position: absolute; top: 0; left: 0;  width: 100vw;  height: 100vh; overflow: hidden; }







.maintenance_template .maintenance_wrapper{  width: 100%; height: 100vh;  gap: 5rem;    align-items: center; display: flex; flex-direction: column; justify-content: center; }
.maintenance_template .main_logo{ width: 5rem; }



/* .map_template  */
.map_template{  width: 100vw; height: 100dvh; overflow-y: hidden;}
.map_template .map{  width: 100vw; height: 100dvh; position: relative; background-color: black; }

.map_template .leaflet-popup-content-wrapper{ background:none!important }
.map_template .leaflet-popup-content{ animation: fadeInleafletPopupContent  1s cubic-bezier(0.17, 0.9, 0.46, 1) 0s  1 normal forwards; min-width: 280px; height: 280px; margin: 0; padding: 0;  border-radius: 5px;   }
.map_template .leaflet-popup-content-wrapper{padding: 0; box-shadow: 0 13px 14px rgba(0,0,0,0.4); }
.map_template .leaflet-popup-content a{  width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center;    align-items: center; }
.map_template .leaflet-popup-content a *{ color: white; text-align: center; z-index: 3; }
.map_template .leaflet-popup-content img{ transition: all .3s ease-out;   width: 100%; height: 100%;  object-fit: cover;  border-radius: 5px;  }
.map_template .leaflet-popup-content .img_wrapper{  animation: fadeInImgWrp  1.5s cubic-bezier(0.17, 0.9, 0.46, 1) 0s  1 normal forwards;  width: 100%; height: 280px; z-index: 2; margin-bottom: 0rem;   }
.map_template .leaflet-popup-content .img_wrapper:after{  content: ""; background: linear-gradient(rgba(0,0,0,0) 0%,  rgba(0,0,0,0.9) 100%) ;; position: absolute; width: 100%; height: 100%; top: 0; left: 0;   }
.map_template .leaflet-popup-content .title{ font-size: calc(var(--fontSize_unit) * 2.4); opacity: 0;  animation: fadeIn  1s cubic-bezier(0.17, 0.9, 0.46, 1) .3s  1 normal forwards;; max-width: 100%; padding: 0 ; }
.map_template .leaflet-popup-content .line{ display: none; opacity: 0;  animation: fadeIn  .8s cubic-bezier(0.17, 0.9, 0.46, 1) .4s  1 normal forwards;; width: 3rem; margin: 1rem 0; position: relative; transition: all .3s .2s ease-out; height: 1px; background: #666;  }
.map_template .leaflet-popup-content .year{ font-size: calc(var(--fontSize_unit) * 1.4); margin-top: 8px;  opacity: 0;  animation: fadeIn  .7s cubic-bezier(0.17, 0.9, 0.46, 1) .5s  1 normal forwards; }
.map_template .leaflet-popup-content .pagination{ position: absolute; top: 20px; right: 20px; opacity: 0.4; writing-mode: vertical-rl;  }
.leaflet-popup-close-button{display: none;}
.map_template .leaflet-popup-content .txt_wrapper{ display: flex; justify-content: center;  align-items: center; flex-direction: column; position: absolute; bottom: 0; width: 100%; ; padding: 2rem 1rem 1rem 1rem; }
.map_template .leaflet-popup-content:hover img{ filter: brightness(1.3);   }
.map{ z-index: 2; box-shadow: 0 13px 14px rgba(0,0,0,0.4);  }
.map_template .leaflet-popup-content-wrapper{ padding: 0; }
.map_template .leaflet-container a.leaflet-popup-close-button{ color: white; }
.map_template .leaflet-popup-content-wrapper, .leaflet-popup-tip{ background: #000; }
.map_template .leaflet-popup-tip{ background: #000!important; opacity: 0; }
.leaflet-control-attribution{ display: none; }
.map_template .leaflet-popup-content-wrapper {  padding: 0px; }
.map_template .leaflet-marker-icon:hover { transform: scale(1.5) }
.map_template .leaflet-marker-icon{ animation: LoopMapMarker  1s cubic-bezier(0.17, 0.9, 0.46, 1) 0s  infinite normal forwards; }
.map_template .leaflet-marker-icon:nth-child(3n+1){ animation: LoopMapMarker  1s cubic-bezier(0.17, 0.9, 0.46, 1) 1.5s  infinite normal forwards; }
.map_template .leaflet-marker-icon:nth-child(3n+2){ animation: LoopMapMarker  1.8s cubic-bezier(0.17, 0.9, 0.46, 1) 2.2s  infinite normal forwards; }
.map_template .leaflet-marker-icon:nth-child(3n+3){ animation: LoopMapMarker  1s cubic-bezier(0.17, 0.9, 0.46, 1) 1.3s  infinite normal forwards; }
.map_template .leaflet-marker-icon:nth-child(4n+4){ animation: LoopMapMarker  1.8s cubic-bezier(0.17, 0.9, 0.46, 1) 1.4s  infinite normal forwards; }
.map_template .leaflet-marker-icon:nth-child(5n+5){ animation: LoopMapMarker  1s cubic-bezier(0.17, 0.9, 0.46, 1) 1.5s  infinite normal forwards; }
.map_template .leaflet-marker-icon:nth-child(6n+6){ animation: LoopMapMarker  1.8s cubic-bezier(0.17, 0.9, 0.46, 1) 1.6s  infinite normal forwards; }
.map_template .leaflet-marker-icon::after{ display: block; position: absolute; top:0; left:0; transform: translate(-50%,-50%); content:""; background: green; width: 2rem; height: 2rem; border-radius: 2rem; }
.map_template .mapnavbar{ background: rgba(0, 0, 0, 0.15); gap: 20px; z-index: 22; display: flex; justify-content: space-between; align-items: center;    backdrop-filter: blur(8px); padding: 18px;  position: fixed; bottom: 5rem; left: 50vw; transform: translateX(-50%); padding: 20px; border-radius: 1rem; border: 1px solid rgb(27, 27, 27); border-top: 1px solid  #212121;  min-width: 350px; min-height: 20px;  }
.map_template .seriesNav{ display: flex; justify-content: space-between; align-items: center;  gap: 10px; }
.map_template button{ letter-spacing: 0.01em; text-transform: uppercase; font-size: 12px; margin: 0; padding: 10px; opacity: 0.6;}
.map_template button:hover{  opacity: 1; cursor: pointer; }
.map_template button.active{  opacity: 1;}
.map_template .prevNext{ display: flex; justify-content: space-between; align-items: center;  }
.map_template .prevNext button{ display: flex; justify-content: space-between; align-items: center;  width: max-content; }

.use_kb{ position: fixed; bottom: 6.7rem; right: 2rem; z-index: 11; font-size: 10px; display: flex; gap: 10px;  color: #666;   align-items: flex-start; }

.images_load_list{ display: none; }
.fancybox__backdrop{  backdrop-filter: blur(4px);  }

/* item_template */


.has-iframe .fancybox__content{ max-width: 1200px; background: none; }
.has-iframe .fancybox__content body{  background: red; }
.item_template {  display: flex; height: 100%; width: 100%; border: 1px solid black; }
.item_template .content_wrapper{ display: flex;  width: var(--grid-width);   max-width: var(--grid-max-width);  height: 80vh; gap: var(--grid-unit);  }
.item_template .item_template_swipper{ width:60vw; height: 100%;   }
.item_template .swiper-wrapper{ width: 100%; height: 100%;  }
.item_template .item_template_swipper .swiper-slide{ width: 100%; height: 100%;  background: none; z-index: 1; display: flex; justify-content: center;  }
.item_template .item_template_swipper .swiper-slide img { width: 100%; height: 100%; object-fit: cover;}
.item_template .item_template_swipper .swiper-slide img.noCrop_true{  object-fit: contain;}
.item_template .swiper-wrapper::after{ z-index: 10; background: linear-gradient(0deg, rgba(0,0,0,0.455641631652661) 0%, rgba(0,0,0,0) 100%); content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; }
.item_template .swiper-pagination{ z-index: 11; }
.item_template .invisibleNext{  z-index: 50; width: 100%; height: 90%; top: 0; left: 0; position: absolute; }
.item_template .invisibleNext:hover{ cursor:pointer;   }
.item_template .year_loc{ text-transform: uppercase;  display: flex; align-items: center; gap: 1rem;  }
.item_template .year_loc .line{ width: 4rem; transition: all .3s .2s ease-out; height: 1px; background: #666; opacity: 0.7; }
.item_template .year_loc .localisation{ letter-spacing: 0.02em; }
.item_template .col_text{  display: flex; flex-direction: column; gap: 2rem;   overflow-y: auto;  height:100%; }
.item_template .col_text p{ line-height: 1.3em; letter-spacing: 0em; }
.item_template .icon{ width: 24px;  }
.item_template .link_related{  display:flex; margin: 5px 0;  align-items: center;}
.item_template .link_related:hover{ color: white; }
.item_template .next_txt{ margin: 2em 0; }
.item_template .col_text_wrapper{ width: 40vw; height: 100%; padding: 2rem; display: flex; flex-direction: column; gap: 2rem; justify-content: center;  }
.item_template .col_text_wrapper .story{ overflow-y: auto; padding-right:3ch ; }
.item_template .col_text_wrapper ::-webkit-scrollbar {  width: 6px; }
.item_template .col_text_wrapper ::-webkit-scrollbar-track {  background: var(--color_bg);  }
.item_template .col_text_wrapper ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2);  }


/* default_writer_page */
.default_writer_page{ width: 800px; max-width: 100%; margin: 0 auto; } 
.default_writer_page p{ font-size: calc( var(--fontSize_unit) * 1.4);  }
.default_writer_page h1{   margin: 1em 0;  font-size: calc( var(--fontSize_unit) * 5.2);  }
.default_writer_page h2{   margin: 1em 0; font-size: calc( var(--fontSize_unit) * 4.2);   }
.default_writer_page h3{  margin: 1em 0; font-size: calc( var(--fontSize_unit) * 3.4);  }
.default_writer_page h4{  margin: 1em 0;  font-size: calc( var(--fontSize_unit) * 2.4);  }
.default_writer_page h5{  margin: 1em 0;  font-size: calc( var(--fontSize_unit) * 1.8) ;}
.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;  }


.map_template .leaflet-control-container{ top:0; left:0; height: 100dvh; width: 100%; }
.leaflet-left .leaflet-control{ margin: 0!important; position: absolute!important; display: flex; flex-direction: column; gap: 5px; filter: drop-shadow(0,0,0,0) ; background: rgba(0, 0, 0, 0.15); padding: 5px; backdrop-filter: blur(8px); border-radius: 2rem; top: 100vh; left: 2rem; transform: translateY(calc( -100% - 5rem )); }
.leaflet-bar a{ background: black!important; color: white!important; border: 1px solid rgb(27, 27, 27)!important;  border-top: 1px solid #212121!important; border-radius: 20px!important; display: flex; align-items: center; justify-content: center;}
.leaflet-touch .leaflet-bar a:first-child{ border: 1px solid rgb(27, 27, 27)!important;  border-top: 1px solid #212121!important;  }
.leaflet-touch .leaflet-bar a{  line-height:1.1em!important; opacity: 0.7; }
.leaflet-touch .leaflet-bar a:hover{  opacity: 1; }
.leaflet-bar a.leaflet-disabled{ opacity: 0.3; }
/*


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


*/







@media ( max-width: 800px){

  :root {
    --fontSize_unit: 6px; 
    --grid-max-width: 100vw;
  }
  .burger{ z-index: 200; transition: all .17s; display: flex; gap: 3px; flex-direction: column;justify-content: center;  align-items: center;  justify-items: center; width: 40px; height: 40px;  border-radius: 100%;  border: 1px solid rgb(48, 48, 48)!important;  border-top: 1px solid #454545!important;  border-radius: 40px; }
  .burger:hover{ gap: 5px; cursor: pointer; }
  .burger span{ transition: all.17s; transform-origin: center; width: 18px; height: 1.5px; opacity: 0.6; background-color: var(--color_txt); border-radius: 2px; }

  .shownav .burger{ --color_txt: white;  }
  .shownav .burger span{ position: absolute; }
  .shownav .burger span:nth-child(1){ transform: rotate(45deg)  }
  .shownav .burger span:nth-child(2){ transform: rotate(-45deg) }
  .shownav .burger span:nth-child(3){ transform: rotate(-45deg) }
  .shownav .navbar{  transform: scale(1) translateY(0%);   visibility: visible; opacity: 1; }

  .txt_12 { font-size: 12px ;  }
  .txt_14 { font-size: 14px ;  }
  .txt_16 { font-size: 16px ;  }
  .txt_24 { font-size: 18px ;  }
  .txt_34{ font-size: calc( var(--fontSize_unit) * 3.4);  }
  .txt_48{ font-size: calc( var(--fontSize_unit) * 4.8) ; line-height: 1em;  }
  .home_template{ height: 100dvh; overflow: hidden; }
  .home_template .intro_container{  gap: 5vh;  height:80dvh; padding: 15vh 0 0vh 0; }
  .grid__item{     aspect-ratio: 3 / 4; }

  .cloud_atlas{  --grid-columns:4;}
  .columns{ --grid-max-width: 100%; --grid-gap: 5vw; padding: 0 5vw; --grid-columns: 1; }
  .column { padding-top: 0!important; transform:none!important }
  .top_right_wrapper{ position: absolute;  }
  .ui_logo_wrapper {  position: absolute; width: 70px; left: 2rem ; top: 2rem; }
  .home_template .zone_intro { padding-top: 8rem; padding-bottom: 8rem;  flex-direction: column; align-items: flex-start;   }
  .home_template .intro_txt{ width: 100%; }
  .home_template .intro_map_txt{ max-width: none; width: 100%; gap: 2em; padding: 0; align-items: center; margin: 0 auto; }
  .footer_left_wrapper{ bottom: 1rem; left: 1rem;  }
  .footer_right_wrapper{bottom: 1rem; right: 1rem;  }
  .column__item .infos_wrapper{ opacity: 1; --fontSize_unit: 2vw; }

  .map_template .intro_txt .title{  font-size: calc( var(--fontSize_unit) * 3); padding-top: 20vw; }

  .item_template { flex-direction: column; }
  .item_template .item_template_swipper{ width: 100%; }
  .item_template .col_text_wrapper{ padding: 0; }
  .item_template .item_template_swipper { width: 100%;  height: auto; }
  .item_template .swiper-wrapper {  width: 100%;  height: auto; }
  .item_template .swiper-slide {  width: 100%;  height: auto; }
  .item_template .item_template_swipper .swiper-slide img{  width: 100%;  height: auto; }
  .item_template .invisibleNext{ display: none; }
  .item_template .col_text_wrapper{ width: 100%;height: auto; }
  .swiper{ overflow: unset; }
  .item_template .col_text_wrapper .story{ overflow-y: unset; }
  .item_template .col_text { height: auto;  overflow-y: unset; padding: 2rem 1rem; }
  .item_template .col_text_wrapper .story { padding-right: 1ch; }
  .map_template .leaflet-control-container{ display: none; }

  .shownav .mapnavbar{ left: 50%; position: fixed; width: 96%; height: 96dvh; top: 2vh;  justify-content: center; flex-direction: column; align-items: center;  }
  .shownav .mapnavbar .prevNext{ display: none; }
  .mapnavbar .seriesNav .serie-btn{ display: none; }
  .mapnavbar .seriesNav .serie-btn.active{ display: block; }
   .shownav  .mapnavbar .seriesNav .serie-btn{ display: block; }
  .map_template .seriesNav{ flex-direction: column; align-items: center; }
  .map_template .mapnavbar{  }
}



@keyframes LoopMapMarker{
  0% { opacity: 1; }
  40% { opacity: 1; }
  50% { opacity: 0; }
  60% { opacity: 1; }
  100% {  opacity: 1; }
}
@keyframes animation{
  0% {  transform: translateY(40px); }
  100% {  transform: translateY(0px); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInMapImg {
  from { filter: brightness(0);; }
  to { filter: brightness(1);; }
}




@keyframes fadeInTransTop {
  from { transform: translateY(20px); opacity: 0 }
  to {  transform: translateY(0px);  opacity: 1   }
}

@keyframes fadeOutTransTop {
  from {  transform: translateY(0px);  opacity: 1   }
  to { transform: translateY(20px); opacity: 0 }
}

@keyframes fadeInleafletPopupContent {
  from { transform: translateY(10px); opacity: 0 }
  to {  transform: translateY(0px);  opacity: 1   }
}

@keyframes fadeInImgWrp {
  from { opacity: 0 }
  to {  opacity: 1   }
}


@keyframes anim_titre_in{
  from { transform: translateY(60px); opacity: 0 }
  to {  transform: translateY(0px);  opacity: 1   }
}