/* ===========================================
   WEB 2026 - Design Glassmorphisme
   =========================================== */

/* --- Reset & Base --- */
*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	background: #0a0818 url(../img/code-bg.svg) repeat fixed;
	background-size: 800px auto;
}

body {
	min-height: 100vh;
	font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
	background: linear-gradient(135deg, rgba(15,12,41,0.75), rgba(48,43,99,0.70), rgba(36,36,62,0.75));
	background-attachment: fixed;
	color: #fff;
	overflow-x: hidden;
}

/* --- Animated background blobs --- */
body::before,
body::after {
	content: '';
	position: fixed;
	border-radius: 50%;
	filter: blur(120px);
	opacity: 0.4;
	z-index: 0;
	animation: float 20s ease-in-out infinite alternate;
}

body::before {
	width: 500px;
	height: 500px;
	background: #ff6b6b;
	top: -100px;
	left: -100px;
}

body::after {
	width: 600px;
	height: 600px;
	background: #4ecdc4;
	bottom: -150px;
	right: -150px;
	animation-delay: -10s;
}

@keyframes float {
	0% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(80px, 40px) scale(1.1); }
	100% { transform: translate(-40px, 80px) scale(0.95); }
}

/* --- Titres --- */
h1 {
	text-align: center;
	font-size: clamp(1.5rem, 4vw, 2.8rem);
	font-weight: 700;
	padding: 40px 20px 10px;
	background: linear-gradient(135deg, #fff, #a8edea);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	position: relative;
	z-index: 1;
}

h2 {
	text-align: center;
	font-size: clamp(0.9rem, 2vw, 1.2rem);
	font-weight: 300;
	color: rgba(255, 255, 255, 0.7);
	padding: 0 20px 30px;
	position: relative;
	z-index: 1;
}

/* --- Grille principale --- */
main {
	display: grid;
	grid-template-columns: 220px;
	justify-content: center;
	gap: 24px;
	padding: 20px;
	position: relative;
	z-index: 1;
}

/* --- Carte stagiaire (Glass Card) --- */
.stagiaire {
	width: 210px;
	padding: 20px 10px 15px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid rgba(255, 255, 255, 0.15);
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.3),
		inset 0 1px 0 rgba(255, 255, 255, 0.1);
	color: #fff;
	font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
	transition: transform 400ms ease, box-shadow 400ms ease, background 400ms ease;
	position: relative;
	overflow: hidden;

	/* Flexbox pour aligner FTP et GitHub côte à côte */
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

/* Reflet lumineux en haut de la carte */
.stagiaire::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
}

.stagiaire:hover {
	transform: translateY(-8px) scale(1.03);
	background: rgba(255, 255, 255, 0.14);
	box-shadow:
		0 16px 48px rgba(0, 0, 0, 0.4),
		inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* --- Groupes : bord lumineux coloré --- */
.groupe1 {
	border-color: rgba(255, 100, 100, 0.5);
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.3),
		inset 0 1px 0 rgba(255, 255, 255, 0.1),
		0 0 20px rgba(255, 100, 100, 0.1);
}

.groupe1:hover {
	border-color: rgba(255, 100, 100, 0.7);
	box-shadow:
		0 16px 48px rgba(0, 0, 0, 0.4),
		inset 0 1px 0 rgba(255, 255, 255, 0.2),
		0 0 30px rgba(255, 100, 100, 0.2);
}

.groupe2 {
	border-color: rgba(100, 150, 255, 0.5);
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.3),
		inset 0 1px 0 rgba(255, 255, 255, 0.1),
		0 0 20px rgba(100, 150, 255, 0.1);
}

.groupe2:hover {
	border-color: rgba(100, 150, 255, 0.7);
	box-shadow:
		0 16px 48px rgba(0, 0, 0, 0.4),
		inset 0 1px 0 rgba(255, 255, 255, 0.2),
		0 0 30px rgba(100, 150, 255, 0.2);
}

/* --- Textes dans les cartes --- */
.stagiaire h3 {
	width: 100%;
	text-align: center;
	font-size: 1.2rem;
	font-weight: 600;
	margin-bottom: 4px;
	letter-spacing: 0.5px;
}

.stagiaire h4 {
	width: 100%;
	text-align: center;
	font-style: italic;
	font-weight: 300;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.6);
	margin-bottom: 12px;
}

/* --- Icones FTP / GitHub (côte à côte) --- */
.ftp, .github {
	width: 96px;
	margin: 0;
	flex-shrink: 0;
}

.blog-wp, .boutique, .ti {
	width: 96px;
}

.blog-wp {
	margin: 0 0 8px 0;
}

.prefo, .portfolio {
	width: 100%;
}

.ftp a {
	display: block;
	width: 64px;
	height: 64px;
	margin: 0 auto;
	background-image: url(../img/ftp.png);
	background-repeat: no-repeat;
	opacity: 0.8;
	transition: opacity 300ms ease, transform 300ms ease;
}

