/* ==========================================================================
   Pages de compte : « Connexion » (Figma 1347:11657) et « Créer un compte »
   (inscription des centres, Figma 1326:17485). Complète landing.css
   (tokens, header, footer). Formulaires HTML natifs, validés par auth.js.
   ========================================================================== */

.c1-page-auth {
	--c1-field-border: #ebebeb;
	--c1-field-text: #575757;
	--c1-field-shadow: 0 4px 2px rgba(30, 81, 187, 0.15);
	--c1-error: #cc0000;
	--c1-success: #0a7d3e;
}

/* ==========================================================================
   Champs et formulaires (communs)
   ========================================================================== */
.c1-form { display: flex; flex-direction: column; }
.c1-field { position: relative; display: block; }
.c1-field__label {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Champs texte */
.c1-form .c1-input {
	display: block;
	width: 100%;
	height: 48px;
	padding: 12px;
	border: 1px solid var(--c1-field-border);
	border-radius: 8px;
	background: var(--c1-white) no-repeat 12px center / 24px 24px;
	box-shadow: var(--c1-field-shadow);
	font-family: var(--c1-font-text);
	font-size: 16px;
	line-height: 24px;
	color: var(--c1-dark);
	transition: border-color 0.3s var(--c1-ease), box-shadow 0.3s var(--c1-ease);
	-moz-appearance: textfield;
}
.c1-form .c1-input::placeholder { color: var(--c1-field-text); opacity: 0.51; }
.c1-form .c1-input:focus { outline: none; border-color: var(--c1-primary); box-shadow: var(--c1-field-shadow), 0 0 0 3px rgba(0, 174, 239, 0.2); }
.c1-form .c1-input[type="number"]::-webkit-inner-spin-button,
.c1-form .c1-input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Icônes à gauche (maquette) */
.c1-form .c1-field--icon .c1-input { padding-left: 44px; }
.c1-form .c1-field--mail .c1-input { background-image: url("../icons/form-mail.svg"); }
.c1-form .c1-field--call .c1-input { background-image: url("../icons/form-call.svg"); }
.c1-form .c1-field--calendar .c1-input { background-image: url("../icons/form-calendar.svg"); }
.c1-form .c1-field--alarm .c1-input { background-image: url("../icons/form-alarm.svg"); }
.c1-form .c1-field--location .c1-input { background-image: url("../icons/form-location.svg"); }
.c1-form .c1-field--users .c1-input { background-image: url("../icons/form-users.svg"); }
.c1-form .c1-field--key .c1-input { background-image: url("../icons/form-key.svg"); }

/* Mot de passe : bouton afficher / masquer à droite */
.c1-form .c1-field--password .c1-input { padding-right: 48px; }
.c1-field__toggle {
	position: absolute;
	top: 12px; right: 12px;
	display: flex; align-items: center; justify-content: center;
	width: 24px; height: 24px;
	border-radius: 6px;
	background: url("../icons/form-eye.svg") no-repeat center / 24px 24px;
	transition: opacity 0.3s var(--c1-ease);
}
.c1-field__toggle:hover { opacity: 0.7; }
.c1-field__toggle[aria-pressed="true"]::after {
	content: "";
	width: 22px; height: 1.6px;
	border-radius: 2px;
	background: var(--c1-primary);
	transform: rotate(-35deg);
}

/* Champ fichier : boîte identique aux autres, icône d'envoi à droite */
.c1-field--file .c1-field__box {
	display: flex; align-items: center; gap: 8px;
	height: 48px;
	padding: 12px;
	border: 1px solid var(--c1-field-border);
	border-radius: 8px;
	background: var(--c1-white);
	box-shadow: var(--c1-field-shadow);
	cursor: pointer;
	transition: border-color 0.3s var(--c1-ease), box-shadow 0.3s var(--c1-ease);
}
.c1-field--file .c1-field__file-text {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	font-size: 16px;
	line-height: 24px;
	color: var(--c1-field-text);
	opacity: 0.51;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.c1-field--file.has-file .c1-field__file-text { color: var(--c1-dark); opacity: 1; }
.c1-field--file .c1-field__box::after {
	content: "";
	flex: none;
	width: 24px; height: 24px;
	background: url("../icons/form-upload.svg") no-repeat center / contain;
}
.c1-field--file input[type="file"] {
	position: absolute;
	inset: 0;
	width: 100%; height: 48px;
	opacity: 0;
	cursor: pointer;
}
.c1-field--file:hover .c1-field__box,
.c1-field--file:focus-within .c1-field__box { border-color: var(--c1-primary); }
.c1-field--file:focus-within .c1-field__box { box-shadow: var(--c1-field-shadow), 0 0 0 3px rgba(0, 174, 239, 0.2); }

/* Sélecteurs « Disponibilité » et « Horaires » : champ-bouton + panneau */
.c1-picker { z-index: 1; }
.c1-picker.is-open { z-index: 5; }
.c1-form .c1-picker__toggle {
	display: flex; align-items: center;
	text-align: left;
	cursor: pointer;
}
.c1-picker__text {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--c1-field-text);
	opacity: 0.51;
}
.c1-picker.has-value .c1-picker__text { color: var(--c1-dark); opacity: 1; }
.c1-picker__panel {
	position: absolute;
	top: calc(100% + 8px); left: 0;
	min-width: 100%;
	margin: 0;
	padding: 16px;
	border: 1px solid var(--c1-field-border);
	border-radius: 12px;
	background: var(--c1-white);
	box-shadow: 0 16px 40px rgba(4, 104, 198, 0.18);
}
.c1-picker__panel[hidden] { display: none; }
.c1-picker__legend {
	float: left;
	width: 100%;
	margin-bottom: 12px;
	padding: 0;
	font-size: 13px;
	line-height: 1.4;
	color: var(--c1-gray);
}
.c1-picker__days { clear: both; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.c1-picker__days .c1-check { font-size: 15px; color: var(--c1-dark); }
.c1-picker__hours { clear: both; display: grid; grid-template-columns: repeat(2, minmax(130px, 1fr)); gap: 12px 16px; }
.c1-picker__select { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--c1-gray); }
.c1-select {
	height: 42px;
	padding: 0 10px;
	border: 1px solid var(--c1-field-border);
	border-radius: 8px;
	background: var(--c1-white);
	font-family: var(--c1-font-text);
	font-size: 15px;
	color: var(--c1-dark);
	cursor: pointer;
}
.c1-select:focus { outline: none; border-color: var(--c1-primary); box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.2); }

