/* =========================================================================
   MON COMPTE, ACCÈS — maquette « Signature »
   (refonte-kinthia.com/compte-signature.php), intégrée le 29/09/2026 (D-81)
   =========================================================================

   Feuille de zone : chargée pour un visiteur non connecté sur « Mon compte »
   (connexion et inscription, mot de passe oublié), après kin-info.css, qui
   donne le cadre : zone de contenu plafonnée, gouttières (15 px en mobile,
   comme partout), fil d'Ariane.

   La page est faite de deux layouts Woodmart (« Connexion et inscription »,
   « Mot de passe oublié ») : un panneau d'accueil sauge (bloc HTML commun),
   puis les formulaires de Woodmart, sous des onglets rendus par le serveur
   ([kin_compte_onglets], inc/compte.php). Une colonne jusqu'à 800 px.

   Sans JavaScript (<html> sans `kin-js`), pas d'onglets : les deux formulaires
   s'affichent l'un sous l'autre. Avec, le panneau inactif est masqué dès le
   premier rendu, d'après l'état des onglets, sans attendre kin.js.

   Les groupes posent une marge haute à leurs enfants
   (`:root :where(.is-layout-flow) > *`), Woodmart des marges et une graisse à
   ses titres : chaque élément déclare les siennes, à deux classes (WD-47,
   WD-59). Les formulaires gardent les variables de Woodmart (`--wd-form-*`,
   `--btn-accented-*`, `--wd-btn-align`), WD-20.

   Mobile d'abord. Paliers de la maquette : 481, 801 et 1101 px.
   Contrastes portés à l'AA (WCAG 2.2), valeur de la maquette en commentaire.
   ========================================================================= */

.kin-compte {
	--kin-compte-encre: #48354f;
	--kin-compte-prune: #64466e;
	--kin-compte-papier: #faf8f3;
	--kin-compte-sauge: #e9eee5;

	/* Les messages de WooCommerce (erreur de connexion, d'inscription) : texte
	   blanc sur les couleurs des Theme Settings, #e0b252 (1,97:1) et #459647
	   (3,68:1). Réglées ici comme au contact (A11Y-05) ; le réglage global
	   attend le test du client (TODO). */
	--notices-warning-bg: #9a3547; /* 7,06:1 */
	--notices-success-bg: #3d7a40; /* 5,18:1 */
}

/* Le fil d'Ariane du mot de passe oublié (trois étapes) passe à la ligne sans
   couper une étape. */
.kin-compte .kin-breadcrumb {
	row-gap: 8px;
}

.kin-compte .kin-breadcrumb > * {
	white-space: nowrap;
}

/* ---- La grille : panneau d'accueil, puis formulaires ---- */

.kin-compte .kin-compte__grille {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 30px;
	max-width: 580px;
	margin: 28px auto 25px;
}

.kin-compte .kin-compte__grille.kin-compte__grille > * {
	min-width: 0;
	margin: 0;
}

/* ---- Le panneau d'accueil (bloc HTML « Mon compte : accueil ») ---- */

.kin-compte .kin-compte__accueil.kin-compte__accueil {
	padding: 26px 24px;
	background-color: var(--kin-compte-sauge);
}

.kin-compte .kin-compte__titre.kin-compte__titre {
	margin: 0 0 18px;
	font-size: 35px;
	font-weight: 400;
	font-style: normal;
	line-height: 1.12;
	letter-spacing: -0.025em;
	color: #43513e;
}

/* Les coupures de la maquette ne valent qu'en deux colonnes. Le texte porte une
   espace après chaque <br> : rien ne se soude quand il disparaît. */
.kin-compte .kin-compte__accueil br {
	display: none;
}

.kin-compte .kin-compte__accroche.kin-compte__accroche {
	margin: 0;
	font-size: 13px;
	line-height: 1.9;
	color: #616e5a; /* maquette #66745f : 4,22:1 sur le sauge */
}

/* Les deux atouts : en deux colonnes seulement, comme la maquette. */
.kin-compte .kin-compte__atouts.kin-compte__atouts {
	display: none;
	margin: 36px 0 0;
}

.kin-compte .kin-compte__atout.kin-compte__atout {
	margin: 0;
	padding: 21px 0;
	border-block-start: 1px solid #d0dacb;
}

.kin-compte .kin-compte__atout-titre.kin-compte__atout-titre {
	margin: 0 0 7px;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
	color: #485742;
}

.kin-compte .kin-compte__atout.kin-compte__atout p {
	margin: 0;
	font-size: 12px;
	line-height: 1.8;
	color: #606e5a; /* maquette #62705b : 4,47:1 */
}

.kin-compte .kin-compte__aide.kin-compte__aide {
	margin: 0;
}

/* Zone cliquable portée à 44 px en une colonne (le lien en fait 37) sans rien
   déplacer ; le pseudo-élément, absolu, n'entre pas dans le flex. */
.kin-compte .kin-compte__aide a::before {
	content: "";
	position: absolute;
	inset: 0 0 -8px;
}

