/*
 * Habillage du formulaire de contact (com_quoteforms).
 * Thème neutre par défaut (clair, sobre) — pensé pour être repris par n'importe quel site
 * qui installe ce composant. Pour une identité de marque, surchargez simplement les variables
 * CSS ci-dessous depuis le CSS custom du site (ex. plg_system_csscustomcode) :
 *
 *   .qf-contact {
 *     --qf-accent: #560062;
 *     --qf-accent-dark: #3d0046;
 *   }
 */

.qf-contact {
	--qf-bg: #ffffff;
	--qf-text: #1f1f24;
	--qf-text-muted: rgba(31, 31, 36, 0.65);
	--qf-border: #e2e0e6;
	--qf-accent: #4a4a55;
	--qf-accent-dark: #34343d;
	--qf-accent-contrast: #ffffff;

	background: var(--qf-bg);
	color: var(--qf-text);
	padding: 32px;
	border-radius: 12px;
	border: 1px solid var(--qf-border);
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.05);
	max-width: 960px;
}

.qf-contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: start;
}

/* Mise en page (admin, onglet "Coordonnées affichées") : Format 1/3 — l'ordre dans le HTML suit
   déjà la position choisie (Droite/Gauche), ces règles ne fixent que le ratio des colonnes. */
.qf-contact-grid--1-3-right {
	grid-template-columns: 2fr 1fr;
}

.qf-contact-grid--1-3-left {
	grid-template-columns: 1fr 2fr;
}

/* Mise en page : Haut/Bas — colonnes empilées pleine largeur, plus de grille 2 colonnes. */
.qf-contact-grid--stack {
	display: block;
}

.qf-contact-grid--stack > * + * {
	margin-top: 48px;
}

@media (max-width: 720px) {
	.qf-contact-grid {
		grid-template-columns: 1fr;
	}
}

/* --- Formulaire par étapes (réglage "Formulaire par étapes ?") --- */

.qf-steps-progress {
	margin-bottom: 28px;
}

.qf-steps-progress-bar {
	height: 6px;
	background: var(--qf-border);
	border-radius: 999px;
	overflow: hidden;
}

.qf-steps-progress-fill {
	height: 100%;
	width: 0%;
	background: var(--qf-accent);
	border-radius: 999px;
	transition: width 320ms ease-out;
}

.qf-steps-progress-label {
	margin: 8px 0 0;
	font-size: 0.85em;
	color: var(--qf-text-muted);
}

.qf-steps-form .qf-step {
	animation: qfStepIn 320ms ease-out;
}

