@font-face {
	font-family: 'GillSans';
	src: url('fonts/Gill Sans.otf');
	font-display: swap;
}
@font-face {
	font-family: 'GillSansMedium';
	src: url('fonts/Gill Sans Medium.otf');
	font-display: swap;
}

/* =========================================================
   GLOBAL
   ========================================================= */
body{
	background-image: url('images/ocean0-23.jpg');
	background-size: cover;
	background-attachment: fixed;
	font-family: "GillSans", sans-serif;
	padding-top: 132px; /* 130px de navbar + 2px de bordure */
}

h1{
	font-family: 'Oswald', sans-serif;
	color: white;
	font-size: 50px;
}
h2{
	font-family: 'Oswald', sans-serif;
	color: white;
	font-size: 30px;
}
h2.kahushian_titles{
	font-family: "Kaushan Script", sans-serif;
	font-size: 40px;
	color: #ffe586 !important;
	text-align: center;
}
h3{
	font-family: 'Oswald', sans-serif;
	color: #013740;
	font-size: 25px;
	padding-bottom: 20px;
}
.graph_subtitle_2{
	padding-bottom: 20px;
}

p, ul, li{
	color: white;
	font-size: 22px;
}

.global_content{
	margin: 100px 10% 50px 10%;
}
.global_content_with_back{
	margin: 50px 5%;
	padding: 20px;
	background-color: rgba(0, 0, 0, 0.3);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-radius: 15px;
}
.global_content_with_back h1,
.global_content_with_back h2{
	text-align: center;
}
.global_content_with_back.no_back{
	background-color: transparent;
}