.ftp a:hover {
	opacity: 1;
	transform: scale(1.1);
}

.github a {
	display: block;
	width: 64px;
	height: 64px;
	margin: 0 auto;
	background-image: url(../img/github.png);
	background-repeat: no-repeat;
	filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.5));
	opacity: 0.85;
	transition: opacity 300ms ease, transform 300ms ease;
}

.github a:hover {
	opacity: 1;
	transform: scale(1.1);
}

/* --- Bouton Préfo (Glass Button) --- */
.prefo a {
	display: block;
	width: 160px;
	height: 48px;
	margin: 0 auto 5px auto;
	border-radius: 24px;
	background: rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	text-align: center;
	text-decoration: none;
	color: #fff;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 2px;
	line-height: 48px;
	transition: background 300ms ease, box-shadow 300ms ease, transform 300ms ease;
}

.prefo a:hover {
	background: rgba(255, 255, 255, 0.22);
	box-shadow: 0 4px 16px rgba(255, 255, 255, 0.1);
	transform: translateY(-2px);
}

/* --- Bouton TI --- */
p.ti {
	margin: 8px 0;
}

.ti a {
	display: block;
	width: 64px;
	height: 48px;
	margin: 0 auto 5px auto;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	text-align: center;
	text-decoration: none;
	color: #fff;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 2px;
	line-height: 48px;
	transition: background 300ms ease, transform 300ms ease;
}

.ti a:hover {
	background: rgba(255, 255, 255, 0.22);
	transform: translateY(-2px);
}

/* --- Etats absents / manquants --- */
.ti.absent a, .portfolio.absent a {
	background: rgba(255, 255, 255, 0.05);
	text-decoration: line-through;
	opacity: 0.4;
	cursor: default;
}

.manquant a {
	color: rgba(255, 255, 255, 0.4);
	background: rgba(255, 255, 255, 0.03);
	border: 1px dashed rgba(255, 255, 255, 0.2);
	cursor: default;
}

.manquant a:hover {
	background: rgba(255, 255, 255, 0.03);
	box-shadow: none;
	transform: none;
}

/* --- Bouton Portfolio --- */
.portfolio a {
	display: block;
	width: 160px;
	height: 48px;
	margin: 0 auto 5px auto;
	border-radius: 24px;
	background: rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	text-align: center;
	text-decoration: none;
	color: #fff;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 2px;
	line-height: 48px;
	transition: background 300ms ease, transform 300ms ease;
}

.portfolio a:hover {
	background: rgba(255, 255, 255, 0.22);
	transform: translateY(-2px);
}

/* --- Icones Blog & Boutique --- */
.blog-wp a, .boutique a, .inconnu a {
	display: block;
	width: 64px;
	height: 64px;
	margin: 0 auto;
}

.blog-wp a {
	background-image: url("../img/Wordpress_Blue_logo.png");
	background-size: contain;
	background-repeat: no-repeat;
}

.blog-wp.inconnu a {
	background-image: url("../img/Wordpress_blog_inconnu.png");
	background-repeat: no-repeat;
}

.boutique a {
	background-image: url("../img/wooCommerce.png");
	background-repeat: no-repeat;
}

.boutique.inconnu a {
	background-image: url("../img/wooCommerce_inconnu.png");
	background-repeat: no-repeat;
}

/* --- Footer Glass --- */
footer {
	margin-top: 50px;
	padding: 30px 20px;
	background: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	position: relative;
	z-index: 1;
}

footer p {
	text-align: center;
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.9rem;
}

footer .copy {
	padding-top: 50px;
	background-image: url("../img/cf2m.ico");
	background-position: center top;
	background-size: 50px;
	background-repeat: no-repeat;
	font-size: 1.6em;
	color: rgba(255, 255, 255, 0.8);
}

/* --- Animation fade-in (JS) --- */
.stagiaire.fade-in {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 500ms ease, transform 500ms ease, box-shadow 400ms ease, background 400ms ease;
}

.stagiaire.fade-in.visible {
	opacity: 1;
	transform: translateY(0);
}

/* ===========================================
   Responsive Grid (CSS Grid)
   =========================================== */

@media screen and (min-width: 480px) {
	main {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (min-width: 720px) {
	main {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media screen and (min-width: 960px) {
	main {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media screen and (min-width: 1200px) {
	main {
		grid-template-columns: repeat(5, 1fr);
	}
}

@media screen and (min-width: 1440px) {
	main {
		grid-template-columns: repeat(6, 1fr);
	}
}

@media screen and (min-width: 1680px) {
	main {
		grid-template-columns: repeat(7, 1fr);
	}
}

@media screen and (min-width: 1920px) {
	main {
		grid-template-columns: repeat(8, 1fr);
	}
}

@media screen and (min-width: 2160px) {
	main {
		grid-template-columns: repeat(9, 1fr);
	}
}

@media screen and (min-width: 2400px) {
	main {
		grid-template-columns: repeat(10, 1fr);
	}
}