/*
 * Isolation volontairement appuyée : cette page remplace entièrement la
 * mise en page WooCommerce/thème pour "Mon compte", donc on neutralise
 * les propriétés les plus susceptibles d'entrer en conflit (flottants,
 * marges héritées, tailles de police globales) avant de poser notre
 * propre mise en page.
 */
.vmd-shell,
.vmd-shell * {
	box-sizing: border-box;
}
html, body.vmd-shell-body {
	background: var(--vmd-shell-bg, #14161c) !important;
	margin: 0 !important;
	padding: 0 !important;
}
.vmd-shell {
	--vmd-shell-bg: #14161c;
	--vmd-shell-panel: #1d2029;
	--vmd-shell-text: #f3f3f4;
	--vmd-shell-muted: #9a9ea8;
	--vmd-shell-accent: #e0455a;
	background: var(--vmd-shell-bg) !important;
	color: var(--vmd-shell-text) !important;
	padding: 30px 20px;
	float: none !important;
	width: auto !important;
	max-width: none !important;
}
.vmd-shell-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 24px;
	align-items: start;
}

/* ============ Sidebar ============ */
.vmd-shell-sidebar {
	background: var(--vmd-shell-panel) !important;
	border-radius: 16px;
	padding: 20px;
	position: sticky;
	top: 20px;
}
.vmd-shell-logo {
	display: block;
	color: var(--vmd-shell-text) !important;
	text-decoration: none !important;
	font-weight: 700;
	font-size: 18px;
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 1px solid rgba(255,255,255,.08);
}
.vmd-shell-logo img { max-height: 40px; max-width: 100%; display: block; }
.vmd-shell-back { margin-top: 10px; border-top: 1px solid rgba(255,255,255,.08); padding-top: 14px; }

.vmd-shell-main { min-width: 0; }

/* ============ Entête ============ */
.vmd-shell-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	background: var(--vmd-shell-panel) !important;
	border-radius: 16px;
	padding: 16px 22px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}
