/**
 * Styles du tunnel d'inscription UECT.
 *
 * Volontairement minimal. Tout ce qui relève de la palette, de la typographie
 * et des espacements appartient au template du site (uect_2026), qui peut
 * surcharger les gabarits via templates/<tpl>/html/com_uect/<vue>/.
 * On ne pose ici que ce que Bootstrap 5 du core ne fournit pas.
 */

.uect-tunnel {
	margin-block: 1.5rem;
}

/* ===========================================================
   Formulaires tunnel — remplacement Bootstrap
   Scoped à .uect-tunnel pour ne pas polluer le reste du site.
   =========================================================== */

/* Labels */
.uect-tunnel .form-label {
	display: block;
	font-size: 1.07rem;
	font-weight: 600;
	color: var(--uect-ink-2, #333D4F);
	margin-bottom: .35rem;
}

/* Inputs & Textarea */
.uect-tunnel .form-control {
	width: 100%;
	padding: .6rem .85rem;
	border: 1px solid var(--uect-line, #D5DBE4);
	background: var(--uect-cream, #F5F7FA);
	color: var(--uect-ink, #0E1E33);
	font: inherit;
	font-size: 1.19rem;
	outline: none;
	transition: border-color .18s ease, box-shadow .18s ease;
	-webkit-appearance: none;
}
.uect-tunnel .form-control:focus {
	border-color: var(--uect-blue, #2958A6);
	box-shadow: 0 0 0 3px rgba(41,88,166,.12);
	background: #fff;
}
.uect-tunnel textarea.form-control { resize: vertical; min-height: 90px; }

/* Select */
.uect-tunnel .form-select {
	width: 100%;
	padding: .6rem 2.2rem .6rem .85rem;
	border: 1px solid var(--uect-line, #D5DBE4);
	background: var(--uect-cream, #F5F7FA)
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%232958A6' stroke-width='1.8' fill='none' stroke-linecap='round'/></svg>")
		no-repeat right .85rem center / 12px 8px;
	color: var(--uect-ink, #0E1E33);
	font: inherit;
	font-size: 1.19rem;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.uect-tunnel .form-select:focus {
	border-color: var(--uect-blue, #2958A6);
	box-shadow: 0 0 0 3px rgba(41,88,166,.12);
	background-color: #fff;
}

/* Note affichée quand des pays sont retirés du choix (inscriptions closes
   pour la langue qui les pilote). En tête d'étape c'est une .alert ; sous le
   champ pays, un simple <p> qu'on habille en encart discret.
   Même habillage pour l'exigence des coordonnées de fédération. */
.uect-tunnel p.uect-pays-ferme,
.uect-tunnel p.uect-fede-erreur {
	margin: .5rem 0 0;
	padding: .5rem .7rem;
	border-left: 3px solid #C0392B;
	background: #FCEBEA;
	font-size: 1.05rem;
	font-weight: 600;
	color: #922B21;
}
.uect-tunnel p.uect-fede-erreur { margin: 0 0 .75rem; }

/* Spacing */
.uect-tunnel .mb-3 { margin-bottom: 1rem; }
.uect-tunnel .mt-3 { margin-top: 1rem; }
.uect-tunnel .my-4 { margin-block: 1.25rem; }
.uect-tunnel .text-end { text-align: right; }

/* Grid simple */
.uect-tunnel .row { display: flex; flex-wrap: wrap; gap: 0 1rem; }
.uect-tunnel .col-md-4 { flex: 0 0 calc(33.333% - .67rem); min-width: 0; }
.uect-tunnel .col-md-5 { flex: 0 0 calc(41.666% - .59rem); min-width: 0; }
.uect-tunnel .col-md-6 { flex: 0 0 calc(50% - .5rem); min-width: 0; }
.uect-tunnel .col-md-7 { flex: 0 0 calc(58.333% - .41rem); min-width: 0; }
.uect-tunnel .col-md-8 { flex: 0 0 calc(66.666% - .33rem); min-width: 0; }
@media (max-width: 600px) {
	.uect-tunnel .col-md-4,
	.uect-tunnel .col-md-5,
	.uect-tunnel .col-md-6,
	.uect-tunnel .col-md-7,
	.uect-tunnel .col-md-8 { flex: 0 0 100%; }
}

/* Checkboxes & Radios */
.uect-tunnel .form-check {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	padding: .2rem 0;
}
.uect-tunnel .form-check-inline { display: inline-flex; margin-right: 1.25rem; }
.uect-tunnel .form-check-input {
	flex: none;
	width: 18px; height: 18px;
	margin-top: .15rem;
	border: 2px solid var(--uect-line, #D5DBE4);
	background: var(--uect-cream, #F5F7FA);
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	transition: border-color .18s, background .18s;
}
.uect-tunnel .form-check-input[type="checkbox"] { border-radius: 2px; }
.uect-tunnel .form-check-input[type="radio"] { border-radius: 50%; }
.uect-tunnel .form-check-input:checked {
	background: var(--uect-blue, #2958A6);
	border-color: var(--uect-blue, #2958A6);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8l4 4 6-6' stroke='white' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-size: 70%;
	background-repeat: no-repeat;
	background-position: center;
}
.uect-tunnel .form-check-input[type="radio"]:checked {
	background-image: none;
	box-shadow: inset 0 0 0 3px #fff;
}
.uect-tunnel .form-check-label {
	font-size: 1.13rem;
	color: var(--uect-ink, #0E1E33);
	cursor: pointer;
}
.uect-tunnel .form-text {
	font-size: .97rem;
	color: var(--uect-ink-3, #4A5468);
	margin-top: .25rem;
}

/* Boutons */
.uect-tunnel .btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .65rem 1.25rem;
	font: inherit;
	font-size: 1.13rem;
	font-weight: 700;
	border: 2px solid transparent;
	cursor: pointer;
	transition: background .18s, color .18s, border-color .18s;
	line-height: 1;
	text-decoration: none;
}
.uect-tunnel .btn-primary {
	background: var(--uect-blue, #2958A6);
	color: #fff;
	border-color: var(--uect-blue, #2958A6);
}
.uect-tunnel .btn-primary:hover { background: var(--uect-blue-dark, #1B3F7A); border-color: var(--uect-blue-dark, #1B3F7A); color: #fff; }
.uect-tunnel .btn-secondary {
	background: transparent;
	color: var(--uect-blue, #2958A6);
	border-color: var(--uect-blue, #2958A6);
}
.uect-tunnel .btn-secondary:hover { background: var(--uect-blue, #2958A6); color: #fff; }
.uect-tunnel .btn-danger {
	background: #C0392B;
	color: #fff;
	border-color: #C0392B;
}
.uect-tunnel .btn-danger:hover { background: #96281b; border-color: #96281b; }
.uect-tunnel .btn-sm { padding: .35rem .75rem; font-size: .97rem; }

/* Alerts */
.uect-tunnel .alert {
	padding: .9rem 1.1rem;
	font-size: 1.09rem;
	line-height: 1.6;
	border: 1px solid transparent;
	border-left-width: 3px;
	margin-block: 1rem;
}
.uect-tunnel .alert > :first-child { margin-top: 0; }
.uect-tunnel .alert > :last-child { margin-bottom: 0; }
.uect-tunnel .alert p { margin: 0 0 .5rem; }
.uect-tunnel .alert .btn { margin-top: .5rem; }
.uect-tunnel .alert ul {
	margin: .6rem 0 0;
	padding-left: 1.15rem;
}
.uect-tunnel .alert li { margin-bottom: .35rem; }
.uect-tunnel .alert li:last-child { margin-bottom: 0; }
.uect-tunnel .alert a { color: inherit; font-weight: 600; text-decoration: underline; }
.uect-tunnel .alert-info { background: var(--uect-light-1, #EFF3F8); border-color: var(--uect-blue, #2958A6); color: var(--uect-ink-2, #333D4F); }
.uect-tunnel .alert-warning { background: #FFF8E6; border-color: var(--uect-yellow, #F2B705); color: #6B4C00; }
.uect-tunnel .alert-success { background: #E9F6EC; border-color: #2E7D32; color: #1B5E20; }
.uect-tunnel .alert-danger { background: #FCEBEA; border-color: #C0392B; color: #922B21; }

/* Table participants */
.uect-tunnel .table {
	width: 100%;
	border-collapse: collapse;
	font-size: 1.09rem;
}
.uect-tunnel .table th,
.uect-tunnel .table td {
	padding: .4rem .75rem;
	border-bottom: 1px solid var(--uect-line, #D5DBE4);
	text-align: left;
	vertical-align: middle;
}
.uect-tunnel .table th {
	font-weight: 700;
	font-size: .95rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--uect-ink-3, #4A5468);
	background: var(--uect-cream, #F5F7FA);
}
.uect-tunnel .table tbody tr:hover { background: var(--uect-light-1, #EFF3F8); }

/* Actions par ligne (Modifier / Supprimer) */
.uect-tunnel .uect-row-actions {
	display: flex;
	gap: .4rem;
	flex-wrap: wrap;
	white-space: nowrap;
}
.uect-tunnel .uect-row-actions .btn { text-decoration: none; }

/* En-tête du formulaire d'ajout / modification */
.uect-tunnel .uect-form-entete {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}
.uect-tunnel .uect-annuler-modif {
	font-size: 1.07rem;
	color: var(--uect-blue, #2958A6);
	text-decoration: underline;
	cursor: pointer;
}

/* Inputs numériques dans les tableaux : compacts et largeur fixe */
.uect-tunnel .table .form-control[type="number"] {
	width: 90px;
	padding: .3rem .5rem;
	text-align: center;
	margin-left: auto;
	display: block;
}

/* Cellule "Nombre" : contenu aligné à droite, input compact */
.uect-tunnel .table td.text-end,
.uect-tunnel .table th.text-end {
	text-align: right;
	white-space: nowrap;
}

/* Tableau « hébergements hors camping » : la colonne Nombre s'aligne à
   droite jusque dans le champ de saisie, plutôt que centrée comme ailleurs
   dans l'étape hébergement (l'emporte sur .uect-step-hebergement plus bas). */
.uect-hors-camping .table td.text-end .form-control[type="number"] {
	text-align: right;
	margin-left: auto;
	margin-right: 0;
}

/* Idem, centré : le sélecteur générique .text-center (utilitaire hors
   tableau) est moins spécifique que la règle de base .table td ci-dessus et
   perdrait sinon le conflit de spécificité CSS. */
.uect-tunnel .table td.text-center,
.uect-tunnel .table th.text-center {
	text-align: center;
	white-space: nowrap;
}

/* Wizard steps (details) */
.uect-wizard-step {
	border: 1px solid var(--uect-line, #D5DBE4);
	margin-bottom: 1rem;
}
.uect-wizard-step > summary {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .9rem 1.25rem;
	background: var(--uect-cream, #F5F7FA);
	cursor: pointer;
	list-style: none;
	border-bottom: 1px solid transparent;
}
.uect-wizard-step[open] > summary {
	border-bottom-color: var(--uect-line, #D5DBE4);
	background: var(--uect-light-1, #EFF3F8);
}
.uect-wizard-step > summary::-webkit-details-marker { display: none; }
.uect-wizard-step > summary h2 {
	font-size: 1.19rem;
	font-weight: 700;
	margin: 0;
	color: var(--uect-ink, #0E1E33);
}
.uect-wizard-step > fieldset,
.uect-wizard-step > p,
.uect-wizard-step > div { padding: 1.25rem; border: 0; margin: 0; }
.uect-wizard-step > details { padding: 1.25rem; }
.uect-wizard-step fieldset { border: 0; padding: 0; margin: 0; }
.uect-wizard-actif .uect-wizard-step > summary { cursor: default; }

/* ── Sections du formulaire participant (remplace les details/wizard) ── */
.uect-form-section {
	grid-column: 1;
	margin-bottom: 1.5rem;
}
.uect-form-section__title {
	font-size: 1.19rem;
	font-weight: 700;
	color: var(--uect-blue, #2958A6);
	margin: 0 0 1.25rem;
	padding-bottom: .5rem;
	border-bottom: 2px solid var(--uect-blue, #2958A6);
}

/* Les <fieldset> ne servent qu'à regrouper : on retire la bordure « groove »
   et l'encoche de <legend> du navigateur. Le repère visuel des sous-groupes
   passe par le <legend> stylé en .form-label. (.uect-assurance garde son
   encart, défini plus bas.) */
.uect-form fieldset {
	min-width: 0;
	margin-inline: 0;
	padding: 0;
	border: 0;
}
.uect-form legend {
	padding: 0;
}

/* Bouton de soumission */
.uect-form-submit {
	grid-column: 1;
	display: flex;
	flex-direction: column;
	gap: .75rem;
	padding-top: 1rem;
	border-top: 1px solid var(--uect-line, #D5DBE4);
}
.uect-form-submit__info {
	font-size: 1.05rem;
	color: var(--uect-ink-3, #4A5468);
	margin: 0;
}
.uect-submit-btn {
	align-self: flex-start;
}

/* ── Grille 2 colonnes pour les champs ── */
.uect-fields-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 1.5rem;
}
.uect-fields-grid > .uect-full { grid-column: 1 / -1; }
.uect-fields-grid > [hidden] { display: none; }

@media (max-width: 560px) {
	.uect-fields-grid { grid-template-columns: 1fr; }
}

/* Responsable : sous-grille 2 colonnes */
.uect-responsable {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px dashed var(--uect-line, #D5DBE4);
	margin-top: .5rem;
}
.uect-responsable > p { grid-column: 1 / -1; font-size: 1.07rem; font-weight: 600; color: var(--uect-blue, #2958A6); margin-bottom: .5rem; }
.uect-responsable > .uect-full { grid-column: 1 / -1; }

/* Sections spécifiques */
.uect-liste-participants {
	margin-bottom: 1.5rem;
}
.uect-liste-participants h2 {
	font-size: 1.19rem;
	font-weight: 700;
	color: var(--uect-ink, #0E1E33);
	margin-bottom: .75rem;
	padding-bottom: .5rem;
	border-bottom: 2px solid var(--uect-blue, #2958A6);
}

.uect-obligatoire {
	font-size: 1.02rem;
	color: var(--uect-ink-3, #4A5468);
	margin-bottom: 1rem;
}

.uect-responsable {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px dashed var(--uect-line, #D5DBE4);
}
.uect-responsable > p {
	font-size: 1.07rem;
	font-weight: 600;
	color: var(--uect-blue, #2958A6);
	margin-bottom: .75rem;
}

/* Encart assurance : sélecteur à deux classes pour rester prioritaire sur le
   reset des <fieldset> ci-dessus. */
.uect-tunnel .uect-assurance {
	margin-top: 1rem;
	padding: 1rem;
	background: var(--uect-light-1, #EFF3F8);
	border-left: 3px solid var(--uect-yellow, #F2B705);
}
.uect-assurance legend {
	font-weight: 700;
	font-size: 1.13rem;
	margin-bottom: .75rem;
}

.uect-etape-suivante {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--uect-line, #D5DBE4);
	font-size: 1.13rem;
	color: var(--uect-ink-2, #333D4F);
}
/* `display: flex` prime sur l'attribut [hidden] du navigateur : à rétablir. */
.uect-etape-suivante[hidden] { display: none; }

/* Bouton d'ajout de participant */
.uect-btn-ajouter {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .75rem 1.4rem;
	background: var(--uect-blue, #2958A6);
	color: #fff;
	font: inherit;
	font-size: 1.13rem;
	font-weight: 700;
	border: none;
	cursor: pointer;
	margin-bottom: 1.5rem;
	transition: background .18s ease;
}
.uect-btn-ajouter:hover { background: var(--uect-blue-dark, #1B3F7A); }

/* Participants vide */
.uect-participants-vide {
	color: var(--uect-ink-3, #4A5468);
	font-style: italic;
	margin-bottom: 1.25rem;
}

/* ===========================================================
   Stepper — fil d'étapes
   =========================================================== */
.uect-stepper-nav {
	margin-bottom: 2rem;
}

.uect-stepper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--uect-line, #D5DBE4);
	background: var(--uect-cream, #F5F7FA);
}

.uect-step {
	flex: 1 1 auto;
	position: relative;
}

.uect-step + .uect-step::before {
	content: '›';
	position: absolute;
	left: -10px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--uect-line, #D5DBE4);
	font-size: 20px;
	font-weight: 700;
	pointer-events: none;
	z-index: 1;
}

.uect-step a,
.uect-step span {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: .6rem .5rem;
	font-size: .93rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	transition: background .15s ease, color .15s ease;
}

/* Étapes passées : cliquables, légèrement marquées */
.uect-step-passe a {
	color: var(--uect-blue, #2958A6);
}
.uect-step-passe a:hover {
	background: var(--uect-light-2, #E4E8EE);
}

/* Étape courante */
.uect-step-current span {
	background: var(--uect-blue, #2958A6);
	color: #fff;
	font-weight: 700;
}

/* Étapes futures : non cliquables, grisées */
.uect-step:not(.uect-step-passe):not(.uect-step-current) span {
	color: var(--uect-ink-3, #4A5468);
	opacity: .55;
	cursor: default;
}

/* Numéro de dossier, avec le bouton de déconnexion aligné à droite. */
.uect-dossier-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .5rem 1rem;
	margin: 0 0 .75rem;
}

.uect-dossier-number {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .95rem;
	font-weight: 700;
	color: var(--uect-blue, #2958A6);
	background: var(--uect-light-1, #EFF3F8);
	border: 1px solid var(--uect-light-3, #DFE5EE);
	padding: .3rem .75rem;
	margin: 0;
	letter-spacing: .03em;
	text-transform: uppercase;
}

.uect-logout { margin: 0; }
.uect-tunnel .uect-logout .btn-link {
	padding: 0;
	font-size: .97rem;
	font-weight: 600;
	color: var(--uect-ink-3, #4A5468);
	text-decoration: underline;
	border: 0;
	background: transparent;
}
.uect-tunnel .uect-logout .btn-link:hover { color: var(--uect-blue, #2958A6); }

/* Grilles de quantités (repas 8 jours x 2, souvenirs jusqu'à 11 tailles) :
   elles doivent défiler horizontalement plutôt que déborder de la page. */
.uect-grid-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Formulaire en plusieurs écrans.
   Le script masque les écrans non courants ; ces règles ne servent qu'à
   rendre l'état lisible tant que le template du site n'impose pas le sien. */
.uect-wizard-actif .uect-wizard-step > summary {
	cursor: default;
	list-style: none;
}

.uect-wizard-actif .uect-wizard-step > summary::-webkit-details-marker {
	display: none;
}

.uect-wizard-nav {
	display: flex;
	gap: 0.5rem;
	margin-top: 1.5rem;
}

/* ===========================================================
   Étape excursions
   =========================================================== */

/* Bouton « En savoir plus » : détaché du libellé qu'il suit. */
.uect-tunnel .uect-guide {
	margin: .1rem 0 .1rem .85rem;
	vertical-align: middle;
	white-space: nowrap;
}

/* Liste nominative : un bloc discret par excursion, séparé d'un simple filet. */
.uect-listenominative .uect-inscrits {
	padding-top: 1.35rem;
	margin-top: 1.35rem;
	border-top: 1px solid var(--uect-light-2, #E4E8EE);
}
.uect-listenominative .uect-inscrits:first-of-type {
	padding-top: 0;
	margin-top: 0;
	border-top: 0;
}

.uect-inscrits__titre {
	font-size: 1.13rem;
	font-weight: 600;
	color: var(--uect-ink, #0E1E33);
	margin: 0 0 1rem;
}

/* Chaque personne : encart léger, repère de couleur discret à gauche. */
.uect-inscrit-ligne {
	padding: .9rem 1rem;
	margin-bottom: .75rem;
	background: var(--uect-cream, #F5F7FA);
	border-left: 2px solid var(--uect-blue, #2958A6);
}
.uect-inscrit-ligne:last-child {
	margin-bottom: 0;
}

.uect-inscrit-rang {
	font-size: .93rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--uect-ink-3, #4A5468);
	margin: 0 0 .6rem;
}

/* ===========================================================
   Encart de connexion (étape 1 du tunnel)
   =========================================================== */

.uect-auth-wrap {
	display: flex;
	justify-content: center;
	padding-block: 2rem 3rem;
}

/* Texte d'introduction (article configuré par langue), au-dessus des formulaires */
.uect-auth-intro {
	max-width: 860px;
	margin: 0 auto;
	padding-block: 2rem 0;
	line-height: 1.6;
}
.uect-auth-intro > :first-child { margin-top: 0; }
.uect-auth-intro > :last-child { margin-bottom: 0; }
.uect-auth-intro img { height: auto; }

.uect-auth-card {
	width: 100%;
	max-width: 860px;
	background: #fff;
	border: 1px solid var(--uect-line, #D5DBE4);
	box-shadow: 0 4px 24px rgba(14, 30, 51, .08);
	padding: 2.25rem 2rem;
}

/* Deux colonnes côte à côte */
.uect-auth-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
}

.uect-auth-col {
	padding: .25rem 2rem .25rem 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.uect-auth-col--right {
	padding: .25rem 0 .25rem 2rem;
	border-left: 1px solid var(--uect-line, #D5DBE4);
}

.uect-auth-col__title {
	font-size: 1.19rem;
	font-weight: 700;
	color: var(--uect-ink, #0E1E33);
	margin: 0;
	min-height: 1.55em;
}

.uect-auth-card--fermee {
	text-align: center;
	padding: 3rem 2rem;
	color: var(--uect-ink-3, #4A5468);
}
.uect-auth-card--fermee .uect-auth-card__icon { color: var(--uect-blue, #2958A6); margin-bottom: 1rem; }
.uect-auth-card--fermee .uect-auth-card__icon svg { margin: 0 auto; }
.uect-auth-card--fermee .uect-auth-card__title { font-size: 1.61rem; margin-bottom: .75rem; }
.uect-auth-card--fermee .uect-auth-card__msg {
	margin: 0;
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--uect-blue, #2958A6);
}

.uect-auth-card__header {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin-bottom: 1.5rem;
	padding-bottom: 1.25rem;
	border-bottom: 2px solid var(--uect-blue, #2958A6);
}
.uect-auth-card__picto { color: var(--uect-blue, #2958A6); flex: none; }
.uect-auth-card__title { font-size: 1.61rem; font-weight: 700; margin: 0; color: var(--uect-ink, #0E1E33); }

.uect-auth-form { display: flex; flex-direction: column; gap: .9rem; }
.uect-auth-form--compact { margin-top: .75rem; }
.uect-auth-field { display: flex; flex-direction: column; gap: .35rem; }
.uect-auth-label { font-size: 1.07rem; font-weight: 600; color: var(--uect-ink-2, #333D4F); }

.uect-auth-input {
	width: 100%;
	padding: .65rem .85rem;
	border: 1px solid var(--uect-line, #D5DBE4);
	background: var(--uect-cream, #F5F7FA);
	color: var(--uect-ink, #0E1E33);
	font: inherit;
	font-size: 1.19rem;
	outline: none;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.uect-auth-input:focus {
	border-color: var(--uect-blue, #2958A6);
	box-shadow: 0 0 0 3px rgba(41, 88, 166, .12);
	background: #fff;
}

.uect-auth-hint { font-size: .97rem; color: var(--uect-ink-3, #4A5468); }

/* Champ mot de passe + bouton « afficher / masquer » */
.uect-auth-pass { position: relative; }
.uect-auth-pass > input { width: 100%; padding-right: 2.9rem; }
.uect-auth-pass-toggle {
	position: absolute;
	inset: 0 0 0 auto;
	width: 2.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--uect-ink-3, #4A5468);
	cursor: pointer;
}
.uect-auth-pass-toggle:hover { color: var(--uect-blue, #2958A6); }
.uect-auth-pass-toggle:focus-visible {
	outline: 2px solid var(--uect-blue, #2958A6);
	outline-offset: -3px;
}
.uect-auth-pass-toggle[hidden] { display: none; }
.uect-auth-pass-eye { display: block; }
.uect-auth-pass-toggle [data-eye-off],
.uect-auth-pass-toggle[aria-pressed="true"] [data-eye] { display: none; }
.uect-auth-pass-toggle[aria-pressed="true"] [data-eye-off] { display: block; }

.uect-auth-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .75rem 1.25rem;
	font: inherit;
	font-size: 1.13rem;
	font-weight: 700;
	cursor: pointer;
	border: 2px solid transparent;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
	line-height: 1;
}
.uect-auth-btn--primary {
	background: var(--uect-blue, #2958A6);
	color: #fff;
	border-color: var(--uect-blue, #2958A6);
	margin-top: .25rem;
}
.uect-auth-btn--primary:hover { background: var(--uect-blue-dark, #1B3F7A); border-color: var(--uect-blue-dark, #1B3F7A); }
.uect-auth-btn--secondary { background: transparent; color: var(--uect-blue, #2958A6); border-color: var(--uect-blue, #2958A6); }
.uect-auth-btn--secondary:hover { background: var(--uect-blue, #2958A6); color: #fff; }
.uect-auth-btn--ghost {
	background: transparent;
	color: var(--uect-ink-3, #4A5468);
	border-color: var(--uect-line, #D5DBE4);
	font-weight: 600;
	font-size: 1.05rem;
	padding: .55rem 1rem;
}
.uect-auth-btn--ghost:hover { border-color: var(--uect-blue, #2958A6); color: var(--uect-blue, #2958A6); }

.uect-auth-oubli { margin-top: .5rem; border-top: 1px solid var(--uect-light-2, #E4E8EE); padding-top: .75rem; }
.uect-auth-oubli__toggle {
	font-size: 1.07rem;
	font-weight: 600;
	color: var(--uect-blue, #2958A6);
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	gap: .4rem;
}
.uect-auth-oubli__toggle::-webkit-details-marker { display: none; }
.uect-auth-oubli__toggle::before { content: '▸'; font-size: .9rem; transition: transform .18s ease; color: var(--uect-blue, #2958A6); }
.uect-auth-oubli[open] .uect-auth-oubli__toggle::before { transform: rotate(90deg); }
.uect-auth-oubli__body { padding-top: .75rem; }
.uect-auth-oubli__intro { margin: 0 0 .5rem; font-size: 1.05rem; color: var(--uect-ink-3, #4A5468); }

.uect-auth-sep {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 1.5rem 0 1rem;
	color: var(--uect-ink-3, #4A5468);
	font-size: 1.05rem;
	font-weight: 600;
}
.uect-auth-sep::before,
.uect-auth-sep::after { content: ''; flex: 1; height: 1px; background: var(--uect-line, #D5DBE4); }

.uect-auth-creation-intro { margin: 0 0 1rem; font-size: 1.07rem; color: var(--uect-ink-3, #4A5468); line-height: 1.55; }

/* Variante : création à gauche (mise en avant), accès dossier existant
   replié à droite. */
.uect-auth-cols--creation {
	grid-template-columns: 1fr 1fr;
	gap: 2.5rem;
	align-items: start;
}
.uect-auth-col--creation,
.uect-auth-col--aside {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 0;
	border: 0;
}

.uect-auth-existing {
	background: var(--uect-cream, #F5F7FA);
	border: 1px solid var(--uect-line, #D5DBE4);
}
.uect-auth-existing__toggle {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: 1rem 1.15rem;
	font-size: 1.19rem;
	font-weight: 700;
	color: var(--uect-ink, #0E1E33);
	cursor: pointer;
	list-style: none;
}
.uect-auth-existing__toggle::-webkit-details-marker { display: none; }
.uect-auth-existing__toggle::before {
	content: '▸';
	font-size: .95rem;
	color: var(--uect-blue, #2958A6);
	transition: transform .18s ease;
}
.uect-auth-existing[open] .uect-auth-existing__toggle::before { transform: rotate(90deg); }
.uect-auth-existing[open] .uect-auth-existing__toggle {
	border-bottom: 1px solid var(--uect-line, #D5DBE4);
}
.uect-auth-existing__body { padding: 1.1rem 1.15rem 1.25rem; }
.uect-auth-existing__intro {
	margin: 0 0 1rem;
	font-size: 1.02rem;
	line-height: 1.55;
	color: var(--uect-ink-3, #4A5468);
}
.uect-auth-existing .uect-auth-input { background: #fff; }

/* ===========================================================
   Étape dossier (CNIL + conditions)
   =========================================================== */

.uect-dossier-wrap {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding-block: 0 2rem;
}

.uect-dossier-card {
	width: 100%;
	background: #fff;
	border: 1px solid var(--uect-line, #D5DBE4);
	box-shadow: 0 4px 24px rgba(14, 30, 51, .08);
	padding: 2.25rem 2rem;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.uect-dossier-card__header {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding-bottom: 1.25rem;
	border-bottom: 2px solid var(--uect-blue, #2958A6);
}
.uect-dossier-card__picto { color: var(--uect-blue, #2958A6); flex: none; }
.uect-dossier-card__title { font-size: 1.61rem; font-weight: 700; margin: 0; color: var(--uect-ink, #0E1E33); }

/* Bloc CNIL */
.uect-dossier-cnil {
	display: flex;
	gap: 1rem;
	background: var(--uect-light-1, #EFF3F8);
	border-left: 3px solid var(--uect-blue, #2958A6);
	padding: 1rem 1.25rem;
	font-size: 1.09rem;
	line-height: 1.65;
	color: var(--uect-ink-2, #333D4F);
}
.uect-dossier-cnil__icon { flex: none; margin-top: .15rem; color: var(--uect-blue, #2958A6); }
.uect-dossier-cnil__text strong { color: var(--uect-ink, #0E1E33); }

/* Formulaire */
.uect-dossier-form { display: flex; flex-direction: column; gap: 1.25rem; }

/* Checkbox personnalisée */
.uect-dossier-check {
	display: flex;
	align-items: flex-start;
	gap: .85rem;
	cursor: pointer;
	font-size: 1.13rem;
	line-height: 1.5;
	color: var(--uect-ink, #0E1E33);
}
.uect-dossier-check__input {
	position: absolute;
	opacity: 0;
	width: 0; height: 0;
}
.uect-dossier-check__box {
	flex: none;
	width: 20px; height: 20px;
	border: 2px solid var(--uect-line, #D5DBE4);
	background: var(--uect-cream, #F5F7FA);
	margin-top: .15rem;
	display: grid;
	place-items: center;
	transition: border-color .18s ease, background .18s ease;
}
.uect-dossier-check__box::after {
	content: '';
	width: 10px; height: 6px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(-45deg) translateY(-1px);
	opacity: 0;
	transition: opacity .15s ease;
}
.uect-dossier-check__input:checked + .uect-dossier-check__box {
	background: var(--uect-blue, #2958A6);
	border-color: var(--uect-blue, #2958A6);
}
.uect-dossier-check__input:checked + .uect-dossier-check__box::after { opacity: 1; }
.uect-dossier-check__input:focus-visible + .uect-dossier-check__box {
	outline: 2px solid var(--uect-blue, #2958A6);
	outline-offset: 2px;
}

/* Bouton */
.uect-dossier-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	padding: .85rem 1.5rem;
	background: var(--uect-blue, #2958A6);
	color: #fff;
	font: inherit;
	font-size: 1.19rem;
	font-weight: 700;
	border: none;
	cursor: pointer;
	transition: background .18s ease;
	align-self: flex-start;
}
.uect-dossier-btn:hover { background: var(--uect-blue-dark, #1B3F7A); }

/* Contact */
.uect-dossier-contact {
	width: 100%;
	display: flex;
	gap: .75rem;
	align-items: flex-start;
	font-size: 1.04rem;
	color: var(--uect-ink-3, #4A5468);
	line-height: 1.6;
}
.uect-dossier-contact svg { flex: none; margin-top: .2rem; color: var(--uect-ink-3, #4A5468); }
.uect-dossier-contact a { color: var(--uect-blue, #2958A6); }

@media (max-width: 520px) {
	.uect-dossier-card { padding: 1.5rem 1.1rem; }
	.uect-dossier-btn { width: 100%; }
}

@media (max-width: 680px) {
	.uect-auth-card { max-width: 460px; }
	.uect-auth-cols { grid-template-columns: 1fr; }
	.uect-auth-col { padding: 0 0 1.5rem; border-left: 0; border-bottom: 1px solid var(--uect-line, #D5DBE4); }
	.uect-auth-col--right { padding: 1.5rem 0 0; border-left: 0; }
	.uect-auth-cols--creation { grid-template-columns: 1fr; gap: 1.75rem; }
}

@media (max-width: 520px) {
	.uect-auth-card { padding: 1.5rem 1.1rem; }
}

/* ===========================================================
   Encart « Montant de votre dossier » — panneau flottant
   Posé en bas à droite de l'écran, présent sur les étapes de saisie.
   Replié / déplié via <details>, sans script.
   =========================================================== */
.uect-subtotal {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 300;
	width: 280px;
	max-width: calc(100vw - 2rem);
}

.uect-subtotal__box {
	background: #fff;
	border: 1px solid var(--uect-line, #D5DBE4);
	box-shadow: 0 8px 32px rgba(14, 30, 51, .18);
}

.uect-subtotal__head {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .75rem 1rem;
	cursor: pointer;
	list-style: none;
	background: var(--uect-blue-navy, #0E1E33);
	color: #fff;
}
.uect-subtotal__head::-webkit-details-marker { display: none; }

.uect-subtotal__title {
	flex: 1;
	font-size: 1.05rem;
	font-weight: 700;
}
.uect-subtotal__amount {
	font-size: 1.13rem;
	font-weight: 700;
	color: var(--uect-yellow, #F2B705);
}
.uect-subtotal__chevron {
	flex: none;
	transition: transform .18s ease;
}
.uect-subtotal__box[open] .uect-subtotal__chevron { transform: rotate(180deg); }

.uect-subtotal__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 1.02rem;
}
.uect-subtotal__table th,
.uect-subtotal__table td {
	padding: .4rem .9rem;
	text-align: left;
}
.uect-subtotal__table td {
	text-align: right;
	white-space: nowrap;
	font-weight: 600;
	color: var(--uect-ink, #0E1E33);
}
.uect-subtotal__table tbody th {
	font-weight: 400;
	color: var(--uect-ink-3, #4A5468);
}
.uect-subtotal__table tbody tr + tr th,
.uect-subtotal__table tbody tr + tr td { border-top: 1px solid var(--uect-light-2, #E4E8EE); }
.uect-subtotal__table tfoot th,
.uect-subtotal__table tfoot td {
	border-top: 2px solid var(--uect-line, #D5DBE4);
	font-weight: 700;
	color: var(--uect-ink, #0E1E33);
}

@media (max-width: 600px) {
	.uect-subtotal {
		right: .5rem;
		bottom: .5rem;
		width: 240px;
	}
}

@media print {
	.uect-subtotal { display: none; }
}

/* ===========================================================
   Étapes de saisie — titre, cartes de section, pied de navigation
   Commun à hébergement / repas / excursions / souvenirs / accident.
   =========================================================== */

/* Titre de l'étape : détaché du fil des étapes, souligné charte. */
.uect-tunnel > h1 {
	font-size: 1.78rem;
	font-weight: 800;
	line-height: 1.25;
	color: var(--uect-ink, #0E1E33);
	margin: .5rem 0 1.75rem;
	padding-bottom: .75rem;
	border-bottom: 3px solid var(--uect-blue, #2958A6);
}

/* Carte de section : un titre, son intro, son tableau. */
.uect-card {
	background: #fff;
	border: 1px solid var(--uect-line, #D5DBE4);
	box-shadow: 0 4px 24px rgba(14, 30, 51, .06);
	padding: 1.5rem 1.75rem 1.85rem;
	margin-bottom: 1.75rem;
}
.uect-card > *:first-child { margin-top: 0; }

.uect-card__title {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--uect-blue, #2958A6);
	margin: .5rem 0 0;
	padding-bottom: .6rem;
	border-bottom: 2px solid var(--uect-blue, #2958A6);
}
.uect-card__intro {
	font-size: 1.07rem;
	line-height: 1.6;
	color: var(--uect-ink-3, #4A5468);
	margin: 1rem 0 1.25rem;
}

/* Note secondaire sous un tableau (réservation hors camping…). */
.uect-info-reservation {
	margin: 1.1rem 0 0;
	padding: .85rem 1rem;
	font-size: 1.02rem;
	line-height: 1.55;
	color: var(--uect-ink-2, #333D4F);
	background: var(--uect-light-1, #EFF3F8);
	border-left: 3px solid var(--uect-blue, #2958A6);
}

/* Libellés de ligne des tableaux de quantités : lisibles, pas en
   capitales comme les en-têtes de colonnes. */
.uect-tunnel .table tbody th[scope="row"] {
	font-weight: 500;
	font-size: 1.09rem;
	text-transform: none;
	letter-spacing: 0;
	color: var(--uect-ink, #0E1E33);
	background: transparent;
}
.uect-tunnel .table tbody th[scope="row"] label { cursor: pointer; }

/* Barre d'action du formulaire (bouton Enregistrer). */
.uect-form-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: 1.5rem;
}

/* Pied d'étape : navigation précédent / suivant, bien séparée. */
.uect-etapes {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--uect-line, #D5DBE4);
}
.uect-etapes .btn {
	min-width: 13rem;
	justify-content: center;
}

@media (max-width: 560px) {
	.uect-etapes { flex-direction: column; }
	.uect-etapes .btn { width: 100%; min-width: 0; }
}

/* Utilitaire d'alignement (le balisage l'emploie déjà). */
.uect-tunnel .text-center { text-align: center; }

/* Rappel de tarif en tête de ligne / d'article. */
.uect-tarif {
	display: inline-block;
	margin-left: .4rem;
	padding: .05rem .4rem;
	font-size: .93rem;
	font-weight: 700;
	color: var(--uect-blue, #2958A6);
	background: var(--uect-light-1, #EFF3F8);
	border-radius: 3px;
	white-space: nowrap;
}

/* ===========================================================
   Étape repas
   =========================================================== */

/* Journées centrées, alignées avec leurs cases. Seules la première
   colonne (services) et les libellés de ligne restent à gauche. */
.uect-step-repas .table thead th:not(:first-child),
.uect-step-repas .table tbody td { text-align: center; }
.uect-step-repas .table .form-control[type="number"] { margin-inline: auto; }

/* Hébergement : colonnes Tarif et Nombre centrées, comme les journées de repas. */
.uect-step-hebergement .table .form-control[type="number"] { margin-inline: auto; }

/* Dîner de gala : réservation distincte, mise en avant. */
.uect-gala {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 1.5rem;
	border-left: 4px solid var(--uect-yellow, #F2B705);
}
.uect-gala__texte {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	min-width: 0;
}
.uect-gala__label {
	font-size: 1.17rem;
	font-weight: 700;
	color: var(--uect-ink, #0E1E33);
}
.uect-gala__prix {
	font-size: 1.02rem;
	font-weight: 600;
	color: var(--uect-blue, #2958A6);
}
.uect-gala__champ {
	flex: none;
	display: flex;
	flex-direction: column;
	gap: .35rem;
}
.uect-tunnel .uect-gala__champ .form-control {
	width: 100px;
	text-align: center;
}

@media (max-width: 480px) {
	.uect-gala { flex-direction: column; align-items: stretch; }
	.uect-gala__champ { width: 100%; }
	.uect-tunnel .uect-gala__champ .form-control { width: 100%; }
}

/* Flèche des boutons de navigation d'étape. */
.uect-etapes .btn svg { flex: none; }

/* Chapô d'étape (hors carte). */
.uect-intro {
	margin: 0 0 1.5rem;
	font-size: 1.13rem;
	line-height: 1.6;
	color: var(--uect-ink-2, #333D4F);
}

/* ===========================================================
   Étape souvenirs — une carte par article
   =========================================================== */
.uect-souvenir__entete {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem 1rem;
	margin-bottom: 1.1rem;
	padding-bottom: .7rem;
	border-bottom: 2px solid var(--uect-blue, #2958A6);
}
.uect-souvenir__titre {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--uect-blue, #2958A6);
}
.uect-souvenir__quantite {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	max-width: 150px;
}
.uect-tunnel .uect-souvenir__quantite .form-control { text-align: center; }

/* Tableau des tailles : intitulés de ligne à gauche, tailles et cases centrées. */
.uect-souvenir-tailles th[scope="col"],
.uect-step-souvenirs .table tbody td { text-align: center; }
.uect-step-souvenirs .table .form-control[type="number"] { margin-inline: auto; }

/* ===========================================================
   Étape récapitulatif
   =========================================================== */
.uect-verification {
	margin: 0 0 1.5rem;
	font-size: 1.13rem;
	color: var(--uect-ink-2, #333D4F);
}
.uect-recap-contacts h3 {
	font-size: 1.07rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--uect-ink-3, #4A5468);
	margin: 0 0 .4rem;
}
.uect-recap-contacts p { margin: 0; line-height: 1.6; }

/* Total du dossier : bandeau final mis en avant. */
.uect-recap-total {
	border-left: 4px solid var(--uect-yellow, #F2B705);
}
.uect-recap-total__ligne {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .25rem 1rem;
}
.uect-recap-total__libelle {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--uect-ink, #0E1E33);
}
.uect-recap-total__montant {
	font-size: 1.61rem;
	font-weight: 800;
	color: var(--uect-blue, #2958A6);
}
.uect-recap-total .form-text {
	margin: .5rem 0 0;
	font-size: .97rem;
	color: var(--uect-ink-3, #4A5468);
}
.uect-validation .form-check { margin-bottom: 1rem; }

/* ===========================================================
   Étape règlement
   =========================================================== */
.uect-paiement-dossier {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem 2rem;
	margin: 0 0 1rem;
	font-size: 1.13rem;
}
.uect-paiement-choix {
	border: 0;
	padding: 0;
	margin: 0;
}
.uect-paiement-choix > legend { width: 100%; }
.uect-paiement-mode {
	margin-top: 1rem;
	font-weight: 600;
}
.uect-paiement-mode label { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.uect-paiement-bloc {
	margin: .5rem 0 .5rem 1.9rem;
	padding: 1rem 1.25rem;
	background: var(--uect-light-1, #EFF3F8);
	border-left: 3px solid var(--uect-blue, #2958A6);
	font-size: 1.09rem;
	line-height: 1.6;
}
.uect-paiement-bloc > :first-child { margin-top: 0; }
.uect-paiement-bloc > :last-child { margin-bottom: 0; }
.uect-coordonnees {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .3rem 1rem;
	margin: .75rem 0;
}
.uect-coordonnees dt { font-weight: 700; color: var(--uect-ink-3, #4A5468); }
.uect-coordonnees dd { margin: 0; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }

.uect-montants { max-width: 420px; }

@media (max-width: 480px) {
	.uect-paiement-bloc { margin-left: 0; }
}

/* ===========================================================
   Étape participant — invitation au tarif couple
   Le libellé du choix du conjoint est mis en évidence : c'est
   une réduction que le participant doit demander lui-même.
   =========================================================== */
.uect-tunnel .uect-couple > .form-label {
	font-size: 1.13rem;
	font-weight: 700;
	color: var(--uect-red, #C1121F);
}