/* Champ piège anti-robots : hors écran (pas display:none, que certains robots détectent). */
.c1-form__trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Cases à cocher (consentement, « Se souvenir de moi ») */
.c1-check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.c1-check input {
	flex: none;
	width: 29px; height: 29px;
	margin: 0;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 4.3px;
	background: #fafafa no-repeat center / 16px 16px;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	transition: background-color 0.3s var(--c1-ease), border-color 0.3s var(--c1-ease);
}
.c1-check input:checked {
	border-color: var(--c1-primary);
	background-color: var(--c1-primary);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.c1-check input:focus-visible { outline: 2px solid var(--c1-primary); outline-offset: 2px; }
.c1-check--small input { width: 18px; height: 18px; border-radius: 4px; background-size: 11px 11px; }

/* Bouton d'envoi */
.c1-form__submit {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	height: 50px;
	padding: 15px 32px;
	border: 0;
	border-radius: 12px;
	background: var(--c1-primary-deep);
	color: var(--c1-white);
	font-family: var(--c1-font-text);
	font-weight: 600;
	font-size: 14px;
	line-height: 20px;
	cursor: pointer;
	transition: background-color 0.4s var(--c1-ease), box-shadow 0.4s var(--c1-ease), scale 0.4s var(--c1-ease);
}
.c1-form__submit:hover { background: #0357a6; box-shadow: 0 10px 24px rgba(4, 104, 198, 0.3); }
@media (hover: hover) and (pointer: fine) {
	.c1-form__submit:hover { scale: 1.03; }
}
.c1-form__submit:focus-visible { outline: 2px solid var(--c1-primary); outline-offset: 3px; }
.c1-form__submit[aria-busy="true"] { opacity: 0.7; cursor: wait; }
.c1-form__submit[aria-busy="true"]::after {
	content: "";
	width: 16px; height: 16px;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: var(--c1-white);
	border-radius: 50%;
	animation: c1-spin 0.8s linear infinite;
}
@keyframes c1-spin { to { transform: rotate(360deg); } }

/* Erreurs et message global */
.c1-field.is-invalid .c1-input,
.c1-field.is-invalid .c1-field__box { border-color: var(--c1-error); }
.c1-field.is-invalid .c1-check input { border-color: var(--c1-error); }
.c1-field__error { display: block; margin-top: 6px; font-size: 13px; line-height: 1.4; color: var(--c1-error); }
.c1-form__response {
	padding: 14px 18px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: var(--c1-white);
	font-size: 15px;
	line-height: 1.5;
}
.c1-form__response[hidden] { display: none; }
.c1-form__response.is-error { border-color: var(--c1-error); color: var(--c1-error); }
.c1-form__response.is-info { border-color: var(--c1-primary); color: var(--c1-primary-deep); }
.c1-form__response.is-success { border-color: var(--c1-success); color: var(--c1-success); background: #eefaf3; }

/* ==========================================================================
   Page « Créer un compte » (inscription des centres)
   ========================================================================== */
.c1-inscription {
	position: relative;
	overflow: hidden;
	background: var(--c1-sky);
	padding: calc(var(--c1-header-h) + 80px) var(--c1-gutter) 80px;
}
.c1-inscription__blob {
	position: absolute;
	left: 27.4%;
	top: 152px;
	width: 1177px !important; height: 833px !important;
	max-width: none !important;
	pointer-events: none;
}
.c1-inscription__inner {
	position: relative;
	z-index: 1;
	display: flex; flex-direction: column; align-items: center; gap: 66px;
	max-width: 1200px;
	margin: 0 auto;
}
.c1-inscription__title {
	max-width: 586px;
	font-family: var(--c1-font-title);
	font-weight: 600;
	font-size: clamp(32px, 2.6vw + 12px, 48px);
	line-height: 1.34;
	color: var(--c1-black);
	text-align: center;
}
.c1-inscription__form { width: 100%; }
.c1-inscription .c1-form { gap: 40px; padding: 24px; }
.c1-form__section { display: flex; flex-direction: column; gap: 24px; }
.c1-form__section + .c1-form__section { margin-top: -16px; }
.c1-form__heading {
	font-family: var(--c1-font-title);
	font-weight: 600;
	font-size: 24px;
	line-height: 32px;
	color: var(--c1-primary);
}
.c1-form__heading + .c1-form__row { margin-top: 16px; }
.c1-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.c1-form__row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.c1-form__consent { font-size: 14px; line-height: 1.5; color: var(--c1-gray); }
.c1-form__consent .c1-check { align-items: flex-start; }
.c1-form__consent .c1-check input { margin-top: 2px; }
.c1-form__actions { display: flex; align-items: center; justify-content: flex-end; }
.c1-inscription .c1-form__submit { width: 235px; }

/* ==========================================================================
   Page « Connexion »
   ========================================================================== */
.c1-login { position: relative; overflow: hidden; background: var(--c1-sky); }
.c1-login__inner {
	position: relative;
	display: flex; align-items: center;
	max-width: 1440px;
	min-height: 833px;
	margin: 0 auto;
	padding: calc(var(--c1-header-h) + 70px) 0 110px 111px;
}
.c1-login__content { position: relative; z-index: 2; width: 572px; }
.c1-login .c1-form { margin-top: 46px; }
.c1-login__fields { display: flex; flex-direction: column; gap: 30px; }
.c1-login__options {
	display: flex; align-items: center; justify-content: space-between; gap: 18px;
	margin-top: 23px;
	font-size: 15px;
	line-height: 1.4;
}
.c1-login__options .c1-check { color: var(--c1-dark); }
.c1-login__options .c1-check span { opacity: 0.75; }
.c1-login__forgot {
	color: var(--c1-error);
	text-decoration: underline;
	text-underline-offset: 2px;
	opacity: 0.85;
	transition: opacity 0.3s var(--c1-ease);
}
.c1-login__forgot:hover { opacity: 1; }
.c1-login__actions { display: flex; justify-content: flex-end; margin-top: 48px; }
.c1-login .c1-form__submit { width: 184px; }
.c1-login .c1-form__response { margin-top: 24px; }
/* Mot de passe oublié / nouveau mot de passe */
.c1-login__intro {
	display: block;
	margin-bottom: 30px;
	font-size: 15px;
	line-height: 1.4;
	color: var(--c1-dark);
	opacity: 0.75;
}
.c1-form--forgot .c1-login__actions { margin-top: 50px; }
.c1-login__actions--wide { margin-top: 100px; }

.c1-login__visual { position: absolute; inset: 0; pointer-events: none; }
.c1-login__blob {
	position: absolute;
	left: 44.4%;
	top: 134px;
	width: min(1025px, 71.2vw) !important; height: auto !important;
	max-width: none !important;
}
.c1-login__illustration {
	position: absolute;
	left: 50.7%;
	top: 218px;
	width: min(689px, 47.8vw) !important; height: auto !important;
	max-width: none !important;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1199px) {
	.c1-login__inner { padding-left: 48px; }
	.c1-login__content { width: min(520px, 46vw); }
}
@media (max-width: 1023px) {
	.c1-inscription { padding: calc(var(--c1-header-h) + 48px) var(--c1-gutter) 64px; }
	.c1-inscription__inner { gap: 40px; }
	.c1-inscription__blob { left: 10%; top: 220px; }
	.c1-form__row--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.c1-login__inner { flex-direction: column; align-items: stretch; min-height: 0; padding: calc(var(--c1-header-h) + 48px) var(--c1-gutter) 64px; }
	.c1-login__content { width: auto; max-width: 572px; }
	.c1-login__visual { position: relative; inset: auto; order: 2; width: min(560px, 100%); margin: 48px auto 0; aspect-ratio: 689 / 458; }
	.c1-login__blob { left: -20%; top: -30%; width: 150% !important; }
	.c1-login__illustration { left: 0; top: 0; width: 100% !important; }
}
@media (max-width: 640px) {
	.c1-inscription .c1-form { padding: 0; gap: 32px; }
	.c1-form__heading { font-size: 20px; line-height: 28px; }
	.c1-form__row,
	.c1-form__row--3 { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.c1-form__actions { align-items: stretch; }
	.c1-inscription .c1-form__submit { width: 100%; }
	/* Champs empilés : le panneau pousse les champs suivants au lieu de les recouvrir. */
	.c1-picker__panel { position: static; margin-top: 8px; box-shadow: var(--c1-field-shadow); }
	.c1-picker__hours { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.c1-inscription__blob { left: -40%; top: 300px; }

	.c1-login .c1-form { margin-top: 32px; }
	.c1-login__fields { gap: 20px; }
	.c1-login__options { flex-wrap: wrap; font-size: 14px; }
	.c1-login__actions { margin-top: 32px; }
	.c1-login__actions--wide,
	.c1-form--forgot .c1-login__actions { margin-top: 32px; }
	.c1-login .c1-form__submit { width: 100%; }
}