/**
 * CRYOFAST PLUNGE — Mon compte (My Account WooCommerce).
 *
 * Refonte LUXE / premium : sobriété, respiration, micro-interactions
 * discrètes, hiérarchie typographique soignée. Esprit « concierge privé »
 * pour une clientèle haut de gamme (bains froids et saunas à 10–15K €).
 *
 * Charte stricte :
 *   - Navy (#1B3F72) en accent (jamais en grand bloc).
 *   - Cream (#F7F4F0) en fond ambiant.
 *   - Cormorant Garamond pour les titres (italique discret).
 *   - Outfit pour le corps.
 *   - Ombres très douces, bordures fines, transitions 150–250ms.
 *
 * Tout est scopé sous `.cf-account*` ou les classes WC officielles. Aucun
 * impact en dehors des pages My Account. Enqueue conditionnel via
 * inc/enqueue.php + cryofast_myaccount_is_account_context().
 *
 * @package Cryofast
 * @author  Snazzy Digital Agency
 */

/* ════════════════════════════════════════════════════════════════════
 * 0. WRAPPER GLOBAL + TYPO HÉRITAGE
 * ════════════════════════════════════════════════════════════════════ */

.cf-account,
body.woocommerce-account .entry-content,
body.woocommerce-account .site-main {
	background: var(--cream);
	color: var(--charcoal);
}

/* ╔══════════════════════════════════════════════════════════════════╗
 * ║ OFFSET HEADER v0.12.13 — CEINTURE + BRETELLES + PARACHUTE       ║
 * ║                                                                  ║
 * ║ J'attaque sur DEUX cibles différentes avec des selectors multi- ║
 * ║ niveaux. Si UNE des deux marche, ça suffit. Au pire on a un peu ║
 * ║ trop d'espace (préférable au chevauchement header).              ║
 * ║                                                                  ║
 * ║ Cible 1 — .entry-content (le conteneur WP de la page)           ║
 * ║ Cible 2 — .cf-account (mon wrapper)                              ║
 * ║                                                                  ║
 * ║ Math attendue (avec les DEUX qui s'appliquent) :                 ║
 * ║   Desktop : 52 (.sec) + 40 (entry-content) + 60 (cf-account)    ║
 * ║           = 152px d'offset (90px clearance/header 62px)         ║
 * ║   Mobile  : 36 + 30 + 40 = 106px (44px clearance)               ║
 * ║                                                                  ║
 * ║ Si UNE SEULE des cibles applique : ~100px d'offset → toujours OK║
 * ╚══════════════════════════════════════════════════════════════════╝ */

/* v0.12.14 — padding-top RÉDUIT (le bug `<header>` étant résolu, on n'a
   plus besoin d'autant d'offset). Juste de quoi clear le header propre.
   Total visuel = .sec article 52px + 30px = 82px (clearance 20px). */
.cf-account,
body.woocommerce-account .cf-account,
body.cf-account-page .cf-account,
body.cf-order-tracking-page .cf-account,
.entry-content .cf-account {
	padding-top: 40px !important;
}
@media (max-width: 600px) {
	.cf-account,
	body.woocommerce-account .cf-account,
	body.cf-account-page .cf-account,
	body.cf-order-tracking-page .cf-account,
	.entry-content .cf-account {
		padding-top: 30px !important;
	}
}

/* Annule tout margin-top stale d'un ancien inline (HTML caché). */
.cf-account,
body .cf-account,
body.woocommerce-account .cf-account,
body.cf-account-page .cf-account {
	margin-top: 0 !important;
}

/* ── .cf-account wrapper (v0.12.12) ──
   L'OFFSET HEADER est géré par padding-top sur .entry-content (cf.
   bloc ci-dessus). Ici, juste max-width + margins horizontaux + paddings
   latéraux. Pas de margin-top, pas de padding-top. */
.cf-account {
	max-width: 1240px;
	margin: 0 auto;
	padding-top: 0;
	padding-bottom: 72px;
	padding-left: 24px;
	padding-right: 24px;
	font-family: var(--font-body);
	color: var(--charcoal);
	line-height: 1.55;
	box-sizing: border-box;
}
@media (min-width: 768px) {
	.cf-account {
		padding-left: 48px;
		padding-right: 48px;
	}
}
@media (max-width: 600px) {
	.cf-account {
		padding-left: 16px;
		padding-right: 16px;
		padding-bottom: 44px;
	}
}

/* ── NE PAS TOUCHER AU THÈME (v0.12.6) ──
   On NE reset PLUS l'article `.sec` ni `.site-main` ni `.entry-content`.
   Le thème garde son layout intact. L'offset sous le header est posé
   directement INLINE sur chaque wrapper `.cf-account` (style="padding-top:X")
   dans les templates → impossible à overrider et sans aucun impact sur
   le reste du site.
   Seule règle conservée : masquer le titre de page natif (h1.entry-title)
   pour ne pas doublonner avec nos hero Cormorant. */
body.cf-account-page .entry-header,
body.cf-account-page .page-title,
body.cf-account-page .entry-content > h1.entry-title,
body.woocommerce-account .entry-header,
body.woocommerce-account .page-title,
body.woocommerce-account .entry-content > h1.entry-title {
	display: none !important;
}

/* ════════════════════════════════════════════════════════════════════
 * 1. EN-TÊTE DE PAGE (dashboard wrapper)
 * ════════════════════════════════════════════════════════════════════ */

.cf-account-header {
	margin-bottom: 28px;
	max-width: 720px;
}
.cf-account-eyebrow {
	font-family: var(--font-body);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: var(--taupe);
	margin-bottom: 14px;
}
.cf-account-title {
	font-family: var(--font-titles);
	font-size: clamp(34px, 4.2vw, 54px);
	font-weight: 300;
	line-height: 1.04;
	letter-spacing: -0.6px;
	color: var(--charcoal);
	margin: 0 0 16px;
}
.cf-account-title em {
	font-style: italic;
	color: var(--navy);
	font-weight: 400;
}
.cf-account-title-sm { font-size: clamp(24px, 2.6vw, 32px); }

.cf-account-sub {
	font-size: 14px;
	line-height: 1.7;
	color: var(--warm-gray);
	max-width: 620px;
	margin: 0;
	font-weight: 300;
}
.cf-account-link {
	color: var(--navy);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	letter-spacing: 0.2px;
	transition: color 0.2s ease;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.cf-account-link:hover {
	color: var(--navy-d);
}

/* ════════════════════════════════════════════════════════════════════
 * 2. AUTH (login / register / lost-password) — carte centrée premium
 * ════════════════════════════════════════════════════════════════════ */

.cf-account-shell-auth {
	display: grid;
	gap: 32px;
	max-width: 1000px;
	margin: 0 auto;
}
.cf-account-shell-auth.has-register {
	grid-template-columns: 1fr 1fr;
}
.cf-account-shell-auth.login-only {
	grid-template-columns: minmax(0, 520px);
	justify-content: center;
}
@media (max-width: 880px) {
	.cf-account-shell-auth.has-register { grid-template-columns: 1fr; }
}

/* Card auth premium : ombre ultra-douce, bordure ultra-fine, padding aéré. */
.cf-account-card {
	background: #fff;
	border: 1px solid rgba(184, 175, 164, 0.32);
	border-radius: 16px;
	padding: 36px 32px;
	box-shadow:
		0 1px 0 rgba(44, 42, 39, 0.02),
		0 18px 48px -16px rgba(44, 42, 39, 0.08);
	transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.cf-account-card:hover {
	box-shadow:
		0 1px 0 rgba(44, 42, 39, 0.02),
		0 22px 56px -14px rgba(27, 63, 114, 0.12);
}
.cf-account-card .cf-account-eyebrow { margin-bottom: 10px; }
.cf-account-card .cf-account-title {
	font-size: clamp(26px, 2.8vw, 36px);
	margin-bottom: 10px;
}
.cf-account-card .cf-account-sub { margin-bottom: 28px; }

.cf-account-footer-link {
	margin-top: 22px;
	font-size: 13px;
	text-align: center;
}
.cf-account-footer-link .cf-account-link {
	color: var(--warm-gray);
	font-weight: 500;
}
.cf-account-footer-link .cf-account-link:hover { color: var(--charcoal); }

@media (max-width: 600px) {
	.cf-account-card { padding: 32px 22px; }
}

/* ════════════════════════════════════════════════════════════════════
 * 3. FORMULAIRES — inputs + boutons charte raffinés
 * ════════════════════════════════════════════════════════════════════ */

.cf-form,
.woocommerce-MyAccount-content form {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 0;
}

.cf-form-field,
.woocommerce-MyAccount-content form .form-row,
.woocommerce-MyAccount-content form p.form-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0;
}

.cf-form-field label,
.woocommerce-MyAccount-content form .form-row label,
.woocommerce-MyAccount-content form p.form-row label {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--taupe);
	margin-bottom: 2px;
}
.cf-req,
.woocommerce-MyAccount-content form .required {
	color: var(--navy);
	font-weight: 600;
	text-decoration: none;
}

/* Inputs premium Apple-like : padding généreux, bordure très fine,
   focus avec halo navy doux. */
