@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@font-face {
  font-family: 'avigea';
  src: url(avigea.ttf);
  font-display: swap;
}

body, html{
  font-family:'Inter',tahoma,arial,helvetica,sans-serif;
  padding:0;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100%;
  width:100%;
}
body{
  background:url(../img/fond.svg) no-repeat center;
  background-size:cover;
  background-attachment: fixed;
}

/*HEADER*/
header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:32px;
  padding:4px;
  background:#fff;
  box-shadow:0 0 6px rgba(0,0,0,.25);
  display: flex;
  justify-content: center;
  z-index:10;
}
header>div, header>form{
  display:block;
  text-align:left;
  width:49%;
}
header>div:after, header>div>img{
 content:"2025";
  display:inline-block;
  vertical-align:middle;
  font-size:24px;
  line-height:32px;
}
header>div>img{
  width:28px;
  height:28px;
  margin-right:6px;
}
header>form{text-align:right;}
header>form select{
 border:none;
  height:30px;
  padding:2px 10px 2px 33px;
  background:#fff;
  box-shadow:0 2px 4px #ccc;
  border-radius:6px;
  font-family:'Inter',tahoma,arial,helvetica,sans-serif;
  cursor:pointer;
  background:url(../img/icon.svg) no-repeat 10px center;
  background-size:16px;
  transition:all .15s;
}
header>form select:hover{box-shadow:0 1px 3px #ccc;}

/*CHAPTER 0*/
#chapter0{width:20%;aspect-ratio: 1;}
#chapter0 img{
  width:100%;
  height:100%;
  background:#fff;
  border-radius:100%;
  border:8px solid #fff;
  box-shadow:0 0 30px 5px #000;
}

