/* =========================================================
   MON COMPTE
   AG INFORMATIQUE 81 SHOP
========================================================= */


/* =========================================================
   RESET DU LAYOUT WOOCOMMERCE
========================================================= */

.woocommerce-account .woocommerce {
	display: grid !important;

	grid-template-columns:
		310px
		minmax(0, 1fr);

	gap: 38px;

	align-items: start;

	width: 100%;

	max-width: 100%;

	clear: both;
}

.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after {
	content: none !important;

	display: none !important;
}


/*
 * WooCommerce applique normalement :
 *
 * navigation = float:left + width:30%
 * contenu    = float:right + width:68%
 *
 * On neutralise tout ça.
 */

.woocommerce-account
.woocommerce-MyAccount-navigation {
	float: none !important;

	width: 100% !important;
	max-width: none !important;

	min-width: 0;

	margin: 0 !important;

	box-sizing: border-box;
}

.woocommerce-account
.woocommerce-MyAccount-content {
	float: none !important;

	width: 100% !important;
	max-width: none !important;

	min-width: 0;

	margin: 0 !important;

	box-sizing: border-box;
}


/* =========================================================
   NAVIGATION COMPTE
========================================================= */

.woocommerce-MyAccount-navigation {
	padding: 14px;

	border: 1px solid var(--color-border);
	border-radius: 18px;

	background: #ffffff;

	box-shadow:
		0 12px 35px
		rgba(11, 17, 24, 0.06);
}

.woocommerce-MyAccount-navigation ul {
	display: flex;

	flex-direction: column;

	gap: 6px;

	margin: 0;
	padding: 0;

	list-style: none;
}

.woocommerce-MyAccount-navigation li {
	margin: 0;
	padding: 0;
}

.woocommerce-MyAccount-navigation a {
	display: flex;

	align-items: center;

	width: 100%;

	min-height: 48px;

	padding: 12px 16px;

	border-radius: 11px;

	box-sizing: border-box;

	color: var(--color-dark);

	font-size: 0.95rem;
	font-weight: 700;

	text-decoration: none;

	transition:
		background 0.16s ease,
		color 0.16s ease;
}

.woocommerce-MyAccount-navigation a:hover,
.woocommerce-MyAccount-navigation a:focus-visible {
	background: var(--color-primary-soft);

	color: var(--color-primary);
}

.woocommerce-MyAccount-navigation
.is-active
a {
	background: var(--color-primary);

	color: #ffffff;
}

.woocommerce-MyAccount-navigation
.woocommerce-MyAccount-navigation-link--customer-logout
a {
	color: var(--color-error);
}

.woocommerce-MyAccount-navigation
.woocommerce-MyAccount-navigation-link--customer-logout
a:hover,
.woocommerce-MyAccount-navigation
.woocommerce-MyAccount-navigation-link--customer-logout
a:focus-visible {
	background: rgba(198, 40, 40, 0.08);

	color: var(--color-error);
}


/* =========================================================
   CONTENU PRINCIPAL
========================================================= */

.woocommerce-MyAccount-content {
	padding: 36px;

	border: 1px solid var(--color-border);
	border-radius: 18px;

	background: #ffffff;

	box-shadow:
		0 12px 35px
		rgba(11, 17, 24, 0.05);

	overflow: hidden;
}

.woocommerce-MyAccount-content > * {
	max-width: 100%;
}

.woocommerce-MyAccount-content > *:first-child {
	margin-top: 0;
}

.woocommerce-MyAccount-content > *:last-child {
	margin-bottom: 0;
}

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
	color: var(--color-dark);
}

.woocommerce-MyAccount-content p {
	max-width: 100%;

	color: var(--color-text-muted);

	line-height: 1.7;

	overflow-wrap: anywhere;
	word-break: normal;
}


/* =========================================================
   NOTICES WOOCOMMERCE
========================================================= */

.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error {
	position: relative;

	display: flex;

	align-items: center;
	justify-content: space-between;

	gap: 20px;

	width: 100%;

	min-height: 78px;

	margin: 0 0 28px;
	padding: 20px 22px;

	border: 1px solid var(--color-border);
	border-top: 3px solid var(--color-primary);
	border-radius: 15px;

	box-sizing: border-box;

	background: #ffffff;

	color: var(--color-text);

	box-shadow:
		0 10px 28px
		rgba(11, 17, 24, 0.04);

	list-style: none;
}


/* Suppression des icônes WooCommerce natives */

.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-info::before,
.woocommerce-account .woocommerce-error::before,
.woocommerce-account .woocommerce-message::after,
.woocommerce-account .woocommerce-info::after,
.woocommerce-account .woocommerce-error::after {
	content: none !important;

	display: none !important;
}

.woocommerce-account .woocommerce-message {
	border-top-color: var(--color-success);
}

.woocommerce-account .woocommerce-info {
	border-top-color: var(--color-primary);
}

.woocommerce-account .woocommerce-error {
	border-top-color: var(--color-error);
}

