/*
 * Page « Mon compte » : sidebar à icônes et cartes du tableau de bord.
 *
 * Les URL data: des icônes sont figées dans ce fichier : elles ne dépendent
 * d'aucun réglage. Elles étaient auparavant reconstruites en PHP à chaque
 * requête et réinjectées en inline, soit ~5 Ko non mis en cache par page.
 *
 * Point d'extension : pour remplacer une icône du menu, redéfinissez
 * --wcdc-icon sur le ::before du lien concerné dans votre propre CSS.
 */

/*
 * « :where(body:not(.wcdc-theme-buttons) *) » — réglage « Style des boutons »
 * de l'onglet Général.
 *
 * Posée sur l'HABILLAGE des boutons (fond, bordure, arrondi, typographie,
 * rembourrage, retrait de la flèche Divi), cette condition le suspend quand
 * le réglage demande le style du thème : le <body> porte alors
 * « wcdc-theme-buttons » et Divi reprend la main. La MISE EN PAGE (largeur,
 * alignement, hauteur minimale) n'en porte pas et vaut dans les deux modes ;
 * une règle qui mêlait les deux a été coupée en deux, côte à côte.
 *
 * « :where() » ne pèse rien : chaque règle garde sa spécificité et sa place
 * dans la cascade. La condition vise le bouton lui-même (« descendant d'un
 * <body> sans la classe »), et non le premier maillon du sélecteur, qui
 * n'est pas toujours le <body>.
 */

/* ---------- Sidebar ---------- */