.intro_pages{
	display: flex;
	flex-direction: row;
	align-items: center;
	background-size: cover;
	background-position: center;
}
.intro_bar{
	display: block;
	width: 100px;
	height: 2px;
}
.intro_text{
	color: #002126;
	margin: 0;
	width: 100%;
	padding: 75px 50px;
	line-height: 24px;
	font-size: 22px;
	background: linear-gradient(90deg,
		rgba(0, 144, 159, 0.8) 0%,
		rgba(137, 207, 199, 0.8) 100%);
}
.intro_text p{
	color: #002126;
	line-height: 1.4;
}
.intro_text a{ color: #013740; }
.intro_text a:hover{ font-weight: bold; }
.intro_text_logo{
	display: block;
	max-width: 220px;
	height: auto;
	margin-top: 20px;
}

.intro_pic{
	width: 50%;
	height: 100%;
	background-color: #013740;
	background-size: cover;
	background-position: center;
}
.intro_pic_img{
	border-top-right-radius: 15px;
	border-bottom-right-radius: 15px;
}

.graphs_section{
	margin: 50px 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.donation_btn{
	border: 1px solid white;
	border-radius: 100px;
	padding: 10px 20px;
	font-family: "Kaushan Script", sans-serif;
	font-size: 20px;
	font-weight: 400;
	color: white;
	text-decoration: none;
	justify-content: center;
	margin: 10px;
	transition: all 0.2s;
}
.donation_btn:hover{
	background-color: #ffe586;
	border-color: #ffe586;
	color: #013740;
}

.title_area{
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 150px 20px;
	background-position: center;
	background-size: cover;
}
.title_area h1, .title_area h2{
	text-shadow: black 0 0 10px;
}
.title_separator{
	width: 150px;
	height: auto;
}

.index_img_section{
	margin: 50px 0;
	display: flex;
	flex-direction: row;
	background-color: rgba(255, 255, 255, 0.7);
	border-radius: 20px;
	overflow: hidden;
	width: 100%;
}
.index_img_section_text{
	flex: 1;
	min-width: 0;
	padding: 20px 30px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
/* Photo principale du bloc */
.index_img_section_pic{
	width: 45%;
	max-width: 700px;
	flex-shrink: 0;
	object-fit: cover;
	border-radius: 20px;
}
.index_img_section p,
.index_img_section h2,
.index_img_section ul,
.index_img_section li{
	color: #013740 !important;
}
.index_titles_waves{
	width: 150px;
	height: auto;
	margin: 20px auto;
}

.team_pic{
	width: 100%;
	max-width: 500px;
	height: auto;
	border-radius: 20px;
}

.question_mark_sections{
	display: flex;
	align-items: flex-start;
	gap: 20px;
	width: 100%;
}
.question_mark_sections > img{
	width: 300px;
	height: 300px;
	margin: 25px;
	flex-shrink: 0;
	object-fit: contain;
}
.question_mark_content{
	flex: 1;
	min-width: 0;
}
.text_justify p{
	text-align: justify;
}


/* =========================================================
   HEADER
   ========================================================= */
.navbar{
	position: fixed;
	top: 0;
	width: 100%;
	min-height: 130px;
	border-bottom: 2px solid #89cfc7;
	background-color: #013740 !important;
	z-index: 100000;
}
.navbar-logo{
	width: 200px;
	height: auto;
}
.navbar-nav{
	justify-content: space-between;
	width: 80%;
}

/* Boutons du menu (communs) */
.nav-link-ww, .nav-link{
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 22px;
	width: 180px;
	height: 60px;
	font-family: "Oswald", sans-serif;
	border-radius: 100px;
	text-align: center;
	font-size: 16px;
	margin: 10px;
	padding: 10px;
	text-decoration: none;
	transition: transform 0.2s, background-color 0.2s, color 0.2s;
}
.nav-link:hover, .nav-link-ww:hover{
	transform: scale(1.1);
}

/* Bouton "Observatoire WW" (plein) */
.nav-link-ww{
	background-color: #89cfc7;
	color: #013740 !important;
}
.nav-link-ww.active-btn{
	background-color: #ffe586 !important;
	color: #013740 !important;
}

/* Autres boutons (contour) */
.nav-link{
	border: 3px solid #89cfc7;
	color: #89cfc7 !important;
}
.nav-link.active-btn{
	border: 4px solid #ffe586;
	color: #ffe586 !important;
}

/* Trait jaune sous la page active */
.nav-link-sub{
	margin: 15px auto 0 auto;
	display: block;
	width: 70%;
	height: 3px;
	background-color: #ffe586;
}

.navbar-toggler{ border-color: #89cfc7; }
.navbar-toggler:focus{ box-shadow: 0 0 0 3px rgba(137, 207, 199, 0.4); }


/* =========================================================
   ACCUEIL
   ========================================================= */
.home_key_numbers{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	width: 100%;
}
.home_key_numbers_item{
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	border-radius: 15px;
	border: 3px solid white;
	padding: 20px;
	text-align: center;
}
.home_key_numbers_item img{
	width: 100px;
	height: auto;
	margin-bottom: 20px;
}
.home_key_numbers_item .donation_btn{
	margin-top: auto;      /* boutons alignés en bas de chaque carte */
	display: inline-block;
}
.home_key_numbers_item_title{
	color: white;
	font-size: 40px;
	font-family: "Kaushan Script", sans-serif;
}
.home_key_numbers_item_text{
	color: white;
	font-size: 20px;
	font-family: "GillSans", sans-serif;
	font-weight: bold;
	margin-bottom: 20px;
}

.home_boxes{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	flex-wrap: wrap;
	gap: 15px;
	margin: 20px 0 50px 0;
	width: 80%;
}
.home_boxes > *{
	font-size: 20px;
	color: #013740;
	background-color: #89cfc7;
	border-radius: 20px;
	width: 200px;
	min-height: 110px;
	padding: 15px;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}

.home_indicators{
	text-align: center;
	background-color: #48807f;
	color: white;
	margin: 0 auto 25px auto;
	padding: 25px;
	border-radius: 20px;
	width: 100%;
}
.home_indicators ul{
	list-style: none;
	padding: 0;
}
.home_indicators i{ color: white !important; }
.home_indicators h2{ color: #ffe586 !important; }
/* Petite précision sous un titre d'indicateurs */
.kahushian_subtitle{
	font-family: "Kaushan Script", sans-serif;
	font-size: 18px;
	color: #ffe586;
	margin-top: -5px;
}
.home_indicators a{
	text-decoration: none;
	color: white;
}
.home_indicators a:hover{ color: #ffe586; }


/* =========================================================
   GRAPHIQUES
   ========================================================= */
.graph_box{
	background-color: rgba(255, 255, 255, 0.9);
	margin: 15px 1%;
	padding: 25px;
	border-radius: 15px;
	width: 48%;
}
.graph_box strong{
	font-family: "GillSansMedium", sans-serif;
	font-size: 18px;
	color: #013740;
}
.graph_box p{
	font-size: 18px;
	color: black;
}

/* Conteneur des graphiques : c'est lui qui fixe la hauteur, Chart.js s'adapte */
.chart_wrap{
	position: relative;
	width: 100%;
	height: 380px;
}

/* Boutons radio (Saison / Inter-saison / Total) */
.graph_radios{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 20px;
	margin-bottom: 15px;
	font-size: 17px;
}
.graph_radios label{
	cursor: pointer;
}

.g20_box{
	display: flex;
	flex-direction: row;
	width: 75%;
	margin: 10px auto;
}
.g20_box img{
	width: 140px;
	border-radius: 500px;
}
.g20_box_right{
	margin-left: 25px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.g20_amount{
	font-family: 'Kaushan Script', sans-serif;
	font-size: 25px;
}

#g30_box{
	background-color: rgba(255, 255, 255, 0.9);
	margin: 15px;
	padding: 25px;
	border-radius: 15px;
}


/* =========================================================
   FOOTER
   ========================================================= */
footer{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	background-color: #013740;
	padding: 50px 0;
	text-align: center;
}
footer > *{
	display: flex;
	flex-direction: column;
	justify-content: start;
	align-items: center;
}
footer h3{
	font-family: "Oswald", sans-serif;
	text-align: center;
	color: white;
	font-size: 25px;
}
footer ul{
	list-style: none;
	line-height: 2;
}

.footer-logo{
	margin-bottom: 50px;
}
.footer-logo img{
	width: 250px;
	max-width: 100%;
	height: auto;
}

.contact-link{
	display: inline-block;
	width: 250px;
	margin-top: 50px;
	padding: 10px 20px;
	border-radius: 100px;
	font-family: "Kaushan Script", sans-serif;
	font-size: 20px;
	font-weight: 400;
	color: #013740;
	background-color: white;
	text-decoration: none;
	transition: all 0.2s;
}
.contact-link:hover{
	background-color: #ffe586;
}

.footer-links{
	padding: 0;
}
.footer-links a{
	color: white;
	text-transform: capitalize;
	text-decoration: none;
}
.footer-links a:hover{
	color: #ffe586;
}

.footer_separator{
	display: block;
	width: 75px;
	height: 2px;
	background-color: #ffe586;
	margin: 5px 0 25px 0;
}

.footer_socials_section{
	display: flex;
	flex-direction: row;
}
.bi_footer{
	display: flex;
	justify-content: center;
	align-items: center;
}
.footer_socials{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 60px;
	height: 60px;
	border-radius: 100px;
	background-color: white;
	color: #013740;
	font-size: 30px;
	margin: 0 5px;
	text-decoration: none;
}
.footer_socials:hover{
	background-color: #ffe586;
}

/* Bandeau soutiens / partenaires */
.sub_footer_supports{
	display: flex;
	flex-direction: row;
	width: 100%;
	text-align: center;
	color: #002a31;
}
.sub_footer_supports_left,
.sub_footer_supports_right{
	width: 50%;
	padding: 15px;
	background-color: white;
}
.sub_footer_supports_left{
	border-right: 1px solid #013740;
}
.sub_footer_supports_phrase{
	font-size: 12px;
	color: #625d5d;
}
.sub_footer_supports_pics{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}
.sub_footer_supports_pics > *{
	height: 100px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

/* Bandeau mentions */
.sub_footer_mentions{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 10px 5% 20px 5%;
	font-size: 15px;
	background-color: #013740;
	color: white;
}
.sub_footer_mentions a{
	text-decoration: none;
	color: white;
}
.sub_footer_mentions a:hover{
	color: #ffe586;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

/* Écrans moyens (1200 à 1399px) : menu resserré */
@media (min-width: 1200px) and (max-width: 1399.98px){
	.navbar-logo{ width: 150px; }
	.navbar-nav{
		width: auto;
		flex: 1;
		justify-content: space-evenly;
	}
	.nav-link-ww, .nav-link{
		width: 145px;
		font-size: 14px;
		margin: 10px 4px;
	}
	.donation_btn{
		font-size: 17px;
		padding: 8px 14px;
	}
}

/* Tablette et mobile (moins de 1200px) : menu burger */
@media (max-width: 1199.98px){
	body{ padding-top: 82px; }

	.navbar{ min-height: 80px; }
	.navbar-logo{ width: 150px; }
	.navbar-collapse{
		background-color: #013740;
		max-height: calc(100vh - 80px);
		overflow-y: auto;
		padding: 15px 0;
	}
	.navbar-nav{
		width: 100%;
		align-items: center;
	}
	.nav-item{ width: 100%; }
	.nav-link-ww, .nav-link{
		width: 100%;
		max-width: 320px;
		height: auto;
		min-height: 54px;
		margin: 6px auto;
	}
	.nav-link:hover, .nav-link-ww:hover{ transform: none; }
	.nav-link-sub{ display: none; }

	.donation_btn{
		width: fit-content;
		margin: 15px auto 5px auto;
	}
}

/* Accueil : chiffres clés sur 3 colonnes / Graphiques : un en dessous de l'autre */
@media (max-width: 1199.98px){
	.home_key_numbers_item{
		flex: 1 1 calc(33.333% - 20px);
	}
	.graph_box{
		width: 100%;
		margin: 15px 0;
	}
}

/* Tablette (moins de 992px) : blocs image + texte empilés, footer empilé */
@media (max-width: 991.98px){
	.index_img_section{
		flex-direction: column;
		margin: 30px 0;
	}
	.index_img_section_pic{
		order: -1;              /* la photo passe toujours au-dessus du texte */
		width: 100%;
		max-width: none;
		max-height: 380px;
	}
	.index_img_section_text{ padding: 20px; }

	.home_boxes{ width: 100%; }

	/* Blocs "point d'interrogation" : image au-dessus du texte */
	.question_mark_sections{
		flex-direction: column;
		align-items: center;
		gap: 0;
	}
	.question_mark_sections > img{
		width: 150px;
		height: 150px;
		margin: 10px 0 20px 0;
	}
	.question_mark_content{ width: 100%; }

	footer{
		flex-direction: column;
		align-items: center;
		gap: 40px;
		padding: 40px 20px;
	}
	.footer-logo{ margin-bottom: 20px; }
	.contact-link{ margin-top: 20px; }
	footer h3{ font-size: 22px; }
	.footer-links a{ font-size: 18px; }

	.sub_footer_supports{ flex-direction: column; }
	.sub_footer_supports_left,
	.sub_footer_supports_right{ width: 100%; }
	.sub_footer_supports_left{
		border-right: none;
		border-bottom: 1px solid #013740;
	}

	.sub_footer_mentions{
		flex-direction: column;
		align-items: center;
		gap: 6px;
		text-align: center;
	}
}

/* Petite tablette / grand mobile (moins de 768px) */
@media (max-width: 767.98px){
	h1{ font-size: 32px; }
	h2{ font-size: 24px; }
	h2.kahushian_titles{ font-size: 30px; }
	p, ul, li{ font-size: 18px; }
	ul{ padding-left: 1.2rem; }

	.title_area{ padding: 70px 15px; }

	.global_content_with_back{
		margin: 20px 10px;
		padding: 10px;
	}

	.home_key_numbers_item{
		flex: 1 1 calc(50% - 20px);
	}
	.home_key_numbers_item_title{ font-size: 32px; }
	.home_key_numbers_item_text{ font-size: 17px; }

	.home_indicators{ padding: 20px 10px; }
	.home_indicators h2.kahushian_titles{ font-size: 26px; }

	/* Intro des pages */
	.intro_text{ padding: 35px 20px; }
	.intro_text_logo{ max-width: 160px; }

	/* Graphiques */
	.graphs_section{ margin: 20px 0; }
	.graph_box{ padding: 15px; }
	.graph_box h3{
		font-size: 20px;
		padding-bottom: 10px;
	}
	.graph_box p,
	.graph_box strong{ font-size: 16px; }
	.chart_wrap{ height: 300px; }

	.g20_box{ width: 100%; }
	.g20_box img{
		width: 80px;
		height: 80px;
		flex-shrink: 0;
	}
	.g20_box_right{ margin-left: 15px; }
	.g20_amount{ font-size: 20px; }

	/* Le justifié crée de gros trous sur petit écran */
	.text_justify p{ text-align: left; }
	.question_mark_sections > img{
		width: 100px;
		height: 100px;
	}

	/* Sécurité pour les graphiques pas encore passés en .chart_wrap */
	.graph_box canvas{ max-width: 100%; }
}

/* Mobile (moins de 576px) */
@media (max-width: 575.98px){
	.home_key_numbers_item{ flex: 1 1 100%; }
	.home_boxes > *{
		width: 100%;
		min-height: auto;
	}
	.index_img_section_pic{ max-height: 260px; }

	.footer_socials{
		width: 48px;
		height: 48px;
		font-size: 24px;
	}
	.sub_footer_supports_pics > *{ height: 70px; }
}