@charset "utf-8";
/* CSS Document */
/*-----------------*/
html {
  scroll-behavior: smooth;
}
a {
  text-decoration: none;
  color: inherit;
}
a:focus {
  outline: none;
}
body {
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  color: #0C244F;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 21px;
  line-height: 1.6em;
  -webkit-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  outline: none;
}
img {
    display: block;
    margin-top: 10px;
    /*box-shadow: 0 0 20px 0px #0c244f1f;*/
	width: 60%;
    max-width: 100%;
}
/*-----------Traduction btn---------*/
.tradchoice-FR {
  position: absolute;
  top: 40px;
  right: 85px;
  min-width: 26px;
  max-width: calc(100% - 10px);
  max-height: calc(100% - 10px);
  border: 1px solid #fff;
  color: #fff;
  margin: auto;
  padding: 10px;
  text-align: center;
  border-radius: 50px 0 0 50px;
  font-size: 0.9em;
}
.tradchoice-DE {
  position: absolute;
  top: 40px;
  right: 40px;
  min-width: 26px;
  max-width: calc(100% - 10px);
  max-height: calc(100% - 10px);
  border: 1px solid #fff;
  color: #fff;
  margin: auto;
  padding: 10px;
  text-align: center;
  background: linear-gradient(to left, transparent 50%, white 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  transition: background .5s ease;
  border-radius: 0 50px 50px 0;
  font-size: 0.9em;
}
.trad-active {
  background-color: #fff;
  color: #000;
}
.tradchoice-DE:hover {
  color: #000;
  background-position: left bottom;
}
/*----------------------------------*/
h1 {
  margin: 0 auto;
  text-align: left;
  vertical-align: middle;
  color: #fff;
  width: 80%;
  top: calc(50vh - 430px);
  max-width: 1200px;
  padding: 5%;
  font-size: 4.6em;
  line-height: 1em;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-style: normal;
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  position: relative;
  text-shadow: 0 0 70px #0C244F;
}
/*------------------------------------------*/
#header {
  position: relative;
  min-height: 70vh;
  -webkit-overflow-scrolling: touch;
  overflow: hidden;
  z-index: 10;
}
#header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(255, 255, 255);
  background: -webkit-linear-gradient(to top, #00000000 60%, #000000c2 100%);
  background: -o-linear-gradient(to top, #00000000 60%, #000000c2 100%);
  background: linear-gradient(to top, #00000000 60%, #000000c2 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000", endColorstr="#000000", GradientType=1);
}
#header::after {
  content: "";
  position: absolute;
  background: url("img/ETHICH-LEAF-ICONS-White.svg") no-repeat;
  bottom: -50px;
  right: -50px;
  width: 340px;
  height: 300px;
  background-size: contain;
}
#background-video {
  height: 100vh;
  width: 100vw;
  object-fit: cover;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}

#logo-ethich {
  background-image: url("img/Logo-ETHICH-White.svg");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  width: 100%;
  height: 100%;
  max-height: 164px;
  max-width: 133px;
  top: 40px;
  left: 40px;
}
#logo-assm {
  background-image: url("img/logo-SAMW-ASSM.png");
  background-size: contain;
  background-repeat: no-repeat;
	position: absolute;
    height: 80px;
    width: 195px;
    filter: brightness(10);
    bottom: 40px;
    left: 40px;
}