.woocommerce-account .woocommerce-MyAccount-navigation {
	background: var(--wcdc-bg);
	border: 1px solid var(--wcdc-border);
	border-radius: 12px;
	padding: 15px 14px 0 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
	list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
	list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation-link {
	border-radius: 8px;
	margin-bottom: 4px;
	transition: background .15s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation-link a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	color: var(--wcdc-text);
	text-decoration: none;
	font-weight: 500;
}

/*
 * background-color + masque plutôt que background-image : la couleur reste
 * pilotée par currentColor, donc l'icône suit le texte et passe au blanc au
 * survol et sur l'item actif, exactement comme le faisait le glyphe de la
 * police Dashicons.
 *
 * Chaque item ne définit que sa variable --wcdc-icon ; le masque lui-même est
 * posé une seule fois ici. L'URL data: n'apparaît ainsi qu'une fois par icône,
 * au lieu d'être dupliquée pour la variante préfixée -webkit-.
 */
.woocommerce-account .woocommerce-MyAccount-navigation-link a::before {
	content: '';
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	background-color: currentColor;
	--wcdc-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22M6%2015l5-5-5-5%201-2%207%207-7%207z%22%2F%3E%3C%2Fsvg%3E");
	-webkit-mask-image: var(--wcdc-icon);
	mask-image: var(--wcdc-icon);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.woocommerce-account .woocommerce-MyAccount-navigation-link:hover,
.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active {
	background: var(--wcdc-primary);
}

.woocommerce-account .woocommerce-MyAccount-navigation-link:hover a,
.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active a {
	color: #fff;
}

/* ---------- Icônes du menu ---------- */

/*
 * Une règle par entrée, toutes bâties sur la classe que WooCommerce pose
 * lui-même : .woocommerce-MyAccount-navigation-link--<endpoint>. Les entrées
 * ajoutées par d'autres extensions suivent donc exactement la même forme que
 * les natives, et c'est celle que documente le README.
 *
 * Une version précédente doublait cette classe côté PHP en 'wcdc-icon-<endpoint>',
 * ce qui donnait deux mécanismes pour le même travail — et laissait croire, en
 * lisant le balisage, que les entrées sans cette classe n'avaient pas d'icône.
 *
 * Ces règles ont la même spécificité que celle qui pose le masque plus haut
 * (0,2,2) : elles doivent donc rester APRÈS elle dans le fichier. C'est
 * l'ordre qui tranche, et il est déterministe au sein d'une même feuille.
 */

.woocommerce-account .woocommerce-MyAccount-navigation-link--dashboard a::before {
	--wcdc-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22M2%201h16c.55%200%201%20.45%201%201v16c0%20.55-.45%201-1%201H2c-.55%200-1-.45-1-1V2c0-.55.45-1%201-1zm7.01%207.99v-6H3v6h6.01zm8%200v-6h-6v6h6zm-8%208.01v-6H3v6h6.01zm8%200v-6h-6v6h6z%22%2F%3E%3C%2Fsvg%3E");
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--orders a::before {
	--wcdc-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22M6%2013h9c.55%200%201%20.45%201%201s-.45%201-1%201H5c-.55%200-1-.45-1-1V4H2c-.55%200-1-.45-1-1s.45-1%201-1h3c.55%200%201%20.45%201%201v2h13l-4%207H6v1zm-.5%203c.83%200%201.5.67%201.5%201.5S6.33%2019%205.5%2019%204%2018.33%204%2017.5%204.67%2016%205.5%2016zm9%200c.83%200%201.5.67%201.5%201.5s-.67%201.5-1.5%201.5-1.5-.67-1.5-1.5.67-1.5%201.5-1.5z%22%2F%3E%3C%2Fsvg%3E");
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--downloads a::before {
	--wcdc-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22M14.01%204v6h2V2H4v8h2.01V4h8zm-2%202v6h3l-5%206-5-6h3V6h4z%22%2F%3E%3C%2Fsvg%3E");
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--edit-address a::before {
	--wcdc-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22M10%202C6.69%202%204%204.69%204%208c0%202.02%201.17%203.71%202.53%204.89.43.37%201.18.96%201.85%201.83.74.97%201.41%202.01%201.62%202.71.21-.7.88-1.74%201.62-2.71.67-.87%201.42-1.46%201.85-1.83C14.83%2011.71%2016%2010.02%2016%208c0-3.31-2.69-6-6-6zm0%202.56c1.9%200%203.44%201.54%203.44%203.44S11.9%2011.44%2010%2011.44%206.56%209.9%206.56%208%208.1%204.56%2010%204.56z%22%2F%3E%3C%2Fsvg%3E");
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--payment-methods a::before {
	--wcdc-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22M10.6%209c-.4-.1-.8-.3-1.1-.6-.3-.1-.4-.4-.4-.6%200-.2.1-.5.3-.6.3-.2.6-.4.9-.3.6%200%201.1.3%201.4.7l.9-1.2c-.3-.3-.6-.5-.9-.7-.3-.2-.7-.3-1.1-.3V4H9.4v1.4c-.5.1-1%20.4-1.4.8-.4.5-.7%201.1-.6%201.7%200%20.6.2%201.2.6%201.6.5.5%201.2.8%201.8%201.1.3.1.7.3%201%20.5.2.2.3.5.3.8%200%20.3-.1.6-.3.9-.3.3-.7.4-1%20.4-.4%200-.9-.1-1.2-.4-.3-.2-.6-.5-.8-.8l-1%201.1c.3.4.6.7%201%201%20.5.3%201.1.6%201.7.6V16h1.1v-1.5c.6-.1%201.1-.4%201.5-.8.5-.5.8-1.3.8-2%200-.6-.2-1.3-.7-1.7-.5-.5-1-.8-1.6-1zM10%202c-4.4%200-8%203.6-8%208s3.6%208%208%208%208-3.6%208-8-3.6-8-8-8zm0%2014.9c-3.8%200-6.9-3.1-6.9-6.9S6.2%203.1%2010%203.1s6.9%203.1%206.9%206.9-3.1%206.9-6.9%206.9z%22%2F%3E%3C%2Fsvg%3E");
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--edit-account a::before {
	--wcdc-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22M10%209.25c-2.27%200-2.73-3.44-2.73-3.44C7%204.02%207.82%202%209.97%202c2.16%200%202.98%202.02%202.71%203.81%200%200-.41%203.44-2.68%203.44zm0%202.57L12.72%2010c2.39%200%204.52%202.33%204.52%204.53v2.49s-3.65%201.13-7.24%201.13c-3.65%200-7.24-1.13-7.24-1.13v-2.49c0-2.25%201.94-4.48%204.47-4.48z%22%2F%3E%3C%2Fsvg%3E");
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a::before {
	--wcdc-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22M13%203v2h2v10h-2v2h4V3h-4zm0%208V9H5.4l4.3-4.3-1.4-1.4L1.6%2010l6.7%206.7%201.4-1.4L5.4%2011H13z%22%2F%3E%3C%2Fsvg%3E");
}
/* Entrées ajoutées par d'autres extensions : 2FA, SupportCandy, RGPD. */

.woocommerce-account .woocommerce-MyAccount-navigation-link--2fa a::before {
	--wcdc-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22M10%202s3%202%207%202c0%2011-7%2014-7%2014S3%2015%203%204c4%200%207-2%207-2z%22%2F%3E%3C%2Fsvg%3E");
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--wcsl-contact a::before {
	--wcdc-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22M10.2%203.28c3.53%200%206.43%202.61%206.92%206h2.08l-3.5%204-3.5-4h2.32c-.45-1.97-2.21-3.45-4.32-3.45-1.45%200-2.73.71-3.54%201.78L4.95%205.66C6.23%204.2%208.11%203.28%2010.2%203.28zm-.4%2013.44c-3.52%200-6.43-2.61-6.92-6H.8l3.5-4c1.17%201.33%202.33%202.67%203.5%204H5.48c.45%201.97%202.21%203.45%204.32%203.45%201.45%200%202.73-.71%203.54-1.78l1.71%201.95c-1.28%201.46-3.15%202.38-5.25%202.38z%22%2F%3E%3C%2Fsvg%3E");
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--rgpd a::before {
	--wcdc-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22M15%209h-1V6c0-2.2-1.8-4-4-4S6%203.8%206%206v3H5c-.5%200-1%20.5-1%201v7c0%20.5.5%201%201%201h10c.5%200%201-.5%201-1v-7c0-.5-.5-1-1-1zm-4%207H9l.4-2.2c-.5-.2-.9-.8-.9-1.3%200-.8.7-1.5%201.5-1.5s1.5.7%201.5%201.5c0%20.6-.3%201.1-.9%201.3L11%2016zm1-7H8V6c0-1.1.9-2%202-2s2%20.9%202%202v3z%22%2F%3E%3C%2Fsvg%3E");
}
/* ---------- Cartes du tableau de bord ---------- */

.wcdc-cards-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 14px;
	margin-top: 20px;
	margin-bottom: 28px;
}

.wcdc-card {
	background: var(--wcdc-card-bg);
	border: 1px solid var(--wcdc-border);
	border-radius: 12px;
	padding: 18px;
	text-decoration: none;
	transition: box-shadow .15s ease, transform .15s ease;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

.wcdc-card:hover {
	box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
	transform: translateY(-2px);
}

.wcdc-card-icon {
	color: var(--wcdc-primary);
	width: 22px;
	height: 22px;
	display: block;
	margin-bottom: 6px;
}

.wcdc-card-value {
	font-size: 22px;
	font-weight: 700;
	color: var(--wcdc-text);
}

.wcdc-card-label {
	font-size: 13px;
	color: var(--wcdc-muted);
}

/*
 * Pastille de statut de la dernière commande.
 *
 * Ses couleurs sont fixes et ne suivent pas la palette de la boutique :
 * « échouée » doit rester lisible comme un échec même sur un thème dont la
 * couleur principale est rouge. Les trois tonalités sont posées en PHP par
 * WCDC_Account::status_tone().
 */
.wcdc-card-pill {
	display: inline-flex;
	align-items: center;
	margin-top: 7px;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.5;
}

.wcdc-card-pill--ok {
	background: #eaf5f0;
	color: #0f5a45;
}

.wcdc-card-pill--wait {
	background: #fdf4e7;
	color: #8a5a12;
}

.wcdc-card-pill--ko {
	background: #fdf0ef;
	color: #8a3a30;
}

/* ---------- Encart de vérification d'e-mail (extension tierce) ---------- */

.alg-wc-ev-verification-info {
	margin: 4px 0 24px;
	padding: 10px 14px;
	background: var(--wcdc-card-bg);
	border: 1px solid var(--wcdc-border);
	border-radius: 8px;
	font-size: 13px;
	color: var(--wcdc-muted);
	display: inline-block;
}

.alg-wc-ev-verification-info strong {
	color: var(--wcdc-text);
}

/* ---------- Connexion, inscription, mot de passe oublié ---------- */

/*
 * is_account_page() est vrai aussi hors connexion : cette feuille se chargeait
 * donc déjà sur la page de connexion, sans qu'aucune règle ne la concerne. Le
 * premier écran que voit un non-client gardait l'habillage par défaut.
 */

/* Les deux colonnes « Connexion » / « Inscription » de WooCommerce. */
.woocommerce-account .u-columns.col2-set {
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
	width: 100%;
	margin: 0;
}

/*
 * WooCommerce pose un clearfix sur ce conteneur — « content: " " » en
 * ::before et ::after. Utile quand les colonnes flottaient ; ici, les deux
 * pseudo-éléments deviennent des éléments flex à part entière. Ils sont larges
 * de zéro mais consomment chacun une gouttière : 52 px perdus sur deux
 * colonnes, et sur mobile le ::before ouvre la première ligne, donc la
 * première carte s'y trouve décalée de 18 px vers la droite quand la seconde
 * reste à gauche.
 */
.woocommerce-account .u-columns.col2-set::before,
.woocommerce-account .u-columns.col2-set::after {
	content: none;
}

.woocommerce-account .u-columns.col2-set > .col-1,
.woocommerce-account .u-columns.col2-set > .col-2 {
	flex: 1 1 280px;
	width: auto;
	max-width: none;
	float: none;
	padding: 0;
	margin: 0;
}

.woocommerce-account .u-columns.col2-set > div > h2 {
	font-size: 19px;
	font-weight: 700;
	color: var(--wcdc-text);
	margin: 0 0 14px;
}

/*
 * Classes redoublées, comme pour les champs plus bas : la page de connexion
 * n'a pas de « .woocommerce-MyAccount-content » — ce conteneur n'existe que
 * pour un client connecté — donc on ne peut pas gagner un point en
 * s'appuyant sur un ancêtre. Or WooCommerce écrit
 *
 *   .woocommerce form.login  (0,2,1)
 *
 * où « form » compte comme un élément. Écrite à (0,2,0), la règle ci-dessous
 * ne s'appliquait pas du tout : bordure #eee, rayon 5 px et marge de 2 em de
 * WooCommerce, c'est-à-dire l'habillage par défaut sur le premier écran que
 * voit un visiteur non connecté.
 */
.woocommerce-account .woocommerce-form-login.woocommerce-form-login,
.woocommerce-account .woocommerce-form-register.woocommerce-form-register,
.woocommerce-account .woocommerce-ResetPassword.woocommerce-ResetPassword {
	background: var(--wcdc-card-bg);
	border: 1px solid var(--wcdc-border);
	border-radius: 14px;
	padding: 26px;
	margin: 0;
}

/*
 * Les trois règles qui suivent — la ligne, son libellé, son champ — valent
 * pour TOUS les formulaires de l'espace client : connexion, inscription,
 * mot de passe oublié, « Détails du compte » et « Adresses » plus bas.
 *
 * Leur spécificité est dictée par ce qu'il faut dépasser, et les concurrents
 * sont plus profonds qu'il n'y paraît parce que « form » y compte comme un
 * élément :
 *
 *   .woocommerce form .form-row              (0,2,1)   WooCommerce
 *   .woocommerce form .form-row label        (0,2,2)   WooCommerce
 *   .woocommerce form .form-row input.input-text  (0,3,2)   Divi
 *
 * D'où la classe redoublée : elle ajoute un point de spécificité sans
 * exiger d'ancêtre supplémentaire, donc sans dépendre de la structure de la
 * page. Écrites à (0,2,0) et (0,3,1), ces règles ne s'appliquaient pas : les
 * champs de tout l'espace client gardaient le gris de Divi — fond #eee,
 * texte #999, soit un contraste de 1,6:1 sur une valeur saisie par le
 * client.
 */
.woocommerce-account .woocommerce-form-row.woocommerce-form-row,
.woocommerce-account .woocommerce-ResetPassword .form-row,
.woocommerce-account .woocommerce-address-fields .form-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 0;
	margin: 0 0 16px;
	width: 100%;
	float: none;
}

/*
 * WooCommerce pose un clearfix en ::before / ::after sur chaque ligne. La
 * ligne étant ici un conteneur flex, ces deux boîtes deviennent des éléments
 * flex à part entière : deux gouttières de 6 px de vide s'ajoutaient sous
 * chaque libellé. Les flottants qu'elles dégageaient ont disparu avec la
 * disposition en colonne.
 */
.woocommerce-account .woocommerce-form-row.woocommerce-form-row::before,
.woocommerce-account .woocommerce-form-row.woocommerce-form-row::after,
.woocommerce-account .woocommerce-address-fields .form-row::before,
.woocommerce-account .woocommerce-address-fields .form-row::after {
	content: none;
}

/*
 * Pas de « font-size » sur le libellé, volontairement : il prend la taille
 * du thème par héritage. Les champs et les deux listes déroulantes, eux,
 * portent « font-size: inherit » — l'omettre ne suffit pas, car Divi écrit
 *
 *   .woocommerce form .form-row input.input-text   (0,3,2)   font-size: 14px
 *
 * et reprendrait la main. Libellés et valeurs saisies gardent ainsi la taille
 * du thème, et la gardent ENSEMBLE : une étiquette plus grosse que ce qu'on
 * écrit dedans se remarque davantage que l'une ou l'autre taille.
 *
 * « line-height » reste partout en valeur relative, ou calé sur la hauteur de
 * la boîte pour selectWoo, afin de suivre cette taille quelle qu'elle soit.
 *
 * Boutons et annotations restent, eux, en 13/14 px : ce sont des éléments
 * d'interface, pas le contenu du client.
 */
.woocommerce-account .woocommerce-form-row.woocommerce-form-row label,
.woocommerce-account .woocommerce-ResetPassword label,
.woocommerce-account .woocommerce-address-fields .form-row label {
	font-weight: 600;
	color: var(--wcdc-text);
	margin: 0;
	line-height: 1.4;
}

/*
 * Tous les champs de l'espace client portent « input-text » — c'est la classe
 * que WooCommerce met sur chacun d'eux. Viser celle-ci plutôt que les
 * variantes woocommerce-Input--text / --email / --password couvre le même
 * ensemble en une fois, et permet de la redoubler pour passer devant Divi.
 */
.woocommerce-account .woocommerce-form-row input.input-text.input-text,
.woocommerce-account .woocommerce-ResetPassword input.input-text.input-text,
.woocommerce-account .woocommerce-address-fields .form-row input.input-text.input-text {
	width: 100%;
	height: 44px;
	padding: 0 13px;
	border: 1px solid var(--wcdc-border);
	border-radius: 8px;
	background: var(--wcdc-card-bg);
	color: var(--wcdc-text);
	font-size: inherit;
	line-height: 1.4;
}

.woocommerce-account .woocommerce-form-row input.input-text.input-text:focus,
.woocommerce-account .woocommerce-ResetPassword input.input-text.input-text:focus,
.woocommerce-account .woocommerce-address-fields .form-row input.input-text.input-text:focus {
	border-color: var(--wcdc-primary);
	color: var(--wcdc-text);
	background: var(--wcdc-card-bg);
}

/*
 * Les lignes qui ne portent que la classe générique form-row — celle de la
 * case « se souvenir de moi » et du bouton — ne passent pas par la règle
 * ci-dessus, qui vise woocommerce-form-row. Elles ont quand même besoin de
 * leur marge.
 */
.woocommerce-account .woocommerce-form-login .form-row,
.woocommerce-account .woocommerce-form-register .form-row {
	padding: 0;
	margin: 0 0 16px;
}

/*
 * WooCommerce enveloppe le champ mot de passe dans un span qui porte le bouton
 * « afficher ». Ce span est inline par défaut : la largeur de 100 % de l'input
 * s'y résoudrait mal, et le bouton, positionné en absolu, se placerait par
 * rapport à un ancêtre plus lointain et sortirait du champ.
 */
.woocommerce-account .woocommerce-form-row .password-input,
.woocommerce-account .woocommerce-ResetPassword .password-input {
	display: block;
	position: relative;
	width: 100%;
}

.woocommerce-account .woocommerce-password-hint,
.woocommerce-account .woocommerce-privacy-policy-text {
	font-size: 12px;
	line-height: 1.55;
	color: var(--wcdc-muted);
	margin: 0 0 16px;
}

.woocommerce-account .woocommerce-privacy-policy-text p {
	margin: 0;
}

/*
 * Classe redoublée : WooCommerce écrit
 * « .woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme »
 * avec « display: inline-block », soit (0,3,0) contre (0,2,0) ici. Le
 * « display: flex » ne s'appliquait pas, et avec lui l'alignement vertical de
 * la case et l'écart de 9 px qui la sépare de son libellé.
 */
.woocommerce-account .woocommerce-form-login__rememberme.woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 13px;
	font-weight: 400;
	color: var(--wcdc-text);
	cursor: pointer;
	margin: 0 0 18px;
}

.woocommerce-account .woocommerce-form-login__rememberme input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--wcdc-primary);
}

.woocommerce-account .woocommerce-form-login__rememberme span {
	font-weight: 400;
}

/*
 * Même redoublement, et pour le même motif. Divi habille tout bouton
 * WooCommerce en bouton fantôme :
 *
 *   .woocommerce button.button  (0,2,1)   bordure de 2 px, rayon 3 px,
 *                                         fond transparent, texte à la
 *                                         couleur d'accentuation du thème
 *
 * À (0,2,0), cette règle ne posait que ce que Divi ne pose pas — la hauteur,
 * la largeur, l'affichage. Le fond, la bordure, le rayon, la taille de texte
 * et la couleur restaient ceux de Divi : le bouton « Se connecter » était
 * creux alors qu'il est l'unique action de sa colonne.
 *
 * La troisième ligne était à (0,2,1) : à égalité avec Divi, elle aurait dû
 * l'emporter par l'ordre de chargement, mais Divi émet aussi ces couleurs
 * dans un <style> en ligne placé après nos feuilles. Elle perdait donc
 * également, et passe au même redoublement.
 */
.woocommerce-account .woocommerce-form-login__submit.woocommerce-form-login__submit,
.woocommerce-account .woocommerce-form-register__submit.woocommerce-form-register__submit,
.woocommerce-account .woocommerce-ResetPassword.woocommerce-ResetPassword button.button {
	display: block;
	width: 100%;
	min-height: 46px;
	float: none;
	margin: 0;
}

.woocommerce-account .woocommerce-form-login__submit.woocommerce-form-login__submit:where(body:not(.wcdc-theme-buttons) *),
.woocommerce-account .woocommerce-form-register__submit.woocommerce-form-register__submit:where(body:not(.wcdc-theme-buttons) *),
.woocommerce-account .woocommerce-ResetPassword.woocommerce-ResetPassword button.button:where(body:not(.wcdc-theme-buttons) *) {
	padding: 12px 24px;
	border: 1px solid var(--wcdc-primary);
	border-radius: 8px;
	background: var(--wcdc-primary);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .02em;
	transition: filter .15s ease;
}

.woocommerce-account .woocommerce-form-login__submit.woocommerce-form-login__submit:hover:where(body:not(.wcdc-theme-buttons) *),
.woocommerce-account .woocommerce-form-register__submit.woocommerce-form-register__submit:hover:where(body:not(.wcdc-theme-buttons) *),
.woocommerce-account .woocommerce-ResetPassword.woocommerce-ResetPassword button.button:hover:where(body:not(.wcdc-theme-buttons) *) {
	filter: brightness(.92);
	background: var(--wcdc-primary);
	color: #fff;
}

.woocommerce-account .woocommerce-LostPassword {
	margin: 14px 0 0;
	text-align: center;
	font-size: 13px;
}

.woocommerce-account .woocommerce-LostPassword a {
	color: var(--wcdc-primary);
	text-decoration: none;
}

.woocommerce-account .woocommerce-LostPassword a:hover {
	text-decoration: underline;
}

/* ---------- Tableau des commandes ---------- */

/*
 * Le tableau et ses cellules restent volontairement à une spécificité de
 * (0,2,0) et (0,2,1), inférieure à celle de WooCommerce
 * (.woocommerce table.shop_table, .woocommerce table.shop_table td, (0,2,1) et
 * (0,2,2)). Là où les deux se rencontrent — marges intérieures des cellules,
 * couleur des filets, bordure et arrondi du tableau — c'est donc WooCommerce
 * qui l'emporte, et c'est voulu : seul l'en-tête devait être repris.
 *
 * Ne « corrigez » pas cette spécificité en ajoutant un « table. » à ces deux
 * sélecteurs : ça a été fait en 2.5.4 et annulé en 2.5.5, parce que ça
 * modifiait le rendu des cellules. Seule la règle th ci-dessous porte ce
 * « table. », et elle seule doit le porter.
 */
.woocommerce-account .woocommerce-orders-table {
	width: 100%;
	overflow: hidden;
}

/*
 * L'en-tête, lui, doit gagner : sans le « table. », ce sélecteur vaut (0,2,1)
 * contre (0,2,2) pour .woocommerce table.shop_table th, et ni la marge
 * intérieure ni la hauteur de ligne ne s'appliqueraient. À spécificité égale
 * c'est l'ordre qui tranche, et nos feuilles dépendent de woocommerce-general :
 * elles passent donc toujours après.
 */
/*
 * « thead » explicite : le gabarit de WooCommerce peut rendre la cellule du
 * numéro en <th scope="row">, dans le corps du tableau. Visée sans cette
 * précision, elle prenait l'aspect d'un en-tête de colonne — fond teinté,
 * 11 px en capitales — au milieu d'une ligne de données.
 */
.woocommerce-account table.woocommerce-orders-table thead th {
	background: var(--wcdc-bg);
	color: var(--wcdc-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	text-align: left;
	padding: 12px 14px;
	line-height: 3em;
	border: 0;
}

/*
 * Marge intérieure et filet supérieur ne sont pas déclarés ici : ils
 * reviennent à WooCommerce, voir le commentaire du tableau ci-dessus.
 */
.woocommerce-account .woocommerce-orders-table td,
.woocommerce-account .woocommerce-orders-table tbody th {
	border: 0;
	color: var(--wcdc-text);
	font-size: 14px;
	vertical-align: middle;
}

/*
 * Le numéro reprend la couleur du texte : c'est un libellé de ligne, pas un
 * lien de navigation dans une phrase, et le bleu souligné de Divi le faisait
 * ressortir plus que le contenu de la commande.
 */
.woocommerce-account .woocommerce-orders-table__cell-order-number a {
	color: var(--wcdc-text);
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
}

.woocommerce-account .woocommerce-orders-table__cell-order-number a:hover {
	color: var(--wcdc-primary);
	text-decoration: underline;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table a.woocommerce-button {
	display: inline-block;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table a.woocommerce-button:where(body:not(.wcdc-theme-buttons) *) {
	padding: 8px 14px;
	border-radius: 8px;
	background: var(--wcdc-primary);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table a.woocommerce-button:hover:where(body:not(.wcdc-theme-buttons) *) {
	filter: brightness(.92);
	background: var(--wcdc-primary);
	color: #fff;
}

/* ---------- Pagination des commandes et téléchargements ---------- */

/*
 * Balisage différent de celui du catalogue : WooCommerce ne rend ici ni
 * ul.page-numbers ni numéros de page, mais deux liens « Précédent » et
 * « Suivant » portant les classes de bouton. Les règles de catalog.css ne
 * pouvaient donc pas s'y appliquer, et ces liens gardaient le bouton par
 * défaut de Divi — contour de 2 px, fond transparent.
 *
 * L'apparence reprend celle de la pagination du catalogue : même hauteur,
 * même arrondi, même bordure, plutôt que le bouton plein des actions de
 * ligne, qui entrerait en concurrence visuelle avec le « Voir » de chaque
 * commande.
 */
.woocommerce-account .woocommerce-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 20px 0 0;
	padding: 0;
	border: 0;
	text-align: left;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-pagination a.woocommerce-button,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-pagination a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 44px : cible tactile minimale recommandée. */
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid var(--wcdc-border);
	border-radius: 8px;
	background: var(--wcdc-card-bg);
	color: var(--wcdc-primary);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-pagination a.woocommerce-button:hover,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-pagination a.button:hover {
	background: var(--wcdc-bg);
	border-color: var(--wcdc-primary);
	color: var(--wcdc-primary);
}

/* ---------- Détail d'une commande ---------- */

/*
 * La phrase d'introduction de WooCommerce est masquée : notre bandeau la
 * remplace en donnant les mêmes informations lisibles d'un coup d'œil. La
 * classe sur <body> n'est posée que si le bandeau est réellement rendu, sans
 * quoi l'information disparaîtrait sans remplacement.
 */
body.wcdc-view-order .woocommerce-thankyou-order-received {
	display: none;
}

.wcdc-order-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin: 0 0 22px;
	padding: 20px 22px;
	background: var(--wcdc-bg);
	border: 1px solid var(--wcdc-border);
	border-radius: 14px;
}

.wcdc-order-header-main {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.wcdc-order-header-glyph {
	color: var(--wcdc-primary);
}

.wcdc-order-header-id {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.wcdc-order-header-number {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--wcdc-text);
}

.wcdc-order-header-date {
	font-size: 13px;
	color: var(--wcdc-muted);
}

/* Mêmes tonalités que la pastille du tableau de bord. */
.wcdc-order-header-status {
	display: inline-flex;
	align-items: center;
	padding: 4px 11px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
}

.wcdc-order-header-status--ok {
	background: #eaf5f0;
	color: #0f5a45;
}

.wcdc-order-header-status--wait {
	background: #fdf4e7;
	color: #8a5a12;
}

.wcdc-order-header-status--ko {
	background: #fdf0ef;
	color: #8a3a30;
}

.wcdc-order-header-total {
	text-align: right;
}

.wcdc-order-header-total-label {
	display: block;
	margin-bottom: 2px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--wcdc-muted);
}

.wcdc-order-header-total-value {
	display: block;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--wcdc-text);
	font-variant-numeric: tabular-nums;
}

.wcdc-order-header-total-value .woocommerce-Price-amount {
	font-weight: 700;
}

/* ---------- Tableau des totaux ---------- */

.woocommerce-account .woocommerce-order-details__title,
.woocommerce-account .woocommerce-column__title {
	margin: 0 0 12px;
	font-size: 17px;
	font-weight: 700;
	color: var(--wcdc-text);
}

/*
 * Contrairement au tableau des commandes, celui-ci est entièrement repris :
 * même bordure et même arrondi que le bandeau et le bloc d'informations qui
 * l'encadrent.
 *
 * border-collapse: collapse remplace le « separate » de WooCommerce, qui
 * laissait deux pixels de blanc entre les cellules — un liseré vertical
 * visible au milieu de la bande grise de l'en-tête.
 */
/*
 * Pas de marge basse : Divi écrit « table.shop_table { margin-bottom: 30px
 * !important } » et aucune spécificité ne passe devant un « !important » sans
 * en porter un. La déclaration de 24 px qui figurait ici n'a jamais servi.
 */
.woocommerce-account table.woocommerce-table--order-details {
	width: 100%;
	margin: 0;
	border: 1px solid var(--wcdc-border);
	border-radius: 12px;
	border-collapse: collapse;
	overflow: hidden;
}

.woocommerce-account table.woocommerce-table--order-details th {
	background: var(--wcdc-bg);
	color: var(--wcdc-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	text-align: left;
}

/*
 * Les montants alignés à droite et en chiffres tabulaires. C'est le gain de
 * lisibilité principal : collés à gauche de leur colonne et en chasse
 * proportionnelle, sous-total, remises et total ne se comparaient pas d'un
 * coup d'œil.
 */
.woocommerce-account table.woocommerce-table--order-details td.product-total,
.woocommerce-account table.woocommerce-table--order-details tfoot td,
.woocommerce-account table.woocommerce-table--order-details thead th.product-total {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* Le pied ne porte plus que des sommes : ses intitulés restent discrets. */
.woocommerce-account table.woocommerce-table--order-details tfoot th {
	background: none;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wcdc-muted);
}

.woocommerce-account table.woocommerce-table--order-details tfoot td {
	font-weight: 600;
	color: var(--wcdc-text);
}

/*
 * WooCommerce ne pose son filet que sur les td. Dans le pied, l'intitulé est
 * un th : le trait ne traversait donc que la moitié droite du tableau. On le
 * pose sur les deux, à la couleur de la palette.
 */
.woocommerce-account table.woocommerce-table--order-details tfoot th,
.woocommerce-account table.woocommerce-table--order-details tfoot td {
	border-top: 1px solid var(--wcdc-border);
}

/* Dernière ligne du pied : le total, détaché du reste. */
.woocommerce-account table.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-account table.woocommerce-table--order-details tfoot tr:last-child td {
	padding-top: 14px;
	border-top: 2px solid var(--wcdc-border);
	font-size: 16px;
	font-weight: 700;
	color: var(--wcdc-text);
}

.woocommerce-account table.woocommerce-table--order-details .product-quantity {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 7px;
	border-radius: 5px;
	background: var(--wcdc-bg);
	color: var(--wcdc-muted);
	font-size: 11px;
	font-weight: 700;
}

/* ---------- Bloc d'informations ---------- */

.wcdc-order-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 22px;
	margin: 0 0 24px;
	padding: 18px;
	background: var(--wcdc-bg);
	border: 1px solid var(--wcdc-border);
	border-radius: 12px;
}

.wcdc-order-fact {
	display: flex;
	align-items: flex-start;
	gap: 11px;
}

.wcdc-order-fact-glyph {
	color: var(--wcdc-primary);
	margin-top: 2px;
}

.wcdc-order-fact-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.wcdc-order-fact-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wcdc-muted);
}

.wcdc-order-fact-value {
	font-size: 13px;
	line-height: 1.5;
	color: var(--wcdc-text);
}

.wcdc-order-fact-value p {
	margin: 0;
}

/* ---------- Rangée d'actions ---------- */

/*
 * Bon de livraison, facture, rétractation, enquête : quatre extensions
 * distinctes, chacune enveloppant son bouton dans son propre bloc — un div
 * ici, un paragraphe là. Empilés, quatre liens courts occupaient quatre
 * lignes sous le tableau.
 *
 * Ce balisage ne nous appartient pas, mais ces blocs ont un point commun :
 * ils sont tous enfants directs de la même section. On en fait donc un
 * conteneur flex où la pleine largeur reste la règle, et où seuls les blocs
 * qui portent un bouton se réduisent à leur contenu pour se ranger côte à
 * côte. Une extension qui ajouterait un texte ou un tableau garde sa ligne.
 *
 * align-items: flex-end aligne les boutons entre eux plutôt que les blocs :
 * celui du bon de livraison, surmonté de son intitulé, retombe ainsi sur la
 * même base que les autres.
 *
 * Sans prise en charge de :has(), seule la première règle s'applique et
 * l'empilement d'origine subsiste : la dégradation est celle d'avant.
 */
.woocommerce-account .woocommerce-order-details {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	column-gap: 10px;

	/* 14px, qui s'ajoutent aux 10 de la rangée de boutons : la section se
	   détache des adresses du même écart que les blocs qui la composent. */
	margin: 0 0 14px;
}

.woocommerce-account .woocommerce-order-details > * {
	flex: 0 0 100%;
	min-width: 0;
}

/*
 * order: 1 rassemble les boutons en fin de section. Sans cela, une extension
 * qui insère un bloc entre deux d'entre eux — la garantie, ici — coupe la
 * rangée en deux. Tout ce qui n'est pas un bouton garde l'ordre du document,
 * au-dessus.
 *
 * padding: 0 corrige le décalage vertical d'un bouton isolé : Divi pose un
 * padding-bottom d'1em sur tout paragraphe qui n'est pas le dernier de son
 * parent, et l'alignement se fait sur le bas de la boîte, pas du bouton.
 */
.woocommerce-account .woocommerce-order-details > :has(a.button) {
	order: 1;
	flex: 0 0 auto;
	max-width: 100%;
	margin: 0 0 10px;
	padding: 0;
}

/* Le paragraphe dont certaines extensions entourent leur bouton. */
.woocommerce-account .woocommerce-order-details > :has(a.button) p {
	margin: 0;
	padding: 0;
}

/*
 * L'intitulé que le bon de livraison place au-dessus du sien. Rendu comme
 * les autres surtitres de la page, il devient la légende de son bouton au
 * lieu d'une phrase en gras qui pèse plus lourd que l'action.
 */
.woocommerce-account .woocommerce-order-details > :has(a.button) > strong {
	display: block;
	margin: 0 0 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--wcdc-muted);
}

/* ---------- Bloc de garantie ---------- */

/*
 * Rendu par une extension tierce, qui pose son propre habillage en !important
 * sur chaque déclaration. Nos règles reprennent donc le !important, et
 * gagnent par leur spécificité : le préfixe .woocommerce-account suffit à
 * passer au-dessus de chacun de ses sélecteurs.
 *
 * Le résultat reprend la carte du bloc d'informations placé juste au-dessus :
 * même fond, même filet, même arrondi, même surtitre en capitales.
 */
.woocommerce-account .wcsl-warranty-detail {
	margin: 0 0 24px !important;
	padding: 18px !important;
	background: var(--wcdc-bg);
	border: 1px solid var(--wcdc-border) !important;
	border-radius: 12px !important;
}

.woocommerce-account .wcsl-warranty-detail h2 {
	margin: 0 0 10px !important;
	padding: 0;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: .07em !important;
	text-transform: uppercase !important;
	color: var(--wcdc-muted) !important;
}

.woocommerce-account .wcsl-warranty-detail > p {
	align-items: baseline !important;
	gap: 11px !important;
	margin: 0 !important;
	padding: 0;
}

/* La pastille prend la forme et les tonalités de celle du bandeau. */
.woocommerce-account .wcsl-warranty-detail .wcsl-warranty-badge {
	padding: 4px 11px !important;
	border: 0 !important;
	border-radius: 999px !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
}

.woocommerce-account .wcsl-warranty-detail .wcsl-warranty-ok {
	background: #eaf5f0 !important;
	color: #0f5a45 !important;
}

.woocommerce-account .wcsl-warranty-detail .wcsl-warranty-expired {
	background: #fdf0ef !important;
	color: #8a3a30 !important;
}

/*
 * Le retrait de 25px servait à décaler le texte sous la pastille quand il
 * passait à la ligne. L'espacement du conteneur flex s'en charge, et ce
 * retrait ne faisait plus que doubler le premier.
 */
.woocommerce-account .wcsl-warranty-detail .wcsl-warranty-detail-text {
	margin-left: 0 !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
	color: var(--wcdc-text) !important;
}

/* ---------- Adresses ---------- */

/* L'adresse rappelée au bas du détail d'une commande. */
.woocommerce-account .woocommerce-customer-details address {
	padding: 18px;
	border: 1px solid var(--wcdc-border);
	border-radius: 12px;
	font-style: normal;
	font-size: 13px;
	line-height: 1.6;
	color: var(--wcdc-muted);
}

/* ---------- La liste des deux adresses ---------- */

/*
 * Les deux colonnes sont déjà mises en page par la règle
 * « .u-columns.col2-set » de la section Connexion : WooCommerce se sert du
 * même conteneur ici.
 */

/*
 * La phrase d'introduction, au-dessus des deux cartes. Pas de « font-size » :
 * elle garde la taille du thème, comme le reste du texte lu par le client.
 */
.woocommerce-account .woocommerce-MyAccount-content:has(.woocommerce-Addresses) > p {
	margin: 0 0 18px;
	padding: 0;
	line-height: 1.6;
	color: var(--wcdc-muted);
}

/*
 * La carte reprend la découpe des blocs de l'onglet « Sécurité » : un
 * bandeau de titre, le contenu, une barre d'action en pied.
 *
 * WooCommerce met pourtant le lien « Modifier » DANS l'en-tête, avec le
 * titre. Les deux n'y tiennent pas sur une ligne — « Modifier Adresse de
 * facturation » est presque aussi long que la carte est large. display:
 * contents efface la boîte de l'en-tête sans toucher à son contenu : le
 * titre et le lien deviennent des éléments de la carte, et « order » les
 * place de part et d'autre de l'adresse.
 */
.woocommerce-account .woocommerce-Address {
	display: flex;
	flex-direction: column;
	background: var(--wcdc-card-bg);
	border: 1px solid var(--wcdc-border);
	border-radius: 12px;
	overflow: hidden;
}

.woocommerce-account .woocommerce-Address .woocommerce-Address-title {
	display: contents;
}

.woocommerce-account .woocommerce-Address .woocommerce-Address-title h2 {
	order: 0;
	margin: 0;
	padding: 12px 18px;
	background: var(--wcdc-bg);
	border-bottom: 1px solid var(--wcdc-border);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--wcdc-text);
}

/*
 * flex: 1 1 auto — quand les deux adresses n'ont pas le même nombre de
 * lignes, les deux pieds restent alignés.
 */
.woocommerce-account .woocommerce-Address address {
	order: 1;
	flex: 1 1 auto;
	margin: 0;
	padding: 18px;
	border: 0;
	font-style: normal;
	font-size: 13px;
	line-height: 1.7;
	color: var(--wcdc-text);
}

/* WooCommerce fait flotter ce lien ; un élément flex ne flotte pas. */
.woocommerce-account .woocommerce-Address .woocommerce-Address-title .edit {
	order: 2;
	float: none;
	padding: 12px 18px;
	background: var(--wcdc-bg);
	border-top: 1px solid var(--wcdc-border);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--wcdc-primary);
	text-decoration: none;
}

.woocommerce-account .woocommerce-Address .woocommerce-Address-title .edit:hover {
	text-decoration: underline;
}

/* ---------- Le formulaire d'une adresse ---------- */

/*
 * Le <form> n'a pas de classe : c'est le bloc de champs qu'il contient qui
 * l'identifie. :has() évite d'habiller au passage les autres formulaires de
 * l'espace client — ceux de l'extension 2FA en particulier.
 */
.woocommerce-account .woocommerce-MyAccount-content form:has(.woocommerce-address-fields) {
	background: var(--wcdc-card-bg);
	border: 1px solid var(--wcdc-border);
	border-radius: 12px;
	overflow: hidden;
}

/* « Adresse de facturation » / « de livraison » : le bandeau de la carte. */
.woocommerce-account .woocommerce-MyAccount-content form:has(.woocommerce-address-fields) > h2 {
	margin: 0;
	padding: 12px 18px;
	background: var(--wcdc-bg);
	border-bottom: 1px solid var(--wcdc-border);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--wcdc-text);
}

.woocommerce-account .woocommerce-address-fields {
	padding: 22px;
}

/*
 * Même grille que « Détails du compte » : « Prénom » et « Nom » côte à côte,
 * le reste sur toute la largeur. Les flottants de WooCommerce ne s'appliquent
 * pas aux éléments d'une grille ; seule leur largeur de 47 % doit être
 * neutralisée.
 */
.woocommerce-account .woocommerce-address-fields__field-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 20px;
	row-gap: 0;
	align-items: start;
}

.woocommerce-account .woocommerce-address-fields__field-wrapper > .form-row {
	grid-column: 1 / -1;
	min-width: 0;
}

.woocommerce-account .woocommerce-address-fields__field-wrapper > .form-row-first {
	grid-column: 1 / 2;
}

.woocommerce-account .woocommerce-address-fields__field-wrapper > .form-row-last {
	grid-column: 2 / 3;
}

.woocommerce-account .woocommerce-address-fields .form-row-first,
.woocommerce-account .woocommerce-address-fields .form-row-last {
	width: auto;
}

/*
 * WooCommerce enveloppe chaque champ dans un span inline. En bloc, il occupe
 * la largeur de la ligne et la règle « width: 100% » du champ s'y résout
 * proprement.
 */
.woocommerce-account .woocommerce-address-fields .woocommerce-input-wrapper {
	display: block;
	width: 100%;
}

/*
 * La liste des pays. Son fond porte le chevron que WooCommerce dessine en
 * image : on ne touche qu'à « background-color », le raccourci l'effacerait.
 */
.woocommerce-account .woocommerce-address-fields .form-row select {
	width: 100%;
	height: 44px;
	padding: 0 40px 0 13px;
	border: 1px solid var(--wcdc-border);
	border-radius: 8px;
	background-color: var(--wcdc-card-bg);
	color: var(--wcdc-text);
	font-size: inherit;
	line-height: 1.4;
}

/*
 * selectWoo remplace cette liste par son propre composant dès que le
 * JavaScript s'exécute. Mêmes dimensions et mêmes tonalités, pour que le
 * champ ne change pas d'aspect entre le rendu initial et le rendu final.
 *
 * Deux valeurs héritées doivent être annulées explicitement, sans quoi la
 * ligne « Pays/région » se replie sur la suivante :
 *
 *   select2 :      .select2-container .select2-selection--single
 *                  { height: 28px; margin: 0 0 -4px }
 *   WooCommerce :  :where(.woocommerce) … .select2-selection__rendered
 *                  { padding: .5em; line-height: normal }
 *
 * La marge basse négative de select2 compense sa hauteur de 28 px sur une
 * ligne de texte ordinaire. Redéfinir la hauteur ne la retire pas : la boîte
 * se dessinait sur 44 px mais n'en déclarait que 40 au flux, et mordait donc
 * de 4 px sur le champ suivant.
 *
 * Le rembourrage de WooCommerce, lui, s'ajoute à notre interligne de 42 px :
 * 42 + 7 + 7 = 56 px de contenu dans une boîte de 44, d'où le libellé du pays
 * poussé vers le bas et débordant par-dessous. On pose donc le rembourrage
 * complet, pas seulement à gauche.
 *
 * Le conteneur passe enfin en « display: block » : en « inline-block », il
 * établit une ligne, dont l'espace de jambage s'ajouterait sous la boîte une
 * fois la marge négative retirée.
 */
.woocommerce-account .woocommerce-address-fields .select2-container {
	display: block;
	width: 100%;
}

.woocommerce-account .woocommerce-address-fields .select2-container .select2-selection--single {
	height: 44px;
	margin: 0;
	border: 1px solid var(--wcdc-border);
	border-radius: 8px;
	background: var(--wcdc-card-bg);
}

.woocommerce-account .woocommerce-address-fields .select2-container .select2-selection--single .select2-selection__rendered {
	height: 42px;
	padding: 0 36px 0 13px;
	line-height: 42px;
	color: var(--wcdc-text);
	font-size: inherit;
}

.woocommerce-account .woocommerce-address-fields .select2-container .select2-selection--single .select2-selection__arrow {
	top: 0;
	height: 42px;
}

/* ---------- Le bouton d'envoi ---------- */

/* Seule action de la page : pleine, comme « Enregistrer les modifications ». */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields button.button {
	min-height: 46px;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields button.button:where(body:not(.wcdc-theme-buttons) *) {
	padding: 12px 26px;
	border: 1px solid var(--wcdc-primary);
	border-radius: 8px;
	background: var(--wcdc-primary);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .02em;
	transition: filter .15s ease;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields button.button:hover:where(body:not(.wcdc-theme-buttons) *) {
	filter: brightness(.92);
	background: var(--wcdc-primary);
	border-color: var(--wcdc-primary);
	color: #fff;
}

/* Le paragraphe qui porte le bouton et les champs cachés. */
.woocommerce-account .woocommerce-address-fields > p {
	padding: 0;
	margin: 0;
}

/* ---------- Boutons de l'espace client ---------- */

/*
 * Facture PDF, avoirs, « commander une nouvelle fois », enquête : ces boutons
 * viennent d'extensions différentes, avec des classes qu'on ne connaît pas
 * une par une. La règle vise donc tout bouton de l'espace client, pour qu'ils
 * partagent au moins une apparence.
 *
 * Leur disposition est traitée à part, dans « Rangée d'actions » plus haut.
 */
.woocommerce-account .woocommerce-MyAccount-content a.button,
.woocommerce-account .woocommerce-MyAccount-content button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
}

.woocommerce-account .woocommerce-MyAccount-content a.button:where(body:not(.wcdc-theme-buttons) *),
.woocommerce-account .woocommerce-MyAccount-content button.button:where(body:not(.wcdc-theme-buttons) *) {
	padding: 11px 16px;
	border: 1px solid var(--wcdc-border);
	border-radius: 8px;
	background: var(--wcdc-card-bg);
	color: var(--wcdc-text);
	font-size: 13px;
	font-weight: 600;
	/*
	 * Pas de « line-height » : Divi pose « .woocommerce a.button { line-height:
	 * 1.7em !important } », soit 22,1 px effectifs. La valeur de 1.2 déclarée
	 * ici était inerte ; la hauteur du bouton est de toute façon tenue par
	 * « min-height ».
	 */
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease;
}

.woocommerce-account .woocommerce-MyAccount-content a.button:hover:where(body:not(.wcdc-theme-buttons) *),
.woocommerce-account .woocommerce-MyAccount-content button.button:hover:where(body:not(.wcdc-theme-buttons) *) {
	background: var(--wcdc-bg);
	border-color: var(--wcdc-primary);
	color: var(--wcdc-text);
}

.woocommerce-account .woocommerce-MyAccount-content a.button:where(body:not(.wcdc-theme-buttons) *)::after,
.woocommerce-account .woocommerce-MyAccount-content a.button:where(body:not(.wcdc-theme-buttons) *)::before,
.woocommerce-account .woocommerce-MyAccount-content button.button:where(body:not(.wcdc-theme-buttons) *)::after,
.woocommerce-account .woocommerce-MyAccount-content button.button:where(body:not(.wcdc-theme-buttons) *)::before {
	content: none;
}

/*
 * Cette règle générale vaut (0,3,1), soit PLUS que les règles écrites plus
 * haut pour « Voir » et pour la pagination, qui valaient (0,3,0) : sans
 * précaution elle les aurait écrasées et rendu le bouton « Voir » creux. Ces
 * deux règles ont donc reçu un « .woocommerce-MyAccount-content » de plus,
 * qui les porte à (0,4,1).
 *
 * Les boutons de connexion et d'inscription, eux, ne sont pas concernés : hors
 * session, WooCommerce rend le formulaire en dehors de
 * .woocommerce-MyAccount-content, que cette règle exige.
 */

/*
 * Divi injecte une flèche en ::after sur ses boutons WooCommerce, révélée au
 * survol, et compense par un rembourrage supplémentaire. Nos boutons ont leur
 * propre rembourrage et leur propre alignement : le glyphe se pose alors sur
 * le libellé au lieu de se glisser à côté.
 *
 * On le retire partout où nous réhabillons un bouton. Les boutons que nous ne
 * touchons pas gardent le comportement de Divi.
 */
.woocommerce-account .woocommerce-orders-table .woocommerce-button:where(body:not(.wcdc-theme-buttons) *)::after,
.woocommerce-account .woocommerce-orders-table .woocommerce-button:where(body:not(.wcdc-theme-buttons) *)::before,
.woocommerce-account .woocommerce-pagination .woocommerce-button::after,
.woocommerce-account .woocommerce-pagination .woocommerce-button::before,
.woocommerce-account .woocommerce-pagination a.button::after,
.woocommerce-account .woocommerce-pagination a.button::before,
.woocommerce-account .woocommerce .woocommerce-form-login__submit.woocommerce-form-login__submit:where(body:not(.wcdc-theme-buttons) *)::after,
.woocommerce-account .woocommerce .woocommerce-form-login__submit.woocommerce-form-login__submit:where(body:not(.wcdc-theme-buttons) *)::before,
.woocommerce-account .woocommerce .woocommerce-form-register__submit.woocommerce-form-register__submit:where(body:not(.wcdc-theme-buttons) *)::after,
.woocommerce-account .woocommerce .woocommerce-form-register__submit.woocommerce-form-register__submit:where(body:not(.wcdc-theme-buttons) *)::before,
.woocommerce-account .woocommerce .woocommerce-ResetPassword.woocommerce-ResetPassword button.button:where(body:not(.wcdc-theme-buttons) *)::after,
.woocommerce-account .woocommerce .woocommerce-ResetPassword.woocommerce-ResetPassword button.button:where(body:not(.wcdc-theme-buttons) *)::before {
	content: none;
}

/*
 * Les six sélecteurs ci-dessus portent un « .woocommerce » et une classe
 * redoublée pour atteindre (0,4,0). Divi pose en effet sa flèche par
 *
 *   .woocommerce button.button:not(.button-confirm)::after   (0,3,1)
 *
 * — le « :not() » comptant pour la spécificité de son argument. Écrites à
 * (0,2,0) et (0,2,1), ces règles ne retiraient rien du tout.
 *
 * Le glyphe restait invisible, Divi le laissant à « opacity: 0 » tant que
 * l'option d'icône de bouton est désactivée. La neutralisation n'en était pas
 * moins inopérante : elle le serait redevenue visiblement dès que cette
 * option aurait été activée, par-dessus un bouton plein.
 */

/* ---------- Détails du compte ---------- */

/*
 * Le formulaire « Détails du compte » n'avait aucun habillage : il tombait
 * sur les flottants de WooCommerce et sur le gris de Divi, au milieu d'un
 * espace client entièrement fait de cartes.
 *
 * Les lignes, libellés et champs viennent des règles partagées, plus haut.
 * Ne restent ici que ce qui lui est propre : la carte, la disposition en
 * deux colonnes, le groupe « mot de passe » et le bouton d'envoi.
 */

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm {
	background: var(--wcdc-card-bg);
	border: 1px solid var(--wcdc-border);
	border-radius: 12px;
	padding: 22px;
}

/*
 * WooCommerce dispose « Prénom » et « Nom » en flottants à 47 %, dégagés par
 * des <div class="clear"> intercalés. Une grille dit la même chose sans
 * flottant : les flottants ne s'appliquent pas à un élément de grille, et la
 * largeur de 47 % est neutralisée juste en dessous.
 *
 * row-gap reste à zéro : l'écart vertical est déjà porté par la marge basse
 * des lignes, qui vaut aussi à l'intérieur du groupe « mot de passe » — lui
 * n'est pas une grille.
 */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 20px;
	row-gap: 0;
	align-items: start;
}

.woocommerce-account .woocommerce-EditAccountForm > * {
	grid-column: 1 / -1;
	min-width: 0;
}

.woocommerce-account .woocommerce-EditAccountForm > .form-row-first {
	grid-column: 1 / 2;
}

.woocommerce-account .woocommerce-EditAccountForm > .form-row-last {
	grid-column: 2 / 3;
}

/* .woocommerce form .form-row-first vaut (0,2,1) : trois classes suffisent. */
.woocommerce-account .woocommerce-EditAccountForm .form-row-first,
.woocommerce-account .woocommerce-EditAccountForm .form-row-last {
	width: auto;
}

/* Les dégagements de flottants n'ont plus d'objet, et occupaient une rangée. */
.woocommerce-account .woocommerce-EditAccountForm > .clear {
	display: none;
}

/* La précision sous « Nom affiché ». */
.woocommerce-account .woocommerce-EditAccountForm #account_display_name_description {
	font-size: 12px;
	line-height: 1.55;
	color: var(--wcdc-muted);
}