@keyframes qfStepIn {
	from {
		opacity: 0;
		transform: translateX(12px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.qf-steps-form .qf-step {
		animation: none;
	}
}

.qf-step-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-top: 28px;
}

.qf-step-next,
.qf-step-prev {
	padding: 12px 28px;
	border-radius: 8px;
	font-weight: 700;
	letter-spacing: 0.03em;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.qf-step-next {
	background: var(--qf-accent);
	color: var(--qf-accent-contrast);
	border: none;
	margin-left: auto;
}

.qf-step-next:hover {
	background: var(--qf-accent-dark);
}

.qf-step-prev {
	background: transparent;
	color: var(--qf-text-muted);
	border: 1px solid var(--qf-border);
}

.qf-step-prev:hover {
	border-color: var(--qf-accent);
	color: var(--qf-accent);
}

.qf-steps-form .qf-step:last-of-type .qf-step-prev {
	display: block;
	margin-bottom: 20px;
}

/* --- Titres de section --- */

.qf-contact .qf-section-heading {
	margin: 32px 0 12px;
	font-size: 1.15em;
	font-weight: 700;
	color: var(--qf-accent-dark);
	border-bottom: 1px solid var(--qf-border);
	padding-bottom: 8px;
}

.qf-contact .qf-section-heading:first-child {
	margin-top: 0;
}

/* --- Récapitulatif d'un choix fait sur une autre page (v1.10.0) --- */

/* Le composant encadre, le plugin qui répond à onQuoteformsRecap remplit : les
   couleurs restent celles du formulaire, aucune n'est reprise de la page d'origine. */
.qf-contact .qf-recap {
	margin: 0 0 26px;
	padding: 18px 20px;
	border: 1px solid var(--qf-border);
	border-left: 3px solid var(--qf-accent);
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.02);
}

.qf-contact .qf-recap__titre {
	margin: 0 0 12px;
	font-size: 1em;
	font-weight: 700;
	color: var(--qf-accent-dark);
}

/* Le lien de retour est une sortie du formulaire : il se lit, il n'appelle pas le
   clic comme le bouton d'envoi. */
.qf-contact .qf-recap .pc-recap__lien a {
	color: var(--qf-accent-dark);
	text-decoration: underline;
}

@media (max-width: 480px) {
	.qf-contact .qf-recap {
		padding: 14px 16px;
	}
}

/* --- Colonne formulaire --- */

.qf-contact .qf-row {
	margin-bottom: 26px;
	position: relative;
}

/* Réglage admin "Sur la même ligne que le champ suivant ?" — 2 colonnes égales, qui
   repassent en pile verticale sous 560px (la grille formulaire/coordonnées elle-même
   repasse en 1 colonne dès 720px, donc à cette largeur la colonne formulaire est déjà
   pleine largeur : le seuil ici est volontairement plus bas). */
.qf-contact .qf-row-pair {
	display: flex;
	gap: 24px;
	align-items: flex-start;
}

.qf-contact .qf-row-pair > .qf-row {
	flex: 1 1 0;
	min-width: 0;
}

@media (max-width: 560px) {
	.qf-contact .qf-row-pair {
		flex-direction: column;
		gap: 0;
	}
}

.qf-contact label {
	color: var(--qf-text-muted);
	font-weight: 600;
	font-size: 0.88em;
	letter-spacing: 0.02em;
	transition: color 0.2s ease;
}

.qf-contact .qf-row:focus-within > label {
	color: var(--qf-accent);
}

/* Apparition/disparition en douceur des champs conditionnels (depends_on), à la place du
   display:none instantané de l'attribut hidden — celui-ci provoquait un saut brutal de
   toute la mise en page ("effet d'ascenseur") au moment où une option se révélait. Le JS
   (contact-conditional.js) retire hidden dès son premier passage, calcule la vraie hauteur
   cible (scrollHeight) en inline, et ne pilote plus ici que l'opacité/la marge — le
   max-height lui-même est fixé en JS pour que la transition soit calée sur le contenu réel
   de chaque champ (un plafond fixe en CSS ferait "dépasser" la transition hors de la zone
   visible, cf. gotcha capitalisé dans skills/joomla-extension/references/gotchas.md). */
.qf-contact [data-depends-on] {
	overflow: hidden;
	max-height: 0;
	opacity: 1;
	margin-top: 0;
	transition: max-height 320ms ease, opacity 220ms ease, margin-bottom 320ms ease;
}

.qf-contact [data-depends-on].qf-row-collapsed {
	opacity: 0;
	margin-bottom: 0;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.qf-contact [data-depends-on] {
		transition: none;
	}
}

.qf-contact .qf-row > label:has(input[type="checkbox"]) {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	color: var(--qf-text);
	font-weight: 400;
	font-size: 0.95em;
}

/* Champs "en ligne" (pas de box) : un simple trait sous le champ, qui se colore et
   s'anime de gauche à droite au focus — via un dégradé de fond animé plutôt qu'un
   pseudo-élément séparé, pour ne pas devoir toucher au HTML de chaque champ. */
.qf-contact input[type="text"],
.qf-contact input[type="email"],
.qf-contact input[type="tel"],
.qf-contact input[type="number"],
.qf-contact textarea,
.qf-contact select {
	width: 100%;
	background-color: transparent;
	background-image: linear-gradient(var(--qf-accent), var(--qf-accent));
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 0% 2px;
	/* !important : un template hôte peut définir ses propres bordures sur les inputs
	   avec la même spécificité (voir la règle de focus plus bas pour le détail) — le
	   composant doit rester "en ligne" quel que soit le CSS déjà en place autour de lui. */
	border-width: 0 0 1.5px !important;
	border-style: none none solid !important;
	border-color: var(--qf-border) !important;
	border-radius: 0 !important;
	color: var(--qf-text);
	padding: 9px 2px 10px;
	margin-top: 8px;
	font-size: 1em;
	box-sizing: border-box;
	transition: background-size 0.35s ease, border-color 0.2s ease;
}

.qf-contact input::placeholder,
.qf-contact textarea::placeholder {
	color: rgba(31, 31, 36, 0.35);
}

/* Neutralise le fond jaune/bleu que Chrome/Edge/Safari imposent sur un champ auto-rempli
   (Nom/Email/Tél typiquement) — sans ça le style "en ligne" casse dès que l'utilisateur
   choisit une suggestion d'autocomplétion. Le délai de transition énorme empêche le
   navigateur de faire jouer sa propre animation de fond avant que notre override prenne. */
.qf-contact input:-webkit-autofill,
.qf-contact input:-webkit-autofill:hover,
.qf-contact input:-webkit-autofill:focus,
.qf-contact input:-webkit-autofill:active {
	-webkit-text-fill-color: var(--qf-text);
	-webkit-box-shadow: 0 0 0 1000px var(--qf-bg) inset;
	box-shadow: 0 0 0 1000px var(--qf-bg) inset;
	transition: background-color 9999s ease-in-out 0s;
}

/* !important nécessaire : un template hôte peut avoir sa propre règle
   "input:focus { border: 1px solid ... }" (encadré complet) avec la même
   spécificité que la nôtre — un composant ne peut pas connaître à l'avance
   le CSS déjà en place autour de lui (même principe que mod_popupbox_j6). */
.qf-contact input:focus,
.qf-contact textarea:focus,
.qf-contact select:focus {
	outline: none !important;
	border-color: var(--qf-border) !important;
	border-width: 0 0 1.5px !important;
	border-style: none none solid !important;
	background-size: 100% 2px;
}

.qf-contact textarea {
	resize: vertical;
	min-height: 100px;
}

.qf-contact input[type="file"] {
	display: block;
	width: 100%;
	margin-top: 8px;
	color: var(--qf-text);
	font-size: 0.95em;
}

.qf-file-hint {
	margin: 4px 0 0;
	font-size: 0.85em;
	color: var(--qf-text-muted);
}

.qf-contact select {
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	padding-right: 20px;
}

.qf-contact .qf-select-wrap {
	position: relative;
	display: block;
}

.qf-contact .qf-select-wrap::after {
	content: "";
	position: absolute;
	right: 4px;
	top: 50%;
	width: 7px;
	height: 7px;
	margin-top: -8px;
	border-right: 1.5px solid var(--qf-text-muted);
	border-bottom: 1.5px solid var(--qf-text-muted);
	transform: rotate(45deg);
	pointer-events: none;
}

.qf-contact input[type="checkbox"],
.qf-contact input[type="radio"] {
	width: auto;
	accent-color: var(--qf-accent);
	margin-top: 3px;
}

.qf-contact .qf-radio-group {
	margin-top: 6px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Réglage admin "Disposition des choix" (champs radio/cases à cocher multiples). */
.qf-contact .qf-radio-group--horizontal {
	flex-direction: row;
	flex-wrap: wrap;
	column-gap: 22px;
	row-gap: 8px;
}

/* Longue liste (10+ choix) en grille alignée plutôt qu'un simple retour à la ligne
   (--horizontal) qui désaligne les colonnes dès que les libellés ont des longueurs
   très différentes. Repasse en 1 colonne sous 560px, même seuil que .qf-row-pair. */
.qf-contact .qf-radio-group--two-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 22px;
	row-gap: 8px;
}

@media (max-width: 560px) {
	.qf-contact .qf-radio-group--two-columns {
		grid-template-columns: 1fr;
	}
}

.qf-contact .qf-radio-group label {
	color: var(--qf-text);
	font-weight: 400;
	display: flex;
	align-items: center;
	gap: 6px;
}

.qf-contact .qf-req {
	color: var(--qf-accent);
}

.qf-contact .qf-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.qf-contact .qf-captcha {
	margin-top: -8px;
}

.qf-contact .qf-submit {
	background: var(--qf-accent);
	color: var(--qf-accent-contrast);
	border: none;
	padding: 12px 32px;
	font-weight: 700;
	letter-spacing: 0.03em;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.15s ease;
}

.qf-contact .qf-submit:hover {
	background: var(--qf-accent-dark);
}

.qf-contact .qf-submit:active {
	transform: scale(0.98);
}

/* --- Colonne infos --- */

.qf-contact-info-eyebrow {
	margin: 0 0 8px;
	color: var(--qf-text-muted);
	font-size: 1.05em;
	font-weight: 400;
}

.qf-contact-info-col h3 {
	margin: 0 0 16px;
	font-size: 1.4em;
	font-weight: 700;
	color: var(--qf-accent-dark);
}

.qf-contact-info-col h4 {
	margin: 28px 0 14px;
	font-size: 1.05em;
	font-weight: 700;
	color: var(--qf-text);
}

.qf-contact-details p {
	margin: 0 0 8px;
	line-height: 1.6;
	color: var(--qf-text-muted);
}

.qf-contact-details a {
	color: var(--qf-accent);
	text-decoration: none;
	font-weight: 600;
}

.qf-contact-details a:hover {
	text-decoration: underline;
}

.qf-contact-social {
	display: flex;
	gap: 14px;
}

.qf-contact-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1.5px solid var(--qf-border);
	color: var(--qf-accent);
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.qf-contact-social a:hover {
	background: var(--qf-accent);
	border-color: transparent;
	color: var(--qf-accent-contrast);
}

.qf-contact-social svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

/* ---------------------------------------------------------------------------
   Accès réservé (v1.6.0) : écran affiché à la place d'un formulaire réservé.
   Volontairement sobre et large en zones cliquables — il est souvent affiché
   sur la tablette ou le téléphone d'un tiers, par une personne âgée.
   --------------------------------------------------------------------------- */

/* Couleurs posees en dur sur chaque enfant, jamais en heritage : ce bloc est un
   encart blanc qui peut s'afficher sur une page a fond sombre ou degrade (ex. le
   gabarit template_lm, texte clair par defaut). Sans cela le texte prend la
   couleur ambiante de la page hote et devient blanc sur blanc (incident 2026-10-01,
   page « enquete », Itemid 263). */
.qf-gate {
	max-width: 32rem;
	margin: 2rem auto;
	padding: 1.75rem;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: .75rem;
	background: #fff;
	color: #1f2937;
}

.qf-gate__title {
	margin: 0 0 .75rem;
	font-size: 1.35rem;
	color: #1f2937;
}

.qf-gate__intro {
	margin: 0 0 1.25rem;
	line-height: 1.55;
	color: #1f2937;
}

.qf-gate__form {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.qf-gate__label {
	font-weight: 600;
	color: #1f2937;
}

.qf-gate__input {
	width: 100%;
	min-height: 3rem;
	padding: .6rem .75rem;
	font-size: 1.05rem;
	border: 1px solid rgba(0, 0, 0, .3);
	border-radius: .4rem;
	background: #fff;
	color: #1f2937;
}

/* Un code à 6 chiffres se relit caractère par caractère : chasse fixe, corps
   large et lettres espacées, pour éviter les confusions à la recopie. */
.qf-gate__input--code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 1.6rem;
	letter-spacing: .35em;
	text-align: center;
}

.qf-gate__btn {
	align-self: flex-start;
	min-height: 3rem;
	margin-top: .5rem;
	padding: .65rem 1.4rem;
	font-size: 1rem;
	font-weight: 600;
	border: 0;
	border-radius: .4rem;
	background: #1d5a95;
	color: #fff;
	cursor: pointer;
}

.qf-gate__btn:hover,
.qf-gate__btn:focus-visible {
	background: #17497a;
}

/* Lien vers la page du membre (« Recevoir un code ») : discret, sous un filet, pour que la
   personne qui répond ne le prenne pas pour l'action principale. */
.qf-gate__member {
	margin: 1.5rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid rgba(0, 0, 0, .1);
	font-size: .9rem;
	color: #4b5563;
}

.qf-gate .qf-gate__member-link {
	color: #1d5a95;
	text-decoration: underline;
}

.qf-gate .qf-gate__member-link:hover,
.qf-gate .qf-gate__member-link:focus-visible {
	color: #17497a;
}

/* Code affiché sur l'appareil reconnu du membre : il le lit à voix haute, le dicte au
   téléphone ou le copie, d'où un très grand corps, une chasse fixe et des chiffres espacés. */
.qf-gate__code {
	margin: 0 0 1.25rem;
	padding: 1rem 1.25rem;
	border: 2px solid #1d5a95;
	border-radius: .6rem;
	background: #f0f6fc;
	color: #1f2937;
	text-align: center;
}

.qf-gate__code-label {
	margin: 0;
	font-weight: 600;
	color: #1f2937;
}

.qf-gate__code-value {
	margin: .25rem 0 .5rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 2.6rem;
	font-weight: 700;
	letter-spacing: .3em;
	/* letter-spacing ajoute aussi un espace après le dernier chiffre : le même retrait à
	   gauche garde le code centré. L'écart est visuel seulement, un copier-coller donne les
	   6 chiffres collés, sans espace à nettoyer. */
	padding-left: .3em;
	line-height: 1.1;
	color: #0f2a44;
}

.qf-gate__code-meta {
	margin: 0;
	font-size: .95rem;
	color: #374151;
}

/* Le bouton « Ne plus reconnaître cet appareil » vit dans le filet du bas, avec son texte. */
.qf-gate__member .qf-gate__link {
	margin-left: .25rem;
	font-size: inherit;
}

/* La page du membre porte son titre en h1 : même corps que l'écran du code. */
.qf-gate--request .qf-gate__title {
	font-size: 1.5rem;
	line-height: 1.25;
}

.qf-gate__link {
	padding: 0;
	border: 0;
	background: none;
	color: #1d5a95;
	text-decoration: underline;
	cursor: pointer;
}

.qf-access-open {
	margin: 0 0 1.25rem;
	padding: .6rem .9rem;
	border-left: 4px solid #1d5a95;
	border-radius: .25rem;
	background: rgba(29, 90, 149, .08);
	font-size: .95rem;
}

/* Zone de fermeture, sous le formulaire.
   Le bouton « Envoyer » de l'enquete n'existe qu'a la derniere des 35 etapes : une
   fermeture placee a cote de lui serait introuvable pendant tout le reste du parcours.
   Ici elle suit la zone « Precedent / Suivant » a chaque etape.
   Sa couleur est celle du systeme d'acces (le meme bleu que l'ecran de code) et non celle
   du bouton d'envoi : les deux actions ne doivent jamais se confondre. */
.qf-access-close {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .75rem 1.5rem;
	margin-top: 1.75rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(0, 0, 0, .1);
}

.qf-access-close__text {
	margin: 0;
	flex: 1 1 18rem;
	min-width: 0;
	font-size: .9rem;
	line-height: 1.45;
	opacity: .78;
}

.qf-access-close form {
	margin: 0;
	flex: 0 0 auto;
}

/* Memes dimensions que le bouton d'envoi de l'enquete (12px 32px, rayon 8px, graisse 700),
   pour que ce soit lu comme une vraie action et non comme un lien discret. */
.qf-access-close__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Le template reduit la taille de police, ce qui ramenait la hauteur a 42 px : la cible
	   tactile est donc fixee explicitement plutot que deduite du texte. */
	min-height: 44px;
	padding: 12px 32px;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	border: 0;
	border-radius: 8px;
	background: #1d5a95;
	color: #fff;
	cursor: pointer;
	transition: background-color .15s ease, transform .1s ease;
}

.qf-access-close__btn:hover,
.qf-access-close__btn:focus-visible {
	background: #17497a;
}

.qf-access-close__btn:active {
	transform: translateY(1px);
}

@media (max-width: 480px) {
	.qf-gate {
		padding: 1.25rem;
	}

	.qf-gate__btn {
		align-self: stretch;
	}

	.qf-access-close form,
	.qf-access-close__btn {
		width: 100%;
	}
}