/**
 * mod_aci_login — styles
 * Assorti à la charte visuelle du template T4 Lavidia (aciquebec.com)
 *
 * Couleurs reprises du thème actif :
 *   - texte / accent principal :  #163652 (bleu marine)
 *   - bouton / survol :           #0384e2 et #1a61ab (bleu)
 *   - fond des champs :           #ffffff avec bordure douce
 */

:root {
	--aci-login-color: #163652;
	--aci-login-accent: #0384e2;
	--aci-login-accent-dark: #1a61ab;
	--aci-login-border: #d7dee5;
	--aci-login-radius: 6px;
	--aci-login-bg: #ffffff;
}

/* Centre le module dans sa position (ex. our-services) sans affecter les
   autres modules qui pourraient partager la même position ailleurs. */
#t4-our-services .t4-module:has(.aci-login) {
	display: flex;
	justify-content: center;
	width: 100%;
}

.aci-login {
	max-width: 320px;
	width: 100%;
	margin: 0 auto;
	font-size: 14px;
	color: var(--aci-login-color);
}

.aci-login__pretext,
.aci-login__posttext {
	margin-bottom: 14px;
	font-size: 13px;
}

.aci-login__form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.aci-login__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.aci-login .aci-login__label {
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: var(--aci-login-accent) !important;
}

.aci-login__input-group {
	position: relative;
	display: flex;
	align-items: center;
}

.aci-login__icon {
	position: absolute;
	left: 10px;
	display: flex;
	color: var(--aci-login-accent);
	opacity: 0.75;
	pointer-events: none;
}

