/* -----------------------------------------------------------
	VARIABLES ET CONFIGURATION GÉNÉRALE
   ----------------------------------------------------------- */
:root {
	--bg-light: #fff;
	--text-dark: #2c3e50;
	--transition-speed: 0.4s;
	--scroll-speed: 6s;
	
	/* Couleurs par défaut */
	--brand-color: #0062A3;
	--accent-color: #FFF200;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border-radius: 0 !important; /* Aucun arrondi sur tout le site */
}

body {
	font-family: 'Montserrat', sans-serif;
	background-color: var(--bg-light);
	color: var(--text-dark);
	display: flex;
	flex-direction: column;
	align-items: center; /* Centre horizontalement le header, la grid et le footer */
	min-height: 100vh;
}

/* -----------------------------------------------------------
	HEADER
   ----------------------------------------------------------- */
header {
	width: 100%;
	text-align: center;
	padding: 60px 20px 40px;
}

.main-logo {
	max-width: 300px;
	height: auto;
	margin-bottom: 20px;
}

header h1 {
	font-size: 2.2rem;
	color: #000;
	text-transform: uppercase;
	margin-bottom: 10px;
}

header p {
	font-size: 1.1rem;
	color: #000;
	font-weight: bold;
	text-transform: uppercase;
}

/* -----------------------------------------------------------
	GRILLE (OPTIMISÉE POUR 4 ENCARTS CENTRÉS)
   ----------------------------------------------------------- */
.grid-container {
	display: grid;
	grid-template-columns: repeat(4, 1fr); /* 4 colonnes sur desktop */
	gap: 20px;
	width: 100%;
	max-width: 1600px; /* Largeur augmentée pour des encarts plus larges */
	margin: 0 auto 60px;
	padding: 0 40px;
	justify-content: center;
}

/* -----------------------------------------------------------
	CONFIGURATION DES COULEURS PAR SITE
   ----------------------------------------------------------- */
/* ABDT : Bleu spécifique et Jaune survol */
.card.abdt {
	--brand-color: #006a9f;
	--accent-color: #ffed24;
}

/* MILLO : Rouge et Blanc */
.card.millo {
	--brand-color: #e30613;
	--accent-color: #000;
}

/* EGCA : Bleu Marine et Blanc */
.card.egca {
	--brand-color: #003366;
	--accent-color: #5ba427;
}

/* DCAT : Orange et Anthracite */
.card.dcat {
	--brand-color: #f39c12;
	--accent-color: #32a526;
}

/* -----------------------------------------------------------
	STRUCTURE DES CARTES
   ----------------------------------------------------------- */
.card {
	background: white;
	text-decoration: none;
	color: inherit;
	box-shadow: 0 10px 25px rgba(0,0,0,0.05);
	transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease, border-color var(--transition-speed) ease;
	display: flex;
	flex-direction: column;
	border: 2px solid transparent;
}

.card:hover {
	transform: translateY(-10px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
	border-color: var(--brand-color);
}

/* Cadre gris autour de l'image (réduit) */
.browser-mockup {
	background: #e0e0e0;
	padding: 4px 4px 0 4px; /* Bordure grise fine */
	border-bottom: 1px solid #ddd;
}

.screen {
	width: 100%;
	height: 220px; /* Hauteur de vision de la capture */
	background: #fff;
	overflow: hidden;
	position: relative;
}

.scrolling-img {
	width: 100%;
	height: auto;
	position: absolute;
	top: 0;
	left: 0;
	transition: transform var(--scroll-speed) ease-in-out;
}

.card:hover .scrolling-img {
	transform: translateY(calc(-100% + 220px));
}

.card-content {
	padding: 30px 20px;
	text-align: center;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

.card h3 {
	font-size: 1.4rem;
	color: var(--brand-color);
	margin-bottom: 10px;
}

.card p {
	font-size: 0.95rem;
	color: #636e72;
	margin-bottom: 25px;
	flex-grow: 1;
}

/* Bouton Dynamique */
.btn {
	display: inline-block;
	padding: 14px 24px;
	background-color: var(--brand-color);
	color: white;
	font-weight: bold;
	font-size: 0.85rem;
	text-transform: uppercase;
	transition: all 0.3s ease;
}

.card:hover .btn {
	background-color: var(--accent-color);
	color: var(--brand-color); /* Texte prend la couleur de marque au survol du bouton jaune */
}

/* -----------------------------------------------------------
	FOOTER (STYLE H1 + HOVER ROUGE GEM)
   ----------------------------------------------------------- */
footer {
	width: 100%;
	text-align: center;
	padding: 20px 20px;
	margin-top: auto;
}

footer p {
	color: #000000; /* Noir par défaut */
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 0.85rem;
	cursor: default;
	transition: color 0.3s ease; /* Transition fluide pour le changement de couleur */
}

/* Au cas où tu aurais mis un lien <a> dans ton footer */
footer a {
	text-decoration: none;
	color: inherit;
	transition: color 0.3s ease;
}

footer a:hover {
	color: #E30613;
	text-decoration: none;
}

/* -----------------------------------------------------------
	RESPONSIVE
   ----------------------------------------------------------- */
@media (max-width: 1200px) {
	.grid-container {
		grid-template-columns: repeat(2, 1fr); /* 2x2 sur tablette */
		max-width: 900px;
	}
}

@media (max-width: 700px) {
	.grid-container {
		grid-template-columns: 1fr; /* Une seule colonne */
		/* On augmente le padding à 40px de chaque côté pour décoller les encarts du bord */
		padding: 0 40px; 
		gap: 30px; /* On augmente un peu l'espace entre les cartes pour plus d'air */
	}

	header h1 {
		font-size: 1.8rem;
	}
	
	.screen {
		height: 180px;
	}

	.card:hover .scrolling-img {
		transform: translateY(calc(-100% + 180px));
	}
}