/*
 * Le compte client (/mon-compte/ et ses sous-pages), 30/09/2026.
 *
 * Demande de Remy : la page « Se connecter / S'inscrire » etait « moche » :
 * deux cartes etroites calees a gauche dans la colonne de lecture de 720 px,
 * le bord violet gris (#cfc8d8) et les champs a bord noir de WooCommerce, un
 * grand vide a droite. « Aligne bien, revois un peu la typo, mais attention
 * ca doit fonctionner. »
 *
 * CSS SEULEMENT, ET C'EST VOULU. Aucun gabarit WooCommerce n'est recopie,
 * aucun champ, formulaire, nonce ni action n'est touche : connexion,
 * inscription et mot de passe perdu restent ceux de WooCommerce et suivent
 * ses mises a jour. La page est rendue par page.php (c'est une page qui porte
 * le shortcode [woocommerce_my_account]), pas par woocommerce.php.
 *
 * Chargee sur les seules pages du compte (is_account_page(), functions.php),
 * juste apres theme.css, comme blog.css et histoire.css.
 *
 * ELLE PASSE AVANT LES FEUILLES DE WOOCOMMERCE, PAS APRES. woocommerce.css et
 * woocommerce-layout.css sont imprimees apres les feuilles du theme : a
 * specificite egale, WooCommerce gagne. Chaque regle qui reprend une propriete
 * de WooCommerce passe donc devant par la specificite (un id, ou « html
 * body »), sans !important.
 *
 * Vocabulaire du site : cartes creme a coins arrondis (celle de l'ouverture
 * des pages, #FFFDF9), titres en Cormorant Garamond soulignes d'un filet bleu,
 * texte en Inter, boutons du theme, focus au bleu de la marque.
 */

/* --- Le cadre : le contenu sort de la colonne de 720 px, centre ------------- */

.woocommerce-account .ap-page .ap-prose {
	max-width: none;
}

.woocommerce-account .ap-prose > .woocommerce {
	/* flow-root : le tableau de bord connecte dispose son menu et son contenu
	   en flottants (WooCommerce) ; le conteneur les englobe au lieu de laisser
	   le pied de page remonter contre eux. */
	display: flow-root;
	max-width: 940px;
	margin-inline: auto;
}

/* Le titre de la page, centre avec son filet bleu, comme les titres de section
   de l'accueil. */
.woocommerce-account .ap-page__entete {
	text-align: center;
}

.woocommerce-account .ap-page__entete .ap-titre::after {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	margin: 0.3em auto 0;
	border-radius: 2px;
	background: var(--ap-bleu);
}

/* --- Les champs, dans toutes les vues du compte --------------------------------
   WooCommerce : « .woocommerce form .form-row .input-text » (0,3,1), bord noir a
   80 %, 4 px d'arrondi. « html body.woocommerce-account » ajoute ce qu'il faut
   pour passer devant. Valent aussi pour les formulaires du tableau de bord
   (adresses, details du compte) : memes champs, meme dessin. */

html body.woocommerce-account .woocommerce form .form-row label {
	margin-bottom: 6px;
	color: var(--ap-encre);
	font-size: 0.88rem;
	font-weight: 600;
	line-height: 1.4;
}

html body.woocommerce-account .woocommerce form .form-row .input-text,
html body.woocommerce-account .woocommerce form .form-row select {
	padding: 12px 14px;
	border: 1px solid #C9D8E0;
	border-radius: 10px;
	background-color: #fff;
	color: var(--ap-encre);
	font-family: var(--ap-sans);
	font-size: 1rem;
	line-height: 1.4;
	transition: border-color 0.15s, box-shadow 0.15s;
}

/* Le bord ne suffit pas a signaler le focus : un halo du bleu de la marque. */
html body.woocommerce-account .woocommerce form .form-row .input-text:focus,
html body.woocommerce-account .woocommerce form .form-row select:focus {
	outline: none;
	border-color: var(--ap-bleu-300);
	box-shadow: 0 0 0 3px rgba(110, 193, 228, 0.35);
}

/* L'oeil du mot de passe est pose en absolu a droite du champ par WooCommerce :
   le texte ne doit pas passer dessous, que le champ soit en mode mot de passe
   ou en clair (l'oeil le bascule en type="text"). */
html body.woocommerce-account .woocommerce form .password-input .input-text {
	padding-right: 46px;
}

html body.woocommerce-account .woocommerce form .show-password-input {
	right: 14px;
	opacity: 0.7;
}

html body.woocommerce-account .woocommerce form .show-password-input:hover,
html body.woocommerce-account .woocommerce form .show-password-input:focus-visible {
	opacity: 1;
}

html body.woocommerce-account .woocommerce form .form-row {
	margin: 0 0 16px;
	padding: 0;
}

html body.woocommerce-account .woocommerce form .form-row .input-checkbox,
.woocommerce-account .woocommerce input[type="checkbox"] {
	accent-color: var(--ap-bleu-400);
}

/* --- Se connecter / S'inscrire : deux cartes cote a cote -------------------- */