.woocommerce-account .woocommerce-message a,
.woocommerce-account .woocommerce-info a,
.woocommerce-account .woocommerce-error a {
	flex: 0 0 auto;
}


/* =========================================================
   BOUTONS
========================================================= */

.woocommerce-account .button,
.woocommerce-account button.button,
.woocommerce-account input.button {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	min-height: 46px;

	padding: 11px 18px;

	border: 1px solid var(--color-primary);
	border-radius: 9px;

	background: var(--color-primary);

	color: #ffffff;

	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 750;

	text-decoration: none;

	cursor: pointer;

	transition:
		background 0.16s ease,
		border-color 0.16s ease,
		color 0.16s ease;
}

.woocommerce-account .button:hover,
.woocommerce-account button.button:hover,
.woocommerce-account input.button:hover {
	border-color: var(--color-primary-dark);

	background: var(--color-primary-dark);

	color: #ffffff;
}


/* =========================================================
   TABLEAU DES COMMANDES
========================================================= */

.woocommerce-account
.woocommerce-orders-table {
	width: 100%;

	max-width: 100%;

	border-collapse: separate;
	border-spacing: 0;

	border: 1px solid var(--color-border);
	border-radius: 14px;

	overflow: hidden;

	background: #ffffff;
}

.woocommerce-account
.woocommerce-orders-table th,
.woocommerce-account
.woocommerce-orders-table td {
	padding: 15px 16px;

	border-bottom:
		1px solid
		var(--color-border);

	text-align: left;
	vertical-align: middle;
}

.woocommerce-account
.woocommerce-orders-table th {
	background:
		var(--color-background-alt);

	color:
		var(--color-dark);

	font-size: 0.78rem;
	font-weight: 800;

	text-transform: uppercase;

	letter-spacing: 0.04em;
}

.woocommerce-account
.woocommerce-orders-table td {
	color: var(--color-text);

	font-size: 0.9rem;
}

.woocommerce-account
.woocommerce-orders-table
tbody
tr:last-child
td {
	border-bottom: 0;
}


/* =========================================================
   ADRESSES
========================================================= */

.woocommerce-account
.woocommerce-Addresses {
	display: grid !important;

	grid-template-columns:
		repeat(
			2,
			minmax(0, 1fr)
		) !important;

	gap: 24px;

	width: 100%;

	margin-top: 28px;

	clear: both;
}

.woocommerce-account
.woocommerce-Addresses::before,
.woocommerce-account
.woocommerce-Addresses::after {
	content: none !important;

	display: none !important;
}


/*
 * WooCommerce ajoute aussi des classes u-column1/u-column2
 * avec float + width.
 */

.woocommerce-account
.woocommerce-Addresses
.u-column1,

.woocommerce-account
.woocommerce-Addresses
.u-column2,

.woocommerce-account
.woocommerce-Address {
	float: none !important;

	width: 100% !important;
	max-width: none !important;

	min-width: 0;

	margin: 0 !important;

	box-sizing: border-box;
}


.woocommerce-account
.woocommerce-Address {
	padding: 24px;

	border:
		1px solid
		var(--color-border);

	border-radius: 15px;

	background:
		var(--color-background-alt);
}


.woocommerce-account
.woocommerce-Address-title {
	display: flex;

	align-items: flex-start;
	justify-content: space-between;

	gap: 18px;

	width: 100%;

	margin-bottom: 18px;
}


.woocommerce-account
.woocommerce-Address-title h2,

.woocommerce-account
.woocommerce-Address-title h3 {
	min-width: 0;

	margin: 0;

	color: var(--color-dark);

	font-size: 1.05rem;

	overflow-wrap: anywhere;
}


.woocommerce-account
.woocommerce-Address-title a {
	flex: 0 0 auto;

	color: var(--color-primary);

	font-size: 0.82rem;
	font-weight: 700;

	text-decoration: none;
}


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


.woocommerce-account
.woocommerce-Address address {
	display: block;

	width: 100%;
	max-width: 100%;

	margin: 0;

	color: var(--color-text-muted);

	font-style: normal;

	line-height: 1.75;

	white-space: normal;

	overflow-wrap: anywhere;
	word-wrap: break-word;
	word-break: normal;

	box-sizing: border-box;
}


.woocommerce-account
.woocommerce-Address address *,

.woocommerce-account
.woocommerce-Address p,

.woocommerce-account
.woocommerce-Address span,

.woocommerce-account
.woocommerce-Address a {
	max-width: 100%;

	white-space: normal;

	overflow-wrap: anywhere;
	word-wrap: break-word;
}


/* =========================================================
   TEXTE INTRO DES ADRESSES
========================================================= */

.woocommerce-account
.woocommerce-MyAccount-content
> p {
	width: 100%;

	max-width: 100%;

	margin-right: 0;
	margin-left: 0;
}


/* =========================================================
   FORMULAIRES
========================================================= */