.cf-form input[type="text"],
.cf-form input[type="email"],
.cf-form input[type="tel"],
.cf-form input[type="password"],
.cf-form input[type="number"],
.cf-form select,
.cf-form textarea,
.woocommerce-MyAccount-content form input[type="text"],
.woocommerce-MyAccount-content form input[type="email"],
.woocommerce-MyAccount-content form input[type="tel"],
.woocommerce-MyAccount-content form input[type="password"],
.woocommerce-MyAccount-content form input[type="number"],
.woocommerce-MyAccount-content form input[type="url"],
.woocommerce-MyAccount-content form select,
.woocommerce-MyAccount-content form textarea {
	width: 100%;
	background: #fff;
	border: 1px solid rgba(184, 175, 164, 0.5);
	border-radius: 7px;
	padding: 14px 16px;
	color: var(--charcoal);
	font-size: 14px;
	font-family: var(--font-body);
	font-weight: 400;
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
	box-sizing: border-box;
	line-height: 1.4;
	-webkit-appearance: none;
	appearance: none;
}
.cf-form input:hover,
.cf-form select:hover,
.cf-form textarea:hover,
.woocommerce-MyAccount-content form input:hover,
.woocommerce-MyAccount-content form select:hover,
.woocommerce-MyAccount-content form textarea:hover {
	border-color: rgba(27, 63, 114, 0.3);
}
.cf-form input:focus,
.cf-form select:focus,
.cf-form textarea:focus,
.woocommerce-MyAccount-content form input:focus,
.woocommerce-MyAccount-content form select:focus,
.woocommerce-MyAccount-content form textarea:focus {
	border-color: var(--navy);
	box-shadow: 0 0 0 4px rgba(27, 63, 114, 0.08);
	background: #fff;
}
.cf-form input::placeholder,
.woocommerce-MyAccount-content form input::placeholder {
	color: rgba(184, 175, 164, 0.85);
	font-weight: 300;
}
.woocommerce-MyAccount-content form textarea {
	resize: vertical;
	min-height: 120px;
}

/* Checkbox « se souvenir de moi » + ligne lien droit. */
.cf-form-row-inline {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
	margin: 6px 0 4px;
	flex-wrap: wrap;
}
.cf-form-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--charcoal);
	cursor: pointer;
	font-weight: 400;
}
.cf-form-checkbox input[type="checkbox"] {
	accent-color: var(--navy);
	width: 16px;
	height: 16px;
	margin: 0;
}

.cf-form-info,
.cf-form-legal {
	font-size: 12px;
	color: var(--warm-gray);
	line-height: 1.6;
	margin: 0;
	font-weight: 300;
}

.cf-form-actions { margin-top: 22px; }

/* ── Boutons charte ── */
.cf-btn,
.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content form button[type="submit"],
.woocommerce-MyAccount-content form .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 26px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
	font-family: var(--font-body);
	letter-spacing: 0.3px;
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
	line-height: 1.2;
	box-sizing: border-box;
	min-height: 48px;
}
/* Bug critique « boutons gris » (v0.12.4).
   Cause : WC native pose `.woocommerce button.button { background:#ebe9eb }`
   (gris) en specificity 0,2,1, plus haute que mon `.cf-btn-primary` (0,1,0).
   Solution : sélecteurs sur-spécifiques + !important sur background/color/
   border. Couvre TOUS les boutons d'action des formulaires compte :
   login, register, save_address, save_account_details, wc_reset_password,
   track, et tout bouton `.cf-btn-primary` n'importe où sur les pages compte. */
.cf-btn-primary,
.cf-form .cf-btn-primary,
.cf-account button.cf-btn-primary,
.cf-account .cf-btn.cf-btn-primary,
body.cf-account-page button.cf-btn-primary,
body.cf-account-page .cf-btn.cf-btn-primary,
body.woocommerce-account button.cf-btn-primary,
body.woocommerce-account .cf-btn.cf-btn-primary,
body.woocommerce-account .woocommerce button.button.cf-btn-primary,
body.cf-account-page .woocommerce button.button.cf-btn-primary,
body.cf-account-page form button[name="login"],
body.cf-account-page form button[name="register"],
body.cf-account-page form button[name="save_address"],
body.cf-account-page form button[name="save_account_details"],
body.cf-account-page form button[name="track"],
body.cf-order-tracking-page form button[name="track"],
body.cf-account-page form button[value="Réinitialiser le mot de passe"],
body.cf-account-page button[name="wc_reset_password"],
.woocommerce-MyAccount-content form button[type="submit"],
.woocommerce-MyAccount-content .button:not(.cf-btn-secondary):not(.delete):not(.button--secondary) {
	background: var(--navy) !important;
	background-color: var(--navy) !important;
	color: #fff !important;
	border: 1px solid var(--navy) !important;
	width: 100% !important;
	box-shadow: 0 1px 0 rgba(44, 42, 39, 0.04), 0 6px 18px rgba(27, 63, 114, 0.16) !important;
	font-family: var(--font-body) !important;
	font-weight: 600 !important;
	letter-spacing: 0.3px !important;
	min-height: 48px !important;
	padding: 14px 26px !important;
	border-radius: 6px !important;
	cursor: pointer !important;
	text-decoration: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
	text-shadow: none !important;
	text-transform: none !important;
	float: none !important;
}
.cf-btn-primary:hover,
.cf-account button.cf-btn-primary:hover,
.cf-account .cf-btn.cf-btn-primary:hover,
body.cf-account-page button.cf-btn-primary:hover,
body.cf-account-page .cf-btn.cf-btn-primary:hover,
body.cf-account-page form button[name="login"]:hover,
body.cf-account-page form button[name="register"]:hover,
body.cf-account-page form button[name="save_address"]:hover,
body.cf-account-page form button[name="save_account_details"]:hover,
body.cf-account-page form button[name="track"]:hover,
body.cf-order-tracking-page form button[name="track"]:hover,
.woocommerce-MyAccount-content form button[type="submit"]:hover {
	background: var(--navy-d) !important;
	background-color: var(--navy-d) !important;
	border-color: var(--navy-d) !important;
	color: #fff !important;
	transform: translateY(-1px);
	box-shadow: 0 1px 0 rgba(44, 42, 39, 0.04), 0 10px 24px rgba(27, 63, 114, 0.22) !important;
}
.cf-btn-secondary {
	background: #fff;
	color: var(--charcoal);
	border-color: rgba(44, 42, 39, 0.18);
	width: auto;
}
.cf-btn-secondary:hover {
	border-color: var(--charcoal);
	background: var(--cream);
	color: var(--charcoal);
}
.cf-btn-sm {
	padding: 9px 16px;
	min-height: 38px;
	font-size: 12px;
}
.cf-btn-inline { width: auto; }

/* ════════════════════════════════════════════════════════════════════
 * 4. LAYOUT DASHBOARD — 2 colonnes premium
 * ════════════════════════════════════════════════════════════════════ */

/* Bug 1+2 (v0.12.3) — sidebar élargie à 300px pour que les libellés
   « Tableau de bord », « Téléchargements », « Moyens de paiement »,
   « Détails du compte » tiennent sur UNE seule ligne (gap réduit, padding
   item resserré ci-dessous). */
.cf-account-dashboard .cf-account-shell {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	gap: 32px;
	align-items: flex-start;
	width: 100%;
}
@media (max-width: 880px) {
	.cf-account-dashboard .cf-account-shell {
		grid-template-columns: 1fr;
		gap: 18px;
	}
}

/* Filet de sécurité :has() pour la structure native WC (sans notre wrapper). */
@supports selector(:has(*)) {
	body.cf-account-page .woocommerce:has(> .woocommerce-MyAccount-navigation):has(> .woocommerce-MyAccount-content) {
		display: grid;
		grid-template-columns: 300px minmax(0, 1fr);
		gap: 32px;
		align-items: flex-start;
		width: 100%;
		float: none;
	}
	@media (max-width: 880px) {
		body.cf-account-page .woocommerce:has(> .woocommerce-MyAccount-navigation):has(> .woocommerce-MyAccount-content) {
			grid-template-columns: 1fr;
			gap: 18px;
		}
	}
}

/* Reset des floats WC natifs. */
body.cf-account-page .woocommerce-MyAccount-navigation,
body.cf-account-page .woocommerce-MyAccount-content {
	float: none !important;
	width: auto !important;
}

/* ════════════════════════════════════════════════════════════════════
 * 5. SIDEBAR — « membership card » premium
 * ════════════════════════════════════════════════════════════════════ */

/* Bug 1 (v0.12.3) — sidebar restructurée verticalement :
   wrapper flex-column → profil en haut, séparateur, menu en bas.
   Plus de chevauchement / flottement central. */
.cf-account-nav {
	background: #fff;
	border: 1px solid var(--bsand);
	border-radius: 14px;
	padding: 18px 16px;
	box-shadow:
		0 1px 0 rgba(44, 42, 39, 0.02),
		0 12px 32px rgba(44, 42, 39, 0.04);
	min-width: 0;
	position: sticky;
	top: calc(var(--header-height, 62px) + 20px);
	box-sizing: border-box;
}
.cf-account-nav-wrap {
	display: flex;
	flex-direction: column;
	gap: 0;
	min-width: 0;
}
@media (max-width: 880px) {
	.cf-account-nav {
		position: static;
		top: auto;
	}
}

