/*  VARIABLES  */
:root {
	--yellow: #E5BA13;
	--dark: #383331;
	--white: #ffffff;
	--gray-header: #555555;
	--transition: 0.3s ease;
}

/*  GLOBAL  */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: 'Poppins', Arial, Helvetica, sans-serif;
	background-color: var(--yellow);
	color: var(--dark);
	line-height: 1.6;
}

a {
	text-decoration: none;
	color: inherit;
	transition: color var(--transition);
}

a:hover {
	color: var(--dark);
	background: var(--white);
}

/*  HEADER  */
.header {
	position: sticky;
	top: 0;
	width: 100%;
	background: var(--gray-header);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	padding: 10px 15px;
	z-index: 1000;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.header::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: linear-gradient(
		to right,
		#2e7d32 0%,
		#2e7d32 33.33%,
		#ffffff 33.33%,
		#ffffff 66.66%,
		#c62828 66.66%,
		#c62828 100%
	);
}

.logo-nom {
	display: flex;
	align-items: center;
	gap: 10px;
}

.logo-img {
	width: 88px;
	height: 88px;
	display: block;
	object-fit: contain;
}

.restaurant-name,
.hero-title,
.pizzamoment h4,
.footer-main h4 {
	font-family: 'Bebas Neue', Impact, 'Arial Narrow Bold', sans-serif;
}

.restaurant-name {
	font-weight: 700;
	font-size: 26px;
	color: var(--white);
	letter-spacing: 1px;
}

.header-info {
	display: none;
	font-size: 12px;
	font-weight: 600;
	gap: 10px;
	color: var(--white);
}

.nav {
	display: flex;
	align-items: center;
	gap: 10px;
}

.nav-links {
	display: flex;
	flex-direction: column;
	position: fixed;
	top: 70px;
	right: 0;
	width: 100%;
	height: calc(100vh - 70px);
	background: var(--gray-header);
	justify-content: center;
	align-items: center;
	gap: 30px;
	transform: translateX(100%);
	transition: transform 0.4s ease;
}

.nav-links a {
	font-size: 22px;
	font-weight: 700;
	color: var(--white);
}

.nav-links.show {
	transform: translateX(0);
}

.hamburger {
	width: 25px;
	height: 20px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	cursor: pointer;
	background: transparent;
	border: none;
	padding: 0;
}

.hamburger span {
	display: block;
	height: 3px;
	background: var(--white);
	border-radius: 3px;
	transition: 0.3s;
}