.vmd-shell-title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--vmd-shell-text) !important;
}
.vmd-shell-topbar-right { display: flex; align-items: center; gap: 12px; }
.vmd-shell-plan-badge {
	font-size: 12px;
	font-weight: 600;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(255,255,255,.08);
	color: var(--vmd-shell-muted) !important;
}
.vmd-shell-plan-badge.is-active { background: rgba(47,191,113,.15); color: #2fbf71 !important; }
.vmd-shell-upgrade-btn {
	background: var(--vmd-shell-accent) !important;
	color: #fff !important;
	text-decoration: none !important;
	font-weight: 700;
	font-size: 13px;
	padding: 9px 18px;
	border-radius: 999px;
}

.vmd-shell-user {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 16px;
	margin-bottom: 12px;
	border-bottom: 1px solid rgba(255,255,255,.08);
}
.vmd-shell-user img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.vmd-shell-user strong { color: var(--vmd-shell-text) !important; font-size: 14px; }

.vmd-shell-nav { display: flex; flex-direction: column; gap: 2px; }
.vmd-shell-nav-link {
	display: block;
	padding: 10px 14px;
	border-radius: 10px;
	color: var(--vmd-shell-muted) !important;
	text-decoration: none !important;
	font-size: 14px;
	font-weight: 500;
}
.vmd-shell-nav-link:hover { background: rgba(255,255,255,.06); color: var(--vmd-shell-text) !important; }
.vmd-shell-nav-link.is-active {
	background: var(--vmd-shell-accent);
	color: #fff !important;
	font-weight: 600;
}

/* ============ Contenu ============ */
.vmd-shell-content {
	background: var(--vmd-shell-panel) !important;
	border-radius: 16px;
	padding: 26px;
	min-width: 0; /* évite tout débordement de grille (voir Hall of Fame) */
}
.vmd-shell-content .woocommerce-MyAccount-content { color: var(--vmd-shell-text) !important; }
.vmd-shell-content table.shop_table {
	width: 100%;
	color: var(--vmd-shell-text) !important;
	border-collapse: collapse;
}
.vmd-shell-content table.shop_table th,
.vmd-shell-content table.shop_table td {
	padding: 10px;
	border-bottom: 1px solid rgba(255,255,255,.08);
}
.vmd-shell-content a { color: var(--vmd-shell-accent) !important; }
/* Les boutons sont des <a>/<button> à fond plein : leur texte doit
   rester blanc, pas la couleur d'accent — sinon texte invisible sur
   fond de la même couleur (bug constaté). Spécificité volontairement
   plus élevée que la règle générale ci-dessus. */
.vmd-shell-content a.vmd-btn,
.vmd-shell-content a.vmd-quicklink,
.vmd-shell-content a.button,
.vmd-shell-content .button,
.vmd-shell-content input[type="submit"] {
	color: #fff !important;
}
.vmd-shell-content .button,
.vmd-shell-content input[type="submit"] {
	background: var(--vmd-shell-accent) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 8px !important;
	padding: 10px 18px !important;
	cursor: pointer;
}
.vmd-shell-content input[type="text"],
.vmd-shell-content input[type="email"],
.vmd-shell-content input[type="password"],
.vmd-shell-content input[type="tel"],
.vmd-shell-content select,
.vmd-shell-content textarea {
	background: rgba(255,255,255,.06) !important;
	border: 1px solid rgba(255,255,255,.2) !important;
	color: var(--vmd-shell-text) !important;
	border-radius: 8px !important;
	padding: 9px 12px !important;
}
.vmd-shell-content .woocommerce-message,
.vmd-shell-content .woocommerce-error,
.vmd-shell-content .woocommerce-info {
	background: var(--vmd-shell-panel) !important;
	color: var(--vmd-shell-text) !important;
	border-top-color: var(--vmd-shell-accent) !important;
	border-radius: 10px;
	padding: 14px 18px !important;
	list-style: none !important;
}

/* ============ Visiteur non connecté ============ */
.vmd-shell-guest { display: flex; justify-content: center; padding: 60px 20px; }
.vmd-shell-inner-guest {
	max-width: 420px;
	width: 100%;
	background: var(--vmd-shell-panel) !important;
	border-radius: 16px;
	padding: 30px;
}
.vmd-shell-inner-guest input[type="text"],
.vmd-shell-inner-guest input[type="password"] {
	width: 100% !important;
	background: rgba(255,255,255,.06) !important;
	border: 1px solid rgba(255,255,255,.2) !important;
	color: var(--vmd-shell-text) !important;
	border-radius: 8px !important;
	padding: 10px 12px !important;
	margin-bottom: 12px !important;
}
.vmd-shell-inner-guest .button {
	background: var(--vmd-shell-accent) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 8px !important;
	padding: 10px 20px !important;
}

/* ============ Mobile ============ */
@media (max-width: 900px) {
	.vmd-shell-inner { grid-template-columns: 1fr; }
	.vmd-shell-sidebar { position: static; }
	.vmd-shell-nav { flex-direction: row; flex-wrap: wrap; }
	.vmd-shell-nav-link { flex: 1 1 auto; text-align: center; }
}

/* ============ Mise en page du contenu ============
 * WooCommerce met en page "Mon compte" sur deux colonnes flottantes
 * dans sa propre feuille de style :
 *
 *   .woocommerce-MyAccount-navigation { float: left;  width: 30%; }
 *   .woocommerce-MyAccount-content    { float: right; width: 68%; }
 *
 * Notre interface a déjà sa barre latérale, donc ces règles produisent
 * deux défauts d'un coup, tous deux visibles sur ordinateur uniquement
 * (en dessous de 768px WooCommerce annule lui-même les flottants) :
 *
 *   1. le contenu est décalé vers la droite et ne fait que ~68% de large ;
 *   2. étant flottant, il sort du flux : .vmd-shell-content n'a plus
 *      aucun enfant dans le flux, sa hauteur se réduit à ses marges
 *      internes et il se dessine comme une barre vide sous l'entête,
 *      le contenu débordant en dehors du cadre.
 *
 * On remet donc le contenu dans le flux, sur toute la largeur, et on
 * ajoute un clearfix au conteneur pour absorber tout autre flottant que
 * le thème ou une extension viendrait à poser.
 */
.vmd-shell .woocommerce-MyAccount-content {
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}
.vmd-shell-content::after {
	content: "";
	display: table;
	clear: both;
}

/* ============ Barres vides parasites ============
 * Notre interface fournit déjà son entête et sa navigation latérale :
 * tout conteneur vide hérité de WooCommerce ou du thème (navigation
 * "Mon compte" en doublon, enveloppe de notifications sans notification)
 * est neutralisé ici.
 */
.vmd-shell .woocommerce-MyAccount-navigation,
.vmd-shell .woocommerce-MyAccount-navigation-wrapper,
.vmd-shell .woocommerce-notices-wrapper:empty,
.vmd-shell-main > *:empty,
.vmd-shell-content > *:empty,
.vmd-shell-content .woocommerce-MyAccount-content > *:empty,
.vmd-shell-content .woocommerce:empty,
.vmd-shell-content .woocommerce > *:empty {
	display: none !important;
}

/* =====================================================================
 * Connexion et inscription (v3.1)
 * WooCommerce empile ses deux colonnes dans un conteneur étroit, et les
 * widgets anti-robot ont une largeur fixe de 302 px : sur la colonne de
 * gauche ils débordaient sur celle de droite. On repasse en grille
 * fluide avec un espacement suffisant, et on autorise le widget à se
 * mettre à l'échelle.
 * ===================================================================== */
.vmd-shell-guest .vmd-shell-inner-guest {
	width: min(1000px, 100%);
	margin: 0 auto;
	padding: 40px 20px 60px;
}
.vmd-shell-guest .u-columns,
.vmd-shell-guest .woocommerce {
	width: 100% !important;
	float: none !important;
}
.vmd-shell-guest .u-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 26px;
	align-items: start;
}
.vmd-shell-guest .u-column1,
.vmd-shell-guest .u-column2,
.vmd-shell-guest .col-1,
.vmd-shell-guest .col-2 {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	margin: 0 !important;
	background: var(--vmd-panel, #1b1e26);
	border: 1px solid rgba(255,255,255,.1);
	border-radius: 16px;
	padding: 28px 26px 30px;
	box-sizing: border-box;
	overflow: hidden; /* le widget anti-robot ne déborde plus du cadre */
}
.vmd-shell-guest h2 {
	margin: 0 0 18px;
	font-size: 20px;
	color: var(--vmd-text) !important;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(255,255,255,.1);
}
.vmd-shell-guest .form-row { margin: 0 0 16px; padding: 0; float: none; width: 100%; }
.vmd-shell-guest label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--vmd-text) !important;
}
.vmd-shell-guest input[type="text"],
.vmd-shell-guest input[type="email"],
.vmd-shell-guest input[type="password"],
.vmd-shell-guest input[type="tel"] {
	width: 100% !important;
	box-sizing: border-box;
	background: rgba(255,255,255,.06) !important;
	border: 1px solid rgba(255,255,255,.18) !important;
	color: var(--vmd-text) !important;
	border-radius: 10px !important;
	padding: 12px 14px !important;
	font-size: 14px;
	line-height: 1.4;
	height: auto !important;
}
.vmd-shell-guest input:focus {
	border-color: var(--vmd-accent) !important;
	outline: none;
}
.vmd-shell-guest .password-input { display: block; width: 100%; position: relative; }
.vmd-shell-guest .show-password-input { top: 12px; right: 12px; }