/* ── En-tête « membership » : monogramme + nom + ancienneté ──
   Disposition stricte : ligne 1 (monogramme + nom/ancienneté à droite),
   pas d'overflow possible, séparateur sous le bloc. */
.cf-account-id {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 4px 4px 18px;
	margin: 0 0 14px;
	border-bottom: 1px solid var(--bsand);
	min-width: 0;
}
.cf-account-id-monogram {
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--navy) 0%, var(--navy-d) 100%);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-titles);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.5px;
	box-shadow: 0 4px 12px rgba(27, 63, 114, 0.22);
}
.cf-account-id-monogram span {
	transform: translateY(-1px);
}
.cf-account-id-meta {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1 1 auto;
}
.cf-account-id-name {
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	color: var(--charcoal);
	letter-spacing: 0.1px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.2;
}
.cf-account-id-since {
	font-size: 10px;
	color: var(--taupe);
	letter-spacing: 1.1px;
	text-transform: uppercase;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.2;
}

/* ── Toggle mobile ── */
.cf-account-nav-toggle {
	display: none;
	width: 100%;
	background: transparent;
	border: none;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	color: var(--charcoal);
	padding: 12px 6px;
	cursor: pointer;
	justify-content: space-between;
	align-items: center;
	letter-spacing: 0.8px;
	text-transform: uppercase;
}
.cf-account-nav-toggle svg {
	width: 12px;
	height: 8px;
	transition: transform 0.2s ease;
}
.cf-account-nav-toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}
@media (max-width: 880px) {
	.cf-account-nav-toggle {
		display: inline-flex;
	}
	.cf-account-menu {
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.3s ease;
	}
	.cf-account-nav-toggle[aria-expanded="true"] + .cf-account-menu {
		max-height: 800px;
	}
}

/* ── Menu items ── */
.cf-account-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.cf-account-menu-item {
	position: relative;
}
/* Bug 2 (v0.12.3) — items sur 1 ligne :
   - padding resserré (10px 12px),
   - gap 10px (au lieu de 12),
   - white-space: nowrap sur le label,
   - taille icône 16px (au lieu de 18) → libère ~4px par item. */
.cf-account-menu-item a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 8px;
	color: var(--charcoal);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	letter-spacing: 0.1px;
	transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
	position: relative;
	white-space: nowrap;
	overflow: hidden;
}
.cf-account-menu-accent {
	position: absolute;
	left: 3px;
	top: 50%;
	transform: translateY(-50%) scaleY(0);
	transform-origin: center;
	width: 3px;
	height: 20px;
	border-radius: 2px;
	background: var(--navy);
	transition: transform 0.25s ease;
	pointer-events: none;
}
.cf-account-menu-item a:hover {
	background: rgba(247, 244, 240, 0.7);
	color: var(--navy);
	padding-left: 16px;
}
.cf-account-menu-item.is-active a,
.cf-account-menu-item.is-current a {
	background: rgba(27, 63, 114, 0.06);
	color: var(--navy);
	font-weight: 600;
	padding-left: 16px;
}
.cf-account-menu-item.is-active .cf-account-menu-accent,
.cf-account-menu-item.is-current .cf-account-menu-accent {
	transform: translateY(-50%) scaleY(1);
}

.cf-account-menu-ico {
	display: inline-flex;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: currentColor;
	opacity: 0.75;
}
.cf-account-menu-ico svg { width: 100%; height: 100%; }
.cf-account-menu-item.is-active .cf-account-menu-ico,
.cf-account-menu-item.is-current .cf-account-menu-ico {
	opacity: 1;
}

.cf-account-menu-label {
	flex: 1 1 auto;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Logout détaché. */
.cf-account-menu-item.is-logout {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--bsand);
}
.cf-account-menu-item.is-logout a {
	color: var(--warm-gray);
	font-weight: 400;
}
.cf-account-menu-item.is-logout a:hover {
	color: var(--charcoal);
	background: transparent;
	padding-left: 14px;
}
.cf-account-menu-item.is-logout .cf-account-menu-accent { display: none; }

/* ════════════════════════════════════════════════════════════════════
 * 6. CONTENT — carte principale
 * ════════════════════════════════════════════════════════════════════ */

.cf-account-content,
body.cf-account-page .woocommerce-MyAccount-content {
	background: #fff;
	border: 1px solid var(--bsand);
	border-radius: 14px;
	padding: 32px 30px;
	min-height: 320px;
	box-shadow:
		0 1px 0 rgba(44, 42, 39, 0.02),
		0 12px 32px rgba(44, 42, 39, 0.04);
	min-width: 0;
	width: auto;
	box-sizing: border-box;
}
@media (max-width: 600px) {
	.cf-account-content,
	body.cf-account-page .woocommerce-MyAccount-content {
		padding: 24px 18px;
	}
}

/* ════════════════════════════════════════════════════════════════════
 * 7. DASHBOARD — accueil, accès rapides, commandes, concierge
 * ════════════════════════════════════════════════════════════════════ */

.cf-dash {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

/* ── Bloc d'accueil ── */
.cf-dash-hello-eyebrow {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: var(--taupe);
	margin-bottom: 14px;
}
.cf-dash-hello-title {
	font-family: var(--font-titles);
	font-size: clamp(30px, 3.6vw, 46px);
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: -0.5px;
	color: var(--charcoal);
	margin: 0 0 14px;
}
.cf-dash-hello-title em {
	font-style: italic;
	color: var(--navy);
	font-weight: 400;
}
.cf-dash-hello-sub {
	font-size: 14px;
	line-height: 1.7;
	color: var(--warm-gray);
	max-width: 620px;
	margin: 0;
	font-weight: 300;
}

/* ── Cartes d'accès rapides ── */
.cf-dash-quick {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}
@media (max-width: 720px) {
	.cf-dash-quick { grid-template-columns: 1fr; }
}
.cf-dash-quick-card {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px 22px;
	background: var(--cream);
	border: 1px solid var(--bsand);
	border-radius: 10px;
	color: var(--charcoal);
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.cf-dash-quick-card:hover {
	background: #fff;
	border-color: var(--navy);
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(27, 63, 114, 0.1);
}
.cf-dash-quick-ico {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	color: var(--navy);
	border-radius: 50%;
	border: 1px solid rgba(27, 63, 114, 0.12);
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.cf-dash-quick-ico svg { width: 18px; height: 18px; }
.cf-dash-quick-card:hover .cf-dash-quick-ico {
	background: var(--navy);
	color: #fff;
	border-color: var(--navy);
}
.cf-dash-quick-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 1;
	min-width: 0;
}
.cf-dash-quick-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--charcoal);
	letter-spacing: 0.1px;
}
.cf-dash-quick-sub {
	font-size: 11.5px;
	color: var(--warm-gray);
	letter-spacing: 0.3px;
	font-weight: 400;
}
.cf-dash-quick-arrow {
	font-size: 16px;
	color: var(--taupe);
	transition: transform 0.2s ease, color 0.2s ease;
}
.cf-dash-quick-card:hover .cf-dash-quick-arrow {
	color: var(--navy);
	transform: translateX(3px);
}

/* ── Section commandes récentes ── */
.cf-dash-section {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.cf-dash-section-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 16px;
}
.cf-dash-section-eyebrow {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: var(--taupe);
	margin-bottom: 6px;
}
.cf-dash-section-title {
	font-family: var(--font-titles);
	font-size: clamp(20px, 2.2vw, 26px);
	font-weight: 400;
	color: var(--charcoal);
	letter-spacing: -0.2px;
	margin: 0;
	line-height: 1.2;
}
.cf-dash-section-link {
	font-size: 12px;
	color: var(--navy);
	text-decoration: none;
	font-weight: 600;
	letter-spacing: 0.4px;
	white-space: nowrap;
	transition: color 0.2s ease;
}
.cf-dash-section-link:hover { color: var(--navy-d); text-decoration: underline; }