.woocommerce-account .woocommerce-EditAccountForm #account_display_name_description em {
	font-style: normal;
}

/* ---------- Le groupe « mot de passe » ---------- */

/*
 * Un panneau en retrait plutôt qu'une seconde carte : trois champs facultatifs
 * au sein d'un formulaire qui en est un, une bordure de plus dans une bordure
 * alourdirait la lecture.
 */
.woocommerce-account .woocommerce-EditAccountForm fieldset {
	margin: 4px 0 20px;
	padding: 18px;
	background: var(--wcdc-bg);
	border: 1px solid var(--wcdc-border);
	border-radius: 10px;
}

/*
 * Une <legend> est la « légende rendue » du <fieldset> : le navigateur la
 * sort du flux et interrompt la bordure haute pour l'y loger. display: block
 * n'y change rien — il faut un float pour qu'elle cesse de jouer ce rôle et
 * redevienne une boîte ordinaire. À 100 % de large, rien ne peut se placer à
 * côté d'elle, et les lignes qui suivent — conteneurs flex, donc contextes de
 * formatage indépendants — se posent dessous sans la chevaucher.
 */
.woocommerce-account .woocommerce-EditAccountForm legend {
	display: block;
	float: left;
	width: 100%;
	padding: 0 0 12px;
	margin: 0 0 16px;
	border-bottom: 1px solid var(--wcdc-border);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--wcdc-text);
}

