/* ==========================================================================
   RESPONSIVE LAYOUT - francoisroyet.com
   Ne PAS modifier page.css (utilise par TinyMCE)
   ========================================================================== */

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

img {
	max-width: 100%;
	height: auto;
}

/* --- Layout Container --- */
.site-container {
	max-width: 938px;
	margin: 0 auto;
	padding: 0 15px;
	width: 100%;
}

/* --- Header (page.php) --- */
.site-header {
	display: flex;
	align-items: stretch;
	min-height: 175px;
	padding: 25px 0 10px;
}

.site-header__logo {
	flex-shrink: 0;
	width: 425px;
	display: flex;
	align-items: flex-start;
}

.site-header__logo img {
	margin-top: 10px;
}

.site-header__title {
	flex: 1;
	display: flex;
	align-items: flex-end;
}

/* --- Homepage Hero --- */
.hero {
	position: relative;
	height: 600px;
}

.hero__logo {
	position: absolute;
	z-index: 1;
	top: 430px;
	left: 1px;
	width: 336px;
	height: 148px;
}

.hero__photo {
	position: absolute;
	z-index: 2;
	top: 94px;
	left: 168px;
	width: 696px;
	height: 336px;
}

.hero__edito {
	position: absolute;
	z-index: 3;
	top: 100px;
	left: 544px;
	width: 330px;
	height: 200px;
	display: flex;
	align-items: flex-end;
}

.hero__link-films {
	position: absolute;
	z-index: 4;
	top: 400px;
	left: 674px;
}

.hero__link-commande {
	position: absolute;
	z-index: 5;
	top: 450px;
	left: 674px;
}

/* --- Content Area (page.php) --- */
.site-content {
	min-height: 400px;
	padding-top: 40px;
}

/* Background ombre sous le header */
.site-page-wrap {
	background: url(../images/bg_titre_page.png) calc(100% - -25px) 155px no-repeat;
}

/* Titre de page droit (pas de rotation) */
.site-header .page_nom {
	-webkit-transform: none;
	-moz-transform: none;
	-o-transform: none;
	-ms-transform: none;
	transform: none;
	white-space: nowrap;
}

/* Wrapper pour contenus TinyMCE injectes depuis la base */
.tinymce-content table {
	max-width: 100%;
}

.tinymce-content img {
	max-width: 100%;
	height: auto;
}

/* Tables TinyMCE responsive en mobile */
@media (max-width: 768px) {
	.tinymce-content table,
	.tinymce-content tbody,
	.tinymce-content tr,
	.tinymce-content td {
		display: block;
		width: 100% !important;
	}

	.tinymce-content td {
		padding: 10px 0;
	}

	.tinymce-content td img {
		display: block;
		margin: 0 auto 15px;
	}
}

@media (min-width: 769px) and (max-width: 1024px) {
	.tinymce-content table {
		width: 100% !important;
	}

	.tinymce-content td {
		padding: 5px;
	}
}

/* --- Footer Navigation --- */
.site-footer-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0;
	padding: 15px 0;
}

.site-footer-nav .a_fonctionnelle {
	white-space: nowrap;
}

/* --- Film Module Grid --- */
.film-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px 20px;
}

.film-card {
	display: flex;
	gap: 10px;
}

.film-card__thumbnail {
	flex-shrink: 0;
	width: 144px;
}

.film-card__info {
	flex: 1;
}

.film-card__title {
	font-weight: bold;
	margin-bottom: 4px;
}

.film-card__actions {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 5px;
}

/* --- Film Navigation --- */
.film-nav {
	display: flex;
	gap: 5px;
	margin-top: 0;
	margin-bottom: 20px;
}

.film-nav a.a_mes_films,
.film-nav a.a_films_de_commande {
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform: rotate(0deg);
}

.film-nav a.a_mes_films {
	font-size: 20px;
	background-position: 5px 4px;
}

/* --- Pagination --- */
.pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: 20px;
}

/* --- Contact Form --- */
.form-contact {
	width: 100%;
}

.form-contact .form-row {
	display: flex;
	align-items: flex-start;
	margin-bottom: 8px;
}

.form-contact .form-label {
	width: 150px;
	flex-shrink: 0;
	padding-top: 4px;
}

.form-contact .form-field {
	flex: 1;
}

.form-contact input[type="text"],
.form-contact textarea {
	width: 100%;
	box-sizing: border-box;
}

.form-contact .form-actions {
	text-align: right;
	margin-top: 15px;
}

