@charset "UTF-8";

/* infos ℹ️ : styles principaux Thème (V2.0)
	Version By sync - Boulette (V7.0.0) */

:root {
	/* Palette Technique Claire */
	--bg-main: /* #F4F7FA; contour */ #3E7588;
	--bg-panel: /* #FFFFFF; bloc */ #E3E9F0;
	--text-dark: #2C3E50;
	--text-light: #7F8C8D;
	--border: /* #E1E8ED; ligne */ #CBB2FF;

	/* Codes Couleurs Catégories */
	--c-tools: #007BFF; /* Utilitaires (Bleu) */
	--c-games: #9B59B6; /* Jeux (Violet) */
	--c-media: #FF5733; /* Multimédia (Orange) */
	--c-dev: #27AE60; /* Développement (Vert) */
	--c-divers: #FF66CC; /* Divers & Varier (Rose) */
	--c-futur: #009999; /* Développement (Bleu claire) */
}

* { box-sizing: border-box;}

body {
	margin: 0;
	font-family: 'Inter', sans-serif;
	background-color: var(--bg-main);
	color: var(--text-dark);
	padding-bottom: 50px;
	overflow-y: auto;
}

/* --- HEADER --- */
header {
	background: var(--bg-panel);
	padding: 20px 30px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	border-bottom: 1px solid var(--border);
}

.brand { font-size: 1.5em; font-weight: 800; color: var(--text-dark); letter-spacing: -0.5px;}
.brand span { color: var(--c-tools);}

.search-container { position: relative; flex-grow: 1; max-width: 400px;}
.search-input { width: 100%; padding: 12px 20px 12px 45px; border: 2px solid var(--border); border-radius: 50px; outline: none; transition: all 0.3s; background: #f8f9fa;}
.search-input:focus { border-color: var(--c-tools); background: #fff;}
.search-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); opacity: 0.5;}

/* --- NAVIGATION COULISSE (STICKY) --- */
.nav-scroller {
	position: sticky; top: 0; z-index: 900;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--border);
	padding: 10px 20px;
	display: flex; gap: 10px;
	overflow-x: auto; white-space: nowrap;
	scrollbar-width: none; /* Firefox */
}
.nav-scroller::-webkit-scrollbar { display: none; /* Chrome/Safari */ }
.nav-btn { padding: 10px 18px; border-radius: 20px; border: 1px solid var(--border); background: white; color: var(--text-light); font-weight: 600; font-size: 0.8em; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 8px; user-select: none;}
.nav-btn i { font-style: normal; font-size: 1.1em;}
.nav-btn:hover { background: #EBF5FF; color: var(--c-tools); border-color: #bad6f7; transform: translateY(-1px);}
.nav-btn.active { background: var(--c-tools); color: white; border-color: var(--c-tools);}

/* --- GRILLE & CARTE (CORRECTION VISUELLE) --- */
.main-content { max-width: 1350px; /* au lieu de 1400 */ margin: 0 auto; padding: 30px 20px;}
.tech-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 25px;}

.tech-card {
	background: var(--bg-panel);
	border-radius: 12px;
	border: 1px solid var(--border);
	display: flex; flex-direction: column;
	transition: transform 0.2s, box-shadow 0.2s;
	position: relative;
	/* REVENU À HIDDEN POUR DES BORDS PROPRES */
	overflow: hidden !important;
}
.tech-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.08); border-color: #BDC3C7;}

/* Bandeaux de couleur */
.card-stripe { height: 4px; width: 100%;}
.stripe-tools { background: var(--c-tools);} /* Utilitaires */
.stripe-games { background: var(--c-games);} /* Jeux */
.stripe-media { background: var(--c-media);} /* Média */
.stripe-dev { background: var(--c-dev);} /* Dev & Système */
.stripe-divers { background: var(--c-divers);} /* Divers */
.stripe-futur { background: var(--c-futur);} /* contactez & Espace Futur */

.card-body { padding: 20px; flex-grow: 1; display: flex; flex-direction: column;}
.card-header-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px;}
.title-group { display: flex; align-items: center; gap: 8px;}