.woocommerce-account .woocommerce-EditAccountForm fieldset .woocommerce-form-row:last-child {
	margin-bottom: 0;
}

/* ---------- Le bouton d'envoi ---------- */

/*
 * Seule action de la page : elle est pleine, comme « Se connecter », et non
 * creuse comme les boutons secondaires de l'espace client. Il faut donc
 * passer devant la règle générale de ceux-ci, qui vaut (0,3,1).
 */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm button.button {
	min-height: 46px;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm button.button:where(body:not(.wcdc-theme-buttons) *) {
	padding: 12px 26px;
	border: 1px solid var(--wcdc-primary);
	border-radius: 8px;
	background: var(--wcdc-primary);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .02em;
	transition: filter .15s ease;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm button.button:hover:where(body:not(.wcdc-theme-buttons) *) {
	filter: brightness(.92);
	background: var(--wcdc-primary);
	border-color: var(--wcdc-primary);
	color: #fff;
}

/* Le paragraphe qui porte le bouton et les champs cachés. */
.woocommerce-account .woocommerce-EditAccountForm > p:not(.form-row) {
	padding: 0;
	margin: 0;
}

/* ---------- Sécurité du compte (2FA, extension tierce) ---------- */

/*
 * L'extension apporte sa propre charte — bleu #00709e, Helvetica, cartes à
 * ombre portée — qui jure avec le reste de l'espace client. On la reprend
 * avec le vocabulaire des autres écrans : carte à 12 px, champ à 44 px,
 * bouton à 8 px.
 *
 * Ses sélecteurs sont profonds (jusqu'à quatre classes pour le titre d'une
 * carte) mais sans !important. Le préfixe .woocommerce-MyAccount-content
 * suffit donc à passer devant, à condition de suivre sa profondeur là où elle
 * est grande — d'où les chaînes un peu longues plus bas. Notre feuille est
 * par ailleurs chargée après la sienne.
 */

.woocommerce-MyAccount-content #ws2fa-management-embedded > p {
	margin: 0 0 20px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--wcdc-muted);
}