.cf-dash-orders {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.cf-dash-order-link {
	display: grid;
	grid-template-columns: 1.4fr 1fr auto auto;
	align-items: center;
	gap: 18px;
	padding: 16px 20px;
	background: #fff;
	border: 1px solid var(--bsand);
	border-radius: 10px;
	text-decoration: none;
	color: var(--charcoal);
	transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.cf-dash-order-link:hover {
	border-color: var(--navy);
	background: rgba(27, 63, 114, 0.02);
	transform: translateX(2px);
}
@media (max-width: 720px) {
	.cf-dash-order-link {
		grid-template-columns: 1fr auto;
		gap: 10px;
	}
}
.cf-dash-order-meta {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}
.cf-dash-order-num {
	font-family: var(--font-titles);
	font-size: 17px;
	font-weight: 400;
	color: var(--charcoal);
	letter-spacing: -0.2px;
}
.cf-dash-order-date {
	font-size: 11px;
	color: var(--warm-gray);
	letter-spacing: 0.2px;
}
.cf-dash-order-items {
	font-size: 12px;
	color: var(--warm-gray);
}
@media (max-width: 720px) {
	.cf-dash-order-items { display: none; }
}
.cf-dash-order-total {
	font-size: 14px;
	font-weight: 600;
	color: var(--navy);
	white-space: nowrap;
}

/* ── État vide dashboard ── */
.cf-dash-empty {
	padding: 36px 30px;
	background: var(--cream);
	border: 1px dashed var(--bsand);
	border-radius: 10px;
	text-align: center;
}
.cf-dash-empty-text {
	font-size: 14px;
	color: var(--warm-gray);
	margin: 0 0 18px;
	line-height: 1.65;
}

/* ── Encart concierge ── */
.cf-dash-concierge {
	background:
		linear-gradient(135deg, rgba(27, 63, 114, 0.04) 0%, rgba(247, 244, 240, 0.5) 100%),
		#fff;
	border: 1px solid rgba(27, 63, 114, 0.14);
	border-radius: 14px;
	padding: 32px 32px;
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 28px;
	align-items: center;
}
@media (max-width: 720px) {
	.cf-dash-concierge {
		grid-template-columns: 1fr;
		padding: 26px 22px;
		gap: 20px;
	}
}
.cf-dash-concierge-eyebrow {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: var(--navy);
	margin-bottom: 8px;
	opacity: 0.7;
}
.cf-dash-concierge-title {
	font-family: var(--font-titles);
	font-size: 22px;
	font-weight: 400;
	color: var(--charcoal);
	margin: 0 0 8px;
	letter-spacing: -0.2px;
}
.cf-dash-concierge-text {
	font-size: 13px;
	color: var(--warm-gray);
	line-height: 1.65;
	margin: 0;
	font-weight: 300;
}
.cf-dash-concierge-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.cf-concierge-btn {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	border-radius: 8px;
	text-decoration: none;
	font-family: var(--font-body);
	transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
	border: 1px solid transparent;
}
.cf-concierge-btn svg { width: 18px; height: 18px; }
.cf-concierge-btn span {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.2px;
}
.cf-concierge-btn small {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.4px;
	opacity: 0.8;
}
.cf-concierge-btn-primary {
	background: var(--navy);
	color: #fff;
	border-color: var(--navy);
	box-shadow: 0 6px 18px rgba(27, 63, 114, 0.18);
}
.cf-concierge-btn-primary:hover {
	background: var(--navy-d);
	transform: translateY(-1px);
	box-shadow: 0 8px 22px rgba(27, 63, 114, 0.24);
	color: #fff;
}
.cf-concierge-btn-secondary {
	background: #fff;
	color: var(--charcoal);
	border-color: rgba(44, 42, 39, 0.16);
}
.cf-concierge-btn-secondary:hover {
	border-color: var(--charcoal);
	background: var(--cream);
}

/* ════════════════════════════════════════════════════════════════════
 * 8. STATUTS COMMANDE — badges fins et chics (palette sobre)
 * ════════════════════════════════════════════════════════════════════ */

.cf-order-status {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.7px;
	text-transform: uppercase;
	white-space: nowrap;
	background: rgba(184, 175, 164, 0.16);
	color: var(--charcoal);
	border: 1px solid rgba(184, 175, 164, 0.3);
}
.cf-order-status-lg {
	font-size: 11.5px;
	padding: 9px 18px;
	letter-spacing: 0.9px;
}
.cf-order-status::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.55;
}
/* Palette sobre — pas de rouge agressif. */
.cf-order-status-pending,
.cf-order-status-on-hold {
	background: rgba(184, 175, 164, 0.18);
	color: #7a6c5d;
	border-color: rgba(184, 175, 164, 0.35);
}
.cf-order-status-processing {
	background: rgba(27, 63, 114, 0.08);
	color: var(--navy);
	border-color: rgba(27, 63, 114, 0.22);
}
.cf-order-status-completed {
	background: rgba(58, 110, 80, 0.08);
	color: #3a6e50;
	border-color: rgba(58, 110, 80, 0.22);
}
.cf-order-status-shipped,
.cf-order-status-out-for-delivery {
	background: rgba(27, 63, 114, 0.1);
	color: var(--navy);
	border-color: rgba(27, 63, 114, 0.25);
}
/* Rouge poudré pour annulée/échouée — discret, jamais criard. */
.cf-order-status-cancelled,
.cf-order-status-failed,
.cf-order-status-refunded {
	background: rgba(168, 88, 88, 0.06);
	color: #8c4f4f;
	border-color: rgba(168, 88, 88, 0.2);
}

/* ════════════════════════════════════════════════════════════════════
 * 9. LISTE DES COMMANDES (orders endpoint)
 * ════════════════════════════════════════════════════════════════════ */

.cf-orders-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.cf-order-card {
	background: #fff;
	border: 1px solid var(--bsand);
	border-radius: 12px;
	padding: 22px 24px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.cf-order-card:hover {
	border-color: var(--navy);
	box-shadow: 0 8px 20px rgba(27, 63, 114, 0.08);
	transform: translateY(-1px);
}
.cf-order-card-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
	margin-bottom: 14px;
	flex-wrap: wrap;
}
.cf-order-card-meta {
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.cf-order-card-num {
	font-family: var(--font-titles);
	font-size: 24px;
	font-weight: 400;
	color: var(--charcoal);
	letter-spacing: -0.4px;
}
.cf-order-card-date {
	font-size: 11px;
	color: var(--warm-gray);
	letter-spacing: 0.3px;
}
.cf-order-card-body {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 14px;
	margin-bottom: 16px;
	padding: 14px 0;
	border-top: 1px solid var(--bsand);
	border-bottom: 1px solid var(--bsand);
}
.cf-order-card-count {
	font-size: 13px;
	color: var(--warm-gray);
}
.cf-order-card-total {
	font-size: 20px;
	font-weight: 600;
	color: var(--navy);
	font-family: var(--font-titles);
	letter-spacing: -0.2px;
}
.cf-order-card-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.cf-orders-pagination {
	display: flex;
	justify-content: space-between;
	margin-top: 22px;
	gap: 10px;
}

/* État vide. */
.cf-empty-state {
	padding: 56px 28px;
	text-align: center;
	color: var(--charcoal);
}
.cf-empty-ico {
	width: 72px;
	height: 72px;
	margin: 0 auto 18px;
	color: var(--taupe);
}
.cf-empty-ico svg { width: 100%; height: 100%; }
.cf-empty-title {
	font-family: var(--font-titles);
	font-size: 26px;
	font-weight: 400;
	margin: 0 0 8px;
	color: var(--charcoal);
}
.cf-empty-text {
	font-size: 14px;
	color: var(--warm-gray);
	margin: 0 auto 22px;
	max-width: 480px;
	line-height: 1.6;
}
.cf-empty-state .cf-btn-primary {
	max-width: 280px;
	width: auto;
	padding-left: 28px;
	padding-right: 28px;
}

/* ════════════════════════════════════════════════════════════════════
 * 10. VIEW-ORDER — détail commande premium
 * ════════════════════════════════════════════════════════════════════ */

.cf-account-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 600;
	color: var(--warm-gray);
	text-decoration: none;
	margin-bottom: 24px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	transition: color 0.2s ease, transform 0.2s ease;
}
.cf-account-back svg { width: 14px; height: 14px; }
.cf-account-back:hover {
	color: var(--navy);
	transform: translateX(-2px);
}

/* ── En-tête commande ── */
.cf-order-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 20px;
	margin-bottom: 28px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--bsand);
	flex-wrap: wrap;
}
.cf-order-head-eyebrow {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: var(--taupe);
	margin-bottom: 10px;
}
.cf-order-num {
	font-family: var(--font-titles);
	font-size: clamp(28px, 3.2vw, 40px);
	font-weight: 300;
	letter-spacing: -0.5px;
	color: var(--charcoal);
	margin: 0 0 6px;
	line-height: 1.05;
}
.cf-order-date {
	font-size: 13px;
	color: var(--warm-gray);
	margin: 0;
	font-weight: 300;
}

