/* Accès rapidee */
.data-nav-box {
background: #f4f9fc;
border-left: 4px solid #3498db;
padding: 1rem 1.5rem;
margin: 2rem 0;
border-radius: 8px;
font-size: 1.05rem;
color: #333;
}

.nav-buttons {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 0.5rem;
}

.nav-btn {
display: inline-block;
padding: 0.5rem 1rem;
background-color: #c59d5f;
color: #2c2c2c !important;
border-radius: 6px;
text-decoration: none;
font-size: 16px;
transition: background 0.2s ease;
}

.nav-btn:hover {
background-color: #a4803e;
color: white !important;
text-decoration: none !important;
}

/* ==== MENU DE NAVIGATION INTERNE ==== */
.top-nav {
	background: #f0f4ff;
	border: 1px solid #c3d9ff;
	border-radius: 8px;
	padding: 12px 20px;
	margin-bottom: 30px;
	font-size: 1rem;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
	position: sticky;
	top: 0;
	z-index: 10;
}
.top-nav nav a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	/* espace entre icône et texte */
	text-decoration: none;
	color: #0056b3;
	font-weight: 500;
}
.top-nav nav i {
	font-size: 1rem;
	/* même taille que le texte */
	color: #c59d5f;
	/* couleur or */
	line-height: 1;
	/* corrige l’alignement vertical */
	display: inline-block;
	/* bon pour le centrage */
}
.top-nav nav .separator {
	margin: 0 10px;
	color: #999;
}
.top-nav a:hover {
	text-decoration: underline;
	color: #003f8a;
}
/* Scroll fluide */
html {
	scroll-behavior: smooth;
}
/* ==== CONTENEUR GLOBAL ==== */
#certificationsContainer {
	padding: 20px;
	font-family: 'Segoe UI', sans-serif;
	color: #222;
}
/* ==== TITRES DE SECTIONS ==== */
#certificationsContainer h2 {
	font-size: 1.8rem;
	margin-top: 40px;
	margin-bottom: 20px;
	border-bottom: 2px solid #ccc;
	padding-bottom: 8px;
}
/* ==== GRILLE DE CARTES ==== */
.singles-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin-bottom: 40px;
}
@media (min-width: 768px) {
	.singles-grid {
		grid-template-columns: 1fr;
	}
}
/* ==== CARTE ==== */
.single-card:hover {
	transform: scale(1.01);
}
.single-card,.total-card {
	display: grid;
	grid-template-columns: 80px 1fr 150px 160px;
	align-items: center;
	background: #fafafa;
	border-radius: 8px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
	padding: 12px 16px;
	transition: transform 0.2s ease;
	gap: 10px;
}
/* ==== COLONNES ==== */
.single-col.cover img {
	width: 80px;
	height: 80px;
	object-fit: cover;
	border-radius: 4px;
}
.single-col.title {
	flex: 1;
	font-weight: 500;
	font-size: 1.1rem;
	display: flex;
	align-items: center;
	gap: 8px;
}
.single-col.sales {
	width: 150px;
	text-align: right;
	font-weight: 600;
	font-size: 1.4rem;
}
.single-col.link a {
	color: #007bff;
	text-decoration: none;
	font-size: 0.95rem;
}
.fa-link {
	color: #007bff;
}
.single-col.link a:hover {
	text-decoration: underline;
}
/* ==== CARTE TOTALE ==== */
.total-card {
	background: #e9f0ff;
	border: 2px solid #c3d9ff;
}
.total-card .single-col.title,.total-card .single-col.sales {
	font-size: 1.5rem;
	font-weight: bold;
}
/* ==== TABLEAU RECAP ==== */
.recap-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 20px;
}
.recap-table td {
	padding: 12px;
	border: 1px solid #ddd;
	font-size: 1.5rem;
}
.recap-table tr.global-total td {
	font-weight: bold;
	font-size: 1.7rem;
	background: #f5f5f5;
}
.globalnumber {
	text-align: right;
}
/* ==== RESPONSIVE – Mobile: stack elements vertically ==== */
@media (max-width: 640px) {
	.top-nav .separator {
		display: none;
	}
	.top-nav nav {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}
	.top-nav nav span {
		display: flex;
		align-items: center;
		gap: 6px;
	}
	.top-nav nav span i {
		color: #c59d5f;
	}
	.top-nav nav a {
		color: #0056b3;
		text-decoration: none;
		font-weight: 500;
		font-size: 1rem;
	}
	.top-nav nav a:hover {
		text-decoration: underline;
	}
	.single-card {
		display: flex !important;
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
	.single-col.cover img {
		width: 100%;
		max-width: 100px;
		height: auto;
	}
	.single-col.title,.single-col.sales,.single-col.link {
		width: 100%;
		text-align: left;
		font-size: 1rem;
		padding: 4px 0;
	}
	.single-col.sales {
		font-size: 1.1rem;
		font-weight: 600;
	}
	.single-col.link {
		font-size: 1rem;
	}
	.single-card.total-card {
		align-items: flex-start;
	}
	.single-col.title {
		display: block;
		font-size: 1.1rem;
	}
	.recap-table {
		font-size: 0.95rem;
	}
	.recap-table td {
		display: block;
		width: 100%;
		text-align: left;
		border: none;
		border-bottom: 1px solid #ddd;
		padding: 8px 0;
	}
	.recap-table tr {
		display: block;
		margin-bottom: 12px;
	}
	.recap-table tr.global-total td {
		background: #f0f0f0;
		font-weight: bold;
	}
	.recap-table td.globalnumber {
		text-align: right;
		font-size: 1.2rem;
	}
}