/*
 * Responsive styles for www.ercosarl40.fr
 * Copyright (C) 2025
 */

/*--------------------
	TABLETS (jusqu'à 1024px)
--------------------*/
@media (max-width: 1024px) {
	
	/* Navigation */
	nav {
		ul {
			gap: 2rem;
		}
		a {
			font-size: 1.5rem;
		}
	}
	#img-logo-nav {
		height: 40px;
	}

	/* Section Accueil */
	#img-logo-accueil {
		height: 180px;
		right: 100px;
		top: 200px;
	}
	h1 {
		font-size: 3rem;
	}
	.hero-subtitle {
		font-size: 1.5rem;
	}

	/* Prestations */
	.prestations-grid {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: auto;
	}
	#prestation-card4 {
		grid-column: span 1;
	}
	#prestation-card5 {
		grid-column-start: 2;
	}

	/* Références */
	.references-grid {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: auto;
		justify-items: center;
	}

	/* Contact */
	.contact-content {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
	}
	#contact-content3 {
		grid-column: span 1;
	}
}

/*--------------------
	MOBILE (jusqu'à 768px)
--------------------*/
@media (max-width: 768px) {
	
	/* Navigation */
	nav {
		padding: 0.8rem 0;
		ul {
			gap: 1rem;
			padding: 0 1rem;
			flex-wrap: wrap;
			justify-content: space-around;
		}
		a {
			font-size: 1.2rem;
		}
	}
	#img-logo-nav {
		height: 35px;
	}

	/* Sections communes */
	section {
		padding: 5rem 1.5rem 3rem;
		min-height: auto;
	}
	.container {
		max-width: 100%;
	}
	h1 {
		font-size: 2.5rem;
	}
	h2 {
		font-size: 2rem;
		margin-bottom: 2rem;
	}

	/* Section Accueil */
	#accueil {
		text-align: center;
	}
	#accueil::before {
		width: 300px;
		height: 300px;
		right: -30%;
		top: -30%;
	}
	#img-logo-accueil {
		display: none; /* Cache le logo sur mobile pour éviter le débordement */
	}
	.hero-subtitle {
		font-size: 1.3rem;
	}
	.cta-button {
		font-size: 1.2rem;
		padding: 0.8rem 2rem;
	}

	/* Prestations */
	#prestations-text {
		font-size: 1.1em;
		text-align: justify;
	}
	.prestations-grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
		margin-top: 2rem;
	}
	#prestation-card4,
	#prestation-card5 {
		grid-column: span 1;
	}
	.prestation-card {
		padding: 1.5rem;
		h3 {
			font-size: 1.3rem;
		}
		ul {
			padding-left: 20px;
		}
	}

	/* Références */
	.references-grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
		margin-top: 2rem;
		justify-items: center;
	}
	.reference-item {
		max-width: 100%;
		padding: 1.5rem;
	}
	.img-reference {
		width: 100%;
		max-width: 250px;
	}

	/* Contact */
	.contact-content {
		grid-template-columns: 1fr;
		gap: 1.5rem;
		p {
			font-size: 1.2rem;
		}
	}
	#contact-content1,
	#contact-content2 {
		min-width: auto;
	}
	#contact-content3 {
		grid-column: span 1;
	}
	.contact-info {
		margin: 2rem 0;
		font-size: 1.2rem;
	}
	.contact-button {
		font-size: 1.2rem;
		padding: 0.8rem 1.8rem;
		margin-right: 5px;
		margin-bottom: 10px;
		display: inline-block;
	}
	.contact-button-social-mail,
	.contact-button-social-linkedin {
		padding: 1.5rem 2rem;
		margin-left: 5px;
		margin-bottom: 10px;
		background-size: 40px;
	}
	#img-logo-contact {
		height: 120px;
		margin-top: 30px;
	}

	/* Footer */
	footer {
		font-size: 0.8rem;
		padding: 1.5rem;
	}
}

/*--------------------
	PETITS MOBILES (jusqu'à 480px)
--------------------*/
@media (max-width: 480px) {
	
	/* Navigation */
	nav {
		ul {
			gap: 0.5rem;
			padding: 0 0.5rem;
		}
		a {
			font-size: 1rem;
		}
	}
	#img-logo-nav {
		height: 30px;
	}

	/* Sections */
	section {
		padding: 4rem 1rem 2rem;
	}
	h1 {
		font-size: 2rem;
	}
	h2 {
		font-size: 1.7rem;
	}

	/* Accueil */
	.hero-subtitle {
		font-size: 1.1rem;
	}
	.cta-button {
		font-size: 1rem;
		padding: 0.7rem 1.5rem;
	}

	/* Prestations */
	#prestations-text {
		font-size: 1em;
	}
	.prestation-card {
		padding: 1.2rem;
		h3 {
			font-size: 1.2rem;
		}
	}

	/* Références */
	.reference-item {
		padding: 1.2rem;
	}

	/* Contact */
	.contact-content {
		p {
			font-size: 1rem;
		}
	}
	.contact-info {
		font-size: 1rem;
		margin: 1.5rem 0;
	}
	.contact-button {
		font-size: 1rem;
		padding: 0.7rem 1.5rem;
		display: block;
		margin: 10px auto;
		width: fit-content;
	}
	.contact-button-social-mail,
	.contact-button-social-linkedin {
		padding: 1.2rem 1.5rem;
		background-size: 35px;
		display: block;
		margin: 10px auto;
		width: fit-content;
	}
	#img-logo-contact {
		height: 100px;
	}

	/* Footer */
	footer {
		font-size: 0.7rem;
		line-height: 1.4;
	}
}

/*--------------------
	ORIENTATION PAYSAGE MOBILE
--------------------*/
@media (max-height: 500px) and (orientation: landscape) {
	section {
		min-height: auto;
		padding: 3rem 1.5rem 2rem;
	}
	#accueil {
		min-height: 100vh;
	}
}

/* End of file responsive.less */
/* Location: ./assets/less/responsive.less */