/* ── Bloc suivi (élégant) ── */
.cf-order-track {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 16px;
	align-items: center;
	padding: 18px 22px;
	background: rgba(27, 63, 114, 0.04);
	border: 1px solid rgba(27, 63, 114, 0.14);
	border-radius: 10px;
	margin-bottom: 28px;
}
.cf-order-track-ico {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--navy);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.cf-order-track-ico svg { width: 20px; height: 20px; }
.cf-order-track-lbl {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--taupe);
	margin-bottom: 3px;
}
.cf-order-track-num {
	font-size: 14px;
	color: var(--charcoal);
	font-weight: 500;
	font-family: var(--font-body);
	letter-spacing: 0.4px;
}
.cf-order-track-provider {
	color: var(--warm-gray);
	font-weight: 400;
}
.cf-order-track-cta {
	display: inline-flex;
	align-items: center;
	font-size: 12px;
	font-weight: 600;
	color: var(--navy);
	text-decoration: none;
	letter-spacing: 0.4px;
	padding: 8px 14px;
	border: 1px solid var(--navy);
	border-radius: 6px;
	transition: background 0.2s ease, color 0.2s ease;
	white-space: nowrap;
}
.cf-order-track-cta:hover { background: var(--navy); color: #fff; }
@media (max-width: 600px) {
	.cf-order-track {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.cf-order-track-cta { justify-self: start; }
}

/* ── Sections génériques ── */
.cf-order-section {
	margin-bottom: 32px;
}
.cf-order-section:last-child { margin-bottom: 0; }
.cf-order-section-head {
	margin-bottom: 14px;
}
.cf-order-section-title {
	font-family: var(--font-titles);
	font-size: 22px;
	font-weight: 400;
	color: var(--charcoal);
	margin: 0;
	letter-spacing: -0.2px;
}

/* ── Articles (lignes commande) ── */
.cf-order-items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.cf-order-item {
	display: grid;
	grid-template-columns: 84px 1fr auto;
	gap: 18px;
	padding: 18px;
	background: var(--cream);
	border: 1px solid var(--bsand);
	border-radius: 10px;
	align-items: center;
}
.cf-order-item-thumb {
	width: 84px;
	height: 84px;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--bsand);
}
.cf-order-item-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.cf-order-item-body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.cf-order-item-name {
	font-family: var(--font-titles);
	font-size: 18px;
	font-weight: 400;
	color: var(--charcoal);
	letter-spacing: -0.1px;
	line-height: 1.3;
}
.cf-order-item-name a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}
.cf-order-item-name a:hover { color: var(--navy); }
.cf-order-item-meta-wrap { margin-top: 2px; }
.cf-order-item-meta,
.woocommerce-MyAccount-content .wc-item-meta {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	font-size: 12px;
	color: var(--warm-gray);
}
.cf-order-item-meta li,
.woocommerce-MyAccount-content .wc-item-meta li {
	display: inline-flex;
	gap: 4px;
	margin: 0;
	padding: 0;
}
.cf-order-item-meta li strong,
.woocommerce-MyAccount-content .wc-item-meta li strong,
.woocommerce-MyAccount-content .wc-item-meta-label {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--taupe);
}
.cf-order-item-meta li p,
.woocommerce-MyAccount-content .wc-item-meta p {
	margin: 0;
	display: inline;
	color: var(--charcoal);
	font-weight: 500;
}
.cf-mc-meta-label {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--taupe);
	margin-right: 4px;
}
.cf-mc-meta-value {
	font-size: 12px;
	color: var(--charcoal);
	font-weight: 500;
}
.cf-order-item-qty {
	font-size: 12px;
	color: var(--warm-gray);
	letter-spacing: 0.3px;
}
.cf-order-item-total {
	font-size: 16px;
	font-weight: 600;
	color: var(--navy);
	font-family: var(--font-titles);
	white-space: nowrap;
}
@media (max-width: 600px) {
	.cf-order-item {
		grid-template-columns: 64px 1fr;
		gap: 14px;
	}
	.cf-order-item-thumb { width: 64px; height: 64px; }
	.cf-order-item-total {
		grid-column: 1 / -1;
		text-align: right;
		padding-top: 6px;
		border-top: 1px solid var(--bsand);
	}
}

/* ── Totaux ── */
.cf-order-totals-list {
	margin: 0;
	padding: 22px 24px;
	background: var(--cream);
	border: 1px solid var(--bsand);
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.cf-order-total-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin: 0;
	padding: 0;
}
.cf-order-total-row dt {
	font-size: 13px;
	color: var(--warm-gray);
	font-weight: 400;
	margin: 0;
}
.cf-order-total-row dd {
	font-size: 14px;
	color: var(--charcoal);
	font-weight: 500;
	margin: 0;
	text-align: right;
}
.cf-order-total-row.is-grand {
	margin-top: 10px;
	padding-top: 14px;
	border-top: 1px solid var(--bsand);
}
.cf-order-total-row.is-grand dt {
	font-size: 13px;
	font-weight: 600;
	color: var(--charcoal);
	text-transform: uppercase;
	letter-spacing: 1.2px;
}
.cf-order-total-row.is-grand dd {
	font-family: var(--font-titles);
	font-size: 24px;
	font-weight: 400;
	color: var(--navy);
	letter-spacing: -0.3px;
}

/* ── Adresses + Paiement ── */
.cf-order-bottom-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}
@media (max-width: 880px) {
	.cf-order-bottom-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
	.cf-order-bottom-grid { grid-template-columns: 1fr; }
}
.cf-order-card {
	background: var(--cream);
	border: 1px solid var(--bsand);
	border-radius: 10px;
	padding: 22px 22px;
}
.cf-order-card-eyebrow {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--taupe);
	margin-bottom: 10px;
}
.cf-order-card-addr {
	font-style: normal;
	font-size: 13px;
	line-height: 1.65;
	color: var(--charcoal);
	margin: 0 0 8px;
}
.cf-order-card-line {
	font-size: 13px;
	color: var(--charcoal);
	line-height: 1.6;
}
.cf-order-card-line a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--bsand);
	transition: border-color 0.2s ease, color 0.2s ease;
}
.cf-order-card-line a:hover { color: var(--navy); border-color: var(--navy); }

/* ════════════════════════════════════════════════════════════════════
 * 11. EDIT ACCOUNT / EDIT ADDRESS — formulaires premium
 * ════════════════════════════════════════════════════════════════════ */

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3,
.cf-order-view h2 {
	font-family: var(--font-titles);
	font-size: 24px;
	font-weight: 400;
	letter-spacing: -0.2px;
	color: var(--charcoal);
	margin: 0 0 18px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--bsand);
}

.woocommerce-MyAccount-content fieldset {
	border: 1px solid var(--bsand);
	border-radius: 10px;
	padding: 24px 26px 18px;
	margin: 24px 0 18px;
	background: var(--cream);
}
.woocommerce-MyAccount-content fieldset legend {
	font-family: var(--font-titles);
	font-size: 18px;
	font-weight: 400;
	color: var(--charcoal);
	padding: 0 10px;
}

.woocommerce-MyAccount-content form .form-row-first,
.woocommerce-MyAccount-content form .form-row-last {
	width: calc(50% - 9px);
	display: inline-flex;
	flex-direction: column;
}
.woocommerce-MyAccount-content form .form-row-first { margin-right: 18px; }
@media (max-width: 600px) {
	.woocommerce-MyAccount-content form .form-row-first,
	.woocommerce-MyAccount-content form .form-row-last {
		width: 100%;
		margin-right: 0;
	}
}

/* Addresses index (deux blocs côte à côte avec lien Modifier). */
.woocommerce-Addresses {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
	margin: 0;
}
@media (max-width: 720px) {
	.woocommerce-Addresses { grid-template-columns: 1fr; }
}
.woocommerce-Address {
	background: var(--cream);
	border: 1px solid var(--bsand);
	border-radius: 10px;
	padding: 24px 24px 20px;
	width: auto !important;
	float: none !important;
}
.woocommerce-Address-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--bsand);
}
.woocommerce-Address-title h2,
.woocommerce-Address-title h3 {
	margin: 0;
	border: none;
	padding: 0;
	font-family: var(--font-titles);
	font-size: 18px;
	font-weight: 400;
	color: var(--charcoal);
}
.woocommerce-Address-title .edit {
	font-size: 11px;
	font-weight: 600;
	color: var(--navy);
	text-decoration: none;
	letter-spacing: 1px;
	text-transform: uppercase;
	transition: color 0.2s ease;
}
.woocommerce-Address-title .edit:hover { color: var(--navy-d); }
.woocommerce-Address address {
	font-style: normal;
	font-size: 13px;
	line-height: 1.7;
	color: var(--charcoal);
}

/* Customer-details cols (WC native order-details). */
.woocommerce-MyAccount-content .col2-set,
.woocommerce-MyAccount-content .u-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
}
@media (max-width: 600px) {
	.woocommerce-MyAccount-content .col2-set,
	.woocommerce-MyAccount-content .u-columns { grid-template-columns: 1fr; }
}
.woocommerce-MyAccount-content address {
	font-style: normal;
	font-size: 13px;
	line-height: 1.7;
	color: var(--charcoal);
	background: var(--cream);
	border: 1px solid var(--bsand);
	border-radius: 8px;
	padding: 16px 18px;
}

/* ════════════════════════════════════════════════════════════════════
 * 12. NOTICES WC (succès / erreurs) — discret et chic
 * ════════════════════════════════════════════════════════════════════ */

/* Notices WC — discret, lisible, charte. Scopé à toutes les pages compte
   ET tracking (sinon les messages étaient invisibles). */