/* Saut de ligne décoratif que l'extension insère sous l'introduction. */
.woocommerce-MyAccount-content #ws2fa-management-embedded > br {
	display: none;
}

/*
 * Espacement des colonnes de cartes. On ne touche pas à « display » : ces
 * conteneurs sont masqués puis révélés en JavaScript, qui pose sa propre
 * valeur en ligne. La marge basse des cartes assure l'espacement vertical
 * quelle que soit la disposition retenue.
 */
.woocommerce-MyAccount-content .ws2fa-flex-row-wrapped {
	flex-wrap: wrap;
	align-items: stretch;
	gap: 16px;
}

/*
 * align-items: stretch sur la colonne comme sur la rangée. L'extension
 * centre verticalement ses colonnes ; deux cartes de hauteurs différentes
 * se retrouvaient alors décalées l'une par rapport à l'autre, en-têtes
 * compris. Étirées, elles partagent la même ligne haute et la même base.
 */
.woocommerce-MyAccount-content .ws2fa-flex-row-wrapped > .ws2fa-flex-row {
	flex: 1 1 320px;
	min-width: 0;
	align-items: stretch;
}

/* ---------- La carte ---------- */

.woocommerce-MyAccount-content .ws2fa-block {
	margin: 0 0 16px;
	background: var(--wcdc-card-bg);
	border: 1px solid var(--wcdc-border);
	border-radius: 12px;
	box-shadow: none;
	overflow: hidden;
}

