/**
 * 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;
}

/* --- v2.0.0 — menu déroulant "Mon compte" pour une 2e instance du
   module, en position head-top (voir tmpl/header.php).
   Quand l'utilisateur est connecté, ce menu REMPLACE entièrement les 3
   lignes précédentes du bandeau (FR/EN, courriel/téléphone/Mon compte) :
   on les masque via :has() ci-dessous, et seul le bouton "Mon compte" +
   son panneau déroulant restent visibles (le panneau contient déjà les
   langues du site). Le visiteur déconnecté n'est pas concerné : il garde
   l'affichage habituel (FR/EN + courriel/téléphone/Mon compte), ce module
   n'affichant rien dans ce cas (voir header.php).
   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>
       <div class="aci-account">...bouton "Mon compte" + panneau...</div>
     </div>
   Le panneau déroulant est en position absolute : contrairement à
   l'ancien affichage sur 3 lignes, il ne pousse jamais la hauteur du
   bandeau, donc aucune compensation n'est nécessaire pour
   #t4-breadcrumbs juste en dessous. */

/* 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;
	line-height: 1.2;
}

/* Chacun des blocs (FR/EN, courriel/téléphone/Mon compte) occupe sa
   propre ligne complète, empilés, alignés à droite — inchangé pour le
   visiteur déconnecté. */
#t4-header .t4-head-top > .mod-languages,
#t4-header .t4-head-top > .custom {
	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;
}

/* Utilisateur connecté : on masque les 3 lignes habituelles du bandeau —
   le bouton "Mon compte" (avec les langues dans son panneau) les
   remplace entièrement. */
#t4-header .t4-head-top:has(.aci-account) > .mod-languages,
#t4-header .t4-head-top:has(.aci-account) > .custom {
	display: none;
}

#t4-header .aci-account {
	position: relative;
	flex: 0 0 100%;
	max-width: none;
	width: 100%;
	/* Petit espace sous les icônes/bouton, symétrique à l'espace déjà
	   présent au-dessus (le bandeau n'avait par défaut qu'un padding-top,
	   pas de padding-bottom). */
	margin: 0 0 8px;
	display: flex;
	align-items: center;
	/* Espace entre les icônes courriel/téléphone et ce qui suit (le
	   bouton "Mon compte" côté connecté, ou les icônes Mon compte/FR/EN
	   côté visiteur, qui a par ailleurs son propre gap ci-dessous). */
	gap: 8px;
	justify-content: flex-end;
	order: 3;
	font-size: 13px;
}

/* Visiteur non connecté : rangée d'icônes (courriel, téléphone, Mon
   compte, puis FR/EN) — remplace entièrement FR/EN + courriel/téléphone/
   Mon compte (voir la règle ":has(.aci-account)" plus haut). */
#t4-header .aci-account--guest {
	align-items: center;
	gap: 8px;
}

.aci-account__icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	background-color: var(--aci-login-accent);
	border-radius: 50%;
	color: #ffffff;
	font-size: 14px;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

/* Icônes en SVG (et non en police d'icônes) : leur boîte a une taille
   exacte et prévisible, donc le centrage en flexbox du bouton parent
   suffit — contrairement à une police d'icônes, dont la chasse
   (espacement gauche/droite du glyphe) n'est pas toujours symétrique et
   peut donner une impression de décalage même quand la boîte est bien
   centrée. */
.aci-account__icon-svg {
	display: block;
	flex-shrink: 0;
}

.aci-account__icon-btn:hover,
.aci-account__icon-btn:focus {
	background-color: var(--aci-login-accent-dark);
	color: #ffffff;
	text-decoration: none;
}

.aci-account__icon-sep {
	width: 1px;
	height: 20px;
	background-color: rgba(255, 255, 255, 0.35);
}

.aci-account__icon-lang {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	height: 30px;
	flex-shrink: 0;
	padding: 0 4px;
	background-color: var(--aci-login-accent);
	border-radius: 50%;
	color: #ffffff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.2px;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.aci-account__icon-lang:hover,
.aci-account__icon-lang:focus {
	background-color: var(--aci-login-accent-dark);
	color: #ffffff;
	text-decoration: none;
}

.aci-account__icon-lang--active {
	background-color: var(--aci-login-color);
}

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

.aci-account__trigger:hover,
.aci-account__trigger:focus,
.aci-account__trigger[aria-expanded="true"] {
	background-color: var(--aci-login-accent-dark);
}

.aci-account__caret {
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 2px;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
}

.aci-account__panel {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 200;
	min-width: 220px;
	padding: 10px;
	background-color: #ffffff;
	border: 1px solid var(--aci-login-border);
	border-radius: 10px;
	box-shadow: 0 12px 28px rgba(22, 54, 82, 0.18);
	text-align: left;
}

.aci-account__greeting {
	padding: 6px 10px 10px;
	margin-bottom: 4px;
	border-bottom: 1px solid #eef1f4;
	font-weight: 600;
	color: var(--aci-login-color);
	font-size: 13px;
	white-space: nowrap;
}

.aci-account__link {
	display: block;
	width: 100%;
	padding: 8px 10px;
	background: none;
	border: none;
	border-radius: 6px;
	color: var(--aci-login-color);
	font-size: 13px;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.aci-account__link:hover,
.aci-account__link:focus {
	background-color: #f1f6fb;
	color: var(--aci-login-accent-dark);
	text-decoration: none;
}

.aci-account__link--logout {
	color: #a12626;
}

.aci-account__link--logout:hover,
.aci-account__link--logout:focus {
	background-color: #fdeeee;
	color: #a12626;
}

.aci-account__logout-form {
	margin: 0;
}

.aci-account__divider {
	margin: 6px 0;
	border-top: 1px solid #eef1f4;
}

.aci-account__languages {
	display: flex;
	gap: 6px;
	padding: 4px 10px 2px;
}

.aci-account__lang {
	flex: 1 1 0;
	padding: 6px 0;
	background-color: #f1f3f5;
	border-radius: 6px;
	color: var(--aci-login-color);
	font-size: 12px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
}

.aci-account__lang:hover,
.aci-account__lang:focus {
	background-color: #e5e9ed;
	text-decoration: none;
}

.aci-account__lang--active {
	background-color: var(--aci-login-accent);
	color: #ffffff;
}

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

	#t4-header .aci-account {
		justify-content: center;
	}

	.aci-account__panel {
		right: auto;
		left: 50%;
		transform: translateX(-50%);
	}
}