.cf-account .woocommerce-notices-wrapper,
body.woocommerce-account .woocommerce-notices-wrapper,
body.cf-account-page .woocommerce-notices-wrapper,
body.cf-order-tracking-page .woocommerce-notices-wrapper {
	margin-bottom: 22px;
	max-width: 540px;
	margin-left: auto;
	margin-right: auto;
}
.cf-account .woocommerce-message,
.cf-account .woocommerce-info,
.cf-account .woocommerce-error,
body.woocommerce-account .woocommerce-message,
body.woocommerce-account .woocommerce-info,
body.woocommerce-account .woocommerce-error,
body.cf-account-page .woocommerce-message,
body.cf-account-page .woocommerce-info,
body.cf-account-page .woocommerce-error,
body.cf-order-tracking-page .woocommerce-message,
body.cf-order-tracking-page .woocommerce-info,
body.cf-order-tracking-page .woocommerce-error {
	background: #fff !important;
	border: 1px solid var(--bsand) !important;
	border-left-width: 3px !important;
	border-radius: 8px !important;
	padding: 14px 20px !important;
	font-size: 13px !important;
	color: var(--charcoal) !important;
	line-height: 1.6 !important;
	margin: 0 0 16px !important;
	list-style: none !important;
	box-shadow: 0 1px 0 rgba(44, 42, 39, 0.02) !important;
	display: block !important;
}
.cf-account .woocommerce-message,
body.woocommerce-account .woocommerce-message,
body.cf-account-page .woocommerce-message,
body.cf-order-tracking-page .woocommerce-message {
	border-left-color: #3a6e50 !important;
}
.cf-account .woocommerce-info,
body.woocommerce-account .woocommerce-info,
body.cf-account-page .woocommerce-info,
body.cf-order-tracking-page .woocommerce-info {
	border-left-color: var(--navy) !important;
}
.cf-account .woocommerce-error,
body.woocommerce-account .woocommerce-error,
body.cf-account-page .woocommerce-error,
body.cf-order-tracking-page .woocommerce-error {
	border-left-color: #8c4f4f !important;
	color: #6a3a3a !important;
}
.cf-account .woocommerce-error li,
.cf-account .woocommerce-message li,
.cf-account .woocommerce-info li,
body.woocommerce-account .woocommerce-error li,
body.woocommerce-account .woocommerce-message li,
body.woocommerce-account .woocommerce-info li,
body.cf-account-page .woocommerce-error li,
body.cf-account-page .woocommerce-message li,
body.cf-account-page .woocommerce-info li,
body.cf-order-tracking-page .woocommerce-error li,
body.cf-order-tracking-page .woocommerce-message li,
body.cf-order-tracking-page .woocommerce-info li {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	color: inherit !important;
	font-size: 13px !important;
}
.cf-account .woocommerce-message .button,
.cf-account .woocommerce-info .button {
	margin-left: 14px;
	font-size: 11px;
	padding: 7px 12px;
	min-height: 0;
}

/* ════════════════════════════════════════════════════════════════════
 * 13. ICÔNE COMPTE HEADER (desktop + mobile)
 * ════════════════════════════════════════════════════════════════════ */

/* Icône compte header — plus visible, état actif, hover premium. */
header .cf-account-icon,
.cf-nav-mobile .cf-account-icon-mobile {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	color: var(--charcoal);
	text-decoration: none;
	transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
header .cf-account-icon {
	width: 38px !important;
	height: 38px !important;
	margin-left: 6px;
	border-radius: 50%;
	position: relative;
}
header .cf-account-icon svg {
	width: 20px !important;
	height: 20px !important;
	stroke-width: 1.7 !important;
}
header .cf-account-icon:hover {
	color: var(--navy);
	background: rgba(27, 63, 114, 0.08);
	transform: translateY(-1px);
}
/* État actif quand on est SUR la page compte. */
body.cf-account-page header .cf-account-icon,
body.woocommerce-account header .cf-account-icon {
	color: var(--navy);
	background: rgba(27, 63, 114, 0.1);
}
body.cf-account-page header .cf-account-icon::after,
body.woocommerce-account header .cf-account-icon::after {
	content: "";
	position: absolute;
	bottom: -2px;
	left: 50%;
	transform: translateX(-50%);
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--navy);
}

/* ════════════════════════════════════════════════════════════════════
 * 15. AUTH HERO (en-tête de la page login déconnectée) — niveau Apple
 *
 * v0.12.5 : compact et raffiné. Plus petit titre, plus de respiration.
 * Force display: block + text-align center via !important pour éviter
 * tout layout flex/grid hérité (bug observé v0.12.4 : texte spread sur
 * 3 colonnes). */
/* ════════════════════════════════════════════════════════════════════ */

.cf-account-auth-hero {
	display: block !important;
	text-align: center !important;
	max-width: 620px !important;
	margin: 0 auto 36px !important;
	padding: 0 !important;
	box-sizing: border-box;
}
.cf-account-auth-hero > * {
	margin-left: auto !important;
	margin-right: auto !important;
}
.cf-account-auth-hero .cf-account-eyebrow {
	display: block !important;
	font-family: var(--font-body) !important;
	font-size: 10px !important;
	font-weight: 600 !important;
	letter-spacing: 2.6px !important;
	text-transform: uppercase !important;
	color: var(--taupe) !important;
	margin: 0 0 14px !important;
	text-align: center !important;
}
.cf-account-auth-title {
	display: block !important;
	font-family: var(--font-titles) !important;
	font-size: clamp(26px, 2.8vw, 38px) !important;
	font-weight: 300 !important;
	line-height: 1.1 !important;
	letter-spacing: -0.5px !important;
	color: var(--charcoal) !important;
	margin: 0 0 14px !important;
	text-align: center !important;
}
.cf-account-auth-title em {
	font-style: italic !important;
	color: var(--navy) !important;
	font-weight: 400 !important;
}
.cf-account-auth-sub {
	display: block !important;
	margin: 0 auto !important;
	max-width: 480px !important;
	font-size: 13px !important;
	font-weight: 300 !important;
	line-height: 1.7 !important;
	color: var(--warm-gray) !important;
	text-align: center !important;
}

/* Layout 2 colonnes (desktop) : login + register alignés et HAUTEURS
   ÉGALES. v0.12.5 : !important sur display/grid pour battre tout layout
   flex hérité, max-width réduit pour rythme Apple-like. */
.cf-account-shell-auth {
	display: grid !important;
	gap: 24px !important;
	max-width: 940px !important;
	margin: 0 auto !important;
	align-items: stretch !important;
	width: 100% !important;
	box-sizing: border-box !important;
}
.cf-account-shell-auth.has-register {
	grid-template-columns: 1fr 1fr !important;
}
.cf-account-shell-auth.login-only {
	grid-template-columns: minmax(0, 500px) !important;
	justify-content: center !important;
}
.cf-account-shell-auth > .cf-account-card {
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
	box-sizing: border-box !important;
}

/* Séparateur — masqué desktop (gap suffit) / visible mobile entre les cards. */
.cf-account-auth-sep {
	display: none;
}
@media (max-width: 880px) {
	/* Bug v0.12.10 — il fallait !important pour battre le `1fr 1fr !important`
	   précédent. Sans ça la grille restait à 2 colonnes sur mobile, login à
	   gauche, séparateur vertical à droite, register en dessous à gauche. */
	.cf-account-shell-auth.has-register {
		grid-template-columns: 1fr !important;
		gap: 0 !important;
	}
	.cf-account-shell-auth > .cf-account-card {
		width: 100% !important;
		max-width: 100% !important;
	}
	.cf-account-auth-sep {
		display: flex !important;
		align-items: center;
		gap: 16px;
		padding: 22px 0;
		width: 100%;
	}
	.cf-account-auth-sep-line {
		flex: 1;
		height: 1px;
		background: var(--bsand);
	}
	.cf-account-auth-sep-label {
		font-size: 10px;
		font-weight: 600;
		letter-spacing: 2.2px;
		text-transform: uppercase;
		color: var(--taupe);
	}
}

/* ── Password show/hide toggle ── */
.cf-form-field-password { position: relative; }
.cf-password-wrap {
	position: relative;
	width: 100%;
}
.cf-password-wrap > input[type="password"],
.cf-password-wrap > input[type="text"] {
	padding-right: 48px !important;
}
.cf-password-toggle {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 8px;
	border-radius: 6px;
	color: var(--taupe);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: color 0.2s ease, background 0.2s ease;
	width: 36px;
	height: 36px;
}
.cf-password-toggle:hover {
	color: var(--navy);
	background: rgba(27, 63, 114, 0.05);
}
.cf-password-toggle:focus-visible {
	outline: 2px solid var(--navy);
	outline-offset: 2px;
	color: var(--navy);
}
.cf-password-ico { width: 18px; height: 18px; }
.cf-password-ico-show { display: block; }
.cf-password-ico-hide { display: none; }
.cf-password-toggle.is-shown .cf-password-ico-show { display: none; }
.cf-password-toggle.is-shown .cf-password-ico-hide { display: block; }
.cf-password-toggle.is-shown { color: var(--navy); }

/* Card eyebrow + title : variante carte login/register (Apple-like). */
.cf-account-card-eyebrow {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: var(--taupe);
	margin: 0 0 12px;
	text-align: left;
}
.cf-account-card-title {
	font-family: var(--font-titles);
	font-size: clamp(22px, 2.2vw, 28px);
	font-weight: 400;
	color: var(--charcoal);
	margin: 0 0 8px;
	letter-spacing: -0.3px;
	line-height: 1.15;
	text-align: left;
}
.cf-account-card-sub {
	font-size: 13px;
	color: var(--warm-gray);
	line-height: 1.65;
	margin: 0 0 26px;
	font-weight: 300;
	text-align: left;
}