.kin-compte .kin-compte__aide a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-block-start: 20px;
	padding-block-start: 16px;
	border-block-start: 1px solid #cbd5c6;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.7;
	color: #4f6048;
}

/* ---- Les onglets ([kin_compte_onglets]) ---- */

html:not(.kin-js) .kin-compte .kin-compte__onglets {
	display: none;
}

/* Sans JavaScript, les deux formulaires l'un sous l'autre. */
html:not(.kin-js) .kin-compte .kin-compte__panneau + .kin-compte__panneau {
	margin-block-start: 40px;
}

.kin-js .kin-compte__acces:has(.kin-compte__onglet--inscription[aria-selected="true"]) .kin-compte__panneau--connexion,
.kin-js .kin-compte__acces:has(.kin-compte__onglet--connexion[aria-selected="true"]) .kin-compte__panneau--inscription {
	display: none;
}

/* Inscription fermée dans WooCommerce : ni onglets, ni panneau vide. */
.kin-compte .kin-compte__panneau--inscription:not(:has(form)) {
	display: none;
}

.kin-compte .kin-compte__onglets {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	margin: 0 0 25px;
	border-block-end: 1px solid #d8cddd;
}

/* Trois classes : les boutons de Woodmart (fond, bordure, capitales). */
.kin-compte .kin-compte__onglets .kin-compte__onglet {
	position: relative;
	min-height: 50px;
	padding: 13px 0 18px;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font-family: var(--wd-text-font);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	text-transform: none;
	color: #7c6c82; /* maquette #8a7a90 : 3,76:1 */
	cursor: pointer;
}

.kin-compte .kin-compte__onglets .kin-compte__onglet[aria-selected="true"] {
	font-weight: 500;
	color: var(--kin-compte-prune);
}

.kin-compte .kin-compte__onglet[aria-selected="true"]::after {
	content: "";
	position: absolute;
	inset: auto 0 -1px;
	height: 2px;
	background-color: var(--kin-compte-prune);
}

/* ---- Les panneaux : titre, introduction, formulaire ---- */

.kin-compte .kin-compte__panneau.kin-compte__panneau {
	margin: 0;
}

.kin-compte .kin-compte__oubli.kin-compte__oubli {
	margin: 0;
	padding-block-start: 17px;
}

.kin-compte .kin-compte__panneau-titre.kin-compte__panneau-titre {
	margin: 0 0 13px;
	font-size: 25px;
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: -0.02em;
	color: var(--kin-compte-encre);
}

.kin-compte .kin-compte__intro.kin-compte__intro {
	margin: 0 0 26px;
	font-size: 12px;
	line-height: 1.9;
	color: #7c6983; /* maquette #806d87 : 4,44:1 */
}

/* Les formulaires de Woodmart : variables de champ et de bouton, bouton sur
   toute la largeur (`--wd-btn-align`). */
.kin-compte .kin-compte__acces :is(.wd-el-my-account-login, .wd-el-my-account-register, .wd-el-my-account-lost-password) {
	--wd-btn-align: stretch;
	--wd-form-bg: var(--kin-compte-papier);
	--wd-form-brd-color: #8f7f97; /* maquette #cbbfd0 : 1,66:1 (WCAG 1.4.11, comme au blog et au contact) */
	--wd-form-brd-color-focus: var(--kin-compte-prune);
	--wd-form-brd-radius: 0;
	--wd-form-brd-width: 1px;
	--wd-form-color: var(--kin-compte-encre);
	--wd-form-height: 48px;
	--btn-accented-bgcolor: var(--kin-compte-prune);
	--btn-accented-bgcolor-hover: #513858;
	--btn-accented-color: #fff;
	--btn-accented-color-hover: #fff;
	--btn-accented-brd-radius: 0;
	--btn-accented-box-shadow: none;
	--btn-accented-box-shadow-hover: none;
	--btn-accented-height: 48px;
	--btn-accented-padding: 13px 20px;
	--btn-accented-font-family: var(--wd-text-font);
	--btn-accented-font-size: 13px;
	--btn-accented-font-weight: 500;
	--btn-accented-transform: none;
}

.kin-compte .kin-compte__acces form.woocommerce-form,
.kin-compte .kin-compte__acces form.woocommerce-ResetPassword {
	margin: 0;
	padding: 0;
	border: 0;
	text-align: start;
}

.kin-compte .kin-compte__acces form p {
	margin: 0 0 20px;
	font-size: 12px;
	line-height: 1.9;
	color: #76617e;
}

.kin-compte .kin-compte__acces form .form-row {
	float: none;
	width: 100%;
}

.kin-compte .kin-compte__acces form label {
	display: block;
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.7;
	color: #5b4764;
}

/* Le champ mot de passe garde la place de l'œil de WooCommerce, que Woodmart
   lui réserve à droite en `!important` une fois le script passé. */
.kin-compte .kin-compte__acces :is(input[type="text"], input[type="email"], input[type="password"]) {
	padding: 11px 13px;
	font-family: inherit;
	font-size: 16px; /* sous 16 px, iOS agrandit la page au focus */
	line-height: 1.6;
}