.woocommerce-MyAccount-content .ws2fa-block .ws2fa-block-header,
.woocommerce-MyAccount-content .ws2fa-block .ws2fa-block-header.ws2fa-block-header-border-bottom {
	padding: 12px 18px;
	background: var(--wcdc-bg);
	border-bottom: 1px solid var(--wcdc-border);
}

.woocommerce-MyAccount-content .ws2fa-block .ws2fa-block-header .ws2fa-block-header-content {
	max-width: 100%;
}

.woocommerce-MyAccount-content .ws2fa-block .ws2fa-block-header .ws2fa-block-header-content .ws2fa-block-title,
.woocommerce-MyAccount-content .ws2fa-block .ws2fa-block-header .ws2fa-block-header-content .ws2fa-block-title strong {
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--wcdc-text);
}

.woocommerce-MyAccount-content .ws2fa-block .ws2fa-block-content {
	padding: 18px;
}

.woocommerce-MyAccount-content .ws2fa-block .ws2fa-block-content p {
	margin: 0 0 12px;
	padding: 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--wcdc-text);
}

.woocommerce-MyAccount-content .ws2fa-block .ws2fa-block-content p:last-child {
	margin-bottom: 0;
}

.woocommerce-MyAccount-content .ws2fa-block .ws2fa-block-content em.ws2fa-text-small {
	font-size: 11px;
	font-style: normal;
	color: var(--wcdc-muted);
}