/* ════════════════════════════════════════════════════════════════════
 * 16. FORMS — sections premium + grid (edit-account, edit-address)
 * ════════════════════════════════════════════════════════════════════ */

.cf-form-section {
	background: var(--cream);
	border: 1px solid var(--bsand);
	border-radius: 12px;
	padding: 28px 28px 22px;
	margin-bottom: 18px;
}
@media (max-width: 600px) {
	.cf-form-section { padding: 22px 18px; }
}

.cf-form-section-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 14px;
	margin-bottom: 18px;
}
.cf-form-section-eyebrow {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: var(--taupe);
	margin-bottom: 6px;
}
.cf-form-section-title {
	font-family: var(--font-titles);
	font-size: 22px;
	font-weight: 400;
	color: var(--charcoal);
	margin: 0;
	letter-spacing: -0.2px;
	border: none;
	padding: 0;
	line-height: 1.2;
}

/* Section repliable (<details>) — Mot de passe. */
.cf-form-section-collapsible {
	cursor: default;
}
.cf-form-section-collapsible > summary {
	list-style: none;
	cursor: pointer;
	user-select: none;
	margin-bottom: 0;
}
.cf-form-section-collapsible > summary::-webkit-details-marker { display: none; }
.cf-form-section-chevron {
	width: 14px;
	height: 8px;
	color: var(--taupe);
	transition: transform 0.25s ease, color 0.25s ease;
	flex-shrink: 0;
}
.cf-form-section-collapsible[open] > summary > .cf-form-section-chevron {
	transform: rotate(180deg);
	color: var(--navy);
}
.cf-form-section-collapsible[open] > summary {
	margin-bottom: 22px;
}
.cf-form-section-body {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Grid 2 colonnes pour first/last (prénom + nom). */
.cf-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 16px;
}
.cf-form-grid > p,
.cf-form-grid > .cf-form-field {
	margin: 0;
	width: 100%;
}
@media (max-width: 600px) {
	.cf-form-grid { grid-template-columns: 1fr; gap: 14px; }
}

.cf-form-help {
	display: block;
	font-size: 11.5px;
	color: var(--warm-gray);
	margin-top: 4px;
	font-weight: 400;
	line-height: 1.5;
}
.cf-form-help-lg {
	font-size: 13px;
	color: var(--warm-gray);
	line-height: 1.65;
	max-width: 620px;
}
.cf-form-optional {
	font-weight: 400;
	color: var(--taupe);
	font-size: 9px;
	letter-spacing: 0.8px;
	text-transform: none;
}

.cf-form-fields-wrap {
	background: var(--cream);
	border: 1px solid var(--bsand);
	border-radius: 12px;
	padding: 28px 28px 22px;
}
@media (max-width: 600px) {
	.cf-form-fields-wrap { padding: 22px 18px; }
}

/* ════════════════════════════════════════════════════════════════════
 * 17. ADDRESSES (index « Mes adresses »)
 * ════════════════════════════════════════════════════════════════════ */

/* Bug 4 (v0.12.3) — adresses en diagonale.
   Cause : WC native CSS pose `.col-1 { float: left; width: 48% }` et
   `.col-2 { float: right; width: 48% }` sur les enfants. Quand les
   hauteurs des deux cards diffèrent, ça crée le décalage en diagonale.
   Fix : reset agressif (float none + width auto + margin 0) sur TOUS
   les sélecteurs des enfants, et stretch en hauteur via align-items. */
.cf-addresses-grid {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 18px !important;
	margin: 0 !important;
	align-items: stretch !important;
}
@media (max-width: 720px) {
	.cf-addresses-grid { grid-template-columns: 1fr !important; }
}
.cf-addresses-grid > .cf-address-card,
.cf-addresses-grid > .woocommerce-Address,
.cf-addresses-grid > .u-column1,
.cf-addresses-grid > .u-column2,
.cf-addresses-grid > .col-1,
.cf-addresses-grid > .col-2 {
	float: none !important;
	width: auto !important;
	max-width: 100% !important;
	margin: 0 !important;
	clear: none !important;
}
.cf-address-card {
	background: var(--cream);
	border: 1px solid var(--bsand);
	border-radius: 12px;
	padding: 26px 26px 22px;
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}
.cf-address-card:hover {
	border-color: rgba(27, 63, 114, 0.4);
	box-shadow: 0 6px 18px rgba(27, 63, 114, 0.06);
}
.cf-address-card-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--bsand);
}
.cf-address-card-head h3 {
	margin: 0;
	border: none;
	padding: 0;
	font-family: var(--font-titles);
	font-size: 19px;
	font-weight: 400;
	color: var(--charcoal);
	letter-spacing: -0.1px;
}
.cf-address-edit {
	font-size: 11px;
	font-weight: 600;
	color: var(--navy);
	text-decoration: none;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	transition: color 0.2s ease;
	display: inline-flex;
	align-items: center;
}
.cf-address-edit:hover { color: var(--navy-d); }
.cf-address-card-body {
	font-style: normal;
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--charcoal);
}
.cf-address-empty {
	font-style: italic;
	color: var(--taupe);
	font-size: 13px;
}

/* ════════════════════════════════════════════════════════════════════
 * 18. ORDERS — refonte row layout (vignette + meta + side + actions)
 * ════════════════════════════════════════════════════════════════════ */

.cf-order-card-row {
	display: grid;
	grid-template-columns: 72px 1fr auto;
	gap: 20px;
	align-items: center;
	margin-bottom: 16px;
}
@media (max-width: 600px) {
	.cf-order-card-row {
		grid-template-columns: 60px 1fr;
		gap: 14px;
	}
}
.cf-order-card-thumb {
	position: relative;
	width: 72px;
	height: 72px;
	border-radius: 10px;
	overflow: hidden;
	background: var(--cream);
	border: 1px solid var(--bsand);
	flex-shrink: 0;
}
@media (max-width: 600px) {
	.cf-order-card-thumb { width: 60px; height: 60px; }
}
.cf-order-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.cf-order-card-thumb-badge {
	position: absolute;
	bottom: -4px;
	right: -4px;
	background: var(--navy);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.3px;
	padding: 3px 7px;
	border-radius: 999px;
	border: 2px solid #fff;
	line-height: 1;
}
.cf-order-card-meta {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}
.cf-order-card-num {
	font-family: var(--font-titles);
	font-size: 22px;
	font-weight: 400;
	color: var(--charcoal);
	letter-spacing: -0.3px;
	line-height: 1.1;
}
.cf-order-card-date {
	font-size: 12px;
	color: var(--warm-gray);
	letter-spacing: 0.2px;
}
.cf-order-card-count {
	font-size: 11px;
	color: var(--taupe);
	letter-spacing: 0.3px;
	margin-top: 2px;
}
.cf-order-card-side {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
}
@media (max-width: 600px) {
	.cf-order-card-side {
		grid-column: 1 / -1;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding-top: 12px;
		border-top: 1px solid var(--bsand);
		margin-top: 4px;
	}
}
.cf-order-card-total {
	font-family: var(--font-titles);
	font-size: 22px;
	font-weight: 400;
	color: var(--navy);
	letter-spacing: -0.3px;
	white-space: nowrap;
}
/* Réécrit `.cf-order-card-body` qui n'est plus utilisé dans la nouvelle
   structure. Si présent (cas WC natif), on neutralise. */
.cf-order-card-body {
	display: none;
}
.cf-order-card-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	padding-top: 14px;
	border-top: 1px solid var(--bsand);
}

/* ════════════════════════════════════════════════════════════════════
 * 19. PAYMENT METHODS (tableau)
 * ════════════════════════════════════════════════════════════════════ */

.woocommerce-MyAccount-content .account-payment-methods-table,
.woocommerce-MyAccount-content table.account-payment-methods-table {
	background: transparent;
	border: none;
}
.woocommerce-MyAccount-content table.account-payment-methods-table th {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--taupe);
	padding: 12px 14px;
	border-bottom: 1px solid var(--bsand);
}
.woocommerce-MyAccount-content table.account-payment-methods-table td {
	padding: 16px 14px;
	border-bottom: 1px solid var(--bsand);
	font-size: 13px;
	color: var(--charcoal);
	vertical-align: middle;
}
.woocommerce-MyAccount-content table.account-payment-methods-table .button {
	min-height: 0;
	padding: 6px 10px;
	font-size: 11px;
	letter-spacing: 0.3px;
	box-shadow: none;
	width: auto;
}

/* ════════════════════════════════════════════════════════════════════
 * 20-BIS. PAGE « SUIVRE MA COMMANDE » — Style fallback du formulaire WC
 * natif au cas où mon override `order/tracking.php` ne se charge pas
 * sur l'install client (chemin de thème non standard, mu-plugin, etc.).
 * On enveloppe visuellement le `form.track_order` en card centrée pour
 * matcher le rendu /mon-compte (Apple-like premium).
 * ════════════════════════════════════════════════════════════════════ */

body.cf-order-tracking-page .entry-content,
.cf-order-tracking-page .entry-content {
	max-width: 540px;
	margin: 60px auto 0 !important;
	padding-bottom: 40px;
}