.hamburger.active span:nth-child(1) {
	transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active span:nth-child(2) {
	opacity: 0;
}

.hamburger.active span:nth-child(3) {
	transform: rotate(-45deg) translate(5px, -5px);
}

.btn-call {
	background: var(--yellow);
	color: var(--gray-header);
	padding: 8px 14px;
	border-radius: 25px;
	font-weight: 600;
	font-size: 14px;
	transition: transform var(--transition);
	white-space: nowrap;
	text-align: center;
	display: inline-block;
}

.btn-call:hover {
	transform: scale(1.05);
}

/*  HERO  */
.hero {
	position: relative;
	height: 90vh;
	background: url('../img/pizza7.jpg') center/cover no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.hero-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	z-index: 1;
}

.hero-content {
	position: relative;
	z-index: 2;
	color: var(--white);
	padding: 1rem 2rem;
	animation: fadeIn 1s ease forwards;
}

.hero-title {
	font-size: 3rem;
	letter-spacing: 2px;
	margin-bottom: 1rem;
	text-transform: uppercase;
}

.hero-subtitle {
	font-size: 1.2rem;
	margin-bottom: 1rem;
}

.hero-description {
	font-size: 1rem;
	margin-bottom: 2rem;
	text-align: center;
}

.hero-buttons {
	display: flex;
	flex-direction: column;
	gap: 15px;
	align-items: center;
}

.hero-buttons .btn-order {
	padding: 1rem 2rem;
	font-size: 1.1rem;
}

.hero-buttons .btn-secondary {
	background-color: rgba(255, 255, 255, 0.2);
	color: var(--white);
}

.hero-buttons .btn-secondary:hover {
	background-color: rgba(255, 255, 255, 0.35);
	transform: scale(1.05);
}

/*  SECTIONS  */
section {
	padding: 2rem;
	max-width: 1100px;
	margin: auto;
}

h2 {
	font-size: 1.8rem;
	margin-bottom: 1rem;
}

h3 {
	font-size: 1.4rem;
	margin-top: 2rem;
	margin-bottom: 1rem;
}

p {
	margin-bottom: 1rem;
	text-align: justify;
}

ul {
	margin-left: 1.5rem;
	margin-bottom: 1rem;
}

/*  MENU CARTE  */
.menu-items {
	display: grid;
	gap: 1.2rem;
}

.menu-items article {
	background-color: var(--white);
	padding: 1rem 1.2rem;
	border-radius: 10px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease;
}

.menu-items article:hover {
	transform: translateY(-3px);
}

.menu-items h4 {
	display: flex;
	justify-content: space-between;
	font-size: 1.1rem;
	margin-bottom: 0.5rem;
}

.menu-items span {
	font-weight: 700;
}

/*  PIZZA DU MOMENT  */
.pizzamoment {
	background-color: #eaeaea;
	color: var(--dark);
	border-radius: 12px;
	border: 2px solid var(--gray-header);
	padding: 1rem 1.5rem;
	margin-bottom: 1.2rem;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pizzamoment h4 {
	font-size: 1.2rem;
	margin-bottom: 0.5rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.pizzamoment p {
	font-size: 1rem;
	line-height: 1.5;
}

.pizzamoment:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/*  GALLERY PIZZAS  */
.pizza-gallery {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.pizza-gallery img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
	transition: transform var(--transition);
}

.pizza-gallery img:hover {
	transform: scale(1.05);
}

.map-container {
	margin-top: 1rem;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/*  BOUTONS  */
.btn-order {
	display: inline-block;
	margin-top: 1rem;
	padding: 1rem 2rem;
	background-color: var(--dark);
	color: var(--white);
	font-weight: 600;
	border-radius: 8px;
	transition: transform var(--transition);
}

.btn-order:hover {
	transform: scale(1.05);
}

/*  BOUTON APPEL MOBILE  */
.call-btn {
	position: fixed;
	bottom: 20px;
	right: 20px;
	background: linear-gradient(145deg, #E5BA13, #F1C40F);
	color: #383331;
	font-size: 1.6rem;
	padding: 1rem 1.2rem;
	border-radius: 50%;
	text-decoration: none;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
	z-index: 1000;
}

/*  FAQ  */
.faq-section {
	background-color: #f9f9f9;
	padding: 2rem 1rem;
	border-radius: 10px;
	max-width: 900px;
	margin: 3rem auto;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.faq-section h2 {
	text-align: center;
	font-size: 2rem;
	margin-bottom: 2rem;
	color: var(--dark);
}

.faq-item {
	background-color: #d9d9d9;
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 0;
}

.faq-question {
	cursor: pointer;
	padding: 1rem 1.5rem;
	font-weight: 600;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 1.1rem;
	color: var(--dark);
	background-color: #e0e0e0;
	margin: 0;
	line-height: 1.4;
	transition: background 0.3s;
}

.faq-question::after {
	content: '+';
	font-size: 1.4rem;
	transition: transform 0.3s ease;
}

.faq-item.active .faq-question::after {
	transform: rotate(45deg);
}

.faq-question:hover {
	background-color: rgba(229, 186, 19, 0.1);
}

.faq-answer {
	max-height: 0;
	overflow: hidden;
	font-size: 1rem;
	line-height: 1.6;
	color: #444;
	transition: max-height 0.4s ease;
	padding: 0 1.5rem;
}

.faq-item.active .faq-answer {
	max-height: 1000px;
	padding: 1rem 1.5rem;
}

/*  COOKIES  */
.cookie-banner {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background: var(--dark);
	color: var(--white);
	padding: 1rem 1.2rem;
	display: none;
	justify-content: space-between;
	align-items: center;
	gap: 15px;
	z-index: 2000;
	flex-wrap: wrap;
	box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.15);
}

.cookie-banner p {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.5;
	text-align: left;
}

.cookie-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.cookie-actions button {
	border: none;
	padding: 10px 16px;
	border-radius: 8px;
	cursor: pointer;
	font-weight: 600;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.cookie-actions button:hover {
	transform: translateY(-1px);
	opacity: 0.95;
}

#accept-cookies {
	background: var(--yellow);
	color: var(--dark);
}

#refuse-cookies {
	background: #d9d9d9;
	color: #222;
}

/*  ANIMATIONS  */
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(15px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/*  FOOTER  */
.site-footer {
	background: linear-gradient(180deg, #4a4441 0%, #383331 100%);
	color: var(--white);
	margin-top: 3rem;
	border-top: 4px solid;
	border-image: linear-gradient(
		to right,
		#2e7d32 33.33%,
		#ffffff 33.33% 66.66%,
		#c62828 66.66%
	) 1;
}

.footer-main {
	max-width: 1100px;
	margin: 0 auto;
	padding: 2.5rem 1.5rem 2rem;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	align-items: start;
}

.footer-contact,
.footer-hours,
.footer-social {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
	padding: 1.25rem 1.2rem;
	backdrop-filter: blur(3px);
	min-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.footer-main h4 {
	font-size: 1.5rem;
	letter-spacing: 1px;
	color: var(--yellow);
	margin-bottom: 0.9rem;
}

.footer-main p,
.footer-main li,
.footer-main a {
	font-size: 0.95rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.92);
}

.footer-contact p {
	text-align: center;
	margin: 0;
}

.footer-contact a {
	text-align: center;
	font-size: 0.8rem;
}

.footer-hours ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-hours li {
	padding: 0.2rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-hours li:last-child {
	border-bottom: none;
}

.footer-social {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.footer-social .socials {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 14px;
	margin-top: 0.5rem;
}

.footer-legal {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding: 1.2rem 1rem 1.4rem;
	text-align: center;
	background: rgba(0, 0, 0, 0.08);
}

.footer-legal p {
	margin: 0.35rem 0;
	font-size: 0.85rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.82);
	text-align: center;
}

.footer-legal a {
	color: var(--yellow);
	font-weight: 500;
	transition: opacity 0.2s ease, color 0.2s ease;
}

.footer-legal a:hover {
	color: var(--white);
	opacity: 1;
}

.social-icon {
	width: 40px;
	height: 40px;
	display: inline-block;
	border-radius: 50%;
	background-size: 60% auto;
	background-position: center;
	background-repeat: no-repeat;
	transition: transform 0.3s, box-shadow 0.3s;
}

.social-icon:hover {
	transform: scale(1.2);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.social-icon.facebook {
	background-color: #1877f2;
	background-image: url('data:image/svg+xml;utf8,<svg fill="%23fff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22.675 0h-21.35C.592 0 0 .593 0 1.326v21.348C0 23.407.592 24 1.325 24H12.82V14.708h-3.24v-3.62h3.24V8.413c0-3.207 1.956-4.954 4.817-4.954 1.37 0 2.547.102 2.89.148v3.35l-1.985.001c-1.556 0-1.857.74-1.857 1.824v2.39h3.713l-.484 3.62h-3.23V24h6.33c.733 0 1.325-.593 1.325-1.326V1.326C24 .593 23.407 0 22.675 0z"/></svg>');
}

.social-icon.instagram {
	background-color: #e4405f;
	background-image: url('data:image/svg+xml;utf8,<svg fill="%23fff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 1.366.062 2.633.337 3.608 1.313.975.975 1.25 2.242 1.312 3.608.058 1.266.07 1.646.07 4.85s-.012 3.584-.07 4.85c-.062 1.366-.337 2.633-1.312 3.608-.975.975-2.242 1.25-3.608 1.312-1.266.058-1.646.07-4.85.07s-3.584-.012-4.85-.07c-1.366-.062-2.633-.337-3.608-1.312-.975-.975-1.25-2.242-1.312-3.608C2.175 15.584 2.163 15.204 2.163 12s.012-3.584.07-4.85c.062-1.366.337-2.633 1.312-3.608.975-.975 2.242-1.25 3.608-1.312C8.416 2.175 8.796 2.163 12 2.163zm0-2.163C8.741 0 8.332.013 7.052.072 5.772.131 4.57.397 3.515 1.452 2.46 2.507 2.194 3.709 2.135 4.989.013 8.332 0 8.741 0 12s.013 3.668.072 4.948c.059 1.28.325 2.482 1.38 3.537 1.055 1.055 2.257 1.321 3.537 1.38C8.332 23.987 8.741 24 12 24s3.668-.013 4.948-.072c1.28-.059 2.482-.325 3.537-1.38 1.055-1.055 1.321-2.257 1.38-3.537.059-1.28.072-1.689.072-4.948s-.013-3.668-.072-4.948c-.059-1.28-.325-2.482-1.38-3.537-1.055-1.055-2.257-1.321-3.537-1.38C15.668.013 15.259 0 12 0zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zm0 10.162a3.999 3.999 0 1 1 0-7.998 3.999 3.999 0 0 1 0 7.998zm6.406-11.845a1.44 1.44 0 1 0 0-2.88 1.44 1.44 0 0 0 0 2.88z"/></svg>');
}

.footer-webmaster {
	background: rgba(0, 0, 0, 0.08);
}

.footer-webmaster p {
	margin: 0;
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.75);
	letter-spacing: 0.3px;
	text-align: center;
}

/*  LEGAL PAGES  */
.legal-page {
	max-width: 900px;
	margin: 0 auto;
	padding: 2rem 1.2rem 4rem;
}

.legal-card {
	background: rgba(255, 255, 255, 0.88);
	border: 1px solid rgba(56, 51, 49, 0.08);
	border-radius: 16px;
	padding: 2rem;
	box-shadow: 0 10px 25px rgba(56, 51, 49, 0.08);
}

.legal-page h1 {
	margin-bottom: 1.5rem;
}

.legal-page h2 {
	margin-top: 2rem;
	margin-bottom: 0.75rem;
}

.legal-page p,
.legal-page li {
	line-height: 1.7;
}

.legal-back {
	display: inline-block;
	margin-bottom: 1.2rem;
	font-weight: 600;
}

/*  RESPONSIVE  */
@media (max-width: 900px) {
	.footer-main {
		grid-template-columns: 1fr;
		gap: 1rem;
		padding: 2rem 1rem 1.5rem;
	}

	.footer-contact,
	.footer-hours,
	.footer-social {
		padding: 1rem;
		text-align: center;
	}

	.footer-main h4 {
		font-size: 1.35rem;
	}

	.footer-main p,
	.footer-main li,
	.footer-main a {
		font-size: 0.92rem;
		text-align: center;
	}
}

@media (max-width: 768px) {
	.header {
		padding: 8px 12px;
		flex-wrap: nowrap;
	}

	.logo-nom {
		flex: 1;
		min-width: 0;
	}

	.logo-img {
		width: 52px;
		height: 52px;
		flex-shrink: 0;
	}

	.restaurant-name {
		font-size: 22px;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.nav {
		flex-shrink: 0;
		gap: 8px;
	}

	.btn-call {
		font-size: 12px;
		padding: 8px 10px;
	}

	.nav-links {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 68px;
		right: 0;
		width: 100%;
		height: calc(100vh - 68px);
		background: var(--gray-header);
		justify-content: center;
		align-items: center;
		gap: 30px;
		transform: translateX(100%);
		transition: transform 0.4s ease;
	}

	.nav-links.show {
		transform: translateX(0);
	}

	.menu-items {
		grid-template-columns: 1fr;
	}

	.pizza-gallery {
		grid-template-columns: 1fr 1fr;
	}

	.hero-title {
		font-size: 1.8rem;
	}

	.hero-subtitle,
	.hero-description {
		font-size: 1rem;
	}

	nav ul {
		position: absolute;
		top: 60px;
		right: -100%;
		flex-direction: column;
		background-color: var(--gray-header);
		width: 220px;
		padding: 1rem;
		transition: right 0.3s ease;
	}

	nav ul.show {
		right: 0;
	}

	.btn-call {
		font-size: 13px;
	}
}

@media (min-width: 768px) {
	.menu-items {
		grid-template-columns: repeat(3, 1fr);
	}

	.pizza-gallery {
		grid-template-columns: repeat(3, 1fr);
	}

	.header-info {
		display: flex;
		color: var(--white);
	}

	.hamburger {
		display: none;
	}

	.nav-links {
		position: static;
		height: auto;
		transform: none;
		flex-direction: row;
		gap: 20px;
	}

	.nav-links a {
		font-size: 14px;
	}

	.btn-call {
		font-size: 12px;
		padding: 10px 12px;
	}
}

@media (max-width: 600px) {
	.footer-main {
		padding: 1.5rem 0.9rem 1.2rem;
	}

	.footer-legal {
		padding: 1rem 0.8rem 1.2rem;
	}

	.footer-legal p {
		font-size: 0.8rem;
	}

	.cookie-banner {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}

	.cookie-banner p {
		text-align: center;
	}

	.cookie-actions {
		width: 100%;
		justify-content: center;
	}

	.cookie-actions button {
		flex: 1 1 auto;
	}

	.legal-card {
		padding: 1.25rem;
	}
}

@media (max-width: 480px) {
	.footer-main {
		padding: 1.5rem 0.9rem 1.2rem;
	}

	.footer-legal {
		padding: 1rem 0.8rem 1.2rem;
	}

	.footer-legal p {
		font-size: 0.8rem;
	}
}