/* --- Links Module --- */
.liens-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.liens-list li {
	padding: 3px 0;
}

.liens-list li a {
	text-decoration: none;
}

/* --- Commande (2 columns) --- */
.commande-layout {
	display: flex;
	gap: 30px;
	padding: 30px 0;
}

.commande-panier {
	width: 350px;
	flex-shrink: 0;
}

.commande-form {
	flex: 1;
}

/* --- Plan du site --- */
.plan-du-site ul {
	padding: 3px 0 3px 20px;
}

/* ==========================================================================
   RESPONSIVE - Tablette (< 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
	.site-header .page_nom {
		font-size: 42px;
		white-space: normal;
	}

	.site-header__logo {
		width: 300px;
	}

	.hero {
		position: static;
		height: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: 20px 0;
		gap: 20px;
	}

	.hero__logo,
	.hero__photo,
	.hero__edito,
	.hero__link-films,
	.hero__link-commande {
		position: static;
		width: auto;
		height: auto;
	}

	.hero__photo img {
		width: 100%;
		max-width: 500px;
		height: auto;
	}

	.hero__logo img {
		width: 100%;
		max-width: 300px;
		height: auto;
	}

	.hero__edito {
		display: block;
		max-width: 500px;
		padding: 0 15px;
	}

	.hero__link-films,
	.hero__link-commande {
		display: block;
	}
}

/* ==========================================================================
   RESPONSIVE - Mobile (< 768px)
   ========================================================================== */
@media (max-width: 768px) {

	/* --- Homepage Hero --- */
	.hero {
		position: static;
		height: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: 40px 20px 30px;
		gap: 0;
	}

	.hero__photo,
	.hero__logo,
	.hero__edito,
	.hero__link-films,
	.hero__link-commande {
		position: static;
		width: auto;
		height: auto;
	}

	/* Photo portrait - centree visuellement (compense la rotation) */
	.hero__photo {
		order: 1;
		margin-bottom: 25px;
		padding-left: 30px;
	}

	.hero__photo img {
		width: 55vw;
		max-width: 240px;
		height: auto;
	}

	/* Logo texte sous la photo */
	.hero__logo {
		order: 2;
		margin-bottom: 20px;
	}

	.hero__logo img {
		width: 220px;
		height: auto;
	}

	/* Edito - texte centre elegant */
	.hero__edito {
		order: 3;
		display: block;
		max-width: 300px;
		margin-bottom: 30px;
	}

	.hero__edito .edito {
		transform: none;
		-webkit-transform: none;
		font-size: 11px;
		line-height: 17px;
		color: #888;
	}

	/* Boutons empiles, bien espaces */
	.hero__link-films {
		order: 4;
		margin-bottom: 12px;
	}

	.hero__link-commande {
		order: 5;
	}

	/* --- Page Header --- */
	.site-header {
		flex-direction: column;
		align-items: center;
		min-height: auto;
		padding: 15px 0;
		text-align: center;
	}

	.site-header__logo {
		width: auto;
		text-align: center;
		display: block;
	}

	.site-header__logo img {
		margin-top: 0;
		max-width: 250px;
	}

	.site-header__title {
		text-align: center;
		margin-top: 10px;
		display: block;
	}

	.site-header__title .page_nom {
		font-size: 36px;
		white-space: normal;
	}

	/* --- Content --- */
	.site-content {
		padding-top: 20px;
		min-height: auto;
		background-size: 200px;
	}

	.tinymce-content {
		overflow-x: auto;
	}

	/* --- Footer Nav --- */
	.site-footer-nav {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: 4px 0;
		padding: 20px 10px;
		border-top: 1px solid #e0e0e0;
		margin-top: 30px;
	}

	.site-footer-nav .a_fonctionnelle {
		padding: 6px 10px;
		font-size: 12px;
	}

	.site-footer-nav .fonctionnelle {
		color: #ccc;
	}

	/* --- Film Grid --- */
	.film-grid {
		grid-template-columns: 1fr;
		gap: 25px;
	}

	.film-nav {
		flex-direction: column;
		gap: 10px;
	}

	/* --- Contact Form --- */
	.form-contact .form-row {
		flex-direction: column;
	}

	.form-contact .form-label {
		width: 100%;
		margin-bottom: 3px;
	}

	/* --- Commande --- */
	.commande-layout {
		flex-direction: column;
		padding: 15px 0;
	}

	.commande-panier {
		width: 100%;
	}
}