/* ====================================
   STYLES POUR LES FORMULAIRES
   connexion.php, inscription.php, profile.php, contact.php, newsletter.php
   ==================================== */

/* Gradient de fond spécifique aux formulaires */
body.form-page {
	background: var(--gradient-form-split);
}

/* Layout principal des formulaires */
.main_inscription {
	height: calc(100vh - 73px);
	display: flex;
	align-items: stretch;
}

/* Colonne de gauche - arguments/avantages */
aside.argues {
	display: flex;
	align-items: center;
	width: 25%;
	padding: 25px;
	background-image: url(../images/bernard.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: bottom;
	background-color: #dac6ad;
}

.argues__liste {
	margin-bottom: 150px;
}

.argues__liste p {
	margin-bottom: 15px;
	line-height: 1.6;
}

/* Section du formulaire */
section.inscription {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 100px;
	flex-grow: 1;
	background-image: url(../media/1/photos/4.jpg);
	background-position: bottom right;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
}

/* Description dans la boîte du formulaire */
.inscription__description {
	max-width: 500px;
	padding: var(--spacing-xl);
	border-radius: var(--radius-md);
	background-color: rgba(255, 255, 255, 0.4);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.inscription__description h2 {
	color: #000;
	margin-bottom: 10px;
}

.inscription__description p {
	color: #333;
	margin-bottom: 10px;
}

/* Formulaire */
.inscription__form {
	margin-top: 15px;
}

.inscription__form div {
	margin-bottom: 15px;
}

/* Labels */
label {
	display: block;
	margin-bottom: var(--spacing-xs);
	font-weight: bold;
	color: #333;
}

label span {
	color: var(--color-error);
}

/* Inputs et selects */
input,
select {
	width: 100%;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	border: 2px solid var(--color-secondary);
	border-radius: var(--radius-md);
	padding: var(--spacing-lg);
	margin: var(--spacing-xs) 0 var(--spacing-sm);
	font-size: var(--font-base);
	background: #FFF;
	color: #333;
}

input::placeholder {
	font-style: italic;
	color: #999;
}

input:focus,
select:focus {
	outline: none;
	border-color: var(--color-secondary);
	box-shadow: 0 0 5px rgba(255, 173, 148, 0.5);
}

/* Styles spécifiques pour les selects */
.formDate select {
	display: inline-block;
	width: auto;
	padding: 14px 10px;
}

/* Erreurs */
#password-error {
	color: var(--color-error);
	font-size: var(--font-sm);
	display: block;
	margin: var(--spacing-xs) 0 var(--spacing-sm);
}

.erreur_text {
	padding: var(--spacing-md);
	color: var(--color-white);
	background: var(--color-error);
	text-align: center;
	border-radius: var(--radius-sm);
	margin-bottom: var(--spacing-lg);
}

/* Boutons */
button {
	margin: var(--spacing-sm) auto;
	padding: var(--spacing-lg) var(--spacing-lg);
	background-image: linear-gradient(to right, #ffeebc, var(--color-secondary));
	display: block;
	color: #000;
	font-size: var(--font-base);
	font-weight: bold;
	border: none;
	border-radius: var(--radius-md);
	cursor: pointer;
	box-shadow: var(--shadow-blue);
	transition: var(--transition-shadow);
	width: 100%;
	box-sizing: border-box;
}

button:hover {
	box-shadow: none;
}

button:active {
	transform: translateY(2px);
}

/* Texte aligné à droite */
.right_text {
	text-align: right;
	font-weight: bold;
	font-size: 0.8em;
	margin-top: 10px;
}

.right_text a {
	background: var(--color-primary);
	padding: 5px 10px;
	color: #000;
	text-decoration: none;
	border-radius: 5px;
	display: inline-block;
	transition: all 0.3s ease;
}

.right_text a:hover {
	background: #FFF;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* ====================================
   NEWSLETTER - Formulaire contact-form
   ==================================== */

/* Image parallaxe du slider newsletter */
.parallax-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 120%;
	background-image: url(../media/28/album/81ee5b37a06f_1920x500.jpg);
	background-size: cover;
	background-position: center;
	z-index: -1;
}

@media (max-width: 1400px) {
	.parallax-image {
		background-image: url(../media/28/album/81ee5b37a06f_1280.jpg);
	}
}

@media (max-width: 800px) {
	.parallax-image {
		background-image: url(../media/28/album/81ee5b37a06f_768.jpg);
	}
}

/* Formulaire contact (newsletter, contact) */
form.contact-form {
	padding: 50px;
}

form.contact-form input,
form.contact-form select {
	width: 100%;
	border: 2px solid var(--color-secondary);
	border-radius: 8px;
	padding: 14px;
	margin: 5px 0 10px;
	font-size: 1rem;
	background: #FFF;
	box-sizing: border-box;
}

form.contact-form textarea {
	width: 100%;
	height: 250px;
	border: 2px solid var(--color-secondary);
	border-radius: 8px;
	padding: 14px;
	margin-top: 5px;
	font-size: 1rem;
	box-sizing: border-box;
}

/* ====================================
   MOT DE PASSE OUBLIÉ - Reset password
   ==================================== */

.main_reset {
	min-height: calc(100vh - 73px);
	display: flex;
	align-items: stretch;
}

section.reset {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 100px 0;
	flex-grow: 1;
	background-image: url(../media/1/photos/4.jpg);
	background-position: bottom right;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
}

.reset__box {
	max-width: 500px;
	padding: 25px;
	border-radius: 8px;
	background-color: rgba(255, 255, 255, 0.4);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.reset__box h2 {
	margin-top: 0;
	color: #333;
	font-size: 1.8rem;
}

.reset__box p {
	color: #666;
	margin-bottom: 20px;
}

.reset__form {
	margin-top: 20px;
}

.reset__field {
	margin-bottom: 20px;
}

.reset__label {
	display: block;
	margin-bottom: 8px;
	font-weight: bold;
	color: #333;
}

.reset__label span {
	color: #dc3545;
}

.reset__input {
	width: 100%;
	box-sizing: border-box;
	border: 2px solid var(--color-secondary);
	border-radius: 8px;
	padding: 14px;
	font-size: 1rem;
	background: #FFF;
	transition: border-color 0.3s ease;
}

.reset__input:focus {
	outline: none;
	border-color: var(--color-secondary);
}

.reset__input::placeholder {
	font-style: italic;
	color: #999;
}

.reset__btn {
	width: 100%;
	margin: 10px 0;
	background: #FFF;
	display: block;
	color: #000;
	font-size: 1rem;
	font-weight: bold;
	border-radius: 8px;
	border: none;
	padding: 14px;
	cursor: pointer;
	box-shadow: 0 5px 20px rgba(137, 202, 255, 0.58);
	transition: all 0.3s ease;
}

.reset__btn:hover {
	box-shadow: 0 8px 25px rgba(137, 202, 255, 0.8);
	transform: translateY(-2px);
}

.reset__error {
	background: #dc3545;
	color: #fff;
	padding: 15px;
	border-radius: 8px;
	margin-bottom: 20px;
	text-align: center;
}

.reset__success {
	background: #28a745;
	color: #fff;
	padding: 15px;
	border-radius: 8px;
	margin-bottom: 20px;
	text-align: center;
}

.reset__links {
	text-align: center;
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid #ddd;
}

.reset__links a {
	background: var(--color-secondary);
	padding: 8px 15px;
	color: #000;
	text-decoration: none;
	border-radius: 5px;
	font-weight: bold;
	transition: background 0.3s ease;
	margin: 0 5px;
	display: inline-block;
}

.reset__links a:hover {
	background: #FFF;
}

/* ====================================
   CONNEXION
   ==================================== */

.main_connexion {
	min-height: calc(100vh - 73px);
	display: flex;
	align-items: stretch;
}

section.connexion {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 100px 0;
	flex-grow: 1;
	background-image: url(../media/1/photos/4.jpg);
	background-position: bottom right;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
}

.connexion__box {
	max-width: 500px;
	padding: 25px;
	border-radius: 8px;
	background-color: rgba(255, 255, 255, 0.4);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.connexion__box h2 {
	margin-top: 0;
	color: #333;
	font-size: 1.8rem;
}

.connexion__box p {
	color: #666;
	margin-bottom: 20px;
}

.connexion__form {
	margin-top: 20px;
}

.connexion__field {
	margin-bottom: 20px;
}

.connexion__label {
	display: block;
	margin-bottom: 8px;
	font-weight: bold;
	color: #333;
}

.connexion__label span {
	color: #dc3545;
}

.connexion__input {
	width: 100%;
	box-sizing: border-box;
	border: 2px solid var(--color-secondary);
	border-radius: 8px;
	padding: 14px;
	font-size: 1rem;
	background: #FFF;
	transition: border-color 0.3s ease;
}

.connexion__input:focus {
	outline: none;
	border-color: var(--color-secondary);
}

.connexion__input::placeholder {
	font-style: italic;
	color: #999;
}

.connexion__btn {
	width: 100%;
	margin: 10px 0;
	background: #FFF;
	display: block;
	color: #000;
	font-size: 1rem;
	font-weight: bold;
	border-radius: 8px;
	border: none;
	padding: 14px;
	cursor: pointer;
	box-shadow: 0 5px 20px rgba(137, 202, 255, 0.58);
	transition: all 0.3s ease;
}

.connexion__btn:hover {
	box-shadow: 0 8px 25px rgba(137, 202, 255, 0.8);
	transform: translateY(-2px);
}

.connexion__error {
	background: #dc3545;
	color: #fff;
	padding: 15px;
	border-radius: 8px;
	margin-bottom: 20px;
	text-align: center;
}

.connexion__success {
	background: #28a745;
	color: #fff;
	padding: 15px;
	border-radius: 8px;
	margin-bottom: 20px;
	text-align: center;
}

.connexion__links {
	text-align: center;
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid #ddd;
}

.connexion__links a {
	background: var(--color-secondary);
	padding: 8px 15px;
	color: #000;
	text-decoration: none;
	border-radius: 5px;
	font-weight: bold;
	transition: background 0.3s ease;
	margin: 0 5px;
	display: inline-block;
}

.connexion__links a:hover {
	background: #FFF;
}

.connexion__links a i {
	margin-right: 5px;
}

/* ====================================
   RESPONSIVE
   ==================================== */

@media only screen and (max-width: 767px) {
	aside.argues {
		display: none;
	}
}

@media (max-width: 768px) {
	.main_inscription {
		flex-direction: column;
		height: auto;
	}

	aside.argues {
		width: 100%;
		padding: 20px;
	}

	section.inscription {
		padding: 30px 15px;
		background-image: none;
		background-color: rgba(255, 255, 255, 0.95);
	}

	.inscription__description {
		max-width: 100%;
		padding: 20px;
	}

	button {
		width: 100%;
	}

	.main_reset {
		flex-direction: column;
	}

	section.reset {
		padding: 40px 20px;
	}

	.reset__box {
		padding: 30px 20px;
	}

	.main_connexion {
		flex-direction: column;
	}

	section.connexion {
		padding: 40px 20px;
	}

	.connexion__box {
		padding: 30px 20px;
	}
}