.woocommerce-account form {
	width: 100%;

	max-width: 100%;

	min-width: 0;
}

.woocommerce-account
.woocommerce-form-row {
	width: 100%;

	max-width: 100%;

	margin-bottom: 18px;
}

.woocommerce-account label {
	display: block;

	margin-bottom: 7px;

	color: var(--color-dark);

	font-size: 0.82rem;
	font-weight: 700;
}

.woocommerce-account
input.input-text,

.woocommerce-account
input[type="text"],

.woocommerce-account
input[type="email"],

.woocommerce-account
input[type="tel"],

.woocommerce-account
input[type="password"],

.woocommerce-account
select,

.woocommerce-account
textarea {
	width: 100%;
	max-width: 100%;

	min-height: 46px;

	padding: 11px 13px;

	border:
		1px solid
		var(--color-border);

	border-radius: 9px;

	background: #ffffff;

	color: var(--color-text);

	font: inherit;

	box-sizing: border-box;
}

.woocommerce-account textarea {
	min-height: 120px;

	resize: vertical;
}

.woocommerce-account input:focus,
.woocommerce-account select:focus,
.woocommerce-account textarea:focus {
	border-color:
		var(--color-primary);

	outline:
		3px solid
		rgba(
			8,
			104,
			215,
			0.12
		);

	outline-offset: 0;
}


/* =========================================================
   CONNEXION / INSCRIPTION
========================================================= */

.woocommerce-account
.u-columns {
	display: grid !important;

	grid-template-columns:
		repeat(
			2,
			minmax(0, 1fr)
		) !important;

	gap: 28px;

	width: 100%;

	clear: both;
}

.woocommerce-account
.u-columns::before,
.woocommerce-account
.u-columns::after {
	content: none !important;

	display: none !important;
}


.woocommerce-account
.u-columns
.u-column1,

.woocommerce-account
.u-columns
.u-column2 {
	float: none !important;

	width: 100% !important;
	max-width: none !important;

	min-width: 0;

	margin: 0 !important;

	padding: 28px;

	border:
		1px solid
		var(--color-border);

	border-radius: 16px;

	box-sizing: border-box;

	background: #ffffff;
}


/* =========================================================
   TÉLÉCHARGEMENTS
========================================================= */

.woocommerce-account
.woocommerce-MyAccount-downloads {
	width: 100%;

	max-width: 100%;

	border-collapse: collapse;
}

.woocommerce-account
.woocommerce-MyAccount-downloads th,
.woocommerce-account
.woocommerce-MyAccount-downloads td {
	padding: 14px;

	border-bottom:
		1px solid
		var(--color-border);

	text-align: left;
}


/* =========================================================
   LIENS
========================================================= */

.woocommerce-MyAccount-content
a:not(.button) {
	color:
		var(--color-primary);

	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.woocommerce-MyAccount-content
a:not(.button):hover {
	color:
		var(--color-primary-dark);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1050px) {

	.woocommerce-account
	.woocommerce {
		grid-template-columns:
			250px
			minmax(0, 1fr);

		gap: 26px;
	}

	.woocommerce-MyAccount-content {
		padding: 28px;
	}

}


@media (max-width: 780px) {

	.woocommerce-account
	.woocommerce {
		grid-template-columns: 1fr;

		gap: 24px;
	}

	.woocommerce-account
	.woocommerce-MyAccount-navigation,

	.woocommerce-account
	.woocommerce-MyAccount-content {
		width: 100% !important;
	}


	.woocommerce-MyAccount-navigation ul {
		display: grid;

		grid-template-columns:
			repeat(
				2,
				minmax(0, 1fr)
			);

		gap: 7px;
	}


	.woocommerce-account
	.woocommerce-Addresses {
		grid-template-columns:
			1fr !important;
	}


	.woocommerce-account
	.u-columns {
		grid-template-columns:
			1fr !important;
	}

}


@media (max-width: 560px) {

	.woocommerce-MyAccount-content {
		padding: 20px;
	}

	.woocommerce-MyAccount-navigation {
		padding: 10px;
	}

	.woocommerce-MyAccount-navigation ul {
		grid-template-columns: 1fr;
	}

	.woocommerce-account
	.woocommerce-message,

	.woocommerce-account
	.woocommerce-info,

	.woocommerce-account
	.woocommerce-error {
		flex-direction: column;

		align-items: stretch;

		gap: 14px;

		padding: 17px;
	}

	.woocommerce-account
	.woocommerce-message a,

	.woocommerce-account
	.woocommerce-info a,

	.woocommerce-account
	.woocommerce-error a {
		width: 100%;
	}

	.woocommerce-account
	.woocommerce-Address {
		padding: 19px;
	}

	.woocommerce-account
	.woocommerce-Address-title {
		flex-direction: column;

		gap: 8px;
	}

	.woocommerce-account
	.woocommerce-orders-table {
		display: block;

		overflow-x: auto;

		-webkit-overflow-scrolling: touch;
	}

}