.woocommerce-MyAccount-content .ws2fa-block .ws2fa-block-content hr.ws2fa-half {
	margin: 16px 0;
	border: 0;
	border-top: 1px solid var(--wcdc-border);
}

.woocommerce-MyAccount-content .ws2fa-block .ws2fa-block-footer {
	padding: 12px 18px;
	border-top: 1px solid var(--wcdc-border);
	background: var(--wcdc-bg);
}

.woocommerce-MyAccount-content .ws2fa-block .ws2fa-block-footer .ws2fa-block-footer-content {
	justify-content: flex-end;
}

/* ---------- Les boutons de l'extension ---------- */

/*
 * Mêmes dimensions et mêmes tonalités que « .button » ailleurs dans l'espace
 * client. Le sélecteur porte aussi sur .ws2fa-modal, parce que les fenêtres
 * de confirmation sont injectées à la racine du document, hors du contenu du
 * compte : sans cela, le bleu de l'extension resurgirait au premier clic.
 */
.woocommerce-MyAccount-content .ws2fa-btn,
body.woocommerce-account .ws2fa-modal .ws2fa-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 11px 16px;
	border: 1px solid var(--wcdc-border);
	border-radius: 8px;
	background: var(--wcdc-card-bg);
	color: var(--wcdc-text);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	white-space: normal;
	text-transform: none;
	transition: background .15s ease, border-color .15s ease;
}

.woocommerce-MyAccount-content .ws2fa-btn.ws2fa-btn-default,
body.woocommerce-account .ws2fa-modal .ws2fa-btn.ws2fa-btn-default {
	background: var(--wcdc-card-bg);
	border-color: var(--wcdc-border);
	color: var(--wcdc-text);
}

.woocommerce-MyAccount-content .ws2fa-btn.ws2fa-btn-primary,
body.woocommerce-account .ws2fa-modal .ws2fa-btn.ws2fa-btn-primary {
	background: var(--wcdc-primary);
	border-color: var(--wcdc-primary);
	color: #fff;
}

.woocommerce-MyAccount-content .ws2fa-btn:hover,
.woocommerce-MyAccount-content .ws2fa-btn.ws2fa-btn-default:hover,
body.woocommerce-account .ws2fa-modal .ws2fa-btn:hover {
	background: var(--wcdc-bg);
	border-color: var(--wcdc-primary);
	color: var(--wcdc-text);
}

.woocommerce-MyAccount-content .ws2fa-btn.ws2fa-btn-primary:hover,
body.woocommerce-account .ws2fa-modal .ws2fa-btn.ws2fa-btn-primary:hover {
	background: var(--wcdc-primary);
	border-color: var(--wcdc-primary);
	color: #fff;
	filter: brightness(.92);
}

.woocommerce-MyAccount-content .ws2fa-btn.ws2fa-disabled,
.woocommerce-MyAccount-content .ws2fa-btn[disabled] {
	opacity: .55;
	cursor: not-allowed;
}

/* Le dashicon de téléchargement, aligné sur le libellé. */
.woocommerce-MyAccount-content .ws2fa-btn .dashicons {
	width: 16px;
	height: 16px;
	font-size: 16px;
	line-height: 1;
}

/* ---------- Champs de saisie ---------- */

.woocommerce-MyAccount-content #ws2fa-activate-field,
.woocommerce-MyAccount-content #ws2fa-qr-code-text,
.woocommerce-MyAccount-content #ws2fa-user-grace-period-override {
	height: 44px;
	padding: 0 13px;
	border: 1px solid var(--wcdc-border);
	border-radius: 8px;
	background: var(--wcdc-card-bg);
	color: var(--wcdc-text);
	font-size: 14px;
	line-height: 1.4;
}

/* Le code à six chiffres : court, centré, chiffres espacés pour la relecture. */
.woocommerce-MyAccount-content #ws2fa-activate-field {
	width: 140px;
	text-align: center;
	letter-spacing: .22em;
	font-variant-numeric: tabular-nums;
}

.woocommerce-MyAccount-content #ws2fa-user-grace-period-override {
	width: 70px;
	text-align: center;
}

/* La clé textuelle du QR code, à recopier telle quelle dans l'application. */
.woocommerce-MyAccount-content #ws2fa-qr-code-text {
	width: 100%;
	max-width: 380px;
	text-align: center;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13px;
}

.woocommerce-MyAccount-content #ws2fa-qr-code {
	display: flex;
	justify-content: center;
	margin: 6px 0 14px;
}

.woocommerce-MyAccount-content #ws2fa-qr-code canvas,
.woocommerce-MyAccount-content #ws2fa-qr-code img {
	padding: 12px;
	background: #fff;
	border: 1px solid var(--wcdc-border);
	border-radius: 10px;
}

/* ---------- Codes de récupération ---------- */

.woocommerce-MyAccount-content ul.ws2fa-recovery-codes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 8px;
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
}

.woocommerce-MyAccount-content ul.ws2fa-recovery-codes li {
	margin: 0;
	padding: 9px 10px;
	background: var(--wcdc-bg);
	border: 1px solid var(--wcdc-border);
	border-radius: 8px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
	font-size: 13px;
	letter-spacing: .04em;
	color: var(--wcdc-text);
	text-align: center;
}

/* ---------- Période de grâce ---------- */

.woocommerce-MyAccount-content .ws2fa-grace-period-container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.woocommerce-MyAccount-content .ws2fa-grace-period-input-container {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--wcdc-text);
}

/* ---------- Fenêtres de confirmation ---------- */

body.woocommerce-account .ws2fa-modal .ws2fa-modal-title strong {
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	color: var(--wcdc-text);
}

body.woocommerce-account .ws2fa-modal .ws2fa-modal-content {
	font-size: 13px;
	line-height: 1.6;
	color: var(--wcdc-text);
}

/* ---------- Mobile ---------- */

/*
 * 768px, le point de rupture de woocommerce-smallscreen.css : nos règles
 * reprennent la main sur le même intervalle que celles de WooCommerce, au lieu
 * de se chevaucher partiellement avec.
 *
 * Ce bloc est placé APRÈS celui à 782px ci-dessus : à spécificité égale, c'est
 * l'ordre qui tranche, et c'est bien la version mobile qui doit l'emporter en
 * dessous de 768px.
 */