#introduction, #carte-ethich-infos, #carte-ethich-legende {
  width: 80%;
  max-width: 1200px;
  margin: 5% auto;
}
#carte-ethich-infos {
  background-color: #0c244f;
  color: white;
  text-align: center;
  padding: 2% 0;
  border-radius: 300px;
}
#legende {
  width: 100%;
  margin: 50px auto 0;
  text-align: center;
}
#legende p {
  position: relative;
  z-index: 0;
}
.legende-flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
align-items: stretch;	
  align-content: flex-end;
  grid-gap: 10px;
  font-size: .8em;
  line-height: 1em;
}
.legende-flex-items:nth-child(1) {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
  background-color: #0C244F;
  padding: 10px 15px;
  color: white;
  border-radius: 300px;
}
.legende-flex-items:nth-child(2) {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
  background-color: #C43302;
  padding: 10px 15px;
  color: white;
  border-radius: 300px;
	align-content: center;
}
.legende-flex-items:nth-child(3) {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
  background-color: #EDAA25;
  padding: 10px 15px;
  color: white;
  border-radius: 300px;
}
.legende-flex-items:nth-child(4) {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
  background-color: #0A7373;
  padding: 10px 15px;
  color: white;
  border-radius: 300px;
}
#map {
  background-image: url("img/swiss-map.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  aspect-ratio: auto 1212/821;
  position: relative;
  margin: auto;
  max-width: 1100px;
}
.btn-map {
  width: 30px;
  height: 20px;
  text-align: center;
  color: white;
  line-height: 22px;
  font-size: 15px;
  font-family: 'neusa-next-std-compact', sans-serif;
  border-radius: 100px;
  position: absolute;
  cursor: pointer;
  transition: all ease-in-out .3s;
  z-index: 0;
}
.btn-map:hover {
  transform: scale(1.2);
  border: 1px solid white;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
  transition: all ease-in-out .3s;
  z-index: 1;
}
.outils-color {
  background-color: #0C244F;
}
.gouvernance-color {
  background-color: #C43302;
}
.formation-color {
  background-color: #EDAA25;
}
.analyse-color {
  background-color: #0A7373;
}
.txt-outils-color {
  color: #0C244F;
}
.txt-gouvernance-color {
  color: #C43302;
}
.txt-formation-color {
  color: #EDAA25;
}
.txt-analyse-color {
  color: #0A7373;
}
#GENEVE1 {
  top: 72%;
  left: 0%;
}
#GENEVE6 {
  top: 72%;
  left: 3%;
}
#GENEVE14 {
  top: 72%;
  left: 6%;
}
#GENEVE15 {
  top: 72%;
  left: 9%;
}
#GENEVE17 {
  top: 72%;
  left: 12%;
}
#GENEVE18 {
  top: 72%;
  left: 15%;
}
#GENEVE23 {
  top: 75%;
  left: 0%;
}
#GENEVE29 {
  top: 75%;
  left: 3%;
}
#GENEVE30 {
  top: 75%;
  left: 6%;
}
#GENEVE35 {
  top: 75%;
  left: 9%;
}
#GENEVE47 {
  top: 75%;
  left: 12%;
}
#GENEVE49 {
  top: 75%;
  left: 15%;
}
#BERNE2 {
  top: 52%;
  left: 33%;
}
#BERNE3 {
  top: 52%;
  left: 36%;
}
#BERNE7 {
  top: 52%;
  left: 39%;
}
#BERNE16 {
  top: 55%;
  left: 33%;
}
#BERNE27 {
  top: 55%;
  left: 36%;
}
#BERNE45 {
  top: 55%;
  left: 39%;
}
#BALECAMPAGNE4 {
  top: 15%;
  left: 35%;
}
#BALECAMPAGNE25 {
  top: 15%;
  left: 38%;
}
#ALLEMAGNE5 {
  top: 6%;
  left: 84%;
}
#ALLEMAGNE8 {
  top: 6%;
  left: 87%;
}
#ALLEMAGNE19 {
  top: 6%;
  left: 90%;
}
#ALLEMAGNE20 {
  top: 9%;
  left: 84%;
}
#ALLEMAGNE44 {
  top: 9%;
  left: 87%;
}
#NEUCHATEL9 {
  top: 39%;
  left: 17%;
}
#VAUD10 {
  top: 56%;
  left: 3%;
}
#VAUD11 {
  top: 56%;
  left: 6%;
}
#VAUD12 {
  top: 56%;
  left: 9%;
}
#VAUD13 {
  top: 56%;
  left: 12%;
}
#VAUD22 {
  top: 56%;
  left: 15%;
}
#VAUD24 {
  top: 59%;
  left: 3%;
}
#VAUD32 {
  top: 59%;
  left: 6%;
}
#VAUD34 {
  top: 59%;
  left: 9%;
}
#VAUD36 {
  top: 59%;
  left: 12%;
}
#VAUD37 {
  top: 59%;
  left: 15%;
}
#VAUD40 {
  top: 62%;
  left: 3%;
}
#VAUD46 {
  top: 62%;
  left: 6%;
}
#VAUD50 {
  top: 62%;
  left: 9%;
}
#SAINTGALL26 {
  top: 31%;
  left: 71%;
}
#BALEVILLE28 {
  top: 10%;
  left: 33%;
}
#BALEVILLE31 {
  top: 10%;
  left: 36%;
}
#BALEVILLE39 {
  top: 10%;
  left: 39%;
}
#BALEVILLE41 {
  top: 10%;
  left: 42%;
}
#ARGOVIE33 {
  top: 22%;
  left: 47%;
}
#ARGOVIE43 {
  top: 22%;
  left: 50%;
}
#ZURICH38 {
  top: 19%;
  left: 57%;
}
#ZURICH48 {
  top: 19%;
  left: 60%;
}
#LUCERNE42 {
  top: 35.8%;
  left: 47.5%;
}
#ZOUG21 {
  top: 33%;
  left: 56%;
}
#footer {
	margin: 100px auto 10px;
	font-size: 12px;
	line-height: 1em;
	text-align: center;
}
/*-------------MODAL--------------------*/
.sup-modal {
  color: #0C244F;
  font-size: .6em;
}
.titre-modal-figure {
  text-align: center;
  width: 100%;
  max-width: 500px;
  margin: 20px auto 0;
  display: block;
  font-size: 1.1em;
  font-weight: 600;
  position: relative;
}
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 999;
  overflow-y: scroll;
	line-height: 1.2em;
}
/* Hiding scrollbar for Chrome, Safari and Opera */
.modal::-webkit-scrollbar {
  display: none;
}
.modal {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.modal-content {
  background-color: #fff;
  margin: 5% auto;
  padding: 50px;
  width: 80%;
  position: relative;
  font-size: 16px;
  max-width: 1100px;
  z-index: 0;
  border-radius: 30px;
}
.close-modal-btn {
  line-height: 0;
  cursor: pointer;
  position: absolute;
  right: -20px;
  top: 3px;
  color: white;
  font-size: 1.6em;
  transition: transform ease-in-out .5s;
}
.close-modal-btn:hover {
  color: #D51224;
  transform: scale(1.3);
  transition: transform ease-in-out .5s;
}
.modal-thematique, .modal-geographique {
  font-style: normal;
  font-weight: 500;
  font-size: 22px;
  display: contents;
}
.modal-title {
  font-size: 28px;
  font-weight: 700;
  color: #000;
	line-height: 1.2em;
}
.modal-title span{  font-weight: 300;  font-size: 24px; line-height: 1em;}
.modal-author {
  font-style: italic;
}
.modal-context {
  padding: 40px 50px;
  background-color: #0C244F;
  color: white;
  border-radius: 50px;
}
.modal-content .image-modal {
  display: block;
  padding: 0 5%;
  text-align: center;
}
.modal-content .image-modal img {
  max-width: 100%;
  margin: 20px 0;
}
/*------------ProgressBar-----------*/
.header {
  position: absolute;
  bottom: 0;
  right: -23px;
  z-index: 9999;
  height: calc(100% - 24px);
  width: 18px;
  background-color: #fcfcfc;
  border-radius: 30px;
}
.progress-container {
  width: 18px;
  height: -webkit-fill-available;
  padding: 6px 0;
  background: #fff;
  border-radius: 30px;
}
.progress-bar {
  margin: auto;
  height: 0%;
  background: #0C244F;
  width: 6px;
  border-radius: 30px;
}
/*-----------------------------------*/
@media only screen and (max-width:1440px){
	h1 {top: calc(50vh - 310px);padding: 4%;font-size: 3.5em;}
}

@media only screen and (max-width: 1280px) {
  h1 {
    top: calc(40vh - 200px);
    font-size: 2.6em;
  }
#header::after {
    width: 210px;
		height: 210px;}
  #h1-light {
    font-size: 0.8em;
  }
  #conteneurMenu {
    padding-left: 0px;
  }
  #conteneurMenu .menu-in a {
    margin-bottom: 20px;
  }
  #conteneurMenu a .menu-list {
    width: 80%;
  }
  .number-menu:nth-child(1) {
    transform: translateY(0px);
  }
 #background-header-mobile{display: none;}
    .image-podium-interactif {
        width: 100%;}
}
@media only screen and (max-width: 980px) {
    body {font-size: 18px;}
    .carte-inte-titre{display: none;}
    .mentions-chapitre{word-break: break-word;}
    h1 {top: calc(40vh - 200px);font-size: 2em;overflow-wrap: break-word;}
    #logo-ethich {left: 20px;}
    #header::after{display: none;}
	.legende-flex-container {flex-direction: column;align-items: stretch;grid-gap: 3px;padding: 0;}
	#map {background-image:none; max-height: 300px;}	
    .btn-map { height: 30px; line-height: 30px;}
    

#GENEVE1 {top: 0; left: 5%;} 
#BERNE2 {top: 0; left: 15%;} 
#BERNE3 {top: 0; left: 25%;} 
#BALECAMPAGNE4 {top: 0; left: 35%;} 
#ALLEMAGNE5 {top: 0; left: 45%;} 
#GENEVE6 {top: 0; left: 55%;} 
#BERNE7 {top: 0; left: 65%;} 
#ALLEMAGNE8 {top: 0; left: 75%;} 
#NEUCHATEL9 {top: 0%; left: 85%;} 
#VAUD10 {top: 15%; left: 5%;} 
#VAUD11 {top: 15%; left: 15%;} 
#VAUD12 {top: 15%; left: 25%;} 
#VAUD13 {top: 15%; left: 35%;} 
#GENEVE14 {top: 15%; left: 45%;} 
#GENEVE15 {top: 15%; left: 55%;} 
#BERNE16 {top: 15%; left: 65%;} 
#GENEVE17 {top: 15%; left: 75%;} 
#GENEVE18 {top: 15%; left: 85%;} 
#ALLEMAGNE19 {top: 30%; left: 5%;} 
#ALLEMAGNE20 {top: 30%; left: 15%;} 
#ZOUG21 {top: 30%; left: 25%;} 
#VAUD22 {top: 30%; left: 35%;} 
#GENEVE23 {top: 30%; left: 45%;} 
#VAUD24 {top: 30%; left: 55%;} 
#BALECAMPAGNE25 {top: 30%; left: 65%;} 
#SAINTGALL26 {top: 30%; left: 75%;} 
#BERNE27 {top: 30%; left: 85%;} 
#BALEVILLE28 {top: 45%; left: 5%;} 
#GENEVE29 {top: 45%; left: 15%;} 
#GENEVE30 {top: 45%; left: 25%;} 
#BALEVILLE31 {top: 45%; left: 35%;} 
#VAUD32 {top: 45%; left: 45%;} 
#ARGOVIE33 {top: 45%; left: 55%;} 
#VAUD34 {top: 45%; left: 65%;} 
#GENEVE35 {top: 45%; left: 75%;} 
#VAUD36 {top: 45%; left: 85%;} 
#VAUD37 {top: 60%; left: 5%;} 
#ZURICH38 {top: 60%; left: 15%;} 
#BALEVILLE39 {top: 60%; left: 25%;} 
#VAUD40 {top: 60%; left: 35%;} 
#BALEVILLE41 {top: 60%; left: 45%;} 
#LUCERNE42 {top: 60%; left: 55%;} 
#ARGOVIE43 {top: 60%; left: 65%;} 
#ALLEMAGNE44 {top: 60%; left: 75%;} 
#BERNE45 {top: 60%; left: 85%;} 
#VAUD46 {top: 75%; left: 5%;} 
#GENEVE47 {top: 75%; left: 15%;} 
#ZURICH48 {top: 75%; left: 25%;} 
#GENEVE49 {top: 75%; left: 35%;} 
#VAUD50 {top: 75%; left: 45%;}

	.modal-content {margin: 4%;padding: 20px;width: auto!important;overflow-wrap: break-word;}
    .close-modal-btn { right: -10px; }
    .header{display: none;}
    .modal-context {padding: 20px 20px; border-radius: 20px;}
    .modal-thematique, .modal-geographique {font-size: 16px;}
    .modal-title {font-size: 22px;}
    .modal-author {font-size: 13px;line-height: normal;}
    .modal-content a {font-size: 12px;}
    
}