/* Grille et non flottants : les deux cartes prennent la meme hauteur. L'id
   passe devant « .woocommerce .col2-set .col-1 » (float, width: 48 %). */
.woocommerce-account #customer_login {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	margin-top: 8px;
}

/* Les ::before et ::after « display: table » du clearfix de WooCommerce
   deviendraient des cellules de la grille. */
.woocommerce-account #customer_login::before,
.woocommerce-account #customer_login::after {
	content: none;
}

@media (min-width: 768px) {
	.woocommerce-account #customer_login {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 28px;
	}
}

/* La colonne est la carte : le titre y entre, le formulaire perd son cadre. */
.woocommerce-account #customer_login > .u-column1,
.woocommerce-account #customer_login > .u-column2,
.woocommerce-account .ap-prose form.lost_reset_password {
	float: none;
	width: auto;
	padding: 30px 30px 26px;
	border: 1px solid var(--ap-trait);
	border-radius: var(--ap-rayon);
	background: #FFFDF9;
	box-shadow: 0 10px 30px rgba(27, 42, 50, 0.06);
}

@media (max-width: 480px) {
	.woocommerce-account #customer_login > .u-column1,
	.woocommerce-account #customer_login > .u-column2,
	.woocommerce-account .ap-prose form.lost_reset_password {
		padding: 24px 20px 22px;
	}
}

/* Le titre de carte : Cormorant, filet bleu cale a gauche (cartes des fiches). */
.woocommerce-account #customer_login h2 {
	position: relative;
	margin: 0 0 22px;
	padding-bottom: 0.45em;
	font-size: clamp(1.6rem, 1.35rem + 0.8vw, 1.9rem);
	font-weight: 600;
	line-height: 1.15;
}

.woocommerce-account #customer_login h2::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 44px;
	height: 3px;
	border-radius: 2px;
	background: var(--ap-bleu);
}

/* WooCommerce : « .woocommerce form.login » (0,2,1), bord #cfc8d8 et 2em de
   marge. Le cadre est desormais celui de la colonne. */
.woocommerce-account #customer_login form.login,
.woocommerce-account #customer_login form.register {
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
}

/* « Se souvenir de moi » puis le bouton, pleine largeur. */
.woocommerce-account #customer_login .woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 18px;
	font-weight: 400;
	cursor: pointer;
}

.woocommerce-account #customer_login .woocommerce-form-login__rememberme input {
	width: 17px;
	height: 17px;
	margin: 0;
}

.woocommerce-account #customer_login .button,
.woocommerce-account .ap-prose form.lost_reset_password .button {
	display: block;
	width: 100%;
	margin: 4px 0 0;
	padding: 15px 24px;
	font-size: 1rem;
	text-align: center;
}

/* Le lien « Mot de passe perdu ? », centre sous le bouton, discret. */
.woocommerce-account #customer_login .woocommerce-LostPassword {
	margin: 14px 0 0;
	text-align: center;
	font-size: 0.9rem;
}

.woocommerce-account .woocommerce-LostPassword a {
	color: var(--ap-bleu-texte);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.woocommerce-account .woocommerce-LostPassword a:hover {
	text-decoration-color: var(--ap-bleu);
}

/* La mention sur les donnees personnelles : secondaire, plus petite. */
.woocommerce-account #customer_login .woocommerce-privacy-policy-text p {
	margin: 4px 0 20px;
	color: var(--ap-doux);
	font-size: 0.86rem;
	line-height: 1.55;
}

/* --- Mot de passe perdu, et le choix du nouveau mot de passe ----------------
   Meme carte, une seule, centree. WooCommerce met l'identifiant en demi-largeur
   (« .form-row-first », 47 %, flottant) : pleine largeur ici. */
.woocommerce-account .ap-prose form.lost_reset_password {
	max-width: 520px;
	margin: 8px auto 0;
}

.woocommerce-account form.lost_reset_password > p:first-child {
	margin-top: 0;
	color: var(--ap-doux);
	font-size: 0.95rem;
}

html body.woocommerce-account form.lost_reset_password .form-row-first,
html body.woocommerce-account form.lost_reset_password .form-row-last {
	float: none;
	width: 100%;
}

/* --- Le tableau de bord connecte ------------------------------------------
   Laisse a WooCommerce (menu a gauche, contenu a droite, en flottants) ; seul le
   menu prend le vocabulaire du site. */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 8px;
	list-style: none;
	border: 1px solid var(--ap-trait);
	border-radius: var(--ap-rayon);
	background: #FFFDF9;
}

.woocommerce-account .woocommerce-MyAccount-navigation li + li {
	margin-top: 2px;
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 9px 14px;
	border-radius: 10px;
	color: var(--ap-encre);
	font-size: 0.95rem;
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
	background: var(--ap-bleu-050);
}

.woocommerce-account .woocommerce-MyAccount-navigation .is-active a {
	background: var(--ap-bleu-100);
	font-weight: 600;
}

@media (max-width: 768px) {
	.woocommerce-account .woocommerce-MyAccount-navigation {
		margin-bottom: 24px;
	}
}