.card-title { font-size: 1.1em; font-weight: 700; margin: 0; color: var(--text-dark);}
.card-id { font-size: 0.75em; color: #BDC3C7; font-weight: 600; text-transform: uppercase;}
.card-desc { font-size: 0.9em; color: var(--text-light); line-height: 1.5; margin-bottom: 20px; flex-grow: 1;}

.btn-group { display: flex; flex-wrap: wrap; gap: 6px;}

.btn-tech { display: inline-block; padding: 8px 12px; background: #F8F9FA; color: var(--text-dark); text-decoration: none; border-radius: 6px; font-weight: 600; font-size: 0.75em; border: 1px solid var(--border); transition: all 0.2s;}

.btn-tech:hover { background: var(--c-tools); color: white; border-color: var(--c-tools);}

/* Variations de hover selon la catégorie parente */
.games .btn-tech:hover { background: var(--c-games); border-color: var(--c-games);}
.media .btn-tech:hover { background: var(--c-media); border-color: var(--c-media);}
.dev .btn-tech:hover { background: var(--c-dev); border-color: var(--c-dev);}
.futur .btn-tech:hover { background: var(--c-futur); border-color: var(--c-futur);}

/* Footer ajusté pour éviter qu'il ne soit trop bas */
footer {
	text-align: center;
	color: var(--text-light);
	font-size: 0.75em;
	margin-top: 25px; /* Espace raisonnable après la grille */
	padding: 10px 0; /* 20px en haut et bas, 0 sur les côtés */
	border-top: 1px solid var(--border);
	width: 100%;
	flex-shrink: 0; /* Empêche le footer de s'écraser */
}

a {text-decoration: none;}

/* --- STYLE BULLE INFO (EN DESSOUS) --- */
.info-bubble {
	/* Mise en page interne */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Dimensions précises */
	width: 24px; height: 24px;
	/* Style */
	background: #f0f2f5;
	border-radius: 50%;
	border: 1px solid var(--border);
	cursor: help;
	position: relative;
	transition: all 0.2s;
	outline: none; /* Enlève le cadre bleu par défaut au clic */
}

/* L'emoji : Taille réduite et centrée */
.info-bubble i {
	font-style: normal;
	font-size: 14px; /* Emoji plus petit */
	line-height: 1;
	margin-top: 1px; /* Micro-ajustement optique */
}

/* État actif (Survol PC ou Clic Mobile) */
.info-bubble:hover, .info-bubble:focus, .info-bubble:active {
	background: var(--c-tools);
	color: white;
	border-color: var(--c-tools);
	z-index: 1000;
}

/* LE TOOLTIP (La boîte noire EN DESSOUS) */
.info-bubble::after {
	content: attr(data-tooltip);
	position: absolute;
	/* CHANGEMENT ICI : top au lieu de bottom */
	top: 145%; /* S'affiche en dessous */
	left: 50%;
	transform: translateX(-50%);
	/* Design */
	background: #2C3E50;
	color: white;
	padding: 8px 12px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
	box-shadow: 0 4px 15px rgba(0,0,0,0.2);
	/* Animation et Visibilité */
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s, transform 0.2s;
	pointer-events: none;
	z-index: 1100;
}

/* LA FLÈCHE (Le triangle en haut) */
.info-bubble::before {
	content: "";
	position: absolute;
	/* CHANGEMENT ICI : top au lieu de bottom */
	top: 130%;
	left: 50%;
	transform: translateX(-50%);
	border-width: 6px;
	border-style: solid;
	/* CHANGEMENT DE COULEUR POUR POINTER VERS LE HAUT */
	border-color: transparent transparent #2C3E50 transparent;
	opacity: 0;
	visibility: hidden;
	z-index: 1100;
}

/* DÉCLENCHEUR (Compatible Mobile et PC) */
.info-bubble:hover::after, .info-bubble:focus::after,
.info-bubble:hover::before, .info-bubble:focus::before {
	opacity: 1;
	visibility: visible;
	/* Animation vers le bas */
	transform: translateX(-50%) translateY(5px);
}

/* Responsive */
@media (max-width: 768px) {
	header { flex-direction: column; align-items: stretch;}
	.search-container { max-width: 100%;}
	.tech-grid { grid-template-columns: 1fr;}
}
/* --- FIN STYLE BULLE INFO (EN DESSOUS) --- */

/* FIN de CSS */