.kin-compte .kin-compte__acces button[type="submit"] {
	line-height: 1.6;
}

.kin-compte .kin-compte__acces .show-password-input {
	color: #80628b;
}

.kin-compte .kin-compte__acces .login-form-footer.login-form-footer {
	gap: 16px 12px;
	margin: 0;
}

.kin-compte .kin-compte__acces .login-form-footer label {
	display: flex;
	align-items: center;
	gap: 8px;
	order: -1;
	margin: 0;
	font-size: 11px;
}

/* « Mot de passe perdu ? » (21 px) et « Se souvenir de moi » (la case en fait
   13) : zone cliquable de 44 px, dans l'écart de 20 px qui les sépare du
   bouton. Un clic sur le pseudo-élément d'un <label> coche sa case. */
.kin-compte .kin-compte__acces .login-form-footer :is(.lost_password, label) {
	position: relative;
}

.kin-compte .kin-compte__acces .login-form-footer :is(.lost_password, label)::before {
	content: "";
	position: absolute;
	inset: -12px 0;
}

.kin-compte .kin-compte__acces input[type="checkbox"] {
	margin: 0;
	accent-color: var(--kin-compte-prune);
}

.kin-compte .kin-compte__acces .login-form-footer .lost_password {
	font-size: 11px;
	font-weight: 400;
	color: var(--kin-compte-prune);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.kin-compte .kin-compte__acces .woocommerce-privacy-policy-text.woocommerce-privacy-policy-text p {
	margin: 0 0 24px;
	font-size: 11px;
	line-height: 1.85;
	color: #7c6b83; /* maquette #83728a : 4,18:1 */
}

.kin-compte .kin-compte__acces .woocommerce-privacy-policy-link {
	color: var(--kin-compte-prune);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---- Mot de passe oublié ---- */

.kin-compte .kin-compte__oubli .wd-el-my-account-lost-password {
	margin-block-start: 25px;
}

/* 470 px : la largeur que Woodmart donne à ce formulaire hors layout
   (`.wd-builder-off .lost_reset_password`), celle de la maquette affichée,
   calée à gauche. */
.kin-compte .kin-compte__oubli .lost_reset_password {
	max-width: 470px;
}

.kin-compte .kin-compte__retour.kin-compte__retour {
	margin: 5px 0 0;
}

/* Zone cliquable de 44 px (le lien en fait 24), sans rien déplacer. */
.kin-compte .kin-compte__retour a::before {
	content: "";
	position: absolute;
	inset: -10px 0;
}

.kin-compte .kin-compte__retour a {
	position: relative;
	display: inline-block;
	padding-block-end: 4px;
	border-block-end: 1px solid #c5b7cb;
	font-size: 12px;
	line-height: 1.6;
	color: var(--kin-compte-prune);
}

.kin-compte :is(a, button, input):focus-visible {
	outline: 2px solid var(--kin-compte-prune);
	outline-offset: 4px;
}

@media (min-width: 481px) {
	.kin-compte .kin-compte__accueil.kin-compte__accueil {
		padding: 28px 30px;
	}

	.kin-compte .kin-compte__titre.kin-compte__titre {
		font-size: 37px;
	}

	.kin-compte .kin-compte__onglets {
		gap: 25px;
		margin-block-end: 31px;
	}

	.kin-compte .kin-compte__onglets .kin-compte__onglet {
		font-size: 15px;
	}

	.kin-compte .kin-compte__panneau-titre.kin-compte__panneau-titre {
		font-size: 28px;
	}

	.kin-compte .kin-compte__intro.kin-compte__intro {
		font-size: 13px;
	}

	.kin-compte .kin-compte__acces :is(input[type="text"], input[type="email"], input[type="password"]) {
		font-size: 14px;
	}

	.kin-compte .kin-compte__acces .login-form-footer.login-form-footer {
		gap: 13px;
	}
}

@media (min-width: 801px) {
	.kin-compte .kin-compte__grille {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
		gap: 45px;
		max-width: 1150px;
		margin-block-start: 45px;
	}

	.kin-compte .kin-compte__accueil.kin-compte__accueil {
		padding: 35px 30px;
	}

	.kin-compte .kin-compte__titre.kin-compte__titre {
		margin-block-end: 25px;
		font-size: clamp(40px, 4vw, 53px);
	}

	.kin-compte .kin-compte__accueil br {
		display: inline;
	}

	.kin-compte .kin-compte__accroche.kin-compte__accroche {
		font-size: 14px;
	}

	.kin-compte .kin-compte__atouts.kin-compte__atouts {
		display: block;
	}

	.kin-compte .kin-compte__aide a {
		margin-block-start: 8px;
		padding-block-start: 25px;
	}

	.kin-compte .kin-compte__grille.kin-compte__grille > .kin-compte__acces {
		padding-block-start: 5px;
	}
}

@media (min-width: 1101px) {
	.kin-compte .kin-compte__grille {
		gap: 80px;
	}

	.kin-compte .kin-compte__accueil.kin-compte__accueil {
		padding: 44px 42px;
	}
}