/* Form natif WC : carte centrée */
body.cf-order-tracking-page form.track_order,
.cf-order-tracking-page form.track_order {
	background: #fff;
	border: 1px solid rgba(184, 175, 164, 0.32);
	border-radius: 16px;
	padding: 36px 32px;
	box-shadow:
		0 1px 0 rgba(44, 42, 39, 0.02),
		0 18px 48px -16px rgba(44, 42, 39, 0.08);
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
}

/* Paragraphe d'intro WC */
body.cf-order-tracking-page form.track_order > p:first-of-type,
.cf-order-tracking-page form.track_order > p:first-of-type {
	font-size: 13px;
	color: var(--warm-gray);
	line-height: 1.65;
	margin: 0 0 12px;
	text-align: center;
	font-weight: 300;
}

/* form-rows : empilés full-width */
body.cf-order-tracking-page form.track_order p.form-row,
.cf-order-tracking-page form.track_order p.form-row {
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
body.cf-order-tracking-page form.track_order .clear,
.cf-order-tracking-page form.track_order .clear { display: none; }

/* Labels */
body.cf-order-tracking-page form.track_order label,
.cf-order-tracking-page form.track_order label {
	font-size: 10px !important;
	font-weight: 600 !important;
	letter-spacing: 1.4px !important;
	text-transform: uppercase !important;
	color: var(--taupe) !important;
	margin-bottom: 4px !important;
	display: block !important;
}

/* Inputs */
body.cf-order-tracking-page form.track_order input[type="text"],
body.cf-order-tracking-page form.track_order input.input-text,
.cf-order-tracking-page form.track_order input[type="text"],
.cf-order-tracking-page form.track_order input.input-text {
	width: 100% !important;
	background: #fff !important;
	border: 1px solid rgba(184, 175, 164, 0.5) !important;
	border-radius: 7px !important;
	padding: 14px 16px !important;
	color: var(--charcoal) !important;
	font-size: 14px !important;
	font-family: var(--font-body) !important;
	font-weight: 400 !important;
	outline: none !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
	box-sizing: border-box !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}
body.cf-order-tracking-page form.track_order input[type="text"]:focus,
.cf-order-tracking-page form.track_order input[type="text"]:focus {
	border-color: var(--navy) !important;
	box-shadow: 0 0 0 4px rgba(27, 63, 114, 0.08) !important;
}

/* Bouton "Suivre" */
body.cf-order-tracking-page form.track_order button[name="track"],
body.cf-order-tracking-page form.track_order .button,
.cf-order-tracking-page form.track_order button[name="track"],
.cf-order-tracking-page form.track_order .button {
	background: var(--navy) !important;
	background-color: var(--navy) !important;
	color: #fff !important;
	border: 1px solid var(--navy) !important;
	width: 100% !important;
	padding: 14px 26px !important;
	border-radius: 6px !important;
	font-family: var(--font-body) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0.3px !important;
	min-height: 48px !important;
	cursor: pointer !important;
	margin-top: 10px !important;
	box-shadow: 0 1px 0 rgba(44, 42, 39, 0.04), 0 6px 18px rgba(27, 63, 114, 0.16) !important;
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
	text-shadow: none !important;
	text-transform: none !important;
}
body.cf-order-tracking-page form.track_order button[name="track"]:hover,
.cf-order-tracking-page form.track_order button[name="track"]:hover {
	background: var(--navy-d) !important;
	transform: translateY(-1px);
	box-shadow: 0 1px 0 rgba(44, 42, 39, 0.04), 0 10px 24px rgba(27, 63, 114, 0.22) !important;
}

/* Hero CSS-only au-dessus du formulaire (eyebrow + titre Cormorant
   centré, comme /mon-compte). Utilise ::before sur l'entry-content. */
body.cf-order-tracking-page .entry-content::before {
	content: "Suivre ma commande";
	display: block;
	font-family: var(--font-titles);
	font-size: clamp(26px, 2.8vw, 38px);
	font-weight: 300;
	color: var(--charcoal);
	letter-spacing: -0.5px;
	line-height: 1.1;
	text-align: center;
	margin-bottom: 14px;
}
body.cf-order-tracking-page .entry-content::after {
	display: none;
}
/* Petit eyebrow via élément séparé n'est pas faisable sans markup —
   on ajoute juste un sous-texte via ::after avant le form */

/* ════════════════════════════════════════════════════════════════════
 * 20. PAGE « SUIVRE MA COMMANDE » (Bug 6 — refonte complète)
 *
 * - Masque le titre dupliqué (the_title du h1 page + h2 du shortcode).
 * - Style le formulaire de suivi à la charte premium.
 * - Style le résultat (commande trouvée) cohérent avec view-order.
 * ════════════════════════════════════════════════════════════════════ */

/* Masque le titre natif de la page (page.php) — on a déjà notre hero
   Cormorant dans le template tracking.php. Évite « Suivre ma commande »
   en double (h1 page + h2 shortcode). */
body.cf-order-tracking-page .cf-page-fallback-head,
body.cf-order-tracking-page .entry-header,
body.cf-order-tracking-page .page-title,
body.cf-order-tracking-page .entry-content > h1.entry-title,
body.cf-order-tracking-page article > h1,
body.cf-order-tracking-page .cf-wc-page > .entry-content > h1:first-child,
body.cf-order-tracking-page .cf-page-fallback > .cf-page-fallback-head {
	display: none !important;
}

/* La page de suivi n'a pas la 2-colonnes sidebar/content — c'est une
   page autonome avec carte centrée comme login/lost-password.
   NB : les reset article/main sont déjà gérés en haut de fichier via
   body.cf-account-page (la classe est ajoutée par notre body_class). */

/* Carte « formulaire de suivi » — variante login. */
.cf-tracking-form-card {
	padding: 40px 38px;
}
@media (max-width: 600px) {
	.cf-tracking-form-card { padding: 30px 22px; }
}

/* Carte « résultat » — plus large que le formulaire. */
.cf-tracking-result {
	padding: 36px 36px 32px;
}
@media (max-width: 600px) {
	.cf-tracking-result { padding: 26px 20px; }
}
.cf-account-tracking .cf-account-shell-auth.login-only {
	grid-template-columns: minmax(0, 720px);
}

/* Reset des règles natives WC qui floutent / cassent le form de suivi. */
body.cf-order-tracking-page form.track_order {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
body.cf-order-tracking-page form.track_order p {
	margin: 0;
}
body.cf-order-tracking-page form.track_order .form-row-first,
body.cf-order-tracking-page form.track_order .form-row-last {
	width: auto;
	float: none;
	margin: 0;
}
body.cf-order-tracking-page form.track_order .clear { display: none; }
body.cf-order-tracking-page form.track_order button[name="track"] {
	width: 100%;
}

/* ─── Timeline statut (formulaire de suivi premium) ─── */
.cf-tracking-timeline {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	margin: 0 0 8px;
	padding: 18px 4px 4px;
	position: relative;
}
@media (max-width: 600px) {
	.cf-tracking-timeline {
		grid-template-columns: 1fr;
		gap: 14px;
		padding: 10px 4px;
	}
}
.cf-tl-step {
	position: relative;
	text-align: center;
	padding-top: 26px;
	font-size: 11px;
	color: var(--taupe);
	font-weight: 500;
	letter-spacing: 0.4px;
}
@media (max-width: 600px) {
	.cf-tl-step {
		text-align: left;
		padding-top: 0;
		padding-left: 32px;
		display: flex;
		align-items: center;
	}
}
.cf-tl-step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 10px;
	left: 50%;
	width: 100%;
	height: 1px;
	background: var(--bsand);
	z-index: 0;
}
.cf-tl-step.is-active:not(:last-child)::after {
	background: var(--navy);
}
@media (max-width: 600px) {
	.cf-tl-step:not(:last-child)::after {
		top: 22px;
		left: 11px;
		width: 1px;
		height: 24px;
	}
}
.cf-tl-dot {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--bsand);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	z-index: 1;
}
.cf-tl-dot svg { width: 12px; height: 12px; }
@media (max-width: 600px) {
	.cf-tl-dot { left: 0; transform: none; }
}
.cf-tl-step.is-active .cf-tl-dot {
	background: var(--navy);
	border-color: var(--navy);
}
.cf-tl-step.is-current .cf-tl-dot {
	background: #fff;
	border: 2px solid var(--navy);
	box-shadow: 0 0 0 3px rgba(27, 63, 114, 0.14);
}
.cf-tl-step.is-active .cf-tl-label {
	color: var(--charcoal);
	font-weight: 600;
}
.cf-tl-step.is-current .cf-tl-label {
	color: var(--navy);
	font-weight: 700;
}

/* ════════════════════════════════════════════════════════════════════
 * 14. FOCUS VISIBLE — accessibilité
 * ════════════════════════════════════════════════════════════════════ */

.cf-account *:focus-visible,
.cf-account-menu-item a:focus-visible,
.cf-dash-quick-card:focus-visible,
.cf-dash-order-link:focus-visible,
.cf-concierge-btn:focus-visible,
.cf-account-back:focus-visible {
	outline: 2px solid var(--navy);
	outline-offset: 3px;
	border-radius: 4px;
}