/* ═══════════════════════════════════════════════════════════════════════
   ESPACE CLIENT — /mon-compte/

   Jusqu'ici cette zone n'était couverte par AUCUNE feuille de style : seuls
   l'en-tête et le pied de page étaient habillés, l'intérieur restait le rendu
   brut de WooCommerce — navigation en liste à puces, tableau gris, boutons
   ternes flottant dans une page vide (constaté le 2026-09-07).

   On reprend la charte du site : or #ffd17c, brun #42240c, crème #f9f5ee,
   Onest, pastilles à 30px. Deux colonnes sur ordinateur, empilées sur
   téléphone où le tableau se transforme en cartes.
   ═══════════════════════════════════════════════════════════════════════ */

/* Le thème parent plafonne son conteneur à 846px, ce qui étrangle une zone
   qui a besoin de deux colonnes. On l'élargit sur les seules pages du compte. */
.woocommerce-account .container { max-width: 1180px; }

.woocommerce-account .woocommerce {
	max-width: 1180px;
	margin: 0 auto;
	padding: 56px 24px 88px;
	font-family: 'Onest', sans-serif;
	color: #2c3235;
}

/* ── Disposition en deux colonnes ─────────────────────────────────────── */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
	display: grid;
	grid-template-columns: 268px minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

/* Le thème parent pose un « clearfix » sur .woocommerce : deux pseudo-éléments
   ::before et ::after avec un contenu vide. Inoffensifs en display:block, ils
   deviennent des ITEMS DE GRILLE dès qu'on passe en grid — le ::before occupait
   la première colonne, poussant la navigation dans la seconde et rejetant le
   contenu à la ligne suivante (constaté le 2026-09-08).

   WooCommerce fait flotter ses deux colonnes avec des largeurs en pourcentage,
   sans effet en grille mais qui écrasaient la taille des blocs : on les annule
   pour que les colonnes de la grille fassent foi. */
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after { display: none !important; }

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: auto;
}

/* ── Navigation latérale ──────────────────────────────────────────────── */
.woocommerce-account .woocommerce-MyAccount-navigation {
	background: #fff;
	border: 1px solid rgba(66, 36, 12, .1);
	border-radius: 18px;
	padding: 14px;
	position: sticky;
	top: 110px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;   /* les puces d'origine */
	margin: 0;
	padding: 0;
}

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

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 13px 18px;
	border-radius: 12px;
	color: #4b4f52;
	font-size: 15px;
	text-decoration: none;
	transition: background .18s ease, color .18s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background: #fdf6e9;
	color: #42240c;
}

/* Onglet courant : plein doré, comme les boutons du site. */
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: #ffd17c;
	color: #42240c;
	font-weight: 500;
}

/* La déconnexion se détache du reste. */
.woocommerce-account .woocommerce-MyAccount-navigation li--customer-logout {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid rgba(66, 36, 12, .1);
}

/* ── Panneau de contenu ───────────────────────────────────────────────── */
.woocommerce-account .woocommerce-MyAccount-content {
	background: #fff;
	border: 1px solid rgba(66, 36, 12, .1);
	border-radius: 18px;
	padding: 34px 36px;
	font-size: 15px;
	line-height: 1.65;
}

.woocommerce-account .woocommerce-MyAccount-content p { margin: 0 0 16px; }
.woocommerce-account .woocommerce-MyAccount-content p:last-child { margin-bottom: 0; }

.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
	font-size: 20px;
	font-weight: 500;
	color: #42240c;
	margin: 0 0 18px;
	letter-spacing: .2px;
}

/* ── Tableau des commandes ────────────────────────────────────────────── */
.woocommerce-account .woocommerce-orders-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.woocommerce-account .woocommerce-orders-table__header {
	text-align: left;
	padding: 0 14px 14px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: #8a7a68;
	border-bottom: 2px solid rgba(66, 36, 12, .12);
}

.woocommerce-account .woocommerce-orders-table__cell {
	padding: 20px 14px;
	border-bottom: 1px solid rgba(66, 36, 12, .08);
	vertical-align: middle;
}

.woocommerce-account .woocommerce-orders-table__row:last-child .woocommerce-orders-table__cell {
	border-bottom: 0;
}