@media (max-width: 768px) {

	/* Sous cette largeur, deux boutons ne tiennent plus côte à côte sans se
	   comprimer : on réempile, mais en pleine largeur cette fois, ce qui en
	   fait des cibles confortables au pouce. */
	.woocommerce-account .woocommerce-order-details > :has(a.button) {
		flex: 0 0 100%;
	}

	.woocommerce-account .woocommerce-order-details > :has(a.button) a.button {
		width: 100%;
	}

	/* « Détails du compte » : une seule colonne, et le bouton pleine largeur
	   comme les autres actions de l'espace client à cette taille. */
	.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm {
		grid-template-columns: 1fr;
		padding: 18px;
	}

	.woocommerce-account .woocommerce-EditAccountForm > .form-row-first,
	.woocommerce-account .woocommerce-EditAccountForm > .form-row-last {
		grid-column: 1 / -1;
	}

	.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm button.button {
		width: 100%;
	}

	/* Le formulaire d'adresse : une seule colonne, bouton pleine largeur. */
	.woocommerce-account .woocommerce-address-fields {
		padding: 18px;
	}

	.woocommerce-account .woocommerce-address-fields__field-wrapper {
		grid-template-columns: 1fr;
	}

	.woocommerce-account .woocommerce-address-fields__field-wrapper > .form-row-first,
	.woocommerce-account .woocommerce-address-fields__field-wrapper > .form-row-last {
		grid-column: 1 / -1;
	}

	.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields button.button {
		width: 100%;
	}

	/* Le menu latéral devient une rangée de pastilles défilante : la liste
	   verticale de sept à dix entrées repoussait tout le contenu hors écran. */
	.woocommerce-account .woocommerce-MyAccount-navigation {
		background: none;
		border: 0;
		border-radius: 0;
		padding: 0;
		margin-bottom: 20px;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		display: flex;
		gap: 8px;
		overflow-x: auto;
		padding: 0 0 4px;
		/* La barre de défilement horizontale est masquée : le débordement des
		   pastilles suffit à signaler qu'il y a plus à voir. */
		scrollbar-width: none;
		-ms-overflow-style: none;
		-webkit-overflow-scrolling: touch;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
		display: none;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation-link {
		flex: 0 0 auto;
		margin-bottom: 0;
		border: 1px solid var(--wcdc-border);
		border-radius: 999px;
		background: var(--wcdc-bg);
	}

	.woocommerce-account .woocommerce-MyAccount-navigation-link a {
		padding: 9px 15px;
		white-space: nowrap;
		font-size: 13px;
	}

	/* Les icônes sont retirées des pastilles : à cette largeur, chaque pixel
	   gagné est un libellé de plus visible sans défiler. */
	.woocommerce-account .woocommerce-MyAccount-navigation-link a::before {
		display: none;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active {
		background: var(--wcdc-primary);
		border-color: var(--wcdc-primary);
	}

	/* Le tableau des commandes devient une pile de cartes.
	   WooCommerce empile déjà shop_table_responsive via
	   woocommerce-smallscreen.css, mais ce fichier n'est pas toujours chargé
	   sous Divi : les règles ci-dessous sont autonomes et ne dépendent pas de
	   lui. D'où les !important, qui couvrent aussi le cas où il l'est. */
	/*
	 * « th » est listé partout où « td » l'est, et ce n'est pas une précaution
	 * de style : WooCommerce masque « .shop_table_responsive tbody th » sur
	 * petit écran. Le gabarit de la table des commandes pouvant rendre la
	 * cellule du numéro en <th scope="row">, elle disparaissait purement et
	 * simplement de la carte — mesuré à display: none, taille nulle — pendant
	 * que date, état, total et bouton s'affichaient normalement.
	 *
	 * Les sélecteurs « th » sont écrits exactement comme leurs jumeaux « td »,
	 * sans « tbody » : un élément de plus les ferait passer devant les règles
	 * propres au numéro de commande, plus bas, qui départagent à l'ordre.
	 */
	.woocommerce-account .woocommerce-orders-table,
	.woocommerce-account .woocommerce-orders-table tbody,
	.woocommerce-account .woocommerce-orders-table tr,
	.woocommerce-account .woocommerce-orders-table td,
	.woocommerce-account .woocommerce-orders-table tbody th {
		display: block !important;
		width: auto !important;
	}

	.woocommerce-account .woocommerce-orders-table {
		border: 0;
		border-radius: 0;
		overflow: visible;
	}

	.woocommerce-account .woocommerce-orders-table thead {
		/* Les en-têtes sont repris par le ::before de chaque cellule. */
		display: none !important;
	}

	.woocommerce-account .woocommerce-orders-table tr {
		background: var(--wcdc-card-bg);
		border: 1px solid var(--wcdc-border);
		border-radius: 12px;
		padding: 15px;
		margin: 0 0 12px;
	}

	/*
	 * Classe redoublée sur ces deux règles, et sur elles seules : ce sont les
	 * deux qui perdaient. WooCommerce charge une feuille propre au petit écran
	 * et y écrit
	 *
	 *   .woocommerce table.shop_table_responsive tr td          (0,2,3)
	 *                       { display: block; text-align: right !important }
	 *   .woocommerce table.shop_table_responsive tr td::before  (0,2,4)
	 *                       { content: attr(data-title) ": "; float: left }
	 *
	 * où « table », « tr » et « td » comptent chacun comme un élément. Écrites
	 * à (0,2,1) et (0,2,2), nos règles perdaient : toutes les cellules de la
	 * carte étaient alignées à DROITE — le numéro de commande se retrouvait
	 * collé au bord, détaché du reste — et les intitulés portaient le
	 * deux-points de WooCommerce, « DATE : » au lieu de « DATE ».
	 *
	 * Le « !important » ne suffisait pas : les deux déclarations concurrentes
	 * en portent un aussi, et à !important égal c'est la spécificité qui
	 * tranche.
	 */
	.woocommerce-account .woocommerce-orders-table.woocommerce-orders-table td,
	.woocommerce-account .woocommerce-orders-table.woocommerce-orders-table th {
		padding: 0 !important;
		border: 0 !important;
		text-align: left !important;
		font-size: 14px;
		color: var(--wcdc-text);
	}

	/*
	 * WooCommerce zèbre une ligne sur deux —
	 * « .woocommerce table.shop_table_responsive tr:nth-child(2n) td » (0,3,3),
	 * le « :nth-child() » comptant comme une classe. Lisible dans un tableau ;
	 * absurde ici, où chaque ligne est devenue une carte : une commande sur
	 * deux se retrouvait avec des cellules teintées en damier, la cellule du
	 * numéro et celle du total en bandes grises, la date et l'état non.
	 */
	.woocommerce-account .woocommerce-orders-table.woocommerce-orders-table tr:nth-child(2n) td,
	.woocommerce-account .woocommerce-orders-table.woocommerce-orders-table tr:nth-child(2n) th {
		background-color: transparent;
	}

	.woocommerce-account .woocommerce-orders-table.woocommerce-orders-table td::before,
	.woocommerce-account .woocommerce-orders-table.woocommerce-orders-table th::before {
		content: attr(data-title);
		display: block;
		float: none !important;
		margin: 0 0 2px;
		font-size: 10px;
		font-weight: 700;
		letter-spacing: .07em;
		text-transform: uppercase;
		color: var(--wcdc-muted);
	}

	/*
	 * Numéro de commande : mis en avant, sans son intitulé.
	 *
	 * La taille est posée sur le <a> autant que sur la cellule : le lien porte
	 * ses propres 12 px plus haut, qui s'appliquent à toutes les largeurs et
	 * ramèneraient le numéro au corps du texte courant en pleine carte.
	 */
	.woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-number,
	.woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-number a,
	.woocommerce-account .woocommerce-orders-table th.woocommerce-orders-table__cell-order-number,
	.woocommerce-account .woocommerce-orders-table th.woocommerce-orders-table__cell-order-number a {
		font-size: 16px;
		font-weight: 700;
		text-transform: none;
		letter-spacing: normal;
	}

	.woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-number,
	.woocommerce-account .woocommerce-orders-table th.woocommerce-orders-table__cell-order-number {
		margin-bottom: 10px;
	}

	.woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-number::before,
	.woocommerce-account .woocommerce-orders-table th.woocommerce-orders-table__cell-order-number::before {
		display: none;
	}

	/* Date, état et total côte à côte plutôt qu'empilés sur trois lignes. */
	.woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-date,
	.woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-status,
	.woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-total {
		display: inline-block !important;
		width: auto !important;
		margin: 0 22px 12px 0;
		vertical-align: top;
	}

	.woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions {
		margin-top: 2px;
	}

	.woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions::before {
		display: none;
	}

	.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table a.woocommerce-button {
		display: block;
		width: 100%;
		text-align: center;
		min-height: 44px;
	}

	.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table a.woocommerce-button:where(body:not(.wcdc-theme-buttons) *) {
		padding: 12px;
	}

	/*
	 * Les boutons de l'espace client passent en pleine largeur : chaque
	 * extension enveloppe le sien dans son propre bloc, ils s'empilent donc
	 * de toute façon.
	 */
	.woocommerce-account .woocommerce-MyAccount-content a.button,
	.woocommerce-account .woocommerce-MyAccount-content button.button {
		width: 100%;
	}

	/* Le bandeau de commande passe en colonne, total sous le numéro. */
	.wcdc-order-header {
		gap: 16px;
		padding: 16px;
	}

	.wcdc-order-header-total {
		text-align: left;
	}

	/* Les deux liens de pagination se partagent la largeur. */
	.woocommerce-account .woocommerce-pagination .woocommerce-button,
	.woocommerce-account .woocommerce-pagination a.button {
		flex: 1 1 auto;
	}

	/* Formulaires : une seule colonne. */
	.woocommerce-account .u-columns.col2-set {
		gap: 18px;
	}

	.woocommerce-account .woocommerce-form-login,
	.woocommerce-account .woocommerce-form-register,
	.woocommerce-account .woocommerce-ResetPassword {
		padding: 20px;
	}
}


@media (prefers-reduced-motion: reduce) {
	.woocommerce-account .woocommerce-MyAccount-navigation-link,
	.wcdc-card {
		transition: none;
	}
	.wcdc-card:hover {
		transform: none;
	}
}