.vmd-shell-guest button[type="submit"],
.vmd-shell-guest .woocommerce-button,
.vmd-shell-guest .button {
	width: 100%;
	background: var(--vmd-accent) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 10px !important;
	padding: 13px 20px !important;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	margin-top: 4px;
}
.vmd-shell-guest button[type="submit"]:hover { filter: brightness(1.08); }

.vmd-shell-guest .woocommerce-form-login__rememberme,
.vmd-shell-guest .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 400;
	font-size: 13px;
	color: var(--vmd-text-muted) !important;
}
.vmd-shell-guest .woocommerce-form__label-for-checkbox input { margin: 0; }
.vmd-shell-guest .woocommerce-LostPassword {
	margin: 14px 0 0;
	font-size: 13px;
}
.vmd-shell-guest .woocommerce-privacy-policy-text {
	font-size: 12px;
	color: var(--vmd-text-muted) !important;
	line-height: 1.6;
}

/* Les widgets anti-robot font 302 px de large et ne se redimensionnent
   pas seuls : on les met à l'échelle du conteneur sur les écrans
   étroits, faute de quoi ils débordent. */
.vmd-shell-guest .g-recaptcha,
.vmd-shell-guest .cf-turnstile,
.vmd-shell-guest [class*="captcha"] {
	margin: 4px 0 16px;
	max-width: 100%;
}
@media (max-width: 400px) {
	.vmd-shell-guest .g-recaptcha,
	.vmd-shell-guest .cf-turnstile {
		transform: scale(.85);
		transform-origin: 0 0;
		height: 65px;
	}
}

.vmd-shell-guest .woocommerce-error,
.vmd-shell-guest .woocommerce-message,
.vmd-shell-guest .woocommerce-info {
	border-radius: 12px;
	margin-bottom: 20px;
	list-style: none;
}

/* ---- Connexion sociale (Telegram) et mot de passe oublié ---- */
.vmd-social-login {
	display: flex;
	justify-content: center;
	margin-bottom: 18px;
}
.vmd-social-login #wptelegram-login-wrap .wptelegram-login-or { display: none; }
.vmd-social-sep {
	position: relative;
	text-align: center;
	margin: 0 0 24px;
	color: var(--vmd-text-muted) !important;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .1em;
}
.vmd-social-sep::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 1px;
	background: rgba(255,255,255,.12);
}
.vmd-social-sep span {
	position: relative;
	background: var(--vmd-bg, #12141a);
	padding: 0 14px;
}

/* Le formulaire de mot de passe oublié est seul : une colonne centrée
   plutôt que la grille à deux cartes. */
.vmd-guest-single {
	max-width: 460px;
	margin: 0 auto;
	background: var(--vmd-panel, #1b1e26);
	border: 1px solid rgba(255,255,255,.1);
	border-radius: 16px;
	padding: 28px 26px 30px;
}
.vmd-guest-single p { color: var(--vmd-text-muted) !important; font-size: 13px; }
.vmd-guest-single label { color: var(--vmd-text) !important; }
.vmd-guest-back { margin: 18px 0 0; text-align: center; }