.woocommerce-account .woocommerce-orders-table__row { transition: background .18s ease; }
.woocommerce-account .woocommerce-orders-table__row:hover { background: #fdfaf4; }

.woocommerce-account .woocommerce-orders-table__cell-order-number a {
	color: #42240c;
	font-weight: 500;
	text-decoration: none;
	border-bottom: 2px solid #ffd17c;
	padding-bottom: 1px;
}

.woocommerce-account .woocommerce-orders-table__cell-order-total { white-space: nowrap; }

/* État de la commande en pastille colorée, plutôt qu'un mot perdu dans une
   colonne : la couleur porte l'information avant la lecture. Le <span> est
   produit par cafeo_colonne_statut_commande() dans functions.php — le modèle
   WooCommerce n'expose pas ce texte autrement. */
.woocommerce-account .cafeo-statut {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 30px;
	font-size: 13px;
	line-height: 1.4;
	white-space: nowrap;
	background: #f1ece4;
	color: #5a4a38;
}

.woocommerce-account .cafeo-statut--processing,
.woocommerce-account .cafeo-statut--on-hold { background: #ffd17c; color: #42240c; }
.woocommerce-account .cafeo-statut--completed { background: #d8ecd4; color: #2f5d2a; }
.woocommerce-account .cafeo-statut--cancelled,
.woocommerce-account .cafeo-statut--failed,
.woocommerce-account .cafeo-statut--refunded { background: #f0dcdc; color: #7a2f2f; }

/* ── Boutons ──────────────────────────────────────────────────────────── */
.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-MyAccount-content button,
.woocommerce-account .woocommerce-MyAccount-content input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #ffd17c;
	color: #42240c;
	border: 0;
	border-radius: 30px;
	padding: 12px 28px;
	font-family: 'Onest', sans-serif;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background .2s ease, transform .12s ease;
}

.woocommerce-account .woocommerce-MyAccount-content .button:hover,
.woocommerce-account .woocommerce-MyAccount-content button:hover,
.woocommerce-account .woocommerce-MyAccount-content input[type="submit"]:hover {
	background: #f5c05f;
}

.woocommerce-account .woocommerce-MyAccount-content .button:active { transform: translateY(1px); }

/* Même piège que sur la grille principale, à deux endroits de plus : les blocs
   « deux colonnes » de WooCommerce (adresses, connexion/inscription) portent un
   clearfix en display:table. En grille il devient une case, décalant la première
   carte dans la colonne de droite et rejetant la seconde à la ligne. S'y ajoutent
   les largeurs en pourcentage de .col-1 / .col-2, plus spécifiques que les
   nôtres, qui écrasaient les cartes à 166px — d'où le texte à un mot par ligne
   (signalé par Valérie, 2026-09-08). */
.woocommerce-account .u-columns::before,
.woocommerce-account .u-columns::after,
.woocommerce-account .woocommerce-Addresses::before,
.woocommerce-account .woocommerce-Addresses::after { display: none !important; }

.woocommerce-account .u-column1,
.woocommerce-account .u-column2,
.woocommerce-account .col-1,
.woocommerce-account .col-2,
.woocommerce-account .woocommerce-Address {
	float: none !important;
	width: auto !important;
}

/* ── Adresses ─────────────────────────────────────────────────────────── */
.woocommerce-account .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 22px;
	margin-top: 8px;
}

.woocommerce-account .woocommerce-Address {
	background: #fdfaf4;
	border: 1px solid rgba(66, 36, 12, .1);
	border-radius: 14px;
	padding: 24px;
	width: auto;
	float: none;
}

.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 { margin-bottom: 12px; font-size: 17px; }

.woocommerce-account .woocommerce-Address address {
	font-style: normal;
	line-height: 1.8;
	color: #4b4f52;
	margin-bottom: 18px;
}

/* ── Formulaires ──────────────────────────────────────────────────────── */
.woocommerce-account .woocommerce-MyAccount-content label {
	display: block;
	font-size: 13px;
	letter-spacing: .4px;
	color: #6b5c47;
	margin-bottom: 6px;
}

.woocommerce-account .woocommerce-MyAccount-content input[type="text"],
.woocommerce-account .woocommerce-MyAccount-content input[type="email"],
.woocommerce-account .woocommerce-MyAccount-content input[type="tel"],
.woocommerce-account .woocommerce-MyAccount-content input[type="password"],
.woocommerce-account .woocommerce-MyAccount-content select {
	width: 100%;
	padding: 13px 16px;
	border: 1px solid rgba(66, 36, 12, .18);
	border-radius: 12px;
	font-family: 'Onest', sans-serif;
	font-size: 15px;
	background: #fff;
	color: #2c3235;
	transition: border-color .18s ease, box-shadow .18s ease;
}

.woocommerce-account .woocommerce-MyAccount-content input:focus,
.woocommerce-account .woocommerce-MyAccount-content select:focus {
	outline: 0;
	border-color: #ffd17c;
	box-shadow: 0 0 0 3px rgba(255, 209, 124, .35);
}

.woocommerce-account .woocommerce-MyAccount-content .form-row { margin-bottom: 20px; }

/* ── Messages WooCommerce ─────────────────────────────────────────────── */
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error {
	border-radius: 14px;
	border: 0;
	border-left: 4px solid #ffd17c;
	background: #fdf6e9;
	padding: 16px 20px;
	font-size: 15px;
	color: #42240c;
	list-style: none;
}

.woocommerce-account .woocommerce-error {
	border-left-color: #c0564f;
	background: #fbeceb;
	color: #7a2f2f;
}

/* ── Connexion et inscription (visiteur non identifié) ────────────────── */
.woocommerce-account .u-columns.col2-set {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 28px;
}

.woocommerce-account .u-columns:not(.woocommerce-Addresses) .u-column1,
.woocommerce-account .u-columns:not(.woocommerce-Addresses) .u-column2 {
	background: #fff;
	border: 1px solid rgba(66, 36, 12, .1);
	border-radius: 18px;
	padding: 32px 34px;
	width: auto;
	float: none;
}

.woocommerce-account .u-columns h2 {
	font-size: 22px;
	font-weight: 400;
	color: #42240c;
	margin: 0 0 22px;
	letter-spacing: .3px;
}

.woocommerce-account form.login,
.woocommerce-account form.register {
	border: 0;
	padding: 0;
	margin: 0;
	border-radius: 0;
}

.woocommerce-account form.login label,
.woocommerce-account form.register label {
	display: block;
	font-size: 13px;
	letter-spacing: .4px;
	color: #6b5c47;
	margin-bottom: 6px;
}

.woocommerce-account form.login input[type="text"],
.woocommerce-account form.login input[type="password"],
.woocommerce-account form.register input[type="text"],
.woocommerce-account form.register input[type="email"],
.woocommerce-account form.register input[type="password"] {
	width: 100%;
	padding: 13px 16px;
	border: 1px solid rgba(66, 36, 12, .18);
	border-radius: 12px;
	font-family: 'Onest', sans-serif;
	font-size: 15px;
	background: #fff;
}

.woocommerce-account form.login input:focus,
.woocommerce-account form.register input:focus {
	outline: 0;
	border-color: #ffd17c;
	box-shadow: 0 0 0 3px rgba(255, 209, 124, .35);
}

.woocommerce-account form.login .form-row,
.woocommerce-account form.register .form-row { margin-bottom: 18px; }

.woocommerce-account form.login button,
.woocommerce-account form.register button {
	background: #ffd17c;
	color: #42240c;
	border: 0;
	border-radius: 30px;
	padding: 13px 34px;
	font-family: 'Onest', sans-serif;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .2s ease;
}

.woocommerce-account form.login button:hover,
.woocommerce-account form.register button:hover { background: #f5c05f; }

.woocommerce-account .woocommerce-LostPassword {
	margin: 14px 0 0;
	font-size: 14px;
}

.woocommerce-account .woocommerce-LostPassword a {
	color: #8a6a2f;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.woocommerce-account .woocommerce-form-login__rememberme {
	font-size: 14px;
	color: #6b5c47;
}

/* ── Téléphones ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
	.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.woocommerce-account .woocommerce-MyAccount-navigation { position: static; }
	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
	}
	.woocommerce-account .woocommerce-MyAccount-navigation li a { padding: 10px 16px; font-size: 14px; }
	.woocommerce-account .woocommerce-MyAccount-navigation li--customer-logout {
		border-top: 0;
		padding-top: 0;
		margin-top: 0;
	}
}

@media (max-width: 640px) {
	.woocommerce-account .woocommerce { padding: 32px 18px 64px; }
	.woocommerce-account .woocommerce-MyAccount-content { padding: 24px 20px; }

	/* Le tableau devient une pile de cartes : chaque cellule reprend son
	   intitulé via l'attribut data-title que pose WooCommerce. */
	.woocommerce-account .woocommerce-orders-table thead { display: none; }
	.woocommerce-account .woocommerce-orders-table,
	.woocommerce-account .woocommerce-orders-table tbody,
	.woocommerce-account .woocommerce-orders-table__row { display: block; width: 100%; }

	.woocommerce-account .woocommerce-orders-table__row {
		border: 1px solid rgba(66, 36, 12, .12);
		border-radius: 14px;
		padding: 6px 16px;
		margin-bottom: 14px;
		background: #fdfaf4;
	}

	.woocommerce-account .woocommerce-orders-table__cell {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 16px;
		padding: 11px 0;
		border-bottom: 1px solid rgba(66, 36, 12, .08);
		text-align: right;
	}

	.woocommerce-account .woocommerce-orders-table__cell::before {
		content: attr(data-title);
		font-size: 12px;
		letter-spacing: 1.2px;
		text-transform: uppercase;
		color: #8a7a68;
		text-align: left;
	}

	.woocommerce-account .woocommerce-orders-table__row .woocommerce-orders-table__cell:last-child {
		border-bottom: 0;
	}
}

/* ── Onglet « Mes réservations » (panneau client Amelia) ─────────────── */
.woocommerce-account .cafeo-resa__titre { margin-bottom: 8px; }
.woocommerce-account .cafeo-resa__intro { color: #6b5c47; font-size: 14px; margin-bottom: 22px; }
.woocommerce-account .cafeo-resa__intro a { color: #8a6a2f; text-decoration: underline; text-underline-offset: 3px; }
/* Le panneau doit occuper toute la carte : Amelia lui donne sinon une largeur
   maximale et des marges de page. Onest partout, pas de couleur forcée —
   la Personnalisation Amelia garde la main (règle du projet). */
.woocommerce-account .cafeo-resa .amelia-v2-booking,
.woocommerce-account .cafeo-resa .amelia-app-booking { max-width: none !important; margin: 0 !important; font-family: 'Onest', sans-serif !important; }
.woocommerce-account .cafeo-resa .am-button, .woocommerce-account .cafeo-resa .el-button { border-radius: 30px !important; font-family: 'Onest', sans-serif !important; }