/**
 * Page « Inscrivez votre fête » — templates/page-inscription.php
 *
 * Dépend de fete.css (hero .region-hero) et main.css (boutons, .edition-badge).
 *
 * @package lafetecontinue-allianz
 */

/* ==========================================================================
   HERO
   ========================================================================== */

.inscription-hero {
	background-position: center 70%;
}

.inscription-hero .region-hero__eyebrow {
	display:     flex;
	flex-wrap:   wrap;
	align-items: center;
	gap:         0.75rem;
}

.inscription-hero .edition-badge {
	color:     var(--color-yellow);
	font-size: 0.75rem;
}

/* ==========================================================================
   LAYOUT — encart sticky + formulaire
   ========================================================================== */

.inscription {
	display:               grid;
	grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
	gap:                   4rem;
	align-items:           start;
	padding:               var(--spacing-section-y-sm) var(--spacing-section-x);
	background:            var(--color-white);
}

.inscription__aside {
	position: sticky;
	top:      calc(var(--header-height) + 1.5rem);
}

.inscription__aside-inner {
	padding:       2rem;
	border-radius: 0.75rem;
	background:    var(--color-blue-dark);
	color:         var(--color-white);
}

.inscription__aside-title {
	margin:    0 0 1.25rem;
	font-size: var(--font-size-h3);
	color:     var(--color-yellow);
}

.inscription__aside-inner p {
	margin: 0 0 1rem;
}

.inscription-steps {
	counter-reset: insc-step;
	list-style:    none;
	margin:        1.5rem 0;
	padding:       0;
}

.inscription-steps li {
	counter-increment: insc-step;
	position:          relative;
	padding:           0 0 1.25rem 2.75rem;
}

.inscription-steps li::before {
	content:         counter(insc-step);
	position:        absolute;
	left:            0;
	top:             -0.1rem;
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           1.9rem;
	height:          1.9rem;
	border-radius:   50%;
	background:      var(--color-yellow);
	color:           var(--color-blue-dark);
	font-weight:     var(--font-weight-bold);
}

.inscription__aside-link a {
	color:       var(--color-yellow);
	font-weight: var(--font-weight-bold);
}

/* ==========================================================================
   FORMULAIRE
   ========================================================================== */

.insc-form {
	display:        flex;
	flex-direction: column;
	gap:            2.5rem;
}

.insc-form__alert {
	padding:       1rem 1.25rem;
	border-left:   4px solid #B3261E;
	background:    #FDECEA;
	color:         #7A1C16;
	font-weight:   var(--font-weight-bold);
}

.insc-section {
	margin:  0;
	padding: 0;
	border:  0;
	min-width: 0;
}

.insc-section__legend {
	display:       flex;
	align-items:   center;
	gap:           1rem;
	width:         100%;
	margin-bottom: 1.5rem;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid var(--color-cyan-pale);
	font-size:     var(--font-size-h3);
	font-weight:   var(--font-weight-bold);
	color:         var(--color-blue-dark);
}

.insc-section__num {
	color:       var(--color-blue-light);
	font-size:   1.75rem;
	line-height: 1;
}

.insc-section__grid {
	display:               grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap:                   1.5rem 2rem;
}

.insc-field {
	display:        flex;
	flex-direction: column;
	gap:            0.4rem;
}

.insc-field--wide {
	grid-column: 1 / -1;
}

.insc-field__label {
	font-weight: var(--font-weight-bold);
	color:       var(--color-blue-dark);
}

.insc-field__req {
	color: #B3261E;
}

.insc-field__input {
	width:         100%;
	padding:       0.8rem 1rem;
	border:        1px solid #8A94A6;
	border-radius: var(--btn-radius);
	background:    var(--color-white);
	color:         var(--color-text);
	font-family:   var(--font-family-base);
	font-size:     1rem;
	transition:    border-color var(--transition-base), box-shadow var(--transition-base);
}