/*FORM*/
body>form{
  display:block;
  width:calc(100% - 44px);
  max-width:800px;
  padding:15px 15px;
  box-shadow:0 2px 15px rgba(0,0,0,.5);
  border-radius:14px;
  margin:60px 0;
  background:#fffdeb;
}
body>form h1{
  margin-top:5px;
  font-family:'avigea';
  font-weight:normal;
  font-size:44px;
  margin-bottom:0;
}
body>form h1 span{color:#EA5155;}
body>form h2{
  font-family:'avigea';
  font-weight:normal;
  font-size:26px;
}
body>form p{margin:10px 0;}
body>form p.time{
  background:#62b68a;
  width:max-content;
  margin-top:0px;
  margin-bottom:15px;
  padding:4px 15px 4px 25px;
  margin-left:-25px;
  color:#fff;
  box-shadow:2px 3px 6px rgba(0,0,0,.25);
  border-radius:0 4px 4px 0;
  max-width:96%;
}
body>form .verify-form p.time{margin-top:10px;}

body>form hr{
 border:none;
  border-top:1px solid #ccc;
  margin:5px 0;
}

.list>label{
 margin-top:40px;
  margin-bottom:0;
  display: block;
  font-size:20px;
  line-height:26px;
}
.list>label:before{
 content:"";
  display:inline-block;
  vertical-align: top;
  width:24px;
  height:24px;
  margin-right:5px;
  background:url(../img/icon_goutte.svg) no-repeat center;
  background-size:24px;
}
.list:nth-of-type(2)>label:before{background-image:url(../img/icon_pays.svg);background-size:23px;}
.list:nth-of-type(3)>label:before{background-image:url(../img/icon_energie.svg);}
.list:nth-of-type(4)>label:before{background-image:url(../img/icon_engagement.svg);background-size:22px;}
.list:nth-of-type(5)>label:before{background-image:url(../img/incon_inspi.svg);}
.list ul, ul.recap{
  margin-top:10px;
  list-style:none;
  padding:0;
  display: flex;
  justify-content: space-between;
}
.list li {
  display:block;
  width:24%;
  text-align:center;
}
.list li input{
  position:absolute;
  z-index:-1;
  opacity:0;
}
.list li label span, ul.recap li{
  display:block;
  box-shadow:0 0px 0px #fff;
  width:calc(100% - 16px);
  max-width:150px;
  border:3px solid transparent;
  padding:5px 5px;
  text-align:center;
  border-radius:16px;
  cursor:pointer;
  transition:all .2s;
  font-size:14px;
  margin:0 auto;
}
ul.recap li{cursor:default;}
.list li label span:before, ul.recap li:before{
  content:"";
  display:block;
  width:100%;
  aspect-ratio: 1;
  max-width:80px;
  max-height:80px;
  margin:0 auto 5px;
}
.list li label input:checked ~ span, .list li label:hover span{
  box-shadow:0 2px 10px rgba(0,0,0,.2);
  border:3px solid #000;
}
ul.recap li:hover{
  transform: scale(1.15);
  box-shadow:0 2px 6px #ccc;
}
.list li label input:checked ~ span{
  background:#ea4d48;
  border-color:#ea4d48;
}

form p:last-of-type>input[type=submit]{
  margin:35px auto 0;
  display:block;
  font-family:'Inter',tahoma,arial,helvetica,sans-serif;
  cursor:pointer;
  background:#78d1b5;
  border:3px solid #000;
  font-size:20px;
  padding:6px 35px;
  border-radius:10px;
  box-shadow:0 2px 6px 2px #bbb;
  transition:all 0.25s;
  color:#000;
}
form p:last-of-type>input[type=submit]:not(:disabled):hover{transform: scale(1.1);}
form p:last-of-type>input[type=submit]:disabled{
  box-shadow:0 0px 0px #fff;
  background:#ddd;
  cursor:not-allowed;
  color:#fff;
  border-color: transparent;
}

/*BTNS*/
.list li label span::before,
ul.recap li::before {
  mask: url(../img/icon_goutte.svg) no-repeat center;
  mask-size:85%;
  background:#000;
  transition:all .25s;
}
.list li.ch2-1 label span::before, ul.recap li.ch2-1::before {mask-image: url(../img/europe2.svg);}
.list li.ch2-2 label span::before, ul.recap li.ch2-2::before {mask-image: url(../img/afrique2.svg);}
.list li.ch2-3 label span::before, ul.recap li.ch2-3::before {mask-image: url(../img/asie2.svg);}
.list li.ch2-4 label span::before, ul.recap li.ch2-4::before {mask-image: url(../img/usa2.svg);}
.list li.ch3-1 label span::before, ul.recap li.ch3-1::before {mask-image: url(../img/solaire.svg);}
.list li.ch3-2 label span::before, ul.recap li.ch3-2::before {mask-image: url(../img/eolien.svg);}
.list li.ch3-3 label span::before, ul.recap li.ch3-3::before {mask-image: url(../img/hydro.svg);}
.list li.ch3-4 label span::before, ul.recap li.ch3-4::before {mask-image: url(../img/geo.svg);}
.list li.ch4-1 label span::before, ul.recap li.ch4-1::before {mask-image: url(../img/education2.svg);}
.list li.ch4-2 label span::before, ul.recap li.ch4-2::before {mask-image: url(../img/environnement.svg);}
.list li.ch4-3 label span::before, ul.recap li.ch4-3::before {mask-image: url(../img/innovation.svg?);}
.list li.ch4-4 label span::before, ul.recap li.ch4-4::before {mask-image: url(../img/ethique.svg);}
.list li.ch5-1 label span::before, ul.recap li.ch5-1::before {mask-image: url(../img/gutenberg.svg);}
.list li.ch5-2 label span::before, ul.recap li.ch5-2::before {mask-image: url(../img/manuce.svg);}
.list li.ch5-3 label span::before, ul.recap li.ch5-3::before {mask-image: url(../img/garamond.svg?);}
.list li.ch5-4 label span::before, ul.recap li.ch5-4::before {mask-image: url(../img/bodoni.svg);}

.list li label span::before, ul.recap li::before, .list li label input:checked ~ span { color:#fffdeb; }
.list li.ch1-1 label span::before, ul.recap li.ch1-1::before, .list li.ch1-1 label input:checked ~ span { background:#ff00bf;border-color:#ff00bf; }
.list li.ch1-2 label span::before, ul.recap li.ch1-2::before, .list li.ch1-2 label input:checked ~ span { background:#00cfff;border-color:#00cfff; }
.list li.ch1-3 label span::before, ul.recap li.ch1-3::before, .list li.ch1-3 label input:checked ~ span { background:#ffe300;border-color:#ffe300;color:#000; }
.list li.ch1-4 label span::before, ul.recap li.ch1-4::before, .list li.ch1-4 label input:checked ~ span { background:#000;border-color:#000; }
.list li.ch2-1 label span::before, ul.recap li.ch2-1::before, .list li.ch2-1 label input:checked ~ span { background:#2d6bff;border-color:#2d6bff;}
.list li.ch2-2 label span::before, ul.recap li.ch2-2::before, .list li.ch2-2 label input:checked ~ span { background:#6ab90a;border-color:#6ab90a;}
.list li.ch2-3 label span::before, ul.recap li.ch2-3::before, .list li.ch2-3 label input:checked ~ span { background:#e15806;border-color:#e15806;}
.list li.ch2-4 label span::before, ul.recap li.ch2-4::before, .list li.ch2-4 label input:checked ~ span { background:#b9164c;border-color:#b9164c;}
.list li.ch3-1 label span::before, ul.recap li.ch3-1::before, .list li.ch3-1 label input:checked ~ span { background:#ffc12d;border-color:#ffc12d;color:#000;}
.list li.ch3-2 label span::before, ul.recap li.ch3-2::before, .list li.ch3-2 label input:checked ~ span { background:#3cd9c3;border-color:#3cd9c3;}
.list li.ch3-3 label span::before, ul.recap li.ch3-3::before, .list li.ch3-3 label input:checked ~ span { background:#357dee;border-color:#357dee;}
.list li.ch3-4 label span::before, ul.recap li.ch3-4::before, .list li.ch3-4 label input:checked ~ span { background:#7eb1bd;border-color:#7eb1bd;}
.list li.ch4-1 label span::before, ul.recap li.ch4-1::before, .list li.ch4-1 label input:checked ~ span { background:#a923d9;border-color:#a923d9;}
.list li.ch4-2 label span::before, ul.recap li.ch4-2::before, .list li.ch4-2 label input:checked ~ span { background:#32be0a;border-color:#32be0a;}
.list li.ch4-3 label span::before, ul.recap li.ch4-3::before, .list li.ch4-3 label input:checked ~ span { background:#cd780c;border-color:#cd780c;}
.list li.ch4-4 label span::before, ul.recap li.ch4-4::before, .list li.ch4-4 label input:checked ~ span { background:#08c6d9;border-color:#08c6d9;}
.list li.ch5-1 label span::before, ul.recap li.ch5-1::before, .list li.ch5-1 label input:checked ~ span { background:#7a0c45;border-color:#7a0c45;}
.list li.ch5-2 label span::before, ul.recap li.ch5-2::before, .list li.ch5-2 label input:checked ~ span { background:#0c6416;border-color:#0c6416;}
.list li.ch5-3 label span::before, ul.recap li.ch5-3::before, .list li.ch5-3 label input:checked ~ span { background:#9c6002;border-color:#9c6002;}
.list li.ch5-4 label span::before, ul.recap li.ch5-4::before, .list li.ch5-4 label input:checked ~ span { background:#1e78af;border-color:#1e78af;}
.list li label input:checked ~ span::before { background:#fffdeb; }

.verify-form{
  border:1px solid #ddd;
  border-radius:6px;
  padding:0 15px;
  margin:40px auto 10px;
  max-width:460px;
}
.verify-form h3{
  background:#fffdeb;
  margin-top:-12px;
  margin-left:-8px;
  margin-bottom:0;
  padding:0 8px;
  width:max-content;
  font-weight:normal;
  color:#ee4b55;
}
.verify-form input[type=text], 
.verify-form input[type=mail]{
  display:block;
  padding:10px 15px;
  font-size:18px;
  border:none;
  width:calc(100% - 30px);
  box-shadow:0 0 6px #999 inset;
  border-radius:6px;
  margin-top:4px;
  border:1px solid #fff;
}

@media screen and (max-width:600px){
	body > form{ width: calc(100% - 20px); padding: 15px 5px; }
	body > form h1{ line-height:48px; padding:0 7px; }
	body > form p{ padding:0 7px; }
	body > form p.time{ max-width: 90%; padding-left:32px; }
	.list > label{margin-left:5px;}
	.list li{width:calc(25% - 2px);}
	ul.recap{ flex-wrap: wrap; justify-content: center; }
	.list li label span, ul.recap li{
		font-size:11px;
		padding: 0px 0px 5px;
		width: calc(100% - 6px);
		overflow:hidden;
	}
	ul.recap li{ width: calc(33% - 16px); margin:0 5px 5px; }
	.list li label span::before, ul.recap li::before { mask-size: 65%; }
	body > form h2 {font-size: 24px;padding:0 7px;}
}