.aci-login__input {
	width: 100%;
	padding: 10px 12px 10px 34px;
	background-color: var(--aci-login-bg);
	border: 1px solid var(--aci-login-border);
	border-radius: var(--aci-login-radius);
	color: var(--aci-login-color);
	font-size: 14px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.aci-login__input:focus {
	outline: none;
	border-color: var(--aci-login-accent);
	box-shadow: 0 0 0 3px rgba(3, 132, 226, 0.15);
}

.aci-login__remember {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
}

.aci-login__remember .form-check-input {
	margin: 0;
}

.aci-login .aci-login__remember .form-check-label {
	color: var(--aci-login-accent) !important;
}

.aci-login__submit {
	margin-top: 2px;
}

.aci-login__button {
	width: 100%;
	padding: 10px 18px;
	background-color: var(--aci-login-accent);
	color: #ffffff;
	font-weight: 600;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.aci-login__button:hover,
.aci-login__button:focus {
	background-color: var(--aci-login-accent-dark);
}

.aci-login__button--logout {
	width: auto;
	padding: 8px 20px;
}

.aci-login__links {
	margin: 10px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.aci-login__links a {
	font-size: 12px;
	color: var(--aci-login-accent-dark);
	text-decoration: none;
}

.aci-login__links a:hover {
	text-decoration: underline;
}

/* État connecté */
.aci-login--logout {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.aci-login__greeting {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
}

.aci-login__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-color: var(--aci-login-color);
	color: #ffffff;
	flex-shrink: 0;
}

.aci-login__greeting-text {
	overflow-wrap: anywhere;
}

.aci-login__options {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.aci-login__options a {
	font-size: 13px;
	color: var(--aci-login-accent-dark);
	text-decoration: none;
}

.aci-login__options a:hover {
	text-decoration: underline;
}

.aci-login__button-wrap {
	margin-top: 2px;
}

/* Le site n'ayant pas de mode sombre propre, on garde volontairement un
   fond clair fixe pour les champs, peu importe la préférence système du
   visiteur (évite un fond foncé inattendu sur les champs de saisie). */
.aci-login .aci-login__input {
	background-color: #ffffff !important;
	color: var(--aci-login-color) !important;
}

/* --- Panneaux "Nom d'utilisateur oublié" / "Mot de passe oublié",
   affichés dans le même module, injectés depuis le vrai formulaire natif
   Joomla (voir media/js/aci_login_panels.js). --- */

.aci-login__panel--remote.aci-login__panel--loading {
	opacity: 0.6;
	pointer-events: none;
}

.aci-login__spinner {
	width: 24px;
	height: 24px;
	margin: 20px auto;
	border: 3px solid var(--aci-login-border);
	border-top-color: var(--aci-login-accent);
	border-radius: 50%;
	animation: aci-login-spin 0.8s linear infinite;
}

@keyframes aci-login-spin {
	to {
		transform: rotate(360deg);
	}
}

.aci-login__back {
	display: inline-block;
	margin-top: 14px;
	font-size: 12px;
	color: var(--aci-login-accent-dark);
	text-decoration: none;
}

.aci-login__back:hover {
	text-decoration: underline;
}

.aci-login__success {
	padding: 12px 14px;
	background-color: #e8f6ee;
	border: 1px solid #b7e4c7;
	border-radius: var(--aci-login-radius);
	color: #1e7a43;
	font-size: 13px;
}

.aci-login__error {
	padding: 12px 14px;
	background-color: #fdeeee;
	border: 1px solid #f3c2c2;
	border-radius: var(--aci-login-radius);
	color: #a12626;
	font-size: 13px;
}

/* Message d'erreur du formulaire de connexion principal (identifiants
   incorrects), affiché dans le module lui-même — voir aci_login_panels.js
   (bindLoginForm). Reprend le même style que .aci-login__error. */
.aci-login__error-slot {
	margin-bottom: 14px;
	padding: 12px 14px;
	background-color: #fdeeee;
	border: 1px solid #f3c2c2;
	border-radius: var(--aci-login-radius);
	color: #a12626;
	font-size: 13px;
}

/* Le formulaire remind/reset injecté est rendu par renderFieldset() natif
   Joomla, qui produit la structure Bootstrap standard .control-group /
   .control-label / .controls (et non les classes aci-login__field du
   module) — on l'habille ici pour qu'il reprenne le même style. */
.aci-login__panel--remote .control-group {
	margin-bottom: 14px;
}

.aci-login__panel--remote .control-label {
	display: block;
	margin-bottom: 4px;
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: var(--aci-login-accent);
}

.aci-login__panel--remote .controls input[type="email"],
.aci-login__panel--remote .controls input[type="text"] {
	width: 100%;
	padding: 10px 12px;
	background-color: #ffffff;
	border: 1px solid var(--aci-login-border);
	border-radius: var(--aci-login-radius);
	color: var(--aci-login-color);
	font-size: 14px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.aci-login__panel--remote .controls input[type="email"]:focus,
.aci-login__panel--remote .controls input[type="text"]:focus {
	outline: none;
	border-color: var(--aci-login-accent);
	box-shadow: 0 0 0 3px rgba(3, 132, 226, 0.15);
}

.aci-login__panel--remote .aci-login__intro {
	margin: 0 0 12px;
	font-size: 13px;
}

.aci-login__panel--remote .aci-login__submit {
	margin-top: 4px;
}

.aci-login__panel--remote .aci-login__button {
	width: 100%;
	padding: 10px 18px;
	background-color: var(--aci-login-accent);
	color: #ffffff;
	font-weight: 600;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.aci-login__panel--remote .aci-login__button:hover,
.aci-login__panel--remote .aci-login__button:focus {
	background-color: var(--aci-login-accent-dark);
}

/* Messages système Joomla (erreurs de validation, etc.) réinjectés depuis
   le formulaire natif — mêmes classes Bootstrap que le reste du site. */
.aci-login__panel--remote .alert {
	margin-bottom: 12px;
	padding: 10px 12px;
	border-radius: var(--aci-login-radius);
	font-size: 13px;
}

/* --- Variante compacte pour une 2e instance du module, en position
   head-top (voir tmpl/header.php) : nom d'utilisateur + Mon compte +
   déconnexion, en ligne, avec le même style "bouton bleu arrondi" que
   les autres éléments de ce bandeau (.label-header-top : courriel,
   téléphone, Mon compte).
   Structure réelle confirmée (code source de la page) :
     <div class="t4-head-top">
       <div class="mod-languages">...FR/EN...</div>
       <div class="custom">...courriel/téléphone/Mon compte...</div>
       <form class="aci-login aci-login--header">...Bonjour/Déconnexion...</form>
     </div>
   Le formulaire est un enfant direct de .t4-head-top, au même niveau que
   .mod-languages et .custom (pas enveloppé dans un .t4-module). On le
   fait donc passer sur sa propre ligne (flex-basis: 100%) et on l'aligne
   à droite avec justify-content sur le conteneur lui-même. */

/* Confirmé via l'inspecteur : le gabarit T4 applique
   "#t4-header .t4-head-top { text-align: right; ... }" (template.css),
   un sélecteur avec ID donc plus spécifique que ".t4-head-top" seul —
   nos règles ci-dessous doivent égaler ou dépasser cette spécificité
   pour être prises en compte. */
#t4-header .t4-head-top {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 4px 16px;
	text-align: left;
	/* Ce bandeau prend maintenant 3 lignes empilées (FR/EN, liens,
	   Bonjour/Déconnexion) au lieu d'une — sa hauteur réelle grandit
	   d'autant. #t4-breadcrumbs juste en dessous a un padding-top fixe
	   (voir template.css) qui ne s'ajuste pas à cette hauteur variable ;
	   on garde donc les lignes aussi compactes que possible pour limiter
	   le débordement. */
	line-height: 1.2;
}

/* La 3e ligne (Bonjour/Déconnexion) ajoute de la hauteur au bandeau, mais
   #t4-breadcrumbs juste en dessous a un padding-top fixe (160px ≥992px,
   17px <768px — voir template.css) qui ne s'ajuste pas automatiquement.
   Sans compensation, son contenu (le titre de page) se retrouve chevauché
   et coupé (#t4-breadcrumbs a overflow: hidden). On ajoute donc l'espace
   manquant, seulement sur les pages où ce module (état connecté) est
   présent, en ciblant sa hauteur approximative d'une ligne supplémentaire. */
#t4-header:has(.aci-login--header) + #t4-breadcrumbs,
#t4-header:has(.aci-login--header) ~ #t4-breadcrumbs {
	padding-top: calc(160px + 32px);
}

@media (max-width: 991.98px) {
	#t4-header:has(.aci-login--header) + #t4-breadcrumbs,
	#t4-header:has(.aci-login--header) ~ #t4-breadcrumbs {
		padding-top: calc(17px + 32px);
	}
}

/* Chacun des 3 blocs (FR/EN, courriel/téléphone/Mon compte,
   Bonjour/Déconnexion) occupe sa propre ligne complète, empilés,
   tous alignés à droite. */
#t4-header .t4-head-top > .mod-languages,
#t4-header .t4-head-top > .custom,
#t4-header .aci-login--header {
	flex: 0 0 100%;
	width: 100%;
	display: flex;
	justify-content: flex-end;
	text-align: left;
}

#t4-header .t4-head-top > .mod-languages {
	order: 1;
}

#t4-header .t4-head-top > .custom {
	order: 2;
}

#t4-header .aci-login--header {
	align-items: center;
	gap: 8px;
	max-width: none;
	margin: 0;
	font-size: 13px;
	order: 3;
}

.aci-login__header-greeting {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	background-color: var(--aci-login-accent);
	border-radius: 999px;
	color: #ffffff;
	font-weight: 600;
	white-space: nowrap;
}

.aci-login__header-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	background-color: var(--aci-login-accent);
	border-radius: 999px;
	color: #ffffff;
	text-decoration: none;
	font-weight: 600;
	white-space: nowrap;
	transition: background-color 0.2s ease;
}

.aci-login__header-link:hover {
	background-color: var(--aci-login-accent-dark);
	text-decoration: none;
}

.aci-login__header-logout {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	background-color: var(--aci-login-accent);
	border: none;
	border-radius: 999px;
	color: #ffffff;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s ease;
	white-space: nowrap;
}

.aci-login__header-logout:hover,
.aci-login__header-logout:focus {
	background-color: var(--aci-login-accent-dark);
}

@media (max-width: 767.98px) {
	.header-top .container,
	.t4-head-top {
		justify-content: center;
	}

	.aci-login--header {
		flex-wrap: wrap;
		justify-content: center;
	}
}