.insc-field__input--short {
	max-width: 14rem;
}

textarea.insc-field__input {
	resize:     vertical;
	min-height: 9rem;
}

.insc-field__input:focus {
	outline:      none;
	border-color: var(--color-blue-primary);
	box-shadow:   0 0 0 3px rgba(0, 97, 146, 0.25);
}

.insc-field.has-error .insc-field__input {
	border-color: #B3261E;
}

.insc-field__help,
.insc-field__counter {
	margin:    0;
	font-size: 0.875rem;
	color:     var(--color-text-muted);
}

.insc-field__counter {
	text-align: right;
}

.insc-field__error {
	margin:      0;
	font-size:   0.875rem;
	font-weight: var(--font-weight-bold);
	color:       #B3261E;
}

/* Case CGU */
.insc-field--checkbox {
	flex-direction: row;
	flex-wrap:      wrap;
	align-items:    flex-start;
	gap:            0.75rem;
}

.insc-field--checkbox input {
	width:       1.25rem;
	height:      1.25rem;
	margin-top:  0.15rem;
	accent-color: var(--color-blue-primary);
}

.insc-field--checkbox label {
	flex: 1;
}

.insc-field--checkbox .insc-field__error {
	flex-basis: 100%;
}

.insc-form__footer {
	display:        flex;
	flex-direction: column;
	align-items:    flex-start;
	gap:            1.5rem;
	padding-top:    1.5rem;
	border-top:     2px solid var(--color-cyan-pale);
}

.insc-form__submit[disabled] {
	opacity: 0.7;
	cursor:  progress;
}

.insc-form__legal {
	margin:    0;
	font-size: 0.8125rem;
	color:     var(--color-text-muted);
}

.insc-hp {
	position: absolute;
	left:     -9999px;
	opacity:  0;
	pointer-events: none;
}

/* ==========================================================================
   ÉTATS — succès / inscriptions closes
   ========================================================================== */

.insc-success,
.inscription__closed {
	display:        flex;
	flex-direction: column;
	align-items:    flex-start;
	gap:            1rem;
	padding:        2.5rem;
	border-radius:  0.75rem;
	background:     var(--color-cyan-pale);
	color:          var(--color-blue-dark);
}

.insc-success[hidden] {
	display: none;
}

.insc-success svg {
	color: var(--color-green-vote);
}

.insc-success__title,
.inscription__closed h3 {
	margin:    0;
	font-size: var(--font-size-h3);
}

.insc-success:focus {
	outline: 3px solid var(--color-yellow);
}

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

@media (max-width: 1280px) {
	.inscription {
		padding-left:  5rem;
		padding-right: 5rem;
		gap:           3rem;
	}
}

@media (max-width: 1024px) {
	.inscription {
		grid-template-columns: 1fr;
		padding-left:  2rem;
		padding-right: 2rem;
	}

	.inscription__aside {
		position: static;
	}
}

@media (max-width: 768px) {
	.inscription {
		padding: 3rem 1rem;
	}

	.insc-section__grid {
		grid-template-columns: 1fr;
	}

	.insc-field__input--short {
		max-width: none;
	}

	.inscription__aside-inner,
	.insc-success,
	.inscription__closed {
		padding: 1.5rem;
	}

	.insc-form__submit {
		width: 100%;
	}
}

/* Rubrique facultative (parrainage par un agent général) : visuellement secondaire */
.insc-section--optional {
	padding:       1.5rem;
	border-radius: 0.75rem;
	background:    var(--color-sand);
}

.insc-section--optional .insc-section__legend {
	float:         left; /* legend dans un fieldset à fond : garde la legend dans le cadre */
	font-size:     1.125rem;
	border-bottom-color: rgba(18, 43, 84, 0.12);
}

.insc-section--optional .insc-section__grid {
	clear: both;
}

@media (max-width: 768px) {
	.insc-section--optional {
		padding: 1rem;
	}
}